@pactor-app/chat 1.16.0 → 1.17.0

package/dist/index.cjs

@@ -30,6 +30,7 @@ __export(index_exports, {
   CHAT_LAYOUT_TYPE: () => CHAT_LAYOUT_TYPE,
   CHAT_SHELL_COMPONENT_TYPE: () => CHAT_SHELL_COMPONENT_TYPE,
   Chat: () => Chat,
+  ChatArtifactCard: () => ChatArtifactCard,
   ChatDenied: () => ChatDenied,
   ChatLayout: () => ChatLayout,
   ChatServicesProvider: () => ChatServicesProvider,
@@ -44,6 +45,7 @@ __export(index_exports, {
   MessageBubble: () => MessageBubble,
   PartRenderer: () => PartRenderer,
   applyChatEvent: () => applyChatEvent,
+  artifactCardMeta: () => artifactCardMeta,
   buildArtifactBlob: () => buildArtifactBlob,
   buildArtifactTree: () => buildArtifactTree,
   buildChatScope: () => buildChatScope,
@@ -57,6 +59,8 @@ __export(index_exports, {
   createSafeRegistry: () => createSafeRegistry,
   detectStreamingMode: () => detectStreamingMode,
   downloadArtifact: () => downloadArtifact,
+  formatArtifactSize: () => formatArtifactSize,
+  formatMessageTime: () => formatMessageTime,
   guardChatDsl: () => guardChatDsl,
   isImageArtifact: () => isImageArtifact,
   mergeArtifacts: () => mergeArtifacts,
@@ -67,6 +71,8 @@ __export(index_exports, {
   registerChatShellComponent: () => registerChatShellComponent,
   resolveArtifactFileType: () => resolveArtifactFileType,
   resolveArtifactFilename: () => resolveArtifactFilename,
+  resolveArtifactIcon: () => resolveArtifactIcon,
+  resolveArtifactIconName: () => resolveArtifactIconName,
   runChatTurn: () => runChatTurn,
   runRegenerateTurn: () => runRegenerateTurn,
   saveBlob: () => saveBlob,
@@ -220,6 +226,97 @@ 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();
@@ -1044,7 +1141,7 @@ function useChatAutoScroll({
 
 // src/chat-composition.tsx
 var import_runtime5 = require("@pactor-app/runtime");
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/hooks/use-chat-model.ts
 var import_react3 = require("react");
@@ -1098,14 +1195,14 @@ function AppShell({
 }
 
 // src/view/ArtifactPanel.tsx
-var import_components4 = require("@pactor-app/ui/components");
+var import_components5 = require("@pactor-app/ui/components");
 var import_core3 = require("@pactor-app/core");
 var import_markdown2 = require("@pactor-app/markdown");
 var import_runtime4 = require("@pactor-app/runtime");
-var import_react6 = require("react");
+var import_react8 = require("react");
 
 // src/view/PartRenderer.tsx
-var import_components2 = require("@pactor-app/ui/components");
+var import_components3 = require("@pactor-app/ui/components");
 var import_markdown = require("@pactor-app/markdown");
 var import_runtime3 = require("@pactor-app/runtime");
 
@@ -1147,59 +1244,7 @@ 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
-var import_runtime2 = require("@pactor-app/runtime");
+var import_components2 = require("@pactor-app/ui/components");
 var import_react5 = require("react");
 
 // src/view/chrome/actions.ts
@@ -1280,6 +1325,12 @@ function ensureChatChromeActions(actions) {
 function invokeChatPanelClose() {
   handlers.panelClose?.();
 }
+function invokeChatOpenArtifact(artifact) {
+  handlers.openArtifact?.(artifact);
+}
+function invokeChatOpenArtifactList() {
+  handlers.openArtifactList?.();
+}
 function invokeChatPanelToggleList() {
   handlers.panelToggleList?.();
 }
@@ -1287,8 +1338,112 @@ function invokeChatPanelDownload() {
   handlers.panelDownload?.();
 }
 
-// src/view/chrome/ChromeSlot.tsx
+// src/view/chrome/artifact-card.tsx
 var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "pactor-chat-artifact-card__icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_components2.Icon, { name: icon.name, size: 20 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "pactor-chat-artifact-card__text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "pactor-chat-artifact-card__title", children: artifact.title }),
+          meta ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "pactor-chat-artifact-card__meta", children: meta }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "pactor-chat-artifact-card__arrow", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_components2.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] = (0, import_react5.useState)(false);
+  const overflow = artifacts.length > ARTIFACT_CARD_GROUP_LIMIT;
+  const visible = overflow && !expanded ? artifacts.slice(0, ARTIFACT_CARD_GROUP_LIMIT) : artifacts;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pactor-chat-artifact-group", children: [
+    visible.map((artifact) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatArtifactCard, { artifact }, artifact.id)),
+    overflow ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pactor-chat-artifact-group__footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "pactor-chat-artifact-group__toggle",
+          "aria-expanded": expanded,
+          onClick: () => setExpanded((value) => !value),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_components2.Icon,
+              {
+                name: expanded ? "chevron-up" : "chevron-down",
+                size: 12
+              }
+            ),
+            expanded ? "\u6536\u8D77" : "\u5C55\u5F00"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "pactor-chat-artifact-group__all",
+          onClick: () => invokeChatOpenArtifactList(),
+          children: [
+            "\u67E5\u770B\u6240\u6709\u4EA7\u7269(",
+            artifacts.length,
+            ")",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_components2.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
+var import_runtime2 = require("@pactor-app/runtime");
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var warnedMissing = /* @__PURE__ */ new Set();
 function warnMissingOnce(key, detail) {
   if (!warnedMissing.has(key)) {
@@ -1306,7 +1461,7 @@ function ChromeSlotInner({
   try {
     renderer = (0, import_runtime2.useRenderer)();
   } catch {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
   }
   ensureChatChromeActions(renderer.context.actions);
   if (components) {
@@ -1317,7 +1472,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__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
       }
       if (existing === void 0) {
         renderer.context.components.register(
@@ -1335,12 +1490,12 @@ 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__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
   }
-  const rendered = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pactor-chat-chrome", children: renderer.renderChildren([fragment.node]) });
-  return wrap ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: wrap(rendered) }) : rendered;
+  const rendered = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pactor-chat-chrome", children: renderer.renderChildren([fragment.node]) });
+  return wrap ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: wrap(rendered) }) : rendered;
 }
-var ChromeSlotGuard = class extends import_react5.Component {
+var ChromeSlotGuard = class extends import_react6.Component {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -1353,7 +1508,7 @@ var ChromeSlotGuard = class extends import_react5.Component {
   }
 };
 function ChromeSlot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChromeSlotGuard, { fallback: props.fallback, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChromeSlotInner, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChromeSlotGuard, { fallback: props.fallback, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChromeSlotInner, { ...props }) });
 }
 
 // src/view/chrome/feedback.tsx
@@ -1377,9 +1532,9 @@ function buildStatusFragment(text) {
 }
 
 // src/view/PartRenderer.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ChatDenied({ deniedType }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pactor-chat-denied", "data-pactor-chat-denied": deniedType, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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}` : ""
   ] });
@@ -1390,89 +1545,68 @@ function ChatDslNode({
 }) {
   const renderer = (0, import_runtime3.useRenderer)();
   const extraScope = scope ? buildChatScope(scope) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderer.renderChildren([node], extraScope) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: renderer.renderChildren([node], extraScope) });
 }
 function SmoothText({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pactor-chat-text", children: shown });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pactor-chat-text", children: shown });
 }
 function SmoothMarkdown({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
   const throttled = useThrottledValue(shown, 100, streaming);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_markdown.MarkdownRenderer, { content: throttled });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_markdown.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__ */ (0, import_jsx_runtime3.jsx)(SmoothText, { content: part.content, streaming });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SmoothText, { content: part.content, streaming });
     case "markdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SmoothMarkdown, { content: part.content, streaming });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SmoothMarkdown, { content: part.content, streaming });
     case "thinking":
     case "tool-call":
     case "tool-result":
       return null;
     case "dsl": {
       if (!part.schema || !runtime) {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pactor-chat-dsl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_runtime3.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChatDslNode, { node: guarded, scope }) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pactor-chat-dsl", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_runtime3.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChatDslNode, { node: guarded, scope }) }) });
     }
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ChromeSlot,
         {
           fragment: buildErrorFragment(part.message),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pactor-chat-error", role: "alert", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components2.Icon, { name: "error", size: 14 }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: part.message })
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "pactor-chat-error", role: "alert", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components3.Icon, { name: "error", size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: part.message })
           ] })
         }
       );
     case "status":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ChromeSlot,
         {
           fragment: buildStatusFragment(part.text),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pactor-chat-status", children: part.text })
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pactor-chat-status", children: part.text })
         }
       );
     case "artifact":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ChromeSlot,
         {
           fragment: buildArtifactCardFragment(part.artifact),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
-            {
-              className: "pactor-chat-artifact-card",
-              "data-artifact-kind": part.artifact.kind,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pactor-chat-artifact-card__title", children: part.artifact.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pactor-chat-artifact-card__kind", children: part.artifact.kind }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "pactor-chat-artifact-card__open",
-                    onClick: () => onOpenArtifact?.(part.artifact),
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components2.Icon, { name: "panel-right-open", size: 13, strokeWidth: 1.7 }),
-                      "\u5728\u9762\u677F\u4E2D\u6253\u5F00"
-                    ]
-                  }
-                )
-              ]
-            }
-          )
+          components: ARTIFACT_CARD_INTERNAL_COMPONENTS,
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChatArtifactCard, { artifact: part.artifact })
         }
       );
     default:
@@ -1481,10 +1615,17 @@ function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact
 }
 
 // src/view/chrome/panel-header.tsx
-var import_components3 = require("@pactor-app/ui/components");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_components4 = require("@pactor-app/ui/components");
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ChatPanelContext = (0, import_react7.createContext)(
+  null
+);
+function artifactIconName(artifact) {
+  return artifact ? resolveArtifactIconName(artifact) : "file";
+}
 function ChatPanelCloseButton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       type: "button",
@@ -1492,17 +1633,16 @@ function ChatPanelCloseButton() {
       title: "\u5173\u95ED\u9762\u677F",
       "aria-label": "\u5173\u95ED\u9762\u677F",
       onClick: () => invokeChatPanelClose(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components3.Icon, { name: "x", size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "x", size: 16 })
     }
   );
 }
