issue-board by astrosteveo: Claude Code mod code and design

What it does

Draws a pane, toasts
Adds /issues
Watches Bash, TaskUpdate calls and can refuse them
Hooks agent.spawn, classic.SessionStart, prompt.compose, prompt.submit and 7 more
Keeps its own state between turns

Good points

No network calls
Written in TypeScript
Handles errors
Writes no files

Code to start from

Two kinds: a starter modscode writes from the design above, and the lines of the mod's own code that draw it.

Starter (register.tsx)

import type { Register } from 'claude-code'

// Drawn like issue-board by astrosteveo (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/astrosteveo-issue-board/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the pane: open it with $.ui.open({ id: 'my-pane', title: "issue-board" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button, Link, Input } = $.ui.resolve(e)
    const repo = '…'
    const value = '…'
    const label = '…'
    const filled = '…'
    const empty = '…'
    const done = '…'
    const updateLine = '…'
    const name = '…'
    const message = '…'
    const title = '…'
    const number = '…'
    const href = '…'
    const mark = '…'
    const title2 = '…'
    const title3 = '…'
    const areas = '…'
    const own = '…'
    const manual = '…'
    const unwanted = '…'
    const url = '…'
    const spark = '…'
    const reduce = '…'
    const spark2 = '…'
    const title4 = '…'
    const detail = '…'
    const fix = '…'
    const title5 = '…'
    const detail2 = '…'
    const fix2 = '…'
    const title6 = '…'
    const detail3 = '…'
    const fix3 = '…'
    const length = '…'
    const title7 = '…'
    const title8 = '…'
    const line = '…'
    const line2 = '…'
    const line3 = '…'
    const index = '…'
    const title9 = '…'
    const boxes = '…'
    const title10 = '…'
    const title11 = '…'
    const failure = '…'
    const workflow = '…'
    const branch = '…'
    const filled2 = '…'
    const empty2 = '…'
    const total = '…'
    const failed = '…'
    const running = '…'
    const step = '…'
    const workflow2 = '…'
    const filled3 = '…'
    const empty3 = '…'
    const workflow3 = '…'
    const filled4 = '…'
    const empty4 = '…'
    const title12 = '…'
    const filled5 = '…'
    const empty5 = '…'
    const closed = '…'
    const due = '…'
    const title13 = '…'
    const filled6 = '…'
    const empty6 = '…'
    const title14 = '…'
    const filled7 = '…'
    const empty7 = '…'
    const hotkey = '…'
    const typed = '…'
    const title15 = '…'
    const standing = '…'
    const title16 = '…'
    const standing2 = '…'
    const title17 = '…'
    const standing3 = '…'
    const filterName = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between">
          <Box flexDirection="row" gap={2}>
            <Text>
              <Text color="claude">
                {"◆ "}
              </Text>
              <Text bold>
                {repo}
              </Text>
            </Text>
            <Text>
              <Text color="claude">
                ●
              </Text>
              <Text bold>
                {` ${value}`}
              </Text>
              <Text dimColor>
                {` ${label}`}
              </Text>
            </Text>
            <Text>
              <Text color="error">
                ▲
              </Text>
              <Text bold>
                {` ${value}`}
              </Text>
              <Text dimColor>
                {` ${label}`}
              </Text>
            </Text>
            <Text>
              <Text color="suggestion">
                ⇄
              </Text>
              <Text bold>
                {` ${value}`}
              </Text>
              <Text dimColor>
                {` ${label}`}
              </Text>
            </Text>
            <Text>
              <Text color="error">
                ✗
              </Text>
              <Text bold>
                {` ${value}`}
              </Text>
              <Text dimColor>
                {` ${label}`}
              </Text>
            </Text>
            <Text>
              <Text>
                <Text>
                  {filled}
                </Text>
                <Text color="inactive" dimColor>
                  {empty}
                </Text>
              </Text>
              <Text dimColor>
                {` ${done}%`}
              </Text>
            </Text>
          </Box>
          <Box flexDirection="row" gap={1}>
            <Text color="warning">
              ◌ syncing…
            </Text>
            <Button hotkey="r" dimColor>
              Refresh
            </Button>
          </Box>
        </Box>
        <Text wrap="truncate-end">
          <Text>
            {"◉ "}
          </Text>
          {updateLine}
        </Text>
        <Box flexDirection="column" borderStyle="round" borderColor="suggestion" paddingX={1} marginTop={1}>
          <Text color="suggestion" bold>
            {`⚙ Set up ${name} for the board`}
          </Text>
          <Text dimColor>
            ◌ Reading the repo, its project and its issues…
          </Text>
          <Box flexDirection="column">
            <Text color="error" wrap="wrap">
              {`Couldn't read what setup needs: ${message}`}
            </Text>
            <Text dimColor>
              /issues check says what is missing and how to fix it.
            </Text>
          </Box>
          <Box flexDirection="column">
            <Box flexDirection="row" gap={1} flexWrap="wrap" marginTop={1}>
              <Text dimColor>
                Project
              </Text>
              <Text>
                {`none is linked to ${name}`}
              </Text>
              <Text bold>
                {`${title} (#${number})`}
              </Text>
              <Button variant="primary">
                {`${title} #${number}`}
              </Button>
              <Button variant="primary">
                {`${title} #${number}`}
              </Button>
              <Button variant="primary">
                {`${title} #${number}`}
              </Button>
              <Text wrap="truncate-end">
                <Link href={`${href}`} label={`${label}`} />
              </Text>
            </Box>
            <Box flexDirection="column" marginTop={1}>
              <Text bold>
                Apply will:
              </Text>
              <Box flexDirection="column">
                <Text wrap="wrap">
                  <Text>
                    {`${mark} `}
                  </Text>
                  <Text>
                    {title}
                  </Text>
                </Text>
                <Text dimColor wrap="wrap">
                  {`  ${message}`}
                </Text>
              </Box>
              <Box flexDirection="column">
                <Text wrap="wrap">
                  <Text>
                    {`${mark} `}
                  </Text>
                  <Text>
                    {title2}
                  </Text>
                </Text>
                <Text dimColor wrap="wrap">
                  {`  ${message}`}
                </Text>
              </Box>
              <Box flexDirection="column">
                <Text wrap="wrap">
                  <Text>
                    {`${mark} `}
                  </Text>
                  <Text>
                    {title3}
                  </Text>
                </Text>
                <Text dimColor wrap="wrap">
                  {`  ${message}`}
                </Text>
              </Box>
            </Box>
            <Box flexDirection="row" marginTop={1}>
              <Input label="area labels to create: " placeholder="such as simulation, interface" value={`${areas}`} submitLabel="update" />
            </Box>
            <Box flexDirection="column" marginTop={1}>
              <Text bold>
                Which Status is which
              </Text>
              <Box flexDirection="row" gap={1} flexWrap="wrap">
                <Text dimColor>
                  {`${own} (folds)`}
                </Text>
                <Button variant="primary" />
                <Button variant="primary" />
                <Button variant="primary" />
                <Button variant="primary">
                  {`＋ ${own}`}
                </Button>
                <Button variant="primary">
                  none
                </Button>
              </Box>
              <Box flexDirection="row" gap={1} flexWrap="wrap">
                <Text dimColor>
                  {`${own} (folds)`}
                </Text>
                <Button variant="primary" />
                <Button variant="primary" />
                <Button variant="primary" />
                <Button variant="primary">
                  {`＋ ${own}`}
                </Button>
                <Button variant="primary">
                  none
                </Button>
              </Box>
              <Box flexDirection="row" gap={1} flexWrap="wrap">
                <Text dimColor>
                  {`${own} (folds)`}
                </Text>
                <Button variant="primary" />
                <Button variant="primary" />
                <Button variant="primary" />
                <Button variant="primary">
                  {`＋ ${own}`}
                </Button>
                <Button variant="primary">
                  none
                </Button>
              </Box>
            </Box>
            <Box flexDirection="column" marginTop={1}>
              <Text color="warning">
                In the project's Workflows settings, by hand:
              </Text>
              <Text color="warning" wrap="wrap">
                {`  · turn on ${manual}`}
              </Text>
              <Text color="warning" wrap="wrap">
                {`  · turn off ${unwanted}: it marks every closed issue Done, even an abandoned one; the board moves issues closed as comp…`}
              </Text>
              <Text color="warning" wrap="wrap">
                {"  · new issues arrive with Status Todo, GitHub's default, so they skip the Inbox: open Item added to project and set it…"}
              </Text>
              <Link href={`${url}/workflows`} label="↗ Workflows" />
            </Box>
            <Box flexDirection="row" gap={1} flexWrap="wrap" marginTop={1}>
              <Text dimColor>
                No issue template has an Acceptance list.
              </Text>
              <Button dimColor>
                Have Claude add one
              </Button>
            </Box>
            <Box flexDirection="row" gap={1} marginTop={1}>
              <Button variant="primary">
                Apply
              </Button>
              <Text color="warning">
                ◌ Applying…
              </Text>
              <Button dimColor>
                Cancel
              </Button>
            </Box>
          </Box>
          <Box flexDirection="row" marginTop={1}>
            <Button dimColor>
              Close
            </Button>
          </Box>
        </Box>
        <Box flexDirection="row" gap={3} flexWrap="wrap">
          <Text>
            <Text dimColor>
              {`${label} `}
            </Text>
            <Text color="success">
              {spark}
            </Text>
            <Text bold>
              {` ${reduce}`}
            </Text>
          </Text>
          <Text>
            <Text dimColor>
              {`${label} `}
            </Text>
            <Text color="suggestion">
              {spark2}
            </Text>
            <Text bold>
              {` ${reduce}`}
            </Text>
          </Text>
          <Text dimColor>
            last 12 weeks
          </Text>
        </Box>
        <Box flexDirection="column" borderStyle="round" borderColor="error" paddingX={1} marginTop={1}>
          <Text color="error" bold>
            ✗ Setup needed
          </Text>
          <Box flexDirection="column" marginTop={1}>
            <Text bold wrap="wrap">
              {title4}
            </Text>
            <Text dimColor wrap="wrap">
              {detail}
            </Text>
            <Text wrap="wrap">
              {fix}
            </Text>
            <Box flexDirection="row">
              <Button>
                Copy command
              </Button>
            </Box>
            <Link href={`${url}`} label={`↗ ${url}`} />
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Text bold wrap="wrap">
              {title5}
            </Text>
            <Text dimColor wrap="wrap">
              {detail2}
            </Text>
            <Text wrap="wrap">
              {fix2}
            </Text>
            <Box flexDirection="row">
              <Button>
                Copy command
              </Button>
            </Box>
            <Link href={`${url}`} label={`↗ ${url}`} />
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Text bold wrap="wrap">
              {title6}
            </Text>
            <Text dimColor wrap="wrap">
              {detail3}
            </Text>
            <Text wrap="wrap">
              {fix3}
            </Text>
            <Box flexDirection="row">
              <Button>
                Copy command
              </Button>
            </Box>
            <Link href={`${url}`} label={`↗ ${url}`} />
          </Box>
          <Box flexDirection="row" marginTop={1}>
            <Button variant="primary">
              Check again
            </Button>
          </Box>
        </Box>
        <Box flexDirection="column" borderStyle="round" borderColor="suggestion" paddingX={1} marginTop={1}>
          <Text color="suggestion" bold>
            {`New epic · draft · ${length} sub-issues · editing`}
          </Text>
          <Box flexDirection="column" marginTop={1}>
            <Text bold wrap="wrap">
              {title7}
            </Text>
            <Text dimColor wrap="wrap">
              {title8}
            </Text>
            <Text color="warning">
              The title can't be empty. Write one to save.
            </Text>
            <Box flexDirection="row" gap={1} flexWrap="wrap" marginTop={1}>
              <Text dimColor>
                {"Labels "}
              </Text>
              <Text dimColor>
                none in this repo
              </Text>
              <Button variant="primary" />
              <Button variant="primary" />
              <Button variant="primary" />
            </Box>
            <Box flexDirection="column" marginTop={1}>
              <Text dimColor wrap="wrap">
                Body · Enter adds a line below. A line you empty is left out when you save.
              </Text>
              <Input placeholder="empty: left out when you save" value={`${line}`} submitLabel="new line" />
              <Text dimColor wrap="wrap">
                {line}
              </Text>
              <Input placeholder="empty: left out when you save" value={`${line}`} submitLabel="new line" />
              <Text dimColor wrap="wrap">
                {line2}
              </Text>
              <Input placeholder="empty: left out when you save" value={`${line}`} submitLabel="new line" />
              <Text dimColor wrap="wrap">
                {line3}
              </Text>
            </Box>
            <Box flexDirection="row" gap={1} marginTop={1}>
              <Button variant="primary">
                ✓ Save
              </Button>
              <Button dimColor>
                Cancel
              </Button>
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={1}>
            <Text bold>
              Sub-issues
            </Text>
            <Text wrap="wrap">
              <Text dimColor>
                {`${index}1. `}
              </Text>
              <Text>
                {title9}
              </Text>
              <Text dimColor>
                {` · ${boxes} box`}
              </Text>
            </Text>
            <Text wrap="wrap">
              <Text dimColor>
                {`${index}1. `}
              </Text>
              <Text>
                {title10}
              </Text>
              <Text dimColor>
                {` · ${boxes} box`}
              </Text>
            </Text>
            <Text wrap="wrap">
              <Text dimColor>
                {`${index}1. `}
              </Text>
              <Text>
                {title11}
              </Text>
              <Text dimColor>
                {` · ${boxes} box`}
              </Text>
            </Text>
          </Box>
          <Box flexDirection="row" gap={1} marginTop={1} flexWrap="wrap">
            <Button variant="primary" hotkey="c">
              {`✚ Create the epic and ${length} sub-issues`}
            </Button>
            <Button hotkey={`${value}`}>
              ✎ Edit
            </Button>
            <Button dimColor>
              Discard
            </Button>
          </Box>
        </Box>
        <Text color="error">
          {`✗ Last refresh failed: ${failure}`}
        </Text>
        <Box flexDirection="row" justifyContent="space-between">
          <Box flexDirection="row" gap={1}>
            <Box>
              <Button plain>
                {`▾ ${title}`}
              </Button>
            </Box>
            <Text dimColor>
              {`${length} open`}
            </Text>
          </Box>
          <Button dimColor hotkey="m">
            {`⇶ Merge all ${length}…`}
          </Button>
        </Box>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Text color="warning">
            {`Finish and merge all ${length} open PR?`}
          </Text>
          <Button variant="primary" hotkey="y">
            Yes, merge them
          </Button>
          <Button dimColor hotkey="n">
            Cancel
          </Button>
        </Box>
        <Box flexDirection="row" gap={1}>
          <Text color="error">
            ◷
          </Text>
          <Text>
            <Text bold>
              {workflow}
            </Text>
            <Text dimColor>
              {` on ${branch}`}
            </Text>
          </Text>
          <Text>
            <Text>
              <Text>
                {filled2}
              </Text>
              <Text color="inactive" dimColor>
                {empty2}
              </Text>
            </Text>
            <Text dimColor>
              {` ${done}/${total} jobs, ${failed} failed`}
            </Text>
          </Text>
          <Text dimColor>
            {`${running} › ${step}`}
          </Text>
        </Box>
        <Box flexDirection="row" gap={1}>
          <Text color="error">
            ◷
          </Text>
          <Text>
            <Text bold>
              {workflow2}
            </Text>
            <Text dimColor>
              {` on ${branch}`}
            </Text>
          </Text>
          <Text>
            <Text>
              <Text>
                {filled3}
              </Text>
              <Text color="inactive" dimColor>
                {empty3}
              </Text>
            </Text>
            <Text dimColor>
              {` ${done}/${total} jobs, ${failed} failed`}
            </Text>
          </Text>
          <Text dimColor>
            {`${running} › ${step}`}
          </Text>
        </Box>
        <Box flexDirection="row" gap={1}>
          <Text color="error">
            ◷
          </Text>
          <Text>
            <Text bold>
              {workflow3}
            </Text>
            <Text dimColor>
              {` on ${branch}`}
            </Text>
          </Text>
          <Text>
            <Text>
              <Text>
                {filled4}
              </Text>
              <Text color="inactive" dimColor>
                {empty4}
              </Text>
            </Text>
            <Text dimColor>
              {` ${done}/${total} jobs, ${failed} failed`}
            </Text>
          </Text>
          <Text dimColor>
            {`${running} › ${step}`}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Box flexDirection="row" gap={1}>
            <Box>
              <Button plain>
                {`▾ ${title}`}
              </Button>
            </Box>
            <Text dimColor>
              {`${length} open`}
            </Text>
          </Box>
          <Box flexDirection="row" justifyContent="space-between">
            <Text>
              {title12}
            </Text>
            <Box flexDirection="row" gap={1}>
              <Text>
                <Text>
                  {filled5}
                </Text>
                <Text color="inactive" dimColor>
                  {empty5}
                </Text>
              </Text>
              <Text dimColor>
                {`${closed}/${total}`}
              </Text>
              <Text color="error">
                {`was due ${due}`}
              </Text>
            </Box>
          </Box>
          <Box flexDirection="row" justifyContent="space-between">
            <Text>
              {title13}
            </Text>
            <Box flexDirection="row" gap={1}>
              <Text>
                <Text>
                  {filled6}
                </Text>
                <Text color="inactive" dimColor>
                  {empty6}
                </Text>
              </Text>
              <Text dimColor>
                {`${closed}/${total}`}
              </Text>
              <Text color="error">
                {`was due ${due}`}
              </Text>
            </Box>
          </Box>
          <Box flexDirection="row" justifyContent="space-between">
            <Text>
              {title14}
            </Text>
            <Box flexDirection="row" gap={1}>
              <Text>
                <Text>
                  {filled7}
                </Text>
                <Text color="inactive" dimColor>
                  {empty7}
                </Text>
              </Text>
              <Text dimColor>
                {`${closed}/${total}`}
              </Text>
              <Text color="error">
                {`was due ${due}`}
              </Text>
            </Box>
          </Box>
        </Box>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Text bold color="claude">
            Issues
          </Text>
          <Button hotkey={`${hotkey}`} variant="primary" />
          <Button hotkey={`${hotkey}`} variant="primary" />
          <Button hotkey={`${hotkey}`} variant="primary" />
          <Input label="⌕ " placeholder="search titles, #numbers, labels" value={`${typed}`} submitLabel="search" />
          <Text dimColor>
            by
          </Text>
          <Button variant="primary" />
          <Button variant="primary" />
          <Button variant="primary" />
        </Box>
        <Box flexDirection="column">
          <Text dimColor>
            ◌ Reading the issues closed lately…
          </Text>
          <Text color="error" wrap="wrap">
            {`Couldn't read closed issues: ${failed}`}
          </Text>
          <Text dimColor>
            Nothing closed yet.
          </Text>
          <Box flexDirection="row" justifyContent="space-between">
            <Text>
              <Text color="inactive">
                {"⊘ "}
              </Text>
              <Text dimColor>
                {`#${number} `}
              </Text>
              {title15}
            </Text>
            <Text dimColor>
              {standing}
            </Text>
          </Box>
          <Box flexDirection="row" justifyContent="space-between">
            <Text>
              <Text color="inactive">
                {"⊘ "}
              </Text>
              <Text dimColor>
                {`#${number} `}
              </Text>
              {title16}
            </Text>
            <Text dimColor>
              {standing2}
            </Text>
          </Box>
          <Box flexDirection="row" justifyContent="space-between">
            <Text>
              <Text color="inactive">
                {"⊘ "}
              </Text>
              <Text dimColor>
                {`#${number} `}
              </Text>
              {title17}
            </Text>
            <Text dimColor>
              {standing3}
            </Text>
          </Box>
        </Box>
        <Box flexDirection="column" alignItems="center">
          <Text color="success">
            ✓
          </Text>
          <Text dimColor>
            {`Nothing under ${filterName} matches “${typed}”.`}
          </Text>
        </Box>
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Text color="warning">
            ◌ Claude is suggesting a Priority, area and Status for each…
          </Text>
          <Button dimColor>
            Suggest again
          </Button>
        </Box>
        <Text color="error" wrap="wrap">
          {`Couldn't get suggestions: ${failed}`}
        </Text>
        <Box flexDirection="column">
          <Box flexDirection="column" marginTop={1}>
            <Box flexDirection="row" justifyContent="space-between">
              <Box flexDirection="row" gap={1}>
                <Text color="claude" />
              </Box>
            </Box>
          </Box>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const number = '…'
    const name = '…'
    const at = '…'
    await $.ui.toast(`Working on #${number} now: the branch ${name} is for it`)
    await $.ui.toast(`GitHub's rate limit ran out; the issue board waits until ${at}`)
    return next(e)
  })
}

