hoomanjs 1.17.3 → 1.18.0

package/README.md

@@ -284,7 +284,7 @@ This is the config shape loaded by Hooman:
     "behaviour": true,
     "communication": true,
     "execution": true,
-    "engineering": false,
+    "engineering": true,
     "guardrails": true
   },
   "tools": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoomanjs",
-  "version": "1.17.3",
+  "version": "1.18.0",
   "description": "Hackable Bun-powered AI agent toolkit for building local CLI, ACP, MCP, and channel-driven workflows.",
   "author": {
     "name": "Vaibhav Pandey",
@@ -70,8 +70,10 @@
     "handlebars": "^4.7.9",
     "ink": "^7.0.0",
     "ink-ansi": "^1.0.0",
+    "ink-scroll-view": "^0.3.6",
     "ink-select-input": "^6.2.0",
     "ink-text-input": "^6.0.0",
+    "ink-use-mouse": "^1.0.0",
     "jsdom": "^29.0.2",
     "lodash": "^4.18.1",
     "luxon": "^3.7.2",

package/src/acp/approvals.ts

@@ -4,7 +4,7 @@ import {
   INTERNAL_ALWAYS_ALLOWED,
   allowToolForSession,
   isToolSessionAllowed,
-} from "../core/approvals/allowed-tools.ts";
+} from "../core/state/tool-approvals.ts";
 import { inferToolKind, toolDisplayTitle } from "./utils/tool-kind.ts";
 import { toolCallLocationsFromInput } from "./utils/tool-locations.ts";
 

package/src/acp/utils/tool-kind.ts

@@ -1,6 +1,6 @@
 import type { ToolKind } from "@agentclientprotocol/sdk";
 import type { Tool } from "@strands-agents/sdk";
