@workflow-code/cli 0.2.4-20261012005.codex-studio-integration → 0.2.4-20261012007.codex-studio-integration

package/dist/web/workflow-ui.js

@@ -12643,6 +12643,8 @@
     "Configuration name": "\u914D\u7F6E\u540D\u79F0",
     "Connecting to project": "\u6B63\u5728\u8FDE\u63A5\u9879\u76EE",
     "Connection changed.": "\u8FDE\u63A5\u5DF2\u53D8\u66F4\u3002",
+    "Copy timed out.": "\u590D\u5236\u8D85\u65F6\u3002",
+    "Host clipboard is unavailable.": "\u5BBF\u4E3B\u526A\u8D34\u677F\u4E0D\u53EF\u7528\u3002",
     "Connection interrupted": "\u8FDE\u63A5\u5DF2\u4E2D\u65AD",
     "Connection interrupted.": "\u8FDE\u63A5\u5DF2\u4E2D\u65AD\u3002",
     "Connection not verified": "\u8FDE\u63A5\u672A\u9A8C\u8BC1",
@@ -12883,7 +12885,33 @@
     "Write file": "\u5199\u5165\u6587\u4EF6",
     Yes: "\u662F",
     "Zoom in": "\u653E\u5927",
-    "Zoom out": "\u7F29\u5C0F"
+    "Zoom out": "\u7F29\u5C0F",
+    "Open resource": "\u6253\u5F00\u8D44\u6E90",
+    "Show in conversation": "\u5728\u5BF9\u8BDD\u4E2D\u5C55\u793A",
+    "Hide preview": "\u6536\u8D77\u9884\u89C8",
+    "Open in new window": "\u5728\u65B0\u7A97\u53E3\u4E2D\u6253\u5F00",
+    "Tool call details": "\u5DE5\u5177\u8C03\u7528\u8BE6\u60C5",
+    "Please sign in to preview this server resource.": "\u8BF7\u767B\u5F55\u540E\u9884\u89C8\u670D\u52A1\u5668\u8D44\u6E90\u3002",
+    "You do not have access to this resource.": "\u4F60\u6CA1\u6709\u6B64\u8D44\u6E90\u7684\u8BBF\u95EE\u6743\u9650\u3002",
+    "The resource project is unavailable.": "\u8D44\u6E90\u6240\u5C5E\u9879\u76EE\u4E0D\u53EF\u7528\u3002",
+    "The resource project is unavailable. Import or open the target project first.": "\u8D44\u6E90\u6240\u5C5E\u9879\u76EE\u4E0D\u53EF\u7528\uFF0C\u8BF7\u5148\u5BFC\u5165\u6216\u6253\u5F00\u76EE\u6807\u9879\u76EE\u3002",
+    "The project does not allow this storage location.": "\u9879\u76EE\u4E0D\u5141\u8BB8\u4F7F\u7528\u6B64\u5B58\u50A8\u4F4D\u7F6E\u3002",
+    "This resource no longer exists.": "\u6B64\u8D44\u6E90\u5DF2\u4E0D\u5B58\u5728\u3002",
+    "Server source files cannot be previewed by this card.": "\u6B64\u5361\u7247\u4E0D\u652F\u6301\u9884\u89C8\u670D\u52A1\u5668\u6E90\u7801\u6587\u4EF6\u3002",
+    "File is outside this project.": "\u6587\u4EF6\u4E0D\u5728\u6B64\u9879\u76EE\u4E2D\u3002",
+    "File preview exceeds 2 MiB.": "\u6587\u4EF6\u9884\u89C8\u5927\u5C0F\u8D85\u8FC7 2 MiB\u3002",
+    "This project does not provide a Kanban preview.": "\u6B64\u9879\u76EE\u4E0D\u63D0\u4F9B\u770B\u677F\u9884\u89C8\u3002",
+    "Invalid resource preview URL.": "\u8D44\u6E90\u9884\u89C8\u5730\u5740\u65E0\u6548\u3002",
+    "This preview configuration no longer exists.": "\u6B64\u9884\u89C8\u914D\u7F6E\u5DF2\u4E0D\u5B58\u5728\u3002",
+    "Resource access changed. Open the card again.": "\u8D44\u6E90\u8BBF\u95EE\u72B6\u6001\u5DF2\u53D8\u5316\uFF0C\u8BF7\u91CD\u65B0\u6253\u5F00\u5361\u7247\u3002",
+    "This resource preview is read-only.": "\u6B64\u8D44\u6E90\u9884\u89C8\u4E3A\u53EA\u8BFB\u3002",
+    "Invalid resource action.": "\u8D44\u6E90\u64CD\u4F5C\u65E0\u6548\u3002",
+    "Run no longer exists.": "\u6B64\u8FD0\u884C\u5DF2\u4E0D\u5B58\u5728\u3002",
+    "Conversation changed.": "\u4F1A\u8BDD\u5DF2\u53D8\u5316\u3002",
+    "Unable to load this preview. Retry or open it separately.": "\u65E0\u6CD5\u52A0\u8F7D\u6B64\u9884\u89C8\uFF0C\u8BF7\u91CD\u8BD5\u6216\u5355\u72EC\u6253\u5F00\u3002",
+    "Open in browser": "\u5728\u6D4F\u89C8\u5668\u4E2D\u6253\u5F00",
+    "No resources": "\u6682\u65E0\u8D44\u6E90",
+    "Allow popups to open this resource in a new window.": "\u8BF7\u5141\u8BB8\u5F39\u51FA\u7A97\u53E3\u4EE5\u5355\u72EC\u6253\u5F00\u6B64\u8D44\u6E90\u3002"
   };
 
   // src/web/localization.ts
