claude-simple 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-simple",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",
@@ -19,11 +19,13 @@
     "public"
   ],
   "scripts": {
-    "build": "node build.mjs",
+    "assets": "node scripts/sync-vendor.mjs && npx @tailwindcss/cli -i public/base.css -o public/ui.min.css --minify",
+    "build": "npm run assets && node build.mjs",
     "prepublishOnly": "node build.mjs",
     "start": "NODE_ENV=production node server.js",
     "dev": "NODE_ENV=development node --watch server.js",
     "serve": "node server.js",
+    "test": "node --test",
     "gateway": "node gateway.js",
     "gateway:go": "cd gateway && go run .",
     "gateway:build": "cd gateway && make build",
@@ -31,10 +33,16 @@
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "*",
+    "@highlightjs/cdn-assets": "^11.11.1",
     "bcrypt": "^5.1.1",
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
-    "ws": "^8.16.0"
+    "jszip": "^3.10.1",
+    "mammoth": "^1.8.0",
+    "marked": "^9.1.6",
+    "pdfjs-dist": "^3.11.174",
+    "ws": "^8.16.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.4",

package/public/chat.js

@@ -2,7 +2,7 @@
 import { watch, delegate, esc, $ } from './lib.js';
 import { ctx, isProcessing, currentProject, currentTab, currentModel, currentEffort, currentPermission,
          currentAgent, setAgent, AGENT_LABELS, getDefaultModel, getModelsForAgent, getEffortsForModel,
-         addCustomModel, setCurrentModel, chatDensity, wsStatus } from './state.js';
+         getDefaultEffort, addCustomModel, setCurrentModel, chatDensity, wsStatus } from './state.js';
 import { sendWs, api, authHeaders, flushWsQueue, clearWsQueue } from './api.js';
 import { initWakeLock, setWakeLockDesired } from './wake-lock.js';
 import { pushNotification } from './notifications.js';