-var PANEL_HEADER_INTERNAL_COMPONENTS = {
-  ChatPanelCloseButton,
-  ChatPanelDownloadButton,
-  ChatPanelListButton
-};
 function ChatPanelListButton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const ctx = (0, import_react7.useContext)(ChatPanelContext);
+  if (ctx?.view === "list") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       type: "button",
@@ -1510,12 +1650,12 @@ function ChatPanelListButton() {
       title: "\u4EA7\u7269\u76EE\u5F55",
       "aria-label": "\u4EA7\u7269\u76EE\u5F55",
       onClick: () => invokeChatPanelToggleList(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components3.Icon, { name: "arrow-left", size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "arrow-left", size: 16 })
     }
   );
 }
 function ChatPanelDownloadButton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       type: "button",
@@ -1523,10 +1663,58 @@ function ChatPanelDownloadButton() {
       title: "\u4E0B\u8F7D\u4EA7\u7269",
       "aria-label": "\u4E0B\u8F7D\u4EA7\u7269",
       onClick: () => invokeChatPanelDownload(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components3.Icon, { name: "download", size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "download", size: 16 })
+    }
+  );
+}
+function ChatPanelArtifactMenu() {
+  const ctx = (0, import_react7.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__ */ (0, import_jsx_runtime5.jsx)(
+    import_components4.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__ */ (0, import_jsx_runtime5.jsxs)(
+        "span",
+        {
+          className: "pactor-chat-inspector__menu-trigger",
+          "data-view": ctx.view,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_components4.Icon,
+              {
+                name: inList ? "folder" : artifactIconName(active),
+                size: 13
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__title", children: inList ? "\u4EA7\u7269\u76EE\u5F55" : active?.title ?? "\u4EA7\u51FA\u7269" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "chevron-down", size: 12 })
+          ]
+        }
+      )
     }
   );
 }
+var PANEL_HEADER_INTERNAL_COMPONENTS = {
+  ChatPanelCloseButton,
+  ChatPanelDownloadButton,
+  ChatPanelListButton,
+  ChatPanelArtifactMenu
+};
 function buildPanelHeaderFragment(props) {
   return {
     requires: [
@@ -1535,7 +1723,8 @@ function buildPanelHeaderFragment(props) {
       "Badge",
       "ChatPanelCloseButton",
       "ChatPanelDownloadButton",
-      "ChatPanelListButton"
+      "ChatPanelListButton",
+      "ChatPanelArtifactMenu"
     ],
     node: {
       type: "Flex",
@@ -1551,7 +1740,7 @@ function buildPanelHeaderFragment(props) {
           props: { align: "center", gap: "small" },
           children: [
             ...props.showListButton ? [{ type: "ChatPanelListButton" }] : [],
-            {
+            props.showMenu ? { type: "ChatPanelArtifactMenu" } : {
               type: "Text",
               props: {
                 text: props.title,
@@ -1559,14 +1748,16 @@ 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"
+                }
               }
-            }
+            ]
           ]
         },
         {
@@ -1583,9 +1774,9 @@ function buildPanelHeaderFragment(props) {
 }
 
 // src/view/ArtifactPanel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function useArtifactRuntime(safeRegistry, user) {
-  return (0, import_react6.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     if (!safeRegistry) {
       return void 0;
     }
@@ -1597,7 +1788,7 @@ function useArtifactRuntime(safeRegistry, user) {
     return createChatRuntime({ safeRegistry: components, user });
   }, [safeRegistry, user]);
 }
-var ArtifactDslGuard = class extends import_react6.Component {
+var ArtifactDslGuard = class extends import_react8.Component {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -1609,12 +1800,12 @@ var ArtifactDslGuard = class extends import_react6.Component {
     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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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 } = (0, import_runtime4.useRenderer)();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: renderChildren([node]) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: renderChildren([node]) });
 }
 function ArtifactDslContent({
   content,
@@ -1622,14 +1813,13 @@ function ArtifactDslContent({
 }) {
   const node = typeof content === "object" && content !== null && !Array.isArray(content) && typeof content.type === "string" ? content : void 0;
   if (!node || !runtime) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(import_runtime4.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactDslGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactDslNode, { node: guarded }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_runtime4.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArtifactDslGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArtifactDslNode, { node: guarded }) }) });
 }
-function ArtifactKindIcon({ kind }) {
-  const name = kind === "code" ? "code" : kind === "dsl" ? "layout-grid" : "file-text";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name, size: 13 });
+function ArtifactKindIcon({ artifact }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components5.Icon, { name: resolveArtifactIconName(artifact), size: 13 });
 }
 function buildArtifactTree(artifacts) {
   const root = { name: "", path: "", children: [] };
@@ -1671,7 +1861,7 @@ function ArtifactListView({
   activeId,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "pactor-chat-inspector__list", children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "pactor-chat-inspector__list", children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     ArtifactTreeRow,
     {
       node,
@@ -1686,9 +1876,9 @@ function ArtifactTreeRow({
   activeId,
   onSelect
 }) {
-  const [open, setOpen] = (0, import_react6.useState)(true);
+  const [open, setOpen] = (0, import_react8.useState)(true);
   if (node.artifact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         type: "button",
@@ -1696,15 +1886,15 @@ function ArtifactTreeRow({
         "data-active": node.artifact.id === activeId,
         onClick: () => onSelect?.(node.artifact),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactKindIcon, { kind: node.artifact.kind }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__list-item-title", children: node.artifact.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__kind", children: node.artifact.kind })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArtifactKindIcon, { artifact: node.artifact }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pactor-chat-inspector__list-item-title", children: node.artifact.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pactor-chat-inspector__kind", children: node.artifact.kind })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         type: "button",
@@ -1713,13 +1903,13 @@ function ArtifactTreeRow({
         "data-open": open,
         onClick: () => setOpen((value) => !value),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "chevron-right", size: 12 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "folder", size: 13 }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: node.name })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components5.Icon, { name: "chevron-right", size: 12 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components5.Icon, { name: "folder", size: 13 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: node.name })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__list-children", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pactor-chat-inspector__list-children", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ArtifactListView,
       {
         nodes: node.children,
@@ -1732,7 +1922,7 @@ function ArtifactTreeRow({
 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__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src, alt: artifact.title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pactor-chat-inspector__image", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src, alt: artifact.title }) });
 }
 function ArtifactContent({
   artifact,
@@ -1742,23 +1932,23 @@ function ArtifactContent({
   const ext = resolveArtifactFileType(artifact);
   const custom = (ext ? viewers?.[ext] : void 0) ?? viewers?.[artifact.kind];
   if (custom) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: custom(artifact) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: custom(artifact) });
   }
   if (isImageArtifact(artifact)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactImageContent, { artifact });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArtifactImageContent, { artifact });
   }
   switch (artifact.kind) {
     case "markdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_markdown2.MarkdownRenderer, { content: String(artifact.content) });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_markdown2.MarkdownRenderer, { content: String(artifact.content) });
     case "code":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pactor-chat-inspector__code", children: [
-        artifact.language ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__code-lang", children: artifact.language }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { children: String(artifact.content) }) })
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "pactor-chat-inspector__code", children: [
+        artifact.language ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pactor-chat-inspector__code-lang", children: artifact.language }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { children: String(artifact.content) }) })
       ] });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
     case "dsl":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactDslContent, { content: artifact.content, runtime });
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArtifactDslContent, { content: artifact.content, runtime });
     default:
       return null;
   }
