feinai 0.6.6 → 0.6.7

package/README.md

@@ -111,15 +111,13 @@ Agents don't parse `QUEUE.md`. They talk to a small local coordination service i
 
 ## Claude Code skills
 
-feinai ships five Claude Code skills covering the full development loop. They activate automatically when `.feinai/feinai.db` is present:
+feinai ships three Claude Code skills covering the full development loop. They activate automatically when `.feinai/feinai.db` is present:
 
-| Skill               | Purpose                                                |
-|---------------------|--------------------------------------------------------|
-| `feinai-sdd`        | Teaches Claude the feinai workflow and concepts        |
-| `feinai-write-spec` | Writes spec + plan into feinai from a design thread    |
-| `feinai-write-tasks`| Decomposes a plan into atomic tasks with parallelism   |
-| `feinai-dispatch`   | Orchestrates subagents in isolated git worktrees       |
-| `feinai-implement`  | Claims and executes one task end‑to‑end                |
+| Skill               | Purpose                                                                          |
+|---------------------|----------------------------------------------------------------------------------|
+| `feinai-write-spec` | Full pipeline: spec + plan + tasks. With no argument runs the complete flow; with a SPEC-ID argument regenerates tasks only (use when iterating on an existing plan) |
+| `feinai-dispatch`   | Orchestrates subagents in isolated git worktrees                                 |
+| `feinai-implement`  | Claims and executes one task end‑to‑end                                          |
 
 Together they cover: design → spec → plan → tasks → parallel execution → merge.
 
@@ -129,7 +127,7 @@ Together they cover: design → spec → plan → tasks → parallel execution
 mkdir -p ~/.claude/skills
 SKILLS=~/.bun/install/global/node_modules/feinai/skills
 
