@g3nomaly/g3n-mods 0.1.3 → 0.1.5

package/.claude-plugin/marketplace.json

@@ -19,19 +19,19 @@
     {
       "name": "custom-crab-agents",
       "source": "./mods/custom-crab-agents",
-      "description": "Each subagent as a crab with a hat: effort tier, model, steps, context, tokens, cost and time.",
+      "description": "Draws each subagent in the agents panel as a crab with a hat: effort tier, model, steps, context, tokens, cost and time.",
       "version": "0.1.0"
     },
     {
       "name": "delete-guard",
       "source": "./mods/delete-guard",
-      "description": "Denies rm -rf and other permanent deletes and points Claude to the trash.",
+      "description": "Holds rm -rf and other permanent deletes on a card that lists what they remove, until you press Delete or Cancel.",
       "version": "0.1.0"
     },
     {
       "name": "focus-mode",
       "source": "./mods/focus-mode",
-      "description": "A timed focus block with a countdown, a progress bar and an end button.",
+      "description": "A timed focus block in which you're away: Claude asks no questions and gets no permission prompts. Countdown, progress bar and end button.",
       "version": "0.1.0"
     },
     {

package/README.md

@@ -22,20 +22,20 @@ Then open the project in VS Code and trust the workspace. New sessions load the
 |---|---|---|
 | `agents-panel` | The agents in `.claude/agents` with their model and a run button. A running agent shows a spinner, and a toast says when it starts and finishes | `/agents-panel` |
 | `context-bar` | One bar of context-window use split by source, with the total and where compaction starts | `/context-bar` |
-| `custom-crab-agents` | Each subagent as a crab with a hat: effort tier, model, steps, context, tokens, cost and time | `/crabs` |
-| `delete-guard` | Denies `rm -rf` and other permanent deletes and tells Claude which trash command to use instead | `/delete-guard on \| off` |
-| `focus-mode` | A timed focus block with a countdown, a progress bar and an end button. 25 minutes unless you pass a number | `/focus-mode [minutes] \| end` |
+| `custom-crab-agents` | Adds each subagent to the agents panel as a crab: its role (from its name or type) picks its hat and what it holds, such as a reviewer's deerstalker and magnifying glass, a tester's work helmet and wrench, a designer's top hat and brush. Shows model, effort, steps, context, tokens, cost and time. Click a crab to open its whole conversation in a tab and message it there. Needs `agents-panel`, which installing it adds | `/agents-panel` |
+| `delete-guard` | Off by default: deletes run unasked. Turn it on with the switch in its pane, or `/delete-guard on`; it stays on in later sessions. While on, `rm -rf` and other permanent deletes wait on a card listing the files, their sizes and whether git can restore them, until you press **Delete** or **Cancel**. Cancel tells Claude which trash command to use instead. With nothing to draw the card on, the delete is refused | `/delete-guard on \| off` |
+| `focus-mode` | A timed focus block in which you're away: Claude's questions are refused, so it picks for itself and says what it assumed, and permission prompts are refused, so it works around the step and lists it for later. Countdown, progress bar and end button. Set the length with − and + in the pane, or pass the minutes; the length you pick is kept for later blocks | `/focus-mode [minutes] \| end` |
 | `handoff` | Writes a handoff with the `handoff` skill, clears the session, and attaches the handoff to your next prompt | `/handoff-new [what the next session is for]` |
 | `hide-personal-data` | Masks names, emails, phone numbers, IBANs and card numbers in replies. Hover a mask to read it | `/hide-personal-data on \| off` |
 | `mini-game` | Minesweeper, to play while Claude works | `/mini-game` |
 | `tool-timeline` | Each tool call with its duration. A denied call is struck through, next to the call that replaced it | `/tool-timeline` |
 | `you-should-know` | A card under long replies with their key point, a headline and one supporting line. It costs one small Haiku call per reply of 1500 characters or more | none |
 
-For `agents-panel`, `context-bar`, `custom-crab-agents` and `tool-timeline`, the command opens the pane and running it again closes it.
+For `agents-panel`, `context-bar` and `tool-timeline`, the command opens the pane and running it again closes it.
 
 Three mods take settings, declared under `userConfig` in their `.claude-plugin/plugin.json`:
 
-- `focus-mode`: `minutes`, the default block length (25).
+- `focus-mode`: `minutes`, the block length before you pick one (25).
 - `hide-personal-data`: `names`, extra names to always mask, separated by commas.
 - `you-should-know`: `minChars`, the shortest reply that gets a card (1500), and `model`, the model that picks the key point (`haiku`).
 

package/mods/agents-panel/hooks/register.tsx

@@ -1,6 +1,6 @@
 // packages/g3n-mods/mods/agents-panel/hooks/register.tsx
 import { atom, read, update } from 'claude-code'
-import type { EngineInterface, Register } from 'claude-code'
+import type { EngineInterface, Register, RenderElement } from 'claude-code'
 
 import type { AgentDef, RunningAgent } from '../types'
 
@@ -20,6 +20,27 @@ const NAMED_COLORS: Readonly<Record<string, string>> = {
 const SPINNER = ['◐', '◓', '◑', '◒']
 const DONE_STATUSES = new Set(['completed', 'failed', 'killed', 'idle'])
 
+/** Key prefix of the panel's own elements; an add-on looks for it to find the panel's tree. */
+export const OWN_KEY = 'agents:'
+
+/** Key prefix an add-on's section carries, such as custom-crab-agents' crabs, so the panel knows to show it. */
+export const ADDON_KEY = 'addon:'
+
+/**
+ * Tells whether a drawn tree holds an element whose key starts with `prefix`.
+ *
+ * @param tree - Tree as a `ui.render` chain returned it, or one of its children.
+ * @param prefix - Key prefix to look for, e.g. `addon:`.
+ * @returns True when some element's key starts with `prefix`.
+ */
+export function holdsKey(tree: unknown, prefix: string): boolean {
+  if (Array.isArray(tree)) return tree.some(child => holdsKey(child, prefix))
+  if (typeof tree !== 'object' || tree === null) return false
+  const { props, children } = tree as { props?: { key?: unknown }; children?: unknown }
+  if (typeof props?.key === 'string' && props.key.startsWith(prefix)) return true
+  return holdsKey(children, prefix)
+}
+
 /**
  * Parses the frontmatter of a Markdown file into flat `key: value` pairs.
  *
@@ -184,8 +205,13 @@ export const register: Register = on => {
     return result
   }).catch(($, e, next) => next(e))
 
-  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
+  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e, next) => {
     const { Box, Text, Button } = $.ui.resolve(e)
+    // An add-on that depends on this panel, such as custom-crab-agents, may draw beneath this hook; its section joins the panel.
+    const below: RenderElement | undefined = await next(e).catch(() => undefined)
+    const addOn = below !== undefined && holdsKey(below, ADDON_KEY) ? below : undefined
+    /** Puts an add-on's section under the panel's own tree, when one was drawn beneath. */
+    const withAddOn = (own: RenderElement) => (addOn === undefined ? own : <Box flexDirection="column" gap={1}>{own}{addOn}</Box>)
     const list = await read($, agents)
     const runs = await read($, running)
     const now = await $.clock.now()
@@ -203,11 +229,11 @@ export const register: Register = on => {
     )
 
     if (list.length === 0) {
-      return (
-        <Box flexDirection="column" gap={1}>
+      return withAddOn(
+        <Box key={`${OWN_KEY}body`} flexDirection="column" gap={1}>
           {header}
           <Text dimColor>No agents in {AGENTS_DIR} or ~/{AGENTS_DIR}. Add one with /agents.</Text>
-        </Box>
+        </Box>,
       )
     }
 
@@ -265,14 +291,14 @@ export const register: Register = on => {
           )
         })()
 
-    return (
-      <Box flexDirection="column" gap={1}>
+    return withAddOn(
+      <Box key={`${OWN_KEY}body`} flexDirection="column" gap={1}>
         {header}
         {input}
         {section('project')}
         {section('user')}
         <Text dimColor>click ▶ run to start one · /agents-panel to hide</Text>
-      </Box>
+      </Box>,
     )
   })
 }

