ompchamber 0.3.0

package/src/client/components/common/file-icon/index.tsx

@@ -0,0 +1,127 @@
+import {
+  Braces,
+  File,
+  FileArchive,
+  FileCog,
+  FileImage,
+  FileText,
+  Folder,
+  FolderOpen,
+} from 'lucide-preact';
+import { BRAND_ICONS, BRAND_VIEWBOX, type BrandIconName } from '@/client/components/common/file-icon/brand-paths';
+
+interface FileIconProps {
+  name: string;
+  isFolder?: boolean;
+  isOpen?: boolean;
+  size?: number;
+  className?: string;
+}
+
+/** A brand icon rendered from static path data, tinted with its official color. */
+function BrandIconSvg({ name, size, className }: { name: BrandIconName; size: number; className?: string }) {
+  const brand = BRAND_ICONS[name];
+  return (
+    <svg
+      viewBox={BRAND_VIEWBOX}
+      width={size}
+      height={size}
+      fill={brand.color}
+      className={className}
+      aria-hidden="true"
+    >
+      <path d={brand.path} />
+    </svg>
+  );
+}
+
+/** Extension-keyed brand mapping: file types whose icon is an official language logo. */
+const EXTENSION_BRANDS: ReadonlyArray<readonly [exts: readonly string[], brand: BrandIconName]> = [
+  [['tsx', 'jsx'], 'React'],
+  [['ts', 'mts', 'cts'], 'Typescript'],
+  [['js', 'cjs', 'mjs'], 'Javascript'],
+  [['go'], 'Go'],
+  [['py', 'pyi'], 'Python'],
+  [['rs'], 'Rust'],
+  [['php'], 'Php'],
+  [['kt', 'kts'], 'Kotlin'],
+  [['swift'], 'Swift'],
+  [['rb'], 'Ruby'],
+  [['java'], 'Openjdk'],
+  [['c', 'h'], 'C'],
+  [['cpp', 'cc', 'cxx', 'hpp', 'hh'], 'Cplusplus'],
+  [['cs'], 'Csharp'],
+  [['zig'], 'Zig'],
+  [['lua'], 'Lua'],
+  [['dart'], 'Dart'],
+  [['ex', 'exs'], 'Elixir'],
+  [['hs'], 'Haskell'],
+  [['scala'], 'Scala'],
+  [['pl', 'pm'], 'Perl'],
+  [['jl'], 'Julia'],
+  [['r'], 'R'],
+  [['vue'], 'Vuedotjs'],
+  [['svelte'], 'Svelte'],
+  [['astro'], 'Astro'],
+];
+
+/** Extension -> brand for the exact-match pass. */
+const BRAND_BY_EXT: ReadonlyMap<string, BrandIconName> = (() => {
+  const map = new Map<string, BrandIconName>();
+  for (const [exts, brand] of EXTENSION_BRANDS) {
+    for (const ext of exts) map.set(ext, brand);
+  }
+  return map;
+})();
+
+export function FileIcon({ name, isFolder, isOpen, size = 14, className = '' }: FileIconProps) {
+  const lowerName = name.toLowerCase();
+
+  if (isFolder) {
+    if (lowerName === 'node_modules') {
+      return <BrandIconSvg name="Npm" size={size} className={className} />;
+    }
+    return isOpen
+      ? <FolderOpen size={size} className={`text-meta ${className}`} />
+      : <Folder size={size} className={`text-meta ${className}`} />;
+  }
+
+  if (lowerName === 'package.json') {
+    return <BrandIconSvg name="Npm" size={size} className={className} />;
+  }
+
+  // Extension pass: brand logos first, keyed by extension.
+  const dot = lowerName.lastIndexOf('.');
+  if (dot >= 0) {
+    const ext = lowerName.slice(dot + 1);
+    const brand = BRAND_BY_EXT.get(ext);
+    if (brand) return <BrandIconSvg name={brand} size={size} className={className} />;
+  }
+
+  if (lowerName.endsWith('.json')) {
+    return <Braces size={size} color="#eab308" className={className} />;
+  }
+  if (lowerName.endsWith('.css') || lowerName.endsWith('.scss')) {
+    return <BrandIconSvg name="Css" size={size} className={className} />;
+  }
+  if (lowerName.endsWith('.html')) {
+    return <BrandIconSvg name="Html5" size={size} className={className} />;
+  }
+  if (lowerName.endsWith('.md') || lowerName.endsWith('.txt')) {
+    return <FileText size={size} className={`text-ink/70 ${className}`} />;
+  }
+  if (lowerName.endsWith('.png') || lowerName.endsWith('.jpg') || lowerName.endsWith('.jpeg') || lowerName.endsWith('.svg') || lowerName.endsWith('.ico') || lowerName.endsWith('.webp')) {
+    return <FileImage size={size} color="#c084fc" className={className} />;
+  }
+  if (lowerName.endsWith('.sh') || lowerName.endsWith('.bash')) {
+    return <BrandIconSvg name="Gnubash" size={size} className={className} />;
+  }
+  if (lowerName.startsWith('.env') || lowerName.startsWith('.') || lowerName.includes('config')) {
+    return <FileCog size={size} className={`text-ink/60 ${className}`} />;
+  }
+  if (lowerName.endsWith('.zip') || lowerName.endsWith('.tar.gz')) {
+    return <FileArchive size={size} className={`text-warning ${className}`} />;
+  }
+
+  return <File size={size} className={`text-ink/60 ${className}`} />;
+}

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

