ompchamber 3.1.1 → 3.2.0

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

@@ -4,6 +4,8 @@ import { SkillSidebarList } from '@/client/components/settings/categories/skill-
 import { SkillDetailPane } from '@/client/components/settings/categories/skill-settings/DetailPane';
 import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useCrudList } from '@/client/hooks/settings/crud-list';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 interface SkillSettingsProps {
   settings?: SettingsState;
@@ -12,6 +14,7 @@ interface SkillSettingsProps {
 }
 
 export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
+  const masterDetail = useSettingsMasterDetail();
   const [selectedProjectId, setSelectedProjectId] = useState('ompchamber');
   const { items: skills, selectedId, selected: selectedSkill, isCreatingNew, isLoading, select, startCreate, save, remove } =
     useCrudList<SkillItem, Partial<SkillItem>>({
@@ -46,23 +49,37 @@ export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
   }
 
   return (
-    <div className="flex-1 flex flex-col md:flex-row h-full w-full overflow-hidden bg-paper">
-      <SkillSidebarList
-        skills={skills}
-        selectedSkillId={selectedId}
-        isCreatingNew={isCreatingNew}
-        onSelectSkill={select}
-        onAddNewSkill={startCreate}
-        selectedProject={selectedProjectId}
-        onSelectProject={setSelectedProjectId}
-      />
-
-      <SkillDetailPane
-        skill={selectedSkill ?? null}
-        isCreatingNew={isCreatingNew}
-        onSave={save}
-        onDelete={remove}
-        onOpenCatalog={onNavigateToCatalog}
+    <div className="flex-1 flex flex-col h-full w-full overflow-hidden bg-paper">
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Skills"
+        list={
+          <SkillSidebarList
+            skills={skills}
+            selectedSkillId={selectedId}
+            isCreatingNew={isCreatingNew}
+            onSelectSkill={(id) => {
+              select(id);
+              masterDetail.openDetail();
+            }}
+            onAddNewSkill={() => {
+              startCreate();
+              masterDetail.openDetail();
+            }}
+            selectedProject={selectedProjectId}
+            onSelectProject={setSelectedProjectId}
+          />
+        }
+        detail={
+          <SkillDetailPane
+            skill={selectedSkill ?? null}
+            isCreatingNew={isCreatingNew}
+            onSave={save}
+            onDelete={remove}
+            onOpenCatalog={onNavigateToCatalog}
+          />
+        }
       />
     </div>
   );

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

@@ -5,9 +5,12 @@ import { buildProviders, type UsageProviderId } from '@/client/components/settin
 import { ProviderDetail } from '@/client/components/settings/categories/usage-settings/ProviderDetail';
 import { formatDateTime } from '@/client/components/settings/categories/usage-settings/format';
 import { useUsageReport } from '@/client/hooks/settings/useUsageReport';
+import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
+import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
 
 /** Settings → Usage: provider quota, balances, and locally recorded burn. */
 export function UsageSettings() {
+  const masterDetail = useSettingsMasterDetail();
   const { report, isLoading, error, reload } = useUsageReport();
   const [selectedProviderId, setSelectedProviderId] = useState<UsageProviderId>('');
 
@@ -46,47 +49,58 @@ export function UsageSettings() {
 
   return (
     <div className="flex h-full w-full overflow-hidden bg-paper text-xs text-ink">
-      <UsageSidebarList
-        report={report}
-        selectedProviderId={selected?.id ?? ''}
-        onSelectProvider={setSelectedProviderId}
-      />
-
-      <div className="flex-1 h-full overflow-hidden flex flex-col">
-        <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between gap-3 flex-shrink-0">
-          <div className="flex items-center gap-2 min-w-0">
-            <span className="text-xs font-semibold text-ink/75 truncate">
-              Updated {formatDateTime(report.generatedAt)}
-            </span>
-            {report.isMock && (
-              <span className="text-[10px] font-mono uppercase tracking-wider bg-ink/5 border border-ink/15 rounded px-1.5 py-0.5 text-ink/60">
-                Mock
-              </span>
-            )}
-          </div>
-          <button
-            type="button"
-            onClick={() => reload({ force: true })}
-            disabled={isLoading}
-            className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors disabled:opacity-50 flex-shrink-0"
-            title="Refresh usage"
-          >
-            <RefreshCw size={12} className={isLoading ? 'animate-spin text-ink' : ''} />
-          </button>
-        </div>
+      <SettingsMasterDetail
+        pane={masterDetail.pane}
+        onBack={masterDetail.back}
+        listLabel="Usage"
+        list={
+          <UsageSidebarList
+            report={report}
+            selectedProviderId={selected?.id ?? ''}
+            onSelectProvider={(id) => {
+              setSelectedProviderId(id);
+              masterDetail.openDetail();
+            }}
+          />
+        }
+        detail={
+          <div className="flex-1 h-full overflow-hidden flex flex-col">
+            <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between gap-3 flex-shrink-0">
+              <div className="flex items-center gap-2 min-w-0">
+                <span className="text-xs font-semibold text-ink/75 truncate">
+                  Updated {formatDateTime(report.generatedAt)}
+                </span>
+                {report.isMock && (
+                  <span className="text-[10px] font-mono uppercase tracking-wider bg-ink/5 border border-ink/15 rounded px-1.5 py-0.5 text-ink/60">
+                    Mock
+                  </span>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={() => reload({ force: true })}
+                disabled={isLoading}
+                className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors disabled:opacity-50 flex-shrink-0"
+                title="Refresh usage"
+              >
+                <RefreshCw size={12} className={isLoading ? 'animate-spin text-ink' : ''} />
+              </button>
+            </div>
 
-        <div className="flex-1 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-3.5 space-y-4">
-          {error && <p className="text-error text-xs">{error}</p>}
+            <div className="flex-1 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-3.5 space-y-4">
+              {error && <p className="text-error text-xs">{error}</p>}
 
-          {selected ? (
-            <ProviderDetail summary={selected.summary} />
-          ) : (
-            <p className="text-[11px] text-ink/50 leading-relaxed">
-              No provider credentials detected. Add an API key in Settings → Providers and it will appear here.
-            </p>
-          )}
-        </div>
-      </div>
+              {selected ? (
+                <ProviderDetail summary={selected.summary} />
+              ) : (
+                <p className="text-[11px] text-ink/50 leading-relaxed">
+                  No provider credentials detected. Add an API key in Settings → Providers and it will appear here.
+                </p>
+              )}
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 }

package/src/client/components/settings/categories/behavior-settings/Editor.tsx

@@ -105,24 +105,24 @@ export const BehaviorEditor: FunctionComponent<BehaviorEditorProps> = ({
   return (
     <div className="flex-1 flex flex-col h-full bg-paper text-ink p-6 md:p-8 overflow-hidden">
       {/* Header Bar */}
-      <div className="flex items-center justify-between pb-4 border-b border-ink/10">
-        <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 pb-4 border-b border-ink/10">
+        <div className="flex items-center gap-2 min-w-0">
           <h2 className="text-sm font-bold tracking-tight text-ink flex items-center gap-2">
-            <span>{copy.title}</span>
-            <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded border border-ink/15 text-ink/50 font-medium">
+            <span className="truncate">{copy.title}</span>
+            <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded border border-ink/15 text-ink/50 font-medium flex-shrink-0">
               {copy.badge}
             </span>
           </h2>
-          <div className="group relative">
+          <div className="group relative flex-shrink-0">
             <Info className="w-4 h-4 text-ink/40 cursor-help" />
-            <div className="absolute left-0 top-6 hidden group-hover:block w-80 p-2.5 rounded-lg bg-ink text-paper text-xs shadow-lg z-20 leading-relaxed pointer-events-none">
+            <div className="absolute left-0 top-6 hidden group-hover:block w-80 max-w-[80vw] p-2.5 rounded-lg bg-ink text-paper text-xs shadow-lg z-20 leading-relaxed pointer-events-none">
               {copy.tooltip}
             </div>
           </div>
         </div>
 
         {/* Action Buttons Top */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-shrink-0">
           <button
             type="button"
             onClick={handleCopy}

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

@@ -100,7 +100,7 @@ export const McpImportModal: FunctionComponent<McpImportModalProps> = ({
 
   return (
     <div className="fixed inset-0 bg-ink/40 backdrop-blur-[2px] z-50 flex items-center justify-center p-4 animate-in fade-in duration-150">
-      <div className="w-full max-w-lg rounded-lg border border-ink/20 bg-paper text-ink p-5 shadow-2xl space-y-4">
+      <div className="w-full max-w-lg rounded-lg border border-ink/20 bg-paper text-ink p-5 shadow-2xl space-y-4 max-h-full overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static">
         <div className="flex items-center justify-between pb-3 border-b border-ink/10">
           <div className="flex items-center gap-2">
             <Code className="w-4 h-4 text-ink/70" />

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,6 +1,7 @@
 import { useMemo, 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 { parseTaskNotice } from '@/shared/lib/chat/task-result-parser';
 import { TaskResultContent } from '@/client/components/workspace/chat-timeline/TaskResultContent';

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 {