ompchamber 0.6.0 → 0.8.0

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "ompchamber",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
+  "license": "UNLICENSED",
+  "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",
   "type": "module",
   "engines": {
     "bun": ">=1.4.0"

package/src/cli/lib/args.js

@@ -189,7 +189,7 @@ COMMANDS:
   serve          Start the OMPChamber web server (default when no command is given)
   update         Update OMPChamber to the latest GitHub release
   stop           Stop running OMPChamber instances (every one, or --port <port>)
-  restart        Stop and then start again (every instance, or --port <port>)
+  restart        Stop and start again (every CLI-started instance, or --port <port>)
   status         Show running instances (every one, or --port <port>)
   logs           Print or follow server logs (every instance, or --port <port>)
 

package/src/cli/lib/commands/restart.js

@@ -3,11 +3,17 @@
 // Scoping matches `status` and `stop`: without `--port` every live instance is
 // restarted on its own recorded port/host/mode, and `--port <port>` restricts
 // the restart to that one. With nothing running, the command is simply `serve`.
+//
+// Instances the CLI did not start are left alone, exactly as `ompchamber update`
+// leaves them: `bun run dev` and `bun run start` own their own process, so
+// replacing it would break a loop OMPChamber does not manage. `ompchamber stop`
+// is still the deliberate way to end one.
 
 import { findLiveInstance, listLiveInstances, stopInstance } from '@/cli/lib/runtime.js';
 import { STOP_TIMEOUT_MS } from '@/cli/lib/process-lifecycle.js';
 import { log, isJson, isQuiet } from '@/cli/lib/output.js';
 import { run as runServe } from '@/cli/lib/commands/serve.js';
+import { isAutoRestartable, skipRestartNote } from '@/server/lib/lifecycle/restart';
 
 function explicitPort(options) {
   const raw = options?.port;
@@ -28,6 +34,11 @@ export async function run(options, ctx) {
   if (targets.length === 0) return runServe(options, ctx);
 
   for (const live of targets) {
+    if (!isAutoRestartable(live.launchMode)) {
+      if (!json && !quiet) log(`Skipping OMPChamber on port ${live.port}: ${skipRestartNote(live.launchMode)}.`);
+      continue;
+    }
+
     if (!json && !quiet) log(`Stopping OMPChamber on port ${live.port} (pid ${live.pid})...`);
     await stopInstance(live, { timeoutMs: STOP_TIMEOUT_MS });
 

package/src/cli/lib/commands/update.js

@@ -2,19 +2,23 @@
 //
 // The installation mechanics live in the shared update engine so the CLI and
 // the console's "Update" button do the same thing; this command owns the
-// terminal presentation and restarts any instance still serving the previous
-// build.
+// terminal presentation and restarts the instances still serving the previous
+// build (the ones the CLI started — a server running from source is left to its
+// own launcher).
 
 import { color, configure, error, log, ok, warn, printJson, isJson, isQuiet } from '@/cli/lib/output.js';
 import { listLiveInstances, findLiveInstance, stopInstance } from '@/cli/lib/runtime.js';
 import { STOP_TIMEOUT_MS } from '@/cli/lib/process-lifecycle.js';
 import { run as runServe } from '@/cli/lib/commands/serve.js';
+import { isAutoRestartable, skipRestartNote } from '@/server/lib/lifecycle/restart';
 import { resolveInstallContext, resolveOmpChamberVersion, updateOmpChamber } from '@/server/lib/updates/install';
 
 /**
  * Live instances to restart after an update: every one with `--all`, otherwise
  * the first. Their recorded port/host/mode is reused, so a server started on a
- * non-default port comes back on that same port.
+ * non-default port comes back on that same port. Instances started outside the
+ * CLI (`bun run dev`, `bun run start`, a supervisor) are reported and left
+ * running — their own launcher is what applies the new files.
  */
 async function liveInstances(options) {
   if (options?.all) return await listLiveInstances();
@@ -24,7 +28,14 @@ async function liveInstances(options) {
 
 async function restartInstances(options, ctx) {
   const restarted = [];
+  const skipped = [];
   for (const entry of await liveInstances(options)) {
+    if (!isAutoRestartable(entry.launchMode)) {
+      skipped.push({ port: entry.port, pid: entry.pid, launchMode: entry.launchMode });
+      log(`Skipping OMPChamber on port ${entry.port}: ${skipRestartNote(entry.launchMode)}.`);
+      continue;
+    }
+
     log(`Restarting OMPChamber on port ${entry.port} (pid ${entry.pid})...`);
     await stopInstance(entry, { timeoutMs: STOP_TIMEOUT_MS });
     await runServe(
@@ -41,7 +52,7 @@ async function restartInstances(options, ctx) {
     );
     restarted.push(entry.port);
   }
-  return restarted;
+  return { restarted, skipped };
 }
 
 async function runCheck(pkgRoot, json) {
@@ -91,8 +102,10 @@ export async function run(options, ctx) {
     // Restarting prints through the serve command; silence it so stdout stays
     // one JSON document.
     if (result.success && result.updated && shouldRestart) configure({ json: false, quiet: true });
-    const restarted = result.success && result.updated && shouldRestart ? await restartInstances(options, ctx) : [];
-    printJson({ ...result, restarted });
+    const { restarted, skipped } = result.success && result.updated && shouldRestart
+      ? await restartInstances(options, ctx)
+      : { restarted: [], skipped: [] };
+    printJson({ ...result, restarted, skipped });
     if (!result.success) process.exitCode = 1;
     return;
   }
@@ -111,7 +124,8 @@ export async function run(options, ctx) {
     return;
   }
 
-  if ((await restartInstances(options, ctx)).length === 0) {
+  const { restarted, skipped } = await restartInstances(options, ctx);
+  if (restarted.length === 0 && skipped.length === 0) {
     log('No running instance to restart.');
   }
 }

package/src/cli/lib/runtime.js

@@ -13,6 +13,7 @@ import fs from 'node:fs';
 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';
@@ -134,7 +135,10 @@ export function resolveBunBin() {
  * 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.
+ * 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, launchMode = 'daemon' }) {
   const entry = joinPath(pkgRoot, 'src', 'server', 'index.ts');
@@ -146,13 +150,12 @@ export function buildServeInvocation({ pkgRoot, mode, port, host, launchMode = '
   }
   return {
     file: resolveBunBin(),
-    args: [entry, '--ompchamber-server'],
+    args: [entry, '--ompchamber-server', launchModeArg(launchMode)],
     env: {
       ...Bun.env,
       NODE_ENV: mode === 'prod' ? 'production' : 'development',
       PORT: String(port),
       HOST: host,
-      OMPCHAMBER_LAUNCH_MODE: launchMode,
     },
   };
 }

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

@@ -14,13 +14,16 @@
  */
 
 import type { TargetedMouseEvent } from 'preact';
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'preact/hooks';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { renderMarkdown } from '@/shared/lib/markdown/marked';
 import { hydrateMathBlocks, MATH_PENDING_CLASS, preloadKatex } from '@/shared/lib/markdown/katex';
 import { sanitizeHtml } from '@/shared/lib/markdown/sanitize';
 import { hydrateMermaidBlocks } from '@/shared/lib/markdown/mermaid';
 import { copyToClipboard } from '@/client/hooks/ui/clipboard';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { DiagramViewer } from '@/client/components/common/diagram-viewer';
+import { readDiagramBlock, type DiagramSnapshot } from '@/client/components/common/diagram-viewer/read-block';
+
 
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
@@ -31,6 +34,9 @@ interface MarkdownRendererProps {
 
 export function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  /** Block the open viewer was read from, so a theme re-render can refresh it. */
+  const diagramBlockRef = useRef<HTMLElement | null>(null);
+  const [diagram, setDiagram] = useState<DiagramSnapshot | null>(null);
 
   const syntaxReady = useSyntaxReady();
 
@@ -83,13 +89,13 @@ export function MarkdownRenderer({ content, className = '' }: MarkdownRendererPr
     if (!container) return;
 
     let timer: number | undefined;
-    const hydrate = () => {
+    const hydrate = async () => {
       const current = containerRef.current;
       if (!current || !current.isConnected) return;
-      void hydrateMermaidBlocks(current);
+      await hydrateMermaidBlocks(current);
     };
 
-    hydrate();
+    void hydrate();
     // React can rewrite the container's innerHTML with an identical html
     // string (timeline re-renders) without this effect re-running, which
     // would strand freshly-inserted pending blocks. Re-hydrate on any
@@ -99,45 +105,81 @@ export function MarkdownRenderer({ content, className = '' }: MarkdownRendererPr
       const current = containerRef.current;
       if (current?.isConnected) void hydrateMermaidBlocks(current, { cachedOnly: true });
       window.clearTimeout(timer);
-      timer = window.setTimeout(hydrate, 120);
+      timer = window.setTimeout(() => void hydrate(), 120);
     });
     observer.observe(container, { childList: true });
 
-    const onThemeChange = () => hydrate();
-    window.addEventListener('omp:theme-changed', onThemeChange);
+    // Diagrams bake the palette into their SVG, so every theme write must
+    // re-render them. The trigger is the `data-theme` attribute itself rather
+    // than the `omp:theme-changed` event: the navbar toggle and the settings
+    // modal are both writers, and observing the attribute catches all of them
+    // the moment the document changes. Vacuously cheap for a same-palette write
+    // (blocks already matching the new theme key are skipped).
+    const rehydrateForTheme = async () => {
+      await hydrate();
+      const block = diagramBlockRef.current;
+      // A timeline re-render can replace the block under an open viewer; keep
+      // the last snapshot then rather than closing the viewer on the user.
+      if (!block?.isConnected) return;
+      const snapshot = readDiagramBlock(block);
+      if (snapshot) setDiagram(snapshot);
+    };
+    const themeObserver = new MutationObserver(() => void rehydrateForTheme());
+    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
     return () => {
       window.clearTimeout(timer);
       observer.disconnect();
-      window.removeEventListener('omp:theme-changed', onThemeChange);
+      themeObserver.disconnect();
     };
   }, [hasMermaid, html]);
 
   const handleContainerClick = useCallback((e: TargetedMouseEvent<HTMLDivElement>) => {
     const target = (e.target as HTMLElement).closest<HTMLButtonElement>('button.code-copy-float');
-    if (!target) return;
-    const text = target.dataset.copy ?? '';
-    if (!text) return;
+    if (target) {
+      const text = target.dataset.copy ?? '';
+      if (!text) return;
+      e.preventDefault();
+      e.stopPropagation();
+      void copyToClipboard(text).then((ok) => {
+        if (!ok) return;
+        target.setAttribute('data-copied', 'true');
+        target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+        setTimeout(() => {
+          target.removeAttribute('data-copied');
+          target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        }, 2000);
+      });
+      return;
+    }
+
+    // A rendered diagram is a door into the zoom/pan viewer; pending, failed,
+    // and still-streaming blocks stay inert.
+    const block = (e.target as HTMLElement).closest<HTMLElement>('.mermaid-block[data-mermaid-state="done"]');
+    if (!block) return;
+    const snapshot = readDiagramBlock(block);
+    if (!snapshot) return;
     e.preventDefault();
-    e.stopPropagation();
-    void copyToClipboard(text).then((ok) => {
-      if (!ok) return;
-      target.setAttribute('data-copied', 'true');
-      target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
-      setTimeout(() => {
-        target.removeAttribute('data-copied');
-        target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
-      }, 2000);
-    });
+    diagramBlockRef.current = block;
+    setDiagram(snapshot);
+  }, []);
+
+  const closeDiagram = useCallback(() => {
+    diagramBlockRef.current = null;
+    setDiagram(null);
   }, []);
 
   if (!content) return null;
 
   return (
-    <div
-      ref={containerRef}
-      className={`prose-content text-[13px] text-ink leading-relaxed select-text ${className}`}
-      onClick={handleContainerClick}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <>
+      <div
+        ref={containerRef}
+        className={`prose-content text-[13px] text-ink leading-relaxed select-text ${className}`}
+        onClick={handleContainerClick}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      {diagram && <DiagramViewer {...diagram} onClose={closeDiagram} />}
+    </>
   );
 }

package/src/client/components/common/code-editor/history.test.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  continuesTyping,
+  createHistory,
+  mergeTyping,
+  pushEdit,
+  pushRecord,
+  stepHistory,
+  HISTORY_TIME_GAP,
+  type HistoryRecord,
+} from '@/client/components/common/code-editor/history';
+
+const NOW = 1_700_000_000_000;
+
+function record(value: string, caret: number, timestamp = NOW): HistoryRecord {
+  return { value, selectionStart: caret, selectionEnd: caret, timestamp };
+}
+
+describe('pushRecord', () => {
+  test('appends and moves the current position', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+
+    expect(history.stack.map((entry) => entry.value)).toEqual(['a', 'ab']);
+    expect(history.offset).toBe(1);
+  });
+
+  test('drops the redo entries that follow the current position', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+    history.offset = 0;
+
+    pushRecord(history, record('ax', 2));
+
+    expect(history.stack.map((entry) => entry.value)).toEqual(['a', 'ax']);
+    expect(history.offset).toBe(1);
+  });
+});
+
+describe('pushEdit', () => {
+  test('caps the stack and keeps the position on the newest entry', () => {
+    const history = createHistory();
+    for (let i = 0; i < 120; i++) pushEdit(history, record(`v${i}`, 0, NOW + i));
+
+    expect(history.stack.length).toBe(100);
+    expect(history.stack[history.offset].value).toBe('v119');
+  });
+});
+
+describe('continuesTyping', () => {
+  const previous = record('const value = 1', 15);
+
+  test('merges a keystroke that keeps extending the same word', () => {
+    expect(continuesTyping(previous, 'const value = 12', 16, NOW + 100)).toBe(true);
+  });
+
+  test('starts a new entry once the burst window has passed', () => {
+    expect(continuesTyping(previous, 'const value = 12', 16, NOW + HISTORY_TIME_GAP + 1)).toBe(false);
+  });
+
+  test('does not merge a different word or a fresh word', () => {
+    expect(continuesTyping(record('const value', 11), 'const other', 11, NOW + 100)).toBe(false);
+    expect(continuesTyping(undefined, 'const value = 12', 16, NOW + 100)).toBe(false);
+  });
+});
+
+describe('mergeTyping', () => {
+  test('rewrites the current entry in place', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    mergeTyping(history, 'ab', 2, 2, NOW + 50);
+
+    expect(history.stack).toHaveLength(1);
+    expect(history.stack[0].value).toBe('ab');
+    expect(history.stack[0].selectionStart).toBe(2);
+  });
+
+  test('invalidates the redo entries after the current position', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+    history.offset = 0;
+
+    mergeTyping(history, 'ax', 2, 2, NOW + 50);
+
+    expect(history.stack.map((entry) => entry.value)).toEqual(['ax']);
+  });
+});
+
+describe('stepHistory', () => {
+  test('walks back and forward through the stack', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+
+    expect(stepHistory(history, 'undo')?.value).toBe('a');
+    expect(history.offset).toBe(0);
+    expect(stepHistory(history, 'redo')?.value).toBe('ab');
+    expect(history.offset).toBe(1);
+  });
+
+  test('stops at both ends without moving', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+
+    expect(stepHistory(history, 'redo')).toBeNull();
+    expect(stepHistory(history, 'undo')).toBeNull();
+    expect(history.offset).toBe(0);
+  });
+});

