@jaimevalasek/aioson 1.3.0 → 1.5.1

package/template/.aioson/skills/design-system/patterns/SKILL.md

@@ -0,0 +1,231 @@
+---
+name: design-patterns
+description: Page-level layout patterns for the Cognitive Core design system — dashboard shell, settings page, auth page, list-detail, command center, landing page, frontpage, and institutional page layouts. Load foundations and components first. Use when you need to compose a full page or screen layout.
+---
+
+# Patterns — Page-Level Layouts
+
+Requires: `foundations/SKILL.md` + `components/SKILL.md` loaded first.
+
+These patterns define how to compose components into full page layouts. Each pattern includes a structure diagram, which components to use, and spacing rules.
+
+## 1. Dashboard Shell
+
+The base layout for any admin/dashboard interface.
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR (sticky, bg-void, z-sticky)                   │
+├────────────────────────────────────────────────────────┤
+│  STATS ROW: [StatCard] [StatCard] [StatCard] [StatCard]│
+├────────────────────────────────────────────────────────┤
+│  TAB BAR (border-bottom)                               │
+├───────────┬────────────────────────────────────────────┤
+│ SIDEBAR   │  CONTENT                                   │
+│ 200-220px │  ┌─ Section Header ──────────────────┐    │
+│           │  │ Grid: [Card] [Card] [Card] [Card] │    │
+│           │  └───────────────────────────────────┘    │
+│           │  ┌─ Section Header ──────────────────┐    │
+│           │  │ Grid: [Card] [Card] [Card]        │    │
+│           │  └───────────────────────────────────┘    │
+└───────────┴────────────────────────────────────────────┘
+```
+
+**CSS skeleton:**
+```css
+.shell { min-height: 100vh; background: var(--bg-base); }
+.stats-row { display: flex; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; flex-wrap: wrap; }
+.main-layout { display: flex; min-height: calc(100vh - 230px); }
+.sidebar { width: 200px; flex-shrink: 0; border-right: 1px solid var(--border-subtle); padding: var(--space-4); }
+.content { flex: 1; padding: var(--space-4) var(--space-5); overflow-y: auto; }
+.card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+```
+
+**Variant — with feature panels:**
+Below stats and above card grid, add a two-column row: `grid-template-columns: 1fr 280px`. Left = DNA Panel. Right = Mode Panel.
+
+## 2. Detail Page (Entity Profile)
+
+For viewing a single entity (product, user, project, contact).
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR                                               │
+├────────────────────────────────────────────────────────┤
+│  Breadcrumbs: Gallery → Entity Name                    │
+│  PROFILE HEADER (avatar, name, badges, stat cards)     │
+├────────────────────────────────────────────────────────┤
+│  TAB BAR (Geral | DNA | Comunicação | Histórico)       │
+├───────────┬────────────────────────────────────────────┤
+│ SIDEBAR   │  TAB CONTENT                               │
+│           │  (varies per tab — DNA panel, card grid,   │
+│           │   table, etc.)                             │
+└───────────┴────────────────────────────────────────────┘
+```
+
+**Breadcrumbs:** `font-size: var(--text-sm)`, `color: var(--text-muted)`, active item in `--text-primary`.
+
+## 3. Settings Page
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR                                               │
+├───────────┬────────────────────────────────────────────┤
+│ SIDEBAR   │  SETTINGS TITLE                            │
+│           │  ┌─ Card ─────────────────────────────┐   │
+│ General   │  │ SECTION LABEL                       │   │
+│ Security  │  │ [Label] [Input]                     │   │
+│ Billing   │  │ [Label] [Input]                     │   │
+│ Team      │  │ [Label] [Select]                    │   │
+│ API       │  │         [Save Button]               │   │
+│           │  └─────────────────────────────────────┘   │
+│           │  ┌─ Card ─────────────────────────────┐   │
+│           │  │ DANGER ZONE (red border accent)     │   │
+│           │  └─────────────────────────────────────┘   │
+└───────────┴────────────────────────────────────────────┘
+```
+
+- Sidebar items map to form card sections
+- Each section is a card with mono label header + form fields
+- Danger zone card: `border-color: var(--semantic-red-dim)` with red-tinted actions
+
+## 4. Auth Page (Login / Register)
+
+```
+┌────────────────────────────────────────────────────────┐
+│                   bg-void (full screen)                 │
+│                                                         │
+│              ┌─ Card (max-w 420px) ──────────┐         │
+│              │  [Logo] AppName                │         │
+│              │  SUBTITLE                      │         │
+│              │                                │         │
+│              │  MONO LABEL: email              │         │
+│              │  [Input]                        │         │
+│              │  MONO LABEL: password           │         │
+│              │  [Input]                        │         │
+│              │  [Primary Button: full width]   │         │
+│              │                                │         │
+│              │  or ─── divider ─── or         │         │
+│              │  [Secondary Button: Google]     │         │
+│              │  Link: forgot / register        │         │
+│              └────────────────────────────────┘         │
+│                                                         │
+│              radial glow behind card                    │
+└────────────────────────────────────────────────────────┘
+```
+
+- Full viewport, centered flex, `background: var(--bg-void)`
+- Card with `var(--bg-surface)`, `max-width: 420px`, `border-radius: var(--radius-xl)`
+- Optional: radial glow effect behind card (like Mode Panel)
+
+## 5. List-Detail (Split View)
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR                                               │
+├────────────────────────────────────────────────────────┤
+│  TAB BAR + Filter badges                               │
+├──────────────────────┬─────────────────────────────────┤
+│  LIST (scrollable)   │  DETAIL PANEL                   │
+│  ┌──────────────┐    │  Profile Header (compact)       │
+│  │ Item (active) │   │  Stat Cards row                 │
+│  ├──────────────┤    │  Tab sub-navigation             │
+│  │ Item          │   │  Content (DNA Panel, table,     │
+│  ├──────────────┤    │  etc.)                          │
+│  │ Item          │   │                                 │
+│  └──────────────┘    │                                 │
+└──────────────────────┴─────────────────────────────────┘
+```
+
+- List panel: `width: 340px`, `border-right: 1px solid var(--border-subtle)`
+- Active item: `background: var(--bg-elevated)`, `border-left: 3px solid var(--accent)`
+- Detail panel: flex: 1, scrollable independently
+
+## 6. Landing Page / Frontpage
+
+Default theme: **light**. Uses generous spacing and hero typography.
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR (transparent → bg-void on scroll)             │
+├────────────────────────────────────────────────────────┤
+│                                                         │
+│  HERO SECTION (padding: space-24)                      │
+│  ┌──────────────────────────────────────────────┐     │
+│  │ MONO LABEL: tagline                           │     │
+│  │ DISPLAY HEADING (text-5xl, weight-black)      │     │
+│  │ Subtitle paragraph (text-lg, text-secondary)  │     │
+│  │ [CTA Button] [Secondary Button]               │     │
+│  └──────────────────────────────────────────────┘     │
+│                                                         │
+├────────────────────────────────────────────────────────┤
+│  FEATURES SECTION (bg-surface, padding: space-20)      │
+│  Section Header (centered)                              │
+│  [InfoCard] [InfoCard] [InfoCard]  (3-col grid)        │
+│                                                         │
+├────────────────────────────────────────────────────────┤
+│  STATS SECTION (bg-base, padding: space-16)            │
+│  [StatCard] [StatCard] [StatCard] [StatCard]           │
+│                                                         │
+├────────────────────────────────────────────────────────┤
+│  SOCIAL PROOF / TESTIMONIALS (bg-surface)              │
+│  Quote cards in 2-col grid                              │
+│                                                         │
+├────────────────────────────────────────────────────────┤
+│  CTA SECTION (accent glow background)                  │
+│  Display heading + CTA button (centered)                │
+│                                                         │
+├────────────────────────────────────────────────────────┤
+│  FOOTER (bg-void)                                      │
+│  Columns: Brand | Links | Links | Newsletter           │
+└────────────────────────────────────────────────────────┘
+```
+
+**Key differences from dashboard:**
+- Sections are full-width with alternating `bg-base` / `bg-surface`
+- Spacing between sections: `padding: var(--space-20) var(--space-6)`
+- Hero heading: `--text-5xl` on desktop, `--text-3xl` on mobile
+- Content max-width: `1200px`, centered with `margin: 0 auto`
+- Section headers centered: `text-align: center`
+- CTA section: `background: var(--bg-surface)` with `radial-gradient` glow
+
+## 7. Institutional / Corporate
+
+Same as Landing Page but with these pages:
+
+- **About page**: Hero + text blocks + team card grid (avatar cards with name, role, social)
+- **Services page**: Hero + service info cards (icon + title + desc) in 3-col grid
+- **Contact page**: Two columns — left: text + info cards, right: form card
+
+Team card variant:
+```
+┌───────────────────┐
+│     [Avatar]      │
+│    Team Member    │ ← text-heading, weight-bold
+│      CEO          │ ← text-accent, italic
+│   Short bio text  │ ← text-secondary, text-sm
+│   [Social icons]  │
+└───────────────────┘
+```
+
+## Responsive Breakpoints
+
+Apply to all patterns:
+```css
+/* Mobile: single column, sidebar collapses, stats stack */
+@media (max-width: 768px) {
+  .main-layout { flex-direction: column; }
+  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
+  .card-grid { grid-template-columns: 1fr; }
+  .stats-row { flex-direction: column; }
+  .hero-heading { font-size: var(--text-3xl); }
+}
+/* Tablet: 2-col grid */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .card-grid { grid-template-columns: repeat(2, 1fr); }
+}
+/* Desktop: 3-4 col grid */
+@media (min-width: 1024px) {
+  .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+}
+```

package/template/.aioson/skills/premium-visual-design/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: premium-visual-design
+version: 2.1.0
+description: Premium Visual Design System v2.1 — Dark-first design language for AIOSON Squad Dashboard. Provides tokens, patterns, and components for inter-squad UI: agent threads, dependency graphs, review workflows, notification center, team switcher. Use when building or reviewing any Squad Dashboard UI, inter-squad communication interface, or task/review workflow screens. Triggers on: "squad dashboard UI", "agent message thread", "task dependency", "hunk review", "notification center", "team switcher", "@mention", "review workflow".
+---
+
+# Premium Visual Design System v2.1
+
+Design system for AIOSON Squad Dashboard v3 and inter-squad UI. Dark-first, density-optimized, terminal-adjacent aesthetic.
+
+## What's in v2.1
+
+### Additions in v2.1.0
+- `tokens/status-extended.md` — blocked/ready/solo/auto/human/review state tokens
+- `patterns/agent-message-thread.md` — inter-squad feed with @mentions and reactions
+- `patterns/task-dependency-graph.md` — SVG-based DAG with zero external deps
+- `patterns/review-workflow-ui.md` — hunk-level code review with approve/reject flow
+- `patterns/notification-panel.md` — notification center with filters and grouping
+- `components/team-switcher.md` — sidebar squad navigation component
+- `components/mention-autocomplete.md` — @agent, @squad, #task autocomplete
+- `components/notification-center.md` — bell icon + badge + dropdown panel
+- `components/dependency-node.md` — individual DAG node component
+- `components/review-action-bar.md` — approve/reject/comment action bar
+- `components/agent-badge.md` — auto/human/solo agent type indicator
+
+## Architecture
+
+```
+skills/premium-visual-design/
+├── SKILL.md                              ← Router (this file)
+├── tokens/
+│   └── status-extended.md               ← State & status color tokens
+├── patterns/
+│   ├── agent-message-thread.md          ← Inter-squad message feed
+│   ├── task-dependency-graph.md         ← DAG visualization
+│   ├── review-workflow-ui.md            ← Review + diff + hunks
+│   └── notification-panel.md            ← Notification list with filters
+└── components/
+    ├── agent-badge.md                   ← Agent type badge
+    ├── team-switcher.md                 ← Squad sidebar nav
+    ├── mention-autocomplete.md          ← @mention dropdown
+    ├── notification-center.md           ← Bell + badge + panel
+    ├── dependency-node.md               ← DAG node
+    └── review-action-bar.md             ← Approve/reject bar
+```
+
+## Design Language
+
+**Aesthetic**: Dark terminal-adjacent. Dense but not cluttered. Monospace accents.
+
+**Color foundation** (CSS variables, dark theme):
+```css
+--bg: #0f1117;           /* deep background */
+--bg-card: #1a1d27;      /* card surface */
+--bg-hover: #222632;     /* hover/elevated */
+--border: #2a2e3a;       /* subtle borders */
+--text: #e1e4eb;         /* primary text */
+--text-muted: #8b8fa3;   /* secondary text */
+--accent: #6c8aff;       /* primary accent (indigo) */
+--accent-dim: rgba(108,138,255,0.15);
+--success: #4ade80;      /* green */
+--warning: #fbbf24;      /* amber */
+--danger: #f87171;       /* red */
+--cyan: #22d3ee;         /* cyan accent */
+--purple: #c084fc;       /* purple accent */
+```
+
+## Loading guide for agents
+
+| Task | Load |
+|------|------|
+| Agent message feed | tokens/status-extended → components/agent-badge → components/mention-autocomplete → patterns/agent-message-thread |
+| Task dependencies | tokens/status-extended → components/dependency-node → patterns/task-dependency-graph |
+| Code review | tokens/status-extended → components/review-action-bar → patterns/review-workflow-ui |
+| Notifications | tokens/status-extended → components/notification-center → patterns/notification-panel |
+| Squad nav | tokens/status-extended → components/team-switcher |
+| Full dashboard | Load all in order: tokens → components → patterns |
+
+## Changelog
+
+### v2.1.0 (2026-03-24)
+- Added 11 new artefacts: 1 token file, 4 patterns, 6 components
+- All artefacts target Squad Dashboard v3 (PRD 19.2) and inter-squad communication UI

package/template/.aioson/skills/premium-visual-design/components/agent-badge.md

@@ -0,0 +1,92 @@
+# Agent Badge Component
+
+Visual badge identifying the execution type of an agent: `auto`, `human`, or `solo`.
+
+## Anatomy
+
+```
+┌──────────┐   ┌──────────┐   ┌──────────┐
+│ ⚡ auto  │   │ 👤 human │   │ ◆ solo   │
+└──────────┘   └──────────┘   └──────────┘
+  cyan          amber           muted
+```
+
+## Types
+
+| Type | Icon | Color token | Meaning |
+|------|------|------------|---------|
+| `auto` | ⚡ | `--state-auto` (#22d3ee) | Fully autonomous — no human gates |
+| `human` | 👤 | `--state-human` (#fbbf24) | Human-in-the-loop agent |
+| `solo` | ◆ | `--state-solo` (#8b8fa3) | Single agent, no squad context |
+
+## Sizes
+
+| Size class | Height | Font |
+|-----------|--------|------|
+| `sm` | 18px | 10px |
+| (default) | 24px | 12px |
+| `lg` | 32px | 14px |
+
+## CSS
+
+```css
+.agent-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.agent-badge-auto {
+  background:   rgba(34, 211, 238, 0.12);
+  color:        var(--state-auto, #22d3ee);
+  border-color: rgba(34, 211, 238, 0.25);
+}
+
+.agent-badge-human {
+  background:   rgba(251, 191, 36, 0.12);
+  color:        var(--state-human, #fbbf24);
+  border-color: rgba(251, 191, 36, 0.25);
+}
+
+.agent-badge-solo {
+  background:   rgba(139, 143, 163, 0.12);
+  color:        var(--state-solo, #8b8fa3);
+  border-color: rgba(139, 143, 163, 0.25);
+}
+
+/* Sizes */
+.agent-badge.sm { padding: 1px 6px; font-size: 10px; }
+.agent-badge.lg { padding: 4px 12px; font-size: 14px; }
+```
+
+## HTML Examples
+
+```html
+<!-- Default sizes -->
+<span class="agent-badge agent-badge-auto">⚡ auto</span>
+<span class="agent-badge agent-badge-human">👤 human</span>
+<span class="agent-badge agent-badge-solo">◆ solo</span>
+
+<!-- Small (in team-switcher or compact lists) -->
+<span class="agent-badge agent-badge-auto sm">⚡</span>
+
+<!-- Large (agent profile header) -->
+<span class="agent-badge agent-badge-human lg">👤 human-gate</span>
+```
+
+## Usage in context
+
+**In agent card header**: place badge after agent name, same line.
+```html
+<h4>planner <span class="agent-badge agent-badge-auto sm">⚡ auto</span></h4>
+```
+
+**In team-switcher**: use `sm` to avoid crowding the sidebar item.
+
+**In process list**: show alongside agent slug in the Processes tab.

package/template/.aioson/skills/premium-visual-design/components/dependency-node.md

@@ -0,0 +1,102 @@
+# Dependency Node Component
+
+Individual node in the task dependency graph. Rendered as an SVG `<g>` element.
+
+## Dimensions
+
+- Width: `120px`
+- Height: `44px`
+- Corner radius: `6px`
+- Status bar: left `4px` wide, full height
+
+## Anatomy
+
+```
+┌─┬────────────────────────┐
+│█│ write-prd         [▶]  │  ← task slug + status icon (right)
+│█│ planner               │  ← agent slug (muted, smaller)
+└─┴────────────────────────┘
+  ↑ 4px status bar (color by state)
+```
+
+## SVG Structure
+
+```svg
+<g class="dep-node" data-status="running" data-task="write-prd">
+  <!-- Background rect -->
+  <rect width="120" height="44" rx="6"
+        fill="#1a1d27" stroke="#2a2e3a" stroke-width="1"/>
+
+  <!-- Status bar (left edge) -->
+  <rect width="4" height="44" rx="2"
+        fill="#6c8aff"/>  <!-- color changes by status -->
+
+  <!-- Task slug -->
+  <text x="16" y="18"
+        font-size="12" font-weight="600" fill="#e1e4eb"
+        font-family="monospace">write-prd</text>
+
+  <!-- Agent label -->
+  <text x="16" y="32"
+        font-size="10" fill="#8b8fa3"
+        font-family="monospace">planner</text>
+
+  <!-- Status label (right side) -->
+  <text x="112" y="18"
+        font-size="9" fill="#6c8aff"
+        text-anchor="end">running</text>
+
+  <!-- Connector port — left (incoming edges) -->
+  <circle cx="0" cy="22" r="3" fill="#2a2e3a" stroke="#6c8aff" stroke-width="1"/>
+
+  <!-- Connector port — right (outgoing edges) -->
+  <circle cx="120" cy="22" r="3" fill="#2a2e3a" stroke="#6c8aff" stroke-width="1"/>
+</g>
+```
+
+## Status Bar Colors
+
+Map from `status-extended.md` tokens:
+
+| Status | Color | Hex |
+|--------|-------|-----|
+| `pending` | `--state-idle` | `#8b8fa3` |
+| `ready` | `--state-ready` | `#4ade80` |
+| `running` | `--state-running` | `#6c8aff` |
+| `blocked` | `--state-blocked` | `#f87171` |
+| `done` | `--state-done` | `#4ade80` |
+| `error` | `--state-error` | `#f87171` |
+| `review` | `--state-review` | `#c084fc` |
+
+## CSS (applied to SVG via class)
+
+```css
+.dep-node rect:first-of-type {
+  transition: stroke 0.15s, stroke-width 0.15s;
+}
+
+.dep-node:hover rect:first-of-type {
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+
+.dep-node.selected rect:first-of-type {
+  stroke: var(--accent);
+  stroke-width: 2;
+}
+
+.dep-node { cursor: pointer; }
+```
+
+## Connector Ports
+
+Ports are small circles at `(0, 22)` (left, for incoming) and `(120, 22)` (right, outgoing). Show on hover using CSS opacity:
+
+```css
+.dep-node circle { opacity: 0; transition: opacity 0.15s; }
+.dep-node:hover circle { opacity: 1; }
+```
+
+## Usage
+
+Used inside the task dependency graph pattern (`task-dependency-graph.md`). Each node is a `<g>` positioned by the layout algorithm at `transform="translate(x, y)"`.

package/template/.aioson/skills/premium-visual-design/components/mention-autocomplete.md

@@ -0,0 +1,136 @@
+# Mention Autocomplete Component
+
+Dropdown that appears when typing `@` (agents/squads) or `#` (tasks) in any text input.
+
+## Anatomy
+
+```
+┌─ @write ──────────────────────────┐
+│ Agents                             │
+│ ● writer       alpha-squad        │  ← highlighted (keyboard/hover)
+│   planner      alpha-squad        │
+│ Squads                             │
+│   bravo-squad                     │
+└────────────────────────────────────┘
+```
+
+## Trigger rules
+
+| Character | Shows | Groups |
+|-----------|-------|--------|
+| `@` | Agents, then Squads | "Agents" / "Squads" |
+| `#` | Tasks | "Tasks" |
+
+Filter list in real-time as user types after the trigger character.
+
+## HTML Structure
+
+```html
+<div class="mention-dropdown" id="mention-dropdown" hidden>
+  <!-- Agents group -->
+  <div class="mention-group-label">Agents</div>
+  <div class="mention-item selected" data-value="@writer" tabindex="-1">
+    <span class="mention-item-icon">🤖</span>
+    <span class="mention-item-name">writer</span>
+    <span class="mention-item-sub">alpha-squad</span>
+  </div>
+  <div class="mention-item" data-value="@planner" tabindex="-1">
+    <span class="mention-item-icon">🤖</span>
+    <span class="mention-item-name">planner</span>
+    <span class="mention-item-sub">alpha-squad</span>
+  </div>
+
+  <!-- Squads group -->
+  <div class="mention-group-label">Squads</div>
+  <div class="mention-item" data-value="@bravo-squad" tabindex="-1">
+    <span class="mention-item-icon">👥</span>
+    <span class="mention-item-name">bravo-squad</span>
+    <span class="mention-item-sub">squad</span>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.mention-dropdown {
+  position: absolute;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  width: 260px;
+  max-height: 240px;
+  overflow-y: auto;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+}
+
+.mention-group-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 6px 12px 2px;
+  letter-spacing: 0.4px;
+}
+
+.mention-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.1s;
+}
+
+.mention-item:hover,
+.mention-item.selected {
+  background: var(--accent-dim);
+}
+
+.mention-item-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.mention-item-name {
+  font-weight: 500;
+  flex: 1;
+}
+
+.mention-item-sub {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+```
+
+## Keyboard navigation (JS spec)
+
+1. `@` or `#` typed in the input → show dropdown, filter to matching items
+2. `ArrowDown` / `ArrowUp` → move `.selected` class between `.mention-item` rows
+3. `Enter` → insert selected item's `data-value` + trailing space into the input, close dropdown
+4. `Escape` → close dropdown without inserting
+5. Click on `.mention-item` → same as Enter
+6. Any non-matching char → re-filter, hide if no results
+
+## Resulting inline markup
+
+After insertion, wrap the mention in a `<span>`:
+
+```html
+<!-- Agent mention -->
+<span class="mention mention-agent" data-slug="writer">@writer</span>
+
+<!-- Squad mention -->
+<span class="mention mention-squad" data-slug="bravo-squad">@bravo-squad</span>
+
+<!-- Task mention -->
+<span class="mention mention-task" data-slug="write-prd">#write-prd</span>
+```
+
+```css
+.mention { padding: 1px 4px; border-radius: 3px; font-weight: 500; }
+.mention-agent { background: var(--accent-dim); color: var(--accent); }
+.mention-squad { background: rgba(34,211,238,0.10); color: var(--cyan, #22d3ee); }
+.mention-task  { background: rgba(192,132,252,0.10); color: var(--purple, #c084fc); }
+```