minecodex 2.0.5 → 2.0.6

package/features/images/src/adapters/codex/native-image-source.mjs

@@ -1,152 +1,15 @@
-// 原生组件、构建产物与 React 上下文只在此适配；不复制图库或编辑器。
-export function createNativeImageSource(codex, { read = async url => (await fetch(url)).text(), load = url => import(url), requestHostAction, libraryApi, createCloudImageActions } = {}) {
-  let connecting;
+import {createNativeImageModules} from "./native-image-modules.mjs";
+
+// 原生呈现与上下文只在此适配；构建产物发现由专用模块提供。
+export function createNativeImageSource(codex, { requestHostAction, libraryApi, createCloudImageActions, signal, modules = createNativeImageModules() } = {}) {
+  const connect = modules.gallery;
   const opened = new Map();
 
-  function imported(source, local) {
-    for (const match of source.matchAll(/import\{([^}]+)\}from["']([^"']+)["']/g)) {
-      for (const binding of match[1].split(",")) {
-        const parts = binding.trim().split(/\s+as\s+/);
-        if (parts.at(-1) === local) return { name: parts[0], file: match[2] };
-      }
-    }
-    throw new Error(`Native Images import contract changed: ${local}`);
-  }
-
-  async function connect() {
-    if (!connecting) connecting = (async () => {
-      const urls = [...document.querySelectorAll('link[rel="modulepreload"],script[src]')].map(node => node.href || node.src);
-      const initialUrl = urls.find(url => /\/app-initial-[^/]+\.js/.test(url));
-      const mainUrl = urls.find(url => /\/app-main-[^/]+\.js/.test(url));
-      if (!initialUrl || !mainUrl) throw new Error("Native Images modules are unavailable");
-      const [initialSource, mainSource] = await Promise.all([read(initialUrl), read(mainUrl)]);
-      const asset = (name, references = initialSource) => {
-        const file = references.match(new RegExp(`(?:["'./])(${name}-[\\w-]+\\.js)`))?.[1];
-        if (!file) throw new Error(`Native Images capability is unavailable: ${name}`);
-        return new URL(file, initialUrl).href;
-      };
-      const module = async (name,references) => {
-        const url = asset(name,references);
-        const [source, exports] = await Promise.all([read(url), load(url)]);
-        // 调用产物公开的惰性初始化器，不扫描或执行任意导出函数。
-        for (const value of Object.values(exports)) {
-          if (typeof value === "function" && /^function ([\w$]+)\(\)\{return\(\1=/.test(String(value))) value();
-        }
-        return {url, source, exports};
-      };
-      const [masonry, layout, sourceImage, menu, selection, initial] = await Promise.all([
-        module("library-masonry"), module("library-item-layout"), module("generated-image-source"),
-        module("generated-image-context-menu"), module("library-selection-toolbar"), load(initialUrl),
-      ]);
-      const [moveDialog,dialogs] = await Promise.all([module("library-move-dialog",selection.source),module("library-item-dialogs",selection.source)]);
-      const [canvas,canvasLayout,filePreview] = await Promise.all([
-        module("image-side-panel"),module("preview-layout"),module("library-cloud-file-preview"),
-      ]);
-      const component = (exports, predicate, name) => {
-        const matches = Object.values(exports).filter(value => typeof value === "function" && predicate(String(value)));
-        if (matches.length !== 1) throw new Error(`Native Images contract changed: ${name}`);
-        return matches[0];
-      };
-      const binding = async (source, url, local) => {
-        if (!local) throw new Error("Native Images component contract changed");
-        const importedBinding = imported(source, local);
-        return (await load(new URL(importedBinding.file, url).href))[importedBinding.name];
-      };
-      const routerLocal = selection.source.match(/get\(([\w$]+)\)\.prepareNavigation\(/)?.[1];
-      const routerAtom = await binding(selection.source, selection.url, routerLocal);
-      const switchLocal = selection.source.match(/([\w$]+)\(e,i\);let _=t.length===1/)?.[1];
-      const switchMode = await binding(selection.source, selection.url, switchLocal);
-      const draftLocal = selection.source.match(/let u=([\w$]+)\(e,\[\]\);e.set/)?.[1];
-      const createChatDraft = await binding(selection.source, selection.url, draftLocal);
-      const rootOwner = mainSource.match(/\(0,([\w$]+)\.createRoot\)/)?.[1];
-      const rootInit = rootOwner && mainSource.match(new RegExp(`${rootOwner}=([\\w$]+)\\(\\)`))?.[1];
-      const reactOwner = masonry.source.match(/([\w$]+)\.useRef\b/)?.[1];
-      const reactInit = reactOwner && masonry.source.match(new RegExp(`${reactOwner}=([\\w$]+)\\(\\)`))?.[1];
-      const [reactFactory, rootFactory] = await Promise.all([
-        binding(masonry.source, masonry.url, reactInit), binding(mainSource, mainUrl, rootInit),
-      ]);
-      const React = reactFactory(), ReactDOM = rootFactory();
-      const portalOwner=canvas.source.match(/\(0,([\w$]+)\.createPortal\)/)?.[1];
-      const portalInit=portalOwner&&canvas.source.match(new RegExp(`${portalOwner}=([\\w$]+)\\(\\)`))?.[1];
-      const createPortal=(await binding(canvas.source,canvas.url,portalInit))().createPortal;
-      const dropdownLocal = selection.source.match(/\(0,[\w$]+\.jsxs?\)\(([\w$]+),\{contentWidth:`menu`/)?.[1];
-      const itemsLocal = selection.source.match(/\(0,[\w$]+\.jsxs?\)\(([\w$]+)\.Item,\{/)?.[1];
-      const buttonLocal = selection.source.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{ref:[^,]+,color:`mediaOverlay`/)?.[1];
-      const iconLocal = selection.source.match(/color:`mediaOverlay`[^;]+?children:\(0,[\w$]+\.jsx\)\(([\w$]+),\{\}\)/)?.[1];
-      const [Dropdown, Menu, Button, MoreIcon] = await Promise.all([dropdownLocal, itemsLocal, buttonLocal, iconLocal].map(local => binding(selection.source, selection.url, local)));
-      const checkboxFunction = component(selection.exports,source=>/onCheckedChange:/.test(source)&&/viewMode:/.test(source),"selection checkbox");
-      const checkboxLocal = String(checkboxFunction).match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{className:`cursor-interaction`,variant:/)?.[1];
-      const Checkbox = await binding(selection.source,selection.url,checkboxLocal);
-      const rangeSelection = component(selection.exports,source=>/^function [\w$]+\(\{orderedIds:/.test(source)&&/extendRange:/.test(source),"range selection");
-      const selectionLocal = selection.source.match(/\.set\(([\w$]+),new Set\)/)?.[1];
-      const selectionExport = selection.source.match(/export\{([^}]+)\}/)?.[1].split(",").map(value=>value.trim().split(/\s+as\s+/)).find(parts=>parts[0]===selectionLocal)?.at(-1);
-      const nativeSelectedIds = selection.exports[selectionExport];
-      if (!nativeSelectedIds) throw new Error("Native selection state contract changed");
-      const clearPrefix = selection.source.slice(selection.source.indexOf("id:`libraryNext.selection.clear`"));
-      const clearLocal = clearPrefix.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{\}\)/)?.[1];
-      const ClearIcon = await binding(selection.source,selection.url,clearLocal);
-      const dialogLocal = dialogs.source.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{open:[^,]+,showDialogClose:!1/)?.[1];
-      const contentLocal = dialogs.source.match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{as:`form`,onSubmit:/)?.[1];
-      const [Dialog,DialogContent] = await Promise.all([dialogLocal,contentLocal].map(local=>binding(dialogs.source,dialogs.url,local)));
-      const menuCoreFile = menu.source.match(/from["']([^"']*generated-image-context-menu-[^"']+)["']/)?.[1];
-      const menuCoreUrl = menuCoreFile ? new URL(menuCoreFile,menu.url).href : menu.url;
-      const menuCoreSource = menuCoreFile ? await read(menuCoreUrl) : menu.source;
-      const imageActions = component(menu.exports,source=>/onOpenedInNewTab:/.test(source),"image actions");
-      const imageActionSource = String(imageActions);
-      const imageFileLocal = imageActionSource.match(/let\{file:[\w$]+\}=([\w$]+)\(/)?.[1];
-      const attachLocal = imageActionSource.match(/await ([\w$]+)\(e,i,\[n\],/)?.[1];
-      const downloadLocal = imageActionSource.match(/await ([\w$]+)\(\{downloadSrc:/)?.[1];
-      const [imageFile,attachChatImages,downloadImage] = await Promise.all([imageFileLocal,attachLocal,downloadLocal].map(local=>binding(menuCoreSource,menuCoreUrl,local)));
-      const toolbarClass = selection.source.match(/className:`(pointer-events-auto flex h-toolbar[^`]+)`/)?.[1];
-      const toolbarPositionClass = selection.source.match(/className:`(pointer-events-none fixed inset-x-4 bottom-6[^`]+)`/)?.[1];
-      if (!toolbarClass || !toolbarPositionClass) throw new Error("Native selection toolbar layout changed");
-      const libraryIcon = async label => {
-        const marker = selection.source.indexOf(`defaultMessage:\`${label}\``);
-        const prefix = selection.source.slice(Math.max(0, marker - 500), marker);
-        const match = [...prefix.matchAll(/leftIcon:\(0,[\w$]+\.jsx\)\(([\w$]+),\{icon:\{(assets:\{)?16:([\w$]+),20:([\w$]+)/g)].at(-1);
-        if (!match) throw new Error(`Native Library icon contract changed: ${label}`);
-        const [Icon, small, medium] = await Promise.all([match[1], match[3], match[4]].map(local => binding(selection.source, selection.url, local)));
-        const sizes = {16:small, 20:medium};
-        return React.createElement(Icon, {icon:match[2] ? {assets:sizes} : sizes});
-      };
-      const upload = component(initial, source => /async function/.test(source) && /libraryPersistenceMode:/.test(source) && /uploadPurpose:/.test(source), "Library upload");
-      const setFavorite = component(initial, source => /target_ref:/.test(source) && /showToast:/.test(source), "Library favorite");
-      const auth = String(setFavorite).match(/accountId:e.get\(([\w$]+)\),userId:e.get\(([\w$]+)\)/);
-      const [accountAtom,userAtom] = await Promise.all([auth?.[1],auth?.[2]].map(local => binding(initialSource,initialUrl,local)));
-      if (!accountAtom || !userAtom) throw new Error("Native Library account contract changed");
-      const toastLocal = selection.source.match(/get\(([\w$]+)\)\.danger\(/)?.[1];
-      const toastAtom = await binding(selection.source, selection.url, toastLocal);
-      const favoritePrefix = selection.source.slice(Math.max(0,selection.source.indexOf("id:`library.favorites.add`")-2000),selection.source.indexOf("id:`library.favorites.add`")+500);
-      const favoriteAsset = favoritePrefix.match(/\{16:([\w$]+),20:([\w$]+)\}:\{16:([\w$]+),20:([\w$]+)\}/);
-      if (!favoriteAsset) throw new Error("Native Library favorite icon contract changed");
-      const favoriteIconLocal = favoritePrefix.match(/icon:\{assets:/)?.index;
-      const favoriteIconOwner = favoritePrefix.slice(0,favoriteIconLocal).match(/\(0,[\w$]+\.jsx\)\(([\w$]+),\{$/)?.[1];
-      const [FavoriteIcon, savedSmall, savedMedium, emptySmall, emptyMedium] = await Promise.all([favoriteIconOwner,...favoriteAsset.slice(1)].map(local => binding(selection.source,selection.url,local)));
-      const favoriteIcon = saved => React.createElement(FavoriteIcon,{icon:{assets:saved?{16:savedSmall,20:savedMedium}:{16:emptySmall,20:emptyMedium}}});
-      const [chatIcon, downloadIcon, folderIcon, deleteIcon] = await Promise.all([
-        libraryIcon("Chat about this"), libraryIcon("Download"), libraryIcon("Add to folder"), libraryIcon("{kind, select, directory {Delete folder} other {Delete}}"),
-      ]);
-      // 文件画布使用原生 Home Composer 的控制器、附件 scope 和输入组件。
-      const composerLocals=["kr","Qn","$n","rr","ke","hn","tn","P"];
-      const [useComposerController,useHomeComposer,Composer,ComposerSurface,ScopeProvider,composerScope,createComposerValue,composerRouteScope] = await Promise.all(composerLocals.map(local=>binding(filePreview.source,filePreview.url,local)));
-      if (!React.createElement || !ReactDOM.createRoot || !Menu.Item) throw new Error("Native Images rendering contract changed");
-      return {
-        React, ReactDOM, createPortal, Dropdown, Menu, Button, MoreIcon, chatIcon, downloadIcon, folderIcon, favoriteIcon, routerAtom, switchMode, createChatDraft, upload, setFavorite, toastAtom, accountAtom, userAtom,
-        MoveDialog:moveDialog.exports.MoveLibraryItemsDialog,
-        Checkbox,rangeSelection,nativeSelectedIds,ClearIcon,Dialog,DialogContent,ConfirmationContent:dialogs.exports.LibraryItemConfirmationContent,
-        Canvas:canvas.exports.t,CanvasLayout:canvasLayout.exports.r,
-        useComposerController,useHomeComposer,Composer,ComposerSurface,ScopeProvider,composerScope,createComposerValue,composerRouteScope,
-        editImage:component(initial,source=>/async function/.test(source)&&/requireDispatchAcceptance:/.test(source)&&/sourceAttachment:/.test(source)&&/imageVariant/.test(source),"image edit submission"),
-        imageFile,attachChatImages,downloadImage,toolbarClass,toolbarPositionClass,deleteIcon,
-        Masonry: component(masonry.exports, source => /\{items:[^}]+animate:/.test(source), "masonry"),
-        Skeleton: component(masonry.exports, source => /square:/.test(source) && /Loading library/.test(source), "skeleton"),
-        Card: component(layout.exports, source => /actionIndicator:/.test(source) && /documentHeader:/.test(source), "card"),
-        useImage: component(sourceImage.exports, source => /shouldLoadFileDataUrl:/.test(source), "image resolver"),
-        imageMenu: component(menu.exports, source => /onOpenedInNewTab:/.test(source), "image actions"),
-        openImage: component(initial, source => /availableImageCount:/.test(source) && /openInEditor:/.test(source) && /entrypoint:/.test(source), "image preview"),
-      };
-    })().catch(error => { connecting = null; throw error; });
-    return connecting;
+  function uploadFile({base64,name}) {
+    const decoded=atob(base64),bytes=new Uint8Array(decoded.length);
+    // 直接写入字节，避免大图经字符串迭代器创建中间数组。
+    for(let index=0;index<decoded.length;index++)bytes[index]=decoded.charCodeAt(index);
+    return new File([bytes],name,{type:"image/png"});
   }
 
   function environment(anchor) {
@@ -189,7 +52,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
   }
 
   async function mountNavigation(container, anchor, onSelect) {
-    const native = await connect();
+    const native = await modules.navigation();
     const context = environment(anchor);
     const root = native.ReactDOM.createRoot(container);
     return {
@@ -200,7 +63,6 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
           selectedKey,
           tabs:[...contract.props.tabs, {key:"imagegen", name:"Image Gen"}],
           onSelect:key => {
-            if (key === "imagegen") context.libraryScope?.set(native.nativeSelectedIds,new Set());
             onSelect(key);
             if (key !== "imagegen") navigationContract(anchor).props.onSelect(key);
           },
@@ -216,20 +78,20 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
   }
 
   async function mount(container, anchor, {onOpen, onPrompt, onRetry, onHidden}) {
-    const native = await connect();
+    let native = await connect();
     const context = environment(anchor);
     const {React, ReactDOM} = native;
     const h = React.createElement;
     let failure, currentContent, folderDialog, removeDialog, canvasImage, disposed=false, batchBusy=false;
-    let currentImages=[],currentLoading=true,selectedIds=new Set(),selectionAnchor=null;
+    let currentImages=[],currentLoading=true,selectedIds=new Set(),selectionAnchor=null,openRevision=0;
     const scope = context.libraryScope;
     if (!scope) throw new Error("Native Library context is unavailable");
     const {accountId,userId} = scope.value;
     const message = (id,defaultMessage) => context.intl.formatMessage({id,defaultMessage});
     const toast = () => scope.get(native.toastAtom);
-    const assertAccount = () => {
-      if (disposed || scope.get(native.accountAtom) !== accountId || scope.get(native.userAtom) !== userId) throw new Error("Library account changed");
-    };
+    const sameAccount = () => scope.get(native.accountAtom) === accountId && scope.get(native.userAtom) === userId;
+    const isCurrent = () => !disposed && sameAccount();
+    const assertAccount = () => {if (!isCurrent()) throw new Error("Library action is no longer current");};
     const reference = (image,operation,extra={}) => requestHostAction("local-image-source",{operation,id:image.id,accountId,userId,...extra});
     async function favoriteStatus(id) {
       const result = await libraryApi.favoriteStatus(id);
@@ -239,13 +101,12 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     }
     const cloud = createCloudImageActions({
       reference, assertAccount,
-      fileNode:id => libraryApi.fileNode(id), favoriteStatus,
+      favoriteStatus,
       setFavorite:(libraryFileId,favoriteId,isFavorited) => native.setFavorite(scope,{libraryFileId,favoriteId,isFavorited,surface:"library_grid",showToast:true}),
       upload:async file => {
-        const bytes = Uint8Array.from(atob(file.base64),value => value.charCodeAt(0));
         const pendingToast = toast().info(message("minecodex.images.saving","Saving image to Library…"),{duration:0,hasCloseButton:false});
         try {
-          const uploaded = await native.upload(scope,new File([bytes],file.name,{type:"image/png"}),{
+          const uploaded = await native.upload(scope,uploadFile(file),{
             libraryPersistenceMode:"required",storeInLibrary:true,uploadPurpose:"library",beforeRequest:assertAccount,
           });
           return uploaded.libraryFileId;
@@ -255,13 +116,21 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     async function folder(image) {
       const images=Array.isArray(image)?image:[image];
       const registered=[];
-      for(const item of images)registered.push(await cloud.registered(item));
-      const entries=registered.map(item=>item.entry),created=registered.some(item=>item.created);
+      const entries=[];
+      for (const item of images) {
+        const result=await cloud.registered(item);
+        const node=await libraryApi.fileNode(result.libraryFileId);
+        assertAccount();
+        registered.push(result);
+        entries.push({node});
+      }
+      const created=registered.some(item=>item.created);
       let moved = false;
       folderDialog = h(native.MoveDialog,{
         accountId,userId,entries,initialPath:[],
         onMoved:() => {moved=true;},
         onClose:() => {
+          if (!isCurrent()) return;
           folderDialog=null;render(currentContent);
           if (!moved) toast().info(created
             ? message("minecodex.images.folderCanceledSaved","Image saved to Library, but not added to a folder.")
@@ -271,7 +140,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       render(currentContent);
     }
     function operationError(error) {
-      if (disposed) return;
+      if (!isCurrent()) return;
       toast().danger(error.code === "UPLOAD_UNCONFIRMED"
         ? message("minecodex.images.uploadUnconfirmed","Image upload is pending or could not be confirmed. Check Library before uploading again.")
         : message("minecodex.images.libraryActionFailed","Couldn’t complete the Library action. Please try again."));
@@ -279,6 +148,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     }
     const root = ReactDOM.createRoot(container, {onUncaughtError:error => {failure=error;onRetry(error);}});
     function render(content) {
+      if (!isCurrent()) return;
       currentContent = content;
       let tree = h(React.Fragment,null,content,folderDialog,removeDialog,selectionToolbar(),canvasImage?h(ImageCanvas,{key:canvasImage.id,image:canvasImage}):null);
       for (const provider of context.providers) tree = h(provider.type, {value:provider.value}, tree);
@@ -293,7 +163,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       selectedIds=next.selectedIds;selectionAnchor=next.anchor;refresh();
     }
     const selectedImages = () => currentImages.filter(image=>selectedIds.has(image.id));
-    function clearSelection() {selectedIds=new Set();selectionAnchor=null;removeDialog=null;refresh();}
+    function clearSelection() {openRevision++;selectedIds=new Set();selectionAnchor=null;removeDialog=null;refresh();}
     async function performBatch(action) {
       if (batchBusy) return;
       batchBusy=true;refresh();
@@ -307,13 +177,13 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
           h(native.DialogContent,{as:"form",onSubmit:event=>{
             event.preventDefault();if(pending)return;pending=true;update();refresh();
             void requestHostAction("local-image-source",{operation:"hide",ids:images.map(image=>image.id)}).then(result=>{
-              if(disposed)return;
+              if(!isCurrent())return;
               const hidden=new Set(result.hiddenIds);
               currentImages=currentImages.filter(image=>!hidden.has(image.id));
               selectedIds=new Set([...selectedIds].filter(id=>!hidden.has(id)));
               pending=false;removeDialog=null;onHidden?.(result.hiddenIds);refresh();
               toast().info(message("minecodex.images.hidden","Hidden from Image Gen"));
-            }).catch(error=>{pending=false;update();refresh();operationError(error);});
+            }).catch(error=>{if(!isCurrent())return;pending=false;update();refresh();operationError(error);});
           }},h(native.ConfirmationContent,{
             title:context.intl.formatMessage({id:"minecodex.images.hideTitle",defaultMessage:"Delete {count, plural, one {image} other {# images}} from Image Gen?"},{count:images.length}),
             description:message("minecodex.images.hideDescription","These images will only be hidden from Image Gen. Local originals and cloud copies will be kept."),
@@ -347,11 +217,13 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     }
     document.addEventListener("keydown",onSelectionKey);
     async function startChat(images) {
+      assertAccount();
       const conversationId=native.createChatDraft(context.scope,[]);
       native.switchMode(context.scope,"chat");
       const files=[];
-      for(const image of images){const file=await reference(image,"upload-file");files.push(native.imageFile(`data:image/png;base64,${file.base64}`,file.name).file);}
+      for(const image of images){const file=await reference(image,"upload-file");assertAccount();files.push(native.imageFile(`data:image/png;base64,${file.base64}`,file.name).file);}
       if (!await native.attachChatImages(context.scope,conversationId,files,{isTemporaryChat:false})) throw new Error("Could not attach selected images");
+      assertAccount();
       const navigate=context.scope.get(native.routerAtom).prepareNavigation("/",{state:{codexAppMode:"chat",initialChatGptConversationId:conversationId,focusComposerNonce:Date.now()}});
       if(!navigate)throw new Error("Native Chat navigation is unavailable");
       clearSelection();await navigate();
@@ -359,9 +231,19 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
     function localImage(image) {
       return {id:image.imageGenerationItemId, src:image.sourcePath, previewSrc:image.sourcePath, alt:image.name, tabTitle:image.name, width:image.width, height:image.height};
     }
-    function open(image, options) {
+    async function open(image, options) {
+      if (!options) {
+        assertAccount();
+        const revision=++openRevision;
+        const canvas=await modules.canvas();
+        // 切换来源或重置列表后，不让晚到的画布覆盖当前页面。
+        if(revision!==openRevision || !isCurrent())return false;
+        native={...native,...canvas};
+        opened.set(image.sourcePath,image);
+        canvasImage=image;refresh();return true;
+      }
+      if (signal?.aborted || !sameAccount()) return;
       opened.set(image.sourcePath, image);
-      if (!options) {canvasImage=image;refresh();return;}
       const {readOnly=false,scope=context.scope,chatGptConversationId}=options;
       const result = native.openImage(scope, {
         chatGptConversationId, alt:image.name, title:image.name, attachmentId:`image-playground:${image.imageGenerationItemId}`,
@@ -408,8 +290,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
         assertCurrent();
         if(!attachment.current)attachment.current=(async()=>{
           const file=await reference(image,"upload-file");assertCurrent();
-          const bytes=Uint8Array.from(atob(file.base64),value=>value.charCodeAt(0));
-          const uploaded=await native.upload(context.scope,new File([bytes],file.name,{type:"image/png"}),{storeInLibrary:false,beforeRequest:assertCurrent,signal:abort.signal});
+          const uploaded=await native.upload(context.scope,uploadFile(file),{storeInLibrary:false,beforeRequest:assertCurrent,signal:abort.signal});
           return {...uploaded,width:image.width,height:image.height,imageReference:true};
         })().catch(error=>{attachment.current=null;throw error;});
         return attachment.current;
@@ -463,6 +344,7 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       return h(native.CanvasLayout,{assetName:image.name,contentOwnsHeader:true,onClose:requestClose,children:canvas});
     }
     async function chatAbout(image) {
+      assertAccount();
       const conversationId = native.createChatDraft(context.scope, []);
       native.switchMode(context.scope, "chat");
       const navigate = context.scope.get(native.routerAtom).prepareNavigation("/", {
@@ -471,24 +353,31 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       if (!navigate) throw new Error("Native Chat navigation is unavailable");
       await navigate();
       await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
-      const composer = document.querySelector('[data-codex-composer="true"]') ?? document.querySelector('[contenteditable="true"]');
+      // 导航会正常卸载图库；只把面板移交给目标 Chat 的可见输入框。
+      if (signal?.aborted || !sameAccount()) return;
+      const composer = codex.composer(null,{purpose:"insertion"})?.editable;
       if (!composer) throw new Error("Native Chat composer is unavailable");
       const chat = environment(composer);
-      open(image, {readOnly:true, scope:chat.scope, chatGptConversationId:conversationId});
+      await open(image, {readOnly:true, scope:chat.scope, chatGptConversationId:conversationId});
     }
     function ImageCard({image}) {
       const [saved,setSaved] = React.useState(false);
       const [busy,setBusy] = React.useState(false);
+      const active=React.useRef(true);
+      const favoriteRevision=React.useRef(0);
+      React.useEffect(()=>{active.current=true;return()=>{active.current=false;favoriteRevision.current++;};},[]);
       async function perform(action) {
         if (busy) return;
         setBusy(true);
-        try {await action();} catch(error) {operationError(error);} finally {setBusy(false);}
+        try {assertAccount();await action();} catch(error) {operationError(error);} finally {if(active.current&&isCurrent())setBusy(false);}
       }
       async function refreshFavorite(open) {
+        const revision=++favoriteRevision.current;
         if (!open) return;
         try {
           const cached = await reference(image,"reference");
-          setSaved(cached.libraryFileId ? !!(await favoriteStatus(cached.libraryFileId)) : false);
+          const value=cached.libraryFileId ? !!(await favoriteStatus(cached.libraryFileId)) : false;
+          if (active.current && isCurrent() && revision===favoriteRevision.current) setSaved(value);
         } catch(error) {console.error("MineCodex favorite status",error);}
       }
       const resolved = native.useImage({src:image.sourcePath, conversationId:image.threadId, hostId:"local", shouldLoadFileDataUrl:true});
@@ -509,13 +398,17 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       const promptIcon = menuGlyph ? h("span", {className:"inline-flex size-4 items-center justify-center", "aria-hidden":true, dangerouslySetInnerHTML:{__html:menuGlyph.outerHTML}}) : null;
       const menuItems = [
         {id:"chat-about", icon:native.chatIcon, text:context.intl.formatMessage({id:"libraryNext.actions.chatAboutItem",defaultMessage:"Chat about this"}),onSelect:() => {void chatAbout(image).catch(onRetry);}},
+        {id:"view-prompts", icon:promptIcon, text:context.intl.formatMessage({id:"minecodex.images.viewPrompts",defaultMessage:"View prompts"}),onSelect:() => {void open(image).then(opened=>{if(opened&&isCurrent())onPrompt(image);}).catch(operationError);}},
         {id:"favorite",icon:native.favoriteIcon(saved),text:saved
           ? message("library.favorites.remove","Remove from Favorites")
-          : message("library.favorites.add","Add to Favorites"),onSelect:() => {void perform(async () => setSaved(await cloud.favorite(image)));}},
+          : message("library.favorites.add","Add to Favorites"),onSelect:() => {void perform(async () => {
+            favoriteRevision.current++;
+            const value=await cloud.favorite(image);
+            if(active.current&&isCurrent()){favoriteRevision.current++;setSaved(value);}
+          });}},
         action("download-a-copy", native.downloadIcon, {id:"libraryNext.actions.download", defaultMessage:"Download"}),
         {id:"folder",icon:native.folderIcon,text:message("libraryNext.actions.addToFolder","Add to folder"),onSelect:() => {void perform(() => folder(image));}},
         {id:"delete",icon:native.deleteIcon,tone:"danger",text:message("libraryNext.actions.delete","Delete"),onSelect:()=>confirmRemove([image])},
-        {id:"view-prompts", icon:promptIcon, text:context.intl.formatMessage({id:"minecodex.images.viewPrompts",defaultMessage:"View prompts"}),onSelect:() => {open(image);onPrompt(image);}},
       ].filter(Boolean);
       const dropdown = h(native.Dropdown, {
         contentWidth:"menu", align:"end", onOpenChange:refreshFavorite,
@@ -534,17 +427,17 @@ export function createNativeImageSource(codex, { read = async url => (await fetc
       },children:h(native.Checkbox,{className:"cursor-interaction",variant:"overlay",checked,disabled:batchBusy,"aria-label":context.intl.formatMessage({id:"libraryNext.selection.item",defaultMessage:"Select {name}"},{name:image.name}),onCheckedChange:value=>select(image,value===true)})});
       return h(native.Card,{name:image.name,selection,selected:checked,selectionActive:selectedIds.size>0,onSelect:event=>{
         if(selectedIds.size || event.shiftKey){select(image,!checked,event.shiftKey);return true;}return false;
-      },onOpen:() => onOpen(image,open),actions:dropdown,children:h("span",{className:"relative flex min-h-0 w-full flex-1 items-center justify-center",children:h("span",{className:"relative flex w-full items-center justify-center",style:{aspectRatio:cardRatio},children:picture})})});
+      },onOpen:() => {void Promise.resolve(onOpen(image,open)).catch(operationError);},actions:dropdown,children:h("span",{className:"relative flex min-h-0 w-full flex-1 items-center justify-center",children:h("span",{className:"relative flex w-full items-center justify-center",style:{aspectRatio:cardRatio},children:picture})})});
     }
     return {
       render({images,loading}) {
         if (failure) throw failure;
         currentImages=images;currentLoading=loading;
-        if(loading){selectedIds=new Set();selectionAnchor=null;removeDialog=null;}
+        if(loading){openRevision++;selectedIds=new Set();selectionAnchor=null;removeDialog=null;scope.set(native.nativeSelectedIds,new Set());}
         refresh();
       },
       clearSelection,
-      dispose() {disposed=true;document.removeEventListener("keydown",onSelectionKey);root.unmount();},
+      dispose() {disposed=true;openRevision++;document.removeEventListener("keydown",onSelectionKey);root.unmount();},
     };
   }
 

package/features/images/src/frontend/cloud-image-actions.mjs

@@ -1,12 +1,13 @@
 // 工作流只管理云端身份与操作顺序；上传协议和原生组件由 Adapter 提供。
-export function createCloudImageActions({reference,upload,fileNode,favoriteStatus,setFavorite,assertAccount}) {
+export function createCloudImageActions({reference,upload,favoriteStatus,setFavorite,assertAccount}) {
   const pending = new Map();
   function registered(image) {
     if (!pending.has(image.id)) {
       const task = (async () => {
         assertAccount();
         const cached = await reference(image,"reference");
-        if (cached.libraryFileId) return {entry:{node:await fileNode(cached.libraryFileId)},created:false};
+        assertAccount();
+        if (cached.libraryFileId) return {libraryFileId:cached.libraryFileId,created:false};
         const unconfirmed = () => Object.assign(new Error("Library upload is pending or could not be confirmed"),{code:"UPLOAD_UNCONFIRMED"});
         if (cached.status === "uploading") throw unconfirmed();
         const file = await reference(image,"upload-file");
@@ -18,7 +19,7 @@ export function createCloudImageActions({reference,upload,fileNode,favoriteStatu
         // 先保存身份；收藏失败或取消文件夹选择后仍可复用上传结果。
         await reference(image,"register",{libraryFileId,fingerprint:file.fingerprint});
         assertAccount();
-        return {entry:{node:await fileNode(libraryFileId)},created:true};
+        return {libraryFileId,created:true};
       })();
       pending.set(image.id,task);
       const release = () => {if (pending.get(image.id) === task) pending.delete(image.id);};
@@ -29,10 +30,11 @@ export function createCloudImageActions({reference,upload,fileNode,favoriteStatu
   return {
     registered,
     async favorite(image) {
-      const {entry} = await registered(image);
-      const favoriteId = await favoriteStatus(entry.node.id);
+      const {libraryFileId} = await registered(image);
+      const favoriteId = await favoriteStatus(libraryFileId);
+      assertAccount();
+      if (!await setFavorite(libraryFileId,favoriteId,!favoriteId)) throw new Error("Library favorite could not be changed");
       assertAccount();
-      if (!await setFavorite(entry.node.id,favoriteId,!favoriteId)) throw new Error("Library favorite could not be changed");
       return !favoriteId;
     },
   };

package/features/images/src/frontend/local-image-source.mjs

@@ -183,7 +183,8 @@ export function installLocalImageSource(config, signal, sources, native) {
   });
   observer.observe(document.body, {childList:true, subtree:true, attributes:true, attributeFilter:["aria-selected"]});
   void scan();
-  const cleanup = () => {observer.disconnect(); unmount(); pendingPrompt = null;};
+  let cleaned = false;
+  const cleanup = () => {if(cleaned)return;cleaned=true;observer.disconnect();unmount();pendingPrompt=null;};
   signal.addEventListener("abort", cleanup, {once:true});
   return {
     cleanup,

package/features/images/src/library-prompt-page.mjs

@@ -3,6 +3,7 @@ const PANEL_ID = "minecodex-library-prompt";
 const zh = () => (document.documentElement.lang || navigator.language || "en").toLowerCase().startsWith("zh");
 const label = (en, cn) => zh() ? cn : en;
 let mounted = null;
+let localImageSource = null;
 const libraryApi=createLibraryApi();
 let scheduled = false;
 let candidate = null;
@@ -257,6 +258,9 @@ function localPromptRequested(){openPendingLocalPrompt();void scan();}
 document.addEventListener("minecodex:image-prompt",localPromptRequested);
 const localeObserver = new MutationObserver(() => mounted?.refreshLocale());
 localeObserver.observe(document.documentElement, { attributes:true, attributeFilter:["lang"] });
+localImageSource = installLocalImageSource(config, signal, createImageSourcesAdapter(config.codex), createNativeImageSource(config.codex, {
+  requestHostAction:config.requestHostAction, libraryApi, createCloudImageActions, signal,
+}));
 const observer = new MutationObserver(() => {
   if (scheduled) return;
   scheduled = true;
@@ -270,7 +274,8 @@ function escape(event) {
   closePanel(mounted, true);
 }
 document.addEventListener("keydown", escape, true);
-const cleanup = () => { document.removeEventListener("minecodex:image-prompt",localPromptRequested); candidate?.request.abort(); candidate = null; observer.disconnect(); localeObserver.disconnect(); document.removeEventListener("keydown", escape, true); unmount(); };
+let cleaned = false;
+const cleanup = () => {if(cleaned)return;cleaned=true;document.removeEventListener("minecodex:image-prompt",localPromptRequested);candidate?.request.abort();candidate=null;observer.disconnect();localeObserver.disconnect();document.removeEventListener("keydown",escape,true);unmount();localImageSource.cleanup();};
 signal.addEventListener("abort", cleanup, { once: true });
 scan();
 return cleanup;

package/features/images/src/library-prompt-source.mjs

@@ -1,6 +1,7 @@
 import { createCloudImageActions } from "./frontend/cloud-image-actions.mjs";
 import { createImageSourcesAdapter } from "./adapters/codex/image-sources.mjs";
 import { createNativeImageSource } from "./adapters/codex/native-image-source.mjs";
+import {createNativeImageModules, discoverFilePreviewComposerBindings} from "./adapters/codex/native-image-modules.mjs";
 import { installLocalImageSource } from "./frontend/local-image-source.mjs";
 import { createLibraryApi } from "./adapters/codex/library-api.mjs";
 import { createLibraryViewerAdapter } from "./adapters/codex/library-viewer.mjs";
@@ -9,10 +10,7 @@ import { promptResolverSource } from "./adapters/codex/prompt-resolver-source.mj
 
 export async function createPageScriptSource() {
   const source=await readFile(new URL("./library-prompt-page.mjs",import.meta.url),"utf8");
-  const functions={createCloudImageActions,createImageSourcesAdapter,createNativeImageSource,installLocalImageSource,createLibraryApi,createLibraryViewerAdapter};
+  const functions={createCloudImageActions,createImageSourcesAdapter,discoverFilePreviewComposerBindings,createNativeImageModules,createNativeImageSource,installLocalImageSource,createLibraryApi,createLibraryViewerAdapter};
   const declarations=Object.entries(functions).map(([name,fn])=>`const ${name}=${fn.toString()};`).join("\n");
-  return `${declarations}
-let localImageSource=null;
-const promptFromConversation=${promptResolverSource()};
-${source.replace("const observer =", "localImageSource=installLocalImageSource(config,signal,createImageSourcesAdapter(config.codex),createNativeImageSource(config.codex,{requestHostAction:config.requestHostAction,libraryApi:createLibraryApi(),createCloudImageActions}));\nconst observer =").replace("return cleanup;", "return () => { cleanup(); localImageSource.cleanup(); };")}`;
+  return `${declarations}\nconst promptFromConversation=${promptResolverSource()};\n${source}`;
 }

package/features/model-slider/codex-feature.json

@@ -7,8 +7,8 @@
     "zh-CN": "模型滑条"
   },
   "description": {
-    "en": "A clearer, faster model picker with provider identity, favorites, and smoother interaction.",
-    "zh-CN": "让模型选择更清楚、更快，提供品牌识别、常用收藏和更顺畅的交互。"
+    "en": "Switch models and thinking levels. Keep favorites within reach.",
+    "zh-CN": "切换模型与思考强度，快速找到常用收藏。"
   },
   "entry": {
     "kind": "composer-model-selector"

package/features/notes/DESIGN.md

@@ -54,7 +54,7 @@ Header 为 Prompts；右侧依次为排序图标、分类调节图标、常驻
 
 拖拽排序使用等高 Drop Placeholder，拖影跟随指针并显式按源行圆角裁切，不留下矩形外边界；同组条目以 180ms ease-out 让位，落位淡入 140ms。放到范围外或取消恢复原位，不写入排序。遵循 prefers-reduced-motion。
 
-页面选择通用 Page 的 `sidebar:"none"` 分支，自身不带常驻二级侧栏，保留原生 Home、Space、Scheduled sidebar 的悬浮叠加与导航行为。关闭页面恢复原页面位置，不改变用户的侧栏展开偏好。
+页面选择通用 Page 的 `sidebar:"none"` 分支，自身不带常驻二级侧栏，保留原生 Home、Space、Scheduled sidebar 的悬浮叠加与导航行为。关闭页面恢复原页面位置，不改变用户的侧栏展开偏好。原生二级入口（如 Space → Images）提交导航后，通过共享 Page 的 `onNavigate` 关闭 Prompts、编辑浮层并释放底层 inert；保留用户刚选择的目标路由。仅悬浮展开侧栏不退出 Prompts。
 
 提示词编辑沿用原生 Project 的复合标题输入：40px 图标段位于标题前，细分隔线，共用圆角边框与 focus-within 状态。图标选择入口不再单独占一行；Title 通过 aria-label 标识。
 

package/features/notes/codex-feature.json

@@ -7,8 +7,8 @@
     "zh-CN": "提示词"
   },
   "description": {
-    "en": "Organize prompts, track usage, and insert them from the composer.",
-    "zh-CN": "分类管理提示词、统计调用次数，并从输入框快速调用。"
+    "en": "Organize reusable prompts and insert them with one click.",
+    "zh-CN": "整理常用提示词，一键填入输入框。"
   },
   "surfaceUrl": "http://127.0.0.1:47832/",
   "healthUrl": "http://127.0.0.1:47832/api/health",

package/features/notes/src/frontend/entry.mjs

@@ -365,7 +365,7 @@ function openPage() {
   pageFocus = document.activeElement;
   page = element("section");
   page.setAttribute(MARKER, "page");
-  config.ui.page(page, { sidebar:"none" });
+  config.ui.page(page, { sidebar:"none", onNavigate:() => closePage(false, false) });
   page.setAttribute("aria-label", text("Prompts", "提示词"));
   document.body.append(page);
   // 只隔离主内容的焦点，保留导航栏与原生窗口控件。

package/features/session-status/codex-feature.json

@@ -4,8 +4,8 @@
   "version": "0.1.0",
   "label": { "en": "Session Status", "zh-CN": "会话状态" },
   "description": {
-    "en": "Shows conversation steps, observed output speed, token usage and context details below the composer.",
-    "zh-CN": "在输入框下方显示对话步骤、观测输出速度、Token 用量与上下文明细。"
+    "en": "See response speed, token usage and context space.",
+    "zh-CN": "查看输出速度、Token 用量与上下文占用。"
   },
   "entry": { "kind": "page-script", "script": "src/session-status.mjs", "sourceFactory": "src/injection-source.mjs" },
   "icon": {

package/features/sidebar-focus/DESIGN.md

@@ -5,13 +5,13 @@
 保留当前任务所在分类与 Project，收起其他分支。再次点击恢复进入聚焦前的展开状态；聚焦期间切换任务跟随路径。用户手动调整分支时退出聚焦并保留手动布局，无撤销浮层。
 
 - 入口：展开侧栏的 Activity 与 Search 之间，随原生侧栏一起隐藏。
-- 图标：固定使用 Lucide list-chevrons-down-up，开启和退出聚焦不切换图标。16px，24px viewBox，描边 1.575 units（实际 1.05px）。
-- 控件：继承原生 Activity 的 Button 类与 28px 热区。未激活为 secondary / ghost，激活为 info / soft，与原生 View activity 一致；aria-pressed 表达聚焦开关状态。
-- 中英文标题：Focus current task / 聚焦当前任务；Exit focus / 退出聚焦。
+- 图标：整理操作使用 Lucide list-chevrons-down-up；可恢复布局时切换为 list-chevrons-up-down。16px，24px viewBox，描边 1.575 units（实际 1.05px）。
+- 控件：继承原生 Activity 的 Button 类与 28px 热区。两种状态均使用 secondary / ghost，以图标表达下一步动作，不显示蓝色模式选中态；aria-pressed 保留可恢复状态的可访问语义。
+- 中英文标题：Focus current task / 聚焦当前任务；Restore layout / 恢复布局。
 - 折叠通过原生回调执行；React 元数据仅用于读取稳定分类、项目和会话身份。
 - 无可识别当前路径时禁用；Activity 列表展示期间暂停整理。
 - 状态仅作用于当前窗口；卸载不额外改变用户布局。
 
-根据聚焦状态显式设置 data-color 与 data-variant，直接复用原生语义 token 适配明暗模式，不写死蓝色或背景色。Activity 开启时按钮原生 disabled，暂停聚焦操作，关闭后恢复可用性。
+显式使用中性 data-color 与 data-variant，直接复用原生语义 token 适配明暗模式，不写死颜色或背景色。Activity 开启时按钮原生 disabled，暂停聚焦操作，关闭后恢复可用性。
 
 Tooltip 由共享组件库通过 `data-minecodex-tooltip` 管理；插件只提供随聚焦状态变化的文案，不维护独立材质、定位或显示事件。克隆入口时移除原控件的 `title` 与 `aria-describedby`。

package/features/sidebar-focus/codex-feature.json

@@ -7,14 +7,15 @@
     "zh-CN": "侧栏聚焦"
   },
   "description": {
-    "en": "Keep the current task path expanded and collapse other branches.",
-    "zh-CN": "保留当前任务路径，收起其他分支。"
+    "en": "Fold unrelated branches to keep the current task in view.",
+    "zh-CN": "收起无关分支，专注当前任务路径。"
   },
   "entry": {
     "kind": "page-script",
     "script": "src/sidebar-focus.mjs",
     "sourceFactory": "src/injection-source.mjs"
   },
+  "icon": {"viewBox": "0 0 24 24", "markup": "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n  <path d=\"M9 3v18\" />"},
   "placement": {
     "order": 80
   }