@bakapiano/ccsm 0.20.1 → 0.21.0

package/public/js/components/TerminalView.js

@@ -215,50 +215,74 @@ export function TerminalView({ terminalId, cliType }) {
     if (dev) params.set('device', dev);
     const qs = params.toString();
     const wsUrl = `${wsBase()}/ws/terminal/${encodeURIComponent(terminalId)}${qs ? `?${qs}` : ''}`;
-    const ws = new WebSocket(wsUrl);
-    ws.binaryType = 'arraybuffer';
-    wsRef.current = ws;
+    // Auto-reconnect. Mobile networks drop the WS constantly (radio sleep,
+    // cell↔wifi handoff, tab backgrounding) — leaving a dead "[disconnected]"
+    // terminal is the #1 mobile annoyance. We retry with capped backoff and
+    // re-attach to the same PTY. The server replays its FULL history on every
+    // attach (lib/webTerminal.js), so on a reconnect we reset the screen
+    // first, otherwise the replay stacks on top of what's already shown.
+    let closedByUs = false;
+    let reconnectTimer = null;
+    let attempts = 0;
+    let everOpened = false;
 
-    ws.onopen = () => {
-      // Fit synchronously here before reading cols/rows. On localhost the
-      // WS handshake usually completes within a few ms — well before the
-      // rAF-scheduled initial fit runs — so without this we'd ship the
-      // xterm.js default 80x24 to the PTY, claude would print its prompt
-      // wrapped at 80 cols, and the follow-up resize from the rAF fit
-      // wouldn't reflow the already-emitted bytes. Visible as squeezed
-      // text on every session switch.
-      scheduleFit();
-      ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
-    };
-    ws.onmessage = (ev) => {
-      let frame;
-      try { frame = JSON.parse(ev.data); } catch { return; }
-      if (frame.type === 'output') {
-        term.write(frame.data);
-      } else if (frame.type === 'exit') {
-        term.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
-      }
-    };
-    ws.onclose = (ev) => {
-      // Server uses code 4001 + reason "displaced by another client"
-      // when a fresh attach takes over the session (latest-wins policy
-      // in lib/webTerminal.js's attach). We replace the terminal with
-      // a full-pane prompt + Take it back button via setDisplaced(true).
-      // Generic disconnects (network blip, server restart, PTY exit)
-      // get the dim inline notice as before — those usually self-heal
-      // and aren't worth a modal.
-      if (ev && ev.code === 4001) {
-        setDisplaced(true);
-      } else {
-        term.write('\r\n\x1b[2m[disconnected]\x1b[0m\r\n');
-      }
+    const connect = () => {
+      const ws = new WebSocket(wsUrl);
+      ws.binaryType = 'arraybuffer';
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        if (everOpened) {
+          // Reconnect: clear so the replayed history repopulates cleanly.
+          try { term.reset(); } catch {}
+        }
+        everOpened = true;
+        attempts = 0;
+        // Fit synchronously before sending cols/rows — the handshake often
+        // completes before the rAF-scheduled fit, so without this we'd ship
+        // the default 80x24 and claude would wrap its prompt at 80 cols.
+        scheduleFit();
+        ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+      };
+      ws.onmessage = (ev) => {
+        let frame;
+        try { frame = JSON.parse(ev.data); } catch { return; }
+        if (frame.type === 'output') {
+          term.write(frame.data);
+        } else if (frame.type === 'exit') {
+          term.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
+        }
+      };
+      ws.onclose = (ev) => {
+        if (closedByUs) return;
+        // Displaced by another client (latest-wins, code 4001) — reconnecting
+        // would just ping-pong, so show the "Take it back" pane instead.
+        if (ev && ev.code === 4001) { setDisplaced(true); return; }
+        // PTY is gone (server restarted / session ended, code 4404) — a
+        // reconnect can't revive it; the session needs a full resume.
+        if (ev && ev.code === 4404) {
+          term.write('\r\n\x1b[2m[session ended]\x1b[0m\r\n');
+          return;
+        }
+        // Network blip — retry with backoff (0.5/1/2/4/8s cap), indefinitely
+        // until the effect tears down (cleanup flips closedByUs).
+        attempts++;
+        const delay = Math.min(8000, 500 * 2 ** Math.min(attempts - 1, 4));
+        term.write('\r\n\x1b[2m[disconnected · reconnecting…]\x1b[0m\r\n');
+        reconnectTimer = setTimeout(() => { if (!closedByUs) connect(); }, delay);
+      };
     };
+    connect();
 
+    // onData/onResize read wsRef.current (not a captured socket) so they keep
+    // working across reconnects.
     const onData = (data) => {
-      if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data }));
+      const ws = wsRef.current;
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data }));
     };
     const onResize = ({ cols, rows }) => {
-      if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+      const ws = wsRef.current;
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'resize', cols, rows }));
     };
     term.onData(onData);
     term.onResize(onResize);