package/mods/custom-crab-agents/.claude-plugin/plugin.json

@@ -1,9 +1,12 @@
 {
   "name": "custom-crab-agents",
   "version": "0.1.0",
-  "description": "Each subagent as a crab with a hat: effort tier, model, steps, context, tokens, cost and time.",
+  "description": "Draws each subagent in the agents panel as a crab with a hat: effort tier, model, steps, context, tokens, cost and time.",
   "author": {
     "name": "g3ntrovert"
   },
-  "types": "./types/index.d.ts"
+  "types": "./types/index.d.ts",
+  "dependencies": [
+    "agents-panel"
+  ]
 }

package/mods/custom-crab-agents/hooks/register.tsx

@@ -1,27 +1,59 @@
 // packages/g3n-mods/mods/custom-crab-agents/hooks/register.tsx
 import { atom, read, update } from 'claude-code'
-import type { EngineInterface, Register } from 'claude-code'
+import type { EngineInterface, Register, RenderElement } from 'claude-code'
 
-import type { Crab, CrabSteps, PlannedItem } from '../types'
+import type { Crab, CrabSteps, PlannedItem, Role } from '../types'
 
-const PANE = 'crabs'
-const TITLE = 'Crabs'
+/** The agents-panel mod's pane, which this mod depends on and draws its crabs into. */
+const PANEL = 'agents-panel'
+
+/** Key prefix of the agents panel's own elements, and the one this section carries so the panel shows it. */
+const PANEL_KEY = 'agents:'
+const ADDON_KEY = 'addon:'
 const crabs = atom({ plugin: 'custom-crab-agents', key: 'crabs' } as const, [])
 const planned = atom({ plugin: 'custom-crab-agents', key: 'planned' } as const, [])
 const contextWindow = atom({ plugin: 'custom-crab-agents', key: 'window' } as const, 1_000_000)
