@bakapiano/ccsm 0.20.2 → 0.21.1

package/public/js/components/AdoptModal.js

@@ -1,20 +1,13 @@
-// "Import existing session" modal. Browses sessions discovered on disk
-// for claude / codex / copilot, lets the user pick one, choose which
-// configured CLI it should be tied to, and adopts it — a ccsm
-// persistedSessions record is created with the upstream session id
-// pre-filled so clicking it later runs `<cli> --resume <id>` (via
-// cli.resumeIdArgs).
+// "Import existing session" modal. Browses sessions discovered on disk for
+// claude / codex / copilot, lets the user pick one, choose which configured
+// CLI it should be tied to, and adopts it — a ccsm persistedSessions record
+// is created with the upstream session id pre-filled so clicking it later
+// runs `<cli> --resume <id>` (via cli.resumeIdArgs).
 //
-// Props:
-//   onClose()                    — close request
-//   onAdopted(sessionId)         — fires after a successful adopt with
-//                                  the new (or pre-existing) record id
-//
-// Tabs across the top switch the upstream type. Below the tabs, an
-// "Adopt as <CLI ▾>" chip filters the configured CLIs by matching
-// `type` and reuses the global PickerPanel popover. A search box
-// filters rows by title + cwd. Each row is a card with the prompt
-// summary, cwd, age, and an Import button.
+// Layout (matches the app's modal pattern): pinned head (tabs + "import as"
+// CLI pill + search), a scrolling list of session cards, and a pinned footer
+// with ‹ Prev · X–Y of Z · Next › pagination. Each tab paginates server-side
+// (PAGE_SIZE per page); typing a query loads the whole tab and filters it.
 
 import { html } from '../html.js';
 import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
