feat(frontend): phase progress dots (B) + compact sidebar redesign (C)

B — WorkflowBar renders F1..F8 as colored ring-dots (no phase-name text):
green=done, amber=running (subtle pulse), red=error, gray=pending; green
connectors lead the active dot, each dot carries data-state. Lightweight
error signal: sessionStore gains `phaseError`, set when an info event has
level=error during the active phase, cleared on the next ui_request.

C — denser single-line session rows (inline status dot + name, py-1), a
3-level type hierarchy (L1 SESSIONS / L2 section+group headers / L3 names),
and the "No group" label removed (ungrouped render after the last group,
guarded so the empty-state still teaches when there are zero groups).

Live-verified with Playwright (all four dot states, sidebar hierarchy, and
E's deferred activity-panel check). Frontend 93/93, tsc -b clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

PROJECT_STATE.md

@@ -81,7 +81,8 @@ Opens frontend at http://localhost:5173 → backend :8787.
 ## UI/UX redesign + Resume — IN PROGRESS (2026-06-30, evening)
 
 Approved multi-workstream plan: **`~/.claude/plans/foamy-forging-dahl.md`** (read it to resume).
-Memory: `thothii-ui-redesign-inprogress.md`. **D + E are merged to `main` @ `0eeb3f7` and pushed.**
+Memory: `thothii-ui-redesign-inprogress.md`. **D + E merged @ `0eeb3f7` (pushed); B + C
+implemented + live-verified (not yet committed as of this update).**
 
 - **D — DONE** (`c12bdcd`): session display `name` = 3-5 Italian keywords via **YAKE** (no LLM),
   derived in `tht session new` (CLI layer); `create_session` core unchanged (`name=None` default).
@@ -89,20 +90,28 @@ Memory: `thothii-ui-redesign-inprogress.md`. **D + E are merged to `main` @ `0ee
 - **E — DONE** (`0eeb3f7`): rotating activity icon replaces the red dot in `CentralStatus`
   (inline, clickable → opens the panel); `ModelActivityPanel` is a **5-line expandable
   model-stream tail**; `WorkingSpinner` extracted to its own module; the separate spinner button
-  + orphaned `Transcript.tsx` removed. Frontend 87/87, tsc clean. **Live visual check PENDING**
+  + orphaned `Transcript.tsx` removed. Frontend 87/87, tsc clean. **Live visual check DONE
-  (needs a *working* session — do it in the B/C pass).
+  (2026-06-30):** inline spinner opens the panel; 5-line collapsed tail; expand → full transcript.
-- **B (pending):** `WorkflowBar` → colored **dots** F1..F8, no text (amber-translucent=running,
+- **B — DONE** (uncommitted): `WorkflowBar` is now colored **dots** F1..F8, no phase-name text
-  green=done, red=error, gray=pending); error is lightweight (store `phaseError` set on an `info`
+  (amber-translucent=running, green=done, red=error, gray=pending; green connectors lead the active
-  `level=error` during the phase, cleared on the next `ui_request`).
+  dot). Each dot carries `data-state`. Error is lightweight: store `phaseError` set when an `info`
-- **C (pending):** right sidebar — tighter rows, 3-level type hierarchy via **`/impeccable`**,
+  `level=error` arrives during the phase, cleared on the next `ui_request` (`sessionStore.ts`).
-  remove the "No group" label (ungrouped after the last group accordion); add **Resume** to `SessionMenu`.
+  **All four states live-verified** via Playwright.
+- **C — DONE** (uncommitted): right sidebar — single-line denser rows (inline status dot + name,
+  `py-1`), a 3-level type hierarchy via **`/impeccable`** (L1 `SESSIONS` red/bold/wide-tracking ·
+  L2 section + group headers muted uppercase · L3 names normal-case), and the **"No group" label
+  removed** (ungrouped sessions render after the last group; guarded so the empty-state still
+  teaches when there are no groups). **Live-verified.** (Resume in `SessionMenu` stays with A1.)
+- **Tests:** frontend **93/93** (was 87; +3 store `phaseError`, +2 `WorkflowBar` dot-state, +1
+  AppShell no-"No group"), `tsc -b` clean.
 - **F (pending):** single-select answers **auto-confirm** — `reviewer_select` persists the
   decision directly on a concrete choice (no redundant `reviewer_decide` gate); contract change
   (update its tool desc + `SKILL.md` + the `CLAUDE.md` note). back/exit/Other stay non-persisting.
 - **A (pending, riskiest):** Resume command + **FIX the resume cold-start stall** (open item #1).
 - **G (later):** cross-model behavior matrix (Qwen3.6 / GLM 5.2 / Deepseek V4 / others).
 
-**Next chunk:** the **B/C visual pass** (`/impeccable` + a live verification, incl. E's deferred check).
+**Next chunk:** **F** (single-select auto-confirm — harness gate/SKILL contract change), then **A**
+(Resume in the kebab + the resume cold-start stall fix, diagnosis-first). **G** (cross-model) later.
 
 ## Live verification + reviewer_select fix (2026-06-30, afternoon)
 

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

@@ -36,6 +36,19 @@ test("active list shows group header and hides archived sessions", async () => {
   expect(screen.queryByText("Archiviata due")).not.toBeInTheDocument(); // archived hidden
 });
 
+test("ungrouped sessions render after groups with no 'No group' label", async () => {
+  server.use(
+    http.get("http://localhost:8787/sessions", () => HttpResponse.json([
+      { id: "g1", status: "open", question: "In gruppo", summary: null, created_at: "2026-01-02T00:00:00Z", updated_at: null, author: null, name: null, group: "Aritmologia", archived: false },
+      { id: "u1", status: "open", question: "Senza gruppo", summary: null, created_at: "2026-01-03T00:00:00Z", updated_at: null, author: null, name: null, group: null, archived: false },
+    ])),
+  );
+  wrap();
+  expect(await screen.findByText("In gruppo")).toBeInTheDocument(); // grouped
+  expect(screen.getByText("Senza gruppo")).toBeInTheDocument(); // ungrouped, still listed
+  expect(screen.queryByText(/no group/i)).not.toBeInTheDocument();
+});
+
 test("opening the panel shows the session documents", async () => {
   wrap();
   await userEvent.click(await screen.findByText("Attiva uno"));

frontend/src/shell/AppShell.tsx

@@ -50,6 +50,7 @@ export function AppShell() {
     [sessions],
   );
   const activeList = sessions.filter((s) => !s.archived);
+  const ungroupedActive = activeList.filter((s) => !s.group);
   const archivedList = sessions.filter((s) => s.archived);
   const refresh = () => queryClient.invalidateQueries({ queryKey: ["sessions"] });
 
@@ -227,17 +228,19 @@ export function AppShell() {
           </Button>
         </div>
 
+        {/* L1 — rail title */}
         <div className="px-4 pb-1.5 pt-1">
-          <span className="text-[0.7rem] font-bold uppercase tracking-[0.12em] text-primary">
+          <span className="text-[0.82rem] font-bold uppercase tracking-[0.18em] text-primary">
             Sessions
           </span>
         </div>
         <div className="flex-1 overflow-y-auto px-2 pb-4">
+          {/* L2 — section toggle */}
           <button
             type="button"
             onClick={() => setActiveOpen((v) => !v)}
             aria-expanded={activeOpen}
-            className="flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-bold uppercase tracking-wide text-primary hover:text-primary/80"
+            className="flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-semibold uppercase tracking-[0.1em] text-foreground/65 hover:text-foreground"
           >
             <span className="select-none">{activeOpen ? "▾" : "▸"}</span>
             <span>Active sessions</span>
@@ -247,11 +250,12 @@ export function AppShell() {
               {groups.map((g) => (
                 <div key={g}>
                   <div className="group/gh flex items-center gap-1">
+                    {/* L2 — group header (sub-level of the section) */}
                     <button
                       type="button"
                       onClick={() => setCollapsedGroups((c) => ({ ...c, [g]: !c[g] }))}
                       aria-expanded={!collapsedGroups[g]}
-                      className="flex min-w-0 flex-1 items-center gap-1 px-1 pb-1 text-left text-[0.7rem] font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground"
+                      className="flex min-w-0 flex-1 items-center gap-1 px-1 pb-1 text-left text-[0.66rem] font-semibold uppercase tracking-[0.06em] text-muted-foreground hover:text-foreground"
                     >
                       <span className="select-none">{collapsedGroups[g] ? "▸" : "▾"}</span>
                       <span className="truncate">{g}</span>
@@ -275,25 +279,26 @@ export function AppShell() {
                   )}
                 </div>
               ))}
-              <div>
+              {/* Ungrouped sessions list directly after the groups — no "No group" label.
-                {groups.length > 0 && (
+                  When there are no groups at all, still render it so its empty state can
-                  <p className="px-1 pb-1 text-[0.7rem] font-semibold uppercase tracking-wide text-muted-foreground">No group</p>
+                  teach first-time users. */}
-                )}
+              {(ungroupedActive.length > 0 || groups.length === 0) && (
                 <NavSessions
-                  sessions={activeList.filter((s) => !s.group)}
+                  sessions={ungroupedActive}
                   activeSessionId={activeSessionId}
                   onOpenPanel={openPanel}
                   menuFor={menuFor}
                 />
-              </div>
+              )}
             </div>
           )}
 
+          {/* L2 — section toggle */}
           <button
             type="button"
             onClick={() => setArchiveOpen((v) => !v)}
             aria-expanded={archiveOpen}
-            className="mt-2 flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-bold uppercase tracking-wide text-muted-foreground hover:text-foreground"
+            className="mt-2 flex w-full items-center gap-1 px-1 pb-1 pt-1 text-left text-[0.7rem] font-semibold uppercase tracking-[0.1em] text-foreground/65 hover:text-foreground"
           >
             <span className="select-none">{archiveOpen ? "▾" : "▸"}</span>
             <span>Archive ({archivedList.length})</span>

frontend/src/shell/NavSessions.tsx

@@ -18,9 +18,10 @@ export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }:
     );
   }
   return (
-    <ul className="flex flex-col gap-0.5">
+    <ul className="flex flex-col gap-px">
       {sessions.map((s) => {
         const active = s.id === activeSessionId;
+        const label = s.name || s.question || s.id;
         return (
           <li key={s.id}>
             <div
@@ -29,7 +30,8 @@ export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }:
               onClick={() => onOpenPanel(s.id)}
               role="button"
               tabIndex={0}
-              aria-label={s.name || s.question || s.id}
+              aria-label={label}
+              title={`${label} · ${s.status}`}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
@@ -37,33 +39,30 @@ export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }:
                 }
               }}
               className={[
-                "group flex w-full cursor-pointer items-start gap-1 rounded-lg px-2.5 py-2 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                "group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
                 active ? "bg-[oklch(var(--primary)/0.12)]" : "hover:bg-accent",
               ].join(" ")}
             >
-              <div className="min-w-0 flex-1">
+              <span
-                <span
+                aria-hidden
-                  className={[
+                title={s.status}
-                    "block truncate text-[0.8rem] leading-snug",
+                className={[
-                    active ? "font-bold text-primary" : "text-foreground/90",
+                  "size-1.5 shrink-0 rounded-full",
-                  ].join(" ")}
+                  s.status === "open"
-                >
+                    ? "bg-[oklch(var(--success))]"
-                  {s.name || s.question || s.id}
+                    : s.status === "finalized"
-                </span>
+                      ? "bg-primary"
-                <span className="mt-1 flex items-center gap-1.5">
+                      : "bg-muted-foreground/50",
-                  <span
+                ].join(" ")}
-                    className={[
+              />
-                      "size-1.5 rounded-full",
+              <span
-                      s.status === "open"
+                className={[
-                        ? "bg-[oklch(var(--success))]"
+                  "min-w-0 flex-1 truncate text-[0.8rem] leading-snug",
-                        : s.status === "finalized"
+                  active ? "font-semibold text-primary" : "font-medium text-foreground/90",
-                          ? "bg-primary"
+                ].join(" ")}
-                          : "bg-muted-foreground/50",
+              >
-                    ].join(" ")}
+                {label}
-                  />
+              </span>
-                  <span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground">{s.status}</span>
-                </span>
-              </div>
               {menuFor(s)}
             </div>
           </li>

frontend/src/shell/WorkflowBar.test.tsx

@@ -20,3 +20,19 @@ test("no phase highlighted when currentPhase is null", () => {
     expect(screen.getByTestId(`phase-${id}`)).toHaveAttribute("data-active", "false");
   }
 });
+
+test("dots carry done / running / pending states around the active phase", () => {
+  useSessionStore.getState().setPhase("F3");
+  render(<WorkflowBar />);
+  expect(screen.getByTestId("phase-F1")).toHaveAttribute("data-state", "done");
+  expect(screen.getByTestId("phase-F3")).toHaveAttribute("data-state", "running");
+  expect(screen.getByTestId("phase-F5")).toHaveAttribute("data-state", "pending");
+});
+
+test("the active dot turns to the error state when phaseError flags it", () => {
+  const st = useSessionStore.getState();
+  st.applyEvent({ type: "ui_request", ui_request: { id: "u", widget: "select", phase: "F3_x" } });
+  st.applyEvent({ type: "info", level: "error", text: "boom" });
+  render(<WorkflowBar />);
+  expect(screen.getByTestId("phase-F3")).toHaveAttribute("data-state", "error");
+});

frontend/src/shell/WorkflowBar.tsx

@@ -12,8 +12,21 @@ const PHASES = [
   { id: "F8", name: "Results" },
 ];
 
+type DotState = "done" | "running" | "error" | "pending";
+
+// Each state is a tinted chip; red is reserved strictly for error (the GSD theme's
+// primary is already red), green = done, amber = the live phase, neutral = pending.
+const DOT: Record<DotState, string> = {
+  done: "bg-[oklch(var(--success)/0.16)] text-[oklch(0.5_0.13_165)] ring-[oklch(var(--success)/0.32)]",
+  running:
+    "bg-[oklch(var(--warning)/0.24)] text-[oklch(0.46_0.11_79)] ring-[oklch(var(--warning)/0.6)]",
+  error: "bg-destructive/15 text-destructive ring-destructive/45",
+  pending: "bg-transparent text-muted-foreground/70 ring-border",
+};
+
 export function WorkflowBar() {
   const currentPhase = useSessionStore((s) => s.currentPhase);
+  const phaseError = useSessionStore((s) => s.phaseError);
   const activeIdx = PHASES.findIndex((p) => p.id === currentPhase);
 
   return (
@@ -24,43 +37,48 @@ export function WorkflowBar() {
       {PHASES.map((p, i) => {
         const isActive = currentPhase === p.id;
         const isDone = activeIdx > -1 && i < activeIdx;
+        const state: DotState = isActive
+          ? phaseError === p.id
+            ? "error"
+            : "running"
+          : isDone
+            ? "done"
+            : "pending";
+        const connectorDone = activeIdx > -1 && i <= activeIdx;
         return (
           <div key={p.id} className="flex items-center">
             {i > 0 && (
               <span
                 aria-hidden
                 className={[
-                  "mx-1.5 h-px w-4 shrink-0",
+                  "mx-1 h-px w-3 shrink-0 sm:w-4",
-                  isDone || isActive ? "bg-primary/40" : "bg-border",
+                  connectorDone ? "bg-[oklch(var(--success)/0.4)]" : "bg-border",
                 ].join(" ")}
               />
             )}
-            <span
+            <span className="relative inline-flex shrink-0">
-              data-testid={`phase-${p.id}`}
+              {state === "running" && (
-              data-active={isActive ? "true" : "false"}
+                <span
-              title={`${p.id}: ${p.name}`}
+                  aria-hidden
-              className={[
+                  className="absolute -inset-[3px] animate-pulse rounded-full bg-[oklch(var(--warning)/0.22)]"
-                "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1 text-xs transition-colors",
+                />
-                isActive
+              )}
-                  ? "bg-primary text-primary-foreground font-semibold shadow-sm shadow-primary/20"
-                  : isDone
-                    ? "text-foreground/70 font-medium"
-                    : "text-muted-foreground",
-              ].join(" ")}
-            >
               <span
+                data-testid={`phase-${p.id}`}
+                data-active={isActive ? "true" : "false"}
+                data-state={state}
+                title={`${p.id}: ${p.name}`}
+                aria-label={`${p.id} ${p.name} — ${state}`}
+                aria-current={isActive ? "step" : undefined}
                 className={[
-                  "font-heading text-[0.7rem] font-semibold",
+                  "relative inline-flex size-6 items-center justify-center rounded-full",
-                  isActive
+                  "text-[0.625rem] font-semibold leading-none tracking-tight tabular-nums",
-                    ? "text-primary-foreground"
+                  "ring-1 ring-inset transition-colors",
-                    : isDone
+                  DOT[state],
-                      ? "text-primary/80"
-                      : "text-muted-foreground/70",
                 ].join(" ")}
               >
                 {p.id}
               </span>
-              <span className={isActive ? "inline" : "hidden md:inline"}>{p.name}</span>
             </span>
           </div>
         );

frontend/src/store/sessionStore.test.ts

@@ -54,6 +54,30 @@ test("info events accumulate in stepMessages", () => {
   ]);
 });
 
+test("an error-level info event flags the current phase", () => {
+  const st = useSessionStore.getState();
+  st.applyEvent({ type: "ui_request", ui_request: { id: "u", widget: "select", phase: "F4_schema_linking" } });
+  st.applyEvent({ type: "info", level: "error", text: "boom" });
+  expect(useSessionStore.getState().phaseError).toBe("F4");
+  // the message still lands in stepMessages
+  expect(useSessionStore.getState().stepMessages.at(-1)).toEqual({ level: "error", text: "boom" });
+});
+
+test("a non-error info event does not set phaseError", () => {
+  const st = useSessionStore.getState();
+  st.applyEvent({ type: "ui_request", ui_request: { id: "u", widget: "select", phase: "F4_x" } });
+  st.applyEvent({ type: "info", level: "warning", text: "w" });
+  expect(useSessionStore.getState().phaseError).toBeNull();
+});
+
+test("the next ui_request clears phaseError", () => {
+  const st = useSessionStore.getState();
+  st.applyEvent({ type: "ui_request", ui_request: { id: "u", widget: "select", phase: "F4_x" } });
+  st.applyEvent({ type: "info", level: "error", text: "boom" });
+  st.applyEvent({ type: "ui_request", ui_request: { id: "u2", widget: "select", phase: "F5_x" } });
+  expect(useSessionStore.getState().phaseError).toBeNull();
+});
+
 test("setLastUserEntry records the entry and clears stepMessages", () => {
   const st = useSessionStore.getState();
   st.applyEvent({ type: "info", level: "info", text: "x" });

frontend/src/store/sessionStore.ts

@@ -14,6 +14,7 @@ interface SessionState {
   lastUserEntry: { kind: "input" | "choice"; text: string } | null;
   lastSystemEvent: StreamEvent | null;
   currentPhase: string | null;
+  phaseError: string | null;
   applyEvent: (e: StreamEvent) => void;
   clearPending: () => void;
   resetSession: () => void;
@@ -30,6 +31,7 @@ const empty = {
   lastUserEntry: null as { kind: "input" | "choice"; text: string } | null,
   lastSystemEvent: null,
   currentPhase: null as string | null,
+  phaseError: null as string | null,
 };
 
 export const useSessionStore = create<SessionState>((set) => ({
@@ -42,6 +44,8 @@ export const useSessionStore = create<SessionState>((set) => ({
           currentPhase: e.ui_request.phase
             ? e.ui_request.phase.split("_")[0]
             : st.currentPhase,
+          // A new gate means the phase moved on (or re-presented): clear any error flag.
+          phaseError: null,
         };
       if (e.type === "text_delta") {
         const t = [...st.transcript];
@@ -50,7 +54,11 @@ export const useSessionStore = create<SessionState>((set) => ({
         else t.push({ role: "assistant", text: e.text });
         return { transcript: t };
       }
-      if (e.type === "info") return { stepMessages: [...st.stepMessages, { level: e.level ?? "info", text: e.text }] };
+      if (e.type === "info") {
+        const stepMessages = [...st.stepMessages, { level: e.level ?? "info", text: e.text }];
+        // An error during the active phase marks that phase red until the next gate.
+        return e.level === "error" ? { stepMessages, phaseError: st.currentPhase } : { stepMessages };
+      }
       if (e.type === "system_event") return { lastSystemEvent: e };
       return {};
     }),