pool-anything 0.1.0

package/dist/admin/shell.js

@@ -0,0 +1,129 @@
+import { ICONS, DOCS_URL } from "./branding.js";
+import { tokensCss } from "./tokens.js";
+export const shellCss = `
+  html { scrollbar-gutter:stable; scrollbar-width:none; -ms-overflow-style:none; }
+  html::-webkit-scrollbar, body::-webkit-scrollbar { display:none; }
+  .shell { display:grid; grid-template-columns:var(--sbw,260px) 1fr; min-height:100vh; transition:grid-template-columns 250ms cubic-bezier(0.77,0,0.175,1); }
+  .shell.collapsed { --sbw:57px; }
+  .sidebar { background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:100vh; height:100vh; position:sticky; top:0; overflow:hidden; white-space:nowrap; }
+  .sb-header { height:58px; flex-shrink:0; display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); padding:0 12px; overflow:hidden; }
+  .sb-acct { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 12px; border-radius:8px; border:0; background:transparent; font-size:14px; }
+  .sb-acct span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
+  .sb-logo { width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; overflow:hidden; }
+  .sb-logo img { width:36px; height:36px; object-fit:contain; }
+  .sb-nav { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px 11px 12px 14px; scrollbar-width:none; }
+  .sb-nav::-webkit-scrollbar { display:none; }
+  .mi { display:flex; align-items:center; gap:10px; width:100%; min-height:34px; padding:0 12px; border-radius:8px; border:0; background:transparent; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; text-decoration:none; text-align:left; }
+  .mi:hover { background:var(--paper-2); }
+  .mi.active { background:var(--line-soft); }
+  .mi .ic { opacity:.5; flex-shrink:0; width:16px; text-align:center; }
+  .mi .ic svg { display:block; width:18px; height:18px; }
+  .mi .ext { margin-left:auto; opacity:.45; display:inline-flex; flex-shrink:0; }
+  .sb-footer { height:48px; flex-shrink:0; display:flex; align-items:center; padding:0 14px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--card); }
+  .collapse-btn { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; }
+  .collapse-btn:hover { background:var(--paper-2); color:var(--ink); }
+  .shell.collapsed:not(.peeking) .lbl, .shell.collapsed:not(.peeking) .ext { display:none; }
+  .shell.collapsed:not(.peeking) .sb-header { padding:0 8px; justify-content:center; }
+  .shell.collapsed:not(.peeking) .sb-acct { display:none; }
+  .shell.collapsed:not(.peeking) .mi { justify-content:center; padding:0; }
+  .shell.peeking { --sbw:260px; }
+  .shell .lbl, .shell .sb-acct { opacity:1; transition:opacity 150ms ease; }
+  .shell.closing .lbl, .shell.closing .sb-acct { opacity:0; }
+  @keyframes pageIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
+  .content { animation:pageIn .3s ease both; }
+  @media (max-width:720px) { .shell { --sbw:57px; } .lbl, .ext { display:none; } }`;
+export function shellNav(active) {
+    const item = (href, icon, label) => {
+        const ext = href.startsWith("http");
+        return `<a class="mi${href === active ? " active" : ""}" href="${href}"${ext ? ' target="_blank" rel="noopener" title="Opens external link in a new tab"' : ""}><span class="ic">${icon}</span><span class="lbl">${label}</span>${ext ? `<span class="ext">${ICONS.external}</span>` : ""}</a>`;
+    };
+    return `<aside class="sidebar">
+  <div class="sb-header"><a class="sb-logo" aria-label="pool-anything home" href="/"><img src="/logo.png" alt="pool-anything" width="36" height="36" /></a><div class="sb-acct" title="Local account"><span>Local account</span></div></div>
+  <nav class="sb-nav">${item("/", ICONS.home, "Home")}${item("/pools", ICONS.pools, "Pools")}${item("/keys", ICONS.keys, "API key manager")}${item("/playground", ICONS.playground, "Playground")}${item("/analytics", ICONS.analytics, "Analytics")}${item(DOCS_URL, ICONS.docs, "Docs")}</nav>
+  <div class="sb-footer"><button class="collapse-btn" id="collapseBtn" type="button" data-sidebar="trigger" aria-expanded="true" aria-label="Collapse sidebar"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M21.25 6.72v10.56a2.97 2.97 0 0 1-2.97 2.97H5.72a2.97 2.97 0 0 1-2.97-2.97V6.72a2.97 2.97 0 0 1 2.97-2.97h12.56a2.97 2.97 0 0 1 2.97 2.97"></path><path d="M6.25 7.25v9.5"></path></svg></button></div>
+</aside><script>
+  (function () {
+    try {
+      var sh = document.getElementById('shell');
+      if (localStorage.getItem('sb-collapsed') !== '1') return;
+      sh.classList.add('collapsed');
+      var cb = document.getElementById('collapseBtn');
+      cb.setAttribute('aria-expanded', 'false');
+      cb.setAttribute('aria-label', 'Expand sidebar');
+      var sb = sh.querySelector('.sidebar');
+      if (sb && sb.matches(':hover')) sh.classList.add('peeking');
+    } catch (e) {}
+  })();
+</script>`;
+}
+export const sharedHeader = `<header>
+  <div></div>
+  <div class="spacer">
+    <a href="${DOCS_URL}" target="_blank" rel="noopener">Docs</a>
+  </div>
+</header>`;
+/** Shared page layout matching Home exactly (container, cards, typography).
+ *  Home tokens: --line/--subtle/--bg/--card, .wrap max-width 1400, card
+ *  radius 16 + padding 18. Detail pages use compact top padding (32px, not
+ *  Home's 16vh hero offset) so short content doesn't strand whitespace. */
+export const sharedLayoutCss = `
+  ${tokensCss}
+  .content { flex:1; min-width:0; display:flex; flex-direction:column; }
+  header { height:56px; background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 16px; gap:8px; position:sticky; top:0; z-index:5; }
+  header .spacer { margin-left:auto; display:flex; gap:4px; }
+  header a { font-size:14px; padding:6px 12px; border-radius:8px; border:0; background:inherit; color:var(--ink); text-decoration:none; cursor:pointer; }
+  header a:hover { background:var(--paper-2); }
+  main { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:32px 16px 24px; }
+  .wrap { width:100%; max-width:1400px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch; gap:16px; padding:0 8px; }
+  .page-head { display:flex; align-items:center; gap:10px; }
+  .page-head h1 { font-family:var(--font-serif); font-size:clamp(20px, 4vw, 26px); font-weight:500; margin:0; flex:1; }
+  .page-head img { width:28px; height:28px; object-fit:contain; }
+  a.back, a.crumb { font-size:13px; color:var(--ink-soft); text-decoration:none; }
+  a.back:hover, a.crumb:hover { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
+  .page-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; animation:fadeSlide .28s cubic-bezier(.2,.7,.3,1) both; }
+  @keyframes fadeSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
+  .sec-label { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 8px; }
+  .support-grid { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
+  @media (max-width:900px) { .support-grid { grid-template-columns:1fr; } }
+  .support-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:8px; font-size:13px; }
+  .support-card .rel-row { display:flex; align-items:center; gap:10px; padding:8px 2px; border-top:1px solid var(--paper-2); font-size:13px; }
+  .support-card .rel-row:first-of-type { border-top:0; }
+  .support-card a { color:var(--ink); font-weight:500; text-decoration:none; }
+  .support-card a:hover { text-decoration:underline; text-underline-offset:2px; }
+  .support-card small { color:var(--ink-soft); font-weight:400; }
+  .support-card code { font-family:var(--font-mono); font-size:12px; background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; overflow-x:auto; white-space:pre; display:block; }`;
+export const shellJs = `<script>
+  const shell = document.getElementById('shell');
+  const collapseBtn = document.getElementById('collapseBtn');
+  try { if (localStorage.getItem('sb-collapsed') === '1') { shell.classList.add('collapsed'); collapseBtn.setAttribute('aria-expanded', 'false'); collapseBtn.setAttribute('aria-label', 'Expand sidebar'); } } catch {}
+  const saveSb = () => { try { localStorage.setItem('sb-collapsed', shell.classList.contains('collapsed') ? '1' : '0'); } catch {} };
+  const finishCollapse = (apply) => {
+    shell.classList.add('closing');
+    clearTimeout(finishCollapse.t);
+    finishCollapse.t = setTimeout(() => { apply(); shell.classList.remove('closing'); saveSb(); }, 160);
+  };
+  collapseBtn.addEventListener('click', () => {
+    if (shell.classList.contains('collapsed')) {
+      shell.classList.remove('collapsed'); shell.classList.remove('peeking');
+      collapseBtn.setAttribute('aria-expanded', 'true'); collapseBtn.setAttribute('aria-label', 'Collapse sidebar'); saveSb();
+    } else {
+      finishCollapse(() => {
+        shell.classList.add('collapsed'); shell.classList.remove('peeking');
+        collapseBtn.setAttribute('aria-expanded', 'false'); collapseBtn.setAttribute('aria-label', 'Expand sidebar');
+      });
+    }
+  });
+  const sidebar = document.querySelector('.sidebar');
+  if (shell.classList.contains('collapsed') && sidebar.matches(':hover')) shell.classList.add('peeking');
+  let peekTimer;
+  sidebar.addEventListener('mouseenter', () => {
+    if (!shell.classList.contains('collapsed')) return;
+    clearTimeout(peekTimer); clearTimeout(finishCollapse.t); shell.classList.remove('closing');
+    peekTimer = setTimeout(() => shell.classList.add('peeking'), 150);
+  });
+  sidebar.addEventListener('mouseleave', () => {
+    clearTimeout(peekTimer);
+    if (!shell.classList.contains('peeking')) return;
+    finishCollapse(() => shell.classList.remove('peeking'));
+  });
+</script>`;

