deck

  on('ui.render', { component: 'Pane' }, deckView)

async function deckView($, e, next) {
  // the same view draws in the band above the prompt and, opened by /deck panel, in a pane:
  // VS Code's panel draws panes but not the band
  const inPane = e.component === 'Pane'
  if (inPane && e.requestId !== 'deck-panel') return next(e)
  if (!inPane && e.props.hasSurvey) return next(e)
  const open = inPane || prefs.open
  const { Box, Text, Button, Svg, Image } = $.ui.resolve(e)
  const desktop = e.surface !== 'terminal' // desktop, VS Code and mobile all draw Svg
  if (e.surface === 'terminal') sawTerminal = true
  // TEXT/MUTED/DIM/TRACK are tuned for a dark background and vanish on a light desktop theme;
  // there, plain text takes the theme's foreground and grey text uses dimColor instead
  const tone = (c) => (!desktop ? { color: c } : c === TEXT || c === '#c9c7c1' ? {} : c === MUTED || c === DIM || c === TRACK ? { dimColor: true } : { color: c })
  const nowMs = Date.now()
  const cols = Math.max(40, e.props.bodyColumns ?? e.viewport?.columns ?? 100)
  const rows = collectRows(nowMs)
  const extras = []
  if (prefs.show.clock) extras.push((desktop ? '◷ ' : '') + clockText())
  const wt = prefs.show.weather ? weatherText(desktop) : ''
  if (wt) extras.push(wt)
  if (!rows.length && !extras.length && !prefs.show.pet) return next(e)
  // a mod after deck in the hook chain also wants to draw AbovePrompt; stack its band under ours
  // instead of swallowing it (https://github.com/nvr0x5/claude-deck/issues/2)
  const below = await next(e)
  const stack = (tree) => (below ? Box({ flexDirection: 'column', children: [tree, below] }) : tree)

  // the pet's lane
  const lane = []
  const inlinePet = desktop && Svg && prefs.show.pet && open && rows.length && prefs.size !== 'roomy'
  if (prefs.show.pet && !inlinePet) {
    if (desktop && Svg) {
      const W = Math.max(320, cols * 8)
      const LH = prefs.size === 'roomy' ? 54 : 44
      lane.push(Svg({ source: petLaneSvg(pet, nowMs, W, LH), alt: 'Claude pet, ' + pet.act, width: W, height: LH }))
    } else if (!desktop && Image) {
      // leave a margin: a row as wide as the band gets cut and marked with [-]
      const room = Math.max(0, cols - PET_COLS - 4)
      const x = Math.round(petX(pet, nowMs) * room)
      const px = petFrame(pet.act, nowMs - pet.start, pet.dir)
      lane.push(
        Box({
          flexDirection: 'row',
          height: PET_ROWS,
          overflow: 'hidden',
          children: [
            Box({ width: x, flexShrink: 0, children: [] }),
            Image({ key: 'pet', source: { rgba: toBase64(px), width: PET_RASTER.width, height: PET_RASTER.height }, columns: PET_COLS, rows: PET_ROWS, alt: ' ' }),
          ],
        }),
      )
    }
  }

  const toggle = Button({
    key: 'deck-toggle',
    label: isOpening() ? 'deck ▾' : 'deck ▸',
    plain: true,
    hotkey: '0',
    dimColor: true,
    onPress: () => setOpen($, !isOpening()),
  })
  const extrasText = Box({ flexShrink: 0, children: [Text({ ...tone(MUTED), children: [extras.join('  ·  ')] })] })
  const spacer = Box({ flexGrow: 1, children: [] })

  // ----- collapsed, rings: a ring per limit, its reset, and spend -----
  if ((!open || !rows.length) && prefs.collapsed === 'rings') {
    const items = []
    const ask = rows.find((r) => r.state === 'needs_input')
    if (ask) items.push(Text({ color: STYLE.ask.fill, children: ['? ' + trunc(ask.title, 24) + ' needs you'] }))
    for (const row of rows.filter((r) => r.limit)) {
      const st = STYLE[row.style]
      const tag = row.kindKey === 'five_hour' ? '5h' : row.kindKey === 'seven_day' ? '7d' : row.title
      const ring = desktop
        ? Svg({ alt: tag + ' ' + Math.round(row.pct) + '% used', width: 22, height: 22, source: ringSvg(row.pct, st.desk, row.kindKey === 'seven_day' ? 'week' : 'clock') })
        : Text({ color: st.fill, children: ['○◔◑◕●'[Math.min(4, Math.round(row.pct / 25))]] })
      items.push(
        Box({
          flexDirection: 'row',
          flexShrink: 0,
          columnGap: 1,
          alignItems: 'center',
          children: [ring, Text({ ...tone(TEXT), bold: true, wrap: 'truncate', children: [Math.round(row.pct) + '%'] }), Text({ ...tone(MUTED), wrap: 'truncate', children: [tag + (row.resets ? ' · resets ' + row.resets : '')] })],
        }),
      )
    }
    if (prefs.cost) {
      items.push(
        Box({
          flexDirection: 'row',
          flexShrink: 0,
          columnGap: 1,
          alignItems: 'center',
          children: [
            desktop ? Svg({ alt: 'spend', width: 22, height: 22, source: ringSvg(100, STYLE.done.desk, 'usd') }) : Text({ color: STYLE.done.fill, children: ['$'] }),
            Text({ color: STYLE.done.fill, bold: true, wrap: 'truncate', children: [fmtUsd(spend.dayUsd)] }),
            Text({ ...tone(MUTED), wrap: 'truncate', children: ['today · ' + fmtUsd(spend.monthUsd) + ' this month'] }),
          ],
        }),
      )
    }
    const busy = rows.find((r) => (r.kind === 'bar' || r.kind === 'activity') && r.animating && r.state !== 'needs_input')
    if (busy) items.push(Box({ flexShrink: 1, children: [Text({ ...tone(MUTED), wrap: 'truncate', children: [STYLE[busy.style].glyph + ' ' + trunc(busy.short, 22)] })] }))
    const line = Box({
      flexDirection: 'row',
      columnGap: 2,
      alignItems: 'center',
      children: [
        ...(rows.length ? [toggle] : []),
        Box({ flexDirection: 'row', flexShrink: 1, overflow: 'hidden', columnGap: desktop ? 4 : 3, alignItems: 'center', children: items }),
        spacer,
        extrasText,
      ],
    })
    return stack(Box({ flexDirection: 'column', children: [...lane, line] }))
  }

  // ----- collapsed, text: one plain status line, clock and weather at its end -----
  if ((!open || !rows.length) && prefs.collapsed === 'text') {
    const parts = []
    for (const row of collapsedOrder(rows)) {
      const st = STYLE[row.style]
      if (parts.length) parts.push(Text({ children: ['  '] }))
      if (row.kind === 'route') {
        parts.push(Text({ color: desktop ? STYLE.run.desk : STYLE.run.fill, children: ['⇄ '] }))
        parts.push(Text({ ...tone(MUTED), children: [row.to + (row.effort ? ' · ' + row.effort : '')] }))
        continue
      }
      parts.push(Text({ color: desktop ? st.desk : st.fill, children: [st.glyph + ' '] }))
      parts.push(Text({ ...tone(row.state === 'needs_input' ? st.fill : MUTED), children: [row.short] }))
    }
    if (extras.length) parts.push(Text({ ...tone(MUTED), children: [(parts.length ? '  ' : '') + [...extras].reverse().join('  ')] }))
    const line = Box({
      flexDirection: 'row',
      columnGap: 1,
      children: [...(rows.length ? [toggle] : []), Box({ flexDirection: 'row', flexShrink: 1, children: [Text({ wrap: 'truncate', children: parts })] })],
    })
    return stack(Box({ flexDirection: 'column', children: [...lane, line] }))
  }

  // ----- collapsed, chips: one line of chips, limits first -----
  if (!open || !rows.length) {
    const chips = []
    // the terminal counts columns; the desktop counts pixels (about 8 per column, ~7.5 per character)
    let budget = desktop ? cols * 8 - 140 - extras.join('  ·  ').length * 7.5 : cols - 10 - extras.join('  ·  ').length
    let hidden = 0
    for (const row of collapsedOrder(rows)) {
      const st = STYLE[row.style]
      const w = desktop ? row.short.length * 8.5 + 76 : row.short.length + 10
      if (w > budget) {
        hidden++
        continue
      }
      budget -= w
      if (chips.length) chips.push(Text({ ...tone(TRACK), children: [' │ '] }))
      if (row.kind === 'route') {
        chips.push(Text({ color: desktop ? STYLE.run.desk : STYLE.run.fill, children: [row.short + ' '] }))
        continue
      }
      chips.push(Text({ color: desktop ? st.desk : st.fill, children: [st.glyph + ' '] }))
      const chipText = { ...tone(row.state === 'needs_input' ? st.fill : row.limit ? TEXT : '#c9c7c1'), children: [row.short + ' '] }

  on('ui.render', { component: 'AbovePrompt' }, deckView)