ompchamber 0.3.0

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

@@ -0,0 +1,84 @@
+import { Globe, RotateCw } from 'lucide-preact';
+import { BrowserToolbar, ICON_BUTTON } from '@/client/components/workspace/browser-toolbar/index';
+import type { BrowserViewStatus, ViewportMode } 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> = {
+  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,
+  viewportMode,
+  zoomLevel = 100,
+  onIncludeInChat,
+  onReconnect,
+  onOpenExternal,
+  onChangeViewport,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onSetZoom,
+}: BrowserAddressBarProps) {
+  const isLive = status === 'live';
+
+  return (
+    <BrowserToolbar
+      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"
+      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,109 @@
+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';
+
+interface BrowserScreencastProps {
+  status: BrowserViewStatus;
+  url?: string;
+  tabs: BrowserTabInfo[];
+  targetId?: string;
+  frameSrc?: string;
+  actions: BrowserPanelAction[];
+  onSelectTarget: (targetId: string) => void;
+  viewportMode: ViewportMode;
+  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,
+  viewportMode,
+  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 ? (
+          <div
+            className={`relative flex flex-col bg-paper ${VIEWPORT_CLASSES[viewportMode]} 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>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { useCallback } from 'preact/hooks';
+import { BrowserAddressBar } from '@/client/components/workspace/browser-panel/AddressBar';
+import { BrowserScreencast } from '@/client/components/workspace/browser-panel/Screencast';
+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;
+  /** False while the panel is hidden (desktop right panel / mobile tab): pauses the SSE viewer. */
+  active?: boolean;
+}
+
+/**
+ * Read-only live view of the browser tab this session's omp agent drives in the
+ * project-shared Chromium (see app/lib/browser/ + /api/browser/:id/stream).
+ *
+ * This panel only mirrors what the agent does. Interactive browsing belongs to
+ * the separate user-browser panel, which runs its own private Chromium.
+ */
+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);
+
+  const handleOpenExternal = () => {
+    if (!url) return;
+    const target =
+      url.startsWith('/') && typeof window !== 'undefined' ? `${window.location.origin}${url}` : url;
+    window.open(target, '_blank', 'noopener,noreferrer');
+  };
+
+  const handleIncludeInChat = useCallback(() => {
+    if (!url) return;
+    emitBrowserPageContext({ url, title });
+  }, [url, title]);
+
+  return (
+    <div className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden select-none ${className}`}>
+      <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
+        status={status}
+        url={url}
+        tabs={tabs}
+        targetId={targetId}
+        frameSrc={frameSrc}
+        actions={actions}
+        onSelectTarget={selectTarget}
+        viewportMode={viewportMode}
+        zoomLevel={zoomLevel}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { ZoomIn, ZoomOut } from 'lucide-preact';
+
+interface ZoomControlsProps {
+  zoomLevel: number;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onResetZoom: () => void;
+}
+
+/**
+ * The −/reset/+ zoom cluster shared by both browser address bars. Bounds match
+ * the panels' own step logic (50% floor, 200% ceiling) so the buttons disable
+ * exactly when the owning setter would stop moving.
+ */
+export function ZoomControls({ zoomLevel, onZoomIn, onZoomOut, onResetZoom }: ZoomControlsProps) {
+  return (
+    <div className="flex items-center bg-canvas border border-ink/10 rounded-md p-0.5 space-x-0.5 text-xs font-mono">
+      <button
+        type="button"
+        onClick={onZoomOut}
+        disabled={zoomLevel <= 50}
+        aria-label="Perkecil tampilan"
+        title="Zoom Out (-10%)"
+        className="p-1 rounded hover:bg-ink/5 disabled:opacity-25 disabled:hover:bg-transparent text-ink/70 hover:text-ink cursor-pointer disabled:cursor-not-allowed transition-colors"
+      >
+        <ZoomOut size={12} />
+      </button>
+      <button
+        type="button"
+        onClick={onResetZoom}
+        className="px-1 text-[10px] font-medium text-ink/75 hover:text-ink hover:underline cursor-pointer select-none"
+        title="Reset Zoom (100%)"
+      >
+        {zoomLevel}%
+      </button>
+      <button
+        type="button"
+        onClick={onZoomIn}
+        disabled={zoomLevel >= 200}
+        aria-label="Perbesar tampilan"
+        title="Zoom In (+10%)"
+        className="p-1 rounded hover:bg-ink/5 disabled:opacity-25 disabled:hover:bg-transparent text-ink/70 hover:text-ink cursor-pointer disabled:cursor-not-allowed transition-colors"
+      >
+        <ZoomIn size={12} />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,140 @@
+import { useState } from 'preact/hooks';
+import { Check, Copy, ExternalLink, MessageSquarePlus } from 'lucide-preact';
+import { BrowserViewportSelector } from '@/client/components/common/ViewportSelector';
+import { ZoomControls } from '@/client/components/workspace/browser-toolbar/ZoomControls';
+import type { ComponentChildren } from 'preact';
+import type { ViewportMode } from '@/shared/types';
+
+export const ICON_BUTTON =
+  'p-1.5 rounded hover:bg-ink/5 disabled:opacity-25 disabled:hover:bg-transparent text-ink/70 hover:text-ink transition-colors cursor-pointer disabled:cursor-not-allowed';
+
+export interface BrowserToolbarProps {
+  url: string;
+  /** 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;
+  /** Shown after the include/copy buttons — the agent panel's reconnect button. */
+  trailingControls?: ComponentChildren;
+  /** Open-external button label/title, differing between the two panels. */
+  openExternalLabel: string;
+  openExternalTitle: string;
+  /** The middle slot: read-only URL text, or the nav cluster + editable form. */
+  children: ComponentChildren;
+}
+
+/**
+ * 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.
+ */
+export function BrowserToolbar({
+  url,
+  statusDotClass,
+  statusLabel,
+  viewportMode,
+  zoomLevel,
+  onChangeViewport,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onSetZoom,
+  onIncludeInChat,
+  onOpenExternal,
+  trailingControls,
+  openExternalLabel,
+  openExternalTitle,
+  children,
+}: BrowserToolbarProps) {
+  const [copied, setCopied] = useState(false);
+  const [included, setIncluded] = useState(false);
+
+  const handleCopy = () => {
+    if (!url) return;
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(() => {});
+  };
+
+  const handleInclude = () => {
+    onIncludeInChat();
+    setIncluded(true);
+    setTimeout(() => setIncluded(false), 2500);
+  };
+
+  return (
+    <div className="h-10 px-2.5 border-b border-ink/10 bg-paper flex items-center justify-between flex-shrink-0 select-none space-x-2">
+      <div className="flex items-center space-x-1.5 flex-shrink-0" title={statusLabel}>
+        <span className={`w-1.5 h-1.5 rounded-full ${statusDotClass}`} />
+        <span className="text-[10px] font-mono uppercase tracking-wide text-ink/60">{statusLabel}</span>
+      </div>
+
+      {children}
+
+      <div className="flex items-center space-x-1.5 flex-shrink-0">
+        <BrowserViewportSelector
+          viewportMode={viewportMode}
+          onChangeViewport={onChangeViewport}
+          zoomLevel={zoomLevel}
+          onSetZoom={onSetZoom}
+        />
+
+        <ZoomControls
+          zoomLevel={zoomLevel}
+          onZoomIn={onZoomIn}
+          onZoomOut={onZoomOut}
+          onResetZoom={onResetZoom}
+        />
+
+        <button
+          type="button"
+          onClick={handleInclude}
+          disabled={!url}
+          aria-label="Sertakan halaman ini di draft chat"
+          title={included ? 'Konteks halaman ditambahkan ke draft' : 'Sertakan halaman ini di draft chat'}
+          className={ICON_BUTTON}
+        >
+          {included ? <Check size={14} className="text-success" /> : <MessageSquarePlus size={14} />}
+        </button>
+
+        <button
+          type="button"
+          onClick={handleCopy}
+          disabled={!url}
+          aria-label="Salin URL"
+          title={copied ? 'Copied URL!' : 'Copy URL'}
+          className={ICON_BUTTON}
+        >
+          {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
+        </button>
+
+        {trailingControls}
+
+        <button
+          type="button"
+          onClick={onOpenExternal}
+          disabled={!url}
+          aria-label={openExternalLabel}
+          title={openExternalTitle}
+          className={ICON_BUTTON}
+        >
+          <ExternalLink size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}