ompchamber 3.2.0 → 3.3.1

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -1,4 +1,4 @@
-import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, Loader2, Pencil } from 'lucide-preact';
+import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, Pencil } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 
@@ -6,6 +6,8 @@ export interface MobileSessionRowProps {
   session: SessionItemData;
   isActive: boolean;
   status?: 'stream' | 'finish' | 'abort';
+  /** The session's agent is blocked on a question until the user answers it. */
+  awaitingInput?: boolean;
   /** Relative age of the session, or null when no usable timestamp exists. */
   timeAgo: string | null;
   /** The session has a subagent roster (on disk or live), so it can be expanded. */
@@ -21,6 +23,7 @@ export function MobileSessionRow({
   session,
   isActive,
   status,
+  awaitingInput = false,
   timeAgo,
   hasSubagents = false,
   isExpanded = false,
@@ -49,7 +52,6 @@ export function MobileSessionRow({
   // pinned whenever the row has a roster; a hidden one would leave the roster
   // unreachable on a phone.
   const showChevron = hasSubagents && Boolean(onToggleExpand);
-  const showStatus = Boolean(status);
   const title = session.title.charAt(0).toUpperCase() + session.title.slice(1);
 
   if (isEditing) {
@@ -81,10 +83,17 @@ export function MobileSessionRow({
       >
         <div className="flex items-center min-w-0 pr-2">
           {/* Status slot, 16px at the same x as the folder header's icon slot,
-              so the left column reads as one line. */}
+              so the left column reads as one line. Waiting on an answer
+              outranks the run spinner — the spinner says work is happening,
+              the question mark says it is YOUR turn (desktop parity). */}
           <span className="w-4 flex-shrink-0 flex items-center justify-center">
-            {showStatus && status === 'stream' && <Loader2 size={13} className="text-ink/50 animate-spin" />}
-            {showStatus && (status === 'finish' || status === 'abort') && <Check size={13} className="text-ink/50" />}
+            {awaitingInput ? (
+              <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+            ) : status === 'stream' ? (
+              <Loader2 size={13} className="text-ink/50 animate-spin" />
+            ) : status ? (
+              <Check size={13} className="text-ink/50" />
+            ) : null}
           </span>
           <span className="text-xs truncate leading-snug ml-2">{title}</span>
         </div>

package/src/client/components/settings/Modal.tsx

@@ -6,6 +6,8 @@ import { diffSettings } from '@/shared/lib/settings/diff';
 import { useChamberSettingsWriter } from '@/client/hooks/settings/use-chamber-setting';
 import { applyDocumentTheme } from '@/client/hooks/ui/theme';
 import { DEFAULT_THEME_ID } from '@/shared/lib/theme/catalog';
+import { EDITOR_DEFAULT_FONT_FAMILY } from '@/shared/lib/code/editor/typography';
+import { EDITOR_FONT_CHANGED_EVENT } from '@/client/hooks/editor/font';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
 import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
 import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
@@ -33,28 +35,12 @@ export interface SettingsModalProps {
 }
 
 const DEFAULT_SETTINGS: SettingsState = {
-  binaryPath: '/Users/you/.bun/bin/omp',
-  showUpdateNotifications: true,
-  agentControlTool: true,
-  ompChamberWebTool: true,
   theme: DEFAULT_THEME_ID,
-  fontSize: 'standard',
-  editorFont: 'JetBrains Mono',
-  streamResponses: true,
+  editorFont: EDITOR_DEFAULT_FONT_FAMILY,
   streamTransport: 'websocket',
   autoSessionTitle: true,
-  expandedThinking: true,
-  detailedToolCalls: false,
-  notificationsEnabled: true,
-  buildFailureAlert: true,
   soundAlerts: true,
   chatCompletionSound: true,
-  defaultWorkspacePath: '~/Projects/ompchamber',
-  tunnelEnabled: true,
-  tunnelSubdomain: 'omp-dev-preview',
-  activeProvider: 'claude',
-  autoApproveSafeCmds: true,
-  autoPatchErrors: true,
   followUpBehavior: 'queue',
   keybindingSend: 'Enter',
   keybindingNewLine: 'Shift + Enter',
@@ -110,6 +96,13 @@ export function SettingsModal({
       if (typeof document !== 'undefined' && next.theme) {
         applyDocumentTheme(next.theme);
       }
+      // The editor font is visual, so an open editor has to hear about the
+      // change now — `appSettings` is a boot-time prop and would only show it
+      // after a reload. Announced only when the value actually moved, so a
+      // re-render of an unrelated setting does not churn every editor's stack.
+      if (typeof window !== 'undefined' && next.editorFont !== prev.editorFont) {
+        window.dispatchEvent(new CustomEvent(EDITOR_FONT_CHANGED_EVENT, { detail: next.editorFont }));
+      }
       // Only the keys this update actually touched are persisted. The modal
       // holds a full `SettingsState` snapshot taken when it opened, so writing
       // the whole object back would also republish every value it read at that

package/src/client/components/settings/categories/AppearanceSettings.tsx

@@ -2,6 +2,7 @@ import { Palette } from 'lucide-preact';
 import type { SettingsState } from '@/shared/types';
 import { resolveThemeId } from '@/shared/lib/theme/catalog';
 import { ThemeGrid } from '@/client/components/settings/categories/appearance-settings/ThemeGrid';
+import { EditorFontSection } from '@/client/components/settings/categories/appearance-settings/EditorFontSection';
 
 interface AppearanceSettingsProps {
   settings: SettingsState;
@@ -22,6 +23,8 @@ export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsPro
           onSelect={(theme) => onUpdate({ theme: resolveThemeId(theme) })}
         />
       </section>
+
+      <EditorFontSection settings={settings} onUpdate={onUpdate} />
     </div>
   );
 }

package/src/client/components/settings/categories/appearance-settings/EditorFontSection.tsx

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Check, Type } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+import { EDITOR_FONT_CHOICES } from '@/shared/lib/code/editor/typography';
+
+interface EditorFontSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+/**
+ * The code editor's typeface.
+ *
+ * Only Fira Code is bundled, so each row states whether the face ships with the
+ * app or has to come from the device. That is the difference between a choice
+ * that always works and one that silently falls back — and the fallback is
+ * visible in the row's own preview, which is set in the face it names.
+ */
+export function EditorFontSection({ settings, onUpdate }: EditorFontSectionProps) {
+  const active = settings.editorFont || EDITOR_FONT_CHOICES[0].id;
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h3 className="font-semibold text-sm uppercase tracking-wider text-ink/80 flex items-center gap-2">
+          <Type size={16} className="text-ink/60" />
+          Editor Font
+        </h3>
+        <p className="text-[11px] text-ink/60 mt-1">
+          Typeface for the code editor and its line numbers, in both the desktop panel and the phone's
+          full-screen editor. Only Fira Code ships with the app; the others are used when your device
+          has them, and fall back to Fira Code when it does not.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        {EDITOR_FONT_CHOICES.map((choice) => {
+          const selected = active === choice.id;
+          return (
+            <button
+              key={choice.id}
+              type="button"
+              onClick={() => onUpdate({ editorFont: choice.id })}
+              aria-pressed={selected}
+              className={`flex items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left transition-colors ${
+                selected ? 'border-ink/40 bg-ink/5' : 'border-ink/12 hover:bg-ink/5'
+              }`}
+            >
+              <span className="min-w-0">
+                {/* Preview in the face it names: an uninstalled choice shows its
+                    own fallback here rather than after the user commits to it. */}
+                <span
+                  className="block truncate text-xs text-ink"
+                  style={{ fontFamily: `"${choice.id}", monospace` }}
+                >
+                  const greet = () =&gt; 'hi'
+                </span>
+                <span className="mt-0.5 flex items-center gap-1.5 text-[10px] text-ink/50">
+                  <span>{choice.label}</span>
+                  {choice.bundled && (
+                    <span className="rounded bg-ink/8 px-1 py-px text-[9px] uppercase tracking-wide">
+                      Bundled
+                    </span>
+                  )}
+                </span>
+              </span>
+              {selected && <Check size={14} className="text-ink flex-shrink-0" />}
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/src/client/components/workspace/chat-timeline/SystemNotice.tsx

@@ -1,8 +1,9 @@
-import { useMemo, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'preact/hooks';
 import { AlertCircle, Bell, Bot, CheckCircle2, ChevronDown, Clock, Info, Layers } from 'lucide-preact';
 import { isCodeLike } from '@/shared/lib/code/language';
 import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useIsTruncated } from '@/client/hooks/ui/text-overflow';
 import { parseTaskNotice } from '@/shared/lib/chat/task-result-parser';
 import { TaskResultContent } from '@/client/components/workspace/chat-timeline/TaskResultContent';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
@@ -60,12 +61,17 @@ export function SystemNotice({ notice }: SystemNoticeProps) {
   }, [notice]);
 
   const rawTitle = taskNotice?.intro || reminderInfo?.title || genericInfo.firstLine || notice;
-  const isTruncated = rawTitle.length > 100;
-  const displayTitle = rawTitle.slice(0, 100) + (isTruncated ? '...' : '');
+  // The subtitle is clipped by CSS at the card's own width, so the decision to
+  // offer an expander is a MEASUREMENT, not a character count: 76 characters
+  // fit a desktop timeline and are cut on a phone card. A char threshold left
+  // those rows showing an ellipsis with nothing to click (the chevron was
+  // dropped with the button disabled). Measured on the exact node that carries
+  // `truncate`, so it cannot disagree with the ellipsis the user sees.
+  const subtitleRef = useRef<HTMLSpanElement>(null);
+  const subtitleClipped = useIsTruncated(subtitleRef, rawTitle);
 
-  // If notice has only 1 line of content AND does not exceed the 100-character ellipsis limit,
-  // disable expand since the entire text is already fully visible in the sub-header.
-  // If it exceeds the ellipsis limit (>100 chars) or has multiple lines, keep expand active.
+  // Expandable when the subtitle is visually clipped, or when the body holds
+  // something the one-line header cannot show (more lines, a task-result card).
   const isExpandable = useMemo(() => {
     if (taskNotice) return true;
     const clean = notice
@@ -75,8 +81,8 @@ export function SystemNotice({ notice }: SystemNoticeProps) {
       .split(/\r?\n/)
       .map((l) => l.trim())
       .filter(Boolean);
-    return lines.length > 1 || clean.length > 100 || rawTitle.length > 100;
-  }, [taskNotice, notice, rawTitle]);
+    return lines.length > 1 || subtitleClipped;
+  }, [taskNotice, notice, subtitleClipped]);
 
   const noticeStyle = useMemo(() => {
     if (taskNotice) {
@@ -169,9 +175,9 @@ export function SystemNotice({ notice }: SystemNoticeProps) {
               </span>
             )}
           </span>
-          {!isOpen && displayTitle && (
-            <span className="truncate font-mono text-[10.5px] text-ink/45" title={rawTitle}>
-              {displayTitle}
+          {!isOpen && rawTitle && (
+            <span ref={subtitleRef} className="truncate font-mono text-[10.5px] text-ink/45" title={rawTitle}>
+              {rawTitle}
             </span>
           )}
         </span>

package/src/client/components/workspace/editor/index.tsx

@@ -10,6 +10,13 @@ import { EditorToolbar } from '@/client/components/workspace/editor/Toolbar';
 import { FindWidget } from '@/client/components/workspace/editor/FindWidget';
 import { CommandPalette } from '@/client/components/workspace/editor/CommandPalette';
 import { EDITOR_KEY_BINDINGS, isFindBarCommand, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import {
+  EDITOR_DEFAULT_FONT_SIZE,
+  EDITOR_LINE_HEIGHT,
+  EDITOR_MAX_FONT_SIZE,
+  EDITOR_MIN_FONT_SIZE,
+} from '@/shared/lib/code/editor/typography';
+import { useEditorFontStack } from '@/client/hooks/editor/font';
 import type { TextRange } from '@/shared/lib/code/editor/commands';
 import { resolveBinding } from '@/shared/lib/ui/key-binding';
 import { ImageViewer } from '@/client/components/common/image-viewer';
@@ -45,7 +52,7 @@ export function Editor({
   const activeFile = openedFiles.find(f => f.id === activeFileId);
   
   const [previewMode, setPreviewMode, previewReady] = useSessionState<Record<string | number, boolean>>('editor.previewMode', {});
-  const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', 12);
+  const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', EDITOR_DEFAULT_FONT_SIZE);
   const [isMaximized, setIsMaximized] = useState(false);
   const [wordWrap, setWordWrap] = useSessionState<boolean>('editor.wordWrap', true);
   /** Extra ⌘D ranges; the surface paints them and the editor edits them by replication. */
@@ -54,6 +61,7 @@ export function Editor({
   const { sessionId } = useSessionStateContext();
   const { isScrolling, handleScroll } = useScrollbarFade();
   const surfaceRef = useRef<CodeSurfaceHandle | null>(null);
+  const editorFontFamily = useEditorFontStack();
 
   const editor = useFileEditor(activeFile ?? null, {
     // A file that could not be read must report the failure, not substitute
@@ -233,8 +241,8 @@ export function Editor({
               onSave={editor.saveNow}
               onTogglePreview={togglePreview}
               onToggleWordWrap={() => setWordWrap(!wordWrap)}
-              onZoomIn={() => setZoomLevel(z => Math.min(24, z + 1))}
-              onZoomOut={() => setZoomLevel(z => Math.max(8, z - 1))}
+              onZoomIn={() => setZoomLevel(z => Math.min(EDITOR_MAX_FONT_SIZE, z + 1))}
+              onZoomOut={() => setZoomLevel(z => Math.max(EDITOR_MIN_FONT_SIZE, z - 1))}
               onCopy={editor.copy}
               onDownload={editor.download}
               onToggleMaximize={() => setIsMaximized(!isMaximized)}
@@ -295,8 +303,8 @@ export function Editor({
                         fontSize: zoomLevel,
                         paddingTop: 16,
                         paddingBottom: 16,
-                        lineHeight: 1.5,
-                        fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                        lineHeight: EDITOR_LINE_HEIGHT,
+                        fontFamily: editorFontFamily,
                       }}
                       gutterLineClassName="min-w-[1.5rem]"
                       // `min-w-max` keeps a long line intact and lets the panel
@@ -306,9 +314,9 @@ export function Editor({
                       editorPadding={16}
                       editorClassName="font-mono focus:outline-none"
                       editorStyle={{
-                        fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                        fontFamily: editorFontFamily,
                         fontSize: zoomLevel,
-                        lineHeight: 1.5,
+                        lineHeight: EDITOR_LINE_HEIGHT,
                         minHeight: '100%',
                         // Breathing room under the last line. It has to live on the
                         // surface, not on the scroll container: a scroll container's

package/src/client/components/workspace/terminal-panel/KeyBar.tsx

@@ -0,0 +1,194 @@
+import { Check, ClipboardCopy, ClipboardPaste } from 'lucide-preact';
+import { useState } from 'preact/hooks';
+import {
+  TERMINAL_KEYS,
+  TERMINAL_SYMBOLS,
+  type TerminalKeyId,
+  type TerminalModifier,
+  type TerminalModifiers,
+} from '@/shared/lib/workspace/terminal/keys';
+
+interface TerminalKeyBarProps {
+  /** Latched modifiers — a tap arms one, and the next key consumes it. */
+  modifiers: TerminalModifiers;
+  onToggleModifier: (modifier: TerminalModifier) => void;
+  onKey: (id: TerminalKeyId) => void;
+  /** Cmd+C in a terminal: copy the selection. Resolves false when there was none. */
+  onCopy: () => Promise<boolean>;
+  /** Cmd+V in a terminal: paste into the shell. Resolves false on a denied clipboard. */
+  onPaste: () => Promise<boolean>;
+  /** The shell is not running; a key would be sent into nothing. */
+  disabled?: boolean;
+}
+
+const MODIFIERS: readonly { modifier: TerminalModifier; label: string; name: string }[] = [
+  { modifier: 'ctrl', label: 'Ctrl', name: 'Ctrl — applies to the next key' },
+  { modifier: 'alt', label: 'Alt', name: 'Alt / meta — applies to the next key' },
+];
+
+const KEY_CLASS =
+  'flex items-center justify-center h-8 min-w-8 px-1.5 rounded border font-mono transition-colors ' +
+  'cursor-pointer select-none disabled:opacity-40 disabled:cursor-default ' +
+  'text-[11px] @[420px]:h-9 @[420px]:min-w-10 @[420px]:text-xs';
+
+const IDLE_CLASS = 'bg-canvas text-ink/80 border-ink/15 hover:text-ink hover:bg-ink/5 active:bg-ink/10';
+const ARMED_CLASS = 'bg-ink text-canvas border-ink';
+
+/**
+ * The keys a phone's soft keyboard does not have.
+ *
+ * Every button sends raw bytes into the live PTY, so what the shell sees is
+ * identical to a physical keypress (the encoding, and the three rules it obeys,
+ * are in `keys.ts`). Ctrl and Alt are LATCHES rather than keys: tapping one arms
+ * it, and the next thing you send — a button here or a letter typed on the soft
+ * keyboard — carries it, which is the only way a phone reaches Ctrl+C, Ctrl+R
+ * or Alt+B.
+ *
+ * **Copy and Paste stand in for Cmd+C / Cmd+V**, which is what those chords mean
+ * in a terminal and the one thing a phone genuinely cannot do: it has no
+ * selection to right-click and no paste without a long-press the terminal canvas
+ * does not offer. There is no raw Cmd button because xterm discards `metaKey`
+ * on every key but Cmd+A (`if (ev.metaKey) break;`, which routes Cmd+A to
+ * select-all) — a Cmd button would send nothing, while the Cmd chords the user
+ * does have keep working untouched. Copy reports when there was no selection
+ * rather than flashing a check for a clipboard it did not fill.
+ *
+ * `pointerdown` is swallowed so tapping a key never moves focus out of xterm's
+ * hidden textarea: blurring it closes the OS keyboard, and a key bar that makes
+ * the keyboard disappear is worse than no key bar.
+ *
+ * Wrapping, not horizontal scrolling. The diff toolbar taught that a
+ * `no-scrollbar` overflow hides actions with nothing on screen to say so
+ * (measured: 361px of content in a 296px box, the last action entirely
+ * outside); a narrow panel here gets three rows of keys instead, and the
+ * container query grows them back on a wide one. The container is this bar's
+ * own root, so the breakpoints follow the PANEL — 320px on a desktop is the
+ * same problem as 320px on a phone.
+ */
+export function TerminalKeyBar({
+  modifiers,
+  onToggleModifier,
+  onKey,
+  onCopy,
+  onPaste,
+  disabled,
+}: TerminalKeyBarProps) {
+  const [symbols, setSymbols] = useState(false);
+  const [feedback, setFeedback] = useState<'copied' | 'empty' | 'pasteFailed' | null>(null);
+  const latched = modifiers.ctrl || modifiers.alt;
+
+  const flash = (next: typeof feedback) => {
+    setFeedback(next);
+    setTimeout(() => setFeedback((current) => (current === next ? null : current)), 1500);
+  };
+
+  const handleCopy = async () => {
+    flash((await onCopy()) ? 'copied' : 'empty');
+  };
+
+  const handlePaste = async () => {
+    if (!(await onPaste())) flash('pasteFailed');
+  };
+
+  return (
+    <div
+      className="@container flex flex-col gap-1 px-2 py-1.5 border-t border-ink/10 bg-paper flex-shrink-0"
+      onPointerDown={(event) => event.preventDefault()}
+    >
+      {/* Action row: the two latches, the Cmd pair, and the layer switch. */}
+      <div className="flex flex-wrap items-center gap-1">
+        {MODIFIERS.map(({ modifier, label, name }) => (
+          <button
+            key={modifier}
+            type="button"
+            onClick={() => onToggleModifier(modifier)}
+            aria-pressed={modifiers[modifier]}
+            title={name}
+            aria-label={name}
+            className={`${KEY_CLASS} ${modifiers[modifier] ? ARMED_CLASS : IDLE_CLASS}`}
+          >
+            {label}
+          </button>
+        ))}
+
+        {/* A latch is armed, so say so: an invisible Ctrl turns the next tap into
+            a signal the user never asked for. */}
+        {latched && (
+          <span className="text-[10px] font-mono text-ink/50 px-0.5 whitespace-nowrap" aria-hidden>
+            next
+          </span>
+        )}
+
+        <span className="w-px h-5 bg-ink/15 flex-shrink-0" aria-hidden />
+
+        <button
+          type="button"
+          onClick={handleCopy}
+          disabled={disabled}
+          title={feedback === 'empty' ? 'Nothing selected' : 'Copy selection'}
+          aria-label="Copy selection"
+          className={`${KEY_CLASS} ${
+            feedback === 'empty'
+              ? 'bg-warning/10 text-warning border-warning/30'
+              : IDLE_CLASS
+          }`}
+        >
+          {feedback === 'copied' ? <Check size={13} /> : <ClipboardCopy size={13} />}
+          {/* Labelled, not icon-only: `ClipboardCopy` and `ClipboardPaste` are
+              the same 13px clipboard silhouette at a glance, so on a phone the
+              pair read as two identical buttons — the one thing a key bar must
+              never be. The label is what makes them tell themselves apart. */}
+          <span className="pl-1">Copy</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={handlePaste}
+          disabled={disabled}
+          title={feedback === 'pasteFailed' ? 'Clipboard unavailable' : 'Paste into the shell'}
+          aria-label="Paste into the shell"
+          className={`${KEY_CLASS} ${
+            feedback === 'pasteFailed'
+              ? 'bg-error/10 text-error border-error/30'
+              : IDLE_CLASS
+          }`}
+        >
+          <ClipboardPaste size={13} />
+          <span className="pl-1">Paste</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={() => setSymbols((previous) => !previous)}
+          aria-pressed={symbols}
+          title={symbols ? 'Show control keys' : 'Show symbols'}
+          aria-label={symbols ? 'Show control keys' : 'Show symbols'}
+          className={`${KEY_CLASS} ml-auto ${symbols ? ARMED_CLASS : IDLE_CLASS}`}
+        >
+          {/* `123` / `ABC`, the labels every phone keyboard already uses for its
+              own symbol layer. An icon here was a metaphor the user had to
+              decode; the convention needs no decoding. */}
+          {symbols ? 'ABC' : '123'}
+        </button>
+      </div>
+
+      {/* Key row: the same set swaps in place, the way a phone keyboard's own
+          layer key works — two sets stacked would cost the canvas twice. */}
+      <div className="flex flex-wrap items-center gap-1">
+        {(symbols ? TERMINAL_SYMBOLS : TERMINAL_KEYS).map((def) => (
+          <button
+            key={def.id}
+            type="button"
+            disabled={disabled}
+            onClick={() => onKey(def.id)}
+            title={def.name}
+            aria-label={def.name}
+            className={`${KEY_CLASS} ${IDLE_CLASS}`}
+          >
+            {def.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/terminal-panel/RealtimeXtermView.tsx

@@ -17,6 +17,21 @@ export interface RealtimeXtermHandle {
   /** Drop the buffer and reset the cursor — used when the shell is replaced. */
   reset: () => void;
   focus: () => void;
+  /**
+   * The shell's DECCKM state, read at the moment a key bar button is pressed.
+   * A full-screen app (vim, less) sets it and then expects the SS3 spelling of
+   * the arrows, so the encoding cannot be decided once at mount.
+   */
+  applicationCursorKeys: () => boolean;
+  /** The current selection, empty when nothing is selected. */
+  getSelection: () => string;
+  /**
+   * Feed text in as a paste. Goes through xterm's own `paste`, which is what
+   * wraps it in the bracketed-paste markers when the shell asked for them —
+   * writing the bytes directly would make a multi-line paste execute line by
+   * line in an editor that expects one block.
+   */
+  paste: (text: string) => void;
 }
 
 interface RealtimeXtermViewProps {
@@ -76,6 +91,15 @@ export const RealtimeXtermView = forwardRef<RealtimeXtermHandle, RealtimeXtermVi
       focus() {
         mountRef.current?.term.focus();
       },
+      applicationCursorKeys() {
+        return mountRef.current?.term.modes.applicationCursorKeysMode ?? false;
+      },
+      getSelection() {
+        return mountRef.current?.term.getSelection() ?? '';
+      },
+      paste(text: string) {
+        mountRef.current?.term.paste(text);
+      },
     }), []);
 
     const scrollToBottom = useCallback(() => {