feat(kimi-code): two-line collapsed tool cards with width-aware headers

.changeset/compact-tool-cards.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Collapse finished tool calls in the transcript to a header plus one marked outcome row: short output is shown whole, hidden output is counted (`N more lines`, `+N more`) and revealed by `Ctrl+O`, which the footer advertises while it is available.

apps/kimi-code/src/tui/components/chrome/footer.ts

@@ -34,6 +34,9 @@ import {
   usagePercentFromRatio,
 } from '#/utils/usage/usage-format';
 
+/** What the footer's fixed ctrl+o hint offers: expand collapsed tool output, or collapse it again. */
+export type ToolOutputExpandHint = 'expand' | 'collapse';
+
 const DEFAULT_STATUS_LINE_ITEMS = ['mode', 'goal', 'model', 'tasks', 'cwd', 'git'] as const;
 
 const MAX_CWD_SEGMENTS = 3;
@@ -196,6 +199,7 @@ export class FooterComponent implements Component {
   private gitCacheWorkDir: string;
   private transientHint: string | null = null;
   private warningHint: string | null = null;
+  private expandHintProvider: (() => ToolOutputExpandHint | null) | null = null;
   private goalSnapshotKey: string | null = null;
   private goalObservedAtMs = Date.now();
   private goalTimer: ReturnType<typeof setInterval> | null = null;
@@ -271,6 +275,16 @@ export class FooterComponent implements Component {
     this.warningHint = hint;
   }
 
+  /**
+   * Source of the fixed `ctrl+o expand` / `ctrl+o collapse` hint on line 1:
+   * `expand` while the transcript holds collapsed tool output ctrl+o can
+   * reveal, `collapse` once it is shown, `null` when there is nothing to
+   * toggle. Read on every render so it tracks the transcript exactly.
+   */
+  setExpandHintProvider(provider: () => ToolOutputExpandHint | null): void {
+    this.expandHintProvider = provider;
+  }
+
   /**
    * Sync both background-task badges with live counts. Each non-zero
    * count produces its own bracketed badge on line 1; zeros hide them
@@ -311,26 +325,24 @@ export class FooterComponent implements Component {
       const leftLine = left.join('  ');
       const leftWidth = visibleWidth(leftLine);
 
-      // Rotating hint tips stay on the right unless they were given an
-      // inline slot in items (rendered above at their configured position)
-      // or the user dropped 'tips' from items.
-      let tipText = '';
+      // The right side holds the fixed ctrl+o hint (while the transcript has
+      // tool output to expand or collapse) and the rotating tips, unless the
+      // tips were given an inline slot in items or dropped from items. The
+      // hint never rotates and wins over a tip that no longer fits.
       const tipsInline = order.includes('tips');
       const showTips = !tipsInline && (configured === null || configured.includes('tips'));
+      const tipCandidates: string[] = [];
       if (showTips) {
         const { primary, pair } = tipsForIndex(currentTipIndex());
-        const gap = 2;
-        const remaining = Math.max(0, width - leftWidth - gap);
-        if (pair && visibleWidth(pair) <= remaining) {
-          tipText = pair;
-        } else if (primary && visibleWidth(primary) <= remaining) {
-          tipText = primary;
-        }
+        if (pair) tipCandidates.push(pair);
+        if (primary) tipCandidates.push(primary);
       }
+      const remaining = Math.max(0, width - leftWidth - 2);
+      const rightText = this.buildRightText(tipCandidates, remaining, colors);
 
-      if (tipText) {
-        const pad = width - leftWidth - visibleWidth(tipText);
-        line1 = leftLine + ' '.repeat(Math.max(0, pad)) + chalk.hex(colors.textMuted)(tipText);
+      if (rightText.length > 0) {
+        const pad = width - leftWidth - visibleWidth(rightText);
+        line1 = leftLine + ' '.repeat(Math.max(0, pad)) + rightText;
       } else if (leftWidth <= width) {
         line1 = leftLine;
       } else {
@@ -365,6 +377,24 @@ export class FooterComponent implements Component {
     return [truncateToWidth(line1, width), truncateToWidth(line2, width)];
   }
 
+  /** The fixed ctrl+o hint plus the first rotating tip that still fits beside it. */
+  private buildRightText(tips: readonly string[], remaining: number, colors: ColorPalette): string {
+    const hint = this.expandHintProvider?.() ?? null;
+    if (hint === null) {
+      const tip = tips.find((candidate) => visibleWidth(candidate) <= remaining);
+      return tip === undefined ? '' : chalk.hex(colors.textMuted)(tip);
+    }
+    const shortcut = `ctrl+o ${hint}`;
+    for (const tip of tips) {
+      if (visibleWidth(`${shortcut}${TIP_SEPARATOR}${tip}`) <= remaining) {
+        return (
+          chalk.hex(colors.textDim)(shortcut) + chalk.hex(colors.textMuted)(`${TIP_SEPARATOR}${tip}`)
+        );
+      }
+    }
+    return visibleWidth(shortcut) <= remaining ? chalk.hex(colors.textDim)(shortcut) : '';
+  }
+
   /**
    * Rendered pieces per status-line slot. Empty-content slots (e.g. no goal,
    * outside a git repo) yield an empty list so composition just skips them.

apps/kimi-code/src/tui/components/messages/read-group.ts

@@ -4,7 +4,8 @@
  * It follows the same structure as `AgentGroupComponent`, with a smaller
  * surface:
  * - one summary header and a tree body listing each file path and status;
- * - permanently grouped, while the body remains visible;
+ * - permanently grouped; the body is shown only while expanded (ctrl+o),
+ *   the collapsed group is the header line alone;
  * - 200ms throttling, matching AgentGroup;
  * - state stays in each `ToolCallComponent`; the group only reads snapshots.
  *
@@ -27,6 +28,7 @@ import { STATUS_BULLET } from '#/tui/constant/symbols';
 import { currentTheme } from '#/tui/theme';
 
 import type { ToolCallComponent, ToolCallReadSnapshot } from './tool-call';
+import { TruncatedHeaderLine } from './truncated-header-line';
 
 const THROTTLE_MS = 200;
 
@@ -37,16 +39,17 @@ interface ReadEntry {
 
 export class ReadGroupComponent extends Container {
   private readonly entries: ReadEntry[] = [];
-  private readonly headerText: Text;
+  private readonly headerText: TruncatedHeaderLine;
   private readonly bodyContainer: Container;
   private throttleTimer: ReturnType<typeof setTimeout> | null = null;
   private lastFlushPhases = new Map<string, ToolCallReadSnapshot['phase']>();
   private _invalidating = false;
+  private expanded = false;
 
   constructor(private readonly ui: TUI | undefined) {
     super();
     this.addChild(new Spacer(1));
-    this.headerText = new Text('', 0, 0);
+    this.headerText = new TruncatedHeaderLine('');
     this.addChild(this.headerText);
     this.bodyContainer = new Container();
     this.addChild(this.bodyContainer);
@@ -56,6 +59,18 @@ export class ReadGroupComponent extends Container {
     return this.entries.length;
   }
 
+  /** Global ctrl+o toggle: the per-file body is only rendered while expanded. */
+  setExpanded(expanded: boolean): void {
+    if (this.expanded === expanded) return;
+    this.expanded = expanded;
+    this.flushRender();
+  }
+
+  /** The per-file bodies only render while expanded, so any attached Read is hidden content. */
+  hasHiddenContent(): boolean {
+    return this.entries.length > 0;
+  }
+
   /**
    * Borrows a standalone `ToolCallComponent` into the group as a hidden state
    * container. Snapshot changes trigger throttled refreshes. Re-attaching the
@@ -112,13 +127,15 @@ export class ReadGroupComponent extends Container {
     this.headerText.setText(this.buildHeader(snapshots.length, pending, failed, totalLines));
 
     this.bodyContainer.clear();
-    const visibleSnapshots = snapshots.filter(
-      (snap) => snap.filePath !== undefined && snap.filePath.length > 0,
-    );
-    visibleSnapshots.forEach((snap, idx) => {
-      const isLast = idx === visibleSnapshots.length - 1;
-      this.bodyContainer.addChild(new Text(this.buildBodyLine(snap, isLast), 0, 0));
-    });
+    if (this.expanded) {
+      const visibleSnapshots = snapshots.filter(
+        (snap) => snap.filePath !== undefined && snap.filePath.length > 0,
+      );
+      visibleSnapshots.forEach((snap, idx) => {
+        const isLast = idx === visibleSnapshots.length - 1;
+        this.bodyContainer.addChild(new Text(this.buildBodyLine(snap, isLast), 0, 0));
+      });
+    }
 
     this.lastFlushPhases.clear();
     this.entries.forEach((entry, i) => {

apps/kimi-code/src/tui/components/messages/shell-execution.ts

@@ -5,7 +5,8 @@ import { currentTheme } from '#/tui/theme';
 import type { ToolCallBlockData, ToolResultBlockData } from '#/tui/types';
 
 import type { ResultRenderer } from './tool-renderers/types';
-import { PREVIEW_LINES } from './tool-renderers/types';
+import { isSpilledToolOutput, PREVIEW_LINES } from './tool-renderers/types';
+import { outcomeRows } from './tool-renderers/outcome';
 import { TruncatedOutputComponent } from './tool-renderers/truncated';
 
 export interface ShellExecutionOptions {
@@ -19,8 +20,6 @@ export interface ShellExecutionOptions {
    * even when the header preview was truncated.
    */
   readonly commandPreviewLines?: number;
-  readonly resultPreviewLines?: number;
-  readonly tailOutput?: boolean;
   readonly expandHint?: boolean;
 }
 
