@jaimevalasek/aioson 1.4.0 → 1.6.0

package/template/.aioson/skills/premium-visual-design/components/notification-center.md

@@ -0,0 +1,136 @@
+# Notification Center Component
+
+Bell icon with unread count badge + toggle for the notification panel dropdown.
+
+## Anatomy
+
+```
+  🔔 [3]       ← no notifications: 🔔 only
+  🔔 [!]       ← critical: red badge
+```
+
+## States
+
+| State | Bell | Badge |
+|-------|------|-------|
+| No notifications | muted color | hidden |
+| Has unread | normal color | accent bg, count |
+| Has critical unread | normal color | red bg, count |
+| Panel open | accent bg | same |
+
+## HTML Structure
+
+```html
+<div class="notif-center">
+  <button class="notif-bell" id="notif-bell" aria-label="Notifications" aria-expanded="false">
+    <!-- Bell SVG or emoji -->
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+      <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+    </svg>
+  </button>
+
+  <!-- Badge — hidden when count = 0 -->
+  <span class="notif-badge" id="notif-badge" hidden>3</span>
+
+  <!-- Panel wrapper — shown on bell click -->
+  <div class="notif-panel-wrapper" id="notif-panel-wrapper">
+    <!-- Insert notification-panel.md pattern here -->
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.notif-center {
+  position: relative;
+  display: inline-flex;
+}
+
+.notif-bell {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  transition: background 0.15s, color 0.15s;
+}
+
+.notif-bell:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.notif-bell[aria-expanded="true"] {
+  background: var(--accent-dim);
+  color: var(--accent);
+}
+
+.notif-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  padding: 0 4px;
+  pointer-events: none;
+}
+
+.notif-badge.critical {
+  background: var(--danger);
+}
+
+.notif-panel-wrapper {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 500;
+  display: none;
+}
+
+.notif-panel-wrapper.open {
+  display: block;
+}
+```
+
+## Interaction (JS spec)
+
+```javascript
+// Toggle panel on bell click
+bellBtn.addEventListener('click', function() {
+  const isOpen = wrapper.classList.toggle('open');
+  bellBtn.setAttribute('aria-expanded', String(isOpen));
+});
+
+// Close on outside click
+document.addEventListener('click', function(e) {
+  if (!notifCenter.contains(e.target)) {
+    wrapper.classList.remove('open');
+    bellBtn.setAttribute('aria-expanded', 'false');
+  }
+});
+
+// Update badge
+function setNotifCount(count, hasCritical) {
+  badge.hidden = count === 0;
+  badge.textContent = count > 99 ? '99+' : String(count);
+  badge.classList.toggle('critical', hasCritical);
+}
+```
+
+## Placement
+
+Place in the top-right of the dashboard header bar. Keep 8px gap from other header icons.

package/template/.aioson/skills/premium-visual-design/components/review-action-bar.md

@@ -0,0 +1,188 @@
+# Review Action Bar Component
+
+Approve / Reject / Comment bar shown at the bottom of each diff hunk in the review workflow.
+
+## Anatomy
+
+```
+┌────────────────────────────────────────────────────────┐
+│ Hunk 2/4 · @@ -45,7 +45,9 @@       [✓ Approve] [✗ Reject] [💬 Comment] │
+└────────────────────────────────────────────────────────┘
+```
+
+## States
+
+| State | Approve btn | Reject btn | Comment btn |
+|-------|------------|-----------|------------|
+| `pending` | outlined | outlined | outlined |
+| `approved` | filled green | dimmed | dimmed |
+| `rejected` | dimmed | filled red | normal (comment may be shown) |
+| `revised` | outlined | outlined | amber tint |
+
+## HTML Structure
+
+```html
+<div class="review-action-bar" data-hunk-id="hunk-2" data-status="pending">
+  <span class="review-hunk-label">Hunk 2/4 &nbsp;·&nbsp; @@ -45,7 +45,9 @@</span>
+
+  <div class="review-actions">
+    <button class="review-btn approve" data-action="approve">
+      ✓ Approve
+    </button>
+    <button class="review-btn reject" data-action="reject">
+      ✗ Reject
+    </button>
+    <button class="review-btn comment" data-action="comment">
+      💬 Comment
+    </button>
+  </div>
+</div>
+
+<!-- Comment expansion (hidden by default, shown when comment clicked) -->
+<div class="review-comment-box" hidden>
+  <textarea class="review-comment-input" placeholder="Leave a comment..."></textarea>
+  <div class="review-comment-actions">
+    <button class="review-btn comment active">Send</button>
+    <button class="review-btn" data-action="cancel-comment">Cancel</button>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.review-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--bg-hover);
+  border-top: 1px solid var(--border);
+  border-radius: 0 0 6px 6px;
+}
+
+.review-hunk-label {
+  flex: 1;
+  font-size: 11px;
+  font-family: monospace;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.review-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.review-btn {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: none;
+  color: var(--text-muted);
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.review-btn:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
+}
+
+/* Approve */
+.review-btn.approve:hover,
+.review-btn.approve.active {
+  background: rgba(74, 222, 128, 0.15);
+  color: var(--success);
+  border-color: var(--success);
+}
+
+/* Reject */
+.review-btn.reject:hover,
+.review-btn.reject.active {
+  background: rgba(248, 113, 113, 0.15);
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+/* Comment */
+.review-btn.comment:hover,
+.review-btn.comment.active {
+  background: rgba(192, 132, 252, 0.15);
+  color: var(--purple, #c084fc);
+  border-color: var(--purple, #c084fc);
+}
+
+.review-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* Comment box */
+.review-comment-box {
+  padding: 10px 12px;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+}
+
+.review-comment-input {
+  width: 100%;
+  min-height: 64px;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  font-size: 13px;
+  padding: 8px 10px;
+  resize: vertical;
+  font-family: var(--font, monospace);
+}
+
+.review-comment-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.review-comment-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  justify-content: flex-end;
+}
+```
+
+## Progress Indicator
+
+Show overall review progress above the hunk list:
+
+```html
+<div class="review-progress">
+  <span class="review-progress-label">2 / 4 hunks reviewed</span>
+  <div class="review-progress-bar">
+    <div class="review-progress-fill" style="width: 50%"></div>
+  </div>
+</div>
+```
+
+```css
+.review-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 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; }
+/* All done: green */
+[data-all-done] .review-progress-fill { background: var(--success); }
+```
+
+## Interaction notes
+
+- When `approve` is clicked, add `.active` to approve btn, add `disabled` to reject.
+- When `reject` is clicked, add `.active` to reject btn, optionally auto-open comment box for rejection reason.
+- Click outside comment box or Cancel: collapse it, clear textarea.
+- Sending a comment does NOT change approval state — it's independent.

