feat(frontend): rotating activity icon + 5-line expandable activity panel
- CentralStatus: replace the red pulsing dot at the start of the "working" line with the rotating WorkingSpinner, now a button that opens the model-activity panel (onOpenActivity). WorkingSpinner is extracted to its own module (was local to AppShell). - ModelActivityPanel: show the last 5 lines of the model-stream tail (refreshing as the stream grows) with an expand toggle to the full stream, replacing the unbounded full transcript. - AppShell: drop the separate spinner button (the inline icon is now the single trigger) and the local WorkingSpinner def. - Remove the now-orphaned Transcript.tsx (its only consumer was the panel). TDD: CentralStatus + ModelActivityPanel tests RED->GREEN; frontend suite 87/87; tsc clean. Live visual verification pending (to do with the B/C frontend pass). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useReducer, useState } from "react";
|
||||
import { useSessionStore } from "../store/sessionStore";
|
||||
import { WorkingSpinner } from "./WorkingSpinner";
|
||||
|
||||
/** Last few words of a string — a compact "what the model is doing now" tail. */
|
||||
function lastWords(s: string, n = 8): string {
|
||||
@@ -11,7 +12,13 @@ function lastWords(s: string, n = 8): string {
|
||||
* (elapsed time + a short tail of the model stream) while the model is busy, and the
|
||||
* gate's curated messages for the current step. The full verbose stream lives in the
|
||||
* left Model-activity panel. */
|
||||
export function CentralStatus({ working }: { working: boolean }) {
|
||||
export function CentralStatus({
|
||||
working,
|
||||
onOpenActivity,
|
||||
}: {
|
||||
working: boolean;
|
||||
onOpenActivity?: () => void;
|
||||
}) {
|
||||
const lastUserEntry = useSessionStore((s) => s.lastUserEntry);
|
||||
const stepMessages = useSessionStore((s) => s.stepMessages);
|
||||
const transcript = useSessionStore((s) => s.transcript);
|
||||
@@ -49,7 +56,15 @@ export function CentralStatus({ working }: { working: boolean }) {
|
||||
|
||||
{working && (
|
||||
<div className="flex min-w-0 items-center gap-2 text-sm text-muted-foreground">
|
||||
<span className="size-1.5 shrink-0 animate-pulse rounded-full bg-primary" aria-hidden />
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenActivity}
|
||||
aria-label="Show model activity"
|
||||
title="Model activity"
|
||||
className="grid size-5 shrink-0 place-items-center rounded text-primary transition-colors hover:bg-muted"
|
||||
>
|
||||
<WorkingSpinner spinning className="size-3.5" />
|
||||
</button>
|
||||
<span className="shrink-0 tabular-nums">{elapsed}s</span>
|
||||
{tail && <span className="min-w-0 truncate text-muted-foreground/70">· {tail}</span>}
|
||||
<span className="sr-only">ThothII is working</span>
|
||||
|
||||
Reference in New Issue
Block a user