-import { INTERNAL_ALWAYS_ALLOWED } from "../../core/approvals/allowed-tools.ts";
+import { INTERNAL_ALWAYS_ALLOWED } from "../../core/state/tool-approvals.ts";
 
 const KNOWN_TOOL_KINDS = new Map<string, ToolKind>([
   ["read_file", "read"],

package/src/chat/app.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react";
 import fastq from "fastq";
-import { Box, useApp, useInput } from "ink";
+import { Box, useApp, useInput, useWindowSize } from "ink";
 import {
   BeforeToolCallEvent,
   Message,
@@ -17,6 +17,7 @@ import {
 } from "@strands-agents/sdk";
 import type { Manager as McpManager } from "../core/mcp/index.ts";
 import type { Registry } from "../core/skills/index.ts";
+import { takeFileToolDisplay } from "../core/state/file-tool-display.ts";
 import {
   ChatApprovalController,
   createChatApprovalHandler,
@@ -26,10 +27,11 @@ import { Composer } from "./components/Composer.tsx";
 import { QueuedPrompts } from "./components/QueuedPrompts.tsx";
 import { StatusBar } from "./components/StatusBar.tsx";
 import { TodoPanel } from "./components/TodoPanel.tsx";
-import { Transcript } from "./components/Transcript.tsx";
+import { TranscriptViewport } from "./components/TranscriptViewport.tsx";
 import type { ApprovalRequest, ChatLine } from "./types.ts";
-import { getTodoViewState, type TodoViewState } from "../core/tools/todo.ts";
+import { getTodoViewState, type TodoViewState } from "../core/state/todos.ts";
 import { attachmentPathsToPromptBlocks } from "../core/utils/attachments.ts";
+import { isMouseInput } from "./mouse.ts";
 import type { PromptSubmission } from "./components/prompt-input/hooks/usePromptInputController.ts";
 
 type ChatAppProps = {
@@ -121,6 +123,7 @@ export function ChatApp({
   onExit,
 }: ChatAppProps): React.JSX.Element {
   const { exit } = useApp();
+  const { rows } = useWindowSize();
   const totalTools =
     (agent as Agent & { tools?: unknown[] }).tools?.length ?? 0;
   const [input, setInput] = useState("");
@@ -141,6 +144,7 @@ export function ChatApp({
     useState<ApprovalRequest | null>(null);
   const [queuedPrompts, setQueuedPrompts] = useState<QueuedPrompt[]>([]);
   const [liveReasoning, setLiveReasoning] = useState("");
+  const [followRequest, setFollowRequest] = useState(0);
   const [todoState, setTodoState] = useState<TodoViewState>(() =>
     getTodoViewState(agent),
   );
@@ -342,6 +346,10 @@ export function ChatApp({
             case "toolResultEvent": {
               const resultContent = toToolResultText(e.result);
               const toolUseId = getToolUseId(e.result);
+              const fileToolDisplay = takeFileToolDisplay(
+                agent.appState,
+                toolUseId,
+              );
               let toolLineId = toolUseId
                 ? toolLineIdsRef.current.get(toolUseId)
                 : undefined;
@@ -365,6 +373,7 @@ export function ChatApp({
                   phase: "done",
                   done: true,
                   resultContent,
+                  fileToolDisplay,
                 });
               } else {
                 appendLine({
@@ -374,6 +383,7 @@ export function ChatApp({
                   toolName: "unknown",
                   content: "",
                   resultContent,
+                  fileToolDisplay,
                   phase: "done",
                   done: true,
                 });
@@ -524,6 +534,7 @@ export function ChatApp({
         return;
       }
       if (pushPrompt(value)) {
+        setFollowRequest((value) => value + 1);
         setInput("");
       }
     },
@@ -532,6 +543,9 @@ export function ChatApp({
 
   useInput(
     (inputKey, key) => {
+      if (isMouseInput(inputKey)) {
+        return;
+      }
       if (key.ctrl && inputKey.toLowerCase() === "c") {
         if (runningRef.current) {
           agent.cancel();
@@ -574,42 +588,49 @@ export function ChatApp({
       : status;
 
   return (
-    <Box flexDirection="column" width="100%" paddingX={1}>
-      <Transcript lines={lines} liveReasoning={liveReasoning} />
-      {running && todoState.visible && todoState.todos.length > 0 ? (
-        <TodoPanel todos={todoState.todos} />
-      ) : null}
-      <QueuedPrompts prompts={queuedPrompts} />
-
-      {pendingApproval ? (
-        <ApprovalPrompt
-          onDecision={(decision) => controllerRef.current.decide(decision)}
-        />
-      ) : null}
+    <Box flexDirection="column" width="100%" height={rows} paddingX={1}>
+      <TranscriptViewport
+        lines={lines}
+        liveReasoning={liveReasoning}
+        followRequest={followRequest}
+      />
 
-      {!pendingApproval ? (
-        <Composer
-          input={input}
+      <Box flexDirection="column" flexShrink={0}>
+        {running && todoState.visible && todoState.todos.length > 0 ? (
+          <TodoPanel todos={todoState.todos} />
+        ) : null}
+        <QueuedPrompts prompts={queuedPrompts} />
+
+        {pendingApproval ? (
+          <ApprovalPrompt
+            onDecision={(decision) => controllerRef.current.decide(decision)}
+          />
+        ) : null}
+
+        {!pendingApproval ? (
+          <Composer
+            input={input}
+            running={running}
+            disabled={Boolean(pendingApproval)}
+            hint={INPUT_HINT}
+            onChange={setInput}
+            onSubmit={onSubmit}
+          />
+        ) : null}
+
+        <StatusBar
           running={running}
-          disabled={Boolean(pendingApproval)}
-          hint={INPUT_HINT}
-          onChange={setInput}
-          onSubmit={onSubmit}
+          status={status}
+          statusLabel={statusLabel}
+          sessionId={sessionId}
+          elapsedLabel={elapsedLabel}
+          turnCount={turnCount}
+          totalTools={totalTools}
+          skillsFound={skillsFound}
+          manager={manager}
+          usage={usage}
         />
-      ) : null}
-
-      <StatusBar
-        running={running}
-        status={status}
-        statusLabel={statusLabel}
-        sessionId={sessionId}
-        elapsedLabel={elapsedLabel}
-        turnCount={turnCount}
-        totalTools={totalTools}
-        skillsFound={skillsFound}
-        manager={manager}
-        usage={usage}
-      />
+      </Box>
     </Box>
   );
 }

package/src/chat/approvals.ts

@@ -3,7 +3,7 @@ import {
   INTERNAL_ALWAYS_ALLOWED,
   allowToolForSession,
   isToolSessionAllowed,
-} from "../core/approvals/allowed-tools.ts";
+} from "../core/state/tool-approvals.ts";
 import type { ApprovalDecision, ApprovalRequest } from "./types.ts";
 const INPUT_PREVIEW_LIMIT = 256;
 

package/src/chat/components/TodoPanel.tsx

@@ -1,5 +1,5 @@
 import { Box, Text } from "ink";
-import type { TodoItem } from "../../core/tools/todo.ts";
+import type { TodoItem } from "../../core/state/todos.ts";
 
 type TodoPanelProps = {
   todos: TodoItem[];

package/src/chat/components/ToolEvent.tsx

@@ -1,13 +1,20 @@
 import { Box, Text } from "ink";
 import type { ChatLine } from "../types.ts";
+import { useFileToolResult } from "./file-tool-diff/file-tool-result.ts";
 import { compactInline, formatToolArgs } from "./shared.ts";
 import { Spinner } from "./Spinner.tsx";
+import { ToolEventFileResult } from "./ToolEventFileResult.tsx";
 
 type ToolEventProps = {
   line: ChatLine;
 };
 
 export function ToolEvent({ line }: ToolEventProps) {
+  const fileToolResult = useFileToolResult(line);
+  if (fileToolResult) {
+    return <ToolEventFileResult line={line} result={fileToolResult} />;
+  }
+
   const args = formatToolArgs(line.content)[0] ?? "";
   const result = line.resultContent
     ? compactInline(line.resultContent, 256)

package/src/chat/components/ToolEventFileResult.tsx

@@ -0,0 +1,116 @@
+import { Box, Text } from "ink";
+import type * as React from "react";
+import type { ChatLine } from "../types.ts";
+import { compactInline, truncLine } from "./shared.ts";
+import { Spinner } from "./Spinner.tsx";
+import {
+  type FileToolResult,
+  type StructuredPatchHunk,
+} from "./file-tool-diff/file-tool-result.ts";
+
+const MAX_PATCH_LINES = 18;
+const MAX_PATCH_WIDTH = 140;
+
+type ToolEventFileResultProps = {
+  line: ChatLine;
+  result: FileToolResult;
+};
+
+export function ToolEventFileResult({
+  line,
+  result,
+}: ToolEventFileResultProps): React.ReactNode {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color="yellow" bold>
+        Tool
+      </Text>
+      <Text>
+        <Text bold>{result.toolName}</Text>
+        <Text color="gray">: </Text>
+        <Text>{compactInline(result.path, 160)}</Text>
+      </Text>
+      {line.phase === "running" ? (
+        <Box flexDirection="row">
+          <Spinner type="dots" color="yellow" />
+          <Text color="gray"> running...</Text>
+        </Box>
+      ) : null}
+      {line.phase === "done" ? <FileToolSummary result={result} /> : null}
+      {result.structuredPatch.length > 0 ? (
+        <PatchPreview hunks={result.structuredPatch} />
+      ) : null}
+    </Box>
+  );
+}
+
+function FileToolSummary({ result }: { result: FileToolResult }) {
+  if (result.kind === "write") {
+    const operation = result.appended ? "Appended" : "Wrote";
+    return (
+      <Text color="gray">
+        {operation}
+        {result.bytesWritten === undefined
+          ? ""
+          : ` ${result.bytesWritten} bytes`}
+      </Text>
+    );
+  }
+
+  const mode = result.dryRun ? "Previewed" : "Applied";
+  const edits =
+    result.editsApplied === undefined
+      ? "edits"
+      : `${result.editsApplied} ${result.editsApplied === 1 ? "edit" : "edits"}`;
+  const changed =
+    result.changed === undefined
+      ? ""
+      : result.changed
+        ? " changed"
+        : " no changes";
+
+  return (
+    <Text color="gray">
+      {mode} {edits}
+      {changed}
+    </Text>
+  );
+}
+
+function PatchPreview({ hunks }: { hunks: StructuredPatchHunk[] }) {
+  const lines = hunks.flatMap((hunk, index) => [
+    ...(index > 0 ? ["..."] : []),
+    `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`,
+    ...hunk.lines,
+  ]);
+  const visibleLines = lines.slice(0, MAX_PATCH_LINES);
+  const hiddenLineCount = lines.length - visibleLines.length;
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {visibleLines.map((line, index) => (
+        <Text key={`${index}-${line}`} color={colorForPatchLine(line)}>
+          {truncLine(line, MAX_PATCH_WIDTH)}
+        </Text>
+      ))}
+      {hiddenLineCount > 0 ? (
+        <Text color="gray">
+          ... +{hiddenLineCount} {hiddenLineCount === 1 ? "line" : "lines"}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+function colorForPatchLine(line: string): string {
+  if (line.startsWith("+")) {
+    return "green";
+  }
+  if (line.startsWith("-")) {
+    return "red";
+  }
+  if (line.startsWith("@@") || line === "...") {
+    return "gray";
+  }
+  return "white";
+}

package/src/chat/components/TranscriptViewport.tsx

@@ -0,0 +1,170 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { Box, useInput, useStdin, useStdout } from "ink";
+import { ScrollView, type ScrollViewRef } from "ink-scroll-view";
+import type { ChatLine } from "../types.ts";
+import {
+  MOUSE_REPORTING_DISABLE,
+  MOUSE_REPORTING_ENABLE,
+  parseMouseEvents,
+} from "../mouse.ts";
+import { Transcript } from "./Transcript.tsx";
+
+type TranscriptViewportProps = {
+  lines: ChatLine[];
+  liveReasoning: string;
+  followRequest: number;
+};
+
+const WHEEL_LINES = 3;
+
+function isAtBottom(scroll: ScrollViewRef): boolean {
+  return scroll.getScrollOffset() >= scroll.getBottomOffset() - 1;
+}
+
+function clampScrollOffset(scroll: ScrollViewRef, offset: number): number {
+  return Math.max(0, Math.min(offset, scroll.getBottomOffset()));
+}
+
+export function TranscriptViewport({
+  lines,
+  liveReasoning,
+  followRequest,
+}: TranscriptViewportProps): React.JSX.Element {
+  const scrollRef = useRef<ScrollViewRef>(null);
+  const stickyRef = useRef(true);
+  const { stdout } = useStdout();
+  const { stdin, setRawMode } = useStdin();
+
+  const remeasure = useCallback(() => {
+    scrollRef.current?.remeasure();
+  }, []);
+
+  const followIfSticky = useCallback(() => {
+    if (!stickyRef.current) {
+      return;
+    }
+    scrollRef.current?.scrollToBottom();
+  }, []);
+
+  const scrollBy = useCallback((delta: number) => {
+    const scroll = scrollRef.current;
+    if (!scroll) {
+      return;
+    }
+    if (delta < 0) {
+      stickyRef.current = false;
+    }
+    scroll.scrollTo(
+      clampScrollOffset(scroll, scroll.getScrollOffset() + delta),
+    );
+    stickyRef.current = isAtBottom(scroll);
+  }, []);
+
+  const scrollToTop = useCallback(() => {
+    const scroll = scrollRef.current;
+    if (!scroll) {
+      return;
+    }
+    stickyRef.current = false;
+    scroll.scrollToTop();
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    const scroll = scrollRef.current;
+    if (!scroll) {
+      return;
+    }
+    stickyRef.current = true;
+    scroll.scrollToBottom();
+  }, []);
+
+  useEffect(() => {
+    stdout?.on("resize", remeasure);
+    return () => {
+      stdout?.off("resize", remeasure);
+    };
+  }, [remeasure, stdout]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      remeasure();
+      followIfSticky();
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [followIfSticky, lines, liveReasoning, remeasure]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [followRequest, scrollToBottom]);
+
+  useInput((_, key) => {
+    const scroll = scrollRef.current;
+    if (!scroll) {
+      return;
+    }
+    const page = Math.max(1, scroll.getViewportHeight() - 1);
+    if (key.pageUp) {
+      scrollBy(-page);
+      return;
+    }
+    if (key.pageDown) {
+      scrollBy(page);
+      return;
+    }
+    if ((key.ctrl || key.meta || key.super) && key.home) {
+      scrollToTop();
+      return;
+    }
+    if ((key.ctrl || key.meta || key.super) && key.end) {
+      scrollToBottom();
+    }
+  });
+
+  useEffect(() => {
+    if (!stdin) {
+      return;
+    }
+
+    const onData = (data: Buffer | string) => {
+      for (const event of parseMouseEvents(data.toString())) {
+        if (event.type === "scroll-up") {
+          scrollBy(-WHEEL_LINES);
+        } else if (event.type === "scroll-down") {
+          scrollBy(WHEEL_LINES);
+        }
+      }
+    };
+
+    setRawMode(true);
+    process.stdout.write(MOUSE_REPORTING_ENABLE);
+    stdin.on("data", onData);
+    return () => {
+      stdin.off("data", onData);
+      process.stdout.write(MOUSE_REPORTING_DISABLE);
+    };
+  }, [scrollBy, setRawMode, stdin]);
+
+  return (
+    <Box flexDirection="column" flexGrow={1} minHeight={1}>
+      <ScrollView
+        ref={scrollRef}
+        flexGrow={1}
+        width="100%"
+        onScroll={(offset) => {
+          const scroll = scrollRef.current;
+          if (scroll) {
+            stickyRef.current = offset >= scroll.getBottomOffset() - 1;
+          }
+        }}
+        onContentHeightChange={followIfSticky}
+        onViewportSizeChange={followIfSticky}
+      >
+        <Box key="transcript" flexDirection="column" width="100%">
+          <Transcript lines={lines} liveReasoning={liveReasoning} />
+        </Box>
+      </ScrollView>
+    </Box>
+  );
+}

package/src/chat/components/file-tool-diff/file-tool-result.ts

@@ -0,0 +1,155 @@
+import { useMemo } from "react";
+import type { ChatLine } from "../../types.ts";
+
+export type StructuredPatchHunk = {
+  oldStart: number;
+  oldLines: number;
+  newStart: number;
+  newLines: number;
+  lines: string[];
+};
+
+export type FileToolResult =
+  | {
+      kind: "write";
+      toolName: "write_file";
+      path: string;
+      appended: boolean;
+      bytesWritten?: number;
+      structuredPatch: StructuredPatchHunk[];
+    }
+  | {
+      kind: "edit";
+      toolName: "edit_file";
+      path: string;
+      dryRun: boolean;
+      editsApplied?: number;
+      changed?: boolean;
+      previews: string[];
+      structuredPatch: StructuredPatchHunk[];
+    };
+
+type WriteFileInput = {
+  path: string;
+  append?: boolean;
+};
+
+type WriteFileResult = {
+  path: string;
+  appended: boolean;
+  bytes_written: number;
+};
+
+type EditFileInput = {
+  path: string;
+  edits: Array<{
+    oldText: string;
+    newText: string;
+  }>;
+  dry_run?: boolean;
+};
+
+type EditFileResult = {
+  path: string;
+  dry_run: boolean;
+  edits_applied: number;
+  changed: boolean;
+};
+
+function parseJson<T>(raw: string | undefined): T | null {
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(raw) as T;
+  } catch {
+    return null;
+  }
+}
+
+export function useFileToolResult(line: ChatLine): FileToolResult | null {
+  return useMemo(
+    () =>
+      parseFileToolResult({
+        phase: line.phase,
+        toolName: line.toolName,
+        inputContent: line.content,
+        resultContent: line.resultContent,
+        structuredPatch: line.fileToolDisplay?.structuredPatch,
+        previews: line.fileToolDisplay?.previews,
+      }),
+    [
+      line.content,
+      line.fileToolDisplay?.previews,
+      line.fileToolDisplay?.structuredPatch,
+      line.phase,
+      line.resultContent,
+      line.toolName,
+    ],
+  );
+}
+
+function parseFileToolResult({
+  phase,
+  toolName,
+  inputContent,
+  resultContent,
+  previews,
+  structuredPatch,
+}: {
+  phase: ChatLine["phase"];
+  toolName: string | undefined;
+  inputContent: string;
+  resultContent?: string;
+  previews?: string[];
+  structuredPatch?: StructuredPatchHunk[];
+}): FileToolResult | null {
+  if (toolName === "write_file") {
+    const input = parseJson<WriteFileInput>(inputContent);
+    const result = parseJson<WriteFileResult>(resultContent);
+    if (phase === "done" && !result) {
+      return null;
+    }
+
+    const path = result?.path ?? input?.path;
+    if (!path) {
+      return null;
+    }
+
+    return {
+      kind: "write",
+      toolName,
+      path,
+      appended: result?.appended ?? input?.append ?? false,
+      bytesWritten: result?.bytes_written,
+      structuredPatch: structuredPatch ?? [],
+    };
+  }
+
+  if (toolName === "edit_file") {
+    const input = parseJson<EditFileInput>(inputContent);
+    const result = parseJson<EditFileResult>(resultContent);
+    if (phase === "done" && !result) {
+      return null;
+    }
+
+    const path = result?.path ?? input?.path;
+    if (!path) {
+      return null;
+    }
+
+    return {
+      kind: "edit",
+      toolName,
+      path,
+      dryRun: result?.dry_run ?? input?.dry_run ?? false,
+      editsApplied: result?.edits_applied ?? input?.edits?.length,
+      changed: result?.changed,
+      previews: previews ?? [],
+      structuredPatch: structuredPatch ?? [],
+    };
+  }
+
+  return null;
+}