@pactor-app/chat 0.1.0 → 1.1.0

package/dist/index.cjs

@@ -39,8 +39,6 @@ __export(index_exports, {
   ConversationStore: () => ConversationStore,
   DEFAULT_CHAT_GREETING: () => DEFAULT_CHAT_GREETING,
   EmptyState: () => EmptyState,
-  MENU_ICONS: () => MENU_ICONS,
-  MESSAGE_ACTION_ICONS: () => MESSAGE_ACTION_ICONS,
   MessageActions: () => MessageActions,
   MessageBubble: () => MessageBubble,
   PartRenderer: () => PartRenderer,
@@ -719,20 +717,34 @@ function createChatRuntime(options = {}) {
 }
 
 // src/dsl-guard.ts
+var import_core2 = require("@pactor-app/core");
 var CHAT_DENIED_TYPE = "ChatDenied";
 function guardChatDsl(node, registry) {
-  if (node.type !== CHAT_DENIED_TYPE && !registry.has(node.type)) {
+  const type = node.type ?? "(reference)";
+  if (type !== CHAT_DENIED_TYPE && !registry.has(type)) {
+    return {
+      type: CHAT_DENIED_TYPE,
+      props: { deniedType: type }
+    };
+  }
+  if (node.children === void 0) {
+    return node;
+  }
+  if (!Array.isArray(node.children)) {
     return {
       type: CHAT_DENIED_TYPE,
-      props: { deniedType: node.type }
+      props: { deniedType: `${type}(remote)` }
     };
   }
-  if (!node.children || node.children.length === 0) {
+  if (node.children.length === 0) {
     return node;
   }
   return {
     ...node,
-    children: node.children.map((child) => guardChatDsl(child, registry))
+    // 数组中混排的引用元素同样无法静态过白名单：替换为受控占位
+    children: node.children.map(
+      (child) => (0, import_core2.isDslSourceRef)(child) ? { type: CHAT_DENIED_TYPE, props: { deniedType: "(remote)" } } : guardChatDsl(child, registry)
+    )
   };
 }
 
@@ -844,8 +856,8 @@ function useChatAutoScroll({
 }
 
 // src/chat-composition.tsx
-var import_runtime4 = require("@pactor-app/runtime");
-var import_react15 = require("react");
+var import_runtime5 = require("@pactor-app/runtime");
+var import_react16 = require("react");
 
 // src/hooks/use-chat-model.ts
 var import_react3 = require("react");
@@ -870,121 +882,274 @@ function useChatModel({
 }
 
 // src/view/AppShell.tsx
-var import_lucide_react = require("lucide-react");
-var import_react4 = require("react");
+var import_components = require("@pactor-app/ui/components");
 var import_jsx_runtime = require("react/jsx-runtime");
-var SidebarDrawerContext = (0, import_react4.createContext)(null);
 function useSidebarDrawer() {
-  return (0, import_react4.useContext)(SidebarDrawerContext);
+  return (0, import_components.useSidebarDrawer)();
 }
-var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
-function useIsMobileViewport() {
-  const [isMobile, setIsMobile] = (0, import_react4.useState)(
-    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_MEDIA_QUERY).matches
-  );
-  (0, import_react4.useEffect)(() => {
-    if (typeof window.matchMedia !== "function") {
-      return;
-    }
-    const media = window.matchMedia(MOBILE_MEDIA_QUERY);
-    const onChange = (event) => {
-      setIsMobile(event.matches);
-    };
-    setIsMobile(media.matches);
-    media.addEventListener("change", onChange);
-    return () => media.removeEventListener("change", onChange);
-  }, []);
-  return isMobile;
-}
-function AppShell({ sidebar, brand, locationKey, sidebarFooter, collapsible = false, children, className }) {
-  const [drawerOpen, setDrawerOpen] = (0, import_react4.useState)(false);
-  const isMobile = useIsMobileViewport();
-  const close = (0, import_react4.useCallback)(() => setDrawerOpen(false), []);
-  const [collapsed, setCollapsed] = (0, import_react4.useState)(false);
-  const collapsedEffective = collapsible && collapsed && !isMobile;
-  const framed = brand !== void 0 || sidebarFooter !== void 0;
-  const [trackedLocationKey, setTrackedLocationKey] = (0, import_react4.useState)(locationKey);
-  if (trackedLocationKey !== locationKey) {
-    setTrackedLocationKey(locationKey);
-    setDrawerOpen(false);
-  }
-  (0, import_react4.useEffect)(() => {
-    if (!drawerOpen) {
-      return;
+function AppShell({
+  sidebar,
+  brand,
+  locationKey,
+  sidebarFooter,
+  collapsible = false,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Sidebar,
+    {
+      content: sidebar,
+      brand,
+      locationKey,
+      sidebarFooter,
+      collapsible,
+      className: `pactor-chat-shell h-full min-h-0${className ? ` ${className}` : ""}`,
+      children
     }
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") {
-        setDrawerOpen(false);
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [drawerOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDrawerContext.Provider, { value: { close, collapsed: collapsedEffective }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `pactor-chat-shell${className ? ` ${className}` : ""}`, children: [
-    drawerOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pactor-chat-shell__scrim", "aria-hidden": true, onClick: close }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: `pactor-chat-shell__sidebar${framed ? " pactor-chat-shell__sidebar--framed" : ""}${collapsedEffective ? " pactor-chat-shell__sidebar--collapsed" : ""}`,
-        "data-open": drawerOpen ? "true" : "false",
-        inert: isMobile && !drawerOpen ? true : void 0,
-        children: framed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          brand !== void 0 && // 桌面品牌行（决策 D3）：brand 左、折叠钮右；移动端由
-          // CSS 隐藏（品牌维持顶栏现状）
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pactor-chat-shell__sidebar-header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pactor-chat-shell__brand", children: brand }),
-            collapsible && !isMobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "pactor-chat-icon-button pactor-chat-shell__collapse",
-                "aria-label": collapsedEffective ? "\u5C55\u5F00\u4FA7\u680F" : "\u6298\u53E0\u4FA7\u680F",
-                "aria-expanded": !collapsedEffective,
-                title: collapsedEffective ? "\u5C55\u5F00\u4FA7\u680F" : "\u6298\u53E0\u4FA7\u680F",
-                onClick: () => setCollapsed((value) => !value),
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.PanelLeft, { size: 16, strokeWidth: 1.7 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pactor-chat-shell__sidebar-body", children: sidebar }),
-          sidebarFooter !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pactor-chat-shell__sidebar-footer", children: sidebarFooter })
-        ] }) : sidebar
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: "pactor-chat-shell__main", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pactor-chat-shell__topbar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "pactor-chat-icon-button pactor-chat-shell__menu",
-            "aria-label": "\u6253\u5F00\u5BFC\u822A",
-            "aria-expanded": drawerOpen,
-            onClick: () => setDrawerOpen(true),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Menu, { size: 18, strokeWidth: 1.7 })
-          }
-        ),
-        brand
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pactor-chat-shell__content", children })
-    ] })
-  ] }) });
+  );
 }
 
 // src/view/ArtifactPanel.tsx
-var import_lucide_react3 = require("lucide-react");
-var import_core2 = require("@pactor-app/core");
+var import_components4 = require("@pactor-app/ui/components");
+var import_core3 = require("@pactor-app/core");
 var import_markdown2 = require("@pactor-app/markdown");
-var import_runtime3 = require("@pactor-app/runtime");
+var import_runtime4 = require("@pactor-app/runtime");
 var import_react5 = require("react");
 
 // src/view/PartRenderer.tsx
-var import_lucide_react2 = require("lucide-react");
+var import_components2 = require("@pactor-app/ui/components");
 var import_markdown = require("@pactor-app/markdown");
+var import_runtime3 = require("@pactor-app/runtime");
+
+// 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_react4 = require("react");
+
+// src/view/chrome/actions.ts
+var handlers = {};
+function setChatChromeHandlers(next) {
+  handlers = { ...handlers, ...next };
+}
+var messageActionDispatchers = /* @__PURE__ */ new Map();
+function setMessageActionDispatcher(token, dispatch) {
+  messageActionDispatchers.set(token, dispatch);
+}
+function clearMessageActionDispatcher(token) {
+  messageActionDispatchers.delete(token);
+}
+var CHROME_ACTION_HANDLERS = {
+  "chat.sendSuggestion": (action) => {
+    const text = action.params?.["text"];
+    if (typeof text === "string") {
+      handlers.sendSuggestion?.(text);
+    }
+    return { ok: true };
+  },
+  "chat.openArtifact": (action) => {
+    const artifact = action.params?.["artifact"];
+    if (artifact) {
+      handlers.openArtifact?.(artifact);
+    }
+    return { ok: true };
+  },
+  "chat.messageAction": (action) => {
+    const token = action.params?.["token"];
+    const actionId = action.params?.["actionId"];
+    if (typeof token === "string" && typeof actionId === "string") {
+      messageActionDispatchers.get(token)?.(actionId);
+    }
+    return { ok: true };
+  },
+  "chat.composerSubmit": (action) => {
+    const value = action.params?.["value"];
+    if (typeof value === "string") {
+      handlers.composerSubmit?.(value);
+    }
+    return { ok: true };
+  },
+  "chat.menuSelect": (action) => {
+    const key = action.params?.["key"];
+    if (typeof key === "string") {
+      handlers.menuSelect?.(key);
+    }
+    return { ok: true };
+  },
+  "chat.modelChange": (action) => {
+    const value = action.params?.["value"];
+    if (typeof value === "string") {
+      handlers.modelChange?.(value);
+    }
+    return { ok: true };
+  },
+  "chat.headerAction": (action) => {
+    const name = action.params?.["action"];
+    if (typeof name === "string") {
+      handlers.headerAction?.(name);
+    }
+    return { ok: true };
+  },
+  "chat.panelClose": () => {
+    handlers.panelClose?.();
+    return { ok: true };
+  }
+};
+function ensureChatChromeActions(actions) {
+  for (const [name, handler] of Object.entries(CHROME_ACTION_HANDLERS)) {
+    if (!actions.has(name)) {
+      actions.register(name, handler);
+    }
+  }
+}
+function invokeChatPanelClose() {
+  handlers.panelClose?.();
+}
+
+// src/view/chrome/ChromeSlot.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var warnedMissing = /* @__PURE__ */ new Set();
+function warnMissingOnce(key, detail) {
+  if (!warnedMissing.has(key)) {
+    warnedMissing.add(key);
+    console.warn(`[@pactor-app/chat] ${detail}`);
+  }
+}
+function ChromeSlotInner({
+  fragment,
+  fallback,
+  components,
+  wrap
+}) {
+  let renderer;
+  try {
+    renderer = (0, import_runtime2.useRenderer)();
+  } catch {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
+  }
+  ensureChatChromeActions(renderer.context.actions);
+  if (components) {
+    for (const [name, component] of Object.entries(components)) {
+      const existing = renderer.context.components.get(name);
+      if (existing !== void 0 && existing !== component) {
+        warnMissingOnce(
+          `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 });
+      }
+      if (existing === void 0) {
+        renderer.context.components.register(
+          name,
+          component
+        );
+      }
+    }
+  }
+  const missing = fragment.requires.filter(
+    (type) => !renderer.context.components.has(type)
+  );
+  if (missing.length > 0) {
+    warnMissingOnce(
+      `${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 });
+  }
+  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;
+}
+var ChromeSlotGuard = class extends import_react4.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function ChromeSlot(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChromeSlotGuard, { fallback: props.fallback, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChromeSlotInner, { ...props }) });
+}
+
+// src/view/chrome/feedback.tsx
+function buildErrorFragment(message) {
+  return {
+    requires: ["Alert"],
+    node: {
+      type: "Alert",
+      props: { variant: "error", message }
+    }
+  };
+}
+function buildStatusFragment(text) {
+  return {
+    requires: ["Text"],
+    node: {
+      type: "Text",
+      props: { type: "secondary", text }
+    }
+  };
+}
+
+// src/view/PartRenderer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function ChatDenied({ deniedType }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pactor-chat-denied", "data-pactor-chat-denied": deniedType, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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}` : ""
   ] });
