superset-deck

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
    if (e.surface === 'mobile') return next(e)
    const { Box, Text, Button, Input, Select, Code } = $.ui.resolve(e)
    const cols = e.props.bodyColumns
    if (e.viewport?.columns) screenColumns = e.viewport.columns
    if (needsWiden && screenColumns) {
      needsWiden = false
      void openPane($, false)
    }
    const rows = Math.max(12, (e.viewport?.rows ?? 30) - 3)
    const now = Date.now()

    const [list, terms, stat, projs, sel, term, t, m, f, scr, d, off, del, bz, ban, loaded, fr] =
      await Promise.all([
        read($, workspaces), read($, terminals), read($, stats), read($, projects), read($, selected),
        read($, terminal), read($, tab), read($, mode), read($, form), read($, screen), read($, diff),
        read($, diffOffset), read($, confirmDelete), read($, busy), read($, banner),
        read($, loadedAt), read($, frame),
      ])

    const spin = icons.spinner[fr % icons.spinner.length]
    const ws = list.find(w => w.id === sel) ?? null
    const live = liveTerminals(ws ? terms[ws.id] : [])
    const totalLive = Object.values(terms).reduce((n, l) => n + liveTerminals(l).length, 0)
    const isWide = cols >= 90
    const sideW = isWide ? Math.min(40, Math.max(28, Math.floor(cols * 0.32))) : cols
    const mainW = isWide ? cols - sideW - 1 : cols

    const statusOf = (w: Workspace) => {
      const l = liveTerminals(terms[w.id]).length
      const isHot = now - w.lastActivityAt < ACTIVE_MS || (w.id === sel && scr && now - scr.changedAt < SCREEN_ACTIVE_MS)
      if (l > 0 && isHot) return { glyph: spin, color: 'yellow', word: 'working' }
      if (l > 0) return { glyph: icons.live, color: 'green', word: `${l} live` }
      return { glyph: icons.idle, color: 'gray', word: 'idle' }
    }

    const StatText = ({ s }: { s: DiffStat | undefined }) =>
      s && (s.added || s.removed) ? (
        <Text>
          <Text color="green">+{s.added}</Text>
          <Text color="red"> −{s.removed}</Text>
        </Text>
      ) : (
        <Text dimColor> </Text>
      )

    // ── header ───────────────────────────────────────────────
    const header = (
      <Box flexDirection="row" justifyContent="space-between" width={cols}>
        <Text>
          <Text color="magenta" bold>
            {icons.logo} Superset
          </Text>
          <Text dimColor>
            {'  '}
            {icons.host} local · {list.length} workspaces ·{' '}
          </Text>
          <Text color={totalLive ? 'green' : 'gray'}>
            {icons.live} {totalLive} live
          </Text>
          {bz && (
            <Text color="yellow">
              {'  '}
              {spin} {bz}
            </Text>
          )}
        </Text>
        <Box flexDirection="row" gap={1}>
          <Button key="new" plain hotkey="n" label={`${icons.plus} New`} onPress={() => update($, mode, () => 'new' as Mode)} />
          <Button key="refresh" plain hotkey="r" label={icons.refresh} onPress={() => refresh($, { force: true })} />
          <Button key="max" plain hotkey="z" label={isMax ? icons.restore : icons.maximize} onPress={() => toggleMax($)} />
        </Box>
      </Box>
    )

    // ── sidebar ──────────────────────────────────────────────
    const sideRows: { key: string; node: RenderElement; id?: string }[] = []
    for (const [project, items] of grouped(list)) {
      const liveInGroup = items.reduce((n, w) => n + liveTerminals(terms[w.id]).length, 0)
      sideRows.push({
        key: `g:${project}`,
        node: (
          <Box key={`g:${project}`} flexDirection="row" justifyContent="space-between" width={sideW} marginTop={sideRows.length ? 1 : 0}>
            <Text bold color="blue" wrap="truncate">
              {icons.folderOpen} {cut(project, sideW - 8)}
            </Text>
            <Text dimColor>{liveInGroup ? `${liveInGroup}/${items.length}` : items.length}</Text>
          </Box>
        ),
      })
      for (const w of items) {
        const st = statusOf(w)
        const isSel = w.id === sel
        const s = stat[w.id]
        const right = `${s && (s.added || s.removed) ? `+${s.added} −${s.removed} ` : ''}${ago(w.lastActivityAt, now)}`
        sideRows.push({
          key: `w:${w.id}`,
          id: w.id,
          node: (
            <Box key={`w:${w.id}`} flexDirection="row" width={sideW} backgroundColor={isSel ? 'blackBright' : undefined}>
              <Text color={isSel ? 'cyan' : 'gray'}>{isSel ? '▌' : ' '}</Text>
              <Text color={st.color}>{st.glyph} </Text>
              <Box flexGrow={1} flexShrink={1}>
                <Button
                  key={`ws:${w.id}`}
                  plain
                  label={cut(w.branch || w.name, sideW - right.length - 6)}
                  onPress={() => select($, w.id)}
                />
              </Box>
              <StatText s={s} />
              <Text dimColor> {ago(w.lastActivityAt, now)}</Text>
            </Box>
          ),
        })
      }
    }
    const sideRoom = Math.max(4, (isWide ? rows : Math.floor(rows / 3)) - 4)
    const selIndex = Math.max(0, sideRows.findIndex(r => r.id === sel))
    const start = Math.max(0, Math.min(selIndex - Math.floor(sideRoom / 2), sideRows.length - sideRoom))
    const visible = sideRows.slice(start, start + sideRoom)

    const sidebar = (
      <Box flexDirection="column" width={sideW} flexShrink={0}>
        {list.length === 0 ? (
          <Text dimColor>
            {loaded ? 'No workspaces on this machine yet. Press n to make one.' : `${spin} Loading workspaces…`}
          </Text>
        ) : (
          visible.map(r => r.node)
        )}
        <Box flexGrow={1} />
        <Box flexDirection="row" gap={1} marginTop={1}>
          <Button key="up" plain hotkey="k" label={`${icons.up} k`} onPress={() => move($, -1)} />
          <Button key="down" plain hotkey="j" label={`${icons.down} j`} onPress={() => move($, 1)} />
          <Text dimColor>
            {start + 1}–{Math.min(sideRows.length, start + sideRoom)}/{sideRows.length}
          </Text>
        </Box>
      </Box>
    )

    // ── main: new-workspace form ─────────────────────────────
    const newForm = () => (
      <Box flexDirection="column" width={mainW} borderStyle="round" borderColor="magenta" paddingX={1}>
        <Text bold color="magenta">
          {icons.plus} New workspace
        </Text>
        <Text dimColor>A git worktree on a new branch, with {agentPreset} started on your prompt.</Text>
        <Box marginTop={1} flexDirection="column">
          {projs.length === 0 ? (
            <Text dimColor>
              {spin} Loading projects…
            </Text>
          ) : (
          <Select
            key="new:project"
            label={`${icons.folder} Project `}
            value={f.projectId || undefined}
            options={projs.map(p => ({ value: p.id, label: p.name }))}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    if (!showBand || e.props.hasSurvey) return below
    const [list, terms] = [await read($, workspaces), await read($, terminals)]
    if (list.length === 0) return below
    const isOpen = await paneShown($)
    if (isOpen) return below
    const { Box, Text, Button } = $.ui.resolve(e)
    const now = Date.now()
    const live = Object.values(terms).reduce((n, l) => n + liveTerminals(l).length, 0)
    const hot = list.filter(w => now - w.lastActivityAt < ACTIVE_MS).length
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={1}>
          <Text>
            <Text color="magenta" bold>
              {icons.logo} Superset
            </Text>
            <Text dimColor> {list.length} workspaces · </Text>
            <Text color={live ? 'green' : 'gray'}>
              {icons.live} {live} live
            </Text>
            {hot > 0 && <Text color="yellow"> · {hot} active</Text>}
          </Text>
          <Button key="band:open" plain hotkey="o" label={`${icons.open} open`} onPress={() => openPane($, true)} />
        </Box>
        {below}
      </Box>
    )
  })