# Central Live Log and Compact CTE Plan Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Deduplicate the live workflow UI so the center contains only a compact scrolling assistant-stream log plus reviewer forms/artifacts, the left panel contains only thinking/status, and F6 CTE cards use dense vertical padding with moderate responsive lateral padding. **Architecture:** Keep the complete Zustand folds and all backend/SSE contracts unchanged. Apply two rendering projections: `CentralStatus` derives a bounded chronological log from `transcript`, while `ModelActivityPanel` default-denies every kind except `thinking` and `status`. Reuse one pure near-bottom helper for both scroll surfaces, and limit CTE spacing changes to `CtePlanViewer` rather than the shared card primitive. **Tech Stack:** React 18, TypeScript, Zustand, Tailwind CSS 3.4, React Testing Library, Vitest, Docker Compose. ## Global Constraints - `activityLog`, `transcript`, `lastUserEntry`, `stepMessages`, store event folds, backend, SSE/replay, workflow, persistence, and provider contracts remain unchanged. - The central body renders only the compact assistant-transcript live log while `working` plus the existing `WidgetHost`, artifact viewers, finalized-session card, and composer owned by `AppShell`. - The central log contains every non-blank line from all assistant transcript entries in chronological order; it never contains raw tool or lifecycle events. - The central log is absent when `working` is false or the transcript has no non-blank content; do not synthesize waiting/status copy. - The central log uses a bounded scroll viewport, wraps rather than truncates, has accessible log semantics, follows only near the bottom, and preserves manual scroll position. - `CentralStatus` must not render last-user echo, spinner, timer, working label, or `stepMessages`. - The left panel allowlist is exactly `thinking` and `status`; `prompt`, `gate`, `assistant`, `tool`, `lifecycle`, and unknown future kinds are hidden. - Panel filtering stays at the rendering boundary. Empty state and auto-scroll derive only from visible `thinking`/`status` entries. - CTE header, content, table rows, and filter rows use 8 px vertical padding, 12 px lateral padding below `sm`, and 16 px lateral padding from `sm` upward. - The bordered CTE header explicitly overrides the shared `CardHeader` bottom padding with `[&.border-b]:pb-2`; rationale/divider top padding is 8 px. - Preserve CTE grids, gaps, borders, headings, badges, chips, wrapping, `min-w-0`, ordered-list semantics, roles, ARIA labels, typography, and colors. - UI strings remain English. Do not add dependencies, preferences, toggles, text heuristics, or unrelated refactors. - Preserve the user-owned untracked `.vite/` tree: do not add, delete, clean, or commit it. - In an isolated worktree, if `deploy/thothii.env` is absent, create only an ignored symlink to `/home/chirone/ThothII/deploy/thothii.env`; never read, copy, print, stage, or commit its contents. - Deployment may rebuild/recreate only `frontend`; restart only `omics_portal-web-1` if the Vite entry changes. Never restart `core`, mutate settings/sessions, or terminate an unrelated Pi process. --- ### Task 1: Central live log and non-duplicating activity panel **Files:** - Create: `frontend/src/shell/activityScroll.ts` - Modify: `frontend/src/shell/ModelActivityPanel.tsx:1-141` - Modify: `frontend/src/shell/CentralStatus.tsx:1-112` - Modify: `frontend/src/shell/AppShell.tsx:283-295,405-414` - Test: `frontend/src/shell/ModelActivityPanel.test.tsx` - Test: `frontend/src/shell/CentralStatus.test.tsx` - Test: `frontend/src/shell/AppShell.new-session.test.tsx:48-78` - Test: `frontend/src/shell/AppShell.session-mgmt.test.tsx:691-731` **Interfaces:** - Consumes: unchanged `useSessionStore` fields `activityLog`, `transcript`, `pendingWidget`, and `agentActive`. - Produces: `isNearBottom(el, threshold?)` from `activityScroll.ts`; `isVisibleModelActivity(entry)` allowing only `thinking`/`status`; `CentralStatus({ working }: { working: boolean })` rendering the central log. - [ ] **Step 1: Write failing panel projection tests** Update the mixed-sequence and allowlist cases in `ModelActivityPanel.test.tsx` so their essential assertions are: ```tsx test("renders only thinking and status from a mixed F1 sequence", () => { const store = useSessionStore.getState(); store.setPhase("F1"); 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: "text_delta", text: "Let me run another bash search." }); store.applyEvent({ type: "activity_delta", text: "Inspecting **schema**." }); store.applyEvent({ type: "info", level: "warning", text: "Retrying schema lookup" }); store.applyEvent({ type: "ui_request", ui_request: { id: "gate-1", widget: "select", phase: "F1_review", title: "Confirm cohort" }, }); render(); expect(screen.getAllByRole("article")).toHaveLength(2); expect(screen.getByText("schema").tagName).toBe("STRONG"); expect(screen.getByText("Retrying schema lookup")).toBeInTheDocument(); expect(screen.queryByText("How many patients?")).not.toBeInTheDocument(); expect(screen.queryByText("Confirm cohort")).not.toBeInTheDocument(); expect(screen.queryByText("bash")).not.toBeInTheDocument(); expect(screen.queryByText("Let me run another bash search.")).not.toBeInTheDocument(); expect(useSessionStore.getState().transcript).toEqual([ { role: "assistant", text: "Let me run another bash search." }, ]); }); test("uses an explicit default-deny activity-kind allowlist", () => { const predicate = (activityPanelModule as unknown as { isVisibleModelActivity?: (entry: ActivityEntry) => boolean; }).isVisibleModelActivity; expect(predicate).toBeTypeOf("function"); if (!predicate) return; for (const kind of ["thinking", "status"] satisfies ActivityKind[]) { expect(predicate({ kind, phase: "F1", text: kind })).toBe(true); } for (const kind of ["prompt", "gate", "assistant", "tool", "lifecycle"] satisfies ActivityKind[]) { expect(predicate({ kind, phase: "F1", text: kind })).toBe(false); } expect(predicate({ kind: "future-kind" as ActivityKind, phase: "F1", text: "future" })).toBe(false); }); ``` Replace the hidden-only case and update the close/scroll seeds with these exact forms: ```tsx test("shows the empty state when the raw log contains only hidden entries", () => { useSessionStore.setState({ activityLog: [ { kind: "prompt", phase: "F1", text: "How many patients?" }, { kind: "gate", phase: "F1", text: "Confirm cohort" }, { kind: "assistant", phase: "F1", text: "Let me try another command." }, { kind: "tool", phase: "F1", text: "bash", toolCallId: "tool-1", status: "completed" }, { kind: "lifecycle", phase: "F1", text: "Turn end" }, ], }); render(); expect(screen.getByText("No activity yet.")).toBeInTheDocument(); expect(screen.queryAllByRole("article")).toHaveLength(0); }); test("close calls onClose without mutating the activity log", async () => { const onClose = vi.fn(); const activityLog: ActivityEntry[] = [ { kind: "status", phase: "F1", text: "Keep this row" }, ]; useSessionStore.setState({ activityLog }); render(); const expectedLog = useSessionStore.getState().activityLog.map((entry) => ({ ...entry })); await userEvent.click(screen.getByRole("button", { name: /close model activity/i })); expect(onClose).toHaveBeenCalledOnce(); expect(useSessionStore.getState().activityLog).toEqual(expectedLog); }); test("follows appended visible activity while near the bottom", () => { useSessionStore.setState({ activityLog: [{ kind: "thinking", phase: "F1", text: "First" }], }); render(); const viewport = screen.getByTestId("activity-scroll"); setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 300 }); act(() => useSessionStore.getState().applyEvent({ type: "info", text: "Second" })); expect(viewport.scrollTop).toBe(400); expect(viewport).toHaveAttribute("tabindex", "0"); }); test("does not bottom-follow when only a hidden prompt arrives", () => { useSessionStore.setState({ activityLog: [{ kind: "status", phase: "F1", text: "Visible status" }], }); render(); const viewport = screen.getByTestId("activity-scroll"); setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 300 }); act(() => useSessionStore.getState().setLastUserEntry({ kind: "input", text: "Hidden prompt" })); expect(viewport.scrollTop).toBe(300); }); ``` Use this exact manual-scroll case: ```tsx test("preserves manual scroll position when visible activity arrives", () => { useSessionStore.setState({ activityLog: [{ kind: "thinking", phase: "F1", text: "First" }], }); render(); const viewport = screen.getByTestId("activity-scroll"); setScrollGeometry(viewport, { scrollHeight: 400, clientHeight: 100, scrollTop: 100 }); fireEvent.scroll(viewport); act(() => useSessionStore.getState().applyEvent({ type: "info", text: "Second" })); expect(viewport.scrollTop).toBe(100); }); ``` - [ ] **Step 2: Write failing central live-log tests** Replace `CentralStatus.test.tsx` with tests built around the real Zustand store and rendered component: ```tsx import { act, fireEvent, render, screen } from "@testing-library/react"; import { beforeEach } from "vitest"; import { useSessionStore } from "../store/sessionStore"; import { CentralStatus } from "./CentralStatus"; beforeEach(() => useSessionStore.getState().resetSession()); function setScrollGeometry( element: HTMLElement, values: { scrollHeight: number; clientHeight: number; scrollTop: number }, ) { Object.defineProperties(element, { scrollHeight: { configurable: true, value: values.scrollHeight }, clientHeight: { configurable: true, value: values.clientHeight }, scrollTop: { configurable: true, writable: true, value: values.scrollTop }, }); } test("renders only the chronological assistant transcript log while working", () => { useSessionStore.setState({ lastUserEntry: { kind: "input", text: "how many patients?" }, stepMessages: [{ level: "warning", text: "Searching the schema…" }], transcript: [ { role: "assistant", text: "First line\n\nSecond line" }, { role: "assistant", text: "Third line" }, ], }); render(); const log = screen.getByRole("log", { name: "Live model activity" }); expect(log).toHaveTextContent("First line"); expect(log).toHaveTextContent("Second line"); expect(log).toHaveTextContent("Third line"); expect(log).toHaveClass("max-h-28", "overflow-y-auto"); expect(screen.queryByText("how many patients?")).not.toBeInTheDocument(); expect(screen.queryByText("Searching the schema…")).not.toBeInTheDocument(); expect(screen.queryByRole("status")).not.toBeInTheDocument(); expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument(); }); test("wraps live log lines instead of truncating them", () => { useSessionStore.setState({ transcript: [{ role: "assistant", text: "a_very_long_model_activity_line" }], }); render(); expect(screen.getByText("a_very_long_model_activity_line")).toHaveClass( "whitespace-pre-wrap", "break-words", ); expect(screen.getByText("a_very_long_model_activity_line")).not.toHaveClass("truncate"); }); test.each([ { working: false, transcript: [{ role: "assistant" as const, text: "hidden" }] }, { working: true, transcript: [] }, { working: true, transcript: [{ role: "assistant" as const, text: " \n " }] }, ])("renders nothing without active non-blank transcript content", ({ working, transcript }) => { useSessionStore.setState({ transcript }); const { container } = render(); expect(container).toBeEmptyDOMElement(); }); test("bottom-follows appended transcript text only while near the bottom", () => { useSessionStore.setState({ transcript: [{ role: "assistant", text: "First" }] }); render(); const log = screen.getByRole("log", { name: "Live model activity" }); setScrollGeometry(log, { scrollHeight: 400, clientHeight: 100, scrollTop: 300 }); act(() => useSessionStore.getState().applyEvent({ type: "text_delta", text: " second" })); expect(log.scrollTop).toBe(400); }); test("preserves manual live-log scroll position away from the bottom", () => { useSessionStore.setState({ transcript: [{ role: "assistant", text: "First" }] }); render(); const log = screen.getByRole("log", { name: "Live model activity" }); setScrollGeometry(log, { scrollHeight: 400, clientHeight: 100, scrollTop: 100 }); fireEvent.scroll(log); act(() => useSessionStore.getState().applyEvent({ type: "text_delta", text: " second" })); expect(log.scrollTop).toBe(100); }); ``` - [ ] **Step 3: Write failing AppShell integration assertions** In `AppShell.new-session.test.tsx`, import `act`, rename the creation test, and replace its central-body assertions with: ```tsx expect(screen.queryByText("How many patients?", { selector: "p" })).not.toBeInTheDocument(); expect(screen.queryByText("Creating session…")).not.toBeInTheDocument(); expect(screen.queryByText(/\d+s/)).not.toBeInTheDocument(); expect(useSessionStore.getState().activityLog[0]).toEqual({ kind: "prompt", phase: "F1", text: "How many patients?", }); releaseCreate(); await waitFor(() => expect(FakeEventSource.instances).toHaveLength(1)); act(() => FakeEventSource.instances[0].emit({ type: "text_delta", text: "Inspecting cohort" })); expect(await screen.findByRole("log", { name: "Live model activity" })) .toHaveTextContent("Inspecting cohort"); expect(screen.queryByText("Analyzing question…")).not.toBeInTheDocument(); expect(useSessionStore.getState().currentPhase).toBe("F1"); ``` In the close/reopen activity test in `AppShell.session-mgmt.test.tsx`, use this event sequence and panel contract before closing: ```tsx act(() => { const store = useSessionStore.getState(); store.setPhase("F4"); store.setLastUserEntry({ kind: "input", text: "Inspect patient cohort" }); store.applyEvent({ type: "activity_event", activity: { kind: "tool", toolCallId: "tool-1", toolName: "bash", status: "completed" }, }); store.applyEvent({ type: "text_delta", text: "Cohort ready" }); store.applyEvent({ type: "activity_delta", text: "Inspecting **cohort**" }); store.applyEvent({ type: "info", level: "info", text: "Cohort status" }); }); const beforeClose = useSessionStore.getState().activityLog.map((entry) => ({ ...entry })); await userEvent.click(screen.getByRole("button", { name: /model activity/i })); const panel = (await screen.findByRole("heading", { name: /model activity/i })).closest("aside"); expect(panel).not.toBeNull(); expect(within(panel!).getByText("cohort").tagName).toBe("STRONG"); expect(within(panel!).getByText("Cohort status")).toBeInTheDocument(); expect(within(panel!).queryByText("Inspect patient cohort")).not.toBeInTheDocument(); expect(within(panel!).queryByText("bash")).not.toBeInTheDocument(); expect(within(panel!).queryByText("Cohort ready")).not.toBeInTheDocument(); ``` Close and reopen with these exact assertions: ```tsx 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("cohort").tagName).toBe("STRONG"); expect(within(reopened!).getByText("Cohort status")).toBeInTheDocument(); expect(within(reopened!).queryByText("Inspect patient cohort")).not.toBeInTheDocument(); expect(within(reopened!).queryByText("bash")).not.toBeInTheDocument(); expect(within(reopened!).queryByText("Cohort ready")).not.toBeInTheDocument(); expect(useSessionStore.getState().activityLog).toEqual(beforeClose); ``` - [ ] **Step 4: Run the focused tests and verify RED** Run: ```bash cd frontend npx vitest run \ src/shell/ModelActivityPanel.test.tsx \ src/shell/CentralStatus.test.tsx \ src/shell/AppShell.new-session.test.tsx \ src/shell/AppShell.session-mgmt.test.tsx ``` Expected: failures show the old four-kind panel allowlist, prompt/status central rendering, missing live-log semantics/scrolling, and old creation labels. There must be no syntax/setup failure. - [ ] **Step 5: Extract the shared near-bottom predicate** Create `frontend/src/shell/activityScroll.ts`: ```ts export function isNearBottom( el: Pick, threshold = 48, ): boolean { return el.scrollHeight - el.clientHeight - el.scrollTop <= threshold; } ``` Import it from both `ModelActivityPanel.tsx` and `CentralStatus.tsx`. Update `ModelActivityPanel.test.tsx` to import `isNearBottom` from `./activityScroll`. Do not change the 48 px boundary assertions. - [ ] **Step 6: Implement the strict panel allowlist** Replace the visible-kind set in `ModelActivityPanel.tsx` with: ```ts const VISIBLE_MODEL_ACTIVITY_KINDS: ReadonlySet = new Set([ "thinking", "status", ]); ``` Leave `activityLog` ingestion, `visibleActivity`, empty state, visible-tail dependencies, Markdown, warning/error severity text, close behavior, and panel accessibility unchanged. - [ ] **Step 7: Implement the central live log** Replace `CentralStatus.tsx` with: ```tsx import { useLayoutEffect, useRef } from "react"; import { useSessionStore } from "../store/sessionStore"; import { isNearBottom } from "./activityScroll"; function transcriptLines(transcript: Array<{ text: string }>): string[] { return transcript.flatMap(({ text }) => text .split("\n") .map((line) => line.trimEnd()) .filter((line) => line.trim() !== ""), ); } /** Compact central projection of the assistant stream while the model is working. */ export function CentralStatus({ working }: { working: boolean }) { const transcript = useSessionStore((state) => state.transcript); const rows = transcriptLines(transcript); const rowCount = rows.length; const tail = rows.at(-1); const scrollRef = useRef(null); const followRef = useRef(true); useLayoutEffect(() => { const viewport = scrollRef.current; if (viewport && followRef.current) viewport.scrollTop = viewport.scrollHeight; }, [rowCount, tail]); if (!working || rows.length === 0) return null; return (
    { followRef.current = isNearBottom(event.currentTarget); }} > {rows.map((line, index) => { const isLast = index === rows.length - 1; return (
  1. › {line}
    2. ); })}
); } ``` In `AppShell.tsx`, call only: ```tsx ``` Remove the stale `workingLabel` prop and update comments that still describe a spinner/timer. - [ ] **Step 8: Run focused and adjacent tests GREEN** Run: ```bash cd frontend npx vitest run \ src/shell/ModelActivityPanel.test.tsx \ src/shell/CentralStatus.test.tsx \ src/shell/AppShell.new-session.test.tsx \ src/shell/AppShell.session-mgmt.test.tsx \ src/store/sessionStore.test.ts \ src/stream/useSessionStream.test.tsx npx tsc -b ``` Expected: every focused/adjacent test passes, the raw store-fold tests remain unchanged, and TypeScript exits 0. Existing MSW/React warnings may remain; no new warning is acceptable. - [ ] **Step 9: Review and commit Task 1** Run: ```bash git diff --check git status --short git diff -- frontend/src/shell/activityScroll.ts \ frontend/src/shell/ModelActivityPanel.tsx \ frontend/src/shell/ModelActivityPanel.test.tsx \ frontend/src/shell/CentralStatus.tsx \ frontend/src/shell/CentralStatus.test.tsx \ frontend/src/shell/AppShell.tsx \ frontend/src/shell/AppShell.new-session.test.tsx \ frontend/src/shell/AppShell.session-mgmt.test.tsx git add frontend/src/shell/activityScroll.ts \ frontend/src/shell/ModelActivityPanel.tsx \ frontend/src/shell/ModelActivityPanel.test.tsx \ frontend/src/shell/CentralStatus.tsx \ frontend/src/shell/CentralStatus.test.tsx \ frontend/src/shell/AppShell.tsx \ frontend/src/shell/AppShell.new-session.test.tsx \ frontend/src/shell/AppShell.session-mgmt.test.tsx git commit -m "fix(frontend): deduplicate live workflow activity" ``` Expected: only the listed frontend files enter the Task 1 commit; `.vite/` remains untracked. --- ### Task 2: Compact vertical spacing for F6 CTE cards **Files:** - Modify: `frontend/src/viewers/CtePlanViewer.tsx:14-166` - Test: `frontend/src/viewers/CtePlanViewer.test.tsx:71-166` **Interfaces:** - Consumes: unchanged `CtePlanV2`, `CtePlanCte`, `CtePlanFilter`, shared `Card`, `CardHeader`, and `CardContent`. - Produces: the same `CtePlanViewer({ plan })` DOM/semantic contract with exact compact spacing utilities. - [ ] **Step 1: Write failing exact-spacing tests** Replace the padding test in `CtePlanViewer.test.tsx` with: ```tsx test("uses compact vertical and responsive lateral CTE card padding", () => { const { container } = render(); for (const header of container.querySelectorAll('[data-slot="card-header"]')) { expect(header).toHaveClass("px-3", "py-2", "sm:px-4", "[&.border-b]:pb-2"); expect(header).not.toHaveClass("p-4", "sm:p-5", "sm:[&.border-b]:pb-5"); } for (const content of container.querySelectorAll('[data-slot="card-content"]')) { expect(content).toHaveClass("px-3", "py-2", "sm:px-4"); expect(content).not.toHaveClass("p-4", "sm:p-5"); } for (const card of container.querySelectorAll('[data-slot="card"]')) { expect(card).toHaveClass("shadow-none"); } }); ``` Update the filter-row test to require `px-3 py-2 sm:px-4` and reject `p-3 sm:p-4`. Add: ```tsx test("uses the same compact padding for table rows and rationale dividers", () => { render(); const card = getCteCard("pazienti_idonei"); const tableName = within(card).getByText("pazienti"); expect(tableName.parentElement).toHaveClass("px-3", "py-2", "sm:px-4"); expect(tableName.parentElement).not.toHaveClass("p-3", "sm:p-4"); const filterRationale = within(card).getByText("Solo pazienti in follow-up").parentElement; expect(filterRationale).toHaveClass("pt-2"); expect(filterRationale).not.toHaveClass("pt-3"); const cteRationale = within(card) .getByText("Base della catena: riduce il volume prima dei join") .closest("section"); expect(cteRationale).toHaveClass("border-t", "pt-2"); expect(cteRationale).not.toHaveClass("pt-4"); }); ``` - [ ] **Step 2: Run the CTE viewer test and verify RED** Run: ```bash cd frontend npx vitest run src/viewers/CtePlanViewer.test.tsx ``` Expected: exact class assertions fail against the current 16/20 px padding and `pt-3`/`pt-4` dividers. - [ ] **Step 3: Implement compact spacing without changing structure** Apply these exact replacements in `CtePlanViewer.tsx`: ```tsx // Filter row className="min-w-0 space-y-3 px-3 py-2 sm:px-4" // Filter description/rationale divider className="grid min-w-0 gap-x-4 gap-y-2 border-t border-border/50 pt-2 md:grid-cols-[5.5rem_minmax(0,1fr)]" // CTE header // CTE content // Table row className="grid min-w-0 gap-1 px-3 py-2 sm:px-4 md:grid-cols-[minmax(10rem,0.8fr)_minmax(0,1.2fr)] md:gap-4" // CTE rationale
``` Do not change any `gap-*` outside these snippets, grid templates, content, labels, typography, wrapping, roles, or semantic elements. - [ ] **Step 4: Run CTE tests, TypeScript, and Impeccable layout scan GREEN** Run: ```bash cd frontend npx vitest run src/viewers/CtePlanViewer.test.tsx src/viewers/ArtifactView.test.tsx npx tsc -b node /home/admlocforn1/.codex/skills/impeccable/scripts/detect.mjs \ --json --scope layout src/viewers/CtePlanViewer.tsx ``` Expected: tests and TypeScript pass; detector output is exactly `[]`. Long identifier/wrapping tests remain green. - [ ] **Step 5: Review and commit Task 2** Run: ```bash git diff --check git diff -- frontend/src/viewers/CtePlanViewer.tsx frontend/src/viewers/CtePlanViewer.test.tsx git add frontend/src/viewers/CtePlanViewer.tsx frontend/src/viewers/CtePlanViewer.test.tsx git commit -m "style(frontend): compact CTE plan spacing" ``` Expected: the commit contains only the viewer and its test; shared `card.tsx` is untouched. --- ### Task 3: Full verification, frontend-only deployment, and durable state **Files:** - Modify: `brain/codebase/workflow-ui-contracts.md:26-30` - Modify: `PROJECT_STATE.md` **Interfaces:** - Consumes: Task 1 central/panel projections, Task 2 compact CTE classes, the existing root Compose frontend service, and the running portal manifest cache. - Produces: a running frontend image/entry with unchanged core runtime plus durable documentation of the new UI contracts and observed verification evidence. - [ ] **Step 1: Run the complete source verification gate** Run: ```bash cd frontend npx vitest run npx tsc -b npm run build node /home/admlocforn1/.codex/skills/impeccable/scripts/detect.mjs --json --scope layout \ src/shell/CentralStatus.tsx src/shell/ModelActivityPanel.tsx src/viewers/CtePlanViewer.tsx cd .. git diff --check git status --short --untracked-files=all ``` Expected: all frontend tests pass, TypeScript/build exit 0, detector output is `[]`, only the two planned documentation files remain uncommitted after Tasks 1-2, and `.vite/` is still untracked. Record the exact passing test/file counts for `PROJECT_STATE.md`. - [ ] **Step 2: Record live runtime state without mutating the active session** Run: ```bash docker inspect -f '{{.Name}}|{{.State.Status}}|{{if .State.Health}}{{.State.Health.Status}}{{else}}no-healthcheck{{end}}|{{.Image}}|{{.State.StartedAt}}' \ thothii-core-1 thothii-frontend-1 omics_portal-web-1 docker exec thothii-frontend-1 sh -lc \ "rg -n -B 3 '\"isEntry\": true' /usr/share/nginx/html/.vite/manifest.json 2>/dev/null || grep -n -B 3 '\"isEntry\": true' /usr/share/nginx/html/.vite/manifest.json" docker top thothii-core-1 -eo pid,ppid,etime,args ``` Expected: record current core/frontend/portal image and start timestamps, current Vite entry, and whether an unrelated Pi process is active. Do not stop it, close its session, alter settings, or run a model smoke. - [ ] **Step 3: Build and recreate only frontend** From an isolated worktree, make the existing ignored deployment environment available without reading or copying it, then run from the repository root: ```bash if [ ! -e deploy/thothii.env ]; then ln -s /home/chirone/ThothII/deploy/thothii.env deploy/thothii.env fi test -e deploy/thothii.env docker compose build frontend docker compose up -d --no-deps --force-recreate --wait --wait-timeout 60 frontend docker inspect -f '{{.Name}}|{{.State.Status}}|{{.Image}}|{{.State.StartedAt}}' thothii-frontend-1 docker exec thothii-frontend-1 sh -lc \ "rg -n -B 3 '\"isEntry\": true' /usr/share/nginx/html/.vite/manifest.json 2>/dev/null || grep -n -B 3 '\"isEntry\": true' /usr/share/nginx/html/.vite/manifest.json" ``` Expected: build and frontend-only recreate exit 0, frontend is running on the new image, and the new entry is recorded. Compare it with Step 2. If the entry differs, run exactly: ```bash docker restart omics_portal-web-1 docker inspect -f '{{.Name}}|{{.State.Status}}|{{.State.StartedAt}}' omics_portal-web-1 ``` If the entry is identical, do not restart the portal. In both branches, do not recreate/restart core or unrelated portal services. - [ ] **Step 4: Verify post-deploy isolation and logs** Run: ```bash docker inspect -f '{{.Name}}|{{.State.Status}}|{{if .State.Health}}{{.State.Health.Status}}{{else}}no-healthcheck{{end}}|{{.Image}}|{{.State.StartedAt}}' \ thothii-core-1 thothii-frontend-1 omics_portal-web-1 docker top thothii-core-1 -eo pid,ppid,etime,args frontend_log_patterns=$(docker logs --since 10m --tail 200 thothii-frontend-1 2>&1 | \ rg -i -c 'fatal|emerg|panic|authorization:|api[_-]?key|password|secret' || true) printf 'frontend_log_patterns=%s\n' "${frontend_log_patterns:-0}" ``` Expected: core is healthy with exactly its Step 2 image/start timestamp, frontend and portal are running, an active unrelated Pi remains untouched if it existed, and the count-only frontend log scan reports 0. Do not print settings, session questions, raw logs, or secret values. - [ ] **Step 5: Update durable UI contracts and project state** Replace the activity paragraph in `brain/codebase/workflow-ui-contracts.md` with this exact text: ```markdown - `activityLog` remains the complete in-memory chronological fold of prompt, thinking, assistant, sanitized tool lifecycle, reviewer gates, status, and turn lifecycle. The left Model activity panel is a strict projection of only thinking and status; prompt, gate, assistant, tool, lifecycle, and unknown future kinds are hidden. While the model is working, the central body projects every non-blank assistant transcript line into one bounded, accessible scrolling log; user-entry echoes, timer/spinner labels, and step messages are not rendered there. Reviewer widgets, artifacts, store folds, and workflow state continue to consume their existing events. - F6 CTE cards keep their existing semantic structure and responsive grids while using 8 px vertical padding, 12 px lateral padding below `sm`, and 16 px lateral padding from `sm` upward for headers, content, table rows, and filter rows. Divider top padding is 8 px. ``` Add a dated resolved-state section to `PROJECT_STATE.md` that states, in prose, all observed values from Steps 1-4: source HEAD, exact frontend test count, TypeScript/build/detector results, new frontend image ID, old/new Vite entry, whether portal restart occurred, unchanged core image/start timestamp, final container state, and preservation of any unrelated Pi process. Do not claim a live model smoke because this task intentionally performs no settings/session mutation. - [ ] **Step 6: Review documentation scope and commit evidence** Run: ```bash git diff --check git status --short --untracked-files=all git diff -- brain/codebase/workflow-ui-contracts.md PROJECT_STATE.md git add brain/codebase/workflow-ui-contracts.md PROJECT_STATE.md git diff --cached --check git commit -m "docs: record central live log deployment" ``` Expected: only the two documentation files enter the commit; `.vite/` remains untracked and no runtime/config/session file is staged. --- ## Final review gate Before integration, request an independent review of the complete implementation range. The review must verify: - central body contains only the assistant transcript log plus unchanged `AppShell` widgets and artifacts; - last-user echo, timer/spinner/label, and `stepMessages` are absent from `CentralStatus`; - the live log contains all chronological non-blank transcript lines, wraps, uses log semantics, follows near-bottom updates, and preserves manual scroll; - left panel allowlists only thinking/status at its rendering boundary and preserves the complete raw store fold; - prompt/gate/assistant/tool/lifecycle/unknown updates cannot render or move panel scroll; - compact CTE classes exactly match the 8 px vertical and 12/16 px lateral contract, including the `CardHeader` bottom-padding override; - frontend tests/typecheck/build/detector are green; `.vite/`, backend, SSE, store, workflow, core, settings, sessions, and unrelated Pi runtime remain outside the change; - deployment evidence matches the live frontend/core/portal containers. Fix every Critical or Important finding before declaring the work complete.