@@ -993,64 +1158,90 @@ function ChatDslNode({
   node,
   scope
 }) {
-  const renderer = (0, import_runtime2.useRenderer)();
+  const renderer = (0, import_runtime3.useRenderer)();
   const extraScope = scope ? buildChatScope(scope) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderer.renderChildren([node], extraScope) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderer.renderChildren([node], extraScope) });
 }
 function SmoothText({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pactor-chat-text", children: shown });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pactor-chat-text", children: shown });
 }
 function SmoothMarkdown({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_markdown.MarkdownRenderer, { content: shown });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_markdown.MarkdownRenderer, { content: shown });
 }
 function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact }) {
   switch (part.type) {
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SmoothText, { content: part.content, streaming });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SmoothText, { content: part.content, streaming });
     case "markdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SmoothMarkdown, { content: part.content, streaming });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime2.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" });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.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" })
+          }
+        );
       }
       const guarded = guardChatDsl(part.schema, runtime.context.components);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pactor-chat-dsl", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_runtime2.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatDslNode, { node: guarded, scope }) }) });
+      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 }) }) });
     }
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "pactor-chat-error", role: "alert", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.CircleAlert, { size: 14 }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: part.message })
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.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 })
+          ] })
+        }
+      );
     case "status":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pactor-chat-status", children: part.text });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ChromeSlot,
+        {
+          fragment: buildStatusFragment(part.text),
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pactor-chat-status", children: part.text })
+        }
+      );
     case "artifact":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "div",
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        ChromeSlot,
         {
-          className: "pactor-chat-artifact-card",
-          "data-artifact-kind": part.artifact.kind,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "pactor-chat-artifact-card__title", children: part.artifact.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "pactor-chat-artifact-card__kind", children: part.artifact.kind }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              "button",
-              {
-                type: "button",
-                className: "pactor-chat-artifact-card__open",
-                onClick: () => onOpenArtifact?.(part.artifact),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.PanelRightOpen, { size: 13, strokeWidth: 1.7 }),
-                  "\u5728\u9762\u677F\u4E2D\u6253\u5F00"
-                ]
-              }
-            )
-          ]
+          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"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
         }
       );
     default:
@@ -1058,14 +1249,71 @@ 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");
+function ChatPanelCloseButton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "pactor-chat-icon-button pactor-chat-inspector__close",
+      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 })
+    }
+  );
+}
+var PANEL_HEADER_INTERNAL_COMPONENTS = { ChatPanelCloseButton };
+function buildPanelHeaderFragment(props) {
+  return {
+    requires: ["Flex", "Text", "Badge", "ChatPanelCloseButton"],
+    node: {
+      type: "Flex",
+      props: {
+        justify: "space-between",
+        align: "center",
+        gap: "small",
+        className: "pactor-chat-inspector__header-dsl"
+      },
+      children: [
+        {
+          type: "Flex",
+          props: { align: "center", gap: "small" },
+          children: [
+            {
+              type: "Text",
+              props: {
+                text: props.title,
+                strong: true,
+                className: "pactor-chat-inspector__title"
+              }
+            },
+            {
+              type: "Badge",
+              props: {
+                text: props.kind,
+                variant: "secondary",
+                className: "pactor-chat-inspector__kind"
+              }
+            }
+          ]
+        },
+        { type: "ChatPanelCloseButton" }
+      ]
+    }
+  };
+}
+
 // src/view/ArtifactPanel.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function useArtifactRuntime(safeRegistry, user) {
   return (0, import_react5.useMemo)(() => {
     if (!safeRegistry) {
       return void 0;
     }
-    const components = new import_core2.Registry("ChatArtifactRegistry");
+    const components = new import_core3.Registry("ChatArtifactRegistry");
     components.register(CHAT_DENIED_TYPE, ChatDenied);
     for (const name of safeRegistry.list()) {
       components.register(name, safeRegistry.get(name));
@@ -1085,12 +1333,12 @@ var ArtifactDslGuard = class extends import_react5.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_runtime3.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_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;
   }
 };
 function ArtifactDslNode({ node }) {
-  const { renderChildren } = (0, import_runtime3.useRenderer)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderChildren([node]) });
+  const { renderChildren } = (0, import_runtime4.useRenderer)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: renderChildren([node]) });
 }
 function ArtifactDslContent({
   content,
@@ -1098,10 +1346,10 @@ 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_runtime3.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_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" });
   }
   const guarded = guardChatDsl(node, runtime.context.components);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_runtime3.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactDslGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactDslNode, { node: guarded }) }) });
+  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 }) }) });
 }
 function ArtifactContent({
   artifact,
@@ -1109,16 +1357,16 @@ function ArtifactContent({
 }) {
   switch (artifact.kind) {
     case "markdown":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_markdown2.MarkdownRenderer, { content: String(artifact.content) });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_markdown2.MarkdownRenderer, { content: String(artifact.content) });
     case "code":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pactor-chat-inspector__code", children: [
-        artifact.language ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pactor-chat-inspector__code-lang", children: artifact.language }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { children: String(artifact.content) }) })
+      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) }) })
       ] });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
     case "dsl":
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactDslContent, { content: artifact.content, runtime });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactDslContent, { content: artifact.content, runtime });
     default:
       return null;
   }
