ompchamber 0.3.0

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

@@ -0,0 +1,98 @@
+import { AlertCircle, RefreshCw } from 'lucide-preact';
+import { ProviderDetail } from '@/client/components/settings/categories/usage-settings/ProviderDetail';
+import { buildProviders, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { formatDateTime } from '@/client/components/settings/categories/usage-settings/format';
+import { ProviderSelect } from '@/client/components/workspace/usage-panel/ProviderSelect';
+import { useUsageReport } from '@/client/hooks/settings/useUsageReport';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { usePanelRefresh } from '@/client/hooks/workspace/panel-refresh';
+
+interface UsagePanelProps {
+  className?: string;
+  /** False while the panel is hidden (desktop right panel / mobile tab):
+   *  pauses the auto-refresh poll. */
+  active?: boolean;
+}
+
+/** Right-panel Usage: the selected provider's balance/quota via a dropdown. */
+export function UsagePanel({ className = '', active = true }: UsagePanelProps) {
+  const { report, isLoading, error, reload } = useUsageReport();
+  const [selectedProviderId, setSelectedProviderId] = useSessionState<UsageProviderId>(
+    'usage.selectedProviderId',
+    'kenari',
+  );
+
+  // Auto refresh: keep balance/quota current without a manual reload. Silent —
+  // the spinner stays reserved for the user's own refresh button. Polls only
+  // while the panel is actually visible.
+  usePanelRefresh(() => reload({ silent: true }), active);
+
+  if (error && !report) {
+    return (
+      <div className={`flex h-full w-full flex-col items-center justify-center gap-2 p-8 text-center text-xs ${className}`}>
+        <AlertCircle size={16} className="text-error" />
+        <p className="text-error text-xs">{error}</p>
+        <button
+          type="button"
+          onClick={() => reload()}
+          className="text-[11px] font-semibold text-ink/70 hover:text-ink underline underline-offset-2"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  }
+
+  if (!report) {
+    return (
+      <div className={`flex h-full w-full items-center justify-center text-ink/40 text-xs ${className}`}>
+        Loading provider usage...
+      </div>
+    );
+  }
+
+  const providers = buildProviders(report);
+
+  return (
+    <div className={`flex h-full w-full min-w-0 min-h-0 flex-col overflow-hidden bg-paper text-xs text-ink ${className}`}>
+      <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between gap-3 flex-shrink-0 min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <h2 className="text-xs font-semibold text-ink uppercase tracking-wider">Usage</h2>
+          <span className="text-[11px] text-ink/50 truncate">
+            Updated {formatDateTime(report.generatedAt)}
+          </span>
+          {report.isMock && (
+            <span className="text-[10px] font-mono uppercase tracking-wider bg-ink/5 border border-ink/15 rounded px-1.5 py-0.5 text-ink/60">
+              Mock
+            </span>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={() => reload()}
+          disabled={isLoading}
+          className="p-1.5 bg-paper border border-ink/15 rounded-md hover:bg-ink/5 text-ink/80 transition-colors disabled:opacity-50 flex-shrink-0"
+          title="Refresh usage"
+        >
+          <RefreshCw size={12} className={isLoading ? 'animate-spin text-ink' : ''} />
+        </button>
+      </div>
+
+      <div className="px-3.5 py-2.5 border-b border-ink/10 flex-shrink-0 min-w-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-[11px] font-semibold text-ink/60 flex-shrink-0">Provider</span>
+          <ProviderSelect
+            providers={providers}
+            value={selectedProviderId}
+            onChange={setSelectedProviderId}
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 min-w-0 min-h-0 w-full overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-3.5 space-y-4">
+        {error && <p className="text-error text-xs">{error}</p>}
+        <ProviderDetail providerId={selectedProviderId} report={report} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { ArrowLeft, ArrowRight, Globe, RefreshCw } from 'lucide-preact';
+import { BrowserToolbar } from '@/client/components/workspace/browser-toolbar/index';
+import type { ViewportMode } from '@/shared/types';
+
+interface UserBrowserAddressBarProps {
+  url: string;
+  input: string;
+  loading: boolean;
+  error?: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  viewportMode: ViewportMode;
+  zoomLevel: number;
+  onInputChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  onBack: () => void;
+  onForward: () => void;
+  onReload: () => void;
+  onOpenExternal: () => void;
+  onIncludeInChat: () => void;
+  onChangeViewport: (mode: ViewportMode) => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onResetZoom: () => void;
+  onSetZoom: (zoom: number) => void;
+}
+
+type UserBrowserPhase = 'idle' | 'loading' | 'ready';
+
+const PHASE_LABEL: Record<UserBrowserPhase, string> = {
+  idle: 'Kosong',
+  loading: 'Memuat',
+  ready: 'Siap',
+};
+
+const NAV_BUTTON =
+  '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';
+
+/** Toolbar for the user's iframe browser: status, history, address, and display controls. */
+export function UserBrowserAddressBar({
+  url,
+  input,
+  loading,
+  error,
+  canGoBack,
+  canGoForward,
+  viewportMode,
+  zoomLevel,
+  onInputChange,
+  onSubmit,
+  onBack,
+  onForward,
+  onReload,
+  onOpenExternal,
+  onIncludeInChat,
+  onChangeViewport,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onSetZoom,
+}: UserBrowserAddressBarProps) {
+  const followedRef = useRef<string | undefined>(undefined);
+
+  // Mirror the loaded URL into the field, but never overwrite active typing.
+  useEffect(() => {
+    if (followedRef.current === url) return;
+    followedRef.current = url;
+    if (url) onInputChange(url);
+  }, [url, onInputChange]);
+
+  const phase: UserBrowserPhase = !url ? 'idle' : loading ? 'loading' : 'ready';
+  const dotClass =
+    phase === 'ready' ? 'bg-success animate-pulse' : phase === 'loading' ? 'bg-ink/40 animate-pulse' : 'bg-ink/25';
+
+  const navControls = (
+    <div className="flex items-center bg-canvas border border-ink/10 rounded-md p-0.5 space-x-0.5 flex-shrink-0">
+      <button type="button" onClick={onBack} disabled={!canGoBack} aria-label="Kembali" title="Kembali" className={NAV_BUTTON}>
+        <ArrowLeft size={12} />
+      </button>
+      <button type="button" onClick={onForward} disabled={!canGoForward} aria-label="Maju" title="Maju" className={NAV_BUTTON}>
+        <ArrowRight size={12} />
+      </button>
+      <button type="button" onClick={onReload} disabled={!url} aria-label="Muat ulang" title="Muat ulang" className={NAV_BUTTON}>
+        <RefreshCw size={12} className={loading ? 'animate-spin' : undefined} />
+      </button>
+    </div>
+  );
+
+  return (
+    <BrowserToolbar
+      url={url}
+      statusDotClass={dotClass}
+      statusLabel={PHASE_LABEL[phase]}
+      viewportMode={viewportMode}
+      zoomLevel={zoomLevel}
+      onChangeViewport={onChangeViewport}
+      onZoomIn={onZoomIn}
+      onZoomOut={onZoomOut}
+      onResetZoom={onResetZoom}
+      onSetZoom={onSetZoom}
+      onIncludeInChat={onIncludeInChat}
+      onOpenExternal={onOpenExternal}
+      openExternalLabel="Buka di tab baru"
+      openExternalTitle="Buka di tab baru (untuk situs yang menolak iframe)"
+    >
+      <div className="flex items-center flex-1 min-w-0 space-x-1.5">
+        {navControls}
+        <form
+          className={`flex-1 min-w-0 flex items-center bg-canvas border rounded-md px-2 py-0.5 space-x-1 focus-within:border-ink/40 ${error ? 'border-error' : 'border-ink/15'}`}
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSubmit(input);
+          }}
+        >
+          <Globe size={12} className="text-ink/40 flex-shrink-0" />
+          <input
+            type="text"
+            value={input}
+            onChange={(event) => onInputChange(event.currentTarget.value)}
+            placeholder="Ketik alamat (mis. localhost:5173) lalu Enter…"
+            aria-label="Alamat browser pengguna"
+            aria-invalid={error !== undefined && error !== null}
+            title={error ?? undefined}
+            spellcheck={false}
+            autoComplete="off"
+            className={`w-full min-w-0 bg-transparent outline-none font-mono text-[11px] placeholder:text-ink/30 ${error ? 'text-error' : 'text-ink/90'}`}
+          />
+        </form>
+      </div>
+    </BrowserToolbar>
+  );
+}
+

package/src/client/components/workspace/user-browser-panel/Frame.tsx

@@ -0,0 +1,72 @@
+import { Globe, Loader2 } from 'lucide-preact';
+import { VIEWPORT_CLASSES } from '@/client/components/common/viewport';
+import type { ViewportMode } from '@/shared/types';
+
+interface UserBrowserFrameProps {
+  url: string;
+  frameKey: number;
+  loading: boolean;
+  viewportMode: ViewportMode;
+  zoomLevel: number;
+  onLoad: () => void;
+  /** False while the panel is hidden: no iframe is mounted, so a background
+   *  page cannot keep loading scripts or animating behind the panel. */
+  active?: boolean;
+}
+
+const ALLOW = 'clipboard-read; clipboard-write; fullscreen';
+
+/**
+ * The user's browsing surface: a plain iframe. Interaction (scroll, click,
+ * typing, cookies, logins) is the browser's own, so this costs nothing to keep
+ * mounted. Cross-origin pages cannot read this app, and vice versa.
+ */
+export function UserBrowserFrame({ url, frameKey, loading, viewportMode, zoomLevel, onLoad, active = true }: UserBrowserFrameProps) {
+  if (!active) return null;
+  if (!url) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center p-6 text-center select-none">
+        <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">
+          <Globe size={22} />
+        </div>
+        <h3 className="text-sm font-semibold text-ink mb-1">Browser Anda</h3>
+        <p className="text-xs text-ink/60 max-w-sm">
+          Ketik alamat di atas lalu Enter. Halaman dimuat langsung di panel ini.
+        </p>
+        <p className="text-[11px] text-ink/45 max-w-sm mt-2">
+          Sebagian situs (Google, GitHub) menolak ditampilkan dalam iframe — pakai tombol buka di tab baru.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 min-h-0 relative flex items-center justify-center p-2 overflow-auto bg-canvas/60">
+      {loading ? (
+        <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
+          <div className="flex items-center space-x-2 px-3 py-1.5 rounded-md bg-paper border border-ink/15">
+            <Loader2 size={13} className="animate-spin text-ink/50" />
+            <span className="text-[11px] font-mono text-ink/60">Memuat…</span>
+          </div>
+        </div>
+      ) : null}
+      <div
+        className={`relative flex flex-col bg-white ${VIEWPORT_CLASSES[viewportMode]} transition-all duration-200`}
+        style={{
+          zoom: zoomLevel !== 100 ? `${zoomLevel}%` : undefined,
+          transformOrigin: 'top center',
+        }}
+      >
+        <iframe
+          key={frameKey}
+          src={url}
+          title="Browser pengguna"
+          onLoad={onLoad}
+          referrerPolicy="no-referrer"
+          allow={ALLOW}
+          className="w-full h-full bg-white border-0"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+import { useCallback } from 'preact/hooks';
+import { UserBrowserAddressBar } from '@/client/components/workspace/user-browser-panel/AddressBar';
+import { UserBrowserFrame } from '@/client/components/workspace/user-browser-panel/Frame';
+import { useUserBrowser } from '@/client/hooks/browser/use-user-browser';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { emitBrowserPageContext } from '@/shared/lib/browser/page-context';
+import type { ViewportMode } from '@/shared/types';
+
+interface UserBrowserPanelProps {
+  className?: string;
+  /** False while the panel is hidden: pauses the iframe's live loading. */
+  active?: boolean;
+}
+
+/**
+ * The user's own browser: a plain iframe, so scrolling, clicking, typing, and
+ * logins are the browser's native behaviour and cost nothing on our side.
+ *
+ * It is private to the user — the omp agent has no handle to this frame. Sites
+ * that forbid embedding (Google, GitHub) show an empty frame; the toolbar's
+ * open-in-new-tab action is the escape hatch for those.
+ */
+export function UserBrowserPanel({ className = '', active = true }: UserBrowserPanelProps) {
+  const [viewportMode, setViewportMode] = useSessionState<ViewportMode>('userBrowser.viewportMode', 'responsive');
+  const [zoomLevel, setZoomLevel] = useSessionState<number>('userBrowser.zoomLevel', 100);
+  const {
+    url,
+    input,
+    setInput,
+    frameKey,
+    loading,
+    error,
+    canGoBack,
+    canGoForward,
+    submit,
+    goBack,
+    goForward,
+    reload,
+    markLoaded,
+  } = useUserBrowser();
+
+  const handleOpenExternal = useCallback(() => {
+    if (!url) return;
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }, [url]);
+
+  const handleIncludeInChat = useCallback(() => {
+    if (!url) return;
+    emitBrowserPageContext({ url });
+  }, [url]);
+
+  return (
+    <div className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}>
+      <UserBrowserAddressBar
+        url={url}
+        input={input}
+        loading={loading}
+        error={error}
+        canGoBack={canGoBack}
+        canGoForward={canGoForward}
+        viewportMode={viewportMode}
+        zoomLevel={zoomLevel}
+        onInputChange={setInput}
+        onSubmit={submit}
+        onBack={goBack}
+        onForward={goForward}
+        onReload={reload}
+        onOpenExternal={handleOpenExternal}
+        onIncludeInChat={handleIncludeInChat}
+        onChangeViewport={setViewportMode}
+        onZoomIn={() => setZoomLevel((prev) => Math.min(200, prev + 10))}
+        onZoomOut={() => setZoomLevel((prev) => Math.max(50, prev - 10))}
+        onResetZoom={() => setZoomLevel(100)}
+        onSetZoom={setZoomLevel}
+      />
+      <UserBrowserFrame
+        url={url}
+        frameKey={frameKey}
+        loading={loading}
+        viewportMode={viewportMode}
+        zoomLevel={zoomLevel}
+        onLoad={markLoaded}
+        active={active}
+      />
+    </div>
+  );
+}

package/src/client/data/agent-data/builtin.ts

@@ -0,0 +1,31 @@
+import type { AgentItem } from '@/shared/types';
+
+export const builtinAgents: AgentItem[] = [
+  // BUILT-IN AGENTS
+  {
+    id: 'agent-explore',
+    name: 'explore',
+    description: 'Contextual grep for codebases. Locates keywords, definitions, and code structures.',
+    scope: 'system',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are an expert exploratory assistant designed to quickly search, grep, and analyze codebases without modifying files. Report precise file paths and line numbers.`,
+    isBuiltIn: true,
+  },
+  {
+    id: 'agent-general',
+    name: 'general',
+    description: 'General-purpose agent untuk multi-turn development, edits, and refactoring.',
+    scope: 'system',
+    mode: 'all',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are a general-purpose programming assistant. Solve tasks concisely, edit code surgically, and preserve formatting conventions.`,
+    isBuiltIn: true,
+  },
+];

package/src/client/data/agent-data/index.ts

@@ -0,0 +1,10 @@
+import type { AgentItem } from '@/shared/types';
+import { builtinAgents } from '@/client/data/agent-data/builtin';
+import { orchestratorAgents } from '@/client/data/agent-data/orchestrator';
+import { specialistAgents } from '@/client/data/agent-data/specialist';
+
+export const DEFAULT_AGENTS_LIST: AgentItem[] = [
+  ...builtinAgents,
+  ...orchestratorAgents,
+  ...specialistAgents,
+];

package/src/client/data/agent-data/orchestrator.ts

@@ -0,0 +1,113 @@
+import type { AgentItem } from '@/shared/types';
+
+export const orchestratorAgents: AgentItem[] = [
+  // ORCHESTRATOR / PLANNING AGENTS
+  {
+    id: 'agent-sisyphus',
+    name: 'Sisyphus - ultraworker',
+    description: 'Powerful AI orchestrator. Plans, coordinates subagents, and drives feature implementations.',
+    scope: 'user',
+    mode: 'primary',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are Sisyphus, an elite autonomous software orchestrator. Analyze the whole problem, formulate a phased plan, and lead execution with zero regression.`,
+  },
+  {
+    id: 'agent-prometheus',
+    name: 'Prometheus - Plan Builder',
+    description: 'Planning and analysis without changes. Outlines architecture and verification gates.',
+    scope: 'user',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are Prometheus. Produce detailed, step-by-step engineering blueprints. Never apply code modifications directly.`,
+  },
+  {
+    id: 'agent-atlas',
+    name: 'Atlas - Plan Executor',
+    description: 'Orchestrates work via task() to subagents, executes stages sequentially.',
+    scope: 'user',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are Atlas. You receive architectural blueprints and drive execution across subagents, tracking completion at each milestone.`,
+  },
+  {
+    id: 'agent-metis',
+    name: 'Metis - Plan Consultant',
+    description: 'Pre-planning consultant that analyzes edge cases, prerequisites, and risks.',
+    scope: 'user',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are Metis. You identify hidden blockers, security concerns, race conditions, and edge cases prior to implementation.`,
+  },
+  {
+    id: 'agent-momus',
+    name: 'Momus - Plan Critic',
+    description: 'Expert reviewer for evaluating work, code consistency, and architecture.',
+    scope: 'user',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are Momus, a rigorous plan and code critic. Scrutinize proposals and output candid, prioritized critiques.`,
+  },
+  {
+    id: 'agent-sisyphus-jr',
+    name: 'Sisyphus-Junior',
+    description: 'Focused task executor. Same discipline as Sisyphus but scoped to atomic modules.',
+    scope: 'user',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are Sisyphus-Junior. You focus on single, atomic implementation tasks and report back cleanly to parent orchestrators.`,
+  },
+  {
+    id: 'agent-architect',
+    name: 'architect',
+    description: 'System architect untuk design, planning, dan architectural blueprints.',
+    scope: 'user',
+    mode: 'all',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are the lead Software Architect. You define modular boundaries, type contracts, and scalable design patterns.`,
+  },
+  {
+    id: 'agent-code-reviewer',
+    name: 'code-reviewer',
+    description: 'Reviews code untuk best practices, potential bugs, syntax correctness, dan tests.',
+    scope: 'user',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are a strict Code Reviewer. Check for logic regressions, accessibility, type safety, and clean code style.`,
+  },
+  {
+    id: 'agent-coder',
+    name: 'coder',
+    description: 'You are **Coder**, the primary developer agent for rapid writing and debugging.',
+    scope: 'user',
+    mode: 'primary',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: `You are Coder. Write performant, elegant, and clean code according to project guidelines and modern TypeScript best practices.`,
+  },
+];