fix(frontend): show complete model activity from phase one

frontend/src/shell/AppShell.new-session.test.tsx

@@ -63,6 +63,11 @@ test("shows the question and creation timer before POST /sessions resolves, then
   expect(await screen.findByText("How many patients?", { selector: "p" })).toBeInTheDocument();
   expect(screen.getByText("Creating session…")).toBeInTheDocument();
   expect(screen.getByText(/\d+s/)).toBeInTheDocument();
+  expect(useSessionStore.getState().activityLog[0]).toEqual({
+    kind: "prompt",
+    phase: "F1",
+    text: "How many patients?",
+  });
   expect(FakeEventSource.instances).toHaveLength(0);
 
   releaseCreate();

frontend/src/shell/AppShell.session-mgmt.test.tsx

@@ -78,6 +78,11 @@ test("Resume from the panel activates the session and closes the panel", async (
   await userEvent.click(await screen.findByText("Attiva uno"));
   await screen.findByText("Domanda originale"); // panel open
   await userEvent.click(screen.getByRole("button", { name: /resume/i }));
+  expect(useSessionStore.getState().activityLog).toContainEqual({
+    kind: "lifecycle",
+    phase: null,
+    text: "Resuming session",
+  });
   await waitFor(() => expect(resumed).toBe("s1"));
   await waitFor(() => expect(screen.queryByText("Domanda originale")).not.toBeInTheDocument()); // panel closed
 });
@@ -206,23 +211,45 @@ test("a failed resume keeps the panel open and does not activate the session", a
   await waitFor(() => expect(screen.getByText("Domanda originale")).toBeInTheDocument());
 });
 
