@jaimevalasek/aioson 1.4.0 → 1.6.0

package/template/.aioson/skills/premium-visual-design/patterns/notification-panel.md

@@ -0,0 +1,275 @@
+# Notification Panel Pattern
+
+Full notification list with filter tabs, grouping by squad, and mark-all-read. Used inside the notification-center component's dropdown.
+
+## Anatomy
+
+```
+┌─ Notifications ─────────────────── [Mark all read] ┐
+│ [All] [Unread ③] [Mentions] [Errors]                │
+├─────────────────────────────────────────────────────┤
+│ ● merge_conflict  alpha-squad/dev       2m ago  ●   │  ← unread dot
+│   Branch aioson/alpha/writer has conflicts           │
+├─────────────────────────────────────────────────────┤
+│ ✓ task_completed  bravo-squad/planner   5m ago       │
+│   PRD v2 delivered to output port                    │
+├─────────────────────────────────────────────────────┤
+│ ⚠ context_warning alpha-squad/writer   8m ago  ●    │
+│   Context window at 87% — approaching limit          │
+└─────────────────────────────────────────────────────┘
+```
+
+## HTML Structure
+
+```html
+<div class="notif-panel">
+
+  <!-- Header -->
+  <div class="notif-header">
+    <span class="notif-title">Notifications</span>
+    <button class="notif-mark-all">Mark all read</button>
+  </div>
+
+  <!-- Filter tabs -->
+  <div class="notif-filters">
+    <button class="notif-filter active">All</button>
+    <button class="notif-filter">
+      Unread <span class="notif-filter-badge">3</span>
+    </button>
+    <button class="notif-filter">Mentions</button>
+    <button class="notif-filter">Errors</button>
+  </div>
+
+  <!-- Notification list -->
+  <div class="notif-list">
+
+    <!-- Unread item -->
+    <div class="notif-item unread" data-id="n1" data-type="merge_conflict">
+      <div class="notif-type-dot" style="background:#c084fc" title="merge_conflict"></div>
+      <div class="notif-body">
+        <div class="notif-meta">merge_conflict &nbsp;·&nbsp; alpha-squad/dev</div>
+        <div class="notif-summary">Branch aioson/alpha/writer has conflicts</div>
+      </div>
+      <div class="notif-right">
+        <span class="notif-time">2m ago</span>
+        <span class="notif-unread-dot"></span>
+      </div>
+    </div>
+
+    <!-- Read item -->
+    <div class="notif-item" data-id="n2" data-type="task_completed">
+      <div class="notif-type-dot" style="background:#4ade80" title="task_completed"></div>
+      <div class="notif-body">
+        <div class="notif-meta">task_completed &nbsp;·&nbsp; bravo-squad/planner</div>
+        <div class="notif-summary">PRD v2 delivered to output port</div>
+      </div>
+      <div class="notif-right">
+        <span class="notif-time">5m ago</span>
+      </div>
+    </div>
+
+    <!-- Squad group (when > 5 items from same squad) -->
+    <div class="notif-group">
+      <div class="notif-group-header" data-group="gamma-squad">
+        <span class="notif-group-name">gamma-squad</span>
+        <span class="notif-group-count">6 notifications</span>
+        <button class="notif-group-toggle">▼</button>
+      </div>
+      <div class="notif-group-items">
+        <!-- items... -->
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Empty state -->
+  <div class="notif-empty" hidden>
+    <div class="notif-empty-icon">🔔</div>
+    <div>No notifications</div>
+  </div>
+
+</div>
+```
+
+## CSS
+
+```css
+.notif-panel {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  width: 380px;
+  max-height: 480px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.notif-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.notif-title { font-size: 13px; font-weight: 600; }
+
+.notif-mark-all {
+  font-size: 11px;
+  color: var(--accent);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.notif-mark-all:hover { text-decoration: underline; }
+
+/* Filter tabs */
+.notif-filters {
+  display: flex;
+  gap: 4px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.notif-filter {
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  cursor: pointer;
+  background: none;
+  border: 1px solid transparent;
+  color: var(--text-muted);
+  transition: all 0.12s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.notif-filter:hover { color: var(--text); border-color: var(--border); }
+
+.notif-filter.active {
+  background: var(--accent-dim);
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.notif-filter-badge {
+  background: var(--accent);
+  color: #fff;
+  border-radius: 8px;
+  font-size: 9px;
+  padding: 0 5px;
+  font-weight: 700;
+  line-height: 14px;
+}
+
+/* Notification list */
+.notif-list {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.notif-item {
+  display: flex;
+  gap: 10px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.12s;
+  align-items: flex-start;
+}
+
+.notif-item:hover { background: var(--bg-hover); }
+.notif-item:last-child { border-bottom: none; }
+
+.notif-type-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.notif-body { flex: 1; min-width: 0; }
+
+.notif-meta {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.notif-summary {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text);
+}
+
+.notif-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.notif-time {
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.notif-unread-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+/* Grouping */
+.notif-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: var(--bg-hover);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.notif-group-name { font-weight: 500; flex: 1; }
+.notif-group-count { font-size: 11px; color: var(--text-muted); }
+.notif-group-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; }
+.notif-group-items { display: none; }
+.notif-group.open .notif-group-items { display: block; }
+.notif-group.open .notif-group-toggle { transform: rotate(180deg); }
+
+/* Empty state */
+.notif-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 16px;
+  color: var(--text-muted);
+  font-size: 13px;
+  gap: 8px;
+}
+
+.notif-empty-icon { font-size: 28px; }
+```
+
+## Interaction notes
+
+- Filter `Unread` shows only items with `.unread` class. Clicking any item marks it read.
+- Filter `Mentions` shows items whose summary contains a `@{currentAgent}` pattern.
+- Filter `Errors` shows items with type `error`, `merge_conflict`, or `context_critical`.
+- Groups collapse/expand on header click. Groups auto-form when ≥ 5 items share the same `squadSlug`.
+- Mark all read: removes `.unread` and `.notif-unread-dot` from all items, resets unread count in notification-center badge.

