Tool-Use Chip

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 53,
  slug: 'tool-use-chip',
  name: 'Tool-Use Chip',
  category: 'ai-collaboration',
  subcategory: 'status-and-budget',
  pillar: 'go',
  description: 'OAuth-scope-style chips declaring which tools the agent invoked and on what paths.',
  spec: `## Intent
Every tool invocation is a permission exercised. Render each one as a chip — readable like OAuth scopes — so the human governor can audit exactly what the agent touched. The verb is colour-coded; the target is monospaced.

## Acceptance Criteria
- [ ] Four chips: at least one read, one write, one exec
- [ ] Verb (READ / WRITE / EXEC) visually distinct
- [ ] Path argument in monospace
- [ ] Chips wrap gracefully on narrow widths

## Constraints
- Compact; ten chips would still fit in flow`,
  tags: ['badge', 'list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 82, a11y: 'aa', themed: true, animated: false },
};

const chips = [
  { verb: 'READ',  path: 'specs/SPEC-019.md',   tint: 'bg-do' },
  { verb: 'READ',  path: 'src/auth/**',         tint: 'bg-do' },
  { verb: 'WRITE', path: 'src/auth/oauth.ts',   tint: 'bg-co' },
  { verb: 'EXEC',  path: 'pnpm test auth',      tint: 'bg-attention text-white' },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm p-3 overflow-hidden">
  <div class="flex items-baseline justify-between mb-2">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">tool · scopes exercised</p>
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">4 calls</p>
  </div>

  <ul class="flex flex-wrap gap-1.5">
    {chips.map(c => (
      <li class="inline-flex items-stretch border-2 border-black">
        <span class:list={[
          'px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-widest font-black border-e-2 border-black',
          c.tint,
        ]}>{c.verb}</span>
        <span class="px-1.5 py-0.5 font-mono text-[10px] bg-paper">{c.path}</span>
      </li>
    ))}
  </ul>

  <p class="mt-2 font-mono text-[9px] uppercase tracking-widest opacity-60">
    audit · all calls logged · ceiling not exceeded
  </p>
</div>