@capagents/forgeqe 1.0.0 → 1.0.2

package/src/tui/inspector.tsx

@@ -0,0 +1,262 @@
+import type { ScrollBoxRenderable } from "@opentui/core"
+import type { RefObject } from "react"
+
+import type { Usage } from "../types.ts"
+import { formatCost, type Cost, type Role } from "../usage.ts"
+import { Spinner } 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 { TranscriptLine, type Line } from "./transcript.tsx"
+
+/** Each section of the split view has its own colour from the shell's palette; status colours keep their meaning. */
+export const SECTION = {
+  session: theme.accent,
+  plan: theme.thought,
+  activity: theme.accent,
+  files: theme.memory,
+  context: theme.warn,
+  tokens: theme.ok,
+}
+
+const ROLE_COLOR: Record<Role, string> = {
+  "ForgeQE's agent": theme.accent,
+  "browser agent": theme.thought,
+  Scribe: theme.ok,
+  reviewer: theme.warn,
+  judge: theme.memory,
+}
+
+export function SectionTitle({ title, color, right, width }: { title: string; color: string; right?: string; width?: number }) {
+  if (right && width) right = clip(right, Math.max(4, width - title.length - 3))
+  return (
+    <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0 }}>
+      <text>
+        <span fg={color}>{"▍"}</span>
+        <span fg={color}>{title}</span>
+      </text>
+      {right ? <text fg={theme.muted}>{right}</text> : null}
+    </box>
+  )
+}
+
+export type SessionInfo = {
+  profile: string
+  model: string
+  auth: string
+  cwd: string
+  tests: string
+  browser: string
+  domain?: string
+  started?: number
+  requests: number
+  total?: { usage: Usage; cost?: Cost }
+}
+
+/** Top of the left pane: what this session runs with, and what it has used. */
+export function SessionBlock({ info, width }: { info: SessionInfo; width: number }) {
+  const room = Math.max(10, width - 12)
+  const row = (label: string, value: string, color: string = theme.text) => (
+    <text key={label}>
+      <span fg={theme.muted}>{label.padEnd(9)}</span>
+      <span fg={color}>{clip(value, room)}</span>
+    </text>
+  )
+  const started = info.started ? new Date(info.started) : null
+  const clock = started ? `${String(started.getHours()).padStart(2, "0")}:${String(started.getMinutes()).padStart(2, "0")}` : "–"
+  const used = info.total ? `${formatTokens(info.total.usage.input + info.total.usage.output)} tokens${info.total.cost ? ` · ${formatCost(info.total.cost)}` : ""}` : "nothing yet"
+  return (
+    <box style={{ flexDirection: "column", flexShrink: 0, paddingBottom: 1 }}>
+      <SectionTitle title="SESSION" color={SECTION.session} right={`started ${clock}`} width={width} />
+      {row("Model", `${info.profile || "none"} · ${info.model || "…"}`)}
+      {row("Sign-in", info.auth, info.auth.startsWith("Entra") ? theme.ok : theme.text)}
+      {row("Folder", tailCut(info.cwd, room))}
+      {row("Tests", info.tests, info.tests.startsWith("written") ? theme.ok : theme.muted)}
+      {row("Browser", info.browser)}
+      {info.domain ? row("Domain", info.domain, theme.memory) : null}
+      {row("Used", `${info.requests} request${info.requests === 1 ? "" : "s"} · ${used}`, theme.muted)}
+    </box>
+  )
+}
+
+/** The right pane's top line: who is working on what, for how long, and the Stop button. */
+export function WorkHeader(props: { running: boolean; who: string; activity: string; elapsed: string; status: string; width: number; onStop: () => void }) {
+  const statusColor = props.running ? theme.warn : props.status === "done" ? theme.ok : props.status === "fail" ? theme.err : theme.muted
+  const label = props.running ? `${props.who} · ${props.activity || "working…"}` : props.status === "idle" ? "Waiting for your next request" : `Last request ${props.status}`
+  return (
+    <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1, flexShrink: 0 }}>
+      <box style={{ flexDirection: "row" }}>
+        {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={statusColor}>{"●"}</text>}
+        <text>
+          <span fg={statusColor}>{` ${clip(label, Math.max(10, props.width - 26))}`}</span>
+          {props.elapsed ? <span fg={theme.faint}>{`  ${props.elapsed}`}</span> : null}
+        </text>
+      </box>
+      <box
+        onMouseDown={props.running ? props.onStop : undefined}
+        style={{ paddingLeft: 1, paddingRight: 1, backgroundColor: props.running ? theme.warn : theme.button }}
+      >
+        <text fg={props.running ? theme.onButton : theme.muted}>{"■ Stop"}</text>
+      </box>
+    </box>
+  )
+}
+
+const PLAN_MARK: Record<string, [string, string]> = {
+  completed: ["✓", theme.ok],
+  in_progress: ["◐", theme.warn],
+  pending: ["○", theme.faint],
+  cancelled: ["✗", theme.faint],
+}
+const PROGRESS_MARK: Record<Progress["status"], [string, string]> = {
+  ok: ["✓", theme.ok],
+  running: ["◐", theme.warn],
+  fail: ["✗", theme.err],
+  skipped: ["■", theme.faint],
+}
+
+/** The agent's to-do list, then the browser steps or suite cases; only the latest that fit in `rows`. */
+export function PlanPanel({ s, width, rows }: { s: Inspector; width: number; rows: number }) {
+  const lines: { mark: string; color: string; text: string; textColor: string }[] = []
+  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 })
+  }
+  if (s.progress.items.length) {
+    if (s.plan.length) lines.push({ mark: " ", color: theme.faint, 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 })
+    }
+  }
+  const done = s.plan.filter((p) => p.status === "completed").length
+  const right = s.plan.length ? `${done} of ${s.plan.length}` : s.progress.items.length ? s.progress.title : ""
+  const shown = lines.slice(-Math.max(1, rows))
+  return (
+    <box style={{ flexDirection: "column", flexShrink: 0 }}>
+      <SectionTitle title="PLAN" color={SECTION.plan} right={right} width={width} />
+      {shown.length ? (
+        shown.map((l, i) => (
+          <text key={i}>
+            <span fg={l.color}>{` ${l.mark} `}</span>
+            <span fg={l.textColor}>{clip(l.text, Math.max(10, width - 4))}</span>
+          </text>
+        ))
+      ) : (
+        <text fg={theme.faint}>{clip(" The agent's plan and each browser step or test case show here.", Math.max(10, width))}</text>
+      )}
+    </box>
+  )
+}
+
+/** Everything the agents do, newest at the bottom. */
+export function ActivityLog(props: { lines: Line[]; scrollRef: RefObject<ScrollBoxRenderable | null>; height: number; width: number }) {
+  return (
+    <box style={{ flexDirection: "column", height: props.height, flexShrink: 0 }}>
+      <SectionTitle title="ACTIVITY" color={SECTION.activity} right={props.lines.length ? `${props.lines.length} events` : ""} width={props.width} />
+      <scrollbox ref={props.scrollRef} stickyScroll stickyStart="bottom" style={{ flexGrow: 1 }} focused={false}>
+        {props.lines.length ? (
+          props.lines.map((line) => <TranscriptLine key={line.id} line={line} />)
+        ) : (
+          <text fg={theme.faint}>{clip(" Tool calls, browser steps, and the agents' reasoning show here.", Math.max(10, props.width))}</text>
+        )}
+      </scrollbox>
+    </box>
+  )
+}
+
+const FILE_MARK: Record<FileUse["last"], [string, string]> = { read: ["◉", theme.accent], write: ["✎", theme.ok], edit: ["✎", theme.warn] }
+
+export function FilesPanel({ s, width, rows }: { s: Inspector; width: number; rows: number }) {
+  const files = filesByUse(s)
+  const room = Math.max(8, width - 9)
+  return (
+    <box style={{ flexDirection: "column", width, paddingRight: 1 }}>
+      <SectionTitle title="FILES" color={SECTION.files} right={files.length ? String(files.length) : ""} width={width} />
+      {files.length ? (
+        files.slice(0, rows).map((f) => {
+          const [mark, color] = FILE_MARK[f.last]
+          const times = f.reads + f.changes
+          return (
+            <text key={f.path}>
+              <span fg={color}>{`${mark} `}</span>
+              <span fg={f.changes ? theme.text : theme.muted}>{tailCut(f.path, room)}</span>
+              {times > 1 ? <span fg={theme.faint}>{` ×${times}`}</span> : null}
+            </text>
+          )
+        })
+      ) : (
+        <text fg={theme.faint}>{"No files yet"}</text>
+      )}
+      {files.length > rows ? <text fg={theme.faint}>{`and ${files.length - rows} more`}</text> : null}
+      {width < 22 ? null : <text>
+        <span fg={theme.accent}>{"◉"}</span>
+        <span fg={theme.faint}>{" read "}</span>
+        <span fg={theme.ok}>{"✎"}</span>
+        <span fg={theme.faint}>{" new "}</span>
+        <span fg={theme.warn}>{"✎"}</span>
+        <span fg={theme.faint}>{" edited"}</span>
+      </text>}
+    </box>
+  )
+}
+
+export type ContextInfo = { tokens: number; limit: number; skills: string[]; knowledge: number; domain?: string; mcp: string[]; capabilities: number }
+
+/** How full the model's context window is, and what ForgeQE put into it. */
+export function ContextPanel({ c, width }: { c: ContextInfo; width: number }) {
+  const barWidth = Math.max(6, width - 16)
+  const share = c.limit ? Math.min(1, c.tokens / c.limit) : 0
+  const filled = Math.round(share * barWidth)
+  const color = share < 0.6 ? theme.ok : share < 0.85 ? theme.warn : theme.err
+  const room = Math.max(6, width - 12)
+  const row = (label: string, value: string, valueColor: string = theme.text) => (
+    <text key={label}>
+      <span fg={theme.muted}>{label.padEnd(10)}</span>
+      <span fg={valueColor}>{clip(value, room)}</span>
+    </text>
+  )
+  return (
+    <box style={{ flexDirection: "column", width, paddingRight: 1 }}>
+      <SectionTitle title="CONTEXT" color={SECTION.context} right={c.tokens ? `${Math.round(share * 100)}%` : ""} width={width} />
+      <text>
+        <span fg={color}>{"█".repeat(filled)}</span>
+        <span fg={theme.faint}>{"░".repeat(barWidth - filled)}</span>
+        <span fg={theme.muted}>{` ${formatTokens(c.tokens)}/${formatTokens(c.limit)}`}</span>
+      </text>
+      {row("Skills", c.skills.length ? c.skills.join(", ") : "none loaded", c.skills.length ? theme.ok : theme.faint)}
+      {row("Knowledge", c.knowledge ? `${c.knowledge} product file${c.knowledge === 1 ? "" : "s"}` : "none", c.knowledge ? theme.text : theme.faint)}
+      {row("Domain", c.domain || "not declared", c.domain ? theme.memory : theme.faint)}
+      {row("MCP", c.mcp.length ? c.mcp.join(", ") : "none", c.mcp.length ? theme.text : theme.faint)}
+      {row("Tools", `${c.capabilities} capabilities`, theme.muted)}
+    </box>
+  )
+}
+
+export function TokensPanel({ roles, total, width }: { roles: { role: Role; usage: Usage; cost?: Cost }[]; total: { usage: Usage; cost?: Cost }; width: number }) {
+  const amount = (u: Usage, c?: Cost) => `${formatTokens(u.input + u.output).padStart(6)}${c ? `  ${formatCost(c)}` : ""}`
+  const labelWidth = Math.max(8, Math.min(16, width - 18))
+  return (
+    <box style={{ flexDirection: "column", width }}>
+      <SectionTitle title="TOKENS" color={SECTION.tokens} right={total.usage.cached ? `${formatTokens(total.usage.cached)} cached` : ""} />
+      {roles.length ? (
+        roles.map((r) => (
+          <text key={r.role}>
+            <span fg={ROLE_COLOR[r.role] || theme.text}>{clip(r.role, labelWidth).padEnd(labelWidth)}</span>
+            <span fg={theme.text}>{amount(r.usage, r.cost)}</span>
+          </text>
+        ))
+      ) : (
+        <text fg={theme.faint}>{"Nothing used yet"}</text>
+      )}
+      {roles.length > 1 ? (
+        <text>
+          <span fg={theme.muted}>{"Total".padEnd(labelWidth)}</span>
+          <span fg={theme.ok}>{amount(total.usage, total.cost)}</span>
+        </text>
+      ) : null}
+      <text fg={theme.faint}>{`in ${formatTokens(total.usage.input)} · out ${formatTokens(total.usage.output)}`}</text>
+    </box>
+  )
+}
+

