opencodekit 0.10.0 → 0.11.1

package/dist/template/.opencode/command/triage.md

@@ -0,0 +1,361 @@
+---
+description: AI-powered task triage, prioritization, and workload analysis
+argument-hint: "[--auto-assign] [--sla] [--bottleneck]"
+agent: build
+---
+
+# Triage
+
+## Load Beads Skill
+
+```typescript
+skill({ name: "beads" });
+```
+
+Analyze open tasks and optimize prioritization using dependency graph analysis, SLA tracking, and multi-agent coordination.
+
+## Phase 1: Initialize Beads Connection
+
+```typescript
+bd_init({ _: true, team: "project", role: "triage" });
+```
+
+## Phase 2: Gather Workspace State
+
+Run in parallel:
+
+```typescript
+bd_status({ include_agents: true });
+bd_ls({ status: "open", limit: 50, offset: 0 });
+bd_reservations({ reason: "Check active file locks" });
+bd_inbox({ n: 10, unread: true, global: true });
+```
+
+Capture:
+
+- Total open tasks
+- In-progress count
+- Active agents
+- File locks
+- Pending messages
+
+## Phase 3: Run Graph Analysis
+
+```typescript
+bd_insights({ reason: "Triage analysis" });
+bd_priority({ limit: 10 });
+bd_plan({ reason: "Parallel execution plan" });
+```
+
+This provides:
+
+- **Bottlenecks**: Tasks blocking the most downstream work
+- **Keystones**: High-impact tasks that unlock multiple paths
+- **Cycles**: Circular dependencies (must break)
+- **PageRank**: Importance score based on graph centrality
+- **Parallel Tracks**: Independent work streams
+
+## Phase 4: Priority Classification
+
+### Priority Matrix
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                        URGENCY                                          │
+│              High                           Low                         │
+│  ┌─────────────────────────────┬─────────────────────────────┐          │
+│  │ P0 - CRITICAL               │ P1 - HIGH                   │  High   │
+│  │ • Production down           │ • Major feature blocked     │         │
+│  │ • Security vulnerability    │ • Customer escalation       │  I      │
+│  │ • Data loss risk            │ • Sprint commitment         │  M      │
+│  │                             │                             │  P      │
+│  │ SLA: 4 hours                │ SLA: 24 hours               │  A      │
+│  ├─────────────────────────────┼─────────────────────────────┤  C      │
+│  │ P2 - MEDIUM                 │ P3 - LOW                    │  T      │
+│  │ • Feature enhancement       │ • Tech debt                 │         │
+│  │ • Non-blocking bugs         │ • Nice-to-have              │  Low    │
+│  │ • Performance improvement   │ • Documentation             │         │
+│  │                             │                             │         │
+│  │ SLA: 1 week                 │ SLA: 2 weeks                │         │
+│  └─────────────────────────────┴─────────────────────────────┘          │
+│                                                                         │
+│  P4 - BACKLOG: No SLA, review monthly                                   │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### Impact Scoring Formula
+
+```
+Impact Score = (Downstream Count × 2) + PageRank + (Priority Weight × 3)
+
+Where Priority Weight:
+  P0 = 5, P1 = 4, P2 = 3, P3 = 2, P4 = 1
+```
+
+### SLA Tracking
+
+For each open task, calculate:
+
+```typescript
+const now = new Date();
+const created = new Date(task.created_at);
+const ageHours = (now - created) / (1000 * 60 * 60);
+
+const slaByPriority = { 0: 4, 1: 24, 2: 168, 3: 336, 4: Infinity };
+const slaHours = slaByPriority[task.priority];
+const slaRemaining = slaHours - ageHours;
+const slaStatus =
+  slaRemaining < 0
+    ? "BREACHED"
+    : slaRemaining < slaHours * 0.2
+      ? "AT_RISK"
+      : "OK";
+```
+
+## Phase 5: Bottleneck Analysis
+
+Identify blocking patterns:
+
+### Critical Bottlenecks
+
+Tasks where:
+
+- `downstream_count >= 3` (blocks 3+ tasks)
+- `priority >= 2` (medium or higher)
+- `status = open` (not started)
+
+```
+BOTTLENECK ALERT
+━━━━━━━━━━━━━━━━
+
+🔴 bd-abc12: "Database migration"
+   Blocks: bd-def34, bd-ghi56, bd-jkl78, bd-mno90
+   Impact Score: 24
+   Age: 3 days (SLA: AT_RISK)
+
+   Recommendation: Assign immediately to unblock 4 tasks
+```
+
+### Dependency Cycles
+
+If cycles detected:
+
+```
+⚠️  CIRCULAR DEPENDENCY DETECTED
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+bd-abc12 → bd-def34 → bd-ghi56 → bd-abc12
+
+Resolution Options:
+1. Remove weakest dependency (bd-ghi56 → bd-abc12)
+2. Merge tasks into single unit
+3. Split one task to break cycle
+
+Run: bd update <id> --remove-dep <dep-id>
+```
+
+## Phase 6: Generate Triage Report
+
+```
+╔══════════════════════════════════════════════════════════════════════════╗
+║                           TRIAGE REPORT                                  ║
+║                           [timestamp]                                    ║
+╠══════════════════════════════════════════════════════════════════════════╣
+
+SUMMARY
+━━━━━━━
+Open: XX | In Progress: XX | Blocked: XX | Ready: XX
+
+SLA STATUS
+━━━━━━━━━━
+🔴 BREACHED: X tasks
+🟡 AT RISK:  X tasks
+🟢 ON TRACK: X tasks
+
+BOTTLENECKS (Top 3)
+━━━━━━━━━━━━━━━━━━━
+1. bd-abc12 - "Database migration" - blocks 4 tasks
+2. bd-def34 - "API authentication" - blocks 3 tasks
+3. bd-ghi56 - "Config refactor" - blocks 2 tasks
+
+PRIORITY ORDER
+━━━━━━━━━━━━━━
+Priority │ ID       │ Title                    │ Impact │ SLA
+─────────┼──────────┼──────────────────────────┼────────┼────────
+P0       │ bd-abc12 │ Database migration       │ 24     │ AT_RISK
+P1       │ bd-def34 │ API authentication       │ 18     │ OK
+P2       │ bd-ghi56 │ Config refactor          │ 12     │ OK
+
+PARALLEL TRACKS
+━━━━━━━━━━━━━━━
+Track A (Frontend):     bd-xyz11, bd-xyz22  [can start now]
+Track B (Backend):      bd-xyz33, bd-xyz44  [can start now]
+Track C (Infra):        bd-xyz55            [blocked by bd-abc12]
+
+AGENT WORKLOAD
+━━━━━━━━━━━━━━
+Agent     │ Active │ Completed │ Load
+──────────┼────────┼───────────┼──────
+fe-agent  │ 2      │ 8         │ HIGH
+be-agent  │ 1      │ 12        │ MEDIUM
+qa-agent  │ 0      │ 5         │ LOW
+
+RECOMMENDATIONS
+━━━━━━━━━━━━━━━
+1. 🔴 URGENT: bd-abc12 is blocking 4 tasks - assign to be-agent
+2. 🟡 REBALANCE: fe-agent has high load - redistribute to qa-agent
+3. 🟢 PARALLEL: Start Track A and B simultaneously
+4. ⚠️  STALE: bd-old99 has no activity for 7 days - review or close
+
+╚══════════════════════════════════════════════════════════════════════════╝
+```
+
+## Phase 7: Auto-Assignment (Optional)
+
+If `--auto-assign` flag:
+
+### Assignment Rules
+
+```typescript
+const assignmentRules = {
+  // Role detection from task tags/title
+  "frontend|ui|css|react|vue": "fe",
+  "backend|api|database|server": "be",
+  "test|qa|e2e|integration": "qa",
+  "deploy|ci|docker|infra": "devops",
+  "mobile|ios|android|react-native": "mobile",
+};
+
+// Load balancing: prefer agent with lowest active count
+function selectAgent(role: string, agents: Agent[]): Agent {
+  return agents
+    .filter((a) => a.role === role)
+    .sort((a, b) => a.activeCount - b.activeCount)[0];
+}
+```
+
+### Execute Assignments
+
+```typescript
+// For each unassigned high-priority ready task
+for (const task of readyTasks.filter((t) => !t.assignee && t.priority <= 2)) {
+  const role = detectRole(task);
+  bd_assign({ id: task.id, role, notify: true });
+}
+```
+
+**Output:**
+
+```
+AUTO-ASSIGNMENTS
+━━━━━━━━━━━━━━━━
+
+✓ bd-abc12 → be-agent (detected: backend, API)
+✓ bd-def34 → fe-agent (detected: frontend, React)
+✓ bd-ghi56 → devops (detected: infrastructure)
+
+Skipped:
+- bd-xyz99: Already assigned to qa-agent
+- bd-old88: No matching role detected (manual assignment needed)
+```
+
+## Phase 8: Batch Operations
+
+### Bulk Priority Update
+
+```typescript
+// Escalate all breached SLA tasks
+for (const task of breachedTasks) {
+  if (task.priority > 1) {
+    bd_update({ id: task.id, priority: task.priority - 1 });
+  }
+}
+```
+
+### Stale Task Cleanup
+
+```typescript
+// Find tasks with no activity > 14 days
+const staleTasks = openTasks.filter(
+  (t) => daysSince(t.updated_at) > 14 && t.status === "open",
+);
+
+// Prompt for action
+console.log(`Found ${staleTasks.length} stale tasks. Options:`);
+console.log("1. Close all as 'wontfix'");
+console.log("2. Move to P4 backlog");
+console.log("3. Review individually");
+```
+
+## Phase 9: Sync and Notify
+
+```typescript
+bd_sync({ reason: "Triage complete" });
+
+// Broadcast triage summary if significant changes
+if (assignmentsMade > 0 || priorityChanges > 0) {
+  bd_msg({
+    subj: "Triage Complete",
+    body: `Assigned ${assignmentsMade} tasks, updated ${priorityChanges} priorities`,
+    to: "all",
+    global: true,
+    importance: "normal",
+  });
+}
+```
+
+## Alternative: Manual Triage
+
+If automated tools unavailable:
+
+### Step 1: List and Sort
+
+```bash
+bd list --status=open --sort=priority
+```
+
+### Step 2: Identify Dependencies
+
+```bash
+bd show <id>  # Check "Blocks" and "Blocked By" fields
+```
+
+### Step 3: Manual Assignment
+
+```bash
+bd update <id> --assign=@username
+bd update <id> --priority=1
+```
+
+## Examples
+
+```bash
+/triage                     # Full triage report
+/triage --auto-assign       # Auto-assign ready tasks
+/triage --sla               # Focus on SLA status
+/triage --bottleneck        # Focus on blocking tasks
+/triage --stale             # Review stale tasks
+```
+
+## Integration
+
+After triage:
+
+```
+Recommended Next Commands:
+━━━━━━━━━━━━━━━━━━━━━━━━━
+
+/implement bd-abc12    # Start highest priority task
+/start bd-def34        # Begin planning next task
+/status                # Verify changes applied
+```
+
+## Metrics to Track
+
+Over time, monitor:
+
+- **Throughput**: Tasks completed per week
+- **Cycle Time**: Average time from open → closed
+- **SLA Compliance**: % of tasks within SLA
+- **Bottleneck Frequency**: How often same tasks block
+- **Agent Utilization**: Balance across team

