claude-teammate 0.1.293 → 0.1.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-teammate",
-  "version": "0.1.293",
+  "version": "0.1.294",
   "description": "CLI bootstrapper for Claude Teammate.",
   "license": "MIT",
   "type": "module",

package/src/dashboard/app/layouts/default.vue

@@ -124,6 +124,15 @@
           </span>
           <span>Usage</span>
         </NuxtLink>
+        <NuxtLink to="/skills" class="nav-item" :class="{ active: $route.path === '/skills' }" @click="closeSidebar">
+          <span class="nav-ico">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" />
+            </svg>
+          </span>
+          <span>Skills</span>
+          <span class="nav-count violet" v-if="skillsCount !== null && skillsCount > 0">{{ skillsCount }}</span>
+        </NuxtLink>
       </div>
     </nav>
 
@@ -150,14 +159,18 @@
     <NuxtLink to="/logs" class="bottom-nav-item" :class="{ active: $route.path === '/logs' }"><span>&#8801;</span>Logs</NuxtLink>
     <NuxtLink to="/activity" class="bottom-nav-item" :class="{ active: $route.path === '/activity' }"><span>&#9673;</span>Activity</NuxtLink>
     <NuxtLink to="/usage" class="bottom-nav-item" :class="{ active: $route.path === '/usage' }"><span>&#36;</span>Usage</NuxtLink>
+    <NuxtLink to="/skills" class="bottom-nav-item" :class="{ active: $route.path === '/skills' }"><span>&#9881;</span>Skills</NuxtLink>
   </nav>
 </template>
 
 <script setup lang="ts">
 const { status, startPolling } = useStatus();
+const { skillFixStats, loadSkillFixStats, startPolling: startSkillPolling } = useSkillFixes();
 const sidebarOpen = ref(false);
 const clockText = ref("");
 
+const _skillsCount = computed(() => skillFixStats.value?.totalEvents24h ?? null);
+
 function _toggleSidebar() {
   sidebarOpen.value = !sidebarOpen.value;
 }