@@ -1132,6 +1380,11 @@ function ArtifactPanel({
   className
 }) {
   const runtime = useArtifactRuntime(safeRegistry, user);
+  const closeRef = (0, import_react5.useRef)(onClose);
+  closeRef.current = onClose;
+  (0, import_react5.useEffect)(() => {
+    setChatChromeHandlers({ panelClose: () => closeRef.current?.() });
+  }, []);
   const panelRef = (0, import_react5.useRef)(null);
   const [width, setWidth] = (0, import_react5.useState)(null);
   const handleResizeStart = (event) => {
@@ -1159,7 +1412,7 @@ function ArtifactPanel({
     document.addEventListener("pointermove", onMove);
     document.addEventListener("pointerup", onUp);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "aside",
     {
       ref: panelRef,
@@ -1167,7 +1420,7 @@ function ArtifactPanel({
       "data-kind": artifact?.kind,
       style: width !== null ? { width: `${width}px` } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: "pactor-chat-inspector__resize",
@@ -1177,38 +1430,48 @@ function ArtifactPanel({
             onPointerDown: handleResizeStart
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "pactor-chat-inspector__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pactor-chat-inspector__title", children: artifact?.title ?? "\u4EA7\u51FA\u7269" }),
-          artifact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(import_lucide_react3.X, { size: 16, strokeWidth: 1.7 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pactor-chat-inspector__body", children: inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactContent, { artifact, runtime }) : null })
+        /* @__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"
+            }),
+            components: PANEL_HEADER_INTERNAL_COMPONENTS,
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+              /* @__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,
+              /* @__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 })
+                }
+              )
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__body", children: inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactContent, { artifact, runtime }) : null })
       ]
     }
   );
 }
 
 // src/view/ChatView.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_core3 = require("@pactor-app/core");
-var import_react13 = require("react");
+var import_components10 = require("@pactor-app/ui/components");
+var import_core4 = require("@pactor-app/core");
+var import_react14 = require("react");
 
 // src/view/Composer.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_react9 = require("react");
+var import_components7 = require("@pactor-app/ui/components");
+var import_react10 = require("react");
 
 // src/view/AnchoredPopover.tsx
 var import_react6 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function AnchoredPopover({
   anchorRect,
   onClose,
@@ -1265,7 +1528,7 @@ function AnchoredPopover({
     position?.below ? "pactor-chat-popover--below" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ref,
@@ -1284,9 +1547,34 @@ function AnchoredPopover({
 }
 
 // src/view/ModelChip.tsx
-var import_lucide_react4 = require("lucide-react");
+var import_components5 = require("@pactor-app/ui/components");
 var import_react7 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/view/chrome/model-select.tsx
+function buildModelSelectFragment(props) {
+  return {
+    requires: ["Select"],
+    node: {
+      type: "Select",
+      props: {
+        options: props.models.map((option) => ({
+          value: option.value,
+          label: option.label
+        })),
+        value: props.model,
+        className: "pactor-chat-model-select"
+      },
+      events: {
+        onChange: [
+          { action: "chat.modelChange", params: { value: "${event}" } }
+        ]
+      }
+    }
+  };
+}
+
+// src/view/ModelChip.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ModelChip({
   models,
   model,
@@ -1295,8 +1583,8 @@ function ModelChip({
   const chipRef = (0, import_react7.useRef)(null);
   const [anchor, setAnchor] = (0, import_react7.useState)(null);
   const currentOption = models.find((option) => option.value === model) ?? models[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
         ref: chipRef,
@@ -1306,18 +1594,18 @@ function ModelChip({
         "aria-label": "\u9009\u62E9\u6A21\u578B",
         onClick: () => setAnchor(chipRef.current.getBoundingClientRect()),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-model-chip__label", children: currentOption.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ChevronsUpDown, { size: 12 })
+          /* @__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 })
         ]
       }
     ),
-    anchor && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    anchor && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       AnchoredPopover,
       {
         anchorRect: anchor,
         onClose: () => setAnchor(null),
         role: "listbox",
-        children: models.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        children: models.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "button",
           {
             type: "button",
@@ -1329,8 +1617,8 @@ function ModelChip({
               setAnchor(null);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-popover__item-label", children: option.label }),
-              option.value === currentOption.value && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Check, { size: 13, className: "pactor-chat-popover__item-check" })
+              /* @__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" })
             ]
           },
           option.value
@@ -1339,10 +1627,243 @@ function ModelChip({
     )
   ] });
 }
+function ModelSelect({
+  models,
+  model,
+  onModelChange
+}) {
+  const changeRef = (0, import_react7.useRef)(onModelChange);
+  changeRef.current = onModelChange;
+  (0, import_react7.useEffect)(() => {
+    setChatChromeHandlers({
+      modelChange: (value) => changeRef.current?.(value)
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ChromeSlot,
+    {
+      fragment: buildModelSelectFragment({ models, model }),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModelChip, { models, model, onModelChange })
+    }
+  );
+}
 
-// src/view/context-sources.tsx
+// src/view/chrome/composer.tsx
+var import_components6 = require("@pactor-app/ui/components");
 var import_react8 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ComposerBridgeContext = (0, import_react8.createContext)(
+  null
+);
+function useComposerBridge() {
+  const bridge = (0, import_react8.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"
+    );
+  }
+  return bridge;
+}
+function formatSize(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function ComposerAttachments({
+  attachments,
+  onRemove,
+  onClick
+}) {
+  if (attachments.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
+    const isImage = attachment.mimeType.startsWith("image/");
+    return /* @__PURE__ */ (0, import_jsx_runtime8.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) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "pactor-chat-icon-button pactor-chat-composer__attachment-remove",
+              title: "\u79FB\u9664\u9644\u4EF6",
+              "aria-label": "\u79FB\u9664\u9644\u4EF6",
+              onClick: (event) => {
+                event.stopPropagation();
+                onRemove(attachment.id);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components6.Icon, { name: "x", size: 12 })
+            }
+          )
+        ]
+      },
+      attachment.id
+    );
+  }) });
+}
+function ComposerContextChips({
+  chips,
+  onRemove
+}) {
+  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)(
+    "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)(
+          "button",
+          {
+            type: "button",
+            className: "pactor-chat-icon-button pactor-chat-context-chip__remove",
+            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 })
+          }
+        )
+      ]
+    },
+    `${chip.trigger ?? ""}:${chip.id}`
+  )) });
+}
+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)(
+      ComposerAttachments,
+      {
+        attachments: bridge.attachments,
+        onRemove: bridge.removeAttachment,
+        onClick: bridge.attachmentClick
+      }
+    ),
+    bridge.contextChips !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ComposerContextChips,
+      {
+        chips: bridge.contextChips,
+        onRemove: bridge.removeChip
+      }
+    )
+  ] });
+}
+function ChatComposerToolbarStart() {
+  const bridge = useComposerBridge();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    bridge.toolbarStart,
+    bridge.showPlus && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-icon-button",
+        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 })
+      }
+    ),
+    bridge.showAttach && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-icon-button",
+        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 })
+      }
+    )
+  ] });
+}
+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)(
+      ModelSelect,
+      {
+        models: bridge.models,
+        model: bridge.model,
+        onModelChange: bridge.modelChange
+      }
+    ),
+    bridge.toolbarEnd,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        className: `pactor-chat-composer__button${bridge.streaming ? " pactor-chat-composer__button--stop" : ""}`,
+        title: bridge.streaming ? "\u505C\u6B62\u751F\u6210" : "\u53D1\u9001",
+        "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 })
+      }
+    )
+  ] });
+}
+function ChatComposerFooter() {
+  const bridge = useComposerBridge();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: bridge.composerFooter });
+}
+var COMPOSER_INTERNAL_COMPONENTS = {
+  ChatComposerHeader,
+  ChatComposerToolbarStart,
+  ChatComposerToolbarEnd,
+  ChatComposerFooter
+};
+function buildComposerFragment(props) {
+  const hideToolbar = props.hideToolbar === true;
+  return {
+    requires: [
+      "ChatInput",
+      "ChatComposerHeader",
+      ...hideToolbar ? [] : ["ChatComposerToolbarStart", "ChatComposerToolbarEnd"],
+      "ChatComposerFooter"
+    ],
+    node: {
+      type: "ChatInput",
+      props: {
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        rows: 1,
+        hideSend: true,
+        header: { type: "ChatComposerHeader" },
+        ...hideToolbar ? {} : {
+          toolbarStart: { type: "ChatComposerToolbarStart" },
+          toolbarEnd: { type: "ChatComposerToolbarEnd" }
+        },
+        ...props.hasFooter === true ? { footer: { type: "ChatComposerFooter" } } : {}
+      },
+      events: {
+        onSubmit: [
+          { action: "chat.composerSubmit", params: { value: "${event}" } }
+        ]
+      }
+    }
+  };
+}
+
+// src/view/context-sources.tsx
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function sourceCacheKey(source) {
   return `${source.service ?? ""}:${JSON.stringify(source.params ?? {})}`;
 }
