@jaimevalasek/aioson 1.7.2 → 1.9.0

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

@@ -1,83 +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
+---
+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

@@ -1,92 +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.
+# 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

@@ -1,102 +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)"`.
+# 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)"`.