@@ -1768,6 +1958,8 @@ function ArtifactPanel({
   artifacts,
   activeArtifactId,
   onSelectArtifact,
+  viewRequest,
+  onViewRequestConsumed,
   inspector,
   onClose,
   safeRegistry,
@@ -1776,20 +1968,27 @@ function ArtifactPanel({
   className
 }) {
   const runtime = useArtifactRuntime(safeRegistry, user);
-  const [view, setView] = (0, import_react6.useState)("content");
+  const [view, setView] = (0, import_react8.useState)("content");
   const activeId = activeArtifactId ?? artifact?.id;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setView("content");
   }, [activeId]);
+  (0, import_react8.useEffect)(() => {
+    if (viewRequest != null) {
+      setView("list");
+      onViewRequestConsumed?.();
+    }
+  }, [viewRequest]);
   const showListButton = artifacts !== void 0 && artifacts.length > 0;
-  const toggleListRef = (0, import_react6.useRef)(() => {
+  const showMenu = artifacts !== void 0 && artifacts.length > 0;
+  const toggleListRef = (0, import_react8.useRef)(() => {
   });
   toggleListRef.current = () => setView((value) => value === "list" ? "content" : "list");
-  const closeRef = (0, import_react6.useRef)(onClose);
+  const closeRef = (0, import_react8.useRef)(onClose);
   closeRef.current = onClose;
-  const artifactRef = (0, import_react6.useRef)(artifact);
+  const artifactRef = (0, import_react8.useRef)(artifact);
   artifactRef.current = artifact;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setChatChromeHandlers({
       panelClose: () => closeRef.current?.(),
       panelToggleList: () => toggleListRef.current(),
@@ -1801,8 +2000,8 @@ function ArtifactPanel({
       }
     });
   }, []);
-  const panelRef = (0, import_react6.useRef)(null);
-  const [width, setWidth] = (0, import_react6.useState)(null);
+  const panelRef = (0, import_react8.useRef)(null);
+  const [width, setWidth] = (0, import_react8.useState)(null);
   const handleResizeStart = (event) => {
     event.preventDefault();
     const panel = panelRef.current;
@@ -1811,14 +2010,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, 320), maxWidth)));
+      setWidth(Math.round(Math.min(Math.max(next, 480), maxWidth)));
     };
     const onUp = () => {
       document.body.style.userSelect = prevUserSelect;
@@ -1828,121 +2027,88 @@ function ArtifactPanel({
     document.addEventListener("pointermove", onMove);
     document.addEventListener("pointerup", onUp);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "aside",
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ChatPanelContext.Provider,
     {
-      ref: panelRef,
-      className: `pactor-chat-inspector${className ? ` ${className}` : ""}`,
-      "data-kind": artifact?.kind,
-      style: width !== null ? { width: `${width}px` } : void 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            className: "pactor-chat-inspector__resize",
-            role: "separator",
-            "aria-orientation": "vertical",
-            "aria-label": "\u62D6\u52A8\u8C03\u6574\u9762\u677F\u5BBD\u5EA6",
-            onPointerDown: handleResizeStart
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          ChromeSlot,
-          {
-            fragment: buildPanelHeaderFragment({
-              title: artifact?.title ?? "\u4EA7\u51FA\u7269",
-              kind: artifact?.kind ?? "text",
-              showListButton,
-              showDownload: artifact != null
-            }),
-            components: PANEL_HEADER_INTERNAL_COMPONENTS,
-            fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-              showListButton ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "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: () => toggleListRef.current(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "arrow-left", size: 16, strokeWidth: 1.7 })
-                }
-              ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__title", children: artifact?.title ?? "\u4EA7\u51FA\u7269" }),
-              artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
-              artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "pactor-chat-icon-button pactor-chat-inspector__download",
-                  title: "\u4E0B\u8F7D\u4EA7\u7269",
-                  "aria-label": "\u4E0B\u8F7D\u4EA7\u7269",
-                  onClick: () => void downloadArtifact(artifact),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "download", size: 16, strokeWidth: 1.7 })
-                }
-              ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "pactor-chat-icon-button pactor-chat-inspector__close",
-                  "aria-label": "\u5173\u95ED\u9762\u677F",
-                  onClick: onClose,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "x", size: 16, strokeWidth: 1.7 })
-                }
-              )
-            ] })
-          }
-        ) }),
-        artifacts !== void 0 && artifacts.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__tabs", role: "tablist", children: artifacts.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": item.id === activeId,
-            "data-active": item.id === activeId,
-            className: "pactor-chat-inspector__tab",
-            title: item.title,
-            onClick: () => onSelectArtifact?.(item),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactKindIcon, { kind: item.kind }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__tab-title", children: item.title })
-            ]
-          },
-          item.id
-        )) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__body", children: view === "list" && artifacts !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          ArtifactListView,
-          {
-            nodes: buildArtifactTree(artifacts),
-            activeId,
-            onSelect: onSelectArtifact
-          }
-        ) : inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          ArtifactContent,
-          {
-            artifact,
-            runtime,
-            viewers: artifactViewers
-          }
-        ) : null })
-      ]
+      value: {
+        artifacts: artifacts ?? [],
+        activeId,
+        view,
+        onSelectArtifact
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "aside",
+        {
+          ref: panelRef,
+          className: `pactor-chat-inspector${className ? ` ${className}` : ""}`,
+          "data-kind": artifact?.kind,
+          style: width !== null ? { width: `${width}px` } : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "div",
+              {
+                className: "pactor-chat-inspector__resize",
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": "\u62D6\u52A8\u8C03\u6574\u9762\u677F\u5BBD\u5EA6",
+                onPointerDown: handleResizeStart
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pactor-chat-inspector__header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                  showListButton ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatPanelListButton, {}) : null,
+                  showMenu ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatPanelArtifactMenu, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pactor-chat-inspector__title", children: view === "list" ? "\u4EA7\u7269\u76EE\u5F55" : artifact?.title ?? "\u4EA7\u51FA\u7269" }),
+                  view !== "list" && artifact ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
+                  artifact ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatPanelDownloadButton, {}) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatPanelCloseButton, {})
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pactor-chat-inspector__body", children: view === "list" && artifacts !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ArtifactListView,
+              {
+                nodes: buildArtifactTree(artifacts),
+                activeId,
+                onSelect: onSelectArtifact
+              }
+            ) : inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              ArtifactContent,
+              {
+                artifact,
+                runtime,
+                viewers: artifactViewers
+              }
+            ) : null })
+          ]
+        }
+      )
     }
   );
 }
 
 // src/view/ChatView.tsx
-var import_components10 = require("@pactor-app/ui/components");
+var import_components11 = require("@pactor-app/ui/components");
 var import_core4 = require("@pactor-app/core");
-var import_react15 = require("react");
+var import_react17 = require("react");
 
 // src/view/Composer.tsx
-var import_components7 = require("@pactor-app/ui/components");
-var import_react11 = require("react");
+var import_components8 = require("@pactor-app/ui/components");
+var import_react13 = require("react");
 
 // src/view/AnchoredPopover.tsx
