@stigmer/react 3.1.17 → 3.2.0

package/src/internal/thread-card/ThreadCardShell.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import { cn } from "@stigmer/theme";
+import { ChevronIcon } from "./glyphs.js";
+
+/**
+ * The shared card shell for thread rows — session tool-call cards and
+ * workflow task cards compose the SAME chrome, header gestures, and body
+ * contract, so the two threads read as one visual language by
+ * construction (T05). Extracted from `ToolCallItem`, whose DOM is the
+ * canonical anatomy; the workflow card adopted it in the same change.
+ *
+ * Three pieces, composed via children (slots-as-children, never a
+ * mega-prop card — each thread's composition stays explicit):
+ *
+ * - {@link ThreadCardShell} — the chrome: bordered card vs divider row,
+ *   pending-gate accent.
+ * - {@link ThreadCardHeader} — the one-line header region with a
+ *   primary gesture: `expand` (summary rows, `aria-expanded`, appends
+ *   the chevron) or `none` (preview rows — their body is always
+ *   visible, so the header has no job beyond layout).
+ * - {@link ThreadCardBody} — the disclosed content area's padding
+ *   contract.
+ *
+ * The shell owns layout + chrome + a11y, nothing more: no data fetching,
+ * no presenters, no disclosure policy (those stay per-thread). It renders
+ * beneath the threads' memoized row components and takes only primitives
+ * and stable callbacks, so it never disturbs their memo bails
+ * (DD-009/DD-010).
+ *
+ * Interactive headers are `div[role=button]`, not `<button>` — they may
+ * carry nested action buttons, and a `<button>` may not contain another.
+ * Nested buttons must `stopPropagation` so their click never fires the
+ * header's primary gesture.
+ *
+ * @internal Not part of the public API.
+ */
+
+// ---------------------------------------------------------------------------
+// Shell — the card chrome
+// ---------------------------------------------------------------------------
+
+/** Props for {@link ThreadCardShell}. */
+export interface ThreadCardShellProps {
+  /**
+   * Whether the row renders as its own self-contained card (a thin rounded
+   * border). Set to `false` when nested inside a container that already
+   * provides the border — e.g. the folded `ToolRunGroup` chip — where the
+   * row degrades to a divider-separated row to avoid a card-in-a-card.
+   */
+  readonly bordered?: boolean;
+  /**
+   * A restrained left accent for a row awaiting a human decision —
+   * `"warning"` for ordinary gates, `"destructive"` for delete gates.
+   */
+  readonly accent?: "warning" | "destructive" | null;
+  /** Rendered as `data-cursor-target` on the root for e2e targeting. */
+  readonly cursorTarget?: string;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+  /** Ref to the root element (e.g. for scroll-into-view on selection). */
+  readonly ref?: Ref<HTMLDivElement>;
+  readonly children: ReactNode;
+}
+
+/** The thread card's outer chrome. See the module doc for the full contract. */
+export function ThreadCardShell({
+  bordered = true,
+  accent = null,
+  cursorTarget,
+  className,
+  ref,
+  children,
+}: ThreadCardShellProps) {
+  const chrome = bordered
+    ? cn(
+        // border-prominent (not border): a transparent card needs a line the
+        // eye actually catches — the default border token is white at 14%
+        // opacity, which vanishes on the dark thread surface.
+        "rounded-lg border border-border-prominent overflow-hidden",
+        accent === "warning" && "border-l-2 border-l-warning",
+        accent === "destructive" && "border-l-2 border-l-destructive",
+      )
+    : "border-b border-border-muted last:border-b-0";
+
+  return (
+    <div ref={ref} data-cursor-target={cursorTarget} className={cn(chrome, className)}>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Header — one layout, per-surface primary gesture
+// ---------------------------------------------------------------------------
+
+/**
+ * The header's primary gesture. `expand` toggles a chevron-gated body
+ * (`aria-expanded`; the chevron is appended automatically). `none` renders
+ * a non-interactive layout row (preview cards — their body is always
+ * visible).
+ */
+export type ThreadCardHeaderGesture =
+  | { readonly kind: "none" }
+  | {
+      readonly kind: "expand";
+      readonly expanded: boolean;
+      readonly onToggle: () => void;
+    };
+
+/** Props for {@link ThreadCardHeader}. */
+export interface ThreadCardHeaderProps {
+  /** The primary gesture. Defaults to `{ kind: "none" }`. */
+  readonly gesture?: ThreadCardHeaderGesture;
+  /** Accessible label for interactive headers whose content is not self-describing. */
+  readonly ariaLabel?: string;
+  readonly children: ReactNode;
+}
+
+const HEADER_LAYOUT = "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs";
+
+const HEADER_INTERACTIVE = cn(
+  "cursor-pointer text-left transition-colors",
+  "hover:bg-muted-subtle",
+  // ring-inset so the card's overflow-hidden does not clip the focus ring.
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+);
+
+/** The thread card's one-line header. See the module doc for the contract. */
+export function ThreadCardHeader({
+  gesture = { kind: "none" },
+  ariaLabel,
+  children,
+}: ThreadCardHeaderProps) {
+  if (gesture.kind === "none") {
+    return <div className={HEADER_LAYOUT}>{children}</div>;
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      aria-label={ariaLabel}
+      aria-expanded={gesture.expanded}
+      onClick={gesture.onToggle}
+      onKeyDown={(e) => {
+        // Only when the header itself is focused: a nested action button's
+        // Enter/Space fires its own click and must not ALSO trigger the
+        // header's primary gesture as the keydown bubbles up.
+        if (e.target !== e.currentTarget) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          gesture.onToggle();
+        }
+      }}
+      className={cn(
+        HEADER_LAYOUT,
+        HEADER_INTERACTIVE,
+        gesture.expanded && "bg-muted-faint",
+      )}
+    >
+      {children}
+      <ChevronIcon expanded={gesture.expanded} />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Body — the disclosed content area
+// ---------------------------------------------------------------------------
+
+/** Props for {@link ThreadCardBody}. */
+export interface ThreadCardBodyProps {
+  /** Optional element id (e.g. an `aria-controls` target). */
+  readonly id?: string;
+  /** Rendered as `data-cursor-target` for e2e targeting. */
+  readonly cursorTarget?: string;
+  readonly children: ReactNode;
+}
+
+/** The thread card's body padding contract. */
+export function ThreadCardBody({ id, cursorTarget, children }: ThreadCardBodyProps) {
+  return (
+    <div id={id} data-cursor-target={cursorTarget} className="px-2.5 pb-2.5 pt-1">
+      {children}
+    </div>
+  );
+}

package/src/internal/thread-card/glyphs.tsx

@@ -0,0 +1,108 @@
+import { cn } from "@stigmer/theme";
+
+/**
+ * The shared glyph vocabulary for thread cards (session tool-call rows and
+ * workflow task cards). One set of status/affordance icons so the two
+ * threads cannot drift apart visually — extracted from `ToolCallItem`,
+ * which previously owned them and which the workflow card had copied.
+ *
+ * All glyphs inherit `currentColor`; the consumer colors them with status
+ * token classes (`text-success`, `text-warning`, …) — never hardcoded
+ * values (Dont-Do #3).
+ *
+ * @internal Not part of the public API.
+ */
+
+/** Quarter-arc spinner for an in-flight item. */
+export function SpinnerIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="animate-spin">
+      <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/** Clock for an item waiting on a human decision. */
+export function ClockIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="6" cy="6" r="4.5" />
+      <path d="M6 3.5V6L7.5 7.5" />
+    </svg>
+  );
+}
+
+/** Check circle for a completed item. */
+export function CheckCircleIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="6" cy="6" r="4.5" />
+      <path d="M4 6L5.5 7.5L8 4.5" />
+    </svg>
+  );
+}
+
+/** X circle for a failed item. */
+export function XCircleIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="6" cy="6" r="4.5" />
+      <path d="M4.5 4.5L7.5 7.5M7.5 4.5L4.5 7.5" />
+    </svg>
+  );
+}
+
+/** Neutral dot for an item that has not started. */
+export function DotIcon() {
+  return (
+    <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
+      <circle cx="4" cy="4" r="2.5" />
+    </svg>
+  );
+}
+
+/** Slashed circle for a settled-but-never-ran item (interrupted, skipped). */
+export function SlashCircleIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+      <circle cx="6" cy="6" r="4.5" />
+      <path d="M2.8 9.2L9.2 2.8" />
+    </svg>
+  );
+}
+
+/** Magnifier for the opt-in Inspect drill-down button. */
+export function InspectIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="5.5" cy="5.5" r="3.5" />
+      <path d="M8 8L10.5 10.5" />
+    </svg>
+  );
+}
+
+/**
+ * The expand/collapse chevron: points right when collapsed, rotates to
+ * point down when expanded (the session card's canonical direction).
+ */
+export function ChevronIcon({ expanded }: { readonly 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 text-muted-foreground transition-transform duration-150",
+        expanded && "rotate-90",
+      )}
+      aria-hidden="true"
+    >
+      <path d="M3.5 2L6.5 5L3.5 8" />
+    </svg>
+  );
+}