package/dist/template/.opencode/command/ui-review.md

@@ -1,44 +1,315 @@
 ---
-description: Review UI/UX design for quality and aesthetics
-argument-hint: "<image-or-component-path> [bead-id]"
+description: Review UI/UX design for quality, aesthetics, and best practices
+argument-hint: "<image-or-component-path> [--bead=<id>] [--responsive] [--dark-mode]"
 agent: vision
 model: proxypal/gemini-3-pro-preview
 ---
 
 # UI Review: $ARGUMENTS
 
-skill({ name: "frontend-aesthetics" })
-skill({ name: "visual-analysis" })
+Comprehensive UI/UX review with structured scoring and actionable feedback.
 
-Review UI/UX design for quality, aesthetics, and best practices.
+## Load Skills
 
-## Instructions
+```typescript
+skill({ name: "beads" }); // Session protocol
+```
 
-Parse image/component path and optional bead ID from `$ARGUMENTS`.
+```typescript
+skill({ name: "frontend-aesthetics" });
+skill({ name: "visual-analysis" });
+skill({ name: "accessibility-audit" });
+```
 
-## What to Evaluate
+## Parse Arguments
 
-1. **Typography** - Avoid generic fonts (Inter/Roboto without purpose)
-2. **Colors** - Check for overused AI patterns (purple gradients, flat white)
-3. **Layout** - Hierarchy, spacing, visual rhythm
-4. **Motion** - Micro-interactions, transitions
-5. **Atmosphere** - Texture, depth, personality
-6. **Accessibility** - Contrast, focus states, ARIA
+| Argument       | Default  | Description                          |
+| -------------- | -------- | ------------------------------------ |
+| Path           | required | Image, screenshot, or component file |
+| `--bead`       | none     | Link findings to bead                |
+| `--responsive` | false    | Include responsive breakpoint review |
+| `--dark-mode`  | false    | Include dark mode review             |
+| `--compare`    | none     | Compare against design spec          |
+
+---
+
+## Review Categories
+
+### 1. Typography (Weight: 15%)
+
+| Check           | Pass                                    | Fail                                |
+| --------------- | --------------------------------------- | ----------------------------------- |
+| Font purpose    | Intentional choice for brand/context    | Generic Inter/Roboto without reason |
+| Hierarchy       | Clear H1 > H2 > H3 > body scale         | Flat, unclear importance            |
+| Readability     | Appropriate size, line-height, contrast | Too small, cramped, low contrast    |
+| Weight contrast | Uses extremes (300 vs 700)              | Muddy middle weights (400 vs 500)   |
+| Pairing         | Harmonious combination                  | Clashing or too similar             |
+
+**Scoring:**
+
+- 10: Distinctive, intentional, excellent hierarchy
+- 7-9: Good choices, minor issues
+- 4-6: Generic but functional
+- 1-3: Poor readability or choices
+
+### 2. Color (Weight: 15%)
+
+| Check            | Pass                                  | Fail                         |
+| ---------------- | ------------------------------------- | ---------------------------- |
+| Palette cohesion | Unified, intentional palette          | Random or clashing colors    |
+| Brand alignment  | Colors support brand identity         | Generic or off-brand         |
+| Contrast         | WCAG AA minimum (4.5:1 text)          | Insufficient contrast        |
+| Semantic usage   | Consistent meaning (red=error)        | Confusing color meaning      |
+| No AI slop       | Avoids purple/blue gradients, #667eea | Generic AI-generated palette |
+
+**Scoring:**
+
+- 10: Distinctive, accessible, cohesive
+- 7-9: Good palette, minor issues
+- 4-6: Functional but generic
+- 1-3: Accessibility failures or AI slop
+
+### 3. Layout & Spacing (Weight: 20%)
+
+| Check               | Pass                           | Fail                    |
+| ------------------- | ------------------------------ | ----------------------- |
+| Visual hierarchy    | Clear content priority         | Everything same weight  |
+| Spacing consistency | Uses spacing scale (4/8/16/24) | Random pixel values     |
+| Alignment           | Elements properly aligned      | Misaligned or sloppy    |
+| White space         | Breathing room, not cramped    | Too dense or too sparse |
+| Grid system         | Consistent column structure    | Arbitrary positioning   |
+
+**Scoring:**
+
+- 10: Professional, balanced, rhythmic
+- 7-9: Good structure, minor inconsistencies
+- 4-6: Functional but lacks polish
+- 1-3: Chaotic or broken layout
+
+### 4. Interactive States (Weight: 15%)
+
+| State          | Required      | Check                              |
+| -------------- | ------------- | ---------------------------------- |
+| Default        | Yes           | Clear, inviting appearance         |
+| Hover          | Yes           | Visible change, not jarring        |
+| Focus          | Yes           | Clear ring/outline for keyboard    |
+| Active/Pressed | Recommended   | Feedback on click                  |
+| Disabled       | If applicable | Obviously inactive, not just faded |
+| Loading        | If applicable | Clear loading indication           |
+
+**Scoring:**
+
+- 10: All states polished, consistent
+- 7-9: Most states covered, minor gaps
+- 4-6: Basic states only
+- 1-3: Missing critical states (focus)
+
+### 5. Accessibility (Weight: 20%)
+
+| Check          | Pass                               | Fail                      |
+| -------------- | ---------------------------------- | ------------------------- |
+| Color contrast | 4.5:1 text, 3:1 UI                 | Below WCAG AA             |
+| Focus visible  | Clear focus indicator              | Hidden or invisible focus |
+| Touch targets  | 44x44px minimum                    | Too small to tap          |
+| Alt text       | Images have descriptions           | Missing alt attributes    |
+| Keyboard nav   | All interactive elements reachable | Keyboard traps or gaps    |
+| Screen reader  | Logical reading order              | Confusing or broken       |
+
+**Scoring:**
+
+- 10: WCAG AAA compliant
+- 7-9: WCAG AA compliant, minor issues
+- 4-6: Some accessibility, gaps remain
+- 1-3: Significant barriers
+
+### 6. Visual Polish (Weight: 15%)
+
+| Check               | Pass                     | Fail                       |
+| ------------------- | ------------------------ | -------------------------- |
+| Consistency         | Same patterns throughout | Inconsistent styling       |
+| Attention to detail | Pixel-perfect alignment  | Sloppy edges, misalignment |
+| Motion/animation    | Purposeful, smooth       | Jarring or excessive       |
+| Depth/shadow        | Consistent shadow system | Random or heavy shadows    |
+| Icons               | Consistent style, size   | Mixed icon sets            |
+
+**Scoring:**
+
+- 10: Exceptional craft and attention
+- 7-9: Professional, polished
+- 4-6: Acceptable, room for improvement
+- 1-3: Unpolished, inconsistent
+
+---
 
 ## Anti-Patterns to Flag
 
