@artooi/ag-ui-web-component 0.27.0 → 0.29.0

package/src/ui/stick_to_bottom.ts

@@ -0,0 +1,126 @@
+/** A transcript that follows new content, unless the reader has other ideas. */
+export interface StickToBottom {
+  /**
+   * New content arrived. Scrolls to the bottom only while following, so
+   * reading older messages during a run is no longer undone on the next token.
+   */
+  readonly follow: () => void;
+  /** Go to the bottom and resume following, whatever the reader was doing. */
+  readonly jump: () => void;
+  /** Whether the transcript is currently following new content. */
+  readonly following: () => boolean;
+  readonly dispose: () => void;
+}
+
+export interface StickToBottomOptions {
+  /** The scrolling element -- the message list. */
+  readonly viewport: HTMLElement;
+  /**
+   * Called whenever the answer to "should a jump-to-latest affordance show?"
+   * changes. True means the reader has scrolled away *and* has since missed
+   * something; scrolling up through a settled transcript is not a reason to
+   * nag.
+   */
+  readonly onMissedContent: (missed: boolean) => void;
+}
+
+/**
+ * How close to the bottom still counts as the bottom, in CSS pixels.
+ *
+ * Not zero: `scrollHeight - scrollTop - clientHeight` lands on fractional
+ * values under a zoom level or a fractional device pixel ratio, so an exact
+ * comparison reports "scrolled away" for a transcript that is visibly pinned.
+ */
+const BOTTOM_SLACK_PX = 4;
+
+/**
+ * Follow the foot of a scrolling transcript, and stop when the reader scrolls
+ * away.
+ *
+ * Before this, eleven separate sites assigned `scrollTop = scrollHeight`
+ * unconditionally and nothing anywhere listened for a `scroll` event -- so
+ * nothing knew the reader had scrolled up, and scrolling back through a run was
+ * undone by the next token. Stick-to-bottom with a jump-to-latest affordance is
+ * a named primitive elsewhere for exactly this reason: shadcn ships it as
+ * `MessageScroller`, AI Elements as `ConversationScrollButton`.
+ *
+ * **Telling a reader's scroll from our own is the whole problem**, and the
+ * answer here is that it does not have to be told. A programmatic scroll only
+ * ever happens while already following, and it lands at the bottom, so the
+ * `scroll` event it provokes recomputes "at the bottom" as true and changes
+ * nothing. A reader's scroll is the only kind that can move the answer.
+ *
+ * A `ResizeObserver` covers the case scroll events cannot see: the *viewport*
+ * changing size. Resizing the panel, or the keyboard opening on a phone, moves
+ * the foot without anything scrolling and without any content arriving, so a
+ * pinned transcript would silently come unpinned.
+ *
+ * ⚠ It does **not** cover content that grows after insertion -- an image
+ * decoding, a chart laying out. A `ResizeObserver` on a scroll container does
+ * not fire when its `scrollHeight` changes, so catching that means observing
+ * every child, and the payoff is one late nudge in a case the reader can fix by
+ * scrolling. Insertion itself is covered: every site that adds to the
+ * transcript calls {@link StickToBottom.follow}.
+ */
+export function createStickToBottom({
+  viewport,
+  onMissedContent,
+}: StickToBottomOptions): StickToBottom {
+  let isFollowing = true;
+  let missed = false;
+
+  const atBottom = (): boolean =>
+    viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <= BOTTOM_SLACK_PX;
+
+  const setMissed = (next: boolean): void => {
+    if (next === missed) {
+      return;
+    }
+    missed = next;
+    onMissedContent(missed);
+  };
+
+  const toBottom = (): void => {
+    viewport.scrollTop = viewport.scrollHeight;
+  };
+
+  const onScroll = (): void => {
+    isFollowing = atBottom();
+    if (isFollowing) {
+      setMissed(false);
+    }
+  };
+
+  const follow = (): void => {
+    if (isFollowing) {
+      toBottom();
+      return;
+    }
+    setMissed(true);
+  };
+
+  // Passive: this listener never calls preventDefault, and saying so keeps it
+  // off the critical path of a scroll it has no intention of blocking.
+  viewport.addEventListener("scroll", onScroll, { passive: true });
+
+  const observer = new ResizeObserver(() => {
+    if (isFollowing) {
+      toBottom();
+    }
+  });
+  observer.observe(viewport);
+
+  return {
+    follow,
+    jump: (): void => {
+      isFollowing = true;
+      setMissed(false);
+      toBottom();
+    },
+    following: (): boolean => isFollowing,
+    dispose: (): void => {
+      viewport.removeEventListener("scroll", onScroll);
+      observer.disconnect();
+    },
+  };
+}

