@poncho-ai/cli 0.2.0

package/dist/run-interactive-ink-N4XIVCWV.js

@@ -0,0 +1,562 @@
+// src/run-interactive-ink.ts
+import { access, mkdir, readFile, writeFile } from "fs/promises";
+import { resolve } from "path";
+import { render } from "ink";
+import { createElement } from "react";
+import { parseAgentFile } from "@agentl/harness";
+
+// src/interactive-ink.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FAUX_TOOL_LOG_PATTERN = /Tool Used:|Tool Result:|\blist_skills\b|\bcreate_skill\b|\bedit_skill\b/i;
+var MAX_PERSISTED_LINES = 500;
+var MAX_PERSISTED_TIMELINE = 200;
+var formatDuration = (ms) => ms < 1e3 ? `${ms}ms` : `${(ms / 1e3).toFixed(1)}s`;
+var randomId = () => `${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+var colorForKind = (kind) => {
+  if (kind === "user") return "cyan";
+  if (kind === "assistant") return "green";
+  if (kind === "tool") return "yellow";
+  if (kind === "warning") return "magenta";
+  if (kind === "error") return "red";
+  return "gray";
+};
+var stringifyValue = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+var truncate = (value, maxLength) => value.length <= maxLength ? value : `${value.slice(0, Math.max(0, maxLength - 3))}...`;
+var compactPreview = (value, maxLength = 120) => truncate(stringifyValue(value).replace(/\s+/g, " "), maxLength);
+var withLimit = (items, max) => items.length <= max ? items : items.slice(items.length - max);
+var createInitialLines = () => [
+  {
+    id: randomId(),
+    kind: "meta",
+    text: "AgentL Interactive (Ink) - full screen mode",
+    turn: 0,
+    timestamp: Date.now()
+  },
+  {
+    id: randomId(),
+    kind: "meta",
+    text: "Enter to send | Shift+Enter newline | /help for commands",
+    turn: 0,
+    timestamp: Date.now()
+  }
+];
+var InteractiveInkApp = ({
+  harness,
+  params,
+  metadata,
+  initialSnapshot,
+  onPersist
+}) => {
+  const { exit } = useApp();
+  const [dimensions, setDimensions] = useState({
+    columns: process.stdout.columns ?? 120,
+    rows: process.stdout.rows ?? 40
+  });
+  const [input, setInput] = useState("");
+  const [lines, setLines] = useState(
+    initialSnapshot?.lines?.length ? initialSnapshot.lines : createInitialLines()
+  );
+  const [timeline, setTimeline] = useState(initialSnapshot?.timeline ?? []);
+  const [isRunning, setIsRunning] = useState(false);
+  const [streamingText, setStreamingText] = useState("");
+  const [showSidebar, setShowSidebar] = useState(true);
+  const [showToolPayloads, setShowToolPayloads] = useState(false);
+  const [notice, setNotice] = useState();
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [selectedTurnIdx, setSelectedTurnIdx] = useState(0);
+  const [toolState, setToolState] = useState({ state: "idle" });
+  const messagesRef = useRef(initialSnapshot?.messages ?? []);
+  const turnRef = useRef(initialSnapshot?.nextTurn ?? 1);
+  const lastPromptRef = useRef(initialSnapshot?.lastPrompt ?? "");
+  const persistTimer = useRef();
+  useEffect(() => {
+    const onResize = () => {
+      setDimensions({
+        columns: process.stdout.columns ?? 120,
+        rows: process.stdout.rows ?? 40
+      });
+    };
+    process.stdout.on("resize", onResize);
+    return () => {
+      process.stdout.off("resize", onResize);
+    };
+  }, []);
+  const persistSnapshot = useCallback(() => {
+    if (persistTimer.current) {
+      clearTimeout(persistTimer.current);
+    }
+    persistTimer.current = setTimeout(() => {
+      void onPersist({
+        messages: messagesRef.current,
+        lines: withLimit(lines, MAX_PERSISTED_LINES),
+        timeline: withLimit(timeline, MAX_PERSISTED_TIMELINE),
+        nextTurn: turnRef.current,
+        lastPrompt: lastPromptRef.current
+      }).catch(() => {
+      });
+    }, 60);
+  }, [lines, onPersist, timeline]);
+  const appendLine = useCallback((kind, text, turn) => {
+    setLines(
+      (previous) => withLimit(
+        [
+          ...previous,
+          {
+            id: randomId(),
+            kind,
+            text,
+            turn,
+            timestamp: Date.now()
+          }
+        ],
+        MAX_PERSISTED_LINES
+      )
+    );
+  }, []);
+  const runSlashCommand = useCallback(
+    (command) => {
+      const normalized = command.trim().toLowerCase();
+      if (normalized === "/help") {
+        appendLine(
+          "meta",
+          "commands> /help /clear /sidebar /tools /export /exit",
+          Math.max(1, turnRef.current - 1)
+        );
+        return;
+      }
+      if (normalized === "/clear") {
+        setLines(createInitialLines());
+        setNotice({ kind: "meta", text: "Cleared scrollback." });
+        return;
+      }
+      if (normalized === "/sidebar") {
+        setShowSidebar((value) => !value);
+        return;
+      }
+      if (normalized === "/tools") {
+        setShowToolPayloads((value) => !value);
+        return;
+      }
+      if (normalized === "/export") {
+        appendLine("meta", "export> session is continuously saved to .agentl/interactive-session.json", 0);
+        return;
+      }
+      if (normalized === "/exit") {
+        exit();
+        return;
+      }
+      setNotice({ kind: "warning", text: `Unknown command: ${command}` });
+    },
+    [appendLine, exit]
+  );
+  const handleToolEvent = useCallback(
+    (event, turn) => {
+      if (event.type === "tool:started") {
+        const inputPreview2 = showToolPayloads ? compactPreview(event.input, 400) : compactPreview(event.input, 100);
+        setToolState({
+          tool: event.tool,
+          state: "started",
+          startedAt: Date.now(),
+          input: inputPreview2
+        });
+        appendLine("tool", `tools> start ${event.tool} input=${inputPreview2}`, turn);
+        return 1;
+      }
+      if (event.type === "tool:completed") {
+        const outputPreview = showToolPayloads ? compactPreview(event.output, 400) : compactPreview(event.output, 100);
+        setToolState((current) => ({
+          ...current,
+          tool: event.tool,
+          state: "completed",
+          durationMs: event.duration,
+          output: outputPreview
+        }));
+        appendLine("tool", `tools> done  ${event.tool} in ${formatDuration(event.duration)}`, turn);
+        if (showToolPayloads) {
+          appendLine("tool", `tools> output ${outputPreview}`, turn);
+        }
+        return 0;
+      }
+      if (event.type === "tool:error") {
+        setToolState((current) => ({
+          ...current,
+          tool: event.tool,
+          state: "error",
+          error: event.error
+        }));
+        appendLine("error", `tools> error ${event.tool}: ${event.error}`, turn);
+        setNotice({ kind: "error", text: `Tool error on ${event.tool}` });
+      }
+      if (event.type === "tool:approval:required") {
+        appendLine("warning", `tools> approval required for ${event.tool}`, turn);
+      }
+      if (event.type === "tool:approval:granted") {
+        appendLine("meta", `tools> approval granted (${event.approvalId})`, turn);
+      }
+      if (event.type === "tool:approval:denied") {
+        appendLine("warning", `tools> approval denied (${event.approvalId})`, turn);
+      }
+      return 0;
+    },
+    [appendLine, showToolPayloads]
+  );
+  const runTurn = useCallback(
+    async (task) => {
+      if (isRunning) {
+        return;
+      }
+      setIsRunning(true);
+      setStreamingText("");
+      const turn = turnRef.current;
+      turnRef.current = turn + 1;
+      const startedAt = Date.now();
+      setToolState({ state: "idle" });
+      setNotice(void 0);
+      lastPromptRef.current = task;
+      appendLine("meta", `--- turn ${turn} ---`, turn);
+      appendLine("user", `you> ${task}`, turn);
+      let responseText = "";
+      let streamedText = "";
+      let sawChunk = false;
+      let toolEvents = 0;
+      let runFailed = false;
+      let usage;
+      try {
+        for await (const event of harness.run({
+          task,
+          parameters: params,
+          messages: messagesRef.current
+        })) {
+          if (event.type === "model:chunk") {
+            sawChunk = true;
+            responseText += event.content;
+            streamedText += event.content;
+            setStreamingText(streamedText);
+          } else if (event.type === "tool:started" || event.type === "tool:completed" || event.type === "tool:error" || event.type === "tool:approval:required" || event.type === "tool:approval:granted" || event.type === "tool:approval:denied") {
+            toolEvents += handleToolEvent(event, turn);
+          } else if (event.type === "run:error") {
+            runFailed = true;
+            appendLine("error", `error> ${event.error.message}`, turn);
+            setNotice({ kind: "error", text: event.error.message });
+          } else if (event.type === "model:response") {
+            usage = event.usage;
+          } else if (event.type === "run:completed" && !sawChunk) {
+            responseText = event.result.response ?? "";
+            setStreamingText(responseText);
+          }
+        }
+      } catch (error) {
+        runFailed = true;
+        appendLine(
+          "error",
+          `error> ${error instanceof Error ? error.message : "Unknown error"}`,
+          turn
+        );
+        setNotice({
+          kind: "error",
+          text: error instanceof Error ? error.message : "Unknown error"
+        });
+      } finally {
+        if (streamedText.length > 0 || responseText.length > 0) {
+          appendLine("assistant", `assistant> ${streamedText || responseText}`, turn);
+        } else {
+          appendLine("assistant", "assistant> (no response)", turn);
+        }
+        if (!runFailed && toolEvents === 0 && FAUX_TOOL_LOG_PATTERN.test(streamedText || responseText)) {
+          appendLine(
+            "warning",
+            "warning> assistant described tool execution but no real tool events occurred.",
+            turn
+          );
+          setNotice({
+            kind: "warning",
+            text: "Assistant described tool calls, but no real tool events occurred."
+          });
+        }
+        const durationMs = Date.now() - startedAt;
+        appendLine("meta", `meta> ${formatDuration(durationMs)} | tools: ${toolEvents}`, turn);
+        setTimeline(
+          (previous) => withLimit(
+            [
+              ...previous,
+              {
+                turn,
+                durationMs,
+                toolEvents,
+                status: runFailed ? "error" : "ok",
+                usage
+              }
+            ],
+            MAX_PERSISTED_TIMELINE
+          )
+        );
+        setSelectedTurnIdx(Math.max(0, timeline.length));
+        messagesRef.current = [
+          ...messagesRef.current,
+          { role: "user", content: task },
+          { role: "assistant", content: streamedText || responseText }
+        ];
+        setStreamingText("");
+        setIsRunning(false);
+        persistSnapshot();
+      }
+    },
+    [appendLine, handleToolEvent, harness, isRunning, params, persistSnapshot, timeline.length]
+  );
+  useEffect(
+    () => () => {
+      if (persistTimer.current) {
+        clearTimeout(persistTimer.current);
+      }
+    },
+    []
+  );
+  useInput((value, key) => {
+    if (key.ctrl && key.c) {
+      exit();
+      return;
+    }
+    if (key.ctrl && value.toLowerCase() === "l") {
+      setLines(createInitialLines());
+      setNotice({ kind: "meta", text: "Cleared scrollback." });
+      persistSnapshot();
+      return;
+    }
+    if (key.ctrl && value.toLowerCase() === "r") {
+      if (lastPromptRef.current.trim().length > 0 && !isRunning) {
+        void runTurn(lastPromptRef.current);
+      }
+      return;
+    }
+    if (key.ctrl && value.toLowerCase() === "b") {
+      setShowSidebar((current) => !current);
+      return;
+    }
+    if (key.ctrl && value.toLowerCase() === "o") {
+      setShowToolPayloads((current) => !current);
+      return;
+    }
+    if (key.ctrl && value.toLowerCase() === "u") {
+      setScrollOffset((current) => Math.min(current + 5, 500));
+      return;
+    }
+    if (key.ctrl && value.toLowerCase() === "d") {
+      setScrollOffset((current) => Math.max(0, current - 5));
+      return;
+    }
+    if (key.upArrow) {
+      setSelectedTurnIdx((current) => Math.max(0, current - 1));
+      return;
+    }
+    if (key.downArrow) {
+      setSelectedTurnIdx((current) => Math.min(Math.max(0, timeline.length - 1), current + 1));
+      return;
+    }
+    if (key.tab) {
+      setShowSidebar((current) => !current);
+      return;
+    }
+    if (key.return) {
+      if (key.shift) {
+        setInput((previous) => `${previous}
+`);
+        return;
+      }
+      const task = input.trimEnd();
+      if (task.length === 0 || isRunning) {
+        return;
+      }
+      if (task.toLowerCase() === "exit") {
+        exit();
+        return;
+      }
+      if (task.startsWith("/")) {
+        setInput("");
+        runSlashCommand(task);
+        persistSnapshot();
+        return;
+      }
+      setInput("");
+      setScrollOffset(0);
+      void runTurn(task);
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setInput((previous) => previous.slice(0, -1));
+      return;
+    }
+    if (!key.ctrl && !key.meta && value.length > 0) {
+      setInput((previous) => previous + value);
+    }
+  });
+  const { columns, rows } = dimensions;
+  const headerText = `agent: ${metadata.agentName} | provider: ${metadata.provider} | model: ${metadata.model} | env: ${metadata.environment}`;
+  const activeTimeline = timeline[selectedTurnIdx];
+  const timelineLabel = activeTimeline ? `turn ${activeTimeline.turn} ${activeTimeline.status} ${formatDuration(activeTimeline.durationMs)} tools:${activeTimeline.toolEvents}` : "turn timeline: no turns yet";
+  const inputLines = input.split("\n");
+  const inputHeight = Math.max(3, Math.min(6, inputLines.length + 1));
+  const statusHeight = 2;
+  const bodyHeight = Math.max(10, rows - inputHeight - statusHeight - 4);
+  const sidebarWidth = showSidebar ? Math.max(32, Math.floor(columns * 0.33)) : 0;
+  const contentLines = useMemo(() => {
+    const combined = [...lines];
+    if (streamingText.length > 0) {
+      combined.push({
+        id: "streaming",
+        kind: "assistant",
+        text: `assistant> ${streamingText}`,
+        turn: turnRef.current,
+        timestamp: Date.now()
+      });
+    }
+    return combined;
+  }, [lines, streamingText]);
+  const visibleCapacity = Math.max(6, bodyHeight - 2);
+  const visibleLines = useMemo(() => {
+    const endIndex = Math.max(0, contentLines.length - scrollOffset);
+    const startIndex = Math.max(0, endIndex - visibleCapacity);
+    return contentLines.slice(startIndex, endIndex);
+  }, [contentLines, scrollOffset, visibleCapacity]);
+  const runStateText = useMemo(() => {
+    if (isRunning && streamingText.length === 0 && toolState.state !== "started") {
+      return "assistant thinking...";
+    }
+    if (isRunning && streamingText.length > 0) {
+      return "assistant streaming...";
+    }
+    if (isRunning && toolState.state === "started") {
+      return `running tool: ${toolState.tool ?? "unknown"}`;
+    }
+    return "ready";
+  }, [isRunning, streamingText, toolState.state, toolState.tool]);
+  const inputPreview = inputLines.slice(-inputHeight).join("\n");
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: "cyan", children: truncate(headerText, Math.max(30, columns - 4)) }) }),
+    /* @__PURE__ */ jsxs(Box, { height: bodyHeight, flexDirection: "row", children: [
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, children: [
+        /* @__PURE__ */ jsx(Text, { color: "gray", children: scrollOffset > 0 ? `scrollback: showing older lines (${scrollOffset} from latest)` : "scrollback: live" }),
+        visibleLines.map((line) => /* @__PURE__ */ jsx(Text, { color: colorForKind(line.kind), children: line.text }, line.id))
+      ] }),
+      showSidebar ? /* @__PURE__ */ jsxs(Box, { width: sidebarWidth, flexDirection: "column", paddingLeft: 1, children: [
+        /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Status" }),
+        /* @__PURE__ */ jsxs(Text, { children: [
+          "state: ",
+          isRunning ? "running" : "idle"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { children: [
+          "cwd: ",
+          truncate(metadata.workingDir, Math.max(10, sidebarWidth - 8))
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { children: [
+          "tools panel: ",
+          showToolPayloads ? "verbose" : "compact"
+        ] }),
+        /* @__PURE__ */ jsx(Text, { children: timelineLabel }),
+        /* @__PURE__ */ jsxs(Text, { children: [
+          "last tool: ",
+          toolState.tool ?? "-"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { children: [
+          "tool state: ",
+          toolState.state
+        ] }),
+        toolState.durationMs !== void 0 ? /* @__PURE__ */ jsxs(Text, { children: [
+          "tool duration: ",
+          formatDuration(toolState.durationMs)
+        ] }) : null,
+        toolState.input ? /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          "input: ",
+          truncate(toolState.input, Math.max(20, sidebarWidth - 10))
+        ] }) : null,
+        toolState.output ? /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          "output: ",
+          truncate(toolState.output, Math.max(20, sidebarWidth - 11))
+        ] }) : null,
+        toolState.error ? /* @__PURE__ */ jsxs(Text, { color: "red", children: [
+          "error: ",
+          truncate(toolState.error, Math.max(20, sidebarWidth - 10))
+        ] }) : null,
+        /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Recent turns" }),
+        timeline.slice(-8).map((item, idx) => /* @__PURE__ */ jsx(Text, { color: idx === timeline.length - 1 ? "green" : "white", children: `#${item.turn} ${item.status} ${formatDuration(item.durationMs)} t:${item.toolEvents}` }, `${item.turn}`))
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Box, { height: inputHeight, paddingLeft: 1, children: /* @__PURE__ */ jsxs(Text, { color: "cyan", children: [
+      "you> ",
+      inputPreview
+    ] }) }),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Text, { color: notice ? colorForKind(notice.kind) : "gray", children: notice ? notice.text : runStateText }),
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: "Ctrl+L clear | Ctrl+R resend | Ctrl+B sidebar | Ctrl+O tool details | Ctrl+U/D scroll | Tab sidebar" })
+    ] })
+  ] });
+};
+
+// src/run-interactive-ink.ts
+var SESSION_PATH = [".agentl", "interactive-session.json"];
+var loadSessionSnapshot = async (workingDir) => {
+  const sessionPath = resolve(workingDir, ...SESSION_PATH);
+  try {
+    await access(sessionPath);
+    const content = await readFile(sessionPath, "utf8");
+    return JSON.parse(content);
+  } catch {
+    return void 0;
+  }
+};
+var persistSessionSnapshot = async (workingDir, snapshot) => {
+  const sessionPath = resolve(workingDir, ...SESSION_PATH);
+  await mkdir(resolve(workingDir, ".agentl"), { recursive: true });
+  await writeFile(sessionPath, JSON.stringify(snapshot), "utf8");
+};
+var loadMetadata = async (workingDir) => {
+  let agentName = "agent";
+  let model = "unknown";
+  let provider = "unknown";
+  try {
+    const parsedAgent = await parseAgentFile(workingDir);
+    agentName = parsedAgent.frontmatter.name ?? agentName;
+    model = parsedAgent.frontmatter.model?.name ?? model;
+    provider = parsedAgent.frontmatter.model?.provider ?? provider;
+  } catch {
+  }
+  return {
+    agentName,
+    model,
+    provider,
+    workingDir,
+    environment: process.env.AGENTL_ENV ?? process.env.NODE_ENV ?? "development"
+  };
+};
+var runInteractiveInk = async ({
+  harness,
+  params,
+  workingDir
+}) => {
+  const [sessionSnapshot, metadata] = await Promise.all([
+    loadSessionSnapshot(workingDir),
+    loadMetadata(workingDir)
+  ]);
+  const app = render(
+    createElement(InteractiveInkApp, {
+      harness,
+      params,
+      metadata,
+      initialSnapshot: sessionSnapshot,
+      onPersist: async (snapshot) => {
+        await persistSessionSnapshot(workingDir, snapshot);
+      }
+    })
+  );
+  await app.waitUntilExit();
+};
+export {
+  runInteractiveInk
+};