opencode-dashboard-client 0.1.1 → 0.3.0

package/package.json

@@ -1,24 +1,39 @@
 {
   "name": "opencode-dashboard-client",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "type": "module",
-  "description": "Front-end for the opencode token-usage dashboard. Ships the built SPA plus the front-end server (bun server.ts) that proxies to dashboard backends.",
+  "description": "Front-end for the opencode token-usage dashboard. Ships the built SPA plus a node CLI (opencode-dashboard serve/configure) that serves the SPA and proxies to dashboard backends.",
+  "homepage": "https://github.com/GCS-ZHN/opencode-dashboard#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GCS-ZHN/opencode-dashboard.git"
+  },
+  "bugs": {
+    "url": "https://github.com/GCS-ZHN/opencode-dashboard/issues"
+  },
+  "bin": {
+    "opencode-dashboard": "dist-cli/cli.mjs"
+  },
   "files": [
     "dist",
-    "server.ts",
-    "src/config.ts"
+    "dist-cli"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && tsc -p tsconfig.node.json && vite build && bun build cli.ts --target=node --outfile=dist-cli/cli.mjs",
     "preview": "vite preview",
     "mock": "bun mock-server.ts",
+    "serve": "node dist-cli/cli.mjs serve",
     "prepublishOnly": "npm run build"
   },
+  "dependencies": {
+    "yaml": "^2.8.0"
+  },
   "devDependencies": {
+    "@types/bun": "^1.1.0",
     "typescript": "^5.7.0",
     "vite": "^7.0.0"
   }

package/dist/assets/index-D9vQPXiw.js

