@pactor-app/chat 0.1.0 → 1.1.0

package/dist/index.js

@@ -653,20 +653,34 @@ function createChatRuntime(options = {}) {
 }
 
 // src/dsl-guard.ts
+import { isDslSourceRef } from "@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: node.type }
+      props: { deniedType: type }
     };
   }
-  if (!node.children || node.children.length === 0) {
+  if (node.children === void 0) {
+    return node;
+  }
+  if (!Array.isArray(node.children)) {
+    return {
+      type: CHAT_DENIED_TYPE,
+      props: { deniedType: `${type}(remote)` }
+    };
+  }
+  if (node.children.length === 0) {
     return node;
   }
   return {
     ...node,
-    children: node.children.map((child) => guardChatDsl(child, registry))
+    // 数组中混排的引用元素同样无法静态过白名单：替换为受控占位
+    children: node.children.map(
+      (child) => isDslSourceRef(child) ? { type: CHAT_DENIED_TYPE, props: { deniedType: "(remote)" } } : guardChatDsl(child, registry)
+    )
   };
 }
 
@@ -778,12 +792,12 @@ function useChatAutoScroll({
 }
 
 // src/chat-composition.tsx
-import { useRenderer as useRenderer3 } from "@pactor-app/runtime";
+import { useRenderer as useRenderer4 } from "@pactor-app/runtime";
 import {
-  Component as Component2,
+  Component as Component3,
   isValidElement,
-  useRef as useRef11,
-  useState as useState15,
+  useRef as useRef12,
+  useState as useState14,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
@@ -810,132 +824,283 @@ function useChatModel({
 }
 
 // src/view/AppShell.tsx
-import { Menu, PanelLeft } from "lucide-react";
 import {
-  createContext,
-  useCallback as useCallback2,
-  useContext,
-  useEffect as useEffect2,
-  useState as useState4
-} from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SidebarDrawerContext = createContext(null);
+  Sidebar as UiSidebar,
+  useSidebarDrawer as useUiSidebarDrawer
+} from "@pactor-app/ui/components";
+import { jsx } from "react/jsx-runtime";
 function useSidebarDrawer() {
-  return useContext(SidebarDrawerContext);
+  return useUiSidebarDrawer();
 }
-var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
-function useIsMobileViewport() {
-  const [isMobile, setIsMobile] = useState4(
-    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_MEDIA_QUERY).matches
-  );
-  useEffect2(() => {
-    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] = useState4(false);
-  const isMobile = useIsMobileViewport();
-  const close = useCallback2(() => setDrawerOpen(false), []);
-  const [collapsed, setCollapsed] = useState4(false);
-  const collapsedEffective = collapsible && collapsed && !isMobile;
-  const framed = brand !== void 0 || sidebarFooter !== void 0;
-  const [trackedLocationKey, setTrackedLocationKey] = useState4(locationKey);
-  if (trackedLocationKey !== locationKey) {
-    setTrackedLocationKey(locationKey);
-    setDrawerOpen(false);
-  }
-  useEffect2(() => {
-    if (!drawerOpen) {
-      return;
+function AppShell({
+  sidebar,
+  brand,
+  locationKey,
+  sidebarFooter,
+  collapsible = false,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    UiSidebar,
+    {
+      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__ */ jsx(SidebarDrawerContext.Provider, { value: { close, collapsed: collapsedEffective }, children: /* @__PURE__ */ jsxs("div", { className: `pactor-chat-shell${className ? ` ${className}` : ""}`, children: [
-    drawerOpen ? /* @__PURE__ */ jsx("div", { className: "pactor-chat-shell__scrim", "aria-hidden": true, onClick: close }) : null,
-    /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-          brand !== void 0 && // 桌面品牌行（决策 D3）：brand 左、折叠钮右；移动端由
-          // CSS 隐藏（品牌维持顶栏现状）
-          /* @__PURE__ */ jsxs("div", { className: "pactor-chat-shell__sidebar-header", children: [
-            /* @__PURE__ */ jsx("div", { className: "pactor-chat-shell__brand", children: brand }),
-            collapsible && !isMobile && /* @__PURE__ */ 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__ */ jsx(PanelLeft, { size: 16, strokeWidth: 1.7 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "pactor-chat-shell__sidebar-body", children: sidebar }),
-          sidebarFooter !== void 0 && /* @__PURE__ */ jsx("div", { className: "pactor-chat-shell__sidebar-footer", children: sidebarFooter })
-        ] }) : sidebar
-      }
-    ),
-    /* @__PURE__ */ jsxs("main", { className: "pactor-chat-shell__main", children: [
-      /* @__PURE__ */ jsxs("div", { className: "pactor-chat-shell__topbar", children: [
-        /* @__PURE__ */ 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__ */ jsx(Menu, { size: 18, strokeWidth: 1.7 })
-          }
-        ),
-        brand
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "pactor-chat-shell__content", children })
-    ] })
-  ] }) });
+  );
 }
 
 // src/view/ArtifactPanel.tsx
-import { X } from "lucide-react";
+import { Icon as Icon3 } from "@pactor-app/ui/components";
 import { Registry as Registry2 } from "@pactor-app/core";
 import { MarkdownRenderer as MarkdownRenderer2 } from "@pactor-app/markdown";
-import { DslRenderer as DslRenderer2, useRenderer as useRenderer2 } from "@pactor-app/runtime";
+import { DslRenderer as DslRenderer2, useRenderer as useRenderer3 } from "@pactor-app/runtime";
 import {
-  Component,
+  Component as Component2,
+  useEffect as useEffect2,
   useMemo,
   useRef as useRef3,
-  useState as useState5
+  useState as useState4
 } from "react";
 
 // src/view/PartRenderer.tsx
-import { CircleAlert, PanelRightOpen } from "lucide-react";
+import { Icon } from "@pactor-app/ui/components";
 import { MarkdownRenderer } from "@pactor-app/markdown";
-import { DslRenderer, useRenderer } from "@pactor-app/runtime";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { DslRenderer, useRenderer as useRenderer2 } from "@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
+import { useRenderer } from "@pactor-app/runtime";
+import { Component } from "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
+import { Fragment, jsx as jsx2 } from "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 = useRenderer();
+  } catch {
+    return /* @__PURE__ */ jsx2(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__ */ jsx2(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__ */ jsx2(Fragment, { children: fallback });
+  }
+  const rendered = /* @__PURE__ */ jsx2("div", { className: "pactor-chat-chrome", children: renderer.renderChildren([fragment.node]) });
+  return wrap ? /* @__PURE__ */ jsx2(Fragment, { children: wrap(rendered) }) : rendered;
+}
+var ChromeSlotGuard = class extends 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__ */ jsx2(ChromeSlotGuard, { fallback: props.fallback, children: /* @__PURE__ */ jsx2(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
+import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function ChatDenied({ deniedType }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "pactor-chat-denied", "data-pactor-chat-denied": deniedType, children: [
+  return /* @__PURE__ */ 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}` : ""
   ] });
@@ -944,64 +1109,90 @@ function ChatDslNode({
   node,
   scope
 }) {
-  const renderer = useRenderer();
+  const renderer = useRenderer2();
   const extraScope = scope ? buildChatScope(scope) : void 0;
-  return /* @__PURE__ */ jsx2(Fragment2, { children: renderer.renderChildren([node], extraScope) });
+  return /* @__PURE__ */ jsx3(Fragment2, { children: renderer.renderChildren([node], extraScope) });
 }
 function SmoothText({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ jsx2("div", { className: "pactor-chat-text", children: shown });
+  return /* @__PURE__ */ jsx3("div", { className: "pactor-chat-text", children: shown });
 }
 function SmoothMarkdown({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ jsx2(MarkdownRenderer, { content: shown });
+  return /* @__PURE__ */ jsx3(MarkdownRenderer, { content: shown });
 }
 function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact }) {
   switch (part.type) {
     case "text":
-      return /* @__PURE__ */ jsx2(SmoothText, { content: part.content, streaming });
+      return /* @__PURE__ */ jsx3(SmoothText, { content: part.content, streaming });
     case "markdown":
-      return /* @__PURE__ */ jsx2(SmoothMarkdown, { content: part.content, streaming });
+      return /* @__PURE__ */ jsx3(SmoothMarkdown, { content: part.content, streaming });
     case "thinking":
     case "tool-call":
     case "tool-result":
       return null;
     case "dsl": {
       if (!part.schema || !runtime) {
-        return /* @__PURE__ */ jsx2("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__ */ jsx3(
+          ChromeSlot,
+          {
+            fragment: buildStatusFragment(
+              part.schema ? "DSL \u6E32\u67D3\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "\u5185\u5BB9\u751F\u6210\u4E2D\u2026"
+            ),
+            fallback: /* @__PURE__ */ jsx3("div", { className: "pactor-chat-dsl-pending", children: part.schema ? "DSL \u6E32\u67D3\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "\u5185\u5BB9\u751F\u6210\u4E2D\u2026" })
+          }
+        );
       }
       const guarded = guardChatDsl(part.schema, runtime.context.components);
-      return /* @__PURE__ */ jsx2("div", { className: "pactor-chat-dsl", children: /* @__PURE__ */ jsx2(DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx2(ChatDslNode, { node: guarded, scope }) }) });
+      return /* @__PURE__ */ jsx3("div", { className: "pactor-chat-dsl", children: /* @__PURE__ */ jsx3(DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx3(ChatDslNode, { node: guarded, scope }) }) });
     }
     case "error":
-      return /* @__PURE__ */ jsxs2("div", { className: "pactor-chat-error", role: "alert", children: [
-        /* @__PURE__ */ jsx2(CircleAlert, { size: 14 }),
-        /* @__PURE__ */ jsx2("span", { children: part.message })
-      ] });
+      return /* @__PURE__ */ jsx3(
+        ChromeSlot,
+        {
+          fragment: buildErrorFragment(part.message),
+          fallback: /* @__PURE__ */ jsxs("div", { className: "pactor-chat-error", role: "alert", children: [
+            /* @__PURE__ */ jsx3(Icon, { name: "error", size: 14 }),
+            /* @__PURE__ */ jsx3("span", { children: part.message })
+          ] })
+        }
+      );
     case "status":
-      return /* @__PURE__ */ jsx2("div", { className: "pactor-chat-status", children: part.text });
+      return /* @__PURE__ */ jsx3(
+        ChromeSlot,
+        {
+          fragment: buildStatusFragment(part.text),
+          fallback: /* @__PURE__ */ jsx3("div", { className: "pactor-chat-status", children: part.text })
+        }
+      );
     case "artifact":
-      return /* @__PURE__ */ jsxs2(
-        "div",
+      return /* @__PURE__ */ jsx3(
+        ChromeSlot,
         {
-          className: "pactor-chat-artifact-card",
-          "data-artifact-kind": part.artifact.kind,
-          children: [
-            /* @__PURE__ */ jsx2("span", { className: "pactor-chat-artifact-card__title", children: part.artifact.title }),
-            /* @__PURE__ */ jsx2("span", { className: "pactor-chat-artifact-card__kind", children: part.artifact.kind }),
-            /* @__PURE__ */ jsxs2(
-              "button",
-              {
-                type: "button",
-                className: "pactor-chat-artifact-card__open",
-                onClick: () => onOpenArtifact?.(part.artifact),
-                children: [
-                  /* @__PURE__ */ jsx2(PanelRightOpen, { size: 13, strokeWidth: 1.7 }),
-                  "\u5728\u9762\u677F\u4E2D\u6253\u5F00"
-                ]
-              }
-            )
-          ]
+          fragment: buildArtifactCardFragment(part.artifact),
+          fallback: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "pactor-chat-artifact-card",
+              "data-artifact-kind": part.artifact.kind,
+              children: [
+                /* @__PURE__ */ jsx3("span", { className: "pactor-chat-artifact-card__title", children: part.artifact.title }),
+                /* @__PURE__ */ jsx3("span", { className: "pactor-chat-artifact-card__kind", children: part.artifact.kind }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pactor-chat-artifact-card__open",
+                    onClick: () => onOpenArtifact?.(part.artifact),
+                    children: [
+                      /* @__PURE__ */ jsx3(Icon, { name: "panel-right-open", size: 13, strokeWidth: 1.7 }),
+                      "\u5728\u9762\u677F\u4E2D\u6253\u5F00"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
         }
       );
     default:
@@ -1009,8 +1200,65 @@ function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact
   }
 }
 
+// src/view/chrome/panel-header.tsx
+import { Icon as Icon2 } from "@pactor-app/ui/components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ChatPanelCloseButton() {
+  return /* @__PURE__ */ jsx4(
+    "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__ */ jsx4(Icon2, { 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
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function useArtifactRuntime(safeRegistry, user) {
   return useMemo(() => {
     if (!safeRegistry) {
@@ -1024,7 +1272,7 @@ function useArtifactRuntime(safeRegistry, user) {
     return createChatRuntime({ safeRegistry: components, user });
   }, [safeRegistry, user]);
 }
-var ArtifactDslGuard = class extends Component {
+var ArtifactDslGuard = class extends Component2 {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -1036,12 +1284,12 @@ var ArtifactDslGuard = class extends 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__ */ jsx3("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__ */ jsx5("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 } = useRenderer2();
-  return /* @__PURE__ */ jsx3(Fragment3, { children: renderChildren([node]) });
+  const { renderChildren } = useRenderer3();
+  return /* @__PURE__ */ jsx5(Fragment3, { children: renderChildren([node]) });
 }
 function ArtifactDslContent({
   content,
@@ -1049,10 +1297,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__ */ jsx3("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__ */ jsx5("div", { className: "pactor-chat-denied", children: node ? "DSL \u9884\u89C8\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "DSL \u4EA7\u51FA\u7269\u5185\u5BB9\u65E0\u6548" });
   }
   const guarded = guardChatDsl(node, runtime.context.components);
-  return /* @__PURE__ */ jsx3(DslRenderer2, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx3(ArtifactDslGuard, { children: /* @__PURE__ */ jsx3(ArtifactDslNode, { node: guarded }) }) });
+  return /* @__PURE__ */ jsx5(DslRenderer2, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ jsx5(ArtifactDslGuard, { children: /* @__PURE__ */ jsx5(ArtifactDslNode, { node: guarded }) }) });
 }
 function ArtifactContent({
   artifact,
@@ -1060,16 +1308,16 @@ function ArtifactContent({
 }) {
   switch (artifact.kind) {
     case "markdown":
-      return /* @__PURE__ */ jsx3(MarkdownRenderer2, { content: String(artifact.content) });
+      return /* @__PURE__ */ jsx5(MarkdownRenderer2, { content: String(artifact.content) });
     case "code":
-      return /* @__PURE__ */ jsxs3("div", { className: "pactor-chat-inspector__code", children: [
-        artifact.language ? /* @__PURE__ */ jsx3("span", { className: "pactor-chat-inspector__code-lang", children: artifact.language }) : null,
-        /* @__PURE__ */ jsx3("pre", { children: /* @__PURE__ */ jsx3("code", { children: String(artifact.content) }) })
+      return /* @__PURE__ */ jsxs2("div", { className: "pactor-chat-inspector__code", children: [
+        artifact.language ? /* @__PURE__ */ jsx5("span", { className: "pactor-chat-inspector__code-lang", children: artifact.language }) : null,
+        /* @__PURE__ */ jsx5("pre", { children: /* @__PURE__ */ jsx5("code", { children: String(artifact.content) }) })
       ] });
     case "text":
-      return /* @__PURE__ */ jsx3("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
+      return /* @__PURE__ */ jsx5("pre", { className: "pactor-chat-inspector__text", children: String(artifact.content) });
     case "dsl":
-      return /* @__PURE__ */ jsx3(ArtifactDslContent, { content: artifact.content, runtime });
+      return /* @__PURE__ */ jsx5(ArtifactDslContent, { content: artifact.content, runtime });
     default:
       return null;
   }
@@ -1083,8 +1331,13 @@ function ArtifactPanel({
   className
 }) {
   const runtime = useArtifactRuntime(safeRegistry, user);
+  const closeRef = useRef3(onClose);
+  closeRef.current = onClose;
+  useEffect2(() => {
+    setChatChromeHandlers({ panelClose: () => closeRef.current?.() });
+  }, []);
   const panelRef = useRef3(null);
-  const [width, setWidth] = useState5(null);
+  const [width, setWidth] = useState4(null);
   const handleResizeStart = (event) => {
     event.preventDefault();
     const panel = panelRef.current;
@@ -1110,7 +1363,7 @@ function ArtifactPanel({
     document.addEventListener("pointermove", onMove);
     document.addEventListener("pointerup", onUp);
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     "aside",
     {
       ref: panelRef,
@@ -1118,7 +1371,7 @@ function ArtifactPanel({
       "data-kind": artifact?.kind,
       style: width !== null ? { width: `${width}px` } : void 0,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: "pactor-chat-inspector__resize",
@@ -1128,43 +1381,53 @@ function ArtifactPanel({
             onPointerDown: handleResizeStart
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: "pactor-chat-inspector__header", children: [
-          /* @__PURE__ */ jsx3("span", { className: "pactor-chat-inspector__title", children: artifact?.title ?? "\u4EA7\u51FA\u7269" }),
-          artifact ? /* @__PURE__ */ jsx3("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              className: "pactor-chat-icon-button pactor-chat-inspector__close",
-              "aria-label": "\u5173\u95ED\u9762\u677F",
-              onClick: onClose,
-              children: /* @__PURE__ */ jsx3(X, { size: 16, strokeWidth: 1.7 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "pactor-chat-inspector__body", children: inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ jsx3(ArtifactContent, { artifact, runtime }) : null })
+        /* @__PURE__ */ jsx5("div", { className: "pactor-chat-inspector__header", children: /* @__PURE__ */ jsx5(
+          ChromeSlot,
+          {
+            fragment: buildPanelHeaderFragment({
+              title: artifact?.title ?? "\u4EA7\u51FA\u7269",
+              kind: artifact?.kind ?? "text"
+            }),
+            components: PANEL_HEADER_INTERNAL_COMPONENTS,
+            fallback: /* @__PURE__ */ jsxs2(Fragment3, { children: [
+              /* @__PURE__ */ jsx5("span", { className: "pactor-chat-inspector__title", children: artifact?.title ?? "\u4EA7\u51FA\u7269" }),
+              artifact ? /* @__PURE__ */ jsx5("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  className: "pactor-chat-icon-button pactor-chat-inspector__close",
+                  "aria-label": "\u5173\u95ED\u9762\u677F",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx5(Icon3, { name: "x", size: 16, strokeWidth: 1.7 })
+                }
+              )
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx5("div", { className: "pactor-chat-inspector__body", children: inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ jsx5(ArtifactContent, { artifact, runtime }) : null })
       ]
     }
   );
 }
 
 // src/view/ChatView.tsx
-import { ArrowDown } from "lucide-react";
+import { Icon as Icon9 } from "@pactor-app/ui/components";
 import { Registry as Registry3 } from "@pactor-app/core";
-import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef9, useState as useState13, useSyncExternalStore } from "react";
+import { useEffect as useEffect8, useMemo as useMemo3, useRef as useRef10, useState as useState12, useSyncExternalStore } from "react";
 
 // src/view/Composer.tsx
-import { ArrowUp, FileText, Paperclip, Plus, Square, X as X2 } from "lucide-react";
-import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef6, useState as useState9 } from "react";
+import { Icon as Icon6 } from "@pactor-app/ui/components";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef6, useState as useState8 } from "react";
 
 // src/view/AnchoredPopover.tsx
 import {
   useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef4,
-  useState as useState6
+  useState as useState5
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function AnchoredPopover({
   anchorRect,
   onClose,
@@ -1174,7 +1437,7 @@ function AnchoredPopover({
   sideOffset = 8
 }) {
   const ref = useRef4(null);
-  const [position, setPosition] = useState6(null);
+  const [position, setPosition] = useState5(null);
   useLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -1221,7 +1484,7 @@ function AnchoredPopover({
     position?.below ? "pactor-chat-popover--below" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref,
@@ -1240,19 +1503,44 @@ function AnchoredPopover({
 }
 
 // src/view/ModelChip.tsx
-import { Check, ChevronsUpDown } from "lucide-react";
-import { useRef as useRef5, useState as useState7 } from "react";
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Icon as Icon4 } from "@pactor-app/ui/components";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState6 } from "react";
+
+// 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
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function ModelChip({
   models,
   model,
   onModelChange
 }) {
   const chipRef = useRef5(null);
-  const [anchor, setAnchor] = useState7(null);
+  const [anchor, setAnchor] = useState6(null);
   const currentOption = models.find((option) => option.value === model) ?? models[0];
-  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         ref: chipRef,
@@ -1262,18 +1550,18 @@ function ModelChip({
         "aria-label": "\u9009\u62E9\u6A21\u578B",
         onClick: () => setAnchor(chipRef.current.getBoundingClientRect()),
         children: [
-          /* @__PURE__ */ jsx5("span", { className: "pactor-chat-model-chip__label", children: currentOption.label }),
-          /* @__PURE__ */ jsx5(ChevronsUpDown, { size: 12 })
+          /* @__PURE__ */ jsx7("span", { className: "pactor-chat-model-chip__label", children: currentOption.label }),
+          /* @__PURE__ */ jsx7(Icon4, { name: "chevrons-up-down", size: 12 })
         ]
       }
     ),
-    anchor && /* @__PURE__ */ jsx5(
+    anchor && /* @__PURE__ */ jsx7(
       AnchoredPopover,
       {
         anchorRect: anchor,
         onClose: () => setAnchor(null),
         role: "listbox",
-        children: models.map((option) => /* @__PURE__ */ jsxs4(
+        children: models.map((option) => /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -1285,8 +1573,8 @@ function ModelChip({
               setAnchor(null);
             },
             children: [
-              /* @__PURE__ */ jsx5("span", { className: "pactor-chat-popover__item-label", children: option.label }),
-              option.value === currentOption.value && /* @__PURE__ */ jsx5(Check, { size: 13, className: "pactor-chat-popover__item-check" })
+              /* @__PURE__ */ jsx7("span", { className: "pactor-chat-popover__item-label", children: option.label }),
+              option.value === currentOption.value && /* @__PURE__ */ jsx7(Icon4, { name: "check", size: 13, className: "pactor-chat-popover__item-check" })
             ]
           },
           option.value
@@ -1295,10 +1583,243 @@ function ModelChip({
     )
   ] });
 }
+function ModelSelect({
+  models,
+  model,
+  onModelChange
+}) {
+  const changeRef = useRef5(onModelChange);
+  changeRef.current = onModelChange;
+  useEffect4(() => {
+    setChatChromeHandlers({
+      modelChange: (value) => changeRef.current?.(value)
+    });
+  }, []);
+  return /* @__PURE__ */ jsx7(
+    ChromeSlot,
+    {
+      fragment: buildModelSelectFragment({ models, model }),
+      fallback: /* @__PURE__ */ jsx7(ModelChip, { models, model, onModelChange })
+    }
+  );
+}
+
+// src/view/chrome/composer.tsx
+import { Icon as Icon5 } from "@pactor-app/ui/components";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var ComposerBridgeContext = createContext(
+  null
+);
+function useComposerBridge() {
+  const bridge = 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__ */ jsx8("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
+    const isImage = attachment.mimeType.startsWith("image/");
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "pactor-chat-composer__attachment",
+        "data-attachment-id": attachment.id,
+        onClick: () => onClick?.(attachment),
+        children: [
+          isImage && attachment.url ? /* @__PURE__ */ jsx8("span", { className: "pactor-chat-composer__attachment-thumb", children: /* @__PURE__ */ jsx8("img", { src: attachment.url, alt: attachment.name }) }) : /* @__PURE__ */ jsxs4("span", { className: "pactor-chat-composer__attachment-info", children: [
+            /* @__PURE__ */ jsx8(Icon5, { name: "file-text", size: 14 }),
+            /* @__PURE__ */ jsx8("span", { className: "pactor-chat-composer__attachment-name", children: attachment.name }),
+            attachment.size !== void 0 && /* @__PURE__ */ jsx8("span", { className: "pactor-chat-composer__attachment-size", children: formatSize(attachment.size) })
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "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__ */ jsx8(Icon5, { name: "x", size: 12 })
+            }
+          )
+        ]
+      },
+      attachment.id
+    );
+  }) });
+}
+function ComposerContextChips({
+  chips,
+  onRemove
+}) {
+  if (chips.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx8("div", { className: "pactor-chat-composer__contexts", children: chips.map((chip) => /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      className: "pactor-chat-context-chip",
+      "data-context-id": chip.id,
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "pactor-chat-context-chip__label", children: chip.label }),
+        /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(Icon5, { name: "x", size: 12 })
+          }
+        )
+      ]
+    },
+    `${chip.trigger ?? ""}:${chip.id}`
+  )) });
+}
+function ChatComposerHeader() {
+  const bridge = useComposerBridge();
+  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    bridge.attachments !== void 0 && /* @__PURE__ */ jsx8(
+      ComposerAttachments,
+      {
+        attachments: bridge.attachments,
+        onRemove: bridge.removeAttachment,
+        onClick: bridge.attachmentClick
+      }
+    ),
+    bridge.contextChips !== void 0 && /* @__PURE__ */ jsx8(
+      ComposerContextChips,
+      {
+        chips: bridge.contextChips,
+        onRemove: bridge.removeChip
+      }
+    )
+  ] });
+}
+function ChatComposerToolbarStart() {
+  const bridge = useComposerBridge();
+  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    bridge.toolbarStart,
+    bridge.showPlus && /* @__PURE__ */ jsx8(
+      "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__ */ jsx8(Icon5, { name: "plus", size: 14 })
+      }
+    ),
+    bridge.showAttach && /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-icon-button",
+        title: "\u6DFB\u52A0\u9644\u4EF6",
+        "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
+        onClick: bridge.openFilePicker,
+        children: /* @__PURE__ */ jsx8(Icon5, { name: "paperclip", size: 14 })
+      }
+    )
+  ] });
+}
+function ChatComposerToolbarEnd() {
+  const bridge = useComposerBridge();
+  return /* @__PURE__ */ jsxs4(Fragment5, { children: [
+    bridge.modelChipEnabled && /* @__PURE__ */ jsx8(
+      ModelSelect,
+      {
+        models: bridge.models,
+        model: bridge.model,
+        onModelChange: bridge.modelChange
+      }
+    ),
+    bridge.toolbarEnd,
+    /* @__PURE__ */ jsx8(
+      "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__ */ jsx8(Icon5, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ jsx8(Icon5, { name: "arrow-up", size: 16 })
+      }
+    )
+  ] });
+}
+function ChatComposerFooter() {
+  const bridge = useComposerBridge();
+  return /* @__PURE__ */ jsx8(Fragment5, { 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
-import { useEffect as useEffect4, useState as useState8 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function sourceCacheKey(source) {
   return `${source.service ?? ""}:${JSON.stringify(source.params ?? {})}`;
 }
@@ -1333,8 +1854,8 @@ function ContextSourceList({
   cache,
   onSelect
 }) {
-  const [resolutions, setResolutions] = useState8([]);
-  useEffect4(() => {
+  const [resolutions, setResolutions] = useState7([]);
+  useEffect5(() => {
     let cancelled = false;
     const initial = sources.map(
       (source) => source.items ? { status: "ready", items: source.items } : { status: "loading" }
@@ -1381,10 +1902,10 @@ function ContextSourceList({
   });
   return /* @__PURE__ */ jsxs5("div", { className: "pactor-chat-source-list", children: [
     groups.map(({ source, resolution, items }) => /* @__PURE__ */ jsxs5("div", { className: "pactor-chat-source-list__group", children: [
-      sources.length > 1 && /* @__PURE__ */ jsx6("div", { className: "pactor-chat-source-list__group-label", children: source.label }),
-      resolution.status === "loading" && /* @__PURE__ */ jsx6("div", { className: "pactor-chat-source-list__hint", children: "\u52A0\u8F7D\u4E2D\u2026" }),
-      resolution.status === "error" && /* @__PURE__ */ jsx6("div", { className: "pactor-chat-source-list__error", role: "alert", children: resolution.message }),
-      items.map((item) => /* @__PURE__ */ jsx6(
+      sources.length > 1 && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__group-label", children: source.label }),
+      resolution.status === "loading" && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__hint", children: "\u52A0\u8F7D\u4E2D\u2026" }),
+      resolution.status === "error" && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__error", role: "alert", children: resolution.message }),
+      items.map((item) => /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -1395,22 +1916,13 @@ function ContextSourceList({
         item.id
       ))
     ] }, `${source.trigger}:${source.label}`)),
-    totalMatched === 0 && groups.every(({ resolution }) => resolution.status === "ready") && /* @__PURE__ */ jsx6("div", { className: "pactor-chat-source-list__hint", children: "\u65E0\u5339\u914D\u9879" })
+    totalMatched === 0 && groups.every(({ resolution }) => resolution.status === "ready") && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-source-list__hint", children: "\u65E0\u5339\u914D\u9879" })
   ] });
 }
 
 // src/view/Composer.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "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);
@@ -1439,10 +1951,12 @@ function Composer({
   contextSources,
   contextChips,
   onContextChipsChange,
-  callService
+  callService,
+  composerFooter,
+  hideToolbar = false
 }) {
-  const [text, setText] = useState9("");
-  const [dragOver, setDragOver] = useState9(false);
+  const [text, setText] = useState8("");
+  const [dragOver, setDragOver] = useState8(false);
   const inputRef = useRef6(null);
   const fileInputRef = useRef6(null);
   const plusButtonRef = useRef6(null);
@@ -1458,8 +1972,8 @@ function Composer({
   );
   const builtinMentionEnabled = onMentionTrigger === void 0 && mentionSources.length > 0;
   const builtinPlusEnabled = onPlusMenu === void 0 && plusSources.length > 0;
-  const [mentionState, setMentionState] = useState9(null);
-  const [plusAnchor, setPlusAnchor] = useState9(null);
+  const [mentionState, setMentionState] = useState8(null);
+  const [plusAnchor, setPlusAnchor] = useState8(null);
   const sourceCacheRef = useRef6(null);
   if (sourceCacheRef.current === null) {
     sourceCacheRef.current = /* @__PURE__ */ new Map();
@@ -1494,105 +2008,147 @@ function Composer({
     onSend?.(value);
     setText("");
   };
-  const handleChange = (event) => {
-    const value = event.target.value;
+  const sendRef = useRef6(send);
+  sendRef.current = send;
+  useLayoutEffect3(() => {
+    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__ */ jsxs6(
-    "div",
+  const showToolbar = !hideToolbar && (toolbarStart !== void 0 || toolbarEnd !== void 0 || onPlusMenu !== void 0 || builtinPlusEnabled || onAttachFiles !== void 0 || modelChipEnabled);
+  const fileInputNode = onAttachFiles ? /* @__PURE__ */ jsx10(
+    "input",
     {
-      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) {
+      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__ */ jsxs6(Fragment6, { children: [
+    builtinMentionEnabled && mentionState && /* @__PURE__ */ jsx10(
+      AnchoredPopover,
+      {
+        anchorRect: mentionState.anchorRect,
+        onClose: () => setMentionState(null),
+        role: "listbox",
+        children: /* @__PURE__ */ jsx10(
+          ContextSourceList,
+          {
+            sources: mentionSources,
+            query: mentionState.query,
+            callService,
+            cache: sourceCacheRef.current,
+            onSelect: handleSelectContext
+          }
+        )
+      }
+    ),
+    builtinPlusEnabled && plusAnchor && /* @__PURE__ */ jsx10(
+      AnchoredPopover,
+      {
+        anchorRect: plusAnchor,
+        onClose: () => setPlusAnchor(null),
+        role: "listbox",
+        children: /* @__PURE__ */ jsx10(
+          ContextSourceList,
+          {
+            sources: plusSources,
+            query: "",
+            callService,
+            cache: sourceCacheRef.current,
+            onSelect: handleSelectContext
+          }
+        )
+      }
+    )
+  ] });
+  const fallback = /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `pactor-chat-composer${dragOver ? " pactor-chat-composer--dragover" : ""}`,
+      ...dragHandlers,
       children: [
-        attachments !== void 0 && attachments.length > 0 && /* @__PURE__ */ jsx7("div", { className: "pactor-chat-composer__attachments", children: attachments.map((attachment) => {
-          const isImage = attachment.mimeType.startsWith("image/");
-          return /* @__PURE__ */ jsxs6(
-            "div",
-            {
-              className: "pactor-chat-composer__attachment",
-              "data-attachment-id": attachment.id,
-              onClick: () => onAttachmentClick?.(attachment),
-              children: [
-                isImage && attachment.url ? /* @__PURE__ */ jsx7("span", { className: "pactor-chat-composer__attachment-thumb", children: /* @__PURE__ */ jsx7("img", { src: attachment.url, alt: attachment.name }) }) : /* @__PURE__ */ jsxs6("span", { className: "pactor-chat-composer__attachment-info", children: [
-                  /* @__PURE__ */ jsx7(FileText, { size: 14 }),
-                  /* @__PURE__ */ jsx7("span", { className: "pactor-chat-composer__attachment-name", children: attachment.name }),
-                  attachment.size !== void 0 && /* @__PURE__ */ jsx7("span", { className: "pactor-chat-composer__attachment-size", children: formatSize(attachment.size) })
-                ] }),
-                /* @__PURE__ */ jsx7(
-                  "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__ */ jsx7(X2, { size: 12 })
-                  }
-                )
-              ]
-            },
-            attachment.id
-          );
-        }) }),
-        contextChips !== void 0 && contextChips.length > 0 && /* @__PURE__ */ jsx7("div", { className: "pactor-chat-composer__contexts", children: contextChips.map((chip) => /* @__PURE__ */ jsxs6(
-          "span",
+        attachments !== void 0 && /* @__PURE__ */ jsx10(
+          ComposerAttachments,
           {
-            className: "pactor-chat-context-chip",
-            "data-context-id": chip.id,
-            children: [
-              /* @__PURE__ */ jsx7("span", { className: "pactor-chat-context-chip__label", children: chip.label }),
-              /* @__PURE__ */ jsx7(
-                "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__ */ jsx7(X2, { size: 12 })
-                }
+            attachments,
+            onRemove: (id) => onAttachmentsChange?.(attachments.filter((a) => a.id !== id)),
+            onClick: onAttachmentClick
+          }
+        ),
+        contextChips !== void 0 && /* @__PURE__ */ jsx10(
+          ComposerContextChips,
+          {
+            chips: contextChips,
+            onRemove: (chip) => onContextChipsChange?.(
+              contextChips.filter(
+                (existing) => !(existing.id === chip.id && existing.trigger === chip.trigger)
               )
-            ]
-          },
-          `${chip.trigger ?? ""}:${chip.id}`
-        )) }),
+            )
+          }
+        ),
         /* @__PURE__ */ jsxs6("div", { className: "pactor-chat-composer__row", children: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx10(
             "textarea",
             {
               ref: inputRef,
@@ -1609,10 +2165,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) => {
@@ -1626,7 +2180,7 @@ function Composer({
               }
             }
           ),
-          /* @__PURE__ */ jsx7(
+          hideToolbar ? null : /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -1635,14 +2189,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__ */ jsx7(Square, { size: 14, fill: "currentColor" }) : /* @__PURE__ */ jsx7(ArrowUp, { size: 16 })
+              children: streaming ? /* @__PURE__ */ jsx10(Icon6, { name: "square", size: 14, className: "pactor-chat-icon-fill" }) : /* @__PURE__ */ jsx10(Icon6, { name: "arrow-up", size: 16 })
             }
           )
         ] }),
         showToolbar && /* @__PURE__ */ jsxs6("div", { className: "pactor-chat-composer__toolbar", children: [
           toolbarStart,
-          /* @__PURE__ */ jsx7("span", { className: "pactor-chat-composer__toolbar-spacer" }),
-          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx10("span", { className: "pactor-chat-composer__toolbar-spacer" }),
+          (onPlusMenu || builtinPlusEnabled) && /* @__PURE__ */ jsx10(
             "button",
             {
               ref: plusButtonRef,
@@ -1658,10 +2212,10 @@ function Composer({
                   setPlusAnchor(rect);
                 }
               },
-              children: /* @__PURE__ */ jsx7(Plus, { size: 14 })
+              children: /* @__PURE__ */ jsx10(Icon6, { name: "plus", size: 14 })
             }
           ),
-          onAttachFiles && /* @__PURE__ */ jsx7(
+          onAttachFiles && /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -1669,11 +2223,11 @@ function Composer({
               title: "\u6DFB\u52A0\u9644\u4EF6",
               "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
               onClick: () => fileInputRef.current?.click(),
-              children: /* @__PURE__ */ jsx7(Paperclip, { size: 14 })
+              children: /* @__PURE__ */ jsx10(Icon6, { name: "paperclip", size: 14 })
             }
           ),
-          modelChipEnabled && /* @__PURE__ */ jsx7(
-            ModelChip,
+          modelChipEnabled && /* @__PURE__ */ jsx10(
+            ModelSelect,
             {
               models,
               model,
@@ -1682,111 +2236,206 @@ function Composer({
           ),
           toolbarEnd
         ] }),
-        onAttachFiles && /* @__PURE__ */ jsx7(
-          "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__ */ jsx7(
-          AnchoredPopover,
-          {
-            anchorRect: mentionState.anchorRect,
-            onClose: () => setMentionState(null),
-            role: "listbox",
-            children: /* @__PURE__ */ jsx7(
-              ContextSourceList,
-              {
-                sources: mentionSources,
-                query: mentionState.query,
-                callService,
-                cache: sourceCacheRef.current,
-                onSelect: handleSelectContext
-              }
-            )
-          }
-        ),
-        builtinPlusEnabled && plusAnchor && /* @__PURE__ */ jsx7(
-          AnchoredPopover,
-          {
-            anchorRect: plusAnchor,
-            onClose: () => setPlusAnchor(null),
-            role: "listbox",
-            children: /* @__PURE__ */ jsx7(
-              ContextSourceList,
-              {
-                sources: plusSources,
-                query: "",
-                callService,
-                cache: sourceCacheRef.current,
-                onSelect: handleSelectContext
-              }
-            )
-          }
-        )
+        composerFooter !== void 0 && composerFooter !== null ? /* @__PURE__ */ jsx10("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__ */ jsx10(
+    ChromeSlot,
+    {
+      fragment: buildComposerFragment({
+        placeholder,
+        disabled,
+        hasFooter: composerFooter !== void 0 && composerFooter !== null,
+        hideToolbar
+      }),
+      components: COMPOSER_INTERNAL_COMPONENTS,
+      fallback,
+      wrap: (children) => /* @__PURE__ */ jsx10(ComposerBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ jsxs6(
+        "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
-import { jsx as jsx8, jsxs as jsxs7 } from "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
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_CHAT_GREETING = "\u4F60\u597D\uFF0C\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u4F60\uFF1F";
+function suggestionLabel2(suggestion) {
+  return typeof suggestion === "string" ? suggestion : suggestion.label;
+}
+function suggestionPrompt2(suggestion) {
+  return typeof suggestion === "string" ? suggestion : suggestion.prompt ?? suggestion.label;
+}
+function EmptyStateFallback({
   subtitle,
   suggestions,
-  onSuggestionClick
+  onSuggestionClick,
+  greeting
 }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "pactor-chat-empty", children: [
-    /* @__PURE__ */ jsx8("div", { className: "pactor-chat-empty__greeting", children: greeting }),
-    subtitle && /* @__PURE__ */ jsx8("div", { className: "pactor-chat-empty__subtitle", children: subtitle }),
-    suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx8("div", { className: "pactor-chat-empty__suggestions", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
+    /* @__PURE__ */ jsx11("div", { className: "pactor-chat-empty__greeting", children: greeting }),
+    subtitle && /* @__PURE__ */ jsx11("div", { className: "pactor-chat-empty__subtitle", children: subtitle }),
+    suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx11("div", { className: "pactor-chat-empty__suggestions", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx11(
       "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__ */ jsx11("div", { className: "pactor-chat-empty", children: /* @__PURE__ */ jsx11(
+    ChromeSlot,
+    {
+      fragment: buildEmptyStateFragment({ greeting, subtitle, suggestions }),
+      fallback: /* @__PURE__ */ jsx11(
+        EmptyStateFallback,
+        {
+          greeting,
+          subtitle,
+          suggestions,
+          onSuggestionClick
+        }
+      )
+    }
+  ) });
+}
 
 // src/view/MessageBubble.tsx
-import { useRef as useRef8, useState as useState12 } from "react";
+import { useRef as useRef9, useState as useState11 } from "react";
 
 // src/view/ActivityTrace.tsx
-import {
-  Brain,
-  CheckCircle2,
-  ChevronRight,
-  Clock,
-  Loader2,
-  XCircle
-} from "lucide-react";
+import { Icon as Icon7 } from "@pactor-app/ui/components";
 import { MarkdownRenderer as MarkdownRenderer3 } from "@pactor-app/markdown";
-import { useEffect as useEffect5, useRef as useRef7, useState as useState10 } from "react";
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState9 } from "react";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function usePinnedCollapse(autoOpen) {
-  const [state, setState] = useState10("auto");
+  const [state, setState] = useState9("auto");
   const open = state === "auto" ? autoOpen : state === "pinned-open";
   const toggle = () => {
     setState(open ? "pinned-closed" : "pinned-open");
@@ -1812,8 +2461,8 @@ function statusText(message, mode, toolCount) {
 }
 function useElapsedSeconds(startedAt, active) {
   const compute = () => Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
-  const [elapsed, setElapsed] = useState10(compute);
-  useEffect5(() => {
+  const [elapsed, setElapsed] = useState9(compute);
+  useEffect6(() => {
     if (!active) {
       setElapsed(compute());
       return;
@@ -1827,15 +2476,15 @@ function useElapsedSeconds(startedAt, active) {
 }
 function TraceStatusIcon({ status }) {
   if (status === "running") {
-    return /* @__PURE__ */ jsx9(Loader2, { size: 13, className: "pactor-chat-spin" });
+    return /* @__PURE__ */ jsx12(Icon7, { name: "loading", size: 13, className: "pactor-chat-spin" });
   }
   if (status === "success") {
-    return /* @__PURE__ */ jsx9(CheckCircle2, { size: 13 });
+    return /* @__PURE__ */ jsx12(Icon7, { name: "check-circle", size: 13 });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ jsx9(XCircle, { size: 13 });
+    return /* @__PURE__ */ jsx12(Icon7, { name: "x-circle", size: 13 });
   }
-  return /* @__PURE__ */ jsx9(Clock, { size: 13 });
+  return /* @__PURE__ */ jsx12(Icon7, { name: "clock", size: 13 });
 }
 function summarizeArgs(args) {
   if (args === void 0) {
@@ -1864,7 +2513,7 @@ function formatDetail(value) {
   }
 }
 function TraceRow({ entry }) {
-  const [open, setOpen] = useState10(false);
+  const [open, setOpen] = useState9(false);
   const summary = summarizeArgs(entry.args);
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -1881,16 +2530,16 @@ function TraceRow({ entry }) {
             "aria-expanded": open,
             onClick: () => setOpen((value) => !value),
             children: [
-              /* @__PURE__ */ jsx9("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx9(ChevronRight, { size: 12 }) }),
-              /* @__PURE__ */ jsx9("span", { className: "pactor-chat-trace__entry-icon", children: /* @__PURE__ */ jsx9(TraceStatusIcon, { status: entry.status }) }),
-              /* @__PURE__ */ jsx9("span", { className: "pactor-chat-trace__entry-title", children: entry.title ?? entry.name }),
-              summary && /* @__PURE__ */ jsx9("span", { className: "pactor-chat-trace__entry-args", children: summary })
+              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx12(Icon7, { name: "chevron-right", size: 12 }) }),
+              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__entry-icon", children: /* @__PURE__ */ jsx12(TraceStatusIcon, { status: entry.status }) }),
+              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__entry-title", children: entry.title ?? entry.name }),
+              summary && /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__entry-args", children: summary })
             ]
           }
         ),
         open && /* @__PURE__ */ jsxs8("div", { className: "pactor-chat-trace__entry-body", children: [
-          entry.args !== void 0 && /* @__PURE__ */ jsx9("pre", { className: "pactor-chat-trace__entry-detail", children: formatDetail(entry.args) }),
-          /* @__PURE__ */ jsx9("pre", { className: "pactor-chat-trace__entry-detail", children: entry.status === "failed" ? entry.error ?? "\u6267\u884C\u5931\u8D25" : formatDetail(entry.result) })
+          entry.args !== void 0 && /* @__PURE__ */ jsx12("pre", { className: "pactor-chat-trace__entry-detail", children: formatDetail(entry.args) }),
+          /* @__PURE__ */ jsx12("pre", { className: "pactor-chat-trace__entry-detail", children: entry.status === "failed" ? entry.error ?? "\u6267\u884C\u5931\u8D25" : formatDetail(entry.result) })
         ] })
       ]
     }
@@ -1917,13 +2566,13 @@ function ThinkingCard({
             "aria-expanded": open,
             onClick: toggle,
             children: [
-              /* @__PURE__ */ jsx9("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx9(ChevronRight, { size: 12 }) }),
-              /* @__PURE__ */ jsx9("span", { className: "pactor-chat-thinking__icon", children: partStreaming ? /* @__PURE__ */ jsx9(Loader2, { size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx9(Brain, { size: 13 }) }),
-              /* @__PURE__ */ jsx9("span", { children: "\u601D\u8003\u8FC7\u7A0B" })
+              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx12(Icon7, { name: "chevron-right", size: 12 }) }),
+              /* @__PURE__ */ jsx12("span", { className: "pactor-chat-thinking__icon", children: partStreaming ? /* @__PURE__ */ jsx12(Icon7, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx12(Icon7, { name: "brain", size: 13 }) }),
+              /* @__PURE__ */ jsx12("span", { children: "\u601D\u8003\u8FC7\u7A0B" })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-thinking__body", children: /* @__PURE__ */ jsx9(MarkdownRenderer3, { content: part.content }) })
+        open && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-thinking__body", children: /* @__PURE__ */ jsx12(MarkdownRenderer3, { content: part.content }) })
       ]
     }
   );
@@ -1945,9 +2594,9 @@ function ActivityTrace({ message }) {
     message.createdAt ?? mountTimeRef.current,
     streaming
   );
-  const header = /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsx9("span", { className: "pactor-chat-trace__status-icon", children: streaming ? /* @__PURE__ */ jsx9(Loader2, { size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx9(CheckCircle2, { size: 13 }) }),
-    /* @__PURE__ */ jsx9(
+  const header = /* @__PURE__ */ jsxs8(Fragment8, { children: [
+    /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__status-icon", children: streaming ? /* @__PURE__ */ jsx12(Icon7, { name: "loading", size: 13, className: "pactor-chat-spin" }) : /* @__PURE__ */ jsx12(Icon7, { name: "check-circle", size: 13 }) }),
+    /* @__PURE__ */ jsx12(
       "span",
       {
         className: `pactor-chat-trace__status-text${streaming ? " pactor-chat-trace__status-text--breathing" : ""}`,
@@ -1958,10 +2607,10 @@ function ActivityTrace({ message }) {
       elapsed,
       "s"
     ] }),
-    entries.length > 0 && /* @__PURE__ */ jsx9("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx9(ChevronRight, { size: 12 }) })
+    entries.length > 0 && /* @__PURE__ */ jsx12("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ jsx12(Icon7, { name: "chevron-right", size: 12 }) })
   ] });
   return /* @__PURE__ */ jsxs8("div", { className: "pactor-chat-trace", "data-open": open, children: [
-    entries.length > 0 ? /* @__PURE__ */ jsx9(
+    entries.length > 0 ? /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
@@ -1970,8 +2619,8 @@ function ActivityTrace({ message }) {
         onClick: toggle,
         children: header
       }
-    ) : /* @__PURE__ */ jsx9("div", { className: "pactor-chat-trace__header", children: header }),
-    thinkingParts.map((part, index) => /* @__PURE__ */ jsx9(
+    ) : /* @__PURE__ */ jsx12("div", { className: "pactor-chat-trace__header", children: header }),
+    thinkingParts.map((part, index) => /* @__PURE__ */ jsx12(
       ThinkingCard,
       {
         part,
@@ -1979,36 +2628,66 @@ function ActivityTrace({ message }) {
       },
       part.id ?? index
     )),
-    open && entries.length > 0 && /* @__PURE__ */ jsx9("div", { className: "pactor-chat-trace__entries", children: entries.map((entry) => /* @__PURE__ */ jsx9(TraceRow, { entry }, entry.callIndex)) })
+    open && entries.length > 0 && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-trace__entries", children: entries.map((entry) => /* @__PURE__ */ jsx12(TraceRow, { entry }, entry.callIndex)) })
   ] });
 }
 
 // src/view/MessageActions.tsx
-import {
-  Bookmark,
-  Check as Check2,
-  Copy,
-  HelpCircle,
-  Pencil,
-  Quote,
-  RotateCcw,
-  Share2,
-  ThumbsDown,
-  ThumbsUp
-} from "lucide-react";
-import { useState as useState11 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var MESSAGE_ACTION_ICONS = {
-  copy: Copy,
-  check: Check2,
-  "rotate-ccw": RotateCcw,
-  pencil: Pencil,
-  quote: Quote,
-  "thumbs-up": ThumbsUp,
-  "thumbs-down": ThumbsDown,
-  share: Share2,
-  bookmark: Bookmark
-};
+import { Icon as Icon8 } from "@pactor-app/ui/components";
+import { useEffect as useEffect7, useRef as useRef8, useState as useState10 } from "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
+import { jsx as jsx13 } from "react/jsx-runtime";
 var BUILTIN_ACTION_DEFAULTS = {
   copy: {
     label: "\u590D\u5236",
@@ -2081,7 +2760,21 @@ function MessageActions({
   callService,
   onMessageAction
 }) {
-  const [copied, setCopied] = useState11(false);
+  const [copied, setCopied] = useState10(false);
+  const dispatchRef = useRef8(
+    () => {
+    }
+  );
+  const visibleActionsRef = useRef8([]);
+  useEffect7(() => {
+    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));
@@ -2141,41 +2834,53 @@ function MessageActions({
     }
     onMessageAction?.(action.id, message);
   };
-  return /* @__PURE__ */ jsx10(
+  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__ */ jsx13(
+      "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__ */ jsx13(Icon8, { name: iconName, size: 14 }) : /* @__PURE__ */ jsx13(Icon8, { name: "help-circle", size: 14 })
+      },
+      action.id
+    );
+  });
+  return /* @__PURE__ */ jsx13(
     "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__ */ jsx10(
-          "button",
-          {
-            type: "button",
-            className: "pactor-chat-icon-button",
-            title: label,
-            "aria-label": label,
-            "data-message-action": action.id,
-            onClick: () => dispatch(action),
-            children: Icon ? /* @__PURE__ */ jsx10(Icon, { size: 14 }) : /* @__PURE__ */ jsx10(HelpCircle, { size: 14, "data-icon-placeholder": "true" })
-          },
-          action.id
-        );
-      })
+      children: /* @__PURE__ */ jsx13(
+        ChromeSlot,
+        {
+          fragment: buildMessageActionsFragment({
+            actions: visibleActions,
+            copied,
+            token: message.id
+          }),
+          fallback: buttons
+        }
+      )
     }
   );
 }
 
 // src/view/MessageBubble.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function MessageEditForm({
   initialText,
   onConfirm,
   onCancel
 }) {
-  const [text, setText] = useState12(initialText);
+  const [text, setText] = useState11(initialText);
   const confirm = () => {
     const value = text.trim();
     if (!value) {
@@ -2184,7 +2889,7 @@ function MessageEditForm({
     onConfirm(value);
   };
   return /* @__PURE__ */ jsxs9("div", { className: "pactor-chat-message__edit", children: [
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx14(
       "textarea",
       {
         className: "pactor-chat-message__edit-input",
@@ -2203,7 +2908,7 @@ function MessageEditForm({
       }
     ),
     /* @__PURE__ */ jsxs9("div", { className: "pactor-chat-message__edit-actions", children: [
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -2213,7 +2918,7 @@ function MessageEditForm({
           children: "\u53D1\u9001"
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -2239,7 +2944,7 @@ function MessageBubble({
   onMessageAction,
   onOpenArtifact
 }) {
-  const [editing, setEditing] = useState12(false);
+  const [editing, setEditing] = useState11(false);
   const bubbleScope = {
     conversation: scope?.conversation ?? {},
     message: { id: message.id },
@@ -2247,7 +2952,7 @@ function MessageBubble({
   };
   const streaming = message.status === "streaming";
   const live = message.status === "pending" || message.status === "streaming";
-  const wasLiveRef = useRef8(live);
+  const wasLiveRef = useRef9(live);
   if (live) {
     wasLiveRef.current = true;
   }
@@ -2261,7 +2966,7 @@ function MessageBubble({
       "data-message-id": message.id,
       "data-message-status": message.status,
       children: [
-        editing ? /* @__PURE__ */ jsx11(
+        editing ? /* @__PURE__ */ jsx14(
           MessageEditForm,
           {
             initialText: collectMessageText(message),
@@ -2272,8 +2977,8 @@ function MessageBubble({
             onCancel: () => setEditing(false)
           }
         ) : /* @__PURE__ */ jsxs9("div", { className: "pactor-chat-message__body", children: [
-          showTrace && /* @__PURE__ */ jsx11(ActivityTrace, { message }),
-          message.parts.length === 0 && message.status === "pending" && message.role !== "assistant" ? /* @__PURE__ */ jsx11("span", { className: "pactor-chat-message__pending", children: "\u2026" }) : message.parts.map((part, index) => /* @__PURE__ */ jsx11(
+          showTrace && /* @__PURE__ */ jsx14(ActivityTrace, { message }),
+          message.parts.length === 0 && message.status === "pending" && message.role !== "assistant" ? /* @__PURE__ */ jsx14("span", { className: "pactor-chat-message__pending", children: "\u2026" }) : message.parts.map((part, index) => /* @__PURE__ */ jsx14(
             PartRenderer,
             {
               part,
@@ -2285,7 +2990,7 @@ function MessageBubble({
             part.id ?? index
           ))
         ] }),
-        !editing && /* @__PURE__ */ jsx11(
+        !editing && /* @__PURE__ */ jsx14(
           MessageActions,
           {
             message,
@@ -2305,7 +3010,7 @@ function MessageBubble({
 }
 
 // src/view/ChatView.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function lastContentLength(messages) {
   const last = messages[messages.length - 1];
   if (!last) {
@@ -2339,6 +3044,8 @@ function ChatView({
   onAttachmentClick,
   toolbarStart,
   toolbarEnd,
+  composerFooter,
+  hideToolbar,
   onMentionTrigger,
   onPlusMenu,
   models,
@@ -2349,7 +3056,8 @@ function ChatView({
   onContextsChange,
   callService,
   messageActions,
-  onMessageAction
+  onMessageAction,
+  composerBottom
 }) {
   const messages = useSyncExternalStore(
     (listener) => store.subscribe(listener),
@@ -2379,8 +3087,8 @@ function ChatView({
     () => ({ conversation: { id: conversationId }, params }),
     [conversationId, params]
   );
-  const notifiedArtifactsRef = useRef9(/* @__PURE__ */ new Set());
-  useEffect6(() => {
+  const notifiedArtifactsRef = useRef10(/* @__PURE__ */ new Set());
+  useEffect8(() => {
     if (!onArtifact) {
       return;
     }
@@ -2399,7 +3107,7 @@ function ChatView({
       });
     }
   }, [messages, onArtifact]);
-  const abortRef = useRef9(null);
+  const abortRef = useRef10(null);
   const { containerRef, isFollowing, scrollToBottom } = useChatAutoScroll({
     messageCount: messages.length,
     lastContentLength: lastContentLength(messages),
@@ -2410,7 +3118,7 @@ function ChatView({
     model,
     onModelChange
   });
-  const [contextChips, setContextChips] = useState13([]);
+  const [contextChips, setContextChips] = useState12([]);
   const handleContextChipsChange = (chips) => {
     setContextChips(chips);
     onContextsChange?.(chips);
@@ -2442,6 +3150,16 @@ function ChatView({
     abortRef.current?.abort();
     abortRef.current = null;
   };
+  const handleSendRef = useRef10(handleSend);
+  handleSendRef.current = handleSend;
+  const onOpenArtifactRef = useRef10(onOpenArtifact);
+  onOpenArtifactRef.current = onOpenArtifact;
+  useEffect8(() => {
+    setChatChromeHandlers({
+      sendSuggestion: (text) => handleSendRef.current(text),
+      openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact)
+    });
+  }, []);
   const handleRegenerate = () => {
     if (!transport) {
       return;
@@ -2459,7 +3177,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__ */ jsx12(
+  const composerNode = /* @__PURE__ */ jsx15(
     Composer,
     {
       onSend: handleSend,
@@ -2471,6 +3189,8 @@ function ChatView({
       onAttachmentClick,
       toolbarStart,
       toolbarEnd,
+      composerFooter,
+      hideToolbar,
       onMentionTrigger,
       onPlusMenu,
       models: modelPlacement === "header" ? void 0 : models,
@@ -2482,6 +3202,10 @@ function ChatView({
       callService
     }
   );
+  const composerDock = /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-view__composer-dock", children: [
+    composerNode,
+    composerBottom !== void 0 && composerBottom !== null ? /* @__PURE__ */ jsx15("div", { className: "pactor-chat-view__composer-bottom", children: composerBottom }) : null
+  ] });
   return /* @__PURE__ */ jsxs10(
     "div",
     {
@@ -2489,7 +3213,7 @@ function ChatView({
       children: [
         /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-messages", ref: containerRef, children: [
           isEmpty ? /* @__PURE__ */ jsxs10("div", { className: "pactor-chat-view__empty-stack", children: [
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx15(
               EmptyState,
               {
                 greeting,
@@ -2498,8 +3222,8 @@ function ChatView({
                 onSuggestionClick: handleSend
               }
             ),
-            composerNode
-          ] }) : messages.map((message) => /* @__PURE__ */ jsx12(
+            composerDock
+          ] }) : messages.map((message) => /* @__PURE__ */ jsx15(
             MessageBubble,
             {
               message,
@@ -2523,21 +3247,21 @@ function ChatView({
               className: "pactor-chat-scroll-bottom",
               onClick: scrollToBottom,
               children: [
-                /* @__PURE__ */ jsx12(ArrowDown, { size: 13 }),
+                /* @__PURE__ */ jsx15(Icon9, { name: "arrow-down", size: 13 }),
                 "\u56DE\u5230\u5E95\u90E8"
               ]
             }
           )
         ] }),
-        !isEmpty && composerNode
+        !isEmpty && composerDock
       ]
     }
   );
 }
 
 // src/view/WorkspaceHeader.tsx
-import { Download, Moon, Sun, Trash2 } from "lucide-react";
-import { useRef as useRef10, useState as useState14 } from "react";
+import { Icon as Icon10 } from "@pactor-app/ui/components";
+import { useEffect as useEffect9, useRef as useRef11, useState as useState13 } from "react";
 
 // src/export-markdown.ts
 var ROLE_LABELS = {
@@ -2569,8 +3293,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
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function readCurrentTheme() {
   if (typeof document === "undefined") {
     return "light";
@@ -2590,10 +3358,10 @@ function WorkspaceHeader({
   onTitleChange
 }) {
   const hasActions = headerActions !== void 0 && headerActions.length > 0;
-  const [overrideTitle, setOverrideTitle] = useState14(null);
-  const [editing, setEditing] = useState14(false);
-  const [draft, setDraft] = useState14("");
-  const prevTitleRef = useRef10(title);
+  const [overrideTitle, setOverrideTitle] = useState13(null);
+  const [editing, setEditing] = useState13(false);
+  const [draft, setDraft] = useState13("");
+  const prevTitleRef = useRef11(title);
   if (prevTitleRef.current !== title) {
     prevTitleRef.current = title;
     if (overrideTitle !== null) {
@@ -2601,7 +3369,7 @@ function WorkspaceHeader({
     }
   }
   const displayTitle = overrideTitle ?? title;
-  const [theme, setTheme] = useState14(readCurrentTheme);
+  const [theme, setTheme] = useState13(readCurrentTheme);
   const commitTitle = () => {
     setEditing(false);
     const next = draft.trim();
@@ -2628,8 +3396,24 @@ function WorkspaceHeader({
     store.clear();
     onClear?.();
   };
+  const handlersRef = useRef11({ handleExport, handleTheme, handleClear });
+  handlersRef.current = { handleExport, handleTheme, handleClear };
+  useEffect9(() => {
+    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__ */ jsx13(
+    export: /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -2637,11 +3421,11 @@ function WorkspaceHeader({
         title: "\u5BFC\u51FA Markdown",
         "aria-label": "\u5BFC\u51FA Markdown",
         onClick: handleExport,
-        children: /* @__PURE__ */ jsx13(Download, { size: 15 })
+        children: /* @__PURE__ */ jsx16(Icon10, { name: "download", size: 15 })
       },
       "export"
     ),
-    theme: /* @__PURE__ */ jsx13(
+    theme: /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -2649,11 +3433,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__ */ jsx13(Sun, { size: 15 }) : /* @__PURE__ */ jsx13(Moon, { size: 15 })
+        children: theme === "dark" ? /* @__PURE__ */ jsx16(Icon10, { name: "sun", size: 15 }) : /* @__PURE__ */ jsx16(Icon10, { name: "moon", size: 15 })
       },
       "theme"
     ),
-    clear: /* @__PURE__ */ jsx13(
+    clear: /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -2661,12 +3445,12 @@ function WorkspaceHeader({
         title: "\u6E05\u7A7A\u4F1A\u8BDD",
         "aria-label": "\u6E05\u7A7A\u4F1A\u8BDD",
         onClick: handleClear,
-        children: /* @__PURE__ */ jsx13(Trash2, { size: 15 })
+        children: /* @__PURE__ */ jsx16(Icon10, { name: "trash", size: 15 })
       },
       "clear"
     )
   };
-  const titleNode = editableTitle ? editing ? /* @__PURE__ */ jsx13(
+  const titleNode = editableTitle ? editing ? /* @__PURE__ */ jsx16(
     "input",
     {
       className: "pactor-chat-workspace__title-input",
@@ -2683,7 +3467,7 @@ function WorkspaceHeader({
         }
       }
     }
-  ) : /* @__PURE__ */ jsx13(
+  ) : /* @__PURE__ */ jsx16(
     "button",
     {
       type: "button",
@@ -2695,7 +3479,7 @@ function WorkspaceHeader({
       },
       children: displayTitle
     }
-  ) : /* @__PURE__ */ jsx13("div", { className: "pactor-chat-workspace__title", children: title });
+  ) : /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__title", children: title });
   return /* @__PURE__ */ jsxs11("header", { className: "pactor-chat-workspace__header", children: [
     headerStart !== void 0 ? (
       // header 位模型 chip（决策 D2）：与 title 组成左端组，chip 在前
@@ -2705,19 +3489,28 @@ function WorkspaceHeader({
       ] })
     ) : titleNode,
     hasActions ? /* @__PURE__ */ jsxs11("div", { className: "pactor-chat-workspace__header-right", children: [
-      /* @__PURE__ */ jsx13("div", { className: "pactor-chat-workspace__header-actions", children: headerActions.map((action) => actionButtons[action]) }),
-      headerExtra !== void 0 ? /* @__PURE__ */ jsx13("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
-    ] }) : headerExtra !== void 0 ? /* @__PURE__ */ jsx13("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
+      /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__header-actions", children: /* @__PURE__ */ jsx16(
+        ChromeSlot,
+        {
+          fragment: buildHeaderActionsFragment({
+            actions: headerActions,
+            theme
+          }),
+          fallback: headerActions.map((action) => actionButtons[action])
+        }
+      ) }),
+      headerExtra !== void 0 ? /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
+    ] }) : headerExtra !== void 0 ? /* @__PURE__ */ jsx16("div", { className: "pactor-chat-workspace__header-extra", children: headerExtra }) : null
   ] });
 }
 
 // src/chat-composition.tsx
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function DslNodeSlotInner({ node }) {
-  const { renderChildren } = useRenderer3();
+  const { renderChildren } = useRenderer4();
   return renderChildren([node]);
 }
-var DslSlotGuard = class extends Component2 {
+var DslSlotGuard = class extends Component3 {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -2735,7 +3528,7 @@ var DslSlotGuard = class extends Component2 {
   }
 };
 function DslNodeSlot({ node }) {
-  return /* @__PURE__ */ jsx14(DslSlotGuard, { children: /* @__PURE__ */ jsx14(DslNodeSlotInner, { node }) });
+  return /* @__PURE__ */ jsx17(DslSlotGuard, { children: /* @__PURE__ */ jsx17(DslNodeSlotInner, { node }) });
 }
 function isDslNodeValue(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value) && !isValidElement(value) && typeof value.type === "string";
@@ -2745,7 +3538,7 @@ function resolveSlot(slot) {
     return void 0;
   }
   if (isDslNodeValue(slot)) {
-    return /* @__PURE__ */ jsx14(DslNodeSlot, { node: slot });
+    return /* @__PURE__ */ jsx17(DslNodeSlot, { node: slot });
   }
   return slot;
 }
@@ -2775,7 +3568,11 @@ function ChatComposition({
   messageActions,
   onMessageAction,
   sidebar,
+  toolbarStart,
   toolbarEnd,
+  composerFooter,
+  composerBottom,
+  hideToolbar,
   className,
   onSend,
   artifact,
@@ -2785,12 +3582,12 @@ function ChatComposition({
   onArtifact,
   onOpenArtifact
 }) {
-  const storeRef = useRef11(null);
+  const storeRef = useRef12(null);
   if (storeRef.current === null) {
     storeRef.current = services.store ?? services.storeFactory?.() ?? new ConversationStore();
   }
   const store = storeRef.current;
-  const artifactStoreRef = useRef11(null);
+  const artifactStoreRef = useRef12(null);
   if (artifactStoreRef.current === null) {
     artifactStoreRef.current = services.artifactStore ?? new ArtifactStore();
   }
@@ -2814,7 +3611,7 @@ function ChatComposition({
       artifactStore.open(next);
     }
   };
-  const [attachments, setAttachments] = useState15([]);
+  const [attachments, setAttachments] = useState14([]);
   const handleAttachFiles = services.onAttachFiles ? (files) => {
     void Promise.resolve(services.onAttachFiles(files)).then(
       (created) => {
@@ -2834,24 +3631,38 @@ function ChatComposition({
     model,
     onModelChange
   });
-  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ jsx14(
-    ModelChip,
+  const headerModelChip = modelPlacement === "header" && modelsEnabled ? /* @__PURE__ */ jsx17(
+    ModelSelect,
     {
       models,
       model: currentModel,
       onModelChange: handleModelChange
     }
   ) : void 0;
-  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+  const mergedToolbarEnd = services.toolbarEnd !== void 0 || toolbarEnd !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
     services.toolbarEnd,
     toolbarEnd
   ] }) : void 0;
+  const mergedToolbarStart = services.toolbarStart !== void 0 || toolbarStart !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+    services.toolbarStart,
+    toolbarStart
+  ] }) : void 0;
+  const mergedComposerFooter = services.composerFooter !== void 0 || composerFooter !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+    services.composerFooter,
+    composerFooter
+  ] }) : void 0;
+  const mergedComposerBottom = services.composerBottom !== void 0 || composerBottom !== void 0 ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+    services.composerBottom,
+    composerBottom
+  ] }) : void 0;
+  const hasHeaderContent = header !== void 0 && header !== null ? true : title !== void 0 || headerExtra !== void 0 && headerExtra !== null || headerActions !== void 0 && headerActions.length > 0 || headerModelChip !== void 0;
+  const renderHeader = showHeader !== false && hasHeaderContent;
   const workspace = /* @__PURE__ */ jsxs12(
     "div",
     {
       className: `pactor-chat-workspace${className ? ` ${className}` : ""}`,
       children: [
-        showHeader ? header ?? /* @__PURE__ */ jsx14(
+        renderHeader ? header ?? /* @__PURE__ */ jsx17(
           WorkspaceHeader,
           {
             title,
@@ -2866,7 +3677,7 @@ function ChatComposition({
             onTitleChange
           }
         ) : null,
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx17(
           ChatView,
           {
             store,
@@ -2886,8 +3697,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,
@@ -2906,15 +3720,15 @@ function ChatComposition({
       ]
     }
   );
-  const main = sidebar ? /* @__PURE__ */ jsx14(AppShell, { sidebar, children: workspace }) : workspace;
+  const main = sidebar ? /* @__PURE__ */ jsx17(AppShell, { sidebar, children: workspace }) : workspace;
   const panelFeatureUsed = artifact !== void 0 || panelOpen !== void 0 || inspector !== void 0 || onPanelClose !== void 0 || onArtifact !== void 0 || onOpenArtifact !== void 0 || services.artifactStore !== void 0;
   if (!panelFeatureUsed && !effectivePanelOpen) {
     return main;
   }
   return /* @__PURE__ */ jsxs12("div", { className: "pactor-chat-inspector-host", children: [
     main,
-    effectivePanelOpen ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
-      /* @__PURE__ */ jsx14(
+    effectivePanelOpen ? /* @__PURE__ */ jsxs12(Fragment9, { children: [
+      /* @__PURE__ */ jsx17(
         "div",
         {
           className: "pactor-chat-inspector__scrim",
@@ -2922,7 +3736,7 @@ function ChatComposition({
           onClick: handlePanelClose
         }
       ),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx17(
         ArtifactPanel,
         {
           artifact: effectiveArtifact,
@@ -2938,20 +3752,20 @@ function ChatComposition({
 
 // src/chat-services.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var ChatServicesContext = createContext2(null);
 function ChatServicesProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx15(ChatServicesContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx18(ChatServicesContext.Provider, { value, children });
 }
 function useChatServices() {
   return useContext2(ChatServicesContext);
 }
 
 // src/chat-workspace.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function createChatWorkspace(services) {
   function ChatWorkspace({
     title,
@@ -2961,7 +3775,11 @@ function createChatWorkspace(services) {
     conversationId,
     params,
     sidebar,
+    toolbarStart,
     toolbarEnd,
+    composerFooter,
+    composerBottom,
+    hideToolbar,
     artifact,
     panelOpen,
     onPanelClose,
@@ -2984,7 +3802,7 @@ function createChatWorkspace(services) {
     onMessageAction,
     className
   }) {
-    return /* @__PURE__ */ jsx16(ChatServicesProvider, { value: services, children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx19(ChatServicesProvider, { value: services, children: /* @__PURE__ */ jsx19(
       ChatComposition,
       {
         services,
@@ -2995,15 +3813,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__ */ jsx16(DslNodeSlot, { node: sidebar }) : void 0,
-        toolbarEnd: toolbarEnd ? /* @__PURE__ */ jsx16(DslNodeSlot, { node: toolbarEnd }) : void 0,
+        sidebar: sidebar ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: sidebar }) : void 0,
+        toolbarStart: toolbarStart ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: toolbarStart }) : void 0,
+        toolbarEnd: toolbarEnd ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: toolbarEnd }) : void 0,
+        composerFooter: composerFooter ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: composerFooter }) : void 0,
+        composerBottom: composerBottom ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: composerBottom }) : void 0,
+        hideToolbar,
         artifact,
         panelOpen,
         onPanelClose,
-        inspector: inspector ? /* @__PURE__ */ jsx16(DslNodeSlot, { node: inspector }) : void 0,
+        inspector: inspector ? /* @__PURE__ */ jsx19(DslNodeSlot, { node: inspector }) : void 0,
         onArtifact,
         onOpenArtifact,
         headerActions,
@@ -3027,23 +3847,37 @@ function createChatWorkspace(services) {
 }
 
 // src/view/Chat.tsx
-import {
-  Folder,
-  History,
-  MessageSquare,
-  Plus as Plus2,
-  Search,
-  Settings,
-  Star,
-  User
-} from "lucide-react";
-import {
-  Fragment as Fragment7,
-  useEffect as useEffect7
-} from "react";
+import { Icon as Icon11, RailTooltip } from "@pactor-app/ui/components";
+import { Fragment as Fragment10, useEffect as useEffect10, useRef as useRef13 } from "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
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function ChatShell({
   menu,
   activeMenuKey,
@@ -3055,7 +3889,7 @@ function ChatShell({
   className,
   onMenuSelect
 }) {
-  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx17(
+  const sidebarContent = resolveSlot(sidebar) ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx20(
     ChatSidebarMenu,
     {
       menu,
@@ -3063,7 +3897,7 @@ function ChatShell({
       onMenuSelect
     }
   ) : null);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     AppShell,
     {
       sidebar: sidebarContent,
@@ -3080,7 +3914,7 @@ function ChatShellDslAdapter({
   onMenuSelect,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     ChatShell,
     {
       ...rest,
@@ -3095,39 +3929,45 @@ function registerChatShellComponent(registry) {
 }
 
 // src/view/Chat.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var MENU_ICONS = {
-  plus: Plus2,
-  chat: MessageSquare,
-  history: History,
-  settings: Settings,
-  star: Star,
-  search: Search,
-  user: User,
-  folder: Folder
-};
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function ChatSidebarMenu({
   menu,
   activeMenuKey,
   onMenuSelect
 }) {
   const drawer = useSidebarDrawer();
-  let lastGroup;
-  return /* @__PURE__ */ jsx18("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__ */ jsxs13(Fragment7, { children: [
-      groupLabel !== void 0 ? /* @__PURE__ */ jsx18("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
-      /* @__PURE__ */ jsxs13(
+  const menuRef = useRef13(menu);
+  menuRef.current = menu;
+  const selectRef = useRef13(onMenuSelect);
+  selectRef.current = onMenuSelect;
+  const drawerRef = useRef13(drawer);
+  drawerRef.current = drawer;
+  useEffect10(() => {
+    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__ */ jsx21("nav", { className: "pactor-chat-menu", "aria-label": "\u4F1A\u8BDD\u5BFC\u822A", children: menu.map((item) => {
+      const groupLabel = item.group !== void 0 && item.group !== lastGroup ? item.group : void 0;
+      lastGroup = item.group;
+      const active = item.key === activeMenuKey;
+      const collapsed = drawer?.collapsed === true;
+      const button = /* @__PURE__ */ jsxs13(
         "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;
@@ -3136,21 +3976,26 @@ function ChatSidebarMenu({
             drawer?.close();
           },
           children: [
-            item.icon !== void 0 ? Icon ? /* @__PURE__ */ jsx18("span", { className: "pactor-chat-menu__icon", children: /* @__PURE__ */ jsx18(Icon, { size: 15, strokeWidth: 1.7 }) }) : /* @__PURE__ */ jsx18(
-              "span",
-              {
-                className: "pactor-chat-menu__icon-placeholder",
-                "aria-hidden": true
-              }
-            ) : null,
-            /* @__PURE__ */ jsx18("span", { className: "pactor-chat-menu__label", children: item.label }),
-            item.dot === true ? /* @__PURE__ */ jsx18("span", { className: "pactor-chat-menu__dot", "aria-hidden": true }) : null,
-            item.badge !== void 0 ? /* @__PURE__ */ jsx18("span", { className: "pactor-chat-menu__badge", children: item.badge }) : null
+            item.icon !== void 0 ? /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__icon", children: /* @__PURE__ */ jsx21(Icon11, { name: item.icon, size: 15, strokeWidth: 1.7 }) }) : null,
+            /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__label", children: item.label }),
+            item.dot === true ? /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__dot", "aria-hidden": true }) : null,
+            item.badge !== void 0 ? /* @__PURE__ */ jsx21("span", { className: "pactor-chat-menu__badge", children: item.badge }) : null
           ]
         }
-      )
-    ] }, item.key);
-  }) });
+      );
+      return /* @__PURE__ */ jsxs13(Fragment10, { children: [
+        groupLabel !== void 0 ? /* @__PURE__ */ jsx21("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
+        collapsed ? /* @__PURE__ */ jsx21(RailTooltip, { label: item.label, children: button }) : button
+      ] }, item.key);
+    }) });
+  })();
+  return /* @__PURE__ */ jsx21(
+    ChromeSlot,
+    {
+      fragment: buildSidebarMenuFragment({ menu, activeMenuKey }),
+      fallback
+    }
+  );
 }
 function Chat({
   title,
@@ -3163,6 +4008,11 @@ function Chat({
   menu,
   activeMenuKey,
   sidebar,
+  toolbarStart,
+  toolbarEnd,
+  composerFooter,
+  composerBottom,
+  hideToolbar,
   headerExtra,
   header,
   headerActions,
@@ -3190,7 +4040,7 @@ function Chat({
   onMenuSelect
 }) {
   const services = useChatServices();
-  useEffect7(() => {
+  useEffect10(() => {
     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"
@@ -3198,10 +4048,10 @@ function Chat({
     }
   }, [services]);
   if (!services) {
-    return /* @__PURE__ */ jsx18("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__ */ jsx21("div", { className: "pactor-chat-notice", role: "note", children: "\u672A\u914D\u7F6E\u804A\u5929\u670D\u52A1\uFF1A\u8BF7\u5728 Chat \u5916\u5C42\u4F7F\u7528 ChatServicesProvider \u6CE8\u5165 transport \u7B49\u670D\u52A1\u540E\u91CD\u8BD5\u3002" });
   }
   const sidebarSlot = resolveSlot(sidebar);
-  const sidebarContent = sidebarSlot ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx18(
+  const sidebarContent = sidebarSlot ?? (menu && menu.length > 0 ? /* @__PURE__ */ jsx21(
     ChatSidebarMenu,
     {
       menu,
@@ -3209,7 +4059,7 @@ function Chat({
       onMenuSelect
     }
   ) : void 0);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     ChatComposition,
     {
       services,
@@ -3220,9 +4070,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,
@@ -3264,7 +4119,7 @@ function ChatDslAdapter({
   onTitleChange,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     Chat,
     {
       ...rest,
@@ -3291,11 +4146,11 @@ function registerChatComponent(registry) {
 }
 
 // src/view/ChatLayout.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function ChatLayout({ title, children }) {
   return /* @__PURE__ */ jsxs14("div", { className: "pactor-chat-layout", children: [
-    /* @__PURE__ */ jsx19("header", { className: "pactor-chat-layout__header", children: title ?? "Chat" }),
-    /* @__PURE__ */ jsx19("main", { className: "pactor-chat-layout__main", children })
+    /* @__PURE__ */ jsx22("header", { className: "pactor-chat-layout__header", children: title ?? "Chat" }),
+    /* @__PURE__ */ jsx22("main", { className: "pactor-chat-layout__main", children })
   ] });
 }
 var CHAT_LAYOUT_TYPE = "chat";
@@ -3324,8 +4179,6 @@ export {
   ConversationStore,
   DEFAULT_CHAT_GREETING,
   EmptyState,
-  MENU_ICONS,
-  MESSAGE_ACTION_ICONS,
   MessageActions,
   MessageBubble,
   PartRenderer,