ompchamber 2.0.2 → 3.1.0

package/src/client/components/settings/categories/usage-settings/format.ts

@@ -61,3 +61,39 @@ export function formatAmount(value: string): string {
   if (value.trim() === '' || !Number.isFinite(parsed)) return value;
   return formatNumber(parsed);
 }
+
+const usdFormatter = new Intl.NumberFormat('id-ID', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+/** USD amounts from provider reports and local cost records. */
+export function formatUsd(value: number): string {
+  if (!Number.isFinite(value)) return '$0,00';
+  return `$${usdFormatter.format(value)}`;
+}
+
+/**
+ * Render one quota amount in its own unit. `percent` amounts arrive as 0..100
+ * (omp's `used`/`limit` for percent units), everything else as a raw count.
+ */
+export function formatUsageAmount(value: number, unit: string): string {
+  if (!Number.isFinite(value)) return '—';
+  switch (unit) {
+    case 'percent':
+      return `${new Intl.NumberFormat('id-ID', { maximumFractionDigits: 1 }).format(value)}%`;
+    case 'usd':
+      return formatUsd(value);
+    case 'tokens':
+    case 'bytes':
+      return formatCompactTokens(value);
+    default:
+      return formatNumber(value);
+  }
+}
+
+/** Fraction (0..1) rendered as a whole-percent string. */
+export function formatFractionPercent(fraction: number): string {
+  if (!Number.isFinite(fraction)) return '0%';
+  return `${new Intl.NumberFormat('id-ID', { maximumFractionDigits: 1 }).format(fraction * 100)}%`;
+}

package/src/client/components/settings/categories/usage-settings/providers.ts

@@ -1,45 +1,69 @@
-import type { UsageReport } from '@/shared/types';
-import { formatAmount } from '@/client/components/settings/categories/usage-settings/format';
+import type { UsageLimitWindow, UsageProviderSummary, UsageReport } from '@/shared/types';
+import { formatAmount, formatUsd } from '@/client/components/settings/categories/usage-settings/format';
 
-/** Providers surfaced in the Settings → Usage sidebar and the Usage right panel. */
-export type UsageProviderId = 'kenari' | 'deepseek';
+/**
+ * Providers surfaced in the Settings → Usage sidebar and the Usage right panel.
+ * The id is the provider slug, so the set is open-ended: any provider omp can
+ * authenticate shows up here without a code change.
+ */
+export type UsageProviderId = string;
 
 export interface ProviderEntry {
   id: UsageProviderId;
   name: string;
-  configured: boolean;
+  /** Provider-side failure, already human-readable. */
   error?: string;
+  /** Short status line under the name. */
   hint: string;
+  /** Provider-reported quota windows; empty when it exposes no usage endpoint. */
+  limits: UsageLimitWindow[];
+  /** Whether omp ships a usage adapter for this provider. */
+  tracked: boolean;
+  /** omp tracks this provider but its endpoint produced nothing. */
+  limitsUnavailable?: boolean;
+  summary: UsageProviderSummary;
+}
+
+/** Compact one-line summary of the most-used quota window. */
+function limitHint(limits: UsageLimitWindow[]): string | undefined {
+  const used = limits.filter((limit) => limit.usedFraction !== undefined);
+  if (used.length === 0) {
+    // A credit balance has no limit to take a fraction of; the remaining
+    // amount IS the whole story.
+    const credit = limits.find((limit) => limit.unit === 'usd' && limit.remaining !== undefined);
+    if (credit) return `${formatUsd(credit.remaining ?? 0)} left`;
+    return limits[0]?.label;
+  }
+  const binding = used.reduce((worst, limit) =>
+    (limit.usedFraction ?? 0) > (worst.usedFraction ?? 0) ? limit : worst,
+  );
+  const percent = Math.round((binding.usedFraction ?? 0) * 100);
+  return binding.windowLabel ? `${percent}% · ${binding.windowLabel}` : `${percent}% used`;
 }
 
 /** Derives the provider list (status + hint) from a usage report. */
 export function buildProviders(report: UsageReport): ProviderEntry[] {
-  const kenariBalance = report.kenari.quota?.planName;
-  const deepseekEntry = report.deepseek.balance?.entries[0];
+  return report.providers.map((summary) => ({
+    id: summary.id,
+    name: summary.name,
+    error: summary.error,
+    hint: providerHint(summary),
+    limits: summary.limits,
+    tracked: summary.tracked,
+    limitsUnavailable: summary.limitsUnavailable,
+    summary,
+  }));
+}
 
-  return [
-    {
-      id: 'kenari',
-      name: 'Kenari.id',
-      configured: report.kenari.configured,
-      error: report.kenari.error,
-      hint: kenariBalance ?? 'Wallet & quota',
-    },
-    {
-      id: 'deepseek',
-      name: 'DeepSeek',
-      configured: report.deepseek.configured,
-      error: report.deepseek.error,
-      hint: deepseekEntry
-        ? `${deepseekEntry.currency} ${formatAmount(deepseekEntry.totalBalance)}`
-        : 'Prepaid balance',
-    },
-  ];
+function providerHint(summary: UsageProviderSummary): string {
+  const plan = summary.kenari?.quota?.planName;
+  if (plan) return plan;
+  const balance = summary.deepseek?.balance?.entries[0];
+  if (balance) return `${balance.currency} ${formatAmount(balance.totalBalance)}`;
+  return limitHint(summary.limits) ?? 'No quota reported';
 }
 
 /** Human-readable connection state for a provider entry. */
 export function statusLabel(provider: ProviderEntry): string {
-  if (!provider.configured) return 'Not configured';
-  if (provider.error) return 'Error';
-  return 'Connected';
+  return provider.error ? 'Error' : 'Connected';
 }

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/AiMessageFooter.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'preact/compat';
 import { Bot, Brain, Clock3, Coins, Hourglass, MessageSquarePlus, MoreHorizontal, RotateCcw, X } from 'lucide-preact';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { formatDuration } from '@/shared/lib/chat/duration';
-import { providerLabel } from '@/shared/lib/models/provider-label';
+import { providerLabel } from '@/shared/lib/models/provider/label';
 import { formatCompactTokens } from '@/shared/lib/format/number';
 
 interface AiMessageFooterProps {

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { Bot } from 'lucide-preact';
-import { providerLabel } from '@/shared/lib/models/provider-label';
+import { providerLabel } from '@/shared/lib/models/provider/label';
 
 interface GeneratingIndicatorProps {
   modelName?: string;

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. */

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

@@ -2,17 +2,21 @@ import { AlignJustify, Check, Code2, Columns, Copy, Minus, Plus, RefreshCw, Spac
 import { FileIcon } from '@/client/components/common/file-icon';
 import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
 
+export type DiffViewMode = 'unified' | 'split';
+
 interface DiffToolbarProps {
   filePath: string;
   status: string;
   isStaged: boolean;
-  viewMode: 'unified' | 'split';
+  viewMode: DiffViewMode;
   ignoreWhitespace: boolean;
   additions: number;
   deletions: number;
   isLoading: boolean;
   isCopied: boolean;
-  onToggleViewMode: () => void;
+  /** A stage/unstage/discard write is in flight; the toolbar locks its actions. */
+  isBusy?: boolean;
+  onSetViewMode: (mode: DiffViewMode) => void;
   onToggleWhitespace: () => void;
   onStageUnstage: () => void;
   onDiscard: () => void;
@@ -21,6 +25,9 @@ interface DiffToolbarProps {
   onCopyDiff: () => void;
 }
 
+const ACTION_CLASS =
+  'flex items-center justify-center p-1.5 rounded transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-ink/50';
+
 export function DiffToolbar({
   filePath,
   status,
@@ -31,7 +38,8 @@ export function DiffToolbar({
   deletions,
   isLoading,
   isCopied,
-  onToggleViewMode,
+  isBusy = false,
+  onSetViewMode,
   onToggleWhitespace,
   onStageUnstage,
   onDiscard,
@@ -41,56 +49,72 @@ export function DiffToolbar({
 }: DiffToolbarProps) {
   const fileName = filePath.split('/').pop() || filePath;
   const statusInfo = getGitStatusInfo(status, isStaged);
+  // Only the actions that write to git lock while one is in flight. Copying the
+  // diff is a local read of what is already on screen, so it stays available.
+  const locked = isLoading || isBusy;
 
   return (
-    <div className="flex items-center justify-between px-3 py-1.5 bg-paper border-b border-ink/10 text-xs font-sans select-none flex-shrink-0 overflow-x-auto no-scrollbar">
-      {/* Left: File name, status badge, additions/deletions. Hidden on phone
-          widths: the mobile diff header already carries the file identity, and
-          dropping it keeps the actions reachable without a sideways scroll. */}
-      <div className="hidden md:flex items-center space-x-2 min-w-0 pr-2">
+    // `@container` so the labels below can hide on a NARROW PANEL rather than a
+    // narrow viewport: the editor panel is 320px wide on a 1440px screen, and
+    // `sm:` (viewport-keyed) kept every label on, overflowing the toolbar.
+    <div className="@container flex items-center justify-between px-3 py-1.5 bg-paper border-b border-ink/10 text-xs font-sans select-none flex-shrink-0 gap-2 min-w-0">
+      {/* Left: File name and status badge. Hidden when the panel is narrow —
+          the editor tab already carries the name and the status character, and
+          the mobile diff header carries both. */}
+      <div className="hidden @[560px]:flex items-center space-x-2 min-w-0 pr-2">
         <FileIcon name={fileName} size={14} className="flex-shrink-0" />
         <span className="font-mono text-ink font-medium truncate" title={filePath}>
           {fileName}
         </span>
-        
+
         <span className={`px-1.5 py-0.5 text-[10px] font-mono font-semibold rounded border ${statusInfo.badgeBgClass} flex-shrink-0`}>
           {statusInfo.charStatus} {statusInfo.label}
         </span>
+      </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">
+        {/* 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. */}
         {(additions > 0 || deletions > 0) && (
-          <div className="flex items-center space-x-1.5 text-[11px] font-mono flex-shrink-0 ml-1">
+          <div className="flex items-center space-x-1.5 text-[11px] font-mono flex-shrink-0 pr-1.5 mr-0.5 @[440px]:mr-1 border-r border-ink/10">
             {additions > 0 && <span className="text-success font-semibold">+{additions}</span>}
             {deletions > 0 && <span className="text-error font-semibold">-{deletions}</span>}
           </div>
         )}
-      </div>
 
-      {/* Right: Controls & actions. `ml-auto` keeps them right-aligned on phone
-          widths, where the identity block above is hidden. */}
-      <div className="flex items-center space-x-1 text-ink/70 flex-shrink-0 ml-auto">
         {/* View mode toggle (Unified vs Split) */}
-        <div className="flex items-center bg-canvas rounded border border-ink/15 p-0.5 mr-1">
+        <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={onToggleViewMode}
-            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors ${
+            onClick={() => onSetViewMode('split')}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors cursor-pointer flex-shrink-0 ${
               viewMode === 'split' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
             }`}
-            title="Split (side-by-side) Diff"
+            title="Split (side-by-side) diff"
+            aria-label="Split (side-by-side) diff"
+            aria-pressed={viewMode === 'split'}
           >
             <Columns size={12} />
-            <span className="hidden sm:inline">Split</span>
+            <span className="hidden @[420px]:inline">Split</span>
           </button>
           <button
             type="button"
-            onClick={onToggleViewMode}
-            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors ${
+            onClick={() => onSetViewMode('unified')}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors cursor-pointer flex-shrink-0 ${
               viewMode === 'unified' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
             }`}
-            title="Unified Diff"
+            title="Unified diff"
+            aria-label="Unified diff"
+            aria-pressed={viewMode === 'unified'}
           >
             <AlignJustify size={12} />
-            <span className="hidden sm:inline">Unified</span>
+            <span className="hidden @[420px]:inline">Unified</span>
           </button>
         </div>
 
@@ -98,10 +122,12 @@ export function DiffToolbar({
         <button
           type="button"
           onClick={onToggleWhitespace}
-          className={`p-1.5 rounded transition-colors ${
+          className={`p-1.5 rounded transition-colors cursor-pointer flex-shrink-0 ${
             ignoreWhitespace ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'
           }`}
-          title={ignoreWhitespace ? 'Whitespace ignored' : 'Ignore whitespace'}
+          title={ignoreWhitespace ? 'Whitespace changes hidden' : 'Hide whitespace changes'}
+          aria-label={ignoreWhitespace ? 'Whitespace changes hidden' : 'Hide whitespace changes'}
+          aria-pressed={ignoreWhitespace}
         >
           <Space size={13} />
         </button>
@@ -110,19 +136,21 @@ export function DiffToolbar({
         <button
           type="button"
           onClick={onRefresh}
-          className="p-1.5 text-ink/50 hover:text-ink hover:bg-ink/5 rounded transition-colors"
-          title="Refresh Diff"
-          disabled={isLoading}
+          className={`${ACTION_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5 flex-shrink-0`}
+          title="Reload this diff"
+          aria-label="Reload this diff"
+          disabled={locked}
         >
           <RefreshCw size={13} className={isLoading ? 'animate-spin' : ''} />
         </button>
 
-        {/* Copy diff */}
+        {/* Copy diff — never disabled: it reads the buffer already on screen. */}
         <button
           type="button"
           onClick={onCopyDiff}
-          className="p-1.5 text-ink/50 hover:text-ink hover:bg-ink/5 rounded transition-colors"
-          title="Copy Diff Text"
+          className={`${ACTION_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5 flex-shrink-0`}
+          title={isCopied ? 'Copied' : 'Copy diff text'}
+          aria-label={isCopied ? 'Copied' : 'Copy diff text'}
         >
           {isCopied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
         </button>
@@ -132,8 +160,10 @@ export function DiffToolbar({
           <button
             type="button"
             onClick={onDiscard}
-            className="p-1.5 text-ink/50 hover:text-error hover:bg-error/10 rounded transition-colors"
+            className={`${ACTION_CLASS} text-ink/50 hover:text-error hover:bg-error/10 flex-shrink-0`}
             title="Discard changes in this file"
+            aria-label="Discard changes in this file"
+            disabled={locked}
           >
             <Undo2 size={13} />
           </button>
@@ -143,18 +173,20 @@ export function DiffToolbar({
         <button
           type="button"
           onClick={onStageUnstage}
-          className="px-2 py-1 text-[11px] font-medium rounded border border-ink/15 hover:bg-ink/5 flex items-center space-x-1 transition-colors text-ink"
+          className="px-2 py-1 text-[11px] font-medium rounded border border-ink/15 hover:bg-ink/5 flex items-center space-x-1 transition-colors text-ink cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent flex-shrink-0"
           title={isStaged ? 'Unstage file' : 'Stage file'}
+          aria-label={isStaged ? 'Unstage file' : 'Stage file'}
+          disabled={locked}
         >
           {isStaged ? (
             <>
               <Minus size={12} />
-              <span>Unstage</span>
+              <span className="hidden @[360px]:inline">Unstage</span>
             </>
           ) : (
             <>
               <Plus size={12} />
-              <span>Stage</span>
+              <span className="hidden @[360px]:inline">Stage</span>
             </>
           )}
         </button>
@@ -164,11 +196,12 @@ export function DiffToolbar({
           <button
             type="button"
             onClick={onOpenInEditor}
-            className="px-2 py-1 text-[11px] font-medium rounded bg-ink text-canvas hover:bg-ink/90 flex items-center space-x-1 transition-colors shadow-xs ml-1"
-            title="Open in Code Editor"
+            className="px-2 py-1 text-[11px] font-medium rounded bg-ink text-canvas hover:bg-ink/90 flex items-center space-x-1 transition-colors shadow-xs ml-1 cursor-pointer flex-shrink-0"
+            title="Open in code editor"
+            aria-label="Open in code editor"
           >
             <Code2 size={12} />
-            <span className="hidden sm:inline">Edit File</span>
+            <span className="hidden @[360px]:inline">Edit File</span>
           </button>
         )}
       </div>