@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/replay/export-mount.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { flushSync } from "react-dom";
+
+let keep = false;
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** True only while an HTML export is reading the page. */
+export function useExportKeepMounted(): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => keep,
+    () => false,
+  );
+}
+
+/** Mount closed panels for the export, then commit before the caller reads the DOM. */
+export function setExportKeepMounted(value: boolean): void {
+  if (keep === value) return;
+  keep = value;
+  flushSync(() => {
+    for (const listener of listeners) listener();
+  });
+}

package/src/replay/filename.ts

@@ -0,0 +1,54 @@
+import { redactString } from "./redact";
+
+/**
+ * `<deployment>-<YYYY-MM-DD-HHMM>-<question>.html`. The time is UTC, so files
+ * from different machines sort together. The question is the latest one asked.
+ */
+export function snapshotFilename(deployment: string, exportedAt: string, question: string): string {
+  return exportFilename(deployment, exportedAt, question, "html");
+}
+
+/** Same name as the HTML snapshot, with the given extension (`md`, `html`). */
+export function exportFilename(
+  deployment: string,
+  exportedAt: string,
+  question: string,
+  ext: "md" | "html",
+): string {
+  const slug = slugPart(deployment) || "digichat";
+  const when = new Date(exportedAt);
+  const iso = Number.isNaN(when.getTime()) ? new Date() : when;
+  const stamp = iso.toISOString();
+  const day = stamp.slice(0, 10);
+  const hm = `${stamp.slice(11, 13)}${stamp.slice(14, 16)}`;
+  const q = questionSlug(question) || "thread";
+  return `${slug}-${day}-${hm}-${q}.${ext}`;
+}
+
+/**
+ * The question as a short slug. File names travel (listings, tickets, mail
+ * subjects), so beyond `redactString` any word of 8+ characters that carries
+ * a digit (an id, a key the patterns do not know) is dropped, and the slug is
+ * cut at a word boundary.
+ */
+function questionSlug(question: string): string {
+  const words = slugPart(redactString(question))
+    .split("-")
+    .filter((word) => word && !(word.length >= 8 && /\d/.test(word)));
+  let out = "";
+  for (const word of words) {
+    const next = out ? `${out}-${word}` : word;
+    if (next.length > 48) break;
+    out = next;
+  }
+  return out;
+}
+
+function slugPart(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .split(/[^a-z0-9]/)
+    .filter(Boolean)
+    .join("-");
+}

package/src/replay/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Client-safe HTML export. The file is a snapshot of the open chat page.
+ */
+
+export {
+  downloadMessageSnapshot,
+  downloadThreadSnapshot,
+  inlineAssetUrls,
+  inlineDomAssets,
+  liveSheetText,
+} from "./browser";
+export { snapshotFilename } from "./filename";
+export { REDACTED, redactString, redactValue } from "./redact";
+export { redactBlockText, redactSnapshotDom } from "./redact-dom";
+export {
+  deploymentText,
+  questionText,
+  serializeSnapshot,
+  SNAPSHOT_CSS,
+  transformSnapshotDom,
+} from "./snapshot";

package/src/replay/redact-dom.ts