@@ -280,6 +304,16 @@ export function TerminalView({ terminalId, cliType }) {
     vv?.addEventListener?.('resize', onVisualResize);
     vv?.addEventListener?.('scroll', onVisualResize);
 
+    // Mobile touch scrolling is handled NATIVELY: responsive.css makes the
+    // .xterm-screen layer pointer-transparent so finger drags fall through to
+    // xterm's own scrollable .xterm-viewport (real momentum, never drops
+    // mid-flick the way a JS-intercepted scroll does). The only casualty is
+    // tap-to-focus — with the screen ignoring pointer events a tap no longer
+    // reaches xterm's focus path, so the soft keyboard wouldn't open. Re-focus
+    // on tap explicitly. A drag emits no click, so this fires only on real taps.
+    const onHostClick = () => { try { term.focus(); } catch {} };
+    if (isMobile) host.addEventListener('click', onHostClick);
+
     // 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
@@ -416,27 +450,18 @@ export function TerminalView({ terminalId, cliType }) {
     };
     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.
+    // While composing (IME), hide the terminal's own cursor so the blinking
+    // bar doesn't sit on top of the composition box (terminals.css paints the
+    // box at the cursor, showing the in-progress pinyin). The cursor is drawn
+    // on the canvas from theme.cursor, so CSS can't touch it: swap the theme
+    // to a transparent cursor AND issue the DECTCEM hide sequence (the theme
+    // swap alone doesn't reliably stop the blink frame loop). Restore on end.
+    // Use the live theme (themeRef) so the restore matches current light/dark.
     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. Use the live theme (themeRef) so the
-      // restore on compEnd matches whatever light/dark is current.
       try { term.options.theme = { ...themeRef.current, cursor: 'transparent', cursorAccent: 'transparent' }; } catch {}
       try { term.write('\x1b[?25l'); } catch {}
     };
     const onCompEnd   = () => {
-      if (host) host.classList.remove('is-composing');
       try { term.options.theme = themeRef.current; } catch {}
       try { term.write('\x1b[?25h'); } catch {}
     };
@@ -458,7 +483,10 @@ export function TerminalView({ terminalId, cliType }) {
       if (panelMo) panelMo.disconnect();
       vv?.removeEventListener?.('resize', onVisualResize);
       vv?.removeEventListener?.('scroll', onVisualResize);
-      try { ws.close(); } catch {}
+      if (isMobile) host.removeEventListener('click', onHostClick);
+      closedByUs = true;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      try { wsRef.current?.close(); } catch {}
       try { term.dispose(); } catch {}
       termRef.current = null;
       wsRef.current = null;

package/public/js/main.js

@@ -156,6 +156,26 @@ function syncTitlebarHeight() {
 syncTitlebarHeight();
 navigator.windowControlsOverlay?.addEventListener?.('geometrychange', syncTitlebarHeight);
 
+// Mobile soft-keyboard height. The layout viewport (100vh) does NOT shrink
+// when the on-screen keyboard slides up — only `visualViewport` does — so a
+// full-height terminal keeps its bottom rows hidden behind the keyboard. We
+// publish the visible height as --app-vh (used by .app.is-mobile in
+// responsive.css to shrink the whole app to the area above the keyboard)
+// and flag body.kb-open when the keyboard is up (so the terminal can reserve
+// room for the floating key bar). cap at a 120px delta so a browser
+// URL-bar collapse doesn't read as a keyboard.
+function syncViewportHeight() {
+  const vv = window.visualViewport;
+  if (!vv) return;
+  document.documentElement.style.setProperty('--app-vh', `${Math.round(vv.height)}px`);
+  const kbUp = (window.innerHeight - vv.height - vv.offsetTop) > 120;
+  document.body.classList.toggle('kb-open', kbUp);
+}
+syncViewportHeight();
+window.visualViewport?.addEventListener?.('resize', syncViewportHeight);
+window.visualViewport?.addEventListener?.('scroll', syncViewportHeight);
+window.addEventListener('resize', syncViewportHeight);
+
 (async () => {
   // Version-mismatch guard runs FIRST. If the user's backend has been
   // upgraded since this per-version frontend was loaded, bounce back to

package/public/js/pages/ConfigurePage.js

@@ -87,7 +87,7 @@ function cliFieldsFor({ creating } = {}) {
       },
     },
     { key: 'name', label: 'Name', placeholder: 'My CLI', required: true },
-    { key: 'command', label: 'Command', mono: true, placeholder: 'ccp / claude / ...', required: true },
+    { key: 'command', label: 'Command', mono: true, placeholder: 'claude / codex / ...', required: true },
     { key: 'args', label: 'Args', mono: true, placeholder: '',
       hint: 'Used on every launch. Shell-style quoting: -Model "claude-opus-4-8" or -Path \'C:\\some dir\\bin\'.' },
     { key: 'newSessionIdArgs', label: 'New session id args', mono: true, placeholder: '--session-id <id>',

package/public/js/pages/LaunchPage.js

@@ -6,7 +6,7 @@ import { html } from '../html.js';
 import { useState, useEffect } from 'preact/hooks';
 import { signal } from '@preact/signals';
 import { config, folders, selectSession, selectTab } from '../state.js';
-import { createCli, createFolder, createRepo, reorderFolders, refreshAll } from '../api.js';
+import { createCli, createFolder, createRepo, refreshAll } from '../api.js';
 import { setToast } from '../toast.js';
 import { streamNewSession, resetProgress } from '../streaming.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
@@ -15,7 +15,6 @@ import { Modal } from '../components/Modal.js';
 import { PickerPanel } from '../components/Picker.js';
 import { DirectoryPicker } from '../components/DirectoryPicker.js';
 import { AdoptModal } from '../components/AdoptModal.js';
-import { useDragSort } from '../components/useDragSort.js';
 import { BrandMark, IconTerminal, IconFolder, IconFolderOpen, IconBranch, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor, IconSparkle, IconWorkspace, IconArrowRight } from '../icons.js';
 
 const ROOT_ID = 'newSessionProgress';
@@ -95,13 +94,6 @@ function LaunchHero() {
     });
   }, [cliId, folderId, mode, cwd, selectedRepos.value]);
 
-  const folderDnd = useDragSort(
-    folders.value.map((f) => f.id),
-    async (nextIds) => {
-      try { await reorderFolders(nextIds); }
-      catch (e) { setToast(e.message, 'error'); }
-    },
-  );
 
   const sig = repos.map((r) => r.name + ':' + r.defaultSelected).join('|');
   useStateOnce(sig, () => initRepoSelection(repos, saved?.repos));
@@ -190,7 +182,7 @@ function LaunchHero() {
       },
     },
     { key: 'name', label: 'Name', placeholder: 'My CLI', required: true },
