privateboard 0.1.4 → 0.1.6

package/public/room-settings.js

@@ -125,6 +125,8 @@
   const MODEL_LABELS = {
     "sonnet-4-6":     "Sonnet 4.6",
     "opus-4-7":       "Opus 4.7",
+    "opus-4-6":       "Opus 4.6",
+    "opus-4-6-fast":  "Opus 4.6 Fast",
     "haiku-4-5":      "Haiku 4.5",
     "gpt-5-5":        "GPT-5.5",
     "gpt-5-4":        "GPT-5.4",

package/public/user-settings.css

@@ -733,6 +733,184 @@
   line-height: 1.55;
 }
 
+/* ─── Day picker · pill toggle above the 14-day chart ───
+   Two pills max: "All · cumulative" is always present; a date pill
+   appears only when the user has clicked into a specific bar. The
+   active pill carries a hairline ring + subtle accent background so
+   the current scope is unambiguous. */
+.us-day-picker {
+  display: inline-flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.us-day-pill {
+  appearance: none;
+  background: transparent;
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  color: var(--text-soft, #8E8B83);
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 10.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: color 0.12s, border-color 0.12s, background 0.12s;
+}
+.us-day-pill:hover {
+  color: var(--text, #C8C5BE);
+  border-color: var(--text-faint, #3A382F);
+}
+.us-day-pill.active {
+  color: var(--lime, #6FB572);
+  border-color: var(--lime, #6FB572);
+  background: var(--panel-2, #1A1A18);
+}
+
+/* ─── 14-day stacked bar chart ───
+   Layout: a header strip with the window's total, then a flex row
+   of 14 bar buttons. Each button is a vertical column wrapping a
+   `.us-chart-stack` (the actual coloured stack, height ∈ [0, 100%])
+   and a `.us-chart-tick` (M·D label below). The bar's parent flexes
+   to share width — bars stay clickable down to ~16px. */
+.us-chart-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 12px 8px;
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  background: var(--panel-2, #1A1A18);
+}
+.us-chart-meta {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 10px;
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+}
+.us-chart-meta-label {
+  font-size: 9.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-faint, #3A382F);
+  font-weight: 600;
+}
+.us-chart-meta-value {
+  font-size: 13px;
+  color: var(--text, #C8C5BE);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+.us-chart-bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 96px;
+  /* The stack within each bar lives at the bottom (flex-end) so
+     bar height grows upward like a real chart axis. */
+}
+.us-chart-bar {
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  flex: 1 1 0;
+  min-width: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-end;
+  height: 100%;
+  cursor: pointer;
+  position: relative;
+}
+.us-chart-bar:hover .us-chart-stack { filter: brightness(1.15); }
+.us-chart-bar.empty .us-chart-stack {
+  height: 1px !important;
+  background: var(--line-bright, #2A2A26);
+}
+.us-chart-bar.today::before {
+  /* Outline marker for today's bar — a hairline ring around the
+     full bar slot (including the empty space above the stack)
+     so the present is locatable even on a zero-token day. */
+  content: "";
+  position: absolute;
+  inset: 0 -1px 14px -1px;
+  border: 0.5px solid var(--text-faint, #3A382F);
+  pointer-events: none;
+}
+.us-chart-bar.active::before {
+  content: "";
+  position: absolute;
+  inset: 0 -1px 14px -1px;
+  border: 1px solid var(--lime, #6FB572);
+  pointer-events: none;
+}
+.us-chart-stack {
+  display: flex;
+  flex-direction: column-reverse; /* first segment at the bottom */
+  width: 100%;
+  background: transparent;
+  overflow: hidden;
+  transition: height 0.2s ease;
+}
+.us-chart-seg {
+  display: block;
+  width: 100%;
+  min-height: 1px;
+}
+.us-chart-tick {
+  display: block;
+  margin-top: 4px;
+  height: 10px;
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 8.5px;
+  letter-spacing: 0.06em;
+  color: var(--text-faint, #3A382F);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.us-chart-bar.today .us-chart-tick { color: var(--text-soft, #8E8B83); }
+.us-chart-bar.active .us-chart-tick { color: var(--lime, #6FB572); }
+
+/* ─── Day-empty placeholder · shown in the drill-down area when the
+   user clicks a bar with zero tokens. Mirrors `.us-usage-empty`'s
+   restraint, but tighter — the chart itself already gives plenty of
+   context. */
+.us-day-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 28px 12px;
+  border: 0.5px dashed var(--line-bright, #2A2A26);
+}
+.us-day-empty-tag {
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 10.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-soft, #8E8B83);
+  font-weight: 700;
+}
+.us-day-empty-text {
+  font-size: 11.5px;
+  color: var(--text-faint, #3A382F);
+}
+
+/* Optional scope tag above the big total · "Cumulative since install"
+   or the long-form date for the selected day. Sits as a tiny mono
+   kicker so the user knows what scope the head numbers describe. */
+.us-usage-total-scope {
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+  font-size: 9.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--text-faint, #3A382F);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
 /* ─── Header strip · big total + meta column ─── */
 .us-usage-head {
   display: grid;

package/public/user-settings.js

@@ -290,9 +290,29 @@
     `;
   }
 
+  /* Usage-pane state · the cumulative summary fetched from /api/usage/summary
+   *  + the currently-selected day for the drill-down panel. `null` selection
+   *  means "All · cumulative" (the legacy view, default on open). */
+  let _usageSummary = null;
+  let _selectedDay = null;
+
+  function fmtDayLabel(dayStr) {
+    // 'YYYY-MM-DD' → 'M·D' for the bar's x-axis tick label.
+    const [, m, d] = dayStr.split("-");
+    return `${parseInt(m, 10)}·${parseInt(d, 10)}`;
+  }
+  function fmtDayLong(dayStr) {
+    // 'YYYY-MM-DD' → 'Apr 25' style for the drill-down header.
+    const d = new Date(dayStr + "T00:00:00");
+    if (isNaN(d.getTime())) return dayStr;
+    const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+    return `${months[d.getMonth()]} ${d.getDate()}`;
+  }
+
   function renderUsagePane(s) {
     const pane = paneEl.querySelector("[data-usage-pane]");
     if (!pane) return;
+    _usageSummary = s;
     if (!s || s.totalTokens === 0) {
       pane.innerHTML = `
         <div class="us-usage-empty">
@@ -302,15 +322,138 @@
       `;
       return;
     }
+    pane.innerHTML = `
+      ${renderDayPicker(s)}
+      ${renderUsageChart(s)}
+      <div data-usage-detail>${renderUsageDetail(s, null)}</div>
+    `;
+  }
 
-    const total = s.totalTokens;
-    const segments = s.byModel.map((m) => {
+  /* ─── Day picker · pill toggle above the chart ────────────────
+     Two pills: [All · cumulative] always present; the second appears
+     only when a specific day is selected and shows "May 8" (or the
+     localised date). Clicking either pill or any chart bar swaps
+     the detail body below. */
+  function renderDayPicker(s) {
+    const day = _selectedDay;
+    const allActive = day === null ? " active" : "";
+    const dayActive = day !== null ? " active" : "";
+    const dayPill = day !== null
+      ? `<button type="button" class="us-day-pill${dayActive}" data-usage-day="${escape(day)}">${escape(fmtDayLong(day))}</button>`
+      : "";
+    return `
+      <div class="us-day-picker">
+        <button type="button" class="us-day-pill${allActive}" data-usage-day="all">All · cumulative</button>
+        ${dayPill}
+      </div>
+    `;
+  }
+
+  /* ─── 14-day stacked bar chart · provider-coloured ───────────
+     Each bar is a vertical column flexing to fill the available
+     width; segments inside it stack by provider colour, weighted by
+     each provider's share of THAT day's tokens. Bar heights are
+     linear-scaled to the 14-day window's max — empty days render
+     as a 1px baseline tick that's still clickable so the user can
+     drill into "no usage on this day" without a separate empty
+     state. Today's bar carries an outline marker. */
+  function renderUsageChart(s) {
+    const days = Array.isArray(s.daily) ? s.daily : [];
+    if (days.length === 0) return "";
+    const max = days.reduce((m, d) => Math.max(m, d.totalTokens || 0), 0);
+    const last14Total = days.reduce((sum, d) => sum + (d.totalTokens || 0), 0);
+    const todayKey = days[days.length - 1]?.day;
+    const bars = days.map((d) => {
+      const total = d.totalTokens || 0;
+      // Linear height scaled to 14-day max. Below 1% of max we still
+      // give a 1px tick so empty days are clickable.
+      const heightPct = max > 0 ? Math.max(total > 0 ? (total / max) * 100 : 0, total > 0 ? 2 : 0) : 0;
+      // Provider sub-segments inside the bar · stacked bottom → top.
+      const segs = (d.byModel || [])
+        .reduce((map, m) => {
+          // Collapse models within the same provider into one stack
+          // segment · bar resolution stays per-provider; per-model
+          // detail lives in the drill-down below.
+          const cur = map.get(m.provider) || { tokens: 0, names: [] };
+          cur.tokens += m.tokens;
+          cur.names.push(`${m.displayName} ${fmtTokens(m.tokens)}`);
+          map.set(m.provider, cur);
+          return map;
+        }, new Map());
+      const segHtml = Array.from(segs.entries()).map(([provider, v]) => {
+        const segPct = total > 0 ? (v.tokens / total) * 100 : 0;
+        const color = PROVIDER_COLOR_VAR[provider] || PROVIDER_COLOR_VAR.unknown;
+        return `<span class="us-chart-seg" style="height:${segPct.toFixed(2)}%;background:var(${color})" title="${escape(v.names.join(' · '))}"></span>`;
+      }).join("");
+      const isToday = d.day === todayKey;
+      const isSelected = _selectedDay === d.day;
+      const cls = ["us-chart-bar"];
+      if (isToday) cls.push("today");
+      if (isSelected) cls.push("active");
+      if (total === 0) cls.push("empty");
+      const tooltip = total > 0
+        ? `${fmtDayLong(d.day)} · ${fmtTokens(total)} tokens`
+        : `${fmtDayLong(d.day)} · no usage`;
+      return `
+        <button type="button" class="${cls.join(' ')}" data-usage-day="${escape(d.day)}" title="${escape(tooltip)}">
+          <span class="us-chart-stack" style="height:${heightPct.toFixed(2)}%">${segHtml}</span>
+          <span class="us-chart-tick">${escape(fmtDayLabel(d.day))}</span>
+        </button>
+      `;
+    }).join("");
+    return `
+      <div class="us-chart-wrap" aria-label="14-day token usage">
+        <div class="us-chart-meta">
+          <span class="us-chart-meta-label">Last 14 days</span>
+          <span class="us-chart-meta-value">${fmtTokens(last14Total)}</span>
+        </div>
+        <div class="us-chart-bars">${bars}</div>
+      </div>
+    `;
+  }
+
+  /* ─── Detail · the original "by model / top consumers" body,
+     parameterised on either the cumulative summary `s` (when
+     `dayKey === null`) or one day's rollup pulled from `s.daily`
+     (when `dayKey` matches a day). ────────────────────────────── */
+  function renderUsageDetail(s, dayKey) {
+    if (dayKey === null) {
+      return renderDetailBody({
+        total: s.totalTokens,
+        byModel: s.byModel,
+        byAgent: s.byAgent,
+        agentCount: s.agentCount,
+        retired: s.retired || { tokens: 0, agents: 0 },
+        scopeLabel: "Cumulative since install",
+      });
+    }
+    const d = (s.daily || []).find((x) => x.day === dayKey);
+    if (!d || d.totalTokens === 0) {
+      return `
+        <div class="us-day-empty">
+          <div class="us-day-empty-tag">${escape(fmtDayLong(dayKey))}</div>
+          <div class="us-day-empty-text">no usage on this day.</div>
+        </div>
+      `;
+    }
+    return renderDetailBody({
+      total: d.totalTokens,
+      byModel: d.byModel,
+      byAgent: d.byAgent,
+      agentCount: d.byAgent.length,
+      retired: { tokens: 0, agents: 0 },
+      scopeLabel: fmtDayLong(dayKey),
+    });
+  }
+
+  function renderDetailBody({ total, byModel, byAgent, agentCount, retired, scopeLabel }) {
+    const segments = byModel.map((m) => {
       const pct = (m.tokens / total) * 100;
       const color = PROVIDER_COLOR_VAR[m.provider] || PROVIDER_COLOR_VAR.unknown;
       return `<span class="us-usage-seg" style="width:${pct.toFixed(2)}%;background:var(${color})" title="${escape(m.displayName)} · ${fmtTokens(m.tokens)}"></span>`;
     }).join("");
 
-    const modelRows = s.byModel.map((m) => {
+    const modelRows = byModel.map((m) => {
       const pct = (m.tokens / total) * 100;
       const color = PROVIDER_COLOR_VAR[m.provider] || PROVIDER_COLOR_VAR.unknown;
       return `
@@ -332,8 +475,7 @@
       `;
     }).join("");
 
-    // Top consumers (top 6 by tokens, skip silent agents).
-    const topAgents = s.byAgent.filter((a) => a.tokens > 0).slice(0, 6);
+    const topAgents = byAgent.filter((a) => a.tokens > 0).slice(0, 6);
     const agentRows = topAgents.map((a) => {
       const pct = (a.tokens / total) * 100;
       const color = PROVIDER_COLOR_VAR[a.provider] || PROVIDER_COLOR_VAR.unknown;
@@ -353,17 +495,11 @@
       `;
     }).join("");
 
-    const silentCount = s.byAgent.length - topAgents.length;
+    const silentCount = byAgent.length - topAgents.length;
     const silentNote = silentCount > 0
       ? `<div class="us-agent-silent">+ ${silentCount} agent${silentCount === 1 ? "" : "s"} not yet billed</div>`
       : "";
 
-    // Retired-agents footer · custom directors that the user has
-    // deleted. Their per-agent identity is gone but the tokens were
-    // real, so we surface a small footer note acknowledging that the
-    // model-level totals above include their share. Hidden when no
-    // agents have ever been deleted with consumed tokens.
-    const retired = s.retired || { tokens: 0, agents: 0 };
     const retiredNote = retired.tokens > 0
       ? `
         <div class="us-usage-retired">
@@ -377,24 +513,25 @@
       `
       : "";
 
-    pane.innerHTML = `
+    return `
       <div class="us-usage-head">
         <div class="us-usage-total">
+          <div class="us-usage-total-scope">${escape(scopeLabel)}</div>
           <div class="us-usage-total-num">${fmtTokens(total)}</div>
           <div class="us-usage-total-raw">${total.toLocaleString()} tokens</div>
         </div>
         <div class="us-usage-meta">
           <div class="us-usage-meta-row">
             <span class="us-usage-meta-label">Models</span>
-            <span class="us-usage-meta-value">${s.byModel.length}</span>
+            <span class="us-usage-meta-value">${byModel.length}</span>
           </div>
           <div class="us-usage-meta-row">
             <span class="us-usage-meta-label">Agents</span>
-            <span class="us-usage-meta-value">${s.agentCount}</span>
+            <span class="us-usage-meta-value">${agentCount}</span>
           </div>
           <div class="us-usage-meta-row">
             <span class="us-usage-meta-label">Active</span>
-            <span class="us-usage-meta-value">${s.byAgent.filter((a) => a.tokens > 0).length}</span>
+            <span class="us-usage-meta-value">${byAgent.filter((a) => a.tokens > 0).length}</span>
           </div>
         </div>
       </div>
@@ -418,14 +555,32 @@
     `;
   }
 
+  /** Click handler · delegated on the pane. Bar OR pill click flips
+   *  `_selectedDay` and re-renders chart + drill-down in place. We
+   *  re-render the WHOLE pane (cheap; it's a small DOM) so the active-
+   *  state classes on bars and pills both stay in sync. */
+  function onUsageClick(e) {
+    const trigger = e.target.closest("[data-usage-day]");
+    if (!trigger) return;
+    if (!_usageSummary) return;
+    const next = trigger.dataset.usageDay;
+    _selectedDay = (next === "all") ? null : next;
+    renderUsagePane(_usageSummary);
+  }
+
   async function wireUsageSection() {
+    const pane = paneEl.querySelector("[data-usage-pane]");
+    if (pane && !pane.dataset.usageBound) {
+      pane.addEventListener("click", onUsageClick);
+      pane.dataset.usageBound = "1";
+    }
     try {
       const r = await fetch("/api/usage/summary");
       if (!r.ok) throw new Error("HTTP " + r.status);
       const s = await r.json();
+      _selectedDay = null; // reset to "All" on each pane open
       renderUsagePane(s);
     } catch (e) {
-      const pane = paneEl.querySelector("[data-usage-pane]");
       if (pane) pane.innerHTML = `<div class="us-usage-empty"><div class="us-usage-empty-text">couldn't fetch usage stats. ${escape(String(e && e.message || e))}</div></div>`;
     }
   }