@artooi/ag-ui-web-component 0.39.0 → 0.40.0

package/src/ui/placement/launcher_drag.ts

@@ -21,6 +21,12 @@ export interface LauncherDragOptions {
    * per pointer move, and never per key repeat.
    */
   readonly commit: (left: number, top: number) => void;
+  /**
+   * Ends the launcher's own listeners when aborted. The launcher outlives the
+   * element's connection to the document and this is called on every connect,
+   * so without it a re-inserted element moved one arrow press two steps.
+   */
+  readonly signal: AbortSignal;
 }
 
 /**
@@ -55,6 +61,7 @@ const COARSE_STEP = 64;
  */
 export function enableLauncherDrag(launcher: HTMLElement, options: LauncherDragOptions): void {
   let suppressClick = false;
+  const { signal } = options;
 
   launcher.addEventListener(
     "click",
@@ -70,72 +77,76 @@ export function enableLauncherDrag(launcher: HTMLElement, options: LauncherDragO
       event.stopPropagation();
       event.preventDefault();
     },
-    true,
+    { capture: true, signal },
   );
 
-  launcher.addEventListener("pointerdown", (event: PointerEvent) => {
-    // Any suppression left armed by a drag that ended elsewhere dies here,
-    // before it can reach a click belonging to this new gesture.
-    suppressClick = false;
-    if (!options.enabled()) {
-      return;
-    }
-    const start = options.rect();
-    const originX = event.clientX;
-    const originY = event.clientY;
-    let dragging = false;
-
-    const onMove = (move: PointerEvent): void => {
-      const dx = move.clientX - originX;
-      const dy = move.clientY - originY;
-      if (!dragging && Math.hypot(dx, dy) < DRAG_THRESHOLD) {
+  launcher.addEventListener(
+    "pointerdown",
+    (event: PointerEvent) => {
+      // Any suppression left armed by a drag that ended elsewhere dies here,
+      // before it can reach a click belonging to this new gesture.
+      suppressClick = false;
+      if (!options.enabled()) {
         return;
       }
-      dragging = true;
-      launcher.setAttribute("data-dragging", "true");
-      // Measured from the box the press started on, never from the live one:
-      // reading it each move would chase the launcher as it moves and the
-      // travel would compound.
-      const next = clampLauncher(
-        { ...start, left: start.left + dx, top: start.top + dy },
-        options.viewport(),
-      );
-      options.apply(next.left, next.top);
-    };
+      const start = options.rect();
+      const originX = event.clientX;
+      const originY = event.clientY;
+      let dragging = false;
 
-    const onUp = (up: PointerEvent): void => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-      if (!dragging) {
-        return;
-      }
-      launcher.removeAttribute("data-dragging");
-      suppressClick = true;
-      const next = clampLauncher(
-        {
-          ...start,
-          left: start.left + (up.clientX - originX),
-          top: start.top + (up.clientY - originY),
-        },
-        options.viewport(),
-      );
-      options.commit(next.left, next.top);
-    };
+      const onMove = (move: PointerEvent): void => {
+        const dx = move.clientX - originX;
+        const dy = move.clientY - originY;
+        if (!dragging && Math.hypot(dx, dy) < DRAG_THRESHOLD) {
+          return;
+        }
+        dragging = true;
+        launcher.setAttribute("data-dragging", "true");
+        // Measured from the box the press started on, never from the live one:
+        // reading it each move would chase the launcher as it moves and the
+        // travel would compound.
+        const next = clampLauncher(
+          { ...start, left: start.left + dx, top: start.top + dy },
+          options.viewport(),
+        );
+        options.apply(next.left, next.top);
+      };
 
-    // Listeners on `window`, not the launcher: a fast drag outruns the pointer
-    // and would otherwise strand it mid-move with no pointerup.
-    //
-    // pointercancel matters on touch, where it is routine rather than
-    // exceptional: the browser takes the pointer back for a scroll or a system
-    // gesture and never sends pointerup. Without this the move listeners stay
-    // attached and the drag stamp never clears, which leaves the launcher
-    // following a finger that has stopped and the element believing a gesture
-    // is still in flight.
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
-  });
+      const onUp = (up: PointerEvent): void => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+        if (!dragging) {
+          return;
+        }
+        launcher.removeAttribute("data-dragging");
+        suppressClick = true;
+        const next = clampLauncher(
+          {
+            ...start,
+            left: start.left + (up.clientX - originX),
+            top: start.top + (up.clientY - originY),
+          },
+          options.viewport(),
+        );
+        options.commit(next.left, next.top);
+      };
+
+      // Listeners on `window`, not the launcher: a fast drag outruns the pointer
+      // and would otherwise strand it mid-move with no pointerup.
+      //
+      // pointercancel matters on touch, where it is routine rather than
+      // exceptional: the browser takes the pointer back for a scroll or a system
+      // gesture and never sends pointerup. Without this the move listeners stay
+      // attached and the drag stamp never clears, which leaves the launcher
+      // following a finger that has stopped and the element believing a gesture
+      // is still in flight.
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    },
+    { signal },
+  );
 
   // The position this key gesture has applied but not yet persisted. The
   // pointer path can commit inline because a drag has one unambiguous end; a
