@hienlh/ppm 0.22.11 → 0.23.1

package/src/web/components/design/canvas/use-expanded-canvas-escape.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Esc leaves the expanded canvas — after anything nearer the user has had its turn: an open
+ * menu or dialog closes itself on that press, and so does the element picker, which listens
+ * for the same key. `busy` is read when the key arrives, so it sees the state that listener
+ * is about to leave.
+ *
+ * A key pressed inside the canvas frame never reaches this window; the close button is the
+ * way out from there, and the only one on a touch screen.
+ */
+export function useExpandedCanvasEscape(expanded: boolean, exit: () => void, busy: () => boolean) {
+  const busyRef = useRef(busy);
+  busyRef.current = busy;
+  const exitRef = useRef(exit);
+  exitRef.current = exit;
+
+  useEffect(() => {
+    if (!expanded) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      if (document.querySelector('[role="dialog"], [role="menu"], [role="listbox"]')) return;
+      if (busyRef.current()) return;
+      exitRef.current();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [expanded]);
+}

package/src/web/components/design/comments/comment-composer.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Loader2, Trash2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
+import { COMMENT_LIMITS } from "../../../../shared/design-comment-types";
+
+/**
+ * Writing a comment on an element, editing one, or adding a note to "Send to AI" for a
+ * single element. The element's text and markup are shown as plain text: both come from the
+ * page and are never rendered as HTML.
+ */
+
+export interface ComposerTarget {
+  mode: "create" | "edit" | "send";
+  tag: string;
+  /** The element's text as the page reported it (or as the comment stored it). */
+  text: string;
+  /** The page's markup for the element, shown for orientation only. */
+  markup?: string;
+  initialBody?: string;
+}
+
+const TITLES: Record<ComposerTarget["mode"], (tag: string) => string> = {
+  create: (tag) => `Comment on <${tag}>`,
+  edit: () => "Comment",
+  send: (tag) => `Send <${tag}> to AI`,
+};
+
+export function CommentComposer({ target, onClose, onSubmit, onDelete }: {
+  target: ComposerTarget | null;
+  onClose: () => void;
+  /** Resolves when done; a rejection keeps the dialog open with the text intact. */
+  onSubmit: (body: string) => Promise<void>;
+  onDelete?: () => Promise<void>;
+}) {
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setBody(target?.initialBody ?? "");
+    setBusy(false);
+    if (target) requestAnimationFrame(() => inputRef.current?.focus());
+  }, [target]);
+
+  if (!target) return null;
+  const sending = target.mode === "send";
+  const canSubmit = !busy && body.length <= COMMENT_LIMITS.body && (sending || body.trim().length > 0);
+
+  const run = async (action: () => Promise<void>) => {
+    setBusy(true);
+    try {
+      await action();
+    } catch (e) {
+      toast.error("That did not work", { description: (e as Error).message });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <DesignResponsiveDialog
+      open
+      onClose={() => { if (!busy) onClose(); }}
+      title={TITLES[target.mode](target.tag)}
+      description={sending ? "Add a note if you like. You will see the whole message before it goes into the chat." : undefined}
+      footer={<>
+        {target.mode === "edit" && onDelete && (
+          <Button variant="outline" className="text-destructive md:mr-auto" disabled={busy} onClick={() => run(onDelete)}>
+            <Trash2 className="size-4" /> Delete
+          </Button>
+        )}
+        <Button variant="outline" onClick={onClose} disabled={busy}>Cancel</Button>
+        <Button disabled={!canSubmit} onClick={() => run(() => onSubmit(body))}>
+          {busy && <Loader2 className="size-4 animate-spin" />} {sending ? "Preview message" : "Save"}
+        </Button>
+      </>}
+    >
+      <div className="flex flex-col gap-3">
+        {target.text && (
+          <blockquote className="line-clamp-4 border-l-2 border-border pl-3 text-sm text-text-2">{target.text}</blockquote>
+        )}
+        {target.markup && (
+          <details className="text-xs text-text-subtle">
+            <summary className="min-h-11 cursor-pointer py-2 md:min-h-0 md:py-0">Markup</summary>
+            <pre className="mt-1 max-h-32 overflow-auto whitespace-pre-wrap break-all rounded-md bg-surface-elevated p-2 font-mono">{target.markup}</pre>
+          </details>
+        )}
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-text-2">{sending ? "Note (optional)" : "Comment"}</span>
+          <textarea
+            ref={inputRef}
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && canSubmit) void run(() => onSubmit(body)); }}
+            maxLength={COMMENT_LIMITS.body}
+            rows={4}
+            placeholder={sending ? "What should change?" : "What should change here?"}
+            className="w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          />
+          <span className="self-end text-xs text-text-subtle">{body.length}/{COMMENT_LIMITS.body}</span>
+        </label>
+      </div>
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/comments/comment-overlay-geometry.ts

