@g3nomaly/g3n-mods 0.1.5 → 0.1.7

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

@@ -2,7 +2,9 @@
 import { atom, read, update } from 'claude-code'
 import type { EngineInterface, Register, RenderElement } from 'claude-code'
 
-import type { Crab, CrabSteps, PlannedItem, Role } from '../types'
+import type { Crab, CrabSteps, CrabsViewData, PlannedItem, Role } from '../types'
+import { PALETTE, PIXEL, SPRITE_COLUMNS, SPRITE_ROWS, crabSvg, phaseOf } from './sprite'
+import type { Pose } from './sprite'
 
 /** The agents-panel mod's pane, which this mod depends on and draws its crabs into. */
 const PANEL = 'agents-panel'
@@ -22,7 +24,6 @@ const CHAT_PREFIX = 'tab-chat-'
 const CHAT_ROWS = 300
 
 const KEEP = 30
-const PIXEL = 4
 
 /** Effort level → tier name and the color of the crab's bar. */
 const TIERS: Readonly<Record<string, { name: string; color: string }>> = {
@@ -55,50 +56,6 @@ const ROLES: Readonly<Record<Role, { name: string; emoji: string }>> = {
   other: { name: 'helper', emoji: '' },
 }
 
-/** Sprite rows, 12 pixels wide; each letter is a palette color, `.` is empty. */
-const BODY = [
-  '...k....k...',
-  'C..b....b..C',
-  'CC.bbbbbb.CC',
-  '.CbbbbbbbbC.',
-  '..bbbbbbbb..',
-  '..bbbbbbbb..',
-  '..b.b..b.b..',
-  '.b..b..b..b.',
-]
-/** 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', 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. */
 const PRICES: ReadonlyArray<[RegExp, [number, number, number, number]]> = [
   [/fable|mythos/, [10, 50, 0.25, 12.5]],
@@ -192,28 +149,6 @@ function minutes(ms: number): string {
   return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`
 }
 
-/**
- * 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 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(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++) {
-      const color = PALETTE[row.charAt(x)]
-      if (color !== undefined) rects.push(`<rect x="${x * PIXEL}" y="${y * PIXEL}" width="${PIXEL}" height="${PIXEL}" fill="${color}"/>`)
-    }
-  })
-  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>`
-}
-
 /**
  * Draws a progress bar as one SVG, filled to `share` of its width.
  *
@@ -414,6 +349,49 @@ async function readWindow($: EngineInterface): Promise<void> {
   if (usage !== undefined && usage.context.window > 0) await update($, contextWindow, () => usage.context.window)
 }
 
+/**
+ * @brief Works out what a crab's card says: its tier and role, how full its bar is, its step line and its stats.
+ *
+ * @param crab - Crab to describe, see `Crab`.
+ * @param window - The session's context window, in tokens.
+ * @param now - Current time, the end of a crab still running.
+ * @returns The card's facts.
+ */
+function factsOf(crab: Crab, window: number, now: number) {
+  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
+  const stepLine = crab.steps.total > 0
+    ? `${crab.steps.done}/${crab.steps.total}${crab.steps.current === undefined ? '' : ` · ${crab.steps.current}`}`
+    : crab.status === 'running' ? `step ${crab.requests}` : `${crab.requests} step${crab.requests === 1 ? '' : 's'}`
+  const stats = [
+    tokens > 0 ? `ctx ${Math.max(1, Math.round((tokens / window) * 100))}%` : '',
+    tokens > 0 ? formatTokens(tokens) : '',
+    crab.costUsd === undefined ? '' : `≈$${crab.costUsd.toFixed(2)}`,
+    minutes(elapsed),
+  ].filter(part => part.length > 0).join(' · ')
+  return { tier, role, share, stepLine, stats }
+}
+
+/**
+ * Carries out an action the crabs' view sent: `openChat` with a crab's id.
+ *
+ * @param $ - Engine handle the action came through.
+ * @param value - The action as the view sent it, JSON of `{ name, arg }`.
+ */
+async function act($: EngineInterface, value: string): Promise<void> {
+  let action: { name?: unknown; arg?: unknown }
+  try {
+    action = JSON.parse(value) as { name?: unknown; arg?: unknown }
+  } catch {
+    return
+  }
+  const arg = typeof action.arg === 'object' && action.arg !== null ? (action.arg as Record<string, unknown>) : {}
+  if (action.name === 'openChat' && typeof arg.id === 'string') await openChat($, arg.id)
+}
+
 /**
  * Opens a crab's conversation as a pane of its own, which the viewer shows in a tab of its own.
  *
@@ -552,7 +530,7 @@ export const register: Register = on => {
       const parts = []
       if (message.role === 'user' && message.text.trim() !== '') {
         parts.push(
-          <Box key={`m${index}`} borderStyle="round" borderColor="#3a3f4b" paddingX={1} marginTop={1}>
+          <Box key={`m${index}`} borderStyle="round" borderColor="#3a3f4b" backgroundColor="#24272e" paddingX={1} marginTop={1}>
             <Text wrap="wrap">{message.text}</Text>
           </Box>,
         )
@@ -571,6 +549,10 @@ export const register: Register = on => {
       return parts
     })
 
+    const working = crab?.status === 'running'
+      ? <Box marginTop={1}><Text color="#d97757">✻ Working… <Text dimColor>{crab.steps.current ?? `step ${crab.requests}`}</Text></Text></Box>
+      : ''
+
     const input = e.surface === 'mobile'
       ? ''
       : (() => {
@@ -578,7 +560,7 @@ export const register: Register = on => {
           return (
             <Input
               key="send"
-              placeholder={crab?.status === 'running' ? 'Message this agent; it reads it after its current step' : 'Message this agent to continue it'}
+              placeholder={crab?.status === 'running' ? `Message ${chat.title}… it reads it after its current step` : `Reply to ${chat.title}…`}
               submitLabel="Send"
               onSubmit={value => sendToAgent($, chat.agentId, value)}
             />
@@ -589,6 +571,7 @@ export const register: Register = on => {
       <Box flexDirection="column">
         {header}
         {rows.length === 0 ? <Text dimColor>Nothing in this conversation yet.</Text> : rows}
+        {working}
         <Box marginTop={1}>{input}</Box>
       </Box>
     )
@@ -607,6 +590,40 @@ export const register: Register = on => {
     const plan = await read($, planned)
     const window = await read($, contextWindow)
     const now = await $.clock.now()
+
+    // The viewer draws the crabs with the mod's own view: hand it the cards as data, inside the key the panel looks for.
+    if (e.surface === 'vscode') {
+      const { Input } = $.ui.resolve(e)
+      const data: CrabsViewData = {
+        crabs: list.map(crab => {
+          const facts = factsOf(crab, window, now)
+          return {
+            id: crab.id,
+            title: crab.title,
+            role: facts.role,
+            roleName: ROLES[facts.role].name,
+            color: facts.tier.color,
+            model: modelName(crab.model),
+            ...(crab.effort === undefined ? {} : { effort: crab.effort }),
+            status: crab.status,
+            stepLine: facts.stepLine,
+            stats: facts.stats,
+            share: facts.share,
+            phase: phaseOf(crab.id),
+          }
+        }),
+        planned: plan.map(item => ({ index: item.index, content: item.content, after: item.after, role: roleOf(item.content, '') })),
+      }
+      return joined(
+        <Box key={`${ADDON_KEY}crabs`}>
+          <Box key="g3n-view:custom-crab-agents">
+            <Text>{JSON.stringify(data)}</Text>
+            <Input key="g3n-act:custom-crab-agents" onSubmit={value => act($, value)} />
+          </Box>
+        </Box>,
+      )
+    }
+
     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>)
     }
@@ -616,13 +633,14 @@ export const register: Register = on => {
      * Draws a crab sprite: an emoji in the terminal, an SVG elsewhere.
      *
      * @param role - Role whose hat and item to draw.
-     * @param isPlanned - Whether the crab is planned work.
+     * @param pose - Walking while the agent runs, standing once done, grey while planned.
+     * @param id - The crab's id, which offsets its animations from its neighbours'.
      * @returns The sprite element.
      */
-    const sprite = (role: Role, isPlanned: boolean) => {
-      if (e.surface === 'terminal') return <Text color={isPlanned ? '#6b7280' : PALETTE.b}>{ROLES[role].emoji}🦀</Text>
+    const sprite = (role: Role, pose: Pose, id: string) => {
+      if (e.surface === 'terminal') return <Text color={pose === 'planned' ? '#6b7280' : PALETTE.b}>{ROLES[role].emoji}🦀</Text>
       const { Svg } = $.ui.resolve(e)
-      return <Svg source={crabSvg(role, isPlanned)} alt={`${ROLES[role].name} crab`} width={SPRITE_COLUMNS * PIXEL} height={12 * PIXEL} />
+      return <Svg source={crabSvg(role, pose, phaseOf(id))} alt={`${ROLES[role].name} crab`} width={SPRITE_COLUMNS * PIXEL} height={SPRITE_ROWS * PIXEL} />
     }
     /**
      * Draws a progress bar for a crab.
@@ -648,32 +666,25 @@ export const register: Register = on => {
      * @returns The card element.
      */
     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
-      const stepLine = crab.steps.total > 0
-        ? `${crab.steps.done}/${crab.steps.total}${crab.steps.current === undefined ? '' : ` · ${crab.steps.current}`}`
-        : crab.status === 'running' ? `step ${crab.requests}` : `${crab.requests} step${crab.requests === 1 ? '' : 's'}`
-      const stats = [
-        tokens > 0 ? `ctx ${Math.max(1, Math.round((tokens / window) * 100))}%` : '',
-        tokens > 0 ? formatTokens(tokens) : '',
-        crab.costUsd === undefined ? '' : `≈$${crab.costUsd.toFixed(2)}`,
-        minutes(elapsed),
-      ].filter(part => part.length > 0).join(' · ')
+      const { tier, role, share, stepLine, stats } = factsOf(crab, window, now)
       const mark = crab.status === 'running' ? <Text color="#2f6b4a">●</Text>
         : crab.status === 'failed' ? <Text color="#e06c6c">✗</Text>
         : <Text color="#7cc47f">✓</Text>
+      // The whole card opens the agent's chat: a Button holds only text, so a plain one covers the card. The terminal,
+      // where a cover would hide the card, gets a line of its own instead.
+      const opener = e.surface === 'terminal'
+        ? <Button key={`chat:${crab.id}`} label="open chat" onPress={() => openChat($, crab.id)} />
+        : (
+            <Box position="absolute" top={0} left={0} right={0} bottom={0}>
+              <Button key={`chat:${crab.id}`} plain label="Open chat ↗" onPress={() => openChat($, crab.id)} />
+            </Box>
+          )
       return (
-        <Box flexDirection="row" columnGap={2} paddingY={1}>
-          {sprite(role, false)}
+        <Box key={`crab:${crab.id}`} flexDirection="row" columnGap={2} paddingY={1} paddingX={1}>
+          {sprite(role, crab.status === 'running' ? 'running' : 'idle', crab.id)}
           <Box flexDirection="column" flexGrow={1}>
             <Box flexDirection="row" justifyContent="space-between">
-              <Button key={`chat:${crab.id}`} plain onPress={() => openChat($, crab.id)}>
-                <Text bold wrap="truncate-end">{crab.title}</Text>
-                <Text dimColor> ↗</Text>
-              </Button>
+              <Text bold wrap="truncate-end">{crab.title}</Text>
               {mark}
             </Box>
             <Text>
@@ -685,7 +696,9 @@ export const register: Register = on => {
               <Text dimColor>{stats}</Text>
             </Box>
             {progress(share, tier.color)}
+            {e.surface === 'terminal' ? opener : ''}
           </Box>
+          {e.surface === 'terminal' ? '' : opener}
         </Box>
       )
     }
@@ -702,7 +715,7 @@ export const register: Register = on => {
         {plan.length > 0 && <Text dimColor>Planned · {plan.length}</Text>}
         {plan.map(item => (
           <Box flexDirection="row" columnGap={2} paddingY={1}>
-            {sprite(roleOf(item.content, ''), true)}
+            {sprite(roleOf(item.content, ''), 'planned', String(item.index))}
             <Box flexDirection="column" flexGrow={1}>
               <Box flexDirection="row" justifyContent="space-between">
                 <Text bold dimColor wrap="truncate-end">{item.index}. {item.content}</Text>

package/mods/custom-crab-agents/hooks/sprite.ts

@@ -0,0 +1,131 @@
+// packages/g3n-mods/mods/custom-crab-agents/hooks/sprite.ts
+import type { Role } from '../types'
+
+/**
+ * The crab sprite, shared by the hooks module, which draws it as an Svg on surfaces without the mod's view, and by
+ * the view in `view/view.ts`. Plain data and string building only, so both can import it.
+ */
+
+/** Size of one sprite pixel, in CSS pixels. */
+export const PIXEL = 4
+
+/**
+ * The body: Claude's mascot as the Claude Code logo draws it, 16 pixels wide. A wide body, two dark eye slits,
+ * arms out to both sides, four short legs. Each letter is a palette color, `.` is empty.
+ */
+export const BODY = [
+  '..bbbbbbbbbbbb..',
+  '..bbkbbbbbbkbb..',
+  '..bbkbbbbbbkbb..',
+  'CCbbbbbbbbbbbbCC',
+  '..bbbbbbbbbbbb..',
+  '...b.b....b.b...',
+  '...b.b....b.b...',
+]
+
+/** Each role's hat, four rows over the body, 12 pixels wide and centred on it: an inspector's deerstalker, a work helmet, a top hat, and so on. */
+export 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 arm, four pixels wide beside the body, by sprite row; the arm is on row 7. */
+export const PROPS: Readonly<Record<Role, Readonly<Record<number, string>>>> = {
+  review: { 3: '.oo.', 4: 'oLLo', 5: 'oLLo', 6: '.oo.', 7: 's...' },
+  test: { 3: '.w.w', 4: '.www', 5: '..w.', 6: '.w..', 7: '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: 'ss..' },
+  plan: { 5: 'eee.', 6: 'eEe.', 7: 'eee.' },
+  build: { 3: 'mmm.', 4: 'mmm.', 5: '.s..', 6: '.s..', 7: 's...' },
+  other: {},
+}
+
+/** Size of the whole sprite in pixels: the 16-pixel body and the 4-pixel item it holds, under a 4-row hat. */
+export const SPRITE_COLUMNS = 20
+export const SPRITE_ROWS = 11
+
+export const PALETTE: Readonly<Record<string, string>> = {
+  b: '#d97757', C: '#c8613f', k: '#1e1e1e',
+  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',
+}
+
+/** The sprite rows of the legs, below the hat and the body above them, and the second leg pose of a walking crab. */
+const LEG_ROWS = [9, 10]
+const STEP_LEGS = '..b...b..b...b..'
+
+/** The sprite cells of the eyes, as column and row, which close for a moment when the crab blinks. */
+const EYES: ReadonlyArray<[number, number]> = [[4, 5], [4, 6], [11, 5], [11, 6]]
+
+/** How a crab is drawn: walking while its agent runs, standing and blinking once done, grey while only planned. */
+export type Pose = 'running' | 'idle' | 'planned'
+
+/**
+ * Turns an id into a start offset for the crab's animations, so crabs side by side do not move in step.
+ *
+ * @param id - The crab's id, e.g. its Agent call's tool_use_id.
+ * @returns An offset in seconds, from 0 up to 4.
+ */
+export function phaseOf(id: string): number {
+  let hash = 0
+  for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) >>> 0
+  return (hash % 4000) / 1000
+}
+
+/**
+ * Draws pixels as SVG rects, one per colored cell.
+ *
+ * @param rows - Sprite rows; each letter is a `PALETTE` color, `.` is empty.
+ * @param only - The row numbers to draw; all when absent.
+ * @returns The rects as markup.
+ */
+function pixels(rows: readonly string[], only?: readonly number[]): string {
+  const rects: string[] = []
+  rows.forEach((row, y) => {
+    if (only !== undefined && !only.includes(y)) return
+    for (let x = 0; x < row.length; x++) {
+      const color = PALETTE[row.charAt(x)]
+      if (color !== undefined) rects.push(`<rect x="${x * PIXEL}" y="${y * PIXEL}" width="${PIXEL}" height="${PIXEL}" fill="${color}"/>`)
+    }
+  })
+  return rects.join('')
+}
+
+/**
+ * @brief Draws the crab as one SVG: its role's hat over the body and the item it holds. A running crab bobs and walks,
+ * every crab but a planned one blinks now and then, and a planned crab is drawn grey and still.
+ *
+ * The motion is the SVG's own animation (SMIL), so it needs nothing from the surface drawing it.
+ *
+ * @param role - Role whose hat and item to draw.
+ * @param pose - Walking, standing or planned.
+ * @param phase - Seconds into its animations the crab starts, see `phaseOf`.
+ * @returns The SVG markup as a string.
+ */
+export function crabSvg(role: Role, pose: Pose, phase = 0): string {
+  const rows = [...HATS[role].map(row => `..${row}..`), ...BODY].map((row, y) => row + (PROPS[role][y] ?? '....'))
+  const width = SPRITE_COLUMNS * PIXEL
+  const height = SPRITE_ROWS * PIXEL
+  // crispEdges keeps the pixels sharp, with no seams between them, while the crab bobs.
+  const open = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" shape-rendering="crispEdges"`
+  if (pose === 'planned') return `${open} opacity="0.45" style="filter:grayscale(1)">${pixels(rows)}</svg>`
+
+  const begin = `begin="-${phase.toFixed(2)}s"`
+  const above = rows.map((_, y) => y).filter(y => !LEG_ROWS.includes(y))
+  const eyelids = EYES.map(([x, y]) => `<rect x="${x * PIXEL}" y="${y * PIXEL}" width="${PIXEL}" height="${PIXEL}" fill="${PALETTE.b}"/>`).join('')
+  const blink = `<g opacity="0">${eyelids}<animate attributeName="opacity" values="0;1;0" keyTimes="0;0.94;0.97" calcMode="discrete" dur="${pose === 'running' ? 3.2 : 4.6}s" repeatCount="indefinite" ${begin}/></g>`
+  if (pose === 'idle') return `${open}>${pixels(rows)}${blink}</svg>`
+
+  // Running: the body bobs half a pixel and the legs swap between two poses, as a walk.
+  const stepped = rows.map((row, y) => (LEG_ROWS.includes(y) ? STEP_LEGS + row.slice(STEP_LEGS.length) : row))
+  const swap = (from: number) => `<animate attributeName="opacity" values="${from};${1 - from}" calcMode="discrete" dur="0.5s" repeatCount="indefinite" ${begin}/>`
+  const bob = `<animateTransform attributeName="transform" type="translate" values="0 0;0 -2;0 0" dur="0.5s" repeatCount="indefinite" ${begin}/>`
+  return `${open}><g>${pixels(rows, above)}${blink}${bob}</g><g>${pixels(rows, LEG_ROWS)}${swap(1)}</g><g opacity="0">${pixels(stepped, LEG_ROWS)}${swap(0)}</g></svg>`
+}

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

@@ -49,6 +49,41 @@ export type ChatPane = {
   title: string
 }
 
+/** One crab as the view draws it. */
+export type CrabView = {
+  id: string
+  title: string
+  role: Role
+  roleName: string
+  /** The bar's color, from the effort tier */
+  color: string
+  model: string
+  effort?: string
+  status: 'running' | 'finished' | 'failed'
+  /** e.g. `3/5 · Writing hero copy`, or `step 4` */
+  stepLine: string
+  /** e.g. `ctx 4% · 38k · ≈$0.05 · 0:26` */
+  stats: string
+  /** Filled part of the bar, from 0 to 1 */
+  share: number
+  /** Seconds into its animations the crab starts, so neighbours do not move in step */
+  phase: number
+}
+
+/** One planned item as the view draws it: a grey crab. */
+export type PlannedView = {
+  index: number
+  content: string
+  after: number[]
+  role: Role
+}
+
+/** What the crabs' view gets. */
+export type CrabsViewData = {
+  crabs: CrabView[]
+  planned: PlannedView[]
+}
+
 declare module 'claude-code' {
   interface PluginState {
     'custom-crab-agents': { crabs: Crab[]; planned: PlannedItem[]; window: number; chats: ChatPane[] }

package/mods/custom-crab-agents/view/view.css

@@ -0,0 +1,74 @@
+/* packages/g3n-mods/mods/custom-crab-agents/view/view.css */
+.cr {
+  --dim: var(--vscode-descriptionForeground, #9d9d9d);
+  --line: color-mix(in srgb, var(--vscode-foreground) 10%, transparent);
+  --mono: var(--vscode-editor-font-family, ui-monospace, monospace);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.cr-title { font-weight: 600; font-size: 14px; }
+.cr-count { color: var(--dim); font-size: 12px; }
+
+.cr-list { display: flex; flex-direction: column; gap: 4px; }
+
+/* A card is one real button: the crab on the left, its text on the right; the whole of it opens the chat. */
+.cr-card {
+  display: grid;
+  grid-template-columns: 80px minmax(0, 1fr);
+  align-items: center;
+  column-gap: 14px;
+  width: 100%;
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+button.cr-card:hover { background: color-mix(in srgb, var(--vscode-foreground) 6%, transparent); border-color: var(--line); }
+button.cr-card:active { transform: scale(0.995); background: color-mix(in srgb, var(--vscode-foreground) 9%, transparent); }
+button.cr-card:focus-visible { outline: 1px solid var(--vscode-focusBorder); outline-offset: -1px; }
+.cr-card.is-planned { cursor: default; opacity: 0.7; }
+
+.cr-sprite { display: flex; align-items: flex-end; justify-content: center; height: 44px; }
+.cr-sprite svg { display: block; image-rendering: pixelated; }
+
+.cr-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.cr-top { display: flex; align-items: center; gap: 10px; }
+.cr-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 13px; }
+.cr-mark { flex-shrink: 0; margin-left: auto; font-size: 13px; color: #7cc47f; }
+.cr-card[data-status="failed"] .cr-mark { color: #e06c6c; }
+.cr-card[data-status="running"] .cr-mark { width: 8px; height: 8px; border-radius: 50%; background: #3fa66b; box-shadow: 0 0 0 0 color-mix(in srgb, #3fa66b 60%, transparent); animation: cr-pulse 1.6s ease-out infinite; }
+@keyframes cr-pulse { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
+
+/* An arrow shows on hover, at the end of the title row, as the card's only sign it opens something. */
+button.cr-card .cr-top::after { content: '↗'; flex-shrink: 0; margin-left: -4px; color: var(--vscode-textLink-foreground); font-size: 12px; opacity: 0; transition: opacity 120ms ease; }
+button.cr-card:hover .cr-top::after, button.cr-card:focus-visible .cr-top::after { opacity: 1; }
+
+.cr-meta { display: flex; gap: 8px; font-size: 12px; color: var(--dim); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cr-role { color: var(--tier); font-weight: 600; }
+
+.cr-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
+.cr-step { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.cr-stats { flex-shrink: 0; color: var(--dim); font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
+
+.cr-bar { position: relative; height: 4px; margin-top: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
+.cr-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--tier); transition: width 400ms ease; }
+.cr-card[data-status="running"] .cr-fill { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 25%, transparent), transparent); background-size: 60px 100%; background-repeat: no-repeat; background-color: var(--tier); animation: cr-shine 1.8s linear infinite; }
+@keyframes cr-shine { from { background-position: -60px 0; } to { background-position: 260px 0; } }
+
+.cr-group { display: flex; flex-direction: column; gap: 4px; }
+.cr-group-label { color: var(--dim); font-size: 12px; padding: 4px 2px; cursor: default; list-style: none; }
+summary.cr-group-label { cursor: pointer; }
+summary.cr-group-label::before { content: '▾'; display: inline-block; width: 1.2em; transition: transform 120ms ease; }
+details:not([open]) > summary.cr-group-label::before { transform: rotate(-90deg); }
+summary.cr-group-label::-webkit-details-marker { display: none; }
+
+.cr-empty { margin: 0; color: var(--dim); font-size: 12px; }