@@ -370,7 +370,7 @@ function handleWsMessage(msg) {
     finalizeThoughtStream();
     finalizeAssistantStream();
     flushToolBatch();
-    // result already printed "Done" for codex/grok; avoid double for those
+    // result already printed "Done" for CLI agents; avoid double for those
     if (!msg.aborted && msg.agent === 'claude') appendSystemMsg('✓ Done');
     else if (!msg.aborted && msg.agent && msg.agent !== 'claude' && !msg.error) { /* result handled it */ }
     else if (!msg.aborted && !msg.agent) appendSystemMsg('✓ Done');
@@ -576,12 +576,12 @@ function handleSlashCommand(text) {
   switch (cmd.toLowerCase()) {
     case 'agent': {
       if (!arg) {
-        appendSystemMsg(`Current agent: ${currentAgent.peek()} · agents: claude | codex | grok`);
+        appendSystemMsg(`Current agent: ${currentAgent.peek()} · agents: claude | codex | grok | gemini | cursor`);
         return true;
       }
       const a = arg.toLowerCase();
-      if (!['claude', 'codex', 'grok'].includes(a)) {
-        appendSystemMsg(`Unknown agent "${arg}" · valid: claude | codex | grok`);
+      if (!['claude', 'codex', 'grok', 'gemini', 'cursor'].includes(a)) {
+        appendSystemMsg(`Unknown agent "${arg}" · valid: claude | codex | grok | gemini | cursor`);
         return true;
       }
       // Switching agent starts a fresh conversation
@@ -639,7 +639,7 @@ function handleSlashCommand(text) {
       return true;
     }
     case 'help': {
-      appendSystemMsg(`Available slash commands:\n  /agent [claude|codex|grok]\n  /model [haiku|sonnet|opus|<model-id>]\n  /effort [low|medium|high|xhigh|max]\n  /usage\n  /clear\n  /help`);
+      appendSystemMsg(`Available slash commands:\n  /agent [claude|codex|grok|gemini|cursor]\n  /model [haiku|sonnet|opus|<model-id>]\n  /effort [low|medium|high|xhigh|max]\n  /usage\n  /clear\n  /help`);
       return true;
     }
     default: {
@@ -773,16 +773,17 @@ export function sendMessage() {
 
   // While a turn is running, queue the next message (common Grok complaint).
   if (isProcessing.peek()) {
-    // Grok owns its queue on the edge through a long-lived ACP process. Send
-    // immediately so a page reload cannot discard this follow-up in the tab.
+    // Send immediately so a page reload cannot discard this follow-up in the
+    // tab. In hub mode the hub serializes it; standalone uses the edge queue.
     if (currentAgent.peek() === 'grok' && ctx.sessionId) {
       const agent = 'grok';
+      const effort = currentEffort.peek() || getDefaultEffort(agent, currentModel.peek()) || 'low';
       const ok = sendWs({
         type: 'command', cmd: 'turn.start', agent, command: text, sessionId: ctx.sessionId,
         options: {
           agent, cwd: currentProject.peek().path, sessionId: ctx.sessionId,
           configDir: ctx.configDir, model: currentModel.peek(),
-          ...(currentEffort.peek() && { effort: currentEffort.peek() }),
+          effort,
           ...(currentPermission.peek() && { permissionMode: currentPermission.peek() }),
           ...(currentPermission.peek() === 'bypassPermissions' && { allowDangerouslySkipPermissions: true }),
         },
@@ -831,9 +832,11 @@ export function sendMessage() {
   } else {
     flushToolBatch();
     appendMsg('user', 'You', text, { ts: now });
-    const effort     = currentEffort.peek();
-    const permission = currentPermission.peek();
     const agent      = currentAgent.peek() || 'claude';
+    const effort     = currentEffort.peek()
+      || getDefaultEffort(agent, currentModel.peek())
+      || (agent === 'grok' ? 'low' : '');
+    const permission = currentPermission.peek();
     // Existing sessions retain their own picker value. New sessions are bound
     // on the session-created event above.
     if (ctx.sessionId) setCurrentModel(currentModel.peek(), agent, ctx.sessionId);

package/public/files.js

@@ -146,7 +146,7 @@ function renderTextFile(path, content, size) {
 
 // ── Office previews ───────────────────────────────────────────────────────────
 async function renderDocx(arrayBuffer) {
-  await loadScript('https://cdn.jsdelivr.net/npm/mammoth@1.8.0/mammoth.browser.min.js');
+  await loadScript('/vendor/mammoth.browser.min.js');
   if (typeof mammoth === 'undefined') throw new Error('mammoth failed to load');
   const result = await mammoth.convertToHtml({ arrayBuffer });
   const warn = result.messages?.length
@@ -156,7 +156,7 @@ async function renderDocx(arrayBuffer) {
 }
 
 async function renderXlsx(arrayBuffer) {
-  await loadScript('https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js');
+  await loadScript('/vendor/xlsx.full.min.js');
   if (typeof XLSX === 'undefined') throw new Error('SheetJS failed to load');
   const wb = XLSX.read(new Uint8Array(arrayBuffer), { type: 'array' });
   const names = wb.SheetNames || [];
@@ -206,7 +206,7 @@ function pptxExtractSlideTexts(xml) {
 }
 
 async function renderPptx(arrayBuffer) {
-  await loadScript('https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js');
+  await loadScript('/vendor/jszip.min.js');
   if (typeof JSZip === 'undefined') throw new Error('JSZip failed to load');
   const zip = await JSZip.loadAsync(arrayBuffer);
   const slideFiles = Object.keys(zip.files)
@@ -240,10 +240,10 @@ async function renderPptx(arrayBuffer) {
 }
 
 async function ensurePdfJs() {
-  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js');
+  await loadScript('/vendor/pdf.min.js');
   if (typeof pdfjsLib === 'undefined') throw new Error('pdf.js failed to load');
   pdfjsLib.GlobalWorkerOptions.workerSrc =
-    'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+    '/vendor/pdf.worker.min.js';
   return pdfjsLib;
 }
 

package/public/index.html

@@ -78,11 +78,10 @@
   <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
   <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
   <title>Agent UI</title>
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@5/daisyui.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked@9/marked.min.js"></script>
-  <link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
+  <link href="/ui.min.css" rel="stylesheet">
+  <script src="/vendor/marked.min.js"></script>
+  <link id="hljs-theme" rel="stylesheet" href="/vendor/highlight-dark.min.css">
+  <script src="/vendor/highlight.min.js"></script>
   <link rel="stylesheet" href="style.css?v=ui-11">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">

package/public/lib.js

@@ -3,5 +3,5 @@
 // unpinned @latest here means every push to the mini-react repo — tested or
 // not — goes live immediately. Bump deliberately after verifying against
 // this app, not as a side effect of publishing a mini-react release.
-export * from 'https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@v0.1.13/dist/mini-react.min.js';
+export * from './vendor/mini-react.min.js';
 // doc from https://cdn.jsdelivr.net/gh/forechoandlook/mini-react@v0.1.13/README.mini.md

package/public/router.js

@@ -1,4 +1,4 @@
-// router.js — Hash routing: #/  #/session/:id  #/session/:id/:tab
+// router.js — Hash routing: #/  #/session/:id/:tab?machine=&agent=
 import { createRouter, watch } from './lib.js';
 import { currentTab, ctx } from './state.js';
 
@@ -26,15 +26,26 @@ export function initRouter(resumeSession, switchTab) {
 
   // Keep hash in sync when session/tab changes
   watch(currentTab, tab => {
-    if (ctx.sessionId) setHash(`/session/${ctx.sessionId}/${tab}`);
+    if (ctx.sessionId) syncHash();
   });
 }
 
-/** Parse `#/session/:id/:tab?` → { id, tab } or null */
+/** Parse `#/session/:id/:tab?machine=&agent=` → identity + tab, or null. */
 export function parseHashPath(path) {
-  const m = (path || '').match(/^\/session\/([^/]+)(?:\/([^/]+))?$/);
+  const [pathname, query = ''] = String(path || '').split('?', 2);
+  const m = pathname.match(/^\/session\/([^/]+)(?:\/([^/]+))?$/);
   if (!m) return null;
-  return { id: m[1], tab: m[2] || null };
+  const params = new URLSearchParams(query);
+  try {
+    return {
+      id: decodeURIComponent(m[1]),
+      tab: m[2] ? decodeURIComponent(m[2]) : null,
+      machineId: params.get('machine') || null,
+      agent: params.get('agent') || null,
+    };
+  } catch {
+    return null;
+  }
 }
 
 // Called by app.js when hash is not already handled by showApp deep-link
@@ -49,12 +60,12 @@ function applyHash(path) {
     document.dispatchEvent(new CustomEvent('router:home'));
     return;
   }
-  const { id, tab } = parsed;
+  const { id, tab, machineId, agent } = parsed;
   if (!_resumeSession || !_switchTab) return;
 
   if (id !== ctx.sessionId) {
     // Need to look up cwd from loaded sessions — defer to shell
-    document.dispatchEvent(new CustomEvent('router:session', { detail: { id, tab } }));
+    document.dispatchEvent(new CustomEvent('router:session', { detail: { id, tab, machineId, agent } }));
   } else if (tab && tab !== currentTab.peek()) {
     _switchTab(tab);
   }
@@ -67,5 +78,22 @@ export function setHash(path) {
 
 // Convenience: call after resumeSession completes to set URL
 export function syncHash() {
-  if (ctx.sessionId) setHash(`/session/${ctx.sessionId}/${currentTab.peek()}`);
+  if (!ctx.sessionId) return;
+  const query = new URLSearchParams();
+  if (ctx.machineId) query.set('machine', ctx.machineId);
+  if (ctx.agent) query.set('agent', ctx.agent);
+  const suffix = query.size ? `?${query}` : '';
+  setHash(`/session/${encodeURIComponent(ctx.sessionId)}/${encodeURIComponent(currentTab.peek())}${suffix}`);
+}
+
+/** A portable, non-secret URL for the active session. Authentication is never embedded. */
+export function currentSessionShareUrl() {
+  if (!ctx.sessionId) return null;
+  const url = new URL(location.href);
+  const query = new URLSearchParams();
+  if (ctx.machineId) query.set('machine', ctx.machineId);
+  if (ctx.agent) query.set('agent', ctx.agent);
+  const suffix = query.size ? `?${query}` : '';
+  url.hash = `/session/${encodeURIComponent(ctx.sessionId)}/${encodeURIComponent(currentTab.peek())}${suffix}`;
+  return url.toString();
 }

package/public/settings.js

@@ -1,14 +1,14 @@
 // settings.js — Workspace settings modal
 import { esc, $ } from './lib.js';
 import { api } from './api.js';
-import { workspacesData } from './state.js';
+import { workspacesData, hubMode, selectedMachineId } from './state.js';
 import { setCachedWorkspaces } from './cache.js';
 
 export function initSettings() {
   document.getElementById('root').insertAdjacentHTML('beforeend', `
     <dialog id="modal-settings" class="modal">
       <div class="modal-box max-w-lg">
-        <h3 class="font-bold text-base mb-4">⚙️ Settings — Workspaces</h3>
+        <h3 class="font-bold text-base mb-4">Settings</h3>
         <div id="ws-list" class="flex flex-col gap-2 mb-4"></div>
         <div class="border-t border-base-300 pt-4">
           <div class="text-xs uppercase tracking-wider text-base-content/50 mb-2">Add workspace</div>
@@ -19,6 +19,25 @@ export function initSettings() {
           </div>
           <div id="ws-error" class="alert alert-error text-xs py-1.5 hidden"></div>
         </div>
+        <div id="mcp-token-settings" class="border-t border-base-300 pt-4 mt-4">
+          <div class="flex items-center justify-between gap-2 mb-2">
+            <div>
+              <div class="text-xs uppercase tracking-wider text-base-content/50">MCP access token</div>
+              <p class="text-[11px] text-base-content/45 mt-0.5">The token is shown once. Set its expiry before generating.</p>
+            </div>
+            <select id="mcp-token-expiry" class="select select-xs select-bordered">
+              <option value="86400">24 hours</option>
+              <option value="604800">7 days</option>
+              <option value="2592000">30 days</option>
+            </select>
+          </div>
+          <button id="mcp-token-generate" class="btn btn-sm btn-primary w-full">Generate MCP token</button>
+          <div id="mcp-token-result" class="hidden mt-2">
+            <textarea id="mcp-token-value" readonly class="textarea textarea-bordered textarea-xs w-full h-20 font-mono"></textarea>
+            <button id="mcp-token-copy" class="btn btn-ghost btn-xs mt-1">Copy token</button>
+          </div>
+          <div id="mcp-token-error" class="alert alert-error text-xs py-1.5 hidden mt-2"></div>
+        </div>
         <div class="modal-action">
           <form method="dialog"><button class="btn btn-ghost btn-sm">Close</button></form>
         </div>
@@ -31,6 +50,8 @@ export function initSettings() {
   document.getElementById('ws-add-btn').addEventListener('click', addWorkspace);
   document.getElementById('ws-new-name').addEventListener('keydown', e => { if (e.key === 'Enter') addWorkspace(); });
   document.getElementById('ws-new-dir').addEventListener('keydown',  e => { if (e.key === 'Enter') addWorkspace(); });
+  document.getElementById('mcp-token-generate').addEventListener('click', generateMcpToken);
+  document.getElementById('mcp-token-copy').addEventListener('click', copyMcpToken);
 }
 
 function renderWsList() {
@@ -86,5 +107,36 @@ async function deleteWorkspace(id) {
 
 export function openSettings() {
   renderWsList();
+  const mcp = $('mcp-token-settings');
+  if (mcp) mcp.style.display = hubMode.peek() ? '' : 'none';
   $('modal-settings')?.showModal();
 }
+
+async function generateMcpToken() {
+  const result = $('mcp-token-result');
+  const err = $('mcp-token-error');
+  result?.classList.add('hidden');
+  err?.classList.add('hidden');
+  const machineId = selectedMachineId.peek();
+  if (!machineId) {
+    err.textContent = '请选择一台在线机器后再生成 Token。';
+    err.classList.remove('hidden');
+    return;
+  }
+  try {
+    const expiresInSeconds = Number($('mcp-token-expiry').value);
+    const data = await api('POST', `/api/mcp/tokens?machine=${encodeURIComponent(machineId)}`, { expiresInSeconds });
+    $('mcp-token-value').value = data.token || '';
+    result.classList.remove('hidden');
+  } catch (e) {
+    err.textContent = e.message;
+    err.classList.remove('hidden');
+  }
+}
+
+async function copyMcpToken() {
+  const value = $('mcp-token-value')?.value;
+  if (!value) return;
+  try { await navigator.clipboard.writeText(value); }
+  catch { $('mcp-token-value')?.select(); document.execCommand('copy'); }
+}

package/public/shell/boot.js

@@ -98,10 +98,10 @@ export async function showApp(opts = {}) {
         || (last?.sessionId === deep.id ? last : null);
       await resumeSession(
         deep.id,
-        s?.cwd || last?.cwd || null,
-        s?.configDir || last?.configDir || null,
-        s?.agent || last?.agent || null,
-        s?.machineId || last?.machineId || remembered || null,
+        s?.cwd || null,
+        s?.configDir || null,
+        deep.agent || s?.agent || null,
+        deep.machineId || s?.machineId || remembered || null,
         { tab: deep.tab || 'chat' },
       );
       // ensure machines eventually known
@@ -150,9 +150,9 @@ export async function showApp(opts = {}) {
       || (last?.sessionId === deep.id ? last : null);
     await resumeSession(
       deep.id,
-      s?.cwd || last?.cwd || null,
-      s?.configDir || last?.configDir || null,
-      s?.agent || last?.agent || null,
+      s?.cwd || null,
+      s?.configDir || null,
+      deep.agent || s?.agent || null,
       null,
       { tab: deep.tab || 'chat' },
     );

package/public/shell/layout.js

@@ -113,9 +113,8 @@ export function applyTheme(theme) {
   }
   if (link) {
     const dark = theme === 'dark' || theme === 'night' || theme === 'black';
-    link.href = dark
-      ? 'https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css'
-      : 'https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github.min.css';
+    // Keep a local theme so a Hub remains usable on disconnected/restricted networks.
+    link.href = '/vendor/highlight-dark.min.css';
   }
 }
 

package/public/shell/session-list.js

@@ -7,7 +7,7 @@ import {
   sidebarView, agentFilter, timeRange, activityHits, activityLoading,
   sessionMetaMap, LOW_TURN_THRESHOLD, metaKey, sessionDisplayTitle,
   hubMode, selectedMachineId, agentsMeta, currentEffort,
-  getModelsForAgent, getDefaultModel, getEffortsForModel,
+  getModelsForAgent, getDefaultModel, getEffortsForModel, getDefaultEffort,
   addCustomModel, removeCustomModel, getCustomModels, setCurrentModel, ctx,
 } from '../state.js';
 import { api, NOT_MODIFIED } from '../api.js';
@@ -23,11 +23,10 @@ function normalizeSessions(v) {
 }
 
 function sessionsQuery() {
-  const days = parseInt(timeRange.peek() || '14', 10);
   const q = new URLSearchParams();
-  // Match sidebar time filter so we don't pull years of metadata on mobile.
-  if (days > 0) q.set('days', String(days));
-  q.set('limit', '400');
+  // Project index is small and should remain complete; the Hub/browser cache
+  // keeps this inexpensive after the first fetch.
+  q.set('limit', '2000');
   const s = q.toString();
   return s ? `/api/sessions?${s}` : '/api/sessions';
 }
@@ -174,15 +173,28 @@ export function refreshEffortSelect() {
   const agent = currentAgent.peek() || 'claude';
   const model = currentModel.peek();
   const efforts = getEffortsForModel(agent, model);
-  const cur = currentEffort.peek() || '';
+  let cur = currentEffort.peek() || '';
+  if (!cur) {
+    const def = getDefaultEffort(agent, model);
+    if (def && efforts.includes(def)) {
+      cur = def;
+      currentEffort.value = def;
+    }
+  }
   const opts = [`<option value="">effort: off</option>`]
     .concat(efforts.map(e =>
       `<option value="${esc(e)}" ${e === cur ? 'selected' : ''}>${esc(e)}</option>`
     ));
   sel.innerHTML = opts.join('');
   if (cur && !efforts.includes(cur)) {
-    currentEffort.value = '';
-    sel.value = '';
+    const def = getDefaultEffort(agent, model);
+    if (def && efforts.includes(def)) {
+      currentEffort.value = def;
+      sel.value = def;
+    } else {
+      currentEffort.value = '';
+      sel.value = '';
+    }
   } else {
     sel.value = cur;
   }
@@ -261,7 +273,6 @@ export function renderProjectGroups(groups) {
     } else {
       open = forceOpen || key === topCwd || groups.length <= 3;
     }
-    const latestTitle = g.latest?.display || g.latest?.snippet || '';
     const machineTag = g.machineId
       ? `<span class="text-[9px] font-mono text-base-content/40 flex-shrink-0">@${esc(g.machineId)}</span>`
       : '';
@@ -274,11 +285,6 @@ export function renderProjectGroups(groups) {
           ${machineTag}
           <span class="text-[9px] text-base-content/30 flex-shrink-0">${formatTime(g.updatedAt)}</span>
         </div>
-        <div class="flex items-center gap-1.5 mt-0.5 pl-4">
-          <span class="text-[10px] text-base-content/35 font-mono truncate flex-1" title="${esc(g.cwd || '')}">${esc(shortPath(g.cwd))}</span>
-          <span class="flex items-center gap-0.5 flex-shrink-0">${agentCountPills(g.agents)}</span>
-        </div>
-        ${latestTitle && !open ? `<div class="pl-4 mt-0.5 text-[10px] text-base-content/45 truncate" title="${esc(latestTitle)}">↳ ${esc(latestTitle)}</div>` : ''}
       </div>`;
     const sessions = g.sessions.slice(0, 40);
     const more = g.sessions.length > 40
@@ -349,7 +355,7 @@ export function syncSidebarChrome() {
     status.textContent = 'Searching content…';
   } else if (q && hitResults) {
     status.classList.remove('hidden');
-    status.textContent = `${hitResults.length} hit${hitResults.length === 1 ? '' : 's'} · ${timeRange.peek() === '0' ? 'all time' : timeRange.peek() + 'd'}${hits.deep === false ? '' : ' (incl. content)'}`;
+    status.textContent = `${hitResults.length} hit${hitResults.length === 1 ? '' : 's'}${hits.deep === false ? '' : ' (incl. content)'}`;
   } else if (q) {
     status.classList.remove('hidden');
     status.textContent = 'Local filter only — type to deep-search';
@@ -378,7 +384,7 @@ export async function runActivitySearch(q) {
   try {
     const params = new URLSearchParams({
       q: query,
-      days: timeRange.peek() || '14',
+      days: '0',
       limit: '50',
       deep: '1',
     });

package/public/shell/templates.js

@@ -6,7 +6,7 @@ export const AuthScreen = () => `
     <div class="card bg-base-200 border border-base-300 w-full max-w-sm shadow-xl">
       <div class="card-body gap-3 p-8">
         <h1 class="text-xl font-bold">🤖 Agent UI</h1>
-        <p id="auth-subtitle" class="text-sm text-base-content/60 mb-1">Claude · Codex · Grok</p>
+        <p id="auth-subtitle" class="text-sm text-base-content/60 mb-1">Claude · Codex · Grok · Gemini · Cursor</p>
         <form id="auth-form" class="flex flex-col gap-3" autocomplete="on" action="#">
         <label class="form-control">
           <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">Username</span></div>
@@ -79,6 +79,7 @@ export const AppShell = (opts = {}) => {
       <span id="topbar-project" class="text-sm text-base-content/50 flex-1 truncate min-w-0">Select a session</span>
       <span id="conn-dot" class="w-2 h-2 rounded-full bg-base-content/30 flex-shrink-0" title="连接状态"></span>
       <div class="flex gap-2 topbar-actions">
+        <button id="btn-share-session" class="btn btn-ghost btn-xs border border-base-300" title="复制当前会话分享链接">分享</button>
         <button id="btn-refresh-conn" class="btn btn-ghost btn-xs border border-base-300" title="重新连接并同步">↻</button>
         <button id="btn-pwa-install" class="btn btn-ghost btn-xs border border-base-300 hidden" title="安装到主屏幕">安装</button>
         <button id="btn-meta-agent"  class="btn btn-ghost btn-xs border border-primary/40 text-primary" title="Meta Agent — 报告 / 问答 / VLM"><span class="hidden sm:inline">✦ Agent</span><span class="sm:hidden">✦</span></button>
@@ -134,29 +135,26 @@ export const AppShell = (opts = {}) => {
           </div>
         </div>
         <div id="ws-tabs" class="flex overflow-x-auto border-b border-base-300 flex-shrink-0" style="scrollbar-width:none"></div>
-        <div class="px-2 py-1.5 border-b border-base-300 flex-shrink-0 flex flex-col gap-1.5">
-          <input id="session-search" type="text" placeholder="Search projects & recent work…"
-            class="input input-xs input-bordered w-full text-xs" autocomplete="off">
-          <div class="flex items-center gap-1 flex-wrap">
-            <div id="view-tabs" class="flex rounded-md border border-base-300 overflow-hidden text-[10px]">
-              <button data-view="projects" class="px-2 py-0.5 bg-primary/15 text-primary font-medium">Projects</button>
-              <button data-view="timeline" class="px-2 py-0.5 text-base-content/50 hover:bg-base-300">Recent</button>
-            </div>
-            <select id="time-range" class="select select-xs select-bordered text-[10px] h-6 min-h-0 py-0 pl-1 pr-6" title="Time range">
-              <option value="1">Today</option>
-              <option value="7">7d</option>
-              <option value="14" selected>14d</option>
-              <option value="30">30d</option>
-              <option value="0">All</option>
-            </select>
+        <div class="px-2 py-1.5 border-b border-base-300 flex-shrink-0 relative">
+          <div class="flex gap-1.5">
+            <input id="session-search" type="text" placeholder="Search projects & recent work…"
+              class="input input-xs input-bordered flex-1 min-w-0 text-xs" autocomplete="off">
+            <button id="sidebar-filter-toggle" type="button" class="btn btn-ghost btn-xs border border-base-300 px-2" title="筛选项目" aria-expanded="false">⚙</button>
           </div>
-          <div id="agent-filter" class="flex gap-1 flex-wrap">
-            <button data-agent-filter="all" class="agent-pill active">All</button>
-            <button data-agent-filter="claude" class="agent-pill">Claude</button>
-            <button data-agent-filter="codex" class="agent-pill">Codex</button>
-            <button data-agent-filter="grok" class="agent-pill">Grok</button>
-            <button id="btn-fav-filter" class="agent-pill" title="Show only favorites">★ Fav</button>
-            <button id="btn-hidden-filter" class="agent-pill" title="Show only hidden sessions">🙈 Hidden</button>
+          <div id="sidebar-filter-menu" class="hidden absolute left-2 right-2 top-[calc(100%-.25rem)] z-30 rounded-lg border border-base-300 bg-base-100 p-2 shadow-xl">
+            <div class="text-[10px] uppercase tracking-wide text-base-content/45 mb-1.5">Agents · multi-select</div>
+            <div class="grid grid-cols-2 gap-1 text-xs">
+              <label><input type="checkbox" data-agent-option="claude"> Claude</label>
+              <label><input type="checkbox" data-agent-option="codex"> Codex</label>
+              <label><input type="checkbox" data-agent-option="grok"> Grok</label>
+              <label><input type="checkbox" data-agent-option="gemini"> Gemini</label>
+              <label><input type="checkbox" data-agent-option="cursor"> Cursor</label>
+            </div>
+            <div class="mt-2 pt-2 border-t border-base-300 flex gap-3 text-xs">
+              <label><input id="filter-favorites" type="checkbox"> Favorites</label>
+              <label><input id="filter-hidden" type="checkbox"> Hidden</label>
+              <button id="filter-clear" type="button" class="ml-auto text-primary">Clear</button>
+            </div>
           </div>
           <div id="search-status" class="hidden text-[10px] text-base-content/40 px-0.5"></div>
         </div>
@@ -178,7 +176,7 @@ export const AppShell = (opts = {}) => {
         <div id="welcome" class="${welcomeCls}">
           <div class="max-w-4xl w-full text-center flex flex-col items-center gap-2 mt-2 md:mt-4">
             <h2 class="text-3xl font-extrabold tracking-tight bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent select-none">🤖 Agent UI</h2>
-            <p class="text-sm text-base-content/65 max-w-md">Claude · Codex · Grok — Select a session from the sidebar or click a day on the calendar to view activity.</p>
+            <p class="text-sm text-base-content/65 max-w-md">Claude · Codex · Grok · Gemini — Select a session from the sidebar or click a day on the calendar to view activity.</p>
             <div class="flex gap-2 mt-0.5">
               <button id="btn-new-session-welcome" class="btn btn-primary btn-sm shadow-md">＋ New Session</button>
               <button id="btn-meta-agent-welcome" class="btn btn-outline btn-primary btn-sm">✦ Meta Agent</button>
@@ -272,6 +270,8 @@ export const AppShell = (opts = {}) => {
                   <option value="claude">Claude</option>
                   <option value="codex">Codex</option>
                   <option value="grok">Grok</option>
+                  <option value="gemini">Gemini</option>
+                  <option value="cursor">Cursor</option>
                 </select>
                 <select id="sel-convert-agent" class="select select-xs select-bordered text-xs font-semibold" title="Convert session to another agent">
                   <option value="" disabled selected>Convert to...</option>
@@ -406,6 +406,8 @@ export const AppShell = (opts = {}) => {
             <option value="claude">Claude Code</option>
             <option value="codex">OpenAI Codex</option>
             <option value="grok">Grok</option>
+            <option value="gemini">Google Gemini (agy)</option>
+            <option value="cursor">Cursor Agent</option>
           </select>
         </label>
         <label class="form-control" id="new-session-machine-wrap" style="display:none">

package/public/shell/util.js

@@ -39,10 +39,12 @@ export function agentBadge(agent, compact = true) {
     claude: 'bg-orange-500/15 text-orange-400',
     codex:  'bg-emerald-500/15 text-emerald-400',
     grok:   'bg-sky-500/15 text-sky-400',
+    gemini: 'bg-violet-500/15 text-violet-400',
+    cursor: 'bg-amber-500/15 text-amber-400',
   };
   const cls = colors[a] || 'bg-base-300 text-base-content/50';
   const label = compact
-    ? (a === 'claude' ? 'CC' : a === 'codex' ? 'CX' : a === 'grok' ? 'GX' : a.slice(0, 2).toUpperCase())
+    ? (a === 'claude' ? 'CC' : a === 'codex' ? 'CX' : a === 'grok' ? 'GX' : a === 'gemini' ? 'GM' : a === 'cursor' ? 'CU' : a.slice(0, 2).toUpperCase())
     : (AGENT_LABELS[a] || a);
   return `<span class="text-[9px] px-1 py-0.5 rounded font-mono font-semibold flex-shrink-0 ${cls}" title="${esc(AGENT_LABELS[a] || a)}">${label}</span>`;
 }