package/src/ui/styles.ts

@@ -571,6 +571,7 @@ export const STYLES = `
   opacity: 0;
 }
 
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .messages-wrap,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .messages,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .input-row,
 :host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-chips,
@@ -579,9 +580,113 @@ export const STYLES = `
   display: none;
 }
 
+/* Jump-to-latest: shown only once the reader has scrolled away *and* missed
+   something. Anchored to the panel rather than the list so it does not scroll
+   with the content it is offering to scroll to. */
+/* The transcript's own box, and the only one whose foot is the transcript's
+   foot. The panel's foot is below the composer, the chips and the footer. */
+.messages-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.jump-latest {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--_pad);
+  z-index: 2;
+  display: none;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.4em 0.9em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  /* A raised surface, not the panel's own background. Reusing --_bg made the
+     pill the same colour as everything behind it, leaving a 1px border and a
+     shadow to carry the whole affordance -- and a dark-on-dark shadow carries
+     nothing. --_hover is the token that already means "lifted off the panel",
+     and it separates in both themes without competing with the accent the send
+     button owns. */
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+.jump-latest[data-missed="true"] {
+  display: flex;
+}
+
+.jump-latest:hover {
+  border-color: var(--_accent);
+}
+
+/* The offer to quote a selection. Positioned in script against the transcript
+   box, which is the only ancestor whose top and foot are the transcript's --
+   the same reason .jump-latest lives here. The translate is the half the
+   script does not do: script sets the point the offer hangs from, CSS decides
+   which corner of the offer that point is. */
+.quote-selection {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-50%, -100%);
+  padding: 0.25em 0.7em;
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  background: var(--_hover);
+  color: var(--_text);
+  font: inherit;
+  font-size: 0.8em;
+  line-height: 1.6;
+  white-space: nowrap;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
+}
+
+/* Flipped under the selection when there was no room above it. Only the
+   vertical half of the translate changes: it still hangs from its own centre
+   horizontally. */
+.quote-selection[data-below="true"] {
+  transform: translate(-50%, 0);
+}
+
+.quote-selection:hover {
+  border-color: var(--_accent);
+}
+
+/* Screen-reader-only status region. Off-screen rather than display:none or
+   visibility:hidden, both of which take the element out of the accessibility
+   tree entirely -- a hidden live region announces nothing at all, which is the
+   classic way this pattern is written wrong.
+
+   The 1px box with clip-path, rather than width/height 0, is the shape that
+   survives: a zero-sized element is dropped from the tree by some engines. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
 .messages {
   flex: 1;
   overflow-y: auto;
+  /* The browser's own scroll anchoring competes with the scroller for the same
+     job and wins unpredictably -- it can hold the view still exactly when we
+     want to follow. Turned off so following is decided in one place. Safari
+     does not implement it, which is itself a reason not to depend on it. */
+  overflow-anchor: none;
   padding: var(--_pad);
   display: flex;
   flex-direction: column;
@@ -1747,6 +1852,7 @@ export const STYLES = `
 
 .confirm-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
 }
@@ -1773,6 +1879,99 @@ export const STYLES = `
   color: #ffffff;
 }
 