@@ -16138,7 +16166,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   // src/web/resource-cards.ts
   var record = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
   var string = (value) => typeof value === "string" && value.trim() ? value.trim() : void 0;
-  function conversationResourceCards(items, projectId, conversationId) {
+  function conversationResourceCards(items, projectId, conversationId, storageSource = "local") {
     const cards = /* @__PURE__ */ new Map();
     for (const [index, item] of items.entries()) {
       if (!["agent-part", "opencode-part"].includes(String(item.metadata?.kind)) || item.metadata?.partType !== "tool") {
@@ -16201,6 +16229,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         if (!kind2) {
           continue;
         }
+        if (kind2 === "kv" || kind2 === "knowledge") {
+          target2.source = input.source ?? storageSource;
+        }
         descriptor = { kind: kind2, target: target2, title: record(output?.document)?.title };
       }
       const kind = descriptor.kind;
@@ -16209,7 +16240,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       }
       const target = Object.fromEntries(Object.entries(record(descriptor.target) ?? {}).filter((entry) => typeof entry[1] === "string" && entry[1].length < 8192));
       if (target.source === "current") {
-        target.source = "local";
+        target.source = kind === "kv" || kind === "knowledge" ? storageSource : "local";
         target.projectId = projectId;
       }
       if (target.source && !["local", "server"].includes(target.source)) {
@@ -16235,8 +16266,18 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         }
       }
       const id = string(descriptor.cardId) ?? `${kind}:${JSON.stringify(target)}`;
-      const title = (string(descriptor.title) ?? target.key ?? target.documentId ?? target.filePath ?? target.url ?? target.projectId ?? kind).slice(0, 200);
-      cards.set(id, { id, kind, title, target, itemId: item.id ?? String(index) });
+      const title = (string(descriptor.title) ?? string(record(output?.document)?.title) ?? target.key ?? target.documentId ?? target.filePath ?? target.url ?? target.projectId ?? kind).slice(0, 200);
+      const kanban = record(descriptor.kanban), values = record(kanban?.values);
+      cards.set(id, {
+        id,
+        kind,
+        title,
+        target,
+        itemId: item.id ?? String(index),
+        ...typeof descriptor.preview === "boolean" ? { preview: descriptor.preview } : {},
+        ...typeof descriptor.pinned === "boolean" ? { pinned: descriptor.pinned } : {},
+        ...kind === "kanban" && ["preview", "save"].includes(String(kanban?.mode)) && values && Object.keys(values).length <= 100 && Object.values(values).every((value) => typeof value === "string") ? { kanban: { mode: kanban.mode, values } } : {}
+      });
     }
     return [...cards.values()];
   }