@@ -155,37 +166,41 @@ export function enableLauncherDrag(launcher: HTMLElement, options: LauncherDragO
   // Keyboard parity: a pointer-only move is unreachable without a mouse, and
   // the launcher has no equivalent control elsewhere. Arrow keys are free on a
   // button, so Enter and Space still expand.
-  launcher.addEventListener("keydown", (event: KeyboardEvent) => {
-    if (!options.enabled()) {
-      return;
-    }
-    const step = event.shiftKey ? COARSE_STEP : STEP;
-    const rect = options.rect();
-    let moved: { left: number; top: number } | null = null;
-    if (event.key === "ArrowLeft") {
-      moved = { left: rect.left - step, top: rect.top };
-    } else if (event.key === "ArrowRight") {
-      moved = { left: rect.left + step, top: rect.top };
-    } else if (event.key === "ArrowUp") {
-      moved = { left: rect.left, top: rect.top - step };
-    } else if (event.key === "ArrowDown") {
-      moved = { left: rect.left, top: rect.top + step };
-    }
-    if (moved === null) {
-      return;
-    }
-    event.preventDefault();
-    const next = clampLauncher({ ...rect, ...moved }, options.viewport());
-    // Live feedback per key event, persistence only when the gesture ends: a
-    // held arrow repeats at the OS rate, and committing here would put that
-    // many storage writes behind a single press.
-    options.apply(next.left, next.top);
-    pending = next;
-  });
+  launcher.addEventListener(
+    "keydown",
+    (event: KeyboardEvent) => {
+      if (!options.enabled()) {
+        return;
+      }
+      const step = event.shiftKey ? COARSE_STEP : STEP;
+      const rect = options.rect();
+      let moved: { left: number; top: number } | null = null;
+      if (event.key === "ArrowLeft") {
+        moved = { left: rect.left - step, top: rect.top };
+      } else if (event.key === "ArrowRight") {
+        moved = { left: rect.left + step, top: rect.top };
+      } else if (event.key === "ArrowUp") {
+        moved = { left: rect.left, top: rect.top - step };
+      } else if (event.key === "ArrowDown") {
+        moved = { left: rect.left, top: rect.top + step };
+      }
+      if (moved === null) {
+        return;
+      }
+      event.preventDefault();
+      const next = clampLauncher({ ...rect, ...moved }, options.viewport());
+      // Live feedback per key event, persistence only when the gesture ends: a
+      // held arrow repeats at the OS rate, and committing here would put that
+      // many storage writes behind a single press.
+      options.apply(next.left, next.top);
+      pending = next;
+    },
+    { signal },
+  );
 
   // The key coming up ends the gesture, mirroring `pointerup`. `blur` closes
   // one whose keyup never arrives here -- focus moved on mid-press -- because a
   // position applied but never committed is a move the host silently forgets.
-  launcher.addEventListener("keyup", settle);
-  launcher.addEventListener("blur", settle);
+  launcher.addEventListener("keyup", settle, { signal });
+  launcher.addEventListener("blur", settle, { signal });
 }

