@capagents/forgeqe 1.1.5 → 1.1.7

package/src/tui/refine-panel.tsx

@@ -1,5 +1,8 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import type { RefObject } from "react"
+
 import type { Refined } from "../refine.ts"
-import { Spinner } from "./components.tsx"
+import { Spinner, wrappedLines } from "./components.tsx"
 import { formatDuration, formatTokens, theme } from "./theme.ts"
 
 /** Refine's panel, in the prompt's place: working, the result with what was checked, or why it could not refine. */
@@ -27,35 +30,72 @@ export function initialChoice(missing: string[]): number {
   return REFINE_CHOICES.findIndex((c) => c.id === (missing.length ? "edit" : "use"))
 }
 
-export function RefinePanel(props: { state: RefineState; width: number; onChoose: (id: RefineChoice) => void; onHover: (i: number) => void }) {
+/** A row of the refined request as the panel draws it: a label in the panel's colour, a ✓ for a checked fact, or plain. */
+type Row = { text: string; mark?: string; markColor?: string; label?: string; color?: string; heading?: boolean }
+
+/** Everything the panel's body shows, in order: what is still missing first, since it decides whether to send. */
+export function refineRows(r: Refined): Row[] {
+  const contextLines = r.refined.split("\n").filter((l) => l.startsWith("- ")).map((l) => norm(l.slice(2)))
+  const inContext = new Set(contextLines)
+  // Facts Refine checked that are also context lines are marked there, not repeated under Checked.
+  const checked = new Set(r.grounded.filter((g) => g.checked).map((g) => norm(g.fact)).filter((f) => inContext.has(f)))
+  const section = (label: string, mark: string, markColor: string, items: string[]): Row[] =>
+    items.length ? [{ text: label, heading: true, color: markColor === theme.err ? theme.err : theme.muted }, ...items.map((text) => ({ text, mark, markColor })), { text: "" }] : []
+  const request: Row[] = r.refined.split("\n").map((line) => {
+    if (line.startsWith("- ") && checked.has(norm(line.slice(2)))) return { text: line.slice(2), mark: "✓", markColor: theme.ok }
+    const label = /^(Role|Objective|Context|Steps|Rules|Output format|Summary|Goal|Result):/.exec(line)
+    return label ? { text: line.slice(label[0].length), label: label[0] } : { text: line }
+  })
+  return [
+    ...section("Missing — answer these in your request", "?", theme.err, r.missing),
+    ...request,
+    ...section("Checked", "✓", theme.ok, r.grounded.filter((g) => g.checked && !inContext.has(norm(g.fact))).map((g) => g.fact)),
+    ...section("Assumed", "~", theme.warn, [...r.grounded.filter((g) => !g.checked).map((g) => g.fact), ...r.assumed]),
+  ]
+}
+
+/** The screen rows `rows` take at `width` columns, wrapped as the panel wraps them. */
+export function rowsHeight(rows: Row[], width: number): number {
+  return rows.reduce((n, r) => n + (r.text ? wrappedLines((r.label || "") + r.text, width - (r.mark ? 2 : 0)) : 1), 0)
+}
+
+/**
+ * Refine's panel, in the prompt's place. `maxHeight` is the rows it may take with its action row; a longer request
+ * scrolls inside it (↑↓ pgup pgdn, or the wheel) while the title and the actions stay on screen.
+ */
+export function RefinePanel(props: {
+  state: RefineState
+  width: number
+  maxHeight: number
+  scrollRef?: RefObject<ScrollBoxRenderable | null>
+  onChoose: (id: RefineChoice) => void
+  onHover: (i: number) => void
+}) {
   const { state, width } = props
   const cost = state.phase === "done" && state.tokens ? ` · ${formatTokens(state.tokens)} tokens${state.ms ? ` · ${formatDuration(state.ms)}` : ""}` : ""
   // How much of the request keeps the ASD-STE100 rules, as Refine's prompt asks.
   const ste = state.phase === "done" && state.result.ste !== undefined ? ` · STE ${Math.round(state.result.ste * 100)}%` : ""
-  const title = state.phase === "working" ? " ✦ Refining " : state.phase === "error" ? " ✦ Could not refine " : ` ✦ Refined request${ste}${cost} `
-  // Facts Refine checked that are also context lines are marked there, not repeated under Checked.
-  const contextLines = state.phase === "done" ? state.result.refined.split("\n").filter((l) => l.startsWith("- ")).map((l) => norm(l.slice(2))) : []
-  const inContext = new Set(contextLines)
-  const checked = new Set(state.phase === "done" ? state.result.grounded.filter((g) => g.checked).map((g) => norm(g.fact)).filter((f) => inContext.has(f)) : [])
-  const section = (label: string, color: string, mark: string, items: string[]) =>
-    items.length ? (
-      <box style={{ flexDirection: "column", marginTop: 1 }}>
-        <text fg={theme.muted}>{label}</text>
-        {items.map((it, i) => (
-          <box key={i} style={{ flexDirection: "row" }}>
-            <text fg={color} style={{ width: 2, flexShrink: 0 }}>
-              {mark}
-            </text>
-            <text fg={theme.text} style={{ flexGrow: 1, flexShrink: 1 }}>
-              {it}
-            </text>
-          </box>
-        ))}
-      </box>
-    ) : null
+  const missing = state.phase === "done" && state.result.missing.length ? ` · ${state.result.missing.length} to answer` : ""
+  const title = state.phase === "working" ? " ✦ Refining " : state.phase === "error" ? " ✦ Could not refine " : ` ✦ Refined request${missing}${ste}${cost} `
+  const rows = state.phase === "done" ? refineRows(state.result) : []
+  const inner = Math.max(10, width - 4)
+  // The border takes two rows and the action row one; the body gets the rest, and scrolls when it needs more.
+  const room = Math.max(3, props.maxHeight - 3)
+  const needed = rowsHeight(rows, inner)
+  const scrolls = needed > room
+  const bodyHeight = Math.min(needed, room)
   return (
     <box style={{ flexDirection: "column", width, flexShrink: 0 }}>
-      <box border borderStyle="rounded" borderColor={COLOR} title={title} titleColor={COLOR} style={{ flexDirection: "column", paddingLeft: 1, paddingRight: 1, backgroundColor: theme.panel }}>
+      <box
+        border
+        borderStyle="rounded"
+        borderColor={COLOR}
+        title={title}
+        titleColor={COLOR}
+        bottomTitle={scrolls ? " ↑↓ pgup pgdn scroll " : undefined}
+        bottomTitleAlignment="right"
+        style={{ flexDirection: "column", paddingLeft: 1, paddingRight: 1, backgroundColor: theme.panel, flexShrink: 0 }}
+      >
         {state.phase === "working" ? (
           <box style={{ flexDirection: "row" }}>
             <Spinner kind="dots" color={COLOR} />
@@ -64,37 +104,36 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
         ) : state.phase === "error" ? (
           <text fg={theme.err}>{state.message}</text>
         ) : (
-          <>
-            {/* The request as it is sent: its labelled parts (Role, Objective, Context, Steps, Rules, Output format, Summary) stand out. */}
-            {state.result.refined.split("\n").map((line, i) => {
-              const label = /^(Role|Objective|Context|Steps|Rules|Output format|Summary|Goal|Result):/.exec(line)
-              // A context line Refine checked against the systems: ✓ in place of its dash, so it is not listed twice.
-              if (line.startsWith("- ") && checked.has(norm(line.slice(2)))) {
-                return (
-                  <text key={i}>
-                    <span fg={theme.ok}>{"✓ "}</span>
-                    <span fg={theme.text}>{line.slice(2)}</span>
+          <scrollbox ref={props.scrollRef} style={{ height: bodyHeight, flexShrink: 0 }} focused={false}>
+            {rows.map((r, i) =>
+              r.heading ? (
+                <text key={i} fg={r.color}>
+                  {r.text}
+                </text>
+              ) : r.mark ? (
+                <box key={i} style={{ flexDirection: "row", flexShrink: 0 }}>
+                  <text fg={r.markColor} style={{ width: 2, flexShrink: 0 }}>
+                    {r.mark}
+                  </text>
+                  <text fg={theme.text} style={{ flexGrow: 1, flexShrink: 1 }}>
+                    {r.text}
                   </text>
-                )
-              }
-              return label ? (
+                </box>
+              ) : r.label ? (
                 <text key={i}>
-                  <span fg={COLOR}>{label[0]}</span>
-                  <span fg={theme.text}>{line.slice(label[0].length)}</span>
+                  <span fg={COLOR}>{r.label}</span>
+                  <span fg={theme.text}>{r.text}</span>
                 </text>
               ) : (
-                <text key={i} fg={line.trim() ? theme.text : undefined}>
-                  {line || " "}
+                <text key={i} fg={theme.text}>
+                  {r.text || " "}
                 </text>
-              )
-            })}
-            {section("Checked", theme.ok, "✓", state.result.grounded.filter((g) => g.checked && !inContext.has(norm(g.fact))).map((g) => g.fact))}
-            {section("Assumed", theme.warn, "~", [...state.result.grounded.filter((g) => !g.checked).map((g) => g.fact), ...state.result.assumed])}
-            {section("Missing — answer these in your request", theme.err, "?", state.result.missing)}
-          </>
+              ),
+            )}
+          </scrollbox>
         )}
       </box>
-      <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, marginTop: 0 }}>
+      <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0 }}>
         {state.phase === "done" ? (
           <box style={{ flexDirection: "row" }}>
             {REFINE_CHOICES.map((c, i) => {
@@ -112,12 +151,23 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
         <text>
           {state.phase === "done" ? (
             <>
+              <span fg={theme.text}>{"⇆"}</span>
+              <span fg={theme.muted}>{" choose  "}</span>
               <span fg={theme.text}>{"enter"}</span>
               <span fg={theme.muted}>{` ${REFINE_CHOICES[state.choice]!.id === "keep" ? "keep mine" : REFINE_CHOICES[state.choice]!.id}  `}</span>
-              <span fg={theme.text}>{"e"}</span>
-              <span fg={theme.muted}>{" edit  "}</span>
-              <span fg={theme.text}>{"esc"}</span>
-              <span fg={theme.muted}>{" keep mine"}</span>
+              {/* Each action's key once: e and esc are not repeated when enter already does them. */}
+              {REFINE_CHOICES[state.choice]!.id !== "edit" ? (
+                <>
+                  <span fg={theme.text}>{"e"}</span>
+                  <span fg={theme.muted}>{" edit  "}</span>
+                </>
+              ) : null}
+              {REFINE_CHOICES[state.choice]!.id !== "keep" ? (
+                <>
+                  <span fg={theme.text}>{"esc"}</span>
+                  <span fg={theme.muted}>{" keep mine"}</span>
+                </>
+              ) : null}
             </>
           ) : (
             <>

package/src/tui/shortcuts.tsx

@@ -16,6 +16,8 @@ export const SHORTCUTS: { group: string; keys: [string, string][] }[] = [
     group: "Find and move",
     keys: [
       ["ctrl+p", "search: actions, commands, profiles, examples"],
+      ["pgup pgdn", "scroll the conversation (the mouse wheel works too)"],
+      ["↑↓ pgup pgdn", "scroll a long refined request; ⇆ picks what to do with it"],
       ["shift+tab", "move between the chat and the plan, activity, and files panels"],
       ["ctrl+o", "open or close the panels: plan, activity, files, context, tokens"],
       ["alt+1 to alt+4", "a start action, or a next step"],

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"
+  kind: "sys" | "user" | "thought" | "timing" | "memory" | "tool" | "file" | "code" | "ok" | "err" | "summary" | "suitesummary" | "reply" | "card" | "running" | "request" | "requestEnd"
   text: string
   summary?: RunSummary
   suite?: SuiteResult
@@ -25,6 +25,47 @@ export type Line = {
   outcome?: "done" | "failed" | "needs_input"
   /** Which side of the split view shows it: the conversation, or what the agents are doing. */
   pane?: "chat" | "activity"
+  /** Only the Activity panel shows it: detail the conversation leaves out at this level (/details), such as reads. */
+  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. */
+export const MAX_LINES = 1500
+
+export function trimLines(lines: Line[], max = MAX_LINES): Line[] {
+  if (lines.length <= max) return lines
+  let drop = lines.length - max
+  const kept = lines.filter((l) => (drop > 0 && l.quiet ? (drop--, false) : true))
+  return kept.length > max ? kept.slice(-max) : kept
+}
+
+/** A call has finished: its running line takes the result in place, or the result is added when there was none. */
+export function settleCall(lines: Line[], call: string | undefined, line: Omit<Line, "id" | "call">, id: number): Line[] {
+  const at = call ? lines.findIndex((l) => l.call === call && l.kind === "running") : -1
+  if (at < 0) return [...lines, { ...line, id, ...(call ? { call } : {}) }]
+  const next = [...lines]
+  next[at] = { ...next[at]!, ...line, call }
+  return next
 }
 
 /** What one request produced: browser runs with their files, suites, and the tests the coding agent wrote. */
@@ -97,6 +138,9 @@ export function producedCard(p: Produced, tests: TestsSetting): Card | null {
  * The conversation reads top to bottom, as in Claude Code: what you asked after ">", each reply, tool call, or result
  * after "⏺", and what came of it indented under the call after "⎿". No boxes or backgrounds: marks and colour carry it.
  */
+/** The lines a request shows in the conversation before it folds. */
+export const USER_ROWS = 8
+
 export const MARK = { item: "⏺", child: "⎿", user: ">" }
 
 /** A mark in its own column and the content beside it, so wrapped lines stay under the content. */
@@ -404,9 +448,13 @@ export function TranscriptLine({ line, prev }: { line: Line; prev?: Line }) {
   if (line.kind === "summary" && line.summary) return <SummaryCard summary={line.summary} />
   if (line.kind === "suitesummary" && line.suite) return <SuiteCard suite={line.suite} />
   if (line.kind === "user") {
+    // A long request (a refined one, a pasted spec) folds to its first lines; it was sent in full.
+    const rows = line.text.split("\n")
+    const folded = rows.length > USER_ROWS
     return (
       <Marked mark={MARK.user} color={theme.muted} gap>
-        <text fg={theme.muted}>{line.text}</text>
+        <text fg={theme.muted}>{folded ? rows.slice(0, USER_ROWS - 1).join("\n") : line.text}</text>
+        {folded ? <text fg={theme.faint}>{`… ${rows.length - USER_ROWS + 1} more lines, sent in full`}</text> : null}
       </Marked>
     )
   }

package/src/types.ts

@@ -127,7 +127,9 @@ export type PlanItem = { text: string; status: "pending" | "in_progress" | "comp
 export type CodeEvent =
   | { type: "code"; kind: "info"; text: string }
   /** A finished tool call: `tool` is its name, and `file` the file it read or changed, relative to the repository. */
-  | { type: "code"; kind: "tool"; text: string; ok: boolean; tool?: string; file?: { path: string; action: FileAction }; skill?: string }
+  | { type: "code"; kind: "tool"; text: string; ok: boolean; tool?: string; file?: { path: string; action: FileAction }; skill?: string; id?: string }
+  /** A tool call that has started and not finished yet; its `kind: "tool"` event with the same `id` follows. */
+  | { type: "code"; kind: "start"; text: string; tool: string; id: string }
   | { type: "code"; kind: "say"; text: string }
   | { type: "code"; kind: "test"; text: string; ok: boolean; attempt: number }
   /** The session's usage so far; `context` is the last model call's input, how full its context window is. */