tinker-agent 1.0.65

package/src/tui/components/context-status.tsx

@@ -0,0 +1,127 @@
+import { Box, Text } from "ink";
+import type { TuiProjectionState } from "../event-store";
+import { formatContextUsageLine, formatTokenCount } from "../context-format";
+
+export function ContextStatus(props: { state: TuiProjectionState }) {
+  const usage = props.state.contextUsage;
+  const profile = props.state.contextProfile;
+  const budget = props.state.contextBudget;
+
+  return (
+    <Box flexDirection="column">
+      <Text bold>Session</Text>
+      <Text> id: {props.state.sessionId}</Text>
+      <Text> model: {props.state.modelName}</Text>
+      <Text> workspace: {props.state.workspaceRoot}</Text>
+      <Text> </Text>
+      <Text bold>Context</Text>
+      {usage === undefined || profile === undefined || budget === undefined ? (
+        <Text color="yellow"> measurement unavailable</Text>
+      ) : (
+        <>
+          <Text> used: {formatContextUsageLine(usage).slice("context ".length)}</Text>
+          <Text> pressure: {usage.pressure}</Text>
+          <Text>
+            {" trigger: "}
+            {formatTokenCount(usage.triggerTokens)} ({usage.triggerRatio * 100}%)
+          </Text>
+          <Text> model window: {formatTokenCount(profile.contextWindowTokens)}</Text>
+          <Text>
+            {" request max output: "}
+            {formatTokenCount(usage.requestMaxOutputTokens)}
+          </Text>
+          <Text>
+            {" model max output: "}
+            {formatTokenCount(profile.maxSupportedOutputTokens)}
+          </Text>
+          <Text> </Text>
+          <Text bold>Measurement</Text>
+          <Text> source: {formatSource(usage.source)}</Text>
+          {usage.source === "estimated_full" ||
+          usage.lastProviderUsage === undefined ? (
+            <>
+              <Text> provider anchor: not available</Text>
+              {usage.rawFullEstimate === undefined ? null : (
+                <>
+                  <Text>
+                    {" raw full: "}
+                    {formatTokenCount(usage.rawFullEstimate.totalTokens)}
+                  </Text>
+                  <Text>
+                    {" breakdown: kernel "}
+                    {formatTokenCount(usage.rawFullEstimate.kernelTokens)}, user{" "}
+                    {formatTokenCount(usage.rawFullEstimate.userTokens)}, assistant{" "}
+                    {formatTokenCount(usage.rawFullEstimate.assistantTokens)}, tool{" "}
+                    {formatTokenCount(usage.rawFullEstimate.toolTokens)}, schema{" "}
+                    {formatTokenCount(usage.rawFullEstimate.toolSchemaTokens)}, protocol{" "}
+                    {formatTokenCount(usage.rawFullEstimate.protocolTokens)}
+                  </Text>
+                </>
+              )}
+            </>
+          ) : (
+            <ProviderUsage usage={usage.lastProviderUsage} />
+          )}
+          <Text> </Text>
+          <Text bold>Estimator</Text>
+          <Text> correction factor: {formatFactor(usage.correctionFactor)}</Text>
+          <Text> samples: {usage.calibrationSampleCount}/8</Text>
+          {usage.rawDeltaTokens === undefined ? null : (
+            <Text> raw pending delta: {formatTokenCount(usage.rawDeltaTokens)}</Text>
+          )}
+          {usage.guardedDeltaTokens === undefined ? null : (
+            <Text>
+              {" guarded pending delta: "}
+              {formatTokenCount(usage.guardedDeltaTokens)}
+            </Text>
+          )}
+          <Text> prefix: sha256:{shortHash(usage.prefixHash)}</Text>
+        </>
+      )}
+    </Box>
+  );
+}
+
+function ProviderUsage(props: {
+  usage: NonNullable<TuiProjectionState["contextUsage"]>["lastProviderUsage"];
+}) {
+  const usage = props.usage;
+  if (usage === undefined) {
+    return null;
+  }
+  return (
+    <>
+      <Text> prompt: {formatTokenCount(usage.promptTokens)}</Text>
+      <Text> completion: {formatTokenCount(usage.completionTokens)}</Text>
+      <Text> total: {formatTokenCount(usage.totalTokens)}</Text>
+      {usage.promptCacheHitTokens === undefined ? null : (
+        <Text> cache hit: {formatTokenCount(usage.promptCacheHitTokens)}</Text>
+      )}
+      {usage.promptCacheMissTokens === undefined ? null : (
+        <Text> cache miss: {formatTokenCount(usage.promptCacheMissTokens)}</Text>
+      )}
+      {usage.reasoningTokens === undefined ? null : (
+        <Text> reasoning: {formatTokenCount(usage.reasoningTokens)}</Text>
+      )}
+    </>
+  );
+}
+
+function formatSource(
+  source: NonNullable<TuiProjectionState["contextUsage"]>["source"],
+): string {
+  if (source === "provider_measured") {
+    return "provider measured";
+  }
+  return source === "measured_plus_estimated_delta"
+    ? "measured + estimated delta"
+    : "full estimated";
+}
+
+function formatFactor(value: number): string {
+  return value.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+}
+
+function shortHash(value: string): string {
+  return `${value.slice(0, 12)}${value.length > 12 ? "..." : ""}`;
+}