-for skill in feinai-sdd feinai-write-spec feinai-write-tasks feinai-dispatch feinai-implement; do
+for skill in feinai-write-spec feinai-dispatch feinai-implement; do
   ln -sf "$SKILLS/$skill" ~/.claude/skills/$skill
 done
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feinai",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "Task & spec manager for AI agents — parallel worktrees, live dashboard, SDD skills",
   "type": "module",
   "bin": {

package/skills/feinai-write-spec/SKILL.md

@@ -1,18 +1,31 @@
 ---
 name: feinai-write-spec
-description: Use when the user wants to design a new feature, refactor, or change in a project that has `.feinai/feinai.db`. Writes a complete spec + plan into feinai in a single session. Replaces `brainstorming` + `writing-plans` from superpowers when feinai is active. Reads project context (CLAUDE.md, ARCHITECTURE.md, README.md), asks clarifying questions only when context has gaps, and produces spec+plan atomically with one `feinai spec add` + one `feinai plan add`.
+description: Use when the user wants to design a new feature, refactor, or change in a project that has `.feinai/feinai.db`. With no argument, runs the full pipeline (spec + plan + tasks). With a SPEC-ID argument, skips to task generation only (use when iterating on an existing plan). Replaces `brainstorming` + `writing-plans` + `feinai-write-tasks` from superpowers when feinai is active.
 ---
 
 # feinai-write-spec
 
-Write a spec + plan for a feature in one session. Output goes to feinai, not markdown files.
+Full pipeline: spec → plan → tasks. One skill, two entry points.
+
+## Entry point detection
+
+**Check the first argument before doing anything else.**
+
+- **No argument** → full pipeline (Phases 1–5)
+- **SPEC-ID given** (e.g. `SPEC-42`) → tasks only, jump to **Phase 4**
+
+Ask the user which mode only if ambiguous.
+
+---
 
 ## Preconditions
 
 Run `feinai status` (exit 0 = feinai is active). If not active, stop and ask the
 user if they want `feinai init` or to fall back to vanilla superpowers.
 
-## The flow — three entry modes
+---
+
+## Phase 1 — Decide entry mode (full pipeline only)
 
 Decide which entry mode applies BEFORE doing anything else. Ask the user only if ambiguous.
 
@@ -31,7 +44,7 @@ as a minimal change (just the input + endpoint call) or shall I think wider
 
 ---
 
-## Phase 1 — Load project context
+## Phase 2 — Load project context (full pipeline only)
 
 Read **in this order, stop early if enough**:
 
@@ -50,9 +63,9 @@ Keep this phase tight — every read costs tokens. Stop as soon as you can write
 
 ---
 
-## Phase 2 — Draft and write the spec
+## Phase 3 — Draft and write the spec + plan (full pipeline only)
 
-**Spec answers: what and why.** Not how.
+### Spec (what and why — not how)
 
 Required sections:
 - **Goal** — one sentence
@@ -90,19 +103,14 @@ feinai spec add SPEC-NNN "Short title" --stdin <<'FEINAI_EOF'
 FEINAI_EOF
 ```
 
----
-
-## Phase 3 — Draft and write the plan
-
-**Plan answers: how.** Architecture decisions, file map, dependencies.
+### Plan (how — architecture decisions, file map, dependencies)
 
 Required sections:
 - **Architecture overview** — 2–4 sentences
 - **Files to touch** — explicit list
-- **Task breakdown preview** — high-level (the actual tasks are written by `feinai-write-tasks`)
+- **Task breakdown preview** — high-level (the actual tasks come in Phase 4)
 - **Quality gates** — the commands that prove correctness
 
-**Write the plan:**
 ```bash
 feinai plan add SPEC-NNN --stdin <<'FEINAI_EOF'
 # Plan v1 — SPEC-NNN: Title
@@ -127,19 +135,112 @@ FEINAI_EOF
 
 ---
 
-## Phase 4 — Hand off
+## Phase 4 — Build the task graph
 
-Tell the user:
-> Spec + plan written: SPEC-NNN. View with `feinai spec show SPEC-NNN --full`.
-> Next step: run `/feinai-write-tasks SPEC-NNN` to break it down into executable tasks.
+*Entry point when SPEC-ID is given as argument.*
+
+### Step 1 — Load spec + plan
+
+```bash
+feinai spec show SPEC-NNN --full
+```
+
+Read both. Internalize:
+- The WHAT (spec)
+- The HOW (plan)
+- The "Files to touch" list
+- The "Task breakdown preview" — your starting point, not a contract
+
+### Step 2 — Analyze granularity and parallelism
+
+**A. Granularity** — one task = one logical change a single subagent can complete in one session.
+- Too big: "implement the entire auth system" → split by route
+- Too small: "add a single import" → merge into larger task
+- Sweet spot: ~50–300 lines, 1–3 files
+
+**B. Parallelism rule — no exceptions:**
+
+> **Tasks that touch the same file cannot run in parallel.**
+
+When a **shared file** needs changes (e.g. `router.ts`, `index.ts`, schema), extract it first:
+
+```
+TASK-NNN-0: edit shared file once
+   ↓ blocks
+TASK-NNN-1: feature A  ┐
+TASK-NNN-2: feature B  ├ parallel
+TASK-NNN-3: feature C  ┘
+```
 
-Do NOT create tasks here. That's `feinai-write-tasks`. One responsibility per skill.
+**C. Dependencies** — use `--blocked-by` for:
+- File-level conflicts (above)
+- Logical dependencies (B uses a type defined in A)
+
+### Step 3 — Embed TDD instructions
+
+Each implementation task description starts with:
+
+```
+## TDD baseline
+Write the tests first based on the "Tests required" section of SPEC-NNN.
+Run them — they must fail (the implementation doesn't exist yet).
+Implement until all tests pass. Then run the quality gates.
+```
+
+No separate "write tests" tasks. Test + implementation live together.
+
+**Exception:** if shared fixtures are needed across tasks, extract them into a tiny TASK-NNN-0 that others block on.
+
+### Step 4 — Write the tasks
+
+```bash
+feinai add TASK-NNN-X "subject" \
+  --spec SPEC-NNN \
+  --desc "$(cat <<'EOF'
+## TDD baseline
+Write the tests first based on the "Tests required" section of SPEC-NNN.
+Run them — they must fail. Implement until they pass.
+
+## Files to touch
+- packages/X/...
+- packages/Y/...
+
+## Implementation notes
+<concrete, copy-pasteable details. Cite line numbers if useful.>
+
+## Do not touch
+- <files explicitly out of scope>
+EOF
+)" \
+  --package "@scope/pkg" \
+  --gate "pnpm --filter @scope/pkg typecheck" \
+  --gate "pnpm --filter @scope/pkg test -- --run" \
+  --blocked-by TASK-NNN-Y    # repeatable if needed
+```
+
+**Task description = self-contained.** The subagent reads only the task (via `feinai take`) and gets spec+plan as `spec_context` automatically.
 
 ---
 
-## Key questions to ask (during, only if needed)
+## Phase 5 — Hand off
+
+Output a parallelism summary table:
+
+```
+TASK-NNN-0: shared file edit            (sequential)
+TASK-NNN-1: feature A                   (parallel with 2, 3) blocked-by 0
+TASK-NNN-2: feature B                   (parallel with 1, 3) blocked-by 0
+TASK-NNN-3: feature C                   (parallel with 1, 2) blocked-by 0
+TASK-NNN-4: integration tests           (sequential)         blocked-by 1, 2, 3
+```
+
+Tell the user:
+> Tasks written for SPEC-NNN. View with `feinai list --spec SPEC-NNN`.
+> Next step: run `/feinai-dispatch SPEC-NNN` to execute.
+
+---
 
-These come up mid-session. Ask them inline, one at a time, brief:
+## Key questions to ask (inline, only if needed)
 
 - Ambiguity in scope: *"Do we include X in this spec or punt to a follow-up?"*
 - Missing architecture decision: *"This needs a choice between A and B. Default is A unless you say otherwise."*
@@ -152,18 +253,19 @@ These come up mid-session. Ask them inline, one at a time, brief:
 ## What NOT to do
 
 - ❌ Write `docs/superpowers/specs/*.md` files — spec lives in feinai
-- ❌ Create tasks in this skill — that's `feinai-write-tasks`
 - ❌ Invent architecture if `ARCHITECTURE.md` is silent — ask the user
 - ❌ Write spec content that is actually a plan (HOW). Keep them separated.
-- ❌ Ask the user to confirm before writing — write the spec, then they review with `feinai spec show`
+- ❌ Ask the user to confirm before writing — write spec/plan/tasks, then they review
+- ❌ Re-think architecture in Phase 4 — it's in the plan, follow it
+- ❌ Write tasks without a SPEC-ID — every task must have `--spec SPEC-NNN`
+- ❌ Skip the same-file analysis — it's the single biggest cause of merge conflicts
+- ❌ Hardcode worktree paths — `feinai-dispatch` assigns those at execution time
 
 ---
 
 ## Subagent isolation
 
-If you delegate the spec drafting to a subagent (e.g. for parallel research),
-the subagent must NOT use this skill — it has no context. Hand it concrete
-findings and let it return text; you write to feinai yourself.
+If you delegate spec drafting to a subagent, the subagent must NOT use this skill. Hand it concrete findings and let it return text; you write to feinai yourself.
 
 ---
 
@@ -176,3 +278,6 @@ findings and let it return text; you write to feinai yourself.
 | Update spec content | `feinai spec set-content SPEC-N --stdin <<<` content |
 | Write plan | `feinai plan add SPEC-N --stdin <<<` content |
 | Show spec+plan together | `feinai spec show SPEC-N --full` |
+| List tasks for spec | `feinai list --spec SPEC-N` |
+| Add task | `feinai add TASK-X "subject" --spec SPEC-N --desc "..." --gate "..." [--blocked-by TASK-Y]` |
+| Edit task | `feinai task edit TASK-X --desc "..." --gate "..."` |

package/skills/feinai-write-tasks/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: feinai-write-tasks
-description: Use when a spec + plan already exist in feinai (written by `feinai-write-spec` or manually) and need to be broken down into executable tasks. Decomposes the plan into atomic `feinai add` calls, analyzes file-level parallelism, and embeds TDD instructions. Output: a set of tasks with `blocked_by` dependencies ready for `feinai-dispatch` to execute.
+description: "Use when a spec + plan already exist in feinai (written by `feinai-write-spec` or manually) and need to be broken down into executable tasks. Decomposes the plan into atomic `feinai add` calls, analyzes file-level parallelism, and embeds TDD instructions. Output: a set of tasks with `blocked_by` dependencies ready for `feinai-dispatch` to execute."
 ---
 
 # feinai-write-tasks

package/src/cli.ts

@@ -48,7 +48,7 @@ import {
   type OutputFormat,
 } from "./format";
 
-const VERSION = "0.6.4";
+const VERSION = "0.6.7";
 
 interface ParsedArgs {
   positional: string[];

package/src/dashboard.html

@@ -293,6 +293,11 @@
       z-index: 100;
     }
     .modal-bg.visible { display: flex; }
+    @keyframes modal-in {
+      from { opacity: 0; transform: scale(0.96); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+    .modal-bg.visible .modal { animation: modal-in 0.15s ease-out; }
     .modal {
       background: var(--bg-card);
       border: 1px solid var(--border-strong);
@@ -389,6 +394,13 @@
     .markdown em { color: var(--fg); font-style: italic; }
     .events-list .item { padding: 8px 16px; cursor: default; }
     .events-list .item:hover { background: transparent; }
+    .events-list .item.event-taken     { border-left: 2px solid var(--blue); }
+    .events-list .item.event-completed { border-left: 2px solid var(--green); }
+    .events-list .item.event-failed    { border-left: 2px solid var(--red); }
+    .events-list .item.event-created   { border-left: 2px solid var(--accent); }
+    .events-list .item.event-released  { border-left: 2px solid var(--gray); }
+    .events-list .item.event-started   { border-left: 2px solid var(--yellow); }
+    .event-payload { font-size:11px;color:var(--fg-dim);background:var(--bg-input);border-radius:4px;padding:6px 8px;margin:4px 0 0;overflow:auto;max-height:120px; }
     .event-type {
       font-size: 11px;
       padding: 1px 6px;
@@ -506,10 +518,17 @@
     .worktree-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
+      border-left: 3px solid transparent;
       border-radius: 8px;
       padding: 12px 14px;
       font-size: 12px;
     }
+    .worktree-card[data-card-state="active"]      { border-left-color: var(--blue); }
+    .worktree-card[data-card-state="clean"]       { border-left-color: var(--gray); }
+    .worktree-card[data-card-state="error"],
+    .worktree-card[data-card-state="removed"]     { border-left-color: var(--red); }
+    .worktree-card[data-card-state="merged"]      { border-left-color: var(--green); }
+    .worktree-card[data-card-state="not-created"] { border-left-color: var(--yellow); }
     .worktree-card-header {
       display: flex;
       align-items: center;
@@ -666,6 +685,15 @@
       font-size: 13px;
       padding: 12px 0;
     }
+    .modal-meta-grid { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; font-size: 12px; margin: 8px 0; }
+    .modal-meta-label { color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.3px; font-size: 11px; padding-top: 2px; }
+    .modal-meta-value { color: var(--fg-dim); word-break: break-all; }
+    .modal-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
+    .confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center; }
+    .confirm-box { background:var(--bg-card);border:1px solid var(--border-strong);border-radius:10px;padding:24px;min-width:280px;max-width:380px; }
+    .confirm-message { margin:0 0 16px;font-size:15px; }
+    .confirm-skip { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-dim);margin-bottom:16px;cursor:pointer; }
+    .confirm-actions { display:flex;gap:8px;justify-content:flex-end; }
   </style>
 </head>
 <body>
@@ -719,6 +747,11 @@
 
     <section class="section-wide">
       <h2>Recent events <span class="badge" id="event-count">0</span></h2>
+      <div class="filter-bar" id="event-filters">
+        <button class="filter-btn active" data-event-filter="">all</button>
+        <button class="filter-btn" data-event-filter="event">events</button>
+        <button class="filter-btn" data-event-filter="request">requests</button>
+      </div>
       <div class="list events-list" id="events-list"><div class="empty">loading...</div></div>
     </section>
   </main>
@@ -745,6 +778,16 @@
     const $$ = (sel) => Array.from(document.querySelectorAll(sel));
     let activeTaskStatuses = new Set();
     let activeSpecStatuses = new Set();
+    let activeEventFilter = '';
+    let lastDbEvents = [];
+
+    function relativeTime(dateStr) {
+      const diff = Date.now() - new Date(dateStr).getTime();
+      if (diff < 60000) return 'just now';
+      if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+      if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+      return new Date(dateStr).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
+    }
     let liveRequests = [];
 
     // -------- strings --------
@@ -786,14 +829,14 @@
       return new Promise((resolve) => {
         if (localStorage.getItem("feinai-skip-" + skipKey) === "1") { resolve(true); return; }
         const overlay = document.createElement("div");
-        overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;";
+        overlay.className = "confirm-overlay";
         overlay.innerHTML = `
-          <div style="background:var(--bg-card);border:1px solid var(--border-strong);border-radius:10px;padding:24px;min-width:280px;max-width:380px;">
-            <p style="margin:0 0 16px;font-size:15px;">${escapeHtml(message)}</p>
-            <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-dim);margin-bottom:16px;cursor:pointer;">
+          <div class="confirm-box">
+            <p class="confirm-message">${escapeHtml(message)}</p>
+            <label class="confirm-skip">
               <input type="checkbox" id="skip-cb"> ${t("skip_confirm")}
             </label>
-            <div style="display:flex;gap:8px;justify-content:flex-end;">
+            <div class="confirm-actions">
               <button id="confirm-cancel" class="btn">${t("cancel_btn")}</button>
               <button id="confirm-ok" class="btn primary">${t("confirm_btn")}</button>
             </div>
@@ -1030,7 +1073,10 @@
         ...liveRequests.map((r) => ({ ...r, _kind: "request" })),
       ];
       all.sort((a, b) => new Date(b.created_at || b.timestamp).getTime() - new Date(a.created_at || a.timestamp).getTime());
-      const combined = all.slice(0, 50);
+      const filtered = activeEventFilter
+        ? all.filter((e) => e._kind === activeEventFilter)
+        : all;
+      const combined = filtered.slice(0, 50);
 
       $("#event-count").textContent = combined.length;
       if (!combined.length) {
@@ -1046,7 +1092,7 @@
                 <span class="method-badge ${escapeHtml(e.method.toLowerCase())}">${escapeHtml(e.method)}</span>
                 <code>${escapeHtml(e.path)}</code>
                 <span class="source-badge ${escapeHtml(e.source.toLowerCase())}">${escapeHtml(e.source)}</span>
-                <span style="color: var(--fg-dim); margin-left: auto;">${escapeHtml(e.timestamp)}</span>
+                <span style="color: var(--fg-dim); margin-left: auto;">${relativeTime(e.created_at ?? e.ts ?? e.timestamp)}</span>
               </div>
               <div class="item-meta">
                 <span>${escapeHtml(e.actor)}</span>
@@ -1054,16 +1100,17 @@
             </div>
           `;
         }
+        const payload = (() => { try { return e.payload ? JSON.parse(e.payload) : null; } catch { return e.payload || null; } })();
         return `
-          <div class="item">
+          <div class="item event-${escapeHtml(e.event_type)}">
             <div class="item-row1">
               <span class="event-type ${escapeHtml(e.event_type)}">${escapeHtml(e.event_type)}</span>
               <code>${escapeHtml(e.entity_type)}/${escapeHtml(e.entity_id)}</code>
-              <span style="color: var(--fg-dim); margin-left: auto;">${escapeHtml(e.created_at)}</span>
+              <span style="color: var(--fg-dim); margin-left: auto;">${relativeTime(e.created_at ?? e.ts)}</span>
             </div>
             <div class="item-meta">
               ${e.actor ? `<span>${escapeHtml(e.actor)}</span>` : ""}
-              ${e.payload ? `<code style="color: var(--fg-faint);">${escapeHtml(e.payload)}</code>` : ""}
+              ${payload ? `<details><summary style="cursor:pointer;color:var(--fg-faint);font-size:11px;list-style:none;">payload ▸</summary><pre class="event-payload">${escapeHtml(JSON.stringify(payload, null, 2))}</pre></details>` : ""}
             </div>
           </div>
         `;
@@ -1101,6 +1148,7 @@
         actions.push(`<button class="btn danger" data-action="delete-spec" data-id="${escapeHtml(spec.id)}">delete</button>`);
         setModalBody(`
           ${actions.length ? `<div class="modal-actions">${actions.join("")}</div>` : ""}
+          <hr class="modal-divider">
           ${spec.content ? `
             <div class="modal-section">
               <h3>Spec content <span class="badge">${spec.content.length}B</span></h3>
@@ -1111,6 +1159,7 @@
               <h3>Plan v${latest_plan.version} <span class="badge">${latest_plan.content.length}B</span></h3>
               <div class="markdown">${renderMarkdown(latest_plan.content)}</div>
             </div>` : ""}
+          <hr class="modal-divider">
           <div class="modal-section">
             <h3>Tasks <span class="badge">${tasks.length}</span></h3>
             <div>${tasks.length === 0 ? '<div class="empty">no tasks</div>' : tasks.map((task) => `
@@ -1161,20 +1210,23 @@
         if (taskData.spec_id) {
           actions.unshift(`<button class="btn" data-action="back-to-spec" data-spec="${escapeHtml(taskData.spec_id)}">← ${escapeHtml(taskData.spec_id)}</button>`);
         }
+        const metaRows = [
+          taskData.owner        ? `<span class="modal-meta-label">Owner</span><span class="modal-meta-value">${escapeHtml(taskData.owner)}</span>` : "",
+          taskData.taken_at     ? `<span class="modal-meta-label">Taken</span><span class="modal-meta-value">${escapeHtml(taskData.taken_at)}</span>` : "",
+          taskData.completed_at ? `<span class="modal-meta-label">Completed</span><span class="modal-meta-value">${escapeHtml(taskData.completed_at)}</span>` : "",
+          taskData.worktree     ? `<span class="modal-meta-label">Worktree</span><span class="modal-meta-value"><code>${escapeHtml(taskData.worktree)}</code></span>` : "",
+          taskData.blocked_by?.length ? `<span class="modal-meta-label">Blocked by</span><span class="modal-meta-value">${taskData.blocked_by.map((id) => `<code>${escapeHtml(id)}</code>`).join(", ")}</span>` : "",
+          taskData.packages?.length   ? `<span class="modal-meta-label">Packages</span><span class="modal-meta-value">${taskData.packages.map((p) => `<code>${escapeHtml(p)}</code>`).join(", ")}</span>` : "",
+          taskData.quality_gates?.length ? `<span class="modal-meta-label">Quality gates</span><span class="modal-meta-value">${taskData.quality_gates.map((g) => `<code>${escapeHtml(g)}</code>`).join("<br>")}</span>` : "",
+        ].filter(Boolean).join("");
         setModalBody(`
           ${actions.length ? `<div class="modal-actions">${actions.join("")}</div>` : ""}
+          <hr class="modal-divider">
           <div class="modal-section">
             <h3>Metadata</h3>
-            <div class="item-meta">
-              ${taskData.owner ? `<span><strong>owner:</strong> ${escapeHtml(taskData.owner)}</span>` : ""}
-              ${taskData.taken_at ? `<span><strong>taken:</strong> ${escapeHtml(taskData.taken_at)}</span>` : ""}
-              ${taskData.completed_at ? `<span><strong>completed:</strong> ${escapeHtml(taskData.completed_at)}</span>` : ""}
-            </div>
-            ${taskData.worktree ? `<div style="margin-top:8px;"><strong>worktree:</strong> <code>${escapeHtml(taskData.worktree)}</code></div>` : ""}
-            ${taskData.blocked_by?.length ? `<div style="margin-top:8px;"><strong>blocked by:</strong> ${taskData.blocked_by.map((id) => `<code>${escapeHtml(id)}</code>`).join(", ")}</div>` : ""}
-            ${taskData.packages?.length ? `<div style="margin-top:8px;"><strong>packages:</strong> ${taskData.packages.map((p) => `<code>${escapeHtml(p)}</code>`).join(", ")}</div>` : ""}
-            ${taskData.quality_gates?.length ? `<div style="margin-top:8px;"><strong>quality gates:</strong><ul style="margin: 4px 0 0 16px;">${taskData.quality_gates.map((g) => `<li><code>${escapeHtml(g)}</code></li>`).join("")}</ul></div>` : ""}
+            <div class="modal-meta-grid">${metaRows}</div>
           </div>
+          <hr class="modal-divider">
           ${taskData.description ? `
             <div class="modal-section">
               <h3>Description / workplan</h3>
@@ -1495,13 +1547,29 @@
         worktreeElapsedTimer = setInterval(() => {
           document.querySelectorAll('[data-elapsed]').forEach((el) => {
             const iso = el.getAttribute('data-elapsed');
-            el.textContent = iso ? elapsedSince(iso) : '';
+            if (iso) {
+              el.textContent = elapsedSince(iso);
+              const minutes = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+              if (minutes >= 60) el.style.color = 'var(--red)';
+              else if (minutes >= 30) el.style.color = 'var(--yellow)';
+              else el.style.color = 'var(--fg-dim)';
+            } else {
+              el.textContent = '';
+            }
           });
         }, 1000);
         // Immediate first update
         document.querySelectorAll('[data-elapsed]').forEach((el) => {
           const iso = el.getAttribute('data-elapsed');
-          el.textContent = iso ? elapsedSince(iso) : '';
+          if (iso) {
+            el.textContent = elapsedSince(iso);
+            const minutes = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+            if (minutes >= 60) el.style.color = 'var(--red)';
+            else if (minutes >= 30) el.style.color = 'var(--yellow)';
+            else el.style.color = 'var(--fg-dim)';
+          } else {
+            el.textContent = '';
+          }
         });
       }
     }
@@ -1525,6 +1593,14 @@
       }
     }
 
+    function gitFileColor(line) {
+      if (/^(\?\?|!!)\s/.test(line)) return 'var(--fg-faint)';
+      if (/^A[\s]/.test(line) || /^[A-Z]A/.test(line)) return 'var(--green)';
+      if (/^D[\s]/.test(line) || /^[A-Z]D/.test(line)) return 'var(--red)';
+      if (/M/.test(line.slice(0,2))) return 'var(--yellow)';
+      return 'var(--fg-dim)';
+    }
+
     function updateWorktreeCard(id, data) {
       const badgeEl = $(`[data-state-badge="${CSS.escape(id)}"]`);
       const filesEl = $(`[data-files="${CSS.escape(id)}"]`);
@@ -1534,6 +1610,8 @@
       const state = worktreeStateBadge(data);
       badgeEl.className = `worktree-state ${state.cls}`;
       badgeEl.textContent = state.text;
+      const card = badgeEl.closest('.worktree-card');
+      if (card) card.dataset.cardState = state.cls;
       const agent = agentProcesses.find((a) => a.taskId === id);
       if (processEl) {
         const ownerEl = badgeEl.closest('.worktree-card')?.querySelector('.owner');
@@ -1548,7 +1626,7 @@
       }
       if (filesEl) {
         filesEl.innerHTML = data.files?.length
-          ? data.files.map((f) => `<li>${escapeHtml(f)}</li>`).join("")
+          ? data.files.map((f) => `<li style="color: ${gitFileColor(f)}">${escapeHtml(f)}</li>`).join("")
           : "";
       }
       if (commitEl) {
@@ -1572,6 +1650,7 @@
         renderSpecs(specs);
         renderTasks(tasks);
         renderWorktreeCards(tasks);
+        lastDbEvents = dbEvents;
         renderCombinedEvents(dbEvents);
       } catch (err) {
         console.error("refresh failed:", err);
@@ -1652,7 +1731,9 @@
     }
 
     // -------- Boot --------
-    $("#modal-bg").addEventListener("click", (e) => { if (e.target === $("#modal-bg")) closeModal(); });
+    $('#modal-bg').addEventListener('click', (e) => {
+      if (e.target === e.currentTarget) closeModal();
+    });
     $("#modal-close").addEventListener("click", closeModal);
     document.addEventListener("keydown", (e) => { if (e.key === "Escape") closeModal(); });
     $$("#task-filters .filter-btn").forEach((btn) => {
@@ -1687,6 +1768,14 @@
         refresh();
       });
     });
+    $$("#event-filters .filter-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        activeEventFilter = btn.dataset.eventFilter;
+        $$("#event-filters .filter-btn").forEach((b) => b.classList.remove("active"));
+        btn.classList.add("active");
+        renderCombinedEvents(lastDbEvents);
+      });
+    });
     $("#new-spec-btn").addEventListener("click", openNewSpecModal);
     $("#new-task-btn").addEventListener("click", openNewTaskModal);