ompchamber 0.3.0

package/src/shared/lib/code/highlighter.ts

@@ -0,0 +1,135 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createHighlighterCore } from 'shiki/core';
+import type { HighlighterCore, LanguageRegistration } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import oneLight from '@shikijs/themes/one-light';
+import oneDarkPro from '@shikijs/themes/one-dark-pro';
+
+import { EAGER_LANGS, LANG_LOADERS } from '@/shared/lib/code/shiki-langs';
+import { SHIKI_LIGHT } from '@/shared/lib/code/shiki-themes';
+
+/** Shape of a `@shikijs/langs/*` module (the registration array sits on `.default`). */
+type LangModule = { default: LanguageRegistration[] };
+
+/**
+ * The transpile cost of the first highlight for a grammar is ~700 ms, so warming
+ * all 58 would stall readiness. Cap the warmup: if the eager set is not done in
+ * this budget the rest load lazily on first use instead of blocking boot.
+ */
+const WARMUP_BUDGET_MS = 1500;
+
+let instance: HighlighterCore | null = null;
+let ready = false;
+const listeners = new Set<() => void>();
+
+/** HTML-escape `&`, `<`, `>` so plain fallback output stays injection-safe. */
+export function escapeCode(code: string): string {
+  return code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function notify(): void {
+  const pending = [...listeners];
+  listeners.clear();
+  for (const fn of pending) {
+    try {
+      fn();
+    } catch {
+      // A listener must never break the others.
+    }
+  }
+}
+
+/**
+ * Register every grammar so `getLoadedLanguages()` covers the full registry
+ * from the first paint-after-ready. Registration is a parallel chunk fetch
+ * (fast); the expensive per-grammar transpile stays in `warmup` below.
+ */
+async function loadAllLanguages(highlighter: HighlighterCore): Promise<void> {
+  await Promise.allSettled(
+    Object.keys(LANG_LOADERS).map(async (id) => {
+      const loader = LANG_LOADERS[id];
+      if (!loader) return;
+      try {
+        await highlighter.loadLanguage(loader as () => Promise<LangModule>);
+      } catch {
+        // Grammar unavailable under the JS engine — per-call fallback covers it.
+      }
+    }),
+  );
+}
+
+/** Pre-transpile the eager grammars; each failure is independent and ignored. */
+async function warmup(highlighter: HighlighterCore): Promise<void> {
+  await Promise.all(
+    EAGER_LANGS.map(async (id) => {
+      try {
+        highlighter.codeToHtml('x', { lang: id, theme: SHIKI_LIGHT });
+      } catch {
+        // Grammar unavailable under the JS engine — falls back to plain text.
+      }
+    }),
+  );
+}
+
+async function boot(): Promise<HighlighterCore | null> {
+  if (typeof window === 'undefined') return null;
+  try {
+    const highlighter = await createHighlighterCore({
+      themes: [oneLight, oneDarkPro],
+      langs: [],
+      engine: createJavaScriptRegexEngine({ forgiving: true }),
+    });
+    instance = highlighter;
+    await loadAllLanguages(highlighter);
+    await Promise.race([warmup(highlighter), delay(WARMUP_BUDGET_MS)]);
+    ready = true;
+    notify();
+    return highlighter;
+  } catch (error) {
+    console.error('[shiki] highlighter boot failed', error);
+    return null;
+  }
+}
+
+/**
+ * Memoized once per page load — never call `createHighlighterCore` in a hot path.
+ * Boot is lazy (starts on the first `bootSyntax()` call, not at import time) so
+ * the module stays side-effect free: safe to import in SSR/test runtimes where
+ * `boot()` immediately resolves `null`, and tests can stub `window` before booting.
+ */
+let readyPromise: Promise<HighlighterCore | null> | null = null;
+
+/** Resolves with the shared highlighter, or `null` when boot failed / SSR. */
+export function bootSyntax(): Promise<HighlighterCore | null> {
+  if (!readyPromise) readyPromise = boot();
+  return readyPromise;
+}
+
+export function isSyntaxReady(): boolean {
+  return ready;
+}
+
+/** Subscribe to readiness. Returns an unsubscribe fn; fires immediately if already ready. */
+export function onSyntaxReady(fn: () => void): () => void {
+  if (ready) {
+    fn();
+    return () => {};
+  }
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+}
+
+/** The highlighter, or `null` before warmup completes. */
+export function getHighlighterSync(): HighlighterCore | null {
+  return ready ? instance : null;
+}

package/src/shared/lib/code/parser.ts

@@ -0,0 +1,237 @@
+export interface DirEntry {
+  indent: number;
+  isDir: boolean;
+  name: string;
+  size?: string;
+  time?: string;
+}
+
+export interface DirListingResult {
+  isDirectory: boolean;
+  entries: DirEntry[];
+  notice?: string;
+}
+
+export function parseDirListing(text: string): DirListingResult {
+  const lines = text.split(/\r?\n/).filter(Boolean);
+  if (lines.length === 0) return { isDirectory: false, entries: [] };
+
+  const firstLine = lines[0].trim();
+  const hasTreePattern = lines.some((l) => l.trimStart().startsWith('- ') || l.trimStart().startsWith('├──') || l.trimStart().startsWith('└──'));
+  if (firstLine !== '.' && !hasTreePattern) {
+    return { isDirectory: false, entries: [] };
+  }
+
+  const entries: DirEntry[] = [];
+  let notice: string | undefined;
+
+  for (const line of lines) {
+    if (line.startsWith('[') && line.endsWith(']')) {
+      notice = line.slice(1, -1);
+      continue;
+    }
+    if (line.trim() === '.') {
+      entries.push({ indent: 0, isDir: true, name: '.' });
+      continue;
+    }
+
+    const match = line.match(/^(\s*)-\s+([^\s]+)\s*(.*)$/);
+    if (match) {
+      const indent = Math.floor(match[1].length / 2);
+      const rawName = match[2];
+      const remainder = match[3].trim();
+      const isDir = rawName.endsWith('/');
+      const name = isDir ? rawName.slice(0, -1) : rawName;
+
+      let size: string | undefined;
+      let time: string | undefined;
+
+      const remParts = remainder.split(/\s{2,}|\t+/).filter(Boolean);
+      if (remParts.length === 2) {
+        size = remParts[0];
+        time = remParts[1];
+      } else if (remParts.length === 1) {
+        if (remParts[0].endsWith('ago')) time = remParts[0];
+        else size = remParts[0];
+      }
+
+      entries.push({ indent, isDir, name, size, time });
+    }
+  }
+
+  return { isDirectory: entries.length > 0, entries, notice };
+}
+
+export interface ParsedCodeLine {
+  lineNum: number | string;
+  code: string;
+}
+
+export interface ParsedCodeResult {
+  lines: ParsedCodeLine[];
+  cleanCode: string;
+  hasLineNumbers: boolean;
+}
+
+export interface NumberedCodeOptions {
+  startLine?: number;
+  lineNumbers?: (number | string | null | undefined)[];
+}
+
+/**
+ * Parses raw code output to detect and clean embedded line numbers (e.g. "1: export...", "10:  |...").
+ * Ensures code indentation and line numbers align straight with mathematical precision.
+ */
+export function parseNumberedCode(rawText: string, options?: NumberedCodeOptions): ParsedCodeResult {
+  const trimmedEnd = rawText.replace(/\r?\n$/, '');
+  const rawLines = trimmedEnd.split(/\r?\n/);
+  if (rawLines.length === 0) {
+    return { lines: [], cleanCode: '', hasLineNumbers: false };
+  }
+
+  interface MatchItem {
+    lineNum: number;
+    rawLine: string;
+    pipePrefixLen?: number;
+  }
+
+  const matches: (MatchItem | null)[] = [];
+  let validColonCount = 0;
+  let validPipeCount = 0;
+
+  for (const line of rawLines) {
+    if (!line.trim()) {
+      matches.push(null);
+      continue;
+    }
+
+    // Pattern 1: Digits followed by colon: e.g. "1: export", "10:  |", "  45: const"
+    const colonMatch = line.match(/^(\s*(\d+):)/);
+    if (colonMatch) {
+      const num = parseInt(colonMatch[2], 10);
+      matches.push({ lineNum: num, rawLine: line });
+      validColonCount++;
+      continue;
+    }
+
+    // Pattern 2: Digits followed by pipe/bar: e.g. "1 | export" or "  10 │ const"
+    const pipeMatch = line.match(/^(\s*(\d+)\s*[|│][ \t]?)/);
+    if (pipeMatch) {
+      const num = parseInt(pipeMatch[2], 10);
+      matches.push({ lineNum: num, rawLine: line, pipePrefixLen: pipeMatch[1].length });
+      validPipeCount++;
+      continue;
+    }
+
+    matches.push(null);
+  }
+
+  const nonEmptyLines = rawLines.filter((l) => l.trim().length > 0);
+  const isPipeNumbered = validPipeCount >= 2 && validPipeCount >= nonEmptyLines.length * 0.7;
+  const isColonNumbered =
+    !isPipeNumbered &&
+    validColonCount >= 2 &&
+    validColonCount >= nonEmptyLines.length * 0.7 &&
+    (() => {
+      const nums = matches.filter((m): m is MatchItem => m !== null).map((m) => m.lineNum);
+      for (let i = 1; i < nums.length; i++) {
+        if (nums[i] < nums[i - 1]) return false;
+      }
+      return true;
+    })();
+
+  if (!isPipeNumbered && !isColonNumbered) {
+    // Un-numbered code
+    const explicitNumbers = options?.lineNumbers;
+    const startLine =
+      typeof options?.startLine === 'number' && !isNaN(options.startLine) && options.startLine > 0
+        ? options.startLine
+        : 1;
+
+    const lines: ParsedCodeLine[] = rawLines.map((code, idx) => {
+      let lineNum: number | string;
+      if (explicitNumbers && idx < explicitNumbers.length) {
+        const item = explicitNumbers[idx];
+        lineNum = item === null || item === undefined || item === '' ? '…' : item;
+      } else {
+        lineNum = startLine + idx;
+      }
+      return {
+        lineNum,
+        code,
+      };
+    });
+
+    return {
+      lines,
+      cleanCode: rawLines.join('\n'),
+      hasLineNumbers: Boolean((explicitNumbers && explicitNumbers.length > 0) || startLine > 1),
+    };
+  }
+
+  // Handle pipe format
+  if (isPipeNumbered) {
+    let currentNum = matches.find((m) => m !== null)?.lineNum ?? 1;
+    const lines: ParsedCodeLine[] = [];
+    for (let i = 0; i < rawLines.length; i++) {
+      const rawLine = rawLines[i];
+      const m = matches[i];
+      if (!rawLine.trim()) {
+        lines.push({ lineNum: currentNum, code: '' });
+        currentNum++;
+      } else if (m && m.pipePrefixLen !== undefined) {
+        lines.push({ lineNum: m.lineNum, code: rawLine.slice(m.pipePrefixLen) });
+        currentNum = m.lineNum + 1;
+      } else {
+        lines.push({ lineNum: currentNum, code: rawLine });
+        currentNum++;
+      }
+    }
+    return {
+      lines,
+      cleanCode: lines.map((l) => l.code).join('\n'),
+      hasLineNumbers: true,
+    };
+  }
+
+  // Handle colon format (e.g. "1: export...", "10:  |...")
+  const validMatched = matches.filter((m): m is MatchItem => m !== null);
+  const maxDigits = String(Math.max(...validMatched.map((m) => m.lineNum))).length;
+
+  // Determine starting column of code:
+  let prefixCol = maxDigits + 1;
+  const nonEmptyMatched = validMatched.filter((m) => m.rawLine.length > prefixCol);
+  if (nonEmptyMatched.length > 0 && nonEmptyMatched.every((m) => m.rawLine[prefixCol] === ' ' || m.rawLine[prefixCol] === '\t')) {
+    prefixCol++;
+  }
+
+  let currentNum = validMatched[0]?.lineNum ?? 1;
+  const lines: ParsedCodeLine[] = [];
+
+  for (let i = 0; i < rawLines.length; i++) {
+    const rawLine = rawLines[i];
+    const m = matches[i];
+
+    if (!rawLine.trim()) {
+      lines.push({ lineNum: currentNum, code: '' });
+      currentNum++;
+      continue;
+    }
+
+    if (m) {
+      currentNum = m.lineNum;
+      const code = rawLine.length <= prefixCol ? '' : rawLine.slice(prefixCol);
+      lines.push({ lineNum: m.lineNum, code });
+      currentNum = m.lineNum + 1;
+    } else {
+      lines.push({ lineNum: currentNum, code: rawLine });
+      currentNum++;
+    }
+  }
+
+  return {
+    lines,
+    cleanCode: lines.map((l) => l.code).join('\n'),
+    hasLineNumbers: true,
+  };
+}

package/src/shared/lib/code/shiki-langs.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Single source of truth for the Shiki grammars this app can highlight.
+ *
+ * Keys are Shiki language ids (hyphens included: `objective-c`, `dockerfile`)
+ * so a key can be passed straight to `highlighter.codeToHtml({ lang })`.
+ * Every value is a lazy dynamic import, so a grammar is only fetched when the
+ * highlighter actually loads it — the initial bundle stays small.
+ */
+
+export const LANG_LOADERS: Record<string, () => Promise<unknown>> = {
+  typescript: () => import('@shikijs/langs/typescript'),
+  tsx: () => import('@shikijs/langs/tsx'),
+  javascript: () => import('@shikijs/langs/javascript'),
+  jsx: () => import('@shikijs/langs/jsx'),
+  json: () => import('@shikijs/langs/json'),
+  markdown: () => import('@shikijs/langs/markdown'),
+  css: () => import('@shikijs/langs/css'),
+  bash: () => import('@shikijs/langs/bash'),
+  diff: () => import('@shikijs/langs/diff'),
+  yaml: () => import('@shikijs/langs/yaml'),
+  html: () => import('@shikijs/langs/html'),
+  python: () => import('@shikijs/langs/python'),
+  go: () => import('@shikijs/langs/go'),
+  rust: () => import('@shikijs/langs/rust'),
+  sql: () => import('@shikijs/langs/sql'),
+  toml: () => import('@shikijs/langs/toml'),
+  java: () => import('@shikijs/langs/java'),
+  c: () => import('@shikijs/langs/c'),
+  cpp: () => import('@shikijs/langs/cpp'),
+  csharp: () => import('@shikijs/langs/csharp'),
+  ruby: () => import('@shikijs/langs/ruby'),
+  php: () => import('@shikijs/langs/php'),
+  kotlin: () => import('@shikijs/langs/kotlin'),
+  swift: () => import('@shikijs/langs/swift'),
+  scala: () => import('@shikijs/langs/scala'),
+  lua: () => import('@shikijs/langs/lua'),
+  perl: () => import('@shikijs/langs/perl'),
+  dockerfile: () => import('@shikijs/langs/dockerfile'),
+  ini: () => import('@shikijs/langs/ini'),
+  properties: () => import('@shikijs/langs/properties'),
+  zig: () => import('@shikijs/langs/zig'),
+  elixir: () => import('@shikijs/langs/elixir'),
+  dart: () => import('@shikijs/langs/dart'),
+  ocaml: () => import('@shikijs/langs/ocaml'),
+  haskell: () => import('@shikijs/langs/haskell'),
+  nix: () => import('@shikijs/langs/nix'),
+  hcl: () => import('@shikijs/langs/hcl'),
+  graphql: () => import('@shikijs/langs/graphql'),
+  solidity: () => import('@shikijs/langs/solidity'),
+  r: () => import('@shikijs/langs/r'),
+  julia: () => import('@shikijs/langs/julia'),
+  erlang: () => import('@shikijs/langs/erlang'),
+  clojure: () => import('@shikijs/langs/clojure'),
+  scheme: () => import('@shikijs/langs/scheme'),
+  racket: () => import('@shikijs/langs/racket'),
+  protobuf: () => import('@shikijs/langs/protobuf'),
+  makefile: () => import('@shikijs/langs/makefile'),
+  powershell: () => import('@shikijs/langs/powershell'),
+  json5: () => import('@shikijs/langs/json5'),
+  less: () => import('@shikijs/langs/less'),
+  scss: () => import('@shikijs/langs/scss'),
+  sass: () => import('@shikijs/langs/sass'),
+  stylus: () => import('@shikijs/langs/stylus'),
+  'objective-c': () => import('@shikijs/langs/objective-c'),
+  groovy: () => import('@shikijs/langs/groovy'),
+  vue: () => import('@shikijs/langs/vue'),
+  svelte: () => import('@shikijs/langs/svelte'),
+  astro: () => import('@shikijs/langs/astro'),
+  xml: () => import('@shikijs/langs/xml'),
+};
+
+/**
+ * Languages pre-transpiled during boot. The first highlight of a grammar costs
+ * ~700 ms to transpile, so warming all 58 would delay readiness by minutes;
+ * these are the ones the chat timeline hits on nearly every session.
+ */
+export const EAGER_LANGS = [
+  'typescript',
+  'tsx',
+  'javascript',
+  'jsx',
+  'json',
+  'bash',
+  'python',
+  'markdown',
+  'yaml',
+  'diff',
+];

package/src/shared/lib/code/shiki-themes.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const SHIKI_LIGHT = 'one-light';
+export const SHIKI_DARK = 'one-dark-pro';
+
+export const SHIKI_THEMES = { light: SHIKI_LIGHT, dark: SHIKI_DARK } as const;
+
+/** Collapse any app theme id to the syntax theme key it uses. */
+export function resolveSyntaxThemeKey(theme?: string): 'light' | 'dark' {
+  return theme === 'noir' || theme === 'one-dark-pro-soft' ? 'dark' : 'light';
+}

package/src/shared/lib/code/syntax-highlight.test.ts

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { beforeAll, describe, expect, test } from 'bun:test';
+
+import { bootSyntax } from '@/shared/lib/code/highlighter';
+import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
+
+/** Shiki emits `<span class="shiki">…` with dual-theme CSS variables per token. */
+const SHIKI_RE = /<span class="shiki">/;
+const SHIKI_TOKEN_RE = /--shiki-light:/;
+
+beforeAll(async () => {
+  // The isomorphic highlighter only boots with `window` present; the Bun test
+  // runtime has none. Stub it, boot, then remove the stub so other test files
+  // see a pristine global.
+  Object.assign(globalThis, { window: globalThis });
+  await bootSyntax();
+  Reflect.deleteProperty(globalThis, 'window');
+});
+
+describe('highlightCode', () => {
+  // Regression guard: when the highlighter fails to boot, highlightCode falls
+  // back to escaped plain text. Asserting on emitted token spans fails loudly
+  // if that fallback is ever taken.
+  test('emits Shiki token markup rather than falling back to escaped text', () => {
+    const html = highlightCode('const x: number = 42; // hi', 'typescript');
+
+    expect(html).toMatch(SHIKI_RE);
+    expect(html).toMatch(SHIKI_TOKEN_RE);
+  });
+
+  test('emits both light and dark theme variables per token', () => {
+    const html = highlightCode('const x = 1;', 'javascript');
+
+    expect(html).toContain('--shiki-light:');
+    expect(html).toContain('--shiki-dark:');
+    expect(html).not.toContain('color:');
+  });
+
+  test('highlights php', () => {
+    const html = highlightCode('<?php echo "hi"; ?>', 'php');
+
+    expect(html).toMatch(SHIKI_TOKEN_RE);
+  });
+
+  test.each([
+    ['typescript', 'const x: number = 42;'],
+    ['python', 'def foo():\n    return "bar"'],
+    ['go', 'package main\nfunc main() {}'],
+    ['rust', 'fn main() { println!("x"); }'],
+    ['sql', 'SELECT * FROM t WHERE a = 1'],
+    ['json', '{"k": true, "n": 1}'],
+    ['html', '<div class="a">x</div>'],
+    ['yaml', 'key: value'],
+    ['bash', 'echo "$HOME"'],
+    ['css', '.a { color: red; }'],
+  ])('tokenizes %s', (language, code) => {
+    expect(highlightCode(code, language)).toMatch(SHIKI_TOKEN_RE);
+  });
+
+  test('returns empty string for empty input', () => {
+    expect(highlightCode('', 'typescript')).toBe('');
+  });
+
+  test('falls back to javascript for an unknown language', () => {
+    expect(highlightCode('const x = 1;', 'not-a-language')).toMatch(SHIKI_TOKEN_RE);
+  });
+
+  test('escapes angle brackets so highlighted output is injection-safe', () => {
+    const html = highlightCode('<script>alert(1)</script>', 'html');
+
+    expect(html).not.toContain('<script>');
+    expect(html).toMatch(/&(lt|#x3C;)/);
+  });
+});
+
+describe('getLanguageFromPath', () => {
+  test.each([
+    ['a.ts', 'typescript'],
+    ['a.tsx', 'tsx'],
+    ['a.js', 'javascript'],
+    ['a.jsx', 'jsx'],
+    ['a.json', 'json'],
+    ['a.md', 'markdown'],
+    ['a.css', 'css'],
+    ['a.sh', 'bash'],
+    ['a.yaml', 'yaml'],
+    ['a.yml', 'yaml'],
+    ['a.html', 'html'],
+    ['a.svg', 'xml'],
+    ['a.xml', 'xml'],
+    ['a.py', 'python'],
+    ['a.go', 'go'],
+    ['a.rs', 'rust'],
+    ['a.sql', 'sql'],
+    ['a.toml', 'toml'],
+    ['a.java', 'java'],
+    ['a.php', 'php'],
+    ['a.vue', 'vue'],
+    ['a.svelte', 'svelte'],
+    ['a.astro', 'astro'],
+  ])('maps %s to %s', (path, expected) => {
+    expect(getLanguageFromPath(path)).toBe(expected);
+  });
+
+  test('strips a trailing line-range suffix', () => {
+    expect(getLanguageFromPath('src/a.ts:12-30')).toBe('typescript');
+  });
+
+  test('strips query and hash fragments', () => {
+    expect(getLanguageFromPath('src/a.ts?x=1#L4')).toBe('typescript');
+  });
+
+  test('defaults to javascript when the path is missing', () => {
+    expect(getLanguageFromPath()).toBe('javascript');
+  });
+
+  test.each([
+    ['a.zig', 'zig'],
+    ['a.ex', 'elixir'],
+    ['a.dart', 'dart'],
+    ['a.ml', 'ocaml'],
+    ['a.hs', 'haskell'],
+    ['a.nix', 'nix'],
+    ['a.tf', 'hcl'],
+    ['a.graphql', 'graphql'],
+    ['a.sol', 'solidity'],
+    ['a.r', 'r'],
+    ['a.jl', 'julia'],
+    ['a.erl', 'erlang'],
+    ['a.cljs', 'clojure'],
+    ['a.scm', 'scheme'],
+    ['a.rkt', 'racket'],
+    ['a.proto', 'protobuf'],
+    ['a.ps1', 'powershell'],
+    ['a.json5', 'json5'],
+    ['a.less', 'less'],
+    ['a.scss', 'scss'],
+    ['a.sass', 'sass'],
+    ['a.styl', 'stylus'],
+    ['a.m', 'objective-c'],
+    ['a.gradle', 'groovy'],
+  ])('maps trending %s to %s', (path, expected) => {
+    expect(getLanguageFromPath(path)).toBe(expected);
+  });
+
+  test('maps a bare Makefile via the lowercased last segment', () => {
+    expect(getLanguageFromPath('Makefile')).toBe('makefile');
+  });
+});