@cychien/ezdesign 0.9.2 → 0.11.0

package/dist/shell.js

@@ -9,6 +9,13 @@
     ["path", { d: "M18 6L6.00081 17.9992M17.9992 18L6 6.00085", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]
   ];
 
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/SidebarLeftIcon.js
+  var SidebarLeftIcon = [
+    ["path", { d: "M2 12C2 8.31087 2 6.4663 2.81382 5.15877C3.1149 4.67502 3.48891 4.25427 3.91891 3.91554C5.08116 3 6.72077 3 10 3H14C17.2792 3 18.9188 3 20.0811 3.91554C20.5111 4.25427 20.8851 4.67502 21.1862 5.15877C22 6.4663 22 8.31087 22 12C22 15.6891 22 17.5337 21.1862 18.8412C20.8851 19.325 20.5111 19.7457 20.0811 20.0845C18.9188 21 17.2792 21 14 21H10C6.72077 21 5.08116 21 3.91891 20.0845C3.48891 19.7457 3.1149 19.325 2.81382 18.8412C2 17.5337 2 15.6891 2 12Z", stroke: "currentColor", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M9.5 3L9.5 21", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }],
+    ["path", { d: "M5 7H6M5 10H6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]
+  ];
+
   // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/AlignSelectionIcon.js
   var AlignSelectionIcon = [
     ["path", { d: "M20 6V18M18 4H6M18 20H6M4 18V6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
@@ -116,6 +123,14 @@
     ["path", { d: "M15.5 12H8.5M12 8.5V15.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }]
   ];
 
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/Plug01Icon.js
+  var Plug01Icon = [
+    ["path", { d: "M15.5 2V6M8.5 6V2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M6.00446 7.61331C5.93719 6.74273 6.63957 6 7.53014 6H16.4699C17.3604 6 18.0628 6.74273 17.9955 7.61331L17.8117 9.99197C17.6796 11.7019 17.1011 13.3498 16.132 14.7773L15.5312 15.6622C14.9638 16.4979 14.0077 17 12.9838 17H11.0162C9.99228 17 9.03617 16.4979 8.46881 15.6622L7.86803 14.7773C6.89885 13.3498 6.32041 11.7019 6.18827 9.99197L6.00446 7.61331Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }],
+    ["path", { d: "M12 17V22", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }],
+    ["path", { d: "M11 9H13", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "3" }]
+  ];
+
   // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/BubbleChatIcon.js
   var BubbleChatIcon = [
     ["path", { d: "M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C10.3719 21.5 8.8394 21.0904 7.5 20.3687C5.63177 19.362 4.37462 20.2979 3.26592 20.4658C3.09774 20.4913 2.93024 20.4302 2.80997 20.31C2.62741 20.1274 2.59266 19.8451 2.6935 19.6074C3.12865 18.5818 3.5282 16.6382 2.98341 15C2.6698 14.057 2.5 13.0483 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
@@ -143,6 +158,12 @@
     ["path", { d: "M9.5 13.9995L12.8693 10.6301C13.2731 10.2263 13.8208 9.99945 14.3919 9.99945C15.0873 9.99945 15.7399 10.3353 16.1441 10.9011L20.5 16.9995", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "3" }]
   ];
 
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/DollarSquareIcon.js
+  var DollarSquareIcon = [
+    ["path", { d: "M2.5 12C2.5 7.77027 2.5 5.6554 3.69797 4.25276C3.86808 4.05358 4.05358 3.86808 4.25276 3.69797C5.6554 2.5 7.77027 2.5 12 2.5C16.2297 2.5 18.3446 2.5 19.7472 3.69797C19.9464 3.86808 20.1319 4.05358 20.302 4.25276C21.5 5.6554 21.5 7.77027 21.5 12C21.5 16.2297 21.5 18.3446 20.302 19.7472C20.1319 19.9464 19.9464 20.1319 19.7472 20.302C18.3446 21.5 16.2297 21.5 12 21.5C7.77027 21.5 5.6554 21.5 4.25276 20.302C4.05358 20.1319 3.86808 19.9464 3.69797 19.7472C2.5 18.3446 2.5 16.2297 2.5 12Z", stroke: "currentColor", strokeWidth: "1.5", key: "0" }],
+    ["path", { d: "M14.7102 10.0611C14.6111 9.29844 13.7354 8.06622 12.1608 8.06619C10.3312 8.06616 9.56136 9.07946 9.40515 9.58611C9.16145 10.2638 9.21019 11.6571 11.3547 11.809C14.0354 11.999 15.1093 12.3154 14.9727 13.956C14.836 15.5965 13.3417 15.951 12.1608 15.9129C10.9798 15.875 9.04764 15.3325 8.97266 13.8733M11.9734 6.99805V8.06982M11.9734 15.9031V16.998", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "1" }]
+  ];
+
   // src/acp-ask.ts
   function answeredField(field, answered) {
     return answered.has(field.key) || (field.kind === "select" || field.kind === "multiselect") && !!field.custom && answered.has(field.custom.key);
@@ -410,23 +431,53 @@
   // src/client/slash.ts
   var MAX_QUERY = 24;
   var BREAK = /[\s ]/;
+  var PATH_CHAR = /[./\\:@#%&=?~+*_-]/;
+  function opensTrigger(prev) {
+    return BREAK.test(prev) || /[\p{P}\p{S}]/u.test(prev) && !PATH_CHAR.test(prev);
+  }
   var menuCount = 0;
+  function menuPosition(at2, box, view, scale2) {
+    const margin = 8 * scale2;
+    const gap = 6 * scale2;
+    const left = Math.max(margin, Math.min(at2.left, view.width - box.width - margin));
+    const below = at2.bottom + gap;
+    const above = at2.top - box.height - gap;
+    const crowded = below + box.height > view.height - margin || at2.top > view.height * 0.6;
+    const top = crowded && above >= margin ? above : Math.min(below, view.height - box.height - margin);
+    return { left, top };
+  }
   function detectSlash(before, trigger = "/") {
     const start = before.lastIndexOf(trigger);
     if (start === -1) return null;
     const prev = start === 0 ? "" : before[start - 1];
-    if (prev && !BREAK.test(prev)) return null;
+    if (prev && !opensTrigger(prev)) return null;
     const query = before.slice(start + 1);
     if (query.length > MAX_QUERY || BREAK.test(query)) return null;
     return { start, query };
   }
+  var WORD_BREAK = /[^\p{L}\p{N}]/u;
+  function rank(command, q) {
+    const names = [command.id, command.label].map((term) => term.toLowerCase());
+    if (names.some((name) => name.startsWith(q))) return 0;
+    if (names.some((name) => startsWord(name, q))) return 1;
+    if ([...names, ...command.keywords.map((k) => k.toLowerCase())].some((term) => term.includes(q))) return 2;
+    return null;
+  }
+  function startsWord(text, q) {
+    let at2 = text.indexOf(q);
+    while (at2 !== -1) {
+      if (at2 === 0 || WORD_BREAK.test(text.charAt(at2 - 1))) return true;
+      at2 = text.indexOf(q, at2 + 1);
+    }
+    return false;
+  }
   function filterCommands(commands, query) {
     const available = commands.filter((c) => c.enabled?.() ?? true);
     const q = query.trim().toLowerCase();
     if (!q) return available;
-    return available.filter(
-      (c) => [c.id, c.label, ...c.keywords].some((term) => term.toLowerCase().includes(q))
-    );
+    const ranked = available.map((command) => ({ command, rank: rank(command, q) })).filter((r) => r.rank !== null).sort((a, b) => a.rank - b.rank).map((r) => r.command);
+    if (ranked.length > 0) return ranked;
+    return available.filter((c) => c.description && startsWord(c.description.toLowerCase(), q));
   }
   function attachSlashMenu(editable, {
     mk,
@@ -466,11 +517,8 @@
       const at2 = slashRect();
       if (!at2) return;
       const box = menu.getBoundingClientRect();
-      const left = Math.max(8, Math.min(at2.left, view.innerWidth - box.width - 8));
-      const below = at2.bottom + 6;
-      const above = at2.top - box.height - 6;
-      const crowded = below + box.height > view.innerHeight - 8 || at2.top > view.innerHeight * 0.6;
-      const top = crowded && above >= 8 ? above : Math.min(below, view.innerHeight - box.height - 8);
+      const scale2 = box.width / menu.offsetWidth || 1;
+      const { left, top } = menuPosition(at2, box, { width: view.innerWidth, height: view.innerHeight }, scale2);
       menu.style.left = `${left}px`;
       menu.style.top = `${top}px`;
     }
@@ -626,8 +674,38 @@
     return { close };
   }
 
+  // src/library/policy.ts
+  var VIDEO_CAP_BYTES = 2e8;
+  var THUMBNAIL_LONG_SIDE = 400;
+  var TAG_MAX_LENGTH = 64;
+  function normalizeTag(raw) {
+    const name = raw.normalize("NFC").trim().replace(/\s+/g, " ");
+    if (name === "" || name.length > TAG_MAX_LENGTH || /[,，]/.test(name)) return null;
+    return lowercaseInitial(name);
+  }
+  function lowercaseInitial(name) {
+    const [first = "", second = ""] = name;
+    if (second !== second.toLowerCase()) return name;
+    return first.toLowerCase() + name.slice(first.length);
+  }
+  function tagKey(name) {
+    return name.normalize("NFKC").trim().replace(/\s+/g, " ").toLowerCase();
+  }
+  function thumbnailSize(width, height) {
+    const scale2 = Math.min(1, THUMBNAIL_LONG_SIDE / Math.max(width, height));
+    return { width: Math.max(1, Math.round(width * scale2)), height: Math.max(1, Math.round(height * scale2)) };
+  }
+
+  // src/attachment-policy.ts
+  var MAX_ATTACHMENT_BYTES = 8 * 1024 * 1024;
+  function isVideoMime(mime) {
+    return mime.startsWith("video/");
+  }
+  function attachmentByteLimit(mime) {
+    return isVideoMime(mime) ? VIDEO_CAP_BYTES : MAX_ATTACHMENT_BYTES;
+  }
+
   // src/client/attach.ts
-  var MAX_BYTES = 8 * 1024 * 1024;
   function directAttachments(api2) {
     return {
       async upload(file) {
@@ -799,8 +877,9 @@
       placeCaretAfter(after);
     }
     function add(file) {
-      if (file.size > MAX_BYTES) {
-        showError(`${file.name || "\u9019\u500B\u6A94\u6848"} \u8D85\u904E\u55AE\u6A94 8 MB \u4E0A\u9650`);
+      const limit = attachmentByteLimit(file.type);
+      if (file.size > limit) {
+        showError(`${file.name || "\u9019\u500B\u6A94\u6848"} \u8D85\u904E\u55AE\u6A94 ${Math.round(limit / 1e6)} MB \u4E0A\u9650`);
         return;
       }
       const chip = fileChip(file.name || "\u8CBC\u4E0A\u7684\u5716\u7247");
@@ -986,6 +1065,16 @@
       refs: () => draftRefs(snapshot2()),
       pending: () => [...uploading].filter((c) => editable.contains(c)).length,
       pendingNames: () => draftPendingNames(snapshot2()),
+      paintNotes(noteFor) {
+        editable.querySelectorAll(`[${CHIP_ATTR}], [${PICK_ATTR}]`).forEach((chip) => {
+          const ids = chip.hasAttribute(PICK_ATTR) ? parsePick(chip.getAttribute(PICK_ATTR)).map((f) => f.id) : [chip.getAttribute(CHIP_ATTR) ?? ""].filter(Boolean);
+          const text = ids.length ? noteFor(ids) : null;
+          let note2 = chip.querySelector(".ez-chip-note");
+          if (!text) return note2?.remove();
+          note2 ?? (note2 = chip.querySelector(".ez-chip-name").insertAdjacentElement("afterend", mk("span", "ez-chip-note")));
+          note2.textContent = text;
+        });
+      },
       // Either menu, whichever is up - at most one can be, since a trigger only
       // counts at the start of the word being typed.
       closeSlash: () => slash.close() || skillMenu.close(),
@@ -1192,8 +1281,8 @@
         guest: sender.kind
       };
     }),
-    /** Mod+wheel, and from a canvas guest ctrl+wheel (a pinch): pan or zoom the
-     *  stage or the board. `at` is in the guest's viewport. */
+    /** Mod+wheel, and from a canvas guest any wheel while annotating or picking:
+     *  pan or zoom the stage or the board. `at` is in the guest's viewport. */
     "ez:wheel": up(BOTH, (r) => {
       const at2 = obj(r.at);
       const x = at2 ? num(at2.x) : null;
@@ -1238,8 +1327,8 @@
       case "upload": {
         const name = str(op.name);
         const mime = str(op.mime);
-        if (name === null || mime === null || !(op.bytes instanceof ArrayBuffer)) return null;
-        return { op: "upload", name, mime, bytes: op.bytes };
+        if (name === null || mime === null || !(op.file instanceof Blob)) return null;
+        return { op: "upload", name, mime, file: op.file };
       }
       case "discard-upload": {
         const id = str(op.id);
@@ -1342,6 +1431,19 @@
   var ZOOM_MAX = 4;
   var MAX_FRAME_HTML = 512 * 1024;
   var MAX_CANVAS_NAME = 60;
+  var MAX_FRAME_TITLE = 80;
+  var MIN_FRAME_SIZE = { width: 240, height: 240 };
+  var MAX_FRAME_SIZE = { width: 3840, height: 12e3 };
+  var MAX_IMAGE_BYTES = 20 * 1024 * 1024;
+  var IMAGE_TYPES = {
+    "image/png": "png",
+    "image/jpeg": "jpg",
+    "image/gif": "gif",
+    "image/webp": "webp",
+    "image/avif": "avif",
+    "image/svg+xml": "svg"
+  };
+  var ASSET_SHAPE = new RegExp(`^[0-9a-f]{12}\\.(${Object.values(IMAGE_TYPES).join("|")})$`);
 
   // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/AiSketchIcon.js
   var AiSketchIcon = [
@@ -1373,6 +1475,13 @@
     const bottom = Math.max(...rects.map((r) => r.y + r.height));
     return { x, y, width: right - x, height: bottom - y };
   }
+  function imageFrameSize(natural) {
+    const scale2 = Math.min(1, MAX_FRAME_SIZE.width / natural.width, MAX_FRAME_SIZE.height / natural.height);
+    return {
+      width: Math.max(MIN_FRAME_SIZE.width, Math.round(natural.width * scale2)),
+      height: Math.max(MIN_FRAME_SIZE.height, Math.round(natural.height * scale2))
+    };
+  }
   function freeAlongRow(from, size, existing, limit) {
     let x = from.x;
     for (; ; ) {
@@ -1425,12 +1534,26 @@
       height: (stage2.height + 2 * margin) / camera.zoom
     };
   }
+  function boxBetween(a, b) {
+    return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y), width: Math.abs(a.x - b.x), height: Math.abs(a.y - b.y) };
+  }
   function intersects(a, b) {
     return !(a.x + a.width < b.x || b.x + b.width < a.x || a.y + a.height < b.y || b.y + b.height < a.y);
   }
   function worldTransform(camera) {
     return `translate(${-camera.x * camera.zoom}px, ${-camera.y * camera.zoom}px) scale(${camera.zoom})`;
   }
+  var EDGE_ZONE = 24;
+  var EDGE_SPEED = 1200;
+  function edgePan(at2, from, stage2) {
+    const axis = (p, start, length) => {
+      const zone = Math.min(EDGE_ZONE, length / 4);
+      if (p < zone && p < start) return -EDGE_SPEED * Math.min(1, (zone - p) / zone);
+      if (p > length - zone && p > start) return EDGE_SPEED * Math.min(1, (p - (length - zone)) / zone);
+      return 0;
+    };
+    return { x: axis(at2.x, from.x, stage2.width), y: axis(at2.y, from.y, stage2.height) };
+  }
 
   // src/client/canvas/guides.ts
   var SNAP_PX = 6;
@@ -1497,6 +1620,23 @@
       copies
     };
   }
+  function planImages(images, center, mint) {
+    const width = images.reduce((sum, image) => sum + image.size.width, 0) + GAP * (images.length - 1);
+    let x = Math.round(center.x - width / 2);
+    const inputs = images.map((image) => {
+      const rect = { x, y: Math.round(center.y - image.size.height / 2), ...image.size };
+      x += image.size.width + GAP;
+      return { id: mint(), asset: image.asset, title: image.title, rect };
+    });
+    const added = inputs.map((input) => input.id);
+    return {
+      label: added.length > 1 ? `\u8CBC\u4E0A ${added.length} \u5F35\u5716\u7247` : "\u8CBC\u4E0A\u5716\u7247",
+      apply: inputs.map((input) => ({ t: "image", input })),
+      undo: [{ t: "remove", ids: added }],
+      redo: [{ t: "restore", ids: added }],
+      added
+    };
+  }
   function planRemove(ids) {
     const list = [...ids];
     return {
@@ -1515,6 +1655,7 @@
         frames2.push({ ...source, id: edit.input.id, rect: { ...source.rect, ...edit.input.at } });
         continue;
       }
+      if (edit.t === "image") continue;
       for (const op of edit.ops) {
         if (op.t === "move") {
           const at2 = new Map(op.frames.map((f) => [f.id, f]));
@@ -1590,7 +1731,7 @@
   var TEST_IDS = {
     /** role=tablist */
     tabs: "ez-tabs",
-    /** role=tab, only while a dev server is attached */
+    /** role=tab, while a dev server is attached or there is one to start */
     appTab: "ez-tab-app",
     /** role=tab, `data-canvas-id` */
     canvasTab: "ez-tab-canvas",
@@ -1649,6 +1790,7 @@
   var ZOOM_STEP = 1.25;
   var WHEEL_ZOOM = 25e-4;
   var DRAG_PX = 3;
+  var MAX_PAN_STEP_S = 1 / 30;
   function el(tag, className, text) {
     const node = document.createElement(tag);
     node.className = className;
@@ -1656,12 +1798,13 @@
     return node;
   }
   var BoardView = class {
-    constructor(canvas, host) {
+    constructor(canvas, host2) {
       this.canvas = canvas;
-      this.host = host;
+      this.host = host2;
       __publicField(this, "el");
       __publicField(this, "world");
       __publicField(this, "heads");
+      __publicField(this, "marquee");
       __publicField(this, "guides");
       __publicField(this, "empty");
       __publicField(this, "readout");
@@ -1685,6 +1828,8 @@
       __publicField(this, "stage", { width: 0, height: 0 });
       __publicField(this, "shown", false);
       __publicField(this, "frameRequested", 0);
+      __publicField(this, "edgePanRequested", 0);
+      __publicField(this, "edgePanAt", 0);
       __publicField(this, "settleTimer", 0);
       __publicField(this, "saveTimer", 0);
       /** The zoom the frames were last told, so a pan sends them nothing. */
@@ -1708,11 +1853,13 @@
       this.guides = el("div", "ez-guides");
       this.world.append(this.guides);
       this.heads = el("div", "ez-board-heads");
+      this.marquee = el("div", "ez-board-marquee");
+      this.marquee.hidden = true;
       this.empty = el("div", "ez-board-empty");
       this.empty.append(icon(AiSketchIcon, 64));
       const tools = el("div", "ez-board-tools");
       tools.dataset.testid = TEST_IDS.tools;
-      const button = (label, glyph, run) => {
+      const button2 = (label, glyph, run) => {
         const b = el("button", "ez-board-tool");
         b.append(icon(glyph, 14));
         b.setAttribute("aria-label", label);
@@ -1725,11 +1872,11 @@
       this.readout.setAttribute("role", "status");
       this.readout.setAttribute("aria-label", LABELS.zoomLevel);
       tools.append(
-        button(LABELS.zoomOut, MinusIcon, () => this.zoomBy(1 / ZOOM_STEP)),
+        button2(LABELS.zoomOut, MinusIcon, () => this.zoomBy(1 / ZOOM_STEP)),
         this.readout,
-        button(LABELS.zoomIn, PlusIcon, () => this.zoomBy(ZOOM_STEP))
+        button2(LABELS.zoomIn, PlusIcon, () => this.zoomBy(ZOOM_STEP))
       );
-      this.el.append(this.world, this.heads, this.empty, tools);
+      this.el.append(this.world, this.heads, this.marquee, this.empty, tools);
       this.el.addEventListener("wheel", (e) => this.onBoardWheel(e), { passive: false });
       this.el.addEventListener("pointerdown", (e) => this.onPointerDown(e));
       this.el.addEventListener("pointermove", (e) => this.onPointerMove(e));
@@ -1818,6 +1965,7 @@
       window.clearTimeout(this.settleTimer);
       window.clearTimeout(this.saveTimer);
       cancelAnimationFrame(this.frameRequested);
+      cancelAnimationFrame(this.edgePanRequested);
       this.el.remove();
     }
     /** E/R on: frames take the pointer so the overlay annotates; off: the board
@@ -1969,6 +2117,23 @@
       this.commit(step2);
       this.select(new Set(step2.copies));
     }
+    /** Pasted images, each at its natural size, in a row centred on the view and
+     *  selected, as a paste lands in Figma. */
+    async pasteImages(files) {
+      const stored = await Promise.all(
+        files.map(async (file) => {
+          const natural = await naturalSize(file);
+          const asset = natural && await this.host.storeImage(file);
+          return natural && asset ? { asset, title: imageTitle(file), size: imageFrameSize(natural) } : null;
+        })
+      );
+      const images = stored.filter((image) => image !== null);
+      if (!images.length || !this.camera) return;
+      const center = screenToWorld(this.camera, { x: this.stage.width / 2, y: this.stage.height / 2 });
+      const step2 = planImages(images, center, () => mintFrameId((b) => crypto.getRandomValues(b)));
+      this.commit(step2);
+      this.select(new Set(step2.added));
+    }
     select(ids) {
       this.selection = ids;
       this.paintSelection();
@@ -2156,11 +2321,13 @@
       } else {
         this.setCamera(panned(this.camera, -e.deltaX * unit, -e.deltaY * unit));
       }
+      if (this.gesture?.t === "move" && this.gesture.started) this.dragTo(this.gesture);
+      if (this.gesture?.t === "marquee" && this.gesture.started) this.paintMarquee(this.gesture);
     }
-    /** The background, or anywhere with Space held, pans; a frame's head or body
-     *  selects and drags it. */
+    /** Space held or the middle button pans; the background draws a selection
+     *  box; a frame's head or body selects and drags it. */
     onPointerDown(e) {
-      if (e.button !== 0 || !this.camera || this.gesture) return;
+      if (e.button !== 0 && e.button !== 1 || !this.camera || this.gesture) return;
       const target2 = e.target;
       if (target2.closest(".ez-board-tools")) return;
       this.following = false;
@@ -2170,7 +2337,7 @@
         this.el.setPointerCapture(e.pointerId);
         this.gesture = gesture;
       };
-      if (this.spaceHeld) {
+      if (this.spaceHeld || e.button === 1) {
         start({ t: "pan", pointer: e.pointerId, x: e.clientX, y: e.clientY, camera: this.camera });
         this.el.classList.add("ez-panning");
         return;
@@ -2192,36 +2359,76 @@
         } else if (!this.selection.has(id)) {
           this.select(/* @__PURE__ */ new Set([id]));
         }
-        start({ t: "move", pointer: e.pointerId, x: e.clientX, y: e.clientY, ids: new Set(this.selection), started: false, dx: 0, dy: 0, toggleOnClick });
+        const from = this.boardPoint(e);
+        start({
+          t: "move",
+          pointer: e.pointerId,
+          x: e.clientX,
+          y: e.clientY,
+          from,
+          at: from,
+          camera: this.camera,
+          ids: new Set(this.selection),
+          started: false,
+          dx: 0,
+          dy: 0,
+          toggleOnClick
+        });
         return;
       }
       if (!id) {
         this.setLive(null);
-        this.select(/* @__PURE__ */ new Set());
+        if (!e.shiftKey) this.select(/* @__PURE__ */ new Set());
         this.host.escape();
-        start({ t: "pan", pointer: e.pointerId, x: e.clientX, y: e.clientY, camera: this.camera });
-        this.el.classList.add("ez-panning");
+        const from = this.boardPoint(e);
+        start({
+          t: "marquee",
+          pointer: e.pointerId,
+          origin: screenToWorld(this.camera, from),
+          from,
+          at: from,
+          base: new Set(this.selection),
+          started: false
+        });
       }
     }
     onPointerMove(e) {
       const g = this.gesture;
       if (!g || e.pointerId !== g.pointer || !this.camera) return;
-      const zoom = this.camera.zoom;
       if (g.t === "pan") {
         this.setCamera(panned(g.camera, e.clientX - g.x, e.clientY - g.y));
         return;
       }
+      if (g.t === "marquee") {
+        g.at = this.boardPoint(e);
+        if (!g.started && Math.hypot(g.at.x - g.from.x, g.at.y - g.from.y) < DRAG_PX) return;
+        g.started = true;
+        this.paintMarquee(g);
+        this.startEdgePan();
+        return;
+      }
       if (!g.started) {
         if (Math.hypot(e.clientX - g.x, e.clientY - g.y) < DRAG_PX) return;
         g.started = true;
         this.el.classList.add("ez-arranging");
       }
+      g.at = { x: g.from.x + e.clientX - g.x, y: g.from.y + e.clientY - g.y };
+      this.dragTo(g);
+      this.startEdgePan();
+    }
+    /** The dragged frames under the pointer, wherever the camera has gone since
+     *  the press. */
+    dragTo(g) {
+      const camera = this.camera;
+      if (!camera) return;
       const moving = this.frames.filter((f) => g.ids.has(f.id));
       const box = boundsOf(moving.map((f) => f.rect));
       if (!box) return;
-      const raw = { ...box, x: box.x + (e.clientX - g.x) / zoom, y: box.y + (e.clientY - g.y) / zoom };
+      const grabbed = screenToWorld(g.camera, g.from);
+      const pointer = screenToWorld(camera, g.at);
+      const raw = { ...box, x: box.x + pointer.x - grabbed.x, y: box.y + pointer.y - grabbed.y };
       const others = this.frames.filter((f) => !g.ids.has(f.id)).map((f) => f.rect);
-      const snapped = snapMove(raw, others, zoom);
+      const snapped = snapMove(raw, others, camera.zoom);
       g.dx = Math.round(snapped.rect.x - box.x);
       g.dy = Math.round(snapped.rect.y - box.y);
       for (const f of moving) {
@@ -2230,12 +2437,48 @@
       this.paintHeads();
       this.paintGuides(snapped.guides);
     }
+    /** Selects every frame the box touches, on top of what a shift-press kept. */
+    paintMarquee(g) {
+      const camera = this.camera;
+      if (!camera) return;
+      const box = boxBetween(g.origin, screenToWorld(camera, g.at));
+      const hits = this.frames.filter((f) => intersects(box, f.rect)).map((f) => f.id);
+      this.select(/* @__PURE__ */ new Set([...g.base, ...hits]));
+      const screen = boxBetween(worldToScreen(camera, g.origin), g.at);
+      this.marquee.style.transform = `translate(${screen.x}px, ${screen.y}px)`;
+      this.marquee.style.width = `${screen.width}px`;
+      this.marquee.style.height = `${screen.height}px`;
+      this.marquee.hidden = false;
+    }
+    startEdgePan() {
+      if (this.edgePanRequested) return;
+      this.edgePanAt = performance.now();
+      this.edgePanRequested = requestAnimationFrame((now) => this.edgePanStep(now));
+    }
+    /** One frame of a drag held at the edge: pan, then carry the frames along.
+     *  Stops by itself once the pointer leaves the edge or the drag ends. */
+    edgePanStep(now) {
+      this.edgePanRequested = 0;
+      const g = this.gesture;
+      if (!g || g.t === "pan" || !g.started || !this.camera) return;
+      const speed = edgePan(g.at, g.from, this.stage);
+      if (!speed.x && !speed.y) return;
+      const dt = Math.min(MAX_PAN_STEP_S, Math.max(0, now - this.edgePanAt) / 1e3);
+      this.edgePanAt = now;
+      this.setCamera(panned(this.camera, -speed.x * dt, -speed.y * dt));
+      if (g.t === "move") this.dragTo(g);
+      else this.paintMarquee(g);
+      this.edgePanRequested = requestAnimationFrame((next) => this.edgePanStep(next));
+    }
     onPointerUp(e, cancelled = false) {
       const g = this.gesture;
       if (!g || e.pointerId !== g.pointer) return;
       this.gesture = null;
+      cancelAnimationFrame(this.edgePanRequested);
+      this.edgePanRequested = 0;
       this.el.classList.remove("ez-panning", "ez-arranging");
       this.paintGuides([]);
+      this.marquee.hidden = true;
       if (g.t !== "move") return;
       if (!g.started) {
         if (g.toggleOnClick) this.select(new Set([...this.selection].filter((id) => id !== g.toggleOnClick)));
@@ -2255,6 +2498,29 @@
       if (id && this.cards.get(id)?.iframe) this.setLive(id);
     }
   };
+  async function naturalSize(image) {
+    const bitmap = await createImageBitmap(image).catch(() => null);
+    if (bitmap) {
+      const size = { width: bitmap.width, height: bitmap.height };
+      bitmap.close();
+      return size;
+    }
+    const url = URL.createObjectURL(image);
+    try {
+      const img = new Image();
+      img.src = url;
+      await img.decode();
+      return img.naturalWidth && img.naturalHeight ? { width: img.naturalWidth, height: img.naturalHeight } : null;
+    } catch {
+      return null;
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }
+  function imageTitle(file) {
+    const stem = file.name.replace(/\.[^.]*$/, "").trim();
+    return [...stem || "\u5716\u7247"].slice(0, MAX_FRAME_TITLE).join("");
+  }
 
   // src/client/confirm-dialog.ts
   function confirmDialog(offer) {
@@ -2324,10 +2590,10 @@
   ];
 
   // src/client/canvas/tabs.ts
-  function tabsModel(app, canvas) {
+  function tabsModel(appTab, canvas) {
     const open = canvas.canvases.filter((c) => !c.archived).sort((a, b) => a.createdAt - b.createdAt);
     const tabs = [
-      ...app ? [{ id: "app", label: LABELS.appTab, closable: false }] : [],
+      ...appTab ? [{ id: "app", label: LABELS.appTab, closable: false }] : [],
       ...open.map((c) => ({ id: c.id, label: LABELS.canvasTab(c.name), closable: true }))
     ];
     const active = tabs.some((t) => t.id === canvas.activeTab) ? canvas.activeTab : tabs[0]?.id ?? null;
@@ -2549,6 +2815,9 @@
   };
 
   // src/client/canvas/index.ts
+  function returnKeysToShell(board, frame) {
+    if (document.activeElement === frame) board.el.focus({ preventScroll: true });
+  }
   async function canvasRequest(api2, request) {
     const [method, path, body] = (() => {
       switch (request.do) {
@@ -2568,11 +2837,18 @@
           return ["POST", `/canvases/${request.canvasId}/ops`, request.step];
         case "duplicate":
           return ["POST", `/canvases/${request.canvasId}/frames`, request.input];
+        case "asset":
+          return ["POST", `/canvases/${request.canvasId}/assets`, request.image];
+        case "image-frame":
+          return ["POST", `/canvases/${request.canvasId}/image-frames`, request.input];
         case "view":
           return ["PUT", "/view", request.view];
       }
     })();
-    const res = await api2(path, { method, ...body !== void 0 ? { body: JSON.stringify(body) } : {} });
+    const res = await api2(
+      path,
+      body instanceof Blob ? { method, headers: { "content-type": body.type }, body } : { method, ...body !== void 0 ? { body: JSON.stringify(body) } : {} }
+    );
     const answer2 = await res.json().catch(() => null);
     if (!res.ok) throw new Error(answer2?.error ?? `HTTP ${res.status}`);
     return answer2;
@@ -2585,7 +2861,7 @@
         return api2("/attachments", {
           method: "POST",
           headers: { "content-type": op.mime, "x-ez-name": encodeURIComponent(op.name) },
-          body: op.bytes
+          body: op.file
         });
       case "discard-upload":
         return api2(`/attachments/${encodeURIComponent(op.id)}`, { method: "DELETE" });
@@ -2616,6 +2892,7 @@
         if (sure) await request({ do: "delete", canvasId: id });
       }
     });
+    if (ports.tabsLead) strip2.el.prepend(ports.tabsLead);
     ports.stageWrap.prepend(strip2.el);
     async function request(r) {
       try {
@@ -2633,8 +2910,9 @@
       const made = new BoardView(doc, {
         guests: ports.guests,
         send: async (edit) => await request(
-          edit.t === "ops" ? { do: "ops", canvasId: id, step: { opId: newOpId(), ops: edit.ops } } : { do: "duplicate", canvasId: id, input: edit.input }
+          edit.t === "ops" ? { do: "ops", canvasId: id, step: { opId: newOpId(), ops: edit.ops } } : edit.t === "duplicate" ? { do: "duplicate", canvasId: id, input: edit.input } : { do: "image-frame", canvasId: id, input: edit.input }
         ),
+        storeImage: async (image) => (await request({ do: "asset", canvasId: id, image }))?.asset ?? null,
         saveCamera: (camera) => void request({ do: "view", view: { camera: { canvasId: id, camera } } }),
         escape: ports.escape,
         chooseFrame: (frame) => ports.chooseFrame({
@@ -2663,6 +2941,7 @@
       shown = tab;
       for (const [id, b] of boards) if (id !== tab) b.hide();
       ports.stage.hidden = tab !== "app";
+      document.documentElement.classList.toggle("ez-on-board", next !== null);
       ports.onTabShown(tab);
       if (next) {
         next.show();
@@ -2677,11 +2956,24 @@
     }
     function paintStrip2() {
       if (!snapshot2?.canvas) return;
-      strip2.paint(tabsModel(snapshot2.app, snapshot2.canvas));
+      strip2.paint(tabsModel(snapshot2.appTab, snapshot2.canvas));
     }
     function activeBoard() {
       return shown && shown !== "app" ? boards.get(shown) ?? null : null;
     }
+    function focusedBoard() {
+      const board2 = activeBoard();
+      const focus = document.activeElement;
+      return board2 && (!focus || focus === document.body || board2.el.contains(focus)) ? board2 : null;
+    }
+    document.addEventListener("paste", (e) => {
+      const board2 = focusedBoard();
+      if (!board2 || e.defaultPrevented || document.querySelector("dialog[open]")) return;
+      const images = [...e.clipboardData?.files ?? []].filter((f) => f.type in IMAGE_TYPES);
+      if (!images.length) return;
+      e.preventDefault();
+      void board2.pasteImages(images);
+    });
     function pushAnnotations(s) {
       const byGuest = /* @__PURE__ */ new Map();
       s.annotations.forEach((a, i) => {
@@ -2704,7 +2996,7 @@
       render(s) {
         snapshot2 = s;
         if (!s.canvas) return;
-        const model = tabsModel(s.app, s.canvas);
+        const model = tabsModel(s.appTab, s.canvas);
         strip2.paint(model);
         for (const [id, b] of boards) {
           const summary = s.canvas.canvases.find((c) => c.id === id);
@@ -2749,15 +3041,15 @@
             if (b) ports.guests.post(guest.id, { type: "ez:viewport", ...b.viewportFor(), scoped: false });
             if (snapshot2) pushAnnotations(snapshot2);
             return false;
+          case "ez:popup":
+            if (!message.open && b) returnKeysToShell(b, guest.iframe);
+            return false;
           default:
             return false;
         }
       },
       onKeyDown(e) {
-        const board2 = activeBoard();
-        const focus = document.activeElement;
-        if (!board2 || focus && focus !== document.body && !board2.el.contains(focus)) return false;
-        return board2.onKeyDown(e);
+        return focusedBoard()?.onKeyDown(e) ?? false;
       },
       onKeyUp(e) {
         activeBoard()?.onKeyUp(e);
@@ -2791,27 +3083,6 @@
     };
   }
 
-  // src/library/policy.ts
-  var THUMBNAIL_LONG_SIDE = 400;
-  var TAG_MAX_LENGTH = 64;
-  function normalizeTag(raw) {
-    const name = raw.normalize("NFC").trim().replace(/\s+/g, " ");
-    if (name === "" || name.length > TAG_MAX_LENGTH || /[,，]/.test(name)) return null;
-    return lowercaseInitial(name);
-  }
-  function lowercaseInitial(name) {
-    const [first = "", second = ""] = name;
-    if (second !== second.toLowerCase()) return name;
-    return first.toLowerCase() + name.slice(first.length);
-  }
-  function tagKey(name) {
-    return name.normalize("NFKC").trim().replace(/\s+/g, " ").toLowerCase();
-  }
-  function thumbnailSize(width, height) {
-    const scale2 = Math.min(1, THUMBNAIL_LONG_SIDE / Math.max(width, height));
-    return { width: Math.max(1, Math.round(width * scale2)), height: Math.max(1, Math.round(height * scale2)) };
-  }
-
   // src/client/thumbnail.ts
   var THUMBNAIL_TYPE = "image/webp";
   var THUMBNAIL_QUALITY = 0.8;
@@ -2973,11 +3244,11 @@
     }
     function card(item, index) {
       const li = h2("li");
-      const button = h2("button", "ez-library-card");
-      button.type = "button";
-      button.dataset.testid = LIBRARY_TEST_IDS.card;
-      button.dataset.itemId = item.id;
-      button.setAttribute("aria-label", cardLabel(item));
+      const button2 = h2("button", "ez-library-card");
+      button2.type = "button";
+      button2.dataset.testid = LIBRARY_TEST_IDS.card;
+      button2.dataset.itemId = item.id;
+      button2.setAttribute("aria-label", cardLabel(item));
       const media = h2("span", "ez-library-card-media");
       if (item.thumbnail) {
         const img = h2("img");
@@ -2995,10 +3266,10 @@
         badge.append(h2("span", void 0, item.link ? "\u9023\u7D50" : "\u5F71\u7247"));
         media.append(badge);
       }
-      button.append(media);
-      if (captions) button.append(h2("span", "ez-library-card-caption", sourceName(item.source)));
-      decorate(button, item, index);
-      li.append(button);
+      button2.append(media);
+      if (captions) button2.append(h2("span", "ez-library-card-caption", sourceName(item.source)));
+      decorate(button2, item, index);
+      li.append(button2);
       return li;
     }
     function paintGrid() {
@@ -3181,12 +3452,12 @@
     return el2;
   }
   function iconButton(className, label, glyph, size = 16) {
-    const button = h3("button", className);
-    button.type = "button";
-    button.setAttribute("aria-label", label);
-    button.title = label;
-    button.append(icon(glyph, size));
-    return button;
+    const button2 = h3("button", className);
+    button2.type = "button";
+    button2.setAttribute("aria-label", label);
+    button2.title = label;
+    button2.append(icon(glyph, size));
+    return button2;
   }
   var dateFormat = new Intl.DateTimeFormat("zh-TW", { year: "numeric", month: "long", day: "numeric" });
   function openDetail(options) {
@@ -3302,6 +3573,11 @@
         video.playsInline = true;
         video.preload = "metadata";
         if (item.thumbnail) video.poster = item.thumbnail.url;
+        if (item.dimensions) {
+          const { width, height } = item.dimensions;
+          video.style.aspectRatio = `${width} / ${height}`;
+          video.style.width = `min(100cqw, ${width}px, calc(100cqh * ${width / height}))`;
+        }
         media = video;
       } else if (original || item.thumbnail) {
         const img = h3("img", "ez-library-detail-media");
@@ -3545,20 +3821,20 @@
   function copyField(value, label) {
     const row = h4("div", "ez-install-copy");
     const code = h4("code", void 0, value);
-    const button = h4("button", "ez-install-copy-button");
-    button.type = "button";
-    button.setAttribute("aria-label", label);
-    button.title = label;
-    button.append(icon(Copy01Icon, 14));
+    const button2 = h4("button", "ez-install-copy-button");
+    button2.type = "button";
+    button2.setAttribute("aria-label", label);
+    button2.title = label;
+    button2.append(icon(Copy01Icon, 14));
     let timer;
-    button.onclick = () => {
+    button2.onclick = () => {
       void navigator.clipboard.writeText(value).then(() => {
         clearTimeout(timer);
-        button.replaceChildren(icon(Tick02Icon, 14));
-        timer = setTimeout(() => button.replaceChildren(icon(Copy01Icon, 14)), COPIED_MS);
+        button2.replaceChildren(icon(Tick02Icon, 14));
+        timer = setTimeout(() => button2.replaceChildren(icon(Copy01Icon, 14)), COPIED_MS);
       });
     };
-    row.append(code, button);
+    row.append(code, button2);
     return row;
   }
   var PROBLEMS = {
@@ -3728,8 +4004,8 @@
     const title = h5("h1", "ez-library-title", "\u7D20\u6750\u5EAB");
     const browser = libraryBrowser(api2, {
       scroll,
-      decorate: (button, _item, index) => {
-        button.onclick = () => showDetail(index);
+      decorate: (button2, _item, index) => {
+        button2.onclick = () => showDetail(index);
       },
       blank: () => {
         const install = h5("button", "ez-library-empty-link", "\u5B89\u88DD ezdesign \u63D2\u4EF6");
@@ -3852,8 +4128,8 @@
     let painted = false;
     let open = false;
     const el2 = h6("div", "ez-account");
-    const button = h6("button", "ez-activity-btn ez-account-btn");
-    button.type = "button";
+    const button2 = h6("button", "ez-activity-btn ez-account-btn");
+    button2.type = "button";
     const menu = h6("div", "ez-menu ez-account-menu");
     menu.setAttribute("role", "menu");
     const who = h6("div", "ez-account-who");
@@ -3862,13 +4138,13 @@
     signOut.setAttribute("role", "menuitem");
     signOut.append(icon(Logout01Icon, 14), h6("span", "ez-menu-name", "\u767B\u51FA"));
     menu.append(who, signOut);
-    el2.append(button, menu);
+    el2.append(button2, menu);
     const signIn = () => window.open(`${apiBase}/account/login`, "_blank");
     function setOpen(next) {
       open = next && !!email;
       el2.toggleAttribute("data-open", open);
-      if (email) button.setAttribute("aria-expanded", String(open));
-      else button.removeAttribute("aria-expanded");
+      if (email) button2.setAttribute("aria-expanded", String(open));
+      else button2.removeAttribute("aria-expanded");
     }
     function render2(account2) {
       const nextEmail = account2?.email ?? null;
@@ -3877,22 +4153,22 @@
       offered = !!account2;
       email = nextEmail;
       el2.hidden = !offered;
-      button.textContent = "";
+      button2.textContent = "";
       if (email) {
-        button.setAttribute("aria-label", `\u5E33\u865F\uFF1A${email}`);
-        button.title = email;
-        button.setAttribute("aria-haspopup", "menu");
-        button.append(h6("span", "ez-avatar", email.charAt(0).toUpperCase()));
+        button2.setAttribute("aria-label", `\u5E33\u865F\uFF1A${email}`);
+        button2.title = email;
+        button2.setAttribute("aria-haspopup", "menu");
+        button2.append(h6("span", "ez-avatar", email.charAt(0).toUpperCase()));
         who.replaceChildren(h6("span", "ez-account-label", "\u5DF2\u767B\u5165"), h6("span", "ez-account-email", email));
       } else {
-        button.setAttribute("aria-label", "\u767B\u5165 ezdesign");
-        button.title = "\u767B\u5165 ezdesign";
-        button.removeAttribute("aria-haspopup");
-        button.append(icon(UserCircleIcon, 18));
+        button2.setAttribute("aria-label", "\u767B\u5165 ezdesign");
+        button2.title = "\u767B\u5165 ezdesign";
+        button2.removeAttribute("aria-haspopup");
+        button2.append(icon(UserCircleIcon, 18));
       }
       setOpen(false);
     }
-    button.onclick = () => {
+    button2.onclick = () => {
       if (email) setOpen(!open);
       else signIn();
     };
@@ -3906,7 +4182,7 @@
     el2.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && open) {
         setOpen(false);
-        button.focus();
+        button2.focus();
       }
     });
     render2(void 0);
@@ -4045,16 +4321,16 @@
     const browser = libraryBrowser(api2, {
       scroll,
       captions: false,
-      decorate: (button, item) => {
+      decorate: (button2, item) => {
         const check = h8("span", "ez-library-card-check");
         check.append(icon(Tick02Icon, 12));
-        button.querySelector(".ez-library-card-media").append(check);
-        button.setAttribute("aria-pressed", String(chosen.includes(item.id)));
-        button.onclick = () => {
+        button2.querySelector(".ez-library-card-media").append(check);
+        button2.setAttribute("aria-pressed", String(chosen.includes(item.id)));
+        button2.onclick = () => {
           const at2 = chosen.indexOf(item.id);
           if (at2 < 0) chosen.push(item.id);
           else chosen.splice(at2, 1);
-          button.setAttribute("aria-pressed", String(at2 < 0));
+          button2.setAttribute("aria-pressed", String(at2 < 0));
           paintCount();
         };
       },
@@ -4113,6 +4389,485 @@
     });
   }
 
+  // src/client/video-digest/runner.ts
+  var IDLE_MS = 3e4;
+  var STALL_MS = 2e4;
+  var RETRY_MS = 1e4;
+  function videoDigests(api2, workerUrl, onChange) {
+    const fractions = /* @__PURE__ */ new Map();
+    const queue = [];
+    const resting = /* @__PURE__ */ new Set();
+    let current = null;
+    let worker = null;
+    let stallTimer = 0;
+    let idleTimer = 0;
+    const spawn = () => {
+      const w = new Worker(workerUrl);
+      w.onmessage = (e) => handle(e.data);
+      w.onerror = (e) => {
+        e.preventDefault();
+        crashed("the digest worker crashed");
+      };
+      return w;
+    };
+    const next = () => {
+      if (current) return;
+      const id = queue.shift();
+      if (!id) {
+        idleTimer = window.setTimeout(() => {
+          worker?.terminate();
+          worker = null;
+        }, IDLE_MS);
+        return;
+      }
+      clearTimeout(idleTimer);
+      current = id;
+      worker ?? (worker = spawn());
+      worker.postMessage({ id, api: api2 });
+      armStall();
+    };
+    const armStall = () => {
+      clearTimeout(stallTimer);
+      stallTimer = window.setTimeout(() => crashed("the digest stopped answering"), STALL_MS);
+    };
+    const finish = (id) => {
+      clearTimeout(stallTimer);
+      fractions.delete(id);
+      current = null;
+      next();
+      onChange();
+    };
+    const handle = (event) => {
+      if (event.id !== current) return;
+      if (event.type === "progress") {
+        fractions.set(event.id, event.fraction);
+        armStall();
+        onChange();
+        return;
+      }
+      if (event.type === "error") {
+        resting.add(event.id);
+        window.setTimeout(() => resting.delete(event.id), RETRY_MS);
+      }
+      finish(event.id);
+    };
+    const crashed = (detail) => {
+      worker?.terminate();
+      worker = null;
+      const id = current;
+      if (!id) return;
+      const body = { state: "failed", reason: "crashed", detail };
+      void fetch(`${api2}/attachments/${id}/video`, {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body)
+      }).catch(() => {
+      });
+      finish(id);
+    };
+    return {
+      observe(pending) {
+        const listed = new Set(pending);
+        for (const id of pending) {
+          if (fractions.has(id) || resting.has(id)) continue;
+          fractions.set(id, 0);
+          queue.push(id);
+        }
+        for (const id of [...fractions.keys()]) {
+          if (listed.has(id) || id === current) continue;
+          fractions.delete(id);
+          const at2 = queue.indexOf(id);
+          if (at2 >= 0) queue.splice(at2, 1);
+        }
+        next();
+      },
+      progress: (id) => fractions.get(id) ?? 0
+    };
+  }
+
+  // node_modules/.pnpm/@hugeicons+core-free-icons@4.3.5/node_modules/@hugeicons/core-free-icons/dist/esm/StopIcon.js
+  var StopIcon = [
+    ["path", { d: "M4 12C4 8.72077 4 7.08116 4.81382 5.91891C5.1149 5.48891 5.48891 5.1149 5.91891 4.81382C7.08116 4 8.72077 4 12 4C15.2792 4 16.9188 4 18.0811 4.81382C18.5111 5.1149 18.8851 5.48891 19.1862 5.91891C20 7.08116 20 8.72077 20 12C20 15.2792 20 16.9188 19.1862 18.0811C18.8851 18.5111 18.5111 18.8851 18.0811 19.1862C16.9188 20 15.2792 20 12 20C8.72077 20 7.08116 20 5.91891 19.1862C5.48891 18.8851 5.1149 18.5111 4.81382 18.0811C4 16.9188 4 15.2792 4 12Z", stroke: "currentColor", strokeWidth: "1.5", key: "0" }]
+  ];
+
+  // src/desktop-wire.ts
+  var DESKTOP_BRIDGE = "ezdesignDesktop";
+
+  // src/client/host.ts
+  var bridge = window[DESKTOP_BRIDGE];
+  var host = bridge ? {
+    kind: "desktop",
+    showProject: (opened) => bridge.showProject(opened),
+    pickFolder: () => bridge.pickFolder(),
+    pathForFile: (file) => bridge.pathForFile(file),
+    toggleSidebar: () => bridge.toggleSidebar(),
+    onLayout: (listener) => bridge.onLayout(listener),
+    onUpdate: (listener) => bridge.onUpdate?.(listener),
+    takeUpdate: () => bridge.takeUpdate?.()
+  } : { kind: "browser", showProject: (opened) => location.assign(opened.shellUrl) };
+  if (bridge) {
+    const root2 = document.documentElement;
+    root2.dataset.host = "desktop";
+    root2.style.setProperty("--sidebar-width", `${bridge.sidebarWidth}px`);
+    root2.style.setProperty("--pane-inset", `${bridge.paneInset}px`);
+    root2.style.setProperty("--pane-radius", `${bridge.paneRadius}px`);
+    bridge.onLayout(({ sidebar: sidebar2 }) => {
+      root2.dataset.sidebar = sidebar2 ? "open" : "closed";
+      root2.style.setProperty("--traffic-light-room", sidebar2 ? "0px" : `${bridge.trafficLightRoom}px`);
+    });
+  }
+
+  // src/client/dev-server-panel.ts
+  var DEV_SERVER_TEST_IDS = {
+    card: "ez-devserver-card",
+    log: "ez-devserver-log"
+  };
+  var LOG_POLL_MS = 700;
+  var CARD_LOG_LINES = 200;
+  var SOURCE = {
+    detected: "\u5F9E package.json \u5075\u6E2C",
+    agent: "agent \u5EFA\u8B70\u3001\u4F60\u78BA\u8A8D\u904E\u7684\u6307\u4EE4",
+    user: "\u4F60\u8A2D\u5B9A\u7684\u6307\u4EE4"
+  };
+  function h9(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== void 0) node.textContent = text;
+    return node;
+  }
+  function button(className, label, glyph) {
+    const b = h9("button", className);
+    b.type = "button";
+    if (glyph) b.append(icon(glyph, 14));
+    b.append(h9("span", void 0, label));
+    return b;
+  }
+  function installLine(parts) {
+    const span = h9("span");
+    for (const part of parts) span.append("command" in part ? h9("code", "ez-devserver-inline", part.command) : part.text);
+    return span;
+  }
+  var agentName = (command) => agentProfileFor(command)?.name ?? "agent";
+  function crashLine(state) {
+    if (state.cause === "no-url") return "60 \u79D2\u5167\u6C92\u6709\u5370\u51FA\u7DB2\u5740\uFF0C\u4E5F\u6C92\u6709\u958B\u555F\u4EFB\u4F55 port\uFF0C\u5DF2\u505C\u6B62\u5B83\u3002";
+    if (state.cause === "spawn") return "\u6307\u4EE4\u6C92\u8FA6\u6CD5\u57F7\u884C\u3002";
+    if (state.signal) return `Dev server \u88AB ${state.signal} \u7D50\u675F\u4E86\u3002`;
+    return state.exitCode !== void 0 ? `Dev server \u7D50\u675F\u4E86\uFF08exit code ${state.exitCode}\uFF09\u3002` : "Dev server \u7D50\u675F\u4E86\u3002";
+  }
+  function installDevServerPanel(api2) {
+    const card = h9("section", "ez-devserver-card");
+    card.dataset.testid = DEV_SERVER_TEST_IDS.card;
+    card.setAttribute("aria-live", "polite");
+    card.hidden = true;
+    let state = null;
+    let drawnFor = "";
+    let editing2 = false;
+    let error = null;
+    let busy = false;
+    const log = new LogFeed(api2);
+    async function post(path, body = {}, method = "POST") {
+      busy = true;
+      error = null;
+      repaint();
+      try {
+        const res = await fetch(`${api2}/dev-server/${path}`, {
+          method,
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ ...body, host: host.kind })
+        });
+        if (!res.ok) error = (await res.json().catch(() => null))?.error ?? `${res.status}`;
+        return res.ok;
+      } catch {
+        error = "\u9023\u4E0D\u4E0A ezdesign daemon";
+        return false;
+      } finally {
+        busy = false;
+        repaint();
+      }
+    }
+    function repaint() {
+      drawnFor = "";
+      if (state) paint(state, lastPage);
+    }
+    function commandBlock(command) {
+      const block = h9("div", "ez-devserver-command");
+      const line = h9("code", "ez-devserver-line", command.line);
+      block.append(line);
+      const where = command.cwd ? `${SOURCE[command.source]} \xB7 \u5728 ${command.cwd}/ \u57F7\u884C` : SOURCE[command.source];
+      block.append(h9("span", "ez-devserver-source", where));
+      return block;
+    }
+    function commandForm(initial, cancellable, proposalId) {
+      const form = h9("form", "ez-devserver-form");
+      const lineLabel = h9("label", "ez-devserver-label", "\u555F\u52D5\u6307\u4EE4");
+      const lineInput = h9("input", "ez-devserver-input");
+      lineInput.name = "line";
+      lineInput.placeholder = "pnpm --filter web dev";
+      lineInput.value = initial?.line ?? "";
+      lineInput.spellcheck = false;
+      lineInput.autocomplete = "off";
+      lineLabel.append(lineInput);
+      const cwdLabel = h9("label", "ez-devserver-label", "\u5728\u54EA\u500B\u8CC7\u6599\u593E\u57F7\u884C\uFF08\u76F8\u5C0D\u65BC\u5C08\u6848\uFF0C\u9078\u586B\uFF09");
+      const cwdInput = h9("input", "ez-devserver-input");
+      cwdInput.name = "cwd";
+      cwdInput.placeholder = ".";
+      cwdInput.value = initial?.cwd ?? "";
+      cwdInput.spellcheck = false;
+      cwdInput.autocomplete = "off";
+      cwdLabel.append(cwdInput);
+      const actions = h9("div", "ez-devserver-actions");
+      const go = button("ez-devserver-go", "\u5132\u5B58\u4E26\u555F\u52D5", PlayIcon);
+      go.type = "submit";
+      go.disabled = busy;
+      actions.append(go);
+      if (cancellable) {
+        const cancel = button("ez-devserver-secondary", "\u53D6\u6D88");
+        cancel.onclick = () => {
+          editing2 = false;
+          error = null;
+          repaint();
+        };
+        actions.append(cancel);
+      }
+      if (!proposalId && (initial?.source === "user" || initial?.source === "agent")) {
+        const reset = button("ez-devserver-secondary", "\u6539\u56DE\u81EA\u52D5\u5075\u6E2C");
+        reset.onclick = () => {
+          editing2 = false;
+          void post("command", {}, "DELETE");
+        };
+        actions.append(reset);
+      }
+      form.append(lineLabel, cwdLabel, actions);
+      form.onsubmit = (e) => {
+        e.preventDefault();
+        void post("command", { line: lineInput.value, cwd: cwdInput.value, ...proposalId ? { proposalId } : {} }).then((ok) => {
+          if (ok) editing2 = false;
+          repaint();
+        });
+      };
+      queueMicrotask(() => lineInput.focus({ preventScroll: true }));
+      return form;
+    }
+    function proposalBlock(offer) {
+      const block = commandBlock({ line: offer.line, cwd: offer.cwd, source: "agent" });
+      block.querySelector(".ez-devserver-source").textContent = `${agentName(offer.agent)} \u7684\u5EFA\u8B70${offer.cwd ? ` \xB7 \u5728 ${offer.cwd}/ \u57F7\u884C` : ""}`;
+      if (offer.reason) block.append(h9("span", "ez-devserver-reason", offer.reason));
+      return block;
+    }
+    function proposalNote(offer) {
+      const name = agentName(offer.agent);
+      switch (offer.state) {
+        case "asking":
+          return h9("p", "ez-devserver-asking", "agent \u5075\u6E2C\u4E2D\u2026");
+        case "none-found":
+          return h9("p", "ez-devserver-hint", `${name} \u770B\u904E\u4E86\uFF0C\u6C92\u627E\u5230\u53EF\u4EE5\u555F\u52D5\u7684\u7DB2\u9801${offer.reason ? `\uFF1A${offer.reason}` : "\u3002"}`);
+        case "failed":
+          return h9("p", "ez-devserver-error", `\u6C92\u8FA6\u6CD5\u53D6\u5F97 ${name} \u7684\u5EFA\u8B70\uFF1A${offer.error}`);
+        case "proposed":
+          return h9("p", "ez-devserver-hint", `${name} \u5EFA\u8B70\u7684\u6307\u4EE4\uFF0C\u53EF\u4EE5\u5148\u4FEE\u6539\u518D\u57F7\u884C\u3002`);
+      }
+    }
+    function logBlock(lines) {
+      const pre = h9("pre", "ez-devserver-log");
+      pre.dataset.testid = DEV_SERVER_TEST_IDS.log;
+      pre.tabIndex = 0;
+      log.into(pre, lines);
+      return pre;
+    }
+    function paintCard(s) {
+      const title = h9("h2", "ez-devserver-title");
+      const body = [];
+      const actions = h9("div", "ez-devserver-actions");
+      const start = (label) => {
+        const b = button("ez-devserver-go", label, PlayIcon);
+        b.disabled = busy;
+        b.onclick = () => void post(s.phase === "crashed" ? "restart" : "start");
+        actions.append(b);
+      };
+      const edit = (label = "\u6539\u7528\u5176\u4ED6\u6307\u4EE4") => {
+        const b = button("ez-devserver-secondary", label);
+        b.onclick = () => {
+          editing2 = true;
+          repaint();
+        };
+        actions.append(b);
+      };
+      const command = "command" in s ? s.command : void 0;
+      if (editing2 && s.phase !== "starting" && s.phase !== "needs-command") {
+        title.textContent = "dev server \u7684\u555F\u52D5\u6307\u4EE4";
+        body.push(commandForm(command, true));
+      } else {
+        switch (s.phase) {
+          case "idle":
+          case "stopped":
+            title.textContent = s.phase === "idle" ? "\u555F\u52D5 dev server" : "Dev server \u5DF2\u505C\u6B62";
+            if (command) {
+              body.push(commandBlock(command));
+              start("\u555F\u52D5");
+              edit();
+            } else {
+              title.textContent = "\u6B63\u5728\u5075\u6E2C\u555F\u52D5\u6307\u4EE4";
+              body.push(h9("p", "ez-devserver-asking", "agent \u5075\u6E2C\u4E2D\u2026"));
+            }
+            break;
+          case "starting": {
+            title.textContent = "\u6B63\u5728\u555F\u52D5 dev server";
+            if (command) body.push(commandBlock(command));
+            body.push(logBlock(CARD_LOG_LINES));
+            const stop = button("ez-devserver-secondary", "\u505C\u6B62", StopIcon);
+            stop.disabled = busy;
+            stop.onclick = () => void post("stop");
+            actions.append(stop);
+            break;
+          }
+          case "needs-command": {
+            const offer = s.proposal;
+            if (offer?.state === "asking" && !editing2) {
+              title.textContent = "\u6B63\u5728\u5075\u6E2C\u555F\u52D5\u6307\u4EE4";
+              body.push(proposalNote(offer));
+              break;
+            }
+            title.textContent = "\u9700\u8981\u4E00\u500B\u555F\u52D5\u6307\u4EE4";
+            if (offer?.state === "proposed" && !editing2) {
+              title.textContent = "\u555F\u52D5 dev server";
+              body.push(proposalBlock(offer));
+              const run = button("ez-devserver-go", "\u57F7\u884C", PlayIcon);
+              run.disabled = busy;
+              run.onclick = () => void post("command", { line: offer.line, cwd: offer.cwd, proposalId: offer.id });
+              const change = button("ez-devserver-secondary", "\u4FEE\u6539");
+              change.onclick = () => {
+                editing2 = true;
+                repaint();
+              };
+              actions.append(run, change);
+              break;
+            }
+            if (offer) body.push(proposalNote(offer));
+            if (s.serverScripts.length) body.push(h9("p", "ez-devserver-hint", `\u770B\u8D77\u4F86\u50CF dev server \u7684 script\uFF1A${s.serverScripts.join("\u3001")}`));
+            body.push(
+              offer?.state === "proposed" ? commandForm({ line: offer.line, cwd: offer.cwd, source: "agent" }, true, offer.id) : commandForm(void 0, false)
+            );
+            if (offer?.state === "failed" || offer?.state === "none-found") {
+              const again = button("ez-devserver-secondary", "\u518D\u554F\u4E00\u6B21");
+              again.onclick = () => void post("propose");
+              actions.append(again);
+            }
+            break;
+          }
+          case "blocked": {
+            title.textContent = "\u7F3A\u5C11\u555F\u52D5\u9700\u8981\u7684\u5DE5\u5177";
+            body.push(commandBlock(s.command));
+            const list = h9("ul", "ez-devserver-missing");
+            for (const m of s.missing) {
+              const item = h9("li");
+              item.append(h9("code", "ez-devserver-tool", m.tool), installLine(m.install));
+              list.append(item);
+            }
+            body.push(list, h9("p", "ez-devserver-hint", "\u88DD\u597D\u4E4B\u5F8C\u6309\u300C\u518D\u8A66\u4E00\u6B21\u300D\u3002"));
+            start("\u518D\u8A66\u4E00\u6B21");
+            edit();
+            break;
+          }
+          case "crashed":
+            title.textContent = "Dev server \u505C\u6B62\u904B\u4F5C\u4E86";
+            body.push(h9("p", "ez-devserver-text", crashLine(s)), commandBlock(s.command));
+            if (s.tail.length) {
+              const pre = h9("pre", "ez-devserver-log", s.tail.join("\n"));
+              pre.dataset.testid = DEV_SERVER_TEST_IDS.log;
+              pre.tabIndex = 0;
+              body.push(pre);
+              queueMicrotask(() => pre.scrollTop = pre.scrollHeight);
+            }
+            start("\u91CD\u65B0\u555F\u52D5");
+            edit();
+            break;
+          case "running":
+          case "external":
+            title.textContent = "\u6B63\u5728\u9023\u4E0A dev server";
+            break;
+        }
+      }
+      card.replaceChildren(title, ...body);
+      if (actions.childElementCount) card.append(actions);
+      if (error) card.append(h9("p", "ez-devserver-error", error));
+    }
+    let lastPage = { shown: false, onAppTab: false };
+    let detecting = false;
+    function paint(s, page) {
+      const showCard = page.onAppTab && !page.shown;
+      if (showCard && s.phase === "idle" && !s.command && !detecting) {
+        detecting = true;
+        void post("start");
+      }
+      card.hidden = !showCard;
+      log.feedCard(showCard && s.phase === "starting");
+      const key = JSON.stringify([s, showCard, editing2, busy, error]);
+      if (key === drawnFor) return;
+      drawnFor = key;
+      if (showCard) paintCard(s);
+    }
+    return {
+      card,
+      update(next, page) {
+        if (next.phase === "starting" && state?.phase !== "starting") log.reset();
+        state = next;
+        lastPage = page;
+        paint(next, page);
+      }
+    };
+  }
+  var LogFeed = class {
+    constructor(api2) {
+      this.api = api2;
+      __publicField(this, "timer", null);
+      __publicField(this, "views", /* @__PURE__ */ new Set());
+      __publicField(this, "last", { lines: [], dropped: 0 });
+      __publicField(this, "wanted", false);
+    }
+    into(pre, lines) {
+      const view = { pre, lines };
+      this.views.add(view);
+      this.draw(view);
+      this.schedule();
+      void this.fetch();
+    }
+    reset() {
+      this.last = { lines: [], dropped: 0 };
+    }
+    feedCard(on) {
+      this.wanted = on;
+      for (const view of [...this.views]) if (!view.pre.isConnected) this.views.delete(view);
+      this.schedule();
+    }
+    schedule() {
+      const needed = this.wanted;
+      if (needed && this.timer === null) {
+        this.timer = window.setInterval(() => void this.fetch(), LOG_POLL_MS);
+      } else if (!needed && this.timer !== null) {
+        window.clearInterval(this.timer);
+        this.timer = null;
+      }
+    }
+    async fetch() {
+      try {
+        const res = await fetch(`${this.api}/dev-server/log`);
+        if (!res.ok) return;
+        this.last = await res.json();
+      } catch {
+        return;
+      }
+      for (const view of this.views) this.draw(view);
+    }
+    draw(view) {
+      const { pre } = view;
+      const pinned = pre.scrollHeight - pre.scrollTop - pre.clientHeight < 24;
+      const text = this.last.lines.slice(-view.lines).join("\n");
+      if (pre.textContent === text) return;
+      pre.textContent = text;
+      if (pinned) pre.scrollTop = pre.scrollHeight;
+    }
+  };
+
   // src/canvas/wire.ts
   var SSE_CANVAS = "canvas";
   var SSE_CANVAS_REMOVED = "canvas-removed";
@@ -4139,7 +4894,7 @@
   // src/client/page-storage.ts
   var SHELL_OWNED_PREFIXES = ["ezdesign:", "ez-update-dismissed", "ez-confirm-skip:"];
   var MAX_RECORDS_PER_STORE = 1e3;
-  var MAX_BYTES2 = 15e5;
+  var MAX_BYTES = 15e5;
   var COLLECT_TIMEOUT_MS = 1500;
   function storageEntries(store) {
     const out = [];
@@ -4233,7 +4988,7 @@
     const timedOut = new Promise((ok) => setTimeout(() => ok([]), COLLECT_TIMEOUT_MS));
     const indexedDB = await Promise.race([readIndexedDb(factory).catch(() => []), timedOut]);
     const storage = { localStorage: local, sessionStorage: session, indexedDB };
-    return JSON.stringify(storage).length > MAX_BYTES2 ? { ...storage, indexedDB: [] } : storage;
+    return JSON.stringify(storage).length > MAX_BYTES ? { ...storage, indexedDB: [] } : storage;
   }
 
   // src/client/usage-note.ts
@@ -4381,9 +5136,9 @@
     const heights = rows.map((row) => m.head + Math.max(...row.map((d) => d.height)));
     const tops = [];
     let y = 0;
-    for (const h10 of heights) {
+    for (const h11 of heights) {
       tops.push(y);
-      y += h10 + m.rowGap;
+      y += h11 + m.rowGap;
     }
     return {
       tops,
@@ -5093,6 +5848,7 @@
   var API = `${PREFIX}/api`;
   var BUILD = document.currentScript?.dataset.version ?? "";
   var shellAttachments = directAttachments(API);
+  var digests = videoDigests(API, `${PREFIX}/video-digest.js?v=${BUILD}`, () => paintVideos());
   var MOD_LABEL = modLabel(navigator.userAgent);
   var PAGE_PATH = new URLSearchParams(location.search).get("path") || "/";
   var ANNOTATE_MODES = [
@@ -5117,7 +5873,7 @@
   var TICK_ICON = 14;
   var snapshot = null;
   var canvasUi = null;
-  var stagedApp = void 0;
+  var stagedApp = document.currentScript?.dataset.app || null;
   var annotateMode = "off";
   var daemonGone = false;
   var goneTimer;
@@ -5158,26 +5914,26 @@
   }
   loadView();
   var root = document.getElementById("ez-shell");
-  function h9(tag, className, text) {
+  function h10(tag, className, text) {
     const node = document.createElement(tag);
     if (className) node.className = className;
     if (text !== void 0) node.textContent = text;
     return node;
   }
-  var brand = h9("div", "ez-logo");
+  var brand = h10("div", "ez-logo");
   brand.setAttribute("role", "img");
   brand.setAttribute("aria-label", "ezdesign");
   brand.innerHTML = brandLockupSvg();
-  var version = h9("span", "ez-version");
-  var updatePill = h9("button", "ez-update-flag");
+  var version = h10("span", "ez-version");
+  var updatePill = h10("button", "ez-update-flag");
   updatePill.setAttribute("aria-haspopup", "menu");
   updatePill.setAttribute("aria-expanded", "false");
-  var updateMenu = h9("div", "ez-menu");
+  var updateMenu = h10("div", "ez-menu");
   updateMenu.setAttribute("role", "menu");
-  var updateNow = h9("button", "ez-menu-item");
+  var updateNow = h10("button", "ez-menu-item");
   updateNow.setAttribute("role", "menuitem");
   updateMenu.append(updateNow);
-  var updateHint = h9("div", "ez-update-hint");
+  var updateHint = h10("div", "ez-update-hint");
   updateHint.hidden = true;
   updateHint.append(updatePill, updateMenu);
   var updateMenuOpen = false;
@@ -5200,15 +5956,15 @@
       paintUpdateMenu();
     }
   });
-  var target = h9("span", "ez-target");
-  var agentStatus = h9("div", "ez-badge");
-  var agentPill = h9("button", "ez-agent-pill");
+  var target = h10("span", "ez-target");
+  var agentStatus = h10("div", "ez-badge");
+  var agentPill = h10("button", "ez-agent-pill");
   agentPill.setAttribute("aria-haspopup", "menu");
   agentPill.setAttribute("aria-expanded", "false");
-  var agentMenu = h9("div", "ez-menu ez-menu-up");
+  var agentMenu = h10("div", "ez-menu ez-menu-up");
   agentMenu.setAttribute("role", "menu");
   agentMenu.setAttribute("aria-label", "Agent");
-  var agentWrap = h9("div", "ez-agent");
+  var agentWrap = h10("div", "ez-agent");
   agentWrap.hidden = true;
   agentWrap.append(agentPill, agentMenu);
   var plain = (key) => (e) => !e.metaKey && !e.ctrlKey && e.key.toLowerCase() === key.toLowerCase();
@@ -5307,7 +6063,7 @@
     }
     return false;
   }
-  var keysBtn = h9("button", "ez-keys");
+  var keysBtn = h10("button", "ez-keys");
   keysBtn.append(icon(KeyboardIcon, 14));
   keysBtn.title = "\u5FEB\u6377\u9375";
   keysBtn.setAttribute("aria-label", "\u5FEB\u6377\u9375");
@@ -5326,13 +6082,13 @@
     paintKeys();
   }
   keysBtn.onclick = () => pinKeys(!keysPinned);
-  var keysPanel = h9("div", "ez-keys-panel");
+  var keysPanel = h10("div", "ez-keys-panel");
   for (const s of SHORTCUTS) {
-    const row = h9("div", "ez-keys-row");
-    row.append(h9("kbd", "ez-kbd", s.keys), h9("span", "ez-keys-label", s.label));
+    const row = h10("div", "ez-keys-row");
+    row.append(h10("kbd", "ez-kbd", s.keys), h10("span", "ez-keys-label", s.label));
     keysPanel.appendChild(row);
   }
-  var keysWrap = h9("div", "ez-keys-wrap");
+  var keysWrap = h10("div", "ez-keys-wrap");
   keysWrap.append(keysBtn, keysPanel);
   keysWrap.addEventListener("pointerenter", () => {
     window.clearTimeout(keysCloseTimer);
@@ -5349,23 +6105,23 @@
   document.addEventListener("click", (e) => {
     if (keysPinned && e.target instanceof Node && !keysWrap.contains(e.target)) pinKeys(false);
   });
-  var headRow = h9("div", "ez-head-row");
-  headRow.append(brand, version, updateHint, h9("div", "ez-spacer"), keysWrap, agentStatus);
-  var deviceName = h9("button", "ez-seg-label");
+  var headRow = h10("div", "ez-head-row");
+  headRow.append(brand, version, updateHint, h10("div", "ez-spacer"), keysWrap, agentStatus);
+  var deviceName = h10("button", "ez-seg-label");
   deviceName.onclick = () => setDevice(deviceId);
-  var deviceCaret = h9("button", "ez-seg-caret");
+  var deviceCaret = h10("button", "ez-seg-caret");
   deviceCaret.append(icon(ChevronDownIcon, 12));
   deviceCaret.setAttribute("aria-haspopup", "menu");
   deviceCaret.setAttribute("aria-expanded", "false");
-  var deviceMenu = h9("div", "ez-menu");
+  var deviceMenu = h10("div", "ez-menu");
   deviceMenu.setAttribute("role", "menu");
   deviceMenu.setAttribute("aria-label", "\u9810\u89BD\u5C3A\u5BF8");
   var deviceItems = DEVICES.map((d) => {
-    const item = h9("button", "ez-menu-item");
+    const item = h10("button", "ez-menu-item");
     item.setAttribute("role", "menuitemradio");
     item.dataset.device = d.id;
     item.title = deviceLabel(d);
-    item.append(h9("span", "ez-menu-name", d.name), menuCheck());
+    item.append(h10("span", "ez-menu-name", d.name), menuCheck());
     item.onclick = () => {
       closeDeviceMenu();
       setDevice(d.id);
@@ -5373,7 +6129,7 @@
     deviceMenu.appendChild(item);
     return item;
   });
-  var deviceGroup = h9("div", "ez-seg-item ez-seg-device");
+  var deviceGroup = h10("div", "ez-seg-item ez-seg-device");
   deviceGroup.append(deviceName, deviceCaret, deviceMenu);
   var deviceMenuOpen = false;
   function paintDeviceMenu() {
@@ -5417,11 +6173,12 @@
     if (to instanceof Node && deviceGroup.contains(to)) return;
     closeDeviceMenu();
   });
-  var multiBtn = h9("button", "ez-seg-item ez-seg-multi", "\u5168\u90E8\u5C3A\u5BF8");
+  var multiBtn = h10("button", "ez-seg-item ez-seg-multi", "\u5168\u90E8\u5C3A\u5BF8");
   multiBtn.title = "\u6240\u6709\u5C3A\u5BF8\u6392\u6210\u4E00\u5F35\u756B\u5E03\uFF0C\u62D6\u66F3\u80CC\u666F\u79FB\u52D5\uFF084\uFF09";
   multiBtn.onclick = () => setMulti(!multi);
-  var deviceRow = h9("div", "ez-seg");
+  var deviceRow = h10("div", "ez-seg");
   deviceRow.append(deviceGroup, multiBtn);
+  deviceRow.hidden = stagedApp === null;
   function paintControls() {
     const device = deviceById(deviceId);
     deviceName.textContent = device.name;
@@ -5437,10 +6194,10 @@
     multiBtn.setAttribute("aria-pressed", String(multi));
     paintShown();
   }
-  var annotateGroup = h9("div", "ez-annotate-group");
+  var annotateGroup = h10("div", "ez-annotate-group");
   var annotateBtns = ANNOTATE_MODES.map((m) => {
-    const btn = h9("button", `ez-tool-btn ez-mode-${m.id}`);
-    btn.append(icon(m.svg, 15), h9("span", void 0, m.label));
+    const btn = h10("button", `ez-tool-btn ez-mode-${m.id}`);
+    btn.append(icon(m.svg, 15), h10("span", void 0, m.label));
     btn.title = `${m.hint}\uFF08${m.key}\uFF09\u30FBEsc \u96E2\u958B`;
     btn.onclick = () => sendMode(annotateMode === m.id ? "off" : m.id);
     annotateGroup.appendChild(btn);
@@ -5454,12 +6211,13 @@
     }
     canvasUi?.setAnnotating(annotateMode);
   }
-  var sideHead = h9("div", "ez-side-head");
+  var devServerPanel = installDevServerPanel(API);
+  var sideHead = h10("div", "ez-side-head");
   sideHead.append(headRow, target, deviceRow, annotateGroup);
-  var statusPill = h9("div", "ez-status");
+  var statusPill = h10("div", "ez-status");
   statusPill.setAttribute("role", "status");
   statusPill.hidden = true;
-  var updateCard = h9("section", "ez-update");
+  var updateCard = h10("section", "ez-update");
   updateCard.hidden = true;
   var UPDATE_DISMISSED_KEY = "ez-update-dismissed";
   function updateOfferKey(u) {
@@ -5525,10 +6283,10 @@
     updateCard.hidden = !u || !!dismissed;
     updateCard.textContent = "";
     if (!u || dismissed) return;
-    updateCard.append(h9("div", "ez-update-title", updateTitle(u)));
+    updateCard.append(h10("div", "ez-update-title", updateTitle(u)));
     const busy = u.phase !== "available" && u.phase !== "failed";
-    const lines = h9("ul", "ez-update-lines");
-    const line = (text, cls = "") => lines.append(h9("li", cls || void 0, text));
+    const lines = h10("ul", "ez-update-lines");
+    const line = (text, cls = "") => lines.append(h10("li", cls || void 0, text));
     const working = s.acp?.state === "working";
     if (busy) {
       if (u.phase === "installing") line("\u4E0B\u8F09\u4E26\u5B89\u88DD\u65B0\u7248\u672C\u2026");
@@ -5539,10 +6297,10 @@
     }
     if (lines.childElementCount) updateCard.append(lines);
     if (!busy) {
-      const actions = h9("div", "ez-update-actions");
-      const go = h9("button", "ez-update-go");
+      const actions = h10("div", "ez-update-actions");
+      const go = h10("button", "ez-update-go");
       go.append(
-        h9(
+        h10(
           "span",
           "ez-update-label",
           u.phase === "failed" ? "\u91CD\u8A66" : working ? "\u4ECD\u8981\u66F4\u65B0" : "\u7ACB\u5373\u66F4\u65B0"
@@ -5552,7 +6310,7 @@
       go.onclick = () => void startUpdate();
       actions.append(go);
       updateCard.append(actions);
-      const dismiss = h9("button", "ez-update-x");
+      const dismiss = h10("button", "ez-update-x");
       dismiss.append(icon(Cancel01Icon, 13));
       dismiss.title = "\u7A0D\u5F8C\u518D\u8AAA\uFF08\u7248\u865F\u65C1\u7684\u63D0\u793A\u6703\u7559\u8457\uFF09";
       dismiss.setAttribute("aria-label", dismiss.title);
@@ -5560,16 +6318,16 @@
       updateCard.append(dismiss);
     }
   }
-  var stageWrap = h9("div", "ez-stage-wrap");
-  var stage = h9("div", "ez-stage");
-  var grid = h9("div", "ez-grid");
-  stage.append(grid);
-  var strip = h9("div", "ez-strip");
+  var stageWrap = h10("div", "ez-stage-wrap");
+  var stage = h10("div", "ez-stage");
+  var grid = h10("div", "ez-grid");
+  stage.append(devServerPanel.card, grid);
+  var strip = h10("div", "ez-strip");
   strip.hidden = true;
   function stripNotice(text) {
     strip.hidden = false;
-    const pill = h9("div", "ez-strip-pill");
-    pill.append(icon(MagicWand01Icon, 14), h9("div", "ez-strip-pending", text));
+    const pill = h10("div", "ez-strip-pill");
+    pill.append(icon(MagicWand01Icon, 14), h10("div", "ez-strip-pending", text));
     strip.replaceChildren(pill);
     setTimeout(() => {
       if (!liveExplores().length) strip.hidden = true;
@@ -5701,18 +6459,18 @@
       return;
     }
     closeStripAsk();
-    const card = h9("div", "ez-strip-ask");
+    const card = h10("div", "ez-strip-ask");
     card.setAttribute("role", "dialog");
     card.setAttribute("aria-label", offer.go);
-    const skip = h9("input");
+    const skip = h10("input");
     skip.type = "checkbox";
-    const skipLabel = h9("label", "ez-strip-ask-skip");
-    skipLabel.append(skip, h9("span", void 0, "\u4E0D\u8981\u518D\u63D0\u793A"));
-    const go = h9("button", "ez-strip-ask-go", offer.go);
-    const no = h9("button", "ez-strip-ask-no", "\u53D6\u6D88");
-    const row = h9("div", "ez-strip-ask-actions");
+    const skipLabel = h10("label", "ez-strip-ask-skip");
+    skipLabel.append(skip, h10("span", void 0, "\u4E0D\u8981\u518D\u63D0\u793A"));
+    const go = h10("button", "ez-strip-ask-go", offer.go);
+    const no = h10("button", "ez-strip-ask-no", "\u53D6\u6D88");
+    const row = h10("div", "ez-strip-ask-actions");
     row.append(go, no);
-    card.append(h9("div", void 0, offer.body), row, skipLabel);
+    card.append(h10("div", void 0, offer.body), row, skipLabel);
     const outside = (e) => {
       if (e.target instanceof Node && !card.contains(e.target)) done3(false);
     };
@@ -5760,17 +6518,17 @@
     });
   }
   function roundPill(round2) {
-    const pill = h9("div", "ez-strip-pill");
+    const pill = h10("div", "ez-strip-pill");
     pill.dataset.round = round2.id;
     pill.title = round2.direction ? `${round2.label}\uFF1A${round2.direction}` : round2.label;
     pill.setAttribute("role", "group");
     pill.setAttribute("aria-label", `\u63A2\u7D22 ${round2.label}`);
     pill.append(icon(MagicWand01Icon, 14));
-    const chips = h9("div", "ez-strip-chips");
+    const chips = h10("div", "ez-strip-chips");
     chips.setAttribute("role", "radiogroup");
     chips.setAttribute("aria-label", "\u8B8A\u9AD4");
     const chip = (choice, name, title) => {
-      const btn = h9("button", "ez-strip-chip", name);
+      const btn = h10("button", "ez-strip-chip", name);
       btn.setAttribute("role", "radio");
       btn.dataset.choice = choice ?? "";
       btn.title = title;
@@ -5788,12 +6546,12 @@
     radioKeys(chips, radios, (btn) => select(round2, btn.dataset.choice || null));
     chips.append(...radios);
     if (round2.status === "generating") {
-      chips.append(h9("div", "ez-strip-pending", round2.variants.length ? "\u9084\u5728\u60F3\u2026" : "\u6B63\u5728\u7522\u751F\u2026"));
+      chips.append(h10("div", "ez-strip-pending", round2.variants.length ? "\u9084\u5728\u60F3\u2026" : "\u6B63\u5728\u7522\u751F\u2026"));
     }
     pill.append(chips);
-    const actions = h9("div", "ez-strip-actions");
+    const actions = h10("div", "ez-strip-actions");
     const chosen = round2.variants.find((v) => v.id === round2.selected);
-    const adopt = h9("button", "ez-strip-action", "\u9078\u64C7");
+    const adopt = h10("button", "ez-strip-action", "\u9078\u64C7");
     adopt.disabled = !chosen;
     adopt.title = chosen ? `\u5E36\u300C${chosen.name}\u300D\u56DE\u4E3B\u5C0D\u8A71\uFF0C\u4EA4\u7D66 agent \u5BE6\u4F5C\u9032\u5C08\u6848` : "\u5148\u6311\u4E00\u500B\u8B8A\u9AD4\uFF0C\u624D\u6709\u6771\u897F\u53EF\u4EE5\u5E36\u56DE\u53BB";
     adopt.onclick = () => askOnStrip(
@@ -5806,7 +6564,7 @@
       () => void adoptVariant(round2, chosen)
     );
     actions.append(adopt);
-    const quit = h9("button", "ez-strip-action", "\u9000\u51FA\u63A2\u7D22");
+    const quit = h10("button", "ez-strip-action", "\u9000\u51FA\u63A2\u7D22");
     quit.title = "\u7D50\u675F\u9019\u4E00\u8F2A\u63A2\u7D22\uFF0C\u56DE\u5230\u4E3B\u5C0D\u8A71";
     quit.onclick = () => askOnStrip(
       actions,
@@ -5821,36 +6579,36 @@
     pill.append(actions);
     return pill;
   }
-  var shownBtn = h9("button", "ez-shown-btn");
+  var shownBtn = h10("button", "ez-shown-btn");
   shownBtn.append(icon(Grid02Icon, 14));
   shownBtn.title = "\u9078\u64C7\u756B\u5E03\u4E0A\u8981\u986F\u793A\u7684\u5C3A\u5BF8";
   shownBtn.setAttribute("aria-label", "\u9078\u64C7\u756B\u5E03\u4E0A\u8981\u986F\u793A\u7684\u5C3A\u5BF8");
   shownBtn.setAttribute("aria-haspopup", "menu");
   shownBtn.setAttribute("aria-expanded", "false");
-  var shownMenu = h9("div", "ez-menu ez-menu-right");
+  var shownMenu = h10("div", "ez-menu ez-menu-right");
   shownMenu.setAttribute("role", "menu");
   shownMenu.setAttribute("aria-label", "\u756B\u5E03\u4E0A\u7684\u5C3A\u5BF8");
   var shownItems = GRID_DEVICES.map((d) => {
-    const item = h9("button", "ez-menu-item");
+    const item = h10("button", "ez-menu-item");
     item.setAttribute("role", "menuitemcheckbox");
     item.dataset.device = d.id;
     item.title = deviceLabel(d);
-    const tick = h9("span", "ez-menu-tick");
+    const tick = h10("span", "ez-menu-tick");
     tick.append(icon(CheckIcon, 14));
-    item.append(tick, h9("span", "ez-menu-name", d.name));
+    item.append(tick, h10("span", "ez-menu-name", d.name));
     item.onclick = () => toggleShown(d.id);
     shownMenu.appendChild(item);
     return item;
   });
-  var shownWrap = h9("div", "ez-shown");
+  var shownWrap = h10("div", "ez-shown");
   shownWrap.append(shownBtn, shownMenu);
-  var pickPill = h9("div", "ez-pick-pill");
+  var pickPill = h10("div", "ez-pick-pill");
   pickPill.hidden = true;
-  var pickPillText = h9("span", "ez-pick-pill-text");
-  var pickPillCancel = h9("button", "ez-pick-pill-cancel", "\u53D6\u6D88");
+  var pickPillText = h10("span", "ez-pick-pill-text");
+  var pickPillCancel = h10("button", "ez-pick-pill-cancel", "\u53D6\u6D88");
   pickPillCancel.onclick = () => abortPick("escape");
   pickPill.append(icon(AlignSelectionIcon, 14), pickPillText, pickPillCancel);
-  var stageDock = h9("div", "ez-stage-dock");
+  var stageDock = h10("div", "ez-stage-dock");
   stageDock.append(strip, pickPill);
   stageWrap.append(stage, shownWrap, stageDock, installAnnouncement(API, ANNOUNCEMENTS));
   var shownMenuOpen = false;
@@ -5965,7 +6723,7 @@
       return;
     }
     if (stagedApp === null) {
-      target.textContent = "\u6C92\u6709 app";
+      target.textContent = "";
       document.title = "ezdesign";
       return;
     }
@@ -5974,12 +6732,12 @@
     document.title = `ezdesign \xB7 ${nav.url}`;
   }
   function mountFrame(id, device, into) {
-    const card = h9("div", "ez-card");
-    const head = h9("div", "ez-card-head");
+    const card = h10("div", "ez-card");
+    const head = h10("div", "ez-card-head");
     head.title = "\u62D6\u66F3\u8ABF\u6574\u6392\u5217";
-    const box = h9("div", "ez-screen");
-    const wrap = h9("div", "ez-frame-wrap");
-    const iframe = h9("iframe", "ez-frame");
+    const box = h10("div", "ez-screen");
+    const wrap = h10("div", "ez-frame-wrap");
+    const iframe = h10("iframe", "ez-frame");
     iframe.src = nav.url;
     wrap.appendChild(iframe);
     box.appendChild(wrap);
@@ -6095,10 +6853,8 @@
   }
   function stageApp(app) {
     if (app === stagedApp) return;
-    const presumed = stagedApp === void 0;
     stagedApp = app;
     deviceRow.hidden = app === null || !!canvasUi && canvasUi.activeTab !== "app";
-    if (presumed && app !== null) return;
     rebuildStage();
   }
   function rebuildStage() {
@@ -6127,33 +6883,24 @@
   paintAnnotateMode();
   paintStageClasses();
   rebuildStage();
-  var sidebar = h9("aside", "ez-sidebar");
-  var queueSection = h9("section", "ez-section ez-queue-section");
-  var queueList = h9("ul", "ez-queue");
-  var queueScroll = h9("div", "ez-fade ez-queue-scroll");
+  var sidebar = h10("aside", "ez-sidebar");
+  var queueSection = h10("section", "ez-section ez-queue-section");
+  var queueList = h10("ul", "ez-queue");
+  var queueScroll = h10("div", "ez-fade ez-queue-scroll");
   queueScroll.appendChild(queueList);
-  var sendBtn = h9("button", "ez-send");
-  var sendLabel = h9("span", void 0, "\u9001\u51FA\u7D66 agent");
+  var sendBtn = h10("button", "ez-send");
+  var sendLabel = h10("span", void 0, "\u9001\u51FA\u7D66 agent");
   sendBtn.title = "\u9001\u51FA\u7D66 agent\uFF08\u2318/Ctrl + Enter\uFF09";
   sendBtn.append(icon(Navigation03Icon, 15), sendLabel);
   sendBtn.onclick = () => void sendBatch();
   var noteAttach = attachify({
     attachments: shellAttachments,
-    mk: h9,
+    mk: h10,
     className: "ez-note",
     placeholder: "\u6574\u9AD4\u60F3\u6CD5\u6216\u88DC\u5145\u8AAA\u660E\uFF0C\u8F38\u5165 / \u7528\u6307\u4EE4\uFF08\u9078\u586B\uFF09",
     onChange: () => paintSendState(),
     commands: [
-      {
-        id: "element",
-        label: "Element",
-        hint: "\u9078\u53D6\u9801\u9762\u5143\u7D20\u6216\u7BC4\u570D",
-        keywords: ["element", "pick", "ref", "reference", "\u5143\u7D20", "\u6307\u5B9A", "\u53C3\u8003", "\u6846\u9078"],
-        icon: AlignSelectionIcon,
-        // The pointer is in the other document, so this can only ask. The answer
-        // comes back as a message and lands here via the pick reducer.
-        run: () => startPick("note")
-      },
+      elementCommand(() => noteAttach),
       {
         id: "new",
         label: "New chat",
@@ -6177,6 +6924,17 @@
         // while this review has only ever had the one conversation.
         enabled: () => !!snapshot?.acp && (snapshot.chats?.length ?? 0) > 1,
         run: () => void openResume()
+      },
+      {
+        id: "skills",
+        label: "Skills",
+        hint: "\u8F38\u5165 $ \u4F7F\u7528 skill",
+        keywords: ["skill", "skills", "$", "\u6280\u80FD"],
+        icon: DollarSquareIcon,
+        // Skills have their own menu, behind `$`: this one row is how a user who
+        // only knows `/` finds it. Typed rather than inserted, so it opens there.
+        enabled: () => !!snapshot?.acp,
+        run: () => document.execCommand("insertText", false, "$")
       }
     ],
     skills: () => fetchSkills(),
@@ -6184,50 +6942,61 @@
   });
   var note = noteAttach.editable;
   note.title = "\u5BEB\u88DC\u5145\u8AAA\u660E\uFF08N\uFF09";
-  var configPill = h9("button", "ez-config-pill");
+  var pickComposer = noteAttach;
+  function elementCommand(into) {
+    return {
+      id: "element",
+      label: "Element",
+      hint: "\u9078\u53D6\u9801\u9762\u5143\u7D20\u6216\u7BC4\u570D",
+      keywords: ["element", "pick", "ref", "reference", "\u5143\u7D20", "\u6307\u5B9A", "\u53C3\u8003", "\u6846\u9078"],
+      icon: AlignSelectionIcon,
+      run: () => startPick(into())
+    };
+  }
+  var configPill = h10("button", "ez-config-pill");
   configPill.setAttribute("aria-haspopup", "menu");
   configPill.setAttribute("aria-expanded", "false");
-  var configMenu = h9("div", "ez-menu ez-menu-up");
+  var configMenu = h10("div", "ez-menu ez-menu-up");
   configMenu.setAttribute("role", "menu");
-  var configWrap = h9("div", "ez-config");
+  var configWrap = h10("div", "ez-config");
   configWrap.hidden = true;
   configWrap.append(configPill, configMenu);
-  var limitPill = h9("button", "ez-limit");
+  var limitPill = h10("button", "ez-limit");
   limitPill.type = "button";
   limitPill.setAttribute("aria-describedby", "ez-usage-card");
-  var limitCard = h9("div", "ez-usage-card");
+  var limitCard = h10("div", "ez-usage-card");
   limitCard.id = "ez-usage-card";
   limitCard.setAttribute("role", "tooltip");
-  var limitWrap = h9("div", "ez-usage");
+  var limitWrap = h10("div", "ez-usage");
   limitWrap.hidden = true;
   limitWrap.append(limitPill, limitCard);
-  var confirmTitle = h9("div", "ez-notice-title");
-  var confirmBody = h9("div", "ez-notice-body");
-  var confirmSkip = h9("input");
+  var confirmTitle = h10("div", "ez-notice-title");
+  var confirmBody = h10("div", "ez-notice-body");
+  var confirmSkip = h10("input");
   confirmSkip.type = "checkbox";
   confirmSkip.id = "ez-confirm-skip";
-  var confirmSkipLabel = h9("label", "ez-notice-skip");
+  var confirmSkipLabel = h10("label", "ez-notice-skip");
   confirmSkipLabel.htmlFor = confirmSkip.id;
-  confirmSkipLabel.append(confirmSkip, h9("span", "", "\u4EE5\u5F8C\u4E0D\u518D\u63D0\u9192"));
-  var confirmGo = h9("button", "ez-notice-go");
-  var confirmNo = h9("button", "ez-notice-no", "\u53D6\u6D88");
-  var confirmActions = h9("div", "ez-notice-actions");
+  confirmSkipLabel.append(confirmSkip, h10("span", "", "\u4EE5\u5F8C\u4E0D\u518D\u63D0\u9192"));
+  var confirmGo = h10("button", "ez-notice-go");
+  var confirmNo = h10("button", "ez-notice-no", "\u53D6\u6D88");
+  var confirmActions = h10("div", "ez-notice-actions");
   confirmActions.append(confirmGo, confirmNo);
-  var confirmCard = h9("section", "ez-notice ez-confirm");
+  var confirmCard = h10("section", "ez-notice ez-confirm");
   confirmCard.hidden = true;
   confirmCard.dataset.testid = "ez-confirm";
   confirmCard.setAttribute("role", "dialog");
   confirmTitle.id = "ez-confirm-title";
   confirmCard.setAttribute("aria-labelledby", confirmTitle.id);
   confirmCard.append(confirmTitle, confirmBody, confirmActions, confirmSkipLabel);
-  var resumeTitle = h9("div", "ez-notice-title", "\u56DE\u5230\u4E4B\u524D\u7684\u5C0D\u8A71");
-  var resumeList = h9("div", "ez-notice-list");
+  var resumeTitle = h10("div", "ez-notice-title", "\u56DE\u5230\u4E4B\u524D\u7684\u5C0D\u8A71");
+  var resumeList = h10("div", "ez-notice-list");
   resumeList.setAttribute("role", "menu");
-  var resumeClose = h9("button", "ez-notice-x");
+  var resumeClose = h10("button", "ez-notice-x");
   resumeClose.title = "\u95DC\u9589";
   resumeClose.setAttribute("aria-label", "\u95DC\u9589");
   resumeClose.append(icon(Cancel01Icon, 13));
-  var resumeCard = h9("section", "ez-notice ez-resume");
+  var resumeCard = h10("section", "ez-notice ez-resume");
   resumeCard.hidden = true;
   resumeCard.append(resumeClose, resumeTitle, resumeList);
   var resumeRows = [];
@@ -6248,14 +7017,14 @@
     const { chats } = await res.json();
     resumeList.textContent = "";
     resumeRows = chats.map((chat) => {
-      const row = h9("button", "ez-notice-row");
+      const row = h10("button", "ez-notice-row");
       row.setAttribute("role", "menuitemradio");
       row.setAttribute("aria-checked", String(chat.current));
       if (chat.current) row.dataset.current = "";
       row.append(
         icon(ArrowRight02Icon, 12),
-        h9("span", "ez-notice-row-name", chat.title || chatTime(chat.startedAt)),
-        h9("span", "ez-notice-row-when", chat.title ? chatTime(chat.startedAt) : "")
+        h10("span", "ez-notice-row-name", chat.title || chatTime(chat.startedAt)),
+        h10("span", "ez-notice-row-when", chat.title ? chatTime(chat.startedAt) : "")
       );
       row.addEventListener("pointerenter", () => pointAtResumeRow(row));
       row.addEventListener("focus", () => pointAtResumeRow(row));
@@ -6278,7 +7047,7 @@
     }
   };
   resumeClose.onclick = () => closeResume();
-  var notices = h9("div", "ez-notices");
+  var notices = h10("div", "ez-notices");
   notices.append(updateCard, resumeCard, confirmCard);
   var answerConfirm = null;
   function closeConfirm(ok, offer) {
@@ -6314,20 +7083,20 @@
       answerConfirm = resolve;
     });
   }
-  var harnessBtn = h9("button", "ez-harness");
+  var harnessBtn = h10("button", "ez-harness");
   harnessBtn.type = "button";
   harnessBtn.setAttribute("role", "switch");
   harnessBtn.setAttribute("aria-checked", "false");
   var HARNESS_HINT = "\u5BE6\u9A57\u6027\u529F\u80FD\uFF1A\u958B\u555F\u5F8C\uFF0Cagent \u6703\u5148\u4E86\u89E3\u4F60\u7684\u7522\u54C1\u3001\u6574\u7406\u51FA\u8A2D\u8A08\u898F\u7BC4\uFF0C\u4E4B\u5F8C\u90FD\u7167\u898F\u7BC4\u8A2D\u8A08";
   var RUNNING_HINT = "agent \u6B63\u5728\u57F7\u884C\uFF0C\u9019\u4E00\u8F2A\u7D50\u675F\u5F8C\u624D\u80FD\u8ABF\u6574";
   harnessBtn.title = HARNESS_HINT;
-  var harnessMark = h9("span", "ez-harness-mark");
+  var harnessMark = h10("span", "ez-harness-mark");
   harnessMark.append(icon(SparklesIcon, 12));
   harnessBtn.append(
     harnessMark,
-    h9("span", "ez-harness-label", "\u589E\u5F37\u8A2D\u8A08"),
-    h9("span", "ez-switch"),
-    h9("span", "ez-harness-tag", "\u5BE6\u9A57")
+    h10("span", "ez-harness-label", "\u589E\u5F37\u8A2D\u8A08"),
+    h10("span", "ez-switch"),
+    h10("span", "ez-harness-tag", "\u5BE6\u9A57")
   );
   harnessBtn.onclick = () => void toggleHarness();
   var EFFORTS = [
@@ -6335,21 +7104,21 @@
     { level: "medium", label: "\u4E2D", hint: "\u4E2D\uFF1A\u5B8C\u6574\u8A2D\u8A08\u6D41\u7A0B\uFF0C\u4F46\u4E0D\u53E6\u5916\u8ACB\u4EBA\u6AA2\u67E5" },
     { level: "high", label: "\u9AD8", hint: "\u9AD8\uFF1A\u5B8C\u6574\u8A2D\u8A08\u6D41\u7A0B\uFF0C\u6700\u5F8C\u518D\u7368\u7ACB\u6AA2\u67E5\u4E00\u6B21" }
   ];
-  var effortGroup = h9("label", "ez-effort");
+  var effortGroup = h10("label", "ez-effort");
   effortGroup.hidden = true;
-  var effortTrack = h9("span", "ez-effort-track");
+  var effortTrack = h10("span", "ez-effort-track");
   effortTrack.setAttribute("aria-hidden", "true");
-  effortTrack.append(h9("span", "ez-effort-fill"), h9("span", "ez-effort-thumb"));
-  var effortSlider = h9("input", "ez-effort-input");
+  effortTrack.append(h10("span", "ez-effort-fill"), h10("span", "ez-effort-thumb"));
+  var effortSlider = h10("input", "ez-effort-input");
   effortSlider.type = "range";
   effortSlider.min = "0";
   effortSlider.max = String(EFFORTS.length - 1);
   effortSlider.step = "1";
   effortSlider.setAttribute("aria-label", "\u8A2D\u8A08\u529B\u5EA6");
-  var effortValue = h9("span", "ez-effort-value");
-  var effortControl = h9("span", "ez-effort-slider");
+  var effortValue = h10("span", "ez-effort-value");
+  var effortControl = h10("span", "ez-effort-slider");
   effortControl.append(effortTrack, effortSlider);
-  effortGroup.append(h9("span", "ez-effort-label", "\u529B\u5EA6"), effortControl, effortValue);
+  effortGroup.append(h10("span", "ez-effort-label", "\u529B\u5EA6"), effortControl, effortValue);
   function showEffort(at2) {
     const effort = EFFORTS[at2];
     effortSlider.value = String(at2);
@@ -6418,16 +7187,16 @@
   var effortHeld = false;
   effortSlider.onpointerdown = () => effortHeld = true;
   window.addEventListener("pointerup", () => effortHeld = false);
-  var controlRow = h9("div", "ez-control-row");
+  var controlRow = h10("div", "ez-control-row");
   controlRow.hidden = true;
   controlRow.append(agentWrap, configWrap, limitWrap);
-  var harnessRow = h9("div", "ez-harness-row");
+  var harnessRow = h10("div", "ez-harness-row");
   harnessRow.hidden = true;
   harnessRow.append(harnessBtn, effortGroup);
   queueSection.append(queueScroll, harnessRow, controlRow, noteAttach.wrap, sendBtn);
   var editAttach = attachify({
     attachments: shellAttachments,
-    mk: h9,
+    mk: h10,
     className: "ez-qi-input",
     // Worded as the page popup's, which asks the same question of the same kind of
     // text, and puts the keys in the field rather than on a line of their own.
@@ -6437,7 +7206,9 @@
     onChange: () => {
       paintEditState();
       capQueue();
-    }
+    },
+    commands: [elementCommand(() => editAttach)],
+    chooseLibrary: () => chooseLibraryAttachments(API)
   });
   editAttach.wrap.addEventListener(
     "keydown",
@@ -6456,12 +7227,12 @@
     },
     true
   );
-  var forkBar = h9("nav", "ez-fork-bar");
+  var forkBar = h10("nav", "ez-fork-bar");
   forkBar.hidden = true;
   forkBar.setAttribute("aria-label", "\u76EE\u524D\u7684\u5C0D\u8A71\u4F4D\u7F6E");
-  var forkRoot = h9("button", "ez-fork-root");
-  var forkChip = h9("button", "ez-fork-here");
-  var forkName = h9("span", "ez-fork-name");
+  var forkRoot = h10("button", "ez-fork-root");
+  var forkChip = h10("button", "ez-fork-here");
+  var forkName = h10("span", "ez-fork-name");
   forkChip.append(icon(MagicWand01Icon, 13), forkName);
   function rootOf(chat, chats) {
     let at2 = chat;
@@ -6486,7 +7257,7 @@
     return all.filter((c) => c.parentChatId && (here ? c.parentChatId === here.id : false));
   }
   function branchPicker(trigger, menuClass) {
-    const menu = h9("div", `ez-menu ${menuClass}`);
+    const menu = h10("div", `ez-menu ${menuClass}`);
     menu.setAttribute("role", "menu");
     menu.setAttribute("aria-label", "\u5207\u63DB\u5230\u67D0\u500B\u5C0D\u8A71");
     menu.hidden = true;
@@ -6504,14 +7275,14 @@
     function show() {
       menu.textContent = "";
       rows = branchesOf(snapshot).map((chat) => {
-        const row = h9("button", "ez-notice-row ez-fork-row");
+        const row = h10("button", "ez-notice-row ez-fork-row");
         row.setAttribute("role", "menuitemradio");
         row.setAttribute("aria-checked", String(chat.current));
         if (chat.current) row.dataset.current = "";
         row.append(
           icon(ArrowRight02Icon, 12),
-          h9("span", "ez-notice-row-name", chatName(chat, false)),
-          h9("span", "ez-notice-row-when", chatDetail(chat))
+          h10("span", "ez-notice-row-name", chatName(chat, false)),
+          h10("span", "ez-notice-row-when", chatDetail(chat))
         );
         row.addEventListener("pointerenter", () => pointAt(row));
         row.addEventListener("focus", () => pointAt(row));
@@ -6555,8 +7326,8 @@
     forkChip.disabled = true;
     forkChip.setAttribute("aria-current", "page");
   }
-  var forkMore = h9("button", "ez-fork-more");
-  forkMore.append(h9("span", void 0, "\u5206\u652F\u5C0D\u8A71"), icon(ChevronDownIcon, 12));
+  var forkMore = h10("button", "ez-fork-more");
+  forkMore.append(h10("span", void 0, "\u5206\u652F\u5C0D\u8A71"), icon(ChevronDownIcon, 12));
   forkMore.title = "\u9019\u689D\u4E3B\u7DDA\u5E95\u4E0B\u7684\u5206\u652F\u5C0D\u8A71";
   var morePicker = BRANCHES_REACHABLE ? branchPicker(forkMore, "ez-fork-more-menu") : null;
   async function leaveBranch(toChatId) {
@@ -6626,17 +7397,17 @@
     void convScroll.offsetWidth;
     convScroll.dataset.enter = deeper ? "deeper" : back ? "back" : "swap";
   }
-  var convSection = h9("section", "ez-section ez-conv-section");
-  var convList = h9("div", "ez-conv");
-  var convScroll = h9("div", "ez-fade ez-conv-scroll");
+  var convSection = h10("section", "ez-section ez-conv-section");
+  var convList = h10("div", "ez-conv");
+  var convScroll = h10("div", "ez-fade ez-conv-scroll");
   convScroll.appendChild(convList);
-  var forkSep = h9("span", "ez-fork-sep");
+  var forkSep = h10("span", "ez-fork-sep");
   forkSep.append(icon(ChevronRightIcon, 10));
   forkBar.append(forkRoot, forkSep, forkChip);
   if (forkPicker) forkBar.append(forkPicker.menu);
   if (morePicker) forkBar.append(forkMore, morePicker.menu);
   convSection.append(forkBar, convScroll, notices);
-  var resizer = h9("div", "ez-resizer");
+  var resizer = h10("div", "ez-resizer");
   resizer.tabIndex = 0;
   resizer.setAttribute("role", "separator");
   resizer.setAttribute("aria-orientation", "vertical");
@@ -6644,17 +7415,17 @@
   resizer.setAttribute("aria-label", "\u8ABF\u6574\u5074\u908A\u6B04\u5BEC\u5EA6");
   resizer.title = "\u62D6\u66F3\u8ABF\u6574\u5BEC\u5EA6\uFF0C\u62D6\u5230\u5E95\u6536\u8D77\uFF0C\u96D9\u64CA\u9084\u539F";
   sidebar.append(sideHead, convSection, queueSection);
-  var sidebarSlot = h9("div", "ez-sidebar-slot");
+  var sidebarSlot = h10("div", "ez-sidebar-slot");
   sidebarSlot.append(sidebar);
-  var activityBar = h9("nav", "ez-activity");
+  var activityBar = h10("nav", "ez-activity");
   activityBar.setAttribute("aria-label", "\u5074\u908A\u6B04");
-  var reviewPanelBtn = h9("button", "ez-activity-btn");
+  var reviewPanelBtn = h10("button", "ez-activity-btn");
   reviewPanelBtn.append(icon(BubbleChatIcon, 18));
   reviewPanelBtn.onclick = () => toggleSidebar();
   var VIEW_PARAM = "view";
   var LIBRARY_VIEW = "library";
   var libraryInUrl = () => new URLSearchParams(location.search).get(VIEW_PARAM) === LIBRARY_VIEW;
-  var libraryBtn = h9("button", "ez-activity-btn");
+  var libraryBtn = h10("button", "ez-activity-btn");
   libraryBtn.setAttribute("aria-pressed", String(libraryInUrl()));
   libraryBtn.dataset.testid = LIBRARY_TEST_IDS.open;
   libraryBtn.setAttribute("aria-label", "\u7D20\u6750\u5EAB");
@@ -6722,7 +7493,7 @@
   function gridMetrics() {
     return { gap: GRID_GAP, rowGap: GRID_ROW_GAP, head: cardHead() };
   }
-  var dropHint = h9("div", "ez-drop-hint");
+  var dropHint = h10("div", "ez-drop-hint");
   var DRAG_SLOP = 4;
   var ROW_SNAP = 30;
   var PAN_EDGE = 44;
@@ -6985,7 +7756,7 @@
     paintVeil();
     paintPickPill();
     if (was && !pickState && !out.effects.some((x) => x.do === "insert-note")) {
-      noteAttach.cancelRef();
+      pickComposer.cancelRef();
       paintSendState();
     }
   }
@@ -6998,7 +7769,7 @@
     switch (effect.do) {
       case "arm-overlay":
         if (effect.host === "note") {
-          noteAttach.beginRef(PICKING_LABEL);
+          pickComposer.beginRef(PICKING_LABEL);
           paintSendState();
         }
         for (const f of pickFrames(effect.frame)) {
@@ -7031,8 +7802,9 @@
         for (const f of pickFrames(effect.frame)) if (f.kind === "app") navigateFrame(f, effect.page);
         return;
       case "insert-note":
-        noteAttach.resolveRef(effect.ref);
-        focusNote();
+        pickComposer.resolveRef(effect.ref);
+        if (pickComposer === noteAttach) focusNote();
+        else pickComposer.editable.focus();
         paintSendState();
         return;
       case "banner":
@@ -7041,11 +7813,12 @@
         return;
     }
   }
-  function startPick(host) {
+  function startPick(into) {
+    pickComposer = into;
     dispatchPick({
       t: "arm",
       id: `s${++pickSeq}-${Date.now().toString(36)}`,
-      host,
+      host: "note",
       now: Date.now()
     });
   }
@@ -7094,14 +7867,25 @@
       ...init
     });
   }
+  function sidebarToggle(toggle) {
+    const button2 = h10("button", "ez-sidebar-toggle");
+    button2.type = "button";
+    button2.title = "\u5C55\u958B\u5074\u908A\u6B04\uFF08\u2303\u2318S\uFF09";
+    button2.setAttribute("aria-label", button2.title);
+    button2.append(icon(SidebarLeftIcon, 16));
+    button2.onclick = () => toggle();
+    return button2;
+  }
   function canvasPorts() {
     return {
       guests: frames,
       stageWrap,
+      ...host.kind === "desktop" ? { tabsLead: sidebarToggle(host.toggleSidebar) } : {},
       stage,
       api,
       onTabShown: (tab) => {
         deviceRow.hidden = stagedApp === null || tab !== "app";
+        paintDevServer();
         if (tab === "app") paintFrames();
         paintPage();
         paintPickPill();
@@ -7120,6 +7904,46 @@
   function paintSendState() {
     sendBtn.disabled = !canSend();
   }
+  var sendWhenReady = false;
+  function setSendWhenReady(on) {
+    sendWhenReady = on;
+    sendBtn.classList.toggle("ez-send-waiting", on);
+    sendBtn.setAttribute("aria-busy", String(on));
+    sendBtn.title = on ? "\u5F71\u7247\u8655\u7406\u5B8C\u5C31\u6703\u9001\u51FA\uFF08\u518D\u6309\u4E00\u6B21\u53D6\u6D88\uFF09" : "\u9001\u51FA\u7D66 agent\uFF08\u2318/Ctrl + Enter\uFF09";
+  }
+  function videosHoldSend() {
+    const pending = new Set(snapshot?.pendingVideos ?? []);
+    if (!pending.size) return false;
+    const queued = snapshot?.annotations.flatMap((a) => a.attachments?.map((f) => f.id) ?? []) ?? [];
+    return [...noteAttach.ids(), ...editAttach.ids(), ...queued].some((id) => pending.has(id));
+  }
+  var VIDEO_UNREADABLE = {
+    "unsupported-browser": "\u9019\u500B\u700F\u89BD\u5668\u7121\u6CD5\u89E3\u78BC\u5F71\u7247",
+    "unsupported-codec": "\u700F\u89BD\u5668\u4E0D\u652F\u63F4\u9019\u6BB5\u5F71\u7247\u7684\u7DE8\u78BC",
+    unreadable: "\u8B80\u4E0D\u51FA\u5F71\u7247\u5167\u5BB9",
+    crashed: "\u64F7\u53D6\u756B\u9762\u6642\u4E2D\u65B7"
+  };
+  var videoLines = /* @__PURE__ */ new Map();
+  var progressOf = (ids) => `${Math.round(ids.reduce((sum, id) => sum + digests.progress(id), 0) / ids.length * 100)}%`;
+  function paintVideos() {
+    const pending = new Set(snapshot?.pendingVideos ?? []);
+    const noteFor = (ids) => {
+      const waiting = ids.filter((id) => pending.has(id));
+      return waiting.length ? `\u8655\u7406\u4E2D ${progressOf(waiting)}` : null;
+    };
+    noteAttach.paintNotes(noteFor);
+    editAttach.paintNotes(noteFor);
+    for (const [line, videos] of videoLines) {
+      const failed = videos.find((f) => f.video?.state === "failed");
+      const waiting = videos.filter((f) => pending.has(f.id)).map((f) => f.id);
+      line.classList.toggle("ez-qi-video-failed", !waiting.length && !!failed);
+      if (waiting.length) line.textContent = `\u5F71\u7247\u8655\u7406\u4E2D ${progressOf(waiting)}`;
+      else if (failed?.video?.state === "failed") {
+        line.textContent = `${failed.name}\uFF1A${VIDEO_UNREADABLE[failed.video.reason]}\uFF0Cagent \u770B\u4E0D\u5230\u756B\u9762`;
+      } else line.textContent = "";
+    }
+    if (sendWhenReady && !videosHoldSend()) void sendBatch();
+  }
   var LIMIT_BEAT_MS = 12e4;
   function refreshLimit() {
     if (document.visibilityState !== "visible" || !snapshot?.acp) return;
@@ -7131,6 +7955,11 @@
   setInterval(refreshLimit, LIMIT_BEAT_MS);
   async function sendBatch() {
     if (!canSend()) return;
+    if (videosHoldSend()) {
+      setSendWhenReady(!sendWhenReady);
+      return;
+    }
+    setSendWhenReady(false);
     const count = snapshot?.annotations.length ?? 0;
     const attachments = noteAttach.ids();
     const references = noteAttach.refs();
@@ -7183,6 +8012,7 @@
   function closeEdit(reason) {
     const at2 = editing;
     if (!at2) return;
+    if (pickState?.host === "note" && pickComposer === editAttach) abortPick("escape");
     editing = null;
     editSaving = false;
     if (reason === "cancelled" || reason === "switched") {
@@ -7226,12 +8056,12 @@
   }
   function brandMark(brand2, size) {
     if (!brand2) return [];
-    const mark = h9("span", "ez-brand-mark");
+    const mark = h10("span", "ez-brand-mark");
     mark.append(icon(brand2 === "claude" ? ClaudeIcon : ChatGptIcon, size));
     return [mark];
   }
   function menuCheck() {
-    const check = h9("span", "ez-menu-check");
+    const check = h10("span", "ez-menu-check");
     check.append(icon(CheckIcon, 14));
     return check;
   }
@@ -7292,6 +8122,7 @@
   }
   async function switchAgent(agent) {
     closeAgentMenu();
+    if (!snapshot?.acp) return void connectAgent(agent);
     if (agent.id === runningAgentId()) return;
     const ok = await askConfirm({
       // Keyed on the act, not on which agent: the reason is the same whichever
@@ -7302,37 +8133,63 @@
       go: `\u6539\u7528 ${agent.name}`
     });
     if (!ok) return;
+    await connectAgent(agent);
+  }
+  async function connectAgent(agent) {
     await api("/acp/agent", {
       method: "POST",
-      body: JSON.stringify({ id: agent.id })
+      body: JSON.stringify({ id: agent.id, host: host.kind })
     });
   }
+  async function disconnectAgent() {
+    closeAgentMenu();
+    await api("/acp/disconnect", { method: "POST" });
+  }
   function paintAgents() {
     const command = snapshot?.acp?.agent ?? "";
     const runningId = runningAgentId();
     const shown = agents.filter((a) => a.installed || a.id === runningId);
-    const signature = JSON.stringify([shown, command]);
+    const connected = !!snapshot?.acp;
+    const signature = JSON.stringify([shown, command, connected]);
     if (signature === agentsDrawn) return;
     agentsDrawn = signature;
     agentPill.textContent = "";
+    agentPill.toggleAttribute("data-offline", !connected);
     agentPill.append(
-      ...brandMark(agentBrandFor(command), 14),
-      h9("span", "ez-agent-name", agentProfileFor(command)?.name ?? "Agent"),
+      ...connected ? brandMark(agentBrandFor(command), 14) : [icon(Plug01Icon, 14)],
+      h10("span", "ez-agent-name", connected ? agentProfileFor(command)?.name ?? "Agent" : "\u9023\u7DDA Agent"),
       icon(ChevronDownIcon, 12)
     );
     agentMenu.textContent = "";
+    const choices = h10("div", "ez-menu-group");
+    agentMenu.append(choices);
+    if (!shown.length) {
+      const none = h10("button", "ez-menu-item");
+      none.disabled = true;
+      none.append(h10("span", "ez-menu-name", "\u9019\u53F0\u96FB\u8166\u4E0A\u6C92\u6709\u53EF\u7528\u7684 agent"));
+      choices.append(none);
+    }
     agentRows = shown.map((agent) => {
       const on = agent.id === runningId;
-      const row = h9("button", "ez-menu-item");
+      const row = h10("button", "ez-menu-item");
       row.setAttribute("role", "menuitemradio");
       row.setAttribute("aria-checked", String(on));
       if (on) row.dataset.current = "";
       const brand2 = AGENT_PROFILES.find((p) => p.id === agent.id)?.brand;
-      row.append(...brandMark(brand2, 15), h9("span", "ez-menu-name", agent.name), menuCheck());
+      row.append(...brandMark(brand2, 15), h10("span", "ez-menu-name", agent.name), menuCheck());
       row.onclick = () => void switchAgent(agent);
-      agentMenu.append(row);
+      choices.append(row);
       return row;
     });
+    if (!connected) return;
+    const off = h10("button", "ez-menu-item");
+    off.setAttribute("role", "menuitem");
+    off.append(icon(Plug01Icon, 15), h10("span", "ez-menu-name", "\u4E2D\u65B7\u9023\u7DDA"));
+    off.onclick = () => void disconnectAgent();
+    const offGroup = h10("div", "ez-menu-group");
+    offGroup.append(off);
+    agentMenu.append(offGroup);
+    agentRows.push(off);
   }
   async function fetchSkills() {
     if (!snapshot?.acp) return [];
@@ -7342,7 +8199,8 @@
     return skills.map((skill) => ({
       id: skill.name,
       label: skill.name,
-      keywords: [skill.description],
+      keywords: [],
+      description: skill.description,
       run: () => noteAttach.insertSkill(skill.name)
     }));
   }
@@ -7404,24 +8262,24 @@
     if (!line) return;
     limitPill.textContent = line;
     const plan = planName(limit?.plan);
-    const head = h9("div", "ez-usage-head");
-    head.append(h9("span", "ez-usage-title", "\u7528\u91CF"));
-    if (plan) head.append(h9("span", "ez-usage-plan", plan));
+    const head = h10("div", "ez-usage-head");
+    head.append(h10("span", "ez-usage-title", "\u7528\u91CF"));
+    if (plan) head.append(h10("span", "ez-usage-plan", plan));
     limitCard.replaceChildren(head);
     for (const row of usageRows(limit)) {
-      const top = h9("div", "ez-usage-line");
+      const top = h10("div", "ez-usage-line");
       top.append(
-        h9("span", "ez-usage-label", row.label),
-        h9("span", "ez-usage-left", `\u5269 ${row.percent}%`)
+        h10("span", "ez-usage-label", row.label),
+        h10("span", "ez-usage-left", `\u5269 ${row.percent}%`)
       );
-      const fill = h9("i");
+      const fill = h10("i");
       fill.style.width = `${row.used}%`;
-      const bar = h9("div", "ez-usage-bar");
+      const bar = h10("div", "ez-usage-bar");
       bar.append(fill);
-      const item = h9("div", "ez-usage-row");
+      const item = h10("div", "ez-usage-row");
       if (row.low) item.dataset.low = "";
       item.append(top, bar);
-      if (row.when) item.append(h9("div", "ez-usage-when", row.when));
+      if (row.when) item.append(h10("div", "ez-usage-when", row.when));
       limitCard.append(item);
     }
   }
@@ -7442,13 +8300,13 @@
     const named = pillOption(options);
     const label = named && named.type === "select" ? shortConfigValueName(configValueName(named, named.currentValue)) : named && configLabel(named) || "";
     configPill.textContent = "";
-    configPill.append(h9("span", "ez-config-name", label), icon(ChevronDownIcon, 12));
+    configPill.append(h10("span", "ez-config-name", label), icon(ChevronDownIcon, 12));
     const full = named && named.type === "select" ? configValueName(named, named.currentValue) : "";
     const detail = named && named.type === "select" ? configValues(named).find((o) => o.value === named.currentValue)?.description : void 0;
     configPill.title = [named ? configLabel(named) : "", full, detail].filter(Boolean).join(" \xB7 ");
     configMenu.textContent = "";
     for (const option of [...options].sort(byCategory)) {
-      const group = h9("div", "ez-menu-group");
+      const group = h10("div", "ez-menu-group");
       group.setAttribute("role", "group");
       group.setAttribute("aria-label", configLabel(option));
       if (option.type === "boolean") {
@@ -7456,7 +8314,7 @@
           configRow(option, !option.currentValue, configLabel(option), option, option.currentValue)
         );
       } else {
-        group.append(h9("div", "ez-menu-label", configLabel(option)));
+        group.append(h10("div", "ez-menu-label", configLabel(option)));
         for (const value of configValues(option)) {
           group.append(
             configRow(option, value.value, value.name, value, value.value === option.currentValue)
@@ -7470,11 +8328,11 @@
   var HIDDEN_CATEGORIES = /* @__PURE__ */ new Set(["mode", "model_config"]);
   var CATEGORY_ORDER = ["model", "thought_level"];
   function byCategory(a, b) {
-    const rank = (o) => {
+    const rank2 = (o) => {
       const at2 = CATEGORY_ORDER.indexOf(o.category ?? "");
       return at2 === -1 ? CATEGORY_ORDER.length : at2;
     };
-    return rank(a) - rank(b);
+    return rank2(a) - rank2(b);
   }
   function resolvedName(option, value, name, describes) {
     const resolved = describes.description;
@@ -7484,11 +8342,11 @@
     return `${name.replace(/\s*\([^)]*\)\s*$/, "")} (${resolved.replace(/\s*\(([^)]*)\)/g, " \xB7 $1")})`;
   }
   function configRow(option, value, name, describes, on) {
-    const row = h9("button", "ez-menu-item");
+    const row = h10("button", "ez-menu-item");
     row.setAttribute("role", option.type === "boolean" ? "menuitemcheckbox" : "menuitemradio");
     row.setAttribute("aria-checked", String(on));
     if (on) row.dataset.current = "";
-    row.append(h9("span", "ez-menu-name", resolvedName(option, value, name, describes)), menuCheck());
+    row.append(h10("span", "ez-menu-name", resolvedName(option, value, name, describes)), menuCheck());
     if (describes.description) row.title = describes.description;
     row.onclick = () => void setConfig(option.id, value);
     return row;
@@ -7500,23 +8358,24 @@
     if (signature === queueDrawn) return;
     queueDrawn = signature;
     queueList.textContent = "";
+    videoLines.clear();
     annotations.forEach((a, i) => {
-      const li = h9("li", "ez-queue-item");
-      const head = h9("div", "ez-qi-head");
-      head.append(h9("span", "ez-qi-num", String(i + 1)), h9("span", "ez-qi-label", annotationLabel(a)));
+      const li = h10("li", "ez-queue-item");
+      const head = h10("div", "ez-qi-head");
+      head.append(h10("span", "ez-qi-num", String(i + 1)), h10("span", "ez-qi-label", annotationLabel(a)));
       const vp = a.anchor.viewport;
       if (vp?.width && vp.preset !== "desktop") {
-        head.append(h9("span", "ez-qi-vp", `${vp.width}px`));
+        head.append(h10("span", "ez-qi-vp", `${vp.width}px`));
       }
-      const acts = h9("div", "ez-qi-acts");
+      const acts = h10("div", "ez-qi-acts");
       const open = editing?.id === a.id;
-      const primary = h9("button", `ez-qi-act ${open ? "ez-qi-tick" : "ez-qi-edit"}`);
+      const primary = h10("button", `ez-qi-act ${open ? "ez-qi-tick" : "ez-qi-edit"}`);
       primary.append(
         open ? icon(CheckIcon, TICK_ICON) : icon(Edit02Icon, EDIT_ICON)
       );
       primary.title = open ? `\u5132\u5B58\uFF08${MOD_LABEL}+Enter\uFF09` : "\u6539\u9019\u5247\u6A19\u8A3B\uFF08\u9001\u51FA\u524D\u90FD\u9084\u80FD\u6539\uFF09";
       primary.onclick = open ? () => void saveEdit() : () => openEdit(a);
-      const dismiss = h9("button", "ez-qi-act ez-qi-del");
+      const dismiss = h10("button", "ez-qi-act ez-qi-del");
       dismiss.append(icon(Cancel01Icon, 13));
       dismiss.title = open ? "\u53D6\u6D88\uFF08Esc\uFF09" : "\u79FB\u9664\u9019\u5247\u6A19\u8A3B";
       dismiss.onclick = open ? () => closeEdit("cancelled") : () => void api(`/annotations/${a.id}`, { method: "DELETE" });
@@ -7540,6 +8399,12 @@
       if (a.comment || a.references?.length || a.attachments?.length) li.append(row.box);
       const files = fileChips(row.unplacedFiles);
       if (files) li.append(files);
+      const videos = a.attachments?.filter((f) => f.video && f.video.state !== "ready") ?? [];
+      if (videos.length) {
+        const line = h10("div", "ez-qi-video");
+        videoLines.set(line, videos);
+        li.append(line);
+      }
       queueList.appendChild(li);
     });
     capQueue();
@@ -7555,17 +8420,17 @@
     return parts.join(" \xB7 ") || a.anchor.page || "";
   }
   function buildSaid(entry, isUser) {
-    const said = h9("div", isUser ? "ez-bubble" : "ez-said");
+    const said = h10("div", isUser ? "ez-bubble" : "ez-said");
     const items = entry.items ?? [];
     if (items.length) {
       const key = entry.batchId ?? String(entry.ts);
       const expanded = expandedBatches.has(key);
       const collapsed = items.length > ITEM_LIMIT + 1 && !expanded;
       const shown = collapsed ? items.slice(0, ITEM_LIMIT) : items;
-      const list = h9("ol", "ez-bubble-list");
+      const list = h10("ol", "ez-bubble-list");
       shown.forEach((item, i) => {
-        const li = h9("li", "ez-bubble-item");
-        const body = h9("div", "ez-bi-body");
+        const li = h10("li", "ez-bubble-item");
+        const body = h10("div", "ez-bi-body");
         const rendered = commentEl(
           item.comment,
           item.references,
@@ -7577,12 +8442,12 @@
         if (rendered.box.childNodes.length) body.append(rendered.box);
         const files = fileChips(rendered.unplacedFiles);
         if (files) body.append(files);
-        li.append(h9("span", "ez-bi-num", `${i + 1}.`), body);
+        li.append(h10("span", "ez-bi-num", `${i + 1}.`), body);
         list.appendChild(li);
       });
       said.appendChild(list);
       if (collapsed) {
-        const more = h9("button", "ez-bubble-more", `\u9084\u6709 ${items.length - ITEM_LIMIT} \u5247`);
+        const more = h10("button", "ez-bubble-more", `\u9084\u6709 ${items.length - ITEM_LIMIT} \u5247`);
         more.onclick = () => {
           expandedBatches.add(key);
           render();
@@ -7609,9 +8474,9 @@
     return said;
   }
   function chipEl(name, glyph, kind, title) {
-    const chip = h9("span", kind ? `ez-chip ez-chip-${kind}` : "ez-chip");
+    const chip = h10("span", kind ? `ez-chip ez-chip-${kind}` : "ez-chip");
     if (glyph) chip.append(icon(glyph, 11));
-    chip.append(h9("span", "ez-chip-name", name));
+    chip.append(h10("span", "ez-chip-name", name));
     if (title) chip.title = title;
     return chip;
   }
@@ -7619,12 +8484,12 @@
   var skillChipEl = (name) => chipEl(`$${name}`, null, "skill");
   function fileChips(names) {
     if (!names.length) return null;
-    const row = h9("div", "ez-file-chips");
+    const row = h10("div", "ez-file-chips");
     for (const name of names) row.appendChild(chipEl(name, File02Icon));
     return row;
   }
   function commentEl(text, refs, files, className, skills) {
-    const box = h9("div", className);
+    const box = h10("div", className);
     const numbered = new Map(
       (refs ?? []).flatMap((r) => typeof r === "string" ? [] : [[r.n, r.label]])
     );
@@ -7724,9 +8589,9 @@
   function paintStatus() {
     statusPill.toggleAttribute("data-alert", daemonGone);
     if (daemonGone) {
-      const how = h9("span");
-      how.append("\u5728\u5C08\u6848\u76EE\u9304\u57F7\u884C ", h9("code", "ez-status-code", "npx -y @cychien/ezdesign@latest"), " \u91CD\u65B0\u555F\u52D5");
-      statusPill.replaceChildren(h9("span", "ez-status-title", "ezdesign \u5DF2\u505C\u6B62\u904B\u4F5C"), how);
+      const how = h10("span");
+      how.append("\u5728\u5C08\u6848\u76EE\u9304\u57F7\u884C ", h10("code", "ez-status-code", "npx -y @cychien/ezdesign@latest"), " \u91CD\u65B0\u555F\u52D5");
+      statusPill.replaceChildren(h10("span", "ez-status-title", "ezdesign \u5DF2\u505C\u6B62\u904B\u4F5C"), how);
       statusPill.hidden = false;
       return;
     }
@@ -7738,12 +8603,17 @@
     const off = snapshot?.state === "ended" || daemonGone || stagedApp === null;
     for (const { btn } of annotateBtns) btn.disabled = off;
   }
+  function paintDevServer() {
+    if (!snapshot) return;
+    devServerPanel.update(snapshot.devServer, { shown: stagedApp !== null, onAppTab: canvasUi?.activeTab === "app" });
+  }
   function render() {
     if (!snapshot) return;
     const s = snapshot;
     stageApp(s.app ?? null);
     canvasUi ?? (canvasUi = installCanvas(canvasPorts()));
     canvasUi.render(s);
+    paintDevServer();
     paintPage();
     const ended = s.state === "ended";
     if (ended) abortPick("ended");
@@ -7763,10 +8633,10 @@
     onBranch = !!s.chats?.find((c) => c.current)?.parentChatId;
     paintVeil();
     frames.postAll({ type: "ez:in-explore", on: onBranch });
-    agentWrap.hidden = !s.acp;
+    agentWrap.hidden = !s.acp && s.agentOnline;
     paintHarness();
     controlRow.hidden = agentWrap.hidden && configWrap.hidden;
-    if (s.acp && !agents.length) void loadAgents();
+    if (!agentWrap.hidden && !agents.length) void loadAgents();
     paintAgents();
     if (s.acp?.cancelling) {
       agentStatus.className = "ez-badge ez-working";
@@ -7790,17 +8660,19 @@
     agentStatus.title = s.acp?.state === "exited" && s.acp.error || "";
     reviewPanelBtn.toggleAttribute("data-working", agentStatus.classList.contains("ez-working"));
     paintQueue(s.annotations);
+    digests.observe(s.pendingVideos ?? []);
+    paintVideos();
     convList.textContent = "";
     let prevRole = null;
     let livePlaced = false;
     for (const entry of threadOrder(s.conversation)) {
       if (entry.role === "system") {
-        convList.appendChild(h9("div", "ez-msg-system", entry.text));
+        convList.appendChild(h10("div", "ez-msg-system", entry.text));
         prevRole = null;
         continue;
       }
       const grouped = entry.role === prevRole;
-      const item = h9("div", `ez-msg ez-msg-${entry.role}${grouped ? " ez-msg-cont" : ""}`);
+      const item = h10("div", `ez-msg ez-msg-${entry.role}${grouped ? " ez-msg-cont" : ""}`);
       const isUser = entry.role === "user";
       item.append(buildSaid(entry, isUser));
       convList.appendChild(item);
@@ -7821,28 +8693,28 @@
     }
     if (s.acp?.state === "exited" && s.acp.error) {
       convList.appendChild(
-        h9("div", "ez-msg-system ez-msg-system-plain", `agent \u5DF2\u96E2\u7DDA\uFF1A${s.acp.error}`)
+        h10("div", "ez-msg-system ez-msg-system-plain", `agent \u5DF2\u96E2\u7DDA\uFF1A${s.acp.error}`)
       );
     }
     convList.scrollTop = convList.scrollHeight;
     paintConvFades();
   }
   function liveTurnEl(s, prevRole) {
-    const row = h9("div", `ez-msg ez-msg-agent${prevRole === "agent" ? " ez-msg-cont" : ""}`);
-    const dots = h9("div", "ez-thinking");
+    const row = h10("div", `ez-msg ez-msg-agent${prevRole === "agent" ? " ez-msg-cont" : ""}`);
+    const dots = h10("div", "ez-thinking");
     dots.setAttribute("role", "status");
     const opening = s.acp?.state === "starting";
     dots.setAttribute("aria-label", s.agentProgress ?? (opening ? "Agent \u6E96\u5099\u4E2D" : "Agent \u4FEE\u6539\u4E2D"));
-    for (let i = 0; i < 3; i++) dots.appendChild(h9("span", "ez-dot"));
-    if (s.agentProgress) dots.appendChild(h9("span", "ez-progress", s.agentProgress));
-    const turn = h9("div", "ez-acp-turn");
+    for (let i = 0; i < 3; i++) dots.appendChild(h10("span", "ez-dot"));
+    if (s.agentProgress) dots.appendChild(h10("span", "ez-progress", s.agentProgress));
+    const turn = h10("div", "ez-acp-turn");
     if (s.acp && s.acp.state === "working") turn.append(acpFeedEl(s.acp));
     turn.append(dots);
     row.append(turn);
     return row;
   }
   function acpFeedEl(acp) {
-    const box = h9("div", "ez-acp-feed");
+    const box = h10("div", "ez-acp-feed");
     const latest = acp.feed.at(-1);
     for (const item of acp.feed) {
       switch (item.kind) {
@@ -7850,18 +8722,18 @@
           box.appendChild(markdownEl(item.text, "ez-md ez-acp-say"));
           break;
         case "thought":
-          if (item === latest) box.appendChild(h9("div", "ez-acp-thought", item.text.slice(-160)));
+          if (item === latest) box.appendChild(h10("div", "ez-acp-thought", item.text.slice(-160)));
           break;
         case "tool": {
-          const line = h9("div", `ez-acp-tool ez-acp-tool-${item.status}`);
-          line.append(h9("span", "ez-acp-dot"), h9("span", "ez-acp-text", item.title));
+          const line = h10("div", `ez-acp-tool ez-acp-tool-${item.status}`);
+          line.append(h10("span", "ez-acp-dot"), h10("span", "ez-acp-text", item.title));
           box.appendChild(line);
           break;
         }
         case "plan":
           for (const entry of item.entries) {
-            const line = h9("div", `ez-acp-plan ez-acp-plan-${entry.status}`);
-            line.append(h9("span", "ez-acp-tick"), h9("span", "ez-acp-text", entry.content));
+            const line = h10("div", `ez-acp-plan ez-acp-plan-${entry.status}`);
+            line.append(h10("span", "ez-acp-tick"), h10("span", "ez-acp-text", entry.content));
             box.appendChild(line);
           }
           break;
@@ -7870,8 +8742,8 @@
     return box;
   }
   function acpAskEl(ask) {
-    const card = h9("div", "ez-acp-ask");
-    if (ask.title) card.append(h9("div", "ez-acp-ask-title", ask.title));
+    const card = h10("div", "ez-acp-ask");
+    if (ask.title) card.append(h10("div", "ez-acp-ask-title", ask.title));
     const values = /* @__PURE__ */ new Map();
     const choicesOnly = ask.fields.every((f) => f.kind === "select");
     const customKeys = new Set(
@@ -7894,7 +8766,7 @@
     const submit = () => {
       if (complete()) send({ answers: Object.fromEntries(values) });
     };
-    const submitBtn = h9("button", "ez-acp-opt ez-acp-opt-primary", "\u9001\u51FA");
+    const submitBtn = h10("button", "ez-acp-opt ez-acp-opt-primary", "\u9001\u51FA");
     submitBtn.onclick = submit;
     const refresh = () => {
       submitBtn.hidden = sendsOnPick();
@@ -7908,7 +8780,7 @@
     ask.fields.forEach((field, i) => {
       let labelId;
       if (field.text || mixed && field.optional) {
-        const label = h9(
+        const label = h10(
           "div",
           "ez-acp-ask-q",
           `${field.text ?? ""}${mixed && field.optional ? "\uFF08\u9078\u586B\uFF09" : ""}`
@@ -7920,9 +8792,9 @@
       card.append(acpFieldEl(field, values, changed, submit, labelId));
     });
     if (ask.kind === "question" || !choicesOnly || !askSendsOnPick(ask.fields, false)) {
-      const actions = h9("div", "ez-acp-ask-actions");
+      const actions = h10("div", "ez-acp-ask-actions");
       if (ask.kind === "question") {
-        const skip = h9("button", "ez-acp-opt", "\u7565\u904E");
+        const skip = h10("button", "ez-acp-opt", "\u7565\u904E");
         skip.onclick = () => send({ decline: true });
         actions.append(skip);
       }
@@ -7939,9 +8811,9 @@
       return el2;
     };
     const optionButton = (option) => {
-      const btn = h9("button", `ez-acp-opt${option.hint ? ` ez-acp-opt-${option.hint}` : ""}`);
-      btn.append(h9("span", void 0, option.name));
-      if (option.description) btn.append(h9("span", "ez-acp-opt-desc", option.description));
+      const btn = h10("button", `ez-acp-opt${option.hint ? ` ez-acp-opt-${option.hint}` : ""}`);
+      btn.append(h10("span", void 0, option.name));
+      if (option.description) btn.append(h10("span", "ez-acp-opt-desc", option.description));
       btn.title = option.description ?? "";
       return btn;
     };
@@ -7962,7 +8834,7 @@
       }
     };
     const textField = (key, opts) => {
-      const area = h9("textarea", "ez-acp-field");
+      const area = h10("textarea", "ez-acp-field");
       area.rows = 1;
       if (opts.max !== void 0) area.maxLength = opts.max;
       if (opts.placeholder) area.placeholder = opts.placeholder;
@@ -7989,7 +8861,7 @@
       if (field.kind !== "select" && field.kind !== "multiselect") return row;
       const custom = field.custom;
       if (!custom) return row;
-      const group = h9("div", "ez-acp-group");
+      const group = h10("div", "ez-acp-group");
       const box = textField(custom.key, {
         placeholder: field.kind === "multiselect" ? "\u5176\u4ED6\u7B54\u6848\uFF08\u9078\u586B\uFF09" : "\u81EA\u5DF1\u56DE\u7B54\uFF0C\u6216\u88DC\u5145\u8AAA\u660E\uFF08\u9078\u586B\uFF09",
         onInput: () => {
@@ -8001,7 +8873,7 @@
     };
     switch (field.kind) {
       case "select": {
-        const row = labelled(h9("div", "ez-acp-ask-options"), "radiogroup");
+        const row = labelled(h10("div", "ez-acp-ask-options"), "radiogroup");
         const radios = field.options.map(radioButton);
         const clearPick = () => {
           values.delete(field.key);
@@ -8026,7 +8898,7 @@
         return group;
       }
       case "multiselect": {
-        const row = labelled(h9("div", "ez-acp-ask-options"), "group");
+        const row = labelled(h10("div", "ez-acp-ask-options"), "group");
         const picked = new Set(field.default ?? []);
         const sync = () => {
           if (picked.size) values.set(field.key, [...picked]);
@@ -8055,7 +8927,7 @@
         });
       }
       case "boolean": {
-        const row = labelled(h9("div", "ez-acp-ask-options"), "radiogroup");
+        const row = labelled(h10("div", "ez-acp-ask-options"), "radiogroup");
         const radios = [
           radioButton({ id: "true", name: "\u662F" }),
           radioButton({ id: "false", name: "\u5426" })
@@ -8073,7 +8945,7 @@
         return row;
       }
       case "number": {
-        const input = labelled(h9("input", "ez-acp-field ez-acp-field-number"));
+        const input = labelled(h10("input", "ez-acp-field ez-acp-field-number"));
         input.type = "number";
         if (field.min !== void 0) input.min = String(field.min);
         if (field.max !== void 0) input.max = String(field.max);