pocock-guide

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const current = await read($, tab)
    const f = await read($, flow)
    const setup = await read($, env)
    const { Box, Button, Markdown, Text, Code } = $.ui.resolve(e)
    const isDesktop = e.surface !== 'terminal'

    const guide = GUIDE.find(g => g.id === current)
    const go = (id: Tab) => () => {
      void update($, tab, () => id)
      if (id === 'start') void readRepo($)
    }
    const top: { id: Tab; label: string; key: string; isOn: boolean }[] = [
      { id: 'start', label: 'Start', key: 'tab-start', isOn: current === 'start' },
      { id: 'now', label: 'Now', key: 'tab-now', isOn: current === 'now' },
      { id: guide ? current : 'flow', label: 'Guide', key: 'tab-guide', isOn: guide !== undefined },
    ]
    const nav = (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="row" flexWrap="wrap" gap={1}>
          {top.map(t => (
            <Button key={t.key} label={t.label} variant={t.isOn ? 'primary' : 'secondary'} onPress={go(t.id)} />
          ))}
        </Box>
        {guide ? (
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            {GUIDE.map(g => (
              <Button key={`tab-${g.id}`} label={g.id === current ? `• ${g.label}` : g.label} plain onPress={go(g.id)} />
            ))}
          </Box>
        ) : null}
      </Box>
    )

    const act = (a: Act | Move, variant: 'primary' | 'secondary' = 'secondary') => (
      <Button
        key={a.key}
        label={a.label}
        variant={variant}
        onPress={() => {
          if (!a.isSend) return void $.prompt.fill({ text: a.text })
          // The engine refuses a submitted prompt that starts with a slash, so a
          // slash command runs as a command.
          const slash = /^\/(\S+)\s*([\s\S]*)$/.exec(a.text)
          void (slash ? $.command.run({ command: slash[1] ?? '', args: slash[2] ?? '' }) : $.prompt.submit({ text: a.text, asUser: true }))
        }}
      />
    )

    const asked = await read($, nudge)
    const nudgeCard =
      asked === null ? null : (
        <Box key="nudge" flexDirection="column" gap={1} borderStyle="round" borderColor="#F56300" paddingX={1}>
          <Text bold color="#F56300">
            {asked.kind === 'bug' ? 'Sounds like something is broken' : 'Grill it first?'}
          </Text>
          <Text>
            {asked.kind === 'bug'
              ? '/diagnosing-bugs finds a command that shows the bug failing, then fixes it with a test. Claude will still help with what you asked.'
              : 'You asked for code before any grilling. A few minutes of questions now saves a rebuild later. Claude will still do what you asked.'}
          </Text>
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            <Button
              key="nudge-go"
              label={asked.kind === 'bug' ? 'Diagnose it' : 'Grill it first'}
              variant="primary"
              onPress={() => {
                void $.prompt.fill({ text: `${asked.kind === 'bug' ? '/diagnosing-bugs' : '/grill-with-docs'} ${asked.text}` })
              }}
            />
            <Button
              key="nudge-off"
              label="Not this time"
              onPress={() => {
                isNudgeOff = true
                void update($, nudge, () => null)
              }}
            />
          </Box>
        </Box>
      )

    const said = await read($, summary)
    const summaryCard =
      said === null ? null : (
        <Box key="summary" flexDirection="column" borderStyle="round" borderColor={said.isWaiting ? '#F56300' : '#D2D2D7'} paddingX={1}>
          <Text bold color={said.isWaiting ? '#F56300' : undefined}>
            {said.isWaiting ? 'Needs you' : 'Last turn'}
          </Text>
          <Markdown
            text={[said.done, said.next ? `**Next:** ${said.next}` : '', said.links.map(l => `[PR #${l.split('/').pop()}](${l})`).join(' · ')]
              .filter(Boolean)
              .join('\n\n')}
          />
        </Box>
      )

    const open = await read($, decision)
    const choose = (o: Choice, label: string) => (
      <Button
        key={`choose-${o.key}`}
        label={label}
        variant={o.key === open?.pick ? 'primary' : 'secondary'}
        onPress={() => {
          void $.prompt.submit({ text: o.key, asUser: true })
        }}
      />
    )
    const decisionCard =
      open === null ? null : isDesktop ? (
        <Box key="decision" flexDirection="column" gap={1}>
          {(() => {
            const { Svg } = $.ui.resolve(e)
            const source = decisionSvg(open)
            return <Svg source={source} alt={`Claude is asking: ${open.question}`} {...fit(source, e.props.bodyColumns)} />
          })()}
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            {open.options.map(o => choose(o, o.key === open.pick ? `★ ${o.key}` : o.key))}
          </Box>
        </Box>
      ) : (
        <Box key="decision" flexDirection="column" gap={1} borderStyle="round" paddingX={1}>
          <Text bold>Claude is asking: {open.question}</Text>
          {open.why ? <Text dimColor>{open.why}</Text> : null}
          <Box flexDirection="row" flexWrap="wrap" gap={1}>
            {open.options.map(o => choose(o, `${o.key} · ${o.label}`))}
          </Box>
        </Box>
      )

    const installCard = setup.hasSkills && !setup.isOutdated ? null : (
      <Box key="install" flexDirection="column" gap={1} borderStyle="round" borderColor="#E5342C" paddingX={1}>
        <Text bold color="#E5342C">
          {setup.hasSkills ? "Your copy of Matt Pocock's skills is out of date" : "Matt Pocock's skills are not installed"}
        </Text>
        <Text>
          {setup.hasSkills
            ? 'The copy from the official marketplace is older than v1.3.1 and has no /implement-spec, /pr or /retro, which later steps need. Run this in a terminal, then start a new session:'
            : 'The buttons here run his skills, so install them first. Run this in a terminal, then start a new session:'}
        </Text>
        <Code source={INSTALL} />
        {setup.hasSkills ? <Text dimColor>Then remove the old copy with: claude plugin uninstall mattpocock-skills</Text> : null}
        <Box flexDirection="row" gap={1}>
          <Button key="check-again" label="Check again" onPress={() => readEnv($)} />
        </Box>
      </Box>
    )

    if (current === 'start') {
      const r = await read($, repo)
      const ciText = { fail: 'checks failing', pending: 'checks running', pass: 'checks green', none: 'no checks' } as const
      const rows: { key: string; label: string; acts: Act[] }[] = [
        ...r.prs.map(pr => ({
          key: `pr-${pr.number}`,
          label: `PR #${pr.number}${pr.isDraft ? ' (draft)' : ''} · ${ciText[pr.ci]} · ${cut(pr.title, 48)}`,
          acts: prActs(pr),
        })),
        ...(r.dirty > 0
          ? [{
              key: 'dirty',