@bakapiano/ccsm 0.9.0 → 0.10.1

package/public/js/components/Popover.js

@@ -0,0 +1,55 @@
+// Tiny popover primitive — positions a floating panel relative to an
+// anchor element, closes on outside click + Escape. Used by the unified
+// pickers (CLI / Folder / Repo) so they all share interaction behavior.
+//
+// Usage:
+//   const [open, setOpen] = useState(false);
+//   const anchor = useRef(null);
+//   <button ref=${anchor} onClick=${() => setOpen(true)}>Trigger</button>
+//   ${open ? html`<${Popover} anchor=${anchor} onClose=${() => setOpen(false)}>
+//     ...panel contents...
+//   </${Popover}>` : null}
+
+import { html } from '../html.js';
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+
+export function Popover({ anchor, onClose, align = 'left', width, children }) {
+  const panelRef = useRef(null);
+  const [pos, setPos] = useState({ top: 0, left: 0, width: width || 320 });
+
+  useLayoutEffect(() => {
+    const a = anchor && anchor.current;
+    if (!a) return;
+    const rect = a.getBoundingClientRect();
+    const w = width || Math.max(rect.width, 320);
+    let left = align === 'right' ? rect.right - w : rect.left;
+    // Clamp to viewport with 8px margin.
+    left = Math.max(8, Math.min(window.innerWidth - w - 8, left));
+    const top = rect.bottom + 6;
+    setPos({ top, left, width: w });
+  }, [anchor, align, width]);
+
+  useEffect(() => {
+    const onDown = (ev) => {
+      if (panelRef.current?.contains(ev.target)) return;
+      if (anchor.current?.contains(ev.target)) return;
+      onClose?.();
+    };
+    const onKey = (ev) => { if (ev.key === 'Escape') onClose?.(); };
+    document.addEventListener('mousedown', onDown, true);
+    document.addEventListener('keydown', onKey, true);
+    return () => {
+      document.removeEventListener('mousedown', onDown, true);
+      document.removeEventListener('keydown', onKey, true);
+    };
+  }, [anchor, onClose]);
+
+  return createPortal(
+    html`<div ref=${panelRef} class="popover-panel"
+              style=${`top:${pos.top}px;left:${pos.left}px;width:${pos.width}px;`}>
+      ${children}
+    </div>`,
+    document.body
+  );
+}

package/public/js/components/Sidebar.js

@@ -1,32 +1,213 @@
 import { html } from '../html.js';
 import {
-  activeTab, sidebarCollapsed, configDirty, sessions, webTerminals, capabilities,
-  selectTab, toggleSidebar, setSidebarWidth, SIDEBAR_MIN, SIDEBAR_MAX,
+  activeTab, sidebarCollapsed, sidebarForcedCollapsed, configDirty, capabilities, serverHealth,
+  sessions, folders, sessionsByFolder, foldersCollapsed, activeSessionId,
+  selectTab, selectSession, toggleSidebar, toggleFolder, setSidebarWidth,
 } from '../state.js';
+import { createFolder, renameFolder, deleteFolder, reorderFolders, setSessionFolder, deleteSession, resumeSession, setSessionTitle } from '../api.js';
+import { ccsmPrompt, ccsmConfirm } from '../dialog.js';
+import { setToast } from '../toast.js';
+import { fmtAgo } from '../util.js';
+import { clockTick } from '../state.js';
+import { useDragSort } from './useDragSort.js';
 import {
-  IconSessions, IconLaunch, IconTerminal, IconConfigure, IconInfo,
-  IconChevronLeft, BrandMark,
+  IconLaunch, IconConfigure,
+  IconSidebarToggle, IconPencil, IconClose, IconFolder, IconFolderOpen, BrandMark,
 } from '../icons.js';
 