@@ -0,0 +1,80 @@
+import { lazy } from 'preact/compat';
+import type { ComponentType } from 'preact/compat';
+import type { RightPanelType } from '@/shared/lib/workspace/right-panels';
+
+/**
+ * Lazy boundaries for the workspace developer panels. Shared by the desktop
+ * WorkspacePanels and the mobile RightSidebar so each panel bundle is fetched
+ * only when its tab is actually rendered, and so no module is both statically
+ * and dynamically imported (which defeats chunk splitting).
+ */
+export const LazyFileExplorer = lazy(() =>
+  import('@/client/components/workspace/file-explorer/index').then((m) => ({ default: m.FileExplorer }))
+);
+export const LazySearchPanel = lazy(() =>
+  import('@/client/components/workspace/SearchPanel').then((m) => ({ default: m.SearchPanel }))
+);
+export const LazyGitPanel = lazy(() =>
+  import('@/client/components/workspace/git-panel/index').then((m) => ({ default: m.GitPanel }))
+);
+export const LazyTerminalPanel = lazy(() =>
+  import('@/client/components/workspace/terminal-panel/index').then((m) => ({ default: m.TerminalPanel }))
+);
+export const LazyContextPanel = lazy(() =>
+  import('@/client/components/workspace/context-panel/index').then((m) => ({ default: m.ContextPanel }))
+);
+export const LazyBrowserPanel = lazy(() =>
+  import('@/client/components/workspace/browser-panel/index').then((m) => ({ default: m.BrowserPanel }))
+);
+export const LazyUserBrowserPanel = lazy(() =>
+  import('@/client/components/workspace/user-browser-panel/index').then((m) => ({ default: m.UserBrowserPanel }))
+);
+export const LazyUsagePanel = lazy(() =>
+  import('@/client/components/workspace/usage-panel/index').then((m) => ({ default: m.UsagePanel }))
+);
+
+/**
+ * One cached lazy per right-panel view for the desktop layout.
+ *
+ * `Lazy*` remounts (fresh Suspense, state reset) every time the user switches
+ * the right panel back to a view. The workspace panels are stateful — file
+ * tree expansion, scroll, terminal buffer, search results — so remounting on
+ * every switch throws that work away and forces a re-fetch/re-render. This
+ * cache keeps each view mounted (hidden with CSS) so switching panels is
+ * instant and a view's state survives while the layout lives.
+ *
+ * The mobile right sidebar does NOT use these: its tabs mount lazily on
+ * demand and close the whole drawer, so caching per-tab state across visits
+ * would hold hidden panels on a memory-tight phone for no benefit.
+ *
+ * The cache is layout-scoped (a WeakMap, module-level): when the desktop
+ * layout unmounts, its entries become collectable.
+ */
+const viewCache = new WeakMap<object, Record<RightPanelType, ComponentType<Record<string, unknown>>>>();
+
+export function getDesktopPanelView(scope: object, view: RightPanelType): ComponentType<Record<string, unknown>> {
+  let slots = viewCache.get(scope);
+  if (!slots) {
+    slots = {} as Record<RightPanelType, ComponentType<Record<string, unknown>>>;
+    viewCache.set(scope, slots);
+  }
+  if (!slots[view]) {
+    const Source =
+      view === 'files' ? LazyFileExplorer
+      : view === 'search' ? LazySearchPanel
+      : view === 'git' ? LazyGitPanel
+      : view === 'terminal' ? LazyTerminalPanel
+      : view === 'context' ? LazyContextPanel
+      : view === 'user-browser' ? LazyUserBrowserPanel
+      : view === 'browser' ? LazyBrowserPanel
+      : LazyUsagePanel;
+    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" />
+      </div>
+    );
+    Cached.displayName = `CachedView(${view})`;
+    slots[view] = Cached;
+  }
+  return slots[view];
+}

