clementine-agent 1.18.64 → 1.18.65

package/README.md

@@ -54,6 +54,7 @@ After setup:
 clementine launch         # start as background daemon
 clementine status         # verify it's running
 clementine dashboard      # open the web command center
+clementine desktop install # optional macOS desktop app
 ```
 
 Already installed? Update in place with `clementine update`.
@@ -198,6 +199,7 @@ clementine status                    PID, uptime, active channels
 clementine update [--dry-run]        Pull latest, rebuild, reinstall (preserves config)
 clementine doctor [--fix]            Verify (and optionally repair) config and vault
 clementine dashboard                 Open the web command center (localhost:3030)
+clementine desktop install           Download/open the macOS desktop app installer
 clementine tools                     List available MCP tools, plugins, and channels
 ```
 

package/dist/cli/dashboard.js

@@ -7215,6 +7215,7 @@ If the tool returns nothing or errors, return an empty array \`[]\`.`,
             slug: p.slug,
             name: p.name,
             description: p.description,
+            avatar: p.avatar ?? null,
         }));
         const activeSlug = gw.getSessionProfile('dashboard:web') ?? null;
         res.json({ profiles, active: activeSlug });
@@ -12230,22 +12231,137 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
   .home-chat-panel-header {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 12px 14px;
+    gap: 6px;
+    padding: 10px 12px;
     border-bottom: 1px solid var(--border);
     font-size: var(--text-base);
     font-weight: 600;
     background: var(--bg-secondary);
+    position: relative; /* anchor for .chat-agent-popover */
   }
   .home-chat-panel-header .icn { width: 16px; height: 16px; color: var(--clementine); }
