docs: plan central live log and compact CTE plan
This commit is contained in:
User
@@ -0,0 +1,790 @@
|
||||
# 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(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
|
||||
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(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
|
||||
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(<ModelActivityPanel onClose={onClose} />);
|
||||
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(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
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(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
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(<ModelActivityPanel onClose={vi.fn()} />);
|
||||
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(<CentralStatus working />);
|
||||
|
||||
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(<CentralStatus working />);
|
||||
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(<CentralStatus working={working} />);
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
test("bottom-follows appended transcript text only while near the bottom", () => {
|
||||
useSessionStore.setState({ transcript: [{ role: "assistant", text: "First" }] });
|
||||
render(<CentralStatus working />);
|
||||
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(<CentralStatus working />);
|
||||
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<HTMLElement, "scrollHeight" | "clientHeight" | "scrollTop">,
|
||||
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<ActivityKind> = 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<HTMLOListElement>(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 (
|
||||
<ol
|
||||
ref={scrollRef}
|
||||
role="log"
|
||||
aria-label="Live model activity"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions text"
|
||||
tabIndex={0}
|
||||
className="max-h-28 overflow-y-auto rounded-lg border border-border/60 bg-muted/40 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);
|
||||
}}
|
||||
>
|
||||
{rows.map((line, index) => {
|
||||
const isLast = index === rows.length - 1;
|
||||
return (
|
||||
<li
|
||||
key={`${index}-${line}`}
|
||||
className={[
|
||||
"flex items-baseline gap-2 font-mono text-[0.72rem] leading-relaxed",
|
||||
isLast ? "text-foreground/80" : "text-muted-foreground/55",
|
||||
].join(" ")}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className={isLast ? "shrink-0 select-none text-primary" : "shrink-0 select-none text-muted-foreground/35"}
|
||||
>
|
||||
›
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 whitespace-pre-wrap break-words">{line}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In `AppShell.tsx`, call only:
|
||||
|
||||
```tsx
|
||||
<CentralStatus working={working} />
|
||||
```
|
||||
|
||||
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(<CtePlanViewer plan={plan} />);
|
||||
|
||||
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(<CtePlanViewer plan={plan} />);
|
||||
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
|
||||
<CardHeader className="gap-3 rounded-t-lg border-b border-border/60 bg-muted/15 px-3 py-2 sm:px-4 [&.border-b]:pb-2">
|
||||
|
||||
// CTE content
|
||||
<CardContent className="flex min-w-0 flex-col gap-5 px-3 py-2 sm:px-4">
|
||||
|
||||
// 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
|
||||
<section className="min-w-0 border-t border-border/60 pt-2">
|
||||
```
|
||||
|
||||
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
|
||||
docker logs --since 10m --tail 200 thothii-frontend-1 2>&1 | \
|
||||
rg -i -c 'fatal|emerg|panic|authorization:|api[_-]?key|password|secret' || true
|
||||
```
|
||||
|
||||
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.
|
||||
Reference in New Issue
Block a user