@stigmer/react 3.1.17 → 3.2.0

package/session/artifact-document.js

@@ -1,22 +0,0 @@
-// Identity of the session's artifact document tabs in the workspace surface's
-// editor group.
-//
-// Kept in its own module (not in ArtifactDocument.tsx) so behavior-only
-// consumers — useSessionPanel opens an artifact tab, SessionViewer routes to it
-// — depend on the identity without pulling the component (and its content
-// renderer) into their module graph (DD-003 headless-first). Mirrors
-// plan-document.ts.
-import { virtualEntryId } from "../internal/store/index.js";
-/**
- * Virtual entry id of the artifact document FAMILY. Unlike the plan (one tab
- * per session), artifacts are many: every opened artifact shares this one
- * entry id and is distinguished by its {@link artifactKey}-derived `path`, so
- * `editorKey(ARTIFACT_DOCUMENT_ENTRY_ID, path)` yields one tab per artifact —
- * the VS Code "each file is a tab" model. The NUL-namespaced virtual id can
- * never alias a real workspace entry, and its distinct `"artifact"` kind can
- * never collide with the plan tab's `"plan"` kind.
- *
- * @see artifactKey — the `path` component (an artifact's stable identity)
- */
-export const ARTIFACT_DOCUMENT_ENTRY_ID = virtualEntryId("artifact");
-//# sourceMappingURL=artifact-document.js.map

package/session/artifact-document.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"artifact-document.js","sourceRoot":"","sources":["../../src/session/artifact-document.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,gBAAgB;AAChB,EAAE;AACF,wEAAwE;AACxE,gFAAgF;AAChF,0EAA0E;AAC1E,qEAAqE;AACrE,oBAAoB;AAEpB,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}

package/session/facets/InspectTab.d.ts

@@ -1,13 +0,0 @@
-import type { SelectedThreadItem } from "../../internal/store/selection-store.js";
-export interface InspectTabProps {
-    readonly selectedItem: SelectedThreadItem | null;
-}
-/**
- * Selection-driven inspector facet (Phase 2).
- *
- * In Phase 1 this renders an empty hint state. Phase 2 will populate
- * it with tool-call detail, sub-agent mini-thread, and artifact
- * preview based on the selected thread item.
- */
-export declare function InspectTab({ selectedItem }: InspectTabProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=InspectTab.d.ts.map

package/session/facets/InspectTab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InspectTab.d.ts","sourceRoot":"","sources":["../../../src/session/facets/InspectTab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAElF,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAClD;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,YAAY,EAAE,EAAE,eAAe,2CAsB3D"}

package/session/facets/InspectTab.js

@@ -1,19 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Selection-driven inspector facet (Phase 2).
- *
- * In Phase 1 this renders an empty hint state. Phase 2 will populate
- * it with tool-call detail, sub-agent mini-thread, and artifact
- * preview based on the selected thread item.
- */
-export function InspectTab({ selectedItem }) {
-    if (!selectedItem) {
-        return (_jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-8 text-center", children: [_jsx(SelectItemIcon, {}), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Click a tool call or sub-agent in the thread to inspect it" })] }));
-    }
-    return (_jsxs("div", { className: "px-1 py-2 text-xs text-muted-foreground", children: [_jsxs("p", { children: ["Inspecting: ", _jsx("span", { className: "font-medium text-foreground", children: selectedItem.kind })] }), _jsx("p", { className: "mt-1 text-[11px]", children: "Detailed view coming in Phase 2." })] }));
-}
-function SelectItemIcon() {
-    return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", className: "text-muted-foreground", "aria-hidden": "true", children: [_jsx("rect", { x: "2", y: "2", width: "16", height: "16", rx: "3" }), _jsx("path", { d: "M7 10h6M10 7v6" })] }));
-}
-//# sourceMappingURL=InspectTab.js.map