@@ -16430,15 +16471,53 @@ ${JSON.stringify(output.details, null, 2)}` : "");
       this.root = root;
       this.options = options;
       root.className = "message-output";
+      window.addEventListener("message", this.resourceReply);
+      this.resourceTheme.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
     }
     root;
     options;
     views = /* @__PURE__ */ new Map();
     groups = /* @__PURE__ */ new Map();
     activities = /* @__PURE__ */ new Map();
-    update(message, projectId, conversationId, files) {
+    resourceTheme = new MutationObserver(() => this.syncResourceTheme());
+    syncResourceTheme() {
+      for (const frame of this.root.querySelectorAll(".resource-inline > iframe")) {
+        frame.contentWindow?.postMessage({ type: "workflow-host", theme: document.documentElement.dataset.theme }, location.origin);
+      }
+    }
+    resourceReply = (event) => {
+      const reply = event.data;
+      if (event.source !== null || !reply?.requestId) {
+        return;
+      }
+      const card = Array.from(this.root.querySelectorAll(".resource-card")).find((card2) => card2.dataset.requestId === reply.requestId);
+      if (!card) {
+        return;
+      }
+      const preview = card.querySelector(".resource-inline");
+      if (reply.type === "error") {
+        preview.textContent = reply.message;
+        preview.setAttribute("role", "alert");
+      }
+      if (reply.type === "resource-preview" && reply.action === "inline") {
+        const frame = document.createElement("iframe");
+        frame.title = card.querySelector(".resource-title").textContent ?? "";
+        const address = new URL(reply.url, location.href);
+        address.searchParams.set("resourcePresentation", "card");
+        frame.src = address.href;
+        frame.sandbox.add("allow-scripts", "allow-same-origin");
+        frame.addEventListener("load", () => this.syncResourceTheme());
+        preview.replaceChildren(frame);
+        preview.removeAttribute("role");
+      }
+    };
+    dispose() {
+      window.removeEventListener("message", this.resourceReply);
+      this.resourceTheme.disconnect();
+    }
+    update(message, projectId, conversationId, files, storageSource = "local") {
       const items = message.items ?? [];
-      const cards = conversationResourceCards(items, projectId, conversationId);
+      const cards = conversationResourceCards(items, projectId, conversationId, storageSource);
       const cardByItem = new Map(cards.map((card) => [card.itemId, card]));
       const answers = [...new Map([...message.resolvedInputs ?? [], ...message.submittingInput ? [message.submittingInput] : []].map((answer) => [answer.requestId, answer])).values()];
       const ordered = (message.timers ?? []).map((timer) => ({ key: `timer:${timer.timerId}`, timer }));
@@ -16458,14 +16537,18 @@ ${JSON.stringify(output.details, null, 2)}` : "");
       const blocks = [];
       for (const entry of ordered) {
         const content = entry.item?.content;
-        if (content?.tool === "workflow-ui_present_card" && !entry.card) {
+        if (content?.tool === "workflow-ui_present_card" && content.status === "success" && !entry.card) {
           continue;
         }
-        if (entry.item && content?.tool !== "workflow-ui_present_card") {
+        if (entry.item && (content?.tool !== "workflow-ui_present_card" || content.status !== "success")) {
           entry.activity = agentActivity(entry.item, message);
         }
-        if (entry.activity?.kind === "read" && !entry.card) {
-          entry.card = conversationResourceCards([entry.item], projectId, conversationId)[0];
+        if (entry.item && content?.tool !== "workflow-ui_present_card" && !entry.card) {
+          entry.card = conversationResourceCards([entry.item], projectId, conversationId, storageSource)[0];
+        }
+        if (entry.card && entry.card.kind !== "file") {
+          blocks.push({ key: `resource:${entry.key}`, card: entry.card, item: entry.item });
+          continue;
         }
         if (entry.activity) {
           const last = blocks.at(-1);
@@ -16492,7 +16575,7 @@ ${JSON.stringify(output.details, null, 2)}` : "");
             view.signature = signature;
           }
         } else if (!view || view.signature !== signature) {
-          const root = entry.answer ? this.answer(entry.answer, message.submittingInput?.requestId === entry.answer.requestId) : entry.timer ? this.timer(entry.timer) : activity ? this.activity(activity, entry.key, entry.card) : entry.card ? this.card(entry.card) : entry.item ? this.item(entry.item, files) : this.markdown(entry.text ?? "", files);
+          const root = entry.answer ? this.answer(entry.answer, message.submittingInput?.requestId === entry.answer.requestId) : entry.timer ? this.timer(entry.timer) : activity ? this.activity(activity, entry.key, entry.card) : entry.card ? this.card(entry.card, entry.item) : entry.item ? this.item(entry.item, files) : this.markdown(entry.text ?? "", files);
           if (view?.root instanceof HTMLDetailsElement && root instanceof HTMLDetailsElement) {
             root.open = view.root.open;
           }
@@ -16826,13 +16909,67 @@ ${JSON.stringify(output.details, null, 2)}` : "");
       root.append(entry);
       return root;
     }
-    card(card) {
+    card(card, item) {
+      const root = document.createElement("section");
+      root.className = "resource-card";
+      root.dataset.cardId = card.id;
+      const row = document.createElement("div");
+      row.className = "resource-card-row";
       const button = document.createElement("button");
-      button.className = "resource-card";
-      button.title = card.title;
-      button.innerHTML = `${iconHtml(card.kind === "browser" ? "globe" : card.kind === "file" ? "file" : card.kind === "kv" ? "database" : card.kind === "knowledge" ? "book" : "folder")}<span>${escapeHtml(card.title)}</span>${iconHtml("arrow-up-right")}`;
-      button.addEventListener("click", () => this.options.resource(card));
-      return button;
+      button.className = "resource-target";
+      button.title = t2("Open resource");
+      button.innerHTML = `${iconHtml(card.kind === "browser" ? "globe" : card.kind === "file" ? "file" : card.kind === "kv" ? "database" : card.kind === "knowledge" ? "book" : card.kind === "kanban" ? "layout" : "folder")}<span class="resource-title">${escapeHtml(card.title)}</span>`;
+      button.addEventListener("click", () => this.options.resource(card, "open"));
+      const preview = document.createElement("div");
+      preview.className = "resource-inline";
+      preview.hidden = true;
+      const toggle = iconButton("eye", t2("Show in conversation"), () => {
+        preview.hidden = !preview.hidden;
+        toggle.setAttribute("aria-expanded", String(!preview.hidden));
+        toggle.title = preview.hidden ? t2("Show in conversation") : t2("Hide preview");
+        if (preview.hidden) {
+          preview.replaceChildren();
+          delete root.dataset.requestId;
+          return;
+        }
+        const requestId = crypto.randomUUID();
+        root.dataset.requestId = requestId;
+        preview.textContent = t2("Loading...");
+        preview.setAttribute("role", "status");
+        this.options.resource(card, "inline", requestId);
+      });
+      toggle.setAttribute("aria-expanded", "false");
+      toggle.dataset.action = "inline";
+      const separate = iconButton("open-preview", t2("Open in new window"), () => this.options.resource(card, "window"));
+      separate.dataset.action = "window";
+      row.append(button, toggle, separate);
+      root.append(row, preview);
+      if (card.kind === "project" || card.kind === "kanban") {
+        row.append(iconButton("folder-opened", t2("Open project"), () => this.options.resource(card, "project")));
+      }
+      if (item) {
+        const details = document.createElement("div");
+        details.className = "resource-call-details";
+        details.hidden = true;
+        const data = document.createElement("pre");
+        data.textContent = JSON.stringify(item.content, null, 2);
+        details.append(data);
+        const inspect = iconButton("info", t2("Tool call details"), () => {
+          details.hidden = !details.hidden;
+          inspect.setAttribute("aria-expanded", String(!details.hidden));
+        });
+        inspect.setAttribute("aria-expanded", "false");
+        row.append(inspect);
+        root.append(details);
+      }
+      if (card.preview && ["project", "kanban", "browser"].includes(card.kind)) {
+        queueMicrotask(() => {
+          if (root.isConnected) {
+            toggle.click();
+          }
+        });
+      }
+      return root;
     }
   };
 
@@ -17024,11 +17161,14 @@ ${state.user?.avatarUrl ?? ""}`;
   var ConnectionError = class extends Error {
   };
   var BrowserConnection = class {
-    constructor(emit) {
+    constructor(emit, live = true) {
       this.emit = emit;
+      this.live = live;
       if (this.token) {
+        const query = new URLSearchParams(location.search);
+        query.delete("session");
         sessionStorage.setItem("workflow-web-session", this.token);
-        history.replaceState(null, "", `${location.pathname}${location.search}`);
+        history.replaceState(null, "", `${location.pathname}${query.size ? `?${query}` : ""}`);
       }
       queueMicrotask(() => {
         this.banner = document.createElement("div");
@@ -17062,6 +17202,7 @@ ${state.user?.avatarUrl ?? ""}`;
       });
     }
     emit;
