@gemboss/ui 0.21.0 → 0.30.2

package/src/assistant/chat-markdown.ts

@@ -0,0 +1,279 @@
+/**
+ * The assistant's markdown, PARSED (0.29.0): moved from the admin (apps/admin/src/components/chat/markdown-blocks.ts),
+ * where the chat bubble learned to draw what models actually write: headings, tables, lists, inline code, fenced code,
+ * bold, italic, links and pictures from hosts the fleet serves.
+ *
+ * Every surface had its own renderer before this (Chris 08/10/2026, "đồng bộ hết giao diện của AI assistant"): partner-
+ * radar and search-radar an escape-then-tag string fed to `dangerouslySetInnerHTML`, content-radar another one with its
+ * own classes, GemFeedback a third parser, gemwatcher react-markdown, gemcare none at all (plain text). Five readings of
+ * one model's answer. Now one, in two renderers that build the same markup from these tokens: `ChatMarkdown` (React,
+ * chat.tsx) and `gembossUI.chat.markdown` (plain DOM, chat-plain.js, which carries a copy of this file's rules held to it
+ * by chat-plain.test.ts).
+ *
+ * A parser rather than a dependency: the text is written by a model that has just read data other people can write, and
+ * every markdown library's interesting CVEs live in the HTML pass-through this does not want. NO RAW HTML, ever.
+ */
+
+export type Block =
+  /** `#` to `######`; level 4 to 6 come back as 3 (0.29.2): the bubble's type scale has three steps, and a `####` the
+   *  model wrote is still a heading, not four hashes in front of a sentence. */
+  | { t: "heading"; level: 1 | 2 | 3; text: string }
+  | { t: "code"; lang: string; body: string }
+  | { t: "table"; head: string[]; rows: string[][] }
+  | { t: "list"; ordered: boolean; items: string[]; start?: number }
+  | { t: "quote"; lines: string[] }
+  | { t: "rule" }
+  | { t: "para"; lines: string[] };
+
+export type Inline =
+  | { t: "text"; text: string }
+  | { t: "code"; text: string }
+  | { t: "bold"; text: string }
+  | { t: "italic"; text: string }
+  | { t: "link"; label: string; href: string; internal: boolean }
+  | { t: "image"; alt: string; src: string };
+
+/**
+ * A host (and path prefix) whose pictures the bubble may LOAD. `host` left out (0.29.2) = the page's OWN origin: the
+ * picture is written as a root-relative path (`![cover](/api/img/r2/a.png)`, content-radar), loaded from wherever the
+ * page is served, and allowed only under `path` as the browser will resolve it (`/api/img/../admin` is `/admin`: refused).
+ */
+export interface ImageHost { host?: string; path: string }
+
+/**
+ * Hosts the fleet serves pictures from. An `img src` is fetched the moment the answer renders, before anyone clicks, so an
+ * open one is a tracking pixel anyone who can write store data can plant; any other picture becomes a link to it.
+ *   - gemwatcher's archive thumbnails (`/watch/artifacts/`),
+ *   - gemmedia's generated assets, on each of its names (urls on every name are stored and still handed out),
+ *   - Shopify's CDN (a store's own product photos).
+ * A surface adds its own with `imageHosts` (they are added to these, never replace them).
+ */
+export const FLEET_IMAGE_HOSTS: readonly ImageHost[] = [
+  { host: "gemwatcher-api-production.up.railway.app", path: "/watch/artifacts/" },
+  { host: "gemmedia-api-production.up.railway.app", path: "/" },
+  { host: "media.gemboss.ai", path: "/v1/theme-media/assets/" },
+  { host: "gemmedia.ops.gemboss.ai", path: "/v1/theme-media/assets/" },
+  { host: "gemmedia.gemboss.ai", path: "/v1/theme-media/assets/" },
+  { host: "cdn.shopify.com", path: "/" },
+];
+
+/**
+ * Where a link in the bubble may go: an in-app path, `http(s):` or `mailto:`. `null` for anything else (`javascript:`,
+ * `//other.host`, `/\other.host`): the caller keeps the label as text, so the words survive and only the link goes.
+ */
+export function linkTarget(raw: string): { href: string; internal: boolean } | null {
+  // Browsers strip tabs and newlines out of a URL before reading its scheme: `java\tscript:` is `javascript:` to them.
+  const href = raw.replace(/[\u0000-\u001f\u007f]/g, "").trim();
+  if (!href) return null;
+  if (href.startsWith("/")) {
+    if (href[1] === "/" || href[1] === "\\") return null;
+    return { href, internal: true };
+  }
+  if (/^(https?:\/\/|mailto:)/i.test(href)) return { href, internal: false };
+  return null;
+}
+
+// Any origin will do as the base for resolving a root-relative path the way a browser does: only the PATH is read back.
+const SAME_ORIGIN = "https://same-origin.invalid";
+// A host-less entry's path is a DIRECTORY below the root: "/api/img/", never "/" (every same-origin GET, cookies and all,
+// fired by rendering an answer) nor "/api/img" (which would also open "/api/img-private/…"). Any other entry is ignored.
+const OWN_PATH = /^\/[^/]+(\/[^/]+)*\/$/;
+
+/**
+ * The picture's URL when its host is one the fleet serves pictures from (https, no credentials, no port); else null.
+ * A root-relative `src` (`/api/img/a.png`) is allowed only by an entry with no `host` (the page's own origin), and is
+ * checked AFTER the browser's normalisation (dot segments, `%2e`, `\` read as `/`): what comes back is the resolved path,
+ * which is exactly what the browser will fetch. What a server might still turn into a `..` the browser never saw is
+ * refused: an encoded slash or backslash, a double encoding (`%25…`), a `;` path parameter (`..;/`), and any `..` or
+ * `%2e` left after normalisation; so is a protocol-relative `//host` or `/\host` (another origin).
+ */
+export function imageSource(raw: string, extra: readonly ImageHost[] = []): string | null {
+  const src = raw.replace(/[\u0000-\u001f\u007f]/g, "").trim();
+  if (src.startsWith("/")) {
+    const own = extra.filter((h) => !h.host && OWN_PATH.test(h.path));
+    if (!own.length || src[1] === "/" || src.includes("\\") || /%(2f|5c|25)|;/i.test(src)) return null;
+    let r: URL;
+    try { r = new URL(src, SAME_ORIGIN); } catch { return null; }
+    if (r.origin !== SAME_ORIGIN || /\.\.|%2e/i.test(r.pathname)) return null;
+    // The resolved path + query + fragment: exactly what the browser fetches.
+    return own.some((h) => r.pathname.startsWith(h.path)) ? r.href.slice(SAME_ORIGIN.length) : null;
+  }
+  let u: URL;
+  try { u = new URL(src); } catch { return null; }
+  if (u.protocol !== "https:" || u.username || u.password || u.port) return null;
+  const host = u.hostname.toLowerCase();
+  return [...FLEET_IMAGE_HOSTS, ...extra].some((h) => h.host === host && u.pathname.startsWith(h.path)) ? u.href : null;
+}
+
+const count = (s: string, ch: string) => s.split(ch).length - 1;
+
+/**
+ * A bare `https://…` in the prose (0.29.2): the URL it is, without what follows it in the sentence. As GitHub reads one:
+ * trailing `. , : ; ! ? _ ~ ' "` are the sentence's, and so is a `)` or `]` with no partner inside the URL ("(see
+ * https://x.test/a)" links `https://x.test/a`; a Wikipedia `…/Foo_(bar)` keeps its own). Returns the URL and the
+ * characters handed back to the text, or null when what is left is not an http(s) URL with a host (`https://.` stays
+ * text). Through the same `linkTarget` as a written link: nothing an autolink makes is something `[x](…)` could not.
+ * `trim: false` for `<https://…>`, whose brackets already say where it ends.
+ */
+export function bareUrl(raw: string, trim = true): { href: string; rest: string } | null {
+  // Counted once and kept up to date as characters go: a count per stripped character was quadratic, and a model echoing
+  // "https://x.test/" + 20 000 ")" froze the tab (review #3928).
+  let end = raw.length;
+  let open = count(raw, "("), close = count(raw, ")"), openSq = count(raw, "["), closeSq = count(raw, "]");
+  while (trim && end > 0) {
+    const last = raw[end - 1];
+    if (/[.,:;!?_~'"]/.test(last)) end -= 1;
+    else if (last === ")" && open < close) { end -= 1; close -= 1; }
+    else if (last === "]" && openSq < closeSq) { end -= 1; closeSq -= 1; }
+    else trim = false;
+  }
+  const url = raw.slice(0, end);
+  const target = linkTarget(url);
+  if (!target || target.internal) return null;
+  let u: URL;
+  try { u = new URL(target.href); } catch { return null; }
+  if (!/^https?:$/.test(u.protocol) || !u.hostname) return null;
+  return { href: target.href, rest: raw.slice(end) };
+}
+
+// Order matters: code first, so `**` inside a code span is not bold; an image before a link, because `![alt](src)`
+// CONTAINS `[alt](src)` and would otherwise leave its "!" behind as text. Then `<https://…>` and a bare `https://…`
+// (0.29.2): the earliest match wins, so a URL inside a code span, a written link or an image stays theirs. A bare URL
+// stops at what cannot be in one as a model writes it: a space, `<>"\``, a `*` (the `**bold**` right after it), and
+// CJK text or full-width / typographic punctuation (Chinese runs a URL into the sentence with no space: "访问https://x。然后").
+const INLINE = /(`([^`]+)`)|(\*\*([^*]+)\*\*)|(\*([^*\n]+)\*)|(!\[([^\]]*)\]\(([^)\s]+)\))|(\[([^\]]+)\]\(([^)\s]+)\))|(<(https?:\/\/[^\s<>]+)>)|(https?:\/\/[^\s<>`"*\u2000-\u206f\u3000-\u9fff\uff00-\uffef]+)/i;
+
+export interface InlineOptions {
+  imageHosts?: readonly ImageHost[];
+  /** A surface's own link scheme (gemcare's `customer:12`): return true and the link is kept as written, `internal`, for
+   *  the renderer's `renderLink` to draw. Anything else still goes through `linkTarget`. */
+  ownLink?: (href: string) => boolean;
+}
+
+/** One line → inline tokens. A link `linkTarget` refuses comes back as TEXT carrying its label. */
+export function parseInline(text: string, opts: InlineOptions = {}): Inline[] {
+  const out: Inline[] = [];
+  const pushText = (s: string) => {
+    if (!s) return;
+    const prev = out[out.length - 1];
+    if (prev?.t === "text") prev.text += s;
+    else out.push({ t: "text", text: s });
+  };
+  const re = new RegExp(INLINE.source, "gi");
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(text)) !== null) {
+    pushText(text.slice(last, m.index));
+    if (m[2] != null) out.push({ t: "code", text: m[2] });
+    else if (m[4] != null) out.push({ t: "bold", text: m[4] });
+    else if (m[6] != null) out.push({ t: "italic", text: m[6] });
+    else if (m[7] != null) {
+      // A picture from a fleet host is drawn; any other becomes a plain link to it (its alt as the label, or "image"), and
+      // an unusable target leaves the alt as text. The "!" never survives into the bubble.
+      const src = imageSource(m[9], opts.imageHosts);
+      const alt = m[8].trim();
+      if (src) out.push({ t: "image", alt, src });
+      else {
+        const target = linkTarget(m[9]);
+        if (target && !target.internal) out.push({ t: "link", label: alt || "image", ...target });
+        else pushText(alt);
+      }
+    } else if (m[10] != null) {
+      const raw = m[12];
+      const own = opts.ownLink?.(raw) ? { href: raw, internal: true } : null;
+      const target = own ?? linkTarget(raw);
+      if (target) out.push({ t: "link", label: m[11], ...target });
+      else pushText(m[11]);
+    } else {
+      // `<https://…>` is all URL (its brackets go); a bare one gives the sentence's punctuation back as text. A bare one
+      // glued to a word ("foohttps://…", a slug) is not a link: GitHub links one only where a word could start.
+      const glued = m[15] != null && m.index > 0 && /[a-z\d]/i.test(text[m.index - 1]);
+      const bare = glued ? null : m[14] != null ? bareUrl(m[14], false) : bareUrl(m[15]);
+      if (!bare) pushText(m[0]);
+      else {
+        out.push({ t: "link", label: bare.href, href: bare.href, internal: false });
+        pushText(bare.rest);
+      }
+    }
+    last = m.index + m[0].length;
+  }
+  pushText(text.slice(last));
+  return out;
+}
+
+const isTableRow = (l: string) => /^\s*\|.*\|\s*$/.test(l);
+const isDivider = (l: string) => /^\s*\|?[\s:-]*-[-\s:|]*\|?\s*$/.test(l) && l.includes("-");
+const cells = (l: string) => l.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());
+
+/** Text → blocks. A fence still open at the end (a stream mid-answer) is a code block already. */
+export function parseBlocks(text: string): Block[] {
+  const lines = (text ?? "").split("\n");
+  const out: Block[] = [];
+  let i = 0;
+  const para: string[] = [];
+  const flushPara = () => { if (para.length) out.push({ t: "para", lines: [...para] }); para.length = 0; };
+
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = /^\s*```([\w#+.-]*)\s*$/.exec(line);
+    if (fence) {
+      flushPara();
+      const body: string[] = [];
+      i += 1;
+      while (i < lines.length && !/^\s*```\s*$/.test(lines[i])) { body.push(lines[i]); i += 1; }
+      i += 1;
+      out.push({ t: "code", lang: fence[1] ?? "", body: body.join("\n") });
+      continue;
+    }
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (heading) {
+      flushPara();
+      // "#### " with nothing after it is a gap, not an empty <h5> a screen reader announces (review #3928).
+      if (heading[2].trim()) out.push({ t: "heading", level: Math.min(heading[1].length, 3) as 1 | 2 | 3, text: heading[2].trim() });
+      i += 1;
+      continue;
+    }
+    if (/^\s*(---|\*\*\*|___)\s*$/.test(line)) { flushPara(); out.push({ t: "rule" }); i += 1; continue; }
+    // A table needs a header row AND a divider under it, or every line of prose with two pipes is a one-cell table.
+    if (isTableRow(line) && i + 1 < lines.length && isDivider(lines[i + 1])) {
+      flushPara();
+      const head = cells(line);
+      i += 2;
+      const rows: string[][] = [];
+      while (i < lines.length && isTableRow(lines[i])) { rows.push(cells(lines[i])); i += 1; }
+      out.push({ t: "table", head, rows });
+      continue;
+    }
+    const bullet = /^\s*([-*+]|\d+[.)])\s+(.*)$/.exec(line);
+    if (bullet) {
+      flushPara();
+      const ordered = /\d/.test(bullet[1]);
+      // The number the model WROTE: a list split by a picture or a paragraph restarts at "2.", not "1." again.
+      const start = ordered ? Number.parseInt(bullet[1], 10) : undefined;
+      const items: string[] = [];
+      while (i < lines.length) {
+        const b = /^\s*([-*+]|\d+[.)])\s+(.*)$/.exec(lines[i]);
+        if (!b || /\d/.test(b[1]) !== ordered) break;
+        items.push(b[2]);
+        i += 1;
+      }
+      out.push({ t: "list", ordered, items, ...(start !== undefined && start !== 1 ? { start } : {}) });
+      continue;
+    }
+    if (/^\s*>\s?/.test(line)) {
+      flushPara();
+      const q: string[] = [];
+      while (i < lines.length && /^\s*>\s?/.test(lines[i])) { q.push(lines[i].replace(/^\s*>\s?/, "")); i += 1; }
+      out.push({ t: "quote", lines: q });
+      continue;
+    }
+    if (line.trim() === "") { flushPara(); i += 1; continue; }
+    para.push(line);
+    i += 1;
+  }
+  flushPara();
+  return out;
+}
+
+/** Long code folds: a 200-line block should not push the answer off screen. */
+export const CODE_FOLD_LINES = 12;