package/src/client/components/common/session-state-provider/index.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { ReactNode } from 'preact/compat';
+import { flushSession, loadSession, markSessionReady, migrateSessionState, recordSessionOpen } from '@/shared/lib/workspace/session-state/store';
+import { SessionStateContext } from '@/client/hooks/workspace/session-state/context';
+
+/**
+ * Mounts once above the workspace panels and drives the per-session UI state
+ * lifecycle: load the stored blob when the session changes, flush pending
+ * writes before switching, and migrate a pending `new-…` chat's state onto
+ * the real id adopted by a spawn. Consumers read/write through
+ * `useSessionState(key, fallback)`.
+ */
+export function SessionStateProvider({ sessionId, children }: { sessionId: string | null; children: ReactNode }) {
+  const effectiveSessionId = sessionId || '1';
+  const [ready, setReady] = useState(false);
+  const prevSessionIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const prev = prevSessionIdRef.current;
+    prevSessionIdRef.current = effectiveSessionId;
+    if (prev === effectiveSessionId) return;
+    // Every distinct session the user opens is a "last opened" data point —
+    // the picker recency window and the cache TTL both hang off it.
+    recordSessionOpen(effectiveSessionId);
+
+    // Spawn adoption ("new-…" → real UUID): carry the pending state over
+    // instead of loading (nothing is stored under the real id yet).
+    if (prev && prev.startsWith('new-') && !effectiveSessionId.startsWith('new-')) {
+      migrateSessionState(prev, effectiveSessionId);
+      setReady(true);
+      return;
+    }
+
+    if (effectiveSessionId.startsWith('new-')) {
+      // Fresh pending chat: nothing stored yet; ready immediately so the
+      // composer starts empty instead of waiting on a fetch.
+      markSessionReady(effectiveSessionId);
+      setReady(true);
+      return;
+    }
+
+    setReady(false);
+    void flushSession(prev).then(() => loadSession(effectiveSessionId)).then(() => {
+      // The session may have switched again while loading; only surface readiness.
+      if (prevSessionIdRef.current === effectiveSessionId) setReady(true);
+    });
+  }, [effectiveSessionId]);
+
+  const value = useMemo(
+    () => ({ sessionId: effectiveSessionId, ready }),
+    [effectiveSessionId, ready],
+  );
+
+  return <SessionStateContext.Provider value={value}>{children}</SessionStateContext.Provider>;
+}

