netrunner-trace

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const all = await read($, hosts)
    const list = await read($, events)
    const total = await read($, calls)
    const allowed = await allowList($)
    const now = await $.clock.now()
    const names = hostEntries(all).map(([n]) => n)
    const flagged = names.filter(n => !expected(n, allowed))
    const head = `NETRUNNER TRACE  ${total} call${total === 1 ? '' : 's'} · ${names.length} host${names.length === 1 ? '' : 's'} · ${flagged.length} unexpected`
    const width = Math.max(30, e.props.bodyColumns)
    const viewRows = e.viewport?.rows ?? 30
    const logRows = Math.max(4, Math.min(10, Math.floor(viewRows / 4)))
    const recent = list.slice(-logRows).reverse()
    const logLine = (ev: TraceEvent) =>
      short(`${clock(ev.at)} ${mark(ev.status)} ${ev.tool.startsWith('mcp__') ? 'MCP' : ev.tool} ${ev.label} -> ${ev.host}${ev.ms !== undefined ? ` ${(ev.ms / 1000).toFixed(1)}s` : ''}${ev.agent ? ' (subagent)' : ''}`, width)
    const tone = (ev: TraceEvent) => (!expected(ev.host, allowed) ? 'red' : ev.status === 'error' ? 'yellow' : 'green')

    if (e.surface === 'terminal') {
      const { Box, Text, Raster, Button } = $.ui.resolve(e)
      const columns = Math.min(MAX_COLS, width)
      const rows = Math.max(10, Math.min(MAX_ROWS, viewRows - logRows - 7))
      mounted = { columns, rows }
      startAnimation($)
      const { nodes, hidden } = pickNodes(all, allowed)
      const cells = encodeCells(drawMap(columns, rows, nodes, packets, now, hidden))
      return (
        <Box flexDirection="column">
          <Text color="green" bold>
            {head}
          </Text>
          {flagged.length > 0 && <Text color="red">{short(`! unexpected: ${flagged.join(', ')}`, width)}</Text>}
          <Raster key="map" columns={columns} rows={rows} cells={cells} />
          <Text color="green" dimColor>
            {'─'.repeat(Math.min(width - 4, 60))} log
          </Text>
          {recent.length === 0 && <Text dimColor>waiting for outbound calls…</Text>}
          {recent.map(ev => (
            <Text key={ev.id} color={tone(ev)}>
              {logLine(ev)}
            </Text>
          ))}
          <Box>
            <Button key="clear" label="clear" onPress={() => reset($)} />
          </Box>
        </Box>
      )
    }

    // Surfaces without Raster get the same facts as text.
    const { Box, Text, Button } = $.ui.resolve(e)
    return (
      <Box flexDirection="column">
        <Text bold>{head}</Text>
        {names.length === 0 && <Text>No outbound traffic yet.</Text>}
        {names.map(n => (
          <Text key={n}>
            {!expected(n, allowed) ? '! ' : '  '}
            {n} · {own(all, n)?.count} call{own(all, n)?.count === 1 ? '' : 's'}
            {own(all, n)?.errors ? `, ${own(all, n)?.errors} failed` : ''}
          </Text>
        ))}
        {recent.map(ev => (
          <Text key={ev.id}>{logLine(ev)}</Text>
        ))}
        <Box>
          <Button key="clear" label="clear" onPress={() => reset($)} />
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!ticker || e.props.hasSurvey) return next(e)
    const list = await read($, events)
    if (list.length === 0) return next(e)
    const all = await read($, hosts)
    const allowed = await allowList($)
    // The three most recently seen unexpected hosts are pinned first, then the most recent others.
    const flagged = hostEntries(all)
      .filter(([host]) => !expected(host, allowed))
      .sort((a, b) => b[1].last - a[1].last)
      .map(([host]) => host)
    const seen: string[] = [...flagged.slice(0, 3)]
    for (let i = list.length - 1; i >= 0 && seen.length < 4; i -= 1) {
      const host = (list[i] as TraceEvent).host
      if (!seen.includes(host)) seen.push(host)
    }
    const below = await next(e)
    const { Box, Text } = $.ui.resolve(e)
    return (
      <Box flexDirection="column">
        <Box>
          <Text color="green">⇄ trace </Text>
          {seen.map(host => (
            <Text key={host} color={flagged.includes(host) ? 'red' : 'green'} dimColor={!flagged.includes(host)}>
              {flagged.includes(host) ? '! ' : ''}
              {short(host, 28)}
              {'  '}
            </Text>
          ))}
          <Text dimColor>· /trace</Text>
        </Box>
        {below}
      </Box>
    )
  })