-var import_react7 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function AnchoredPopover({
   anchorRect,
   onClose,
@@ -1951,9 +2117,9 @@ function AnchoredPopover({
   role = "dialog",
   sideOffset = 8
 }) {
-  const ref = (0, import_react7.useRef)(null);
-  const [position, setPosition] = (0, import_react7.useState)(null);
-  (0, import_react7.useLayoutEffect)(() => {
+  const ref = (0, import_react9.useRef)(null);
+  const [position, setPosition] = (0, import_react9.useState)(null);
+  (0, import_react9.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element) return;
     const height = element.offsetHeight;
@@ -1971,7 +2137,7 @@ function AnchoredPopover({
       }
     );
   }, [anchorRect, sideOffset]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       const element = ref.current;
@@ -1999,7 +2165,7 @@ function AnchoredPopover({
     position?.below ? "pactor-chat-popover--below" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       ref,
@@ -2018,8 +2184,8 @@ function AnchoredPopover({
 }
 
 // src/view/ModelChip.tsx
-var import_components5 = require("@pactor-app/ui/components");
-var import_react8 = require("react");
+var import_components6 = require("@pactor-app/ui/components");
+var import_react10 = require("react");
 
 // src/view/chrome/model-select.tsx
 function buildModelSelectFragment(props) {
@@ -2045,17 +2211,17 @@ function buildModelSelectFragment(props) {
 }
 
 // src/view/ModelChip.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ModelChip({
   models,
   model,
   onModelChange
 }) {
-  const chipRef = (0, import_react8.useRef)(null);
-  const [anchor, setAnchor] = (0, import_react8.useState)(null);
+  const chipRef = (0, import_react10.useRef)(null);
+  const [anchor, setAnchor] = (0, import_react10.useState)(null);
   const currentOption = models.find((option) => option.value === model) ?? models[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
         ref: chipRef,
@@ -2065,18 +2231,18 @@ function ModelChip({
         "aria-label": "\u9009\u62E9\u6A21\u578B",
         onClick: () => setAnchor(chipRef.current.getBoundingClientRect()),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pactor-chat-model-chip__label", children: currentOption.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components5.Icon, { name: "chevrons-up-down", size: 12 })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pactor-chat-model-chip__label", children: currentOption.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "chevrons-up-down", size: 12 })
         ]
       }
     ),
-    anchor && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    anchor && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       AnchoredPopover,
       {
         anchorRect: anchor,
         onClose: () => setAnchor(null),
         role: "listbox",
-        children: models.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: models.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "button",
           {
             type: "button",
@@ -2088,8 +2254,8 @@ function ModelChip({
               setAnchor(null);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pactor-chat-popover__item-label", children: option.label }),
-              option.value === currentOption.value && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components5.Icon, { name: "check", size: 13, className: "pactor-chat-popover__item-check" })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pactor-chat-popover__item-label", children: option.label }),
+              option.value === currentOption.value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "check", size: 13, className: "pactor-chat-popover__item-check" })
             ]
           },
           option.value
@@ -2103,31 +2269,31 @@ function ModelSelect({
   model,
   onModelChange
 }) {
-  const changeRef = (0, import_react8.useRef)(onModelChange);
+  const changeRef = (0, import_react10.useRef)(onModelChange);
   changeRef.current = onModelChange;
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setChatChromeHandlers({
       modelChange: (value) => changeRef.current?.(value)
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ChromeSlot,
     {
       fragment: buildModelSelectFragment({ models, model }),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModelChip, { models, model, onModelChange })
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModelChip, { models, model, onModelChange })
     }
   );
 }
 
 // src/view/chrome/composer.tsx
-var import_components6 = require("@pactor-app/ui/components");
-var import_react9 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ComposerBridgeContext = (0, import_react9.createContext)(
+var import_components7 = require("@pactor-app/ui/components");
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ComposerBridgeContext = (0, import_react11.createContext)(
   null
 );
 function useComposerBridge() {
-  const bridge = (0, import_react9.useContext)(ComposerBridgeContext);
+  const bridge = (0, import_react11.useContext)(ComposerBridgeContext);
   if (!bridge) {
     throw new Error(
       "[@pactor-app/chat] ChatComposer* \u5185\u90E8\u7EC4\u4EF6\u4EC5\u53EF\u5728 Composer chrome \u7247\u6BB5\u5185\u6E32\u67D3"
@@ -2152,21 +2318,21 @@ function ComposerAttachments({
   if (attachments.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
     const isImage = attachment.mimeType.startsWith("image/");
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       {
         className: "pactor-chat-composer__attachment",
         "data-attachment-id": attachment.id,
         onClick: () => onClick?.(attachment),
         children: [
-          isImage && attachment.url ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pactor-chat-composer__attachment-thumb", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: attachment.url, alt: attachment.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "pactor-chat-composer__attachment-info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "file-text", size: 14 }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pactor-chat-composer__attachment-name", children: attachment.name }),
-            attachment.size !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pactor-chat-composer__attachment-size", children: formatSize(attachment.size) })
+          isImage && attachment.url ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-composer__attachment-thumb", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: attachment.url, alt: attachment.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "pactor-chat-composer__attachment-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components7.Icon, { name: "file-text", size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-composer__attachment-name", children: attachment.name }),
+            attachment.size !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-composer__attachment-size", children: formatSize(attachment.size) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
@@ -2177,7 +2343,7 @@ function ComposerAttachments({
                 event.stopPropagation();
                 onRemove(attachment.id);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "x", size: 12 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components7.Icon, { name: "x", size: 12 })
             }
           )
         ]
@@ -2193,14 +2359,14 @@ function ComposerContextChips({
   if (chips.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pactor-chat-composer__contexts", children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-composer__contexts", children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "span",
     {
       className: "pactor-chat-context-chip",
       "data-context-id": chip.id,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "pactor-chat-context-chip__label", children: chip.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-context-chip__label", children: chip.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -2208,7 +2374,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__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "x", size: 12 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components7.Icon, { name: "x", size: 12 })
           }
         )
       ]
@@ -2218,8 +2384,8 @@ function ComposerContextChips({
 }
 function ChatComposerHeader() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    bridge.attachments !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    bridge.attachments !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ComposerAttachments,
       {
         attachments: bridge.attachments,
@@ -2227,7 +2393,7 @@ function ChatComposerHeader() {
         onClick: bridge.attachmentClick
       }
     ),
-    bridge.contextChips !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    bridge.contextChips !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ComposerContextChips,
       {
         chips: bridge.contextChips,
@@ -2238,9 +2404,9 @@ function ChatComposerHeader() {
 }
 function ChatComposerToolbarStart() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     bridge.toolbarStart,
-    bridge.showPlus && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    bridge.showPlus && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -2248,10 +2414,10 @@ function ChatComposerToolbarStart() {
         title: "\u66F4\u591A\u529F\u80FD",
         "aria-label": "\u66F4\u591A\u529F\u80FD",
         onClick: (event) => bridge.plusClick(event.currentTarget.getBoundingClientRect()),
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "plus", size: 14 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components7.Icon, { name: "plus", size: 14 })
       }
     ),
-    bridge.showAttach && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    bridge.showAttach && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -2259,15 +2425,15 @@ function ChatComposerToolbarStart() {
         title: "\u6DFB\u52A0\u9644\u4EF6",
         "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
         onClick: bridge.openFilePicker,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "paperclip", size: 14 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components7.Icon, { name: "paperclip", size: 14 })
       }
     )
   ] });
 }
 function ChatComposerToolbarEnd() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    bridge.modelChipEnabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    bridge.modelChipEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ModelSelect,
       {
         models: bridge.models,
@@ -2276,7 +2442,7 @@ function ChatComposerToolbarEnd() {
       }
     ),
     bridge.toolbarEnd,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -2285,14 +2451,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__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "arrow-up", size: 16 })
+        children: bridge.streaming ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components7.Icon, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components7.Icon, { name: "arrow-up", size: 16 })
       }
     )
   ] });
 }
 function ChatComposerFooter() {
   const bridge = useComposerBridge();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: bridge.composerFooter });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: bridge.composerFooter });
 }
 var COMPOSER_INTERNAL_COMPONENTS = {
   ChatComposerHeader,
@@ -2333,8 +2499,8 @@ function buildComposerFragment(props) {
 }
 
 // src/view/context-sources.tsx
-var import_react10 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function sourceCacheKey(source) {
   return `${source.service ?? ""}:${JSON.stringify(source.params ?? {})}`;
 }
@@ -2369,8 +2535,8 @@ function ContextSourceList({
   cache,
   onSelect
 }) {
-  const [resolutions, setResolutions] = (0, import_react10.useState)([]);
-  (0, import_react10.useEffect)(() => {
+  const [resolutions, setResolutions] = (0, import_react12.useState)([]);
+  (0, import_react12.useEffect)(() => {
     let cancelled = false;
     const initial = sources.map(
       (source) => source.items ? { status: "ready", items: source.items } : { status: "loading" }
@@ -2415,12 +2581,12 @@ function ContextSourceList({
     totalMatched += items.length;
     return { source, resolution, items };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pactor-chat-source-list", children: [
-    groups.map(({ source, resolution, items }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pactor-chat-source-list__group", children: [
-      sources.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-source-list__group-label", children: source.label }),
-      resolution.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-source-list__hint", children: "\u52A0\u8F7D\u4E2D\u2026" }),
-      resolution.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-source-list__error", role: "alert", children: resolution.message }),
-      items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pactor-chat-source-list", children: [
+    groups.map(({ source, resolution, items }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pactor-chat-source-list__group", children: [
+      sources.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pactor-chat-source-list__group-label", children: source.label }),
+      resolution.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pactor-chat-source-list__hint", children: "\u52A0\u8F7D\u4E2D\u2026" }),
+      resolution.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pactor-chat-source-list__error", role: "alert", children: resolution.message }),
+      items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -2431,12 +2597,12 @@ function ContextSourceList({
         item.id
       ))
     ] }, `${source.trigger}:${source.label}`)),
-    totalMatched === 0 && groups.every(({ resolution }) => resolution.status === "ready") && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-source-list__hint", children: "\u65E0\u5339\u914D\u9879" })
+    totalMatched === 0 && groups.every(({ resolution }) => resolution.status === "ready") && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pactor-chat-source-list__hint", children: "\u65E0\u5339\u914D\u9879" })
   ] });
 }
 
 // src/view/Composer.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var MAX_INPUT_HEIGHT = 200;
 function detectMention(text, caret) {
   const beforeCaret = text.slice(0, caret);
@@ -2470,26 +2636,26 @@ function Composer({
   composerFooter,
   hideToolbar = false
 }) {
-  const [text, setText] = (0, import_react11.useState)("");
-  const [dragOver, setDragOver] = (0, import_react11.useState)(false);
-  const inputRef = (0, import_react11.useRef)(null);
-  const fileInputRef = (0, import_react11.useRef)(null);
-  const plusButtonRef = (0, import_react11.useRef)(null);
-  const composingRef = (0, import_react11.useRef)(false);
+  const [text, setText] = (0, import_react13.useState)("");
+  const [dragOver, setDragOver] = (0, import_react13.useState)(false);
+  const inputRef = (0, import_react13.useRef)(null);
+  const fileInputRef = (0, import_react13.useRef)(null);
+  const plusButtonRef = (0, import_react13.useRef)(null);
+  const composingRef = (0, import_react13.useRef)(false);
   const modelChipEnabled = models !== void 0 && models.length > 0;
-  const mentionSources = (0, import_react11.useMemo)(
+  const mentionSources = (0, import_react13.useMemo)(
     () => contextSources?.filter((source) => source.trigger === "@") ?? [],
     [contextSources]
   );
-  const plusSources = (0, import_react11.useMemo)(
+  const plusSources = (0, import_react13.useMemo)(
     () => contextSources?.filter((source) => source.trigger === "+") ?? [],
     [contextSources]
   );
   const builtinMentionEnabled = onMentionTrigger === void 0 && mentionSources.length > 0;
   const builtinPlusEnabled = onPlusMenu === void 0 && plusSources.length > 0;
-  const [mentionState, setMentionState] = (0, import_react11.useState)(null);
-  const [plusAnchor, setPlusAnchor] = (0, import_react11.useState)(null);
-  const sourceCacheRef = (0, import_react11.useRef)(null);
+  const [mentionState, setMentionState] = (0, import_react13.useState)(null);
+  const [plusAnchor, setPlusAnchor] = (0, import_react13.useState)(null);
+  const sourceCacheRef = (0, import_react13.useRef)(null);
   if (sourceCacheRef.current === null) {
     sourceCacheRef.current = /* @__PURE__ */ new Map();
   }
@@ -2508,7 +2674,7 @@ function Composer({
     setMentionState(null);
     setPlusAnchor(null);
   };
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (input) {
       input.style.height = "auto";
@@ -2523,9 +2689,9 @@ function Composer({
     onSend?.(value);
     setText("");
   };
-  const sendRef = (0, import_react11.useRef)(send);
+  const sendRef = (0, import_react13.useRef)(send);
   sendRef.current = send;
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     setChatChromeHandlers({ composerSubmit: () => sendRef.current() });
   }, []);
   const syncText = (value, caret, rect) => {
@@ -2583,7 +2749,7 @@ function Composer({
     }
   };
   const showToolbar = !hideToolbar && (toolbarStart !== void 0 || toolbarEnd !== void 0 || onPlusMenu !== void 0 || builtinPlusEnabled || onAttachFiles !== void 0 || modelChipEnabled);
-  const fileInputNode = onAttachFiles ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const fileInputNode = onAttachFiles ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "input",
     {
       ref: fileInputRef,
@@ -2599,14 +2765,14 @@ function Composer({
       }
     }
   ) : null;
-  const popoverNodes = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    builtinMentionEnabled && mentionState && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const popoverNodes = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    builtinMentionEnabled && mentionState && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       AnchoredPopover,
       {
         anchorRect: mentionState.anchorRect,
         onClose: () => setMentionState(null),
         role: "listbox",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           ContextSourceList,
           {
             sources: mentionSources,
@@ -2618,13 +2784,13 @@ function Composer({
         )
       }
     ),
-    builtinPlusEnabled && plusAnchor && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    builtinPlusEnabled && plusAnchor && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       AnchoredPopover,
       {
         anchorRect: plusAnchor,
         onClose: () => setPlusAnchor(null),
         role: "listbox",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           ContextSourceList,
           {
             sources: plusSources,
@@ -2637,13 +2803,13 @@ function Composer({
       }
     )
   ] });
-  const fallback = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  const fallback = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       className: `pactor-chat-composer${dragOver ? " pactor-chat-composer--dragover" : ""}`,
       ...dragHandlers,
       children: [
-        attachments !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        attachments !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           ComposerAttachments,
           {
             attachments,
@@ -2651,7 +2817,7 @@ function Composer({
             onClick: onAttachmentClick
           }
         ),
-        contextChips !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        contextChips !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           ComposerContextChips,
           {
             chips: contextChips,
@@ -2662,8 +2828,8 @@ function Composer({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pactor-chat-composer__row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pactor-chat-composer__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "textarea",
             {
               ref: inputRef,
@@ -2695,7 +2861,7 @@ function Composer({
               }
             }
           ),
-          hideToolbar ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          hideToolbar ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
@@ -2704,14 +2870,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__ */ (0, import_jsx_runtime10.jsx)(import_components7.Icon, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components7.Icon, { name: "arrow-up", size: 16 })
+              children: streaming ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components8.Icon, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components8.Icon, { name: "arrow-up", size: 16 })
             }
           )
         ] }),
-        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pactor-chat-composer__toolbar", children: [
+        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pactor-chat-composer__toolbar", children: [
           toolbarStart,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pactor-chat-composer__toolbar-spacer" }),
-          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pactor-chat-composer__toolbar-spacer" }),
+          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               ref: plusButtonRef,
@@ -2727,10 +2893,10 @@ function Composer({
                   setPlusAnchor(rect);
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components7.Icon, { name: "plus", size: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components8.Icon, { name: "plus", size: 14 })
             }
           ),
-          onAttachFiles && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          onAttachFiles && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
@@ -2738,10 +2904,10 @@ function Composer({
               title: "\u6DFB\u52A0\u9644\u4EF6",
               "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
               onClick: () => fileInputRef.current?.click(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components7.Icon, { name: "paperclip", size: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components8.Icon, { name: "paperclip", size: 14 })
             }
           ),
-          modelChipEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          modelChipEnabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             ModelSelect,
             {
               models,
@@ -2751,7 +2917,7 @@ function Composer({
           ),
           toolbarEnd
         ] }),
-        composerFooter !== void 0 && composerFooter !== null ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pactor-chat-composer__footer", children: composerFooter }) : null,
+        composerFooter !== void 0 && composerFooter !== null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pactor-chat-composer__footer", children: composerFooter }) : null,
         fileInputNode,
         popoverNodes
       ]
@@ -2790,7 +2956,7 @@ function Composer({
     ),
     modelChange: onModelChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     ChromeSlot,
     {
       fragment: buildComposerFragment({
@@ -2801,7 +2967,7 @@ function Composer({
       }),
       components: COMPOSER_INTERNAL_COMPONENTS,
       fallback,
-      wrap: (children) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComposerBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      wrap: (children) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComposerBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
           className: `pactor-chat-composer pactor-chat-composer--dsl${dragOver ? " pactor-chat-composer--dragover" : ""}`,
@@ -2889,7 +3055,7 @@ function buildEmptyStateFragment(props) {
 }
 
 // src/view/EmptyState.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("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;
@@ -2903,10 +3069,10 @@ function EmptyStateFallback({
   onSuggestionClick,
   greeting
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pactor-chat-empty__greeting", children: greeting }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pactor-chat-empty__subtitle", children: subtitle }),
-    suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pactor-chat-empty__suggestions", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-empty__greeting", children: greeting }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-empty__subtitle", children: subtitle }),
+    suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-empty__suggestions", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
         type: "button",
@@ -2924,11 +3090,11 @@ function EmptyState({
   suggestions,
   onSuggestionClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pactor-chat-empty", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-empty", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     ChromeSlot,
     {
       fragment: buildEmptyStateFragment({ greeting, subtitle, suggestions }),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         EmptyStateFallback,
         {
           greeting,
@@ -2942,16 +3108,16 @@ function EmptyState({
 }
 
 // src/view/MessageBubble.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/view/ActivityTrace.tsx
-var import_components8 = require("@pactor-app/ui/components");
+var import_components9 = require("@pactor-app/ui/components");
 var import_markdown3 = require("@pactor-app/markdown");
-var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function usePinnedCollapse(autoOpen) {
-  const [state, setState] = (0, import_react12.useState)("auto");
-  const autoCollapsedRef = (0, import_react12.useRef)(false);
+  const [state, setState] = (0, import_react14.useState)("auto");
+  const autoCollapsedRef = (0, import_react14.useRef)(false);
   if (state === "auto" && !autoOpen) {
     autoCollapsedRef.current = true;
   }
@@ -2980,8 +3146,8 @@ function statusText(message, mode, toolCount) {
 }
 function useElapsedSeconds(startedAt, active) {
   const compute = () => Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
-  const [elapsed, setElapsed] = (0, import_react12.useState)(compute);
-  (0, import_react12.useEffect)(() => {
+  const [elapsed, setElapsed] = (0, import_react14.useState)(compute);
+  (0, import_react14.useEffect)(() => {
     if (!active) {
       setElapsed(compute());
       return;
@@ -2995,15 +3161,15 @@ function useElapsedSeconds(startedAt, active) {
 }
 function TraceStatusIcon({ status }) {
   if (status === "running") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "loading", size: 13, className: "pactor-chat-spin" });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "loading", size: 13, className: "pactor-chat-spin" });
   }
   if (status === "success") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "check-circle", size: 13 });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "check-circle", size: 13 });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "x-circle", size: 13 });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "x-circle", size: 13 });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "clock", size: 13 });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "clock", size: 13 });
 }
 function summarizeArgs(args) {
   if (args === void 0) {
@@ -3032,16 +3198,16 @@ function formatDetail(value) {
   }
 }
 function TraceRow({ entry }) {
-  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [open, setOpen] = (0, import_react14.useState)(false);
   const summary = summarizeArgs(entry.args);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: "pactor-chat-trace__entry",
       "data-status": entry.status,
       "data-open": open,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "button",
           {
             type: "button",
@@ -3049,16 +3215,16 @@ function TraceRow({ entry }) {
             "aria-expanded": open,
             onClick: () => setOpen((value) => !value),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "chevron-right", size: 12 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-trace__entry-icon", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TraceStatusIcon, { status: entry.status }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-trace__entry-title", children: entry.title ?? entry.name }),
-              summary && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-trace__entry-args", children: summary })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "chevron-right", size: 12 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-trace__entry-icon", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TraceStatusIcon, { status: entry.status }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-trace__entry-title", children: entry.title ?? entry.name }),
+              summary && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-trace__entry-args", children: summary })
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pactor-chat-trace__entry-body", children: [
-          entry.args !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { className: "pactor-chat-trace__entry-detail", children: formatDetail(entry.args) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { className: "pactor-chat-trace__entry-detail", children: entry.status === "failed" ? entry.error ?? "\u6267\u884C\u5931\u8D25" : formatDetail(entry.result) })
+        open && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pactor-chat-trace__entry-body", children: [
+          entry.args !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { className: "pactor-chat-trace__entry-detail", children: formatDetail(entry.args) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { className: "pactor-chat-trace__entry-detail", children: entry.status === "failed" ? entry.error ?? "\u6267\u884C\u5931\u8D25" : formatDetail(entry.result) })
         ] })
       ]
     }
@@ -3071,14 +3237,14 @@ function ThinkingCard({
   const partStreaming = part.status === "streaming";
   const shown = useThrottledValue(part.content, 120, partStreaming);
   const { open, toggle } = usePinnedCollapse(partStreaming && !answerPhase);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: "pactor-chat-thinking",
       "data-open": open,
       "data-streaming": partStreaming,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "button",
           {
             type: "button",
@@ -3086,13 +3252,13 @@ function ThinkingCard({
             "aria-expanded": open,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "chevron-right", size: 12 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-thinking__icon", children: partStreaming ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "brain", size: 13 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "\u601D\u8003\u8FC7\u7A0B" })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "chevron-right", size: 12 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-thinking__icon", children: partStreaming ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "brain", size: 13 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "\u601D\u8003\u8FC7\u7A0B" })
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-thinking__body", children: partStreaming ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-thinking__text", children: shown }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_markdown3.MarkdownRenderer, { content: part.content }) })
+        open && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-thinking__body", children: partStreaming ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-thinking__text", children: shown }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_markdown3.MarkdownRenderer, { content: part.content }) })
       ]
     }
   );