package/src/tui/components/diff-view.tsx

@@ -0,0 +1,151 @@
+import { Box, Text } from "ink";
+import type { DiffHunk } from "../../tools/types";
+
+export type DiffViewProps = {
+  hunks: DiffHunk[];
+  truncated?: boolean;
+  maxLines?: number;
+};
+
+const DEFAULT_MAX_LINES = 20;
+
+type DiffRow =
+  | {
+      kind: "add" | "remove" | "context";
+      lineNumber: number;
+      text: string;
+    }
+  | { kind: "separator" };
+
+export function DiffView(props: DiffViewProps) {
+  const maxLines = props.maxLines ?? DEFAULT_MAX_LINES;
+  const rows = diffRows(props.hunks);
+  const contentRowCount = rows.filter((row) => row.kind !== "separator").length;
+  const visibleRows = takeContentRows(rows, maxLines);
+  const hiddenLines = contentRowCount - maxLines;
+  const gutterWidth = gutterWidthFor(props.hunks);
+
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      {visibleRows.map((row, index) => renderDiffRow(row, index, gutterWidth))}
+      {hiddenLines > 0 ? (
+        <Text color="gray">
+          {" ".repeat(gutterWidth)} … +{hiddenLines} more line
+          {hiddenLines === 1 ? "" : "s"}
+        </Text>
+      ) : null}
+      {props.truncated === true && hiddenLines <= 0 ? (
+        <Text color="gray">{" ".repeat(gutterWidth)} … diff truncated</Text>
+      ) : null}
+    </Box>
+  );
+}
+
+function diffRows(hunks: DiffHunk[]): DiffRow[] {
+  const rows: DiffRow[] = [];
+
+  hunks.forEach((hunk, hunkIndex) => {
+    if (hunkIndex > 0) {
+      rows.push({ kind: "separator" });
+    }
+
+    let oldLine = hunk.oldStart;
+    let newLine = hunk.newStart;
+
+    for (const line of hunk.lines) {
+      const text = expandTabs(line.slice(1));
+
+      if (line.startsWith("+")) {
+        rows.push({ kind: "add", lineNumber: newLine, text });
+        newLine += 1;
+      } else if (line.startsWith("-")) {
+        rows.push({ kind: "remove", lineNumber: oldLine, text });
+        oldLine += 1;
+      } else {
+        rows.push({ kind: "context", lineNumber: newLine, text });
+        oldLine += 1;
+        newLine += 1;
+      }
+    }
+  });
+
+  return rows;
+}
+
+function takeContentRows(rows: DiffRow[], maxLines: number): DiffRow[] {
+  const visible: DiffRow[] = [];
+  let shown = 0;
+
+  for (const row of rows) {
+    if (row.kind === "separator") {
+      visible.push(row);
+      continue;
+    }
+
+    if (shown >= maxLines) {
+      break;
+    }
+
+    visible.push(row);
+    shown += 1;
+  }
+
+  while (visible.length > 0 && visible[visible.length - 1]?.kind === "separator") {
+    visible.pop();
+  }
+
+  return visible;
+}
+
+function renderDiffRow(row: DiffRow, index: number, gutterWidth: number) {
+  if (row.kind === "separator") {
+    return (
+      <Text key={index} color="gray">
+        {" ".repeat(gutterWidth)} ···
+      </Text>
+    );
+  }
+
+  const gutter = String(row.lineNumber).padStart(gutterWidth);
+  const sign = row.kind === "add" ? "+" : row.kind === "remove" ? "-" : " ";
+  const color = colorForRow(row.kind);
+
+  return (
+    <Text key={index} wrap="truncate-end">
+      <Text color="gray">{gutter} </Text>
+      <Text color={color}>
+        {sign} {row.text}
+      </Text>
+    </Text>
+  );
+}
+
+function colorForRow(kind: "add" | "remove" | "context"): string {
+  if (kind === "add") {
+    return "green";
+  }
+
+  if (kind === "remove") {
+    return "red";
+  }
+
+  return "gray";
+}
+
+function gutterWidthFor(hunks: DiffHunk[]): number {
+  let maxLineNumber = 1;
+
+  for (const hunk of hunks) {
+    maxLineNumber = Math.max(
+      maxLineNumber,
+      hunk.oldStart + hunk.oldLines,
+      hunk.newStart + hunk.newLines,
+    );
+  }
+
+  return String(maxLineNumber).length;
+}
+
+function expandTabs(text: string): string {
+  return text.replaceAll("\t", "  ");
+}