+    live;
     clientId = crypto.randomUUID();
     source;
     banner;
@@ -17069,10 +17210,11 @@ ${state.user?.avatarUrl ?? ""}`;
     handshake;
     epoch = 0;
     retry;
+    snapshotTimer;
     status = "connecting";
     attempts = 0;
     closed = false;
-    token = new URLSearchParams(location.hash.slice(1)).get("session") ?? sessionStorage.getItem("workflow-web-session");
+    token = new URLSearchParams(location.hash.slice(1)).get("session") ?? new URLSearchParams(location.search).get("session") ?? sessionStorage.getItem("workflow-web-session");
     update(status) {
       this.status = status;
       this.emit({ type: "connection", status });
@@ -17095,6 +17237,7 @@ ${state.user?.avatarUrl ?? ""}`;
       this.source?.close();
       this.source = void 0;
       clearTimeout(this.retry);
+      clearTimeout(this.snapshotTimer);
     }
     interrupted() {
       this.disconnect();
@@ -17148,6 +17291,10 @@ ${state.user?.avatarUrl ?? ""}`;
           if (!session.ok) {
             throw new Error("Cannot connect to the project.");
           }
+          if (!this.live) {
+            await this.snapshot(epoch);
+            return;
+          }
           const eventsUrl = new URL(this.fileUrl("/api/events"), location.href);
           eventsUrl.searchParams.set("clientId", this.clientId);
           const source = this.source = new EventSource(eventsUrl.href);
@@ -17184,6 +17331,39 @@ ${state.user?.avatarUrl ?? ""}`;
       });
       return this.connecting;
     }
