ompchamber 3.1.1 → 3.3.0

package/src/client/components/settings/categories/mcp-settings/SidebarList.tsx

@@ -31,7 +31,7 @@ export const McpSidebarList: FunctionComponent<McpSidebarListProps> = ({
   const activeProjectName = projects.find((proj) => proj.path === selectedProject)?.name ?? 'Global (all projects)';
 
   return (
-    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
+    <div className="w-full md:w-64 md:border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
       <ProjectSelectorDropdown
         selectedProject={selectedProject}
         onChangeProject={onChangeProject}

package/src/client/components/settings/categories/project-settings/SidebarList.tsx

@@ -39,7 +39,7 @@ export function ProjectSidebarList({
   onAddProject,
 }: ProjectSidebarListProps) {
   return (
-    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
+    <div className="w-full md:w-64 md:border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
       {/* List Header */}
       <div className="px-3.5 py-3 border-b border-ink/10 flex items-center justify-between">
         <span className="text-xs font-semibold text-ink">

package/src/client/components/settings/categories/provider-settings/AuthSection.tsx

@@ -31,8 +31,13 @@ export function ProviderAuthSection({
           Authentication
         </div>
 
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2">
+        {/* Wraps instead of overflowing: this row is a status group plus three
+            action buttons, which needs ~330px, while the detail pane is 206px
+            at a 768px window (the modal's own two-pane split). Without the wrap
+            the buttons ran past the panel and were clipped by the modal's
+            `overflow-hidden`. */}
+        <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+          <div className="flex items-center gap-2 min-w-0">
             {isDisabled ? (
               <>
                 <Ban size={15} className="text-ink/50 flex-shrink-0" strokeWidth={2.4} />
@@ -68,7 +73,7 @@ export function ProviderAuthSection({
             </div>
           </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             <button
               type="button"
               onClick={onToggleDisabled}

package/src/client/components/settings/categories/provider-settings/DeleteProviderModal.tsx

@@ -57,7 +57,7 @@ export function DeleteProviderModal({
       aria-label="Confirm provider deletion"
     >
       <div
-        className="bg-paper border border-ink/20 rounded-xl shadow-2xl w-[min(94vw,460px)] overflow-hidden text-ink"
+        className="bg-paper border border-ink/20 rounded-xl shadow-2xl w-[min(94vw,460px)] max-h-full overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static text-ink"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center gap-3 px-5 py-4 border-b border-ink/10">

package/src/client/components/settings/categories/provider-settings/ModelsList.tsx

@@ -42,12 +42,14 @@ export function ProviderModelsList({
   return (
     <div className="space-y-3.5">
       {/* 1. Header with count & hide all / show all */}
-      <div className="flex items-center justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
         <div className="text-xs font-semibold text-ink">
           Available Models <span className="font-normal text-ink/60">({models.length})</span>
         </div>
 
-        <div className="flex items-center gap-2">
+        {/* Wraps: four action chips need ~330px, which the detail pane does not
+            have in a two-pane modal at a 768-900px window. */}
+        <div className="flex flex-wrap items-center gap-2">
           <button
             type="button"
             onClick={onFetchModels}
@@ -133,8 +135,11 @@ export function ProviderModelsList({
                 </span>
               </div>
 
-              {/* Right: Price & Context Badge & Action Icons */}
-              <div className="flex items-center gap-2 flex-shrink-0">
+              {/* Right: Price & Context Badge & Action Icons. Wraps rather than
+                  running past the pane: a long price plus a context badge plus
+                  three icons exceeds the detail pane's width in a two-pane
+                  modal on a ~768px window. */}
+              <div className="flex flex-wrap items-center justify-end gap-2">
                 {/* Pricing Badge (per 1M tokens) */}
                 {(model.priceInput !== undefined || model.priceOutput !== undefined) && (
                   <span

package/src/client/components/settings/categories/provider-settings/SidebarList.tsx

@@ -35,7 +35,7 @@ export function ProviderSidebarList({
   useOnClickOutside(dropdownRef, () => setIsProjectDropdownOpen(false));
 
   return (
-    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
+    <div className="w-full md:w-64 md:border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
       {/* 1. Project Selector Dropdown */}
       <div className="p-3 border-b border-ink/10 relative" ref={dropdownRef}>
         <button

package/src/client/components/settings/categories/skill-catalog/AddSourceModal.tsx

@@ -50,7 +50,7 @@ export function AddSourceModal({ isOpen, onClose, onAddSource }: AddSourceModalP
       onClick={onClose}
     >
       <div
-        className="bg-paper border border-ink/20 rounded-xl max-w-md w-full p-6 shadow-2xl space-y-4 text-ink animate-in fade-in zoom-in-95 duration-150"
+        className="bg-paper border border-ink/20 rounded-xl max-w-md w-full p-6 shadow-2xl space-y-4 text-ink animate-in fade-in zoom-in-95 duration-150 max-h-full overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between pb-3 border-b border-ink/10">

package/src/client/components/settings/categories/skill-settings/SidebarList.tsx

@@ -49,7 +49,7 @@ export function SkillSidebarList({
   const totalCount = skills.length;
 
   return (
-    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
+    <div className="w-full md:w-64 md:border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
       {/* Project Selector Dropdown */}
       <ProjectSelectorDropdown
         variant="compact"

package/src/client/components/settings/categories/usage-settings/SidebarList.tsx

@@ -24,7 +24,7 @@ export function UsageSidebarList({
   const providers = buildProviders(report);
 
   return (
-    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
+    <div className="w-full md:w-64 md:border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
       <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between">
         <span className="text-xs font-semibold text-ink">
           {providers.length} provider{providers.length === 1 ? '' : 's'} with keys

package/src/client/components/settings/master-detail/index.tsx

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { ComponentChildren } from 'preact';
+import { ChevronLeft } from 'lucide-preact';
+import type { SettingsPane } from '@/client/hooks/settings/master-detail';
+
+interface SettingsMasterDetailProps {
+  /** Which pane a phone is showing; desktop shows both. */
+  pane: SettingsPane;
+  onBack: () => void;
+  /** The list pane (a settings sidebar). Owns its own `w-full md:w-64` width. */
+  list: ComponentChildren;
+  detail: ComponentChildren;
+  /** Name of the list, shown on the phone's back bar. */
+  listLabel: string;
+  /** Extra classes for the root (e.g. a category-wide `text-xs`). */
+  className?: string;
+}
+
+/**
+ * Master-detail shell for the settings categories that are two panes on a
+ * desktop (providers, projects, agents, commands, MCP, skills, usage).
+ *
+ * Both panes stay mounted at every width, so a pane's state — a half-typed
+ * form, a scroll position — survives the drill and the back. Only the phone
+ * needs the extra bar: on `md` the two panes sit side by side exactly as
+ * before and the bar is not rendered at all.
+ */
+export function SettingsMasterDetail({
+  pane,
+  onBack,
+  list,
+  detail,
+  listLabel,
+  className = '',
+}: SettingsMasterDetailProps) {
+  return (
+    <div className={`flex-1 flex flex-col md:flex-row h-full w-full min-w-0 overflow-hidden bg-paper text-ink ${className}`}>
+      {/* `min-w-0` on both panes: a flex item's default `min-width: auto` is its
+          content's min-content width, so the detail pane refused to shrink below
+          its widest row (a provider's name + action strip) and ran 207px past the
+          modal at a 768-900px window — clipped, since the modal is
+          `overflow-hidden`. The list pane carries it for the same reason. */}
+      <div className={`${pane === 'list' ? 'flex' : 'hidden'} md:flex flex-1 md:flex-none md:w-auto min-h-0 min-w-0 flex-col`}>
+        {list}
+      </div>
+
+      <div className={`${pane === 'detail' ? 'flex' : 'hidden'} md:flex flex-1 min-h-0 min-w-0 flex-col`}>
+        <div className="md:hidden flex items-center px-2 py-1 border-b border-ink/10 bg-canvas flex-shrink-0">
+          <button
+            type="button"
+            onClick={onBack}
+            aria-label={`Back to ${listLabel}`}
+            className="flex items-center gap-1 -ml-0.5 pl-0.5 pr-2 py-1 rounded-lg text-ink hover:bg-ink/5 active:bg-ink/10 transition-colors cursor-pointer"
+          >
+            <ChevronLeft size={18} />
+            <span className="text-xs font-semibold truncate">{listLabel}</span>
+          </button>
+        </div>
+
+        {detail}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/SearchPanel.tsx

@@ -9,7 +9,8 @@ import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
 import { useSearchStream } from '@/client/hooks/workspace/search-stream';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
-import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 
 export function SearchPanel({ className = '', enabled = true, rootPath }: { className?: string, enabled?: boolean, rootPath?: string }) {

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

@@ -18,6 +18,8 @@ interface SubagentViewProps {
   onBack: () => void;
   provider?: string;
   providerNames?: Record<string, string>;
+  /** Mobile renders the chat's compact footer variant (three-dot menu). */
+  isMobile?: boolean;
   className?: string;
 }
 
@@ -30,7 +32,7 @@ const STATUS_LABEL: Record<SubagentInfo['status'], string> = {
 
 /** Read-only subagent transcript: compact banner, live-growing message list,
  *  and a notice row where the main timeline's composer would be. */
-export function SubagentView({ sessionId, subagent, onBack, provider, providerNames, className = '' }: SubagentViewProps) {
+export function SubagentView({ sessionId, subagent, onBack, provider, providerNames, isMobile = false, className = '' }: SubagentViewProps) {
   const { messages, isLoading, status, isActive } = useSubagentTranscript(sessionId, subagent, onBack);
   const modelNames = useModelNames();
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -133,6 +135,7 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
                     msg={msg}
                     isStreaming={isLoading}
                     isPrevAssistant={isPrevAssistant}
+                    userActions={false}
                     className={isNoticeRow(msg) ? 'mt-3 mb-1' : isPrevAssistant ? 'mt-1' : 'mt-3'}
                   />
                   {footer && (
@@ -142,7 +145,10 @@ export function SubagentView({ sessionId, subagent, onBack, provider, providerNa
                       providerNames={providerNames}
                       modelName={modelName}
                       modelNames={modelNames}
+                      thinkingLevel={progress?.resolvedThinkingLevel}
                       durationMs={footer.durationMs}
+                      isMobile={isMobile}
+                      showActions={false}
                     />
                   )}
                 </Fragment>

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

@@ -1,7 +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 { highlightCode, isCodeLike } from '@/shared/lib/code/syntax-highlight';
+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';
@@ -59,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
@@ -74,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) {
@@ -168,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/chat-timeline/TaskResultContent.tsx

@@ -3,7 +3,8 @@ import { AlignLeft, Code, Eye, FileCode, FileText, Layers, Terminal } from 'luci
 import type { ParsedTaskNotice } from '@/shared/lib/chat/task-result-parser';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { CopyButton } from '@/client/components/common/CopyButton';
-import { highlightCode, isCodeLike } from '@/shared/lib/code/syntax-highlight';
+import { isCodeLike } from '@/shared/lib/code/language';
+import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 
 interface TaskResultContentProps {

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

@@ -211,6 +211,7 @@ export function ChatTimeline({ className = '', appSettings = {}, onSessionTitle,
                   onBack={handleSubagentBack}
                   provider={sessionProvider}
                   providerNames={providerNames}
+                  isMobile={isMobile}
                 />
               ) : (
                 <TimelineBody

package/src/client/components/workspace/chat-timeline/tool-renderers/hashline-patch/index.tsx

@@ -12,7 +12,8 @@
 
 import { useMemo } from 'preact/hooks';
 import type { HashlineSection, HashlineVerb } from '@/shared/lib/omp/session/hashline-patch';
-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';
 
 /** A hashline `CUT` removes lines the model already saw, so it reads as the

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/AstEdit.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'preact/hooks';
 import { ArrowRight, CheckCircle2, Clock, Wand2 } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
-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 AstEditItem {

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Bash.tsx

@@ -3,7 +3,8 @@ import { Check, Clock } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { stripAnsiCodes } from '@/shared/lib/code/ansi';
-import { highlightCode, isCodeLike, tryParseJson } from '@/shared/lib/code/syntax-highlight';
+import { isCodeLike } from '@/shared/lib/code/language';
+import { highlightCode, tryParseJson } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Edit.tsx

@@ -6,7 +6,8 @@ import { DiffView } from '@/client/components/workspace/chat-timeline/tool-rende
 import { HashlinePatch } from '@/client/components/workspace/chat-timeline/tool-renderers/hashline-patch';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { EnvelopeHeader } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/EnvelopeHeader';
-import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 import { outputMarkdown, readToolOutput } from '@/shared/lib/chat/tool-output';

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Read.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from 'preact/hooks';
 import { FileCode, FileImage, FileText, Folder, FolderOpen, Info, Loader2 } from 'lucide-preact';
 import { CopyButton } from '@/client/components/common/CopyButton';
-import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 import { parseDirListing, parseNumberedCode } from '@/shared/lib/code/parser';
 import { getImageMimeType } from '@/shared/lib/fs/file-kind';

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/SearchTool.tsx

@@ -2,7 +2,8 @@ import { useMemo, useState } from 'preact/hooks';
 import { ChevronRight, FileSearch, FileText, FolderSearch } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
 import { CopyButton } from '@/client/components/common/CopyButton';
-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';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/DiffView.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'preact/hooks';
-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 DiffLine {

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

@@ -6,9 +6,11 @@ import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 interface SplitViewProps {
   rows: SplitDiffRow[];
   language: string;
+  /** Wrap long lines instead of scrolling horizontally. */
+  wordWrap: boolean;
 }
 
-export function SplitView({ rows, language }: SplitViewProps) {
+export function SplitView({ rows, language, wordWrap }: SplitViewProps) {
   const syntaxReady = useSyntaxReady();
 
   const htmlByIndex = useMemo(() => {
@@ -47,7 +49,7 @@ export function SplitView({ rows, language }: SplitViewProps) {
       {/* 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="w-max min-w-full min-w-[700px] pb-4">
+      <div className={`pb-4 ${wordWrap ? 'w-full' : 'w-max min-w-full min-w-[700px]'}`}>
         <div className="grid grid-cols-2 sticky top-0 z-10 bg-canvas border-b border-ink/10 text-[11px] text-ink/70 font-sans select-none shadow-xs">
           <div className="px-3 py-1 font-medium border-r border-ink/10 flex items-center justify-between">
             <span>Original (HEAD / Base)</span>
@@ -57,7 +59,23 @@ export function SplitView({ rows, language }: SplitViewProps) {
           </div>
         </div>
 
-        <table className="w-full border-collapse">
+        {/* 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 widen the table and scroll instead of
+            wrapping. Fixed layout takes its widths from the FIRST row — which
+            here is the `colSpan={4}` meta row, so every column came out equal
+            (measured 99px) and the line-number gutters grew to the width of a
+            code column. The colgroup states them instead: two 48px gutters and
+            the two content columns sharing the rest. */}
+        <table className={`border-collapse ${wordWrap ? 'table-fixed w-full' : 'w-full'}`}>
+          {wordWrap && (
+            <colgroup>
+              <col className="w-12" />
+              <col />
+              <col className="w-12" />
+              <col />
+            </colgroup>
+          )}
           <tbody>
             {rows.map((row, idx) => {
               if (row.isMeta) {
@@ -81,6 +99,8 @@ export function SplitView({ rows, language }: SplitViewProps) {
                   {/* Left 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' : ''
+                    } ${
                       isLeftDel
                         ? 'bg-error/15 text-error font-semibold'
                         : left
@@ -93,7 +113,9 @@ export function SplitView({ rows, language }: SplitViewProps) {
 
                   {/* Left Content (Original) */}
                   <td
-                    className={`min-w-[320px] py-0.5 px-2 whitespace-pre border-r border-ink/10 text-ink ${
+                    className={`py-0.5 px-2 border-r border-ink/10 text-ink ${
+                      wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'min-w-[320px] whitespace-pre'
+                    } ${
                       isLeftDel
                         ? 'bg-error/10'
                         : left
@@ -121,6 +143,8 @@ export function SplitView({ rows, language }: SplitViewProps) {
                   {/* Right 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' : ''
+                    } ${
                       isRightAdd
                         ? 'bg-success/15 text-success font-semibold'
                         : right
@@ -133,7 +157,9 @@ export function SplitView({ rows, language }: SplitViewProps) {
 
                   {/* Right Content (Modified) */}
                   <td
-                    className={`min-w-[320px] py-0.5 px-2 whitespace-pre text-ink ${
+                    className={`py-0.5 px-2 text-ink ${
+                      wordWrap ? 'whitespace-pre-wrap break-words align-top' : 'min-w-[320px] whitespace-pre'
+                    } ${
                       isRightAdd
                         ? 'bg-success/10'
                         : right

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

@@ -1,14 +1,24 @@
-import { AlignJustify, Check, Code2, Columns, Copy, Minus, Plus, RefreshCw, Space, Undo2 } from 'lucide-preact';
+import { AlignJustify, Check, Code2, Columns, Copy, Diff, FileCode, Minus, Plus, RefreshCw, Space, Undo2, WrapText } from 'lucide-preact';
 import { FileIcon } from '@/client/components/common/file-icon';
 import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
 
 export type DiffViewMode = 'unified' | 'split';
 
+/**
+ * How much of the file the diff shows. `full` is the default: the whole file
+ * with the changes marked inside it, which is what a reader wants when the
+ * hunks alone leave the edit without context. `diff` asks git for its own
+ * default context and shows only the changed regions.
+ */
+export type DiffContentMode = 'full' | 'diff';
+
 interface DiffToolbarProps {
   filePath: string;
   status: string;
   isStaged: boolean;
   viewMode: DiffViewMode;
+  contentMode: DiffContentMode;
+  wordWrap: boolean;
   ignoreWhitespace: boolean;
   additions: number;
   deletions: number;
@@ -17,6 +27,8 @@ interface DiffToolbarProps {
   /** A stage/unstage/discard write is in flight; the toolbar locks its actions. */
   isBusy?: boolean;
   onSetViewMode: (mode: DiffViewMode) => void;
+  onSetContentMode: (mode: DiffContentMode) => void;
+  onToggleWordWrap: () => void;
   onToggleWhitespace: () => void;
   onStageUnstage: () => void;
   onDiscard: () => void;
@@ -33,6 +45,8 @@ export function DiffToolbar({
   status,
   isStaged,
   viewMode,
+  contentMode,
+  wordWrap,
   ignoreWhitespace,
   additions,
   deletions,
@@ -40,6 +54,8 @@ export function DiffToolbar({
   isCopied,
   isBusy = false,
   onSetViewMode,
+  onSetContentMode,
+  onToggleWordWrap,
   onToggleWhitespace,
   onStageUnstage,
   onDiscard,
@@ -73,11 +89,15 @@ export function DiffToolbar({
       </div>
 
       {/* Right: Controls & actions. `ml-auto` keeps them right-aligned where the
-          identity block is hidden. This strip scrolls on its own when the panel
-          is too narrow, so no action is ever clipped out of reach. Each segment
-          sets its OWN mode — toggling meant clicking the already-active segment
-          flipped the view to the other one. */}
-      <div className="flex items-center space-x-0.5 @[440px]:space-x-1 text-ink/70 ml-auto min-w-0 overflow-x-auto no-scrollbar">
+          identity block is hidden. This strip WRAPS rather than scrolls: a
+          320px panel cannot hold ten actions in one row, and the previous
+          `overflow-x-auto no-scrollbar` clipped the overflow invisibly —
+          measured 361px of content in a 296px box, with `Stage` entirely
+          outside it and no scrollbar to say so. Wrapping costs one extra row on
+          a narrow panel and keeps every action reachable. Each segment sets its
+          OWN mode — toggling meant clicking the already-active segment flipped
+          the view to the other one. */}
+      <div className="flex flex-wrap items-center justify-end gap-x-0.5 @[440px]:gap-x-1 gap-y-1 text-ink/70 ml-auto">
         {/* Change counts live here, not in the identity block: the editor tab
             carries the file name but never the counts, so this is the one piece
             of the header that must survive a narrow panel. */}
@@ -118,6 +138,57 @@ export function DiffToolbar({
           </button>
         </div>
 
+        {/* Content scope toggle (Full Code vs Diff Only). A separate group from
+            the view-mode toggle because the two are orthogonal: Unified/Split is
+            the shape of the rows, Full/Diff is how many of them there are. Each
+            segment SETS its mode — clicking the active one must not flip the
+            other, which is what a toggle would do. */}
+        <div className="flex items-center bg-canvas rounded border border-ink/15 p-0.5 mr-0.5 @[440px]:mr-1 flex-shrink-0">
+          <button
+            type="button"
+            onClick={() => onSetContentMode('full')}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors cursor-pointer flex-shrink-0 ${
+              contentMode === 'full' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
+            }`}
+            title="Full code (whole file, changes marked)"
+            aria-label="Full code (whole file, changes marked)"
+            aria-pressed={contentMode === 'full'}
+          >
+            <FileCode size={12} />
+            <span className="hidden @[420px]:inline">Full Code</span>
+          </button>
+          <button
+            type="button"
+            onClick={() => onSetContentMode('diff')}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors cursor-pointer flex-shrink-0 ${
+              contentMode === 'diff' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
+            }`}
+            title="Diff only (changed hunks)"
+            aria-label="Diff only (changed hunks)"
+            aria-pressed={contentMode === 'diff'}
+          >
+            <Diff size={12} />
+            <span className="hidden @[420px]:inline">Diff Only</span>
+          </button>
+        </div>
+
+        {/* Word wrap. On by default: a diff of a minified file or a long line
+            is unreadable when it runs off the panel, and horizontal scrolling
+            hides the change the reader opened the diff to see. Off keeps one
+            line = one row, which is what a column-aligned comparison needs. */}
+        <button
+          type="button"
+          onClick={onToggleWordWrap}
+          className={`p-1.5 rounded transition-colors cursor-pointer flex-shrink-0 ${
+            wordWrap ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'
+          }`}
+          title={wordWrap ? 'Word wrap on' : 'Word wrap off'}
+          aria-label={wordWrap ? 'Word wrap on' : 'Word wrap off'}
+          aria-pressed={wordWrap}
+        >
+          <WrapText size={13} />
+        </button>
+
         {/* Ignore whitespace toggle */}
         <button
           type="button"