-function NavItem({ tab, icon, label, badge, dirty }) {
+function NavItem({ tab, icon, label, dirty }) {
   const selected = activeTab.value === tab;
-  const cls = `nav-item${dirty ? ' has-changes' : ''}`;
   return html`
-    <button class=${cls} role="tab" aria-selected=${selected ? 'true' : 'false'}
+    <button class=${`nav-item${dirty ? ' has-changes' : ''}${selected ? ' is-active' : ''}`}
+            role="tab" aria-selected=${selected ? 'true' : 'false'}
             onClick=${() => selectTab(tab)}>
       <span class="nav-icon">${icon}</span>
       <span class="nav-label">${label}</span>
-      ${badge != null ? html`<span class="nav-badge">${badge}</span>` : null}
     </button>`;
 }
 
+// One row in the session tree. Click → open in main pane. Right-click /
+// long-press not implemented; "..." menu via the inline kebab.
+function SessionRow({ s }) {
+  clockTick.value; // subscribe for fmtAgo refresh
+  const isActive = activeSessionId.value === s.id;
+  const running = s.status === 'running';
+  const title = s.title || s.workspace || s.id.slice(0, 12);
+
+  const onClick = async (ev) => {
+    ev.preventDefault();
+    selectSession(s.id);
+    // Auto-resume on click if the session is stopped — saves the user
+    // from a second click on the "Resume" button in the right pane.
+    // No-op if already running.
+    if (s.status !== 'running') {
+      try { await resumeSession(s.id); }
+      catch (e) { setToast(e.message, 'error'); }
+    }
+  };
+
+  const onContext = async (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    // Quick menu: Rename / Move / Delete. We use sequential prompts
+    // to avoid building a real context-menu component for now.
+    const action = await ccsmPrompt(
+      `${title} · ${running ? 'running' : 'stopped'}\nType: rename / move / delete / resume / cancel`,
+      'cancel', { title: s.id, okLabel: 'OK' });
+    if (!action) return;
+    const verb = action.trim().toLowerCase();
+    if (verb === 'rename') {
+      const next = await ccsmPrompt('New title', title, { title: 'Rename session', okLabel: 'Save' });
+      if (next === null) return;
+      try { await setSessionTitle(s.id, next.trim()); setToast('renamed'); }
+      catch (e) { setToast(e.message, 'error'); }
+    } else if (verb === 'move') {
+      // Move to a folder by name
+      const folderNames = folders.value.map((f) => f.name).join(', ');
+      const target = await ccsmPrompt(
+        `Move to which folder? (empty = Unsorted)\nExisting: ${folderNames || '(none)'}`,
+        '', { title: 'Move', okLabel: 'Move' });
+      if (target === null) return;
+      const t = target.trim();
+      const folder = t ? folders.value.find((f) => f.name.toLowerCase() === t.toLowerCase()) : null;
+      if (t && !folder) { setToast(`no folder named "${t}"`, 'error'); return; }
+      try { await setSessionFolder(s.id, folder ? folder.id : null); setToast('moved'); }
+      catch (e) { setToast(e.message, 'error'); }
+    } else if (verb === 'delete') {
+      const ok = await ccsmConfirm(`Delete session ${title}? PTY will be killed if alive.`, {
+        title: 'Delete session', okLabel: 'Delete', danger: true });
+      if (!ok) return;
+      try {
+        await deleteSession(s.id);
+        if (activeSessionId.value === s.id) activeSessionId.value = null;
+      } catch (e) { setToast(e.message, 'error'); }
+    } else if (verb === 'resume' && !running) {
+      try { await resumeSession(s.id); selectSession(s.id); }
+      catch (e) { setToast(e.message, 'error'); }
+    }
+  };
+
+  const onRenameClick = async (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const next = await ccsmPrompt('New title', title, { title: 'Rename session', okLabel: 'Save' });
+    if (next === null) return;
+    try { await setSessionTitle(s.id, next.trim()); }
+    catch (e) { setToast(e.message, 'error'); }
+  };
+
+  const onDeleteClick = async (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const ok = await ccsmConfirm(`Delete session ${title}? PTY will be killed if alive.`, {
+      title: 'Delete session', okLabel: 'Delete', danger: true });
+    if (!ok) return;
+    try {
+      await deleteSession(s.id);
+      if (activeSessionId.value === s.id) activeSessionId.value = null;
+    } catch (e) { setToast(e.message, 'error'); }
+  };
+
+  return html`
+    <div class=${`tree-session${isActive ? ' is-active' : ''}${running ? ' is-running' : ' is-stopped'}`}
+         onClick=${onClick}
+         onContextMenu=${onContext}
+         title=${`${title}\n${s.cwd}\n${running ? 'running' : 'stopped'} · ${s.cliId}`}>
+      <span class=${`tree-dot ${running ? 'is-running' : 'is-stopped'}`}></span>
+      <span class="tree-label">${title}</span>
+      <span class="tree-session-actions">
+        <button class="tree-session-action" title="rename" onClick=${onRenameClick}><${IconPencil} /></button>
+        <button class="tree-session-action" title="delete" onClick=${onDeleteClick}><${IconClose} /></button>
+      </span>
+      <span class="tree-meta">${fmtAgo(s.lastActiveAt)}</span>
+    </div>`;
+}
+
+function FolderGroup({ folder, sessionList, dndHandle, dndRow }) {
+  const key = folder ? folder.id : 'unsorted';
+  const collapsed = !!foldersCollapsed.value[key];
+  const name = folder ? folder.name : 'Unsorted';
+  const onToggle = () => toggleFolder(folder ? folder.id : null);
+
+  const onRename = async (ev) => {
+    ev.stopPropagation();
+    if (!folder) return;
+    const next = await ccsmPrompt('Rename folder', folder.name, { title: folder.name, okLabel: 'Save' });
+    if (next === null || !next.trim()) return;
+    try { await renameFolder(folder.id, next.trim()); }
+    catch (e) { setToast(e.message, 'error'); }
+  };
+
+  const onDelete = async (ev) => {
+    ev.stopPropagation();
+    if (!folder) return;
+    const ok = await ccsmConfirm(`Delete folder "${folder.name}"? Sessions inside move to Unsorted.`, {
+      title: 'Delete folder', okLabel: 'Delete', danger: true });
+    if (!ok) return;
+    try { await deleteFolder(folder.id); }
+    catch (e) { setToast(e.message, 'error'); }
+  };
+
+  return html`
+    <div class="tree-folder" ...${dndRow || {}}>
+      <button class=${`tree-folder-head${collapsed ? '' : ' is-open'}`} onClick=${onToggle}
+              ...${dndHandle || {}}>
+        <span class="tree-folder-icon">
+          ${collapsed ? html`<${IconFolder} />` : html`<${IconFolderOpen} />`}
+        </span>
+        <span class="tree-folder-name">${name}</span>
+        ${folder ? html`
+          <span class="tree-folder-actions">
+            <button class="tree-folder-action" title="rename" onClick=${onRename}><${IconPencil} /></button>
+            <button class="tree-folder-action" title="delete" onClick=${onDelete}><${IconClose} /></button>
+          </span>` : null}
+      </button>
+      ${!collapsed ? html`
+        <div class="tree-folder-body">
+          ${sessionList.length === 0
+            ? html`<div class="tree-empty">no sessions</div>`
+            : sessionList.map((s) => html`<${SessionRow} key=${s.id} s=${s} />`)}
+        </div>
+      ` : null}
+    </div>`;
+}
+
+function SessionTree() {
+  const grouped = sessionsByFolder.value;
+  const orderedFolders = folders.value;
+  const dnd = useDragSort(
+    orderedFolders.map((f) => f.id),
+    async (nextIds) => {
+      try { await reorderFolders(nextIds); }
+      catch (e) { setToast(e.message, 'error'); }
+    },
+  );
+
+  const onNewFolder = async () => {
+    const name = await ccsmPrompt('Folder name', '', { title: 'New folder', okLabel: 'Create' });
+    if (!name || !name.trim()) return;
+    try { await createFolder(name.trim()); }
+    catch (e) { setToast(e.message, 'error'); }
+  };
+
+  return html`
+    <div class="tree">
+      <div class="tree-head">
+        <span class="tree-head-label">Sessions</span>
+      </div>
+      ${orderedFolders.map((f) => html`
+        <${FolderGroup} key=${f.id} folder=${f}
+                        sessionList=${grouped.get(f.id) || []}
+                        dndHandle=${dnd.handleProps(f.id)}
+                        dndRow=${dnd.rowProps(f.id)} />`)}
+      <${FolderGroup} folder=${null} sessionList=${grouped.get(null) || []} />
+    </div>`;
+}
+
 export function Sidebar() {
-  const collapsed = sidebarCollapsed.value;
+  const collapsed = sidebarCollapsed.value || sidebarForcedCollapsed.value;
+  const forced = sidebarForcedCollapsed.value;
 
-  // Drag-to-resize handle. Pointer events let one handler cover mouse,
-  // touch, pen uniformly + setPointerCapture means dragging continues
-  // even if cursor leaves the 4px-wide handle. Collapsed sidebars don't
-  // expose a handle — Collapse-toggle is the only way out/in.
   const onResizeStart = (ev) => {
     if (collapsed) return;
     ev.preventDefault();
@@ -34,8 +215,8 @@ export function Sidebar() {
     el.setPointerCapture(ev.pointerId);
     document.body.classList.add('is-resizing-sidebar');
     const move = (e) => setSidebarWidth(e.clientX);
-    const up = (e) => {
-      el.releasePointerCapture(ev.pointerId);
+    const up = () => {
+      try { el.releasePointerCapture(ev.pointerId); } catch {}
       document.body.classList.remove('is-resizing-sidebar');
       el.removeEventListener('pointermove', move);
       el.removeEventListener('pointerup', up);
@@ -48,28 +229,34 @@ export function Sidebar() {
 
   return html`
     <aside class="sidebar" data-collapsed=${collapsed ? 'true' : 'false'}>
-      <div class="sidebar-brand">
-        <span class="brand-mark"><${BrandMark} /></span>
-        <span class="brand-name">CCSM<span class="brand-dot">.</span></span>
+      <div class="sidebar-top">
+        <button class="sidebar-brand sidebar-brand-button"
+                role="tab" aria-selected=${activeTab.value === 'about' ? 'true' : 'false'}
+                title="About"
+                onClick=${() => selectTab('about')}>
+          <span class="brand-mark"><${BrandMark} /></span>
+          <span class="brand-name">CCSM<span class="brand-dot">.</span></span>
+          ${serverHealth.value.version ? html`
+            <span class="brand-version">v${serverHealth.value.version}</span>
+          ` : null}
+        </button>
       </div>
 
-      <nav class="sidebar-nav" role="tablist" aria-label="Sections">
-        <${NavItem} tab="sessions"  icon=${html`<${IconSessions} />`}  label="Sessions"  badge=${sessions.value.length} />
-        <${NavItem} tab="launch"    icon=${html`<${IconLaunch} />`}    label="Launch" />
-        ${capabilities.value.webTerminal ? html`
-          <${NavItem} tab="terminals" icon=${html`<${IconTerminal} />`} label="Terminals" badge=${webTerminals.value.length || null} />
-        ` : null}
-        <${NavItem} tab="configure" icon=${html`<${IconConfigure} />`} label="Configure" dirty=${configDirty.value} />
-        <${NavItem} tab="about"     icon=${html`<${IconInfo} />`}      label="About" />
+      <nav class="sidebar-nav compact" role="tablist" aria-label="Sections">
+        <${NavItem} tab="launch"    icon=${html`<${IconLaunch} />`}    label="New Session" />
+        <${NavItem} tab="configure" icon=${html`<${IconConfigure} />`} label="Settings" dirty=${configDirty.value} />
       </nav>
 
+      ${!collapsed ? html`<${SessionTree} />` : null}
+
       <div class="sidebar-foot">
-        <button class="util-item collapse-toggle" aria-label="collapse sidebar"
-                title=${collapsed ? 'expand sidebar' : 'collapse sidebar'}
-                onClick=${toggleSidebar}>
-          <span class="nav-icon"><${IconChevronLeft} /></span>
-          <span class="nav-label">Collapse</span>
-        </button>
+        ${!forced ? html`
+          <button class="util-item collapse-toggle" aria-label=${collapsed ? 'expand sidebar' : 'collapse sidebar'}
+                  title=${collapsed ? 'expand sidebar' : 'collapse sidebar'}
+                  onClick=${toggleSidebar}>
+            <span class="nav-icon"><${IconSidebarToggle} /></span>
+          </button>
+        ` : null}
       </div>
 
       ${!collapsed ? html`

package/public/js/components/TerminalView.js

@@ -41,7 +41,7 @@ export function TerminalView({ terminalId }) {
     if (!terminalId || !hostRef.current) return;
 
     const term = new Terminal({
-      fontFamily: '"JetBrains Mono", "Cascadia Mono", Consolas, monospace',
+      fontFamily: '"Cascadia Mono", "Geist Mono", "JetBrains Mono", Consolas, monospace',
       fontSize: 13,
       lineHeight: 1.2,
       cursorBlink: true,
@@ -86,7 +86,8 @@ export function TerminalView({ terminalId }) {
     } catch (e) {
       console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
     }
-    term.open(hostRef.current);
+    const host = hostRef.current;
+    term.open(host);
     // Defer fit one tick so the container has measured layout
     requestAnimationFrame(() => { try { fit.fit(); } catch {} });
     termRef.current = term;
@@ -124,6 +125,29 @@ export function TerminalView({ terminalId }) {
     const ro = new ResizeObserver(() => { try { fit.fit(); } catch {} });
     ro.observe(hostRef.current);
 
+    // Tab-switch refresh. The terminal lives inside a .tab-panel which gets
+    // display:none when another tab is active. WebGL renderers keep a glyph
+    // texture atlas in GPU memory; when the canvas hides + redisplays at a
+    // potentially different devicePixelRatio, the atlas isn't invalidated
+    // and old glyphs blend with newly-rasterized ones — visible as scrolling
+    // text ghosting / double-strikes. Watching the tab-panel's data-active
+    // attribute and clearing the atlas + re-fitting + forcing a full
+    // refresh wipes the cache cleanly.
+    const panel = host.closest('.tab-panel');
+    let panelMo = null;
+    if (panel) {
+      panelMo = new MutationObserver(() => {
+        if (panel.hasAttribute('data-active')) {
+          requestAnimationFrame(() => {
+            try { term.clearTextureAtlas?.(); } catch {}
+            try { fit.fit(); } catch {}
+            try { term.refresh(0, term.rows - 1); } catch {}
+          });
+        }
+      });
+      panelMo.observe(panel, { attributes: true, attributeFilter: ['data-active'] });
+    }
+
     // give focus to terminal so user can type immediately
     term.focus();
 
@@ -230,7 +254,6 @@ export function TerminalView({ terminalId }) {
     // we CAN re-anchor the textarea to the right edge while composing so
     // it grows leftward instead. Toggling a class on the host is enough;
     // the CSS in terminals.css does the rest.
-    const host = hostRef.current;
     const onCompStart = () => {
       if (host) host.classList.add('is-composing');
       // The terminal cursor is rendered on canvas (THEME.cursor), so CSS
@@ -260,6 +283,7 @@ export function TerminalView({ terminalId }) {
         helper.removeEventListener('compositionend', onCompEnd);
       }
       ro.disconnect();
+      if (panelMo) panelMo.disconnect();
       try { ws.close(); } catch {}
       try { term.dispose(); } catch {}
       termRef.current = null;

package/public/js/components/useDragSort.js

@@ -0,0 +1,67 @@
+// Lightweight HTML5 drag-reorder helper.
+//
+// Usage:
+//   const dnd = useDragSort(items.map((i) => i.id), async (nextIds) => {
+//     await reorderFolders(nextIds);
+//   });
+//   items.map((it) => html`
+//     <div ...${dnd.rowProps(it.id)}>
+//       <span ...${dnd.handleProps(it.id)}>⋮⋮</span>
+//       ...
+//     </div>`);
+//
+// rowProps spreads onDragOver / onDrop / data-* on the row container.
+// handleProps spreads draggable + onDragStart on the drag handle. We
+// gate "draggable" on the handle so clicks inside the row don't start a
+// drag and the user can still click rows normally.
+
+import { useRef, useState } from 'preact/hooks';
+
+export function useDragSort(ids, onCommit) {
+  const dragging = useRef(null);
+  const [overId, setOverId] = useState(null);
+
+  const handleProps = (id) => ({
+    draggable: true,
+    onDragStart: (ev) => {
+      dragging.current = id;
+      ev.dataTransfer.effectAllowed = 'move';
+      // Setting some data is required for Firefox to actually start a drag.
+      try { ev.dataTransfer.setData('text/plain', id); } catch {}
+    },
+    onDragEnd: () => { dragging.current = null; setOverId(null); },
+  });
+
+  const rowProps = (id) => ({
+    'data-dnd-id': id,
+    'data-dnd-over': overId === id ? 'true' : undefined,
+    onDragOver: (ev) => {
+      if (dragging.current == null || dragging.current === id) return;
+      ev.preventDefault();
+      ev.dataTransfer.dropEffect = 'move';
+      if (overId !== id) setOverId(id);
+    },
+    onDragLeave: (ev) => {
+      // Only clear if the pointer leaves the row entirely (not when entering a child).
+      const rt = ev.relatedTarget;
+      if (rt && ev.currentTarget.contains(rt)) return;
+      if (overId === id) setOverId(null);
+    },
+    onDrop: (ev) => {
+      ev.preventDefault();
+      const src = dragging.current;
+      dragging.current = null;
+      setOverId(null);
+      if (src == null || src === id) return;
+      const cur = [...ids];
+      const from = cur.indexOf(src);
+      const to = cur.indexOf(id);
+      if (from < 0 || to < 0) return;
+      cur.splice(from, 1);
+      cur.splice(to, 0, src);
+      onCommit?.(cur);
+    },
+  });
+
+  return { handleProps, rowProps, draggingId: dragging.current, overId };
+}

package/public/js/dialog.js

@@ -18,11 +18,19 @@ function push(entry) {
   });
 }
 
+const CLOSE_X = html`
+  <button class="modal-close" type="button" aria-label="Close" data-action="cancel">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <line x1="3" y1="3" x2="13" y2="13"/>
+      <line x1="13" y1="3" x2="3" y2="13"/>
+    </svg>
+  </button>`;
+
 export function ccsmConfirm(message, opts = {}) {
   const { title = 'Confirm', okLabel = 'Confirm', cancelLabel = 'Cancel', danger = false } = opts;
   return push({
     render: () => html`<div class="modal modal-dialog">
-      <header class="modal-head"><h2>${title}</h2></header>
+      <header class="modal-head"><h2>${title}</h2>${CLOSE_X}</header>
       <div class="modal-body"><p class="dialog-msg">${message}</p></div>
       <footer class="modal-foot">
         <button class="action" data-action="cancel">${cancelLabel}</button>
@@ -37,7 +45,7 @@ export function ccsmPrompt(message, defaultValue = '', opts = {}) {
   const { title, okLabel = 'Save', cancelLabel = 'Cancel', placeholder = '' } = opts;
   return push({
     render: () => html`<div class="modal modal-dialog">
-      <header class="modal-head"><h2>${title || message}</h2></header>
+      <header class="modal-head"><h2>${title || message}</h2>${CLOSE_X}</header>
       <div class="modal-body">
         ${title ? html`<p class="dialog-msg">${message}</p>` : null}
         <input type="text" class="input" placeholder=${placeholder} value=${defaultValue} />

package/public/js/icons.js

@@ -29,7 +29,33 @@ export const IconRefresh = ic('0 0 24 24', html`
 `, 16);
 
 export const IconChevronLeft = ic('0 0 24 24', html`<polyline points="15 18 9 12 15 6"/>`, 14);
+export const IconChevronRight = ic('0 0 24 24', html`<polyline points="9 18 15 12 9 6"/>`, 14);
+export const IconChevronUp = ic('0 0 24 24', html`<polyline points="18 15 12 9 6 15"/>`, 14);
 export const IconChevronDown = ic('0 0 24 24', html`<polyline points="6 9 12 15 18 9"/>`, 14);
+export const IconArrowRight = ic('0 0 24 24', html`<line x1="5" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18"/>`, 14);
+export const IconHome = ic('0 0 24 24', html`
+  <path d="M3 11l9-8 9 8"/>
+  <path d="M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10"/>
+`, 14);
+export const IconSparkle = ic('0 0 24 24', html`
+  <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>
+  <path d="M19 17l.8 1.6L21 20l-1.2.4L19 22l-.8-1.6L17 20l1.2-.4z"/>
+`, 18);
+// "Workspace" — stacked layers / cube. Used for the launch-page
+// destination pill so it doesn't clash with the folder-tag pill that
+// uses IconFolder.
+export const IconWorkspace = ic('0 0 24 24', html`
+  <path d="M12 2l9 5-9 5-9-5z"/>
+  <path d="M3 12l9 5 9-5"/>
+  <path d="M3 17l9 5 9-5"/>
+`, 16);
+// Sidebar-toggle icon (panel-left). A rectangle with a vertical divider
+// near the left — universally recognised "show/hide sidebar" affordance
+// (Notion, Codex, Linear all use this shape).
+export const IconSidebarToggle = ic('0 0 24 24', html`
+  <rect x="3" y="4" width="18" height="16" rx="2"/>
+  <line x1="9" y1="4" x2="9" y2="20"/>
+`, 14);
 
 export const IconSearch = ic('0 0 24 24', html`
   <circle cx="11" cy="11" r="7"/>
@@ -46,6 +72,17 @@ export const IconPlus = ic('0 0 24 24', html`
   <line x1="5" y1="12" x2="19" y2="12"/>
 `, 22);
 
+// Folder + folder-open. Used in the sidebar session tree to mirror the
+// icon-first style of the top nav items. Open variant for expanded
+// folders so the chevron isn't doing double duty.
+export const IconFolder = ic('0 0 24 24', html`
+  <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>
+`, 16);
+export const IconFolderOpen = ic('0 0 24 24', html`
+  <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1H3V7z"/>
+  <path d="M3 10h18l-2 7a2 2 0 0 1-2 1.5H5A2 2 0 0 1 3 17V10z"/>
+`, 16);
+
 export const IconPencil = ic('0 0 24 24', html`
   <path d="M12 20h9"/>
   <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
@@ -81,6 +118,31 @@ export const IconTerminal = ic('0 0 24 24', html`
   <line x1="12" y1="19" x2="20" y2="19"/>
 `, 18);
 
+// Git branch — for repo selection
+export const IconBranch = ic('0 0 24 24', html`
+  <line x1="6" y1="3" x2="6" y2="15"/>
+  <circle cx="18" cy="6" r="3"/>
+  <circle cx="6" cy="18" r="3"/>
+  <path d="M18 9a9 9 0 0 1-9 9"/>
+`, 18);
+
+// Brand-colored CLI marks. These use external SVG assets (full color),
+// rendered as <img> so the gradients / fills in the file are preserved.
+export const IconClaudeColor = () => html`
+  <img src="./assets/claude-color.svg" alt="" width="18" height="18" style="display:block" />`;
+export const IconCodexColor = () => html`
+  <img src="./assets/codex-color.svg" alt="" width="18" height="18" style="display:block" />`;
+export const IconCopilotColor = () => html`
+  <img src="./assets/copilot-color.svg" alt="" width="18" height="18" style="display:block" />`;
+
+// Pick the right icon for a CLI based on its type field.
+export const IconForCliType = (type) => {
+  if (type === 'claude')  return IconClaudeColor;
+  if (type === 'codex')   return IconCodexColor;
+  if (type === 'copilot') return IconCopilotColor;
+  return IconTerminal;
+};
+
 // Two variants used in the StarButton.
 export const StarOutline = ({ size = 15 } = {}) => html`
   <svg viewBox="0 0 24 24" width=${size} height=${size} fill="none" stroke="currentColor"
@@ -105,9 +167,10 @@ export const BrandMark = () => html`
   <svg viewBox="0 0 32 32" width="32" height="32">
     <rect x="2" y="4" width="28" height="24" rx="3" fill="#1a1815"/>
     <line x1="2" y1="10" x2="30" y2="10" stroke="#faf9f5" stroke-width="0.6" opacity="0.45"/>
-    <circle cx="6"   cy="7" r="1" fill="#faf9f5"/>
-    <circle cx="9.5" cy="7" r="1" fill="#faf9f5" opacity="0.65"/>
-    <circle cx="13"  cy="7" r="1" fill="#faf9f5" opacity="0.4"/>
+    <!-- macOS traffic-light style: red / yellow / green -->
+    <circle cx="6"   cy="7" r="1" fill="#ed6a5e"/>
+    <circle cx="9.5" cy="7" r="1" fill="#f4be4f"/>
+    <circle cx="13"  cy="7" r="1" fill="#62c554"/>
     <text x="16" y="19.5" text-anchor="middle" dominant-baseline="central"
           font-family="'JetBrains Mono', 'Cascadia Mono', 'Consolas', monospace"
           font-weight="700" font-size="10" fill="#faf9f5">ccsm</text>