@@ -33,13 +32,7 @@ export class ShellExecutionComponent extends Container {
     }
 
     if (options.result !== undefined) {
-      this.addResultPreview(
-        options.result,
-        options.expanded ?? false,
-        options.resultPreviewLines ?? PREVIEW_LINES,
-        options.tailOutput ?? false,
-        options.expandHint ?? true,
-      );
+      this.addResultPreview(options.result, options.expanded ?? false, options.expandHint ?? true);
     }
   }
 
@@ -63,35 +56,54 @@ export class ShellExecutionComponent extends Container {
   private addResultPreview(
     result: ToolResultBlockData,
     expanded: boolean,
-    previewLines: number,
-    tailOutput: boolean,
     expandHint: boolean,
   ): void {
     if (!result.output) return;
     this.addChild(
       new TruncatedOutputComponent(result.output, {
         expanded,
         isError: result.is_error ?? false,
-        maxLines: previewLines,
-        tail: tailOutput,
+        maxLines: PREVIEW_LINES,
         expandHint,
         color: 'textMuted',
       }),
     );
   }
+
+  /** Whether the collapsed result preview last cut rows away; drives the footer's ctrl+o hint. */
+  wasTruncated(): boolean {
+    return this.children.some(
+      (child) => child instanceof TruncatedOutputComponent && child.wasTruncated(),
+    );
+  }
 }
 
 export const shellExecutionResultRenderer: ResultRenderer = (
   _toolCall: ToolCallBlockData,
   result: ToolResultBlockData,
   ctx,
-): Component[] => [
+): Component[] => {
+  // Collapsed: short output is shown whole; longer output contributes its
+  // last line (most commands conclude on their last line) and the rest waits
+  // for ctrl+o. A background or detached start returns a metadata block
+  // (task_id first, internal next_step/human_shell_hint lines last), so it
+  // shows its first line to identify the task instead of the trailing hint;
+  // an oversized result's truncation envelope likewise leads with the line
+  // that says the output was saved to a file.
+  // A failing command keeps its multi-line preview so the error is visible.
+  if (!ctx.expanded && result.is_error !== true) {
+    const leadsWithMetadata =
+      result.output.startsWith('task_id:') || isSpilledToolOutput(result.output);
+    return outcomeRows(result.output, leadsWithMetadata ? 'first' : 'last');
+  }
   // Result only. The command preview is owned by ToolCallComponent's
   // buildCallPreview across the whole lifecycle (streaming, running, and
   // done); rendering it here too would duplicate the command once the result
   // lands.
-  new ShellExecutionComponent({
-    result,
-    expanded: ctx.expanded,
-  }),
-];
+  return [
+    new ShellExecutionComponent({
+      result,
+      expanded: ctx.expanded,
+    }),
+  ];
+};

