dotnet-workflow-kit

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const hiddenSlugs = await read($, dismissed)
    const all = (await read($, rows)).filter(one => !hiddenSlugs.includes(one.slug))
    const row = all.find(one => one.isCurrentBranch)
    const others = all.filter(one => !one.isCurrentBranch && !isComplete(one))
    const othersWaiting = others.filter(isWaiting).length
    if (e.props.hasSurvey || (!row && others.length === 0) || (await read($, isHidden))) {
      return next(e)
    }

    // The row shows live tool activity while Claude works, otherwise the file's detail.
    const live = await read($, activity)
    const tasks = e.props.isWorking ? [] : await read($, background)
    const isBusy = e.props.isWorking || tasks.length > 0
    // An agent that never reports its end (a remote one, a killed one) stops counting after an hour.
    const now = await $.clock.now()
    const running = (await read($, agents)).filter(a => now - a.at < AGENT_MS).length
    const crew = running === 0 ? '' : ` · ${running} ${running === 1 ? 'agent' : 'agents'} running`
    // A finished item says how it ended; this session's own shells and agents are not its news.
    const doing = (one: PipelineRow) =>
      isWaiting(one) || isComplete(one)
        ? one.detail
        : e.props.isWorking && live
          ? `${live.text}${crew}`
          : tasks.length > 0
            ? `Waiting on ${tasks.length === 1 ? tasks[0] : `${tasks.length} background tasks`}`
            : one.detail
    const chipLabel =
      others.length === 0 ? '' : othersWaiting > 0 ? `+${others.length} · ${othersWaiting} needs you` : `+${others.length}`
    const openPane = () => void toggleSessions($)
    // This session's own AppHost, by its dashboard port.
    const host = (await read($, aspire)).find(one => one.isMine)
    const hostPort = host ? dashboardPort(host) ?? host.ports[0] : undefined
    const hostLabel = host ? `Aspire${hostPort ? ` :${hostPort}` : ''}` : ''

    if (e.surface === 'terminal') {
      const { Box, Text, Button } = $.ui.resolve(e)
      const cols = e.props.bodyColumns
      const chip = chipLabel ? (
        <Box flexShrink={0} gap={1}>
          {othersWaiting > 0 ? <Text color={COLOR.waiting}>●</Text> : null}
          <Button key="sessions-chip" label={chipLabel} plain dimColor={othersWaiting === 0} onPress={openPane} />
        </Box>
      ) : null
      if (!row) {
        return (
          <Box width={cols} justifyContent="flex-end">
            {chip}
          </Box>
        )
      }

      const nameWidth = Math.max(10, Math.min(28, Math.floor(cols * 0.22)))
      const stageWidth = stageLabel(row).length
      const chipWidth = chipLabel ? chipLabel.length + 4 : 0
      const doingMin = cols >= 90 ? 24 : 0
      // A narrow terminal keeps the AppHost's mark and drops its label.
      const isHostLabelled = cols >= 90
      const hostWidth = host ? (isHostLabelled ? hostLabel.length + 3 : 2) : 0
      // dot, name, bar, stage, percent, AppHost, chip and their one-cell gaps, then the activity text.
      const room = cols - 2 - nameWidth - stageWidth - 4 - 5 - hostWidth - chipWidth - doingMin
      const segment = Math.max(1, Math.min(6, Math.floor(room / row.labels.length)))

      return (
        <Box gap={1} width={cols}>
          <Box flexShrink={0}>
            <Text color={dotColor(row)}>●</Text>
          </Box>
          <Box width={nameWidth} flexShrink={0}>
            <Text wrap="truncate-end" bold>
              {rowName(row)}
            </Text>
          </Box>
          <Box width={segment * row.labels.length} flexShrink={0}>
            <Text wrap="truncate-end">
              {row.statuses.map(s => (
                <Text color={s === 'todo' ? COLOR.todo : COLOR[s]} dimColor={s === 'todo'}>
                  {(s === 'todo' ? '░' : s === 'done' ? '█' : '▓').repeat(segment)}
                </Text>
              ))}
            </Text>
          </Box>
          <Box width={stageWidth} flexShrink={0}>
            <Text color={dotColor(row)} wrap="truncate-end">
              {stageLabel(row)}
            </Text>
          </Box>
          <Box width={4} flexShrink={0}>
            <Text dimColor>{String(pct(row)).padStart(3)}%</Text>
          </Box>
          {host ? (
            <Box flexShrink={0} gap={1}>
              <Text color={CARD.check}>◆</Text>
              {isHostLabelled ? <Text dimColor>{hostLabel}</Text> : null}
            </Box>
          ) : null}
          {doingMin > 0 && doing(row) ? (
            <Box flexGrow={1} flexShrink={1} minWidth={0}>
              <Text dimColor wrap="truncate-end">
                {doing(row)}
              </Text>
            </Box>
          ) : null}
          {chip}
        </Box>
      )
    }

    const { Box, Text, Svg, Button } = $.ui.resolve(e)
    const chip = chipLabel ? (
      <Box flexDirection="row" alignItems="center" gap={1} flexShrink={0}>
        {othersWaiting > 0 ? <Text color={COLOR.waiting}>●</Text> : null}
        <Button key="sessions-chip" label={`${chipLabel} ›`} plain dimColor={othersWaiting === 0} onPress={openPane} />
      </Box>
    ) : null
    if (!row) {
      return (
        <Box flexDirection="row" justifyContent="flex-end">
          {chip}
        </Box>
      )
    }

    // Never wraps. The bar is drawn at a fixed size and handed to the surface at that size, so
    // the desktop never scales it down to a slot narrower than the drawing (a tiny pill and
    // percentage); the name column gives way instead, truncating its text. The width comes from
    // about 8 CSS pixels a reported column, an estimate, so it is held to a modest range and a
    // spacer after the bar takes whatever the estimate left over.
    const bandW = (e.props.bodyColumns || 100) * 8
    const said = doing(row)
    const nameW = Math.round(
      Math.min(bandW / 3, Math.max(textPx(rowName(row), 13), said ? textPx(said, 12) : 0, 60)),
    )
    const clusterW =
      (host ? textPx(hostLabel, 13) + 36 : 0) +
      (chipLabel ? textPx(`${chipLabel} ›`, 13) + 40 : 0) +
      (isComplete(row) ? 32 : 0)
    const barW = Math.round(Math.max(BAR_MIN, Math.min(BAR_MAX, bandW - 28 - nameW - clusterW - 56)))

    return (
      <Box flexDirection="row" flexWrap="nowrap" alignItems="center" gap={2}>
        <Box flexShrink={0}>
          <Text color={dotColor(row)}>●</Text>
        </Box>
        <Box flexDirection="column" flexShrink={1} width={nameW} minWidth={0}>
          <Text wrap="truncate-end">{rowName(row)}</Text>
          {doing(row) ? (
            <Text dimColor wrap="truncate-end">
              {doing(row)}
            </Text>
          ) : null}
        </Box>
        <Box flexShrink={0} width={barW}>
          <Svg
            source={barSvg(row, isBusy, barW)}
            width={barW}
            height={BAR_HEIGHT}
            alt={`${rowName(row)}: ${stageLabel(row)}, ${pct(row)}% complete${doing(row) ? `, ${doing(row)}` : ''}`}
          />
        </Box>

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Text, Button, Link } = elements
    const Svg = 'Svg' in elements ? elements.Svg : undefined
    const isTerminal = e.surface === 'terminal'
    const hiddenSlugs = await read($, dismissed)
    const list = (await read($, rows)).filter(row => !hiddenSlugs.includes(row.slug))
    const shouldNotify = await read($, notifyOthers)
    const needsYou = list.filter(isWaiting)
    const running = list.filter(row => !isComplete(row) && !isWaiting(row))
    const done = list.filter(isComplete)
    const dismiss = (slugs: string[]) => update($, dismissed, all => [...new Set([...all, ...slugs])])
    const hosts = await read($, aspire)
    const nowS = (await $.clock.now()) / 1000
    const since = (entry: AspireEntry) => {
      const minutes = Math.max(0, Math.round((nowS - entry.firstSeen) / 60))

      return minutes < 60 ? `${minutes} min` : `${Math.floor(minutes / 60)} h ${minutes % 60} min`
    }

    // One AppHost on a card: whether it runs, for how long, its dashboard and the ports it holds.
    const hostBlock = (entry: AspireEntry) => (
      <Box key={`aspire-${entry.pid}`} flexDirection="column">
        <Box flexDirection="row" gap={1} alignItems="center">
          <Text color={entry.isStale ? COLOR.todo : CARD.check}>●</Text>
          <Box flexGrow={1} flexShrink={1} minWidth={0}>
            <Text wrap="truncate-end">
              <Text bold>{entry.project}</Text>
              <Text dimColor>{` · ${entry.isStale ? 'its session has ended' : `running ${since(entry)}`} · pid ${entry.pid}`}</Text>
            </Text>
          </Box>
          {entry.dashboard ? <Link key={`dashboard-${entry.pid}`} href={entry.dashboard} label="Dashboard ↗" /> : null}
        </Box>
        {portsOf(entry).length ? (
          <Text dimColor wrap="truncate-end">
            {portList(entry)}
          </Text>
        ) : null}
        {!entry.isMine && !entry.isStale ? (
          <Box flexDirection="row">
            <Button key={`stop-${entry.pid}`} label="Ask its session to stop it" onPress={() => askToStop($, entry)} />
          </Box>
        ) : null}
      </Box>
    )

    const heading = (title: string, count: number, color?: string) => (
      <Text bold color={color} dimColor={!color}>
        {title.toUpperCase()} · {count}
      </Text>
    )

    const stages = (row: PipelineRow) => {
      const alt = `${stageLabel(row)}, ${pct(row)}% complete`
      if (Svg) return <Svg source={segmentsSvg(row)} alt={alt} height={SEGMENT_HEIGHT} />

      return (
        <Text wrap="truncate-end">
          {row.statuses.map((s, i) => (
            <Text key={`${row.slug}-${i}`} color={segmentColor(row, s)}>
              {s === 'todo' ? '▱▱▱ ' : '▰▰▰ '}
            </Text>
          ))}
        </Text>
      )
    }

    const card = (row: PipelineRow) => {
      const waiting = isWaiting(row)
      const name = nameParts(row)
      const border = waiting ? CARD.waitingBorder : row.isCurrentBranch ? CARD.currentBorder : CARD.border
      const tint = isTerminal ? undefined : waiting ? CARD.waitingTint : row.isCurrentBranch ? CARD.currentTint : undefined

      return (
        <Box
          key={`card-${row.slug}`}
          flexDirection="column"
          gap={isTerminal ? 0 : 1}
          paddingX={1}
          paddingY={isTerminal ? 0 : 1}
          borderStyle="round"
          borderColor={border}
          backgroundColor={tint}
        >
          <Box flexDirection="row" gap={1} alignItems="center">
            {name.ticket ? <Text dimColor>{name.ticket}</Text> : null}
            <Box flexGrow={1} flexShrink={1} minWidth={0}>
              <Text bold wrap="truncate-end">
                {name.title}
              </Text>
            </Box>
            {row.isCurrentBranch ? <Text color={CARD.currentText}>Viewing</Text> : null}
          </Box>
          {stages(row)}
          {hosts
            .filter(one => one.branch === row.branch && one.isMine === row.isCurrentBranch)
            .map(hostBlock)}
          <Box flexDirection="row" gap={1} alignItems="center">
            <Box flexGrow={1} flexShrink={1} minWidth={0}>
              <Text wrap="truncate-end">
                <Text color={waiting ? COLOR.waiting : CARD.currentText}>{stageLabel(row)}</Text>
                {row.detail ? <Text dimColor>{` · ${row.detail.replace(/^Waiting on you: /, '')}`}</Text> : null}
              </Text>
            </Box>
            {row.isCurrentBranch ? null : (
              <Button
                key={`show-${row.slug}`}
                label="Show"
                variant={waiting ? 'primary' : undefined}
                onPress={() =>
                  $.ui.toast(`${rowName(row)} is on ${row.branch || 'another branch'}: open its session from the list`)
                }
              />
            )}
          </Box>
        </Box>
      )
    }

    const doneLine = (row: PipelineRow) => {
      const name = nameParts(row)

      return (
        <Box key={`done-${row.slug}`} flexDirection="row" gap={1} alignItems="center" paddingX={1}>
          <Text color={CARD.check}>✓</Text>
          {name.ticket ? <Text dimColor>{name.ticket}</Text> : null}
          <Box flexGrow={1} flexShrink={1} minWidth={0}>
            <Text dimColor wrap="truncate-end">
              {name.title}
            </Text>
          </Box>
          <Text dimColor>{row.detail || 'Done'}</Text>
          <Button key={`dismiss-${row.slug}`} label="✕" plain dimColor onPress={() => dismiss([row.slug])} />
        </Box>
      )
    }

    return (
      <Box flexDirection="column" gap={1}>
        {list.length === 0 ? <Text dimColor>No work items in this repository yet. /start begins one.</Text> : null}
        {needsYou.length > 0 ? (
          <Box key="needs-you" flexDirection="column" gap={1}>
            {heading('Needs you', needsYou.length, COLOR.waiting)}
            {needsYou.map(card)}
          </Box>
        ) : null}
        {running.length > 0 ? (
          <Box key="running" flexDirection="column" gap={1}>
            {heading('Running', running.length)}
            {running.map(card)}
          </Box>
        ) : null}
        {done.length > 0 ? (
          <Box key="done" flexDirection="column" gap={isTerminal ? 0 : 1}>
            <Box flexDirection="row" justifyContent="space-between" alignItems="center">
              {heading('Done', done.length)}
              <Button
                key="dismiss-all"
                label="Dismiss all"
                plain