@stigmer/react 0.0.92 → 0.0.94

package/src/session/useSessionPageFlow.ts

@@ -0,0 +1,280 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { McpServerUsageInput, ResourceRef } from "@stigmer/sdk";
+import type { AgentResolution } from "../agent";
+import { useDefaultAgent } from "../agent";
+import { useStigmer } from "../hooks";
+import { useWorkspaceEntries, type UseWorkspaceEntriesReturn } from "../workspace";
+import { useSessionVariables, type UseSessionVariablesReturn } from "../execution/useSessionVariables";
+import type { SessionComposerSubmitContext } from "../composer";
+import { useSessionConversation, type UseSessionConversationReturn } from "./useSessionConversation";
+import { useAgentRefFromSession } from "./useAgentRefFromSession";
+import { usePersistedModel, type UsePersistedModelReturn } from "./usePersistedModel";
+
+/**
+ * Well-known Daytona sandbox workspace root. Used as the SDK safety-net
+ * normalization target for cloud sessions (git-repo workspace entries).
+ */
+const DAYTONA_WORKSPACE_ROOT = "/home/daytona/workspace";
+
+/** Options for {@link useSessionPageFlow}. */
+export interface UseSessionPageFlowOptions {
+  /** Session ID to load and manage. */
+  readonly sessionId: string;
+  /** Organization slug. */
+  readonly org: string;
+}
+
+/** Return value of {@link useSessionPageFlow}. */
+export interface UseSessionPageFlowReturn {
+  /** Full conversation state from `useSessionConversation`. */
+  readonly conv: UseSessionConversationReturn;
+
+  /** Persisted model selection: `[modelId, setModelId]`. */
+  readonly model: UsePersistedModelReturn;
+
+  /** Currently selected agent reference (derived from session, or overridden by user). */
+  readonly agentRef: ResourceRef | null;
+  /** Update the agent reference for future follow-ups. */
+  readonly setAgentRef: (ref: ResourceRef | null) => void;
+  /** Current agent resolution state. */
+  readonly resolution: AgentResolution | null;
+  /** Update the agent resolution. */
+  readonly setResolution: (r: AgentResolution | null) => void;
+
+  /** Active MCP server configurations for follow-ups. */
+  readonly mcpServerUsages: McpServerUsageInput[];
+  /** Update MCP server configurations. */
+  readonly setMcpServerUsages: (usages: McpServerUsageInput[]) => void;
+
+  /** Active skill references for follow-ups. */
+  readonly skillRefs: ResourceRef[];
+  /** Update skill references. */
+  readonly setSkillRefs: (refs: ResourceRef[]) => void;
+
+  /** Workspace entries manager (synced from session on load). */
+  readonly workspace: UseWorkspaceEntriesReturn;
+  /** Session variables (per-execution secrets) manager. */
+  readonly sessionVariables: UseSessionVariablesReturn;
+
+  /**
+   * Submit a follow-up message. Handles agent override resolution
+   * (if the user changed the agent mid-session) and delegates to
+   * `conv.sendFollowUp` with all managed state.
+   */
+  readonly handleSubmit: (
+    message: string,
+    model?: string,
+    context?: SessionComposerSubmitContext,
+  ) => Promise<void>;
+
+  /**
+   * The most relevant execution for sidebar display — the active
+   * streaming execution, or the last completed one.
+   */
+  readonly displayExecution: UseSessionConversationReturn["activeStreamExecution"];
+
+  /**
+   * All executions for widget display (completed + active stream).
+   */
+  readonly allExecutions: UseSessionConversationReturn["completedExecutions"];
+
+  /**
+   * Sandbox workspace root for file path normalization, or `undefined`
+   * when the session has no git-repo workspace entries.
+   */
+  readonly sandboxWorkspaceRoot: string | undefined;
+}
+
+/**
+ * Orchestrates the session page experience.
+ *
+ * Composes `useSessionConversation` with agent resolution, workspace
+ * synchronization, model persistence, and follow-up submission logic.
+ * Returns everything a session page needs to render its UI without
+ * duplicating domain orchestration.
+ *
+ * Framework-agnostic — works identically in Next.js, Vite, Tauri, or
+ * any React environment. The consumer provides layout, error states,
+ * and loading skeletons.
+ *
+ * @example
+ * ```tsx
+ * const flow = useSessionPageFlow({ sessionId: "ses_abc", org: "acme" });
+ *
+ * if (flow.conv.isLoading) return <Spinner />;
+ * if (flow.conv.loadError) return <ErrorView error={flow.conv.loadError} />;
+ *
+ * return (
+ *   <>
+ *     <MessageThread
+ *       executions={flow.conv.completedExecutions}
+ *       activeStreamExecution={flow.conv.activeStreamExecution}
+ *       sandboxWorkspaceRoot={flow.sandboxWorkspaceRoot}
+ *     />
+ *     <SessionComposer
+ *       onSubmit={flow.handleSubmit}
+ *       isSubmitting={flow.conv.isSending}
+ *       disabled={!flow.conv.canSendFollowUp}
+ *       workspace={flow.workspace}
+ *       agentRef={flow.agentRef}
+ *       onAgentRefChange={flow.setAgentRef}
+ *       onAgentResolutionChange={flow.setResolution}
+ *       defaultModelId={flow.model[0]}
+ *       onModelChange={flow.model[1]}
+ *     />
+ *   </>
+ * );
+ * ```
+ */
+export function useSessionPageFlow(
+  options: UseSessionPageFlowOptions,
+): UseSessionPageFlowReturn {
+  const { sessionId, org } = options;
+
+  const stigmer = useStigmer();
+  const conv = useSessionConversation(sessionId, org);
+  const model = usePersistedModel();
+  const [modelId] = model;
+
+  const workspace = useWorkspaceEntries();
+  const sessionVariables = useSessionVariables();
+  const [mcpServerUsages, setMcpServerUsages] = useState<McpServerUsageInput[]>([]);
+  const [skillRefs, setSkillRefs] = useState<ResourceRef[]>([]);
+  const initialSyncDone = useRef(false);
+
+  // -------------------------------------------------------------------------
+  // Agent — derive from session, allow mid-session changes
+  // -------------------------------------------------------------------------
+
+  const sessionInstanceId = conv.session?.spec?.agentInstanceId ?? null;
+  const { agentRef: derivedAgentRef } = useAgentRefFromSession(sessionInstanceId);
+  const { agent: defaultAgent, isLoading: isDefaultAgentLoading } = useDefaultAgent(org);
+
+  const [agentRef, setAgentRef] = useState<ResourceRef | null>(null);
+  const [resolution, setResolution] = useState<AgentResolution | null>(null);
+  const [agentInitDone, setAgentInitDone] = useState(false);
+
+  if (!agentInitDone && derivedAgentRef && sessionInstanceId && !isDefaultAgentLoading) {
+    setAgentInitDone(true);
+
+    const isDefault =
+      defaultAgent &&
+      derivedAgentRef.org === defaultAgent.metadata?.org &&
+      derivedAgentRef.slug === defaultAgent.metadata?.slug;
+
+    if (!isDefault) {
+      setAgentRef(derivedAgentRef);
+      setResolution({ mode: "saved", instanceId: sessionInstanceId });
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Workspace — sync entries from session on first load
+  // -------------------------------------------------------------------------
+
+  useEffect(() => {
+    if (!conv.session || initialSyncDone.current) return;
+    initialSyncDone.current = true;
+
+    const protoEntries = conv.session.spec?.workspaceEntries ?? [];
+    for (const entry of protoEntries) {
+      if (entry.source?.source.case === "gitRepo") {
+        const { url, branch } = entry.source.source.value;
+        workspace.addGitRepo(url, branch || undefined);
+      } else if (entry.source?.source.case === "localPath") {
+        workspace.addLocalPath(entry.source.source.value.path);
+      }
+    }
+  }, [conv.session, workspace]);
+
+  // -------------------------------------------------------------------------
+  // Follow-up submission with agent override
+  // -------------------------------------------------------------------------
+
+  const handleSubmit = useCallback(
+    async (
+      message: string,
+      selectedModel?: string,
+      context?: SessionComposerSubmitContext,
+    ) => {
+      let agentInstanceIdOverride: string | undefined;
+
+      if (resolution) {
+        if (
+          resolution.mode === "saved" &&
+          resolution.instanceId !== sessionInstanceId
+        ) {
+          agentInstanceIdOverride = resolution.instanceId;
+        } else if (resolution.mode === "direct" && agentRef) {
+          const agent = await stigmer.agent.getByReference(agentRef);
+          const defaultId = agent.status?.defaultInstanceId;
+          if (defaultId && defaultId !== sessionInstanceId) {
+            agentInstanceIdOverride = defaultId;
+          }
+        }
+      }
+
+      conv.sendFollowUp(message, {
+        agentInstanceId: agentInstanceIdOverride,
+        modelName: selectedModel ?? modelId,
+        workspaceEntries: workspace.hasEntries
+          ? workspace.toInput()
+          : undefined,
+        mcpServerUsages: mcpServerUsages.length > 0 ? mcpServerUsages : undefined,
+        skillRefs: skillRefs.length > 0 ? skillRefs : undefined,
+        runtimeEnv: context?.runtimeEnv,
+        attachments: context?.attachments,
+      });
+
+      sessionVariables.clear();
+    },
+    [conv, modelId, workspace, mcpServerUsages, skillRefs, sessionVariables, resolution, agentRef, sessionInstanceId, stigmer],
+  );
+
+  // -------------------------------------------------------------------------
+  // Derived display state
+  // -------------------------------------------------------------------------
+
+  const displayExecution = useMemo(() => {
+    if (conv.activeStreamExecution) return conv.activeStreamExecution;
+    const completed = conv.completedExecutions;
+    return completed.length > 0 ? completed[completed.length - 1] : null;
+  }, [conv.activeStreamExecution, conv.completedExecutions]);
+
+  const allExecutions = useMemo(
+    () => [
+      ...conv.completedExecutions,
+      ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
+    ],
+    [conv.completedExecutions, conv.activeStreamExecution],
+  );
+
+  const sandboxWorkspaceRoot = useMemo(() => {
+    const entries = conv.workspaceEntries;
+    const hasGitRepo = entries.some(
+      (e) => e.source?.source.case === "gitRepo",
+    );
+    return hasGitRepo ? DAYTONA_WORKSPACE_ROOT : undefined;
+  }, [conv.workspaceEntries]);
+
+  return {
+    conv,
+    model,
+    agentRef,
+    setAgentRef,
+    resolution,
+    setResolution,
+    mcpServerUsages,
+    setMcpServerUsages,
+    skillRefs,
+    setSkillRefs,
+    workspace,
+    sessionVariables,
+    handleSubmit,
+    displayExecution,
+    allExecutions,
+    sandboxWorkspaceRoot,
+  };
+}

package/src/skill/SkillDetailView.tsx

@@ -304,7 +304,7 @@ function GitProvenanceDisplay({
           {repoUrl ? (
             <a
               href={repoUrl}
-              className="text-primary underline underline-offset-2 hover:text-primary/80"
+              className="text-primary underline underline-offset-2 hover:text-primary-muted"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -396,14 +396,14 @@ function LoadingSkeleton({ className }: { readonly className?: string }) {
       <div className="space-y-2">
         <div className="h-3 w-28 animate-pulse rounded bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted/30"
+          className="animate-pulse rounded-lg border border-border bg-muted-faint"
           style={{ height: "240px" }}
         />
       </div>
       <div className="space-y-2">
         <div className="h-3 w-20 animate-pulse rounded bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted/30"
+          className="animate-pulse rounded-lg border border-border bg-muted-faint"
           style={{ height: "64px" }}
         />
       </div>
@@ -420,11 +420,11 @@ function NotFoundState({ className }: { readonly className?: string }) {
         className,
       )}
     >
-      <SkillIcon className="size-10 text-muted-foreground/40" />
+      <SkillIcon className="size-10 text-muted-foreground-faint" />
       <p className="text-sm font-medium text-muted-foreground">
         Skill not found
       </p>
-      <p className="text-xs text-muted-foreground/60">
+      <p className="text-xs text-muted-foreground-subtle">
         This skill doesn&apos;t exist or you don&apos;t have access to it.
       </p>
     </div>

package/src/skill/SkillPicker.tsx

@@ -173,7 +173,7 @@ export function SkillPicker({
                 return (
                   <div
                     key={key}
-                    className="flex items-center gap-2 rounded-md bg-muted/30 px-2 py-1 text-xs"
+                    className="flex items-center gap-2 rounded-md bg-muted-faint px-2 py-1 text-xs"
                   >
                     <SkillIcon />
                     <span className="min-w-0 flex-1 truncate text-foreground">
@@ -254,7 +254,7 @@ export function SkillPicker({
                   "disabled:pointer-events-none disabled:opacity-50",
                   idx === focusIndex
                     ? "bg-accent text-foreground"
-                    : "text-foreground hover:bg-accent/50",
+                    : "text-foreground hover:bg-accent-hover",
                 )}
                 role="option"
                 aria-selected={idx === focusIndex}
@@ -313,7 +313,7 @@ function LoadingSkeleton() {
             style={{ width: `${w}%` }}
           />
           <div
-            className="h-2 rounded bg-muted/60 animate-pulse"
+            className="h-2 rounded bg-muted-subtle animate-pulse"
             style={{ width: `${Math.min(w + 15, 90)}%` }}
           />
         </div>

package/src/styles.css

@@ -6,7 +6,7 @@
 @import "tailwindcss/utilities.css" layer(stgm);
 @import "@stigmer/theme/tokens.css" layer(stgm);
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is([data-stgm-color-mode="dark"] *));
 
 @theme inline {
   --radius-sm: calc(var(--stgm-radius) - 4px);
@@ -45,6 +45,30 @@
   --color-chart-5: var(--stgm-chart-5);
   --font-sans: var(--stgm-font-sans);
   --font-mono: var(--stgm-font-mono);
+  --color-primary-hover: var(--stgm-primary-hover);
+  --color-primary-subtle: var(--stgm-primary-subtle);
+  --color-primary-muted: var(--stgm-primary-muted);
+  --color-destructive-subtle: var(--stgm-destructive-subtle);
+  --color-destructive-hover: var(--stgm-destructive-hover);
+  --color-destructive-muted: var(--stgm-destructive-muted);
+  --color-accent-hover: var(--stgm-accent-hover);
+  --color-foreground-hover: var(--stgm-foreground-hover);
+  --color-muted-subtle: var(--stgm-muted-subtle);
+  --color-muted-faint: var(--stgm-muted-faint);
+  --color-muted-foreground-subtle: var(--stgm-muted-foreground-subtle);
+  --color-muted-foreground-faint: var(--stgm-muted-foreground-faint);
+  --color-border-muted: var(--stgm-border-muted);
+  --color-backdrop: var(--stgm-backdrop);
+  --color-sidebar: var(--stgm-sidebar);
+  --color-sidebar-foreground: var(--stgm-sidebar-foreground);
+  --color-sidebar-primary: var(--stgm-sidebar-primary);
+  --color-sidebar-primary-foreground: var(--stgm-sidebar-primary-foreground);
+  --color-sidebar-muted: var(--stgm-sidebar-muted);
+  --color-sidebar-muted-foreground: var(--stgm-sidebar-muted-foreground);
+  --color-sidebar-accent: var(--stgm-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--stgm-sidebar-accent-foreground);
+  --color-sidebar-border: var(--stgm-sidebar-border);
+  --color-sidebar-ring: var(--stgm-sidebar-ring);
   --shadow-sm: var(--stgm-shadow-sm);
   --shadow-md: var(--stgm-shadow-md);
   --shadow-lg: var(--stgm-shadow-lg);

package/src/usage/OrgUsagePanel.tsx

@@ -61,7 +61,7 @@ export function OrgUsagePanel({ orgId, className }: OrgUsagePanelProps) {
           {DATE_RANGE_PRESETS.map((p) => (
             <div
               key={p}
-              className="h-7 w-16 animate-pulse rounded-md bg-muted/40"
+              className="h-7 w-16 animate-pulse rounded-md bg-muted-subtle"
             />
           ))}
         </div>
@@ -69,11 +69,11 @@ export function OrgUsagePanel({ orgId, className }: OrgUsagePanelProps) {
           {Array.from({ length: 3 }, (_, i) => (
             <div
               key={i}
-              className="h-[72px] animate-pulse rounded-lg bg-muted/40"
+              className="h-[72px] animate-pulse rounded-lg bg-muted-subtle"
             />
           ))}
         </div>
-        <div className="h-40 animate-pulse rounded-lg bg-muted/40" />
+        <div className="h-40 animate-pulse rounded-lg bg-muted-subtle" />
       </div>
     );
   }
@@ -333,7 +333,7 @@ function ModelBreakdownList({
           return (
             <div
               key={`${m.model}\0${m.provider}`}
-              className="border-b border-border/50 px-3.5 py-2 last:border-b-0"
+              className="border-b border-border-muted px-3.5 py-2 last:border-b-0"
             >
               <div
                 role="row"

package/src/workspace/WorkspaceEditor.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useState, useCallback, useEffect, type KeyboardEvent } from "react";
+import { useState, useCallback, type KeyboardEvent } from "react";
 import type { UseWorkspaceEntriesReturn } from "./useWorkspaceEntries";
 import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection";
 import { GitHubRepoPicker } from "../github/GitHubRepoPicker";
-import { FolderBrowser } from "./FolderBrowser";
 import { useScrollShadows } from "../internal/useScrollShadows";
 import { ScrollFade } from "../internal/ScrollFade";
 
@@ -22,14 +21,37 @@ export interface WorkspaceEditorProps {
   readonly enableGitHub?: boolean;
   /** Show the Local Folder source button. Default: false (set by Console based on deployment mode). */
   readonly enableLocal?: boolean;
-  /** Use the visual folder browser instead of a text input for local paths. Requires the /api/fs/list endpoint. Default: false. */
-  readonly enableFolderBrowser?: boolean;
+  /**
+   * Native folder picker callback for desktop environments.
+   *
+   * When provided and `enableLocal` is `true`, clicking the "Local Folder"
+   * button invokes this callback instead of showing the manual path input.
+   * Should resolve to an absolute folder path, or `null` if the user
+   * cancelled the dialog.
+   *
+   * When not provided, falls back to the inline text input for manual
+   * path entry (backward compatible with web environments).
+   *
+   * @example
+   * ```tsx
+   * // Tauri desktop integration
+   * const browseFolder = useCallback(async () => {
+   *   const { open } = await import("@tauri-apps/plugin-dialog");
+   *   return open({ directory: true }) as Promise<string | null>;
+   * }, []);
+   *
+   * <WorkspaceEditor
+   *   workspace={workspace}
+   *   enableLocal
+   *   onBrowseLocalFolder={browseFolder}
+   * />
+   * ```
+   */
+  readonly onBrowseLocalFolder?: () => Promise<string | null>;
 }
 
 type ActivePanel = "none" | "github" | "local";
 
-const STORAGE_KEY_LAST_FOLDER = "stigmer:folder:last-path";
-
 const TYPE_LABELS: Record<string, string> = {
   git: "GitHub",
   local: "Local",
@@ -72,7 +94,7 @@ export function WorkspaceEditor({
   gitHubConnection,
   enableGitHub = true,
   enableLocal = false,
-  enableFolderBrowser = false,
+  onBrowseLocalFolder,
 }: WorkspaceEditorProps) {
   const [activePanel, setActivePanel] = useState<ActivePanel>(
     enableGitHub ? "github" : "none",
@@ -81,18 +103,7 @@ export function WorkspaceEditor({
   const [manualBranch, setManualBranch] = useState("");
   const entryList = useScrollShadows();
   const [localPath, setLocalPath] = useState("");
-  const [lastFolderPath, setLastFolderPath] = useState<string | undefined>(
-    () => {
-      if (typeof window === "undefined") return undefined;
-      return localStorage.getItem(STORAGE_KEY_LAST_FOLDER) ?? undefined;
-    },
-  );
-
-  useEffect(() => {
-    if (lastFolderPath) {
-      localStorage.setItem(STORAGE_KEY_LAST_FOLDER, lastFolderPath);
-    }
-  }, [lastFolderPath]);
+  const [isBrowsing, setIsBrowsing] = useState(false);
 
   const handleGitHubSelect = useCallback(
     (repoUrl: string, branch: string) => {
@@ -119,6 +130,19 @@ export function WorkspaceEditor({
     }
   }, [localPath, workspace]);
 
+  const handleBrowseLocalFolder = useCallback(async () => {
+    if (!onBrowseLocalFolder || isBrowsing) return;
+    setIsBrowsing(true);
+    try {
+      const path = await onBrowseLocalFolder();
+      if (path) {
+        workspace.addLocalPath(path);
+      }
+    } finally {
+      setIsBrowsing(false);
+    }
+  }, [onBrowseLocalFolder, isBrowsing, workspace]);
+
   const handleKeyDown = useCallback(
     (handler: () => void) => (e: KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Enter") {
@@ -147,7 +171,7 @@ export function WorkspaceEditor({
             {workspace.entries.map((entry) => (
               <div
                 key={entry.id}
-                className="flex items-center gap-2 rounded-md border border-border bg-muted/30 px-2.5 py-1.5 text-xs"
+                className="flex items-center gap-2 rounded-md border border-border bg-muted-faint px-2.5 py-1.5 text-xs"
               >
                 <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">
                   {TYPE_LABELS[entry.type] ?? entry.type}
@@ -189,7 +213,7 @@ export function WorkspaceEditor({
               "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors disabled:pointer-events-none disabled:opacity-50",
               activePanel === "github"
                 ? "bg-accent text-foreground"
-                : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                : "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             ].join(" ")}
           >
             <GitHubIcon />
@@ -200,17 +224,17 @@ export function WorkspaceEditor({
         {enableLocal && (
           <button
             type="button"
-            onClick={() => togglePanel("local")}
-            disabled={disabled}
+            onClick={onBrowseLocalFolder ? handleBrowseLocalFolder : () => togglePanel("local")}
+            disabled={disabled || isBrowsing}
             className={[
               "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors disabled:pointer-events-none disabled:opacity-50",
               activePanel === "local"
                 ? "bg-accent text-foreground"
-                : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+                : "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             ].join(" ")}
           >
             <FolderIcon />
-            <span>Local Folder</span>
+            <span>{isBrowsing ? "Opening\u2026" : "Local Folder"}</span>
           </button>
         )}
       </div>
@@ -241,46 +265,34 @@ export function WorkspaceEditor({
       {/* Local folder panel */}
       {activePanel === "local" && (
         <div className="rounded-md border border-border bg-card p-3">
-          {enableFolderBrowser ? (
-            <FolderBrowser
-              initialPath={lastFolderPath}
-              onSelect={(path) => {
-                setLastFolderPath(path);
-                workspace.addLocalPath(path);
-                setActivePanel("none");
-              }}
-              onCancel={() => setActivePanel("none")}
+          <div className="space-y-2">
+            <input
+              type="text"
+              placeholder="/path/to/project"
+              value={localPath}
+              onChange={(e) => setLocalPath(e.target.value)}
+              onKeyDown={handleKeyDown(handleLocalAdd)}
+              className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              autoFocus
             />
-          ) : (
-            <div className="space-y-2">
-              <input
-                type="text"
-                placeholder="/path/to/project"
-                value={localPath}
-                onChange={(e) => setLocalPath(e.target.value)}
-                onKeyDown={handleKeyDown(handleLocalAdd)}
-                className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                autoFocus
-              />
-              <div className="flex justify-end gap-2">
-                <button
-                  type="button"
-                  onClick={() => setActivePanel("none")}
-                  className="rounded-md px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  onClick={handleLocalAdd}
-                  disabled={!localPath.trim()}
-                  className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-40"
-                >
-                  Add
-                </button>
-              </div>
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setActivePanel("none")}
+                className="rounded-md px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleLocalAdd}
+                disabled={!localPath.trim()}
+                className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
+              >
+                Add
+              </button>
             </div>
-          )}
+          </div>
         </div>
       )}
     </div>
@@ -355,7 +367,7 @@ function GitHubPanel({
               <button
                 type="button"
                 onClick={() => connection.connect(redirectUri)}
-                className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground/90 transition-colors"
+                className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground-hover transition-colors"
               >
                 <GitHubIcon />
                 <span>Continue with redirect</span>
@@ -366,7 +378,7 @@ function GitHubPanel({
           <button
             type="button"
             onClick={() => connection.connect(redirectUri, { popup: true })}
-            className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground/90 transition-colors"
+            className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background hover:bg-foreground-hover transition-colors"
           >
             <GitHubIcon />
             <span>Connect GitHub</span>
@@ -467,7 +479,7 @@ function ManualGitPanel({
           type="button"
           onClick={onAdd}
           disabled={!url.trim()}
-          className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-40"
+          className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-40"
         >
           Add
         </button>

package/src/workspace/index.ts

@@ -5,13 +5,5 @@ export type {
 } from "./useWorkspaceEntries";
 export { WorkspaceEditor } from "./WorkspaceEditor";
 export type { WorkspaceEditorProps } from "./WorkspaceEditor";
-export { useFolderListing } from "./useFolderListing";
-export type {
-  FolderEntry,
-  FolderListing,
-  UseFolderListingReturn,
-} from "./useFolderListing";
-export { FolderBrowser } from "./FolderBrowser";
-export type { FolderBrowserProps } from "./FolderBrowser";
 export { WorkspaceSummary } from "./WorkspaceSummary";
 export type { WorkspaceSummaryProps } from "./WorkspaceSummary";