-- Cookie-cutter card layouts
-- Excessive rounded corners
-- Glassmorphism without purpose
-- Generic stock illustration style
+| Anti-Pattern                      | Severity | Why It's Bad             |
+| --------------------------------- | -------- | ------------------------ |
+| Purple/blue gradient backgrounds  | Warning  | AI slop signature        |
+| 3-column feature cards with icons | Warning  | Overused, generic        |
+| Excessive rounded corners (16px+) | Info     | Trendy but often misused |
+| Glassmorphism without purpose     | Warning  | Style over function      |
+| Generic stock illustrations       | Warning  | Lacks personality        |
+| Drop shadows on everything        | Info     | Visual noise             |
+| Flat white (#FFFFFF) backgrounds  | Info     | Harsh, sterile           |
+
+---
+
+## Responsive Review (--responsive)
+
+Check at each breakpoint:
+
+| Breakpoint | Width   | Check                                |
+| ---------- | ------- | ------------------------------------ |
+| Mobile     | 375px   | Touch targets, stacking, readability |
+| Tablet     | 768px   | Layout adaptation, spacing           |
+| Desktop    | 1280px  | Full layout, hover states            |
+| Wide       | 1536px+ | Content doesn't stretch awkwardly    |
+
+**Common responsive issues:**
+
+- Text too small on mobile
+- Horizontal scroll
+- Touch targets too close
+- Images not responsive
+- Hidden content on mobile
+
+---
+
+## Dark Mode Review (--dark-mode)
+
+| Check                | Pass                     | Fail                     |
+| -------------------- | ------------------------ | ------------------------ |
+| Contrast maintained  | Text readable on dark bg | Washed out or too bright |
+| Colors adapted       | Not just inverted        | Jarring or ugly colors   |
+| Images appropriate   | Dark-compatible images   | Light images on dark bg  |
+| Shadows adjusted     | Softer or removed        | Heavy shadows on dark    |
+| Focus states visible | Clear on dark background | Invisible focus ring     |
+
+---
+
+## Output Format
+
+### Review Scorecard
+
+```
+UI Review: [Component/Screen Name]
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Category Scores:
+├── Typography:      8/10  ████████░░
+├── Color:           6/10  ██████░░░░  ⚠ Issues
+├── Layout:          9/10  █████████░
+├── Interactive:     7/10  ███████░░░
+├── Accessibility:   5/10  █████░░░░░  ⚠ Critical
+└── Visual Polish:   8/10  ████████░░
+
+Overall Score: 7.2/10 (Good, needs work)
+
+Grade: B
+```
+
+### Findings by Severity
+
+```
+Critical (Must Fix):
+━━━━━━━━━━━━━━━━━━━
+
+1. [A11Y] Focus states invisible on buttons
+   Location: All primary buttons
+   Impact: Keyboard users cannot navigate
+   Fix: Add `focus-visible:ring-2 focus-visible:ring-primary`
+
+2. [A11Y] Color contrast 2.8:1 on muted text
+   Location: Footer links, captions
+   Impact: WCAG AA failure
+   Fix: Change from #9CA3AF to #6B7280
+
+Warning (Should Fix):
+━━━━━━━━━━━━━━━━━━━━
+
+3. [COLOR] Purple-blue gradient detected
+   Location: Hero background
+   Impact: AI slop aesthetic
+   Fix: Consider solid color or subtle texture
+
+4. [LAYOUT] Inconsistent spacing
+   Location: Card grid gaps
+   Impact: Visual rhythm broken
+   Fix: Standardize to 24px gap
+
+Info (Nice to Have):
+━━━━━━━━━━━━━━━━━━━
 
-## Output
+5. [TYPOGRAPHY] Could use more weight contrast
+   Location: Section headings
+   Suggestion: Try font-bold (700) instead of semibold (600)
+```
 
-Provide:
+### Code Fixes
+
+```tsx
+// Before: Invisible focus
+<button className="bg-primary text-white">
+  Submit
+</button>
+
+// After: Visible focus
+<button className="bg-primary text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+  Submit
+</button>
+```
+
+---
+
+## Bead Integration
+
+If `--bead=<id>` provided:
+
+```typescript
+// Create issues for critical findings
+bd_add({
+  title: "[UI] Fix invisible focus states",
+  desc: "Focus states not visible on primary buttons.\n\nFix: Add focus-visible ring classes",
+  type: "bug",
+  pri: 1,
+  parent: "<bead-id>",
+  tags: ["accessibility", "ui"],
+});
+
+// Update review.md
+write(".beads/artifacts/<bead-id>/review.md", reviewContent);
+```
+
+---
+
+## Examples
+
+```bash
+# Review a screenshot
+/ui-review designs/homepage.png
+
+# Review with responsive check
+/ui-review src/components/Card.tsx --responsive
+
+# Review and link to bead
+/ui-review screenshots/dashboard.png --bead=bd-feature-123
+
+# Full review with dark mode
+/ui-review app/page.tsx --responsive --dark-mode
+
+# Compare to design spec
+/ui-review screenshots/current.png --compare designs/mockup.png
+```
+
+---
 
-1. Summary of issues found
-2. Specific actionable recommendations
-3. Code snippets for improvements
-4. Before/after suggestions
+## Related Commands
 
-If bead ID provided, record findings to the bead.
+| Need                | Command                |
+| ------------------- | ---------------------- |
+| Analyze mockup      | `/analyze-mockup`      |
+| Fix UI issues       | `/fix-ui`              |
+| Accessibility audit | `/accessibility-check` |
+| Design from scratch | `/design`              |
+| Audit design system | `/design-audit`        |