@capagents/forgeqe 1.0.5 → 1.0.8

package/src/tui/inspector.tsx

@@ -2,7 +2,7 @@ import type { ScrollBoxRenderable } from "@opentui/core"
 import type { ReactNode, RefObject } from "react"
 
 import type { Usage } from "../types.ts"
-import { Spinner } from "./components.tsx"
+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"
@@ -102,6 +102,11 @@ export function SessionPanel({ info, width }: { info: SessionInfo; width: number
 }
 
 /** The right pane's first line: who is working on what and for how long, and Stop while something runs. */
+/** How far the agent's own plan has got, while it has one of two steps or more. */
+export function planProgress(s: Inspector): { done: number; total: number } | null {
+  return s.plan.length > 1 ? { done: s.plan.filter((p) => p.status === "completed").length, total: s.plan.length } : null
+}
+
 /** "███████░░░░░ 5/8": how far a suite has got, in `cells` cells. */
 export function progressBar(done: number, total: number, cells: number): [string, string] {
   const filled = total ? Math.round((Math.min(done, total) / total) * cells) : 0
@@ -118,6 +123,8 @@ export function StatusBar(props: {
   onStop: () => void
   /** A suite's cases: done so far, of how many. */
   progress?: { done: number; total: number } | null
+  /** Buttons for the view (Panels, Wide chat), before Stop; the first to give way when the line is short. */
+  actions?: Button[]
 }) {
   const done = props.status === "done"
   const failed = props.status === "fail"
@@ -134,7 +141,9 @@ export function StatusBar(props: {
   const bar = props.running && props.progress && props.progress.total > 1 ? props.progress : null
   const cells = 12
   const barText = bar ? ` ${bar.done}/${bar.total}  ` : ""
-  const room = Math.max(10, props.width - props.who.length - (props.running ? 30 : 6) - (bar ? cells + barText.length : 0))
+  const fixed = props.who.length + (props.running ? 30 : 6) + (bar ? cells + barText.length : 0)
+  const actions = fitButtons(props.actions || [], Math.max(0, props.width - fixed - 28))
+  const room = Math.max(10, props.width - fixed - actions.reduce((n, b) => n + b.icon.length + b.label.length + (b.keys ? b.keys.length + 1 : 0) + 4, 0))
   const [full, empty] = bar ? progressBar(bar.done, bar.total, cells) : ["", ""]
   return (
     <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
@@ -145,8 +154,18 @@ export function StatusBar(props: {
           <span fg={props.running ? theme.muted : color}>{`${props.running ? "  " : " "}${clip(what, room)}`}</span>
         </text>
       </box>
+      <box style={{ flexDirection: "row" }}>
+        {actions.map((b) => (
+          <box key={b.label} onMouseDown={b.onPress} style={{ flexDirection: "row", paddingLeft: 1, paddingRight: 1, marginLeft: 1, backgroundColor: theme.button }}>
+            <text>
+              <span fg={b.color}>{`${b.icon} `}</span>
+              <span fg={theme.text}>{b.label}</span>
+              {b.keys ? <span fg={theme.faint}>{` ${b.keys}`}</span> : null}
+            </text>
+          </box>
+        ))}
       {props.running ? (
-        <box style={{ flexDirection: "row" }}>
+        <box style={{ flexDirection: "row", marginLeft: 2 }}>
           {bar ? (
             <text>
               <span fg={theme.ok}>{full}</span>
@@ -160,6 +179,7 @@ export function StatusBar(props: {
           </box>
         </box>
       ) : null}
+      </box>
     </box>
   )
 }
@@ -242,6 +262,12 @@ const ACTIVITY_STYLE: Record<string, [string, string, string]> = {
   err: ["✗", theme.err, theme.text],
 }
 
+/** A tool line's call and its arguments in brackets, or null when it has none. */
+export function toolArgs(text: string): [string, string] | null {
+  const at = text.indexOf(" (")
+  return at > 0 && text.endsWith(")") ? [text.slice(0, at), text.slice(at + 1)] : null
+}
+
 /** One activity line, its mark in a column of its own so wrapped text stays under the text. */
 export function ActivityRow({ line }: { line: Line }) {
   const [mark, markColor, textColor] = ACTIVITY_STYLE[line.kind] || ["·", theme.faint, theme.muted]
@@ -250,9 +276,17 @@ export function ActivityRow({ line }: { line: Line }) {
       <text fg={markColor} style={{ width: 2, flexShrink: 0 }}>
         {mark}
       </text>
-      <text fg={textColor} style={{ flexGrow: 1, flexShrink: 1 }}>
-        {line.text || " "}
-      </text>
+      {line.kind === "tool" && toolArgs(line.text) ? (
+        // "Azure DevOps · pipelines build (action list, project QI-Claims)": the call readable, its arguments quiet.
+        <text style={{ flexGrow: 1, flexShrink: 1 }}>
+          <span fg={theme.text}>{toolArgs(line.text)![0]}</span>
+          <span fg={theme.faint}>{` ${toolArgs(line.text)![1]}`}</span>
+        </text>
+      ) : (
+        <text fg={textColor} style={{ flexGrow: 1, flexShrink: 1 }}>
+          {line.text || " "}
+        </text>
+      )}
     </box>
   )
 }

package/src/tui/next.ts

@@ -1,6 +1,7 @@
 import { existsSync } from "node:fs"
 import path from "node:path"
 
+import type { FollowUp } from "../brain/prompt.ts"
 import type { Produced } from "./transcript.tsx"
 
 /**
@@ -10,8 +11,14 @@ import type { Produced } from "./transcript.tsx"
 
 export type NextStep = { label: string; run: { kind: "insert"; text: string } | { kind: "open"; path: string } }
 
-export function nextSteps(p: Produced, opts: { testsOn: boolean }): NextStep[] {
+/**
+ * `followUps`: what ForgeQE's agent suggests from its answer ("Write a release report"), after what the request
+ * produced; a follow-up that repeats a step already offered is left out.
+ */
+export function nextSteps(p: Produced, opts: { testsOn: boolean; followUps?: FollowUp[] }): NextStep[] {
   const steps: NextStep[] = []
+  const report = p.reports.at(-1)
+  if (report && existsSync(report.html)) steps.push({ label: "Open the report", run: { kind: "open", path: report.html } })
   const run = p.runs.at(-1)
   const suite = p.suites.at(-1)
   if (suite) {
@@ -28,5 +35,9 @@ export function nextSteps(p: Produced, opts: { testsOn: boolean }): NextStep[] {
   }
   const test = p.tests.at(-1)
   if (test?.result?.testFile && test.result.status === "passed") steps.unshift({ label: "Open the new test", run: { kind: "open", path: test.result.testFile } })
+  for (const f of opts.followUps || []) {
+    if (steps.some((s) => s.label.toLowerCase() === f.label.toLowerCase())) continue
+    steps.push({ label: f.label, run: { kind: "insert", text: f.request } })
+  }
   return steps.slice(0, 3)
 }

package/src/tui/palette.tsx

@@ -15,17 +15,21 @@ export type PaletteRun =
   /** Put in the prompt to edit and send: an example request. */
   | { kind: "insert"; text: string }
   /** Something the shell does itself. */
-  | { kind: "action"; id: "refine" | "stop" | "details" | "chat" }
+  | { kind: "action"; id: "refine" | "stop" | "details" | "chat" | "wide" | "panels" }
 
 export type PaletteItem = { id: string; group: PaletteGroup; title: string; detail?: string; keys?: string; run: PaletteRun }
 
 export const GROUP_COLOR: Record<PaletteGroup, string> = { Action: theme.warn, Command: theme.accent, Profile: theme.memory, Ask: theme.ok }
 
-export function paletteItems(opts: { running: boolean; headed: boolean; detailsFull: boolean; profiles: string[]; active: string; narrow: boolean; view: "chat" | "details" }): PaletteItem[] {
+export function paletteItems(opts: { running: boolean; headed: boolean; detailsFull: boolean; profiles: string[]; active: string; narrow: boolean; view: "chat" | "details"; chatWide?: boolean }): PaletteItem[] {
   const items: PaletteItem[] = []
   const command = (id: string, title: string, text: string, detail?: string, keys?: string) => items.push({ id, group: "Command", title, detail, keys, run: { kind: "command", text } })
   if (opts.running) items.push({ id: "stop", group: "Action", title: "Stop the running request", keys: "esc", run: { kind: "action", id: "stop" } })
   items.push({ id: "refine", group: "Action", title: "Refine my request", detail: "check it against what ForgeQE knows before sending", keys: "ctrl+r", run: { kind: "action", id: "refine" } })
+  if (!opts.narrow) {
+    items.push({ id: "wide", group: "Action", title: opts.chatWide ? "Split view: chat and panels" : "Wide chat: the conversation across the screen", run: { kind: "action", id: "wide" } })
+    if (!opts.chatWide) items.push({ id: "panels", group: "Action", title: "Move to the panels: plan, activity, files", keys: "shift+tab", run: { kind: "action", id: "panels" } })
+  }
   if (opts.narrow) items.push({ id: "view", group: "Action", title: opts.view === "chat" ? "Show the details view" : "Back to the chat", keys: "ctrl+o", run: { kind: "action", id: opts.view === "chat" ? "details" : "chat" } })
   command("features", "What ForgeQE can do here", "/features", "and what each feature still needs")
   command("auth", "Sign in to a system", "/auth", "Azure DevOps, GitHub, Jira, Confluence, TestRail, Zephyr, qTest, Xray")

package/src/tui/refine-panel.tsx

@@ -49,7 +49,20 @@ export function RefinePanel(props: { state: RefineState; width: number; onChoose
           <text fg={theme.err}>{state.message}</text>
         ) : (
           <>
-            <text fg={theme.text}>{state.result.refined}</text>
+            {/* The request as it is sent: its labelled parts (Goal, Context, Steps, Rules, Result) stand out. */}
+            {state.result.refined.split("\n").map((line, i) => {
+              const label = /^(Goal|Context|Steps|Rules|Result):/.exec(line)
+              return label ? (
+                <text key={i}>
+                  <span fg={COLOR}>{label[0]}</span>
+                  <span fg={theme.text}>{line.slice(label[0].length)}</span>
+                </text>
+              ) : (
+                <text key={i} fg={line.trim() ? theme.text : undefined}>
+                  {line || " "}
+                </text>
+              )
+            })}
             {section("Checked", theme.ok, "✓", state.result.grounded.filter((g) => g.checked).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)}

package/src/tui/transcript.tsx

@@ -31,9 +31,11 @@ export type Produced = {
   runs: { runDir: string; status: RunStatus; files: string[] }[]
   suites: { html: string; junit: string }[]
   tests: { runDir: string; result?: CodeResult; error?: string }[]
+  /** Reports write_report saved: the page to open. */
+  reports: { title: string; html: string }[]
 }
 
-export const emptyProduced = (): Produced => ({ runs: [], suites: [], tests: [] })
+export const emptyProduced = (): Produced => ({ runs: [], suites: [], tests: [], reports: [] })
 
 /** Whether passed runs become tests this session, and why not when they don't. */
 export type TestsSetting = { on: boolean; why: string }
@@ -325,6 +327,80 @@ function replyStyle(): SyntaxStyle {
   return style
 }
 
+/** A reply cut into what reads better laid out than wrapped: headings, list items with their depth, and the rest. */
+export type ReplyBlock =
+  | { kind: "heading"; text: string }
+  | { kind: "item"; depth: number; mark: string; text: string }
+  | { kind: "markdown"; text: string }
+
+const ITEM = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/
+
+export function replyBlocks(md: string): ReplyBlock[] {
+  const blocks: ReplyBlock[] = []
+  let rest: string[] = []
+  let fence = false
+  const flush = () => {
+    const text = rest.join("\n").trim()
+    if (text) blocks.push({ kind: "markdown", text })
+    rest = []
+  }
+  for (const line of md.replace(/\r/g, "").split("\n")) {
+    if (/^\s*(```|~~~)/.test(line)) fence = !fence
+    const last = blocks.at(-1)
+    if (fence || /^\s*(```|~~~)/.test(line) || /^\s*\|/.test(line)) {
+      rest.push(line)
+      continue
+    }
+    const heading = /^#{1,6}\s+(.*)$/.exec(line)
+    const item = ITEM.exec(line)
+    if (heading) {
+      flush()
+      blocks.push({ kind: "heading", text: heading[1]!.replace(/\*\*/g, "").trim() })
+    } else if (item) {
+      flush()
+      const depth = Math.min(3, Math.floor(item[1]!.replace(/\t/g, "  ").length / 2))
+      const ordered = /\d/.test(item[2]!)
+      blocks.push({ kind: "item", depth, mark: ordered ? item[2]!.replace(")", ".") : depth ? "◦" : "•", text: item[3]! })
+    } else if (line.trim() && /^\s+\S/.test(line) && last?.kind === "item" && !rest.length) {
+      // A list item's continuation line: it belongs to the item, under its text.
+      last.text += ` ${line.trim()}`
+    } else if (!line.trim()) {
+      rest.push(line)
+    } else rest.push(line)
+  }
+  flush()
+  return blocks
+}
+
+/** The agent's reply: headings with room above, list items with their marks in a column so wrapped lines hang under the text. */
+function ReplyBody({ text }: { text: string }) {
+  const blocks = replyBlocks(text)
+  return (
+    <box style={{ flexDirection: "column", flexShrink: 0 }}>
+      {blocks.map((b, i) =>
+        b.kind === "heading" ? (
+          <text key={i} fg={theme.accent} style={{ marginTop: i ? 1 : 0, flexShrink: 0 }}>
+            <strong>{b.text}</strong>
+          </text>
+        ) : b.kind === "item" ? (
+          <box key={i} style={{ flexDirection: "row", flexShrink: 0, paddingLeft: b.depth * 2, marginTop: blocks[i - 1]?.kind === "markdown" ? 1 : 0 }}>
+            <text fg={theme.accent} style={{ width: b.mark.length + 1, flexShrink: 0 }}>
+              {b.mark}
+            </text>
+            <box style={{ flexGrow: 1, flexShrink: 1 }}>
+              <markdown content={b.text} syntaxStyle={replyStyle()} fg={theme.text} conceal />
+            </box>
+          </box>
+        ) : (
+          <box key={i} style={{ marginTop: i ? 1 : 0, flexShrink: 0 }}>
+            <markdown content={b.text} syntaxStyle={replyStyle()} fg={theme.text} conceal tableOptions={{ widthMode: "content", wrapMode: "word" }} />
+          </box>
+        ),
+      )}
+    </box>
+  )
+}
+
 export function TranscriptLine({ line }: { line: Line }) {
   if (line.kind === "card" && line.card) return <ResultCard card={line.card} />
   if (line.kind === "summary" && line.summary) return <SummaryCard summary={line.summary} />
@@ -338,7 +414,7 @@ export function TranscriptLine({ line }: { line: Line }) {
         customBorderChars={BAR}
         style={{ backgroundColor: theme.panel, paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, marginTop: 1, marginBottom: 1, flexShrink: 0 }}
       >
-        <markdown content={line.text} syntaxStyle={replyStyle()} fg={theme.text} conceal tableOptions={{ widthMode: "content", wrapMode: "word" }} />
+        <ReplyBody text={line.text} />
       </box>
     )
   }