package/src/internal/thread-card/index.ts

@@ -0,0 +1,19 @@
+export {
+  ThreadCardShell,
+  ThreadCardHeader,
+  ThreadCardBody,
+  type ThreadCardShellProps,
+  type ThreadCardHeaderProps,
+  type ThreadCardHeaderGesture,
+  type ThreadCardBodyProps,
+} from "./ThreadCardShell.js";
+export {
+  SpinnerIcon,
+  ClockIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  DotIcon,
+  SlashCircleIcon,
+  InspectIcon,
+  ChevronIcon,
+} from "./glyphs.js";

package/src/internal/useRevealLine.ts

@@ -38,8 +38,8 @@ export interface UseRevealLineResult<T extends HTMLElement = HTMLElement> {
  * highlight.
  *
  * The mechanics are centralized here (rather than duplicated into each line
- * renderer) and mirror the established `data-attribute` scroll pattern used by
- * the workflow waterfall: the consumer renders each row with `data-line="N"`
+ * renderer) using the established `data-attribute` scroll pattern: the
+ * consumer renders each row with `data-line="N"`
  * and this hook, on every `reveal.nonce` change, finds the target row within
  * `containerRef` and scrolls it into view. Smooth scroll yields to
  * `prefers-reduced-motion` (a JS animation the CSS rule does not cover), and

