dsh-lcx-codex 0.4.3 → 0.5.0-pre.1

package/lib/client.js

@@ -2,8 +2,9 @@
 (() => {
   // src/client/search-media.ts
   var SEARCH_MEDIA_LIMIT = 60;
-  var IMAGE_EXTENSION = /\.(?:jpe?g|png|webp|gif|avif)$/i;
   var VIDEO_EXTENSION = /\.(?:mp4|webm|ogv)$/i;
+  var IMAGE_EXTENSION = /\.(?:jpe?g|png|webp|gif|avif)$/i;
+  var IMAGE_CDN_HOSTS = /* @__PURE__ */ new Set(["images.unsplash.com", "plus.unsplash.com", "images.pexels.com"]);
   var URL_TOKEN = /https?:\/\/[^\s<>"'`，。；：！？、“”‘’（）【】《》]+/gi;
   var REFERENCE_DEFINITION = /^ {0,3}\[([^\]\r\n]+)\]:[ \t]*(?:<([^>\s]+)>|(\S+))(?:[ \t]+.*)?$/gm;
   var REFERENCE_IMAGE = /!\[([^\]\r\n]*)\](?:\s*\[([^\]\r\n]*)\])?/g;
@@ -174,12 +175,13 @@
       return null;
     return parsed;
   }
-  function mediaItem(value) {
+  function proseMediaItem(value) {
     const parsed = publicHttpUrl(value);
     if (parsed === null) return null;
-    const imageCdn = parsed.protocol === "https:" && ["images.unsplash.com", "plus.unsplash.com", "images.pexels.com"].includes(parsed.hostname) && !/\.(svg|html?|js)$/i.test(parsed.pathname);
-    const kind = IMAGE_EXTENSION.test(parsed.pathname) || imageCdn ? "image" : VIDEO_EXTENSION.test(parsed.pathname) ? "video" : null;
-    return kind === null ? null : { kind, url: parsed.href };
+    if (VIDEO_EXTENSION.test(parsed.pathname)) return { kind: "video", url: parsed.href };
+    if (IMAGE_EXTENSION.test(parsed.pathname) || parsed.protocol === "https:" && IMAGE_CDN_HOSTS.has(parsed.hostname) && !/\.(?:svg|html?|js)$/i.test(parsed.pathname))
+      return { kind: "image", url: parsed.href };
+    return null;
   }
   function referenceLabel(value) {
     return value.trim().replace(/\s+/g, " ").toLowerCase();
@@ -226,7 +228,7 @@
     }
     return result;
   }
