marcopanandClaude Opus 4.8
d67409ff16
- Center ThothII logo + tagline; break "Human In The Loop" onto a second line - Rename "New question" → "New session"; the button now clears the screen and focuses the sticky bottom composer instead of opening a dialog - Composer is always rendered and pinned at the bottom; typing the first message there creates the session (no modal) - Add inline stop control (square + inner circle) that interrupts and saves the session via /close - Always-present send affordance (CornerDownLeft ↵) on the right of the box - Status footer under the box: mic (inert), model name, thinking level, and a context-usage gauge (placeholder) - Brand-tinted spinner beside the logo while the harness/backend holds the ball; hidden once a widget needs human input Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
// frontend/src/shell/NavSessions.tsx
|
|
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { listSessions } from "../api/sessions";
|
|
import { resumeSession } from "../api/sessions";
|
|
import type { SessionSummary } from "../api/types";
|
|
|
|
interface Props {
|
|
activeSessionId: string | null;
|
|
onSessionSelect: (id: string) => void;
|
|
}
|
|
|
|
export function NavSessions({ activeSessionId, onSessionSelect }: Props) {
|
|
const queryClient = useQueryClient();
|
|
const { data: sessions = [] } = useQuery<SessionSummary[]>({
|
|
queryKey: ["sessions"],
|
|
queryFn: listSessions,
|
|
refetchInterval: 10_000,
|
|
});
|
|
|
|
async function handleClick(id: string) {
|
|
await resumeSession(id);
|
|
queryClient.invalidateQueries({ queryKey: ["sessions"] });
|
|
onSessionSelect(id);
|
|
}
|
|
|
|
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-0.5">
|
|
{sessions.map((s) => {
|
|
const active = s.id === activeSessionId;
|
|
return (
|
|
<li key={s.id}>
|
|
<button
|
|
data-testid={`session-item-${s.id}`}
|
|
data-active={active ? "true" : "false"}
|
|
onClick={() => handleClick(s.id)}
|
|
className={[
|
|
"group w-full rounded-lg px-2.5 py-2 text-left transition-colors",
|
|
active
|
|
? "bg-[oklch(var(--primary)/0.12)]"
|
|
: "hover:bg-accent",
|
|
].join(" ")}
|
|
>
|
|
<span
|
|
className={[
|
|
"block truncate text-[0.8rem] leading-snug",
|
|
active ? "font-bold text-primary" : "text-foreground/90",
|
|
].join(" ")}
|
|
>
|
|
{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>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|