Add persistent conversations, sidebar, export, PWA support, keyboard shortcuts, and an accessibility pass

- Conversations now persist to localStorage per-thread and survive reload/crash
- New sidebar lists saved chats (switch, delete); font-size (A-/A+) and
export-as-text/PDF (jsPDF) live in its footer
- Copy button added to user messages too (bot replies already had one)
- Cmd/Ctrl+K focuses the composer, Esc clears a draft or closes the sidebar
- PWA: manifest.json + a narrow offline app-shell service worker (never
touches the chat API or CDN libraries) + generated app icons, so Nox is
installable via "Add to Home Screen"
- Accessibility: aria-live on the thread, dialog role + focus handling on
the sidebar, visible focus rings, and a text-size control

All client-side/localStorage — no worker changes, zero Neuron cost.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016b3u4n81zwJ6rpE9NeCokb

index.html

@@ -21,6 +21,12 @@
 <meta name="twitter:title" content="Nox — by Devseis" />
 <meta name="twitter:description" content="A free AI assistant by Devseis. Ask anything, or attach an image or document." />
 <meta name="twitter:image" content="https://devseis-nox.static.hf.space/devseis-logo.png" />
+<link rel="manifest" href="manifest.json" />
+<meta name="theme-color" content="#0b0e14" />
+<link rel="apple-touch-icon" href="apple-touch-icon.png" />
+<link rel="icon" href="icon-192.png" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
 <!-- Code blocks are always rendered dark (see .bubble.markdown pre code below), so this
@@ -49,13 +55,19 @@
     --bg:#0b0e14; --panel:#11151d; --border:#232a37; --text:#e8ecf4; --muted:#8b94a7;
     --accent:#ff914d; --accent-text:#1a1006; --accent-soft:rgba(255,145,77,.16); --accent-border:rgba(255,145,77,.4); --bubble-bot:#161c27;
     --input-bg:#2c323d;
+    --msg-font-size:15px;
   }
   *{box-sizing:border-box;}
+  button:focus-visible, a:focus-visible, .chip:focus-visible, .convo-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
+  .input-pill:focus-within{box-shadow:0 0 0 2px var(--accent-border);}
   html,body{height:100%;}
   body{margin:0;background:var(--bg);color:var(--text);font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
   header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;padding-top:calc(14px + env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0;}
+  .header-left{display:flex;align-items:center;gap:8px;}
   .new-chat-btn{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:0 14px;height:34px;font-size:13px;font-weight:600;cursor:pointer;}
   .new-chat-btn:hover{background:var(--bg);}
+  .sidebar-toggle-btn{width:34px;height:34px;min-height:auto;border-radius:8px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:15px;}
+  .sidebar-toggle-btn:hover{background:var(--bg);}
   .header-actions{display:flex;align-items:center;gap:8px;}
   .theme-btn{width:28px;height:28px;min-height:auto;border-radius:50%;padding:0;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--border);cursor:pointer;color:var(--text);}
   .theme-btn:hover{background:var(--bg);border-color:var(--accent);}
