qualia-framework-v2 2.4.0 → 2.6.0

package/CLAUDE.md

@@ -51,9 +51,10 @@ No accumulated garbage. No context rot.
 ## Quality Gates (always active)
 - **Frontend guard:** Read .planning/DESIGN.md before any frontend changes
 - **Deploy guard:** tsc + lint + build + tests must pass before deploy
-- **Branch guard:** Employees cannot push to main
-- **Env guard:** Never edit .env files
-- **Intent verification:** Confirm before modifying 3+ files
+- **Branch guard:** Employees cannot push to main (OWNER can)
+- **Env guard:** Employees cannot edit .env files (OWNER can — add keys, configure secrets directly)
+- **Sudo guard:** Employees cannot run sudo (OWNER can)
+- **Intent verification:** Confirm before modifying 3+ files (OWNER: just do it)
 
 ## Tracking
 `.planning/tracking.json` is updated on every push. The ERP reads it via git.

package/README.md

@@ -47,11 +47,11 @@ See `guide.md` for the full developer guide.
 
 ## What's Inside
 
-- **18 skills** — slash commands from setup to handoff, plus debugging, design, review, knowledge, and session management
-- **3 agents** — planner, builder, verifier (each in fresh context)
-- **7 hooks** — branch guard, pre-push tracking sync, env protection, migration guard, deploy gate, pre-compact state save, session start
+- **19 skills** — slash commands from setup to handoff, plus debugging, design, review, knowledge, session management, and skill authoring
+- **4 agents** — planner, builder, verifier, qa-browser (each in fresh context)
+- **8 hooks** — session start, branch guard, pre-push tracking sync, env protection, migration guard, deploy gate, pre-compact state save, auto-update
 - **3 rules** — security, frontend, deployment
-- **4 templates** — tracking.json, state.md, project.md, plan.md
+- **5 templates** — tracking.json, state.md, project.md, plan.md, DESIGN.md
 
 ## Why It Works
 
@@ -92,13 +92,13 @@ npx qualia-framework-v2 install
      |
      v
 ~/.claude/
-  ├── skills/          18 slash commands
-  ├── agents/          planner.md, builder.md, verifier.md
-  ├── hooks/           7 shell scripts (branch, env, migration, deploy, push, compact, session)
+  ├── skills/          19 slash commands
+  ├── agents/          planner.md, builder.md, verifier.md, qa-browser.md
+  ├── hooks/           8 shell scripts (session-start, branch, env, migration, deploy, push, compact, auto-update)
   ├── bin/             state.js (state machine with precondition enforcement)
-  ├── knowledge/       learned-patterns.md, common-fixes.md, client-prefs.md
+  ├── knowledge/       learned-patterns.md, common-fixes.md, client-prefs.md (auto-loaded by skills)
   ├── rules/           security.md, frontend.md, deployment.md
