@capagents/forgeqe 1.1.6 → 1.1.8

package/src/tui/App.tsx

@@ -30,7 +30,7 @@ import { initWorkspace } from "../init.ts"
 import { ShortcutsPanel } from "./shortcuts.tsx"
 import { ago, getStarted, projectLine, setupSentence, type Fact, type GetStarted, recentWork, startActions, type RecentItem, type StartAction } from "./landing.ts"
 import { TIPS, formatDuration, formatTokens, packageVersion, shortCwd, theme } from "./theme.ts"
-import { emptyProduced, Line, Produced, producedCard, settleCall, TestsSetting, TranscriptLine, trimLines } from "./transcript.tsx"
+import { emptyProduced, Line, Produced, producedCard, settleCall, sinceRequest, TestsSetting, TranscriptLine, trimLines } from "./transcript.tsx"
 import { Dialog, dialogSpec } from "./dialogs.ts"
 import { activityFromLog, clip, modelLabel } from "./text.ts"
 import { featuresText } from "../capabilities/render.ts"
@@ -444,7 +444,7 @@ export function App({ options }: { options: TuiOptions }) {
       reloadAfterAuth()
       return
     }
-    const controller = begin("Signing in…")
+    const controller = begin("Signing in…", system ? `Sign in to ${system}` : "Sign in")
     controller.signal.addEventListener("abort", () => settleEntry(null), { once: true })
     let finalStatus = "fail"
     try {
@@ -972,7 +972,7 @@ export function App({ options }: { options: TuiOptions }) {
         if (!aborted()) setActivity(`Agent: ${clip(e.text, 60)}…`)
         return
       case "call":
-        pushTool(e.text, e.ok, e.id)
+        pushTool(e.text, e.ok, e.id, !e.quiet)
         if (!aborted()) setActivity(nowWorking())
         return
       case "agent": {
@@ -1037,6 +1037,9 @@ export function App({ options }: { options: TuiOptions }) {
         return
       case "report":
         producedRef.current.reports.push({ title: e.title, html: e.html })
+        // What the report wrote is a file the request made: it is in Files with the rest.
+        for (const f of [e.markdown, e.html]) useFile(inspRef.current, { path: path.relative(process.cwd(), f) || f, action: "write" })
+        bump()
         return
     }
   }
@@ -1078,10 +1081,12 @@ export function App({ options }: { options: TuiOptions }) {
     ask,
   })
 
-  const begin = (activityText: string) => {
+  /** `request`: what was asked, which heads this request's lines in Activity so they are not read as the last one's. */
+  const begin = (activityText: string, request: string) => {
     const controller = new AbortController()
     abortRef.current = controller
     started.current = Date.now()
+    pushLine({ kind: "request", text: request.replace(/\s+/g, " ").trim(), pane: "activity", quiet: true, at: started.current })
     usedRef.current = new Map()
     producedRef.current = emptyProduced()
     newRequest(inspRef.current)
@@ -1095,8 +1100,16 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const finish = (finalStatus: string, followUps: FollowUp[] = []) => {
-    // A call the request ended inside of (stopped, or its result never came) is not left spinning in Activity.
-    setLines((prev) => (prev.some((l) => l.kind === "running") ? prev.map((l) => (l.kind === "running" ? { ...l, kind: "tool" as const, text: `${l.text} · ${finalStatus === "stopped" ? "stopped" : "no result"}` } : l)) : prev))
+    // A call the request ended inside of (stopped, or its result never came) is not left spinning in Activity; then the
+    // request's closing line says how it ended, how long it took, and how many activities it had.
+    const took = started.current != null ? formatDuration(Date.now() - started.current) : ""
+    const ended = (["done", "fail", "stopped", "idle"] as const).find((x) => x === finalStatus) || "fail"
+    const endId = idRef.current++
+    setLines((prev) => {
+      const settled = prev.some((l) => l.kind === "running") ? prev.map((l) => (l.kind === "running" ? { ...l, kind: "tool" as const, text: `${l.text} · ${finalStatus === "stopped" ? "stopped" : "no result"}` } : l)) : prev
+      const n = sinceRequest(settled)
+      return trimLines([...settled, { id: endId, kind: "requestEnd", text: `${took ? `in ${took} · ` : ""}${n} ${n === 1 ? "activity" : "activities"}`, pane: "activity", quiet: true, ended }])
+    })
     setNext(nextSteps(producedRef.current, { testsOn: testsRef.current.on, followUps }))
     progressDone(inspRef.current, finalStatus === "stopped")
     bump()
@@ -1120,7 +1133,7 @@ export function App({ options }: { options: TuiOptions }) {
       directNoted.current = true
       push("sys", `ForgeQE's agent is off (${why}), so the text runs as a browser goal.${why.includes("agent runtime") ? ` ${INSTALL_HINT}` : " Press Tab for a live profile."} /features lists what ForgeQE can do.`)
     }
-    const controller = begin(cfg.llm.provider === "mock" ? "Running the offline demo…" : "Starting…")
+    const controller = begin(cfg.llm.provider === "mock" ? "Running the offline demo…" : "Starting…", goal)
     testsRef.current = { on: false, why: why.includes("agent runtime") ? "the agent runtime Scribe needs is not installed" : "ForgeQE's agent is off in the offline profile" }
     let finalStatus = "fail"
     try {
@@ -1135,7 +1148,7 @@ export function App({ options }: { options: TuiOptions }) {
   }
 
   const askAgent = async (text: string, cfg: AppConfig) => {
-    const controller = begin("Thinking…")
+    const controller = begin("Thinking…", text)
     const meterStart = meterSnapshot()
     setThinking(true)
     const setup = sessionSetup(cfg, options.repo)
@@ -1784,7 +1797,7 @@ export function App({ options }: { options: TuiOptions }) {
       <box style={{ flexDirection: "column", width: paneWidth, height: rowsAvailable, flexShrink: 0 }}>
         <StatusBar running={running} who={insp.who} activity={activity} elapsed={elapsed} status={status} width={paneWidth} onStop={stop} progress={suiteProgress || planProgress(insp)} actions={paneButtons} />
         <box style={{ height: 1, flexShrink: 0 }} />
-        {plan ? <PlanPanel s={insp} width={paneWidth} height={plan} selected={sel} onFocus={focusOn("plan")} /> : null}
+        {plan ? <PlanPanel s={insp} width={paneWidth} height={plan} selected={sel} onFocus={focusOn("plan")} animate={running} /> : null}
         <ActivityPanel
           lines={activityLines}
           scrollRef={activityScroll}

package/src/tui/inspector.tsx

@@ -6,7 +6,7 @@ import { fitButtons, Spinner, type Button } from "./components.tsx"
 import { filesByUse, type FileUse, type Inspector, type Progress } from "./session.ts"
 import { clip, tailCut } from "./text.ts"
 import { formatTokens, theme } from "./theme.ts"
-import type { Line } from "./transcript.tsx"
+import { isMarker, type Line } from "./transcript.tsx"
 
 /**
  * The split view's panels. Each is a rounded box with its title in the border, in its section's colour from the
@@ -171,18 +171,19 @@ const PROGRESS_MARK: Record<Progress["status"], [string, string]> = {
   skipped: ["■", theme.faint],
 }
 
-export type PlanLine = { mark: string; color: string; text: string; textColor: string }
+/** `live`: a task in progress or a step running, drawn with a spinner while the request runs. */
+export type PlanLine = { mark: string; color: string; text: string; textColor: string; live?: boolean }
 
 export function planLines(s: Inspector): PlanLine[] {
   const lines: PlanLine[] = []
   for (const p of s.plan) {
     const [mark, color] = PLAN_MARK[p.status] || PLAN_MARK.pending!
-    lines.push({ mark, color, text: p.text, textColor: p.status === "completed" || p.status === "cancelled" ? theme.muted : theme.text })
+    lines.push({ mark, color, text: p.text, textColor: p.status === "completed" || p.status === "cancelled" ? theme.muted : theme.text, ...(p.status === "in_progress" ? { live: true } : {}) })
   }
   if (s.progress.items.length && s.plan.length) lines.push({ mark: "─", color: theme.border, text: s.progress.title, textColor: theme.faint })
   for (const i of s.progress.items) {
     const [mark, color] = PROGRESS_MARK[i.status]
-    lines.push({ mark, color, text: i.detail ? `${i.label} — ${i.detail}` : i.label, textColor: i.status === "fail" ? theme.err : i.status === "running" ? theme.text : theme.muted })
+    lines.push({ mark, color, text: i.detail ? `${i.label} — ${i.detail}` : i.label, textColor: i.status === "fail" ? theme.err : i.status === "running" ? theme.text : theme.muted, ...(i.status === "running" ? { live: true } : {}) })
   }
   return lines
 }
@@ -201,7 +202,7 @@ export function windowRows(total: number, rows: number, selected?: number): [num
 }
 
 /** The agent's to-do list, then the browser steps or suite cases; the latest that fit, or around the selected one. */
-export function PlanPanel(props: { s: Inspector; width: number; height: number; selected?: number; onFocus?: () => void }) {
+export function PlanPanel(props: { s: Inspector; width: number; height: number; selected?: number; onFocus?: () => void; animate?: boolean }) {
   const { s, width, height } = props
   const lines = planLines(s)
   const done = s.plan.filter((p) => p.status === "completed").length
@@ -213,10 +214,9 @@ export function PlanPanel(props: { s: Inspector; width: number; height: number;
         const active = first + i === props.selected
         return (
           <box key={first + i} style={{ flexDirection: "row", height: 1, flexShrink: 0, backgroundColor: active ? theme.button : undefined }}>
-            <text>
-              <span fg={l.color}>{`${l.mark} `}</span>
-              <span fg={active ? theme.text : l.textColor}>{clip(l.text, Math.max(10, width - 8))}</span>
-            </text>
+            {/* What is being worked on now spins, so it reads as live; a task left open after the request does not. */}
+            <box style={{ width: 2, flexShrink: 0 }}>{l.live && props.animate ? <Spinner kind="dots" color={l.color} /> : <text fg={l.color}>{l.mark}</text>}</box>
+            <text fg={active ? theme.text : l.textColor}>{clip(l.text, Math.max(10, width - 8))}</text>
           </box>
         )
       })}
@@ -227,7 +227,8 @@ export function PlanPanel(props: { s: Inspector; width: number; height: number;
 /** Each kind of activity line: its mark, the mark's colour, and the text's colour. */
 const ACTIVITY_STYLE: Record<string, [string, string, string]> = {
   running: ["◐", theme.warn, theme.text],
-  tool: ["⚙", theme.faint, theme.muted],
+  // A finished call: ✓, so it never reads as the ○ of a task still to do.
+  tool: ["✓", theme.ok, theme.muted],
   file: ["✎", theme.accent, theme.text],
   code: ["▸", theme.memory, theme.memory],
   timing: ["+", theme.warn, theme.warn],
@@ -255,6 +256,42 @@ function ToolCall({ parts: [name, args], width }: { parts: [string, string]; wid
   )
 }
 
+const ENDED: Record<NonNullable<Line["ended"]>, [string, string, string]> = {
+  done: ["✓", "Done", theme.ok],
+  fail: ["✗", "Failed", theme.err],
+  stopped: ["■", "Stopped", theme.warn],
+  idle: ["?", "Waiting for your answer", theme.warn],
+}
+
+/** "── 14:02  can you generate a defect report… ─────": where a request's activities start. */
+function RequestStart({ line, width, first }: { line: Line; width: number; first: boolean }) {
+  const d = new Date(line.at || Date.now())
+  const time = `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`
+  // The rule runs the whole row: the mark column and the text's.
+  const room = Math.max(12, (width || 60) + 3)
+  const text = clip(line.text, Math.max(8, room - time.length - 8))
+  const fill = Math.max(2, room - 3 - time.length - 2 - text.length - 1)
+  return (
+    <text style={{ height: 1, flexShrink: 0, marginTop: first ? 0 : 1 }}>
+      <span fg={theme.border}>{"── "}</span>
+      <span fg={theme.accent}>{time}</span>
+      <span fg={theme.text}>{`  ${text} `}</span>
+      <span fg={theme.border}>{"─".repeat(fill)}</span>
+    </text>
+  )
+}
+
+/** "✓ Done in 1m 12s · 16 activities": how a request ended. */
+function RequestEnd({ line, width }: { line: Line; width: number }) {
+  const [mark, label, color] = ENDED[line.ended || "done"]
+  return (
+    <text style={{ height: 1, flexShrink: 0 }}>
+      <span fg={color}>{`${mark} ${label}`}</span>
+      <span fg={theme.faint}>{` ${clip(line.text, Math.max(8, (width || 60) - label.length))}`}</span>
+    </text>
+  )
+}
+
 /** Rows an activity line may take: a call is one row; narration and results up to three. */
 const NOTE_ROWS = 3
 
@@ -262,15 +299,24 @@ const NOTE_ROWS = 3
  * One activity line, its mark in a column of its own so wrapped text stays under the text. `width` is the text's
  * columns: a call is cut to one row and anything else to three, so a burst of output never takes the panel over.
  */
-export function ActivityRow({ line, width = 0 }: { line: Line; width?: number }) {
+export function ActivityRow({ line, width = 0, first = false }: { line: Line; width?: number; first?: boolean }) {
+  if (line.kind === "request") return <RequestStart line={line} width={width} first={first} />
+  if (line.kind === "requestEnd") return <RequestEnd line={line} width={width} />
   const [mark, markColor, textColor] = ACTIVITY_STYLE[line.kind] || ["·", theme.faint, theme.muted]
   const oneRow = line.kind === "tool" || line.kind === "running" || line.kind === "file"
   const fit = (t: string, rows: number) => (width > 0 ? clip(t.replace(/\s+/g, " "), width * rows) : t)
   return (
     <box style={{ flexDirection: "row", flexShrink: 0 }}>
-      <text fg={markColor} style={{ width: 2, flexShrink: 0 }}>
-        {mark}
-      </text>
+      {line.kind === "running" ? (
+        // A call in progress spins until its result takes the row.
+        <box style={{ width: 2, flexShrink: 0 }}>
+          <Spinner kind="dots" color={markColor} />
+        </box>
+      ) : (
+        <text fg={markColor} style={{ width: 2, flexShrink: 0 }}>
+          {mark}
+        </text>
+      )}
       {(line.kind === "tool" || line.kind === "running") && toolArgs(line.text) ? (
         // "Azure DevOps · pipelines build (action list, project QI-Claims)": the call readable, its arguments quiet.
         <ToolCall parts={toolArgs(line.text)!} width={width} />
@@ -292,9 +338,10 @@ export const ACTIVITY_FILTERS = [
 ] as const
 export type ActivityFilter = (typeof ACTIVITY_FILTERS)[number]["id"]
 
+/** The lines a filter keeps; where each request starts and ends always stays, so a filtered line is never orphaned. */
 export function filterActivity(lines: Line[], filter: ActivityFilter): Line[] {
   const kinds = ACTIVITY_FILTERS.find((f) => f.id === filter)?.kinds
-  return kinds ? lines.filter((l) => (kinds as readonly string[]).includes(l.kind)) : lines
+  return kinds ? lines.filter((l) => isMarker(l) || (kinds as readonly string[]).includes(l.kind)) : lines
 }
 
 /**
@@ -335,7 +382,9 @@ export function ActivityPanel(props: {
   const room = Math.max(10, props.width - 12)
   const shown = filterActivity(props.lines, filter)
   const label = ACTIVITY_FILTERS.find((f) => f.id === filter)!.label
-  const count = filter === "all" ? (shown.length ? ` · ${shown.length}` : "") : ` · ${label} ${shown.length} of ${props.lines.length}`
+  // Counts are of activities: the lines marking where requests start and end are not.
+  const real = (ls: Line[]) => ls.filter((l) => !isMarker(l)).length
+  const count = filter === "all" ? (real(shown) ? ` · ${real(shown)}` : "") : ` · ${label} ${real(shown)} of ${real(props.lines)}`
   return (
     <Panel title={`Activity${count}`} color={SECTION.activity} width={props.width} height={props.height} focused={props.focused} keys="↑↓ pgup pgdn scroll · esc chat" onFocus={props.onFocus}>
       {props.focused || filter !== "all" ? (
@@ -354,11 +403,13 @@ export function ActivityPanel(props: {
         </box>
       ) : null}
       {props.now?.now ? (
-        <text style={{ height: 1, flexShrink: 0 }}>
-          <span fg={theme.muted}>{"Now   "}</span>
-          <span fg={theme.warn}>{"◐ "}</span>
-          <span fg={theme.text}>{clip(props.now.now, room)}</span>
-        </text>
+        <box style={{ flexDirection: "row", height: 1, flexShrink: 0 }}>
+          <text fg={theme.muted}>{"Now   "}</text>
+          <box style={{ width: 2, flexShrink: 0 }}>
+            <Spinner kind="dots" color={theme.warn} />
+          </box>
+          <text fg={theme.text}>{clip(props.now.now, room)}</text>
+        </box>
       ) : null}
       {props.now?.next ? (
         <text style={{ height: 1, flexShrink: 0 }}>
@@ -367,16 +418,16 @@ export function ActivityPanel(props: {
           <span fg={theme.muted}>{clip(props.now.next, room)}</span>
         </text>
       ) : null}
-      {shown.length ? (
+      {real(shown) ? (
         <scrollbox ref={props.scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1 }} focused={false}>
-          {shown.map((line) => (
-            <ActivityRow key={line.id} line={line} width={Math.max(10, props.width - 8)} />
+          {shown.map((line, i) => (
+            <ActivityRow key={line.id} line={line} width={Math.max(10, props.width - 8)} first={i === 0} />
           ))}
         </scrollbox>
       ) : (
         <box style={{ flexGrow: 1, justifyContent: "center", alignItems: "center" }}>
           <text fg={theme.faint}>
-            {clip(props.lines.length ? `Nothing under ${label} yet` : "Tool calls, browser steps, and the agents' reasoning show here", Math.max(10, props.width - 4))}
+            {clip(real(props.lines) ? `Nothing under ${label} yet` : "Tool calls, browser steps, and the agents' reasoning show here", Math.max(10, props.width - 4))}
           </text>
         </box>
       )}

package/src/tui/transcript.tsx

@@ -17,7 +17,7 @@ import { clip } from "./text.ts"
 
 export type Line = {
   id: number
-  kind: "sys" | "user" | "thought" | "timing" | "memory" | "tool" | "file" | "code" | "ok" | "err" | "summary" | "suitesummary" | "reply" | "card" | "running"
+  kind: "sys" | "user" | "thought" | "timing" | "memory" | "tool" | "file" | "code" | "ok" | "err" | "summary" | "suitesummary" | "reply" | "card" | "running" | "request" | "requestEnd"
   text: string
   summary?: RunSummary
   suite?: SuiteResult
@@ -29,6 +29,24 @@ export type Line = {
   quiet?: boolean
   /** A tool call's id: its "running" line becomes the call's result line when the call finishes. */
   call?: string
+  /** A request's first line in Activity ("request"): when it started. */
+  at?: number
+  /** A request's last line in Activity ("requestEnd"): how it ended. */
+  ended?: "done" | "fail" | "stopped" | "idle"
+}
+
+/** Activity lines that mark where a request starts and ends; they are not activities themselves. */
+export const isMarker = (l: Line) => l.kind === "request" || l.kind === "requestEnd"
+
+/** The activities since the last request started, markers left out: what the request did. */
+export function sinceRequest(lines: Line[]): number {
+  let n = 0
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const l = lines[i]!
+    if (l.kind === "request") break
+    if (l.pane === "activity" && !isMarker(l)) n++
+  }
+  return n
 }
 
 /** Lines kept: the oldest quiet ones go first, so a busy run never pushes the conversation out. */