package/dist/admin/tokens.js

@@ -0,0 +1,32 @@
+/** Canonical design tokens as a CSS `:root` block — docs-first source of truth.
+ *  Values mirror design-tokens.json (verified by scripts/check-tokens.ts).
+ *  Admin pages interpolate `tokensCss` instead of declaring their own `:root`.
+ *  Custom code only — no framework theming layer involved. */
+export const tokensCss = `
+  :root {
+    --paper:#FFFFFF; --paper-2:#F5F5F4; --card:#FFFFFF; --bg:#FFFFFF;
+    --ink:#1B1917; --ink-soft:#57534E; --ink-faint:#8A8680; --body-copy:#3F3B36;
+    --line:#E8E3D9; --line-soft:#EFEAE1; --active-pill:#E9E5DB;
+    --accent:#C15F3C; --accent-ink:#9A4A2E; --accent-soft:rgba(193,95,60,0.1);
+    --code-bg:#F5F5F4; --code-ink:#23201C; --code-dark:#1C1917; --code-dark-ink:#EDE6DA;
+    --green-bg:#EBF6EC; --green-line:#BFE3C4; --green-ink:#1E6B32; --green-chip:#22A355;
+    --info-chip:#E2DED4;
+    --warn-bg:#FFF3E4; --warn-line:#F0D9B5; --warn-ink:#9A5A00;
+    --danger-bg:#FDECEC; --danger-line:#F5C6C2; --danger-ink:#B3261E; --danger-ring:rgba(179,38,30,0.15);
+    --link-bg:#EAF1FE; --link-ink:#2456C6; --link-line:#C9DAFA;
+    --underline:#C9C2B4; --nav-hover:rgba(87,83,78,0.07);
+    --scrollbar:#D6D0C4; --chev:#A8A29E;
+    --tok-cmd:#B3401E; --tok-str:#0E6E3E; --tok-kw:#7A3DC0; --tok-com:#9B9489;
+    --chart-blue:#3b82f6; --chart-blue-fill:rgba(59,130,246,0.10);
+    --chart-red:#ef4444; --chart-red-fill:rgba(239,68,68,0.08);
+    --scrim:rgba(0,0,0,0.3); --overlay-strong:rgba(0,0,0,0.55);
+    --radius:8px; --radius-xs:5px; --radius-sm:6px; --radius-copy:7px;
+    --radius-md:8px; --radius-lg:10px; --radius-xl:12px; --radius-pill:999px;
+    --shadow-sm:0 1px 2px rgba(0,0,0,.15); --shadow-md:0 8px 24px rgba(0,0,0,.12);
+    --shadow-drawer:0 20px 60px rgba(0,0,0,.18);
+    --ctl-sm:26px; --ctl-icon:30px; --ctl-md:34px; --ctl-xl:40px;
+    --font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    --font-serif:Georgia,"Times New Roman",serif;
+    --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+    color-scheme:light;
+  }`;