package/template/.aioson/skills/premium-visual-design/patterns/review-workflow-ui.md

@@ -0,0 +1,234 @@
+# Review Workflow UI Pattern
+
+Full hunk-level code review layout for the Squad Dashboard. Diff viewer + per-hunk approve/reject sidebar.
+
+## Layout
+
+Split view: diff on the left (70%), hunk status sidebar on the right (30%).
+
+```
+┌──────────────────────────────────────────┬─────────────────────┐
+│ DIFF VIEWER                              │ HUNK STATUS          │
+│                                          │                      │
+│ ─── Hunk 1/4 [● pending] ────────────── │ 1/4 hunks reviewed  │
+│ @@ -12,8 +12,10 @@                       │ ──────────────────── │
+│   context line                           │ ✓ Hunk 1  approved  │
+│ - removed line                           │ ● Hunk 2  pending   │
+│ + added line                             │ ✗ Hunk 3  rejected  │
+│ [✓ Approve] [✗ Reject] [💬]            │ ● Hunk 4  pending   │
+│                                          │                      │
+│ ─── Hunk 2/4 [● pending] ────────────── │ ──────────────────── │
+│ @@ -45,7 +45,9 @@                        │ [Submit Review]      │
+│   ...                                    │                      │
+└──────────────────────────────────────────┴─────────────────────┘
+```
+
+## HTML Structure
+
+```html
+<div class="review-layout">
+
+  <!-- Progress bar at top -->
+  <div class="review-progress">
+    <span class="review-progress-label">1 / 4 hunks reviewed</span>
+    <div class="review-progress-bar">
+      <div class="review-progress-fill" style="width: 25%"></div>
+    </div>
+  </div>
+
+  <div class="review-split">
+
+    <!-- Left: Diff viewer -->
+    <div class="review-diff-panel">
+
+      <!-- Hunk 1 — approved -->
+      <div class="diff-hunk approved" data-hunk="1" data-status="approved">
+        <div class="diff-hunk-header">
+          <span class="diff-hunk-title">Hunk 1/4</span>
+          <code class="diff-hunk-range">@@ -12,8 +12,10 @@</code>
+          <span class="diff-hunk-status-badge status-approved">✓ approved</span>
+        </div>
+        <div class="diff-lines">
+          <div class="diff-line diff-context">  context line</div>
+          <div class="diff-line diff-remove">- removed line</div>
+          <div class="diff-line diff-add">+ added line</div>
+        </div>
+        <!-- action bar from review-action-bar.md -->
+      </div>
+
+      <!-- Hunk 2 — pending -->
+      <div class="diff-hunk" data-hunk="2" data-status="pending">
+        <!-- ... -->
+      </div>
+
+    </div>
+
+    <!-- Right: Status sidebar -->
+    <div class="review-sidebar">
+      <div class="review-sidebar-header">Hunks</div>
+      <div class="review-hunk-list">
+        <div class="review-hunk-item approved" data-hunk="1">
+          <span class="review-hunk-icon">✓</span>
+          <span class="review-hunk-label">Hunk 1</span>
+          <span class="review-hunk-status">approved</span>
+        </div>
+        <div class="review-hunk-item pending active" data-hunk="2">
+          <span class="review-hunk-icon">●</span>
+          <span class="review-hunk-label">Hunk 2</span>
+          <span class="review-hunk-status">pending</span>
+        </div>
+        <div class="review-hunk-item rejected" data-hunk="3">
+          <span class="review-hunk-icon">✗</span>
+          <span class="review-hunk-label">Hunk 3</span>
+          <span class="review-hunk-status">rejected</span>
+        </div>
+      </div>
+      <div class="review-sidebar-footer">
+        <button class="review-submit-btn" disabled>Submit Review</button>
+        <div class="review-submit-hint">Review all hunks to submit</div>
+      </div>
+    </div>
+
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+/* Layout */
+.review-layout { display: flex; flex-direction: column; gap: 16px; }
+
+.review-split {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+/* Progress bar */
+.review-progress { display: flex; align-items: center; gap: 12px; }
+.review-progress-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
+.review-progress-bar { flex: 1; height: 4px; background: var(--bg-hover); border-radius: 2px; }
+.review-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
+
+/* Diff panel */
+.diff-hunk {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.diff-hunk.approved {
+  border-color: var(--success);
+  background: rgba(74, 222, 128, 0.04);
+}
+
+.diff-hunk.rejected {
+  border-color: var(--danger);
+  background: rgba(248, 113, 113, 0.04);
+}
+
+.diff-hunk.revised {
+  border-color: var(--warning);
+  background: rgba(251, 191, 36, 0.04);
+}
+
+.diff-hunk-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--bg-hover);
+  font-size: 12px;
+}
+
+.diff-hunk-title { font-weight: 600; }
+.diff-hunk-range { font-family: monospace; color: var(--text-muted); flex: 1; }
+
+.diff-hunk-status-badge {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 10px;
+}
+
+.diff-hunk-status-badge.status-approved { background: rgba(74,222,128,0.15); color: var(--success); }
+.diff-hunk-status-badge.status-rejected { background: rgba(248,113,113,0.15); color: var(--danger); }
+.diff-hunk-status-badge.status-pending  { background: var(--bg-hover); color: var(--text-muted); }
+
+.diff-lines { overflow-x: auto; }
+.diff-line { font-family: monospace; font-size: 12px; padding: 1px 12px; line-height: 1.6; }
+.diff-add     { background: rgba(74, 222, 128, 0.10); color: var(--success); }
+.diff-remove  { background: rgba(248, 113, 113, 0.10); color: var(--danger); }
+.diff-context { color: var(--text-muted); }
+
+/* Sidebar */
+.review-sidebar {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+  position: sticky;
+  top: 16px;
+}
+
+.review-sidebar-header {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.4px;
+  margin-bottom: 10px;
+}
+
+.review-hunk-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
+
+.review-hunk-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.review-hunk-item:hover { background: var(--bg-hover); }
+.review-hunk-item.active { background: var(--accent-dim); }
+
+.review-hunk-icon { font-size: 13px; flex-shrink: 0; }
+.review-hunk-label { flex: 1; }
+.review-hunk-status { font-size: 11px; color: var(--text-muted); }
+
+.review-hunk-item.approved .review-hunk-icon { color: var(--success); }
+.review-hunk-item.rejected .review-hunk-icon { color: var(--danger); }
+
+.review-sidebar-footer { border-top: 1px solid var(--border); padding-top: 12px; }
+
+.review-submit-btn {
+  width: 100%;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.review-submit-btn:disabled {
+  background: var(--bg-hover);
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.review-submit-hint { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 6px; }
+```
+
+## Interaction notes
+
+- Clicking a hunk in the sidebar scrolls the diff panel to that hunk.
+- Submit becomes enabled only when all hunks have a status (approved/rejected/revised).
+- If any hunks are rejected, submit posts a `task_needs_revision` event with the list of rejected hunk IDs.
+- If all hunks are approved, submit posts a `task_done` event.