package/src/mcp-server/OAuthCallbackHandler.tsx

@@ -5,8 +5,8 @@ import { cn } from "@stigmer/theme";
 import {
   OAUTH_CALLBACK_MESSAGE_TYPE,
   OAUTH_BROADCAST_CHANNEL,
-} from "./useMcpServerOAuthConnect.js";
-import type { OAuthCallbackMessage } from "./useMcpServerOAuthConnect.js";
+} from "../internal/oauthPopup.js";
+import type { OAuthCallbackMessage } from "../internal/oauthPopup.js";
 
 /** Parameters extracted from the OAuth callback URL. */
 export interface OAuthCallbackParams {

package/src/mcp-server/useMcpServerOAuthConnect.ts

@@ -11,32 +11,21 @@ import {
 import { useStigmer } from "../hooks.js";
 import { resolveDeclaredSystemEnvVars } from "../environment/systemEnvVars.js";
 import { toError } from "../internal/toError.js";
-
-/**
- * Message type posted by {@link OAuthCallbackHandler} to the opener window.
- *
- * @internal
- */
-export const OAUTH_CALLBACK_MESSAGE_TYPE = "stigmer:oauth:callback";
-
-/**
- * BroadcastChannel name used as a fallback when `window.opener` is severed
- * by `Cross-Origin-Opener-Policy` headers on the OAuth provider.
- *
- * @internal
- */
-export const OAUTH_BROADCAST_CHANNEL = "stigmer:oauth:broadcast";
-
-/**
- * Shape of the `postMessage` payload sent from the OAuth callback popup.
- *
- * @internal
- */
-export interface OAuthCallbackMessage {
-  readonly type: typeof OAUTH_CALLBACK_MESSAGE_TYPE;
-  readonly code: string;
-  readonly state: string;
-}
+import {
+  openOAuthPopup,
+  popupBlockedError,
+  waitForOAuthCallback,
+  closeOAuthPopup,
+} from "../internal/oauthPopup.js";
+
+// Re-exported for compatibility: these constants and the message type now
+// live in the shared popup machinery (internal/oauthPopup.ts) because the
+// channel-install flow uses the same callback contract.
+export {
+  OAUTH_CALLBACK_MESSAGE_TYPE,
+  OAUTH_BROADCAST_CHANNEL,
+  type OAuthCallbackMessage,
+} from "../internal/oauthPopup.js";
 
 /** Progress phases of the OAuth connect flow. */
 export type OAuthConnectPhase =
@@ -78,10 +67,6 @@ export interface UseMcpServerOAuthConnectReturn {
   readonly clearError: () => void;
 }
 
-const POPUP_WIDTH = 600;
-const POPUP_HEIGHT = 700;
-const POPUP_CALLBACK_TIMEOUT_MS = 120_000;
-
 /**
  * Action hook that orchestrates the full OAuth popup flow for MCP servers.
  *
@@ -96,6 +81,9 @@ const POPUP_CALLBACK_TIMEOUT_MS = 120_000;
  * RPC to avoid browser popup blockers. A blank page is shown briefly
  * while the RPC resolves, then the popup navigates to the auth URL.
  *
+ * Popup plumbing (callback wait, COOP fallbacks, cancellation) lives in
+ * the shared `internal/oauthPopup.ts` machinery.
+ *
  * @example
  * ```tsx
  * const oauth = useMcpServerOAuthConnect();
@@ -134,7 +122,7 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
     if (cleanupRef.current || popupRef.current) {
       cancelledRef.current = true;
       cleanupRef.current?.();
-      closePopup(popupRef.current);
+      closeOAuthPopup(popupRef.current);
       popupRef.current = null;
       cleanupRef.current = null;
     }
@@ -150,19 +138,9 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
 
       cleanupRef.current?.();
 
-      const left = window.screenX + (window.outerWidth - POPUP_WIDTH) / 2;
-      const top = window.screenY + (window.outerHeight - POPUP_HEIGHT) / 2;
-      const popup = window.open(
-        "about:blank",
-        "stigmer_oauth",
-        `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},popup=yes`,
-      );
-
+      const popup = openOAuthPopup();
       if (!popup) {
-        const blocked = new Error(
-          "Your browser blocked the authentication popup. " +
-            "Please allow popups for this site and try again.",
-        );
+        const blocked = popupBlockedError();
         setError(blocked);
         setPhase("idle");
         throw blocked;
@@ -226,7 +204,7 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
         if (!cancelledRef.current) {
           setError(wrapped);
           setPhase("idle");
-          closePopup(popup);
+          closeOAuthPopup(popup);
         }
         cancelledRef.current = false;
         throw wrapped;
@@ -246,143 +224,3 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
     clearError,
   };
 }
-
-// ---------------------------------------------------------------------------
-// Popup callback listener
-// ---------------------------------------------------------------------------
-
-/**
- * Grace period (ms) after `popup.closed` is first detected before treating
- * it as a user-initiated close.
- *
- * Only used when BroadcastChannel is unavailable. When BC is available,
- * `popup.closed` polling is skipped entirely because COOP providers
- * (e.g. Sentry, GitHub) sever the opener reference on cross-origin
- * navigation, making `popup.closed` permanently `true` while the popup
- * is still active. The overall {@link POPUP_CALLBACK_TIMEOUT_MS} serves
- * as the safety net for abandoned flows instead.
- */
-const POPUP_CLOSED_GRACE_MS = 5_000;
-
-function waitForOAuthCallback(
-  popup: Window,
-  expectedState: string,
-  onDispose: (dispose: () => void) => void,
-): Promise<{ code: string; state: string }> {
-  return new Promise((resolve, reject) => {
-    let settled = false;
-    let timeoutId: ReturnType<typeof setTimeout>;
-    let pollId: ReturnType<typeof setInterval>;
-    let bc: BroadcastChannel | null = null;
-    let hasBroadcastChannel = false;
-
-    function cleanup() {
-      if (timeoutId) clearTimeout(timeoutId);
-      if (pollId) clearInterval(pollId);
-      window.removeEventListener("message", onMessage);
-      try { bc?.close(); } catch { /* ignore */ }
-    }
-
-    function settle(
-      outcome: { code: string; state: string } | Error,
-    ) {
-      if (settled) return;
-      settled = true;
-      cleanup();
-      if (outcome instanceof Error) {
-        reject(outcome);
-      } else {
-        resolve(outcome);
-      }
-    }
-
-    onDispose(() => {
-      settle(new Error("OAuth flow was cancelled."));
-      closePopup(popup);
-    });
-
-    function validateAndSettle(data: OAuthCallbackMessage | undefined) {
-      if (data?.type !== OAUTH_CALLBACK_MESSAGE_TYPE) return;
-
-      if (data.state !== expectedState) {
-        settle(
-          new Error(
-            "OAuth state mismatch — the callback did not match the " +
-              "initiated flow. Please try again.",
-          ),
-        );
-        return;
-      }
-
-      if (!data.code) {
-        settle(new Error("No authorization code received from the OAuth provider."));
-        return;
-      }
-
-      settle({ code: data.code, state: data.state });
-    }
-
-    function onMessage(event: MessageEvent) {
-      if (event.origin !== window.location.origin) return;
-      validateAndSettle(event.data as OAuthCallbackMessage | undefined);
-    }
-
-    window.addEventListener("message", onMessage);
-
-    // BroadcastChannel — works even when COOP severs window.opener.
-    try {
-      bc = new BroadcastChannel(OAUTH_BROADCAST_CHANNEL);
-      hasBroadcastChannel = true;
-      bc.onmessage = (event: MessageEvent) => {
-        validateAndSettle(event.data as OAuthCallbackMessage | undefined);
-      };
-    } catch {
-      // BroadcastChannel unsupported — rely on postMessage only.
-    }
-
-    timeoutId = setTimeout(() => {
-      settle(
-        new Error(
-          "OAuth authentication timed out. Ensure your callback page " +
-            "renders <OAuthCallbackHandler /> from @stigmer/react at " +
-            "the URL configured as your OAuth redirect URI.",
-        ),
-      );
-      closePopup(popup);
-    }, POPUP_CALLBACK_TIMEOUT_MS);
-
-    // When BroadcastChannel is available, skip popup.closed polling.
-    // COOP providers (Sentry, GitHub, etc.) sever the opener reference
-    // on cross-origin navigation, making popup.closed permanently true
-    // while the popup is still active. BroadcastChannel reliably
-    // delivers the callback regardless of COOP; the overall timeout
-    // above catches abandoned flows.
-    //
-    // When BroadcastChannel is NOT available (legacy browsers), fall
-    // back to popup.closed polling with a short grace period — it is
-    // the only signal we have in that degraded path.
-    let popupClosedAt: number | null = null;
-
-    pollId = setInterval(() => {
-      if (hasBroadcastChannel) return;
-
-      if (popup.closed) {
-        if (popupClosedAt === null) {
-          popupClosedAt = Date.now();
-        } else if (Date.now() - popupClosedAt > POPUP_CLOSED_GRACE_MS) {
-          settle(new Error("The authentication window was closed before completing sign-in."));
-        }
-      } else {
-        popupClosedAt = null;
-      }
-    }, 500);
-  });
-}
-
-function closePopup(popup: Window | null) {
-  try {
-    popup?.close();
-  } catch {
-    // Cross-origin popup may throw on close — safe to ignore.
-  }
-}

package/src/session/NewSessionViewer.tsx

@@ -309,7 +309,6 @@ export function NewSessionViewer({
     allExecutions: [],
     org,
     sessionConfig,
-    selectedItem: null,
     includeExecutionFacets: false,
   });