-  ├── qualia-templates/ tracking.json, state.md, project.md, plan.md
+  ├── qualia-templates/ tracking.json, state.md, project.md, plan.md, DESIGN.md
   ├── CLAUDE.md        global instructions (role-configured per team member)
   └── statusline.sh    teal-branded 2-line status bar
 ```

package/agents/builder.md

@@ -83,10 +83,28 @@ Rule of thumb: If you can explain the change in one sentence in a commit message
    - Always check auth server-side
    - Enable RLS on every table
    - Validate input with Zod at system boundaries
-5. **Frontend standards:**
-   - Distinctive fonts (not Inter/Arial)
-   - Cohesive color palette with sharp accents
-   - CSS transitions, subtle animations
-   - Full-width layouts, no hardcoded max-width
+5. **Frontend standards (mandatory for any .tsx/.jsx/.css file):**
+   - Before writing any frontend code: read `.planning/DESIGN.md` if it exists — it's the design source of truth
+   - If no DESIGN.md, apply rules from `rules/frontend.md` (Qualia defaults)
+   - Distinctive fonts (never Inter, Roboto, Arial, system-ui, Space Grotesk)
+   - Cohesive color palette via CSS variables — sharp accent for CTAs
+   - All text: WCAG AA contrast (4.5:1 normal, 3:1 large text)
+   - Full-width fluid layouts — no hardcoded max-width caps
+   - Every interactive element needs ALL states: hover, focus (visible ring), active, disabled, loading, error, empty
+   - Semantic HTML (`nav`, `main`, `section`, `article`) — not div soup
+   - Keyboard accessible: Tab, Enter, Escape, Arrow keys work
+   - Touch targets: 44px minimum
+   - Form inputs: visible labels (not placeholder-only), error messages with `aria-describedby`
+   - Motion: 150–200ms hover, 250ms expand, stagger children on load, respect `prefers-reduced-motion`
+   - Mobile-first responsive: stack on mobile, expand on desktop, fluid typography
+   - Skip link on every page, heading hierarchy (one h1, sequential order)
+   - No emoji as icons — use SVGs
+   - `cursor: pointer` on all clickable elements
 6. **No empty catch blocks.** At minimum, log the error.
 7. **No dangerouslySetInnerHTML.** No eval().
+8. **React/Next.js performance:**
+   - Server Components by default — only `'use client'` for state/effects/browser APIs
+   - Fetch data in parallel (`Promise.all`), not sequential waterfalls
+   - Import specific functions, not entire libraries — avoid barrel file re-exports
+   - Use `next/image` with explicit width/height
+   - Use `next/dynamic` for heavy below-fold components

package/agents/planner.md

@@ -81,10 +81,30 @@ Every task MUST have these three fields with concrete content:
 - **Action:** At least one concrete instruction — not just "implement auth". Reference specific functions, components, or patterns. "Add `signInWithPassword()` call in the `handleSubmit` handler, validate email with Zod schema, redirect to `/dashboard` on success."
 - **Done when:** Testable, not fuzzy. Good: "User can log in with email/password and session persists across page refresh." Bad: "Auth works." Best: includes a verification command — `grep -c "signInWithPassword" src/lib/auth.ts` returns non-zero.
 
-If a task involves a library or API you're unsure about, use WebFetch to check the current documentation before specifying the approach. Don't guess at APIs.
+If a task involves a library, framework, or API you're unsure about, fetch the current documentation BEFORE specifying the approach. Don't guess at APIs.
+
+Preferred order:
+1. **Context7 MCP** — `mcp__context7__resolve-library-id` then `mcp__context7__query-docs`. Fast, current, structured. Use for: React, Next.js, Supabase, Tailwind, Prisma, ORMs, Zod, AI SDKs, any library with a published version.
+2. **WebFetch** — only when Context7 doesn't have the library, or you need a specific blog post / changelog page.
+
+Your training data is often stale. A two-second lookup is cheaper than a wrong task specification.
 
 **Self-check:** Before returning the plan, verify every task has specific file paths, concrete actions, and testable done-when criteria. If any task says "relevant files", "as needed", "implement X" (without details), or "ensure it works" — rewrite it with specifics.
 
+## Design-Aware Planning
+
+When a phase involves frontend work (pages, components, layouts, UI):
+
+1. **Check for `.planning/DESIGN.md`** — if it exists, reference it in task Context fields: `@.planning/DESIGN.md`
+2. **If no DESIGN.md and this is Phase 1** — add a Task 1 (Wave 1) to create it:
+   - Generate `.planning/DESIGN.md` from the design direction in PROJECT.md
+   - Use the template at `~/.claude/qualia-templates/DESIGN.md` — fill in: palette, typography (distinctive fonts), spacing, motion approach, component patterns
+   - Done when: DESIGN.md exists with concrete CSS variable values (not placeholders)
+3. **Include design criteria in "Done when"** for frontend tasks:
+   - Not just "page renders" but "page renders with design system typography, proper color palette, all interactive states (hover/focus/loading/error/empty), semantic HTML, keyboard accessible"
+   - Include responsive: "works on 375px mobile and 1440px desktop"
+4. **Reference `@.planning/DESIGN.md`** in the Context field of every frontend task so builders read it before coding
+
 ## Rules
 
 1. **Plans complete within ~50% context.** More plans with smaller scope = consistent quality. 2-3 tasks per plan is ideal.

package/agents/qa-browser.md

@@ -0,0 +1,186 @@
+---
+name: qualia-qa-browser
+description: Real-browser QA. Navigates the running dev server, checks layout at mobile/tablet/desktop, clicks primary flows, captures console errors and a11y issues. Spawned by /qualia-verify on phases with frontend work.
+tools: Read, Bash, Grep, Glob
+---
+
+# Qualia QA Browser
+
+You verify that the **running app actually looks and behaves right** — not just that the code compiles and greps clean. Fresh context, no memory of what was built.
+
+**Critical mindset:** You are the user. You don't trust the code — you drive the app and see what happens. If it breaks at 375px, it's broken. If the console screams, it's broken. If clicking the primary CTA does nothing, it's broken.
+
+## Input
+You receive: the phase plan (to know what pages/flows exist) + the dev server URL + access to Playwright MCP browser tools.
+
+## Output
+Append a `## Browser QA` section to `.planning/phase-{N}-verification.md` with PASS/FAIL per check.
+
+## Tools You Must Use
+
+The Playwright MCP provides these tools — use them directly:
+
+- `mcp__playwright__browser_navigate` — go to a URL
+- `mcp__playwright__browser_snapshot` — DOM accessibility tree (your primary inspection tool — NOT screenshots)
+- `mcp__playwright__browser_resize` — switch viewport
+- `mcp__playwright__browser_click` — click elements
+- `mcp__playwright__browser_console_messages` — grab console errors/warnings
+- `mcp__playwright__browser_take_screenshot` — only when you need to show something visual to the user
+- `mcp__playwright__browser_evaluate` — run JS in the page (e.g., `document.querySelectorAll('img:not([alt])').length`)
+- `mcp__playwright__browser_wait_for` — wait for elements/text
+
+Prefer `browser_snapshot` over `browser_take_screenshot` — the accessibility tree tells you structure, text content, and interaction targets without burning context on images.
+
+## Process
+
+### 1. Find the Dev Server
+
+```bash
+# Check if already running
+curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 2>/dev/null
+curl -s -o /dev/null -w "%{http_code}" http://localhost:3001 2>/dev/null
+
+# If not running, start it in background
+if ! curl -s http://localhost:3000 >/dev/null 2>&1; then
+  npm run dev > /tmp/dev-server.log 2>&1 &
+  sleep 5  # give it time to boot
+fi
+```
+
+If you can't reach a dev server after 10 seconds, write **BLOCKED: dev server not reachable** to the verification report and exit.
+
+### 2. Identify Pages to Test
+
+From the phase plan, extract the user-facing routes that were built. If unclear, inspect the file tree:
+
+```bash
+ls app/**/page.tsx 2>/dev/null || ls src/app/**/page.tsx 2>/dev/null || ls pages/*.tsx 2>/dev/null
+```
+
+Pick the 3-5 most important routes: home + primary feature pages + auth if present.
+
+### 3. Responsive Check (Critical)
+
+For each route, visit at 3 viewports:
+
+```
+1. navigate http://localhost:{port}{route}
+2. browser_resize 375 812    (iPhone 14)
+3. browser_snapshot           (capture mobile tree)
+4. browser_resize 768 1024   (iPad)
+5. browser_snapshot           (capture tablet tree)
+6. browser_resize 1440 900   (laptop)
+7. browser_snapshot           (capture desktop tree)
+```
+
+**FAIL criteria:**
+- Horizontal scroll at 375px (check scrollWidth > clientWidth via `browser_evaluate`)
+- Text overflow / clipping at any size
+- Elements overlapping or z-index collisions
+- Navigation not accessible on mobile (no hamburger, or hamburger doesn't open)
+- Content hidden or unreadable at any viewport
+
+### 4. Console Errors Check
+
+```
+browser_console_messages
+```
+
+**FAIL criteria:**
+- Any `error` level message (hydration mismatch, 404 on assets, unhandled promise rejection)
+- React key warnings are FAIL (they mean stale lists)
+- Font 404s are FAIL (means the font config is broken)
+- Accessibility warnings from React are FAIL
+
+### 5. Primary Flow Walkthrough
+
+For each primary user flow (login, signup, main action), do it:
+
+```
+1. navigate to the flow's start
+2. browser_snapshot to find the actual interactive elements
+3. browser_click on the primary CTA
+4. browser_wait_for the expected result
+5. browser_snapshot to verify the result
+```
+
+**FAIL criteria:**
+- CTA doesn't respond (no state change, no navigation)
+- Form submits but shows no feedback (loading/success/error state missing)
+- Navigation ends up at a 404 or error page
+- Auth flow loses the user on redirect
+
+### 6. Accessibility Basics
+
+Run these checks via `browser_evaluate`:
+
+```js
+// Images without alt
+document.querySelectorAll('img:not([alt])').length
+
+// Form inputs without labels
+Array.from(document.querySelectorAll('input, textarea, select')).filter(el => {
+  const id = el.id;
+  const hasLabel = id && document.querySelector(`label[for="${id}"]`);
+  return !hasLabel && !el.getAttribute('aria-label') && !el.getAttribute('aria-labelledby');
+}).length
+
+// Heading order
+Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6')).map(h => parseInt(h.tagName[1]))
+
+// Focus visible on tab
+// (This one needs manual: focus body then press Tab, snapshot, check outline)
+```
+
+**FAIL criteria:**
+- Any `<img>` without alt
+- Any input/textarea/select without a label or aria-label
+- Heading order skips levels (h1 → h3 without h2)
+- Multiple `<h1>` on the same page
+
+### 7. Write the Report
+
+Append to `.planning/phase-{N}-verification.md`:
+
+```markdown
+## Browser QA
+
+**Dev server:** http://localhost:{port}
+**Routes tested:** {list}
+
+### Responsive
+| Route | 375px | 768px | 1440px | Notes |
+|-------|-------|-------|--------|-------|
+| / | PASS | PASS | PASS | |
+| /login | FAIL | PASS | PASS | Form overflows at 375px |
+
+### Console Errors
+- {count} errors, {count} warnings
+- {list each error with route}
+
+### Primary Flows
+| Flow | Result | Notes |
+|------|--------|-------|
+| Sign up → dashboard | PASS | Loading state visible |
+| Login → dashboard | FAIL | Clicking "Sign in" does nothing |
+
+### Accessibility
+- Images without alt: {count}
+- Inputs without labels: {count}
+- Heading order issues: {list}
+
+### Verdict
+PASS — all flows work, responsive clean, no console errors
+OR
+FAIL — {N} issues found. See above.
+```
+
+## Rules
+
+1. **Never trust code that you haven't driven.** The compiler says "yes" all the time about things that don't work.
+2. **Test at 375px first.** If it breaks on mobile, it's broken. Desktop-first thinking is a bug.
+3. **Console errors are failures, not warnings.** A hydration mismatch today is a production bug tomorrow.
+4. **Don't fix anything.** You have no Write/Edit tools. You report; the planner decides the fix.
+5. **Don't start the dev server if it's already running.** You'd kill someone else's session.
+6. **Cap snapshots.** Don't take 50 snapshots — aim for ~15 total across all pages and viewports. Budget your context.
+7. **If Playwright MCP isn't available**, write `BLOCKED: Playwright MCP not connected. Run: claude mcp list` and exit. Don't fake it.

package/agents/verifier.md

@@ -148,6 +148,68 @@ Phase verdict:
 
 Never round up. A PARTIAL is not a PASS. The goal of verification is to catch the work that LOOKS done but ISN'T.
 
+## Design Verification (for phases with frontend work)
+
+If the phase involved UI/frontend tasks, add a **Design Quality** section to the report:
+
+### Check 1: Design System Compliance
+```bash
+# Generic fonts (should NOT appear)
+grep -rn "font-family.*Inter\|font-family.*Roboto\|font-family.*Arial\|fontFamily.*Inter\|fontFamily.*Roboto" --include="*.tsx" --include="*.jsx" --include="*.css" app/ components/ src/ 2>/dev/null
+grep -rn "font-sans\|font-inter" --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null
+
+# Hardcoded max-width containers (should NOT appear)
+grep -rn "max-w-\[1200\|max-w-\[1280\|max-width.*1200\|max-width.*1280\|max-w-7xl" --include="*.tsx" --include="*.jsx" --include="*.css" app/ components/ src/ 2>/dev/null
+
+# Hardcoded colors instead of CSS variables (check density)
+grep -rn "color:.*#\|background:.*#\|bg-\[#" --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | wc -l
+```
+
+### Check 2: Accessibility Basics
+```bash
+# Images without alt text
+grep -rn "<img" --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | grep -v "alt="
+
+# Inputs without labels
+grep -rn "<input\|<textarea\|<select" --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | grep -v "aria-label\|aria-labelledby\|id=" | head -10
+
+# outline:none without replacement focus style
+grep -rn "outline.*none\|outline-none" --include="*.tsx" --include="*.jsx" --include="*.css" app/ components/ src/ 2>/dev/null | grep -v "focus-visible\|focus:\|focus-within"
+
+# Missing lang attribute
+grep -rn "<html" --include="*.tsx" --include="*.jsx" app/ 2>/dev/null | grep -v "lang="
+
+# Heading hierarchy — check for h1 count
+grep -rn "<h1\|<H1" --include="*.tsx" --include="*.jsx" app/ 2>/dev/null | wc -l
+```
+
+### Check 3: Interactive States
+```bash
+# Buttons/links without hover/focus styles — spot check
+grep -rn "<button\|<Button\|<a " --include="*.tsx" --include="*.jsx" app/ components/ src/ 2>/dev/null | head -5
+# Verify these have hover/focus transitions in their styling
+
+# Loading states — check for skeleton/spinner usage in pages with data fetching
+grep -rn "fetch\|useQuery\|useSWR\|getServerSide\|async.*Component" --include="*.tsx" app/ 2>/dev/null | head -5
+grep -rn "loading\|skeleton\|spinner\|Spinner\|Loading" --include="*.tsx" app/ components/ 2>/dev/null | wc -l
+
+# Empty states — check lists/tables have empty handling
+grep -rn "\.length.*===.*0\|\.length.*>.*0\|isEmpty\|no.*results\|no.*data" --include="*.tsx" app/ components/ 2>/dev/null | wc -l
+```
+
+### Check 4: Responsive
+```bash
+# Check for responsive utilities or media queries
+grep -rn "sm:\|md:\|lg:\|xl:\|@media" --include="*.tsx" --include="*.jsx" --include="*.css" app/ components/ src/ 2>/dev/null | wc -l
+# If 0 responsive declarations across multiple components → FAIL
+```
+
+### Scoring Design
+- 0 generic fonts + 0 hardcoded max-widths + colors via variables = **PASS**
+- Accessibility basics all present = **PASS**
+- States and responsive present = **PASS**
+- Any category failing = add to **Gaps** list with specific file:line
+
 ## Rules
 
 1. **Never trust summaries.** Always grep the code yourself.
@@ -156,3 +218,4 @@ Never round up. A PARTIAL is not a PASS. The goal of verification is to catch th
 4. **Stubs are failures.** `// TODO: implement` means the task wasn't done.
 5. **Empty catch blocks are failures.** They hide real errors.
 6. **Run tsc.** If TypeScript doesn't compile, nothing works.
+7. **Design debt is a gap.** Generic fonts, missing states, inaccessible components, and hardcoded layouts are failures — not "nice to haves."

package/bin/install.js

@@ -208,8 +208,14 @@ async function main() {
       path.join(binDest, "state.js")
     );
     ok("state.js (state machine)");
+    copy(
+      path.join(FRAMEWORK_DIR, "bin", "qualia-ui.js"),
+      path.join(binDest, "qualia-ui.js")
+    );
+    fs.chmodSync(path.join(binDest, "qualia-ui.js"), 0o755);
+    ok("qualia-ui.js (cosmetics library)");
   } catch (e) {
-    warn(`state.js — ${e.message}`);
+    warn(`scripts — ${e.message}`);
   }
 
   // ─── Guide ─────────────────────────────────────────────