package/src/tui/session.ts

@@ -0,0 +1,115 @@
+import type { FileAction, PlanItem } from "../types.ts"
+
+/**
+ * What the shell's right-hand pane shows about the request in progress: the agent's plan, the browser steps or suite
+ * cases, the files the agents used, and what is in the model's context. Plain data, changed only through the
+ * functions below, so it is tested without a terminal.
+ */
+
+export type FileUse = { path: string; reads: number; changes: number; last: FileAction; order: number }
+
+export type Progress = { label: string; status: "running" | "ok" | "fail" | "skipped"; detail?: string }
+
+export type Who = "ForgeQE's agent" | "Browser agent" | "Scribe"
+
+export type Inspector = {
+  /** The agent's own to-do list. */
+  plan: PlanItem[]
+  /** The browser run's steps, or the suite's cases; `title` says which. */
+  progress: { title: string; items: Progress[] }
+  files: Map<string, FileUse>
+  /** Input tokens of the latest model call: how full its context window is. */
+  context: number
+  skills: string[]
+  who: Who
+  /** Counts file uses, so the most recent comes first. */
+  seq: number
+}
+
+export const MAX_PROGRESS = 200
+
+export function newInspector(): Inspector {
+  return { plan: [], progress: { title: "", items: [] }, files: new Map(), context: 0, skills: [], who: "ForgeQE's agent", seq: 0 }
+}
+
+/** A new request keeps the files, skills, and context of the session, and starts a fresh plan and progress. */
+export function newRequest(s: Inspector): void {
+  s.plan = []
+  s.progress = { title: "", items: [] }
+  s.who = "ForgeQE's agent"
+}
+
+export function setPlan(s: Inspector, items: PlanItem[]): void {
+  s.plan = items
+}
+
+export function useFile(s: Inspector, file: { path: string; action: FileAction }): void {
+  const was = s.files.get(file.path)
+  const reads = (was?.reads || 0) + (file.action === "read" ? 1 : 0)
+  const changes = (was?.changes || 0) + (file.action === "read" ? 0 : 1)
+  // Newest first: a file used again moves to the top.
+  s.files.set(file.path, { path: file.path, reads, changes, last: file.action, order: ++s.seq })
+}
+
+export function addSkill(s: Inspector, name: string): void {
+  if (name && !s.skills.includes(name)) s.skills.push(name)
+}
+
+export function setContext(s: Inspector, tokens: number): void {
+  if (tokens > 0) s.context = tokens
+}
+
+export function setWho(s: Inspector, who: Who): void {
+  s.who = who
+}
+
+export function startProgress(s: Inspector, title: string): void {
+  s.progress = { title, items: [] }
+}
+
+/** A browser step started (or a case): the previous running one, if any, counts as done. */
+export function stepStarted(s: Inspector, label: string): void {
+  for (const i of s.progress.items) if (i.status === "running") i.status = "ok"
+  s.progress.items.push({ label, status: "running" })
+  if (s.progress.items.length > MAX_PROGRESS) s.progress.items.splice(0, s.progress.items.length - MAX_PROGRESS)
+}
+
+/** The outcome of the running step: a failed action marks it, a later success does not clear a failure. */
+export function stepOutcome(s: Inspector, ok: boolean, detail?: string): void {
+  const running = [...s.progress.items].reverse().find((i) => i.status === "running" || i.status === "fail")
+  if (!running) return
+  if (!ok) {
+    running.status = "fail"
+    if (detail) running.detail = detail
+  }
+}
+
+/** Every step still running is over: done, or stopped when the run was. */
+export function progressDone(s: Inspector, stopped = false): void {
+  for (const i of s.progress.items) if (i.status === "running") i.status = stopped ? "skipped" : "ok"
+}
+
+export function caseStarted(s: Inspector, id: string, title: string): void {
+  s.progress.items.push({ label: `${id}  ${title}`, status: "running" })
+}
+
+export function caseDone(s: Inspector, id: string, status: "passed" | "failed" | "error" | "stopped", detail?: string): void {
+  const item = s.progress.items.find((i) => i.label.startsWith(`${id}  `) && i.status === "running")
+  if (!item) return
+  item.status = status === "passed" ? "ok" : status === "stopped" ? "skipped" : "fail"
+  if (detail) item.detail = detail
+}
+
+/** The files, most recently used first. */
+export function filesByUse(s: Inspector): FileUse[] {
+  return [...s.files.values()].sort((a, b) => b.order - a.order)
+}
+
+/** Which pane a transcript line belongs in: the conversation, or what the agents are doing. */
+export type Pane = "chat" | "activity"
+const CHAT_KINDS = new Set(["user", "reply", "card", "summary", "suitesummary"])
+
+/** Results and the conversation go to the chat; while a request runs, everything else is activity. */
+export function paneFor(kind: string, running: boolean): Pane {
+  return CHAT_KINDS.has(kind) || !running ? "chat" : "activity"
+}

