ompchamber 0.5.0 → 0.7.0

package/src/cli/lib/runtime.js

@@ -1,111 +1,96 @@
-// Runtime helpers for the OMPChamber CLI: registry persistence, process
-// liveness, server entry resolution, health probing and detached spawning.
-// Bun-native file APIs are used wherever Bun ships them; node:fs remains for
-// sync directory/metadata ops and 0o600 file creation (Bun.write ignores mode).
+// Runtime helpers for the OMPChamber CLI: instance discovery, process identity,
+// server entry resolution, health probing and detached spawning.
+//
+// The instance record is written by the server that owns the port (see
+// src/server/lib/lifecycle/instance.ts), not by the CLI that spawned it, so a
+// server started by `bun run dev` or by `--foreground` is as discoverable as a
+// detached one. Discovery combines that record with a live `/api/health` probe:
+// the probe covers servers started outside the CLI, the record covers servers
+// that are alive but deaf (starting up, hung).
 
 import fs from 'node:fs';
 
-import { getLogFilePath, getRegistryPath, ensureDataDirs, getRunDir } from '@/cli/lib/paths.js';
+import { ensureDataDirs, getLogFilePath } from '@/cli/lib/paths.js';
 import { killChildTree, STOP_TIMEOUT_MS } from '@/cli/lib/process-lifecycle.js';
+import { getProcessState, isProcessAlive } from '@/server/lib/lifecycle/identity';
+import { launchModeArg } from '@/server/lib/lifecycle/launch-mode';
+import { listInstanceRecords, readInstanceRecord, removeInstanceRecord } from '@/server/lib/lifecycle/instance';
+import { fetchHealth, probeHost } from '@/server/lib/lifecycle/probe';
 import { joinPath, homeDir } from '@/cli/lib/path-utils.js';
 
 const HEALTH_INTERVAL_MS = 500;
 const HEALTH_TIMEOUT_MS = 30_000;
 
 /**
- * Read and parse the registry entry for `port`. Returns null on any error.
+ * CLI shape of a live instance, so records and probed servers print the same.
  */
