ompchamber 0.3.0

package/src/client/components/mobile/mobile-main-view/Header.tsx

@@ -0,0 +1,264 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { Check, ChevronDown, Menu, PanelRight, Plus } from 'lucide-preact';
+import type { SessionContextTelemetry } from '@/shared/types/context';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { getLastOpenedAt } from '@/shared/lib/workspace/session-state/store';
+import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+import { useAgentStreamStatus } from '@/client/hooks/chat/omp/status';
+import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
+import { formatCompactTokens } from '@/shared/lib/format/number';
+
+interface MobileHeaderProps {
+  activeSessionTitle: string;
+  activeSessionId: number | string | null;
+  onOpenSessionSidebar: () => void;
+  onOpenRightSidebar: () => void;
+  onNewSession: () => void;
+  onSelectSession: (id: number | string) => void;
+}
+
+interface RecentSession {
+  id: number | string;
+  title: string;
+  folderName: string;
+  /** Sort key: the user's last-open time when within the window, else the
+   *  session file's modification time. */
+  modified: number;
+}
+
+const MAX_RECENT_SESSIONS = 10;
+/** A session is "recent" only while the user opened it within this window
+ *  (mirrors the session-state store's idle TTL). */
+const RECENT_OPEN_WINDOW_MS = 10 * 60 * 1000;
+
+export function MobileHeader({
+  activeSessionTitle,
+  activeSessionId,
+  onOpenSessionSidebar,
+  onOpenRightSidebar,
+  onNewSession,
+  onSelectSession,
+}: MobileHeaderProps) {
+  const { folders } = useSidebarData();
+  const streamStatus = useAgentStreamStatus();
+  const [showSessionPicker, setShowSessionPicker] = useState(false);
+  const [showTelemetry, setShowTelemetry] = useState(false);
+  const [telemetry, setTelemetry] = useState<SessionContextTelemetry | null>(null);
+
+  const sessionPickerRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(sessionPickerRef, () => setShowSessionPicker(false));
+
+  const telemetryRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(telemetryRef, () => setShowTelemetry(false));
+
+  // Real context telemetry for the active session (the same source the Context
+  // panel reads). No session → nothing to report, so the readout stays empty
+  // instead of showing invented runtime numbers.
+  useEffect(() => {
+    if (!activeSessionId) {
+      setTelemetry(null);
+      return;
+    }
+    let cancelled = false;
+    fetch(`/api/telemetry/context?sessionId=${encodeURIComponent(String(activeSessionId))}`)
+      .then(res => (res.ok ? res.json() : null))
+      .then((data: { telemetry?: SessionContextTelemetry } | null) => {
+        if (!cancelled) setTelemetry(data?.telemetry ?? null);
+      })
+      .catch(() => {
+        if (!cancelled) setTelemetry(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeSessionId]);
+
+  // Recent sessions: archived rows are hidden. A session the user actually
+  // opened in this tab within the last 10 minutes ranks by that open time
+  // ("last opened by user"); sessions never opened here fall back to file
+  // modification time so the picker is never empty on a fresh tab, and rows
+  // whose open is older than the window drop out of the list.
+  const recentSessions = useMemo<RecentSession[]>(() => {
+    const now = Date.now();
+    const rows: RecentSession[] = [];
+    for (const folder of folders) {
+      for (const session of folder.sessions ?? []) {
+        if (session.is_archived === 1) continue;
+        const lastOpenedAt = getLastOpenedAt(String(session.id));
+        const modified = session.updated_at ? Date.parse(session.updated_at) : 0;
+        // Within the window: the open time is the ranking key. Without a
+        // recorded open, keep the row only if the file is itself recent.
+        const sortKey = lastOpenedAt !== undefined && now - lastOpenedAt <= RECENT_OPEN_WINDOW_MS
+          ? lastOpenedAt
+          : modified;
+        if (lastOpenedAt !== undefined && now - lastOpenedAt > RECENT_OPEN_WINDOW_MS) continue;
+        rows.push({
+          id: session.id,
+          title: session.title,
+          folderName: folder.name,
+          modified: sortKey,
+        });
+      }
+    }
+    return rows
+      .sort((a, b) => b.modified - a.modified)
+      .slice(0, MAX_RECENT_SESSIONS);
+  }, [folders]);
+
+  const displayTitle = activeSessionTitle
+    ? activeSessionTitle.charAt(0).toUpperCase() + activeSessionTitle.slice(1)
+    : 'New session';
+
+  return (
+    <header
+      className="flex-shrink-0 bg-canvas border-b border-ink/10 flex items-center justify-between px-3 z-20 titlebar-drag-region select-none"
+      style={{
+        height: 'calc(3.5rem + env(safe-area-inset-top, 0px))',
+        paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px), env(titlebar-area-x, 0px))',
+        paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px), calc(100vw - env(titlebar-area-width, 100vw)))',
+        paddingTop: 'env(safe-area-inset-top, 0px)',
+      }}
+    >
+      {/* Left: hamburger, app title & session dropdown */}
+      <div className="flex items-center space-x-2 min-w-0 titlebar-no-drag">
+        <button
+          type="button"
+          onClick={onOpenSessionSidebar}
+          className="p-1.5 rounded-lg hover:bg-ink/5 active:bg-ink/10 text-ink transition-colors flex-shrink-0"
+          title="Open Sessions"
+          aria-label="Open Sessions"
+        >
+          <Menu size={20} strokeWidth={2} />
+        </button>
+
+        <span className="relative font-bold text-sm tracking-tight flex items-center flex-shrink-0">
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 font-extrabold text-[15px] tracking-tighter">OMP</span>
+          <span className="ml-[1px] text-ink">Chamber</span>
+          <span className="absolute -top-0.5 -right-1.5 flex">
+            <StreamStatusDot status={streamStatus} />
+          </span>
+        </span>
+
+        <span className="text-ink/25 font-light text-xs flex-shrink-0 select-none">/</span>
+
+        <div className="relative min-w-0" ref={sessionPickerRef}>
+          <button
+            type="button"
+            onClick={() => setShowSessionPicker(!showSessionPicker)}
+            className="flex items-center space-x-1 text-xs font-semibold text-ink hover:text-ink/80 transition-colors py-1 max-w-[150px] min-w-0"
+            title={displayTitle}
+          >
+            <span className="truncate">{displayTitle}</span>
+            <ChevronDown size={13} className="text-ink/50 flex-shrink-0" />
+          </button>
+
+          {showSessionPicker && (
+            <div className="absolute top-full left-0 mt-1.5 w-72 max-w-[calc(100vw-1.5rem)] bg-paper border border-ink/15 rounded-xl shadow-lg z-50 p-2 text-xs">
+              <button
+                type="button"
+                onClick={() => { onNewSession(); setShowSessionPicker(false); }}
+                className="w-full text-left px-3 py-2 rounded-lg bg-ink text-canvas flex items-center space-x-2 font-medium mb-1.5 active:scale-98"
+              >
+                <Plus size={14} />
+                <span>Start New Session</span>
+              </button>
+
+              <div className="px-2 py-1 text-[10px] uppercase font-bold text-ink/40">Recent Sessions</div>
+              <div className="max-h-64 scrollbar-overlay-container scrollbar-overlay-static space-y-0.5">
+                {recentSessions.length === 0 ? (
+                  <div className="px-2.5 py-2 text-ink/40 italic">No sessions yet</div>
+                ) : (
+                  recentSessions.map(s => (
+                    <button
+                      key={s.id}
+                      type="button"
+                      onClick={() => { onSelectSession(s.id); setShowSessionPicker(false); }}
+                      className={`w-full text-left px-2.5 py-1.5 rounded-lg flex items-center justify-between space-x-2 transition-colors ${
+                        String(activeSessionId) === String(s.id)
+                          ? 'bg-ink/10 font-semibold text-ink'
+                          : 'hover:bg-ink/5 text-ink/80'
+                      }`}
+                    >
+                      <span className="min-w-0 flex flex-col">
+                        <span className="truncate">
+                          {s.title ? s.title.charAt(0).toUpperCase() + s.title.slice(1) : 'Untitled'}
+                        </span>
+                        <span className="truncate text-[10px] text-ink/40 font-mono">{s.folderName}</span>
+                      </span>
+                      {String(activeSessionId) === String(s.id) && <Check size={12} className="flex-shrink-0" />}
+                    </button>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right: context telemetry & right panel toggle */}
+      <div className="flex items-center space-x-1 text-ink">
+        <div className="relative flex items-center" ref={telemetryRef}>
+          <button
+            type="button"
+            onClick={() => setShowTelemetry(!showTelemetry)}
+            className="w-8 h-8 rounded-lg hover:bg-ink/5 active:bg-ink/10 flex items-center justify-center text-ink transition-colors cursor-pointer"
+            title="Context usage"
+            aria-label="Context usage"
+          >
+            <span className="w-4 h-4 rounded-full border-[1.5px] border-ink/60 hover:border-ink transition-colors" />
+          </button>
+          {showTelemetry && (
+            <div className="absolute top-full right-0 mt-2 w-56 bg-paper border border-ink/20 rounded-xl shadow-xl z-50 p-3 text-xs font-mono">
+              <div className="font-semibold text-ink font-sans pb-1.5 border-b border-ink/10 flex items-center justify-between">
+                <span>Context</span>
+                {telemetry && telemetry.messagesCount > 0 && (
+                  <span className="w-1.5 h-1.5 rounded-full bg-success" />
+                )}
+              </div>
+              {!telemetry || telemetry.messagesCount === 0 ? (
+                <div className="pt-2 text-[11px] text-ink/50 italic font-sans">Session not started</div>
+              ) : (
+                <div className="pt-2 space-y-1.5 text-[11px] text-ink/80">
+                  <div className="flex justify-between gap-2">
+                    <span className="text-ink/50">Model:</span>
+                    <span className="truncate">{telemetry.modelName || '—'}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-ink/50">Context:</span>
+                    <span>
+                      {formatCompactTokens(telemetry.contextUsed) ?? '0'} / {formatCompactTokens(telemetry.contextLimit) ?? '0'} ({telemetry.contextPercent}%)
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-ink/50">Messages:</span>
+                    <span>{telemetry.messagesCount}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-ink/50">Cost:</span>
+                    <span>{telemetry.costFormatted}</span>
+                  </div>
+                  {typeof telemetry.cacheHitAverage === 'number' && (
+                    <div className="flex justify-between">
+                      <span className="text-ink/50">Cache hit:</span>
+                      <span>{telemetry.cacheHitAverage.toFixed(1)}%</span>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <button
+          type="button"
+          onClick={onOpenRightSidebar}
+          className="w-8 h-8 rounded-lg hover:bg-ink/5 active:bg-ink/10 flex items-center justify-center text-ink transition-colors cursor-pointer"
+          title="Right Panel"
+          aria-label="Open Right Panel"
+        >
+          <PanelRight size={18} strokeWidth={1.8} />
+        </button>
+      </div>
+    </header>
+  );
+}

package/src/client/components/mobile/mobile-right-sidebar/FullDiff.tsx

@@ -0,0 +1,80 @@
+import { ArrowLeft } from 'lucide-preact';
+import { FileIcon } from '@/client/components/common/file-icon';
+import { DiffPanel } from '@/client/components/workspace/diff-panel';
+import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
+
+interface MobileFullDiffProps {
+  diff: {
+    path: string;
+    status?: string;
+    staged?: boolean;
+    repo?: string;
+    root?: string;
+  };
+  onClose: () => void;
+  onFileSaved?: () => void;
+}
+
+/**
+ * Phone-sized diff view: the desktop `DiffPanel` in a full-screen overlay with
+ * the chrome a phone needs (back button, file identity, status badge).
+ *
+ * Reusing the panel is what gives mobile stage/unstage, discard, split view,
+ * whitespace filtering and copy-diff — the phone only supplies the header, so
+ * the two layouts cannot drift apart.
+ */
+export function MobileFullDiff({ diff, onClose, onFileSaved }: MobileFullDiffProps) {
+  const fileName = diff.path.split('/').pop() || diff.path;
+  const isStaged = Boolean(diff.staged);
+  const status = diff.status || 'M';
+  const statusInfo = getGitStatusInfo(status, isStaged);
+
+  return (
+    <div className="fixed inset-x-0 top-0 h-dvh z-[60] bg-paper flex flex-col">
+      <header
+        className="bg-canvas border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0"
+        style={{
+          height: 'calc(3rem + env(safe-area-inset-top, 0px))',
+          paddingTop: 'env(safe-area-inset-top, 0px)',
+          paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px))',
+          paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px))',
+        }}
+      >
+        <div className="flex items-center space-x-2 min-w-0 pr-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 -ml-1 rounded-lg hover:bg-ink/5 active:bg-ink/10 text-ink transition-colors flex-shrink-0"
+            title="Back"
+            aria-label="Close diff"
+          >
+            <ArrowLeft size={18} strokeWidth={1.9} />
+          </button>
+
+          <FileIcon name={fileName} size={14} className="flex-shrink-0" />
+          <span className="font-mono text-xs text-ink font-medium truncate" title={diff.path}>
+            {fileName}
+          </span>
+        </div>
+
+        <span
+          className={`px-1.5 py-0.5 text-[10px] font-mono font-semibold rounded border flex-shrink-0 ${statusInfo.badgeBgClass}`}
+        >
+          {statusInfo.charStatus} {statusInfo.label}
+        </span>
+      </header>
+
+      <div className="flex-1 min-h-0">
+        <DiffPanel
+          className="h-full"
+          filePath={diff.path}
+          status={status}
+          isStaged={isStaged}
+          root={diff.root}
+          repo={diff.repo || '.'}
+          onFileSaved={onFileSaved}
+        />
+      </div>
+    </div>
+  );
+}

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'preact/hooks';
+import { AlertTriangle, Loader2 } from 'lucide-preact';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import { CodeSurface } from '@/client/components/common/code-surface';
+import { EditorHeader } from '@/client/components/mobile/mobile-right-sidebar/Header';
+import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
+import { useFileEditor } from '@/client/hooks/editor/use-file-editor';
+
+interface MobileFullEditorProps {
+  file: {
+    name: string;
+    path?: string;
+    content?: string;
+    root?: string;
+    repo?: string;
+  };
+  onClose: () => void;
+  /** Fired after a debounced write lands, so the workspace panels can refresh. */
+  onFileSaved?: () => void;
+}
+
+export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEditorProps) {
+  const [isPreview, setIsPreview] = useState(file.name.endsWith('.md'));
+  const [fontSize, setFontSize] = useState(12);
+  const [wordWrap, setWordWrap] = useState(true);
+  const { isScrolling, handleScroll } = useScrollbarFade();
+
+  const isMd = file.name.endsWith('.md');
+
+  const editor = useFileEditor(file, {
+    reportLoadError: true,
+    flushOnUnmount: true,
+    reportSaveError: true,
+    downloadMimeType: 'text/plain;charset=utf-8',
+    onFileSaved,
+  });
+
+  const content = editor.content;
+  const lang = editor.language;
+  const linesCount = content.split('\n').length;
+
+  return (
+    <div className="fixed inset-x-0 top-0 h-dvh z-[60] bg-paper flex flex-col font-mono text-xs select-none">
+      
+      <EditorHeader
+        fileName={file.name}
+        isMarkdown={isMd}
+        isPreview={isPreview}
+        wordWrap={wordWrap}
+        copied={editor.copied}
+        onClose={onClose}
+        onTogglePreview={() => setIsPreview(!isPreview)}
+        onToggleWrap={() => setWordWrap(!wordWrap)}
+        onZoomOut={() => setFontSize(prev => Math.max(10, prev - 1))}
+        onZoomIn={() => setFontSize(prev => Math.min(18, prev + 1))}
+        onCopy={editor.copy}
+        onDownload={editor.download}
+      />
+
+      {/* Editor Content Area - Desktop styled: bg-paper text-ink */}
+      <div onScroll={handleScroll} className={`flex-1 min-h-0 overflow-auto relative bg-paper text-ink select-text ${scrollbarFadeClass(isScrolling)}`}>
+        {editor.isLoading ? (
+          <div className="flex items-center justify-center h-full text-ink/40 text-xs gap-2">
+            <Loader2 size={14} className="animate-spin" />
+            <span>Loading file content...</span>
+          </div>
+        ) : editor.loadError ? (
+          <div className="flex flex-col items-center justify-center h-full gap-2 px-6 text-center">
+            <AlertTriangle size={20} className="text-error" />
+            <span className="text-xs text-error font-sans">Could not read {file.name}</span>
+            <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
+          </div>
+        ) : isMd && isPreview ? (
+          /* Markdown Preview Mode */
+          <div className="p-4 bg-paper text-ink min-h-full font-sans prose prose-sm max-w-none">
+            <MarkdownRenderer content={content} />
+          </div>
+        ) : (
+          /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */
+          <CodeSurface
+            value={content}
+            onValueChange={editor.onChange}
+            language={lang}
+            wordWrap={wordWrap}
+            rootClassName="flex min-h-full bg-paper"
+            gutterClassName="w-10 py-3 pr-2 select-none text-right text-[10px] text-ink/30 bg-canvas border-r border-ink/10 font-mono leading-[20px] flex-shrink-0"
+            editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
+            editorClassName="focus:outline-none"
+            editorStyle={{
+              fontFamily: 'monospace',
+              fontSize: `${fontSize}px`,
+              lineHeight: '20px',
+              backgroundColor: 'transparent',
+              minHeight: '100%',
+              color: 'var(--theme-ink)',
+            }}
+          />
+        )}
+      </div>
+
+      {/* Bottom Status Bar - Desktop styled: bg-canvas border-t border-ink/10 */}
+      <footer
+        className="bg-canvas border-t border-ink/10 px-3 flex items-center justify-between text-[10px] text-ink/60 flex-shrink-0 font-mono"
+        style={{
+          height: 'calc(1.75rem + env(safe-area-inset-bottom, 0px))',
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+          paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px))',
+          paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px))',
+        }}
+      >
+        <div className="flex items-center space-x-3">
+          <span>{linesCount} lines</span>
+          <span>{content.length} chars</span>
+          <span className="uppercase">{lang}</span>
+        </div>
+        <div className="flex items-center space-x-2">
+          {editor.saveStatus === 'saving' && (
+            <>
+              <Loader2 size={10} className="animate-spin" />
+              <span>Saving…</span>
+            </>
+          )}
+          {editor.saveStatus === 'saved' && (
+            <>
+              <span className="w-1.5 h-1.5 rounded-full bg-success"></span>
+              <span>Saved</span>
+            </>
+          )}
+          {editor.saveStatus === 'error' && (
+            <>
+              <span className="w-1.5 h-1.5 rounded-full bg-error"></span>
+              <span className="text-error">Save failed</span>
+            </>
+          )}
+          {editor.saveStatus === 'idle' && file.path && <span className="truncate max-w-[140px]">{file.path}</span>}
+        </div>
+      </footer>
+
+    </div>
+  );
+}

package/src/client/components/mobile/mobile-right-sidebar/Header.tsx

@@ -0,0 +1,121 @@
+import { ArrowLeft, Check, Copy, Download, Eye, EyeOff, WrapText, ZoomIn, ZoomOut } from 'lucide-preact';
+import { FileIcon } from '@/client/components/common/file-icon';
+
+interface EditorHeaderProps {
+  fileName: string;
+  /** Markdown files can toggle between source and rendered preview. */
+  isMarkdown: boolean;
+  isPreview: boolean;
+  wordWrap: boolean;
+  copied: boolean;
+  onClose: () => void;
+  onTogglePreview: () => void;
+  onToggleWrap: () => void;
+  onZoomOut: () => void;
+  onZoomIn: () => void;
+  onCopy: () => void;
+  onDownload: () => void;
+}
+
+/** Mobile editor top bar: back/close, file identity, and the file actions. */
+export function EditorHeader({
+  fileName,
+  isMarkdown,
+  isPreview,
+  wordWrap,
+  copied,
+  onClose,
+  onTogglePreview,
+  onToggleWrap,
+  onZoomOut,
+  onZoomIn,
+  onCopy,
+  onDownload,
+}: EditorHeaderProps) {
+  return (
+    <header
+      className="bg-canvas border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0"
+      style={{
+        height: 'calc(3rem + env(safe-area-inset-top, 0px))',
+        paddingTop: 'env(safe-area-inset-top, 0px)',
+        paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px))',
+        paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px))',
+      }}
+    >
+      <div className="flex items-center space-x-2 min-w-0 pr-2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-ink/10 text-ink transition-colors active:scale-90 flex-shrink-0 cursor-pointer"
+          title="Close editor"
+          aria-label="Close editor"
+        >
+          <ArrowLeft size={18} strokeWidth={2} />
+        </button>
+
+        <div className="flex items-center space-x-1.5 truncate">
+          <FileIcon name={fileName} size={15} className="flex-shrink-0" />
+          <span className="font-semibold text-xs text-ink truncate">{fileName}</span>
+        </div>
+      </div>
+
+      <div className="flex items-center space-x-1 text-ink/70 flex-shrink-0">
+        {isMarkdown && (
+          <button
+            type="button"
+            onClick={onTogglePreview}
+            className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${isPreview ? 'bg-ink text-canvas' : ''}`}
+            title={isPreview ? 'View code' : 'Preview markdown'}
+          >
+            {isPreview ? <EyeOff size={15} /> : <Eye size={15} />}
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={onToggleWrap}
+          className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${wordWrap ? 'text-ink' : ''}`}
+          title="Toggle word wrap"
+        >
+          <WrapText size={15} />
+        </button>
+
+        <button
+          type="button"
+          onClick={onZoomOut}
+          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+          title="Decrease font size"
+        >
+          <ZoomOut size={15} />
+        </button>
+
+        <button
+          type="button"
+          onClick={onZoomIn}
+          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+          title="Increase font size"
+        >
+          <ZoomIn size={15} />
+        </button>
+
+        <button
+          type="button"
+          onClick={onCopy}
+          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+          title="Copy content"
+        >
+          {copied ? <Check size={15} className="text-success" /> : <Copy size={15} />}
+        </button>
+
+        <button
+          type="button"
+          onClick={onDownload}
+          className="p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer"
+          title="Download file"
+        >
+          <Download size={15} />
+        </button>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { Info, Monitor, Settings } from 'lucide-preact';
+import packageJson from '@/../package.json';
+
+interface MobileSessionFooterProps {
+  onSettings: () => void;
+  onAbout: () => void;
+  updateAvailable?: boolean;
+  onUpdateClick?: () => void;
+  /** Switch the app to the desktop layout for this page session only. The
+   *  choice is not persisted, so the next load re-detects the device. */
+  onDesktopToggle?: () => void;
+}
+
+export function MobileSessionFooter({
+  onSettings,
+  onAbout,
+  updateAvailable,
+  onUpdateClick,
+  onDesktopToggle,
+}: MobileSessionFooterProps) {
+  return (
+    <div
+      className="px-3 pt-3 border-t border-ink/10 flex items-center justify-between flex-shrink-0 bg-canvas text-xs text-ink/60"
+      style={{ paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom, 0px))' }}
+    >
+      <div className="flex items-center space-x-3">
+        <button
+          type="button"
+          onClick={onSettings}
+          className="flex items-center space-x-1 hover:text-ink transition-colors"
+        >
+          <Settings size={14} />
+          <span>Settings</span>
+        </button>
+        <button
+          type="button"
+          onClick={onAbout}
+          className="flex items-center space-x-1 hover:text-ink transition-colors"
+        >
+          <Info size={14} />
+          <span>About</span>
+        </button>
+        {onDesktopToggle && (
+          <button
+            type="button"
+            onClick={onDesktopToggle}
+            className="flex items-center space-x-1 hover:text-ink transition-colors"
+            title="Switch to desktop view"
+          >
+            <Monitor size={14} />
+            <span>Desktop</span>
+          </button>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="font-mono text-[10px] text-ink/40">v{packageJson.version}</span>
+        {updateAvailable && (
+          <button
+            type="button"
+            onClick={onUpdateClick}
+            className="px-2 py-0.5 rounded-full border border-ink/20 text-[10px] font-semibold text-ink hover:border-ink/40"
+          >
+            update
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}