mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source 
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>
This commit is contained in:
marcopan
2026-06-30 17:53:29 +02:00
co-authored by Claude Opus 4.8
parent 2e09c88f78
commit b056ff334f
8 changed files with 160 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shell/NavSessions.tsx
+25 -26
View File
@@ -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
className={[
"block truncate text-[0.8rem] leading-snug",
active ? "font-bold text-primary" : "text-foreground/90",
].join(" ")}
>
{s.name || s.question || s.id}
</span>
<span className="mt-1 flex items-center gap-1.5">
<span
className={[
"size-1.5 rounded-full",
s.status === "open"
? "bg-[oklch(var(--success))]"
: s.status === "finalized"
? "bg-primary"
: "bg-muted-foreground/50",
].join(" ")}
/>
<span className="text-[0.65rem] uppercase tracking-wide text-muted-foreground">{s.status}</span>
</span>
</div>
<span
aria-hidden
title={s.status}
className={[
"size-1.5 shrink-0 rounded-full",
s.status === "open"
? "bg-[oklch(var(--success))]"
: s.status === "finalized"
? "bg-primary"
: "bg-muted-foreground/50",
].join(" ")}
/>
<span
className={[
"min-w-0 flex-1 truncate text-[0.8rem] leading-snug",
active ? "font-semibold text-primary" : "font-medium text-foreground/90",
].join(" ")}
>
{label}
</span>
{menuFor(s)}
</div>
</li>