The mod's own code

Shown under the mod's licence (MIT); its text is below. Keep the notice if you copy these lines.

plugins/issue-board/hooks/register.tsx lines 3019–3178 · Pane

plugins/issue-board/hooks/register.tsx:3019

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Link } = $.ui.resolve(e)
    const problems = (await read($, access))?.problems ?? []
    const width = Math.max(40, e.props.bodyColumns)
    const roomy = width >= 72
    // Room for the sparklines and the ticked meter.
    const wide = width >= 100
    const now = await read($, board)
    const failure = await read($, error)
    const busy = await read($, loading)
    const chosen = await read($, filter)
    const open = await read($, expanded)
    const arming = await read($, confirming)
    const who = await read($, viewer)
    const typed = await read($, query)
    const here = await read($, branch)
    const doing = await read($, working)
    const made = await read($, draft)
    const thinking = await read($, drafting)
    const revised = await read($, revising)
    const focusKey = await read($, ring)
    const making = await read($, creating)
    const changing = await read($, editing)
    const offered = await read($, palette)
    const armedClose = await read($, closing)
    const fields = await read($, typing)
    const said = await read($, talk)
    const shownPr = await read($, openPr)
    const planned = await read($, setup)
    const picked = await read($, groupBy)
    const opened = await read($, unfolded)
    const triaged = await read($, triage)
    const watched = await read($, runs)
    const working$ = await read($, workers)
    const launches = await read($, launching)
    // The issue Start sent Claude in this session: its Start says so rather than starting it again.
    const startedHere = doing?.started && doing.sessionId !== undefined && doing.sessionId === (await $.session.id().catch(() => undefined)) ? doing.number : null
    const clock = Date.now()
    const elements = $.ui.resolve(e)
    // The mobile app draws no text field: its table hands out one that draws nothing.
    const Input = 'Input' in elements && e.surface !== 'mobile' ? elements.Input : undefined
    const Markdown = elements.Markdown
    // A link in a row stays on one line: squeezed, it ends in an ellipsis rather than breaking down the pane a letter a
    // line. A click still opens the whole address.
    const link = (href: string, label = '↗ GitHub') => (
      <Text wrap="truncate-end">
        <Link href={href} label={label} />
      </Text>
    )

    // Start: the issue is the one Claude is on, and Claude gets it. Its button says so from the press on.
    const start = (issue: Issue) =>
      launch($, issue, 'start', async () => {
        await track($, issue, true)
        const listed = await makeTasks($, issue)
        await $.prompt.submit({ text: startPrompt(issue, listed > 0), asUser: true })
        $.ui.toast(`Sent #${issue.number} to Claude`)
        await claim($, issue)
        return true
      })

    const flip = async (issue: Issue, box: number, done: boolean) => {
      try {
        await tick($, issue.number, [box], done)
        $.ui.toast(`${done ? 'Ticked' : 'Unticked'} box ${box} on #${issue.number}`)
      } catch (cause) {
        const message = messageOf(cause)
        $.ui.toast(`Couldn't change box ${box} on #${issue.number}: ${message}`)
        if (ACCESS_ERROR.test(message)) void checkAccess($, message)
      }
    }

    const closeOut = async (pr: PullRequest) => {
      await $.prompt.submit({ text: closeOutPrompt(pr), asUser: true })
      $.ui.toast(`Sent PR #${pr.number} to Claude to finish and merge`)
    }

    // Merge all merges every open pull request, so it asks once more before it goes.
    const closeOutAll = async (prs: PullRequest[]) => {
      await update($, confirming, () => false)
      // The pull requests it was asked for may have merged while it waited on its confirm.
      if (prs.length === 0) {
        $.ui.toast('No pull requests are open now, so there is nothing to merge.')
        return
      }
      await $.prompt.submit({ text: closeOutAllPrompt(prs), asUser: true })
      $.ui.toast(`Sent ${prs.length} ${prs.length === 1 ? 'PR' : 'PRs'} to Claude to finish and merge`)
    }
    const arm = (to: boolean) => () => void update($, confirming, () => to)

    // One card at a time, so its letter keys always work; an opened card is scrolled into view.
    const toggle = (number: number) => async () => {
      const opening = !open.includes(number)
      await update($, expanded, () => (opening ? [number] : []))
      await update($, editing, () => null)
      if (opening) await $.ui.scroll({ to: { key: `card-${number}` }, in: PANE }).catch(() => undefined)
      if (opening) await loadComments($, number)
      const issue = opening ? now?.issues.find(one => one.number === number) : undefined
      if (issue && (project?.fields ?? []).some(field => !/^(status|priority)$/i.test(field.name))) await readValues($, issue)
    }
    const togglePr = (number: number) => () => void update($, openPr, was => (was === number ? null : number))

    const meter = (done: number, total: number, cells: number) => {
      const [filled, empty] = bar({ done, total }, cells)
      return (
        <Text>
          <Text color={tone({ done, total })}>{filled}</Text>
          <Text color="inactive" dimColor>
            {empty}
          </Text>
        </Text>
      )
    }

    // The header's right: when the board last synced, and Refresh.
    const sync = (
      <Box flexDirection="row" gap={1}>
        <Text color={busy ? 'warning' : undefined} dimColor={!busy}>
          {busy ? '◌ syncing…' : now ? `⟳ ${ago(new Date(now.fetchedAt).toISOString(), clock)}` : ''}
        </Text>
        <Button key="refresh" hotkey="r" dimColor onPress={() => void refresh($)}>
          Refresh
        </Button>
      </Box>
    )
    const repoName = (
      <Text>
        <Text color="claude">◆ </Text>
        <Text bold>{now ? now.repo : 'GitHub'}</Text>
      </Text>
    )
    // Before there is a board: the repo and the sync, nothing to total yet.
    const header = (
      <Box flexDirection="row" justifyContent="space-between">
        {repoName}
        {sync}
      </Box>
    )

    // What the last permission check found missing, each with its fix.
    const blocked = problems.some(problem => problem.blocks)
    const setupCard = problems.length > 0 && (
      <Box flexDirection="column" borderStyle="round" borderColor={blocked ? 'error' : 'warning'} paddingX={1} marginTop={1}>
        <Text color={blocked ? 'error' : 'warning'} bold>
          {blocked ? '✗ Setup needed' : '⚠ The board is limited'}
        </Text>
        {problems.map(problem => (
          <Box key={`problem-${problem.id}`} flexDirection="column" marginTop={1}>
            <Text bold wrap="wrap">
              {problem.title}
            </Text>
            <Text dimColor wrap="wrap">
              {problem.detail}
            </Text>
            <Text wrap="wrap">{problem.fix}</Text>
            {problem.command && (
              <Box flexDirection="row">
                <Button key={`copy-fix-${problem.id}`} onPress={press => void copyFix($, problem, press.surface)}>
                  Copy command
                </Button>

plugins/issue-board/hooks/register.tsx lines 4700–4704 · Pane

plugins/issue-board/hooks/register.tsx:4700

    const link = (href: string, label = '↗ GitHub') => (
      <Text wrap="truncate-end">
        <Link href={href} label={label} />
      </Text>
    )

Licence text (MIT)

MIT License

Copyright (c) 2026 Steven Mosley

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

What its code calls

runs programsreads filesdrives Claudetool callsremembers

The design, read from code

Claude — Code

Working on #3 now: the branch build is for it

GitHub's rate limit ran out; the issue board waits until Complete

Ask Claude…

◆ acme/app● Backlog build▲ Backlog build⇄ Backlog build✗ Backlog buildPriorityBacklog 3%

◌ syncing… r

◉ Subcommands

⚙ Set up build for the board◌ Reading the repo, its project and its issues…

Couldn't read what setup needs: Item closed/issues check says what is missing and how to fix it.

Projectnone is linked to buildFix login (#3)build

Apply will:

● Fix login Item closed

area labels to create: Off track update

Which Status is which

Inbox (folds)

In the project's Workflows settings, by hand: · turn on Off track · turn off Inactive: it marks every closed issue Done, even an abandoned one; the board moves issues closed as comp… · new issues arrive with Status Todo, GitHub's default, so they skip the Inbox: open Item added to project and set it…↗ Workflows

No issue template has an Acceptance list.

◌ Applying…

build █████░░░ Off trackbuild █████░░░ Off tracklast 12 weeks

✗ Setup needed

Fix loginSubcommandsSubcommands

↗ example.com

Fix loginSubcommandsSubcommands

↗ example.com

Fix loginSubcommandsSubcommands

↗ example.com

New epic · draft · 3 sub-issues · editing

Fix loginFix loginThe title can't be empty. Write one to save.

Labels none in this repo

Body · Enter adds a line below. A line you empty is left out when you save.Inactive new lineInactiveInactive new lineInactiveInactive new lineInactive

Sub-issues31. Fix login · Status box31. Fix login · Status box31. Fix login · Status box

c Backlog

✗ Last refresh failed: Priority

3 open

Finish and merge all 3 open PR? y n

◷Complete on mainPriorityBacklog 3/3 jobs, 3 failedItem closed › 3

3 open

Fix login

PriorityBacklogInactive/3was due Oct 6

Fix login

PriorityBacklogInactive/3was due Oct 6

Fix login

PriorityBacklogInactive/3was due Oct 6

Issues K K K⌕ Inbox searchby

◌ Reading the issues closed lately…Couldn't read closed issues: 3Nothing closed yet.

⊘ #3 Fix loginIssue

✓Nothing under build matches “Inbox”.

◌ Claude is suggesting a Priority, area and Status for each…

Couldn't get suggestions: 3

Drawn from the mod's source at the commit read, not from a run: a list is drawn three times, a condition takes its first branch that draws in the desktop app, and a value only the run time knows is shown as a made-up sample (dotted underline) or left out. Colours and type are this site's.

What its code shows

Read from the source at commit 777a2e8edf6b on 2026-10-06. The first group decides whether a mod is listed; the rest is for you to weigh. A later commit is not read until the next crawl.

Decides the listing: code you can check
Entry read	Every module hooks/hooks.json names was read.plugins/issue-board/hooks/register.tsx
Parses	Every file parses as TypeScript or JavaScript.5 files parsed
All its code is in the mod	Every import is a file of the mod or the engine's own module; no packages, no require.all its code is in the mod
Readable	No minified lines, no eval or new Function, no import of a computed path, no encoded blobs.no minified code, no eval, no encoded blobs
Calls in the open	Network and programs are reached as $.http.fetch and $.process.run in place, never passed around.every call outside goes through $ in the open
For you to weigh before installing
Where it draws	The terminal, the desktop app, both, or nothing (hooks only: a guard or a prompt rewriter), as its code says. Shown, never a reason to leave a mod out.draws in the terminal and the desktop app, the same in both
Install line	Whether its repository's own .claude-plugin/marketplace.json lists it, so it installs from that marketplace with the lines on its page.listed in its repository's .claude-plugin/marketplace.json: installs from there
Programs on Windows	Whether every program it starts through $.process exists on Windows (tail, date, open, osascript, /usr/… do not).runs no program a Windows PC lacks
Network	Whether every fetch names its https host in the code.no network
Programs	Whether every program it starts is named in the code and is not a shell, an interpreter or a network tool.gh (reaches the network), git (reaches the network)
Reads and sends	Whether it both reads files or environment variables and reaches the network.reads files and reaches the network
Keys in the source	Whether the source holds what looks like an API key or a private key.no keys in the source
Licence	An open licence (MIT, Apache-2.0, BSD, ISC, Unlicense, 0BSD, CC0) with its text lets modscode show its code; otherwise the code is linked.MIT

This is a reading of the code text, not a security review: it does not run the mod, and it cannot see what a program the mod starts does. The check before installing is yours. How mods are chosen

Install it

Check it yourself before you install it. Mods run unsandboxed, with your permissions, and modscode does not vouch for what this code does. Read the code below (or run claude plugin validate . in its folder), weigh what it reaches, and install the commit you read.

Its repository is its marketplace. Add that marketplace (in the terminal with these commands, or in the desktop app's plugin settings) and install the mod from it:

/plugin marketplace add astrosteveo/claude-plugins

/plugin install issue-board@astrosteveo-plugins

This installs the marketplace's latest commit, which may not be the one read here (777a2e8edf6b). Compare them before you install.

Ask Claude about it

With the modscode connector added, Claude can read this design, what its code reaches and its code, and build on them. Ask it like this:

Read the modscode design "astrosteveo-issue-board" with its code and make me a pane like it

Search them from Claude: the MCP connector

issue-board

What it does

Good points

Code to start from

Starter (register.tsx)

The mod's own code

What its code calls

The design, read from code

What its code shows

Install it

Ask Claude about it

Similar designs