+const chats = atom({ plugin: 'custom-crab-agents', key: 'chats' } as const, [])
+
+/** Pane id prefix of a subagent's chat; the viewer opens a pane whose id starts with `tab-` in a tab of its own. */
+const CHAT_PREFIX = 'tab-chat-'
+
+/** Most of a subagent's conversation entries a chat draws, newest kept. */
+const CHAT_ROWS = 300
 
 const KEEP = 30
 const PIXEL = 4
 
-/** Effort level → tier name, color and hat. */
-const TIERS: Readonly<Record<string, { name: string; color: string; hat: keyof typeof HATS }>> = {
-  low: { name: 'light', color: '#3fa66b', hat: 'cap' },
-  medium: { name: 'medium', color: '#4c8bf5', hat: 'sailor' },
-  high: { name: 'careful', color: '#e0a030', hat: 'hardhat' },
-  xhigh: { name: 'heavy', color: '#e05a4f', hat: 'beanie' },
-  max: { name: 'heavy', color: '#e05a4f', hat: 'beanie' },
+/** Effort level → tier name and the color of the crab's bar. */
+const TIERS: Readonly<Record<string, { name: string; color: string }>> = {
+  low: { name: 'light', color: '#3fa66b' },
+  medium: { name: 'medium', color: '#4c8bf5' },
+  high: { name: 'careful', color: '#e0a030' },
+  xhigh: { name: 'heavy', color: '#e05a4f' },
+  max: { name: 'heavy', color: '#e05a4f' },
+}
+const DEFAULT_TIER = { name: 'medium', color: '#4c8bf5' }
+
+/** Words in an agent's title or type that give its role, tried in order; the first match wins. */
+const ROLE_RULES: ReadonlyArray<[Role, RegExp]> = [
+  ['review', /review|audit|inspect|critic|check/i],
+  ['test', /test|\bqa\b|verif/i],
+  ['design', /design|artist|\bart\b|style|graphic|visual|\bui\b/i],
+  ['explore', /explor|research|search|scout|find/i],
+  ['plan', /plan|architect|\bspec/i],
+  ['build', /build|implement|\bcode|\bfix|refactor|general-purpose/i],
+]
+
+/** What each role is called on its crab, and the emoji it gets in the terminal. */
+const ROLES: Readonly<Record<Role, { name: string; emoji: string }>> = {
+  review: { name: 'reviewer', emoji: '🔍' },
+  test: { name: 'tester', emoji: '🔧' },
+  design: { name: 'designer', emoji: '🎩' },
+  explore: { name: 'explorer', emoji: '🧭' },
+  plan: { name: 'planner', emoji: '📜' },
+  build: { name: 'builder', emoji: '🔨' },
+  other: { name: 'helper', emoji: '' },
 }
-const DEFAULT_TIER = { name: 'medium', color: '#4c8bf5', hat: 'sailor' as const }
 
 /** Sprite rows, 12 pixels wide; each letter is a palette color, `.` is empty. */
 const BODY = [
@@ -34,15 +66,37 @@ const BODY = [
   '..b.b..b.b..',
   '.b..b..b..b.',
 ]
-const HATS = {
-  cap: ['...gggg.....', '..gggggg....', '..ggggggggg.'],
-  sailor: ['...wwwwww...', '..wwwwwwww..', '..uuuuuuuu..'],
-  hardhat: ['....yyyy....', '...yyyyyy...', '.yyyyyyyyyy.'],
-  beanie: ['.....t......', '...nnnnnn...', '..nnnnnnnn..'],
-} as const
+/** Each role's hat, four rows over the body: an inspector's deerstalker, a work helmet, a top hat, and so on. */
+const HATS: Readonly<Record<Role, readonly string[]>> = {
+  review: ['............', '....hhhh....', '...hHhHhh...', '.hhhhhhhhhh.'],
+  test: ['.....aa.....', '...yyyyyy...', '..yyyyyyyy..', '.yyyyyyyyyy.'],
+  design: ['...tttttt...', '...tttttt...', '...vvvvvv...', '.tttttttttt.'],
+  explore: ['............', '....pppp....', '...pppppp...', '.pppppppppp.'],
+  plan: ['............', '.mmmmmmmmmmq', '...mmmmmm..q', '...mmmmmm...'],
+  build: ['............', '...gggg.....', '..gggggg....', '..ggggggggg.'],
+  other: ['............', '...wwwwww...', '..wwwwwwww..', '..uuuuuuuu..'],
+}
+
+/** What each role holds in its right claw, four pixels wide beside the body, by sprite row. */
+const PROPS: Readonly<Record<Role, Readonly<Record<number, string>>>> = {
+  review: { 3: '.oo.', 4: 'oLLo', 5: 'oLLo', 6: '.oo.', 7: 's...' },
+  test: { 4: 'w.w.', 5: 'www.', 6: '.w..', 7: '.w..', 8: '.w..' },
+  design: { 2: '..P.', 3: '..P.', 4: '..f.', 5: '.s..', 6: '.s..', 7: 's...' },
+  explore: { 2: '.rrr', 3: '.rrr', 4: '.s..', 5: '.s..', 6: '.s..', 7: '.s..' },
+  plan: { 5: 'eee.', 6: 'eEe.', 7: 'eee.' },
+  build: { 3: 'mmm.', 4: 'mmm.', 5: '.s..', 6: '.s..', 7: '.s..' },
+  other: {},
+}
+
+/** Width of the whole sprite in pixels: the 12-pixel crab and the 4-pixel item it holds. */
+const SPRITE_COLUMNS = 16
+
 const PALETTE: Readonly<Record<string, string>> = {
   b: '#e07a5f', C: '#c8553d', k: '#1e1e1e',
-  g: '#3fa66b', w: '#f0f0f0', u: '#4c8bf5', y: '#f2c14e', t: '#e8e8e8', n: '#7a4a2a',
+  g: '#3fa66b', w: '#f0f0f0', u: '#4c8bf5', y: '#f2c14e', a: '#fff3b0',
+  h: '#8b6b3e', H: '#c9a46a', t: '#22252b', v: '#9b59d0', p: '#d8c38f',
+  m: '#2f3542', q: '#f2c14e', o: '#c9d1d9', L: '#9fd3e6', s: '#7a4a2a',
+  P: '#4c8bf5', f: '#c9d1d9', r: '#e05a4f', e: '#efe6c8', E: '#b8a77a',
 }
 
 /** Price per million tokens: input, output, cache read, cache write. First match wins. */
@@ -56,6 +110,21 @@ const PRICES: ReadonlyArray<[RegExp, [number, number, number, number]]> = [
   [/haiku/, [1, 5, 0.1, 1.25]],
 ]
 
+/**
+ * Finds an agent's role from its title, then its subagent type.
+ *
+ * @param title - What the agent was started to do, e.g. `review: read mod files`.
+ * @param subagentType - Its subagent type, e.g. `Explore`.
+ * @returns The first role whose words match, or `other`.
+ */
+export function roleOf(title: string, subagentType: string): Role {
+  for (const text of [title, subagentType]) {
+    const found = ROLE_RULES.find(([, words]) => words.test(text))
+    if (found !== undefined) return found[0]
+  }
+  return 'other'
+}
+
 /**
  * Looks up the tier of an effort level, falling back to the default tier.
  *
@@ -124,14 +193,14 @@ function minutes(ms: number): string {
 }
 
 /**
- * Draws the crab as one SVG: hat rows for the tier on top of the body; a planned crab is drawn grey.
+ * Draws the crab as one SVG: its role's hat over the body, and the item it holds; a planned crab is drawn grey.
  *
- * @param hat - Hat to draw, a key of `HATS`.
+ * @param role - Role whose hat and item to draw.
  * @param isPlanned - Whether the crab is planned work, not a running or finished subagent.
  * @returns The SVG markup as a string.
  */
-function crabSvg(hat: keyof typeof HATS, isPlanned: boolean): string {
-  const rows = [...HATS[hat], ...BODY]
+function crabSvg(role: Role, isPlanned: boolean): string {
+  const rows = [...HATS[role], ...BODY].map((row, y) => row + (PROPS[role][y] ?? '....'))
   const rects: string[] = []
   rows.forEach((row, y) => {
     for (let x = 0; x < row.length; x++) {
@@ -139,7 +208,7 @@ function crabSvg(hat: keyof typeof HATS, isPlanned: boolean): string {
       if (color !== undefined) rects.push(`<rect x="${x * PIXEL}" y="${y * PIXEL}" width="${PIXEL}" height="${PIXEL}" fill="${color}"/>`)
     }
   })
-  const width = 12 * PIXEL
+  const width = SPRITE_COLUMNS * PIXEL
   const height = rows.length * PIXEL
   const filter = isPlanned ? ' opacity="0.45" style="filter:grayscale(1)"' : ''
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"${filter}>${rects.join('')}</svg>`
@@ -178,6 +247,21 @@ const isNumber = (v: unknown): v is number => typeof v === 'number'
 /** Tells whether `v` is a non-null object. */
 const isRecord = (v: unknown): v is Record<string, unknown> => typeof v === 'object' && v !== null
 
+/**
+ * Tells whether a drawn tree holds an element whose key starts with `prefix`.
+ *
+ * @param tree - Tree as a `ui.render` chain returned it, or one of its children.
+ * @param prefix - Key prefix to look for, e.g. `agents:`.
+ * @returns True when some element's key starts with `prefix`.
+ */
+export function holdsKey(tree: unknown, prefix: string): boolean {
+  if (Array.isArray(tree)) return tree.some(child => holdsKey(child, prefix))
+  if (typeof tree !== 'object' || tree === null) return false
+  const { props, children } = tree as { props?: { key?: unknown }; children?: unknown }
+  if (typeof props?.key === 'string' && props.key.startsWith(prefix)) return true
+  return holdsKey(children, prefix)
+}
+
 /**
  * Applies `patch` to every crab that `match` selects.
  *
@@ -190,14 +274,13 @@ async function patchCrab($: EngineInterface, match: (crab: Crab) => boolean, pat
 }
 
 /**
- * Records a subagent the main thread just started and shows the pane.
+ * Records a subagent the main thread just started.
  *
  * @param $ - Engine handle the hook received, see `EngineInterface`.
  * @param crab - New running crab to add, see `Crab`.
  */
 async function startCrab($: EngineInterface, crab: Crab): Promise<void> {
   await update($, crabs, list => [...list.filter(one => one.id !== crab.id), crab].slice(-KEEP))
-  void $.ui.open({ id: PANE, title: TITLE })
 }
 
 /**
@@ -332,28 +415,70 @@ async function readWindow($: EngineInterface): Promise<void> {
 }
 
 /**
- * Registers this mod's `crabs` command, its session, tool, subagent and turn hooks, and its pane.
+ * Opens a crab's conversation as a pane of its own, which the viewer shows in a tab of its own.
+ *
+ * @param $ - Engine handle the press came through.
+ * @param crabId - `id` of the crab whose agent to show.
+ */
+async function openChat($: EngineInterface, crabId: string): Promise<void> {
+  const crab = (await read($, crabs)).find(one => one.id === crabId)
+  if (crab?.agentId === undefined) {
+    $.ui.toast('This agent has no conversation yet; try again once it has started.')
+    return
+  }
+  const agentId = crab.agentId
+  const id = `${CHAT_PREFIX}${agentId.replace(/[^A-Za-z0-9_-]/g, '')}`.slice(0, 64)
+  await update($, chats, list => [...list.filter(chat => chat.id !== id), { id, agentId, title: crab.title }])
+  await $.ui.open({ id, title: `Chat · ${crab.title}`, focus: true })
+}
+
+/**
+ * Sends a message typed in a chat to its agent, which resumes a finished one.
+ *
+ * @param $ - Engine handle the submit came through.
+ * @param agentId - Agent the chat shows.
+ * @param text - What the person typed.
+ */
+async function sendToAgent($: EngineInterface, agentId: string, text: string): Promise<void> {
+  const message = text.trim()
+  if (message === '') return
+  const sent = await $.session.send({ to: { agentId }, text: message }).catch((error: unknown) => ({ isDelivered: false as const, reason: String(error) }))
+  if (!sent.isDelivered) {
+    $.ui.toast(`Not delivered: ${sent.reason ?? 'the agent could not be reached'}`)
+    return
+  }
+  await patchCrab($, crab => crab.agentId === agentId, crab => ({ ...crab, status: 'running', durationMs: undefined }))
+  $.ui.invalidate('ui.render')
+}
+
+/**
+ * Shortens a tool call to the text its one line in a chat shows: a command, a file's name, a pattern.
+ *
+ * @param input - Arguments of the tool call.
+ * @returns The label with whitespace collapsed, at most 200 characters.
+ */
+function toolLabel(input: Record<string, unknown>): string {
+  for (const key of ['command', 'file_path', 'pattern', 'url', 'query', 'description', 'prompt']) {
+    const value = input[key]
+    if (typeof value !== 'string' || value === '') continue
+    const text = key === 'file_path' ? value.split('/').pop() ?? value : value
+    return text.replace(/\s+/g, ' ').trim().slice(0, 200)
+  }
+  return ''
+}
+
+/**
+ * Registers this mod's session, tool, subagent and turn hooks, its section of the agents panel, and the agents' chats.
  *
  * @param on - Hook registration function the engine passes in.
  */
 export const register: Register = on => {
   on('session.start', async ($, e, next) => {
-    await $.command.register({ name: 'crabs', description: 'Show or hide the subagent crabs' })
     await readWindow($)
-    void $.ui.open({ id: PANE, title: TITLE })
     $.clock.every(1000, () => void tick($))
     return next(e)
   })
 
-  on('command.run', { command: 'crabs' }, async $ => {
-    if ((await $.ui.panes()).some(pane => pane.id === PANE)) {
-      await $.ui.close({ id: PANE })
-      return { text: 'Crabs hidden.' }
-    }
-    await $.ui.open({ id: PANE, title: TITLE })
-    return { text: 'Crabs shown.' }
-  })
-
   on('tool.call', { tool: 'Agent' }, async ($, e, next) => {
     if (e.agentId !== undefined) return next(e)
     const startedAt = await $.clock.now()
@@ -399,26 +524,105 @@ export const register: Register = on => {
     return result
   }).catch(($, e, next) => next(e))
 
-  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
-    const { Box, Text } = $.ui.resolve(e)
+  // Forgets a chat once its pane is closed.
+  on('ui.close', async ($, e, next) => {
+    if (e.id.startsWith(CHAT_PREFIX)) await update($, chats, list => list.filter(chat => chat.id !== e.id))
+    return next(e)
+  }).catch(($, e, next) => next(e))
+
+  // A subagent's chat: its whole conversation, each tool call on one line, and a box to message it.
+  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
+    const chat = (await read($, chats)).find(one => one.id === e.requestId)
+    if (chat === undefined) return next(e)
+    const { Box, Text, Markdown } = $.ui.resolve(e)
+    const crab = (await read($, crabs)).find(one => one.agentId === chat.agentId)
+    const found = await $.session.messages({ agentId: chat.agentId })
+    const role = roleOf(chat.title, crab?.subagentType ?? '')
+    const status = crab === undefined ? '' : crab.status === 'running' ? '● running' : crab.status === 'failed' ? '✗ failed' : '✓ finished'
+
+    const header = (
+      <Box flexDirection="row" columnGap={1}>
+        <Text bold wrap="truncate-end">{chat.title}</Text>
+        <Text dimColor wrap="truncate-end">{ROLES[role].name}{crab === undefined ? '' : ` · ${modelName(crab.model)} · ${status}`}</Text>
+      </Box>
+    )
+    if ('deny' in found) return <Box flexDirection="column" gap={1}>{header}<Text dimColor>{found.deny}</Text></Box>
+
+    const rows = found.slice(-CHAT_ROWS).flatMap((message, index) => {
+      const parts = []
+      if (message.role === 'user' && message.text.trim() !== '') {
+        parts.push(
+          <Box key={`m${index}`} borderStyle="round" borderColor="#3a3f4b" paddingX={1} marginTop={1}>
+            <Text wrap="wrap">{message.text}</Text>
+          </Box>,
+        )
+      }
+      if (message.role === 'assistant' && message.text.trim() !== '') {
+        parts.push(<Box key={`m${index}`} marginTop={1}><Markdown text={message.text} /></Box>)
+      }
+      message.toolUses.forEach((use, n) => {
+        parts.push(
+          <Box key={`t${index}:${n}`} flexDirection="row" columnGap={1}>
+            <Text color={use.isError === true ? '#e06c6c' : '#7cc47f'}>⏺</Text>
+            <Text wrap="truncate-end">{use.tool} <Text dimColor>{toolLabel(use.input)}</Text></Text>
+          </Box>,
+        )
+      })
+      return parts
+    })
+
+    const input = e.surface === 'mobile'
+      ? ''
+      : (() => {
+          const { Input } = $.ui.resolve(e)
+          return (
+            <Input
+              key="send"
+              placeholder={crab?.status === 'running' ? 'Message this agent; it reads it after its current step' : 'Message this agent to continue it'}
+              submitLabel="Send"
+              onSubmit={value => sendToAgent($, chat.agentId, value)}
+            />
+          )
+        })()
+
+    return (
+      <Box flexDirection="column">
+        {header}
+        {rows.length === 0 ? <Text dimColor>Nothing in this conversation yet.</Text> : rows}
+        <Box marginTop={1}>{input}</Box>
+      </Box>
+    )
+  })
+
+  // Draws into the agents panel: under the panel's tree when the panel's hook lies beneath this one, or alone with an
+  // `addon:` key that the panel's hook picks up when it lies above. Either way the crabs end up under the agents.
+  on('ui.render', { component: 'Pane', requestId: PANEL }, async ($, e, next) => {
+    const { Box, Text, Button } = $.ui.resolve(e)
+    const below: RenderElement | undefined = await next(e).catch(() => undefined)
+    const panel = below !== undefined && holdsKey(below, PANEL_KEY) ? below : undefined
+    /** Puts the crabs' section under the panel's tree, when it was drawn beneath. */
+    const joined = (section: RenderElement) => (panel === undefined ? section : <Box flexDirection="column" gap={1}>{panel}{section}</Box>)
+
     const list = await read($, crabs)
     const plan = await read($, planned)
     const window = await read($, contextWindow)
     const now = await $.clock.now()
-    if (list.length === 0 && plan.length === 0) return <Text dimColor>No subagents yet. Each one shows up here as a crab.</Text>
+    if (list.length === 0 && plan.length === 0) {
+      return joined(<Box key={`${ADDON_KEY}crabs`}><Text dimColor>No subagents yet. Each one shows up here as a crab.</Text></Box>)
+    }
 
     const barWidth = Math.max(120, (e.props.bodyColumns - 10) * 7)
     /**
      * Draws a crab sprite: an emoji in the terminal, an SVG elsewhere.
      *
-     * @param hat - Hat to draw, a key of `HATS`.
+     * @param role - Role whose hat and item to draw.
      * @param isPlanned - Whether the crab is planned work.
      * @returns The sprite element.
      */
-    const sprite = (hat: keyof typeof HATS, isPlanned: boolean) => {
-      if (e.surface === 'terminal') return <Text color={isPlanned ? '#6b7280' : PALETTE.b}>🦀</Text>
+    const sprite = (role: Role, isPlanned: boolean) => {
+      if (e.surface === 'terminal') return <Text color={isPlanned ? '#6b7280' : PALETTE.b}>{ROLES[role].emoji}🦀</Text>
       const { Svg } = $.ui.resolve(e)
-      return <Svg source={crabSvg(hat, isPlanned)} alt="crab" width={12 * PIXEL} height={11 * PIXEL} />
+      return <Svg source={crabSvg(role, isPlanned)} alt={`${ROLES[role].name} crab`} width={SPRITE_COLUMNS * PIXEL} height={12 * PIXEL} />
     }
     /**
      * Draws a progress bar for a crab.
@@ -445,6 +649,7 @@ export const register: Register = on => {
      */
     const card = (crab: Crab) => {
       const tier = tierOf(crab.effort)
+      const role = roleOf(crab.title, crab.subagentType)
       const elapsed = crab.durationMs ?? now - crab.startedAt
       const tokens = crab.tokens ?? 0
       const share = crab.steps.total > 0 ? crab.steps.done / crab.steps.total : crab.status === 'running' ? 0.08 + Math.min(0.8, crab.requests / 40) : 1
@@ -462,14 +667,17 @@ export const register: Register = on => {
         : <Text color="#7cc47f">✓</Text>
       return (
         <Box flexDirection="row" columnGap={2} paddingY={1}>
-          {sprite(tier.hat, false)}
+          {sprite(role, false)}
           <Box flexDirection="column" flexGrow={1}>
             <Box flexDirection="row" justifyContent="space-between">
-              <Text bold wrap="truncate-end">{crab.title}</Text>
+              <Button key={`chat:${crab.id}`} plain onPress={() => openChat($, crab.id)}>
+                <Text bold wrap="truncate-end">{crab.title}</Text>
+                <Text dimColor> ↗</Text>
+              </Button>
               {mark}
             </Box>
             <Text>
-              <Text color={tier.color}>{tier.name}</Text>
+              <Text color={tier.color}>{ROLES[role].name}</Text>
               <Text dimColor> {modelName(crab.model)}{crab.effort === undefined ? '' : ` · ${crab.effort}`}</Text>
             </Text>
             <Box flexDirection="row" justifyContent="space-between">
@@ -485,15 +693,16 @@ export const register: Register = on => {
     const running = list.filter(crab => crab.status === 'running')
     const done = list.filter(crab => crab.status !== 'running')
 
-    return (
-      <Box flexDirection="column">
+    return joined(
+      <Box key={`${ADDON_KEY}crabs`} flexDirection="column">
+        <Text bold>Subagents</Text>
         {running.map(card)}
         {done.length > 0 && <Text dimColor>▾ Finished · {done.length}</Text>}
         {done.slice().reverse().map(card)}
         {plan.length > 0 && <Text dimColor>Planned · {plan.length}</Text>}
         {plan.map(item => (
           <Box flexDirection="row" columnGap={2} paddingY={1}>
-            {sprite('beanie', true)}
+            {sprite(roleOf(item.content, ''), true)}
             <Box flexDirection="column" flexGrow={1}>
               <Box flexDirection="row" justifyContent="space-between">
                 <Text bold dimColor wrap="truncate-end">{item.index}. {item.content}</Text>
@@ -503,7 +712,7 @@ export const register: Register = on => {
             </Box>
           </Box>
         ))}
-      </Box>
+      </Box>,
     )
   })
 }

package/mods/custom-crab-agents/types/index.d.ts

@@ -38,8 +38,19 @@ export type PlannedItem = {
   after: number[]
 }
 
+/** What an agent does, read from its title or type; it picks the crab's hat and the item it holds. */
+export type Role = 'review' | 'test' | 'design' | 'explore' | 'plan' | 'build' | 'other'
+
+/** A subagent's conversation opened as a pane of its own. */
+export type ChatPane = {
+  /** Pane id, `tab-chat-` and the agent's id */
+  id: string
+  agentId: string
+  title: string
+}
+
 declare module 'claude-code' {
   interface PluginState {
-    'custom-crab-agents': { crabs: Crab[]; planned: PlannedItem[]; window: number }
+    'custom-crab-agents': { crabs: Crab[]; planned: PlannedItem[]; window: number; chats: ChatPane[] }
   }
 }

package/mods/delete-guard/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "delete-guard",
   "version": "0.1.0",
-  "description": "Denies rm -rf and other permanent deletes and points Claude to the trash.",
+  "description": "Holds rm -rf and other permanent deletes on a card that lists what they remove, until you press Delete or Cancel.",
   "author": {
     "name": "g3ntrovert"
   },

package/mods/delete-guard/hooks/hooks.json

@@ -1 +1 @@
-{ "modules": ["./register.ts"] }
+{ "modules": ["./register.tsx"] }