@stigmer/react 0.2.2 → 0.3.0

package/src/composer/SessionComposer.tsx

@@ -6,6 +6,8 @@ import { getUserMessage, type AttachmentInput, type EnvVarInput, type McpServerU
 import { useComposer } from "./useComposer";
 import { ComposerToolbar } from "./ComposerToolbar";
 import { type ConfigureMenuItem } from "./ConfigureMenu";
+import type { HarnessOption } from "../models/harness";
+import { parseModelKey } from "../models/registry";
 import { ContextChip, type ChipItem } from "./ContextChip";
 import { WorkspaceEditor } from "../workspace/WorkspaceEditor";
 import { AgentPicker } from "../agent/AgentPicker";
@@ -21,6 +23,7 @@ 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 { useSessionEnvPool } from "../environment/useSessionEnvPool";
@@ -100,6 +103,22 @@ export interface SessionComposerProps {
   /** Disables the entire composer (e.g., while an execution streams). */
   readonly disabled?: boolean;
 
+  /**
+   * Currently selected execution harness.
+   *
+   * Controls which models appear in the model selector and flows
+   * through to session creation. When omitted, defaults to `"native"`.
+   */
+  readonly harness?: HarnessOption;
+  /**
+   * Called when the user switches the harness.
+   *
+   * Providing this callback enables the harness selector in the toolbar.
+   */
+  readonly onHarnessChange?: (harness: HarnessOption) => void;
+  /** Show the harness selector in the toolbar. @default false */
+  readonly showHarnessSelector?: boolean;
+
   /** Initial model ID for the model selector. */
   readonly defaultModelId?: string;
   /** Called when the user changes the selected model. */
@@ -356,6 +375,9 @@ export function SessionComposer({
   onSubmit,
   isSubmitting = false,
   disabled = false,
+  harness,
+  onHarnessChange,
+  showHarnessSelector = false,
   defaultModelId,
   onModelChange,
   showModelSelector = true,
@@ -411,20 +433,31 @@ export function SessionComposer({
     needsRunnerList ? (org ?? null) : null,
   );
 
-  const selectedRunnerName = useMemo(() => {
+  const selectedRunner = useMemo(() => {
     if (!runnerId) return undefined;
-    const runner = runnerListForBrowse.find((r) => r.metadata?.id === runnerId);
-    return runner?.metadata?.name;
+    return runnerListForBrowse.find((r) => r.metadata?.id === runnerId);
   }, [runnerId, runnerListForBrowse]);
 
-  const browseRunnerId = useMemo(() => {
-    if (runnerId) return runnerId;
-    if (!enableLocal) return null;
-    const active = runnerListForBrowse.find((r) =>
-      isActivePhase(r.status?.phase ?? RunnerPhase.UNSPECIFIED),
-    );
-    return active?.metadata?.id ?? null;
-  }, [runnerId, enableLocal, 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
@@ -600,7 +633,10 @@ export function SessionComposer({
             }
           : undefined;
 
-      onSubmit(message, modelId, context);
+      const resolvedModelId = modelId
+        ? (parseModelKey(modelId)?.modelId ?? modelId)
+        : undefined;
+      onSubmit(message, resolvedModelId, context);
 
       if (enableAttachments) {
         attachments.clear();
@@ -622,6 +658,13 @@ export function SessionComposer({
     [onModelChange],
   );
 
+  const handleHarnessChange = useCallback(
+    (h: HarnessOption) => {
+      onHarnessChange?.(h);
+    },
+    [onHarnessChange],
+  );
+
   const handleDisplayNameResolved = useCallback(
     (key: string, name: string) => {
       setDisplayNames((prev) => {
@@ -883,17 +926,6 @@ export function SessionComposer({
       });
     }
 
-    if (workspace) {
-      for (const entry of workspace.entries) {
-        items.push({
-          key: `ws:${entry.id}`,
-          label: entry.name,
-          type: "workspace",
-          onRemove: () => workspace.remove(entry.id),
-        });
-      }
-    }
-
     if (showMcp) {
       for (const [key, entry] of Object.entries(mcpSetup.entries)) {
         const slug = key.slice(key.indexOf("/") + 1);
@@ -946,15 +978,6 @@ export function SessionComposer({
       }
     }
 
-    if (showRunner && runnerId) {
-      items.push({
-        key: `runner:${runnerId}`,
-        label: selectedRunnerName ?? "Runner",
-        type: "runner",
-        onRemove: () => onRunnerIdChange?.(null),
-      });
-    }
-
     if (sessionVariables) {
       for (const entry of sessionVariables.entries) {
         const k = entry.key.trim();
@@ -1057,7 +1080,7 @@ export function SessionComposer({
         count: skillCount,
       });
     }
-    if (showRunner) {
+    if (showRunner && !showWorkspace) {
       items.push({
         id: "runner",
         icon: <RunnerIcon />,
@@ -1074,7 +1097,7 @@ export function SessionComposer({
       });
     }
     return items;
-  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showRunner, runnerId, showSessionVars, sessionVarCount]);
+  }, [showAgent, agentRef, agentSetup.state, showMcp, mcpCount, mcpSetup.needsSetupCount, showSkills, skillCount, showRunner, showWorkspace, runnerId, showSessionVars, sessionVarCount]);
 
   const renderConfigPanel = useCallback(
     (panelId: string): React.ReactNode => {
@@ -1356,16 +1379,27 @@ export function SessionComposer({
           workspaceCount={workspaceCount}
           workspaceContent={
             workspace
-              ? <WorkspaceEditor
-                  workspace={workspace}
-                  disabled={isDisabled}
-                  gitHubConnection={gitHubConnection}
-                  enableGitHub={enableGitHub}
-                  enableLocal={enableLocal}
-                  runnerId={browseRunnerId}
-                  onBrowseLocalFolder={onBrowseLocalFolder}
-                  runnerName={selectedRunnerName}
-                />
+              ? <div className="space-y-3">
+                  {showRunner && org && (
+                    <WorkspaceRunnerSelector
+                      org={org}
+                      value={runnerId ?? null}
+                      onChange={(id) => onRunnerIdChange?.(id)}
+                      disabled={isDisabled}
+                    />
+                  )}
+                  <WorkspaceEditor
+                    workspace={workspace}
+                    disabled={isDisabled}
+                    gitHubConnection={gitHubConnection}
+                    enableGitHub={enableGitHub}
+                    enableLocal={enableLocal}
+                    runnerId={browseRunnerId}
+                    onBrowseLocalFolder={runnerId ? onBrowseLocalFolder : undefined}
+                    runnerName={selectedRunnerName}
+                    runnerHostname={selectedRunnerHostname}
+                  />
+                </div>
               : null
           }
           configureItems={configureItems}
@@ -1374,6 +1408,9 @@ export function SessionComposer({
           configActivePanel={configActivePanel}
           onConfigActivePanelChange={handleConfigActivePanelChange}
           renderConfigPanel={renderConfigPanel}
+          showHarnessSelector={showHarnessSelector}
+          harness={harness}
+          onHarnessChange={handleHarnessChange}
           showModelSelector={showModelSelector}
           modelId={modelId}
           onModelChange={handleModelChange}

package/src/execution/MessageEntry.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import Markdown from "react-markdown";
 import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
@@ -20,9 +21,11 @@ export interface MessageEntryProps {
  * - `MESSAGE_HUMAN` — plain text with muted background
  * - `MESSAGE_AI` — markdown-rendered via `react-markdown` + `remark-gfm`,
  *   with a blinking cursor while streaming
+ * - `MESSAGE_THINKING` — collapsible thinking block with subdued styling,
+ *   collapsed by default showing a brief summary
  * - `MESSAGE_SYSTEM` — small muted text
  * - `MESSAGE_TOOL` / `UNSPECIFIED` — renders nothing (tool results are
- *   consumed by {@link ToolCallGroup} in SP4)
+ *   consumed by {@link ToolCallGroup})
  *
  * Purely presentational — no data fetching, no state.
  * All visual properties flow through `--stgm-*` tokens.
@@ -44,6 +47,14 @@ export function MessageEntry({ message, className }: MessageEntryProps) {
           className={className}
         />
       );
+    case MessageType.MESSAGE_THINKING:
+      return (
+        <ThinkingMessage
+          content={message.content}
+          isStreaming={message.isStreaming}
+          className={className}
+        />
+      );
     case MessageType.MESSAGE_SYSTEM:
       return <SystemMessage content={message.content} className={className} />;
     default:
@@ -103,6 +114,69 @@ function AiMessage({
   );
 }
 
+const THINKING_PREVIEW_LENGTH = 80;
+
+function ThinkingMessage({
+  content,
+  isStreaming,
+  className,
+}: {
+  content: string;
+  isStreaming: boolean;
+  className?: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const hasContent = content.trim().length > 0;
+
+  if (!hasContent && !isStreaming) return null;
+
+  const preview = content.length > THINKING_PREVIEW_LENGTH
+    ? content.slice(0, THINKING_PREVIEW_LENGTH).trimEnd() + "..."
+    : content;
+
+  return (
+    <div
+      role="article"
+      aria-label="Model thinking"
+      className={cn("px-4 py-1.5", className)}
+    >
+      <button
+        type="button"
+        aria-expanded={expanded}
+        onClick={() => setExpanded((v) => !v)}
+        className={cn(
+          "flex items-center gap-1.5 text-xs text-muted-foreground transition-colors",
+          "hover:text-foreground cursor-pointer",
+        )}
+      >
+        <ThinkingIcon isStreaming={isStreaming} />
+        <span className="min-w-0 truncate">
+          {isStreaming && !hasContent
+            ? "Thinking..."
+            : expanded
+              ? "Thinking"
+              : preview}
+        </span>
+        {hasContent && <ChevronIcon expanded={expanded} />}
+      </button>
+
+      {expanded && hasContent && (
+        <div className="mt-1.5 border-l-2 border-muted-foreground/20 pl-3">
+          <p className="text-xs text-muted-foreground whitespace-pre-wrap leading-relaxed">
+            {content}
+            {isStreaming && (
+              <span
+                className="inline-block w-[2px] h-[0.8em] bg-muted-foreground align-text-bottom animate-pulse ml-0.5"
+                aria-hidden="true"
+              />
+            )}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SystemMessage({
   content,
   className,
@@ -121,3 +195,62 @@ function SystemMessage({
   );
 }
 
+function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
+  if (isStreaming) {
+    return (
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="shrink-0 animate-spin"
+        aria-hidden="true"
+      >
+        <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <circle cx="6" cy="5" r="3.5" />
+      <path d="M4.5 9.5C4.5 8.5 5 8 6 8s1.5.5 1.5 1.5" />
+      <circle cx="5" cy="4.5" r="0.5" fill="currentColor" />
+      <circle cx="7" cy="4.5" r="0.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(
+        "shrink-0 transition-transform duration-150",
+        expanded && "rotate-90",
+      )}
+      aria-hidden="true"
+    >
+      <path d="M3.5 2L6.5 5L3.5 8" />
+    </svg>
+  );
+}

package/src/github/index.ts

@@ -3,6 +3,7 @@ export {
   GITHUB_CALLBACK_MESSAGE_TYPE,
   type GitHubUser,
   type GitHubConnectOptions,
+  type UseGitHubConnectionConfig,
   type UseGitHubConnectionReturn,
 } from "./useGitHubConnection";
 

package/src/github/useGitHubConnection.ts

@@ -42,6 +42,52 @@ export interface GitHubConnectOptions {
   readonly popup?: boolean;
 }
 
+/**
+ * Optional configuration for {@link useGitHubConnection}.
+ *
+ * Enables desktop and non-browser environments to participate in the
+ * GitHub OAuth flow without relying on `window.open()` popups.
+ */
+export interface UseGitHubConnectionConfig {
+  /**
+   * Custom function to open the authorization URL in a browser.
+   *
+   * When provided, the hook calls this instead of `window.open()` during
+   * popup-mode `connect()` flows. This enables desktop environments
+   * (e.g. Tauri, Electron) where webview popups are blocked but the
+   * system browser is available.
+   *
+   * When used with {@link callbackUrl}, the callback page processes the
+   * token exchange and the consumer calls {@link UseGitHubConnectionReturn.reconcile}
+   * to pick up the token from the personal environment.
+   *
+   * When used without {@link callbackUrl} (e.g. localhost callback server),
+   * the consumer calls {@link UseGitHubConnectionReturn.handleCallback}
+   * with the code, state, and redirect URI to complete the exchange.
+   */
+  readonly openUrl?: (url: string) => void | Promise<void>;
+
+  /**
+   * Override the OAuth callback URL.
+   *
+   * When provided, this replaces the `redirectUri` parameter passed to
+   * `connect()` by UI components like `WorkspaceEditor`. Use this to
+   * route the GitHub callback to a specific URL — for example, the
+   * Stigmer web console's callback page for desktop flows, or a
+   * localhost server for local development.
+   *
+   * When the callback page handles the token exchange itself (cloud
+   * desktop flows), the consumer triggers re-reconciliation via
+   * {@link UseGitHubConnectionReturn.reconcile} after the callback
+   * completes externally.
+   *
+   * When the consumer handles the exchange (localhost flows), the same
+   * URL must be passed to `handleCallback()` — GitHub requires an
+   * exact match between the authorize and exchange redirect URIs.
+   */
+  readonly callbackUrl?: string;
+}
+
 /** Return value of {@link useGitHubConnection}. */
 export interface UseGitHubConnectionReturn {
   /** Whether a valid GitHub token exists. */
@@ -72,6 +118,16 @@ export interface UseGitHubConnectionReturn {
     state: string,
     redirectUri: string,
   ) => Promise<void>;
+  /**
+   * Trigger re-reconciliation from the personal environment.
+   *
+   * Call this when the token exchange was handled externally (e.g. by
+   * the Stigmer web callback page during a desktop OAuth flow) and the
+   * token is already stored server-side. The hook will refetch the
+   * personal environment, reveal the token, and update
+   * {@link isConnected}.
+   */
+  readonly reconcile: () => void;
   /** Clear the stored token and user info. */
   readonly disconnect: () => void;
 }
@@ -93,6 +149,39 @@ async function fetchGitHubUser(token: string): Promise<GitHubUser | null> {
   }
 }
 
+/**
+ * Reads the OAuth state from the opener window's sessionStorage when
+ * running inside a popup (same-origin). Falls back to the current
+ * window's sessionStorage for redirect-based flows or when the
+ * opener is unavailable.
+ */
+function getSavedOAuthState(): string | null {
+  try {
+    if (window.opener && !window.opener.closed) {
+      const openerState = window.opener.sessionStorage.getItem(
+        STORAGE_KEY_STATE,
+      );
+      if (openerState) return openerState;
+    }
+  } catch {
+    // Cross-origin or closed opener — fall through to local storage.
+  }
+  return sessionStorage.getItem(STORAGE_KEY_STATE);
+}
+
+/**
+ * Removes the OAuth state key from both the current window's and the
+ * opener's sessionStorage (best-effort).
+ */
+function clearOAuthState(): void {
+  sessionStorage.removeItem(STORAGE_KEY_STATE);
+  try {
+    window.opener?.sessionStorage?.removeItem(STORAGE_KEY_STATE);
+  } catch {
+    // Cross-origin or closed opener — ignore.
+  }
+}
+
 /**
  * Checks whether the personal environment's redacted data contains a given key.
  * The key is present even when the value is redacted (`***REDACTED***`).
@@ -127,6 +216,8 @@ function personalEnvHasKey(
  *
  * @param org - The active organization slug. Required for server-side
  *   token storage. Pass `null` to skip all server operations.
+ * @param config - Optional configuration for desktop / non-browser
+ *   environments. See {@link UseGitHubConnectionConfig}.
  *
  * @example
  * ```tsx
@@ -155,9 +246,23 @@ function personalEnvHasKey(
  *   );
  * }
  * ```
+ *
+ * @example Desktop (Tauri) — open in system browser, callback via deep link
+ * ```tsx
+ * function DesktopGitHubConnect({ org }: { org: string }) {
+ *   const gh = useGitHubConnection(org, {
+ *     openUrl: (url) => invoke("open_auth_in_browser", { authUrl: url }),
+ *     callbackUrl: "https://app.stigmer.ai/auth/github/callback?source=desktop",
+ *   });
+ *   // The web callback page processes the exchange, then redirects to
+ *   // stigmer://github/callback-done. The desktop deep link handler
+ *   // calls gh.reconcile() to pick up the token.
+ * }
+ * ```
  */
 export function useGitHubConnection(
   org: string | null,
+  config?: UseGitHubConnectionConfig,
 ): UseGitHubConnectionReturn {
   const stigmer = useStigmer();
   const [token, setToken] = useState<string | null>(null);
@@ -287,8 +392,12 @@ export function useGitHubConnection(
 
   const connect = useCallback(
     async (redirectUri: string, options?: GitHubConnectOptions) => {
+      const effectiveRedirectUri = config?.callbackUrl ?? redirectUri;
+
       const { authorizeUrl, state } =
-        await stigmer.github.getOAuthAuthorizeUrl({ redirectUri });
+        await stigmer.github.getOAuthAuthorizeUrl({
+          redirectUri: effectiveRedirectUri,
+        });
 
       sessionStorage.setItem(STORAGE_KEY_STATE, state);
 
@@ -297,7 +406,18 @@ export function useGitHubConnection(
         return;
       }
 
-      // If a popup is already open, bring it to focus.
+      // ── External opener (desktop / non-browser) ─────────────────────
+      // When `config.openUrl` is provided, delegate to the consumer
+      // instead of using `window.open()`. The consumer is responsible
+      // for delivering the callback data via `handleCallback()` or
+      // triggering re-reconciliation via `reconcile()`.
+      if (config?.openUrl) {
+        setIsConnecting(true);
+        await config.openUrl(authorizeUrl);
+        return;
+      }
+
+      // ── Browser popup ───────────────────────────────────────────────
       if (popupRef.current && !popupRef.current.closed) {
         popupRef.current.focus();
         return;
@@ -327,43 +447,62 @@ export function useGitHubConnection(
           popupPollRef.current = null;
           popupRef.current = null;
           setIsConnecting(false);
+
+          // The callback page may have exchanged the code and stored
+          // the token server-side (e.g. cross-origin popup flow for
+          // platform builders). Re-reconcile from the personal
+          // environment to pick up the token.
+          setIsLoading(true);
+          reconciled.current = false;
+          personalEnvRef.current.refetch();
         }
       }, POPUP_CLOSE_POLL_MS);
       popupPollRef.current = pollId;
     },
-    [stigmer],
+    [stigmer, config?.openUrl, config?.callbackUrl],
   );
 
   const handleCallback = useCallback(
     async (code: string, state: string, redirectUri: string) => {
-      const savedState = sessionStorage.getItem(STORAGE_KEY_STATE);
+      const savedState = getSavedOAuthState();
       if (savedState && savedState !== state) {
         throw new Error("OAuth state mismatch — possible CSRF attack");
       }
-      sessionStorage.removeItem(STORAGE_KEY_STATE);
-
-      const { accessToken } = await stigmer.github.exchangeOAuthCode({
-        code,
-        state,
-        redirectUri,
-      });
-
-      const tokenVar = {
-        [GITHUB_TOKEN_KEY]: { value: accessToken, isSecret: true },
-      };
-      const env = await personalEnvRef.current.getOrCreate(tokenVar);
-      if (!personalEnvHasKey(env, GITHUB_TOKEN_KEY)) {
-        await personalEnvRef.current.addVariables(tokenVar);
-      }
+      clearOAuthState();
 
-      setToken(accessToken);
+      try {
+        const { accessToken } = await stigmer.github.exchangeOAuthCode({
+          code,
+          state,
+          redirectUri,
+        });
+
+        const tokenVar = {
+          [GITHUB_TOKEN_KEY]: { value: accessToken, isSecret: true },
+        };
+        const env = await personalEnvRef.current.getOrCreate(tokenVar);
+        if (!personalEnvHasKey(env, GITHUB_TOKEN_KEY)) {
+          await personalEnvRef.current.addVariables(tokenVar);
+        }
 
-      const u = await fetchGitHubUser(accessToken);
-      setUser(u);
+        setToken(accessToken);
+
+        const u = await fetchGitHubUser(accessToken);
+        setUser(u);
+      } finally {
+        setIsConnecting(false);
+      }
     },
     [stigmer],
   );
 
+  const reconcile = useCallback(() => {
+    setIsConnecting(false);
+    setIsLoading(true);
+    reconciled.current = false;
+    personalEnvRef.current.refetch();
+  }, []);
+
   const disconnect = useCallback(() => {
     sessionStorage.removeItem(STORAGE_KEY_STATE);
     setToken(null);
@@ -396,6 +535,7 @@ export function useGitHubConnection(
     token,
     connect,
     handleCallback,
+    reconcile,
     disconnect,
   };
 }