time-machine

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const shown = await read($, band)
    if (shown === null || e.props.hasSurvey || e.props.isWorking) return next(e)

    return bandView($.ui.resolve(e), shown, Math.max(20, e.props.bodyColumns), {
      undo: () => void update($, band, now => now && { ...now, confirm: 'turn' as const }),
      undoSensitive: () => void update($, band, now => now && { ...now, confirm: 'sensitive' as const }),
      confirm: () => void undoFromBand($, shown.id, shown.confirm === 'sensitive'),
      cancel: () => void update($, band, now => now && { ...now, confirm: null }),
      review: () => void openPane($, shown.id),
      close: () => void update($, band, () => null),
    })
  })

export function bandView(table: Table, shown: Band, columns: number, on: BandHandlers): RenderElement {
  const { Box, Text, Button } = table
  const close = <Button key="tm-close" role="dismiss" label="×" onPress={on.close} />

  if (shown.result !== null) {
    return (
      <Box flexDirection="row" gap={1}>
        <Text color="green">{clip(shown.result, columns - 6)}</Text>
        {close}
      </Box>
    )
  }

  if (shown.confirm === 'turn' || shown.confirm === 'sensitive') {
    const question = shown.confirm === 'turn' ? 'Undo this turn?' : `Undo only ${shown.alert ?? 'the flagged files'}?`
    return (
      <Box flexDirection="row" gap={2}>
        <Text bold>{clip(`⏱ ${question}`, Math.max(10, columns - 30))}</Text>
        <Button key="tm-yes" plain hotkey="1" label="Yes, undo" onPress={on.confirm} />
        <Button key="tm-no" plain hotkey="2" label="No" onPress={on.cancel} />
      </Box>
    )
  }

  return (
    <Box flexDirection="column">
      <Box flexDirection="row" gap={2}>
        <Text dimColor>{clip(`⏱ ${shown.summary}`, Math.max(10, columns - 34))}</Text>
        <Button key="tm-undo" plain hotkey="1" label="Undo turn" onPress={on.undo} />
        <Button key="tm-review" plain hotkey="2" label="Review" onPress={on.review} />
        {close}
      </Box>
      {shown.alert !== null && (
        <Box flexDirection="row" gap={2}>
          <Text color="yellow">{clip(`⚠ ${shown.alert}`, Math.max(10, columns - 20))}</Text>
          <Button key="tm-undo-sensitive" plain hotkey="3" label="Undo these" onPress={on.undoSensitive} />
        </Box>
      )}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: HEAT_PANE }, async ($, e) => {
    const view = await read($, heat)
    const table = $.ui.resolve(e)
    if (view === null) {
      const { Text } = table
      return <Text dimColor>Run /tm heat to draw the map.</Text>
    }

    return heatView(table, e.surface, view, Math.max(30, e.props.bodyColumns), e.viewport?.rows ?? 40, {
      metric: metric => void update($, heat, now => now && { ...now, metric }),
      enter: node => void heatAction($, () => (node.isDir ? moveHeat($, view, node.path) : pickFile($, view, node))),
      up: path => void heatAction($, () => moveHeat($, view, path)),
      openPage: () => void heatAction($, () => openHeatPage($, view)),
      openTurn: id => void openPane($, id),
      closeFile: () => void update($, heat, now => now && { ...now, file: null }),
    })
  })

export function heatView(
  table: Table,
  surface: RenderSurface,
  view: HeatView,
  columns: number,
  rows: number,
  on: HeatHandlers,
): RenderElement {
  const { Box, Text, Button, Markdown } = table
  const { nodes, metric, parent } = view
  const max = maxValue(nodes, metric)
  const since = new Date(view.since).toISOString().slice(0, 10)
  const legend =
    metric === 'owner'
      ? 'blue: others · grey: both · orange: Claude'
      : `${METRIC_LABELS[metric]}: dark none → yellow most`

  return (
    <Box flexDirection="column">
      <Text bold>{clip(`${view.path === '' ? 'project' : `${view.path}/`}  ·  ${describe(view.total)}`, columns)}</Text>
      <Text dimColor>{clip(`${view.turns} Claude turns since ${since} · size: lines changed`, columns)}</Text>
      <Box flexDirection="row" gap={1} marginTop={1}>
        {METRICS.map((one, i) => (
          <Button
            key={`m-${one}`}
            hotkey={String(i + 1)}
            variant={one === metric ? 'primary' : undefined}
            label={METRIC_LABELS[one]}
            onPress={() => on.metric(one)}
          />
        ))}
        {parent !== null && <Button key="up" hotkey="b" label="↑ Up" onPress={() => on.up(parent)} />}
        <Button key="open" hotkey="o" label="Open in browser" onPress={on.openPage} />
      </Box>
      <Box marginTop={1}>
        {mapView(table, surface, nodes, metric, columns, Math.max(6, Math.min(MAP_ROWS, rows - LISTED - 10)))}
      </Box>
      <Text dimColor>{clip(legend, columns)}</Text>
      <Box flexDirection="column" marginTop={1}>
        {nodes.slice(0, LISTED).map((node, i) => {
          const name = `${node.isDir ? '▸' : ' '} ${node.name}${node.isDir ? '/' : ''}`
          const shown = metric === 'churn' ? '' : `${valueLabel(node, metric, METRIC_UNITS)} · `
          return (
            <Box key={`row-${i}`} flexDirection="row" gap={1}>
              <Text color={hex(heatColor(intensity(node, metric, max), metric))}>██</Text>
              <Button
                key={`n-${i}`}
                plain
                label={clip(`${name}  ${shown}${describe(node)}`, Math.max(10, columns - 4))}
                onPress={() => on.enter(node)}
              />
            </Box>
          )
        })}
        {nodes.length > LISTED && <Text dimColor>…and {nodes.length - LISTED} more</Text>}
      </Box>
      {view.file !== null && (
        <Box flexDirection="column" marginTop={1}>
          <Box flexDirection="row" gap={1}>
            <Text bold>{clip(view.file.path, columns - 4)}</Text>
            <Button key="file-close" role="dismiss" label="×" onPress={on.closeFile} />
          </Box>
          {view.file.turns.length === 0 && <Text dimColor>No closed Claude turn changed it in this window.</Text>}
          {view.file.turns.map((turn, i) => (
            <Button
              key={`t-${i}`}
              plain
              label={clip(`↳ ${clock(turn.time)} ${turn.title}`, columns)}
              onPress={() => on.openTurn(turn.id)}
            />
          ))}
        </Box>
      )}
      {view.notice !== '' && <Text color="yellow">{clip(view.notice, columns * 2)}</Text>}
      {view.page !== null && <Markdown text={`[Open the interactive map](${fileUrl(view.page)})`} />}
    </Box>
  )
}

function mapView(
  table: Table,
  surface: RenderSurface,
  nodes: readonly HeatNode[],
  metric: HeatMetric,
  columns: number,
  rows: number,
): RenderElement {
  // The element table answers `in` for every name; the surface says what it draws.
  if (surface === 'terminal' && 'Raster' in table) {
    const width = Math.min(512, Math.max(10, columns))
    const { Raster } = table
    return <Raster key="heat-map" columns={width} rows={rows} cells={rasterCells(nodes, metric, width, rows)} />
  }
  if (!('Svg' in table)) throw new Error(`No treemap element on ${surface}`)
  const { Svg } = table
  const alt = `Treemap of ${nodes.length} entries by ${METRIC_LABELS[metric]}`
  return <Svg source={svgTreemap(nodes, metric, 720, 360)} alt={alt} isInteractive />
}