package/src/client/components/common/code-editor/history.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Undo history for the code editor.
+ *
+ * The editor cannot lean on the browser's own undo: it renders a transparent
+ * `<textarea>` over a highlighted `<pre>`, so a native undo would desync the two
+ * layers. Every entry therefore stores the whole buffer plus the caret, and this
+ * module is the bookkeeping behind ⌘Z / ⇧⌘Z — push, merge a typing burst into
+ * the word being typed, cap the stack, and step through it.
+ */
+
+export interface HistoryRecord {
+  value: string;
+  selectionStart: number;
+  selectionEnd: number;
+  timestamp: number;
+}
+
+export interface History {
+  stack: HistoryRecord[];
+  offset: number;
+}
+
+const HISTORY_LIMIT = 100;
+/** Typing within this window of the previous edit merges into that entry. */
+export const HISTORY_TIME_GAP = 3000;
+/** The word the caret sits at the end of, which is what a burst keeps extending. */
+const WORD_TAIL = /[^a-z0-9]([a-z0-9]+)$/i;
+
+export function createHistory(): History {
+  return { stack: [], offset: -1 };
+}
+
+/** Append `record`, dropping the redo entries that follow the current position. */
+export function pushRecord(history: History, record: HistoryRecord): void {
+  if (history.stack.length && history.offset > -1) {
+    history.stack = history.stack.slice(0, history.offset + 1);
+  }
+  history.stack.push(record);
+  history.offset = history.stack.length - 1;
+}
+
+/** Push an edit and cap the stack, leaving `offset` on the same entry. */
+export function pushEdit(history: History, record: HistoryRecord): void {
+  pushRecord(history, record);
+  if (history.stack.length <= HISTORY_LIMIT) return;
+  const extras = history.stack.length - HISTORY_LIMIT;
+  history.stack = history.stack.slice(extras);
+  history.offset = Math.max(history.offset - extras, 0);
+}
+
+/** The tail word of the line `position` sits on. */
+function tailWord(value: string, position: number): string | undefined {
+  return value.substring(0, position).split('\n').pop()?.match(WORD_TAIL)?.[1];
+}
+
+/**
+ * Whether a change keeps typing the word the previous entry ended with — the
+ * test that folds a run of keystrokes into one undoable edit.
+ */
+export function continuesTyping(
+  last: HistoryRecord | undefined,
+  next: string,
+  selectionStart: number,
+  timestamp: number,
+): boolean {
+  if (!last || timestamp - last.timestamp >= HISTORY_TIME_GAP) return false;
+  const previous = tailWord(last.value, last.selectionStart);
+  const current = tailWord(next, selectionStart);
+  return Boolean(previous && current?.startsWith(previous));
+}
+
+/** Fold a continuation into the current entry, which stays the current position. */
+export function mergeTyping(
+  history: History,
+  next: string,
+  selectionStart: number,
+  selectionEnd: number,
+  timestamp: number,
+): void {
+  // A merge is an edit like any other, so it drops the redo entries after it —
+  // otherwise typing straight after an undo would leave a stale redo target.
+  history.stack = history.stack.slice(0, history.offset + 1);
+  history.stack[history.offset] = { value: next, selectionStart, selectionEnd, timestamp };
+}
+
+/**
+ * Step one entry back (undo) or forward (redo) and return the buffer to
+ * restore, or null at either end of the stack.
+ */
+export function stepHistory(history: History, direction: 'undo' | 'redo'): HistoryRecord | null {
+  const index = direction === 'undo' ? history.offset - 1 : history.offset + 1;
+  const record = history.stack[index];
+  if (!record) return null;
+  history.offset = direction === 'undo' ? Math.max(index, 0) : Math.min(index, history.stack.length - 1);
+  return record;
+}