package/template/.aioson/skills/premium-visual-design/components/team-switcher.md

@@ -0,0 +1,131 @@
+# Team Switcher Component
+
+Sidebar squad navigation. Shows all squads, highlights the active one, displays mode badge and agent count.
+
+## Anatomy
+
+```
+─ Squads ─────────────────
+  ● Alpha Squad  [software]  3 agents   ← active (accent border + bg)
+    Bravo Squad  [content]   2 agents
+    Gamma Squad  [research]  1 agent
+──────────────────────────
+  + New Squad
+```
+
+## HTML Structure
+
+```html
+<nav class="team-switcher">
+  <div class="team-switcher-header">Squads</div>
+
+  <a class="team-item active" href="/squad/alpha">
+    <div class="team-name">Alpha Squad</div>
+    <div class="team-meta">
+      <span class="mode-badge mode-software">software</span>
+      <span class="agent-count">3 agents</span>
+    </div>
+  </a>
+
+  <a class="team-item" href="/squad/bravo">
+    <div class="team-name">Bravo Squad</div>
+    <div class="team-meta">
+      <span class="mode-badge mode-content">content</span>
+      <span class="agent-count">2 agents</span>
+    </div>
+  </a>
+
+  <div class="team-switcher-divider"></div>
+  <a class="team-item team-item-new" href="/squad/new">+ New Squad</a>
+</nav>
+```
+
+## CSS
+
+```css
+.team-switcher {
+  width: 240px;
+}
+
+.team-switcher-header {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 0 16px 8px;
+  letter-spacing: 0.5px;
+}
+
+.team-item {
+  display: block;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--text);
+  margin: 1px 8px;
+  border-left: 2px solid transparent;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+.team-item:hover {
+  background: var(--bg-hover);
+  text-decoration: none;
+}
+
+.team-item.active {
+  background: var(--accent-dim);
+  border-left-color: var(--accent);
+  color: var(--accent);
+}
+
+.team-item.active .team-name { color: var(--accent); }
+
+.team-name {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.team-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 3px;
+}
+
+/* Mode badges */
+.mode-badge {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-weight: 500;
+}
+
+.mode-software { background: rgba(74, 222, 128, 0.15); color: var(--success); }
+.mode-content  { background: rgba(108, 138, 255, 0.15); color: var(--accent); }
+.mode-research { background: rgba(251, 191, 36, 0.15);  color: var(--warning); }
+.mode-mixed    { background: var(--bg-hover); color: var(--text-muted); }
+
+.agent-count {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.team-switcher-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 8px 16px;
+}
+
+.team-item-new {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.team-item-new:hover { color: var(--accent); }
+```
+
+## Interaction notes
+
+- Active item has `border-left: 2px solid var(--accent)` — requires `margin-left: 8px` on items to preserve alignment.
+- On narrow screens (< 768px) the sidebar hides; team switcher may move to a top dropdown.
+- Optionally show an unread notification dot on squad items: small `6px` circle (accent color) after the agent count.

package/template/.aioson/skills/premium-visual-design/patterns/agent-message-thread.md

