@sksoftofficial/ocduet 0.2.1

package/src/plugin/ocduet-sidebar.jsx

@@ -0,0 +1,309 @@
+/** @jsxImportSource @opentui/solid */
+import { Show, createSignal, onCleanup } from "solid-js";
+import os from "node:os";
+import fs from "node:fs";
+import path from "node:path";
+import crypto from "node:crypto";
+import { pathToFileURL } from "node:url";
+
+const PLUGIN_ID = "ocduet-sidebar";
+const SIDEBAR_ORDER = 160;
+const POLL_MS = 2000;
+
+const XDG_DATA = process.env.XDG_DATA_HOME && path.isAbsolute(process.env.XDG_DATA_HOME)
+  ? process.env.XDG_DATA_HOME
+  : path.join(os.homedir(), ".local", "share");
+// Filled by the installer so different opencode XDG profiles share one bridge.
+const INSTALLED_DATA_DIR = null;
+const DATA_DIR = INSTALLED_DATA_DIR || process.env.OCDUET_DATA_DIR || path.join(XDG_DATA, "ocduet");
+const TOKEN_PATH = path.join(DATA_DIR, "token");
+const QR_LIB_PATH = path.join(DATA_DIR, "qrcodegen.js");
+
+function slug(directory) {
+  const base = path.basename(String(directory || "").replace(/\/+$/, "")) || "project";
+  const safe = base.toLowerCase().replace(/[^a-z0-9._-]+/g, "-").replace(/^[-.]+|[-.]+$/g, "") || "project";
+  const hash = crypto.createHash("sha256").update(String(directory || "")).digest("hex").slice(0, 8);
+  return `${safe}-${hash}`;
+}
+
+function pidAlive(pid) {
+  if (!pid || typeof pid !== "number") return false;
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function readToken() {
+  try {
+    return fs.readFileSync(TOKEN_PATH, "utf8").trim() || null;
+  } catch {
+    return null;
+  }
+}
+
+function regenerateToken() {
+  const t = crypto.randomBytes(32).toString("base64url");
+  fs.mkdirSync(DATA_DIR, { recursive: true });
+  fs.writeFileSync(TOKEN_PATH, t + "\n", { mode: 0o600 });
+  try { fs.chmodSync(TOKEN_PATH, 0o600); } catch {}
+  return t;
+}
+
+function buildUrl(state, token) {
+  const ip = state?.lanIp;
+  const port = state?.port;
+  if (!ip || !port || !token) return null;
+  return `https://${ip}:${port}/pair#t=${token}`;
+}
+
+// Braille-dot QR: 2x4 modules per char -> roughly half the width/height of the
+// half-block rendering, near-square modules. Lines are left-padded to center
+// the code inside the sidebar panel.
+const QR_PAD = 6;
+const BRAILLE_DOTS = [[0x01, 0x08], [0x02, 0x10], [0x04, 0x20], [0x40, 0x80]];
+
+function renderBraille(qr) {
+  const at = (x, y) => (y < qr.size && x < qr.size && qr.data[y][x] ? 1 : 0);
+  const lines = [];
+  for (let y = 0; y < qr.size; y += 4) {
+    let line = "";
+    for (let x = 0; x < qr.size; x += 2) {
+      let bits = 0;
+      for (let r = 0; r < 4; r++) {
+        for (let c = 0; c < 2; c++) {
+          if (at(x + c, y + r)) bits |= BRAILLE_DOTS[r][c];
+        }
+      }
+      line += String.fromCharCode(0x2800 + bits);
+    }
+    lines.push(" ".repeat(QR_PAD) + line);
+  }
+  return lines;
+}
+
+const stores = new WeakMap();
+
+function createStore(api) {
+  const [state, setState] = createSignal(null);
+  const [showQr, setShowQr] = createSignal(false);
+  const [qrLines, setQrLines] = createSignal(null);
+  const [error, setError] = createSignal(null);
+  let qrModule = null;
+  let currentUrl = null;
+  let refCount = 0;
+  let disposed = false;
+
+  const stateFile = path.join(DATA_DIR, "state.json");
+
+  import(pathToFileURL(QR_LIB_PATH).href)
+    .then((m) => {
+      if (!disposed) {
+        qrModule = m;
+        if (showQr()) refreshQr();
+      }
+    })
+    .catch(() => {});
+
+  const renderQr = (url) => {
+    currentUrl = url;
+    if (!url || !qrModule) {
+      setQrLines(null);
+      setError(url ? "Loading QR code…" : "Waiting for a LAN connection…");
+      return;
+    }
+    try {
+      const qr = qrModule.encode(url, { border: 6, ecc: "L" });
+      setQrLines(renderBraille(qr));
+      setError(null);
+    } catch (err) {
+      setQrLines(null);
+      setError(String(err?.message || err));
+    }
+  };
+
+  const refreshQr = () => {
+    const url = buildUrl(state(), readToken());
+    renderQr(url ?? null);
+  };
+
+  const poll = () => {
+    if (disposed) return;
+    let next = null;
+    try {
+      next = JSON.parse(fs.readFileSync(stateFile, "utf8"));
+    } catch {
+      next = null;
+    }
+    if (next && !pidAlive(next.pid)) next = null;
+    const prev = state();
+    setState(next);
+    if (showQr() && buildUrl(next, readToken()) !== currentUrl) refreshQr();
+    // auto-close the QR once a phone has paired (0 -> 1 client transition)
+    if (showQr() && (prev?.clients?.length ?? 0) === 0 && (next?.clients?.length ?? 0) > 0) setShowQr(false);
+  };
+
+  const interval = setInterval(poll, POLL_MS);
+  poll();
+
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    clearInterval(interval);
+    stores.delete(api);
+  };
+
+  const store = {
+    state,
+    showQr,
+    qrLines,
+    error,
+    toggleQr: () => {
+      if (!showQr()) {
+        poll();
+        refreshQr();
+        setShowQr(true);
+      } else {
+        setShowQr(false);
+      }
+    },
+    newToken: () => {
+      regenerateToken();
+      poll();
+      refreshQr();
+      setShowQr(true);
+    },
+    retain: () => {
+      refCount += 1;
+      return store;
+    },
+    release: () => {
+      refCount -= 1;
+      if (refCount <= 0) dispose();
+    },
+  };
+  return store;
+}
+
+function acquireStore(api) {
+  const existing = stores.get(api);
+  if (existing) return existing.retain();
+  const next = createStore(api).retain();
+  stores.set(api, next);
+  return next;
+}
+
+function ConnectPanel(props) {
+  const store = acquireStore(props.api);
+  onCleanup(() => store.release());
+  const theme = () => props.api.theme.current;
+  const state = store.state;
+  const statusColor = () => {
+    const s = state();
+    if (!s || !s.port) return theme().error;
+    if ((s.clients?.length ?? 0) > 0) return theme().success;
+    return theme().warning;
+  };
+  const statusText = () => {
+    const s = state();
+    if (!s || !s.port) return "offline";
+    const n = s.clients?.length ?? 0;
+    const inst = s.instances?.length ?? 0;
+    const base = n > 0 ? `connected (${n})` : "listening";
+    return inst > 0 ? `${base} · ${inst} opencode` : base;
+  };
+
+  return (
+    <box gap={0}>
+      <box flexDirection="row" gap={1}>
+        <text fg={theme().text}>
+          <b>Duet</b>
+        </text>
+        <text fg={statusColor()} wrapMode="none">
+          {`● ${statusText()}`}
+        </text>
+      </box>
+
+      <Show
+        when={state()?.port}
+        fallback={
+          <text fg={theme().textMuted} wrapMode="none">
+            bridge not running
+          </text>
+        }
+      >
+        <box flexDirection="row" gap={1}>
+          <text fg={theme().textMuted} wrapMode="none">
+            {state().lanIp ? `${state().lanIp}:${state().port}` : "waiting for network"}
+          </text>
+          <text
+            fg={store.showQr() ? theme().textMuted : theme().text}
+            wrapMode="none"
+            onMouseDown={() => store.toggleQr()}
+          >
+            {store.showQr() ? "hide" : "connect"}
+          </text>
+          <Show when={store.showQr()}>
+            <text fg={theme().textMuted} wrapMode="none" onMouseDown={() => store.newToken()}>
+              new token
+            </text>
+          </Show>
+        </box>
+      </Show>
+
+      <Show when={store.showQr()}>
+        <Show
+          when={store.qrLines()}
+          fallback={
+            <text fg={theme().textMuted} wrapMode="none">
+              {store.error() ?? "generating…"}
+            </text>
+          }
+        >
+          <box gap={0}>
+            {(store.qrLines() ?? []).map((line) => (
+              <text fg={theme().text} wrapMode="none">
+                {line}
+              </text>
+            ))}
+            <text fg={theme().textMuted} wrapMode="none">
+              scan with phone camera
+            </text>
+            <Show when={state()?.words}>
+              <text fg={theme().text} wrapMode="none">
+                {`words: ${(state().words ?? []).join(" ")}`}
+              </text>
+              <text fg={theme().textMuted} wrapMode="none">
+                match them on the phone before pairing
+              </text>
+            </Show>
+          </box>
+        </Show>
+      </Show>
+    </box>
+  );
+}
+
+function registerSlots(api) {
+  api.slots.register({
+    order: SIDEBAR_ORDER,
+    slots: {
+      sidebar_content(_ctx, _props) {
+        return <ConnectPanel api={api} />;
+      },
+    },
+  });
+}
+
+const tui = async (api) => {
+  registerSlots(api);
+};
+
+const pluginModule = {
+  id: PLUGIN_ID,
+  tui,
+};
+
+export default pluginModule;

