@artooi/ag-ui-web-component 0.26.1 → 0.28.0

package/src/ui/render_markdown.ts

@@ -4,7 +4,7 @@
 // happy-dom-only suite goes green while this module strips nothing at all.
 // Moving those assertions back under happy-dom for speed removes the only check
 // that this module does anything. CLAUDE.md records the upstream root cause.
-import DOMPurify from "dompurify";
+import DOMPurify, { type Config, type DOMPurify as Purifier } from "dompurify";
 import { Marked } from "marked";
 
 // A local parser instance, so configuration never leaks into the shared
@@ -54,11 +54,108 @@ const ALLOWED_TAGS = [
   "td",
 ];
 
-const ALLOWED_ATTR = ["href", "title", "class"];
+// `target` and `rel` are on the list because {@link harden} writes them onto
+// every link. An attribute the returned markup carries but the config does not
+// name would be markup the sanitiser never approved — which is the whole defect
+// the hook exists to avoid.
+//
+// `class` is here only for marked's `language-*` code-fence hint, and `harden`
+// narrows it to exactly that. Left wide, it is a chrome-forgery channel: the
+// shadow stylesheet's component classes are unscoped selectors, so a `<span
+// class="approval-btn approval-btn--approve">` in model output resolves to the
+// same pixels as the real human-in-the-loop approval button, inside the surface
+// where the user decides whether to approve.
+const ALLOWED_ATTR = ["href", "title", "class", "target", "rel"];
+
+/**
+ * The sanitiser's declared allowlist — and, because {@link harden} runs inside
+ * the sanitiser rather than after it, its *effective* one too.
+ *
+ * `ALLOW_DATA_ATTR` and `ALLOW_ARIA_ATTR` default to `true`, which would admit
+ * every `data-*` and `aria-*` attribute on top of the five named above. Both
+ * matter here: the cards drive their resolved / expanded / status appearance off
+ * `[data-resolved]`, `[data-status]` and `[data-expanded]`, and an `aria-label`
+ * on model output makes a screen reader announce something other than what is on
+ * screen. Turning them off is what makes the declared list the real one.
+ *
+ * Exported so a test can assert the returned markup is a fixed point of it.
+ */
+export const SANITIZE_CONFIG: Config = {
+  ALLOWED_TAGS,
+  ALLOWED_ATTR,
+  ALLOW_DATA_ATTR: false,
+  ALLOW_ARIA_ATTR: false,
+};
 
