@stigmer/react 3.1.1 → 3.1.3

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

@@ -0,0 +1,148 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+
+// ---------------------------------------------------------------------------
+// Launcher panel behavior: the session panel chip is PERSISTENT chrome (always
+// mounted, not gated on attached context), and opening the panel homes on the
+// Config facet — the pre-session view that carries the run defaults, since the
+// Explorer has no workspace yet.
+//
+// The composer is replaced with a prop-capturing probe so these tests exercise
+// only the panel chrome (chip + WorkspaceSurface rail) without pulling in the
+// full composer's provider requirements. The Config facet (SetupTab) renders
+// for real so "homes on Config" is asserted through the live rail.
+// ---------------------------------------------------------------------------
+
+vi.mock("../../composer", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../composer")>();
+  return {
+    ...actual,
+    SessionComposer: () => <div data-testid="composer-probe" />,
+  };
+});
+
+// A launcher flow with ZERO attached context — no agent, no workspace, no
+// MCP/skills/vars. This is the case the old `hasContext` gate hid the chip for.
+const emptyWorkspace = {
+  entries: [],
+  hasEntries: false,
+  toInput: vi.fn().mockReturnValue([]),
+  addGitRepo: vi.fn(),
+  addLocalPath: vi.fn(),
+  remove: vi.fn(),
+  clear: vi.fn(),
+};
+
+const stubEmptyFlow = {
+  harness: "native" as const,
+  setHarness: vi.fn(),
+  modelId: undefined,
+  setModelId: vi.fn(),
+  agentRef: null,
+  setAgentRef: vi.fn(),
+  resolution: null,
+  setResolution: vi.fn(),
+  mcpServerUsages: [],
+  setMcpServerUsages: vi.fn(),
+  skillRefs: [],
+  setSkillRefs: vi.fn(),
+  workspace: emptyWorkspace,
+  sessionVariables: { entries: [], isEmpty: true, clear: vi.fn() },
+  isSubmitting: false,
+  submitError: null,
+  submit: vi.fn(),
+};
+
+// A launcher flow WITH attached context (a git workspace entry). Used to prove
+// the composer stays centered regardless of context — the invariant that
+// replaced the old `hasContext` position flip (DD-16 layout stability).
+const stubPopulatedFlow = {
+  ...stubEmptyFlow,
+  workspace: {
+    ...emptyWorkspace,
+    hasEntries: true,
+    entries: [
+      {
+        id: "e1",
+        name: "acme/app",
+        type: "git" as const,
+        gitUrl: "https://github.com/acme/app.git",
+        gitBranch: "main",
+      },
+    ],
+  },
+};
+
+// Swappable flow so individual tests can substitute the context-attached
+// variant. The mock factory reads `mockFlow` at call time (the `mock` prefix
+// is why Vitest permits referencing it inside the hoisted factory); tests
+// reassign it before render and `beforeEach` resets it to the empty flow.
+let mockFlow: typeof stubEmptyFlow | typeof stubPopulatedFlow = stubEmptyFlow;
+
+vi.mock("../useNewSessionFlow", () => ({
+  useNewSessionFlow: () => mockFlow,
+}));
+
+import { NewSessionViewer } from "../NewSessionViewer";
+
+beforeEach(() => {
+  cleanup();
+  mockFlow = stubEmptyFlow;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("NewSessionViewer — persistent panel chip", () => {
+  it("renders the chip with zero attached context (not gated on hasContext)", () => {
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Show panel" })).toBeTruthy();
+  });
+
+  it("homes on the Config facet when the panel opens", () => {
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Show panel" }));
+
+    // The Config rail view is the active (checked) one; Explorer is not — the
+    // launcher's `defaultView: "configure"` home view.
+    const config = screen.getByRole("radio", { name: "Config" });
+    const explorer = screen.getByRole("radio", { name: "Explorer" });
+    expect(config.getAttribute("aria-checked")).toBe("true");
+    expect(explorer.getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("keeps the chip mounted as the collapse control once the panel is open", () => {
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Show panel" }));
+    // Chip is still present with zero context — now as the hide affordance, so
+    // an open panel always has its toggle (the vanishing-toggle defect the old
+    // context gate could produce is impossible by construction).
+    expect(screen.getByRole("button", { name: "Hide panel" })).toBeTruthy();
+  });
+});
+
+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`
+  // top-anchor that appeared once context was attached is gone (DD-16).
+  const composerWrapper = () => screen.getByTestId("composer-probe").parentElement;
+
+  it("centers the composer with zero attached context", () => {
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+    expect(composerWrapper()?.className).toContain("my-auto");
+    expect(composerWrapper()?.className).not.toContain("my-6");
+  });
+
+  it("keeps the composer centered when context is attached (no position flip)", () => {
+    mockFlow = stubPopulatedFlow;
+    render(<NewSessionViewer org="acme" onSessionCreated={vi.fn()} />);
+    // Regression guard: attaching a workspace previously top-anchored the
+    // composer. Centering must now hold irrespective of attached context.
+    expect(composerWrapper()?.className).toContain("my-auto");
+    expect(composerWrapper()?.className).not.toContain("my-6");
+  });
+});

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

@@ -0,0 +1,217 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import type { SessionPlan } from "../../library/detect-plan-artifact";
+import type { PlanDraftController } from "../usePlanDraft";
+import { PlanEditor } from "../PlanEditor";
+
+afterEach(cleanup);
+
+const PLAN_TEXT = "# Rollout Plan\n\n## Phase 1\n\nDo the first thing.";
+
+const plan: SessionPlan = {
+  executionId: "aex_1",
+  artifact: create(ExecutionArtifactSchema, {
+    name: "plan.md",
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 128n,
+    storageKey: "artifacts/aex_1/plan.md",
+    contentHash: "hash-a",
+  }),
+};
+
+function stigmerMock(opts?: { text?: string; truncated?: boolean }): Stigmer {
+  return {
+    agentExecution: {
+      getArtifactContent: vi.fn().mockResolvedValue({
+        content: new TextEncoder().encode(opts?.text ?? PLAN_TEXT),
+        contentType: "text/markdown",
+        truncated: opts?.truncated ?? false,
+      }),
+    },
+  } as unknown as Stigmer;
+}
+
+function draftMock(overrides?: Partial<PlanDraftController>): PlanDraftController {
+  return {
+    draftText: null,
+    isEdited: false,
+    setDraft: vi.fn(),
+    readDraft: () => null,
+    ...overrides,
+  };
+}
+
+function renderEditor(opts?: {
+  stigmer?: Stigmer;
+  draft?: PlanDraftController;
+  onBuildFromPlan?: () => void;
+  buildDisabled?: boolean;
+  readOnly?: boolean;
+}) {
+  return render(
+    <StigmerContext.Provider value={opts?.stigmer ?? stigmerMock()}>
+      <PlanEditor
+        plan={plan}
+        draft={opts?.draft ?? draftMock()}
+        onBuildFromPlan={opts?.onBuildFromPlan}
+        buildDisabled={opts?.buildDisabled}
+        readOnly={opts?.readOnly}
+      />
+    </StigmerContext.Provider>,
+  );
+}
+
+describe("PlanEditor", () => {
+  it("renders the plan as a document with the H1 lifted into the header", async () => {
+    renderEditor();
+
+    await waitFor(() =>
+      expect(screen.getByText("Rollout Plan")).toBeTruthy(),
+    );
+    expect(screen.getByText("Do the first thing.")).toBeTruthy();
+  });
+
+  it("fires onBuildFromPlan from the primary action", async () => {
+    const onBuildFromPlan = vi.fn();
+    renderEditor({ onBuildFromPlan });
+
+    await waitFor(() =>
+      expect(screen.getByText("Build")).toBeTruthy(),
+    );
+    fireEvent.click(screen.getByText("Build"));
+    expect(onBuildFromPlan).toHaveBeenCalledTimes(1);
+  });
+
+  it("degrades gracefully at narrow widths: truncating title and shrinkable toolbar", async () => {
+    // The document must reflow to whatever width the panel gives it — the
+    // toolbar wraps and its labels truncate rather than forcing a sideways
+    // scrollbar on the editor pane (the overflow-x-hidden body above clips,
+    // so anything that cannot shrink would be cut off, not scrollable).
+    renderEditor({ onBuildFromPlan: vi.fn() });
+
+    await waitFor(() =>
+      expect(screen.getByText("Rollout Plan")).toBeTruthy(),
+    );
+    expect(screen.getByText("Rollout Plan").className).toContain("truncate");
+
+    const buildLabel = screen.getByText("Build");
+    expect(buildLabel.className).toContain("truncate");
+    const toolbar = screen.getByRole("tablist", { name: "Plan view" })
+      .parentElement!;
+    expect(toolbar.className).toContain("flex-wrap");
+    expect(toolbar.className).toContain("min-w-0");
+  });
+
+  it("shows a pending label and disables the primary while the build starts", async () => {
+    renderEditor({ onBuildFromPlan: vi.fn(), buildDisabled: true });
+
+    await waitFor(() =>
+      expect(screen.getByText("Starting build…")).toBeTruthy(),
+    );
+    expect(
+      (screen.getByText("Starting build…").closest("button") as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+
+  it("edits into the viewer-owned draft and shows the Edited indicator", async () => {
+    const setDraft = vi.fn();
+    const stigmer = stigmerMock();
+    const { rerender } = render(
+      <StigmerContext.Provider value={stigmer}>
+        <PlanEditor plan={plan} draft={draftMock({ setDraft })} />
+      </StigmerContext.Provider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("Edit")).toBeTruthy());
+    fireEvent.click(screen.getByText("Edit"));
+
+    const editor = screen.getByRole("textbox", { name: "Edit plan" });
+    fireEvent.change(editor, { target: { value: "# Edited" } });
+    expect(setDraft).toHaveBeenCalledWith("# Edited");
+
+    // Draft active → indicator + revert, and the editor shows the draft.
+    // Same client instance, so the content fetch is not re-triggered.
+    rerender(
+      <StigmerContext.Provider value={stigmer}>
+        <PlanEditor
+          plan={plan}
+          draft={draftMock({ draftText: "# Edited", isEdited: true, setDraft })}
+        />
+      </StigmerContext.Provider>,
+    );
+    await waitFor(() => expect(screen.getByText("Edited")).toBeTruthy());
+
+    fireEvent.click(screen.getByText("Revert"));
+    expect(setDraft).toHaveBeenCalledWith(null);
+  });
+
+  it("disables editing for truncated content", async () => {
+    renderEditor({ stigmer: stigmerMock({ truncated: true }) });
+
+    await waitFor(() => expect(screen.getByText("Edit")).toBeTruthy());
+    expect((screen.getByText("Edit") as HTMLButtonElement).disabled).toBe(true);
+    expect(screen.getByText(/Preview truncated/)).toBeTruthy();
+  });
+
+  it("renders an error state with retry when the content fetch fails", async () => {
+    const failing = {
+      agentExecution: {
+        getArtifactContent: vi.fn().mockRejectedValue(new Error("boom")),
+      },
+    } as unknown as Stigmer;
+
+    renderEditor({ stigmer: failing });
+
+    await waitFor(() =>
+      expect(screen.getByText(/Couldn’t load the plan/)).toBeTruthy(),
+    );
+    expect(screen.getByText("Retry")).toBeTruthy();
+  });
+});
+
+describe("PlanEditor — read-only (superseded plan)", () => {
+  it("renders the document with a superseded notice, no Edit and no Build", async () => {
+    renderEditor({
+      readOnly: true,
+      draft: undefined,
+      onBuildFromPlan: vi.fn(),
+    });
+
+    await waitFor(() =>
+      expect(screen.getByText("Rollout Plan")).toBeTruthy(),
+    );
+    expect(screen.getByText("Superseded by a newer plan")).toBeTruthy();
+    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByText("Build")).toBeNull();
+  });
+
+  it("never applies the current plan's draft to a superseded plan", async () => {
+    // Defense in depth for the wiring contract (the host passes no draft for
+    // a read-only plan): even if a draft controller leaks through, read-only
+    // rendering shows the artifact text.
+    renderEditor({
+      readOnly: true,
+      draft: draftMock({ draftText: "# Someone else's draft", isEdited: true }),
+    });
+
+    await waitFor(() =>
+      expect(screen.getByText("Rollout Plan")).toBeTruthy(),
+    );
+    expect(screen.queryByText("Someone else's draft")).toBeNull();
+    expect(screen.queryByText("Edited")).toBeNull();
+  });
+
+  it("keeps Rendered and Source views available", async () => {
+    renderEditor({ readOnly: true, draft: undefined });
+
+    await waitFor(() => expect(screen.getByText("Source")).toBeTruthy());
+    fireEvent.click(screen.getByText("Source"));
+    expect(screen.getByText(/# Rollout Plan/)).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { PlanStreamingDocument } from "../PlanStreamingDocument";
+
+afterEach(cleanup);
+
+describe("PlanStreamingDocument — live plan tab view", () => {
+  it("is a busy article with a Writing status pill", () => {
+    render(
+      <PlanStreamingDocument displayText={"# Live Plan\n\nFirst section"} />,
+    );
+
+    const doc = screen.getByRole("article", { name: "Plan document" });
+    expect(doc.getAttribute("aria-busy")).toBe("true");
+    expect(screen.getByRole("status").textContent).toContain("Writing…");
+  });
+
+  it("lifts the leading H1 into the header and renders the body as markdown", () => {
+    render(
+      <PlanStreamingDocument
+        displayText={"# Live Plan\n\n## Phase 1\n\n- step one"}
+      />,
+    );
+
+    const doc = screen.getByRole("article", { name: "Plan document" });
+    expect(doc.querySelector("header")!.textContent).toContain("Live Plan");
+    // The lifted title does not repeat inside the prose body.
+    expect(doc.querySelectorAll("h1")).toHaveLength(0);
+    expect(doc.textContent).toContain("step one");
+  });
+
+  it("renders headerless while the H1 line is still streaming in", () => {
+    // extractLeadingH1 requires the heading to terminate (newline or end);
+    // a lone "#" has no title yet — the document simply shows the raw text
+    // until the title resolves. No fabricated placeholder header.
+    render(<PlanStreamingDocument displayText={"# Re"} />);
+
+    const doc = screen.getByRole("article", { name: "Plan document" });
+    // "# Re" parses as a (partial) title, lifted into the header.
+    expect(doc.querySelector("header")!.textContent).toContain("Re");
+  });
+
+  it("offers no Edit or Build controls — a plan in flight cannot be acted on", () => {
+    render(<PlanStreamingDocument displayText={"# Live Plan\n\nBody"} />);
+
+    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByText("Build")).toBeNull();
+    expect(screen.queryByRole("tablist")).toBeNull();
+  });
+});

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

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { SessionPanelChip } from "../SessionPanelChip";
+
+// ---------------------------------------------------------------------------
+// The chip is the panel's always-mounted toggle. Collapsed, it carries the
+// pending-item count (arrivals never auto-open the panel); open, it is a bare
+// hide affordance. Execution status deliberately never appears here (or in
+// any other viewer chrome) — the thread itself communicates run state.
+// ---------------------------------------------------------------------------
+
+afterEach(cleanup);
+
+describe("SessionPanelChip", () => {
+  it("collapsed: offers Show panel and carries the pending count", () => {
+    render(
+      <SessionPanelChip isOpen={false} onToggle={vi.fn()} badgeCount={3} />,
+    );
+    const button = screen.getByRole("button", { name: "Show panel" });
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    expect(button.textContent).toContain("3");
+  });
+
+  it("open: offers Hide panel without the count (the panel carries it)", () => {
+    render(<SessionPanelChip isOpen onToggle={vi.fn()} badgeCount={3} />);
+    const button = screen.getByRole("button", { name: "Hide panel" });
+    expect(button.getAttribute("aria-expanded")).toBe("true");
+    expect(button.textContent).not.toContain("3");
+  });
+
+  it("renders as a bare toggle when nothing is pending", () => {
+    render(<SessionPanelChip isOpen={false} onToggle={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Show panel" }).textContent).toBe("");
+  });
+
+  it("invokes onToggle on click", () => {
+    const onToggle = vi.fn();
+    render(<SessionPanelChip isOpen={false} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole("button", { name: "Show panel" }));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -3,6 +3,8 @@ import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import { create } from "@bufbuild/protobuf";
 import {
   CapturedFileChangeSchema,
+  FileChangeProgressSchema,
+  FileChangeProgressEntrySchema,
   FileChangeSetSchema,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
 import { FileContentSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
@@ -39,10 +41,6 @@ vi.mock("../../composer", async (importOriginal) => {
   };
 });
 
-vi.mock("../inspector/SessionInspector", () => ({
-  SessionInspector: () => <div data-testid="inspector-probe" />,
-}));
-
 const stubWorkspace = {
   entries: [],
   hasEntries: false,
@@ -74,6 +72,31 @@ function pendingChangeSet(id: string) {
   });
 }
 
+function progressSnapshot() {
+  return create(FileChangeProgressSchema, {
+    changeSetId: "cs-1",
+    filesChanged: 2,
+    linesAdded: 4,
+    linesRemoved: 1,
+    entries: [
+      create(FileChangeProgressEntrySchema, {
+        pathAfter: "a.ts",
+        kind: FileChangeKind.ADD,
+        linesAdded: 4,
+        linesRemoved: 0,
+      }),
+      create(FileChangeProgressEntrySchema, {
+        pathBefore: "b.ts",
+        pathAfter: "b.ts",
+        kind: FileChangeKind.MODIFY,
+        linesAdded: 0,
+        linesRemoved: 1,
+      }),
+    ],
+    capturedAt: "2026-07-05T00:00:00Z",
+  });
+}
+
 const stubConv = {
   session: { spec: {} },
   isLoading: false,
@@ -96,6 +119,7 @@ const stubConv = {
   submitApproval: vi.fn(),
   submittingApprovalIds: new Set<string>(),
   fileChangeSets: [] as ReturnType<typeof pendingChangeSet>[],
+  fileChangeProgress: undefined as ReturnType<typeof progressSnapshot> | undefined,
   submitFileDecision: vi.fn(),
   submittingFileDecisionKeys: new Set<string>(),
   fileDecisionErrors: new Map<string, Error>(),
@@ -134,11 +158,21 @@ vi.mock("../useSessionPageFlow", () => ({
   useSessionPageFlow: () => stubSessionPageFlow,
 }));
 
+vi.mock("../../hooks", () => ({
+  useStigmer: () => ({
+    agentExecution: {
+      uploadAttachment: vi.fn(),
+      getArtifactContent: vi.fn(),
+    },
+  }),
+}));
+
 import { SessionViewer } from "../SessionViewer";
 
 beforeEach(() => {
   threadProps.length = 0;
   stubConv.fileChangeSets = [];
+  stubConv.fileChangeProgress = undefined;
   stubConv.submitFileDecision = vi.fn();
 });
 
@@ -184,6 +218,34 @@ describe("SessionViewer — file-review dock wiring", () => {
     );
   });
 
+  it("renders no progress bar when no turn is capturing", () => {
+    render(<SessionViewer sessionId="ses_1" org="acme" />);
+    expect(
+      document.querySelector('[data-cursor-target="file-change-progress-bar"]'),
+    ).toBeNull();
+  });
+
+  it("shows the mid-run progress strip above the composer while a turn is capturing", () => {
+    // Progress is present (CAPTURING) and the dock is empty — the two are
+    // mutually exclusive per turn, so the strip stands in for the dock.
+    stubConv.fileChangeProgress = progressSnapshot();
+    render(<SessionViewer sessionId="ses_1" org="acme" />);
+
+    const bar = document.querySelector('[data-cursor-target="file-change-progress-bar"]');
+    expect(bar).toBeTruthy();
+    expect(screen.getByText(/2 files changing/)).toBeTruthy();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-dock"]'),
+    ).toBeNull();
+
+    // Pinned in the fixed strip, ordered before the composer input.
+    const composer = screen.getByTestId("composer-probe");
+    expect(bar!.parentElement).toBe(composer.parentElement);
+    expect(
+      bar!.compareDocumentPosition(composer) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
   it("gives the thread records-only file-review props (no decision callbacks)", () => {
     render(<SessionViewer sessionId="ses_1" org="acme" />);