@@ -0,0 +1,50 @@
+import type { FrameFit, Size } from "../canvas/canvas-geometry";
+import type { BridgeRect } from "../../../../shared/design-bridge-messages-picker";
+
+/**
+ * From a rect the frame reported (its own viewport's CSS pixels) to a position in the canvas
+ * stage, where pins and the element action bar are drawn.
+ *
+ * The frame is laid out at its own size and scaled to fit, centred in the stage, so a point
+ * inside it lands at `frameOrigin + point × scale`. Pins and bars stay at their real size
+ * rather than being scaled with the frame — a 44px touch target must stay 44px.
+ */
+
+export interface StagePoint {
+  left: number;
+  top: number;
+}
+
+export function frameOrigin(fit: FrameFit, stage: Size): StagePoint {
+  return { left: (stage.width - fit.outerWidth) / 2, top: (stage.height - fit.outerHeight) / 2 };
+}
+
+/** Whether any of the element is inside the frame's viewport. */
+export function rectVisible(rect: BridgeRect, fit: FrameFit): boolean {
+  return rect.x + rect.w > 0 && rect.y + rect.h > 0 && rect.x < fit.width && rect.y < fit.height;
+}
+
+/** The centre of a pin at the element's top-right corner, kept `inset` px inside the frame. */
+export function pinCenter(rect: BridgeRect, fit: FrameFit, stage: Size, inset = 14): StagePoint {
+  const o = frameOrigin(fit, stage);
+  const clamp = (v: number, lo: number, hi: number) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+  return {
+    left: clamp(o.left + (rect.x + rect.w) * fit.scale, o.left + inset, o.left + fit.outerWidth - inset),
+    top: clamp(o.top + rect.y * fit.scale, o.top + inset, o.top + fit.outerHeight - inset),
+  };
+}
+
+/**
+ * Top-left of a floating bar beside the element: below it when there is room, above it
+ * otherwise, and kept inside the stage.
+ */
+export function barPosition(rect: BridgeRect, fit: FrameFit, stage: Size, bar: Size, gap = 8): StagePoint {
+  const o = frameOrigin(fit, stage);
+  const left = o.left + rect.x * fit.scale;
+  const top = o.top + rect.y * fit.scale;
+  const bottom = o.top + (rect.y + rect.h) * fit.scale;
+  const below = bottom + gap;
+  const y = below + bar.height <= stage.height ? below : Math.max(gap, top - gap - bar.height);
+  const x = Math.min(Math.max(gap, left), Math.max(gap, stage.width - bar.width - gap));
+  return { left: x, top: Math.min(y, Math.max(gap, stage.height - bar.height - gap)) };
+}

package/src/web/components/design/comments/comment-pins-overlay.tsx

