marcopanandClaude Opus 4.8
b056ff334f
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>
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
// frontend/src/shell/NavSessions.tsx
|
|
import type { ReactNode } from "react";
|
|
import type { SessionSummary } from "../api/types";
|
|
|
|
interface Props {
|
|
sessions: SessionSummary[];
|
|
activeSessionId: string | null;
|
|
onOpenPanel: (id: string) => void;
|
|
menuFor: (session: SessionSummary) => ReactNode;
|
|
}
|
|
|
|
export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }: Props) {
|
|
if (sessions.length === 0) {
|
|
return (
|
|
<p className="px-1 py-6 text-center text-xs text-muted-foreground">
|
|
No sessions yet. Start with <span className="font-medium text-foreground">New session</span>.
|
|
</p>
|
|
);
|
|
}
|
|
return (
|
|
<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
|
|
data-testid={`session-item-${s.id}`}
|
|
data-active={active ? "true" : "false"}
|
|
onClick={() => onOpenPanel(s.id)}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={label}
|
|
title={`${label} · ${s.status}`}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
onOpenPanel(s.id);
|
|
}
|
|
}}
|
|
className={[
|
|
"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(" ")}
|
|
>
|
|
<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>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|