@@ -1377,8 +1898,8 @@ function ContextSourceList({
   cache,
   onSelect
 }) {
-  const [resolutions, setResolutions] = (0, import_react8.useState)([]);
-  (0, import_react8.useEffect)(() => {
+  const [resolutions, setResolutions] = (0, import_react9.useState)([]);
+  (0, import_react9.useEffect)(() => {
     let cancelled = false;
     const initial = sources.map(
       (source) => source.items ? { status: "ready", items: source.items } : { status: "loading" }
@@ -1423,12 +1944,12 @@ function ContextSourceList({
     totalMatched += items.length;
     return { source, resolution, items };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "pactor-chat-source-list", children: [
-    groups.map(({ source, resolution, items }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "pactor-chat-source-list__group", children: [
-      sources.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pactor-chat-source-list__group-label", children: source.label }),
-      resolution.status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pactor-chat-source-list__hint", children: "\u52A0\u8F7D\u4E2D\u2026" }),
-      resolution.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pactor-chat-source-list__error", role: "alert", children: resolution.message }),
-      items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  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)(
         "button",
         {
           type: "button",
@@ -1439,22 +1960,13 @@ function ContextSourceList({
         item.id
       ))
     ] }, `${source.trigger}:${source.label}`)),
-    totalMatched === 0 && groups.every(({ resolution }) => resolution.status === "ready") && /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime9.jsx)("div", { className: "pactor-chat-source-list__hint", children: "\u65E0\u5339\u914D\u9879" })
   ] });
 }
 
 // src/view/Composer.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var MAX_INPUT_HEIGHT = 200;
-function formatSize(bytes) {
-  if (bytes < 1024) {
-    return `${bytes} B`;
-  }
-  if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
-  }
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
 function detectMention(text, caret) {
   const beforeCaret = text.slice(0, caret);
   const match = /(?:^|\s)@([^\s@]*)$/.exec(beforeCaret);
@@ -1483,28 +1995,30 @@ function Composer({
   contextSources,
   contextChips,
   onContextChipsChange,
-  callService
+  callService,
+  composerFooter,
+  hideToolbar = false
 }) {
-  const [text, setText] = (0, import_react9.useState)("");
-  const [dragOver, setDragOver] = (0, import_react9.useState)(false);
-  const inputRef = (0, import_react9.useRef)(null);
-  const fileInputRef = (0, import_react9.useRef)(null);
-  const plusButtonRef = (0, import_react9.useRef)(null);
-  const composingRef = (0, import_react9.useRef)(false);
+  const [text, setText] = (0, import_react10.useState)("");
+  const [dragOver, setDragOver] = (0, import_react10.useState)(false);
+  const inputRef = (0, import_react10.useRef)(null);
+  const fileInputRef = (0, import_react10.useRef)(null);
+  const plusButtonRef = (0, import_react10.useRef)(null);
+  const composingRef = (0, import_react10.useRef)(false);
   const modelChipEnabled = models !== void 0 && models.length > 0;
-  const mentionSources = (0, import_react9.useMemo)(
+  const mentionSources = (0, import_react10.useMemo)(
     () => contextSources?.filter((source) => source.trigger === "@") ?? [],
     [contextSources]
   );
-  const plusSources = (0, import_react9.useMemo)(
+  const plusSources = (0, import_react10.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_react9.useState)(null);
-  const [plusAnchor, setPlusAnchor] = (0, import_react9.useState)(null);
-  const sourceCacheRef = (0, import_react9.useRef)(null);
+  const [mentionState, setMentionState] = (0, import_react10.useState)(null);
+  const [plusAnchor, setPlusAnchor] = (0, import_react10.useState)(null);
+  const sourceCacheRef = (0, import_react10.useRef)(null);
   if (sourceCacheRef.current === null) {
     sourceCacheRef.current = /* @__PURE__ */ new Map();
   }
@@ -1523,7 +2037,7 @@ function Composer({
     setMentionState(null);
     setPlusAnchor(null);
   };
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (input) {
       input.style.height = "auto";
@@ -1538,105 +2052,147 @@ function Composer({
     onSend?.(value);
     setText("");
   };
-  const handleChange = (event) => {
-    const value = event.target.value;
+  const sendRef = (0, import_react10.useRef)(send);
+  sendRef.current = send;
+  (0, import_react10.useLayoutEffect)(() => {
+    setChatChromeHandlers({ composerSubmit: () => sendRef.current() });
+  }, []);
+  const syncText = (value, caret, rect) => {
     setText(value);
     if (onMentionTrigger || builtinMentionEnabled) {
-      const caret = event.target.selectionStart ?? value.length;
       const query = detectMention(value, caret);
       if (onMentionTrigger) {
         if (query !== null) {
-          onMentionTrigger(query, event.target.getBoundingClientRect());
+          onMentionTrigger(query, rect);
         }
       } else {
-        setMentionState(
-          query !== null ? { query, anchorRect: event.target.getBoundingClientRect() } : null
-        );
+        setMentionState(query !== null ? { query, anchorRect: rect } : null);
+      }
+    }
+  };
+  const handleChange = (event) => {
+    syncText(
+      event.target.value,
+      event.target.selectionStart ?? event.target.value.length,
+      event.target.getBoundingClientRect()
+    );
+  };
+  const handleBubbleChange = (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLTextAreaElement)) {
+      return;
+    }
+    syncText(
+      target.value,
+      target.selectionStart ?? target.value.length,
+      target.getBoundingClientRect()
+    );
+  };
+  const handlePasteFiles = (clipboardData) => {
+    const files = Array.from(clipboardData.files);
+    if (files.length > 0 && onAttachFiles) {
+      onAttachFiles(files);
+      return true;
+    }
+    return false;
+  };
+  const dragHandlers = {
+    onDragOver: (event) => {
+      event.preventDefault();
+      setDragOver(true);
+    },
+    onDragLeave: () => setDragOver(false),
+    onDrop: (event) => {
+      event.preventDefault();
+      setDragOver(false);
+      const files = collectDropFiles(event);
+      if (files.length > 0 && onAttachFiles) {
+        onAttachFiles(files);
       }
     }
   };
-  const showToolbar = toolbarStart !== void 0 || toolbarEnd !== void 0 || onPlusMenu !== void 0 || builtinPlusEnabled || onAttachFiles !== void 0 || modelChipEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  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)(
+    "input",
+    {
+      ref: fileInputRef,
+      type: "file",
+      multiple: true,
+      hidden: true,
+      onChange: (event) => {
+        const files = event.target.files ? Array.from(event.target.files) : [];
+        if (files.length > 0) {
+          onAttachFiles(files);
+        }
+        event.target.value = "";
+      }
+    }
+  ) : null;
+  const popoverNodes = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    builtinMentionEnabled && mentionState && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      AnchoredPopover,
+      {
+        anchorRect: mentionState.anchorRect,
+        onClose: () => setMentionState(null),
+        role: "listbox",
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ContextSourceList,
+          {
+            sources: mentionSources,
+            query: mentionState.query,
+            callService,
+            cache: sourceCacheRef.current,
+            onSelect: handleSelectContext
+          }
+        )
+      }
+    ),
+    builtinPlusEnabled && plusAnchor && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      AnchoredPopover,
+      {
+        anchorRect: plusAnchor,
+        onClose: () => setPlusAnchor(null),
+        role: "listbox",
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ContextSourceList,
+          {
+            sources: plusSources,
+            query: "",
+            callService,
+            cache: sourceCacheRef.current,
+            onSelect: handleSelectContext
+          }
+        )
+      }
+    )
+  ] });
+  const fallback = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: `pactor-chat-composer${dragOver ? " pactor-chat-composer--dragover" : ""}`,
-      onDragOver: (event) => {
-        event.preventDefault();
-        setDragOver(true);
-      },
-      onDragLeave: () => setDragOver(false),
-      onDrop: (event) => {
-        event.preventDefault();
-        setDragOver(false);
-        const files = collectDropFiles(event);
-        if (files.length > 0 && onAttachFiles) {
-          onAttachFiles(files);
-        }
-      },
+      ...dragHandlers,
       children: [
-        attachments !== void 0 && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
-          const isImage = attachment.mimeType.startsWith("image/");
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            "div",
-            {
-              className: "pactor-chat-composer__attachment",
-              "data-attachment-id": attachment.id,
-              onClick: () => onAttachmentClick?.(attachment),
-              children: [
-                isImage && attachment.url ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pactor-chat-composer__attachment-thumb", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: attachment.url, alt: attachment.name }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "pactor-chat-composer__attachment-info", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.FileText, { size: 14 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pactor-chat-composer__attachment-name", children: attachment.name }),
-                  attachment.size !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pactor-chat-composer__attachment-size", children: formatSize(attachment.size) })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "pactor-chat-icon-button pactor-chat-composer__attachment-remove",
-                    title: "\u79FB\u9664\u9644\u4EF6",
-                    "aria-label": "\u79FB\u9664\u9644\u4EF6",
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      onAttachmentsChange?.(
-                        attachments.filter((item) => item.id !== attachment.id)
-                      );
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.X, { size: 12 })
-                  }
-                )
-              ]
-            },
-            attachment.id
-          );
-        }) }),
-        contextChips !== void 0 && contextChips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pactor-chat-composer__contexts", children: contextChips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          "span",
+        attachments !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ComposerAttachments,
           {
-            className: "pactor-chat-context-chip",
-            "data-context-id": chip.id,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pactor-chat-context-chip__label", children: chip.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "button",
-                {
-                  type: "button",
-                  className: "pactor-chat-icon-button pactor-chat-context-chip__remove",
-                  title: `\u79FB\u9664\u4E0A\u4E0B\u6587 ${chip.label}`,
-                  "aria-label": `\u79FB\u9664\u4E0A\u4E0B\u6587 ${chip.label}`,
-                  onClick: () => onContextChipsChange?.(
-                    contextChips.filter(
-                      (existing) => !(existing.id === chip.id && existing.trigger === chip.trigger)
-                    )
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.X, { size: 12 })
-                }
+            attachments,
+            onRemove: (id) => onAttachmentsChange?.(attachments.filter((a) => a.id !== id)),
+            onClick: onAttachmentClick
+          }
+        ),
+        contextChips !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ComposerContextChips,
+          {
+            chips: contextChips,
+            onRemove: (chip) => onContextChipsChange?.(
+              contextChips.filter(
+                (existing) => !(existing.id === chip.id && existing.trigger === chip.trigger)
               )
-            ]
-          },
-          `${chip.trigger ?? ""}:${chip.id}`
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pactor-chat-composer__row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pactor-chat-composer__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "textarea",
             {
               ref: inputRef,
@@ -1653,10 +2209,8 @@ function Composer({
                 composingRef.current = false;
               },
               onPaste: (event) => {
-                const files = Array.from(event.clipboardData.files);
-                if (files.length > 0 && onAttachFiles) {
+                if (handlePasteFiles(event.clipboardData)) {
                   event.preventDefault();
-                  onAttachFiles(files);
                 }
               },
               onKeyDown: (event) => {
@@ -1670,7 +2224,7 @@ function Composer({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          hideToolbar ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -1679,14 +2233,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_runtime7.jsx)(import_lucide_react5.Square, { size: 14, fill: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.ArrowUp, { size: 16 })
+              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 })
             }
           )
         ] }),
-        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "pactor-chat-composer__toolbar", children: [
+        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pactor-chat-composer__toolbar", children: [
           toolbarStart,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pactor-chat-composer__toolbar-spacer" }),
-          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pactor-chat-composer__toolbar-spacer" }),
+          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               ref: plusButtonRef,
@@ -1702,10 +2256,10 @@ function Composer({
                   setPlusAnchor(rect);
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Plus, { size: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components7.Icon, { name: "plus", size: 14 })
             }
           ),
-          onAttachFiles && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          onAttachFiles && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -1713,11 +2267,11 @@ function Composer({
               title: "\u6DFB\u52A0\u9644\u4EF6",
               "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
               onClick: () => fileInputRef.current?.click(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Paperclip, { size: 14 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components7.Icon, { name: "paperclip", size: 14 })
             }
           ),
-          modelChipEnabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            ModelChip,
+          modelChipEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            ModelSelect,
             {
               models,
               model,
@@ -1726,104 +2280,206 @@ function Composer({
           ),
           toolbarEnd
         ] }),
-        onAttachFiles && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            multiple: true,
-            hidden: true,
-            onChange: (event) => {
-              const files = event.target.files ? Array.from(event.target.files) : [];
-              if (files.length > 0) {
-                onAttachFiles(files);
-              }
-              event.target.value = "";
-            }
-          }
-        ),
-        builtinMentionEnabled && mentionState && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          AnchoredPopover,
-          {
-            anchorRect: mentionState.anchorRect,
-            onClose: () => setMentionState(null),
-            role: "listbox",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              ContextSourceList,
-              {
-                sources: mentionSources,
-                query: mentionState.query,
-                callService,
-                cache: sourceCacheRef.current,
-                onSelect: handleSelectContext
-              }
-            )
-          }
-        ),
-        builtinPlusEnabled && plusAnchor && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          AnchoredPopover,
-          {
-            anchorRect: plusAnchor,
-            onClose: () => setPlusAnchor(null),
-            role: "listbox",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              ContextSourceList,
-              {
-                sources: plusSources,
-                query: "",
-                callService,
-                cache: sourceCacheRef.current,
-                onSelect: handleSelectContext
-              }
-            )
-          }
-        )
+        composerFooter !== void 0 && composerFooter !== null ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "pactor-chat-composer__footer", children: composerFooter }) : null,
+        fileInputNode,
+        popoverNodes
       ]
     }
   );