package/dist/cli/nl.js

@@ -0,0 +1,147 @@
+/**
+ * Natural-language command parser for the `pool-anything` REPL.
+ *
+ * Ceiling: keyword/regex matching only — no LLM, no grammar engine.
+ * If this outgrows ~20 intents, replace with a proper command table.
+ */
+function clean(input) {
+    return input
+        .trim()
+        .toLowerCase()
+        .replace(/^please\s+/, "")
+        .replace(/[?.!]+$/, "")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+/** Strip filler words leaving the pool/provider reference. */
+function refOf(s, drop) {
+    return s
+        .replace(drop, " ")
+        .replace(/\b(pool|pools|key|keys|provider|for|from|of|on|in|the|my|a|an|to|please)\b/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+}
+const POOL_WORDS = /\b(list|ls|show|display|get|all|my)\b/g;
+const USAGE_WORDS = /\b(show|display|get|list|what|whats|what's|check|my|pool|pools|usage|use|used|stats|statistics|status|tokens?|quota|remaining|consumption)\b/g;
+const KEY_LIST_WORDS = /\b(list|ls|show|display|get|all|my|pool|pools|key|keys)\b/g;
+const ADD_WORDS = /\b(add|import|paste|insert|append|put|save|store|key|keys|pool|pools|to|into|in|for|the|my|new)\b/g;
+const WATCH_WORDS = /^watch\s*/;
+const NEXT_WORDS = /^(next|rotate|pick|draw|get key|grab)\b\s*/;
+const DELETE_WORDS = /\b(delete|remove|drop|destroy|pool|pools|the|my|a)\b/g;
+export function parse(input) {
+    const raw = input.trim();
+    if (!raw)
+        return { kind: "unknown", raw: input };
+    const s = clean(input);
+    if (/^(exit|quit|:q|bye|goodbye|done)$/.test(s))
+        return { kind: "exit" };
+    if (/^(\.help|help|\?|commands)$/.test(s))
+        return { kind: "help" };
+    if (/^(clear|cls)$/.test(s))
+        return { kind: "clear" };
+    if (/^(version|--version|-v)$/.test(s))
+        return { kind: "version" };
+    if (/^(serve|start|run|launch)( the)?( server| ui| web| app)?$/.test(s))
+        return { kind: "serve" };
+    if (/^(server|web ui|dashboard)$/.test(s))
+        return { kind: "serve" };
+    // Keys before pools: "list keys ..." contains neither "pool" word necessarily.
+    if (/\bkeys?\b/.test(s) && /\b(list|ls|show|display|get)\b/.test(s)) {
+        return { kind: "list-keys", ref: refOf(s, KEY_LIST_WORDS) };
+    }
+    if (/\bproviders?\b/.test(s) && /\b(list|ls|show|display|get|all|what|available)\b/.test(s)) {
+        return { kind: "list-providers" };
+    }
+    if (/^(ls|pools?)$/.test(s) || (/\bpools?\b/.test(s) && /\b(list|ls|show|display|get|all|my)\b/.test(s))) {
+        return { kind: "list-pools" };
+    }
+    if (/^watch\b/.test(s)) {
+        return { kind: "watch", ref: refOf(s.replace(WATCH_WORDS, ""), POOL_WORDS) };
+    }
+    if (/^(next|rotate|pick|draw|grab)\b/.test(s)) {
+        return { kind: "next", ref: refOf(s.replace(NEXT_WORDS, ""), POOL_WORDS) };
+    }
+    const consume = s.match(/^(consume|record|log|bill|add usage|use)\b\s+(\d+)\b\s*(tokens?|toks?)?\s*(.*)$/);
+    if (consume) {
+        const tokens = Number(consume[2]);
+        const ref = refOf(consume[4] ?? "", /\b(on|for|from|to|in|tokens?|toks?|pool|pools|key|keys|the|my|usage)\b/g);
+        if (Number.isSafeInteger(tokens) && tokens > 0)
+            return { kind: "consume", tokens, ref };
+    }
+    if (/\b(add|import|paste|insert|append|put|save|store)\b/.test(s) && /\bkeys?\b/.test(s)) {
+        const count = s.match(/\b(\d+)\s*keys?\b/) ?? s.match(/\bkeys?\b.*?(\d+)\b/);
+        return {
+            kind: "add-keys",
+            ref: refOf(s, ADD_WORDS).replace(/^\d+\s*|\s*\d+$/, "").trim(),
+            count: count ? Number(count[1]) : null,
+        };
+    }
+    if (/\b(delete|remove|drop|destroy)\b/.test(s) && /\bpools?\b/.test(s)) {
+        return { kind: "delete-pool", ref: refOf(s, DELETE_WORDS) };
+    }
+    if (/\b(create|new|make)\b/.test(s) && /\bpools?\b/.test(s)) {
+        // "create pool <name> for <provider>" — provider is the last word after "for".
+        // Name keeps the user's original casing (match on a case-preserved copy).
+        const cased = input.trim().replace(/\s+/g, " ");
+        const cm = cased.match(/\bfor\s+([A-Za-z0-9-]+)\s*$/) ?? cased.match(/\bprovider\s+([A-Za-z0-9-]+)\s*$/i);
+        const casedCut = cm ? cased.slice(0, cm.index).trim() : cased;
+        const name = casedCut
+            .replace(/\b(create|new|make|a|pool|pools|named|called|the|my)\b/gi, " ")
+            .replace(/\s+/g, " ")
+            .trim();
+        return { kind: "create-pool", name, provider: (cm?.[1] ?? "").toLowerCase() };
+    }
+    if (/\b(usage|use|used|stats|statistics|status|tokens?|toks?|quota|remaining|consumption)\b/.test(s)) {
+        return { kind: "usage", ref: refOf(s, USAGE_WORDS) };
+    }
+    return { kind: "unknown", raw: input };
+}
+// --- smart suggestions (edit distance over canonical forms + provider ids) ---
+const CANONICAL = [
+    "list pools",
+    "list providers",
+    "list keys",
+    "show usage for",
+    "add keys to",
+    "create pool",
+    "delete pool",
+    "watch",
+    "serve",
+    "help",
+    "exit",
+];
+function distance(a, b) {
+    const m = a.length;
+    const n = b.length;
+    if (m === 0)
+        return n;
+    if (n === 0)
+        return m;
+    let prev = Array.from({ length: n + 1 }, (_, j) => j);
+    for (let i = 1; i <= m; i++) {
+        let cur = [i];
+        for (let j = 1; j <= n; j++) {
+            cur[j] = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+        }
+        prev = cur;
+    }
+    return prev[n];
+}
+/** Best-guess suggestion for unknown input, or null. Compares against canonical commands. */
+export function suggest(input, providerIds = []) {
+    const s = clean(input);
+    if (!s)
+        return null;
+    const first2 = s.split(" ").slice(0, 2).join(" ");
+    let best = null;
+    let bestD = Infinity;
+    for (const c of [...CANONICAL, ...providerIds.map((p) => `show usage for ${p}`)]) {
+        const target = c.startsWith("show usage") ? c : c;
+        const d = Math.min(distance(first2, target), distance(s, target) - Math.max(0, s.length - target.length) * 0.5);
+        if (d < bestD) {
+            bestD = d;
+            best = c;
+        }
+    }
+    return best !== null && bestD <= 4 ? best : null;
+}