package/src/tui/components/file-viewer.tsx

@@ -0,0 +1,212 @@
+import { Box, Text, useInput, useStdout, useWindowSize } from "ink";
+import { useEffect, useMemo, useState } from "react";
+import type { ViewFile } from "../view-file";
+
+const VIEWER_CHROME_ROWS = 3;
+const HORIZONTAL_SCROLL_COLUMNS = 8;
+const MOUSE_SCROLL_LINES = 3;
+const ENABLE_MOUSE = "\u001b[?1000h\u001b[?1006h";
+const DISABLE_MOUSE = "\u001b[?1006l\u001b[?1000l";
+
+export type FileViewerProps = {
+  file: ViewFile;
+  onClose: () => void;
+  viewportRows?: number;
+  viewportColumns?: number;
+};
+
+export function FileViewer(props: FileViewerProps) {
+  const windowSize = useWindowSize();
+  const { stdout } = useStdout();
+  const rows = Math.max(4, props.viewportRows ?? windowSize.rows);
+  const columns = Math.max(20, props.viewportColumns ?? windowSize.columns);
+  const bodyRows = Math.max(1, rows - VIEWER_CHROME_ROWS);
+  const normalizedLines = useMemo(
+    () => props.file.lines.map((line) => line.replaceAll("\t", "    ")),
+    [props.file.lines],
+  );
+  const totalLines = normalizedLines.length;
+  const lineNumberWidth = String(Math.max(1, totalLines)).length;
+  const contentWidth = Math.max(1, columns - lineNumberWidth - 3);
+  const maxLineWidth = useMemo(
+    () =>
+      normalizedLines.reduce(
+        (maximum, line) => Math.max(maximum, Bun.stringWidth(line)),
+        0,
+      ),
+    [normalizedLines],
+  );
+  const maxTopLine = Math.max(0, totalLines - bodyRows);
+  const maxHorizontalOffset = Math.max(0, maxLineWidth - contentWidth);
+  const [topLine, setTopLine] = useState(0);
+  const [horizontalOffset, setHorizontalOffset] = useState(0);
+  const visibleTopLine = clamp(topLine, 0, maxTopLine);
+  const visibleHorizontalOffset = clamp(horizontalOffset, 0, maxHorizontalOffset);
+  const visibleEnd = Math.min(totalLines, visibleTopLine + bodyRows);
+
+  useEffect(() => {
+    if (!stdout.isTTY) {
+      return;
+    }
+    stdout.write(ENABLE_MOUSE);
+    return () => {
+      stdout.write(DISABLE_MOUSE);
+    };
+  }, [stdout]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      props.onClose();
+      return;
+    }
+
+    const mouseDirection = parseMouseWheelInput(input);
+    if (mouseDirection !== 0) {
+      setTopLine((current) =>
+        clamp(current + mouseDirection * MOUSE_SCROLL_LINES, 0, maxTopLine),
+      );
+      return;
+    }
+
+    if (key.home) {
+      setTopLine(0);
+      return;
+    }
+    if (key.end) {
+      setTopLine(maxTopLine);
+      return;
+    }
+    if (key.pageUp || key.pageDown) {
+      const direction = key.pageUp ? -1 : 1;
+      setTopLine((current) => clamp(current + direction * bodyRows, 0, maxTopLine));
+      return;
+    }
+    if (key.leftArrow || key.rightArrow) {
+      const direction = key.leftArrow ? -1 : 1;
+      setHorizontalOffset((current) =>
+        clamp(current + direction * HORIZONTAL_SCROLL_COLUMNS, 0, maxHorizontalOffset),
+      );
+      return;
+    }
+
+    const verticalDirection =
+      key.upArrow || (input === "k" && !key.ctrl && !key.meta)
+        ? -1
+        : key.downArrow || (input === "j" && !key.ctrl && !key.meta)
+          ? 1
+          : 0;
+    if (verticalDirection !== 0) {
+      setTopLine((current) => clamp(current + verticalDirection, 0, maxTopLine));
+    }
+  });
+
+  return (
+    <Box width={columns} height={rows} flexDirection="column" overflow="hidden">
+      <Text bold wrap="truncate-middle">
+        View: {props.file.displayPath}
+      </Text>
+      <Text dimColor wrap="truncate-end">
+        ↑/↓ or j/k · PgUp/PgDn · Home/End · ←/→ · mouse wheel · Esc close
+      </Text>
+      <Box height={bodyRows} flexDirection="column" overflow="hidden">
+        {totalLines === 0 ? (
+          <Text dimColor>(empty file)</Text>
+        ) : (
+          normalizedLines.slice(visibleTopLine, visibleEnd).map((line, index) => {
+            const lineNumber = visibleTopLine + index + 1;
+            return (
+              <Box key={lineNumber} width={columns} overflow="hidden">
+                <Text
+                  dimColor
+                >{`${String(lineNumber).padStart(lineNumberWidth)} │ `}</Text>
+                <Text wrap="truncate-end">
+                  {sliceByColumns(line, visibleHorizontalOffset, contentWidth)}
+                </Text>
+              </Box>
+            );
+          })
+        )}
+      </Box>
+      <Text dimColor wrap="truncate-end">
+        {viewerStatus(visibleTopLine, visibleEnd, totalLines, visibleHorizontalOffset)}
+      </Text>
+    </Box>
+  );
+}
+
+export function FileViewerLoading(props: {
+  filePath: string;
+  onCancel: () => void;
+  viewportRows?: number;
+  viewportColumns?: number;
+}) {
+  const windowSize = useWindowSize();
+  const rows = Math.max(4, props.viewportRows ?? windowSize.rows);
+  const columns = Math.max(20, props.viewportColumns ?? windowSize.columns);
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      props.onCancel();
+    }
+  });
+
+  return (
+    <Box width={columns} height={rows} flexDirection="column" overflow="hidden">
+      <Text bold wrap="truncate-middle">
+        View: {props.filePath}
+      </Text>
+      <Text dimColor>Loading and validating UTF-8 text… · Esc cancel</Text>
+    </Box>
+  );
+}
+
+export function parseMouseWheelInput(input: string): -1 | 0 | 1 {
+  const normalized = input.startsWith("\u001b") ? input.slice(1) : input;
+  const match = /^\[<(\d+);\d+;\d+M$/.exec(normalized);
+  if (match === null) {
+    return 0;
+  }
+
+  const button = Number(match[1]);
+  if ((button & 64) === 0) {
+    return 0;
+  }
+  return (button & 1) === 0 ? -1 : 1;
+}
+
+function viewerStatus(
+  topLine: number,
+  endLine: number,
+  totalLines: number,
+  horizontalOffset: number,
+): string {
+  if (totalLines === 0) {
+    return "0 lines · 0 bytes";
+  }
+  const percentage = Math.floor((endLine / totalLines) * 100);
+  const horizontal = horizontalOffset === 0 ? "" : ` · column ${horizontalOffset + 1}`;
+  return `${topLine + 1}–${endLine} / ${totalLines} · ${percentage}%${horizontal}`;
+}
+
+function sliceByColumns(value: string, start: number, width: number): string {
+  let currentColumn = 0;
+  let result = "";
+
+  for (const character of value) {
+    const characterWidth = Bun.stringWidth(character);
+    const nextColumn = currentColumn + characterWidth;
+    if (nextColumn > start && currentColumn < start + width) {
+      result += character;
+    }
+    currentColumn = nextColumn;
+    if (currentColumn >= start + width) {
+      break;
+    }
+  }
+
+  return result;
+}
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  return Math.min(Math.max(value, minimum), maximum);
+}

