@runcore-sh/runcore 0.4.0 → 0.5.1

package/public/index.html

@@ -28,6 +28,36 @@
     --max-width: 720px;
   }
 
+  /* Light theme */
+  [data-theme="light"] {
+    --bg: #ffffff;
+    --surface: #f5f5f5;
+    --border: #e0e0e0;
+    --text: #1a1a1a;
+    --text-dim: #666666;
+    --accent: #6c5ce7;
+    --accent-dim: #4a3fb0;
+    --error: #dc2626;
+    --user-bg: #eef0ff;
+    --assistant-bg: #f5f5f5;
+  }
+  [data-theme="light"] body { background: var(--bg); color: var(--text); }
+  [data-theme="light"] .chat-header { background: var(--surface); border-color: var(--border); }
+  [data-theme="light"] .card { background: var(--surface); border-color: var(--border); }
+  [data-theme="light"] .card input { background: var(--bg); border-color: var(--border); color: var(--text); }
+  [data-theme="light"] .composer { border-color: var(--border); background: var(--surface); }
+  [data-theme="light"] .composer textarea { background: var(--bg); color: var(--text); border-color: var(--border); }
+  [data-theme="light"] .message.user { background: var(--user-bg); }
+  [data-theme="light"] .message.assistant { background: var(--assistant-bg); }
+  [data-theme="light"] .content-sidebar { background: var(--surface); border-color: var(--border); }
+  [data-theme="light"] .thread-item { border-color: var(--border); }
+  [data-theme="light"] .thread-item:hover { background: rgba(108,92,231,0.06); }
+  [data-theme="light"] .vault-panel { background: var(--surface); border-color: var(--border); }
+  [data-theme="light"] .vault-panel input, [data-theme="light"] .vault-panel select { background: var(--bg); color: var(--text); border-color: var(--border); }
+  [data-theme="light"] .lane-node { border-color: var(--bg); }
+  [data-theme="light"] code { background: #e8e8e8; color: #333; }
+  [data-theme="light"] pre { background: #f0f0f0; }
+
   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
     background: var(--bg);
@@ -260,48 +290,66 @@
   }
 
   .message {
-    padding: 12px 20px 12px 36px;
+    padding: 12px 20px 12px 76px;
     max-width: var(--max-width);
     margin: 0 auto;
     width: 100%;
     position: relative;
-    overflow: hidden;
+    overflow: visible;
   }
 
-  /* --- Topic branch indicator (git-style) --- */
-  .drift-line {
+  /* --- Conversation graph (git-style branch visualization) --- */
+  .drift-graph {
     position: absolute;
-    left: 12px;
-    top: 4px;
-    bottom: 4px;
-    width: 3px;
-    border-radius: 1.5px;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 68px;
+    pointer-events: none;
     z-index: 0;
   }
-  .drift-line[data-drift="0"] { background: #2ea043; left: 12px; }
-  .drift-line[data-drift="1"] { background: #3fb950; left: 14px; }
-  .drift-line[data-drift="2"] { background: #d29922; left: 17px; }
-  .drift-line[data-drift="3"] { background: #db6d28; left: 20px; }
-  .drift-line[data-drift="4"] { background: #f85149; left: 24px; }
-  .drift-node {
+  .lane-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    opacity: 0.5;
+    border-radius: 1px;
+  }
+  .lane-line.active-lane { opacity: 0.8; }
+  .lane-node {
     position: absolute;
-    left: -3px;
-    top: 10px;
-    width: 9px;
-    height: 9px;
+    top: 14px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     border: 2px solid var(--bg);
-    background: inherit;
+    z-index: 2;
+    transform: translateX(-4px);
   }
-  .drift-line .drift-connector {
+  .lane-svg {
     position: absolute;
-    top: 18px;
-    height: 2px;
-    background: inherit;
-    border-radius: 1px;
+    top: 0;
+    left: 0;
+    width: 68px;
+    height: 40px;
+    overflow: visible;
+    z-index: 1;
+  }
+  .drift-label {
+    position: absolute;
+    left: 68px;
+    top: 2px;
+    font-size: 9px;
+    font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
+    color: var(--text-dim);
+    opacity: 0.6;
+    white-space: nowrap;
+    pointer-events: none;
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  /* Connector from previous position to current */
-  .drift-line[data-drift="0"] .drift-connector { display: none; }
 
   /* Continuity score badge */
   .continuity-badge {
@@ -2286,7 +2334,23 @@
     font-size: 11px;
     color: var(--text-dim);
     margin-top: 2px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .thread-delete-btn {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    margin-left: auto;
+    opacity: 0;
+    transition: opacity 0.15s, color 0.15s;
   }
+  .thread-item:hover .thread-delete-btn { opacity: 0.7; }
+  .thread-delete-btn:hover { color: var(--error); opacity: 1 !important; }
 
   .thread-toggle-btn {
     width: 32px;
@@ -2443,9 +2507,11 @@
     .content-sidebar.collapsed { width: 0; display: none; }
 
     /* Messages: tighter padding */
-    .message { padding: 10px 12px; }
+    .message { padding: 10px 12px 10px 56px; }
     .message .content { font-size: 14px; }
     .message .role { font-size: 10px; }
+    .drift-graph { width: 48px; }
+    .drift-label { left: 48px; display: none; }
 
     /* Composer: stack on small screens */
     .composer { padding: 8px 10px; }
@@ -2610,11 +2676,12 @@
     <nav class="header-nav" id="header-nav">
       <a href="/" class="active">Chat</a>
     </nav>
-    <button class="thread-toggle-btn" id="thread-toggle-btn" title="Toggle threads">&#9776;</button>
-    <span class="thread-current-label" id="thread-current-label" title="Click to toggle threads"></span>
+    <button class="thread-toggle-btn" id="thread-toggle-btn" title="Toggle chats">&#9776;</button>
+    <span class="thread-current-label" id="thread-current-label" title="Click to toggle chats"></span>
     <span class="spacer"></span>
     <button class="gear-btn" id="mobile-pair-btn" onclick="openMobileModal()" title="Go Mobile"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></button>
     <button class="gear-btn" id="share-btn" onclick="nativeShare()" title="Share"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></button>
+    <button class="gear-btn" id="theme-toggle-btn" title="Toggle theme"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></button>
     <button class="gear-btn" id="vault-open-btn" title="Settings">&#9881;</button>
     <span class="tab-badge" id="activity-badge" style="display:none;"></span>
   </div>
@@ -2624,13 +2691,13 @@
         <input type="text" id="sidebar-search" placeholder="Search..." />
       </div>
       <div class="sidebar-tabs">
-        <button class="sidebar-tab active" data-tab="threads">Threads</button>
+        <button class="sidebar-tab active" data-tab="threads">Chats</button>
         <button class="sidebar-tab" data-tab="files">Files</button>
       </div>
-      <!-- Threads tab -->
+      <!-- Chats tab -->
       <div class="sidebar-tab-content active" id="sidebar-threads">
         <div class="thread-sidebar-header">
-          <button class="thread-new-btn" id="thread-new-btn">+ New</button>
+          <button class="thread-new-btn" id="thread-new-btn">+ New chat</button>
         </div>
         <div class="thread-list" id="thread-list"></div>
       </div>
@@ -3210,7 +3277,7 @@
     // Add "Main chat" as the default option
     const mainItem = document.createElement("div");
     mainItem.className = "thread-item" + (currentThreadId === null ? " active" : "");
-    mainItem.innerHTML = '<div class="thread-item-title">Main chat</div><div class="thread-item-meta">Default conversation</div>';
+    mainItem.innerHTML = '<div class="thread-item-title">Main</div><div class="thread-item-meta">Always here</div>';
     mainItem.addEventListener("click", () => switchThread(null));
     threadListEl.appendChild(mainItem);
 
@@ -3220,8 +3287,24 @@
       item.dataset.id = t.id;
       const ago = timeAgo(t.updatedAt);
       item.innerHTML = '<div class="thread-item-title">' + escapeHtml(t.title) + '</div>'
-        + '<div class="thread-item-meta">' + ago + '</div>';
-      item.addEventListener("click", () => switchThread(t.id));
+        + '<div class="thread-item-meta">' + ago
+        + '<button class="thread-delete-btn" title="Delete chat" data-thread-id="' + t.id + '">&times;</button></div>';
+      item.addEventListener("click", (e) => {
+        if (e.target.classList && e.target.classList.contains("thread-delete-btn")) return;
+        switchThread(t.id);
+      });
+      item.querySelector(".thread-delete-btn").addEventListener("click", async (e) => {
+        e.stopPropagation();
+        const tid = e.target.dataset ? e.target.dataset.threadId : null;
+        if (!tid) return;
+        try {
+          await api("/api/threads/" + encodeURIComponent(tid) + "?sessionId=" + encodeURIComponent(sessionId), {
+            method: "DELETE",
+          });
+          if (currentThreadId === tid) await switchThread(null);
+          loadThreads();
+        } catch (err) { console.log("Delete thread failed:", err.message); }
+      });
       threadListEl.appendChild(item);
     }
   }
@@ -3253,6 +3336,12 @@
     topicState.scores = [];
     topicState.messageTexts = [];
     topicState.topic = "";
+    topicState.branches = 0;
+    topicState.maxDrift = 0;
+    topicState.merges = 0;
+    graphState.lanes = [true, false, false, false, false];
+    graphState.currentLane = 0;
+    graphState.history = [];
     renderThreadList();
     updateThreadLabel();
 
@@ -3294,7 +3383,7 @@
   function updateThreadLabel() {
     if (currentThreadId) {
       const t = threads.find(t => t.id === currentThreadId);
-      threadCurrentLabel.textContent = t ? t.title : "Thread";
+      threadCurrentLabel.textContent = t ? t.title : "Chat";
     } else {
       threadCurrentLabel.textContent = "";
     }
@@ -3317,6 +3406,57 @@
     }
   });
 
+  // --- Auto-title chats after first exchange ---
+  var chatAutoTitled = {}; // threadId → true if already titled
+  function autoTitleChat(threadId) {
+    if (!threadId || chatAutoTitled[threadId]) return;
+    // Skip if already has a real title
+    var existing = threads.find(function(x) { return x.id === threadId; });
+    if (existing && existing.title && existing.title !== "New chat" && existing.title !== "New thread") {
+      chatAutoTitled[threadId] = true;
+      return;
+    }
+    // Get the first user message in the current view
+    var msgs = messagesEl.querySelectorAll(".message.user .content");
+    if (msgs.length === 0) return;
+    var firstMsg = (msgs[0].textContent || "").trim();
+    if (firstMsg.length < 3) return;
+
+    // Generate title: first sentence or first ~40 chars, cleaned up
+    var title = firstMsg
+      .replace(/```[\s\S]*?```/g, " ")
+      .replace(/https?:\/\/\S+/g, "")
+      .replace(/\s+/g, " ")
+      .trim();
+    // Use first sentence if short enough
+    var sentenceEnd = title.search(/[.!?\n]/);
+    if (sentenceEnd > 0 && sentenceEnd <= 50) {
+      title = title.slice(0, sentenceEnd);
+    } else {
+      title = title.slice(0, 44);
+      // Cut at last word boundary
+      var lastSpace = title.lastIndexOf(" ");
+      if (lastSpace > 20) title = title.slice(0, lastSpace);
+    }
+    title = title.trim();
+    if (title.length < 3) return;
+
+    chatAutoTitled[threadId] = true;
+
+    // Update server
+    fetch("/api/threads/" + encodeURIComponent(threadId), {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json", ...authHeaders() },
+      body: JSON.stringify({ sessionId: sessionId, title: title }),
+    }).then(function() {
+      // Update local state and sidebar
+      var t = threads.find(function(x) { return x.id === threadId; });
+      if (t) t.title = title;
+      renderThreadList();
+      updateThreadLabel();
+    }).catch(function() {});
+  }
+
   // --- Attached files ---
   let pendingImages = []; // { data: base64, mimeType: string }
   let pendingFiles = [];  // { name: string, text: string }
@@ -4069,6 +4209,20 @@
     // Pre-load threads list
     await loadThreads();
 
+    // Load seal values from membrane so flagged terms blur on refresh
+    try {
+      const sealRes = await fetch("/api/sensitive/seals?" + new URLSearchParams({ sessionId: sessionId || "" }));
+      if (sealRes.ok) {
+        const sealData = await sealRes.json();
+        if (sealData.values && sealData.values.length > 0) {
+          window._serverSealValues = sealData.values;
+          document.querySelectorAll("#messages .message .content").forEach(function(el) {
+            applyServerSeals(el, window._serverSealValues);
+          });
+        }
+      }
+    } catch (e) { /* best effort */ }
+
     // Restore thread + scroll after toast refresh
     try {
       const restore = sessionStorage.getItem("_dash_restore");
@@ -4399,13 +4553,27 @@
     }
   }
 
-  // --- Topic drift tracking (git-style branch indicator) ---
+  // --- Conversation graph (git-style branch visualization) ---
+  var LANE_X = [10, 22, 34, 46, 58]; // 5 lanes, 12px apart
+  var LANE_COLORS = ["#2ea043", "#3fb950", "#d29922", "#db6d28", "#f85149"];
+  // Compat aliases for old code paths
+  var DRIFT_POSITIONS = LANE_X;
+  var DRIFT_COLORS = LANE_COLORS;
   var topicState = {
     keywords: [],        // main topic keywords extracted from first messages
     established: false,  // topic established after N messages
     scores: [],          // drift score per message (0-4)
     messageTexts: [],    // raw text per message for scoring
     topic: "",           // detected main topic label
+    branches: 0,         // number of active divergences
+    maxDrift: 0,         // peak drift in current branch
+    merges: 0,           // times conversation returned to topic
+  };
+  // Graph state: tracks which lanes are currently active
+  var graphState = {
+    lanes: [true, false, false, false, false],
+    currentLane: 0,
+    history: [], // per message: { lane, activeLanes, forkFrom?, mergeTo?, label? }
   };
 
   // Stop words to filter out
@@ -4496,6 +4664,120 @@
       + '<span class="continuity-topic">' + (topicState.topic || "detecting...") + '</span>';
   }
 
+  // Compute graph entry for a new message at given drift level
+  function computeGraphEntry(drift, prevDrift) {
+    var entry = {
+      lane: drift,
+      activeLanes: graphState.lanes.slice(),
+      forkFrom: undefined,
+      mergeTo: undefined,
+      label: undefined,
+    };
+
+    if (drift > prevDrift && drift >= 2) {
+      // Fork: activate new lane, keep old active
+      graphState.lanes[drift] = true;
+      entry.forkFrom = prevDrift;
+      entry.activeLanes = graphState.lanes.slice();
+      // Extract fork label from recent keywords
+      var recent = topicState.messageTexts.slice(-2).join(" ");
+      var rk = extractKeywords(recent);
+      var topicSet = new Set(topicState.keywords);
+      var newWords = rk.filter(function(w) { return !topicSet.has(w); }).slice(0, 2);
+      if (newWords.length > 0) entry.label = newWords.join(" ");
+    } else if (drift < prevDrift) {
+      // Merge: deactivate old lane(s) between current and previous
+      for (var i = drift + 1; i <= prevDrift; i++) {
+        graphState.lanes[i] = false;
+      }
+      entry.mergeTo = prevDrift;
+      entry.activeLanes = graphState.lanes.slice();
+    }
+
+    graphState.currentLane = drift;
+    graphState.history.push(entry);
+    return entry;
+  }
+
+  // Render the graph column for a message
+  function renderGraphRow(messageDiv, entry) {
+    var graph = document.createElement("div");
+    graph.className = "drift-graph";
+
+    // Draw vertical line segments for each active lane
+    for (var i = 0; i < 5; i++) {
+      if (!entry.activeLanes[i]) continue;
+      var line = document.createElement("div");
+      line.className = "lane-line" + (i === entry.lane ? " active-lane" : "");
+      line.style.left = LANE_X[i] + "px";
+      line.style.background = LANE_COLORS[i];
+      graph.appendChild(line);
+    }
+
+    // Draw commit node on current lane
+    var node = document.createElement("div");
+    node.className = "lane-node";
+    node.style.left = LANE_X[entry.lane] + "px";
+    node.style.background = LANE_COLORS[entry.lane];
+    graph.appendChild(node);
+
+    // Draw fork or merge curve via SVG
+    if (entry.forkFrom !== undefined || entry.mergeTo !== undefined) {
+      var svgNS = "http://www.w3.org/2000/svg";
+      var svg = document.createElementNS(svgNS, "svg");
+      svg.setAttribute("class", "lane-svg");
+      svg.setAttribute("viewBox", "0 0 68 40");
+      svg.setAttribute("fill", "none");
+
+      if (entry.forkFrom !== undefined) {
+        // Curve from parent lane down to new lane
+        var fx = LANE_X[entry.forkFrom] + 1;
+        var tx = LANE_X[entry.lane] + 1;
+        var path = document.createElementNS(svgNS, "path");
+        path.setAttribute("d", "M" + fx + ",0 C" + fx + ",12 " + tx + ",7 " + tx + ",19");
+        path.setAttribute("stroke", LANE_COLORS[entry.lane]);
+        path.setAttribute("stroke-width", "2");
+        path.setAttribute("stroke-linecap", "round");
+        svg.appendChild(path);
+      }
+
+      if (entry.mergeTo !== undefined) {
+        // Curve from old lane merging back to current
+        var mx = LANE_X[entry.mergeTo] + 1;
+        var cx = LANE_X[entry.lane] + 1;
+        var path2 = document.createElementNS(svgNS, "path");
+        path2.setAttribute("d", "M" + mx + ",0 C" + mx + ",12 " + cx + ",7 " + cx + ",19");
+        path2.setAttribute("stroke", LANE_COLORS[entry.mergeTo]);
+        path2.setAttribute("stroke-width", "2");
+        path2.setAttribute("stroke-linecap", "round");
+        path2.setAttribute("opacity", "0.6");
+        svg.appendChild(path2);
+      }
+
+      graph.appendChild(svg);
+    }
+
+    // Fork label
+    if (entry.label) {
+      var lbl = document.createElement("div");
+      lbl.className = "drift-label";
+      lbl.textContent = entry.label;
+      lbl.style.color = LANE_COLORS[entry.lane];
+      graph.appendChild(lbl);
+    }
+
+    // Merge indicator
+    if (entry.mergeTo !== undefined && entry.lane <= 1) {
+      var ml = document.createElement("div");
+      ml.className = "drift-label";
+      ml.textContent = "↩ merged";
+      ml.style.color = LANE_COLORS[0];
+      graph.appendChild(ml);
+    }
+
+    messageDiv.appendChild(graph);
+  }
+
   function addMessage(role, content, labelOverride) {
     const div = document.createElement("div");
     div.className = "message " + role;
@@ -4516,29 +4798,29 @@
     applyPrivacySeals(div.querySelector(".content"));
     if (window._serverSealValues) applyServerSeals(div.querySelector(".content"), window._serverSealValues);
 
-    // --- Drift tracking ---
+    // --- Conversation graph ---
     if (role !== "system") {
       var text = typeof content === "string" ? content : "";
       topicState.messageTexts.push(text);
 
-      // Establish topic after a few messages
       if (!topicState.established && topicState.messageTexts.length >= 2) {
         updateTopicFromMessages();
       }
 
       var drift = scoreDrift(text);
+      var prevDrift = topicState.scores.length > 0 ? topicState.scores[topicState.scores.length - 1] : 0;
       topicState.scores.push(drift);
 
-      // Add drift indicator line
-      var driftLine = document.createElement("div");
-      driftLine.className = "drift-line";
-      driftLine.setAttribute("data-drift", String(drift));
-      var node = document.createElement("div");
-      node.className = "drift-node";
-      driftLine.appendChild(node);
-      div.appendChild(driftLine);
+      if (drift > prevDrift && drift >= 2) {
+        topicState.branches++;
+        topicState.maxDrift = Math.max(topicState.maxDrift, drift);
+      }
+      if (drift < prevDrift && drift <= 1 && prevDrift >= 2) {
+        topicState.merges++;
+      }
 
-      // Update continuity badge
+      var entry = computeGraphEntry(drift, prevDrift);
+      renderGraphRow(div, entry);
       renderContinuityBadge();
     }
 
@@ -4883,16 +5165,16 @@
             updateTopicFromMessages();
           }
           var drift = scoreDrift(finalText);
+          var prevDrift = topicState.scores.length > 0 ? topicState.scores[topicState.scores.length - 1] : 0;
           topicState.scores.push(drift);
+
+          if (drift > prevDrift && drift >= 2) topicState.branches++;
+          if (drift < prevDrift && drift <= 1 && prevDrift >= 2) topicState.merges++;
+
           var msgDiv = contentEl.closest(".message");
-          if (msgDiv && !msgDiv.querySelector(".drift-line")) {
-            var driftLine = document.createElement("div");
-            driftLine.className = "drift-line";
-            driftLine.setAttribute("data-drift", String(drift));
-            var node = document.createElement("div");
-            node.className = "drift-node";
-            driftLine.appendChild(node);
-            msgDiv.appendChild(driftLine);
+          if (msgDiv && !msgDiv.querySelector(".drift-graph")) {
+            var entry = computeGraphEntry(drift, prevDrift);
+            renderGraphRow(msgDiv, entry);
           }
           renderContinuityBadge();
         }
@@ -4921,8 +5203,11 @@
       abortController = null;
       setButtonSend();
       chatInput.focus();
-      // Refresh threads to pick up auto-generated titles
-      if (currentThreadId) loadThreads();
+      // Auto-title chat after first assistant response
+      if (currentThreadId) {
+        autoTitleChat(currentThreadId);
+        loadThreads();
+      }
     }
   }
 
@@ -5732,6 +6017,41 @@
   document.getElementById("vault-open-btn").addEventListener("click", openSettings);
   document.getElementById("vault-close-btn").addEventListener("click", closeVault);
 
+  // --- Theme toggle: dark → light → system ---
+  var THEMES = ["dark", "light", "system"];
+  var THEME_ICONS = {
+    dark: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',
+    light: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',
+    system: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
+  };
+  function getStoredTheme() { return localStorage.getItem("dash_theme") || "dark"; }
+  function applyTheme(theme) {
+    var effective = theme;
+    if (theme === "system") {
+      effective = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+    }
+    document.documentElement.setAttribute("data-theme", effective);
+    var themeBtn = document.getElementById("theme-toggle-btn");
+    if (themeBtn) {
+      themeBtn.innerHTML = THEME_ICONS[theme];
+      themeBtn.title = "Theme: " + theme;
+    }
+    // Update meta theme-color
+    var meta = document.querySelector('meta[name="theme-color"]');
+    if (meta) meta.setAttribute("content", effective === "light" ? "#ffffff" : "#0a0a0a");
+  }
+  applyTheme(getStoredTheme());
+  // Listen for system preference changes
+  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", function() {
+    if (getStoredTheme() === "system") applyTheme("system");
+  });
+  document.getElementById("theme-toggle-btn").addEventListener("click", function() {
+    var current = getStoredTheme();
+    var next = THEMES[(THEMES.indexOf(current) + 1) % THEMES.length];
+    localStorage.setItem("dash_theme", next);
+    applyTheme(next);
+  });
+
   document.getElementById("save-your-name-btn").addEventListener("click", async () => {
     const nameInput = document.getElementById("settings-your-name");
     const newName = nameInput.value.trim();