reasonix 0.29.0 → 0.30.0

package/dashboard/app.css

@@ -812,6 +812,9 @@ main { padding: 32px 40px 60px 32px; min-width: 0; }
 }
 .chip-f:hover { background: var(--bg-hover); color: var(--fg-1); }
 .chip-f.active { color: var(--c-brand); border-color: var(--c-brand); background: rgba(121,192,255,.08); }
+.chip-f.static { cursor: default; }
+.chip-f.static:hover { background: var(--bg-elev); color: var(--fg-2); }
+.chip-f.static.active:hover { color: var(--c-brand); background: rgba(121,192,255,.08); }
 .chip-f .ct { color: var(--fg-4); font-size: 10px; }
 .chip-f.active .ct { color: var(--c-brand); }
 .chip-f .x { color: var(--fg-4); padding: 0 2px; }

package/dashboard/dist/app.js

@@ -22978,7 +22978,7 @@ function ChatPanel() {
     <div class="chat-shell">
       <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px">
         <div class="chips" style="padding:0">
-          <span class="chip-f active">${MODE === "attached" ? t4("chat.modeMirror") : t4("chat.modeView")}</span>
+          <span class="chip-f static active">${MODE === "attached" ? t4("chat.modeMirror") : t4("chat.modeView")}</span>
         </div>
         <div class="header-pickers" style="margin-left:auto">
           ${effort ? html4`
@@ -23329,6 +23329,7 @@ function HooksPanel() {
   const [drafts, setDrafts] = p2({});
   const [busy, setBusy] = p2(false);
   const [info, setInfo] = p2(null);
+  const [eventFilter, setEventFilter] = p2("all");
   const load = x2(async () => {
     try {
       const r3 = await api("/hooks");
@@ -23381,17 +23382,26 @@ function HooksPanel() {
   `;
   const matrixRows = buildMatrix(data);
   const events = data.events.length > 0 ? data.events : Array.from(new Set(matrixRows.flatMap((r3) => Object.keys(r3.cells))));
+  const visibleRows = eventFilter === "all" ? matrixRows : matrixRows.filter((r3) => r3.cells[eventFilter]?.on);
   const gridCols = `220px repeat(${Math.max(events.length, 1)}, minmax(0, 1fr))`;
   return html4`
     <div style="display:flex;flex-direction:column;gap:6px">
       <div class="chips">
-        <span class="chip-f active">${t4("hooks.resolved")} <span class="ct">${data.resolved.length}</span></span>
-        ${data.events.map((ev) => html4`<span class="chip-f">${ev}</span>`)}
+        <span
+          class=${`chip-f ${eventFilter === "all" ? "active" : ""}`}
+          onClick=${() => setEventFilter("all")}
+        >${t4("hooks.resolved")} <span class="ct">${data.resolved.length}</span></span>
+        ${data.events.map(
+    (ev) => html4`<span
+            class=${`chip-f ${eventFilter === ev ? "active" : ""}`}
+            onClick=${() => setEventFilter(ev)}
+          >${ev}</span>`
+  )}
       </div>
       ${info ? html4`<div><span class="pill ok">${info}</span></div>` : null}
       ${error ? html4`<div class="card accent-err">${error}</div>` : null}
 
-      ${sectionH3(t4("hooks.eventMatrix"), t4("hooks.matrixSub", { scripts: matrixRows.length, s: matrixRows.length === 1 ? "" : "s", events: events.length }))}${matrixRows.length === 0 ? html4`<div class="card" style="color:var(--fg-3)">
+      ${sectionH3(t4("hooks.eventMatrix"), t4("hooks.matrixSub", { scripts: matrixRows.length, s: matrixRows.length === 1 ? "" : "s", events: events.length }))}${visibleRows.length === 0 ? html4`<div class="card" style="color:var(--fg-3)">
               ${t4("hooks.noHooks")}
             </div>` : html4`
             <div class="card" style="padding:10px 14px;overflow-x:auto">
@@ -23400,7 +23410,7 @@ function HooksPanel() {
                   <div>${t4("hooks.colScript")}</div>
                   ${events.map((ev) => html4`<div>${ev}</div>`)}
                 </div>
-                ${matrixRows.map(
+                ${visibleRows.map(
     (r3) => html4`
                     <div class="row" style=${`grid-template-columns:${gridCols}`}>
                       <div class="cell" title=${r3.command}>
@@ -24432,8 +24442,8 @@ function PermissionsPanel() {
             </div>` : null}
 
       <div class="chips">
-        <span class="chip-f active">${t4("permissions.project")} <span class="ct">${p3.project.length}</span></span>
-        <span class="chip-f">${t4("permissions.builtin")} <span class="ct">${p3.builtin.length}</span></span>
+        <span class="chip-f static active">${t4("permissions.project")} <span class="ct">${p3.project.length}</span></span>
+        <span class="chip-f static">${t4("permissions.builtin")} <span class="ct">${p3.builtin.length}</span></span>
       </div>
 
       ${p3.currentCwd ? html4`
@@ -24533,6 +24543,7 @@ function PlansPanel() {
   const { data, error, loading } = usePoll("/plans", 8e3);
   const [openIdx, setOpenIdx] = p2(null);
   const [filter, setFilter] = p2("");
+  const [statusFilter, setStatusFilter] = p2("all");
   if (loading && !data)
     return html4`<div class="card" style="color:var(--fg-3)">${t4("plans.loading")}</div>`;
   if (error) return html4`<div class="card accent-err">${t4("common.loadingFailed", { name: "plans", error: error.message })}</div>`;
@@ -24541,9 +24552,10 @@ function PlansPanel() {
     return html4`<div class="card" style="color:var(--fg-3)">
       ${t4("plans.noPlans")}
     </div>`;
-  const filtered = filter.trim() ? plans.filter(
+  const statusFiltered = statusFilter === "all" ? plans : statusFilter === "active" ? plans.filter((p3) => p3.completionRatio > 0 && p3.completionRatio < 1) : plans.filter((p3) => p3.completionRatio >= 1);
+  const filtered = filter.trim() ? statusFiltered.filter(
     (p3) => p3.session.toLowerCase().includes(filter.toLowerCase()) || (p3.summary ?? "").toLowerCase().includes(filter.toLowerCase())
-  ) : plans;
+  ) : statusFiltered;
   const open = openIdx !== null ? plans[openIdx] : null;
   return html4`
     <div class="sessions-grid">
@@ -24558,12 +24570,21 @@ function PlansPanel() {
           />
         </div>
         <div class="chips" style="padding:0 12px 8px">
-          <span class="chip-f active">${t4("common.all")} <span class="ct">${plans.length}</span></span>
-          <span class="chip-f">
+          <span
+            class=${`chip-f ${statusFilter === "all" ? "active" : ""}`}
+            onClick=${() => setStatusFilter("all")}
+          >${t4("common.all")} <span class="ct">${plans.length}</span></span>
+          <span
+            class=${`chip-f ${statusFilter === "active" ? "active" : ""}`}
+            onClick=${() => setStatusFilter("active")}
+          >
             ${t4("plans.active")}
             <span class="ct">${plans.filter((p3) => p3.completionRatio > 0 && p3.completionRatio < 1).length}</span>
           </span>
-          <span class="chip-f">
+          <span
+            class=${`chip-f ${statusFilter === "done" ? "active" : ""}`}
+            onClick=${() => setStatusFilter("done")}
+          >
             ${t4("plans.done")} <span class="ct">${plans.filter((p3) => p3.completionRatio >= 1).length}</span>
           </span>
         </div>
@@ -24742,10 +24763,10 @@ function SemanticPanel() {
     <div style="display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start">
       <div style="display:flex;flex-direction:column;gap:10px;min-width:0">
         <div class="chips">
-          <span class=${`chip-f ${idx?.exists ? "active" : ""}`}>
+          <span class=${`chip-f static ${idx?.exists ? "active" : ""}`}>
             ${idx?.exists ? t4("semantic.indexBuilt") : t4("semantic.noIndex")}
           </span>
-          ${ready ? html4`<span class="chip-f" style="border-color:var(--c-ok);color:var(--c-ok)">${t4("semantic.ready")}</span>` : html4`<span class="chip-f" style="border-color:var(--c-warn);color:var(--c-warn)">${t4("semantic.setupNeeded")}</span>`}
+          ${ready ? html4`<span class="chip-f static" style="border-color:var(--c-ok);color:var(--c-ok)">${t4("semantic.ready")}</span>` : html4`<span class="chip-f static" style="border-color:var(--c-warn);color:var(--c-warn)">${t4("semantic.setupNeeded")}</span>`}
         </div>
         ${info ? html4`<div><span class="pill info">${info}</span></div>` : null}
         ${error ? html4`<div class="card accent-err">${error}</div>` : null}
@@ -25163,7 +25184,7 @@ function ChipFormRow({
       <div style="display:flex;flex-wrap:wrap;gap:4px">
         ${value.map(
     (e3) => html4`
-            <span class="chip-f">
+            <span class="chip-f static">
               <span>${e3}</span>
               <span class="x" style="cursor:pointer" onClick=${() => remove(e3)} title="remove">×</span>
             </span>
@@ -25279,7 +25300,7 @@ function SessionsPanel() {
           />
         </div>
         <div class="chips" style="padding:0 12px 8px">
-          <span class="chip-f active">${t4("common.all")} <span class="ct">${sessions.length}</span></span>
+          <span class="chip-f static active">${t4("common.all")} <span class="ct">${sessions.length}</span></span>
         </div>
         <div class="ssl-rows">
           ${filtered.map(
@@ -25533,6 +25554,7 @@ function SkillsPanel() {
   const [newName, setNewName] = p2("");
   const [newScope, setNewScope] = p2("global");
   const [filter, setFilter] = p2("");
+  const [scopeFilter, setScopeFilter] = p2("all");
   const load = x2(async () => {
     try {
       setData(await api("/skills"));
@@ -25624,9 +25646,10 @@ description: TODO \u2014 one-line description that helps the model match this sk
     ...data.global.map((s3) => ({ scope: "global", ...s3 })),
     ...data.builtin.map((s3) => ({ scope: "builtin", ...s3 }))
   ];
-  const filtered = filter.trim() ? allWith.filter(
+  const scopeFiltered = scopeFilter === "all" ? allWith : allWith.filter((s3) => s3.scope === scopeFilter);
+  const filtered = filter.trim() ? scopeFiltered.filter(
     (s3) => s3.name.toLowerCase().includes(filter.toLowerCase()) || (s3.description ?? "").toLowerCase().includes(filter.toLowerCase())
-  ) : allWith;
+  ) : scopeFiltered;
   return html4`
     <div class="sessions-grid">
       <div class="sessions-list">
@@ -25640,10 +25663,22 @@ description: TODO \u2014 one-line description that helps the model match this sk
           />
         </div>
         <div class="chips" style="padding:0 12px 8px">
-          <span class="chip-f active">${t4("common.all")} <span class="ct">${allWith.length}</span></span>
-          <span class="chip-f">${t4("skills.project")} <span class="ct">${data.project.length}</span></span>
-          <span class="chip-f">${t4("skills.global")} <span class="ct">${data.global.length}</span></span>
-          <span class="chip-f">${t4("skills.builtin")} <span class="ct">${data.builtin.length}</span></span>
+          <span
+            class=${`chip-f ${scopeFilter === "all" ? "active" : ""}`}
+            onClick=${() => setScopeFilter("all")}
+          >${t4("common.all")} <span class="ct">${allWith.length}</span></span>
+          <span
+            class=${`chip-f ${scopeFilter === "project" ? "active" : ""}`}
+            onClick=${() => setScopeFilter("project")}
+          >${t4("skills.project")} <span class="ct">${data.project.length}</span></span>
+          <span
+            class=${`chip-f ${scopeFilter === "global" ? "active" : ""}`}
+            onClick=${() => setScopeFilter("global")}
+          >${t4("skills.global")} <span class="ct">${data.global.length}</span></span>
+          <span
+            class=${`chip-f ${scopeFilter === "builtin" ? "active" : ""}`}
+            onClick=${() => setScopeFilter("builtin")}
+          >${t4("skills.builtin")} <span class="ct">${data.builtin.length}</span></span>
         </div>
 
         <div style="padding:0 12px 8px;display:flex;gap:6px;flex-wrap:wrap">
@@ -25832,8 +25867,8 @@ function ToolsPanel() {
   return html4`
     <div style="display:flex;flex-direction:column;gap:14px">
       <div class="chips">
-        <span class="chip-f active">${t4("common.all")} <span class="ct">${d3.total}</span></span>
-        ${d3.planMode ? html4`<span class="chip-f" style="border-color:var(--c-warn);color:var(--c-warn)">${t4("tools.planMode")}</span>` : null}
+        <span class="chip-f static active">${t4("common.all")} <span class="ct">${d3.total}</span></span>
+        ${d3.planMode ? html4`<span class="chip-f static" style="border-color:var(--c-warn);color:var(--c-warn)">${t4("tools.planMode")}</span>` : null}
       </div>
 
       ${d3.tools.length === 0 ? html4`<div class="card" style="color:var(--fg-3)">${t4("tools.noTools")}</div>` : html4`
@@ -25989,8 +26024,8 @@ function UsagePanel() {
   return html4`
     <div style="display:flex;flex-direction:column;gap:6px">
       <div class="chips">
-        <span class="chip-f active">${t4("usage.records", { count: u3.recordCount.toLocaleString() })}</span>
-        <span class="chip-f">${u3.logSize}</span>
+        <span class="chip-f static active">${t4("usage.records", { count: u3.recordCount.toLocaleString() })}</span>
+        <span class="chip-f static">${u3.logSize}</span>
       </div>
 
       ${series && series.length > 0 ? html4`