@@ -0,0 +1,70 @@
+import { CheckCircle, Send, Trash2 } from "@/lib/icons";
+import {
+  ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { cn } from "@/lib/utils";
+import type { FrameFit, Size } from "../canvas/canvas-geometry";
+import type { CommentPins } from "./use-comment-pins";
+import { pinCenter, rectVisible } from "./comment-overlay-geometry";
+import type { DesignComment } from "../../../../shared/design-comment-types";
+
+/**
+ * Numbered pins over the canvas, one per open comment whose element is on screen, at the
+ * element's top-right corner. Each is a 44px target (the dot inside is smaller) with the
+ * adaptive context menu: right-click on desktop, long-press on touch; a tap opens the
+ * comment. A pin that was found again by its text after an edit gets a dashed ring, so a
+ * re-anchor is visible rather than silent.
+ */
+
+export interface PinActions {
+  onOpen: (c: DesignComment) => void;
+  onResolve: (c: DesignComment) => void;
+  onSend: (c: DesignComment) => void;
+  onDelete: (c: DesignComment) => void;
+}
+
+export function CommentPinsOverlay({ open, pins, fit, stage, actions }: {
+  open: readonly DesignComment[];
+  pins: CommentPins;
+  fit: FrameFit;
+  stage: Size;
+  actions: PinActions;
+}) {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-10 overflow-hidden" aria-label="Comment pins">
+      {open.map((c, i) => {
+        const status = pins.statusOf(c.id);
+        const rect = pins.rects.get(c.id)?.rect;
+        if ((status !== "pinned" && status !== "moved") || !rect || !rectVisible(rect, fit)) return null;
+        const at = pinCenter(rect, fit, stage);
+        return (
+          <ContextMenu key={c.id}>
+            <ContextMenuTrigger asChild>
+              <button
+                type="button"
+                onClick={() => actions.onOpen(c)}
+                aria-label={`Comment ${i + 1}: ${c.body}`}
+                title={c.body}
+                className="pointer-events-auto absolute flex size-11 -translate-x-1/2 -translate-y-1/2 select-none items-center justify-center"
+                style={{ left: at.left, top: at.top }}
+              >
+                <span className={cn(
+                  "flex size-6 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground shadow-md ring-2 ring-background",
+                  status === "moved" && "outline-dashed outline-2 outline-offset-2 outline-primary",
+                )}>
+                  {i + 1}
+                </span>
+              </button>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuItem onClick={() => actions.onResolve(c)}><CheckCircle className="size-4" /> Resolve</ContextMenuItem>
+              <ContextMenuItem onClick={() => actions.onSend(c)}><Send className="size-4" /> Send to AI</ContextMenuItem>
+              <ContextMenuSeparator />
+              <ContextMenuItem variant="destructive" onClick={() => actions.onDelete(c)}><Trash2 className="size-4" /> Delete</ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+        );
+      })}
+    </div>
+  );
+}