+  const bridge = {
+    text,
+    streaming,
+    disabled,
+    attachments,
+    contextChips,
+    toolbarStart,
+    toolbarEnd,
+    composerFooter,
+    models,
+    model,
+    showPlus: onPlusMenu !== void 0 || builtinPlusEnabled,
+    showAttach: onAttachFiles !== void 0,
+    modelChipEnabled,
+    send,
+    stop: onStop,
+    openFilePicker: () => fileInputRef.current?.click(),
+    plusClick: (rect) => {
+      if (onPlusMenu) {
+        onPlusMenu(rect);
+      } else {
+        setPlusAnchor(rect);
+      }
+    },
+    removeAttachment: (id) => onAttachmentsChange?.((attachments ?? []).filter((a) => a.id !== id)),
+    attachmentClick: onAttachmentClick,
+    removeChip: (chip) => onContextChipsChange?.(
+      (contextChips ?? []).filter(
+        (existing) => !(existing.id === chip.id && existing.trigger === chip.trigger)
+      )
+    ),
+    modelChange: onModelChange
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ChromeSlot,
+    {
+      fragment: buildComposerFragment({
+        placeholder,
+        disabled,
+        hasFooter: composerFooter !== void 0 && composerFooter !== null,
+        hideToolbar
+      }),
+      components: COMPOSER_INTERNAL_COMPONENTS,
+      fallback,
+      wrap: (children) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComposerBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "div",
+        {
+          className: `pactor-chat-composer pactor-chat-composer--dsl${dragOver ? " pactor-chat-composer--dragover" : ""}`,
+          ...dragHandlers,
+          onChange: handleBubbleChange,
+          onPaste: (event) => {
+            if (handlePasteFiles(event.clipboardData)) {
+              event.preventDefault();
+            }
+          },
+          children: [
+            children,
+            fileInputNode,
+            popoverNodes
+          ]
+        }
+      ) })
+    }
+  );
 }
 
-// src/view/EmptyState.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var DEFAULT_CHAT_GREETING = "\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u4F60\uFF1F";
+// src/view/chrome/empty-state.tsx
 function suggestionLabel(suggestion) {
   return typeof suggestion === "string" ? suggestion : suggestion.label;
 }
 function suggestionPrompt(suggestion) {
   return typeof suggestion === "string" ? suggestion : suggestion.prompt ?? suggestion.label;
 }
-function EmptyState({
-  greeting = DEFAULT_CHAT_GREETING,
+function buildEmptyStateFragment(props) {
+  const children = [
+    {
+      type: "Typography",
+      props: {
+        variant: "h3",
+        text: props.greeting,
+        className: "pactor-chat-empty__greeting"
+      }
+    }
+  ];
+  if (props.subtitle) {
+    children.push({
+      type: "Text",
+      props: {
+        type: "secondary",
+        text: props.subtitle,
+        className: "pactor-chat-empty__subtitle"
+      }
+    });
+  }
+  if (props.suggestions && props.suggestions.length > 0) {
+    children.push({
+      type: "Flex",
+      props: {
+        gap: "small",
+        justify: "center",
+        className: "pactor-chat-empty__suggestions"
+      },
+      children: props.suggestions.map((suggestion) => ({
+        type: "Button",
+        props: {
+          text: suggestionLabel(suggestion),
+          variant: "default",
+          size: "middle",
+          className: "pactor-chat-empty__suggestion"
+        },
+        events: {
+          onClick: [
+            {
+              action: "chat.sendSuggestion",
+              params: { text: suggestionPrompt(suggestion) }
+            }
+          ]
+        }
+      }))
+    });
+  }
+  return {
+    requires: ["Flex", "Typography", "Text", "Button"],
+    node: {
+      type: "Flex",
+      props: { direction: "vertical", align: "center", gap: "middle" },
+      children
+    }
+  };
+}
+
+// src/view/EmptyState.tsx
+var import_jsx_runtime11 = 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;
+}
+function suggestionPrompt2(suggestion) {
+  return typeof suggestion === "string" ? suggestion : suggestion.prompt ?? suggestion.label;
+}
+function EmptyStateFallback({
   subtitle,
   suggestions,
-  onSuggestionClick
+  onSuggestionClick,
+  greeting
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "pactor-chat-empty", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pactor-chat-empty__greeting", children: greeting }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pactor-chat-empty__subtitle", children: subtitle }),
-    suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "pactor-chat-empty__suggestions", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  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)(
       "button",
       {
         type: "button",
         className: "pactor-chat-empty__suggestion",
-        onClick: () => onSuggestionClick?.(suggestionPrompt(suggestion)),
-        children: suggestionLabel(suggestion)
+        onClick: () => onSuggestionClick?.(suggestionPrompt2(suggestion)),
+        children: suggestionLabel2(suggestion)
       },
-      suggestionLabel(suggestion)
+      suggestionLabel2(suggestion)
     )) })
   ] });
 }
+function EmptyState({
+  greeting = DEFAULT_CHAT_GREETING,
+  subtitle,
+  suggestions,
+  onSuggestionClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "pactor-chat-empty", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    ChromeSlot,
+    {
+      fragment: buildEmptyStateFragment({ greeting, subtitle, suggestions }),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        EmptyStateFallback,
+        {
+          greeting,
+          subtitle,
+          suggestions,
+          onSuggestionClick
+        }
+      )
+    }
+  ) });
+}
 
 // src/view/MessageBubble.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/view/ActivityTrace.tsx
-var import_lucide_react6 = require("lucide-react");
+var import_components8 = require("@pactor-app/ui/components");
 var import_markdown3 = require("@pactor-app/markdown");
