Plan Step Pip

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

export const meta: CompendiumMeta = {
  id: 624,
  slug: 'plan-step-pip',
  name: 'Plan Step Pip',
  category: 'ai-collaboration',
  subcategory: 'reasoning-and-trace',
  pillar: 'co',
  description: 'A horizontal row of pips marking plan progress — done / current / pending — at a glance.',
  spec: `## Intent
A plan is a sequence of intended steps. Pips render that sequence as a strip where the agent's current position is unambiguous: done = filled, current = bordered, pending = hollow.

## Acceptance Criteria
- [ ] Three distinct pip states (done · current · pending)
- [ ] Step labels under each pip, condensed
- [ ] Current pip is visually heaviest
- [ ] Negative: does NOT use colour alone to convey state

## Constraints
- Pure markup
- Theme-aware`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const steps = [
  { label: 'READ',     state: 'done'    as const },
  { label: 'DRAFT',    state: 'done'    as const },
  { label: 'CHECK',    state: 'current' as const },
  { label: 'OPEN-PR',  state: 'pending' as const },
  { label: 'WAIT',     state: 'pending' as const },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black overflow-hidden">
  <header class="px-3 py-1.5 border-b-2 border-black flex items-baseline justify-between">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">// plan</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">3 / 5</span>
  </header>
  <div class="px-3 py-4 grid grid-cols-5 gap-2">
    {steps.map((s) => (
      <div class="flex flex-col items-center min-w-0">
        <span class:list={[
          'block w-5 h-5 border-2 border-black',
          s.state === 'done' && 'bg-ink',
          s.state === 'current' && 'bg-co border-4',
          s.state === 'pending' && 'bg-paper',
        ]} aria-label={s.state}></span>
        <span class={`mt-1.5 font-mono text-[9px] uppercase tracking-widest text-center truncate w-full ${s.state === 'current' ? 'font-black' : 'opacity-60'}`}>{s.label}</span>
      </div>
    ))}
  </div>
</div>