clay-server 2.13.0-beta.2 → 2.13.0-beta.4

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

@@ -8,47 +8,41 @@
   background: var(--sidebar-bg);
   display: flex;
   align-items: center;
-  justify-content: center;
   padding: calc(var(--safe-top) + 0px) 0 0;
   position: relative;
-}
-
-.top-bar-center {
-  display: flex;
-  align-items: center;
   gap: 8px;
 }
 
-.top-bar-title {
+/* --- Update banner --- */
+.top-bar-update {
+  position: absolute;
+  left: 10px;
+  top: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
-  gap: 5px;
-  font-family: "Nunito", sans-serif;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text-muted);
-  text-decoration: none;
-  -webkit-app-region: no-drag;
-  transition: color 0.15s;
-}
-
-.top-bar-title:hover {
-  color: var(--text);
 }
 
-.top-bar-icon {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  flex-shrink: 0;
-  opacity: 0.7;
-  vertical-align: -2px;
-  transition: opacity 0.15s;
+.top-bar-update-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--success) 12%, transparent);
+  color: var(--success);
+  border: none;
+  border-radius: 10px;
+  padding: 2px 10px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1;
+  transition: background 0.15s;
 }
 
-.top-bar-title:hover .top-bar-icon {
-  opacity: 1;
-}
+.top-bar-update-btn .lucide { width: 12px; height: 12px; }
+.top-bar-update-btn:hover { background: color-mix(in srgb, var(--success) 20%, transparent); }
 
 /* --- Top bar actions (right-aligned group) --- */
 .top-bar-actions {

package/lib/public/index.html

@@ -30,14 +30,12 @@
   <!-- === Top Bar (full width, forms reverse-ㄱ with icon strip) === -->
   <div id="top-bar">
     <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Install app"><i data-lucide="download"></i></button>
-    <div class="top-bar-center">
-      <a href="https://github.com/chadbyte/clay" target="_blank" rel="noopener" class="top-bar-title"><img class="top-bar-icon" src="favicon-banded.png" width="16" height="16" alt="">Clay <span id="footer-version" class="footer-version"></span></a>
-      <div id="update-pill-wrap" class="hidden">
-        <button id="update-pill" class="top-bar-pill pill-success"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span></button>
-        <div id="update-popover" class="top-bar-popover">
-          <div class="popover-row"><button id="update-now" class="popover-action popover-action-primary"><i data-lucide="download"></i> Update now</button></div>
-          <div class="popover-row"><div class="popover-label">Or run manually:</div><div class="popover-cmd"><code id="update-manual-cmd">npx clay-server@latest</code><button class="popover-copy" title="Copy"><i data-lucide="copy"></i></button></div></div>
-        </div>
+    <button id="cmd-palette-btn" class="cmd-palette-searchbar" title="Command palette"><i data-lucide="search"></i><span class="cmd-palette-searchbar-text">Search sessions, projects, and commands</span><kbd class="cmd-palette-searchbar-kbd"></kbd></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>
+      <div id="update-popover" class="top-bar-popover">
+        <div class="popover-row"><button id="update-now" class="popover-action popover-action-primary"><i data-lucide="download"></i> Update now</button></div>
+        <div class="popover-row"><div class="popover-label">Or run manually:</div><div class="popover-cmd"><code id="update-manual-cmd">npx clay-server@latest</code><button class="popover-copy" title="Copy"><i data-lucide="copy"></i></button></div></div>
       </div>
     </div>
     <div class="top-bar-actions">
@@ -141,6 +139,7 @@
           <i data-lucide="chevron-down" class="title-bar-chevron"></i>
         </button>
         <span id="sidebar-presence" class="sidebar-presence"></span>
+        <button id="sidebar-toggle-btn" class="sidebar-collapse-btn" title="Collapse sidebar"><i data-lucide="panel-left-close"></i></button>
       </div>
       <div id="sidebar">
         <div id="sidebar-tools">
@@ -1244,9 +1243,23 @@
       </div>
       <div class="ralph-step" data-step="2">
         <h3>What do you want to build?</h3>
-        <p class="ralph-hint">Write a rough idea &mdash; Clay will refine it into detailed instructions. You can review and edit everything before the loop starts.</p>
-        <label class="ralph-field-label" for="ralph-task">Task description <span class="ralph-field-req">*</span></label>
-        <textarea id="ralph-task" rows="5" placeholder="e.g. Add dark mode toggle to the settings page"></textarea>
+        <div class="ralph-mode-tabs">
+          <button class="ralph-mode-tab active" data-mode="draft">Let Clay draft it</button>
+          <button class="ralph-mode-tab" data-mode="own">I have my own</button>
+        </div>
+        <div class="ralph-mode-panel active" data-mode="draft">
+          <p class="ralph-hint">Write a rough idea, Clay will refine it into detailed instructions. You can review and edit everything before the loop starts.</p>
+          <label class="ralph-field-label" for="ralph-task">Task description <span class="ralph-field-req">*</span></label>
+          <textarea id="ralph-task" rows="5" placeholder="e.g. Add dark mode toggle to the settings page"></textarea>
+        </div>
+        <div class="ralph-mode-panel" data-mode="own">
+          <p class="ralph-hint">Paste your PROMPT.md content. JUDGE.md is optional; if omitted, Clay will generate it for you.</p>
+          <label class="ralph-field-label" for="ralph-prompt-input">PROMPT.md <span class="ralph-field-req">*</span></label>
+          <textarea id="ralph-prompt-input" rows="5" placeholder="Paste your PROMPT.md content here"></textarea>
+          <label class="ralph-field-label" for="ralph-judge-input" style="margin-top: 8px;">JUDGE.md <span class="ralph-field-opt">(optional)</span></label>
+          <p class="ralph-hint" style="margin-top: 2px; margin-bottom: 6px;">The judge reviews each iteration and decides pass/fail. Only needed for multi-iteration loops. For single-run tasks, you can skip this.</p>
+          <textarea id="ralph-judge-input" rows="4" placeholder="Paste your JUDGE.md content here (optional)"></textarea>
+        </div>
       </div>
       <input type="hidden" id="ralph-max-iterations" value="25">
     </div>
@@ -1294,8 +1307,23 @@
       <span class="mate-dot" data-step="4"></span>
     </div>
     <div class="mate-wizard-steps">
+      <!-- Step 0: Intro -->
+      <div class="mate-step active" data-step="0">
+        <div class="mate-intro">
+          <div class="mate-intro-icon">✨</div>
+          <h2 class="mate-intro-title">Meet your Mate.</h2>
+          <p class="mate-intro-tagline">AI agents are built for tasks. A Mate is built for you.</p>
+          <p class="mate-intro-body">Your Mate remembers what you've talked about, learns how you think, and grows with you over time. It's not just what it can do. It's what it learns about you.</p>
+          <div class="mate-intro-steps">
+            <div class="mate-intro-step"><span class="mate-intro-step-num">1</span> Pick a relationship type</div>
+            <div class="mate-intro-step"><span class="mate-intro-step-num">2</span> Have a short interview where your Mate gets to know you</div>
+            <div class="mate-intro-step"><span class="mate-intro-step-num">3</span> Start talking</div>
+          </div>
+          <p class="mate-intro-privacy">Mates run on Claude Code. No separate API keys or external services needed. Your conversations stay on your Clay server and are never stored elsewhere.</p>
+        </div>
+      </div>
       <!-- Step 1: Relationship -->
-      <div class="mate-step active" data-step="1">
+      <div class="mate-step" data-step="1">
         <h3>What kind of relationship?</h3>
         <p class="mate-hint">Pick the role that best fits what you need. You can refine this later in the interview.</p>
         <div class="mate-card-grid">
@@ -1611,7 +1639,14 @@
   <!-- Bottom bar -->
   <div class="sched-create-bottom">
     <div class="sched-create-bottom-left">
-      <label class="sched-create-iter-label" title="Number of code → judge cycles per run. Claude writes code, the judge reviews it, and repeats up to this many times."><i data-lucide="repeat" class="sched-create-iter-icon"></i> <input type="number" id="sched-create-iterations" min="1" max="100" value="3" class="sched-create-iter-input"> <span class="sched-create-iter-hint">rounds per run</span></label>
+      <div class="sched-create-run-mode">
+        <button type="button" class="sched-run-mode-btn active" data-mode="single" title="Run once without iteration"><i data-lucide="play"></i> Single run</button>
+        <button type="button" class="sched-run-mode-btn" data-mode="multi" title="Run multiple iterations with a judge reviewing each round"><i data-lucide="repeat"></i> Multi-round</button>
+        <label class="sched-create-iter-label hidden" id="sched-create-iter-group">
+          <input type="number" id="sched-create-iterations" min="2" max="100" value="3" class="sched-create-iter-input">
+          <span class="sched-create-iter-hint">rounds</span>
+        </label>
+      </div>
     </div>
     <div class="sched-create-bottom-right">
       <button class="sched-create-delete-btn hidden" id="sched-create-delete" title="Delete"><i data-lucide="trash-2"></i></button>

package/lib/public/modules/admin.js

@@ -134,6 +134,9 @@ function renderUsersTab(body) {
     html += '</div>';
     if (!isMe) {
       html += '<div style="display:flex;align-items:center;gap:2px">';
+      if (u.role !== "admin") {
+        html += '<button class="admin-remove-btn admin-perms-btn" data-user-id="' + u.id + '" title="Permissions">' + iconHtml("shield") + '</button>';
+      }
       html += '<button class="admin-remove-btn admin-reset-pin-btn" data-user-id="' + u.id + '" title="Reset PIN">' + iconHtml("key-round") + '</button>';
       if (u.role !== "admin") {
         html += '<button class="admin-remove-btn" data-user-id="' + u.id + '" title="Remove user">' + iconHtml("trash-2") + '</button>';
@@ -177,8 +180,19 @@ function renderUsersTab(body) {
     });
   }
 
+  // Bind permissions buttons
+  var permsBtns = body.querySelectorAll(".admin-perms-btn");
+  for (var p = 0; p < permsBtns.length; p++) {
+    permsBtns[p].addEventListener("click", function (e) {
+      e.stopPropagation();
+      var userId = this.dataset.userId;
+      var user = cachedUsers.find(function (u) { return u.id === userId; });
+      if (user) showPermissionsModal(user, body);
+    });
+  }
+
   // Bind remove buttons
-  var removeBtns = body.querySelectorAll(".admin-remove-btn:not(.admin-reset-pin-btn)");
+  var removeBtns = body.querySelectorAll(".admin-remove-btn:not(.admin-reset-pin-btn):not(.admin-perms-btn)");
   for (var k = 0; k < removeBtns.length; k++) {
     removeBtns[k].addEventListener("click", function () {
       var userId = this.dataset.userId;
@@ -191,6 +205,98 @@ function renderUsersTab(body) {
   }
 }
 
+var PERM_LABELS = [
+  { key: "terminal", label: "Terminal", desc: "Access the web terminal" },
+  { key: "fileBrowser", label: "File Browser", desc: "Browse and manage files" },
+  { key: "createProject", label: "Create Projects", desc: "Create or clone new projects" },
+  { key: "deleteProject", label: "Delete Projects", desc: "Remove projects" },
+  { key: "skills", label: "Skills", desc: "View and install skills" },
+  { key: "sessionDelete", label: "Delete Sessions", desc: "Delete chat sessions" },
+  { key: "scheduledTasks", label: "Scheduled Tasks", desc: "Create and manage scheduled tasks" },
+  { key: "projectSettings", label: "Project Settings", desc: "Access project settings" },
+];
+
+var DEFAULT_PERMISSIONS = {
+  terminal: false,
+  fileBrowser: false,
+  createProject: true,
+  deleteProject: false,
+  skills: true,
+  sessionDelete: false,
+  scheduledTasks: false,
+  projectSettings: false,
+};
+
+function showPermissionsModal(user, body) {
+  var perms = {};
+  var keys = PERM_LABELS.map(function (p) { return p.key; });
+  for (var i = 0; i < keys.length; i++) {
+    var k = keys[i];
+    perms[k] = (user.permissions && user.permissions[k] !== undefined) ? user.permissions[k] : DEFAULT_PERMISSIONS[k];
+  }
+
+  var modal = document.createElement("div");
+  modal.className = "admin-modal-overlay";
+  var html = '<div class="admin-modal">' +
+    '<div class="admin-modal-header">' +
+    '<h3>Permissions: ' + escapeHtml(user.displayName || user.username) + '</h3>' +
+    '<button class="admin-modal-close">&times;</button>' +
+    '</div>' +
+    '<div class="admin-modal-body">' +
+    '<div class="admin-perms-list">';
+
+  for (var j = 0; j < PERM_LABELS.length; j++) {
+    var p = PERM_LABELS[j];
+    var checked = perms[p.key] ? " checked" : "";
+    html += '<label class="admin-perm-row">' +
+      '<div class="admin-perm-info">' +
+      '<span class="admin-perm-label">' + p.label + '</span>' +
+      '<span class="admin-perm-desc">' + p.desc + '</span>' +
+      '</div>' +
+      '<input type="checkbox" class="admin-perm-toggle" data-perm="' + p.key + '"' + checked + '>' +
+      '</label>';
+  }
+
+  html += '</div></div>' +
+    '<div class="admin-modal-footer">' +
+    '<button class="admin-modal-save" id="admin-perms-save">Save</button>' +
+    '<button class="admin-modal-cancel">Cancel</button>' +
+    '</div></div>';
+
+  modal.innerHTML = html;
+  document.body.appendChild(modal);
+  refreshIcons(modal);
+
+  modal.querySelector(".admin-modal-close").addEventListener("click", function () { modal.remove(); });
+  modal.querySelector(".admin-modal-cancel").addEventListener("click", function () { modal.remove(); });
+  modal.addEventListener("click", function (e) { if (e.target === modal) modal.remove(); });
+
+  modal.querySelector("#admin-perms-save").addEventListener("click", function () {
+    var toggles = modal.querySelectorAll(".admin-perm-toggle");
+    var newPerms = {};
+    for (var t = 0; t < toggles.length; t++) {
+      newPerms[toggles[t].dataset.perm] = toggles[t].checked;
+    }
+    apiPut("/api/admin/users/" + user.id + "/permissions", { permissions: newPerms }).then(function (data) {
+      if (data.ok) {
+        showToast("Permissions updated");
+        modal.remove();
+        // Update cached user
+        for (var c = 0; c < cachedUsers.length; c++) {
+          if (cachedUsers[c].id === user.id) {
+            cachedUsers[c].permissions = data.permissions;
+            break;
+          }
+        }
+      } else {
+        showToast(data.error || "Failed to update permissions");
+      }
+    }).catch(function () {
+      showToast("Failed to update permissions");
+    });
+  });
+}
+
 function showAddUserModal(body) {
   var modal = document.createElement("div");
   modal.className = "admin-modal-overlay";
@@ -658,6 +764,8 @@ function renderSmtpTab(body, cfg) {
 // --- Projects ---
 function loadProjectsTab(body) {
   var projectList = (ctx && ctx.projectList) || [];
+  // Exclude worktree projects (they inherit parent settings)
+  projectList = projectList.filter(function (p) { return !p.isWorktree; });
   cachedProjects = projectList;
 
   if (projectList.length === 0) {