@capagents/forgeqe 0.0.0-stage → 1.0.0

package/src/tui/clipboard.ts

@@ -0,0 +1,36 @@
+import { spawnSync } from "node:child_process"
+
+/** The system clipboard command for this machine, tried in order; the first one that runs wins. */
+function nativeCommands(): string[][] {
+  if (process.platform === "darwin") return [["pbcopy"]]
+  if (process.platform === "win32") return [["clip"]]
+  const wayland = process.env.WAYLAND_DISPLAY ? [["wl-copy"]] : []
+  return [...wayland, ["xclip", "-selection", "clipboard"], ["xsel", "--clipboard", "--input"]]
+}
+
+/**
+ * Put text on the clipboard two ways: OSC 52 through the terminal (works over SSH and in VS Code, iTerm2, kitty,
+ * WezTerm, Windows Terminal) and the system command (works in terminals without OSC 52, such as macOS Terminal).
+ */
+export function copyText(text: string, osc52?: (text: string) => boolean): boolean {
+  let copied = false
+  try {
+    copied = osc52?.(text) === true
+  } catch {}
+  for (const [cmd, ...args] of nativeCommands()) {
+    try {
+      const r = spawnSync(cmd, args, { input: text, stdio: ["pipe", "ignore", "ignore"], timeout: 2000 })
+      if (r.status === 0) return true
+    } catch {}
+  }
+  return copied
+}
+
+/** Selected transcript text as the user wants it pasted: the card bars and the padding the layout adds removed. */
+export function cleanSelection(text: string): string {
+  return text
+    .split("\n")
+    .map((line) => line.replace(/^\s*[┃╹]\s?/, "").trimEnd())
+    .join("\n")
+    .replace(/^\n+|\n+$/g, "")
+}

package/src/tui/components.tsx

