@pactor-app/chat 1.15.6 → 1.17.0

package/dist/index.js

@@ -118,35 +118,204 @@ var ConversationStore = class {
 };
 
 // src/artifact.ts
+var ARTIFACT_IMAGE_EXTENSIONS = [
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "svg",
+  "webp",
+  "avif",
+  "bmp",
+  "ico"
+];
+function resolveArtifactFileType(artifact) {
+  const declared = artifact.fileType?.trim().toLowerCase().replace(/^\./, "");
+  if (declared) {
+    return declared;
+  }
+  const match = /\.([A-Za-z0-9]+)$/.exec(artifact.title.trim());
+  return match ? match[1].toLowerCase() : null;
+}
+function isImageArtifact(artifact) {
+  const ext = resolveArtifactFileType(artifact);
+  return ext !== null && ARTIFACT_IMAGE_EXTENSIONS.includes(ext);
+}
+var ARTIFACT_ICON_BY_EXTENSION = {
+  // 表格数据（绿）
+  csv: { name: "table", tone: "green" },
+  tsv: { name: "table", tone: "green" },
+  xls: { name: "table", tone: "green" },
+  xlsx: { name: "table", tone: "green" },
+  // 数据 / 数据库（琥珀）
+  json: { name: "database", tone: "amber" },
+  sql: { name: "database", tone: "amber" },
+  // 脚本（蓝，终端图标）
+  sh: { name: "terminal", tone: "blue" },
+  bash: { name: "terminal", tone: "blue" },
+  zsh: { name: "terminal", tone: "blue" },
+  // 代码 / 配置（蓝）
+  js: { name: "code", tone: "blue" },
+  mjs: { name: "code", tone: "blue" },
+  cjs: { name: "code", tone: "blue" },
+  jsx: { name: "code", tone: "blue" },
+  ts: { name: "code", tone: "blue" },
+  mts: { name: "code", tone: "blue" },
+  cts: { name: "code", tone: "blue" },
+  tsx: { name: "code", tone: "blue" },
+  py: { name: "code", tone: "blue" },
+  rb: { name: "code", tone: "blue" },
+  go: { name: "code", tone: "blue" },
+  rs: { name: "code", tone: "blue" },
+  java: { name: "code", tone: "blue" },
+  kt: { name: "code", tone: "blue" },
+  c: { name: "code", tone: "blue" },
+  h: { name: "code", tone: "blue" },
+  cc: { name: "code", tone: "blue" },
+  cpp: { name: "code", tone: "blue" },
+  cs: { name: "code", tone: "blue" },
+  swift: { name: "code", tone: "blue" },
+  php: { name: "code", tone: "blue" },
+  css: { name: "code", tone: "blue" },
+  scss: { name: "code", tone: "blue" },
+  less: { name: "code", tone: "blue" },
+  html: { name: "code", tone: "blue" },
+  vue: { name: "code", tone: "blue" },
+  svelte: { name: "code", tone: "blue" },
+  yaml: { name: "code", tone: "blue" },
+  yml: { name: "code", tone: "blue" },
+  toml: { name: "code", tone: "blue" },
+  xml: { name: "code", tone: "blue" },
+  // 文档 / 文本（石板灰）
+  md: { name: "file-text", tone: "slate" },
+  markdown: { name: "file-text", tone: "slate" },
+  mdx: { name: "file-text", tone: "slate" },
+  txt: { name: "file-text", tone: "slate" },
+  text: { name: "file-text", tone: "slate" },
+  log: { name: "file-text", tone: "slate" },
+  rst: { name: "file-text", tone: "slate" },
+  pdf: { name: "file-text", tone: "slate" },
+  doc: { name: "file-text", tone: "slate" },
+  docx: { name: "file-text", tone: "slate" }
+};
+function resolveArtifactIcon(artifact) {
+  const ext = resolveArtifactFileType(artifact);
+  if (ext !== null) {
+    if (ARTIFACT_IMAGE_EXTENSIONS.includes(ext)) {
+      return { name: "image", tone: "violet" };
+    }
+    const spec = ARTIFACT_ICON_BY_EXTENSION[ext];
+    if (spec !== void 0) {
+      return spec;
+    }
+  }
+  if (artifact.kind === "code") {
+    return { name: "code", tone: "blue" };
+  }
+  if (artifact.kind === "dsl") {
+    return { name: "layout-grid", tone: "slate" };
+  }
+  return ext === null ? { name: "file-text", tone: "slate" } : { name: "file", tone: "slate" };
+}
+function resolveArtifactIconName(artifact) {
+  return resolveArtifactIcon(artifact).name;
+}
+function formatArtifactSize(size) {
+  if (typeof size !== "number" || !Number.isFinite(size) || size < 0) {
+    return null;
+  }
+  if (size < 1024) {
+    return `${size} B`;
+  }
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`;
+  }
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+function collectArtifacts(messages) {
+  const order = [];
+  const byId = /* @__PURE__ */ new Map();
+  for (const message of messages) {
+    for (const part of message.parts) {
+      if (part.type !== "artifact" || !part.artifact) {
+        continue;
+      }
+      if (part.status !== void 0 && part.status !== "ready") {
+        continue;
+      }
+      if (!byId.has(part.artifact.id)) {
+        order.push(part.artifact.id);
+      }
+      byId.set(part.artifact.id, part.artifact);
+    }
+  }
+  return order.map((id) => byId.get(id));
+}
+function mergeArtifacts(stream, opened) {
+  const openedById = new Map(opened.map((item) => [item.id, item]));
+  const merged = stream.map((item) => openedById.get(item.id) ?? item);
+  for (const item of opened) {
+    if (!stream.some((s) => s.id === item.id)) {
+      merged.push(item);
+    }
+  }
+  return merged;
+}
 var ArtifactStore = class {
   constructor() {
-    this.artifact = null;
+    this.artifacts = [];
+    this.activeId = null;
     this.listeners = /* @__PURE__ */ new Set();
   }
-  /** 当前产出物（未打开时为 null；引用在不变时保持稳定） */
+  /** 当前激活产出物（未打开时为 null；引用在不变时保持稳定） */
   get() {
-    return this.artifact;
+    if (this.activeId === null) {
+      return null;
+    }
+    return this.artifacts.find((item) => item.id === this.activeId) ?? null;
   }
-  /** 打开（或替换）当前产出物 */
+  /** 全部产出物（插入序；数组不可变，引用稳定） */
+  list() {
+    return this.artifacts;
+  }
+  /** 打开（或按 id 替换）产出物并激活 */
   open(artifact) {
-    this.artifact = artifact;
+    const index = this.artifacts.findIndex((item) => item.id === artifact.id);
+    this.artifacts = index === -1 ? [...this.artifacts, artifact] : this.artifacts.map((item, i) => i === index ? artifact : item);
+    this.activeId = artifact.id;
     this.notify();
   }
-  /** 部分更新当前产出物（id 不可改）；未 open 时告警并忽略 */
+  /** 切换激活项（未知 id 告警并忽略，不抛错） */
+  activate(id) {
+    if (this.activeId === id) {
+      return;
+    }
+    if (!this.artifacts.some((item) => item.id === id)) {
+      console.warn("[@pactor-app/chat] unknown artifact id, activate ignored");
+      return;
+    }
+    this.activeId = id;
+    this.notify();
+  }
+  /** 部分更新当前激活产出物（id 不可改）；未 open 时告警并忽略 */
   update(patch) {
-    if (!this.artifact) {
+    const current = this.get();
+    if (!current) {
       console.warn("[@pactor-app/chat] artifact not open, update ignored");
       return;
     }
-    this.artifact = { ...this.artifact, ...patch, id: this.artifact.id };
+    const next = { ...current, ...patch, id: current.id };
+    this.artifacts = this.artifacts.map(
+      (item) => item.id === current.id ? next : item
+    );
     this.notify();
   }
-  /** 关闭面板（未打开时幂等，不重复通知） */
+  /** 关闭面板：清空激活项，列表保留（未打开时幂等，不重复通知） */
   close() {
-    if (this.artifact === null) {
+    if (this.activeId === null) {
       return;
     }
-    this.artifact = null;
+    this.activeId = null;
     this.notify();
   }
   /** 订阅变更；返回退订函数 */
@@ -163,6 +332,94 @@ var ArtifactStore = class {
   }
 };
 
+// src/artifact-download.ts
+var KIND_EXTENSIONS = {
+  markdown: "md",
+  text: "txt",
+  code: "txt",
+  dsl: "json"
+};
+function resolveArtifactFilename(artifact) {
+  const title = artifact.title.trim() || "artifact";
+  if (/\.[A-Za-z0-9]+$/.test(title)) {
+    return title;
+  }
+  const ext = resolveArtifactFileType(artifact) ?? KIND_EXTENSIONS[artifact.kind];
+  return `${title}.${ext}`;
+}
+function dataUrlToBlob(dataUrl) {
+  const comma = dataUrl.indexOf(",");
+  const meta = dataUrl.slice(0, comma);
+  const payload = dataUrl.slice(comma + 1);
+  const mime = /^data:([^;,]+)/.exec(meta)?.[1] ?? "application/octet-stream";
+  if (meta.includes(";base64")) {
+    const binary = atob(payload);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return new Blob([bytes], { type: mime });
+  }
+  return new Blob([decodeURIComponent(payload)], { type: mime });
+}
+function isRemoteUrl(raw) {
+  return /^https?:\/\//.test(raw.trim());
+}
+function buildArtifactBlob(artifact) {
+  if (artifact.kind === "dsl" && typeof artifact.content === "object") {
+    return new Blob([JSON.stringify(artifact.content, null, 2)], {
+      type: "application/json"
+    });
+  }
+  const raw = String(artifact.content);
+  if (isImageArtifact(artifact)) {
+    const trimmed = raw.trim();
+    if (trimmed.startsWith("data:")) {
+      return dataUrlToBlob(trimmed);
+    }
+    if (trimmed.startsWith("<svg") || trimmed.startsWith("<?xml")) {
+      return new Blob([raw], { type: "image/svg+xml" });
+    }
+    if (isRemoteUrl(trimmed)) {
+      return null;
+    }
+  }
+  const ext = resolveArtifactFileType(artifact);
+  const mime = ext === "md" || artifact.kind === "markdown" ? "text/markdown" : "text/plain";
+  return new Blob([raw], { type: `${mime};charset=utf-8` });
+}
+function saveBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+async function downloadArtifact(artifact) {
+  const filename = resolveArtifactFilename(artifact);
+  const raw = String(artifact.content ?? "").trim();
+  if (isImageArtifact(artifact) && isRemoteUrl(raw)) {
+    try {
+      const response = await fetch(raw);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      saveBlob(await response.blob(), filename);
+      return;
+    } catch {
+      window.open(raw, "_blank", "noopener");
+      return;
+    }
+  }
+  const blob = buildArtifactBlob(artifact);
+  if (blob) {
+    saveBlob(blob, filename);
+  }
+}
+
 // src/events.ts
 function applyChatEvent(store, event) {
   switch (event.type) {
@@ -806,8 +1063,9 @@ import { useRenderer as useRenderer4 } from "@pactor-app/runtime";
 import {
   Component as Component3,
   isValidElement,
+  useMemo as useMemo4,
   useRef as useRef13,
-  useState as useState15,
+  useState as useState16,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
@@ -866,7 +1124,7 @@ function AppShell({
 }
 
 // src/view/ArtifactPanel.tsx
-import { Icon as Icon3 } from "@pactor-app/ui/components";
+import { Icon as Icon4 } from "@pactor-app/ui/components";
 import { Registry as Registry2 } from "@pactor-app/core";
 import { MarkdownRenderer as MarkdownRenderer2 } from "@pactor-app/markdown";
 import { DslRenderer as DslRenderer2, useRenderer as useRenderer3 } from "@pactor-app/runtime";
@@ -875,11 +1133,11 @@ import {
   useEffect as useEffect3,
   useMemo,
   useRef as useRef4,
-  useState as useState5
+  useState as useState6
 } from "react";
 
 // src/view/PartRenderer.tsx
-import { Icon } from "@pactor-app/ui/components";
+import { Icon as Icon2 } from "@pactor-app/ui/components";
 import { MarkdownRenderer } from "@pactor-app/markdown";
 import { DslRenderer, useRenderer as useRenderer2 } from "@pactor-app/runtime";
 
@@ -921,60 +1179,8 @@ function useThrottledValue(value, intervalMs, enabled) {
 }
 
 // src/view/chrome/artifact-card.tsx
-function buildArtifactCardFragment(artifact) {
-  return {
-    requires: ["Card", "Flex", "Text", "Badge", "Button"],
-    node: {
-      type: "Card",
-      props: { className: "pactor-chat-artifact-card" },
-      children: [
-        {
-          type: "Flex",
-          props: { justify: "space-between", align: "center", gap: "small" },
-          children: [
-            {
-              type: "Text",
-              props: {
-                text: artifact.title,
-                strong: true,
-                className: "pactor-chat-artifact-card__title"
-              }
-            },
-            {
-              type: "Badge",
-              props: {
-                text: artifact.kind,
-                variant: "secondary",
-                className: "pactor-chat-artifact-card__kind"
-              }
-            },
-            {
-              type: "Button",
-              props: {
-                text: "\u5728\u9762\u677F\u4E2D\u6253\u5F00",
-                variant: "default",
-                size: "small",
-                className: "pactor-chat-artifact-card__open"
-              },
-              events: {
-                onClick: [
-                  {
-                    action: "chat.openArtifact",
-                    params: { artifact }
-                  }
-                ]
-              }
-            }
-          ]
-        }
-      ]
-    }
-  };
-}
-
-// src/view/chrome/ChromeSlot.tsx
-import { useRenderer } from "@pactor-app/runtime";
-import { Component } from "react";
+import { Icon } from "@pactor-app/ui/components";
+import { useState as useState5 } from "react";
 
 // src/view/chrome/actions.ts
 var handlers = {};
@@ -1054,9 +1260,125 @@ function ensureChatChromeActions(actions) {
 function invokeChatPanelClose() {
   handlers.panelClose?.();
 }
+function invokeChatOpenArtifact(artifact) {
+  handlers.openArtifact?.(artifact);
+}
+function invokeChatOpenArtifactList() {
+  handlers.openArtifactList?.();
+}
+function invokeChatPanelToggleList() {
+  handlers.panelToggleList?.();
+}
+function invokeChatPanelDownload() {
+  handlers.panelDownload?.();
+}
+
+// src/view/chrome/artifact-card.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function artifactCardMeta(artifact) {
+  const ext = resolveArtifactFileType(artifact);
+  const typeLabel = (ext ?? artifact.kind).toUpperCase();
+  const sizeLabel = formatArtifactSize(artifact.meta?.["size"]);
+  return [sizeLabel, typeLabel].filter(Boolean).join(" \xB7 ");
+}
+function ChatArtifactCard({
+  artifact
+}) {
+  const icon = resolveArtifactIcon(artifact);
+  const meta = artifactCardMeta(artifact);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: `pactor-chat-artifact-card pactor-chat-artifact-card--${icon.tone}`,
+      "data-artifact-kind": artifact.kind,
+      "aria-label": `\u5728\u9762\u677F\u4E2D\u6253\u5F00\uFF1A${artifact.title}`,
+      title: `\u5728\u9762\u677F\u4E2D\u6253\u5F00\uFF1A${artifact.title}`,
+      onClick: () => invokeChatOpenArtifact(artifact),
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "pactor-chat-artifact-card__icon", children: /* @__PURE__ */ jsx2(Icon, { name: icon.name, size: 20 }) }),
+        /* @__PURE__ */ jsxs("span", { className: "pactor-chat-artifact-card__text", children: [
+          /* @__PURE__ */ jsx2("span", { className: "pactor-chat-artifact-card__title", children: artifact.title }),
+          meta ? /* @__PURE__ */ jsx2("span", { className: "pactor-chat-artifact-card__meta", children: meta }) : null
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "pactor-chat-artifact-card__arrow", children: /* @__PURE__ */ jsx2(Icon, { name: "arrow-up-right", size: 14 }) })
+      ]
+    }
+  );
+}
+var ARTIFACT_CARD_INTERNAL_COMPONENTS = {
+  ChatArtifactCard,
+  ChatArtifactCardGroup
+};
+var ARTIFACT_CARD_GROUP_LIMIT = 4;
+function ChatArtifactCardGroup({
+  artifacts
+}) {
+  const [expanded, setExpanded] = useState5(false);
+  const overflow = artifacts.length > ARTIFACT_CARD_GROUP_LIMIT;
+  const visible = overflow && !expanded ? artifacts.slice(0, ARTIFACT_CARD_GROUP_LIMIT) : artifacts;
+  return /* @__PURE__ */ jsxs("div", { className: "pactor-chat-artifact-group", children: [
+    visible.map((artifact) => /* @__PURE__ */ jsx2(ChatArtifactCard, { artifact }, artifact.id)),
+    overflow ? /* @__PURE__ */ jsxs("div", { className: "pactor-chat-artifact-group__footer", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "pactor-chat-artifact-group__toggle",
+          "aria-expanded": expanded,
+          onClick: () => setExpanded((value) => !value),
+          children: [
+            /* @__PURE__ */ jsx2(
+              Icon,
+              {
+                name: expanded ? "chevron-up" : "chevron-down",
+                size: 12
+              }
+            ),
+            expanded ? "\u6536\u8D77" : "\u5C55\u5F00"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "pactor-chat-artifact-group__all",
+          onClick: () => invokeChatOpenArtifactList(),
+          children: [
+            "\u67E5\u770B\u6240\u6709\u4EA7\u7269(",
+            artifacts.length,
+            ")",
+            /* @__PURE__ */ jsx2(Icon, { name: "chevron-right", size: 12 })
+          ]
+        }
+      )
+    ] }) : null
+  ] });
+}
+function buildArtifactCardFragment(artifact) {
+  return {
+    requires: ["ChatArtifactCard"],
+    node: {
+      type: "ChatArtifactCard",
+      props: { artifact }
+    }
+  };
+}
+function buildArtifactCardGroupFragment(artifacts) {
+  return {
+    requires: ["ChatArtifactCardGroup"],
+    node: {
+      type: "ChatArtifactCardGroup",
+      props: { artifacts }
+    }
+  };
+}
 
 // src/view/chrome/ChromeSlot.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+import { useRenderer } from "@pactor-app/runtime";
+import { Component } from "react";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var warnedMissing = /* @__PURE__ */ new Set();
 function warnMissingOnce(key, detail) {
   if (!warnedMissing.has(key)) {
@@ -1074,7 +1396,7 @@ function ChromeSlotInner({
   try {
     renderer = useRenderer();
   } catch {
-    return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx3(Fragment, { children: fallback });
   }
   ensureChatChromeActions(renderer.context.actions);
   if (components) {
@@ -1085,7 +1407,7 @@ function ChromeSlotInner({
           `conflict:${name}`,
           `[@pactor-app/chat] chrome \u5185\u90E8\u7EC4\u4EF6\u540D\u300C${name}\u300D\u88AB\u5BBF\u4E3B\u5360\u7528\uFF0C\u5DF2\u56DE\u9000\u5185\u5EFA\u5B9E\u73B0`
         );
-        return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
+        return /* @__PURE__ */ jsx3(Fragment, { children: fallback });
       }
       if (existing === void 0) {
         renderer.context.components.register(
@@ -1103,10 +1425,10 @@ function ChromeSlotInner({
       `${fragment.node.type}:${missing.join(",")}`,
       `[@pactor-app/chat] chrome DSL \u7247\u6BB5\u6240\u9700\u7EC4\u4EF6\u7C7B\u578B\u7F3A\u5931\uFF08${missing.join(" / ")}\uFF09\uFF0C\u5DF2\u56DE\u9000\u5185\u5EFA\u5B9E\u73B0`
     );
-    return /* @__PURE__ */ jsx2(Fragment, { children: fallback });
+    return /* @__PURE__ */ jsx3(Fragment, { children: fallback });
   }
-  const rendered = /* @__PURE__ */ jsx2("div", { className: "pactor-chat-chrome", children: renderer.renderChildren([fragment.node]) });
-  return wrap ? /* @__PURE__ */ jsx2(Fragment, { children: wrap(rendered) }) : rendered;
+  const rendered = /* @__PURE__ */ jsx3("div", { className: "pactor-chat-chrome", children: renderer.renderChildren([fragment.node]) });
+  return wrap ? /* @__PURE__ */ jsx3(Fragment, { children: wrap(rendered) }) : rendered;
 }
 var ChromeSlotGuard = class extends Component {
   constructor() {
@@ -1121,7 +1443,7 @@ var ChromeSlotGuard = class extends Component {
   }
 };
 function ChromeSlot(props) {
-  return /* @__PURE__ */ jsx2(ChromeSlotGuard, { fallback: props.fallback, children: /* @__PURE__ */ jsx2(ChromeSlotInner, { ...props }) });
+  return /* @__PURE__ */ jsx3(ChromeSlotGuard, { fallback: props.fallback, children: /* @__PURE__ */ jsx3(ChromeSlotInner, { ...props }) });
 }
 
 // src/view/chrome/feedback.tsx
@@ -1145,9 +1467,9 @@ function buildStatusFragment(text) {
 }
 
 // src/view/PartRenderer.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChatDenied({ deniedType }) {
-  return /* @__PURE__ */ jsxs("div", { className: "pactor-chat-denied", "data-pactor-chat-denied": deniedType, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "pactor-chat-denied", "data-pactor-chat-denied": deniedType, children: [
     "\u8BE5\u7EC4\u4EF6\u4E0D\u5141\u8BB8\u5728 Chat \u4E2D\u4F7F\u7528",
     deniedType ? `\uFF1A${deniedType}` : ""
   ] });
@@ -1158,89 +1480,68 @@ function ChatDslNode({
 }) {
   const renderer = useRenderer2();
   const extraScope = scope ? buildChatScope(scope) : void 0;
-  return /* @__PURE__ */ jsx3(Fragment2, { children: renderer.renderChildren([node], extraScope) });
+  return /* @__PURE__ */ jsx4(Fragment2, { children: renderer.renderChildren([node], extraScope) });
 }
 function SmoothText({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ jsx3("div", { className: "pactor-chat-text", children: shown });
+  return /* @__PURE__ */ jsx4("div", { className: "pactor-chat-text", children: shown });
 }
 function SmoothMarkdown({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
   const throttled = useThrottledValue(shown, 100, streaming);
-  return /* @__PURE__ */ jsx3(MarkdownRenderer, { content: throttled });
+  return /* @__PURE__ */ jsx4(MarkdownRenderer, { content: throttled });
 }
-function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact }) {
+function PartRenderer({ part, runtime, scope, streaming = false }) {
   switch (part.type) {
     case "text":
-      return /* @__PURE__ */ jsx3(SmoothText, { content: part.content, streaming });
+      return /* @__PURE__ */ jsx4(SmoothText, { content: part.content, streaming });
     case "markdown":
-      return /* @__PURE__ */ jsx3(SmoothMarkdown, { content: part.content, streaming });
+      return /* @__PURE__ */ jsx4(SmoothMarkdown, { content: part.content, streaming });
     case "thinking":
     case "tool-call":
     case "tool-result":
       return null;
     case "dsl": {
       if (!part.schema || !runtime) {
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx4(
           ChromeSlot,
           {
             fragment: buildStatusFragment(
               part.schema ? "DSL \u6E32\u67D3\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "\u5185\u5BB9\u751F\u6210\u4E2D\u2026"
             ),
-            fallback: /* @__PURE__ */ jsx3("div", { className: "pactor-chat-dsl-pending", children: part.schema ? "DSL \u6E32\u67D3\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "\u5185\u5BB9\u751F\u6210\u4E2D\u2026" })
+            fallback: /* @__PURE__ */ jsx4("div", { className: "pactor-chat-dsl-pending", children: part.schema ? "DSL \u6E32\u67D3\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "\u5185\u5BB9\u751F\u6210\u4E2D\u2026" })
           }
         );
       }
       const guarded = guardChatDsl(part.schema, runtime.context.components);
-      return /* @__PURE__ */ jsx3("div", { className: "pactor-chat-dsl", children: /* @__PURE__ */ jsx3(DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx3(ChatDslNode, { node: guarded, scope }) }) });
+      return /* @__PURE__ */ jsx4("div", { className: "pactor-chat-dsl", children: /* @__PURE__ */ jsx4(DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx4(ChatDslNode, { node: guarded, scope }) }) });
     }
     case "error":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         ChromeSlot,
         {
           fragment: buildErrorFragment(part.message),
-          fallback: /* @__PURE__ */ jsxs("div", { className: "pactor-chat-error", role: "alert", children: [
-            /* @__PURE__ */ jsx3(Icon, { name: "error", size: 14 }),
-            /* @__PURE__ */ jsx3("span", { children: part.message })
+          fallback: /* @__PURE__ */ jsxs2("div", { className: "pactor-chat-error", role: "alert", children: [
+            /* @__PURE__ */ jsx4(Icon2, { name: "error", size: 14 }),
+            /* @__PURE__ */ jsx4("span", { children: part.message })
           ] })
         }
       );
     case "status":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         ChromeSlot,
         {
           fragment: buildStatusFragment(part.text),
-          fallback: /* @__PURE__ */ jsx3("div", { className: "pactor-chat-status", children: part.text })
+          fallback: /* @__PURE__ */ jsx4("div", { className: "pactor-chat-status", children: part.text })
         }
       );
     case "artifact":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         ChromeSlot,
         {
           fragment: buildArtifactCardFragment(part.artifact),
-          fallback: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "pactor-chat-artifact-card",
-              "data-artifact-kind": part.artifact.kind,
-              children: [
-                /* @__PURE__ */ jsx3("span", { className: "pactor-chat-artifact-card__title", children: part.artifact.title }),
-                /* @__PURE__ */ jsx3("span", { className: "pactor-chat-artifact-card__kind", children: part.artifact.kind }),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    className: "pactor-chat-artifact-card__open",
-                    onClick: () => onOpenArtifact?.(part.artifact),
-                    children: [
-                      /* @__PURE__ */ jsx3(Icon, { name: "panel-right-open", size: 13, strokeWidth: 1.7 }),
-                      "\u5728\u9762\u677F\u4E2D\u6253\u5F00"
-                    ]
-                  }
-                )
-              ]
-            }
-          )
+          components: ARTIFACT_CARD_INTERNAL_COMPONENTS,
+          fallback: /* @__PURE__ */ jsx4(ChatArtifactCard, { artifact: part.artifact })
         }
       );
     default:
@@ -1249,10 +1550,17 @@ function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact
 }
 
 // src/view/chrome/panel-header.tsx
-import { Icon as Icon2 } from "@pactor-app/ui/components";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { DropdownMenu, Icon as Icon3 } from "@pactor-app/ui/components";
+import { createContext, useContext } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChatPanelContext = createContext(
+  null
+);
+function artifactIconName(artifact) {
+  return artifact ? resolveArtifactIconName(artifact) : "file";
+}
 function ChatPanelCloseButton() {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "button",
     {
       type: "button",
@@ -1260,14 +1568,99 @@ function ChatPanelCloseButton() {
       title: "\u5173\u95ED\u9762\u677F",
       "aria-label": "\u5173\u95ED\u9762\u677F",
       onClick: () => invokeChatPanelClose(),
-      children: /* @__PURE__ */ jsx4(Icon2, { name: "x", size: 16 })
+      children: /* @__PURE__ */ jsx5(Icon3, { name: "x", size: 16 })
+    }
+  );
+}
+function ChatPanelListButton() {
+  const ctx = useContext(ChatPanelContext);
+  if (ctx?.view === "list") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      className: "pactor-chat-icon-button pactor-chat-inspector__list-toggle",
+      title: "\u4EA7\u7269\u76EE\u5F55",
+      "aria-label": "\u4EA7\u7269\u76EE\u5F55",
+      onClick: () => invokeChatPanelToggleList(),
+      children: /* @__PURE__ */ jsx5(Icon3, { name: "arrow-left", size: 16 })
     }
   );
 }
-var PANEL_HEADER_INTERNAL_COMPONENTS = { ChatPanelCloseButton };
+function ChatPanelDownloadButton() {
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      className: "pactor-chat-icon-button pactor-chat-inspector__download",
+      title: "\u4E0B\u8F7D\u4EA7\u7269",
+      "aria-label": "\u4E0B\u8F7D\u4EA7\u7269",
+      onClick: () => invokeChatPanelDownload(),
+      children: /* @__PURE__ */ jsx5(Icon3, { name: "download", size: 16 })
+    }
+  );
+}
+function ChatPanelArtifactMenu() {
+  const ctx = useContext(ChatPanelContext);
+  if (!ctx || ctx.artifacts.length === 0) {
+    return null;
+  }
+  const active = ctx.artifacts.find((item) => item.id === ctx.activeId);
+  const inList = ctx.view === "list";
+  return /* @__PURE__ */ jsx5(
+    DropdownMenu,
+    {
+      items: ctx.artifacts.map((item) => ({
+        label: item.title,
+        value: item.id,
+        icon: artifactIconName(item)
+      })),
+      onSelect: (value) => {
+        const target = ctx.artifacts.find((item) => item.id === value);
+        if (target) {
+          ctx.onSelectArtifact?.(target);
+        }
+      },
+      children: /* @__PURE__ */ jsxs3(
+        "span",
+        {
+          className: "pactor-chat-inspector__menu-trigger",
+          "data-view": ctx.view,
+          children: [
+            /* @__PURE__ */ jsx5(
+              Icon3,
+              {
+                name: inList ? "folder" : artifactIconName(active),
+                size: 13
+              }
+            ),
+            /* @__PURE__ */ jsx5("span", { className: "pactor-chat-inspector__title", children: inList ? "\u4EA7\u7269\u76EE\u5F55" : active?.title ?? "\u4EA7\u51FA\u7269" }),
+            /* @__PURE__ */ jsx5(Icon3, { name: "chevron-down", size: 12 })
+          ]
+        }
+      )
+    }
+  );
+}
+var PANEL_HEADER_INTERNAL_COMPONENTS = {
+  ChatPanelCloseButton,
+  ChatPanelDownloadButton,
+  ChatPanelListButton,
+  ChatPanelArtifactMenu
+};
 function buildPanelHeaderFragment(props) {
   return {
-    requires: ["Flex", "Text", "Badge", "ChatPanelCloseButton"],
+    requires: [
+      "Flex",
+      "Text",
+      "Badge",
+      "ChatPanelCloseButton",
+      "ChatPanelDownloadButton",
+      "ChatPanelListButton",
+      "ChatPanelArtifactMenu"
+    ],
     node: {
       type: "Flex",
       props: {
@@ -1281,7 +1674,8 @@ function buildPanelHeaderFragment(props) {
           type: "Flex",
           props: { align: "center", gap: "small" },
           children: [
-            {
+            ...props.showListButton ? [{ type: "ChatPanelListButton" }] : [],
+            props.showMenu ? { type: "ChatPanelArtifactMenu" } : {
               type: "Text",
               props: {
                 text: props.title,
@@ -1289,24 +1683,33 @@ function buildPanelHeaderFragment(props) {
                 className: "pactor-chat-inspector__title"
               }
             },
-            {
-              type: "Badge",
-              props: {
-                text: props.kind,
-                variant: "secondary",
-                className: "pactor-chat-inspector__kind"
+            ...props.view === "list" ? [] : [
+              {
+                type: "Badge",
+                props: {
+                  text: props.kind,
+                  variant: "secondary",
+                  className: "pactor-chat-inspector__kind"
+                }
               }
-            }
+            ]
           ]
         },
-        { type: "ChatPanelCloseButton" }
+        {
+          type: "Flex",
+          props: { align: "center", gap: "small" },
+          children: [
+            ...props.showDownload ? [{ type: "ChatPanelDownloadButton" }] : [],
+            { type: "ChatPanelCloseButton" }
+          ]
+        }
       ]
     }
   };
 }
 
 // src/view/ArtifactPanel.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function useArtifactRuntime(safeRegistry, user) {
   return useMemo(() => {
     if (!safeRegistry) {
@@ -1332,12 +1735,12 @@ var ArtifactDslGuard = class extends Component2 {
     console.warn("[@pactor-app/chat] DSL \u4EA7\u51FA\u7269\u6E32\u67D3\u5931\u8D25\uFF0C\u5DF2\u964D\u7EA7\u5C55\u793A", error);
   }
   render() {
-    return this.state.failed ? /* @__PURE__ */ jsx5("div", { className: "pactor-chat-denied", children: "DSL \u4EA7\u51FA\u7269\u6E32\u67D3\u5931\u8D25\uFF0C\u5DF2\u964D\u7EA7\u5C55\u793A" }) : this.props.children;
+    return this.state.failed ? /* @__PURE__ */ jsx6("div", { className: "pactor-chat-denied", children: "DSL \u4EA7\u51FA\u7269\u6E32\u67D3\u5931\u8D25\uFF0C\u5DF2\u964D\u7EA7\u5C55\u793A" }) : this.props.children;
   }
 };
 function ArtifactDslNode({ node }) {
   const { renderChildren } = useRenderer3();
-  return /* @__PURE__ */ jsx5(Fragment3, { children: renderChildren([node]) });
+  return /* @__PURE__ */ jsx6(Fragment3, { children: renderChildren([node]) });
 }
 function ArtifactDslContent({
   content,
@@ -1345,47 +1748,195 @@ function ArtifactDslContent({
 }) {
   const node = typeof content === "object" && content !== null && !Array.isArray(content) && typeof content.type === "string" ? content : void 0;
   if (!node || !runtime) {
-    return /* @__PURE__ */ jsx5("div", { className: "pactor-chat-denied", children: node ? "DSL \u9884\u89C8\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "DSL \u4EA7\u51FA\u7269\u5185\u5BB9\u65E0\u6548" });
+    return /* @__PURE__ */ jsx6("div", { className: "pactor-chat-denied", children: node ? "DSL \u9884\u89C8\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "DSL \u4EA7\u51FA\u7269\u5185\u5BB9\u65E0\u6548" });
   }
   const guarded = guardChatDsl(node, runtime.context.components);
-  return /* @__PURE__ */ jsx5(DslRenderer2, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx5(ArtifactDslGuard, { children: /* @__PURE__ */ jsx5(ArtifactDslNode, { node: guarded }) }) });
+  return /* @__PURE__ */ jsx6(DslRenderer2, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx6(ArtifactDslGuard, { children: /* @__PURE__ */ jsx6(ArtifactDslNode, { node: guarded }) }) });
+}
+function ArtifactKindIcon({ artifact }) {
+  return /* @__PURE__ */ jsx6(Icon4, { name: resolveArtifactIconName(artifact), size: 13 });
+}
+function buildArtifactTree(artifacts) {
+  const root = { name: "", path: "", children: [] };
+  for (const artifact of artifacts) {
+    const segments = artifact.id.split("/").filter(Boolean);
+    let node = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const path = segments.slice(0, i + 1).join("/");
+      let child = node.children.find(
+        (item) => item.path === path && item.artifact === void 0
+      );
+      if (!child) {
+        child = { name: segments[i], path, children: [] };
+        node.children.push(child);
+      }
+      node = child;
+    }
+    node.children.push({
+      name: artifact.title,
+      path: artifact.id,
+      artifact,
+      children: []
+    });
+  }
+  const sortLevel = (nodes) => {
+    nodes.sort((a, b) => {
+      const dirDelta = Number(b.artifact === void 0) - Number(a.artifact === void 0);
+      return dirDelta !== 0 ? dirDelta : a.name.localeCompare(b.name);
+    });
+    for (const item of nodes) {
+      sortLevel(item.children);
+    }
+  };
+  sortLevel(root.children);
+  return root.children;
+}
+function ArtifactListView({
+  nodes,
+  activeId,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx6("ul", { className: "pactor-chat-inspector__list", children: nodes.map((node) => /* @__PURE__ */ jsx6(
+    ArtifactTreeRow,
+    {
+      node,
+      activeId,
+      onSelect
+    },
+    node.path
+  )) });
+}
+function ArtifactTreeRow({
+  node,
+  activeId,
+  onSelect
+}) {
+  const [open, setOpen] = useState6(true);
+  if (node.artifact) {
+    return /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-inspector__list-item",
+        "data-active": node.artifact.id === activeId,
+        onClick: () => onSelect?.(node.artifact),
+        children: [
+          /* @__PURE__ */ jsx6(ArtifactKindIcon, { artifact: node.artifact }),
+          /* @__PURE__ */ jsx6("span", { className: "pactor-chat-inspector__list-item-title", children: node.artifact.title }),
+          /* @__PURE__ */ jsx6("span", { className: "pactor-chat-inspector__kind", children: node.artifact.kind })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs4("li", { children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-inspector__list-folder",
+        "aria-expanded": open,
+        "data-open": open,
+        onClick: () => setOpen((value) => !value),
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx6(Icon4, { name: "chevron-right", size: 12 }) }),
+          /* @__PURE__ */ jsx6(Icon4, { name: "folder", size: 13 }),
+          /* @__PURE__ */ jsx6("span", { children: node.name })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx6("div", { className: "pactor-chat-inspector__list-children", children: /* @__PURE__ */ jsx6(
+      ArtifactListView,
+      {
+        nodes: node.children,
+        activeId,
+        onSelect
+      }
+    ) })
+  ] });
+}
+function ArtifactImageContent({ artifact }) {
+  const raw = String(artifact.content).trim();
+  const src = raw.startsWith("<svg") || raw.startsWith("<?xml") ? `data:image/svg+xml;utf8,${encodeURIComponent(raw)}` : raw;
+  return /* @__PURE__ */ jsx6("div", { className: "pactor-chat-inspector__image", children: /* @__PURE__ */ jsx6("img", { src, alt: artifact.title }) });
 }
 function ArtifactContent({
   artifact,
-  runtime
+  runtime,
+  viewers
 }) {
+  const ext = resolveArtifactFileType(artifact);
+  const custom = (ext ? viewers?.[ext] : void 0) ?? viewers?.[artifact.kind];
+  if (custom) {
+    return /* @__PURE__ */ jsx6(Fragment3, { children: custom(artifact) });
+  }
+  if (isImageArtifact(artifact)) {
+    return /* @__PURE__ */ jsx6(ArtifactImageContent, { artifact });
+  }
   switch (artifact.kind) {
     case "markdown":
-      return /* @__PURE__ */ jsx5(MarkdownRenderer2, { content: String(artifact.content) });
+      return /* @__PURE__ */ jsx6(MarkdownRenderer2, { content: String(artifact.content) });
     case "code":
-      return /* @__PURE__ */ jsxs2("div", { className: "pactor-chat-inspector__code", children: [
-        artifact.language ? /* @__PURE__ */ jsx5("span", { className: "pactor-chat-inspector__code-lang", children: artifact.language }) : null,
-        /* @__PURE__ */ jsx5("pre", { children: /* @__PURE__ */ jsx5("code", { children: String(artifact.content) }) })
+      return /* @__PURE__ */ jsxs4("div", { className: "pactor-chat-inspector__code", children: [
+        artifact.language ? /* @__PURE__ */ jsx6("span", { className: "pactor-chat-inspector__code-lang", children: artifact.language }) : null,
+        /* @__PURE__ */ jsx6("pre", { children: /* @__PURE__ */ jsx6("code", { children: String(artifact.content) }) })
       ] });
     case "text":
-      return /* @__PURE__ */ jsx5("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
+      return /* @__PURE__ */ jsx6("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
     case "dsl":
-      return /* @__PURE__ */ jsx5(ArtifactDslContent, { content: artifact.content, runtime });
+      return /* @__PURE__ */ jsx6(ArtifactDslContent, { content: artifact.content, runtime });
     default:
       return null;
   }
 }
 function ArtifactPanel({
   artifact,
+  artifacts,
+  activeArtifactId,
+  onSelectArtifact,
+  viewRequest,
+  onViewRequestConsumed,
   inspector,
   onClose,
   safeRegistry,
   user,
+  artifactViewers,
   className
 }) {
   const runtime = useArtifactRuntime(safeRegistry, user);
+  const [view, setView] = useState6("content");
+  const activeId = activeArtifactId ?? artifact?.id;
+  useEffect3(() => {
+    setView("content");
+  }, [activeId]);
+  useEffect3(() => {
+    if (viewRequest != null) {
+      setView("list");
+      onViewRequestConsumed?.();
+    }
+  }, [viewRequest]);
+  const showListButton = artifacts !== void 0 && artifacts.length > 0;
+  const showMenu = artifacts !== void 0 && artifacts.length > 0;
+  const toggleListRef = useRef4(() => {
+  });
+  toggleListRef.current = () => setView((value) => value === "list" ? "content" : "list");
   const closeRef = useRef4(onClose);
   closeRef.current = onClose;
+  const artifactRef = useRef4(artifact);
+  artifactRef.current = artifact;
   useEffect3(() => {
-    setChatChromeHandlers({ panelClose: () => closeRef.current?.() });
+    setChatChromeHandlers({
+      panelClose: () => closeRef.current?.(),
+      panelToggleList: () => toggleListRef.current(),
+      panelDownload: () => {
+        const current = artifactRef.current;
+        if (current) {
+          void downloadArtifact(current);
+        }
+      }
+    });
   }, []);
   const panelRef = useRef4(null);
-  const [width, setWidth] = useState5(null);
+  const [width, setWidth] = useState6(null);
   const handleResizeStart = (event) => {
     event.preventDefault();
     const panel = panelRef.current;
@@ -1394,14 +1945,14 @@ function ArtifactPanel({
     }
     const hostRect = panel.parentElement?.getBoundingClientRect();
     const hostWidth = hostRect !== void 0 && hostRect.width > 0 ? hostRect.width : window.innerWidth;
-    const maxWidth = hostWidth * 0.7;
+    const maxWidth = hostWidth * 2 / 3;
     const startWidth = panel.getBoundingClientRect().width;
     const startX = event.clientX;
     const prevUserSelect = document.body.style.userSelect;
     document.body.style.userSelect = "none";
     const onMove = (moveEvent) => {
       const next = startWidth + (startX - moveEvent.clientX);
-      setWidth(Math.round(Math.min(Math.max(next, 240), maxWidth)));
+      setWidth(Math.round(Math.min(Math.max(next, 480), maxWidth)));
     };
     const onUp = () => {
       document.body.style.userSelect = prevUserSelect;
@@ -1411,71 +1962,93 @@ function ArtifactPanel({
     document.addEventListener("pointermove", onMove);
     document.addEventListener("pointerup", onUp);
   };
-  return /* @__PURE__ */ jsxs2(
-    "aside",
+  return /* @__PURE__ */ jsx6(
+    ChatPanelContext.Provider,
     {
-      ref: panelRef,
-      className: `pactor-chat-inspector${className ? ` ${className}` : ""}`,
-      "data-kind": artifact?.kind,
-      style: width !== null ? { width: `${width}px` } : void 0,
-      children: [
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: "pactor-chat-inspector__resize",
-            role: "separator",
-            "aria-orientation": "vertical",
-            "aria-label": "\u62D6\u52A8\u8C03\u6574\u9762\u677F\u5BBD\u5EA6",
-            onPointerDown: handleResizeStart
-          }
-        ),
-        /* @__PURE__ */ jsx5("div", { className: "pactor-chat-inspector__header", children: /* @__PURE__ */ jsx5(
-          ChromeSlot,
-          {
-            fragment: buildPanelHeaderFragment({
-              title: artifact?.title ?? "\u4EA7\u51FA\u7269",
-              kind: artifact?.kind ?? "text"
-            }),
-            components: PANEL_HEADER_INTERNAL_COMPONENTS,
-            fallback: /* @__PURE__ */ jsxs2(Fragment3, { children: [
-              /* @__PURE__ */ jsx5("span", { className: "pactor-chat-inspector__title", children: artifact?.title ?? "\u4EA7\u51FA\u7269" }),
-              artifact ? /* @__PURE__ */ jsx5("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
-              /* @__PURE__ */ jsx5(
-                "button",
-                {
-                  type: "button",
-                  className: "pactor-chat-icon-button pactor-chat-inspector__close",
-                  "aria-label": "\u5173\u95ED\u9762\u677F",
-                  onClick: onClose,
-                  children: /* @__PURE__ */ jsx5(Icon3, { name: "x", size: 16, strokeWidth: 1.7 })
-                }
-              )
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsx5("div", { className: "pactor-chat-inspector__body", children: inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ jsx5(ArtifactContent, { artifact, runtime }) : null })
-      ]
+      value: {
+        artifacts: artifacts ?? [],
+        activeId,
+        view,
+        onSelectArtifact
+      },
+      children: /* @__PURE__ */ jsxs4(
+        "aside",
+        {
+          ref: panelRef,
+          className: `pactor-chat-inspector${className ? ` ${className}` : ""}`,
+          "data-kind": artifact?.kind,
+          style: width !== null ? { width: `${width}px` } : void 0,
+          children: [
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: "pactor-chat-inspector__resize",
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": "\u62D6\u52A8\u8C03\u6574\u9762\u677F\u5BBD\u5EA6",
+                onPointerDown: handleResizeStart
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { className: "pactor-chat-inspector__header", children: /* @__PURE__ */ jsx6(
+              ChromeSlot,
+              {
+                fragment: buildPanelHeaderFragment({
+                  title: view === "list" ? "\u4EA7\u7269\u76EE\u5F55" : artifact?.title ?? "\u4EA7\u51FA\u7269",
+                  kind: artifact?.kind ?? "text",
+                  showListButton,
+                  showDownload: artifact != null,
+                  showMenu,
+                  view
+                }),
+                components: PANEL_HEADER_INTERNAL_COMPONENTS,
+                fallback: /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                  showListButton ? /* @__PURE__ */ jsx6(ChatPanelListButton, {}) : null,
+                  showMenu ? /* @__PURE__ */ jsx6(ChatPanelArtifactMenu, {}) : /* @__PURE__ */ jsx6("span", { className: "pactor-chat-inspector__title", children: view === "list" ? "\u4EA7\u7269\u76EE\u5F55" : artifact?.title ?? "\u4EA7\u51FA\u7269" }),
+                  view !== "list" && artifact ? /* @__PURE__ */ jsx6("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
+                  artifact ? /* @__PURE__ */ jsx6(ChatPanelDownloadButton, {}) : null,
+                  /* @__PURE__ */ jsx6(ChatPanelCloseButton, {})
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ jsx6("div", { className: "pactor-chat-inspector__body", children: view === "list" && artifacts !== void 0 ? /* @__PURE__ */ jsx6(
+              ArtifactListView,
+              {
+                nodes: buildArtifactTree(artifacts),
+                activeId,
+                onSelect: onSelectArtifact
+              }
+            ) : inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ jsx6(
+              ArtifactContent,
+              {
+                artifact,
+                runtime,
+                viewers: artifactViewers
+              }
+            ) : null })
+          ]
+        }
+      )
     }
   );
 }
 
 // src/view/ChatView.tsx
-import { Icon as Icon9 } from "@pactor-app/ui/components";
+import { Icon as Icon10 } from "@pactor-app/ui/components";
 import { Registry as Registry3 } from "@pactor-app/core";
-import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef11, useState as useState13, useSyncExternalStore } from "react";
+import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef11, useState as useState14, useSyncExternalStore } from "react";
 
 // src/view/Composer.tsx
-import { Icon as Icon6 } from "@pactor-app/ui/components";
-import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef7, useState as useState9 } from "react";
+import { Icon as Icon7 } from "@pactor-app/ui/components";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef7, useState as useState10 } from "react";
 
 // src/view/AnchoredPopover.tsx
 import {
   useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef5,
-  useState as useState6
+  useState as useState7
 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function AnchoredPopover({
   anchorRect,
   onClose,
@@ -1485,7 +2058,7 @@ function AnchoredPopover({
   sideOffset = 8
 }) {
   const ref = useRef5(null);
-  const [position, setPosition] = useState6(null);
+  const [position, setPosition] = useState7(null);
   useLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -1532,7 +2105,7 @@ function AnchoredPopover({
     position?.below ? "pactor-chat-popover--below" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ref,
@@ -1551,8 +2124,8 @@ function AnchoredPopover({
 }
 
 // src/view/ModelChip.tsx
-import { Icon as Icon4 } from "@pactor-app/ui/components";
-import { useEffect as useEffect5, useRef as useRef6, useState as useState7 } from "react";
+import { Icon as Icon5 } from "@pactor-app/ui/components";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 
 // src/view/chrome/model-select.tsx
 function buildModelSelectFragment(props) {
@@ -1578,17 +2151,17 @@ function buildModelSelectFragment(props) {
 }
 
 // src/view/ModelChip.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function ModelChip({
   models,
   model,
   onModelChange
 }) {
   const chipRef = useRef6(null);
-  const [anchor, setAnchor] = useState7(null);
+  const [anchor, setAnchor] = useState8(null);
   const currentOption = models.find((option) => option.value === model) ?? models[0];
-  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         ref: chipRef,
@@ -1598,18 +2171,18 @@ function ModelChip({
         "aria-label": "\u9009\u62E9\u6A21\u578B",
         onClick: () => setAnchor(chipRef.current.getBoundingClientRect()),
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "pactor-chat-model-chip__label", children: currentOption.label }),
-          /* @__PURE__ */ jsx7(Icon4, { name: "chevrons-up-down", size: 12 })
+          /* @__PURE__ */ jsx8("span", { className: "pactor-chat-model-chip__label", children: currentOption.label }),
+          /* @__PURE__ */ jsx8(Icon5, { name: "chevrons-up-down", size: 12 })
         ]
       }
     ),
-    anchor && /* @__PURE__ */ jsx7(
+    anchor && /* @__PURE__ */ jsx8(
       AnchoredPopover,
       {
         anchorRect: anchor,
         onClose: () => setAnchor(null),
         role: "listbox",
-        children: models.map((option) => /* @__PURE__ */ jsxs3(
+        children: models.map((option) => /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -1621,8 +2194,8 @@ function ModelChip({
               setAnchor(null);
             },
             children: [
-              /* @__PURE__ */ jsx7("span", { className: "pactor-chat-popover__item-label", children: option.label }),
-              option.value === currentOption.value && /* @__PURE__ */ jsx7(Icon4, { name: "check", size: 13, className: "pactor-chat-popover__item-check" })
+              /* @__PURE__ */ jsx8("span", { className: "pactor-chat-popover__item-label", children: option.label }),
+              option.value === currentOption.value && /* @__PURE__ */ jsx8(Icon5, { name: "check", size: 13, className: "pactor-chat-popover__item-check" })
             ]
           },
           option.value
@@ -1643,24 +2216,24 @@ function ModelSelect({
       modelChange: (value) => changeRef.current?.(value)
     });
   }, []);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ChromeSlot,
     {
       fragment: buildModelSelectFragment({ models, model }),
-      fallback: /* @__PURE__ */ jsx7(ModelChip, { models, model, onModelChange })
+      fallback: /* @__PURE__ */ jsx8(ModelChip, { models, model, onModelChange })
     }
   );
 }
 
 // src/view/chrome/composer.tsx
-import { Icon as Icon5 } from "@pactor-app/ui/components";
-import { createContext, useContext } from "react";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var ComposerBridgeContext = createContext(
+import { Icon as Icon6 } from "@pactor-app/ui/components";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var ComposerBridgeContext = createContext2(
   null
 );
 function useComposerBridge() {
-  const bridge = useContext(ComposerBridgeContext);
+  const bridge = useContext2(ComposerBridgeContext);
   if (!bridge) {
     throw new Error(
       "[@pactor-app/chat] ChatComposer* \u5185\u90E8\u7EC4\u4EF6\u4EC5\u53EF\u5728 Composer chrome \u7247\u6BB5\u5185\u6E32\u67D3"
@@ -1685,21 +2258,21 @@ function ComposerAttachments({
   if (attachments.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx8("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
+  return /* @__PURE__ */ jsx9("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
     const isImage = attachment.mimeType.startsWith("image/");
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "pactor-chat-composer__attachment",
         "data-attachment-id": attachment.id,
         onClick: () => onClick?.(attachment),
         children: [
-          isImage && attachment.url ? /* @__PURE__ */ jsx8("span", { className: "pactor-chat-composer__attachment-thumb", children: /* @__PURE__ */ jsx8("img", { src: attachment.url, alt: attachment.name }) }) : /* @__PURE__ */ jsxs4("span", { className: "pactor-chat-composer__attachment-info", children: [
-            /* @__PURE__ */ jsx8(Icon5, { name: "file-text", size: 14 }),
-            /* @__PURE__ */ jsx8("span", { className: "pactor-chat-composer__attachment-name", children: attachment.name }),
-            attachment.size !== void 0 && /* @__PURE__ */ jsx8("span", { className: "pactor-chat-composer__attachment-size", children: formatSize(attachment.size) })
+          isImage && attachment.url ? /* @__PURE__ */ jsx9("span", { className: "pactor-chat-composer__attachment-thumb", children: /* @__PURE__ */ jsx9("img", { src: attachment.url, alt: attachment.name }) }) : /* @__PURE__ */ jsxs6("span", { className: "pactor-chat-composer__attachment-info", children: [
+            /* @__PURE__ */ jsx9(Icon6, { name: "file-text", size: 14 }),
+            /* @__PURE__ */ jsx9("span", { className: "pactor-chat-composer__attachment-name", children: attachment.name }),
+            attachment.size !== void 0 && /* @__PURE__ */ jsx9("span", { className: "pactor-chat-composer__attachment-size", children: formatSize(attachment.size) })
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -1710,7 +2283,7 @@ function ComposerAttachments({
                 event.stopPropagation();
                 onRemove(attachment.id);
               },
-              children: /* @__PURE__ */ jsx8(Icon5, { name: "x", size: 12 })
+              children: /* @__PURE__ */ jsx9(Icon6, { name: "x", size: 12 })
             }
           )
         ]
@@ -1726,14 +2299,14 @@ function ComposerContextChips({
   if (chips.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx8("div", { className: "pactor-chat-composer__contexts", children: chips.map((chip) => /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx9("div", { className: "pactor-chat-composer__contexts", children: chips.map((chip) => /* @__PURE__ */ jsxs6(
     "span",
     {
       className: "pactor-chat-context-chip",
       "data-context-id": chip.id,
       children: [
-        /* @__PURE__ */ jsx8("span", { className: "pactor-chat-context-chip__label", children: chip.label }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("span", { className: "pactor-chat-context-chip__label", children: chip.label }),
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1741,7 +2314,7 @@ function ComposerContextChips({
             title: `\u79FB\u9664\u4E0A\u4E0B\u6587 ${chip.label}`,
             "aria-label": `\u79FB\u9664\u4E0A\u4E0B\u6587 ${chip.label}`,
             onClick: () => onRemove(chip),
-            children: /* @__PURE__ */ jsx8(Icon5, { name: "x", size: 12 })
+            children: /* @__PURE__ */ jsx9(Icon6, { name: "x", size: 12 })
           }
         )
       ]
@@ -1751,8 +2324,8 @@ function ComposerContextChips({
 }
 function ChatComposerHeader() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
-    bridge.attachments !== void 0 && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    bridge.attachments !== void 0 && /* @__PURE__ */ jsx9(
       ComposerAttachments,
       {
         attachments: bridge.attachments,
@@ -1760,7 +2333,7 @@ function ChatComposerHeader() {
         onClick: bridge.attachmentClick
       }
     ),
-    bridge.contextChips !== void 0 && /* @__PURE__ */ jsx8(
+    bridge.contextChips !== void 0 && /* @__PURE__ */ jsx9(
       ComposerContextChips,
       {
         chips: bridge.contextChips,
@@ -1771,9 +2344,9 @@ function ChatComposerHeader() {
 }
 function ChatComposerToolbarStart() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
     bridge.toolbarStart,
-    bridge.showPlus && /* @__PURE__ */ jsx8(
+    bridge.showPlus && /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1781,10 +2354,10 @@ function ChatComposerToolbarStart() {
         title: "\u66F4\u591A\u529F\u80FD",
         "aria-label": "\u66F4\u591A\u529F\u80FD",
         onClick: (event) => bridge.plusClick(event.currentTarget.getBoundingClientRect()),
-        children: /* @__PURE__ */ jsx8(Icon5, { name: "plus", size: 14 })
+        children: /* @__PURE__ */ jsx9(Icon6, { name: "plus", size: 14 })
       }
     ),
-    bridge.showAttach && /* @__PURE__ */ jsx8(
+    bridge.showAttach && /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1792,15 +2365,15 @@ function ChatComposerToolbarStart() {
         title: "\u6DFB\u52A0\u9644\u4EF6",
         "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
         onClick: bridge.openFilePicker,
-        children: /* @__PURE__ */ jsx8(Icon5, { name: "paperclip", size: 14 })
+        children: /* @__PURE__ */ jsx9(Icon6, { name: "paperclip", size: 14 })
       }
     )
   ] });
 }
 function ChatComposerToolbarEnd() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
-    bridge.modelChipEnabled && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    bridge.modelChipEnabled && /* @__PURE__ */ jsx9(
       ModelSelect,
       {
         models: bridge.models,
@@ -1809,7 +2382,7 @@ function ChatComposerToolbarEnd() {
       }
     ),
     bridge.toolbarEnd,
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1818,14 +2391,14 @@ function ChatComposerToolbarEnd() {
         "aria-label": bridge.streaming ? "\u505C\u6B62\u751F\u6210" : "\u53D1\u9001",
         disabled: bridge.streaming ? false : bridge.disabled || !bridge.text.trim(),
         onClick: bridge.streaming ? bridge.stop : bridge.send,
-        children: bridge.streaming ? /* @__PURE__ */ jsx8(Icon5, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ jsx8(Icon5, { name: "arrow-up", size: 16 })
+        children: bridge.streaming ? /* @__PURE__ */ jsx9(Icon6, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ jsx9(Icon6, { name: "arrow-up", size: 16 })
       }
     )
   ] });
 }
 function ChatComposerFooter() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ jsx8(Fragment5, { children: bridge.composerFooter });
+  return /* @__PURE__ */ jsx9(Fragment5, { children: bridge.composerFooter });
 }
 var COMPOSER_INTERNAL_COMPONENTS = {
   ChatComposerHeader,
@@ -1866,8 +2439,8 @@ function buildComposerFragment(props) {
 }
 
 // src/view/context-sources.tsx
-import { useEffect as useEffect6, useState as useState8 } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useState as useState9 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function sourceCacheKey(source) {
   return `${source.service ?? ""}:${JSON.stringify(source.params ?? {})}`;
 }
@@ -1902,7 +2475,7 @@ function ContextSourceList({
   cache,
   onSelect
 }) {
-  const [resolutions, setResolutions] = useState8([]);
+  const [resolutions, setResolutions] = useState9([]);
   useEffect6(() => {
     let cancelled = false;
     const initial = sources.map(
@@ -1948,12 +2521,12 @@ function ContextSourceList({
     totalMatched += items.length;
     return { source, resolution, items };
   });
-  return /* @__PURE__ */ jsxs5("div", { className: "pactor-chat-source-list", children: [
-    groups.map(({ source, resolution, items }) => /* @__PURE__ */ jsxs5("div", { className: "pactor-chat-source-list__group", children: [
-      sources.length > 1 && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__group-label", children: source.label }),
-      resolution.status === "loading" && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__hint", children: "\u52A0\u8F7D\u4E2D\u2026" }),
-      resolution.status === "error" && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__error", role: "alert", children: resolution.message }),
-      items.map((item) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("div", { className: "pactor-chat-source-list", children: [
+    groups.map(({ source, resolution, items }) => /* @__PURE__ */ jsxs7("div", { className: "pactor-chat-source-list__group", children: [
+      sources.length > 1 && /* @__PURE__ */ jsx10("div", { className: "pactor-chat-source-list__group-label", children: source.label }),
+      resolution.status === "loading" && /* @__PURE__ */ jsx10("div", { className: "pactor-chat-source-list__hint", children: "\u52A0\u8F7D\u4E2D\u2026" }),
+      resolution.status === "error" && /* @__PURE__ */ jsx10("div", { className: "pactor-chat-source-list__error", role: "alert", children: resolution.message }),
+      items.map((item) => /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -1964,12 +2537,12 @@ function ContextSourceList({
         item.id
       ))
     ] }, `${source.trigger}:${source.label}`)),
-    totalMatched === 0 && groups.every(({ resolution }) => resolution.status === "ready") && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__hint", children: "\u65E0\u5339\u914D\u9879" })
+    totalMatched === 0 && groups.every(({ resolution }) => resolution.status === "ready") && /* @__PURE__ */ jsx10("div", { className: "pactor-chat-source-list__hint", children: "\u65E0\u5339\u914D\u9879" })
   ] });
 }
 
 // src/view/Composer.tsx
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var MAX_INPUT_HEIGHT = 200;
 function detectMention(text, caret) {
   const beforeCaret = text.slice(0, caret);
@@ -2003,8 +2576,8 @@ function Composer({
   composerFooter,
   hideToolbar = false
 }) {
-  const [text, setText] = useState9("");
-  const [dragOver, setDragOver] = useState9(false);
+  const [text, setText] = useState10("");
+  const [dragOver, setDragOver] = useState10(false);
   const inputRef = useRef7(null);
   const fileInputRef = useRef7(null);
   const plusButtonRef = useRef7(null);
@@ -2020,8 +2593,8 @@ function Composer({
   );
   const builtinMentionEnabled = onMentionTrigger === void 0 && mentionSources.length > 0;
   const builtinPlusEnabled = onPlusMenu === void 0 && plusSources.length > 0;
-  const [mentionState, setMentionState] = useState9(null);
-  const [plusAnchor, setPlusAnchor] = useState9(null);
+  const [mentionState, setMentionState] = useState10(null);
+  const [plusAnchor, setPlusAnchor] = useState10(null);
   const sourceCacheRef = useRef7(null);
   if (sourceCacheRef.current === null) {
     sourceCacheRef.current = /* @__PURE__ */ new Map();
@@ -2116,7 +2689,7 @@ function Composer({
     }
   };
   const showToolbar = !hideToolbar && (toolbarStart !== void 0 || toolbarEnd !== void 0 || onPlusMenu !== void 0 || builtinPlusEnabled || onAttachFiles !== void 0 || modelChipEnabled);
-  const fileInputNode = onAttachFiles ? /* @__PURE__ */ jsx10(
+  const fileInputNode = onAttachFiles ? /* @__PURE__ */ jsx11(
     "input",
     {
       ref: fileInputRef,
@@ -2132,14 +2705,14 @@ function Composer({
       }
     }
   ) : null;
-  const popoverNodes = /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    builtinMentionEnabled && mentionState && /* @__PURE__ */ jsx10(
+  const popoverNodes = /* @__PURE__ */ jsxs8(Fragment6, { children: [
+    builtinMentionEnabled && mentionState && /* @__PURE__ */ jsx11(
       AnchoredPopover,
       {
         anchorRect: mentionState.anchorRect,
         onClose: () => setMentionState(null),
         role: "listbox",
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           ContextSourceList,
           {
             sources: mentionSources,
@@ -2151,13 +2724,13 @@ function Composer({
         )
       }
     ),
-    builtinPlusEnabled && plusAnchor && /* @__PURE__ */ jsx10(
+    builtinPlusEnabled && plusAnchor && /* @__PURE__ */ jsx11(
       AnchoredPopover,
       {
         anchorRect: plusAnchor,
         onClose: () => setPlusAnchor(null),
         role: "listbox",
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           ContextSourceList,
           {
             sources: plusSources,
@@ -2170,13 +2743,13 @@ function Composer({
       }
     )
   ] });
-  const fallback = /* @__PURE__ */ jsxs6(
+  const fallback = /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `pactor-chat-composer${dragOver ? " pactor-chat-composer--dragover" : ""}`,
       ...dragHandlers,
       children: [
-        attachments !== void 0 && /* @__PURE__ */ jsx10(
+        attachments !== void 0 && /* @__PURE__ */ jsx11(
           ComposerAttachments,
           {
             attachments,
@@ -2184,7 +2757,7 @@ function Composer({
             onClick: onAttachmentClick
           }
         ),
-        contextChips !== void 0 && /* @__PURE__ */ jsx10(
+        contextChips !== void 0 && /* @__PURE__ */ jsx11(
           ComposerContextChips,
           {
             chips: contextChips,
@@ -2195,8 +2768,8 @@ function Composer({
             )
           }
         ),
-        /* @__PURE__ */ jsxs6("div", { className: "pactor-chat-composer__row", children: [
-          /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs8("div", { className: "pactor-chat-composer__row", children: [
+          /* @__PURE__ */ jsx11(
             "textarea",
             {
               ref: inputRef,
@@ -2228,7 +2801,7 @@ function Composer({
               }
             }
           ),
-          hideToolbar ? null : /* @__PURE__ */ jsx10(
+          hideToolbar ? null : /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -2237,14 +2810,14 @@ function Composer({
               "aria-label": streaming ? "\u505C\u6B62\u751F\u6210" : "\u53D1\u9001",
               disabled: streaming ? false : disabled || !text.trim(),
               onClick: streaming ? onStop : send,
-              children: streaming ? /* @__PURE__ */ jsx10(Icon6, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ jsx10(Icon6, { name: "arrow-up", size: 16 })
+              children: streaming ? /* @__PURE__ */ jsx11(Icon7, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ jsx11(Icon7, { name: "arrow-up", size: 16 })
             }
           )
         ] }),
-        showToolbar && /* @__PURE__ */ jsxs6("div", { className: "pactor-chat-composer__toolbar", children: [
+        showToolbar && /* @__PURE__ */ jsxs8("div", { className: "pactor-chat-composer__toolbar", children: [
           toolbarStart,
-          /* @__PURE__ */ jsx10("span", { className: "pactor-chat-composer__toolbar-spacer" }),
-          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11("span", { className: "pactor-chat-composer__toolbar-spacer" }),
+          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ jsx11(
             "button",
             {
               ref: plusButtonRef,
@@ -2260,10 +2833,10 @@ function Composer({
                   setPlusAnchor(rect);
                 }
               },
-              children: /* @__PURE__ */ jsx10(Icon6, { name: "plus", size: 14 })
+              children: /* @__PURE__ */ jsx11(Icon7, { name: "plus", size: 14 })
             }
           ),
-          onAttachFiles && /* @__PURE__ */ jsx10(
+          onAttachFiles && /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -2271,10 +2844,10 @@ function Composer({
               title: "\u6DFB\u52A0\u9644\u4EF6",
               "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
               onClick: () => fileInputRef.current?.click(),
-              children: /* @__PURE__ */ jsx10(Icon6, { name: "paperclip", size: 14 })
+              children: /* @__PURE__ */ jsx11(Icon7, { name: "paperclip", size: 14 })
             }
           ),
-          modelChipEnabled && /* @__PURE__ */ jsx10(
+          modelChipEnabled && /* @__PURE__ */ jsx11(
             ModelSelect,
             {
               models,
@@ -2284,7 +2857,7 @@ function Composer({
           ),
           toolbarEnd
         ] }),
-        composerFooter !== void 0 && composerFooter !== null ? /* @__PURE__ */ jsx10("div", { className: "pactor-chat-composer__footer", children: composerFooter }) : null,
+        composerFooter !== void 0 && composerFooter !== null ? /* @__PURE__ */ jsx11("div", { className: "pactor-chat-composer__footer", children: composerFooter }) : null,
         fileInputNode,
         popoverNodes
       ]
@@ -2323,7 +2896,7 @@ function Composer({
     ),
     modelChange: onModelChange
   };
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     ChromeSlot,
     {
       fragment: buildComposerFragment({
@@ -2334,7 +2907,7 @@ function Composer({
       }),
       components: COMPOSER_INTERNAL_COMPONENTS,
       fallback,
-      wrap: (children) => /* @__PURE__ */ jsx10(ComposerBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ jsxs6(
+      wrap: (children) => /* @__PURE__ */ jsx11(ComposerBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ jsxs8(
         "div",
         {
           className: `pactor-chat-composer pactor-chat-composer--dsl${dragOver ? " pactor-chat-composer--dragover" : ""}`,
@@ -2422,7 +2995,7 @@ function buildEmptyStateFragment(props) {
 }
 
 // src/view/EmptyState.tsx
-import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_CHAT_GREETING = "\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u4F60\uFF1F";
 function suggestionLabel2(suggestion) {
   return typeof suggestion === "string" ? suggestion : suggestion.label;
@@ -2436,10 +3009,10 @@ function EmptyStateFallback({
   onSuggestionClick,
   greeting
 }) {
-  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
-    /* @__PURE__ */ jsx11("div", { className: "pactor-chat-empty__greeting", children: greeting }),
-    subtitle && /* @__PURE__ */ jsx11("div", { className: "pactor-chat-empty__subtitle", children: subtitle }),
-    suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx11("div", { className: "pactor-chat-empty__suggestions", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9(Fragment7, { children: [
+    /* @__PURE__ */ jsx12("div", { className: "pactor-chat-empty__greeting", children: greeting }),
+    subtitle && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-empty__subtitle", children: subtitle }),
+    suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-empty__suggestions", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
@@ -2457,11 +3030,11 @@ function EmptyState({
   suggestions,
   onSuggestionClick
 }) {
-  return /* @__PURE__ */ jsx11("div", { className: "pactor-chat-empty", children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("div", { className: "pactor-chat-empty", children: /* @__PURE__ */ jsx12(
     ChromeSlot,
     {
       fragment: buildEmptyStateFragment({ greeting, subtitle, suggestions }),
-      fallback: /* @__PURE__ */ jsx11(
+      fallback: /* @__PURE__ */ jsx12(
         EmptyStateFallback,
         {
           greeting,
@@ -2475,16 +3048,20 @@ function EmptyState({
 }
 
 // src/view/MessageBubble.tsx
-import { useRef as useRef10, useState as useState12 } from "react";
+import { useRef as useRef10, useState as useState13 } from "react";
 
 // src/view/ActivityTrace.tsx
-import { Icon as Icon7 } from "@pactor-app/ui/components";
+import { Icon as Icon8 } from "@pactor-app/ui/components";
 import { MarkdownRenderer as MarkdownRenderer3 } from "@pactor-app/markdown";
-import { useEffect as useEffect7, useRef as useRef8, useState as useState10 } from "react";
-import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef8, useState as useState11 } from "react";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function usePinnedCollapse(autoOpen) {
-  const [state, setState] = useState10("auto");
-  const open = state === "auto" ? autoOpen : state === "pinned-open";
+  const [state, setState] = useState11("auto");
+  const autoCollapsedRef = useRef8(false);
+  if (state === "auto" && !autoOpen) {
+    autoCollapsedRef.current = true;
+  }
+  const open = state === "auto" ? autoOpen && !autoCollapsedRef.current : state === "pinned-open";
   const toggle = () => {
     setState(open ? "pinned-closed" : "pinned-open");
   };
@@ -2509,7 +3086,7 @@ function statusText(message, mode, toolCount) {
 }
 function useElapsedSeconds(startedAt, active) {
   const compute = () => Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
-  const [elapsed, setElapsed] = useState10(compute);
+  const [elapsed, setElapsed] = useState11(compute);
   useEffect7(() => {
     if (!active) {
       setElapsed(compute());
@@ -2524,15 +3101,15 @@ function useElapsedSeconds(startedAt, active) {
 }
 function TraceStatusIcon({ status }) {
   if (status === "running") {
-    return /* @__PURE__ */ jsx12(Icon7, { name: "loading", size: 13, className: "pactor-chat-spin" });
+    return /* @__PURE__ */ jsx13(Icon8, { name: "loading", size: 13, className: "pactor-chat-spin" });
   }
   if (status === "success") {
-    return /* @__PURE__ */ jsx12(Icon7, { name: "check-circle", size: 13 });
+    return /* @__PURE__ */ jsx13(Icon8, { name: "check-circle", size: 13 });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ jsx12(Icon7, { name: "x-circle", size: 13 });
+    return /* @__PURE__ */ jsx13(Icon8, { name: "x-circle", size: 13 });
   }
-  return /* @__PURE__ */ jsx12(Icon7, { name: "clock", size: 13 });
+  return /* @__PURE__ */ jsx13(Icon8, { name: "clock", size: 13 });
 }
 function summarizeArgs(args) {
   if (args === void 0) {
@@ -2561,16 +3138,16 @@ function formatDetail(value) {
   }
 }
 function TraceRow({ entry }) {
-  const [open, setOpen] = useState10(false);
+  const [open, setOpen] = useState11(false);
   const summary = summarizeArgs(entry.args);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "pactor-chat-trace__entry",
       "data-status": entry.status,
       "data-open": open,
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs10(
           "button",
           {
             type: "button",
@@ -2578,16 +3155,16 @@ function TraceRow({ entry }) {
             "aria-expanded": open,
             onClick: () => setOpen((value) => !value),
             children: [
-              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx12(Icon7, { name: "chevron-right", size: 12 }) }),
-              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__entry-icon", children: /* @__PURE__ */ jsx12(TraceStatusIcon, { status: entry.status }) }),
-              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__entry-title", children: entry.title ?? entry.name }),
-              summary && /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__entry-args", children: summary })
+              /* @__PURE__ */ jsx13("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx13(Icon8, { name: "chevron-right", size: 12 }) }),
+              /* @__PURE__ */ jsx13("span", { className: "pactor-chat-trace__entry-icon", children: /* @__PURE__ */ jsx13(TraceStatusIcon, { status: entry.status }) }),
+              /* @__PURE__ */ jsx13("span", { className: "pactor-chat-trace__entry-title", children: entry.title ?? entry.name }),
+              summary && /* @__PURE__ */ jsx13("span", { className: "pactor-chat-trace__entry-args", children: summary })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsxs8("div", { className: "pactor-chat-trace__entry-body", children: [
-          entry.args !== void 0 && /* @__PURE__ */ jsx12("pre", { className: "pactor-chat-trace__entry-detail", children: formatDetail(entry.args) }),
-          /* @__PURE__ */ jsx12("pre", { className: "pactor-chat-trace__entry-detail", children: entry.status === "failed" ? entry.error ?? "\u6267\u884C\u5931\u8D25" : formatDetail(entry.result) })
+        open && /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-trace__entry-body", children: [
+          entry.args !== void 0 && /* @__PURE__ */ jsx13("pre", { className: "pactor-chat-trace__entry-detail", children: formatDetail(entry.args) }),
+          /* @__PURE__ */ jsx13("pre", { className: "pactor-chat-trace__entry-detail", children: entry.status === "failed" ? entry.error ?? "\u6267\u884C\u5931\u8D25" : formatDetail(entry.result) })
         ] })
       ]
     }
@@ -2600,14 +3177,14 @@ function ThinkingCard({
   const partStreaming = part.status === "streaming";
   const shown = useThrottledValue(part.content, 120, partStreaming);
   const { open, toggle } = usePinnedCollapse(partStreaming && !answerPhase);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "pactor-chat-thinking",
       "data-open": open,
       "data-streaming": partStreaming,
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs10(
           "button",
           {
             type: "button",
@@ -2615,13 +3192,13 @@ function ThinkingCard({
             "aria-expanded": open,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx12(Icon7, { name: "chevron-right", size: 12 }) }),
-              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-thinking__icon", children: partStreaming ? /* @__PURE__ */ jsx12(Icon7, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx12(Icon7, { name: "brain", size: 13 }) }),
-              /* @__PURE__ */ jsx12("span", { children: "\u601D\u8003\u8FC7\u7A0B" })
+              /* @__PURE__ */ jsx13("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx13(Icon8, { name: "chevron-right", size: 12 }) }),
+              /* @__PURE__ */ jsx13("span", { className: "pactor-chat-thinking__icon", children: partStreaming ? /* @__PURE__ */ jsx13(Icon8, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx13(Icon8, { name: "brain", size: 13 }) }),
+              /* @__PURE__ */ jsx13("span", { children: "\u601D\u8003\u8FC7\u7A0B" })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-thinking__body", children: partStreaming ? /* @__PURE__ */ jsx12("div", { className: "pactor-chat-thinking__text", children: shown }) : /* @__PURE__ */ jsx12(MarkdownRenderer3, { content: part.content }) })
+        open && /* @__PURE__ */ jsx13("div", { className: "pactor-chat-thinking__body", children: partStreaming ? /* @__PURE__ */ jsx13("div", { className: "pactor-chat-thinking__text", children: shown }) : /* @__PURE__ */ jsx13(MarkdownRenderer3, { content: part.content }) })
       ]
     }
   );
@@ -2644,23 +3221,23 @@ function ActivityTrace({ message }) {
     message.createdAt ?? mountTimeRef.current,
     streaming
   );
-  const header = /* @__PURE__ */ jsxs8(Fragment8, { children: [
-    /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__status-icon", children: streaming ? /* @__PURE__ */ jsx12(Icon7, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx12(Icon7, { name: "check-circle", size: 13 }) }),
-    /* @__PURE__ */ jsx12(
+  const header = /* @__PURE__ */ jsxs10(Fragment8, { children: [
+    /* @__PURE__ */ jsx13("span", { className: "pactor-chat-trace__status-icon", children: streaming ? /* @__PURE__ */ jsx13(Icon8, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx13(Icon8, { name: "check-circle", size: 13 }) }),
+    /* @__PURE__ */ jsx13(
       "span",
       {
         className: `pactor-chat-trace__status-text${streaming ? " pactor-chat-trace__status-text--breathing" : ""}`,
         children: statusText(message, mode, entries.length)
       }
     ),
-    /* @__PURE__ */ jsxs8("span", { className: "pactor-chat-trace__elapsed", children: [
+    /* @__PURE__ */ jsxs10("span", { className: "pactor-chat-trace__elapsed", children: [
       elapsed,
       "s"
     ] }),
-    collapsible && /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx12(Icon7, { name: "chevron-right", size: 12 }) })
+    collapsible && /* @__PURE__ */ jsx13("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx13(Icon8, { name: "chevron-right", size: 12 }) })
   ] });
-  return /* @__PURE__ */ jsxs8("div", { className: "pactor-chat-trace", "data-open": open, children: [
-    collapsible ? /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-trace", "data-open": open, children: [
+    collapsible ? /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
@@ -2669,10 +3246,10 @@ function ActivityTrace({ message }) {
         onClick: toggle,
         children: header
       }
-    ) : /* @__PURE__ */ jsx12("div", { className: "pactor-chat-trace__header", children: header }),
-    open && /* @__PURE__ */ jsxs8(Fragment8, { children: [
-      entries.length > 0 && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-trace__entries", children: entries.map((entry) => /* @__PURE__ */ jsx12(TraceRow, { entry }, entry.callIndex)) }),
-      thinkingParts.map((part, index) => /* @__PURE__ */ jsx12(
+    ) : /* @__PURE__ */ jsx13("div", { className: "pactor-chat-trace__header", children: header }),
+    open && /* @__PURE__ */ jsxs10(Fragment8, { children: [
+      entries.length > 0 && /* @__PURE__ */ jsx13("div", { className: "pactor-chat-trace__entries", children: entries.map((entry) => /* @__PURE__ */ jsx13(TraceRow, { entry }, entry.callIndex)) }),
+      thinkingParts.map((part, index) => /* @__PURE__ */ jsx13(
         ThinkingCard,
         {
           part,
@@ -2685,8 +3262,8 @@ function ActivityTrace({ message }) {
 }
 
 // src/view/MessageActions.tsx
-import { Icon as Icon8 } from "@pactor-app/ui/components";
-import { useEffect as useEffect8, useRef as useRef9, useState as useState11 } from "react";
+import { Icon as Icon9 } from "@pactor-app/ui/components";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState12 } from "react";
 
 // src/view/chrome/message-actions.tsx
 function buildMessageActionsFragment(args) {
@@ -2739,7 +3316,7 @@ function buildMessageActionsFragment(args) {
 }
 
 // src/view/MessageActions.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var BUILTIN_ACTION_DEFAULTS = {
   copy: {
     label: "\u590D\u5236",
@@ -2812,7 +3389,7 @@ function MessageActions({
   callService,
   onMessageAction
 }) {
-  const [copied, setCopied] = useState11(false);
+  const [copied, setCopied] = useState12(false);
   const dispatchRef = useRef9(
     () => {
     }
@@ -2892,7 +3469,7 @@ function MessageActions({
     const copiedFeedback = action.builtin === "copy" && copied;
     const label = copiedFeedback ? "\u5DF2\u590D\u5236" : action.label;
     const iconName = copiedFeedback ? "check" : action.icon;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -2901,16 +3478,16 @@ function MessageActions({
         "aria-label": label,
         "data-message-action": action.id,
         onClick: () => dispatch(action),
-        children: iconName !== void 0 ? /* @__PURE__ */ jsx13(Icon8, { name: iconName, size: 14 }) : /* @__PURE__ */ jsx13(Icon8, { name: "help-circle", size: 14 })
+        children: iconName !== void 0 ? /* @__PURE__ */ jsx14(Icon9, { name: iconName, size: 14 }) : /* @__PURE__ */ jsx14(Icon9, { name: "help-circle", size: 14 })
       },
       action.id
     );
   });
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: `pactor-chat-message__actions${forceVisible ? " pactor-chat-message__actions--visible" : ""}`,
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         ChromeSlot,
         {
           fragment: buildMessageActionsFragment({
@@ -2926,13 +3503,38 @@ function MessageActions({
 }
 
 // src/view/MessageBubble.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function groupArtifactParts(parts) {
+  const segments = [];
+  for (const part of parts) {
+    if (part.type === "artifact" && part.artifact) {
+      const last = segments[segments.length - 1];
+      if (Array.isArray(last)) {
+        last.push(part.artifact);
+      } else {
+        segments.push([part.artifact]);
+      }
+    } else {
+      segments.push(part);
+    }
+  }
+  return segments;
+}
+function formatMessageTime(ts, now = Date.now()) {
+  const date = new Date(ts);
+  const hh = String(date.getHours()).padStart(2, "0");
+  const mm = String(date.getMinutes()).padStart(2, "0");
+  if (new Date(now).toDateString() === date.toDateString()) {
+    return `${hh}:${mm}`;
+  }
+  return `${date.getMonth() + 1}\u6708${date.getDate()}\u65E5 ${hh}:${mm}`;
+}
 function MessageEditForm({
   initialText,
   onConfirm,
   onCancel
 }) {
-  const [text, setText] = useState12(initialText);
+  const [text, setText] = useState13(initialText);
   const confirm = () => {
     const value = text.trim();
     if (!value) {
@@ -2940,8 +3542,8 @@ function MessageEditForm({
     }
     onConfirm(value);
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "pactor-chat-message__edit", children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs11("div", { className: "pactor-chat-message__edit", children: [
+    /* @__PURE__ */ jsx15(
       "textarea",
       {
         className: "pactor-chat-message__edit-input",
@@ -2959,8 +3561,8 @@ function MessageEditForm({
         }
       }
     ),
-    /* @__PURE__ */ jsxs9("div", { className: "pactor-chat-message__edit-actions", children: [
-      /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsxs11("div", { className: "pactor-chat-message__edit-actions", children: [
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -2970,7 +3572,7 @@ function MessageEditForm({
           children: "\u53D1\u9001"
         }
       ),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -2993,10 +3595,9 @@ function MessageBubble({
   onEditResend,
   messageActions,
   callService,
-  onMessageAction,
-  onOpenArtifact
+  onMessageAction
 }) {
-  const [editing, setEditing] = useState12(false);
+  const [editing, setEditing] = useState13(false);
   const bubbleScope = {
     conversation: scope?.conversation ?? {},
     message: { id: message.id },
@@ -3011,14 +3612,15 @@ function MessageBubble({
   const showTrace = message.role === "assistant" && (wasLiveRef.current || message.parts.some(
     (part) => part.type === "thinking" || part.type === "tool-call" || part.type === "tool-result"
   ));
-  return /* @__PURE__ */ jsxs9(
+  const showTime = message.role === "assistant" && !live && message.createdAt !== void 0;
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: `pactor-chat-message pactor-chat-message--${message.role}`,
       "data-message-id": message.id,
       "data-message-status": message.status,
       children: [
-        editing ? /* @__PURE__ */ jsx14(
+        editing ? /* @__PURE__ */ jsx15(
           MessageEditForm,
           {
             initialText: collectMessageText(message),
@@ -3028,21 +3630,53 @@ function MessageBubble({
             },
             onCancel: () => setEditing(false)
           }
-        ) : /* @__PURE__ */ jsxs9("div", { className: "pactor-chat-message__body", children: [
-          showTrace && /* @__PURE__ */ jsx14(ActivityTrace, { message }),
-          message.parts.length === 0 && message.status === "pending" && message.role !== "assistant" ? /* @__PURE__ */ jsx14("span", { className: "pactor-chat-message__pending", children: "\u2026" }) : message.parts.map((part, index) => /* @__PURE__ */ jsx14(
-            PartRenderer,
-            {
-              part,
-              runtime,
-              scope: bubbleScope,
-              streaming,
-              onOpenArtifact
-            },
-            part.id ?? index
-          ))
+        ) : /* @__PURE__ */ jsxs11("div", { className: "pactor-chat-message__body", children: [
+          showTrace && /* @__PURE__ */ jsx15(ActivityTrace, { message }),
+          message.parts.length === 0 && message.status === "pending" && message.role !== "assistant" ? /* @__PURE__ */ jsx15("span", { className: "pactor-chat-message__pending", children: "\u2026" }) : groupArtifactParts(message.parts).map(
+            (segment, index) => Array.isArray(segment) ? /* @__PURE__ */ jsx15(
+              ChromeSlot,
+              {
+                fragment: buildArtifactCardGroupFragment(segment),
+                components: ARTIFACT_CARD_INTERNAL_COMPONENTS,
+                fallback: /* @__PURE__ */ jsx15(ChatArtifactCardGroup, { artifacts: segment })
+              },
+              `artifacts:${segment[0].id}`
+            ) : /* @__PURE__ */ jsx15(
+              PartRenderer,
+              {
+                part: segment,
+                runtime,
+                scope: bubbleScope,
+                streaming
+              },
+              segment.id ?? index
+            )
+          )
         ] }),
-        !editing && /* @__PURE__ */ jsx14(
+        !editing && (showTime ? /* @__PURE__ */ jsxs11("div", { className: "pactor-chat-message__footer", children: [
+          /* @__PURE__ */ jsx15(
+            MessageActions,
+            {
+              message,
+              actions: messageActions,
+              showRegenerate,
+              onRegenerate,
+              onRetry,
+              onEdit: onEditResend ? () => setEditing(true) : void 0,
+              forceVisible: message.status === "error",
+              callService,
+              onMessageAction
+            }
+          ),
+          /* @__PURE__ */ jsx15(
+            "span",
+            {
+              className: "pactor-chat-message__time",
+              title: new Date(message.createdAt).toLocaleString(),
+              children: formatMessageTime(message.createdAt)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx15(
           MessageActions,
           {
             message,
@@ -3055,14 +3689,14 @@ function MessageBubble({
             callService,
             onMessageAction
           }
-        )
+        ))
       ]
     }
   );
 }
 
 // src/view/ChatView.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function lastContentLength(messages) {
   const last = messages[messages.length - 1];
   if (!last) {
@@ -3090,6 +3724,7 @@ function ChatView({
   className,
   onArtifact,
   onOpenArtifact,
+  onOpenArtifactList,
   attachments,
   onAttachmentsChange,
   onAttachFiles,
@@ -3170,7 +3805,7 @@ function ChatView({
     model,
     onModelChange
   });
-  const [contextChips, setContextChips] = useState13([]);
+  const [contextChips, setContextChips] = useState14([]);
   const handleContextChipsChange = (chips) => {
     setContextChips(chips);
     onContextsChange?.(chips);
@@ -3206,10 +3841,13 @@ function ChatView({
   handleSendRef.current = handleSend;
   const onOpenArtifactRef = useRef11(onOpenArtifact);
   onOpenArtifactRef.current = onOpenArtifact;
+  const onOpenArtifactListRef = useRef11(onOpenArtifactList);
+  onOpenArtifactListRef.current = onOpenArtifactList;
   useEffect9(() => {
     setChatChromeHandlers({
       sendSuggestion: (text) => handleSendRef.current(text),
-      openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact)
+      openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact),
+      openArtifactList: () => onOpenArtifactListRef.current?.()
     });
   }, []);
   const handleRegenerate = () => {
@@ -3229,7 +3867,7 @@ function ChatView({
   const lastMessage = messages[messages.length - 1];
   const regenerableMessageId = lastMessage?.role === "assistant" && lastMessage.status === "completed" ? lastMessage.id : void 0;
   const isEmpty = messages.length === 0;
-  const composerNode = /* @__PURE__ */ jsx15(
+  const composerNode = /* @__PURE__ */ jsx16(
     Composer,
     {
       onSend: handleSend,
@@ -3254,18 +3892,18 @@ function ChatView({
       callService
     }
   );
-  const composerDock = /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-view__composer-dock", children: [
+  const composerDock = /* @__PURE__ */ jsxs12("div", { className: "pactor-chat-view__composer-dock", children: [
     composerNode,
-    composerBottom !== void 0 && composerBottom !== null ? /* @__PURE__ */ jsx15("div", { className: "pactor-chat-view__composer-bottom", children: composerBottom }) : null
+    composerBottom !== void 0 && composerBottom !== null ? /* @__PURE__ */ jsx16("div", { className: "pactor-chat-view__composer-bottom", children: composerBottom }) : null
   ] });
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: `pactor-chat-view${isEmpty ? " pactor-chat-view--empty" : ""}${className ? ` ${className}` : ""}`,
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-messages", ref: containerRef, children: [
-          isEmpty ? /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-view__empty-stack", children: [
-            /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs12("div", { className: "pactor-chat-messages", ref: containerRef, children: [
+          isEmpty ? /* @__PURE__ */ jsxs12("div", { className: "pactor-chat-view__empty-stack", children: [
+            /* @__PURE__ */ jsx16(
               EmptyState,
               {
                 greeting,
@@ -3275,7 +3913,7 @@ function ChatView({
               }
             ),
             composerDock
-          ] }) : messages.map((message) => /* @__PURE__ */ jsx15(
+          ] }) : messages.map((message) => /* @__PURE__ */ jsx16(
             MessageBubble,
             {
               message,
@@ -3287,19 +3925,18 @@ function ChatView({
               onEditResend: (text) => handleEditResend(message.id, text),
               messageActions,
               callService,
-              onMessageAction,
-              onOpenArtifact
+              onMessageAction
             },
             message.id
           )),
-          !isFollowing && /* @__PURE__ */ jsxs10(
+          !isFollowing && /* @__PURE__ */ jsxs12(
             "button",
             {
               type: "button",
               className: "pactor-chat-scroll-bottom",
               onClick: scrollToBottom,
               children: [
-                /* @__PURE__ */ jsx15(Icon9, { name: "arrow-down", size: 13 }),
+                /* @__PURE__ */ jsx16(Icon10, { name: "arrow-down", size: 13 }),
                 "\u56DE\u5230\u5E95\u90E8"
               ]
             }
@@ -3312,8 +3949,8 @@ function ChatView({
 }
 
 // src/view/WorkspaceHeader.tsx
-import { Icon as Icon10 } from "@pactor-app/ui/components";
-import { useEffect as useEffect10, useRef as useRef12, useState as useState14 } from "react";
+import { Icon as Icon11 } from "@pactor-app/ui/components";
+import { useEffect as useEffect10, useRef as useRef12, useState as useState15 } from "react";
 
 // src/export-markdown.ts
 var ROLE_LABELS = {
@@ -3390,7 +4027,7 @@ function buildHeaderActionsFragment(props) {
 }
 
 // src/view/WorkspaceHeader.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function readCurrentTheme() {
   if (typeof document === "undefined") {
     return "light";
@@ -3410,9 +4047,9 @@ function WorkspaceHeader({
   onTitleChange
 }) {
   const hasActions = headerActions !== void 0 && headerActions.length > 0;
-  const [overrideTitle, setOverrideTitle] = useState14(null);
-  const [editing, setEditing] = useState14(false);
-  const [draft, setDraft] = useState14("");
+  const [overrideTitle, setOverrideTitle] = useState15(null);
+  const [editing, setEditing] = useState15(false);
+  const [draft, setDraft] = useState15("");
   const prevTitleRef = useRef12(title);
   if (prevTitleRef.current !== title) {
     prevTitleRef.current = title;
@@ -3421,7 +4058,7 @@ function WorkspaceHeader({
     }
   }
   const displayTitle = overrideTitle ?? title;
-  const [theme, setTheme] = useState14(readCurrentTheme);
+  const [theme, setTheme] = useState15(readCurrentTheme);
   const commitTitle = () => {
     setEditing(false);
     const next = draft.trim();
@@ -3465,7 +4102,7 @@ function WorkspaceHeader({
     });
   }, []);
   const actionButtons = {
-    export: /* @__PURE__ */ jsx16(
+    export: /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -3473,11 +4110,11 @@ function WorkspaceHeader({
         title: "\u5BFC\u51FA Markdown",
         "aria-label": "\u5BFC\u51FA Markdown",
         onClick: handleExport,
-        children: /* @__PURE__ */ jsx16(Icon10, { name: "download", size: 15 })
+        children: /* @__PURE__ */ jsx17(Icon11, { name: "download", size: 15 })
       },
       "export"
     ),
-    theme: /* @__PURE__ */ jsx16(
+    theme: /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -3485,11 +4122,11 @@ function WorkspaceHeader({
         title: theme === "dark" ? "\u5207\u6362\u4E3A\u6D45\u8272" : "\u5207\u6362\u4E3A\u6DF1\u8272",
         "aria-label": "\u5207\u6362\u660E\u6697\u4E3B\u9898",
         onClick: handleTheme,
-        children: theme === "dark" ? /* @__PURE__ */ jsx16(Icon10, { name: "sun", size: 15 }) : /* @__PURE__ */ jsx16(Icon10, { name: "moon", size: 15 })
+        children: theme === "dark" ? /* @__PURE__ */ jsx17(Icon11, { name: "sun", size: 15 }) : /* @__PURE__ */ jsx17(Icon11, { name: "moon", size: 15 })
       },
       "theme"
     ),
-    clear: /* @__PURE__ */ jsx16(
+    clear: /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -3497,12 +4134,12 @@ function WorkspaceHeader({
         title: "\u6E05\u7A7A\u4F1A\u8BDD",
         "aria-label": "\u6E05\u7A7A\u4F1A\u8BDD",
         onClick: handleClear,
-        children: /* @__PURE__ */ jsx16(Icon10, { name: "trash", size: 15 })
+        children: /* @__PURE__ */ jsx17(Icon11, { name: "trash", size: 15 })
       },
       "clear"
     )
   };
-  const titleNode = editableTitle ? editing ? /* @__PURE__ */ jsx16(
+  const titleNode = editableTitle ? editing ? /* @__PURE__ */ jsx17(
     "input",
     {
       className: "pactor-chat-workspace__title-input",
@@ -3519,7 +4156,7 @@ function WorkspaceHeader({
         }
       }
     }
-  ) : /* @__PURE__ */ jsx16(
+  ) : /* @__PURE__ */ jsx17(
     "button",
     {
       type: "button",
@@ -3531,17 +4168,17 @@ function WorkspaceHeader({
       },
       children: displayTitle
     }
-  ) : /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__title", children: title });
-  return /* @__PURE__ */ jsxs11("header", { className: "pactor-chat-workspace__header", children: [
+  ) : /* @__PURE__ */ jsx17("div", { className: "pactor-chat-workspace__title", children: title });
+  return /* @__PURE__ */ jsxs13("header", { className: "pactor-chat-workspace__header", children: [
     headerStart !== void 0 ? (
       // header 位模型 chip（决策 D2）：与 title 组成左端组，chip 在前
-      /* @__PURE__ */ jsxs11("div", { className: "pactor-chat-workspace__header-left", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "pactor-chat-workspace__header-left", children: [
         headerStart,
         titleNode
       ] })
     ) : titleNode,
-    hasActions ? /* @__PURE__ */ jsxs11("div", { className: "pactor-chat-workspace__header-right", children: [
-      /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__header-actions", children: /* @__PURE__ */ jsx16(
+    hasActions ? /* @__PURE__ */ jsxs13("div", { className: "pactor-chat-workspace__header-right", children: [
+      /* @__PURE__ */ jsx17("div", { className: "pactor-chat-workspace__header-actions", children: /* @__PURE__ */ jsx17(
         ChromeSlot,
         {
           fragment: buildHeaderActionsFragment({
@@ -3551,13 +4188,13 @@ function WorkspaceHeader({
           fallback: headerActions.map((action) => actionButtons[action])
         }
       ) }),
-      headerExtra !== void 0 ? /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
-    ] }) : headerExtra !== void 0 ? /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
+      headerExtra !== void 0 ? /* @__PURE__ */ jsx17("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
+    ] }) : headerExtra !== void 0 ? /* @__PURE__ */ jsx17("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
   ] });
 }
 
 // src/chat-composition.tsx
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function DslNodeSlotInner({ node }) {
   const { renderChildren } = useRenderer4();
   return renderChildren([node]);
@@ -3580,7 +4217,7 @@ var DslSlotGuard = class extends Component3 {
   }
 };
 function DslNodeSlot({ node }) {
-  return /* @__PURE__ */ jsx17(DslSlotGuard, { children: /* @__PURE__ */ jsx17(DslNodeSlotInner, { node }) });
+  return /* @__PURE__ */ jsx18(DslSlotGuard, { children: /* @__PURE__ */ jsx18(DslNodeSlotInner, { node }) });
 }
 function isDslNodeValue(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value) && !isValidElement(value) && typeof value.type === "string";
@@ -3590,7 +4227,7 @@ function resolveSlot(slot) {
     return void 0;
   }
   if (isDslNodeValue(slot)) {
-    return /* @__PURE__ */ jsx17(DslNodeSlot, { node: slot });
+    return /* @__PURE__ */ jsx18(DslNodeSlot, { node: slot });
   }
   return slot;
 }
@@ -3629,10 +4266,13 @@ function ChatComposition({
   onSend,
   artifact,
   panelOpen,
+  artifacts: artifactsProp,
+  onSelectArtifact,
   onPanelClose,
   inspector,
   onArtifact,
-  onOpenArtifact
+  onOpenArtifact,
+  onOpenArtifactList
 }) {
   const storeRef = useRef13(null);
   if (storeRef.current === null) {
@@ -3649,8 +4289,28 @@ function ChatComposition({
     (listener) => artifactStore.subscribe(listener),
     () => artifactStore.get()
   );
+  const storeArtifacts = useSyncExternalStore2(
+    (listener) => artifactStore.subscribe(listener),
+    () => artifactStore.list()
+  );
+  const messages = useSyncExternalStore2(
+    (listener) => store.subscribe(listener),
+    () => store.getMessages()
+  );
+  const streamArtifacts = useMemo4(() => collectArtifacts(messages), [messages]);
+  const mergedArtifacts = useMemo4(
+    () => mergeArtifacts(streamArtifacts, storeArtifacts),
+    [streamArtifacts, storeArtifacts]
+  );
   const effectiveArtifact = panelControlled ? artifact ?? null : storeArtifact;
   const effectivePanelOpen = panelControlled ? panelOpen ?? artifact != null : storeArtifact !== null;
+  const effectiveArtifacts = artifactsProp ?? mergedArtifacts;
+  const handleSelectArtifact = (next) => {
+    onSelectArtifact?.(next);
+    if (!panelControlled) {
+      artifactStore.open(next);
+    }
+  };
   const handlePanelClose = () => {
     onPanelClose?.();
     if (!panelControlled) {
@@ -3663,7 +4323,18 @@ function ChatComposition({
       artifactStore.open(next);
     }
   };
-  const [attachments, setAttachments] = useState15([]);
+  const [listViewRequest, setListViewRequest] = useState16(null);
+  const handleOpenArtifactList = () => {
+    onOpenArtifactList?.();
+    setListViewRequest((value) => (value ?? 0) + 1);
+    if (!panelControlled && artifactStore.get() === null) {
+      const first = mergedArtifacts[0];
+      if (first !== void 0) {
+        artifactStore.open(first);
+      }
+    }
+  };
+  const [attachments, setAttachments] = useState16([]);
   const handleAttachFiles = services.onAttachFiles ? (files) => {
     void Promise.resolve(services.onAttachFiles(files)).then(
       (created) => {
@@ -3683,7 +4354,7 @@ function ChatComposition({
     model,
     onModelChange
   });
-  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ jsx17(
+  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ jsx18(
     ModelSelect,
     {
       models,
@@ -3691,133 +4362,144 @@ function ChatComposition({
       onModelChange: handleModelChange
     }
   ) : void 0;
-  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
     services.toolbarEnd,
     toolbarEnd
   ] }) : void 0;
-  const mergedToolbarStart = services.toolbarStart !== void 0 || toolbarStart !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+  const mergedToolbarStart = services.toolbarStart !== void 0 || toolbarStart !== void 0 ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
     services.toolbarStart,
     toolbarStart
   ] }) : void 0;
-  const mergedComposerFooter = services.composerFooter !== void 0 || composerFooter !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+  const mergedComposerFooter = services.composerFooter !== void 0 || composerFooter !== void 0 ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
     services.composerFooter,
     composerFooter
   ] }) : void 0;
-  const mergedComposerBottom = services.composerBottom !== void 0 || composerBottom !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+  const mergedComposerBottom = services.composerBottom !== void 0 || composerBottom !== void 0 ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
     services.composerBottom,
     composerBottom
   ] }) : void 0;
   const hasHeaderContent = header !== void 0 && header !== null ? true : title !== void 0 || headerExtra !== void 0 && headerExtra !== null || headerActions !== void 0 && headerActions.length > 0 || headerModelChip !== void 0;
   const renderHeader = showHeader !== false && hasHeaderContent;
-  const workspace = /* @__PURE__ */ jsxs12(
+  const workspaceHeader = renderHeader ? header ?? /* @__PURE__ */ jsx18(
+    WorkspaceHeader,
+    {
+      title,
+      headerExtra,
+      headerActions,
+      editableTitle,
+      headerStart: headerModelChip,
+      store,
+      onExport,
+      onThemeChange,
+      onClear,
+      onTitleChange
+    }
+  ) : null;
+  const workspace = /* @__PURE__ */ jsx18(
     "div",
     {
       className: `pactor-chat-workspace${className ? ` ${className}` : ""}`,
-      children: [
-        renderHeader ? header ?? /* @__PURE__ */ jsx17(
-          WorkspaceHeader,
+      children: /* @__PURE__ */ jsx18(
+        ChatView,
+        {
+          store,
+          transport: services.transport,
+          onSend: handleSend,
+          safeRegistry: services.safeRegistry,
+          capabilities: services.capabilities,
+          permission: services.permission,
+          confirm: services.confirm,
+          conversationId,
+          user: services.user,
+          params,
+          greeting,
+          subtitle,
+          suggestions,
+          attachments,
+          onAttachmentsChange: setAttachments,
+          onAttachFiles: handleAttachFiles,
+          onAttachmentClick: services.onAttachmentClick,
+          toolbarStart: mergedToolbarStart,
+          toolbarEnd: mergedToolbarEnd,
+          composerFooter: mergedComposerFooter,
+          composerBottom: mergedComposerBottom,
+          hideToolbar,
+          onMentionTrigger: services.onMentionTrigger,
+          onPlusMenu: services.onPlusMenu,
+          onArtifact,
+          onOpenArtifact: handleOpenArtifact,
+          onOpenArtifactList: handleOpenArtifactList,
+          models,
+          model: currentModel,
+          onModelChange: handleModelChange,
+          modelPlacement,
+          contexts,
+          onContextsChange,
+          callService: services.callService,
+          messageActions,
+          onMessageAction
+        }
+      )
+    }
+  );
+  const main = sidebar ? /* @__PURE__ */ jsx18(AppShell, { sidebar, children: workspace }) : workspace;
+  const panelFeatureUsed = artifact !== void 0 || panelOpen !== void 0 || inspector !== void 0 || onPanelClose !== void 0 || onArtifact !== void 0 || onOpenArtifact !== void 0 || onOpenArtifactList !== void 0 || services.artifactStore !== void 0;
+  if (!panelFeatureUsed && !effectivePanelOpen) {
+    return workspaceHeader ? /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-with-header", children: [
+      workspaceHeader,
+      main
+    ] }) : main;
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-inspector-host", children: [
+    workspaceHeader,
+    /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-inspector-host__row", children: [
+      main,
+      effectivePanelOpen ? /* @__PURE__ */ jsxs14(Fragment9, { children: [
+        /* @__PURE__ */ jsx18(
+          "div",
           {
-            title,
-            headerExtra,
-            headerActions,
-            editableTitle,
-            headerStart: headerModelChip,
-            store,
-            onExport,
-            onThemeChange,
-            onClear,
-            onTitleChange
+            className: "pactor-chat-inspector__scrim",
+            "aria-hidden": true,
+            onClick: handlePanelClose
           }
-        ) : null,
-        /* @__PURE__ */ jsx17(
-          ChatView,
+        ),
+        /* @__PURE__ */ jsx18(
+          ArtifactPanel,
           {
-            store,
-            transport: services.transport,
-            onSend: handleSend,
+            artifact: effectiveArtifact,
+            artifacts: effectiveArtifacts,
+            activeArtifactId: effectiveArtifact?.id,
+            onSelectArtifact: handleSelectArtifact,
+            inspector,
+            onClose: handlePanelClose,
             safeRegistry: services.safeRegistry,
-            capabilities: services.capabilities,
-            permission: services.permission,
-            confirm: services.confirm,
-            conversationId,
             user: services.user,
-            params,
-            greeting,
-            subtitle,
-            suggestions,
-            attachments,
-            onAttachmentsChange: setAttachments,
-            onAttachFiles: handleAttachFiles,
-            onAttachmentClick: services.onAttachmentClick,
-            toolbarStart: mergedToolbarStart,
-            toolbarEnd: mergedToolbarEnd,
-            composerFooter: mergedComposerFooter,
-            composerBottom: mergedComposerBottom,
-            hideToolbar,
-            onMentionTrigger: services.onMentionTrigger,
-            onPlusMenu: services.onPlusMenu,
-            onArtifact,
-            onOpenArtifact: handleOpenArtifact,
-            models,
-            model: currentModel,
-            onModelChange: handleModelChange,
-            modelPlacement,
-            contexts,
-            onContextsChange,
-            callService: services.callService,
-            messageActions,
-            onMessageAction
+            artifactViewers: services.artifactViewers,
+            viewRequest: listViewRequest,
+            onViewRequestConsumed: () => setListViewRequest(null)
           }
         )
-      ]
-    }
-  );
-  const main = sidebar ? /* @__PURE__ */ jsx17(AppShell, { sidebar, children: workspace }) : workspace;
-  const panelFeatureUsed = artifact !== void 0 || panelOpen !== void 0 || inspector !== void 0 || onPanelClose !== void 0 || onArtifact !== void 0 || onOpenArtifact !== void 0 || services.artifactStore !== void 0;
-  if (!panelFeatureUsed && !effectivePanelOpen) {
-    return main;
-  }
-  return /* @__PURE__ */ jsxs12("div", { className: "pactor-chat-inspector-host", children: [
-    main,
-    effectivePanelOpen ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
-      /* @__PURE__ */ jsx17(
-        "div",
-        {
-          className: "pactor-chat-inspector__scrim",
-          "aria-hidden": true,
-          onClick: handlePanelClose
-        }
-      ),
-      /* @__PURE__ */ jsx17(
-        ArtifactPanel,
-        {
-          artifact: effectiveArtifact,
-          inspector,
-          onClose: handlePanelClose,
-          safeRegistry: services.safeRegistry,
-          user: services.user
-        }
-      )
-    ] }) : null
+      ] }) : null
+    ] })
   ] });
 }
 
 // src/chat-services.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var ChatServicesContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var ChatServicesContext = createContext3(null);
 function ChatServicesProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx18(ChatServicesContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx19(ChatServicesContext.Provider, { value, children });
 }
 function useChatServices() {
-  return useContext2(ChatServicesContext);
+  return useContext3(ChatServicesContext);
 }
 
 // src/chat-workspace.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function createChatWorkspace(services) {
   function ChatWorkspace({
     title,
@@ -3838,6 +4520,8 @@ function createChatWorkspace(services) {
     inspector,
     onArtifact,
     onOpenArtifact,
+    onOpenArtifactList,
+    onSelectArtifact,
     headerActions,
     editableTitle,
     onExport,
@@ -3854,7 +4538,7 @@ function createChatWorkspace(services) {
     onMessageAction,
     className
   }) {
-    return /* @__PURE__ */ jsx19(ChatServicesProvider, { value: services, children: /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(ChatServicesProvider, { value: services, children: /* @__PURE__ */ jsx20(
       ChatComposition,
       {
         services,
@@ -3866,18 +4550,20 @@ function createChatWorkspace(services) {
         params,
         className,
         headerExtra: services.headerExtra,
-        sidebar: sidebar ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: sidebar }) : void 0,
-        toolbarStart: toolbarStart ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: toolbarStart }) : void 0,
-        toolbarEnd: toolbarEnd ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: toolbarEnd }) : void 0,
-        composerFooter: composerFooter ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: composerFooter }) : void 0,
-        composerBottom: composerBottom ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: composerBottom }) : void 0,
+        sidebar: sidebar ? /* @__PURE__ */ jsx20(DslNodeSlot, { node: sidebar }) : void 0,
+        toolbarStart: toolbarStart ? /* @__PURE__ */ jsx20(DslNodeSlot, { node: toolbarStart }) : void 0,
+        toolbarEnd: toolbarEnd ? /* @__PURE__ */ jsx20(DslNodeSlot, { node: toolbarEnd }) : void 0,
+        composerFooter: composerFooter ? /* @__PURE__ */ jsx20(DslNodeSlot, { node: composerFooter }) : void 0,
+        composerBottom: composerBottom ? /* @__PURE__ */ jsx20(DslNodeSlot, { node: composerBottom }) : void 0,
         hideToolbar,
         artifact,
         panelOpen,
         onPanelClose,
-        inspector: inspector ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: inspector }) : void 0,
+        inspector: inspector ? /* @__PURE__ */ jsx20(DslNodeSlot, { node: inspector }) : void 0,
         onArtifact,
         onOpenArtifact,
+        onOpenArtifactList,
+        onSelectArtifact,
         headerActions,
         editableTitle,
         onExport,
@@ -3899,7 +4585,7 @@ function createChatWorkspace(services) {
 }
 
 // src/view/Chat.tsx
-import { createComponentRegistry, Icon as Icon11, RailTooltip } from "@pactor-app/ui/components";
+import { createComponentRegistry, Icon as Icon12, RailTooltip } from "@pactor-app/ui/components";
 import { Fragment as Fragment10, useEffect as useEffect11, useRef as useRef14 } from "react";
 
 // src/view/chrome/menu.tsx
@@ -3929,7 +4615,7 @@ function buildSidebarMenuFragment(props) {
 }
 
 // src/view/ChatShell.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function ChatShell({
   menu,
   activeMenuKey,
@@ -3941,7 +4627,7 @@ function ChatShell({
   className,
   onMenuSelect
 }) {
-  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx20(
+  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx21(
     ChatSidebarMenu,
     {
       menu,
@@ -3949,7 +4635,7 @@ function ChatShell({
       onMenuSelect
     }
   ) : null);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     AppShell,
     {
       sidebar: sidebarContent,
@@ -3966,7 +4652,7 @@ function ChatShellDslAdapter({
   onMenuSelect,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ChatShell,
     {
       ...rest,
@@ -3981,7 +4667,7 @@ function registerChatShellComponent(registry) {
 }
 
 // src/view/Chat.tsx
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 function ChatSidebarMenu({
   menu,
   activeMenuKey,
@@ -4008,12 +4694,12 @@ function ChatSidebarMenu({
   }, []);
   const fallback = (() => {
     let lastGroup;
-    return /* @__PURE__ */ jsx21("nav", { className: "pactor-chat-menu", "aria-label": "\u4F1A\u8BDD\u5BFC\u822A", children: menu.map((item) => {
+    return /* @__PURE__ */ jsx22("nav", { className: "pactor-chat-menu", "aria-label": "\u4F1A\u8BDD\u5BFC\u822A", children: menu.map((item) => {
       const groupLabel = item.group !== void 0 && item.group !== lastGroup ? item.group : void 0;
       lastGroup = item.group;
       const active = item.key === activeMenuKey;
       const collapsed = drawer?.collapsed === true;
-      const button = /* @__PURE__ */ jsxs13(
+      const button = /* @__PURE__ */ jsxs15(
         "button",
         {
           type: "button",
@@ -4028,20 +4714,20 @@ function ChatSidebarMenu({
             drawer?.close();
           },
           children: [
-            item.icon !== void 0 ? /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__icon", children: /* @__PURE__ */ jsx21(Icon11, { name: item.icon, size: 15, strokeWidth: 1.7 }) }) : null,
-            /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__label", children: item.label }),
-            item.dot === true ? /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__dot", "aria-hidden": true }) : null,
-            item.badge !== void 0 ? /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__badge", children: item.badge }) : null
+            item.icon !== void 0 ? /* @__PURE__ */ jsx22("span", { className: "pactor-chat-menu__icon", children: /* @__PURE__ */ jsx22(Icon12, { name: item.icon, size: 15, strokeWidth: 1.7 }) }) : null,
+            /* @__PURE__ */ jsx22("span", { className: "pactor-chat-menu__label", children: item.label }),
+            item.dot === true ? /* @__PURE__ */ jsx22("span", { className: "pactor-chat-menu__dot", "aria-hidden": true }) : null,
+            item.badge !== void 0 ? /* @__PURE__ */ jsx22("span", { className: "pactor-chat-menu__badge", children: item.badge }) : null
           ]
         }
       );
-      return /* @__PURE__ */ jsxs13(Fragment10, { children: [
-        groupLabel !== void 0 ? /* @__PURE__ */ jsx21("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
-        collapsed ? /* @__PURE__ */ jsx21(RailTooltip, { label: item.label, children: button }) : button
+      return /* @__PURE__ */ jsxs15(Fragment10, { children: [
+        groupLabel !== void 0 ? /* @__PURE__ */ jsx22("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
+        collapsed ? /* @__PURE__ */ jsx22(RailTooltip, { label: item.label, children: button }) : button
       ] }, item.key);
     }) });
   })();
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ChromeSlot,
     {
       fragment: buildSidebarMenuFragment({ menu, activeMenuKey }),
@@ -4087,6 +4773,8 @@ function Chat({
   inspector,
   onArtifact,
   onOpenArtifact,
+  onOpenArtifactList,
+  onSelectArtifact,
   className,
   onSend,
   onMenuSelect
@@ -4100,10 +4788,10 @@ function Chat({
     }
   }, [services]);
   if (!services) {
-    return /* @__PURE__ */ jsx21("div", { className: "pactor-chat-notice", role: "note", children: "\u672A\u914D\u7F6E\u804A\u5929\u670D\u52A1\uFF1A\u8BF7\u5728 Chat \u5916\u5C42\u4F7F\u7528 ChatServicesProvider \u6CE8\u5165 transport \u7B49\u670D\u52A1\u540E\u91CD\u8BD5\u3002" });
+    return /* @__PURE__ */ jsx22("div", { className: "pactor-chat-notice", role: "note", children: "\u672A\u914D\u7F6E\u804A\u5929\u670D\u52A1\uFF1A\u8BF7\u5728 Chat \u5916\u5C42\u4F7F\u7528 ChatServicesProvider \u6CE8\u5165 transport \u7B49\u670D\u52A1\u540E\u91CD\u8BD5\u3002" });
   }
   const sidebarSlot = resolveSlot(sidebar);
-  const sidebarContent = sidebarSlot ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx21(
+  const sidebarContent = sidebarSlot ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx22(
     ChatSidebarMenu,
     {
       menu,
@@ -4111,7 +4799,7 @@ function Chat({
       onMenuSelect
     }
   ) : void 0);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ChatComposition,
     {
       services,
@@ -4151,7 +4839,9 @@ function Chat({
       onPanelClose,
       inspector: resolveSlot(inspector),
       onArtifact,
-      onOpenArtifact
+      onOpenArtifact,
+      onOpenArtifactList,
+      onSelectArtifact
     }
   );
 }
@@ -4162,6 +4852,8 @@ function ChatDslAdapter({
   onPanelClose,
   onArtifact,
   onOpenArtifact,
+  onOpenArtifactList,
+  onSelectArtifact,
   onModelChange,
   onContextsChange,
   onMessageAction,
@@ -4171,7 +4863,7 @@ function ChatDslAdapter({
   onTitleChange,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Chat,
     {
       ...rest,
@@ -4180,6 +4872,8 @@ function ChatDslAdapter({
       onPanelClose: onPanelClose ? () => onPanelClose({}) : void 0,
       onArtifact: onArtifact ? (artifact) => onArtifact({ artifact }) : void 0,
       onOpenArtifact: onOpenArtifact ? (artifact) => onOpenArtifact({ artifact }) : void 0,
+      onOpenArtifactList: onOpenArtifactList ? () => onOpenArtifactList({}) : void 0,
+      onSelectArtifact: onSelectArtifact ? (artifact) => onSelectArtifact({ artifact }) : void 0,
       onModelChange: onModelChange ? (model) => onModelChange({ model }) : void 0,
       onContextsChange: onContextsChange ? (contexts) => onContextsChange({ contexts }) : void 0,
       onMessageAction: onMessageAction ? (action, message) => onMessageAction({ action, message }) : void 0,
@@ -4203,11 +4897,11 @@ function createChatComponentRegistry() {
 }
 
 // src/view/ChatLayout.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function ChatLayout({ title, children }) {
-  return /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-layout", children: [
-    /* @__PURE__ */ jsx22("header", { className: "pactor-chat-layout__header", children: title ?? "Chat" }),
-    /* @__PURE__ */ jsx22("main", { className: "pactor-chat-layout__main", children })
+  return /* @__PURE__ */ jsxs16("div", { className: "pactor-chat-layout", children: [
+    /* @__PURE__ */ jsx23("header", { className: "pactor-chat-layout__header", children: title ?? "Chat" }),
+    /* @__PURE__ */ jsx23("main", { className: "pactor-chat-layout__main", children })
   ] });
 }
 var CHAT_LAYOUT_TYPE = "chat";
@@ -4217,6 +4911,7 @@ function registerChatLayout(layoutRegistry) {
   }
 }
 export {
+  ARTIFACT_IMAGE_EXTENSIONS,
   ActivityTrace,
   AppShell,
   ArtifactPanel,
@@ -4226,6 +4921,7 @@ export {
   CHAT_LAYOUT_TYPE,
   CHAT_SHELL_COMPONENT_TYPE,
   Chat,
+  ChatArtifactCard,
   ChatDenied,
   ChatLayout,
   ChatServicesProvider,
@@ -4240,7 +4936,11 @@ export {
   MessageBubble,
   PartRenderer,
   applyChatEvent,
+  artifactCardMeta,
+  buildArtifactBlob,
+  buildArtifactTree,
   buildChatScope,
+  collectArtifacts,
   collectMessageText,
   createChatComponentRegistry,
   createChatId,
@@ -4249,14 +4949,24 @@ export {
   createManualDriver,
   createSafeRegistry,
   detectStreamingMode,
+  downloadArtifact,
+  formatArtifactSize,
+  formatMessageTime,
   guardChatDsl,
+  isImageArtifact,
+  mergeArtifacts,
   pairToolTraces,
   registerCapabilityAction,
   registerChatComponent,
   registerChatLayout,
   registerChatShellComponent,
+  resolveArtifactFileType,
+  resolveArtifactFilename,
+  resolveArtifactIcon,
+  resolveArtifactIconName,
   runChatTurn,
   runRegenerateTurn,
+  saveBlob,
   useChatAutoScroll,
   useChatServices,
   useSidebarDrawer,