@poncho-ai/cli 0.2.0

package/dist/chunk-S5R5IZJH.js

@@ -0,0 +1,2056 @@
+// src/web-ui.ts
+import { createHash, randomUUID, timingSafeEqual } from "crypto";
+import { mkdir, readFile, writeFile } from "fs/promises";
+import { basename, dirname, resolve } from "path";
+import { homedir } from "os";
+var DEFAULT_OWNER = "local-owner";
+var SessionStore = class {
+  sessions = /* @__PURE__ */ new Map();
+  ttlMs;
+  constructor(ttlMs = 1e3 * 60 * 60 * 8) {
+    this.ttlMs = ttlMs;
+  }
+  create(ownerId = DEFAULT_OWNER) {
+    const now = Date.now();
+    const session = {
+      sessionId: randomUUID(),
+      ownerId,
+      csrfToken: randomUUID(),
+      createdAt: now,
+      expiresAt: now + this.ttlMs,
+      lastSeenAt: now
+    };
+    this.sessions.set(session.sessionId, session);
+    return session;
+  }
+  get(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) {
+      return void 0;
+    }
+    if (Date.now() > session.expiresAt) {
+      this.sessions.delete(sessionId);
+      return void 0;
+    }
+    session.lastSeenAt = Date.now();
+    return session;
+  }
+  delete(sessionId) {
+    this.sessions.delete(sessionId);
+  }
+};
+var LoginRateLimiter = class {
+  constructor(maxAttempts = 5, windowMs = 1e3 * 60 * 5, lockoutMs = 1e3 * 60 * 10) {
+    this.maxAttempts = maxAttempts;
+    this.windowMs = windowMs;
+    this.lockoutMs = lockoutMs;
+  }
+  attempts = /* @__PURE__ */ new Map();
+  canAttempt(key) {
+    const current = this.attempts.get(key);
+    if (!current) {
+      return { allowed: true };
+    }
+    if (current.lockedUntil && Date.now() < current.lockedUntil) {
+      return {
+        allowed: false,
+        retryAfterSeconds: Math.ceil((current.lockedUntil - Date.now()) / 1e3)
+      };
+    }
+    return { allowed: true };
+  }
+  registerFailure(key) {
+    const now = Date.now();
+    const current = this.attempts.get(key);
+    if (!current || now - current.firstFailureAt > this.windowMs) {
+      this.attempts.set(key, { count: 1, firstFailureAt: now });
+      return { locked: false };
+    }
+    const count = current.count + 1;
+    const next = {
+      ...current,
+      count
+    };
+    if (count >= this.maxAttempts) {
+      next.lockedUntil = now + this.lockoutMs;
+      this.attempts.set(key, next);
+      return { locked: true, retryAfterSeconds: Math.ceil(this.lockoutMs / 1e3) };
+    }
+    this.attempts.set(key, next);
+    return { locked: false };
+  }
+  registerSuccess(key) {
+    this.attempts.delete(key);
+  }
+};
+var parseCookies = (request) => {
+  const cookieHeader = request.headers.cookie ?? "";
+  const pairs = cookieHeader.split(";").map((part) => part.trim()).filter(Boolean);
+  const cookies = {};
+  for (const pair of pairs) {
+    const index = pair.indexOf("=");
+    if (index <= 0) {
+      continue;
+    }
+    const key = pair.slice(0, index);
+    const value = pair.slice(index + 1);
+    try {
+      cookies[key] = decodeURIComponent(value);
+    } catch {
+      cookies[key] = value;
+    }
+  }
+  return cookies;
+};
+var setCookie = (response, name, value, options) => {
+  const segments = [`${name}=${encodeURIComponent(value)}`];
+  segments.push(`Path=${options.path ?? "/"}`);
+  if (typeof options.maxAge === "number") {
+    segments.push(`Max-Age=${Math.max(0, Math.floor(options.maxAge))}`);
+  }
+  if (options.httpOnly) {
+    segments.push("HttpOnly");
+  }
+  if (options.secure) {
+    segments.push("Secure");
+  }
+  if (options.sameSite) {
+    segments.push(`SameSite=${options.sameSite}`);
+  }
+  const previous = response.getHeader("Set-Cookie");
+  const serialized = segments.join("; ");
+  if (!previous) {
+    response.setHeader("Set-Cookie", serialized);
+    return;
+  }
+  if (Array.isArray(previous)) {
+    response.setHeader("Set-Cookie", [...previous, serialized]);
+    return;
+  }
+  response.setHeader("Set-Cookie", [String(previous), serialized]);
+};
+var verifyPassphrase = (provided, expected) => {
+  const providedBuffer = Buffer.from(provided);
+  const expectedBuffer = Buffer.from(expected);
+  if (providedBuffer.length !== expectedBuffer.length) {
+    const zero = Buffer.alloc(expectedBuffer.length);
+    return timingSafeEqual(expectedBuffer, zero) && false;
+  }
+  return timingSafeEqual(providedBuffer, expectedBuffer);
+};
+var getRequestIp = (request) => {
+  return request.socket.remoteAddress ?? "unknown";
+};
+var inferConversationTitle = (text) => {
+  const normalized = text.trim().replace(/\s+/g, " ");
+  if (!normalized) {
+    return "New conversation";
+  }
+  return normalized.length <= 48 ? normalized : `${normalized.slice(0, 48)}...`;
+};
+var renderManifest = (options) => {
+  const name = options?.agentName ?? "Agent";
+  return JSON.stringify({
+    name,
+    short_name: name,
+    description: `${name} \u2014 AI agent powered by AgentL`,
+    start_url: "/",
+    display: "standalone",
+    background_color: "#000000",
+    theme_color: "#000000",
+    icons: [
+      { src: "/icon.svg", sizes: "any", type: "image/svg+xml" },
+      { src: "/icon-192.png", sizes: "192x192", type: "image/png" },
+      { src: "/icon-512.png", sizes: "512x512", type: "image/png" }
+    ]
+  });
+};
+var renderIconSvg = (options) => {
+  const letter = (options?.agentName ?? "A").charAt(0).toUpperCase();
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="96" fill="#000"/>
+  <text x="256" y="256" dy=".35em" text-anchor="middle"
+        font-family="-apple-system,BlinkMacSystemFont,sans-serif"
+        font-size="280" font-weight="700" fill="#fff">${letter}</text>
+</svg>`;
+};
+var renderServiceWorker = () => `
+const CACHE_NAME = "agentl-shell-v1";
+const SHELL_URLS = ["/"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_URLS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+  // Only cache GET requests for the app shell; let API calls pass through
+  if (event.request.method !== "GET" || url.pathname.startsWith("/api/")) {
+    return;
+  }
+  event.respondWith(
+    fetch(event.request)
+      .then((response) => {
+        const clone = response.clone();
+        caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+        return response;
+      })
+      .catch(() => caches.match(event.request))
+  );
+});
+`;
+var renderWebUiHtml = (options) => {
+  const agentInitial = (options?.agentName ?? "A").charAt(0).toUpperCase();
+  const agentName = options?.agentName ?? "Agent";
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+  <meta name="theme-color" content="#000000">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="${agentName}">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon-192.png">
+  <title>${agentName}</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata:400,700">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; overflow: hidden; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+      background: #000;
+      color: #ededed;
+      font-size: 14px;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    button, input, textarea { font: inherit; color: inherit; }
+    .hidden { display: none !important; }
+    a { color: #ededed; }
+
+    /* Auth */
+    .auth {
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 20px;
+      background: #000;
+    }
+    .auth-card {
+      width: min(380px, 90vw);
+      background: #0a0a0a;
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 12px;
+      padding: 32px;
+      display: grid;
+      gap: 20px;
+    }
+    .auth-brand {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .auth-brand svg { width: 20px; height: 20px; }
+    .auth-title {
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: -0.01em;
+    }
+    .auth-text { color: #666; font-size: 13px; line-height: 1.5; }
+    .auth-input {
+      width: 100%;
+      background: #000;
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 6px;
+      color: #ededed;
+      padding: 10px 12px;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .auth-input:focus { border-color: rgba(255,255,255,0.3); }
+    .auth-input::placeholder { color: #555; }
+    .auth-submit {
+      background: #ededed;
+      color: #000;
+      border: 0;
+      border-radius: 6px;
+      padding: 10px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .auth-submit:hover { background: #fff; }
+    .error { color: #ff4444; font-size: 13px; min-height: 16px; }
+    .message-error {
+      background: rgba(255,68,68,0.08);
+      border: 1px solid rgba(255,68,68,0.25);
+      border-radius: 10px;
+      color: #ff6b6b;
+      padding: 12px 16px;
+      font-size: 13px;
+      line-height: 1.5;
+      max-width: 600px;
+    }
+    .message-error strong { color: #ff4444; }
+
+    /* Layout */
+    .shell { height: 100vh; height: 100dvh; height: var(--app-height, 100dvh); display: flex; overflow: hidden; }
+    .sidebar {
+      width: 260px;
+      background: #000;
+      border-right: 1px solid rgba(255,255,255,0.06);
+      display: flex;
+      flex-direction: column;
+      padding: 12px 8px;
+    }
+    .new-chat-btn {
+      background: transparent;
+      border: 0;
+      color: #888;
+      border-radius: 12px;
+      height: 36px;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+    .new-chat-btn:hover { color: #ededed; }
+    .new-chat-btn svg { width: 16px; height: 16px; }
+    .conversation-list {
+      flex: 1;
+      overflow-y: auto;
+      margin-top: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .conversation-item {
+      padding: 7px 28px 7px 10px;
+      border-radius: 12px;
+      cursor: pointer;
+      font-size: 13px;
+      color: #555;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      position: relative;
+      transition: color 0.15s;
+    }
+    .conversation-item:hover { color: #999; }
+    .conversation-item.active {
+      color: #ededed;
+    }
+    .conversation-item .delete-btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      opacity: 0;
+      background: #000;
+      border: 0;
+      color: #444;
+      padding: 0 8px;
+      border-radius: 0 4px 4px 0;
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 1;
+      display: grid;
+      place-items: center;
+      transition: opacity 0.15s, color 0.15s;
+    }
+    .conversation-item:hover .delete-btn { opacity: 1; }
+    .conversation-item.active .delete-btn { background: rgba(0,0,0,1); }
+    .conversation-item .delete-btn::before {
+      content: "";
+      position: absolute;
+      right: 100%;
+      top: 0;
+      bottom: 0;
+      width: 24px;
+      background: linear-gradient(to right, transparent, #000);
+      pointer-events: none;
+    }
+    .conversation-item.active .delete-btn::before {
+      background: linear-gradient(to right, transparent, rgba(0,0,0,1));
+    }
+    .conversation-item .delete-btn:hover { color: #888; }
+    .conversation-item .delete-btn.confirming {
+      opacity: 1;
+      width: auto;
+      padding: 0 8px;
+      font-size: 11px;
+      color: #ff4444;
+      border-radius: 3px;
+    }
+    .conversation-item .delete-btn.confirming:hover {
+      color: #ff6666;
+    }
+    .sidebar-footer {
+      margin-top: auto;
+      padding-top: 8px;
+    }
+    .logout-btn {
+      background: transparent;
+      border: 0;
+      color: #555;
+      width: 100%;
+      padding: 8px 10px;
+      text-align: left;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: color 0.15s, background 0.15s;
+    }
+    .logout-btn:hover { color: #888; }
+
+    /* Main */
+    .main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #000; }
+    .topbar {
+      height: 52px;
+      padding-top: env(safe-area-inset-top, 0px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 500;
+      color: #888;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      position: relative;
+      flex-shrink: 0;
+    }
+    .topbar-title {
+      max-width: 400px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      letter-spacing: -0.01em;
+    }
+    .sidebar-toggle {
+      display: none;
+      position: absolute;
+      left: 12px;
+      background: transparent;
+      border: 0;
+      color: #666;
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: color 0.15s, background 0.15s;
+      font-size: 18px;
+    }
+    .sidebar-toggle:hover { color: #ededed; }
+
+    /* Messages */
+    .messages { flex: 1; overflow-y: auto; padding: 24px 24px; }
+    .messages-column { max-width: 680px; margin: 0 auto; }
+    .message-row { margin-bottom: 24px; display: flex; }
+    .message-row.user { justify-content: flex-end; }
+    .assistant-wrap { display: flex; gap: 12px; max-width: 100%; }
+    .assistant-avatar {
+      width: 24px;
+      height: 24px;
+      background: #ededed;
+      color: #000;
+      border-radius: 6px;
+      display: grid;
+      place-items: center;
+      font-size: 11px;
+      font-weight: 600;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+    .assistant-content {
+      line-height: 1.65;
+      color: #ededed;
+      font-size: 14px;
+      min-width: 0;
+      margin-top: 2px;
+    }
+    .assistant-content p { margin: 0 0 12px; }
+    .assistant-content p:last-child { margin-bottom: 0; }
+    .assistant-content ul, .assistant-content ol { margin: 8px 0; padding-left: 20px; }
+    .assistant-content li { margin: 4px 0; }
+    .assistant-content strong { font-weight: 600; color: #fff; }
+    .assistant-content h2 {
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      margin: 20px 0 8px;
+      color: #fff;
+    }
+    .assistant-content h3 {
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      margin: 16px 0 6px;
+      color: #fff;
+    }
+    .assistant-content code {
+      background: rgba(255,255,255,0.06);
+      border: 1px solid rgba(255,255,255,0.06);
+      padding: 2px 5px;
+      border-radius: 4px;
+      font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
+      font-size: 0.88em;
+    }
+    .assistant-content pre {
+      background: #0a0a0a;
+      border: 1px solid rgba(255,255,255,0.06);
+      padding: 14px 16px;
+      border-radius: 8px;
+      overflow-x: auto;
+      margin: 14px 0;
+    }
+    .assistant-content pre code {
+      background: none;
+      border: 0;
+      padding: 0;
+      font-size: 13px;
+      line-height: 1.5;
+    }
+    .tool-activity {
+      margin-top: 12px;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.03);
+      border-radius: 10px;
+      font-size: 12px;
+      line-height: 1.45;
+      color: #bcbcbc;
+      max-width: 300px;
+    }
+    .tool-activity-disclosure {
+      display: block;
+    }
+    .tool-activity-summary {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: 10px 12px;
+      user-select: none;
+    }
+    .tool-activity-summary::-webkit-details-marker {
+      display: none;
+    }
+    .tool-activity-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #8a8a8a;
+      font-weight: 600;
+    }
+    .tool-activity-caret {
+      margin-left: auto;
+      color: #8a8a8a;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 120ms ease;
+      transform: rotate(0deg);
+    }
+    .tool-activity-caret svg {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
+    .tool-activity-disclosure[open] .tool-activity-caret {
+      transform: rotate(90deg);
+    }
+    .tool-activity-list {
+      display: grid;
+      gap: 6px;
+      padding: 0 12px 10px;
+    }
+    .tool-activity-item {
+      font-family: ui-monospace, "SF Mono", "Fira Code", monospace;
+      background: rgba(255,255,255,0.04);
+      border-radius: 6px;
+      padding: 4px 7px;
+      color: #d6d6d6;
+    }
+    .user-bubble {
+      background: #111;
+      border: 1px solid rgba(255,255,255,0.08);
+      padding: 10px 16px;
+      border-radius: 18px;
+      max-width: 70%;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      gap: 16px;
+      color: #555;
+    }
+    .empty-state .assistant-avatar {
+      width: 36px;
+      height: 36px;
+      font-size: 14px;
+      border-radius: 8px;
+    }
+    .empty-state-text {
+      font-size: 14px;
+      color: #555;
+    }
+    .thinking-indicator {
+      display: inline-block;
+      font-family: Inconsolata, monospace;
+      font-size: 20px;
+      line-height: 1;
+      vertical-align: middle;
+      color: #ededed;
+      opacity: 0.5;
+    }
+
+    /* Composer */
+    .composer {
+      padding: 12px 24px calc(24px + env(safe-area-inset-bottom, 0px));
+      position: relative;
+    }
+    .composer::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 100%;
+      height: 48px;
+      background: linear-gradient(to top, #000 0%, transparent 100%);
+      pointer-events: none;
+    }
+    .composer-inner { max-width: 680px; margin: 0 auto; }
+    .composer-shell {
+      background: #0a0a0a;
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 9999px;
+      display: flex;
+      align-items: center;
+      padding: 4px 6px 4px 18px;
+      transition: border-color 0.15s;
+    }
+    .composer-shell:focus-within { border-color: rgba(255,255,255,0.2); }
+    .composer-input {
+      flex: 1;
+      background: transparent;
+      border: 0;
+      outline: none;
+      color: #ededed;
+      min-height: 40px;
+      max-height: 200px;
+      resize: none;
+      padding: 10px 0 8px;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .composer-input::placeholder { color: #444; }
+    .send-btn {
+      width: 32px;
+      height: 32px;
+      background: #ededed;
+      border: 0;
+      border-radius: 50%;
+      color: #000;
+      cursor: pointer;
+      display: grid;
+      place-items: center;
+      flex-shrink: 0;
+      margin-bottom: 2px;
+      transition: background 0.15s, opacity 0.15s;
+    }
+    .send-btn:hover { background: #fff; }
+    .send-btn:disabled { opacity: 0.2; cursor: default; }
+    .send-btn:disabled:hover { background: #ededed; }
+    .disclaimer {
+      text-align: center;
+      color: #333;
+      font-size: 12px;
+      margin-top: 10px;
+    }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
+
+    /* Mobile */
+    @media (max-width: 768px) {
+      .sidebar {
+        position: fixed;
+        inset: 0 auto 0 0;
+        z-index: 100;
+        transform: translateX(-100%);
+        transition: transform 0.2s ease;
+      }
+      .shell.sidebar-open .sidebar { transform: translateX(0); }
+      .sidebar-toggle { display: grid; place-items: center; }
+      .sidebar-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.6);
+        z-index: 50;
+        backdrop-filter: blur(2px);
+        -webkit-backdrop-filter: blur(2px);
+      }
+      .shell:not(.sidebar-open) .sidebar-backdrop { display: none; }
+      .messages { padding: 16px; }
+      .composer { padding: 8px 16px 16px; }
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.01ms !important;
+      }
+    }
+  </style>
+</head>
+<body data-agent-initial="${agentInitial}" data-agent-name="${agentName}">
+  <div id="auth" class="auth hidden">
+    <form id="login-form" class="auth-card">
+      <div class="auth-brand">
+        <svg viewBox="0 0 24 24" fill="none"><path d="M12 2L2 19.5h20L12 2z" fill="currentColor"/></svg>
+        <h2 class="auth-title">AgentL</h2>
+      </div>
+      <p class="auth-text">Enter the passphrase to continue.</p>
+      <input id="passphrase" class="auth-input" type="password" placeholder="Passphrase" required>
+      <button class="auth-submit" type="submit">Continue</button>
+      <div id="login-error" class="error"></div>
+    </form>
+  </div>
+
+  <div id="app" class="shell hidden">
+    <aside class="sidebar">
+      <button id="new-chat" class="new-chat-btn">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+      </button>
+      <div id="conversation-list" class="conversation-list"></div>
+      <div class="sidebar-footer">
+        <button id="logout" class="logout-btn">Log out</button>
+      </div>
+    </aside>
+    <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
+    <main class="main">
+      <div class="topbar">
+        <button id="sidebar-toggle" class="sidebar-toggle">&#9776;</button>
+        <div id="chat-title" class="topbar-title"></div>
+      </div>
+      <div id="messages" class="messages">
+        <div class="empty-state">
+          <div class="assistant-avatar">${agentInitial}</div>
+          <div class="empty-state-text">How can I help you today?</div>
+        </div>
+      </div>
+      <form id="composer" class="composer">
+        <div class="composer-inner">
+          <div class="composer-shell">
+            <textarea id="prompt" class="composer-input" placeholder="Send a message..." rows="1"></textarea>
+            <button id="send" class="send-btn" type="submit">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 12V4M4 7l4-4 4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+          </div>
+        </div>
+      </form>
+    </main>
+  </div>
+
+    <script>
+      const state = {
+        csrfToken: "",
+        conversations: [],
+        activeConversationId: null,
+        isStreaming: false,
+        confirmDeleteId: null
+      };
+
+      const agentInitial = document.body.dataset.agentInitial || "A";
+      const $ = (id) => document.getElementById(id);
+      const elements = {
+        auth: $("auth"),
+        app: $("app"),
+        loginForm: $("login-form"),
+        passphrase: $("passphrase"),
+        loginError: $("login-error"),
+        list: $("conversation-list"),
+        newChat: $("new-chat"),
+        messages: $("messages"),
+        chatTitle: $("chat-title"),
+        logout: $("logout"),
+        composer: $("composer"),
+        prompt: $("prompt"),
+        send: $("send"),
+        shell: $("app"),
+        sidebarToggle: $("sidebar-toggle"),
+        sidebarBackdrop: $("sidebar-backdrop")
+      };
+
+      const pushConversationUrl = (conversationId) => {
+        const target = conversationId ? "/c/" + encodeURIComponent(conversationId) : "/";
+        if (window.location.pathname !== target) {
+          history.pushState({ conversationId: conversationId || null }, "", target);
+        }
+      };
+
+      const replaceConversationUrl = (conversationId) => {
+        const target = conversationId ? "/c/" + encodeURIComponent(conversationId) : "/";
+        if (window.location.pathname !== target) {
+          history.replaceState({ conversationId: conversationId || null }, "", target);
+        }
+      };
+
+      const getConversationIdFromUrl = () => {
+        const match = window.location.pathname.match(/^\\/c\\/([^\\/]+)/);
+        return match ? decodeURIComponent(match[1]) : null;
+      };
+
+      const mutatingMethods = new Set(["POST", "PATCH", "PUT", "DELETE"]);
+
+      const api = async (path, options = {}) => {
+        const method = (options.method || "GET").toUpperCase();
+        const headers = { ...(options.headers || {}) };
+        if (mutatingMethods.has(method) && state.csrfToken) {
+          headers["x-csrf-token"] = state.csrfToken;
+        }
+        if (options.body && !headers["Content-Type"]) {
+          headers["Content-Type"] = "application/json";
+        }
+        const response = await fetch(path, { credentials: "include", ...options, method, headers });
+        if (!response.ok) {
+          let payload = {};
+          try { payload = await response.json(); } catch {}
+          const error = new Error(payload.message || ("Request failed: " + response.status));
+          error.status = response.status;
+          error.payload = payload;
+          throw error;
+        }
+        const contentType = response.headers.get("content-type") || "";
+        if (contentType.includes("application/json")) {
+          return await response.json();
+        }
+        return await response.text();
+      };
+
+      const escapeHtml = (value) =>
+        String(value || "")
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#39;");
+
+      const renderInlineMarkdown = (value) => {
+        let html = escapeHtml(value);
+        html = html.replace(/\\*\\*([^*]+)\\*\\*/g, "<strong>$1</strong>");
+        html = html.replace(/\\x60([^\\x60]+)\\x60/g, "<code>$1</code>");
+        return html;
+      };
+
+      const renderMarkdownBlock = (value) => {
+        const lines = String(value || "").split("\\n");
+        let html = "";
+        let inList = false;
+
+        for (const rawLine of lines) {
+          const line = rawLine.trimEnd();
+          const trimmed = line.trim();
+          const headingMatch = trimmed.match(/^(#{1,3})\\s+(.+)$/);
+
+          if (headingMatch) {
+            if (inList) {
+              html += "</ul>";
+              inList = false;
+            }
+            const level = Math.min(3, headingMatch[1].length);
+            const tag = level === 1 ? "h2" : level === 2 ? "h3" : "p";
+            html += "<" + tag + ">" + renderInlineMarkdown(headingMatch[2]) + "</" + tag + ">";
+            continue;
+          }
+
+          if (/^\\s*-\\s+/.test(line)) {
+            if (!inList) {
+              html += "<ul>";
+              inList = true;
+            }
+            html += "<li>" + renderInlineMarkdown(line.replace(/^\\s*-\\s+/, "")) + "</li>";
+            continue;
+          }
+          if (inList) {
+            html += "</ul>";
+            inList = false;
+          }
+          if (trimmed.length === 0) {
+            continue;
+          }
+          html += "<p>" + renderInlineMarkdown(line) + "</p>";
+        }
+
+        if (inList) {
+          html += "</ul>";
+        }
+        return html;
+      };
+
+      const renderAssistantMarkdown = (value) => {
+        const source = String(value || "");
+        const fenceRegex = /\\x60\\x60\\x60([\\s\\S]*?)\\x60\\x60\\x60/g;
+        let html = "";
+        let lastIndex = 0;
+        let match;
+
+        while ((match = fenceRegex.exec(source))) {
+          const before = source.slice(lastIndex, match.index);
+          html += renderMarkdownBlock(before);
+          const codeText = String(match[1] || "").replace(/^\\n+|\\n+$/g, "");
+          html += "<pre><code>" + escapeHtml(codeText) + "</code></pre>";
+          lastIndex = match.index + match[0].length;
+        }
+
+        html += renderMarkdownBlock(source.slice(lastIndex));
+        return html || "<p></p>";
+      };
+
+      const extractToolActivity = (value) => {
+        const source = String(value || "");
+        let markerIndex = source.lastIndexOf("\\n### Tool activity\\n");
+        if (markerIndex < 0 && source.startsWith("### Tool activity\\n")) {
+          markerIndex = 0;
+        }
+        if (markerIndex < 0) {
+          return { content: source, activities: [] };
+        }
+        const content = markerIndex === 0 ? "" : source.slice(0, markerIndex).trimEnd();
+        const rawSection = markerIndex === 0 ? source : source.slice(markerIndex + 1);
+        const afterHeading = rawSection.replace(/^### Tool activity\\s*\\n?/, "");
+        const activities = afterHeading
+          .split("\\n")
+          .map((line) => line.trim())
+          .filter((line) => line.startsWith("- "))
+          .map((line) => line.slice(2).trim())
+          .filter(Boolean);
+        return { content, activities };
+      };
+
+      const renderToolActivity = (items) => {
+        if (!items || !items.length) {
+          return "";
+        }
+        const chips = items
+          .map((item) => '<div class="tool-activity-item">' + escapeHtml(item) + "</div>")
+          .join("");
+        return (
+          '<div class="tool-activity">' +
+          '<details class="tool-activity-disclosure">' +
+          '<summary class="tool-activity-summary">' +
+          '<span class="tool-activity-label">Tool activity</span>' +
+          '<span class="tool-activity-caret" aria-hidden="true"><svg viewBox="0 0 12 12" fill="none"><path d="M4.5 2.75L8 6L4.5 9.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>' +
+          "</summary>" +
+          '<div class="tool-activity-list">' +
+          chips +
+          "</div>" +
+          "</details>" +
+          "</div>"
+        );
+      };
+
+      const formatDate = (epoch) => {
+        try {
+          const date = new Date(epoch);
+          const now = new Date();
+          const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+          const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+          const dayDiff = Math.floor((startOfToday - startOfDate) / 86400000);
+          if (dayDiff === 0) {
+            return "Today";
+          }
+          if (dayDiff === 1) {
+            return "Yesterday";
+          }
+          if (dayDiff < 7 && dayDiff > 1) {
+            return date.toLocaleDateString(undefined, { weekday: "short" });
+          }
+          return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+        } catch {
+          return "";
+        }
+      };
+
+      const isMobile = () => window.matchMedia("(max-width: 900px)").matches;
+
+      const setSidebarOpen = (open) => {
+        if (!isMobile()) {
+          elements.shell.classList.remove("sidebar-open");
+          return;
+        }
+        elements.shell.classList.toggle("sidebar-open", open);
+      };
+
+      const renderConversationList = () => {
+        elements.list.innerHTML = "";
+        for (const c of state.conversations) {
+          const item = document.createElement("div");
+          item.className = "conversation-item" + (c.conversationId === state.activeConversationId ? " active" : "");
+          item.textContent = c.title;
+
+          const isConfirming = state.confirmDeleteId === c.conversationId;
+          const deleteBtn = document.createElement("button");
+          deleteBtn.className = "delete-btn" + (isConfirming ? " confirming" : "");
+          deleteBtn.textContent = isConfirming ? "sure?" : "\\u00d7";
+          deleteBtn.onclick = async (e) => {
+            e.stopPropagation();
+            if (!isConfirming) {
+              state.confirmDeleteId = c.conversationId;
+              renderConversationList();
+              return;
+            }
+            await api("/api/conversations/" + c.conversationId, { method: "DELETE" });
+            if (state.activeConversationId === c.conversationId) {
+              state.activeConversationId = null;
+              pushConversationUrl(null);
+              elements.chatTitle.textContent = "";
+              renderMessages([]);
+            }
+            state.confirmDeleteId = null;
+            await loadConversations();
+          };
+          item.appendChild(deleteBtn);
+
+          item.onclick = async () => {
+            if (state.confirmDeleteId) {
+              state.confirmDeleteId = null;
+              renderConversationList();
+              return;
+            }
+            state.activeConversationId = c.conversationId;
+            pushConversationUrl(c.conversationId);
+            renderConversationList();
+            await loadConversation(c.conversationId);
+            if (isMobile()) setSidebarOpen(false);
+          };
+
+          elements.list.appendChild(item);
+        }
+      };
+
+      const renderMessages = (messages, isStreaming = false) => {
+        elements.messages.innerHTML = "";
+        if (!messages || !messages.length) {
+          elements.messages.innerHTML = '<div class="empty-state"><div class="assistant-avatar">' + agentInitial + '</div><div>How can I help you today?</div></div>';
+          return;
+        }
+        const col = document.createElement("div");
+        col.className = "messages-column";
+        messages.forEach((m, i) => {
+          const row = document.createElement("div");
+          row.className = "message-row " + m.role;
+          if (m.role === "assistant") {
+            const wrap = document.createElement("div");
+            wrap.className = "assistant-wrap";
+            wrap.innerHTML = '<div class="assistant-avatar">' + agentInitial + '</div>';
+            const content = document.createElement("div");
+            content.className = "assistant-content";
+            const text = String(m.content || "");
+            const parsed = extractToolActivity(text);
+            const metadataToolActivity =
+              m.metadata && Array.isArray(m.metadata.toolActivity)
+                ? m.metadata.toolActivity
+                : [];
+            const toolActivity =
+              Array.isArray(m._toolActivity) && m._toolActivity.length > 0
+                ? m._toolActivity
+                : metadataToolActivity.length > 0
+                  ? metadataToolActivity
+                  : parsed.activities;
+            if (m._error) {
+              const errorEl = document.createElement("div");
+              errorEl.className = "message-error";
+              errorEl.innerHTML = "<strong>Error</strong><br>" + escapeHtml(m._error);
+              content.appendChild(errorEl);
+            } else if (isStreaming && i === messages.length - 1 && !parsed.content) {
+              const spinner = document.createElement("span");
+              spinner.className = "thinking-indicator";
+              const starFrames = ["\u2736","\u2738","\u2739","\u273A","\u2739","\u2737"];
+              let frame = 0;
+              spinner.textContent = starFrames[0];
+              spinner._interval = setInterval(() => { frame = (frame + 1) % starFrames.length; spinner.textContent = starFrames[frame]; }, 70);
+              content.appendChild(spinner);
+            } else {
+              content.innerHTML = renderAssistantMarkdown(parsed.content);
+            }
+            if (toolActivity.length > 0) {
+              content.insertAdjacentHTML("beforeend", renderToolActivity(toolActivity));
+            }
+            wrap.appendChild(content);
+            row.appendChild(wrap);
+          } else {
+            row.innerHTML = '<div class="user-bubble">' + escapeHtml(m.content) + '</div>';
+          }
+          col.appendChild(row);
+        });
+        elements.messages.appendChild(col);
+        elements.messages.scrollTop = elements.messages.scrollHeight;
+      };
+
+      const loadConversations = async () => {
+        const payload = await api("/api/conversations");
+        state.conversations = payload.conversations || [];
+        renderConversationList();
+      };
+
+      const loadConversation = async (conversationId) => {
+        const payload = await api("/api/conversations/" + encodeURIComponent(conversationId));
+        elements.chatTitle.textContent = payload.conversation.title;
+        renderMessages(payload.conversation.messages);
+        elements.prompt.focus();
+      };
+
+      const createConversation = async (title) => {
+        const payload = await api("/api/conversations", {
+          method: "POST",
+          body: JSON.stringify(title ? { title } : {})
+        });
+        state.activeConversationId = payload.conversation.conversationId;
+        state.confirmDeleteId = null;
+        pushConversationUrl(state.activeConversationId);
+        await loadConversations();
+        await loadConversation(state.activeConversationId);
+        return state.activeConversationId;
+      };
+
+      const parseSseChunk = (buffer, onEvent) => {
+        let rest = buffer;
+        while (true) {
+          const index = rest.indexOf("\\n\\n");
+          if (index < 0) {
+            return rest;
+          }
+          const raw = rest.slice(0, index);
+          rest = rest.slice(index + 2);
+          const lines = raw.split("\\n");
+          let eventName = "message";
+          let data = "";
+          for (const line of lines) {
+            if (line.startsWith("event:")) {
+              eventName = line.slice(6).trim();
+            } else if (line.startsWith("data:")) {
+              data += line.slice(5).trim();
+            }
+          }
+          if (data) {
+            try {
+              onEvent(eventName, JSON.parse(data));
+            } catch {}
+          }
+        }
+      };
+
+      const setStreaming = (value) => {
+        state.isStreaming = value;
+        elements.send.disabled = value;
+      };
+
+      const pushToolActivity = (assistantMessage, line) => {
+        if (!line) {
+          return;
+        }
+        if (
+          !assistantMessage.metadata ||
+          !Array.isArray(assistantMessage.metadata.toolActivity)
+        ) {
+          assistantMessage.metadata = {
+            ...(assistantMessage.metadata || {}),
+            toolActivity: [],
+          };
+        }
+        assistantMessage.metadata.toolActivity.push(line);
+      };
+
+      const autoResizePrompt = () => {
+        const el = elements.prompt;
+        el.style.height = "auto";
+        const scrollHeight = el.scrollHeight;
+        const nextHeight = Math.min(scrollHeight, 200);
+        el.style.height = nextHeight + "px";
+        el.style.overflowY = scrollHeight > 200 ? "auto" : "hidden";
+      };
+
+      const sendMessage = async (text) => {
+        const messageText = (text || "").trim();
+        if (!messageText || state.isStreaming) {
+          return;
+        }
+        let conversationId = state.activeConversationId;
+        if (!conversationId) {
+          conversationId = await createConversation(messageText);
+        }
+        const existingPayload = await api("/api/conversations/" + encodeURIComponent(conversationId));
+        const localMessages = [...(existingPayload.conversation.messages || []), { role: "user", content: messageText }];
+        let assistantMessage = { role: "assistant", content: "", metadata: { toolActivity: [] } };
+        localMessages.push(assistantMessage);
+        renderMessages(localMessages, true);
+        setStreaming(true);
+        try {
+          const response = await fetch("/api/conversations/" + encodeURIComponent(conversationId) + "/messages", {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json", "x-csrf-token": state.csrfToken },
+            body: JSON.stringify({ message: messageText })
+          });
+          if (!response.ok || !response.body) {
+            throw new Error("Failed to stream response");
+          }
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = "";
+          while (true) {
+            const { value, done } = await reader.read();
+            if (done) {
+              break;
+            }
+            buffer += decoder.decode(value, { stream: true });
+            buffer = parseSseChunk(buffer, (eventName, payload) => {
+              if (eventName === "model:chunk") {
+                assistantMessage.content += String(payload.content || "");
+                renderMessages(localMessages, true);
+              }
+              if (eventName === "tool:started") {
+                pushToolActivity(assistantMessage, "start " + (payload.tool || "tool"));
+                renderMessages(localMessages, true);
+              }
+              if (eventName === "tool:completed") {
+                const duration = typeof payload.duration === "number" ? payload.duration : null;
+                pushToolActivity(
+                  assistantMessage,
+                  "done " +
+                    (payload.tool || "tool") +
+                    (duration !== null ? " (" + duration + "ms)" : ""),
+                );
+                renderMessages(localMessages, true);
+              }
+              if (eventName === "tool:error") {
+                pushToolActivity(
+                  assistantMessage,
+                  "error " + (payload.tool || "tool") + ": " + (payload.error || "unknown error"),
+                );
+                renderMessages(localMessages, true);
+              }
+              if (eventName === "tool:approval:required") {
+                pushToolActivity(assistantMessage, "approval required for " + (payload.tool || "tool"));
+                renderMessages(localMessages, true);
+              }
+              if (eventName === "tool:approval:granted") {
+                pushToolActivity(assistantMessage, "approval granted");
+                renderMessages(localMessages, true);
+              }
+              if (eventName === "tool:approval:denied") {
+                pushToolActivity(assistantMessage, "approval denied");
+                renderMessages(localMessages, true);
+              }
+              if (eventName === "run:completed" && (!assistantMessage.content || assistantMessage.content.length === 0)) {
+                assistantMessage.content = String(payload.result?.response || "");
+                renderMessages(localMessages, false);
+              }
+              if (eventName === "run:error") {
+                const errMsg = payload.error?.message || "Something went wrong";
+                assistantMessage.content = "";
+                assistantMessage._error = errMsg;
+                renderMessages(localMessages, false);
+              }
+            });
+          }
+          await loadConversations();
+          await loadConversation(conversationId);
+        } finally {
+          setStreaming(false);
+          elements.prompt.focus();
+        }
+      };
+
+      const requireAuth = async () => {
+        try {
+          const session = await api("/api/auth/session");
+          if (!session.authenticated) {
+            elements.auth.classList.remove("hidden");
+            elements.app.classList.add("hidden");
+            return false;
+          }
+          state.csrfToken = session.csrfToken || "";
+          elements.auth.classList.add("hidden");
+          elements.app.classList.remove("hidden");
+          return true;
+        } catch {
+          elements.auth.classList.remove("hidden");
+          elements.app.classList.add("hidden");
+          return false;
+        }
+      };
+
+      elements.loginForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        elements.loginError.textContent = "";
+        try {
+          const result = await api("/api/auth/login", {
+            method: "POST",
+            body: JSON.stringify({ passphrase: elements.passphrase.value || "" })
+          });
+          state.csrfToken = result.csrfToken || "";
+          elements.passphrase.value = "";
+          elements.auth.classList.add("hidden");
+          elements.app.classList.remove("hidden");
+          await loadConversations();
+          const urlConversationId = getConversationIdFromUrl();
+          if (urlConversationId) {
+            state.activeConversationId = urlConversationId;
+            renderConversationList();
+            try {
+              await loadConversation(urlConversationId);
+            } catch {
+              state.activeConversationId = null;
+              replaceConversationUrl(null);
+              renderMessages([]);
+              renderConversationList();
+            }
+          }
+        } catch (error) {
+          elements.loginError.textContent = error.message || "Login failed";
+        }
+      });
+
+      elements.newChat.addEventListener("click", () => {
+        state.activeConversationId = null;
+        state.confirmDeleteId = null;
+        pushConversationUrl(null);
+        elements.chatTitle.textContent = "";
+        renderMessages([]);
+        renderConversationList();
+        elements.prompt.focus();
+        if (isMobile()) {
+          setSidebarOpen(false);
+        }
+      });
+
+      elements.prompt.addEventListener("input", () => {
+        autoResizePrompt();
+      });
+
+      elements.prompt.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          elements.composer.requestSubmit();
+        }
+      });
+
+      elements.sidebarToggle.addEventListener("click", () => {
+        if (isMobile()) setSidebarOpen(!elements.shell.classList.contains("sidebar-open"));
+      });
+
+      elements.sidebarBackdrop.addEventListener("click", () => setSidebarOpen(false));
+
+      elements.logout.addEventListener("click", async () => {
+        await api("/api/auth/logout", { method: "POST" });
+        state.activeConversationId = null;
+        state.confirmDeleteId = null;
+        state.conversations = [];
+        state.csrfToken = "";
+        await requireAuth();
+      });
+
+      elements.composer.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const value = elements.prompt.value;
+        elements.prompt.value = "";
+        autoResizePrompt();
+        await sendMessage(value);
+      });
+
+      document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Node)) {
+          return;
+        }
+        if (!event.target.closest(".conversation-item") && state.confirmDeleteId) {
+          state.confirmDeleteId = null;
+          renderConversationList();
+        }
+      });
+
+      window.addEventListener("resize", () => {
+        setSidebarOpen(false);
+      });
+
+      const navigateToConversation = async (conversationId) => {
+        if (conversationId) {
+          state.activeConversationId = conversationId;
+          renderConversationList();
+          try {
+            await loadConversation(conversationId);
+          } catch {
+            // Conversation not found \u2013 fall back to empty state
+            state.activeConversationId = null;
+            replaceConversationUrl(null);
+            elements.chatTitle.textContent = "";
+            renderMessages([]);
+            renderConversationList();
+          }
+        } else {
+          state.activeConversationId = null;
+          elements.chatTitle.textContent = "";
+          renderMessages([]);
+          renderConversationList();
+        }
+      };
+
+      window.addEventListener("popstate", async () => {
+        if (state.isStreaming) return;
+        const conversationId = getConversationIdFromUrl();
+        await navigateToConversation(conversationId);
+      });
+
+      (async () => {
+        const authenticated = await requireAuth();
+        if (!authenticated) {
+          return;
+        }
+        await loadConversations();
+        const urlConversationId = getConversationIdFromUrl();
+        if (urlConversationId) {
+          state.activeConversationId = urlConversationId;
+          replaceConversationUrl(urlConversationId);
+          renderConversationList();
+          try {
+            await loadConversation(urlConversationId);
+          } catch {
+            // URL pointed to a conversation that no longer exists
+            state.activeConversationId = null;
+            replaceConversationUrl(null);
+            elements.chatTitle.textContent = "";
+            renderMessages([]);
+            renderConversationList();
+          }
+        }
+        autoResizePrompt();
+        elements.prompt.focus();
+      })();
+
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("/sw.js").catch(() => {});
+      }
+
+      // iOS keyboard: use visualViewport to set the real visible height
+      // and prevent the page from scrolling behind the keyboard.
+      (function() {
+        const setHeight = () => {
+          const h = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+          document.documentElement.style.setProperty("--app-height", h + "px");
+        };
+        if (window.visualViewport) {
+          window.visualViewport.addEventListener("resize", setHeight);
+        }
+        window.addEventListener("resize", setHeight);
+        setHeight();
+
+        // Prevent iOS from scrolling the page when the keyboard opens.
+        // Keep scroll pinned to 0 whenever an input is focused.
+        var inputFocused = false;
+        var pinScroll = function() { if (inputFocused && window.scrollY !== 0) window.scrollTo(0, 0); };
+        document.addEventListener("focusin", function(e) {
+          if (e.target && (e.target.tagName === "TEXTAREA" || e.target.tagName === "INPUT")) {
+            inputFocused = true;
+          }
+        });
+        document.addEventListener("focusout", function() {
+          inputFocused = false;
+          window.scrollTo(0, 0);
+        });
+        if (window.visualViewport) {
+          window.visualViewport.addEventListener("scroll", pinScroll);
+          window.visualViewport.addEventListener("resize", pinScroll);
+        }
+        document.addEventListener("scroll", pinScroll);
+      })();
+
+    </script>
+  </body>
+</html>`;
+};
+
+// src/init-onboarding.ts
+import { createInterface } from "readline/promises";
+import { clearLine, cursorTo, emitKeypressEvents, moveCursor } from "readline";
+import { stdin, stdout } from "process";
+import {
+  fieldsForScope
+} from "@agentl/sdk";
+var SELECTED_MARKER = "->";
+var BORDER = "------------------------------------------------------------";
+var shouldAskField = (field, answers) => {
+  if (!field.dependsOn) {
+    return true;
+  }
+  const value = answers[field.dependsOn.fieldId];
+  if (typeof field.dependsOn.equals !== "undefined") {
+    return value === field.dependsOn.equals;
+  }
+  if (field.dependsOn.oneOf) {
+    return field.dependsOn.oneOf.includes(value);
+  }
+  return true;
+};
+var parsePromptValue = (field, answer) => {
+  if (field.kind === "boolean") {
+    const normalized = answer.trim().toLowerCase();
+    if (normalized === "y" || normalized === "yes" || normalized === "true") {
+      return true;
+    }
+    if (normalized === "n" || normalized === "no" || normalized === "false") {
+      return false;
+    }
+    return Boolean(field.defaultValue);
+  }
+  if (field.kind === "number") {
+    const parsed = Number.parseInt(answer.trim(), 10);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+    return Number(field.defaultValue);
+  }
+  if (field.kind === "select") {
+    const trimmed2 = answer.trim();
+    if (field.options && field.options.some((option) => option.value === trimmed2)) {
+      return trimmed2;
+    }
+    const asNumber = Number.parseInt(trimmed2, 10);
+    if (Number.isFinite(asNumber) && field.options && asNumber >= 1 && asNumber <= field.options.length) {
+      return field.options[asNumber - 1]?.value ?? String(field.defaultValue);
+    }
+    return String(field.defaultValue);
+  }
+  const trimmed = answer.trim();
+  if (trimmed.length === 0) {
+    return String(field.defaultValue);
+  }
+  return trimmed;
+};
+var buildPrompt = (field) => {
+  if (field.kind === "select" && field.options) {
+    return `${field.prompt}
+Choice (or Enter for default): `;
+  }
+  if (field.kind === "boolean") {
+    const yesNo = field.defaultValue ? "Y/n" : "y/N";
+    return `${field.prompt} [${yesNo}] `;
+  }
+  return `${field.prompt}: `;
+};
+var askSelectWithArrowKeys = async (field, io) => {
+  if (!field.options || field.options.length === 0) {
+    return void 0;
+  }
+  const options = field.options;
+  if (!stdin.isTTY || typeof stdin.setRawMode !== "function") {
+    return void 0;
+  }
+  let selectedIndex = Math.max(
+    0,
+    options.findIndex((option) => option.value === String(field.defaultValue))
+  );
+  let renderedLines = 0;
+  const render = () => {
+    if (renderedLines > 0) {
+      moveCursor(stdout, 0, -renderedLines);
+    }
+    const lines = [
+      BORDER,
+      `? ${field.prompt}`,
+      ...options.map(
+        (option, index) => index === selectedIndex ? `${SELECTED_MARKER} ${option.label}` : `  ${option.label}`
+      ),
+      BORDER,
+      "Use Up/Down, Enter to confirm."
+    ];
+    for (const line of lines) {
+      clearLine(stdout, 0);
+      cursorTo(stdout, 0);
+      stdout.write(`${line}
+`);
+    }
+    renderedLines = lines.length;
+  };
+  return await new Promise((resolveChoice, rejectChoice) => {
+    const onKeypress = (_str, key) => {
+      if (key.ctrl && key.name === "c") {
+        cleanup();
+        rejectChoice(new Error("Onboarding cancelled"));
+        return;
+      }
+      if (key.name === "up") {
+        selectedIndex = (selectedIndex - 1 + options.length) % options.length;
+        render();
+        return;
+      }
+      if (key.name === "down") {
+        selectedIndex = (selectedIndex + 1) % options.length;
+        render();
+        return;
+      }
+      if (key.name === "return" || key.name === "enter") {
+        const selected = options[selectedIndex]?.value ?? String(field.defaultValue);
+        cleanup();
+        resolveChoice(selected);
+      }
+    };
+    const cleanup = () => {
+      stdin.off("keypress", onKeypress);
+      stdin.setRawMode(false);
+      io?.resume();
+      stdout.write("\n");
+    };
+    io?.pause();
+    emitKeypressEvents(stdin);
+    stdin.setRawMode(true);
+    stdin.resume();
+    render();
+    stdin.on("keypress", onKeypress);
+  });
+};
+var askBooleanWithArrowKeys = async (field, io) => {
+  if (!stdin.isTTY || typeof stdin.setRawMode !== "function") {
+    return void 0;
+  }
+  const options = [
+    { value: "true", label: "Yes" },
+    { value: "false", label: "No" }
+  ];
+  let selectedIndex = field.defaultValue ? 0 : 1;
+  let renderedLines = 0;
+  const render = () => {
+    if (renderedLines > 0) {
+      moveCursor(stdout, 0, -renderedLines);
+    }
+    const lines = [
+      BORDER,
+      `? ${field.prompt}`,
+      ...options.map(
+        (option, index) => index === selectedIndex ? `${SELECTED_MARKER} ${option.label}` : `  ${option.label}`
+      ),
+      BORDER,
+      "Use Left/Right or Up/Down, Enter to confirm."
+    ];
+    for (const line of lines) {
+      clearLine(stdout, 0);
+      cursorTo(stdout, 0);
+      stdout.write(`${line}
+`);
+    }
+    renderedLines = lines.length;
+  };
+  return await new Promise((resolveChoice, rejectChoice) => {
+    const onKeypress = (_str, key) => {
+      if (key.ctrl && key.name === "c") {
+        cleanup();
+        rejectChoice(new Error("Onboarding cancelled"));
+        return;
+      }
+      if (key.name === "up" || key.name === "left" || key.name === "down" || key.name === "right") {
+        selectedIndex = selectedIndex === 0 ? 1 : 0;
+        render();
+        return;
+      }
+      if (key.name === "return" || key.name === "enter") {
+        const selected = options[selectedIndex]?.value ?? String(field.defaultValue);
+        cleanup();
+        resolveChoice(selected);
+      }
+    };
+    const cleanup = () => {
+      stdin.off("keypress", onKeypress);
+      stdin.setRawMode(false);
+      io?.resume();
+      stdout.write("\n");
+    };
+    io?.pause();
+    emitKeypressEvents(stdin);
+    stdin.setRawMode(true);
+    stdin.resume();
+    render();
+    stdin.on("keypress", onKeypress);
+  });
+};
+var buildDefaultAnswers = (mode) => {
+  const answers = {};
+  for (const field of fieldsForScope(mode)) {
+    answers[field.id] = field.defaultValue;
+  }
+  return answers;
+};
+var askOnboardingQuestions = async (mode, options) => {
+  const answers = buildDefaultAnswers(mode);
+  const interactive = options.yes === true ? false : options.interactive ?? (stdin.isTTY === true && stdout.isTTY === true);
+  if (!interactive) {
+    return answers;
+  }
+  const rl = createInterface({ input: stdin, output: stdout });
+  try {
+    stdout.write(`${BORDER}
+`);
+    stdout.write(
+      `AgentL onboarding (${mode === "full" ? "full" : "light"} mode)
+`
+    );
+    stdout.write(`${BORDER}
+
+`);
+    const fields = fieldsForScope(mode);
+    for (const field of fields) {
+      if (!shouldAskField(field, answers)) {
+        continue;
+      }
+      const value = field.kind === "select" ? await askSelectWithArrowKeys(field, rl) ?? await rl.question(buildPrompt(field)) : field.kind === "boolean" ? await askBooleanWithArrowKeys(field, rl) ?? await rl.question(buildPrompt(field)) : await rl.question(buildPrompt(field));
+      if (value.trim().length === 0) {
+        continue;
+      }
+      answers[field.id] = parsePromptValue(field, value);
+    }
+  } finally {
+    rl.close();
+  }
+  return answers;
+};
+var getProviderModelName = (provider) => provider === "openai" ? "gpt-4.1" : "claude-opus-4-5";
+var maybeSet = (target, key, value) => {
+  if (typeof value === "string" && value.trim().length === 0) {
+    return;
+  }
+  if (typeof value === "undefined") {
+    return;
+  }
+  target[key] = value;
+};
+var buildConfigFromOnboardingAnswers = (answers) => {
+  const storageProvider = String(answers["storage.provider"] ?? "local");
+  const memoryEnabled = Boolean(answers["storage.memory.enabled"] ?? true);
+  const maxRecallConversations = Number(
+    answers["storage.memory.maxRecallConversations"] ?? 20
+  );
+  const storage = {
+    provider: storageProvider,
+    memory: {
+      enabled: memoryEnabled,
+      maxRecallConversations
+    }
+  };
+  maybeSet(storage, "url", answers["storage.url"]);
+  maybeSet(storage, "token", answers["storage.token"]);
+  maybeSet(storage, "table", answers["storage.table"]);
+  maybeSet(storage, "region", answers["storage.region"]);
+  const authRequired = Boolean(answers["auth.required"] ?? false);
+  const authType = answers["auth.type"] ?? "bearer";
+  const auth = {
+    required: authRequired,
+    type: authType
+  };
+  if (authType === "header") {
+    maybeSet(auth, "headerName", answers["auth.headerName"]);
+  }
+  const telemetryEnabled = Boolean(answers["telemetry.enabled"] ?? true);
+  const telemetry = {
+    enabled: telemetryEnabled
+  };
+  maybeSet(telemetry, "otlp", answers["telemetry.otlp"]);
+  return {
+    mcp: [],
+    auth,
+    storage,
+    telemetry
+  };
+};
+var isDefaultOnboardingConfig = (config) => {
+  if (!config) {
+    return true;
+  }
+  const topLevelKeys = Object.keys(config);
+  const allowedTopLevel = /* @__PURE__ */ new Set(["mcp", "auth", "storage", "telemetry"]);
+  if (topLevelKeys.some((key) => !allowedTopLevel.has(key))) {
+    return false;
+  }
+  if ((config.mcp ?? []).length > 0) {
+    return false;
+  }
+  const authRequired = config.auth?.required ?? false;
+  const authType = config.auth?.type ?? "bearer";
+  if (authRequired || authType !== "bearer" || typeof config.auth?.headerName !== "undefined") {
+    return false;
+  }
+  const provider = config.storage?.provider ?? "local";
+  if (provider !== "local") {
+    return false;
+  }
+  if (typeof config.storage?.url !== "undefined" || typeof config.storage?.token !== "undefined" || typeof config.storage?.table !== "undefined" || typeof config.storage?.region !== "undefined") {
+    return false;
+  }
+  const memoryEnabled = config.storage?.memory?.enabled ?? true;
+  const maxRecallConversations = config.storage?.memory?.maxRecallConversations ?? 20;
+  if (!memoryEnabled || maxRecallConversations !== 20) {
+    return false;
+  }
+  const telemetryEnabled = config.telemetry?.enabled ?? true;
+  const telemetryHasExtra = typeof config.telemetry?.otlp !== "undefined" || typeof config.telemetry?.latitude !== "undefined" || typeof config.telemetry?.handler !== "undefined";
+  if (!telemetryEnabled || telemetryHasExtra) {
+    return false;
+  }
+  return true;
+};
+var collectEnvVars = (answers) => {
+  const envVars = /* @__PURE__ */ new Set();
+  const provider = String(answers["model.provider"] ?? "anthropic");
+  if (provider === "openai") {
+    envVars.add("OPENAI_API_KEY=sk-...");
+  } else {
+    envVars.add("ANTHROPIC_API_KEY=sk-ant-...");
+  }
+  const storageProvider = String(answers["storage.provider"] ?? "local");
+  if (storageProvider === "redis") {
+    envVars.add("REDIS_URL=redis://localhost:6379");
+  }
+  if (storageProvider === "upstash") {
+    envVars.add("UPSTASH_REDIS_REST_URL=https://...");
+    envVars.add("UPSTASH_REDIS_REST_TOKEN=...");
+  }
+  if (storageProvider === "dynamodb") {
+    envVars.add("AGENTL_DYNAMODB_TABLE=agentl-conversations");
+    envVars.add("AWS_REGION=us-east-1");
+  }
+  return Array.from(envVars);
+};
+var runInitOnboarding = async (options) => {
+  const answers = await askOnboardingQuestions(options.mode, options);
+  const provider = String(answers["model.provider"] ?? "anthropic");
+  const config = buildConfigFromOnboardingAnswers(answers);
+  const envLines = collectEnvVars(answers);
+  return {
+    answers,
+    config,
+    envExample: `${envLines.join("\n")}
+`,
+    agentModel: {
+      provider: provider === "openai" ? "openai" : "anthropic",
+      name: getProviderModelName(provider)
+    }
+  };
+};
+
+// src/init-feature-context.ts
+import { access, mkdir as mkdir2, readFile as readFile2, writeFile as writeFile2 } from "fs/promises";
+import { dirname as dirname2, resolve as resolve2 } from "path";
+import {
+  FEATURE_DOMAIN_ORDER,
+  ONBOARDING_FIELDS as ONBOARDING_FIELDS2
+} from "@agentl/sdk";
+var ONBOARDING_VERSION = 1;
+var ONBOARDING_MARKER_RELATIVE_PATH = ".agentl/state/onboarding.json";
+var FEATURE_DOMAIN_LABELS = {
+  model: "Model",
+  storage: "Storage",
+  memory: "Memory",
+  auth: "Auth",
+  telemetry: "Telemetry",
+  mcp: "MCP"
+};
+var summarizeConfig = (config) => {
+  const provider = config?.storage?.provider ?? config?.state?.provider ?? "local";
+  const memoryEnabled = config?.storage?.memory?.enabled ?? config?.memory?.enabled ?? false;
+  const authRequired = config?.auth?.required ?? false;
+  const telemetryEnabled = config?.telemetry?.enabled ?? true;
+  return [
+    `storage: ${provider}`,
+    `memory tools: ${memoryEnabled ? "enabled" : "disabled"}`,
+    `auth: ${authRequired ? "required" : "not required"}`,
+    `telemetry: ${telemetryEnabled ? "enabled" : "disabled"}`
+  ];
+};
+var collectFeatureSummary = () => {
+  const grouped = {
+    model: [],
+    storage: [],
+    memory: [],
+    auth: [],
+    telemetry: [],
+    mcp: []
+  };
+  for (const field of ONBOARDING_FIELDS2) {
+    const existing = grouped[field.domain].find((item) => item.title === field.label);
+    const detail = `path: ${field.path}`;
+    if (existing) {
+      if (!existing.details.includes(detail)) {
+        existing.details.push(detail);
+      }
+      continue;
+    }
+    grouped[field.domain].push({
+      title: field.label,
+      details: [detail]
+    });
+  }
+  grouped.mcp.push({
+    title: "MCP integrations",
+    details: ["path: mcp[] (add/remove via CLI or chat-driven config edits)"]
+  });
+  return grouped;
+};
+var buildOnboardingFeatureGuidance = () => {
+  const grouped = collectFeatureSummary();
+  const lines = [
+    "## Configuration Assistant Context",
+    "",
+    "You can help users configure this project by editing `agentl.config.js` when write tools are enabled.",
+    "",
+    "When users ask for config changes:",
+    "- Keep config-edit guidance available, but only provide onboarding overview proactively on first run.",
+    "- First summarize intended edits and affected keys.",
+    "- Apply minimal edits only to requested keys.",
+    "- Preserve unrelated config keys and custom code.",
+    "- Confirm what changed and what environment variables are required.",
+    "",
+    "Feature catalog:"
+  ];
+  for (const domain of FEATURE_DOMAIN_ORDER) {
+    const items = grouped[domain];
+    if (items.length === 0) {
+      continue;
+    }
+    lines.push(`- ${FEATURE_DOMAIN_LABELS[domain]}:`);
+    for (const item of items) {
+      lines.push(`  - ${item.title} (${item.details.join(", ")})`);
+    }
+  }
+  return `${lines.join("\n")}
+`;
+};
+var getOnboardingMarkerPath = (workingDir) => resolve2(workingDir, ONBOARDING_MARKER_RELATIVE_PATH);
+var readMarker = async (workingDir) => {
+  const markerPath = getOnboardingMarkerPath(workingDir);
+  try {
+    await access(markerPath);
+  } catch {
+    return void 0;
+  }
+  try {
+    const raw = await readFile2(markerPath, "utf8");
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+};
+var writeMarker = async (workingDir, state) => {
+  const markerPath = getOnboardingMarkerPath(workingDir);
+  await mkdir2(dirname2(markerPath), { recursive: true });
+  await writeFile2(markerPath, JSON.stringify(state, null, 2), "utf8");
+};
+var initializeOnboardingMarker = async (workingDir, options) => {
+  const current = await readMarker(workingDir);
+  if (current) {
+    return;
+  }
+  const allowIntro = options?.allowIntro ?? true;
+  await writeMarker(workingDir, {
+    introduced: allowIntro ? false : true,
+    allowIntro,
+    onboardingVersion: ONBOARDING_VERSION,
+    createdAt: Date.now()
+  });
+};
+var consumeFirstRunIntro = async (workingDir, input) => {
+  const marker = await readMarker(workingDir);
+  if (marker?.allowIntro === false) {
+    return void 0;
+  }
+  if (!isDefaultOnboardingConfig(input.config)) {
+    await writeMarker(workingDir, {
+      introduced: true,
+      allowIntro: false,
+      onboardingVersion: ONBOARDING_VERSION,
+      createdAt: marker?.createdAt ?? Date.now(),
+      introducedAt: marker?.introducedAt ?? Date.now()
+    });
+    return void 0;
+  }
+  const shouldShow = !marker || marker.introduced === false;
+  if (!shouldShow) {
+    return void 0;
+  }
+  await writeMarker(workingDir, {
+    introduced: true,
+    allowIntro: true,
+    onboardingVersion: ONBOARDING_VERSION,
+    createdAt: marker?.createdAt ?? Date.now(),
+    introducedAt: Date.now()
+  });
+  const summary = summarizeConfig(input.config);
+  const featureGroups = [
+    "model/provider",
+    "storage and memory",
+    "auth/security",
+    "telemetry",
+    "MCP integrations"
+  ].join(", ");
+  return [
+    "============================================================",
+    `Hi! I'm ${input.agentName}.`,
+    "I can help configure this agent directly by chat.",
+    "------------------------------------------------------------",
+    `Model: ${input.provider}/${input.model}`,
+    `Current setup: ${summary.join(" | ")}`,
+    `Configurable areas: ${featureGroups}`,
+    "------------------------------------------------------------",
+    "Try:",
+    '  - "Switch storage to Upstash"',
+    '  - "Enable auth with bearer token validation"',
+    '  - "Turn on telemetry and set OTLP endpoint"',
+    "Note: I will summarize changes before editing config.",
+    "============================================================"
+  ].join("\n");
+};
+
+export {
+  SessionStore,
+  LoginRateLimiter,
+  parseCookies,
+  setCookie,
+  verifyPassphrase,
+  getRequestIp,
+  inferConversationTitle,
+  renderManifest,
+  renderIconSvg,
+  renderServiceWorker,
+  renderWebUiHtml,
+  isDefaultOnboardingConfig,
+  runInitOnboarding,
+  buildOnboardingFeatureGuidance,
+  initializeOnboardingMarker,
+  consumeFirstRunIntro
+};