telltale

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    let row: string | null = null;
    try {
      const inFlight = Object.values(await read($, running));
      await read($, tick);
      if (!e.props.hasSurvey && inFlight.length > 0) {
        const first = inFlight.reduce((a, b) => (b.startedAt < a.startedAt ? b : a));
        const now = await $.clock.now();
        const turn = turnNo + 1;
        const done = (await read($, calls)).filter(
          (call) => call.turn === turn && call.server !== null,
        );
        row = bandRow(
          {
            tool: serverTool(first.tool),
            elapsedMs: now - first.startedAt,
            more: inFlight.length - 1,
            turnCalls: done.length,
            turnTokens: done.reduce((sum, call) => sum + estTokens(call.textChars), 0),
            turnErrors: done.filter((call) => call.isError).length,
          },
          e.props.bodyColumns,
        );
      }
    } catch {
      row = null;
    }
    if (row === null) return next(e);
    const { Text } = $.ui.resolve(e);
    return <Text>{row}</Text>;
  }).catch(($, e, next) => next(e));

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    await settled;
    const { Box, Text, Button } = $.ui.resolve(e);
    const width = e.props.bodyColumns;
    const current = await read($, view);
    // R23: the detail counts as Calls; the tab of the view not shown is dim.
    const onCalls = current !== 'inventory';
    const tabs = (
      <Box flexDirection="row" columnGap={2}>
        <Button
          key="view:calls"
          hotkey="1"
          plain
          dimColor={!onCalls}
          onPress={() => openView($, 'calls')}
        >
          Calls
        </Button>
        <Button
          key="view:inventory"
          hotkey="2"
          plain
          dimColor={onCalls}
          onPress={() => openView($, 'inventory')}
        >
          Inventory
        </Button>
      </Box>
    );
    // R35, R48: each view ends with one dim row naming its keys, cut to the width.
    const keyRow = (keys: string) => (
      <Text key="keys" dimColor>
        {clip(keys, width)}
      </Text>
    );
    const keysOf = (shown: View) =>
      shown === 'detail' ? KEYS_DETAIL : shown === 'inventory' ? KEYS_INVENTORY : KEYS_CALLS;
    try {
      const list = await read($, calls);
      const chosen = await read($, selected);
      const call = list.find((one) => one.id === chosen);
      const frame = { e, width, tabs, keyRow };
      if (current === 'detail' && call) return await drawDetail($, frame, list, call);
      if (current === 'inventory') return await drawInventory($, frame);
      return await drawCalls($, frame, list, chosen);
    } catch {
      // R46: a view that fails keeps the pane, its view row and its keys.
      return (
        <Box flexDirection="column">
          {tabs}
          <Text>this view could not be drawn</Text>
          {keyRow(keysOf(current))}
        </Box>
      );
    }
  });