@@ -1 +0,0 @@
-(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))o(i);new MutationObserver(i=>{for(const r of i)if(r.type==="childList")for(const a of r.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&o(a)}).observe(document,{childList:!0,subtree:!0});function n(i){const r={};return i.integrity&&(r.integrity=i.integrity),i.referrerPolicy&&(r.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?r.credentials="include":i.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function o(i){if(i.ep)return;i.ep=!0;const r=n(i);fetch(i.href,r)}})();async function b(s,e){const n=await fetch(s+e);if(!n.ok){let o=`${n.status} ${n.statusText}`;try{const i=await n.json();i.detail&&(o=String(i.detail))}catch{}throw new Error(o)}return n.json()}function v(s){return`/api/s/${s}`}const S={overview:s=>b(v(s),"/overview"),projects:s=>b(v(s),"/projects"),project:(s,e)=>b(v(s),`/projects/${encodeURIComponent(e)}`),session:(s,e)=>b(v(s),`/sessions/${encodeURIComponent(e)}`)},A=[["input","seg-in"],["output","seg-out"],["reasoning","seg-rea"],["cacheRead","seg-cr"],["cacheWrite","seg-cw"]];function t(s,e,n){const o=document.createElement(s);return e&&(o.className=e),n!==void 0&&(o.textContent=n),o}function M(s){return s>=1e6?(s/1e6).toFixed(1).replace(/\.0$/,"")+"M":s>=1e3?(s/1e3).toFixed(1).replace(/\.0$/,"")+"K":String(s)}function y(s){if(!s)return"$0";if(s<1e-4)return"< $0.0001";const e=s.toFixed(4).replace(/0+$/,"").replace(/\.$/,"");return"$"+(e===""?"0":e)}function U(s){const e=Math.max(0,Math.round((Date.now()-s)/1e3));return e<60?`${e}s ago`:e<3600?`${Math.round(e/60)}m ago`:e<86400?`${Math.round(e/3600)}h ago`:`${Math.round(e/86400)}d ago`}function W(s){const e=t("div","bar");if(!s.total)return e.classList.add("bar-empty"),e.title="0 tokens",e;for(const[n,o]of A){const i=s[n]/s.total*100;if(i<=0)continue;const r=t("div",`seg ${o}`);r.style.width=`${i}%`,r.title=`${n}: ${M(s[n])}`,e.appendChild(r)}return e}function w(s,e=!1){const n=t("div","tcell"+(e?" hero":"")),o=t("div","bar-wrap");return o.appendChild(W(s)),n.append(o,t("span","num",M(s.total))),n}const m=[{name:"main",url:"http://127.0.0.1:8791"},{name:"backup",url:"http://127.0.0.1:8792"},{name:"dev",url:"http://127.0.0.1:8793"},{name:"staging",url:"http://127.0.0.1:8794"}],P=30,k=["#58a6ff","#3fb950","#a371f7","#d29922","#f85149"];function F(s){if(!s.data)return null;try{return JSON.parse(String(s.data))}catch{return null}}function B(s,e){return{input:s.input+e.input,output:s.output+e.output,reasoning:s.reasoning+e.reasoning,cacheRead:s.cacheRead+e.cacheRead,cacheWrite:s.cacheWrite+e.cacheWrite,total:s.total+e.total}}function E(s,e){s.tabIndex=0,s.addEventListener("click",e),s.addEventListener("keydown",n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),e())})}class V{constructor(e){this.idx=e,this.base=m[e].url,this.root=t("section","server"),this.root.dataset.url=this.base}idx;overview=null;projects=[];projectDetails=new Map;sessionDetails=new Map;expandedProjects=new Set;expandedSessions=new Set;sessionLimits=new Map;error=null;es=null;liveRef=null;updRef=null;root;base;start(){this.connect(),this.refresh()}touch(){this.updRef&&this.overview&&(this.updRef.textContent=`updated ${U(this.overview.updatedAt)}`)}connect(){this.es?.close();const e=new EventSource(`${v(this.idx)}/stream`);this.es=e;const n=o=>this.onUpdate(F(o));e.addEventListener("update",n),e.onmessage=n,e.onopen=()=>this.setLive(!0),e.onerror=()=>this.setLive(!1)}setLive(e){this.liveRef&&(this.liveRef.textContent=e?"● live":"reconnecting…",this.liveRef.classList.toggle("on",e))}async refresh(){try{const[e,n]=await Promise.all([S.overview(this.idx),S.projects(this.idx)]);this.overview=e,this.projects=n,this.error=null}catch(e){this.error=e instanceof Error?e.message:String(e)}this.render()}async loadProject(e){if(this.expandedProjects.has(e)){try{this.projectDetails.set(e,await S.project(this.idx,e))}catch{this.expandedProjects.delete(e)}this.render()}}async loadSession(e){if(this.expandedSessions.has(e)){try{this.sessionDetails.set(e,await S.session(this.idx,e))}catch{this.expandedSessions.delete(e)}this.render()}}onUpdate(e){if(!e||e.type!=="updated")return;const n=[this.refresh()];for(const o of this.expandedProjects)n.push(this.loadProject(o));for(const o of this.expandedSessions)n.push(this.loadSession(o));Promise.all(n)}render(){if(this.root.replaceChildren(),this.error&&!this.overview){const c=t("div","error");c.append(t("h3","",this.base),t("p","",this.error));const f=t("button","","Retry");f.addEventListener("click",()=>{this.refresh()}),c.appendChild(f),this.root.appendChild(c);return}const e=this.overview,n=t("header","srv-head");n.append(t("h2","srv-host",e?e.host:this.base),t("span","srv-ver",e?`opencode ${e.opencodeVersion}`:""),t("span","srv-url",this.base));const o=t("span","live");this.liveRef=o,this.setLive(this.es?.readyState===EventSource.OPEN);const i=t("span","srv-upd");this.updRef=i,this.touch(),n.append(o,i),this.root.appendChild(n);const r=t("div","stats"),a=R("sessions",e?T(e.mainSessionCount,e.sessionCount):"…");a.title=e?`${e.mainSessionCount} main sessions · ${e.sessionCount} total (incl. subagents)`:"",r.append(a,R("projects",e?String(e.projectCount):"…"));const l=t("div","stat stat-tokens");if(l.appendChild(t("span","lbl","tokens")),e?l.appendChild(w(e.tokens,!0)):l.appendChild(t("div","skeleton","")),r.appendChild(l),r.appendChild(J(e?e.cost:null)),this.root.appendChild(r),this.error&&this.root.appendChild(t("div","error error-bar",`refresh failed: ${this.error}`)),this.root.appendChild(t("h3","sec-head","Projects")),!e){const c=t("table","tbl"),f=t("tbody");for(let C=0;C<3;C++){const g=t("tr","skeleton-row"),$=t("td");$.colSpan=4,$.appendChild(t("div","skeleton")),g.appendChild($),f.appendChild(g)}c.appendChild(f),this.root.appendChild(c);return}if(this.projects.length===0){this.root.appendChild(t("div","empty","No projects found on this host."));return}const p=t("table","tbl"),h=t("thead"),d=t("tr");for(const c of["Project","Sessions","Tokens","Cost"])d.appendChild(t("th","",c));h.appendChild(d),p.appendChild(h);const u=t("tbody");for(const c of this.projects)this.renderProject(u,c);p.appendChild(u),this.root.appendChild(p)}renderProject(e,n){const o=this.expandedProjects.has(n.id),i=t("td","p-name");i.append(t("span","tgl",o?"▾":"▸"),t("span","",n.name));const r=t("td");r.appendChild(w(n.tokens));const a=t("tr","prow"+(o?" open":""));if(a.append(i,G(n),r,t("td","cost",y(n.cost))),E(a,()=>this.toggleProject(n.id)),e.appendChild(a),o){const l=t("tr","pdetail"),p=t("td");p.colSpan=4;const h=this.projectDetails.get(n.id);if(!h)p.appendChild(t("div","muted","Loading…"));else{const d=this.sessionLimits.get(n.id)??P,u=t("div","stree");this.renderSessions(u,h.sessions,d,()=>{this.sessionLimits.set(n.id,d+P),this.render()}),p.appendChild(u)}l.appendChild(p),e.appendChild(l)}}toggleProject(e){this.expandedProjects.has(e)?(this.expandedProjects.delete(e),this.sessionLimits.delete(e),this.render()):(this.expandedProjects.add(e),this.loadProject(e))}renderSessions(e,n,o,i){const r=new Map(n.map(d=>[d.id,d])),a=new Map,l=[];for(const d of n)if(d.parentId&&r.has(d.parentId)){const u=a.get(d.parentId)??[];u.push(d),a.set(d.parentId,u)}else l.push(d);const p=new Map,h=d=>{let u={...d.tokens},c=d.cost;for(const C of a.get(d.id)??[]){const g=h(C);u=B(u,g.tokens),c+=g.cost}const f={tokens:u,cost:c};return p.set(d.id,f),f};for(const d of l)h(d);for(const d of l.slice(0,o))this.renderSession(e,d,0,a,p);if(l.length>o){const d=t("button","more",`Show ${l.length-o} more sessions`);d.addEventListener("click",i),e.appendChild(d)}}renderSession(e,n,o,i,r){const a=i.get(n.id)??[],l=this.expandedSessions.has(n.id),p=r.get(n.id)??{tokens:n.tokens,cost:n.cost},h=t("div","srow"+(l?" open":""));h.style.setProperty("--depth",String(o));const d=t("span","tgl",l?"▾":"▸");if(a.length){const c=t("span","badge",String(a.length));d.append(c)}const u=t("div","s-main");if(u.append(t("span","s-title",n.title||"Untitled session"),t("span","s-meta",`${n.agent} · ${n.model}`)),h.append(d,u,w(p.tokens),t("span","cost",y(p.cost))),E(h,()=>this.toggleSession(n.id)),e.appendChild(h),l){const c=t("div","s-detail");c.style.setProperty("--depth",String(o+1));const f=this.sessionDetails.get(n.id);f?f.models.length===0?c.appendChild(t("div","muted","No token usage recorded")):(c.appendChild(this.modelsTable(f.models)),a.length&&c.appendChild(t("div","muted note","model breakdown counts only this session — row totals include subagents"))):c.appendChild(t("div","muted","Loading…")),e.appendChild(c)}if(l)for(const c of a)this.renderSession(e,c,o+1,i,r)}toggleSession(e){this.expandedSessions.has(e)?(this.expandedSessions.delete(e),this.render()):(this.expandedSessions.add(e),this.loadSession(e))}modelsTable(e){const n=t("table","tbl tbl-models"),o=t("thead"),i=t("tr");for(const a of["Model","Mode","Msgs","Tokens","Cost"])i.appendChild(t("th","",a));o.appendChild(i),n.appendChild(o);const r=t("tbody");for(const a of e){const l=t("td","p-name");l.append(t("span","",a.model),t("span","muted",a.provider));const p=t("td");p.appendChild(w(a.tokens));const h=t("tr");h.append(l,t("td","",a.mode),t("td","num",String(a.messageCount)),p,t("td","cost",y(a.cost))),r.appendChild(h)}return n.appendChild(r),n}}function R(s,e){const n=t("div","stat");return n.append(t("span","num",e),t("span","lbl",s)),n}function T(s,e){return`${s} / ${e}`}function G(s){const e=t("td","num",T(s.mainSessionCount,s.sessionCount));return e.title=`${s.mainSessionCount} main sessions · ${s.sessionCount} total (incl. subagents)`,e}function J(s){const e=t("div","stat stat-cost");return e.append(t("span","num",s===null?"…":y(s)),t("span","lbl","cost")),e}const j=document.getElementById("app");m.length>1&&j.classList.add("multi");const x=[];for(let s=0;s<m.length;s++){const e=new V(s);e.root.style.borderTop=`3px solid ${k[s%k.length]}`,x.push(e),j.appendChild(e.root),e.start()}const L="overall",I=t("nav","tabs"),O=new Map,N=(s,e)=>{const n=t("button","tab",s);n.addEventListener("click",()=>D(e)),I.appendChild(n),O.set(e,n)};N("Overall",L);m.forEach((s,e)=>N(s.name,String(e)));j.before(I);function D(s){const e=s===L;j.classList.toggle("multi",e&&m.length>1),x.forEach((n,o)=>{n.root.hidden=!(e||String(o)===s)});for(const[n,o]of O)o.classList.toggle("active",n===s)}D(L);setInterval(()=>{for(const s of x)s.touch()},3e4);

