@g3nomaly/g3n-mods 0.0.0-stage → 0.1.1

package/mods/context-bar/hooks/register.tsx

@@ -0,0 +1,215 @@
+// packages/g3n-mods/mods/context-bar/hooks/register.tsx
+import { atom, read, update } from 'claude-code'
+import type { EngineInterface, Register } from 'claude-code'
+
+import type { ContextRow, ContextSnapshot } from '../types'
+
+const PANE = 'context-bar'
+const TITLE = 'Context'
+const snapshot = atom({ plugin: 'context-bar', key: 'snapshot' } as const, null)
+
+/** Fewest milliseconds between two measurements; measure events in between fold into one. */
+const MEASURE_GAP_MS = 2000
+
+/** Approximate pixel width of one cell of the editor's code font. */
+const CELL_PX = 7
+
+const FREE_COLOR = '#2b3240'
+const MARKER_COLOR = '#e6c167'
+
+/** Bar label and color per source, matched against the engine's category names in order. */
+const SOURCES: ReadonlyArray<{ match: RegExp; label: string; color: string }> = [
+  { match: /system prompt/i, label: 'system prompt', color: '#6b8fd6' },
+  { match: /mcp/i, label: 'mcp tools', color: '#9b87f5' },
+  { match: /tool/i, label: 'tools', color: '#5fb3c4' },
+  { match: /agent/i, label: 'agents', color: '#7cc47f' },
+  { match: /memory/i, label: 'memory files', color: '#e6c167' },
+  { match: /skill/i, label: 'skills', color: '#f09bb5' },
+  { match: /message/i, label: 'messages', color: '#e0775a' },
+]
+
+/**
+ * Formats a token count the way the bar labels it, with `k` and `M` suffixes.
+ *
+ * @param tokens - Token count, e.g. `52000`.
+ * @returns Short label, e.g. `892`, `4.2k`, `52k` or `1M`.
+ */
+export function formatTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${+(tokens / 1_000_000).toFixed(1)}M`
+  if (tokens >= 10_000) return `${Math.round(tokens / 1000)}k`
+  if (tokens >= 1000) return `${+(tokens / 1000).toFixed(1)}k`
+  return String(Math.round(tokens))
+}
+
+/**
+ * Rounds `part` as a percent of `whole`.
+ *
+ * @returns The rounded percent, or `0` when `whole` is not positive.
+ */
+function percentOf(part: number, whole: number): number {
+  return whole > 0 ? Math.round((part / whole) * 100) : 0
+}
+
+/**
+ * @brief Measures the context window by source.
+ *
+ * Categories of the same source add up into one row; deferred tools and the
+ * compaction buffer are left out.
+ *
+ * @param $ - Engine handle the hook received, see `EngineInterface`.
+ * @returns The snapshot, or `null` before the session has measured anything.
+ */
+async function measure($: EngineInterface): Promise<ContextSnapshot | null> {
+  const usage = await $.session.usage({ breakdown: 'summary' })
+  const breakdown = usage.context.breakdown
+  if (breakdown === undefined) return null
+
+  const rows: ContextRow[] = SOURCES.map(source => ({ label: source.label, tokens: 0, color: source.color }))
+  let free = 0
+  for (const category of breakdown.categories) {
+    if (category.kind === 'free') free += category.tokens
+    if (category.kind !== 'used') continue
+    const index = SOURCES.findIndex(source => source.match.test(category.name))
+    const row = index === -1 ? undefined : rows[index]
+    if (row !== undefined) row.tokens += category.tokens
+  }
+
+  return {
+    rows: [...rows, { label: 'free', tokens: free, color: FREE_COLOR }],
+    used: breakdown.totalTokens,
+    window: breakdown.rawMaxTokens,
+    compactAt: breakdown.isAutoCompactEnabled ? breakdown.autoCompactThreshold : undefined,
+    measuredAt: await $.clock.now(),
+  }
+}
+
+/**
+ * The bar as one SVG: a rect per source, the free remainder, and a mark at the compaction point.
+ *
+ * @param snap - Snapshot to draw, see `ContextSnapshot`.
+ * @param width - Width of the SVG in pixels.
+ * @returns The SVG markup as a string.
+ */
+function barSvg(snap: ContextSnapshot, width: number): string {
+  const height = 14
+  let x = 0
+  const rects = snap.rows.map(row => {
+    const w = snap.window > 0 ? (row.tokens / snap.window) * width : 0
+    const rect = `<rect x="${x.toFixed(2)}" y="0" width="${w.toFixed(2)}" height="${height}" fill="${row.color}"/>`
+    x += w
+    return rect
+  })
+  const marker = snap.compactAt === undefined || snap.window === 0
+    ? ''
+    : `<rect x="${Math.min(width - 2, (snap.compactAt / snap.window) * width).toFixed(2)}" y="0" width="2" height="${height}" fill="${MARKER_COLOR}"/>`
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect width="${width}" height="${height}" rx="3" fill="${FREE_COLOR}"/>${rects.join('')}${marker}</svg>`
+}
+
+let lastMeasured = 0
+let isScheduled = false
+
+/**
+ * Measures now, or once the gap since the last measurement has passed; calls in between fold into one.
+ *
+ * @param $ - Engine handle the hook received, see `EngineInterface`.
+ */
+async function refresh($: EngineInterface): Promise<void> {
+  const now = await $.clock.now()
+  const wait = lastMeasured + MEASURE_GAP_MS - now
+  if (wait > 0) {
+    if (isScheduled) return
+    isScheduled = true
+    $.clock.after(wait, () => {
+      isScheduled = false
+      void refresh($)
+    })
+    return
+  }
+  lastMeasured = now
+  const snap = await measure($).catch(() => null)
+  if (snap !== null) await update($, snapshot, () => snap)
+}
+
+/**
+ * Registers this mod's `context-bar` command, its session, measure and turn hooks, and its pane.
+ *
+ * @param on - Hook registration function the engine passes in.
+ */
+export const register: Register = on => {
+  on('session.start', async ($, e, next) => {
+    await $.command.register({ name: 'context-bar', description: 'Show or hide the context window bar' })
+    void $.ui.open({ id: PANE, title: TITLE })
+    void refresh($)
+    return next(e)
+  })
+
+  on('command.run', { command: 'context-bar' }, async $ => {
+    const isOpen = (await $.ui.panes()).some(pane => pane.id === PANE)
+    if (isOpen) {
+      await $.ui.close({ id: PANE })
+      return { text: 'Context bar hidden.' }
+    }
+    await $.ui.open({ id: PANE, title: TITLE })
+    await refresh($)
+    return { text: 'Context bar shown.' }
+  })
+
+  on('session.measure', async ($, e, next) => {
+    const result = await next(e)
+    void refresh($)
+    return result
+  })
+
+  on('turn.complete', async ($, e, next) => {
+    const result = await next(e)
+    if (e.agentId === undefined) void refresh($)
+    return result
+  })
+
+  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
+    const snap = await read($, snapshot)
+    const { Box, Text } = $.ui.resolve(e)
+    if (snap === null) return <Text dimColor>No context measured yet. It fills in after the first reply.</Text>
+
+    const columns = Math.max(24, e.props.bodyColumns)
+    const used = percentOf(snap.used, snap.window)
+    const compacts = snap.compactAt === undefined ? '' : ` · compacts at ${formatTokens(snap.compactAt)}`
+
+    let bar
+    if (e.surface === 'terminal') {
+      const cells = snap.rows.map(row => ({ row, n: Math.round((row.tokens / Math.max(1, snap.window)) * columns) }))
+      bar = <Text>{cells.map(({ row, n }) => <Text color={row.color}>{'█'.repeat(n)}</Text>)}</Text>
+    } else {
+      const { Svg } = $.ui.resolve(e)
+      const width = columns * CELL_PX
+      bar = <Svg source={barSvg(snap, width)} alt={`context ${used}% used`} width={width} height={14} />
+    }
+
+    return (
+      <Box flexDirection="column" gap={1}>
+        <Box flexDirection="row" justifyContent="space-between">
+          <Text>
+            <Text color="#e0775a">◆ </Text>
+            <Text bold>context window</Text>
+          </Text>
+          <Text>
+            <Text bold>{formatTokens(snap.used)}</Text>
+            <Text dimColor> of {formatTokens(snap.window)}{compacts} </Text>
+            <Text bold color="#9be39f" backgroundColor="#2f4a33"> {used}% </Text>
+          </Text>
+        </Box>
+        {bar}
+        <Box flexDirection="row" flexWrap="wrap" columnGap={3}>
+          {snap.rows.map(row => (
+            <Text>
+              <Text color={row.color}>■ </Text>
+              <Text dimColor={row.label === 'free'}>{row.label} </Text>
+              <Text bold={row.label !== 'free'} dimColor={row.label === 'free'}>{formatTokens(row.tokens)}</Text>
+              {row.label === 'free' ? '' : <Text dimColor> {percentOf(row.tokens, snap.window)}%</Text>}
+            </Text>
+          ))}
+        </Box>
+      </Box>
+    )
+  })
+}

package/mods/context-bar/types/index.d.ts

@@ -0,0 +1,25 @@
+// packages/g3n-mods/mods/context-bar/types/index.d.ts
+
+/** One source of context use as the bar draws it, e.g. `{ label: "mcp tools", tokens: 52000, color: "#9b87f5" }`. */
+export type ContextRow = {
+  label: string
+  tokens: number
+  color: string
+}
+
+/** The context window as last measured: what each source uses, the window and where compaction runs. */
+export type ContextSnapshot = {
+  rows: ContextRow[]
+  used: number
+  window: number
+  /** Token count at which auto-compaction runs; absent when it is off */
+  compactAt?: number
+  /** Milliseconds since the epoch */
+  measuredAt: number
+}
+
+declare module 'claude-code' {
+  interface PluginState {
+    'context-bar': { snapshot: ContextSnapshot | null }
+  }
+}

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

@@ -0,0 +1,9 @@
+{
+  "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.",
+  "author": {
+    "name": "g3ntrovert"
+  },
+  "types": "./types/index.d.ts"
+}

package/mods/custom-crab-agents/hooks/hooks.json

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