-var import_react10 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function usePinnedCollapse(autoOpen) {
-  const [state, setState] = (0, import_react10.useState)("auto");
+  const [state, setState] = (0, import_react11.useState)("auto");
   const open = state === "auto" ? autoOpen : state === "pinned-open";
   const toggle = () => {
     setState(open ? "pinned-closed" : "pinned-open");
@@ -1849,8 +2505,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_react10.useState)(compute);
-  (0, import_react10.useEffect)(() => {
+  const [elapsed, setElapsed] = (0, import_react11.useState)(compute);
+  (0, import_react11.useEffect)(() => {
     if (!active) {
       setElapsed(compute());
       return;
@@ -1864,15 +2520,15 @@ function useElapsedSeconds(startedAt, active) {
 }
 function TraceStatusIcon({ status }) {
   if (status === "running") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Loader2, { size: 13, className: "pactor-chat-spin" });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "loading", size: 13, className: "pactor-chat-spin" });
   }
   if (status === "success") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.CheckCircle2, { size: 13 });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "check-circle", size: 13 });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.XCircle, { size: 13 });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "x-circle", size: 13 });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Clock, { size: 13 });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.Icon, { name: "clock", size: 13 });
 }
 function summarizeArgs(args) {
   if (args === void 0) {
@@ -1901,16 +2557,16 @@ function formatDetail(value) {
   }
 }
 function TraceRow({ entry }) {
-  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [open, setOpen] = (0, import_react11.useState)(false);
   const summary = summarizeArgs(entry.args);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: "pactor-chat-trace__entry",
       "data-status": entry.status,
       "data-open": open,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "button",
           {
             type: "button",
@@ -1918,16 +2574,16 @@ function TraceRow({ entry }) {
             "aria-expanded": open,
             onClick: () => setOpen((value) => !value),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.ChevronRight, { size: 12 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-trace__entry-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TraceStatusIcon, { status: entry.status }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-trace__entry-title", children: entry.title ?? entry.name }),
-              summary && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-trace__entry-args", children: summary })
+              /* @__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 })
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pactor-chat-trace__entry-body", children: [
-          entry.args !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { className: "pactor-chat-trace__entry-detail", children: formatDetail(entry.args) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.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_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) })
         ] })
       ]
     }
@@ -1939,14 +2595,14 @@ function ThinkingCard({
 }) {
   const partStreaming = part.status === "streaming";
   const { open, toggle } = usePinnedCollapse(partStreaming && !answerPhase);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: "pactor-chat-thinking",
       "data-open": open,
       "data-streaming": partStreaming,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "button",
           {
             type: "button",
@@ -1954,13 +2610,13 @@ function ThinkingCard({
             "aria-expanded": open,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.ChevronRight, { size: 12 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-thinking__icon", children: partStreaming ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Loader2, { size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Brain, { size: 13 }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "\u601D\u8003\u8FC7\u7A0B" })
+              /* @__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" })
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-thinking__body", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_markdown3.MarkdownRenderer, { content: part.content }) })
+        open && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-thinking__body", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_markdown3.MarkdownRenderer, { content: part.content }) })
       ]
     }
   );
@@ -1974,7 +2630,7 @@ function ActivityTrace({ message }) {
   );
   const answerPhase = mode === "responding" || !streaming;
   const { open, toggle } = usePinnedCollapse(!answerPhase);
-  const mountTimeRef = (0, import_react10.useRef)(0);
+  const mountTimeRef = (0, import_react11.useRef)(0);
   if (mountTimeRef.current === 0) {
     mountTimeRef.current = Date.now();
   }
@@ -1982,23 +2638,23 @@ function ActivityTrace({ message }) {
     message.createdAt ?? mountTimeRef.current,
     streaming
   );
-  const header = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-trace__status-icon", children: streaming ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.Loader2, { size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.CheckCircle2, { size: 13 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  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)(
       "span",
       {
         className: `pactor-chat-trace__status-text${streaming ? " pactor-chat-trace__status-text--breathing" : ""}`,
         children: statusText(message, mode, entries.length)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "pactor-chat-trace__elapsed", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "pactor-chat-trace__elapsed", children: [
       elapsed,
       "s"
     ] }),
-    entries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.ChevronRight, { size: 12 }) })
+    entries.length > 0 && /* @__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 }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "pactor-chat-trace", "data-open": open, children: [
-    entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pactor-chat-trace", "data-open": open, children: [
+    entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
         type: "button",
@@ -2007,8 +2663,8 @@ function ActivityTrace({ message }) {
         onClick: toggle,
         children: header
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-trace__header", children: header }),
-    thinkingParts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-trace__header", children: header }),
+    thinkingParts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ThinkingCard,
       {
         part,
@@ -2016,25 +2672,66 @@ function ActivityTrace({ message }) {
       },
       part.id ?? index
     )),
-    open && entries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "pactor-chat-trace__entries", children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TraceRow, { entry }, entry.callIndex)) })
+    open && 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)) })
   ] });
 }
 
 // src/view/MessageActions.tsx
-var import_lucide_react7 = require("lucide-react");
-var import_react11 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var MESSAGE_ACTION_ICONS = {
-  copy: import_lucide_react7.Copy,
-  check: import_lucide_react7.Check,
-  "rotate-ccw": import_lucide_react7.RotateCcw,
-  pencil: import_lucide_react7.Pencil,
-  quote: import_lucide_react7.Quote,
-  "thumbs-up": import_lucide_react7.ThumbsUp,
-  "thumbs-down": import_lucide_react7.ThumbsDown,
-  share: import_lucide_react7.Share2,
-  bookmark: import_lucide_react7.Bookmark
-};
+var import_components9 = require("@pactor-app/ui/components");
+var import_react12 = require("react");
+
+// src/view/chrome/message-actions.tsx
+function buildMessageActionsFragment(args) {
+  const { actions, copied, token } = args;
+  return {
+    requires: ["Flex", "Tooltip", "Button", "Icon"],
+    node: {
+      type: "Flex",
+      props: { gap: "small" },
+      children: actions.map((action) => {
+        const copiedFeedback = action.builtin === "copy" && copied;
+        const label = copiedFeedback ? "\u5DF2\u590D\u5236" : action.label;
+        const iconName = copiedFeedback ? "check" : action.icon;
+        return {
+          type: "Tooltip",
+          props: { content: label },
+          children: [
+            {
+              type: "Button",
+              props: {
+                variant: "text",
+                size: "small",
+                className: "pactor-chat-icon-button"
+              },
+              events: {
+                onClick: [
+                  {
+                    action: "chat.messageAction",
+                    params: { token, actionId: action.id }
+                  }
+                ]
+              },
+              children: [
+                {
+                  type: "Icon",
+                  props: {
+                    // 契约图标名直通 ui Icon 白名单（spec: chat-icon-convergence；
+                    // 未知名由 ui Icon 渲染占位）
+                    name: iconName ?? "help-circle",
+                    size: 14
+                  }
+                }
+              ]
+            }
+          ]
+        };
+      })
+    }
+  };
+}
+
+// src/view/MessageActions.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var BUILTIN_ACTION_DEFAULTS = {
   copy: {
     label: "\u590D\u5236",
@@ -2107,7 +2804,21 @@ function MessageActions({
   callService,
   onMessageAction
 }) {
-  const [copied, setCopied] = (0, import_react11.useState)(false);
+  const [copied, setCopied] = (0, import_react12.useState)(false);
+  const dispatchRef = (0, import_react12.useRef)(
+    () => {
+    }
+  );
+  const visibleActionsRef = (0, import_react12.useRef)([]);
+  (0, import_react12.useEffect)(() => {
+    setMessageActionDispatcher(message.id, (actionId) => {
+      const action = visibleActionsRef.current.find((a) => a.id === actionId);
+      if (action) {
+        dispatchRef.current(action);
+      }
+    });
+    return () => clearMessageActionDispatcher(message.id);
+  }, [message.id]);
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(collectMessageText(message));
@@ -2167,41 +2878,53 @@ function MessageActions({
     }
     onMessageAction?.(action.id, message);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  dispatchRef.current = dispatch;
+  visibleActionsRef.current = visibleActions;
+  const buttons = visibleActions.map((action) => {
+    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)(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-icon-button",
+        title: label,
+        "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 })
+      },
+      action.id
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       className: `pactor-chat-message__actions${forceVisible ? " pactor-chat-message__actions--visible" : ""}`,
-      children: visibleActions.map((action) => {
-        const copiedFeedback = action.builtin === "copy" && copied;
-        const label = copiedFeedback ? "\u5DF2\u590D\u5236" : action.label;
-        const iconName = copiedFeedback ? "check" : action.icon;
-        const Icon = iconName !== void 0 ? MESSAGE_ACTION_ICONS[iconName] : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "pactor-chat-icon-button",
-            title: label,
-            "aria-label": label,
-            "data-message-action": action.id,
-            onClick: () => dispatch(action),
-            children: Icon ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.HelpCircle, { size: 14, "data-icon-placeholder": "true" })
-          },
-          action.id
-        );
-      })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ChromeSlot,
+        {
+          fragment: buildMessageActionsFragment({
+            actions: visibleActions,
+            copied,
+            token: message.id
+          }),
+          fallback: buttons
+        }
+      )
     }
   );
 }
 
 // src/view/MessageBubble.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function MessageEditForm({
   initialText,
   onConfirm,
   onCancel
 }) {
-  const [text, setText] = (0, import_react12.useState)(initialText);
+  const [text, setText] = (0, import_react13.useState)(initialText);
   const confirm = () => {
     const value = text.trim();
     if (!value) {
@@ -2209,8 +2932,8 @@ function MessageEditForm({
     }
     onConfirm(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pactor-chat-message__edit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "pactor-chat-message__edit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "textarea",
       {
         className: "pactor-chat-message__edit-input",
@@ -2228,8 +2951,8 @@ function MessageEditForm({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pactor-chat-message__edit-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "pactor-chat-message__edit-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "button",
@@ -2239,7 +2962,7 @@ function MessageEditForm({
           children: "\u53D1\u9001"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "button",
@@ -2265,7 +2988,7 @@ function MessageBubble({
   onMessageAction,
   onOpenArtifact
 }) {
-  const [editing, setEditing] = (0, import_react12.useState)(false);
+  const [editing, setEditing] = (0, import_react13.useState)(false);
   const bubbleScope = {
     conversation: scope?.conversation ?? {},
     message: { id: message.id },
@@ -2273,21 +2996,21 @@ function MessageBubble({
   };
   const streaming = message.status === "streaming";
   const live = message.status === "pending" || message.status === "streaming";
-  const wasLiveRef = (0, import_react12.useRef)(live);
+  const wasLiveRef = (0, import_react13.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_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime11.jsx)(
+        editing ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           MessageEditForm,
           {
             initialText: collectMessageText(message),
@@ -2297,9 +3020,9 @@ function MessageBubble({
             },
             onCancel: () => setEditing(false)
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pactor-chat-message__body", children: [
-          showTrace && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActivityTrace, { message }),
-          message.parts.length === 0 && message.status === "pending" && message.role !== "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pactor-chat-message__pending", children: "\u2026" }) : message.parts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ) : /* @__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,
@@ -2311,7 +3034,7 @@ function MessageBubble({
             part.id ?? index
           ))
         ] }),
-        !editing && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        !editing && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           MessageActions,
           {
             message,
@@ -2331,7 +3054,7 @@ function MessageBubble({
 }
 
 // src/view/ChatView.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function lastContentLength(messages) {
   const last = messages[messages.length - 1];
   if (!last) {
@@ -2365,6 +3088,8 @@ function ChatView({
   onAttachmentClick,
   toolbarStart,
   toolbarEnd,
+  composerFooter,
+  hideToolbar,
   onMentionTrigger,
   onPlusMenu,
   models,
@@ -2375,20 +3100,21 @@ function ChatView({
   onContextsChange,
   callService,
   messageActions,
-  onMessageAction
+  onMessageAction,
+  composerBottom
 }) {
-  const messages = (0, import_react13.useSyncExternalStore)(
+  const messages = (0, import_react14.useSyncExternalStore)(
     (listener) => store.subscribe(listener),
     () => store.getMessages()
   );
   const isStreaming = messages.some(
     (message) => message.status === "pending" || message.status === "streaming"
   );
-  const runtime = (0, import_react13.useMemo)(() => {
+  const runtime = (0, import_react14.useMemo)(() => {
     if (!safeRegistry) {
       return void 0;
     }
-    const components = new import_core3.Registry("ChatComponentRegistry");
+    const components = new import_core4.Registry("ChatComponentRegistry");
     components.register(CHAT_DENIED_TYPE, ChatDenied);
     for (const name of safeRegistry.list()) {
       components.register(name, safeRegistry.get(name));
@@ -2401,12 +3127,12 @@ function ChatView({
       user
     });
   }, [safeRegistry, capabilities, permission, confirm, user]);
-  const scope = (0, import_react13.useMemo)(
+  const scope = (0, import_react14.useMemo)(
     () => ({ conversation: { id: conversationId }, params }),
     [conversationId, params]
   );
-  const notifiedArtifactsRef = (0, import_react13.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react13.useEffect)(() => {
+  const notifiedArtifactsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react14.useEffect)(() => {
     if (!onArtifact) {
       return;
     }
@@ -2425,7 +3151,7 @@ function ChatView({
       });
     }
   }, [messages, onArtifact]);
-  const abortRef = (0, import_react13.useRef)(null);
+  const abortRef = (0, import_react14.useRef)(null);
   const { containerRef, isFollowing, scrollToBottom } = useChatAutoScroll({
     messageCount: messages.length,
     lastContentLength: lastContentLength(messages),
@@ -2436,7 +3162,7 @@ function ChatView({
     model,
     onModelChange
   });
-  const [contextChips, setContextChips] = (0, import_react13.useState)([]);
+  const [contextChips, setContextChips] = (0, import_react14.useState)([]);
   const handleContextChipsChange = (chips) => {
     setContextChips(chips);
     onContextsChange?.(chips);
@@ -2468,6 +3194,16 @@ function ChatView({
     abortRef.current?.abort();
     abortRef.current = null;
   };
+  const handleSendRef = (0, import_react14.useRef)(handleSend);
+  handleSendRef.current = handleSend;
+  const onOpenArtifactRef = (0, import_react14.useRef)(onOpenArtifact);
+  onOpenArtifactRef.current = onOpenArtifact;
+  (0, import_react14.useEffect)(() => {
+    setChatChromeHandlers({
+      sendSuggestion: (text) => handleSendRef.current(text),
+      openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact)
+    });
+  }, []);
   const handleRegenerate = () => {
     if (!transport) {
       return;
@@ -2485,7 +3221,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_runtime12.jsx)(
+  const composerNode = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     Composer,
     {
       onSend: handleSend,
@@ -2497,6 +3233,8 @@ function ChatView({
       onAttachmentClick,
       toolbarStart,
       toolbarEnd,
+      composerFooter,
+      hideToolbar,
       onMentionTrigger,
       onPlusMenu,
       models: modelPlacement === "header" ? void 0 : models,
@@ -2508,14 +3246,18 @@ function ChatView({
       callService
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  const composerDock = /* @__PURE__ */ (0, import_jsx_runtime15.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
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: `pactor-chat-view${isEmpty ? " pactor-chat-view--empty" : ""}${className ? ` ${className}` : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pactor-chat-messages", ref: containerRef, children: [
-          isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "pactor-chat-view__empty-stack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__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)(
               EmptyState,
               {
                 greeting,
@@ -2524,8 +3266,8 @@ function ChatView({
                 onSuggestionClick: handleSend
               }
             ),
-            composerNode
-          ] }) : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            composerDock
+          ] }) : messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             MessageBubble,
             {
               message,
@@ -2542,28 +3284,28 @@ function ChatView({
             },
             message.id
           )),
-          !isFollowing && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          !isFollowing && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "button",
             {
               type: "button",
               className: "pactor-chat-scroll-bottom",
               onClick: scrollToBottom,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react8.ArrowDown, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components10.Icon, { name: "arrow-down", size: 13 }),
                 "\u56DE\u5230\u5E95\u90E8"
               ]
             }
           )
         ] }),
-        !isEmpty && composerNode
+        !isEmpty && composerDock
       ]
     }
   );
 }
 
 // src/view/WorkspaceHeader.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_react14 = require("react");
+var import_components11 = require("@pactor-app/ui/components");
+var import_react15 = require("react");
 
 // src/export-markdown.ts
 var ROLE_LABELS = {
@@ -2595,8 +3337,52 @@ function downloadMessagesAsMarkdown(title, messages) {
   URL.revokeObjectURL(url);
 }
 
+// src/view/chrome/header-actions.tsx
+function buildHeaderActionsFragment(props) {
+  const meta = {
+    export: { label: "\u5BFC\u51FA Markdown", icon: "download" },
+    theme: {
+      label: props.theme === "dark" ? "\u5207\u6362\u4E3A\u6D45\u8272" : "\u5207\u6362\u4E3A\u6DF1\u8272",
+      icon: props.theme === "dark" ? "sun" : "moon"
+    },
+    clear: { label: "\u6E05\u7A7A\u4F1A\u8BDD", icon: "trash2" }
+  };
+  return {
+    requires: ["Flex", "Tooltip", "Button", "Icon"],
+    node: {
+      type: "Flex",
+      props: { gap: "small", align: "center" },
+      children: props.actions.map((action) => ({
+        type: "Tooltip",
+        props: { content: meta[action].label },
+        children: [
+          {
+            type: "Button",
+            props: {
+              variant: "text",
+              size: "small",
+              className: "pactor-chat-icon-button"
+            },
+            events: {
+              onClick: [
+                { action: "chat.headerAction", params: { action } }
+              ]
+            },
+            children: [
+              {
+                type: "Icon",
+                props: { name: meta[action].icon, size: 15 }
+              }
+            ]
+          }
+        ]
+      }))
+    }
+  };
+}
+
 // src/view/WorkspaceHeader.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function readCurrentTheme() {
   if (typeof document === "undefined") {
     return "light";
@@ -2616,10 +3402,10 @@ function WorkspaceHeader({
   onTitleChange
 }) {
   const hasActions = headerActions !== void 0 && headerActions.length > 0;
-  const [overrideTitle, setOverrideTitle] = (0, import_react14.useState)(null);
-  const [editing, setEditing] = (0, import_react14.useState)(false);
-  const [draft, setDraft] = (0, import_react14.useState)("");
-  const prevTitleRef = (0, import_react14.useRef)(title);
+  const [overrideTitle, setOverrideTitle] = (0, import_react15.useState)(null);
+  const [editing, setEditing] = (0, import_react15.useState)(false);
+  const [draft, setDraft] = (0, import_react15.useState)("");
+  const prevTitleRef = (0, import_react15.useRef)(title);
   if (prevTitleRef.current !== title) {
     prevTitleRef.current = title;
     if (overrideTitle !== null) {
@@ -2627,7 +3413,7 @@ function WorkspaceHeader({
     }
   }
   const displayTitle = overrideTitle ?? title;
-  const [theme, setTheme] = (0, import_react14.useState)(readCurrentTheme);
+  const [theme, setTheme] = (0, import_react15.useState)(readCurrentTheme);
   const commitTitle = () => {
     setEditing(false);
     const next = draft.trim();
@@ -2654,8 +3440,24 @@ function WorkspaceHeader({
     store.clear();
     onClear?.();
   };
+  const handlersRef = (0, import_react15.useRef)({ handleExport, handleTheme, handleClear });
+  handlersRef.current = { handleExport, handleTheme, handleClear };
+  (0, import_react15.useEffect)(() => {
+    setChatChromeHandlers({
+      headerAction: (name) => {
+        const handlers2 = handlersRef.current;
+        if (name === "export") {
+          handlers2.handleExport();
+        } else if (name === "theme") {
+          handlers2.handleTheme();
+        } else if (name === "clear") {
+          handlers2.handleClear();
+        }
+      }
+    });
+  }, []);
   const actionButtons = {
-    export: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    export: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         type: "button",
@@ -2663,11 +3465,11 @@ function WorkspaceHeader({
         title: "\u5BFC\u51FA Markdown",
         "aria-label": "\u5BFC\u51FA Markdown",
         onClick: handleExport,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react9.Download, { size: 15 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Icon, { name: "download", size: 15 })
       },
       "export"
     ),
-    theme: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    theme: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         type: "button",
@@ -2675,11 +3477,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_runtime13.jsx)(import_lucide_react9.Sun, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react9.Moon, { size: 15 })
+        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 })
       },
       "theme"
     ),
-    clear: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    clear: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         type: "button",
@@ -2687,12 +3489,12 @@ function WorkspaceHeader({
         title: "\u6E05\u7A7A\u4F1A\u8BDD",
         "aria-label": "\u6E05\u7A7A\u4F1A\u8BDD",
         onClick: handleClear,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react9.Trash2, { size: 15 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Icon, { name: "trash", size: 15 })
       },
       "clear"
     )
   };
-  const titleNode = editableTitle ? editing ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const titleNode = editableTitle ? editing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "input",
     {
       className: "pactor-chat-workspace__title-input",
@@ -2709,7 +3511,7 @@ function WorkspaceHeader({
         }
       }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "button",
     {
       type: "button",
@@ -2721,29 +3523,38 @@ function WorkspaceHeader({
       },
       children: displayTitle
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-workspace__title", children: title });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("header", { className: "pactor-chat-workspace__header", children: [
+  ) : /* @__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: [
     headerStart !== void 0 ? (
       // header 位模型 chip（决策 D2）：与 title 组成左端组，chip 在前
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pactor-chat-workspace__header-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "pactor-chat-workspace__header-left", children: [
         headerStart,
         titleNode
       ] })
     ) : titleNode,
-    hasActions ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "pactor-chat-workspace__header-right", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-workspace__header-actions", children: headerActions.map((action) => actionButtons[action]) }),
-      headerExtra !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
-    ] }) : headerExtra !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
+    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)(
+        ChromeSlot,
+        {
+          fragment: buildHeaderActionsFragment({
+            actions: headerActions,
+            theme
+          }),
+          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
   ] });
 }
 
 // src/chat-composition.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DslNodeSlotInner({ node }) {
-  const { renderChildren } = (0, import_runtime4.useRenderer)();
+  const { renderChildren } = (0, import_runtime5.useRenderer)();
   return renderChildren([node]);
 }
-var DslSlotGuard = class extends import_react15.Component {
+var DslSlotGuard = class extends import_react16.Component {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -2761,17 +3572,17 @@ var DslSlotGuard = class extends import_react15.Component {
   }
 };
 function DslNodeSlot({ node }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DslSlotGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DslNodeSlotInner, { node }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslSlotGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslNodeSlotInner, { node }) });
 }
 function isDslNodeValue(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && !(0, import_react15.isValidElement)(value) && typeof value.type === "string";
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !(0, import_react16.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_runtime14.jsx)(DslNodeSlot, { node: slot });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslNodeSlot, { node: slot });
   }
   return slot;
 }
@@ -2801,7 +3612,11 @@ function ChatComposition({
   messageActions,
   onMessageAction,
   sidebar,
+  toolbarStart,
   toolbarEnd,
+  composerFooter,
+  composerBottom,
+  hideToolbar,
   className,
   onSend,
   artifact,
@@ -2811,18 +3626,18 @@ function ChatComposition({
   onArtifact,
   onOpenArtifact
 }) {
-  const storeRef = (0, import_react15.useRef)(null);
+  const storeRef = (0, import_react16.useRef)(null);
   if (storeRef.current === null) {
     storeRef.current = services.store ?? services.storeFactory?.() ?? new ConversationStore();
   }
   const store = storeRef.current;
-  const artifactStoreRef = (0, import_react15.useRef)(null);
+  const artifactStoreRef = (0, import_react16.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_react15.useSyncExternalStore)(
+  const storeArtifact = (0, import_react16.useSyncExternalStore)(
     (listener) => artifactStore.subscribe(listener),
     () => artifactStore.get()
   );
@@ -2840,7 +3655,7 @@ function ChatComposition({
       artifactStore.open(next);
     }
   };
-  const [attachments, setAttachments] = (0, import_react15.useState)([]);
+  const [attachments, setAttachments] = (0, import_react16.useState)([]);
   const handleAttachFiles = services.onAttachFiles ? (files) => {
     void Promise.resolve(services.onAttachFiles(files)).then(
       (created) => {
@@ -2860,24 +3675,38 @@ function ChatComposition({
     model,
     onModelChange
   });
-  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    ModelChip,
+  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    ModelSelect,
     {
       models,
       model: currentModel,
       onModelChange: handleModelChange
     }
   ) : void 0;
-  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     services.toolbarEnd,
     toolbarEnd
   ] }) : void 0;
-  const workspace = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  const mergedToolbarStart = services.toolbarStart !== void 0 || toolbarStart !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.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: [
+    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: [
+    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)(
     "div",
     {
       className: `pactor-chat-workspace${className ? ` ${className}` : ""}`,
       children: [
-        showHeader ? header ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        renderHeader ? header ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           WorkspaceHeader,
           {
             title,
@@ -2892,7 +3721,7 @@ function ChatComposition({
             onTitleChange
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           ChatView,
           {
             store,
@@ -2912,8 +3741,11 @@ function ChatComposition({
             onAttachmentsChange: setAttachments,
             onAttachFiles: handleAttachFiles,
             onAttachmentClick: services.onAttachmentClick,
-            toolbarStart: services.toolbarStart,
+            toolbarStart: mergedToolbarStart,
             toolbarEnd: mergedToolbarEnd,
+            composerFooter: mergedComposerFooter,
+            composerBottom: mergedComposerBottom,
+            hideToolbar,
             onMentionTrigger: services.onMentionTrigger,
             onPlusMenu: services.onPlusMenu,
             onArtifact,
@@ -2932,15 +3764,15 @@ function ChatComposition({
       ]
     }
   );
-  const main = sidebar ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AppShell, { sidebar, children: workspace }) : workspace;
+  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_runtime14.jsxs)("div", { className: "pactor-chat-inspector-host", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "pactor-chat-inspector-host", children: [
     main,
-    effectivePanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    effectivePanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
           className: "pactor-chat-inspector__scrim",
@@ -2948,7 +3780,7 @@ function ChatComposition({
           onClick: handlePanelClose
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         ArtifactPanel,
         {
           artifact: effectiveArtifact,
@@ -2963,21 +3795,21 @@ function ChatComposition({
 }
 
 // src/chat-services.tsx
-var import_react16 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var ChatServicesContext = (0, import_react16.createContext)(null);
+var import_react17 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ChatServicesContext = (0, import_react17.createContext)(null);
 function ChatServicesProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatServicesContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatServicesContext.Provider, { value, children });
 }
 function useChatServices() {
-  return (0, import_react16.useContext)(ChatServicesContext);
+  return (0, import_react17.useContext)(ChatServicesContext);
 }
 
 // src/chat-workspace.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function createChatWorkspace(services) {
   function ChatWorkspace({
     title,
@@ -2987,7 +3819,11 @@ function createChatWorkspace(services) {
     conversationId,
     params,
     sidebar,
+    toolbarStart,
     toolbarEnd,
+    composerFooter,
+    composerBottom,
+    hideToolbar,
     artifact,
     panelOpen,
     onPanelClose,
@@ -3010,7 +3846,7 @@ function createChatWorkspace(services) {
     onMessageAction,
     className
   }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChatServicesProvider, { value: services, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatServicesProvider, { value: services, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ChatComposition,
       {
         services,
@@ -3021,15 +3857,17 @@ function createChatWorkspace(services) {
         conversationId,
         params,
         className,
-        showHeader: title !== void 0 || services.headerExtra !== void 0 || // header 位模型 chip（决策 D2）：仅配置 models 也渲染极简头部
-        modelPlacement === "header" && models !== void 0 && models.length > 0,
         headerExtra: services.headerExtra,
-        sidebar: sidebar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DslNodeSlot, { node: sidebar }) : void 0,
-        toolbarEnd: toolbarEnd ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DslNodeSlot, { node: toolbarEnd }) : void 0,
+        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,
+        hideToolbar,
         artifact,
         panelOpen,
         onPanelClose,
-        inspector: inspector ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DslNodeSlot, { node: inspector }) : void 0,
+        inspector: inspector ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: inspector }) : void 0,
         onArtifact,
         onOpenArtifact,
         headerActions,
@@ -3053,11 +3891,37 @@ function createChatWorkspace(services) {
 }
 
 // src/view/Chat.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_react17 = require("react");
+var import_components12 = require("@pactor-app/ui/components");
+var import_react18 = require("react");
+
+// src/view/chrome/menu.tsx
+function buildSidebarMenuFragment(props) {
+  return {
+    requires: ["Menu"],
+    node: {
+      type: "Menu",
+      props: {
+        mode: "inline",
+        selectedKey: props.activeMenuKey,
+        items: props.menu.map((item) => ({
+          key: item.key,
+          label: item.label,
+          ...item.icon !== void 0 ? { icon: item.icon } : {},
+          ...item.badge !== void 0 ? { badge: item.badge } : {},
+          ...item.dot === true ? { dot: true } : {},
+          ...item.group !== void 0 ? { group: item.group } : {},
+          ...item.disabled === true ? { disabled: true } : {}
+        }))
+      },
+      events: {
+        onSelect: [{ action: "chat.menuSelect", params: { key: "${event}" } }]
+      }
+    }
+  };
+}
 
 // src/view/ChatShell.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ChatShell({
   menu,
   activeMenuKey,
@@ -3069,7 +3933,7 @@ function ChatShell({
   className,
   onMenuSelect
 }) {
-  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ChatSidebarMenu,
     {
       menu,
@@ -3077,7 +3941,7 @@ function ChatShell({
       onMenuSelect
     }
   ) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     AppShell,
     {
       sidebar: sidebarContent,
@@ -3094,7 +3958,7 @@ function ChatShellDslAdapter({
   onMenuSelect,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ChatShell,
     {
       ...rest,
@@ -3109,39 +3973,45 @@ function registerChatShellComponent(registry) {
 }
 
 // src/view/Chat.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var MENU_ICONS = {
-  plus: import_lucide_react10.Plus,
-  chat: import_lucide_react10.MessageSquare,
-  history: import_lucide_react10.History,
-  settings: import_lucide_react10.Settings,
-  star: import_lucide_react10.Star,
-  search: import_lucide_react10.Search,
-  user: import_lucide_react10.User,
-  folder: import_lucide_react10.Folder
-};
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ChatSidebarMenu({
   menu,
   activeMenuKey,
   onMenuSelect
 }) {
   const drawer = useSidebarDrawer();
-  let lastGroup;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.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 Icon = item.icon !== void 0 ? MENU_ICONS[item.icon] : void 0;
-    const active = item.key === activeMenuKey;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react17.Fragment, { children: [
-      groupLabel !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  const menuRef = (0, import_react18.useRef)(menu);
+  menuRef.current = menu;
+  const selectRef = (0, import_react18.useRef)(onMenuSelect);
+  selectRef.current = onMenuSelect;
+  const drawerRef = (0, import_react18.useRef)(drawer);
+  drawerRef.current = drawer;
+  (0, import_react18.useEffect)(() => {
+    setChatChromeHandlers({
+      menuSelect: (key) => {
+        const item = menuRef.current.find((entry) => entry.key === key);
+        if (item === void 0 || item.disabled === true) {
+          return;
+        }
+        selectRef.current?.(key, item);
+        drawerRef.current?.close();
+      }
+    });
+  }, []);
+  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) => {
+      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)(
         "button",
         {
           type: "button",
           className: `pactor-chat-menu__item${active ? " pactor-chat-menu__item--active" : ""}`,
           disabled: item.disabled === true,
           "aria-current": active ? "true" : void 0,
-          title: drawer?.collapsed ? item.label : void 0,
           onClick: () => {
             if (item.disabled) {
               return;
@@ -3150,21 +4020,26 @@ function ChatSidebarMenu({
             drawer?.close();
           },
           children: [
-            item.icon !== void 0 ? Icon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pactor-chat-menu__icon", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: 15, strokeWidth: 1.7 }) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              "span",
-              {
-                className: "pactor-chat-menu__icon-placeholder",
-                "aria-hidden": true
-              }
-            ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pactor-chat-menu__label", children: item.label }),
-            item.dot === true ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pactor-chat-menu__dot", "aria-hidden": true }) : null,
-            item.badge !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pactor-chat-menu__badge", children: item.badge }) : null
+            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.key);
-  }) });
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react18.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
+      ] }, item.key);
+    }) });
+  })();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    ChromeSlot,
+    {
+      fragment: buildSidebarMenuFragment({ menu, activeMenuKey }),
+      fallback
+    }
+  );
 }
 function Chat({
   title,
@@ -3177,6 +4052,11 @@ function Chat({
   menu,
   activeMenuKey,
   sidebar,
+  toolbarStart,
+  toolbarEnd,
+  composerFooter,
+  composerBottom,
+  hideToolbar,
   headerExtra,
   header,
   headerActions,
@@ -3204,7 +4084,7 @@ function Chat({
   onMenuSelect
 }) {
   const services = useChatServices();
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.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"
@@ -3212,10 +4092,10 @@ function Chat({
     }
   }, [services]);
   if (!services) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.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_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" });
   }
   const sidebarSlot = resolveSlot(sidebar);
-  const sidebarContent = sidebarSlot ?? (menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const sidebarContent = sidebarSlot ?? (menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ChatSidebarMenu,
     {
       menu,
@@ -3223,7 +4103,7 @@ function Chat({
       onMenuSelect
     }
   ) : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ChatComposition,
     {
       services,
@@ -3234,9 +4114,14 @@ function Chat({
       conversationId,
       params,
       className,
-      showHeader: showHeader !== false,
+      showHeader,
       header: resolveSlot(header),
       headerExtra: resolveSlot(headerExtra) ?? services.headerExtra,
+      toolbarStart: resolveSlot(toolbarStart),
+      toolbarEnd: resolveSlot(toolbarEnd),
+      composerFooter: resolveSlot(composerFooter),
+      composerBottom: resolveSlot(composerBottom),
+      hideToolbar,
       headerActions,
       editableTitle,
       onExport,
@@ -3278,7 +4163,7 @@ function ChatDslAdapter({
   onTitleChange,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Chat,
     {
       ...rest,
@@ -3305,11 +4190,11 @@ function registerChatComponent(registry) {
 }
 
 // src/view/ChatLayout.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ChatLayout({ title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pactor-chat-layout", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("header", { className: "pactor-chat-layout__header", children: title ?? "Chat" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("main", { className: "pactor-chat-layout__main", 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 })
   ] });
 }
 var CHAT_LAYOUT_TYPE = "chat";
@@ -3339,8 +4224,6 @@ function registerChatLayout(layoutRegistry) {
   ConversationStore,
   DEFAULT_CHAT_GREETING,
   EmptyState,
-  MENU_ICONS,
-  MESSAGE_ACTION_ICONS,
   MessageActions,
   MessageBubble,
   PartRenderer,