-// The image-permitting variants used when the host opts in.
-const ALLOWED_TAGS_WITH_IMAGES = [...ALLOWED_TAGS, "img"];
-const ALLOWED_ATTR_WITH_IMAGES = [...ALLOWED_ATTR, "src", "alt", "width", "height"];
+/** {@link SANITIZE_CONFIG} plus the images a host opts into. */
+export const SANITIZE_CONFIG_WITH_IMAGES: Config = {
+  ...SANITIZE_CONFIG,
+  ALLOWED_TAGS: [...ALLOWED_TAGS, "img"],
+  ALLOWED_ATTR: [...ALLOWED_ATTR, "src", "alt", "width", "height"],
+};
+
+/** The one class value markdown is allowed to carry, and where it may sit. */
+const LANGUAGE_CLASS = /^language-[A-Za-z0-9_+#.-]+$/;
+const LANGUAGE_HOSTS = new Set(["CODE", "PRE"]);
+
+/**
+ * Per-element hardening, run *inside* the sanitiser.
+ *
+ * It belongs here rather than in a pass over the finished string because
+ * DOMPurify must be the last thing to touch the markup: anything edited in
+ * afterwards is inserted into the document without the sanitiser ever having
+ * seen it, and re-parsing sanitiser output is the shape every mXSS bypass takes.
+ * Running as a hook means DOMPurify serialises the result of these edits, so
+ * what the caller inserts is exactly what it approved.
+ *
+ * Two jobs:
+ *
+ * - links open in a new tab and never hand over their opener. `target`/`rel` are
+ *   this module's to write, so they are stripped from everything else rather
+ *   than inherited from the model's own markup;
+ * - `class` is narrowed to the code-fence language hint on `code`/`pre`, the
+ *   only thing it is allowed for, and dropped everywhere else so model output
+ *   cannot adopt the component's own chrome.
+ */
+function harden(node: Element): void {
+  if (node.nodeName === "A" && node.hasAttribute("href")) {
+    node.setAttribute("target", "_blank");
+    node.setAttribute("rel", "noopener noreferrer");
+  } else {
+    node.removeAttribute("target");
+    node.removeAttribute("rel");
+  }
+  const classes = node.getAttribute("class");
+  if (classes === null) {
+    return;
+  }
+  const kept = LANGUAGE_HOSTS.has(node.nodeName)
+    ? classes.split(/\s+/).filter((token) => LANGUAGE_CLASS.test(token))
+    : [];
+  if (kept.length === 0) {
+    node.removeAttribute("class");
+    return;
+  }
+  node.setAttribute("class", kept.join(" "));
+}
+
+// DOMPurify's default export is a singleton, and `addHook` mutates it for every
+// caller sharing that copy — including the host app, if its bundler deduped to
+// ours. So this module builds its own instance, for the same reason `parser`
+// above is a local `Marked`.
+//
+// Built on first render rather than at module scope: a DOMPurify instance
+// created without a DOM has no `addHook` at all, and doing this eagerly would
+// turn a server-side `import` of the package into a throw.
+let purifier: Purifier | null = null;
+
+function sanitizer(): Purifier {
+  if (purifier === null) {
+    purifier = DOMPurify();
+    purifier.addHook("afterSanitizeAttributes", harden);
+  }
+  return purifier;
+}
 
 /** Options for {@link renderMarkdown}. */
 export interface RenderMarkdownOptions {
@@ -74,25 +171,18 @@ export interface RenderMarkdownOptions {
  * Render markdown (and any embedded raw HTML) to a sanitised HTML string.
  *
  * Markdown syntax and literal HTML share one path: `marked` emits HTML, then
- * DOMPurify strips everything outside {@link ALLOWED_TAGS} /
- * {@link ALLOWED_ATTR} — scripts, event handlers, `javascript:` URLs. Links are
- * hardened with `target="_blank"` and `rel="noopener noreferrer"`.
+ * DOMPurify strips everything outside {@link SANITIZE_CONFIG} — scripts, event
+ * handlers, `javascript:` URLs, `data-*`/`aria-*`, and every class but a code
+ * fence's `language-*` hint. Links come out with `target="_blank"` and
+ * `rel="noopener noreferrer"`.
  *
- * The result is trimmed so a single-paragraph message round-trips to clean
- * `textContent`, without the wrapping paragraph's trailing newline.
+ * The returned string is the sanitiser's own output, trimmed. Nothing edits it
+ * afterwards, so what a caller inserts is what DOMPurify approved.
  */
 export function renderMarkdown(text: string, options?: RenderMarkdownOptions): string {
   const allowImages = options?.allowImages === true;
   const rendered = parser.parse(text, { async: false });
-  const clean = DOMPurify.sanitize(rendered, {
-    ALLOWED_TAGS: allowImages ? ALLOWED_TAGS_WITH_IMAGES : ALLOWED_TAGS,
-    ALLOWED_ATTR: allowImages ? ALLOWED_ATTR_WITH_IMAGES : ALLOWED_ATTR,
-  });
-  const template = document.createElement("template");
-  template.innerHTML = clean;
-  for (const anchor of template.content.querySelectorAll("a[href]")) {
-    anchor.setAttribute("target", "_blank");
-    anchor.setAttribute("rel", "noopener noreferrer");
-  }
-  return template.innerHTML.trim();
+  return sanitizer()
+    .sanitize(rendered, allowImages ? SANITIZE_CONFIG_WITH_IMAGES : SANITIZE_CONFIG)
+    .trim();
 }

package/src/ui/resize_handle.ts

@@ -45,7 +45,11 @@ export interface ResizeOptions {
   readonly rect: () => PanelRect;
   /** Apply a size (the host writes the custom properties). */
   readonly apply: (size: ResizeSize) => void;
-  /** Called once per completed drag, for persistence. */
+  /**
+   * Called once per completed resize, for persistence: on `pointerup` for a
+   * drag, and when the key comes up (or focus leaves the handle) for a key
+   * press. Never per pointer move, and never per key repeat.
+   */
   readonly commit: (size: ResizeSize) => void;
   /** Accessible label. */
   readonly label: string;
@@ -127,6 +131,21 @@ export function createResizeHandle(options: ResizeOptions): HTMLDivElement {
     event.preventDefault();
   });
 
+  // The size the current key gesture has applied but not yet persisted. The
+  // pointer path can commit inline because a drag has one unambiguous end;
+  // a key press does not, so the gesture's result is held here until it does.
+  let pending: ResizeSize | null = null;
+
+  /** End a key gesture: persist what it applied, once. */
+  const settle = (): void => {
+    if (pending === null) {
+      return;
+    }
+    const size = pending;
+    pending = null;
+    options.commit(size);
+  };
+
   // Keyboard parity: a pointer-only resize is unreachable without a mouse, and
   // this control has no equivalent elsewhere in the UI.
   handle.addEventListener("keydown", (event: KeyboardEvent) => {
@@ -155,9 +174,20 @@ export function createResizeHandle(options: ResizeOptions): HTMLDivElement {
       return;
     }
     event.preventDefault();
+    // Live feedback per key event, persistence only when the gesture ends:
+    // `commit` promises one call per completed resize, and a held arrow key
+    // repeats at the OS rate (20-30 events a second), so committing here would
+    // put that many storage writes or PATCHes behind a single press — landing
+    // hardest on the keyboard users this path exists for.
     options.apply(next);
-    options.commit(next);
+    pending = next;
   });
 
+  // The key coming up ends the gesture, mirroring `pointerup`. `blur` closes one
+  // whose keyup never arrives here — focus moved on mid-press — because a size
+  // that was applied but never committed is a resize the host silently forgets.
+  handle.addEventListener("keyup", settle);
+  handle.addEventListener("blur", settle);
+
   return handle;
 }

package/src/ui/ui_strings.ts

@@ -80,6 +80,12 @@ export interface UiStrings {
   transcribing: string;
   /** Mic button fallback message when transcription fails. */
   transcriptionFailed: string;
+  /**
+   * Mic button message after a recording hit its length cap and stopped itself.
+   * The clip is kept and transcribed, so this explains the silence rather than
+   * reporting a loss. Token: `{n}` (the cap, in minutes).
+   */
+  recordingLimit: string;
 
   // ── Tool-call card ──────────────────────────────────────────────────────────
   /** Status pill while the call runs. */
@@ -171,20 +177,16 @@ export interface UiStrings {
   /** Remove-attachment button `aria-label`. */
   removeAttachment: string;
 
-  // ── Relative time (drawer rows) ─────────────────────────────────────────────
-  /** Under a minute ago. */
-  justNow: string;
-  /** Minutes ago. Token: `{n}`. */
-  minutesAgo: string;
-  /** Hours ago. Token: `{n}`. */
-  hoursAgo: string;
-  /** Title of the checkpoint panel. */
+  // ── Code blocks ─────────────────────────────────────────────────────────────
   /** Label on a code block's copy button. */
   copyCode: string;
   /** Shown on the copy button after the code reached the clipboard. */
   copied: string;
   /** Shown when the clipboard was unavailable or refused the write. */
   copyFailed: string;
+
+  // ── Checkpoint panel (continue a run) ───────────────────────────────────────
+  /** Title of the checkpoint panel. */
   checkpoints: string;
   /** Empty state when no run can be continued. */
   noCheckpoints: string;
@@ -194,6 +196,14 @@ export interface UiStrings {
   forkRun: string;
   /** Badge on a run that branched from another. */
   forkedRun: string;
+
+  // ── Relative time (drawer rows) ─────────────────────────────────────────────
+  /** Under a minute ago. */
+  justNow: string;
+  /** Minutes ago. Token: `{n}`. */
+  minutesAgo: string;
+  /** Hours ago. Token: `{n}`. */
+  hoursAgo: string;
   /** Days ago. Token: `{n}`. */
   daysAgo: string;
   /** Weeks ago. Token: `{n}`. */
@@ -244,6 +254,7 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   stopRecording: "Stop recording",
   transcribing: "Transcribing…",
   transcriptionFailed: "Transcription failed",
+  recordingLimit: "Stopped at the {n}-minute limit — transcribing what was recorded.",
 
   toolRunning: "running…",
   toolDeferred: "waiting for you",

package/src/ui/voice_input.ts

@@ -5,6 +5,21 @@ import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
 /** Lifecycle of the mic button, reflected on its `data-state` for CSS. */
 type VoiceState = "idle" | "recording" | "transcribing";
 
+/**
+ * How long one recording may run before it stops itself.
+ *
+ * Two minutes is a ceiling, not a target: dictating into a chat composer is a
+ * sentence or two, and two minutes of speech is roughly 350 words — longer than
+ * any message this control is for. What it bounds is the case that has no end
+ * at all, a mic left live in a forgotten tab: about a megabyte of accumulated
+ * Opus, a recording indicator the user is no longer watching, and eventually a
+ * multipart upload no client-side check sizes.
+ *
+ * Hitting it stops and transcribes; the audio is never discarded, because a cap
+ * the user was not told about must not cost them the words they already spoke.
+ */
+const MAX_RECORDING_MS = 120_000;
+
 /** Construction options for {@link VoiceInput}. */
 export interface VoiceInputOptions {
   /** Turns a recorded clip into text (the built-in or a custom transport). */
@@ -39,6 +54,8 @@ export class VoiceInput {
   #recorder: MediaRecorder | null = null;
   #stream: MediaStream | null = null;
   #chunks: Blob[] = [];
+  #capTimer: ReturnType<typeof setTimeout> | null = null;
+  #hitCap = false;
   #disposed = false;
 
   constructor(options: VoiceInputOptions) {
@@ -84,6 +101,7 @@ export class VoiceInput {
     }
     this.#stream = stream;
     this.#chunks = [];
+    this.#hitCap = false;
     const recorder = new MediaRecorder(stream);
     recorder.addEventListener("dataavailable", (event) => {
       this.#chunks.push(event.data);
@@ -93,14 +111,29 @@ export class VoiceInput {
     });
     this.#recorder = recorder;
     recorder.start();
+    // Nothing else ends a recording: `MediaRecorder` runs until it is told to
+    // stop, so without this the only exits are a second click and `dispose()`.
+    this.#capTimer = setTimeout(() => {
+      this.#hitCap = true;
+      this.#stop();
+    }, MAX_RECORDING_MS);
     this.#setState("recording");
   }
 
   #stop(): void {
+    this.#clearCap();
     // ``stop`` flushes a final ``dataavailable`` then fires ``stop`` → #finish.
     this.#recorder?.stop();
   }
 
+  /** Drop the cap timer; recording is over, by whichever route. */
+  #clearCap(): void {
+    if (this.#capTimer !== null) {
+      clearTimeout(this.#capTimer);
+      this.#capTimer = null;
+    }
+  }
+
   /**
    * Tear the control down, for a host element removed mid-recording. Stops any
    * live `MediaRecorder`, releases the mic tracks so the browser's recording
@@ -109,6 +142,7 @@ export class VoiceInput {
    */
   dispose(): void {
     this.#disposed = true;
+    this.#clearCap();
     if (this.#recorder !== null && this.#recorder.state !== "inactive") {
       this.#recorder.stop();
     }
@@ -126,6 +160,15 @@ export class VoiceInput {
     try {
       const text = await this.#transcribe(audio);
       this.#setState("idle");
+      if (this.#hitCap) {
+        // #setState has just reset the tooltip to the idle label, so this goes
+        // after it. It says why the mic went quiet on its own — the transcript
+        // below is the proof nothing was thrown away.
+        this.element.title = this.#strings.recordingLimit.replace(
+          "{n}",
+          String(MAX_RECORDING_MS / 60_000),
+        );
+      }
       if (text !== "") {
         this.#onText(text);
       }

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.26.1";
+export const VERSION: string = "0.28.0";