@worca/app 1.0.0 → 1.1.1

package/ui/public/ask-markdown.mjs

@@ -0,0 +1,145 @@
+// ui/public/ask-markdown.mjs — sandboxed markdown for Ask Worca answers
+// (spec §10.7). marked + DOMPurify are lazy-loaded through the injected
+// `load()` (the app wires it to the P2 vendor routes; tests import the same
+// pinned packages directly). Failure latches to plain text after three
+// attempts — the MAX_RESOURCE_FAILURES precedent of hljs-loader.mjs — never an
+// endless retry. Code blocks are highlighted only on ask-done, with the same
+// detached-staging commit rules as hdApplyHighlights (app.js:11235-11260):
+// text must round-trip byte-for-byte and only class-carrying SPANs may appear.
+import { SUPPORTED_LANGUAGE_IDS } from './syntax-highlight.mjs';
+
+const ALLOWED_TAGS = ['p', 'br', 'strong', 'em', 'del', 'code', 'pre', 'ul', 'ol', 'li', 'a',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'input'];
+const ALLOWED_ATTR = ['href', 'class', 'type', 'checked', 'disabled', 'align'];
+const ALLOWED_URI_REGEXP = /^(?:https?:|mailto:|#)/i;
+// DOMPurify tests EVERY non-URI-safe attribute VALUE against ALLOWED_URI_REGEXP;
+// with the strict regexp above, type="checkbox" and align="right" would be
+// dropped (only `class` is URI-safe by default) — the post-pass would then
+// remove every checkbox. These two carry no URL, so marking them URI-safe
+// restores them without loosening the href guard.
+const ADD_URI_SAFE_ATTR = ['type', 'align'];
+const CODE_CLASS_RE = /^language-[A-Za-z0-9_+-]{1,64}$/;
+// hljs primary tokens plus the secondary `word_` scope tokens it appends — a
+// per-token variant of the attribute-level regex at syntax-highlight.mjs:49
+// (that one requires an hljs-* first token per attribute; this one is checked
+// per classList ENTRY, so a `word_` token may stand alone — a deliberate,
+// harmless superset: spans still carry classes only).
+const HLJS_CLASS_RE = /^(?:hljs-[A-Za-z0-9_-]+|[A-Za-z0-9-]+_+)$/;
+const PLAIN_LIMIT = 200_000;
+const MAX_ATTEMPTS = 3;
+
+export const LANGUAGE_ALIASES = Object.freeze({
+  js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'javascript', node: 'javascript',
+  ts: 'typescript', tsx: 'typescript',
+  sh: 'bash', shell: 'bash', zsh: 'bash', console: 'bash',
+  yml: 'yaml', html: 'xml', htm: 'xml', svg: 'xml', vue: 'xml',
+  py: 'python', rb: 'ruby', md: 'markdown', golang: 'go', 'c++': 'cpp', cs: 'csharp', patch: 'diff', toml: 'ini',
+});
+
+const SUPPORTED = new Set(SUPPORTED_LANGUAGE_IDS);
+
+export function createMarkdownRenderer({ doc, load, hljsLoader }) {
+  let mods = null;
+  let loading = null;
+  let attempts = 0;
+  let failed = false;
+
+  function ensure() {
+    if (mods) return Promise.resolve(true);
+    if (failed) return Promise.resolve(false);
+    if (!loading) {
+      loading = Promise.resolve()
+        .then(() => load())
+        .then((loaded) => {
+          const marked = loaded && loaded.marked;
+          const createDOMPurify = loaded && loaded.createDOMPurify;
+          const purifier = typeof createDOMPurify === 'function' ? createDOMPurify(doc.defaultView) : null;
+          if (!marked || typeof marked.parse !== 'function' || !purifier || typeof purifier.sanitize !== 'function') {
+            throw new Error('markdown modules have an unexpected shape');
+          }
+          mods = { marked, purifier };
+          return true;
+        })
+        .catch(() => {
+          attempts += 1;
+          loading = null;
+          if (attempts >= MAX_ATTEMPTS) failed = true;
+          return false;
+        });
+    }
+    return loading;
+  }
+
+  function render(text) {
+    const s = String(text ?? '');
+    if (!mods || failed || s.length > PLAIN_LIMIT) return { kind: 'plain' };
+    let html;
+    try {
+      html = mods.marked.parse(s, { gfm: true, breaks: true, async: false });
+    } catch {
+      return { kind: 'plain' };
+    }
+    let frag;
+    try {
+      frag = mods.purifier.sanitize(html, { ALLOWED_TAGS, ALLOWED_ATTR, ALLOWED_URI_REGEXP, ADD_URI_SAFE_ATTR, RETURN_DOM_FRAGMENT: true });
+    } catch {
+      return { kind: 'plain' };
+    }
+    for (const node of [...frag.querySelectorAll('[class]')]) {
+      const tag = node.tagName;
+      const keep = [...node.classList].filter((c) => (
+        tag === 'CODE' ? CODE_CLASS_RE.test(c) : tag === 'SPAN' ? HLJS_CLASS_RE.test(c) : false
+      ));
+      if (keep.length) node.setAttribute('class', keep.join(' '));
+      else node.removeAttribute('class');
+    }
+    for (const a of [...frag.querySelectorAll('a[href]')]) {
+      const href = a.getAttribute('href') || '';
+      if (/^(?:https?:|mailto:)/i.test(href)) {
+        a.setAttribute('target', '_blank');
+        a.setAttribute('rel', 'noopener noreferrer');
+      }
+    }
+    for (const input of [...frag.querySelectorAll('input')]) {
+      if ((input.getAttribute('type') || '').toLowerCase() !== 'checkbox') { input.remove(); continue; }
+      input.setAttribute('disabled', '');
+    }
+    return { kind: 'md', frag };
+  }
+
+  async function highlight(container) {
+    if (!container || !hljsLoader || failed) return;
+    for (const code of [...container.querySelectorAll('pre > code')]) {
+      const cls = [...code.classList].find((c) => c.startsWith('language-'));
+      if (!cls) continue;
+      const raw = cls.slice('language-'.length).toLowerCase();
+      const lang = SUPPORTED.has(raw) ? raw : LANGUAGE_ALIASES[raw];
+      if (!lang || !SUPPORTED.has(lang)) continue;
+      let binding = null;
+      try { binding = await hljsLoader.forLanguage(lang); } catch { binding = null; }
+      if (!binding) continue;
+      const source = code.textContent;
+      let html = '';
+      try { html = binding.highlight(source); } catch { continue; }
+      // hdApplyHighlights staging rules, verbatim: detached holder, byte-exact
+      // text, SPAN-only markup whose only attribute is a valid class.
+      const holder = doc.createElement('span');
+      holder.innerHTML = html;
+      if (holder.textContent !== source) continue;
+      const els = [...holder.querySelectorAll('*')];
+      const bad = els.some((el) => el.tagName !== 'SPAN'
+        || [...el.attributes].some((attr) => attr.name !== 'class')
+        || [...el.classList].some((c) => !HLJS_CLASS_RE.test(c)));
+      if (bad) continue;
+      code.replaceChildren(...holder.childNodes);
+    }
+  }
+
+  return Object.freeze({
+    ensure,
+    isReady: () => !!mods,
+    isFailed: () => failed,
+    render,
+    highlight,
+  });
+}

package/ui/public/ask-model.mjs

@@ -0,0 +1,264 @@
+// ui/public/ask-model.mjs — DOM-free thread model + ask-* frame reducer for the
+// Ask Worca panel (spec §10.1). One instance per open thread; the panel swaps
+// instances on thread switch. Everything lives in the factory closure — the
+// module is evaluated once per test file even though app.js is re-imported with
+// a cache-buster, so module scope must stay empty of state.
+//
+// Frame classes (spec §6.6 / the P2→P3 contract): job frames carry
+// {threadId, messageId, seq} and are deduped by the per-job monotonic seq;
+// out-of-turn frames (ask-message / ask-title / ask-run-status) upsert by their
+// own key. A seq gap is REPORTED ({gap:true}), never healed here — the panel
+// re-fetches the thread over REST and resubscribes (spec §10.8).
+
+const TERMINAL = new Set(['done', 'stopped', 'error']);
+
+export function createThreadModel({ threadId }) {
+  let thread = { id: threadId, title: null, model: null, effort: null, totals: {}, updatedAt: null };
+  let rows = [];
+  let attachments = [];
+  const links = new Map();
+  let live = null;
+  let inFlight = null;
+  let dirty = newDirty();
+
+  function newDirty() {
+    // runLinks dirt is produced but not yet consumed — no v1 UI renders run links directly; the follower notices carry the visible state.
+    return { structure: false, messages: new Set(), blocks: new Map(), answer: new Set(), label: false, meters: false, title: false, runLinks: false };
+  }
+
+  function rowById(id) {
+    for (const r of rows) if (r && r.id === id) return r;
+    return null;
+  }
+
+  function upsertRow(message) {
+    const i = rows.findIndex((r) => r && r.id === message.id);
+    if (i >= 0) {
+      // The POST-side ask-message broadcast can beat the local echo (same id):
+      // an in-place replace must not wipe the store seq it delivered.
+      if (typeof message.seq !== 'number' && typeof rows[i].seq === 'number') {
+        message = { ...message, seq: rows[i].seq };
+      }
+      rows[i] = message;
+    } else {
+      // Sorted insert orders KNOWN seqs only. Seq-less rows are live-created
+      // (echo / streaming assistant) and therefore newest — a numeric row must
+      // never slot above them; a new row otherwise appends.
+      const seq = typeof message.seq === 'number' ? message.seq : Infinity;
+      const at = rows.findIndex((r) => typeof r.seq === 'number' && r.seq > seq);
+      if (at === -1) rows.push(message);
+      else rows.splice(at, 0, message);
+    }
+    dirty.structure = true;
+  }
+
+  function markBlockDirty(messageId, blockId) {
+    if (!dirty.blocks.has(messageId)) dirty.blocks.set(messageId, new Set());
+    dirty.blocks.get(messageId).add(blockId);
+  }
+
+  function ensureStreamingRow(messageId, base = {}) {
+    let row = rowById(messageId);
+    if (!row) {
+      row = {
+        id: messageId, threadId, seq: undefined, role: 'assistant', text: '', blocks: [],
+        status: 'streaming', reason: null, model: base.model ?? null, effort: base.effort ?? null,
+        usage: null, costUsd: null, durationMs: null, createdAt: base.startedAt ?? null,
+      };
+      upsertRow(row);
+    }
+    if (!Array.isArray(row.blocks)) row.blocks = [];
+    return row;
+  }
+
+  function upsertBlock(row, block) {
+    const i = row.blocks.findIndex((b) => b && b.id === block.id);
+    if (i >= 0) row.blocks[i] = block;
+    else row.blocks.push(block);
+  }
+
+  function finalizeDone(row, frame) {
+    row.text = frame.text ?? '';
+    row.blocks = Array.isArray(frame.blocks) ? frame.blocks : row.blocks;
+    row.usage = frame.usage ?? null;
+    row.costUsd = frame.costUsd ?? null;
+    row.durationMs = frame.durationMs ?? null;
+    row.status = frame.status || 'done';
+    row.reason = frame.reason ?? null;
+    row.model = frame.model ?? row.model;
+    if (frame.threadTotals) { thread.totals = frame.threadTotals; }
+    live = null;
+    inFlight = null;
+    dirty.structure = true;
+    dirty.messages.add(row.id);
+    dirty.answer.add(row.id);
+    dirty.meters = true;
+    dirty.label = true;
+  }
+
+  function applyJobFrame(frame) {
+    const existing = rowById(frame.messageId);
+    if (existing && TERMINAL.has(existing.status)) return { dropped: 'terminal-message' };
+    if (live && frame.messageId === live.messageId) {
+      if (frame.type === 'ask-start' && live.adopted && frame.seq < live.lastSeq) {
+        // The subscribe replay (seq 1..N) landing AFTER a stray broadcast frame was
+        // adopted at a high seq: rewind to the replayed start so the prefix is
+        // applied instead of dropped as stale (review of PR #376 — the answer
+        // rendered blank and Send never flipped to Stop). Text restarts from '';
+        // the replay re-delivers every delta, and blocks upsert by id.
+        live.lastSeq = frame.seq; live.text = ''; live.adopted = false;
+        live.userMessageId = frame.userMessageId ?? live.userMessageId;
+        live.startedAt = frame.startedAt ?? live.startedAt;
+        live.label = 'Thinking';
+        dirty.label = true;
+      } else {
+        if (frame.seq <= live.lastSeq) return { dropped: 'stale-seq' };
+        if (frame.seq > live.lastSeq + 1) return { gap: true };
+        live.lastSeq = frame.seq;
+      }
+    } else if (frame.type === 'ask-start') {
+      ensureStreamingRow(frame.messageId, frame);
+      live = { messageId: frame.messageId, userMessageId: frame.userMessageId ?? null, label: 'Thinking', startedAt: frame.startedAt ?? null, lastSeq: frame.seq, text: '', usage: null, costUsd: null };
+      inFlight = { messageId: frame.messageId };
+      dirty.label = true;
+    } else if (!live && inFlight && frame.messageId === inFlight.messageId) {
+      // Adoption: the ring buffer may have evicted the prefix — accept the first
+      // frame at whatever seq it carries; ask-done.text heals the missing text.
+      ensureStreamingRow(frame.messageId);
+      live = { messageId: frame.messageId, userMessageId: null, label: null, startedAt: null, lastSeq: frame.seq, text: '', usage: null, costUsd: null, adopted: true };
+    } else {
+      return { dropped: 'no-live' };
+    }
+
+    const row = ensureStreamingRow(frame.messageId, frame);
+    switch (frame.type) {
+      case 'ask-start':
+        row.model = frame.model ?? row.model;
+        row.effort = frame.effort ?? row.effort;
+        break;
+      case 'ask-label':
+        live.label = frame.label;
+        dirty.label = true;
+        break;
+      case 'ask-delta':
+        live.text += String(frame.text ?? '');
+        dirty.answer.add(frame.messageId);
+        break;
+      case 'ask-block':
+      case 'ask-card':
+        if (frame.block && frame.block.id != null) {
+          upsertBlock(row, frame.block);
+          markBlockDirty(frame.messageId, frame.block.id);
+        }
+        break;
+      case 'ask-usage':
+        live.usage = frame.usage ?? null;
+        live.costUsd = frame.costUsd ?? null;
+        dirty.meters = true;
+        break;
+      case 'ask-done':
+        finalizeDone(row, frame);
+        break;
+      case 'ask-error':
+        row.text = live.text;
+        row.status = 'error';
+        row.errorMessage = frame.message || 'unknown error';
+        live = null;
+        inFlight = null;
+        dirty.structure = true;
+        dirty.messages.add(row.id);
+        dirty.answer.add(row.id);
+        dirty.label = true;
+        dirty.meters = true;
+        break;
+      default:
+        break; // unknown ask-* job frame: its seq is consumed, its payload ignored
+    }
+    return { ok: true };
+  }
+
+  function applyOutOfTurn(frame) {
+    switch (frame.type) {
+      case 'ask-title':
+        thread.title = frame.title ?? null;
+        dirty.title = true;
+        return { ok: true };
+      case 'ask-message': {
+        const m = frame.message;
+        if (!m || typeof m.id !== 'string') return { dropped: 'no-live' };
+        upsertRow(m);
+        dirty.messages.add(m.id);
+        return { ok: true };
+      }
+      case 'ask-run-status': {
+        if (typeof frame.runId !== 'string') return { dropped: 'no-live' };
+        const cur = links.get(frame.runId) || { pipelineId: null, cardId: null, status: null, phase: null };
+        links.set(frame.runId, {
+          pipelineId: frame.pipelineId ?? cur.pipelineId,
+          cardId: frame.cardId ?? cur.cardId,
+          status: frame.status ?? cur.status,
+          phase: frame.phase ?? cur.phase,
+        });
+        dirty.runLinks = true;
+        return { ok: true };
+      }
+      default:
+        return { dropped: 'no-live' };
+    }
+  }
+
+  return Object.freeze({
+    threadId,
+    load(snapshot) {
+      thread = { ...snapshot.thread };
+      rows = Array.isArray(snapshot.messages) ? snapshot.messages.slice() : [];
+      attachments = Array.isArray(snapshot.attachments) ? snapshot.attachments.slice() : [];
+      links.clear();
+      for (const l of Array.isArray(snapshot.runLinks) ? snapshot.runLinks : []) {
+        links.set(l.runId, { pipelineId: l.pipelineId ?? null, cardId: l.cardId ?? null, status: l.status ?? null, phase: l.phase ?? null });
+      }
+      live = null;
+      inFlight = snapshot.inFlight ?? null;
+      dirty = newDirty();
+      dirty.structure = true;
+      dirty.title = true;
+      dirty.meters = true;
+      dirty.runLinks = true;
+      dirty.label = true;
+    },
+    apply(frame) {
+      if (!frame || frame.threadId !== threadId) return { dropped: 'other-thread' };
+      if (typeof frame.seq === 'number') return applyJobFrame(frame);
+      return applyOutOfTurn(frame);
+    },
+    takeDirty() {
+      const d = dirty;
+      dirty = newDirty();
+      return d;
+    },
+    messages() { return rows; },
+    thread() { return thread; },
+    totals() {
+      return { ...thread.totals, live: live ? { usage: live.usage, costUsd: live.costUsd } : null };
+    },
+    inFlight() { return inFlight; },
+    live() { return live; },
+    runLinks() { return links; },
+    attachmentsBytes() { return attachments.reduce((n, a) => n + (a && Number.isFinite(a.bytes) ? a.bytes : 0), 0); },
+    findCard(cardId) {
+      for (const r of rows) {
+        const b = (r && Array.isArray(r.blocks) ? r.blocks : []).find((x) => x && x.kind === 'card' && x.id === cardId);
+        if (b) return { message: r, block: b };
+      }
+      return null;
+    },
+    noteLocalUserMessage({ id, text, attachments: atts }) {
+      upsertRow({
+        id, threadId, seq: undefined, role: 'user', text: String(text ?? ''),
+        blocks: (Array.isArray(atts) ? atts : []).map((a) => ({ kind: 'attachment', id: a.id ?? null, name: a.name, bytes: a.bytes })),
+        status: null, reason: null, model: null, effort: null, usage: null, costUsd: null, durationMs: null, createdAt: null,
+      });
+      dirty.messages.add(id);
+    },
+  });
+}