@stigmer/react 1.0.4 → 2.0.0

package/src/composer/SessionComposer.tsx

@@ -9,7 +9,6 @@ import { type ConfigureMenuItem } from "./ConfigureMenu";
 import type { HarnessOption } from "../models/harness";
 import type { InteractionModeOption } from "./InteractionModePicker";
 import { parseModelKey } from "../models/registry";
-import { ContextChip, type ChipItem } from "./ContextChip";
 import { WorkspaceEditor } from "../workspace/WorkspaceEditor";
 import { AgentPicker } from "../agent/AgentPicker";
 import { AgentEnvForm, type AgentEnvFormSubmitOptions } from "../agent/AgentEnvForm";
@@ -23,10 +22,11 @@ import { SessionVariablesInput } from "../execution/SessionVariablesInput";
 import type { UseSessionVariablesReturn } from "../execution/useSessionVariables";
 import type { UseWorkspaceEntriesReturn } from "../workspace/useWorkspaceEntries";
 import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection";
-import { useRunnerList } from "../runner/useRunnerList";
-import { WorkspaceRunnerSelector } from "../runner/WorkspaceRunnerSelector";
 import { useAttachments } from "../attachment/useAttachments";
 import { AttachmentChipList } from "../attachment/AttachmentChipList";
+import { useFileReferences } from "../file-reference/useFileReferences";
+import { FileReferenceChipList } from "../file-reference/FileReferenceChipList";
+import { FILE_REF_MIME } from "../internal/file-tree";
 import { useSessionEnvPool } from "../environment/useSessionEnvPool";
 import { usePersonalEnvironment } from "../environment/usePersonalEnvironment";
 import { useStigmer } from "../hooks";
@@ -35,19 +35,11 @@ import {
   resolveSystemEnvVarValues,
 } from "../environment/systemEnvVars";
 import { useRenderTracer } from "../internal/dev";
-import { RunnerPhase } from "@stigmer/protos/ai/stigmer/agentic/runner/v1/enum_pb";
-import {
-  isActivePhase,
-  phaseLabel,
-  phaseDotColor,
-  PHASE_SORT_ORDER,
-} from "../runner/phase";
 import {
   AgentIcon,
   McpServerIcon,
   SkillIcon,
   SecretsIcon,
-  RunnerIcon,
   AlertTriangleIcon,
   ResolveSpinner,
 } from "./icons";
@@ -121,6 +113,16 @@ export interface SessionComposerSubmitContext {
    * Pass to execution creation as `execution_config.interaction_mode`.
    */
   readonly interactionMode?: InteractionModeOption;
+  /**
+   * Workspace-relative file paths the user referenced via drag-to-reference.
+   *
+   * These are lightweight "attention" signals — the agent reads the files
+   * directly from the workspace filesystem. No upload, no injection.
+   *
+   * `undefined` when no file references are present.
+   * Pass to execution creation as `workspaceFileRefs`.
+   */
+  readonly workspaceFileRefs?: string[];
 }
 
 /** Props for {@link SessionComposer}. */
