Transition to Storage Bucket Public Folder

public/css/base.css

@@ -1,200 +0,0 @@
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
-
-body {
-  font-family: var(--font-sans);
-  background: var(--bg);
-  color: var(--text);
-  font-size: 15px;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-}
-
-#app {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-}
-
-button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
-a { color: var(--blue-bright); text-decoration: none; }
-a:hover { text-decoration: underline; }
-textarea { font: inherit; resize: none; }
-input { font: inherit; }
-
-.hidden { display: none !important; }
-
-/* Scrollbar — only show inside #chat-messages */
-::-webkit-scrollbar { width: 5px; height: 5px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 99px; }
-::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }
-
-/* Hide scrollbars globally except inside the chat messages container */
-html, body, #app, #main, .sidebar, .sidebar-sessions,
-#welcome-view, .welcome-view, #chat-view,
-.bottom-input-bar, .bottom-input-wrap,
-.bottom-textarea-wrap, .settings-pane {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-html::-webkit-scrollbar,
-body::-webkit-scrollbar,
-#app::-webkit-scrollbar,
-#main::-webkit-scrollbar,
-.sidebar::-webkit-scrollbar,
-#welcome-view::-webkit-scrollbar,
-.welcome-view::-webkit-scrollbar,
-.bottom-input-bar::-webkit-scrollbar,
-.bottom-input-wrap::-webkit-scrollbar,
-.bottom-textarea-wrap::-webkit-scrollbar {
-  display: none;
-}
-
-/* Only show scrollbar inside the actual chat messages container */
-#chat-messages {
-  scrollbar-width: thin;
-  scrollbar-color: var(--bg-active) transparent;
-}
-#chat-messages::-webkit-scrollbar { width: 5px; height: 5px; display: block; }
-
-/* Also keep scrollbar in modals and sidebar session list */
-.modal-box { scrollbar-width: thin; }
-.modal-box::-webkit-scrollbar { display: block; width: 5px; }
-.sidebar-sessions { scrollbar-width: thin; }
-.sidebar-sessions::-webkit-scrollbar { display: block; width: 4px; }
-
-/* Focus visible */
-:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
-
-/* Buttons */
-.btn-primary {
-  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  padding: 8px 18px; border-radius: var(--radius-full);
-  background: var(--yellow); color: #111; font-weight: 600; font-size: 14px;
-  transition: opacity var(--transition), transform var(--transition);
-}
-.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
-.btn-primary:active { transform: translateY(0); }
-
-.btn-ghost {
-  display: inline-flex; align-items: center; justify-content: center;
-  padding: 8px 16px; border-radius: var(--radius-full);
-  border: 1px solid var(--border-bright);
-  color: var(--text-dim); font-size: 14px;
-  transition: background var(--transition), color var(--transition);
-}
-.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
-
-.btn-danger {
-  display: inline-flex; align-items: center; justify-content: center;
-  padding: 8px 16px; border-radius: var(--radius-full);
-  background: rgba(220, 60, 60, 0.12); border: 1px solid rgba(220,60,60,0.3);
-  color: #f07070; font-size: 14px;
-  transition: background var(--transition);
-}
-.btn-danger:hover { background: rgba(220,60,60,0.22); }
-
-/* Toggle switch */
-.toggle-switch {
-  position: relative; display: inline-flex; align-items: center;
-  width: 36px; height: 20px; flex-shrink: 0;
-}
-.toggle-switch input { opacity: 0; width: 0; height: 0; }
-.toggle-track {
-  position: absolute; inset: 0;
-  background: var(--bg-active); border-radius: var(--radius-full);
-  transition: background var(--transition);
-  cursor: pointer;
-}
-.toggle-thumb {
-  position: absolute; left: 3px; top: 3px;
-  width: 14px; height: 14px; border-radius: 50%;
-  background: white; transition: transform var(--transition);
-  pointer-events: none;
-}
-.toggle-switch input:checked + .toggle-track { background: var(--yellow); }
-.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(16px); }
-
-/* Notification */
-.notifications {
-  position: fixed; bottom: 20px; right: 20px;
-  display: flex; flex-direction: column; gap: 8px;
-  z-index: var(--z-notify); pointer-events: none;
-}
-.notification {
-  display: flex; align-items: flex-start; gap: 10px;
-  padding: 10px 12px 10px 14px; border-radius: var(--radius-md);
-  background: var(--bg-raised); border: 1px solid var(--border-bright);
-  box-shadow: var(--shadow-md);
-  max-width: 360px; font-size: 13px; color: var(--text);
-  pointer-events: auto;
-  animation: slideInRight 0.22s ease;
-  position: relative;
-}
-.notification.warning { border-color: rgba(229,200,70,0.4); }
-.notification.error { border-color: rgba(220,60,60,0.4); }
-.notification.success { border-color: rgba(45,212,166,0.4); }
-.notification .notif-close {
-  position: absolute;
-  top: 6px;
-  right: 8px;
-  color: var(--text-muted); font-size: 15px;
-  background: none; border: none; cursor: pointer;
-  line-height: 1; padding: 2px 4px;
-  border-radius: 4px;
-  transition: color var(--transition), background var(--transition);
-}
-.notification .notif-close:hover {
-  color: var(--text); background: var(--bg-hover);
-}
-
-/* Share banner */
-.share-banner {
-  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
-  background: linear-gradient(90deg, #1a1b20, #22242b);
-  border-bottom: 1px solid var(--border-bright);
-  padding: 10px 20px;
-}
-.share-banner-inner {
-  display: flex; align-items: center; gap: 12px; max-width: 800px; margin: 0 auto;
-  font-size: 14px;
-}
-.share-icon { font-size: 18px; }
-
-/* Markdown bullet points — proper indentation */
-.msg-assistant ul,
-.msg-assistant ol,
-.msg-user ul,
-.msg-user ol {
-  padding-left: 1.6em;
-  margin: 6px 0;
-}
-.msg-assistant li,
-.msg-user li {
-  margin-bottom: 2px;
-  padding-left: 0.2em;
-}
-.msg-assistant ul li::marker,
-.msg-user ul li::marker {
-  color: var(--text-dim);
-}
-
-/* Animations */
-@keyframes slideInRight {
-  from { transform: translateX(20px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes slideUp {
-  from { transform: translateY(12px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}

public/css/chat.css

@@ -1,569 +0,0 @@
-/* ── Main layout ─────────────────────────────────────────────────────────── */
-#main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-}
-
-/* ── Welcome view ────────────────────────────────────────────────────────── */
-.welcome-view {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 24px;
-  gap: 32px;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.welcome-title {
-  font-size: clamp(26px, 4vw, 44px);
-  font-weight: 300;
-  letter-spacing: -0.03em;
-  color: var(--text);
-  text-align: center;
-}
-
-.welcome-input-wrap {
-  width: 100%;
-  max-width: 760px;
-}
-
-/* ── Chat view ───────────────────────────────────────────────────────────── */
-.chat-view {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 24px 0 8px;
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-messages {
-  width: 100%;
-  max-width: 780px;
-  margin: 0 auto;
-  padding: 0 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-/* ── Message group ───────────────────────────────────────────────────────── */
-.msg-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  position: relative;
-  /* Extra bottom space so action buttons don't clip into next group */
-  margin-bottom: 18px;
-}
-
-/* User bubble — aligned right */
-.msg-user {
-  align-self: flex-end;
-  max-width: 78%;
-  padding: 10px 16px;
-  background: var(--bg-raised);
-  border: 1px solid var(--border);
-  border-radius: 18px 18px 4px 18px;
-  font-size: 15px;
-  color: var(--text);
-  word-break: break-word;
-  position: relative;
-}
-
-/* User bubble editing state */
-.msg-user.editing-user {
-  max-width: 86%;
-  width: 86%;
-  align-self: flex-end;
-  border-radius: var(--radius-lg);
-  border-color: rgba(74,158,255,0.4);
-  box-shadow: 0 0 0 2px rgba(74,158,255,0.08);
-  padding: 12px 14px 10px;
-}
-
-/* Assistant bubble - transparent */
-.msg-assistant {
-  align-self: flex-start;
-  max-width: 92%;
-  padding: 4px 0;
-  font-size: 15px;
-  color: var(--text);
-  word-break: break-word;
-  position: relative;
-}
-
-/* Assistant editing state */
-.msg-assistant.editing {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid var(--border-bright);
-  border-radius: var(--radius-lg);
-  padding: 14px 16px 52px;
-  width: 100%;
-  max-width: 100%;
-  box-shadow: 0 0 0 2px rgba(74,158,255,0.1);
-}
-
-/* ── Version navigator ───────────────────────────────────────────────────── */
-/*
- * Sits BELOW the user bubble, right-aligned, always visible when present.
- * (Version nav is only added to user messages.)
- */
-.msg-version-nav {
-  align-self: flex-end;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  font-size: 12px;
-  color: var(--text-muted);
-  margin-top: 3px;
-  /* Always visible — no opacity:0 trick since it's structural */
-}
-
-.msg-version-nav button {
-  display: flex; align-items: center; justify-content: center;
-  width: 22px; height: 22px; border-radius: 50%;
-  color: var(--text-muted);
-  font-size: 16px; line-height: 1;
-  transition: color var(--transition), background var(--transition);
-}
-.msg-version-nav button:hover:not(:disabled) { color: var(--text); background: var(--bg-hover); }
-.msg-version-nav button:disabled { opacity: 0.3; cursor: default; }
-
-/* ── Message action buttons ──────────────────────────────────────────────── */
-/*
- * Action buttons live BELOW their bubble in the flex column.
- * They fade in on group hover.
- */
-.msg-actions {
-  display: flex;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity var(--transition);
-  pointer-events: none;
-  margin-top: 4px;
-}
-
-/* User actions: right-aligned */
-.msg-actions-right {
-  align-self: flex-end;
-  flex-direction: row-reverse;
-}
-
-/* Assistant actions: left-aligned with a tiny top gap */
-.msg-actions-left {
-  align-self: flex-start;
-  padding-top: 1px;
-}
-
-.msg-group:hover .msg-actions,
-.msg-group:focus-within .msg-actions {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.msg-action-btn {
-  display: flex; align-items: center; justify-content: center;
-  width: 26px; height: 26px;
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  transition: color var(--transition), background var(--transition);
-}
-.msg-action-btn:hover { color: var(--text); background: var(--bg-hover); }
-
-/* Edit toolbar (assistant bubble) */
-.edit-actions {
-  position: absolute;
-  bottom: 10px;
-  right: 12px;
-  display: flex;
-  gap: 6px;
-}
-
-/* ── Edit toolbar for user messages ─────────────────────────────────────── */
-.edit-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border);
-}
-
-.edit-tool-row {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  flex-wrap: wrap;
-  flex: 1;
-}
-
-.edit-tool-btn {
-  /* Inherits .tool-btn-sm styles */
-}
-
-.edit-attach-btn {
-  display: flex; align-items: center; justify-content: center;
-  width: 26px; height: 26px;
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  border: 1px solid var(--border-bright);
-  transition: color var(--transition), background var(--transition);
-  flex-shrink: 0;
-}
-.edit-attach-btn:hover { color: var(--text); background: var(--bg-hover); }
-
-.edit-btn-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.edit-send-btn {
-  display: inline-flex; align-items: center; gap: 5px;
-  font-size: 12px !important;
-  padding: 5px 12px !important;
-}
-
-.edit-file-preview-row {
-  display: none;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 4px 0 0;
-}
-
-/* ── Thinking animation ──────────────────────────────────────────────────── */
-.msg-thinking {
-  display: flex; gap: 4px; align-items: center;
-  padding: 10px 0;
-}
-.thinking-dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--text-muted);
-  animation: thinkBounce 1.4s infinite ease-in-out;
-}
-.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
-.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
-@keyframes thinkBounce {
-  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
-  40% { transform: translateY(-6px); opacity: 1; }
-}
-
-/* ── Code blocks ─────────────────────────────────────────────────────────── */
-.code-block {
-  margin: 10px 0;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background: #0d0e11;
-}
-[data-theme="light"] .code-block { background: #1a1b20; }
-
-.code-header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 6px 14px;
-  background: rgba(255,255,255,0.04);
-  border-bottom: 1px solid var(--border);
-}
-.code-lang {
-  font-size: 12px; font-family: var(--font-mono);
-  color: var(--text-muted);
-}
-.code-copy-btn {
-  font-size: 11px; color: var(--text-muted);
-  padding: 2px 8px; border-radius: 4px;
-  cursor: pointer;
-  transition: color var(--transition), background var(--transition);
-}
-.code-copy-btn:hover { color: var(--text); background: var(--bg-hover); }
-
-.code-block pre {
-  padding: 14px 16px;
-  overflow-x: auto;
-  font-size: 13px;
-  font-family: var(--font-mono);
-  line-height: 1.6;
-  color: #e2e8f0;
-}
-
-.code-block pre code,
-.code-block code {
-  background: none !important;
-  padding: 0 !important;
-  border-radius: 0 !important;
-  font-size: inherit !important;
-  color: inherit !important;
-}
-
-/* Inline code */
-.msg-assistant .inline-code,
-.msg-user .inline-code,
-.msg-assistant > p > code,
-.msg-user > p > code {
-  font-family: var(--font-mono);
-  font-size: 0.88em;
-  background: var(--bg-active);
-  padding: 1px 5px;
-  border-radius: 4px;
-}
-
-/* Tables */
-.msg-assistant table {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 10px 0;
-  font-size: 14px;
-}
-.msg-assistant th, .msg-assistant td {
-  border: 1px solid var(--border-bright);
-  padding: 7px 12px;
-  text-align: left;
-}
-.msg-assistant th { background: var(--bg-raised); font-weight: 600; }
-.msg-assistant tr:nth-child(even) { background: rgba(255,255,255,0.02); }
-
-/* Images/video/audio in chat */
-.msg-media {
-  max-width: 420px;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  margin: 8px 0;
-  position: relative;
-}
-.msg-media img {
-  display: block; width: 100%;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: opacity var(--transition);
-}
-.msg-media img:hover { opacity: 0.9; }
-.msg-media video, .msg-media audio {
-  width: 100%;
-  border-radius: var(--radius-md);
-}
-.media-download-btn {
-  position: absolute; top: 8px; right: 8px;
-  padding: 4px 10px; border-radius: var(--radius-full);
-  background: rgba(0,0,0,0.6); color: white; font-size: 11px;
-  opacity: 0; transition: opacity var(--transition);
-}
-.msg-media:hover .media-download-btn { opacity: 1; }
-
-/* Tool call bubble */
-.msg-tool-call {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 4px 10px; border-radius: var(--radius-full);
-  background: var(--bg-raised); border: 1px solid var(--border);
-  font-size: 12px; color: var(--text-dim);
-  cursor: pointer; margin: 4px 0;
-  transition: border-color var(--transition), color var(--transition);
-}
-.msg-tool-call:hover { border-color: var(--blue-bright); color: var(--text); }
-.msg-tool-call svg { color: var(--yellow); }
-
-/* Span colors from AI */
-span[data-color="green"]  { color: #4ade80; }
-span[data-color="blue"]   { color: #60a5fa; }
-span[data-color="red"]    { color: #f87171; }
-span[data-color="orange"] { color: #fb923c; }
-span[data-color="yellow"] { color: #facc15; }
-span[data-color="purple"] { color: #c084fc; }
-span[data-color="teal"]   { color: #2dd4bf; }
-span[data-color="gold"]   { color: #e5c846; }
-span[data-color="coral"]  { color: #f97316; }
-span[data-color="pink"]   { color: #f472b6; }
-
-/* Pasted content chip */
-.pasted-chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 4px 10px; border-radius: var(--radius-full);
-  background: var(--bg-raised); border: 1px solid var(--border-bright);
-  font-size: 12px; color: var(--text-dim); cursor: pointer;
-  margin: 4px 0;
-}
-.pasted-chip .chip-remove {
-  width: 14px; height: 14px; border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 10px; color: var(--text-muted);
-  transition: background var(--transition);
-}
-.pasted-chip .chip-remove:hover { background: var(--bg-hover); color: var(--text); }
-
-/* Attached image thumb */
-.attach-thumb {
-  display: inline-block;
-  width: 48px; height: 48px;
-  border-radius: var(--radius-sm); overflow: hidden;
-  position: relative; cursor: pointer;
-}
-.attach-thumb img { width: 100%; height: 100%; object-fit: cover; }
-.attach-thumb .thumb-remove {
-  position: absolute; top: -4px; right: -4px;
-  width: 16px; height: 16px; border-radius: 50%;
-  background: var(--bg); border: 1px solid var(--border-bright);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 9px; color: var(--text);
-}
-
-/* SVG side panel */
-#svg-panel {
-  position: fixed; right: 0; top: 0; bottom: 0;
-  width: 320px; background: var(--bg-surface);
-  border-left: 1px solid var(--border-bright);
-  z-index: 200; display: flex; flex-direction: column;
-  animation: slideInRight 0.2s ease;
-}
-#svg-panel-header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 16px; border-bottom: 1px solid var(--border);
-}
-#svg-panel-content { flex: 1; overflow: auto; padding: 16px; }
-#svg-panel img { max-width: 100%; border-radius: var(--radius-sm); }
-
-/* Generating animation */
-.msg-generating {
-  animation: generatingGlow 2s ease infinite;
-}
-@keyframes generatingGlow {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.75; }
-}
-
-/* ══════════════════════════════════════════════════════════════════════════
-   MOBILE CHAT
-   ══════════════════════════════════════════════════════════════════════════ */
-
-@media (max-width: 768px) {
-
-  /* Main: full height, strict no-overflow */
-  #main {
-    height: 100dvh;
-    max-height: 100dvh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* Chat view: the only vertical scrollbar */
-  .chat-view {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
-    overscroll-behavior-y: contain;
-    /* Account for fixed top bar */
-    padding-top: 4px;
-  }
-
-  /* Welcome view: centered, no scroll */
-  .welcome-view {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding-top: 0 !important;
-    padding-bottom: 40px !important;
-    gap: 20px !important;
-  }
-
-  .welcome-title {
-    text-align: center;
-    font-size: clamp(22px, 6vw, 36px) !important;
-  }
-
-  /* Messages: no extra horizontal overflow */
-  .chat-messages {
-    padding: 0 12px;
-    max-width: 100%;
-    /* Ensure nothing bleeds sideways */
-    overflow-x: hidden;
-  }
-
-  /* Bubbles */
-  .msg-user {
-    max-width: 88%;
-    font-size: 14px;
-    padding: 9px 14px;
-  }
-
-  .msg-user.editing-user {
-    max-width: 98%;
-    width: 98%;
-  }
-
-  .msg-assistant {
-    max-width: 100%;
-    font-size: 14px;
-  }
-
-  /* Code blocks: horizontal scroll only */
-  .code-block {
-    overflow: hidden;
-  }
-
-  .code-block pre {
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    font-size: 12px;
-  }
-
-  /* Tables: horizontal scroll only */
-  .msg-assistant table {
-    display: block;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    max-width: 100%;
-  }
-
-  /* Edit toolbar on mobile: stack tool row and button row */
-  .edit-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .edit-tool-row {
-    flex-wrap: wrap;
-  }
-
-  /* On mobile, hide tool label text in edit toolbar */
-  .edit-tool-btn span {
-    display: none;
-  }
-  .edit-tool-btn {
-    padding: 3px 6px;
-    min-width: 28px;
-    justify-content: center;
-  }
-
-  .edit-btn-row {
-    justify-content: flex-end;
-  }
-
-  /* Action buttons: always show on mobile (no hover) */
-  .msg-actions {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  /* Version nav: always visible, compact */
-  .msg-version-nav {
-    font-size: 11px;
-  }
-}

public/css/input.css

@@ -1,413 +0,0 @@
-/* ── Center (welcome) input ──────────────────────────────────────────────── */
-.center-input-container {
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-raised);
-  border: 1px solid var(--border-bright);
-  border-radius: var(--radius-xl);
-  padding: 12px 14px 10px;
-  gap: 10px;
-  box-shadow: var(--shadow-md);
-  transition: border-color var(--transition), box-shadow var(--transition);
-}
-.center-input-container:focus-within {
-  border-color: rgba(74,158,255,0.4);
-  box-shadow: var(--shadow-glow-blue);
-}
-
-.center-textarea {
-  width: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--text);
-  font-size: 16px;
-  line-height: 1.55;
-  min-height: 26px;
-  max-height: calc(1.55em * 6 + 24px);
-  overflow-y: auto;
-  padding: 0 4px;
-}
-.center-textarea::placeholder { color: var(--text-muted); }
-
-.center-input-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.tool-btn {
-  display: flex; align-items: center; justify-content: center;
-  width: 30px; height: 30px;
-  border-radius: var(--radius-md);
-  color: var(--text-muted);
-  transition: color var(--transition), background var(--transition);
-}
-.tool-btn:hover { color: var(--text); background: var(--bg-hover); }
-.tool-btn.active { color: var(--yellow); background: var(--yellow-glow); }
-
-.send-btn-center {
-  display: flex; align-items: center; justify-content: center;
-  width: 34px; height: 34px; border-radius: 50%;
-  background: var(--yellow); color: #111;
-  margin-left: auto;
-  transition: opacity var(--transition), transform var(--transition);
-  flex-shrink: 0;
-}
-.send-btn-center:hover { opacity: 0.88; transform: scale(1.05); }
-.send-btn-center:disabled { opacity: 0.4; transform: none; }
-
-/* Attach btn beside center input */
-.attach-btn-wrap {
-  display: flex;
-  align-items: flex-end;
-}
-.attach-btn {
-  display: flex; align-items: center; justify-content: center;
-  width: 34px; height: 34px; border-radius: 50%;
-  color: var(--text-muted);
-  border: 1px solid var(--border-bright);
-  transition: color var(--transition), background var(--transition);
-}
-.attach-btn:hover { color: var(--text); background: var(--bg-hover); }
-
-/* ── Bottom input bar ────────────────────────────────────────────────────── */
-.bottom-input-bar {
-  flex-shrink: 0;
-  padding: 0 24px 4px;
-}
-
-.file-preview-row {
-  display: flex; flex-wrap: wrap; gap: 8px;
-  padding: 0 0 8px;
-  max-width: 760px; margin: 0 auto;
-}
-
-.bottom-input-wrap {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  max-width: 760px;
-  margin: 0 auto;
-  background: var(--bg-raised);
-  border: 1px solid var(--border-bright);
-  border-radius: var(--radius-xl);
-  padding: 8px 10px;
-  box-shadow: var(--shadow-md);
-  transition: border-color var(--transition), box-shadow var(--transition);
-}
-.bottom-input-wrap:focus-within {
-  border-color: rgba(74,158,255,0.4);
-  box-shadow: var(--shadow-glow-blue);
-}
-
-.attach-btn-bottom {
-  flex-shrink: 0;
-  display: flex; align-items: center; justify-content: center;
-  width: 34px; height: 34px; border-radius: 50%;
-  color: var(--text-muted);
-  border: 1px solid var(--border-bright);
-  margin-bottom: 4px;
-  transition: color var(--transition), background var(--transition);
-}
-.attach-btn-bottom:hover { color: var(--text); background: var(--bg-hover); }
-
-.bottom-textarea-wrap {
-  flex: 1; min-width: 0;
-  display: flex; flex-direction: column; gap: 6px;
-}
-
-.tool-row {
-  display: flex; gap: 4px;
-}
-
-.tool-btn-sm {
-  display: inline-flex; align-items: center; gap: 5px;
-  padding: 3px 9px; border-radius: var(--radius-full);
-  font-size: 12px; color: var(--text-muted);
-  border: 1px solid transparent;
-  transition: color var(--transition), border-color var(--transition), background var(--transition);
-}
-.tool-btn-sm:hover { color: var(--text); border-color: var(--border-bright); }
-.tool-btn-sm.active {
-  color: var(--yellow);
-  border-color: rgba(229,200,70,0.3);
-  background: var(--yellow-glow);
-}
-
-.bottom-textarea {
-  width: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--text);
-  font-size: 15px;
-  line-height: 1.55;
-  min-height: calc(1.55em + 2px);
-  max-height: calc(1.55em * 6 + 2px);
-  overflow-y: auto;
-  padding: 0;
-}
-.bottom-textarea::placeholder { color: var(--text-muted); }
-
-.send-btn-bottom {
-  flex-shrink: 0;
-  display: flex; align-items: center; justify-content: center;
-  width: 34px; height: 34px; border-radius: 50%;
-  background: var(--yellow); color: #111;
-  margin-bottom: 2px;
-  transition: opacity var(--transition), transform var(--transition), background var(--transition);
-}
-.send-btn-bottom:hover { opacity: 0.88; transform: scale(1.05); }
-.send-btn-bottom:disabled { opacity: 0.4; transform: none; cursor: not-allowed; }
-.send-btn-bottom.stop { background: var(--bg-active); color: var(--text); border: 1px solid var(--border-bright); }
-
-/* ── Attachment previews inside inputs ───────────────────────────────────── */
-.input-file-preview-row {
-  display: none;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 6px 4px 2px;
-}
-
-.center-input-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 6px;
-}
-
-.attach-preview-item {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.attach-preview-item img {
-  width: 52px;
-  height: 52px;
-  object-fit: cover;
-  border-radius: var(--radius-sm);
-  display: block;
-  border: 1px solid var(--border-bright);
-}
-
-.attach-preview-remove {
-  position: absolute;
-  top: -5px;
-  right: -5px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--bg-raised);
-  border: 1px solid var(--border-bright);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  color: var(--text);
-  cursor: pointer;
-  z-index: 1;
-  line-height: 1;
-}
-.attach-preview-remove:hover { background: var(--bg-hover); }
-
-/* ── File chip (text attachments) ────────────────────────────────────────── */
-.file-attachment-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 6px 10px;
-  border-radius: var(--radius-sm);
-  background: var(--bg-hover);
-  border: 1px solid var(--border-bright);
-  cursor: pointer;
-  max-width: 180px;
-  transition: background var(--transition), border-color var(--transition);
-  font-size: 12px;
-  color: var(--text-dim);
-  min-height: 40px;
-}
-.file-attachment-chip:hover {
-  background: var(--bg-active);
-  border-color: rgba(74,158,255,0.4);
-  color: var(--text);
-}
-.file-attachment-chip .chip-icon {
-  font-size: 18px;
-  flex-shrink: 0;
-}
-.file-attachment-chip .chip-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: 500;
-  font-size: 12px;
-}
-.file-attachment-chip .chip-meta {
-  font-size: 10px;
-  color: var(--text-muted);
-  white-space: nowrap;
-}
-
-/* In a sent message — shown inside the message bubble */
-.msg-file-attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
-}
-
-/* ── TOS banner ──────────────────────────────────────────────────────────── */
-#tos-banner {
-  font-size: 12px;
-  color: rgba(255,255,255,0.45);
-  padding: 5px 10px;
-  width: 100%;
-  text-align: center;
-  background-color: var(--bg);
-  border-top: 1px solid var(--border);
-  order: 999;
-  flex-shrink: 0;
-}
-#tos-banner p { margin: 0; }
-#tos-banner a {
-  color: rgba(255,255,255,0.7);
-  text-decoration: underline;
-}
-[data-theme="light"] #tos-banner {
-  color: rgba(0,0,0,0.4);
-}
-[data-theme="light"] #tos-banner a {
-  color: rgba(0,0,0,0.65);
-}
-
-/* ── Mobile: hide tool button text labels, show icons only ───────────────── */
-@media (max-width: 600px) {
-  .tool-btn-sm span {
-    display: none;
-  }
-  .tool-btn-sm {
-    padding: 3px 6px;
-    min-width: 28px;
-    justify-content: center;
-  }
-
-  /* Adjust TOS banner for mobile */
-  #tos-banner {
-    font-size: 10px;
-    padding: 4px 10px;
-  }
-}
-
-/* ══════════════════════════════════════════════════════════════════════════
-   MOBILE INPUT — Top bar chrome, TOS at bottom, no overflow
-   ══════════════════════════════════════════════════════════════════════════ */
-
-@media (max-width: 768px) {
-
-  /* ── Mobile top header bar (new chat + sidebar buttons) ── */
-  #mobile-top-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 16px;
-    background: var(--bg);
-    border-bottom: 1px solid var(--border);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 52px;
-    z-index: 90;
-    transform: translateY(0);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    flex-shrink: 0;
-  }
-
-  #mobile-top-bar.hidden-bar {
-    transform: translateY(-100%);
-  }
-
-  #mobile-top-bar .mobile-bar-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--text);
-    letter-spacing: -0.01em;
-  }
-
-  #mobile-top-bar .mobile-bar-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border-radius: var(--radius-md);
-    color: var(--text-dim);
-    transition: background var(--transition), color var(--transition);
-  }
-
-  #mobile-top-bar .mobile-bar-btn:hover,
-  #mobile-top-bar .mobile-bar-btn:active {
-    background: var(--bg-hover);
-    color: var(--text);
-  }
-
-  /* ── TOS banner: at bottom of main ── */
-  #tos-banner {
-    font-size: 10px;
-    padding: 4px 14px;
-    border-top: 1px solid var(--border);
-    order: 999;
-    flex-shrink: 0;
-  }
-
-  /* ── Main area: padded for top bar + TOS ── */
-  #main {
-    padding-top: 52px;
-  }
-
-  /* ── Bottom input bar: sits just above TOS ── */
-  .bottom-input-bar {
-    padding: 0 12px 4px !important;
-  }
-
-  /* ── Welcome view: truly vertically centered ── */
-  .welcome-view {
-    padding-top: 0 !important;
-    padding-bottom: 20px !important;
-    justify-content: center !important;
-    align-items: center !important;
-    height: 100% !important;
-    gap: 20px !important;
-  }
-
-  .welcome-title {
-    text-align: center;
-    font-size: clamp(22px, 6vw, 36px) !important;
-  }
-
-  .welcome-input-wrap {
-    width: 100%;
-    padding: 0 4px;
-  }
-
-  /* Input wrap: tighter on mobile */
-  .bottom-input-wrap,
-  .center-input-container {
-    padding: 6px 8px;
-  }
-
-  /* Prevent any horizontal overflow */
-  .center-input-container,
-  .bottom-input-wrap {
-    max-width: 100%;
-  }
-}
-
-/* Desktop: never show the mobile top bar */
-@media (min-width: 769px) {
-  #mobile-top-bar {
-    display: none !important;
-  }
-}

