claude-simple 0.2.23 → 0.2.25

package/public/settings.js

@@ -1,93 +1,235 @@
-// settings.js — Workspace settings modal
+// settings.js — full-page settings (not a crowded modal)
 import { esc, $ } from './lib.js';
 import { api } from './api.js';
 import { workspacesData, hubMode, selectedMachineId } from './state.js';
 import { setCachedWorkspaces } from './cache.js';
 
+
+const CLAUDE_ENV_FIELDS = [
+  'ANTHROPIC_BASE_URL', 'ANTHROPIC_AUTH_TOKEN', 'ANTHROPIC_MODEL',
+  'ANTHROPIC_DEFAULT_OPUS_MODEL', 'ANTHROPIC_DEFAULT_SONNET_MODEL',
+  'ANTHROPIC_DEFAULT_HAIKU_MODEL', 'CLAUDE_CODE_SUBAGENT_MODEL',
+  'CLAUDE_CODE_EFFORT_LEVEL',
+];
+
+let activeSection = 'claude';
+
 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</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>
-          <div class="flex gap-2 mb-2">
-            <input id="ws-new-name" type="text" placeholder="Name (e.g. personal)" class="input input-sm input-bordered flex-1">
-            <input id="ws-new-dir"  type="text" placeholder="~/.claude-personal"    class="input input-sm input-bordered flex-[2]">
-            <button id="ws-add-btn" class="btn btn-primary btn-sm">Add</button>
+  document.getElementById('root').insertAdjacentHTML('beforeend', settingsMarkup());
+  bind();
+}
+
+function settingsMarkup() {
+  const fields = CLAUDE_ENV_FIELDS.map(key =>
+    `<label class="form-control"><div class="label py-1"><span class="label-text text-xs font-mono">${esc(key)}</span></div><input id="ae-${key}" class="input input-bordered input-sm font-mono text-xs" autocomplete="off" spellcheck="false"></label>`
+  ).join('');
+  return `
+  <div id="settings-page" class="set-page" hidden>
+    <header class="set-island">
+      <button type="button" id="set-back" class="btn btn-ghost btn-sm px-2" aria-label="返回">←</button>
+      <span class="font-semibold text-sm">Settings</span>
+    </header>
+    <div class="set-split">
+      <nav class="set-nav" aria-label="设置分区">
+        <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start is-on" data-set-sec="claude">Claude</button>
+        <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="workspaces">Workspaces</button>
+        <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="users" id="set-nav-users">Users</button>
+        <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="password">Password</button>
+        <button type="button" class="set-nav-item btn btn-ghost btn-sm justify-start" data-set-sec="mcp">MCP</button>
+      </nav>
+      <div class="set-main">
+        <section class="set-panel" data-set-panel="claude">
+          <h2 class="text-lg font-semibold">Claude env</h2>
+          <p class="text-sm text-base-content/60 mb-4">Workspace 的 <b>name</b> 对应一套 ANTHROPIC_*。Default 是底，同名覆盖。</p>
+          <label class="form-control mb-3">
+            <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">Profile</span></div>
+            <select id="ae-profile" class="select select-bordered select-sm"></select>
+          </label>
+          <div class="set-fields">${fields}</div>
+          <p id="claude-env-error" class="text-error text-xs mt-2 hidden"></p>
+          <button type="button" id="claude-env-save" class="btn btn-primary btn-sm mt-4">Save profile</button>
+        </section>
+        <section class="set-panel" data-set-panel="workspaces" hidden>
+          <h2 class="text-lg font-semibold">Workspaces</h2>
+          <p class="text-sm text-base-content/60 mb-4">每个 name 一份 Claude 配置目录。加完后会立刻出现在上面的 Profile 列表里。</p>
+          <div id="ws-list" class="set-list"></div>
+          <div class="set-add">
+            <input id="ws-new-name" class="input input-bordered input-sm" placeholder="name  e.g. deepseek">
+            <input id="ws-new-dir" class="input input-bordered input-sm font-mono text-xs" placeholder="~/.claude-deepseek">
+            <button type="button" id="ws-add-btn" class="btn btn-primary btn-sm">Add</button>
+          </div>
+          <p id="ws-error" class="text-error text-xs mt-2 hidden"></p>
+        </section>
+        <section class="set-panel" data-set-panel="users" hidden>
+          <h2 class="text-lg font-semibold">Users</h2>
+          <p class="text-sm text-base-content/60 mb-4">Admin 分配账号。对方用同一登录页，没有公开注册。</p>
+          <div id="users-list" class="set-list"></div>
+          <div class="set-add">
+            <input id="user-new-name" class="input input-bordered input-sm" placeholder="username">
+            <input id="user-new-pass" type="password" class="input input-bordered input-sm" placeholder="password">
+            <select id="user-new-role" class="select select-bordered select-sm">
+              <option value="editor">editor</option>
+              <option value="viewer">viewer</option>
+              <option value="admin">admin</option>
+            </select>
+            <button type="button" id="user-add-btn" class="btn btn-primary btn-sm">Invite</button>
           </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">
+          <p id="users-error" class="text-error text-xs mt-2 hidden"></p>
+        </section>
+        <section class="set-panel" data-set-panel="password" hidden>
+          <h2 class="text-lg font-semibold">Password</h2>
+          <p class="text-sm text-base-content/60 mb-4">改自己的登录密码。管理员重置别人的密码在 Users。</p>
+          <label class="form-control mb-2">
+            <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">Current</span></div>
+            <input id="pw-current" type="password" class="input input-bordered input-sm">
+          </label>
+          <label class="form-control mb-2">
+            <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">New</span></div>
+            <input id="pw-next" type="password" class="input input-bordered input-sm">
+          </label>
+          <label class="form-control mb-2">
+            <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">Again</span></div>
+            <input id="pw-next2" type="password" class="input input-bordered input-sm">
+          </label>
+          <p id="pw-error" class="text-error text-xs mt-2 hidden"></p>
+          <button type="button" id="pw-save" class="btn btn-primary btn-sm mt-3">Update password</button>
+        </section>
+        <section class="set-panel" data-set-panel="mcp" hidden>
+          <h2 class="text-lg font-semibold">MCP token</h2>
+          <p class="text-sm text-base-content/60 mb-4">发给外部 Agent 的短期凭证，只显示一次。需要先选一台在线机器。</p>
+          <label class="form-control mb-3">
+            <div class="label py-1"><span class="label-text text-xs uppercase tracking-wide">Expiry</span></div>
+            <select id="mcp-token-expiry" class="select select-bordered select-sm">
               <option value="86400">24 hours</option>
               <option value="604800">7 days</option>
               <option value="2592000">30 days</option>
             </select>
+          </label>
+          <button type="button" id="mcp-token-generate" class="btn btn-primary btn-sm">Generate</button>
+          <div id="mcp-token-result" class="hidden set-token">
+            <p id="mcp-token-url" class="font-mono text-xs text-base-content/50"></p>
+            <textarea id="mcp-token-value" readonly class="textarea textarea-bordered font-mono text-xs" rows="5"></textarea>
+            <button type="button" id="mcp-token-copy" class="btn btn-ghost btn-xs border border-base-300">Copy token</button>
           </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>
+          <p id="mcp-token-error" class="text-error text-xs mt-2 hidden"></p>
+        </section>
       </div>
-      <form method="dialog" class="modal-backdrop"><button>close</button></form>
-    </dialog>`);
+    </div>
+  </div>`;
+}
 
+function bind() {
+  $('set-back')?.addEventListener('click', closeSettings);
+  document.querySelectorAll('[data-set-sec]').forEach(btn => {
+    btn.addEventListener('click', () => showSection(btn.dataset.setSec));
+  });
+  $('ws-add-btn')?.addEventListener('click', addWorkspace);
+  $('ws-new-name')?.addEventListener('keydown', e => { if (e.key === 'Enter') addWorkspace(); });
+  $('ws-new-dir')?.addEventListener('keydown', e => { if (e.key === 'Enter') addWorkspace(); });
+  $('mcp-token-generate')?.addEventListener('click', generateMcpToken);
+  $('mcp-token-copy')?.addEventListener('click', copyMcpToken);
+  $('claude-env-save')?.addEventListener('click', saveClaudeEnv);
+  $('ae-profile')?.addEventListener('change', () => { void loadClaudeEnv(); });
+  $('user-add-btn')?.addEventListener('click', inviteUser);
+  $('pw-save')?.addEventListener('click', savePassword);
+  document.addEventListener('router:settings', () => openSettings());
+  document.addEventListener('router:home', () => {
+    if (isSettingsOpen()) closeSettings();
+  });
+}
+
+function showSection(id) {
+  activeSection = id || 'claude';
+  document.querySelectorAll('[data-set-sec]').forEach(b => b.classList.toggle('is-on', b.dataset.setSec === activeSection));
+  document.querySelectorAll('[data-set-panel]').forEach(p => {
+    p.hidden = p.dataset.setPanel !== activeSection;
+  });
+}
+
+export function openSettings(section) {
+  const page = $('settings-page');
+  if (!page) return;
+  page.hidden = false;
+  document.documentElement.classList.add('settings-open');
+  showSection(section || activeSection || 'claude');
   renderWsList();
+  fillProfileSelect();
+  void loadClaudeEnv();
+  void loadUsers();
+  const mcp = $('mcp-token-settings') || document.querySelector('[data-set-panel="mcp"]');
+  if (mcp && !hubMode.peek()) {
+    document.querySelector('[data-set-sec="mcp"]')?.classList.add('hidden');
+  }
+  if ((location.hash || '') !== '#/settings') location.hash = '/settings';
+}
 
-  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);
+export function closeSettings() {
+  const page = $('settings-page');
+  if (page) page.hidden = true;
+  document.documentElement.classList.remove('settings-open');
+  if ((location.hash || '') === '#/settings') location.hash = '';
+}
+
+export function isSettingsOpen() {
+  return !$('settings-page')?.hidden;
 }
 
 function renderWsList() {
   const el = $('ws-list');
   if (!el) return;
-  const wss = workspacesData.peek();
-  if (!wss.length) { el.innerHTML = '<div class="text-xs text-base-content/40">No workspaces configured</div>'; return; }
-  el.innerHTML = wss.map(w => `
-    <div class="flex items-center gap-2 px-3 py-2 bg-base-200 rounded-lg">
-      <div class="flex-1 min-w-0">
+  const wss = workspacesData.peek() || [];
+  if (!wss.length) {
+    el.innerHTML = '<div class="text-xs text-base-content/40">还没有 workspace</div>';
+    return;
+  }
+  el.innerHTML = wss.map((w, i) => `
+    <div class="set-row" style="--index:${i}">
+      <div class="set-row-body">
         <div class="text-sm font-medium">${esc(w.name)}</div>
-        <div class="text-xs font-mono text-base-content/50 truncate">${esc(w.configDir)}</div>
+        <div class="text-xs font-mono text-base-content/50">${esc(w.configDir)}</div>
       </div>
       ${wss.length > 1
-        ? `<button class="btn btn-ghost btn-xs text-error" data-ws-delete="${esc(w.id)}">✕</button>`
-        : '<span class="text-[10px] text-base-content/30">default</span>'}
+        ? `<button type="button" class="btn btn-ghost btn-xs" data-ws-delete="${esc(w.id)}">Remove</button>`
+        : '<span class="text-xs text-base-content/40">default</span>'}
     </div>`).join('');
