@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/settings/categories/usage-settings/usage-and-picker.test.ts

@@ -0,0 +1,330 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The Usage panel, the model picker, and the composer's thinking-level rule.
+ *
+ * - `format.ts` renders every number the panel shows. The boundaries are the
+ *   point: the compact-token thresholds sit exactly at 1_000/1_000_000/1_000_000_000,
+ *   a non-finite value must not leak "NaN" into the UI, and `usedPercent` clamps
+ *   so an overage cannot paint a progress bar past 100%.
+ * - `buildProviders` derives each row's one-line `hint` from three sources in a
+ *   fixed precedence (kenari plan → DeepSeek balance → quota window), and picks
+ *   the WORST used fraction — picking the first window instead shows a provider
+ *   at 3% while it is actually at 98%.
+ * - `buildPickerGroups` keys its hover index on the composite `provider:id`, not
+ *   the bare id: the same model id is served by several providers, and an
+ *   id-only key highlighted every provider's row at once.
+ * - `resolveThinkingLevel` must keep a session's level when the ladder is
+ *   unknown/empty, because an async catalog fetch resolving later used to reset
+ *   the user's chosen effort to a ladder default.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import {
+  formatAmount,
+  formatCompactTokens,
+  formatDateTime,
+  formatFractionPercent,
+  formatNumber,
+  formatPercent,
+  formatRp,
+  formatUsageAmount,
+  formatUsd,
+  usedPercent,
+} from '@/client/components/settings/categories/usage-settings/format';
+import {
+  buildProviders,
+  statusLabel,
+  type ProviderEntry,
+} from '@/client/components/settings/categories/usage-settings/providers';
+import { buildPickerGroups } from '@/client/components/workspace/model-dropdown/groups';
+import {
+  resolveThinkingLevel,
+  selectionFor,
+  UNKNOWN_THINKING_LEVEL,
+} from '@/client/components/workspace/chat-timeline/chat-input/selection';
+import type { AIModelOption, ModelEntry } from '@/shared/types';
+import type { UsageLimitWindow, UsageProviderSummary, UsageReport } from '@/shared/types';
+
+const window = (overrides: Partial<UsageLimitWindow> = {}): UsageLimitWindow =>
+  ({ id: 'w', label: 'Window', unit: 'percent', status: 'ok', ...overrides }) as UsageLimitWindow;
+
+const summary = (overrides: Partial<UsageProviderSummary> = {}): UsageProviderSummary =>
+  ({ id: 'p', name: 'P', credentialSources: [], tracked: true, limits: [], ...overrides }) as UsageProviderSummary;
+
+describe('usage number formatting', () => {
+  test('formatRp groups Rupiah with no decimals', () => {
+    // The space ICU puts between the symbol and the amount is locale DATA, not
+    // our rule: newer CLDR emits `Rp\u00a01.234.567`, the older one shipped on
+    // macOS emits `Rp1.234.567`. Grouping and the absent decimals are ours.
+    const compact = (value: number): string => formatRp(value).replace(/\s/g, '');
+    expect(compact(1234567)).toBe('Rp1.234.567');
+    expect(compact(0)).toBe('Rp0');
+  });
+
+  test('formatNumber groups with the id-ID separator', () => {
+    expect(formatNumber(1234.5)).toBe('1.234,5');
+  });
+
+  test('formatDateTime formats a real timestamp and echoes an unparseable one', () => {
+    expect(formatDateTime('2024-03-05T10:30:00Z')).toContain('2024');
+    expect(formatDateTime('not-a-date')).toBe('not-a-date');
+  });
+
+  test('usedPercent clamps to 0..100 and divides by zero safely', () => {
+    expect(usedPercent(50, 100)).toBe(50);
+    expect(usedPercent(150, 100)).toBe(100);
+    expect(usedPercent(-10, 100)).toBe(0);
+    expect(usedPercent(10, 0)).toBe(0);
+  });
+
+  test('formatPercent reports 0% for a zero total', () => {
+    expect(formatPercent(10, 0)).toBe('0%');
+    expect(formatPercent(1, 3)).toBe('33,3%');
+    expect(formatPercent(1, 2)).toBe('50%');
+  });
+
+  test('formatCompactTokens switches unit exactly at each threshold', () => {
+    expect(formatCompactTokens(999)).toBe('999');
+    expect(formatCompactTokens(1000)).toBe('1,00K');
+    expect(formatCompactTokens(61950)).toBe('61,95K');
+    expect(formatCompactTokens(747642928)).toBe('747,64M');
+    expect(formatCompactTokens(1124214260)).toBe('1,12B');
+  });
+
+  test('formatCompactTokens handles negatives and non-finite input', () => {
+    expect(formatCompactTokens(-1500)).toBe('-1,50K');
+    expect(formatCompactTokens(Number.NaN)).toBe('0');
+    expect(formatCompactTokens(Number.POSITIVE_INFINITY)).toBe('0');
+  });
+
+  test('formatAmount parses a numeric string and echoes what it cannot parse', () => {
+    expect(formatAmount('1234.5')).toBe('1.234,5');
+    expect(formatAmount('')).toBe('');
+    expect(formatAmount('n/a')).toBe('n/a');
+  });
+
+  test('formatUsd always shows two decimals, and never "$NaN"', () => {
+    expect(formatUsd(12.5)).toBe('$12,50');
+    expect(formatUsd(0)).toBe('$0,00');
+    expect(formatUsd(Number.NaN)).toBe('$0,00');
+  });
+
+  test('formatUsageAmount dispatches on the unit and guards non-finite values', () => {
+    expect(formatUsageAmount(50, 'percent')).toBe('50%');
+    expect(formatUsageAmount(12.5, 'usd')).toBe('$12,50');
+    expect(formatUsageAmount(61950, 'tokens')).toBe('61,95K');
+    expect(formatUsageAmount(61950, 'bytes')).toBe('61,95K');
+    expect(formatUsageAmount(61950, 'requests')).toBe('61.950');
+    expect(formatUsageAmount(Number.NaN, 'tokens')).toBe('—');
+  });
+
+  test('formatFractionPercent renders a 0..1 fraction as a whole percent', () => {
+    expect(formatFractionPercent(0.5)).toBe('50%');
+    expect(formatFractionPercent(1 / 3)).toBe('33,3%');
+    expect(formatFractionPercent(Number.NaN)).toBe('0%');
+  });
+});
+
+describe('buildProviders', () => {
+  test('maps each summary to a row in report order, carrying its own fields', () => {
+    const report: UsageReport = {
+      isMock: false,
+      generatedAt: '2026-01-01T00:00:00Z',
+      providers: [summary({ id: 'a', name: 'Alpha', tracked: true }), summary({ id: 'b', name: 'Beta', tracked: false })],
+    };
+    const entries = buildProviders(report);
+    expect(entries.map((entry) => entry.id)).toEqual(['a', 'b']);
+    expect(entries[0]?.name).toBe('Alpha');
+    expect(entries[1]?.tracked).toBe(false);
+    expect(entries[0]?.summary.id).toBe('a');
+  });
+
+  test('a kenari plan name is the hint', () => {
+    const entry = buildProviders({
+      isMock: false,
+      generatedAt: '',
+      providers: [summary({ kenari: { quota: { planName: 'Pro 30d', windows: [], coupon: null } } })],
+    })[0];
+    expect(entry?.hint).toBe('Pro 30d');
+  });
+
+  test('a DeepSeek balance is the hint when there is no plan', () => {
+    const entry = buildProviders({
+      isMock: false,
+      generatedAt: '',
+      providers: [
+        summary({
+          deepseek: { balance: { isAvailable: true, entries: [{ currency: 'USD', totalBalance: '12.34', grantedBalance: '0', toppedUpBalance: '12.34' }] } },
+        }),
+      ],
+    })[0];
+    expect(entry?.hint).toBe('USD 12,34');
+  });
+
+  test('the hint reports the WORST used fraction, not the first window', () => {
+    const entry = buildProviders({
+      isMock: false,
+      generatedAt: '',
+      providers: [
+        summary({
+          limits: [
+            window({ usedFraction: 0.03, windowLabel: '5h' }),
+            window({ usedFraction: 0.98, windowLabel: '7d' }),
+          ],
+        }),
+      ],
+    })[0];
+    expect(entry?.hint).toBe('98% · 7d');
+  });
+
+  test('a used fraction with no window label reads "used"', () => {
+    const entry = buildProviders({
+      isMock: false,
+      generatedAt: '',
+      providers: [summary({ limits: [window({ usedFraction: 0.5 })] })],
+    })[0];
+    expect(entry?.hint).toBe('50% used');
+  });
+
+  test('a credit balance with no fraction reports what is left', () => {
+    const entry = buildProviders({
+      isMock: false,
+      generatedAt: '',
+      providers: [summary({ limits: [window({ unit: 'usd', remaining: 7.5, label: 'Credit' })] })],
+    })[0];
+    expect(entry?.hint).toBe('$7,50 left');
+  });
+
+  test('a label-only window falls back to the first label, then to a fixed phrase', () => {
+    const labelled = buildProviders({
+      isMock: false,
+      generatedAt: '',
+      providers: [summary({ limits: [window({ label: 'Daily', unit: 'requests' })] })],
+    })[0];
+    expect(labelled?.hint).toBe('Daily');
+
+    const bare = buildProviders({ isMock: false, generatedAt: '', providers: [summary()] })[0];
+    expect(bare?.hint).toBe('No quota reported');
+  });
+
+  test('statusLabel reports a provider failure as Error', () => {
+    const failed = buildProviders({
+      isMock: false,
+      generatedAt: '',
+      providers: [summary({ error: 'token expired' })],
+    })[0] as ProviderEntry;
+    expect(statusLabel(failed)).toBe('Error');
+    expect(statusLabel({ ...failed, error: undefined })).toBe('Connected');
+  });
+});
+
+describe('buildPickerGroups', () => {
+  const model = (provider: string, id: string, name: string, extra: Partial<AIModelOption> = {}): AIModelOption =>
+    ({ id, name, provider, ...extra }) as AIModelOption;
+
+  const catalog: AIModelOption[] = [
+    model('deepseek', 'v4-flash', 'Flash', { contextWindow: 128000, capabilities: ['tools'] }),
+    model('kenari', 'v4-flash', 'Flash (Kenari)', { contextWindow: 64000 }),
+    model('openai', 'gpt-5', 'GPT-5'),
+  ];
+
+  test('a search filters on name, provider, context window and capability', () => {
+    expect(buildPickerGroups(catalog, 'flash', {}, [], []).filtered).toHaveLength(2);
+    expect(buildPickerGroups(catalog, 'OPENAI', {}, [], []).filtered.map((m) => m.id)).toEqual(['gpt-5']);
+    expect(buildPickerGroups(catalog, '64000', {}, [], []).filtered.map((m) => m.provider)).toEqual(['kenari']);
+    expect(buildPickerGroups(catalog, 'tools', {}, [], []).filtered.map((m) => m.provider)).toEqual(['deepseek']);
+    expect(buildPickerGroups(catalog, '   ', {}, [], []).filtered).toHaveLength(3);
+  });
+
+  test('the rails follow the stored key order, not the catalog order', () => {
+    const groups = buildPickerGroups(catalog, '', {}, ['openai:gpt-5', 'deepseek:v4-flash'], ['kenari:v4-flash', 'openai:gpt-5']);
+    expect(groups.favorites.map((m) => m.id)).toEqual(['gpt-5', 'v4-flash']);
+    expect(groups.recent.map((m) => m.provider)).toEqual(['kenari']);
+  });
+
+  test('the rails are narrowed by the search like every other section', () => {
+    const groups = buildPickerGroups(catalog, 'flash', {}, ['openai:gpt-5', 'deepseek:v4-flash'], []);
+    expect(groups.favorites.map((m) => m.provider)).toEqual(['deepseek']);
+  });
+
+  test('providers are grouped under upper-cased names in catalog order', () => {
+    const groups = buildPickerGroups(catalog, '', {}, [], []);
+    expect(Object.keys(groups.byProvider)).toEqual(['DEEPSEEK', 'KENARI', 'OPENAI']);
+    expect(groups.byProvider.DEEPSEEK).toHaveLength(1);
+  });
+
+  test('the flat list renders rails first, then provider sections', () => {
+    const groups = buildPickerGroups(catalog, '', {}, ['openai:gpt-5'], ['deepseek:v4-flash']);
+    // A rail model is NOT removed from its provider section: the flat list is the
+    // order the panel walks for hover/keyboard focus, and a model appearing once
+    // under a rail and again under its provider is the shipped behavior.
+    expect(groups.visibleFlatList.map((m) => `${m.provider}:${m.id}`)).toEqual([
+      'openai:gpt-5', // favorites rail
+      'deepseek:v4-flash', // recent rail
+      'deepseek:v4-flash', // DEEPSEEK section
+      'kenari:v4-flash', // KENARI section
+      'openai:gpt-5', // OPENAI section
+    ]);
+  });
+
+  test('a collapsed section is dropped from the flat list but keeps its group', () => {
+    const groups = buildPickerGroups(catalog, '', { favorites: true, KENARI: true }, ['openai:gpt-5'], []);
+    expect(groups.visibleFlatList.map((m) => m.provider)).toEqual(['deepseek', 'openai']);
+    expect(groups.byProvider.KENARI).toHaveLength(1);
+  });
+
+  test('the hover index is keyed by provider+id, so shared ids stay distinct', () => {
+    const groups = buildPickerGroups(catalog, '', {}, [], []);
+    expect(groups.index['deepseek:v4-flash']).toBe(0);
+    expect(groups.index['kenari:v4-flash']).toBe(1);
+    expect(groups.index['deepseek:v4-flash']).not.toBe(groups.index['kenari:v4-flash']);
+  });
+});
+
+describe('resolveThinkingLevel', () => {
+  test('a session level the model offers is authoritative', () => {
+    expect(resolveThinkingLevel(['off', 'low', 'high'], 'high', 'low')).toBe('high');
+  });
+
+  test('an unknown or empty ladder keeps the session level', () => {
+    expect(resolveThinkingLevel(undefined, 'high', 'low')).toBe('high');
+    expect(resolveThinkingLevel([], 'high', 'low')).toBe('high');
+  });
+
+  test('a known ladder that excludes the session level falls back to the current one', () => {
+    expect(resolveThinkingLevel(['off', 'low'], 'max', 'low')).toBe('low');
+  });
+
+  test('with nothing to go on the level stays "auto"', () => {
+    expect(resolveThinkingLevel(['off'], null, null)).toBe(UNKNOWN_THINKING_LEVEL);
+    expect(UNKNOWN_THINKING_LEVEL).toBe('auto');
+  });
+
+  test('selectionFor carries the catalog entry and resolves its level', () => {
+    const match: ModelEntry = {
+      id: 'v4-flash',
+      name: 'Flash',
+      provider: 'deepseek',
+      contextWindow: 128000,
+      thinkingLevels: ['off', 'low', 'high'],
+    };
+    expect(selectionFor(match, 'high', null)).toEqual({
+      id: 'v4-flash',
+      name: 'Flash',
+      provider: 'deepseek',
+      contextWindow: 128000,
+      thinkingLevels: ['off', 'low', 'high'],
+      thinkingLevel: 'high',
+    });
+  });
+
+  test('selectionFor prefers the session level over the composer current one', () => {
+    const match: ModelEntry = { id: 'm', name: 'M', provider: 'p', thinkingLevels: ['off', 'low', 'high'] };
+    const current = { id: 'other', name: 'Other', provider: 'p', thinkingLevel: 'low' } as AIModelOption;
+    expect(selectionFor(match, 'high', current).thinkingLevel).toBe('high');
+  });
+});

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/browser-panel/ActivityToasts.tsx