@@ -0,0 +1,178 @@
+/**
+ * Redact a snapshot DOM before it is serialized.
+ *
+ * Redaction runs on text and attribute values, never on serialized HTML, so a
+ * secret's replacement cannot swallow tags or the text after it. A secret that
+ * the page splits across inline elements (syntax-highlighted JSON, a `code`
+ * span inside a sentence) is found by redacting each inline-only block as one
+ * string; only a block that held a secret loses its inline formatting.
+ */
+
+import { redactString, redactValue } from "./redact";
+
+/**
+ * A block is re-scanned as one string unless it contains one of these.
+ * `del` (strikethrough), `ins`, `img`, `label` and `font` are not block
+ * elements, so a secret split by them is still joined.
+ */
+const BLOCK = new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "DD",
+  "DIV",
+  "DL",
+  "DT",
+  "FIELDSET",
+  "FIGCAPTION",
+  "FIGURE",
+  "FOOTER",
+  "FORM",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "HEADER",
+  "HR",
+  "LI",
+  "MAIN",
+  "NAV",
+  "OL",
+  "P",
+  "PRE",
+  "SECTION",
+  "TABLE",
+  "UL",
+  "TR",
+  "TD",
+  "TH",
+  "THEAD",
+  "TBODY",
+  "TFOOT",
+  "CAPTION",
+]);
+
+/** Text that is not page prose: CSS and math. SVG text is page content. */
+const SKIP = new Set(["STYLE", "SCRIPT", "MATH", "math"]);
+
+/**
+ * Redact one block of text. JSON (a tool call's args or result) is parsed and
+ * redacted by key, so `{"password": "abc"}` loses its value even when the
+ * value has no token shape; anything else goes through `redactString`.
+ */
+export function redactBlockText(text: string): string {
+  const trimmed = text.trim();
+  if (
+    (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
+    (trimmed.startsWith("[") && trimmed.endsWith("]"))
+  ) {
+    try {
+      const parsed: unknown = JSON.parse(trimmed);
+      const redacted = redactValue(parsed);
+      if (JSON.stringify(redacted) !== JSON.stringify(parsed)) {
+        return JSON.stringify(redacted, null, 2);
+      }
+      return text;
+    } catch {
+      /* not JSON: fall through to the text patterns */
+    }
+  }
+  return redactString(text);
+}
+
+export function redactSnapshotDom(root: Element): void {
+  redactTree(root);
+}
+
+/**
+ * `<template>` content is a document fragment, not a child of the element, so
+ * a walk of the page never sees it. SVG used to be skipped with `<style>`.
+ */
+function redactTree(root: ParentNode): void {
+  redactAttributes(root);
+  redactTexts(root);
+  for (const block of inlineOnlyBlocks(root)) {
+    const text = block.textContent ?? "";
+    const next = redactBlockText(text);
+    if (next !== text) block.textContent = next;
+  }
+  for (const template of root.querySelectorAll("template")) {
+    if (template instanceof HTMLTemplateElement) redactTree(template.content);
+  }
+}
+
+function redactTexts(root: ParentNode): void {
+  const doc = root.ownerDocument;
+  if (!doc) return;
+  // Every text node first: a secret inside one node is replaced in place, so
+  // links and formatting around it survive.
+  const walker = doc.createTreeWalker(root, 4 /* NodeFilter.SHOW_TEXT */);
+  const texts: Text[] = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) texts.push(node as Text);
+  for (const node of texts) {
+    if (insideSkipped(node.parentElement, root)) continue;
+    const next = redactString(node.data);
+    if (next !== node.data) node.data = next;
+  }
+}
+
+function redactAttributes(root: ParentNode): void {
+  const elements: Element[] = [];
+  if (root instanceof Element) elements.push(root);
+  elements.push(...root.querySelectorAll("*"));
+  for (const el of elements) {
+    if (SKIP.has(el.tagName)) continue;
+    for (const attr of [...el.attributes]) {
+      const value = attr.value;
+      // style holds inlined url(data:…) payloads; data: URIs are the inlined assets.
+      if (!value || attr.name === "style" || isInlinedAsset(attr.name, value)) continue;
+      const next = redactString(value);
+      if (next !== value) el.setAttribute(attr.name, next);
+    }
+  }
+}
+
+/**
+ * The outermost elements whose whole subtree is inline and holds text: a `p`,
+ * `pre`, `li`, a JSON view, or an inline run beside block siblings.
+ */
+function inlineOnlyBlocks(root: ParentNode): Element[] {
+  const elements: Element[] = [];
+  if (root instanceof Element) elements.push(root);
+  elements.push(...root.querySelectorAll("*"));
+  const candidates = elements.filter((el) => {
+    if (SKIP.has(el.tagName) || insideSkipped(el.parentElement, root)) return false;
+    if (!el.textContent?.trim()) return false;
+    for (const d of el.querySelectorAll("*")) {
+      if (BLOCK.has(d.tagName) || SKIP.has(d.tagName)) return false;
+    }
+    return true;
+  });
+  return dedupeOutermost(candidates);
+}
+
+function dedupeOutermost(els: Element[]): Element[] {
+  const set = new Set(els);
+  return els.filter((el) => {
+    for (let p = el.parentElement; p; p = p.parentElement) if (set.has(p)) return false;
+    return true;
+  });
+}
+
+/** Base64 image and font payloads. Any other `data:` value is still redacted. */
+function isInlinedAsset(name: string, value: string): boolean {
+  const attr = name.toLowerCase();
+  if (attr !== "src" && attr !== "href" && attr !== "poster") return false;
+  return /^\s*data:(?:image|font)\/[^;,]*;base64,/i.test(value);
+}
+
+function insideSkipped(el: Element | null, stop: Node): boolean {
+  for (let cursor = el; cursor; cursor = cursor.parentElement) {
+    if (SKIP.has(cursor.tagName)) return true;
+    if (cursor === stop) break;
+  }
+  return false;
+}