public/css/modals.css

@@ -1,212 +0,0 @@
-/* ── Modal overlay ───────────────────────────────────────────────────────── */
-.modal-overlay {
-  position: fixed; inset: 0;
-  background: rgba(0,0,0,0.6);
-  backdrop-filter: blur(4px);
-  z-index: var(--z-modal);
-  display: flex; align-items: center; justify-content: center;
-  padding: 24px;
-  animation: fadeIn 0.16s ease;
-}
-
-.modal-box {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-bright);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  width: 100%; max-width: 560px;
-  max-height: 88vh; overflow-y: auto;
-  animation: slideUp 0.2s ease;
-  position: relative;
-}
-
-.modal-header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 20px 24px 0;
-  position: sticky; top: 0;
-  background: var(--bg-surface);
-  z-index: 1;
-}
-.modal-title { font-size: 17px; font-weight: 600; }
-.modal-close {
-  width: 30px; height: 30px;
-  display: flex; align-items: center; justify-content: center;
-  border-radius: var(--radius-md); color: var(--text-muted);
-  transition: color var(--transition), background var(--transition);
-}
-.modal-close:hover { color: var(--text); background: var(--bg-hover); }
-
-.modal-body { padding: 20px 24px; }
-.modal-footer {
-  display: flex; justify-content: flex-end; gap: 8px;
-  padding: 0 24px 20px;
-  position: sticky; bottom: 0;
-  background: var(--bg-surface);
-}
-
-/* Wide modal (settings) */
-.modal-box.wide { max-width: 720px; }
-
-/* ── Settings modal tabs ─────────────────────────────────────────────────── */
-.settings-tabs {
-  display: flex; gap: 2px;
-  border-bottom: 1px solid var(--border);
-  padding: 0 24px;
-  margin-bottom: 20px;
-}
-.settings-tab {
-  padding: 10px 16px;
-  font-size: 13px; font-weight: 500; color: var(--text-dim);
-  border-bottom: 2px solid transparent;
-  transition: color var(--transition), border-color var(--transition);
-  cursor: pointer;
-}
-.settings-tab:hover { color: var(--text); }
-.settings-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }
-
-.settings-pane { display: none; }
-.settings-pane.active { display: block; }
-
-/* ── Form elements inside modals ─────────────────────────────────────────── */
-.form-group {
-  display: flex; flex-direction: column; gap: 6px;
-  margin-bottom: 16px;
-}
-.form-label {
-  font-size: 13px; font-weight: 500; color: var(--text-dim);
-}
-.form-input {
-  padding: 9px 12px;
-  border-radius: var(--radius-md);
-  background: var(--input-bg);
-  border: 1px solid var(--input-border);
-  color: var(--text); font-size: 14px;
-  transition: border-color var(--transition), box-shadow var(--transition);
-  width: 100%;
-}
-.form-input:focus {
-  outline: none;
-  border-color: rgba(74,158,255,0.5);
-  box-shadow: 0 0 0 3px rgba(74,158,255,0.1);
-}
-.form-hint {
-  font-size: 12px; color: var(--text-muted);
-}
-.form-error {
-  font-size: 12px; color: #f87171;
-}
-
-/* ── Setting row ─────────────────────────────────────────────────────────── */
-.setting-row {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--border);
-  gap: 16px;
-}
-.setting-row:last-child { border-bottom: none; }
-.setting-label { font-size: 14px; font-weight: 500; }
-.setting-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
-
-/* ── Sign in modal ───────────────────────────────────────────────────────── */
-.auth-tabs {
-  display: flex; gap: 0;
-  border: 1px solid var(--border-bright);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-.auth-tab {
-  flex: 1; padding: 9px;
-  text-align: center; font-size: 14px; font-weight: 500;
-  color: var(--text-dim); cursor: pointer;
-  transition: background var(--transition), color var(--transition);
-}
-.auth-tab.active { background: var(--yellow); color: #111; }
-
-.social-btn {
-  display: flex; align-items: center; justify-content: center; gap: 10px;
-  width: 100%; padding: 10px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-bright);
-  background: var(--bg-raised);
-  font-size: 14px; color: var(--text);
-  transition: background var(--transition);
-}
-.social-btn:hover { background: var(--bg-hover); }
-
-.auth-divider {
-  display: flex; align-items: center; gap: 12px;
-  margin: 16px 0;
-  font-size: 12px; color: var(--text-muted);
-}
-.auth-divider::before, .auth-divider::after {
-  content: ''; flex: 1; height: 1px; background: var(--border);
-}
-
-/* ── Device session list ─────────────────────────────────────────────────── */
-.device-session-item {
-  display: flex; align-items: flex-start; gap: 12px;
-  padding: 12px 0; border-bottom: 1px solid var(--border);
-  cursor: pointer;
-  transition: background var(--transition);
-}
-.device-session-item:hover { background: var(--bg-hover); padding-left: 4px; }
-.device-badge {
-  width: 32px; height: 32px; border-radius: 50%;
-  background: var(--bg-raised); border: 1px solid var(--border-bright);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 14px; flex-shrink: 0;
-}
-.device-info { flex: 1; min-width: 0; }
-.device-name { font-size: 13px; font-weight: 500; }
-.device-meta { font-size: 12px; color: var(--text-muted); }
-.device-current { font-size: 11px; color: var(--plan-core); }
-
-/* ── Tool call modal ─────────────────────────────────────────────────────── */
-.tool-detail-section { margin-bottom: 14px; }
-.tool-detail-label {
-  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
-  color: var(--text-muted); margin-bottom: 5px;
-}
-.tool-detail-content {
-  background: var(--bg-raised);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-  font-size: 13px; font-family: var(--font-mono);
-  white-space: pre-wrap; word-break: break-all;
-  max-height: 200px; overflow-y: auto;
-}
-
-/* ── Share warning ───────────────────────────────────────────────────────── */
-.share-warning {
-  display: flex; align-items: center; gap: 8px;
-  padding: 10px 12px; border-radius: var(--radius-md);
-  background: rgba(229,200,70,0.08);
-  border: 1px solid rgba(229,200,70,0.25);
-  margin-bottom: 16px;
-  font-size: 13px; color: var(--yellow);
-}
-
-/* ── Sign in required modal ──────────────────────────────────────────────── */
-.limit-modal-inner {
-  text-align: center; padding: 10px 0 6px;
-}
-.limit-icon { font-size: 40px; margin-bottom: 12px; }
-.limit-title { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
-.limit-desc { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }
-
-/* ── Turnstile verification overlay ─────────────────────────────────────── */
-.turnstile-overlay { display: flex; align-items: center; justify-content: center; }
-.turnstile-box {
-  background: rgba(17,17,19,0.96);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-  width: 100%; max-width: 420px;
-  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
-  text-align: center; color: var(--text);
-}
-.turnstile-message { margin-bottom: 12px; color: var(--text-dim); font-size: 14px; }
-
-/* make the rest of the page dim and inert while overlay visible */
-.page-faded { filter: blur(2px) brightness(0.6); pointer-events: none; user-select: none; }

public/css/sidebar.css

@@ -1,404 +0,0 @@
-/* ── Sidebar layout ──────────────────────────────────────────────────────── */
-.sidebar {
-  flex-shrink: 0;
-  width: var(--sidebar-collapsed-width);
-  height: 100vh;
-  background: var(--sidebar-bg);
-  border-right: 1px solid var(--sidebar-border);
-  display: flex;
-  flex-direction: column;
-  transition: width var(--transition-slow);
-  overflow: hidden;
-  z-index: var(--z-sidebar);
-  position: relative;
-}
-
-.sidebar.expanded {
-  width: var(--sidebar-width);
-}
-
-/* Top icon strip */
-.sidebar-top {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 12px 10px;
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--sidebar-border);
-}
-
-.sidebar.collapsed .sidebar-top {
-  flex-direction: column;
-  padding: 10px 10px;
-  gap: 6px;
-}
-
-.sidebar.expanded .sidebar-top {
-  flex-direction: row;
-}
-
-.sidebar-icon-btn {
-  display: flex; align-items: center; justify-content: center;
-  width: 34px; height: 34px; border-radius: var(--radius-md);
-  color: var(--text-dim);
-  transition: background var(--transition), color var(--transition);
-  flex-shrink: 0;
-}
-.sidebar-icon-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text);
-}
-
-/* Sessions list */
-.sidebar-sessions {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 6px 6px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition);
-}
-
-.sidebar.expanded .sidebar-sessions {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.session-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-/* Session item */
-.session-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background var(--transition);
-  position: relative;
-  min-width: 0;
-}
-
-.session-item:hover { background: var(--bg-hover); }
-.session-item.active { background: var(--bg-active); }
-
-.session-item .session-name {
-  flex: 1;
-  font-size: 13px;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  cursor: text;
-}
-
-.session-item .session-name[contenteditable="true"] {
-  background: var(--bg-raised);
-  border-radius: 4px;
-  padding: 1px 4px;
-  outline: 1px solid var(--blue-bright);
-  white-space: nowrap;
-  cursor: text;
-}
-
-.session-item .session-menu-btn {
-  flex-shrink: 0;
-  width: 24px; height: 24px;
-  border-radius: var(--radius-sm);
-  display: flex; align-items: center; justify-content: center;
-  color: var(--text-muted);
-  opacity: 0;
-  transition: opacity var(--transition), background var(--transition), color var(--transition);
-  font-size: 16px; line-height: 1;
-}
-
-.session-item:hover .session-menu-btn,
-.session-item.active .session-menu-btn {
-  opacity: 1;
-}
-
-.session-item .session-menu-btn:hover {
-  background: var(--bg-raised);
-  color: var(--text);
-}
-
-/* Section label */
-.session-date-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  padding: 8px 10px 3px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-/* Bottom account section */
-.sidebar-bottom {
-  flex-shrink: 0;
-  padding: 8px;
-  border-top: 1px solid var(--sidebar-border);
-  overflow: hidden;
-}
-
-.account-section {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.sidebar.collapsed .account-section {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.sidebar.expanded .account-section {
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.btn-signin {
-  flex: 1;
-  padding: 8px 12px;
-  border-radius: var(--radius-md);
-  background: var(--yellow);
-  color: #111;
-  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition);
-  display: none;
-}
-
-.sidebar.expanded .btn-signin {
-  opacity: 1;
-  pointer-events: auto;
-  display: block;
-}
-
-/* Collapsed sign-in icon */
-.btn-signin-icon {
-  display: none;
-  width: 34px; height: 34px;
-  border-radius: 50%;
-  background: var(--yellow);
-  color: #111;
-  align-items: center; justify-content: center;
-  flex-shrink: 0;
-  transition: opacity var(--transition);
-}
-.sidebar.collapsed .btn-signin-icon {
-  display: flex;
-}
-.sidebar.expanded .btn-signin-icon {
-  display: none;
-}
-
-.user-profile-btn {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  min-width: 0;
-  padding: 6px 8px;
-  border-radius: var(--radius-md);
-  transition: background var(--transition);
-}
-.user-profile-btn:hover { background: var(--bg-hover); }
-
-.sidebar.collapsed .user-profile-btn {
-  flex: none;
-  width: 36px;
-  height: 36px;
-  justify-content: center;
-  gap: 0px !important;
-  /* padding: 0; */
-  border-radius: 50%;
-}
-
-.user-avatar {
-  width: 30px; height: 30px; border-radius: 50%;
-  background: var(--blue);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 13px; font-weight: 600; color: white;
-  flex-shrink: 0;
-  transition: background var(--transition);
-}
-.user-avatar[data-plan="free"] { background: var(--plan-free); }
-.user-avatar[data-plan="light"] { background: var(--plan-light); }
-.user-avatar[data-plan="core"] { background: var(--plan-core); }
-.user-avatar[data-plan="creator"] { background: var(--plan-creator); }
-.user-avatar[data-plan="professional"] { background: var(--plan-professional); }
-
-.user-info {
-  display: flex; flex-direction: column;
-  min-width: 0;
-  opacity: 0; pointer-events: none;
-  transition: opacity var(--transition);
-}
-
-.sidebar.expanded .user-info {
-  opacity: 1; pointer-events: auto;
-}
-
-.user-name {
-  font-size: 13px; font-weight: 500;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.user-plan {
-  font-size: 11px; font-weight: 600;
-}
-.user-plan[data-plan="free"] { color: var(--plan-free); }
-.user-plan[data-plan="light"] { color: var(--plan-light); }
-.user-plan[data-plan="core"] { color: var(--plan-core); }
-.user-plan[data-plan="creator"] { color: var(--plan-creator); }
-.user-plan[data-plan="professional"] { color: var(--plan-professional); }
-
-/* Context menus */
-.context-menu {
-  position: fixed;
-  background: var(--bg-raised);
-  border: 1px solid var(--border-bright);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  z-index: var(--z-menu);
-  overflow: hidden;
-  min-width: 170px;
-  animation: slideUp 0.14s ease;
-}
-
-.context-item {
-  display: flex; align-items: center; gap: 10px;
-  padding: 9px 14px;
-  font-size: 13px; color: var(--text);
-  cursor: pointer;
-  transition: background var(--transition);
-}
-.context-item:hover { background: var(--bg-hover); }
-.context-item.danger { color: #f07070; }
-.context-item.warning { color: var(--yellow); }
-.context-item svg { flex-shrink: 0; color: var(--text-dim); }
-.context-item.danger svg { color: #f07070; }
-/* ══════════════════════════════════════════════════════════════════════════
-/* ══════════════════════════════════════════════════════════════════════════
-   MOBILE SIDEBAR — Top header bar + full-screen left drawer
-   ══════════════════════════════════════════════════════════════════════════ */
-
-@media (max-width: 768px) {
-
-  /* ── Root layout ── */
-  #app {
-    flex-direction: column !important;
-    height: 100dvh;
-    overflow: hidden;
-  }
-
-  /* ── Sidebar: hidden off-screen left, slides in as full-screen overlay ── */
-  .sidebar {
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    bottom: 0 !important;
-    width: 100vw !important;
-    height: 100dvh !important;
-    max-height: none !important;
-    border-right: none !important;
-    border-top: none !important;
-    flex-direction: column !important;
-    z-index: var(--z-sidebar);
-    overflow: hidden;
-    transform: translateX(-100%);
-    transition: transform var(--transition-slow);
-  }
-
-  .sidebar.collapsed {
-    transform: translateX(-100%);
-  }
-
-  .sidebar.expanded {
-    transform: translateX(0);
-  }
-
-  /* ── Sidebar inner top: header row ── */
-  .sidebar-top {
-    flex-direction: row !important;
-    padding: 14px 16px !important;
-    gap: 8px !important;
-    border-bottom: 1px solid var(--sidebar-border) !important;
-    flex-shrink: 0;
-  }
-
-  /* Session list: scrollable */
-  .sidebar-sessions {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-    overflow-y: auto;
-    flex: 1;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* Bottom account section: always show */
-  .sidebar-bottom {
-    flex-shrink: 0;
-    border-top: 1px solid var(--sidebar-border);
-    display: block !important;
-  }
-
-  .account-section {
-    flex-direction: row !important;
-    align-items: center;
-  }
-
-  .btn-signin {
-    display: block !important;
-    opacity: 1 !important;
-    pointer-events: auto !important;
-  }
-
-  .btn-signin-icon {
-    display: none !important;
-  }
-
-  .user-info {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-  }
-
-  .user-profile-btn {
-    flex: 1 !important;
-    width: auto !important;
-    justify-content: flex-start !important;
-    border-radius: var(--radius-md) !important;
-    gap: 9px !important;
-  }
-
-  /* ── Main: full viewport ── */
-  #main {
-    height: 100dvh !important;
-    width: 100% !important;
-    overflow: hidden;
-  }
-
-  /* ── Backdrop ── */
-  .sidebar-backdrop {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.55);
-    z-index: calc(var(--z-sidebar) - 1);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(2px);
-  }
-
-  .sidebar-backdrop.visible {
-    display: block;
-  }
-}

public/css/tokens.css

@@ -1,99 +0,0 @@
-:root {
-  /* Brand palette */
-  --yellow: #e5c846;
-  --yellow-dim: #c9af2e;
-  --yellow-glow: rgba(229, 200, 70, 0.18);
-  --blue: #3178c6;
-  --blue-bright: #4a9eff;
-  --blue-dim: rgba(49, 120, 198, 0.18);
-  --blue-glow: rgba(74, 158, 255, 0.14);
-
-  /* Neutrals - dark theme defaults */
-  --bg: #0d0e11;
-  --bg-surface: #131417;
-  --bg-raised: #1a1b20;
-  --bg-hover: #22242b;
-  --bg-active: #2a2c35;
-  --border: rgba(255,255,255,0.07);
-  --border-bright: rgba(255,255,255,0.14);
-  --text: #e8eaf0;
-  --text-dim: rgba(232, 234, 240, 0.55);
-  --text-muted: rgba(232, 234, 240, 0.35);
-
-  /* Sidebar */
-  --sidebar-width: 260px;
-  --sidebar-collapsed-width: 56px;
-  --sidebar-bg: #0f1013;
-  --sidebar-border: rgba(255,255,255,0.06);
-
-  /* Plan colors */
-  --plan-free: #8a8fa8;
-  --plan-light: #4a9eff;
-  --plan-core: #2dd4a6;
-  --plan-creator: #a78bfa;
-  --plan-professional: #e5c846;
-
-  /* Input */
-  --input-bg: #1a1b20;
-  --input-border: rgba(255,255,255,0.1);
-  --input-focus: rgba(74, 158, 255, 0.5);
-
-  /* Radius */
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 20px;
-  --radius-xl: 28px;
-  --radius-full: 9999px;
-
-  /* Transitions */
-  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* Shadows */
-  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
-  --shadow-md: 0 6px 20px rgba(0,0,0,0.4);
-  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
-  --shadow-glow-blue: 0 0 0 1px var(--input-focus), 0 0 20px var(--blue-glow);
-
-  /* Fonts */
-  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
-  --font-mono: 'Geist Mono', 'Fira Code', monospace;
-
-  /* Z-layers */
-  --z-sidebar: 100;
-  --z-modal: 500;
-  --z-notify: 600;
-  --z-menu: 400;
-}
-
-[data-theme="light"] {
-  --bg: #f4f5f7;
-  --bg-surface: #ffffff;
-  --bg-raised: #f0f1f4;
-  --bg-hover: #e8e9ed;
-  --bg-active: #dfe0e6;
-  --border: rgba(0,0,0,0.08);
-  --border-bright: rgba(0,0,0,0.14);
-  --text: #1a1b20;
-  --text-dim: rgba(26, 27, 32, 0.6);
-  --text-muted: rgba(26, 27, 32, 0.38);
-  --sidebar-bg: #e8e9ed;
-  --sidebar-border: rgba(0,0,0,0.07);
-  --input-bg: #ffffff;
-  --input-border: rgba(0,0,0,0.12);
-  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
-  --shadow-md: 0 6px 20px rgba(0,0,0,0.1);
-  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
-}
-
-/* Smooth theme transitions applied to the whole document */
-html.theme-transitioning,
-html.theme-transitioning *,
-html.theme-transitioning *::before,
-html.theme-transitioning *::after {
-  transition:
-    background-color 0.35s cubic-bezier(0.4,0,0.2,1),
-    border-color 0.35s cubic-bezier(0.4,0,0.2,1),
-    color 0.35s cubic-bezier(0.4,0,0.2,1),
-    box-shadow 0.35s cubic-bezier(0.4,0,0.2,1) !important;
-}

public/index.html

@@ -1,239 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="dark">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>InferencePort AI</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
-  <!-- Inline early theme to prevent flash of wrong theme -->
-  <script>
-    (function(){
-      try {
-        var t = localStorage.getItem('ipai_theme');
-        if (t) document.documentElement.setAttribute('data-theme', t === 'light' ? 'light' : 'dark');
-      } catch(e){}
-    })();
-  </script>
-  <link rel="stylesheet" href="/css/tokens.css" />
-  <link rel="stylesheet" href="/css/base.css" />
-  <link rel="stylesheet" href="/css/sidebar.css" />
-  <link rel="stylesheet" href="/css/chat.css" />
-  <link rel="stylesheet" href="/css/modals.css" />
-  <link rel="stylesheet" href="/css/input.css" />
-  <style>
-    html, body { overflow: hidden; height: 100%; max-height: 100dvh; }
-    #app { display: flex; height: 100dvh; overflow: hidden; }
-    @media (max-width: 768px) {
-      #main {
-        height: 100dvh;
-        max-height: 100dvh;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
-      /* Push content below the fixed top bar */
-      .chat-view, .welcome-view { padding-top: 0; }
-    }
-  </style>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
-  <script
-  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
-  async
-  defer
-></script>
-<link rel="preconnect" href="https://challenges.cloudflare.com" />
-</head>
-<body>
-  <!-- Share import overlay -->
-  <div id="share-import-banner" class="share-banner hidden">
-    <div class="share-banner-inner">
-      <span class="share-icon">🔗</span>
-      <span id="share-banner-text">Importing shared session…</span>
-      <button id="share-import-btn" class="btn-primary">Import Session</button>
-      <button id="share-dismiss-btn" class="btn-ghost">Dismiss</button>
-    </div>
-  </div>
-
-  <!-- Mobile top bar (hidden on desktop via CSS) -->
-  <div id="mobile-top-bar">
-    <button id="mobile-sidebar-btn" class="mobile-bar-btn" title="Menu">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
-    </button>
-    <span class="mobile-bar-title">InferencePort AI</span>
-    <button id="mobile-newchat-btn" class="mobile-bar-btn" title="New Chat">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
-    </button>
-  </div>
-
-  <div id="app">
-    <!-- Sidebar -->
-    <aside id="sidebar" class="sidebar collapsed">
-      <div class="sidebar-top">
-        <button id="new-chat-btn" class="sidebar-icon-btn" title="New Chat">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
-        </button>
-        <button id="toggle-sidebar-btn" class="sidebar-icon-btn" title="Toggle sidebar">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
-        </button>
-      </div>
-
-      <div class="sidebar-sessions" id="sidebar-sessions">
-        <div class="session-list" id="session-list"></div>
-      </div>
-
-      <div class="sidebar-bottom" id="sidebar-bottom">
-        <!-- Shown when not signed in -->
-        <div id="guest-section" class="account-section">
-          <!-- Collapsed: icon-only sign-in button -->
-          <button id="signin-icon-btn" class="btn-signin-icon" title="Sign In">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
-          </button>
-          <!-- Expanded: full sign-in button -->
-          <button id="signin-btn" class="btn-signin">Sign In</button>
-          <button id="settings-btn-guest" class="sidebar-icon-btn" title="Settings">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-          </button>
-        </div>
-
-        <!-- Shown when signed in -->
-        <div id="user-section" class="account-section hidden">
-          <button id="user-profile-btn" class="user-profile-btn">
-            <div class="user-avatar" id="user-avatar">?</div>
-            <div class="user-info">
-              <span class="user-name" id="user-name-display">—</span>
-              <span class="user-plan" id="user-plan-display">Free</span>
-            </div>
-          </button>
-          <button id="settings-btn" class="sidebar-icon-btn" title="Settings">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-          </button>
-        </div>
-      </div>
-    </aside>
-
-    <!-- Main chat area -->
-    <main id="main">
-      <!-- Terms of service banner -->
-      <div id="tos-banner">
-        <p>
-          By interacting with this website, you agree to 
-          <a href="https://inference.js.org/security.html" target="_blank" rel="noopener noreferrer" style="color: white;">these Terms of Service</a>
-          and 
-          <a href="https://inference.js.org/security.html" target="_blank" rel="noopener noreferrer" style="color: white;">this privacy policy</a>
-        </p>
-      </div>
-
-      <!-- Welcome / new chat state -->
-      <div id="welcome-view" class="welcome-view">
-        <h1 class="welcome-title">What's on your mind?</h1>
-        <div class="welcome-input-wrap">
-          <div class="center-input-container">
-            <div id="center-file-preview-row" class="input-file-preview-row"></div>
-            <div class="center-input-row">
-              <div class="attach-btn-wrap">
-                <button id="center-attach-btn" class="attach-btn" title="Attach">
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-                </button>
-              </div>
-              <textarea id="center-input" class="center-textarea" placeholder="Ask anything…" rows="1"></textarea>
-            <div class="center-input-actions">
-              <button id="center-tool-search" class="tool-btn" data-tool="webSearch" title="Web Search">
-                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-              </button>
-              <button id="center-tool-image" class="tool-btn" data-tool="imageGen" title="Image">
-                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-              </button>
-              <button id="center-tool-video" class="tool-btn" data-tool="videoGen" title="Video">
-                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
-              </button>
-              <button id="center-tool-audio" class="tool-btn" data-tool="audioGen" title="Audio">
-                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-              </button>
-              <button id="center-send-btn" class="send-btn-center">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg>
-              </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Active chat view -->
-      <div id="chat-view" class="chat-view hidden">
-        <div id="chat-messages" class="chat-messages"></div>
-      </div>
-
-      <!-- Bottom input (active during chat) -->
-      <div id="bottom-input-bar" class="bottom-input-bar hidden">
-        <div class="bottom-input-wrap">
-          <button id="bottom-attach-btn" class="attach-btn-bottom" title="Attach">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-          </button>
-          <div class="bottom-textarea-wrap">
-            <div class="tool-row">
-              <button class="tool-btn-sm active" data-tool="webSearch" title="Web Search">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-                <span>Search</span>
-              </button>
-              <button class="tool-btn-sm" data-tool="imageGen" title="Image">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-                <span>Image</span>
-              </button>
-              <button class="tool-btn-sm" data-tool="videoGen" title="Video">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
-                <span>Video</span>
-              </button>
-              <button class="tool-btn-sm" data-tool="audioGen" title="Audio">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-                <span>Audio</span>
-              </button>
-            </div>
-            <div id="file-preview-row" class="input-file-preview-row"></div>
-            <textarea id="bottom-input" class="bottom-textarea" placeholder="Ask anything…" rows="1"></textarea>
-          </div>
-          <button id="bottom-send-btn" class="send-btn-bottom">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg>
-          </button>
-        </div>
-      </div>
-    </main>
-  </div>
-
-  <!-- Context Menus -->
-  <div id="session-context-menu" class="context-menu hidden"></div>
-  <div id="user-context-menu" class="context-menu hidden"></div>
-  <div id="attach-context-menu" class="context-menu hidden"></div>
-
-  <!-- Modals -->
-  <div id="modal-overlay" class="modal-overlay hidden">
-    <div id="modal-box" class="modal-box"></div>
-  </div>
-
-  <!-- Turnstile verification overlay (shows until user verifies) -->
-  <div id="turnstile-overlay" class="modal-overlay turnstile-overlay">
-    <div class="turnstile-box" id="turnstile-box">
-      <div class="turnstile-message">Please verify you are human to continue using the chat.</div>
-      <div id="turnstile-widget">
-        <div class="cf-turnstile" data-sitekey="0x4AAAAAAC1ZXKIhZ9Kdz8j9" data-callback="onTurnstileSuccess"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Notification area -->
-  <div id="notifications" class="notifications"></div>
-
-  <!-- Hidden file input -->
-  <input type="file" id="file-input" multiple style="display:none" />
-  <input type="file" id="image-input" accept="image/*" multiple style="display:none" />
-
-  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
-  <!-- Turnstile widget handler (shows verification overlay) -->
-  <script type="module" src="/js/turnstile.js"></script>
-  <script type="module" src="/js/app.js"></script>
-</body>
-</html>

public/js/app.js

@@ -1,561 +0,0 @@
-// app.js — bootstrap, input handling, sidebar, attach, paste
-import { send, on } from './ws.js';
-import { isAuthenticated, logout, getTempId, getClientId, onAuthChange } from './auth.js';
-import {
-  createNewSession, showWelcomeScreen,
-  switchSession, currentSessionId, onSessionChange,
-} from './sessions.js';
-import { submitMessage, renderSession, setActiveSession, getIsStreaming } from './chat.js';
-import { openAuthModal, closeModal, openPasteEditor } from './modals.js';
-import { openSettings, applyTheme } from './settings.js';
-import { showNotification, autoResize, escHtml } from './ui.js';
-
-// ── Apply theme immediately from localStorage (no flash) ──────────────────
-(function earlyTheme() {
-  try {
-    const t = localStorage.getItem('ipai_theme');
-    if (t) document.documentElement.setAttribute('data-theme', t === 'light' ? 'light' : 'dark');
-  } catch {}
-})();
-
-// ── TOS banner — push content up so input isn't obscured ─────────────────
-
-(function fixTosBanner() {
-  const banner = document.getElementById('tos-banner');
-  if (!banner) return;
-
-  // Make TOS links open in new tab
-  banner.querySelectorAll('a').forEach(a => {
-    a.setAttribute('target', '_blank');
-    a.setAttribute('rel', 'noopener noreferrer');
-  });
-
-  const applyPadding = () => {
-    const isMobile = window.innerWidth <= 768;
-    if (isMobile) {
-      const h = banner.offsetHeight || 28;
-      const welcomeView = document.getElementById('welcome-view');
-      if (welcomeView) welcomeView.style.paddingBottom = `${h + 8}px`;
-    } else {
-      const h = banner.offsetHeight || 30;
-      document.getElementById('bottom-input-bar')?.style.setProperty('padding-bottom', `${h + 4}px`);
-      const welcomeView = document.getElementById('welcome-view');
-      if (welcomeView) welcomeView.style.paddingBottom = `${h + 10}px`;
-    }
-  };
-  requestAnimationFrame(() => { applyPadding(); });
-  window.addEventListener('resize', applyPadding);
-})();
-
-// ── Sidebar ───────────────────────────────────────────────────────────────
-
-const sidebar   = document.getElementById('sidebar');
-const toggleBtn = document.getElementById('toggle-sidebar-btn');
-
-function expandSidebar()  { sidebar?.classList.remove('collapsed'); sidebar?.classList.add('expanded'); }
-function collapseSidebar(){ sidebar?.classList.remove('expanded'); sidebar?.classList.add('collapsed'); }
-function toggleSidebar()  { sidebar?.classList.contains('expanded') ? collapseSidebar() : expandSidebar(); }
-
-toggleBtn?.addEventListener('click', toggleSidebar);
-
-// ── Mobile top bar + sidebar logic ───────────────────────────────────────
-
-(function setupMobile() {
-  // Create backdrop
-  const backdrop = document.createElement('div');
-  backdrop.id = 'sidebar-backdrop';
-  backdrop.className = 'sidebar-backdrop';
-  document.body.appendChild(backdrop);
-
-  function openSidebar()  {
-    sidebar?.classList.remove('collapsed'); sidebar?.classList.add('expanded');
-    backdrop.classList.add('visible');
-  }
-  function closeSidebar() {
-    sidebar?.classList.remove('expanded'); sidebar?.classList.add('collapsed');
-    backdrop.classList.remove('visible');
-  }
-
-  backdrop.addEventListener('click', closeSidebar);
-
-  // Wire mobile top bar buttons
-  document.getElementById('mobile-sidebar-btn')?.addEventListener('click', () => {
-    sidebar?.classList.contains('expanded') ? closeSidebar() : openSidebar();
-  });
-  document.getElementById('mobile-newchat-btn')?.addEventListener('click', () => {
-    showWelcomeScreen();
-    closeSidebar();
-    const ci = document.getElementById('center-input');
-    if (ci) { ci.value = ''; autoResize(ci, 6); }
-    const box = document.getElementById('chat-messages');
-    if (box) box.innerHTML = '';
-  });
-
-  // Auto-close drawer when a session is switched on mobile
-  onSessionChange((event) => {
-    if ((event === 'switched' || event === 'created') && window.innerWidth <= 768) {
-      closeSidebar();
-    }
-  });
-
-  // ── Hide/show top bar on scroll ─────────────────────────────────────────
-  let lastScrollY = 0;
-  let ticking = false;
-  const topBar = document.getElementById('mobile-top-bar');
-
-  function handleChatScroll(e) {
-    if (window.innerWidth > 768) return;
-    const el = e.target;
-    const currentY = el.scrollTop;
-    if (!ticking) {
-      requestAnimationFrame(() => {
-        if (currentY > lastScrollY && currentY > 60) {
-          topBar?.classList.add('hidden-bar');
-        } else {
-          topBar?.classList.remove('hidden-bar');
-        }
-        lastScrollY = currentY <= 0 ? 0 : currentY;
-        ticking = false;
-      });
-      ticking = true;
-    }
-  }
-
-  document.getElementById('chat-view')?.addEventListener('scroll', handleChatScroll, { passive: true });
-
-  onSessionChange((event, data) => {
-    if (event === 'switched' && !data) {
-      topBar?.classList.remove('hidden-bar');
-      lastScrollY = 0;
-    }
-  });
-})();
-
-// ── New chat — just show the welcome screen ───────────────────────────────
-
-document.getElementById('new-chat-btn')?.addEventListener('click', () => {
-  showWelcomeScreen();
-  const ci = document.getElementById('center-input');
-  if (ci) { ci.value = ''; autoResize(ci, 6); }
-  const box = document.getElementById('chat-messages');
-  if (box) box.innerHTML = '';
-});
-
-// ── Session switching ─────────────────────────────────────────────────────
-
-onSessionChange((event, data) => {
-  if (event === 'switched') {
-    setActiveSession(data);
-    if (!data) {
-      const box = document.getElementById('chat-messages');
-      if (box) box.innerHTML = '';
-      document.getElementById('welcome-view')?.classList.remove('hidden');
-      document.getElementById('chat-view')?.classList.add('hidden');
-      document.getElementById('bottom-input-bar')?.classList.add('hidden');
-    }
-  }
-  if (event === 'data') {
-    if (data.id === currentSessionId) renderSession(data);
-  }
-  if (event === 'created') {
-    setActiveSession(data.id);
-    switchSession(data.id);
-  }
-});
-
-// Show welcome screen on login/auth
-onAuthChange(({ currentUser }) => {
-  if (currentUser) {
-    // After login show welcome screen (sessions will load and may switch to one)
-    // Only show welcome if we're not already in a chat
-    const chatView = document.getElementById('chat-view');
-    if (chatView?.classList.contains('hidden')) {
-      // Already on welcome, nothing to do
-    }
-  }
-});
-
-// ── Center input (welcome view) ───────────────────────────────────────────
-
-const centerInput   = document.getElementById('center-input');
-const centerSendBtn = document.getElementById('center-send-btn');
-
-centerInput?.addEventListener('input', () => autoResize(centerInput, 6));
-centerInput?.addEventListener('keydown', e => {
-  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); triggerCenterSend(); }
-});
-centerSendBtn?.addEventListener('click', triggerCenterSend);
-
-// Center tool buttons
-document.querySelectorAll('#center-tool-search, #center-tool-image, #center-tool-video, #center-tool-audio')
-  .forEach(btn => btn.addEventListener('click', () => btn.classList.toggle('active')));
-
-function triggerCenterSend() {
-  const text = centerInput?.value.trim();
-  const attachments = pendingAttachments.splice(0);
-  if (!text && attachments.length === 0) return;
-  if (centerInput) { centerInput.value = ''; autoResize(centerInput, 6); }
-  clearFilePreviewRow();
-
-  const pendingText = text, pendingAttach = attachments;
-  const unsub = onSessionChange((ev, s) => {
-    if (ev !== 'switched' || !s) return;
-    unsub();
-    doSend(pendingText, pendingAttach);
-  });
-  createNewSession();
-}
-
-// ── Bottom input (active chat) ────────────────────────────────────────────
-
-const bottomInput   = document.getElementById('bottom-input');
-const bottomSendBtn = document.getElementById('bottom-send-btn');
-
-bottomInput?.addEventListener('input', () => autoResize(bottomInput, 6));
-bottomInput?.addEventListener('keydown', e => {
-  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); triggerBottomSend(); }
-});
-bottomSendBtn?.addEventListener('click', () => {
-  if (getIsStreaming()) { send({ type: 'chat:stop', sessionId: currentSessionId }); return; }
-  triggerBottomSend();
-});
-
-function triggerBottomSend() {
-  const text = bottomInput?.value.trim();
-  const attachments = pendingAttachments.splice(0);
-  if (!text && attachments.length === 0) return;
-  if (bottomInput) { bottomInput.value = ''; autoResize(bottomInput, 6); }
-  clearFilePreviewRow();
-  doSend(text || '', attachments);
-}
-
-document.querySelectorAll('.tool-btn-sm').forEach(btn =>
-  btn.addEventListener('click', () => btn.classList.toggle('active')));
-
-// ── Core send ─────────────────────────────────────────────────────────────
-
-function doSend(text, attachments = []) {
-  submitMessage(text, attachments);
-}
-
-// ── Attachments ───────────────────────────────────────────────────────────
-
-let pendingAttachments = [];
-const LARGE_PASTE_THRESHOLD = 10000;
-
-function openAttachMenu(e, triggerEl) {
-  e.preventDefault(); e.stopPropagation();
-  const menu = document.getElementById('attach-context-menu');
-  if (!menu) return;
-  menu.innerHTML = '';
-
-  for (const item of [
-    { label: '📄 Upload file',  onClick: () => document.getElementById('file-input')?.click() },
-    { label: '🖼️ Upload image', onClick: () => document.getElementById('image-input')?.click() },
-  ]) {
-    const el = document.createElement('div');
-    el.className = 'context-item'; el.textContent = item.label;
-    el.addEventListener('click', () => { menu.classList.add('hidden'); item.onClick(); });
-    menu.appendChild(el);
-  }
-
-  menu.classList.remove('hidden');
-  const rect = triggerEl.getBoundingClientRect();
-  const mh = menu.getBoundingClientRect().height || 80;
-  menu.style.left = `${Math.max(8, rect.left)}px`;
-  menu.style.top  = `${rect.top - mh - 8}px`;
-
-  setTimeout(() => document.addEventListener('click', () => menu.classList.add('hidden'), { once: true }), 0);
-}
-
-document.getElementById('center-attach-btn')?.addEventListener('click', e =>
-  openAttachMenu(e, document.getElementById('center-attach-btn')));
-document.getElementById('bottom-attach-btn')?.addEventListener('click', e =>
-  openAttachMenu(e, document.getElementById('bottom-attach-btn')));
-
-document.getElementById('file-input')?.addEventListener('change', async function() {
-  for (const file of this.files) {
-    const text = await file.text();
-    pendingAttachments.push({ type: 'text', name: file.name, content: text });
-  }
-  this.value = '';
-  renderFilePreviewRow();
-});
-
-document.getElementById('image-input')?.addEventListener('change', async function() {
-  for (const file of this.files) await addImageFile(file);
-  this.value = '';
-});
-
-async function addImageFile(file) {
-  const dataUrl = await new Promise((res, rej) => {
-    const reader = new FileReader();
-    reader.onload  = () => res(reader.result);
-    reader.onerror = rej;
-    reader.readAsDataURL(file);
-  });
-  const comma = dataUrl.indexOf(',');
-  const mimeType = dataUrl.slice(5, dataUrl.indexOf(';'));
-  const base64   = dataUrl.slice(comma + 1);
-  pendingAttachments.push({ type: 'image', name: file.name, base64, mimeType });
-  renderFilePreviewRow();
-}
-
-function buildAttachmentItem(a, i) {
-  const wrap = document.createElement('div');
-  wrap.className = 'attach-preview-item';
-
-  if (a.type === 'image') {
-    const img = document.createElement('img');
-    img.src = `data:${a.mimeType};base64,${a.base64}`;
-    img.alt = a.name;
-    wrap.appendChild(img);
-  } else {
-    // File chip — styled container
-    const chip = document.createElement('div');
-    chip.className = 'file-attachment-chip';
-    chip.title = a.name;
-    const lineCount = (a.content.match(/\n/g) || []).length + 1;
-    chip.innerHTML = `
-      <span class="chip-icon">📄</span>
-      <div style="display:flex;flex-direction:column;min-width:0;">
-        <span class="chip-name">${escHtml(a.name)}</span>
-        <span class="chip-meta">${lineCount} line${lineCount !== 1 ? 's' : ''}</span>
-      </div>`;
-    chip.addEventListener('click', () => {
-      import('./modals.js').then(m => m.openFileViewerModal({
-        name: a.name,
-        content: a.content,
-        editable: true,
-        onSave: (nc) => { pendingAttachments[i].content = nc; }
-      }));
-    });
-    wrap.appendChild(chip);
-  }
-
-  const rm = document.createElement('button');
-  rm.className = 'attach-preview-remove';
-  rm.textContent = '×';
-  rm.addEventListener('click', e => { e.stopPropagation(); pendingAttachments.splice(i, 1); renderFilePreviewRow(); });
-  wrap.appendChild(rm);
-  return wrap;
-}
-
-export function renderFilePreviewRow() {
-  const centerRow = document.getElementById('center-file-preview-row');
-  const bottomRow = document.getElementById('file-preview-row');
-
-  [centerRow, bottomRow].forEach(row => {
-    if (!row) return;
-    row.innerHTML = '';
-    if (pendingAttachments.length === 0) { row.style.display = 'none'; return; }
-    row.style.display = 'flex';
-    pendingAttachments.forEach((a, i) => row.appendChild(buildAttachmentItem(a, i)));
-  });
-}
-
-export function clearFilePreviewRow() {
-  pendingAttachments = [];
-  ['center-file-preview-row', 'file-preview-row'].forEach(id => {
-    const row = document.getElementById(id);
-    if (row) { row.innerHTML = ''; row.style.display = 'none'; }
-  });
-}
-
-// ── Paste & drag-drop ─────────────────────────────────────────────────────
-
-function handlePaste(e) {
-  const clipboardData = e.clipboardData || window.clipboardData;
-  const items = Array.from(clipboardData?.items || []);
-
-  // 1. Check for Images (Works synchronously)
-  const imgItem = items.find(i => i.kind === 'file' && i.type.startsWith('image/'));
-  if (imgItem) { 
-    e.preventDefault(); 
-    addImageFile(imgItem.getAsFile()); 
-    return; 
-  }
-
-  // 2. Check for Large Text (Must check synchronously to prevent default)
-  const text = clipboardData.getData('text/plain');
-  if (text.length > LARGE_PASTE_THRESHOLD) {
-    e.preventDefault(); // This NOW works because it's called immediately
-    pendingAttachments.push({ 
-      type: 'text', 
-      name: `Pasted Content.txt`, 
-      content: text 
-    });
-    renderFilePreviewRow();
-  }
-}
-
-// ── Bullet point auto-convert feature ────────────────────────────────────
-// When "- " is typed at the start of a line, convert to "• " (bullet marker)
-// and render it visually as a bullet. Backspace after bullet reverts to "- ".
-
-function setupBulletAutoConvert(textarea) {
-  if (!textarea) return;
-
-  // Track bullet positions: Map<lineIndex, true>
-  // We use a marker character in the actual value: '\u2022 ' (bullet)
-  const BULLET = '\u2022';
-
-  textarea.addEventListener('keydown', (e) => {
-    const val = textarea.value;
-    const pos = textarea.selectionStart;
-
-    if (e.key === ' ') {
-      // Check if the character before cursor is '-' at start of a line
-      const lineStart = val.lastIndexOf('\n', pos - 1) + 1;
-      const beforeCursor = val.slice(lineStart, pos);
-      if (beforeCursor === '-') {
-        e.preventDefault();
-        // Replace the '-' with a bullet
-        const newVal = val.slice(0, lineStart) + BULLET + ' ' + val.slice(pos);
-        textarea.value = newVal;
-        const newPos = lineStart + 2;
-        textarea.setSelectionRange(newPos, newPos);
-        autoResize(textarea, 6);
-        return;
-      }
-    }
-
-    if (e.key === 'Backspace') {
-      const lineStart = val.lastIndexOf('\n', pos - 1) + 1;
-      const beforeCursor = val.slice(lineStart, pos);
-      // If cursor is right after "• " (bullet + space), revert to "- "
-      if (beforeCursor === BULLET + ' ') {
-        e.preventDefault();
-        const newVal = val.slice(0, lineStart) + '- ' + val.slice(pos);
-        textarea.value = newVal;
-        const newPos = lineStart + 2;
-        textarea.setSelectionRange(newPos, newPos);
-        autoResize(textarea, 6);
-        return;
-      }
-      // If cursor is right after just the bullet (no space), revert to "-"
-      if (beforeCursor === BULLET) {
-        e.preventDefault();
-        const newVal = val.slice(0, lineStart) + '-' + val.slice(pos);
-        textarea.value = newVal;
-        const newPos = lineStart + 1;
-        textarea.setSelectionRange(newPos, newPos);
-        autoResize(textarea, 6);
-      }
-    }
-  });
-}
-
-[centerInput, bottomInput].forEach(input => {
-  input?.addEventListener('paste', handlePaste);
-  input?.addEventListener('dragover', e => e.preventDefault());
-  input?.addEventListener('drop', async e => {
-    e.preventDefault();
-    for (const file of e.dataTransfer.files)
-      if (file.type.startsWith('image/')) await addImageFile(file);
-  });
-  setupBulletAutoConvert(input);
-});
-
-// ── Auth/settings buttons ─────────────────────────────────────────────────
-
-document.getElementById('signin-btn')?.addEventListener('click', () => openAuthModal('signin'));
-document.getElementById('signin-icon-btn')?.addEventListener('click', () => openAuthModal('signin'));
-document.getElementById('settings-btn')?.addEventListener('click', () => openSettings('chat'));
-document.getElementById('settings-btn-guest')?.addEventListener('click', () => openSettings('chat'));
-
-document.getElementById('user-profile-btn')?.addEventListener('click', e => {
-  const btn = e.currentTarget;
-  const rect = btn.getBoundingClientRect();
-  const menu = document.getElementById('user-context-menu');
-  if (!menu) return;
-
-  const menuItems = [
-    { label: '⚙️  Settings',       onClick: () => openSettings('chat') },
-    { label: '👤  Account',         onClick: () => openSettings('account') },
-    { label: '💳  Billing Portal',  onClick: () => window.open('https://sharktide-lightning.hf.space/portal', '_blank') },
-    { sep: true },
-    { label: '🗑️  Clear All Chats', danger: true,
-      onClick: () => { if (confirm('Delete all chats? This cannot be undone.')) send({ type: 'sessions:deleteAll' }); }},
-    { sep: true },
-    { label: '🚪  Sign Out',        danger: true, onClick: () => logout() },
-  ];
-
-  menu.innerHTML = '';
-  for (const item of menuItems) {
-    if (item.sep) {
-      const s = document.createElement('div'); s.style.cssText = 'height:1px;background:var(--border);margin:3px 0;';
-      menu.appendChild(s); continue;
-    }
-    const el = document.createElement('div');
-    el.className = 'context-item' + (item.danger ? ' danger' : '');
-    el.textContent = item.label;
-    el.addEventListener('click', () => { menu.classList.add('hidden'); item.onClick(); });
-    menu.appendChild(el);
-  }
-
-  menu.classList.remove('hidden');
-  const mw = 200;
-  let left = rect.left, top = rect.top;
-  const mh = menu.scrollHeight || 200;
-  top = rect.top - mh - 8;
-  if (left + mw > window.innerWidth - 8) left = window.innerWidth - mw - 8;
-  menu.style.left = `${Math.max(8, left)}px`;
-  menu.style.top  = `${Math.max(8, top)}px`;
-
-  setTimeout(() => document.addEventListener('click', () => menu.classList.add('hidden'), { once: true }), 0);
-});
-
-// ── Share import from URL ?share=token ────────────────────────────────────
-
-function checkShareParam() {
-  const params = new URLSearchParams(location.search);
-  const token  = params.get('share');
-  if (!token) return;
-
-  const banner    = document.getElementById('share-import-banner');
-  const bannerText= document.getElementById('share-banner-text');
-  const importBtn = document.getElementById('share-import-btn');
-  const dismissBtn= document.getElementById('share-dismiss-btn');
-
-  fetch(`/api/share/${encodeURIComponent(token)}`)
-    .then(r => r.ok ? r.json() : null)
-    .then(data => {
-      if (!data) return;
-      if (bannerText) bannerText.textContent = `Import shared chat: "${data.name}"?`;
-      banner?.classList.remove('hidden');
-    })
-    .catch(() => {});
-
-  importBtn?.addEventListener('click', () => {
-    if (!isAuthenticated()) { openAuthModal('signin'); return; }
-    send({ type: 'sessions:import', token });
-    banner?.classList.add('hidden');
-    history.replaceState({}, '', '/');
-  });
-  dismissBtn?.addEventListener('click', () => {
-    banner?.classList.add('hidden');
-    history.replaceState({}, '', '/');
-  });
-}
-
-// ── Connection notifications & reconnect handling ─────────────────────────
-
-let wasDisconnected = false;
-on('ws:disconnected', () => {
-  wasDisconnected = true;
-  showNotification({ type: 'warning', message: 'Connection lost — reconnecting…', duration: 3000 });
-});
-on('ws:connected', () => {
-  if (wasDisconnected) {
-    showNotification({ type: 'success', message: 'Reconnected', duration: 2000 });
-  }
-  wasDisconnected = false;
-});
-
-// ── Init ──────────────────────────────────────────────────────────────────
-
-document.addEventListener('DOMContentLoaded', () => {
-  checkShareParam();
-  // Theme is already applied by earlyTheme() above; don't flash to dark
-});

