@jaimevalasek/aioson 1.4.0 → 1.6.0

package/template/.aioson/skills/design/warm-craft-ui/references/websites.md

@@ -0,0 +1,289 @@
+# Website Layouts — Warm Craft UI
+
+Composition guides for landing pages, product pages, and institutional websites. Uses tokens from `design-tokens.md` and components from `components.md`.
+
+---
+
+## General Website Rules
+
+1. **Hero is the first impression.** It must feel crafted, not templated. Never a centered headline + two buttons + stock image.
+2. **Editorial pacing.** Alternate between high-impact sections and breathing room. Never repeat the same card grid four times.
+3. **Serif drives the narrative.** Headlines, pull quotes, and hero text use `var(--font-display)`. This is what makes it feel warm, not the colors.
+4. **Warm backgrounds, not white.** Use `var(--bg-void)` for section alternation, never pure white sections.
+5. **One accent, used sparingly.** Terracotta for CTAs and key highlights only. Never accent borders, accent backgrounds on sections, or accent everything.
+6. **Illustrations over icons.** Where possible, use warm, hand-drawn-style illustrations. Cold geometric SVG icons are for apps, not marketing pages.
+7. **Real copy only.** No Lorem ipsum. Write real headlines, descriptions, and CTAs that sound like a human wrote them.
+
+---
+
+## Hero Patterns
+
+### Pattern A: Split Hero
+
+```
++---------------------------+---------------------------+
+|                           |                           |
+|  OVERLINE                 |  PRODUCT SHOT or          |
+|  (text-sm, accent,       |  ILLUSTRATION             |
+|   tracking-wide)          |  (warm tones, soft        |
+|                           |   shadow, slight tilt)    |
+|  HEADLINE                 |                           |
+|  (font-display, text-5xl, |                           |
+|   weight-bold, heading)   |                           |
+|                           |                           |
+|  SUBTITLE                 |                           |
+|  (text-lg, secondary,    |                           |
+|   max-width 480px)        |                           |
+|                           |                           |
+|  [CTA Primary] [CTA Sec] |                           |
+|                           |                           |
++---------------------------+---------------------------+
+```
+
+Use when: product has a strong visual to show. Most common warm hero.
+
+### Pattern B: Editorial Hero
+
+```
++-----------------------------------------------------------+
+|  centered, max-width: 720px                                |
+|                                                            |
+|  OVERLINE (accent badge or small label)                    |
+|                                                            |
+|  HEADLINE                                                  |
+|  (font-display, text-5xl, weight-bold, text-align: center)|
+|  letter-spacing: var(--tracking-tight)                     |
+|                                                            |
+|  SUBTITLE                                                  |
+|  (text-xl, secondary, text-align: center, max-width 560px)|
+|                                                            |
+|  [CTA Primary]                                             |
+|                                                            |
+|  SOCIAL PROOF LINE                                         |
+|  (avatar cluster + "Trusted by 2,000+ teams")             |
+|                                                            |
++-----------------------------------------------------------+
+```
+
+Use when: message is the product. No visual needed above the fold.
+
+### Pattern C: Immersive Hero
+
+```
++-----------------------------------------------------------+
+|  full-width background: warm gradient or warm photography  |
+|  (subtle warm overlay if image is cold)                    |
+|                                                            |
+|  centered content, max-width: 640px                        |
+|                                                            |
+|  HEADLINE (white or light text if on dark background)      |
+|  SUBTITLE                                                  |
+|  [CTA on warm background]                                  |
+|                                                            |
++-----------------------------------------------------------+
+```
+
+Use when: brand-heavy, emotional product, premium feel.
+
+---
+
+## Section Patterns
+
+### Feature Grid
+
+```
+SECTION HEADER
+  overline: var(--text-sm), var(--accent), var(--tracking-wider), uppercase
+  title: var(--font-display), var(--text-3xl), var(--weight-bold)
+  subtitle: var(--text-lg), var(--text-secondary), max-width 600px
+  text-align: center or left
+  margin-bottom: var(--space-12)
+
+GRID
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
+  gap: var(--space-6)
+  uses: Feature Card component
+```
+
+Rules:
+- Max 6 features in a grid. If more, group into categories.
+- Each feature card should have a warm icon area (not just an icon floating in space).
+
+### Alternating Feature Sections
+
+```
+SECTION 1 (image left, text right)
++---------------------------+---------------------------+
+|  [Product screenshot      |  OVERLINE                 |
+|   or illustration,       |  TITLE (serif, 2xl)       |
+|   rounded-2xl,           |  DESCRIPTION              |
+|   warm shadow]            |  BULLET POINTS            |
+|                           |  [CTA link →]             |
++---------------------------+---------------------------+
+
+SECTION 2 (text left, image right)
++---------------------------+---------------------------+
+|  OVERLINE                 |  [Product screenshot      |
+|  TITLE                    |   different angle]        |
+|  DESCRIPTION              |                           |
++---------------------------+---------------------------+
+```
+
+Rules:
+- Always alternate sides.
+- Images should be real product screenshots with warm treatment (rounded corners, soft shadow, slight warm tint).
+- Vertical padding between sections: `var(--space-20)` or `var(--space-24)`.
+
+### Testimonials
+
+```
+Option A — Pull Quote:
+  font: var(--font-display), var(--text-2xl), italic
+  color: var(--text-heading)
+  max-width: 640px
+  text-align: center
+  warm accent bar on left or oversized opening quote mark
+
+  attribution:
+    avatar (48px) + name + title + company
+    font: var(--font-body), var(--text-sm)
+    margin-top: var(--space-6)
+
+Option B — Card Grid:
+  3 columns of testimonial cards
+  Each: quote + avatar + name + role
+  background: var(--bg-surface)
+  border: 1px solid var(--border-subtle)
+  border-radius: var(--radius-2xl)
+  padding: var(--space-6)
+```
+
+Rules:
+- Pull quote is preferred for warm aesthetic. Card grid is acceptable for volume.
+- Never more than one testimonial section per page.
+
+### Social Proof Strip
+
+```
+horizontal row of logos or metrics
+  "Trusted by teams at [Logo] [Logo] [Logo] [Logo]"
+  logos: grayscale, opacity 0.5, warm-tinted
+  hover: opacity 1
+
+  or metrics:
+  "10K+ users | 4.9/5 rating | 50+ countries"
+  font: var(--font-body), var(--text-lg), var(--weight-semibold)
+```
+
+### Pricing Section
+
+```
+SECTION HEADER (centered)
+  title: "Simple, transparent pricing"
+  subtitle: "No hidden fees. Cancel anytime."
+
+PRICING CARDS (2-3 columns, centered)
+  each card:
+    background: var(--bg-surface)
+    border: 1px solid var(--border-subtle)
+    border-radius: var(--radius-2xl)
+    padding: var(--space-8)
+
+    plan name: var(--text-lg), var(--weight-semibold)
+    price: var(--font-display), var(--text-4xl), var(--weight-bold)
+    per period: var(--text-sm), var(--text-secondary)
+    feature list: checkmarks with var(--semantic-green)
+    CTA: Primary or Secondary Button (full width)
+
+  recommended card:
+    border: 2px solid var(--accent)
+    shadow: var(--shadow-lg)
+    "Most Popular" badge above card
+```
+
+### CTA Section (before footer)
+
+```
+background: var(--bg-void)
+border-radius: var(--radius-3xl)
+padding: var(--space-16) var(--space-8)
+text-align: center
+margin: var(--space-16) auto
+max-width: var(--content-lg)
+
+title: var(--font-display), var(--text-3xl), var(--weight-bold)
+subtitle: var(--text-lg), var(--text-secondary)
+[CTA Primary — Large variant] + [CTA Secondary]
+```
+
+---
+
+## Footer
+
+```
+background: var(--bg-void)
+border-top: 1px solid var(--border-subtle)
+padding: var(--space-16) var(--space-8) var(--space-8)
+
+LAYOUT (4 columns on desktop, stacked on mobile)
+  Column 1: Logo + tagline + social icons
+  Columns 2-4: Link groups (Product, Company, Resources)
+
+  link group title:
+    font: var(--font-body), var(--text-sm), var(--weight-semibold)
+    color: var(--text-heading)
+    margin-bottom: var(--space-4)
+
+  links:
+    font: var(--text-sm), var(--text-secondary)
+    hover: var(--text-heading)
+    line-height: 2
+
+BOTTOM BAR
+  border-top: 1px solid var(--border-subtle)
+  margin-top: var(--space-8)
+  padding-top: var(--space-6)
+  display: flex; justify-content: space-between
+  copyright: var(--text-xs), var(--text-muted)
+  legal links: var(--text-xs), var(--text-secondary)
+```
+
+---
+
+## Navigation (Websites)
+
+```
+STICKY HEADER
+  height: 72px
+  background: rgba(253, 252, 250, 0.85)  /* bg-base with blur */
+  backdrop-filter: blur(12px)
+  border-bottom: 1px solid var(--border-subtle)
+  position: sticky; top: 0
+  z-index: var(--z-sticky)
+
+  logo (left): max-height 32px
+  nav links (center): var(--text-sm), var(--weight-medium), var(--text-secondary)
+    hover: var(--text-heading)
+    active: var(--text-heading) + subtle underline
+  CTA (right): Primary Button (compact variant)
+
+MOBILE (< 768px)
+  hamburger icon → slide-in drawer from right
+  full-height, var(--bg-surface)
+  nav items stacked vertically
+  CTA at bottom of drawer
+```
+
+---
+
+## Anti-Patterns (Never Do This)
+
+1. **Generic hero:** Centered headline, two buttons, abstract gradient background. This is every AI-generated landing page.
+2. **Icon grid features:** 6 features as icon + title + one-line description in a 3x2 grid. Lazy and undifferentiated.
+3. **Blue accent on warm page:** Blue CTAs or links break the warm system. Use terracotta or sage.
+4. **Stock photography without warm treatment:** Raw stock photos feel cold. Apply rounded corners, soft shadow, warm tint overlay if needed.
+5. **Testimonials as afterthought:** Generic quote in a gray box at the bottom. Either make it editorial (serif, large) or skip it.
+6. **Dense footer:** Footer should breathe like the rest of the page. Generous padding, warm background.
+7. **Multiple CTAs competing:** One primary CTA per viewport. Secondary CTAs use Ghost or Secondary button style.
+8. **Repeating the same layout:** If sections 2, 3, and 4 all use the same card grid, the page feels generated. Vary the composition.

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); }
+```