@@ -0,0 +1,263 @@
+import type { KeyBinding, TextareaRenderable } from "@opentui/core"
+import { useEffect, useRef, useState, type ReactNode } from "react"
+
+import { logoRows, theme } from "./theme.ts"
+
+export const BAR = {
+  topLeft: "┃",
+  topRight: " ",
+  bottomLeft: "┃",
+  bottomRight: " ",
+  horizontal: " ",
+  vertical: "┃",
+  topT: " ",
+  bottomT: " ",
+  leftT: "┃",
+  rightT: " ",
+  cross: " ",
+}
+
+export function Logo() {
+  const name = logoRows("forge")
+  const suffix = logoRows("QE")
+  return (
+    <box style={{ flexDirection: "column", alignItems: "flex-end" }}>
+      {name.map((row, i) => (
+        <text key={i}>
+          <span fg={theme.faint}>{row}</span>
+          <span fg={theme.text}>{` ${suffix[i]}`}</span>
+        </text>
+      ))}
+      <text fg={theme.muted}>by Capgemini</text>
+    </box>
+  )
+}
+
+export type PromptProps = {
+  width: number
+  inputKey: number
+  onSubmit: (value: string) => void
+  /** Text rows the box shows when empty; it grows with the text up to maxRows, then scrolls. */
+  minRows: number
+  maxRows: number
+  placeholder: string
+  modeColor: string
+  profile: string
+  model: string
+  right?: string
+  rightColor?: string
+  /** A secret being entered: the box shows one dot per character instead of a text field, so the value is never drawn. */
+  masked?: number
+}
+
+/** Enter sends; Shift+Enter, Alt+Enter or Ctrl+J start a new line. */
+const PROMPT_KEYS: KeyBinding[] = [
+  { name: "return", action: "submit" },
+  { name: "kpenter", action: "submit" },
+  { name: "return", shift: true, action: "newline" },
+  { name: "return", meta: true, action: "newline" },
+  { name: "linefeed", action: "newline" },
+]
+
+export function Prompt(props: PromptProps) {
+  const edge = `╹${"▀".repeat(Math.max(0, props.width - 1))}`
+  const ref = useRef<TextareaRenderable>(null)
+  const [rows, setRows] = useState(props.minRows)
+  useEffect(() => setRows(props.minRows), [props.inputKey, props.minRows])
+  const fit = () => {
+    const lines = ref.current?.virtualLineCount ?? 1
+    setRows(Math.min(props.maxRows, Math.max(props.minRows, lines)))
+  }
+  return (
+    <box style={{ flexDirection: "column", width: props.width, flexShrink: 0 }}>
+      <box
+        border={["left"]}
+        borderColor={props.modeColor}
+        customBorderChars={BAR}
+        style={{
+          flexDirection: "column",
+          backgroundColor: theme.panel,
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          width: props.width,
+        }}
+      >
+        {props.masked !== undefined ? (
+          <text style={{ height: 1 }}>
+            {props.masked ? <span fg={theme.text}>{"•".repeat(Math.min(props.masked, Math.max(1, props.width - 8)))}</span> : <span fg={theme.faint}>{props.placeholder}</span>}
+          </text>
+        ) : (
+          <textarea
+            key={props.inputKey}
+            ref={ref}
+            placeholder={props.placeholder}
+            focused
+            wrapMode="word"
+            keyBindings={PROMPT_KEYS}
+            onSubmit={() => props.onSubmit(ref.current?.plainText ?? "")}
+            onContentChange={fit}
+            style={{ height: rows }}
+            backgroundColor={theme.panel}
+            focusedBackgroundColor={theme.panel}
+            textColor={theme.text}
+            focusedTextColor={theme.text}
+            placeholderColor={theme.faint}
+          />
+        )}
+        <box style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 1 }}>
+          <text>
+            <span fg={theme.muted}>{"Model  "}</span>
+            <span fg={theme.text}>{props.model || "…"}</span>
+          </text>
+          <text>
+            {props.right ? <span fg={props.rightColor || theme.muted}>{props.right}</span> : null}
+            {props.right ? <span fg={theme.faint}>{"  ·  "}</span> : null}
+            <span fg={theme.muted}>{"profile "}</span>
+            <span fg={theme.text}>{props.profile || "none"}</span>
+          </text>
+        </box>
+      </box>
+      <text>
+        <span fg={props.modeColor}>{edge.slice(0, 1)}</span>
+        <span fg={theme.panel}>{edge.slice(1)}</span>
+      </text>
+    </box>
+  )
+}
+
+const BRAILLE = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+const BAR_CELLS = 8
+const TRAIL = [theme.accent, "#3a78c2", "#27507f"]
+
+/** Animates on its own timer so only the spinner re-renders. `bar` is a sweeping dot bar, `dots` a braille spinner. */
+export function Spinner({ kind = "bar", color = theme.warn }: { kind?: "bar" | "dots"; color?: string }) {
+  const [frame, setFrame] = useState(0)
+  useEffect(() => {
+    const timer = setInterval(() => setFrame((f) => f + 1), kind === "bar" ? 90 : 80)
+    return () => clearInterval(timer)
+  }, [kind])
+  if (kind === "dots") return <text fg={color}>{BRAILLE[frame % BRAILLE.length]}</text>
+  const period = BAR_CELLS * 2 - 2
+  const p = frame % period
+  const head = p < BAR_CELLS ? p : period - p
+  const behind = p < BAR_CELLS ? -1 : 1
+  return (
+    <text>
+      {Array.from({ length: BAR_CELLS }, (_, i) => {
+        const age = (i - head) * behind
+        const lit = age >= 0 && age < TRAIL.length
+        return (
+          <span key={i} fg={lit ? TRAIL[age] : theme.faint}>
+            {lit ? "■" : "·"}
+          </span>
+        )
+      })}
+    </text>
+  )
+}
+
+export type Hint = { key: string; label: string; onPress?: () => void }
+
+export function Hints({ width, items, left }: { width: number; items: Hint[]; left?: ReactNode }) {
+  return (
+    <box style={{ width, height: 1, flexShrink: 0, flexDirection: "row", justifyContent: "space-between" }}>
+      <box style={{ flexDirection: "row" }}>{left}</box>
+      <box style={{ flexDirection: "row" }}>
+        {items.map((item, i) => (
+          <text key={`${item.key}-${item.label}`} onMouseDown={item.onPress}>
+            <span fg={theme.text}>{`${i ? "  " : ""}${item.key}`}</span>
+            <span fg={item.onPress ? theme.muted : theme.faint}>{item.label ? ` ${item.label}` : ""}</span>
+          </text>
+        ))}
+      </box>
+    </box>
+  )
+}
+
+export type Choice = { id: string; label: string }
+
+export type ChoicePanelProps = {
+  width: number
+  title: string
+  detail: string
+  color: string
+  options: Choice[]
+  selected: number
+  onChoose: (id: string) => void
+  onHover: (index: number) => void
+  /** One option per line, for many or long options. */
+  vertical?: boolean
+}
+
+/** Question with buttons, as the agent runtime shows for permissions: arrows or tab move, enter confirms, click works too. */
+export function ChoicePanel(props: ChoicePanelProps) {
+  const edge = `╹${"▀".repeat(Math.max(0, props.width - 1))}`
+  return (
+    <box style={{ flexDirection: "column", width: props.width, flexShrink: 0 }}>
+      <box
+        border={["left"]}
+        borderColor={props.color}
+        customBorderChars={BAR}
+        style={{
+          flexDirection: "column",
+          backgroundColor: theme.panel,
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          width: props.width,
+        }}
+      >
+        <text>
+          <span fg={props.color}>{"△ "}</span>
+          <span fg={theme.text}>{props.title}</span>
+        </text>
+        {props.detail ? <text fg={theme.muted}>{`  ${props.detail}`}</text> : null}
+        <box style={{ flexDirection: props.vertical ? "column" : "row", justifyContent: "space-between", marginTop: 1 }}>
+          <box style={{ flexDirection: props.vertical ? "column" : "row", alignItems: "flex-start" }}>
+            {props.options.map((option, i) => {
+              const active = i === props.selected
+              return (
+                <box
+                  key={option.id}
+                  onMouseDown={() => props.onChoose(option.id)}
+                  onMouseOver={() => props.onHover(i)}
+                  style={{ paddingLeft: 1, paddingRight: 1, marginRight: 1, backgroundColor: active ? props.color : theme.button }}
+                >
+                  <text fg={active ? theme.onButton : theme.muted}>{option.label}</text>
+                </box>
+              )
+            })}
+          </box>
+          <text style={{ marginTop: props.vertical ? 1 : 0 }}>
+            <span fg={theme.text}>{props.vertical ? "↑↓" : "⇆"}</span>
+            <span fg={theme.muted}>{" select  "}</span>
+            <span fg={theme.text}>{"enter"}</span>
+            <span fg={theme.muted}>{" confirm  "}</span>
+            <span fg={theme.text}>{"esc"}</span>
+            <span fg={theme.muted}>{" cancel"}</span>
+          </text>
+        </box>
+      </box>
+      <text>
+        <span fg={props.color}>{edge.slice(0, 1)}</span>
+        <span fg={theme.panel}>{edge.slice(1)}</span>
+      </text>
+    </box>
+  )
+}
+
+export function Footer({ left, right, width }: { left: string; right: string; width: number }) {
+  const room = Math.max(8, width - right.length - 8)
+  const shown = left.length <= room ? left : `…${left.slice(left.length - room + 1)}`
+  return (
+    <box
+      style={{ flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, height: 1, flexShrink: 0 }}
+    >
+      <text fg={theme.muted}>{shown}</text>
+      <text fg={theme.muted}>{right}</text>
+    </box>
+  )
+}

