@artooi/ag-ui-web-component 0.34.0 → 0.35.0

package/src/ui/launcher_placement.ts

@@ -1,4 +1,4 @@
-import { EDGE_MARGIN } from "../constants.js";
+import { SCREEN_EDGE_MARGIN } from "../constants.js";
 import { clampPanel } from "./clamp_panel.js";
 import { placeWidget } from "./place_widget.js";
 
@@ -10,6 +10,20 @@ export interface LauncherBox {
   readonly height: number;
 }
 
+/**
+ * The part of the screen a widget may rest in: a width and height, and the
+ * corner they start from.
+ *
+ * The origin is not always zero. A host can reserve the edges its own chrome
+ * occupies, and a panel clamped against a viewport that starts at the top-left
+ * of the screen will happily park itself underneath a sticky header -- where it
+ * cannot be reached, and where collapsing it only hides it further.
+ */
+export interface ViewportBox extends Extent {
+  readonly left: number;
+  readonly top: number;
+}
+
 /** A width/height pair, in CSS pixels. */
 export interface Extent {
   readonly width: number;
@@ -71,15 +85,24 @@ export interface LauncherPlacement {
 export function launcherPlacement(
   launcher: LauncherBox,
   panel: Extent,
-  viewport: Extent,
-  margin: number = EDGE_MARGIN,
+  viewport: ViewportBox,
+  screen: Extent,
+  margin: number = SCREEN_EDGE_MARGIN,
 ): LauncherPlacement {
   // Room for a panel pinned to each side of the launcher. A tie goes to the
   // first branch, so the result is deterministic for a centred launcher.
-  const roomRunningRight = viewport.width - launcher.left;
-  const roomRunningLeft = launcher.left + launcher.width;
-  const roomRunningDown = viewport.height - launcher.top;
-  const roomRunningUp = launcher.top + launcher.height;
+  //
+  // Measured against the usable box's own edges, not against its width and
+  // height as if it started at the origin. The launcher's coordinates are the
+  // screen's, while the extents have already had the host's reserved edges
+  // taken out of them, so mixing the two understates the room on one side and
+  // overstates it on the other -- by the same reserved inset, in opposite
+  // directions, which is what makes the comparison flip rather than merely
+  // drift. The clamp below reads `viewport.left`/`top`; this had to as well.
+  const roomRunningRight = viewport.left + viewport.width - launcher.left;
+  const roomRunningLeft = launcher.left + launcher.width - viewport.left;
+  const roomRunningDown = viewport.top + viewport.height - launcher.top;
+  const roomRunningUp = launcher.top + launcher.height - viewport.top;
   const corner: ExpandCorner = {
     x: roomRunningRight >= roomRunningLeft ? "left" : "right",
     y: roomRunningDown >= roomRunningUp ? "top" : "bottom",
@@ -103,5 +126,8 @@ export function launcherPlacement(
     margin,
   );
 
-  return { corner, ...placeWidget(host, launcher, corner, viewport) };
+  // The usable box decides where things may rest; the screen is what the
+  // resulting insets are measured from. They are the same only when the host
+  // has reserved nothing.
+  return { corner, ...placeWidget(host, launcher, corner, screen) };
 }

package/src/ui/panel_drag.ts

@@ -99,6 +99,7 @@ export function enablePanelDrag(handle: HTMLElement, options: PanelDragOptions):
     const onUp = (up: PointerEvent): void => {
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
       if (!dragging) {
         return;
       }
@@ -113,6 +114,9 @@ export function enablePanelDrag(handle: HTMLElement, options: PanelDragOptions):
     // and would otherwise strand the panel mid-move with no pointerup.
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
+    // Routine on touch rather than exceptional: the browser takes the pointer
+    // back for a scroll or a system gesture and never sends pointerup.
+    window.addEventListener("pointercancel", onUp);
   });
 }
 

package/src/ui/place_widget.ts

@@ -20,18 +20,26 @@ export interface WidgetInsets {
  * moves nothing, and the launcher may sit outside its own host box. Nothing
  * clips it there, and that is what lets a launcher be flush to a screen corner
  * while the panel it opens keeps its margin.
+ *
+ * `screen` is the **whole** viewport, not the part a host has left free. These
+ * are CSS `inset` values on a fixed element, and the browser measures those
+ * from the real edges -- so a `bottom` expressed against a box inset from the
+ * top comes out short by exactly that inset. It only shows when the corner
+ * flips mid-drag, because that is when the same point stops being expressed
+ * from `top` and starts being expressed from `bottom`: the widget then leaps by
+ * the reserved edge, which is a jump the gesture cannot explain.
  */
 export function placeWidget(
   host: PanelRect,
   launcher: LauncherBox,
   corner: ExpandCorner,
-  viewport: Extent,
+  screen: Extent,
 ): WidgetInsets {
   return {
     hostInset: inset({
       top: corner.y === "top" ? host.top : null,
-      right: corner.x === "right" ? viewport.width - host.right : null,
-      bottom: corner.y === "bottom" ? viewport.height - host.bottom : null,
+      right: corner.x === "right" ? screen.width - host.right : null,
+      bottom: corner.y === "bottom" ? screen.height - host.bottom : null,
       left: corner.x === "left" ? host.left : null,
     }),
     launcherInset: inset({

package/src/ui/run_notice.ts

@@ -3,10 +3,23 @@
  * skill loaded), rendered inline between turns.
  *
  * Distinct from a tool card, which reports work the agent asked for and
- * settles, and from an error, which is a failure. A notice never settles, takes
- * no action, and carries no controls.
+ * settles, and from an error, which is a failure. A notice never settles and
+ * takes no action of its own.
+ *
+ * It may carry exactly one control, and only ever an undo. That is a narrower
+ * rule than "no controls", which is what this said until the agent could move
+ * the panel it speaks from: something that rearranges the user's window without
+ * being asked has to be both visible and reversible, and a notice is already
+ * the surface that says what the run did. Anything the user has to *decide* is
+ * a confirmation card instead -- the difference is that this reports something
+ * already done.
  */
-export function renderRunNotice(icon: string, text: string, kind: string): HTMLDivElement {
+export function renderRunNotice(
+  icon: string,
+  text: string,
+  kind: string,
+  undo?: { readonly label: string; readonly onActivate: () => void },
+): HTMLDivElement {
   const notice = document.createElement("div");
   notice.className = `run-notice run-notice--${kind}`;
   notice.setAttribute("part", `run-notice run-notice-${kind}`);
@@ -28,5 +41,21 @@ export function renderRunNotice(icon: string, text: string, kind: string): HTMLD
   label.textContent = text;
 
   notice.append(glyph, label);
+
+  if (undo !== undefined) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "run-notice-undo";
+    button.setAttribute("part", "run-notice-undo");
+    button.textContent = undo.label;
+    button.addEventListener("click", () => {
+      // One use. The state it restores is the state as it was when the notice
+      // was written, so offering it twice would put back something that has
+      // since moved again.
+      button.disabled = true;
+      undo.onActivate();
+    });
+    notice.append(button);
+  }
   return notice;
 }