reasonix 0.34.1 → 0.36.0

package/dashboard/app.css

@@ -85,7 +85,7 @@ a:hover { text-decoration: underline; }
 /* ── Doc chrome ─────────────────────────────────────────────────────────── */
 .page {
   display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-columns: 260px minmax(0, 1fr);
   max-width: 1320px;
   margin: 0 auto;
   min-height: 100vh;
@@ -94,18 +94,19 @@ a:hover { text-decoration: underline; }
   position: sticky; top: 0; align-self: start;
   height: 100vh; overflow-y: auto;
   border-right: 1px solid var(--bd);
-  padding: 28px 18px;
+  padding: 28px 16px;
   background: var(--bg);
 }
-.toc h1 { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--fg-0); letter-spacing: .03em; font-family: var(--font-mono); }
+.toc h1 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--fg-0); letter-spacing: .03em; font-family: var(--font-mono); }
 .toc h1 .dot { color: var(--c-brand); margin-right: 8px; }
-.toc .sub { font-size: 11px; color: var(--fg-3); margin: 0 0 18px; letter-spacing: .04em; }
-.toc-section { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--fg-4); margin: 22px 0 6px; font-weight: 700; }
+.toc .sub { font-size: 12px; color: var(--fg-3); margin: 0 0 18px; letter-spacing: .04em; }
+.toc-section { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-4); margin: 22px 0 6px; font-weight: 700; }
 .toc-section:first-of-type { margin-top: 0; }
 .toc ul { list-style: none; padding: 0; margin: 0; }
 .toc li a {
-  display: block; padding: 3px 8px; margin: 1px 0;
-  color: var(--fg-2); font-size: 12.5px; border-radius: var(--r);
+  display: block; padding: 4px 10px; margin: 1px 0;
+  color: var(--fg-2); font-size: 14px; line-height: 1.4;
+  border-radius: var(--r); overflow-wrap: anywhere;
 }
 .toc li a:hover { color: var(--fg-0); background: var(--bg-elev); text-decoration: none; }
 
@@ -118,7 +119,7 @@ main { padding: 32px 40px 60px 32px; min-width: 0; }
 }
 .section > h2 .num { color: var(--fg-4); margin-right: 10px; font-weight: 500; }
 .section > .lede {
-  color: var(--fg-2); margin: 0 0 22px; font-size: 13px; max-width: 700px; line-height: 1.6;
+  color: var(--fg-2); margin: 0 0 22px; font-size: 15px; max-width: 720px; line-height: 1.6;
 }
 .subsec { margin-bottom: 22px; }
 .subsec > h3 {
@@ -126,8 +127,8 @@ main { padding: 32px 40px 60px 32px; min-width: 0; }
   margin: 24px 0 4px; letter-spacing: .04em; text-transform: uppercase;
   font-family: var(--font-mono);
 }
-.subsec > h3 .desc { color: var(--fg-3); font-weight: 400; margin-left: 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
-.subsec > p { color: var(--fg-3); font-size: 12.5px; margin: 0 0 12px; max-width: 720px; line-height: 1.6; }
+.subsec > h3 .desc { color: var(--fg-3); font-weight: 400; margin-left: 10px; font-size: 13px; text-transform: none; letter-spacing: 0; }
+.subsec > p { color: var(--fg-3); font-size: 15px; margin: 0 0 12px; max-width: 720px; line-height: 1.6; }
 
 /* "Mock" — a faux-window frame to display dashboard pieces inside the design doc */
 .mock {
@@ -155,11 +156,11 @@ main { padding: 32px 40px 60px 32px; min-width: 0; }
 .swatch .chip { width: 22px; height: 22px; border-radius: var(--r); flex-shrink: 0; border: 1px solid rgba(255,255,255,.04); }
 .swatch .meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
 .swatch .name { color: var(--fg-1); font-size: 11.5px; }
-.swatch .hex { color: var(--fg-3); font-size: 10.5px; }
+.swatch .hex { color: var(--fg-3); font-size: 11.5px; }
 
 .scale-row { display: flex; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px dashed #181b22; }
 .scale-row:last-child { border-bottom: none; }
-.scale-row .lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); width: 70px; flex-shrink: 0; }
+.scale-row .lbl { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); width: 76px; flex-shrink: 0; }
 .scale-row .ex { color: var(--fg-1); }
 
 .glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
@@ -311,12 +312,13 @@ main { padding: 32px 40px 60px 32px; min-width: 0; }
 .pill.acc  { color: var(--c-accent); background: rgba(210,168,255,.10); }
 
 /* Table */
-.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: auto; }
 .tbl th, .tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--bd); }
 .tbl th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; background: var(--bg-elev); }
+.tbl th.num, .tbl td.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
 .tbl td { color: var(--fg-1); }
 .tbl tbody tr:hover { background: var(--bg-hover); }
-.tbl td.num { font-family: var(--font-mono); text-align: right; color: var(--fg-0); font-variant-numeric: tabular-nums; }
+.tbl td.num { color: var(--fg-0); }
 .tbl td.dim { color: var(--fg-3); }
 .tbl td.path { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); }
 