async function drawDetail($: EngineInterface, frame: Frame, list: Call[], call: Call) {
  const { e, width, tabs, keyRow } = frame;
  const { Box, Text, Button, Code } = $.ui.resolve(e);
  const detail = details.get(call.id);
  const note = await read($, message);
  const names = await read($, agentNames);
  // R37: JSON is drawn as json code; a cut or non-JSON field as plain text (R11, R20).
  const field = (key: string, label: string, raw: string, full: number) => {
    const shown = show(pretty(raw), raw, full);
    return [
      <Text key={key} dimColor>
        {label}
      </Text>,
      ...(isJson(shown)
        ? [<Code key={`${key}:code`} language="json" source={shown} />]
        : chunks(shown).map((part, i) => <Text key={`${key}:${i}`}>{part}</Text>)),
    ];
  };
  // R38: n is the next older call, p the next newer; the ends change nothing.
  const step = (by: number) => async () => {
    await update($, message, () => null);
    const to = list[list.findIndex((one) => one.id === call.id) + by];
    if (to) await update($, selected, () => to.id);
  };
  // R39, R40: the text the pane keeps, never indented; a refusal names its reason.
  const copy = (which: 'args' | 'text') => async (press: { surface: RenderSurface }) => {
    if (!detail) {
      await update($, message, () => 'copy failed: text not kept after a reload');
      return;
    }
    const text = which === 'args' ? detail.args : detail.text;
    const total = which === 'args' ? call.argsChars : call.textChars;
    const result = await $.ui.copy({ text, surface: press.surface });
    await update($, message, () =>
      result.isCopied
        ? text.length < total
          ? `copied ${text.length} of ${total} chars`
          : `copied ${text.length} chars`
        : `copy failed: ${result.reason}`,
    );
  };
  const presses: Record<
    (typeof DETAIL_BUTTONS)[number]['key'],
    (press: { surface: RenderSurface }) => Promise<void>
  > = {
    back: async () => {
      await openView($, 'calls'); // clears the message too
      await focusRow($, call.id);
    },
    older: step(-1),
    newer: step(1),
    copyArgs: copy('args'),
    copyText: copy('text'),
  };
  const header = detailHeader({
    tool: toolName(call.tool),
    server: call.server,
    agentId: call.agentId,
    agentName: call.agentId ? names[call.agentId] : undefined,
    ms: call.ms,
    chars: call.textChars,
    tokens: estTokens(call.textChars),
    next: call.next,
  });
  const used = detail && detail.used.length > 0 ? detail.used.join(', ') : 'none';
  return (
    <Box flexDirection="column">
      {tabs}
      <Box flexDirection={width < DETAIL_BUTTONS_WIDTH ? 'column' : 'row'} columnGap={2}>
        {DETAIL_BUTTONS.map((b) => (
          <Button key={b.key} hotkey={b.hotkey} plain onPress={presses[b.key]}>
            {b.label}
          </Button>
        ))}
      </Box>
      <Box flexDirection="row">
        <Text bold>{clip(header, width - (call.isError ? 8 : 0))}</Text>
        {call.isError && <Text color="error"> · error</Text>}
      </Box>
      {detail ? (
        [
          ...field('args', 'arguments', detail.args, call.argsChars),
          ...field('text', 'what Claude read', detail.text, call.textChars),
        ]
      ) : (
        <Text dimColor>{clip('text not kept after a reload; see the logs', width)}</Text>
      )}
      <Text dimColor>{clip(permissionNote(call.permission), width)}</Text>
      <Text>{clip(`used in answer: ${used}`, width)}</Text>
      {note !== null && <Text>{clip(note, width)}</Text>}
      {keyRow(KEYS_DETAIL)}
    </Box>
  );
}

async function drawInventory($: EngineInterface, frame: Frame) {
  const { e, width, tabs, keyRow } = frame;
  const { Box, Text, Button } = $.ui.resolve(e);
  const inv = await read($, inventory);
  // delta R21: `m` stays bound while usage is unavailable, and a press there changes nothing.
  const measure = (
    <Button key="measure" hotkey="m" plain onPress={() => measureInventory($)}>
      Measure
    </Button>
  );
  if (inv.status === 'unavailable') {
    return (
      <Box flexDirection="column">
        {tabs}
        <Text>Context usage unavailable</Text>
        {measure}
        {keyRow(KEYS_INVENTORY)}
      </Box>
    );
  }
  const used = await read($, totals);
  const window = inv.window;
  // R42: a server's share of the session totals is the sum of its tool rows' matches.
  const usageOf = (rows: InventoryRow[]) => {
    const sum = { calls: 0, errors: 0, tokens: 0 };
    for (const row of rows) {
      const tool = used.tools[row.name];
      if (!tool) continue;
      sum.calls += tool.calls;
      sum.errors += tool.errors;
      sum.tokens += tool.tokens;
    }
    return sum.calls > 0 ? sum : undefined;
  };
  type Sub = { name: string; rows: InventoryRow[]; tokens: number };
  // R41: each group's total and share of the window; `heading` draws a sub-group's title row.
  const group = (
    prefix: string,
    title: string,
    empty: string,
    heading: (one: Sub, pad: number, max: number) => string | null,
    note: (row: InventoryRow) => string,
  ) => {
    const rows = inv.rows.filter((row) => row.group.startsWith(prefix));
    const total = rows.reduce((sum, row) => sum + row.tokens, 0);
    const share = window ? ` · ${pct(total, window)}% of ${formatTokens(window)}` : '';
    const groups = [...new Set(rows.map((row) => row.group))].map((name) => {
      const members = rows.filter((row) => row.group === name).sort((a, b) => b.tokens - a.tokens);
      const tokens = members.reduce((sum, row) => sum + row.tokens, 0);
      return { name: name.slice(prefix.length), rows: members, tokens };
    });
    const pad = Math.max(0, ...groups.map((one) => one.name.length));
    const max = Math.max(0, ...groups.map((one) => one.tokens));
    return (
      <Box flexDirection="column">
        <Text bold>
          {clip(rows.length > 0 ? `${title}  ${formatTokens(total)} tok${share}` : title, width)}
        </Text>
        {rows.length === 0 ? (
          <Text dimColor>{empty}</Text>
        ) : (
          groups.map((one) => {
            const line = heading(one, pad, max);
            return (
              <Box key={one.name} flexDirection="column">
                {line !== null && <Text>{clip(line, width)}</Text>}
                {one.rows.map((row) => (
                  <Text key={row.name}>
                    {clip(
                      `  ${row.name}  ${formatTokens(row.tokens)} tok  ${row.measured ? 'measured' : 'est'}${row.state ? `  ${row.state}` : ''}${note(row)}`,
                      width,
                    )}
                  </Text>
                ))}
              </Box>
            );
          })
        )}
      </Box>
    );
  };
  const server = (one: Sub, pad: number, max: number) =>
    serverHeading({ ...one, pad, max, window, usage: usageText(usageOf(one.rows)) });
  const unused = (row: InventoryRow) => (used.tools[row.name] ? '' : '  never called');
  return (
    <Box flexDirection="column">
      {tabs}
      {group('mcp:', 'MCP tools', 'No MCP servers connected', server, unused)}
      {group(
        'skill:',
        'Skills',
        'No skills listed',
        (one) => one.name,
        () => '',
      )}
      {group(
        'memory',
        'Memory files',
        'No memory files loaded',
        () => null,
        () => '',
      )}
      {measure}
      {inv.status === 'measuring' && <Text dimColor>measuring…</Text>}
      {inv.status.startsWith('measure failed') && <Text>{clip(inv.status, width)}</Text>}
      {keyRow(KEYS_INVENTORY)}
    </Box>
  );
}

