fix(gui): clean up TypeScript errors in remote, viewers, and misc components (#307)

AGENT 10 Analysis - Remote, Viewers & Misc Components

Fixed TypeScript errors (TS6133 unused imports/variables) in the following files:

Remote Components:
- ContainerConnect.tsx: Removed unused Badge import, removed unused canStop function, fixed Text component class prop usage by using truncate prop and wrapper divs
- PortForwarding.tsx: Removed unused ForwardedPort type import
- TunnelManager.tsx: Removed unused onMount import
- WSLConnect.tsx: Removed unused createEffect import

Viewers:
- ImageViewer.tsx: Removed unused For import from solid-js
- SVGPreview.tsx: Removed unused monacoInstance variable, fixed null safety in editor content change handler

Misc Components:
- VoiceInput.tsx: Removed unused onCleanup import, removed unused stopListening from VoiceMicButton
- ToolchainSelector.tsx: Removed unused onCleanup import
- DesignSystemCard.tsx: Removed unused Input import
- PlanCard.tsx: Removed unused IconButton import

Co-authored-by: Droid Agent <droid@factory.ai>

Author: echobt

cortex-gui/src/components/ToolchainSelector.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createEffect, Show, For, onMount, onCleanup, createMemo } from "solid-js";
+import { createSignal, createEffect, Show, For, onMount, createMemo } from "solid-js";
 import { Icon } from "./ui/Icon";
 import { useToolchain, type ToolchainKind, type ToolchainInfo } from "@/context/ToolchainContext";
 

cortex-gui/src/components/VoiceInput.tsx

@@ -1,4 +1,4 @@
-import { Show, createMemo, createEffect, onCleanup } from "solid-js";
+import { Show, createMemo, createEffect } from "solid-js";
 import { Icon } from "./ui/Icon";
 import { useSpeech, type SpeechLanguage } from "@/context/SpeechContext";
 
