billion-context 0.1.20 → 0.1.21

package/dist/index.js

@@ -764,7 +764,7 @@ import { existsSync as existsSync2, mkdirSync as mkdirSync3, readFileSync as rea
 import { createHash as createHash2 } from "crypto";
 import * as path3 from "path";
 import { createInitialState } from "acp-kernel";
-var PERSIST_VERSION = 1;
+var PERSIST_VERSION = 2;
 function mergeState(parsed) {
   const fresh = createInitialState();
   return {
@@ -852,8 +852,9 @@ var SessionStore = class {
       try {
         const parsed = JSON.parse(await fs.readFile(full, "utf8"));
         if (!isValidRecord(parsed)) continue;
-        const proto = parsed.protocol;
-        const origin = parsed.upstreamOrigin;
+        const pm = parsed.meta ?? {};
+        const proto = pm.protocol ?? parsed.protocol;
+        const origin = pm.upstreamOrigin ?? parsed.upstreamOrigin;
         const expectedNamespaced = path3.basename(relPathFor(parsed.id, proto, origin));
         const expectedLegacy = legacyFileNameFor(parsed.id);
         if (name !== expectedNamespaced && name !== expectedLegacy) {
@@ -907,7 +908,7 @@ var SessionStore = class {
   async writeNow(session) {
     if (!this.enabled) return;
     const record = buildRecord(session);
-    const file = this.filePath(session.id, session.protocol, session.upstreamOrigin);
+    const file = this.filePath(session.id, session.meta.protocol, session.meta.upstreamOrigin);
     try {
       await fs.mkdir(path3.dirname(file), { recursive: true });
     } catch (e) {
@@ -941,7 +942,7 @@ var SessionStore = class {
       this.timers.delete(session.id);
     }
     const record = buildRecord(session);
-    const file = this.filePath(session.id, session.protocol, session.upstreamOrigin);
+    const file = this.filePath(session.id, session.meta.protocol, session.meta.upstreamOrigin);
     try {
       mkdirSync3(path3.dirname(file), { recursive: true });
     } catch (e) {
@@ -995,13 +996,12 @@ function buildRecord(session) {
     version: PERSIST_VERSION,
     savedAt: Date.now(),
     id: session.id,
-    protocol: session.protocol,
-    upstreamOrigin: session.upstreamOrigin,
-    createdAt: session.createdAt,
-    requests: session.requests,
-    tokensSaved: session.tokensSaved,
+    meta: { ...session.meta },
+    stats: { ...session.stats },
+    metadata: { ...session.metadata },
     state: session.state,
-    blockContents: Object.fromEntries(session.blockContents)
+    blockContents: Object.fromEntries(session.blockContents),
+    createdAt: session.createdAt
   };
 }
 function buildSession(parsed) {
@@ -1009,15 +1009,29 @@ function buildSession(parsed) {
   for (const [bid, content] of Object.entries(parsed.blockContents ?? {})) {
     if (content && typeof content === "object") blockContents.set(bid, content);
   }
+  const meta = parsed.meta ?? {};
+  const stats = parsed.stats ?? {};
   return {
     id: parsed.id,
-    protocol: parsed.protocol,
-    upstreamOrigin: parsed.upstreamOrigin,
+    meta: {
+      protocol: meta.protocol ?? parsed.protocol,
+      upstreamOrigin: meta.upstreamOrigin ?? parsed.upstreamOrigin,
+      label: meta.label ?? parsed.label,
+      title: meta.title
+    },
+    stats: {
+      requests: stats.requests ?? parsed.requests ?? 0,
+      tokensSaved: stats.tokensSaved ?? parsed.tokensSaved ?? 0,
+      inputTokens: stats.inputTokens ?? parsed.inputTokens ?? 0,
+      cachedTokens: stats.cachedTokens ?? parsed.cachedTokens ?? 0,
+      outputTokens: stats.outputTokens ?? parsed.outputTokens ?? 0,
+      cacheSamples: stats.cacheSamples ?? parsed.cacheSamples ?? 0,
+      contextTokens: stats.contextTokens ?? parsed.contextTokens ?? 0
+    },
+    metadata: parsed.metadata ?? {},
     state: mergeState(parsed.state),
     createdAt: parsed.createdAt ?? Date.now(),
     lastSeen: Date.now(),
-    requests: parsed.requests ?? 0,
-    tokensSaved: parsed.tokensSaved ?? 0,
     blockContents,
     inFlight: 0,
     persisted: true
@@ -1082,8 +1096,9 @@ function getSession(id, meta) {
   const existing = sessions.get(id);
   if (existing) {
     existing.lastSeen = Date.now();
-    if (meta?.protocol && !existing.protocol) existing.protocol = meta.protocol;
-    if (meta?.upstreamOrigin && !existing.upstreamOrigin) existing.upstreamOrigin = meta.upstreamOrigin;
+    if (meta?.protocol && !existing.meta.protocol) existing.meta.protocol = meta.protocol;
+    if (meta?.upstreamOrigin && !existing.meta.upstreamOrigin) existing.meta.upstreamOrigin = meta.upstreamOrigin;
+    if (meta?.label && !existing.meta.label) existing.meta.label = meta.label;
     return existing;
   }
   const store = getStore();
@@ -1097,13 +1112,12 @@ function getSession(id, meta) {
   if (sessions.size >= MAX_SESSIONS) evictOldest();
   const session = {
     id,
-    protocol: meta?.protocol,
-    upstreamOrigin: meta?.upstreamOrigin,
+    meta: { protocol: meta?.protocol, upstreamOrigin: meta?.upstreamOrigin, label: meta?.label },
+    stats: { requests: 0, tokensSaved: 0, inputTokens: 0, cachedTokens: 0, outputTokens: 0, cacheSamples: 0, contextTokens: 0 },
+    metadata: {},
     state: createInitialState2(),
     createdAt: Date.now(),
     lastSeen: Date.now(),
-    requests: 0,
-    tokensSaved: 0,
     blockContents: /* @__PURE__ */ new Map(),
     inFlight: 0,
     persisted: false
@@ -1457,8 +1471,31 @@ function routeEvent(ev, blocks, ctx, markConverted, markRealToolUse, getConverte
     return emitEvent(ev);
   }
   if (t === "message_delta") {
+    if (!getConverted()) {
+      const u = d.usage;
+      if (u) {
+        const out = u.output_tokens;
+        if (typeof out === "number") ctx.session.stats.outputTokens += out;
+      }
+    }
     return getConverted() ? NOOP : emitEvent(ev);
   }
+  if (t === "message_start" && !getConverted()) {
+    const u = d.message?.usage;
+    if (u) {
+      const inp = u.input_tokens;
+      const cc = u.cache_creation_input_tokens;
+      const cr = u.cache_read_input_tokens;
+      if (typeof inp === "number") ctx.session.stats.inputTokens += inp;
+      if (typeof cr === "number") {
+        ctx.session.stats.cachedTokens += cr;
+        ctx.session.stats.cacheSamples += 1;
+      } else if (typeof inp === "number") {
+        ctx.session.stats.cacheSamples += 1;
+      }
+      if (typeof cc === "number") ctx.session.stats.inputTokens += cc;
+    }
+  }
   if (t === "message_stop") {
     return getConverted() ? NOOP : emitEvent(ev);
   }
@@ -1588,6 +1625,447 @@ function rewriteJsonResponse(body, ctx) {
   return body;
 }
 
+// src/web.ts
+import { readFileSync as readFileSync3, writeFileSync as writeFileSync3, mkdirSync as mkdirSync4 } from "fs";
+import { dirname as dirname3, join as join2 } from "path";
+import { fileURLToPath } from "url";
+function getVersion() {
+  try {
+    const here = fileURLToPath(import.meta.url);
+    const pkg = join2(dirname3(here), "..", "package.json");
+    return JSON.parse(readFileSync3(pkg, "utf8")).version ?? "dev";
+  } catch {
+    return "dev";
+  }
+}
+function readProviders() {
+  const parsed = safeReadJson(configFile());
+  const routes = {};
+  if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+    const providers = parsed.providers;
+    if (providers) {
+      for (const [k, v] of Object.entries(providers)) {
+        const route = parseRouteEntry(v);
+        if (route) routes[k] = route;
+      }
+    }
+  }
+  return routes;
+}
+async function handleConfigGet(res) {
+  res.writeHead(200, { "content-type": "application/json" });
+  res.end(JSON.stringify({ path: configFile(), providers: readProviders() }, null, 2));
+}
+async function handleConfigPut(req, res) {
+  const raw = await readJsonBody(req);
+  if (!raw || typeof raw !== "object") {
+    res.writeHead(400, { "content-type": "application/json" });
+    res.end(JSON.stringify({ error: "expected JSON body" }));
+    return;
+  }
+  const body = raw;
+  if (!body.providers || typeof body.providers !== "object" || Array.isArray(body.providers)) {
+    res.writeHead(400, { "content-type": "application/json" });
+    res.end(JSON.stringify({ error: 'expected JSON: { "providers": { ... } }' }));
+    return;
+  }
+  const routes = {};
+  for (const [name, val] of Object.entries(body.providers)) {
+    if (!name || typeof name !== "string") {
+      res.writeHead(400, { "content-type": "application/json" });
+      res.end(JSON.stringify({ error: `invalid provider name: ${JSON.stringify(name)}` }));
+      return;
+    }
+    const route = parseRouteEntry(val);
+    if (!route) {
+      res.writeHead(400, { "content-type": "application/json" });
+      res.end(JSON.stringify({ error: `invalid provider "${name}": expected "url" or { url, models }` }));
+      return;
+    }
+    routes[name] = route;
+  }
+  const existing = safeReadJson(configFile()) ?? {};
+  existing.providers = body.providers;
+  try {
+    mkdirSync4(dirname3(configFile()), { recursive: true });
+    writeFileSync3(configFile(), JSON.stringify(existing, null, 2) + "\n", "utf8");
+  } catch (e) {
+    res.writeHead(500, { "content-type": "application/json" });
+    res.end(JSON.stringify({ error: `failed to write: ${String(e)}` }));
+    return;
+  }
+  log("info", `[acp-web] providers updated via web UI (${Object.keys(routes).length} providers) \u2014 restart to apply`);
+  res.writeHead(200, { "content-type": "application/json" });
+  res.end(JSON.stringify({ ok: true, count: Object.keys(routes).length, note: "restart bili to apply" }));
+}
+function readJsonBody(req) {
+  return new Promise((resolve) => {
+    const chunks = [];
+    let size = 0;
+    req.on("data", (c) => {
+      size += c.length;
+      if (size > 256 * 1024) {
+        req.destroy();
+        resolve(void 0);
+        return;
+      }
+      chunks.push(c);
+    });
+    req.on("end", () => {
+      try {
+        resolve(JSON.parse(Buffer.concat(chunks).toString("utf8")));
+      } catch {
+        resolve(void 0);
+      }
+    });
+    req.on("error", () => resolve(void 0));
+  });
+}
+function renderUI(origin) {
+  return HTML_UI.replace(/__ORIGIN__/g, origin).replace(/__VERSION__/g, getVersion());
+}
+var HTML_UI = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>billion-context</title>
+<style>
+:root {
+  --bg: #1a1b26; --bg2: #24283b; --bg3: #2f334d;
+  --fg: #c0caf5; --dim: #565f89; --accent: #7aa2f7; --accent2: #bb9af7;
+  --ok: #9ece6a; --warn: #e0af68; --err: #f7768e;
+  --border: #3b4261; --radius: 8px;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  background: var(--bg); color: var(--fg); line-height: 1.5; min-height: 100vh;
+}
+.mono { font-family: "SF Mono", "Cascadia Code", Consolas, monospace; }
+header {
+  display: flex; align-items: center; gap: 16px;
+  padding: 16px 24px; border-bottom: 1px solid var(--border);
+}
+header a { color: inherit; text-decoration: none; }
+header .logo { font-size: 18px; font-weight: 600; cursor: pointer; }
+header .logo:hover { opacity: 0.85; }
+header .logo span { color: var(--accent); }
+header .meta { font-size: 12px; color: var(--dim); }
+header .meta b { color: var(--fg); }
+header .gh {
+  margin-left: auto; font-size: 13px; color: var(--dim); text-decoration: none;
+  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
+  border: 1px solid var(--border); border-radius: var(--radius); transition: color .15s, border-color .15s;
+}
+header .gh:hover { color: var(--accent); border-color: var(--accent); }
+nav { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border); }
+nav button {
+  background: none; border: none; color: var(--dim); cursor: pointer;
+  padding: 12px 16px; font-size: 14px; border-bottom: 2px solid transparent;
+  font-family: inherit; transition: color .15s;
+}
+nav button:hover { color: var(--fg); }
+nav button.active { color: var(--accent); border-bottom-color: var(--accent); }
+main { max-width: 800px; margin: 0 auto; padding: 24px; }
+.tab { display: none; }
+.tab.active { display: block; }
+
+.card {
+  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 16px; margin-bottom: 12px;
+}
+.card-head {
+  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
+}
+.card-head .name { font-weight: 600; color: var(--accent); }
+.card-head .name input { font-weight: 600; color: var(--accent); }
+input, select {
+  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
+  color: var(--fg); padding: 6px 10px; font-size: 13px; font-family: inherit; width: 100%;
+}
+input:focus, select:focus { outline: none; border-color: var(--accent); }
+.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
+.row label { font-size: 12px; color: var(--dim); min-width: 80px; }
+.row input { flex: 1; }
+.sub-card {
+  background: var(--bg3); border-radius: 4px; padding: 10px 12px; margin: 8px 0 8px 20px;
+  border-left: 2px solid var(--accent2);
+}
+.model-head { display: flex; justify-content: space-between; align-items: center; }
+.model-head .mname { color: var(--accent2); font-size: 13px; font-weight: 500; }
+.model-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
+.model-row label { font-size: 11px; color: var(--dim); min-width: 60px; }
+.model-row input { flex: 1; font-family: "SF Mono", monospace; font-size: 12px; }
+.btn {
+  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
+  color: var(--fg); padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
+  transition: background .15s, border-color .15s;
+}
+.btn:hover { background: var(--border); }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 500; }
+.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); }
+.btn.danger { color: var(--err); }
+.btn.danger:hover { background: rgba(247,118,142,.1); }
+.btn.small { padding: 4px 8px; font-size: 12px; }
+.add-bar { display: flex; gap: 8px; margin: 12px 0; }
+.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
+
+.snippet {
+  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
+  padding: 12px; margin-bottom: 12px; position: relative;
+}
+.snippet .label { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
+.snippet .label b { color: var(--fg); }
+.snippet code { display: block; font-size: 13px; color: var(--ok); white-space: pre-wrap; word-break: break-all; }
+.snippet .copy { position: absolute; top: 8px; right: 8px; }
+
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th { text-align: left; padding: 8px 12px; color: var(--dim); font-weight: 500; border-bottom: 1px solid var(--border); }
+td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
+td.mono { color: var(--accent); font-size: 12px; }
+.empty { text-align: center; padding: 32px; color: var(--dim); font-size: 14px; }
+.toast {
+  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+  background: var(--ok); color: var(--bg); padding: 10px 20px; border-radius: var(--radius);
+  font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .3s; pointer-events: none;
+}
+.toast.show { opacity: 1; }
+.toast.err { background: var(--err); color: var(--bg); }
+.notice {
+  background: rgba(224,175,104,.1); border: 1px solid var(--warn); border-radius: var(--radius);
+  color: var(--warn); padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
+}
+select { cursor: pointer; }
+</style>
+</head>
+<body>
+<header>
+  <a class="logo" href="https://github.com/ranxianglei/billion-context" target="_blank" rel="noopener" title="GitHub repo">billion<span>-context</span></a>
+  <div class="meta">v<b>__VERSION__</b> &middot; <b>__ORIGIN__</b></div>
+  <a class="gh" href="https://github.com/ranxianglei/billion-context" target="_blank" rel="noopener">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+    GitHub
+  </a>
+</header>
+<nav>
+  <button class="active" onclick="showTab('providers')">Providers</button>
+  <button onclick="showTab('setup')">Client Setup</button>
+  <button onclick="showTab('sessions')">Sessions</button>
+</nav>
+<main>
+  <!-- Providers tab -->
+  <div id="tab-providers" class="tab active">
+    <div id="restart-notice" class="notice" style="display:none"></div>
+    <div id="providers-list"></div>
+    <div class="add-bar">
+      <button class="btn" onclick="addProvider()">+ Add provider</button>
+    </div>
+    <div class="actions">
+      <button class="btn primary" onclick="saveProviders()">Save</button>
+    </div>
+  </div>
+
+  <!-- Client Setup tab -->
+  <div id="tab-setup" class="tab">
+    <div class="row" style="margin-bottom:16px">
+      <label>Provider</label>
+      <select id="setup-provider" onchange="renderSetup()"></select>
+    </div>
+    <div id="setup-snippets"></div>
+  </div>
+
+  <!-- Sessions tab -->
+  <div id="tab-sessions" class="tab">
+    <div class="row" style="justify-content:space-between;margin-bottom:12px">
+      <span style="font-size:13px;color:var(--dim)">Auto-refreshes every 5s</span>
+      <span id="sess-total" style="font-size:13px;color:var(--dim)"></span>
+    </div>
+    <div id="sessions-table"></div>
+  </div>
+</main>
+<div id="toast" class="toast"></div>
+
+<script>
+var ORIGIN = "__ORIGIN__";
+var providers = [];
+var savedProviders = null;
+
+// \u2500\u2500 helpers \u2500\u2500
+function el(id) { return document.getElementById(id); }
+function esc(s) { return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
+function fmtTok(n) { if (n >= 1000000) return (n/1000000).toFixed(1)+"M"; if (n >= 1000) return (n/1000).toFixed(1)+"K"; return String(n); }
+function toast(msg, isErr) {
+  var t = el("toast"); t.textContent = msg; t.className = "toast show" + (isErr ? " err" : "");
+  setTimeout(function(){ t.className = "toast" + (isErr ? " err" : ""); }, 2500);
+}
+function showTab(name) {
+  document.querySelectorAll(".tab").forEach(function(t){ t.classList.remove("active"); });
+  document.querySelectorAll("nav button").forEach(function(b){ b.classList.remove("active"); });
+  el("tab-"+name).classList.add("active");
+  event.target.classList.add("active");
+  if (name === "sessions") refreshSessions();
+  if (name === "setup") renderSetup();
+}
+
+// \u2500\u2500 load \u2500\u2500
+async function load() {
+  try {
+    var r = await fetch("/__acp/config");
+    var d = await r.json();
+    providers = entries(d.providers);
+    el("setup-provider").innerHTML = "";
+    savedProviders = JSON.stringify(providers);
+    renderProviders();
+  } catch(e) {
+    el("providers-list").innerHTML = '<div class="empty">Failed to load config: ' + esc(e) + "</div>";
+  }
+}
+function entries(obj) {
+  if (!obj || typeof obj !== "object") return [];
+  return Object.keys(obj).map(function(name){
+    var v = obj[name];
+    var url, models = [];
+    if (typeof v === "string") { url = v; }
+    else { url = v.url || ""; models = entries_models(v.models); }
+    return { name: name, url: url, models: models };
+  });
+}
+function entries_models(obj) {
+  if (!obj || typeof obj !== "object") return [];
+  return Object.keys(obj).map(function(name){
+    return { name: name, context: obj[name].context||0, output: obj[name].output||0 };
+  });
+}
+
+// \u2500\u2500 providers editor \u2500\u2500
+function renderProviders() {
+  var html = "";
+  if (providers.length === 0) html = '<div class="empty">No providers yet. Click "Add provider" below.</div>';
+  providers.forEach(function(p, i) {
+    html += '<div class="card">';
+    html += '<div class="card-head"><div class="name"><input value="'+esc(p.name)+'" onchange="providers['+i+'].name=this.value" style="background:transparent;border:none;padding:0;width:auto"></div>';
+    html += '<button class="btn danger small" onclick="removeProvider('+i+')">Remove</button></div>';
+    html += '<div class="row"><label>URL</label><input class="mono" value="'+esc(p.url)+'" onchange="providers['+i+'].url=this.value"></div>';
+    p.models.forEach(function(m, j) {
+      html += '<div class="sub-card">';
+      html += '<div class="model-head"><span class="mname mono">'+esc(m.name)+'</span>';
+      html += '<button class="btn danger small" onclick="removeModel('+i+','+j+')">Remove</button></div>';
+      html += '<div class="model-row"><label>context</label><input type="number" value="'+m.context+'" onchange="providers['+i+'].models['+j+'].context=parseInt(this.value)||0"></div>';
+      html += '<div class="model-row"><label>output</label><input type="number" value="'+m.output+'" onchange="providers['+i+'].models['+j+'].output=parseInt(this.value)||0"></div>';
+      html += '<div class="model-row"><label>name</label><input value="'+esc(m.name)+'" onchange="providers['+i+'].models['+j+'].name=this.value"></div>';
+      html += '</div>';
+    });
+    html += '<button class="btn small" onclick="addModel('+i+')">+ Add model</button>';
+    html += '</div>';
+  });
+  el("providers-list").innerHTML = html;
+  checkDirty();
+}
+function addProvider() {
+  providers.push({ name: "new-provider", url: "https://", models: [] });
+  renderProviders();
+}
+function removeProvider(i) {
+  providers.splice(i, 1);
+  renderProviders();
+}
+function addModel(i) {
+  providers[i].models.push({ name: "model-name", context: 200000, output: 8192 });
+  renderProviders();
+}
+function removeModel(i, j) {
+  providers[i].models.splice(j, 1);
+  renderProviders();
+}
+function checkDirty() {
+  var dirty = savedProviders !== null && JSON.stringify(providers) !== savedProviders;
+  var n = el("restart-notice");
+  if (dirty) { n.style.display = "block"; n.textContent = "Unsaved changes \u2014 click Save to write to the config file, then restart bili to apply."; }
+  else { n.style.display = "none"; }
+}
+
+// \u2500\u2500 save \u2500\u2500
+async function saveProviders() {
+  var obj = {};
+  providers.forEach(function(p) {
+    if (!p.name) return;
+    if (p.models.length === 0) { obj[p.name] = p.url; }
+    else {
+      var models = {};
+      p.models.forEach(function(m){ if(m.name) models[m.name] = { context: m.context, output: m.output }; });
+      obj[p.name] = { url: p.url, models: models };
+    }
+  });
+  try {
+    var r = await fetch("/__acp/config", { method: "PUT", headers: { "content-type": "application/json" }, body: JSON.stringify({ providers: obj }) });
+    var d = await r.json();
+    if (r.ok) { savedProviders = JSON.stringify(providers); checkDirty(); toast("Saved " + d.count + " providers \u2014 restart bili to apply"); }
+    else { toast("Error: " + (d.error || "unknown"), true); }
+  } catch(e) { toast("Save failed: " + e, true); }
+}
+
+// \u2500\u2500 client setup \u2500\u2500
+function renderSetup() {
+  var sel = el("setup-provider");
+  if (sel.options.length === 0 && providers.length > 0) {
+    providers.forEach(function(p){ sel.options.add(new Option(p.name, p.name)); });
+  }
+  var name = sel.value || (providers[0] && providers[0].name) || "";
+  var p = providers.find(function(x){ return x.name === name; });
+  var box = el("setup-snippets");
+  if (!p) { box.innerHTML = '<div class="empty">Add a provider first (Providers tab).</div>'; return; }
+  var base = ORIGIN + "/" + p.name;
+  // Pi: the original upstream URL minus host \u2192 keep the tail
+  var tail = p.url.replace(/^https?:\\/\\/[^/]+/, "");
+  var full = tail ? base + tail : base;
+  var h = "";
+  h += snippet("Pi  (~/.pi/agent/models.json)", '"baseUrl": "' + full + '"');
+  h += snippet("OpenCode  (opencode.json)", '"baseURL": "' + full + '"');
+  h += snippet("Codex  (config.toml)", 'base_url = "' + full + '"');
+  h += snippet("Full path (any client)", full);
+  box.innerHTML = h;
+}
+function snippet(label, code) {
+  var c = code.replace(/"/g, "&quot;");
+  return '<div class="snippet"><div class="label"><b>' + label + '</b></div><code>' + esc(code) + '</code><button class="btn small copy" onclick="copyText(this,\\''+c+'\\')">Copy</button></div>';
+}
+function copyText(btn, text) {
+  var t = text.replace(/&quot;/g, '"');
+  navigator.clipboard.writeText(t).then(function(){ toast("Copied"); });
+}
+
+// \u2500\u2500 sessions \u2500\u2500
+async function refreshSessions() {
+  try {
+    var r = await fetch("/__acp/stats");
+    var d = await r.json();
+    var ss = d.sessions || [];
+    el("sess-total").textContent = ss.length + " session" + (ss.length !== 1 ? "s" : "");
+    if (ss.length === 0) { el("sessions-table").innerHTML = '<div class="empty">No sessions yet. Send a request through the proxy.</div>'; return; }
+    var h = '<table><tr><th>ID</th><th>Requests</th><th>Tokens saved</th><th>Last seen</th></tr>';
+    var h = '<table><tr><th>Title</th><th>Protocol</th><th>Label</th><th>Requests</th><th>Context</th><th>Cache hit</th><th>Input</th><th>Output</th><th>Last seen</th></tr>';
+    ss.forEach(function(s) {
+      var title = s.title ? esc(s.title) : "<span class='dim'>\u2014</span>";
+      var proto = s.protocol ? esc(s.protocol) : "<span class='dim'>?</span>";
+      var label = s.label ? "<span class=\\"mono\\">"+esc(s.label.slice(0,24))+"</span>" : "<span class='dim'>\u2014</span>";
+      var ctx = s.contextTokens ? fmtTok(s.contextTokens) : "0";
+      var ch = (s.cacheHitPct !== null && s.cacheHitPct !== undefined) ? s.cacheHitPct + "%" : "<span class='dim'>\u2014</span>";
+      var inp = s.inputTokens ? fmtTok(s.inputTokens) : "0";
+      var out = s.outputTokens ? fmtTok(s.outputTokens) : "0";
+      h += "<tr><td>"+title+"</td><td>"+proto+"</td><td>"+label+"</td><td>"+s.requests+"</td><td>"+ctx+"</td><td>"+ch+"</td><td>"+inp+"</td><td>"+out+"</td><td>"+esc(s.lastSeen)+"</td></tr>";
+    });
+    h += "</table>";
+    el("sessions-table").innerHTML = h;
+  } catch(e) { el("sessions-table").innerHTML = '<div class="empty">Failed to load: ' + esc(e) + "</div>"; }
+}
+setInterval(function(){ if (el("tab-sessions").classList.contains("active")) refreshSessions(); }, 5000);
+
+load();
+</script>
+</body>
+</html>`;
+
 // src/orphan-gc.ts
 var ORPHAN_THRESHOLD = 3;
 var orphanStreaks = /* @__PURE__ */ new WeakMap();
@@ -1625,8 +2103,8 @@ import {
   collectBlockContent as collectBlockContent2,
   deactivateBlock
 } from "acp-kernel";
-import { mkdirSync as mkdirSync4, writeFileSync as writeFileSync3 } from "fs";
-import { dirname as dirname3, join as join2 } from "path";
+import { mkdirSync as mkdirSync5, writeFileSync as writeFileSync4 } from "fs";
+import { dirname as dirname4, join as join3 } from "path";
 import { tmpdir } from "os";
 function resolveDecompress(args, ctx) {
   const rawBlockId = args.blockId;
@@ -1655,11 +2133,11 @@ function resolveDecompress(args, ctx) {
   }
   const header = `[Restored block ${blockId} \u2014 ${count} item(s)${full ? ", full" : ""}]`;
   const safeBlockId = blockId.replace(/[^a-zA-Z0-9_-]/g, "-");
-  const outPath = body.length > 1e4 ? join2(tmpdir(), `acp-decompress-${safeBlockId}-${Date.now()}.txt`) : null;
+  const outPath = body.length > 1e4 ? join3(tmpdir(), `acp-decompress-${safeBlockId}-${Date.now()}.txt`) : null;
   if (outPath) {
     try {
-      mkdirSync4(dirname3(outPath), { recursive: true });
-      writeFileSync3(outPath, body, "utf8");
+      mkdirSync5(dirname4(outPath), { recursive: true });
+      writeFileSync4(outPath, body, "utf8");
       return `${header}
 Content (${body.length} chars) written to: ${outPath}
 Use the read tool to access it.`;
@@ -1942,6 +2420,10 @@ async function* compressLoopStream(initialUpstream, ctx, requestBody, requestOpt
         if (typeof prompt === "number") {
           const ch = typeof cached === "number" ? cached : 0;
           log("info", `[acp-usage] round ${loopCount} input=${prompt} cached=${typeof cached === "number" ? cached : "?"} output=${out ?? "?"}${ch > 0 ? ` (cache hit ${Math.round(ch / prompt * 100)}%)` : ""}`);
+          ctx.session.stats.inputTokens += prompt;
+          if (typeof cached === "number") ctx.session.stats.cachedTokens += cached;
+          if (typeof out === "number") ctx.session.stats.outputTokens += out;
+          ctx.session.stats.cacheSamples += 1;
         }
       }
       if (!hasOnlyProxy) {
@@ -2342,6 +2824,12 @@ async function* compressLoopResponsesStream(initialUpstream, ctx, requestBody, r
               const cached = inDet?.cached_tokens ?? prDet?.cached_tokens ?? "?";
               const out = usage.output_tokens ?? "?";
               log("info", `[acp-usage] round ${loopCount} input=${prompt} cached=${cached} output=${out}${cached !== "?" && cached !== 0 && prompt !== "?" ? ` (cache hit ${Math.round(Number(cached) / Number(prompt) * 100)}%)` : ""}`);
+              if (typeof prompt === "number") {
+                ctx.session.stats.inputTokens += prompt;
+                if (typeof cached === "number") ctx.session.stats.cachedTokens += cached;
+                if (typeof out === "number") ctx.session.stats.outputTokens += out;
+                ctx.session.stats.cacheSamples += 1;
+              }
             }
           }
         }
@@ -2667,9 +3155,10 @@ async function startServer(opts) {
     }
   });
   server.listen(opts.port, opts.host, () => {
+    const displayHost = opts.host === "0.0.0.0" ? "localhost" : opts.host;
     log2(
       "info",
-      `acp-proxy listening on http://${opts.host}:${opts.port}` + (Object.keys(opts.routes).length ? ` \u2014 routes: ${Object.entries(opts.routes).map(([n, u]) => `${n}=${typeof u === "string" ? u : u.url}`).join(", ")}` : ` \u2192 ${opts.upstream}`)
+      `acp-proxy listening on http://${displayHost}:${opts.port}` + (Object.keys(opts.routes).length ? ` \u2014 routes: ${Object.entries(opts.routes).map(([n, u]) => `${n}=${typeof u === "string" ? u : u.url}`).join(", ")}` : ` \u2192 ${opts.upstream}`) + ` \u2014 web UI: http://${displayHost}:${opts.port}/__acp/`
     );
   });
   server.on("error", (err) => {
@@ -2721,6 +3210,14 @@ async function handle(req, res, opts, core, config, log2) {
     res.end(JSON.stringify({ ok: true, upstream: opts.upstream }));
     return;
   }
+  if (req.method === "GET" && req.url === "/__acp/") {
+    const origin = `http://${opts.host === "0.0.0.0" ? "localhost" : opts.host}:${opts.port}`;
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+    res.end(renderUI(origin));
+    return;
+  }
+  if (req.method === "GET" && req.url === "/__acp/config") return handleConfigGet(res);
+  if (req.method === "PUT" && req.url === "/__acp/config") return handleConfigPut(req, res);
   let bodyBuffer;
   try {
     bodyBuffer = await readBody(req);
@@ -2764,8 +3261,9 @@ async function handle(req, res, opts, core, config, log2) {
     const sessionHeader = headerValue(req, opts.sessionHeader);
     const conversation = protocol === "anthropic" ? conversationSignalAnthropic(parsed, sessionHeader) : protocol === "openai" ? conversationSignalOpenai(parsed, sessionHeader) : conversationSignalResponses(parsed, sessionHeader);
     const sessionId = deriveSessionId(req.headers, protocol, upstreamOrigin, conversation);
-    const session = getSession(sessionId, { protocol, upstreamOrigin });
     const affinity = affinityToken(req.headers, conversation);
+    const clientLabel = clientConversationHeader(req.headers);
+    const session = getSession(sessionId, { protocol, upstreamOrigin, label: clientLabel ?? void 0 });
     await withSessionLock(session, async () => {
       prepared = protocol === "anthropic" ? prepareAnthropic(parsed, req, opts, core, reqConfig, log2, session) : protocol === "openai" ? prepareOpenai(parsed, req, opts, core, reqConfig, log2, session) : prepareResponses(parsed, req, opts, core, reqConfig, log2, session);
       acquireInFlight(session);
@@ -2811,7 +3309,7 @@ function diagNudge(turn, sessionId, tokenCount, limit) {
 function prepareAnthropic(parsed, req, opts, core, config, log2, session) {
   const sessionId = session.id;
   const stream2 = parsed.stream === true;
-  session.requests++;
+  ++session.stats.requests;
   let processedMessages = [];
   let rebuiltMessages = parsed.messages;
   let systemOut = parsed.system;
@@ -2821,6 +3319,11 @@ function prepareAnthropic(parsed, req, opts, core, config, log2, session) {
     const tokenCount = estimateTokensFast3(msgs.map((m) => m.text ?? "").join("\n"));
     const turn = core.processTurn({ messages: msgs, state: session.state, config, tokenCount, renderTags: "text-only" });
     session.state = turn.state;
+    session.stats.contextTokens = tokenCount;
+    if (!session.meta.title) {
+      const t = deriveTitle(msgs);
+      if (t) session.meta.title = t;
+    }
     log2("info", diagTagSummary(turn.messages, sessionId, "text-only"));
     log2("info", diagNudge(turn, sessionId, tokenCount, config.modelContextLimit));
     processedMessages = turn.messages;
@@ -2850,7 +3353,7 @@ function prepareAnthropic(parsed, req, opts, core, config, log2, session) {
 function prepareOpenai(parsed, req, opts, core, config, log2, session) {
   const sessionId = session.id;
   const stream2 = parsed.stream === true;
-  session.requests++;
+  ++session.stats.requests;
   let processedMessages = [];
   let rebuiltMessages = parsed.messages;
   let toolsOut = parsed.tools;
@@ -2862,6 +3365,11 @@ function prepareOpenai(parsed, req, opts, core, config, log2, session) {
     const tokenCount = estimateTokensFast3(msgs.map((m) => m.text ?? "").join("\n"));
     const turn = core.processTurn({ messages: msgs, state: session.state, config, tokenCount, renderTags: "text-only" });
     session.state = turn.state;
+    session.stats.contextTokens = tokenCount;
+    if (!session.meta.title) {
+      const t = deriveTitle(msgs);
+      if (t) session.meta.title = t;
+    }
     log2("info", diagTagSummary(turn.messages, sessionId, "text-only"));
     log2("info", diagNudge(turn, sessionId, tokenCount, config.modelContextLimit));
     processedMessages = turn.messages;
@@ -2893,7 +3401,7 @@ function prepareOpenai(parsed, req, opts, core, config, log2, session) {
 function prepareResponses(parsed, req, opts, core, config, log2, session) {
   const sessionId = session.id;
   const stream2 = parsed.stream === true;
-  session.requests++;
+  ++session.stats.requests;
   let processedMessages = [];
   let rebuiltInput = parsed.input;
   let toolsOut = parsed.tools;
@@ -2906,6 +3414,11 @@ function prepareResponses(parsed, req, opts, core, config, log2, session) {
     const tokenCount = estimateTokensFast3(msgs.map((m) => m.text ?? "").join("\n"));
     const turn = core.processTurn({ messages: msgs, state: session.state, config, tokenCount, renderTags: process.env.ACP_RENDER_NONE ? "none" : "text-only" });
     session.state = turn.state;
+    session.stats.contextTokens = tokenCount;
+    if (!session.meta.title) {
+      const t = deriveTitle(msgs);
+      if (t) session.meta.title = t;
+    }
     log2("info", diagTagSummary(turn.messages, sessionId, "text-only"));
     log2("info", diagNudge(turn, sessionId, tokenCount, config.modelContextLimit));
     processedMessages = turn.messages;
@@ -3178,11 +3691,11 @@ async function pipeThrough(stream2, res) {
   }
 }
 async function dumpStreamToFile(stream2, dir, name) {
-  const { mkdirSync: mkdirSync5, createWriteStream: createWriteStream2 } = await import("fs");
-  const { join: join3 } = await import("path");
+  const { mkdirSync: mkdirSync6, createWriteStream: createWriteStream2 } = await import("fs");
+  const { join: join4 } = await import("path");
   try {
-    mkdirSync5(dir, { recursive: true });
-    const ws = createWriteStream2(join3(dir, name));
+    mkdirSync6(dir, { recursive: true });
+    const ws = createWriteStream2(join4(dir, name));
     const reader = stream2.getReader();
     try {
       for (; ; ) {
@@ -3197,11 +3710,28 @@ async function dumpStreamToFile(stream2, dir, name) {
   } catch {
   }
 }
+function deriveTitle(messages) {
+  for (const m of messages) {
+    if (m.role !== "user" || m.contentType !== "text") continue;
+    const clean = (m.text ?? "").replace(/\s+/g, " ").trim();
+    if (clean) return clean.length > 60 ? clean.slice(0, 57) + "\u2026" : clean;
+  }
+  return void 0;
+}
 function sendStats(res) {
   const sessions2 = listSessions().map((s) => ({
     id: s.id,
-    requests: s.requests,
-    tokensSaved: s.tokensSaved,
+    protocol: s.meta.protocol,
+    upstream: s.meta.upstreamOrigin,
+    label: s.meta.label,
+    title: s.meta.title,
+    requests: s.stats.requests,
+    contextTokens: s.stats.contextTokens,
+    inputTokens: s.stats.inputTokens,
+    cachedTokens: s.stats.cachedTokens,
+    outputTokens: s.stats.outputTokens,
+    cacheSamples: s.stats.cacheSamples,
+    cacheHitPct: s.stats.cacheSamples > 0 ? Math.round(s.stats.cachedTokens / s.stats.inputTokens * 100) : null,
     lastSeen: new Date(s.lastSeen).toISOString()
   }));
   res.writeHead(200, { "content-type": "application/json" });
@@ -3254,7 +3784,7 @@ function logMsg(opts, level, msg2) {
 import { readFile, writeFile, mkdir, access, constants, rm } from "fs/promises";
 import { execFile } from "child_process";
 import path4 from "path";
-import { fileURLToPath } from "url";
+import { fileURLToPath as fileURLToPath2 } from "url";
 var REGISTRY_BASE = "https://registry.npmjs.org";
 var CHECK_INTERVAL_MS = 3 * 60 * 1e3;
 var THROTTLE_FILE = path4.join(cacheDir(), ".update-check");
@@ -3293,7 +3823,7 @@ async function writeLastCheck(ts) {
   }
 }
 async function findInstallDir(packageName) {
-  let dir = path4.dirname(fileURLToPath(import.meta.url));
+  let dir = path4.dirname(fileURLToPath2(import.meta.url));
   for (; ; ) {
     try {
       const pkg = JSON.parse(await readFile(path4.join(dir, "package.json"), "utf-8"));
@@ -3530,23 +4060,23 @@ function startAutoUpdate(opts) {
 }
 
 // src/cli.ts
-import { readFileSync as readFileSync3 } from "fs";
-import { fileURLToPath as fileURLToPath2 } from "url";
+import { readFileSync as readFileSync4 } from "fs";
+import { fileURLToPath as fileURLToPath3 } from "url";
 import path5 from "path";
 var VERSION = (() => {
   try {
-    const here = fileURLToPath2(import.meta.url);
+    const here = fileURLToPath3(import.meta.url);
     const pkg = path5.join(path5.dirname(here), "..", "package.json");
-    return JSON.parse(readFileSync3(pkg, "utf8")).version ?? "dev";
+    return JSON.parse(readFileSync4(pkg, "utf8")).version ?? "dev";
   } catch {
     return "dev";
   }
 })();
 var PACKAGE_NAME = (() => {
   try {
-    const here = fileURLToPath2(import.meta.url);
+    const here = fileURLToPath3(import.meta.url);
     const pkg = path5.join(path5.dirname(here), "..", "package.json");
-    return JSON.parse(readFileSync3(pkg, "utf8")).name ?? "billion-context";
+    return JSON.parse(readFileSync4(pkg, "utf8")).name ?? "billion-context";
   } catch {
     return "billion-context";
   }