npm - @9thprotocol/cli - Versions diffs - 0.1.0 - Mend

@9thprotocol/cli 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/LICENSE +16 -0
package/README.md +43 -0
package/dist/init.d.ts +2 -0
package/dist/init.js +61 -0
package/dist/login.d.ts +4 -0
package/dist/login.js +161 -0
package/dist/main.d.ts +2 -0
package/dist/main.js +53 -0
package/dist/map.d.ts +2 -0
package/dist/map.js +57 -0
package/dist/repl.d.ts +1 -0
package/dist/repl.js +266 -0
package/dist/scripts/tui-smoke.d.ts +1 -0
package/dist/scripts/tui-smoke.js +64 -0
package/dist/serve.d.ts +8 -0
package/dist/serve.js +225 -0
package/dist/shared.d.ts +60 -0
package/dist/shared.js +192 -0
package/dist/tui/app.d.ts +28 -0
package/dist/tui/app.js +191 -0
package/dist/tui/index.d.ts +2 -0
package/dist/tui/index.js +35 -0
package/dist/webui.d.ts +13 -0
package/dist/webui.js +1056 -0
package/package.json +41 -0

package/dist/webui.js ADDED Viewed

@@ -0,0 +1,1056 @@
+/**
+ * HTML for the local session (`9p serve`) and the desktop app window.
+ *
+ * Deliberately one self-contained file with no build step and no dependencies:
+ * it is served by the CLI itself, so a bundler here would mean a second build
+ * pipeline for a single page.
+ *
+ * Layout: a full-height left sidebar, a breadcrumb bar over the main column,
+ * and a composer that owns its own controls. The sidebar runs to the top of the
+ * window on purpose. On macOS the desktop app hides the title bar, so the
+ * traffic lights sit in the sidebar's header strip instead of over the content.
+ */
+export function chatHtml() {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>9th Protocol</title>
+<style>
+:root {
+  --bg: #0a0a0e;
+  --side: #0d0d12;
+  --panel: #131319;
+  --panel-2: #191921;
+  --border: #22222c;
+  --border-soft: #1b1b24;
+  --text: #ededf0;
+  --dim: #9a9aa6;
+  --faint: #61616d;
+  --accent: #8b5cf6;
+  --accent-dim: #6d43d8;
+  --warn: #fbbf24;
+  --err: #f87171;
+  --radius: 12px;
+  --bar-h: 52px;
+  --side-w: 244px;
+  /* Desktop app raises this on macOS so the sidebar header clears the lights. */
+  --titlebar-inset: 0px;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0; background: var(--bg); color: var(--text);
+  font: 14px/1.6 var(--sans);
+  overflow: hidden; -webkit-user-select: none; user-select: none;
+}
+button, input, textarea, select { font: inherit; color: inherit; }
+.app { display: flex; height: 100%; }
+/* ── sidebar ─────────────────────────────────────────────── */
+.side {
+  width: var(--side-w); flex: none; display: flex; flex-direction: column;
+  background: var(--side); border-right: 1px solid var(--border-soft);
+}
+/*
+ * The macOS traffic lights are drawn over this strip when the desktop app
+ * hides the title bar, so the desktop process raises --lights-inset to push the
+ * title clear of them. In a browser the inset stays 0 and nothing shifts.
+ */
+.side-head {
+  height: var(--bar-h); flex: none;
+  display: flex; align-items: center;
+  padding: 0 12px 0 calc(12px + var(--lights-inset));
+  -webkit-app-region: drag;
+}
+.side-head .title { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
+.side-head .title b { color: var(--accent); }
+.side-head .spacer { flex: 1; }
+.icobtn {
+  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
+  background: none; border: 0; border-radius: 6px; cursor: pointer;
+  color: var(--faint); -webkit-app-region: no-drag;
+}
+.icobtn:hover { background: var(--panel); color: var(--text); }
+.icobtn svg { width: 15px; height: 15px; }
+/* Collapse hides the rail entirely; the toggle reappears in the main bar. */
+.app.collapsed .side { display: none; }
+.srow .chev { opacity: .5; width: 13px; height: 13px; }
+.srow.nav.on { background: var(--panel); color: var(--text); }
+.srow.nav.on .ico { opacity: 1; color: var(--accent); }
+.sitem.dimlabel {
+  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
+  color: var(--faint); padding: 8px 9px 2px;
+}
+.dd-menu.recent { position: static; margin: 2px 0 6px; box-shadow: none; }
+.side-body { flex: 1; overflow-y: auto; padding: 4px 8px; }
+.side-foot { padding: 8px; border-top: 1px solid var(--border-soft); }
+.srow {
+  display: flex; align-items: center; gap: 9px; width: 100%;
+  padding: 7px 9px; border-radius: 8px; background: none; border: 0;
+  color: var(--dim); font-size: 13px; cursor: pointer; text-align: left;
+  -webkit-app-region: no-drag;
+}
+.srow:hover { background: var(--panel); color: var(--text); }
+.srow .ico { width: 15px; height: 15px; flex: none; opacity: .75; }
+.srow .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.srow kbd {
+  font: 10px/1 var(--mono); border: 1px solid var(--border);
+  border-radius: 4px; padding: 3px 5px; color: var(--faint);
+}
+.sgroup { margin-top: 10px; }
+.sgroup > .label {
+  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
+  color: var(--faint); font-weight: 600; padding: 8px 9px 4px;
+}
+.sitem {
+  font: 11.5px/1.5 var(--mono); color: var(--faint);
+  padding: 5px 9px; word-break: break-all;
+}
+.pill {
+  display: inline-block; font: 11px/1 var(--mono); color: var(--dim);
+  background: var(--panel); border: 1px solid var(--border);
+  border-radius: 999px; padding: 5px 9px; margin: 0 4px 4px 0;
+}
+.pill.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
+/* ── main column ─────────────────────────────────────────── */
+.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.bar {
+  height: var(--bar-h); flex: none;
+  display: flex; align-items: center; gap: 10px; padding: 0 16px;
+  border-bottom: 1px solid var(--border-soft); -webkit-app-region: drag;
+}
+/* With the rail hidden there is nothing else to clear the lights. */
+.app.collapsed .bar { padding-left: calc(16px + var(--lights-inset)); }
+/* ── views ───────────────────────────────────────────────── */
+.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.view[hidden] { display: none; }
+.panel {
+  flex: 1; overflow-y: auto; padding: 28px;
+  max-width: 860px; width: 100%; margin: 0 auto;
+  -webkit-user-select: text; user-select: text;
+}
+.panel h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
+.panel h3 { font-size: 14px; font-weight: 600; margin: 28px 0 10px; }
+.panel .sub { color: var(--faint); font-size: 13px; margin: 0 0 22px; }
+.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.row-between h3 { margin: 28px 0 10px; }
+.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
+.statcard {
+  background: var(--panel); border: 1px solid var(--border-soft);
+  border-radius: var(--radius); padding: 14px;
+}
+.statcard .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
+.statcard .v { font: 22px/1.3 var(--mono); margin-top: 6px; }
+.statcard .v small { font-size: 12px; color: var(--faint); }
+.meterbar { height: 5px; background: var(--panel-2); border-radius: 999px; margin-top: 9px; overflow: hidden; }
+.meterbar > div { height: 100%; background: var(--accent); border-radius: 999px; }
+.meterbar.hot > div { background: var(--warn); }
+.tabs { display: flex; gap: 4px; }
+.tab {
+  background: none; border: 1px solid transparent; border-radius: 7px;
+  color: var(--faint); font-size: 12.5px; padding: 5px 10px; cursor: pointer;
+}
+.tab:hover { color: var(--text); }
+.tab.on { color: var(--text); background: var(--panel); border-color: var(--border-soft); }
+.tablewrap {
+  background: var(--panel); border: 1px solid var(--border-soft);
+  border-radius: var(--radius); overflow-x: auto;
+}
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th, td { text-align: left; padding: 9px 14px; white-space: nowrap; }
+th { font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
+tbody tr + tr td { border-top: 1px solid var(--border-soft); }
+td.mono { font: 12.5px/1.5 var(--mono); color: var(--dim); }
+td.grow { white-space: normal; word-break: break-all; }
+.field { margin-bottom: 24px; }
+.field > label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 8px; }
+.field .help { font-size: 12px; color: var(--faint); margin: 8px 0 0; }
+.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; gap: 3px; }
+.seg button {
+  background: none; border: 0; border-radius: 7px; cursor: pointer;
+  color: var(--dim); font-size: 12.5px; padding: 6px 13px;
+}
+.seg button:hover { color: var(--text); }
+.seg button.on { background: var(--accent); color: #fff; }
+.kv { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); }
+.kv .r { display: flex; gap: 14px; padding: 10px 14px; font-size: 13px; }
+.kv .r + .r { border-top: 1px solid var(--border-soft); }
+.kv .r .k { width: 150px; flex: none; color: var(--faint); }
+.kv .r .v { flex: 1; min-width: 0; word-break: break-all; color: var(--text); }
+.kv .r .v.mono { font: 12.5px/1.5 var(--mono); color: var(--dim); }
+.empty-note { color: var(--faint); font-size: 13px; padding: 16px; }
+.crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
+.crumb .ico { width: 15px; height: 15px; opacity: .6; flex: none; }
+.crumb .proj { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
+.crumb .sep { color: var(--faint); }
+.crumb .cur { font-weight: 600; }
+.bar .spacer { flex: 1; }
+.bar .meter { font: 11.5px/1 var(--mono); color: var(--faint); white-space: nowrap; -webkit-app-region: no-drag; }
+/* ── transcript ──────────────────────────────────────────── */
+.log { flex: 1; overflow-y: auto; padding: 28px 0 6px; -webkit-user-select: text; user-select: text; }
+.log::-webkit-scrollbar, .side-body::-webkit-scrollbar { width: 8px; }
+.log::-webkit-scrollbar-thumb, .side-body::-webkit-scrollbar-thumb {
+  background: rgb(255 255 255 / 7%); border-radius: 8px;
+}
+.log::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 13%); }
+.hero { max-width: 720px; margin: 14vh auto 0; padding: 0 28px; text-align: center; }
+.hero h1 { font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; }
+.hero h1 .name {
+  text-decoration: underline; text-decoration-style: dotted;
+  text-underline-offset: 7px; text-decoration-color: var(--faint);
+}
+.hero p { color: var(--faint); font-size: 13px; margin: 0; }
+.hero kbd {
+  font: 11px/1 var(--mono); border: 1px solid var(--border);
+  background: var(--panel); border-radius: 5px; padding: 3px 6px; color: var(--dim);
+}
+.row { max-width: 780px; margin: 0 auto 20px; padding: 0 28px; }
+.who {
+  font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
+  color: var(--faint); margin-bottom: 7px;
+}
+.row.user .who { color: var(--accent); }
+.row.user .bubble {
+  background: var(--panel); border: 1px solid var(--border-soft);
+  border-radius: var(--radius); padding: 11px 14px; white-space: pre-wrap;
+}
+.row.assistant .bubble { white-space: pre-wrap; }
+.bubble code {
+  font: 12.5px/1.5 var(--mono); background: var(--panel-2);
+  border: 1px solid var(--border-soft); border-radius: 5px; padding: 1px 5px;
+}
+.bubble pre {
+  font: 12.5px/1.55 var(--mono); background: var(--panel);
+  border: 1px solid var(--border-soft); border-radius: var(--radius);
+  padding: 12px 14px; overflow-x: auto; margin: 10px 0;
+}
+.bubble pre code { background: none; border: 0; padding: 0; }
+.tool {
+  max-width: 780px; margin: 0 auto 8px; padding: 0 28px;
+  font: 12.5px/1.5 var(--mono); color: var(--dim);
+  display: flex; align-items: baseline; gap: 8px;
+}
+.tool .dot { color: var(--faint); }
+.tool.err { color: var(--err); }
+.tool .ms { color: var(--faint); font-size: 11px; }
+.note {
+  max-width: 780px; margin: 0 auto 14px; padding: 0 28px;
+  font: 12px/1.5 var(--mono); color: var(--faint);
+}
+.note b { color: var(--accent); font-weight: 500; }
+.note.warn { color: var(--warn); }
+.note.err { color: var(--err); }
+.card {
+  max-width: 780px; margin: 0 auto 18px; padding: 14px 16px;
+  background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
+  border-radius: var(--radius);
+}
+.card .q { margin-bottom: 12px; }
+.card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
+button.btn {
+  background: var(--accent); border: 0; border-radius: 8px;
+  padding: 8px 15px; font-size: 13px; font-weight: 550; cursor: pointer; color: #fff;
+}
+button.btn:hover { background: var(--accent-dim); }
+button.btn.ghost { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
+button.btn.ghost:hover { border-color: #34343f; }
+/* ── composer ────────────────────────────────────────────── */
+.composer { padding: 10px 28px 24px; }
+.box {
+  max-width: 780px; margin: 0 auto; background: var(--panel);
+  border: 1px solid var(--border); border-radius: 16px; padding: 14px 14px 10px;
+}
+.box:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
+textarea#input {
+  width: 100%; background: none; border: 0; resize: none; outline: none;
+  max-height: 200px; line-height: 1.55; display: block;
+  -webkit-user-select: text; user-select: text;
+}
+textarea#input::placeholder { color: var(--faint); }
+.ctl { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
+.ctl .sep { width: 1px; height: 16px; background: var(--border); }
+.ctl .spacer { flex: 1; }
+/*
+ * Custom dropdown. A native <select> renders as an OS widget that ignores the
+ * page's styling entirely, which reads as a hole in a dark app, and on macOS it
+ * pops a system menu that looks nothing like the rest of the window.
+ */
+.dd { position: relative; }
+.dd-btn {
+  display: flex; align-items: center; gap: 6px; max-width: 240px;
+  background: none; border: 0; border-radius: 6px; cursor: pointer;
+  color: var(--dim); font-size: 12.5px; padding: 4px 6px;
+}
+.dd-btn:hover { color: var(--text); background: var(--panel-2); }
+.dd-btn:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 1px; }
+.dd-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-btn .arw { flex: none; opacity: .6; transition: transform .12s ease; }
+.dd.open .dd-btn { color: var(--text); background: var(--panel-2); }
+.dd.open .dd-btn .arw { transform: rotate(180deg); }
+.dd-menu {
+  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60;
+  min-width: 230px; max-height: 320px; overflow-y: auto;
+  background: var(--panel-2); border: 1px solid var(--border);
+  border-radius: 10px; padding: 5px;
+  box-shadow: 0 12px 34px rgb(0 0 0 / 55%);
+}
+.dd-menu[hidden] { display: none; }
+.dd-opt {
+  display: flex; align-items: center; gap: 8px; width: 100%;
+  padding: 7px 9px; border: 0; border-radius: 7px; background: none;
+  color: var(--dim); font-size: 13px; cursor: pointer; text-align: left;
+}
+.dd-opt .tick { width: 13px; flex: none; opacity: 0; }
+.dd-opt .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dd-opt[aria-selected="true"] { color: var(--text); }
+.dd-opt[aria-selected="true"] .tick { opacity: 1; color: var(--accent); }
+.dd-opt:hover, .dd-opt.active { background: var(--panel); color: var(--text); }
+#sendBtn {
+  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
+  background: var(--accent); color: #fff; display: grid; place-items: center;
+}
+#sendBtn:hover { background: var(--accent-dim); }
+#sendBtn:disabled { opacity: .4; cursor: not-allowed; }
+.hint { max-width: 780px; margin: 8px auto 0; font: 11px/1 var(--mono); color: var(--faint); }
+</style>
+</head>
+<body>
+<div class="app" id="app">
+  <aside class="side">
+    <div class="side-head">
+      <div class="title"><b>9th</b> Protocol</div>
+      <div class="spacer"></div>
+      <button class="icobtn" id="collapseBtn" title="Collapse sidebar" aria-label="Collapse sidebar">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+          <rect x="2" y="3" width="12" height="10" rx="2"/><path d="M6.5 3v10"/></svg>
+      </button>
+    </div>
+    <div class="side-body">
+      <button class="srow" id="projBtn" title="Switch project">
+        <svg class="ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+          <path d="M2 4.5h4l1.2 1.5H14v6.5H2z" stroke-linejoin="round"/></svg>
+        <span class="grow" id="projLabel">…</span>
+        <svg class="ico chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6">
+          <path d="M4 6.5L8 10.5l4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+      <div class="dd-menu recent" id="recentMenu" hidden></div>
+      <button class="srow" id="newBtn" title="Clear the transcript and start fresh">
+        <svg class="ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+          <path d="M8 3.5v9M3.5 8h9" stroke-linecap="round"/></svg>
+        <span class="grow">New thread</span>
+      </button>
+      <div class="sgroup">
+        <div class="label">Workspace</div>
+        <button class="srow nav on" data-view="session">
+          <svg class="ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+            <path d="M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z" stroke-linejoin="round"/></svg>
+          <span class="grow">Session</span>
+        </button>
+        <button class="srow nav" data-view="usage">
+          <svg class="ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+            <path d="M3 13V7M8 13V3M13 13v-4" stroke-linecap="round"/></svg>
+          <span class="grow">Usage</span>
+        </button>
+        <button class="srow nav" data-view="settings">
+          <svg class="ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+            <circle cx="8" cy="8" r="2.2"/>
+            <path d="M8 1.8v1.6M8 12.6v1.6M14.2 8h-1.6M3.4 8H1.8M12.4 3.6l-1.1 1.1M4.7 11.3l-1.1 1.1M12.4 12.4l-1.1-1.1M4.7 4.7L3.6 3.6" stroke-linecap="round"/></svg>
+          <span class="grow">Settings</span>
+        </button>
+      </div>
+      <div class="sgroup" id="ctxGroup">
+        <div class="label">Context</div>
+        <div class="sitem" id="cwd">…</div>
+        <div id="vaultWrap" hidden><div class="sitem dimlabel">vault</div><div class="sitem" id="vault"></div></div>
+        <div id="skillsWrap" hidden><div class="sitem dimlabel">skills</div><div style="padding:2px 9px" id="skills"></div></div>
+        <div id="mcpWrap" hidden><div class="sitem dimlabel">mcp</div><div style="padding:2px 9px" id="mcp"></div></div>
+      </div>
+    </div>
+    <div class="side-foot">
+      <div style="padding:0 9px 8px">
+        <span class="pill" id="modePill">Ask first</span>
+        <span class="pill" id="ctxPill">context 0</span>
+      </div>
+      <button class="srow" id="docsBtn">
+        <svg class="ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+          <path d="M3 2.5h7l3 3v8H3z" stroke-linejoin="round"/><path d="M9.5 2.5V6H13"/></svg>
+        <span class="grow">Documentation</span>
+      </button>
+    </div>
+  </aside>
+  <main class="main">
+    <div class="bar">
+      <button class="icobtn" id="expandBtn" title="Show sidebar" aria-label="Show sidebar" hidden>
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4">
+          <rect x="2" y="3" width="12" height="10" rx="2"/><path d="M6.5 3v10"/></svg>
+      </button>
+      <div class="crumb">
+        <span class="proj" id="projName">…</span>
+        <span class="sep">/</span>
+        <span class="cur" id="viewName">Session</span>
+      </div>
+      <div class="spacer"></div>
+      <div class="meter" id="meter"></div>
+    </div>
+    <!-- Session -->
+    <div class="view" id="view-session">
+      <div class="log" id="log">
+        <div class="hero" id="hero">
+          <h1>What should we build in <span class="name" id="heroName">this project</span>?</h1>
+          <p><kbd>Enter</kbd> to send, <kbd>Shift</kbd> + <kbd>Enter</kbd> for a newline</p>
+        </div>
+      </div>
+      <div class="composer">
+        <form id="form">
+          <div class="box">
+            <textarea id="input" rows="1" placeholder="Ask 9p to do something, or /help for commands" autofocus></textarea>
+            <div class="ctl">
+              <div class="dd" id="modelDd"></div>
+              <div class="sep"></div>
+              <div class="dd" id="modeDd"></div>
+              <div class="spacer"></div>
+              <button id="sendBtn" type="submit" title="Send">
+                <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor"
+                     stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M8 13V3M3.5 7.5L8 3l4.5 4.5"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="hint" id="hint"></div>
+        </form>
+      </div>
+    </div>
+    <!-- Usage -->
+    <div class="view" id="view-usage" hidden>
+      <div class="panel">
+        <h2>Usage</h2>
+        <p class="sub">Credits meter raw model cost. 1 credit = $0.01 of compute.</p>
+        <div class="cards" id="usageCards"></div>
+        <div class="row-between">
+          <h3>Last 30 days</h3>
+          <div class="tabs" id="usageTabs">
+            <button class="tab on" data-group="model">by model</button>
+            <button class="tab" data-group="day">by day</button>
+            <button class="tab" data-group="session">by session</button>
+          </div>
+        </div>
+        <div class="tablewrap"><table id="usageTable"><tbody></tbody></table></div>
+      </div>
+    </div>
+    <!-- Settings -->
+    <div class="view" id="view-settings" hidden>
+      <div class="panel">
+        <h2>Settings</h2>
+        <p class="sub">Applies to this session. Model and permission mode also live in the composer.</p>
+        <div class="field">
+          <label>Auto routing bias</label>
+          <div class="seg" id="biasSeg">
+            <button data-bias="economy">Economy</button>
+            <button data-bias="balanced">Balanced</button>
+            <button data-bias="quality">Quality</button>
+          </div>
+          <p class="help">Economy leans on cheaper models. Quality is the only way Auto reaches premium models, and only on complex turns.</p>
+        </div>
+        <div class="field">
+          <label>Permission mode</label>
+          <div class="seg" id="modeSeg">
+            <button data-mode="default">Ask first</button>
+            <button data-mode="accept-edits">Accept edits</button>
+            <button data-mode="plan">Plan</button>
+            <button data-mode="bypass">Full access</button>
+          </div>
+          <p class="help">Plan is read only. Full access stops asking before edits and commands.</p>
+        </div>
+        <h3>Account</h3>
+        <div class="kv" id="accountKv"></div>
+        <h3>This project</h3>
+        <div class="kv" id="projectKv"></div>
+      </div>
+    </div>
+  </main>
+</div>
+<script>
+const log = document.getElementById("log");
+const hero = document.getElementById("hero");
+const meter = document.getElementById("meter");
+const modePill = document.getElementById("modePill");
+const ctxPill = document.getElementById("ctxPill");
+const input = document.getElementById("input");
+const sendBtn = document.getElementById("sendBtn");
+const form = document.getElementById("form");
+const hint = document.getElementById("hint");
+const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
+/*
+ * In the desktop app on macOS the title bar is hidden and the traffic lights
+ * are painted over the top-left of this page, right where the sidebar title
+ * sits. Detecting it here (rather than having the main process inject CSS)
+ * keeps the browser case untouched and needs no coordination between the two.
+ */
+if (/Electron/.test(navigator.userAgent) && /Mac/.test(navigator.userAgent)) {
+  document.documentElement.style.setProperty("--lights-inset", "68px");
+}
+/** Minimal fenced-code and inline-code rendering. Everything else stays literal. */
+function render(text) {
+  return String(text).split(/\`\`\`/).map((part, i) => {
+    if (i % 2 === 1) {
+      const nl = part.indexOf("\\n");
+      const body = nl === -1 ? part : part.slice(nl + 1);
+      return "<pre><code>" + esc(body.replace(/\\n$/, "")) + "</code></pre>";
+    }
+    return esc(part).replace(/\`([^\`\\n]+)\`/g, "<code>$1</code>");
+  }).join("");
+}
+/**
+ * Custom dropdown.
+ *
+ * Options are set later (the model list arrives from /state), so the control is
+ * built empty and repopulated. Only one may be open at a time, hence the
+ * module-level openDd.
+ *
+ * Note: this whole script lives inside a template literal, so a backtick here
+ * would end the string and break the build.
+ */
+let openDd = null;
+function Dropdown(host, opts) {
+  let options = [];
+  let value = null;
+  let active = -1;
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "dd-btn";
+  btn.setAttribute("aria-haspopup", "listbox");
+  btn.setAttribute("aria-expanded", "false");
+  if (opts.title) btn.title = opts.title;
+  btn.innerHTML = '<span class="lbl"></span>' +
+    '<svg class="arw" width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" ' +
+    'stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6.5L8 10.5l4-4"/></svg>';
+  const menu = document.createElement("div");
+  menu.className = "dd-menu";
+  menu.setAttribute("role", "listbox");
+  menu.hidden = true;
+  host.append(btn, menu);
+  const labelOf = (v) => {
+    const found = options.find((o) => o.value === v);
+    return found ? found.label : v ?? "";
+  };
+  function paint() {
+    btn.querySelector(".lbl").textContent = labelOf(value);
+    menu.innerHTML = "";
+    options.forEach((o, i) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "dd-opt" + (i === active ? " active" : "");
+      b.setAttribute("role", "option");
+      b.setAttribute("aria-selected", String(o.value === value));
+      b.innerHTML = '<svg class="tick" width="13" height="13" viewBox="0 0 16 16" fill="none" ' +
+        'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<path d="M3.5 8.5l3 3 6-7"/></svg><span class="txt"></span>';
+      b.querySelector(".txt").textContent = o.label;
+      b.addEventListener("click", () => { choose(o.value); });
+      menu.appendChild(b);
+    });
+  }
+  function choose(v) {
+    value = v;
+    close();
+    paint();
+    opts.onChange(v);
+  }
+  function open() {
+    if (openDd && openDd !== api) openDd.close();
+    openDd = api;
+    host.classList.add("open");
+    menu.hidden = false;
+    btn.setAttribute("aria-expanded", "true");
+    active = Math.max(0, options.findIndex((o) => o.value === value));
+    paint();
+    const sel = menu.children[active];
+    if (sel) sel.scrollIntoView({ block: "nearest" });
+  }
+  function close() {
+    host.classList.remove("open");
+    menu.hidden = true;
+    btn.setAttribute("aria-expanded", "false");
+    if (openDd === api) openDd = null;
+  }
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    menu.hidden ? open() : close();
+  });
+  host.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && !menu.hidden) { e.stopPropagation(); close(); btn.focus(); return; }
+    if (menu.hidden) {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") { e.preventDefault(); open(); }
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      active = (active + (e.key === "ArrowDown" ? 1 : -1) + options.length) % options.length;
+      paint();
+      const el = menu.children[active];
+      if (el) el.scrollIntoView({ block: "nearest" });
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (options[active]) choose(options[active].value);
+    }
+  });
+  const api = {
+    close,
+    setOptions(next) { options = next; paint(); },
+    setValue(v) { if (v !== value) { value = v; paint(); } },
+    get value() { return value; },
+    get count() { return options.length; },
+  };
+  paint();
+  return api;
+}
+// One outside-click handler for every dropdown, rather than one each.
+document.addEventListener("click", () => { if (openDd) openDd.close(); });
+const MODES = [
+  { value: "default", label: "Ask first" },
+  { value: "accept-edits", label: "Accept edits" },
+  { value: "plan", label: "Plan (read only)" },
+  { value: "bypass", label: "Full access" },
+];
+const modelDd = Dropdown(document.getElementById("modelDd"), {
+  title: "Model",
+  onChange: (v) => post("/config", { model: v }),
+});
+const modeDd = Dropdown(document.getElementById("modeDd"), {
+  title: "Permission mode",
+  onChange: (v) => post("/config", { mode: v }),
+});
+modeDd.setOptions(MODES);
+function atBottom() { return log.scrollHeight - log.scrollTop - log.clientHeight < 80; }
+function scroll(force) { if (force || atBottom()) log.scrollTop = log.scrollHeight; }
+function hideHero() { if (hero && hero.parentNode) hero.style.display = "none"; }
+let streamEl = null;
+let streamRaw = "";
+function addRow(kind, text) {
+  hideHero();
+  const stick = atBottom();
+  const el = document.createElement("div");
+  el.className = "row " + kind;
+  el.innerHTML = '<div class="who">' + (kind === "user" ? "you" : "9p") + "</div>" +
+    '<div class="bubble">' + render(text) + "</div>";
+  log.appendChild(el);
+  scroll(stick);
+  return el.querySelector(".bubble");
+}
+function addTool(summary, cls, ms) {
+  hideHero();
+  const stick = atBottom();
+  const el = document.createElement("div");
+  el.className = "tool " + (cls || "");
+  el.innerHTML = '<span class="dot">' + (cls === "err" ? "✗" : "⚙") + "</span><span>" +
+    esc(summary) + "</span>" + (ms ? '<span class="ms">' + ms + "ms</span>" : "");
+  log.appendChild(el);
+  scroll(stick);
+}
+function addNote(html, cls) {
+  hideHero();
+  const stick = atBottom();
+  const el = document.createElement("div");
+  el.className = "note " + (cls || "");
+  el.innerHTML = html;
+  log.appendChild(el);
+  scroll(stick);
+}
+function streamText(t) {
+  if (!streamEl) { streamEl = addRow("assistant", ""); streamRaw = ""; }
+  streamRaw += t;
+  const stick = atBottom();
+  streamEl.innerHTML = render(streamRaw);
+  scroll(stick);
+}
+function endStream() { streamEl = null; streamRaw = ""; }
+async function post(path, body) {
+  const res = await fetch(path, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) addNote("error: " + esc(await res.text()), "err");
+  return res;
+}
+function card(html) {
+  hideHero();
+  const el = document.createElement("div");
+  el.className = "card";
+  el.innerHTML = html;
+  log.appendChild(el);
+  scroll(true);
+  return el;
+}
+const MODE_LABEL = {
+  "default": "Ask first", "accept-edits": "Accept edits",
+  "plan": "Plan (read only)", "bypass": "Full access",
+};
+function refreshState() {
+  fetch("/state").then((r) => r.json()).then((s) => {
+    var saved = s.delegated && s.delegated.calls
+      ? " · ⇢ " + (s.delegated.contextTokensSaved >= 1000
+          ? (s.delegated.contextTokensSaved / 1000).toFixed(1) + "k"
+          : s.delegated.contextTokensSaved) + " saved"
+      : "";
+    meter.textContent = s.usage.requests + " calls · " + s.usage.inputTokens + " in · " +
+      s.usage.outputTokens + " out" + saved;
+    modeDd.setValue(s.mode);
+    modePill.textContent = MODE_LABEL[s.mode] || s.mode;
+    modePill.className = "pill" + (s.mode === "bypass" || s.mode === "accept-edits" ? " on" : "");
+    const ctx = s.contextTokens || 0;
+    ctxPill.textContent = "context " + (ctx >= 1000 ? (ctx / 1000).toFixed(1) + "k" : ctx);
+    sendBtn.disabled = s.busy;
+    const base = String(s.cwd).split("/").filter(Boolean).pop() || s.cwd;
+    document.getElementById("projName").textContent = base;
+    document.getElementById("projLabel").textContent = base;
+    document.getElementById("heroName").textContent = base;
+    document.getElementById("cwd").textContent = s.cwd;
+    document.title = "9th Protocol - " + base;
+    if (s.vault) {
+      document.getElementById("vaultWrap").hidden = false;
+      document.getElementById("vault").textContent = s.vault;
+    }
+    if (s.skills && s.skills.length) {
+      document.getElementById("skillsWrap").hidden = false;
+      document.getElementById("skills").innerHTML =
+        s.skills.map((n) => '<span class="pill">/' + esc(n) + "</span>").join("");
+    }
+    if (s.mcp && s.mcp.length) {
+      document.getElementById("mcpWrap").hidden = false;
+      document.getElementById("mcp").innerHTML =
+        s.mcp.map((n) => '<span class="pill">' + esc(n) + "</span>").join("");
+    }
+    if (!modelDd.count && s.models && s.models.length) {
+      modelDd.setOptions(s.models.map((id) => ({ value: id, label: id })));
+    }
+    modelDd.setValue(s.model);
+  }).catch(() => {});
+}
+const es = new EventSource("/events");
+es.onmessage = (e) => {
+  const ev = JSON.parse(e.data);
+  switch (ev.type) {
+    case "text_delta": streamText(ev.text); break;
+    case "model_selected":
+      endStream();
+      addNote("auto → <b>" + esc(ev.model) + "</b> (" + esc(ev.reason) + ")");
+      break;
+    case "compacted":
+      endStream();
+      addNote("compacted context ~" + ev.beforeTokens + " → ~" + ev.afterTokens + " tokens");
+      break;
+    case "tool_start": endStream(); addTool(ev.summary); break;
+    case "tool_end":
+      if (ev.isError) addTool((ev.output || "").split("\\n")[0].slice(0, 160), "err");
+      break;
+    case "permission_denied": endStream(); addNote("denied: " + esc(ev.summary), "warn"); break;
+    case "turn_end": endStream(); refreshState(); break;
+    case "error": endStream(); addNote("error: " + esc(ev.message), "err"); break;
+    case "busy":
+      sendBtn.disabled = ev.value;
+      hint.textContent = ev.value ? "working…" : "";
+      if (!ev.value) refreshState();
+      break;
+    case "permission_request": {
+      const el = card('<div class="q">' + esc(ev.summary) + "</div>" +
+        '<div class="acts"><button class="btn" data-a="1">Allow</button>' +
+        '<button class="btn ghost" data-a="0">Deny</button></div>');
+      el.querySelectorAll("button").forEach((b) => b.addEventListener("click", () => {
+        post("/permission", { id: ev.id, allow: b.dataset.a === "1" });
+        el.remove();
+      }));
+      break;
+    }
+    case "ask_request": {
+      const opts = (ev.options || []).map((o) =>
+        '<button class="btn ghost" data-v="' + esc(o) + '">' + esc(o) + "</button>").join("");
+      const el = card('<div class="q">' + esc(ev.question) + "</div>" +
+        '<div class="acts">' + opts + "</div>" +
+        '<div style="display:flex;gap:8px;margin-top:12px;">' +
+        '<input id="ans" style="flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;" placeholder="type an answer" />' +
+        '<button class="btn" data-send="1">Reply</button></div>');
+      const send = (v) => { post("/answer", { id: ev.id, answer: v }); el.remove(); };
+      el.querySelectorAll("[data-v]").forEach((b) =>
+        b.addEventListener("click", () => send(b.dataset.v)));
+      el.querySelector("[data-send]").addEventListener("click", () =>
+        send(el.querySelector("#ans").value));
+      break;
+    }
+  }
+};
+es.onerror = () => { hint.textContent = "reconnecting…"; };
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const msg = input.value.trim();
+  if (!msg || sendBtn.disabled) return;
+  addRow("user", msg);
+  post("/send", { message: msg });
+  input.value = "";
+  input.style.height = "auto";
+});
+input.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); form.requestSubmit(); }
+});
+input.addEventListener("input", () => {
+  input.style.height = "auto";
+  input.style.height = Math.min(input.scrollHeight, 200) + "px";
+});
+/* ── views ─────────────────────────────────────────────────── */
+const VIEW_TITLE = { session: "Session", usage: "Usage", settings: "Settings" };
+let currentView = "session";
+function showView(name) {
+  currentView = name;
+  for (const v of ["session", "usage", "settings"]) {
+    document.getElementById("view-" + v).hidden = v !== name;
+  }
+  document.querySelectorAll(".srow.nav").forEach((b) =>
+    b.classList.toggle("on", b.dataset.view === name));
+  document.getElementById("viewName").textContent = VIEW_TITLE[name];
+  if (name === "usage") loadUsage();
+  if (name === "settings") loadSettings();
+}
+document.querySelectorAll(".srow.nav").forEach((b) =>
+  b.addEventListener("click", () => showView(b.dataset.view)));
+/* ── sidebar collapse ──────────────────────────────────────── */
+const appEl = document.getElementById("app");
+const expandBtn = document.getElementById("expandBtn");
+function setCollapsed(on) {
+  appEl.classList.toggle("collapsed", on);
+  expandBtn.hidden = !on;
+  try { localStorage.setItem("9p.collapsed", on ? "1" : "0"); } catch { /* private mode */ }
+}
+document.getElementById("collapseBtn").addEventListener("click", () => setCollapsed(true));
+expandBtn.addEventListener("click", () => setCollapsed(false));
+try { if (localStorage.getItem("9p.collapsed") === "1") setCollapsed(true); } catch { /* ignore */ }
+/* ── project switcher ──────────────────────────────────────── */
+/*
+ * window.ninep is injected by the desktop preload. A plain browser (9p serve)
+ * has no way to open a native folder picker, so the control becomes a static
+ * label there rather than a button that cannot do anything.
+ */
+const shell = window.ninep;
+const projBtn = document.getElementById("projBtn");
+const recentMenu = document.getElementById("recentMenu");
+if (!shell) {
+  projBtn.disabled = true;
+  projBtn.style.cursor = "default";
+  projBtn.title = "Run the desktop app to switch projects";
+  projBtn.querySelector(".chev").remove();
+} else {
+  projBtn.addEventListener("click", async (e) => {
+    e.stopPropagation();
+    if (!recentMenu.hidden) { recentMenu.hidden = true; return; }
+    const recent = await shell.recentProjects().catch(() => []);
+    recentMenu.innerHTML = "";
+    for (const p of recent) {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "dd-opt";
+      b.innerHTML = '<span class="tick"></span><span class="txt"></span>';
+      b.querySelector(".txt").textContent = p.split("/").filter(Boolean).pop() || p;
+      b.title = p;
+      b.addEventListener("click", () => { void shell.openProject(p); });
+      recentMenu.appendChild(b);
+    }
+    const open = document.createElement("button");
+    open.type = "button";
+    open.className = "dd-opt";
+    open.innerHTML = '<span class="tick"></span><span class="txt">Open another folder...</span>';
+    open.addEventListener("click", () => { void shell.chooseProject(); });
+    recentMenu.appendChild(open);
+    recentMenu.hidden = false;
+  });
+  document.addEventListener("click", () => { recentMenu.hidden = true; });
+}
+/* ── usage panel ───────────────────────────────────────────── */
+let usageGroup = "model";
+const fmtTok = (n) => (n >= 1e6 ? (n / 1e6).toFixed(1) + "M" : n >= 1000 ? (n / 1000).toFixed(1) + "k" : String(n));
+document.querySelectorAll("#usageTabs .tab").forEach((t) =>
+  t.addEventListener("click", () => {
+    usageGroup = t.dataset.group;
+    document.querySelectorAll("#usageTabs .tab").forEach((x) => x.classList.toggle("on", x === t));
+    loadUsage();
+  }));
+async function loadUsage() {
+  const cards = document.getElementById("usageCards");
+  const tbody = document.querySelector("#usageTable tbody");
+  cards.innerHTML = "";
+  tbody.innerHTML = '<tr><td class="empty-note">loading...</td></tr>';
+  const me = await fetch("/me").then((r) => r.json()).catch(() => null);
+  if (!me || me.byok) {
+    cards.innerHTML = '<div class="statcard"><div class="k">Mode</div><div class="v">BYOK</div></div>';
+    tbody.innerHTML = '<tr><td class="empty-note">Usage is not metered on your own OpenRouter key.</td></tr>';
+    return;
+  }
+  const lim = me.limits || {};
+  const card = (k, v, sub, spent, cap) => {
+    const pct = cap > 0 ? Math.min(100, (spent / cap) * 100) : null;
+    return '<div class="statcard"><div class="k">' + k + '</div><div class="v">' + v +
+      (sub ? ' <small>' + sub + "</small>" : "") + "</div>" +
+      (pct === null ? "" : '<div class="meterbar' + (pct > 80 ? " hot" : "") +
+        '"><div style="width:' + pct + '%"></div></div>') + "</div>";
+  };
+  cards.innerHTML =
+    card("Balance", Number(lim.balance ?? 0).toFixed(1), "credits") +
+    card("5 hour window", Number(lim.windowSpent ?? 0).toFixed(1),
+      "/ " + (lim.windowCap ?? 0), lim.windowSpent, lim.windowCap) +
+    card("Weekly", Number(lim.weeklySpent ?? 0).toFixed(1),
+      "/ " + (lim.weeklyCap ?? 0), lim.weeklySpent, lim.weeklyCap) +
+    card("Plan", String(me.user?.plan ?? "?"));
+  const rep = await fetch("/usage?groupBy=" + usageGroup + "&days=30")
+    .then((r) => r.json()).catch(() => null);
+  if (!rep || !rep.buckets) {
+    tbody.innerHTML = '<tr><td class="empty-note">Could not load usage.</td></tr>';
+    return;
+  }
+  if (!rep.buckets.length) {
+    tbody.innerHTML = '<tr><td class="empty-note">Nothing in the last 30 days.</td></tr>';
+    return;
+  }
+  const head = "<tr><th>" + usageGroup + "</th><th>calls</th><th>tokens</th><th>cached</th><th>credits</th></tr>";
+  tbody.innerHTML = head + rep.buckets.map((b) => {
+    const key = usageGroup === "session" && b.key.length > 12 ? b.key.slice(0, 8) + "..." : b.key;
+    return "<tr><td class='mono grow'>" + esc(key) + "</td><td class='mono'>" + b.requests +
+      "</td><td class='mono'>" + fmtTok(b.inputTokens) + " / " + fmtTok(b.outputTokens) +
+      "</td><td class='mono'>" + Math.round(b.cacheHitRate * 100) + "%</td><td class='mono'>" +
+      b.credits.toFixed(2) + "</td></tr>";
+  }).join("");
+}
+/* ── settings panel ────────────────────────────────────────── */
+async function loadSettings() {
+  const s = await fetch("/state").then((r) => r.json()).catch(() => ({}));
+  document.querySelectorAll("#biasSeg button").forEach((b) =>
+    b.classList.toggle("on", b.dataset.bias === s.bias));
+  document.querySelectorAll("#modeSeg button").forEach((b) =>
+    b.classList.toggle("on", b.dataset.mode === s.mode));
+  const me = await fetch("/me").then((r) => r.json()).catch(() => null);
+  const row = (k, v, mono) =>
+    '<div class="r"><div class="k">' + k + '</div><div class="v' + (mono ? " mono" : "") +
+    '">' + esc(v) + "</div></div>";
+  document.getElementById("accountKv").innerHTML = !me || me.byok
+    ? row("Auth", "BYOK, your own OpenRouter key") + row("Metering", "none")
+    : row("Email", me.user?.email ?? "?") + row("Plan", me.user?.plan ?? "?") +
+      row("Balance", Number(me.limits?.balance ?? 0).toFixed(2) + " credits");
+  document.getElementById("projectKv").innerHTML =
+    row("Directory", s.cwd ?? "?", true) +
+    row("Vault", s.vault || "not configured, run 9p init", true) +
+    row("Skills", (s.skills && s.skills.length) ? s.skills.map((n) => "/" + n).join(", ") : "none") +
+    row("MCP servers", (s.mcp && s.mcp.length) ? s.mcp.join(", ") : "none") +
+    row("Context", (s.contextTokens || 0) + " tokens");
+}
+document.querySelectorAll("#biasSeg button").forEach((b) =>
+  b.addEventListener("click", () => {
+    post("/config", { bias: b.dataset.bias });
+    document.querySelectorAll("#biasSeg button").forEach((x) => x.classList.toggle("on", x === b));
+  }));
+document.querySelectorAll("#modeSeg button").forEach((b) =>
+  b.addEventListener("click", () => {
+    post("/config", { mode: b.dataset.mode });
+    document.querySelectorAll("#modeSeg button").forEach((x) => x.classList.toggle("on", x === b));
+    modeDd.setValue(b.dataset.mode);
+  }));
+document.getElementById("newBtn").addEventListener("click", () => {
+  post("/send", { message: "/clear" });
+  log.querySelectorAll(".row,.tool,.note,.card").forEach((n) => n.remove());
+  if (hero) hero.style.display = "";
+  refreshState();
+});
+document.getElementById("docsBtn").addEventListener("click", () => {
+  window.open("https://docs.9thprotocol.com", "_blank");
+});
+refreshState();
+setInterval(refreshState, 5000);
+</script>
+</body>
+</html>`;
+}
+//# sourceMappingURL=webui.js.map