mission-control

import type { Register } from 'claude-code'

// Drawn like mission-control by davesheffer (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/davesheffer-mission-control/
// 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 band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const zone = '…'
    const kTokens = '…'
    const kTokens2 = '…'
    const jevText = '…'
    const length = '…'
    const crew = '…'
    const roleOf = '…'
    const confidence = '…'
    const unverified = '…'
    const sessionCount = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
          <Text bold>
            ●
            {" "}
            {zone}
            {" "}
            {kTokens}
            /
            {kTokens2}
          </Text>
          <Text>
            ████████░░░░░░░░
          </Text>
          <Text>
            {jevText}
          </Text>
          <Text>
            🧠
            {" hunch "}
            {length}
            …
            {` ⚠${length}`}
          </Text>
          <Text wrap="truncate">
            ⚙
            {" "}
            {crew}
          </Text>
          <Text>
            {"last "}
            {roleOf}
            {" "}
            {confidence}
            {` ⚠${unverified}`}
          </Text>
          <Button label="orch" />
          <Button label={`🗂 ${sessionCount}`} />
          <Button label="hide" />
        </Box>
        {await next(e)}
      </Box>
    )
  })

  // the pane: open it with $.ui.open({ id: 'my-pane', title: "Mission Control" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const zone = '…'
    const kTokens = '…'
    const kTokens2 = '…'
    const kTokens3 = '…'
    const kTokens4 = '…'
    const usd = '…'
    const ZONE_HINT = '…'
    const length = '…'
    const roleOf = '…'
    const model = '…'
    const seconds = '…'
    const description = '…'
    const roleOf2 = '…'
    const model2 = '…'
    const seconds2 = '…'
    const description2 = '…'
    const roleOf3 = '…'
    const model3 = '…'
    const seconds3 = '…'
    const description3 = '…'
    const confidence = '…'
    const roleOf4 = '…'
    const seconds4 = '…'
    const exitCodes = '…'
    const unverified = '…'
    const missing = '…'
    const result = '…'
    const confidence2 = '…'
    const roleOf5 = '…'
    const seconds5 = '…'
    const result2 = '…'
    const confidence3 = '…'
    const roleOf6 = '…'
    const seconds6 = '…'
    const result3 = '…'
    const length2 = '…'
    const map = '…'
    const clockTime = '…'
    const HUNCH_MARK = '…'
    const role = '…'
    const name = '…'
    const target = '…'
    const clockTime2 = '…'
    const HUNCH_MARK2 = '…'
    const role2 = '…'
    const name2 = '…'
    const target2 = '…'
    const clockTime3 = '…'
    const HUNCH_MARK3 = '…'
    const role3 = '…'
    const name3 = '…'
    const target3 = '…'
    const spendToday = '…'
    const deniesToday = '…'
    const weakToday = '…'
    const note = '…'
    const ts = '…'
    const feature = '…'
    const summary = '…'
    const ts2 = '…'
    const feature2 = '…'
    const summary2 = '…'
    const ts3 = '…'
    const feature3 = '…'
    const summary3 = '…'
    return (
      <Box flexDirection="column">
        <Text bold>
          Relay
        </Text>
        <Text>
          {zone}
          {" "}
          ████████░░░░░░░░
          {" "}
          {kTokens}
          /
          {kTokens2}
        </Text>
        <Text dimColor wrap="truncate">
          {"amber "}
          {kTokens3}
          {" · red "}
          {kTokens4}
          {` · session $${usd}`}
          {` · ${ZONE_HINT}`}
        </Text>
        <Text bold>
          In flight (
          {length}
          )
        </Text>
        <Text dimColor>
          No subagents running.
        </Text>
        <Text wrap="truncate">
          {roleOf}
          {" "}
          {model}
          {" "}
          {seconds}
          {" "}
          {"bg "}
          {description}
        </Text>
        <Text wrap="truncate">
          {roleOf2}
          {" "}
          {model2}
          {" "}
          {seconds2}
          {" "}
          {"bg "}
          {description2}
        </Text>
        <Text wrap="truncate">
          {roleOf3}
          {" "}
          {model3}
          {" "}
          {seconds3}
          {" "}
          {"bg "}
          {description3}
        </Text>
        <Text bold>
          Report cards
        </Text>
        <Text dimColor>
          No role reports yet.
        </Text>
        <Box flexDirection="column">
          <Text wrap="truncate">
            <Text>
              {confidence}
            </Text>
            {" "}
            {roleOf4}
            {" "}
            {seconds4}
            {` exit ${exitCodes}`}
            {` ⚠ ${unverified} unverified`}
            {` missing ${missing}`}
          </Text>
          <Text dimColor wrap="truncate">
            {"  "}
            {result}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text wrap="truncate">
            <Text>
              {confidence2}
            </Text>
            {" "}
            {roleOf5}
            {" "}
            {seconds5}
            {` exit ${exitCodes}`}
            {` ⚠ ${unverified} unverified`}
            {` missing ${missing}`}
          </Text>
          <Text dimColor wrap="truncate">
            {"  "}
            {result2}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text wrap="truncate">
            <Text>
              {confidence3}
            </Text>
            {" "}
            {roleOf6}
            {" "}
            {seconds6}
            {` exit ${exitCodes}`}
            {` ⚠ ${unverified} unverified`}
            {` missing ${missing}`}
          </Text>
          <Text dimColor wrap="truncate">
            {"  "}
            {result3}
          </Text>
        </Box>
        <Text bold>
          Hunch
          {" "}
          <Text>
            no task id yet
            {" · "}
            {length2}
            {" call"}
          </Text>
        </Text>
        <Text dimColor>
          No Hunch calls yet this task.
        </Text>
        <Text dimColor wrap="truncate">
          {map}
        </Text>
        <Box flexDirection="column">
          <Text wrap="truncate">
            {clockTime}
            {" "}
            {HUNCH_MARK}
            {" "}
            {role}
            {" "}
            {name}
            {" "}
            {target}
          </Text>
          <Text dimColor wrap="truncate">
            {"      "}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text wrap="truncate">
            {clockTime2}
            {" "}
            {HUNCH_MARK2}
            {" "}
            {role2}
            {" "}
            {name2}
            {" "}
            {target2}
          </Text>
          <Text dimColor wrap="truncate">
            {"      "}
          </Text>
        </Box>
        <Box flexDirection="column">
          <Text wrap="truncate">
            {clockTime3}
            {" "}
            {HUNCH_MARK3}
            {" "}
            {role3}
            {" "}
            {name3}
            {" "}
            {target3}
          </Text>
          <Text dimColor wrap="truncate">
            {"      "}
          </Text>
        </Box>
        <Text bold>
          Jev
          {" "}
          <Text color="green">
            online
          </Text>
        </Text>
        <Text dimColor>
          today $
          {spendToday}
          {" · "}
          {deniesToday}
          {" gate denies · "}
          {weakToday}
          {" weak reports"}
        </Text>
        <Text color="yellow">
          {note}
        </Text>
        <Text wrap="truncate" color="red">
          {ts}
          {" "}
          {feature}
          {" "}
          {summary}
        </Text>
        <Text wrap="truncate" color="red">
          {ts2}
          {" "}
          {feature2}
          {" "}
          {summary2}
        </Text>
        <Text wrap="truncate" color="red">
          {ts3}
          {" "}
          {feature3}
          {" "}
          {summary3}
        </Text>
        <Box flexDirection="row" columnGap={1}>
          <Button label="toggle band" />
          <Button label="clear done" />
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const zone = '…'
    const kTokens = '…'
    const running = '…'
    const jevMark = '…'
    const hunchCount = '…'
    const ZONE_HINT = '…'
    const op = '…'
    const why = '…'
    await $.ui.status(`${zone} ${kTokens} · ${running} agents · ${jevMark} · hunch ${hunchCount}`)
    await $.ui.toast(`Relay ${zone} at ${kTokens}: ${ZONE_HINT}`)
    await $.ui.toast(`⛔ Jev risk gate denied ${op} (${why})`)
    return next(e)
  })
}