-
   el.querySelectorAll('[data-ws-delete]').forEach(btn => {
     btn.addEventListener('click', () => deleteWorkspace(btn.dataset.wsDelete));
   });
 }
 
+function fillProfileSelect(prefer) {
+  const sel = $('ae-profile');
+  if (!sel) return;
+  const cur = prefer != null ? prefer : sel.value;
+  const wss = workspacesData.peek() || [];
+  const names = [...new Set(wss.map(w => w.name).filter(Boolean))];
+  sel.innerHTML = `<option value="">Default</option>`
+    + names.map(n => `<option value="${esc(n)}">${esc(n)}</option>`).join('');
+  if ([...sel.options].some(o => o.value === cur)) sel.value = cur;
+  else sel.value = '';
+}
+
 async function addWorkspace() {
-  const name   = $('ws-new-name').value.trim();
-  const dir    = $('ws-new-dir').value.trim();
-  const errEl  = $('ws-error');
+  const name = $('ws-new-name').value.trim();
+  const dir = $('ws-new-dir').value.trim();
+  const errEl = $('ws-error');
   errEl.classList.add('hidden');
-  if (!name || !dir) { errEl.textContent = 'Name and path are required'; errEl.classList.remove('hidden'); return; }
+  if (!name || !dir) {
+    errEl.textContent = '需要 name 和路径';
+    errEl.classList.remove('hidden');
+    return;
+  }
   try {
     const ws = await api('POST', '/api/workspaces', { name, configDir: dir });
-    workspacesData.value = [...workspacesData.peek(), ws];
-    setCachedWorkspaces(workspacesData.peek());
+    const next = [...(workspacesData.peek() || []).filter(w => w.id !== ws.id), ws];
+    workspacesData.value = next;
+    setCachedWorkspaces(next);
     $('ws-new-name').value = '';
-    $('ws-new-dir').value  = '';
+    $('ws-new-dir').value = '';
     renderWsList();
+    fillProfileSelect(ws.name);
+    await loadClaudeEnv();
+    showSection('claude');
   } catch (e) {
     errEl.textContent = e.message;
     errEl.classList.remove('hidden');
@@ -97,19 +239,124 @@ async function addWorkspace() {
 async function deleteWorkspace(id) {
   try {
     await api('DELETE', `/api/workspaces/${id}`);
-    workspacesData.value = workspacesData.peek().filter(w => w.id !== id);
-    setCachedWorkspaces(workspacesData.peek());
+    const next = (workspacesData.peek() || []).filter(w => w.id !== id);
+    workspacesData.value = next;
+    setCachedWorkspaces(next);
     renderWsList();
+    fillProfileSelect('');
+    await loadClaudeEnv();
   } catch (e) {
-    alert(e.message);
+    const errEl = $('ws-error');
+    if (errEl) { errEl.textContent = e.message; errEl.classList.remove('hidden'); }
   }
 }
 
-export function openSettings() {
-  renderWsList();
-  const mcp = $('mcp-token-settings');
-  if (mcp) mcp.style.display = hubMode.peek() ? '' : 'none';
-  $('modal-settings')?.showModal();
+async function loadClaudeEnv() {
+  try {
+    const name = $('ae-profile')?.value || '';
+    const q = name ? `?name=${encodeURIComponent(name)}` : '';
+    const data = await api('GET', `/api/agent-env${q}`);
+    const env = data.env || {};
+    const proc = name ? {} : (data.process || {});
+    for (const key of CLAUDE_ENV_FIELDS) {
+      const el = $(`ae-${key}`);
+      if (!el) continue;
+      const v = env[key] ?? proc[key];
+      if (v && typeof v === 'object' && v.set) {
+        el.placeholder = `saved ${v.preview || '••••'}`;
+        el.value = '';
+        el.dataset.keep = '1';
+      } else {
+        el.value = typeof v === 'string' ? v : '';
+        el.placeholder = key;
+        el.dataset.keep = '';
+      }
+    }
+  } catch { /* older edges */ }
+}
+
+async function saveClaudeEnv() {
+  const errEl = $('claude-env-error');
+  errEl?.classList.add('hidden');
+  const env = {};
+  for (const key of CLAUDE_ENV_FIELDS) {
+    const el = $(`ae-${key}`);
+    if (!el) continue;
+    const val = el.value.trim();
+    if (val) env[key] = val;
+    else if (el.dataset.keep === '1') env[key] = { set: true };
+    else env[key] = '';
+  }
+  try {
+    const name = $('ae-profile')?.value || '';
+    await api('PUT', '/api/agent-env', { name, env });
+    await loadClaudeEnv();
+  } catch (e) {
+    if (errEl) { errEl.textContent = e.message; errEl.classList.remove('hidden'); }
+  }
+}
+
+async function loadUsers() {
+  const nav = $('set-nav-users');
+  const panel = document.querySelector('[data-set-panel="users"]');
+  try {
+    const me = await api('GET', '/api/collab/me');
+    const admin = me.role === 'admin' || me.role === 'owner';
+    nav?.classList.toggle('hidden', !admin);
+    if (panel) panel.hidden = !admin || activeSection !== 'users';
+    if (!admin) {
+      if (activeSection === 'users') showSection('claude');
+      return;
+    }
+    const users = await api('GET', '/api/collab/users');
+    const list = $('users-list');
+    const rows = Array.isArray(users) ? users : [];
+    list.innerHTML = rows.map(u =>
+      `<div class="set-row"><div class="text-sm font-medium flex-1">${esc(u.username)}</div><div class="text-xs text-base-content/50">${esc(u.role || '')}</div></div>`
+    ).join('') || '<div class="text-xs text-base-content/40">还没有其他用户</div>';
+  } catch {
+    nav?.classList.add('hidden');
+  }
+}
+
+async function inviteUser() {
+  const errEl = $('users-error');
+  errEl?.classList.add('hidden');
+  const username = $('user-new-name')?.value.trim();
+  const password = $('user-new-pass')?.value || '';
+  const role = $('user-new-role')?.value || 'editor';
+  if (!username || !password) {
+    if (errEl) { errEl.textContent = '需要用户名和密码'; errEl.classList.remove('hidden'); }
+    return;
+  }
+  try {
+    await api('POST', '/api/collab/users', { username, password, role });
+    $('user-new-name').value = '';
+    $('user-new-pass').value = '';
+    await loadUsers();
+  } catch (e) {
+    if (errEl) { errEl.textContent = e.message; errEl.classList.remove('hidden'); }
+  }
+}
+
+async function savePassword() {
+  const errEl = $('pw-error');
+  errEl?.classList.add('hidden');
+  const current = $('pw-current')?.value || '';
+  const next = $('pw-next')?.value || '';
+  const next2 = $('pw-next2')?.value || '';
+  if (next !== next2) {
+    if (errEl) { errEl.textContent = '两次新密码不一致'; errEl.classList.remove('hidden'); }
+    return;
+  }
+  try {
+    await api('POST', '/api/auth/password', { current, next });
+    $('pw-current').value = '';
+    $('pw-next').value = '';
+    $('pw-next2').value = '';
+  } catch (e) {
+    if (errEl) { errEl.textContent = e.message; errEl.classList.remove('hidden'); }
+  }
 }
 
 async function generateMcpToken() {
@@ -119,7 +366,7 @@ async function generateMcpToken() {
   err?.classList.add('hidden');
   const machineId = selectedMachineId.peek();
   if (!machineId) {
-    err.textContent = '请选择一台在线机器后再生成 Token。';
+    err.textContent = '请先在主界面选一台在线机器。';
     err.classList.remove('hidden');
     return;
   }
@@ -127,6 +374,8 @@ async function generateMcpToken() {
     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 || '';
+    const urlEl = $('mcp-token-url');
+    if (urlEl) urlEl.textContent = `${location.origin}/mcp`;
     result.classList.remove('hidden');
   } catch (e) {
     err.textContent = e.message;

package/public/shell/notes.js

@@ -104,6 +104,7 @@ export function renderSessionNotesBar() {
   const note = (meta.notes || '').trim();
   const fav = !!meta.favorite;
   const hid = !!meta.hidden;
+  const branch = meta.branch?.parentSessionId ? meta.branch : null;
   const title = (meta.title || '').trim();
   const showTitle = title || sid.slice(0, 8);
   bar.style.display = 'flex';
@@ -125,6 +126,7 @@ export function renderSessionNotesBar() {
       <span class="font-bold text-base-content/40 uppercase flex-shrink-0">Note:</span>
       <span class="truncate text-base-content/70 ${note ? '' : 'italic text-base-content/40'}"
             id="session-notes-text" title="${esc(note || 'Add a note for this session')}">${esc(note || 'No session note')}</span>
+      ${branch ? `<span class="session-branch-current" title="Forked from ${esc(branch.parentAgent || agent)} · ${esc(branch.parentSessionId)}">⎇ from ${esc(branch.parentSessionId.slice(0, 8))}</span>` : ''}
     </div>
     <button id="btn-edit-session-notes" class="btn btn-ghost btn-xs px-1.5">Note</button>
   `;
@@ -147,7 +149,7 @@ export function renderSessionNotesEditMode() {
 }
 
 function emptyMeta() {
-  return { favorite: false, notes: '', title: '', hidden: false };
+  return { favorite: false, notes: '', title: '', hidden: false, branch: null };
 }
 
 function mergeMeta(prev, patch) {
@@ -156,12 +158,13 @@ function mergeMeta(prev, patch) {
     notes: patch.notes !== undefined ? String(patch.notes || '') : String(prev.notes || ''),
     title: patch.title !== undefined ? String(patch.title || '').trim() : String(prev.title || '').trim(),
     hidden: patch.hidden !== undefined ? Boolean(patch.hidden) : Boolean(prev.hidden),
+    branch: patch.branch !== undefined ? (patch.branch || null) : (prev.branch || null),
     updatedAt: Date.now(),
   };
 }
 
 function isMetaEmpty(m) {
-  return !m?.favorite && !m?.hidden && !(m?.notes || '').trim() && !(m?.title || '').trim();
+  return !m?.favorite && !m?.hidden && !(m?.notes || '').trim() && !(m?.title || '').trim() && !m?.branch;
 }
 
 export async function toggleSessionFavorite(sessionId, agent, { machineId } = {}) {

package/public/shell/session-list.js

@@ -23,6 +23,45 @@ function normalizeSessions(v) {
   return [];
 }
 
+function branchParentKey(branch, session) {
+  if (!branch?.parentSessionId) return '';
+  return metaKey(branch.parentAgent || session.agent, branch.parentSessionId,
+    branch.parentMachineId ?? session.machineId);
+}
+
+/** Keep fork descendants adjacent to their source so the sidebar is a small,
+ * readable conversation tree instead of a flat chronology. */
+function orderBranchSessions(sessions) {
+  const list = Array.isArray(sessions) ? sessions : [];
+  const byKey = new Map(list.map(s => [metaKey(s.agent, s.sessionId, s.machineId), s]));
+  const children = new Map();
+  const roots = [];
+  for (const s of list) {
+    const branch = sessionMetaMap.peek()?.[metaKey(s.agent, s.sessionId, s.machineId)]?.branch;
+    const parent = branchParentKey(branch, s);
+    if (parent && byKey.has(parent) && parent !== metaKey(s.agent, s.sessionId, s.machineId)) {
+      const rows = children.get(parent) || [];
+      rows.push(s);
+      children.set(parent, rows);
+    } else {
+      roots.push(s);
+    }
+  }
+  const byRecent = (a, b) => (b.updatedAt || 0) - (a.updatedAt || 0);
+  roots.sort(byRecent);
+  for (const rows of children.values()) rows.sort(byRecent);
+  const out = [];
+  const visit = (s, depth, seen = new Set()) => {
+    const key = metaKey(s.agent, s.sessionId, s.machineId);
+    if (seen.has(key)) return;
+    seen.add(key);
+    out.push(depth ? { ...s, _branchDepth: depth } : s);
+    for (const child of children.get(key) || []) visit(child, depth + 1, seen);
+  };
+  for (const root of roots) visit(root, 0);
+  return out;
+}
+
 function sessionsQuery({ hubIndex = false } = {}) {
   const q = new URLSearchParams();
   // Project index is small and should remain complete; the Hub/browser cache
@@ -97,6 +136,8 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
   const fav = !!meta.favorite;
   const hid = !!meta.hidden;
   const hasNote = !!(meta.notes && String(meta.notes).trim());
+  const branch = meta.branch?.parentSessionId ? meta.branch : null;
+  const branchDepth = Math.max(0, Math.min(4, Number(s._branchDepth) || 0));
   const turns = Number(s.turnCount) || 0;
   const thin = turns > 0 && turns <= LOW_TURN_THRESHOLD;
   const projectLine = showProject
@@ -107,6 +148,7 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
     renamed ? `<span class="session-renamed-badge" title="Custom name (original: ${esc(s.display || '')})">renamed</span>` : '',
     hid ? `<span class="session-hidden-badge" title="Hidden">hidden</span>` : '',
     hasNote ? `<span class="session-note-dot" title="${esc(meta.notes)}">📝</span>` : '',
+    branch ? `<span class="session-branch-badge" title="Forked from ${esc(branch.parentAgent || s.agent)}:${esc(branch.parentSessionId)}">⎇ fork</span>` : '',
   ].filter(Boolean).join('');
   const machineBadge = s.machineId
     ? `<span class="text-[9px] px-1 py-0.5 rounded bg-base-300 text-base-content/50 font-mono flex-shrink-0" title="Machine">${esc(s.machineId)}</span>`
@@ -114,8 +156,12 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
   const tip = renamed
     ? `${title}\n(original: ${s.display || s.sessionId})`
     : (s.display || '');
-  return `<div class="session-row px-2.5 py-1.5 cursor-pointer hover:bg-base-300 border-l-2
+  const branchLine = branch
+    ? `<div class="session-branch-line" title="Forked from ${esc(branch.parentAgent || s.agent)} · ${esc(branch.parentSessionId)}">↳ ${esc(branch.parentAgent || s.agent)} · ${esc(branch.parentSessionId.slice(0, 8))}</div>`
+    : '';
+  return `<div class="session-row ${branchDepth ? 'session-branch' : ''} px-2.5 py-1.5 cursor-pointer hover:bg-base-300 border-l-2
               ${active ? 'border-primary bg-primary/5' : 'border-transparent'} ${fav ? 'session-fav' : ''} ${hid ? 'session-hidden-row' : ''} ${thin ? 'session-thin' : ''}"
+       style="--branch-depth:${branchDepth}"
        data-session-id="${esc(s.sessionId)}"
        data-session-cwd="${esc(s.cwd || '')}"
        data-session-config-dir="${esc(s.configDir || '')}"
@@ -149,6 +195,7 @@ export function sessionItemHtml(s, { showProject = false } = {}) {
                   title="${hid ? 'Unhide session' : 'Hide session'}">${hid ? '👁' : '🙈'}</button>
         </div>
         ${projectLine}
+        ${branchLine}
         ${badges || machineBadge ? `<div class="flex items-center gap-1 mt-0.5 flex-wrap">${machineBadge}${badges}</div>` : ''}
       </div>
       <span class="text-[9px] text-base-content/30 flex-shrink-0 mt-0.5">${formatTime(s.updatedAt)}</span>
@@ -290,7 +337,8 @@ export function renderProjectGroups(groups) {
           <span class="text-[9px] text-base-content/30 flex-shrink-0">${formatTime(g.updatedAt)}</span>
         </div>
       </div>`;
-    const sessions = g.sessions.slice(0, 40);
+    const ordered = orderBranchSessions(g.sessions);
+    const sessions = ordered.slice(0, 40);
     const more = g.sessions.length > 40
       ? `<div class="px-3 py-1 text-[10px] text-base-content/30">+${g.sessions.length - 40} more</div>` : '';
     const body = open