package/src/ui/placement/panel_placement.ts

@@ -149,8 +149,9 @@ export class PanelPlacement {
    * away and unclickable behind the open panel, so a drag there would move
    * something nobody can see.
    */
-  enableLauncherDrag(): void {
+  enableLauncherDrag(signal: AbortSignal): void {
     enableLauncherDrag(this.#host.launcher, {
+      signal,
       enabled: () => this.#host.collapsed() && this.#launcherDraggable(),
       rect: () => this.#launcherBox(),
       viewport: () => this.#viewport(),
@@ -652,9 +653,22 @@ export class PanelPlacement {
     if (visual === null || visual === undefined) {
       return;
     }
-    if (Math.abs(visual.height - window.innerHeight) < 1) {
+    // The layout viewport from the box a fixed element is laid out against,
+    // for the reasons #screen gives -- and one more that only a phone shows.
+    // While iOS Safari has the visible area panned down to show a focused
+    // field, innerHeight reads the layout height less the pan, and goes on
+    // reading it until a window scroll the element never hears about. Measured
+    // from that, the band below came out as nothing, and at the deepest pan the
+    // browser makes -- the one that shows a composer docked at the foot of the
+    // screen -- the shorter number equals the visible height, so the check
+    // below took every measurement back and put the panel at the layout top at
+    // full height, its header above the screen. clientHeight held the layout
+    // height throughout.
+    const layout = this.#screen().height;
+    if (Math.abs(visual.height - layout) < 1) {
       this.#host.element.style.removeProperty("--ag-ui-visual-viewport-height");
       this.#host.element.style.removeProperty("--ag-ui-visual-viewport-inset-bottom");
+      this.#host.element.style.removeProperty("--ag-ui-visual-viewport-inset-top");
       return;
     }
     this.#host.element.style.setProperty(
@@ -667,11 +681,21 @@ export class PanelPlacement {
     // the launcher at that corner stay behind the keyboard until this lifts
     // them. Never negative -- a visual viewport panned up past the layout one
     // would otherwise pull the panel down off the screen.
-    const hidden = window.innerHeight - visual.height - visual.offsetTop;
+    const hidden = layout - visual.height - visual.offsetTop;
     this.#host.element.style.setProperty(
       "--ag-ui-visual-viewport-inset-bottom",
       `${Math.max(0, Math.round(hidden))}px`,
     );
+    // And what is hidden above it. To show a field the keyboard would cover, a
+    // browser pans the visual viewport down the layout one, and a fixed panel
+    // anchored at the top stays at the layout top: sized to the visible height,
+    // it then shows only its lower part, from the pan down, with its header off
+    // the screen and page background under it. Never negative, for the same
+    // reason as the band below.
+    this.#host.element.style.setProperty(
+      "--ag-ui-visual-viewport-inset-top",
+      `${Math.max(0, Math.round(visual.offsetTop))}px`,
+    );
   }
 
   /**

package/src/ui/styles.ts

@@ -180,7 +180,24 @@ export const STYLES = `
      keyboard changes no viewport-percentage length -- not vh, not dvh, not svh
      -- so a full-bleed panel on a phone has to be told the height rather than
      deriving it. The value to publish there is the visual viewport's. */
-  --_viewport-height: var(--ag-ui-viewport-height, var(--_visual-viewport-height));
+  --_viewport-height: var(
+    --ag-ui-viewport-height,
+    calc(
+      min(var(--_visual-viewport-inset-top) + var(--_visual-viewport-height), 100dvh - var(--_viewport-inset-bottom)) -
+        var(--_viewport-inset-top) - var(--_keyboard-inset-top)
+    )
+  );
+  /* That default is the host's box cut to the part of the screen the user can
+     see: from the top the panel starts at, the host's reserved top moved down
+     by the keyboard inset below, to whichever is further up, the bottom of the
+     visible area or the host's reserved bottom. Where nothing has measured, the
+     visible area is the layout viewport with no pan, and this is the host's
+     box exactly.
+
+     Cut rather than replaced. A measured height used as the whole answer kept
+     a bar the host reserved at the top in the position and out of the height,
+     so the panel ran that far past the bottom of the visible area, with its
+     composer behind the keyboard. */
   /* The measured height of the part of the screen the user can actually see,
      written by the element from the visual viewport and falling back to the
      layout viewport where nothing has measured yet.
@@ -193,11 +210,15 @@ export const STYLES = `
 
      Separate from the token above so a host that states the usable height
      outright still wins: the element writes this one inline, and an inline
-     value would otherwise outrank the host's own rule. */
-  --_visual-viewport-height: var(
-    --ag-ui-visual-viewport-height,
-    calc(100vh - var(--_viewport-inset-top) - var(--_viewport-inset-bottom))
-  );
+     value would otherwise outrank the host's own rule.
+
+     The fallback is dvh rather than vh because the browser's own bars do move
+     it, where a keyboard does not. iOS Safari resolves vh to the viewport with
+     its bars collapsed, so on a page that does not scroll them away a panel
+     sized from it ran under the address bar by the bars' height -- 40px on
+     the phone measured -- with a docked composer underneath. dvh is the
+     viewport with the bars as they are. */
+  --_visual-viewport-height: var(--ag-ui-visual-viewport-height, 100dvh);
   /* How much of the layout viewport is hidden below the visible one, measured
      and written by the element alongside the height above.
 
@@ -212,6 +233,24 @@ export const STYLES = `
      A host wanting no keyboard lift at all sets --ag-ui-keyboard-inset: 0px. */
   --_keyboard-inset: var(--ag-ui-keyboard-inset, var(--_visual-viewport-inset-bottom));
   --_visual-viewport-inset-bottom: var(--ag-ui-visual-viewport-inset-bottom, 0px);
+  /* How far a panel anchored at the top moves down for a keyboard, below the
+     top the host reserved. With the same two-token shape as the lift above;
+     0px keeps the panel at the host's top.
+
+     To show the field being typed into, a browser pans the visible area down
+     the layout viewport, and a fixed element stays against the layout top, so
+     a panel that did not move showed only its lower part, from the pan down,
+     with its header off the screen and an empty band under it. It moves by
+     what the pan goes past the host's reserved top, not by the whole pan: the
+     pan scrolls a bar reserved there away with the rest of the page rather
+     than pushing it down, and adding the two put the panel a whole bar below
+     the visible area. A corner panel anchored at the bottom does not use this,
+     because the band below already accounts for the pan. */
+  --_keyboard-inset-top: var(--ag-ui-keyboard-inset-top, max(0px, var(--_visual-viewport-inset-top) - var(--_viewport-inset-top)));
+  /* How much of the layout viewport is hidden above the visible one: how far
+     the browser panned. Measured and written by the element with the two
+     above. */
+  --_visual-viewport-inset-top: var(--ag-ui-visual-viewport-inset-top, 0px);
   --_viewport-width: var(
     --ag-ui-viewport-width,
     calc(100vw - var(--_viewport-inset-left) - var(--_viewport-inset-right))
@@ -348,7 +387,7 @@ export const STYLES = `
 }
 
 :host([placement="side"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
   --_width: var(--ag-ui-width, 420px);
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
@@ -358,7 +397,8 @@ export const STYLES = `
 :host([placement="full"]) {
   --_inset: var(
     --ag-ui-inset,
-    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      var(--_viewport-inset-bottom) var(--_viewport-inset-left)
   );
   --_width: var(--ag-ui-width, var(--_viewport-width));
   --_height: var(--ag-ui-height, var(--_viewport-height));
@@ -375,7 +415,8 @@ export const STYLES = `
 :host([placement="page"]) {
   --_inset: var(
     --ag-ui-inset,
-    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      var(--_viewport-inset-bottom) var(--_viewport-inset-left)
   );
   --_width: var(--ag-ui-width, var(--_viewport-width));
   --_height: var(--ag-ui-height, var(--_viewport-height));
@@ -441,7 +482,7 @@ export const STYLES = `
   :host([placement=""]:not([data-small-viewport="off"])) {
     --_inset: var(
       --ag-ui-inset,
-      var(--_viewport-inset-top) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
         calc(var(--_viewport-inset-bottom) + var(--_keyboard-inset))
         var(--_viewport-inset-left)
     );
@@ -471,7 +512,7 @@ export const STYLES = `
    --ag-ui-position: static (and place this element in your own layout) for a
    host-managed push instead. */
 :host([placement="sidebar"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
   --_width: var(--ag-ui-width, 420px);
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
@@ -480,7 +521,11 @@ export const STYLES = `
 }
 
 :host([placement="sidebar"][data-side="left"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) auto var(--_viewport-inset-bottom) var(--_viewport-inset-left));
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) auto var(--_viewport-inset-bottom)
+      var(--_viewport-inset-left)
+  );
 }
 
 /* The docked panel is pinned to the edge it docks against rather than filling
@@ -1237,6 +1282,64 @@ export const STYLES = `
   border-block-start-color: transparent;
 }
 
+/* On a phone the composer stays at the foot and the greeting takes the room
+   above it, which is the other way round from everything above.
+
+   Centring is a shape for a screen with room to spare: the composer reads as
+   the one thing on the page, and whichever way the rows grow there is space
+   left on both sides of them. A phone has no space to spare, and the keyboard
+   is what takes it -- opening one leaves a 426px-tall visible area with the
+   composer halfway up it and an empty band underneath, which is the half of
+   the screen a thumb is already resting on. Docked, the field sits directly
+   over the keyboard, where every chat on the platform puts it, and the
+   greeting keeps the rest.
+
+   Both rules restate the selector they override, with the breakpoint's own
+   opt-out added: this is part of the shape a host keeps its desktop layout
+   instead of, so it goes the same way as the rest of that shape. Restating
+   rather than adding conditions to the originals keeps each of those rules
+   readable as one decision, and source order settles the pair. */
+@media (max-width: 600px) {
+  :host([data-empty]:not([data-restoring]):not([data-small-viewport="off"])) .chat::after {
+    flex-grow: 0;
+  }
+
+  /* The empty region fills the transcript instead of being centred in it as a
+     block, so the two things in it can go to different places: the prompts the
+     host offers to the foot, against the composer, and the greeting to the
+     middle of what they leave.
+
+     A prompt chip is a way into the conversation. Against the field it starts,
+     it reads as one; under the greeting halfway up the panel, with the field
+     at the foot, it reads as decoration next to something else. Nothing here
+     moves them on a screen where the composer is still centred: there the
+     whole region hangs at the foot of the upper half, directly over the
+     composer, and the prompts are already against it.
+
+     Auto block margins on the greeting are what centre it, and they take the
+     free space whether or not there are prompts below to leave any, so a host
+     that offers none gets a greeting in the middle of the transcript rather
+     than one clinging to the composer.
+     The region declares a display here, which outranks the rule collapsing a
+     hidden one, so it says it is not hidden itself. Nothing sets the two
+     apart today -- the transcript writes the hidden property and the host's
+     data-empty from one expression -- and that is exactly why: a rule holding
+     because of how a method in another file happens to be written is a rule
+     holding by luck. */
+  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]),
+  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]) {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting,
+  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting {
+    margin-block: auto;
+  }
+}
+
 /* Nor does the greeting paint while a restore is in flight. Hidden rather than
    removed, so it keeps its place and nothing around it moves when it shows. */
 :host([data-restoring]) .greeting {
@@ -1720,6 +1823,17 @@ export const STYLES = `
   gap: 3px;
 }
 
+/* A call with no arguments drops the region rather than framing an empty
+   object, and a settled card drops the result region until it has one -- both
+   by setting the hidden property, and an author display beats the user-agent
+   rule for that attribute. Without this the region kept laying out: 42px of
+   card holding the ARGUMENTS heading over nothing, on every call the agent
+   made with no arguments, in the display mode that shows arguments by
+   default. */
+.tool-call-section[hidden] {
+  display: none;
+}
+
 /* The heading that tells the two payloads apart. Without it the arguments and
    the result were one run of text and a reader had to guess the boundary. */
 .tool-call-section-label {
@@ -2390,8 +2504,8 @@ export const STYLES = `
   display: none;
 }
 
