feat: optimize log viewer performance and add CLI TUI routing (#749)

* feat: optimize log viewer performance and add CLI TUI routing

- Add typeFilter to event file reading, filtering by filename before
  reading file contents (8.6x I/O reduction for tree building)
- Add getTreeEventsForJob to LogDataFetcher for selective event loading
- Route `perstack log` to interactive TUI by default, with --text flag
  for legacy text output
- Track per-node token breakdown (input/output/cached) in delegation tree
- Improve flattenTreeAll with visited set and orphan node handling
- Refactor interface-panel to use shared BottomPanel component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: add changeset for log viewer optimization

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: FL4TLiN3

.changeset/log-tui-enhancements.md

@@ -0,0 +1,8 @@
+---
+"@perstack/filesystem-storage": patch
+"@perstack/log": patch
+"@perstack/tui-components": patch
+"perstack": patch
+---
+
+Optimize log viewer performance with filename-level event type filtering and add CLI TUI routing

apps/perstack/bin/cli.ts

@@ -2,7 +2,12 @@
 
 import { PerstackError } from "@perstack/core"
 import { installHandler } from "@perstack/installer"
-import { logHandler, parsePositiveInt } from "@perstack/log"
+import {
+  createLogDataFetcher,
+  createStorageAdapter,
+  logHandler,
+  parsePositiveInt,
+} from "@perstack/log"
 import {
   findConfigPath,
   findLockfile,
@@ -24,6 +29,7 @@ import {
   expertYankHandler,
 } from "@perstack/studio"
 import { runHandler, startHandler } from "@perstack/tui"
+import { renderLogViewer } from "@perstack/tui-components"
 import { Command } from "commander"
 import packageJson from "../package.json" with { type: "json" }
 
@@ -151,7 +157,34 @@ program
   )
   .option("--messages", "Show message history for checkpoint")
   .option("--summary", "Show summarized view")
-  .action((options) => logHandler(options))
+  .option("--text", "Force text output mode (skip interactive TUI)")
+  .action(async (options) => {
+    const hasOutputFlags =
+      options.json || options.pretty || options.summary || options.messages || options.text
+    const hasFilterFlags =
+      options.step ||
+      options.type ||
+      options.errors ||
+      options.tools ||
+      options.delegations ||
+      options.filter ||
+      options.verbose ||
+      options.take !== undefined ||
+      options.offset !== undefined ||
+      options.context !== undefined
+    if (hasOutputFlags || hasFilterFlags) {
+      await logHandler(options)
+    } else {
+      const storagePath = process.env.PERSTACK_STORAGE_PATH ?? `${process.cwd()}/perstack`
+      const adapter = createStorageAdapter(storagePath)
+      const fetcher = createLogDataFetcher(adapter)
+      await renderLogViewer({
+        fetcher,
+        initialJobId: options.job,
+        initialRunId: options.run,
+      })
+    }
+  })
 
 program
   .command("install")

apps/perstack/package.json

@@ -29,6 +29,7 @@
     "@perstack/perstack-toml": "workspace:*",
     "@perstack/studio": "workspace:*",
     "@perstack/tui": "workspace:*",
+    "@perstack/tui-components": "workspace:*",
     "@tsconfig/node22": "^22.0.5",
     "@types/node": "^25.3.0",
     "typescript": "^5.9.3"

bun.lock

@@ -30,7 +30,12 @@ function getEventsByRun(
     .sort((a, b) => a.stepNumber - b.stepNumber)
 }
 
-export function getEventContents(jobId: string, runId: string, maxStepNumber?: number): RunEvent[] {
+export function getEventContents(
+  jobId: string,
+  runId: string,
+  maxStepNumber?: number,
+  typeFilter?: Set<string>,
+): RunEvent[] {
   const runDir = getRunDir(jobId, runId)
   if (!existsSync(runDir)) {
     return []
@@ -42,6 +47,7 @@ export function getEventContents(jobId: string, runId: string, maxStepNumber?: n
       return { file, timestamp: Number(timestamp), stepNumber: Number(step), type }
     })
     .filter((e) => maxStepNumber === undefined || e.stepNumber <= maxStepNumber)
+    .filter((e) => !typeFilter || typeFilter.has(e.type))
     .sort((a, b) => a.timestamp - b.timestamp)
   const events: RunEvent[] = []
   for (const { file } of eventFiles) {

packages/filesystem/src/event.ts

@@ -18,14 +18,20 @@ export interface LogDataFetcher {
   getCheckpoint(jobId: string, checkpointId: string): Promise<Checkpoint>
   getEvents(jobId: string, runId: string): Promise<RunEvent[]>
   getAllEventsForJob(jobId: string): Promise<RunEvent[]>
+  getTreeEventsForJob(jobId: string): Promise<RunEvent[]>
 }
 
 export interface StorageAdapter {
   getAllJobs(): Promise<Job[]>
   retrieveJob(jobId: string): Promise<Job | undefined>
   getCheckpointsByJobId(jobId: string): Promise<Checkpoint[]>
   retrieveCheckpoint(jobId: string, checkpointId: string): Promise<Checkpoint>
-  getEventContents(jobId: string, runId: string, maxStep?: number): Promise<RunEvent[]>
+  getEventContents(
+    jobId: string,
+    runId: string,
+    maxStep?: number,
+    typeFilter?: Set<string>,
+  ): Promise<RunEvent[]>
   getAllRuns(): Promise<RunSetting[]>
   getJobIds(): string[]
   getBasePath(): string
@@ -114,6 +120,27 @@ export function createLogDataFetcher(storage: StorageAdapter): LogDataFetcher {
       }
       return allEvents.sort((a, b) => a.timestamp - b.timestamp)
     },
+
+    async getTreeEventsForJob(jobId: string): Promise<RunEvent[]> {
+      const treeEventTypes = new Set([
+        "startRun",
+        "resumeFromStop",
+        "stopRunByDelegate",
+        "callTools",
+        "completeRun",
+        "stopRunByError",
+        "retry",
+        "continueToNextStep",
+        "resolveToolResults",
+      ])
+      const runs = await this.getRuns(jobId)
+      const allEvents: RunEvent[] = []
+      for (const run of runs) {
+        const events = await storage.getEventContents(jobId, run.runId, undefined, treeEventTypes)
+        allEvents.push(...events)
+      }
+      return allEvents.sort((a, b) => a.timestamp - b.timestamp)
+    },
   }
 }
 
@@ -137,7 +164,8 @@ export function createStorageAdapter(basePath: string): StorageAdapter {
     getCheckpointsByJobId: async (jobId) => getCheckpointsByJobId(jobId),
     retrieveCheckpoint: async (jobId, checkpointId) =>
       defaultRetrieveCheckpoint(jobId, checkpointId),
-    getEventContents: async (jobId, runId, maxStep) => getEventContents(jobId, runId, maxStep),
+    getEventContents: async (jobId, runId, maxStep, typeFilter) =>
+      getEventContents(jobId, runId, maxStep, typeFilter),
     getAllRuns: async () => getAllRuns(),
     getJobIds: () => {
       const jobsDir = path.join(basePath, "jobs")

packages/log/src/data-fetcher.ts

@@ -1,7 +1,7 @@
-import { Box, Text, useInput } from "ink"
+import { Text } from "ink"
 import type React from "react"
 import { colors } from "../../colors.js"
-import { useTextInput } from "../../hooks/use-text-input.js"
+import { BottomPanel } from "../../components/bottom-panel.js"
 import type { DelegationTreeState } from "../hooks/use-delegation-tree.js"
 import type { RunStatus } from "../hooks/use-execution-state.js"
 import { DelegationTree } from "./delegation-tree.js"
@@ -38,25 +38,10 @@ export const InterfacePanel = ({
   cacheHitRate,
   elapsedTime,
 }: InterfacePanelProps): React.ReactNode => {
-  const { input, handleInput } = useTextInput({
-    onSubmit,
-    canSubmit: runStatus !== "running",
-  })
-
-  useInput(handleInput)
-
   const isWaiting = runStatus === "waiting"
 
   return (
-    <Box
-      flexDirection="column"
-      borderStyle="single"
-      borderColor={colors.muted}
-      borderTop={true}
-      borderBottom={false}
-      borderLeft={false}
-      borderRight={false}
-    >
+    <BottomPanel onSubmit={onSubmit} canSubmit={runStatus !== "running"}>
       {isWaiting ? (
         <Text color={colors.accent}>Waiting for query...</Text>
       ) : (
@@ -87,11 +72,6 @@ export const InterfacePanel = ({
         </>
       )}
       <DelegationTree state={delegationTreeState} />
-      <Text>
-        <Text color={colors.muted}>&gt; </Text>
-        <Text>{input}</Text>
-        <Text color={colors.accent}>_</Text>
-      </Text>
-    </Box>
+    </BottomPanel>
   )
 }

packages/tui-components/src/execution/components/interface-panel.tsx

@@ -133,28 +133,37 @@ export function getStatusCounts(state: DelegationTreeState): {
   return { running, waiting }
 }
 
-/**
- * Flatten the entire tree without pruning — includes all nodes regardless of status.
- * Useful for testing and debugging where the full tree structure matters.
- */
+/** Flatten tree without pruning - shows all nodes including completed/error. For log viewer. */
 export function flattenTreeAll(state: DelegationTreeState): FlatTreeNode[] {
-  if (!state.rootRunId) return []
-  const root = state.nodes.get(state.rootRunId)
-  if (!root) return []
-
   const result: FlatTreeNode[] = []
+  const visited = new Set<string>()
 
   function dfs(nodeId: string, depth: number, isLast: boolean, ancestorIsLast: boolean[]) {
     const node = state.nodes.get(nodeId)
-    if (!node) return
+    if (!node || visited.has(nodeId)) return
+
+    visited.add(nodeId)
     result.push({ node, depth, isLast, ancestorIsLast: [...ancestorIsLast] })
-    for (let i = 0; i < node.childRunIds.length; i++) {
-      const childIsLast = i === node.childRunIds.length - 1
-      dfs(node.childRunIds[i]!, depth + 1, childIsLast, [...ancestorIsLast, isLast])
+
+    const children = node.childRunIds
+    for (let i = 0; i < children.length; i++) {
+      const childIsLast = i === children.length - 1
+      dfs(children[i]!, depth + 1, childIsLast, [...ancestorIsLast, isLast])
+    }
+  }
+
+  if (state.rootRunId) {
+    dfs(state.rootRunId, 0, true, [])
+  }
+
+  // Show orphaned nodes (no parent in tree) at root level
+  for (const [nodeId, node] of state.nodes) {
+    if (!visited.has(nodeId)) {
+      visited.add(nodeId)
+      result.push({ node, depth: 0, isLast: true, ancestorIsLast: [] })
     }
   }
 
-  dfs(state.rootRunId, 0, true, [])
   return result
 }
 
@@ -350,6 +359,9 @@ export function processDelegationTreeEvent(
         node.actionLabel = label
         node.actionFileArg = fileArg
         node.totalTokens += event.usage.totalTokens
+        node.inputTokens += event.usage.inputTokens
+        node.outputTokens += event.usage.outputTokens
+        node.cachedInputTokens += event.usage.cachedInputTokens
         state.jobTotalTokens += event.usage.totalTokens
         state.jobReasoningTokens += event.usage.reasoningTokens
         state.jobInputTokens += event.usage.inputTokens
@@ -381,6 +393,9 @@ export function processDelegationTreeEvent(
         node.actionLabel = "Completed"
         node.actionFileArg = undefined
         node.totalTokens += event.usage.totalTokens
+        node.inputTokens += event.usage.inputTokens
+        node.outputTokens += event.usage.outputTokens
+        node.cachedInputTokens += event.usage.cachedInputTokens
         state.jobTotalTokens += event.usage.totalTokens
         state.jobReasoningTokens += event.usage.reasoningTokens
         state.jobInputTokens += event.usage.inputTokens
@@ -425,6 +440,9 @@ export function processDelegationTreeEvent(
       const node = state.nodes.get(nodeId)
       if (node) {
         node.totalTokens += event.usage.totalTokens
+        node.inputTokens += event.usage.inputTokens
+        node.outputTokens += event.usage.outputTokens
+        node.cachedInputTokens += event.usage.cachedInputTokens
         state.jobTotalTokens += event.usage.totalTokens
         state.jobReasoningTokens += event.usage.reasoningTokens
         state.jobInputTokens += event.usage.inputTokens

packages/tui-components/src/execution/hooks/use-delegation-tree.ts

@@ -42,7 +42,7 @@ async function extractJobQuery(fetcher: LogDataFetcher, job: Job): Promise<strin
 }
 
 async function buildRunTree(fetcher: LogDataFetcher, jobId: string) {
-  const allEvents = await fetcher.getAllEventsForJob(jobId)
+  const allEvents = await fetcher.getTreeEventsForJob(jobId)
   return buildRunTreeFromEvents(allEvents)
 }