async function drawCalls($: EngineInterface, frame: Frame, list: Call[], chosen: string | null) {
  const { e, width, tabs, keyRow } = frame;
  const { Box, Text, Button } = $.ui.resolve(e);
  if (list.length === 0) {
    const at = (await read($, logFolder)) || folder;
    const start = (await read($, startedIn)) || startDir;
    return (
      <Box flexDirection="column">
        {tabs}
        <Text dimColor>No tool calls yet</Text>
        <Text dimColor>{clip(`logs: ${logsPath(at, start)}`, width)}</Text>
        {keyRow(KEYS_CALLS)}
      </Box>
    );
  }
  const gone = await read($, dropped);
  const newest = [...list].reverse();
  const table = callTable(
    newest.map((one) => ({
      tool: `${one.agentId ? '↳ ' : ''}${toolName(one.tool)}`,
      server: one.server,
      ms: one.ms,
      tokens: estTokens(one.textChars),
      isError: one.isError,
      next: one.next,
    })),
    width,
  );
  // R34: each turn's call count and tokens, in one pass.
  const byTurn = new Map<number, { calls: number; tokens: number }>();
  for (const one of list) {
    const sum = byTurn.get(one.turn) ?? { calls: 0, tokens: 0 };
    byTurn.set(one.turn, { calls: sum.calls + 1, tokens: sum.tokens + estTokens(one.textChars) });
  }
  const rows = newest.flatMap((one, i) => {
    const cell = table.rows[i]!;
    const warn = one.next === 'retried' || one.next === 'aborted' || one.next === 'pending';
    const sum = byTurn.get(one.turn)!;
    const separator =
      i === 0 || newest[i - 1]!.turn !== one.turn
        ? [
            <Text key={`turn:${one.turn}:${i}`} dimColor>
              {clip(
                `turn ${one.turn} · ${plural(sum.calls, 'call')} · ~${formatTokens(sum.tokens)} tok`,
                width,
              )}
            </Text>,
          ]
        : [];
    return [
      ...separator,
      <Box key={`line:${one.id}`} flexDirection="row">
        <Button
          key={`row:${one.id}`}
          plain
          {...(one.id === chosen ? { autoFocus: true as const } : {})}
          onPress={async () => {
            await update($, selected, () => one.id);
            await update($, view, () => 'detail');
          }}
        >
          {cell.main}
        </Button>
        <Text color="error">{cell.mark}</Text>
        {!table.narrow && <Text {...(warn ? { color: 'warning' } : {})}>{cell.next}</Text>}
      </Box>,
    ];
  });
  return (
    <Box flexDirection="column">
      {tabs}
      <Text bold>{clip(table.header, width)}</Text>
      {rows}
      {gone > 0 && <Text dimColor>{clip(`${gone} older calls are in the logs`, width)}</Text>}
      {keyRow(KEYS_CALLS)}
    </Box>
  );
}