public/js/auth.js

@@ -1,304 +0,0 @@
-// auth.js - Authentication state and Supabase integration
-import { send, on } from './ws.js';
-
-const SUPABASE_URL      = 'https://dpixehhdbtzsbckfektd.supabase.co';
-const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRwaXhlaGhkYnR6c2Jja2Zla3RkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjExNDI0MjcsImV4cCI6MjA3NjcxODQyN30.nR1KCSRQj1E_evQWnE2VaZzg7PgLp2kqt4eDKP2PkpE';
-
-const AUTH_KEY      = 'ipai_auth_v1';
-const TEMP_ID_KEY   = 'ipai_temp_id';
-const CLIENT_ID_KEY = 'ipai_client_id';
-// Key written by oauth-callback.html so the main tab can pick it up
-const OAUTH_PENDING_KEY = 'ipai_oauth_pending';
-
-export let currentUser      = null;
-export let userProfile      = null;
-export let userSettings     = null;
-export let subscriptionInfo = null;
-
-const authListeners = new Set();
-
-export function onAuthChange(fn) { authListeners.add(fn); return () => authListeners.delete(fn); }
-export function isAuthenticated() { return !!currentUser; }
-
-function notifyListeners() {
-  authListeners.forEach(fn => fn({ currentUser, userProfile, userSettings }));
-}
-
-export function getClientId() {
-  let id = localStorage.getItem(CLIENT_ID_KEY);
-  if (!id) { id = `web-${crypto.randomUUID()}`; localStorage.setItem(CLIENT_ID_KEY, id); }
-  return id;
-}
-export function getTempId() {
-  let id = localStorage.getItem(TEMP_ID_KEY);
-  if (!id) { id = crypto.randomUUID(); localStorage.setItem(TEMP_ID_KEY, id); }
-  return id;
-}
-export function saveAuth(data)  { localStorage.setItem(AUTH_KEY, JSON.stringify(data)); }
-export function loadAuth()      { try { return JSON.parse(localStorage.getItem(AUTH_KEY) || 'null'); } catch { return null; } }
-export function clearAuth()     { localStorage.removeItem(AUTH_KEY); }
-
-// ── Supabase REST helpers ─────────────────────────────────────────────────
-
-async function supabaseFetch(path, options = {}) {
-  const token = options._useToken || SUPABASE_ANON_KEY;
-  delete options._useToken;
-  const res = await fetch(`${SUPABASE_URL}${path}`, {
-    ...options,
-    headers: {
-      'Content-Type': 'application/json',
-      apikey: SUPABASE_ANON_KEY,
-      Authorization: `Bearer ${token}`,
-      ...(options.headers || {}),
-    },
-  });
-  return res.json();
-}
-
-export async function loginWithEmail(email, password) {
-  const data = await supabaseFetch('/auth/v1/token?grant_type=password', {
-    method: 'POST', body: JSON.stringify({ email, password }),
-  });
-  if (data.error) throw new Error(data.error_description || data.error);
-  await handleSupabaseSession(data);
-  return data;
-}
-
-export async function signUpWithEmail(email, password) {
-  const data = await supabaseFetch('/auth/v1/signup', {
-    method: 'POST', body: JSON.stringify({ email, password }),
-  });
-  if (data.error) throw new Error(data.error_description || data.error);
-  if (data.access_token) await handleSupabaseSession(data);
-  return data;
-}
-
-/**
- * OAuth login via popup.
- * The popup writes the tokens to localStorage under OAUTH_PENDING_KEY,
- * then closes itself.  This tab listens for the storage event and picks
- * them up — no postMessage needed (works even when opener is null, e.g.
- * on some mobile browsers or strict sandboxes).
- */
-export async function loginWithOAuth(provider) {
-  const redirectTo = encodeURIComponent(`${location.origin}/oauth-callback.html`);
-  const url = `${SUPABASE_URL}/auth/v1/authorize?provider=${provider}&redirect_to=${redirectTo}`;
-  window.open(url, '_blank', 'width=520,height=640,noopener,noreferrer');
-  // The storage listener below (window.addEventListener('storage', ...))
-  // will fire when the popup writes OAUTH_PENDING_KEY and complete the login.
-}
-
-export async function logout() {
-  const auth = loadAuth();
-  if (auth?.access_token) {
-    try {
-      await supabaseFetch('/auth/v1/logout', {
-        method: 'POST', _useToken: auth.access_token,
-      });
-    } catch {}
-  }
-  send({ type: 'auth:logout' });
-  clearAuth();
-  currentUser = null; userProfile = null; userSettings = null; subscriptionInfo = null;
-  notifyListeners();
-  updateSidebarProfile();
-  initAsGuest();
-}
-
-// ── Session handling ──────────────────────────────────────────────────────
-
-async function handleSupabaseSession(data) {
-  console.log('[Frontend Auth] handleSupabaseSession called with token:', data.access_token?.slice(0, 20) + '...');
-  if (!data.access_token) throw new Error('No access token');
-  saveAuth({ access_token: data.access_token, refresh_token: data.refresh_token, user: data.user });
-
-  return new Promise((resolve, reject) => {
-    const tempId   = getTempId();
-    const clientId = getClientId();
-    console.log('[Frontend Auth] Sending auth:login to backend with token:', data.access_token?.slice(0, 20) + '...');
-    send({ type: 'auth:login', accessToken: data.access_token, refreshToken: data.refresh_token,
-      tempId, clientId });
-
-    const unsubOk  = on('auth:ok',    (msg) => {
-      console.log('[Frontend Auth] Received auth:ok response');
-      unsubOk(); unsubErr(); applyAuthOk(msg); resolve(msg);
-    });
-    const unsubErr = on('auth:error', (msg) => { 
-      console.error('[Frontend Auth] Received auth:error:', msg.message);
-      unsubOk(); unsubErr(); reject(new Error(msg.message));
-    });
-
-    setTimeout(() => { unsubOk(); unsubErr(); reject(new Error('Auth timeout')); }, 12000);
-  });
-}
-
-function applyAuthOk(msg) {
-  console.log('[Frontend Auth] applyAuthOk called with msg:', msg);
-  currentUser  = { id: msg.userId, email: msg.email };
-  userProfile  = msg.profile;
-  userSettings = msg.settings;
-  subscriptionInfo = msg.subscription || null;
-  console.log('[Frontend Auth] Subscription info set to:', subscriptionInfo);
-  console.log('[Frontend Auth] subscriptionInfo?.planKey:', subscriptionInfo?.planKey);
-  console.log('[Frontend Auth] subscriptionInfo?.planName:', subscriptionInfo?.planName);
-  const auth = loadAuth() || {};
-  saveAuth({ ...auth, userId: msg.userId, deviceToken: msg.deviceToken });
-  notifyListeners();
-  console.log('[Frontend Auth] Calling updateSidebarProfile...');
-  updateSidebarProfile();
-  // Apply saved theme
-  if (msg.settings?.theme) {
-    import('./settings.js').then(m => m.applyTheme(msg.settings.theme));
-  }
-}
-
-function initAsGuest() {
-  send({ type: 'auth:guest', tempId: getTempId() });
-}
-
-// ── WS events ─────────────────────────────────────────────────────────────
-
-on('auth:newLogin', (msg) => {
-  import('./ui.js').then(({ showNotification }) => {
-    showNotification({
-      type: 'warning',
-      message: `New login detected from ${msg.ip || 'unknown location'}`,
-      action: { label: 'View', onClick: () => import('./settings.js').then(m => m.openSettings('account')) },
-      duration: 8000,
-    });
-  });
-});
-
-on('auth:forcedLogout', (msg) => {
-  import('./ui.js').then(({ showNotification }) => {
-    showNotification({ type: 'error', message: msg.reason || 'Session revoked', duration: 5000 });
-  });
-  setTimeout(() => logout(), 1500);
-});
-
-on('settings:updated', (msg) => {
-  if (msg.settings) {
-    userSettings = msg.settings;
-    import('./settings.js').then(m => m.applyTheme(msg.settings.theme));
-  }
-});
-
-// ── Reconnect on WS connect ────────────────────────────────────────────────
-
-on('ws:connected', async () => {
-  console.log('[Frontend Auth] WS connected event');
-  const auth = loadAuth();
-  console.log('[Frontend Auth] Loaded auth:', auth ? 'exists' : 'null');
-  if (auth?.access_token) {
-    try {
-      console.log('[Frontend Auth] Attempting to resume session with existing token');
-      await handleSupabaseSession(auth);
-    }
-    catch (err) {
-      console.error('[Frontend Auth] Failed to resume session:', err);
-      clearAuth();
-      initAsGuest();
-    }
-  } else {
-    console.log('[Frontend Auth] No stored auth, initializing as guest');
-    initAsGuest();
-  }
-});
-
-// ── OAuth: localStorage-based token pickup ────────────────────────────────
-// Works for both popup and redirect flows.
-// The oauth-callback.html page writes { access_token, refresh_token } to
-// localStorage[OAUTH_PENDING_KEY] then closes/redirects.  The storage event
-// fires in all other tabs from the same origin.
-
-window.addEventListener('storage', async (e) => {
-  if (e.key !== OAUTH_PENDING_KEY || !e.newValue) return;
-  console.log('[Frontend Auth] OAuth pending key detected in localStorage');
-  // Consume immediately so other tabs don't also try to log in
-  localStorage.removeItem(OAUTH_PENDING_KEY);
-  let tokens;
-  try { tokens = JSON.parse(e.newValue); } catch { 
-    console.error('[Frontend Auth] Failed to parse OAuth tokens');
-    return;
-  }
-  if (!tokens?.access_token) {
-    console.warn('[Frontend Auth] No access token in OAuth response');
-    return;
-  }
-  console.log('[Frontend Auth] Processing OAuth tokens:', tokens.access_token?.slice(0, 20) + '...');
-  try {
-    await handleSupabaseSession(tokens);
-    import('./ui.js').then(({ showNotification }) =>
-      showNotification({ type: 'success', message: 'Signed in!', duration: 2500 }));
-  } catch (err) {
-    console.error('[Frontend Auth] OAuth sign-in error:', err);
-    import('./ui.js').then(({ showNotification }) =>
-      showNotification({ type: 'error', message: `Sign-in failed: ${err.message}`, duration: 4000 }));
-  }
-});
-
-// Also handle same-tab redirect flow (no popup) — ?oauth=1&t=TOKEN&r=REFRESH
-(function checkOAuthRedirect() {
-  const params = new URLSearchParams(location.search);
-  const t = params.get('t'), r = params.get('r');
-  console.log('[Frontend Auth] Checking for OAuth redirect params:', t ? 'found token' : 'no token');
-  if (params.get('oauth') === '1' && t) {
-    console.log('[Frontend Auth] Processing OAuth redirect with token:', t.slice(0, 20) + '...');
-    history.replaceState({}, '', '/');
-    handleSupabaseSession({ access_token: t, refresh_token: r || '' }).catch((err) => {
-      console.error('[Frontend Auth] OAuth redirect failed:', err);
-    });
-  }
-})();
-
-// Legacy postMessage support (kept for backwards compat with old callback pages)
-window.addEventListener('message', async (e) => {
-  if (e.origin !== location.origin) return;
-  if (e.data?.type !== 'oauth:callback') return;
-  console.log('[Frontend Auth] postMessage oauth:callback received');
-  const { access_token, refresh_token } = e.data;
-  if (!access_token) {
-    console.warn('[Frontend Auth] No access_token in postMessage oauth:callback');
-    return;
-  }
-  console.log('[Frontend Auth] Processing postMessage tokens:', access_token?.slice(0, 20) + '...');
-  try { await handleSupabaseSession({ access_token, refresh_token }); }
-  catch (err) {
-    console.error('[Frontend Auth] postMessage sign-in error:', err);
-    import('./ui.js').then(({ showNotification }) =>
-      showNotification({ type: 'error', message: `Sign-in failed: ${err.message}`, duration: 4000 }));
-  }
-});
-
-// ── Sidebar profile ───────────────────────────────────────────────────────
-
-export function updateSidebarProfile() {
-  console.log('[Frontend Auth] updateSidebarProfile called - currentUser:', currentUser);
-  const guestEl = document.getElementById('guest-section');
-  const userEl  = document.getElementById('user-section');
-  const nameEl  = document.getElementById('user-name-display');
-  const planEl  = document.getElementById('user-plan-display');
-  const avatarEl= document.getElementById('user-avatar');
-
-  if (!currentUser) {
-    console.log('[Frontend Auth] Not logged in, showing guest section');
-    guestEl?.classList.remove('hidden');
-    userEl?.classList.add('hidden');
-    return;
-  }
-  guestEl?.classList.add('hidden');
-  userEl?.classList.remove('hidden');
-
-  const username = userProfile?.username || currentUser.email?.split('@')[0] || '?';
-  if (nameEl)   nameEl.textContent = username;
-  if (avatarEl) avatarEl.textContent = username[0].toUpperCase();
-
-  const plan     = subscriptionInfo?.planKey || 'free';
-  const planName = subscriptionInfo?.planName || 'Free';
-  console.log('[Frontend Auth] Setting plan display - plan:', plan, 'planName:', planName, 'subscriptionInfo:', subscriptionInfo);
-  if (planEl) { planEl.textContent = planName; planEl.setAttribute('data-plan', plan); }
-  if (avatarEl) { avatarEl.setAttribute('data-plan', plan); }
-}
-
-on('auth:ok', updateSidebarProfile);
-on('auth:loggedOut', updateSidebarProfile);

