task-orchestrator-mod

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || e.props.bodyColumns < MIN_BAND_COLUMNS) return next(e)
    if (await read($, bandHidden)) return next(e)
    // The smart line while the graph is scoped to an item, else today's in-flight line (model.ts).
    const text = bandLine(await read($, graphSnapshot), e.props.bodyColumns)
    if (text === undefined) return next(e)

    const { Box, Button } = $.ui.resolve(e)

    return h(
      Box,
      null,
      h(Button, { key: 'band-open', label: text, plain: true, onPress: () => openPane($) }),
      h(Button, { key: 'hide', label: 'Hide', onPress: () => update($, bandHidden, hide) }),
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e) => {
    // Cross-session follow: (re)set the one-slot listener on every draw so a pane opened from the band or redrawn after a hot reload still follows (a draw after close is harmless: followActivity checks graphPaneOpen).
    setRemoteAdvanceListener(itemId => void followActivity($, () => [itemId]))
    const ui = $.ui.resolve(e)
    const { Box, Text, Button, Svg } = ui
    const snap = await read($, graphSnapshot)
    const status = await read($, graphStatus)
    const scope = await read($, graphScope)
    const mode = await read($, graphScopeMode)
    const detail = await read($, graphDetail)
    const activity = await read($, graphActivity)
    const showDone = await read($, graphShowDone)
    const remote = (await read($, graphRemote)) ?? {}
    const open = (id: string): Promise<void> => openDetail($, id)

    const view: GraphView | null = snap
    const switching = isSwitching(scope, snap)
    const model = view === null ? null : cardsOf(view, activity.working, activity.changed, activity.blocked ?? {}, remote)
    const steps = model === null ? null : stepsOf(model.cards)
    const crit: CriticalPath = model === null || steps === null || view?.overview === true ? { ids: [], edges: new Set() } : criticalPath(model.cards, steps)
    const lay = model === null || steps === null ? null : layoutTD(model.cards, steps, { bodyColumns: (e.props as { bodyColumns?: number }).bodyColumns, showDone: showDone || view?.overview === true, hasRoot: model.root !== undefined, wrap: view?.overview === true })

    // Refresh is automatic (SSE or poll); Reconnect restarts the live source and shows only while degraded.
    const controls = h(
      Box,
      { key: 'controls', flexDirection: 'row', columnGap: 1, marginBottom: 1 },
      // Two-state scope toggle; the active scope draws as the primary button.
      h(Button, {
        key: 'scope-feature',
        label: 'This feature',
        ...(scope !== null ? { variant: 'primary' } : {}),
        onPress: async () => {
          const feature = await activeFeature($)
          if (feature === null) $.ui.toast('No active feature in this project.')
          else {
            await update($, graphScopeMode, pinned)
            await update($, graphScope, scopeTo(feature))
            requestRefresh()
          }
        },
      }),
      h(Button, { key: 'scope-project', label: 'Whole project', ...(scope === null ? { variant: 'primary' } : {}), onPress: async () => {
        await update($, graphScopeMode, pinned)
        await update($, graphScope, scopeTo(null))
        requestRefresh()
      } }),
      // Shown only while pinned: back to following this session's own TO activity (the bare /to-graph result).
      ...(mode === 'pinned'
        ? [h(Button, { key: 'scope-follow', label: 'Follow', onPress: async () => {
            await update($, graphScopeMode, auto)
            await update($, graphScope, scopeTo(await activeFeature($)))
            requestRefresh()
          } })]
        : []),
      ...(lay !== null && view?.overview !== true && lay.doneSteps.length > 0
        ? [h(Button, { key: 'done-steps', label: showDone ? 'Hide done steps' : 'Show done steps', onPress: () => update($, graphShowDone, v => !v) })]
        : []),
      ...(isDegraded(status) ? [h(Button, { key: 'reconnect', label: 'Reconnect', onPress: async () => {
        await update($, graphReconnectRequest, bump)
        requestReconnect(await read($, graphSubscribers))
      } })] : []),
    )

    if (view === null || model === null || steps === null || lay === null) {
      return h(Box, { flexDirection: 'column' }, controls, h(Text, { key: 'loading' }, status.lastError ?? 'Loading the work graph…'))
    }

    // A scope switch is still loading: say so, and draw nothing of the old scope (the header would claim it).
    if (switching) return h(Box, { flexDirection: 'column' }, controls, h(Text, { key: 'switching' }, `Loading ${loadingTitle(scope, snap)}…`))

    // With a breadcrumb the scope is named there; the header keeps the counts and the live source.
    const trail = view.trail ?? []
    const header = [...(trail.length > 0 ? [] : [scopeHeader(view)]), summaryLine(view), `live: ${status.liveSource}${status.refreshing ? ' · refreshing' : ''}`].join(' · ')
    const crumbs = trail.flatMap((c, i) => {
      const last = i === trail.length - 1
      const sep = i > 0 ? [h(Text, { key: `crumb-sep:${c.id}`, dimColor: true }, ' › ')] : []
      if (last) return [...sep, h(Text, { key: `crumb:${c.id}`, bold: true }, cut(c.title, 40))]
      const target = c.id === view.rootId ? null : c.id

      return [
        ...sep,
        h(Button, {
          key: `crumb:${c.id}`,
          label: cut(c.title, 28),
          plain: true,
          onPress: async () => {
            await update($, graphDetail, () => null)
            await update($, graphScopeMode, pinned)
            await update($, graphScope, scopeTo(target))
            requestRefresh()
          },
        }),
      ]
    })
    const body: unknown[] = []
    if (view.truncated) body.push(h(Text, { key: 'truncated', dimColor: true }, view.overview === true ? 'More children than shown.' : 'Large subtree: showing only the shallowest 150 items.'))
    if (view.error !== undefined) body.push(h(Text, { key: 'error', color: 'red' }, view.error))

    if (view.nodes.length === 0) {
      body.push(h(Text, { key: 'empty' }, 'No items in this scope.'))
    } else {
      body.push(
        h(
          Box,
          { key: 'legend', flexDirection: 'row', flexWrap: 'wrap', rowGap: 1, marginBottom: 1 },
          ...legendItems().map(item => h(Box, { key: `legend-${item.key}`, backgroundColor: item.color, paddingX: 1, marginRight: 1 }, h(Text, { color: '#ffffff' }, item.text))),
          h(Box, { key: 'legend-ready', backgroundColor: READY, paddingX: 1, marginRight: 1 }, h(Text, { color: '#ffffff' }, '○ ready')),
          h(Text, { key: 'legend-edges', dimColor: true }, '┄ contains   ╌ open blocker   ─ satisfied'),
          ...(crit.ids.length > 0 ? [h(Text, { key: 'legend-crit', color: CRIT_COLOR }, '   ━ critical path')] : []),
          ...(view.nodes.some(n => n.planLabel !== undefined) ? [h(Text, { key: 'legend-label', dimColor: true }, '   Tn = plan label')] : []),
        ),
      )
      if (lay.tooWide !== null) {
        body.push(h(Text, { key: 'too-wide', dimColor: true }, `Graph is ${lay.tooWide} columns wide; the pane shows ${lay.cols}. Widen the pane or open a smaller scope.`))
      }
      body.push(...canvasOf(ui, { model, lay, desktop: e.surface !== 'terminal' && Svg !== undefined, cell, steps: steps.max, open, count: view.nodes.length, overview: view.overview === true, extraChars: extrasChars(detail?.lines ?? null, trail.map(c => c.title)), crit }))
    }

    if (detail !== null) {
      // The detail is its own bordered panel: title line bold, then facts, then a row of actions.
      const facts = [
        ...detail.lines.map((line, i) => h(Text, { key: `detail-${i}`, ...(i === 0 ? { bold: true } : {}) }, line)),
        h(Text, { key: 'detail-uuid', dimColor: true }, `uuid: ${detail.itemId}`),
      ]
      const working = (activity.working[detail.itemId] ?? []).map(w =>
        h(Text, { key: `working-${w.agentId}` }, `working: ${w.seat}${w.model !== undefined ? ` · ${w.model}` : ''} · ${w.agentId === 'main' ? 'main loop' : id8(w.agentId)}`),
      )
      const actions = [
        h(Button, {
          key: 'detail-copy',
          label: 'Copy UUID',
          onPress: async press => {
            let copied = false
            try {
              const res = (await $.ui.copy({ text: detail.itemId, surface: press.surface })) as { isCopied?: boolean; value?: { isCopied?: boolean } }
              copied = res.isCopied === true || res.value?.isCopied === true
            } catch {
              copied = false
            }
            // $.ui.copy has no path on a remote surface (the desktop app) yet: fall back to the OS clipboard tool.
            if (!copied) copied = await hostCopy($, detail.itemId)
            $.ui.toast(copied ? `Copied ${detail.itemId}` : `Copy unavailable here. UUID: ${detail.itemId}`)
          },
        }),
        ...(detail.itemId !== view.scopeId
          ? [
              h(Button, {
                key: 'detail-open-graph',
                label: 'Open graph',
                onPress: async () => {
                  await update($, graphDetail, () => null)
                  await update($, graphScopeMode, pinned)
                  await update($, graphScope, scopeTo(detail.itemId))
                  requestRefresh()
                },
              }),
            ]
          : []),
        h(Button, { key: 'detail-close', label: 'Close detail', onPress: () => update($, graphDetail, () => null) }),
      ]