@@ -228,7 +234,7 @@ async function main() {
   const knowledgeDir = path.join(CLAUDE_DIR, "knowledge");
   if (!fs.existsSync(knowledgeDir)) fs.mkdirSync(knowledgeDir, { recursive: true });
   const knowledgeFiles = {
-    "learned-patterns.md": "# Learned Patterns\n\nPatterns discovered across projects. Updated by `/qualia-evolve` and manual notes.\n",
+    "learned-patterns.md": "# Learned Patterns\n\nPatterns discovered across projects. Updated by `/qualia-learn` and manual notes.\n",
     "common-fixes.md": "# Common Fixes\n\nRecurring issues and their solutions.\n",
     "client-prefs.md": "# Client Preferences\n\nClient-specific preferences, design choices, and requirements.\n",
   };
@@ -253,6 +259,16 @@ async function main() {
   };
   fs.writeFileSync(configFile, JSON.stringify(config, null, 2) + "\n");
 
+  // ─── ERP API key (for report uploads) ──────────────────
+  log(`${WHITE}ERP integration${RESET}`);
+  const erpKeyFile = path.join(CLAUDE_DIR, ".erp-api-key");
+  if (!fs.existsSync(erpKeyFile)) {
+    fs.writeFileSync(erpKeyFile, "qualia-claude-2026", { mode: 0o600 });
+    ok(".erp-api-key (created)");
+  } else {
+    ok(".erp-api-key (exists)");
+  }
+
   // ─── Configure settings.json ───────────────────────────
   console.log("");
   log(`${WHITE}Configuring settings.json...${RESET}`);
@@ -318,10 +334,27 @@ async function main() {
   // Hooks — full system
   const hd = path.join(CLAUDE_DIR, "hooks");
   settings.hooks = {
+    SessionStart: [
+      {
+        matcher: ".*",
+        hooks: [
+          {
+            type: "command",
+            command: `${hd}/session-start.sh`,
+            timeout: 5,
+          },
+        ],
+      },
+    ],
     PreToolUse: [
       {
         matcher: "Bash",
         hooks: [
+          {
+            type: "command",
+            command: `${hd}/auto-update.sh`,
+            timeout: 5,
+          },
           {
             type: "command",
             if: "Bash(git push*)",
@@ -336,6 +369,13 @@ async function main() {
             timeout: 15,
             statusMessage: "◆ Syncing tracking...",
           },
+          {
+            type: "command",
+            if: "Bash(vercel --prod*)",
+            command: `${hd}/pre-deploy-gate.sh`,
+            timeout: 120,
+            statusMessage: "◆ Running quality gates...",
+          },
         ],
       },
       {
@@ -358,20 +398,6 @@ async function main() {
         ],
       },
     ],
-    PostToolUse: [
-      {
-        matcher: "Bash",
-        hooks: [
-          {
-            type: "command",
-            if: "Bash(vercel --prod*)",
-            command: `${hd}/pre-deploy-gate.sh`,
-            timeout: 120,
-            statusMessage: "◆ Running quality gates...",
-          },
-        ],
-      },
-    ],
     PreCompact: [
       {
         matcher: "compact",
@@ -414,7 +440,7 @@ async function main() {
 
   fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
 
-  ok("Hooks: branch-guard, pre-push, env-block, migration-guard, deploy-gate, pre-compact");
+  ok("Hooks: session-start, auto-update, branch-guard, pre-push, env-block, migration-guard, deploy-gate, pre-compact");
   ok("Status line + spinner configured");
   ok("Environment variables + permissions");
 
@@ -424,12 +450,13 @@ async function main() {
   console.log(`${DIM}  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${RESET}`);
   console.log(`  ${WHITE}${member.name}${RESET} ${DIM}(${member.role})${RESET}`);
   console.log(`  Skills:       ${WHITE}${skills.length}${RESET}`);
-  console.log(`  Agents:       ${WHITE}3${RESET} ${DIM}(planner, builder, verifier)${RESET}`);
-  console.log(`  Hooks:        ${WHITE}6${RESET} ${DIM}(branch-guard, pre-push, env-block, migration-guard, deploy-gate, pre-compact)${RESET}`);
-  console.log(`  Rules:        ${WHITE}3${RESET} ${DIM}(security, frontend, deployment)${RESET}`);
-  console.log(`  Scripts:      ${WHITE}1${RESET} ${DIM}(state.js — state machine)${RESET}`);
+  const agentCount = fs.readdirSync(agentsDir).filter(f => f.endsWith('.md')).length;
+  console.log(`  Agents:       ${WHITE}${agentCount}${RESET} ${DIM}(planner, builder, verifier, qa-browser)${RESET}`);
+  console.log(`  Hooks:        ${WHITE}8${RESET} ${DIM}(session-start, auto-update, branch-guard, pre-push, env-block, migration-guard, deploy-gate, pre-compact)${RESET}`);
+  console.log(`  Rules:        ${WHITE}${fs.readdirSync(rulesDir).length}${RESET} ${DIM}(security, frontend, design-reference, deployment)${RESET}`);
+  console.log(`  Scripts:      ${WHITE}2${RESET} ${DIM}(state.js, qualia-ui.js)${RESET}`);
   console.log(`  Knowledge:    ${WHITE}3${RESET} ${DIM}(patterns, fixes, client prefs)${RESET}`);
-  console.log(`  Templates:    ${WHITE}4${RESET}`);
+  console.log(`  Templates:    ${WHITE}${fs.readdirSync(tmplDir).length}${RESET}`);
   console.log(`  Status line:  ${GREEN}✓${RESET}`);
   console.log(`  CLAUDE.md:    ${GREEN}✓${RESET} ${DIM}(${member.role})${RESET}`);