public/js/chat.js

@@ -1,1101 +0,0 @@
-// chat.js — Chat rendering, streaming, versioning, editing
-import { send, on, off } from './ws.js';
-import { currentSessionId } from './sessions.js';
-import {
-  renderMarkdown, attachCodeCopyListeners, attachSvgPanelListeners,
-  escHtml, showNotification, autoResize,
-} from './ui.js';
-import { renderFilePreviewRow, clearFilePreviewRow } from './app.js';
-
-let activeSessionId = null;
-let isStreaming      = false;
-let streamingBubble  = null;
-let streamingText    = '';
-let streamingSessionId = null; // track which session is streaming
-let autoScroll       = true;
-let pendingAssets    = [];
-
-const BULLET = '\u2022';
-
-export function setActiveSession(id) {
-  activeSessionId = id;
-  // Update send button state based on whether this session is streaming
-  updateSendBtn(isStreaming && streamingSessionId === id);
-}
-export function getIsStreaming() { return isStreaming && streamingSessionId === activeSessionId; }
-
-// ── WebSocket events ──────────────────────────────────────────────────────
-
-on('sessions:data',         (msg) => { if (msg.session.id === activeSessionId) renderSession(msg.session); });
-on('chat:start',            (msg) => { onChatStart(msg); });
-on('chat:token',            (msg) => { if (msg.sessionId === activeSessionId) onToken(msg.token); });
-on('chat:done',             (msg) => { onChatDone(msg); });
-on('chat:aborted',          (msg) => { onChatAborted(msg); });
-on('chat:error',            (msg) => { if (msg.sessionId === activeSessionId) onChatError(msg.error); });
-on('chat:asset',            (msg) => { if (msg.sessionId === activeSessionId) appendAsset(msg.asset); });
-on('chat:toolCall',         (msg) => { if (msg.sessionId === activeSessionId) handleLiveToolCall(msg.call); });
-on('chat:messageEdited',    (msg) => { if (msg.sessionId === activeSessionId) renderHistory(msg.history); });
-on('chat:versionSelected',  (msg) => { if (msg.sessionId === activeSessionId) renderHistory(msg.history); });
-
-// Reconnect: reload current session instead of resetting to welcome
-on('ws:connected', () => {
-  if (activeSessionId) {
-    send({ type: 'sessions:get', sessionId: activeSessionId });
-  }
-});
-
-// ── Tree extraction (mirror of server logic) ──────────────────────────────
-
-function extractFlatHistoryFromTree(rootMessage) {
-  if (!rootMessage) return [];
-  const history = [];
-  const ensureValidContent = (msg) => {
-    if (msg.content === undefined || msg.content === null) msg.content = '';
-    return msg;
-  };
-  const extractBranch = (message) => {
-    history.push(ensureValidContent(message));
-    const currentVersionIdx = message.currentVersionIdx ?? 0;
-    const versions = message.versions || [];
-    if (currentVersionIdx >= versions.length) return;
-    const currentVersion = versions[currentVersionIdx];
-    if (!currentVersion) return;
-    const tail = currentVersion.tail;
-    if (!Array.isArray(tail) || tail.length === 0) return;
-    for (const tailMessage of tail) extractBranch(tailMessage);
-  };
-  extractBranch(rootMessage);
-  return history;
-}
-
-// ── Views ─────────────────────────────────────────────────────────────────
-
-export function renderSession(session) {
-  if (!session || !session.history?.length) { showWelcome(); return; }
-  showChat();
-  const flatHistory = session.history[0]?.versions
-    ? extractFlatHistoryFromTree(session.history[0])
-    : session.history;
-  renderHistory(flatHistory);
-}
-
-function showWelcome() {
-  document.getElementById('welcome-view')?.classList.remove('hidden');
-  document.getElementById('chat-view')?.classList.add('hidden');
-  document.getElementById('bottom-input-bar')?.classList.add('hidden');
-}
-
-function showChat() {
-  document.getElementById('welcome-view')?.classList.add('hidden');
-  document.getElementById('chat-view')?.classList.remove('hidden');
-  document.getElementById('bottom-input-bar')?.classList.remove('hidden');
-}
-
-// ── Full history render ───────────────────────────────────────────────────
-
-export function renderHistory(history) {
-  showChat();
-  const box = document.getElementById('chat-messages');
-  if (!box) return;
-  box.innerHTML = '';
-
-  for (let i = 0; i < history.length; i++) {
-    const msg = history[i];
-    const cleanMsg = { ...msg, content: stripSessionTag(msg.content) };
-    if      (cleanMsg.role === 'user')      appendUserMsg(box, cleanMsg, i);
-    else if (cleanMsg.role === 'assistant') appendAssistantMsg(box, cleanMsg, i);
-    else if (cleanMsg.role === 'image')     appendMediaMsg(box, 'image', cleanMsg.content);
-    else if (cleanMsg.role === 'video')     appendMediaMsg(box, 'video', cleanMsg.content);
-    else if (cleanMsg.role === 'audio')     appendMediaMsg(box, 'audio', cleanMsg.content);
-  }
-
-  if (typeof renderMathInElement !== 'undefined') {
-    try {
-      renderMathInElement(box, {
-        delimiters: [
-          { left: '$$', right: '$$', display: true },
-          { left: '$',  right: '$',  display: false },
-          { left: '\\(', right: '\\)', display: false },
-          { left: '\\[', right: '\\]', display: true },
-        ],
-        throwOnError: false,
-      });
-    } catch {}
-  }
-
-  if (autoScroll) box.scrollTop = box.scrollHeight;
-}
-
-function stripSessionTag(content) {
-  if (typeof content !== 'string') return content;
-  return content.replace(/<session_name>[\s\S]*?<\/session_name>/gi, '').trim();
-}
-
-// ── Message renderers ─────────────────────────────────────────────────────
-
-function appendUserMsg(box, msg, index) {
-  const wrap = makeWrap(index);
-  const bubble = document.createElement('div');
-  bubble.className = 'msg-user';
-
-  const text = msgText(msg.content);
-  const imgs = msgImages(msg.content);
-  const files = msgFiles(msg.content);
-
-  // Render text (convert bullet chars back for display)
-  const displayText = textWithBullets(text);
-  bubble.innerHTML = renderMarkdown(displayText);
-  attachCodeCopyListeners(bubble);
-  attachSvgPanelListeners(bubble);
-
-  // Image attachments
-  imgs.forEach(src => {
-    const img = document.createElement('img');
-    img.src = src; img.alt = 'Attached image';
-    img.style.cssText = 'max-width:100%;max-height:260px;border-radius:8px;margin-top:8px;display:block;cursor:pointer;';
-    img.addEventListener('click', () => openImageModal(src));
-    bubble.appendChild(img);
-  });
-
-  // File attachments — shown as chips
-  if (files.length > 0) {
-    const fileRow = document.createElement('div');
-    fileRow.className = 'msg-file-attachments';
-    files.forEach(f => {
-      const chip = buildFileChipView(f.name, f.content, false);
-      fileRow.appendChild(chip);
-    });
-    bubble.appendChild(fileRow);
-  }
-
-  wrap.appendChild(bubble);
-
-  // Version navigator below the bubble (only on user messages)
-  if (msg.versions?.length > 1) {
-    wrap.appendChild(buildVersionNav(msg, index));
-  }
-
-  // Action buttons
-  wrap.appendChild(buildActions([
-    { icon: copyIcon(), title: 'Copy', fn: () => copyText(text) },
-    { icon: editIcon(), title: 'Edit', fn: () => startUserEdit(wrap, index, msg, text, files) },
-  ], 'right'));
-
-  box.appendChild(wrap);
-}
-
-function appendAssistantMsg(box, msg, index) {
-  const wrap = makeWrap(index);
-  const bubble = document.createElement('div');
-  bubble.className = 'msg-assistant';
-  bubble.innerHTML = renderMarkdown(msg.content || '');
-  attachCodeCopyListeners(bubble);
-  attachSvgPanelListeners(bubble);
-
-  if (msg.toolCalls?.length) {
-    const chipRow = document.createElement('div');
-    chipRow.style.cssText = 'display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;';
-    msg.toolCalls.forEach(c => chipRow.appendChild(buildToolChip(c)));
-    bubble.appendChild(chipRow);
-  }
-
-  wrap.appendChild(bubble);
-
-  wrap.appendChild(buildActions([
-    { icon: copyIcon(), title: 'Copy', fn: () => copyText(msg.content || '') },
-    { icon: editIcon(), title: 'Edit', fn: () => startAssistantEdit(wrap, index, msg) },
-  ], 'left'));
-
-  box.appendChild(wrap);
-}
-
-function appendMediaMsg(box, type, content) {
-  const wrap = document.createElement('div');
-  wrap.className = 'msg-media';
-
-  if (type === 'image') {
-    const img = document.createElement('img');
-    img.src = content; img.alt = 'Generated image';
-    img.addEventListener('click', () => openImageModal(content));
-    wrap.appendChild(img);
-    wrap.appendChild(dlBtn(() => dlMedia(content, 'image.png')));
-  } else if (type === 'video') {
-    const v = document.createElement('video');
-    v.src = content; v.controls = true; v.preload = 'metadata';
-    wrap.appendChild(v);
-    wrap.appendChild(dlBtn(() => dlMedia(content, 'video.mp4')));
-  } else if (type === 'audio') {
-    const a = document.createElement('audio');
-    a.src = content; a.controls = true; a.preload = 'metadata'; a.style.width = '100%';
-    wrap.appendChild(a);
-    const db = dlBtn(() => dlMedia(content, 'audio.mp3'));
-    db.style.cssText += ';position:static;margin-top:6px;opacity:1;';
-    wrap.appendChild(db);
-  }
-  box.appendChild(wrap);
-}
-
-// ── File content extraction from message ─────────────────────────────────
-
-/**
- * Extract text file attachments embedded in the message content string.
- * They're stored as <details><summary>name</summary>\n```\ncontent\n```\n</details>
- */
-function msgFiles(content) {
-  if (typeof content !== 'string') return [];
-  const files = [];
-  const re = /<details><summary>([^<]+?)<\/summary>\s*```(?:\w*)\n([\s\S]*?)\n```\s*<\/details>/g;
-  let m;
-  while ((m = re.exec(content)) !== null) {
-    files.push({ name: m[1].trim(), content: m[2] });
-  }
-  return files;
-}
-
-/**
- * Strip the embedded file details blocks from display text so we show
- * only the user's written text.
- */
-function stripFileBlocks(text) {
-  if (typeof text !== 'string') return text;
-  return text
-    .replace(/<details><summary>Attached Files<\/summary>[\s\S]*?<\/details>/g, '')
-    .replace(/<details><summary>[^<]+?<\/summary>[\s\S]*?<\/details>/g, '')
-    .trim();
-}
-
-/**
- * Build a clickable chip for viewing a text file (read-only in sent messages).
- */
-function buildFileChipView(name, content, editable = false, onSave) {
-  const chip = document.createElement('div');
-  chip.className = 'file-attachment-chip';
-  chip.title = name;
-  const lineCount = (content.match(/\n/g) || []).length + 1;
-  chip.innerHTML = `
-    <span class="chip-icon">📄</span>
-    <div style="display:flex;flex-direction:column;min-width:0;">
-      <span class="chip-name">${escHtml(name)}</span>
-      <span class="chip-meta">${lineCount} line${lineCount !== 1 ? 's' : ''}</span>
-    </div>`;
-  chip.addEventListener('click', () => {
-    import('./modals.js').then(m => m.openFileViewerModal({
-      name,
-      content,
-      editable,
-      onSave,
-    }));
-  });
-  return chip;
-}
-
-// ── Builders ──────────────────────────────────────────────────────────────
-
-function makeWrap(index) {
-  const w = document.createElement('div');
-  w.className = 'msg-group'; w.dataset.index = index;
-  return w;
-}
-
-function buildActions(items, side = 'left') {
-  const div = document.createElement('div');
-  div.className = 'msg-actions' + (side === 'right' ? ' msg-actions-right' : ' msg-actions-left');
-  items.forEach(({ icon, title, fn }) => {
-    const btn = document.createElement('button');
-    btn.className = 'msg-action-btn'; btn.title = title;
-    btn.innerHTML = icon;
-    btn.addEventListener('click', e => { e.stopPropagation(); fn(); });
-    div.appendChild(btn);
-  });
-  return div;
-}
-
-function buildVersionNav(msg, index) {
-  const nav     = document.createElement('div');
-  nav.className = 'msg-version-nav';
-  const total   = msg.versions.length;
-  const cur     = (msg.currentVersionIdx ?? 0) + 1;
-
-  const prev = document.createElement('button');
-  prev.innerHTML = '&#8249;'; prev.title = 'Previous version'; prev.disabled = cur <= 1;
-  prev.addEventListener('click', () => send({ type: 'chat:selectVersion',
-    sessionId: activeSessionId, messageIndex: index, versionIdx: (msg.currentVersionIdx ?? 0) - 1 }));
-
-  const lbl = document.createElement('span');
-  lbl.textContent = `${cur} / ${total}`;
-  lbl.style.cssText = 'min-width:36px;text-align:center;';
-
-  const next = document.createElement('button');
-  next.innerHTML = '&#8250;'; next.title = 'Next version'; next.disabled = cur >= total;
-  next.addEventListener('click', () => send({ type: 'chat:selectVersion',
-    sessionId: activeSessionId, messageIndex: index, versionIdx: (msg.currentVersionIdx ?? 0) + 1 }));
-
-  nav.appendChild(prev); nav.appendChild(lbl); nav.appendChild(next);
-  return nav;
-}
-
-function buildToolChip(call) {
-  const names = { ollama_search: 'Web Search', read_web_page: 'Read Page',
-    generate_image: 'Image Gen', generate_video: 'Video Gen', generate_audio: 'Audio Gen' };
-  const icons = { ollama_search: '🔍', read_web_page: '📄',
-    generate_image: '🖼️', generate_video: '🎬', generate_audio: '🎵' };
-  const chip = document.createElement('button');
-  chip.className = 'msg-tool-call';
-  chip.innerHTML = `<span>${icons[call.name] || '🔧'}</span><span>${escHtml(names[call.name] || call.name)}</span>`;
-  chip.addEventListener('click', () => import('./modals.js').then(m => m.showToolCallModal(call)));
-  return chip;
-}
-
-function dlBtn(fn) {
-  const btn = document.createElement('button');
-  btn.className = 'media-download-btn'; btn.textContent = 'Download';
-  btn.addEventListener('click', fn);
-  return btn;
-}
-
-// ── SVG icons ─────────────────────────────────────────────────────────────
-
-function copyIcon() {
-  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
-}
-
-function editIcon() {
-  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`;
-}
-
-function searchIcon() {
-  return `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;
-}
-function imageIcon() {
-  return `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-}
-function videoIcon() {
-  return `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
-}
-function audioIcon() {
-  return `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`;
-}
-function attachIcon() {
-  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`;
-}
-function sendSvg() {
-  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg>`;
-}
-
-// ── Inline editing ────────────────────────────────────────────────────────
-
-function extractAttachmentsFromContent(content) {
-  if (!content || typeof content === 'string') {
-    // Extract from embedded file blocks in text
-    const files = msgFiles(typeof content === 'string' ? content : '');
-    return files.map(f => ({ type: 'text', name: f.name, content: f.content }));
-  }
-  if (!Array.isArray(content)) return [];
-  const attachments = [];
-  content.forEach(item => {
-    if (item.type === 'image_url' && item.image_url?.url) {
-      const dataUrl = item.image_url.url;
-      if (dataUrl.startsWith('data:')) {
-        const comma = dataUrl.indexOf(',');
-        if (comma > 0) {
-          const mimeType = dataUrl.slice(5, dataUrl.indexOf(';'));
-          const base64 = dataUrl.slice(comma + 1);
-          const ext = mimeType.split('/')[1] || 'png';
-          attachments.push({ type: 'image', name: `image.${ext}`, base64, mimeType });
-        }
-      }
-    }
-  });
-  // Also extract text files from text part
-  const textPart = content.find(p => p.type === 'text')?.text || '';
-  msgFiles(textPart).forEach(f => {
-    attachments.push({ type: 'text', name: f.name, content: f.content });
-  });
-  return attachments;
-}
-
-/**
- * startUserEdit now accepts existingFiles extracted from the rendered message.
- */
-function startUserEdit(wrap, index, msg, originalText, existingFiles = []) {
-  const bubble = wrap.querySelector('.msg-user'); if (!bubble) return;
-  const originalHTML = bubble.innerHTML;
-
-  // Get clean text without embedded file blocks
-  const cleanText = stripFileBlocks(originalText);
-
-  bubble.innerHTML = '';
-  bubble.classList.add('editing-user');
-
-  // Textarea — show bullet characters correctly
-  const ta = makeUserEditTextarea(cleanText);
-
-  // Set up bullet auto-convert in the edit textarea
-  setupEditBulletConvert(ta);
-
-  bubble.appendChild(ta);
-
-  // File preview row
-  const editAttachments = [];
-  // Start with existing image attachments
-  const existingImages = extractAttachmentsFromContent(msg.content).filter(a => a.type === 'image');
-  editAttachments.push(...existingImages);
-  // Add existing text file attachments
-  existingFiles.forEach(f => editAttachments.push({ type: 'text', name: f.name, content: f.content }));
-
-  const filePreviewRow = document.createElement('div');
-  filePreviewRow.className = 'edit-file-preview-row';
-  bubble.appendChild(filePreviewRow);
-
-  if (editAttachments.length > 0) renderEditFilePreview(editAttachments, filePreviewRow);
-
-  // Bottom toolbar
-  const toolbar = document.createElement('div');
-  toolbar.className = 'edit-toolbar';
-
-  const toolRow = document.createElement('div');
-  toolRow.className = 'edit-tool-row';
-
-  const toolDefs = [
-    { key: 'webSearch', label: 'Search', icon: searchIcon() },
-    { key: 'imageGen',  label: 'Image',  icon: imageIcon() },
-    { key: 'videoGen',  label: 'Video',  icon: videoIcon() },
-    { key: 'audioGen',  label: 'Audio',  icon: audioIcon() },
-  ];
-
-  toolDefs.forEach(({ key, label, icon }) => {
-    const btn = document.createElement('button');
-    btn.className = 'tool-btn-sm edit-tool-btn';
-    btn.dataset.tool = key;
-    btn.title = label;
-    btn.innerHTML = `${icon}<span>${label}</span>`;
-    const mainBtn = document.querySelector(`#bottom-input-bar [data-tool="${key}"]`);
-    if (mainBtn?.classList.contains('active')) btn.classList.add('active');
-    btn.addEventListener('click', () => btn.classList.toggle('active'));
-    toolRow.appendChild(btn);
-  });
-
-  // Paste image in edit textarea
-  ta.addEventListener('paste', async (e) => {
-    const items = e.clipboardData?.items || [];
-    for (const item of items) {
-      if (item.type.startsWith('image/')) {
-        e.preventDefault();
-        const file = item.getAsFile();
-        if (file) {
-          const dataUrl = await new Promise((res, rej) => {
-            const reader = new FileReader();
-            reader.onload = () => res(reader.result);
-            reader.onerror = rej;
-            reader.readAsDataURL(file);
-          });
-          const comma = dataUrl.indexOf(',');
-          const mimeType = dataUrl.slice(5, dataUrl.indexOf(';'));
-          const base64 = dataUrl.slice(comma + 1);
-          editAttachments.push({
-            type: 'image',
-            name: file.name || `image.${mimeType.split('/')[1] || 'png'}`,
-            base64, mimeType,
-          });
-          renderEditFilePreview(editAttachments, filePreviewRow);
-        }
-      }
-    }
-  });
-
-  // Attach button
-  const attachBtn = document.createElement('button');
-  attachBtn.className = 'edit-attach-btn';
-  attachBtn.title = 'Attach file or image';
-  attachBtn.innerHTML = attachIcon();
-  attachBtn.addEventListener('click', e => {
-    e.stopPropagation();
-    openEditAttachMenu(e, attachBtn, editAttachments, filePreviewRow);
-  });
-  toolRow.appendChild(attachBtn);
-  toolbar.appendChild(toolRow);
-
-  // Cancel + Send
-  const btnRow = document.createElement('div');
-  btnRow.className = 'edit-btn-row';
-
-  const cancelBtn = makeBtn('Cancel', 'btn-ghost');
-  cancelBtn.addEventListener('click', () => {
-    bubble.classList.remove('editing-user');
-    bubble.innerHTML = originalHTML;
-    attachCodeCopyListeners(bubble);
-  });
-
-  const sendBtn = document.createElement('button');
-  sendBtn.className = 'btn-primary edit-send-btn';
-  sendBtn.innerHTML = `${sendSvg()} Send`;
-  sendBtn.addEventListener('click', () => {
-    const newContent = ta.value.trim(); if (!newContent && editAttachments.length === 0) return;
-    sendBtn.disabled = true;
-
-    const tools = {};
-    toolbar.querySelectorAll('[data-tool]').forEach(b => {
-      tools[b.dataset.tool] = b.classList.contains('active');
-    });
-
-    send({
-      type: 'chat:editMessage',
-      sessionId: activeSessionId,
-      messageIndex: index,
-      newContent: buildEditContent(newContent, editAttachments),
-      role: 'user',
-    });
-
-    const handler = (editMsg) => {
-      if (editMsg.sessionId !== activeSessionId || editMsg.messageIndex !== index) return;
-      off('chat:messageEdited', handler);
-      send({ type: 'chat:send', sessionId: activeSessionId, tools });
-    };
-    on('chat:messageEdited', handler);
-  });
-
-  btnRow.appendChild(cancelBtn);
-  btnRow.appendChild(sendBtn);
-  toolbar.appendChild(btnRow);
-
-  bubble.appendChild(toolbar);
-  ta.focus();
-  ta.setSelectionRange(ta.value.length, ta.value.length);
-}
-
-function setupEditBulletConvert(ta) {
-  ta.addEventListener('keydown', (e) => {
-    const val = ta.value;
-    const pos = ta.selectionStart;
-
-    if (e.key === ' ') {
-      const lineStart = val.lastIndexOf('\n', pos - 1) + 1;
-      const beforeCursor = val.slice(lineStart, pos);
-      if (beforeCursor === '-') {
-        e.preventDefault();
-        const newVal = val.slice(0, lineStart) + BULLET + ' ' + val.slice(pos);
-        ta.value = newVal;
-        const newPos = lineStart + 2;
-        ta.setSelectionRange(newPos, newPos);
-        ta.style.height = 'auto';
-        ta.style.height = ta.scrollHeight + 'px';
-        return;
-      }
-    }
-
-    if (e.key === 'Backspace') {
-      const lineStart = val.lastIndexOf('\n', pos - 1) + 1;
-      const beforeCursor = val.slice(lineStart, pos);
-      if (beforeCursor === BULLET + ' ') {
-        e.preventDefault();
-        const newVal = val.slice(0, lineStart) + '- ' + val.slice(pos);
-        ta.value = newVal;
-        const newPos = lineStart + 2;
-        ta.setSelectionRange(newPos, newPos);
-        ta.style.height = 'auto';
-        ta.style.height = ta.scrollHeight + 'px';
-        return;
-      }
-      if (beforeCursor === BULLET) {
-        e.preventDefault();
-        const newVal = val.slice(0, lineStart) + '-' + val.slice(pos);
-        ta.value = newVal;
-        const newPos = lineStart + 1;
-        ta.setSelectionRange(newPos, newPos);
-        ta.style.height = 'auto';
-        ta.style.height = ta.scrollHeight + 'px';
-      }
-    }
-  });
-}
-
-function buildEditContent(text, attachments) {
-  const images = attachments.filter(a => a.type === 'image');
-  const files  = attachments.filter(a => a.type === 'text');
-  let fullText = text;
-  if (files.length > 0) {
-    fullText += '\n\n<details><summary>Attached Files</summary>\n';
-    for (const f of files)
-      fullText += `\n<details><summary>${f.name}</summary>\n\n\`\`\`\n${f.content}\n\`\`\`\n\n</details>\n`;
-    fullText += '</details>';
-  }
-  if (images.length > 0) {
-    return [
-      { type: 'text', text: fullText },
-      ...images.map(img => ({ type: 'image_url', image_url: { url: `data:${img.mimeType};base64,${img.base64}` } })),
-    ];
-  }
-  return fullText;
-}
-
-function openEditAttachMenu(e, triggerEl, editAttachments, filePreviewRow) {
-  e.preventDefault();
-  const fileInput  = document.getElementById('file-input');
-  const imageInput = document.getElementById('image-input');
-  if (!fileInput || !imageInput) return;
-
-  const menu = document.getElementById('attach-context-menu');
-  if (!menu) return;
-  menu.innerHTML = '';
-
-  for (const item of [
-    {
-      label: '📄 Upload file',
-      onClick: () => {
-        const handler = async function() {
-          for (const file of fileInput.files) {
-            const text = await file.text();
-            editAttachments.push({ type: 'text', name: file.name, content: text });
-          }
-          fileInput.value = '';
-          fileInput.removeEventListener('change', handler);
-          renderEditFilePreview(editAttachments, filePreviewRow);
-        };
-        fileInput.addEventListener('change', handler);
-        fileInput.click();
-      },
-    },
-    {
-      label: '🖼️ Upload image',
-      onClick: () => {
-        const handler = async function() {
-          for (const file of imageInput.files) {
-            const dataUrl = await new Promise((res, rej) => {
-              const reader = new FileReader();
-              reader.onload  = () => res(reader.result);
-              reader.onerror = rej;
-              reader.readAsDataURL(file);
-            });
-            const comma = dataUrl.indexOf(',');
-            const mimeType = dataUrl.slice(5, dataUrl.indexOf(';'));
-            const base64   = dataUrl.slice(comma + 1);
-            editAttachments.push({ type: 'image', name: file.name, base64, mimeType });
-          }
-          imageInput.value = '';
-          imageInput.removeEventListener('change', handler);
-          renderEditFilePreview(editAttachments, filePreviewRow);
-        };
-        imageInput.addEventListener('change', handler);
-        imageInput.click();
-      },
-    },
-  ]) {
-    const el = document.createElement('div');
-    el.className = 'context-item'; el.textContent = item.label;
-    el.addEventListener('click', () => { menu.classList.add('hidden'); item.onClick(); });
-    menu.appendChild(el);
-  }
-
-  menu.classList.remove('hidden');
-  const rect = triggerEl.getBoundingClientRect();
-  const mh   = 80;
-  menu.style.left = `${Math.max(8, rect.left)}px`;
-  menu.style.top  = `${rect.top - mh - 8}px`;
-  setTimeout(() => document.addEventListener('click', () => menu.classList.add('hidden'), { once: true }), 0);
-}
-
-function renderEditFilePreview(attachments, row) {
-  row.innerHTML = '';
-  if (attachments.length === 0) { row.style.display = 'none'; return; }
-  row.style.display = 'flex';
-  row.style.flexWrap = 'wrap';
-  row.style.gap = '6px';
-  attachments.forEach((a, i) => {
-    const wrap = document.createElement('div');
-    wrap.className = 'attach-preview-item';
-    if (a.type === 'image') {
-      const img = document.createElement('img');
-      img.src = `data:${a.mimeType};base64,${a.base64}`; img.alt = a.name;
-      wrap.appendChild(img);
-    } else {
-      // Use the same nice chip for text files in edit mode
-      const chip = buildFileChipView(a.name, a.content, true, (nc) => {
-        attachments[i].content = nc;
-      });
-      wrap.appendChild(chip);
-    }
-    const rm = document.createElement('button');
-    rm.className = 'attach-preview-remove'; rm.textContent = '×';
-    rm.addEventListener('click', e => {
-      e.stopPropagation();
-      attachments.splice(i, 1);
-      renderEditFilePreview(attachments, row);
-    });
-    wrap.appendChild(rm);
-    row.appendChild(wrap);
-  });
-  renderFilePreviewRow();
-}
-
-function startAssistantEdit(wrap, index, msg) {
-  const bubble = wrap.querySelector('.msg-assistant'); if (!bubble) return;
-  const originalContent = msg.content || '';
-  const originalHTML = bubble.innerHTML;
-
-  bubble.classList.add('editing');
-  bubble.innerHTML = '';
-
-  const ta = makeAssistantEditTextarea(originalContent);
-  bubble.appendChild(ta);
-
-  const btns = document.createElement('div');
-  btns.className = 'edit-actions';
-
-  const cancelBtn = makeBtn('Cancel', 'btn-ghost');
-  cancelBtn.addEventListener('click', () => {
-    bubble.classList.remove('editing');
-    bubble.innerHTML = originalHTML;
-    attachCodeCopyListeners(bubble);
-    attachSvgPanelListeners(bubble);
-  });
-
-  const saveBtn = makeBtn('Save', 'btn-primary');
-  saveBtn.addEventListener('click', () => {
-    const newContent = ta.value.trim(); if (!newContent) return;
-    saveBtn.disabled = true;
-    send({ type: 'chat:editMessage', sessionId: activeSessionId,
-      messageIndex: index, newContent, role: 'assistant' });
-  });
-
-  btns.appendChild(cancelBtn); btns.appendChild(saveBtn);
-  bubble.appendChild(btns);
-  ta.focus();
-  ta.setSelectionRange(ta.value.length, ta.value.length);
-}
-
-function makeUserEditTextarea(value) {
-  const ta = document.createElement('textarea');
-  ta.value = value;
-  ta.style.cssText = [
-    'width:100%',
-    'background:transparent',
-    'border:none',
-    'outline:none',
-    'color:var(--text)',
-    'font:inherit',
-    'font-size:15px',
-    'resize:none',
-    'line-height:1.6',
-    'min-height:26px',
-    'overflow-y:hidden',
-    'display:block',
-  ].join(';');
-  const resize = () => {
-    ta.style.height = 'auto';
-    ta.style.height = ta.scrollHeight + 'px';
-  };
-  ta.addEventListener('input', resize);
-  requestAnimationFrame(resize);
-  return ta;
-}
-
-function makeAssistantEditTextarea(value) {
-  const ta = document.createElement('textarea');
-  ta.value = value;
-  ta.style.cssText = [
-    'width:100%',
-    'background:transparent',
-    'border:none',
-    'outline:none',
-    'color:var(--text)',
-    'font:inherit',
-    'font-size:14px',
-    'resize:none',
-    'line-height:1.6',
-    'min-height:120px',
-    'overflow-y:auto',
-    'display:block',
-    'padding-bottom:8px',
-  ].join(';');
-  const resize = () => {
-    ta.style.height = 'auto';
-    ta.style.height = Math.min(ta.scrollHeight, window.innerHeight * 0.6) + 'px';
-  };
-  ta.addEventListener('input', resize);
-  requestAnimationFrame(resize);
-  return ta;
-}
-
-function makeBtn(label, cls) {
-  const btn = document.createElement('button');
-  btn.textContent = label; btn.className = cls;
-  btn.style.cssText += ';font-size:12px;padding:5px 12px;';
-  return btn;
-}
-
-// ── Streaming ─────────────────────────────────────────────────────────────
-
-function onChatStart(msg) {
-  const sessionId = msg.sessionId;
-  isStreaming = true;
-  streamingSessionId = sessionId;
-  streamingText = '';
-  pendingAssets = [];
-
-  if (sessionId !== activeSessionId) {
-    // Streaming for a background session — just track state, no UI
-    return;
-  }
-
-  showChat();
-  const box = document.getElementById('chat-messages'); if (!box) return;
-  streamingBubble = document.createElement('div');
-  streamingBubble.className = 'msg-assistant msg-generating';
-
-  const thinking = document.createElement('div'); thinking.className = 'msg-thinking';
-  for (let i = 0; i < 3; i++) {
-    const d = document.createElement('div'); d.className = 'thinking-dot'; thinking.appendChild(d);
-  }
-  streamingBubble.appendChild(thinking);
-  box.appendChild(streamingBubble);
-  if (autoScroll) box.scrollTop = box.scrollHeight;
-  updateSendBtn(true);
-}
-
-function onToken(token) {
-  if (!streamingBubble) return;
-  streamingText += token;
-  streamingBubble.querySelector('.msg-thinking')?.remove();
-  const displayText = stripSessionTag(processDisplay(streamingText));
-  streamingBubble.innerHTML = renderMarkdown(displayText);
-  attachCodeCopyListeners(streamingBubble);
-  if (autoScroll) {
-    const box = document.getElementById('chat-messages');
-    if (box) box.scrollTop = box.scrollHeight;
-  }
-}
-
-function onChatDone(msg) {
-  const sessionId = msg.sessionId;
-  if (sessionId === streamingSessionId) {
-    isStreaming = false;
-    streamingSessionId = null;
-  }
-
-  if (sessionId === activeSessionId) {
-    streamingBubble?.classList.remove('msg-generating');
-    streamingBubble = null;
-    streamingText = '';
-    updateSendBtn(false);
-    if (msg.history) {
-      renderHistory(msg.history);
-      if (pendingAssets.length > 0) {
-        const box = document.getElementById('chat-messages');
-        if (box) {
-          pendingAssets.forEach(asset => appendMediaMsg(box, asset.role, asset.content));
-          if (autoScroll) box.scrollTop = box.scrollHeight;
-        }
-        pendingAssets = [];
-      }
-    }
-  }
-}
-
-function onChatAborted(msg) {
-  const sessionId = msg.sessionId;
-  if (sessionId === streamingSessionId) {
-    isStreaming = false;
-    streamingSessionId = null;
-  }
-
-  if (sessionId === activeSessionId) {
-    if (streamingBubble) {
-      streamingBubble.classList.remove('msg-generating');
-      const note = document.createElement('div');
-      note.style.cssText = 'font-size:12px;color:var(--text-muted);margin-top:6px;';
-      note.textContent = '⚠ Interrupted';
-      streamingBubble.appendChild(note);
-      streamingBubble = null;
-    }
-    updateSendBtn(false);
-    if (msg.history) {
-      renderHistory(msg.history);
-      if (pendingAssets.length > 0) {
-        const box = document.getElementById('chat-messages');
-        if (box) pendingAssets.forEach(asset => appendMediaMsg(box, asset.role, asset.content));
-      }
-    }
-    pendingAssets = [];
-  }
-}
-
-function onChatError(err) {
-  isStreaming = false;
-  streamingSessionId = null;
-  if (streamingBubble) {
-    streamingBubble.classList.remove('msg-generating');
-    streamingBubble.querySelector('.msg-thinking')?.remove();
-    const note = document.createElement('div');
-    note.style.cssText = 'color:#f87171;font-size:13px;margin-top:6px;';
-    note.textContent = `⚠ Error: ${err}`;
-    streamingBubble.appendChild(note);
-    streamingBubble = null;
-  }
-  updateSendBtn(false);
-}
-
-function handleLiveToolCall(call) {
-  if (!streamingBubble) return;
-  const names = { ollama_search: 'Searching web…', read_web_page: 'Reading page…',
-    generate_image: 'Generating image…', generate_video: 'Generating video…', generate_audio: 'Generating audio…' };
-
-  if (call.state === 'pending') {
-    streamingBubble.querySelector('.msg-thinking')?.remove();
-    if (!streamingBubble.querySelector(`[data-tcid="${call.id}"]`)) {
-      const badge = document.createElement('div'); badge.className = 'msg-tool-call';
-      badge.style.pointerEvents = 'none'; badge.setAttribute('data-tcid', call.id);
-      badge.innerHTML = `<span>🔧</span><span>${names[call.name] || call.name}</span>`;
-      streamingBubble.appendChild(badge);
-    }
-  } else if (call.state === 'resolved' || call.state === 'canceled') {
-    streamingBubble.querySelector(`[data-tcid="${call.id}"]`)?.remove();
-  }
-}
-
-function appendAsset(asset) {
-  const box = document.getElementById('chat-messages'); if (!box) return;
-  pendingAssets.push(asset);
-  appendMediaMsg(box, asset.role, asset.content);
-  if (autoScroll) box.scrollTop = box.scrollHeight;
-}
-
-// ── Submit ────────────────────────────────────────────────────────────────
-
-export function submitMessage(text, attachments = []) {
-  if (!text.trim() && attachments.length === 0) return;
-  if (isStreaming && streamingSessionId === activeSessionId) {
-    send({ type: 'chat:stop', sessionId: activeSessionId });
-    return;
-  }
-  if (!activeSessionId) return;
-
-  const images   = attachments.filter(a => a.type === 'image');
-  const textFiles= attachments.filter(a => a.type === 'text');
-
-  let fullText = text;
-  if (textFiles.length > 0) {
-    fullText += '\n\n<details><summary>Attached Files</summary>\n';
-    for (const f of textFiles)
-      fullText += `\n<details><summary>${f.name}</summary>\n\n\`\`\`\n${f.content}\n\`\`\`\n\n</details>\n`;
-    fullText += '</details>';
-  }
-
-  let content;
-  if (images.length > 0) {
-    content = [
-      { type: 'text', text: fullText },
-      ...images.map(img => ({ type: 'image_url', image_url: { url: `data:${img.mimeType};base64,${img.base64}` } })),
-    ];
-  } else {
-    content = fullText;
-  }
-
-  // Append optimistic user bubble
-  const box = document.getElementById('chat-messages');
-  if (box) {
-    const wrap = makeWrap(-1);
-    const bubble = document.createElement('div'); bubble.className = 'msg-user';
-    const displayText = textWithBullets(stripFileBlocks(text));
-    bubble.innerHTML = renderMarkdown(displayText);
-    images.forEach(img => {
-      const el = document.createElement('img');
-      el.src = `data:${img.mimeType};base64,${img.base64}`;
-      el.style.cssText = 'max-width:100%;max-height:200px;border-radius:8px;margin-top:6px;display:block;';
-      bubble.appendChild(el);
-    });
-    if (textFiles.length > 0) {
-      const fileRow = document.createElement('div');
-      fileRow.className = 'msg-file-attachments';
-      textFiles.forEach(f => fileRow.appendChild(buildFileChipView(f.name, f.content, false)));
-      bubble.appendChild(fileRow);
-    }
-    wrap.appendChild(bubble);
-    box.appendChild(wrap);
-    if (autoScroll) box.scrollTop = box.scrollHeight;
-  }
-
-  send({ type: 'chat:send', sessionId: activeSessionId, content, tools: getActiveTools(), clientId: localStorage.getItem('ipai_client_id') || '' });
-}
-
-// ── Utils ─────────────────────────────────────────────────────────────────
-
-function getActiveTools() {
-  const tools = {};
-  const container =
-    document.querySelector('#bottom-input-bar:not(.hidden)')?.querySelector('.tool-row') ||
-    document.querySelector('.center-input-actions');
-
-  if (!container) {console.warn('Tool container not found'); return tools;};
-
-  container.querySelectorAll('[data-tool]').forEach(btn => {
-    const toolName = btn.dataset.tool;
-    if (toolName) tools[toolName] = btn.classList.contains('active');
-  });
-
-  return tools;
-}
-
-function msgText(content) {
-  if (typeof content === 'string') return content;
-  return content.filter(p => p.type === 'text').map(p => p.text).join('\n');
-}
-function msgImages(content) {
-  if (typeof content === 'string') return [];
-  return content.filter(p => p.type === 'image_url').map(p => p.image_url.url);
-}
-
-/**
- * Convert bullet characters (•) back to markdown list items for rendering.
- * This ensures the display text renders as proper bullet points via marked.js
- */
-function textWithBullets(text) {
-  if (!text) return text;
-  // Convert '• ' at start of line to '* ' for markdown rendering
-  return text.replace(/^(\s*)\u2022\s/gm, '$1* ');
-}
-
-function processDisplay(text) {
-  let result = '', i = 0;
-  while (i < text.length) {
-    const start = text.indexOf('```svg', i);
-    if (start === -1) { result += text.slice(i); break; }
-    result += text.slice(i, start) + '[SVG Image]';
-    const end = text.indexOf('```', start + 6);
-    if (end === -1) break;
-    i = end + 3;
-  }
-  return result;
-}
-
-function updateSendBtn(streaming) {
-  const sessionStreaming = streaming && (streamingSessionId === activeSessionId || streaming === true);
-  document.querySelectorAll('#bottom-send-btn, #center-send-btn').forEach(btn => {
-    btn.innerHTML = sessionStreaming
-      ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>'
-      : '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg>';
-    btn.classList.toggle('stop', !!sessionStreaming);
-  });
-}
-
-function copyText(text) {
-  navigator.clipboard.writeText(text).then(
-    () => showNotification({ type: 'success', message: 'Copied', duration: 1500 }),
-    () => showNotification({ type: 'error',   message: 'Copy failed', duration: 1500 })
-  );
-}
-
-function dlMedia(dataUrl, filename) {
-  const a = document.createElement('a');
-  a.href = dataUrl; a.download = filename;
-  document.body.appendChild(a); a.click(); document.body.removeChild(a);
-}
-
-function openImageModal(src) {
-  import('./modals.js').then(m => m.openImageModal(src));
-}
-
-// Scroll tracking
-document.getElementById('chat-view')?.addEventListener('scroll', e => {
-  const el = e.target;
-  autoScroll = el.scrollHeight - el.scrollTop - el.clientHeight < 60;
-}, true);