@@ -287,24 +289,6 @@ export interface SessionComposerProps {
   /** Called when the skill selection changes. Providing this enables the skill trigger. */
   readonly onSkillRefsChange?: (refs: ResourceRef[]) => void;
 
-  /**
-   * Currently selected runner ID, or `null` for "Auto" (backend decides).
-   *
-   * When `onRunnerIdChange` is provided and `org` is set, renders a
-   * runner picker in the toolbar's Tier 1 (alongside Model Selector).
-   *
-   * The selected runner ID flows through to `session.create({ runnerId })`
-   * so the session is bound to that runner's task queue.
-   */
-  readonly runnerId?: string | null;
-  /**
-   * Called when the user selects a different runner. `null` = "Auto".
-   *
-   * Providing this callback enables the runner picker in the toolbar.
-   * Requires `org` to be set (same prerequisite as agent/MCP pickers).
-   */
-  readonly onRunnerIdChange?: (runnerId: string | null) => void;
-
   /**
    * Session variables state managed by {@link useSessionVariables}.
    * When provided, renders a "Session Variables" trigger in the toolbar
@@ -329,6 +313,17 @@ export interface SessionComposerProps {
    */
   readonly enableAttachments?: boolean;
 
+  /**
+   * Enable workspace file-reference support via drag-to-reference.
+   *
+   * When `true`, dragging a file from the workspace tree into the
+   * composer creates a file-reference chip (no upload). Referenced
+   * paths are included in `context.workspaceFileRefs` on submit.
+   *
+   * @default true
+   */
+  readonly enableFileReferences?: boolean;
+
   /**
    * Called when a file is rejected (e.g., exceeds the 10 MB limit).
    * Consumers can use this for toast notifications.
@@ -466,10 +461,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   onMcpServerUsagesChange,
   skillRefs,
   onSkillRefsChange,
-  runnerId,
-  onRunnerIdChange,
   sessionVariables,
   enableAttachments = true,
+  enableFileReferences = true,
   onAttachmentValidationError,
   initialAttachments,
   placeholder = "Reply\u2026",
@@ -507,46 +501,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   const showMcp = onMcpServerUsagesChange != null && org != null;
   const showWorkspace = workspace != null;
   const showSkills = onSkillRefsChange != null && org != null;
-  const showRunner = onRunnerIdChange != null && org != null;
   const showSessionVars = sessionVariables != null;
   const showAttach = enableAttachments;
 
-  // ---------------------------------------------------------------------------
-  // Runner resolution — name for contextual hint + ID for file browsing
-  // ---------------------------------------------------------------------------
-
-  const needsRunnerList = showRunner && (runnerId || (showWorkspace && enableLocal));
-
-  const { runners: runnerListForBrowse } = useRunnerList(
-    needsRunnerList ? (org ?? null) : null,
-  );
-
-  const selectedRunner = useMemo(() => {
-    if (!runnerId) return undefined;
-    return runnerListForBrowse.find((r) => r.metadata?.id === runnerId);
-  }, [runnerId, runnerListForBrowse]);
-
-  const selectedRunnerName = selectedRunner?.metadata?.name;
-  const selectedRunnerHostname = selectedRunner?.status?.connectionInfo?.hostname;
-
-  const browseRunnerId = runnerId ?? null;
-
-  // ---------------------------------------------------------------------------
-  // Runner-switch safety — clear local workspace entries when runner changes
-  // ---------------------------------------------------------------------------
-
-  const prevRunnerIdRef = useRef(runnerId);
-
-  useEffect(() => {
-    if (prevRunnerIdRef.current !== runnerId) {
-      const hadLocal = workspace?.entries.some((e) => e.type === "local");
-      prevRunnerIdRef.current = runnerId;
-      if (hadLocal) {
-        workspace?.clearLocal();
-      }
-    }
-  }, [runnerId, workspace]);
-
   // ---------------------------------------------------------------------------
   // Configure menu state — drives the Tier 2 drill-down popover
   // ---------------------------------------------------------------------------
@@ -616,8 +573,10 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       ? { onValidationError: onAttachmentValidationError }
       : undefined,
   );
+  const fileRefs = useFileReferences();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragOver, setIsDragOver] = useState(false);
+  const [isDragOverFileRef, setIsDragOverFileRef] = useState(false);
 
   const handleFileInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -631,12 +590,21 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
 
   const handleDragOver = useCallback(
     (e: DragEvent) => {
+      const hasFileRef = e.dataTransfer.types.includes(FILE_REF_MIME);
+      if (hasFileRef && enableFileReferences && !isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOverFileRef(true);
+        setIsDragOver(true);
+        return;
+      }
       if (!enableAttachments || isDisabled) return;
       e.preventDefault();
       e.stopPropagation();
+      setIsDragOverFileRef(false);
       setIsDragOver(true);
     },
-    [enableAttachments, isDisabled],
+    [enableAttachments, enableFileReferences, isDisabled],
   );
 
   const handleDragLeave = useCallback(
@@ -644,6 +612,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       e.preventDefault();
       e.stopPropagation();
       setIsDragOver(false);
+      setIsDragOverFileRef(false);
     },
     [],
   );
@@ -653,12 +622,27 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       e.preventDefault();
       e.stopPropagation();
       setIsDragOver(false);
-      if (!enableAttachments || isDisabled) return;
+      setIsDragOverFileRef(false);
+
+      if (isDisabled) return;
+
+      const fileRefData = e.dataTransfer.getData(FILE_REF_MIME);
+      if (fileRefData && enableFileReferences) {
+        try {
+          const { path } = JSON.parse(fileRefData) as { path: string };
+          if (path) fileRefs.add(path);
+        } catch {
+          // Malformed payload — ignore silently
+        }
+        return;
+      }
+
+      if (!enableAttachments) return;
       if (e.dataTransfer.files.length > 0) {
         attachments.addFiles(e.dataTransfer.files);
       }
     },
-    [enableAttachments, isDisabled, attachments],
+    [enableAttachments, enableFileReferences, isDisabled, attachments, fileRefs],
   );
 
   // ---------------------------------------------------------------------------
@@ -716,13 +700,15 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         showInteractionModePicker && interactionMode
           ? interactionMode
           : undefined;
+      const hasFileRefs = enableFileReferences && fileRefs.hasRefs;
 
       const context: SessionComposerSubmitContext | undefined =
-        hasEnv || hasAttachments || effectiveMode
+        hasEnv || hasAttachments || effectiveMode || hasFileRefs
           ? {
               runtimeEnv: hasEnv ? env : undefined,
               attachments: hasAttachments ? attachmentInputs : undefined,
               interactionMode: effectiveMode,
+              workspaceFileRefs: hasFileRefs ? [...fileRefs.refs] : undefined,
             }
           : undefined;
 
@@ -734,6 +720,9 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       if (enableAttachments) {
         attachments.clear();
       }
+      if (enableFileReferences) {
+        fileRefs.clear();
+      }
     },
     [onSubmit, modelId, stigmer, agentSetup.state, mcpSetup.pendingRuntimeEnv, sessionVariables, enableAttachments, attachments, personalEnv, showInteractionModePicker, interactionMode],
   );
@@ -882,16 +871,6 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     ],
   );
 
-  const handleAgentChipRemove = useCallback(() => {
-    onAgentRefChange?.(null);
-    onAgentResolutionChange?.(null);
-  }, [onAgentRefChange, onAgentResolutionChange]);
-
-  const handlePendingAgentChipRemove = useCallback(() => {
-    agentSetup.reset();
-    onAgentRefChange?.(null);
-    onAgentResolutionChange?.(null);
-  }, [agentSetup, onAgentRefChange, onAgentResolutionChange]);
 
   // ---------------------------------------------------------------------------
   // Initial agent: auto-resolve on mount when initialAgentRef is provided
@@ -1017,142 +996,30 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     [canSend, composer.textareaProps],
   );
 
-  // ---------------------------------------------------------------------------
-  // Chips — aggregated from all context sources
-  // ---------------------------------------------------------------------------
-
-  const chips = useMemo(() => {
-    const items: ChipItem[] = [];
-
-    if (agentRef) {
-      const refStr = `${agentRef.org}/${agentRef.slug}`;
-      items.push({
-        key: `agent:${refStr}`,
-        label: displayNames.get(refStr) ?? agentRef.slug,
-        type: "agent",
-        onRemove: isDefaultAgent ? undefined : handleAgentChipRemove,
-      });
-    } else if (
-      agentSetup.state.status === "needsEnvVars" ||
-      agentSetup.state.status === "resolving" ||
-      agentSetup.state.status === "submitting"
-    ) {
-      const st = agentSetup.state;
-      const ref = st.agentRef;
-      const refStr = `${ref.org}/${ref.slug}`;
-      const name =
-        st.status !== "resolving"
-          ? st.agentName
-          : (displayNames.get(refStr) ?? ref.slug);
-
-      items.push({
-        key: `agent:${refStr}`,
-        label: name,
-        type: "agent",
-        onRemove: handlePendingAgentChipRemove,
-        status:
-          st.status === "resolving"
-            ? "loading"
-            : st.status === "submitting"
-              ? "submitting"
-              : "needsSetup",
-        onClick:
-          st.status === "needsEnvVars"
-            ? () => {
-                setConfigOpen(true);
-                setConfigActivePanel("agent");
-              }
-            : undefined,
-      });
-    }
-
-    if (showMcp) {
-      for (const [key, entry] of Object.entries(mcpSetup.entries)) {
-        const slug = key.slice(key.indexOf("/") + 1);
-        const name =
-          entry.status !== "loading"
-            ? (entry.mcpServer.metadata?.name ?? displayNames.get(key) ?? slug)
-            : (displayNames.get(key) ?? slug);
-
-        let detail: string | undefined;
-        if (
-          entry.status === "ready" &&
-          entry.discoveredTools.length > 0 &&
-          entry.enabledTools.length < entry.discoveredTools.length
-        ) {
-          detail = `${entry.enabledTools.length}/${entry.discoveredTools.length}`;
-        }
-
-        items.push({
-          key: `mcp:${key}`,
-          label: name,
-          type: "mcp",
-          onRemove: () => mcpSetup.removeServer(mcpRefFromKey(key)),
-          status: entry.status,
-          detail,
-          onClick:
-            entry.status === "needsSetup"
-              ? () => {
-                  configMcpInitialServerKeyRef.current = key;
-                  setConfigOpen(true);
-                  setConfigActivePanel("mcp");
-                }
-              : undefined,
-        });
-      }
-    }
-
-    if (skillRefs) {
-      for (const ref of skillRefs) {
-        const refStr = `${ref.org}/${ref.slug}`;
-        items.push({
-          key: `skill:${refStr}`,
-          label: displayNames.get(refStr) ?? ref.slug,
-          type: "skill",
-          onRemove: () => {
-            onSkillRefsChange?.(
-              skillRefs.filter((r) => `${r.org}/${r.slug}` !== refStr),
-            );
-          },
-        });
-      }
-    }
+  const workspaceCount = workspace?.entries.length ?? 0;
 
-    if (sessionVariables) {
-      for (const entry of sessionVariables.entries) {
-        const k = entry.key.trim();
-        if (k === "") continue;
-        items.push({
-          key: `secret:${entry.id}`,
-          label: k,
-          type: "secret",
-          onRemove: () => sessionVariables.removeEntry(entry.id),
-        });
-      }
+  // When only one source type is enabled and no entries exist yet, bypass
+  // the popover entirely (desktop) or auto-drill into the GitHub panel (web).
+  const workspaceDirectAction = useMemo(() => {
+    if (workspaceCount > 0) return undefined;
+    if (enableLocal && !enableGitHub && onBrowseLocalFolder) {
+      return async () => {
+        const path = await onBrowseLocalFolder();
+        if (path) workspace?.addLocalPath(path);
+      };
     }
+    return undefined;
+  }, [workspaceCount, enableLocal, enableGitHub, onBrowseLocalFolder, workspace]);
+
+  const workspaceInitialPanel = useMemo(
+    () => {
+      if (workspaceCount > 0) return null;
+      if (enableGitHub && !enableLocal) return "github" as const;
+      return null;
+    },
+    [workspaceCount, enableGitHub, enableLocal],
+  );
 
-    return items;
-  }, [
-    agentRef,
-    isDefaultAgent,
-    agentSetup.state,
-    handleAgentChipRemove,
-    handlePendingAgentChipRemove,
-    workspace,
-    showMcp,
-    mcpSetup.entries,
-    mcpSetup.removeServer,
-    skillRefs,
-    showRunner,
-    runnerId,
-    selectedRunnerName,
-    onRunnerIdChange,
-    sessionVariables,
-    displayNames,
-    onSkillRefsChange,
-  ]);
-
-  const workspaceCount = workspace?.entries.length ?? 0;
   const mcpCount = showMcp ? Object.keys(mcpSetup.entries).length : 0;
   const skillCount = skillRefs?.length ?? 0;
   const sessionVarCount = sessionVariables?.entries.length ?? 0;
@@ -1221,14 +1088,6 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         count: skillCount,
       });
     }
-    if (showRunner && !showWorkspace) {
-      items.push({
-        id: "runner",
-        icon: <RunnerIcon />,
-        label: "Runner",
-        count: runnerId ? 1 : 0,
-      });
-    }
     if (showSessionVars) {
       items.push({
         id: "sessionVars",
@@ -1238,7 +1097,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       });
     }
     return items;
-  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showRunner, showWorkspace, runnerId, showSessionVars, sessionVarCount]);
+  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showSessionVars, sessionVarCount]);
 
   const renderConfigPanel = useCallback(
     (panelId: string): React.ReactNode => {
@@ -1320,16 +1179,6 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
             />
           );
 
-        case "runner":
-          return (
-            <RunnerConfigPanel
-              org={org!}
-              value={runnerId ?? null}
-              onChange={(id) => onRunnerIdChange?.(id)}
-              disabled={isDisabled}
-            />
-          );
-
         case "sessionVars":
           return (
             <SessionVariablesInput
@@ -1356,8 +1205,6 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
       mcpSetup,
       skillRefs,
       onSkillRefsChange,
-      runnerId,
-      onRunnerIdChange,
       sessionVariables,
       pool,
       requiredByMap,
@@ -1398,7 +1245,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           {isDragOver && (
             <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-t-xl bg-primary-subtle">
               <span className="text-xs font-medium text-primary">
-                Drop files to attach
+                {isDragOverFileRef ? "Reference workspace file" : "Drop files to attach"}
               </span>
             </div>
           )}
@@ -1417,34 +1264,26 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           />
         )}
 
-        {/* Zone 2: Context chips */}
-        {chips.length > 0 && (
-          <div className="flex flex-wrap gap-1.5 px-3 pb-2">
-            {chips.map((chip) => (
-              <ContextChip
-                key={chip.key}
-                label={chip.label}
-                type={chip.type}
-                onRemove={chip.onRemove}
+        {/* Zone 2.5: Attachment and file-reference chips */}
+        {(showAttach && attachments.hasEntries) || (enableFileReferences && fileRefs.hasRefs) ? (
+          <div className="space-y-1.5 px-3 pb-2">
+            {showAttach && attachments.hasEntries && (
+              <AttachmentChipList
+                entries={attachments.entries}
+                onRemove={attachments.removeEntry}
+                onRetry={attachments.retryEntry}
                 disabled={isDisabled}
-                status={chip.status}
-                detail={chip.detail}
-                onClick={chip.onClick}
               />
-            ))}
+            )}
+            {enableFileReferences && fileRefs.hasRefs && (
+              <FileReferenceChipList
+                refs={fileRefs.refs}
+                onRemove={fileRefs.remove}
+                disabled={isDisabled}
+              />
+            )}
           </div>
-        )}
-
-        {/* Zone 2.5: Attachment chips */}
-        {showAttach && attachments.hasEntries && (
-          <AttachmentChipList
-            entries={attachments.entries}
-            onRemove={attachments.removeEntry}
-            onRetry={attachments.retryEntry}
-            disabled={isDisabled}
-            className="px-3 pb-2"
-          />
-        )}
+        ) : null}
 
         {/* Zone 2.7: Agent setup warning */}
         {showAgent &&
@@ -1512,29 +1351,18 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           onSend={composer.submit}
           showWorkspace={showWorkspace}
           workspaceCount={workspaceCount}
+          onWorkspaceDirectAction={workspaceDirectAction}
           workspaceContent={
             workspace
-              ? <div className="space-y-3">
-                  {showRunner && org && (
-                    <WorkspaceRunnerSelector
-                      org={org}
-                      value={runnerId ?? null}
-                      onChange={(id) => onRunnerIdChange?.(id)}
-                      disabled={isDisabled}
-                    />
-                  )}
-                  <WorkspaceEditor
+              ? <WorkspaceEditor
                     workspace={workspace}
                     disabled={isDisabled}
                     gitHubConnection={gitHubConnection}
                     enableGitHub={enableGitHub}
                     enableLocal={enableLocal}
-                    runnerId={browseRunnerId}
-                    onBrowseLocalFolder={runnerId ? onBrowseLocalFolder : undefined}
-                    runnerName={selectedRunnerName}
-                    runnerHostname={selectedRunnerHostname}
+                    onBrowseLocalFolder={onBrowseLocalFolder}
+                    initialPanel={workspaceInitialPanel}
                   />
-                </div>
               : null
           }
           showAttach={showAttach}
@@ -1592,166 +1420,3 @@ function mcpRefFromKey(key: string): ResourceRef {
   };
 }
 
