@g3nomaly/g3n-mods 0.1.4 → 0.1.5

package/README.md

@@ -22,9 +22,9 @@ 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` | Adds each subagent to the agents panel as a crab with a hat: effort tier, model, steps, context, tokens, cost and time. Needs `agents-panel`, which installing it adds | `/agents-panel` |
+| `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. 25 minutes unless you pass a number | `/focus-mode [minutes] \| end` |
+| `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` |
@@ -35,7 +35,7 @@ For `agents-panel`, `context-bar` and `tool-timeline`, the command opens the pan
 
 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/custom-crab-agents/hooks/register.tsx

@@ -2,7 +2,7 @@
 import { atom, read, update } 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'
 
 /** The agents-panel mod's pane, which this mod depends on and draws its crabs into. */
 const PANEL = 'agents-panel'
@@ -13,19 +13,47 @@ 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 = [
@@ -38,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. */
@@ -60,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.
  *
@@ -128,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++) {
@@ -143,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>`
@@ -350,7 +415,60 @@ async function readWindow($: EngineInterface): Promise<void> {
 }
 
 /**
- * Registers this mod's session, tool, subagent and turn hooks, and its section of the agents panel.
+ * 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.
  */
@@ -406,10 +524,80 @@ export const register: Register = on => {
     return result
   }).catch(($, e, next) => next(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 } = $.ui.resolve(e)
+    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. */
@@ -427,14 +615,14 @@ export const register: Register = on => {
     /**
      * 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.
@@ -461,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
@@ -478,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">
@@ -510,7 +702,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('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>

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/focus-mode/hooks/register.tsx

@@ -8,8 +8,17 @@ const PANE = 'focus-mode'
 const TITLE = 'Focus'
 const block = atom({ plugin: 'focus-mode', key: 'block' } as const, null)
 const finished = atom({ plugin: 'focus-mode', key: 'finished' } as const, 0)
+const length = atom({ plugin: 'focus-mode', key: 'length' } as const, 0)
 
 const DEFAULT_MINUTES = 25
+
+/** Minutes the pane's − and + buttons move the block length by, and its bounds. */
+const STEP_MINUTES = 5
+const MIN_MINUTES = 5
+const MAX_MINUTES = 240
+
+/** Key in the plugin's store that remembers the chosen block length between sessions. */
+const LENGTH_KEY = 'minutes'
 const MAX_SQUARES = 30
 const FILLED = '#e6b450'
 const EMPTY = '#3a3f4b'
@@ -59,6 +68,18 @@ function squaresSvg(count: number, filled: number): string {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${size}" viewBox="0 0 ${width} ${size}">${rects.join('')}</svg>`
 }
 
