@bakapiano/ccsm 0.8.4 → 0.10.0

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,52 +1,270 @@
 import { html } from '../html.js';
 import {
-  activeTab, sidebarCollapsed, configDirty, sessions, webTerminals, capabilities,
-  selectTab, toggleSidebar,
+  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;
+
+  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 = () => {
+      try { el.releasePointerCapture(ev.pointerId); } catch {}
+      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">
-        <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`
+        <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>`;
 }

package/public/js/components/TerminalView.js

@@ -7,6 +7,8 @@ import { useEffect, useRef } from 'preact/hooks';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
+import { ClipboardAddon } from '@xterm/addon-clipboard';
+import { WebglAddon } from '@xterm/addon-webgl';
 import { wsBase } from '../backend.js';
 
 // Dark xterm theme. We give the terminal a near-black ink background to
@@ -39,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,
@@ -47,11 +49,45 @@ export function TerminalView({ terminalId }) {
       scrollback: 5000,
       allowProposedApi: true,
       theme: THEME,
+      // Modern keyboard protocols. Without these, xterm.js encodes
+      // Shift+Enter, Ctrl+Enter, Ctrl+Shift+key etc. the same as their
+      // unmodified versions (e.g. both Enter and Shift+Enter send \r),
+      // so TUIs like claude code can't tell them apart.
+      //
+      // - kittyKeyboard: opt-in protocol that apps enable per-session;
+      //   xterm emits CSI u sequences that uniquely encode every modifier
+      //   combo. Claude / vim / fish recognise it.
+      // - win32InputMode: ConPTY-specific protocol that surfaces raw
+      //   Win32 KEY_EVENT_RECORD to the child process, again preserving
+      //   modifier info. Required for full key fidelity on Windows.
+      // (Same set VSCode enables — see vscode/src/.../xtermTerminal.ts)
+      vtExtensions: {
+        kittyKeyboard: true,
+        win32InputMode: true,
+      },
     });
     const fit = new FitAddon();
     term.loadAddon(fit);
     term.loadAddon(new WebLinksAddon());
-    term.open(hostRef.current);
+    // OSC 52 clipboard integration. Lets TUI apps initiate clipboard reads/
+    // writes via escape sequences (e.g. `tmux set-buffer` or claude code
+    // saying "copied to clipboard"). Does NOT handle the browser-side
+    // Ctrl+V — that's still our document-level paste handler below.
+    term.loadAddon(new ClipboardAddon());
+    // WebGL renderer for performance. The default DOM renderer struggles
+    // when claude code produces dense color output (its diff panels,
+    // syntax-highlighted code). WebGL paints onto a canvas, much smoother
+    // at thousands-of-cells per frame. Falls back to DOM if WebGL is
+    // unavailable (e.g. older GPU, hardware accel disabled).
+    try {
+      const webgl = new WebglAddon();
+      webgl.onContextLoss(() => { try { webgl.dispose(); } catch {} });
+      term.loadAddon(webgl);
+    } catch (e) {
+      console.warn('[ccsm] WebGL addon failed, using DOM renderer:', e);
+    }
+    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;
@@ -89,11 +125,165 @@ 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();
 
