npm - clay-server - Versions diffs - 2.5.0 - Mend

clay-server 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/LICENSE +21 -0
package/README.md +281 -0
package/bin/cli.js +2385 -0
package/lib/cli-sessions.js +270 -0
package/lib/config.js +237 -0
package/lib/daemon.js +489 -0
package/lib/ipc.js +112 -0
package/lib/notes.js +120 -0
package/lib/pages.js +664 -0
package/lib/project.js +1433 -0
package/lib/public/app.js +2795 -0
package/lib/public/apple-touch-icon-dark.png +0 -0
package/lib/public/apple-touch-icon.png +0 -0
package/lib/public/css/base.css +264 -0
package/lib/public/css/diff.css +128 -0
package/lib/public/css/filebrowser.css +1114 -0
package/lib/public/css/highlight.css +144 -0
package/lib/public/css/icon-strip.css +296 -0
package/lib/public/css/input.css +573 -0
package/lib/public/css/menus.css +856 -0
package/lib/public/css/messages.css +1445 -0
package/lib/public/css/mobile-nav.css +354 -0
package/lib/public/css/overlays.css +697 -0
package/lib/public/css/rewind.css +505 -0
package/lib/public/css/server-settings.css +761 -0
package/lib/public/css/sidebar.css +936 -0
package/lib/public/css/sticky-notes.css +358 -0
package/lib/public/css/title-bar.css +314 -0
package/lib/public/favicon-dark.svg +1 -0
package/lib/public/favicon.svg +1 -0
package/lib/public/icon-192-dark.png +0 -0
package/lib/public/icon-192.png +0 -0
package/lib/public/icon-512-dark.png +0 -0
package/lib/public/icon-512.png +0 -0
package/lib/public/icon-mono.svg +1 -0
package/lib/public/index.html +762 -0
package/lib/public/manifest.json +27 -0
package/lib/public/modules/diff.js +398 -0
package/lib/public/modules/events.js +21 -0
package/lib/public/modules/filebrowser.js +1411 -0
package/lib/public/modules/fileicons.js +172 -0
package/lib/public/modules/icons.js +54 -0
package/lib/public/modules/input.js +584 -0
package/lib/public/modules/markdown.js +356 -0
package/lib/public/modules/notifications.js +649 -0
package/lib/public/modules/qrcode.js +70 -0
package/lib/public/modules/rewind.js +345 -0
package/lib/public/modules/server-settings.js +510 -0
package/lib/public/modules/sidebar.js +1083 -0
package/lib/public/modules/state.js +3 -0
package/lib/public/modules/sticky-notes.js +688 -0
package/lib/public/modules/terminal.js +697 -0
package/lib/public/modules/theme.js +738 -0
package/lib/public/modules/tools.js +1608 -0
package/lib/public/modules/utils.js +56 -0
package/lib/public/style.css +15 -0
package/lib/public/sw.js +75 -0
package/lib/push.js +124 -0
package/lib/sdk-bridge.js +989 -0
package/lib/server.js +582 -0
package/lib/sessions.js +424 -0
package/lib/terminal-manager.js +187 -0
package/lib/terminal.js +24 -0
package/lib/themes/ayu-light.json +9 -0
package/lib/themes/catppuccin-latte.json +9 -0
package/lib/themes/catppuccin-mocha.json +9 -0
package/lib/themes/clay-light.json +10 -0
package/lib/themes/clay.json +10 -0
package/lib/themes/dracula.json +9 -0
package/lib/themes/everforest-light.json +9 -0
package/lib/themes/everforest.json +9 -0
package/lib/themes/github-light.json +9 -0
package/lib/themes/gruvbox-dark.json +9 -0
package/lib/themes/gruvbox-light.json +9 -0
package/lib/themes/monokai.json +9 -0
package/lib/themes/nord-light.json +9 -0
package/lib/themes/nord.json +9 -0
package/lib/themes/one-dark.json +9 -0
package/lib/themes/one-light.json +9 -0
package/lib/themes/rose-pine-dawn.json +9 -0
package/lib/themes/rose-pine.json +9 -0
package/lib/themes/solarized-dark.json +9 -0
package/lib/themes/solarized-light.json +9 -0
package/lib/themes/tokyo-night-light.json +9 -0
package/lib/themes/tokyo-night.json +9 -0
package/lib/updater.js +97 -0
package/package.json +47 -0

package/lib/public/index.html ADDED Viewed