@@ -3107,7 +3273,7 @@ function ActivityTrace({ message }) {
   const answerPhase = mode === "responding" || !streaming;
   const { open, toggle } = usePinnedCollapse(!answerPhase);
   const collapsible = entries.length > 0 || thinkingParts.length > 0;
-  const mountTimeRef = (0, import_react12.useRef)(0);
+  const mountTimeRef = (0, import_react14.useRef)(0);
   if (mountTimeRef.current === 0) {
     mountTimeRef.current = Date.now();
   }
@@ -3115,23 +3281,23 @@ function ActivityTrace({ message }) {
     message.createdAt ?? mountTimeRef.current,
     streaming
   );
-  const header = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-trace__status-icon", children: streaming ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "check-circle", size: 13 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-trace__status-icon", children: streaming ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "check-circle", size: 13 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "span",
       {
         className: `pactor-chat-trace__status-text${streaming ? " pactor-chat-trace__status-text--breathing" : ""}`,
         children: statusText(message, mode, entries.length)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "pactor-chat-trace__elapsed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "pactor-chat-trace__elapsed", children: [
       elapsed,
       "s"
     ] }),
-    collapsible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "chevron-right", size: 12 }) })
+    collapsible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "chevron-right", size: 12 }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pactor-chat-trace", "data-open": open, children: [
-    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pactor-chat-trace", "data-open": open, children: [
+    collapsible ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
@@ -3140,10 +3306,10 @@ function ActivityTrace({ message }) {
         onClick: toggle,
         children: header
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-trace__header", children: header }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      entries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-trace__entries", children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TraceRow, { entry }, entry.callIndex)) }),
-      thinkingParts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-trace__header", children: header }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      entries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-trace__entries", children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TraceRow, { entry }, entry.callIndex)) }),
+      thinkingParts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         ThinkingCard,
         {
           part,
@@ -3156,8 +3322,8 @@ function ActivityTrace({ message }) {
 }
 
 // src/view/MessageActions.tsx
-var import_components9 = require("@pactor-app/ui/components");
-var import_react13 = require("react");
+var import_components10 = require("@pactor-app/ui/components");
+var import_react15 = require("react");
 
 // src/view/chrome/message-actions.tsx
 function buildMessageActionsFragment(args) {
@@ -3210,7 +3376,7 @@ function buildMessageActionsFragment(args) {
 }
 
 // src/view/MessageActions.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var BUILTIN_ACTION_DEFAULTS = {
   copy: {
     label: "\u590D\u5236",
@@ -3283,13 +3449,13 @@ function MessageActions({
   callService,
   onMessageAction
 }) {
-  const [copied, setCopied] = (0, import_react13.useState)(false);
-  const dispatchRef = (0, import_react13.useRef)(
+  const [copied, setCopied] = (0, import_react15.useState)(false);
+  const dispatchRef = (0, import_react15.useRef)(
     () => {
     }
   );
-  const visibleActionsRef = (0, import_react13.useRef)([]);
-  (0, import_react13.useEffect)(() => {
+  const visibleActionsRef = (0, import_react15.useRef)([]);
+  (0, import_react15.useEffect)(() => {
     setMessageActionDispatcher(message.id, (actionId) => {
       const action = visibleActionsRef.current.find((a) => a.id === actionId);
       if (action) {
@@ -3363,7 +3529,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__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "button",
       {
         type: "button",
@@ -3372,16 +3538,16 @@ function MessageActions({
         "aria-label": label,
         "data-message-action": action.id,
         onClick: () => dispatch(action),
-        children: iconName !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: iconName, size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.Icon, { name: "help-circle", size: 14 })
+        children: iconName !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_components10.Icon, { name: iconName, size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_components10.Icon, { name: "help-circle", size: 14 })
       },
       action.id
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: `pactor-chat-message__actions${forceVisible ? " pactor-chat-message__actions--visible" : ""}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         ChromeSlot,
         {
           fragment: buildMessageActionsFragment({
@@ -3397,13 +3563,38 @@ function MessageActions({
 }
 
 // src/view/MessageBubble.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("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] = (0, import_react14.useState)(initialText);
+  const [text, setText] = (0, import_react16.useState)(initialText);
   const confirm = () => {
     const value = text.trim();
     if (!value) {
@@ -3411,8 +3602,8 @@ function MessageEditForm({
     }
     onConfirm(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "pactor-chat-message__edit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pactor-chat-message__edit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "textarea",
       {
         className: "pactor-chat-message__edit-input",
@@ -3430,8 +3621,8 @@ function MessageEditForm({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "pactor-chat-message__edit-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pactor-chat-message__edit-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -3441,7 +3632,7 @@ function MessageEditForm({
           children: "\u53D1\u9001"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           type: "button",
@@ -3464,10 +3655,9 @@ function MessageBubble({
   onEditResend,
   messageActions,
   callService,
-  onMessageAction,
-  onOpenArtifact
+  onMessageAction
 }) {
-  const [editing, setEditing] = (0, import_react14.useState)(false);
+  const [editing, setEditing] = (0, import_react16.useState)(false);
   const bubbleScope = {
     conversation: scope?.conversation ?? {},
     message: { id: message.id },
@@ -3475,21 +3665,22 @@ function MessageBubble({
   };
   const streaming = message.status === "streaming";
   const live = message.status === "pending" || message.status === "streaming";
-  const wasLiveRef = (0, import_react14.useRef)(live);
+  const wasLiveRef = (0, import_react16.useRef)(live);
   if (live) {
     wasLiveRef.current = true;
   }
   const showTrace = message.role === "assistant" && (wasLiveRef.current || message.parts.some(
     (part) => part.type === "thinking" || part.type === "tool-call" || part.type === "tool-result"
   ));
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const showTime = message.role === "assistant" && !live && message.createdAt !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: `pactor-chat-message pactor-chat-message--${message.role}`,
       "data-message-id": message.id,
       "data-message-status": message.status,
       children: [
-        editing ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        editing ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           MessageEditForm,
           {
             initialText: collectMessageText(message),
@@ -3499,21 +3690,53 @@ function MessageBubble({
             },
             onCancel: () => setEditing(false)
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "pactor-chat-message__body", children: [
-          showTrace && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActivityTrace, { message }),
-          message.parts.length === 0 && message.status === "pending" && message.role !== "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pactor-chat-message__pending", children: "\u2026" }) : message.parts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            PartRenderer,
-            {
-              part,
-              runtime,
-              scope: bubbleScope,
-              streaming,
-              onOpenArtifact
-            },
-            part.id ?? index
-          ))
+        ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pactor-chat-message__body", children: [
+          showTrace && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActivityTrace, { message }),
+          message.parts.length === 0 && message.status === "pending" && message.role !== "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pactor-chat-message__pending", children: "\u2026" }) : groupArtifactParts(message.parts).map(
+            (segment, index) => Array.isArray(segment) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              ChromeSlot,
+              {
+                fragment: buildArtifactCardGroupFragment(segment),
+                components: ARTIFACT_CARD_INTERNAL_COMPONENTS,
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatArtifactCardGroup, { artifacts: segment })
+              },
+              `artifacts:${segment[0].id}`
+            ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              PartRenderer,
+              {
+                part: segment,
+                runtime,
+                scope: bubbleScope,
+                streaming
+              },
+              segment.id ?? index
+            )
+          )
         ] }),
-        !editing && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        !editing && (showTime ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pactor-chat-message__footer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            MessageActions,
+            {
+              message,
+              actions: messageActions,
+              showRegenerate,
+              onRegenerate,
+              onRetry,
+              onEdit: onEditResend ? () => setEditing(true) : void 0,
+              forceVisible: message.status === "error",
+              callService,
+              onMessageAction
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "span",
+            {
+              className: "pactor-chat-message__time",
+              title: new Date(message.createdAt).toLocaleString(),
+              children: formatMessageTime(message.createdAt)
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           MessageActions,
           {
             message,
@@ -3526,14 +3749,14 @@ function MessageBubble({
             callService,
             onMessageAction
           }
-        )
+        ))
       ]
     }
   );
 }
 
 // src/view/ChatView.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function lastContentLength(messages) {
   const last = messages[messages.length - 1];
   if (!last) {
@@ -3561,6 +3784,7 @@ function ChatView({
   className,
   onArtifact,
   onOpenArtifact,
+  onOpenArtifactList,
   attachments,
   onAttachmentsChange,
   onAttachFiles,
@@ -3582,14 +3806,14 @@ function ChatView({
   onMessageAction,
   composerBottom
 }) {
-  const messages = (0, import_react15.useSyncExternalStore)(
+  const messages = (0, import_react17.useSyncExternalStore)(
     (listener) => store.subscribe(listener),
     () => store.getMessages()
   );
   const isStreaming = messages.some(
     (message) => message.status === "pending" || message.status === "streaming"
   );
-  const runtime = (0, import_react15.useMemo)(() => {
+  const runtime = (0, import_react17.useMemo)(() => {
     if (!safeRegistry) {
       return void 0;
     }
@@ -3606,12 +3830,12 @@ function ChatView({
       user
     });
   }, [safeRegistry, capabilities, permission, confirm, user]);
-  const scope = (0, import_react15.useMemo)(
+  const scope = (0, import_react17.useMemo)(
     () => ({ conversation: { id: conversationId }, params }),
     [conversationId, params]
   );
-  const notifiedArtifactsRef = (0, import_react15.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react15.useEffect)(() => {
+  const notifiedArtifactsRef = (0, import_react17.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react17.useEffect)(() => {
     if (!onArtifact) {
       return;
     }
@@ -3630,7 +3854,7 @@ function ChatView({
       });
     }
   }, [messages, onArtifact]);
-  const abortRef = (0, import_react15.useRef)(null);
+  const abortRef = (0, import_react17.useRef)(null);
   const { containerRef, isFollowing, scrollToBottom } = useChatAutoScroll({
     messageCount: messages.length,
     lastContentLength: lastContentLength(messages),
@@ -3641,7 +3865,7 @@ function ChatView({
     model,
     onModelChange
   });
-  const [contextChips, setContextChips] = (0, import_react15.useState)([]);
+  const [contextChips, setContextChips] = (0, import_react17.useState)([]);
   const handleContextChipsChange = (chips) => {
     setContextChips(chips);
     onContextsChange?.(chips);
@@ -3673,14 +3897,17 @@ function ChatView({
     abortRef.current?.abort();
     abortRef.current = null;
   };
-  const handleSendRef = (0, import_react15.useRef)(handleSend);
+  const handleSendRef = (0, import_react17.useRef)(handleSend);
   handleSendRef.current = handleSend;
-  const onOpenArtifactRef = (0, import_react15.useRef)(onOpenArtifact);
+  const onOpenArtifactRef = (0, import_react17.useRef)(onOpenArtifact);
   onOpenArtifactRef.current = onOpenArtifact;
-  (0, import_react15.useEffect)(() => {
+  const onOpenArtifactListRef = (0, import_react17.useRef)(onOpenArtifactList);
+  onOpenArtifactListRef.current = onOpenArtifactList;
+  (0, import_react17.useEffect)(() => {
     setChatChromeHandlers({
       sendSuggestion: (text) => handleSendRef.current(text),
-      openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact)
+      openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact),
+      openArtifactList: () => onOpenArtifactListRef.current?.()
     });
   }, []);
   const handleRegenerate = () => {
@@ -3700,7 +3927,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__ */ (0, import_jsx_runtime15.jsx)(
+  const composerNode = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Composer,
     {
       onSend: handleSend,
@@ -3725,18 +3952,18 @@ function ChatView({
       callService
     }
   );
-  const composerDock = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pactor-chat-view__composer-dock", children: [
+  const composerDock = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pactor-chat-view__composer-dock", children: [
     composerNode,
-    composerBottom !== void 0 && composerBottom !== null ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "pactor-chat-view__composer-bottom", children: composerBottom }) : null
+    composerBottom !== void 0 && composerBottom !== null ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pactor-chat-view__composer-bottom", children: composerBottom }) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: `pactor-chat-view${isEmpty ? " pactor-chat-view--empty" : ""}${className ? ` ${className}` : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pactor-chat-messages", ref: containerRef, children: [
-          isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pactor-chat-view__empty-stack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pactor-chat-messages", ref: containerRef, children: [
+          isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pactor-chat-view__empty-stack", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               EmptyState,
               {
                 greeting,
@@ -3746,7 +3973,7 @@ function ChatView({
               }
             ),
             composerDock
-          ] }) : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ] }) : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             MessageBubble,
             {
               message,
@@ -3758,19 +3985,18 @@ function ChatView({
               onEditResend: (text) => handleEditResend(message.id, text),
               messageActions,
               callService,
-              onMessageAction,
-              onOpenArtifact
+              onMessageAction
             },
             message.id
           )),
-          !isFollowing && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          !isFollowing && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "button",
             {
               type: "button",
               className: "pactor-chat-scroll-bottom",
               onClick: scrollToBottom,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components10.Icon, { name: "arrow-down", size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Icon, { name: "arrow-down", size: 13 }),
                 "\u56DE\u5230\u5E95\u90E8"
               ]
             }
@@ -3783,8 +4009,8 @@ function ChatView({
 }
 
 // src/view/WorkspaceHeader.tsx
-var import_components11 = require("@pactor-app/ui/components");
-var import_react16 = require("react");
+var import_components12 = require("@pactor-app/ui/components");
+var import_react18 = require("react");
 
 // src/export-markdown.ts
 var ROLE_LABELS = {
@@ -3861,7 +4087,7 @@ function buildHeaderActionsFragment(props) {
 }
 
 // src/view/WorkspaceHeader.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function readCurrentTheme() {
   if (typeof document === "undefined") {
     return "light";
@@ -3881,10 +4107,10 @@ function WorkspaceHeader({
   onTitleChange
 }) {
   const hasActions = headerActions !== void 0 && headerActions.length > 0;
-  const [overrideTitle, setOverrideTitle] = (0, import_react16.useState)(null);
-  const [editing, setEditing] = (0, import_react16.useState)(false);
-  const [draft, setDraft] = (0, import_react16.useState)("");
-  const prevTitleRef = (0, import_react16.useRef)(title);
+  const [overrideTitle, setOverrideTitle] = (0, import_react18.useState)(null);
+  const [editing, setEditing] = (0, import_react18.useState)(false);
+  const [draft, setDraft] = (0, import_react18.useState)("");
+  const prevTitleRef = (0, import_react18.useRef)(title);
   if (prevTitleRef.current !== title) {
     prevTitleRef.current = title;
     if (overrideTitle !== null) {
@@ -3892,7 +4118,7 @@ function WorkspaceHeader({
     }
   }
   const displayTitle = overrideTitle ?? title;
-  const [theme, setTheme] = (0, import_react16.useState)(readCurrentTheme);
+  const [theme, setTheme] = (0, import_react18.useState)(readCurrentTheme);
   const commitTitle = () => {
     setEditing(false);
     const next = draft.trim();
@@ -3919,9 +4145,9 @@ function WorkspaceHeader({
     store.clear();
     onClear?.();
   };
-  const handlersRef = (0, import_react16.useRef)({ handleExport, handleTheme, handleClear });
+  const handlersRef = (0, import_react18.useRef)({ handleExport, handleTheme, handleClear });
   handlersRef.current = { handleExport, handleTheme, handleClear };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setChatChromeHandlers({
       headerAction: (name) => {
         const handlers2 = handlersRef.current;
@@ -3936,7 +4162,7 @@ function WorkspaceHeader({
     });
   }, []);
   const actionButtons = {
-    export: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    export: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3944,11 +4170,11 @@ function WorkspaceHeader({
         title: "\u5BFC\u51FA Markdown",
         "aria-label": "\u5BFC\u51FA Markdown",
         onClick: handleExport,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Icon, { name: "download", size: 15 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components12.Icon, { name: "download", size: 15 })
       },
       "export"
     ),
-    theme: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    theme: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3956,11 +4182,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__ */ (0, import_jsx_runtime16.jsx)(import_components11.Icon, { name: "sun", size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Icon, { name: "moon", size: 15 })
+        children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components12.Icon, { name: "sun", size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components12.Icon, { name: "moon", size: 15 })
       },
       "theme"
     ),
-    clear: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    clear: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "button",
       {
         type: "button",
@@ -3968,12 +4194,12 @@ function WorkspaceHeader({
         title: "\u6E05\u7A7A\u4F1A\u8BDD",
         "aria-label": "\u6E05\u7A7A\u4F1A\u8BDD",
         onClick: handleClear,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Icon, { name: "trash", size: 15 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components12.Icon, { name: "trash", size: 15 })
       },
       "clear"
     )
   };
-  const titleNode = editableTitle ? editing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const titleNode = editableTitle ? editing ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "input",
     {
       className: "pactor-chat-workspace__title-input",
@@ -3990,7 +4216,7 @@ function WorkspaceHeader({
         }
       }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       type: "button",
@@ -4002,17 +4228,17 @@ function WorkspaceHeader({
       },
       children: displayTitle
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pactor-chat-workspace__title", children: title });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: "pactor-chat-workspace__header", children: [
+  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pactor-chat-workspace__title", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("header", { className: "pactor-chat-workspace__header", children: [
     headerStart !== void 0 ? (
       // header 位模型 chip（决策 D2）：与 title 组成左端组，chip 在前
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pactor-chat-workspace__header-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "pactor-chat-workspace__header-left", children: [
         headerStart,
         titleNode
       ] })
     ) : titleNode,
-    hasActions ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pactor-chat-workspace__header-right", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pactor-chat-workspace__header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    hasActions ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "pactor-chat-workspace__header-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pactor-chat-workspace__header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ChromeSlot,
         {
           fragment: buildHeaderActionsFragment({
@@ -4022,18 +4248,18 @@ function WorkspaceHeader({
           fallback: headerActions.map((action) => actionButtons[action])
         }
       ) }),
-      headerExtra !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
-    ] }) : headerExtra !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
+      headerExtra !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
+    ] }) : headerExtra !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
   ] });
 }
 
 // src/chat-composition.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function DslNodeSlotInner({ node }) {
   const { renderChildren } = (0, import_runtime5.useRenderer)();
   return renderChildren([node]);
 }
-var DslSlotGuard = class extends import_react17.Component {
+var DslSlotGuard = class extends import_react19.Component {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -4051,17 +4277,17 @@ var DslSlotGuard = class extends import_react17.Component {
   }
 };
 function DslNodeSlot({ node }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslSlotGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslNodeSlotInner, { node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DslSlotGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DslNodeSlotInner, { node }) });
 }
 function isDslNodeValue(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && !(0, import_react17.isValidElement)(value) && typeof value.type === "string";
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !(0, import_react19.isValidElement)(value) && typeof value.type === "string";
 }
 function resolveSlot(slot) {
   if (slot === void 0 || slot === null) {
     return void 0;
   }
   if (isDslNodeValue(slot)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslNodeSlot, { node: slot });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DslNodeSlot, { node: slot });
   }
   return slot;
 }
@@ -4105,33 +4331,34 @@ function ChatComposition({
   onPanelClose,
   inspector,
   onArtifact,
-  onOpenArtifact
+  onOpenArtifact,
+  onOpenArtifactList
 }) {
-  const storeRef = (0, import_react17.useRef)(null);
+  const storeRef = (0, import_react19.useRef)(null);
   if (storeRef.current === null) {
     storeRef.current = services.store ?? services.storeFactory?.() ?? new ConversationStore();
   }
   const store = storeRef.current;
-  const artifactStoreRef = (0, import_react17.useRef)(null);
+  const artifactStoreRef = (0, import_react19.useRef)(null);
   if (artifactStoreRef.current === null) {
     artifactStoreRef.current = services.artifactStore ?? new ArtifactStore();
   }
   const artifactStore = artifactStoreRef.current;
   const panelControlled = panelOpen !== void 0 || artifact !== void 0;
-  const storeArtifact = (0, import_react17.useSyncExternalStore)(
+  const storeArtifact = (0, import_react19.useSyncExternalStore)(
     (listener) => artifactStore.subscribe(listener),
     () => artifactStore.get()
   );
-  const storeArtifacts = (0, import_react17.useSyncExternalStore)(
+  const storeArtifacts = (0, import_react19.useSyncExternalStore)(
     (listener) => artifactStore.subscribe(listener),
     () => artifactStore.list()
   );
-  const messages = (0, import_react17.useSyncExternalStore)(
+  const messages = (0, import_react19.useSyncExternalStore)(
     (listener) => store.subscribe(listener),
     () => store.getMessages()
   );
-  const streamArtifacts = (0, import_react17.useMemo)(() => collectArtifacts(messages), [messages]);
-  const mergedArtifacts = (0, import_react17.useMemo)(
+  const streamArtifacts = (0, import_react19.useMemo)(() => collectArtifacts(messages), [messages]);
+  const mergedArtifacts = (0, import_react19.useMemo)(
     () => mergeArtifacts(streamArtifacts, storeArtifacts),
     [streamArtifacts, storeArtifacts]
   );
@@ -4156,7 +4383,18 @@ function ChatComposition({
       artifactStore.open(next);
     }
   };
-  const [attachments, setAttachments] = (0, import_react17.useState)([]);
+  const [listViewRequest, setListViewRequest] = (0, import_react19.useState)(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] = (0, import_react19.useState)([]);
   const handleAttachFiles = services.onAttachFiles ? (files) => {
     void Promise.resolve(services.onAttachFiles(files)).then(
       (created) => {
@@ -4176,7 +4414,7 @@ function ChatComposition({
     model,
     onModelChange
   });
-  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     ModelSelect,
     {
       models,
@@ -4184,137 +4422,144 @@ function ChatComposition({
       onModelChange: handleModelChange
     }
   ) : void 0;
-  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     services.toolbarEnd,
     toolbarEnd
   ] }) : void 0;
-  const mergedToolbarStart = services.toolbarStart !== void 0 || toolbarStart !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  const mergedToolbarStart = services.toolbarStart !== void 0 || toolbarStart !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     services.toolbarStart,
     toolbarStart
   ] }) : void 0;
-  const mergedComposerFooter = services.composerFooter !== void 0 || composerFooter !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  const mergedComposerFooter = services.composerFooter !== void 0 || composerFooter !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     services.composerFooter,
     composerFooter
   ] }) : void 0;
-  const mergedComposerBottom = services.composerBottom !== void 0 || composerBottom !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  const mergedComposerBottom = services.composerBottom !== void 0 || composerBottom !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { 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__ */ (0, import_jsx_runtime17.jsxs)(
+  const workspaceHeader = renderHeader ? header ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    WorkspaceHeader,
+    {
+      title,
+      headerExtra,
+      headerActions,
+      editableTitle,
+      headerStart: headerModelChip,
+      store,
+      onExport,
+      onThemeChange,
+      onClear,
+      onTitleChange
+    }
+  ) : null;
+  const workspace = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       className: `pactor-chat-workspace${className ? ` ${className}` : ""}`,
-      children: [
-        renderHeader ? header ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          WorkspaceHeader,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        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__ */ (0, import_jsx_runtime18.jsx)(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__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pactor-chat-with-header", children: [
+      workspaceHeader,
+      main
+    ] }) : main;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pactor-chat-inspector-host", children: [
+    workspaceHeader,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pactor-chat-inspector-host__row", children: [
+      main,
+      effectivePanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "div",
           {
-            title,
-            headerExtra,
-            headerActions,
-            editableTitle,
-            headerStart: headerModelChip,
-            store,
-            onExport,
-            onThemeChange,
-            onClear,
-            onTitleChange
+            className: "pactor-chat-inspector__scrim",
+            "aria-hidden": true,
+            onClick: handlePanelClose
           }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          ChatView,
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          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__ */ (0, import_jsx_runtime17.jsx)(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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "pactor-chat-inspector-host", children: [
-    main,
-    effectivePanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "div",
-        {
-          className: "pactor-chat-inspector__scrim",
-          "aria-hidden": true,
-          onClick: handlePanelClose
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        ArtifactPanel,
-        {
-          artifact: effectiveArtifact,
-          artifacts: effectiveArtifacts,
-          activeArtifactId: effectiveArtifact?.id,
-          onSelectArtifact: handleSelectArtifact,
-          inspector,
-          onClose: handlePanelClose,
-          safeRegistry: services.safeRegistry,
-          user: services.user,
-          artifactViewers: services.artifactViewers
-        }
-      )
-    ] }) : null
+      ] }) : null
+    ] })
   ] });
 }
 
 // src/chat-services.tsx
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ChatServicesContext = (0, import_react18.createContext)(null);
+var import_react20 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ChatServicesContext = (0, import_react20.createContext)(null);
 function ChatServicesProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatServicesContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatServicesContext.Provider, { value, children });
 }
 function useChatServices() {
-  return (0, import_react18.useContext)(ChatServicesContext);
+  return (0, import_react20.useContext)(ChatServicesContext);
 }
 
 // src/chat-workspace.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function createChatWorkspace(services) {
   function ChatWorkspace({
     title,
@@ -4335,6 +4580,7 @@ function createChatWorkspace(services) {
     inspector,
     onArtifact,
     onOpenArtifact,
+    onOpenArtifactList,
     onSelectArtifact,
     headerActions,
     editableTitle,
@@ -4352,7 +4598,7 @@ function createChatWorkspace(services) {
     onMessageAction,
     className
   }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatServicesProvider, { value: services, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChatServicesProvider, { value: services, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       ChatComposition,
       {
         services,
@@ -4364,18 +4610,19 @@ function createChatWorkspace(services) {
         params,
         className,
         headerExtra: services.headerExtra,
-        sidebar: sidebar ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: sidebar }) : void 0,
-        toolbarStart: toolbarStart ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: toolbarStart }) : void 0,
-        toolbarEnd: toolbarEnd ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: toolbarEnd }) : void 0,
-        composerFooter: composerFooter ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: composerFooter }) : void 0,
-        composerBottom: composerBottom ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: composerBottom }) : void 0,
+        sidebar: sidebar ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DslNodeSlot, { node: sidebar }) : void 0,
+        toolbarStart: toolbarStart ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DslNodeSlot, { node: toolbarStart }) : void 0,
+        toolbarEnd: toolbarEnd ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DslNodeSlot, { node: toolbarEnd }) : void 0,
+        composerFooter: composerFooter ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DslNodeSlot, { node: composerFooter }) : void 0,
+        composerBottom: composerBottom ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DslNodeSlot, { node: composerBottom }) : void 0,
         hideToolbar,
         artifact,
         panelOpen,
         onPanelClose,
