@capagents/forgeqe 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capagents/forgeqe",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "ForgeQE: a browser agent CLI that runs goals and test cases in local Chrome or Chromium, or BrowserStack and TestMu AI/LambdaTest when configured, and turns passing runs into tests in your repo",
   "license": "MIT",
   "type": "module",

package/src/tui/agentIcons.ts

@@ -2,14 +2,13 @@ import { AGENT_HUES, theme } from "./theme.ts"
 
 /**
  * Each agent's face in the shell: a short name and an icon, so it is clear which agent or subagent is working. The
- * icons follow one set of hexagon tiles (soft tones, a deeper one where shapes overlap); each agent has a picture of its
- * job and a colour of its own, for its icon and its name.
- * Plain data, tested without a terminal.
+ * icon is a picture of the agent's job after one set of hexagon tiles (soft tones, a deeper one where shapes overlap),
+ * in a colour no other agent has; the name is in that colour too. Plain data, tested without a terminal.
  */
 
 /**
- * Eight pixels wide and four high, drawn as two rows of half blocks: `#` the agent's main tone, `+` its deeper tone
- * (where shapes overlap, or the part that stands out), `.` empty. Each agent's is a picture of its job.
+ * Eight pixels wide and four high: `#` the agent's main tone, `+` its deeper tone (where shapes overlap, or the part
+ * that stands out), `.` empty. A quadrant block holds two by two pixels, so a picture is four characters on two rows.
  */
 export const SHAPES = {
   /** A plain hexagon: an agent not listed. */
@@ -85,25 +84,44 @@ export function faceOf(agent: string): AgentFace & { main: string; deep: string
   return { name: name.charAt(0).toUpperCase() + name.slice(1), shape: "hexagon", hue: "blue", main: theme.faint, deep: theme.border }
 }
 
-/** One terminal cell of an icon: a half or full block in up to two colours, or a blank. */
-export type IconCell = { ch: string; fg?: string; bg?: string }
+/** Columns an icon takes: two pixels to a quadrant block. */
+export const ICON_WIDTH = SHAPES.hexagon[0].length / 2
 
-/** The agent's icon as two rows of cells: a pixel's tone on top is the foreground of ▀, the one below its background. */
-export function iconCells(agent: string): IconCell[][] {
+/** The quadrant block for each set of its four pixels: top left 1, top right 2, bottom left 4, bottom right 8. */
+const QUADRANT = " ▘▝▀▖▌▞▛▗▚▐▜▄▙▟█"
+
+/** One character of an icon and its colour. */
+export type IconCell = { ch: string; fg: string }
+
+/** "#7fe0d6" toward white by `amount` (0 to 1): the highlight that sweeps across a working agent's icon. */
+export function lighten(hex: string, amount: number): string {
+  const n = parseInt(hex.slice(1), 16)
+  const channel = (shift: number) => {
+    const v = (n >> shift) & 0xff
+    return Math.round(v + (255 - v) * amount)
+  }
+  return `#${[16, 8, 0].map((s) => channel(s).toString(16).padStart(2, "0")).join("")}`
+}
+
+/** Frames in one sweep of the highlight: across the icon, then a pause as long. */
+export const SWEEP_FRAMES = ICON_WIDTH * 2
+
+/**
+ * The agent's icon as two rows of quadrant blocks, each in the tone most of its pixels have (a tie keeps the main
+ * tone). `frame`: while the agent works, the frame of the highlight that sweeps across it, a column at a time, then
+ * rests; undefined, the icon is still.
+ */
+export function iconCells(agent: string, frame?: number): IconCell[][] {
   const face = faceOf(agent)
   const px = SHAPES[face.shape]
-  const tone = (p: string | undefined) => (p === "#" ? face.main : p === "+" ? face.deep : undefined)
+  const lit = frame === undefined ? -1 : frame % SWEEP_FRAMES
   return [0, 1].map((r) =>
-    [...px[0]].map((_, c) => {
-      const top = tone(px[r * 2]![c])
-      const bottom = tone(px[r * 2 + 1]![c])
-      if (!top && !bottom) return { ch: " " }
-      if (!bottom) return { ch: "▀", fg: top }
-      if (!top) return { ch: "▄", fg: bottom }
-      return top === bottom ? { ch: "█", fg: top } : { ch: "▀", fg: top, bg: bottom }
+    Array.from({ length: ICON_WIDTH }, (_, c) => {
+      const pixels = [px[r * 2]![c * 2], px[r * 2]![c * 2 + 1], px[r * 2 + 1]![c * 2], px[r * 2 + 1]![c * 2 + 1]]
+      const bits = pixels.reduce((n, p, i) => (p === "#" || p === "+" ? n | (1 << i) : n), 0)
+      const deep = pixels.filter((p) => p === "+").length > pixels.filter((p) => p === "#").length
+      const tone = deep ? face.deep : face.main
+      return { ch: QUADRANT[bits]!, fg: c === lit ? lighten(tone, 0.6) : tone }
     }),
   )
 }
-
-/** Columns an icon takes. */
-export const ICON_WIDTH = SHAPES.hexagon[0].length

package/src/tui/inspector.tsx

@@ -1,5 +1,5 @@
 import type { ScrollBoxRenderable } from "@opentui/core"
-import type { ReactNode, RefObject } from "react"
+import { useEffect, useState, type ReactNode, type RefObject } from "react"
 
 import type { Usage } from "../types.ts"
 import { faceOf, iconCells, ICON_WIDTH } from "./agentIcons.ts"
@@ -67,14 +67,26 @@ export function Panel(props: { title: string; color: string; width?: number; hei
   )
 }
 
-/** An agent's icon (src/tui/agentIcons.ts): two rows of half blocks in its hue. */
-export function AgentIcon({ agent }: { agent: string }) {
+/** Milliseconds a frame of a working agent's icon shows: the highlight crosses it and rests in about a second. */
+const SWEEP_MS = 140
+
+/**
+ * An agent's icon (src/tui/agentIcons.ts): its picture in quadrant blocks, four columns and two rows, in its colours.
+ * `live`: the agent is working, and a highlight sweeps across the icon in place of a spinner.
+ */
+export function AgentIcon({ agent, live = false }: { agent: string; live?: boolean }) {
+  const [frame, setFrame] = useState(0)
+  useEffect(() => {
+    if (!live) return
+    const timer = setInterval(() => setFrame((f) => f + 1), SWEEP_MS)
+    return () => clearInterval(timer)
+  }, [live])
   return (
     <box style={{ flexDirection: "column", width: ICON_WIDTH, height: 2, flexShrink: 0 }}>
-      {iconCells(agent).map((row, r) => (
+      {iconCells(agent, live ? frame : undefined).map((row, r) => (
         <text key={r}>
           {row.map((cell, c) => (
-            <span key={c} {...(cell.fg ? { fg: cell.fg } : {})} {...(cell.bg ? { bg: cell.bg } : {})}>
+            <span key={c} fg={cell.fg}>
               {cell.ch}
             </span>
           ))}
@@ -105,9 +117,9 @@ export const STATUS_ROWS = 2
 export function StatusBar(props: {
   running: boolean
   who: string
-  /** The agent working (its name in src/agents.ts): its icon leads both rows while the request runs. */
+  /** The agent working (its name in src/agents.ts): its icon leads both rows while the request runs, and moves. */
   agent?: string
-  /** The colour `who` is written in: the working agent's own. */
+  /** The colour `who` is written in: the working agent's own; its icon stands in for the spinner. */
   whoColor?: string
   activity: string
   elapsed: string
@@ -123,7 +135,7 @@ export function StatusBar(props: {
   if (icon) {
     return (
       <box style={{ flexDirection: "row", height: STATUS_ROWS, flexShrink: 0, paddingLeft: 1 }}>
-        <AgentIcon agent={icon} />
+        <AgentIcon agent={icon} live />
         <box style={{ width: props.width - ICON_WIDTH - 1, flexShrink: 0 }}>
           <StatusBar {...props} agent={undefined} whoColor={faceOf(icon).main} width={props.width - ICON_WIDTH - 1} />
         </box>
@@ -145,8 +157,8 @@ export function StatusBar(props: {
     <box style={{ flexDirection: "column", height: STATUS_ROWS, flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
       <box style={{ flexDirection: "row", justifyContent: "space-between", height: 1 }}>
         <box style={{ flexDirection: "row" }}>
-          {props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
-          <text fg={props.running ? props.whoColor || theme.text : color}>{` ${clip(state, Math.max(8, props.width - fixed + state.length))}`}</text>
+          {props.whoColor ? null : props.running ? <Spinner kind="dots" color={theme.warn} /> : <text fg={color}>{"●"}</text>}
+          <text fg={props.running ? props.whoColor || theme.text : color}>{`${props.whoColor ? "" : " "}${clip(state, Math.max(8, props.width - fixed + state.length))}`}</text>
         </box>
         <box style={{ flexDirection: "row" }}>
           {actions.map((b) => (
@@ -229,12 +241,11 @@ export function AgentWorking(props: { s: Inspector; activity: string; stats: str
   }
   return (
     <box style={{ flexDirection: "row", marginTop: 1, flexShrink: 0 }}>
-      <AgentIcon agent={s.agent} />
+      <AgentIcon agent={s.agent} live />
       <box style={{ flexDirection: "column", paddingLeft: 1, flexGrow: 1, flexShrink: 1 }}>
         <box style={{ flexDirection: "row", height: 1 }}>
-          <Spinner kind="dots" color={face.main} />
           <text>
-            <span fg={face.main}>{` ${name}`}</span>
+            <span fg={face.main}>{name}</span>
             <span fg={theme.memory}>{`  ${clip(props.activity || "Working…", Math.max(8, room - name.length - 4))}`}</span>
           </text>
         </box>
@@ -257,7 +268,7 @@ export function AgentWorking(props: { s: Inspector; activity: string; stats: str
 
 /**
  * Every agent that took part in the request, in the order they started, as tiles: the icon, its name, and whether it
- * is working (spinning, with its time), waiting for a subagent, or done. The latest that fit; "+N" for the earlier.
+ * is working (its icon moving, with its time), waiting for a subagent, or done. The latest that fit; "+N" for the earlier.
  */
 export function CrewStrip(props: { s: Inspector; width: number; running: boolean; now?: number }) {
   const now = props.now ?? Date.now()
@@ -283,12 +294,13 @@ export function CrewStrip(props: { s: Inspector; width: number; running: boolean
         return (
           <box key={m.agent} style={{ flexDirection: "row", flexShrink: 0 }}>
             {i ? <text fg={theme.border}>{CREW_GAP}</text> : null}
-            <AgentIcon agent={m.agent} />
+            <AgentIcon agent={m.agent} live={live} />
             <box style={{ flexDirection: "column", width: text + 1, paddingLeft: 1, flexShrink: 0 }}>
               {/* Each agent's name in its own colour, so its tile, the status bar, and the icon read as one agent. */}
               <text fg={face.main}>{clip(face.name, text)}</text>
               <box style={{ flexDirection: "row", height: 1 }}>
-                <box style={{ width: 2, flexShrink: 0 }}>{live ? <Spinner kind="dots" color={color} /> : <text fg={color}>{mark}</text>}</box>
+                {/* The working agent's icon moves, so its time needs no spinner beside it. */}
+                {live ? null : <text fg={color} style={{ width: 2, flexShrink: 0 }}>{mark}</text>}
                 <text fg={m.state === "working" ? theme.warn : theme.faint}>{crewState(m, now)}</text>
               </box>
             </box>