package/src/tui/dialogs.ts

@@ -0,0 +1,65 @@
+import type { AskQuestion } from "../mcp/tools.ts"
+import type { Choice } from "./components.tsx"
+import { theme } from "./theme.ts"
+
+/** The choice dialogs: stop, quit, wait for the user, and the agent's questions. */
+
+export type Dialog = "stop" | "quit" | "wait" | "ask"
+
+export function dialogSpec(
+  dialog: Dialog,
+  running: boolean,
+  outDir: string,
+  agent = false,
+  waitText = "",
+  ask?: AskQuestion,
+): { title: string; detail: string; color: string; options: Choice[] } {
+  if (dialog === "ask" && ask) {
+    return { title: ask.title, detail: ask.detail || "", color: theme.accent, options: ask.options.map((o) => ({ id: `ask:${o.id}`, label: o.label })) }
+  }
+  if (dialog === "wait") {
+    return {
+      title: "Your turn",
+      detail: waitText,
+      color: theme.accent,
+      options: [
+        { id: "wait-done", label: "Done, continue" },
+        { id: "wait-cancel", label: "Cancel" },
+      ],
+    }
+  }
+  if (dialog === "stop") {
+    return {
+      title: agent ? "Stop ForgeQE's agent?" : "Stop the running agent?",
+      detail: agent
+        ? "Any browser run stops after its current action and keeps its steps. Files the agent already changed stay."
+        : "The browser stops after the current action. Steps recorded so far are still saved.",
+      color: theme.warn,
+      options: [
+        { id: "stop", label: "Stop run" },
+        { id: "stop-close", label: "Stop and close ForgeQE" },
+        { id: "cancel", label: "Keep running" },
+      ],
+    }
+  }
+  if (running) {
+    return {
+      title: "Close ForgeQE?",
+      detail: "A run is in progress. It stops first and its files are saved.",
+      color: theme.err,
+      options: [
+        { id: "stop-close", label: "Stop and close" },
+        { id: "cancel", label: "Cancel" },
+      ],
+    }
+  }
+  return {
+    title: "Close ForgeQE?",
+    detail: `Runs are saved in ${outDir}/. Press ctrl+c again to close straight away.`,
+    color: theme.err,
+    options: [
+      { id: "close", label: "Close" },
+      { id: "cancel", label: "Cancel" },
+    ],
+  }
+}