@@ -195,6 +208,8 @@ const _awaitingCount = computed(() => {
 
 onMounted(() => {
   startPolling();
+  startSkillPolling(15000);
+  loadSkillFixStats();
   clockText.value = new Date().toLocaleTimeString("en-US", { hour12: false });
   setInterval(() => {
     clockText.value = new Date().toLocaleTimeString("en-US", { hour12: false });

package/src/dashboard/app/pages/index.vue

@@ -65,11 +65,10 @@
           <div class="stat-sub">Queued for retry</div>
           <div class="stat-progress"><div class="stat-progress-fill" :style="{ width: stuckBarPct + '%', background: 'var(--red)' }"></div></div>
         </div>
-        <a
+        <NuxtLink
           class="stat-card stat-card-link"
           v-if="skillFixStats && skillFixStats.totalEvents24h > 0"
-          href="#skill-self-repair"
-          @click.prevent="scrollToSkillCard"
+          to="/skills"
         >
           <div class="stat-card-accent" style="background:linear-gradient(90deg,var(--violet),var(--sky))"></div>
           <div class="stat-label">Skills</div>
@@ -80,7 +79,7 @@
           <div class="stat-progress">
             <div class="stat-progress-fill" :style="{ width: skillSuccessPct + '%', background: 'var(--violet)' }"></div>
           </div>
-        </a>
+        </NuxtLink>
       </div>
 
       <!-- STUCK TASKS TABLE -->
@@ -292,111 +291,6 @@
       </div>
     </template>
 
-    <!-- SKILL SELF-REPAIR -->
-    <div class="card" v-if="skillFixes.length > 0" id="skill-self-repair" ref="skillCardRef">
-      <div class="card-header">
-        <span class="card-title">⚙ Skill Self-Repair</span>
-        <span v-if="skillFixStats" style="font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)">
-          {{ skillFixStats.totalEvents24h }} events 24h
-          <span v-if="skillSuccessLabel"> • {{ skillSuccessLabel }}</span>
-          <span v-if="skillFixStats.cooldownActive.length > 0"> • {{ skillFixStats.cooldownActive.length }} cooldown</span>
-        </span>
-      </div>
-      <!-- Active fixes banner -->
-      <div v-if="activeSkillFixes.length > 0" style="padding:8px 12px;background:rgba(234,179,8,.08);border-bottom:1px solid rgba(234,179,8,.2);font-size:.8rem;color:var(--ink-2)">
-        <span style="color:#ca8a04;font-weight:600">Fixing:</span>
-        <span v-for="f in activeSkillFixes" :key="f.skill + f.ts" style="margin-left:8px">
-          <span style="font-family:var(--f-mono);color:var(--ink-1);cursor:pointer;text-decoration:underline" @click="openSkillDrawer(f.skill)">{{ f.skill }}</span>
-          <span style="color:var(--ink-3);margin-left:4px">({{ f.location || '?' }})</span>
-        </span>
-      </div>
-
-      <!-- Top failing skills -->
-      <div v-if="skillFixStats && skillFixStats.topFailingSkills.length > 0" style="padding:10px 12px;border-bottom:1px solid var(--border-color)">
-        <div style="font-size:.65rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px">Top problem skills (24h)</div>
-        <div style="display:flex;flex-direction:column;gap:4px">
-          <div v-for="s in skillFixStats.topFailingSkills.slice(0, 5)" :key="s.skill" class="topfail-row">
-            <span class="topfail-name" @click="openSkillDrawer(s.skill)">{{ s.skill }}</span>
-            <div class="topfail-bar"><div class="topfail-bar-fill" :style="{ width: topFailBarPct(s.errorCount) + '%' }"></div></div>
-            <span class="topfail-count">{{ s.errorCount }} err</span>
-            <span v-if="s.fixCount > 0" class="topfail-fixes">{{ s.fixCount }} ✓</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Improvement opportunities -->
-      <div v-if="improvementEvents.length > 0" style="padding:10px 12px;border-bottom:1px solid var(--border-color)">
-        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
-          <div style="font-size:.65rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)">
-            Improvement opportunities ({{ improvementEvents.length }})
-          </div>
-          <label style="font-size:.7rem;color:var(--ink-3);cursor:pointer">
-            <input type="checkbox" v-model="hideImprovements" /> hide
-          </label>
-        </div>
-        <div v-if="!hideImprovements" style="display:flex;flex-direction:column;gap:4px">
-          <div v-for="ev in improvementEvents.slice(0, 5)" :key="ev.ts + ev.skill" style="display:flex;align-items:center;gap:8px;font-size:.78rem">
-            <span style="font-family:var(--f-mono);font-weight:600;cursor:pointer;text-decoration:underline" @click="openSkillDrawer(ev.skill)">{{ ev.skill }}</span>
-            <span style="color:var(--ink-3);font-size:.72rem">{{ skillFixTriggerLabel(ev.errorType) }}</span>
-            <a v-if="ev.prUrl" :href="ev.prUrl" target="_blank" rel="noreferrer" style="margin-left:auto;color:var(--sky);font-size:.72rem">PR →</a>
-          </div>
-        </div>
-      </div>
-
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th>Time</th>
-              <th>Skill</th>
-              <th>Location</th>
-              <th>Trigger</th>
-              <th>Mode</th>
-              <th>Status</th>
-              <th>Strategy</th>
-              <th>Cooldown</th>
-              <th>Details</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="ev in skillFixes.slice(0, 20)" :key="ev.skill + ev.ts" class="clickable" @click="openSkillDrawer(ev.skill)" title="View skill details">
-              <td style="font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3);white-space:nowrap">{{ formatRelative(ev.ts) }}</td>
-              <td style="font-family:var(--f-mono);font-weight:600">{{ ev.skill }}</td>
-              <td>
-                <span v-if="ev.location" :class="['tag', ev.location === 'repo' ? 'sky' : 'violet']">{{ ev.location }}</span>
-                <span v-else style="color:var(--ink-3)">—</span>
-              </td>
-              <td style="font-size:.75rem;color:var(--ink-2)">{{ skillFixTriggerLabel(ev.errorType) }}</td>
-              <td>
-                <span v-if="ev.mode" :class="['tag', ev.mode === 'improve' ? 'sky' : 'red']" style="font-size:.65rem">{{ ev.mode }}</span>
-                <span v-else style="color:var(--ink-3)">—</span>
-              </td>
-              <td>
-                <span :class="['tag', skillFixStatusClass(ev.status)]">{{ ev.status }}</span>
-              </td>
-              <td>
-                <span v-if="ev.strategy" class="tag" style="font-size:.65rem">{{ ev.strategy }}</span>
-                <span v-else style="color:var(--ink-3)">—</span>
-              </td>
-              <td>
-                <span
-                  v-if="typeof ev.recentFixCount === 'number'"
-                  :style="{ fontFamily: 'var(--f-mono)', fontSize: '.72rem', color: ev.recentFixCount >= 2 ? 'var(--red)' : 'var(--ink-3)' }"
-                >{{ ev.recentFixCount }}</span>
-                <span v-else style="color:var(--ink-3)">—</span>
-              </td>
-              <td style="font-size:.75rem" @click.stop>
-                <a v-if="ev.prUrl" :href="ev.prUrl" target="_blank" style="color:var(--sky);text-decoration:none">PR →</a>
-                <span v-else-if="ev.error" style="color:var(--red);font-family:var(--f-mono)" :title="ev.error">{{ ev.error.slice(0, 40) }}…</span>
-                <span v-else-if="ev.files" style="color:var(--ink-3)">{{ ev.files }} file{{ ev.files !== 1 ? 's' : '' }}</span>
-                <span v-else style="color:var(--ink-3)">—</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
     <!-- ISSUE DRAWER (always mounted) -->
     <IssueDrawer
       :issue="drawerIssue"
@@ -405,28 +299,14 @@
       @close="closeDrawer"
       @reset-done="refresh"
     />
-
-    <!-- SKILL FIX DRAWER -->
-    <SkillFixDrawer
-      :skill="skillDrawerSkill"
-      :open="skillDrawerOpen"
-      @close="closeSkillDrawer"
-      @rolled="refresh"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { DraftPr, ReviewPr, SkillFixEvent, StuckTask, WorkflowIssue } from "~/composables/useStatus";
+import type { DraftPr, ReviewPr, StuckTask, WorkflowIssue } from "~/composables/useStatus";
 
 const { status, loadStatus } = useStatus();
-const {
-  skillFixes,
-  skillFixStats,
-  loadSkillFixes,
-  loadSkillFixStats,
-  startPolling: startSkillPolling
-} = useSkillFixes();
+const { skillFixStats, loadSkillFixes, loadSkillFixStats, startPolling: startSkillPolling } = useSkillFixes();
 const { apiFetch } = useApi();
 // biome-ignore lint/correctness/noUnusedVariables: used in template
 const { formatTime, formatRelative, formatDuration, stateLabel, shortenUrl } = useHelpers();
@@ -610,27 +490,6 @@ function closeDrawer() {
   drawerOpen.value = false;
 }
 
-// Stale-guard: a worker crash mid-generation leaves a "generating" event in the
-// log forever. Treat events older than 5 minutes as stale so the banner doesn't
-// show ghost fixes.
-const ACTIVE_FIX_STALE_MS = 5 * 60 * 1000;
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-const activeSkillFixes = computed(() =>
-  (skillFixes.value as SkillFixEvent[]).filter(
-    (e) => e.status === "generating" && Date.now() - new Date(e.ts).getTime() < ACTIVE_FIX_STALE_MS
-  )
-);
-
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-const improvementEvents = computed(() =>
-  (skillFixes.value as SkillFixEvent[]).filter(
-    (e) => e.mode === "improve" && e.errorType === "skill-improvement-opportunity"
-  )
-);
-
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-const hideImprovements = ref(false);
-
 // biome-ignore lint/correctness/noUnusedVariables: used in template
 const skillSuccessLabel = computed(() => {
   const r = skillFixStats.value?.successRate24h;
@@ -645,58 +504,6 @@ const skillSuccessPct = computed(() => {
   return Math.round(r * 100);
 });
 
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-function topFailBarPct(count: number): number {
-  const max = skillFixStats.value?.topFailingSkills[0]?.errorCount || 1;
-  return Math.min(100, (count / Math.max(max, 1)) * 100);
-}
-
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-function skillFixStatusClass(status: SkillFixEvent["status"]): string {
-  if (status === "pr-created" || status === "patched" || status === "patched-with-backup") return "green";
-  if (status === "generating") return "yellow";
-  if (status === "patch-failed") return "orange";
-  if (status === "cooldown") return "violet";
-  if (status === "error" || status === "no-fix" || status === "generation-error") return "red";
-  if (status === "no-op" || status === "pr-exists") return "sky";
-  if (status === "lock-skipped" || status === "not-found" || status === "scope-excluded") return "violet";
-  return "";
-}
-
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-function skillFixTriggerLabel(errorType?: string): string {
-  if (!errorType) return "—";
-  if (errorType === "user-feedback") return "user feedback";
-  if (errorType === "bash-error-in-skill") return "bash error";
-  if (errorType === "tool-error-in-skill") return "mcp error";
-  if (errorType === "skill-load-failed") return "load failed";
-  if (errorType === "skill-bypassed") return "bypassed";
-  if (errorType === "skill-caused-retry") return "silent retry";
-  if (errorType === "skill-caused-fallback") return "silent fallback";
-  if (errorType === "skill-improvement-opportunity") return "improve";
-  return errorType;
-}
-
-const skillCardRef = ref<HTMLElement | null>(null);
-const skillDrawerOpen = ref(false);
-const skillDrawerSkill = ref<string | null>(null);
-
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-function openSkillDrawer(skill: string) {
-  skillDrawerSkill.value = skill;
-  skillDrawerOpen.value = true;
-}
-
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-function closeSkillDrawer() {
-  skillDrawerOpen.value = false;
-}
-
-// biome-ignore lint/correctness/noUnusedVariables: used in template
-function scrollToSkillCard() {
-  skillCardRef.value?.scrollIntoView({ behavior: "smooth", block: "start" });
-}
-
 // biome-ignore lint/correctness/noUnusedVariables: used in template
 async function refresh() {
   await Promise.all([loadStatus(), loadSkillFixes(), loadSkillFixStats()]);
@@ -797,48 +604,4 @@ onMounted(async () => {
   transition: transform .12s ease;
 }
 .stat-card-link:hover { transform: translateY(-1px); }
-
-.topfail-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: .78rem;
-}
-.topfail-name {
-  font-family: var(--f-mono);
-  font-weight: 600;
-  color: var(--ink-1);
-  cursor: pointer;
-  text-decoration: underline;
-  min-width: 100px;
-  max-width: 220px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.topfail-bar {
-  flex: 1;
-  height: 6px;
-  background: var(--bg-input);
-  border-radius: 3px;
-  overflow: hidden;
-  min-width: 60px;
-}
-.topfail-bar-fill {
-  height: 100%;
-  background: var(--red);
-  transition: width .2s;
-}
-.topfail-count {
-  font-family: var(--f-mono);
-  font-size: .72rem;
-  color: var(--red);
-  min-width: 50px;
-  text-align: right;
-}
-.topfail-fixes {
-  font-family: var(--f-mono);
-  font-size: .72rem;
-  color: var(--green);
-}
 </style>

package/src/dashboard/app/pages/skills.vue

@@ -0,0 +1,482 @@
+<template>
+  <div class="page-in">
+    <div class="page-header">
+      <div>
+        <div class="page-title">Skill Self-Repair</div>
+        <div class="page-sub">{{ subLine }}</div>
+      </div>
+      <button class="btn" @click="refresh">↻ Refresh</button>
+    </div>
+
+    <template v-if="skillFixes.length === 0 && !loading">
+      <div class="card" style="padding:24px;text-align:center;color:var(--ink-3)">
+        No skill self-repair events recorded.
+      </div>
+    </template>
+
+    <template v-else>
+      <!-- STAT GRID -->
+      <div class="stat-grid">
+        <div class="stat-card">
+          <div class="stat-card-accent" style="background:linear-gradient(90deg,var(--violet),var(--sky))"></div>
+          <div class="stat-label">Events 24h</div>
+          <div class="stat-value">{{ skillFixStats?.totalEvents24h ?? 0 }}</div>
+          <div class="stat-sub">{{ skillFixStats?.totalEvents7d ?? 0 }} in 7d</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card-accent green"></div>
+          <div class="stat-label">Success Rate</div>
+          <div class="stat-value">{{ skillSuccessLabel || '—' }}</div>
+          <div class="stat-progress"><div class="stat-progress-fill" :style="{ width: skillSuccessPct + '%', background: 'var(--green)' }"></div></div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card-accent violet"></div>
+          <div class="stat-label">Cooldown</div>
+          <div class="stat-value">{{ skillFixStats?.cooldownActive.length ?? 0 }}</div>
+          <div class="stat-sub">{{ skillFixStats?.cooldownActive.length ? 'paused skills' : 'none' }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card-accent sky"></div>
+          <div class="stat-label">Improvements</div>
+          <div class="stat-value">{{ skillFixStats?.improvementOpportunities24h ?? 0 }}</div>
+          <div class="stat-sub">opportunities 24h</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-card-accent orange"></div>
+          <div class="stat-label">Active Fixes</div>
+          <div class="stat-value">{{ activeSkillFixes.length }}</div>
+          <div class="stat-sub">in progress</div>
+        </div>
+      </div>
+
+      <!-- ACTIVE FIXES BANNER -->
+      <div class="card" v-if="activeSkillFixes.length > 0" style="padding:10px 14px;background:rgba(234,179,8,.06);border-color:rgba(234,179,8,.3)">
+        <span style="color:#ca8a04;font-weight:600;font-size:.78rem">Currently fixing:</span>
+        <span v-for="f in activeSkillFixes" :key="f.skill + f.ts" style="margin-left:10px;font-size:.78rem">
+          <span style="font-family:var(--f-mono);cursor:pointer;text-decoration:underline" @click="openSkillDrawer(f.skill)">{{ f.skill }}</span>
+          <span style="color:var(--ink-3);margin-left:4px">({{ f.location || '?' }})</span>
+        </span>
+      </div>
+
+      <!-- TOP FAILING -->
+      <div class="card" v-if="skillFixStats && skillFixStats.topFailingSkills.length > 0">
+        <div class="card-header">
+          <span class="card-title">Top problem skills (24h)</span>
+        </div>
+        <div style="padding:10px 14px;display:flex;flex-direction:column;gap:6px">
+          <div v-for="s in skillFixStats.topFailingSkills" :key="s.skill" class="topfail-row">
+            <span class="topfail-name" @click="openSkillDrawer(s.skill)">{{ s.skill }}</span>
+            <div class="topfail-bar"><div class="topfail-bar-fill" :style="{ width: topFailBarPct(s.errorCount) + '%' }"></div></div>
+            <span class="topfail-count">{{ s.errorCount }} err</span>
+            <span v-if="s.fixCount > 0" class="topfail-fixes">{{ s.fixCount }} ✓</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- IMPROVEMENT OPPORTUNITIES -->
+      <div class="card" v-if="improvementEvents.length > 0">
+        <div class="card-header">
+          <span class="card-title">Improvement opportunities</span>
+          <span style="font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)">{{ improvementEvents.length }} total</span>
+        </div>
+        <div style="padding:10px 14px;display:flex;flex-direction:column;gap:6px">
+          <div v-for="ev in improvementEvents.slice(0, 10)" :key="ev.ts + ev.skill" style="display:flex;align-items:center;gap:8px;font-size:.78rem">
+            <span style="font-family:var(--f-mono);font-weight:600;cursor:pointer;text-decoration:underline" @click="openSkillDrawer(ev.skill)">{{ ev.skill }}</span>
+            <span style="color:var(--ink-3);font-size:.72rem">{{ skillFixTriggerLabel(ev.errorType) }}</span>
+            <span style="color:var(--ink-3);font-size:.7rem;margin-left:auto">{{ formatRelative(ev.ts) }}</span>
+            <a v-if="ev.prUrl" :href="ev.prUrl" target="_blank" rel="noreferrer" style="color:var(--sky);font-size:.72rem">PR →</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- GROUPED TABLE -->
+      <div class="card">
+        <div class="card-header">
+          <span class="card-title">Skills</span>
+          <div style="display:flex;align-items:center;gap:10px">
+            <input
+              v-model="filterKw"
+              placeholder="Filter skill…"
+              class="fsel"
+              style="height:30px;font-size:.78rem;width:180px"
+            />
+            <span style="font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3)">
+              {{ filteredGroups.length }} skill{{ filteredGroups.length !== 1 ? 's' : '' }}
+            </span>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th style="width:24px"></th>
+                <th><button class="sort-btn" :class="{ 'sort-active': sort.col==='skill' }" @click="toggleSort('skill')">Skill {{ sortIco('skill') }}</button></th>
+                <th><button class="sort-btn" :class="{ 'sort-active': sort.col==='total' }" @click="toggleSort('total')">Events {{ sortIco('total') }}</button></th>
+                <th><button class="sort-btn" :class="{ 'sort-active': sort.col==='errors' }" @click="toggleSort('errors')">Errors {{ sortIco('errors') }}</button></th>
+                <th><button class="sort-btn" :class="{ 'sort-active': sort.col==='success' }" @click="toggleSort('success')">✓ {{ sortIco('success') }}</button></th>
+                <th class="max-[860px]:hidden">Location</th>
+                <th class="max-[860px]:hidden">Last status</th>
+                <th class="max-[640px]:hidden"><button class="sort-btn" :class="{ 'sort-active': sort.col==='lastTs' }" @click="toggleSort('lastTs')">Last activity {{ sortIco('lastTs') }}</button></th>
+                <th>Last detail</th>
+              </tr>
+            </thead>
+            <tbody>
+              <template v-for="g in filteredGroups" :key="g.skill">
+                <tr class="clickable" @click="toggleExpand(g.skill)" :title="expanded.has(g.skill) ? 'Collapse' : 'Expand'">
+                  <td style="text-align:center;color:var(--ink-3);font-family:var(--f-mono);font-size:.7rem">
+                    {{ expanded.has(g.skill) ? '▾' : '▸' }}
+                  </td>
+                  <td style="font-family:var(--f-mono);font-weight:600">
+                    <span @click.stop="openSkillDrawer(g.skill)" style="cursor:pointer;text-decoration:underline">{{ g.skill }}</span>
+                  </td>
+                  <td>{{ g.total }}</td>
+                  <td>
+                    <span :style="{ color: g.errors > 0 ? 'var(--red)' : 'var(--ink-3)', fontWeight: g.errors > 0 ? 600 : 400 }">{{ g.errors }}</span>
+                  </td>
+                  <td>
+                    <span :style="{ color: g.success > 0 ? 'var(--green)' : 'var(--ink-3)' }">{{ g.success }}</span>
+                  </td>
+                  <td class="max-[860px]:hidden">
+                    <span v-if="g.location" :class="['tag', g.location === 'repo' ? 'sky' : 'violet']" style="font-size:.65rem">{{ g.location }}</span>
+                    <span v-else style="color:var(--ink-3)">—</span>
+                  </td>
+                  <td class="max-[860px]:hidden">
+                    <span :class="['tag', skillFixStatusClass(g.lastStatus)]" style="font-size:.65rem">{{ g.lastStatus }}</span>
+                  </td>
+                  <td class="max-[640px]:hidden" style="font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);white-space:nowrap">{{ formatRelative(g.lastTs) }}</td>
+                  <td style="font-size:.74rem;max-width:260px" @click.stop>
+                    <a v-if="g.lastPrUrl" :href="g.lastPrUrl" target="_blank" rel="noreferrer" style="color:var(--sky);text-decoration:none">PR →</a>
+                    <span v-else-if="g.lastError" style="color:var(--red);font-family:var(--f-mono);display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle" :title="g.lastError">{{ g.lastError }}</span>
+                    <span v-else-if="g.lastFiles" style="color:var(--ink-3)">{{ g.lastFiles }} file{{ g.lastFiles !== 1 ? 's' : '' }}</span>
+                    <span v-else style="color:var(--ink-3)">—</span>
+                  </td>
+                </tr>
+                <!-- EXPANDED ROW -->
+                <tr v-if="expanded.has(g.skill)" class="expanded-row">
+                  <td></td>
+                  <td colspan="8" style="padding:0">
+                    <div style="padding:10px 14px;background:var(--bg-alt);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)">
+                      <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+                        <span style="font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)">All events ({{ g.events.length }})</span>
+                        <button class="btn" style="height:24px;padding:0 8px;font-size:.7rem;margin-left:auto" @click.stop="openSkillDrawer(g.skill)">Open drawer →</button>
+                      </div>
+                      <div style="display:flex;flex-direction:column;gap:6px">
+                        <div v-for="(ev, idx) in g.events" :key="ev.ts + idx" class="ev-line">
+                          <div class="ev-line-head">
+                            <span style="font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);min-width:90px">{{ formatRelative(ev.ts) }}</span>
+                            <span :class="['tag', skillFixStatusClass(ev.status)]" style="font-size:.62rem">{{ ev.status }}</span>
+                            <span v-if="ev.mode" :class="['tag', ev.mode === 'improve' ? 'sky' : 'red']" style="font-size:.62rem">{{ ev.mode }}</span>
+                            <span v-if="ev.strategy" class="tag" style="font-size:.62rem">{{ ev.strategy }}</span>
+                            <span style="font-size:.7rem;color:var(--ink-2)">{{ skillFixTriggerLabel(ev.errorType) }}</span>
+                            <span v-if="typeof ev.recentFixCount === 'number' && ev.recentFixCount > 0" style="font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);margin-left:auto">cooldown:{{ ev.recentFixCount }}</span>
+                            <a v-if="ev.prUrl" :href="ev.prUrl" target="_blank" rel="noreferrer" style="color:var(--sky);font-size:.7rem;margin-left:auto">PR →</a>
+                          </div>
+                          <div v-if="ev.error" class="ev-line-error">{{ ev.error }}</div>
+                          <div v-else-if="ev.files" style="font-size:.7rem;color:var(--ink-3);margin-top:2px">{{ ev.files }} file{{ ev.files !== 1 ? 's' : '' }} processed</div>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+
+    <SkillFixDrawer
+      :skill="skillDrawerSkill"
+      :open="skillDrawerOpen"
+      @close="closeSkillDrawer"
+      @rolled="refresh"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SkillFixEvent } from "~/composables/useStatus";
+
+const {
+  skillFixes,
+  skillFixStats,
+  loadSkillFixes,
+  loadSkillFixStats,
+  startPolling: startSkillPolling
+} = useSkillFixes();
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+const { formatRelative } = useHelpers();
+
+const loading = ref(true);
+
+const ACTIVE_FIX_STALE_MS = 5 * 60 * 1000;
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+const activeSkillFixes = computed(() =>
+  (skillFixes.value as SkillFixEvent[]).filter(
+    (e) => e.status === "generating" && Date.now() - new Date(e.ts).getTime() < ACTIVE_FIX_STALE_MS
+  )
+);
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+const improvementEvents = computed(() =>
+  (skillFixes.value as SkillFixEvent[]).filter(
+    (e) => e.mode === "improve" && e.errorType === "skill-improvement-opportunity"
+  )
+);
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+const skillSuccessLabel = computed(() => {
+  const r = skillFixStats.value?.successRate24h;
+  if (r === null || r === undefined) return "";
+  return `${Math.round(r * 100)}% ✓`;
+});
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+const skillSuccessPct = computed(() => {
+  const r = skillFixStats.value?.successRate24h;
+  if (r === null || r === undefined) return 0;
+  return Math.round(r * 100);
+});
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+const subLine = computed(() => {
+  const total = skillFixStats.value?.totalEvents24h ?? 0;
+  return total ? `${total} events in last 24h` : "Monitor & retry self-repair attempts";
+});
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function topFailBarPct(count: number): number {
+  const max = skillFixStats.value?.topFailingSkills[0]?.errorCount || 1;
+  return Math.min(100, (count / Math.max(max, 1)) * 100);
+}
+
+const ERROR_STATUSES = new Set(["error", "no-fix", "generation-error", "patch-failed"]);
+const SUCCESS_STATUSES = new Set(["pr-created", "patched", "patched-with-backup"]);
+
+interface SkillGroup {
+  skill: string;
+  total: number;
+  errors: number;
+  success: number;
+  location?: string;
+  lastTs: string;
+  lastStatus: SkillFixEvent["status"];
+  lastError?: string;
+  lastPrUrl?: string;
+  lastFiles?: number;
+  events: SkillFixEvent[];
+}
+
+const groups = computed<SkillGroup[]>(() => {
+  const map = new Map<string, SkillGroup>();
+  const sorted = [...(skillFixes.value as SkillFixEvent[])].sort(
+    (a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime()
+  );
+  for (const ev of sorted) {
+    let g = map.get(ev.skill);
+    if (!g) {
+      g = {
+        skill: ev.skill,
+        total: 0,
+        errors: 0,
+        success: 0,
+        location: ev.location,
+        lastTs: ev.ts,
+        lastStatus: ev.status,
+        lastError: ev.error,
+        lastPrUrl: ev.prUrl,
+        lastFiles: ev.files,
+        events: []
+      };
+      map.set(ev.skill, g);
+    }
+    g.total++;
+    if (ERROR_STATUSES.has(ev.status)) g.errors++;
+    if (SUCCESS_STATUSES.has(ev.status)) g.success++;
+    g.events.push(ev);
+  }
+  return [...map.values()];
+});
+
+const filterKw = ref("");
+const sort = ref<{ col: "skill" | "total" | "errors" | "success" | "lastTs"; dir: "asc" | "desc" }>({
+  col: "lastTs",
+  dir: "desc"
+});
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function toggleSort(col: "skill" | "total" | "errors" | "success" | "lastTs") {
+  sort.value =
+    sort.value.col === col
+      ? { col, dir: sort.value.dir === "desc" ? "asc" : "desc" }
+      : { col, dir: col === "skill" ? "asc" : "desc" };
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function sortIco(col: string): string {
+  if (sort.value.col !== col) return "↕";
+  return sort.value.dir === "desc" ? "↓" : "↑";
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+const filteredGroups = computed(() => {
+  const kw = filterKw.value.trim().toLowerCase();
+  let list = groups.value;
+  if (kw) list = list.filter((g) => g.skill.toLowerCase().includes(kw));
+  const { col, dir } = sort.value;
+  return [...list].sort((a, b) => {
+    let av: number | string;
+    let bv: number | string;
+    if (col === "lastTs") {
+      av = new Date(a.lastTs).getTime();
+      bv = new Date(b.lastTs).getTime();
+    } else if (col === "skill") {
+      av = a.skill;
+      bv = b.skill;
+    } else {
+      av = a[col];
+      bv = b[col];
+    }
+    if (typeof av === "number" && typeof bv === "number") return dir === "asc" ? av - bv : bv - av;
+    return dir === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+  });
+});
+
+const expanded = ref(new Set<string>());
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function toggleExpand(skill: string) {
+  const next = new Set(expanded.value);
+  if (next.has(skill)) next.delete(skill);
+  else next.add(skill);
+  expanded.value = next;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function skillFixStatusClass(status: SkillFixEvent["status"]): string {
+  if (status === "pr-created" || status === "patched" || status === "patched-with-backup") return "green";
+  if (status === "generating") return "yellow";
+  if (status === "patch-failed") return "orange";
+  if (status === "cooldown") return "violet";
+  if (status === "error" || status === "no-fix" || status === "generation-error") return "red";
+  if (status === "no-op" || status === "pr-exists") return "sky";
+  if (status === "lock-skipped" || status === "not-found" || status === "scope-excluded") return "violet";
+  return "";
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function skillFixTriggerLabel(errorType?: string): string {
+  if (!errorType) return "—";
+  if (errorType === "user-feedback") return "user feedback";
+  if (errorType === "bash-error-in-skill") return "bash error";
+  if (errorType === "tool-error-in-skill") return "mcp error";
+  if (errorType === "skill-load-failed") return "load failed";
+  if (errorType === "skill-bypassed") return "bypassed";
+  if (errorType === "skill-caused-retry") return "silent retry";
+  if (errorType === "skill-caused-fallback") return "silent fallback";
+  if (errorType === "skill-improvement-opportunity") return "improve";
+  return errorType;
+}
+
+const skillDrawerOpen = ref(false);
+const skillDrawerSkill = ref<string | null>(null);
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function openSkillDrawer(skill: string) {
+  skillDrawerSkill.value = skill;
+  skillDrawerOpen.value = true;
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in template
+function closeSkillDrawer() {
+  skillDrawerOpen.value = false;
+}
+
+async function refresh() {
+  loading.value = true;
+  await Promise.all([loadSkillFixes(), loadSkillFixStats()]);
+  loading.value = false;
+}
+
+onMounted(async () => {
+  startSkillPolling(15000);
+  await refresh();
+});
+</script>
+
+<style scoped>
+.sort-btn {
+  background: none;
+  border: none;
+  color: var(--ink-3);
+  font-size: .72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+  transition: color .15s;
+}
+.sort-btn:hover { color: var(--ink); }
+.sort-active { color: var(--brand) !important; }
+
+.fsel {
+  height: 36px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: var(--bg);
+  color: var(--ink);
+  font-size: .82rem;
+  outline: none;
+}
+.fsel:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
+
+.topfail-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
+.topfail-name {
+  font-family: var(--f-mono);
+  font-weight: 600;
+  color: var(--ink-1);
+  cursor: pointer;
+  text-decoration: underline;
+  min-width: 140px;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.topfail-bar { flex: 1; height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; min-width: 60px; }
+.topfail-bar-fill { height: 100%; background: var(--red); transition: width .2s; }
+.topfail-count { font-family: var(--f-mono); font-size: .72rem; color: var(--red); min-width: 50px; text-align: right; }
+.topfail-fixes { font-family: var(--f-mono); font-size: .72rem; color: var(--green); }
+
+.expanded-row td { background: var(--bg-alt); }
+
+.ev-line {
+  padding: 6px 8px;
+  background: var(--bg);
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+}
+.ev-line-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.ev-line-error {
+  margin-top: 4px;
+  font-size: .72rem;
+  color: var(--red);
+  font-family: var(--f-mono);
+  word-break: break-word;
+  white-space: pre-wrap;
+  background: rgba(239,68,68,.06);
+  padding: 4px 6px;
+  border-radius: 4px;
+}
+</style>