repo-sessions

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { value: snap } = await $.state.get(SNAPSHOT)
    const { value: isExpanded = false } = await $.state.get(EXPANDED)
    const others = (snap?.peers ?? []).filter(p => !p.isSelf)
    if (!snap || e.props.hasSurvey) return next(e)

    const toggle = () => $.state.set(EXPANDED, !isExpanded)
    const label = isExpanded ? 'Collapse' : 'Timeline'

    if (e.surface !== 'terminal') {
      const { Box, Button, Svg } = $.ui.resolve(e)
      const header = summarySvg(snap)
      const timeline = isExpanded ? paneSvg(snap, 560, { withHeader: false, isFixed: true }) : null

      // Chips that fit beside the header and the toggle; the rest fold into +N.
      let room = Math.min(1100, Math.max(320, e.props.bodyColumns * 7.5)) - header.width - 110
      const shown = others.filter(p => {
        const w = chipWidth(p.name, ago(snap.checkedAt - p.since), p.openUrl !== undefined)
        if (w > room) return false
        room -= w
        return true
      })
      const hidden = others.length - shown.length
      const more = hidden > 0 ? pixelTextSvg(`+${hidden}`) : null

      return (
        <Box flexDirection="column">
          <Box flexDirection="row" alignItems="center" justifyContent="space-between" gap={1}>
            <Box flexDirection="row" alignItems="center" gap={2}>
              <Svg source={header.source} width={header.width} height={header.height} alt={`${others.length} other sessions in this repo`} />
              {shown.map(p => {
                const isBusy = p.status === 'busy'
                const sprite = spriteSvg(p.agent, isBusy)
                const time = pixelTextSvg(ago(snap.checkedAt - p.since))
                const url = p.openUrl

                return (
                  <Box key={`chip-${p.agent}-${p.id}`} flexDirection="row" alignItems="center" gap={1}>
                    <Svg source={sprite.source} width={sprite.width} height={sprite.height} alt={`${p.agent} ${p.status}`} />
                    {url ? (
                      <Button
                        key={`open-${p.agent}-${p.id}`}
                        label={p.name}
                        plain
                        dimColor={!isBusy}
                        onPress={() => $.process.run(['open', url])}
                      />
                    ) : (
                      <Svg source={nameSvg(p.name, isBusy).source} width={nameSvg(p.name, isBusy).width} height={16} alt={p.name} />
                    )}
                    <Svg source={time.source} width={time.width} height={time.height} alt={time.text} />
                  </Box>
                )
              })}
              {more && <Svg source={more.source} width={more.width} height={more.height} alt={more.text} />}
            </Box>
            <Button key="toggle" label={label} dimColor onPress={toggle} />
          </Box>
          {timeline && (
            <Svg source={timeline.source} width={timeline.width} height={timeline.height} alt="Session activity, last 10 minutes" />
          )}
        </Box>
      )
    }

    const { Box, Button, Text } = $.ui.resolve(e)
    const busy = others.filter(p => p.status === 'busy').length

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" gap={2}>
          <Text wrap="truncate-end">
            <Text bold>{snap.root.split('/').pop()}</Text>
            <Text dimColor> {busy} busy · {others.length - busy} idle</Text>
          </Text>
          {others.map(p => {
            const url = p.openUrl

            return (
              <Box key={`chip-${p.agent}-${p.id}`} flexDirection="row">
                <Text color={p.status === 'busy' ? '#0ca30c' : 'gray'}>{p.status === 'busy' ? '●' : '○'}</Text>
                <Text color={p.agent === 'codex' ? '#3987e5' : '#d95926'}>■ </Text>
                {url ? (
                  <Button
                    key={`open-${p.agent}-${p.id}`}
                    label={p.name}
                    plain
                    dimColor={p.status !== 'busy'}
                    onPress={() => $.process.run(['open', url])}
                  />
                ) : (
                  <Text dimColor={p.status !== 'busy'} wrap="truncate-end">{p.name}</Text>
                )}
              </Box>
            )
          })}
          <Button key="toggle" label={label} dimColor onPress={toggle} />
        </Box>
        {isExpanded &&
          others.map(p => (
            <Text key={`row-${p.agent}-${p.id}`} wrap="truncate-end">
              <Text color={p.agent === 'codex' ? '#3987e5' : '#d95926'}>{stripText(p.history)}</Text>
              <Text dimColor> {p.status} {ago(snap.checkedAt - p.since)} · </Text>
              {p.name}
            </Text>
          ))}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { value: snap } = await $.state.get(SNAPSHOT)

    if (e.surface !== 'terminal') {
      const { Svg, Text } = $.ui.resolve(e)
      if (!snap) return <Text>Scanning…</Text>
      const pane = paneSvg(snap)

      return <Svg source={pane.source} alt={`${snap.peers.length} sessions in this repo`} />
    }

    const { Box, Text } = $.ui.resolve(e)
    if (!snap) return <Text dimColor>Scanning…</Text>

    return (
      <Box flexDirection="column">
        {snap.peers.map(p => (
          <Box key={`${p.agent}-${p.id}`} flexDirection="column" marginTop={1}>
            <Text wrap="truncate-end">
              <Text color={p.status === 'busy' ? '#0ca30c' : 'gray'}>{p.status === 'busy' ? '●' : '○'} </Text>
              <Text bold={p.status === 'busy'}>{p.name}</Text>
            </Text>
            <Text wrap="truncate-end">
              {'  '}<Text color={p.agent === 'codex' ? '#3987e5' : '#d95926'}>{stripText(p.history)}</Text>
              <Text dimColor>
                {' '}{p.isSelf ? 'You · ' : ''}{p.status} {ago(snap.checkedAt - p.since)}
                {p.branch ? ` · ${p.branch}` : ''}
                {relativeCwd(p.cwd, snap.root) ? ` · ${relativeCwd(p.cwd, snap.root)}` : ''}
              </Text>
            </Text>
          </Box>
        ))}
      </Box>
    )
  })