public/js/modals.js

@@ -1,503 +0,0 @@
-// modals.js — All modal dialogs
-import { send, on } from './ws.js';
-import { escHtml } from './ui.js';
-import { isAuthenticated, loginWithEmail, signUpWithEmail, loginWithOAuth, logout, currentUser, userProfile, userSettings } from './auth.js';
-
-// ── Modal stack support ───────────────────────────────────────────────────
-// Primary modal uses #modal-overlay / #modal-box.
-// Secondary (stacked) modal creates its own overlay on top.
-
-let overlay, box;
-function getOverlay() { return overlay || (overlay = document.getElementById('modal-overlay')); }
-function getBox()     { return box     || (box     = document.getElementById('modal-box')); }
-
-let secondaryOverlay = null;
-
-export function openModal(html, opts = {}) {
-  const o = getOverlay(), b = getBox();
-  b.className = 'modal-box' + (opts.wide ? ' wide' : '');
-  b.innerHTML = html;
-  o.classList.remove('hidden');
-  if (opts.onOpen) opts.onOpen(b);
-  o.onclick = (e) => { if (e.target === o) closeModal(); };
-  document.addEventListener('keydown', escHandler);
-}
-
-const escHandler = (e) => { if (e.key === 'Escape') { if (secondaryOverlay) closeSecondaryModal(); else closeModal(); } };
-
-export function closeModal() {
-  if (secondaryOverlay) closeSecondaryModal();
-  getOverlay().classList.add('hidden');
-  getBox().innerHTML = '';
-  document.removeEventListener('keydown', escHandler);
-}
-
-/** Open a secondary (stacked) modal on top of the primary one */
-export function openSecondaryModal(html, opts = {}) {
-  // Remove existing secondary if any
-  closeSecondaryModal();
-
-  secondaryOverlay = document.createElement('div');
-  secondaryOverlay.className = 'modal-overlay';
-  secondaryOverlay.style.zIndex = 'calc(var(--z-modal) + 50)';
-  secondaryOverlay.style.animation = 'fadeIn 0.16s ease';
-
-  const secBox = document.createElement('div');
-  secBox.className = 'modal-box' + (opts.wide ? ' wide' : '');
-  secBox.innerHTML = html;
-  secondaryOverlay.appendChild(secBox);
-  document.body.appendChild(secondaryOverlay);
-
-  if (opts.onOpen) opts.onOpen(secBox);
-
-  secondaryOverlay.onclick = (e) => {
-    if (e.target === secondaryOverlay) closeSecondaryModal();
-  };
-}
-
-export function closeSecondaryModal() {
-  if (secondaryOverlay) {
-    secondaryOverlay.remove();
-    secondaryOverlay = null;
-  }
-}
-
-// ── Auth modal ────────────────────────────────────────────────────────────
-
-export function openAuthModal(initialTab = 'signin') {
-  openModal(`
-    <div class="modal-header">
-      <span class="modal-title">Sign in to InferencePort AI</span>
-      <button class="modal-close" id="auth-close-btn">×</button>
-    </div>
-    <div class="modal-body">
-      <div class="auth-tabs">
-        <button class="auth-tab ${initialTab==='signin'?'active':''}" data-tab="signin">Sign In</button>
-        <button class="auth-tab ${initialTab==='signup'?'active':''}" data-tab="signup">Create Account</button>
-      </div>
-
-      <div id="auth-signin" style="${initialTab!=='signin'?'display:none':''}">
-        <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:14px;">
-          <button class="social-btn" id="github-btn">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.7 7.7 0 012.01-.27c.68 0 1.36.09 2.01.27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
-            Continue with GitHub
-          </button>
-          <button class="social-btn" id="google-btn">
-            <svg width="16" height="16" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.02 1.53 7.4 2.8l5.4-5.4C33.52 3.7 29.1 1.5 24 1.5 14.64 1.5 6.58 6.88 2.66 14.7l6.64 5.15C11.2 13.6 17.08 9.5 24 9.5z"/><path fill="#4285F4" d="M46.5 24c0-1.64-.15-3.22-.43-4.74H24v9h12.7c-.55 2.95-2.21 5.45-4.7 7.12l7.23 5.6C43.38 36.9 46.5 31.1 46.5 24z"/><path fill="#FBBC05" d="M9.3 28.85A14.4 14.4 0 0 1 8.5 24c0-1.68.3-3.3.8-4.85l-6.64-5.15A23.96 23.96 0 0 0 1.5 24c0 3.9.94 7.58 2.66 10.7l6.64-5.15z"/><path fill="#34A853" d="M24 46.5c6.48 0 11.92-2.14 15.9-5.82l-7.23-5.6c-2.01 1.35-4.58 2.15-8.67 2.15-6.92 0-12.8-4.1-14.7-10.05l-6.64 5.15C6.58 41.12 14.64 46.5 24 46.5z"/></svg>
-            Continue with Google
-          </button>
-        </div>
-        <div class="auth-divider">or</div>
-        <div class="form-group">
-          <label class="form-label">Email</label>
-          <input class="form-input" id="signin-email" type="email" placeholder="you@example.com" />
-        </div>
-        <div class="form-group">
-          <label class="form-label">Password</label>
-          <input class="form-input" id="signin-password" type="password" placeholder="••••••••" />
-        </div>
-        <div id="signin-error" class="form-error" style="display:none;margin-bottom:8px;"></div>
-        <button class="btn-primary" id="signin-submit" style="width:100%;">Sign In</button>
-        <div style="margin-top:10px;text-align:center;">
-          <button style="font-size:13px;color:var(--blue-bright);" id="forgot-pw">Forgot password?</button>
-        </div>
-      </div>
-
-      <div id="auth-signup" style="${initialTab!=='signup'?'display:none':''}">
-        <div class="form-group">
-          <label class="form-label">Email</label>
-          <input class="form-input" id="signup-email" type="email" placeholder="you@example.com" />
-        </div>
-        <div class="form-group">
-          <label class="form-label">Password</label>
-          <input class="form-input" id="signup-password" type="password" placeholder="Min 6 characters" />
-        </div>
-        <div id="signup-error" class="form-error" style="display:none;margin-bottom:8px;"></div>
-        <button class="btn-primary" id="signup-submit" style="width:100%;">Create Account</button>
-      </div>
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#auth-close-btn')?.addEventListener('click', closeModal);
-
-      // Tab switching
-      b.querySelectorAll('.auth-tab').forEach(tab => {
-        tab.addEventListener('click', () => {
-          b.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
-          tab.classList.add('active');
-          const name = tab.dataset.tab;
-          b.querySelector('#auth-signin').style.display = name === 'signin' ? '' : 'none';
-          b.querySelector('#auth-signup').style.display = name === 'signup' ? '' : 'none';
-        });
-      });
-
-      // Sign in
-      b.querySelector('#signin-submit').addEventListener('click', async () => {
-        const email = b.querySelector('#signin-email').value.trim();
-        const pass  = b.querySelector('#signin-password').value;
-        const errEl = b.querySelector('#signin-error');
-        errEl.style.display = 'none';
-        try {
-          await loginWithEmail(email, pass);
-          closeModal();
-        } catch (e) {
-          errEl.textContent = e.message; errEl.style.display = '';
-        }
-      });
-
-      // Sign up
-      b.querySelector('#signup-submit').addEventListener('click', async () => {
-        const email = b.querySelector('#signup-email').value.trim();
-        const pass  = b.querySelector('#signup-password').value;
-        const errEl = b.querySelector('#signup-error');
-        errEl.style.display = 'none';
-        try {
-          const result = await signUpWithEmail(email, pass);
-          if (result.access_token) {
-            closeModal();
-          } else {
-            errEl.textContent = 'Check your email to confirm your account.'; errEl.style.display = '';
-          }
-        } catch (e) {
-          errEl.textContent = e.message; errEl.style.display = '';
-        }
-      });
-
-      b.querySelector('#github-btn').addEventListener('click', () => { loginWithOAuth('github'); closeModal(); });
-      b.querySelector('#google-btn').addEventListener('click', () => { loginWithOAuth('google'); closeModal(); });
-      b.querySelector('#forgot-pw').addEventListener('click', () => openForgotPasswordModal());
-
-      // Enter key
-      [['#signin-email','#signin-password','#signin-submit'],
-       ['#signup-email','#signup-password','#signup-submit']].forEach(([e, p, s]) => {
-        [e, p].forEach(sel => {
-          b.querySelector(sel)?.addEventListener('keydown', ev => {
-            if (ev.key === 'Enter') b.querySelector(s)?.click();
-          });
-        });
-      });
-    }
-  });
-}
-
-function openForgotPasswordModal() {
-  openModal(`
-    <div class="modal-header">
-      <span class="modal-title">Reset Password</span>
-      <button class="modal-close" id="forgot-close-btn">×</button>
-    </div>
-    <div class="modal-body">
-      <div class="form-group">
-        <label class="form-label">Email</label>
-        <input class="form-input" id="reset-email" type="email" placeholder="you@example.com" />
-      </div>
-      <div id="reset-msg" style="font-size:13px;margin-bottom:8px;display:none;"></div>
-    </div>
-    <div class="modal-footer">
-      <button class="btn-ghost" id="forgot-cancel-btn">Cancel</button>
-      <button class="btn-primary" id="reset-submit">Send Reset Link</button>
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#forgot-close-btn')?.addEventListener('click', closeModal);
-      b.querySelector('#forgot-cancel-btn')?.addEventListener('click', closeModal);
-      b.querySelector('#reset-submit').addEventListener('click', async () => {
-        const email = b.querySelector('#reset-email').value.trim();
-        const msgEl = b.querySelector('#reset-msg');
-        const SUPABASE_URL = 'https://dpixehhdbtzsbckfektd.supabase.co';
-        const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRwaXhlaGhkYnR6c2Jja2Zla3RkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjExNDI0MjcsImV4cCI6MjA3NjcxODQyN30.nR1KCSRQj1E_evQWnE2VaZzg7PgLp2kqt4eDKP2PkpE';
-        try {
-          await fetch(`${SUPABASE_URL}/auth/v1/recover`, {
-            method: 'POST', headers: { 'Content-Type':'application/json','apikey':SUPABASE_KEY },
-            body: JSON.stringify({ email }),
-          });
-          msgEl.textContent = 'Reset link sent. Check your email.';
-          msgEl.style.color = 'var(--plan-core)'; msgEl.style.display = '';
-        } catch { msgEl.textContent = 'Error. Try again.'; msgEl.style.display = ''; }
-      });
-    }
-  });
-}
-
-// ── Share modal ───────────────────────────────────────────────────────────
-
-export function showShareModal(sessionId) {
-  if (!isAuthenticated()) return openAuthModal('signin');
-
-  openModal(`
-    <div class="modal-header">
-      <span class="modal-title">Share Chat</span>
-      <button class="modal-close" id="share-close-btn">×</button>
-    </div>
-    <div class="modal-body">
-      <div class="share-warning">
-        <span style="font-size:18px">⚠️</span>
-        <span>You are about to share this whole session. Anyone with the link can import it into their account.</span>
-      </div>
-      <div id="share-url-wrap" style="display:none;">
-        <div class="form-label" style="margin-bottom:6px;">Share link</div>
-        <div style="display:flex;gap:8px;">
-          <input class="form-input" id="share-url-input" readonly style="flex:1;" />
-          <button class="btn-ghost" id="share-copy-btn">Copy</button>
-        </div>
-      </div>
-      <div id="share-loading" style="font-size:13px;color:var(--text-muted);display:none;">Generating link…</div>
-    </div>
-    <div class="modal-footer">
-      <button class="btn-ghost" id="share-close-footer">Close</button>
-      <button class="btn-primary" id="share-generate-btn">Generate Link</button>
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#share-close-btn')?.addEventListener('click', closeModal);
-      b.querySelector('#share-close-footer')?.addEventListener('click', closeModal);
-      b.querySelector('#share-generate-btn').addEventListener('click', () => {
-        b.querySelector('#share-loading').style.display = '';
-        b.querySelector('#share-generate-btn').disabled = true;
-        send({ type: 'sessions:share', sessionId });
-
-        on('sessions:shareUrl', function handler(msg) {
-          if (msg.sessionId !== sessionId) return;
-          import('./ws.js').then(({ off }) => off('sessions:shareUrl', handler));
-          b.querySelector('#share-loading').style.display = 'none';
-          b.querySelector('#share-url-wrap').style.display = '';
-          const input = b.querySelector('#share-url-input');
-          input.value = msg.url;
-
-          b.querySelector('#share-copy-btn').addEventListener('click', async () => {
-            await navigator.clipboard.writeText(msg.url).catch(() => {});
-            b.querySelector('#share-copy-btn').textContent = 'Copied!';
-          });
-        });
-      });
-    }
-  });
-}
-
-// ── Tool call modal ───────────────────────────────────────────────────────
-
-export function showToolCallModal(call) {
-  const names = {
-    ollama_search: 'Web Search', read_web_page: 'Read Web Page',
-    generate_image: 'Image Generation', generate_video: 'Video Generation', generate_audio: 'Audio Generation',
-  };
-  const displayName = names[call.name] || call.name;
-
-  let argsDisplay = call.args || call.arguments || '{}';
-  if (typeof argsDisplay !== 'string') argsDisplay = JSON.stringify(argsDisplay, null, 2);
-
-  let resultDisplay = call.result || '—';
-  if (typeof resultDisplay !== 'string') resultDisplay = JSON.stringify(resultDisplay, null, 2);
-
-  openModal(`
-    <div class="modal-header">
-      <span class="modal-title">🔧 ${escHtml(displayName)}</span>
-      <button class="modal-close" id="tool-close-btn">×</button>
-    </div>
-    <div class="modal-body">
-      <div class="tool-detail-section">
-        <div class="tool-detail-label">Tool</div>
-        <div class="tool-detail-content" style="font-family:var(--font-sans);">${escHtml(call.name)}</div>
-      </div>
-      <div class="tool-detail-section">
-        <div class="tool-detail-label">Request</div>
-        <div class="tool-detail-content">${escHtml(argsDisplay)}</div>
-      </div>
-      <div class="tool-detail-section">
-        <div class="tool-detail-label">Response</div>
-        <div class="tool-detail-content">${escHtml(resultDisplay.slice(0, 4000))}</div>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button class="btn-ghost" id="tool-close-footer">Close</button>
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#tool-close-btn')?.addEventListener('click', closeModal);
-      b.querySelector('#tool-close-footer')?.addEventListener('click', closeModal);
-    }
-  });
-}
-
-// ── Image modal ───────────────────────────────────────────────────────────
-
-export function openImageModal(src) {
-  openModal(`
-    <div class="modal-header" style="border-bottom:none;">
-      <span></span>
-      <button class="modal-close" id="img-close-btn">×</button>
-    </div>
-    <div class="modal-body" style="padding-top:0;text-align:center;">
-      <img src="${escHtml(src)}" style="max-width:100%;max-height:70vh;border-radius:8px;" alt="Image" />
-    </div>
-    <div class="modal-footer">
-      <button class="btn-ghost" id="img-close-footer">Close</button>
-      <button class="btn-primary" id="img-dl-btn">Download</button>
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#img-close-btn')?.addEventListener('click', closeModal);
-      b.querySelector('#img-close-footer')?.addEventListener('click', closeModal);
-      b.querySelector('#img-dl-btn').addEventListener('click', () => {
-        const a = document.createElement('a');
-        a.href = src; a.download = `image-${Date.now()}.png`;
-        document.body.appendChild(a); a.click(); document.body.removeChild(a);
-      });
-    }
-  });
-}
-
-// ── File viewer modal ─────────────────────────────────────────────────────
-
-/**
- * Opens a modal to view/edit a text file attachment.
- * @param {object} opts - { name, content, editable, onSave }
- */
-export function openFileViewerModal({ name, content, editable = false, onSave }) {
-  const title = editable ? `Edit: ${escHtml(name)}` : escHtml(name);
-  openSecondaryModal(`
-    <div class="modal-header">
-      <span class="modal-title" style="font-size:15px;display:flex;align-items:center;gap:8px;">
-        <span style="font-size:18px;">📄</span>${title}
-      </span>
-      <button class="modal-close" id="fv-close-btn">×</button>
-    </div>
-    <div class="modal-body" style="padding-top:12px;">
-      ${editable
-        ? `<textarea id="fv-editor" style="width:100%;min-height:280px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);padding:10px 12px;color:var(--text);font-size:13px;font-family:var(--font-mono);resize:vertical;line-height:1.55;outline:none;">${escHtml(content)}</textarea>`
-        : `<pre style="background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;font-size:12px;font-family:var(--font-mono);white-space:pre-wrap;word-break:break-all;max-height:400px;overflow-y:auto;color:var(--text-dim);">${escHtml(content)}</pre>`
-      }
-    </div>
-    <div class="modal-footer">
-      <button class="btn-ghost" id="fv-cancel-btn">Cancel</button>
-      ${editable ? `<button class="btn-primary" id="fv-save-btn">Save</button>` : ''}
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#fv-close-btn')?.addEventListener('click', closeSecondaryModal);
-      b.querySelector('#fv-cancel-btn')?.addEventListener('click', closeSecondaryModal);
-      if (editable) {
-        b.querySelector('#fv-save-btn')?.addEventListener('click', () => {
-          const val = b.querySelector('#fv-editor')?.value ?? '';
-          onSave?.(val);
-          closeSecondaryModal();
-        });
-        // Focus and auto-resize
-        const ta = b.querySelector('#fv-editor');
-        if (ta) {
-          ta.focus();
-          ta.addEventListener('input', () => {
-            ta.style.height = 'auto';
-            ta.style.height = Math.min(ta.scrollHeight, window.innerHeight * 0.6) + 'px';
-          });
-        }
-      }
-    }
-  });
-}
-
-// ── Chat limit modal ──────────────────────────────────────────────────────
-
-export function openLimitModal() {
-  openModal(`
-    <div class="modal-body" style="padding-top:28px;">
-      <div class="limit-modal-inner">
-        <div class="limit-icon">💬</div>
-        <div class="limit-title">Daily limit reached</div>
-        <div class="limit-desc">Sign in or create a free account to keep chatting.<br>Guest usage resets every 24 hours.</div>
-        <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
-          <button class="btn-primary" id="limit-signin">Sign In</button>
-          <button class="btn-ghost" id="limit-signup">Create Account</button>
-        </div>
-      </div>
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#limit-signin').addEventListener('click', () => { closeModal(); openAuthModal('signin'); });
-      b.querySelector('#limit-signup').addEventListener('click', () => { closeModal(); openAuthModal('signup'); });
-    }
-  });
-}
-
-export function openGuestRateLimitModal() {
-  openModal(`
-    <div class="modal-header">
-      <span class="modal-title">Unusual request activity detected</span>
-      <button class="modal-close" id="guest-rate-close-btn">×</button>
-    </div>
-    <div class="modal-body" style="padding-top:18px;">
-      <div class="limit-modal-inner">
-        <div class="limit-title">Please sign in to continue</div>
-        <div class="limit-desc" style="margin-top:10px;line-height:1.5;">
-          An unusual amount of signed out requests has come from your device. Please sign in, or if this is an error, contact <a href="mailto:incognito.email.mode@gmail.com" style="color:inherit;text-decoration:underline;">incognito.email.mode@gmail.com</a>.
-        </div>
-        <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;">
-          <button class="btn-primary" id="guest-rate-limit-signin">Sign In</button>
-          <button class="btn-ghost" id="guest-rate-limit-close">Close</button>
-        </div>
-      </div>
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#guest-rate-close-btn')?.addEventListener('click', closeModal);
-      b.querySelector('#guest-rate-limit-signin').addEventListener('click', () => { closeModal(); openAuthModal('signin'); });
-      b.querySelector('#guest-rate-limit-close').addEventListener('click', () => { closeModal(); });
-    }
-  });
-}
-
-// ── Device session detail modal ───────────────────────────────────────────
-// Now opens as a SECONDARY modal (stacked on top of settings)
-
-export function openDeviceSessionModal(session, isCurrentSession) {
-  openSecondaryModal(`
-    <div class="modal-header">
-      <span class="modal-title">Session Details</span>
-      <button class="modal-close" id="dev-sess-close-btn">×</button>
-    </div>
-    <div class="modal-body">
-      <div class="form-group">
-        <div class="form-label">IP Address</div>
-        <div style="font-size:14px;">${escHtml(session.ip || 'Unknown')}</div>
-      </div>
-      <div class="form-group">
-        <div class="form-label">Last seen</div>
-        <div style="font-size:14px;">${escHtml(session.lastSeen ? new Date(session.lastSeen).toLocaleString() : '—')}</div>
-      </div>
-      <div class="form-group">
-        <div class="form-label">First seen</div>
-        <div style="font-size:14px;">${escHtml(session.createdAt ? new Date(session.createdAt).toLocaleString() : '—')}</div>
-      </div>
-      <div class="form-group">
-        <div class="form-label">User Agent</div>
-        <div style="font-size:12px;word-break:break-all;color:var(--text-dim);">${escHtml(session.userAgent || 'Unknown')}</div>
-      </div>
-      ${isCurrentSession ? '<div style="font-size:12px;color:var(--plan-core);margin-top:4px;">This is your current session.</div>' : ''}
-    </div>
-    <div class="modal-footer">
-      <button class="btn-ghost" id="dev-sess-cancel-btn">Close</button>
-      ${!isCurrentSession ? `<button class="btn-danger" id="revoke-session-btn">Log Out This Session</button>` : ''}
-    </div>
-  `, {
-    onOpen(b) {
-      b.querySelector('#dev-sess-close-btn')?.addEventListener('click', closeSecondaryModal);
-      b.querySelector('#dev-sess-cancel-btn')?.addEventListener('click', closeSecondaryModal);
-      if (!isCurrentSession) {
-        b.querySelector('#revoke-session-btn')?.addEventListener('click', () => {
-          send({ type: 'account:revokeSession', token: session.token });
-          closeSecondaryModal();
-        });
-      }
-    }
-  });
-}
-
-// ── Pasted content editor ─────────────────────────────────────────────────
-
-export function openPasteEditor(content, onSave) {
-  openFileViewerModal({ name: 'Edit Content', content, editable: true, onSave });
-}
-
-// Auto-handle limit events
-on('chat:limitReached', () => openLimitModal());
-on('guest:rateLimit', () => openGuestRateLimitModal());