@@ -35,7 +35,7 @@ export interface VoiceInputProps {
  * - Keyboard shortcut (Ctrl+Alt+V) handled by SpeechContext
  */
 export function VoiceInput(props: VoiceInputProps) {
-  const { state, startListening, stopListening, toggleListening, clearTranscript, setLanguage, getAvailableLanguages } = useSpeech();
+  const { state, stopListening, toggleListening, clearTranscript, setLanguage, getAvailableLanguages } = useSpeech();
 
   let languageSelectRef: HTMLSelectElement | undefined;
 
@@ -453,7 +453,7 @@ export function VoiceMicButton(props: {
   size?: "sm" | "md" | "lg";
   onTranscriptReady?: (transcript: string) => void;
 }) {
-  const { state, toggleListening, clearTranscript, stopListening } = useSpeech();
+  const { state, toggleListening, clearTranscript } = useSpeech();
 
   // Watch for transcript completion and notify parent
   createEffect(() => {

cortex-gui/src/components/remote/ContainerConnect.tsx

@@ -1,7 +1,7 @@
 import { createSignal, createEffect, For, Show, createMemo, onMount, onCleanup } from "solid-js";
 import { Icon } from "../ui/Icon";
 import { useRemote, DevContainer, ContainerStatus, DevContainerConfig } from "@/context/RemoteContext";
-import { Button, IconButton, Input, Text, Badge } from "@/components/ui";
+import { Button, IconButton, Input, Text } from "@/components/ui";
 
 interface ContainerConnectProps {
   onContainerSelect?: (containerId: string) => void;
@@ -56,7 +56,6 @@ function ContainerCard(props: {
 
   const canConnect = () => props.container.status === "running";
   const canStart = () => props.container.status === "stopped";
-  const canStop = () => props.container.status === "running" || props.container.status === "starting";
   const isBusy = () => props.container.status === "building" || props.container.status === "starting";
 
   const formatUptime = (startedAt?: number) => {
@@ -371,16 +370,18 @@ function BuildFromDevContainerDialog(props: {
                       >
                         <Icon name="gear" class="w-4 h-4 mt-0.5 flex-shrink-0" style={{ color: "var(--accent)" }} />
                         <div class="min-w-0">
-                          <Text size="sm" weight="medium" class="truncate">
+                          <Text size="sm" weight="medium" truncate>
                             {config.name || "Default Configuration"}
                           </Text>
-                          <Text size="xs" color="muted" class="truncate">
+                          <Text size="xs" color="muted" truncate>
                             {config.path}
                           </Text>
                           <Show when={config.image}>
-                            <Text size="xs" color="muted" class="mt-1">
-                              Image: {config.image}
-                            </Text>
+                            <div class="mt-1">
+                              <Text size="xs" color="muted">
+                                Image: {config.image}
+                              </Text>
+                            </div>
                           </Show>
                         </div>
                       </Button>
@@ -610,9 +611,11 @@ export function ContainerConnect(props: ContainerConnectProps) {
               <p class="text-sm font-medium mb-1" style={{ color: "var(--text-weak)" }}>
                 No Dev Containers
               </p>
-              <Text size="xs" color="muted" class="mb-4">
-                Build a container from devcontainer.json to get started
-              </Text>
+              <div class="mb-4">
+                <Text size="xs" color="muted">
+                  Build a container from devcontainer.json to get started
+                </Text>
+              </div>
               <Button
                 onClick={() => setShowBuildDialog(true)}
                 variant="primary"

cortex-gui/src/components/remote/PortForwarding.tsx

@@ -1,6 +1,6 @@
 import { createSignal, For, Show, onMount, onCleanup, createMemo } from "solid-js";
 import { Icon } from "../ui/Icon";
-import { useRemote, ForwardedPort, ForwardedPortStatus } from "@/context/RemoteContext";
+import { useRemote, ForwardedPortStatus } from "@/context/RemoteContext";
 import { Button, IconButton } from "@/components/ui";
 
 interface PortForwardingProps {

cortex-gui/src/components/remote/TunnelManager.tsx

@@ -1,4 +1,4 @@
-import { createSignal, For, Show, createMemo, onCleanup, onMount, createEffect } from "solid-js";
+import { createSignal, For, Show, createMemo, onCleanup, createEffect } from "solid-js";
 import { Icon } from "../ui/Icon";
 import { useRemote, TunnelInfo, TunnelStatus, TunnelAuthProvider } from "@/context/RemoteContext";
 import { Button, IconButton } from "@/components/ui";

cortex-gui/src/components/remote/WSLConnect.tsx

@@ -1,4 +1,4 @@
-import { createSignal, For, Show, onMount, createEffect } from "solid-js";
+import { createSignal, For, Show, onMount } from "solid-js";
 import { Icon } from "../ui/Icon";
 import { useRemote, WSLDistro, WSLConnectionStatus } from "@/context/RemoteContext";
 

cortex-gui/src/components/tools/DesignSystemCard.tsx

@@ -1,7 +1,7 @@
 import { Show, For, createSignal, createEffect, onMount, createMemo } from "solid-js";
 import { Icon } from "../ui/Icon";
 import { ToolCall, useSDK } from "@/context/SDKContext";
-import { Card, Button, Text, Badge, Input, IconButton } from "@/components/ui";
+import { Card, Button, Text, Badge, IconButton } from "@/components/ui";
 
 interface FontWeight {
   value: number;

cortex-gui/src/components/tools/PlanCard.tsx

@@ -1,6 +1,6 @@
 import { createSignal, Show, For } from "solid-js";
 import { Icon } from "../ui/Icon";
-import { Card, Button, Text, Badge, Textarea, IconButton } from "@/components/ui";
+import { Card, Button, Text, Badge, Textarea } from "@/components/ui";
 
 interface AgentAnalysis {
   agent: string;

cortex-gui/src/components/viewers/ImageViewer.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createEffect, onCleanup, Show, For, createMemo } from "solid-js";
+import { createSignal, createEffect, onCleanup, Show, createMemo } from "solid-js";
 import { Icon } from "../ui/Icon";
 import { fsReadFileBinary } from "../../utils/tauri-api";
 

cortex-gui/src/components/viewers/SVGPreview.tsx

@@ -156,7 +156,6 @@ export function SVGPreview(props: SVGPreviewProps) {
   let previewContainerRef: HTMLDivElement | undefined;
   let editorContainerRef: HTMLDivElement | undefined;
   let editorInstance: Monaco.editor.IStandaloneCodeEditor | null = null;
-  let monacoInstance: typeof Monaco | null = null;
 
   const [state, setState] = createStore<SVGPreviewState>({
     zoom: 100,
@@ -169,7 +168,7 @@ export function SVGPreview(props: SVGPreviewProps) {
   });
 
   const [localContent, setLocalContent] = createSignal(props.content);
-  const [isEditorReady, setIsEditorReady] = createSignal(false);
+  const [_isEditorReady, setIsEditorReady] = createSignal(false);
   const [splitRatio, setSplitRatio] = createSignal(0.5);
   const [isDraggingSplit, setIsDraggingSplit] = createSignal(false);
 
@@ -202,7 +201,6 @@ export function SVGPreview(props: SVGPreviewProps) {
     if (state.viewMode === "preview") return;
 
     const monaco = await MonacoManager.getInstance().ensureLoaded();
-    monacoInstance = monaco;
 
     if (!editorContainerRef) return;
 
@@ -245,9 +243,10 @@ export function SVGPreview(props: SVGPreviewProps) {
       },
     });
 
-    editorInstance.onDidChangeModelContent(() => {
-      if (!editorInstance) return;
-      const newContent = editorInstance.getValue();
+    // Register content change handler (editorInstance is guaranteed to be non-null here)
+    const editor = editorInstance;
+    editor.onDidChangeModelContent(() => {
+      const newContent = editor.getValue();
       setLocalContent(newContent);
       props.onContentChange?.(newContent);
     });