package/src/tui/components/footer.tsx

@@ -0,0 +1,60 @@
+import { StatusMessage } from "@inkjs/ui";
+import { Text } from "ink";
+
+export type FooterProps = {
+  status: "idle" | "running" | "cancelling" | "cancelled" | "done" | "failed";
+  workedForMs?: number;
+};
+
+export function Footer(props: FooterProps) {
+  if (props.status === "done") {
+    if (props.workedForMs === undefined) {
+      throw new Error("Done footer requires workedForMs");
+    }
+
+    return (
+      <StatusMessage variant="success">
+        Worked for {formatWorkedDuration(props.workedForMs)}
+      </StatusMessage>
+    );
+  }
+
+  if (props.status === "failed") {
+    return <StatusMessage variant="error">failed</StatusMessage>;
+  }
+
+  if (props.status === "running") {
+    return <Text color="yellow">• Running</Text>;
+  }
+
+  if (props.status === "cancelling") {
+    return <StatusMessage variant="info">cancelling</StatusMessage>;
+  }
+
+  if (props.status === "cancelled") {
+    return <StatusMessage variant="info">cancelled</StatusMessage>;
+  }
+
+  return <StatusMessage variant="info">idle</StatusMessage>;
+}
+
+function formatWorkedDuration(durationMs: number): string {
+  if (!Number.isFinite(durationMs) || durationMs < 0) {
+    throw new Error(`Invalid worked duration: ${durationMs}`);
+  }
+
+  const totalSeconds = Math.floor(durationMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`;
+  }
+
+  if (minutes > 0) {
+    return `${minutes}m ${seconds}s`;
+  }
+
+  return `${seconds}s`;
+}

package/src/tui/components/header.tsx

@@ -0,0 +1,21 @@
+import path from "node:path";
+import { Box, Text } from "ink";
+import type { SessionId } from "../../ids/runtime-id";
+
+export type HeaderProps = {
+  modelName: string;
+  workspaceRoot: string;
+  sessionId: SessionId;
+};
+
+export function Header(props: HeaderProps) {
+  return (
+    <Box flexDirection="column">
+      <Text bold>Tinker</Text>
+      <Text color="gray">
+        model={props.modelName} workspace={path.basename(props.workspaceRoot)} session=
+        {props.sessionId}
+      </Text>
+    </Box>
+  );
+}