public/js/sessions.js

@@ -1,285 +0,0 @@
-// sessions.js - Session list management
-import { send, on } from './ws.js';
-import { showContextMenu } from './ui.js';
-import { showShareModal } from './modals.js';
-
-export let sessions = [];
-export let currentSessionId = null;
-
-const sessionListeners = new Set();
-export function onSessionChange(fn) {
-  sessionListeners.add(fn);
-  return () => sessionListeners.delete(fn);
-}
-
-function notify(event, data) {
-  sessionListeners.forEach(fn => fn(event, data));
-}
-
-// ── Server events ─────────────────────────────────────────────────────────
-
-on('sessions:list', (msg) => {
-  sessions = msg.sessions || [];
-  renderSessions();
-});
-
-on('sessions:created', (msg) => {
-  const existing = sessions.findIndex(s => s.id === msg.session.id);
-  if (existing === -1) sessions.unshift(msg.session);
-  else sessions[existing] = msg.session;
-  renderSessions();
-  notify('created', msg.session);
-});
-
-on('sessions:deleted', (msg) => {
-  sessions = sessions.filter(s => s.id !== msg.sessionId);
-  if (currentSessionId === msg.sessionId) {
-    currentSessionId = sessions[0]?.id || null;
-    notify('switched', currentSessionId);
-  }
-  renderSessions();
-});
-
-on('sessions:deletedAll', () => {
-  sessions = [];
-  currentSessionId = null;
-  renderSessions();
-  notify('switched', null);
-});
-
-on('sessions:renamed', (msg) => {
-  const s = sessions.find(s => s.id === msg.sessionId);
-  if (s) s.name = msg.name;
-  renderSessions();
-});
-
-on('sessions:data', (msg) => {
-  const existing = sessions.findIndex(s => s.id === msg.session.id);
-  if (existing >= 0) sessions[existing] = msg.session;
-  notify('data', msg.session);
-});
-
-on('auth:ok', (msg) => {
-  sessions = msg.sessions || [];
-  renderSessions();
-  // On login, show the most recent session if one exists,
-  // otherwise show the welcome screen (don't auto-create).
-  if (sessions.length > 0) {
-    switchSession(sessions[0].id);
-  } else {
-    currentSessionId = null;
-    notify('switched', null);
-  }
-});
-
-on('auth:guestOk', (msg) => {
-  sessions = msg.sessions || [];
-  renderSessions();
-  // Show welcome screen; session is created lazily when user sends first message.
-  if (sessions.length > 0) {
-    switchSession(sessions[0].id);
-  } else {
-    currentSessionId = null;
-    notify('switched', null);
-  }
-});
-
-on('chat:done', (msg) => {
-  const s = sessions.find(s => s.id === msg.sessionId);
-  if (s) {
-    s.history = msg.history;
-    if (msg.name) s.name = msg.name;
-    sessions.sort((a, b) => {
-      const aTime = a.history?.at(-1)?.timestamp || a.created;
-      const bTime = b.history?.at(-1)?.timestamp || b.created;
-      return bTime - aTime;
-    });
-    renderSessions();
-  }
-});
-
-on('sessions:imported', (msg) => {
-  sessions.unshift(msg.session);
-  renderSessions();
-  switchSession(msg.session.id);
-});
-
-// ── Actions ───────────────────────────────────────────────────────────────
-
-/**
- * createNewSession is now "lazy" for the new-chat button:
- * the button just navigates to the welcome screen.
- * An actual session is only created when the user sends their first message
- * (handled in app.js triggerCenterSend).
- *
- * Call createNewSession() directly when you really need the session to exist
- * immediately (e.g. from triggerCenterSend in app.js).
- */
-export function showWelcomeScreen() {
-  currentSessionId = null;
-  renderSessions();            // deselect active item in sidebar
-  notify('switched', null);   // app.js will show the welcome view
-}
-
-export function createNewSession() {
-  send({ type: 'sessions:create' });
-}
-
-export function switchSession(id) {
-  currentSessionId = id;
-  renderSessions();
-  send({ type: 'sessions:get', sessionId: id });
-  notify('switched', id);
-}
-
-export function deleteSession(id) {
-  send({ type: 'sessions:delete', sessionId: id });
-}
-
-export function deleteAllSessions() {
-  send({ type: 'sessions:deleteAll' });
-}
-
-export function renameSession(id, name) {
-  send({ type: 'sessions:rename', sessionId: id, name });
-  const s = sessions.find(s => s.id === id);
-  if (s) s.name = name;
-  renderSessions();
-}
-
-export function requestSessions() {
-  send({ type: 'sessions:list' });
-}
-
-export function getCurrentSession() {
-  return sessions.find(s => s.id === currentSessionId) || null;
-}
-
-// ── Render ────────────────────────────────────────────────────────────────
-
-function renderSessions() {
-  const list = document.getElementById('session-list');
-  if (!list) return;
-
-  if (sessions.length === 0) {
-    list.innerHTML = `<div style="padding:12px 10px;font-size:12px;color:var(--text-muted)">No chats yet</div>`;
-    return;
-  }
-
-  // Group by date
-  const groups = groupByDate(sessions);
-  let html = '';
-  for (const [label, group] of groups) {
-    html += `<div class="session-date-label">${escHtml(label)}</div>`;
-    for (const s of group) {
-      const active = s.id === currentSessionId ? ' active' : '';
-      html += `
-        <div class="session-item${active}" data-id="${escHtml(s.id)}">
-          <span class="session-name" data-id="${escHtml(s.id)}">${escHtml(s.name || 'New Chat')}</span>
-          <button class="session-menu-btn" data-id="${escHtml(s.id)}" title="Options">···</button>
-        </div>`;
-    }
-  }
-  list.innerHTML = html;
-
-  // Session click
-  list.querySelectorAll('.session-item').forEach(el => {
-    el.addEventListener('click', (e) => {
-      if (e.target.closest('.session-menu-btn')) return;
-      switchSession(el.dataset.id);
-    });
-  });
-
-  // Menu button
-  list.querySelectorAll('.session-menu-btn').forEach(btn => {
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      openSessionMenu(e, btn.dataset.id);
-    });
-  });
-
-  // Inline rename on name click (double click)
-  list.querySelectorAll('.session-name').forEach(el => {
-    el.addEventListener('dblclick', (e) => {
-      e.stopPropagation();
-      startInlineRename(el);
-    });
-  });
-}
-
-function startInlineRename(el) {
-  const id = el.dataset.id;
-  const original = el.textContent;
-  el.setAttribute('contenteditable', 'true');
-  el.focus();
-  document.execCommand('selectAll', false, null);
-
-  const finish = () => {
-    el.removeAttribute('contenteditable');
-    const name = el.textContent.trim();
-    if (name && name !== original) renameSession(id, name);
-    else el.textContent = original;
-  };
-
-  el.addEventListener('blur', finish, { once: true });
-  el.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') { e.preventDefault(); el.blur(); }
-    if (e.key === 'Escape') { el.textContent = original; el.blur(); }
-  });
-}
-
-function openSessionMenu(e, id) {
-  const items = [
-    {
-      label: 'Share', icon: '🔗',
-      onClick: () => showShareModal(id),
-    },
-    {
-      label: 'Rename', icon: '✏️',
-      onClick: () => {
-        const nameEl = document.querySelector(`.session-name[data-id="${id}"]`);
-        if (nameEl) startInlineRename(nameEl);
-      },
-    },
-    { separator: true },
-    {
-      label: 'Delete', icon: '🗑️', danger: true,
-      onClick: () => deleteSession(id),
-    },
-    {
-      label: 'Delete All Chats', icon: '⚠️', danger: true,
-      onClick: () => {
-        if (confirm('Delete all chats? This cannot be undone.')) deleteAllSessions();
-      },
-    },
-  ];
-  showContextMenu(e.clientX, e.clientY, items);
-}
-
-function groupByDate(sessions) {
-  const now = new Date();
-  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
-  const yesterday = today - 86400000;
-  const week = today - 6 * 86400000;
-
-  const groups = new Map([
-    ['Today', []],
-    ['Yesterday', []],
-    ['This Week', []],
-    ['Older', []],
-  ]);
-
-  for (const s of sessions) {
-    const t = s.created || 0;
-    if (t >= today) groups.get('Today').push(s);
-    else if (t >= yesterday) groups.get('Yesterday').push(s);
-    else if (t >= week) groups.get('This Week').push(s);
-    else groups.get('Older').push(s);
-  }
-
-  return [...groups.entries()].filter(([, g]) => g.length > 0);
-}
-
-function escHtml(str) {
-  return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-}