package/dashboard/dist/app.js

@@ -19392,12 +19392,19 @@ var en = {
     dailyMeta: "cost \xB7 cache saved \xB7 turns",
     noData: "No usage data yet \u2014 run a turn in reasonix chat / code / run and refresh.",
     windows: "Rolling windows",
+    colWindow: "window",
     colTurns: "turns",
     colCacheHit: "cache hit",
     colCost: "cost (USD)",
     colCacheSaved: "cache saved",
     colVsClaude: "vs Claude",
     colSaved: "saved",
+    axisTime: "time",
+    axisUsd: "USD",
+    axisTurns: "turns",
+    seriesCost: "cost",
+    seriesCacheSaved: "cache saved",
+    seriesTurns: "turns",
     mostUsed: "Most used models",
     colModel: "model"
   },
@@ -19966,12 +19973,19 @@ var zhCN = {
     dailyMeta: "\u8D39\u7528 \xB7 \u7F13\u5B58\u8282\u7701 \xB7 \u8F6E\u6B21",
     noData: "\u6682\u65E0\u7528\u91CF\u6570\u636E \u2014 \u5728 reasonix chat / code / run \u4E2D\u6267\u884C\u4E00\u8F6E\uFF0C\u7136\u540E\u5237\u65B0\u3002",
     windows: "\u6EDA\u52A8\u7A97\u53E3",
+    colWindow: "\u65F6\u95F4\u8303\u56F4",
     colTurns: "\u8F6E\u6B21",
     colCacheHit: "\u7F13\u5B58\u547D\u4E2D",
     colCost: "\u8D39\u7528 (USD)",
     colCacheSaved: "\u7F13\u5B58\u8282\u7701",
     colVsClaude: "\u5BF9\u6BD4 Claude",
     colSaved: "\u8282\u7701",
+    axisTime: "\u65F6\u95F4",
+    axisUsd: "\u7F8E\u5143",
+    axisTurns: "\u8F6E\u6B21",
+    seriesCost: "\u8D39\u7528",
+    seriesCacheSaved: "\u7F13\u5B58\u8282\u7701",
+    seriesTurns: "\u8F6E\u6B21",
     mostUsed: "\u6700\u5E38\u7528\u6A21\u578B",
     colModel: "\u6A21\u578B"
   },
@@ -23347,8 +23361,31 @@ function ChatPanel() {
       cancelled = true;
     };
   }, []);
