ompchamber 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "1.2.0",
+  "version": "2.0.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>",
@@ -49,7 +49,6 @@
     "@fontsource/fira-code": "^5.3.0",
     "@shikijs/langs": "^4.4.3",
     "@shikijs/themes": "^4.4.3",
-    "@tailwindcss/typography": "^0.5.20",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
@@ -63,7 +62,8 @@
     "preact": "^10.29.8",
     "remend": "^1.3.1",
     "ripgrep": "^0.3.1",
-    "shiki": "^4.4.3"
+    "shiki": "^4.4.3",
+    "yaml": "^2.9.1"
   },
   "devDependencies": {
     "@rsbuild/core": "^2.2.7",

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

@@ -19,6 +19,13 @@ export interface ComposerTextareaProps {
   className?: string;
   onPaste?: (e: ClipboardEvent<HTMLTextAreaElement>) => void;
   rootPath?: string | null;
+  /**
+   * Whether the `@` / `/` / `!` / `#` autocomplete runs. Off for a composer with
+   * nothing to complete against — the side-question form has no file tree, no
+   * commands and no skills, and an `@` mention left in its text would reach the
+   * model as a literal no prompt builder translates.
+   */
+  enablePicker?: boolean;
   /**
    * `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
@@ -39,12 +46,13 @@ export function ComposerTextarea({
   className,
   onPaste,
   rootPath,
+  enablePicker = true,
   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 });
+  const composer = useComposerTrigger({ value, setValue: onChange, textareaRef, disabled, rootPath, enabled: enablePicker });
 
   useOnClickOutside(wrapperRef, composer.close);
 

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

@@ -16,10 +16,12 @@
 import type { TargetedMouseEvent } from 'preact';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { renderMarkdown } from '@/shared/lib/markdown/marked';
+import { rewriteDocumentReferences, type DocumentScope } from '@/shared/lib/markdown/document-urls';
 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 { openFileInEditor } from '@/client/hooks/ui/open-file';
 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';
@@ -30,9 +32,17 @@ const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : us
 interface MarkdownRendererProps {
   content: string;
   className?: string;
+  /**
+   * Render the content as the document it IS (an opened file's preview) rather
+   * than as agent output: the source's own HTML renders as markup instead of
+   * showing its tags, and relative references resolve against `scope`.
+   */
+  document?: boolean;
+  /** Where the document lives, so its relative links and images resolve. */
+  scope?: DocumentScope;
 }
 
-export function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+export function MarkdownRenderer({ content, className = '', document: isDocument = false, scope }: 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);
@@ -40,15 +50,24 @@ export function MarkdownRenderer({ content, className = '' }: MarkdownRendererPr
 
   const syntaxReady = useSyntaxReady();
 
+  // Primitive deps: call sites build `scope` inline, and a new object identity
+  // per render would re-run marked + DOMPurify over the whole document.
+  const scopePath = scope?.path;
+  const scopeRoot = scope?.root;
+  const scopeRepo = scope?.repo;
+
   const html = useMemo(() => {
     if (!content) return '';
-    const rendered = renderMarkdown(content);
+    const rendered = renderMarkdown(content, { allowHtml: isDocument });
+    const scoped = isDocument && scopePath
+      ? rewriteDocumentReferences(rendered, { path: scopePath, root: scopeRoot, repo: scopeRepo })
+      : rendered;
     // If the message contains math, start fetching KaTeX during parse rather
     // than waiting for the post-mount hydration effect — the request overlaps
     // sanitization and the rest of the render instead of following it.
-    if (rendered.includes(MATH_PENDING_CLASS)) preloadKatex();
-    return sanitizeHtml(rendered);
-  }, [content, syntaxReady]);
+    if (scoped.includes(MATH_PENDING_CLASS)) preloadKatex();
+    return sanitizeHtml(scoped);
+  }, [content, syntaxReady, isDocument, scopePath, scopeRoot, scopeRepo]);
 
   const hasMermaid = html.includes('mermaid-block');
   const hasMath = html.includes(MATH_PENDING_CLASS);