-export async function readRegistry(port) {
-  try {
-    const parsed = await Bun.file(getRegistryPath(port)).json();
-    return parsed && typeof parsed === 'object' ? parsed : null;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Read every `<port>.json` registry entry in the run directory.
- */
-export async function listRegistries() {
-  try {
-    const dir = getRunDir();
-    const entries = [];
-    for (const file of await fs.promises.readdir(dir)) {
-      if (!/^\d+\.json$/.test(file)) continue;
-      try {
-        const parsed = await Bun.file(joinPath(dir, file)).json();
-        if (parsed && typeof parsed === 'object') entries.push(parsed);
-      } catch {
-        // Skip unreadable or corrupt registry files.
-      }
-    }
-    return entries;
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Atomically write a registry entry (tmp file + rename) with owner-only perms.
- */
-export function writeRegistry(entry) {
-  if (!entry || entry.port === undefined || entry.port === null) {
-    throw new Error('writeRegistry requires an entry with a port');
-  }
-  ensureDataDirs();
-  const target = getRegistryPath(entry.port);
-  const tmp = `${target}.${process.pid}.tmp`;
-  fs.writeFileSync(tmp, JSON.stringify(entry, null, 2), { mode: 0o600 });
-  fs.renameSync(tmp, target);
-  return target;
+function toLiveInstance({ pid, port, host, mode, launchMode, startedAt, source }) {
+  const resolvedHost = host || 'localhost';
+  return {
+    pid,
+    port,
+    host: resolvedHost,
+    mode: mode ?? 'unknown',
+    launchMode: launchMode ?? 'unknown',
+    startedAt,
+    source: source ?? 'registry',
+    logFile: getLogFilePath(port),
+    url: `http://${probeHost(resolvedHost)}:${port}`,
+  };
 }
 
 /**
- * Remove a registry entry. Never throws.
+ * A recorded PID counts as the instance only while it is alive *and* still
+ * identifiable: a recycled PID must not resurrect a dead instance. `unknown`
+ * (identity unreadable on this platform) is accepted so Windows keeps working.
  */
-export async function removeRegistry(port) {
-  try {
-    await fs.promises.rm(getRegistryPath(port), { force: true });
-  } catch {
-    // Nothing to do: the registry is best-effort state.
-  }
+function isRecordLive(record) {
+  if (!record) return false;
+  return isProcessAlive(record.pid) && getProcessState(record.pid) !== 'mismatched';
 }
 
 /**
- * Liveness-only check for a PID. Never throws.
+ * Every recorded instance whose process is still alive. Records left behind by
+ * a killed server (SIGKILL skips its cleanup handler) are pruned here, so a
+ * recycled PID can never be reported as a running instance.
  */
-export function isProcessAlive(pid) {
-  try {
-    process.kill(pid, 0);
-    return true;
-  } catch {
-    return false;
+export async function listLiveInstances() {
+  const live = [];
+  for (const record of listInstanceRecords()) {
+    if (isRecordLive(record)) live.push(toLiveInstance(record));
+    else removeInstanceRecord(record.port);
   }
+  // Directory order is filesystem-dependent; a port-ordered report is stable
+  // across runs and keeps multi-instance output readable.
+  live.sort((a, b) => a.port - b.port);
+  return live;
 }
 
 /**
- * Registry entry whose recorded PID is alive. With no port, returns the first
- * live instance; otherwise null.
+ * The live instance on `port`, or the first live instance when no port is
+ * given. Falls back to a health probe for servers that never wrote a record.
  */
 export async function findLiveInstance(port) {
   if (port === null || port === undefined) {
-    const all = await listRegistries();
-    return all.find((entry) => entry && isProcessAlive(Number(entry.pid))) ?? null;
+    const [live] = await listLiveInstances();
+    return live ?? null;
   }
-  const entry = await readRegistry(port);
-  if (entry && isProcessAlive(Number(entry.pid))) return entry;
-  return null;
-}
 
-/**
- * Map a bind host to an address that is actually reachable for probing.
- */
-export function probeHost(host) {
-  if (host === '0.0.0.0' || host === '::' || host === '' || host === null || host === undefined) {
-    return '127.0.0.1';
-  }
-  return host;
+  const record = readInstanceRecord(port);
+  if (isRecordLive(record)) return toLiveInstance(record);
+  if (record) removeInstanceRecord(port);
+
+  const health = await fetchHealth(port, record?.host);
+  if (!health || typeof health.pid !== 'number' || !isProcessAlive(health.pid)) return null;
+  return toLiveInstance({
+    pid: health.pid,
+    port,
+    host: health.host ?? record?.host,
+    mode: health.mode,
+    launchMode: health.launchMode ?? record?.launchMode,
+    startedAt: health.startedAt,
+    source: 'probe',
+  });
 }
 
 function isBun(candidate) {
@@ -147,9 +132,15 @@ export function resolveBunBin() {
  *
  * Bun executes the TypeScript entry directly in both modes, so dev and prod
  * differ only by NODE_ENV — the client bundle in `dist/client` is required by
- * the SSR shell either way.
+ * the SSR shell either way. `--ompchamber-server` is an identity marker: it
+ * makes this process recognizable in `ps` output, which is how a starting
+ * server decides whether a busy port belongs to OMPChamber before signalling
+ * anything. The launch mode rides along as argv (`--launch-mode=`), never as an
+ * environment variable: env is inherited by descendants, so a `bun run dev`
+ * started from an OMPChamber shell would otherwise be labelled `daemon` and
+ * replaced by the next update.
  */
-export function buildServeInvocation({ pkgRoot, mode, port, host }) {
+export function buildServeInvocation({ pkgRoot, mode, port, host, launchMode = 'daemon' }) {
   const entry = joinPath(pkgRoot, 'src', 'server', 'index.ts');
   if (!fs.existsSync(entry)) {
     throw new Error(`Could not locate the server entry at ${entry}.`);
@@ -159,7 +150,7 @@ export function buildServeInvocation({ pkgRoot, mode, port, host }) {
   }
   return {
     file: resolveBunBin(),
-    args: [entry],
+    args: [entry, '--ompchamber-server', launchModeArg(launchMode)],
     env: {
       ...Bun.env,
       NODE_ENV: mode === 'prod' ? 'production' : 'development',
@@ -171,13 +162,17 @@ export function buildServeInvocation({ pkgRoot, mode, port, host }) {
 
 /**
  * Spawn a detached server, stream its output to the per-port log file and
- * persist the registry entry.
+ * return the CLI-facing entry description.
+ *
+ * The instance record is *not* written here: the server writes it once it
+ * actually owns the port, so a spawn that fails (port lost to something else)
+ * cannot leave a record pointing at a process that never served.
  */
-export function spawnDetachedServer({ pkgRoot, mode, port, host }) {
+export function spawnDetachedServer({ pkgRoot, mode, port, host, launchMode = 'daemon' }) {
   ensureDataDirs();
   const logFile = getLogFilePath(port);
   const fd = fs.openSync(logFile, 'a');
-  const { file, args, env } = buildServeInvocation({ pkgRoot, mode, port, host });
+  const { file, args, env } = buildServeInvocation({ pkgRoot, mode, port, host, launchMode });
 
   let child;
   try {
@@ -194,17 +189,19 @@ export function spawnDetachedServer({ pkgRoot, mode, port, host }) {
     fs.closeSync(fd);
   }
 
-  const entry = {
-    pid: child.pid,
-    port,
-    host,
-    mode,
-    startedAt: new Date().toISOString(),
-    logFile,
-    url: `http://${probeHost(host)}:${port}`,
+  return {
+    child,
+    entry: {
+      pid: child.pid,
+      port,
+      host,
+      mode,
+      launchMode,
+      startedAt: new Date().toISOString(),
+      logFile,
+      url: `http://${probeHost(host)}:${port}`,
+    },
   };
-  writeRegistry(entry);
-  return { child, entry };
 }
 
 function sleep(ms) {
@@ -239,7 +236,7 @@ export async function waitForHealth(port, host, timeoutMs = HEALTH_TIMEOUT_MS) {
 
 function waitForProcessExit(pid, timeoutMs) {
   if (!isProcessAlive(pid)) return Promise.resolve(true);
-  const deadline = Date.now() + Math.max(0, timeoutMs);
+  const deadline = Date.now() + timeoutMs;
   return new Promise((resolve) => {
     const tick = () => {
       if (!isProcessAlive(pid)) {
@@ -257,24 +254,40 @@ function waitForProcessExit(pid, timeoutMs) {
 }
 
 /**
- * SIGTERM the detached process group, escalate to SIGKILL after the timeout,
- * then remove the registry entry. Resolves true once the PID is gone.
+ * SIGTERM the process, escalate to SIGKILL after the timeout, then drop the
+ * instance record. Resolves true once the PID is gone.
+ *
+ * Identity is re-checked before signalling: an entry discovered by probe was
+ * confirmed by the server itself, but a record-only entry whose PID has since
+ * been recycled belongs to a stranger and is never signalled — the stale record
+ * is simply removed.
  */
 export async function stopInstance(entry, { timeoutMs = STOP_TIMEOUT_MS } = {}) {
   const port = entry?.port;
   const pid = Number(entry?.pid);
-  let gone = true;
+  const dropRecord = async () => {
+    if (port !== undefined && port !== null) removeInstanceRecord(port);
+  };
 
-  if (Number.isInteger(pid) && pid > 0 && isProcessAlive(pid)) {
-    const target = { pid, kill: (signal) => process.kill(pid, signal) };
-    killChildTree(target, false);
+  if (!Number.isInteger(pid) || pid <= 0 || !isProcessAlive(pid)) {
+    await dropRecord();
+    return true;
+  }
+
+  const confirmedByProbe = entry?.source === 'probe' || entry?.source === 'registry+probe';
+  if (!confirmedByProbe && getProcessState(pid) !== 'matched') {
+    await dropRecord();
+    return true;
+  }
+
+  const target = { pid, kill: (signal) => process.kill(pid, signal) };
+  killChildTree(target, false);
+  let gone = await waitForProcessExit(pid, timeoutMs);
+  if (!gone) {
+    killChildTree(target, true);
     gone = await waitForProcessExit(pid, timeoutMs);
-    if (!gone) {
-      killChildTree(target, true);
-      gone = await waitForProcessExit(pid, timeoutMs);
-    }
   }
 
-  if (port !== undefined && port !== null) await removeRegistry(port);
+  await dropRecord();
   return gone;
 }

package/src/client/components/common/code-editor/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
-import type { CSSProperties, TargetedKeyboardEvent } from 'preact';
+import type { CSSProperties, Ref, TargetedKeyboardEvent } from 'preact';
 
 /**
  * Preact hand-roll of the textarea-over-<pre> highlighting editor
@@ -38,6 +38,8 @@ export interface CodeEditorProps {
   textareaClassName?: string;
   /** Layout styles for the whole editor; typography must match both layers. */
   style?: CSSProperties;
+  /** The `<pre>` layer that actually wraps the code — gutter alignment measures it. */
+  preRef?: Ref<HTMLPreElement>;
   className?: string;
   placeholder?: string;
   readOnly?: boolean;
@@ -73,6 +75,7 @@ export function CodeEditor({
   preClassName,
   textareaClassName,
   style,
+  preRef,
   className,
   placeholder,
   readOnly,
@@ -314,6 +317,7 @@ export function CodeEditor({
   return (
     <div className={className} style={{ position: 'relative', textAlign: 'left', boxSizing: 'border-box', padding: 0, overflow: 'hidden', ...style }}>
       <pre
+        ref={preRef}
         className={preClassName}
         aria-hidden="true"
         style={{ ...layerStyle, ...contentStyle, position: 'relative', pointerEvents: 'none' }}

package/src/client/components/common/code-surface/index.tsx

@@ -1,5 +1,7 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 import type { CSSProperties } from 'preact';
 import { CodeEditor } from '@/client/components/common/code-editor';
+import { measureWrappedLines, type WrappedLines } from '@/client/components/common/code-surface/measure';
 import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
 
@@ -25,12 +27,26 @@ interface CodeSurfaceProps {
   editorStyle?: CSSProperties;
 }
 
+/** Same measurement, so a re-render does not resize every gutter row. */
+function sameWrappedLines(previous: WrappedLines | null, next: WrappedLines | null): boolean {
+  if (previous === next) return true;
+  if (!previous || !next || previous.rowHeight !== next.rowHeight) return false;
+  return (
+    previous.heights.length === next.heights.length &&
+    previous.heights.every((height, index) => height === next.heights[index])
+  );
+}
+
 /**
  * The line-number gutter + syntax-highlighted editing surface shared by the
  * desktop editor and the phone's full-screen editor. Callers own only the
  * layout classes (padding, font, zoom) that genuinely differ per layout; the
  * gutter, word-wrap behaviour and Shiki highlighting live here so the two
  * surfaces cannot drift.
+ *
+ * The gutter spaces its numbers from the editor's measured wrap layout: with
+ * word wrap on, a long line covers several rows and every number below it has
+ * to move down by the same amount.
  */
 export function CodeSurface({
   value,
@@ -47,13 +63,44 @@ export function CodeSurface({
   editorStyle,
 }: CodeSurfaceProps) {
   const wrapClass = wordWrap ? WRAP_ON : WRAP_OFF;
+  const preRef = useRef<HTMLPreElement | null>(null);
+  const [wrapped, setWrapped] = useState<WrappedLines | null>(null);
   useSyntaxReady();
 
+  // Re-measured on the inputs that move a wrap point: the text, the wrap
+  // preference, and the editor's font size / padding.
+  const measure = useCallback(() => {
+    const pre = preRef.current;
+    const next = wordWrap && pre ? measureWrappedLines(pre, value) : null;
+    setWrapped((previous) => (sameWrappedLines(previous, next) ? previous : next));
+  }, [value, wordWrap, editorPadding, editorStyle?.fontSize]);
+
+  useLayoutEffect(() => {
+    measure();
+  }, [measure]);
+
+  // The wrap width also changes without a re-render — dragging the panel
+  // splitter, resizing the window, a zoom that reflows — so the editor's own
+  // box drives a re-measure too.
+  const measureRef = useRef(measure);
+  measureRef.current = measure;
+  useEffect(() => {
+    const pre = preRef.current;
+    if (!pre || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => measureRef.current());
+    observer.observe(pre);
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className={rootClassName}>
       <div className={gutterClassName} style={gutterStyle}>
         {value.split('\n').map((_, i) => (
-          <div key={i + 1} className={gutterLineClassName}>
+          <div
+            key={i + 1}
+            className={gutterLineClassName}
+            style={wrapped ? { height: wrapped.heights[i], flexShrink: 0 } : undefined}
+          >
             {i + 1}
           </div>
         ))}
@@ -64,6 +111,7 @@ export function CodeSurface({
           onValueChange={onValueChange}
           highlight={(code) => highlightCode(code, language)}
           padding={editorPadding}
+          preRef={preRef}
           textareaClassName={`focus:outline-none ${wrapClass}`}
           preClassName={wrapClass}
           style={editorStyle}

package/src/client/components/common/code-surface/measure.ts

@@ -0,0 +1,99 @@
+/**
+ * Wrapped-row measurement for the line-number gutter.
+ *
+ * The gutter is a column of one-row line numbers, which is only right while a
+ * line fits on one row. With word wrap on, the editor lays a long line out over
+ * several rows and every number after it would sit above its own line. How many
+ * rows a line takes is a layout fact — font metrics, break opportunities, the
+ * width the editor actually got — so it is measured rather than estimated: the
+ * same lines are laid out once in a hidden mirror that copies the editor's
+ * typography, and each line's height is read back.
+ */
+
+/**
+ * The mirror has to reproduce the editor's line breaking exactly, so every
+ * property that can move a break is copied from the live editor's computed
+ * style instead of being restated (a second copy of the font stack would drift).
+ */
+const MIRRORED_PROPERTIES = [
+  'direction',
+  'fontFamily',
+  'fontFeatureSettings',
+  'fontKerning',
+  'fontSize',
+  'fontStyle',
+  'fontVariantLigatures',
+  'fontWeight',
+  'letterSpacing',
+  'overflowWrap',
+  'tabSize',
+  'textRendering',
+  'textTransform',
+  'whiteSpace',
+  'wordBreak',
+  'wordSpacing',
+] as const;
+
+export interface WrappedLines {
+  /** Height in px of a single visual row. */
+  rowHeight: number;
+  /** Height in px each line of the source occupies once wrapped. */
+  heights: number[];
+}
+
+let mirrorHost: HTMLDivElement | null = null;
+let mirrorLines: HTMLDivElement[] = [];
+
+/** Off-screen mirror, reused across measurements (one per page). */
+function getMirrorHost(): HTMLDivElement {
+  if (!mirrorHost || !mirrorHost.isConnected) {
+    mirrorHost = document.createElement('div');
+    mirrorHost.setAttribute('aria-hidden', 'true');
+    mirrorHost.style.cssText =
+      'position:fixed;top:0;left:-100000px;visibility:hidden;pointer-events:none;margin:0;border:0;padding:0;box-sizing:border-box;';
+    document.body.appendChild(mirrorHost);
+    mirrorLines = [];
+  }
+  return mirrorHost;
+}
+
+/**
+ * Height each line of `value` occupies in `source`'s wrap layout, or null when
+ * the layout is not measurable yet (SSR, zero width, unresolved line-height) —
+ * callers then fall back to one row per line.
+ */
+export function measureWrappedLines(source: HTMLPreElement, value: string): WrappedLines | null {
+  if (typeof document === 'undefined' || !source.isConnected) return null;
+  const computed = getComputedStyle(source);
+  const rowHeight = Number.parseFloat(computed.lineHeight);
+  if (!Number.isFinite(rowHeight) || rowHeight <= 0) return null;
+  // The editor's text column: its padding is the gutter's offset, not text area.
+  const width =
+    source.clientWidth -
+    Number.parseFloat(computed.paddingLeft || '0') -
+    Number.parseFloat(computed.paddingRight || '0');
+  if (width <= 0) return null;
+
+  const host = getMirrorHost();
+  for (const property of MIRRORED_PROPERTIES) host.style[property] = computed[property];
+  host.style.lineHeight = `${rowHeight}px`;
+  host.style.width = `${width}px`;
+
+  const lines = value.split('\n');
+  while (mirrorLines.length > lines.length) mirrorLines.pop()?.remove();
+  while (mirrorLines.length < lines.length) {
+    const line = document.createElement('div');
+    host.appendChild(line);
+    mirrorLines.push(line);
+  }
+  // Write the whole text first, then read the whole layout: interleaving the
+  // two would force a re-layout per line.
+  for (let i = 0; i < lines.length; i++) mirrorLines[i].textContent = lines[i];
+  const heights = mirrorLines.map((line) => {
+    const height = line.getBoundingClientRect().height;
+    // An empty line has no line box at all, and sub-pixel wrapping would
+    // otherwise leave the gutter fractions of a row out of step.
+    return height > rowHeight ? Math.round(height / rowHeight) * rowHeight : rowHeight;
+  });
+  return { rowHeight, heights };
+}

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

@@ -1,7 +1,8 @@
 import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal } from 'lucide-preact';
+import type { ReactNode } from 'preact/compat';
 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';
+import { RIGHT_PANEL_TYPES, type RightPanelType } from '@/shared/lib/workspace/right-panels';
 
 interface RightActivityBarProps {
   activePanel: RightPanelType;
@@ -12,83 +13,55 @@ interface RightActivityBarProps {
   refreshKey: number;
 }
 
+/**
+ * Icon and tooltip per view. The *order* is not restated here: it comes from
+ * RIGHT_PANEL_TYPES, the same list the phone's right-sidebar tab bar renders,
+ * so the two layouts cannot list the views differently.
+ */
+const PANEL_META: Record<RightPanelType, { title: string; icon: ReactNode }> = {
+  context: { title: 'Context & Telemetry', icon: <Layers size={16} /> },
+  files: { title: 'Files', icon: <Files size={16} /> },
+  search: { title: 'Search', icon: <Search size={16} /> },
+  git: { title: 'Source Control', icon: <GitBranch size={16} /> },
+  terminal: { title: 'Terminal (Bun)', icon: <Terminal size={16} /> },
+  'user-browser': { title: 'Browser (Anda)', icon: <Globe size={16} /> },
+  browser: { title: 'Browser Agent', icon: <Bot size={16} /> },
+  usage: { title: 'Usage', icon: <BarChart3 size={16} /> },
+};
+
 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>
+        {RIGHT_PANEL_TYPES.map((panel) => {
+          const isActive = isPanelOpen && activePanel === panel;
+          return (
+            <button
+              key={panel}
+              className={`relative w-full h-10 flex items-center justify-center transition-colors border-l-2 ${
+                isActive
+                  ? 'text-ink border-ink bg-ink/5'
+                  : 'text-ink/40 border-transparent hover:text-ink hover:bg-ink/5'
+              }`}
+              onClick={() => onChangePanel(panel)}
+              title={PANEL_META[panel].title}
+            >
+              {PANEL_META[panel].icon}
+              {panel === 'git' && 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>
+          );
+        })}
       </div>
-      
+
       <div className="flex-1" />
     </nav>
   );