-test("WIP icon toggles the Model activity panel and shows streamed reasoning", async () => {
+test("closing and reopening Model activity preserves the complete activity log", async () => {
   wrap();
-  // Activate a session by opening + resuming is heavy; instead drive the store directly.
-  // The WIP icon only renders with an active session, so simulate one via Resume.
   server.use(http.post("http://localhost:8787/sessions/:id/resume", () => new HttpResponse(null, { status: 204 })));
-  await userEvent.click(await screen.findByText("Attiva uno")); // opens docs panel
+  await userEvent.click(await screen.findByText("Attiva uno"));
-  await userEvent.click(await screen.findByRole("button", { name: /resume/i })); // active session
+  await userEvent.click(await screen.findByRole("button", { name: /resume/i }));
-  const SIX_LINES = ["FIRSTLINE step one", "step two", "step three", "step four", "step five", "step six"].join("\n");
+  act(() => {
-  act(() => { useSessionStore.getState().applyEvent({ type: "activity_delta", text: SIX_LINES }); });
+    const store = useSessionStore.getState();
-  // The verbose stream stays in the (closed) left panel: its START is not shown centrally
+    store.setPhase("F4");
-  // (the central working indicator shows only the last 5 lines of tail, by design).
+    store.setLastUserEntry({ kind: "input", text: "Inspect patient cohort" });
+    store.applyEvent({
+      type: "activity_event",
+      activity: { kind: "tool", toolCallId: "tool-1", toolName: "bash", status: "running" },
+    });
+    store.applyEvent({
+      type: "activity_event",
+      activity: { kind: "tool", toolCallId: "tool-1", toolName: "bash", status: "completed" },
+    });
+    store.applyEvent({ type: "text_delta", text: "Cohort ready" });
+  });
+  const beforeClose = useSessionStore.getState().activityLog;
+
   expect(screen.queryByRole("heading", { name: /model activity/i })).not.toBeInTheDocument();
-  expect(screen.queryByText(/FIRSTLINE/)).not.toBeInTheDocument();
   await userEvent.click(screen.getByRole("button", { name: /model activity/i }));
-  // Panel open: the full streamed text is visible inside it.
+  const panel = (await screen.findByRole("heading", { name: /model activity/i })).closest("aside");
-  expect(await screen.findByRole("heading", { name: /model activity/i })).toBeInTheDocument();
+  expect(panel).not.toBeNull();
-  expect(screen.getByText(/FIRSTLINE/)).toBeInTheDocument();
+  expect(within(panel!).getByText("Inspect patient cohort")).toBeInTheDocument();
+  expect(within(panel!).getByText("bash")).toBeInTheDocument();
+  expect(within(panel!).getByText("Cohort ready")).toBeInTheDocument();
+
+  await userEvent.click(screen.getByRole("button", { name: /close model activity/i }));
+  expect(screen.queryByRole("heading", { name: /model activity/i })).not.toBeInTheDocument();
+  expect(useSessionStore.getState().activityLog).toEqual(beforeClose);
+
+  await userEvent.click(screen.getByRole("button", { name: /show model activity/i }));
+  const reopened = (await screen.findByRole("heading", { name: /model activity/i })).closest("aside");
+  expect(reopened).not.toBeNull();
+  expect(within(reopened!).getByText("Inspect patient cohort")).toBeInTheDocument();
+  expect(within(reopened!).getByText("bash")).toBeInTheDocument();
+  expect(within(reopened!).getByText("Cohort ready")).toBeInTheDocument();
 });
 
 test("session finalization shows the completion banner and returns to landing", async () => {

frontend/src/shell/AppShell.tsx

@@ -107,6 +107,7 @@ export function AppShell() {
     // working spinner shows straight away; the backend calls run after.
     setPanelSession(null);
     resetSession();
+    recordLifecycle("Resuming session");
     setAwaitingQuestion(false);
     // Optimistic: the resume POST is about to hand the ball to the harness.
     setAgentActive(true);
@@ -211,6 +212,7 @@ export function AppShell() {
   // leave the spinner on forever.
   const pendingWidget = useSessionStore((s) => s.pendingWidget);
   const resetSession = useSessionStore((s) => s.resetSession);
+  const recordLifecycle = useSessionStore((s) => s.recordLifecycle);
   const setPhase = useSessionStore((s) => s.setPhase);
   const setAgentActive = useSessionStore((s) => s.setAgentActive);
   const lastSystemEvent = useSessionStore((s) => s.lastSystemEvent);

frontend/src/shell/ModelActivityPanel.test.tsx

@@ -1,80 +1,162 @@
-import { render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, vi } from "vitest";
+import type { ActivityEntry } from "../api/types";
 import { useSessionStore } from "../store/sessionStore";
-import { ModelActivityPanel } from "./ModelActivityPanel";
+import { isNearBottom, ModelActivityPanel } from "./ModelActivityPanel";
 
 beforeEach(() => useSessionStore.getState().resetSession());
 
-test("renders the streamed model activity", () => {
+test("renders every row in a non-reasoning activity sequence", () => {
-  useSessionStore.getState().applyEvent({ type: "activity_delta", text: "Promoting table dim_patient." });
+  const store = useSessionStore.getState();
-  render(<ModelActivityPanel onClose={vi.fn()} />);
+  store.setPhase("F1");
-  expect(screen.getByText(/Promoting table dim_patient/)).toBeInTheDocument();
+  store.setLastUserEntry({ kind: "input", text: "How many patients?" });
+  store.applyEvent({ type: "system_event", event: "agent_start" });
+  store.applyEvent({
+    type: "activity_event",
+    activity: { kind: "tool", toolCallId: "tool-1", toolName: "bash", status: "running" },
+  });
+  store.applyEvent({
+    type: "activity_event",
+    activity: { kind: "tool", toolCallId: "tool-1", toolName: "bash", status: "completed" },
+  });
+  store.applyEvent({ type: "text_delta", text: "Found **42 patients**." });
+  store.applyEvent({
+    type: "ui_request",
+    ui_request: { id: "gate-1", widget: "select", phase: "F1_review", title: "Confirm cohort" },
   });
 
-test("does not treat final assistant text as model reasoning", () => {
-  useSessionStore.getState().applyEvent({ type: "text_delta", text: "Final answer" });
   render(<ModelActivityPanel onClose={vi.fn()} />);
 
-  expect(screen.queryByText("Final answer")).not.toBeInTheDocument();
+  expect(screen.getAllByRole("article")).toHaveLength(5);
-  expect(screen.getByText("No activity yet.")).toBeInTheDocument();
+  expect(screen.getByText("How many patients?")).toBeInTheDocument();
+  expect(screen.getByText("Agent started")).toBeInTheDocument();
+  expect(screen.getByText("bash")).toBeInTheDocument();
+  expect(screen.getByText("42 patients").tagName).toBe("STRONG");
+  expect(screen.getByText("Confirm cohort")).toBeInTheDocument();
+  expect(screen.getAllByText("F1")).toHaveLength(5);
 });
 
-test("renders markdown emphasis instead of literal asterisks", () => {
+test("keeps all timeline entries visible without an expansion control", () => {
-  useSessionStore.getState().applyEvent({ type: "activity_delta", text: "Chiarimento su **fibrillazione atriale**." });
+  const activityLog: ActivityEntry[] = Array.from({ length: 8 }, (_, index) => ({
+    kind: "lifecycle",
+    phase: `F${index + 1}`,
+    text: `timeline-${index + 1}`,
+  }));
+  useSessionStore.setState({ activityLog });
+
   render(<ModelActivityPanel onClose={vi.fn()} />);
-  expect(screen.getByText("fibrillazione atriale").tagName).toBe("STRONG");
+
+  for (const entry of activityLog) expect(screen.getByText(entry.text)).toBeInTheDocument();
+  expect(screen.queryByRole("button", { name: /show (more|less)/i })).not.toBeInTheDocument();
 });
 
-test("close button calls onClose", async () => {
+test("shows only the tool name and completion status", () => {
+  useSessionStore.setState({
+    activityLog: [
+      {
+        kind: "tool",
+        phase: "F4",
+        text: "bash",
+        toolCallId: "tool-1",
+        status: "completed",
+      },
+    ],
+  });
+
+  render(<ModelActivityPanel onClose={vi.fn()} />);
+
+  const row = screen.getByText("bash").closest("article");
+  expect(row).not.toBeNull();
+  expect(within(row!).getByText("completed")).toBeInTheDocument();
+  expect(within(row!).queryByRole("button")).not.toBeInTheDocument();
+  expect(screen.queryByText(/raw details/i)).not.toBeInTheDocument();
+});
+
+test("labels a warning in text instead of relying on its semantic color", () => {
+  useSessionStore.setState({
+    activityLog: [
+      { kind: "status", phase: "F3", text: "Retrying retrieval", level: "warning" },
+    ],
+  });
+
+  render(<ModelActivityPanel onClose={vi.fn()} />);
+
+  const row = screen.getByText("Retrying retrieval").closest("article");
+  expect(row).not.toBeNull();
+  expect(within(row!).getByText("warning")).toBeInTheDocument();
+});
+
+test("renders assistant and thinking markdown as separate entries", () => {
+  useSessionStore.setState({
+    activityLog: [
+      { kind: "thinking", phase: "F2", text: "Considering **history**." },
+      { kind: "assistant", phase: "F2", text: "Use *current* records." },
+    ],
+  });
+
+  render(<ModelActivityPanel onClose={vi.fn()} />);
+
+  expect(screen.getByText("history").tagName).toBe("STRONG");
+  expect(screen.getByText("current").tagName).toBe("EM");
+  expect(screen.getAllByRole("article")).toHaveLength(2);
+});
+
+test("close calls onClose without mutating the activity log", async () => {
   const onClose = vi.fn();
+  const activityLog: ActivityEntry[] = [
+    { kind: "prompt", phase: "F1", text: "Keep this row" },
+  ];
+  useSessionStore.setState({ activityLog });
   render(<ModelActivityPanel onClose={onClose} />);
-  await userEvent.click(screen.getByRole("button", { name: /close/i }));
+
-  expect(onClose).toHaveBeenCalled();
+  await userEvent.click(screen.getByRole("button", { name: /close model activity/i }));
+
+  expect(onClose).toHaveBeenCalledOnce();
+  expect(useSessionStore.getState().activityLog).toEqual(activityLog);
 });
 
-const EIGHT = ["para-01", "para-02", "para-03", "para-04", "para-05", "para-06", "para-07", "para-08"].join("\n\n");
+test("isNearBottom includes the 48px boundary", () => {
-
+  expect(isNearBottom({ scrollHeight: 500, clientHeight: 100, scrollTop: 352 })).toBe(true);
-test("collapsed shows only the last 5 paragraphs of the model-stream tail", () => {
+  expect(isNearBottom({ scrollHeight: 500, clientHeight: 100, scrollTop: 351 })).toBe(false);
-  useSessionStore.getState().applyEvent({ type: "activity_delta", text: EIGHT });
+  expect(isNearBottom({ scrollHeight: 500, clientHeight: 100, scrollTop: 400 })).toBe(true);
-  render(<ModelActivityPanel onClose={vi.fn()} />);
-  expect(screen.getByText("para-08")).toBeInTheDocument();
-  expect(screen.getByText("para-04")).toBeInTheDocument();
-  expect(screen.queryByText("para-03")).not.toBeInTheDocument();
-  expect(screen.queryByText("para-01")).not.toBeInTheDocument();
 });
 
-test("expanding reveals the full stream", async () => {
+function setScrollGeometry(
-  useSessionStore.getState().applyEvent({ type: "activity_delta", text: EIGHT });
+  element: HTMLElement,
-  render(<ModelActivityPanel onClose={vi.fn()} />);
+  values: { scrollHeight: number; clientHeight: number; scrollTop: number },
-  await userEvent.click(screen.getByRole("button", { name: /show more/i }));
+) {
-  expect(screen.getByText("para-01")).toBeInTheDocument();
+  Object.defineProperties(element, {
+    scrollHeight: { configurable: true, value: values.scrollHeight },
+    clientHeight: { configurable: true, value: values.clientHeight },
+    scrollTop: { configurable: true, writable: true, value: values.scrollTop },
   });
+}
 
-test("paragraphs stay separated as distinct blocks", () => {
+test("follows appended activity while the viewport is near the bottom", () => {
-  useSessionStore
+  useSessionStore.setState({
-    .getState()
+    activityLog: [{ kind: "lifecycle", phase: "F1", text: "First" }],
-    .applyEvent({ type: "activity_delta", text: "Primo paragrafo.\n\nSecondo paragrafo." });
-  render(<ModelActivityPanel onClose={vi.fn()} />);
-  const first = screen.getByText("Primo paragrafo.");
-  const second = screen.getByText("Secondo paragrafo.");
-  expect(first.tagName).toBe("P");
-  expect(second.tagName).toBe("P");
-  expect(first).not.toBe(second);
-});
-
-
-test("separates activity updates concatenated after sentence punctuation", () => {
-  useSessionStore.getState().applyEvent({
-    type: "activity_delta",
-    text: "Ambiguità principale risolta.Finestra temporale risolta.Terza ambiguità risolta.",
   });
   render(<ModelActivityPanel onClose={vi.fn()} />);
+  const viewport = screen.getByTestId("activity-scroll");
+  setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 300 });
 
-  const first = screen.getByText("Ambiguità principale risolta.");
+  act(() => useSessionStore.getState().recordLifecycle("Second"));
-  const second = screen.getByText("Finestra temporale risolta.");
+
-  const third = screen.getByText("Terza ambiguità risolta.");
+  expect(viewport.scrollTop).toBe(400);
-  expect(first.tagName).toBe("P");
+  expect(viewport).toHaveAttribute("tabindex", "0");
-  expect(second.tagName).toBe("P");
+});
-  expect(third.tagName).toBe("P");
+
+test("preserves manual scroll position when appended activity arrives", () => {
+  useSessionStore.setState({
+    activityLog: [{ kind: "lifecycle", phase: "F1", text: "First" }],
+  });
+  render(<ModelActivityPanel onClose={vi.fn()} />);
+  const viewport = screen.getByTestId("activity-scroll");
+  setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 100 });
+  fireEvent.scroll(viewport);
+
+  act(() => useSessionStore.getState().recordLifecycle("Second"));
+
+  expect(viewport.scrollTop).toBe(100);
 });

frontend/src/shell/ModelActivityPanel.tsx

@@ -1,11 +1,17 @@
-import { useState } from "react";
+import { useLayoutEffect, useRef } from "react";
-import { ChevronDown, ChevronUp, X } from "lucide-react";
+import { X } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import type { ActivityEntry } from "../api/types";
 import { useSessionStore } from "../store/sessionStore";
 import { Button } from "../components/ui/button";
 
-const TAIL_PARAGRAPHS = 5;
+export function isNearBottom(
+  el: Pick<HTMLElement, "scrollHeight" | "clientHeight" | "scrollTop">,
+  threshold = 48,
+): boolean {
+  return el.scrollHeight - el.clientHeight - el.scrollTop <= threshold;
+}
 
 export function formatModelActivity(text: string): string {
   return text
@@ -18,57 +24,102 @@ export function formatModelActivity(text: string): string {
     .trim();
 }
 
-/** Left drawer showing "what's happening": the tail of the model's streamed markdown
+function MarkdownBody({ entry }: { entry: ActivityEntry }) {
- *  output, rendered as markdown (not raw text) so headings/emphasis/lists come through
+  const tone = entry.kind === "thinking" ? "text-muted-foreground" : "text-foreground";
- *  and paragraphs stay visually separated. Collapsed it shows the last few paragraphs
+  return (
- *  (refreshing as the stream grows); the expand toggle reveals the full stream. Opened
+    <div className={`thot-prose max-w-[74ch] text-sm ${tone}`}>
- *  on demand from the rotating activity icon. */
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{formatModelActivity(entry.text)}</ReactMarkdown>
+    </div>
+  );
+}
+
+function ActivityBody({ entry }: { entry: ActivityEntry }) {
+  if (entry.kind === "assistant" || entry.kind === "thinking") {
+    return <MarkdownBody entry={entry} />;
+  }
+
+  if (entry.kind === "status") {
+    const tone =
+      entry.level === "error"
+        ? "text-destructive"
+        : entry.level === "warning"
+          ? "text-amber-600"
+          : "text-foreground";
+    return <p className={`whitespace-pre-wrap break-words text-sm leading-relaxed ${tone}`}>{entry.text}</p>;
+  }
+
+  if (entry.kind === "lifecycle") {
+    return <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-muted-foreground">{entry.text}</p>;
+  }
+
+  return <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground">{entry.text}</p>;
+}
+
+function ActivityRow({ entry }: { entry: ActivityEntry }) {
+  return (
+    <article className="border-b border-border/50 py-3 last:border-b-0">
+      <div className="mb-1.5 flex flex-wrap items-center gap-1.5 text-[0.65rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+        {entry.phase && <span>{entry.phase}</span>}
+        <span>{entry.kind}</span>
+        {entry.status && (
+          <span className={entry.status === "failed" ? "text-destructive" : undefined}>
+            {entry.status}
+          </span>
+        )}
+        {entry.level && (
+          <span
+            className={
+              entry.level === "error"
+                ? "text-destructive"
+                : entry.level === "warning"
+                  ? "text-amber-600"
+                  : undefined
+            }
+          >
+            {entry.level}
+          </span>
+        )}
+      </div>
+      <ActivityBody entry={entry} />
+    </article>
+  );
+}
+
+/** Left drawer showing the complete in-memory model activity timeline. */
 export function ModelActivityPanel({ onClose }: { onClose: () => void }) {
   const activityLog = useSessionStore((s) => s.activityLog);
-  const activity = activityLog.filter((entry) => entry.kind === "thinking");
+  const scrollRef = useRef<HTMLDivElement>(null);
-  const [expanded, setExpanded] = useState(false);
+  const followRef = useRef(true);
 
-  // Blank lines are markdown's paragraph separator — split on them (not on every "\n",
+  useLayoutEffect(() => {
-  // which would also break single soft-wrapped lines apart) so each block below is a
+    const viewport = scrollRef.current;
-  // real paragraph and the tail cut lands on paragraph boundaries.
+    if (viewport && followRef.current) viewport.scrollTop = viewport.scrollHeight;
-  const paragraphs = activity
+  }, [activityLog]);
-    .map((e) => e.text)
-    .join("\n\n")
-    .split(/\n{2,}/)
-    .map((p) => p.trim())
-    .filter((p) => p !== "");
-  const shown = expanded ? paragraphs : paragraphs.slice(-TAIL_PARAGRAPHS);
-  const canExpand = paragraphs.length > TAIL_PARAGRAPHS;
-  const source = formatModelActivity(shown.join("\n\n"));
 
   return (
     <aside className="flex w-2/5 shrink-0 flex-col border-r border-border bg-sidebar">
       <div className="flex items-center justify-between border-b border-border/60 px-3 py-3">
         <h2 className="font-heading text-sm font-semibold text-foreground">Model activity</h2>
-        <div className="flex items-center gap-1">
-          {canExpand && (
-            <Button
-              size="icon-sm"
-              variant="ghost"
-              aria-label={expanded ? "Show less" : "Show more"}
-              aria-expanded={expanded}
-              onClick={() => setExpanded((v) => !v)}
-            >
-              {expanded ? <ChevronUp className="size-4" /> : <ChevronDown className="size-4" />}
-            </Button>
-          )}
         <Button size="icon-sm" variant="ghost" aria-label="Close model activity" onClick={onClose}>
           <X className="size-4" />
         </Button>
       </div>
-      </div>
+      <div
-      <div className="flex-1 overflow-y-auto px-3 py-5">
+        ref={scrollRef}
-        {shown.length === 0 ? (
+        data-testid="activity-scroll"
-          <p className="text-sm text-muted-foreground">No activity yet.</p>
+        tabIndex={0}
+        aria-label="Model activity timeline"
+        className="flex-1 overflow-y-auto px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/40"
+        onScroll={(event) => {
+          followRef.current = isNearBottom(event.currentTarget);
+        }}
+      >
+        {activityLog.length === 0 ? (
+          <p className="py-3 text-sm text-muted-foreground">No activity yet.</p>
         ) : (
-          <div className="thot-prose max-w-[74ch]">
+          activityLog.map((entry, index) => (
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>
+            <ActivityRow key={`${index}-${entry.toolCallId ?? entry.kind}`} entry={entry} />
-          </div>
+          ))
         )}
       </div>
     </aside>