@superjackfruitlabs/salaam 0.0.4 → 0.0.5

package/src/tui-view.ts

@@ -1,10 +1,20 @@
 import { Markdown, wrapTextWithAnsi, visibleWidth, type Component } from '@earendil-works/pi-tui';
 import { basename } from 'node:path';
 import { SalaamTheme, safeText, shortId, humanTool } from './tui-theme.js';
-import type { OperatorClient } from './tui-client.js';
+import { typedText } from './shell-passthrough.js';
+import {
+  instructionsLabel,
+  sessionFailure,
+  usageCost,
+  usageInput,
+  type OperatorClient,
+} from './tui-client.js';
 import type { WorkspaceChange } from './workspace-diff.js';
 import { workspaceDiff } from './workspace-diff.js';
 import { commandTerminal } from './coding.js';
+import { interactiveCoding, runningAttempt } from './tui-turn-keys.js';
+import { backgroundNote, changeCounts } from './tui-review.js';
+import { activityVerb, progressLine, toolLine, type ToolLine } from './tui-activity.js';
 
 export type ViewTab = 'conversation' | 'changes' | 'commands' | 'context';
 export interface DiffPage {
@@ -24,6 +34,57 @@ export interface ViewModel {
   log?: { id: string; text: string; offset: number; complete: boolean };
   busy: boolean;
   continuation?: string;
+  /** The Changes tab of a local coding session (tui-review.ts). */
+  review?: import('./tui-review.js').ReviewView;
+  /** Phase 2b: the session's mode, its access (full access or YOLO) and where commands run. */
+  mode?: { mode: string; access?: 'full' | 'yolo'; sandbox?: string };
+  /** Trial polish #9: every tool call with its full recorded output, not the compact lines. */
+  transcript?: boolean;
+  /** When the running turn was first seen, for the progress line's elapsed seconds. */
+  turn?: { attempt: string; since: number };
+}
+/** The session's tool calls, oldest first, each as one compact line. */
+export function toolLines(
+  view: ViewModel,
+): (ToolLine & { parent?: string; key: string; output?: string })[] {
+  const calls = new Map<
+    string,
+    {
+      tool: string;
+      input?: string;
+      finished?: { failed?: boolean; output?: string };
+      parent?: string;
+    }
+  >();
+  for (const event of view.client.activity) {
+    const p = event.payload;
+    const key = p.attempt_id + ':' + p.tool_call_id;
+    const before = calls.get(key);
+    calls.set(key, {
+      tool: p.tool,
+      input: event.kind === 'tool.started' ? p.input : before?.input,
+      finished:
+        event.kind === 'tool.finished' ? { failed: p.failed, output: p.output } : before?.finished,
+      parent: p.parent_tool_call_id ? p.attempt_id + ':' + p.parent_tool_call_id : before?.parent,
+    });
+  }
+  return [...calls.entries()].map(([key, c]) => {
+    const line = toolLine(c.tool, c.input, c.finished);
+    // A command's recorded result is JSON; the transcript shows its output as text.
+    return { key, parent: c.parent, output: line.full ?? c.finished?.output, ...line };
+  });
+}
+/** How the status line names a mode. */
+export function modeLabel(mode: string): string {
+  return (
+    {
+      review: 'review',
+      'accept-edits': 'accept edits',
+      auto: 'auto',
+      inspect: 'inspect only',
+      'scoped-edit': 'scoped edits',
+    }[mode] ?? mode
+  );
 }
 export function modelLabel(client: OperatorClient): string {
   const route = client.snapshot?.provider_route ?? client.health?.provider_route;
@@ -38,6 +99,12 @@ export function modelLabel(client: OperatorClient): string {
     route.model.replace('claude-sonnet-', 'Claude Sonnet ').replace(/(\d)-(\d)$/, '$1.$2') + warning
   );
 }
+/** 950 → "950", 12_400 → "12.4k", 2_300_000 → "2.3M". */
+export function compactTokens(n: number): string {
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return (n / 1000).toFixed(n < 10_000 ? 1 : 0).replace(/\.0$/, '') + 'k';
+  return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
+}
 export class Dynamic implements Component {
   constructor(private readonly content: (width: number) => string[]) {}
   render(width: number): string[] {
@@ -99,19 +166,65 @@ export function status(view: ViewModel, width: number): string[] {
   const active = c.snapshot?.attempts.find((a) =>
     ['accepted', 'dispatching', 'running'].includes(a.state),
   );
-  const state = view.busy
-    ? 'Working…'
-    : pending
-      ? `${pending} approval${pending === 1 ? '' : 's'} waiting · ctrl+o to review`
-      : c.notice ||
-        (!c.snapshot
-          ? 'ctrl+n to start · ctrl+p to return to a session'
-          : active
-            ? `Agent ${active.state} · detach anytime`
-            : c.controlling
-              ? 'Ready when you are.'
-              : 'Observing · ctrl+k → Take control');
-  const tone = pending ? 'amber' : c.connection === 'reconnecting' ? 'amber' : 'muted';
+  // The turn is timed from when this terminal first saw it running (attempts carry no start time).
+  if (active && view.turn?.attempt !== active.id)
+    view.turn = { attempt: active.id, since: Date.now() };
+  if (!active) view.turn = undefined;
+  const turn = active ? view.turn : undefined;
+  const running = toolLines(view)
+    .filter((l) => l.state === 'running')
+    .at(-1);
+  const state =
+    turn && !pending
+      ? progressLine(
+          activityVerb(running),
+          turn.since,
+          Date.now(),
+          c.usage?.observations
+            ? compactTokens(c.usage.known_input + c.usage.known_output)
+            : undefined,
+        )
+      : view.busy
+        ? 'Working…'
+        : pending
+          ? `${pending} approval${pending === 1 ? '' : 's'} waiting · ctrl+o to review`
+          : sessionFailure(c.snapshot) ||
+            c.notice ||
+            (!c.snapshot
+              ? 'ctrl+n to start · ctrl+p to return to a session'
+              : active
+                ? `Agent ${active.state} · detach anytime`
+                : c.controlling
+                  ? 'Ready when you are.'
+                  : 'Observing · ctrl+k → Take control');
+  const tone = pending
+    ? 'amber'
+    : sessionFailure(c.snapshot) && !view.busy
+      ? 'red'
+      : turn
+        ? 'jade'
+        : c.connection === 'reconnecting'
+          ? 'amber'
+          : 'muted';
+  const guidance = c.snapshot?.project_instructions?.files.length
+    ? '  Using ' + instructionsLabel(c.snapshot.project_instructions)
+    : '';
+  const spend = c.usage?.observations
+    ? '  ' +
+      compactTokens(usageInput(c.usage) + c.usage.known_output) +
+      ' tokens · $' +
+      usageCost(c.usage).toFixed(2)
+    : '';
+  const mode = view.mode
+    ? '  ' +
+      t.ink('mode ' + modeLabel(view.mode.mode), 'muted') +
+      (view.mode.access === 'yolo'
+        ? ' ' + t.ink('YOLO', 'red')
+        : view.mode.access === 'full'
+          ? ' ' + t.ink('FULL ACCESS', 'amber')
+          : '') +
+      t.ink(' · shift+tab', 'muted')
+    : '';
   const identity = c.snapshot
     ? '  session ' +
       shortId(c.snapshot.id) +
@@ -119,17 +232,28 @@ export function status(view: ViewModel, width: number): string[] {
     : '';
   return [
     t.line(
-      t.ink(safeText(state).replace(/\bPi\b/g, 'Worker'), tone) + t.ink(identity, 'muted'),
+      t.ink(safeText(state).replace(/\bPi\b/g, 'Worker'), tone) +
+        mode +
+        t.ink(safeText(guidance) + spend + identity, 'muted'),
       width,
     ),
     t.line(
-      [
-        t.key('enter', 'send'),
-        t.key('alt+enter', 'newline'),
-        t.key('ctrl+k', 'actions'),
-        t.key('ctrl+p', 'sessions'),
-        t.key('ctrl+c', 'detach'),
-      ].join('   '),
+      (c.snapshot && interactiveCoding(c.snapshot) && runningAttempt(c.snapshot)
+        ? [
+            t.key('esc', 'interrupt'),
+            t.key('enter', 'steer'),
+            t.key('tab', 'queue'),
+            t.key('alt+enter', 'newline'),
+            t.key('ctrl+c ×2', 'leave'),
+          ]
+        : [
+            t.key('enter', 'send'),
+            t.key('alt+enter', 'newline'),
+            t.key('ctrl+k', 'actions'),
+            t.key('ctrl+p', 'sessions'),
+            t.key('ctrl+c ×2', 'leave'),
+          ]
+      ).join('   '),
       width,
     ),
   ];
@@ -154,6 +278,80 @@ export class DocumentView implements Component {
     }
     return cached.markdown.render(Math.max(1, width));
   }
+  /** Per-file review of what changed in the folder since the review base. */
+  private reviewLines(width: number): string[] {
+    const t = this.view.theme,
+      review = this.view.review,
+      lines = this.title('CHANGES SINCE REVIEW', width);
+    if (!review) return [...lines, ...this.text('Loading changes…', width)];
+    if (!review.data)
+      return [
+        ...lines,
+        ...this.text(
+          'Changes appear here after the first turn starts; each turn is checkpointed.',
+          width,
+        ),
+      ];
+    const note = backgroundNote(review.data.background_running);
+    if (note) lines.push(...this.text(note, width));
+    if (!review.data.files.length)
+      return [
+        ...lines,
+        ...this.text('Nothing to review: the folder matches what you accepted.', width),
+      ];
+    review.data.files.forEach((change, i) => {
+      const mark = i === review.file ? '▸ ' : '  ';
+      lines.push(
+        t.line(
+          mark +
+            safeText(change.path) +
+            '  ' +
+            t.ink(change.status + ' · ' + changeCounts(change), 'muted'),
+          width,
+        ),
+      );
+    });
+    lines.push(t.fill('', width));
+    const file = review.data.files[review.file]!;
+    const hunks = review.hunks ?? [];
+    lines.push(
+      ...this.title(
+        safeText(file.path) +
+          (review.hunk >= 0 ? ` · hunk ${review.hunk + 1} of ${hunks.length}` : ' · whole file'),
+        width,
+      ),
+    );
+    if (!hunks.length) lines.push(...this.text('No text diff to show for this file.', width));
+    hunks.forEach((hunk, i) => {
+      const selected = i === review.hunk;
+      lines.push(
+        ...t
+          .highlight(safeText(hunk.text).replace(/\n$/, ''), 'diff')
+          .flatMap((line) => wrapTextWithAnsi(line, Math.max(1, width - 4)))
+          .map((line) => t.line((selected ? '┃ ' : review.hunk >= 0 ? '  ' : '') + line, width)),
+      );
+    });
+    lines.push(
+      t.fill('', width),
+      t.line(
+        t.key('alt+←/→', 'file') +
+          '   ' +
+          t.key('alt+↑/↓', 'hunk') +
+          '   ' +
+          t.key('a', 'accept') +
+          '   ' +
+          t.key('r', 'revert') +
+          '   ' +
+          t.key('i', 'instruct'),
+        width,
+      ),
+      ...this.text(
+        'a/r/i work while the message box is empty. Accept marks a change reviewed; revert writes the reviewed base back. /rewind returns to before any turn.',
+        width,
+      ),
+    );
+    return lines;
+  }
   private title(label: string, width: number, role: 'jade' | 'amber' | 'muted' = 'jade'): string[] {
     const t = this.view.theme;
     return [t.line(t.ink(label, role, true), width)];
@@ -191,7 +389,7 @@ export class DocumentView implements Component {
       ),
       t.fill('', width),
       t.line(t.key('ctrl+n', 'new session') + '     ' + t.key('ctrl+p', 'recent sessions'), width),
-      t.line(t.key('ctrl+k', 'all actions') + '      ' + t.key('ctrl+g', 'review changes'), width),
+      t.line(t.key('ctrl+k', 'all actions') + '      ' + t.key('alt+g', 'review changes'), width),
       ...(c.snapshot
         ? [
             t.fill('', width),
@@ -201,7 +399,10 @@ export class DocumentView implements Component {
                   ? 'Owned coding workspace · guarded edits'
                   : c.snapshot.capabilities.includes('local-workspace-read')
                     ? c.snapshot.capabilities.includes('local-coding-reviewed')
-                      ? 'Local coding · reviewed edits · commands run as your user'
+                      ? 'Local coding · reviewed edits · commands ' +
+                        (this.view.mode?.sandbox
+                          ? '· ' + this.view.mode.sandbox
+                          : 'run as your user')
                       : 'Local workspace · read, list and search · /coding for edits and commands'
                     : 'Conversation session · coding tools are off',
                 'muted',
@@ -212,6 +413,51 @@ export class DocumentView implements Component {
         : []),
     ];
   }
+  /** Compact lines for tool calls (with their output in the full transcript), children indented. */
+  private toolBlock(
+    calls: ReturnType<typeof toolLines>,
+    byKey: Map<string, ReturnType<typeof toolLines>[number]>,
+    width: number,
+  ): string[] {
+    const t = this.view.theme,
+      lines: string[] = [],
+      shown = this.view.transcript ? calls : calls.slice(-8);
+    if (shown.length < calls.length)
+      lines.push(
+        t.line(
+          t.ink(`  … ${calls.length - shown.length} earlier calls · ctrl+x shows all`, 'muted'),
+          width,
+        ),
+      );
+    for (const call of shown) {
+      let depth = 0,
+        parent = call.parent;
+      const visited = new Set<string>();
+      while (parent && !visited.has(parent) && depth < 4) {
+        visited.add(parent);
+        depth++;
+        parent = byKey.get(parent)?.parent;
+      }
+      const indent = depth ? '  '.repeat(depth) + '└─ ' : '';
+      lines.push(
+        t.line(
+          t.ink(
+            call.state === 'running' ? '◌ ' : call.state === 'failed' ? '× ' : '✓ ',
+            call.state === 'failed' ? 'red' : call.state === 'running' ? 'amber' : 'jade',
+          ) + t.ink(indent + call.label),
+          width,
+        ),
+      );
+      const detail = this.view.transcript
+        ? call.output
+          ? safeText(call.output).split('\n').slice(0, 40)
+          : []
+        : call.tail;
+      for (const tail of detail)
+        lines.push(...this.text('  ' + ' '.repeat(indent.length) + '│ ' + tail, width));
+    }
+    return lines;
+  }
   render(width: number): string[] {
     const { client: c, theme: t, tab } = this.view;
     if (!c.snapshot) {
@@ -245,7 +491,37 @@ export class DocumentView implements Component {
           t.fill('', width),
         );
       const ids = new Set(c.snapshot.messages.map((m) => m.entry_id));
+      // Each turn's tool calls sit where they ran: before the message that followed them.
+      const calls = toolLines(this.view),
+        byKey = new Map(calls.map((l) => [l.key, l])),
+        groups = new Map<string, typeof calls>(),
+        rootOf = new Map<string, string>(),
+        placed = new Set<string>();
+      for (const call of calls) {
+        let root = call.key;
+        const visited = new Set<string>();
+        while (byKey.get(root)?.parent && !visited.has(root) && visited.size < 8) {
+          visited.add(root);
+          root = byKey.get(root)!.parent!;
+        }
+        groups.set(root, [...(groups.get(root) ?? []), call]);
+        rootOf.set(root.slice(root.indexOf(':') + 1), root);
+      }
       for (const message of c.snapshot.messages) {
+        const before = (message.tool_calls ?? [])
+          .map((id) => rootOf.get(id))
+          .filter((root): root is string => !!root && !placed.has(root));
+        if (before.length) {
+          for (const root of before) placed.add(root);
+          lines.push(
+            ...this.toolBlock(
+              before.flatMap((root) => groups.get(root)!),
+              byKey,
+              width,
+            ),
+            t.fill('', width),
+          );
+        }
         lines.push(
           ...this.title(
             message.role === 'user' ? 'YOU' : 'SALAAM',
@@ -254,9 +530,11 @@ export class DocumentView implements Component {
           ),
         );
         lines.push(
-          ...this.prose(message.entry_id, message.text, width - 4).map((line) =>
-            t.line(line, width),
-          ),
+          ...this.prose(
+            message.entry_id,
+            message.role === 'user' ? typedText(message.text) : message.text,
+            width - 4,
+          ).map((line) => t.line(line, width)),
           ...(message.truncated
             ? this.text(
                 'Message preview truncated. Read its full history entry to inspect all content.',
@@ -275,54 +553,28 @@ export class DocumentView implements Component {
             width,
             'muted',
           ),
-          ...this.text(submission.text, width),
+          ...this.text(typedText(submission.text), width),
           t.fill('', width),
         );
       }
-      const tools = new Map<
-        string,
-        { label: string; state: string; failed: boolean; parent?: string }
-      >();
-      for (const event of c.activity) {
-        const p = event.payload;
-        const key = p.attempt_id + ':' + p.tool_call_id;
-        const before = tools.get(key);
-        tools.set(key, {
-          label:
-            event.kind === 'tool.started'
-              ? humanTool(p.tool, p.input)
-              : (before?.label ?? humanTool(p.tool)),
-          state: event.kind === 'tool.started' ? 'running' : p.failed ? 'failed' : 'finished',
-          failed: !!p.failed,
-          parent: p.parent_tool_call_id
-            ? p.attempt_id + ':' + p.parent_tool_call_id
-            : before?.parent,
-        });
-      }
-      if (tools.size) {
-        lines.push(...this.title('TOOL ACTIVITY', width, 'muted'));
-        for (const tool of [...tools.values()].slice(-6)) {
-          let depth = 0,
-            parent = tool.parent;
-          const visited = new Set<string>();
-          while (parent && !visited.has(parent) && depth < 4) {
-            visited.add(parent);
-            depth++;
-            parent = tools.get(parent)?.parent;
-          }
-          lines.push(
-            t.line(
-              t.ink(
-                tool.state === 'running' ? '◌ ' : tool.failed ? '× ' : '✓ ',
-                tool.failed ? 'red' : tool.state === 'running' ? 'amber' : 'jade',
-              ) +
-                t.ink((depth ? '  '.repeat(depth) + '└─ ' : '') + tool.label) +
-                t.ink('  ' + tool.state, 'muted'),
-              width,
-            ),
-          );
-        }
-        lines.push(t.fill('', width));
+      // Calls not placed before a message: the turn still running, or ones history no longer shows.
+      const rest = [...groups.entries()].filter(([root]) => !placed.has(root));
+      if (rest.length) {
+        lines.push(
+          ...this.title(
+            this.view.transcript
+              ? 'TRANSCRIPT · every tool call'
+              : 'TOOLS · ctrl+x for the full transcript',
+            width,
+            'muted',
+          ),
+          ...this.toolBlock(
+            rest.flatMap(([, group]) => group),
+            byKey,
+            width,
+          ),
+          t.fill('', width),
+        );
       }
       if (c.preview)
         lines.push(
@@ -359,23 +611,20 @@ export class DocumentView implements Component {
         );
       for (const key of this.cache.keys())
         if (key !== 'live-preview' && !ids.has(key)) this.cache.delete(key);
-    } else if (
-      (tab === 'changes' || tab === 'commands') &&
-      c.snapshot.capabilities.includes('local-coding-reviewed')
-    ) {
-      const prefix = tab === 'changes' ? 'Local edit:' : 'Local command:';
+    } else if (tab === 'changes' && c.snapshot.capabilities.includes('local-coding-reviewed')) {
+      lines.push(...this.reviewLines(width));
+    } else if (tab === 'commands' && c.snapshot.capabilities.includes('local-coding-reviewed')) {
       const operations = c.snapshot.operations.filter(
-        (op) => op.kind === 'workspace' && op.target.startsWith(prefix),
-      );
-      lines.push(
-        ...this.title(tab === 'changes' ? 'REVIEWED LOCAL EDITS' : 'LOCAL COMMAND RESULTS', width),
+        (op) => op.kind === 'workspace' && op.target.startsWith('Local command:'),
       );
+      lines.push(...this.title('LOCAL COMMAND RESULTS', width));
       if (!operations.length)
         lines.push(
           ...this.text(
-            tab === 'changes'
-              ? 'Proposed edits appear here with their approval and apply outcome.'
-              : 'Commands appear here with their recorded exit status and output. Commands run as your local user.',
+            'Commands appear here with their recorded exit status and output. ' +
+              (this.view.mode?.sandbox
+                ? 'Where commands run: ' + this.view.mode.sandbox + '.'
+                : 'Commands run as your local user.'),
             width,
           ),
         );
@@ -400,6 +649,8 @@ export class DocumentView implements Component {
         ),
       );
     } else if (tab === 'changes') {
+      const failed = sessionFailure(c.snapshot);
+      if (failed && !c.workspace) return this.text(failed, width);
       if (!c.workspace)
         return this.text(
           'This session has no coding workspace. Create a coding session to review guarded edits.',
@@ -810,7 +1061,7 @@ export class DocumentView implements Component {
             width,
           ),
           ...this.text(
-            `Recorded tokens: ${c.usage.known_input} input · ${c.usage.known_output} output`,
+            `Recorded tokens: ${usageInput(c.usage)} input (${c.usage.known_cache_read ?? 0} cache reads, ${c.usage.known_cache_write ?? 0} cache writes) · ${c.usage.known_output} output`,
             width,
           ),
           ...this.text(
@@ -881,12 +1132,14 @@ export function sidebar(view: ViewModel, width: number): string[] {
   if (c.usage) {
     label('USAGE');
     row(
-      c.usage.known_input.toLocaleString() +
+      usageInput(c.usage).toLocaleString() +
         ' in · ' +
         c.usage.known_output.toLocaleString() +
         ' out',
     );
-    row('Est. $' + c.usage.estimated_cost.toFixed(4), 'muted');
+    if (c.usage.known_cache_read)
+      row(c.usage.known_cache_read.toLocaleString() + ' from cache', 'muted');
+    row((c.usage.estimated_observations ? 'Est. $' : '$') + usageCost(c.usage).toFixed(4), 'muted');
     if (c.usage.unknown_observations)
       row(c.usage.unknown_observations + ' unknown entries', 'amber');
   }
@@ -903,7 +1156,7 @@ export function sidebar(view: ViewModel, width: number): string[] {
   );
   row(
     c.snapshot?.capabilities.includes('local-coding-reviewed')
-      ? 'Commands · local user'
+      ? 'Commands · ' + (view.mode?.sandbox ?? 'local user')
       : c.workspace && c.health?.execution?.commands
         ? 'Commands · isolated'
         : 'Commands · off',