package/server.ts

@@ -1,51 +0,0 @@
-// Front-end server: single entry point for clients. Serves dist/ and proxies
-// /api/s/{i}/* to servers[i].url — same route scheme as vite.config.ts, so
-// clients never reach the real backends (they may be unreachable from the
-// client's network). Run: bun server.ts  (PORT env, default 5173)
-import { serve } from "bun";
-import { join } from "node:path";
-import { servers } from "./src/config";
-
-const DIST = join(import.meta.dir, "dist");
-const PORT = Number(process.env.PORT ?? 5173);
-
-const MIME: Record<string, string> = {
-  ".html": "text/html; charset=utf-8",
-  ".js": "text/javascript",
-  ".css": "text/css",
-  ".svg": "image/svg+xml",
-  ".json": "application/json",
-  ".png": "image/png",
-};
-
-const file = async (path: string) => {
-  const f = Bun.file(join(DIST, path));
-  return (await f.exists()) ? f : null;
-};
-
-serve({
-  port: PORT,
-  async fetch(req) {
-    const url = new URL(req.url);
-
-    const m = url.pathname.match(/^\/api\/s\/(\d+)(\/.*)?$/);
-    if (m) {
-      const target = servers[Number(m[1])];
-      if (!target) return new Response("unknown server", { status: 404 });
-      const res = await fetch(target.url + (m[2] ?? "") + url.search, req);
-      return new Response(res.body, { status: res.status, headers: res.headers });
-    }
-
-    const path = url.pathname === "/" ? "/index.html" : url.pathname;
-    const f = await file(path);
-    if (f) {
-      const ext = path.slice(path.lastIndexOf("."));
-      return new Response(f, { headers: { "content-type": MIME[ext] ?? "application/octet-stream" } });
-    }
-    const idx = await file("index.html"); // SPA fallback
-    if (idx) return new Response(idx, { headers: { "content-type": MIME[".html"] } });
-    return new Response("not found", { status: 404 });
-  },
-});
-
-console.log(`front-end server http://localhost:${PORT} (${servers.length} backends proxied)`);

package/src/config.ts

@@ -1,11 +0,0 @@
-export interface ServerConfig {
-  name: string;
-  url: string;
-}
-
-export const servers: ServerConfig[] = [
-  { name: "main", url: "http://127.0.0.1:8791" },
-  { name: "backup", url: "http://127.0.0.1:8792" },
-  { name: "dev", url: "http://127.0.0.1:8793" },
-  { name: "staging", url: "http://127.0.0.1:8794" },
-];