package/src/tui/main.tsx

@@ -0,0 +1,20 @@
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+
+import { App, type TuiOptions } from "./App.tsx"
+
+export async function startTui(options: TuiOptions): Promise<void> {
+  // Ctrl-C opens the close prompt; a second Ctrl-C quits.
+  const renderer = await createCliRenderer({ exitOnCtrlC: false })
+  await new Promise<void>((resolve, reject) => {
+    renderer.on("destroy", () => resolve())
+    try {
+      createRoot(renderer).render(<App options={options} />)
+    } catch (err) {
+      renderer.destroy()
+      reject(err)
+    }
+  })
+}
+
+export type { TuiOptions }

package/src/tui/text.ts

@@ -0,0 +1,28 @@
+import type { AppConfig } from "../config.ts"
+
+/** Short text for the shell: clipped lines, the model label, hosts, and the activity line from engine logs. */
+
+export function clip(text: string, n = 72): string {
+  const s = text.replace(/\s+/g, " ").trim()
+  return s.length <= n ? s : `${s.slice(0, n - 1)}…`
+}
+
+export function modelLabel(cfg: AppConfig): string {
+  if (cfg.llm.provider === "none") return "none set up"
+  if (cfg.llm.provider === "mock") return "offline"
+  return `${cfg.llm.provider}/${cfg.llm.deployment || cfg.llm.model}`
+}
+
+export function hostOf(url: string): string {
+  try {
+    return new URL(url.includes("://") ? url : `https://${url}`).hostname
+  } catch {
+    return url
+  }
+}
+
+export function activityFromLog(text: string): string {
+  if (text.startsWith("$ ") || /^Setting up the ForgeQE engine/.test(text)) return "Installing the ForgeQE engine (one time)…"
+  if (text.startsWith("ForgeQE engine ·")) return "Starting the browser…"
+  return clip(text, 70)
+}

package/src/tui/theme.ts