package/src/client/components/common/sort-menu/index.tsx

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Sort-options list shared by the desktop toolbar dropdown and the mobile
+ * toolbar dropdown. Renders ONLY the header + option rows — each toolbar owns
+ * its own absolutely-positioned container (and, on mobile, the Filter section
+ * that follows), so the two shells stay exactly as they were while the option
+ * list itself has one source of truth.
+ */
+
+import { Check } from 'lucide-preact';
+import type { SessionSortOption } from '@/shared/types';
+import { SORT_LABELS, SORT_OPTIONS } from '@/client/components/common/sort-menu/options';
+
+interface SortMenuProps {
+  variant: 'desktop' | 'mobile';
+  sortOption: SessionSortOption;
+  onSortChange: (opt: SessionSortOption) => void;
+}
+
+export function SortMenu({ variant, sortOption, onSortChange }: SortMenuProps) {
+  if (variant === 'mobile') {
+    return (
+      <>
+        <div className="px-2 py-1 text-[10px] uppercase font-bold text-ink/40 font-mono">Sort Workspaces</div>
+        {SORT_OPTIONS.map(opt => (
+          <button
+            key={opt}
+            type="button"
+            onClick={() => onSortChange(opt)}
+            className={`w-full text-left px-2.5 py-1.5 rounded-lg flex items-center justify-between transition-colors ${
+              sortOption === opt
+                ? 'bg-ink/10 font-semibold text-ink'
+                : 'hover:bg-ink/5 text-ink/80'
+            }`}
+          >
+            <span>{opt.replace('_', ' ')}</span>
+            {sortOption === opt && <Check size={13} className="text-ink" />}
+          </button>
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="px-3 py-1 text-[10px] uppercase font-bold text-ink/40 tracking-wider">Sort Workspaces</div>
+      {SORT_OPTIONS.map(opt => (
+        <div
+          key={opt}
+          className={`px-3 py-1.5 text-xs cursor-pointer flex items-center justify-between ${sortOption === opt ? 'bg-ink/5 text-ink font-medium' : 'text-ink/70 hover:bg-ink/5 hover:text-ink'}`}
+          onClick={() => onSortChange(opt)}
+        >
+          <span>{SORT_LABELS[opt]}</span>
+          {sortOption === opt && <div className="w-1.5 h-1.5 rounded-full bg-ink"></div>}
+        </div>
+      ))}
+    </>
+  );
+}

package/src/client/components/common/sort-menu/options.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { SessionSortOption } from '@/shared/types';
+
+/**
+ * All supported workspace sort options, in menu order. Mirrors the validation
+ * list in @/shared/lib/workspace/sidebar-sort so the menu can never offer an
+ * option the comparator does not understand.
+ */
+export const SORT_OPTIONS: readonly SessionSortOption[] = ['A-Z', 'Z-A', 'LATEST_SESSION', 'LATEST_ADDED'];
+
+/**
+ * Desktop menu labels (title case). The mobile menu renders the raw option
+ * with the underscore replaced, matching its compact monospace style.
+ */
+export const SORT_LABELS: Record<SessionSortOption, string> = {
+  'A-Z': 'A-Z',
+  'Z-A': 'Z-A',
+  LATEST_SESSION: 'Latest Session',
+  LATEST_ADDED: 'Latest Added',
+};

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * 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.
+ */
+
+import type { ViewportMode } from '@/shared/types';
+
+export const VIEWPORT_CLASSES: Record<ViewportMode, string> = {
+  'desktop-16-9': 'w-full max-w-[1280px] aspect-video max-h-full border border-ink/20 rounded-lg shadow-md overflow-hidden my-auto',
+  laptop: 'w-[1024px] max-w-full h-[768px] max-h-full border border-ink/20 rounded-lg shadow-md overflow-hidden my-auto',
+  tablet: 'w-[768px] max-w-full h-[1024px] max-h-full border border-ink/20 rounded-lg shadow-md overflow-hidden my-auto',
+  mobile: 'w-[375px] max-w-full h-[667px] max-h-full border border-ink/20 rounded-xl shadow-md overflow-hidden my-auto',
+  'mobile-lg': 'w-[414px] max-w-full h-[896px] max-h-full border border-ink/20 rounded-xl shadow-md overflow-hidden my-auto',
+  responsive: 'w-full h-full border-0',
+};

package/src/client/components/common/workspace-options-menu/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Workspace options menu body shared by the desktop category header and the
+ * mobile category item: pin/unpin, delete, and the inline delete confirmation.
+ *
+ * Only the body is shared — each sidebar owns its own absolutely-positioned
+ * container (different widths, radii, and padding) and its trigger button, so
+ * the two shells stay pixel-identical while the actions and labels have one
+ * source of truth.
+ */
+
+import { Pin, PinOff, Trash2 } from 'lucide-preact';
+
+interface WorkspaceOptionsMenuProps {
+  variant: 'desktop' | 'mobile';
+  isPinned?: boolean;
+  confirmDelete: boolean;
+  onPin: () => void;
+  onDelete: () => void;
+  onRequestDelete: () => void;
+  onCancelDelete: () => void;
+}
+
+export function WorkspaceOptionsMenu({
+  variant,
+  isPinned = false,
+  confirmDelete,
+  onPin,
+  onDelete,
+  onRequestDelete,
+  onCancelDelete,
+}: WorkspaceOptionsMenuProps) {
+  if (variant === 'mobile') {
+    return confirmDelete ? (
+      <>
+        <div className="px-3 py-2 text-ink/80 font-medium">Delete workspace?</div>
+        <button type="button" onClick={onDelete} className="w-full text-left px-3 py-2 hover:bg-error/10 text-error flex items-center space-x-2">
+          <Trash2 size={13} />
+          <span>Yes, delete</span>
+        </button>
+        <button type="button" onClick={onCancelDelete} className="w-full text-left px-3 py-2 hover:bg-ink/5 text-ink/70">
+          Cancel
+        </button>
+      </>
+    ) : (
+      <>
+        <button type="button" onClick={onPin} className="w-full text-left px-3 py-2 hover:bg-ink/5 text-ink/80 flex items-center space-x-2">
+          {isPinned ? <PinOff size={13} /> : <Pin size={13} />}
+          <span>{isPinned ? 'Unpin Workspace' : 'Pin Workspace'}</span>
+        </button>
+        <button type="button" onClick={onRequestDelete} className="w-full text-left px-3 py-2 hover:bg-error/10 text-error flex items-center space-x-2">
+          <Trash2 size={13} />
+          <span>Delete Workspace</span>
+        </button>
+      </>
+    );
+  }
+
+  return confirmDelete ? (
+    <>
+      <div className="px-3 py-1.5 text-xs text-ink/80 font-medium">Delete workspace?</div>
+      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error" onClick={onDelete}>
+        <Trash2 size={12} /><span>Yes, delete</span>
+      </div>
+      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/70" onClick={onCancelDelete}>
+        <span>Cancel</span>
+      </div>
+    </>
+  ) : (
+    <>
+      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-ink/80" onClick={onPin}>
+        {isPinned ? <PinOff size={12} /> : <Pin size={12} />}
+        <span>{isPinned ? 'Unpin Workspace' : 'Pin Workspace'}</span>
+      </div>
+      <div className="px-3 py-1.5 hover:bg-ink/5 cursor-pointer flex items-center space-x-2 text-error" onClick={onRequestDelete}>
+        <Trash2 size={12} /><span>Delete Workspace</span>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,95 @@
+import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal } from 'lucide-preact';
+import { useGitStatus } from '@/client/hooks/workspace/git-status';
+import { GIT_STATUS_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
+import type { RightPanelType } from '@/shared/lib/workspace/right-panels';
+
+interface RightActivityBarProps {
+  activePanel: RightPanelType;
+  onChangePanel: (panel: RightPanelType) => void;
+  isPanelOpen: boolean;
+  hasActiveContext: boolean;
+  activeProjectPath?: string | null;
+  refreshKey: number;
+}
+
+export function RightActivityBar({ activePanel, onChangePanel, isPanelOpen, hasActiveContext, activeProjectPath, refreshKey }: RightActivityBarProps) {
+  const { changes } = useGitStatus(activeProjectPath ?? undefined, '.', refreshKey, hasActiveContext, GIT_STATUS_POLL_MS);
+  const hasGitChanges = changes.length > 0;
+  const getBtnClass = (panel: RightPanelType) => {
+    const base = "relative w-full h-10 flex items-center justify-center transition-colors border-l-2";
+    const isActive = isPanelOpen && activePanel === panel;
+    return `${base} ${isActive ? 'text-ink border-ink bg-ink/5' : 'text-ink/40 border-transparent hover:text-ink hover:bg-ink/5'}`;
+  };
+
+  return (
+    <nav className="w-12 flex-shrink-0 border-l border-ink/10 bg-paper flex flex-col items-center py-3 space-y-2 z-10">
+      {/* Top Icons */}
+      <div className="flex flex-col items-center space-y-1 w-full">
+        <button
+          className={getBtnClass('context')}
+          onClick={() => onChangePanel('context')}
+          title="Context & Telemetry"
+        >
+          <Layers size={16} />
+        </button>
+        <button
+          className={getBtnClass('files')}
+          onClick={() => onChangePanel('files')}
+          title="Files"
+        >
+          <Files size={16} />
+        </button>
+        <button
+          className={getBtnClass('search')}
+          onClick={() => onChangePanel('search')}
+          title="Search"
+        >
+          <Search size={16} />
+        </button>
+        <button 
+          className={getBtnClass('git')}
+          onClick={() => onChangePanel('git')}
+          title="Source Control"
+        >
+          <GitBranch size={16} />
+          {hasGitChanges && (
+            <span
+              className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-info"
+              title="Ada perubahan git"
+            />
+          )}
+        </button>
+        <button
+          className={getBtnClass('terminal')}
+          onClick={() => onChangePanel('terminal')}
+          title="Terminal (Bun)"
+        >
+          <Terminal size={16} />
+        </button>
+        <button
+          className={getBtnClass('user-browser')}
+          onClick={() => onChangePanel('user-browser')}
+          title="Browser (Anda)"
+        >
+          <Globe size={16} />
+        </button>
+        <button
+          className={getBtnClass('browser')}
+          onClick={() => onChangePanel('browser')}
+          title="Browser Agent"
+        >
+          <Bot size={16} />
+        </button>
+        <button
+          className={getBtnClass('usage')}
+          onClick={() => onChangePanel('usage')}
+          title="Usage"
+        >
+          <BarChart3 size={16} />
+        </button>
+      </div>
+      
+      <div className="flex-1" />
+    </nav>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { Separator } from '@/client/components/layout/desktop-layout/resizer';
+
+/** Hairline drag handle shared by both resizable groups in the desktop layout. */
+export function ResizeHandle() {
+  return (
+    <Separator className="relative w-1 outline-none group flex justify-center cursor-col-resize z-10">
+      <div className="h-full w-[1px] bg-ink/10 group-hover:bg-ink/40 group-active:bg-ink/60 group-hover:w-0.5 transition-all" />
+    </Separator>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { LayoutTemplate, MoreHorizontal, PanelRight, PanelRightClose, Smartphone } from 'lucide-preact';
+import { PWAInstallButton } from '@/client/components/common/PWAInstallButton';
+import { StreamStatusDot } from '@/client/components/common/StreamStatusDot';
+import type { AgentStreamStatus } from '@/shared/lib/chat/omp/status';
+
+interface TopNavbarProps {
+  sessionTitle: string | null;
+  showLeftPanel: boolean;
+  showEditor: boolean;
+  showRightPanel: boolean;
+  /** Live agent event stream status; the indicator is WebSocket-only. */
+  streamStatus?: AgentStreamStatus;
+  onSwitchToMobile?: () => void;
+  onToggleEditor: () => void;
+  onToggleRightPanel: () => void;
+}
+
+export function TopNavbar({
+  sessionTitle,
+  showLeftPanel,
+  showEditor,
+  showRightPanel,
+  streamStatus,
+  onSwitchToMobile,
+  onToggleEditor,
+  onToggleRightPanel,
+}: TopNavbarProps) {
+  return (
+    <header 
+      className="h-12 flex-shrink-0 border-b border-ink/10 bg-paper flex items-center justify-between pr-4 z-20 titlebar-drag-region select-none"
+      style={{
+        paddingLeft: !showLeftPanel ? 'max(1rem, env(titlebar-area-x, 0px))' : undefined,
+        paddingRight: 'max(1rem, calc(100vw - env(titlebar-area-width, 100vw)))',
+      }}
+    >
+      <div className="flex items-center space-x-2 px-4 min-w-0">
+        {!showLeftPanel && (
+          <>
+            <span className="font-bold text-sm tracking-tight hidden sm:flex items-center flex-shrink-0">
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500 font-extrabold text-[15px] tracking-tighter">OMP</span>
+              <span className="ml-[1px]">Chamber</span>
+            </span>
+            {sessionTitle && (
+              <span className="text-ink/30 text-xs select-none flex-shrink-0">/</span>
+            )}
+          </>
+        )}
+        {sessionTitle && (
+          <div className="flex items-center space-x-2 titlebar-no-drag">
+            <span className="font-bold text-sm tracking-tight hidden sm:flex items-center">
+              <span className="font-semibold text-xs text-ink truncate">
+                {sessionTitle.charAt(0).toUpperCase() + sessionTitle.slice(1)}
+              </span>
+            </span>
+            <MoreHorizontal size={14} className="text-ink/40 hover:text-ink cursor-pointer flex-shrink-0" />
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center space-x-3 titlebar-no-drag">
+        <div className="flex items-center space-x-1">
+          <StreamStatusDot status={streamStatus} />
+          {onSwitchToMobile && (
+            <button
+              type="button"
+              onClick={onSwitchToMobile}
+              className="p-1.5 rounded hover:bg-ink/10 transition-colors text-ink/60 hover:text-ink cursor-pointer"
+              title="Switch to Mobile View"
+            >
+              <Smartphone size={16} />
+            </button>
+          )}
+          <PWAInstallButton />
+          <button
+            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"
+          >
+            <LayoutTemplate size={16} />
+          </button>
+          <button
+            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"
+          >
+            {showRightPanel ? <PanelRightClose size={16} /> : <PanelRight size={16} />}
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}