package/src/assistant/chat-turns.ts

@@ -0,0 +1,120 @@
+/**
+ * The conversation's STATE, for a surface that streams turns into `AssistantChat` (0.29.0).
+ *
+ * Every surface kept its messages in an array and wrote into "the last message" while a turn streamed: partner-radar and
+ * content-radar patched the last ELEMENT, so a note that arrived mid-turn ("Bridge stopped", the bridge's reply to Stop came
+ * back after the next turn had started) received the turn's text, and the real answer stayed at "Answering" (review
+ * gemwatcher #415; partner-radar #929; content-radar #937, which moved to "the last assistant message" and wrote down what
+ * that still gets wrong: a write that lands after the NEXT turn opened goes into the new bubble). Here every message has an
+ * id and a turn is written BY ITS ID, so nothing that arrives in between can take its text.
+ *
+ * And what a failed turn means, in one place (content-radar #937, partner-radar #929): only a failure AT the bridge is the
+ * bridge's (the call to localhost threw: it is gone; or it answered 401: this browser's pairing code is not its code). Any
+ * other HTTP error from the bridge (400, 503) is the turn's, and so is a failure on the way to the server (a data token, an
+ * expired session): the surface marks the bridge's own call with `atBridge`, never guesses from "this turn used the bridge".
+ */
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { ChatMessageData, ChatStep } from "./chat";
+
+export const BRIDGE_GONE = "The bridge on your machine is not responding: it was stopped, or the machine just slept. The panel is checking again; rerun the install command if it does not come back.";
+export const PAIRING_REJECTED = "The bridge on your machine rejected this browser's pairing code (it was installed with another code). Pair again in Setup.";
+
+/** Mark an error thrown by THE call to the bridge (fetch / stream to localhost), with its HTTP status when it answered. */
+export function atBridge<E>(e: E, status?: number): E {
+  if (e && typeof e === "object") {
+    (e as { atBridge?: boolean }).atBridge = true;
+    if (status !== undefined) (e as { status?: number }).status = status;
+  }
+  return e;
+}
+
+export interface TurnError {
+  /** What to show; null when the user stopped the turn. */
+  error: string | null;
+  /** The bridge's failure: show it as a BridgeNotice (Open setup) and probe the bridge again, so the chip stops saying green. */
+  bridge: boolean;
+  /** The user stopped it (AbortError). */
+  stopped: boolean;
+}
+
+/** One failed turn, classified. `messages` overrides the two sentences (a surface's own words for its bridge). */
+export function bridgeTurnError(e: unknown, messages: { gone?: string; rejected?: string } = {}): TurnError {
+  const err = e as { name?: string; atBridge?: boolean; status?: number; message?: string } | null | undefined;
+  if (err?.name === "AbortError") return { error: null, bridge: false, stopped: true };
+  if (err?.atBridge && err.status === 401) return { error: messages.rejected ?? PAIRING_REJECTED, bridge: true, stopped: false };
+  // Gone: the call threw (fetch to localhost failed), or it timed out (`AbortSignal.timeout` throws a TimeoutError; use it
+  // for the bridge's deadline, not an AbortController, whose AbortError reads as the user's Stop).
+  if (err?.atBridge && (e instanceof TypeError || err.name === "TimeoutError")) return { error: messages.gone ?? BRIDGE_GONE, bridge: true, stopped: false };
+  return { error: err?.message || String(e), bridge: false, stopped: false };
+}
+
+type Patch = Partial<ChatMessageData> | ((m: ChatMessageData) => ChatMessageData);
+
+export interface ChatTurns {
+  messages: ChatMessageData[];
+  /** Replace the list (a conversation loaded from storage or the server). Messages without an id get one. */
+  setMessages: (next: ChatMessageData[] | ((m: ChatMessageData[]) => ChatMessageData[])) => void;
+  /** The user's message. */
+  say: (text: string, extra?: Partial<ChatMessageData>) => string;
+  /** An assistant turn, pending. Its id is where everything about the turn is written. */
+  start: (extra?: Partial<ChatMessageData>) => string;
+  /** Write into ONE message, found by id (never by position). Unknown id: nothing happens. */
+  patch: (id: string, p: Patch) => void;
+  /** Append streamed text to the turn. */
+  write: (id: string, delta: string) => void;
+  /** Add a step, or update the one with the same step id. */
+  step: (id: string, s: ChatStep) => void;
+  /** The turn is done (pending off), with what the surface adds (meta, warn). */
+  finish: (id: string, extra?: Partial<ChatMessageData>) => void;
+  /** The turn failed: classified (`bridgeTurnError`), written to the turn, and returned (call your probe when `bridge`). */
+  fail: (id: string, e: unknown, messages?: { gone?: string; rejected?: string }) => TurnError;
+  /** A quiet line, or a BridgeNotice line (`tone` warn / down with an action). */
+  note: (text: string, extra?: Partial<ChatMessageData>) => string;
+  clear: () => void;
+}
+
+/** The messages of one conversation, with ids, written by id. Keep it once per conversation (a session switch: setMessages). */
+export function useChatTurns(initial?: ChatMessageData[] | (() => ChatMessageData[])): ChatTurns {
+  const seq = useRef(0);
+  const nextId = useCallback(() => `m${Date.now().toString(36)}-${(seq.current += 1)}`, []);
+  const withIds = useCallback((ms: ChatMessageData[]) => ms.map((m) => (m.id === undefined || m.id === null ? { ...m, id: nextId() } : m)), [nextId]);
+  const [messages, setRaw] = useState<ChatMessageData[]>(() => withIds(typeof initial === "function" ? initial() : initial ?? []));
+  const setMessages = useCallback((next: ChatMessageData[] | ((m: ChatMessageData[]) => ChatMessageData[])) => {
+    setRaw((cur) => withIds(typeof next === "function" ? next(cur) : next));
+  }, [withIds]);
+  const add = useCallback((m: ChatMessageData) => { const id = nextId(); setRaw((cur) => [...cur, { ...m, id }]); return id; }, [nextId]);
+  const patch = useCallback((id: string, p: Patch) => {
+    setRaw((cur) => {
+      const i = cur.findIndex((m) => m.id === id);
+      if (i < 0) return cur;
+      const copy = cur.slice();
+      copy[i] = typeof p === "function" ? p({ ...cur[i] }) : { ...cur[i], ...p };
+      return copy;
+    });
+  }, []);
+  return useMemo<ChatTurns>(() => ({
+    messages,
+    setMessages,
+    say: (text, extra) => add({ ...extra, role: "user", text }),
+    start: (extra) => add({ ...extra, role: "assistant", pending: true }),
+    patch,
+    write: (id, delta) => patch(id, (m) => ({ ...m, text: (m.text ?? "") + delta })),
+    step: (id, s) => patch(id, (m) => {
+      const steps = [...(m.steps ?? [])];
+      const i = steps.findIndex((x) => x.id === s.id);
+      // A field the update leaves out (or sends as undefined) keeps its value: a tool's result event that carries no
+      // target must not erase the one its start event gave, nor a progress event without a state turn "running" into ✓.
+      const given = Object.fromEntries(Object.entries(s).filter(([, v]) => v !== undefined)) as ChatStep;
+      if (i >= 0) steps[i] = { ...steps[i], ...given }; else steps.push(given);
+      return { ...m, steps };
+    }),
+    finish: (id, extra) => patch(id, (m) => ({ ...m, ...extra, pending: false })),
+    fail: (id, e, msgs) => {
+      const r = bridgeTurnError(e, msgs);
+      patch(id, (m) => ({ ...m, pending: false, stopped: r.stopped || m.stopped, ...(r.error ? { error: r.error, bridge: r.bridge } : {}) }));
+      return r;
+    },
+    note: (text, extra) => add({ ...extra, role: "note", text }),
+    clear: () => setRaw([]),
+  }), [messages, setMessages, add, patch]);
+}