apps/kimi-code/src/tui/components/messages/shell-run.ts

@@ -45,6 +45,8 @@ export class ShellRunComponent extends Container {
   private backgrounded = false;
   private disposed = false;
   private expanded = false;
+  // Whether the collapsed running tail leaves rows (or a capped buffer) behind; refreshed by renderText().
+  private runningHidesRows = false;
   private readonly startedAt = Date.now();
   private timer: ReturnType<typeof setInterval> | undefined;
 
@@ -74,6 +76,25 @@ export class ShellRunComponent extends Container {
     this.flush();
   }
 
+  /**
+   * Whether ctrl+o would change the card: a running tail with earlier rows
+   * (or a capped buffer) behind it, or a finished preview cut to its row cap.
+   * Drives the footer's ctrl+o hint.
+   */
+  hasHiddenContent(): boolean {
+    if (this.disposed || this.backgrounded) return false;
+    if (this.running) return this.runningHidesRows;
+    // More physical lines than the collapsed cap is hidden for certain, even
+    // for a card that finished while already expanded; a wrapped overflow
+    // shows up once a collapsed render has recorded it.
+    return (
+      this.finalOutput.split('\n').length > SHELL_OUTPUT_PREVIEW_LINES ||
+      this.children.some(
+        (child) => child instanceof TruncatedOutputComponent && child.wasTruncated(),
+      )
+    );
+  }
+
   finishBackgrounded(): void {
     if (this.disposed || !this.running) return;
     this.running = false;
@@ -155,6 +176,8 @@ export class ShellRunComponent extends Container {
       const elapsed = Math.floor((Date.now() - this.startedAt) / 1000);
       const dim = (s: string): string => currentTheme.fg('textDim', s);
       const trimmed = sanitizeShellOutput(this.combined).trimEnd();
+      const lineCount = trimmed.length === 0 ? 0 : trimmed.split('\n').length;
+      this.runningHidesRows = this.combinedTruncated || lineCount > RUNNING_TAIL_LINES;
       let body: string;
       let extra = 0;
       if (trimmed.length === 0) {