@bakapiano/ccsm 0.8.3 → 0.9.0

package/README.md

@@ -4,11 +4,11 @@ A single pane over every live Claude Code session on your machine.
 Hosted web UI + tiny local Node daemon. Windows-first; cross-platform
 in progress.
 
-[![open](https://img.shields.io/badge/open-bakapiano.github.io%2Fcssm%2Fv1-1a1815?style=flat-square)](https://bakapiano.github.io/cssm/v1/)
+[![open](https://img.shields.io/badge/open-bakapiano.github.io%2Fccsm%2Fv1-1a1815?style=flat-square)](https://bakapiano.github.io/ccsm/v1/)
 
 ```
 ┌── browser ─────────────────────────┐
-│  https://bakapiano.github.io/cssm/v1/   ← static frontend
+│  https://bakapiano.github.io/ccsm/v1/   ← static frontend
 └────────────┬───────────────────────┘
              │  fetch /api/*   (CORS)
              │  ws://localhost:7777/ws/*
@@ -51,7 +51,7 @@ gets registered.
 ccsm                       # starts the backend, opens the frontend
 ```
 
-Or just visit **https://bakapiano.github.io/cssm/v1/** in any browser.
+Or just visit **https://bakapiano.github.io/ccsm/v1/** in any browser.
 If the backend isn't running, you'll see a "Backend not running" banner
 with a **Start ccsm** button — click it, Windows asks once whether to
 open the `ccsm://` handler (check "Always allow"), and the backend
@@ -119,7 +119,7 @@ ccsm/
 
 ## How "wake on click" works
 
-The hosted frontend (https://bakapiano.github.io/cssm/v1/) lives entirely
+The hosted frontend (https://bakapiano.github.io/ccsm/v1/) lives entirely
 in the browser sandbox — it cannot spawn processes. So when the backend
 is down, the OfflineBanner's **Start ccsm** is a plain
 `<a href="ccsm://start">`. The OS hands that off to a per-user URL
@@ -151,7 +151,7 @@ Every gracefulShutdown saves a final snapshot before exit.
 ## Dev
 
 ```bash
-git clone https://github.com/bakapiano/cssm
+git clone https://github.com/bakapiano/ccsm
 cd cssm
 npm install
 node server.js
@@ -175,8 +175,8 @@ build feature-detects via `/api/capabilities`, so a slightly older
 backend still works as long as it advertises the needed feature.
 
 ```
-https://bakapiano.github.io/cssm/v1/   ← current
-https://bakapiano.github.io/cssm/v2/   ← future, when /api breaking-changes
+https://bakapiano.github.io/ccsm/v1/   ← current
+https://bakapiano.github.io/ccsm/v2/   ← future, when /api breaking-changes
 ```
 
 Installed PWAs are pinned to whichever path they were installed from.

package/bin/ccsm.js

@@ -176,7 +176,7 @@ function isSameVersion(running) {
   }
   console.log(`ccsm started · v${ready.version}`);
   console.log(`backend:  http://localhost:${actualPort}${actualPort !== port ? `  (preferred ${port} was taken)` : ''}`);
-  console.log(`frontend: https://bakapiano.github.io/cssm/v1/`);
+  console.log(`frontend: https://bakapiano.github.io/ccsm/v1/`);
   console.log(`logs:     ${LOG}`);
 
   // First-run hint — printed once, then a marker file makes us quiet.

package/lib/config.js

@@ -21,6 +21,11 @@ const DEFAULTS = {
   claudeCommand: 'claude',
   terminal: 'wt',
   commandShell: 'pwsh',
+  // 'wt'  — open a new Windows Terminal window (or whatever `terminal` is set to)
+  // 'web' — spawn in-process PTY, attach via xterm.js in the Terminals tab
+  // Used as the default for new sessions, resume, continue, finder.
+  // Per-launch radio in the UI can still override.
+  defaultTerminalMode: 'wt',
   autoFocusOnLaunch: true,
   focusMovesToCenter: false,
   // 'app'  — Edge/Chrome --app=<url> chromeless window (looks like a desktop app)

package/lib/webTerminal.js

@@ -33,6 +33,8 @@ function genId() {
   return 'web-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
 }
 
+
+
 // Spawn a new PTY. `command` and `args` are passed straight to node-pty.
 // `meta` is whatever the caller wants surfaced to the UI (title, cwd, etc).
 // Throws if node-pty isn't available.
@@ -43,12 +45,25 @@ function spawn({ command, args = [], cwd, env, cols = 120, rows = 30, meta = {}
     throw err;
   }
   const id = genId();
-  const proc = pty.spawn(command, args, {
+  // useConpty: new ConPTY API (Win10 1809+). node-pty defaults this true on
+  // Windows, but spell it out so we know we're on the modern path.
+  // useConptyDll: opt-in to the newest, separately-versioned conpty.dll
+  // (node-pty 1.0+, Windows 10 1809+ if the dll is present). This is the
+  // path VSCode uses (see vscode/src/vs/platform/terminal/node/terminalProcess.ts)
+  // — it has a larger stdin buffer and doesn't split bracketed-paste
+  // payloads across multiple child-process reads, so claude code's
+  // [Pasted text] chip detection actually fires.
+  const ptyOpts = {
     name: 'xterm-256color',
     cols, rows,
     cwd: cwd ? path.resolve(cwd) : process.cwd(),
     env: { ...process.env, ...(env || {}) },
-  });
+  };
+  if (process.platform === 'win32') {
+    ptyOpts.useConpty = true;
+    ptyOpts.useConptyDll = true;
+  }
+  const proc = pty.spawn(command, args, ptyOpts);
   const entry = {
     id,
     pty: proc,
@@ -110,7 +125,14 @@ function attach(id, ws) {
     if (entry.exitedAt) return;  // PTY is dead, ignore further input
     switch (event.type) {
       case 'input':
-        if (typeof event.data === 'string') entry.pty.write(event.data);
+        if (typeof event.data === 'string') {
+          if (process.env.CCSM_DEBUG_PASTE === '1') {
+            const d = event.data;
+            const hex = Buffer.from(d, 'utf8').toString('hex').match(/.{1,2}/g).join(' ');
+            console.log(`[pty.write id=${id}] len=${d.length} hex=${hex.slice(0, 400)}${hex.length > 400 ? '...' : ''}`);
+          }
+          entry.pty.write(event.data);
+        }
         break;
       case 'resize':
         if (Number(event.cols) > 0 && Number(event.rows) > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Claude Code Session Manager — Windows web UI to manage many concurrent claude sessions: live list, snapshot/restore, focus existing window, new session in an isolated workspace with repo clones",
   "license": "MIT",
   "main": "server.js",
@@ -44,12 +44,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/bakapiano/cssm.git"
+    "url": "git+https://github.com/bakapiano/ccsm.git"
   },
   "bugs": {
-    "url": "https://github.com/bakapiano/cssm/issues"
+    "url": "https://github.com/bakapiano/ccsm/issues"
   },
-  "homepage": "https://github.com/bakapiano/cssm#readme",
+  "homepage": "https://github.com/bakapiano/ccsm#readme",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/public/css/forms.css

@@ -280,3 +280,54 @@ input[type="checkbox"]:checked::after {
 .repos-table thead th:last-child,
 .repos-table tbody td:last-child { padding-right: var(--s-2); }
 .repos-table tbody td input { font-size: 12px; max-width: none; }
+
+/* Theme accent picker (Configure tab). 8 swatches + native color picker
+   + hex input + reset. Swatches are filled circles; the active one wears
+   a subtle ring in --ink so it pops on any accent. */
+.accent-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+.accent-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+}
+.accent-swatch {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  padding: 0;
+  transition: transform .12s ease, box-shadow .12s ease;
+}
+.accent-swatch:hover { transform: scale(1.08); }
+.accent-swatch.is-active {
+  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
+}
+.accent-custom {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+.accent-custom input[type="color"] {
+  width: 36px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  background: var(--bg-elev);
+  cursor: pointer;
+}
+.accent-hex {
+  font-family: var(--mono);
+  font-size: 12px;
+  width: 96px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  background: var(--bg-elev);
+}

package/public/css/layout.css

@@ -9,6 +9,11 @@
 .app:has(.sidebar[data-collapsed="true"]) {
   grid-template-columns: var(--sidebar-w-collapsed) 1fr;
 }
+/* While dragging the sidebar resize handle, kill the transition so the
+   grid tracks pointermove pixel-for-pixel instead of lagging behind. */
+body.is-resizing-sidebar .app {
+  transition: none;
+}
 
 .main {
   display: flex;

package/public/css/sidebar.css

@@ -9,7 +9,10 @@
   display: flex;
   flex-direction: column;
   padding: var(--s-4) var(--s-3);
-  overflow: hidden;
+  /* visible: let the resize handle (positioned at right: -3px) overflow the
+     sidebar's right edge. We instead clip the things that USED to need
+     this via the .sidebar-nav scroll region. */
+  overflow: visible;
   transition: padding .25s cubic-bezier(.4, 0, .2, 1);
 }
 .sidebar[data-collapsed="true"] {
@@ -163,3 +166,37 @@
 .sidebar[data-collapsed="true"] .collapse-toggle .nav-icon {
   transform: rotate(180deg);
 }
+
+/* Drag-to-resize handle. Sits absolutely against the sidebar's right
+   border so the cursor target spans the full height. 6px wide hit area
+   centered on the visible 1px border — easy to grab without bumping
+   into adjacent layout. */
+.sidebar-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 5;
+  touch-action: none;
+  /* Subtle hover indicator: deepens the border-right color on hover so the
+     user knows the edge is interactive. */
+  background: transparent;
+  transition: background .12s ease;
+}
+.sidebar-resize-handle:hover,
+body.is-resizing-sidebar .sidebar-resize-handle {
+  background: linear-gradient(to right, transparent 0, transparent 2px,
+                              var(--ink-mid) 2px, var(--ink-mid) 3px,
+                              transparent 3px);
+}
+/* While dragging, freeze global cursor + suppress text selection so the
+   whole page tracks resize cleanly even if pointer leaves the handle. */
+body.is-resizing-sidebar {
+  cursor: col-resize !important;
+  user-select: none;
+}
+body.is-resizing-sidebar * {
+  cursor: col-resize !important;
+}

package/public/css/terminals.css

@@ -91,6 +91,50 @@
   flex: 1;
   min-height: 0;
   width: 100%;
+  /* IME composition (Chinese/Japanese pinyin) lives in absolutely-positioned
+     .xterm-helper-textarea + .composition-view that grow with the composed
+     string. Near the right edge they overflow the viewport and trigger a
+     horizontal scrollbar that visually "pushes" the layout. Clip here so
+     the overflow is silently absorbed instead of expanding the page.
+     Do NOT touch the textarea/composition-view's own text properties —
+     xterm relies on their single-line behaviour to keep IME events firing
+     correctly (forcing pre-wrap / break-all eats compositionupdate events
+     in Chromium and Chinese input stops working entirely). */
+  overflow: hidden;
+  contain: layout;
+}
+/* While the user is composing (IME), pin the helper textarea to the right
+   edge of the terminal so it grows leftward instead of pushing the layout
+   rightward. Only touches positioning — NOT width / wrap / max-width, which
+   would break Chromium's compositionupdate event flow and stop Chinese
+   input from working. The class is toggled by TerminalView.js. */
+.terminal-host.is-composing .xterm-helper-textarea {
+  left: auto !important;
+  right: 0 !important;
+  text-align: right;
+  /* xterm un-hides the textarea during composition so the user can see the
+     composed string inline. We've moved it to the right edge to stop it
+     pushing layout — but that means the composed pinyin would now visibly
+     appear on the right. Hide its glyphs (caret + text) so the user only
+     sees the OS-native IME candidate popup, which floats independently
+     and is unaffected. */
+  color: transparent !important;
+  caret-color: transparent !important;
+  background: transparent !important;
+  text-shadow: none !important;
+}
+/* xterm also overlays a .composition-view (a small box at the cursor with
+   the in-progress string + a gold caret using THEME.cursor). We can't
+   display:none it — Chromium needs it in the layout tree to keep the IME
+   compositionupdate events flowing — but we can make it visually invisible
+   while leaving it laid out. */
+.terminal-host .composition-view {
+  opacity: 0 !important;
+  color: transparent !important;
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  pointer-events: none;
 }
 /* Don't override xterm's background — its renderer (canvas/WebGL) assumes
    an opaque surface and ghosts on scroll if we force transparent. The

package/public/css/wco.css

@@ -58,6 +58,34 @@ body.is-app .sidebar-brand {
 }
 body.is-app .page-head {
   padding-top: var(--s-8); /* 32px = old main.pt */
+  /* Reserve space on the right for the OS window controls (close /
+     maximize / minimize) that float over the top-right of every
+     chromeless app window — both --app= (display-mode: standalone)
+     and PWA. Without this, the server-status pill + Refresh button
+     slide under those controls and stop being clickable. ~150px covers
+     three Windows controls + a little breathing room; macOS traffic
+     lights are on the left so this is harmless there. The WCO override
+     below uses the precise env() value when the API is available. */
+  padding-right: 150px;
+}
+
+/* In app/PWA mode, hide the in-page title/subtitle entirely. The sidebar
+   nav already tells the user which section they're on, and the OS title
+   bar (or the floating WCO controls) is the only chrome we want. This
+   reclaims a chunky 60+ px of vertical real estate at the top of every
+   tab — really noticeable in the Terminals tab where xterm benefits
+   from every pixel. The page-head wrapper survives because it still
+   hosts the status pill + Refresh button on the right and remains
+   draggable. */
+body.is-app .page-title,
+body.is-app .page-subtitle {
+  display: none;
+}
+body.is-app .page-head {
+  padding-bottom: 0;
+  border-bottom: 0;
+  align-items: center;
+  min-height: 28px;
 }
 
 /* WCO-only · the OS title bar is fully gone, so right-pad the page-head
@@ -66,5 +94,6 @@ body.is-app .page-head {
 @media (display-mode: window-controls-overlay) {
   .page-head {
     padding-right: calc(var(--s-10) + 100vw - env(titlebar-area-width, 100vw));
+    min-height: env(titlebar-area-height, 32px);
   }
 }

package/public/index.html

@@ -11,7 +11,7 @@
     <title>CCSM — Claude CLI Sessions Manager</title>
     <!-- All asset paths are RELATIVE so the same index.html works when
          served from localhost:7777/ (backend bundle) AND from
-         https://bakapiano.github.io/cssm/v1/ (GH Pages hosted). -->
+         https://bakapiano.github.io/ccsm/v1/ (GH Pages hosted). -->
     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
     <link rel="manifest" href="./manifest.webmanifest" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -43,7 +43,9 @@
           "htm":                "https://esm.sh/htm@3.1.1",
           "@xterm/xterm":       "https://esm.sh/@xterm/xterm@5.5.0",
           "@xterm/addon-fit":   "https://esm.sh/@xterm/addon-fit@0.10.0?deps=@xterm/xterm@5.5.0",
-          "@xterm/addon-web-links": "https://esm.sh/@xterm/addon-web-links@0.11.0?deps=@xterm/xterm@5.5.0"
+          "@xterm/addon-web-links": "https://esm.sh/@xterm/addon-web-links@0.11.0?deps=@xterm/xterm@5.5.0",
+          "@xterm/addon-clipboard": "https://esm.sh/@xterm/addon-clipboard@0.1.0?deps=@xterm/xterm@5.5.0",
+          "@xterm/addon-webgl": "https://esm.sh/@xterm/addon-webgl@0.18.0?deps=@xterm/xterm@5.5.0"
         }
       }
     </script>

package/public/js/actions.js

@@ -1,8 +1,8 @@
 // Mutation actions shared by SessionsPage, FavoritesTable etc. — each
 // optimistically updates the relevant signal and rolls back on error.
 
-import { favorites, labels, sessions, recent } from './state.js';
-import { api, loadSessions, loadRecent } from './api.js';
+import { favorites, labels, sessions, recent, config, capabilities, activeTerminalId, selectTab } from './state.js';
+import { api, loadSessions, loadRecent, loadWebTerminals } from './api.js';
 import { setToast } from './toast.js';
 import { ccsmPrompt } from './dialog.js';
 
@@ -68,10 +68,20 @@ export async function focusSession(sessionId) {
 
 export async function resumeSession(sessionId, cwd, { kind = 'resume' } = {}) {
   if (!cwd) return setToast('no cwd for this session', 'error');
+  const wantWeb = capabilities.value?.webTerminal
+    && (config.value?.defaultTerminalMode || 'wt') === 'web';
+  const terminal = wantWeb ? 'web' : 'wt';
   try {
-    await api('POST', `/api/sessions/${sessionId}/resume`, { cwd });
-    const verb = kind === 'continue' ? 'continuing' : 'opening wt';
-    setToast(`${verb} · ${sessionId.slice(0, 8)}…`);
+    const r = await api('POST', `/api/sessions/${sessionId}/resume`, { cwd, terminal });
+    if (r.launched?.mode === 'web') {
+      setToast(`${kind === 'continue' ? 'continuing' : 'resuming'} in web · ${sessionId.slice(0, 8)}…`);
+      await loadWebTerminals();
+      if (r.launched.id) activeTerminalId.value = r.launched.id;
+      selectTab('terminals');
+    } else {
+      const verb = kind === 'continue' ? 'continuing' : 'opening wt';
+      setToast(`${verb} · ${sessionId.slice(0, 8)}…`);
+    }
     if (kind === 'continue') {
       setTimeout(() => loadSessions().catch(() => {}), 3000);
       setTimeout(() => loadRecent().catch(() => {}), 4000);
@@ -80,8 +90,18 @@ export async function resumeSession(sessionId, cwd, { kind = 'resume' } = {}) {
 }
 
 export async function runFinder() {
+  const wantWeb = capabilities.value?.webTerminal
+    && (config.value?.defaultTerminalMode || 'wt') === 'web';
+  const terminal = wantWeb ? 'web' : 'wt';
   try {
-    await api('POST', '/api/sessions/finder');
-    setToast('finder session launching in a new wt window');
+    const r = await api('POST', '/api/sessions/finder', { terminal });
+    if (r.launched?.mode === 'web') {
+      await loadWebTerminals();
+      if (r.launched.id) activeTerminalId.value = r.launched.id;
+      selectTab('terminals');
+      setToast('finder launching in web terminal');
+    } else {
+      setToast('finder session launching in a new wt window');
+    }
   } catch (e) { setToast(e.message, 'error'); }
 }

package/public/js/components/NewSessionModal.js

@@ -5,8 +5,8 @@
 import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
 import { signal } from '@preact/signals';
-import { modalOpen, config } from '../state.js';
-import { api, loadWorkspaces } from '../api.js';
+import { modalOpen, config, capabilities, activeTerminalId, selectTab } from '../state.js';
+import { api, loadWorkspaces, loadWebTerminals } from '../api.js';
 import { setToast } from '../toast.js';
 import { streamNewSession, resetProgress } from '../streaming.js';
 import { IconClose } from '../icons.js';
@@ -51,29 +51,40 @@ function ModalBody() {
 
   const onLaunch = async () => {
     const repos = [...modalSelected.value];
-    if (repos.length === 0) return setToast('select at least one repo', 'error');
     setBusy(true);
     setResult('');
     resetProgress(repos, ROOT_ID);
+    const wantWeb = capabilities.value?.webTerminal
+      && (config.value?.defaultTerminalMode || 'wt') === 'web';
+    const terminal = wantWeb ? 'web' : 'wt';
     try {
       const final = await streamNewSession(
-        { repos, workspace: workspace || undefined },
+        { repos, workspace: workspace || undefined, terminal },
         {
           progressRootId: ROOT_ID,
           onMeta: (ev) => {
             if (ev.type === 'workspace') {
               setResult(`workspace: ${ev.workspace.path}${ev.created ? ' · newly created' : ''}`);
             } else if (ev.type === 'launched') {
-              setResult(`terminal launching · pid ${ev.launched.pid} · ${ev.launched.terminal}`);
+              const l = ev.launched || {};
+              if (l.mode === 'web') setResult(`web terminal launched · pid ${l.pid} · id ${l.id}`);
+              else setResult(`terminal launching · pid ${l.pid} · ${l.terminal}`);
             }
           },
         },
       );
       if (final.success) {
         const summary = (final.cloneResults || []).map((c) => `${c.repo}: ${c.action || c.error}`).join(' · ');
-        setResult(`launched in ${final.workspace.path}${final.created ? ' · newly created' : ''} — ${summary}`);
+        setResult(`launched in ${final.workspace.path}${final.created ? ' · newly created' : ''}${summary ? ' — ' + summary : ''}`);
         setToast(`launched · ${final.workspace.name}`);
-        setTimeout(close, 1500);
+        if (terminal === 'web' && final.launched?.id) {
+          activeTerminalId.value = final.launched.id;
+          await loadWebTerminals();
+          selectTab('terminals');
+          modalOpen.value = false;
+        } else {
+          setTimeout(close, 1500);
+        }
       } else {
         setResult(`error: ${final.error}`);
         setToast(final.error || 'new session failed', 'error');

package/public/js/components/OfflineBanner.js

@@ -1,5 +1,5 @@
 // Shown when the backend probe fails. The hosted frontend (running at
-// https://bakapiano.github.io/cssm/v1/) can't spawn processes directly,
+// https://bakapiano.github.io/ccsm/v1/) can't spawn processes directly,
 // so we surface a ccsm://start link instead. Windows / OS will hand that
 // off to the registered protocol handler (ccsm.cmd), which spawns the
 // backend silently. Our health probe picks it up on the next tick and

package/public/js/components/Sidebar.js

@@ -1,7 +1,7 @@
 import { html } from '../html.js';
 import {
   activeTab, sidebarCollapsed, configDirty, sessions, webTerminals, capabilities,
-  selectTab, toggleSidebar,
+  selectTab, toggleSidebar, setSidebarWidth, SIDEBAR_MIN, SIDEBAR_MAX,
 } from '../state.js';
 import {
   IconSessions, IconLaunch, IconTerminal, IconConfigure, IconInfo,
@@ -23,6 +23,29 @@ function NavItem({ tab, icon, label, badge, dirty }) {
 export function Sidebar() {
   const collapsed = sidebarCollapsed.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();
+    const el = ev.currentTarget;
+    el.setPointerCapture(ev.pointerId);
+    document.body.classList.add('is-resizing-sidebar');
+    const move = (e) => setSidebarWidth(e.clientX);
+    const up = (e) => {
+      el.releasePointerCapture(ev.pointerId);
+      document.body.classList.remove('is-resizing-sidebar');
+      el.removeEventListener('pointermove', move);
+      el.removeEventListener('pointerup', up);
+      el.removeEventListener('pointercancel', up);
+    };
+    el.addEventListener('pointermove', move);
+    el.addEventListener('pointerup', up);
+    el.addEventListener('pointercancel', up);
+  };
+
   return html`
     <aside class="sidebar" data-collapsed=${collapsed ? 'true' : 'false'}>
       <div class="sidebar-brand">
@@ -48,5 +71,13 @@ export function Sidebar() {
           <span class="nav-label">Collapse</span>
         </button>
       </div>
+
+      ${!collapsed ? html`
+        <div class="sidebar-resize-handle" role="separator" aria-orientation="vertical"
+             aria-label="resize sidebar"
+             title="drag to resize · double-click to reset"
+             onPointerDown=${onResizeStart}
+             onDblClick=${() => setSidebarWidth(232)}></div>
+      ` : null}
     </aside>`;
 }