-  .home-chat-panel-header select {
-    padding: 4px 8px;
-    font-size: var(--text-xs);
+
+  /* Active-agent header button — replaces the bare <select>.
+     Closed: avatar + name + role tagline + caret. Click opens popover. */
+  .chat-agent-btn {
+    display: flex; align-items: center; gap: 10px;
+    flex: 1; min-width: 0;
+    padding: 6px 8px;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--text-primary);
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+    transition: background var(--motion-fast), border-color var(--motion-fast);
+  }
+  .chat-agent-btn:hover { background: var(--bg-hover); border-color: var(--border); }
+  .chat-agent-btn[aria-expanded="true"] { background: var(--bg-hover); border-color: var(--border); }
+  .chat-agent-btn-avatar {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--clementine), #ff6b00);
+    background-size: cover;
+    background-position: center;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; font-weight: 700; color: #fff;
+    flex-shrink: 0;
+  }
+  .chat-agent-btn-avatar.hired {
+    background: var(--bg-input);
+    color: var(--text-primary);
+  }
+  .chat-agent-btn-avatar.has-image { color: transparent; } /* hide initial when image present */
+  .chat-agent-btn-text {
+    display: flex; flex-direction: column;
+    flex: 1; min-width: 0;
+    gap: 1px;
+  }
+  .chat-agent-btn-name {
+    font-size: var(--text-base);
+    font-weight: 600;
+    line-height: 1.2;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .chat-agent-btn-role {
+    font-size: 11px;
+    color: var(--text-muted);
+    line-height: 1.2;
+    font-weight: 400;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .chat-agent-btn-caret {
+    width: 14px; height: 14px;
+    color: var(--text-muted);
+    transition: transform var(--motion-fast);
+    flex-shrink: 0;
+  }
+  .chat-agent-btn[aria-expanded="true"] .chat-agent-btn-caret { transform: rotate(180deg); }
+
+  /* Popover — list of agents anchored under the header button */
+  .chat-agent-popover {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 8px; right: 8px;
+    z-index: 250;
+    background: var(--bg-secondary);
     border: 1px solid var(--border);
-    border-radius: var(--radius-xs);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    max-height: 320px; overflow-y: auto;
+    padding: 6px;
+    animation: msgFadeIn 0.18s ease;
+  }
+  .chat-agent-row {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 10px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background var(--motion-fast);
+    position: relative;
+  }
+  .chat-agent-row:hover { background: var(--bg-hover); }
+  .chat-agent-row.active { background: var(--bg-hover); }
+  .chat-agent-row.active::before {
+    content: '';
+    position: absolute; left: 2px; top: 8px; bottom: 8px;
+    width: 3px; background: var(--clementine);
+    border-radius: 2px;
+  }
+  .chat-agent-row-avatar {
+    width: 28px; height: 28px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--clementine), #ff6b00);
+    background-size: cover;
+    background-position: center;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 11px; font-weight: 700; color: #fff;
+    flex-shrink: 0;
+  }
+  .chat-agent-row-avatar.hired {
     background: var(--bg-input);
     color: var(--text-primary);
   }
+  .chat-agent-row-avatar.has-image { color: transparent; }
+  .chat-agent-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+  .chat-agent-row-name {
+    font-size: 13px; font-weight: 600;
+    color: var(--text-primary);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .chat-agent-row-desc {
+    font-size: 11px; color: var(--text-muted);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .chat-agent-row-status {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    flex-shrink: 0;
+  }
+  .chat-agent-row-status.online { background: var(--green); }
+
   .home-chat-panel-messages {
     flex: 1;
     overflow-y: auto;
@@ -12258,9 +12374,9 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     padding: 10px 12px;
     border-top: 1px solid var(--border);
     background: var(--bg-secondary);
-    align-items: center;
+    align-items: flex-end;
   }
-  .home-chat-panel-input-row input[type="text"] {
+  .home-chat-panel-input-row textarea {
     flex: 1;
     padding: 8px 12px;
     border: 1px solid var(--border);
@@ -12269,9 +12385,18 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     color: var(--text-primary);
     font-size: var(--text-base);
     font-family: inherit;
+    resize: none;
+    line-height: 1.4;
+    max-height: 110px;
+    overflow-y: auto;
   }
   .home-chat-panel-input-row .btn-icon { padding: 6px; }
   .home-chat-panel-input-row .icn { width: 14px; height: 14px; }
+  /* Send button busy state — toggle send/spinner instead of swapping text */
+  #chat-send-btn .icon-spinner { display: none; }
+  #chat-send-btn.is-busy .icon-send { display: none; }
+  #chat-send-btn.is-busy .icon-spinner { display: inline-block; animation: btnSpin 0.8s linear infinite; }
+  @keyframes btnSpin { to { transform: rotate(360deg); } }
 
   @media (max-width: 600px) {
     .home-chat-panel {
@@ -14649,6 +14774,8 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     height: 28px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--clementine), #ff6b00);
+    background-size: cover;
+    background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -14658,6 +14785,11 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     flex-shrink: 0;
     margin-top: 2px;
   }
+  .chat-avatar-sm.hired {
+    background: var(--bg-input);
+    color: var(--text-primary);
+  }
+  .chat-avatar-sm.has-image { color: transparent; } /* hide initial when image present */
   /* Build page is full-height flex (canvas + chat). Home page handles its own layout. */
   #page-build.active {
     display: flex !important;
@@ -18404,28 +18536,26 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
     </button>
     <div id="home-chat-panel" class="home-chat-panel" aria-hidden="true">
       <div class="home-chat-panel-header">
-        <span><span class="icon-slot" data-icon="messageSquare"></span> Chat</span>
-        <span style="flex:1"></span>
-        <select id="chat-profile-select" onchange="switchProfile(this.value)" title="Active profile">
-          <option value="">Default</option>
-        </select>
-        <button class="btn-icon btn-sm" onclick="toggleHomeChat()" title="Close chat">×</button>
-      </div>
-      <div id="chat-messages" class="home-chat-panel-messages">
-        <div class="empty-state" style="margin-top:24px">
-          <p style="margin-bottom:12px;color:var(--text-muted);font-size:var(--text-base)">What can I help with?</p>
-          <div style="display:flex;flex-wrap:wrap;gap:6px;justify-content:center">
-            <button class="btn btn-sm quick-pill" onclick="quickChat(&quot;What&apos;s on my schedule?&quot;)">Schedule?</button>
-            <button class="btn btn-sm quick-pill" onclick="quickChat('Check my email')">Email</button>
-            <button class="btn btn-sm quick-pill" onclick="quickChat('Run morning briefing')">Briefing</button>
-            <button class="btn btn-sm quick-pill" onclick="quickChat('What did you do today?')">Today's work</button>
-          </div>
-        </div>
+        <button id="chat-agent-btn" class="chat-agent-btn" onclick="toggleAgentPicker(event)" aria-haspopup="listbox" aria-expanded="false" title="Switch agent">
+          <span class="chat-agent-btn-avatar" id="chat-agent-btn-avatar">C</span>
+          <span class="chat-agent-btn-text">
+            <span class="chat-agent-btn-name" id="chat-agent-btn-name">Clementine</span>
+            <span class="chat-agent-btn-role" id="chat-agent-btn-role">Personal AI Assistant</span>
+          </span>
+          <span class="chat-agent-btn-caret icon-slot" data-icon="chevronDown"></span>
+        </button>
+        <button class="btn-icon btn-sm" onclick="toggleHomeChat()" title="Close chat" style="margin-left:8px">×</button>
+        <div id="chat-agent-popover" class="chat-agent-popover" role="listbox" hidden></div>
       </div>
+      <div id="chat-messages" class="home-chat-panel-messages"></div>
       <div class="home-chat-panel-input-row">
-        <input type="text" id="chat-input" placeholder="Ask anything..." onkeydown="if(event.key==='Enter'&amp;&amp;!event.shiftKey){event.preventDefault();sendChat()}">
-        <button class="btn-primary btn-sm" id="chat-send-btn" onclick="sendChat()" title="Send">
-          <span class="icon-slot" data-icon="send"></span>
+        <textarea id="chat-input" rows="1"
+                  placeholder="Message Clementine…"
+                  onkeydown="onChatKeyDown(event)"
+                  oninput="onChatInputChange(this)"></textarea>
+        <button class="btn-primary btn-sm" id="chat-send-btn" onclick="sendChat()" title="Send" disabled>
+          <span class="icon-slot icon-send" data-icon="send"></span>
+          <span class="icon-slot icon-spinner" data-icon="loader" hidden></span>
         </button>
       </div>
     </div>
@@ -19587,7 +19717,12 @@ async function ensureTeamAgentCache(force) {
     if (Array.isArray(agents)) {
       for (var i = 0; i < agents.length; i++) {
         var a = agents[i];
-        if (a && a.slug) next[a.slug] = { slug: a.slug, name: a.name || a.slug, avatar: a.avatar || null };
+        if (a && a.slug) next[a.slug] = {
+          slug: a.slug,
+          name: a.name || a.slug,
+          avatar: a.avatar || null,
+          description: a.description || '',
+        };
       }
     }
     __teamAgentsByslug = next;
@@ -19601,18 +19736,55 @@ async function ensureTeamAgentCache(force) {
  *   getAssistantIdentity()                    → active chat profile (or Clementine)
  *   getAssistantIdentity(slugFromSseEvent)    → that specific agent
  *
- * Returns { slug, name, initial }. Always safe — falls back to
- * Clementine when nothing matches. Initial is uppercase first char,
- * suitable for a .chat-avatar-sm bubble.
+ * Returns { slug, name, initial, avatar, description }. Always safe —
+ * falls back to Clementine when nothing matches. Initial is uppercase
+ * first char, suitable for a .chat-avatar-sm bubble. Avatar is a URL
+ * or null; the bubble renderer applies it as background-image when set.
  */
 function getAssistantIdentity(explicitSlug) {
   var slug = explicitSlug || currentAgentSlug || '';
   if (slug && slug !== 'clementine' && __teamAgentsByslug[slug]) {
     var a = __teamAgentsByslug[slug];
-    return { slug: a.slug, name: a.name, initial: (a.name || 'A').charAt(0).toUpperCase() };
+    return {
+      slug: a.slug,
+      name: a.name,
+      initial: (a.name || 'A').charAt(0).toUpperCase(),
+      avatar: a.avatar || null,
+      description: a.description || '',
+      primary: false,
+    };
   }
   var clemName = (lastStatusData && lastStatusData.name) ? lastStatusData.name : 'Clementine';
-  return { slug: 'clementine', name: clemName, initial: clemName.charAt(0).toUpperCase() };
+  return {
+    slug: 'clementine',
+    name: clemName,
+    initial: clemName.charAt(0).toUpperCase(),
+    avatar: null,
+    description: 'Personal AI Assistant',
+    primary: true,
+  };
+}
+
+/**
+ * Build the empty-state markup for the active (or specified) agent.
+ * Used both at first load and after pickAgent clears the panel — so
+ * a switch always lands on a clean, identity-aware slate instead of
+ * "Session cleared." or a hardcoded "What can I help with?".
+ */
+function renderEmptyStateFor(slug) {
+  var id = getAssistantIdentity(slug || null);
+  var greet = id.primary
+    ? 'What can I help with?'
+    : 'Chat with ' + id.name + (id.description ? ' — ' + id.description : '');
+  return '<div class="empty-state" style="margin-top:24px">'
+    + '<p style="margin-bottom:12px;color:var(--text-muted);font-size:var(--text-base)">' + esc(greet) + '</p>'
+    + '<div style="display:flex;flex-wrap:wrap;gap:6px;justify-content:center">'
+      + '<button class="btn btn-sm quick-pill" onclick="quickChat(\\'What\\\\\\'s on my schedule?\\')">Schedule?</button>'
+      + '<button class="btn btn-sm quick-pill" onclick="quickChat(\\'Check my email\\')">Email</button>'
+      + '<button class="btn btn-sm quick-pill" onclick="quickChat(\\'Run morning briefing\\')">Briefing</button>'
+      + '<button class="btn btn-sm quick-pill" onclick="quickChat(\\'What did you do today?\\')">Today\\'s work</button>'
+    + '</div>'
+  + '</div>';
 }
 
 // ── Routing ────────────────────────────────────────────────────
@@ -24361,10 +24533,33 @@ document.getElementById('log-filter').addEventListener('input', applyLogFilter);
 
 // ── Chat ──────────────────────────────────
 function quickChat(msg) {
-  document.getElementById('chat-input').value = msg;
+  var el = document.getElementById('chat-input');
+  el.value = msg;
+  onChatInputChange(el); // resize + enable send button
   sendChat();
 }
 
+// Enter sends; Shift+Enter inserts a newline. Cmd/Ctrl+Enter also sends
+// for muscle-memory parity with builder chats.
+function onChatKeyDown(e) {
+  if (e.key === 'Enter') {
+    if (e.shiftKey) return;       // newline
+    e.preventDefault();
+    sendChat();
+  }
+}
+
+// Autosize the chat textarea up to ~5 rows; toggle send-button enabled
+// state. Called from oninput on the composer + after quickChat sets a value.
+function onChatInputChange(el) {
+  if (!el) return;
+  el.style.height = 'auto';
+  var max = 110; // ~5 rows at 22px line-height
+  el.style.height = Math.min(el.scrollHeight, max) + 'px';
+  var btn = document.getElementById('chat-send-btn');
+  if (btn) btn.disabled = !el.value.trim() || btn.classList.contains('is-busy');
+}
+
 function renderMd(text) {
   let s = esc(text);
   var BT = String.fromCharCode(96);
@@ -24416,22 +24611,26 @@ async function sendChat() {
   container.appendChild(typing);
   container.scrollTop = container.scrollHeight;
 
-  // Disable input while processing
+  // Swap send button into busy state — keeps the icon, shows a spinner
+  // (no more "Thinking..." text). The .is-busy class is the source of
+  // truth; CSS handles the icon swap.
   const sendBtn = document.getElementById('chat-send-btn');
   input.disabled = true;
   sendBtn.disabled = true;
-  sendBtn.textContent = 'Thinking...';
+  sendBtn.classList.add('is-busy');
 
 	  try {
 	    // Identity follows the active chat profile so a hired agent's
-	    // reply renders with their initial — same as Discord/Slack.
+	    // reply renders with their initial (or avatar URL when set) —
+	    // same as Discord/Slack.
 	    await ensureTeamAgentCache();
 	    var asstIdentity = getAssistantIdentity();
 	    var asstRow = document.createElement('div');
 	    asstRow.className = 'chat-assistant-row';
 	    var chatAv = document.createElement('div');
-	    chatAv.className = 'chat-avatar-sm';
+	    chatAv.className = 'chat-avatar-sm' + (asstIdentity.primary ? '' : ' hired') + (asstIdentity.avatar ? ' has-image' : '');
 	    chatAv.title = asstIdentity.name;
+	    if (asstIdentity.avatar) chatAv.style.backgroundImage = "url('" + asstIdentity.avatar + "')";
 	    chatAv.innerHTML = asstIdentity.initial;
 	    asstRow.appendChild(chatAv);
 	    var asstBubble = document.createElement('div');
@@ -24522,8 +24721,12 @@ async function sendChat() {
   }
 
   input.disabled = false;
-  sendBtn.disabled = false;
-  sendBtn.textContent = 'Send';
+  sendBtn.classList.remove('is-busy');
+  // Re-enable only if there's content to send (or stay disabled — the
+  // user clears the textarea by sending, so it's empty here).
+  sendBtn.disabled = !input.value.trim();
+  // Reset the textarea autosize back to single-row.
+  if (typeof onChatInputChange === 'function') onChatInputChange(input);
   input.focus();
   container.scrollTop = container.scrollHeight;
 }
@@ -24952,37 +25155,138 @@ async function deleteChunk(id) {
   } catch (e) { toast('Delete failed: ' + String(e), 'error'); }
 }
 
-// ── Profile Switching ─────────────────────
-async function loadProfiles() {
-  try {
-    var r = await apiFetch('/api/profiles');
-    var d = await r.json();
-    var sel = document.getElementById('chat-profile-select');
-    sel.innerHTML = '<option value="">Default</option>';
-    var customCount = 0;
-    for (var p of (d.profiles || [])) {
-      var opt = document.createElement('option');
-      opt.value = p.slug;
-      opt.textContent = p.name + (p.description ? ' — ' + p.description : '');
-      if (p.slug === d.active) opt.selected = true;
-      sel.appendChild(opt);
-      customCount++;
+// ── Profile Switching — chat agent picker (header button + popover) ─────
+//
+// Replaces the legacy <select> with a richer header affordance:
+//   • closed: avatar + name + role tagline of the active agent
+//   • open: avatar-row list of Clementine + every hired agent, with
+//     status dots and descriptions
+//
+// Source of truth for "active profile" stays the gateway's session
+// profile map (set via /api/profiles/switch). The picker just makes
+// it visible and one-click switchable.
+
+var _agentPickerOpen = false;
+var _chatAgentRows = [];
+
+async function refreshChatAgentPicker() {
+  await ensureTeamAgentCache();
+  var rProf;
+  try { rProf = await apiFetch('/api/profiles'); } catch { rProf = { ok: false }; }
+  var d = (rProf && rProf.ok) ? await rProf.json() : { profiles: [], active: null };
+
+  var clemName = (lastStatusData && lastStatusData.name) ? lastStatusData.name : 'Clementine';
+  var clemRole = 'Personal AI Assistant';
+  var clemOnline = !!(lastStatusData && lastStatusData.alive);
+  var rows = [{ slug: '', name: clemName, role: clemRole, avatar: null, online: clemOnline, primary: true }];
+  for (var i = 0; i < (d.profiles || []).length; i++) {
+    var p = d.profiles[i];
+    var cached = __teamAgentsByslug[p.slug] || {};
+    rows.push({
+      slug: p.slug,
+      name: p.name || p.slug,
+      role: p.description || '',
+      avatar: p.avatar || cached.avatar || null,
+      online: cached.botStatus === 'online' || cached.status === 'active',
+      primary: false,
+    });
+  }
+  _chatAgentRows = rows;
+  var activeSlug = d.active || '';
+  currentAgentSlug = activeSlug || null;
+
+  // Header button — always visible identity affordance
+  var btnAvatar = document.getElementById('chat-agent-btn-avatar');
+  var btnName = document.getElementById('chat-agent-btn-name');
+  var btnRole = document.getElementById('chat-agent-btn-role');
+  var active = null;
+  for (var j = 0; j < rows.length; j++) { if (rows[j].slug === activeSlug) { active = rows[j]; break; } }
+  if (!active) active = rows[0];
+  if (btnAvatar) applyAgentAvatar(btnAvatar, active);
+  if (btnName) btnName.textContent = active.name;
+  if (btnRole) btnRole.textContent = active.role || (active.primary ? clemRole : '');
+
+  // Popover rows
+  var pop = document.getElementById('chat-agent-popover');
+  if (pop) {
+    var html = '';
+    for (var k = 0; k < rows.length; k++) {
+      var r = rows[k];
+      var isActive = r.slug === activeSlug;
+      var avatarStyle = r.avatar ? (' style="background-image:url(\\''+ esc(r.avatar) +'\\')"') : '';
+      var avatarClasses = 'chat-agent-row-avatar' + (r.primary ? '' : ' hired') + (r.avatar ? ' has-image' : '');
+      var initial = esc((r.name || '?').charAt(0).toUpperCase());
+      html += '<div class="chat-agent-row' + (isActive ? ' active' : '') + '" role="option" aria-selected="' + (isActive ? 'true' : 'false') + '" onclick="pickAgent(\\''+ esc(r.slug) +'\\')">'
+        + '<span class="' + avatarClasses + '"' + avatarStyle + '>' + initial + '</span>'
+        + '<span class="chat-agent-row-text">'
+          + '<span class="chat-agent-row-name">' + esc(r.name) + '</span>'
+          + (r.role ? '<span class="chat-agent-row-desc">' + esc(r.role) + '</span>' : '')
+        + '</span>'
+        + '<span class="chat-agent-row-status ' + (r.online ? 'online' : 'offline') + '" title="' + (r.online ? 'Online' : 'Offline') + '"></span>'
+        + '</div>';
     }
-    // Hide the picker entirely if there are no custom profiles — declutters the chat input row.
-    sel.style.display = customCount === 0 ? 'none' : '';
-  } catch(e) { /* profiles are optional */ }
+    pop.innerHTML = html;
+  }
+
+  // Update input placeholder to match the active agent
+  var input = document.getElementById('chat-input');
+  if (input) input.placeholder = 'Message ' + active.name + '…';
+}
+
+function applyAgentAvatar(el, identity) {
+  if (!el) return;
+  // Wipe + recompute classes so we can swap between Clementine/hired
+  // and toggle has-image on each refresh without leftover state.
+  var base = el.classList.contains('chat-agent-row-avatar') ? 'chat-agent-row-avatar' : 'chat-agent-btn-avatar';
+  el.className = base + (identity.primary ? '' : ' hired') + (identity.avatar ? ' has-image' : '');
+  if (identity.avatar) {
+    el.style.backgroundImage = "url('" + identity.avatar + "')";
+  } else {
+    el.style.backgroundImage = '';
+  }
+  el.textContent = (identity.name || '?').charAt(0).toUpperCase();
+}
+
+function toggleAgentPicker(e) {
+  if (e && e.stopPropagation) e.stopPropagation();
+  var btn = document.getElementById('chat-agent-btn');
+  var pop = document.getElementById('chat-agent-popover');
+  _agentPickerOpen = !_agentPickerOpen;
+  if (btn) btn.setAttribute('aria-expanded', _agentPickerOpen ? 'true' : 'false');
+  if (pop) pop.hidden = !_agentPickerOpen;
 }
 
-async function switchProfile(slug) {
+async function pickAgent(slug) {
+  toggleAgentPicker();
+  if ((slug || '') === (currentAgentSlug || '')) return;
   try {
     await apiJson('POST', '/api/profiles/switch', { slug: slug || null });
-    // Clear chat display since session was reset
+    currentAgentSlug = slug || null;
+    // Server-side session was cleared. Mirror that visually with the
+    // new agent's empty state — replaces the bare "Session cleared." line.
     var container = document.getElementById('chat-messages');
-    container.innerHTML = '<div class="empty-state"><p style="margin-bottom:14px;color:var(--text-muted)">Profile switched' + (slug ? ' to <strong>' + esc(slug) + '</strong>' : '') + '. Session cleared.</p></div>';
-    toast(slug ? 'Switched to ' + slug : 'Profile cleared', 'success');
-  } catch(e) { toast('Failed to switch profile: ' + e, 'error'); }
+    if (container) container.innerHTML = renderEmptyStateFor(currentAgentSlug);
+    await refreshChatAgentPicker();
+    var picked = _chatAgentRows.find ? _chatAgentRows.find(function(r){ return r.slug === (slug || ''); }) : null;
+    toast(slug ? ('Now chatting with ' + (picked ? picked.name : slug)) : 'Switched to Clementine', 'success');
+  } catch (e) {
+    toast('Failed to switch agent: ' + e, 'error');
+  }
 }
 
+// Click-outside closes the popover
+document.addEventListener('click', function(e) {
+  if (!_agentPickerOpen) return;
+  var btn = document.getElementById('chat-agent-btn');
+  var pop = document.getElementById('chat-agent-popover');
+  if (!btn || !pop) return;
+  if (btn.contains(e.target) || pop.contains(e.target)) return;
+  toggleAgentPicker();
+});
+
+// Back-compat shim — older call sites still reference loadProfiles().
+function loadProfiles() { return refreshChatAgentPicker(); }
+
 // ── Skill Studio — opens builder in skill-focused mode ──────────
 
 function openSkillStudio() {
@@ -28553,7 +28857,14 @@ function toggleHomeChat(forceOpen) {
       var input = document.getElementById('chat-input');
       if (input) input.focus();
     }, 80);
-    if (typeof loadProfiles === 'function') loadProfiles();
+    // Refresh the agent picker (replaces the legacy loadProfiles()).
+    // Also populate the empty state for the active agent if the panel
+    // is still empty — first-open path.
+    if (typeof refreshChatAgentPicker === 'function') refreshChatAgentPicker();
+    var container = document.getElementById('chat-messages');
+    if (container && !container.children.length) {
+      container.innerHTML = renderEmptyStateFor(currentAgentSlug);
+    }
   }
 }
 
@@ -32517,17 +32828,19 @@ try {
           // Lazy-refresh the cache if the SSE event names a slug we
           // haven't seen yet (e.g. an agent hired since page load).
           if (deepSlug && !__teamAgentsByslug[deepSlug]) { ensureTeamAgentCache(true); }
-          var deepIdentity = deepName
-            ? { slug: deepSlug, name: deepName, initial: deepName.charAt(0).toUpperCase() }
-            : getAssistantIdentity(deepSlug);
+          var deepIdentity = getAssistantIdentity(deepSlug);
+          // Server-side payload may carry a fresher name than our cache.
+          if (deepName) deepIdentity.name = deepName;
+          if (deepName) deepIdentity.initial = deepName.charAt(0).toUpperCase();
           if (container && text) {
             var emptyState = container.querySelector('.empty-state');
             if (emptyState) emptyState.remove();
             var row = document.createElement('div');
             row.className = 'chat-assistant-row';
             var av = document.createElement('div');
-            av.className = 'chat-avatar-sm';
+            av.className = 'chat-avatar-sm' + (deepIdentity.primary ? '' : ' hired') + (deepIdentity.avatar ? ' has-image' : '');
             av.title = deepIdentity.name;
+            if (deepIdentity.avatar) av.style.backgroundImage = "url('" + deepIdentity.avatar + "')";
             av.innerHTML = deepIdentity.initial;
             row.appendChild(av);
             var bubble = document.createElement('div');

package/dist/cli/index.js

@@ -15,9 +15,12 @@ catch {
  */
 import { Command } from 'commander';
 import { spawn, execSync } from 'node:child_process';
-import { cpSync, existsSync, openSync, closeSync, readSync, readFileSync, readdirSync, writeFileSync, unlinkSync, mkdirSync, statSync, } from 'node:fs';
+import http from 'node:http';
+import https from 'node:https';
+import { cpSync, createWriteStream, existsSync, openSync, closeSync, readSync, readFileSync, readdirSync, writeFileSync, unlinkSync, mkdirSync, renameSync, statSync, } from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
+import { pipeline } from 'node:stream/promises';
 import { fileURLToPath } from 'node:url';
 import { runSetup } from './setup.js';
 import { cmdCronList, cmdCronRun, cmdCronRunDue, cmdCronRuns, cmdCronAdd, cmdCronTest, cmdHeartbeat } from './cron.js';
@@ -1963,6 +1966,186 @@ function cmdTools() {
         console.log();
     }
 }
+// ── Desktop installer command ───────────────────────────────────────
+const DESKTOP_RELEASE_REPO = process.env.CLEMENTINE_DESKTOP_REPO || 'Natebreynolds/Clementine-AI-Assistant';
+function githubRequestHeaders() {
+    return {
+        Accept: 'application/vnd.github+json',
+        'User-Agent': `clementine-cli/${pkgVersion}`,
+        'X-GitHub-Api-Version': '2022-11-28',
+    };
+}
+function requestUrl(url, redirects = 0) {
+    return new Promise((resolve, reject) => {
+        if (redirects > 5) {
+            reject(new Error('Too many redirects while contacting GitHub.'));
+            return;
+        }
+        const parsed = new URL(url);
+        const client = parsed.protocol === 'http:' ? http : https;
+        const req = client.get(parsed, { headers: githubRequestHeaders() }, (res) => {
+            const status = res.statusCode ?? 0;
+            const location = res.headers.location;
+            if (status >= 300 && status < 400 && location) {
+                res.resume();
+                resolve(requestUrl(new URL(location, parsed).toString(), redirects + 1));
+                return;
+            }
+            if (status < 200 || status >= 300) {
+                let body = '';
+                res.setEncoding('utf-8');
+                res.on('data', (chunk) => { body += chunk; });
+                res.on('end', () => {
+                    const detail = body.trim() ? `: ${body.trim().slice(0, 240)}` : '';
+                    reject(new Error(`GitHub request failed (${status})${detail}`));
+                });
+                res.on('error', reject);
+                return;
+            }
+            resolve(res);
+        });
+        req.setTimeout(30_000, () => {
+            req.destroy(new Error('Timed out while contacting GitHub.'));
+        });
+        req.on('error', reject);
+    });
+}
+async function readResponseText(res) {
+    return await new Promise((resolve, reject) => {
+        let body = '';
+        res.setEncoding('utf-8');
+        res.on('data', (chunk) => { body += chunk; });
+        res.on('end', () => resolve(body));
+        res.on('error', reject);
+    });
+}
+async function fetchJson(url) {
+    const body = await readResponseText(await requestUrl(url));
+    try {
+        return JSON.parse(body);
+    }
+    catch {
+        throw new Error('GitHub returned an invalid JSON response.');
+    }
+}
+function normalizeReleaseVersion(version) {
+    const raw = (version || 'latest').trim();
+    if (!raw || raw === 'latest')
+        return 'latest';
+    return raw.startsWith('v') ? raw : `v${raw}`;
+}
+function desktopReleaseApiUrl(version) {
+    const normalized = normalizeReleaseVersion(version);
+    const repo = encodeURIComponent(DESKTOP_RELEASE_REPO).replace('%2F', '/');
+    if (normalized === 'latest') {
+        return `https://api.github.com/repos/${repo}/releases/latest`;
+    }
+    return `https://api.github.com/repos/${repo}/releases/tags/${encodeURIComponent(normalized)}`;
+}
+function macDesktopArch() {
+    if (process.arch === 'arm64')
+        return 'arm64';
+    if (process.arch === 'x64')
+        return 'x64';
+    throw new Error(`Clementine Desktop is only packaged for Apple silicon and Intel Macs. Detected: ${process.arch}`);
+}
+function selectDesktopDmgAsset(release) {
+    const assets = release.assets ?? [];
+    const arch = macDesktopArch();
+    const archSpecific = assets.find(asset => asset.name.endsWith(`-mac-${arch}.dmg`));
+    if (archSpecific)
+        return archSpecific;
+    const universal = assets.find(asset => /-mac-universal\.dmg$/i.test(asset.name));
+    if (universal)
+        return universal;
+    const available = assets
+        .filter(asset => /\.dmg$/i.test(asset.name))
+        .map(asset => asset.name)
+        .join(', ');
+    throw new Error(available
+        ? `No ${arch} macOS DMG found in this release. Available DMGs: ${available}`
+        : 'No macOS DMG asset found in the latest Clementine release.');
+}
+function expandHomePath(rawPath) {
+    if (rawPath === '~')
+        return os.homedir();
+    if (rawPath.startsWith('~/'))
+        return path.join(os.homedir(), rawPath.slice(2));
+    return rawPath;
+}
+function desktopDownloadDestination(output, assetName) {
+    if (output) {
+        const expanded = path.resolve(expandHomePath(output));
+        if (existsSync(expanded) && statSync(expanded).isDirectory()) {
+            return path.join(expanded, assetName);
+        }
+        return expanded;
+    }
+    return path.join(os.homedir(), 'Downloads', assetName);
+}
+async function downloadFile(url, destination, expectedSize) {
+    mkdirSync(path.dirname(destination), { recursive: true });
+    const tempPath = `${destination}.download`;
+    try {
+        unlinkSync(tempPath);
+    }
+    catch { /* no previous partial download */ }
+    const res = await requestUrl(url);
+    const total = Number(res.headers['content-length'] ?? expectedSize ?? 0);
+    let downloaded = 0;
+    let lastPrintedAt = 0;
+    res.on('data', (chunk) => {
+        downloaded += chunk.length;
+        const now = Date.now();
+        if (now - lastPrintedAt < 250 && downloaded !== total)
+            return;
+        lastPrintedAt = now;
+        const totalLabel = total > 0 ? ` / ${formatBytes(total)}` : '';
+        process.stdout.write(`\r  Downloaded ${formatBytes(downloaded)}${totalLabel}`);
+    });
+    try {
+        await pipeline(res, createWriteStream(tempPath, { mode: 0o644 }));
+        process.stdout.write('\n');
+        renameSync(tempPath, destination);
+    }
+    catch (err) {
+        try {
+            unlinkSync(tempPath);
+        }
+        catch { /* best effort */ }
+        throw err;
+    }
+}
+function openDesktopInstaller(destination) {
+    const child = spawn('open', [destination], { detached: true, stdio: 'ignore' });
+    child.unref();
+}
+async function cmdDesktopDownload(options) {
+    const DIM = '\x1b[0;90m';
+    const BOLD = '\x1b[1m';
+    const GREEN = '\x1b[0;32m';
+    const RESET = '\x1b[0m';
+    if (process.platform !== 'darwin') {
+        throw new Error('Clementine Desktop install is currently macOS only.');
+    }
+    const release = await fetchJson(desktopReleaseApiUrl(options.version));
+    const asset = selectDesktopDmgAsset(release);
+    const destination = desktopDownloadDestination(options.output, asset.name);
+    console.log();
+    console.log(`  ${DIM}Clementine Desktop${RESET} ${release.tag_name ? `${DIM}(${release.tag_name})${RESET}` : ''}`);
+    console.log(`  Downloading ${BOLD}${asset.name}${RESET}`);
+    console.log(`  ${DIM}${destination}${RESET}`);
+    await downloadFile(asset.browser_download_url, destination, asset.size);
+    console.log(`  ${GREEN}OK${RESET}  Downloaded ${BOLD}${path.basename(destination)}${RESET}`);
+    if (options.open !== false) {
+        openDesktopInstaller(destination);
+        console.log(`  ${GREEN}OK${RESET}  Opened installer. Drag Clementine to Applications.`);
+    }
+    else {
+        console.log(`  ${DIM}Open it later with: open "${destination}"${RESET}`);
+    }
+    console.log();
+}
 // ── Program ──────────────────────────────────────────────────────────
 const program = new Command();
 let pkgVersion = '0.0.0';
@@ -2356,6 +2539,41 @@ program
         process.exit(1);
     });
 });
+const desktopCmd = program
+    .command('desktop')
+    .description('Download and open Clementine Desktop for macOS')
+    .option('-o, --output <path>', 'Download path or directory')
+    .option('--version <tag>', 'GitHub release tag/version (default: latest)', 'latest')
+    .option('--no-open', 'Download only; do not open the DMG')
+    .action((options) => {
+    cmdDesktopDownload({ ...options, open: options.open !== false }).catch((err) => {
+        console.error('Desktop install failed:', err instanceof Error ? err.message : err);
+        process.exit(1);
+    });
+});
+desktopCmd
+    .command('install')
+    .description('Download and open the latest macOS DMG installer')
+    .option('-o, --output <path>', 'Download path or directory')
+    .option('--version <tag>', 'GitHub release tag/version (default: latest)', 'latest')
+    .option('--no-open', 'Download only; do not open the DMG')
+    .action((options) => {
+    cmdDesktopDownload({ ...options, open: options.open !== false }).catch((err) => {
+        console.error('Desktop install failed:', err instanceof Error ? err.message : err);
+        process.exit(1);
+    });
+});
+desktopCmd
+    .command('download')
+    .description('Download the latest macOS DMG without opening it')
+    .option('-o, --output <path>', 'Download path or directory')
+    .option('--version <tag>', 'GitHub release tag/version (default: latest)', 'latest')
+    .action((options) => {
+    cmdDesktopDownload({ ...options, open: false }).catch((err) => {
+        console.error('Desktop download failed:', err instanceof Error ? err.message : err);
+        process.exit(1);
+    });
+});
 program
     .command('update')
     .description('Pull latest code, rebuild, and reinstall (preserves config). Pass "history" to show recent updates.')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clementine-agent",
-  "version": "1.18.64",
+  "version": "1.18.65",
   "description": "Clementine — Personal AI Assistant (TypeScript)",
   "type": "module",
   "main": "dist/index.js",