ompchamber 3.0.0 → 3.1.1

package/src/client/components/common/code-surface/index.tsx

@@ -1,8 +1,10 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
 import type { CSSProperties } from 'preact';
 
-import { CodeEditor } from '@/client/components/common/code-editor';
+import { CodeEditor, type CodeEditorHandle } from '@/client/components/common/code-editor';
 import { measureRowHeight, measureWrappedLines, type WrappedLines } from '@/client/components/common/code-surface/measure';
+import { findScrollContainer } from '@/client/hooks/editor/scroll-container';
 import { useCodeWindow } from '@/client/hooks/editor/use-code-window';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 import {
@@ -12,17 +14,32 @@ import {
   type LineGeometry,
   type LineWindow,
 } from '@/shared/lib/code/lazy-window';
+import type { FindMatch } from '@/shared/lib/code/editor/find';
+import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { lineIndexAt } from '@/shared/lib/code/editor/lines';
+import type { TextRange } from '@/shared/lib/code/editor/commands';
+import { countLines } from '@/shared/lib/code/editor/lines';
 import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { highlightCodeWindow } from '@/shared/lib/code/windowed-highlight';
 
 const WRAP_ON = '!whitespace-pre-wrap !break-words';
 const WRAP_OFF = '!whitespace-pre !break-normal';
 
-/** Line count without materializing every line — a 20 000-line value per render is a megabyte of strings. */
-function countLines(text: string): number {
-  let count = 1;
-  for (let index = text.indexOf('\n'); index !== -1; index = text.indexOf('\n', index + 1)) count++;
-  return count;
+export interface CodeSurfaceHandle {
+  /** Current selection offsets in the buffer, or null before the field mounts. */
+  getSelection(): { start: number; end: number } | null;
+  /** Select `[start, end)`; `focus` moves keyboard focus into the editor. */
+  select(start: number, end: number, focus?: boolean): void;
+  /** Replace the buffer as one undoable edit, caret at `[caretStart, caretEnd)`, focus unchanged. */
+  applyDocument(value: string, caretStart: number, caretEnd: number): void;
+  /** Run an editor command by name (the palette's path into the editor). */
+  runCommand(command: EditorCommand): void;
+  /**
+   * Bring the line holding `offset` into view WITHOUT moving the caret — what
+   * "step to the next match" needs: the user's focus stays in the find field
+   * while the match scrolls under it.
+   */
+  revealOffset(offset: number): void;
 }
 
 interface CodeSurfaceProps {
@@ -31,6 +48,19 @@ interface CodeSurfaceProps {
   /** Shiki language id, already resolved from the file name. */
   language: string;
   wordWrap: boolean;
+  /** Find matches (document offsets) to paint; the current one is marked. */
+  marks?: readonly FindMatch[];
+  currentMark?: number;
+  /**
+   * Extra ranges the ⌘D workflow has selected. The textarea can only hold one
+   * selection, so the surface paints the others from here — and it must, or
+   * ⌘D would look like it did nothing.
+   */
+  occurrences?: readonly TextRange[];
+  /** Commands the editor does not own (find bar chords, word wrap, save). */
+  onCommand?: (command: EditorCommand) => void;
+  /** Called with the extra ranges whenever ⌘D / ⌘⇧L change them. */
+  onOccurrencesChange?: (ranges: readonly TextRange[]) => void;
   /** Outer flex row that holds the gutter and the editor column. */
   rootClassName?: string;
   gutterClassName?: string;
@@ -71,11 +101,16 @@ function sameWrappedLines(previous: WrappedLines | null, next: WrappedLines | nu
  * 20 000-line file from spending minutes in the tokenizer, and a keystroke in it
  * from re-tokenizing the file at all.
  */
-export function CodeSurface({
+export const CodeSurface = forwardRef<CodeSurfaceHandle, CodeSurfaceProps>(function CodeSurface({
   value,
   onValueChange,
   language,
   wordWrap,
+  marks,
+  currentMark,
+  occurrences,
+  onCommand,
+  onOccurrencesChange,
   rootClassName,
   gutterClassName,
   gutterStyle,
@@ -84,10 +119,11 @@ export function CodeSurface({
   editorClassName,
   editorPadding = 0,
   editorStyle,
-}: CodeSurfaceProps) {
+}, ref) {
   const wrapClass = wordWrap ? WRAP_ON : WRAP_OFF;
   const preRef = useRef<HTMLPreElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
+  const editorRef = useRef<CodeEditorHandle | null>(null);
   const [wrapped, setWrapped] = useState<WrappedLines | null>(null);
   const [rowHeight, setRowHeight] = useState<number | null>(null);
   /** Lines the last measurement pass described; -1 before the first one runs. */
@@ -150,10 +186,66 @@ export function CodeSurface({
     enabled: lazy && (measuredLines !== lineCount || geometry !== null),
   });
 
+  /**
+   * What the highlight layer paints: the find matches, plus every extra ⌘D
+   * range. The find widget's current match is the one the caret is aimed at, so
+   * it keeps `currentMark` — an occurrence range never claims that role.
+   */
+  const painted = useMemo<readonly FindMatch[]>(() => {
+    if (!occurrences || occurrences.length === 0) return marks ?? [];
+    return [...(marks ?? []), ...occurrences];
+  }, [marks, occurrences]);
+  /** Where the extra selections start inside `painted`; -1 when there are none. */
+  const occurrenceFrom = occurrences && occurrences.length > 0 ? (marks?.length ?? 0) : -1;
+
   const highlight = useCallback(
     (code: string, range: LineWindow | null) =>
-      range ? highlightCodeWindow(code, language, range) : highlightCode(code, language),
-    [language],
+      range
+        ? highlightCodeWindow(code, language, range, { marks: painted, currentMark, occurrenceFrom })
+        : highlightCode(code, language, { marks: painted, currentMark, occurrenceFrom }),
+    [language, painted, currentMark, occurrenceFrom],
+  );
+
+  /**
+   * Bring `offset`'s row into view without touching the caret.
+   *
+   * `scrollIntoView` cannot be used: the caret's row and the match's row are
+   * different elements (the highlighted `<pre>` is `aria-hidden` and
+   * `pointer-events: none`), and the browser's own scroll-into-view on
+   * `setSelectionRange` would fight this. Instead the row's pixel offset comes
+   * from the same geometry the window is resolved against, so the two agree by
+   * construction, and the scroll is a plain assignment on the container the
+   * window reads.
+   */
+  const revealOffset = useCallback(
+    (offset: number) => {
+      const root = rootRef.current;
+      if (!root || !geometry) return;
+      const rowTop = geometry.offsetOf(lineIndexAt(value, offset));
+      const container = findScrollContainer(root);
+      if (!container) return;
+      const frameTop = root.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+      const band = container.clientHeight;
+      const target = frameTop + rowTop;
+      // Only scroll when the row is actually outside the band; a reveal that
+      // always re-centers would make every "next match" jump the whole view.
+      if (target < container.scrollTop + 8 || target + geometry.rowHeight > container.scrollTop + band - 8) {
+        container.scrollTop = Math.max(0, target - band / 3);
+      }
+    },
+    [geometry, value],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getSelection: () => editorRef.current?.getSelection() ?? null,
+      select: (start, end, focus = true) => editorRef.current?.select(start, end, focus),
+      applyDocument: (next, caretStart, caretEnd) => editorRef.current?.applyDocument(next, caretStart, caretEnd),
+      runCommand: (command) => editorRef.current?.run(command),
+      revealOffset,
+    }),
+    [revealOffset],
   );
 
   const firstLine = virtual ? virtual.start : 0;
@@ -184,13 +276,18 @@ export function CodeSurface({
           highlight={highlight}
           padding={editorPadding}
           preRef={preRef}
+          handleRef={editorRef}
           textareaClassName={`focus:outline-none ${wrapClass}`}
           preClassName={wrapClass}
           style={editorStyle}
           className={editorClassName}
           virtual={virtual}
+          language={language}
+          occurrences={occurrences}
+          onCommand={onCommand}
+          onOccurrencesChange={onOccurrencesChange}
         />
       </div>
     </div>
   );
-}
+});

package/src/client/components/common/lazy-panels.tsx

@@ -32,6 +32,9 @@ export const LazyUserBrowserPanel = lazy(() =>
 export const LazyUsagePanel = lazy(() =>
   import('@/client/components/workspace/usage-panel/index').then((m) => ({ default: m.UsagePanel }))
 );
+export const LazyTodoPanel = lazy(() =>
+  import('@/client/components/workspace/todo-panel/index').then((m) => ({ default: m.TodoPanel }))
+);
 
 /**
  * One cached lazy per right-panel view for the desktop layout.
@@ -67,7 +70,8 @@ export function getDesktopPanelView(scope: object, view: RightPanelType): Compon
       : view === 'context' ? LazyContextPanel
       : view === 'user-browser' ? LazyUserBrowserPanel
       : view === 'browser' ? LazyBrowserPanel
-      : LazyUsagePanel;
+      : view === 'usage' ? LazyUsagePanel
+      : LazyTodoPanel;
     const Cached: ComponentType<Record<string, unknown>> = ({ className, ...rest }) => (
       <div className={`w-full h-full ${typeof className === 'string' ? className : ''}`}>
         <Source {...rest} className="w-full h-full" />

package/src/client/components/common/viewport.ts

@@ -4,9 +4,11 @@
  */
 
 /**
- * Device-viewport presets shared by both browser panels. The agent viewer and
- * the user iframe must frame a page with identical geometry, so the preset
- * classes live here instead of in either panel.
+ * Device-viewport presets for the USER browser panel's iframe. There the box
+ * *is* the layout viewport, so a preset re-runs the page's media queries for
+ * real. The AGENT panel does not use these: its surface is a fixed-resolution
+ * screencast JPEG, which a preset could only letterbox while claiming to
+ * emulate a device (emulation belongs to the agent: `tab.emulate()`).
  */
 
 import type { ViewportMode } from '@/shared/types';

package/src/client/components/layout/RightActivityBar.tsx

@@ -1,4 +1,4 @@
-import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal } from 'lucide-preact';
+import { BarChart3, Bot, Files, GitBranch, Globe, Layers, ListTodo, Search, Terminal } from 'lucide-preact';
 import type { ReactNode } from 'preact/compat';
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { GIT_STATUS_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
@@ -27,6 +27,7 @@ const PANEL_META: Record<RightPanelType, { title: string; icon: ReactNode }> = {
   'user-browser': { title: 'Browser (Anda)', icon: <Globe size={16} /> },
   browser: { title: 'Browser Agent', icon: <Bot size={16} /> },
   usage: { title: 'Usage', icon: <BarChart3 size={16} /> },
+  todo: { title: 'Todos', icon: <ListTodo size={16} /> },
 };
 
 export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasActiveContext, activeProjectPath, refreshKey }: RightActivityBarProps) {

package/src/client/components/layout/desktop-layout/TopNavbar.tsx

@@ -2,6 +2,19 @@ import { LayoutTemplate, MoreHorizontal, PanelLeft, PanelRight, PanelRightClose,
 import { PWAInstallButton } from '@/client/components/common/PWAInstallButton';
 import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
 import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
+import { WORKSPACE_KEY_BINDINGS, type WorkspaceCommand } from '@/shared/lib/workspace/keymap';
+import { describeBinding } from '@/shared/lib/ui/key-binding';
+
+/**
+ * A tooltip's text with the chord that actually invokes it. Derived from the
+ * workspace keymap rather than typed out, because a hand-written "⌘B" beside a
+ * binding that listens for something else is exactly the drift the keymap
+ * table exists to prevent.
+ */
+function withChord(command: WorkspaceCommand, label: string): string {
+  const binding = WORKSPACE_KEY_BINDINGS.find((entry) => entry.command === command);
+  return binding ? `${label} (${describeBinding(binding)})` : label;
+}
 
 interface TopNavbarProps {
   sessionTitle: string | null;
@@ -42,8 +55,8 @@ export function TopNavbar({
               type="button"
               onClick={onToggleLeftPanel}
               className="p-1.5 rounded hover:bg-ink/10 transition-colors text-ink/60 hover:text-ink cursor-pointer flex-shrink-0 titlebar-no-drag"
-              title="Expand Sidebar"
-              aria-label="Expand Sidebar"
+              title={withChord('toggleSidebar', 'Expand Sidebar')}
+              aria-label={withChord('toggleSidebar', 'Expand Sidebar')}
             >
               <PanelLeft size={16} />
             </button>
@@ -86,7 +99,9 @@ export function TopNavbar({
             type="button"
             onClick={onToggleEditor}
             className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${showEditor ? 'text-ink' : 'text-ink/40'}`}
-            title="Toggle Editor Layout"
+            title={withChord('toggleEditorPanel', 'Toggle Editor Layout')}
+            aria-label={withChord('toggleEditorPanel', 'Toggle Editor Layout')}
+            aria-pressed={showEditor}
           >
             <LayoutTemplate size={16} />
           </button>
@@ -94,7 +109,9 @@ export function TopNavbar({
             type="button"
             onClick={onToggleRightPanel}
             className={`p-1.5 rounded hover:bg-ink/10 transition-colors cursor-pointer ${showRightPanel ? 'text-ink' : 'text-ink/40'}`}
-            title="Toggle Right Panel"
+            title={withChord('toggleRightPanel', 'Toggle Right Panel')}
+            aria-label={withChord('toggleRightPanel', 'Toggle Right Panel')}
+            aria-pressed={showRightPanel}
           >
             {showRightPanel ? <PanelRightClose size={16} /> : <PanelRight size={16} />}
           </button>

package/src/client/components/layout/desktop-layout/index.tsx

@@ -16,6 +16,8 @@ import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
 import { DEFAULT_LEFT_PANEL_WIDTH, MAX_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH, type EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
 import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
 import { useChamberEvent, useWindowEvent } from '@/client/hooks/ui/window-event';
+import { WORKSPACE_KEY_BINDINGS } from '@/shared/lib/workspace/keymap';
+import { resolveBinding } from '@/shared/lib/ui/key-binding';
 
 interface DesktopLayoutProps {
   sessionId: string | null;
@@ -84,13 +86,31 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const streamStatus = useAgentStreamStatus();
 
-  // Global keyboard shortcut for settings (Cmd/Ctrl + ,)
+  /**
+   * The workspace's own shortcuts, resolved from the shared keymap so the
+   * tooltips on the panel toggles name the chord that is actually bound.
+   *
+   * `⌘S` is deliberately absent here: the editor panel already owns it (it is
+   * the only surface with a buffer to save), and binding it twice would save
+   * the file twice.
+   */
   useWindowEvent('keydown', (e) => {
-    if ((e.metaKey || e.ctrlKey) && e.key === ',') {
-      e.preventDefault();
+    const command = resolveBinding(WORKSPACE_KEY_BINDINGS, e);
+    if (!command) return;
+    if (command === 'saveFile') return;
+    if (command === 'toggleEditorPanel' && !showEditor) {
+      // The editor panel is only meaningful with a file open, and `showEditor`
+      // already folds in the user's own toggle.
+      if (openedFiles.length === 0) return;
+    }
+    e.preventDefault();
+    if (command === 'toggleSidebar') setShowLeftPanel((previous) => !previous);
+    else if (command === 'toggleEditorPanel') setUserToggledEditor((previous) => !(previous ?? showEditor));
+    else if (command === 'toggleRightPanel') setShowRightPanel((previous) => !previous);
+    else if (command === 'openSettings') {
       setSettingsCategory('appearance');
       setAutoOpenAddProvider(false);
-      setSettingsOpen(prev => !prev);
+      setSettingsOpen((previous) => !previous);
     }
   });
 

package/src/client/components/mobile/RightSidebar.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'preact/hooks';
 import { Suspense } from 'preact/compat';
 import type { ReactNode } from 'preact/compat';
-import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal, X } from 'lucide-preact';
-import { LazyBrowserPanel, LazyContextPanel, LazyFileExplorer, LazyGitPanel, LazySearchPanel, LazyTerminalPanel, LazyUsagePanel, LazyUserBrowserPanel } from '@/client/components/common/lazy-panels';
+import { BarChart3, Bot, Files, GitBranch, Globe, Layers, ListTodo, Search, Terminal, X } from 'lucide-preact';
+import { LazyBrowserPanel, LazyContextPanel, LazyFileExplorer, LazyGitPanel, LazySearchPanel, LazyTerminalPanel, LazyTodoPanel, LazyUsagePanel, LazyUserBrowserPanel } from '@/client/components/common/lazy-panels';
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { GIT_STATUS_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
 import { RIGHT_PANEL_TYPES, type RightPanelType } from '@/shared/lib/workspace/right-panels';
@@ -31,6 +31,7 @@ const PANEL_META: Record<RightPanelType, { title: string; label: string; icon: R
   'user-browser': { title: 'Browser (Anda)', label: 'Browser', icon: <Globe size={14} className="flex-shrink-0" /> },
   browser: { title: 'Browser Agent', label: 'Agent', icon: <Bot size={14} className="flex-shrink-0" /> },
   usage: { title: 'Usage', label: 'Usage', icon: <BarChart3 size={14} className="flex-shrink-0" /> },
+  todo: { title: 'Todos', label: 'Todos', icon: <ListTodo size={14} className="flex-shrink-0" /> },
 };
 
 export function MobileRightSidebar({
@@ -100,12 +101,17 @@ export function MobileRightSidebar({
         </button>
       </div>
 
-      {/* Main Tab Content — shared components so mobile == desktop features */}
+      {/* Main Tab Content — shared components so mobile == desktop features.
+          The workspace gate below applies per TAB, not to the whole drawer: a
+          todo list belongs to the session, not to the folder its cwd resolves
+          to, so the Todos tab stays reachable for a session running outside
+          every registered workspace. Every other view here reads the working
+          tree and genuinely needs one. */}
       <div
         className="flex-1 min-h-0 overflow-hidden relative"
         style={{ paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
       >
-        {!enabled ? (
+        {!enabled && activeTab !== 'todo' ? (
           <div className="h-full flex items-center justify-center text-ink/40">
             <span className="text-xs font-mono">No session selected</span>
           </div>
@@ -130,6 +136,7 @@ export function MobileRightSidebar({
               {activeTab === 'user-browser' && <LazyUserBrowserPanel className="h-full w-full" />}
               {activeTab === 'browser' && <LazyBrowserPanel className="h-full w-full" active />}
               {activeTab === 'usage' && <LazyUsagePanel className="h-full w-full" />}
+              {activeTab === 'todo' && <LazyTodoPanel className="h-full w-full" />}
             </Suspense>
           </>
         )}

package/src/client/components/workspace/browser-panel/AddressBar.tsx

@@ -1,20 +1,17 @@
 import { Globe, RotateCw } from 'lucide-preact';
 import { BrowserToolbar, ICON_BUTTON } from '@/client/components/workspace/browser-toolbar/index';
-import type { BrowserViewStatus, ViewportMode } from '@/shared/types';
+import type { BrowserViewStatus } from '@/shared/types';
 
 interface BrowserAddressBarProps {
   url?: string;
   status: BrowserViewStatus;
-  viewportMode: ViewportMode;
   zoomLevel?: number;
   onIncludeInChat: () => void;
   onReconnect: () => void;
   onOpenExternal: () => void;
-  onChangeViewport: (mode: ViewportMode) => void;
   onZoomIn: () => void;
   onZoomOut: () => void;
   onResetZoom: () => void;
-  onSetZoom: (zoom: number) => void;
 }
 
 const STATUS_LABEL: Record<BrowserViewStatus, string> = {
@@ -32,16 +29,13 @@ const STATUS_LABEL: Record<BrowserViewStatus, string> = {
 export function BrowserAddressBar({
   url,
   status,
-  viewportMode,
   zoomLevel = 100,
   onIncludeInChat,
   onReconnect,
   onOpenExternal,
-  onChangeViewport,
   onZoomIn,
   onZoomOut,
   onResetZoom,
-  onSetZoom,
 }: BrowserAddressBarProps) {
   const isLive = status === 'live';
 
@@ -50,13 +44,10 @@ export function BrowserAddressBar({
       url={url ?? ''}
       statusDotClass={isLive ? 'bg-success animate-pulse' : 'bg-ink/25'}
       statusLabel={STATUS_LABEL[status]}
-      viewportMode={viewportMode}
       zoomLevel={zoomLevel}
-      onChangeViewport={onChangeViewport}
       onZoomIn={onZoomIn}
       onZoomOut={onZoomOut}
       onResetZoom={onResetZoom}
-      onSetZoom={onSetZoom}
       onIncludeInChat={onIncludeInChat}
       onOpenExternal={onOpenExternal}
       openExternalLabel="Buka di jendela baru"

package/src/client/components/workspace/browser-panel/Screencast.tsx

@@ -1,7 +1,6 @@
 import { Globe, Loader2, Radio } from 'lucide-preact';
 import { ActivityToasts } from '@/client/components/workspace/browser-panel/ActivityToasts';
-import { VIEWPORT_CLASSES } from '@/client/components/common/viewport';
-import type { BrowserPanelAction, BrowserTabInfo, BrowserViewStatus, ViewportMode } from '@/shared/types';
+import type { BrowserPanelAction, BrowserTabInfo, BrowserViewStatus } from '@/shared/types';
 
 interface BrowserScreencastProps {
   status: BrowserViewStatus;
@@ -11,7 +10,6 @@ interface BrowserScreencastProps {
   frameSrc?: string;
   actions: BrowserPanelAction[];
   onSelectTarget: (targetId: string) => void;
-  viewportMode: ViewportMode;
   zoomLevel: number;
 }
 
@@ -38,7 +36,6 @@ export function BrowserScreencast({
   frameSrc,
   actions,
   onSelectTarget,
-  viewportMode,
   zoomLevel,
 }: BrowserScreencastProps) {
   const isLive = status === 'live';
@@ -73,8 +70,10 @@ export function BrowserScreencast({
 
       <div className="flex-1 flex items-center justify-center p-2 min-h-0 overflow-auto">
         {isLive ? (
+          // Always fills the panel: the surface is a fixed-resolution JPEG, so
+          // there is no device box to frame it in — only the zoom scale.
           <div
-            className={`relative flex flex-col bg-paper ${VIEWPORT_CLASSES[viewportMode]} transition-all duration-200`}
+            className="relative flex flex-col bg-paper w-full h-full transition-all duration-200"
             style={{
               zoom: zoomLevel !== 100 ? `${zoomLevel}%` : undefined,
               transformOrigin: 'top center',

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

@@ -4,7 +4,6 @@ import { BrowserScreencast } from '@/client/components/workspace/browser-panel/S
 import { useScreencast } from '@/client/hooks/browser/use-screencast';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
 import { emitBrowserPageContext } from '@/shared/lib/browser/page-context';
-import type { ViewportMode } from '@/shared/types';
 
 interface BrowserPanelProps {
   className?: string;
@@ -18,9 +17,14 @@ interface BrowserPanelProps {
  *
  * This panel only mirrors what the agent does. Interactive browsing belongs to
  * the separate user-browser panel, which runs its own private Chromium.
+ *
+ * There is deliberately NO device/viewport selector here: the surface is a
+ * fixed-resolution screencast JPEG, so a preset could only letterbox the image
+ * while claiming to emulate a device. Emulation belongs to the agent itself
+ * (`tab.emulate()` / `browser.open({ viewport })`); the user-browser panel,
+ * whose iframe's layout viewport *is* its CSS box, keeps the selector.
  */
 export function BrowserPanel({ className = '', active = true }: BrowserPanelProps) {
-  const [viewportMode, setViewportMode] = useSessionState<ViewportMode>('browser.viewportMode', 'responsive');
   const [zoomLevel, setZoomLevel] = useSessionState<number>('browser.zoomLevel', 100);
   const { status, url, title, tabs, targetId, frameSrc, actions, selectTarget, reconnect } = useScreencast(active);
 
@@ -41,16 +45,13 @@ export function BrowserPanel({ className = '', active = true }: BrowserPanelProp
       <BrowserAddressBar
         url={url}
         status={status}
-        viewportMode={viewportMode}
         zoomLevel={zoomLevel}
         onIncludeInChat={handleIncludeInChat}
         onReconnect={reconnect}
         onOpenExternal={handleOpenExternal}
-        onChangeViewport={setViewportMode}
         onZoomIn={() => setZoomLevel((prev) => Math.min(200, prev + 10))}
         onZoomOut={() => setZoomLevel((prev) => Math.max(50, prev - 10))}
         onResetZoom={() => setZoomLevel(100)}
-        onSetZoom={setZoomLevel}
       />
 
       <BrowserScreencast
@@ -61,7 +62,6 @@ export function BrowserPanel({ className = '', active = true }: BrowserPanelProp
         frameSrc={frameSrc}
         actions={actions}
         onSelectTarget={selectTarget}
-        viewportMode={viewportMode}
         zoomLevel={zoomLevel}
       />
     </div>

package/src/client/components/workspace/browser-toolbar/index.tsx

@@ -13,15 +13,22 @@ export interface BrowserToolbarProps {
   /** Status dot class plus its label — the only per-panel difference. */
   statusDotClass: string;
   statusLabel: string;
-  viewportMode: ViewportMode;
   zoomLevel: number;
-  onChangeViewport: (mode: ViewportMode) => void;
   onZoomIn: () => void;
   onZoomOut: () => void;
   onResetZoom: () => void;
-  onSetZoom: (zoom: number) => void;
   onIncludeInChat: () => void;
   onOpenExternal: () => void;
+  /**
+   * Device-testing cluster, rendered only when both are supplied. The USER
+   * panel passes them: its iframe's layout viewport *is* its CSS box, so a
+   * preset genuinely re-runs the page's media queries. The AGENT panel omits
+   * them — its surface is a fixed-resolution screencast JPEG, so a preset
+   * could only letterbox the image while claiming to emulate a device.
+   */
+  viewportMode?: ViewportMode;
+  onChangeViewport?: (mode: ViewportMode) => void;
+  onSetZoom?: (zoom: number) => void;
   /** Shown after the include/copy buttons — the agent panel's reconnect button. */
   trailingControls?: ComponentChildren;
   /** Open-external button label/title, differing between the two panels. */
@@ -34,9 +41,10 @@ export interface BrowserToolbarProps {
 /**
  * Shared address bar for both browser panels. The two panels differ only in
  * their status semantics, the middle slot (read-only URL vs editable form),
- * and the agent panel's reconnect button; everything else — the include,
- * copy, open-external buttons and the zoom cluster — lives here so the two
- * toolbars cannot drift.
+ * the agent panel's reconnect button, and whether the device-testing cluster
+ * is offered at all (user panel yes, agent panel no — see `viewportMode`);
+ * everything else — the include, copy, open-external buttons and the zoom
+ * cluster — lives here so the two toolbars cannot drift.
  */
 export function BrowserToolbar({
   url,
@@ -86,12 +94,14 @@ export function BrowserToolbar({
       {children}
 
       <div className="flex items-center space-x-1.5 flex-shrink-0">
-        <BrowserViewportSelector
-          viewportMode={viewportMode}
-          onChangeViewport={onChangeViewport}
-          zoomLevel={zoomLevel}
-          onSetZoom={onSetZoom}
-        />
+        {viewportMode && onChangeViewport && (
+          <BrowserViewportSelector
+            viewportMode={viewportMode}
+            onChangeViewport={onChangeViewport}
+            zoomLevel={zoomLevel}
+            onSetZoom={onSetZoom}
+          />
+        )}
 
         <ZoomControls
           zoomLevel={zoomLevel}

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

@@ -12,7 +12,7 @@ import { toTitleCase } from '@/shared/lib/chat/title-case';
 import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
 import { tryParseJson } from '@/shared/lib/code/syntax-highlight';
 import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
-import { getTodoSummary } from '@/shared/lib/chat/todo-parser';
+import { getTodoSummary } from '@/shared/lib/chat/todo/parser';
 import { parseAskQuestions } from '@/shared/lib/chat/ask-questions';
 
 interface ToolCallCardProps {

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

@@ -1,7 +1,7 @@
 import { useMemo } from 'preact/hooks';
 import { CheckCircle2, ListTodo, Loader2, Square } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
-import { parseTodoData } from '@/shared/lib/chat/todo-parser';
+import { parseTodoData } from '@/shared/lib/chat/todo/parser';
 import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
 
 /** Panel khusus untuk tool `todo` — task list dengan progress bar, phase groups, dan status yang readable. */