ompchamber 0.3.0

package/src/cli/lib/runtime.js

@@ -0,0 +1,280 @@
+// 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).
+
+import fs from 'node:fs';
+
+import { getLogFilePath, getRegistryPath, ensureDataDirs, getRunDir } from '@/cli/lib/paths.js';
+import { killChildTree, STOP_TIMEOUT_MS } from '@/cli/lib/process-lifecycle.js';
+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.
+ */
+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;
+}
+
+/**
+ * Remove a registry entry. Never throws.
+ */
+export async function removeRegistry(port) {
+  try {
+    await fs.promises.rm(getRegistryPath(port), { force: true });
+  } catch {
+    // Nothing to do: the registry is best-effort state.
+  }
+}
+
+/**
+ * Liveness-only check for a PID. Never throws.
+ */
+export function isProcessAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Registry entry whose recorded PID is alive. With no port, returns the first
+ * live instance; otherwise null.
+ */
+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 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;
+}
+
+function isBun(candidate) {
+  if (!candidate || !fs.existsSync(candidate)) return false;
+  const probe = Bun.spawnSync([candidate, '--version']);
+  return probe.success;
+}
+
+/**
+ * Locate the Bun runtime. The server imports `@/...` path aliases and ships as
+ * TypeScript, so it must run under Bun rather than whatever Node happens to be
+ * executing this CLI.
+ */
+export function resolveBunBin() {
+  const override = Bun.env.OMPCHAMBER_BUN;
+  if (isBun(override)) return override;
+
+  const execDir = process.execPath;
+  if (/(^|[\\/])bun$/.test(execDir) && isBun(execDir)) return execDir;
+
+  const candidates = [
+    joinPath(homeDir(), '.bun', 'bin', 'bun'),
+    '/opt/homebrew/bin/bun',
+    '/usr/local/bin/bun',
+    '/usr/bin/bun',
+  ];
+  for (const candidate of candidates) {
+    if (isBun(candidate)) return candidate;
+  }
+
+  const found = Bun.which('bun');
+  if (isBun(found)) return found;
+
+  throw new Error('Could not locate the Bun runtime. Install it from https://bun.sh and retry.');
+}
+
+/**
+ * Build the executable + args + env for a dev or prod server run.
+ *
+ * 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.
+ */
+export function buildServeInvocation({ pkgRoot, mode, port, host }) {
+  const entry = joinPath(pkgRoot, 'src', 'server', 'index.ts');
+  if (!fs.existsSync(entry)) {
+    throw new Error(`Could not locate the server entry at ${entry}.`);
+  }
+  if (mode === 'prod' && !fs.existsSync(joinPath(pkgRoot, 'dist', 'client', 'index.html'))) {
+    throw new Error('No client build found. Run `bun run build` and retry.');
+  }
+  return {
+    file: resolveBunBin(),
+    args: [entry],
+    env: {
+      ...Bun.env,
+      NODE_ENV: mode === 'prod' ? 'production' : 'development',
+      PORT: String(port),
+      HOST: host,
+    },
+  };
+}
+
+/**
+ * Spawn a detached server, stream its output to the per-port log file and
+ * persist the registry entry.
+ */
+export function spawnDetachedServer({ pkgRoot, mode, port, host }) {
+  ensureDataDirs();
+  const logFile = getLogFilePath(port);
+  const fd = fs.openSync(logFile, 'a');
+  const { file, args, env } = buildServeInvocation({ pkgRoot, mode, port, host });
+
+  let child;
+  try {
+    child = Bun.spawn({
+      cmd: [file, ...args],
+      cwd: pkgRoot,
+      stdin: 'ignore',
+      stdout: fd,
+      stderr: fd,
+      env,
+    });
+    child.unref();
+  } finally {
+    fs.closeSync(fd);
+  }
+
+  const entry = {
+    pid: child.pid,
+    port,
+    host,
+    mode,
+    startedAt: new Date().toISOString(),
+    logFile,
+    url: `http://${probeHost(host)}:${port}`,
+  };
+  writeRegistry(entry);
+  return { child, entry };
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Poll `/api/health` until a 200 with a JSON body arrives, else null.
+ */
+export async function waitForHealth(port, host, timeoutMs = HEALTH_TIMEOUT_MS) {
+  const url = `http://${probeHost(host)}:${port}/api/health`;
+  const deadline = Date.now() + Math.max(0, timeoutMs);
+
+  while (Date.now() < deadline) {
+    try {
+      const response = await fetch(url, {
+        headers: { Accept: 'application/json' },
+        signal: AbortSignal.timeout(2000),
+      });
+      if (response.ok) {
+        const body = await response.json().catch(() => null);
+        if (body && typeof body === 'object') return body;
+      }
+    } catch {
+      // Server not up yet; keep polling until the deadline.
+    }
+    if (Date.now() >= deadline) break;
+    await sleep(HEALTH_INTERVAL_MS);
+  }
+  return null;
+}
+
+function waitForProcessExit(pid, timeoutMs) {
+  if (!isProcessAlive(pid)) return Promise.resolve(true);
+  const deadline = Date.now() + Math.max(0, timeoutMs);
+  return new Promise((resolve) => {
+    const tick = () => {
+      if (!isProcessAlive(pid)) {
+        resolve(true);
+        return;
+      }
+      if (Date.now() >= deadline) {
+        resolve(false);
+        return;
+      }
+      setTimeout(tick, 100);
+    };
+    tick();
+  });
+}
+
+/**
+ * SIGTERM the detached process group, escalate to SIGKILL after the timeout,
+ * then remove the registry entry. Resolves true once the PID is gone.
+ */
+export async function stopInstance(entry, { timeoutMs = STOP_TIMEOUT_MS } = {}) {
+  const port = entry?.port;
+  const pid = Number(entry?.pid);
+  let gone = true;
+
+  if (Number.isInteger(pid) && pid > 0 && isProcessAlive(pid)) {
+    const target = { pid, kill: (signal) => process.kill(pid, signal) };
+    killChildTree(target, false);
+    gone = await waitForProcessExit(pid, timeoutMs);
+    if (!gone) {
+      killChildTree(target, true);
+      gone = await waitForProcessExit(pid, timeoutMs);
+    }
+  }
+
+  if (port !== undefined && port !== null) await removeRegistry(port);
+  return gone;
+}

package/src/cli/ompchamber.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env bun
+
+import packageJson from '@/../package.json';
+import { parseArgs, helpText } from '@/cli/lib/args.js';
+import { configure, error, fail } from '@/cli/lib/output.js';
+import { resolvePath } from '@/cli/lib/path-utils.js';
+
+const { version } = packageJson;
+
+const COMMANDS = ['serve', 'update', 'stop', 'restart', 'status', 'logs'];
+
+async function main() {
+  const { command, positionals, options, unknown } = parseArgs(process.argv.slice(2));
+
+  configure({ json: options.json, quiet: options.quiet });
+
+  if (options.help || command === 'help') {
+    process.stdout.write(helpText());
+    return;
+  }
+
+  if (options.version) {
+    process.stdout.write(`ompchamber ${version}\n`);
+    return;
+  }
+
+  if (unknown.length > 0) {
+    fail(`Unknown option: ${unknown[0]}\nRun "ompchamber --help" for usage.`);
+  }
+
+  // src/cli/ompchamber.js -> package root is two levels up.
+  const pkgRoot = resolvePath(import.meta.dir, '..', '..');
+  const ctx = { cwd: process.cwd(), pkgRoot, version };
+
+  const name = command ?? 'serve';
+
+  if (!COMMANDS.includes(name)) {
+    error(`Unknown command: ${name}`);
+    process.stderr.write(helpText());
+    process.exit(1);
+  }
+
+  // Dynamic import keeps the CLI bootable even while a command module is
+  // still being written by another process.
+  const mod = await import(`./lib/commands/${name}.js`);
+
+  if (typeof mod.run !== 'function') {
+    fail(`Command "${name}" is unavailable (missing run()).`);
+  }
+
+  await mod.run(options, ctx);
+}
+
+main().catch((err) => {
+  fail(err?.message ?? String(err));
+});

package/src/client/App.tsx

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { DesktopLayout } from '@/client/components/layout/desktop-layout/index';
+import { MobileLayoutWrapper } from '@/client/components/mobile/LayoutWrapper';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider';
+import { SidebarDataProvider } from '@/client/hooks/chat/omp/session-list';
+
+export interface AppProps {
+  /** Server-detected mobile verdict, so the first paint needs no UA check. */
+  initialIsMobile?: boolean;
+  appSettings?: Record<string, unknown>;
+}
+
+export function App({ initialIsMobile = false, appSettings = {} }: AppProps) {
+  const [searchParams] = useSearchParams();
+  const sessionId = searchParams.get('sessionId') || '1';
+
+  // Initialize with server-detected User-Agent to eliminate SSR flash. The
+  // device decides the layout on every load — the manual switch below is
+  // session-only, so opening the chamber on a phone never locks a desktop (or
+  // vice versa) into the other layout on its next visit.
+  const [isMobileMode, setIsMobileMode] = useState<boolean>(initialIsMobile);
+  // Set the moment the user picks a layout by hand; while set, the viewport no
+  // longer re-detects so their choice survives a resize.
+  const manualOverrideRef = useRef(false);
+
+  useEffect(() => {
+    // Comprehensive multi-factor device & screen check
+    const checkIsMobileDevice = () => {
+      const isNarrow = window.innerWidth < 768;
+      const isTouch = window.matchMedia('(pointer: coarse)').matches;
+      const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(navigator.userAgent);
+
+      // On mobile devices in landscape mode, width might be 768-932px, but height is < 500px and it's a touch device
+      const isMobileLandscape = isTouch && window.innerHeight < 550 && window.innerWidth < 1024;
+
+      return isNarrow || isMobileUA || isMobileLandscape;
+    };
+
+    if (!manualOverrideRef.current) setIsMobileMode(checkIsMobileDevice());
+
+    const handleResize = () => {
+      if (!manualOverrideRef.current) {
+        setIsMobileMode(checkIsMobileDevice());
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('orientationchange', handleResize);
+    };
+  }, []);
+
+  const handleSwitchToDesktop = () => {
+    manualOverrideRef.current = true;
+    setIsMobileMode(false);
+  };
+
+  const handleSwitchToMobile = () => {
+    manualOverrideRef.current = true;
+    setIsMobileMode(true);
+  };
+
+  if (isMobileMode) {
+    return (
+      <SessionStateProvider sessionId={sessionId}>
+        <SidebarDataProvider>
+          <MobileLayoutWrapper
+            onDesktopToggle={handleSwitchToDesktop}
+            appSettings={appSettings}
+          />
+        </SidebarDataProvider>
+      </SessionStateProvider>
+    );
+  }
+
+  return (
+    <SessionStateProvider sessionId={sessionId}>
+      <SidebarDataProvider>
+        <DesktopLayout
+          sessionId={sessionId}
+          onSwitchToMobile={handleSwitchToMobile}
+          appSettings={appSettings}
+        />
+      </SidebarDataProvider>
+    </SessionStateProvider>
+  );
+}

package/src/client/bootstrap.d.ts

@@ -0,0 +1,12 @@
+export interface OmpChamberBootstrap {
+  initialIsMobile: boolean;
+  appSettings: Record<string, unknown>;
+}
+
+declare global {
+  interface Window {
+    __OMP_BOOTSTRAP__?: OmpChamberBootstrap;
+  }
+}
+
+export {};

package/src/client/components/common/ComposerPicker.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef } from 'preact/hooks';
+import type { ReactElement } from 'preact/compat';
+import type { ComposerMatchItem, ComposerPickItem, ComposerPickKind } from '@/shared/types';
+
+export interface ComposerPickerProps {
+  open: boolean;
+  kind: ComposerPickKind;
+  items: ComposerMatchItem[];
+  activeIndex: number;
+  loading: boolean;
+  error: string | null;
+  listboxId: string;
+  optionId: (index: number) => string;
+  onSelect: (item: ComposerPickItem) => void;
+  onHover: (index: number) => void;
+}
+
+/** Hard cap on rendered rows so a huge catalog cannot blow up the DOM. */
+const MAX_OPTIONS = 100;
+
+function OptionName({ item }: { item: ComposerMatchItem }) {
+  const match = item.match;
+  if (!match || match.start < 0 || match.start >= match.end || match.end > item.name.length) {
+    return <>{item.name}</>;
+  }
+  return (
+    <>
+      {item.name.slice(0, match.start)}
+      <mark className="bg-transparent font-semibold text-ink">
+        {item.name.slice(match.start, match.end)}
+      </mark>
+      {item.name.slice(match.end)}
+    </>
+  );
+}
+
+export function ComposerPicker({
+  open,
+  kind,
+  items,
+  activeIndex,
+  loading,
+  error,
+  listboxId,
+  optionId,
+  onSelect,
+  onHover,
+}: ComposerPickerProps): ReactElement | null {
+  const activeOptionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    activeOptionRef.current?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex, open, items.length]);
+
+  if (!open) return null;
+
+  const isMention = kind === 'mention';
+  const headerText = isMention ? 'Type to search files and agents' : 'Type to search commands and skills';
+  const ariaLabel = isMention ? 'Files and agents' : 'Commands and skills';
+  const emptyText = isMention ? 'No matching files or agents' : 'No matching commands or skills';
+
+  return (
+    <div
+      role="listbox"
+      id={listboxId}
+      aria-label={ariaLabel}
+      className="absolute left-0 right-0 bottom-full mb-1 z-50 min-w-[260px] flex max-h-60 flex-col rounded-md border border-ink/20 bg-paper shadow-lg text-sm"
+    >
+      <div className="shrink-0 text-[10px] uppercase tracking-wider text-ink/40 px-3 py-1.5 border-b border-ink/10">
+        {headerText}
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {error ? (
+          <div className="px-3 py-2 text-error">{error}</div>
+        ) : loading && items.length === 0 ? (
+          <div className="px-3 py-2 text-ink/50">Loading…</div>
+        ) : items.length === 0 ? (
+          <div className="px-3 py-2 text-ink/50">{emptyText}</div>
+        ) : (
+          items.slice(0, MAX_OPTIONS).map((item, index) => (
+            <div
+              key={item.id}
+              id={optionId(index)}
+              role="option"
+              aria-selected={index === activeIndex}
+              ref={index === activeIndex ? activeOptionRef : undefined}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseEnter={() => onHover(index)}
+              onClick={() => onSelect(item)}
+              className={`px-3 py-2 cursor-pointer ${index === activeIndex ? 'bg-ink/10' : ''}`}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <span className="truncate">
+                  <OptionName item={item} />
+                </span>
+                {item.source === 'file' && (
+                  <span className="text-ink/40 text-[10px] uppercase shrink-0">file</span>
+                )}
+                {item.source === 'skill' && (
+                  <span className="text-ink/40 text-[10px] uppercase shrink-0">skill</span>
+                )}
+              </div>
+              <div className="truncate text-ink/50 text-xs">{item.description}</div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div className="shrink-0 px-3 py-1.5 border-t border-ink/10 text-[10px] text-ink/40">
+        ↑↓ navigate · Enter select · Esc close
+      </div>
+    </div>
+  );
+}

package/src/client/components/common/ComposerTextarea.tsx

@@ -0,0 +1,131 @@
+import { useRef } from 'preact/hooks';
+import type { ClipboardEvent, KeyboardEvent, ReactElement } from 'preact/compat';
+import type { SettingsState } from '@/shared/types';
+import { useComposerTrigger } from '@/client/hooks/chat/composer';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { ComposerPicker } from '@/client/components/common/ComposerPicker';
+
+type KeybindingSetting = SettingsState['keybindingSend'];
+
+export interface ComposerTextareaProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: (options?: { steering?: boolean }) => void;
+  disabled?: boolean;
+  appSettings?: Partial<
+    Pick<SettingsState, 'keybindingSend' | 'keybindingNewLine' | 'keybindingSteering'>
+  >;
+  placeholder?: string;
+  className?: string;
+  onPaste?: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
+  rootPath?: string | null;
+  /**
+   * `mobile` makes a bare Enter insert a newline instead of sending: phone
+   * keyboards have no Shift key, so the configured Enter-to-send binding would
+   * leave no way to write a multi-line prompt. Modifier bindings
+   * (Ctrl/Cmd + Enter) still work with a hardware keyboard; the send button is
+   * the primary affordance on touch.
+   */
+  variant?: 'desktop' | 'mobile';
+}
+
+export function ComposerTextarea({
+  value,
+  onChange,
+  onSend,
+  disabled = false,
+  appSettings,
+  placeholder,
+  className,
+  onPaste,
+  rootPath,
+  variant = 'desktop',
+}: ComposerTextareaProps): ReactElement {
+  const isMobile = variant === 'mobile';
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const composer = useComposerTrigger({ value, setValue: onChange, textareaRef, disabled, rootPath });
+
+  useOnClickOutside(wrapperRef, composer.close);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    // The autocomplete owns Arrow/Enter/Tab/Escape while it is open.
+    if (composer.handleKeyDown(e)) return;
+    if (e.key !== 'Enter') return;
+
+    const sendBinding = appSettings?.keybindingSend || 'Enter';
+    const newLineBinding = appSettings?.keybindingNewLine || 'Shift + Enter';
+    const steeringBinding = appSettings?.keybindingSteering || 'Ctrl / Cmd + Enter';
+
+    const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    const isCtrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
+    const isShift = e.shiftKey;
+
+    const checkBinding = (binding: KeybindingSetting) => {
+      if (binding === 'Enter' && !isShift && !isCtrlOrCmd && !e.altKey) return true;
+      if (binding === 'Shift + Enter' && isShift && !isCtrlOrCmd && !e.altKey) return true;
+      if (binding === 'Ctrl / Cmd + Enter' && !isShift && isCtrlOrCmd && !e.altKey) return true;
+      return false;
+    };
+
+    // A bare Enter on touch inserts a newline (see `variant`); every modified
+    // combination keeps its configured meaning.
+    const bareEnter = !isShift && !isCtrlOrCmd && !e.altKey;
+    if (isMobile && bareEnter) return;
+
+    if (checkBinding(steeringBinding)) {
+      e.preventDefault();
+      if (!disabled) {
+        onSend({ steering: true });
+      }
+    } else if (checkBinding(sendBinding)) {
+      e.preventDefault();
+      if (!disabled) onSend();
+    } else if (checkBinding(newLineBinding)) {
+      // Allow default behavior (new line)
+    } else {
+      // Prevent default for other Enter combinations to avoid unwanted new lines
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={composer.handleChange}
+        onCompositionStart={composer.handleCompositionStart}
+        onCompositionEnd={composer.handleCompositionEnd}
+        onKeyDown={handleKeyDown}
+        onPaste={onPaste}
+        disabled={disabled}
+        placeholder={placeholder}
+        enterkeyhint={isMobile ? 'enter' : undefined}
+        className={className}
+        aria-autocomplete="list"
+        aria-expanded={composer.isOpen}
+        aria-controls={composer.listboxId}
+        aria-haspopup="listbox"
+        aria-activedescendant={
+          composer.isOpen && composer.matches.length > 0
+            ? composer.optionId(composer.activeIndex)
+            : undefined
+        }
+      />
+
+      <ComposerPicker
+        open={composer.isOpen}
+        kind={composer.trigger?.kind ?? 'mention'}
+        items={composer.matches}
+        activeIndex={composer.activeIndex}
+        loading={composer.loading}
+        error={composer.error}
+        listboxId={composer.listboxId}
+        optionId={composer.optionId}
+        onSelect={composer.selectItem}
+        onHover={composer.setActiveIndex}
+      />
+    </div>
+  );
+}