package/src/tui/text.ts

@@ -7,6 +7,11 @@ export function clip(text: string, n = 72): string {
   return s.length <= n ? s : `${s.slice(0, n - 1)}…`
 }
 
+/** "…/pages/LoginPage.ts": a path cut from the start, since its end tells files apart. */
+export function tailCut(text: string, n: number): string {
+  return text.length <= n ? text : `…${text.slice(text.length - n + 1)}`
+}
+
 export function modelLabel(cfg: AppConfig): string {
   if (cfg.llm.provider === "none") return "none set up"
   if (cfg.llm.provider === "mock") return "offline"

package/src/tui/transcript.tsx

@@ -20,6 +20,8 @@ export type Line = {
   suite?: SuiteResult
   card?: Card
   outcome?: "done" | "failed" | "needs_input"
+  /** Which side of the split view shows it: the conversation, or what the agents are doing. */
+  pane?: "chat" | "activity"
 }
 
 /** What one request produced: browser runs with their files, suites, and the tests the coding agent wrote. */

package/src/types.ts

@@ -118,12 +118,22 @@ export type CodeResult = {
   attention?: { dir: string; files: string[]; patch?: string; readme: string }
 }
 
+/** What an agent did to a file, for the shell's file list. */
+export type FileAction = "read" | "write" | "edit"
+
+/** One item of an agent's own to-do list (the agent runtime's todowrite). */
+export type PlanItem = { text: string; status: "pending" | "in_progress" | "completed" | "cancelled" }
+
 export type CodeEvent =
   | { type: "code"; kind: "info"; text: string }
-  | { type: "code"; kind: "tool"; text: string; ok: boolean }
+  /** 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: "say"; text: string }
   | { type: "code"; kind: "test"; text: string; ok: boolean; attempt: number }
-  | { type: "code"; kind: "usage"; usage: Usage }
+  /** The session's usage so far; `context` is the last model call's input, how full its context window is. */
+  | { type: "code"; kind: "usage"; usage: Usage; context?: number }
+  /** The agent's to-do list, each time it changes. */
+  | { type: "code"; kind: "plan"; items: PlanItem[] }
 
 export type AgentEvent =
   | { type: "log"; level: "info" | "warn" | "error"; text: string }