-        inspector: inspector ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: inspector }) : void 0,
+        inspector: inspector ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DslNodeSlot, { node: inspector }) : void 0,
         onArtifact,
         onOpenArtifact,
+        onOpenArtifactList,
         onSelectArtifact,
         headerActions,
         editableTitle,
@@ -4398,8 +4645,8 @@ function createChatWorkspace(services) {
 }
 
 // src/view/Chat.tsx
-var import_components12 = require("@pactor-app/ui/components");
-var import_react19 = require("react");
+var import_components13 = require("@pactor-app/ui/components");
+var import_react21 = require("react");
 
 // src/view/chrome/menu.tsx
 function buildSidebarMenuFragment(props) {
@@ -4428,7 +4675,7 @@ function buildSidebarMenuFragment(props) {
 }
 
 // src/view/ChatShell.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ChatShell({
   menu,
   activeMenuKey,
@@ -4440,7 +4687,7 @@ function ChatShell({
   className,
   onMenuSelect
 }) {
-  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ChatSidebarMenu,
     {
       menu,
@@ -4448,7 +4695,7 @@ function ChatShell({
       onMenuSelect
     }
   ) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     AppShell,
     {
       sidebar: sidebarContent,
@@ -4465,7 +4712,7 @@ function ChatShellDslAdapter({
   onMenuSelect,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ChatShell,
     {
       ...rest,
@@ -4480,20 +4727,20 @@ function registerChatShellComponent(registry) {
 }
 
 // src/view/Chat.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ChatSidebarMenu({
   menu,
   activeMenuKey,
   onMenuSelect
 }) {
   const drawer = useSidebarDrawer();
-  const menuRef = (0, import_react19.useRef)(menu);
+  const menuRef = (0, import_react21.useRef)(menu);
   menuRef.current = menu;
-  const selectRef = (0, import_react19.useRef)(onMenuSelect);
+  const selectRef = (0, import_react21.useRef)(onMenuSelect);
   selectRef.current = onMenuSelect;
-  const drawerRef = (0, import_react19.useRef)(drawer);
+  const drawerRef = (0, import_react21.useRef)(drawer);
   drawerRef.current = drawer;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setChatChromeHandlers({
       menuSelect: (key) => {
         const item = menuRef.current.find((entry) => entry.key === key);
@@ -4507,12 +4754,12 @@ function ChatSidebarMenu({
   }, []);
   const fallback = (() => {
     let lastGroup;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("nav", { className: "pactor-chat-menu", "aria-label": "\u4F1A\u8BDD\u5BFC\u822A", children: menu.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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__ */ (0, import_jsx_runtime21.jsxs)(
+      const button = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "button",
         {
           type: "button",
@@ -4527,20 +4774,20 @@ function ChatSidebarMenu({
             drawer?.close();
           },
           children: [
-            item.icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pactor-chat-menu__icon", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components12.Icon, { name: item.icon, size: 15, strokeWidth: 1.7 }) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pactor-chat-menu__label", children: item.label }),
-            item.dot === true ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pactor-chat-menu__dot", "aria-hidden": true }) : null,
-            item.badge !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "pactor-chat-menu__badge", children: item.badge }) : null
+            item.icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "pactor-chat-menu__icon", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components13.Icon, { name: item.icon, size: 15, strokeWidth: 1.7 }) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "pactor-chat-menu__label", children: item.label }),
+            item.dot === true ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "pactor-chat-menu__dot", "aria-hidden": true }) : null,
+            item.badge !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "pactor-chat-menu__badge", children: item.badge }) : null
           ]
         }
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react19.Fragment, { children: [
-        groupLabel !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
-        collapsed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components12.RailTooltip, { label: item.label, children: button }) : button
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react21.Fragment, { children: [
+        groupLabel !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
+        collapsed ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components13.RailTooltip, { label: item.label, children: button }) : button
       ] }, item.key);
     }) });
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ChromeSlot,
     {
       fragment: buildSidebarMenuFragment({ menu, activeMenuKey }),
@@ -4586,13 +4833,14 @@ function Chat({
   inspector,
   onArtifact,
   onOpenArtifact,
+  onOpenArtifactList,
   onSelectArtifact,
   className,
   onSend,
   onMenuSelect
 }) {
   const services = useChatServices();
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!services) {
       console.warn(
         "[@pactor-app/chat] Chat \u672A\u68C0\u6D4B\u5230 ChatServicesProvider\uFF1A\u8BF7\u5728\u5E94\u7528\u6839\u90E8\u4EE5 <ChatServicesProvider> \u6CE8\u5165 transport \u7B49\u670D\u52A1"
@@ -4600,10 +4848,10 @@ function Chat({
     }
   }, [services]);
   if (!services) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime22.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(
+  const sidebarContent = sidebarSlot ?? (menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ChatSidebarMenu,
     {
       menu,
@@ -4611,7 +4859,7 @@ function Chat({
       onMenuSelect
     }
   ) : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ChatComposition,
     {
       services,
@@ -4652,6 +4900,7 @@ function Chat({
       inspector: resolveSlot(inspector),
       onArtifact,
       onOpenArtifact,
+      onOpenArtifactList,
       onSelectArtifact
     }
   );
@@ -4663,6 +4912,7 @@ function ChatDslAdapter({
   onPanelClose,
   onArtifact,
   onOpenArtifact,
+  onOpenArtifactList,
   onSelectArtifact,
   onModelChange,
   onContextsChange,
@@ -4673,7 +4923,7 @@ function ChatDslAdapter({
   onTitleChange,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Chat,
     {
       ...rest,
@@ -4682,6 +4932,7 @@ 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,
@@ -4700,17 +4951,17 @@ function registerChatComponent(registry) {
   registerChatShellComponent(registry);
 }
 function createChatComponentRegistry() {
-  const registry = (0, import_components12.createComponentRegistry)();
+  const registry = (0, import_components13.createComponentRegistry)();
   registerChatComponent(registry);
   return registry;
 }
 
 // src/view/ChatLayout.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ChatLayout({ title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "pactor-chat-layout", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("header", { className: "pactor-chat-layout__header", children: title ?? "Chat" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("main", { className: "pactor-chat-layout__main", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "pactor-chat-layout", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("header", { className: "pactor-chat-layout__header", children: title ?? "Chat" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("main", { className: "pactor-chat-layout__main", children })
   ] });
 }
 var CHAT_LAYOUT_TYPE = "chat";
@@ -4731,6 +4982,7 @@ function registerChatLayout(layoutRegistry) {
   CHAT_LAYOUT_TYPE,
   CHAT_SHELL_COMPONENT_TYPE,
   Chat,
+  ChatArtifactCard,
   ChatDenied,
   ChatLayout,
   ChatServicesProvider,
@@ -4745,6 +4997,7 @@ function registerChatLayout(layoutRegistry) {
   MessageBubble,
   PartRenderer,
   applyChatEvent,
+  artifactCardMeta,
   buildArtifactBlob,
   buildArtifactTree,
   buildChatScope,
@@ -4758,6 +5011,8 @@ function registerChatLayout(layoutRegistry) {
   createSafeRegistry,
   detectStreamingMode,
   downloadArtifact,
+  formatArtifactSize,
+  formatMessageTime,
   guardChatDsl,
   isImageArtifact,
   mergeArtifacts,
@@ -4768,6 +5023,8 @@ function registerChatLayout(layoutRegistry) {
   registerChatShellComponent,
   resolveArtifactFileType,
   resolveArtifactFilename,
+  resolveArtifactIcon,
+  resolveArtifactIconName,
   runChatTurn,
   runRegenerateTurn,
   saveBlob,