package/src/web/components/design/comments/comments-panel.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { CheckCircle, ChevronDown, ChevronRight, Loader2, MessageSquarePlus, RotateCcw, Send, Trash2, X } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import {
+  ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger,
+} from "@/components/ui/adaptive-context-menu";
+import { formatRelativeDate } from "@/lib/format-date";
+import type { DesignCommentsState } from "./use-design-comments";
+import type { PinStatus } from "./use-comment-pins";
+import type { DesignComment } from "../../../../shared/design-comment-types";
+
+/**
+ * The design's comments as a list: open ones numbered like their pins, resolved ones
+ * folded below, and the one action that gathers them all for the AI. Rows use the adaptive
+ * context menu; a tap opens the comment. A comment whose element could not be found is
+ * marked Detached rather than hidden — it still says what the user wanted changed.
+ */
+
+export interface CommentsPanelActions {
+  onOpen: (c: DesignComment) => void;
+  onResolve: (c: DesignComment, resolved: boolean) => void;
+  onSend: (c: DesignComment) => void;
+  onDelete: (c: DesignComment) => void;
+  onSendAll: () => void;
+  onClose: () => void;
+}
+
+const STATUS_LABEL: Partial<Record<PinStatus, string>> = { detached: "Detached", moved: "Moved", elsewhere: "On another page" };
+
+function Row({ c, number, status, actions }: {
+  c: DesignComment;
+  number: number | null;
+  status: PinStatus | null;
+  actions: CommentsPanelActions;
+}) {
+  const label = status ? STATUS_LABEL[status] : undefined;
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <button type="button" onClick={() => actions.onOpen(c)}
+          className="flex min-h-11 w-full select-none items-start gap-2 rounded-md px-2 py-1.5 text-left hover:bg-surface-elevated">
+          <span className={number === null
+            ? "mt-0.5 flex size-5 shrink-0 items-center justify-center text-text-subtle"
+            : "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-[11px] font-semibold text-primary-foreground"}>
+            {number ?? <CheckCircle className="size-4" />}
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="line-clamp-2 text-sm">{c.body}</span>
+            <span className="block truncate text-xs text-text-subtle">
+              &lt;{c.anchor.tag}&gt; · {status === "elsewhere" ? c.file : formatRelativeDate(c.createdAt)}
+              {label && <> · <span className={status === "detached" ? "text-warning" : undefined}>{label}</span></>}
+              {c.sentAt && " · Sent"}
+            </span>
+          </span>
+        </button>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        {c.resolvedAt
+          ? <ContextMenuItem onClick={() => actions.onResolve(c, false)}><RotateCcw className="size-4" /> Reopen</ContextMenuItem>
+          : <ContextMenuItem onClick={() => actions.onResolve(c, true)}><CheckCircle className="size-4" /> Resolve</ContextMenuItem>}
+        <ContextMenuItem onClick={() => actions.onSend(c)}><Send className="size-4" /> Send to AI</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive" onClick={() => actions.onDelete(c)}><Trash2 className="size-4" /> Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+export function CommentsPanel({ state, statusOf, actions }: {
+  state: DesignCommentsState;
+  statusOf: (id: string) => PinStatus;
+  actions: CommentsPanelActions;
+}) {
+  const [showResolved, setShowResolved] = useState(false);
+  const { open, resolved, comments, error } = state;
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-panel">
+      <div className="flex h-9 shrink-0 items-center gap-2 border-b border-border px-2">
+        <MessageSquarePlus className="size-4 text-text-subtle" />
+        <span className="flex-1 text-xs font-semibold">Comments</span>
+        <button type="button" onClick={actions.onClose} aria-label="Close comments"
+          className="flex size-11 items-center justify-center rounded-md text-text-subtle hover:bg-surface-elevated md:size-7">
+          <X className="size-4" />
+        </button>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto p-1">
+        {error ? (
+          <div className="p-3 text-xs text-destructive">
+            {error} <button type="button" className="min-h-11 px-1 text-primary underline md:min-h-0" onClick={state.reload}>Retry</button>
+          </div>
+        ) : comments === null ? (
+          <div className="flex justify-center py-6"><Loader2 className="size-4 animate-spin text-primary" /></div>
+        ) : open.length === 0 && resolved.length === 0 ? (
+          <p className="p-3 text-xs leading-relaxed text-text-subtle">
+            No comments yet. Turn on Select, pick an element on the canvas and leave a note on it; then send the notes to the AI together.
+          </p>
+        ) : (
+          <>
+            {open.map((c, i) => <Row key={c.id} c={c} number={i + 1} status={statusOf(c.id)} actions={actions} />)}
+            {open.length === 0 && <p className="p-3 text-xs text-text-subtle">Every comment is resolved.</p>}
+            {resolved.length > 0 && (
+              <button type="button" onClick={() => setShowResolved((v) => !v)} aria-expanded={showResolved}
+                className="mt-1 flex min-h-11 w-full items-center gap-1 px-2 text-xs font-semibold text-text-subtle md:min-h-8">
+                {showResolved ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />} Resolved ({resolved.length})
+              </button>
+            )}
+            {showResolved && resolved.map((c) => <Row key={c.id} c={c} number={null} status={null} actions={actions} />)}
+          </>
+        )}
+      </div>
+      <div className="shrink-0 border-t border-border p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+        <Button className="min-h-11 w-full md:min-h-9" disabled={open.length === 0} onClick={actions.onSendAll}>
+          <Send className="size-4" /> {open.length === 1 ? "Send 1 open comment to AI" : `Send ${open.length} open comments to AI`}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/web/components/design/comments/comments-send-preview.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import { Send } from "@/lib/icons";
+import { DesignResponsiveDialog } from "../dialogs/design-responsive-dialog";
+
+/**
+ * The whole message "Send to AI" is about to put in the design chat, shown before it goes
+ * anywhere. Element context inside it came from the design's files, which an agent wrote,
+ * so the user reads what the next agent will read. Confirming only fills the composer;
+ * sending is still the user's own press.
+ */
+
+export interface SendPreview {
+  text: string;
+  label: string;
+  /** Comments to stamp as sent once delivered; empty for a single element with no comment. */
+  ids: string[];
+}
+
+export function CommentsSendPreview({ preview, onCancel, onConfirm }: {
+  preview: SendPreview | null;
+  onCancel: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <DesignResponsiveDialog
+      open={!!preview}
+      onClose={onCancel}
+      title="Put this in the design chat?"
+      description="This is the full message. It lands in the chat's composer as an attachment; nothing is sent until you send it there."
+      className="md:max-w-2xl"
+      footer={<>
+        <Button variant="outline" onClick={onCancel}>Cancel</Button>
+        <Button onClick={onConfirm}><Send className="size-4" /> Put in chat</Button>
+      </>}
+    >
+      {preview && (
+        <pre className="whitespace-pre-wrap break-words rounded-md border border-border bg-surface-elevated p-3 font-mono text-xs leading-relaxed">
+          {preview.text}
+        </pre>
+      )}
+    </DesignResponsiveDialog>
+  );
+}

package/src/web/components/design/comments/design-comments-layer.tsx

@@ -0,0 +1,73 @@
+import type { FrameFit, Size } from "../canvas/canvas-geometry";
+import type { DesignCommentsFeature } from "./use-design-comments-feature";
+import { CommentPinsOverlay } from "./comment-pins-overlay";
+import { ElementActionBar } from "./element-action-bar";
+import { CommentComposer } from "./comment-composer";
+import { CommentsSendPreview } from "./comments-send-preview";
+import { CommentsPanel } from "./comments-panel";
+
+/**
+ * Where the comment feature draws. {@link DesignCommentsOverlay} goes inside the canvas
+ * stage (pins, the element action bar, and the composer and preview dialogs, which portal
+ * out anyway); {@link DesignCommentsSidePanel} is the list, which the canvas pane places
+ * beside the stage on desktop and in a bottom sheet on a phone.
+ */
+
+export function DesignCommentsOverlay({ feature, fit, stage, isMobile, selectionHint }: {
+  feature: DesignCommentsFeature;
+  fit: FrameFit;
+  stage: Size;
+  isMobile: boolean;
+  /** A note about the selected element from another canvas mode (e.g. why it cannot be moved). */
+  selectionHint?: string | null;
+}) {
+  return (
+    <>
+      <CommentPinsOverlay
+        open={feature.state.open}
+        pins={feature.pins}
+        fit={fit}
+        stage={stage}
+        actions={{
+          onOpen: feature.openComment,
+          onResolve: (c) => feature.resolveComment(c, true),
+          onSend: feature.sendComment,
+          onDelete: feature.deleteComment,
+        }}
+      />
+      <ElementActionBar
+        picker={feature.picker}
+        isMobile={isMobile}
+        fit={fit}
+        stage={stage}
+        onComment={feature.commentOnSelected}
+        onSend={feature.sendSelected}
+        hint={selectionHint}
+      />
+      <CommentComposer
+        target={feature.composerTarget}
+        onClose={feature.closeComposer}
+        onSubmit={feature.submitComposer}
+        onDelete={feature.deleteFromComposer}
+      />
+      <CommentsSendPreview preview={feature.preview} onCancel={feature.cancelPreview} onConfirm={feature.confirmPreview} />
+    </>
+  );
+}
+
+export function DesignCommentsSidePanel({ feature }: { feature: DesignCommentsFeature }) {
+  return (
+    <CommentsPanel
+      state={feature.state}
+      statusOf={feature.pins.statusOf}
+      actions={{
+        onOpen: feature.openComment,
+        onResolve: feature.resolveComment,
+        onSend: feature.sendComment,
+        onDelete: feature.deleteComment,
+        onSendAll: feature.sendAllOpen,
+        onClose: feature.closePanel,
+      }}
+    />
+  );
+}

package/src/web/components/design/comments/element-action-bar.tsx

@@ -0,0 +1,105 @@
+import { useLayoutEffect, useRef, useState, type ElementType } from "react";
+import { ArrowUp, MessageSquarePlus, Send, X } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import type { FrameFit, Size } from "../canvas/canvas-geometry";
+import type { ElementPicker } from "./use-element-picker";
+import { barPosition } from "./comment-overlay-geometry";
+
+/**
+ * Actions on the element picked inside the canvas: Comment, Send to AI, Parent, Clear.
+ *
+ * The element lives in the iframe, so it cannot be the trigger of an adaptive context menu
+ * (that must be a node of this document). The actions are therefore always-visible inline
+ * buttons instead: floating beside the element on desktop, in the thumb zone at the bottom
+ * of the canvas on a phone — where, while nothing is picked yet, the same bar says how
+ * picking works on touch and offers the way out.
+ */
+
+interface Actions {
+  onComment: () => void;
+  onSend: () => void;
+  /** Shown with the selected element, e.g. "Created by a script, so it cannot be moved". */
+  hint?: string | null;
+}
+
+export function ElementActionBar({ picker, isMobile, fit, stage, onComment, onSend, hint }: Actions & {
+  picker: ElementPicker;
+  isMobile: boolean;
+  fit: FrameFit;
+  stage: Size;
+}) {
+  const barRef = useRef<HTMLDivElement>(null);
+  const [barSize, setBarSize] = useState<Size>({ width: 320, height: 40 });
+  const { selected } = picker;
+  useLayoutEffect(() => {
+    const el = barRef.current;
+    if (el && (el.offsetWidth !== barSize.width || el.offsetHeight !== barSize.height)) {
+      setBarSize({ width: el.offsetWidth, height: el.offsetHeight });
+    }
+  });
+
+  const buttons: Array<{ label: string; icon: ElementType; run: () => void }> = [
+    { label: "Comment", icon: MessageSquarePlus, run: onComment },
+    { label: "Send to AI", icon: Send, run: onSend },
+    { label: "Parent", icon: ArrowUp, run: picker.selectParent },
+    { label: "Clear", icon: X, run: picker.clear },
+  ];
+
+  if (isMobile) {
+    if (!selected && !picker.on) return null;
+    return (
+      <div className="absolute inset-x-2 bottom-2 z-20 rounded-lg border border-border bg-popover p-2 shadow-lg" role="toolbar" aria-label="Selected element">
+        {selected ? (
+          <>
+            <p className="truncate px-1 pb-1 text-xs text-text-subtle">&lt;{selected.tag}&gt; {selected.text}</p>
+            {hint && <p className="px-1 pb-1 text-xs text-warning">{hint}</p>}
+            <div className="grid grid-cols-4 gap-2">
+              {buttons.map((b) => (
+                <button key={b.label} type="button" onClick={b.run}
+                  className="flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-md text-[11px] font-medium text-text-2 active:bg-surface-elevated">
+                  <b.icon className="size-5" /> {b.label}
+                </button>
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className="flex items-center gap-2">
+            <p className="min-w-0 flex-1 text-sm text-text-2">
+              {picker.outlined ? `Tap the <${picker.outlined.tag}> again to select it.` : "Tap an element, then tap it again to select. Long-press to comment."}
+            </p>
+            <button type="button" onClick={() => picker.setOn(false)}
+              className="min-h-11 shrink-0 rounded-md px-3 text-sm font-medium text-primary active:bg-surface-elevated">
+              Done
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (!selected) {
+    if (!picker.on) return null;
+    return (
+      <div className="pointer-events-none absolute left-1/2 top-2 z-20 -translate-x-1/2 rounded-full border border-border bg-popover px-3 py-1 text-xs text-text-2 shadow-md">
+        Click an element to select it · Esc to stop
+      </div>
+    );
+  }
+  const at = barPosition(selected.rect, fit, stage, barSize);
+  return (
+    <div ref={barRef} role="toolbar" aria-label={`Selected <${selected.tag}>`}
+      className="absolute z-20 flex items-center gap-0.5 rounded-lg border border-border bg-popover p-1 shadow-lg"
+      style={{ left: at.left, top: at.top }}>
+      <span className="max-w-32 truncate px-2 font-mono text-xs text-text-subtle">&lt;{selected.tag}&gt;</span>
+      {hint && <span className="max-w-64 truncate px-1 text-xs text-warning" title={hint}>{hint}</span>}
+      {buttons.map((b) => (
+        <button key={b.label} type="button" onClick={b.run} title={b.label}
+          className={cn("flex h-8 items-center gap-1.5 rounded-md px-2 text-xs text-text-2 hover:bg-surface-elevated hover:text-foreground",
+            b.label === "Clear" && "px-1.5")}>
+          <b.icon className="size-4" /> {b.label !== "Clear" && b.label}
+          {b.label === "Clear" && <span className="sr-only">Clear</span>}
+        </button>
+      ))}
+    </div>
+  );
+}