@@ -26,7 +19,7 @@ import { listLocalCliSessions, adoptSession } from '../api.js';
 import { setToast } from '../toast.js';
 import {
   IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor,
-  IconSearch, IconClose, IconChevronDown, IconBranch,
+  IconSearch, IconClose, IconChevronDown, IconChevronLeft, IconChevronRight, IconRefresh,
 } from '../icons.js';
 
 const TABS = [
@@ -35,157 +28,90 @@ const TABS = [
   { type: 'copilot', label: 'Copilot', Icon: IconCopilotColor },
 ];
 
-const PAGE_SIZE = 30;
+const PAGE_SIZE = 20;
+const SEARCH_LIMIT = 1000;   // typing a query loads the whole tab to filter
 
 export function AdoptModal({ onClose, onAdopted }) {
   const [tab, setTab] = useState('claude');
-  // cache shape per tab: { loading, loadingMore, error, items, offset,
-  //                       hasMore, totalActive, totalNonActive }
-  const [cache, setCache] = useState({});
-  const [adopting, setAdopting] = useState(null);
+  const [page, setPage] = useState(0);
   const [query, setQuery] = useState('');
+  const [view, setView] = useState({ loading: true, error: null, sessions: [], total: 0 });
+  const [totals, setTotals] = useState({});       // per-tab total → tab badges
+  const [adopting, setAdopting] = useState(null);
   const [pickerOpen, setPickerOpen] = useState(false);
   const [cliOverride, setCliOverride] = useState({});
+  const [reloadTick, setReloadTick] = useState(0); // Rescan bumps this
   const cliAnchorRef = useRef(null);
 
-  const load = async (type, { force = false } = {}) => {
-    const existing = cache[type];
-    if (!force && existing && !existing.error && existing.items.length) return;
-    setCache((c) => ({
-      ...c,
-      [type]: { loading: true, loadingMore: false, items: [], error: null,
-                offset: 0, hasMore: false, totalActive: 0, totalNonActive: 0 },
-    }));
-    try {
-      const r = await listLocalCliSessions(type, { offset: 0, limit: PAGE_SIZE });
-      setCache((c) => ({
-        ...c,
-        [type]: {
-          loading: false, loadingMore: false, error: null,
-          items: r.sessions,
-          offset: r.offset + r.sessions.filter((s) => !s.active).length, // advance past hydrated non-active
-          hasMore: r.hasMore,
-          totalActive: r.totalActive,
-          totalNonActive: r.totalNonActive,
-        },
-      }));
-    } catch (e) {
-      setCache((c) => ({
-        ...c,
-        [type]: { loading: false, loadingMore: false, items: [], error: e.message,
-                  offset: 0, hasMore: false, totalActive: 0, totalNonActive: 0 },
-      }));
-    }
-  };
+  const searching = !!query.trim();
 
-  const loadMore = async () => {
-    const cur = cache[tab];
-    if (!cur || cur.loadingMore || !cur.hasMore) return;
-    setCache((c) => ({ ...c, [tab]: { ...c[tab], loadingMore: true } }));
-    try {
-      const r = await listLocalCliSessions(tab, { offset: cur.offset, limit: PAGE_SIZE });
-      setCache((c) => {
-        const entry = c[tab];
-        const existingIds = new Set(entry.items.map((x) => x.cliSessionId));
-        const additions = r.sessions.filter((s) => !existingIds.has(s.cliSessionId));
-        return {
-          ...c,
-          [tab]: {
-            ...entry,
-            loadingMore: false,
-            items: [...entry.items, ...additions],
-            offset: cur.offset + additions.filter((s) => !s.active).length,
-            hasMore: r.hasMore,
-          },
-        };
-      });
-    } catch (e) {
-      setCache((c) => ({ ...c, [tab]: { ...c[tab], loadingMore: false, error: e.message } }));
-    }
-  };
+  // Fetch the active view (tab × page × query). When searching we pull the
+  // whole tab and filter client-side; otherwise just the requested page.
+  useEffect(() => {
+    let cancelled = false;
+    setView((v) => ({ ...v, loading: true, error: null }));
+    (async () => {
+      try {
+        const offset = searching ? 0 : page * PAGE_SIZE;
+        const limit  = searching ? SEARCH_LIMIT : PAGE_SIZE;
+        const r = await listLocalCliSessions(tab, { offset, limit });
+        if (cancelled) return;
+        const total = r.total ?? ((r.totalActive || 0) + (r.totalNonActive || 0));
+        setView({ loading: false, error: null, sessions: r.sessions || [], total });
+        setTotals((t) => (t[tab] === total ? t : { ...t, [tab]: total }));
+      } catch (e) {
+        if (!cancelled) setView({ loading: false, error: e.message, sessions: [], total: 0 });
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [tab, page, searching, reloadTick]);
 
-  useEffect(() => { load(tab); /* eslint-disable-next-line */ }, [tab]);
-  // Clear search when switching tabs
-  useEffect(() => { setQuery(''); }, [tab]);
+  // Snap back to page 0 when the tab changes or search toggles on/off.
+  useEffect(() => { setPage(0); }, [tab]);
+  useEffect(() => { setPage(0); }, [searching]);
 
   const cfg = config.value || {};
   const clis = cfg.clis || [];
-  // CLIs of the same upstream `type` as the active tab — these are the
-  // ones the row's `--resume <id>` template will actually work with.
-  const matchingClis = useMemo(
-    () => clis.filter((c) => c.type === tab),
-    [clis, tab],
-  );
-
-  // Effective CLI for the current tab: user override → first matching
-  // → configured default → first cli.
+  // CLIs of the same upstream type as the active tab — the ones whose
+  // `--resume <id>` template will actually work with these sessions.
+  const matchingClis = useMemo(() => clis.filter((c) => c.type === tab), [clis, tab]);
   const effectiveCliId =
-    cliOverride[tab]
-    || matchingClis[0]?.id
-    || cfg.defaultCliId
-    || clis[0]?.id
-    || '';
+    cliOverride[tab] || matchingClis[0]?.id || cfg.defaultCliId || clis[0]?.id || '';
   const effectiveCli = clis.find((c) => c.id === effectiveCliId) || null;
 
-  // Items the picker shows — prefer same-type CLIs at top, then dim others.
   const pickerItems = useMemo(() => {
     const Icon = IconForCliType(tab);
-    const top = matchingClis.map((c) => ({
-      id: c.id,
-      icon: html`<${Icon} />`,
-      label: c.name,
-      meta: c.command,
-    }));
-    const others = clis
-      .filter((c) => c.type !== tab)
-      .map((c) => {
-        const I = IconForCliType(c.type);
-        return {
-          id: c.id,
-          icon: html`<${I} />`,
-          label: c.name,
-          meta: `(non-${tab})`,
-        };
-      });
+    const top = matchingClis.map((c) => ({ id: c.id, icon: html`<${Icon} />`, label: c.name, meta: c.command }));
+    const others = clis.filter((c) => c.type !== tab).map((c) => {
+      const I = IconForCliType(c.type);
+      return { id: c.id, icon: html`<${I} />`, label: c.name, meta: `(non-${tab})` };
+    });
     return [...top, ...others];
   }, [clis, matchingClis, tab]);
 
-  const state = cache[tab] || {
-    loading: true, loadingMore: false, items: [], error: null,
-    offset: 0, hasMore: false, totalActive: 0, totalNonActive: 0,
-  };
-  const items = useMemo(() => {
+  // Search filters the loaded set (the whole tab while searching, else the page).
+  const rows = useMemo(() => {
     const q = query.trim().toLowerCase();
-    if (!q) return state.items;
-    return state.items.filter((it) => {
-      const hay = `${it.summary || ''} ${it.cwd || ''} ${it.cliSessionId}`.toLowerCase();
-      return hay.includes(q);
-    });
-  }, [state.items, query]);
-
-  const totalKnown = state.totalActive + state.totalNonActive;
-  const unimportedCount = state.items.filter((it) => !it.adopted).length;
+    if (!q) return view.sessions;
+    return view.sessions.filter((it) =>
+      `${it.summary || ''} ${it.cwd || ''} ${it.cliSessionId}`.toLowerCase().includes(q));
+  }, [view.sessions, query]);
 
   const adopt = async (item) => {
-    const cliId = effectiveCliId;
-    if (!cliId) { setToast('configure a CLI first', 'error'); return; }
+    if (!effectiveCliId) { setToast('configure a CLI first', 'error'); return; }
     setAdopting(item.cliSessionId);
     try {
       const r = await adoptSession({
-        cliId,
+        cliId: effectiveCliId,
         cliSessionId: item.cliSessionId,
         cwd: item.cwd,
         title: item.summary || '',
       });
       if (r.alreadyAdopted) setToast('already in ccsm — opened existing record');
       else setToast(`imported · ${item.cliSessionId.slice(0, 8)}…`);
-      setCache((c) => ({
-        ...c,
-        [tab]: c[tab] ? {
-          ...c[tab],
-          items: c[tab].items.map((x) => x.cliSessionId === item.cliSessionId
-            ? { ...x, adopted: true } : x),
-        } : c[tab],
+      setView((v) => ({
+        ...v,
+        sessions: v.sessions.map((x) => x.cliSessionId === item.cliSessionId ? { ...x, adopted: true } : x),
       }));
       onAdopted?.(r.session?.id);
     } catch (e) {
@@ -195,135 +121,129 @@ export function AdoptModal({ onClose, onAdopted }) {
     }
   };
 
+  // ── pagination footer ──
+  const pageCount = Math.max(1, Math.ceil(view.total / PAGE_SIZE));
+  const from = view.total === 0 ? 0 : page * PAGE_SIZE + 1;
+  const to = Math.min(view.total, page * PAGE_SIZE + view.sessions.length);
+  const footer = searching
+    ? html`<span class="adopt-pager-info">
+        ${rows.length} match${rows.length === 1 ? '' : 'es'} · clear search to browse all
+      </span>`
+    : html`
+      <button type="button" class="action subtle small adopt-pager-btn"
+              disabled=${page === 0 || view.loading}
+              onClick=${() => setPage((p) => Math.max(0, p - 1))}>
+        <${IconChevronLeft} /> Prev
+      </button>
+      <span class="adopt-pager-info">
+        ${view.total === 0 ? 'No sessions' : `${from}–${to} of ${view.total}`}
+      </span>
+      <button type="button" class="action subtle small adopt-pager-btn"
+              disabled=${(page + 1) >= pageCount || view.loading}
+              onClick=${() => setPage((p) => p + 1)}>
+        Next <${IconChevronRight} />
+      </button>`;
+
   return html`
-    <${Modal} title="Import existing session" onClose=${onClose} width=${680}>
+    <${Modal} title="Import existing session" onClose=${onClose} width=${680} footer=${footer}>
       <div class="adopt">
-        <!-- Tabs row -->
-        <div class="adopt-tabs">
-          ${TABS.map((t) => {
-            const cnt = cache[t.type]?.items?.filter((x) => !x.adopted).length;
-            return html`
+        <div class="adopt-head">
+          <div class="adopt-tabs">
+            ${TABS.map((t) => html`
               <button type="button" key=${t.type}
                       class=${`adopt-tab${tab === t.type ? ' is-active' : ''}`}
                       onClick=${() => setTab(t.type)}>
                 <span class="adopt-tab-icon"><${t.Icon} /></span>
-                <span>${t.label}</span>
-                ${typeof cnt === 'number' && cnt > 0 ? html`
-                  <span class="adopt-tab-count">${cnt}</span>
-                ` : null}
-              </button>`;
-          })}
-          <button type="button" class="adopt-icon-btn" title="Rescan"
-                  onClick=${() => load(tab, { force: true })}>
-            <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true">
-              <path d="M2 8a6 6 0 0 1 10.3-4.2L14 2v4h-4l1.5-1.5A4.5 4.5 0 1 0 12.5 8H14a6 6 0 1 1-12 0z"
-                    fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
-            </svg>
-          </button>
-        </div>
+                <span class="adopt-tab-label">${t.label}</span>
+                ${typeof totals[t.type] === 'number' && totals[t.type] > 0 ? html`
+                  <span class="adopt-tab-count">${totals[t.type]}</span>` : null}
+              </button>`)}
+            <button type="button" class="adopt-rescan" title="Rescan disk"
+                    onClick=${() => setReloadTick((n) => n + 1)}>
+              <${IconRefresh} />
+            </button>
+          </div>
 
-        <!-- Tools row: CLI picker + search -->
-        <div class="adopt-tools">
-          <button type="button" ref=${cliAnchorRef}
-                  class=${`adopt-cli-pill${pickerOpen ? ' is-open' : ''}`}
-                  onClick=${() => setPickerOpen((v) => !v)}>
-            <span class="adopt-cli-pill-prefix">Adopt as</span>
-            <span class="adopt-cli-pill-icon">
-              ${effectiveCli ? html`${(() => {
-                const I = IconForCliType(effectiveCli.type);
-                return html`<${I} />`;
-              })()}` : null}
-            </span>
-            <span class="adopt-cli-pill-name">${effectiveCli?.name || 'choose CLI'}</span>
-            <${IconChevronDown} />
-          </button>
-          ${pickerOpen ? html`
-            <${Popover} anchor=${cliAnchorRef} onClose=${() => setPickerOpen(false)} width=${300}>
-              <${PickerPanel}
-                title=${`CLI for ${tab} sessions`}
-                items=${pickerItems}
-                selectedId=${effectiveCliId}
-                showSearch=${pickerItems.length > 6}
-                emptyHint=${`No configured CLIs match ${tab}.`}
-                onSelect=${(id) => { setCliOverride((m) => ({ ...m, [tab]: id })); }}
-                onClose=${() => setPickerOpen(false)} />
-            </${Popover}>` : null}
+          <div class="adopt-tools">
+            <button type="button" ref=${cliAnchorRef}
+                    class=${`adopt-cli-pill${pickerOpen ? ' is-open' : ''}`}
+                    onClick=${() => setPickerOpen((v) => !v)}>
+              <span class="adopt-cli-pill-prefix">Import as</span>
+              <span class="adopt-cli-pill-icon">
+                ${effectiveCli ? html`${(() => { const I = IconForCliType(effectiveCli.type); return html`<${I} />`; })()}` : null}
+              </span>
+              <span class="adopt-cli-pill-name">${effectiveCli?.name || 'choose CLI'}</span>
+              <${IconChevronDown} />
+            </button>
+            ${pickerOpen ? html`
+              <${Popover} anchor=${cliAnchorRef} onClose=${() => setPickerOpen(false)} width=${300}>
+                <${PickerPanel}
+                  title=${`CLI for ${tab} sessions`}
+                  items=${pickerItems}
+                  selectedId=${effectiveCliId}
+                  showSearch=${pickerItems.length > 6}
+                  emptyHint=${`No configured CLIs match ${tab}.`}
+                  onSelect=${(id) => { setCliOverride((m) => ({ ...m, [tab]: id })); }}
+                  onClose=${() => setPickerOpen(false)} />
+              </${Popover}>` : null}
 
-          <div class="adopt-search">
-            <span class="adopt-search-icon"><${IconSearch} /></span>
-            <input class="adopt-search-input"
-                   placeholder=${state.loading ? 'Loading…' : `Search ${unimportedCount} sessions…`}
-                   value=${query} disabled=${state.loading}
-                   onInput=${(e) => setQuery(e.target.value)} />
-            ${query ? html`
-              <button class="adopt-search-clear" type="button"
-                      onClick=${() => setQuery('')} title="Clear">
-                <${IconClose} />
-              </button>` : null}
+            <div class="adopt-search">
+              <span class="adopt-search-icon"><${IconSearch} /></span>
+              <input class="adopt-search-input"
+                     placeholder=${`Search ${tab} sessions…`}
+                     value=${query}
+                     onInput=${(e) => setQuery(e.target.value)} />
+              ${query ? html`
+                <button class="adopt-search-clear" type="button" title="Clear"
+                        onClick=${() => setQuery('')}><${IconClose} /></button>` : null}
+            </div>
           </div>
         </div>
 
-        <!-- List body -->
-        <div class="adopt-body">
-          ${state.loading ? html`
+        <div class="adopt-list">
+          ${view.loading ? html`
             <div class="adopt-empty"><span class="adopt-empty-spinner"></span> Scanning…</div>
-          ` : state.error ? html`
-            <div class="adopt-empty adopt-error">${state.error}</div>
-          ` : state.items.length === 0 ? html`
+          ` : view.error ? html`
+            <div class="adopt-empty adopt-error">${view.error}</div>
+          ` : rows.length === 0 ? html`
             <div class="adopt-empty">
               <div class="adopt-empty-mark">∅</div>
-              No ${tab} sessions found on this machine.
+              ${searching ? html`No matches for "${query}".` : html`No ${tab} sessions found on this machine.`}
             </div>
-          ` : items.length === 0 ? html`
-            <div class="adopt-empty">No matches for "${query}".</div>
           ` : html`
-            <ul class="adopt-list" data-shown=${items.length} data-total=${totalKnown}>
-              ${items.map((it) => html`
-                <li class=${`adopt-row${it.adopted ? ' is-adopted' : ''}${it.active ? ' is-active' : ''}`}
-                    key=${it.cliSessionId}>
-                  <div class="adopt-row-main">
-                    <div class="adopt-row-title">
-                      ${it.active ? html`<span class="adopt-row-live" title="A CLI process has this session open right now">● live</span>` : null}
-                      ${it.summary || html`<span class="adopt-row-untitled">untitled session</span>`}
+            <ul class="adopt-rows">
+              ${rows.map((it) => {
+                const Icon = IconForCliType(tab);
+                return html`
+                  <li class=${`adopt-row${it.adopted ? ' is-adopted' : ''}${it.active ? ' is-active' : ''}`}
+                      key=${it.cliSessionId}>
+                    <span class="adopt-row-icon"><${Icon} /></span>
+                    <div class="adopt-row-main">
+                      <div class="adopt-row-title">
+                        ${it.active ? html`<span class="adopt-row-live" title="A CLI process has this session open right now">live</span>` : null}
+                        ${it.summary || html`<span class="adopt-row-untitled">untitled session</span>`}
+                      </div>
+                      <div class="adopt-row-meta">
+                        <span class="adopt-row-path mono" title=${it.cwd || ''}>${it.cwd || '—'}</span>
+                        <span class="adopt-row-dot">·</span>
+                        <span>${relTime(it.mtime)}</span>
+                        <span class="adopt-row-dot">·</span>
+                        <span class="adopt-row-id mono">${it.cliSessionId.slice(0, 8)}</span>
+                      </div>
                     </div>
-                    <div class="adopt-row-meta">
-                      <span class="adopt-row-path mono" title=${it.cwd || ''}>${it.cwd || '—'}</span>
-                      <span class="adopt-row-dot">·</span>
-                      <span>${relTime(it.mtime)}</span>
-                      <span class="adopt-row-dot">·</span>
-                      <span class="adopt-row-id mono">${it.cliSessionId.slice(0, 8)}</span>
+                    <div class="adopt-row-actions">
+                      ${it.adopted ? html`
+                        <span class="adopt-row-badge">Imported</span>
+                      ` : html`
+                        <button type="button" class="action primary small adopt-row-btn"
+                                disabled=${adopting === it.cliSessionId || !effectiveCliId}
+                                onClick=${() => adopt(it)}>
+                          ${adopting === it.cliSessionId ? 'Importing…' : 'Import'}
+                        </button>`}
                     </div>
-                  </div>
-                  <div class="adopt-row-actions">
-                    ${it.adopted ? html`
-                      <span class="adopt-row-badge">Imported</span>
-                    ` : html`
-                      <button type="button" class="action primary adopt-row-btn"
-                              disabled=${adopting === it.cliSessionId || !effectiveCliId}
-                              onClick=${() => adopt(it)}>
-                        ${adopting === it.cliSessionId ? 'Importing…' : 'Import'}
-                      </button>
-                    `}
-                  </div>
-                </li>`)}
-            </ul>
-            ${state.hasMore && !query ? html`
-              <div class="adopt-loadmore">
-                <button type="button" class="action subtle"
-                        disabled=${state.loadingMore}
-                        onClick=${loadMore}>
-                  ${state.loadingMore ? 'Loading…'
-                    : `Load ${Math.min(PAGE_SIZE, state.totalNonActive - state.offset)} more · ${state.items.length} / ${totalKnown}`}
-                </button>
-              </div>` : !query && state.items.length > 0 ? html`
-              <div class="adopt-loadmore adopt-loadmore-done">
-                All ${totalKnown} sessions loaded
-              </div>` : null}
-            ${query && state.hasMore ? html`
-              <div class="adopt-loadmore adopt-loadmore-hint">
-                Searching ${state.items.length} loaded · clear search and Load more to see older sessions
-              </div>` : null}
-          `}
+                  </li>`;
+              })}
+            </ul>`}
         </div>
       </div>
     </${Modal}>`;
@@ -331,13 +251,11 @@ export function AdoptModal({ onClose, onAdopted }) {
 
 function relTime(ms) {
   if (!ms) return '';
-  const d = Date.now() - ms;
-  const s = Math.round(d / 1000);
+  const s = Math.round((Date.now() - ms) / 1000);
   if (s < 60) return `${s}s ago`;
   const m = Math.round(s / 60);
   if (m < 60) return `${m}m ago`;
   const h = Math.round(m / 60);
   if (h < 48) return `${h}h ago`;
-  const days = Math.round(h / 24);
-  return `${days}d ago`;
+  return `${Math.round(h / 24)}d ago`;
 }

package/public/js/components/TerminalView.js

@@ -183,6 +183,30 @@ export function TerminalView({ terminalId, cliType }) {
 
     const host = hostRef.current;
     term.open(host);
+
+    // Answer OSC 10/11 (default foreground / background colour) queries with
+    // the LIVE theme colours. CLIs like claude probe the terminal background
+    // (`OSC 11 ; ? ST`) to pick a light- or dark-tuned syntax theme. xterm.js
+    // doesn't answer these by default, so claude assumes a dark terminal and
+    // paints near-white tokens (comments, f-string interpolations, call
+    // names) that vanish on our light background — the "字体颜色和背景重复"
+    // bug. VSCode answers them; we match. Reply format is the xterm/X11
+    // `rgb:RRRR/GGGG/BBBB` (16-bit-per-channel) the query expects.
+    const answerColorOsc = (code, getHex) => (data) => {
+      if (data !== '?') return false;               // only the query form
+      const hex = getHex();                         // '#rrggbb'
+      const ch = (i) => parseInt(hex.slice(i, i + 2), 16);
+      const w = (v) => (v * 257).toString(16).padStart(4, '0');  // 8-bit → 16-bit
+      const reply = `\x1b]${code};rgb:${w(ch(1))}/${w(ch(3))}/${w(ch(5))}\x07`;
+      const ws = wsRef.current;
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data: reply }));
+      return true;
+    };
+    try {
+      term.parser.registerOscHandler(11, answerColorOsc(11, () => themeRef.current.background));
+      term.parser.registerOscHandler(10, answerColorOsc(10, () => themeRef.current.foreground));
+    } catch {}
+
     // Robust fit scheduler. A single requestAnimationFrame works most
     // of the time but races on tab/session switches: the .tab-panel
     // just flipped from display:none to display:flex and although the
@@ -304,6 +328,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
@@ -440,27 +474,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 {}
     };
@@ -482,6 +507,7 @@ export function TerminalView({ terminalId, cliType }) {
       if (panelMo) panelMo.disconnect();
       vv?.removeEventListener?.('resize', onVisualResize);
       vv?.removeEventListener?.('scroll', onVisualResize);
+      if (isMobile) host.removeEventListener('click', onHostClick);
       closedByUs = true;
       if (reconnectTimer) clearTimeout(reconnectTimer);
       try { wsRef.current?.close(); } catch {}

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

@@ -182,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.' },