tinker-agent 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable user-facing changes to Tinker are documented here. The project follo
 
 ## [Unreleased]
 
+## [1.5.1] - 2026-07-29
+
+### Changed
+
+- Keep settled TUI history outside recurring live renders and reuse prepared
+  Markdown highlighting, reducing redraw work during long interactive sessions.
+- Stop repainting the TUI once per second solely to update a running elapsed-time
+  counter; completed turns still show their final duration.
+
+### Fixed
+
+- Restore the visible history tail after closing `/view`, `/memory`, `/resume`,
+  and other temporary TUI panels instead of leaving a mostly blank viewport.
+- Keep the `/resume` picker bound to the session that opened it, preventing stale
+  picker state from affecting a newly activated session.
+
 ## [1.5.0] - 2026-07-27
 
 ### Added
@@ -84,7 +100,8 @@ All notable user-facing changes to Tinker are documented here. The project follo
 - First formal npm release under the `tinker-agent` package name with the `tinker`
   executable.
 
-[Unreleased]: https://github.com/ishowshao/tinker/compare/v1.5.0...HEAD
+[Unreleased]: https://github.com/ishowshao/tinker/compare/v1.5.1...HEAD
+[1.5.1]: https://github.com/ishowshao/tinker/releases/tag/v1.5.1
 [1.5.0]: https://github.com/ishowshao/tinker/releases/tag/v1.5.0
 [1.4.0]: https://github.com/ishowshao/tinker/releases/tag/v1.4.0
 [1.3.0]: https://github.com/ishowshao/tinker/releases/tag/v1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinker-agent",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "A personal coding agent with an interactive TUI and one-shot CLI.",
   "license": "Apache-2.0",
   "type": "module",
@@ -80,6 +80,7 @@
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@mozilla/readability": "^0.6.0",
     "@vscode/ripgrep": "1.18.0",
+    "ansi-escapes": "^7.3.0",
     "bun": "1.3.14",
     "clipboardy": "^5.3.1",
     "commander": "^14.0.3",

package/src/cli/tui-runner.tsx

@@ -43,6 +43,7 @@ import { loadProjectSlashCommands } from "../tui/project-slash-commands";
 import { createWorkspaceFileLister } from "../tui/workspace-file-search";
 import { clipboardWriterForEnvironment } from "../tui/clipboard";
 import { initializeTuiMemory } from "./tui-memory";
