clay-server 5.2.0-beta.10 → 5.2.0-beta.11

package/lib/public/css/settings-shell.css

@@ -0,0 +1,103 @@
+/* Unified full-screen settings shell. Personal, Project and Server panes keep
+   their ids (so the shared settings-ui primitives still apply) and mount into
+   the shell content; their former modal chrome is neutralised here. */
+#settings-shell {
+  position: fixed; inset: 0; z-index: 600; display: flex; flex-direction: column;
+  background: var(--bg); color: var(--text);
+}
+#settings-shell.hidden { display: none; }
+#settings-shell [hidden], #settings-shell .hidden { display: none !important; }
+#settings-shell :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* --- Header: close and scope tabs --- */
+.settings-shell-header {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 48px;
+  padding: calc(var(--safe-top) + 6px) 16px 6px; border-bottom: 1px solid var(--border-subtle); background: var(--sidebar-bg);
+}
+.settings-shell-close {
+  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border: 1px solid var(--border);
+  border-radius: 8px; background: var(--bg); color: var(--text-secondary); font: inherit; font-size: 13px; cursor: pointer;
+}
+.settings-shell-close:hover { color: var(--text); border-color: var(--text-dimmer); }
+.settings-shell-close svg { width: 16px; height: 16px; }
+.settings-shell-close kbd { font: inherit; font-size: 11px; color: var(--text-dimmer); padding-left: 4px; }
+.settings-scope-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-alt); }
+.settings-scope-tab {
+  min-width: 76px; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none;
+  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
+}
+.settings-scope-tab:hover { color: var(--text); }
+.settings-scope-tab.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
+
+/* --- Body: navigation + content --- */
+.settings-shell-body { flex: 1 1 auto; min-height: 0; display: flex; }
+.settings-shell-nav { flex: 0 0 240px; width: 240px; overflow-y: auto; background: var(--sidebar-bg); border-right: 1px solid var(--border-subtle); }
+.settings-shell-nav-inner { padding: 20px 12px 32px 14px; }
+.settings-scope-head { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
+.settings-scope-head strong { font-size: 14px; color: var(--text); }
+.settings-scope-head small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.settings-scope-hint { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
+.settings-project-picker { padding: 0 4px 12px; }
+.settings-project-picker .settings-label { display: block; margin: 0 0 6px 6px; font-size: 12px; color: var(--text-muted); }
+.settings-project-picker .settings-picker { display: block; width: 100%; }
+.settings-project-picker .settings-picker-menu { right: auto; left: 0; width: 100%; max-width: none; }
+.settings-project-picker select { width: 100%; }
+.settings-shell-nav .settings-nav-item { min-height: 32px; padding: 6px 10px; font-size: 13px; }
+.settings-shell-nav .settings-nav-item.active { background: rgba(var(--overlay-rgb), .08); color: var(--text); }
+.settings-shell-nav .settings-nav-item:focus-visible { outline-offset: -2px; }
+.settings-shell-nav .settings-nav-dropdown { display: none; }
+.settings-shell-content { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 28px 40px calc(var(--safe-bottom) + 56px); }
+.settings-shell-status { max-width: 760px; margin: 0 0 16px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text-secondary); font-size: 13px; }
+.settings-shell-status[data-state="error"] { border-color: color-mix(in srgb, var(--error) 40%, var(--border)); color: var(--error); }
+
+/* --- Panes: neutralise the former modal/overlay chrome --- */
+#settings-shell .settings-pane { position: static; inset: auto; z-index: auto; display: block; width: 100%; max-width: 760px; margin: 0; padding: 0; background: none; backdrop-filter: none; animation: none; overflow: visible; }
+#settings-shell .settings-pane.hidden { display: none !important; }
+#user-settings .us-modal, #project-settings .ps-modal {
+  position: static; display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; overflow: visible;
+}
+#user-settings .us-modal-body, #project-settings .project-settings-layout { display: block; height: auto; overflow: visible; background: none; }
+#user-settings .us-modal-content, #project-settings .project-settings-content, #server-settings .server-settings-content {
+  max-width: none; padding: 0; background: none; overflow: visible;
+}
+#project-settings .project-settings-content-inner, #server-settings .server-settings-content-inner { padding: 0; }
+#server-settings .server-settings-layout { display: block; height: auto; background: none; }
+#server-settings .server-settings-layout::after { display: none; }
+#project-settings .ps-section h2, #user-settings .us-section h2, #server-settings .server-settings-section h2 { margin-top: 0; }
+#project-settings.ps-no-target .ps-section { display: none; }
+#project-settings .settings-empty { padding: 24px 0; }
+
+/* --- Inline subviews (admin editors, avatar crop): replace the page's list in place --- */
+.has-subview > :not(h2):not(.settings-subview) { display: none !important; }
+.admin-subview, .avatar-positioner-inline { display: block; position: static; padding: 0; background: none; }
+.admin-subview .admin-modal {
+  position: static; width: auto; max-width: 640px; max-height: none; margin: 0; border: 1px solid var(--border);
+  border-radius: 10px; background: var(--bg); box-shadow: none;
+}
+.admin-subview .admin-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
+.admin-subview .admin-modal-header h3 { margin: 0; font-size: 14px; }
+.admin-subview .admin-modal-body { padding: 14px 16px; overflow: visible; max-height: none; }
+.admin-subview .admin-modal-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
+.avatar-positioner-inline .avatar-positioner-container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 360px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); box-shadow: none; }
+
+/* --- Narrow screens: tabs in the header, page select replaces the nav list --- */
+@media (max-width: 800px) {
+  .settings-shell-header { padding-left: 10px; padding-right: 10px; gap: 8px; }
+  .settings-shell-close span, .settings-shell-close kbd { display: none; }
+  .settings-shell-close { width: 32px; padding: 0; justify-content: center; }
+  .settings-scope-tabs { flex: 1 1 auto; min-width: 0; }
+  .settings-scope-tab { flex: 1 1 0; min-width: 0; padding: 0 6px; }
+  .settings-shell-body { flex-direction: column; }
+  .settings-shell-nav { flex: 0 0 auto; width: 100%; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
+  .settings-shell-nav-inner { padding: 10px 12px; display: grid; gap: 8px; }
+  .settings-scope-head { display: none; }
+  .settings-project-picker { padding: 0; }
+  .settings-project-picker .settings-picker { display: none; }
+  .settings-project-picker select { height: 36px; }
+  .settings-shell-nav-items { display: none; }
+  .settings-shell-nav .settings-nav-dropdown { display: block; width: 100%; height: 36px; margin: 0; }
+  .settings-shell-content { padding: 18px 14px calc(var(--safe-bottom) + 40px); }
+}
+@media (prefers-reduced-motion: reduce) {
+  #settings-shell * { transition: none !important; animation: none !important; }
+}

package/lib/public/css/sidebar.css

@@ -1392,6 +1392,13 @@ body:not(.home-active) #icon-strip-hint-mate { display: none; }
 .user-island-profile:active { transform: translateY(1px); }
 .user-island-profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
+.user-island-quick-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
 .cursor-share-toggle {
   position: relative;
   width: var(--account-rail-cursor-target, 28px);

package/lib/public/css/title-bar.css

@@ -906,3 +906,82 @@
   .rate-limit-popover { font-size: 11px; padding: 6px 10px; }
   .header-context { width: 50px; }
 }
+
+/* --- GitHub Star link (desktop only, beside the brand) --- */
+.top-bar-star {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.top-bar-star-pill {
+  display: inline-flex;
+  align-items: stretch;
+  height: 20px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  background: rgba(var(--overlay-rgb), 0.03);
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  text-decoration: none;
+  overflow: hidden;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.top-bar-star-pill:hover {
+  background: rgba(var(--overlay-rgb), 0.08);
+  border-color: var(--border);
+  color: var(--text-secondary);
+}
+
+.top-bar-star-pill:active { transform: translateY(1px); }
+
+.top-bar-star-pill:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.top-bar-star-mark {
+  align-self: center;
+  width: 12px;
+  height: 12px;
+  margin: 0 4px 0 6px;
+  fill: currentColor;
+}
+
+.top-bar-star-label { padding-right: 6px; }
+
+.top-bar-star-count {
+  padding: 0 6px;
+  border-left: 1px solid var(--border-subtle);
+  font-variant-numeric: tabular-nums;
+}
+
+.top-bar-star-count.hidden { display: none; }
+
+@media (max-width: 790px) {
+  .top-bar-star-long { display: none; }
+}
+
+/* The CTA yields to functional controls sharing the left group: the install
+   pill shortens the label first (and takes the pill when space is tight); a
+   visible update notice takes the whole CTA. */
+.top-bar-left-pills:has(.top-bar-install-btn:not(.hidden)) .top-bar-star-long { display: none; }
+.top-bar-left-pills:has(#update-pill-wrap:not(.hidden)) .top-bar-star { display: none; }
+
+@media (max-width: 1100px) {
+  .top-bar-left-pills:has(.top-bar-install-btn:not(.hidden)) .top-bar-star { display: none; }
+}
+
+@media (max-width: 768px) {
+  .top-bar-star { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .top-bar-star-pill { transition: none; }
+  .top-bar-star-pill:active { transform: none; }
+}

package/lib/public/index.html

@@ -60,6 +60,9 @@ body { background: transparent; color: inherit; }
   <div id="top-bar">
     <div class="top-bar-left-pills">
       <a class="top-bar-brand-link" href="https://github.com/chadbyte/clay" target="_blank" rel="noopener noreferrer" aria-label="Clay Studio repository"><span class="top-bar-brand-wordmark" aria-hidden="true"></span></a>
+      <div class="top-bar-star" id="github-star">
+        <a class="top-bar-star-pill" id="github-star-link" href="https://github.com/chadbyte/clay" target="_blank" rel="noopener noreferrer" aria-label="Star Clay on GitHub"><svg class="top-bar-star-mark" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><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="top-bar-star-label">Star<span class="top-bar-star-long"> on GitHub</span></span><span class="top-bar-star-count hidden" id="github-star-count"></span></a>
+      </div>
       <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Open as app"><i data-lucide="download"></i> Open as app</button>
       <div id="update-pill-wrap" class="top-bar-update hidden">
         <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
@@ -74,9 +77,8 @@ body { background: transparent; color: inherit; }
       <!-- Pill badges -->
       <div id="skip-perms-pill" class="top-bar-pill pill-error hidden"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>
       <div id="client-count" class="top-bar-pill pill-accent hidden"><i data-lucide="users"></i> <span id="client-count-text"></span></div>
-      <button id="share-pill" title="Share"><i data-lucide="share-2"></i></button>
       <button id="notif-center-btn" title="Notifications"><i data-lucide="bell"></i><span id="notif-center-badge" class="notif-badge hidden">0</span></button>
-      <button id="server-settings-btn" title="Server settings"><i data-lucide="settings"></i></button>
+      <button id="server-settings-btn" title="Settings" aria-label="Settings" aria-expanded="false"><i data-lucide="settings"></i></button>
     </div>
   </div>
 
@@ -657,13 +659,10 @@ body { background: transparent; color: inherit; }
     </div>
   </div>
   <div id="project-settings" class="hidden">
-    <div class="ps-modal" role="dialog" aria-modal="true" aria-labelledby="ps-modal-title">
-      <header class="ps-modal-header"><div><h2 id="ps-modal-title">Project settings</h2><span id="ps-nav-title"></span></div><button class="settings-btn-sm" id="project-settings-close" aria-label="Close project settings"><i data-lucide="x"></i></button></header>
+    <div class="ps-modal">
       <div class="project-settings-layout">
-        <nav class="project-settings-nav" aria-label="Project settings">
-          <div class="project-settings-nav-inner"><select id="ps-nav-dropdown" class="settings-nav-dropdown" aria-label="Settings page"></select><div class="server-settings-nav-items"></div></div>
-        </nav>
         <div class="project-settings-content"><div class="project-settings-content-inner">
+          <div class="settings-empty" id="ps-empty" hidden><h2 tabindex="-1">No project selected</h2><p id="ps-empty-text" class="settings-hint"></p></div>
           <section class="ps-section active" data-section="profile">
             <h2>General</h2><p class="ps-section-desc">Identify this project in your workspace.</p>
             <div class="ps-project-identity">
@@ -680,8 +679,8 @@ body { background: transparent; color: inherit; }
               <div class="settings-field" id="ps-session-visibility-default-field" style="display:none">
                 <label class="settings-label" for="ps-session-visibility-default">New session visibility</label>
                 <div class="settings-hint">Applies to new project conversations and Issue Start work sessions. Existing sessions, hidden work, and delegated workflows keep their current visibility.</div>
+                <div class="settings-hint hidden" id="ps-session-visibility-default-owner-hint">Only the project owner can change this setting. Administrators can view it here but cannot change it.</div>
                 <div class="settings-hint hidden" id="ps-session-visibility-default-inherited-hint">This worktree inherits the setting from its parent project. Change it there.</div>
-                <div class="settings-hint hidden" id="ps-session-visibility-default-non-current-hint">Open this project to change this setting.</div>
                 <select class="ps-select" id="ps-session-visibility-default">
                   <option value="private">Private</option>
                   <option value="shared">Shared with project members</option>
@@ -737,11 +736,16 @@ body { background: transparent; color: inherit; }
         <span class="user-island-cta hidden">Personalize your name</span>
       </div>
     </button>
-    <button id="cursor-share-toggle" class="cursor-share-toggle" type="button" aria-pressed="false" aria-label="Cursor sharing unavailable" disabled>
-      <i data-lucide="mouse-pointer-2" class="cursor-share-icon" aria-hidden="true"></i>
-    </button>
+    <div class="user-island-quick-controls">
+      <button id="cursor-share-toggle" class="cursor-share-toggle" type="button" aria-pressed="false" aria-label="Cursor sharing unavailable" disabled>
+        <i data-lucide="mouse-pointer-2" class="cursor-share-icon" aria-hidden="true"></i>
+      </button>
+      <button id="appearance-mode-toggle" class="cursor-share-toggle" type="button" aria-label="Switch to light mode" title="Switch to light mode">
+        <i data-lucide="sun" class="cursor-share-icon" aria-hidden="true"></i>
+      </button>
+    </div>
     <div class="user-island-actions">
-      <button id="user-settings-btn" title="User settings"><i data-lucide="settings"></i></button>
+      <button id="user-settings-btn" title="Personal settings" aria-label="Personal settings" aria-expanded="false"><i data-lucide="settings"></i></button>
     </div>
   </div>
 
@@ -780,19 +784,31 @@ body { background: transparent; color: inherit; }
   </div>
 </div>
 
-<!-- === User Settings (modal dialog) === -->
+<!-- === Unified settings shell (full screen): Personal, Project and Server panes mount into it === -->
+<div id="settings-shell" class="hidden" role="region" aria-label="Settings">
+  <header class="settings-shell-header">
+    <button type="button" id="settings-shell-close" class="settings-shell-close" aria-label="Close settings"><i data-lucide="arrow-left" aria-hidden="true"></i><span>Back</span><kbd>Esc</kbd></button>
+    <div class="settings-scope-tabs" id="settings-scope-tabs" role="group" aria-label="Settings scope"></div>
+  </header>
+  <div class="settings-shell-body">
+    <nav class="settings-shell-nav" aria-label="Settings navigation">
+      <div class="settings-shell-nav-inner">
+        <div class="settings-scope-head"><strong id="settings-scope-title">Settings</strong><small id="settings-server-name" hidden></small><span id="settings-scope-hint" class="settings-scope-hint"></span></div>
+        <div class="settings-project-picker" id="settings-project-picker" hidden><label class="settings-label" for="settings-project-select">Project</label><select id="settings-project-select" class="ps-select" aria-label="Project"></select></div>
+        <select id="settings-page-select" class="settings-nav-dropdown" aria-label="Settings page"></select>
+        <div class="settings-shell-nav-items" id="settings-page-nav"></div>
+      </div>
+    </nav>
+    <main class="settings-shell-content" id="settings-shell-content">
+      <p id="settings-shell-status" class="settings-shell-status" role="status" hidden></p>
+    </main>
+  </div>
+</div>
+
+<!-- === Personal settings pane === -->
 <div id="user-settings" class="hidden">
-  <div class="confirm-backdrop" id="user-settings-backdrop"></div>
   <div class="us-modal">
-    <div class="us-modal-header">
-      <span class="us-modal-title">User Settings</span>
-      <button class="us-modal-close" id="user-settings-close" title="Close"><i data-lucide="x"></i></button>
-    </div>
     <div class="us-modal-body">
-      <nav class="us-modal-nav">
-        <select id="user-settings-nav-dropdown" class="settings-nav-dropdown"></select>
-        <div class="us-modal-nav-items"></div>
-      </nav>
       <div class="us-modal-content">
 
         <div class="us-section" data-section="us-notifications">
@@ -1031,16 +1047,8 @@ body { background: transparent; color: inherit; }
 </div>
 
 <!-- === Server Settings (full-screen overlay) === -->
-<div id="server-settings" class="hidden" role="dialog" aria-modal="true" aria-label="Server settings">
+<div id="server-settings" class="hidden">
   <div class="server-settings-layout">
-    <nav class="server-settings-nav" aria-label="Server settings pages">
-      <div class="server-settings-nav-inner">
-        <div class="server-settings-nav-header">Server settings<small id="settings-server-name"></small></div>
-        <select id="settings-nav-dropdown" class="settings-nav-dropdown" aria-label="Settings page"></select>
-        <div class="server-settings-nav-items" id="settings-page-nav"></div>
-        <button class="settings-nav-item" id="settings-personal-link">Personal notifications ↗</button>
-      </div>
-    </nav>
     <div class="server-settings-content"><div class="server-settings-content-inner">
       <p id="settings-access-status" role="status">Checking administrator access…</p>
 <div class="server-settings-section active" data-section="overview">
@@ -1248,7 +1256,7 @@ body { background: transparent; color: inherit; }
               <div class="settings-hint settings-restart-error hidden" id="settings-restart-error" style="margin-top: 8px;"></div>
             </div>
           </div>
-        </div><section class="settings-operation settings-danger-operation"><div class="settings-danger-entry"><div class="settings-danger-entry-copy"><h3>Danger zone</h3><p>Shut down Clay for everyone. Active work stops; restarting requires access to the host.</p></div><button type="button" class="settings-btn-sm settings-btn-danger" id="settings-shutdown-review" aria-expanded="false" aria-controls="settings-shutdown-flow"><i data-lucide="power" aria-hidden="true"></i>Review shutdown…</button></div><div id="settings-shutdown-flow" hidden role="group" aria-labelledby="settings-shutdown-title"><h4 id="settings-shutdown-title">Shut down server</h4><p class="settings-hint">Stops Clay, interrupts active work and disconnects everyone. You will need shell or service-manager access to start it again.</p><label class="settings-label" for="settings-shutdown-input">Type shutdown to continue</label><div class="settings-shutdown-input-row"><input type="text" id="settings-shutdown-input" autocomplete="off" spellcheck="false"><button class="settings-btn-sm settings-btn-danger" id="settings-shutdown-btn" disabled>Shut down…</button></div><p id="settings-shutdown-error" class="settings-hint hidden" role="status"></p><button type="button" class="settings-btn-sm" id="settings-shutdown-back">Back</button></div></section></div></div></div><div class="server-settings-close-col"><button id="server-settings-close" class="server-settings-close-btn" aria-label="Close server settings"><i data-lucide="x"></i><span>ESC</span></button></div></div></div>
+        </div><section class="settings-operation settings-danger-operation"><div class="settings-danger-entry"><div class="settings-danger-entry-copy"><h3>Danger zone</h3><p>Shut down Clay for everyone. Active work stops; restarting requires access to the host.</p></div><button type="button" class="settings-btn-sm settings-btn-danger" id="settings-shutdown-review" aria-expanded="false" aria-controls="settings-shutdown-flow"><i data-lucide="power" aria-hidden="true"></i>Review shutdown…</button></div><div id="settings-shutdown-flow" hidden role="group" aria-labelledby="settings-shutdown-title"><h4 id="settings-shutdown-title">Shut down server</h4><p class="settings-hint">Stops Clay, interrupts active work and disconnects everyone. You will need shell or service-manager access to start it again.</p><label class="settings-label" for="settings-shutdown-input">Type shutdown to continue</label><div class="settings-shutdown-input-row"><input type="text" id="settings-shutdown-input" autocomplete="off" spellcheck="false"><button class="settings-btn-sm settings-btn-danger" id="settings-shutdown-btn" disabled>Shut down…</button></div><p id="settings-shutdown-error" class="settings-hint hidden" role="status"></p><button type="button" class="settings-btn-sm" id="settings-shutdown-back">Back</button></div></section></div></div></div></div></div>
 
 <div id="paste-modal" class="hidden" role="dialog" aria-modal="true" aria-labelledby="paste-modal-title">
   <div class="confirm-backdrop"></div>
@@ -1358,37 +1366,16 @@ body { background: transparent; color: inherit; }
   </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 id="add-project-removed" class="hidden"></div>
-    <div class="add-project-modes">
-      <button class="add-project-mode-btn active" data-mode="existing">Existing directory</button>
-      <button class="add-project-mode-btn" data-mode="create">New project</button>
-      <button class="add-project-mode-btn" data-mode="clone">Clone from GitHub</button>
-    </div>
-    <div class="add-project-body">
-      <div class="add-project-panel active" data-panel="existing">
-        <div class="add-project-input-wrap">
-          <span id="add-project-prefix" class="add-project-prefix hidden"></span>
-          <input type="text" id="add-project-input" placeholder="/" autocomplete="off" spellcheck="false">
-          <div id="add-project-suggestions" class="hidden"></div>
-        </div>
-      </div>
-      <div class="add-project-panel" data-panel="create">
-        <input type="text" id="add-project-create-input" placeholder="Project name" autocomplete="off" spellcheck="false">
-      </div>
-      <div class="add-project-panel" data-panel="clone">
-        <input type="text" id="add-project-clone-input" placeholder="https://github.com/user/repo" autocomplete="off" spellcheck="false">
-        <div id="add-project-clone-progress" class="hidden"><span class="clone-spinner"></span><span id="add-project-clone-text">Cloning...</span></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 id="project-start-modal" class="hidden">
+  <div class="project-start-backdrop"></div>
+  <div class="project-start-dialog" role="dialog" aria-modal="true" aria-labelledby="project-start-title" aria-describedby="project-start-subtitle" tabindex="-1">
+    <header class="project-start-header">
+      <button type="button" class="project-start-icon-btn" id="project-start-back" aria-label="Back to choices" hidden><i data-lucide="arrow-left"></i></button>
+      <h2 id="project-start-title">Start a project</h2>
+      <button type="button" class="project-start-icon-btn" id="project-start-close" aria-label="Close"><i data-lucide="x"></i></button>
+    </header>
+    <p class="project-start-subtitle" id="project-start-subtitle">Start something new, or pick up where you left off.</p>
+    <div class="project-start-body" id="project-start-body"></div>
   </div>
 </div>
 

package/lib/public/modules/admin-settings-invitations.js

@@ -1,7 +1,7 @@
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { showToast, copyToClipboard, escapeHtml } from './utils.js';
-import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal } from './admin-settings-ui.js';
+import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal, mountAdminSubview } from './admin-settings-ui.js';
 // --- Invites ---
 export function loadInvitesTab(body) {
   apiGet("/api/admin/invites").then(function (data) {
@@ -138,7 +138,7 @@ function showEmailInvitePrompt(body) {
     '<button class="admin-modal-cancel">Cancel</button>' +
     '</div></div>';
   modal.innerHTML = html;
-  document.body.appendChild(modal);
+  mountAdminSubview(modal);
   prepareAdminModal(modal);
   refreshIcons(modal);
 

package/lib/public/modules/admin-settings-projects.js

@@ -1,7 +1,7 @@
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { showToast, copyToClipboard, escapeHtml } from './utils.js';
-import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal } from './admin-settings-ui.js';
+import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal, mountAdminSubview } from './admin-settings-ui.js';
 // --- Projects ---
 export function loadProjectsTab(body) {
   var projectList = store.get('projectsHubList') || [];
@@ -168,7 +168,7 @@ function showProjectUsersModal(slug, parentBody) {
     html += '</div>';
 
     modal.innerHTML = html;
-    document.body.appendChild(modal);
+    mountAdminSubview(modal);
   prepareAdminModal(modal);
     refreshIcons(modal);
 

package/lib/public/modules/admin-settings-ui.js

@@ -14,13 +14,29 @@ export function apiPost(url, body) { return request(url, 'POST', body || {}); }
 export function apiPut(url, body) { return request(url, 'PUT', body); }
 export function apiDelete(url) { return request(url, 'DELETE'); }
 
+// Editors open inline in the active Server settings page (a subview with its
+// own Back/Cancel path) instead of over the page. Only destructive
+// confirmations remain overlay dialogs.
+export function mountAdminSubview(modal) {
+  var host = document.querySelector('#server-settings .server-settings-section.active');
+  if (!host) { document.body.appendChild(modal); return; }
+  modal.className = 'admin-subview settings-subview';
+  host.classList.add('has-subview');
+  host.appendChild(modal);
+  var observer = new MutationObserver(function () {
+    if (!host.querySelector('.settings-subview')) { host.classList.remove('has-subview'); observer.disconnect(); }
+  });
+  observer.observe(host, { childList: true });
+}
+
 export function prepareAdminModal(modal) {
   if (modal.dataset.prepared) return;
   modal.dataset.prepared = 'true';
   var previous = document.activeElement;
-  var restore = isolateSettingsDialog(modal);
+  var inline = modal.classList.contains('settings-subview');
+  var restore = inline ? function () {} : isolateSettingsDialog(modal);
   var dialog = modal.querySelector('.admin-modal');
-  dialog.setAttribute('role', 'dialog'); dialog.setAttribute('aria-modal', 'true');
+  dialog.setAttribute('role', inline ? 'region' : 'dialog'); if (!inline) dialog.setAttribute('aria-modal', 'true');
   var title = dialog.querySelector('h3'); dialog.setAttribute('aria-label', title ? title.textContent : 'Confirm action');
   var dirty = false;
   modal.addEventListener('input', function () { dirty = true; });
@@ -37,7 +53,7 @@ export function prepareAdminModal(modal) {
   modal.addEventListener('keydown', function (event) {
     event.stopPropagation();
     if (event.key === 'Escape') { event.preventDefault(); if (dirty) cancel(event); else modal.remove(); }
-    trapSettingsFocus(event, modal);
+    if (!inline) trapSettingsFocus(event, modal);
   });
   modal.querySelectorAll('.admin-smtp-row').forEach(function (row) {
     var label = row.querySelector('label'); var input = row.querySelector('input, select');
@@ -49,7 +65,7 @@ export function prepareAdminModal(modal) {
   var closeObserver = new MutationObserver(function () {
     if (!modal.isConnected) { closeObserver.disconnect(); restore(); if (previous && previous.isConnected) previous.focus(); }
   });
-  closeObserver.observe(document.body, { childList: true });
+  closeObserver.observe(inline ? modal.parentElement : document.body, { childList: true });
   var focus = modal.querySelector('input:not([type=hidden]), .admin-modal-cancel, button');
   if (focus) focus.focus();
 }

package/lib/public/modules/admin-settings-users.js

@@ -1,7 +1,7 @@
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { showToast, copyToClipboard, escapeHtml } from './utils.js';
-import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal } from './admin-settings-ui.js';
+import { apiGet, apiPost, apiPut, apiDelete, showConfirmDialog, showConfirmResetPin, prepareAdminModal, mountAdminSubview } from './admin-settings-ui.js';
 // --- Users ---
 export function loadUsersTab(body) {
   apiGet("/api/admin/users").then(function (data) {
@@ -163,7 +163,7 @@ function showPermissionsModal(user, body) {
     '</div></div>';
 
   modal.innerHTML = html;
-  document.body.appendChild(modal);
+  mountAdminSubview(modal);
   prepareAdminModal(modal);
   refreshIcons(modal);
 
@@ -222,7 +222,7 @@ function showAddUserModal(body) {
     '<button class="admin-modal-cancel">Cancel</button>' +
     '</div></div>';
   modal.innerHTML = html;
-  document.body.appendChild(modal);
+  mountAdminSubview(modal);
   prepareAdminModal(modal);
   refreshIcons(modal);
 
@@ -299,7 +299,7 @@ function showTempPinModal(user, tempPin) {
     '<button class="admin-modal-cancel">Close</button>' +
     '</div></div>';
   modal.innerHTML = html;
-  document.body.appendChild(modal);
+  mountAdminSubview(modal);
   prepareAdminModal(modal);
   refreshIcons(modal);
 

package/lib/public/modules/app-home-hub.js

@@ -3,7 +3,8 @@
 import { showProjectsHub, hideProjectsHub } from './projects-hub.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { getCachedProjects, openAddProjectModal, switchProject } from './app-projects.js';
+import { getCachedProjects, switchProject } from './app-projects.js';
+import { openAddProjectModal } from './project-start-dialog.js';
 import { chooseProjectActivationTarget, homeProjectCreationState } from './project-activation.js';
 import { mateAvatarUrl } from './avatar.js';
 import { exitDmMode } from './app-dm.js';

package/lib/public/modules/app-messages.js

@@ -65,7 +65,7 @@ import { showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundE
 import { handleFsList, handleFsRead, handleFileChanged, handleDirChanged, handleFileHistory, handleGitDiff, handleFileAt, refreshIfOpen, getPendingNavigate, handleFsSearch, presentMarkdownEdit } from './filebrowser.js';
 import { beginMarkdownTurn, finishMarkdownTurn, markdownPathFromToolInput } from './markdown-live-edit.js';
 import { forwardPaneMarkdownPresentation } from './pane-bridge.js';
-import { handleProjectOwnerChanged } from './project-settings.js';
+import { handleProjectOwnerChanged, handleProjectSettingsEditResult } from './project-settings.js';
 import { handleProjectEnv, handleProjectEnvSaved } from './project-settings-environment.js';
 import { handleProjectSessionVisibilityDefault, refreshProjectSessionVisibilitySettings } from './project-session-visibility-settings.js';
 import { updateSettingsStats, updateDaemonConfig, handleSetPinResult, handleKeepAwakeChanged, handleAutoContinueChanged, handleRestartResult, handleShutdownResult, handleSharedEnv, handleSharedEnvSaved, handleServerSettingResult } from './server-settings.js';
@@ -100,13 +100,15 @@ import { markProjectSessionListHydrated, applyProjectSplitGroups, clearProjectSp
 import { selectDefaultVendorForBlankSession } from './vendor-selection.js';
 import { getModelInfoUpdate, modelEntryValue, modelEntryMatches, handleModelSelectionResult, requestVendorModels } from './model-picker.js';
 import { getModelEffortLevels, accumulateUsage, updateUsagePanel, accumulateContext, updateContextPanel, renderCtxPopover, updateStatusPanel, markContextUnavailable } from './app-panels.js';
-import { updateProjectList, resetClientState, showUpdateAvailable, handleRemoveProjectCheckResult, handleRemoveProjectResult, handleBrowseDirResult, handleAddProjectResult, handleCloneProgress, finishProjectSessionActivation } from './app-projects.js';
+import { updateProjectList, resetClientState, showUpdateAvailable, handleRemoveProjectCheckResult, handleRemoveProjectResult, finishProjectSessionActivation } from './app-projects.js';
+import { handleBrowseDirResult, handleAddProjectResult, handleCloneProgress } from './project-start-dialog.js';
 import { updateHistorySentinel, prependOlderHistory } from './app-header.js';
 import { handleToolsState, handleToolInstalled, handleToolRemoved, handleToolStorageResult, handleToolLlmResult, handleToolsError, handleToolControlRequest, handleToolServerState, handleToolServerEvent, handleCapsuleGameSession } from './home-tools.js';
 import { handleHomeDockState } from './home-dock.js';
 import { handleToolFrameUrlState } from './home-tool-frame.js';
 import { enterDmMode, exitDmMode, handleMateCreatedInApp, updateMateIconStatus, appendDmMessage, showDmTypingIndicator, buildMateInterviewPrompt } from './app-dm.js';
 import { handleRateLimitEvent, updateRateLimitUsage, handleFastModeState } from './app-rate-limit.js';
+import { handleVendorUsageOverview } from './vendor-usage-overview.js';
 import { handleRemoteCursorMove, handleRemoteCursorLeave, handleRemoteSelection, clearRemoteCursors } from './app-cursors.js';
 import { showLoopBanner, updateLoopBanner, updateLoopInputVisibility, showRalphApprovalBar, updateRalphApprovalStatus, openRalphPreviewModal, showExecModal, updateExecModalStatus } from './app-loop-ui.js';
 import { handleAutonomousRunMessage, syncAutonomousRunForSession } from './autonomous-run.js';
@@ -1615,6 +1617,10 @@ export function processMessage(msg) {
         updateRateLimitUsage(msg);
         break;
 
+      case "vendor_usage_overview":
+        handleVendorUsageOverview(msg);
+        break;
+
       case "auto_continue_scheduled":
         // Scheduler auto-continue, just show info
         break;
@@ -1922,12 +1928,14 @@ export function processMessage(msg) {
         break;
 
       case "set_project_title_result":
+        handleProjectSettingsEditResult(msg);
         if (!msg.ok) {
           showToast(msg.error || "Failed to rename project", "error");
         }
         break;
 
       case "set_project_icon_result":
+        handleProjectSettingsEditResult(msg);
         if (!msg.ok) {
           showToast(msg.error || "Failed to set icon", "error");
         }