+/* The session waiver. Deliberately the quietest of the three: it is the widest
+   decision on the card, so it should be reachable without being the one the eye
+   lands on when the user means to say yes once. */
+.confirm-btn--always {
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.confirm-btn--always:hover,
+.confirm-btn--always:focus-visible {
+  opacity: 1;
+}
+
+/* Editable arguments on an approval card. A plain field rather than a code
+   editor: it holds the JSON a card already displays, and the only interaction
+   is correcting a value before letting the call run. */
+.approval-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.approval-args {
+  box-sizing: border-box;
+  width: 100%;
+  resize: vertical;
+  border: 1px solid var(--_border);
+  border-radius: 8px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+  background: var(--_bg);
+  color: var(--_fg);
+}
+
+.approval-args:focus-visible {
+  border-color: var(--_accent);
+  outline: none;
+}
+
+.approval-error {
+  font-size: 0.85em;
+  color: var(--_danger);
+}
+
+/* Message action row. Sits under a finished assistant bubble.
+
+   The wrap is insurance rather than a fix: these buttons are glyph-only, so at
+   every width tested they fit on one line and removing the wrap changes
+   nothing. It is here because the confirmation row one release earlier did
+   overflow when it gained a third button, off the left edge and outside its own
+   card, and the difference between the two rows is only that this one's labels
+   are icons today. */
+.message-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  /* Negative, and that is the point. The answer group is a flex column with its
+     own gap, so a positive margin here pushes the row further from the message
+     it acts on than the next card is below it -- the buttons then read as
+     belonging to whatever follows. Pulling back inside the gap is what makes
+     them the message's own. */
+  margin-top: -6px;
+}
+
+.message-action {
+  border: none;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font: inherit;
+  line-height: 1.2;
+  cursor: pointer;
+  background: transparent;
+  color: var(--_muted);
+  opacity: 0.75;
+}
+
+.message-action:hover,
+.message-action:focus-visible {
+  opacity: 1;
+  background: var(--_border);
+}
+
+.message-action[aria-pressed="true"] {
+  opacity: 1;
+  color: var(--_accent);
+}
+
+.message-action--confirmed {
+  opacity: 1;
+  color: var(--_accent);
+}
+
 /* Approval card — the server-side-tool gate (approve/deny an interrupt). */
 .approval {
   align-self: stretch;
@@ -1917,6 +2116,34 @@ export const STYLES = `
   border-color: var(--_accent);
 }
 
+/* Follow-up suggestion chips. Deliberately the skill chips' shape rather than a
+   second chip vocabulary -- both are "a question you could ask", and the only
+   difference is who chose it. Inside the transcript, so they scroll with the
+   answer they follow instead of hovering above the composer. */
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-self: stretch;
+}
+
+.suggestion-chip {
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 0.9em;
+  text-align: left;
+  cursor: pointer;
+  background: var(--_assistant-bg);
+  color: var(--_fg);
+}
+
+.suggestion-chip:hover,
+.suggestion-chip:focus-visible {
+  border-color: var(--_accent);
+}
+
 .skill-palette {
   margin: 8px 12px 0;
   display: flex;

package/src/ui/suggestion_chips.ts

@@ -0,0 +1,73 @@
+import type { UiStrings } from "./ui_strings.js";
+
+/**
+ * Most prompts one push may draw.
+ *
+ * **Keep in step with `MAX_SUGGESTIONS` in django-ag-ui's
+ * `agent/suggestions_activity.py`**, which raises past it. Mirroring is the
+ * whole point: this side silently draws no more than its limit and has no
+ * channel to report the difference, so a producer that does not know the same
+ * number ships suggestions that never appear. That is the hole the chart bounds
+ * exist to close, and it was found there by shipping it.
+ */
+export const MAX_SUGGESTIONS = 4;
+
+/** Longest one prompt may be. Mirrored for the same reason as the count. */
+export const MAX_SUGGESTION_CHARS = 120;
+
+/** The `prompts` a `suggestions` activity carries, or `null` when it carries none. */
+export function suggestionPrompts(content: unknown): string[] | null {
+  if (typeof content !== "object" || content === null) {
+    return null;
+  }
+  const raw = (content as { prompts?: unknown }).prompts;
+  if (!Array.isArray(raw)) {
+    return null;
+  }
+  const prompts = raw
+    .filter((prompt): prompt is string => typeof prompt === "string")
+    .map((prompt) => prompt.trim())
+    .filter((prompt) => prompt !== "" && prompt.length <= MAX_SUGGESTION_CHARS)
+    .slice(0, MAX_SUGGESTIONS);
+  return prompts.length === 0 ? null : prompts;
+}
+
+/**
+ * Draw follow-up prompts as chips that send themselves when clicked.
+ *
+ * Returns `null` when nothing survives, which is the registry's signal to draw
+ * nothing rather than an empty row -- the same contract the chart renderer uses
+ * for a spec it cannot draw.
+ *
+ * Buttons rather than links or list items: each one performs an action in the
+ * page, and the thing it sends is the label, so the accessible name is the
+ * prompt itself and needs no `aria-label` restating it.
+ */
+export function renderSuggestionChips(
+  content: unknown,
+  strings: UiStrings,
+  onPick: (prompt: string) => void,
+): HTMLElement | null {
+  const prompts = suggestionPrompts(content);
+  if (prompts === null) {
+    return null;
+  }
+  const row = document.createElement("div");
+  row.className = "suggestions";
+  row.setAttribute("part", "suggestions");
+  // A group, labelled: without it a screen reader meets a row of unrelated
+  // buttons with no hint that they are the assistant's offer rather than the
+  // page's own controls.
+  row.setAttribute("role", "group");
+  row.setAttribute("aria-label", strings.suggestions);
+  for (const prompt of prompts) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "suggestion-chip";
+    chip.setAttribute("part", "suggestion-chip");
+    chip.textContent = prompt;
+    chip.addEventListener("click", () => onPick(prompt));
+    row.appendChild(chip);
+  }
+  return row;
+}

package/src/ui/thread_drawer.ts

@@ -1,5 +1,5 @@
 import type { ThreadMeta } from "../core/conversation_store.js";
-import { relativeTime } from "./relative_time.js";
+import { type RelativeTimeFormatter, relativeTime } from "./relative_time.js";
 import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
 
 /** Actions the host ({@link AgUiChat}) wires to the drawer's rows. */
@@ -35,6 +35,7 @@ export class ThreadDrawer {
   readonly #heading: HTMLSpanElement;
   readonly #newButton: HTMLButtonElement;
   readonly #list: HTMLDivElement;
+  #formatRelativeTime: RelativeTimeFormatter | null = null;
   #strings: UiStrings;
   #threads: readonly ThreadMeta[] = [];
   #activeId = "";
@@ -91,6 +92,25 @@ export class ThreadDrawer {
   }
 
   /** Re-localize the drawer's chrome and rows (the host calls this on connect). */
+  /**
+   * Replace the timestamp formatter, or restore the built-in with `null`.
+   *
+   * The built-in is deliberately locale-neutral -- there is no `Intl` anywhere
+   * in this component, so it never disagrees with a host's own formatting by
+   * guessing a locale. That is a defensible default and a poor requirement, so
+   * this is the way out.
+   */
+  setRelativeTimeFormatter(format: RelativeTimeFormatter | null): void {
+    this.#formatRelativeTime = format;
+  }
+
+  /** This row's timestamp, through the host's formatter when it set one. */
+  #formatTime(timestamp: number): string {
+    return this.#formatRelativeTime !== null
+      ? this.#formatRelativeTime(timestamp)
+      : relativeTime(timestamp, undefined, this.#strings);
+  }
+
   setStrings(strings: UiStrings): void {
     this.#strings = strings;
     this.#panel.setAttribute("aria-label", strings.chatHistory);
@@ -202,7 +222,7 @@ export class ThreadDrawer {
     const time = document.createElement("span");
     time.className = "drawer-row-time";
     time.setAttribute("part", "drawer-row-time");
-    time.textContent = relativeTime(meta.updatedAt, undefined, this.#strings);
+    time.textContent = this.#formatTime(meta.updatedAt);
     const preview = document.createElement("span");
     preview.className = "drawer-row-preview";
     preview.setAttribute("part", "drawer-row-preview");

package/src/ui/tool_call_card.ts

@@ -90,6 +90,14 @@ export class ToolCallCard {
   readonly #resultLabel: HTMLSpanElement;
   readonly #resultBody: HTMLPreElement;
   readonly #strings: UiStrings;
+  /**
+   * The arguments this call was made with.
+   *
+   * Retained rather than only rendered, because an approval interrupt names a
+   * `toolCallId` and nothing else -- so this card is the only place the args
+   * still exist when the user is asked to approve, edit or deny the call.
+   */
+  readonly args: Record<string, unknown>;
   #settled = false;
 
   constructor(
@@ -99,6 +107,7 @@ export class ToolCallCard {
     strings: UiStrings = DEFAULT_UI_STRINGS,
   ) {
     this.#strings = strings;
+    this.args = args;
 
     this.element = document.createElement("div");
     this.element.className = "tool-call";

package/src/ui/ui_strings.ts

@@ -33,6 +33,18 @@ export interface UiStrings {
   // ── Messages region ─────────────────────────────────────────────────────────
   /** `aria-label` of the scrolling message log. */
   conversation: string;
+  /** The button offering to return to the foot of the transcript. */
+  jumpToLatest: string;
+  /** Announced when a turn starts. Screen-reader only; never rendered. */
+  announceResponding: string;
+  /** Announced when the answer has finished arriving. Screen-reader only. */
+  announceAnswerReady: string;
+  /** Announced when a card is waiting for the user's decision. Token: `{count}`. */
+  announceAwaitingDecision: string;
+  /** Announced when the user stopped the run. Screen-reader only. */
+  announceStopped: string;
+  /** Announced when the run failed. Screen-reader only. */
+  announceFailed: string;
   /** `aria-label` of the "thinking" pending indicator, and the thoughts region's
    * header while the model is still reasoning. */
   thinking: string;
@@ -48,6 +60,10 @@ export interface UiStrings {
   declinedAction: string;
   /** A navigating tool's card text while the page reloads. */
   navigating: string;
+  /** Notice shown when the server replaced the conversation wholesale. */
+  historyReplaced: string;
+  /** Notice shown when a pushed chart could not be drawn and was removed. */
+  chartUndrawable: string;
   /** Missing-placeholder skill hint. Tokens: `{title}`, `{fields}`. */
   skillNeeds: string;
   /** Notice shown when the agent condensed earlier turns. Token: `{count}`. */
@@ -80,6 +96,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. */
@@ -110,8 +132,32 @@ export interface UiStrings {
   details: string;
 
   // ── Confirmation card ───────────────────────────────────────────────────────
+  /** `aria-label` of the editable arguments field on an approval card. */
+  approvalEditArgs: string;
+  /** Shown when the edited arguments are not valid JSON. */
+  approvalArgsInvalid: string;
+  /** Shown when the edited arguments parse but are not a JSON object. */
+  approvalArgsNotAnObject: string;
+  /** `aria-label` of the follow-up suggestion chips row. */
+  suggestions: string;
+  /** `aria-label` of a message's action row. */
+  messageActions: string;
+  /** The offer that floats beside a selection in the transcript. */
+  quoteSelection: string;
+  /** Copy this message (button `title` / `aria-label`). Its confirmation and
+   * failure text are the code block's `copied` / `copyFailed`, which say the
+   * same thing about the same clipboard. */
+  copyMessage: string;
+  /** Ask for a different answer to the same question. */
+  retryMessage: string;
+  /** Rate this answer as good. */
+  feedbackUp: string;
+  /** Rate this answer as poor. */
+  feedbackDown: string;
   /** `aria-label` of the inline confirmation card. */
   confirmAction: string;
+  /** Waive confirmation for this tool for the rest of the session. Token: `{tool}`. */
+  confirmAlways: string;
   /** Generic confirmation prompt when a tool has no `x-confirm`. Token: `{tool}`. */
   confirmRun: string;
   /** Confirm button. */
@@ -171,20 +217,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 +236,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}`. */
@@ -219,6 +269,12 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   forkedRun: "branched",
 
   conversation: "Conversation",
+  jumpToLatest: "Jump to latest",
+  announceResponding: "Assistant is responding",
+  announceAnswerReady: "Assistant answered",
+  announceAwaitingDecision: "{count} action is waiting for your approval",
+  announceStopped: "Response stopped",
+  announceFailed: "The response failed",
   thinking: "Assistant is thinking…",
   thoughts: "Thoughts",
   stopped: "⏹ Stopped",
@@ -226,6 +282,9 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   noResult: "No result returned.",
   declinedAction: "User declined the action.",
   navigating: "Navigating…",
+  historyReplaced:
+    "The server replaced this conversation's history. Reload to see the updated transcript.",
+  chartUndrawable: "A chart could not be drawn from the data sent, so it was removed.",
   historyCompacted: "Earlier turns condensed to fit the context window ({count} removed)",
   usingSkill: "Using skill {name}",
   runInterrupted: "The previous response didn’t finish — the page changed before it arrived.",
@@ -244,6 +303,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",
@@ -259,7 +319,18 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   declinedLabel: "Declined",
   details: "Details",
 
+  approvalEditArgs: "Edit the arguments before approving",
+  approvalArgsInvalid: "That is not valid JSON, so nothing was sent.",
+  approvalArgsNotAnObject: "Arguments have to be a JSON object.",
+  suggestions: "Suggested follow-ups",
+  messageActions: "Message actions",
+  quoteSelection: "Quote",
+  copyMessage: "Copy message",
+  retryMessage: "Try again",
+  feedbackUp: "Good answer",
+  feedbackDown: "Poor answer",
   confirmAction: "Confirm action",
+  confirmAlways: "Always allow",
   confirmRun: "Run “{tool}”?",
   confirm: "Confirm",
   cancel: "Cancel",