package/template/.aioson/skills/premium-visual-design/patterns/task-dependency-graph.md

@@ -0,0 +1,147 @@
+# Task Dependency Graph Pattern
+
+SVG-based DAG (Directed Acyclic Graph) visualization for task dependencies. Zero external dependencies — pure SVG + DOM.
+
+## Example Layout (5 nodes, 3 layers)
+
+```
+Layer 1          Layer 2          Layer 3
+─────────        ─────────        ─────────
+┌──────────┐
+│ research │ ──→ ┌──────────┐
+└──────────┘     │ analyze  │ ──→ ┌──────────┐
+                 └──────────┘     │  write   │
+┌──────────┐     ┌──────────┐ ──→ └──────────┘
+│  gather  │ ──→ │  review  │
+└──────────┘     └──────────┘
+
+x=0              x=160            x=320
+```
+
+Nodes: 120×44px. Column spacing: 160px. Row spacing: 60px.
+
+## SVG Container
+
+```html
+<div class="dep-graph-wrap">
+  <svg class="dep-graph-svg"
+       width="560" height="240"
+       viewBox="0 0 560 240"
+       xmlns="http://www.w3.org/2000/svg">
+
+    <!-- Arrow marker definition -->
+    <defs>
+      <marker id="dep-arrow" markerWidth="8" markerHeight="8"
+              refX="6" refY="3" orient="auto">
+        <path d="M0,0 L0,6 L8,3 z" fill="#2a2e3a"/>
+      </marker>
+    </defs>
+
+    <!-- Edges (draw before nodes so nodes render on top) -->
+    <path class="dep-edge" d="M120,22 C140,22 140,82 160,82"
+          stroke="#2a2e3a" stroke-width="1.5" fill="none"
+          marker-end="url(#dep-arrow)"/>
+
+    <!-- Nodes (use dep-node component) -->
+    <g transform="translate(0, 0)">
+      <!-- dep-node component for "research" -->
+    </g>
+    <g transform="translate(160, 60)">
+      <!-- dep-node component for "analyze" -->
+    </g>
+
+  </svg>
+</div>
+```
+
+## Edge Types
+
+| Type | Stroke | Style |
+|------|--------|-------|
+| `dependency` (normal) | `--border` (#2a2e3a) | Solid, 1.5px |
+| `blocking` | `--danger` (#f87171) | Solid, 2px |
+| `soft` (optional dep) | `--text-muted` | Dashed 4,3 |
+
+```svg
+<!-- Blocking edge -->
+<path class="dep-edge dep-edge-blocking" d="..."
+      stroke="#f87171" stroke-width="2" fill="none"
+      marker-end="url(#dep-arrow-danger)"/>
+
+<!-- Soft/optional edge -->
+<path class="dep-edge dep-edge-soft" d="..."
+      stroke="#8b8fa3" stroke-width="1" stroke-dasharray="4,3"
+      fill="none" marker-end="url(#dep-arrow-muted)"/>
+```
+
+## Layout Algorithm (spec)
+
+1. **Topological sort** — group nodes by their earliest possible layer (depth from source).
+2. **Column assignment** — layer N is at `x = N * 160`.
+3. **Row stacking** — within each layer, nodes stacked at `y = index * 60`.
+4. **Edge routing** — cubic bezier from right port of source to left port of target:
+   - `C1 = (srcX + dx*0.5, srcY)` — horizontal pull at source
+   - `C2 = (tgtX - dx*0.5, tgtY)` — horizontal pull at target
+   - Where `dx = tgtX - srcX` (always positive for left→right edges)
+
+```
+path d="M{sx},{sy} C{c1x},{c1y} {c2x},{c2y} {tx},{ty}"
+```
+
+5. **SVG sizing** — `width = (maxLayer + 1) * 160 + 40`. `height = maxNodesInLayer * 60 + 20`.
+
+## CSS
+
+```css
+.dep-graph-wrap {
+  overflow: auto;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.dep-graph-svg {
+  display: block;
+}
+
+.dep-edge {
+  transition: stroke 0.15s;
+}
+
+.dep-edge:hover {
+  stroke: var(--accent);
+}
+```
+
+## Interaction
+
+- **Click node**: Show task detail panel or tooltip with status, agent, blockers.
+- **Hover node**: Highlight all edges connected to that node (add `.highlighted` class, dim others).
+- **Pan**: Drag the SVG container when graph is wider than viewport.
+
+## Tooltip on hover
+
+```html
+<div class="dep-tooltip" style="position:absolute; display:none;">
+  <div class="dep-tooltip-title">write-prd</div>
+  <div class="dep-tooltip-row">Agent: <strong>planner</strong></div>
+  <div class="dep-tooltip-row">Status: <strong class="state-running">running</strong></div>
+  <div class="dep-tooltip-row">Blocked by: <em>none</em></div>
+</div>
+```
+
+```css
+.dep-tooltip {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  pointer-events: none;
+  z-index: 100;
+}
+.dep-tooltip-title { font-weight: 600; margin-bottom: 4px; }
+.dep-tooltip-row { color: var(--text-muted); line-height: 1.8; }
+```