@poncho-ai/cli 0.2.0

package/dist/chunk-U3VXLQTW.js

@@ -0,0 +1,1707 @@
+// 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 FileConversationStore = class {
+  filePath;
+  conversations = /* @__PURE__ */ new Map();
+  loaded = false;
+  writing = Promise.resolve();
+  constructor(workingDir) {
+    const projectName = basename(workingDir).replace(/[^a-zA-Z0-9_-]+/g, "-") || "project";
+    const projectHash = createHash("sha256").update(workingDir).digest("hex").slice(0, 12);
+    this.filePath = resolve(
+      homedir(),
+      ".agentl",
+      "state",
+      `${projectName}-${projectHash}-web-ui-state.json`
+    );
+  }
+  async ensureLoaded() {
+    if (this.loaded) {
+      return;
+    }
+    this.loaded = true;
+    try {
+      const content = await readFile(this.filePath, "utf8");
+      const parsed = JSON.parse(content);
+      for (const conversation of parsed.conversations ?? []) {
+        this.conversations.set(conversation.conversationId, conversation);
+      }
+    } catch {
+    }
+  }
+  async persist() {
+    const payload = {
+      conversations: Array.from(this.conversations.values())
+    };
+    this.writing = this.writing.then(async () => {
+      await mkdir(dirname(this.filePath), { recursive: true });
+      await writeFile(this.filePath, JSON.stringify(payload, null, 2), "utf8");
+    });
+    await this.writing;
+  }
+  async list(ownerId = DEFAULT_OWNER) {
+    await this.ensureLoaded();
+    return Array.from(this.conversations.values()).filter((conversation) => conversation.ownerId === ownerId).sort((a, b) => b.updatedAt - a.updatedAt);
+  }
+  async get(conversationId) {
+    await this.ensureLoaded();
+    return this.conversations.get(conversationId);
+  }
+  async create(ownerId = DEFAULT_OWNER, title) {
+    await this.ensureLoaded();
+    const now = Date.now();
+    const conversation = {
+      conversationId: randomUUID(),
+      title: title && title.trim().length > 0 ? title.trim() : "New conversation",
+      messages: [],
+      ownerId,
+      tenantId: null,
+      createdAt: now,
+      updatedAt: now
+    };
+    this.conversations.set(conversation.conversationId, conversation);
+    await this.persist();
+    return conversation;
+  }
+  async update(conversation) {
+    await this.ensureLoaded();
+    this.conversations.set(conversation.conversationId, {
+      ...conversation,
+      updatedAt: Date.now()
+    });
+    await this.persist();
+  }
+  async rename(conversationId, title) {
+    await this.ensureLoaded();
+    const existing = this.conversations.get(conversationId);
+    if (!existing) {
+      return void 0;
+    }
+    const updated = {
+      ...existing,
+      title: title.trim().length > 0 ? title.trim() : existing.title,
+      updatedAt: Date.now()
+    };
+    this.conversations.set(conversationId, updated);
+    await this.persist();
+    return updated;
+  }
+  async delete(conversationId) {
+    await this.ensureLoaded();
+    const removed = this.conversations.delete(conversationId);
+    if (removed) {
+      await this.persist();
+    }
+    return removed;
+  }
+};
+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 renderWebUiHtml = () => `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>AgentL Web UI</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg-main: #212121;
+        --bg-sidebar: #171717;
+        --bg-elevated: #262626;
+        --bg-hover: #2f2f2f;
+        --bg-active: #383838;
+        --bg-soft: rgba(255, 255, 255, 0.05);
+        --bg-soft-strong: rgba(255, 255, 255, 0.09);
+        --text-main: #ececec;
+        --text-muted: #9a9a9a;
+        --text-subtle: #c4c4c4;
+        --text-title: #ffffff;
+        --text-secondary: #b0b0b0;
+        --focus-ring: rgba(142, 197, 255, 0.6);
+        --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.28);
+        --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.4);
+        --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06);
+        --danger: #ef4444;
+        --danger-hover: #dc2626;
+        --transition-fast: 120ms;
+        --transition-normal: 180ms;
+        --transition-slow: 280ms;
+        --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
+        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+      * { box-sizing: border-box; margin: 0; padding: 0; }
+      html, body { height: 100%; }
+      html { scroll-behavior: smooth; }
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
+          system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
+        background: var(--bg-main);
+        color: var(--text-main);
+        font-size: 15px;
+        line-height: 1.5;
+        letter-spacing: -0.011em;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      button, input, textarea {
+        font: inherit;
+        letter-spacing: inherit;
+      }
+      .hidden { display: none !important; }
+      @media (prefers-reduced-motion: reduce) {
+        *, *::before, *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+          scroll-behavior: auto !important;
+        }
+      }
+      button:focus-visible, input:focus-visible, textarea:focus-visible {
+        outline: 2px solid var(--focus-ring);
+        outline-offset: 2px;
+      }
+      ::selection {
+        background: rgba(255, 255, 255, 0.15);
+      }
+
+      .auth {
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        padding: 24px;
+        background: var(--bg-main);
+        animation: authFadeIn 400ms var(--ease-out);
+      }
+      @keyframes authFadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .auth-shell {
+        width: min(400px, 92vw);
+        display: grid;
+        gap: 20px;
+        justify-items: center;
+      }
+      .auth-avatar {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        display: grid;
+        place-items: center;
+        color: var(--text-title);
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        animation: avatarFloat 3s ease-in-out infinite;
+      }
+      @keyframes avatarFloat {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-3px); }
+      }
+      .auth-card {
+        width: 100%;
+        border-radius: 20px;
+        background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
+        padding: 28px 24px;
+        display: grid;
+        gap: 16px;
+        box-shadow: var(--shadow-pop), var(--shadow-glow);
+        animation: cardSlideUp 450ms var(--ease-out);
+      }
+      @keyframes cardSlideUp {
+        from { opacity: 0; transform: translateY(12px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      .auth-title {
+        font-size: 22px;
+        font-weight: 600;
+        letter-spacing: -0.025em;
+        color: var(--text-title);
+      }
+      .auth-text {
+        color: var(--text-muted);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1.5;
+      }
+      .auth-input {
+        width: 100%;
+        border: 1px solid transparent;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--text-main);
+        padding: 13px 16px;
+        font-size: 15px;
+        outline: none;
+        transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease,
+          box-shadow var(--transition-normal) ease;
+      }
+      .auth-input::placeholder { color: var(--text-muted); }
+      .auth-input:hover { background: rgba(255, 255, 255, 0.07); }
+      .auth-input:focus {
+        background: rgba(255, 255, 255, 0.08);
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
+      }
+      .auth-submit {
+        border: 0;
+        border-radius: 12px;
+        background: #ffffff;
+        color: #0a0a0a;
+        padding: 12px 20px;
+        font-size: 15px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        cursor: pointer;
+        transition: transform var(--transition-normal) var(--ease-spring),
+          box-shadow var(--transition-normal) ease, opacity var(--transition-fast) ease;
+      }
+      .auth-submit:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
+      }
+      .auth-submit:active { transform: translateY(0) scale(0.98); }
+      .error {
+        color: #f87171;
+        font-size: 13px;
+        font-weight: 450;
+        min-height: 18px;
+        animation: errorShake 300ms ease-out;
+      }
+      @keyframes errorShake {
+        0%, 100% { transform: translateX(0); }
+        20%, 60% { transform: translateX(-4px); }
+        40%, 80% { transform: translateX(4px); }
+      }
+
+      .shell {
+        min-height: 100vh;
+        display: flex;
+        background: var(--bg-main);
+        animation: shellFadeIn 350ms var(--ease-out);
+      }
+      @keyframes shellFadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .sidebar {
+        width: 260px;
+        background: var(--bg-sidebar);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 12px 10px;
+        position: relative;
+        z-index: 30;
+        border-right: 1px solid rgba(255, 255, 255, 0.04);
+      }
+      .sidebar-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 2px 4px;
+      }
+      .icon-btn, .menu-btn {
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+        width: 32px;
+        height: 32px;
+        border-radius: 8px;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        transition: background var(--transition-fast) ease, color var(--transition-fast) ease,
+          transform var(--transition-normal) var(--ease-out);
+      }
+      .icon-btn:hover, .menu-btn:hover {
+        background: var(--bg-hover);
+        color: var(--text-main);
+      }
+      .icon-btn:active, .menu-btn:active { transform: scale(0.92); }
+      .new-chat-btn {
+        border: 0;
+        background: rgba(255, 255, 255, 0.04);
+        color: var(--text-main);
+        border-radius: 10px;
+        height: 38px;
+        padding: 0 14px;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        cursor: pointer;
+        transition: background var(--transition-fast) ease, transform var(--transition-normal) var(--ease-spring);
+      }
+      .new-chat-btn:hover {
+        background: var(--bg-hover);
+        transform: translateY(-1px);
+      }
+      .new-chat-btn:active { transform: translateY(0) scale(0.98); }
+      .conversation-list {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: 4px 4px 4px 0;
+        margin-top: 4px;
+      }
+      .conversation-empty {
+        color: var(--text-muted);
+        font-size: 13px;
+        font-weight: 400;
+        padding: 12px 8px;
+        text-align: center;
+      }
+      .conversation-item {
+        position: relative;
+        border-radius: 10px;
+        padding: 10px 8px 10px 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: background var(--transition-fast) ease, transform var(--transition-normal) var(--ease-out),
+          opacity var(--transition-normal) ease;
+        animation: conversationItemIn 250ms var(--ease-out);
+      }
+      @keyframes conversationItemIn {
+        from { opacity: 0; transform: translateX(-8px); }
+        to { opacity: 1; transform: translateX(0); }
+      }
+      .conversation-item:hover { background: rgba(255, 255, 255, 0.05); }
+      .conversation-item.active {
+        background: var(--bg-hover);
+      }
+      .conversation-item.active::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 20px;
+        background: rgba(255, 255, 255, 0.4);
+        border-radius: 0 2px 2px 0;
+        animation: indicatorSlideIn 200ms var(--ease-out);
+      }
+      @keyframes indicatorSlideIn {
+        from { opacity: 0; height: 0; }
+        to { opacity: 1; height: 20px; }
+      }
+      .conversation-label-wrap {
+        flex: 1;
+        min-width: 0;
+      }
+      .conversation-title {
+        font-size: 14px;
+        font-weight: 450;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--text-main);
+      }
+      .conversation-item.active .conversation-title {
+        font-weight: 500;
+        color: var(--text-title);
+      }
+      .conversation-meta {
+        margin-top: 3px;
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--text-muted);
+        letter-spacing: 0;
+      }
+      .conversation-item .menu-btn {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      .conversation-item:hover .menu-btn,
+      .conversation-item.menu-open .menu-btn {
+        opacity: 1;
+        transform: scale(1);
+      }
+      .conversation-menu {
+        position: absolute;
+        top: 42px;
+        right: 4px;
+        width: 150px;
+        border-radius: 12px;
+        background: #2a2a2a;
+        box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255, 255, 255, 0.06);
+        overflow: hidden;
+        z-index: 20;
+        transform-origin: top right;
+        animation: menuIn 180ms var(--ease-out);
+      }
+      @keyframes menuIn {
+        from { opacity: 0; transform: scale(0.92) translateY(-4px); }
+        to { opacity: 1; transform: scale(1) translateY(0); }
+      }
+      .conversation-menu button {
+        width: 100%;
+        border: 0;
+        background: transparent;
+        color: var(--text-main);
+        text-align: left;
+        padding: 10px 14px;
+        font-size: 14px;
+        font-weight: 450;
+        cursor: pointer;
+        transition: background var(--transition-fast) ease;
+      }
+      .conversation-menu button:hover { background: rgba(255, 255, 255, 0.08); }
+      .conversation-menu button.danger {
+        color: var(--danger);
+      }
+      .conversation-menu button.danger:hover {
+        background: rgba(239, 68, 68, 0.12);
+      }
+      .sidebar-footer {
+        padding-top: 8px;
+        border-top: 1px solid rgba(255, 255, 255, 0.04);
+        margin-top: 4px;
+      }
+      .logout-btn {
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+        border-radius: 8px;
+        width: 100%;
+        height: 38px;
+        text-align: left;
+        padding: 0 12px;
+        font-size: 14px;
+        font-weight: 450;
+        cursor: pointer;
+        transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
+      }
+      .logout-btn:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--text-main);
+      }
+
+      .main {
+        min-width: 0;
+        flex: 1;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        background: var(--bg-main);
+      }
+      .topbar {
+        height: 52px;
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        align-items: center;
+        padding: 0 16px;
+        background: var(--bg-main);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      }
+      .topbar-title {
+        justify-self: center;
+        color: var(--text-subtle);
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        max-width: 620px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: color var(--transition-fast) ease;
+      }
+      .topbar-spacer { width: 32px; height: 32px; }
+      .sidebar-toggle { display: none; }
+      .typing-indicator {
+        display: inline-flex;
+        gap: 5px;
+        align-items: center;
+        justify-content: center;
+        height: 20px;
+        padding: 0 4px;
+      }
+      .typing-indicator span {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background: var(--text-muted);
+        animation: typingPulse 1.2s infinite ease-in-out;
+      }
+      .typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
+      .typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
+      @keyframes typingPulse {
+        0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
+        40% { opacity: 1; transform: scale(1); }
+      }
+
+      .messages {
+        min-height: 0;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 20px 24px 0;
+        scroll-behavior: smooth;
+      }
+      .messages-column {
+        max-width: 760px;
+        margin: 0 auto;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding-bottom: 32px;
+      }
+      .message-row {
+        display: flex;
+        width: 100%;
+        animation: messageIn 300ms var(--ease-out);
+      }
+      @keyframes messageIn {
+        from { opacity: 0; transform: translateY(8px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      .message-row.user { justify-content: flex-end; }
+      .message-row.assistant { justify-content: flex-start; }
+      .assistant-wrap {
+        display: grid;
+        grid-template-columns: 30px minmax(0, 1fr);
+        gap: 14px;
+        width: 100%;
+        align-items: start;
+      }
+      .assistant-avatar {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background: linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        color: var(--text-title);
+        display: grid;
+        place-items: center;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        margin-top: 2px;
+      }
+      .assistant-content {
+        color: var(--text-main);
+        font-size: 15px;
+        line-height: 1.65;
+        word-break: break-word;
+      }
+      .assistant-content h2,
+      .assistant-content h3 {
+        color: var(--text-title);
+        letter-spacing: -0.02em;
+      }
+      .assistant-content h2 {
+        font-size: 18px;
+        font-weight: 600;
+        margin-top: 20px;
+      }
+      .assistant-content h3 {
+        font-size: 16px;
+        font-weight: 580;
+        margin-top: 16px;
+      }
+      .assistant-content h2:first-child,
+      .assistant-content h3:first-child {
+        margin-top: 0;
+      }
+      .assistant-content h2 + p,
+      .assistant-content h3 + p {
+        margin-top: 10px;
+      }
+      .assistant-content p {
+        margin: 0;
+      }
+      .assistant-content p + p {
+        margin-top: 14px;
+      }
+      .assistant-content ul, .assistant-content ol {
+        margin: 12px 0 0;
+        padding-left: 24px;
+      }
+      .assistant-content li {
+        padding-left: 4px;
+      }
+      .assistant-content li + li {
+        margin-top: 6px;
+      }
+      .assistant-content strong {
+        font-weight: 600;
+        color: var(--text-title);
+      }
+      .assistant-content code {
+        background: rgba(255, 255, 255, 0.07);
+        border-radius: 5px;
+        padding: 2px 7px;
+        font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 0.88em;
+        font-weight: 450;
+        letter-spacing: 0;
+      }
+      .assistant-content pre {
+        margin: 14px 0 0;
+        border-radius: 12px;
+        background: rgba(0, 0, 0, 0.25);
+        padding: 14px 16px;
+        overflow-x: auto;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+      }
+      .assistant-content pre code {
+        background: transparent;
+        border-radius: 0;
+        padding: 0;
+        font-size: 13px;
+        line-height: 1.55;
+        color: var(--text-subtle);
+      }
+      .user-bubble {
+        max-width: min(85%, 640px);
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.07);
+        padding: 12px 16px 13px;
+        line-height: 1.55;
+        font-size: 15px;
+        font-weight: 400;
+        white-space: pre-wrap;
+        word-break: break-word;
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+      }
+      .empty-state {
+        min-height: min(60vh, 520px);
+        display: grid;
+        place-items: center;
+        text-align: center;
+        animation: emptyFadeIn 500ms var(--ease-out);
+      }
+      @keyframes emptyFadeIn {
+        from { opacity: 0; transform: scale(0.98); }
+        to { opacity: 1; transform: scale(1); }
+      }
+      .empty-state-inner {
+        display: grid;
+        gap: 16px;
+        justify-items: center;
+      }
+      .empty-state .assistant-avatar {
+        width: 48px;
+        height: 48px;
+        font-size: 16px;
+        margin-bottom: 4px;
+      }
+      .empty-state-title {
+        font-size: clamp(24px, 4vw, 32px);
+        font-weight: 600;
+        color: var(--text-title);
+        letter-spacing: -0.025em;
+        line-height: 1.2;
+      }
+
+      .loading-skeleton {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 4px 0;
+      }
+      .skeleton-line {
+        height: 14px;
+        border-radius: 6px;
+        background: linear-gradient(90deg,
+          rgba(255, 255, 255, 0.04) 0%,
+          rgba(255, 255, 255, 0.08) 50%,
+          rgba(255, 255, 255, 0.04) 100%);
+        background-size: 200% 100%;
+        animation: shimmer 1.5s ease-in-out infinite;
+      }
+      .skeleton-line:nth-child(1) { width: 85%; }
+      .skeleton-line:nth-child(2) { width: 70%; }
+      .skeleton-line:nth-child(3) { width: 60%; }
+      @keyframes shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+
+      .streaming-cursor {
+        display: inline-block;
+        width: 2px;
+        height: 1.1em;
+        background: var(--text-muted);
+        margin-left: 2px;
+        vertical-align: text-bottom;
+        animation: cursorBlink 1s ease-in-out infinite;
+      }
+      @keyframes cursorBlink {
+        0%, 50% { opacity: 1; }
+        51%, 100% { opacity: 0; }
+      }
+
+      .composer {
+        padding: 0 20px 16px;
+      }
+      .composer-inner {
+        max-width: 760px;
+        margin: 0 auto;
+      }
+      .composer-shell {
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.06);
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
+        padding: 6px 6px 6px 18px;
+        transition: background var(--transition-fast) ease, box-shadow var(--transition-normal) ease,
+          transform var(--transition-normal) var(--ease-out);
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
+      }
+      .composer-shell:hover {
+        background: rgba(255, 255, 255, 0.07);
+      }
+      .composer-shell:focus-within {
+        background: rgba(255, 255, 255, 0.08);
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.25);
+        transform: translateY(-1px);
+      }
+      .composer-input {
+        border: 0;
+        outline: none;
+        background: transparent;
+        color: var(--text-main);
+        width: 100%;
+        min-height: 44px;
+        max-height: 200px;
+        resize: none;
+        font-size: 15px;
+        line-height: 1.5;
+        padding: 12px 0 10px;
+        overflow-y: hidden;
+        transition: height var(--transition-fast) ease;
+      }
+      .composer-input::placeholder {
+        color: var(--text-muted);
+        font-weight: 400;
+      }
+      .composer-input:disabled {
+        color: var(--text-muted);
+        cursor: not-allowed;
+      }
+      .send-btn {
+        border: 0;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: #ffffff;
+        color: #0a0a0a;
+        font-size: 18px;
+        font-weight: 600;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        flex-shrink: 0;
+        transition: opacity var(--transition-fast) ease, transform var(--transition-normal) var(--ease-spring),
+          box-shadow var(--transition-normal) ease;
+      }
+      .send-btn:disabled {
+        opacity: 0.25;
+        cursor: default;
+        transform: none;
+        box-shadow: none;
+      }
+      .send-btn:not(:disabled):hover {
+        transform: translateY(-2px) scale(1.04);
+        box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
+      }
+      .send-btn:not(:disabled):active {
+        transform: scale(0.94);
+        box-shadow: none;
+      }
+      .disclaimer {
+        text-align: center;
+        color: var(--text-muted);
+        font-size: 12px;
+        font-weight: 400;
+        margin-top: 12px;
+        letter-spacing: 0;
+      }
+
+      ::-webkit-scrollbar { width: 8px; height: 8px; }
+      ::-webkit-scrollbar-track { background: transparent; }
+      ::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.12);
+        border-radius: 4px;
+        border: 2px solid transparent;
+        background-clip: padding-box;
+      }
+      ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+      }
+
+      .sidebar-backdrop {
+        display: none;
+      }
+
+      @media (max-width: 900px) {
+        .shell { position: relative; }
+        .sidebar {
+          position: fixed;
+          inset: 0 auto 0 0;
+          transform: translateX(-100%);
+          transition: transform var(--transition-slow) var(--ease-out);
+          box-shadow: 16px 0 48px rgba(0, 0, 0, 0.5);
+          border-right: none;
+        }
+        .shell.sidebar-open .sidebar { transform: translateX(0); }
+        .sidebar-toggle { display: inline-flex; }
+        .topbar-spacer { display: none; }
+        .sidebar-backdrop {
+          display: block;
+          position: fixed;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.5);
+          backdrop-filter: blur(4px);
+          -webkit-backdrop-filter: blur(4px);
+          z-index: 15;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity var(--transition-slow) ease;
+        }
+        .shell.sidebar-open .sidebar-backdrop {
+          opacity: 1;
+          pointer-events: auto;
+        }
+        .shell:not(.sidebar-open) .sidebar-backdrop { display: none; }
+        .messages { padding: 12px 16px 0; }
+        .composer { padding: 0 14px 12px; }
+        .empty-state-title { font-size: clamp(22px, 5vw, 28px); }
+      }
+
+      @media (max-width: 480px) {
+        .composer-shell { padding: 5px 5px 5px 14px; }
+        .send-btn { width: 34px; height: 34px; }
+        .user-bubble { max-width: 90%; }
+      }
+
+      @media (prefers-color-scheme: light) {
+        /* Future light mode support hook */
+      }
+    </style>
+  </head>
+  <body>
+    <div id="auth" class="auth hidden">
+      <div class="auth-shell">
+        <div class="auth-avatar">A</div>
+        <form id="login-form" class="auth-card">
+          <h2 class="auth-title">AgentL</h2>
+          <p class="auth-text">Enter the configured passphrase to use this workspace.</p>
+          <input id="passphrase" class="auth-input" type="password" autocomplete="current-password" placeholder="Passphrase" required />
+          <button class="auth-submit" type="submit">Sign in</button>
+          <div id="login-error" class="error"></div>
+        </form>
+      </div>
+    </div>
+
+    <div id="app" class="shell hidden">
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <button id="mobile-close" class="icon-btn hidden" type="button" aria-label="Close sidebar">\u2715</button>
+          <button id="new-chat" class="new-chat-btn" type="button" aria-label="Create new chat">\u270E New chat</button>
+        </div>
+        <div id="conversation-list" class="conversation-list"></div>
+        <div class="sidebar-footer">
+          <button id="logout" class="logout-btn" type="button">Log out</button>
+        </div>
+      </aside>
+      <div id="sidebar-backdrop" class="sidebar-backdrop hidden"></div>
+
+      <section class="main">
+        <div class="topbar">
+          <button id="sidebar-toggle" class="icon-btn sidebar-toggle" type="button" aria-label="Open sidebar">\u2630</button>
+          <div id="chat-title" class="topbar-title">AgentL</div>
+          <div class="topbar-spacer">
+            <span id="connection-status" class="typing-indicator hidden"><span></span><span></span><span></span></span>
+          </div>
+        </div>
+        <div id="messages" class="messages">
+          <div class="empty-state">
+            <div class="empty-state-inner">
+              <div class="assistant-avatar">A</div>
+              <h1 class="empty-state-title">How can I help you today?</h1>
+            </div>
+          </div>
+        </div>
+        <form id="composer" class="composer">
+          <div class="composer-inner">
+            <div class="composer-shell">
+              <textarea id="prompt" class="composer-input" placeholder="Message AgentL..." rows="1"></textarea>
+              <button id="send" class="send-btn" type="submit" aria-label="Send message">\u2191</button>
+            </div>
+            <div class="disclaimer">AgentL can make mistakes. Check important info.</div>
+          </div>
+        </form>
+      </section>
+    </div>
+
+    <script>
+      const state = {
+        csrfToken: "",
+        conversations: [],
+        activeConversationId: null,
+        isStreaming: false,
+        openMenuConversationId: null
+      };
+
+      const elements = {
+        auth: document.getElementById("auth"),
+        app: document.getElementById("app"),
+        loginForm: document.getElementById("login-form"),
+        passphrase: document.getElementById("passphrase"),
+        loginError: document.getElementById("login-error"),
+        list: document.getElementById("conversation-list"),
+        newChat: document.getElementById("new-chat"),
+        messages: document.getElementById("messages"),
+        chatTitle: document.getElementById("chat-title"),
+        logout: document.getElementById("logout"),
+        composer: document.getElementById("composer"),
+        prompt: document.getElementById("prompt"),
+        send: document.getElementById("send"),
+        connectionStatus: document.getElementById("connection-status"),
+        shell: document.getElementById("app"),
+        sidebarToggle: document.getElementById("sidebar-toggle"),
+        mobileClose: document.getElementById("mobile-close"),
+        sidebarBackdrop: document.getElementById("sidebar-backdrop")
+      };
+
+      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 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");
+          elements.sidebarBackdrop.classList.add("hidden");
+          elements.mobileClose.classList.add("hidden");
+          return;
+        }
+        if (open) {
+          elements.shell.classList.add("sidebar-open");
+          elements.sidebarBackdrop.classList.remove("hidden");
+        } else {
+          elements.shell.classList.remove("sidebar-open");
+          elements.sidebarBackdrop.classList.add("hidden");
+        }
+        elements.mobileClose.classList.remove("hidden");
+      };
+
+      const closeConversationMenu = () => {
+        state.openMenuConversationId = null;
+        renderConversationList();
+      };
+
+      const renderConversationList = () => {
+        elements.list.innerHTML = "";
+        if (state.conversations.length === 0) {
+          const empty = document.createElement("div");
+          empty.className = "conversation-empty";
+          empty.textContent = "No conversations yet.";
+          elements.list.appendChild(empty);
+          return;
+        }
+
+        for (const conversation of state.conversations) {
+          const item = document.createElement("div");
+          item.className =
+            "conversation-item" +
+            (conversation.conversationId === state.activeConversationId ? " active" : "") +
+            (conversation.conversationId === state.openMenuConversationId ? " menu-open" : "");
+
+          const labelWrap = document.createElement("div");
+          labelWrap.className = "conversation-label-wrap";
+          const title = document.createElement("div");
+          title.className = "conversation-title";
+          title.textContent = conversation.title;
+          const meta = document.createElement("div");
+          meta.className = "conversation-meta";
+          meta.textContent = formatDate(conversation.updatedAt);
+          labelWrap.appendChild(title);
+          labelWrap.appendChild(meta);
+
+          const menuButton = document.createElement("button");
+          menuButton.type = "button";
+          menuButton.className = "menu-btn";
+          menuButton.textContent = "\u22EF";
+          menuButton.setAttribute("aria-label", "Conversation actions");
+
+          menuButton.addEventListener("click", (event) => {
+            event.stopPropagation();
+            state.openMenuConversationId =
+              state.openMenuConversationId === conversation.conversationId ? null : conversation.conversationId;
+            renderConversationList();
+          });
+
+          item.appendChild(labelWrap);
+          item.appendChild(menuButton);
+
+          item.addEventListener("click", async () => {
+            state.activeConversationId = conversation.conversationId;
+            state.openMenuConversationId = null;
+            renderConversationList();
+            await loadConversation(conversation.conversationId);
+            if (isMobile()) {
+              setSidebarOpen(false);
+            }
+          });
+
+          if (state.openMenuConversationId === conversation.conversationId) {
+            const menu = document.createElement("div");
+            menu.className = "conversation-menu";
+
+            const rename = document.createElement("button");
+            rename.type = "button";
+            rename.textContent = "Rename";
+            rename.addEventListener("click", async (event) => {
+              event.stopPropagation();
+              const nextTitle = window.prompt("Rename conversation", conversation.title);
+              if (!nextTitle) {
+                return;
+              }
+              await api("/api/conversations/" + encodeURIComponent(conversation.conversationId), {
+                method: "PATCH",
+                body: JSON.stringify({ title: nextTitle })
+              });
+              state.openMenuConversationId = null;
+              await loadConversations();
+              if (state.activeConversationId === conversation.conversationId) {
+                await loadConversation(conversation.conversationId);
+              }
+            });
+
+            const remove = document.createElement("button");
+            remove.type = "button";
+            remove.className = "danger";
+            remove.textContent = "Delete";
+            remove.addEventListener("click", async (event) => {
+              event.stopPropagation();
+              if (!window.confirm("Delete this conversation?")) {
+                return;
+              }
+              await api("/api/conversations/" + encodeURIComponent(conversation.conversationId), {
+                method: "DELETE"
+              });
+              if (state.activeConversationId === conversation.conversationId) {
+                state.activeConversationId = null;
+                elements.chatTitle.textContent = "AgentL";
+                renderMessages([]);
+              }
+              state.openMenuConversationId = null;
+              await loadConversations();
+            });
+
+            menu.appendChild(rename);
+            menu.appendChild(remove);
+            item.appendChild(menu);
+          }
+
+          elements.list.appendChild(item);
+        }
+      };
+
+      const renderMessages = (messages, isStreaming = false) => {
+        elements.messages.innerHTML = "";
+        if (!messages || messages.length === 0) {
+          const empty = document.createElement("div");
+          empty.className = "empty-state";
+          empty.innerHTML =
+            '<div class="empty-state-inner"><div class="assistant-avatar">A</div><h1 class="empty-state-title">How can I help you today?</h1></div>';
+          elements.messages.appendChild(empty);
+          return;
+        }
+
+        const column = document.createElement("div");
+        column.className = "messages-column";
+
+        for (let i = 0; i < messages.length; i++) {
+          const message = messages[i];
+          const isLastMessage = i === messages.length - 1;
+          const row = document.createElement("div");
+          row.className = "message-row " + (message.role === "assistant" ? "assistant" : "user");
+
+          if (message.role === "assistant") {
+            const wrapper = document.createElement("div");
+            wrapper.className = "assistant-wrap";
+            const avatar = document.createElement("div");
+            avatar.className = "assistant-avatar";
+            avatar.textContent = "A";
+            const content = document.createElement("div");
+            content.className = "assistant-content";
+
+            const messageContent = String(message.content || "");
+            if (isStreaming && isLastMessage && messageContent.length === 0) {
+              content.innerHTML = '<div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line"></div></div>';
+            } else {
+              let renderedHtml = renderAssistantMarkdown(messageContent);
+              if (isStreaming && isLastMessage) {
+                renderedHtml += '<span class="streaming-cursor"></span>';
+              }
+              content.innerHTML = renderedHtml;
+            }
+
+            wrapper.appendChild(avatar);
+            wrapper.appendChild(content);
+            row.appendChild(wrapper);
+          } else {
+            const bubble = document.createElement("div");
+            bubble.className = "user-bubble";
+            bubble.textContent = String(message.content || "");
+            row.appendChild(bubble);
+          }
+
+          column.appendChild(row);
+        }
+
+        elements.messages.appendChild(column);
+        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);
+      };
+
+      const createConversation = async (title) => {
+        const payload = await api("/api/conversations", {
+          method: "POST",
+          body: JSON.stringify(title ? { title } : {})
+        });
+        state.activeConversationId = payload.conversation.conversationId;
+        state.openMenuConversationId = null;
+        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;
+        elements.connectionStatus.classList.toggle("hidden", !value);
+      };
+
+      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: "" };
+        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 === "run:completed" && (!assistantMessage.content || assistantMessage.content.length === 0)) {
+                assistantMessage.content = String(payload.result?.response || "");
+                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();
+          if (state.conversations[0]) {
+            state.activeConversationId = state.conversations[0].conversationId;
+            await loadConversation(state.activeConversationId);
+          }
+        } catch (error) {
+          elements.loginError.textContent = error.message || "Login failed";
+        }
+      });
+
+      elements.newChat.addEventListener("click", async () => {
+        await createConversation();
+        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()) {
+          return;
+        }
+        const shouldOpen = !elements.shell.classList.contains("sidebar-open");
+        setSidebarOpen(shouldOpen);
+      });
+
+      elements.mobileClose.addEventListener("click", () => {
+        setSidebarOpen(false);
+      });
+
+      elements.sidebarBackdrop.addEventListener("click", () => {
+        setSidebarOpen(false);
+      });
+
+      elements.logout.addEventListener("click", async () => {
+        await api("/api/auth/logout", { method: "POST" });
+        state.activeConversationId = null;
+        state.openMenuConversationId = 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")) {
+          if (state.openMenuConversationId) {
+            closeConversationMenu();
+          }
+        }
+      });
+
+      window.addEventListener("resize", () => {
+        setSidebarOpen(false);
+      });
+
+      (async () => {
+        const authenticated = await requireAuth();
+        if (!authenticated) {
+          return;
+        }
+        await loadConversations();
+        if (state.conversations[0]) {
+          state.activeConversationId = state.conversations[0].conversationId;
+          await loadConversation(state.activeConversationId);
+          renderConversationList();
+        }
+        autoResizePrompt();
+      })();
+    </script>
+  </body>
+</html>`;
+
+export {
+  FileConversationStore,
+  SessionStore,
+  LoginRateLimiter,
+  parseCookies,
+  setCookie,
+  verifyPassphrase,
+  getRequestIp,
+  inferConversationTitle,
+  renderWebUiHtml
+};