+    async snapshot(epoch) {
+      if (epoch !== this.epoch || this.closed) {
+        return;
+      }
+      const response = await fetch("/api/resource-state", { headers: this.headers(), signal: AbortSignal.timeout(1e4) });
+      if (epoch !== this.epoch || this.closed) {
+        return;
+      }
+      if (response.status === 401) {
+        this.disconnect();
+        this.update("expired");
+        return;
+      }
+      if (!response.ok) {
+        throw new Error("Cannot connect to the project.");
+      }
+      const state = await response.json();
+      if (epoch !== this.epoch || this.closed) {
+        return;
+      }
+      if (this.status !== "connected") {
+        this.attempts = 0;
+        this.update("connected");
+      }
+      this.emit(state);
+      this.snapshotTimer = setTimeout(() => {
+        void this.snapshot(epoch).catch(() => {
+          if (epoch === this.epoch && !this.closed) {
+            this.interrupted();
+          }
+        });
+      }, 5e3);
+    }
     async request(message) {
       await this.connecting;
       if (this.status !== "connected") {
@@ -17229,7 +17409,12 @@ ${state.user?.avatarUrl ?? ""}`;
       return this.token ? { Authorization: `Bearer ${this.token}` } : {};
     }
     fileUrl(path) {
-      return this.token ? `${path}?session=${encodeURIComponent(this.token)}` : path;
+      if (!this.token) {
+        return path;
+      }
+      const url = new URL(path, location.href);
+      url.searchParams.set("session", this.token);
+      return `${url.pathname}${url.search}${url.hash}`;
     }
     publicFiles(value) {
       if (Array.isArray(value)) {
@@ -17386,8 +17571,71 @@ ${state.user?.avatarUrl ?? ""}`;
     }
   };
 