+    // Explicit paste handler. xterm.js relies on the browser routing paste
+    // events to its hidden .xterm-helper-textarea, which only works if that
+    // textarea has focus at the moment of Ctrl+V. When the user clicks
+    // elsewhere then hits Ctrl+V over the terminal, or pastes via the
+    // right-click menu on the host div, the event lands on the host and
+    // xterm never sees it. Catch it here and route through term.paste()
+    // so xterm wraps the text in bracketed-paste markers when the app
+    // (claude code) has DECSET 2004 enabled — that's what makes claude
+    // show the "[Pasted text]" affordance instead of treating it as
+    // typed input.
+    const isOurs = () => {
+      const ae = document.activeElement;
+      return ae && host.contains(ae);
+    };
+    const doPaste = (text) => {
+      if (!text) return;
+      if (ws.readyState !== 1) return;
+      // Normalize line endings to \r (CR / Enter). This mirrors VSCode's
+      // terminal sendText path (terminalInstance.ts ~L1385):
+      //   text = text.replace(/\r?\n/g, '\r');
+      // Bracketed-paste markers protect each \r from being interpreted
+      // as a submit by the host app — claude / pwsh / vim all treat
+      // bracketed contents as opaque payload regardless of what's inside.
+      // Use \n instead and you trip apps that look for "real" line breaks.
+      const normalized = text.replace(/\r?\n/g, '\r');
+      // Wrap in bracketed-paste markers. Claude Code enables DECSET 2004
+      // on startup, so the markers let it detect a paste and render
+      // "[Pasted text]". If the host app doesn't have bracketed paste on,
+      // it just sees two ignored escape sequences plus the text.
+      const wrapped = `\x1b[200~${normalized}\x1b[201~`;
+      ws.send(JSON.stringify({ type: 'input', data: wrapped }));
+    };
+    const onPaste = async (ev) => {
+      if (!isOurs()) return;
+      let text = '';
+      if (ev.clipboardData) text = ev.clipboardData.getData('text');
+      if (!text && navigator.clipboard) {
+        try { text = await navigator.clipboard.readText(); } catch {}
+      }
+      if (!text) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      doPaste(text);
+    };
+    document.addEventListener('paste', onPaste, true);
+
+    // Ctrl/Cmd+V fallback for cases the paste event is suppressed (some
+    // extensions, or when our IME workaround moved the helper textarea
+    // off-screen and the browser refuses to fire paste on it).
+    // IMPORTANT: preventDefault must happen synchronously, BEFORE the
+    // await on navigator.clipboard.readText(). If we let the event tick
+    // run first, xterm's keystroke handler converts Ctrl+V into the raw
+    // ^V (0x16) control byte and ships it before our async paste even
+    // resolves.
+    const onKey = (ev) => {
+      const meta = ev.ctrlKey || ev.metaKey;
+      if (!meta || ev.key.toLowerCase() !== 'v') return;
+      if (ev.shiftKey || ev.altKey) return;
+      if (!isOurs()) return;
+      if (!navigator.clipboard?.readText) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      navigator.clipboard.readText().then((text) => {
+        if (text) doPaste(text);
+      }).catch(() => {});
+    };
+    document.addEventListener('keydown', onKey, true);
+
+    // Shift+Enter / Ctrl+Enter → insert literal newline, don't submit.
+    // Background: xterm.js encodes BOTH plain Enter and Shift+Enter and
+    // Ctrl+Enter as \r (0x0D / CR). The kitty keyboard / win32 input
+    // protocols (enabled in vtExtensions above) WOULD distinguish them,
+    // but they're opt-in by the running app — claude code doesn't enable
+    // either, so we never get the distinction "for free".
+    //
+    // Send the LF (0x0A) explicitly. Claude code (and most modern TUIs)
+    // treat \n inside a prompt as a literal newline insert, \r as submit.
+    // Alt+Enter already works (xterm sends \x1b\r → meta-enter) so we
+    // leave that alone.
+    const onShiftEnter = (ev) => {
+      if (ev.key !== 'Enter') return;
+      if (!(ev.shiftKey || ev.ctrlKey)) return;
+      if (ev.metaKey || ev.altKey) return;
+      if (!isOurs()) return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      ev.stopImmediatePropagation();
+      if (ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: 'input', data: '\n' }));
+      }
+    };
+    document.addEventListener('keydown', onShiftEnter, true);
+
+    // IME fix: xterm positions .xterm-helper-textarea via `left: <col-px>`
+    // following the cursor. When the cursor is near the right edge and the
+    // user starts composing (e.g. Chinese pinyin), the textarea + native
+    // composition popup grow with the composed string and overflow the
+    // terminal host — which visually pushes the layout right. We can't cap
+    // width / change wrapping (that breaks Chromium's IME event flow), but
+    // 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 onCompStart = () => {
+      if (host) host.classList.add('is-composing');
+      // The terminal cursor is rendered on canvas (THEME.cursor), so CSS
+      // can't hide it. Theme swap alone doesn't reliably stop the blink
+      // frame loop, so also issue the DECTCEM hide sequence which the
+      // renderer honours immediately.
+      try { term.options.theme = { ...THEME, cursor: 'transparent', cursorAccent: 'transparent' }; } catch {}
+      try { term.write('\x1b[?25l'); } catch {}
+    };
+    const onCompEnd   = () => {
+      if (host) host.classList.remove('is-composing');
+      try { term.options.theme = THEME; } catch {}
+      try { term.write('\x1b[?25h'); } catch {}
+    };
+    const helper = host?.querySelector('.xterm-helper-textarea');
+    if (helper) {
+      helper.addEventListener('compositionstart', onCompStart);
+      helper.addEventListener('compositionend', onCompEnd);
+    }
+
     return () => {
+      document.removeEventListener('paste', onPaste, true);
+      document.removeEventListener('keydown', onKey, true);
+      document.removeEventListener('keydown', onShiftEnter, true);
+      if (helper) {
+        helper.removeEventListener('compositionstart', onCompStart);
+        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 };
+}