clawd-factory

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const list = await read($, calls)
    const tally = await read($, totals)
    const t = await read($, turn)
    const rows = e.viewport?.rows ?? 30
    // SVG版は経過秒を出さない。毎秒の時計を読むと毎秒描き直され、SVGのアニメーションが頭から再生し直されるため
    const isSvg = e.surface === 'desktop' || e.surface === 'mobile'
    const now = isSvg ? undefined : await read($, clock)
    const since = (from: number): string => (now === undefined ? '' : ` ${fmt(now - from)}`)

    // 1行目: いま何をしているか
    const running = list.filter(c => c.endedAt === undefined && !c.isSub)
    const head = running[running.length - 1]
    const status = head
      ? `● ${head.tool}${since(head.startedAt)}${head.label ? `  ${head.label}` : ''}`
      : t.isActive
        ? `● 考え中${now === undefined ? '' : `  経過${fmt(now - (t.startedAt ?? now))}`}`
        : `○ 待機中${t.lastMs === undefined ? '' : `  前回のターン${fmt(t.lastMs)}`}`
    const statusColor = head ? CATS[head.cat].color : undefined

    const total = ORDER.reduce((n, c) => n + (tally[c]?.n ?? 0), 0)
    const failed = ORDER.reduce((n, c) => n + (tally[c]?.failed ?? 0), 0)
    const footer = `ターン${t.n} · 呼び出し${total}回${failed > 0 ? ` · 失敗${failed}` : ''}`

    const recent = list.slice(-MAX_CLAWDS)

    if (e.surface === 'desktop' || e.surface === 'mobile') {
      const { Box, Text, Svg } = $.ui.resolve(e)
      // 歩く・✓を出す演出は、直近のイベントの直後のClawdだけに付ける(時計ではなくイベント時刻で決め、描き直しで変わらないようにする)
      const lastEventAt = Math.max(0, ...recent.map(c => c.endedAt ?? c.startedAt))
      const field: SvgField = {
        width: Math.max(240, Math.min(1400, Math.round(e.props.bodyColumns * 10.5))),
        isActive: t.isActive,
        workers: recent.map(c => ({
          id: c.id,
          cat: c.cat,
          state: c.endedAt === undefined ? 'run' : c.hasFailed ? 'fail' : 'ok',
          isSub: c.isSub === true,
          say: c.say ?? '',
          seq: c.seq ?? 0,
          isFreshStart: c.endedAt === undefined && c.startedAt >= lastEventAt - 1200,
          isFreshEnd: c.endedAt !== undefined && c.endedAt >= lastEventAt - 2500,
        })),
      }
      if (field.workers.length === 0) {
        field.workers.push({
          id: 'clawd', cat: 'other', state: t.isActive ? 'run' : 'ok', isSub: false, say: '', seq: 0,
          isFreshStart: false, isFreshEnd: false,
        })
      }

      return (
        <Box flexDirection="column">
          <Text color={statusColor} dimColor={!head && !t.isActive} wrap="truncate-end">
            {status}
          </Text>
          <Svg source={fieldSvg(field)} alt={fieldAlt(field)} isInteractive />
          <Text dimColor>{footer}</Text>
        </Box>
      )
    }

    if (e.surface === 'terminal') {
      const { Box, Text, Client } = $.ui.resolve(e)
      // 幅を'100%'にすると親の幅が中身で決まり大きさがループするので数値で渡す
      const cols = Math.max(12, e.props.bodyColumns - 1)
      const fieldRows = Math.min(16, Math.max(7, rows - 4))
      const field: FieldProps = {
        cols,
        rows: fieldRows,
        isActive: t.isActive,
        workers: recent.map(c => ({
          id: c.id,
          cat: c.cat,
          state: c.endedAt === undefined ? 'run' : c.hasFailed ? 'fail' : 'ok',
          isSub: c.isSub === true,
          say: c.say ?? '',
          seq: c.seq ?? 0,
        })),
      }

      return (
        <Box flexDirection="column">
          <Text color={statusColor} dimColor={!head && !t.isActive} wrap="truncate-end">
            {status}
          </Text>
          <Client key="field" module="./field.tsx" props={field} width={cols} height={fieldRows} />
          <Text dimColor>{footer}</Text>
        </Box>
      )
    }

    // ClientもSvgもない画面(VS Code)では文字だけで出す
    const { Box, Text } = $.ui.resolve(e)
    return (
      <Box flexDirection="column">
        <Text wrap="truncate-end">{status}</Text>
        <Text dimColor>{footer}</Text>
      </Box>
    )
  })