@stigmer/react 3.12.6 → 3.12.8

package/src/session/TranscriptExportMenu.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Copy, Download, FileJson, FileText } from "lucide-react";
+import { cn } from "@stigmer/theme";
+import { ActionMenu } from "../action-menu/ActionMenu.js";
+import { SpinnerIcon } from "../internal/SpinnerIcon.js";
+import {
+  useExportTranscript,
+  type UseExportTranscriptOptions,
+} from "./useExportTranscript.js";
+
+/** Props for {@link TranscriptExportMenu}. */
+export interface TranscriptExportMenuProps extends UseExportTranscriptOptions {
+  /** The session whose conversation is exported. */
+  readonly sessionId: string | null;
+  /** Additional CSS classes for the trigger button. */
+  readonly className?: string;
+}
+
+/**
+ * The whole-conversation export control (stigmer/stigmer#814): a quiet
+ * icon-button menu offering **Copy transcript**, **Download Markdown**, and
+ * **Download JSON**, powered by {@link useExportTranscript} — the canonical
+ * transcript assembly, thinking and resolved tool outputs included.
+ *
+ * `SessionViewer` renders it in its header corner by default; it is exported
+ * so hosts can mount the same control on any other surface a conversation is
+ * reachable from (a session list's row menu, a custom header).
+ *
+ * The export serializes exactly what the viewer already shows the current
+ * caller — the RPCs behind it enforce the same `can_view` permission — so
+ * offering it to every audience adds convenience, not exposure.
+ */
+export function TranscriptExportMenu({
+  sessionId,
+  includeSuperseded,
+  className,
+}: TranscriptExportMenuProps) {
+  const exporter = useExportTranscript(sessionId, { includeSuperseded });
+
+  return (
+    <ActionMenu>
+      <ActionMenu.Trigger
+        aria-label="Export transcript"
+        className={cn("stg:size-7", className)}
+      >
+        {exporter.isExporting ? (
+          <SpinnerIcon size={14} />
+        ) : (
+          <Download className="stg:size-3.5" aria-hidden="true" />
+        )}
+      </ActionMenu.Trigger>
+      <ActionMenu.Content>
+        <ActionMenu.Item
+          icon={<Copy className="stg:size-3.5" aria-hidden="true" />}
+          onSelect={() => void exporter.copyMarkdown()}
+          disabled={exporter.isExporting}
+        >
+          Copy transcript
+        </ActionMenu.Item>
+        <ActionMenu.Item
+          icon={<FileText className="stg:size-3.5" aria-hidden="true" />}
+          onSelect={() => void exporter.downloadMarkdown()}
+          disabled={exporter.isExporting}
+        >
+          Download Markdown
+        </ActionMenu.Item>
+        <ActionMenu.Item
+          icon={<FileJson className="stg:size-3.5" aria-hidden="true" />}
+          onSelect={() => void exporter.downloadJson()}
+          disabled={exporter.isExporting}
+        >
+          Download JSON
+        </ActionMenu.Item>
+      </ActionMenu.Content>
+    </ActionMenu>
+  );
+}

package/src/session/__tests__/NewSessionViewer.test.tsx

@@ -33,6 +33,7 @@ const emptyWorkspace = {
   clear: vi.fn(),
 };
 
+const setAutoApproveAll = vi.fn();
 const stubEmptyFlow = {
   harness: "native" as const,
   setHarness: vi.fn(),
@@ -48,6 +49,8 @@ const stubEmptyFlow = {
   setSkillRefs: vi.fn(),
   workspace: emptyWorkspace,
   sessionVariables: { entries: [], isEmpty: true, clear: vi.fn() },
+  autoApproveAll: false,
+  setAutoApproveAll,
   isSubmitting: false,
   submitError: null,
   submit: vi.fn(),
@@ -125,6 +128,35 @@ describe("NewSessionViewer — persistent panel chip", () => {
   });
 });
 