@@ -0,0 +1,104 @@
+import { readFileSync } from "node:fs"
+import os from "node:os"
+import path from "node:path"
+
+export const theme = {
+  accent: "#4ea1ff",
+  panel: "#161b22",
+  text: "#e6edf3",
+  muted: "#8b949e",
+  faint: "#6e7681",
+  ok: "#9ece6a",
+  warn: "#e0af68",
+  err: "#f7768e",
+  thought: "#a5b4fc",
+  memory: "#c792ea",
+  button: "#21262d",
+  onButton: "#0d1117",
+}
+
+/** 950 → "950", 47_100 → "47.1K", 2_300_000 → "2.3M". */
+export function formatTokens(n: number): string {
+  if (n < 1000) return String(n)
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}K`
+  return `${(n / 1_000_000).toFixed(1)}M`
+}
+
+/** Whole seconds for clocks; `precise` keeps one decimal under 10s for per-step timings. */
+export function formatDuration(ms: number, precise = false): string {
+  const s = Math.max(0, ms) / 1000
+  if (precise && s < 10) return `${s.toFixed(1)}s`
+  if (s < 60) return `${Math.floor(s)}s`
+  const m = Math.floor(s / 60)
+  return `${m}m ${String(Math.floor(s % 60)).padStart(2, "0")}s`
+}
+
+/** Four rows: ascenders, then a three-row x-height. Capitals use all four. */
+const GLYPHS: Record<string, [string, string, string, string]> = {
+  w: ["     ", "█   █", "█ █ █", "▀▀▀▀▀"],
+  e: ["    ", "█▀▀█", "█▀▀▀", "▀▀▀▀"],
+  b: ["▄   ", "█▀▀█", "█  █", "▀▀▀▀"],
+  p: ["    ", "█▀▀█", "█  █", "█▀▀▀"],
+  i: [" ", "▀", "█", "▀"],
+  l: ["▄", "█", "█", "▀"],
+  o: ["    ", "█▀▀█", "█  █", "▀▀▀▀"],
+  t: [" ▄  ", "▀█▀▀", " █  ", " ▀▀▀"],
+  r: ["   ", "█▀▀", "█  ", "▀  "],
+  c: ["    ", "█▀▀▀", "█   ", "▀▀▀▀"],
+  h: ["▄   ", "█▀▀█", "█  █", "▀  ▀"],
+  s: ["    ", "█▀▀▀", "▀▀▀█", "▀▀▀▀"],
+  a: ["    ", "▀▀▀█", "█▀▀█", "▀▀▀▀"],
+  f: [" ▄▀", "▀█▀", " █ ", " ▀ "],
+  g: ["    ", "█▀▀█", "█  █", "▀▀▀█"],
+  Q: ["█▀▀█ ", "█  █ ", "█  █ ", "▀▀▀█▄"],
+  E: ["█▀▀▀", "█▄▄ ", "█   ", "▀▀▀▀"],
+  ".": [" ", " ", " ", "▀"],
+}
+
+export function logoRows(word: string): string[] {
+  const rows = ["", "", "", ""]
+  const letters = [...word]
+  letters.forEach((ch, index) => {
+    const glyph = GLYPHS[ch] ?? GLYPHS[ch.toLowerCase()]
+    if (!glyph) return
+    for (let r = 0; r < 4; r++) rows[r] += (index ? " " : "") + glyph[r]
+  })
+  return rows
+}
+
+export const EXAMPLES = [
+  "Go to booking.com and search for hotels in Mumbai",
+  "Run SHOP-12 and SHOP-14 from Jira",
+  "Run the test cases in smoke.yaml, two browsers at once",
+  "Write a Playwright test for the last run",
+  "Add a GitHub Actions workflow that runs smoke.yaml on every PR",
+]
+
+export const TIPS = [
+  "Just say what you want; ForgeQE works out whether it's a goal, test cases, a test, or a pipeline",
+  "Press tab to switch LLM profile",
+  "Use /headed on to watch the agent drive Chrome",
+  "A passed run becomes a test in your repo's own language and framework",
+  "Set allowed_hosts in forgeqe.yaml to keep runs on one domain",
+  "Re-running a goal replays it from page memory, mostly without the LLM",
+  "Ask what page memory knows about a site to see its locators and confidence",
+]
+
+export function pick<T>(items: T[]): T {
+  return items[Math.floor(Math.random() * items.length)]
+}
+
+export function shortCwd(): string {
+  const cwd = process.cwd()
+  const home = os.homedir()
+  return cwd === home || cwd.startsWith(home + path.sep) ? `~${cwd.slice(home.length)}` : cwd
+}
+
+export function packageVersion(): string {
+  try {
+    const file = path.resolve(import.meta.dir, "..", "..", "package.json")
+    return String(JSON.parse(readFileSync(file, "utf8")).version || "")
+  } catch {
+    return ""
+  }
+}