-    { key: 'command', label: 'Command', mono: true, placeholder: 'ccp / claude / ...', required: true },
+    { key: 'command', label: 'Command', mono: true, placeholder: 'claude / codex / ...', required: true },
     { key: 'args', label: 'Args (space-separated)', mono: true, placeholder: '' },
     { key: 'resumeArgs', label: 'Resume args (fallback)', mono: true, placeholder: '--continue',
       hint: 'Used when ccsm has no captured upstream session id.' },
@@ -205,8 +197,8 @@ function LaunchHero() {
 
   // --- Folder picker config --------------------------------------------
   const folderItems = [
-    { id: '', label: 'Unsorted', meta: 'no folder', undraggable: true },
-    ...folders.value.map((f) => ({ id: f.id, label: f.name })),
+    { id: '', label: 'Unsorted', meta: 'no folder', undraggable: true, icon: html`<${IconFolderOpen} />` },
+    ...folders.value.map((f) => ({ id: f.id, label: f.name, icon: html`<${IconFolder} />` })),
   ];
   const folderCreateFields = [
     { key: 'name', label: 'Folder name', placeholder: 'Work / Personal / ...', autoFocus: true, required: true },
@@ -281,7 +273,14 @@ function LaunchHero() {
           <span class="pill-chev"><${IconChevronDown} /></span>
         </button>
         ${openPicker === 'workdir' ? html`
-          <${Modal} title="Working directory" onClose=${close} width=${640}>
+          <${Modal} title="Working directory" onClose=${close} width=${640}
+                    footer=${html`
+                      <button type="button" class="action subtle" onClick=${close}>Cancel</button>
+                      <button type="button" class="action primary"
+                              disabled=${mode === 'cwd' && !cwd}
+                              onClick=${close}>
+                        ${mode === 'cwd' ? 'Use folder' : 'Done'}
+                      </button>`}>
             <div class="workdir-modal">
               <div class="workdir-mode-grid">
                 <button type="button"
@@ -321,14 +320,6 @@ function LaunchHero() {
                                       onPick=${(p) => { setCwd(p); }} />
                 `}
               </div>
-              <div class="workdir-foot">
-                <button type="button" class="action subtle" onClick=${close}>Cancel</button>
-                <button type="button" class="action primary"
-                        disabled=${mode === 'cwd' && !cwd}
-                        onClick=${close}>
-                  ${mode === 'cwd' ? 'Use folder' : 'Done'}
-                </button>
-              </div>
             </div>
           </${Modal}>` : null}
 
@@ -344,7 +335,6 @@ function LaunchHero() {
           <${Modal} title="Choose folder" onClose=${close} width=${400}>
             <${PickerPanel} items=${folderItems} selectedId=${folderId}
                             showSearch=${false}
-                            dnd=${folderDnd}
                             onSelect=${(id) => setFolderId(id)}
                             onCreate=${async (v) => {
                               try {

package/server.js

@@ -222,7 +222,7 @@ function pickCli(cfg, requestedId) {
 //   'direct' — pty.spawn(command, args). Real .exe / absolute paths only.
 //              Won't find pwsh aliases / functions.
 //   'pwsh'   — wrap in `pwsh.exe -NoLogo -NoExit -Command "& { cmd args }"`.
-//              Loads $PROFILE → pwsh aliases / functions (`ccp`, `cxp`) work.
+//              Loads $PROFILE → pwsh aliases / functions work.
 //              Falls back to powershell.exe (5.x) if pwsh.exe absent.
 //   'cmd'    — wrap in `cmd.exe /d /s /c "cmd args"`. Resolves doskey aliases
 //              and PATH-only names without pwsh dependency.