-  function extractSearchMedia(text) {
+  function extractDirectMediaLinks(text) {
     let visible = stripHtml(stripInlineCode(stripFencedCode(text)));
     const definitions = /* @__PURE__ */ new Map();
     visible.replace(REFERENCE_DEFINITION, (_match, label, angle, bare) => {
@@ -234,19 +236,16 @@
       return _match;
     });
     const nativeImages = /* @__PURE__ */ new Set();
-    const addNativeImage = (value) => {
-      const item = mediaItem(value);
-      if (item?.kind === "image") nativeImages.add(new URL(item.url).href.replace(/#.*$/, ""));
+    const addNative = (value) => {
+      const parsed = publicHttpUrl(value);
+      if (parsed) nativeImages.add(parsed.href.replace(/#.*$/, ""));
     };
-    visible = eraseInlineImages(visible, addNativeImage);
-    visible = visible.replace(
-      REFERENCE_IMAGE,
-      (_match, alt, explicit) => {
-        const value = definitions.get(referenceLabel(explicit === void 0 || explicit === "" ? alt : explicit));
-        if (value !== void 0) addNativeImage(value);
-        return " ".repeat(_match.length);
-      }
-    );
+    visible = eraseInlineImages(visible, addNative);
+    visible = visible.replace(REFERENCE_IMAGE, (_match, alt, explicit) => {
+      const value = definitions.get(referenceLabel(explicit === void 0 || explicit === "" ? alt : explicit));
+      if (value !== void 0) addNative(value);
+      return " ".repeat(_match.length);
+    });
     const candidates = [];
     visible = collectInlineLinkDestinations(
       visible,
@@ -254,7 +253,7 @@
     );
     visible.replace(
       REFERENCE_LINK,
-      (_match, prefix, label, explicit) => {
+      (_match, _prefix, label, explicit) => {
         const value = definitions.get(referenceLabel(explicit === "" ? label : explicit));
         if (value !== void 0) candidates.push(value);
         return _match;
@@ -265,10 +264,10 @@
     const result = [];
     const seen = /* @__PURE__ */ new Set();
     for (const candidate of candidates) {
-      const item = mediaItem(candidate);
+      const item = proseMediaItem(candidate);
       if (item === null) continue;
       const key = item.kind === "video" ? item.url : item.url.replace(/#.*$/, "");
-      if (nativeImages.has(key) || seen.has(key)) continue;
+      if (seen.has(key) || item.kind === "image" && nativeImages.has(key)) continue;
       seen.add(key);
       result.push(item);
       if (result.length === SEARCH_MEDIA_LIMIT) break;
@@ -279,179 +278,200 @@
   // src/client/inline-media.ts
   var inlineMediaCss = `
 [data-chat-flow-kind="lcx-search-media"]{display:none!important}
-.lcx-media-strip{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;margin:8px 0 4px;line-height:1}
-.lcx-media-strip:empty{display:none}
-.lcx-media-strip:not(:has(.lcx-inline-media:not([hidden]))):not(:has(.lcx-media-toggle)){display:none}
-.lcx-media-toggle-row{flex:0 0 100%;min-width:0}
-.lcx-media-toggle{display:flex;align-items:center;justify-content:flex-start;gap:7px;width:fit-content;max-width:100%;min-width:0;padding:2px 0;border:0;border-radius:3px;background:transparent;color:var(--dsw-alias-label-secondary,#748096);font:12px/20px system-ui;cursor:pointer;text-align:left;transition:color .15s}
-.lcx-media-toggle::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
-.lcx-media-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
-.lcx-media-toggle:hover{color:var(--dsw-alias-link,#416de0);background:transparent}
-.lcx-inline-media{display:inline-flex;max-width:100%;line-height:1}
-.lcx-inline-media[hidden]{display:none}
-.lcx-media-thumb{display:block;position:relative;max-width:100%;padding:0;border:1px solid var(--dsw-alias-border-l2,#ddd);border-radius:12px;overflow:hidden;background:var(--dsw-alias-bg-layer-2,#f5f5f5);color:inherit;cursor:zoom-in;box-shadow:0 2px 6px #00000009;transition:box-shadow .15s,transform .15s,background .15s;font-family:inherit}
-.lcx-media-thumb:hover{box-shadow:0 3px 12px #00000016;transform:translateY(-1px)}
-.lcx-media-thumb img{display:block!important;width:auto!important;height:auto!important;max-width:144px!important;max-height:144px!important;object-fit:contain;margin:0!important;border-radius:0!important}
-.lcx-media-thumb:not([data-video])::after{content:'\u2197';position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#14212b99;color:white;font:15px/1 system-ui;backdrop-filter:blur(6px);pointer-events:none}
-.lcx-media-thumb:focus-visible,.lcx-media-close:focus-visible{outline:2px solid var(--dsw-alias-link,#3478f6);outline-offset:3px}
-.lcx-media-thumb[data-video]{cursor:pointer;padding:7px 10px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;line-height:18px;border-radius:10px;color:var(--dsw-alias-link,#416de0);background:color-mix(in srgb,currentColor 7%,transparent);border-color:color-mix(in srgb,currentColor 13%,transparent);box-shadow:none}
-.lcx-media-thumb[data-video]:hover{background:color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 2px 6px #00000008}
-.lcx-media-play-label{display:flex;align-items:center;gap:7px;white-space:nowrap}
-.lcx-media-play-label::before{content:'';width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor}
-.lcx-media-format{font:10px/16px system-ui;letter-spacing:.04em;opacity:.7;border-left:1px solid color-mix(in srgb,currentColor 24%,transparent);padding-left:8px}
-.lcx-media-thumb[data-video]:has(img){padding:0}
-.lcx-media-thumb[data-video]:has(img) .lcx-media-play-label{position:absolute;inset:0;display:flex;justify-content:center;color:white;background:#0003;font-size:0}
-.lcx-media-thumb[data-video]:has(img) .lcx-media-format{display:none}
-.lcx-media-dialog{box-sizing:border-box;border:1px solid #ffffff24;border-radius:16px;padding:48px 16px 16px;background:#15171b;color:#fff;max-width:94vw;max-height:92vh;box-shadow:0 20px 80px #0006}
-.lcx-media-dialog::backdrop{background:#080b12bb;backdrop-filter:blur(5px)}
-.lcx-media-dialog img,.lcx-media-dialog video{display:block;object-fit:contain;max-width:86vw;max-height:74vh;width:auto;height:auto;border-radius:6px;margin:auto}
-.lcx-media-dialog video{width:min(800px,86vw)}
-.lcx-media-close{position:absolute;right:10px;top:8px;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff14;color:white;font-size:23px;cursor:pointer}
-.lcx-media-nav{position:absolute;left:16px;top:8px;display:flex;align-items:center;gap:8px;font:12px/20px system-ui;color:#ddd}
+.lcx-media{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%;margin:16px 0 4px;font-family:var(--dsw-font-family,inherit);color:var(--dsw-alias-label-primary,inherit)}
+.lcx-media *{box-sizing:border-box}
+.lcx-media[hidden]{display:none}
+.lcx-media-rail{position:relative;min-width:0;--lcx-h:136px}
+.lcx-media-rail[data-count="1"]{--lcx-h:220px}
+.lcx-media-rail[data-count="2"]{--lcx-h:176px}
+.lcx-media-track{--lcx-fade-l:0px;--lcx-fade-r:0px;display:flex;gap:8px;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--lcx-fade-l),#000 calc(100% - var(--lcx-fade-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--lcx-fade-l),#000 calc(100% - var(--lcx-fade-r)),transparent 100%)}
+.lcx-media-track::-webkit-scrollbar{display:none}
+.lcx-media-rail[data-more-left] .lcx-media-track{--lcx-fade-l:40px}
+.lcx-media-rail[data-more-right] .lcx-media-track{--lcx-fade-r:40px}
+.lcx-media-tile{position:relative;flex:none;height:var(--lcx-h);aspect-ratio:var(--lcx-ar,4/3);max-width:100%;margin:0;padding:0;scroll-snap-align:start;border-radius:var(--dsw-radius-md,12px);overflow:hidden;background:var(--dsw-alias-bg-skeleton,#0000000a)}
+.lcx-media-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px var(--dsw-alias-border-l2,#0000001a);pointer-events:none}
+.lcx-media-tile[data-state="loading"]{background:linear-gradient(100deg,var(--dsw-alias-bg-skeleton,#0000000a) 30%,var(--dsw-alias-interactive-bg-hover,#2631480f) 50%,var(--dsw-alias-bg-skeleton,#0000000a) 70%) 0 0/300% 100%;animation:lcx-media-shimmer 1.4s ease-in-out infinite}
+@keyframes lcx-media-shimmer{from{background-position:100% 0}to{background-position:0 0}}
+.lcx-media-open{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;cursor:zoom-in}
+.lcx-media-open:disabled{cursor:default}
+.lcx-media-open img{display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;object-fit:cover;opacity:0;transition:opacity .25s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
+.lcx-media-tile[data-state="loaded"] .lcx-media-open img{opacity:1}
+.lcx-media-tile[data-fit="contain"] .lcx-media-open img{object-fit:contain}
+.lcx-media-tile[data-state="loaded"]:hover .lcx-media-open img{transform:scale(1.04)}
+.lcx-media-fail{position:absolute;inset:0;display:grid;place-items:center;color:var(--dsw-alias-label-tertiary,#8a93a6)}
+.lcx-media-fail svg{width:22px;height:22px}
+.lcx-media-chip{position:absolute;left:6px;bottom:6px;z-index:1;max-width:calc(100% - 12px);overflow:hidden;padding:2px 8px;border-radius:var(--dsw-radius-xs,6px);background:#00000073;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;opacity:0;transform:translateY(3px);transition:opacity .18s ease,transform .18s ease}
+a.lcx-media-chip:hover{text-decoration:underline;text-underline-offset:2px}
+.lcx-media-tile:hover .lcx-media-chip,.lcx-media-tile:focus-within .lcx-media-chip,.lcx-media-tile[data-state="failed"] .lcx-media-chip{opacity:1;transform:none}
+.lcx-media-tile[data-state="failed"] .lcx-media-chip{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--dsw-alias-label-tertiary,#8a93a6)}
+.lcx-media-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:999px;background:var(--dsw-alias-bg-layer-1,#fff);box-shadow:0 0 0 .5px var(--dsw-alias-border-l3,#0000001f),0 2px 10px #00000021;color:var(--dsw-alias-label-primary,#1f2430);cursor:pointer;opacity:0;transition:opacity .15s ease}
 .lcx-media-nav[hidden]{display:none}
-.lcx-media-nav button{width:30px;height:30px;border:0;border-radius:9px;background:#ffffff14;color:white;font-size:20px;cursor:pointer}
-.lcx-media-nav button:disabled{opacity:.3;cursor:default}
-.lcx-media-nav button:focus-visible,.lcx-media-toggle:focus-visible{outline:2px solid #648dfb;outline-offset:2px}
-.lcx-media-dialog a{display:block;width:fit-content;margin:12px auto 0;color:#c6d7ff;font:12px/18px system-ui;text-decoration:none}
-@media(prefers-reduced-motion:reduce){.lcx-media-thumb{transition:none;transform:none}}
+.lcx-media-nav[data-dir="prev"]{left:8px}
+.lcx-media-nav[data-dir="next"]{right:8px}
+.lcx-media-nav svg{width:16px;height:16px}
+.lcx-media-rail:hover .lcx-media-nav,.lcx-media-nav:focus-visible{opacity:1}
+.lcx-media-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px;min-width:0}
+.lcx-media-video{display:flex;align-items:center;gap:10px;width:100%;min-width:0;margin:0;padding:6px 12px 6px 6px;border:0;border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-interactive-bg-hover,#2631480f);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s ease}
+.lcx-media-video:hover{background:var(--dsw-alias-interactive-bg-active,#26314817)}
+.lcx-media-play{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--dsw-alias-label-primary,#1f2430);color:var(--dsw-alias-label-primary-foreground,#fff);transition:transform .15s ease}
+.lcx-media-video:hover .lcx-media-play{transform:scale(1.06)}
+.lcx-media-play svg{width:16px;height:16px;margin-left:2px}
+.lcx-media-video-text{display:flex;flex-direction:column;min-width:0}
+.lcx-media-video-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:19px;font-weight:500;color:var(--dsw-alias-label-primary,inherit)}
+.lcx-media-video-sub{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:17px;color:var(--dsw-alias-label-tertiary,#8a93a6)}
+.lcx-media-player{grid-column:1/-1;position:relative;width:min(100%,640px);aspect-ratio:16/9;border-radius:var(--dsw-radius-md,12px);overflow:hidden;background:#000}
+.lcx-media-player video{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;object-fit:contain;background:#000}
+.lcx-media-player-close{position:absolute;top:8px;right:8px;z-index:1;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer}
+.lcx-media-player-close svg,.lcx-media-close svg{width:14px;height:14px}
+.lcx-media-player-fail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;color:#ffffffd9;font-size:13px;line-height:20px;text-align:center}
+.lcx-media-player-fail a{color:#fff;text-decoration:underline;text-underline-offset:3px}
+.lcx-media-open:focus-visible,.lcx-media-chip:focus-visible,.lcx-media-nav:focus-visible,.lcx-media-video:focus-visible,.lcx-media-player-close:focus-visible,.lcx-media-close:focus-visible,.lcx-media-dialog a:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-link,#416de0));outline-offset:2px}
+.lcx-media-open:focus-visible{outline-offset:-2px}
+.lcx-media-dialog{position:fixed;inset:0;box-sizing:border-box;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:48px;border:0;overflow:hidden;background:var(--dsw-alias-bg-mask-1,#0009);-webkit-backdrop-filter:var(--dsw-mask-blur,blur(8px));backdrop-filter:var(--dsw-mask-blur,blur(8px));color:var(--dsw-alias-label-primary,inherit);font-family:var(--dsw-font-family,inherit)}
+.lcx-media-dialog[open]{display:grid;place-items:center}
+.lcx-media-dialog::backdrop{background:transparent}
+.lcx-media-dialog-body{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;max-width:min(100%,1600px);max-height:100%}
+.lcx-media-dialog img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;border-radius:var(--dsw-radius-md,12px);box-shadow:var(--dsw-elevation-prominent,0 10px 40px #0005)}
+.lcx-media-dialog-fail{display:grid;place-items:center;min-width:min(320px,100%);min-height:160px;padding:24px;border-radius:var(--dsw-radius-md,12px);background:var(--dsw-alias-bg-layer-1,#fff);color:var(--dsw-alias-label-secondary,#5a6478);font-size:13px;line-height:20px}
+.lcx-media-dialog-bar{display:flex;align-items:center;gap:14px;max-width:100%;padding:6px 16px;border-radius:999px;background:var(--dsw-alias-bg-layer-1,#fff);box-shadow:0 0 0 .5px var(--dsw-alias-border-l3,#0000001f);font-size:12px;line-height:20px}
+.lcx-media-dialog-caption{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--dsw-alias-label-secondary,#5a6478)}
+.lcx-media-dialog-bar a{flex:none;color:var(--dsw-alias-link,#416de0);text-decoration:none}
+.lcx-media-dialog-bar a:hover{text-decoration:underline;text-underline-offset:3px}
+.lcx-media-close{position:fixed;top:20px;right:20px;z-index:1;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:var(--dsw-alias-bg-layer-1,#fff);box-shadow:0 0 0 .5px var(--dsw-alias-border-l3,#0000001f);color:var(--dsw-alias-label-primary,#1f2430);cursor:pointer}
+@media(max-width:520px){.lcx-media-rail{--lcx-h:112px}.lcx-media-rail[data-count="1"]{--lcx-h:184px}.lcx-media-rail[data-count="2"]{--lcx-h:136px}.lcx-media-dialog{padding:16px}.lcx-media-close{top:12px;right:12px}}
+@media(hover:none){.lcx-media-chip{opacity:1;transform:none}.lcx-media-nav{display:none}}
+@media(prefers-reduced-motion:reduce){.lcx-media-track{scroll-behavior:auto}.lcx-media-tile[data-state="loading"]{animation:none}.lcx-media-open img,.lcx-media-chip,.lcx-media-nav,.lcx-media-video,.lcx-media-play{transition:none}.lcx-media-tile[data-state="loaded"]:hover .lcx-media-open img{transform:none}}
 `;
-  var VISIBLE_MEDIA_LIMIT = 4;
-  var mediaKey = (item) => item.kind === "video" ? item.url : item.url.replace(/#.*$/, "");
-  function previewItems(items) {
+  var nativeMarkdownImageCss = `
+[data-chat-flow-kind="assistant-step"] p>button:has(>img:only-child){display:block;width:fit-content;max-width:100%;margin:4px 0 8px}
+`;
+  var ICON_PLAY = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" fill="currentColor"/></svg>';
+  var ICON_CLOSE = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3.5 3.5l9 9m0-9l-9 9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+  var ICON_BROKEN = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M3.5 16l4.5-4.5 3 3 2.5-2.5 7 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="9" r="1.3" fill="currentColor"/></svg>';
+  var ICON_PREV = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M10 3.5 5.5 8l4.5 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  var ICON_NEXT = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  var TILE_ASPECT_MIN = 0.5;
+  var TILE_ASPECT_MAX = 2.2;
+  var imageKey = (url) => url.replace(/#.*$/, "");
+  var hostOf = (url) => {
+    try {
+      return new URL(url).hostname.replace(/^www\./, "");
+    } catch {
+      return url;
+    }
+  };
+  var fileNameOf = (url) => {
+    try {
+      const name = decodeURIComponent(new URL(url).pathname.split("/").filter(Boolean).at(-1) ?? "");
+      return name || hostOf(url);
+    } catch {
+      return url;
+    }
+  };
+  function railImages(items) {
+    const seen = /* @__PURE__ */ new Set();
+    const result = [];
+    for (const item of [...items.filter((value) => value.structured === true), ...items.filter((value) => value.structured !== true)]) {
+      if (item.kind !== "image") continue;
+      const key = imageKey(item.url);
+      if (seen.has(key)) continue;
+      seen.add(key);
+      result.push(item);
+    }
+    return result;
+  }
+  function videoItems(items) {
     const groups = /* @__PURE__ */ new Map();
     for (const item of items) {
-      if (item.kind === "page") continue;
+      if (item.kind !== "video") continue;
       const url = new URL(item.url);
-      const identity = item.kind === "video" ? JSON.stringify(["video", url.origin, url.pathname.replace(/\.(mp4|webm|ogv)$/i, ""), url.search, url.hash]) : JSON.stringify(["image", mediaKey(item)]);
+      const identity = JSON.stringify([url.origin, url.pathname.replace(/\.(mp4|webm|ogv)$/i, ""), url.search, url.hash]);
       const group = groups.get(identity) ?? [];
       if (!group.some((value) => value.url === item.url)) group.push(item);
       groups.set(identity, group);
     }
-    const result = /* @__PURE__ */ new Map();
     const priority = (url) => ({ mp4: 0, webm: 1, ogv: 2 })[new URL(url).pathname.split(".").at(-1).toLowerCase()] ?? 3;
-    for (const group of groups.values()) {
+    return [...groups.values()].map((group) => {
       group.sort((a, b) => priority(a.url) - priority(b.url));
-      const item = { ...group[0], sources: group.map((value) => value.url) };
-      for (const value of group) result.set(mediaKey(value), item);
-    }
-    return result;
+      return { ...group[0], sources: group.map((value) => value.url) };
+    });
   }
   var activeDialogByDocument = /* @__PURE__ */ new WeakMap();
-  function supportsInlineMediaDom(marker) {
+  function inlineMediaAnswer(marker) {
     const row = marker.closest('[data-chat-flow-kind="lcx-search-media"]');
-    const answer = row?.previousElementSibling;
     const ElementClass = marker.ownerDocument.defaultView?.HTMLElement;
-    return Boolean(
-      ElementClass && answer instanceof ElementClass && row?.parentElement === answer.parentElement && answer.dataset.chatFlowKind === "assistant-step" && typeof answer.dataset.chatTurn === "string" && answer.dataset.chatTurn !== "" && answer.dataset.chatTurn === row?.dataset.chatTurn
-    );
+    if (!ElementClass || !row || !row.dataset.chatTurn) return null;
+    const group = row.closest("[data-chat-group-key][data-step-process]");
+    const column = group?.parentElement;
+    if (!group || !(column instanceof ElementClass) || !column.hasAttribute("data-chat-flow") || group.dataset.chatTurn !== row.dataset.chatTurn) return null;
+    let answer = null;
+    for (const child of column.children) {
+      if (child === group) break;
+      if (child instanceof ElementClass && child.dataset.chatFlowKind === "assistant-step" && child.dataset.chatGroupPart === "response" && child.dataset.chatTurn === row.dataset.chatTurn) {
+        answer = child;
+      }
+    }
+    return answer;
   }
-  function installInlineMedia(marker, items, labels) {
-    if (items.length === 0 || !supportsInlineMediaDom(marker)) return () => {
+  function installInlineMedia(marker, items, labels, host = {}) {
+    const resolvedAnswer = inlineMediaAnswer(marker);
+    const images = railImages(items), videos = videoItems(items);
+    if (!resolvedAnswer || images.length === 0 && videos.length === 0) return () => {
     };
-    const row = marker.closest('[data-chat-flow-kind="lcx-search-media"]');
-    const answer = row.previousElementSibling;
+    const answer = resolvedAnswer;
     const doc = marker.ownerDocument;
-    const wanted = previewItems(items.filter((item) => item.structured !== true));
-    const structured = [...new Set(previewItems(items.filter((item) => item.structured === true)).values())];
-    const previews = /* @__PURE__ */ new Map();
-    const strips = /* @__PURE__ */ new Map();
-    const entries = /* @__PURE__ */ new Map();
-    let expanded = false;
-    const toggle = doc.createElement("button");
-    toggle.type = "button";
-    toggle.className = "lcx-media-toggle";
-    const toggleRow = doc.createElement("span");
-    toggleRow.className = "lcx-media-toggle-row";
-    toggleRow.append(toggle);
-    toggle.onclick = () => {
-      expanded = !expanded;
-      updateVisibility();
-      toggle.focus({ preventScroll: true });
-    };
-    const failed = /* @__PURE__ */ new Set();
+    const win = doc.defaultView;
+    const cleanups = [];
     let disposed = false;
     let frame = 0;
     let ownedClose;
-    function orderedEntries() {
-      return [...answer.querySelectorAll(".lcx-inline-media")].flatMap((preview) => {
-        const entry = entries.get(preview);
-        return entry ? [{ preview, ...entry }] : [];
-      });
-    }
-    function updateVisibility() {
-      const all = orderedEntries();
-      all.forEach((entry, index) => {
-        const hidden = !expanded && index >= VISIBLE_MEDIA_LIMIT;
-        if (entry.preview.hidden !== hidden) entry.preview.hidden = hidden;
-        if (!hidden) {
-          entry.load?.();
-          const saved = entries.get(entry.preview);
-          if (saved) saved.load = void 0;
-        }
-      });
-      if (all.length <= VISIBLE_MEDIA_LIMIT) {
-        toggleRow.remove();
-        return;
-      }
-      const text = expanded ? labels.less : labels.more.replace("{count}", String(all.length - VISIBLE_MEDIA_LIMIT));
-      if (toggle.textContent !== text) toggle.textContent = text;
-      const aria = String(expanded);
-      if (toggle.getAttribute("aria-expanded") !== aria) toggle.setAttribute("aria-expanded", aria);
-      const parent = all[expanded ? all.length - 1 : VISIBLE_MEDIA_LIMIT - 1].preview.parentElement;
-      if (toggleRow.parentElement !== parent || toggleRow !== parent.lastElementChild) parent.append(toggleRow);
-    }
-    function removePreview(preview) {
-      const strip = preview.parentElement;
-      entries.get(preview)?.cleanup();
-      entries.delete(preview);
-      preview.remove();
-      if (strip?.classList.contains("lcx-media-strip") && !strip.childElementCount) {
-        strip.remove();
-        for (const [block, value] of strips) if (value === strip) strips.delete(block);
-      }
-    }
-    function placePreview(anchor, preview) {
-      const block = anchor.closest("p,li,td,th,figcaption");
-      const owner = block && answer.contains(block) ? block : anchor;
-      let strip = strips.get(owner);
-      if (!strip?.isConnected) {
-        strip = doc.createElement("span");
-        strip.className = "lcx-media-strip";
-        if (owner === anchor) anchor.after(strip);
-        else owner.append(strip);
-        strips.set(owner, strip);
-      }
-      strip.append(preview);
-    }
-    function open(item, trigger, fail) {
+    const token = Math.random().toString(36).slice(2);
+    answer.dataset.lcxMediaOwner = token;
+    for (const stale of [...answer.children]) if (stale.classList.contains("lcx-media")) stale.remove();
+    const root = doc.createElement("div");
+    root.className = "lcx-media";
+    root.dataset.lcxMedia = "";
+    function openDialog(item, trigger, description) {
       activeDialogByDocument.get(doc)?.();
       const dialog = doc.createElement("dialog");
       dialog.className = "lcx-media-dialog";
-      dialog.setAttribute("aria-label", item.kind === "image" ? labels.image : labels.video);
+      dialog.setAttribute("aria-label", labels.imageDialog);
+      dialog.dataset.kind = "image";
+      const body = doc.createElement("div");
+      body.className = "lcx-media-dialog-body";
       const close = doc.createElement("button");
       close.type = "button";
       close.className = "lcx-media-close";
-      close.textContent = "\xD7";
+      close.innerHTML = ICON_CLOSE;
       close.setAttribute("aria-label", labels.close);
-      let media = doc.createElement(item.kind === "image" ? "img" : "video");
-      if (media instanceof HTMLImageElement) {
-        media.alt = trigger.getAttribute("aria-label") ?? labels.image;
-        media.referrerPolicy = "no-referrer";
-      } else {
-        media.controls = true;
-        media.playsInline = true;
-        media.preload = "none";
-      }
-      if (media instanceof HTMLVideoElement) media.src = item.url;
+      const bar = doc.createElement("div");
+      bar.className = "lcx-media-dialog-bar";
+      const caption = doc.createElement("span");
+      caption.className = "lcx-media-dialog-caption";
+      caption.textContent = description;
+      caption.title = description;
       const source = doc.createElement("a");
       source.href = item.sourceUrl ?? item.url;
       source.target = "_blank";
       source.rel = "noopener noreferrer";
       source.textContent = labels.source;
+      bar.append(caption, source);
+      let media;
       let closed = false;
-      let sourceIndex = 0;
-      let previous;
-      let next;
+      const image = doc.createElement("img");
+      image.alt = description;
+      image.referrerPolicy = "no-referrer";
+      image.src = item.url;
+      image.onerror = () => {
+        if (closed) return;
+        const fail = doc.createElement("div");
+        fail.className = "lcx-media-dialog-fail";
+        fail.textContent = labels.failed;
+        media.onerror = null;
+        media.replaceWith(fail);
+        media = fail;
+      };
+      media = image;
       const cleanup = () => {
         if (closed) return;
         closed = true;
@@ -459,15 +479,7 @@
         dialog.oncancel = null;
         dialog.onclick = null;
         dialog.onkeydown = null;
-        previous && (previous.onclick = null);
-        next && (next.onclick = null);
-        media.onload = null;
         media.onerror = null;
-        if (media instanceof HTMLVideoElement) {
-          media.pause();
-          media.removeAttribute("src");
-          media.load();
-        }
         dialog.remove();
         if (activeDialogByDocument.get(doc) === cleanup) activeDialogByDocument.delete(doc);
         if (ownedClose === cleanup) ownedClose = void 0;
@@ -481,253 +493,316 @@
         cleanup();
       };
       dialog.onclick = (event) => {
-        if (event.target === dialog) {
-          const rect = dialog.getBoundingClientRect();
-          if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) cleanup();
-        }
+        if (event.target === dialog) cleanup();
       };
-      media.onerror = () => {
-        if (closed) return;
-        if (media instanceof HTMLVideoElement && sourceIndex + 1 < item.sources.length) {
-          sourceIndex += 1;
-          media.src = item.sources[sourceIndex];
-          source.href = item.sources[sourceIndex];
-          media.load();
-          void media.play().catch(() => {
-          });
-          return;
+      dialog.onkeydown = (event) => {
+        if (event.key !== "Tab") return;
+        const focusable = [...dialog.querySelectorAll("button:not([disabled]),a[href]")];
+        if (focusable.length === 0) return;
+        const first = focusable[0], last = focusable[focusable.length - 1];
+        const active = doc.activeElement;
+        if (event.shiftKey && active === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && active === last) {
+          event.preventDefault();
+          first.focus();
         }
-        cleanup();
-        fail();
       };
-      dialog.append(close, media, source);
+      body.append(media, bar);
+      dialog.append(body, close);
       doc.body.append(dialog);
-      if (item.kind === "image") {
-        const nav = doc.createElement("span");
-        nav.className = "lcx-media-nav";
-        const previousButton = doc.createElement("button"), nextButton = doc.createElement("button"), counter = doc.createElement("span");
-        previous = previousButton;
-        next = nextButton;
-        previousButton.type = nextButton.type = "button";
-        previousButton.textContent = "\u2039";
-        nextButton.textContent = "\u203A";
-        previousButton.setAttribute("aria-label", labels.previous);
-        nextButton.setAttribute("aria-label", labels.next);
-        counter.setAttribute("aria-live", "polite");
-        nav.append(previousButton, counter, nextButton);
-        dialog.append(nav);
-        let currentKey = mediaKey(item);
-        const images = () => orderedEntries().filter((entry) => entry.item.kind === "image");
-        const select = (index) => {
+      dialog.showModal();
+      close.focus();
+    }
+    function openImage(item, trigger, description) {
+      activeDialogByDocument.get(doc)?.();
+      if (host.openImage) {
+        let closed = false;
+        let dispose = null;
+        const cleanup = () => {
           if (closed) return;
-          const list = images(), entry = list[index];
-          if (!entry) return;
-          currentKey = mediaKey(entry.item);
-          const image = doc.createElement("img");
-          image.alt = entry.button.getAttribute("aria-label") ?? labels.image;
-          image.referrerPolicy = "no-referrer";
-          image.onerror = () => {
-            if (closed || media !== image) return;
-            entry.fail();
-            const remaining = images();
-            if (!remaining.length) {
-              cleanup();
-              return;
-            }
-            select(Math.min(index, remaining.length - 1));
-          };
-          media.onerror = null;
-          media.replaceWith(image);
-          media = image;
-          source.href = entry.item.sourceUrl ?? entry.item.url;
-          image.src = entry.item.url;
-          counter.textContent = `${index + 1} / ${list.length}`;
-          previousButton.disabled = index === 0;
-          nextButton.disabled = index === list.length - 1;
-          nav.hidden = list.length < 2;
-        };
-        const move = (offset) => {
-          const list = images();
-          select(list.findIndex((entry) => mediaKey(entry.item) === currentKey) + offset);
-        };
-        previousButton.onclick = () => move(-1);
-        nextButton.onclick = () => move(1);
-        dialog.onkeydown = (event) => {
-          if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-            event.preventDefault();
-            move(event.key === "ArrowLeft" ? -1 : 1);
-          }
+          closed = true;
+          dispose?.();
+          if (activeDialogByDocument.get(doc) === cleanup) activeDialogByDocument.delete(doc);
+          if (ownedClose === cleanup) ownedClose = void 0;
+          if (trigger.isConnected) trigger.focus({ preventScroll: true });
         };
-        select(images().findIndex((entry) => mediaKey(entry.item) === mediaKey(item)));
+        dispose = host.openImage({ src: item.url, alt: description, labels: { dialog: labels.imageDialog, close: labels.close }, onClose: cleanup });
+        if (dispose) {
+          ownedClose = cleanup;
+          activeDialogByDocument.set(doc, cleanup);
+          return;
+        }
+        closed = true;
       }
-      dialog.showModal();
-      close.focus();
-      if (media instanceof HTMLVideoElement) void media.play().catch(() => {
-      });
+      openDialog(item, trigger, description);
     }
-    function createPreview(item, description, forget) {
-      const key = mediaKey(item);
-      if (failed.has(key)) return void 0;
-      const preview = doc.createElement("span");
-      preview.className = "lcx-inline-media";
-      preview.dataset.url = item.url;
-      if (item.structured) preview.dataset.structured = "";
-      const button = doc.createElement("button");
-      button.type = "button";
-      button.className = "lcx-media-thumb";
-      const label = item.kind === "image" ? labels.image : labels.video;
-      button.setAttribute("aria-label", label + " \xB7 " + description);
-      let thumbnail;
-      const fail = () => {
-        failed.add(key);
-        removePreview(preview);
-        forget?.();
-        updateVisibility();
+    if (images.length) {
+      const rail = doc.createElement("div");
+      rail.className = "lcx-media-rail";
+      rail.dataset.count = String(Math.min(images.length, 3));
+      const track = doc.createElement("ul");
+      track.className = "lcx-media-track";
+      track.setAttribute("role", "list");
+      track.setAttribute("aria-label", `${labels.heading} \xB7 ${images.length}`);
+      const makeNav = (dir) => {
+        const button = doc.createElement("button");
+        button.type = "button";
+        button.className = "lcx-media-nav";
+        button.dataset.dir = dir;
+        button.hidden = true;
+        button.tabIndex = -1;
+        button.setAttribute("aria-label", dir === "prev" ? labels.previous : labels.next);
+        button.innerHTML = dir === "prev" ? ICON_PREV : ICON_NEXT;
+        button.onclick = () => track.scrollBy({ left: (dir === "prev" ? -1 : 1) * Math.max(160, track.clientWidth * 0.8), behavior: "smooth" });
+        cleanups.push(() => {
+          button.onclick = null;
+        });
+        return button;
       };
-      const cleanup = () => {
-        button.onclick = null;
-        if (thumbnail) {
-          thumbnail.onload = null;
-          thumbnail.onerror = null;
-        }
-        entry.load = void 0;
+      const prev = makeNav("prev"), next = makeNav("next");
+      const updateEdges = () => {
+        if (disposed) return;
+        const max = track.scrollWidth - track.clientWidth;
+        const left = track.scrollLeft > 2, right = max - track.scrollLeft > 2;
+        rail.toggleAttribute("data-more-left", left);
+        rail.toggleAttribute("data-more-right", right);
+        prev.hidden = !left;
+        next.hidden = !right;
       };
-      const entry = { item, button, fail, cleanup };
-      const previewUrl = item.kind === "image" ? item.previewUrl ?? item.url : item.previewUrl ?? item.poster;
-      if (previewUrl) {
+      track.addEventListener("scroll", updateEdges, { passive: true });
+      cleanups.push(() => track.removeEventListener("scroll", updateEdges));
+      const Resize = win?.ResizeObserver;
+      if (Resize) {
+        const resize = new Resize(updateEdges);
+        resize.observe(track);
+        cleanups.push(() => resize.disconnect());
+      }
+      for (const item of images) {
+        const domain = hostOf(item.sourceUrl ?? item.url);
+        const description = item.caption ?? domain;
+        const tile = doc.createElement("li");
+        tile.className = "lcx-media-tile";
+        tile.dataset.state = "loading";
+        tile.dataset.url = item.url;
+        const open = doc.createElement("button");
+        open.type = "button";
+        open.className = "lcx-media-open";
+        open.setAttribute("aria-label", `${labels.image} \xB7 ${description}`);
+        if (item.caption) open.title = item.caption;
         const image = doc.createElement("img");
-        thumbnail = image;
         image.alt = "";
         image.loading = "lazy";
         image.decoding = "async";
         image.referrerPolicy = "no-referrer";
-        button.append(image);
-        button.tabIndex = -1;
-        button.style.visibility = "hidden";
-        preview.style.height = "1px";
-        preview.style.margin = "0";
-        const reveal = () => {
-          button.tabIndex = 0;
-          button.style.visibility = "";
-          preview.style.height = "";
-          preview.style.margin = "";
+        image.draggable = false;
+        open.append(image);
+        let source = item.previewUrl ?? item.url;
+        image.onload = () => {
+          if (tile.dataset.state !== "loading") return;
+          const ratio = image.naturalWidth > 0 && image.naturalHeight > 0 ? image.naturalWidth / image.naturalHeight : 0;
+          if (ratio) tile.style.setProperty("--lcx-ar", String(Math.min(TILE_ASPECT_MAX, Math.max(TILE_ASPECT_MIN, ratio))));
+          if (ratio && (ratio > TILE_ASPECT_MAX || ratio < TILE_ASPECT_MIN)) tile.dataset.fit = "contain";
+          tile.dataset.state = "loaded";
+          updateEdges();
         };
-        image.onload = reveal;
-        image.onerror = item.kind === "image" ? fail : () => {
+        image.onerror = () => {
+          if (source !== item.url) {
+            source = item.url;
+            image.src = source;
+            return;
+          }
+          image.onload = null;
+          image.onerror = null;
           image.remove();
-          reveal();
-        };
-        entry.load = () => {
-          image.src = previewUrl;
+          if (item.structured !== true) {
+            open.onclick = null;
+            open.onfocus = null;
+            tile.remove();
+            rail.dataset.count = String(Math.min(track.children.length, 3));
+            if (track.children.length === 0) {
+              rail.remove();
+              if (!root.querySelector(".lcx-media-videos")) root.hidden = true;
+            }
+            updateEdges();
+            return;
+          }
+          tile.dataset.state = "failed";
+          open.disabled = true;
+          open.onclick = null;
+          open.setAttribute("aria-label", `${labels.failed} \xB7 ${description}`);
+          open.title = labels.failed;
+          const fail = doc.createElement("span");
+          fail.className = "lcx-media-fail";
+          fail.innerHTML = ICON_BROKEN;
+          open.append(fail);
         };
-      }
-      if (item.kind === "video") {
-        button.dataset.video = "";
-        const play = doc.createElement("span");
-        play.className = "lcx-media-play-label";
-        play.textContent = labels.video;
-        button.append(play);
-        const format = item.sources.map((value) => /\.(mp4|webm|ogv)$/i.exec(new URL(value).pathname)?.[1]).filter(Boolean).join(" / ");
-        if (format) {
-          const badge = doc.createElement("span");
-          badge.className = "lcx-media-format";
-          badge.textContent = format.toUpperCase();
-          badge.setAttribute("aria-hidden", "true");
-          button.append(badge);
+        image.src = source;
+        open.onclick = () => openImage(item, open, description);
+        open.onfocus = () => tile.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+        const chip = item.sourceUrl ? doc.createElement("a") : doc.createElement("span");
+        chip.className = "lcx-media-chip";
+        chip.textContent = domain;
+        chip.title = item.caption ? `${item.caption} \xB7 ${domain}` : domain;
+        if (item.sourceUrl) {
+          const anchor = chip;
+          anchor.href = item.sourceUrl;
+          anchor.target = "_blank";
+          anchor.rel = "noopener noreferrer";
         }
+        tile.append(open, chip);
+        track.append(tile);
+        cleanups.push(() => {
+          open.onclick = null;
+          open.onfocus = null;
+          image.onload = null;
+          image.onerror = null;
+        });
       }
-      button.onclick = () => open(item, button, fail);
-      preview.append(button);
-      entries.set(preview, entry);
-      return preview;
+      rail.append(track, prev, next);
+      root.append(rail);
     }
-    for (const item of structured) {
-      const preview = createPreview(item, item.caption ?? new URL(item.url).hostname);
-      if (!preview) continue;
-      let strip = strips.get(answer);
-      if (!strip) {
-        strip = doc.createElement("span");
-        strip.className = "lcx-media-strip";
-        answer.append(strip);
-        strips.set(answer, strip);
+    if (videos.length) {
+      const section = doc.createElement("div");
+      section.className = "lcx-media-videos";
+      for (const item of videos) {
+        const name = fileNameOf(item.url);
+        const format = item.sources.map((value) => /\.(mp4|webm|ogv)$/i.exec(new URL(value).pathname)?.[1]).filter(Boolean).join(" / ").toUpperCase();
+        const card = doc.createElement("button");
+        card.type = "button";
+        card.className = "lcx-media-video";
+        card.dataset.url = item.url;
+        card.setAttribute("aria-label", `${labels.video} \xB7 ${name}`);
+        const play = doc.createElement("span");
+        play.className = "lcx-media-play";
+        play.setAttribute("aria-hidden", "true");
+        play.innerHTML = ICON_PLAY;
+        const text = doc.createElement("span");
+        text.className = "lcx-media-video-text";
+        const title = doc.createElement("span");
+        title.className = "lcx-media-video-title";
+        title.textContent = name;
+        title.title = item.url;
+        const sub = doc.createElement("span");
+        sub.className = "lcx-media-video-sub";
+        sub.textContent = [hostOf(item.url), format].filter(Boolean).join(" \xB7 ");
+        text.append(title, sub);
+        card.append(play, text);
+        let collapse;
+        card.onclick = () => {
+          const player = doc.createElement("div");
+          player.className = "lcx-media-player";
+          player.setAttribute("role", "group");
+          player.setAttribute("aria-label", `${labels.dialog} \xB7 ${name}`);
+          const video = doc.createElement("video");
+          video.controls = true;
+          video.playsInline = true;
+          video.preload = "none";
+          const poster = item.previewUrl ?? item.poster;
+          if (poster) video.poster = poster;
+          const close = doc.createElement("button");
+          close.type = "button";
+          close.className = "lcx-media-player-close";
+          close.innerHTML = ICON_CLOSE;
+          close.setAttribute("aria-label", labels.close);
+          let sourceIndex = 0;
+          let closed = false;
+          video.onerror = () => {
+            if (closed) return;
+            if (sourceIndex + 1 < item.sources.length) {
+              sourceIndex += 1;
+              video.src = item.sources[sourceIndex];
+              video.load();
+              void video.play().catch(() => {
+              });
+              return;
+            }
+            video.onerror = null;
+            video.pause();
+            video.removeAttribute("src");
+            video.load();
+            video.remove();
+            const fail = doc.createElement("div");
+            fail.className = "lcx-media-player-fail";
+            const message = doc.createElement("span");
+            message.textContent = labels.videoFailed;
+            const link = doc.createElement("a");
+            link.href = item.url;
+            link.target = "_blank";
+            link.rel = "noopener noreferrer";
+            link.textContent = labels.source;
+            fail.append(message, link);
+            player.append(fail);
+          };
+          collapse = (refocus = true) => {
+            if (closed) return;
+            closed = true;
+            video.onerror = null;
+            close.onclick = null;
+            player.onkeydown = null;
+            video.pause();
+            video.removeAttribute("src");
+            video.load();
+            player.replaceWith(card);
+            collapse = void 0;
+            if (refocus && card.isConnected) card.focus({ preventScroll: true });
+          };
+          close.onclick = () => collapse?.();
+          player.onkeydown = (event) => {
+            if (event.key === "Escape") {
+              event.preventDefault();
+              collapse?.();
+            }
+          };
+          video.src = item.url;
+          player.append(video, close);
+          card.replaceWith(player);
+          video.focus({ preventScroll: true });
+          void video.play().catch(() => {
+          });
+        };
+        section.append(card);
+        cleanups.push(() => {
+          collapse?.(false);
+          card.onclick = null;
+        });
       }
-      strip.append(preview);
+      root.append(section);
     }
-    const canPreview = (anchor) => !anchor.closest("pre,code,[data-streaming],[data-turn-process-inline],.lcx-inline-media");
-    function scan() {
+    answer.append(root);
+    const keepAttached = () => {
       frame = 0;
       if (disposed) return;
-      const candidates = /* @__PURE__ */ new Map();
-      const selected = /* @__PURE__ */ new Set();
-      for (const anchor of answer.querySelectorAll("a[href]")) {
-        if (!canPreview(anchor)) continue;
-        let url;
-        try {
-          url = new URL(anchor.href);
-        } catch {
-          continue;
-        }
-        if (!["http:", "https:"].includes(url.protocol) || url.username || url.password) continue;
-        const baseItem = wanted.get(url.href.replace(/#.*$/, ""));
-        const item = wanted.get(url.href) ?? (baseItem?.kind === "image" ? baseItem : void 0);
-        if (!item) continue;
-        const key = mediaKey(item);
-        if (selected.has(key) || failed.has(key)) continue;
-        selected.add(key);
-        candidates.set(anchor, { item, url });
-      }
-      for (const [anchor, current] of previews) {
-        if (!candidates.has(anchor) || !current.preview.isConnected || current.href !== anchor.href) {
-          removePreview(current.preview);
-          previews.delete(anchor);
-        }
-      }
-      for (const [anchor, { item, url }] of candidates) {
-        if (previews.has(anchor)) continue;
-        const preview = createPreview(
-          item,
-          anchor.textContent?.trim() || url.hostname,
-          () => previews.delete(anchor)
-        );
-        if (!preview) continue;
-        placePreview(anchor, preview);
-        previews.set(anchor, { preview, href: anchor.href });
+      if (answer.dataset.lcxMediaOwner !== token) {
+        root.remove();
+        return;
       }
-      updateVisibility();
-    }
-    scan();
+      if (root.parentElement !== answer || answer.lastElementChild !== root) answer.append(root);
+    };
     const observer = new MutationObserver(() => {
-      if (!disposed && !frame) frame = requestAnimationFrame(scan);
-    });
-    observer.observe(answer, {
-      attributes: true,
-      attributeFilter: ["data-streaming", "data-turn-process-inline", "href"],
-      childList: true,
-      subtree: true
+      if (!disposed && !frame) frame = requestAnimationFrame(keepAttached);
     });
+    observer.observe(answer, { childList: true });
     return () => {
       if (disposed) return;
-      disposed = true;
       observer.disconnect();
       if (frame) {
         cancelAnimationFrame(frame);
         frame = 0;
       }
       ownedClose?.();
-      toggle.onclick = null;
-      toggleRow.remove();
-      for (const preview of [...entries.keys()]) removePreview(preview);
-      previews.clear();
-      entries.clear();
-      for (const strip of strips.values()) strip.remove();
-      strips.clear();
+      for (const cleanup of cleanups) cleanup();
+      cleanups.length = 0;
+      disposed = true;
+      if (answer.dataset.lcxMediaOwner === token) delete answer.dataset.lcxMediaOwner;
+      root.remove();
     };
   }
 
   // src/search-accounting.ts
   var object = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
   var count = (v) => typeof v === "number" && Number.isSafeInteger(v) && v >= 0;
-  var zeroBuckets = () => ({ uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 });
   var isSearchTool = (name) => name === "web_search" || name === "websearch_gpt_advanced";
   function auxiliaryUsageOf(event, toolName) {
     if (!object(event) || event.type !== "tool/result" || !object(event.data?.meta)) return [];
@@ -744,38 +819,6 @@
     }
     return result;
   }
-  function addUsage(base, records) {
-    if (!records.length) return base;
-    const next = { ...base };
-    for (const { usage: u } of records) {
-      next.uncachedInputTokens += u.inputTokens;
-      next.outputTokens += u.outputTokens;
-      next.cacheReadTokens += u.cacheReadTokens;
-      next.cacheWriteTokens += u.cacheWriteTokens;
-    }
-    if (!Object.values(next).every(count)) throw new Error("LCX search usage exceeds safe counters");
-    return next;
-  }
-  function mergeBuckets(base, extra) {
-    if (!object(base) || Object.values(extra).every((n) => n === 0)) return base;
-    const next = { ...base };
-    for (const key of Object.keys(extra)) {
-      if (count(base[key])) next[key] = base[key] + extra[key];
-    }
-    return next;
-  }
-  function addTurnUsage(base, records) {
-    if (!object(base) || !records.length || !count(base.totalTokens)) return base;
-    const next = mergeBuckets(base, addUsage(zeroBuckets(), records));
-    next.totalTokens = base.totalTokens + records.reduce((n, r) => n + r.usage.totalTokens, 0);
-    delete next.reasoningTokens;
-    if (Array.isArray(base.routes)) {
-      const routes = /* @__PURE__ */ new Map();
-      for (const r of [...base.routes, ...records]) routes.set(`${r.provider}\0${r.model}`, { provider: r.provider, model: r.model });
-      next.routes = [...routes.values()];
-    }
-    return next;
-  }
 
   // src/client/search-usage-ui.ts
   var searchUsageDefinition = {
@@ -803,64 +846,70 @@
       return scope === "turn" && s?.complete ? { kind: "turn", turn: s.turn, key: "lcx-search-usage", value: s.records } : null;
     }
   };
+  function tokenCount(value) {
+    return String(value);
+  }
+  function recordsTotal(records) {
+    let total = 0;
+    for (const record2 of records) {
+      const value = record2.usage.totalTokens;
+      if (!Number.isSafeInteger(value) || value < 0) continue;
+      total += value;
+      if (!Number.isSafeInteger(total)) return 0;
+    }
+    return total;
+  }
+  function bucketsTotal(value) {
+    if (!object(value)) return 0;
+    let total = 0;
+    for (const key of ["uncachedInputTokens", "outputTokens", "cacheReadTokens", "cacheWriteTokens"]) {
+      const count2 = value[key];
+      if (!Number.isSafeInteger(count2) || count2 < 0) return 0;
+      total += count2;
+      if (!Number.isSafeInteger(total)) return 0;
+    }
+    return total;
+  }
+  function usageView(createElement, scope, total, t) {
+    if (total <= 0) return null;
+    const label = t?.(scope === "turn" ? "usageTurn" : "usageSession") ?? "Search usage";
+    return createElement("span", {
+      className: `lcx-search-usage lcx-search-usage-${scope}`,
+      "data-lcx-search-usage": scope,
+      title: `${label}: ${tokenCount(total)}`
+    }, `${label}: ${tokenCount(total)}`);
+  }
+  function TurnTailUsage({ turn, t }, createElement) {
+    if (!createElement) return null;
+    return usageView(createElement, "turn", recordsTotal(turn.data.get("lcx-search-usage") ?? []), t);
+  }
+  function SessionUsage({ useProjection, t }, createElement) {
+    if (!createElement) return null;
+    const extra = useProjection("lcxSearchUsage");
+    const auxiliary = object(extra) ? extra.auxiliary : void 0;
+    return usageView(createElement, "session", bucketsTotal(auxiliary), t);
+  }
   function installUsageSlots(slots, createElement) {
+    const registrations = [
+      [
+        { name: "conversation.chat.turnTail", id: "lcx-search-usage-turn", order: 0, locale: "lcx-codex" },
+        (props) => TurnTailUsage(props, createElement)
+      ],
+      [
+        { name: "conversation.composer.dock", id: "lcx-search-usage-session", order: 10, locale: "lcx-codex" },
+        (props) => SessionUsage(props, createElement)
+      ]
+    ];
     const cleanups = [];
-    for (const [name, key] of [
-      ["conversation.composer.dock", "stats"],
-      ["conversation.composer.bar", ""],
-      ["conversation.chat.node", "turn-tail"]
-    ]) {
-      let effect;
+    for (const [name, component] of registrations) {
       try {
-        effect = slots.inject(name, () => {
-          let entries;
-          try {
-            entries = slots.entriesOfSlot(name);
-          } catch {
-            return;
-          }
-          if (!Array.isArray(entries) || entries.length === 0) return;
-          const candidates = key === "" ? [entries[0]] : entries.filter((e) => e?.options?.id === key || e?.options?.key === key);
-          if (candidates.length !== 1) return;
-          const base = candidates[0], original = base?.component;
-          if (!base || typeof original !== "function" || !base.options || typeof base.options !== "object") return;
-          const descriptor = Object.getOwnPropertyDescriptor(base, "component");
-          if (descriptor && descriptor.set === void 0 && descriptor.writable === false) return;
-          function WithSearchUsage(props) {
-            if (key === "turn-tail") {
-              const location = props?.node?.location;
-              const records = (location?.kind === "turn" || location?.kind === "step") && location.turn?.data?.get ? location.turn.data.get("lcx-search-usage") : void 0;
-              if (!records?.length) return createElement(original, props);
-              return createElement(original, { ...props, node: { ...props.node, data: { ...props.node.data, tokenUsage: addTurnUsage(props.node.data.tokenUsage, records) } } });
-            }
-            if (typeof props?.useProjection !== "function") return createElement(original, props);
-            const extra = props.useProjection("lcxSearchUsage");
-            const breakdown = props.useProjection("contextBreakdown");
-            const useProjection = (projection) => {
-              const value = props.useProjection(projection);
-              if (projection === "tokenUsage" && extra?.auxiliary) return mergeBuckets(value, extra.auxiliary);
-              if (projection === "contextPressure" && extra?.aggregateContext && object(breakdown)) {
-                const tokens = breakdown.systemTokens + breakdown.toolsTokens + breakdown.messageTokens;
-                if (Number.isSafeInteger(tokens) && tokens >= 0 && object(value)) return { ...value, pressureTokens: tokens, projectedTokens: tokens };
-              }
-              return value;
-            };
-            return createElement(original, { ...props, useProjection });
-          }
-          try {
-            base.component = WithSearchUsage;
-          } catch {
-            return;
-          }
-          if (base.component !== WithSearchUsage) return;
-          return () => {
-            if (base.component === WithSearchUsage) base.component = original;
-          };
+        const effect = slots.inject(name.name, () => {
+          const dispose = slots.register(name, component);
+          return typeof dispose === "function" ? dispose : void 0;
         });
+        if (typeof effect === "function") cleanups.push(effect);
       } catch {
-        continue;
       }
-      if (typeof effect === "function") cleanups.push(effect);
     }
     return () => {
       for (const dispose of cleanups.reverse()) dispose();
@@ -894,7 +943,7 @@
       const DEFAULTS = Object.fromEntries(
         FIELDS.map((field) => [field, false])
       );
-      const css = `.lcx-card{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;list-style:none}.lcx-head{width:100%;display:flex;justify-content:space-between;padding:14px 16px;border:0;background:transparent;color:inherit}.lcx-body{border-top:1px solid var(--dsw-alias-border-l2);padding:12px 16px}.lcx-row{display:flex;gap:9px;padding:8px 0}.lcx-row small,.lcx-help{display:block;font-size:12px;line-height:17px;color:var(--dsw-alias-label-tertiary)}.lcx-group{border-top:1px solid var(--dsw-alias-border-l2);margin-top:10px;padding-top:14px}.lcx-group strong{font-size:14px}.lcx-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.lcx-foot button{padding:6px 12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:inherit}` + inlineMediaCss;
+      const css = `.lcx-card{border:1px solid var(--dsw-alias-border-l2);border-radius:8px;list-style:none}.lcx-head{width:100%;display:flex;justify-content:space-between;padding:14px 16px;border:0;background:transparent;color:inherit}.lcx-body{border-top:1px solid var(--dsw-alias-border-l2);padding:12px 16px}.lcx-row{display:flex;gap:9px;padding:8px 0}.lcx-row small,.lcx-help{display:block;font-size:12px;line-height:17px;color:var(--dsw-alias-label-tertiary)}.lcx-group{border-top:1px solid var(--dsw-alias-border-l2);margin-top:10px;padding-top:14px}.lcx-group strong{font-size:14px}.lcx-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.lcx-foot button{padding:6px 12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:inherit}.lcx-search-usage{display:inline-flex;align-items:center;gap:4px;margin:2px 0;color:var(--dsw-alias-label-tertiary);font:12px/18px system-ui}.lcx-search-usage-session{padding:0 4px}.lcx-search-usage-turn{padding:0 6px}` + inlineMediaCss + nativeMarkdownImageCss;
       function mountCss() {
         if (typeof document === "undefined") return () => {
         };
@@ -910,6 +959,7 @@
       const copy = {
         zh: {
           title: "Responses / Codex \u80FD\u529B",
+          summary: "GPT Responses route \u4E0E\u641C\u7D22\u80FD\u529B",
           desc: "LCX \u8DDF\u968F DSH \u5F53\u524D\u4F1A\u8BDD\u9009\u62E9\u7684 GPT Responses route\uFF1B\u6A21\u578B\u3001endpoint \u548C credential \u7EE7\u7EED\u53EA\u7531 DSH \u7BA1\u7406\u3002",
           enabled: "\u542F\u7528 LCX\uFF08\u63A5\u7BA1\u5F53\u524D GPT Responses \u4F1A\u8BDD\uFF09",
           enabledHelp: "\u6B64\u5F00\u5173\u4EC5\u63A5\u7BA1 GPT Responses \u4F1A\u8BDD\uFF1BGrok \u539F\u751F\u641C\u7D22\u7531\u4E0B\u65B9\u72EC\u7ACB\u5F00\u5173\u63A7\u5236\uFF0C\u5176\u4ED6\u975E GPT \u6A21\u578B\u7EE7\u7EED\u4F7F\u7528 DSH \u539F\u751F\u8DEF\u5F84\u3002",
@@ -920,25 +970,20 @@
           alpha: "\u542F\u7528 Alpha command\uFF08websearch_alpha\uFF09",
           alphaHelp: "\u4EC5 capability probe \u5BF9\u5F53\u524D route/schema \u9A8C\u8BC1\u901A\u8FC7\u540E\u624D\u771F\u6B63\u6CE8\u518C\u3002",
           mediaPreview: "\u641C\u7D22\u5A92\u4F53\u9884\u89C8",
-          mediaPreviewHelp: "\u5728\u56DE\u7B54\u4E0B\u663E\u793A\u53EF\u7528\u7684\u641C\u7D22\u56FE\u7247\u6216\u76F4\u94FE\u9884\u89C8\uFF0C\u70B9\u51FB\u653E\u5927\u6216\u64AD\u653E\uFF1B\u4E0D\u53EF\u9884\u89C8\u65F6\u4FDD\u7559\u539F\u59CB\u56DE\u7B54\u4E0E\u7F51\u9875\u94FE\u63A5\u3002\u6B64\u8BBE\u7F6E\u53EA\u6539\u53D8\u754C\u9762\u663E\u793A\u3002",
-          mediaTitle: "\u5A92\u4F53\u9884\u89C8",
+          mediaPreviewHelp: "\u5728\u56DE\u7B54\u4E0B\u65B9\u663E\u793A\u641C\u7D22\u8FD4\u56DE\u7684\u56FE\u7247\u3001\u56DE\u7B54\u91CC\u7684\u56FE\u7247\u76F4\u94FE\uFF0C\u4EE5\u53CA\u53EF\u76F4\u63A5\u64AD\u653E\u7684\u89C6\u9891\u76F4\u94FE\uFF1B\u70B9\u51FB\u653E\u5927\u6216\u64AD\u653E\u3002\u56DE\u7B54\u6B63\u6587\u91CC\u7684 Markdown \u56FE\u7247\u7531 DSH \u539F\u751F\u6E32\u67D3\uFF0C\u666E\u901A\u7F51\u9875\u94FE\u63A5\u4FDD\u6301\u4E3A\u94FE\u63A5\u3002\u6B64\u8BBE\u7F6E\u53EA\u6539\u53D8\u754C\u9762\u663E\u793A\u3002",
+          mediaTitle: "\u89C6\u9891\u9884\u89C8",
+          mediaImagePreview: "\u56FE\u7247\u9884\u89C8",
           mediaPlay: "\u64AD\u653E\u89C6\u9891",
           mediaEnlarge: "\u653E\u5927\u56FE\u7247",
           mediaClose: "\u5173\u95ED\u9884\u89C8",
-          mediaMore: "\u5C55\u5F00\u5176\u4F59 {count} \u9879",
-          mediaLess: "\u6536\u8D77\u9884\u89C8",
-          mediaPrevious: "\u4E0A\u4E00\u5F20",
-          mediaNext: "\u4E0B\u4E00\u5F20",
-          mediaResolve: "\u52A0\u8F7D\u7D20\u6750\u9884\u89C8",
-          mediaLoading: "\u6B63\u5728\u83B7\u53D6\u5A92\u4F53\u2026",
-          mediaUnavailable: "\u6682\u4E0D\u80FD\u9884\u89C8",
-          mediaAll: "\u5168\u90E8",
-          mediaImages: "\u56FE\u7247",
-          mediaVideos: "\u89C6\u9891",
-          mediaImage: "\u56FE\u7247",
-          mediaVideo: "\u89C6\u9891",
-          mediaFilter: "\u5A92\u4F53\u7C7B\u578B",
+          mediaHeading: "\u641C\u7D22\u56FE\u7247",
+          mediaPrevious: "\u4E0A\u4E00\u7EC4\u56FE\u7247",
+          mediaNext: "\u4E0B\u4E00\u7EC4\u56FE\u7247",
+          mediaFailed: "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25",
+          mediaVideoFailed: "\u89C6\u9891\u65E0\u6CD5\u64AD\u653E",
           mediaOpen: "\u6253\u5F00\u539F\u59CB\u5A92\u4F53",
+          usageTurn: "\u672C\u8F6E\u641C\u7D22\u7528\u91CF",
+          usageSession: "\u641C\u7D22\u7528\u91CF",
           grokTitle: "Grok \u539F\u751F\u641C\u7D22",
           grokDesc: "\u4F7F\u7528 DSH \u5F53\u524D\u9009\u62E9\u7684 Grok \u6A21\u578B\u53CA\u5176\u670D\u52A1\u914D\u7F6E\uFF1B\u4E0E GPT \u529F\u80FD\u5F00\u5173\u72EC\u7ACB\u3002\u5F00\u542F\u4EFB\u4E00\u641C\u7D22\u540E\uFF0CGrok \u4EC5\u4F7F\u7528\u539F\u751F\u641C\u7D22\uFF0C\u7F51\u9875\u8BFB\u53D6\u548C\u5176\u4ED6\u5DE5\u5177\u4ECD\u53EF\u7528\u3002",
           grokWeb: "\u542F\u7528\u539F\u751F Web Search",
@@ -952,6 +997,7 @@
         },
         en: {
           title: "Responses / Codex capabilities",
+          summary: "GPT Responses route and search capabilities",
           desc: "LCX follows the GPT Responses route selected by the current DSH session. Model, endpoint and credentials remain DSH-owned.",
           enabled: "Enable LCX (own current GPT Responses conversation)",
           enabledHelp: "Applies only to GPT Responses conversations. Grok native search is controlled independently below; other non-GPT models continue through DSH normally.",
@@ -962,25 +1008,20 @@
           alpha: "Enable Alpha command (websearch_alpha)",
           alphaHelp: "Registered only after a matching capability probe.",
           mediaPreview: "Search media previews",
-          mediaPreviewHelp: "Preview available search images or direct media links below the answer. Unavailable media leaves the original answer and links intact. This setting changes presentation only.",
-          mediaTitle: "Media previews",
+          mediaPreviewHelp: "Show images returned by search, direct image links in the answer and directly playable video links below the answer; click to enlarge or play. Markdown images in the answer are rendered natively by DSH, and ordinary page links stay links. This setting changes presentation only.",
+          mediaTitle: "Video preview",
+          mediaImagePreview: "Image preview",
           mediaPlay: "Play video",
           mediaEnlarge: "Enlarge image",
           mediaClose: "Close preview",
-          mediaMore: "Show {count} more",
-          mediaLess: "Show fewer",
-          mediaPrevious: "Previous image",
-          mediaNext: "Next image",
-          mediaResolve: "Load media preview",
-          mediaLoading: "Resolving media\u2026",
-          mediaUnavailable: "Preview unavailable",
-          mediaAll: "All",
-          mediaImages: "Photos",
-          mediaVideos: "Videos",
-          mediaImage: "Photo",
-          mediaVideo: "Video",
-          mediaFilter: "Media type",
+          mediaHeading: "Search images",
+          mediaPrevious: "Previous images",
+          mediaNext: "Next images",
+          mediaFailed: "Image failed to load",
+          mediaVideoFailed: "Video cannot be played",
           mediaOpen: "Open original media",
+          usageTurn: "Turn search usage",
+          usageSession: "Search usage",
           grokTitle: "Grok native search",
           grokDesc: "Uses the Grok model and provider profile currently selected in DSH, independently of the GPT switch. When either search is enabled, Grok uses native search while page reading and other tools remain available.",
           grokWeb: "Enable native Web Search",
@@ -1067,7 +1108,12 @@
             ...context.state,
             anchorSeq: match.event.seq,
             location: match.location,
-            items: context.state.structuredItems.length ? context.state.structuredItems : extractSearchMedia(text),
+            // Ownership (Issue #102): structured provider candidates + direct image/video file links
+            // from the answer text. Markdown images belong to DSH and are never duplicated.
+            items: mergeSearchMedia(
+              context.state.structuredItems,
+              extractDirectMediaLinks(text)
+            ),
             provider: source.provider,
             model: source.model,
             ready: true
@@ -1102,12 +1148,14 @@
         saveError;
         store;
         stop;
+        saveEpoch;
         constructor(scope) {
           this.scope = scope;
           this.draft = null;
           this.dirty = false;
           this.saving = false;
           this.saveError = false;
+          this.saveEpoch = 0;
           this.store = createSnapshotStore(this.projection());
           mediaStore.set({ enabled: this.value().searchMediaPreview });
           this.stop = scope.subscribe(() => {
@@ -1159,10 +1207,19 @@
           this.saveError = false;
           this.publish();
         }
+        leavePage() {
+          this.saveEpoch += 1;
+          this.draft = null;
+          this.dirty = false;
+          this.saving = false;
+          this.saveError = false;
+          this.publish();
+        }
         async save() {
           if (!this.dirty || this.saving || !this.snapshot().writable || this.snapshot().status !== "ready") return;
           const next = this.draftValue(), prev = this.value();
           const fields = FIELDS.filter((field) => next[field] !== prev[field]);
+          const saveEpoch = ++this.saveEpoch;
           this.saving = true;
           this.saveError = false;
           this.publish();
@@ -1173,16 +1230,20 @@
                 path: [field],
                 value: next[field]
               })));
+              if (saveEpoch !== this.saveEpoch) return;
               if (this.snapshot().status !== "ready" || fields.some((field) => this.value()[field] !== next[field]))
                 throw new Error("Settings mutation was not confirmed");
             }
+            if (saveEpoch !== this.saveEpoch) return;
             this.draft = null;
             this.dirty = false;
           } catch {
-            this.saveError = true;
+            if (saveEpoch === this.saveEpoch) this.saveError = true;
           } finally {
-            this.saving = false;
-            this.publish();
+            if (saveEpoch === this.saveEpoch) {
+              this.saving = false;
+              this.publish();
+            }
           }
         }
         inject() {
@@ -1194,7 +1255,8 @@
             setMediaPreview: (value) => this.edit("searchMediaPreview", value),
             edit: (field, value) => this.edit(field, value),
             save: () => void this.save(),
-            discard: () => this.discard()
+            discard: () => this.discard(),
+            leavePage: () => this.leavePage()
           };
         }
       }
@@ -1226,7 +1288,13 @@
       }
       function Card(props) {
         const t = props.t, s = props.useLcxCard((state) => state), [open, setOpen] = React.useState(false);
+        React.useEffect(
+          () => props.view === "page" ? () => props.leavePage() : void 0,
+          [props.view, props.leavePage]
+        );
         if (!s.available) return null;
+        if (props.view === "summary")
+          return React.createElement("span", { className: "lcx-summary" }, t("summary"));
         const disabled = !s.writable || s.saving;
         return React.createElement(
           "li",
@@ -1329,11 +1397,37 @@
           ) : null
         );
       }
+      const lightboxHost = {
+        openImage({ src, alt, labels, onClose }) {
+          try {
+            const primitives = require2("@deepseek-ai/dsh-client-ui-primitives");
+            const reactDom = require2("react-dom/client");
+            if (typeof primitives?.ImageLightbox !== "function" || typeof reactDom?.createRoot !== "function") return null;
+            const container = document.createElement("div");
+            container.dataset.lcxMediaLightbox = "";
+            document.body.appendChild(container);
+            const root = reactDom.createRoot(container);
+            root.render(React.createElement(primitives.ImageLightbox, { src, alt, labels, onClose }));
+            let done = false;
+            return () => {
+              if (done) return;
+              done = true;
+              queueMicrotask(() => {
+                root.unmount();
+                container.remove();
+              });
+            };
+          } catch {
+            return null;
+          }
+        }
+      };
       function InlineMedia({ node, t }) {
         const [marker, setMarker] = React.useState(null);
         React.useEffect(() => {
           if (!marker) return;
-          return installInlineMedia(marker, node.data.items, { image: t("mediaEnlarge"), video: t("mediaPlay"), close: t("mediaClose"), source: t("mediaOpen"), more: t("mediaMore"), less: t("mediaLess"), previous: t("mediaPrevious"), next: t("mediaNext") });
+          const labels = { image: t("mediaEnlarge"), video: t("mediaPlay"), close: t("mediaClose"), source: t("mediaOpen"), failed: t("mediaFailed"), videoFailed: t("mediaVideoFailed"), heading: t("mediaHeading"), previous: t("mediaPrevious"), next: t("mediaNext"), dialog: t("mediaTitle"), imageDialog: t("mediaImagePreview") };
+          return installInlineMedia(marker, node.data.items, labels, lightboxHost);
         }, [marker, node.data.items, t]);
         return React.createElement("span", { ref: setMarker, "aria-hidden": true });
       }
@@ -1341,14 +1435,12 @@
         const enabled = props.useMediaPreview((state) => state?.enabled === true);
         return enabled ? React.createElement(InlineMedia, { node: props.node, t: props.t }) : null;
       }
-      const inject = ["slots", "locale", "settingsScope", "uiConversation"];
+      const inject = ["slots", "locale", "configForms", "uiConversation"];
       function apply(ctx) {
-        const slots = ctx.slots ?? ctx.get("slots"), svc = ctx.settingsScope ?? ctx.get("settingsScope"), locale = ctx.locale ?? ctx.get("locale"), uiConversation = ctx.uiConversation ?? ctx.get("uiConversation");
+        const slots = ctx.slots ?? ctx.get("slots"), svc = ctx.configForms ?? ctx.get("configForms"), locale = ctx.locale ?? ctx.get("locale"), uiConversation = ctx.uiConversation ?? ctx.get("uiConversation");
         if (!slots || !svc || !locale || !uiConversation) return;
-        if (typeof slots.entriesOfSlot === "function") {
-          ctx.effect(() => uiConversation.events.register(searchUsageDefinition), "lcx search billing data");
-          ctx.effect(() => installUsageSlots(slots, React.createElement), "lcx search billing slots");
-        }
+        ctx.effect(() => uiConversation.events.register(searchUsageDefinition), "lcx search billing data");
+        ctx.effect(() => installUsageSlots(slots, React.createElement), "lcx search billing slots");
         ctx.effect(mountCss, "lcx-codex styles");
         for (const language of ["zh", "en"])
           ctx.effect(() => locale.register(NAMESPACE, language, copy[language]), `lcx-codex ${language} dictionary`);
@@ -1362,14 +1454,14 @@
             if (typeof cleanup === "function") cleanup();
           };
         }, label);
-        const controller = new Controller(svc.bind({ namespace: NAMESPACE }));
+        const controller = new Controller(svc.get(NAMESPACE));
         installSlot(
-          "settings.plugin.item",
-          "lcx-codex settings slot",
+          "plugins.bundle.config",
+          "lcx-codex plugin configuration",
           () => slots.register(
             {
-              name: "settings.plugin.item",
-              key: NAMESPACE,
+              name: "plugins.bundle.config",
+              key: "dsh-lcx-codex",
               locale: NAMESPACE,
               inject: () => controller.inject()
             },