package/session/facets/InspectTab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InspectTab.js","sourceRoot":"","sources":["../../../src/session/facets/InspectTab.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAQb;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,YAAY,EAAmB;IAC1D,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,CACL,eAAK,SAAS,EAAC,iEAAiE,aAC9E,KAAC,cAAc,KAAG,EAClB,YAAG,SAAS,EAAC,oCAAoC,2EAE7C,IACA,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,yCAAyC,aACtD,wCACc,eAAM,SAAS,EAAC,6BAA6B,YAAE,YAAY,CAAC,IAAI,GAAQ,IAClF,EACJ,YAAG,SAAS,EAAC,kBAAkB,iDAE3B,IACA,CACP,CAAC;AACJ,CAAC;AAED,SAAS,cAAc;IACrB,OAAO,CACL,eACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,SAAS,EAAC,uBAAuB,iBACrB,MAAM,aAElB,eAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG,EAClD,eAAM,CAAC,EAAC,gBAAgB,GAAG,IACvB,CACP,CAAC;AACJ,CAAC"}

package/src/execution/ThreadSelectionContext.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { createContext } from "react";
-import type { SelectionStore } from "../internal/store/selection-store.js";
-
-/**
- * Carries the {@link SelectionStore} instance (stable ref) into the
- * thread subtree.
- *
- * **Defaults to `null`.** When absent, `useThreadSelection` returns
- * `null` and selectable components (ToolCallGroup, SubAgentSection)
- * behave exactly as they did before this feature — no DOM changes,
- * no selection affordance (DD-011 opt-in).
- *
- * `SessionViewer` provides the store; bare `MessageThread` does not.
- *
- * @internal Not exported from the public SDK barrel — consumed only
- * by SDK components and `SessionViewer`.
- */
-export const ThreadSelectionContext = createContext<SelectionStore | null>(null);

package/src/execution/useThreadSelection.ts