package/src/plugin/web/app.css

@@ -0,0 +1,290 @@
+:root {
+  color-scheme: dark;
+  --bg: #151716;
+  --sidebar: #111312;
+  --surface: #1c1f1d;
+  --surface-hover: #252a26;
+  --line: #2b302c;
+  --fg: #e8ece7;
+  --muted: #949e96;
+  --accent: #b8e5c7;
+  --ok: #a9d9b6;
+  --warn: #e2bf83;
+  --err: #eaa59d;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+}
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.6; overscroll-behavior: none; }
+body { display: flex; height: 100dvh; overflow: hidden; }
+button, input, textarea { font: inherit; }
+button { color: inherit; cursor: pointer; touch-action: manipulation; }
+button, input, textarea { -webkit-tap-highlight-color: transparent; }
+button { border: 0; }
+button:disabled { cursor: default; }
+button, button:focus, button:focus-visible { outline: none !important; }
+input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
+button, a { transition: background .15s, color .15s; }
+svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
+.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+::selection { background: #43634c; color: white; }
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-thumb { background: #39413b; border-radius: 5px; }
+#sessions { width: 288px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid var(--line); padding: 0 16px; }
+.brand { height: 88px; display: flex; align-items: center; gap: 10px; padding: 0 8px; flex-shrink: 0; font-size: 25px; letter-spacing: -1.2px; font-weight: 650; }
+.brand-period { color: var(--accent); }
+.brand-mark { width: 29px; height: 30px; display: inline-flex; gap: 4px; align-items: center; justify-content: center; }
+.brand-mark i { width: 9px; height: 21px; background: var(--accent); border-radius: 2px; transform: skewY(-12deg); }
+.brand-mark i + i { transform: skewY(12deg); height: 16px; }
+.brand-tag { margin-left: auto; font-size: 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; letter-spacing: 1px; padding: 3px 5px; font-weight: 500; }
+.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: inline-block; flex-shrink: 0; }
+.status-dot.on { background: #5fb877; }
+.status-dot.wait, .status-dot.recon { background: var(--warn); }
+.status-dot.off { background: var(--err); }
+.sync-status { display: inline-flex; align-items: center; gap: 6px; }
+.search { display: flex; align-items: center; gap: 8px; margin: 0 6px 10px; color: var(--muted); }
+.search svg { width: 16px; height: 16px; }
+.search input { width: 100%; min-width: 0; background: transparent; border: 0; color: var(--fg); font-size: 12px; padding: 4px 0; }
+input::placeholder, textarea::placeholder { color: #8b958d; opacity: 1; }
+kbd { font: 10px ui-monospace, monospace; }
+.search kbd { border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
+.new-session { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 12px); margin: 12px 6px 14px; padding: 11px; background: #252e27; color: var(--fg); border: 0; border-radius: 10px; font: 600 13px Inter, -apple-system, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
+.new-session:focus { outline: none; }
+.new-session svg { width: 15px; height: 15px; color: var(--accent); }
+.new-session:active { background: #2c372f; }
+.new-session:disabled { opacity: 0.55; cursor: default; }
+.section-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: 1.4px; padding: 0 10px 12px; }
+#session-count { letter-spacing: 0; font-size: 10px; }
+#session-list { flex: 1; overflow: auto; min-height: 0; margin: 0 -5px; padding: 0 5px 20px; }
+.session { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; margin: 0 0 5px; }
+.session.active { background: #252e27; border-color: #344538; }
+.session-icon { color: #839387; width: 16px; height: 16px; margin-top: 3px; }
+.session.active .session-icon { color: var(--accent); }
+.session-content { min-width: 0; flex: 1; }
+.session .name { font-weight: 450; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c4cdc6; }
+.session.active .name { color: #e1efe4; }
+.session .meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; margin-top: 2px; }
+.session .meta .project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 145px; }
+.session .meta time { margin-left: auto; white-space: nowrap; }
+.session .dot { display: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
+.session.busy .dot { display: inline-block; animation: pulse 1.3s infinite; }
+.session.offline .name { color: var(--muted); }
+.session.offline .session-icon { color: var(--muted); }
+.session .meta .offline-tag { color: var(--muted); opacity: 0.8; }
+.list-empty { padding: 22px 12px; font-size: 12px; color: var(--muted); }
+.list-empty strong { display: block; color: #c1cbc3; font-weight: 500; margin-bottom: 5px; }
+#workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+#topbar { min-height: 88px; padding: 18px 34px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
+.header-icon { display: grid; place-items: center; width: 35px; height: 35px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; }
+.header-icon svg { width: 17px; height: 17px; }
+#title { min-width: 0; flex: 1; }
+#project-name { display: block; font-size: 13px; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+#session-subtitle { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
+.badge { flex-shrink: 0; display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--line); padding: 4px 9px; border-radius: 6px; font-size: 10px; color: var(--muted); }
+.badge::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
+.badge.on { color: var(--ok); background: #a9d9b607; border-color: #344337; }
+.badge.wait { color: var(--warn); }
+.badge.off { color: var(--muted); }
+.icon-button { display: grid; place-items: center; width: 40px; height: 40px; background: transparent; border-radius: 7px; color: var(--muted); }
+#sessions-btn, #close-sessions { display: none; }
+#main { flex: 1; overflow-y: auto; min-height: 0; padding: 36px max(30px, calc((100% - 790px) / 2)) 6px; position: relative; }
+.empty { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 0; }
+.connection-art { display: flex; align-items: center; justify-content: center; margin-bottom: 38px; height: 66px; }
+.device { display: grid; place-items: center; border: 1px solid #4b6150; background: linear-gradient(140deg, #263029, #1b201d); color: var(--accent); }
+.desktop { width: 76px; height: 55px; border-radius: 9px; position: relative; transform: rotate(-7deg); }
+.desktop::after { content: ""; width: 34px; height: 1px; background: #4b6150; position: absolute; bottom: -7px; }
+.desktop svg { width: 27px; height: 27px; }
+.phone { width: 38px; height: 62px; border-radius: 9px; transform: rotate(8deg); }
+.phone .brand-mark { transform: scale(.65); }
+.connection-line { display: flex; gap: 7px; padding: 0 19px; }
+.connection-line i { width: 3px; height: 3px; background: #7a9a82; border-radius: 50%; }
+.eyebrow { font-size: 9px; letter-spacing: 2px; color: #a2b5a7; font-weight: 500; }
+h1 { font-size: clamp(25px, 2.6vw, 34px); font-weight: 500; letter-spacing: -1.1px; line-height: 1.25; margin: 14px 0; }
+.empty > p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; max-width: 400px; }
+.empty-note { color: var(--muted); font-size: 10px; margin-top: 27px; display: flex; align-items: center; gap: 7px; }
+.empty-note .status-dot { background: #87aa90; width: 4px; height: 4px; }
+.pairing-steps { text-align: left; margin-top: 27px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 10px; background: #191c1a; max-width: 100%; }
+.pairing-steps > div { display: flex; align-items: center; gap: 16px; }
+.pairing-steps > div > span { color: #7e9986; font: 10px ui-monospace, monospace; }
+.pairing-steps p { font-size: 11px; color: var(--muted); }
+.pairing-steps strong { font-weight: 500; color: #d4ded6; }
+.msg { margin-bottom: 28px; min-width: 0; }
+.msg .role { display: flex; align-items: center; gap: 8px; color: #c9d5cc; font-size: 11px; font-weight: 550; margin-bottom: 10px; }
+.msg .role::before { content: "›_"; font: 10px ui-monospace, monospace; color: var(--accent); display: grid; place-items: center; width: 23px; height: 23px; background: #29362c; border: 1px solid #3a4d3e; border-radius: 6px; }
+.msg.user .role::before { content: "Y"; background: #282b29; color: #c4cec6; border-color: #3e4540; font-size: 9px; }
+.msg .role time { color: var(--muted); font-size: 10px; font-weight: 400; margin-left: 2px; }
+.msg .bubble { color: #d5ddd6; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
+.msg.user .bubble { padding: 15px 18px; border: 1px solid #343d36; border-radius: 3px 12px 12px 12px; background: #222924; }
+.msg .bubble + .bubble { margin-top: 12px; }
+.msg pre { background: #101311; border: 1px solid var(--line); border-radius: 8px; padding: 15px; overflow-x: auto; white-space: pre; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
+.msg pre[data-lang]:not([data-lang=""])::before { content: attr(data-lang); display: block; color: #8fba9b; font-size: 10px; margin-bottom: 12px; }
+.msg code { background: #29322b; color: #c3dfcb; padding: 2px 5px; border-radius: 4px; font: .88em ui-monospace, monospace; }
+details.tool { margin: 9px 0; border: 1px solid var(--line); background: #191d1a; border-radius: 7px; padding: 10px 13px; color: var(--muted); }
+details.tool summary { cursor: pointer; font: 11px/1.7 ui-monospace, monospace; overflow-wrap: anywhere; }
+.tool-title { color: #c2d4c6; margin-right: 8px; }
+.tool-status { color: #9dbca5; margin-right: 8px; font-size: 10px; }
+.tool-detail { color: var(--muted); }
+details.tool pre { margin: 12px 0 0; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
+.part-step { color: var(--muted); font-size: 11px; margin: 12px 0; }
+#activity { display: flex; align-items: center; gap: 11px; font-size: 12px; color: var(--accent); min-height: 40px; margin: 0 0 3px; }
+#activity-time { font: 10px ui-monospace, monospace; color: var(--muted); }
+.loop-loader { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
+.loop-loader i { width: 4px; height: 13px; border-radius: 1px; background: var(--accent); animation: loop 1.15s ease-in-out infinite; }
+.loop-loader i:nth-child(2) { animation-delay: .12s; }
+.loop-loader i:nth-child(3) { animation-delay: .24s; }
+.loop-loader i:nth-child(4) { animation-delay: .36s; }
+.loop-loader i:nth-child(5) { animation-delay: .48s; }
+#stop-btn { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 10px; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; }
+.stop-square { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 1px; }
+@keyframes loop { 0%, 70%, 100% { transform: scaleY(.4); opacity: .35; } 35% { transform: scaleY(1); opacity: 1; } }
+@keyframes pulse { 50% { opacity: .35; } }
+#composer { padding: 3px max(30px, calc((100% - 790px) / 2)) 20px; flex-shrink: 0; }
+.composer-box { border: 1px solid #3e4940; background: #1d221e; border-radius: 12px; padding: 15px 15px 11px; box-shadow: 0 4px 18px #00000015; transition: border-color .15s; }
+.composer-box:focus-within { border-color: #7eab89; }
+#input { display: block; width: 100%; background: transparent; color: var(--fg); border: 0; outline: none; padding: 0 2px; font: 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; resize: none; max-height: 25dvh; min-height: 48px; }
+#input:disabled { opacity: .6; }
+.composer-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
+.composer-context { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; min-width: 0; }
+.composer-context svg { width: 14px; height: 14px; }
+#composer-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#send-btn { display: grid; place-items: center; margin-left: auto; width: 33px; height: 33px; border-radius: 8px; background: var(--accent); color: #233d2b; flex-shrink: 0; }
+#send-btn:disabled { background: #343e36; color: #78897d; }
+.composer-caption { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; color: var(--muted); padding: 11px 3px 0; }
+.composer-caption kbd { font-size: 11px; }
+#toast { position: fixed; bottom: 185px; left: 50%; transform: translateX(-50%); max-width: min(90vw, 450px); background: #2b352e; border: 1px solid #546959; color: var(--fg); border-radius: 9px; padding: 12px 18px; font-size: 12px; box-shadow: 0 5px 30px #0004; z-index: 60; }
+@media (min-width: 1500px) { #main { padding-top: 50px; } }
+@media (max-width: 900px) { #sessions { width: 252px; padding: 0 12px; } .brand-tag { display: none; } #topbar { padding-inline: 22px; } #main, #composer { padding-inline: 24px; } .keyboard-hint { display: none; } }
+@media (max-width: 719px) {
+  #sessions { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(86vw, 310px); padding-top: env(safe-area-inset-top); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease; }
+  body.sessions-open #sessions { transform: translateX(0); visibility: visible; }
+  #sidebar-backdrop { position: fixed; inset: 0; background: #0009; backdrop-filter: blur(3px); z-index: 45; }
+  #sessions-btn, #close-sessions { display: grid; }
+  #close-sessions { margin-left: auto; }
+  .brand { height: 76px; }
+  #topbar { min-height: calc(72px + env(safe-area-inset-top)); padding: calc(12px + env(safe-area-inset-top)) 16px 12px 8px; gap: 8px; }
+  .header-icon { display: none; }
+  #project-name { font-size: 12px; }
+  #session-subtitle { font-size: 10px; }
+  .badge { font-size: 9px; padding: 3px 7px; }
+  #main { padding: 24px 20px 4px; }
+  .empty { padding: 20px 0; }
+  .connection-art { margin-bottom: 28px; transform: scale(.9); }
+  h1 { font-size: 27px; max-width: 280px; }
+  .empty > p { font-size: 12px; max-width: 290px; }
+  .desktop-break { display: none; }
+  .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
+  .pairing-steps { padding: 5px 12px; margin-top: 22px; }
+  .pairing-steps p { font-size: 10px; }
+  .empty-note { font-size: 9px; margin-top: 22px; }
+  #composer { padding: 2px 12px calc(12px + env(safe-area-inset-bottom)); }
+  .composer-box { padding: 12px 12px 9px; }
+  #input { min-height: 42px; }
+  .composer-caption { justify-content: center; padding-top: 8px; font-size: 10px; }
+  #send-btn { width: 36px; height: 36px; }
+  .msg .bubble { font-size: 14px; }
+}
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
+
+#questions, #permissions { display: grid; gap: 10px; margin: 0 0 3px; }
+#questions:empty, #permissions:empty { display: none; }
+.permission { border: 1px solid #4b6150; background: linear-gradient(140deg, #263029, #1b201d); border-radius: 10px; padding: 12px 14px; }
+.permission-head { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
+.permission-head svg { width: 15px; height: 15px; }
+.permission-title { margin: 6px 0 2px; font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
+.permission-pattern { font: 11px ui-monospace, monospace; color: var(--accent); background: #29362c; border: 1px solid #3a4d3e; border-radius: 6px; padding: 3px 7px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+.permission-actions { display: flex; gap: 8px; margin-top: 11px; }
+.permission-actions button { flex: 1; padding: 9px 10px; border-radius: 7px; font-size: 12px; background: var(--surface-hover); color: var(--fg); }
+.permission-actions .allow { background: var(--accent); color: #151716; font-weight: 600; }
+.permission-actions .deny { background: transparent; border: 1px solid #513a36; color: var(--err); }
+.permission-actions button:disabled { opacity: .5; }
+.question-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
+.question-option { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 11px; border-radius: 8px; font-size: 12.5px; color: var(--fg); background: var(--surface-hover); border: 1px solid var(--line); }
+.question-option small { color: var(--muted); font-size: 11px; }
+.question-option.selected { border-color: var(--accent); background: #223028; }
+.question-option:disabled { opacity: .5; }
+.question-custom { margin-top: 8px; }
+.question-custom-btn { padding: 7px 10px; border-radius: 7px; font-size: 12px; background: transparent; border: 1px dashed var(--line); color: var(--muted); }
+.question-custom-row { display: flex; gap: 8px; }
+.question-custom-row input { flex: 1; min-width: 0; background: var(--surface-hover); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--fg); }
+.question-custom-row .allow { padding: 8px 14px; border-radius: 8px; font-size: 12px; background: var(--accent); color: #151716; font-weight: 600; }
+.session.pending .dot { display: inline-block; background: var(--warn); }
+
+.pills { display: inline-flex; gap: 6px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+.pills::-webkit-scrollbar { display: none; }
+.pill { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 9px; border-radius: 999px; background: var(--surface-hover); border: 1px solid var(--line); font-size: 11px; color: var(--fg); max-width: 150px; flex-shrink: 0; }
+.pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pill svg { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; }
+.pill:disabled { opacity: .45; }
+.pill.auto { border-color: #4b6150; color: var(--accent); }
+.pill.auto svg { color: var(--accent); }
+.modal-backdrop { position: fixed; inset: 0; background: rgb(10 12 10 / .65); z-index: 50; display: grid; place-items: center; padding: 20px; }
+.modal { width: min(480px, 100%); max-height: min(72dvh, 560px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
+.modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px 16px; }
+.modal-title { font-size: 13px; font-weight: 600; }
+.modal-head .icon-button { margin-left: auto; width: 32px; height: 32px; }
+.modal-search { margin: 4px 8px 10px; padding: 12px 10px 11px; background: #1d221e; border: 1px solid #3e4940; border-radius: 12px; color: var(--fg); font-size: 13px; width: calc(100% - 16px); transition: border-color .15s; }
+.modal-search:focus { outline: none; border-color: var(--accent); }
+.modal-body { overflow-y: auto; padding: 0 8px 12px; }
+.modal-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 12px; }
+.modal-group-label { font-size: 10px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; padding: 10px 10px 4px; }
+.modal-option { display: flex; width: 100%; text-align: left; gap: 10px; align-items: center; padding: 4px 10px; margin-bottom: 8px; border-radius: 9px; font-size: 13px; }
+.modal-option > svg { width: 15px; height: 15px; color: var(--muted); }
+.modal-option.active { background: #a9d9b61c; }
+.modal-option.active .option-title { color: var(--accent); }
+.modal-option.active > svg { color: var(--accent); }
+.option-body { display: grid; min-width: 0; }
+.option-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.modal-option .sub { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.quota-provider { margin-bottom: 14px; }
+.quota-provider:last-child { margin-bottom: 0; }
+.quota-name { font-size: 12px; font-weight: 550; margin-bottom: 6px; }
+.quota-resets { font-size: 11px; color: var(--muted); margin: -2px 0 6px; }
+.quota-error { font-size: 11px; color: var(--muted); }
+.quota-window { margin-bottom: 8px; }
+.quota-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
+.quota-label { font-size: 11px; color: var(--muted); text-transform: capitalize; }
+.quota-pct { font-size: 11px; }
+.quota-pct.ok { color: var(--fg); }
+.quota-pct.warn { color: var(--warn); }
+.quota-pct.low { color: var(--err); }
+.quota-track { height: 4px; border-radius: 2px; background: var(--surface-hover); overflow: hidden; }
+.quota-track i { display: block; height: 100%; border-radius: 2px; transition: width .3s; }
+.quota-track i.ok { background: #5fb877; }
+.quota-track i.warn { background: var(--warn); }
+.quota-track i.low { background: var(--err); }
+.quota-updated { font-size: 10px; color: var(--muted); margin-top: 10px; text-align: center; }
+.quota-instance { margin-bottom: 14px; }
+.quota-instance:last-child { margin-bottom: 0; }
+.quota-inst-name { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 2px; }
+.modal-option .check { margin-left: auto; color: var(--accent); }
+
+#topbar { position: relative; }
+.menu { position: absolute; top: calc(100% + 8px); right: 12px; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 8px 0; z-index: 40; box-shadow: 0 14px 36px rgb(0 0 0 / .5); }
+.menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 4px 10px; margin-bottom: 8px; border-radius: 9px; font-size: 13px; color: var(--fg); }
+.menu button svg { width: 15px; height: 15px; }
+.menu button.danger { color: var(--err); }
+.confirm-text { padding: 6px 10px 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
+.modal-actions { display: flex; gap: 8px; padding: 6px 16px 16px; }
+.modal-actions button { flex: 1; padding: 10px; border-radius: 8px; font-size: 13px; background: var(--surface-hover); color: var(--fg); }
+.modal-actions button:disabled { opacity: .5; }
+.modal-actions .primary-danger { background: var(--err); color: #151716; font-weight: 600; }
+
+.context-pill { gap: 6px; cursor: default; background: none; border: none; padding: 0; color: var(--muted); }
+.ring { width: 16px; height: 16px; transform: rotate(-90deg); flex-shrink: 0; }
+.ring circle { fill: none; stroke-width: 3.2; }
+.ring-bg { stroke: var(--line); }
+.ring-fg { stroke: var(--accent); stroke-dasharray: 50.27; stroke-dashoffset: 50.27; stroke-linecap: round; transition: stroke-dashoffset .3s, stroke .3s; }
+.context-pill.warn .ring-fg { stroke: var(--warn); }
+.context-pill.full .ring-fg { stroke: var(--err); }
+
+@media (hover: hover) {
+  .session:hover { background: #1b1f1c; }
+  .icon-button:hover { background: var(--surface-hover); color: var(--fg); }
+  #stop-btn:hover { background: #362724; color: var(--err); }
+  #send-btn:hover:not(:disabled) { background: #d0f4db; }
+  .modal-option:hover { background: var(--surface-hover); }
+  .menu button:hover { background: var(--surface-hover); }
+  .menu button.danger:hover { background: #362724; }
+}