-// ---------------------------------------------------------------------------
-// Runner config panel — inline list for the Configure menu
-// ---------------------------------------------------------------------------
-
-function RunnerConfigPanel({
-  org,
-  value,
-  onChange,
-  disabled,
-}: {
-  org: string;
-  value: string | null;
-  onChange: (runnerId: string | null) => void;
-  disabled?: boolean;
-}) {
-  const { runners, isLoading } = useRunnerList(org);
-
-  const { active, inactive } = useMemo(() => {
-    type R = (typeof runners)[number];
-    const act: R[] = [];
-    const inact: R[] = [];
-    for (const r of runners) {
-      if (isActivePhase(r.status?.phase ?? RunnerPhase.UNSPECIFIED)) {
-        act.push(r);
-      } else {
-        inact.push(r);
-      }
-    }
-    const sorter = (a: R, b: R) => {
-      const pa = a.status?.phase ?? RunnerPhase.UNSPECIFIED;
-      const pb = b.status?.phase ?? RunnerPhase.UNSPECIFIED;
-      const po = PHASE_SORT_ORDER[pa] - PHASE_SORT_ORDER[pb];
-      if (po !== 0) return po;
-      return (a.metadata?.name ?? "").localeCompare(b.metadata?.name ?? "");
-    };
-    act.sort(sorter);
-    inact.sort(sorter);
-    return { active: act, inactive: inact };
-  }, [runners]);
-
-  const isAutoSelected = value === null;
-
-  return (
-    <div className="w-72 space-y-1">
-      {/* Auto option */}
-      <button
-        type="button"
-        onClick={() => onChange(null)}
-        disabled={disabled}
-        className={cn(
-          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
-          "disabled:pointer-events-none disabled:opacity-50",
-          isAutoSelected
-            ? "bg-accent font-medium text-foreground"
-            : "text-foreground hover:bg-accent-hover",
-        )}
-        role="option"
-        aria-selected={isAutoSelected}
-      >
-        <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-primary" aria-hidden="true" />
-        <span className="flex-1">Default</span>
-        <span className="text-[0.6rem] text-muted-foreground">auto</span>
-      </button>
-
-      {/* Available runners */}
-      {active.length > 0 && (
-        <>
-          <div className="px-2 pt-1 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
-            Available
-          </div>
-          {active.map((r) => {
-            const id = r.metadata!.id;
-            const name = r.metadata?.name ?? "Unnamed";
-            const phase = r.status?.phase ?? RunnerPhase.UNSPECIFIED;
-            const hostname = r.status?.connectionInfo?.hostname;
-            const isSelected = value === id;
-            return (
-              <button
-                key={id}
-                type="button"
-                onClick={() => onChange(id)}
-                disabled={disabled}
-                className={cn(
-                  "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
-                  "disabled:pointer-events-none disabled:opacity-50",
-                  isSelected
-                    ? "bg-accent font-medium text-foreground"
-                    : "text-foreground hover:bg-accent-hover",
-                )}
-                role="option"
-                aria-selected={isSelected}
-              >
-                <span
-                  className={`inline-block h-1.5 w-1.5 shrink-0 rounded-full ${phaseDotColor(phase)}`}
-                  aria-hidden="true"
-                />
-                <div className="flex min-w-0 flex-1 flex-col">
-                  <span className="truncate">{name}</span>
-                  {hostname && (
-                    <span className="truncate text-[0.6rem] leading-tight text-muted-foreground">
-                      {hostname}
-                    </span>
-                  )}
-                </div>
-                <span className="shrink-0 text-[0.6rem] lowercase text-muted-foreground">
-                  {phaseLabel(phase)}
-                </span>
-              </button>
-            );
-          })}
-        </>
-      )}
-
-      {/* Offline runners */}
-      {inactive.length > 0 && (
-        <>
-          <div className="px-2 pt-1 text-[0.65rem] font-medium uppercase tracking-wider text-muted-foreground">
-            Offline
-          </div>
-          {inactive.map((r) => {
-            const id = r.metadata!.id;
-            const name = r.metadata?.name ?? "Unnamed";
-            const phase = r.status?.phase ?? RunnerPhase.UNSPECIFIED;
-            return (
-              <div
-                key={id}
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs text-muted-foreground opacity-50"
-              >
-                <span
-                  className={`inline-block h-1.5 w-1.5 shrink-0 rounded-full ${phaseDotColor(phase)}`}
-                  aria-hidden="true"
-                />
-                <span className="min-w-0 flex-1 truncate">{name}</span>
-                <span className="shrink-0 text-[0.6rem] lowercase">
-                  {phaseLabel(phase)}
-                </span>
-              </div>
-            );
-          })}
-        </>
-      )}
-
-      {/* Empty state */}
-      {runners.length === 0 && !isLoading && (
-        <p className="py-3 text-center text-xs text-muted-foreground">
-          No runners registered. Use the CLI or desktop app to start one.
-        </p>
-      )}
-
-      {/* Loading state */}
-      {isLoading && (
-        <div className="py-3 text-center text-xs text-muted-foreground">
-          Loading runners...
-        </div>
-      )}
-
-      {/* Hint */}
-      <p className="px-2 pt-1 text-[0.6rem] leading-relaxed text-muted-foreground">
-        Default assigns a cloud runner automatically. Select a specific runner to execute on your own machine.
-      </p>
-    </div>
-  );
-}