+  // src/web/ui/clipboard-bridge.ts
+  var ClipboardBridge = class {
+    constructor(send, browserWrite, requiresHost = false) {
+      this.send = send;
+      this.browserWrite = browserWrite;
+      this.requiresHost = requiresHost;
+    }
+    send;
+    browserWrite;
+    requiresHost;
+    enabled = false;
+    pending = /* @__PURE__ */ new Map();
+    enable(version) {
+      this.enabled = version === 1;
+    }
+    async writeText(text3) {
+      if (!this.enabled) {
+        if (this.requiresHost) {
+          throw new Error(t2("Host clipboard is unavailable."));
+        }
+        return this.browserWrite(text3);
+      }
+      const requestId = crypto.randomUUID();
+      return new Promise((resolve, reject) => {
+        const timer = setTimeout(() => {
+          this.pending.delete(requestId);
+          reject(new Error(t2("Copy timed out.")));
+        }, 1e4);
+        this.pending.set(requestId, { resolve, reject, timer });
+        try {
+          this.send({ type: "workflow-clipboard", version: 1, command: "writeText", requestId, text: text3 });
+        } catch (error) {
+          clearTimeout(timer);
+          this.pending.delete(requestId);
+          reject(error);
+        }
+      });
+    }
+    receive(reply) {
+      if (reply?.version !== 1 || typeof reply.requestId !== "string" || typeof reply.ok !== "boolean" || reply.error !== void 0 && typeof reply.error !== "string") {
+        return;
+      }
+      const pending = this.pending.get(reply.requestId);
+      if (!pending) {
+        return;
+      }
+      this.pending.delete(reply.requestId);
+      clearTimeout(pending.timer);
+      if (reply.ok) {
+        pending.resolve();
+      } else {
+        pending.reject(new Error(reply.error || t2("Host clipboard is unavailable.")));
+      }
+    }
+    dispose() {
+      for (const pending of this.pending.values()) {
+        clearTimeout(pending.timer);
+        pending.reject(new Error(t2("Connection changed.")));
+      }
+      this.pending.clear();
+    }
+  };
+
   // src/web/ui/host.ts
