workbench

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const line = await read($, lineAtom)
    if (config.bandMode !== 'band' || e.props.hasSurvey || !line) return next(e)
    await read($, tickAtom) // 订阅慢速时钟，让用时走起来
    const isLegendOpen = await read($, legendAtom)
    const isExpanded = await read($, narrationExpandedAtom)
    const gitState = await read($, gitAtom)

    const resolved = $.ui.resolve(e)
    const { Box, Text, Button } = resolved
    // 终端的组件表里也有 Svg，但只会显示替代文字，所以按表面判断：终端走 Unicode 符号和纯文本
    const Svg = e.surface !== 'terminal' && 'Svg' in resolved ? resolved.Svg : null
    const now = Date.now()
    const isWorkingNow = line.phase === 'working'
    const elapsed = duration((line.endedAt ?? now) - line.startedAt)
    const color = isWorkingNow ? CLAY : line.phase === 'done' ? CLAY_MUTED : STONE

    const t = line.tokens
    const hasTokens = t.input + t.output + t.cacheRead + t.cacheWrite > 0
    const prompt = t.input + t.cacheRead + t.cacheWrite
    const hitRate = prompt > 0 ? Math.round((t.cacheRead / prompt) * 100) : null
    const ctx = line.contextPercent
    const ctxColor = ctx === null ? CLOUD : ctx >= 85 ? ALERT : ctx >= 60 ? AMBER : CLAY_MUTED
    const ctxFilled = ctx === null ? 0 : Math.max(0, Math.min(10, Math.round(ctx / 10)))
    const rule = '─'.repeat(Math.max(10, Math.min(240, e.props.bodyColumns - 2)))
    const isFresh = (at: number) => isWorkingNow && now - at < FLASH_MS

    // 第一行旁白：按 narrationOverflow 决定放不下时怎么办
    const overflow = config.overflow === 'scroll' && !Svg ? 'wrap' : config.overflow
    const marqueeW = Math.max(200, Math.min(1400, (e.props.bodyColumns - 10) * 8))
    const narration =
      overflow === 'scroll' && Svg ? (
        <Box flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
          <Svg source={marqueeSvg(line.text, color, isWorkingNow, marqueeW)} alt={line.text} width={marqueeW} height={MARQUEE_H} />
        </Box>
      ) : overflow === 'wrap' || isExpanded ? (
        <Box flexGrow={1} flexShrink={1} minWidth={0}>
          <Text bold={isWorkingNow} color={color} wrap="wrap">
            {line.text}
          </Text>
        </Box>
      ) : (
        // 省略：单行截断；放不下时旁边有「全文」按钮，点了才展开
        <Box flexGrow={1} flexShrink={1} minWidth={0}>
          <Text bold={isWorkingNow} color={color} wrap="truncate-end">
            {line.text}
          </Text>
        </Box>
      )
    // 估算放不下：按格数比较，右侧还有状态格和按钮。Desktop 用的是比例字体，格数和实际宽度对不准，
    // 门槛放宽到六成：宁可在刚好放得下时多显示一个「全文」，也不要截断了却没有入口
    const isLong = cellWidth(line.text) > (e.props.bodyColumns - 16) * 0.6
    const expandToggle =
      overflow === 'truncate' && (isLong || isExpanded) ? (
        <Box key="narration-toggle" flexShrink={0}>
          <Button
            key="narration-expand"
            plain
            dimColor
            label={isExpanded ? tr().collapseNarration : tr().expandNarration}
            hover={{ underline: true, dimColor: false }}
            onPress={() => void update($, narrationExpandedAtom, v => !v)}
          />
        </Box>
      ) : null

    // 图标的含义：悬停弹出太容易误触（引擎的悬停没有延迟），改成点 ⓘ 才在下方展开图例
    const icon = (kind: IconKind, c: string) =>
      Svg ? (
        <Svg source={ICONS[kind](c)} alt={tr().alt[kind]} width={iconWidth(kind)} height={ICON_H} />
      ) : (
        <Text color={c}>{GLYPHS[kind]}</Text>
      )
    const legend = (
      <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
        {(['input', 'output', 'cacheRead', 'cacheWrite', 'narrator', 'hit', 'cost', 'context'] as const).map(kind => (
          <Box flexDirection="row" alignItems="center" gap={1}>
            {icon(kind, kind === 'input' ? CLAY : kind === 'output' ? SKY : kind === 'cacheRead' ? OLIVE : kind === 'cacheWrite' ? AMBER : kind === 'hit' || kind === 'context' ? CLAY_MUTED : kind === 'cost' ? OLIVE : IDLE)}
            <Text dimColor>{tr().legend[kind]}</Text>
          </Box>
        ))}
      </Box>
    )

    // 一个指标：图标 + 加粗数值；图标颜色表示类别，刚增长时换成高亮色、数值同色
    const stat = (kind: IconKind, value: string, tint: string, isLit = false) => {
      const c = isLit ? tint : kind === 'input' || kind === 'output' ? IDLE : tint
      return (
        <Box flexDirection="row" alignItems="center" gap={1}>
          {icon(kind, c)}
          <Text bold color={isLit ? tint : undefined}>
            {value}
          </Text>
        </Box>
      )
    }

    return (
      <Box flexDirection="column" paddingX={1}>
        {/* 旁白占满左侧，状态钉在右侧固定宽度的格子里：文字长短变化不会挪动它 */}
        <Box flexDirection="row" gap={1}>
          {narration}
          {expandToggle}
          <Box width={6} flexShrink={0} justifyContent="flex-end">
            {isWorkingNow ? (
              Svg ? (
                <Svg source={dotsSvg(CLAY, CLOUD)} alt={tr().working} width={DOTS_W} height={DOTS_H} />
              ) : (
                <Text color={CLAY}>● ● ●</Text>
              )
            ) : (
              <Text bold color={color}>
                {line.phase === 'done' ? '✓' : '✕'}
              </Text>
            )}
          </Box>
        </Box>

        <Text color={CLOUD} dimColor wrap="truncate-end">
          {rule}
        </Text>

        {/* 进度行：左边是信息，右边钉着两个入口按钮（工作台、设置），左边再长也挤不走它们 */}
        <Box flexDirection="row" alignItems="center" gap={2}>
          <Box flexGrow={1} flexShrink={1} minWidth={0} flexDirection="row" flexWrap="wrap" columnGap={2}>
            <Text>{tr().bandSteps(isWorkingNow, line.steps)}</Text>
            <Text>
              <Text dimColor>{tr().bandTime}</Text>
              <Text bold>{elapsed}</Text>
            </Text>
            {line.errors > 0 && (
              <Box key="open-errors">
                <Button
                  key="errors"
                  plain
                  label={tr().bandFailures(line.errors)}
                  hover={{ underline: true }}
                  onPress={() => void openPane($, 'turn')}
                />
              </Box>
            )}
            {gitState.files.length > 0 && (
              <Box key="open-changes">
                <Button
                  key="changes"
                  plain
                  label={tr().bandChanges(gitState.files.length)}
                  hover={{ underline: true, color: CLAY }}
                  onPress={() => void openPane($, 'changes')}
                />
              </Box>
            )}
            {line.current && (
              <Text dimColor wrap="truncate-end">
                ▸ {line.current}
              </Text>
            )}
          </Box>
          <Box flexShrink={0} flexDirection="row" alignItems="center" gap={1}>
            <Button key="open-workbench" label={tr().openWorkbench} onPress={() => void openLastTab($)} />

  on('ui.render', { component: 'Pane', requestId: SETTINGS_PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const m = tr()
    const current: Record<SettingField, string> = {
      language: config.language,
      bandMode: config.bandMode,
      narrationOverflow: config.overflow,
      narratorMode: config.mode,
      narratorIntervalSeconds: String(config.minGapMs / 1000),
      narratorMaterialChars: String(config.materialStep),
    }
    const resolved = m.langName[m.lang]
    const pending = await read($, pendingSettingAtom)

    return (
      <Box flexDirection="column" gap={1}>
        <Text bold>{m.settingsTitle}</Text>
        {SETTING_FIELDS.map(({ field, choices }) => {
          const meta = m.fields[field]!
          const isSaving = pending?.field === field
          const selected = isSaving ? pending.value : current[field]
          return (
            <Box key={`setting-${field}`} flexDirection="column">
              <Text>
                <Text bold>{meta.title}</Text>
                {isSaving && <Text dimColor>{`  ${m.settingSaving}`}</Text>}
              </Text>
              <Text dimColor wrap="wrap">
                {meta.desc}
              </Text>
              <Box flexDirection="row" gap={1} flexWrap="wrap">
                {choices.map(choice => {
                  const value = String(choice)
                  return (
                    <Button
                      key={`set-${field}-${value}`}
                      label={meta.choice(value, resolved)}
                      variant={selected === value ? 'primary' : 'secondary'}
                      onPress={() => (selected === value ? undefined : void saveSetting($, field, choice))}
                    />
                  )
                })}
              </Box>
            </Box>
          )
        })}
        <Text dimColor wrap="wrap">
          {m.settingsNote}
        </Text>
      </Box>
    )
  })