public/js/settings.js

@@ -1,385 +0,0 @@
-// settings.js — Settings modal
-import { send, on, off } from './ws.js';
-import { openModal, closeModal, openDeviceSessionModal } from './modals.js';
-import { isAuthenticated, currentUser, userProfile, userSettings } from './auth.js';
-import { deleteAllSessions } from './sessions.js';
-import { escHtml, showNotification } from './ui.js';
-
-const THEME_STORAGE_KEY = 'ipai_theme';
-
-let currentTheme = null;
-
-export function applyTheme(theme, animate = true) {
-  const t = theme === 'light' ? 'light' : 'dark';
-  if (t === currentTheme) return;
-  currentTheme = t;
-  try { localStorage.setItem('ipai_theme', t); } catch {}
-  if (animate) {
-    document.documentElement.classList.add('theme-transitioning');
-    setTimeout(() => document.documentElement.classList.remove('theme-transitioning'), 400);
-  }
-  document.documentElement.setAttribute('data-theme', t);
-  try {
-    const bc = new BroadcastChannel('ipai_theme');
-    bc.postMessage({ theme: t });
-    bc.close();
-  } catch {}
-}
-
-try {
-  const bc = new BroadcastChannel('ipai_theme');
-  bc.onmessage = (e) => {
-    if (!e.data?.theme) return;
-    const t = e.data.theme === 'light' ? 'light' : 'dark';
-    if (t !== currentTheme) {
-      if (t === 'light') {
-        document.documentElement.setAttribute('data-theme', 'light');
-      } else {
-        document.documentElement.setAttribute('data-theme', 'dark');
-      }
-      currentTheme = t;
-    }
-  };
-} catch {}
-
-export function openSettings(tab = 'chat') {
-  // Always fetch fresh settings from server before building the modal
-  if (isAuthenticated()) {
-    send({ type: 'settings:get' });
-    // Wait for the settings response, then open modal with fresh data
-    const handler = (msg) => {
-      off('settings:data', handler);
-      const freshSettings = msg.settings || userSettings || _defaultSettings();
-      _openSettingsModal(tab, freshSettings);
-    };
-    on('settings:data', handler);
-    // Fallback: if no response in 1.5s, open with cached settings
-    setTimeout(() => {
-      off('settings:data', handler);
-      _openSettingsModal(tab, userSettings || _defaultSettings());
-    }, 1500);
-  } else {
-    // Guest: use localStorage cached settings
-    const stored = (() => {
-      try { return JSON.parse(localStorage.getItem('ipai_settings') || '{}'); } catch { return {}; }
-    })();
-    _openSettingsModal(tab, { ..._defaultSettings(), ...stored });
-  }
-}
-
-function _defaultSettings() {
-  const storedTheme = (() => { try { return localStorage.getItem(THEME_STORAGE_KEY); } catch { return null; } })();
-  return { theme: storedTheme || 'dark', webSearch: true, imageGen: true, videoGen: true, audioGen: true };
-}
-
-function _openSettingsModal(activeTab, settings) {
-  openModal(buildSettingsHtml(activeTab, settings), {
-    wide: true,
-    onOpen(b) {
-      setupSettingsTabs(b);
-      setupChatSettings(b);
-      if (isAuthenticated()) {
-        setupAccountSettings(b);
-      }
-      b.querySelectorAll('[data-disabled]').forEach(btn => {
-        btn.disabled = true;
-        btn.title = 'Coming soon';
-        btn.style.opacity = '0.45';
-      });
-    }
-  });
-}
-
-function buildSettingsHtml(activeTab, settings) {
-  const authed = isAuthenticated();
-  const currentTheme = (() => { try { return localStorage.getItem(THEME_STORAGE_KEY) || settings.theme || 'dark'; } catch { return settings.theme || 'dark'; } })();
-
-  return `
-  <div class="modal-header">
-    <span class="modal-title">Settings</span>
-    <button class="modal-close" id="settings-close">×</button>
-  </div>
-  <div class="settings-tabs">
-    <button class="settings-tab ${activeTab==='chat'?'active':''}" data-tab="chat">Chat</button>
-    ${authed ? `<button class="settings-tab ${activeTab==='account'?'active':''}" data-tab="account">Account</button>` : ''}
-  </div>
-
-  <!-- Chat Settings -->
-  <div class="settings-pane ${activeTab==='chat'?'active':''}" data-pane="chat" style="padding:0 24px 20px;">
-    <div class="setting-row">
-      <div>
-        <div class="setting-label">Theme</div>
-        <div class="setting-desc">Light or dark interface</div>
-      </div>
-      <div style="display:flex;gap:8px;">
-        <button class="btn-ghost${currentTheme==='light'?' active-theme':''}" data-theme-btn="light" style="font-size:13px;padding:5px 12px;">☀ Light</button>
-        <button class="btn-ghost${currentTheme!=='light'?' active-theme':''}" data-theme-btn="dark" style="font-size:13px;padding:5px 12px;">🌙 Dark</button>
-      </div>
-    </div>
-
-    <div style="margin-top:16px;margin-bottom:8px;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);">Available Tools</div>
-    ${buildToolToggle('webSearch',  'Web Search',     'Search the web for current information', settings.webSearch !== false)}
-    ${buildToolToggle('imageGen',   'Image Generation','Generate images from prompts', settings.imageGen !== false)}
-    ${buildToolToggle('videoGen',   'Video Generation','Generate videos from prompts', settings.videoGen !== false)}
-    ${buildToolToggle('audioGen',   'Audio / SFX',    'Generate music and sound effects', settings.audioGen !== false)}
-  </div>
-
-  ${authed ? buildAccountPane(activeTab) : ''}
-
-  <div class="modal-footer" style="border-top:1px solid var(--border);padding-top:12px;">
-    <button class="btn-ghost" id="settings-cancel">Cancel</button>
-    <button class="btn-primary" id="settings-apply">Apply</button>
-  </div>
-  `;
-}
-
-function buildToolToggle(key, label, desc, enabled) {
-  return `
-  <div class="setting-row">
-    <div>
-      <div class="setting-label">${escHtml(label)}</div>
-      <div class="setting-desc">${escHtml(desc)}</div>
-    </div>
-    <label class="toggle-switch" data-toggle="${key}">
-      <input type="checkbox" ${enabled ? 'checked' : ''} />
-      <div class="toggle-track"></div>
-      <div class="toggle-thumb"></div>
-    </label>
-  </div>`;
-}
-
-function buildAccountPane(activeTab) {
-  const u = currentUser;
-  const p = userProfile;
-  const email = u?.email || '';
-  const username = p?.username || '';
-
-  return `
-  <div class="settings-pane ${activeTab==='account'?'active':''}" data-pane="account" style="padding:0 24px 8px;">
-    <!-- Username -->
-    <div class="form-group" style="margin-top:4px;">
-      <label class="form-label">Username</label>
-      <div style="display:flex;gap:8px;">
-        <input class="form-input" id="username-input" value="${escHtml(username)}" placeholder="Choose a username" style="flex:1;" />
-        <button class="btn-ghost" id="username-save" style="font-size:13px;padding:6px 14px;white-space:nowrap;">Save</button>
-      </div>
-      <div id="username-msg" class="form-hint" style="display:none;"></div>
-    </div>
-
-    <!-- Plan info -->
-    <div id="plan-section" style="padding:12px;border-radius:var(--radius-md);background:var(--bg-raised);border:1px solid var(--border);margin-bottom:16px;">
-      <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">Current Plan</div>
-      <div id="plan-name-display" style="font-weight:600;font-size:15px;">Loading…</div>
-      <button class="btn-ghost" id="billing-portal-btn" style="margin-top:8px;font-size:12px;padding:5px 12px;">Manage Billing ↗</button>
-    </div>
-
-    <!-- Data management -->
-    <div style="margin-bottom:8px;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);">Data</div>
-    <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;">
-      <button class="btn-ghost" data-disabled style="font-size:13px;">Manage Memories</button>
-      <button class="btn-ghost" data-disabled style="font-size:13px;">Delete All Memories</button>
-      <button class="btn-danger" id="delete-sessions-btn" style="font-size:13px;">Delete All Chats</button>
-    </div>
-
-    <!-- Active sessions -->
-    <div style="margin-bottom:8px;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);">Devices &amp; Sessions</div>
-    <div id="device-sessions-list" style="margin-bottom:10px;">
-      <div style="font-size:13px;color:var(--text-muted);">Loading sessions…</div>
-    </div>
-    <button class="btn-danger" id="revoke-all-btn" style="font-size:13px;margin-bottom:16px;">Log Out All Other Devices</button>
-
-    <!-- Delete account -->
-    <div style="border-top:1px solid var(--border);padding-top:14px;">
-      <button class="btn-danger" id="delete-account-btn" style="font-size:13px;">Delete Account</button>
-    </div>
-  </div>`;
-}
-
-function setupSettingsTabs(b) {
-  b.querySelector('#settings-close')?.addEventListener('click', closeModal);
-  b.querySelector('#settings-cancel')?.addEventListener('click', closeModal);
-
-  b.querySelectorAll('.settings-tab').forEach(tab => {
-    tab.addEventListener('click', () => {
-      b.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
-      b.querySelectorAll('.settings-pane').forEach(p => p.classList.remove('active'));
-      tab.classList.add('active');
-      b.querySelector(`[data-pane="${tab.dataset.tab}"]`)?.classList.add('active');
-    });
-  });
-
-  b.querySelector('#settings-apply')?.addEventListener('click', () => applySettings(b));
-}
-
-function setupChatSettings(b) {
-  b.querySelectorAll('[data-theme-btn]').forEach(btn => {
-    btn.addEventListener('click', () => {
-      b.querySelectorAll('[data-theme-btn]').forEach(t => t.classList.remove('active-theme'));
-      btn.classList.add('active-theme');
-      applyTheme(btn.dataset.themeBtn);
-    });
-  });
-}
-
-function setupAccountSettings(b) {
-  // Username
-  b.querySelector('#username-save')?.addEventListener('click', async () => {
-    const val = b.querySelector('#username-input')?.value;
-    const msgEl = b.querySelector('#username-msg');
-    send({ type: 'account:setUsername', username: val });
-    const handler = (msg) => {
-      off('account:usernameResult', handler);
-      msgEl.style.display = '';
-      if (msg.success) {
-        msgEl.textContent = `Username set to @${msg.username}`;
-        msgEl.style.color = 'var(--plan-core)';
-      } else {
-        msgEl.textContent = msg.error || 'Failed';
-        msgEl.style.color = '#f87171';
-      }
-    };
-    on('account:usernameResult', handler);
-  });
-
-  // Billing portal
-  b.querySelector('#billing-portal-btn')?.addEventListener('click', () => {
-    window.open('https://sharktide-lightning.hf.space/portal', '_blank');
-  });
-
-  // Delete all sessions
-  b.querySelector('#delete-sessions-btn')?.addEventListener('click', () => {
-    if (confirm('Delete all chats? This cannot be undone.')) {
-      deleteAllSessions();
-      closeModal();
-    }
-  });
-
-  // Revoke all devices
-  b.querySelector('#revoke-all-btn')?.addEventListener('click', () => {
-    if (confirm('Log out all other devices?')) {
-      send({ type: 'account:revokeAllOthers' });
-      showNotification({ type: 'success', message: 'Other sessions logged out', duration: 2500 });
-    }
-  });
-
-  // Delete account
-  b.querySelector('#delete-account-btn')?.addEventListener('click', async () => {
-    if (!confirm('Delete your account permanently? This cannot be undone.')) return;
-    const auth = JSON.parse(localStorage.getItem('ipai_auth_v1') || '{}');
-    if (!auth.access_token) return;
-    const res = await fetch('https://dpixehhdbtzsbckfektd.supabase.co/functions/v1/delete_account', {
-      method: 'POST', headers: { Authorization: `Bearer ${auth.access_token}` },
-    });
-    if (res.ok) {
-      closeModal();
-      import('./auth.js').then(a => a.logout());
-    } else {
-      const d = await res.json().catch(() => ({}));
-      showNotification({ type: 'error', message: d.error || 'Delete failed', duration: 4000 });
-    }
-  });
-
-  // Load subscription + device sessions
-  send({ type: 'account:getSubscription' });
-  send({ type: 'account:getSessions' });
-
-  const subHandler = (msg) => {
-    off('account:subscription', subHandler);
-    const planEl = b.querySelector('#plan-name-display');
-    if (planEl && msg.info) {
-      const pKey = msg.info.planKey || 'free';
-      const pName = msg.info.planName || 'Free Tier';
-      planEl.innerHTML = `<span style="color:var(--plan-${pKey})">${escHtml(pName)}</span>`;
-    }
-  };
-  on('account:subscription', subHandler);
-
-  const sessHandler = (msg) => {
-    off('account:deviceSessions', sessHandler);
-    const listEl = b.querySelector('#device-sessions-list');
-    if (!listEl) return;
-    const sessions = msg.sessions || [];
-    const currentToken = msg.currentToken;
-    if (sessions.length === 0) {
-      listEl.innerHTML = '<div style="font-size:13px;color:var(--text-muted);">No sessions found.</div>';
-      return;
-    }
-    listEl.innerHTML = sessions.map(s => `
-      <div class="device-session-item" data-token="${escHtml(s.token)}">
-        <div class="device-badge">💻</div>
-        <div class="device-info">
-          <div class="device-name">${escHtml(s.userAgent?.slice(0,50) || 'Unknown device')}</div>
-          <div class="device-meta">${escHtml(s.ip || '—')} · Last seen ${escHtml(s.lastSeen ? new Date(s.lastSeen).toLocaleDateString() : '—')}</div>
-          ${s.token === currentToken ? '<div class="device-current">Current session</div>' : ''}
-        </div>
-      </div>`).join('');
-
-    listEl.querySelectorAll('.device-session-item').forEach(el => {
-      el.addEventListener('click', () => {
-        const token = el.dataset.token;
-        const session = sessions.find(s => s.token === token);
-        if (session) openDeviceSessionModal(session, token === currentToken);
-      });
-    });
-  };
-  on('account:deviceSessions', sessHandler);
-}
-
-function applySettings(b) {
-  const theme = b.querySelector('[data-theme-btn].active-theme')?.dataset.themeBtn
-    || (document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark');
-
-  const tools = {};
-  b.querySelectorAll('[data-toggle]').forEach(label => {
-    const key = label.dataset.toggle;
-    const checked = label.querySelector('input[type="checkbox"]').checked;
-    tools[key] = checked;
-  });
-
-  const newSettings = { theme, ...tools };
-  applyTheme(theme);
-
-  // Sync tool buttons in chat UI
-  document.querySelectorAll('[data-tool]').forEach(btn => {
-    const t = btn.dataset.tool;
-    if (t in tools) {
-      btn.classList.toggle('active', !!tools[t]);
-      btn.style.display = '';
-    }
-  });
-
-  // Cache for guests
-  if (!isAuthenticated()) {
-    try { localStorage.setItem('ipai_settings', JSON.stringify(newSettings)); } catch {}
-  }
-
-  if (isAuthenticated()) {
-    send({ type: 'settings:save', settings: newSettings });
-  }
-
-  closeModal();
-}
-
-(function initThemeEarly() {
-  try {
-    const stored = localStorage.getItem('ipai_theme');
-    if (stored) {
-      document.documentElement.setAttribute('data-theme', stored);
-      currentTheme = stored;
-    }
-  } catch {}
-})();
-
-// Apply from auth response
-on('auth:ok', (msg) => {
-  if (msg.settings?.theme) applyTheme(msg.settings.theme, true);
-});
-on('auth:guestOk', () => {
-  const stored = (() => {
-    try { return JSON.parse(localStorage.getItem('ipai_settings') || '{}'); } catch { return {}; }
-  })();
-  applyTheme(stored.theme || localStorage.getItem(THEME_STORAGE_KEY) || 'dark', false);
-});
-on('settings:updated', (msg) => {
-  if (msg.settings?.theme) applyTheme(msg.settings.theme, true);
-});

public/js/turnstile.js

@@ -1,84 +0,0 @@
-// turnstile.js — show overlay and handle verification
-(function() {
-  let handled = false;
-  function hasTurnstileCookie() {
-    return document.cookie.split(';').some(c => c.trim().startsWith('turnstile='));
-  }
-
-  const overlay = document.getElementById('turnstile-overlay');
-  const pageRoot = document.getElementById('app') || document.body;
-
-  function hideOverlay() {
-    if (overlay) overlay.style.display = 'none';
-    if (pageRoot) pageRoot.classList.remove('page-faded');
-  }
-  function showOverlay() {
-    if (overlay) overlay.style.display = 'flex';
-    if (pageRoot) pageRoot.classList.add('page-faded');
-  }
-
-  // Helper: set local cookie so reload won't re-show challenge
-  function setLocalTurnstileCookie() {
-    try {
-      document.cookie = 'turnstile=1; path=/; max-age=' + (24 * 3600);
-    } catch (e) { /* ignore */ }
-  }
-
-  // Attempt websocket verify first, then fallback to REST if needed.
-  async function doWebsocketVerify(token) {
-    return new Promise(resolve => {
-      if (!window.ws || !window.ws.send || !window.ws.isConnected || !window.ws.on) return resolve(false);
-      // If websocket not connected, bail
-      if (!window.ws.isConnected()) return resolve(false);
-
-      let done = false;
-      const onOk = () => { if (done) return; done = true; try { unsub(); unsubErr(); } catch {} resolve(true); };
-      const onErr = () => { if (done) return; done = true; try { unsub(); unsubErr(); } catch {} resolve(false); };
-
-      // Listen for server ack
-      const unsub = window.ws.on('turnstile:ok', () => { onOk(); });
-      const unsubErr = window.ws.on('turnstile:error', () => { onErr(); });
-
-      // Send verify message
-      try { window.ws.send({ type: 'turnstile:verify', token }); }
-      catch (e) { unsub(); unsubErr(); resolve(false); }
-
-      // Fallback timeout
-      setTimeout(() => { if (!done) { try { unsub(); unsubErr(); } catch {} resolve(false); } }, 3500);
-    });
-  }
-
-  async function doRestVerify(token) {
-    try {
-      const r = await fetch('/api/turnstile', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token }) });
-      if (r.ok) return true;
-    } catch (e) { console.error('Turnstile REST verify failed', e); }
-    return false;
-  }
-
-  // Global callback for Cloudflare Turnstile — ensure single handling
-  window.onTurnstileSuccess = async function(token) {
-    if (!token || handled) return; handled = true;
-
-    // Prefer websocket verify for immediate session validation
-    let ok = await doWebsocketVerify(token);
-    if (ok) {
-      setLocalTurnstileCookie();
-      hideOverlay();
-      return;
-    }
-
-    // Fallback to REST verify (sets cookie server-side)
-    ok = await doRestVerify(token);
-    if (ok) setLocalTurnstileCookie();
-    if (ok) hideOverlay();
-    else {
-      // If both failed, allow retry by resetting handled after short delay
-      handled = false;
-      showOverlay();
-    }
-  };
-
-  // Initialize visibility
-  if (hasTurnstileCookie()) hideOverlay(); else showOverlay();
-})();