@@ -0,0 +1,198 @@
+# Agent Message Thread Pattern
+
+Inter-squad message feed. Displays communication between agents across squads in a vertical timeline.
+
+## Layout
+
+Vertical thread, chronological (oldest at top, newest at bottom). Each message: avatar (agent-badge) on left, message bubble on right. Optional timeline connector line between items.
+
+```
+ ⚡  ┌─ writer · alpha-squad · 2m ago ─────────────────────┐
+     │ Here's the draft PRD. @planner please review §3.     │
+     │ Related: #write-prd                                   │
+     │ 👍 2  ✅ 1  💬 1 reply                               │
+     └───────────────────────────────────────────────────────┘
+
+ 👤  ┌─ planner · alpha-squad · 1m ago ─────────────────────┐
+     │ Section 3 looks good. Forwarding to @bravo-squad      │
+     │ for implementation estimates.                          │
+     └───────────────────────────────────────────────────────┘
+```
+
+## Message Types
+
+| Type | Visual treatment |
+|------|-----------------|
+| `message` | Standard bubble |
+| `handoff` | Special card: `→ from → to`, summary, task reference |
+| `decision` | Highlighted with left border (accent), bold label "Decision" |
+| `milestone` | Green left border, italic summary |
+
+## HTML Structure
+
+### Standard message
+
+```html
+<div class="thread">
+
+  <!-- Standard message -->
+  <div class="thread-msg" data-type="message">
+    <div class="thread-msg-avatar">
+      <span class="agent-badge agent-badge-auto sm">⚡</span>
+    </div>
+    <div class="thread-msg-bubble">
+      <div class="thread-msg-header">
+        writer &nbsp;·&nbsp; alpha-squad &nbsp;·&nbsp; 2m ago
+      </div>
+      <div class="thread-msg-body">
+        Here's the draft PRD.
+        <span class="mention mention-agent">@planner</span>
+        please review §3. Related:
+        <span class="mention mention-task">#write-prd</span>
+      </div>
+      <div class="thread-reactions">
+        <button class="reaction-btn">👍 2</button>
+        <button class="reaction-btn">✅ 1</button>
+        <button class="reaction-btn">💬 1 reply</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Handoff message -->
+  <div class="thread-msg thread-msg-handoff" data-type="handoff">
+    <div class="thread-msg-avatar">
+      <span class="agent-badge agent-badge-auto sm">⚡</span>
+    </div>
+    <div class="thread-msg-bubble">
+      <div class="thread-msg-header">orchestrator &nbsp;·&nbsp; 30s ago</div>
+      <div class="thread-handoff-card">
+        <span class="handoff-from">analyst</span>
+        <span class="handoff-arrow">→</span>
+        <span class="handoff-to">architect</span>
+        <span class="handoff-task">#discovery-phase</span>
+      </div>
+      <div class="thread-msg-body">Discovery complete. Passing findings to architect.</div>
+    </div>
+  </div>
+
+  <!-- Decision message -->
+  <div class="thread-msg thread-msg-decision" data-type="decision">
+    <div class="thread-msg-avatar">
+      <span class="agent-badge agent-badge-human sm">👤</span>
+    </div>
+    <div class="thread-msg-bubble">
+      <div class="thread-msg-header">pm &nbsp;·&nbsp; alpha-squad &nbsp;·&nbsp; 5m ago</div>
+      <div class="thread-decision-label">Decision</div>
+      <div class="thread-msg-body">Use SQLite for local storage. Rationale: zero infra overhead.</div>
+    </div>
+  </div>
+
+</div>
+```
+
+## CSS
+
+```css
+.thread {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.thread-msg {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.thread-msg-avatar {
+  flex-shrink: 0;
+  padding-top: 2px;
+}
+
+.thread-msg-bubble {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 14px;
+  flex: 1;
+  min-width: 0;
+}
+
+.thread-msg-header {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 5px;
+}
+
+.thread-msg-body {
+  font-size: 13px;
+  line-height: 1.55;
+  word-wrap: break-word;
+}
+
+/* Mention styles — see mention-autocomplete.md */
+.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: #22d3ee; }
+.mention-task  { background: rgba(192,132,252,0.10); color: #c084fc; }
+
+/* Reactions */
+.thread-reactions {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.reaction-btn {
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text-muted);
+  transition: border-color 0.15s;
+}
+
+.reaction-btn:hover { border-color: var(--accent); color: var(--text); }
+
+/* Handoff card */
+.thread-msg-handoff .thread-msg-bubble { border-color: var(--accent); }
+.thread-handoff-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 500;
+}
+.handoff-arrow { color: var(--accent); font-size: 16px; }
+.handoff-from, .handoff-to { font-family: monospace; }
+.handoff-task { font-size: 11px; color: #c084fc; margin-left: 4px; }
+
+/* Decision card */
+.thread-msg-decision .thread-msg-bubble {
+  border-left: 3px solid var(--accent);
+}
+.thread-decision-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: var(--accent);
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+}
+
+/* Milestone */
+.thread-msg[data-type="milestone"] .thread-msg-bubble {
+  border-left: 3px solid var(--success);
+}
+```
+
+## Interaction notes
+
+- "Reply" button expands an inline thread (nested `.thread` with `margin-left: 36px`).
+- Reactions are togglable: clicking one you already gave removes it (add `active` class + accent fill).
+- For long threads (> 30 messages), virtualize or paginate. Show "Load earlier" at top.