Changeset 0.37.5 (#217)

Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>

src/js/sw/surfaces/settings/usage.js

@@ -0,0 +1,65 @@
+/**
+ * UsageSection — personal usage statistics
+ */
+const { html } = window;
+const { useState, useEffect } = hooks;
+
+function esc(s) { return s == null ? '' : String(s); }
+function fmt(n) { return n == null ? '0' : n.toLocaleString(); }
+
+export function UsageSection() {
+    const [usage, setUsage] = useState(null);
+
+    useEffect(() => {
+        // Use the generic API escape hatch since there's no dedicated namespace
+        sw.api.get('/api/v1/profile/usage').then(data => {
+            setUsage(data);
+        }).catch(() => setUsage({}));
+    }, []);
+
+    if (usage === null) {
+        return html`<div class="settings-placeholder">Loading usage\u2026</div>`;
+    }
+
+    const totals = usage.totals || usage;
+    const byModel = usage.by_model || [];
+
+    return html`
+        <div class="settings-section">
+            <h3>Totals</h3>
+            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;">
+                ${[
+                    ['Requests', totals.request_count],
+                    ['Input Tokens', totals.input_tokens],
+                    ['Output Tokens', totals.output_tokens],
+                    ['Total Tokens', totals.total_tokens],
+                ].map(([label, val]) => html`
+                    <div style="background:var(--bg-raised);border-radius:8px;padding:14px;">
+                        <div style="font-size:11px;color:var(--text-3);margin-bottom:4px;">${label}</div>
+                        <div style="font-size:18px;font-weight:600;">${fmt(val)}</div>
+                    </div>
+                `)}
+            </div>
+        </div>
+
+        ${byModel.length > 0 && html`
+            <div class="settings-section" style="margin-top:16px;">
+                <h3>By Model</h3>
+                <table class="admin-table">
+                    <thead>
+                        <tr><th>Model</th><th>Requests</th><th>Tokens</th></tr>
+                    </thead>
+                    <tbody>
+                        ${byModel.map(m => html`
+                            <tr>
+                                <td style="font-size:13px;">${esc(m.model_id || m.model)}</td>
+                                <td style="font-size:12px;">${fmt(m.request_count)}</td>
+                                <td style="font-size:12px;">${fmt(m.total_tokens)}</td>
+                            </tr>
+                        `)}
+                    </tbody>
+                </table>
+            </div>
+        `}
+    `;
+}