@@ -0,0 +1,46 @@
+import { Camera, CheckCircle2, CornerDownLeft, Globe, Hourglass, MousePointerClick, MoveVertical, Send, Type, Upload, XCircle, type LucideIcon } from 'lucide-preact';
+import type { BrowserActionKind, BrowserPanelAction } from '@/shared/types';
+
+const ICONS: Record<BrowserActionKind, LucideIcon> = {
+  open: Globe,
+  navigate: Globe,
+  loaded: CheckCircle2,
+  click: MousePointerClick,
+  type: Type,
+  press: CornerDownLeft,
+  submit: Send,
+  wait: Hourglass,
+  screenshot: Camera,
+  scroll: MoveVertical,
+  upload: Upload,
+  close: XCircle,
+  error: XCircle,
+};
+
+interface ActivityToastsProps {
+  actions: BrowserPanelAction[];
+}
+
+/** Transient activity toasts overlaid on the screencast. */
+export function ActivityToasts({ actions }: ActivityToastsProps) {
+  if (actions.length === 0) return null;
+  return (
+    <div className="absolute bottom-3 left-3 z-20 flex flex-col gap-1.5 pointer-events-none max-w-[320px]">
+      {actions.map((action) => {
+        const Icon = ICONS[action.kind];
+        const isError = action.kind === 'error';
+        return (
+          <div
+            key={action.id}
+            className={`flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-[11px] shadow-sm backdrop-blur-sm ${
+              isError ? 'border-error/30 bg-error/10 text-error' : 'border-ink/15 bg-paper/95 text-ink'
+            }`}
+          >
+            <Icon size={12} className={`flex-shrink-0 ${isError ? 'text-error' : 'text-ink/60'}`} />
+            <span className="truncate">{action.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+import { Globe, RotateCw } from 'lucide-preact';
+import { BrowserToolbar, ICON_BUTTON } from '@/client/components/workspace/browser-toolbar/index';
+import type { BrowserViewStatus } from '@/shared/types';
+
+interface BrowserAddressBarProps {
+  url?: string;
+  status: BrowserViewStatus;
+  zoomLevel?: number;
+  onIncludeInChat: () => void;
+  onReconnect: () => void;
+  onOpenExternal: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onResetZoom: () => void;
+}
+
+const STATUS_LABEL: Record<BrowserViewStatus, string> = {
+  live: 'Live',
+  'agent-offline': 'Agent offline',
+  'browser-offline': 'Browser offline',
+  'no-tab': 'Tanpa tab',
+};
+
+/**
+ * Read-only toolbar for the AGENT browser: shows the page the session's omp
+ * agent is driving plus display controls. The user's own browsing lives in the
+ * separate user-browser panel, so nothing here navigates the agent's tab.
+ */
+export function BrowserAddressBar({
+  url,
+  status,
+  zoomLevel = 100,
+  onIncludeInChat,
+  onReconnect,
+  onOpenExternal,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+}: BrowserAddressBarProps) {
+  const isLive = status === 'live';
+
+  return (
+    <BrowserToolbar
+      url={url ?? ''}
+      statusDotClass={isLive ? 'bg-success animate-pulse' : 'bg-ink/25'}
+      statusLabel={STATUS_LABEL[status]}
+      zoomLevel={zoomLevel}
+      onZoomIn={onZoomIn}
+      onZoomOut={onZoomOut}
+      onResetZoom={onResetZoom}
+      onIncludeInChat={onIncludeInChat}
+      onOpenExternal={onOpenExternal}
+      openExternalLabel="Buka di jendela baru"
+      openExternalTitle={url ? 'Open in new window' : 'No URL loaded'}
+      trailingControls={
+        <button
+          type="button"
+          onClick={onReconnect}
+          aria-label="Sambungkan ulang live view"
+          title="Reconnect live view"
+          className={ICON_BUTTON}
+        >
+          <RotateCw size={14} />
+        </button>
+      }
+    >
+      <div className="flex-1 min-w-0 flex items-center bg-canvas border border-ink/15 rounded-md px-2 py-0.5">
+        <Globe size={12} className="text-ink/40 mr-1.5 flex-shrink-0" />
+        <span className="w-full truncate text-ink/80 font-mono text-[11px]" title={url ?? ''}>
+          {url || 'Agent belum membuka halaman'}
+        </span>
+      </div>
+    </BrowserToolbar>
+  );
+}

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

@@ -0,0 +1,108 @@
+import { Globe, Loader2, Radio } from 'lucide-preact';
+import { ActivityToasts } from '@/client/components/workspace/browser-panel/ActivityToasts';
+import type { BrowserPanelAction, BrowserTabInfo, BrowserViewStatus } from '@/shared/types';
+
+interface BrowserScreencastProps {
+  status: BrowserViewStatus;
+  url?: string;
+  tabs: BrowserTabInfo[];
+  targetId?: string;
+  frameSrc?: string;
+  actions: BrowserPanelAction[];
+  onSelectTarget: (targetId: string) => void;
+  zoomLevel: number;
+}
+
+const OFFLINE_COPY: Record<Exclude<BrowserViewStatus, 'live'>, { title: string; body: string }> = {
+  'agent-offline': {
+    title: 'Agent belum berjalan',
+    body: 'Aktifkan sesi ini agar browser bisa dikendalikan agent.',
+  },
+  'browser-offline': {
+    title: 'Belum ada browser aktif',
+    body: 'Minta agent membuka sebuah halaman; tampilan live akan muncul di sini.',
+  },
+  'no-tab': {
+    title: 'Browser aktif, belum ada tab',
+    body: 'Sesi ini belum membuka tab di browser bersama.',
+  },
+};
+
+export function BrowserScreencast({
+  status,
+  url,
+  tabs,
+  targetId,
+  frameSrc,
+  actions,
+  onSelectTarget,
+  zoomLevel,
+}: BrowserScreencastProps) {
+  const isLive = status === 'live';
+  const offline = isLive ? null : OFFLINE_COPY[status];
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 bg-canvas/60 relative overflow-hidden">
+      <ActivityToasts actions={actions} />
+      {/* Tab strip: only useful when the session owns more than one page. */}
+      {isLive && tabs.length > 1 && (
+        <div className="px-2 py-1 border-b border-ink/10 bg-paper flex items-center gap-1 overflow-x-auto flex-shrink-0">
+          {tabs.map((tab) => {
+            const active = tab.targetId === targetId;
+            return (
+              <button
+                key={tab.targetId}
+                type="button"
+                onClick={() => onSelectTarget(active ? '' : tab.targetId)}
+                className={`px-2 py-0.5 rounded text-[11px] font-mono max-w-[220px] truncate border transition-colors cursor-pointer ${
+                  active
+                    ? 'bg-ink text-canvas border-ink'
+                    : 'bg-paper text-ink/70 border-ink/15 hover:border-ink/35 hover:text-ink'
+                }`}
+                title={tab.url || tab.title || tab.targetId}
+              >
+                {tab.title || tab.url || tab.targetId}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      <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 w-full h-full transition-all duration-200"
+            style={{
+              zoom: zoomLevel !== 100 ? `${zoomLevel}%` : undefined,
+              transformOrigin: 'top center',
+            }}
+          >
+            {frameSrc ? (
+              <img
+                src={frameSrc}
+                alt={url || 'Live browser view'}
+                className="w-full h-full object-contain bg-paper"
+                draggable={false}
+              />
+            ) : (
+              <div className="w-full h-full flex flex-col items-center justify-center text-center p-6 select-none">
+                <Loader2 size={20} className="animate-spin text-ink/40 mb-2" />
+                <p className="text-xs text-ink/60">Menunggu frame pertama dari browser…</p>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center p-6 text-center select-none my-auto">
+            <div className="w-12 h-12 rounded-xl bg-ink/5 border border-ink/10 flex items-center justify-center text-ink/40 mb-3">
+              {status === 'agent-offline' ? <Radio size={24} /> : <Globe size={24} />}
+            </div>
+            <h3 className="text-sm font-semibold text-ink mb-1">{offline?.title}</h3>
+            <p className="text-xs text-ink/60 max-w-sm">{offline?.body}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}