modsmith

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const r = await read($, lastReload)
    if (r === null || e.props.hasSurvey) return next(e)
    const g = await read($, gates)
    const isTarget = (await read($, target)) === r.root
    const parts = [`↻ ${r.name} reloaded`, `${r.hooks} hooks`]
    if (r.validate !== 'idle') parts.push(`validate ${markOf(r.validate)}`)
    if (isTarget && g.types.status !== 'idle') parts.push(`types ${markOf(g.types.status)}`)
    if (isTarget && g.tests.status !== 'idle') parts.push(`tests ${markOf(g.tests.status)}`)
    const { Box, Text } = $.ui.resolve(e)
    const mine = <Text color={r.validate === 'fail' ? '#ff4d4f' : '#2fbf71'}>{parts.join(' · ')}</Text>
    const below = await next(e)
    return (
      <Box flexDirection="column">
        {mine}
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const list = await read($, tape)
    const pick = await read($, selected)
    const only = await read($, filter)
    const isPaused = await read($, paused)
    const roster = await read($, mods)
    const dir = await read($, target)
    const g = await read($, gates)
    const seen = await read($, eyes)
    const v = await read($, versions)
    const notes = await read($, ship)
    const cols = e.props.bodyColumns
    const isNarrow = cols < 50
    const rows = list.filter(x => only === 'all' || x.family === only)
    const chosen = rows.find(x => x.id === pick) ?? null
    const present = FAMILIES.filter(f => list.some(x => x.family === f))
    const devs = roster.filter(m => isDev(m.provenance) && m.root)

    const runAll = () => {
      if (dir) runGates($, dir, GATE_NAMES).catch(() => undefined)
    }
    const runOne = (name: GateName) => () => {
      if (dir) runGates($, dir, [name]).catch(() => undefined)
    }
    const flip = (k: 'terminal' | 'desktop' | 'narrow') => () => update($, eyes, was => ({ ...was, [k]: !was[k] }))
    const line = (x: Entry) => `${clockTime(x.at)}  ${x.event}  ${x.summary}${x.outcome ? ` · ${x.outcome}` : ''}`
    const gateLine = (name: GateName) => {
      const it = g[name]
      const time = it.ms === undefined ? '' : ` ${(it.ms / 1000).toFixed(1)}s`
      return `${markOf(it.status)} ${name}${time}${it.note ? `: ${it.note}` : ''}`
    }
    const failing = GATE_NAMES.find(n => g[n].status === 'fail' && g[n].tail)
    const banner = v
      ? `CLI ${v.cli} · engine ${v.engine}${v.isCliOlder ? ' · CLI is older than the engine: validate may fail correct code' : ''}`
      : 'Versions unchecked'

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

    const gatesSection = (
      <Box flexDirection="column">
        <Text bold>{`Gates · ${dir ? baseName(dir) : 'no target'}`}</Text>
        {GATE_NAMES.map(n => (
          <Text color={g[n].status === 'pass' ? '#2fbf71' : g[n].status === 'fail' ? '#ff4d4f' : undefined}>{gateLine(n)}</Text>
        ))}
        <Text>{`${seen.terminal && seen.desktop && seen.narrow ? '✓' : '·'} eyes`}</Text>
        <Box flexWrap="wrap" columnGap={1}>
          <Button key="run-all" label="Run all" variant="primary" onPress={runAll} />
          <Button key="run-validate" label="validate" onPress={runOne('validate')} />
          <Button key="run-types" label="types" onPress={runOne('types')} />
          <Button key="run-tests" label="tests" onPress={runOne('tests')} />
        </Box>
        <Box flexWrap="wrap" columnGap={1}>
          <Button key="eye-terminal" plain label={`${seen.terminal ? '☑' : '☐'} terminal`} onPress={flip('terminal')} />
          <Button key="eye-desktop" plain label={`${seen.desktop ? '☑' : '☐'} desktop`} onPress={flip('desktop')} />
          <Button key="eye-narrow" plain label={`${seen.narrow ? '☑' : '☐'} narrow`} onPress={flip('narrow')} />
        </Box>
        {notes.map(n => (
          <Text color="#ffb020">{`! ${n}`}</Text>
        ))}
        {failing && <Markdown key="gate-tail" text={`\`\`\`\n${g[failing].tail}\n\`\`\``} />}
      </Box>
    )

    if (isNarrow) {
      return (
        <Box flexDirection="column" gap={1}>
          {gatesSection}
          <Box flexDirection="column">
            {rows.slice(-8).map(x => (
              <Text color={FAMILY_COLOR[x.family]} wrap="truncate-end">{line(x)}</Text>
            ))}
          </Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="column" gap={1} paddingX={1}>
        <Text dimColor={!v?.isCliOlder} color={v?.isCliOlder ? '#ffb020' : undefined}>{banner}</Text>

        <Box flexDirection="column">
          <Text bold>{`Mods (${roster.length})`}</Text>
          {roster.length === 0 && <Text dimColor>None seen loading yet. /modsmith refreshes the list.</Text>}
          {roster.slice(0, 12).map((m, i) => (
            <Box columnGap={1}>
              <Text color={m.source === 'seen' ? '#2fbf71' : undefined} dimColor={m.source !== 'seen'} wrap="truncate-end">
                {`${m.provenance}${m.version ? ` ${m.version}` : ''} · ${m.source}${m.source === 'seen' ? ` · ${m.events.length} hooks · ${m.calls.length} calls · ↻${m.reloads}` : ''}`}
              </Text>
              {m.root && m.root !== dir && (isDev(m.provenance) || devs.length === 0) && (
                <Button key={`target-${i}`} plain label="target" onPress={() => update($, target, () => m.root)} />
              )}
            </Box>
          ))}
        </Box>

        {gatesSection}

        <Box flexDirection="column">
          <Text bold>{`Tape (${list.length}/${TAPE_SIZE})${isPaused ? ' · paused' : ''}`}</Text>
          <Box flexWrap="wrap" columnGap={1}>
            <Button key="filter-all" plain label={only === 'all' ? '[all]' : 'all'} onPress={() => update($, filter, () => 'all')} />
            {present.map(f => (
              <Button key={`filter-${f}`} plain label={only === f ? `[${f}]` : f} onPress={() => update($, filter, () => f)} />
            ))}
            <Button key="pause" label={isPaused ? 'Resume' : 'Pause'} onPress={() => update($, paused, was => !was)} />
            <Button
              key="clear"
              label="Clear"
              onPress={async () => {
                await update($, tape, () => [])
                await update($, selected, () => null)
              }}
            />
          </Box>
          {rows.length === 0 && <Text dimColor>Nothing recorded yet.</Text>}
          {rows.slice(-30).map(x => (
            <Button
              key={`row-${x.id}`}
              plain
              label={line(x)}
              dimColor={x.id !== pick}
              onPress={() => update($, selected, was => (was === x.id ? null : x.id))}
            />
          ))}
        </Box>

        {chosen && (
          <Box flexDirection="column">
            <Text bold>{`${chosen.event} · e`}</Text>
            <Markdown key="payload" text={`\`\`\`json\n${chosen.payload}\n\`\`\``} />
            <Button
              key="copy"
              label="Copy payload"
              onPress={press => $.ui.copy({ text: chosen.payload, surface: press.surface })}
            />
          </Box>
        )}
      </Box>
    )
  })