subagent-guard

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, ...rest } = $.ui.resolve(e)
    const Svg = 'Svg' in rest ? rest.Svg : undefined
    const s = await getSettings($)
    const d = await getSaved($)
    const n = await getBlocked($)
    const isSaved = isSame(s, d)
    const isSolo = !s.isEnabled
    const runs = await getRuns($)
    const now = await $.clock.now()
    const running = runs.filter(r => r.status === 'running')
    const frame = Math.floor(now / BEAT_MS) % 2
    const finished = runs.filter(r => r.status !== 'running')

    // The pen holds Claude and the helpers who are not out working.
    const inUse = running.map(r => r.hat)
    const penCount = isSolo ? 0 : Math.max(0, s.maxConcurrent - running.length)
    const pen: Crab[] = HATS.filter(h => !inUse.includes(h))
      .slice(0, penCount)
      .map(hat => ({ hat, isBobbing: false }))
    const scene = crabScene([{ isBobbing: false }, ...pen], frame, isSolo)
    const caption =
      running.length > 0
        ? `${plural(running.length)} out working${pen.length > 0 ? `, ${pen.length} resting here.` : '.'}`
        : isSolo
          ? 'Claude is working solo.'
          : s.maxConcurrent === 1
            ? 'Claude and 1 helper, ready when needed.'
            : `Claude and ${s.maxConcurrent} helpers, ready when needed.`

    const glyph = (r: Run) =>
      r.status === 'running'
        ? { mark: '● Working', color: 'claude' }
        : r.status === 'done'
          ? { mark: '✓ Done', color: 'success' }
          : r.status === 'stopped'
            ? { mark: '■ Stopped', color: 'warning' }
            : { mark: '✕ Problem', color: 'error' }
    const row = (r: Run) => {
      const g = glyph(r)
      const spent = clockText((r.endedAt ?? now) - r.startedAt)
      const detail = r.status === 'running' ? (r.lastTool ?? 'Getting started…') : 'Finished'
      const stepsLabel = r.tools === 1 ? '1 step taken' : `${r.tools} steps taken`
      const crab = crabScene([{ hat: r.hat, isBobbing: true }], frame, false)

      return (
        <Box key={`run-${r.id}`} flexDirection="row" gap={2} marginBottom={1}>
          {r.status === 'running' && Svg ? (
            <Svg source={crab.source} width={crab.width} height={crab.height} alt="A helper crab at work" />
          ) : null}
          <Box flexDirection="column" flexGrow={1}>
            <Box justifyContent="space-between">
              <Button
                key={`title-${r.id}`}
                plain
                label={r.label}
                onPress={() => showDetail($, r.id)}
              />
              <Text color={g.color}>{g.mark}</Text>
            </Box>
            <Text dimColor>
              {kindWords(r.type)} ({modelName(r.model)})
            </Text>
            <Text dimColor>{detail}</Text>
            <Box justifyContent="space-between">
              <Button
                key={`steps-${r.id}`}
                plain
                dimColor
                label={`${stepsLabel} ›`}
                onPress={() => showDetail($, r.id)}
              />
              <Text dimColor>
                {r.tokens === undefined ? '' : `${kTokens(r.tokens)} tokens · `}
                {spent}
              </Text>
            </Box>
            <Text color={g.color} dimColor={r.status !== 'running'}>
              {'━'.repeat(r.status === 'running' ? 12 : 30)}
            </Text>
          </Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="column" paddingX={1} gap={1}>
        <Box flexDirection="column">
          <Text bold color="claude">
            Helper Agent Safeguard
          </Text>
          <Text dimColor>Keeps background helpers from running up your usage.</Text>
        </Box>

        <Box borderStyle="round" borderColor="subtle" paddingX={1} paddingY={1} flexDirection="column" alignItems="center">
          {Svg ? (
            <Svg source={scene.source} width={scene.width} height={scene.height} alt={`Claude with ${pen.length} resting helper crabs`} />
          ) : (
            <Text>{'\u{1F980}'.repeat(pen.length + 1)}</Text>
          )}
          <Text dimColor>{caption}</Text>
        </Box>

        {runs.length > 0 && (
          <Box borderStyle="round" borderColor={running.length > 0 ? 'claude' : 'subtle'} paddingX={1} flexDirection="column">
            {running.length > 0 && (
              <Box flexDirection="column">
                <Text bold>Running {'·'} {String(running.length)}</Text>
                <Text> </Text>
                {running.map(row)}
              </Box>
            )}
            {finished.length > 0 && (
              <Box flexDirection="column">
                <Text bold dimColor>
                  Finished {'·'} {String(finished.length)}
                </Text>
                <Text> </Text>
                {finished.map(row)}
                <Box>
                  <Button
                    key="clear"
                    label="Clear finished"
                    onPress={() =>
                      enqueue(async () => {
                        const all = await getRuns($)
                        await putRuns($, all.filter(r => r.status === 'running'))
                      })
                    }
                  />
                </Box>
              </Box>
            )}
          </Box>
        )}

        <Box borderStyle="round" borderColor={s.isEnabled ? 'success' : 'warning'} paddingX={1} flexDirection="column">
          <Box justifyContent="space-between">
            <Text bold>Helper agents</Text>
            <Text bold color={s.isEnabled ? 'success' : 'warning'}>
              {s.isEnabled ? '● Allowed' : '○ Turned off'}
            </Text>
          </Box>
          <Text dimColor>
            {s.isEnabled
              ? 'Claude may hand side tasks to helpers.'
              : 'Claude will do everything itself, in one place.'}
          </Text>
          <Box marginTop={1}>
            <Button
              key="toggle"
              variant={s.isEnabled ? 'secondary' : 'primary'}
              label={s.isEnabled ? 'Turn off' : 'Turn on'}
              onPress={async () => change($, { isEnabled: !(await getSettings($)).isEnabled })}
            />
          </Box>
        </Box>

        <Box borderStyle="round" borderColor="subtle" paddingX={1} flexDirection="column">
          <Text bold>How many at a time</Text>