package/src/replay/redact.ts

@@ -0,0 +1,113 @@
+/**
+ * Strip credentials before they can land in a replay file.
+ *
+ * Labeled secrets (auth headers, embed tokens, invite keys, API keys) are
+ * removed even when the value has no recognizable prefix. Known token shapes
+ * are removed wherever they sit in prose or tool JSON.
+ */
+
+const SENSITIVE_KEY =
+  /^(authorization|proxy-authorization|cookie|set-cookie|x-api-key|x-embed-token|x-embed-chat-token|x-invite-key|x-digichat-session|api[-_]?key|embed[-_]?(?:key|token)|invite[-_]?(?:key|token)|access[-_]?token|refresh[-_]?token|id[-_]?token|auth[-_]?secret|nextauth[-_]?secret|password|secret|session)$/i;
+
+/** `token`, `authToken`, `client_secret`, `privateKey`… (not `tokens` / `max_tokens`). */
+const SENSITIVE_KEY_SUFFIX =
+  /(?:token|secret|secret[-_]?key|password|passwd|api[-_]?key|private[-_]?key|credentials?|session[-_]?id|cookie)$/i;
+
+const TOKEN_SHAPES: readonly RegExp[] = [
+  // Separators and values use bounded runs so long inputs stay linear
+  // (CodeQL js/polynomial-redos). Authorization and Cookie are in LABELED below.
+  /\bToken\s+token=[^\s"',}&]+/gi,
+  /\b(?:ghp|gho|ghu|ghs|ghr)_[A-Za-z0-9]{20,}\b/g,
+  /\bgithub_pat_[A-Za-z0-9_]{20,}\b/g,
+  /\bxox[abposr]-[A-Za-z0-9-]{10,}\b/g,
+  /\bAKIA[0-9A-Z]{16}\b/g,
+  /\bAIza[0-9A-Za-z_-]{35}\b/g,
+  /\bglpat-[A-Za-z0-9_-]{20,}\b/g,
+  /\b(?:dgk_live_|digi_live_|dgs_live_)[A-Za-z0-9_\-]{6,}\b/g,
+  /\bsk-(?:ant-|or-|proj-)?[A-Za-z0-9_\-]{8,}\b/g,
+  /\beyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\b/g,
+  /\bBearer\s+[A-Za-z0-9\-._~+/]{8,}={0,2}/gi,
+  // OCC invite keys are a standalone 48-hex token. A shorter or longer hex
+  // run (a git sha, a 32-byte hex secret) does not match.
+  /\b[0-9a-fA-F]{48}\b/g,
+  /(?:x-api-key|x-embed-token|x-embed-chat-token|x-invite-key|api[_-]?key|embed[_-]?(?:key|token)|invite[_-]?(?:key|token)|access[_-]?token|refresh[_-]?token|auth[_-]?secret|nextauth[_-]?secret|client[_-]?secret|private[_-]?key|password|passwd|(?<![A-Za-z0-9_?&-])token)["']?[ \t]{0,8}[:=][ \t]{0,8}["']?(?!\[redacted\])[^"'\s,}&]{6,}/gi,
+];
+
+/**
+ * A query secret ends at `&`, `#`, whitespace or a quote.
+ *
+ * A `)` inside the value belongs to the secret when the value continues after
+ * it, so a secret that contains a parenthesis cannot leak its tail
+ * (`?token=abc)def` redacts the whole value). The character after the `)`
+ * has to look like part of a secret — a base64 or base64url character, or
+ * another delimiter — which is what keeps the closing parenthesis of a link
+ * (`?token=abc)`), a full stop (`?token=abc).`) and markdown emphasis
+ * (`?token=abc)**bold**`) outside the value.
+ *
+ * Three limits follow from the character being ambiguous. A secret whose
+ * value *ends* in a `)` still loses that character, a word right after a
+ * closing parenthesis (`?token=abc)and more`) is eaten with the value, and a
+ * delimiter followed by prose punctuation (`?token=abc).def`) ends the value,
+ * so the text after such a delimiter is not redacted. The rule is
+ * deliberately biased towards the secret: a redactor that eats a word is a
+ * bug in every export, and a redactor that leaves a secret tail is a leak.
+ */
+const QUERY_SECRET =
+  /([?&](?:token|api_key|apikey|access_token|invite|invite_key|embed_token|key|x-amz-signature|x-amz-credential|x-amz-security-token|awsaccesskeyid|x-goog-signature|x-goog-credential|signature|sig|key-pair-id)=)(?:[^&#\s"')]|\)(?=[A-Za-z0-9_\-=+/~)]))*/gi;
+
+/**
+ * Header-style labels whose value is replaced but whose label stays, so the
+ * transcript still reads. Authorization takes a scheme (Bearer, Basic, Token,
+ * …) and then a credential; without a scheme the value must contain a digit,
+ * so prose such as "Authorization: the user signs in" is left alone.
+ */
+const LABELED: readonly RegExp[] = [
+  /(\b(?:proxy-)?authorization["']?[ \t]{0,8}[:=][ \t]{0,8}["']?)(?:(?:bearer|basic|token|digest|apikey|negotiate)[ \t]{1,4}(?:token=)?[^\s"',}]{3,2048}|(?=[^\s"',}]{0,2048}\d)[A-Za-z0-9\-._~+/=:]{8,2048})/gi,
+  /(\b(?:set-cookie|cookie|x-digichat-session)["']?[ \t]{0,8}:[ \t]{0,8}["']?)[^"'\n\r]{1,4096}/gi,
+  // A backtick inside a session value belongs to the value when the value
+  // continues after it, so a secret that contains a backtick cannot leak its
+  // tail (`session=abc`def`). The character after the backtick has to look
+  // like part of a secret — a base64 or base64url character, or another
+  // backtick — which is what keeps the backtick that closes a code span
+  // (`session=abc``) and the one that precedes prose (`session=abc`, and
+  // more) outside the value. The lookahead keeps every unit of the value
+  // one character long, so the bound below stays 512 characters.
+  /((?<![A-Za-z0-9_-])(?:session(?:[_-]?id)?|sid|csrftoken|connect\.sid)=)(?:[^;\s"',&`]|`(?=[A-Za-z0-9_\-=+/~`])){4,512}/gi,
+  // scheme://user:password@host (DSNs, URLs with userinfo).
+  /(\b[a-z][a-z0-9+.-]{1,20}:\/\/[^\s:/@"']{1,256}:)[^\s@/"']{1,256}(?=@)/gi,
+];
+
+export const REDACTED = "[redacted]";
+
+export function redactString(value: string): string {
+  let out = value;
+  for (const pattern of TOKEN_SHAPES) {
+    pattern.lastIndex = 0;
+    out = out.replace(pattern, REDACTED);
+  }
+  for (const pattern of LABELED) {
+    pattern.lastIndex = 0;
+    out = out.replace(pattern, `$1${REDACTED}`);
+  }
+  QUERY_SECRET.lastIndex = 0;
+  return out.replace(QUERY_SECRET, `$1${REDACTED}`);
+}
+
+export function redactValue<T>(value: T): T {
+  return walk(value) as T;
+}
+
+function walk(value: unknown): unknown {
+  if (typeof value === "string") return redactString(value);
+  if (Array.isArray(value)) return value.map((item) => walk(item));
+  if (!value || typeof value !== "object") return value;
+  const out: Record<string, unknown> = {};
+  for (const [key, inner] of Object.entries(value as Record<string, unknown>)) {
+    if (SENSITIVE_KEY.test(key) || SENSITIVE_KEY_SUFFIX.test(key)) {
+      out[key] = REDACTED;
+      continue;
+    }
+    out[key] = walk(inner);
+  }
+  return out;
+}