+/**
+ * Sets the block length the pane's start button uses, for this session and later ones.
+ *
+ * @param $ - Engine handle the hook received, see `EngineInterface`.
+ * @param minutes - New length in minutes, kept within `MIN_MINUTES` and `MAX_MINUTES`.
+ */
+async function setLength($: EngineInterface, minutes: number): Promise<void> {
+  const kept = Math.min(MAX_MINUTES, Math.max(MIN_MINUTES, Math.round(minutes)))
+  await update($, length, () => kept)
+  await $.store.set(LENGTH_KEY, kept)
+}
+
 /**
  * Starts a block of `minutes`, replacing one already running, and shows the pane.
  *
@@ -130,9 +151,11 @@ export const register: Register = (on, options) => {
   const defaultMinutes = Number.isFinite(configured) && configured > 0 ? configured : DEFAULT_MINUTES
 
   on('session.start', async ($, e, next) => {
+    const remembered = Number(await $.store.get(LENGTH_KEY).catch(() => undefined))
+    await update($, length, () => (Number.isFinite(remembered) && remembered > 0 ? remembered : defaultMinutes))
     await $.command.register({
       name: 'focus-mode',
-      description: `Start a focus block (${defaultMinutes} min by default) in which Claude asks you nothing, or end the running one`,
+      description: 'Start a focus block in which Claude asks you nothing (the length you set, or the minutes given), or end the running one',
       argumentHint: '[minutes] | end',
     })
     void $.ui.open({ id: PANE, title: TITLE })
@@ -146,10 +169,13 @@ export const register: Register = (on, options) => {
       await endFocus($, false)
       return { text: 'Focus block ended.' }
     }
-    const minutes = arg === '' ? defaultMinutes : Number(arg)
+    const chosen = (await read($, length)) || defaultMinutes
+    const minutes = arg === '' ? chosen : Number(arg)
     if (!Number.isFinite(minutes) || minutes <= 0 || minutes > 600) {
       return { text: `"${arg}" is not a number of minutes. Use /focus-mode 25, or /focus-mode end.` }
     }
+    // A length typed with the command becomes the one the pane starts with next time.
+    if (arg !== '') await setLength($, minutes)
     await startFocus($, minutes)
     return { text: `Focus block started: ${minutes} min.` }
   })
@@ -179,10 +205,16 @@ export const register: Register = (on, options) => {
 
     if (current === null) {
       const done = await read($, finished)
+      const minutes = (await read($, length)) || defaultMinutes
       return (
-        <Box flexDirection="row" justifyContent="space-between" alignItems="center">
-          <Text dimColor>{done > 0 ? `${done} focus block${done === 1 ? '' : 's'} done this session.` : 'No focus block running.'}</Text>
-          <Button key="start" label={`start ${defaultMinutes} min`} variant="primary" onPress={() => startFocus($, defaultMinutes)} />
+        <Box flexDirection="row" justifyContent="space-between" alignItems="center" columnGap={2}>
+          <Text dimColor wrap="truncate-end">{done > 0 ? `${done} focus block${done === 1 ? '' : 's'} done this session.` : 'No focus block running.'}</Text>
+          <Box flexDirection="row" alignItems="center" columnGap={1}>
+            <Button key="shorter" label="−" onPress={() => setLength($, minutes - STEP_MINUTES)} />
+            <Text bold>{minutes} min</Text>
+            <Button key="longer" label="+" onPress={() => setLength($, minutes + STEP_MINUTES)} />
+            <Button key="start" label="start" variant="primary" onPress={() => startFocus($, minutes)} />
+          </Box>
         </Box>
       )
     }

package/mods/focus-mode/types/index.d.ts

@@ -9,6 +9,6 @@ export type FocusBlock = {
 
 declare module 'claude-code' {
   interface PluginState {
-    'focus-mode': { block: FocusBlock | null; finished: number }
+    'focus-mode': { block: FocusBlock | null; finished: number; length: number }
   }
 }

package/mods/tool-timeline/hooks/register.tsx

@@ -37,6 +37,9 @@ const IDLE_MS = 200
 /** Most characters of a call's input the hover card keeps. */
 const DETAIL_MAX = 2000
 
+/** Most characters of a call's label kept; the pane cuts it to one line anyway. */
+const LABEL_MAX = 200
+
 /** Input fields that say most about a call, tried in order. */
 const LABEL_FIELDS = ['command', 'file_path', 'notebook_path', 'pattern', 'url', 'query', 'description', 'skill', 'prompt'] as const
 
@@ -62,10 +65,10 @@ export function labelOf(input: Record<string, unknown>): string {
     const value = input[field]
     if (typeof value !== 'string' || value.length === 0) continue
     const text = field === 'file_path' || field === 'notebook_path' ? value.split('/').pop() ?? value : value
-    return text.replace(/\s+/g, ' ').trim()
+    return text.replace(/\s+/g, ' ').trim().slice(0, LABEL_MAX)
   }
   const first = Object.values(input).find((value): value is string => typeof value === 'string')
-  return first?.replace(/\s+/g, ' ').trim() ?? ''
+  return first?.replace(/\s+/g, ' ').trim().slice(0, LABEL_MAX) ?? ''
 }
 
 /**
@@ -331,7 +334,7 @@ export const register: Register = on => {
     // One line per call; the keyed row reveals a card with the call's whole input while the pointer is on it.
     const rows = shown.map((call, index) => (
       <Box key={call.id} flexDirection="row" columnGap={1}>
-        <Text bold color={CARD} backgroundColor={colorOf(call.tool)}> {badgeOf(call.tool)} </Text>
+        <Text bold color={CARD} backgroundColor={colorOf(call.tool)}>{e.surface === 'terminal' ? ` ${badgeOf(call.tool)} ` : badgeOf(call.tool)}</Text>
         <Box width={labelCells}>
           <Text wrap="truncate-end" strikethrough={call.status === 'denied'} color={call.status === 'denied' ? ERROR : undefined}>
             {call.agentId === undefined ? '' : '↳ '}{call.tool} <Text dimColor>{call.label}</Text>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g3nomaly/g3n-mods",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "The g3n Claude Code mods: panes, status lines, commands and hooks, installed with @g3nomaly/mods.",
   "type": "module",
   "files": [