+  const refetchCanonicalState = q2(async () => {
+    try {
+      const data = await api("/messages");
+      setMessages(data.messages ?? []);
+      setBusy(Boolean(data.busy));
+      setStreaming(null);
+      setActiveTool(null);
+    } catch {
+    }
+    try {
+      const m3 = await api("/modal");
+      setModal(m3.modal ?? null);
+    } catch {
+    }
+  }, []);
   y2(() => {
     const es = new EventSource(`/api/events?token=${TOKEN}`);
+    let firstOpen = true;
+    es.onopen = () => {
+      if (firstOpen) {
+        firstOpen = false;
+        return;
+      }
+      void refetchCanonicalState();
+    };
     es.onmessage = (ev) => {
       let dash;
       try {
@@ -23430,7 +23467,7 @@ function ChatPanel() {
       setTimeout(() => setError(null), 3e3);
     };
     return () => es.close();
-  }, []);
+  }, [refetchCanonicalState]);
   const send = q2(async () => {
     const text = input.trim();
     if (!text || busy) return;
@@ -23846,7 +23883,7 @@ function ChatPanel() {
 function SideRail({ stats, budgetUsd, activePlan }) {
   useLang();
   if (!stats && !activePlan) return html4`<aside class="chat-rail"></aside>`;
-  const cachePct = stats ? Math.round(stats.cacheHitRatio * 100) : 0;
+  const cachePct = stats ? stats.cacheHitRatio * 100 : 0;
   const cacheTone = cachePct >= 80 ? "ok" : cachePct >= 50 ? "" : "warn";
   const showBudget = stats != null && typeof budgetUsd === "number" && budgetUsd > 0;
   const budgetPct = showBudget ? Math.min(120, stats.totalCostUsd / budgetUsd * 100) : 0;
@@ -23864,7 +23901,7 @@ function SideRail({ stats, budgetUsd, activePlan }) {
               <div class="progress-row" style="margin-top:8px">
                 <span class="lbl">${t4("chat.railCacheHit")}</span>
                 <div class=${`progress ${cacheTone}`}><div class="progress-fill" style=${`width:${cachePct}%`}></div></div>
-                <span class="v">${cachePct}%</span>
+                <span class="v">${cachePct.toFixed(1)}%</span>
               </div>
             </div>
           ` : null}
@@ -24878,6 +24915,22 @@ function usePoll(path, intervalMs = 2e3) {
   return { data, error, loading, refresh };
 }
 
+// dashboard/src/lib/version.ts
+function compareVersions(a3, b2) {
+  const [aCore = "0", aPre = ""] = a3.split("-", 2);
+  const [bCore = "0", bPre = ""] = b2.split("-", 2);
+  const aParts = aCore.split(".").map((p3) => Number.parseInt(p3, 10) || 0);
+  const bParts = bCore.split(".").map((p3) => Number.parseInt(p3, 10) || 0);
+  for (let i3 = 0; i3 < 3; i3++) {
+    const diff = (aParts[i3] ?? 0) - (bParts[i3] ?? 0);
+    if (diff !== 0) return diff;
+  }
+  if (!aPre && !bPre) return 0;
+  if (!aPre) return 1;
+  if (!bPre) return -1;
+  return aPre < bPre ? -1 : aPre > bPre ? 1 : 0;
+}
+
 // dashboard/src/panels/overview.ts
 function kpi(label, value, delta, deltaTone) {
   const muted = value === "\u2014" || value === null || value === void 0;
@@ -25060,7 +25113,7 @@ function OverviewPanel() {
     recentPlans: null,
     toolActivity: null
   };
-  const upToDate = o3.latestVersion ? o3.latestVersion === o3.version : null;
+  const upToDate = o3.latestVersion && o3.version ? compareVersions(o3.version, o3.latestVersion) >= 0 : null;
   const versionDelta = upToDate === null ? t4("overview.checking") : upToDate ? t4("overview.latest") : `latest: ${o3.latestVersion}`;
   const versionTone = upToDate === false ? "down" : "flat";
   return html4`
@@ -27176,7 +27229,7 @@ function SystemPanel() {
   if (error) return html4`<div class="card accent-err">${t4("common.loadingFailed", { name: "health", error: error.message })}</div>`;
   if (!data) return null;
   const h3 = data;
-  const upToDate = h3.latestVersion ? h3.latestVersion === h3.version : null;
+  const upToDate = h3.latestVersion ? compareVersions(h3.version, h3.latestVersion) >= 0 : null;
   return html4`
     <div style="display:flex;flex-direction:column;gap:14px">
       <h3 style="margin:0;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em">${t4("system.healthChecks")}</h3>
@@ -27311,6 +27364,7 @@ function loadUPlot() {
 function UsageChart({ days: days2 }) {
   const containerRef = A2(null);
   const plotRef = A2(null);
+  useLang();
   y2(() => {
     let cancelled = false;
     loadUPlot().then((uPlot2) => {
@@ -27338,7 +27392,7 @@ function UsageChart({ days: days2 }) {
           { stroke: "#94a3b8", grid: { stroke: "rgba(148, 163, 184, 0.08)" } },
           {
             scale: "y",
-            label: "USD",
+            label: t4("usage.axisUsd"),
             stroke: "#94a3b8",
             grid: { stroke: "rgba(148, 163, 184, 0.08)" },
             values: (_u, v3) => v3.map((n3) => `$${n3.toFixed(4)}`)
@@ -27346,17 +27400,22 @@ function UsageChart({ days: days2 }) {
           {
             scale: "turns",
             side: 1,
-            label: "turns",
+            label: t4("usage.axisTurns"),
             stroke: "#94a3b8",
             grid: { show: false }
           }
         ],
         series: [
-          {},
-          { label: "cost", stroke: "#67e8f9", width: 2, fill: "rgba(103, 232, 249, 0.10)" },
-          { label: "cache saved", stroke: "#5eead4", width: 2, dash: [4, 4] },
+          { label: t4("usage.axisTime") },
+          {
+            label: t4("usage.seriesCost"),
+            stroke: "#67e8f9",
+            width: 2,
+            fill: "rgba(103, 232, 249, 0.10)"
+          },
+          { label: t4("usage.seriesCacheSaved"), stroke: "#5eead4", width: 2, dash: [4, 4] },
           {
-            label: "turns",
+            label: t4("usage.seriesTurns"),
             stroke: "#c4b5fd",
             scale: "turns",
             width: 1.5,
@@ -27442,13 +27501,13 @@ function UsagePanel() {
                 <table class="tbl">
                   <thead>
                     <tr>
-                      <th></th>
-                      <th>${t4("usage.colTurns")}</th>
-                      <th>${t4("usage.colCacheHit")}</th>
-                      <th>${t4("usage.colCost")}</th>
-                      <th>${t4("usage.colCacheSaved")}</th>
-                      <th>${t4("usage.colVsClaude")}</th>
-                      <th>${t4("usage.colSaved")}</th>
+                      <th>${t4("usage.colWindow")}</th>
+                      <th class="num">${t4("usage.colTurns")}</th>
+                      <th class="num">${t4("usage.colCacheHit")}</th>
+                      <th class="num">${t4("usage.colCost")}</th>
+                      <th class="num">${t4("usage.colCacheSaved")}</th>
+                      <th class="num">${t4("usage.colVsClaude")}</th>
+                      <th class="num">${t4("usage.colSaved")}</th>
                     </tr>
                   </thead>
                   <tbody>