@@ -83,7 +95,7 @@
   .msg.user{justify-content:flex-end;}
   .msg.bot{gap:8px;align-items:flex-end;}
   .avatar{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
-  .bubble{max-width:75%;padding:11px 16px;border-radius:20px;line-height:1.5;font-size:15px;font-weight:500;white-space:pre-wrap;transition:background-color .15s;}
+  .bubble{max-width:75%;padding:11px 16px;border-radius:20px;line-height:1.5;font-size:var(--msg-font-size);font-weight:500;white-space:pre-wrap;transition:background-color .15s;}
   .msg.user .bubble{background:var(--accent-soft);border:1px solid var(--accent-border);border-bottom-right-radius:6px;}
   .msg.bot .bubble{background:var(--bubble-bot);border-bottom-left-radius:6px;}
   .typing-dots{display:inline-flex;gap:5px;align-items:center;padding:6px 2px;}
@@ -99,6 +111,7 @@
   .msg-action-btn{background:transparent;border:none;color:var(--muted);font-size:13.5px;padding:5px 7px;border-radius:7px;cursor:pointer;min-height:auto;font-family:inherit;opacity:.6;transition:opacity .15s,background-color .15s;line-height:1;}
   .msg-action-btn:hover{opacity:1;background:rgba(127,127,127,.14);}
   .msg-action-btn.active{opacity:1;background:rgba(127,127,127,.14);}
+  .msg-actions.user-actions{margin:-6px 0 10px 0;justify-content:flex-end;}
   .bubble.markdown{white-space:normal;}
   .bubble.markdown p{margin:0 0 8px;}
   .bubble.markdown p:last-child{margin-bottom:0;}
@@ -126,6 +139,27 @@
   .cap-banner .cap-title{font-weight:700;font-size:13.5px;}
   .cap-banner .cap-sub{color:var(--muted);font-size:12.5px;}
   .cap-banner .cap-countdown{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;}
+  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900;}
+  .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;background:var(--panel);border-right:1px solid var(--border);z-index:901;display:flex;flex-direction:column;box-shadow:8px 0 24px rgba(0,0,0,.25);animation:sidebar-in .2s ease-out;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
+  @keyframes sidebar-in{from{transform:translateX(-100%);}to{transform:translateX(0);}}
+  .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;flex-shrink:0;}
+  .sidebar-header h2{margin:0;font-size:16px;font-weight:700;}
+  .sidebar-close-btn{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px;min-height:auto;line-height:1;}
+  .sidebar-close-btn:hover{color:var(--text);}
+  .sidebar-list{flex:1;overflow-y:auto;padding:4px 10px;min-height:0;}
+  .sidebar-empty{color:var(--muted);font-size:13px;padding:20px 12px;text-align:center;line-height:1.5;}
+  .convo-row{display:flex;align-items:center;gap:4px;padding:10px 10px;border-radius:10px;cursor:pointer;margin-bottom:2px;}
+  .convo-row:hover{background:var(--bg);}
+  .convo-row.active{background:var(--accent-soft);}
+  .convo-title{flex:1;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+  .convo-delete{background:transparent;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px 7px;min-height:auto;border-radius:6px;opacity:.6;}
+  .convo-delete:hover{opacity:1;background:rgba(224,82,82,.15);color:#e05252;}
+  .sidebar-footer{border-top:1px solid var(--border);padding:12px 16px;display:flex;flex-direction:column;gap:10px;flex-shrink:0;}
+  .sidebar-footer-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
+  .sidebar-footer-row span{font-size:12px;color:var(--muted);font-weight:600;}
+  .sidebar-footer-row .btn-group{display:flex;gap:4px;}
+  .sidebar-footer .small-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;min-height:auto;font-family:inherit;}
+  .sidebar-footer .small-btn:hover{border-color:var(--accent);}
   .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;padding:20px env(safe-area-inset-right) calc(20px + env(safe-area-inset-bottom)) env(safe-area-inset-left);}
   .modal-box{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:32px 28px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:modal-in .22s ease-out;}
   @keyframes modal-in{from{opacity:0;transform:scale(.94) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
@@ -160,7 +194,10 @@
 </head>
 <body>
 <header>
-  <button type="button" id="newChat" class="new-chat-btn">New chat</button>
+  <div class="header-left">
+    <button type="button" id="sidebarToggle" class="sidebar-toggle-btn" title="Saved chats" aria-label="Saved chats" aria-haspopup="dialog">☰</button>
+    <button type="button" id="newChat" class="new-chat-btn">New chat</button>
+  </div>
   <div class="header-actions">
     <button type="button" id="themeToggle" class="theme-btn" title="Toggle theme" aria-label="Toggle theme">🌙</button>
     <div class="lang-flags" id="langFlags">
@@ -184,8 +221,32 @@
       <button type="button" class="chip" data-prompt="Catch me up on today's news.">📰 Today's news</button>
     </div>
   </div>
-  <div id="thread" style="display:none;"></div>
+  <div id="thread" style="display:none;" aria-live="polite" role="log"></div>
 </main>
+<div class="sidebar-overlay" id="sidebarOverlay" style="display:none;"></div>
+<aside class="sidebar" id="sidebar" role="dialog" aria-modal="true" aria-label="Saved chats" style="display:none;">
+  <div class="sidebar-header">
+    <h2 id="sidebarTitle">Chats</h2>
+    <button type="button" id="sidebarClose" class="sidebar-close-btn" aria-label="Close">✕</button>
+  </div>
+  <div class="sidebar-list" id="sidebarList"></div>
+  <div class="sidebar-footer">
+    <div class="sidebar-footer-row">
+      <span id="fontSizeLabel">Text size</span>
+      <div class="btn-group">
+        <button type="button" id="fontSizeDown" class="small-btn" aria-label="Smaller text">A−</button>
+        <button type="button" id="fontSizeUp" class="small-btn" aria-label="Larger text">A+</button>
+      </div>
+    </div>
+    <div class="sidebar-footer-row">
+      <span id="exportLabel">Export this chat</span>
+      <div class="btn-group">
+        <button type="button" id="exportTextBtn" class="small-btn">Text</button>
+        <button type="button" id="exportPdfBtn" class="small-btn">PDF</button>
+      </div>
+    </div>
+  </div>
+</aside>
 <div class="modal-overlay" id="capModalOverlay" style="display:none;" role="dialog" aria-modal="true">
   <div class="modal-box">
     <div class="modal-emoji" id="modalEmoji">🌙</div>
@@ -222,6 +283,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/18.0.12/lib/marked.umd.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.4.15/purify.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 <!--
   pdf.js was previously loaded as an ES module (`<script type="module">` +
   dynamic import()), which loads in the background — on a slow mobile
@@ -344,6 +406,28 @@ function createFeedbackRow(replyText, userMessageText) {
   return wrap;
 }
 
+// Same copy affordance as createFeedbackRow but for a USER message — no
+// thumbs (rating your own message doesn't mean anything), right-aligned to
+// sit under the right-aligned user bubble via the .user-actions modifier.
+function createCopyOnlyRow(text) {
+  const wrap = document.createElement('div');
+  wrap.className = 'msg-actions user-actions';
+  const copyBtn = document.createElement('button');
+  copyBtn.type = 'button';
+  copyBtn.className = 'msg-action-btn';
+  copyBtn.title = 'Copy message';
+  copyBtn.setAttribute('aria-label', 'Copy message');
+  copyBtn.textContent = '📋';
+  copyBtn.addEventListener('click', () => {
+    navigator.clipboard.writeText(text).then(() => {
+      copyBtn.textContent = '✅';
+      setTimeout(() => { copyBtn.textContent = '📋'; }, 1200);
+    }).catch(() => {});
+  });
+  wrap.appendChild(copyBtn);
+  return wrap;
+}
+
 const thread = document.getElementById('thread');
 const chatMain = document.getElementById('chatMain');
 
@@ -390,6 +474,18 @@ const modalTitleEl = document.getElementById('modalTitle');
 const modalSubEl = document.getElementById('modalSub');
 const modalCountdownEl = document.getElementById('modalCountdown');
 const modalOkBtn = document.getElementById('modalOkBtn');
+const sidebarToggleBtn = document.getElementById('sidebarToggle');
+const sidebarEl = document.getElementById('sidebar');
+const sidebarOverlayEl = document.getElementById('sidebarOverlay');
+const sidebarCloseBtn = document.getElementById('sidebarClose');
+const sidebarListEl = document.getElementById('sidebarList');
+const sidebarTitleEl = document.getElementById('sidebarTitle');
+const fontSizeLabelEl = document.getElementById('fontSizeLabel');
+const fontSizeDownBtn = document.getElementById('fontSizeDown');
+const fontSizeUpBtn = document.getElementById('fontSizeUp');
+const exportLabelEl = document.getElementById('exportLabel');
+const exportTextBtn = document.getElementById('exportTextBtn');
+const exportPdfBtn = document.getElementById('exportPdfBtn');
 
 const MAX_ATTACHMENT_BYTES = 4 * 1024 * 1024; // 4MB
 const MAX_DOC_CHARS = 12000;
@@ -508,6 +604,12 @@ const TRANSLATIONS = {
     capTitleNeurons: "Nox is at capacity right now",
     capSubNeurons: "Should free up in approximately",
     capPlaceholder: "Nox is resting — come back after the reset 🌙",
+    sidebarToggleTitle: "Saved chats",
+    sidebarTitle: "Chats",
+    sidebarEmpty: "No saved chats yet — start typing to save one here.",
+    fontSizeLabel: "Text size",
+    exportLabel: "Export this chat",
+    deleteChatTitle: "Delete chat",
   },
   fr: {
     heroTitle: "🌙 Salut, je suis Nox.",
@@ -533,6 +635,12 @@ const TRANSLATIONS = {
     capTitleNeurons: "Nox est à pleine capacité pour le moment",
     capSubNeurons: "Devrait se libérer dans environ",
     capPlaceholder: "Nox se repose — reviens après la réinitialisation 🌙",
+    sidebarToggleTitle: "Discussions enregistrées",
+    sidebarTitle: "Discussions",
+    sidebarEmpty: "Aucune discussion enregistrée pour l'instant — écris un message pour en créer une.",
+    fontSizeLabel: "Taille du texte",
+    exportLabel: "Exporter cette discussion",
+    deleteChatTitle: "Supprimer la discussion",
   },
   de: {
     heroTitle: "🌙 Hallo, ich bin Nox.",
@@ -558,6 +666,12 @@ const TRANSLATIONS = {
     capTitleNeurons: "Nox ist gerade ausgelastet",
     capSubNeurons: "Sollte in etwa wieder frei sein in",
     capPlaceholder: "Nox macht Pause — komm nach dem Reset wieder 🌙",
+    sidebarToggleTitle: "Gespeicherte Chats",
+    sidebarTitle: "Chats",
+    sidebarEmpty: "Noch keine gespeicherten Chats — schreib etwas, um hier einen zu speichern.",
+    fontSizeLabel: "Textgröße",
+    exportLabel: "Diesen Chat exportieren",
+    deleteChatTitle: "Chat löschen",
   },
   lb: {
     heroTitle: "🌙 Moien, ech sinn den Nox.",
@@ -583,6 +697,12 @@ const TRANSLATIONS = {
     capTitleNeurons: "Den Nox ass am Moment ausgelaascht",
     capSubNeurons: "Sollt an ongeféier erëm fräi sinn an",
     capPlaceholder: "Nox rout — kommt nom Reset zréck 🌙",
+    sidebarToggleTitle: "Gespäichert Chats",
+    sidebarTitle: "Chats",
+    sidebarEmpty: "Nach keng gespäichert Chats — schreif eppes fir ee hei ze späicheren.",
+    fontSizeLabel: "Textgréisst",
+    exportLabel: "Dëse Chat exportéieren",
+    deleteChatTitle: "Chat läschen",
   },
   pt: {
     heroTitle: "🌙 Olá, sou o Nox.",
@@ -608,6 +728,12 @@ const TRANSLATIONS = {
     capTitleNeurons: "O Nox está no limite de capacidade agora",
     capSubNeurons: "Deve ficar disponível novamente em aproximadamente",
     capPlaceholder: "O Nox está a descansar — volta depois do reset 🌙",
+    sidebarToggleTitle: "Conversas guardadas",
+    sidebarTitle: "Conversas",
+    sidebarEmpty: "Ainda não há conversas guardadas — escreve algo para guardar uma aqui.",
+    fontSizeLabel: "Tamanho do texto",
+    exportLabel: "Exportar esta conversa",
+    deleteChatTitle: "Eliminar conversa",
   },
 };
 
@@ -705,6 +831,13 @@ function applyLanguage(lang) {
     themeToggleBtn.title = t.themeToggleTitle;
     themeToggleBtn.setAttribute('aria-label', t.themeToggleTitle);
   }
+  if (sidebarToggleBtn) {
+    sidebarToggleBtn.title = t.sidebarToggleTitle;
+    sidebarToggleBtn.setAttribute('aria-label', t.sidebarToggleTitle);
+  }
+  if (sidebarTitleEl) sidebarTitleEl.textContent = t.sidebarTitle;
+  if (fontSizeLabelEl) fontSizeLabelEl.textContent = t.fontSizeLabel;
+  if (exportLabelEl) exportLabelEl.textContent = t.exportLabel;
   const privacyLink = document.getElementById('footerPrivacyLink');
   if (privacyLink) privacyLink.textContent = t.privacyLink;
   const poweredByEl = document.getElementById('footerPoweredBy');
@@ -716,6 +849,7 @@ function applyLanguage(lang) {
 
   try { localStorage.setItem('noxLang', currentLang); } catch {}
   renderStatusBar();
+  if (typeof renderSidebarList === 'function') renderSidebarList();
   if (capBanner.style.display !== 'none' && currentResetKind) showResetBanner(currentResetKind);
   if (history.length) history[0] = { role: 'system', content: buildSystemPrompt() };
 }
@@ -726,6 +860,298 @@ document.querySelectorAll('.flag-btn').forEach((btn) => {
 
 let history = [{ role: "system", content: buildSystemPrompt() }];
 
+// Every real conversation (one that has at least one message) is kept as
+// its own entry in one localStorage object, keyed by a generated id — not
+// serialized as one giant blob per save, so switching chats is just picking
+// a different entry rather than re-parsing everything. A brand new "New
+// chat" is NOT written here until its first message; an empty conversation
+// nobody typed into isn't worth cluttering the sidebar with.
+const CONVOS_KEY = 'noxConversations';
+const ACTIVE_CONVO_KEY = 'noxActiveConvoId';
+let activeConvoId = null;
+
+function loadConversations() {
+  try {
+    const raw = localStorage.getItem(CONVOS_KEY);
+    const parsed = raw ? JSON.parse(raw) : {};
+    return (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) ? parsed : {};
+  } catch { return {}; }
+}
+
+function saveConversations(convos) {
+  try { localStorage.setItem(CONVOS_KEY, JSON.stringify(convos)); } catch {}
+}
+
+function getSavedActiveConvoId() {
+  try { return localStorage.getItem(ACTIVE_CONVO_KEY); } catch { return null; }
+}
+
+function setSavedActiveConvoId(id) {
+  try {
+    if (id) localStorage.setItem(ACTIVE_CONVO_KEY, id);
+    else localStorage.removeItem(ACTIVE_CONVO_KEY);
+  } catch {}
+}
+
+function makeConvoId() {
+  return 'c-' + (crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2));
+}
+
+function deriveConvoTitle(messages) {
+  const firstUser = messages.find((m) => m.role === 'user');
+  const raw = (firstUser?.content || '').replace(/\s+/g, ' ').trim();
+  if (!raw) return 'New chat';
+  return raw.length > 42 ? raw.slice(0, 42) + '…' : raw;
+}
+
+// Called after every user/assistant message lands in `history` — a single
+// conversation's worth of JSON, not the whole store, so this stays cheap
+// even with many saved chats. This is what makes a reload/crash/accidental
+// tab close non-destructive: the exact `messages` array (system prompt
+// excluded — that's rebuilt fresh from buildSystemPrompt() on load, so a
+// later language or persona change applies to old chats too) is what gets
+// restored.
+function persistActiveConversation() {
+  const messages = history.filter((m) => m.role !== 'system');
+  if (!messages.length) return;
+  if (!activeConvoId) activeConvoId = makeConvoId();
+  const convos = loadConversations();
+  const existing = convos[activeConvoId];
+  convos[activeConvoId] = {
+    id: activeConvoId,
+    title: deriveConvoTitle(messages),
+    messages,
+    createdAt: existing?.createdAt || Date.now(),
+    updatedAt: Date.now(),
+  };
+  saveConversations(convos);
+  setSavedActiveConvoId(activeConvoId);
+  renderSidebarList();
+}
+
+function deleteConversation(id) {
+  const convos = loadConversations();
+  delete convos[id];
+  saveConversations(convos);
+  if (id === activeConvoId) {
+    startNewChat();
+  } else {
+    renderSidebarList();
+  }
+}
+
+function renderSidebarList() {
+  if (!sidebarListEl) return;
+  const t = TRANSLATIONS[currentLang] || TRANSLATIONS.en;
+  const convos = loadConversations();
+  const list = Object.values(convos).sort((a, b) => b.updatedAt - a.updatedAt);
+  sidebarListEl.innerHTML = '';
+  if (!list.length) {
+    const empty = document.createElement('div');
+    empty.className = 'sidebar-empty';
+    empty.textContent = t.sidebarEmpty;
+    sidebarListEl.appendChild(empty);
+    return;
+  }
+  list.forEach((c) => {
+    const row = document.createElement('div');
+    row.className = 'convo-row' + (c.id === activeConvoId ? ' active' : '');
+    row.tabIndex = 0;
+    row.setAttribute('role', 'button');
+    row.setAttribute('aria-label', c.title);
+
+    const title = document.createElement('div');
+    title.className = 'convo-title';
+    title.textContent = c.title;
+
+    const del = document.createElement('button');
+    del.type = 'button';
+    del.className = 'convo-delete';
+    del.title = t.deleteChatTitle;
+    del.setAttribute('aria-label', t.deleteChatTitle);
+    del.textContent = '🗑';
+    del.addEventListener('click', (e) => {
+      e.stopPropagation();
+      deleteConversation(c.id);
+    });
+
+    row.addEventListener('click', () => loadConversationById(c.id));
+    row.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); loadConversationById(c.id); }
+    });
+
+    row.append(title, del);
+    sidebarListEl.appendChild(row);
+  });
+}
+
+function loadConversationById(id) {
+  const convos = loadConversations();
+  const convo = convos[id];
+  if (!convo) return;
+  activeConvoId = id;
+  setSavedActiveConvoId(id);
+  history = [{ role: 'system', content: buildSystemPrompt() }, ...convo.messages];
+  renderThreadFromHistory();
+  closeSidebar();
+}
+
+// Rebuilds the visible thread DOM from `history` — used both when
+// restoring the last-open conversation on page load and when switching to
+// a different saved one from the sidebar. Bot replies get their code
+// blocks re-highlighted and a fresh copy/feedback row (a new vote from
+// this render doesn't carry over any previous vote's highlight state —
+// votes aren't persisted, only the messages are, which is an acceptable
+// simplification since the KV record of the original vote still exists
+// server-side).
+function renderThreadFromHistory() {
+  thread.innerHTML = '';
+  const messages = history.filter((m) => m.role !== 'system');
+  if (!messages.length) {
+    showEmptyState();
+    return;
+  }
+  hideEmptyState();
+  let lastUserText = '';
+  messages.forEach((m) => {
+    if (m.role === 'user') {
+      lastUserText = m.content;
+      const bubble = addMessage('user', m.content);
+      bubble.parentElement.after(createCopyOnlyRow(m.content));
+    } else if (m.role === 'assistant') {
+      const bubble = addMessage('bot', '');
+      bubble.classList.add('markdown');
+      bubble.innerHTML = renderMarkdown(m.content);
+      enhanceCodeBlocks(bubble);
+      bubble.parentElement.after(createFeedbackRow(m.content, lastUserText));
+    }
+  });
+  scrollToBottom();
+}
+
+function openSidebar() {
+  renderSidebarList();
+  sidebarEl.style.display = 'flex';
+  sidebarOverlayEl.style.display = 'block';
+  sidebarCloseBtn.focus();
+}
+
+function closeSidebar() {
+  if (sidebarEl.style.display === 'none') return;
+  sidebarEl.style.display = 'none';
+  sidebarOverlayEl.style.display = 'none';
+  sidebarToggleBtn.focus();
+}
+
+sidebarToggleBtn.addEventListener('click', openSidebar);
+sidebarCloseBtn.addEventListener('click', closeSidebar);
+sidebarOverlayEl.addEventListener('click', closeSidebar);
+
+// Persisted per-visitor text-size preference — steps rather than a free
+// slider, simple to reason about and to keep in sync with a disabled state
+// at each end.
+const FONT_SIZES = [13, 15, 17, 19];
+function getSavedFontSizeIndex() {
+  try {
+    const raw = localStorage.getItem('noxFontSizeIdx');
+    const idx = raw !== null ? parseInt(raw, 10) : 1;
+    return FONT_SIZES[idx] !== undefined ? idx : 1;
+  } catch { return 1; }
+}
+let fontSizeIdx = getSavedFontSizeIndex();
+function applyFontSize() {
+  document.documentElement.style.setProperty('--msg-font-size', FONT_SIZES[fontSizeIdx] + 'px');
+  if (fontSizeDownBtn) fontSizeDownBtn.disabled = fontSizeIdx === 0;
+  if (fontSizeUpBtn) fontSizeUpBtn.disabled = fontSizeIdx === FONT_SIZES.length - 1;
+}
+if (fontSizeDownBtn) fontSizeDownBtn.addEventListener('click', () => {
+  if (fontSizeIdx === 0) return;
+  fontSizeIdx--;
+  applyFontSize();
+  try { localStorage.setItem('noxFontSizeIdx', String(fontSizeIdx)); } catch {}
+});
+if (fontSizeUpBtn) fontSizeUpBtn.addEventListener('click', () => {
+  if (fontSizeIdx === FONT_SIZES.length - 1) return;
+  fontSizeIdx++;
+  applyFontSize();
+  try { localStorage.setItem('noxFontSizeIdx', String(fontSizeIdx)); } catch {}
+});
+
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+if (exportTextBtn) exportTextBtn.addEventListener('click', () => {
+  const messages = history.filter((m) => m.role !== 'system');
+  if (!messages.length) return;
+  const text = messages.map((m) => `${m.role === 'user' ? 'You' : 'Nox'}: ${m.content}`).join('\n\n');
+  downloadBlob(new Blob([text], { type: 'text/plain;charset=utf-8' }), 'nox-chat.txt');
+});
+
+if (exportPdfBtn) exportPdfBtn.addEventListener('click', () => {
+  const messages = history.filter((m) => m.role !== 'system');
+  if (!messages.length || typeof window.jspdf === 'undefined') return;
+  const { jsPDF } = window.jspdf;
+  const doc = new jsPDF({ unit: 'pt', format: 'a4' });
+  const pageWidth = doc.internal.pageSize.getWidth();
+  const pageHeight = doc.internal.pageSize.getHeight();
+  const margin = 40;
+  const maxWidth = pageWidth - margin * 2;
+  let y = margin;
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(16);
+  doc.text('Nox — chat export', margin, y);
+  y += 26;
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(11);
+  messages.forEach((m) => {
+    const label = m.role === 'user' ? 'You' : 'Nox';
+    const lines = doc.splitTextToSize(`${label}: ${m.content}`, maxWidth);
+    lines.forEach((line) => {
+      if (y > pageHeight - margin) {
+        doc.addPage();
+        y = margin;
+      }
+      doc.text(line, margin, y);
+      y += 15;
+    });
+    y += 8;
+  });
+  doc.save('nox-chat.pdf');
+});
+
+// Cmd/Ctrl+K jumps straight to the composer from anywhere on the page; Esc
+// backs out of whatever's currently "in front" — the sidebar first if it's
+// open, otherwise just clears a non-empty draft. Deliberately does NOT
+// auto-dismiss the at-capacity modal on Esc — that state means every
+// request would fail anyway, so hiding the explanation without the visitor
+// reading it first isn't helpful.
+document.addEventListener('keydown', (e) => {
+  const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k';
+  if (isCmdK) {
+    e.preventDefault();
+    input.focus();
+    return;
+  }
+  if (e.key === 'Escape') {
+    if (sidebarEl.style.display !== 'none') {
+      closeSidebar();
+      return;
+    }
+    if (document.activeElement === input && input.value) {
+      input.value = '';
+      input.style.height = 'auto';
+    }
+  }
+});
+
 function showEmptyState() {
   emptyState.style.display = 'flex';
   thread.style.display = 'none';
@@ -912,11 +1338,14 @@ async function fetchStats() {
 
 function startNewChat() {
   history = [{ role: "system", content: buildSystemPrompt() }];
+  activeConvoId = null;
+  setSavedActiveConvoId(null);
   thread.innerHTML = '';
   showEmptyState();
   input.value = '';
   input.style.height = 'auto';
   input.focus();
+  renderSidebarList();
 }
 
 newChatBtn.addEventListener('click', startNewChat);
@@ -1066,6 +1495,7 @@ async function requestReply(imageBase64) {
         finishReason = result.finishReason;
       }
       history.push({ role: 'assistant', content: reply });
+      persistActiveConversation();
       loadingBubble.parentElement.after(createFeedbackRow(reply, userMessageText));
       scrollToBottom();
       fetchStats();
@@ -1092,6 +1522,7 @@ async function requestReply(imageBase64) {
       loadingBubble.innerHTML = renderMarkdown(reply);
       enhanceCodeBlocks(loadingBubble);
       history.push({ role: 'assistant', content: reply });
+      persistActiveConversation();
       loadingBubble.parentElement.after(createFeedbackRow(reply, userMessageText));
       updateGlobalUsage(data.usage);
       scrollToBottom();
@@ -1130,8 +1561,10 @@ form.addEventListener('submit', async (e) => {
   const imageToSend = pendingImage ? pendingImage.base64 : null;
   clearAttachment();
 
-  addMessage('user', displayText);
+  const userBubble = addMessage('user', displayText);
+  userBubble.parentElement.after(createCopyOnlyRow(displayText));
   history.push({ role: 'user', content: messageContent });
+  persistActiveConversation();
 
   await requestReply(imageToSend);
   if (!lastUsage || lastUsage.used < lastUsage.cap) {
@@ -1141,9 +1574,30 @@ form.addEventListener('submit', async (e) => {
   }
 });
 
-startNewChat();
+// Restores whatever conversation was open when the page was last closed,
+// instead of always starting blank — the single biggest source of "lost my
+// chat on refresh" frustration this was built to fix. Falls back to a
+// normal blank new chat if there's nothing saved, or the saved id no longer
+// exists (e.g. it was deleted from another tab).
+const restoreId = getSavedActiveConvoId();
+const restoreConvos = loadConversations();
+if (restoreId && restoreConvos[restoreId]) {
+  activeConvoId = restoreId;
+  history = [{ role: 'system', content: buildSystemPrompt() }, ...restoreConvos[restoreId].messages];
+  renderThreadFromHistory();
+} else {
+  startNewChat();
+}
 applyLanguage(currentLang);
+applyFontSize();
+renderSidebarList();
 fetchStats();
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('sw.js').catch(() => {});
+  });
+}
 </script>
 </body>
 </html>

manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Nox — by Devseis",
+  "short_name": "Nox",
+  "description": "A free AI assistant by Devseis. Ask anything, or attach an image or document.",
+  "start_url": "./index.html",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#0b0e14",
+  "theme_color": "#0b0e14",
+  "icons": [
+    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

sw.js

@@ -0,0 +1,51 @@
+// Minimal offline app-shell cache — deliberately narrow: only the small set
+// of same-origin static files that make up the page itself. Never touches
+// the chat API (cross-origin, and never GET) or the CDN libraries (marked,
+// DOMPurify, pdf.js, highlight.js, the Google Font) — those should always
+// go through the browser's normal cache/network so a library update or a
+// worker deploy is picked up immediately, not stuck behind a stale SW cache.
+const CACHE_NAME = 'nox-shell-v1';
+const APP_SHELL = [
+  './',
+  './index.html',
+  './manifest.json',
+  './devseis-logo.png',
+  './icon-192.png',
+  './icon-512.png',
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)).catch(() => {})
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const req = event.request;
+  if (req.method !== 'GET') return;
+  const url = new URL(req.url);
+  if (url.origin !== self.location.origin) return;
+  if (!APP_SHELL.some((p) => url.pathname.endsWith(p.replace('./', '')) || (p === './' && url.pathname === '/'))) return;
+
+  // Network-first so a redeploy is visible on next load when online; falls
+  // back to the cached shell only when the network actually fails (offline).
+  event.respondWith(
+    fetch(req)
+      .then((res) => {
+        const copy = res.clone();
+        caches.open(CACHE_NAME).then((cache) => cache.put(req, copy)).catch(() => {});
+        return res;
+      })
+      .catch(() => caches.match(req))
+  );
+});