+import { prepareShikiHighlighter } from "../tui/shiki-highlighter";
 
 export type RunTuiOptions = {
   readonly publicConfig: ResolvedPublicConfig;
@@ -51,6 +52,7 @@ export type RunTuiOptions = {
 };
 
 export async function runTui(options: RunTuiOptions): Promise<void> {
+  const shikiPreparation = prepareShikiHighlighter();
   const profiles =
     options.publicConfig.mode === "profile" ? options.publicConfig.profiles : undefined;
   const config = options.initialRunnerConfig;
@@ -256,6 +258,7 @@ export async function runTui(options: RunTuiOptions): Promise<void> {
       createFreshSession,
     );
 
+    await shikiPreparation;
     instance = render(
       <App
         sessionController={controller}
@@ -285,6 +288,7 @@ export async function runTui(options: RunTuiOptions): Promise<void> {
             : () => memoryCoordinator.listStoredMemories()
         }
       />,
+      { incrementalRendering: true },
     );
     await instance.waitUntilExit();
   } catch (error) {

package/src/model/fake-model-client.ts

@@ -226,6 +226,12 @@ export class FakeModelClient implements ModelClient {
     if (this.mode === "pty-echo-history") {
       return this.ptyEchoHistory(input, prepared);
     }
+    if (this.mode === "pty-static-history") {
+      return this.ptyStaticHistory(input, prepared, options);
+    }
+    if (this.mode === "pty-resume-layout") {
+      return this.ptyResumeLayout(input, prepared, options);
+    }
     if (this.mode === "pty-cancel-then-echo") {
       return this.ptyCancelThenEcho(input, prepared, options);
     }
@@ -307,6 +313,97 @@ export class FakeModelClient implements ModelClient {
     throw new Error(`Unexpected pty-echo-history prompt: ${JSON.stringify(prompt)}.`);
   }
 
+  private async ptyStaticHistory(
+    input: ModelRequestInput,
+    prepared: PreparedModelRequest,
+    options: ModelRequestOptions,
+  ): Promise<ModelRequestOutput> {
+    const prompt = lastUserMessage(input.messages);
+    const historyMatch = /^PTY_STATIC_HISTORY_([1-4])$/u.exec(prompt);
+    if (historyMatch !== null) {
+      const turn = historyMatch[1];
+      return textOutput(
+        prepared,
+        [
+          turn === "1"
+            ? "PTY_STATIC_HISTORY_EARLY_SENTINEL"
+            : `PTY_STATIC_HISTORY_${turn}`,
+          ...Array.from(
+            { length: 8 },
+            (_, index) => `- settled PTY history ${turn}.${index + 1}`,
+          ),
+          `PTY_STATIC_HISTORY_${turn}_DONE`,
+        ].join("\n"),
+      );
+    }
+    if (prompt !== "PTY_STATIC_LIVE") {
+      throw new Error(
+        `Unexpected pty-static-history prompt: ${JSON.stringify(prompt)}.`,
+      );
+    }
+
+    requireTools(input, ["Bash"]);
+    const bash = toolMessagesAfterLastUser(input.messages).find(
+      (message) => message.name === "Bash",
+    );
+    await Bun.sleep(200);
+    options.signal.throwIfAborted();
+    if (bash === undefined) {
+      return toolCallOutput(prepared, options, "Bash", {
+        command:
+          'index=1; while [ "$index" -le 20 ]; do printf \'PTY_STATIC_LIVE_LINE_%s\\n\' "$index"; index=$((index + 1)); done; sleep 0.2',
+        description: "Exercise static history live tail",
+      });
+    }
+    if (!bash.content.includes("PTY_STATIC_LIVE_LINE_20")) {
+      throw new Error("PTY static-history Bash output was incomplete.");
+    }
+    return textOutput(prepared, "PTY_STATIC_LIVE_DONE");
+  }
+
+  private ptyResumeLayout(
+    input: ModelRequestInput,
+    prepared: PreparedModelRequest,
+    options: ModelRequestOptions,
+  ): ModelRequestOutput {
+    const prompt = lastUserMessage(input.messages);
+    if (/^PTY_RESUME_LAYOUT_PAD_\d+$/u.test(prompt)) {
+      return textOutput(prepared, `${prompt}_DONE`);
+    }
+    const match = /^PTY_RESUME_LAYOUT_([1-3])$/u.exec(prompt);
+    if (match === null) {
+      throw new Error(
+        `Unexpected pty-resume-layout prompt: ${JSON.stringify(prompt)}.`,
+      );
+    }
+
+    requireTools(input, ["Read"]);
+    const turn = Number(match[1]);
+    const targetToolCount = [8, 17, 4][turn - 1];
+    const finalLineCount = [31, 47, 8][turn - 1];
+    if (targetToolCount === undefined || finalLineCount === undefined) {
+      throw new Error(`Invalid pty-resume-layout turn: ${turn}.`);
+    }
+
+    const completedReads = toolMessagesAfterLastUser(input.messages).filter(
+      (message) => message.name === "Read",
+    ).length;
+    if (completedReads < targetToolCount) {
+      return toolCallOutput(prepared, options, "Read", {
+        file_path: "resume-layout.txt",
+      });
+    }
+
+    return textOutput(
+      prepared,
+      Array.from(
+        { length: finalLineCount },
+        (_, index) =>
+          `PTY_RESUME_LAYOUT_${turn}_FINAL_${String(index + 1).padStart(2, "0")}`,
+      ).join("\n"),
+    );
+  }
+
   private ptyCancelThenEcho(
     input: ModelRequestInput,
     prepared: PreparedModelRequest,

package/src/tui/app.tsx

@@ -1,5 +1,13 @@
-import { Box, Text, useApp, useInput } from "ink";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Box, Static, Text, useApp, useInput, useStdout, useWindowSize } from "ink";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { clearTerminal } from "ansi-escapes";
 import { TurnCancelledError } from "../agent/turn-cancellation";
 import { boundedMemoryError, type StoredMemorySummary } from "../memory/contracts";
 import {
@@ -11,9 +19,10 @@ import { ContextBudgetExceededError } from "../model/model-request-preflight";
 import { ModelRequestMediaAggregateError } from "../model/model-client";
 import type { SessionId } from "../ids/runtime-id";
 import { readLastAssistantResponse } from "../session/session-last-response-reader";
-import { visibleTimelineItems } from "./event-store";
+import type { TimelineItem } from "./event-store";
 import type { PromptHistory } from "./prompt-history";
 import { Footer } from "./components/footer";
+import { AssistantMarkdownProvider } from "./components/assistant-markdown";
 import { ContextStatus } from "./components/context-status";
 import { BackgroundTasks } from "./components/background-tasks";
 import { Header } from "./components/header";
@@ -33,7 +42,7 @@ import {
   ResumeSessionPicker,
   ResumeSessionPickerLoading,
 } from "./components/resume-session-picker";
-import { Timeline } from "./components/timeline";
+import { Timeline, TimelineRow } from "./components/timeline";
 import { parseSlashCommand, SLASH_COMMANDS } from "./slash-commands";
 import {
   resolveProjectSlashCommand,
@@ -67,9 +76,10 @@ export type AppProps = {
 };
 
 type ResumePickerState =
-  | { status: "loading" }
+  | { status: "loading"; ownerSessionId: SessionId }
   | {
       status: "ready";
+      ownerSessionId: SessionId;
       sessions: readonly SessionSummary[];
       isResuming: boolean;
       error?: string;
@@ -84,8 +94,15 @@ type FileViewState =
   | { status: "loading"; filePath: string }
   | { status: "ready"; file: ViewFile };
 
+const STATIC_HEADER = Symbol("tui-static-header");
+const LIVE_TIMELINE_MAX_ROWS = 8;
+const LIVE_TIMELINE_WITH_TASKS_MAX_ROWS = 3;
+const BACKGROUND_TASKS_MAX_ROWS = 12;
+
 export function App(props: AppProps) {
   const { exit } = useApp();
+  const { write } = useStdout();
+  const windowSize = useWindowSize();
   const binding = useSyncExternalStore(
     props.sessionController.subscribe,
     props.sessionController.getBinding,
@@ -100,6 +117,11 @@ export function App(props: AppProps) {
     binding.projectionStore.getSnapshot,
     binding.projectionStore.getSnapshot,
   );
+  const log = useSyncExternalStore(
+    binding.projectionStore.subscribe,
+    binding.projectionStore.getLogSnapshot,
+    binding.projectionStore.getLogSnapshot,
+  );
   const [isRunning, setIsRunning] = useState(false);
   const [isSessionOperation, setIsSessionOperation] = useState(false);
   const [isCopying, setIsCopying] = useState(false);
@@ -120,18 +142,32 @@ export function App(props: AppProps) {
     readonly StoredMemorySummary[] | undefined
   >(undefined);
   const [viewError, setViewError] = useState<string | undefined>(undefined);
+  const [staticRenderEpoch, setStaticRenderEpoch] = useState(0);
   const [gitBranch, setGitBranch] = useState<string | undefined>(undefined);
   const [gitBranchRefresh, setGitBranchRefresh] = useState(0);
   const gitBranchReadQueue = useRef<Promise<void>>(Promise.resolve());
   const activeController = useRef<AbortController | undefined>(undefined);
   const resumePickerRequest = useRef(0);
   const fileViewRequest = useRef(0);
+  const beforeSessionCommit = useCallback(() => {
+    write(clearTerminal);
+  }, [write]);
+  const restoreStaticViewport = useCallback(() => {
+    write(clearTerminal);
+    setStaticRenderEpoch((current) => current + 1);
+  }, [write]);
+  const staticItems = useMemo<Array<typeof STATIC_HEADER | TimelineItem>>(
+    () => [STATIC_HEADER, ...log.committed],
+    [log.committed],
+  );
 
   const canSwitchModel =
     state.recentTurns.length === 0 &&
     state.activeTurn === undefined &&
     props.profiles !== undefined &&
     props.profiles.profiles.size > 1;
+  const activeResumePicker =
+    resumePicker?.ownerSessionId === binding.sessionId ? resumePicker : undefined;
 
   const builtInCommands = canSwitchModel
     ? SLASH_COMMANDS
@@ -140,8 +176,6 @@ export function App(props: AppProps) {
 
   const profileList = props.profiles ? [...props.profiles.profiles.values()] : [];
 
-  const runningElapsedMs = useElapsedMs(state.activeTurn?.startedAt);
-
   useEffect(() => {
     if (readGitBranch === undefined) {
       return;
@@ -186,17 +220,22 @@ export function App(props: AppProps) {
   );
 
   const closeResumePicker = () => {
+    const shouldRestoreViewport = activeResumePicker !== undefined;
     resumePickerRequest.current += 1;
     setResumePicker(undefined);
     setIsSessionOperation(false);
     setNotice(undefined);
+    if (shouldRestoreViewport) {
+      restoreStaticViewport();
+    }
   };
 
   const openResumePicker = () => {
     const requestId = resumePickerRequest.current + 1;
+    const ownerSessionId = binding.sessionId;
     resumePickerRequest.current = requestId;
     setNotice(undefined);
-    setResumePicker({ status: "loading" });
+    setResumePicker({ status: "loading", ownerSessionId });
     setIsSessionOperation(true);
     void props.sessionController
       .listSessions()
@@ -207,14 +246,21 @@ export function App(props: AppProps) {
         if (sessions.length === 0) {
           setResumePicker(undefined);
           setNotice("No stored sessions found for this workspace.");
+          restoreStaticViewport();
           return;
         }
-        setResumePicker({ status: "ready", sessions, isResuming: false });
+        setResumePicker({
+          status: "ready",
+          ownerSessionId,
+          sessions,
+          isResuming: false,
+        });
       })
       .catch((error: unknown) => {
         if (resumePickerRequest.current === requestId) {
           setResumePicker(undefined);
           setNotice(`Session operation failed: ${errorMessage(error)}`);
+          restoreStaticViewport();
         }
       })
       .finally(() => {
@@ -232,7 +278,7 @@ export function App(props: AppProps) {
     );
     setIsSessionOperation(true);
     void props.sessionController
-      .resume(session.sessionId)
+      .resume(session.sessionId, beforeSessionCommit)
       .then(() => {
         setResumePicker(undefined);
         setNotice(`Resumed session ${session.sessionId}.`);
@@ -255,6 +301,7 @@ export function App(props: AppProps) {
     setShowModelPicker(false);
     setModelPickerState(undefined);
     setNotice(undefined);
+    restoreStaticViewport();
   };
 
   const doSwitchModel = (profile: ModelProfile) => {
@@ -263,7 +310,7 @@ export function App(props: AppProps) {
     setNotice(undefined);
     setIsSessionOperation(true);
     void props.sessionController
-      .switchModel(profile)
+      .switchModel(profile, beforeSessionCommit)
       .then(async () => {
         setGitBranchRefresh((current) => current + 1);
         try {
@@ -276,6 +323,7 @@ export function App(props: AppProps) {
         }
       })
       .catch((error: unknown) => {
+        restoreStaticViewport();
         setNotice(`Model switch failed: ${errorMessage(error)}`);
       })
       .finally(() => setIsSessionOperation(false));
@@ -284,6 +332,12 @@ export function App(props: AppProps) {
   const closeFileView = () => {
     fileViewRequest.current += 1;
     setFileView(undefined);
+    restoreStaticViewport();
+  };
+
+  const closeMemoryView = () => {
+    setMemoryView(undefined);
+    restoreStaticViewport();
   };
 
   const openMemoryView = () => {
@@ -318,6 +372,7 @@ export function App(props: AppProps) {
         if (fileViewRequest.current === requestId) {
           setFileView(undefined);
           setViewError(`View failed: ${errorMessage(error)}`);
+          restoreStaticViewport();
         }
       });
   };
@@ -432,7 +487,7 @@ export function App(props: AppProps) {
         setNotice(formatContextRetirementNotice(result));
         return;
       }
-      await props.sessionController.clear();
+      await props.sessionController.clear(beforeSessionCommit);
       signal.throwIfAborted();
       const sessionId = props.sessionController.getBinding().sessionId;
       setGitBranchRefresh((current) => current + 1);
@@ -450,10 +505,14 @@ export function App(props: AppProps) {
   ): PromptSubmissionOutcome | Promise<PromptSubmissionOutcome> => {
     const { userMessage } = submission;
     const trimmed = userMessage.content.trim();
+    const shouldRestoreViewport = showStatus || showSkills || showMcp;
     setShowStatus(false);
     setShowSkills(false);
     setShowMcp(false);
     setViewError(undefined);
+    if (shouldRestoreViewport) {
+      restoreStaticViewport();
+    }
 
     if (userMessage.attachments === undefined && trimmed.startsWith("/")) {
       try {
@@ -523,7 +582,7 @@ export function App(props: AppProps) {
         if (command.type === "clear") {
           setIsSessionOperation(true);
           void props.sessionController
-            .clear()
+            .clear(beforeSessionCommit)
             .then(() => {
               const sessionId = props.sessionController.getBinding().sessionId;
               setGitBranchRefresh((current) => current + 1);
@@ -540,7 +599,7 @@ export function App(props: AppProps) {
         if (command.type === "fork") {
           setIsSessionOperation(true);
           void props.sessionController
-            .fork()
+            .fork(beforeSessionCommit)
             .then((sessionId) => {
               setGitBranchRefresh((current) => current + 1);
               setNotice(
@@ -586,7 +645,7 @@ export function App(props: AppProps) {
         const operation =
           command.type === "resume"
             ? props.sessionController
-                .resume(command.sessionId)
+                .resume(command.sessionId, beforeSessionCommit)
                 .then(() => setNotice(`Resumed session ${command.sessionId}.`))
             : props.sessionController
                 .delete(command.sessionId)
@@ -606,94 +665,122 @@ export function App(props: AppProps) {
   };
 
   return (
-    <Box flexDirection="column">
-      {fileView?.status === "loading" ? (
-        <FileViewerLoading filePath={fileView.filePath} onCancel={closeFileView} />
-      ) : fileView?.status === "ready" ? (
-        <FileViewer file={fileView.file} onClose={closeFileView} />
-      ) : memoryView !== undefined ? (
-        <MemoryBrowser memories={memoryView} onClose={() => setMemoryView(undefined)} />
-      ) : resumePicker?.status === "loading" ? (
-        <ResumeSessionPickerLoading onCancel={closeResumePicker} />
-      ) : resumePicker?.status === "ready" ? (
-        <ResumeSessionPicker
-          sessions={resumePicker.sessions}
-          isResuming={resumePicker.isResuming}
-          error={resumePicker.error}
-          onCancel={closeResumePicker}
-          onSelect={resumeSelectedSession}
-        />
-      ) : (
-        <>
-          <Header
-            key={binding.sessionId}
-            modelName={binding.modelName}
-            workspaceRoot={binding.workspaceRoot}
-            sessionId={binding.sessionId}
+    <AssistantMarkdownProvider>
+      <Box flexDirection="column">
+        <Static key={`${binding.sessionId}:${staticRenderEpoch}`} items={staticItems}>
+          {(item) =>
+            item === STATIC_HEADER ? (
+              <Header
+                key={`header-${binding.sessionId}`}
+                modelName={binding.modelName}
+                workspaceRoot={binding.workspaceRoot}
+                sessionId={binding.sessionId}
+              />
+            ) : (
+              <TimelineRow key={item.id} item={item} />
+            )
+          }
+        </Static>
+        {fileView?.status === "loading" ? (
+          <FileViewerLoading filePath={fileView.filePath} onCancel={closeFileView} />
+        ) : fileView?.status === "ready" ? (
+          <FileViewer file={fileView.file} onClose={closeFileView} />
+        ) : memoryView !== undefined ? (
+          <MemoryBrowser memories={memoryView} onClose={closeMemoryView} />
+        ) : activeResumePicker?.status === "loading" ? (
+          <ResumeSessionPickerLoading onCancel={closeResumePicker} />
+        ) : activeResumePicker?.status === "ready" ? (
+          <ResumeSessionPicker
+            sessions={activeResumePicker.sessions}
+            isResuming={activeResumePicker.isResuming}
+            error={activeResumePicker.error}
+            onCancel={closeResumePicker}
+            onSelect={resumeSelectedSession}
           />
-          <Box marginTop={1} flexDirection="column">
-            <Timeline items={visibleTimelineItems(state)} />
-          </Box>
-          {state.backgroundTasks.length === 0 ? null : (
-            <Box marginTop={1}>
-              <BackgroundTasks tasks={state.backgroundTasks} />
-            </Box>
-          )}
-          {showStatus ? (
-            <Box marginTop={1}>
-              <ContextStatus state={state} />
+        ) : (
+          <Box
+            flexDirection="column"
+            maxHeight={
+              state.status === "running" ? Math.max(1, windowSize.rows - 1) : undefined
+            }
+            overflow={state.status === "running" ? "hidden" : "visible"}
+          >
+            <Box marginTop={1} flexDirection="column">
+              <Box
+                maxHeight={
+                  state.backgroundTasks.length === 0
+                    ? LIVE_TIMELINE_MAX_ROWS
+                    : LIVE_TIMELINE_WITH_TASKS_MAX_ROWS
+                }
+                overflow="hidden"
+              >
+                <Timeline items={log.live} />
+              </Box>
             </Box>
-          ) : null}
-          {showSkills ? (
+            {state.backgroundTasks.length === 0 ? null : (
+              <Box
+                marginTop={1}
+                maxHeight={BACKGROUND_TASKS_MAX_ROWS}
+                overflow="hidden"
+              >
+                <BackgroundTasks tasks={state.backgroundTasks} />
+              </Box>
+            )}
+            {showStatus ? (
+              <Box marginTop={1}>
+                <ContextStatus state={state} />
+              </Box>
+            ) : null}
+            {showSkills ? (
+              <Box marginTop={1}>
+                <SkillsPanel snapshot={binding.skills()} />
+              </Box>
+            ) : null}
+            {showMcp ? (
+              <Box marginTop={1}>
+                <McpPanel snapshot={binding.mcp()} />
+              </Box>
+            ) : null}
             <Box marginTop={1}>
-              <SkillsPanel snapshot={binding.skills()} />
+              <Footer
+                status={isCancelling ? "cancelling" : state.status}
+                workedForMs={state.workedForMs}
+              />
             </Box>
-          ) : null}
-          {showMcp ? (
-            <Box marginTop={1}>
-              <McpPanel snapshot={binding.mcp()} />
+            <Box marginTop={1} flexDirection="column">
+              {showModelPicker ? (
+                <ModelPicker
+                  profiles={profileList}
+                  currentProfileName={binding.profileName}
+                  isSwitching={modelPickerState?.isSwitching}
+                  error={modelPickerState?.error}
+                  onCancel={closeModelPicker}
+                  onSelect={doSwitchModel}
+                />
+              ) : (
+                <PromptInput
+                  modelName={binding.modelName}
+                  workspaceRoot={binding.workspaceRoot}
+                  gitBranch={gitBranch}
+                  contextUsage={state.contextUsage}
+                  isDisabled={isRunning || isSessionOperation || isCopying}
+                  history={props.history}
+                  commands={availableCommands}
+                  fileLister={props.fileLister}
+                  importImage={binding.importImage}
+                  verifyImageAssets={binding.verifyImageAssets}
+                  onSubmit={onSubmit}
+                  onMaintenance={onMaintenance}
+                  placeholder='Enter a coding request, or "/" for commands'
+                />
+              )}
+              {viewError === undefined ? null : <Text color="red">{viewError}</Text>}
+              {notice === undefined ? null : <Text color="yellow">{notice}</Text>}
             </Box>
-          ) : null}
-          <Box marginTop={1}>
-            <Footer
-              status={isCancelling ? "cancelling" : state.status}
-              workedForMs={state.workedForMs}
-              elapsedMs={runningElapsedMs}
-            />
           </Box>
-          <Box marginTop={1} flexDirection="column">
-            {showModelPicker ? (
-              <ModelPicker
-                profiles={profileList}
-                currentProfileName={binding.profileName}
-                isSwitching={modelPickerState?.isSwitching}
-                error={modelPickerState?.error}
-                onCancel={closeModelPicker}
-                onSelect={doSwitchModel}
-              />
-            ) : (
-              <PromptInput
-                modelName={binding.modelName}
-                workspaceRoot={binding.workspaceRoot}
-                gitBranch={gitBranch}
-                contextUsage={state.contextUsage}
-                isDisabled={isRunning || isSessionOperation || isCopying}
-                history={props.history}
-                commands={availableCommands}
-                fileLister={props.fileLister}
-                importImage={binding.importImage}
-                verifyImageAssets={binding.verifyImageAssets}
-                onSubmit={onSubmit}
-                onMaintenance={onMaintenance}
-                placeholder='Enter a coding request, or "/" for commands'
-              />
-            )}
-            {viewError === undefined ? null : <Text color="red">{viewError}</Text>}
-            {notice === undefined ? null : <Text color="yellow">{notice}</Text>}
-          </Box>
-        </>
-      )}
-    </Box>
+        )}
+      </Box>
+    </AssistantMarkdownProvider>
   );
 }
 
@@ -701,42 +788,6 @@ function errorMessage(error: unknown): string {
   return error instanceof Error ? error.message : String(error);
 }
 
-const ELAPSED_TICK_MS = 1_000;
-
-// The wall clock, quantized to whole ticks so a render pass reads one stable
-// value and re-renders at most once per second.
-function readElapsedClockMs(): number {
-  return Math.floor(Date.now() / ELAPSED_TICK_MS) * ELAPSED_TICK_MS;
-}
-
-// Counts up while a turn is active. The interval only exists while `startedAt`
-// is defined, so an idle TUI keeps no timer running.
-function useElapsedMs(startedAt: string | undefined): number | undefined {
-  const subscribe = useCallback(
-    (onClockTick: () => void) => {
-      if (startedAt === undefined) {
-        return () => undefined;
-      }
-
-      const timer = setInterval(onClockTick, ELAPSED_TICK_MS);
-      return () => clearInterval(timer);
-    },
-    [startedAt],
-  );
-  const nowMs = useSyncExternalStore(subscribe, readElapsedClockMs, readElapsedClockMs);
-
-  if (startedAt === undefined) {
-    return undefined;
-  }
-
-  const startedAtMs = Date.parse(startedAt);
-  if (!Number.isFinite(startedAtMs)) {
-    throw new Error(`Invalid turn start timestamp: ${startedAt}`);
-  }
-
-  return Math.max(0, nowMs - startedAtMs);
-}
-
 export function formatContextCompactionNotice(result: ContextCompactionResult): string {
   if (result.status === "unchanged") {
     if (result.outcome === "below_target") {

package/src/tui/components/assistant-markdown.tsx

@@ -1,38 +1,39 @@
+import { createContext, memo, useContext, type ReactNode } from "react";
+import { MarkdownText, type RenderOptions } from "@assistant-ui/react-ink-markdown";
 import {
-  MarkdownText,
-  type RenderOptions,
-  useShikiHighlighter,
-} from "@assistant-ui/react-ink-markdown";
+  getPreparedShikiHighlighter,
+  type TuiShikiHighlighter,
+} from "../shiki-highlighter";
 
 export type AssistantMarkdownProps = {
   text: string;
 };
 
-const highlightedLanguages = [
-  "typescript",
-  "javascript",
-  "tsx",
-  "jsx",
-  "json",
-  "bash",
-  "shellscript",
-  "python",
-  "markdown",
-  "html",
-  "css",
-  "yaml",
-  "diff",
-];
-
 const tableOptions = {
   tableTruncate: false,
 } satisfies Pick<RenderOptions, "tableTruncate">;
 
-export function AssistantMarkdown(props: AssistantMarkdownProps) {
-  const highlighter = useShikiHighlighter({
-    theme: "github-dark",
-    langs: highlightedLanguages,
-  });
+const HighlighterContext = createContext<TuiShikiHighlighter | undefined>(undefined);
+
+// The runner resolves Shiki initialization before mounting App, so immutable
+// messages can safely move into Ink Static on their first rendered frame.
+export function AssistantMarkdownProvider(props: { children: ReactNode }) {
+  const highlighter = getPreparedShikiHighlighter();
+  return (
+    <HighlighterContext.Provider value={highlighter}>
+      {props.children}
+    </HighlighterContext.Provider>
+  );
+}
+
+// Memoized on `text`: settled assistant messages are immutable, so an
+// unchanged text guarantees an unchanged render and the whole markdown
+// subtree (including the markdansi re-run inside MarkdownText) can be
+// skipped for unrelated frames.
+export const AssistantMarkdown = memo(function AssistantMarkdown(
+  props: AssistantMarkdownProps,
+) {
+  const highlighter = useContext(HighlighterContext);
 
   return (
     <MarkdownText
@@ -44,4 +45,4 @@ export function AssistantMarkdown(props: AssistantMarkdownProps) {
       tableBorder="unicode"
     />
   );
-}
+});

package/src/tui/components/background-tasks.tsx

@@ -2,9 +2,11 @@ import { Box, Text } from "ink";
 import type { ShellTaskSnapshot, ShellTaskStatus } from "../../tools/bash-task";
 
 export type BackgroundTasksProps = {
-  tasks: ShellTaskSnapshot[];
+  tasks: readonly ShellTaskSnapshot[];
 };
 
+const MAX_VISIBLE_TASKS = 5;
+
 export function BackgroundTasks(props: BackgroundTasksProps) {
   if (props.tasks.length === 0) {
     return null;
@@ -13,13 +15,15 @@ export function BackgroundTasks(props: BackgroundTasksProps) {
   const runningCount = props.tasks.filter(
     (task) => task.status === "running" || task.status === "stopping",
   ).length;
+  const visibleTasks = props.tasks.slice(0, MAX_VISIBLE_TASKS);
+  const omittedTaskCount = props.tasks.length - visibleTasks.length;
 
   return (
     <Box flexDirection="column">
       <Text bold>
         Background tasks · {runningCount} running / {props.tasks.length} total
       </Text>
-      {props.tasks.map((task) => (
+      {visibleTasks.map((task) => (
         <Box key={task.taskId} flexDirection="column">
           <Text color={colorForStatus(task.status)}>
             {symbolForStatus(task.status)} {task.status} {taskDescription(task)}
@@ -28,6 +32,7 @@ export function BackgroundTasks(props: BackgroundTasksProps) {
           <Text dimColor>{taskTiming(task)}</Text>
         </Box>
       ))}
+      {omittedTaskCount === 0 ? null : <Text dimColor>+{omittedTaskCount} more</Text>}
     </Box>
   );
 }

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

@@ -18,7 +18,7 @@ export type FileViewerProps = {
 export function FileViewer(props: FileViewerProps) {
   const windowSize = useWindowSize();
   const { stdout } = useStdout();
-  const rows = Math.max(4, props.viewportRows ?? windowSize.rows);
+  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 - VIEWER_CHROME_ROWS);
   const normalizedLines = useMemo(
@@ -141,7 +141,7 @@ export function FileViewerLoading(props: {
   viewportColumns?: number;
 }) {
   const windowSize = useWindowSize();
-  const rows = Math.max(4, props.viewportRows ?? windowSize.rows);
+  const rows = Math.max(4, props.viewportRows ?? windowSize.rows - 1);
   const columns = Math.max(20, props.viewportColumns ?? windowSize.columns);
 
   useInput((_input, key) => {

package/src/tui/components/footer.tsx

@@ -1,10 +1,8 @@
-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";
   workedForMs?: number;
-  elapsedMs?: number;
 };
 
 export function Footer(props: FooterProps) {
@@ -25,11 +23,7 @@ export function Footer(props: FooterProps) {
   }
 
   if (props.status === "running") {
-    if (props.elapsedMs === undefined) {
-      return <Text color="yellow">• Running</Text>;
-    }
-
-    return <Text color="yellow">{`• Running ${formatDuration(props.elapsedMs)}`}</Text>;
+    return <Spinner label="Running" />;
   }
 
   if (props.status === "cancelling") {

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

@@ -20,7 +20,7 @@ export type MemoryBrowserProps = {
 
 export function MemoryBrowser(props: MemoryBrowserProps) {
   const windowSize = useWindowSize();
-  const rows = Math.max(4, props.viewportRows ?? windowSize.rows);
+  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);

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];
 

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/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();