tinker-agent 1.4.0 → 1.5.1

package/src/tui/components/footer.tsx

@@ -1,5 +1,4 @@
-import { StatusMessage } from "@inkjs/ui";
-import { Text } from "ink";
+import { Spinner, StatusMessage } from "@inkjs/ui";
 
 export type FooterProps = {
   status: "idle" | "running" | "cancelling" | "cancelled" | "done" | "failed";
@@ -14,7 +13,7 @@ export function Footer(props: FooterProps) {
 
     return (
       <StatusMessage variant="success">
-        Worked for {formatWorkedDuration(props.workedForMs)}
+        Worked for {formatDuration(props.workedForMs)}
       </StatusMessage>
     );
   }
@@ -24,7 +23,7 @@ export function Footer(props: FooterProps) {
   }
 
   if (props.status === "running") {
-    return <Text color="yellow">• Running</Text>;
+    return <Spinner label="Running" />;
   }
 
   if (props.status === "cancelling") {
@@ -38,9 +37,9 @@ export function Footer(props: FooterProps) {
   return <StatusMessage variant="info">idle</StatusMessage>;
 }
 
-function formatWorkedDuration(durationMs: number): string {
+function formatDuration(durationMs: number): string {
   if (!Number.isFinite(durationMs) || durationMs < 0) {
-    throw new Error(`Invalid worked duration: ${durationMs}`);
+    throw new Error(`Invalid duration: ${durationMs}`);
   }
 
   const totalSeconds = Math.floor(durationMs / 1000);

package/src/tui/components/memory-browser.tsx

@@ -0,0 +1,151 @@
+import {
+  Box,
+  Text,
+  useBoxMetrics,
+  useInput,
+  useWindowSize,
+  type DOMElement,
+} from "ink";
+import { useRef, useState } from "react";
+import type { StoredMemorySummary } from "../../memory/contracts";
+
+const BROWSER_CHROME_ROWS = 3;
+
+export type MemoryBrowserProps = {
+  readonly memories: readonly StoredMemorySummary[];
+  readonly onClose: () => void;
+  readonly viewportRows?: number;
+  readonly viewportColumns?: number;
+};
+
+export function MemoryBrowser(props: MemoryBrowserProps) {
+  const windowSize = useWindowSize();
+  const rows = Math.max(4, props.viewportRows ?? windowSize.rows - 1);
+  const columns = Math.max(20, props.viewportColumns ?? windowSize.columns);
+  const bodyRows = Math.max(1, rows - BROWSER_CHROME_ROWS);
+  const contentRef = useRef<DOMElement>(null);
+  const { height: measuredContentRows, hasMeasured } = useBoxMetrics(contentRef);
+  const totalLines = props.memories.length === 0 ? 0 : measuredContentRows;
+  const maxTopLine = Math.max(0, totalLines - bodyRows);
+  const [topLine, setTopLine] = useState(0);
+  const visibleTopLine = clamp(topLine, 0, maxTopLine);
+  const visibleEnd = Math.min(totalLines, visibleTopLine + bodyRows);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      props.onClose();
+      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;
+    }
+    const direction =
+      key.upArrow || (input === "k" && !key.ctrl && !key.meta)
+        ? -1
+        : key.downArrow || (input === "j" && !key.ctrl && !key.meta)
+          ? 1
+          : 0;
+    if (direction !== 0) {
+      setTopLine((current) => clamp(current + direction, 0, maxTopLine));
+    }
+  });
+
+  return (
+    <Box width={columns} height={rows} flexDirection="column" overflow="hidden">
+      <Text bold>Global memory</Text>
+      <Text dimColor wrap="truncate-end">
+        ↑/↓ or j/k · PgUp/PgDn · Home/End · Esc close
+      </Text>
+      <Box
+        height={bodyRows}
+        width={columns}
+        position="relative"
+        overflow="hidden"
+        flexDirection="column"
+      >
+        {props.memories.length === 0 ? (
+          <Text dimColor>No stored memories.</Text>
+        ) : (
+          <Box
+            ref={contentRef}
+            position="absolute"
+            top={-visibleTopLine}
+            width={columns}
+            flexDirection="column"
+          >
+            {props.memories.map((memory, index) => (
+              <Box
+                key={memory.memoryId}
+                flexDirection="column"
+                marginBottom={index === props.memories.length - 1 ? 0 : 1}
+              >
+                <Text dimColor wrap="truncate-middle">
+                  {formatMemoryCreatedAt(memory.createdAt)} · {memory.sourceWorkspace}
+                </Text>
+                <Text>{normalizeMemoryDisplayText(memory.text)}</Text>
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+      <Text dimColor wrap="truncate-end">
+        {props.memories.length === 0
+          ? "0 memories"
+          : memoryBrowserStatus(
+              visibleTopLine,
+              visibleEnd,
+              hasMeasured ? totalLines : 0,
+              props.memories.length,
+            )}
+      </Text>
+    </Box>
+  );
+}
+
+export function normalizeMemoryDisplayText(text: string): string {
+  return (
+    text
+      .replaceAll(/\r\n?/g, "\n")
+      .replaceAll("\t", "    ")
+      // eslint-disable-next-line no-control-regex
+      .replaceAll(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, "\uFFFD")
+  );
+}
+
+export function formatMemoryCreatedAt(createdAt: string): string {
+  const date = new Date(createdAt);
+  const year = String(date.getFullYear()).padStart(4, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+function memoryBrowserStatus(
+  topLine: number,
+  endLine: number,
+  totalLines: number,
+  memoryCount: number,
+): string {
+  if (totalLines === 0) {
+    return `0 lines · ${memoryCount} ${memoryCount === 1 ? "memory" : "memories"}`;
+  }
+  return `${topLine + 1}–${endLine} / ${totalLines} lines · ${memoryCount} ${
+    memoryCount === 1 ? "memory" : "memories"
+  }`;
+}
+
+function clamp(value: number, minimum: number, maximum: number): number {
+  return Math.min(Math.max(value, minimum), maximum);
+}

package/src/tui/components/resume-session-picker.tsx

@@ -10,6 +10,7 @@ export type ResumeSessionPickerProps = {
   isResuming?: boolean;
   error?: string;
   now?: Date;
+  viewportRows?: number;
   visibleItemCount?: number;
   onCancel: () => void;
   onSelect: (session: SessionSummary) => void;
@@ -29,7 +30,8 @@ export function ResumeSessionPicker(props: ResumeSessionPickerProps) {
 }
 
 function ResumeSessionPickerContent(props: ResumeSessionPickerProps) {
-  const { rows } = useWindowSize();
+  const windowSize = useWindowSize();
+  const rows = props.viewportRows ?? windowSize.rows - 1;
   const visibleItemCount = Math.min(
     props.sessions.length,
     Math.max(

package/src/tui/components/timeline.tsx

@@ -6,27 +6,25 @@ import { BashResultView } from "./bash-result-view";
 import { DiffView } from "./diff-view";
 
 export type TimelineProps = {
-  items: TimelineItem[];
+  items: readonly TimelineItem[];
 };
 
 export function Timeline(props: TimelineProps) {
   return (
     <Box flexDirection="column">
-      <Text bold>Timeline</Text>
-      {props.items.length === 0 ? (
-        <Text color="gray">idle</Text>
-      ) : (
-        props.items.map((item) => renderTimelineItem(item))
-      )}
+      {props.items.map((item) => (
+        <TimelineRow key={item.id} item={item} />
+      ))}
     </Box>
   );
 }
 
-function renderTimelineItem(item: TimelineItem) {
+export function TimelineRow(props: { item: TimelineItem }) {
+  const { item } = props;
   if (item.label !== undefined) {
     if (item.label === "assistant") {
       return (
-        <Fragment key={item.id}>
+        <Fragment>
           <Text color="gray">- {item.label}</Text>
           <AssistantMarkdown text={item.text} />
         </Fragment>
@@ -34,7 +32,7 @@ function renderTimelineItem(item: TimelineItem) {
     }
 
     return (
-      <Fragment key={item.id}>
+      <Fragment>
         <Text color="gray">- {item.label}</Text>
         {item.userPrompt === undefined ? (
           <Text color={colorForStatus(item.status)}>{formatTimelineItem(item)}</Text>
@@ -48,7 +46,7 @@ function renderTimelineItem(item: TimelineItem) {
   }
 
   return (
-    <Fragment key={item.id}>
+    <Fragment>
       <Text color={colorForStatus(item.status)}>{formatTimelineItem(item)}</Text>
       {renderItemBash(item)}
       {renderItemDiff(item)}

package/src/tui/event-store.ts

@@ -393,6 +393,19 @@ function formatSurfaceComponent(component: string): string {
 
 export const applyAgentEvent = reduceTuiProjection;
 
+export function timelineStreamItems(state: TuiProjectionState): TimelineItem[] {
+  return [
+    ...state.notices,
+    ...state.recentTurns.flatMap((turn) => turn.items),
+    ...(state.activeTurn?.items ?? []),
+  ];
+}
+
+export function firstRunningIndex(items: readonly TimelineItem[]): number {
+  const index = items.findIndex((item) => item.status === "running");
+  return index === -1 ? items.length : index;
+}
+
 export function visibleTimelineItems(state: TuiProjectionState): TimelineItem[] {
   const items = [...state.notices];
 
@@ -697,8 +710,8 @@ function toolCallSummary(input: { name: string; args: unknown }): string {
   if (input.name === "Grep") {
     return `Grep ${toolPattern(input.args) ?? ""}`.trim();
   }
-  if (input.name === "WebSearch") {
-    return `WebSearch ${toolQuery(input.args) ?? ""}`.trim();
+  if (input.name === "WebSearch" || input.name === "MemorySearch") {
+    return `${input.name} ${toolQuery(input.args) ?? ""}`.trim();
   }
   if (input.name === "WebFetch") {
     return `WebFetch ${toolUrl(input.args) ?? ""}`.trim();
@@ -779,6 +792,11 @@ function toolRawResultSummary(name: string, args: unknown, raw: ToolRawResult):
       return raw.mode === "search"
         ? `${base} -> ${raw.page.hits.length} historical match${raw.page.hits.length === 1 ? "" : "es"}`
         : `${base} -> ${raw.page.returnedBytes} historical bytes`;
+    case "memory_search":
+      if (!raw.ok) {
+        return base;
+      }
+      return `${base} -> ${raw.matches.length} derived memor${raw.matches.length === 1 ? "y" : "ies"}`;
     case "skill":
       if (!raw.ok) {
         return `${base} failed -> ${boundedToolError(raw.error)}`;
@@ -846,6 +864,7 @@ function toolRawResultBashDetail(raw: ToolRawResult): Pick<TimelineItem, "bash">
     case "web_search":
     case "web_fetch":
     case "recall":
+    case "memory_search":
     case "skill":
     case "mcp":
     case "generic":
@@ -880,6 +899,7 @@ function toolRawResultDiff(
     case "web_search":
     case "web_fetch":
     case "recall":
+    case "memory_search":
     case "skill":
     case "mcp":
     case "generic":

package/src/tui/shiki-highlighter.ts

@@ -0,0 +1,104 @@
+import type { BundledLanguage, BundledTheme } from "shiki";
+
+export type TuiShikiHighlighter = (code: string, language?: string) => string;
+
+type ShikiToken = {
+  readonly content: string;
+  readonly color?: string;
+};
+
+export type TuiShikiTokenizer = {
+  codeToTokensBase(
+    code: string,
+    options: { readonly lang: string; readonly theme: string },
+  ): readonly (readonly ShikiToken[])[];
+};
+
+const THEME = "github-dark";
+const HIGHLIGHTED_LANGUAGES = [
+  "typescript",
+  "javascript",
+  "tsx",
+  "jsx",
+  "json",
+  "bash",
+  "shellscript",
+  "python",
+  "markdown",
+  "html",
+  "css",
+  "yaml",
+  "diff",
+] as const;
+
+let preparation: Promise<void> | undefined;
+let highlighter: TuiShikiHighlighter | undefined;
+
+export function prepareShikiHighlighter(): Promise<void> {
+  preparation ??= createTuiShikiHighlighter(async () => {
+    const { createHighlighter } = await import("shiki");
+    const tokenizer = await createHighlighter({
+      themes: [THEME],
+      langs: [...HIGHLIGHTED_LANGUAGES],
+    });
+    return {
+      codeToTokensBase: (code, options) =>
+        tokenizer.codeToTokensBase(code, {
+          lang: options.lang as BundledLanguage,
+          theme: options.theme as BundledTheme,
+        }),
+    };
+  }).then((prepared) => {
+    highlighter = prepared;
+  });
+  return preparation;
+}
+
+export function getPreparedShikiHighlighter(): TuiShikiHighlighter | undefined {
+  return highlighter;
+}
+
+export async function createTuiShikiHighlighter(
+  createTokenizer: () => Promise<TuiShikiTokenizer>,
+): Promise<TuiShikiHighlighter | undefined> {
+  try {
+    const tokenizer = await createTokenizer();
+    return (code, language) => {
+      if (language === undefined || language === "") {
+        return code;
+      }
+      try {
+        return tokenizer
+          .codeToTokensBase(code, { lang: language, theme: THEME })
+          .map((line) =>
+            line
+              .map((token) => {
+                const ansi = tokenColorToAnsi(token.color);
+                return ansi === undefined
+                  ? token.content
+                  : `${ansi}${token.content}\u001b[39m`;
+              })
+              .join(""),
+          )
+          .join("\n");
+      } catch {
+        return code;
+      }
+    };
+  } catch {
+    return undefined;
+  }
+}
+
+function tokenColorToAnsi(color: string | undefined): string | undefined {
+  if (color === undefined || !color.startsWith("#") || color.length < 7) {
+    return undefined;
+  }
+  const red = Number.parseInt(color.slice(1, 3), 16);
+  const green = Number.parseInt(color.slice(3, 5), 16);
+  const blue = Number.parseInt(color.slice(5, 7), 16);
+  if ([red, green, blue].some((component) => Number.isNaN(component))) {
+    return undefined;
+  }
+  return `\u001b[38;2;${red};${green};${blue}m`;
+}

package/src/tui/slash-commands.ts

@@ -24,6 +24,11 @@ export const SLASH_COMMANDS: readonly BuiltInSlashCommand[] = [
     usage: "/mcp",
     description: "Show MCP servers and runtime tools",
   },
+  {
+    name: "memory",
+    usage: "/memory",
+    description: "Browse stored global memories",
+  },
   {
     name: "compact",
     usage: "/compact [retire]",
@@ -67,6 +72,7 @@ export type ParsedSlashCommand =
   | { type: "status" }
   | { type: "skills" }
   | { type: "mcp" }
+  | { type: "memory" }
   | { type: "compact" }
   | { type: "compact_retire" }
   | { type: "clear" }
@@ -114,6 +120,12 @@ export function parseSlashCommand(input: string): ParsedSlashCommand {
     }
     throw slashCommandUsageError("mcp");
   }
+  if (command === "/memory") {
+    if (tokens.length === 1) {
+      return { type: "memory" };
+    }
+    throw slashCommandUsageError("memory");
+  }
   if (command === "/compact") {
     if (tokens.length === 1) {
       return { type: "compact" };

package/src/tui/tui-projection-store.ts

@@ -2,7 +2,11 @@ import type { EventSink } from "../events/event-sink";
 import type { AgentEvent } from "../events/types";
 import {
   createInitialTuiProjectionState,
+  firstRunningIndex,
   reduceTuiProjection,
+  timelineStreamItems,
+  visibleTimelineItems,
+  type TimelineItem,
   type TuiProjectionState,
 } from "./event-store";
 import {
@@ -19,11 +23,18 @@ export type TuiProjectionStoreInput = {
   initialSnapshot?: TuiProjectionState;
 };
 
+export type TuiTimelineLog = Readonly<{
+  committed: readonly TimelineItem[];
+  live: readonly TimelineItem[];
+}>;
+
 export class TuiProjectionStore implements EventSink {
   readonly name = "tui-projection-store";
   private readonly listeners = new Set<() => void>();
   private readonly policy: TuiProjectionPolicy;
+  private readonly printed = new Set<string>();
   private snapshot: TuiProjectionState;
+  private log: TuiTimelineLog = { committed: [], live: [] };
 
   constructor(input: TuiProjectionStoreInput) {
     this.policy = validateTuiProjectionPolicy(
@@ -33,10 +44,15 @@ export class TuiProjectionStore implements EventSink {
       input.initialSnapshot === undefined
         ? createInitialTuiProjectionState(input)
         : validateInitialSnapshot(input, input.initialSnapshot, this.policy);
+    if (input.initialSnapshot !== undefined) {
+      this.refreshLog(visibleTimelineItems(this.snapshot));
+    }
   }
 
   readonly getSnapshot = (): TuiProjectionState => this.snapshot;
 
+  readonly getLogSnapshot = (): TuiTimelineLog => this.log;
+
   readonly subscribe = (listener: () => void): (() => void) => {
     this.listeners.add(listener);
     return () => {
@@ -51,6 +67,7 @@ export class TuiProjectionStore implements EventSink {
     }
 
     this.snapshot = next;
+    this.refreshLog();
     for (const listener of this.listeners) {
       listener();
     }
@@ -73,10 +90,26 @@ export class TuiProjectionStore implements EventSink {
       snapshot,
       this.policy,
     );
+    this.refreshLog(visibleTimelineItems(this.snapshot));
     for (const listener of this.listeners) {
       listener();
     }
   }
+
+  private refreshLog(stream = timelineStreamItems(this.snapshot)): void {
+    const settledEnd = firstRunningIndex(stream);
+    const pending = stream
+      .slice(0, settledEnd)
+      .filter((item) => !this.printed.has(item.id));
+    for (const item of pending) {
+      this.printed.add(item.id);
+    }
+    this.log = {
+      committed:
+        pending.length === 0 ? this.log.committed : [...this.log.committed, ...pending],
+      live: stream.slice(settledEnd),
+    };
+  }
 }
 
 function validateInitialSnapshot(

package/src/tui/tui-session-controller.ts

@@ -47,11 +47,11 @@ export type TuiSessionController = {
   listSessions: () => Promise<readonly SessionSummary[]>;
   compact: () => Promise<ContextCompactionResult>;
   retire: () => Promise<ContextRetirementResult>;
-  fork: () => Promise<SessionId>;
-  clear: () => Promise<void>;
-  resume: (sessionId: SessionId) => Promise<void>;
+  fork: (beforeCommit?: () => void) => Promise<SessionId>;
+  clear: (beforeCommit?: () => void) => Promise<void>;
+  resume: (sessionId: SessionId, beforeCommit?: () => void) => Promise<void>;
   delete: (sessionId: SessionId) => Promise<void>;
-  switchModel: (profile: ModelProfile) => Promise<void>;
+  switchModel: (profile: ModelProfile, beforeCommit?: () => void) => Promise<void>;
 };
 
 export type ManagedTuiSessionBinding = TuiSessionBinding & {
@@ -100,7 +100,7 @@ export class DefaultTuiSessionController implements TuiSessionController {
     return this.serialize(() => this.binding.runtimeSession.retireContext());
   }
 
-  fork(): Promise<SessionId> {
+  fork(beforeCommit?: () => void): Promise<SessionId> {
     return this.serialize(async () => {
       const targetSessionId = createUuidV7() as SessionId;
       await this.replaceSession(
@@ -109,21 +109,23 @@ export class DefaultTuiSessionController implements TuiSessionController {
           await current.runtimeSession.cloneSession(targetSessionId);
           return this.openSession(targetSessionId);
         },
+        beforeCommit,
       );
       return targetSessionId;
     });
   }
 
-  clear(): Promise<void> {
+  clear(beforeCommit?: () => void): Promise<void> {
     return this.serialize(() =>
       this.replaceSession(
         "Cannot clear the session while a turn, context operation, or background task is active.",
         (current) => this.createFreshSession(current),
+        beforeCommit,
       ),
     );
   }
 
-  resume(sessionId: SessionId): Promise<void> {
+  resume(sessionId: SessionId, beforeCommit?: () => void): Promise<void> {
     return this.serialize(async () => {
       if (sessionId === this.binding.sessionId) {
         throw new Error(`Session ${sessionId} is already current.`);
@@ -131,6 +133,7 @@ export class DefaultTuiSessionController implements TuiSessionController {
       await this.replaceSession(
         "Cannot switch sessions while a turn or background task is active.",
         () => this.openSession(sessionId),
+        beforeCommit,
       );
     });
   }
@@ -139,11 +142,12 @@ export class DefaultTuiSessionController implements TuiSessionController {
     return this.serialize(() => this.catalog.delete(sessionId, this.binding.sessionId));
   }
 
-  switchModel(profile: ModelProfile): Promise<void> {
+  switchModel(profile: ModelProfile, beforeCommit?: () => void): Promise<void> {
     return this.serialize(() =>
       this.replaceSession(
         "Cannot switch models while a turn or background task is active.",
         () => this.createSessionWithProfile(profile),
+        beforeCommit,
       ),
     );
   }
@@ -157,6 +161,7 @@ export class DefaultTuiSessionController implements TuiSessionController {
     createTarget: (
       current: ManagedTuiSessionBinding,
     ) => Promise<ManagedTuiSessionBinding>,
+    beforeCommit?: () => void,
   ): Promise<void> {
     const current = this.binding;
     if (!current.runtimeSession.canSwitchSession()) {
@@ -172,6 +177,7 @@ export class DefaultTuiSessionController implements TuiSessionController {
         .catch(() => undefined);
       throw error;
     }
+    beforeCommit?.();
     this.binding = target;
     for (const listener of this.listeners) {
       listener();