ompchamber 3.1.1 → 3.3.0

package/src/client/components/workspace/diff-panel/UnifiedView.tsx

@@ -6,9 +6,11 @@ import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 interface UnifiedViewProps {
   lines: DiffLine[];
   language: string;
+  /** Wrap long lines instead of scrolling horizontally. */
+  wordWrap: boolean;
 }
 
-export function UnifiedView({ lines, language }: UnifiedViewProps) {
+export function UnifiedView({ lines, language, wordWrap }: UnifiedViewProps) {
   const syntaxReady = useSyntaxReady();
 
   const htmlByIndex = useMemo(() => {
@@ -41,8 +43,13 @@ export function UnifiedView({ lines, language }: UnifiedViewProps) {
       {/* The room under the last row belongs to the content, not the scroller:
           a scroll container's own bottom padding is not part of its scrollable
           overflow, so the padding has to sit inside it to have any effect. */}
-      <div className="pb-4">
-        <table className="w-max min-w-full border-collapse">
+      <div className={`pb-4 ${wordWrap ? 'w-full' : 'w-max min-w-full'}`}>
+        {/* Wrap needs `table-fixed`: auto layout sizes a column by its widest
+            cell's UNAMBIGUOUS minimum (`overflow-wrap: break-word` does not
+            lower it), so a long line would still widen the table and scroll
+            instead of wrapping. Fixed layout takes the width from the row's
+            own box, which is what makes the cell's wrap rule effective. */}
+        <table className={`border-collapse ${wordWrap ? 'table-fixed w-full' : 'w-max min-w-full'}`}>
           <tbody>
             {lines.map((line, idx) => {
               if (line.type === 'meta') {
@@ -69,9 +76,13 @@ export function UnifiedView({ lines, language }: UnifiedViewProps) {
                       : 'hover:bg-ink/[0.03]'
                   }`}
                 >
-                  {/* Old line number */}
+                  {/* Old line number. Top-aligned when the row wraps, or the
+                      number would float to the middle of a multi-line cell
+                      instead of naming its first line. */}
                   <td
                     className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+                      wordWrap ? 'align-top' : ''
+                    } ${
                       isDel
                         ? 'bg-error/15 text-error font-semibold'
                         : isAdd
@@ -85,6 +96,8 @@ export function UnifiedView({ lines, language }: UnifiedViewProps) {
                   {/* New line number */}
                   <td
                     className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+                      wordWrap ? 'align-top' : ''
+                    } ${
                       isAdd
                         ? 'bg-success/15 text-success font-semibold'
                         : isDel
@@ -96,7 +109,7 @@ export function UnifiedView({ lines, language }: UnifiedViewProps) {
                   </td>
 
                   {/* Change prefix & code text */}
-                  <td className="py-0.5 px-3 whitespace-pre text-ink pr-6">
+                  <td className={`py-0.5 px-3 text-ink pr-6 ${wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'whitespace-pre'}`}>
                     <span
                       className={`inline-block w-4 text-center select-none font-bold ${
                         isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'

package/src/client/components/workspace/diff-panel/index.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useSessionUiState } from '@/client/hooks/workspace/session-state';
 import { parseUnifiedDiff } from '@/shared/lib/fs/diff-parser';
-import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
-import { DiffToolbar, type DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { DiffToolbar, type DiffContentMode, type DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
 import { UnifiedView } from '@/client/components/workspace/diff-panel/UnifiedView';
 import { SplitView } from '@/client/components/workspace/diff-panel/SplitView';
 import { AlertCircle, RefreshCw } from 'lucide-preact';
@@ -30,6 +30,8 @@ export function DiffPanel({
 }: DiffPanelProps) {
   // Read and persist view mode & whitespace preference in session_ui_state
   const [viewMode, setViewMode] = useSessionUiState<DiffViewMode>('diff.viewMode', 'unified');
+  const [contentMode, setContentMode] = useSessionUiState<DiffContentMode>('diff.contentMode', 'full');
+  const [wordWrap, setWordWrap] = useSessionUiState<boolean>('diff.wordWrap', true);
   const [ignoreWhitespace, setIgnoreWhitespace] = useSessionUiState<boolean>('diff.ignoreWhitespace', false);
 
   const [rawDiff, setRawDiff] = useState<string>('');
@@ -66,6 +68,11 @@ export function DiffPanel({
         staged: staged ? '1' : '0',
         repo: repo || '.',
       });
+      // `fullContext=1` makes git emit the whole file rather than the hunks.
+      // Only the user's own toggle changes it, so it is safe as a callback
+      // dependency (unlike the staged/status copies above, which the action
+      // path updates while a fetch of its own is already in flight).
+      if (contentMode === 'full') params.set('fullContext', '1');
       if (statusForFetch) params.set('status', statusForFetch);
       if (root) params.set('root', root);
 
@@ -99,7 +106,7 @@ export function DiffPanel({
     } finally {
       if (seq === fetchSeqRef.current) setIsLoading(false);
     }
-  }, [filePath, repo, root]);
+  }, [filePath, repo, root, contentMode]);
 
   useEffect(() => {
     setCurrentStatus(status);
@@ -112,13 +119,31 @@ export function DiffPanel({
     void fetchDiff();
   }, [fetchDiff]);
 
-  const parsed = parseUnifiedDiff(rawDiff, ignoreWhitespace);
+  // Full-code mode parses the whole file, not the hunks, so the parse is keyed
+  // to its inputs: every render used to re-walk the diff (measured 21 ms on an
+  // 80k-line file), for a result that only changes when the diff or the
+  // whitespace toggle does.
+  // Only the rendered view is built: `views` keeps the shared flush (so the
+  // whitespace decision and the counts cannot diverge) while skipping the
+  // object graph nobody draws.
+  const parsed = useMemo(
+    () => parseUnifiedDiff(rawDiff, { ignoreWhitespace, views: viewMode === 'split' ? 'split' : 'unified' }),
+    [rawDiff, ignoreWhitespace, viewMode],
+  );
   const language = getLanguageFromPath(filePath);
 
   const handleSetViewMode = (mode: DiffViewMode) => {
     setViewMode(mode);
   };
 
+  const handleSetContentMode = (mode: DiffContentMode) => {
+    setContentMode(mode);
+  };
+
+  const handleToggleWordWrap = () => {
+    setWordWrap(!wordWrap);
+  };
+
   const handleToggleWhitespace = () => {
     setIgnoreWhitespace(!ignoreWhitespace);
   };
@@ -218,6 +243,8 @@ export function DiffPanel({
         status={currentStatus}
         isStaged={currentStaged}
         viewMode={viewMode}
+        contentMode={contentMode}
+        wordWrap={wordWrap}
         ignoreWhitespace={ignoreWhitespace}
         additions={parsed.additions}
         deletions={parsed.deletions}
@@ -225,6 +252,8 @@ export function DiffPanel({
         isCopied={isCopied}
         isBusy={isBusy}
         onSetViewMode={handleSetViewMode}
+        onSetContentMode={handleSetContentMode}
+        onToggleWordWrap={handleToggleWordWrap}
         onToggleWhitespace={handleToggleWhitespace}
         onStageUnstage={handleStageUnstage}
         onDiscard={handleDiscard}
@@ -268,9 +297,9 @@ export function DiffPanel({
             </button>
           </div>
         ) : viewMode === 'split' ? (
-          <SplitView rows={parsed.splitRows} language={language} />
+          <SplitView rows={parsed.splitRows} language={language} wordWrap={wordWrap} />
         ) : (
-          <UnifiedView lines={parsed.lines} language={language} />
+          <UnifiedView lines={parsed.lines} language={language} wordWrap={wordWrap} />
         )}
       </div>
 

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

@@ -68,14 +68,21 @@ export function EditorToolbar({
           : 'Save file (Ctrl+S)';
 
   return (
-    <div className="flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
+    // `@container`: the path below hides on a NARROW PANEL, not a narrow
+    // viewport. At the editor panel's 320px floor the action strip is 273px of
+    // `flex-shrink-0`, which left the path a measured 23px — a truncated
+    // fragment of a filename is not information, and the tab above already
+    // carries it.
+    <div className="@container flex items-center justify-between px-3 py-2 border-b border-ink/10 bg-paper flex-shrink-0">
       {/* Left status */}
-      <div className="flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
+      <div className="hidden @[420px]:flex items-center space-x-2 text-xs font-mono text-ink/40 min-w-0">
         <span className="truncate max-w-[300px]" title={path}>{path}</span>
       </div>
 
-      {/* Right actions */}
-      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0">
+      {/* Right actions. `ml-auto` keeps them right-aligned once the path block
+          above is hidden, which `justify-between` alone would not do (a single
+          child sits at the start). */}
+      <div className="flex items-center space-x-1 text-ink/40 flex-shrink-0 ml-auto">
         {!isImage && (
           <div className="flex items-center pr-2 mr-1 border-r border-ink/10">
             <button

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/git-panel/commit-modal/CommitDiffViewer.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'preact/hooks';
 import { ChevronDown, ChevronUp } from 'lucide-preact';
-import { getLanguageFromPath, highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { highlightLines } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 
 interface DiffLineItem {

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(() => {

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

@@ -1,10 +1,22 @@
-import { useCallback, useRef } from 'preact/hooks';
+import { useCallback, useRef, useState } from 'preact/hooks';
 import { useTerminal } from '@/client/hooks/workspace/terminal';
 import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { useTheme } from '@/client/hooks/ui/theme';
+import { useTouchDevice } from '@/client/hooks/ui/touch-device';
+import { useKeyboardInset } from '@/client/hooks/ui/keyboard-inset';
+import { copyToClipboard, readClipboardText } from '@/client/hooks/ui/clipboard';
 import { TerminalHeader } from '@/client/components/workspace/terminal-panel/Header';
 import { TerminalQuickActions } from '@/client/components/workspace/terminal-panel/QuickActions';
+import { TerminalKeyBar } from '@/client/components/workspace/terminal-panel/KeyBar';
 import { RealtimeXtermView, type RealtimeXtermHandle } from '@/client/components/workspace/terminal-panel/RealtimeXtermView';
+import {
+  NO_MODIFIERS,
+  applyModifiers,
+  resolveKeySequence,
+  type TerminalKeyId,
+  type TerminalModifier,
+  type TerminalModifiers,
+} from '@/shared/lib/workspace/terminal/keys';
 
 interface TerminalPanelProps {
   className?: string;
@@ -18,9 +30,22 @@ const encoder = new TextEncoder();
 export function TerminalPanel({ className = '', enabled = true, rootPath, showHeader = true }: TerminalPanelProps) {
   const xtermRef = useRef<RealtimeXtermHandle>(null);
   const { isDark } = useTheme();
+  // Only a device without a physical keyboard gets the key bar: on a desktop
+  // every one of those keys is already under the user's fingers, and a strip of
+  // them would cost the canvas height for nothing.
+  const isTouchDevice = useTouchDevice();
+  // The inset is measured from the panel's OWN bottom edge, so it can never
+  // double-count a keyboard the container already shrank for.
+  const rootRef = useRef<HTMLDivElement>(null);
+  const keyboardInset = useKeyboardInset(rootRef);
+  const [modifiers, setModifiers] = useState<TerminalModifiers>(NO_MODIFIERS);
   const { activeRepo, setActiveRepo } = useRepoScope(rootPath, 'terminal.activeRepo');
   const { repos, scanning: reposScanning, rescan: rescanRepos } = useRepoList(rootPath, enabled);
   const gridRef = useRef<{ cols: number; rows: number } | null>(null);
+  // The latch is read inside `handleInput`, which xterm calls outside React's
+  // render — a ref is what makes it the value at the keystroke, not at mount.
+  const modifiersRef = useRef(modifiers);
+  modifiersRef.current = modifiers;
 
   const handleOutput = useCallback((bytes: Uint8Array) => {
     xtermRef.current?.write(bytes);
@@ -70,10 +95,59 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
 
   // Keystrokes arrive as text; `onBinary` payloads are latin-1 bytes and must
   // not be UTF-8 encoded on the way out.
+  //
+  // A latched modifier is folded in here, on the way out, because that is the
+  // only place a soft keyboard's letters pass through — Ctrl+C on a phone is a
+  // tap on `Ctrl` and then the `c` the OS keyboard produces.
   const handleInput = useCallback((data: string) => {
-    input(encoder.encode(data));
+    const latched = modifiersRef.current;
+    const armed = latched.ctrl || latched.alt;
+    const encoded = applyModifiers(data, latched);
+    // Only a single typed character consumes the latch. A paste, a mouse report
+    // or a focus event arrives on this same event and must leave the armed
+    // modifier alone, or the tap that armed it is silently spent on a no-op.
+    if (armed && data.length === 1) setModifiers(NO_MODIFIERS);
+    input(encoder.encode(encoded));
   }, [input]);
 
+  const handleToggleModifier = useCallback((modifier: TerminalModifier) => {
+    setModifiers((previous) => ({ ...previous, [modifier]: !previous[modifier] }));
+    xtermRef.current?.focus();
+  }, []);
+
+  const handleKey = useCallback((id: TerminalKeyId) => {
+    const sequence = resolveKeySequence(id, {
+      applicationCursorKeys: xtermRef.current?.applicationCursorKeys() ?? false,
+      modifiers: modifiersRef.current,
+    });
+    if (!sequence) return;
+    input(encoder.encode(sequence));
+    setModifiers(NO_MODIFIERS);
+    // Keep the OS keyboard where it was; a key bar tap must not dismiss it.
+    xtermRef.current?.focus();
+  }, [input]);
+
+  /**
+   * Cmd+C / Cmd+V, the two chords a terminal actually has — a phone can neither
+   * select on the canvas nor reach its own clipboard from there. Copy reports
+   * whether it had anything to copy so the bar can say "nothing selected"
+   * instead of flashing success over an untouched clipboard.
+   */
+  const handleCopy = useCallback(async () => {
+    const selection = xtermRef.current?.getSelection() ?? '';
+    if (!selection) return false;
+    return copyToClipboard(selection);
+  }, []);
+
+  const handlePaste = useCallback(async () => {
+    const text = await readClipboardText();
+    if (text === null || text.length === 0) return false;
+    // Through xterm's own paste, so a bracketed-paste shell gets its markers.
+    xtermRef.current?.paste(text);
+    xtermRef.current?.focus();
+    return true;
+  }, []);
+
   const handleBinaryInput = useCallback((data: string) => {
     const bytes = new Uint8Array(data.length);
     for (let i = 0; i < data.length; i += 1) bytes[i] = data.charCodeAt(i) & 0xff;
@@ -98,7 +172,17 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
   }
 
   return (
-    <div className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}>
+    <div
+      ref={rootRef}
+      className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}
+      // The soft keyboard covers the bottom of the visual viewport without
+      // shrinking the layout one, so the key bar would sit behind the keys the
+      // user is typing on. Lifting by the panel's actual overlap with the
+      // visible area keeps the bar — and the shell's own grid, which the fit
+      // observer re-measures — above the keyboard, and lifts nothing at all
+      // when the container already ends above it.
+      style={keyboardInset > 0 ? { paddingBottom: keyboardInset } : undefined}
+    >
       {showHeader && (
         <TerminalHeader
           status={status}
@@ -135,6 +219,17 @@ export function TerminalPanel({ className = '', enabled = true, rootPath, showHe
           onGridChange={handleGridChange}
         />
       </div>
+
+      {isTouchDevice && (
+        <TerminalKeyBar
+          modifiers={modifiers}
+          onToggleModifier={handleToggleModifier}
+          onKey={handleKey}
+          onCopy={handleCopy}
+          onPaste={handlePaste}
+          disabled={status !== 'running'}
+        />
+      )}
     </div>
   );
 }