@@ -154,15 +173,34 @@ export function MarkdownRenderer({ content, className = '' }: MarkdownRendererPr
     }
 
     // A rendered diagram is a door into the zoom/pan viewer; pending, failed,
-    // and still-streaming blocks stay inert.
+    // and still-streaming blocks stay inert. It is checked before the document
+    // links below so a diagram's own anchors never steal its click.
     const block = (e.target as HTMLElement).closest<HTMLElement>('.mermaid-block[data-mermaid-state="done"]');
-    if (!block) return;
-    const snapshot = readDiagramBlock(block);
-    if (!snapshot) return;
+    if (block) {
+      const snapshot = readDiagramBlock(block);
+      if (!snapshot) return;
+      e.preventDefault();
+      diagramBlockRef.current = block;
+      setDiagram(snapshot);
+      return;
+    }
+
+    if (!isDocument) return;
+
+    // A document's own links: a relative one is rewritten to the workspace
+    // file it names, so it belongs in an editor tab rather than in a top-level
+    // navigation off the console; an external one leaves the console.
+    const link = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href]');
+    if (!link) return;
     e.preventDefault();
-    diagramBlockRef.current = block;
-    setDiagram(snapshot);
-  }, []);
+    e.stopPropagation();
+    const filePath = link.dataset.filePath;
+    if (filePath) {
+      openFileInEditor({ path: filePath, root: scopeRoot, repo: scopeRepo });
+    } else if (/^https?:/i.test(link.href)) {
+      window.open(link.href, '_blank', 'noopener,noreferrer');
+    }
+  }, [isDocument, scopeRoot, scopeRepo]);
 
   const closeDiagram = useCallback(() => {
     diagramBlockRef.current = null;

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -78,9 +78,15 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
               <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
             </div>
           ) : isMd && isPreview ? (
-            /* Markdown Preview Mode */
-            <div className="p-4 bg-paper text-ink min-h-full font-sans prose prose-sm max-w-none">
-              <MarkdownRenderer content={content} />
+            /* Markdown Preview Mode — styled by `.prose-content` (the chat
+               timeline's system), see the desktop editor for why there is no
+               `prose` wrapper. */
+            <div className="p-4 bg-paper text-ink min-h-full font-sans">
+              <MarkdownRenderer
+                content={content}
+                document
+                scope={{ path: file.path ?? file.name, root: file.root, repo: file.repo }}
+              />
             </div>
           ) : (
             /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */

package/src/client/components/settings/Modal.tsx

@@ -2,8 +2,10 @@ import { useEffect, useState } from 'preact/hooks';
 import { Check, ChevronLeft, X } from 'lucide-preact';
 import type { SettingsCategoryId, SettingsState } from '@/shared/types';
 import { mergeChamberSettings } from '@/shared/lib/settings/client';
+import { diffSettings } from '@/shared/lib/settings/diff';
 import { useChamberSettingsWriter } from '@/client/hooks/settings/use-chamber-setting';
 import { applyDocumentTheme } from '@/client/hooks/ui/theme';
+import { DEFAULT_THEME_ID } from '@/shared/lib/theme/catalog';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
 import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
 import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
@@ -35,7 +37,7 @@ const DEFAULT_SETTINGS: SettingsState = {
   showUpdateNotifications: true,
   agentControlTool: true,
   ompChamberWebTool: true,
-  theme: 'paper',
+  theme: DEFAULT_THEME_ID,
   fontSize: 'standard',
   editorFont: 'JetBrains Mono',
   streamResponses: true,
@@ -104,7 +106,14 @@ export function SettingsModal({
       if (typeof document !== 'undefined' && next.theme) {
         applyDocumentTheme(next.theme);
       }
-      writeChamberSettings(next);
+      // Only the keys this update actually touched are persisted. The modal
+      // holds a full `SettingsState` snapshot taken when it opened, so writing
+      // the whole object back would also republish every value it read at that
+      // moment — a tab left open across an external change (another tab, a
+      // `curl` to /api/settings) would silently revert it on the next unrelated
+      // toggle. `theme` in particular is written by the appearance picker and
+      // read by the SSR shell, so the stale copy is not just cosmetic.
+      writeChamberSettings(diffSettings(prev, next, updater));
       return next;
     });
     setToastMessage('Setting was saved');

package/src/client/components/settings/categories/AppearanceSettings.tsx

@@ -1,5 +1,7 @@
-import { Check, Moon, Palette, Sun } from 'lucide-preact';
+import { Palette } from 'lucide-preact';
 import type { SettingsState } from '@/shared/types';
+import { resolveThemeId } from '@/shared/lib/theme/catalog';
+import { ThemeGrid } from '@/client/components/settings/categories/appearance-settings/ThemeGrid';
 
 interface AppearanceSettingsProps {
   settings: SettingsState;
@@ -7,11 +9,6 @@ interface AppearanceSettingsProps {
 }
 
 export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsProps) {
-  const themes = [
-    { id: 'paper', name: 'E-Ink Paper', desc: 'Tema terang bawaan E-Ink Monochrome.', icon: Sun },
-    { id: 'one-dark-pro-soft', name: 'One Dark Pro Soft', desc: 'Tema gelap ala One Dark Pro.', icon: Moon }
-  ] as const;
-
   return (
     <div className="w-full space-y-8 text-xs text-ink">
       <section className="space-y-4">
@@ -20,30 +17,10 @@ export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsPro
           <h3 className="font-semibold text-sm uppercase tracking-wider text-ink/80">Theme Preferences</h3>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          {themes.map(theme => (
-            <button
-              key={theme.id}
-              onClick={() => onUpdate({ theme: theme.id })}
-              className={`flex items-start space-x-3 p-3 rounded-lg border text-left transition-all ${
-                settings.theme === theme.id 
-                  ? 'border-ink bg-ink/5 ring-1 ring-ink/20' 
-                  : 'border-ink/20 bg-paper hover:border-ink/40 hover:bg-ink/5'
-              }`}
-            >
-              <div className={`p-1.5 rounded-full ${settings.theme === theme.id ? 'bg-ink text-paper' : 'bg-canvas text-ink/60'}`}>
-                <theme.icon size={16} />
-              </div>
-              <div className="flex-1">
-                <div className="font-semibold text-ink">{theme.name}</div>
-                <div className="text-ink/60 mt-0.5 leading-relaxed">{theme.desc}</div>
-              </div>
-              {settings.theme === theme.id && (
-                <Check size={16} className="text-ink mt-1" />
-              )}
-            </button>
-          ))}
-        </div>
+        <ThemeGrid
+          selectedId={settings.theme}
+          onSelect={(theme) => onUpdate({ theme: resolveThemeId(theme) })}
+        />
       </section>
     </div>
   );

package/src/client/components/settings/categories/ProviderSettings.tsx

@@ -20,6 +20,7 @@ export function ProviderSettings({
   onAddModalClose,
 }: ProviderSettingsProps) {
   const {
+    providers,
     connectedProviders,
     availablePresetProviders,
     selectedProvider,
@@ -107,6 +108,7 @@ export function ProviderSettings({
         }}
         onAddProvider={handleAddProvider}
         presets={availablePresetProviders}
+        existingSlugs={providers.map((provider) => provider.slug)}
       />
 
       {selectedProvider && (

package/src/client/components/settings/categories/appearance-settings/ThemeCard.tsx

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One theme as a palette card: the name, a light/dark badge, and the eight
+ * colors the theme actually paints with — canvas, surface, ink, error, success,
+ * info, warning and accent.
+ *
+ * The chips are the palette's own hex values, not the live CSS variables, so
+ * the card shows what selecting it will do rather than what is currently on
+ * screen. Hovering a chip names its role; the two surface colors carry the
+ * card's frame, which is why they lead the strip.
+ */
+
+import { Check } from 'lucide-preact';
+import type { ThemePalette } from '@/shared/types/theme';
+import { THEME_SWATCHES } from '@/shared/lib/theme/catalog';
+
+interface ThemeCardProps {
+  theme: ThemePalette;
+  selected: boolean;
+  onSelect: (id: string) => void;
+}
+
+export function ThemeCard({ theme, selected, onSelect }: ThemeCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(theme.id)}
+      aria-pressed={selected}
+      className={`group flex w-full flex-col gap-2.5 rounded-lg border p-2.5 text-left transition-all cursor-pointer ${
+        selected
+          ? 'border-ink bg-ink/5 ring-1 ring-ink/20'
+          : 'border-ink/20 bg-paper hover:border-ink/40 hover:bg-ink/5'
+      }`}
+    >
+      <div className="flex items-center gap-2">
+        <span className="truncate font-semibold text-ink" title={theme.name}>
+          {theme.name}
+        </span>
+        <span className="shrink-0 rounded-full border border-ink/15 px-1.5 py-px text-[9px] font-semibold uppercase tracking-wider text-ink/50">
+          {theme.variant}
+        </span>
+        {selected && <Check size={14} className="ml-auto shrink-0 text-ink" />}
+      </div>
+
+      <div className="flex items-center gap-1">
+        {THEME_SWATCHES.map((swatch) => (
+          <span
+            key={swatch.key}
+            title={`${swatch.label} · ${theme[swatch.key]}`}
+            style={{ backgroundColor: theme[swatch.key] }}
+            className="h-5 flex-1 rounded-[3px] border border-ink/10"
+          />
+        ))}
+      </div>
+    </button>
+  );
+}

package/src/client/components/settings/categories/appearance-settings/ThemeGrid.tsx

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The theme catalog as a filterable grid of palette cards.
+ *
+ * Two axes of grouping, both from the catalog: the light/dark filter narrows
+ * what is shown, and the family grouping keeps a theme's light and dark entries
+ * adjacent (`Nord` and `Nord` rather than `Nord` and `Monokai`). The filter is
+ * local state — it changes nothing about the app, only what the grid lists.
+ */
+
+import { useMemo, useState } from 'preact/hooks';
+import { Moon, Sun } from 'lucide-preact';
+import type { ThemePalette, ThemeVariant } from '@/shared/types/theme';
+import { THEMES } from '@/shared/lib/theme/catalog';
+import { ThemeCard } from '@/client/components/settings/categories/appearance-settings/ThemeCard';
+
+interface ThemeGridProps {
+  selectedId: string;
+  onSelect: (id: string) => void;
+}
+
+type VariantFilter = 'all' | ThemeVariant;
+
+const FILTERS: ReadonlyArray<{ id: VariantFilter; label: string }> = [
+  { id: 'all', label: 'All' },
+  { id: 'light', label: 'Light' },
+  { id: 'dark', label: 'Dark' },
+];
+
+/**
+ * Catalog order is already family-grouped (see `catalog.ts`), so filtering is a
+ * plain pass — a second grouping step here would only risk disagreeing with it.
+ */
+function filterThemes(filter: VariantFilter): readonly ThemePalette[] {
+  return filter === 'all' ? THEMES : THEMES.filter((theme) => theme.variant === filter);
+}
+
+export function ThemeGrid({ selectedId, onSelect }: ThemeGridProps) {
+  const [filter, setFilter] = useState<VariantFilter>('all');
+  const themes = useMemo(() => filterThemes(filter), [filter]);
+
+  return (
+    <div className="space-y-3 pb-6">
+      <div className="flex items-center gap-1.5">
+        {FILTERS.map((option) => (
+          <button
+            key={option.id}
+            type="button"
+            onClick={() => setFilter(option.id)}
+            className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors cursor-pointer ${
+              filter === option.id
+                ? 'border-ink bg-ink text-paper'
+                : 'border-ink/20 bg-paper text-ink/70 hover:border-ink/40 hover:text-ink'
+            }`}
+          >
+            {option.id === 'light' && <Sun size={11} className="mr-1 inline align-[-1px]" />}
+            {option.id === 'dark' && <Moon size={11} className="mr-1 inline align-[-1px]" />}
+            {option.label}
+          </button>
+        ))}
+        <span className="ml-auto font-mono text-[11px] text-ink/50">{themes.length} themes</span>
+      </div>
+
+      <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+        {themes.map((theme) => (
+          <ThemeCard
+            key={theme.id}
+            theme={theme}
+            selected={theme.id === selectedId}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/chat-settings/TitleSection.tsx

@@ -20,7 +20,7 @@ const OPTIONS: Array<{
     badge: 'Default',
     icon: Sparkles,
     description:
-      'After the first run settles, the session is named from the conversation using omp\'s own tiny title model. Sessions stop showing "New Session - <timestamp>" in the sidebar.',
+      'As soon as your first message lands, the session is named from it using omp\'s own tiny title model — retried once when the run ends if that first attempt came back empty. Sessions stop showing "New Session - <timestamp>" in the sidebar.',
     note: 'One small model call per session',
   },
   {

package/src/client/components/settings/categories/provider-settings/AddProviderModal.tsx

@@ -11,13 +11,24 @@ interface AddProviderModalProps {
   onClose: () => void;
   onAddProvider: (newProvider: ProviderItem, options: { fetchedCount: number }) => void;
   presets: PresetProviderOption[];
+  /**
+   * Slugs already present in the omp registry. A new provider's slug becomes a
+   * `models.yml` key, so reusing one silently overwrites that provider's
+   * `baseUrl`, `apiKey`, `api` and per-model metadata — the entry is written
+   * under the same key, not merged into it.
+   */
+  existingSlugs: string[];
 }
 
+/** Slug shape omp accepts as a `models.yml` provider key. */
+const SLUG_PATTERN = /^[a-z0-9][a-z0-9._-]{0,63}$/;
+
 export function AddProviderModal({
   isOpen,
   onClose,
   onAddProvider,
   presets,
+  existingSlugs,
 }: AddProviderModalProps) {
   const presetList = presets;
   const initialPreset = presetList[0];
@@ -42,19 +53,35 @@ export function AddProviderModal({
 
   if (!isOpen) return null;
 
+  const selectedPreset = presetList.find((p) => p.id === selectedPresetId);
+  const trimmedName = name.trim();
+  // Prefer the preset's own slug so a provider lands under the id omp knows it
+  // by; only a renamed provider gets one derived from its display name.
+  const slug = (trimmedName && selectedPreset && trimmedName === selectedPreset.name
+    ? selectedPreset.slug
+    : trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '')
+  ).toLowerCase();
+  const takenSlugs = new Set(existingSlugs.map((value) => value.trim().toLowerCase()));
+  const slugError = !slug
+    ? 'Enter a provider name to derive an id.'
+    : !SLUG_PATTERN.test(slug)
+      ? 'The derived id must start with a letter or digit.'
+      : takenSlugs.has(slug)
+        ? `"${slug}" is already registered in models.yml — connecting it would overwrite that provider. Pick another name.`
+        : '';
+
   const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
-    if (!name.trim() || presetList.length === 0 || isSubmitting) return;
+    if (!trimmedName || presetList.length === 0 || isSubmitting || slugError) return;
     setIsSubmitting(true);
 
     try {
-      const preset = presetList.find((p) => p.id === selectedPresetId);
       const timestamp = Date.now();
       const newProvider: ProviderItem = {
         id: `provider-${timestamp}`,
-        name: name.trim(),
-        slug: name.toLowerCase().replace(/[^a-z0-9]/g, '-') || `provider-${timestamp}`,
-        icon: preset?.icon || 'custom',
+        name: trimmedName,
+        slug,
+        icon: selectedPreset?.icon || 'custom',
         status: 'connected',
         configuredIn: 'auth credentials',
         baseUrl: baseUrl.trim(),
@@ -97,7 +124,7 @@ export function AddProviderModal({
           </button>
           <button
             type="submit"
-            disabled={isSubmitting || presetList.length === 0}
+            disabled={isSubmitting || presetList.length === 0 || Boolean(slugError)}
             className="px-3.5 py-1.5 rounded-md bg-ink text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
           >
             {isSubmitting ? (
@@ -160,6 +187,16 @@ export function AddProviderModal({
           placeholder="e.g. My Provider"
           className="w-full bg-paper border border-ink/20 rounded-md px-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60"
         />
+        {slug && (
+          <p className="text-[10px] text-ink/40 mt-1 font-mono">
+            models.yml id: {slug}
+          </p>
+        )}
+        {slugError && (
+          <p className="text-[11px] text-error mt-1">
+            {slugError}
+          </p>
+        )}
       </div>
 
       {/* Base URL */}