plan-progress

  on('ui.render', { component: 'Pane', requestId: STYLE_PANE }, async ($, e) => {
    const t = $.ui.resolve(e)
    const { Box, Button, Text } = t
    const Svg = 'Svg' in t ? t.Svg : null
    const current = await styleOf($)
    const view = await agentViewOf($)
    const isShown = await read($, isOpen)
    const isSounding = await read($, soundsOn)
    const isCross = await read($, crossOn)
    const now = await $.clock.now()
    const W = Math.max(200, Math.min(460, (e.props.bodyColumns || 50) * 8 - 24))
    // a tile's border and padding take about three columns
    const tileW = W - 24
    const sampleAgents: AgentRun[] = [
      { id: 'pa1', title: '讀取模組', state: 'running', tool: 'Read', startedAt: now - 48_000, endedAt: null, depth: 0 },
      { id: 'pa2', title: '量 API 延遲', state: 'done', tool: 'Done', startedAt: now - 72_000, endedAt: now - 6_000, depth: 0 },
      { id: 'pa3', title: '比對打包大小', state: 'waiting', tool: 'Needs approval', startedAt: now - 9_000, endedAt: null, depth: 0 },
    ]
    const agentsSample = { ...DEMO(now), id: 'preview-agents', agents: sampleAgents }
    const allAgents = { shown: sampleAgents, hidden: [] }
    // the slot keeps the expanded height in every mode, so switching modes never moves the list below
    const agentsSlotH = drawBar(current, agentsSample, W, now, allAgents).height
    const agentsDrawn = inSlot(drawBar(current, agentsSample, W, now, applyAgentView(allAgents, view)), W, agentsSlotH, 'top')
    // every style's preview sits centred in one slot as tall as the tallest, so all tiles share one size
    const previews = new Map(STYLE_IDS.map(id => [id, drawBar(id, { ...DEMO(now), id: `preview-${id}` }, tileW, now, null)] as const))
    const previewSlotH = Math.max(...[...previews.values()].map(d => d.height))

    return (
      <Box flexDirection="column" gap={2}>
        {/* the two on/off settings side by side; save and close stays at the top right */}
        <Box key="settings-row" flexDirection="row" alignItems="flex-end" gap={3}>
          <Box flexDirection="column" gap={1}>
            <Text bold>進度條</Text>
            <Box key="bars-row" flexDirection="row" alignItems="center" gap={1}>
              {([true, false] as const).map(shown => (
                <Button
                  key={shown ? 'bars-shown' : 'bars-hidden'}
                  variant={shown === isShown ? 'primary' : 'secondary'}
                  label={shown ? '顯示' : '隱藏'}
                  onPress={() => (shown === isShown ? undefined : setShown($, shown))}
                />
              ))}
            </Box>
          </Box>
          <Box flexDirection="column" gap={1}>
            <Text bold>提示音</Text>
            <Box key="sounds-row" flexDirection="row" alignItems="center" gap={1}>
              {([true, false] as const).map(isOn => (
                <Button
                  key={isOn ? 'sounds-on' : 'sounds-off'}
                  variant={isOn === isSounding ? 'primary' : 'secondary'}
                  label={isOn ? '開' : '關'}
                  onPress={() => (isOn === isSounding ? undefined : setSounds($, isOn))}
                />
              ))}
            </Box>
          </Box>
          <Box flexGrow={1} />
          {/* every press in the pane already saved; this one only closes it */}
          <Button key="save-close" variant="primary" label="儲存並關閉" onPress={() => $.ui.close({ id: STYLE_PANE })} />
        </Box>

        <Box flexDirection="column" gap={1}>
          <Text bold>其他 session</Text>
          <Box key="cross-row" flexDirection="row" alignItems="center" gap={1}>
            {([true, false] as const).map(isOn => (
              <Button
                key={isOn ? 'cross-on' : 'cross-off'}
                variant={isOn === isCross ? 'primary' : 'secondary'}
                label={isOn ? '開' : '關'}
                onPress={() => (isOn === isCross ? undefined : setCross($, isOn))}
              />
            ))}
          </Box>
        </Box>

        <Box flexDirection="column" gap={1}>
          <Text bold>Subagent 顯示</Text>
          <Box key="agents-row" flexDirection="row" alignItems="center" gap={1}>
            {AGENT_VIEWS.map(k => (
              <Button
                key={`agents-${k}`}
                variant={k === view ? 'primary' : 'secondary'}
                label={AGENT_VIEW_LABEL[k]}
                onPress={() => (k === view ? undefined : setAgentView($, k))}
              />
            ))}
          </Box>
          {Svg ? [<Svg key="agents-preview" source={agentsDrawn.svg} alt={`subagents ${view} preview`} width={W} height={agentsDrawn.height} />] : []}
        </Box>

        {/* tiles name no width (a Box width counts cells, not pixels); the column stretches them all to the pane's width */}
        <Box key="style-list" flexDirection="column" alignItems="stretch" gap={1}>
          <Text bold>進度條樣式</Text>
          {STYLE_IDS.map(id => {
            const isCurrent = id === current
            const drawn = inSlot(previews.get(id) ?? { svg: '', height: 0 }, tileW, previewSlotH, 'center')
            const name = STYLE_INFO[id].split('：')[0]
            // black and white like the pane's buttons: the current tile's border at full strength, the rest dim
            const frame = isCurrent ? {} : { borderDimColor: true }

            return (
              <Box key={`style-${id}`} flexDirection="column" gap={1} borderStyle="round" paddingX={1} {...frame}>
                <Box flexDirection="row" alignItems="center" gap={1}>
                  <Text bold>{name}</Text>
                  <Text dimColor>{id}</Text>
                  <Box flexGrow={1} />
                  <Button
                    key={`use-${id}`}
                    variant={isCurrent ? 'primary' : 'secondary'}
                    label={isCurrent ? '✓ 使用中' : '使用'}
                    onPress={() => (isCurrent ? undefined : setStyle($, id))}
                  />
                </Box>
                {Svg ? [<Svg key={`preview-${id}`} source={drawn.svg} alt={`${id} preview`} width={tileW} height={drawn.height} />] : []}
              </Box>
            )
          })}
        </Box>
      </Box>
    )
  })

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const list = await read($, plans)
    // other sessions that finished or wait on the person, under this session's own bars
    const away: OthersView = (await read($, crossOn)) ? await read($, others) : { rows: [] }
    const hasAway = away.rows.length > 0
    const shownAway = away.rows.slice(0, MAX_OTHERS)
    const awayTitle = (r: OtherSession) => {
      const name = r.bar?.title || r.label
      return name ? `${r.folder} · ${name}` : r.folder
    }
    if ((list.length === 0 && !hasAway) || e.props.hasSurvey || !(await read($, isOpen))) return next(e)
    const t = $.ui.resolve(e)
    const { Box, Button, Text } = t
    const Svg = 'Svg' in t ? t.Svg : null
    const total = Math.max(320, (e.props.bodyColumns || 100) * 8)
    // every bar has the same width and is pinned to the right edge (fixed-width percent, close button),
    // so rows line up whatever their titles; the slack goes into the gap after the title.
    // Desktop reports ~8 CSS px per column; glyph, gaps, percent and the close button take ~126 px.
    const titleWidth = Math.min(
      Math.round(total * 0.4),
      Math.max(0, ...list.map(p => Math.round(textWidth(p.title, 6.4))), ...shownAway.map(r => Math.round(textWidth(awayTitle(r), 6.4)))),
    )
    // a button label cannot truncate itself, so every title is cut to the title column here
    const fitTitle = (s: string) => {
      let shown = s
      while (shown.length > 3 && textWidth(shown, 6.4) > titleWidth) shown = shown.slice(0, -1)
      return shown === s ? s : shown.trimEnd() + '…'
    }
    const style = await styleOf($)
    const look = style === 'original' ? null : STYLES[style]
    const view = await agentViewOf($)
    // the hairline's elapsed time is wider than a percent
    const trackW = Math.max(120, Math.min(1400, total - titleWidth - 140 - (style === 'hairline' ? 18 : 0)))
    await read($, tick)
    const now = await $.clock.now()
    // the text right of each bar sits in a column as wide as the widest of them, so every bar's left edge lines up
    const rightOf = (p: Plan) => {
      const w = where(p)
      const pct = p.state === 'done' ? 100 : Math.round((Math.min(w.pos, w.total) / Math.max(1, w.total)) * 100)
      return look && Svg ? look.right(p, now) : `${String(pct).padStart(3, FIGURE_SPACE)}%`
    }
    // one cell more than the longest text: a cell is about 8 px, a wide letter (m, %) a little more than one
    const rightCells = 1 + Math.max(4, ...list.map(p => rightOf(p).length), ...shownAway.flatMap(r => (r.bar ? [rightOf(r.bar).length] : [])))
    // a hairline between task bars, so each bar and its agent strips read as one group
    const divider = `<svg xmlns="http://www.w3.org/2000/svg" width="${total}" height="1"><rect width="${total}" height="1" fill="#808080" fill-opacity=".22"/></svg>`

    return (
      <Box flexDirection="column" gap={1}>
        {list.flatMap((p, i) => {
          const v = applyAgentView(visibleAgents(p, now), view)
          const drawn = drawBar(style, p, trackW, now, v)
          const isLeaving = Boolean(p.leavingAt)
          const source = isLeaving ? fadeOut(drawn.svg, trackW, drawn.height) : drawn.svg
          const glyph = look ? look.glyph(p) : { char: STATE_GLYPH[p.state], color: STATE_COLOR[p.state] }
          const agentsAlt = v ? `; agents: ${(p.agents ?? []).map(a => `${a.title} ${a.state}`).join(', ')}` : ''
          const line = i > 0 && Svg ? [<Svg key={`div-${p.id}`} source={divider} alt="" width={total} height={1} />] : []
          const w = where(p)
          const pct = p.state === 'done' ? 100 : Math.round((Math.min(w.pos, w.total) / Math.max(1, w.total)) * 100)
          const color = STATE_COLOR[p.state]
          const stageName = p.stages[w.stage]?.name ?? ''
          const alt =
            p.state === 'done'
              ? `${p.title}: done, ${plural(w.total, 'step')}`
              : `${p.title}: ${stageName}, step ${w.step} of ${w.stageSize}, ${pct}%${p.note ? ` — ${p.note}` : ''}${agentsAlt}`
          const bar = `${'━'.repeat(Math.round(pct / 4))}${'─'.repeat(25 - Math.round(pct / 4))}`

          return [
            ...line,
            <Box key={`bar-${p.id}`} flexDirection="row" alignItems={v || drawn.height > TRACK_H ? 'flex-start' : 'center'} gap={1}>
              {glyph ? [<Text key="glyph" color={glyph.color} dimColor={isLeaving}>{glyph.char}</Text>] : []}
              {/* a plain button like the other sessions' titles, so both start at the same place; it does nothing when pressed */}
              <Button key={`title-${p.id}`} plain dimColor={isLeaving} label={fitTitle(p.title)} onPress={() => undefined} />
              <Box flexGrow={1} />
              {Svg ? (
                <Svg source={source} alt={alt} width={trackW} height={drawn.height} />
              ) : (
                <Text>
                  <Text color={color}>{bar.replace(/─/g, '')}</Text>
                  <Text dimColor>{bar.replace(/━/g, '')}</Text>
                  <Text color={color}>{` ${stageName} ${w.step}/${w.stageSize}`}</Text>
                </Text>
              )}
              <Box width={rightCells} justifyContent="flex-end">
                <Text dimColor>{rightOf(p)}</Text>
              </Box>
              <Button key={`close-${p.id}`} plain dimColor label="✕" onPress={() => dropPlan($, p.id)} />
            </Box>,
          ]
        })}
        {[
          ...(list.length > 0 && hasAway && Svg ? [<Svg key="div-away" source={divider} alt="" width={total} height={1} />] : []),
          // each other session as one bar row: its title is the button that switches to it
          ...shownAway.map(r => {
            const asState: PlanState = r.state === 'working' ? 'running' : r.state
            // a session waiting on the person shows its bar amber even when the bar itself still says running
            const p = r.bar ? { ...r.bar, state: r.state === 'needs_input' && r.bar.state === 'running' ? ('needs_input' as const) : r.bar.state } : null
            const drawn = p ? drawBar(style, p, trackW, now, null) : null
            const source = drawn ? (r.isLeaving ? fadeOut(drawn.svg, trackW, drawn.height) : drawn.svg) : ''
            const glyph = p && look ? look.glyph(p) : { char: STATE_GLYPH[p?.state ?? asState], color: STATE_COLOR[p?.state ?? asState] }
            const status = r.state === 'done' ? '跑完了' : r.state === 'needs_input' ? '等你決定' : '在跑'
            const w = p ? where(p) : null
            const pct = p && w ? (p.state === 'done' ? 100 : Math.round((Math.min(w.pos, w.total) / Math.max(1, w.total)) * 100)) : 0
            const textBar = `${'━'.repeat(Math.round(pct / 4))}${'─'.repeat(25 - Math.round(pct / 4))}`

            return (
              <Box key={`away-${r.hostId}`} flexDirection="row" alignItems={drawn && drawn.height > TRACK_H ? 'flex-start' : 'center'} gap={1}>
                {glyph ? [<Text key="glyph" color={glyph.color} dimColor={r.isLeaving}>{glyph.char}</Text>] : []}
                <Button key={`switch-${r.hostId}`} plain dimColor={r.isLeaving} label={fitTitle(awayTitle(r))} onPress={() => switchTo($, r)} />
                <Box flexGrow={1} />
                {p && drawn && Svg ? (
                  <Svg source={source} alt={`${awayTitle(r)}: ${status}`} width={trackW} height={drawn.height} />
                ) : p ? (
                  <Text>
                    <Text color={STATE_COLOR[p.state]}>{textBar.replace(/─/g, '')}</Text>
                    <Text dimColor>{textBar.replace(/━/g, '')}</Text>
                  </Text>
                ) : (
                  <Text dimColor>{status}</Text>
                )}
                <Box width={rightCells} justifyContent="flex-end">
                  <Text dimColor>{p ? rightOf(p) : ''}</Text>
                </Box>
                <Button key={`seen-${r.hostId}`} plain dimColor label="✕" onPress={() => dismissAway($, r)} />
              </Box>
            )
          }),
          ...(away.rows.length > MAX_OTHERS ? [<Text key="away-more" dimColor>{`還有 ${away.rows.length - MAX_OTHERS} 個 session`}</Text>] : []),
        ]}
      </Box>
    )
  })