+describe("NewSessionViewer — auto-approve placement (#816 rework)", () => {
+  const INDICATOR_TEXT = "Auto-approving tool calls for this session";
+
+  it("shows no indicator while auto-approve is off — the launcher stays clean", () => {
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+    expect(screen.queryByText(INDICATOR_TEXT)).toBeNull();
+  });
+
+  it("shows the armed-only indicator when a seed pre-arms the session, with Turn off", () => {
+    mockFlow = { ...stubEmptyFlow, autoApproveAll: true };
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+
+    expect(screen.getByText(INDICATOR_TEXT)).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Turn off" }));
+    expect(setAutoApproveAll).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
+  it("offers the auto-approve switch in the Config facet, wired to the flow", () => {
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Show panel" }));
+    const toggle = screen.getByRole("switch", { name: "Auto-approve" });
+    expect(toggle.getAttribute("aria-checked")).toBe("false");
+
+    fireEvent.click(toggle);
+    expect(setAutoApproveAll).toHaveBeenCalledExactlyOnceWith(true);
+  });
+});
+
 describe("NewSessionViewer — composer stays centered", () => {
   // The composer's wrapper is the probe's parent (wrapper > h1 + composer +
   // footer). `my-auto` is unconditional safe-centering; the old `my-6`

package/src/session/__tests__/SessionViewer-autoApprove.test.tsx

@@ -0,0 +1,244 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+// ---------------------------------------------------------------------------
+// Wiring-contract tests for auto-approve placement (the #816 rework):
+//
+// - The composer carries NO auto-approve control — the session-level switch
+//   lives in the Config facet (SetupTab receives the `autoApprove` group for
+//   every audience that may submit approvals, never observers; guests never
+//   render the panel at all).
+// - The armed-only AutoApproveIndicator above the composer is the
+//   always-visible disclosure: present exactly while the state is armed,
+//   with a one-click "Turn off"; never rendered for observers.
+// ---------------------------------------------------------------------------
+
+type CapturedProps = Record<string, unknown>;
+
+const composerProps: CapturedProps[] = [];
+vi.mock("../../composer", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../composer")>();
+  return {
+    ...actual,
+    SessionComposer: (props: CapturedProps) => {
+      composerProps.push(props);
+      return <div data-testid="composer-probe" />;
+    },
+  };
+});
+
+vi.mock("../../execution/MessageThread", () => ({
+  MessageThread: () => <div data-testid="thread-probe" />,
+}));
+
+vi.mock("../../execution/FileReviewDock", () => ({
+  FileReviewDock: () => <div data-testid="file-review-dock-probe" />,
+}));
+
+// SetupTab renders for real: the facet switch is asserted through its
+// actual DOM (a switch labeled "Auto-approve" in the Run Config section),
+// reached by opening the panel and selecting the Config rail view.
+
+const stubWorkspace = {
+  entries: [],
+  hasEntries: false,
+  toInput: vi.fn().mockReturnValue([]),
+  addGitRepo: vi.fn(),
+  addLocalPath: vi.fn(),
+  removeEntry: vi.fn(),
+  clear: vi.fn(),
+};
+
+const stubConv = {
+  session: { spec: {} } as Record<string, unknown>,
+  isLoading: false,
+  loadError: null,
+  completedExecutions: [],
+  activeStreamExecution: null,
+  activePhase: null,
+  isStreaming: false,
+  isConnecting: false,
+  sendFollowUp: vi.fn(),
+  canSendFollowUp: true,
+  isSending: false,
+  sendError: null,
+  clearSendError: vi.fn(),
+  pendingUserMessage: null,
+  workspaceEntries: [],
+  mcpServerUsages: [],
+  skillRefs: [],
+  pendingApprovals: [],
+  submitApproval: vi.fn(),
+  submittingApprovalIds: new Set<string>(),
+  fileChangeSets: [],
+  submitFileDecision: vi.fn(),
+  submittingFileDecisionKeys: new Set<string>(),
+  fileDecisionErrors: new Map<string, Error>(),
+  streamError: null,
+  reconnectStream: vi.fn(),
+  approvalError: null,
+  retryLastSend: vi.fn(),
+};
+
+const setAutoApproveAll = vi.fn();
+const stubSessionPageFlow = {
+  conv: stubConv,
+  harness: "native" as const,
+  executionTarget: undefined,
+  model: [undefined, vi.fn()] as const,
+  interactionMode: ["agent" as const, vi.fn()] as const,
+  agentRef: { org: "acme", slug: "support-bot" },
+  setAgentRef: vi.fn(),
+  resolution: null,
+  setResolution: vi.fn(),
+  isDefaultAgent: false,
+  mcpServerUsages: [],
+  setMcpServerUsages: vi.fn(),
+  skillRefs: [],
+  setSkillRefs: vi.fn(),
+  workspace: stubWorkspace,
+  sessionVariables: { entries: [], isEmpty: true, clear: vi.fn() },
+  autoApproveAll: false,
+  setAutoApproveAll,
+  submitApproval: vi.fn(),
+  handleSubmit: vi.fn(),
+  submitError: null as Error | null,
+  displayExecution: null,
+  allExecutions: [],
+  sandboxWorkspaceRoot: undefined,
+};
+vi.mock("../useSessionPageFlow", () => ({
+  useSessionPageFlow: () => stubSessionPageFlow,
+}));
+
+vi.mock("../../hooks", () => ({
+  useStigmer: () => ({
+    agentExecution: {
+      uploadAttachment: vi.fn(),
+      getArtifactContent: vi.fn(),
+    },
+  }),
+}));
+
+import { SessionViewer } from "../SessionViewer";
+
+const INDICATOR_TEXT = "Auto-approving tool calls for this session";
+
+function lastComposerProps(): CapturedProps {
+  expect(composerProps.length).toBeGreaterThan(0);
+  return composerProps.at(-1)!;
+}
+
+/** Selects the panel's Config facet (the rail's radio). */
+function openConfigFacet() {
+  fireEvent.click(screen.getByRole("radio", { name: "Config" }));
+}
+
+function facetSwitch(): HTMLElement | null {
+  return screen.queryByRole("switch", { name: "Auto-approve" });
+}
+
+beforeEach(() => {
+  composerProps.length = 0;
+  stubConv.session = { spec: {} };
+  stubSessionPageFlow.autoApproveAll = false;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("SessionViewer — composer stays clean (#816 rework)", () => {
+  it("hands the composer no auto-approve control at all", () => {
+    render(<SessionViewer sessionId="ses_1" org="acme" />);
+
+    expect("autoApprove" in lastComposerProps()).toBe(false);
+  });
+});
+
+describe("SessionViewer — Config facet auto-approve switch (#816 rework)", () => {
+  it("renders the switch reflecting the flow state, and flipping calls the flow (integrator)", () => {
+    render(<SessionViewer sessionId="ses_1" org="acme" defaultPanelOpen />);
+    openConfigFacet();
+
+    const toggle = facetSwitch();
+    expect(toggle).not.toBeNull();
+    expect(toggle!.getAttribute("aria-checked")).toBe("false");
+    fireEvent.click(toggle!);
+    expect(setAutoApproveAll).toHaveBeenCalledExactlyOnceWith(true);
+  });
+
+  it("mirrors an armed flow state into the switch", () => {
+    stubSessionPageFlow.autoApproveAll = true;
+    render(<SessionViewer sessionId="ses_1" org="acme" defaultPanelOpen />);
+    openConfigFacet();
+
+    expect(facetSwitch()!.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("endUser gets the switch — the walk-away persona is an end user", () => {
+    render(
+      <SessionViewer
+        sessionId="ses_1"
+        org="acme"
+        audience="endUser"
+        defaultPanelOpen
+      />,
+    );
+    openConfigFacet();
+
+    expect(facetSwitch()).not.toBeNull();
+  });
+
+  it("observers never get the switch — the approval-submission withhold", () => {
+    render(
+      <SessionViewer
+        sessionId="ses_1"
+        org="acme"
+        audience="observer"
+        defaultPanelOpen
+      />,
+    );
+    openConfigFacet();
+
+    expect(facetSwitch()).toBeNull();
+  });
+
+  it("channel-origin sessions never get the switch (observer by construction)", () => {
+    stubConv.session = {
+      spec: {},
+      metadata: { labels: { "stigmer.ai/channel-id": "chn_1" } },
+    };
+    render(<SessionViewer sessionId="ses_1" org="acme" defaultPanelOpen />);
+    openConfigFacet();
+
+    expect(facetSwitch()).toBeNull();
+  });
+});
+
+describe("SessionViewer — armed-only indicator (#816 rework)", () => {
+  it("absent while auto-approve is off — the composer stays clean", () => {
+    render(<SessionViewer sessionId="ses_1" org="acme" />);
+
+    expect(screen.queryByText(INDICATOR_TEXT)).toBeNull();
+  });
+
+  it("renders while armed, and Turn off flips the flow state", () => {
+    stubSessionPageFlow.autoApproveAll = true;
+    render(<SessionViewer sessionId="ses_1" org="acme" />);
+
+    expect(screen.getByText(INDICATOR_TEXT)).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Turn off" }));
+    expect(setAutoApproveAll).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
+  it("never renders for observers — they cannot arm or disarm anything", () => {
+    stubSessionPageFlow.autoApproveAll = true;
+    render(
+      <SessionViewer sessionId="ses_1" org="acme" audience="observer" />,
+    );
+
+    expect(screen.queryByText(INDICATOR_TEXT)).toBeNull();
+  });
+});

package/src/session/__tests__/SessionViewer-transcriptExport.test.tsx

@@ -0,0 +1,189 @@
+// SessionViewer's built-in transcript export (stigmer/stigmer#814, placement
+// reworked with #816): export lives in the Config facet's Transcript section
+// for viewers with the session panel, and the header TranscriptExportMenu
+// remains ONLY as the panel-less fallback (guests, panel="none") — so
+// wherever a conversation is viewed, its transcript stays reachable, without
+// a floating header button on surfaces that have a proper home for it.
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+vi.mock("../../composer", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../composer")>();
+  return {
+    ...actual,
+    SessionComposer: () => <div data-testid="composer-probe" />,
+  };
+});
+vi.mock("../../execution/MessageThread", () => ({
+  MessageThread: () => <div data-testid="thread-probe" />,
+}));
+vi.mock("../../execution/FileReviewDock", () => ({
+  FileReviewDock: () => <div data-testid="file-review-dock-probe" />,
+}));
+
+// SetupTab renders for real: the facet's Transcript section is asserted
+// through its actual DOM (the "Copy transcript" action row), reached by
+// opening the panel and selecting the Config rail view.
+
+const stubWorkspace = {
+  entries: [],
+  hasEntries: false,
+  toInput: vi.fn().mockReturnValue([]),
+  addGitRepo: vi.fn(),
+  addLocalPath: vi.fn(),
+  removeEntry: vi.fn(),
+  clear: vi.fn(),
+};
+
+const stubConv = {
+  session: { metadata: { id: "ses_1", org: "acme" }, spec: {} },
+  isLoading: false,
+  loadError: null,
+  completedExecutions: [],
+  activeStreamExecution: null,
+  activePhase: null,
+  isStreaming: false,
+  isConnecting: false,
+  sendFollowUp: vi.fn(),
+  canSendFollowUp: true,
+  isSending: false,
+  sendError: null,
+  clearSendError: vi.fn(),
+  pendingUserMessage: null,
+  workspaceEntries: [],
+  mcpServerUsages: [],
+  skillRefs: [],
+  pendingApprovals: [],
+  submitApproval: vi.fn(),
+  submittingApprovalIds: new Set<string>(),
+  fileChangeSets: [],
+  submitFileDecision: vi.fn(),
+  submittingFileDecisionKeys: new Set<string>(),
+  fileDecisionErrors: new Map<string, Error>(),
+  streamError: null,
+  reconnectStream: vi.fn(),
+  approvalError: null,
+  retryLastSend: vi.fn(),
+};
+
+vi.mock("../useSessionPageFlow", () => ({
+  useSessionPageFlow: () => ({
+    conv: stubConv,
+    harness: "native" as const,
+    executionTarget: undefined,
+    model: [undefined, vi.fn()] as const,
+    interactionMode: ["agent" as const, vi.fn()] as const,
+    agentRef: { org: "acme", slug: "support-bot" },
+    setAgentRef: vi.fn(),
+    resolution: null,
+    setResolution: vi.fn(),
+    isDefaultAgent: false,
+    mcpServerUsages: [],
+    setMcpServerUsages: vi.fn(),
+    skillRefs: [],
+    setSkillRefs: vi.fn(),
+    workspace: stubWorkspace,
+    sessionVariables: { entries: [], isEmpty: true, clear: vi.fn() },
+    autoApproveAll: false,
+    setAutoApproveAll: vi.fn(),
+    submitApproval: vi.fn(),
+    handleSubmit: vi.fn(),
+    submitError: null as Error | null,
+    displayExecution: null,
+    allExecutions: [],
+    sandboxWorkspaceRoot: undefined,
+  }),
+}));
+
+vi.mock("../../hooks", () => ({
+  useStigmer: () => ({
+    session: { get: vi.fn() },
+    agentExecution: {
+      uploadAttachment: vi.fn(),
+      getArtifactContent: vi.fn(),
+      listBySession: vi.fn(),
+    },
+  }),
+}));
+
+import { SessionViewer } from "../SessionViewer";
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+function headerExportTrigger(): HTMLElement | null {
+  return screen.queryByRole("button", { name: "Export transcript" });
+}
+
+/** Selects the panel's Config facet (the rail's radio). */
+function openConfigFacet() {
+  fireEvent.click(screen.getByRole("radio", { name: "Config" }));
+}
+
+function facetCopyAction(): HTMLElement | null {
+  return screen.queryByRole("button", { name: "Copy transcript" });
+}
+
+describe("SessionViewer transcript export placement", () => {
+  it("panel-enabled viewers export from the Config facet, not the header", () => {
+    render(<SessionViewer sessionId="ses_1" org="acme" defaultPanelOpen />);
+    expect(headerExportTrigger()).toBeNull();
+    openConfigFacet();
+    expect(facetCopyAction()).not.toBeNull();
+  });
+
+  it("observers keep facet export — a bulk copy of what they already see", () => {
+    render(
+      <SessionViewer
+        sessionId="ses_1"
+        org="acme"
+        audience="observer"
+        defaultPanelOpen
+      />,
+    );
+    openConfigFacet();
+    expect(facetCopyAction()).not.toBeNull();
+  });
+
+  it("panel=\"none\" hosts fall back to the header menu", () => {
+    render(<SessionViewer sessionId="ses_1" org="acme" panel="none" />);
+    expect(headerExportTrigger()).not.toBeNull();
+  });
+
+  it("guests fall back to the header menu (no panel to reach the facet)", () => {
+    render(<SessionViewer sessionId="ses_1" org="acme" audience="guest" />);
+    expect(headerExportTrigger()).not.toBeNull();
+  });
+
+  it("the header fallback composes with host headerActions", () => {
+    render(
+      <SessionViewer
+        sessionId="ses_1"
+        org="acme"
+        panel="none"
+        headerActions={<button>Share</button>}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Share" })).toBeTruthy();
+    expect(headerExportTrigger()).not.toBeNull();
+  });
+
+  it("explicit opt-out removes BOTH surfaces, leaving host actions intact", () => {
+    render(
+      <SessionViewer
+        sessionId="ses_1"
+        org="acme"
+        transcriptExport={false}
+        defaultPanelOpen
+        headerActions={<button>Share</button>}
+      />,
+    );
+    expect(headerExportTrigger()).toBeNull();
+    openConfigFacet();
+    expect(facetCopyAction()).toBeNull();
+    expect(screen.getByRole("button", { name: "Share" })).toBeTruthy();
+  });
+});

package/src/session/__tests__/TranscriptExportMenu.test.tsx

@@ -0,0 +1,97 @@
+// TranscriptExportMenu (stigmer/stigmer#814): the control's wiring — labels,
+// action dispatch, busy state. The menu chrome itself (Base UI portal
+// behavior) is the ActionMenu compound's concern; it is faked transparent
+// here so the assertions target this component's own contract.
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+vi.mock("../../action-menu/ActionMenu", () => {
+  function Root({ children }: { children: ReactNode }) {
+    return <div>{children}</div>;
+  }
+  return {
+    ActionMenu: Object.assign(Root, {
+      Trigger: ({
+        children,
+        "aria-label": ariaLabel,
+      }: {
+        children: ReactNode;
+        "aria-label"?: string;
+      }) => <button aria-label={ariaLabel}>{children}</button>,
+      Content: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+      Item: ({
+        children,
+        onSelect,
+        disabled,
+      }: {
+        children: ReactNode;
+        onSelect?: () => void;
+        disabled?: boolean;
+      }) => (
+        <button onClick={onSelect} disabled={disabled}>
+          {children}
+        </button>
+      ),
+    }),
+  };
+});
+
+const exporter = {
+  copyMarkdown: vi.fn(() => Promise.resolve()),
+  downloadMarkdown: vi.fn(() => Promise.resolve()),
+  downloadJson: vi.fn(() => Promise.resolve()),
+  isExporting: false,
+  error: null as Error | null,
+};
+const useExportTranscript = vi.fn(
+  (_sessionId: string | null, _options?: unknown) => exporter,
+);
+vi.mock("../useExportTranscript", () => ({
+  useExportTranscript: (sessionId: string | null, options?: unknown) =>
+    useExportTranscript(sessionId, options),
+}));
+
+import { TranscriptExportMenu } from "../TranscriptExportMenu";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  exporter.isExporting = false;
+  cleanup();
+});
+
+describe("TranscriptExportMenu", () => {
+  it("offers the three export actions and dispatches to the hook", () => {
+    render(<TranscriptExportMenu sessionId="ses_01" />);
+
+    fireEvent.click(screen.getByText("Copy transcript"));
+    fireEvent.click(screen.getByText("Download Markdown"));
+    fireEvent.click(screen.getByText("Download JSON"));
+
+    expect(exporter.copyMarkdown).toHaveBeenCalledTimes(1);
+    expect(exporter.downloadMarkdown).toHaveBeenCalledTimes(1);
+    expect(exporter.downloadJson).toHaveBeenCalledTimes(1);
+  });
+
+  it("labels the trigger for assistive tech", () => {
+    render(<TranscriptExportMenu sessionId="ses_01" />);
+    expect(
+      screen.getByRole("button", { name: "Export transcript" }),
+    ).toBeTruthy();
+  });
+
+  it("disables the actions while an export is in flight", () => {
+    exporter.isExporting = true;
+    render(<TranscriptExportMenu sessionId="ses_01" />);
+    const item = screen.getByText("Copy transcript").closest("button");
+    expect(item?.disabled).toBe(true);
+  });
+
+  it("forwards includeSuperseded to the hook", () => {
+    render(<TranscriptExportMenu sessionId="ses_01" includeSuperseded />);
+    expect(useExportTranscript).toHaveBeenCalledWith("ses_01", {
+      includeSuperseded: true,
+    });
+  });
+});