-  function acquireWorkflowHost() {
+  function acquireWorkflowHost(options = {}) {
     const embedded = globalThis.acquireVsCodeApi;
     if (embedded) {
       return embedded();
@@ -17407,13 +17655,20 @@ ${state.user?.avatarUrl ?? ""}`;
         window.parent.postMessage(message, "*");
       }
     });
+    let resourceHost = false;
+    const clipboard = new ClipboardBridge(
+      (message) => window.parent.postMessage(message, "*"),
+      (text3) => navigator.clipboard.writeText(text3),
+      window.parent !== window && document.body.dataset.accountHost === "true"
+    );
+    addEventListener("pagehide", () => clipboard.dispose());
     const connection = new BrowserConnection((message) => {
       if (message.type === "state" && message.account) {
         accountPanel.update(message.account);
       }
       trace.receive(message);
       emit(message);
-    });
+    }, options.live);
     const request = async (message) => {
       for (const entry of await connection.request(message)) {
         handleReply(entry);
@@ -17429,6 +17684,16 @@ ${state.user?.avatarUrl ?? ""}`;
       if (event.data.traceVersion !== void 0) {
         trace.enable(event.data.traceVersion);
       }
+      if (event.data.clipboardVersion !== void 0) {
+        clipboard.enable(event.data.clipboardVersion);
+      }
+      if (event.data.resourceVersion === 1) {
+        resourceHost = true;
+      }
+      if (event.data.resourceError) {
+        emit(event.data.resourceError);
+      }
+      clipboard.receive(event.data.clipboard);
       const traceCommand = trace.command(event.data.traceCommand);
       if (traceCommand) {
         void request(traceCommand).catch((error) => trace.receive({ type: "trace-run", runId: traceCommand.id, error: error.message }));
@@ -17445,7 +17710,14 @@ ${state.user?.avatarUrl ?? ""}`;
         }
         return;
       }
-      if (reply.type === "download") {
+      if (reply.type === "resource-preview") {
+        reply.url = connection.fileUrl(reply.url);
+        if (reply.action === "inline") {
+          emit(reply);
+        } else {
+          window.open(reply.url, "_blank", "noopener");
+        }
+      } else if (reply.type === "download") {
         const url = URL.createObjectURL(new Blob([reply.content], { type: reply.mimeType ?? "application/json" }));
         const link = document.createElement("a");
         link.href = url;
@@ -17513,6 +17785,29 @@ ${state.user?.avatarUrl ?? ""}`;
         if (message.type === "ready") {
           return;
         }
+        if (message.type === "resource" && message.action !== "inline" && resourceHost) {
+          window.parent.postMessage({ type: "workflow-resource", version: 1, request: message }, "*");
+          return;
+        }
+        if (message.type === "resource" && message.action !== "inline") {
+          const popup = window.open("", "_blank");
+          try {
+            const reply = (await connection.request(message)).find((reply2) => reply2.type === "resource-preview");
+            if (reply && popup) {
+              popup.opener = null;
+              popup.location.href = connection.fileUrl(reply.url);
+            } else {
+              popup?.close();
+              if (reply) {
+                emit({ type: "error", message: t2("Allow popups to open this resource in a new window.") });
+              }
+            }
+          } catch (error) {
+            popup?.close();
+            emit({ type: "error", requestId: message.requestId, message: error.message });
+          }
+          return;
+        }
         if (message.type === "trace") {
           if (trace.open(message)) {
             return;
@@ -17522,8 +17817,13 @@ ${state.user?.avatarUrl ?? ""}`;
           }
         }
         if (message.type === "copy") {
-          void navigator.clipboard.writeText(message.text).catch((error) => emit({ type: "error", message: error.message }));
-          return;
+          try {
+            await clipboard.writeText(message.text);
+          } catch (error) {
+            emit({ type: "error", message: error.message });
+            return false;
+          }
+          return true;
         }
         if (message.type === "attach") {
           chooseFiles(message);
@@ -18249,8 +18549,10 @@ ${state.user?.avatarUrl ?? ""}`;
       error.textContent = message;
       error.hidden = false;
     }
-    function copy2(text3, button) {
-      vscode.postMessage({ type: "copy", text: text3 });
+    async function copy2(text3, button) {
+      if (await vscode.postMessage({ type: "copy", text: text3 }) === false) {
+        return;
+      }
       button.innerHTML = iconHtml("check");
       button.title = t2("Copied");
       setTimeout(() => {
@@ -18285,7 +18587,7 @@ ${state.user?.avatarUrl ?? ""}`;
           plan: (text3) => dialogs.plan(text3),
           file: (id) => post({ type: "open-file", id }),
           image: (src, title) => dialogs.image(src, title),
-          resource: (card) => post({ type: "resource", messageId: view.message.id, cardId: card.id })
+          resource: (card, action, requestId2) => post({ type: "resource", messageId: view.message.id, cardId: card.id, action, requestId: requestId2 })
         });
         const actions = root.querySelector(".message-actions");
         actions.prepend(iconButton("history", t2("Trace"), () => post({ type: "trace", messageId: view.message.id, runId: view.message.runId })));
@@ -18316,7 +18618,7 @@ ${state.user?.avatarUrl ?? ""}`;
       if (message.role === "user") {
         view.content.textContent = message.content;
       } else {
-        view.output.update(message, state.project.id, state.activeId, (currentSession()?.messages ?? []).flatMap((entry) => [...entry.files ?? [], ...entry.attachments ?? []]));
+        view.output.update(message, state.project.id, state.activeId, (currentSession()?.messages ?? []).flatMap((entry) => [...entry.files ?? [], ...entry.attachments ?? []]), state.project.projectInfo?.dataStorage?.mode === "server" ? "server" : "local");
       }
       view.error.textContent = message.error ?? "";
       view.error.hidden = !message.error;
@@ -18407,6 +18709,9 @@ ${state.user?.avatarUrl ?? ""}`;
         draftFiles = session.draft?.attachments ?? [];
         editingQueueId = session.draft?.editingQueueId;
         renderedSession = next.activeId;
+        for (const view of messages.values()) {
+          view.output?.dispose();
+        }
         messages.clear();
         transcript.replaceChildren();
         document.querySelector("#error").hidden = true;
@@ -18449,6 +18754,7 @@ ${state.user?.avatarUrl ?? ""}`;
         });
         for (const [id, view] of messages) {
           if (!active.has(id)) {
+            view.output?.dispose();
             view.root.remove();
             messages.delete(id);
           }

package/dist/web/workflow-workspace.css

@@ -1072,23 +1072,89 @@ main {
   margin-top: 12px;
 }
 .resource-card {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  display: block;
+  width: 100%;
   min-width: 0;
-  max-width: 100%;
-  min-height: 36px;
-  padding: 6px 10px;
+  margin: 8px 0;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--vscode-editor-background);
+  overflow: hidden;
+  container-type: inline-size;
+}
+.resource-card-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 44px;
+  padding: 4px 8px;
+}
+.resource-target {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+  min-height: 36px;
+  padding: 6px 4px;
+  border: 0;
+  background: transparent;
   text-align: left;
 }
-.resource-card > span:not(.codicon) {
+.resource-target > .codicon {
+  flex: none;
+  color: var(--muted);
+}
+.resource-title {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+.resource-card-row > .icon-button {
+  flex: none;
+  width: 28px;
+  height: 28px;
+}
+@container (max-width: 280px) {
+  .resource-card-row {
+    flex-wrap: wrap;
+  }
+  .resource-target {
+    flex-basis: 100%;
+  }
+}
+.resource-inline {
+  height: 360px;
+  max-height: 70vh;
+  min-height: 160px;
+  border-top: 1px solid var(--border);
+  overflow: auto;
+}
+.resource-inline[role] {
+  padding: 12px;
+  color: var(--muted);
+}
+.resource-inline[role=alert] {
+  color: var(--vscode-errorForeground);
+}
+.resource-inline iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.resource-call-details {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  max-height: 320px;
+  overflow: auto;
+}
+.resource-call-details pre {
+  margin: 0;
+  font-size: 11px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 .input-prompt {
   margin: 16px 0;