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>
This commit is contained in:
@@ -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" });
|
||||
|
||||
@@ -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 {};
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user