dev-dash

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const s = await read($, snap)
    applyTheme(TONE, s?.theme)
    applyLook(LOOK, s?.theme)
    const folded = (await read($, collapsed)) ?? []
    const opened2 = (await read($, expanded)) ?? []
    const tickN = (await read($, blink)) ?? 0
    const isPulse = Math.floor(tickN / 2) % 2 === 0 // one second on, one second off
    const samples = (await read($, activity)) ?? []
    const L = layoutFor(e.props.bodyColumns ?? (e.viewport ? e.viewport.columns - 2 : undefined))
    const { W, isNarrow } = L
    const now = Date.now()
    const muting: Muting = {
      snoozed: (await read($, snoozed)) ?? {},
      dismissed: (await read($, dismissed)) ?? [],
      now,
    }
    const opened = (await read($, openRow)) || ''
    const isHelpOn = (await read($, showHelp)) === true
    const storedTab = await read($, tabState)
    const tab = isTab(storedTab) ? storedTab : 'dashboard'

    // A card: the Flight Deck look. A rounded border in the section's colour; the heading is its first line.
    const Frame = (p: { tone?: string; children?: unknown }) => (
      <Box borderStyle={LOOK.border} borderColor={p.tone ?? TONE.mute} paddingX={1} flexDirection="column" width={W}>
        {p.children}
      </Box>
    )

    // A section heading: `▾ Title            meta`, and folded `▸ Title            summary`.
    // The plain Button with a hotkey is the fold control (pressable while the pane holds the keys).
    const Heading = (p: { id: DashSection; hotkey: string; title: string; tone?: string; summary: string }) => {
      const isOpen = !shut.includes(p.id)
      return (
        <Box flexDirection="row">
          <Button
            key={`fold-${p.id}`}
            plain
            hotkey={p.hotkey}
            label={isOpen ? '▾' : '▸'}
            onPress={() => (isFocus && FOCUS_FOLD.includes(p.id) ? update($, expanded, list => toggle(list, p.id)) : update($, collapsed, list => toggle(list, p.id)))}
          />
          <Text bold color={p.tone}> {LOOK.caps ? p.title.toUpperCase() : p.title} </Text>
          <Box flexGrow={1} />
          <Text dimColor wrap="truncate-end">{cut(p.summary, Math.max(8, W - p.title.length - 12))}</Text>
        </Box>
      )
    }

    // What the buttons under an opened row do. (The row's own press only opens or closes them.)
    const undo = async () => {
      await update($, snoozed, () => ({}))
      await update($, dismissed, () => [])
      return $.ui.toast('Brought back what you snoozed or dismissed')
    }
    const runAction = async (action: RowAction['id'], it: Item) => {
      await update($, openRow, () => '')
      if (action === 'copy') {
        const r = await $.ui.copy({ text: it.copy, surface: e.surface })
        return $.ui.toast(r.isCopied ? `Copied the ${it.what}` : 'Could not copy to the clipboard')
      }
      if (action === 'snooze') {
        await update($, snoozed, m => snoozeAdd(m ?? {}, it.id, Date.now()))
        return $.ui.toast('Snoozed for 15 minutes')
      }
      await update($, dismissed, d => dismissAdd(d ?? [], it.id))
      return $.ui.toast('Dismissed until it changes')
    }

    // A selectable row. Its marker is a stop for Tab and the arrow keys; Enter on it opens or closes the row's
    // actions, which are buttons right under it. The first marker takes the focus ring when the pane gets the keyboard.
    const Row = (p: { id: string; children?: unknown }) => {
      const it = itemById(items, p.id)
      const isOpen = p.id === opened
      return (
        <Box key={`row-${p.id}`} flexDirection="column">
          <Box flexDirection="row">
            <Button
              key={`pick-${p.id}`}
              plain
              dimColor
              autoFocus={p.id === items[0]?.id ? true : undefined}
              label={isOpen ? '▾' : '›'}
              onPress={() => update($, openRow, v => (v === p.id ? '' : p.id))}
            />
            <Text> </Text>
            <Box flexDirection="column" flexGrow={1}>{p.children}</Box>
          </Box>
          {isOpen && it && (
            <Box paddingLeft={2} flexDirection="row" flexWrap="wrap" columnGap={1}>
              {actionsFor(it).map(a => (
                <Button key={`act-${a.id}-${p.id}`} label={a.label} onPress={() => runAction(a.id, it)} />
              ))}
            </Box>
          )}
        </Box>
      )
    }

    if (!s) {
      return (
        <Box flexDirection="column">
          <Box borderStyle="round" borderColor={TONE.mute} paddingX={1} width={W}>
            <Text dimColor>Collecting… first sync takes a few seconds</Text>
          </Box>
        </Box>
      )
    }

    const att = attentionOf(s, muting)
    // Flight Deck focus: while something urgent needs you, the five big cards fold to one line each (open one with its
    // arrow). `shut` is what is folded right now: the focus fold for those five, the person's own folds for the rest.
    const isFocus = s.focusOn !== false && att.urgent > 0
    const shut: DashSection[] = [
      ...folded.filter(id => !(isFocus && FOCUS_FOLD.includes(id))),
      ...(isFocus ? FOCUS_FOLD.filter(id => !opened2.includes(id)) : []),
    ]
    const caps = { reviews: isNarrow ? 3 : 5, sessions: L.sessionRows, agents: isNarrow ? 4 : 8 }
    const items = itemsOf(s, att, shut, caps)
    const g = s.git
    const costs = s.sessions.map(r => r.costUsd).filter((c): c is number => c !== null)
    const cost = costs.length ? costs.reduce((a, b) => a + b, 0) : null
    const live = s.sessions.filter(r => r.state === 'running').length
    const headTone = att.urgent > 0 ? TONE.you : att.total > 0 ? TONE.info : TONE.ok
    const agents = s.agents ?? []
    const busyAgents = agents.filter(a => a.state === 'working' || a.state === 'quiet')
    const limits = s.limits ?? []
    // "claude beat": a line graph of how much effort Claude put in at each sync, flat along the bottom when idle.
    const beat = claudeBeat(samples, L.sparkCells, isNarrow ? 4 : 5)
    const tipAt = tipRow(samples, L.sparkCells, isNarrow ? 4 : 5)
    // A buddy (an animated character from a pack) can stand in for the claude beat: /dash-beat buddy <name>.
    // A sprite pack is drawn at the slot's size and the current time; on the terminal it is one Raster that a timer
    // repaints in place (smooth motion without redrawing the pane), elsewhere text runs that step with the pane.
    const buddy = s.beatStyle === 'buddy' ? getBuddy() : null
    const buddyMood = moodOf(att.urgent, live)
    const slot = { cols: L.sparkCells, rows: isNarrow ? 4 : 5 }
    const els = $.ui.resolve(e)
    const Raster = e.surface === 'terminal' && 'Raster' in els ? els.Raster : undefined
    const isRaster = buddy?.kind === 'sprite' && Raster !== undefined
    setStage(isRaster ? { mood: buddyMood, ...slot } : null)
    const buddyRows = buddy && !isRaster ? buddyRuns(buddy, buddyMood, now, tickN, slot.cols, slot.rows) : []
    const buddyHeight = buddy?.kind === 'cells' ? buddy.rows : slot.rows

    // ---- header card ------------------------------------------------------
    const header = (
      <Box borderStyle={LOOK.border} borderColor={headTone} paddingX={1} flexDirection="column" width={W}>
        <Box flexDirection="row" justifyContent="center">
          <Text bold>DEV-DASH</Text>
        </Box>
        <Box flexDirection="row" justifyContent="center" columnGap={1}>
          <Text color={TONE.you}>■ you</Text>
          <Text color={TONE.info}>■ sessions</Text>
          <Text color={TONE.accent}>■ agents</Text>
          <Text color={TONE.ok}>■ limits</Text>
          <Text color={TONE.warn}>■ PRs</Text>
        </Box>
        <Box flexDirection="row" flexWrap="wrap">
          <Text bold color={headTone}>{att.total > 0 ? `◆ ${att.total} need${att.total === 1 ? 's' : ''} you` : '✓ all clear'}</Text>
          <Text dimColor> · {plural(s.sessions.length, isNarrow ? 'sess' : 'session', isNarrow ? 'sess' : 'sessions')}</Text>

export function watchingSection(v: WatchView) {
  const { Box, Text, Heading, folded, watches, iconStyle, W, now, tone, fmt } = v
  if (watches.length === 0) return null
  const fired = watches.filter(w => w.firedAt > 0)
  // What has changed comes first, then the rest in the order they were added.
  const shown = [...watches].sort((a, b) => Number(b.firedAt > 0) - Number(a.firedAt > 0))
  const bw = boxWidth(W)
  const inner = Math.max(10, bw - 4)

  const card = (w: WatchRow) => {
    const isFired = w.firedAt > 0
    const border = isFired ? tone.warn : toneColor(w.tone, tone)
    const chips: WatchChip[] = w.chips ?? []
    return (
      <Box flexDirection="column" borderStyle={(v.border ?? 'round') as 'round'} borderColor={border} paddingX={1} width={bw}>
        <Box flexDirection="row">
          <Text bold>{iconFor(sourceOf(w.kind), iconStyle)} </Text>
          <Text bold>{watchName(w)}</Text>
          {isFired && <Text bold color={tone.warn}> ◆</Text>}
          <Text dimColor wrap="truncate-end"> · {short(w.repo)} · {w.checkedAt ? fmt.ago(now - w.checkedAt) : 'new'}</Text>
        </Box>
        <Text wrap="truncate-end">{fmt.cut(w.title || w.repo, inner)}</Text>
        {chips.length === 0 ? (
          <Text dimColor>waiting for the first look</Text>
        ) : (
          <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
            {chips.map(c => (
              <Text color={toneColor(c.tone, tone)}>
                {c.icon}
                {c.text ? ` ${fmt.cut(c.text, 16)}` : ''}
              </Text>
            ))}
          </Box>
        )}
        {isFired && <Text color={tone.warn} wrap="truncate-end">◆ {fmt.cut(w.fired, inner - 8)} {fmt.ago(now - w.firedAt)}</Text>}
      </Box>
    )
  }

  return (
    <Box flexDirection="column">
      <Heading
        id="watching"
        hotkey="0"
        title={fired.length ? `Watching (${watches.length} · ${fired.length} fired)` : `Watching (${watches.length})`}
        tone={fired.length ? tone.warn : undefined}
        summary={fired.length ? fired.map(w => `${watchName(w)} ${w.fired}`).join(' · ') : `${watches.length} quiet`}
      />
      {!folded.includes('watching') && (
        <Box flexDirection="column">
          <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
            {shown.map(card)}
          </Box>
          <Text dimColor wrap="truncate-end">/dash-watch pr|issue|run … · clear &lt;n|all&gt;</Text>
        </Box>
      )}
    </Box>
  )
}

export function entertainmentView(v: TabView, np: NowPlaying | null, isSpotifyOn: boolean) {
  const { Box, Text } = v

  return (
    <Box flexDirection="column" marginTop={1} rowGap={1}>
      {nowPlayingCard(v, np, isSpotifyOn)}
      {stocksCard(v)}
      <Text dimColor>More widgets will land here. Spotify, when on, is read only while this tab is showing.</Text>
    </Box>
  )
}

function nowPlayingCard(v: TabView, np: NowPlaying | null, isOn: boolean) {
  const { Box, Text, Button, tone, fmt, W, now } = v
  // Off by default: nothing is read until the person turns it on, with this button or /dash-spotify on.
  if (!isOn) {
    return Card(v, {
      title: '♪ Now playing · Spotify',
      children: (
        <Box flexDirection="column">
          <Text dimColor wrap="wrap">Off. Nothing is read until you turn it on. When on, this shows the track the Spotify app on this machine is playing: no login, no network.</Text>
          <Box flexDirection="row" marginTop={1}>
            <Button key="spotify-toggle" variant="primary" label="turn on" onPress={() => undefined} />
          </Box>
        </Box>
      ),
    })
  }
  const body =
    np === null ? (
      <Text dimColor>Looking for Spotify…</Text>
    ) : np.state === 'playing' ? (
      <Text color={tone.ok} bold wrap="truncate-end">▶ {fmt.cut(np.track, W - 8)}</Text>
    ) : np.state === 'paused' ? (
      <Text wrap="truncate-end">⏸ {fmt.cut(np.track, W - 16)} <Text dimColor>(paused)</Text></Text>
    ) : np.state === 'idle' ? (
      <Text dimColor wrap="wrap">Spotify is open, but no song has been started. Play one and it appears here.</Text>
    ) : np.state === 'closed' ? (
      <Text dimColor>Spotify is not running.</Text>
    ) : (
      <Text color={tone.warn} wrap="wrap">Could not read Spotify here. On Linux this needs `playerctl`.</Text>
    )

  return Card(v, {
    title: '♪ Now playing · Spotify',
    tone: np?.state === 'playing' ? tone.ok : undefined,
    children: (
      <Box flexDirection="column">
        {body}
        {np && (np.state === 'playing' || np.state === 'paused') && (
          <Text dimColor>read {fmt.ago(now - np.at)} ago from the Spotify app on this machine</Text>
        )}
        <Box flexDirection="row" marginTop={1}>
          <Button key="spotify-toggle" label="turn off" dimColor onPress={() => undefined} />
        </Box>
      </Box>
    ),
  })
}

function Card(v: TabView, p: { title: string; tone?: string; children?: unknown }) {
  const { Box, Text, W, tone } = v

  return (
    <Box borderStyle={(v.border ?? 'round') as 'round'} borderColor={p.tone ?? tone.mute} paddingX={1} flexDirection="column" width={W}>
      <Text bold color={p.tone}>{p.title}</Text>
      {p.children}
    </Box>
  )
}

function stocksCard(v: TabView) {
  const { Box, Text } = v

  return Card(v, {
    title: '▲ Stocks',
    children: (
      <Box flexDirection="column">
        <Text dimColor wrap="wrap">Not set up. Prices need a data source, and dev-dash makes no network calls beyond git and gh (CONTRIBUTING.md), so nothing is fetched.</Text>
        <Text dimColor wrap="wrap">The project owner has to approve a source before a watchlist can go here.</Text>
      </Box>
    ),
  })
}