-/* The mic button's mount point; filled only once #wireVoice mounts the
-   control. */
+/* The mic button's mount point; filled only once ComposerVoice.wire mounts
+   the control, which it skips unless transcription is configured. */
 .voice-slot {
   display: contents;
 }
@@ -3068,6 +3182,15 @@ export const STYLES = `
   padding: 10px 12px;
 }
 
+/* The row is hidden whenever the host offers no skills, which is most elements
+   most of the time, and an author display beats the user-agent rule for the
+   hidden attribute. Without this it kept its padding: 20px of panel between
+   the transcript and the composer, under every placement, reading as the gap
+   under whatever the transcript ends with. */
+.skill-chips[hidden] {
+  display: none;
+}
+
 .skill-chip {
   border: 1px solid var(--_border);
   border-radius: 999px;

package/src/ui/transcript/transcript.ts

@@ -82,12 +82,17 @@ export class Transcript {
   /**
    * Start following the foot of the list, and wire the jump button to it.
    * Called while rendering rather than at construction: the viewport has to
-   * exist and the observer has to have something to observe.
+   * exist and the observer has to have something to observe. The button
+   * outlives a connection, so its listener goes under `signal`.
    */
-  mountScroller(jumpButton: HTMLButtonElement): void {
-    jumpButton.addEventListener("click", () => {
-      this.jump();
-    });
+  mountScroller(jumpButton: HTMLButtonElement, signal: AbortSignal): void {
+    jumpButton.addEventListener(
+      "click",
+      () => {
+        this.jump();
+      },
+      { signal },
+    );
     this.#scroller = createStickToBottom({
       viewport: this.#host.messages,
       onMissedContent: (missed) => {

package/src/ui/ui_strings.ts

@@ -118,6 +118,8 @@ export interface UiStrings {
   notConnected: string;
   /** Composer hint when a run continuation was picked with an empty composer. */
   continueNeedsTurn: string;
+  /** Composer hint when a run continuation was picked while a run is in flight. */
+  continueWhileRunning: string;
 
   // ── Composer ────────────────────────────────────────────────────────────────
   /** `aria-label` of the message textarea. */
@@ -385,6 +387,7 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
     "{n} file still uploading — it was not sent with this message and is still attached.",
   notConnected: "This chat isn’t connected to an agent, so the message wasn’t sent.",
   continueNeedsTurn: "Type the next turn in the composer first, then pick a run to continue.",
+  continueWhileRunning: "Wait for the current answer or stop it, then pick a run to continue.",
   skillNeeds: "“{title}” needs {fields} — fill it in below, then send.",
 
   message: "Message",

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.39.0";
+export const VERSION: string = "0.40.0";