@@ -1,95 +0,0 @@
-"use client";
-
-import { useCallback, useContext, useSyncExternalStore } from "react";
-import type { SelectedThreadItem } from "../internal/store/selection-store.js";
-import { ThreadSelectionContext } from "./ThreadSelectionContext.js";
-
-/**
- * Return value of {@link useThreadSelection} when a provider is present.
- *
- * - `isSelected`: whether *this* item is currently selected.
- * - `select`: callback to select/toggle this item.
- *
- * Both are referentially stable (safe as `useEffect`/`useMemo` deps).
- */
-export interface ThreadSelectionHandle {
-  readonly isSelected: boolean;
-  readonly select: () => void;
-}
-
-const NOOP_SUBSCRIBE = (_cb: () => void) => () => {};
-const NOOP_SNAPSHOT = () => false;
-
-/**
- * Per-item selection hook for thread leaves.
- *
- * Uses `useSyncExternalStore` so only the previously- and
- * newly-selected rows re-render on a selection change (≤2 rows).
- *
- * Returns `null` when `ThreadSelectionContext` is absent (DD-011:
- * opt-in, backward compatible). Callers should guard:
- *
- * ```tsx
- * const selection = useThreadSelection("tool-call", tc.id);
- * // selection is null when no provider → no selection affordance
- * ```
- */
-export function useThreadSelection(
-  kind: SelectedThreadItem["kind"],
-  id: string,
-): ThreadSelectionHandle | null {
-  const store = useContext(ThreadSelectionContext);
-
-  const subscribe = store?.subscribe ?? NOOP_SUBSCRIBE;
-  const getSnapshot = store
-    ? () => store.isSelected(kind, id)
-    : NOOP_SNAPSHOT;
-
-  const isSelected = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-
-  const select = useCallback(() => {
-    if (!store) return;
-    const item = buildItem(kind, id);
-    store.toggle(item);
-  }, [store, kind, id]);
-
-  if (!store) return null;
-
-  return { isSelected, select };
-}
-
-/**
- * Hook to read the full selection from the store (for the InspectTab).
- *
- * Returns `null` when no provider is present or nothing is selected.
- */
-export function useSelectedThreadItem(): SelectedThreadItem | null {
-  const store = useContext(ThreadSelectionContext);
-
-  const subscribe = store?.subscribe ?? NOOP_SUBSCRIBE;
-  const getSnapshot = store
-    ? store.getSelection
-    : () => null;
-
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function buildItem(
-  kind: SelectedThreadItem["kind"],
-  id: string,
-): SelectedThreadItem {
-  switch (kind) {
-    case "tool-call":
-      return { kind: "tool-call", toolCallId: id };
-    case "sub-agent":
-      return { kind: "sub-agent", subAgentId: id };
-    case "artifact":
-      return { kind: "artifact", artifactKey: id };
-    case "write-back":
-      return { kind: "write-back", workspaceEntryName: id };
-  }
-}

package/src/internal/store/__tests__/selection-store.test.ts

@@ -1,115 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { SelectionStore, type SelectedThreadItem } from "../selection-store";
-
-function toolCall(id: string): SelectedThreadItem {
-  return { kind: "tool-call", toolCallId: id };
-}
-
-function subAgent(id: string): SelectedThreadItem {
-  return { kind: "sub-agent", subAgentId: id };
-}
-
-describe("SelectionStore", () => {
-  it("starts with null selection", () => {
-    const store = new SelectionStore();
-    expect(store.getSelection()).toBeNull();
-  });
-
-  it("select sets the selection and notifies listeners", () => {
-    const store = new SelectionStore();
-    const listener = vi.fn();
-    store.subscribe(listener);
-
-    store.select(toolCall("tc-1"));
-    expect(store.getSelection()).toEqual(toolCall("tc-1"));
-    expect(listener).toHaveBeenCalledOnce();
-  });
-
-  it("select with the same item does not notify", () => {
-    const store = new SelectionStore();
-    store.select(toolCall("tc-1"));
-
-    const listener = vi.fn();
-    store.subscribe(listener);
-
-    store.select(toolCall("tc-1"));
-    expect(listener).not.toHaveBeenCalled();
-  });
-
-  it("deselect clears the selection and notifies", () => {
-    const store = new SelectionStore();
-    store.select(toolCall("tc-1"));
-
-    const listener = vi.fn();
-    store.subscribe(listener);
-
-    store.deselect();
-    expect(store.getSelection()).toBeNull();
-    expect(listener).toHaveBeenCalledOnce();
-  });
-
-  it("deselect when already null does not notify", () => {
-    const store = new SelectionStore();
-    const listener = vi.fn();
-    store.subscribe(listener);
-
-    store.deselect();
-    expect(listener).not.toHaveBeenCalled();
-  });
-
-  it("toggle selects when nothing is selected", () => {
-    const store = new SelectionStore();
-    store.toggle(toolCall("tc-1"));
-    expect(store.getSelection()).toEqual(toolCall("tc-1"));
-  });
-
-  it("toggle deselects when the same item is selected", () => {
-    const store = new SelectionStore();
-    store.select(toolCall("tc-1"));
-    store.toggle(toolCall("tc-1"));
-    expect(store.getSelection()).toBeNull();
-  });
-
-  it("toggle switches to a different item", () => {
-    const store = new SelectionStore();
-    store.select(toolCall("tc-1"));
-    store.toggle(subAgent("sa-1"));
-    expect(store.getSelection()).toEqual(subAgent("sa-1"));
-  });
-
-  it("isSelected returns true for the selected item", () => {
-    const store = new SelectionStore();
-    store.select(toolCall("tc-1"));
-
-    expect(store.isSelected("tool-call", "tc-1")).toBe(true);
-    expect(store.isSelected("tool-call", "tc-2")).toBe(false);
-    expect(store.isSelected("sub-agent", "tc-1")).toBe(false);
-  });
-
-  it("isSelected returns false when nothing is selected", () => {
-    const store = new SelectionStore();
-    expect(store.isSelected("tool-call", "tc-1")).toBe(false);
-  });
-
-  it("unsubscribe removes the listener", () => {
-    const store = new SelectionStore();
-    const listener = vi.fn();
-    const unsub = store.subscribe(listener);
-
-    unsub();
-    store.select(toolCall("tc-1"));
-    expect(listener).not.toHaveBeenCalled();
-  });
-
-  it("supports multiple listeners", () => {
-    const store = new SelectionStore();
-    const a = vi.fn();
-    const b = vi.fn();
-    store.subscribe(a);
-    store.subscribe(b);
-
-    store.select(toolCall("tc-1"));
-    expect(a).toHaveBeenCalledOnce();
-    expect(b).toHaveBeenCalledOnce();
-  });
-});

package/src/internal/store/selection-store.ts

@@ -1,112 +0,0 @@
-/**
- * Discriminated union for a selected thread item.
- *
- * Mirrors the `ThreadItem.kind` from `MessageThread` but carries
- * only the identifying key — not the full data. The `InspectTab`
- * derives display detail from the execution snapshot separately.
- */
-export type SelectedThreadItem =
-  | { readonly kind: "tool-call"; readonly toolCallId: string }
-  | { readonly kind: "sub-agent"; readonly subAgentId: string }
-  | { readonly kind: "artifact"; readonly artifactKey: string }
-  | { readonly kind: "write-back"; readonly workspaceEntryName: string };
-
-type Listener = () => void;
-
-/**
- * Framework-agnostic store for thread item selection.
- *
- * Implements the `useSyncExternalStore` contract identical to
- * {@link ConversationStore} and `WorkflowExecutionEventStore`.
- *
- * **Render isolation strategy:** consumers subscribe to a
- * per-item boolean via `isSelected(id)`, so only the previously-
- * and newly-selected leaves re-render on a selection change (≤2).
- *
- * The context carries the **store instance (stable ref)**, not the
- * value — so the context provider never triggers consumer re-renders.
- */
-export class SelectionStore {
-  private _selected: SelectedThreadItem | null = null;
-  private _listeners = new Set<Listener>();
-
-  // -- Mutations -----------------------------------------------------------
-
-  select(item: SelectedThreadItem): void {
-    if (selectedEqual(this._selected, item)) return;
-    this._selected = item;
-    this._notify();
-  }
-
-  deselect(): void {
-    if (this._selected === null) return;
-    this._selected = null;
-    this._notify();
-  }
-
-  toggle(item: SelectedThreadItem): void {
-    if (selectedEqual(this._selected, item)) {
-      this.deselect();
-    } else {
-      this.select(item);
-    }
-  }
-
-  // -- useSyncExternalStore contract ---------------------------------------
-
-  subscribe = (listener: Listener): (() => void) => {
-    this._listeners.add(listener);
-    return () => {
-      this._listeners.delete(listener);
-    };
-  };
-
-  /** Returns the full selection object (for the InspectTab). */
-  getSelection = (): SelectedThreadItem | null => {
-    return this._selected;
-  };
-
-  /**
-   * Per-item boolean selector. Each selectable leaf calls this inside
-   * `useSyncExternalStore` so it only re-renders when its own
-   * selected state changes.
-   */
-  isSelected = (kind: SelectedThreadItem["kind"], id: string): boolean => {
-    if (this._selected === null) return false;
-    return this._selected.kind === kind && itemId(this._selected) === id;
-  };
-
-  // -- Internal ------------------------------------------------------------
-
-  private _notify(): void {
-    for (const listener of this._listeners) {
-      listener();
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function itemId(item: SelectedThreadItem): string {
-  switch (item.kind) {
-    case "tool-call":
-      return item.toolCallId;
-    case "sub-agent":
-      return item.subAgentId;
-    case "artifact":
-      return item.artifactKey;
-    case "write-back":
-      return item.workspaceEntryName;
-  }
-}
-
-function selectedEqual(
-  a: SelectedThreadItem | null,
-  b: SelectedThreadItem | null,
-): boolean {
-  if (a === b) return true;
-  if (a === null || b === null) return false;
-  return a.kind === b.kind && itemId(a) === itemId(b);
-}

package/src/session/artifact-document.ts

@@ -1,23 +0,0 @@
-// Identity of the session's artifact document tabs in the workspace surface's
-// editor group.
-//
-// Kept in its own module (not in ArtifactDocument.tsx) so behavior-only
-// consumers — useSessionPanel opens an artifact tab, SessionViewer routes to it
-// — depend on the identity without pulling the component (and its content
-// renderer) into their module graph (DD-003 headless-first). Mirrors
-// plan-document.ts.
-
-import { virtualEntryId } from "../internal/store/index.js";
-
-/**
- * Virtual entry id of the artifact document FAMILY. Unlike the plan (one tab
- * per session), artifacts are many: every opened artifact shares this one
- * entry id and is distinguished by its {@link artifactKey}-derived `path`, so
- * `editorKey(ARTIFACT_DOCUMENT_ENTRY_ID, path)` yields one tab per artifact —
- * the VS Code "each file is a tab" model. The NUL-namespaced virtual id can
- * never alias a real workspace entry, and its distinct `"artifact"` kind can
- * never collide with the plan tab's `"plan"` kind.
- *
- * @see artifactKey — the `path` component (an artifact's stable identity)
- */
-export const ARTIFACT_DOCUMENT_ENTRY_ID = virtualEntryId("artifact");

package/src/session/facets/InspectTab.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import type { SelectedThreadItem } from "../../internal/store/selection-store.js";
-
-export interface InspectTabProps {
-  readonly selectedItem: SelectedThreadItem | null;
-}
-
-/**
- * Selection-driven inspector facet (Phase 2).
- *
- * In Phase 1 this renders an empty hint state. Phase 2 will populate
- * it with tool-call detail, sub-agent mini-thread, and artifact
- * preview based on the selected thread item.
- */
-export function InspectTab({ selectedItem }: InspectTabProps) {
-  if (!selectedItem) {
-    return (
-      <div className="flex flex-col items-center justify-center px-4 py-8 text-center">
-        <SelectItemIcon />
-        <p className="mt-2 text-xs text-muted-foreground">
-          Click a tool call or sub-agent in the thread to inspect it
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="px-1 py-2 text-xs text-muted-foreground">
-      <p>
-        Inspecting: <span className="font-medium text-foreground">{selectedItem.kind}</span>
-      </p>
-      <p className="mt-1 text-[11px]">
-        Detailed view coming in Phase 2.
-      </p>
-    </div>
-  );
-}
-
-function SelectItemIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      className="text-muted-foreground"
-      aria-hidden="true"
-    >
-      <rect x="2" y="2" width="16" height="16" rx="3" />
-      <path d="M7 10h6M10 7v6" />
-    </svg>
-  );
-}

package/src/workflow/WorkflowExecutionApprovalCard.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import { memo, useCallback, useEffect, useState } from "react";
-import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { cn } from "@stigmer/theme";
-import { DecisionButton } from "../internal/DecisionButton.js";
-import { InCardDecisionError } from "../internal/InCardDecisionError.js";
-
-/** Props for {@link WorkflowExecutionApprovalCard}. */
-export interface WorkflowExecutionApprovalCardProps {
-  /** The prompt message explaining what needs approval. */
-  readonly prompt: string;
-  /** Tool call ID for the approval request. */
-  readonly toolCallId: string;
-  /** List of users/roles that can approve. */
-  readonly approvers: readonly string[];
-  /** Timeout in seconds (0 = no timeout). */
-  readonly timeoutSeconds: number;
-  /** Callback to submit the approval decision. */
-  readonly onSubmitApproval: (
-    toolCallId: string,
-    action: ApprovalAction,
-    comment?: string,
-  ) => Promise<unknown>;
-  /** `true` while this gate's submission is in flight. */
-  readonly isSubmitting: boolean;
-  /**
-   * This gate's last failed decision, or `null`. Surfaced in-card beside the
-   * actions (via the shared {@link InCardDecisionError}) — supply
-   * {@link useWorkflowExecutionActions}'s `approvalErrorsByToolCallId` for this
-   * `toolCallId`.
-   */
-  readonly error?: Error | null;
-  /** Additional CSS class names. */
-  readonly className?: string;
-}
-
-/**
- * Inline approval card rendered within the execution timeline when
- * a `human_input` task or agent tool approval gate is active.
- *
- * Provides approve and reject buttons with an optional comment field.
- * Keyboard-navigable and accessible.
- */
-export const WorkflowExecutionApprovalCard = memo(function WorkflowExecutionApprovalCard({
-  prompt,
-  toolCallId,
-  approvers,
-  timeoutSeconds,
-  onSubmitApproval,
-  isSubmitting,
-  error,
-  className,
-}: WorkflowExecutionApprovalCardProps) {
-  const [comment, setComment] = useState("");
-  // Which action is in flight, so the spinner lands on the clicked button —
-  // matching ApprovalCard / WorkflowTaskApprovalCard. Reset once the RPC settles.
-  const [active, setActive] = useState<"approve" | "reject" | null>(null);
-
-  useEffect(() => {
-    if (!isSubmitting) setActive(null);
-  }, [isSubmitting]);
-
-  // ApprovalAction enum values: 0=UNSPECIFIED, 1=APPROVE, 2=SKIP, 3=REJECT
-  const handleApprove = useCallback(() => {
-    setActive("approve");
-    onSubmitApproval(toolCallId, 1 as ApprovalAction, comment || undefined);
-  }, [toolCallId, comment, onSubmitApproval]);
-
-  const handleReject = useCallback(() => {
-    setActive("reject");
-    onSubmitApproval(toolCallId, 3 as ApprovalAction, comment || undefined);
-  }, [toolCallId, comment, onSubmitApproval]);
-
-  return (
-    <div
-      role="alert"
-      aria-label="Approval required"
-      // Neutral card + 2px warning left accent — the quiet Cursor-grade chrome
-      // shared with ApprovalCard. (Replaces the old amber `bg-warning/5` fill.)
-      className={cn(
-        "my-1 rounded-lg border border-border-prominent border-l-2 border-l-warning p-3",
-        className,
-      )}
-    >
-      <p className="text-sm font-medium text-foreground">{prompt}</p>
-
-      {approvers.length > 0 && (
-        <p className="mt-1 text-xs text-muted-foreground">
-          Approvers: {approvers.join(", ")}
-        </p>
-      )}
-
-      {timeoutSeconds > 0 && (
-        <p className="text-xs text-muted-foreground">
-          Expires in {formatTimeout(timeoutSeconds)}
-        </p>
-      )}
-
-      <div className="mt-2">
-        <input
-          type="text"
-          value={comment}
-          onChange={(e) => setComment(e.target.value)}
-          placeholder="Comment (optional)"
-          disabled={isSubmitting}
-          className={cn(
-            "w-full rounded border border-border bg-background px-2 py-1 text-xs text-foreground",
-            "placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring",
-            "disabled:opacity-50",
-          )}
-        />
-      </div>
-
-      <div className="mt-2 flex gap-2">
-        <DecisionButton
-          label="Approve"
-          variant="primary"
-          onClick={handleApprove}
-          isActive={active === "approve"}
-          isSubmitting={isSubmitting}
-        />
-        <DecisionButton
-          label="Reject"
-          variant="danger"
-          onClick={handleReject}
-          isActive={active === "reject"}
-          isSubmitting={isSubmitting}
-        />
-      </div>
-
-      {/* A failed decision surfaces HERE, beside this gate's actions — not in the
-          viewer's lifecycle banner. A workflow can hold many gates at once, so a
-          failure must name the one it belongs to; the optimistic spinner has
-          already reverted, and this explains the snap-back. Shared with the
-          agent ApprovalCard / FileReviewCard via InCardDecisionError. */}
-      {error && (
-        <InCardDecisionError
-          error={error}
-          leadIn="submit decision"
-          cursorTarget="wf-approval-error"
-        />
-      )}
-    </div>
-  );
-});
-
-function formatTimeout(seconds: number): string {
-  if (seconds < 60) return `${seconds}s`;
-  const m = Math.floor(seconds / 60);
-  if (m < 60) return `${m}m`;
-  const h = Math.floor(m / 60);
-  return `${h}h`;
-}