reasonix 0.34.1 → 0.35.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"
   },
@@ -23846,7 +23860,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 +23878,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}
@@ -27311,6 +27325,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 +27353,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 +27361,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 +27462,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>