@@ -0,0 +1,762 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<link rel="manifest" href="manifest.json">
+<meta name="theme-color" content="#2F2E2B">
+<link rel="icon" type="image/svg+xml" href="favicon.svg">
+<link rel="apple-touch-icon" href="apple-touch-icon.png">
+<title>Clay</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=Roboto+Mono:wght@400;500&family=Nunito:wght@700;800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/css/xterm.min.css">
+<script>
+(function(){try{var k="clay-theme-vars",v=localStorage.getItem(k),r=document.documentElement;if(v){var o=JSON.parse(v),p;for(p in o)r.style.setProperty(p,o[p]);var vt=localStorage.getItem(k.replace("-vars","-variant"));if(vt==="light"){r.classList.add("light-theme");r.classList.remove("dark-theme")}else{r.classList.add("dark-theme");r.classList.remove("light-theme")}var m=document.querySelector('meta[name="theme-color"]');if(m&&o["--bg"])m.setAttribute("content",o["--bg"])}else{var sl=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches;if(sl){r.classList.add("light-theme");r.classList.remove("dark-theme")}}}catch(e){}})();
+</script>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id="layout">
+  <!-- === Top Bar (full width, forms reverse-ㄱ with icon strip) === -->
+  <div id="top-bar">
+    <a href="https://github.com/chadbyte/claude-relay" target="_blank" rel="noopener" class="top-bar-title"><img class="top-bar-icon" src="favicon.svg" width="16" height="16" alt="">Clay</a>
+    <div class="top-bar-actions">
+      <span id="client-count" class="hidden"></span>
+      <div id="debug-menu-wrap" class="hidden">
+        <button id="debug-btn" title="Debug"><i data-lucide="bug"></i></button>
+        <div id="debug-menu" class="hidden">
+          <label class="notif-option">
+            <span>Update banner</span>
+            <input type="checkbox" id="debug-toggle-update">
+            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+          </label>
+          <label class="notif-option">
+            <span>Onboarding banner</span>
+            <input type="checkbox" id="debug-toggle-onboarding">
+            <span class="toggle-track"><span class="toggle-thumb"></span></span>
+          </label>
+        </div>
+      </div>
+      <button id="theme-toggle-btn" title="Toggle dark/light mode"><i data-lucide="moon"></i></button>
+      <button id="qr-btn" title="Share"><i data-lucide="share"></i></button>
+      <button id="server-settings-btn" title="Server settings"><i data-lucide="settings"></i></button>
+    </div>
+  </div>
+  <!-- === Bottom row === -->
+  <div id="layout-body">
+  <!-- === Icon Strip === -->
+  <div id="icon-strip">
+    <div class="icon-strip-home" title="Clay">
+      <span class="icon-strip-pill"></span>
+      <img class="footer-mascot icon-strip-logo" src="favicon.svg" width="38" height="38" alt="Clay">
+      <span class="icon-strip-status"></span>
+    </div>
+    <div class="icon-strip-separator"></div>
+    <div class="icon-strip-projects" id="icon-strip-projects"></div>
+    <button class="icon-strip-add" id="icon-strip-add" title="Add project"><i data-lucide="plus"></i></button>
+  </div>
+  <!-- === Main Area (sidebar + resize-handle + main-column) === -->
+  <div id="main-area">
+    <div id="sidebar-column">
+      <div class="title-bar-sidebar">
+        <span class="title-bar-project-name" id="title-bar-project-name"></span>
+      </div>
+      <div id="sidebar">
+        <div id="sidebar-tools">
+          <div id="session-actions">
+            <button id="file-browser-btn"><i data-lucide="folder-tree"></i> <span>File browser</span></button>
+            <button id="terminal-sidebar-btn"><i data-lucide="square-terminal"></i> <span>Terminal</span><span id="terminal-sidebar-count" class="sidebar-badge hidden"></span></button>
+          </div>
+        </div>
+        <div id="sidebar-sessions-header">
+          <div id="sessions-header-content">
+            <div class="session-list-header">
+              <span>Sessions</span>
+              <div class="session-list-header-actions">
+                <button id="new-session-btn" type="button" data-tip="New session"><i data-lucide="plus"></i></button>
+                <button id="resume-session-btn" type="button" data-tip="Import CLI session"><i data-lucide="import"></i></button>
+                <button id="search-session-btn" type="button" data-tip="Search sessions"><i data-lucide="search"></i></button>
+              </div>
+            </div>
+            <div id="session-search" class="hidden">
+              <input id="session-search-input" type="text" placeholder="Search sessions..." autocomplete="off" spellcheck="false" />
+              <button id="session-search-clear" type="button" aria-label="Clear search"><i data-lucide="x"></i></button>
+            </div>
+          </div>
+          <div id="files-header-content" class="hidden">
+            <div class="session-list-header">
+              <span>File Browser</span>
+              <div class="session-list-header-actions">
+                <button id="file-panel-refresh" type="button" title="Refresh file tree"><i data-lucide="refresh-cw"></i></button>
+                <button id="file-panel-close" type="button" title="Close file browser"><i data-lucide="x"></i></button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="sidebar-panel-projects" class="sidebar-panel hidden">
+          <div id="project-list"></div>
+        </div>
+        <div id="sidebar-panel-sessions" class="sidebar-panel">
+          <div id="session-list"></div>
+        </div>
+        <div id="sidebar-panel-files" class="sidebar-panel hidden">
+          <div id="file-tree"></div>
+        </div>
+      </div>
+    </div>
+    <div id="sidebar-resize-handle"></div>
+    <div id="sidebar-overlay"></div>
+    <div id="main-column">
+      <div class="title-bar-content">
+        <div id="header-left">
+          <button id="sidebar-expand-btn" title="Open sidebar"><i data-lucide="panel-left-open"></i></button>
+          <button id="hamburger-btn" aria-label="Toggle sidebar"><i data-lucide="menu"></i></button>
+          <span class="header-title" id="header-title">Connecting...</span>
+          <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
+          <button id="header-rename-btn" type="button" title="Rename session"><i data-lucide="pencil"></i></button>
+        </div>
+        <div id="todo-sticky" class="hidden"></div>
+        <div class="status">
+          <button id="sticky-notes-toggle-btn" title="Sticky notes"><i data-lucide="notepad-text"></i><span class="sticky-notes-count hidden"></span></button>
+          <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
+        </div>
+      </div>
+      <div id="main-panels">
+      <div id="app">
+        <div id="update-banner" class="hidden">
+          <span class="update-banner-text"><i data-lucide="arrow-up-circle"></i> A new version of Clay is available: <strong id="update-version"></strong></span>
+          <button id="update-now">Update now</button>
+          <button id="update-how" title="Manual update instructions">?</button>
+          <button id="update-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
+        </div>
+        <div id="onboarding-banner" class="hidden">
+          <span class="onboarding-banner-text" id="onboarding-banner-text"></span>
+          <button id="onboarding-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
+        </div>
+        <div id="skip-perms-banner" class="hidden">
+          <i data-lucide="shield-off"></i>
+          <span>Skip permissions mode is active. All tool executions are auto-approved.</span>
+        </div>
+        <div id="connect-overlay">
+      <img class="connect-logo" src="favicon.svg" width="48" height="48" alt="Clay">
+      <span class="connect-wordmark">Clay</span>
+    </div>
+    <div id="sticky-notes-container" class="hidden"></div>
+    <div id="messages"></div>
+    <div id="info-panels">
+      <div id="usage-panel" class="hidden">
+        <div class="usage-panel-header">
+          <span>Usage</span>
+          <button id="usage-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+        </div>
+        <div class="usage-panel-body">
+          <a href="https://claude.ai/settings/usage" target="_blank" rel="noopener" class="usage-external-link">
+            <span>Check plan usage on claude.ai</span>
+            <i data-lucide="external-link"></i>
+          </a>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Session</div>
+          <div class="usage-row"><span class="usage-label">Cost</span><span id="usage-cost" class="usage-value">$0.0000</span></div>
+          <div class="usage-row"><span class="usage-label">Input tokens</span><span id="usage-input" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Output tokens</span><span id="usage-output" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache read</span><span id="usage-cache-read" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache write</span><span id="usage-cache-write" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Turns</span><span id="usage-turns" class="usage-value">0</span></div>
+        </div>
+      </div>
+      <div id="status-panel" class="hidden">
+        <div class="usage-panel-header">
+          <span>Status</span>
+          <button id="status-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+        </div>
+        <div class="usage-panel-body">
+          <div class="usage-section-label">Process</div>
+          <div class="usage-row"><span class="usage-label">PID</span><span id="status-pid" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Uptime</span><span id="status-uptime" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">RSS Memory</span><span id="status-rss" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Heap Used</span><span id="status-heap-used" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Heap Total</span><span id="status-heap-total" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">External</span><span id="status-external" class="usage-value">-</span></div>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Sessions</div>
+          <div class="usage-row"><span class="usage-label">Active</span><span id="status-sessions" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Processing</span><span id="status-processing" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Clients</span><span id="status-clients" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Terminals</span><span id="status-terminals" class="usage-value">-</span></div>
+        </div>
+      </div>
+      <div id="context-panel" class="hidden">
+        <div class="usage-panel-header">
+          <span>Context</span>
+          <div class="usage-panel-actions">
+            <button id="context-panel-minimize" aria-label="Minimize" title="Minimize to input"><i data-lucide="minus"></i></button>
+            <button id="context-panel-close" aria-label="Close"><i data-lucide="x"></i></button>
+          </div>
+        </div>
+        <div class="usage-panel-body">
+          <div class="usage-section-label">Context Window</div>
+          <div class="context-bar-wrap">
+            <div class="context-bar">
+              <div class="context-bar-fill" id="context-bar-fill"></div>
+            </div>
+            <span class="context-bar-pct" id="context-bar-pct">0%</span>
+          </div>
+          <div class="usage-row"><span class="usage-label">Used</span><span id="context-used" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Window</span><span id="context-window" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Max output</span><span id="context-max-output" class="usage-value">-</span></div>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Session Tokens</div>
+          <div class="usage-row"><span class="usage-label">Input</span><span id="context-input" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Output</span><span id="context-output" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache read</span><span id="context-cache-read" class="usage-value">0</span></div>
+          <div class="usage-row"><span class="usage-label">Cache write</span><span id="context-cache-write" class="usage-value">0</span></div>
+          <div class="usage-divider"></div>
+          <div class="usage-section-label">Model</div>
+          <div class="usage-row"><span class="usage-label">Name</span><span id="context-model" class="usage-value">-</span></div>
+          <div class="usage-row"><span class="usage-label">Cost</span><span id="context-cost" class="usage-value">$0.0000</span></div>
+          <div class="usage-row"><span class="usage-label">Turns</span><span id="context-turns" class="usage-value">0</span></div>
+        </div>
+      </div>
+    </div>
+    <button id="new-msg-btn" class="hidden" aria-label="Scroll to bottom"></button>
+    <div id="input-area">
+      <div id="input-wrapper">
+        <div id="slash-menu"></div>
+        <div id="suggestion-chips" class="hidden"></div>
+        <div id="input-row">
+          <div id="context-mini" class="hidden">
+            <div class="context-mini-bar">
+              <div class="context-mini-fill" id="context-mini-fill"></div>
+            </div>
+            <span class="context-mini-label" id="context-mini-label">0%</span>
+          </div>
+          <div id="image-preview-bar"></div>
+          <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send" dir="auto"></textarea>
+          <div id="input-bottom">
+            <div id="attach-wrap">
+              <button id="attach-btn" type="button" aria-label="Attach"><i data-lucide="plus"></i></button>
+              <div id="attach-menu" class="hidden">
+                <button class="attach-menu-item" id="attach-camera"><i data-lucide="camera"></i> <span>Take Photo</span></button>
+                <button class="attach-menu-item" id="attach-photos"><i data-lucide="image"></i> <span>Add Photos</span></button>
+              </div>
+            </div>
+            <div id="input-bottom-right">
+              <div id="config-chip-wrap" class="hidden">
+                <button id="config-chip" title="Model, mode, and effort settings">
+                  <span id="config-chip-label"></span>
+                  <i data-lucide="chevron-down"></i>
+                </button>
+                <div id="config-popover" class="hidden">
+                  <div class="config-section">
+                    <div class="config-section-label">MODEL</div>
+                    <div id="config-model-list" class="config-radio-list"></div>
+                  </div>
+                  <div class="config-section">
+                    <div class="config-section-label">MODE</div>
+                    <div id="config-mode-list" class="config-radio-list"></div>
+                  </div>
+                  <div id="config-effort-section" class="config-section">
+                    <div class="config-section-label">EFFORT</div>
+                    <div id="config-effort-bar" class="config-segmented"></div>
+                  </div>
+                  <div id="config-beta-section" class="config-section" style="display:none">
+                    <div class="config-section-label">BETA</div>
+                    <div class="config-toggle-row">
+                      <span class="config-toggle-label">1M Context</span>
+                      <button id="config-beta-1m" class="config-toggle-btn" role="switch" aria-checked="false">
+                        <span class="config-toggle-knob"></span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <button id="send-btn" disabled aria-label="Send"><i data-lucide="arrow-up"></i></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Mobile fullscreen sheet overlay (Projects / Sessions) -->
+  <div id="mobile-sheet" class="hidden">
+    <div class="mobile-sheet-backdrop"></div>
+    <div class="mobile-sheet-content">
+      <div class="mobile-sheet-handle"></div>
+      <div class="mobile-sheet-header">
+        <span class="mobile-sheet-title"></span>
+        <button class="mobile-sheet-close"><i data-lucide="x"></i></button>
+      </div>
+      <div class="mobile-sheet-list"></div>
+    </div>
+  </div>
+  <!-- Mobile bottom tab bar -->
+  <div id="mobile-tab-bar">
+    <button class="mobile-tab" data-tab="projects"><i data-lucide="folder-kanban"></i><span class="mobile-tab-label">Projects</span></button>
+    <button class="mobile-tab" data-tab="sessions"><i data-lucide="messages-square"></i><span class="mobile-tab-label">Sessions</span></button>
+    <button class="mobile-tab-new" id="mobile-new-session-btn"><i data-lucide="plus"></i></button>
+    <button class="mobile-tab" data-tab="files"><i data-lucide="folder-tree"></i><span class="mobile-tab-label">Files</span></button>
+    <button class="mobile-tab" data-tab="terminal"><i data-lucide="square-terminal"></i><span id="mobile-terminal-count" class="mobile-tab-badge hidden"></span><span class="mobile-tab-label">Terminal</span></button>
+  </div>
+  <div id="file-viewer" class="hidden">
+    <div class="file-viewer-header">
+      <span class="file-viewer-path" id="file-viewer-path"></span>
+      <button class="file-viewer-btn hidden" id="file-viewer-render" title="Toggle rendered view"><i data-lucide="book-open"></i></button>
+      <button class="file-viewer-btn hidden" id="file-viewer-pdf" title="Export PDF"><i data-lucide="file-down"></i></button>
+      <button class="file-viewer-btn hidden" id="file-viewer-history" title="Edit history"><i data-lucide="clock"></i></button>
+      <button class="file-viewer-btn" id="file-viewer-copy" title="Copy contents"><i data-lucide="copy"></i></button>
+      <button class="file-viewer-btn" id="file-viewer-fullscreen" title="Toggle fullscreen"><i data-lucide="maximize-2"></i></button>
+      <button class="file-viewer-btn" id="file-viewer-close" title="Close"><i data-lucide="x"></i></button>
+    </div>
+    <div class="file-viewer-body" id="file-viewer-body"></div>
+  </div>
+  <div id="terminal-container" class="hidden">
+    <div class="terminal-header">
+      <div id="terminal-tabs" class="terminal-tabs"></div>
+      <button class="terminal-new-tab-btn" id="terminal-new-tab" title="New tab"><i data-lucide="plus"></i></button>
+      <div class="terminal-header-actions">
+        <button class="file-viewer-btn" id="terminal-fullscreen" title="Toggle fullscreen"><i data-lucide="maximize-2"></i></button>
+        <button class="file-viewer-btn" id="terminal-close" title="Hide panel"><i data-lucide="minus"></i></button>
+      </div>
+    </div>
+    <div id="terminal-toolbar" class="hidden">
+      <button class="term-key" data-key="tab">Tab</button>
+      <button class="term-key term-key-toggle" data-key="ctrl">Ctrl</button>
+      <button class="term-key" data-key="esc">Esc</button>
+      <span class="term-key-spacer"></span>
+      <button class="term-key term-key-arrow" data-key="up">&#9650;</button>
+      <button class="term-key term-key-arrow" data-key="down">&#9660;</button>
+      <button class="term-key term-key-arrow" data-key="left">&#9664;</button>
+      <button class="term-key term-key-arrow" data-key="right">&#9654;</button>
+    </div>
+    <div id="terminal-body"></div>
+  </div>
+  </div><!-- /main-panels -->
+  </div><!-- /main-column -->
+  </div><!-- /main-area -->
+  <!-- === User Island === -->
+  <div id="user-island">
+    <div class="user-island-avatar"><span class="user-island-avatar-letter">C</span></div>
+    <div class="user-island-info">
+      <span class="user-island-name">Clay <span id="footer-version" class="footer-version"></span></span>
+    </div>
+    <div class="user-island-actions">
+      <a href="https://github.com/chadbyte/claude-relay" target="_blank" rel="noopener" class="user-island-chip" title="Star on GitHub"><svg class="chip-octocat" viewBox="0 0 16 16" fill="white" width="13" height="13"><path 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.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .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.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg><span class="chip-star">★</span><span class="chip-label">Star Clay</span></a>
+    </div>
+  </div>
+  </div><!-- /layout-body -->
+</div><!-- /layout -->
+<!-- QR / Share overlay -->
+<div id="qr-overlay" class="hidden">
+  <div id="qr-overlay-inner">
+    <div id="qr-canvas"></div>
+    <div id="qr-url"></div>
+  </div>
+</div>
+<!-- Hidden notification toggles (synced by server-settings) -->
+<div id="notif-menu-wrap" style="display:none">
+  <button id="notif-btn"></button>
+  <div id="notif-menu">
+    <label class="notif-option" id="notif-push-row">
+      <span>Push notifications</span>
+      <input type="checkbox" id="notif-toggle-push">
+      <span class="toggle-track"><span class="toggle-thumb"></span></span>
+    </label>
+    <label class="notif-option">
+      <span>Browser alerts</span>
+      <input type="checkbox" id="notif-toggle-alert">
+      <span class="toggle-track"><span class="toggle-thumb"></span></span>
+    </label>
+    <div id="notif-blocked-hint" class="hidden">Blocked by browser. <a href="#" id="notif-learn-more">Learn more</a></div>
+    <label class="notif-option">
+      <span>Sound</span>
+      <input type="checkbox" id="notif-toggle-sound">
+      <span class="toggle-track"><span class="toggle-thumb"></span></span>
+    </label>
+  </div>
+</div>
+<!-- === Server Settings (full-screen overlay) === -->
+<div id="server-settings" class="hidden">
+  <div class="server-settings-layout">
+    <div class="server-settings-nav">
+      <div class="server-settings-nav-inner">
+        <div class="server-settings-nav-header" id="settings-server-name"></div>
+        <div class="server-settings-nav-items">
+          <div class="settings-nav-category">General</div>
+          <button class="settings-nav-item active" data-section="overview"><span>Overview</span></button>
+          <button class="settings-nav-item" data-section="models"><span>Models</span></button>
+          <div class="settings-nav-separator"></div>
+          <div class="settings-nav-category">Configuration</div>
+          <button class="settings-nav-item" data-section="security"><span>Security</span></button>
+          <button class="settings-nav-item" data-section="notifications"><span>Notifications</span></button>
+          <button class="settings-nav-item" data-section="appearance"><span>Appearance</span></button>
+          <div class="settings-nav-separator"></div>
+          <div class="settings-nav-category">System</div>
+          <button class="settings-nav-item" data-section="advanced"><span>Advanced</span></button>
+          <div class="settings-nav-separator"></div>
+          <button class="settings-nav-item settings-nav-danger" data-section="shutdown"><span>Shutdown Server</span></button>
+        </div>
+      </div>
+    </div>
+    <div class="server-settings-content">
+      <div class="server-settings-content-inner">
+        <div class="server-settings-section active" data-section="overview">
+          <h2>Server Overview</h2>
+          <div class="settings-card">
+            <div class="settings-field">
+              <label class="settings-label">Project Name</label>
+              <div class="settings-value" id="settings-project-name">-</div>
+            </div>
+            <div class="settings-field">
+              <label class="settings-label">Working Directory</label>
+              <div class="settings-value settings-mono" id="settings-project-cwd">-</div>
+            </div>
+            <div class="settings-field">
+              <label class="settings-label">Server Version</label>
+              <div class="settings-value" id="settings-server-version">-</div>
+              <button class="settings-btn-sm settings-btn-update" id="settings-update-check"><i data-lucide="refresh-cw"></i> Check for updates</button>
+            </div>
+            <div class="settings-field-row">
+              <label class="settings-label">Port</label>
+              <span class="settings-value settings-mono" id="settings-port">-</span>
+            </div>
+            <div class="settings-field-row">
+              <label class="settings-label">HTTPS</label>
+              <span class="settings-value settings-badge" id="settings-tls">-</span>
+            </div>
+            <div class="settings-field-row">
+              <label class="settings-label">Debug Mode</label>
+              <span class="settings-value settings-badge" id="settings-debug">-</span>
+            </div>
+          </div>
+          <h3>Server Status</h3>
+          <div class="settings-card">
+            <div class="settings-field-row">
+              <label class="settings-label">PID</label>
+              <span class="settings-value settings-mono" id="settings-status-pid">-</span>
+            </div>
+            <div class="settings-field-row">
+              <label class="settings-label">Uptime</label>
+              <span class="settings-value" id="settings-status-uptime">-</span>
+            </div>
+            <div class="settings-field-row">
+              <label class="settings-label">Memory (RSS)</label>
+              <span class="settings-value" id="settings-status-rss">-</span>
+            </div>
+            <div class="settings-field-row">
+              <label class="settings-label">Active Sessions</label>
+              <span class="settings-value" id="settings-status-sessions">-</span>
+            </div>
+            <div class="settings-field-row">
+              <label class="settings-label">Connected Clients</label>
+              <span class="settings-value" id="settings-status-clients">-</span>
+            </div>
+          </div>
+        </div>
+        <div class="server-settings-section" data-section="models">
+          <h2>Models</h2>
+          <div class="settings-card">
+            <div class="settings-field">
+              <label class="settings-label">Current Model</label>
+              <div class="settings-value" id="settings-current-model">-</div>
+            </div>
+            <div class="settings-field">
+              <label class="settings-label">Available Models</label>
+              <div id="settings-model-list" class="settings-model-list"></div>
+            </div>
+          </div>
+        </div>
+        <div class="server-settings-section" data-section="security">
+          <h2>Security</h2>
+          <div class="settings-card">
+            <div class="settings-field-row">
+              <div>
+                <label class="settings-label">Skip Permissions</label>
+                <div class="settings-hint">When enabled, all tool executions are auto-approved without asking.</div>
+              </div>
+              <span class="settings-value settings-badge" id="settings-skip-perms">Disabled</span>
+            </div>
+          </div>
+          <h3>PIN Protection</h3>
+          <div class="settings-card">
+            <div class="settings-field-row">
+              <div>
+                <label class="settings-label">PIN Status</label>
+                <div class="settings-hint">Require a 6-digit PIN to access the web UI.</div>
+              </div>
+              <span class="settings-value settings-badge" id="settings-pin-status">-</span>
+            </div>
+            <div class="settings-field-row" id="settings-pin-actions">
+              <div>
+                <label class="settings-label" id="settings-pin-action-label">Set PIN</label>
+                <div class="settings-hint">Protect access to the web interface with a PIN code.</div>
+              </div>
+              <div class="settings-pin-btns">
+                <button class="settings-btn-sm" id="settings-pin-set-btn">Set PIN</button>
+                <button class="settings-btn-sm settings-btn-danger hidden" id="settings-pin-remove-btn">Remove</button>
+              </div>
+            </div>
+            <div class="settings-field hidden" id="settings-pin-form">
+              <label class="settings-label">Enter 6-digit PIN</label>
+              <div class="settings-pin-input-row">
+                <input type="text" id="settings-pin-input" maxlength="6" inputmode="numeric" pattern="[0-9]*" placeholder="000000" autocomplete="off" spellcheck="false">
+                <button class="settings-btn-sm" id="settings-pin-save-btn">Save</button>
+                <button class="settings-btn-sm settings-btn-ghost" id="settings-pin-cancel-btn">Cancel</button>
+              </div>
+              <div class="settings-hint settings-pin-error hidden" id="settings-pin-error">PIN must be exactly 6 digits.</div>
+            </div>
+          </div>
+        </div>
+        <div class="server-settings-section" data-section="notifications">
+          <h2>Notifications</h2>
+          <div class="settings-card">
+            <label class="settings-toggle-row">
+              <div>
+                <span class="settings-label">Push Notifications</span>
+                <div class="settings-hint">Receive push notifications when tasks complete.</div>
+              </div>
+              <input type="checkbox" id="settings-notif-push">
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+            </label>
+            <label class="settings-toggle-row">
+              <div>
+                <span class="settings-label">Browser Alerts</span>
+                <div class="settings-hint">Show browser notification alerts when tasks finish.</div>
+              </div>
+              <input type="checkbox" id="settings-notif-alert">
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+            </label>
+            <label class="settings-toggle-row">
+              <div>
+                <span class="settings-label">Sound</span>
+                <div class="settings-hint">Play a sound when tasks are completed.</div>
+              </div>
+              <input type="checkbox" id="settings-notif-sound">
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+            </label>
+          </div>
+        </div>
+        <div class="server-settings-section" data-section="appearance">
+          <h2>Appearance</h2>
+          <div class="settings-card">
+            <div class="settings-field">
+              <label class="settings-label">Skin</label>
+              <div class="settings-hint">Choose a color theme. Use the toggle in the title bar to switch between light and dark mode.</div>
+              <div id="settings-theme-picker-container"></div>
+            </div>
+            <div class="settings-field">
+              <label class="settings-label">Context Display</label>
+              <div class="settings-hint">How context window usage is displayed.</div>
+              <div class="settings-btn-group" id="settings-context-view">
+                <button class="settings-btn-option" data-view="off">Off</button>
+                <button class="settings-btn-option" data-view="mini">Mini</button>
+                <button class="settings-btn-option" data-view="panel">Panel</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="server-settings-section" data-section="advanced">
+          <h2>Advanced</h2>
+          <div class="settings-card">
+            <div class="settings-field">
+              <label class="settings-label">WebSocket Path</label>
+              <div class="settings-value settings-mono" id="settings-ws-path">-</div>
+            </div>
+            <div class="settings-field">
+              <label class="settings-label">Project Slug</label>
+              <div class="settings-value settings-mono" id="settings-project-slug">-</div>
+            </div>
+          </div>
+          <div class="settings-card hidden" id="settings-keep-awake-card">
+            <label class="settings-toggle-row">
+              <div>
+                <span class="settings-label">Keep Awake</span>
+                <div class="settings-hint">Prevent the system from sleeping while the server is running (macOS only).</div>
+              </div>
+              <input type="checkbox" id="settings-keep-awake">
+              <span class="toggle-track"><span class="toggle-thumb"></span></span>
+            </label>
+          </div>
+        </div>
+        <div class="server-settings-section" data-section="shutdown">
+          <h2>Shutdown Server</h2>
+          <div class="settings-danger-zone">
+            <div class="settings-danger-icon"><i data-lucide="alert-triangle"></i></div>
+            <div class="settings-danger-body">
+              <h3 class="settings-danger-title">Danger Zone</h3>
+              <p class="settings-danger-desc">Shutting down the server will terminate all active sessions, disconnect all clients, and stop the Clay daemon process. This action cannot be undone.</p>
+            </div>
+          </div>
+          <div class="settings-card settings-card-danger">
+            <div class="settings-field">
+              <label class="settings-label">Confirm Shutdown</label>
+              <div class="settings-hint">Type <strong>shutdown</strong> below to confirm.</div>
+              <div class="settings-shutdown-input-row">
+                <input type="text" id="settings-shutdown-input" placeholder="Type shutdown to confirm" autocomplete="off" spellcheck="false">
+                <button class="settings-btn-sm settings-btn-shutdown" id="settings-shutdown-btn" disabled>Shutdown</button>
+              </div>
+              <div class="settings-hint settings-shutdown-error hidden" id="settings-shutdown-error"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="server-settings-close-col">
+      <button id="server-settings-close" class="server-settings-close-btn">
+        <i data-lucide="x"></i>
+        <span>ESC</span>
+      </button>
+    </div>
+  </div>
+</div>
+<div id="paste-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog paste-modal-dialog">
+    <div class="paste-modal-header">
+      <span class="paste-modal-title">Pasted content</span>
+      <button class="paste-modal-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
+    </div>
+    <pre class="paste-modal-body" id="paste-modal-body"></pre>
+  </div>
+</div>
+<div id="image-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="image-modal-dialog">
+    <img id="image-modal-img" src="" alt="">
+    <button class="image-modal-close"><i data-lucide="x" style="width:18px;height:18px"></i></button>
+  </div>
+</div>
+<div id="mermaid-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="mermaid-modal-dialog">
+    <div class="mermaid-modal-header">
+      <span class="mermaid-modal-title">Diagram</span>
+      <div class="mermaid-modal-actions">
+        <button class="mermaid-modal-btn" id="mermaid-download-btn" title="Download PNG"><i data-lucide="download" style="width:16px;height:16px"></i></button>
+        <button class="mermaid-modal-btn" title="Close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
+      </div>
+    </div>
+    <div class="mermaid-modal-body" id="mermaid-modal-body"></div>
+  </div>
+</div>
+<div id="notif-help-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog" style="max-width: 380px;">
+    <div class="notif-help-title">Notifications blocked</div>
+    <div class="notif-help-body">
+      <p>Your browser has blocked notification permissions for this site. To re-enable:</p>
+      <ol>
+        <li>Open your browser's notification settings by pasting the address below</li>
+        <li>Find this site and change the permission to <strong>Allow</strong></li>
+        <li>Reload the page</li>
+      </ol>
+      <div class="notif-help-url">
+        <code id="notif-settings-url">chrome://settings/content/notifications</code>
+        <button id="notif-url-copy" class="popover-copy" title="Copy"><i data-lucide="copy"></i></button>
+      </div>
+    </div>
+    <div class="confirm-actions">
+      <button class="confirm-btn confirm-cancel" id="notif-help-close">Close</button>
+    </div>
+  </div>
+</div>
+<div id="resume-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog resume-picker-dialog">
+    <div class="resume-modal-title">Resume CLI session</div>
+    <div class="resume-picker-body">
+      <div id="resume-picker-loading" class="resume-picker-loading">
+        <div class="resume-picker-spinner"></div>
+        <span>Loading sessions...</span>
+      </div>
+      <div id="resume-picker-empty" class="resume-picker-empty hidden">
+        No CLI sessions found for this project.
+      </div>
+      <div id="resume-picker-list" class="resume-picker-list hidden"></div>
+    </div>
+    <div class="confirm-actions">
+      <button class="confirm-btn confirm-cancel" id="resume-cancel">Cancel</button>
+    </div>
+  </div>
+</div>
+<div id="rewind-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog">
+    <div class="rewind-modal-title">Rewind to this point?</div>
+    <div class="rewind-modal-body">
+      <p id="rewind-summary"></p>
+      <div id="rewind-mode-options">
+        <label><input type="radio" name="rewind-mode" value="both" checked> Conversation and files</label>
+        <label><input type="radio" name="rewind-mode" value="chat"> Conversation only</label>
+        <label><input type="radio" name="rewind-mode" value="files"> Files only</label>
+      </div>
+      <div id="rewind-files-list"></div>
+    </div>
+    <div class="confirm-actions">
+      <button class="confirm-btn confirm-cancel" id="rewind-cancel">Cancel</button>
+      <button class="confirm-btn confirm-ok" id="rewind-confirm">Rewind</button>
+    </div>
+  </div>
+</div>
+<div id="confirm-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog">
+    <div class="confirm-text" id="confirm-text"></div>
+    <div class="confirm-actions">
+      <button class="confirm-btn confirm-cancel" id="confirm-cancel">Cancel</button>
+      <button class="confirm-btn confirm-delete" id="confirm-ok">Delete</button>
+    </div>
+  </div>
+</div>
+<div id="add-project-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog add-project-dialog">
+    <div class="add-project-title">Add project</div>
+    <div class="add-project-body">
+      <div class="add-project-input-wrap">
+        <input type="text" id="add-project-input" placeholder="/" autocomplete="off" spellcheck="false">
+        <div id="add-project-suggestions" class="hidden"></div>
+      </div>
+      <div id="add-project-error" class="hidden"></div>
+    </div>
+    <div class="confirm-actions">
+      <button class="confirm-btn confirm-cancel" id="add-project-cancel">Cancel</button>
+      <button class="confirm-btn confirm-ok" id="add-project-ok">Add</button>
+    </div>
+  </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/marked@14/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lucide@0.468.0/dist/umd/lucide.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/lib/xterm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0/lib/addon-fit.min.js"></script>
+<script type="module" src="app.js"></script>
+</body>
+</html>