);
diff --git a/client/src/components/editor/ReasoningRow.tsx b/client/src/components/editor/ReasoningRow.tsx
index dd93217e..fea220a7 100644
--- a/client/src/components/editor/ReasoningRow.tsx
+++ b/client/src/components/editor/ReasoningRow.tsx
@@ -1,5 +1,5 @@
import { useEffect, useId, useRef, useState } from "react";
-import { Brain, ChevronRight } from "lucide-react";
+import { ChevronRight, Sparkles } from "lucide-react";
/** How long a finished block stays open before folding itself away. */
const AUTO_COLLAPSE_MS = 1000;
@@ -11,8 +11,14 @@ export interface ReasoningRowProps {
streaming: boolean;
/** Milliseconds the block took (or has taken so far). */
durationMs?: number;
- /** Start collapsed regardless of streaming state (used when replaying a saved transcript). */
+ /** Start collapsed regardless of streaming state so the reader can opt into the detail. */
defaultCollapsed?: boolean;
+ /**
+ * Show the block duration in the settled label. The conversation panel
+ * keeps elapsed time on the turn/activity row, so it can use the DeepSeek
+ * style `Think` disclosure without putting two clocks beside one stream.
+ */
+ showDuration?: boolean;
}
function formatDuration(ms: number): string {
@@ -23,11 +29,17 @@ function formatDuration(ms: number): string {
/**
* A turn's reasoning as a collapsible block — shimmering while it streams,
- * then labelled with how long it took, with the text under a left rule (the
+ * then labelled with its settled state, with the text under a left rule (the
* opencode idiom). Opens and closes itself around the stream, but a manual
* toggle wins from then on: the panel must never fight the reader.
*/
-export function ReasoningRow({ text, streaming, durationMs, defaultCollapsed = false }: ReasoningRowProps) {
+export function ReasoningRow({
+ text,
+ streaming,
+ durationMs,
+ defaultCollapsed = false,
+ showDuration = true,
+}: ReasoningRowProps) {
const [open, setOpen] = useState(!defaultCollapsed);
const toggled = useRef(false);
const bodyRef = useRef
(null);
@@ -56,9 +68,11 @@ export function ReasoningRow({ text, streaming, durationMs, defaultCollapsed = f
const label = streaming
? "Thinking…"
- : durationMs === undefined
- ? "Thought"
- : `Thought for ${formatDuration(durationMs)}`;
+ : !showDuration
+ ? "Think"
+ : durationMs === undefined
+ ? "Thought"
+ : `Thought for ${formatDuration(durationMs)}`;
return (
@@ -72,12 +86,21 @@ export function ReasoningRow({ text, streaming, durationMs, defaultCollapsed = f
aria-controls={bodyId}
className="flex w-full items-center gap-2 rounded-md px-1 py-0.5 text-left text-xs transition-colors hover:bg-surface-2 active:bg-surface-3"
>
-
+
{label}
+ {streaming && durationMs !== undefined ? (
+
+ {formatDuration(durationMs)}
+
+ ) : null}
{
vi.useRealTimers();
});
-const goal = (overrides: Partial = {}): GoalState => ({
- goal: "make the jump test pass",
- startedAtMs: NOW - 12_000,
- evaluations: 3,
- ...overrides,
-});
-
describe("RunStatusPill", () => {
- it("renders nothing when no goal or loop is running", () => {
- const { container } = render( undefined} />);
+ it("renders nothing when no loop is running", () => {
+ const { container } = render( undefined} />);
expect(container.firstChild).toBeNull();
});
- it("names an active goal, its checks, and how long it has run", () => {
- vi.useFakeTimers();
- vi.setSystemTime(NOW);
- render( undefined} />);
-
- expect(screen.getByText("Goal")).toBeTruthy();
- expect(screen.getByText("make the jump test pass")).toBeTruthy();
- expect(screen.getByText("3 checks")).toBeTruthy();
- expect(screen.getByText("12s")).toBeTruthy();
- });
-
- it("counts a single evaluation in the singular", () => {
- vi.useFakeTimers();
- vi.setSystemTime(NOW);
- render( undefined} />);
- expect(screen.getByText("1 check")).toBeTruthy();
- });
-
it("names a running loop and offers to stop it", () => {
vi.useFakeTimers();
vi.setSystemTime(NOW);
const onStop = vi.fn();
render(
,
@@ -56,57 +29,48 @@ describe("RunStatusPill", () => {
expect(screen.getByText("Loop")).toBeTruthy();
expect(screen.getByText("ship the arena")).toBeTruthy();
expect(screen.getByText("1h 04m 07s")).toBeTruthy();
- // A loop reports no evaluator checks; showing "0 checks" would be a lie.
- expect(screen.queryByText(/check/)).toBeNull();
-
fireEvent.click(screen.getByRole("button", { name: "Stop loop" }));
- expect(onStop).toHaveBeenCalledWith("loop");
+ expect(onStop).toHaveBeenCalledOnce();
});
- it("clears the goal from the pill", () => {
+ it("labels a paced loop as a watch", () => {
vi.useFakeTimers();
vi.setSystemTime(NOW);
- const onStop = vi.fn();
- render();
-
- fireEvent.click(screen.getByRole("button", { name: "Clear goal" }));
- expect(onStop).toHaveBeenCalledWith("goal");
+ render(
+ undefined}
+ />,
+ );
+ expect(screen.getByText("every 15m")).toBeTruthy();
});
- it("ticks the elapsed label while the run continues", () => {
+ it("ticks the elapsed label while the loop continues", () => {
vi.useFakeTimers();
vi.setSystemTime(NOW);
- render( undefined} />);
+ render(
+ undefined}
+ />,
+ );
expect(screen.getByText("12s")).toBeTruthy();
act(() => {
- vi.advanceTimersByTime(1_000);
- });
- expect(screen.getByText("13s")).toBeTruthy();
- act(() => {
- vi.advanceTimersByTime(60_000);
+ vi.advanceTimersByTime(61_000);
});
expect(screen.getByText("1m 13s")).toBeTruthy();
});
- it("stops ticking once nothing is running", () => {
+ it("stops ticking once the loop is gone", () => {
vi.useFakeTimers();
vi.setSystemTime(NOW);
- const { rerender } = render( undefined} />);
+ const { rerender } = render(
+ undefined} />,
+ );
expect(vi.getTimerCount()).toBe(1);
- rerender( undefined} />);
+ rerender( undefined} />);
expect(vi.getTimerCount()).toBe(0);
});
-
- it("prefers the loop when a stale goal is still set — the loop owns Stop", () => {
- vi.useFakeTimers();
- vi.setSystemTime(NOW);
- render(
- undefined} />,
- );
- expect(screen.getByText("Loop")).toBeTruthy();
- expect(screen.queryByText("Goal")).toBeNull();
- expect(screen.getByRole("button", { name: "Stop loop" })).toBeTruthy();
- });
});
diff --git a/client/src/components/editor/RunStatusPill.tsx b/client/src/components/editor/RunStatusPill.tsx
index 965334a4..3befbf78 100644
--- a/client/src/components/editor/RunStatusPill.tsx
+++ b/client/src/components/editor/RunStatusPill.tsx
@@ -1,7 +1,6 @@
import { useEffect, useState } from "react";
-import { Repeat, Square, Target } from "lucide-react";
+import { Repeat, Square } from "lucide-react";
import { formatDuration } from "../../lib/activity";
-import type { GoalState } from "../../lib/goal";
/** The `/loop` run in flight, as much of it as the composer needs to show. */
export interface ActiveLoopRun {
@@ -11,44 +10,7 @@ export interface ActiveLoopRun {
every?: string | null;
}
-export type RunMode = "goal" | "loop";
-
-interface ActiveRun {
- mode: RunMode;
- objective: string;
- startedAtMs: number;
- /** A paced loop's interval label; null for everything else. */
- every?: string | null;
- /** Evaluator passes so far; a loop has no equivalent, hence null. */
- checks: number | null;
-}
-
-/**
- * A `/goal` cannot be set while a loop runs, so at most one of these is real.
- * The loop still wins if both are somehow present: it is the run that owns the
- * Stop button, and offering to clear a goal would not halt it.
- */
-function activeRun(goal: GoalState | null, loop: ActiveLoopRun | null): ActiveRun | null {
- if (loop)
- return {
- mode: "loop",
- objective: loop.objective,
- startedAtMs: loop.startedAtMs,
- every: loop.every ?? null,
- checks: null,
- };
- if (goal) {
- return {
- mode: "goal",
- objective: goal.goal,
- startedAtMs: goal.startedAtMs,
- checks: Math.max(0, Math.floor(goal.evaluations)),
- };
- }
- return null;
-}
-
-function RunStatusPillBody({ run, onStop }: { run: ActiveRun; onStop: (mode: RunMode) => void }) {
+function RunStatusPillBody({ loop, onStop }: { loop: ActiveLoopRun; onStop: () => void }) {
const [nowMs, setNowMs] = useState(() => Date.now());
// The ticker lives here, not in the panel: a state update one level up would
// re-render the whole transcript once a second for a label this small.
@@ -56,30 +18,24 @@ function RunStatusPillBody({ run, onStop }: { run: ActiveRun; onStop: (mode: Run
const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
return () => window.clearInterval(timer);
}, []);
- const elapsed = formatDuration(Math.max(0, nowMs - run.startedAtMs), "clock");
- const Icon = run.mode === "loop" ? Repeat : Target;
+ const elapsed = formatDuration(Math.max(0, nowMs - loop.startedAtMs), "clock");
return (
-
-
{run.mode === "loop" ? "Loop" : "Goal"}
+
+
Loop
{/* A watch is a different thing from a run-to-done loop; the pill has to
say which one is up there. */}
- {run.every ?
every {run.every} : null}
-
{run.objective}
- {run.checks != null ? (
-
- {run.checks} {run.checks === 1 ? "check" : "checks"}
-
- ) : null}
+ {loop.every ?
every {loop.every} : null}
+
{loop.objective}
{elapsed}
+
+
What do you want to show here?
+
+ Choose a workspace tab to get started.
+
+
+ {choices.map((tab) => {
+ const meta = TAB_META[tab];
+ const Icon = meta.icon;
+ return (
+
+ );
+ })}
+
+