@openparachute/agent 0.1.0

package/docs/post-night-rebirth-reflections.md

@@ -0,0 +1,151 @@
+# Post-night reflections — paraclaw rebirth
+
+A short retrospective written the morning after `night/paraclaw-rebirth` landed.
+The branch carried roughly seven mergeable PRs plus a handful of merges from
+sibling subtrees (`night/server`, `night/ui`, `night/arch`), and ended up
+absorbing the OneCLI debrand, the AES-GCM secrets cutover, the activity log,
+the OAuth-apps scaffold, and the host-side MCP server. The point of this note
+is not to inventory what shipped — `git log` does that — but to say what the
+process actually felt like, which parts of it earned their keep, and where the
+next push should aim.
+
+## A. What worked well
+
+**Tentacle-per-repo stewardship paid off as soon as the merge train started
+moving.** Each PR had a single steward who could read the diff cold without
+needing to be re-briefed on what `inbound.db` was or why the secret-assignment
+table didn't get folded into `agent_groups`. When PR #2's UI-side polish ran
+into a missing `assignedMode` field on `/api/secrets`, the fix landed as
+`38aa7cf feat(server): surface assignedMode on /api/secrets responses` from
+the server tentacle within the same merge window — without a context handoff
+or a re-litigation of the contract. The cohesive-PR rule meant the migration
+file, the API surface, and the UI consumer were all in the same diff, so the
+ack-loop between tentacles was tight.
+
+**Three-tier governance held under load.** The reviewer-then-team-lead-then-Aaron
+chain was tested seven times in close succession, and the failure mode that
+governance is supposed to prevent — an automated merge that nobody actually
+read — never occurred. Even the hotfix PR (#16, the localhost translation)
+went through the same three gates. The cost of the discipline was small:
+maybe a minute per PR for the human click. The benefit shows up in the kind
+of bug that *didn't* land — there's no record of a regression PR, no revert
+commit on the branch.
+
+**The serial merge train, with #1→#2→#3→#4→#7→#5→#16→#6 in order, prevented
+the migration-index collision class entirely.** Every PR that touched
+`src/db/migrations/index.ts` was the only PR in flight that touched it at
+that moment. Migration `019_…` slotted in cleanly because `018_…` had already
+landed and been numbered. The earlier-era pattern of "open three migration
+PRs in parallel and resolve numbering at the end" would have been
+correspondingly painful — this branch demonstrated empirically that the
+serial-train cost (waiting your turn) is cheaper than the parallel-merge cost
+(rebasing migrations against a moving target).
+
+**The /spawn → /report → /loop cadence kept the human out of the inner loop
+without losing the human review at the outer loop.** Aaron didn't have to
+remember which tentacle was on which PR; the dashboard showed it. Tentacles
+didn't have to ask permission to read files or run tests; they just did. The
+moments Aaron *did* show up — the merge clicks, the redirect on PR #7 about
+the mount-aware OAuth callback URI — were the moments where his judgment was
+actually load-bearing. That ratio is the right one.
+
+## B. Friction worth fixing
+
+**The localhost-translation bug (#16) is the most interesting friction
+point — not because of when it landed, but because of how it was found.**
+#16 landed just before #6, so the host-side MCP server got the fix on
+landing; that part of the sequencing was clean. The friction is that the
+architectural gap (a `url: http://localhost:1939/mcp` baked into
+`container.json` is unreachable from inside the container, because
+container-loopback is not host-loopback) was latent through every prior
+MCP-server attach paraclaw had ever done, and would still be latent today
+if a real techne agent hadn't tripped over it trying to call its vault. The fix in `src/parachute/vault-mcp.ts:65–81` is
+clean — translate at spawn time, leave the on-disk URL operator-facing — but
+the *detection* came late.
+
+The lesson is not "write more tests"; it's that paraclaw lacks an
+operator-facing surface that says "here is what this container can actually
+reach." A `/api/groups/<id>/diagnose` endpoint that, at session-spawn time,
+ran a synthetic curl from inside the container against every MCP URL would
+have caught this on the first attached vault, before any agent message round-tripped.
+The same surface would catch DNS, TLS, and missing-auth-header failures —
+all in the same shape. This is the kind of thing the setup wizard
+(`web/ui/src/routes/SetupWizard.tsx:23`) should be growing toward; right now
+it walks the operator through configuration, but it doesn't *prove*
+configuration. Proving it would shift a class of bugs from
+"reported-by-confused-user" to "caught-at-attach-time."
+
+**Version skew between npm-published and locally-linked packages bit
+twice.** The vault-routing pluralization issue earlier in the cycle (vault
+exposing `notes/by-tag/:tag` while paraclaw's vault MCP integration assumed
+`note/by-tag/:tag`) was an avoidable consequence of two repos shipping
+independently with no schema-pinning between them. The night's fix was
+ad-hoc; the structural fix is to either (a) pin paraclaw to a specific
+parachute-vault version and lockstep them, or (b) treat the vault MCP surface
+as an external API and version it with a content-negotiation header. We've
+been operating as if both repos are pre-1.0 enough to be "just keep them in
+sync mentally," but the empirical record says we drift faster than mental
+sync can keep up.
+
+**The reviewer hit usage limits mid-review on at least one of the larger
+PRs.** That's not a process bug per se, but it's a signal that some PRs are
+too large for a single review session even with cohesive-PR discipline.
+The OAuth-apps PR (#7) was the worst offender — it spanned a migration, four
+new endpoints, the OAuth flow, the redirect-URI plumbing, and the
+mount-aware callback handling. In retrospect, splitting it into "OAuth state
+table + scaffolding" then "Google provider" would have kept each review
+under the limit and exposed the provider abstraction earlier.
+
+**`c854dc2 fix(web): restore wire-channel route (was dropped in web-merge)`
+is a quiet warning.** A route was silently dropped during a subtree merge
+and only noticed when the UI lost a feature. The recovery was easy; the
+detection was not — there's no test that says "the wire-channel route
+exists." Smoke tests at the route level (mount the SPA in test mode, walk
+the router tree, assert each known route responds 200) would catch
+silent-drop bugs in the cheapest possible way.
+
+## C. Where paraclaw goes next
+
+**The natural next step after the host-side MCP server is the second
+tentacle of self-modification.** Today the agent can install packages and
+add MCP servers via approval-gated tools (`container/agent-runner/src/mcp-tools/self-mod.ts`).
+The absent tier is direct source-level edits — the agent draftng a change
+to its own `CLAUDE.md`, its own skills, or even its own host code, and the
+draft entering the same approval flow that vault attach goes through. The
+scaffolding is mostly there: `pending_approvals`, the approver-routing in
+`src/modules/approvals/primitive.ts`, the decide endpoint at
+`/api/approvals/:id/decide`. What's missing is the diff-presentation surface
+in the UI (we have an approval card, but it shows a JSON payload — for
+source edits we want a syntax-highlighted diff) and a sandboxed "apply this
+draft to a throwaway worktree, run tests, present the result" step before
+the human ever sees the approval card.
+
+**OAuth providers beyond Google are the next obvious extension after PR #5,
+and the abstraction is currently thin.** The `oauthTools` in
+`src/mcp/tools/oauth.ts` and the `/claw/apps` UI route are Google-shaped in
+their assumptions (PKCE, the specific scope strings, the callback contract).
+A second provider — Notion, Linear, GitHub — will reveal which of those
+assumptions are actually generic and which are accidentally Google. Doing
+the second provider sooner rather than later is the cheapest way to find
+out.
+
+**Pre-1.0 structural simplifications already flagged in
+`docs/fresh-start-thinking.md` (drafted on `research/fresh-start-thinking`,
+not yet merged) are the right size for this window.** Move
+`assigned_mode` from `secrets` to `agent_groups` (so the assignment lives
+where the consumer is, not where the producer is). Drop `secrets.host_pattern`
+— it was an OneCLI-era idea that paraclaw never used. Consolidate
+`pending_questions` and `pending_approvals` into one table with a `kind`
+column — the divergence is purely historical. Retire the `v2-sessions`
+naming on the filesystem; we are no longer "v2 of nano-claw," we are
+paraclaw. None of these are urgent; all of them get more expensive the
+longer we wait.
+
+**The single thing I would not do next is add another channel adapter.**
+We have over a dozen on the `channels` branch, the install skills are
+stable, and the marginal value of the next one is low compared to closing
+the self-modification loop or proving the OAuth abstraction. The temptation is
+strong because new channels are crowd-pleasers, but the right move is to
+deepen what's there.
+
+— paraclaw-research, 2026-04-28

package/eslint.config.js

@@ -0,0 +1,32 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import noCatchAll from 'eslint-plugin-no-catch-all'
+
+export default [
+  { ignores: ['node_modules/', 'dist/', 'container/', 'groups/'] },
+  { files: ['src/**/*.{js,ts}'] },
+  { languageOptions: { globals: globals.node } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: { 'no-catch-all': noCatchAll },
+    rules: {
+      'preserve-caught-error': ['error', { requireCatchParameter: true }],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      'no-catch-all/no-catch-all': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+]

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@openparachute/agent",
+  "version": "0.1.0",
+  "description": "Parachute Agent — per-session containerized AI agent companion.",
+  "type": "module",
+  "packageManager": "pnpm@10.33.0",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "tsc",
+    "start": "bun src/index.ts",
+    "dev": "bun --hot src/index.ts",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:fix": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "prepare": "husky",
+    "parachute": "bun scripts/parachute.ts",
+    "build:spa": "cd web/ui && pnpm install --frozen-lockfile --ignore-workspace && pnpm build",
+    "postinstall": "if [ -d web/ui ]; then pnpm run build:spa; fi",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@chat-adapter/discord": "4.26.0",
+    "@chat-adapter/telegram": "4.26.0",
+    "@clack/core": "^1.2.0",
+    "@clack/prompts": "^1.2.0",
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "chat": "^4.24.0",
+    "cron-parser": "5.5.0",
+    "jose": "^6.2.2",
+    "kleur": "^4.1.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.35.0",
+    "@types/better-sqlite3": "^7.6.12",
+    "@types/node": "^22.10.0",
+    "better-sqlite3": "11.10.0",
+    "bun-types": "^1.3.13",
+    "eslint": "^9.35.0",
+    "eslint-plugin-no-catch-all": "^1.1.0",
+    "globals": "^15.12.0",
+    "husky": "^9.1.7",
+    "prettier": "^3.8.1",
+    "typescript": "^5.7.0",
+    "typescript-eslint": "^8.35.0",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "bun": ">=1.3"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,8 @@
+onlyBuiltDependencies:
+  - better-sqlite3
+  - esbuild
+  - protobufjs
+  - sharp
+
+pnpm:
+  minimumReleaseAge: 4320

package/repo-tokens/README.md

@@ -0,0 +1,113 @@
+# Repo Tokens
+
+A GitHub Action that calculates the size of your codebase in terms of tokens and updates a badge in your README.
+
+<p>
+  <img src="examples/green.svg" alt="tokens 12.4k">&nbsp;
+  <img src="examples/yellow-green.svg" alt="tokens 74.8k">&nbsp;
+  <img src="examples/yellow.svg" alt="tokens 120k">&nbsp;
+  <img src="examples/red.svg" alt="tokens 158k">
+</p>
+
+## Usage
+
+```yaml
+- uses: qwibitai/nanoclaw/repo-tokens@v1
+  with:
+    include: 'src/**/*.ts'
+    exclude: 'src/**/*.test.ts'
+```
+
+This counts tokens using [tiktoken](https://github.com/openai/tiktoken) and writes the result between HTML comment markers in your README:
+
+The badge color reflects what percentage of an LLMs context window the codebase fills (context window size is configurable, defaults to 200k which is the size of Claude Opus). Green for under 30%, yellow-green for 30%-50%, yellow for 50%-70%, red for 70%+.
+
+## Why
+
+Small codebases were always a good thing. With coding agents, there's now a huge advantage to having a codebase small enough that an agent can hold the full thing in context.
+
+This badge gives some indication of how easy it will be to work with an agent on the codebase, and will hopefully be a visual reminder to avoid bloat.
+
+## Examples
+
+Repos using repo-tokens:
+
+| Repo | Badge |
+|------|-------|
+| [NanoClaw](https://github.com/qwibitai/NanoClaw) | ![tokens](https://raw.githubusercontent.com/qwibitai/NanoClaw/main/repo-tokens/badge.svg) |
+
+### Full workflow example
+
+```yaml
+name: Update token count
+
+on:
+  push:
+    branches: [main]
+    paths: ['src/**']
+
+permissions:
+  contents: write
+
+jobs:
+  update-tokens:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+
+      - uses: qwibitai/nanoclaw/repo-tokens@v1
+        id: tokens
+        with:
+          include: 'src/**/*.ts'
+          exclude: 'src/**/*.test.ts'
+          badge-path: '.github/badges/tokens.svg'
+
+      - name: Commit if changed
+        run: |
+          git add README.md .github/badges/tokens.svg
+          git diff --cached --quiet && exit 0
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git commit -m "docs: update token count to ${{ steps.tokens.outputs.badge }}"
+          git push
+```
+
+### README setup
+
+Add markers where you want the token count text to appear:
+
+```html
+<!-- token-count --><!-- /token-count -->
+```
+
+The action replaces everything between the markers with the token count.
+
+## Inputs
+
+| Input | Default | Description |
+|-------|---------|-------------|
+| `include` | *required* | Glob patterns for files to count (space-separated) |
+| `exclude` | `''` | Glob patterns to exclude (space-separated) |
+| `context-window` | `200000` | Context window size for percentage calculation |
+| `readme` | `README.md` | Path to README file |
+| `encoding` | `cl100k_base` | Tiktoken encoding name |
+| `marker` | `token-count` | HTML comment marker name |
+| `badge-path` | `''` | Path to write SVG badge (empty = no SVG) |
+
+## Outputs
+
+| Output | Description |
+|--------|-------------|
+| `tokens` | Total token count (e.g., `34940`) |
+| `percentage` | Percentage of context window (e.g., `17`) |
+| `badge` | The formatted text that was inserted (e.g., `34.9k tokens · 17% of context window`) |
+
+## How it works
+
+Composite GitHub Action. Installs tiktoken, runs ~60 lines of inline Python. Takes about 10 seconds.
+
+The action counts tokens and updates the README but does not commit. Your workflow decides the git strategy.

package/repo-tokens/action.yml

@@ -0,0 +1,186 @@
+name: Repo Tokens
+description: Count codebase tokens with tiktoken and update a README badge
+
+inputs:
+  include:
+    description: 'Glob patterns for files to count (space-separated)'
+    required: true
+  exclude:
+    description: 'Glob patterns to exclude (space-separated)'
+    required: false
+    default: ''
+  context-window:
+    description: 'Context window size for percentage calculation'
+    required: false
+    default: '200000'
+  readme:
+    description: 'Path to README file'
+    required: false
+    default: 'README.md'
+  encoding:
+    description: 'Tiktoken encoding name'
+    required: false
+    default: 'cl100k_base'
+  marker:
+    description: 'HTML comment marker name'
+    required: false
+    default: 'token-count'
+  badge-path:
+    description: 'Path to write SVG badge (empty = no SVG)'
+    required: false
+    default: ''
+
+outputs:
+  tokens:
+    description: 'Total token count'
+    value: ${{ steps.count.outputs.tokens }}
+  percentage:
+    description: 'Percentage of context window'
+    value: ${{ steps.count.outputs.percentage }}
+  badge:
+    description: 'Badge text that was inserted'
+    value: ${{ steps.count.outputs.badge }}
+
+runs:
+  using: composite
+  steps:
+    - name: Install tiktoken
+      shell: bash
+      run: pip install tiktoken
+
+    - name: Count tokens and update README
+      id: count
+      shell: python
+      env:
+        INPUT_INCLUDE: ${{ inputs.include }}
+        INPUT_EXCLUDE: ${{ inputs.exclude }}
+        INPUT_CONTEXT_WINDOW: ${{ inputs.context-window }}
+        INPUT_README: ${{ inputs.readme }}
+        INPUT_ENCODING: ${{ inputs.encoding }}
+        INPUT_MARKER: ${{ inputs.marker }}
+        INPUT_BADGE_PATH: ${{ inputs.badge-path }}
+      run: |
+        import glob, os, re, tiktoken
+
+        include_patterns = os.environ["INPUT_INCLUDE"].split()
+        exclude_patterns = os.environ["INPUT_EXCLUDE"].split()
+        context_window = int(os.environ["INPUT_CONTEXT_WINDOW"])
+        readme_path = os.environ["INPUT_README"]
+        encoding_name = os.environ["INPUT_ENCODING"]
+        marker = os.environ["INPUT_MARKER"]
+        badge_path = os.environ.get("INPUT_BADGE_PATH", "").strip()
+
+        # Expand globs
+        included = set()
+        for pattern in include_patterns:
+            included.update(glob.glob(pattern, recursive=True))
+
+        excluded = set()
+        for pattern in exclude_patterns:
+            excluded.update(glob.glob(pattern, recursive=True))
+
+        files = sorted(included - excluded)
+        files = [f for f in files if os.path.isfile(f)]
+
+        # Count tokens
+        enc = tiktoken.get_encoding(encoding_name)
+        total = 0
+        for path in files:
+            try:
+                with open(path, "r", encoding="utf-8", errors="ignore") as f:
+                    total += len(enc.encode(f.read()))
+            except Exception as e:
+                print(f"Skipping {path}: {e}")
+
+        # Format
+        if total >= 100000:
+            display = f"{round(total / 1000)}k"
+        elif total >= 1000:
+            display = f"{total / 1000:.1f}k"
+        else:
+            display = str(total)
+
+        pct = round(total / context_window * 100)
+        badge = f"{display} tokens \u00b7 {pct}% of context window"
+
+        print(f"Files: {len(files)}, Tokens: {total}, Badge: {badge}")
+
+        # Update README (text between markers)
+        marker_re = re.compile(
+            rf"(<!--\s*{re.escape(marker)}\s*-->).*?(<!--\s*/{re.escape(marker)}\s*-->)",
+            re.DOTALL,
+        )
+
+        with open(readme_path, "r", encoding="utf-8") as f:
+            content = f.read()
+
+        repo_tokens_url = "https://github.com/qwibitai/nanoclaw/tree/main/repo-tokens"
+        linked_badge = f'<a href="{repo_tokens_url}">{badge}</a>'
+        new_content = marker_re.sub(rf"\1{linked_badge}\2", content)
+
+        if new_content != content:
+            with open(readme_path, "w", encoding="utf-8") as f:
+                f.write(new_content)
+            print("README updated")
+        else:
+            print("No change to README")
+
+        # Generate SVG badge
+        if badge_path:
+            label_text = "tokens"
+            value_text = display
+            full_desc = f"{display} tokens, {pct}% of context window"
+
+            cw = 7.0
+            label_w = round(len(label_text) * cw) + 10
+            value_w = round(len(value_text) * cw) + 10
+            total_w = label_w + value_w
+
+            if pct < 30:
+                color = "#4c1"
+            elif pct < 50:
+                color = "#97ca00"
+            elif pct < 70:
+                color = "#dfb317"
+            else:
+                color = "#e05d44"
+
+            lx = label_w // 2
+            vx = label_w + value_w // 2
+
+            repo_tokens_url = "https://github.com/qwibitai/nanoclaw/tree/main/repo-tokens"
+
+            svg = f'''<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{total_w}" height="20" role="img" aria-label="{full_desc}">
+          <title>{full_desc}</title>
+          <linearGradient id="s" x2="0" y2="100%">
+            <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+            <stop offset="1" stop-opacity=".1"/>
+          </linearGradient>
+          <clipPath id="r">
+            <rect width="{total_w}" height="20" rx="3" fill="#fff"/>
+          </clipPath>
+          <a xlink:href="{repo_tokens_url}">
+            <g clip-path="url(#r)">
+              <rect width="{label_w}" height="20" fill="#555"/>
+              <rect x="{label_w}" width="{value_w}" height="20" fill="{color}"/>
+              <rect width="{total_w}" height="20" fill="url(#s)"/>
+              <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+                <text aria-hidden="true" x="{lx}" y="15" fill="#010101" fill-opacity=".3">{label_text}</text>
+                <text x="{lx}" y="14">{label_text}</text>
+                <text aria-hidden="true" x="{vx}" y="15" fill="#010101" fill-opacity=".3">{value_text}</text>
+                <text x="{vx}" y="14">{value_text}</text>
+              </g>
+            </g>
+          </a>
+        </svg>'''
+
+            os.makedirs(os.path.dirname(badge_path) or ".", exist_ok=True)
+            with open(badge_path, "w", encoding="utf-8") as f:
+                f.write(svg)
+            print(f"Badge SVG written to {badge_path}")
+
+        # Set outputs
+        with open(os.environ["GITHUB_OUTPUT"], "a") as f:
+            f.write(f"tokens={total}\n")
+            f.write(f"percentage={pct}\n")
+            f.write(f"badge={badge}\n")

package/repo-tokens/badge.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="20" role="img" aria-label="132k tokens, 66% of context window">
+  <title>132k tokens, 66% of context window</title>
+  <linearGradient id="s" x2="0" y2="100%">
+    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <clipPath id="r">
+    <rect width="90" height="20" rx="3" fill="#fff"/>
+  </clipPath>
+  <a xlink:href="https://github.com/qwibitai/nanoclaw/tree/main/repo-tokens">
+    <g clip-path="url(#r)">
+      <rect width="52" height="20" fill="#555"/>
+      <rect x="52" width="38" height="20" fill="#dfb317"/>
+      <rect width="90" height="20" fill="url(#s)"/>
+      <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+        <text aria-hidden="true" x="26" y="15" fill="#010101" fill-opacity=".3">tokens</text>
+        <text x="26" y="14">tokens</text>
+        <text aria-hidden="true" x="71" y="15" fill="#010101" fill-opacity=".3">132k</text>
+        <text x="71" y="14">132k</text>
+      </g>
+    </g>
+  </a>
+</svg>

package/repo-tokens/examples/green.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20" role="img" aria-label="12.4k tokens">
+  <title>12.4k tokens</title>
+  <linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>
+  <clipPath id="r"><rect width="97" height="20" rx="3"/></clipPath>
+  <g clip-path="url(#r)">
+    <rect width="52" height="20" fill="#555"/>
+    <rect x="52" width="45" height="20" fill="#4c1"/>
+    <rect width="97" height="20" fill="url(#s)"/>
+    <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+      <text x="26" y="15" fill="#010101" fill-opacity=".3">tokens</text><text x="26" y="14">tokens</text>
+      <text x="74" y="15" fill="#010101" fill-opacity=".3">12.4k</text><text x="74" y="14">12.4k</text>
+    </g>
+  </g>
+</svg>

package/repo-tokens/examples/red.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="20" role="img" aria-label="158k tokens">
+  <title>158k tokens</title>
+  <linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>
+  <clipPath id="r"><rect width="90" height="20" rx="3"/></clipPath>
+  <g clip-path="url(#r)">
+    <rect width="52" height="20" fill="#555"/>
+    <rect x="52" width="38" height="20" fill="#e05d44"/>
+    <rect width="90" height="20" fill="url(#s)"/>
+    <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+      <text x="26" y="15" fill="#010101" fill-opacity=".3">tokens</text><text x="26" y="14">tokens</text>
+      <text x="71" y="15" fill="#010101" fill-opacity=".3">158k</text><text x="71" y="14">158k</text>
+    </g>
+  </g>
+</svg>

package/repo-tokens/examples/yellow-green.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20" role="img" aria-label="74.8k tokens">
+  <title>74.8k tokens</title>
+  <linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>
+  <clipPath id="r"><rect width="97" height="20" rx="3"/></clipPath>
+  <g clip-path="url(#r)">
+    <rect width="52" height="20" fill="#555"/>
+    <rect x="52" width="45" height="20" fill="#97ca00"/>
+    <rect width="97" height="20" fill="url(#s)"/>
+    <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+      <text x="26" y="15" fill="#010101" fill-opacity=".3">tokens</text><text x="26" y="14">tokens</text>
+      <text x="74" y="15" fill="#010101" fill-opacity=".3">74.8k</text><text x="74" y="14">74.8k</text>
+    </g>
+  </g>
+</svg>

package/repo-tokens/examples/yellow.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="20" role="img" aria-label="120k tokens">
+  <title>120k tokens</title>
+  <linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient>
+  <clipPath id="r"><rect width="90" height="20" rx="3"/></clipPath>
+  <g clip-path="url(#r)">
+    <rect width="52" height="20" fill="#555"/>
+    <rect x="52" width="38" height="20" fill="#dfb317"/>
+    <rect width="90" height="20" fill="url(#s)"/>
+    <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" font-size="11">
+      <text x="26" y="15" fill="#010101" fill-opacity=".3">tokens</text><text x="26" y="14">tokens</text>
+      <text x="71" y="15" fill="#010101" fill-opacity=".3">120k</text><text x="71" y="14">120k</text>
+    </g>
+  </g>
+</svg>