public/js/ui.js

@@ -1,306 +0,0 @@
-// ui.js — notifications, context menus, markdown, shared DOM helpers
-
-// ── Notifications ─────────────────────────────────────────────────────────
-
-export function showNotification({ type = 'info', message, action, duration = 5000 }) {
-  const container = document.getElementById('notifications');
-  if (!container) return;
-
-  const el = document.createElement('div');
-  el.className = `notification ${type}`;
-
-  const text = document.createElement('span');
-  text.style.flex = '1';
-  text.textContent = message;
-  el.appendChild(text);
-
-  if (action) {
-    const btn = document.createElement('button');
-    btn.textContent = action.label;
-    btn.style.cssText = 'margin-left:10px;color:var(--yellow);font-size:12px;font-weight:600;white-space:nowrap;';
-    btn.addEventListener('click', () => { action.onClick?.(); el.remove(); });
-    el.appendChild(btn);
-  }
-
-  const close = document.createElement('button');
-  close.className = 'notif-close';
-  close.textContent = '×';
-  close.addEventListener('click', () => el.remove());
-  el.appendChild(close);
-
-  container.appendChild(el);
-  if (duration > 0) setTimeout(() => el.remove(), duration);
-  return el;
-}
-
-// ── Context menu ──────────────────────────────────────────────────────────
-
-let activeMenu = null;
-let menuDocHandler = null;
-
-export function showContextMenu(x, y, items) {
-  closeContextMenu();
-
-  const menu = document.getElementById('session-context-menu');
-  menu.innerHTML = '';
-
-  for (const item of items) {
-    if (item.separator) {
-      const sep = document.createElement('div');
-      sep.style.cssText = 'height:1px;background:var(--border);margin:3px 0;';
-      menu.appendChild(sep);
-      continue;
-    }
-    const el = document.createElement('div');
-    el.className = 'context-item' + (item.danger ? ' danger' : '') + (item.warning ? ' warning' : '');
-    if (item.icon) {
-      const ic = document.createElement('span');
-      ic.textContent = item.icon;
-      ic.style.fontSize = '14px';
-      el.appendChild(ic);
-    }
-    const label = document.createElement('span');
-    label.textContent = item.label;
-    el.appendChild(label);
-    el.addEventListener('click', (e) => { e.stopPropagation(); closeContextMenu(); item.onClick?.(); });
-    menu.appendChild(el);
-  }
-
-  menu.classList.remove('hidden');
-  const rect = menu.getBoundingClientRect();
-  const vw = window.innerWidth, vh = window.innerHeight;
-  let left = x, top = y;
-  if (left + rect.width > vw - 8)  left = vw - rect.width - 8;
-  if (top  + rect.height > vh - 8) top  = y - rect.height;
-  if (top < 8) top = 8;
-  menu.style.left = `${left}px`;
-  menu.style.top  = `${top}px`;
-
-  activeMenu = menu;
-  queueMicrotask(() => {
-    menuDocHandler = (e) => {
-      if (!menu.contains(e.target)) closeContextMenu();
-    };
-    document.addEventListener('click', menuDocHandler);
-    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeContextMenu(); }, { once: true });
-  });
-}
-
-export function showUserMenu(x, y, items) {
-  const menu = document.getElementById('user-context-menu');
-  menu.innerHTML = '';
-  for (const item of items) {
-    const el = document.createElement('div');
-    el.className = 'context-item' + (item.danger ? ' danger' : '');
-    el.textContent = item.label;
-    el.addEventListener('click', () => { menu.classList.add('hidden'); item.onClick?.(); });
-    menu.appendChild(el);
-  }
-  menu.classList.remove('hidden');
-  const vw = window.innerWidth, vh = window.innerHeight;
-  const rect = menu.getBoundingClientRect();
-  let left = x, top = y;
-  if (left + rect.width > vw - 8) left = vw - rect.width - 8;
-  if (top + rect.height > vh - 8) top = y - rect.height;
-  menu.style.left = `${left}px`;
-  menu.style.top  = `${top}px`;
-  setTimeout(() => {
-    document.addEventListener('click', (e) => {
-      if (!menu.contains(e.target)) menu.classList.add('hidden');
-    }, { once: true });
-  }, 0);
-}
-
-export function closeContextMenu() {
-  activeMenu?.classList.add('hidden');
-  activeMenu = null;
-  if (menuDocHandler) { document.removeEventListener('click', menuDocHandler); menuDocHandler = null; }
-}
-
-// ── Markdown rendering ────────────────────────────────────────────────────
-
-// Store code snippets by a key so copy button can reference them
-const codeStore = new Map();
-let codeStoreCounter = 0;
-
-function buildMarkdownOptions() {
-  const renderer = new marked.Renderer();
-
-  renderer.code = (code, lang) => {
-    // Store the raw code and generate a unique key for the copy button
-    const key = `code-${++codeStoreCounter}`;
-    codeStore.set(key, typeof code === 'object' ? (code.text || '') : code);
-
-    const rawCode = typeof code === 'object' ? (code.text || '') : code;
-    const rawLang = typeof code === 'object' ? (code.lang || lang || 'code') : (lang || 'code');
-
-    const escapedCode = escHtml(rawCode);
-    const displayLang = rawLang || 'code';
-
-    if (rawLang === 'svg') {
-      return `<div class="svg-render-block" data-svg="${escAttr(rawCode)}">
-        <img src="data:image/svg+xml,${encodeURIComponent(rawCode)}" style="max-width:100%;cursor:pointer;" alt="SVG">
-      </div>`;
-    }
-    return `<div class="code-block">
-      <div class="code-header">
-        <span class="code-lang">${escHtml(displayLang)}</span>
-        <button class="code-copy-btn" data-code-key="${escAttr(key)}">Copy</button>
-      </div>
-      <pre><code class="language-${escHtml(displayLang)}">${escapedCode}</code></pre>
-    </div>`;
-  };
-
-  // Override inline code to NOT apply background inside code blocks
-  // (the .code-block pre code rule in CSS handles this)
-  renderer.codespan = (code) => {
-    const raw = typeof code === 'object' ? (code.text || '') : code;
-    return `<code class="inline-code">${escHtml(raw)}</code>`;
-  };
-
-  renderer.link = (href, title, text) => {
-    const hrefStr = typeof href === 'object' ? (href.href || '') : (href || '');
-    const titleStr = typeof title === 'string' ? title : '';
-    const textStr = typeof text === 'string' ? text : '';
-    const safeHref = escHtml(hrefStr);
-    return `<a href="${safeHref}" target="_blank" rel="noopener noreferrer" title="${escHtml(titleStr)}">${textStr}</a>`;
-  };
-
-  return { renderer, breaks: true, gfm: true };
-}
-
-export function renderMarkdown(text) {
-  if (!text) return '';
-  try {
-    marked.setOptions(buildMarkdownOptions());
-    const raw = marked.parse(text);
-    const clean = DOMPurify.sanitize(raw, {
-      ALLOWED_TAGS: [
-        'p','br','strong','em','del','u','s','h1','h2','h3','h4','h5','h6',
-        'ul','ol','li','blockquote','hr','table','thead','tbody','tr','th','td',
-        'pre','code','a','img','span','div','details','summary','button',
-      ],
-      ALLOWED_ATTR: ['href','src','alt','title','class','data-code','data-code-key','data-svg','data-color',
-        'target','rel','style','open','align','type','aria-label'],
-      ALLOW_DATA_ATTR: true,
-    });
-    return clean;
-  } catch (e) {
-    return escHtml(text);
-  }
-}
-
-export function attachCodeCopyListeners(container) {
-  container.querySelectorAll('.code-copy-btn').forEach(btn => {
-    // Remove any existing listeners by cloning the button
-    const fresh = btn.cloneNode(true);
-    btn.parentNode?.replaceChild(fresh, btn);
-
-    fresh.addEventListener('click', async (e) => {
-      e.stopPropagation();
-      // Try data-code-key first (new approach), then data-code (legacy)
-      const key = fresh.getAttribute('data-code-key');
-      let code = '';
-      if (key && codeStore.has(key)) {
-        code = codeStore.get(key);
-      } else {
-        // Fallback: grab text from the sibling <pre><code>
-        const pre = fresh.closest('.code-block')?.querySelector('pre code');
-        if (pre) code = pre.textContent || '';
-      }
-
-      try {
-        await navigator.clipboard.writeText(code);
-        fresh.textContent = 'Copied!';
-        setTimeout(() => fresh.textContent = 'Copy', 1400);
-      } catch {
-        // Fallback for environments where clipboard API is unavailable
-        try {
-          const ta = document.createElement('textarea');
-          ta.value = code;
-          ta.style.cssText = 'position:fixed;opacity:0;';
-          document.body.appendChild(ta);
-          ta.select();
-          document.execCommand('copy');
-          document.body.removeChild(ta);
-          fresh.textContent = 'Copied!';
-          setTimeout(() => fresh.textContent = 'Copy', 1400);
-        } catch {
-          fresh.textContent = 'Error';
-          setTimeout(() => fresh.textContent = 'Copy', 1400);
-        }
-      }
-    });
-  });
-}
-
-export function attachSvgPanelListeners(container) {
-  container.querySelectorAll('.svg-render-block img').forEach(img => {
-    img.addEventListener('click', () => {
-      const svgCode = img.closest('.svg-render-block')?.getAttribute('data-svg') || '';
-      openSvgPanel(svgCode);
-    });
-  });
-}
-
-function openSvgPanel(svgCode) {
-  let panel = document.getElementById('svg-panel');
-  if (!panel) {
-    panel = document.createElement('div');
-    panel.id = 'svg-panel';
-    panel.innerHTML = `
-      <div id="svg-panel-header">
-        <span style="font-size:13px;font-weight:600;">SVG Preview</span>
-        <div style="display:flex;gap:6px">
-          <button id="svg-toggle-btn" style="font-size:11px;padding:3px 8px;border-radius:4px;border:1px solid var(--border-bright);background:var(--bg-hover)">XML</button>
-          <button id="svg-close-btn" style="color:var(--text-muted);font-size:18px;padding:0 4px;">×</button>
-        </div>
-      </div>
-      <div id="svg-panel-content"></div>`;
-    document.body.appendChild(panel);
-  }
-  const content = document.getElementById('svg-panel-content');
-  const toggleBtn = document.getElementById('svg-toggle-btn');
-  const closeBtn  = document.getElementById('svg-close-btn');
-
-  let showingXml = false;
-  const renderImg = () => {
-    content.innerHTML = `<img src="data:image/svg+xml,${encodeURIComponent(svgCode)}" style="max-width:100%;" alt="SVG">`;
-  };
-  renderImg();
-
-  toggleBtn.onclick = () => {
-    showingXml = !showingXml;
-    toggleBtn.textContent = showingXml ? 'Image' : 'XML';
-    if (showingXml) {
-      content.innerHTML = `<pre style="font-size:12px;white-space:pre-wrap;word-break:break-all;padding:8px;background:var(--bg-raised);border-radius:6px;">${escHtml(svgCode)}</pre>`;
-    } else renderImg();
-  };
-  closeBtn.onclick = () => panel.remove();
-}
-
-// ── Textarea auto-resize ───────────────────────────────────────────────────
-
-export function autoResize(textarea, maxLines = 6) {
-  const lh = parseFloat(getComputedStyle(textarea).lineHeight) || 22;
-  const pad = parseFloat(getComputedStyle(textarea).paddingTop || '0')
-            + parseFloat(getComputedStyle(textarea).paddingBottom || '0');
-  textarea.style.height = 'auto';
-  const max = lh * maxLines + pad;
-  textarea.style.height = Math.min(textarea.scrollHeight, max) + 'px';
-  textarea.style.overflowY = textarea.scrollHeight > max ? 'auto' : 'hidden';
-}
-
-// ── Escape helpers ────────────────────────────────────────────────────────
-
-export function escHtml(str) {
-  return String(str)
-    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
-    .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
-}
-
-export function escAttr(str) {
-  return String(str).replace(/"/g,'&quot;');
-}
-
-window.ui = { showNotification, showContextMenu, showUserMenu, renderMarkdown };

public/js/ws.js

@@ -1,133 +0,0 @@
-// ws.js - WebSocket connection manager
-const WS_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws`;
-const RECONNECT_DELAY_MS = 2000;
-const MAX_RECONNECT_DELAY = 30000;
-
-let ws = null;
-let reconnectDelay = RECONNECT_DELAY_MS;
-let reconnectTimer = null;
-let pendingCallbacks = new Map(); // id -> { resolve, reject, timeout }
-let msgId = 0;
-const listeners = new Map(); // type -> Set<fn>
-
-export function send(data) {
-  if (ws?.readyState === WebSocket.OPEN) {
-    ws.send(JSON.stringify(data));
-    return true;
-  }
-  return false;
-}
-
-export function request(data, timeoutMs = 15000) {
-  return new Promise((resolve, reject) => {
-    const id = `req_${++msgId}`;
-    const full = { ...data, _reqId: id };
-    const timer = setTimeout(() => {
-      pendingCallbacks.delete(id);
-      reject(new Error('Request timeout'));
-    }, timeoutMs);
-    pendingCallbacks.set(id, { resolve, reject, timer });
-    if (!send(full)) {
-      clearTimeout(timer);
-      pendingCallbacks.delete(id);
-      reject(new Error('WebSocket not connected'));
-    }
-  });
-}
-
-export function on(type, fn) {
-  if (!listeners.has(type)) listeners.set(type, new Set());
-  listeners.get(type).add(fn);
-  return () => listeners.get(type)?.delete(fn);
-}
-
-export function off(type, fn) {
-  listeners.get(type)?.delete(fn);
-}
-
-function emit(type, data) {
-  listeners.get(type)?.forEach(fn => fn(data));
-  listeners.get('*')?.forEach(fn => fn({ type, ...data }));
-}
-
-
-
-function scheduleReconnect() {
-  clearTimeout(reconnectTimer);
-  reconnectTimer = setTimeout(() => {
-    reconnectDelay = Math.min(reconnectDelay * 1.5, MAX_RECONNECT_DELAY);
-    connectWithPing();
-  }, reconnectDelay);
-}
-
-export function getReadyState() {
-  return ws?.readyState ?? WebSocket.CLOSED;
-}
-
-export function isConnected() {
-  return ws?.readyState === WebSocket.OPEN;
-}
-
-// ── Ping keepalive ────────────────────────────────────────────────────────
-// Prevents the WebSocket from being closed by proxies/servers during long
-// operations like image/video generation (which can take 30-60+ seconds).
-let pingInterval = null;
-
-function startPing() {
-  stopPing();
-  pingInterval = setInterval(() => {
-    if (ws?.readyState === WebSocket.OPEN) {
-      try { ws.send(JSON.stringify({ type: 'ping' })); } catch {}
-    }
-  }, 20000); // every 20 seconds
-}
-
-function stopPing() {
-  if (pingInterval) { clearInterval(pingInterval); pingInterval = null; }
-}
-
-// Patch connect to start/stop ping
-function connectWithPing() {
-  if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) return;
-
-  ws = new WebSocket(WS_URL);
-
-  ws.onopen = () => {
-    reconnectDelay = RECONNECT_DELAY_MS;
-    startPing();
-    emit('ws:connected', {});
-  };
-
-  ws.onmessage = (event) => {
-    let msg;
-    try { msg = JSON.parse(event.data); } catch { return; }
-    if (!msg?.type) return;
-    // Silently swallow pong responses
-    if (msg.type === 'pong') return;
-
-    if (msg._reqId && pendingCallbacks.has(msg._reqId)) {
-      const cb = pendingCallbacks.get(msg._reqId);
-      pendingCallbacks.delete(msg._reqId);
-      clearTimeout(cb.timer);
-      if (msg.error) cb.reject(new Error(msg.error));
-      else cb.resolve(msg);
-      return;
-    }
-
-    emit(msg.type, msg);
-  };
-
-  ws.onclose = () => {
-    stopPing();
-    emit('ws:disconnected', {});
-    scheduleReconnect();
-  };
-
-  ws.onerror = () => {
-    ws?.close();
-  };
-}
-
-// Boot
-connectWithPing();
-window.ws = { send, request, on, off, isConnected, getReadyState };

public/oauth-callback.html

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>Signing in…</title>
-  <style>
-    body { background: #0d0e11; color: #e8eaf0; font-family: system-ui, sans-serif;
-      display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
-    .box { text-align: center; }
-    .spinner { width: 32px; height: 32px; border: 3px solid rgba(229,200,70,0.2);
-      border-top-color: #e5c846; border-radius: 50%; animation: spin 0.8s linear infinite;
-      margin: 0 auto 16px; }
-    @keyframes spin { to { transform: rotate(360deg); } }
-  </style>
-</head>
-<body>
-  <div class="box">
-    <div class="spinner"></div>
-    <p id="msg">Completing sign-in…</p>
-  </div>
-  <script>
-    // ── Extract tokens from URL hash (Supabase implicit flow) or search params ──
-    function getTokens() {
-      const hash   = new URLSearchParams(location.hash.replace('#', ''));
-      const search = new URLSearchParams(location.search);
-      return {
-        access_token:  hash.get('access_token')      || search.get('access_token'),
-        refresh_token: hash.get('refresh_token')      || search.get('refresh_token'),
-        error:         hash.get('error')              || search.get('error'),
-        error_desc:    hash.get('error_description')  || search.get('error_description'),
-      };
-    }
-
-    const tokens = getTokens();
-    const msgEl  = document.getElementById('msg');
-
-    if (tokens.error) {
-      msgEl.textContent = 'Sign-in error: ' + (tokens.error_desc || tokens.error);
-    } else if (tokens.access_token) {
-      // ── Primary path: write to localStorage so the main tab picks it up
-      // via a 'storage' event listener — works even when window.opener is null
-      // (strict popup policies, mobile browsers, etc.).
-      const payload = JSON.stringify({
-        access_token:  tokens.access_token,
-        refresh_token: tokens.refresh_token || '',
-      });
-      localStorage.setItem('ipai_oauth_pending', payload);
-
-      // ── Also try postMessage to opener for fastest possible handoff ──────
-      if (window.opener && !window.opener.closed) {
-        try {
-          window.opener.postMessage({
-            type:          'oauth:callback',
-            access_token:  tokens.access_token,
-            refresh_token: tokens.refresh_token,
-          }, location.origin);
-        } catch (_) { /* cross-origin opener — storage event is enough */ }
-      }
-
-      msgEl.textContent = 'Sign-in complete! Closing…';
-      // Give localStorage a moment to propagate, then try to close the popup.
-      setTimeout(() => {
-        try { window.close(); } catch (_) { /* ignore */ }
-      }, 300);
-    } else {
-      msgEl.textContent = 'No token received. You can close this window.';
-    }
-  </script>
-  <!-- Cloudflare Turnstile -->
-  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
-  <div id="turnstile-overlay" style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:9999;">
-    <div style="background:#0d0e11;padding:18px;border-radius:10px;text-align:center;max-width:420px;width:90%;">
-      <div style="color:#d7d7d7;margin-bottom:12px;">Please verify you are human to continue.</div>
-      <div class="cf-turnstile" data-sitekey="0x4AAAAAAC1ZXKIhZ9Kdz8j9" data-callback="onTurnstileSuccess"></div>
-    </div>
-  </div>
-  <script type="module" src="/js/turnstile.js"></script>
-</body>
-</html>