diff --git a/packages/react-ui/.prettierignore b/packages/react-ui/.prettierignore
index 6905c74b2..c6590b762 100644
--- a/packages/react-ui/.prettierignore
+++ b/packages/react-ui/.prettierignore
@@ -1,3 +1,4 @@
 # Auto-generated file, do not format
 src/cssUtils.scss
 src/openui-defaults.scss
+src/components/index.scss
\ No newline at end of file
diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json
index 5d74fbd0c..55d747712 100644
--- a/packages/react-ui/package.json
+++ b/packages/react-ui/package.json
@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@openuidev/react-ui",
   "license": "MIT",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "description": "Component library for Generative UI SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/react-ui/src/components/BottomTray/Thread.tsx b/packages/react-ui/src/components/BottomTray/Thread.tsx
index ce44cf83a..e4d62ae6d 100644
--- a/packages/react-ui/src/components/BottomTray/Thread.tsx
+++ b/packages/react-ui/src/components/BottomTray/Thread.tsx
@@ -1,11 +1,8 @@
 import type { AssistantMessage, Message, ToolMessage } from "@openuidev/react-headless";
 import { MessageProvider, useThread } from "@openuidev/react-headless";
 import clsx from "clsx";
-import { ArrowUp, Square } from "lucide-react";
-import React, { memo, useEffect, useLayoutEffect, useRef } from "react";
-import { useComposerState } from "../../hooks/useComposerState";
+import React, { memo, useEffect, useRef } from "react";
 import { ScrollVariant, useScrollToBottom } from "../../hooks/useScrollToBottom";
-import { IconButton } from "../IconButton";
 import { MarkDownRenderer } from "../MarkDownRenderer";
 import { MessageLoading as MessageLoadingComponent } from "../MessageLoading";
 import type { AssistantMessageComponent, UserMessageComponent } from "../OpenUIChat/types";
@@ -292,59 +289,5 @@ export const Messages = ({
   );
 };
 
-export const Composer = ({ className }: { className?: string }) => {
-  const { textContent, setTextContent } = useComposerState();
-  const processMessage = useThread((s) => s.processMessage);
-  const cancelMessage = useThread((s) => s.cancelMessage);
-  const isRunning = useThread((s) => s.isRunning);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSubmit = () => {
-    if (!textContent.trim() || isRunning) {
-      return;
-    }
-
-    processMessage({
-      role: "user",
-      content: textContent,
-    });
-
-    setTextContent("");
-  };
-
-  useLayoutEffect(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-
-    input.style.height = "auto";
-    input.style.height = `${input.scrollHeight}px`;
-  }, [textContent]);
-
-  return (
-    <div className={clsx("openui-bottom-tray-thread-composer", className)}>
-      <div className="openui-bottom-tray-thread-composer__input-wrapper">
-        <textarea
-          ref={inputRef}
-          rows={1}
-          value={textContent}
-          autoFocus
-          onChange={(e) => setTextContent(e.target.value)}
-          className="openui-bottom-tray-thread-composer__input"
-          placeholder="Type your message..."
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSubmit();
-            }
-          }}
-        />
-        <IconButton
-          onClick={isRunning ? cancelMessage : handleSubmit}
-          icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-        />
-      </div>
-    </div>
-  );
-};
+// Re-export Composer from components
+export { Composer } from "./components";
diff --git a/packages/react-ui/src/components/BottomTray/bottomTray.scss b/packages/react-ui/src/components/BottomTray/bottomTray.scss
index 164830724..73e3eed67 100644
--- a/packages/react-ui/src/components/BottomTray/bottomTray.scss
+++ b/packages/react-ui/src/components/BottomTray/bottomTray.scss
@@ -6,5 +6,6 @@
 @use "./header.scss";
 @use "./threadList.scss";
 @use "./thread.scss";
+@use "./components/composer.scss";
 @use "./conversationStarter.scss";
 @use "./welcomeScreen.scss";
diff --git a/packages/react-ui/src/components/BottomTray/components/Composer.tsx b/packages/react-ui/src/components/BottomTray/components/Composer.tsx
new file mode 100644
index 000000000..af5667086
--- /dev/null
+++ b/packages/react-ui/src/components/BottomTray/components/Composer.tsx
@@ -0,0 +1,81 @@
+import { useThread } from "@openuidev/react-headless";
+import clsx from "clsx";
+import { ArrowUp, Square } from "lucide-react";
+import { useLayoutEffect, useRef } from "react";
+import { useComposerState } from "../../../hooks/useComposerState";
+import { IconButton } from "../../IconButton";
+
+export interface ComposerProps {
+  className?: string;
+  placeholder?: string;
+}
+
+export const Composer = ({ className, placeholder = "Type your message..." }: ComposerProps) => {
+  const { textContent, setTextContent } = useComposerState();
+  const processMessage = useThread((s) => s.processMessage);
+  const cancelMessage = useThread((s) => s.cancelMessage);
+  const isRunning = useThread((s) => s.isRunning);
+  const isLoadingMessages = useThread((s) => s.isLoadingMessages);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = () => {
+    if (!textContent.trim() || isRunning || isLoadingMessages) {
+      return;
+    }
+
+    processMessage({
+      role: "user",
+      content: textContent,
+    });
+
+    setTextContent("");
+  };
+
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    // Reset to 0 (not "auto") so scrollHeight reflects content, not container
+    input.style.height = "0px";
+    input.style.height = `${Math.max(input.scrollHeight, 24)}px`;
+  }, [textContent]);
+
+  return (
+    <div
+      className={clsx("openui-bottom-tray-thread-composer", className)}
+      onClick={(e) => {
+        if (!(e.target as HTMLElement).closest("button, a, [role='button']")) {
+          inputRef.current?.focus();
+        }
+      }}
+    >
+      <div className="openui-bottom-tray-thread-composer__input-wrapper">
+        <textarea
+          ref={inputRef}
+          value={textContent}
+          onChange={(e) => setTextContent(e.target.value)}
+          className="openui-bottom-tray-thread-composer__input"
+          placeholder={placeholder}
+          rows={1}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
+        />
+        <div className="openui-bottom-tray-thread-composer__action-bar">
+          <IconButton
+            onClick={isRunning ? cancelMessage : handleSubmit}
+            icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
+            size="medium"
+            variant="primary"
+            className="openui-bottom-tray-thread-composer__submit-button"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Composer;
diff --git a/packages/react-ui/src/components/BottomTray/components/composer.scss b/packages/react-ui/src/components/BottomTray/components/composer.scss
new file mode 100644
index 000000000..73f28ba53
--- /dev/null
+++ b/packages/react-ui/src/components/BottomTray/components/composer.scss
@@ -0,0 +1,59 @@
+@use "../../../cssUtils" as cssUtils;
+
+.openui-bottom-tray-thread-composer {
+  width: 100%;
+  padding: 0 cssUtils.$space-s cssUtils.$space-s;
+
+  &__input-wrapper {
+    background-color: cssUtils.$foreground;
+    border: 1px solid cssUtils.$border-interactive;
+    border-radius: cssUtils.$radius-l;
+    box-shadow: cssUtils.$shadow-s;
+    overflow: clip;
+    display: flex;
+    flex-direction: column;
+    gap: cssUtils.$space-s;
+    padding: cssUtils.$space-s;
+  }
+
+  &__input {
+    scrollbar-width: thin;
+    scrollbar-color: cssUtils.$elevated transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: cssUtils.$elevated;
+      border-radius: cssUtils.$radius-full;
+    }
+
+    padding: 0 cssUtils.$space-3xs;
+    resize: none;
+    max-height: 200px;
+    outline: none;
+    border: none;
+    background: transparent;
+    overflow-y: auto;
+    @include cssUtils.typography(body, default);
+    color: cssUtils.$text-neutral-primary;
+
+    &::placeholder {
+      color: cssUtils.$text-neutral-secondary;
+    }
+  }
+
+  &__action-bar {
+    display: flex;
+    align-items: center;
+  }
+
+  &__submit-button {
+    margin-left: auto;
+  }
+}
diff --git a/packages/react-ui/src/components/BottomTray/components/index.ts b/packages/react-ui/src/components/BottomTray/components/index.ts
new file mode 100644
index 000000000..c054e9045
--- /dev/null
+++ b/packages/react-ui/src/components/BottomTray/components/index.ts
@@ -0,0 +1,2 @@
+export { Composer } from "./Composer";
+export type { ComposerProps } from "./Composer";
diff --git a/packages/react-ui/src/components/BottomTray/thread.scss b/packages/react-ui/src/components/BottomTray/thread.scss
index 4701359c2..969994983 100644
--- a/packages/react-ui/src/components/BottomTray/thread.scss
+++ b/packages/react-ui/src/components/BottomTray/thread.scss
@@ -101,37 +101,3 @@
     height: fit-content;
   }
 }
-
-.openui-bottom-tray-thread-composer {
-  width: 100%;
-  padding: 0 cssUtils.$space-s cssUtils.$space-s;
-
-  &__input-wrapper {
-    background-color: cssUtils.$foreground;
-    border: 1.256px solid cssUtils.$border-default;
-    display: flex;
-    align-items: flex-end;
-    gap: cssUtils.$space-s;
-    padding: cssUtils.$space-m;
-    border-radius: cssUtils.$radius-xl;
-  }
-
-  &__input {
-    flex-grow: 1;
-    padding: 0;
-    resize: none;
-    margin: auto 0px;
-    min-height: 1lh;
-    max-height: 154px;
-    outline: none;
-    border: none;
-    background: transparent;
-    overflow: hidden;
-
-    @include cssUtils.typography(primary, default);
-    color: cssUtils.$text-neutral-primary;
-    &::placeholder {
-      color: cssUtils.$text-neutral-tertiary;
-    }
-  }
-}
diff --git a/packages/react-ui/src/components/CopilotShell/Thread.tsx b/packages/react-ui/src/components/CopilotShell/Thread.tsx
index 656977ec5..211cd4845 100644
--- a/packages/react-ui/src/components/CopilotShell/Thread.tsx
+++ b/packages/react-ui/src/components/CopilotShell/Thread.tsx
@@ -1,11 +1,8 @@
 import type { AssistantMessage, Message, ToolMessage } from "@openuidev/react-headless";
 import { MessageProvider, useThread } from "@openuidev/react-headless";
 import clsx from "clsx";
-import { ArrowUp, Square } from "lucide-react";
-import React, { memo, useEffect, useLayoutEffect, useRef } from "react";
-import { useComposerState } from "../../hooks/useComposerState";
+import React, { memo, useEffect, useRef } from "react";
 import { ScrollVariant, useScrollToBottom } from "../../hooks/useScrollToBottom";
-import { IconButton } from "../IconButton";
 import { MarkDownRenderer } from "../MarkDownRenderer";
 import { MessageLoading as MessageLoadingComponent } from "../MessageLoading";
 import type { AssistantMessageComponent, UserMessageComponent } from "../OpenUIChat/types";
@@ -292,59 +289,5 @@ export const Messages = ({
   );
 };
 
-export const Composer = ({ className }: { className?: string }) => {
-  const { textContent, setTextContent } = useComposerState();
-  const processMessage = useThread((s) => s.processMessage);
-  const cancelMessage = useThread((s) => s.cancelMessage);
-  const isRunning = useThread((s) => s.isRunning);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  const handleSubmit = () => {
-    if (!textContent.trim() || isRunning) {
-      return;
-    }
-
-    processMessage({
-      role: "user",
-      content: textContent,
-    });
-
-    setTextContent("");
-  };
-
-  useLayoutEffect(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-
-    input.style.height = "auto";
-    input.style.height = `${input.scrollHeight}px`;
-  }, [textContent]);
-
-  return (
-    <div className={clsx("openui-copilot-shell-thread-composer", className)}>
-      <div className="openui-copilot-shell-thread-composer__input-wrapper">
-        <textarea
-          ref={inputRef}
-          autoFocus
-          rows={1}
-          value={textContent}
-          onChange={(e) => setTextContent(e.target.value)}
-          className="openui-copilot-shell-thread-composer__input"
-          placeholder="Type your message..."
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSubmit();
-            }
-          }}
-        />
-        <IconButton
-          onClick={isRunning ? cancelMessage : handleSubmit}
-          icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-        />
-      </div>
-    </div>
-  );
-};
+// Re-export Composer from components
+export { Composer } from "./components";
diff --git a/packages/react-ui/src/components/CopilotShell/components/Composer.tsx b/packages/react-ui/src/components/CopilotShell/components/Composer.tsx
new file mode 100644
index 000000000..dfa225135
--- /dev/null
+++ b/packages/react-ui/src/components/CopilotShell/components/Composer.tsx
@@ -0,0 +1,81 @@
+import { useThread } from "@openuidev/react-headless";
+import clsx from "clsx";
+import { ArrowUp, Square } from "lucide-react";
+import { useLayoutEffect, useRef } from "react";
+import { useComposerState } from "../../../hooks/useComposerState";
+import { IconButton } from "../../IconButton";
+
+export interface ComposerProps {
+  className?: string;
+  placeholder?: string;
+}
+
+export const Composer = ({ className, placeholder = "Type your message..." }: ComposerProps) => {
+  const { textContent, setTextContent } = useComposerState();
+  const processMessage = useThread((s) => s.processMessage);
+  const cancelMessage = useThread((s) => s.cancelMessage);
+  const isRunning = useThread((s) => s.isRunning);
+  const isLoadingMessages = useThread((s) => s.isLoadingMessages);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = () => {
+    if (!textContent.trim() || isRunning || isLoadingMessages) {
+      return;
+    }
+
+    processMessage({
+      role: "user",
+      content: textContent,
+    });
+
+    setTextContent("");
+  };
+
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    // Reset to 0 (not "auto") so scrollHeight reflects content, not container
+    input.style.height = "0px";
+    input.style.height = `${Math.max(input.scrollHeight, 24)}px`;
+  }, [textContent]);
+
+  return (
+    <div
+      className={clsx("openui-copilot-shell-thread-composer", className)}
+      onClick={(e) => {
+        if (!(e.target as HTMLElement).closest("button, a, [role='button']")) {
+          inputRef.current?.focus();
+        }
+      }}
+    >
+      <div className="openui-copilot-shell-thread-composer__input-wrapper">
+        <textarea
+          ref={inputRef}
+          value={textContent}
+          onChange={(e) => setTextContent(e.target.value)}
+          className="openui-copilot-shell-thread-composer__input"
+          placeholder={placeholder}
+          rows={1}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
+        />
+        <div className="openui-copilot-shell-thread-composer__action-bar">
+          <IconButton
+            onClick={isRunning ? cancelMessage : handleSubmit}
+            icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
+            size="medium"
+            variant="primary"
+            className="openui-copilot-shell-thread-composer__submit-button"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Composer;
diff --git a/packages/react-ui/src/components/CopilotShell/components/composer.scss b/packages/react-ui/src/components/CopilotShell/components/composer.scss
new file mode 100644
index 000000000..e19e7d912
--- /dev/null
+++ b/packages/react-ui/src/components/CopilotShell/components/composer.scss
@@ -0,0 +1,59 @@
+@use "../../../cssUtils" as cssUtils;
+
+.openui-copilot-shell-thread-composer {
+  width: 100%;
+  padding: cssUtils.$space-m cssUtils.$space-l cssUtils.$space-l;
+  background-color: cssUtils.$foreground;
+
+  &__input-wrapper {
+    border: 1px solid cssUtils.$border-interactive;
+    border-radius: cssUtils.$radius-l;
+    box-shadow: cssUtils.$shadow-s;
+    overflow: clip;
+    display: flex;
+    flex-direction: column;
+    gap: cssUtils.$space-s;
+    padding: cssUtils.$space-s;
+  }
+
+  &__input {
+    scrollbar-width: thin;
+    scrollbar-color: cssUtils.$elevated transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: cssUtils.$elevated;
+      border-radius: cssUtils.$radius-full;
+    }
+
+    padding: 0 cssUtils.$space-3xs;
+    resize: none;
+    max-height: 200px;
+    outline: none;
+    border: none;
+    background: transparent;
+    overflow-y: auto;
+    @include cssUtils.typography(body, default);
+    color: cssUtils.$text-neutral-primary;
+
+    &::placeholder {
+      color: cssUtils.$text-neutral-secondary;
+    }
+  }
+
+  &__action-bar {
+    display: flex;
+    align-items: center;
+  }
+
+  &__submit-button {
+    margin-left: auto;
+  }
+}
diff --git a/packages/react-ui/src/components/CopilotShell/components/index.ts b/packages/react-ui/src/components/CopilotShell/components/index.ts
new file mode 100644
index 000000000..c054e9045
--- /dev/null
+++ b/packages/react-ui/src/components/CopilotShell/components/index.ts
@@ -0,0 +1,2 @@
+export { Composer } from "./Composer";
+export type { ComposerProps } from "./Composer";
diff --git a/packages/react-ui/src/components/CopilotShell/copilotShell.scss b/packages/react-ui/src/components/CopilotShell/copilotShell.scss
index d5458a85d..1b1aa246c 100644
--- a/packages/react-ui/src/components/CopilotShell/copilotShell.scss
+++ b/packages/react-ui/src/components/CopilotShell/copilotShell.scss
@@ -1,5 +1,6 @@
 @use "../../cssUtils" as cssUtils;
 @use "./thread.scss";
+@use "./components/composer.scss";
 @use "./header.scss";
 @use "./conversationStarter.scss";
 @use "./welcomeScreen.scss";
diff --git a/packages/react-ui/src/components/CopilotShell/header.scss b/packages/react-ui/src/components/CopilotShell/header.scss
index ff44ac2c8..416938640 100644
--- a/packages/react-ui/src/components/CopilotShell/header.scss
+++ b/packages/react-ui/src/components/CopilotShell/header.scss
@@ -26,3 +26,9 @@
   @include cssUtils.typography(title, medium);
   color: cssUtils.$text-neutral-primary;
 }
+
+.openui-copilot-shell-header-right-content {
+  display: flex;
+  align-items: center;
+  gap: cssUtils.$space-s;
+}
diff --git a/packages/react-ui/src/components/CopilotShell/thread.scss b/packages/react-ui/src/components/CopilotShell/thread.scss
index 030e52d99..3a129518c 100644
--- a/packages/react-ui/src/components/CopilotShell/thread.scss
+++ b/packages/react-ui/src/components/CopilotShell/thread.scss
@@ -90,36 +90,3 @@
     height: fit-content;
   }
 }
-
-.openui-copilot-shell-thread-composer {
-  width: 100%;
-  padding: cssUtils.$space-m cssUtils.$space-l cssUtils.$space-l;
-  background-color: cssUtils.$foreground;
-
-  &__input-wrapper {
-    border: 1.256px solid cssUtils.$border-default;
-    display: flex;
-    align-items: flex-end;
-    gap: cssUtils.$space-s;
-    padding: cssUtils.$space-m;
-    border-radius: cssUtils.$radius-l;
-  }
-
-  &__input {
-    flex-grow: 1;
-    padding: 0;
-    resize: none;
-    margin: auto 0px;
-    min-height: 1lh;
-    max-height: 154px;
-    outline: none;
-    border: none;
-    background: transparent;
-    overflow: hidden;
-    @include cssUtils.typography(primary, default);
-    color: cssUtils.$text-neutral-primary;
-    &::placeholder {
-      color: cssUtils.$text-neutral-tertiary;
-    }
-  }
-}
diff --git a/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx b/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx
index 3a8f823fe..c31ff5d4f 100644
--- a/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx
+++ b/packages/react-ui/src/components/OpenUIChat/ComposedBottomTray.tsx
@@ -21,6 +21,7 @@ interface BottomTraySpecificProps extends SharedChatUIProps {
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
+  headerActions?: React.ReactNode;
 }
 
 const WelcomeMessageRenderer = ({ welcomeMessage }: Pick<SharedChatUIProps, "welcomeMessage">) => {
@@ -82,6 +83,7 @@ const BottomTrayInner = ({
   assistantMessage,
   userMessage,
   composer: ComposerComponent,
+  headerActions,
 }: BottomTraySpecificProps) => {
   const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
 
@@ -104,7 +106,7 @@ const BottomTrayInner = ({
 
       <Container logoUrl={logoUrl} agentName={agentName} isOpen={isOpen}>
         <ThreadContainer isArtifactActive={isArtifactActive} renderArtifact={renderArtifact}>
-          <Header onMinimize={() => handleOpenChange(false)} />
+          <Header onMinimize={() => handleOpenChange(false)} rightChildren={headerActions} />
           <WelcomeMessageRenderer welcomeMessage={welcomeMessage} />
           <ScrollArea scrollVariant={scrollVariant}>
             <Messages
@@ -129,4 +131,5 @@ export const BottomTray = withChatProvider<{
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
+  headerActions?: React.ReactNode;
 }>(BottomTrayInner);
diff --git a/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx b/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx
index 3808e7195..3dd2c2c58 100644
--- a/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx
+++ b/packages/react-ui/src/components/OpenUIChat/ComposedCopilot.tsx
@@ -59,6 +59,10 @@ const ConversationStartersRenderer = ({
   );
 };
 
+interface CopilotSpecificProps extends SharedChatUIProps {
+  headerActions?: React.ReactNode;
+}
+
 const CopilotInner = ({
   logoUrl = "https://www.openui.com/favicon.svg",
   agentName = "My Agent",
@@ -71,11 +75,12 @@ const CopilotInner = ({
   assistantMessage,
   userMessage,
   composer: ComposerComponent,
-}: SharedChatUIProps) => {
+  headerActions,
+}: CopilotSpecificProps) => {
   return (
     <Container logoUrl={logoUrl} agentName={agentName}>
       <ThreadContainer isArtifactActive={isArtifactActive} renderArtifact={renderArtifact}>
-        <Header />
+        <Header rightChildren={headerActions} />
         <WelcomeMessageRenderer welcomeMessage={welcomeMessage} />
         <ScrollArea scrollVariant={scrollVariant}>
           <Messages
@@ -95,4 +100,6 @@ const CopilotInner = ({
   );
 };
 
-export const Copilot = withChatProvider(CopilotInner);
+export const Copilot = withChatProvider<{
+  headerActions?: React.ReactNode;
+}>(CopilotInner);
diff --git a/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx b/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx
index 0eef1b04a..85fe70ced 100644
--- a/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx
+++ b/packages/react-ui/src/components/OpenUIChat/ComposedStandalone.tsx
@@ -13,6 +13,7 @@ import {
   SidebarHeader,
   SidebarSeparator,
   ThreadContainer,
+  ThreadHeader,
   ThreadList,
   WelcomeScreen,
 } from "../Shell";
@@ -70,6 +71,11 @@ const ConversationStartersRenderer = ({
   );
 };
 
+interface FullScreenSpecificProps extends SharedChatUIProps {
+  threadHeader?: React.ReactNode;
+  mobileHeaderActions?: React.ReactNode;
+}
+
 const FullScreenInner = ({
   logoUrl = "https://www.openui.com/favicon.svg",
   agentName = "My Agent",
@@ -82,7 +88,9 @@ const FullScreenInner = ({
   assistantMessage,
   userMessage,
   composer: ComposerComponent,
-}: SharedChatUIProps) => {
+  threadHeader,
+  mobileHeaderActions,
+}: FullScreenSpecificProps) => {
   return (
     <Container logoUrl={logoUrl} agentName={agentName}>
       <SidebarContainer>
@@ -94,7 +102,8 @@ const FullScreenInner = ({
         </SidebarContent>
       </SidebarContainer>
       <ThreadContainer isArtifactActive={isArtifactActive} renderArtifact={renderArtifact}>
-        <MobileHeader />
+        <MobileHeader rightChildren={mobileHeaderActions} />
+        {threadHeader && <ThreadHeader>{threadHeader}</ThreadHeader>}
         <WelcomeMessageRenderer
           welcomeMessage={welcomeMessage}
           conversationStarters={conversationStarters}
@@ -117,4 +126,7 @@ const FullScreenInner = ({
   );
 };
 
-export const FullScreen = withChatProvider(FullScreenInner);
+export const FullScreen = withChatProvider<{
+  threadHeader?: React.ReactNode;
+  mobileHeaderActions?: React.ReactNode;
+}>(FullScreenInner);
diff --git a/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.mdx b/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.mdx
index 4fea2c04c..b509abfb9 100644
--- a/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.mdx
+++ b/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.mdx
@@ -190,6 +190,82 @@ function App() {
 }
 ```
 
+## Header Customization
+
+Each layout provides a way to inject custom actions into its header area.
+
+### FullScreen
+
+FullScreen has two header slots:
+
+- **`threadHeader`** — Desktop-only header bar rendered above the message area. Hidden on mobile.
+- **`mobileHeaderActions`** — Content injected into the right side of the mobile header, before the "new chat" button.
+
+```tsx
+import { FullScreen } from "@openuidev/react-ui";
+import { Button, IconButton } from "@openuidev/react-ui";
+import { ChevronDown, Share, ThumbsUp } from "lucide-react";
+
+<FullScreen
+  processMessage={...}
+  threadHeader={
+    <>
+      <Button iconLeft={<ChevronDown size={14} />} variant="secondary" size="small">
+        GPT-4o
+      </Button>
+      <div style={{ display: "flex", gap: "4px" }}>
+        <IconButton icon={<ThumbsUp size={16} />} aria-label="Feedback" size="small" variant="secondary" />
+        <Button iconLeft={<Share size={14} />} variant="secondary" size="small">Share</Button>
+      </div>
+    </>
+  }
+  mobileHeaderActions={
+    <IconButton icon={<Share size={16} />} aria-label="Share" size="medium" variant="secondary" />
+  }
+/>
+```
+
+### Copilot
+
+Copilot has a single header with a right-side slot:
+
+- **`headerActions`** — Content rendered on the right side of the header, next to the logo and agent name.
+
+```tsx
+import { Copilot } from "@openuidev/react-ui";
+import { IconButton } from "@openuidev/react-ui";
+import { Download, Share } from "lucide-react";
+
+<Copilot
+  processMessage={...}
+  headerActions={
+    <>
+      <IconButton icon={<Download size={16} />} aria-label="Export" size="small" variant="secondary" />
+      <IconButton icon={<Share size={16} />} aria-label="Share" size="small" variant="secondary" />
+    </>
+  }
+/>
+```
+
+### BottomTray
+
+BottomTray has a header with built-in thread list, new chat, and minimize buttons. Custom actions are inserted before these:
+
+- **`headerActions`** — Content rendered on the right side of the header, before the thread list and new chat buttons.
+
+```tsx
+import { BottomTray } from "@openuidev/react-ui";
+import { IconButton } from "@openuidev/react-ui";
+import { Share } from "lucide-react";
+
+<BottomTray
+  processMessage={...}
+  headerActions={
+    <IconButton icon={<Share size={16} />} aria-label="Share" size="small" variant="tertiary" />
+  }
+/>
+```
+
 ## Props
 
 ### Core Props
@@ -251,15 +327,33 @@ interface ConversationStartersConfig {
 - `<Sparkles size={16} />` - Custom icon
 - `<></>` (empty fragment) - No icon
 
+### FullScreen Props
+
+These props only apply to the `standalone` (FullScreen) layout:
+
+| Prop                  | Type        | Description                                                     |
+| --------------------- | ----------- | --------------------------------------------------------------- |
+| `threadHeader`        | `ReactNode` | Custom content for the desktop thread header (hidden on mobile) |
+| `mobileHeaderActions` | `ReactNode` | Custom content for the right side of the mobile header          |
+
+### Copilot Props
+
+These props only apply to the `copilot` layout:
+
+| Prop            | Type        | Description                                     |
+| --------------- | ----------- | ----------------------------------------------- |
+| `headerActions` | `ReactNode` | Custom content for the right side of the header |
+
 ### Bottom Tray Props
 
 These props only apply when `type="bottom-tray"`. The tray includes a built-in trigger button, so these are optional for controlled mode:
 
-| Prop           | Type                        | Description                                     |
-| -------------- | --------------------------- | ----------------------------------------------- |
-| `isOpen`       | `boolean`                   | Controlled open state (optional)                |
-| `onOpenChange` | `(isOpen: boolean) => void` | Callback when open state changes (optional)     |
-| `defaultOpen`  | `boolean`                   | Initial open state, default: `false` (optional) |
+| Prop            | Type                        | Description                                                               |
+| --------------- | --------------------------- | ------------------------------------------------------------------------- |
+| `isOpen`        | `boolean`                   | Controlled open state (optional)                                          |
+| `onOpenChange`  | `(isOpen: boolean) => void` | Callback when open state changes (optional)                               |
+| `defaultOpen`   | `boolean`                   | Initial open state, default: `false` (optional)                           |
+| `headerActions` | `ReactNode`                 | Custom content for the right side of the header (before built-in buttons) |
 
 ### Advanced Props
 
diff --git a/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.stories.tsx b/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.stories.tsx
index ef65af1eb..a1dce08c2 100644
--- a/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.stories.tsx
+++ b/packages/react-ui/src/components/OpenUIChat/stories/OpenUIChat.stories.tsx
@@ -1,7 +1,9 @@
 import type { Message } from "@openuidev/react-headless";
-import { Sparkles, Zap } from "lucide-react";
+import { ChevronDown, Download, Share, Sparkles, ThumbsUp, Zap } from "lucide-react";
 import { useState } from "react";
 import logoUrl from "../../BottomTray/stories/thesysdev_logo.jpeg";
+import { Button } from "../../Button";
+import { IconButton } from "../../IconButton";
 import { BottomTray } from "../ComposedBottomTray.js";
 import { Copilot } from "../ComposedCopilot.js";
 import { FullScreen } from "../ComposedStandalone.js";
@@ -143,6 +145,42 @@ export const StandaloneLongStarters = {
   ),
 };
 
+export const StandaloneWithThreadHeader = {
+  render: () => (
+    <div style={{ minHeight: "100vh", background: "var(--openui-bg-fill, #f5f5f5)" }}>
+      <FullScreen
+        {...sharedProps}
+        welcomeMessage={SAMPLE_WELCOME_MESSAGE}
+        conversationStarters={SAMPLE_STARTERS}
+        threadHeader={
+          <>
+            <Button iconLeft={<ChevronDown size={14} />} variant="secondary" size="small">
+              GPT-4o
+            </Button>
+            <div style={{ display: "flex", gap: "4px" }}>
+              <IconButton
+                icon={<ThumbsUp size={16} />}
+                aria-label="Feedback"
+                size="small"
+                variant="secondary"
+              />
+              <IconButton
+                icon={<Download size={16} />}
+                aria-label="Export"
+                size="small"
+                variant="secondary"
+              />
+              <Button iconLeft={<Share size={14} />} variant="secondary" size="small">
+                Share
+              </Button>
+            </div>
+          </>
+        }
+      />
+    </div>
+  ),
+};
+
 export const CopilotDefault = {
   render: () => (
     <div style={{ minHeight: "100vh", background: "var(--openui-bg-fill, #f5f5f5)" }}>
@@ -163,6 +201,33 @@ export const CopilotWithWelcome = {
   ),
 };
 
+export const CopilotWithHeaderActions = {
+  render: () => (
+    <div style={{ minHeight: "100vh", background: "var(--openui-bg-fill, #f5f5f5)" }}>
+      <Copilot
+        {...sharedProps}
+        welcomeMessage={SAMPLE_WELCOME_MESSAGE}
+        headerActions={
+          <>
+            <IconButton
+              icon={<Download size={16} />}
+              aria-label="Export"
+              size="small"
+              variant="secondary"
+            />
+            <IconButton
+              icon={<Share size={16} />}
+              aria-label="Share"
+              size="small"
+              variant="secondary"
+            />
+          </>
+        }
+      />
+    </div>
+  ),
+};
+
 const BottomTrayStory = ({ defaultOpen = false, ...rest }: any) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   return (
@@ -217,3 +282,16 @@ export const BottomTrayLongStarters = {
     />
   ),
 };
+
+export const BottomTrayWithHeaderActions = {
+  render: () => (
+    <BottomTrayStory
+      defaultOpen
+      welcomeMessage={SAMPLE_WELCOME_MESSAGE}
+      conversationStarters={SAMPLE_STARTERS}
+      headerActions={
+        <IconButton icon={<Share size={16} />} aria-label="Share" size="small" variant="tertiary" />
+      }
+    />
+  ),
+};
diff --git a/packages/react-ui/src/components/Shell/NewChatButton.tsx b/packages/react-ui/src/components/Shell/NewChatButton.tsx
index b00364979..bb1ced6d5 100644
--- a/packages/react-ui/src/components/Shell/NewChatButton.tsx
+++ b/packages/react-ui/src/components/Shell/NewChatButton.tsx
@@ -1,15 +1,34 @@
 import { useThreadList } from "@openuidev/react-headless";
 import clsx from "clsx";
-import { Plus } from "lucide-react";
+import { Plus, SquarePen } from "lucide-react";
 import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import { useShellStore } from "./store";
 
 export const NewChatButton = ({ className }: { className?: string }) => {
   const switchToNewThread = useThreadList((s) => s.switchToNewThread);
+  const { isSidebarOpen } = useShellStore((state) => ({
+    isSidebarOpen: state.isSidebarOpen,
+  }));
+
+  if (!isSidebarOpen) {
+    return (
+      <IconButton
+        icon={<SquarePen size="1em" />}
+        onClick={switchToNewThread}
+        variant="primary"
+        size="small"
+        className={clsx("openui-shell-new-chat-button_collapsed", className)}
+      />
+    );
+  }
 
   return (
     <Button
       className={clsx("openui-shell-new-chat-button", className)}
       iconRight={<Plus />}
+      variant="primary"
+      size="small"
       onClick={switchToNewThread}
     >
       New Chat
diff --git a/packages/react-ui/src/components/Shell/Sidebar.tsx b/packages/react-ui/src/components/Shell/Sidebar.tsx
index c141f44c0..65d5ec897 100644
--- a/packages/react-ui/src/components/Shell/Sidebar.tsx
+++ b/packages/react-ui/src/components/Shell/Sidebar.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { PanelLeft, PanelRight } from "lucide-react";
+import { ArrowLeftFromLine, ArrowRightFromLine } from "lucide-react";
 import { useEffect } from "react";
 import { useLayoutContext } from "../../context/LayoutContext";
 import { IconButton } from "../IconButton";
@@ -56,7 +56,13 @@ export const SidebarContainer = ({
   );
 };
 
-export const SidebarHeader = ({ className }: { className?: string }) => {
+export const SidebarHeader = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
   const { agentName, logoUrl, setIsSidebarOpen, isSidebarOpen } = useShellStore((state) => ({
     agentName: state.agentName,
     logoUrl: state.logoUrl,
@@ -65,18 +71,29 @@ export const SidebarHeader = ({ className }: { className?: string }) => {
   }));
 
   return (
-    <div className={clsx("openui-shell-sidebar-header", className)}>
-      <img src={logoUrl} alt={agentName} className="openui-shell-sidebar-header__logo" />
-      <div className="openui-shell-sidebar-header__agent-name">{agentName}</div>
-      <IconButton
-        icon={isSidebarOpen ? <PanelRight size="1em" /> : <PanelLeft size="1em" />}
-        onClick={() => {
-          setIsSidebarOpen(!isSidebarOpen);
-        }}
-        size="large"
-        variant="secondary"
-        className="openui-shell-sidebar-header__toggle-button"
-      />
+    <div
+      className={clsx(
+        "openui-shell-sidebar-header",
+        { "openui-shell-sidebar-header--collapsed": !isSidebarOpen },
+        className,
+      )}
+    >
+      <div className="openui-shell-sidebar-header__top-row">
+        <img src={logoUrl} alt={agentName} className="openui-shell-sidebar-header__logo" />
+        <div className="openui-shell-sidebar-header__agent-name">{agentName}</div>
+        <IconButton
+          icon={
+            isSidebarOpen ? <ArrowLeftFromLine size="1em" /> : <ArrowRightFromLine size="1em" />
+          }
+          onClick={() => {
+            setIsSidebarOpen(!isSidebarOpen);
+          }}
+          size="small"
+          variant="secondary"
+          className="openui-shell-sidebar-header__toggle-button"
+        />
+      </div>
+      {children}
     </div>
   );
 };
diff --git a/packages/react-ui/src/components/Shell/Thread.tsx b/packages/react-ui/src/components/Shell/Thread.tsx
index 86aaf21d8..254e37615 100644
--- a/packages/react-ui/src/components/Shell/Thread.tsx
+++ b/packages/react-ui/src/components/Shell/Thread.tsx
@@ -371,5 +371,15 @@ export const Messages = ({
   );
 };
 
+export const ThreadHeader = ({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  return <div className={clsx("openui-shell-thread-header", className)}>{children}</div>;
+};
+
 // Re-export Composer from components
 export { Composer } from "./components";
diff --git a/packages/react-ui/src/components/Shell/components/Composer.tsx b/packages/react-ui/src/components/Shell/components/Composer.tsx
index a73efc81d..b141a0e83 100644
--- a/packages/react-ui/src/components/Shell/components/Composer.tsx
+++ b/packages/react-ui/src/components/Shell/components/Composer.tsx
@@ -10,15 +10,16 @@ export interface ComposerProps {
   placeholder?: string;
 }
 
-export const Composer = ({ className, placeholder = "Type your message..." }: ComposerProps) => {
+export const Composer = ({ className, placeholder = "Type your query here" }: ComposerProps) => {
   const { textContent, setTextContent } = useComposerState();
   const processMessage = useThread((s) => s.processMessage);
   const cancelMessage = useThread((s) => s.cancelMessage);
   const isRunning = useThread((s) => s.isRunning);
+  const isLoadingMessages = useThread((s) => s.isLoadingMessages);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const handleSubmit = () => {
-    if (!textContent.trim() || isRunning) {
+    if (!textContent.trim() || isRunning || isLoadingMessages) {
       return;
     }
 
@@ -32,25 +33,30 @@ export const Composer = ({ className, placeholder = "Type your message..." }: Co
 
   useLayoutEffect(() => {
     const input = inputRef.current;
-    if (!input) {
-      return;
-    }
+    if (!input) return;
 
-    input.style.height = "auto";
-    input.style.height = `${input.scrollHeight}px`;
+    // Reset to 0 (not "auto") so scrollHeight reflects content, not container
+    input.style.height = "0px";
+    input.style.height = `${Math.max(input.scrollHeight, 24)}px`;
   }, [textContent]);
 
   return (
-    <div className={clsx("openui-shell-thread-composer", className)}>
+    <div
+      className={clsx("openui-shell-thread-composer", className)}
+      onClick={(e) => {
+        if (!(e.target as HTMLElement).closest("button, a, [role='button']")) {
+          inputRef.current?.focus();
+        }
+      }}
+    >
       <div className="openui-shell-thread-composer__input-wrapper">
         <textarea
           ref={inputRef}
-          rows={1}
-          autoFocus
           value={textContent}
           onChange={(e) => setTextContent(e.target.value)}
           className="openui-shell-thread-composer__input"
           placeholder={placeholder}
+          rows={1}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
               e.preventDefault();
@@ -58,10 +64,15 @@ export const Composer = ({ className, placeholder = "Type your message..." }: Co
             }
           }}
         />
-        <IconButton
-          onClick={isRunning ? cancelMessage : handleSubmit}
-          icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
-        />
+        <div className="openui-shell-thread-composer__action-bar">
+          <IconButton
+            onClick={isRunning ? cancelMessage : handleSubmit}
+            icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
+            size="medium"
+            variant="primary"
+            className="openui-shell-thread-composer__submit-button"
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx b/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx
index c9d3f1144..a4debec01 100644
--- a/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx
+++ b/packages/react-ui/src/components/Shell/components/DesktopWelcomeComposer.tsx
@@ -12,16 +12,17 @@ export interface DesktopWelcomeComposerProps {
 
 export const DesktopWelcomeComposer = ({
   className,
-  placeholder = "Type your message...",
+  placeholder = "Type your query here",
 }: DesktopWelcomeComposerProps) => {
   const { textContent, setTextContent } = useComposerState();
   const processMessage = useThread((s) => s.processMessage);
   const cancelMessage = useThread((s) => s.cancelMessage);
   const isRunning = useThread((s) => s.isRunning);
+  const isLoadingMessages = useThread((s) => s.isLoadingMessages);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const handleSubmit = () => {
-    if (!textContent.trim() || isRunning) {
+    if (!textContent.trim() || isRunning || isLoadingMessages) {
       return;
     }
 
@@ -35,38 +36,38 @@ export const DesktopWelcomeComposer = ({
 
   useLayoutEffect(() => {
     const input = inputRef.current;
-    if (!input) {
-      return;
-    }
+    if (!input) return;
 
-    input.style.height = "auto";
-    input.style.height = `${input.scrollHeight}px`;
+    // Reset to 0 (not "auto") so scrollHeight reflects content, not container
+    input.style.height = "0px";
+    input.style.height = `${Math.max(input.scrollHeight, 24)}px`;
   }, [textContent]);
 
   return (
     <div className={clsx("openui-shell-desktop-welcome-composer", className)}>
-      <div className="openui-shell-desktop-welcome-composer__input-container">
-        <textarea
-          autoFocus
-          ref={inputRef}
-          rows={1}
-          value={textContent}
-          onChange={(e) => setTextContent(e.target.value)}
-          className="openui-shell-desktop-welcome-composer__input"
-          placeholder={placeholder}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-              e.preventDefault();
-              handleSubmit();
-            }
-          }}
-        />
-      </div>
-      <div className="openui-shell-desktop-welcome-composer__actions">
+      <textarea
+        ref={inputRef}
+        value={textContent}
+        onChange={(e) => setTextContent(e.target.value)}
+        className="openui-shell-desktop-welcome-composer__input"
+        placeholder={placeholder}
+        rows={1}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+          }
+        }}
+      />
+      <div className="openui-shell-desktop-welcome-composer__action-bar">
         <IconButton
           onClick={isRunning ? cancelMessage : handleSubmit}
           disabled={!textContent.trim() && !isRunning}
+          aria-label={isRunning ? "Cancel" : "Send"}
           icon={isRunning ? <Square size="1em" fill="currentColor" /> : <ArrowUp size="1em" />}
+          size="medium"
+          variant="primary"
+          className="openui-shell-desktop-welcome-composer__submit-button"
         />
       </div>
     </div>
diff --git a/packages/react-ui/src/components/Shell/components/composer.scss b/packages/react-ui/src/components/Shell/components/composer.scss
index 48aef2459..1ff0fec4d 100644
--- a/packages/react-ui/src/components/Shell/components/composer.scss
+++ b/packages/react-ui/src/components/Shell/components/composer.scss
@@ -20,30 +20,55 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   }
 
   &__input-wrapper {
-    border: 1.256px solid cssUtils.$border-default;
-    border-radius: cssUtils.$radius-xl;
+    background-color: cssUtils.$foreground;
+    border: 1px solid cssUtils.$border-interactive;
+    border-radius: cssUtils.$radius-2xl;
+    box-shadow: cssUtils.$shadow-s;
+    overflow: clip;
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
     gap: cssUtils.$space-s;
-    padding: cssUtils.$space-m;
+    padding: cssUtils.$space-s;
   }
 
   &__input {
-    flex-grow: 1;
-    padding: 0;
+    scrollbar-width: thin;
+    scrollbar-color: cssUtils.$elevated transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: cssUtils.$elevated;
+      border-radius: cssUtils.$radius-full;
+    }
+
+    padding: 0 cssUtils.$space-3xs;
     resize: none;
-    margin: auto 0px;
-    min-height: 1lh;
-    max-height: 154px;
+    max-height: 200px;
     outline: none;
     border: none;
     background: transparent;
-    overflow: hidden;
+    overflow-y: auto;
     @include cssUtils.typography(body, default);
     color: cssUtils.$text-neutral-primary;
 
     &::placeholder {
-      color: cssUtils.$text-neutral-tertiary;
+      color: cssUtils.$text-neutral-secondary;
     }
   }
+
+  &__action-bar {
+    display: flex;
+    align-items: center;
+  }
+
+  &__submit-button {
+    margin-left: auto;
+  }
 }
diff --git a/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss b/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss
index 27a607572..93636644f 100644
--- a/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss
+++ b/packages/react-ui/src/components/Shell/components/desktopWelcomeComposer.scss
@@ -1,34 +1,43 @@
 @use "../../../cssUtils" as cssUtils;
 
 .openui-shell-desktop-welcome-composer {
-  display: flex;
-  flex-direction: column;
-  gap: cssUtils.$space-m;
-  padding: cssUtils.$space-m;
   background-color: cssUtils.$foreground;
   border: 1px solid cssUtils.$border-interactive;
   border-radius: cssUtils.$radius-2xl;
   box-shadow: cssUtils.$shadow-s;
+  overflow: clip;
+  display: flex;
+  flex-direction: column;
+  gap: cssUtils.$space-m;
+  padding: cssUtils.$space-m;
   width: 100%;
   max-width: 800px;
 
-  // Input container
-  &__input-container {
-    display: flex;
-    padding-left: cssUtils.$space-3xs;
-  }
-
-  // Textarea input
   &__input {
-    flex: 1;
-    padding: 0;
+    scrollbar-width: thin;
+    scrollbar-color: cssUtils.$elevated transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: cssUtils.$elevated;
+      border-radius: cssUtils.$radius-full;
+    }
+
+    padding: 0 cssUtils.$space-3xs;
     resize: none;
     max-height: 200px;
     min-height: 24px;
     outline: none;
     border: none;
     background: transparent;
-    overflow: hidden;
+    overflow-y: auto;
     @include cssUtils.typography(body, default);
     color: cssUtils.$text-neutral-primary;
 
@@ -37,24 +46,12 @@
     }
   }
 
-  // Actions row (attachment + submit)
-  &__actions {
+  &__action-bar {
     display: flex;
-    flex-direction: row-reverse;
     align-items: center;
-    justify-content: space-between;
   }
 
-  // Action buttons base
-  &__action-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: cssUtils.$radius-m;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    flex-shrink: 0;
+  &__submit-button {
+    margin-left: auto;
   }
 }
diff --git a/packages/react-ui/src/components/Shell/shell.scss b/packages/react-ui/src/components/Shell/shell.scss
index 0911ae827..542413566 100644
--- a/packages/react-ui/src/components/Shell/shell.scss
+++ b/packages/react-ui/src/components/Shell/shell.scss
@@ -14,7 +14,6 @@
   position: relative;
   height: 100dvh;
   width: 100dvw;
-  padding: cssUtils.$space-m;
   overflow: hidden;
 
   background: cssUtils.$chat-container-bg;
@@ -31,4 +30,8 @@
 .openui-shell-new-chat-button {
   width: 100%;
   justify-content: space-between;
+
+  .openui-shell-sidebar-header--collapsed & {
+    width: auto;
+  }
 }
diff --git a/packages/react-ui/src/components/Shell/sidebar.scss b/packages/react-ui/src/components/Shell/sidebar.scss
index cd664fb29..638ed7305 100644
--- a/packages/react-ui/src/components/Shell/sidebar.scss
+++ b/packages/react-ui/src/components/Shell/sidebar.scss
@@ -6,11 +6,9 @@ $sidebar-mobile-width: 294px;
 $sidebar-mobile-padding: cssUtils.$space-l;
 
 .openui-shell-sidebar-container {
-  background: cssUtils.$foreground;
-  border: 1px solid cssUtils.$border-default;
+  border-right: 1px solid cssUtils.$border-default;
   height: 100%;
   width: $sidebar-width;
-  border-radius: cssUtils.$radius-m;
   padding: $sidebar-padding;
   display: flex;
   flex-direction: column;
@@ -34,16 +32,15 @@ $sidebar-mobile-padding: cssUtils.$space-l;
   }
 
   &--collapsed {
-    width: 104px; // Fixed width for collapsed state (logo:36px + button:40px + gaps:12px + padding:16px)
-    height: min-content;
+    width: 52px;
     transform: translateX(0);
-    gap: 0;
+    gap: cssUtils.$space-xs;
 
     .openui-shell-container--mobile & {
       width: $sidebar-mobile-width;
       height: 100%;
       left: -$sidebar-mobile-width;
-      transform: none; // Reset transform for mobile
+      transform: none;
     }
   }
 
@@ -54,13 +51,22 @@ $sidebar-mobile-padding: cssUtils.$space-l;
 
 .openui-shell-sidebar-header {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: cssUtils.$space-s;
 
+  &__top-row {
+    display: flex;
+    align-items: center;
+    gap: cssUtils.$space-s;
+  }
+
   &__logo {
     width: 36px;
     height: 36px;
     border-radius: cssUtils.$radius-s;
+    transition:
+      width 0.3s ease-in-out,
+      height 0.3s ease-in-out;
   }
 
   &__agent-name {
@@ -72,6 +78,20 @@ $sidebar-mobile-padding: cssUtils.$space-l;
       display: none;
     }
   }
+
+  &--collapsed {
+    align-items: center;
+
+    .openui-shell-sidebar-header__top-row {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .openui-shell-sidebar-header__logo {
+      width: 28px;
+      height: 28px;
+    }
+  }
 }
 
 .openui-shell-sidebar-content {
@@ -95,7 +115,7 @@ $sidebar-mobile-padding: cssUtils.$space-l;
     display: none;
     transition:
       opacity 0.2s ease-in-out,
-      display 0s 0.5s; // Delay display:none until after transitions complete
+      display 0s 0.5s;
   }
 }
 
diff --git a/packages/react-ui/src/components/Shell/stories/Shell.mdx b/packages/react-ui/src/components/Shell/stories/Shell.mdx
index 3560760c1..313910921 100644
--- a/packages/react-ui/src/components/Shell/stories/Shell.mdx
+++ b/packages/react-ui/src/components/Shell/stories/Shell.mdx
@@ -19,7 +19,8 @@ ChatProvider
     │       ├── SidebarSeparator
     │       └── ThreadList
     └── ThreadContainer          (main chat area)
-        ├── MobileHeader         (mobile-only header)
+        ├── MobileHeader         (mobile-only header, supports rightChildren)
+        ├── ThreadHeader         (desktop-only header for custom actions)
         ├── ScrollArea           (scrollable message area)
         │   └── Messages
         ├── ConversationStarter  (optional, shown when empty)
@@ -161,12 +162,50 @@ Wrapper for the main chat area with optional artifact panel support.
 
 ### MobileHeader
 
-Header shown only on mobile devices with sidebar toggle.
+Header shown only on mobile devices with sidebar toggle and optional custom actions.
 
 ```tsx
-<MobileHeader />
+<MobileHeader
+  rightChildren={
+    <IconButton icon={<Share size={16} />} aria-label="Share" size="medium" variant="secondary" />
+  }
+/>
+```
+
+**Props:**
+
+- `className` - Optional additional CSS class
+- `rightChildren` - Custom content rendered on the right side, before the "new chat" button
+
+### ThreadHeader
+
+Desktop-only header bar for custom actions (model selector, share button, etc.). Automatically hidden on mobile.
+
+```tsx
+import { ThreadHeader } from "@openuidev/react-ui/Shell";
+
+<ThreadContainer>
+  <MobileHeader />
+  <ThreadHeader>
+    <Button iconLeft={<ChevronDown size={14} />} variant="secondary" size="small">
+      GPT-4o
+    </Button>
+    <Button iconLeft={<Share size={14} />} variant="secondary" size="small">
+      Share
+    </Button>
+  </ThreadHeader>
+  <ScrollArea>
+    <Messages loader={<MessageLoading />} />
+  </ScrollArea>
+  <Composer />
+</ThreadContainer>;
 ```
 
+**Props:**
+
+- `children` - Content to render inside the header (uses flexbox with `justify-content: flex-end`)
+- `className` - Optional additional CSS class
+
 ### ScrollArea
 
 Scrollable container for messages with smart scroll behavior.
@@ -349,6 +388,7 @@ All Shell components use the `openui-shell-` prefix:
 - `.openui-shell-thread-messages`
 - `.openui-shell-thread-message-user`
 - `.openui-shell-thread-message-assistant`
+- `.openui-shell-thread-header`
 - `.openui-shell-thread-composer`
 - `.openui-shell-conversation-starter`
 - `.openui-shell-conversation-starter-item`
diff --git a/packages/react-ui/src/components/Shell/stories/Shell.stories.tsx b/packages/react-ui/src/components/Shell/stories/Shell.stories.tsx
index b2f7f2cd5..e689f4437 100644
--- a/packages/react-ui/src/components/Shell/stories/Shell.stories.tsx
+++ b/packages/react-ui/src/components/Shell/stories/Shell.stories.tsx
@@ -1,11 +1,20 @@
 import { ChatProvider, Message, type Thread } from "@openuidev/react-headless";
-import { MessageSquare, Sparkles, Zap } from "lucide-react";
+import { MessageSquare, Share, Sparkles, Zap } from "lucide-react";
+import { Button } from "../../Button";
+import { IconButton } from "../../IconButton";
 import { Container } from "../Container";
 import { ConversationStarter } from "../ConversationStarter";
 import { MobileHeader } from "../MobileHeader";
 import { NewChatButton } from "../NewChatButton";
 import { SidebarContainer, SidebarContent, SidebarHeader, SidebarSeparator } from "../Sidebar";
-import { Composer, MessageLoading, Messages, ScrollArea, ThreadContainer } from "../Thread";
+import {
+  Composer,
+  MessageLoading,
+  Messages,
+  ScrollArea,
+  ThreadContainer,
+  ThreadHeader,
+} from "../Thread";
 import { ThreadList } from "../ThreadList";
 import { WelcomeScreen } from "../WelcomeScreen";
 import logoUrl from "./thesysdev_logo.jpeg";
@@ -52,7 +61,6 @@ const SAMPLE_STARTERS = [
   {
     displayText: "What can you do?",
     prompt: "What can you do?",
-    // icon undefined = shows default lightbulb
   },
   {
     displayText: "Tell me about your features",
@@ -62,7 +70,7 @@ const SAMPLE_STARTERS = [
   {
     displayText: "Show me some examples (no icon)",
     prompt: "Show me some examples",
-    icon: <></>, // Empty fragment = no icon
+    icon: <></>,
   },
 ];
 
@@ -80,7 +88,6 @@ const LONG_STARTERS = [
   {
     displayText: "Tell me about your advanced features and how I can use them effectively",
     prompt: "Tell me about your features",
-    // Default lightbulb icon
   },
 ];
 
@@ -125,15 +132,91 @@ export const Default = {
     >
       <Container logoUrl={logoUrl} agentName="OpenUI">
         <SidebarContainer>
-          <SidebarHeader />
+          <SidebarHeader>
+            <NewChatButton />
+          </SidebarHeader>
           <SidebarContent>
+            <SidebarSeparator />
+            <ThreadList />
+          </SidebarContent>
+        </SidebarContainer>
+        <ThreadContainer>
+          <MobileHeader
+            rightChildren={
+              <IconButton
+                icon={<Share size={16} />}
+                aria-label="Share"
+                size="medium"
+                variant="secondary"
+              />
+            }
+          />
+          <ThreadHeader>
+            <Button iconLeft={<Share size={16} />} variant="secondary" size="small">
+              Share
+            </Button>
+          </ThreadHeader>
+          <ScrollArea>
+            <Messages loader={<MessageLoading />} />
+          </ScrollArea>
+          <ConversationStarter starters={SAMPLE_STARTERS} variant={variant} />
+          <Composer />
+        </ThreadContainer>
+      </Container>
+    </ChatProvider>
+  ),
+};
+
+export const WithThreadHeader = {
+  args: {
+    variant: "short",
+  },
+  render: ({ variant }: { variant: "short" | "long" }) => (
+    <ChatProvider
+      processMessage={async ({ messages }: { messages: Message[] }) => {
+        const content = getLastUserContent(messages);
+        return mockSSEResponse(`You asked: "${content}"`, 1000);
+      }}
+      fetchThreadList={async () => ({ threads: [] })}
+      createThread={async () => ({
+        id: crypto.randomUUID(),
+        title: "New Chat",
+        createdAt: Date.now(),
+      })}
+      deleteThread={async () => {}}
+      updateThread={async (t: Thread) => t}
+      loadThread={async () => []}
+    >
+      <Container logoUrl={logoUrl} agentName="OpenUI">
+        <SidebarContainer>
+          <SidebarHeader>
             <NewChatButton />
+          </SidebarHeader>
+          <SidebarContent>
             <SidebarSeparator />
             <ThreadList />
           </SidebarContent>
         </SidebarContainer>
         <ThreadContainer>
           <MobileHeader />
+          <ThreadHeader>
+            <select
+              style={{
+                padding: "4px 8px",
+                borderRadius: "6px",
+                border: "1px solid var(--openui-stroke-default, #ccc)",
+                background: "var(--openui-bg-fill, #fff)",
+                fontSize: "13px",
+              }}
+            >
+              <option>GPT-4o</option>
+              <option>Claude 3.5 Sonnet</option>
+              <option>Gemini Pro</option>
+            </select>
+            <Button iconLeft={<Share size={16} />} variant="secondary" size="small">
+              Share
+            </Button>
+          </ThreadHeader>
           <ScrollArea>
             <Messages loader={<MessageLoading />} />
           </ScrollArea>
@@ -167,15 +250,25 @@ export const WithConversationStarter = {
     >
       <Container logoUrl={logoUrl} agentName="OpenUI">
         <SidebarContainer>
-          <SidebarHeader />
-          <SidebarContent>
+          <SidebarHeader>
             <NewChatButton />
+          </SidebarHeader>
+          <SidebarContent>
             <SidebarSeparator />
             <ThreadList />
           </SidebarContent>
         </SidebarContainer>
         <ThreadContainer>
-          <MobileHeader />
+          <MobileHeader
+            rightChildren={
+              <IconButton
+                icon={<Share size={16} />}
+                aria-label="Share"
+                size="medium"
+                variant="secondary"
+              />
+            }
+          />
           <ScrollArea>
             <Messages loader={<MessageLoading />} />
           </ScrollArea>
@@ -209,15 +302,25 @@ export const LongVariant = {
     >
       <Container logoUrl={logoUrl} agentName="OpenUI">
         <SidebarContainer>
-          <SidebarHeader />
-          <SidebarContent>
+          <SidebarHeader>
             <NewChatButton />
+          </SidebarHeader>
+          <SidebarContent>
             <SidebarSeparator />
             <ThreadList />
           </SidebarContent>
         </SidebarContainer>
         <ThreadContainer>
-          <MobileHeader />
+          <MobileHeader
+            rightChildren={
+              <IconButton
+                icon={<Share size={16} />}
+                aria-label="Share"
+                size="medium"
+                variant="secondary"
+              />
+            }
+          />
           <ScrollArea>
             <Messages loader={<MessageLoading />} />
           </ScrollArea>
@@ -229,7 +332,6 @@ export const LongVariant = {
   ),
 };
 
-// WelcomeScreen with props-based content
 export const WithWelcomeScreen = {
   args: {
     variant: "short",
@@ -252,15 +354,25 @@ export const WithWelcomeScreen = {
     >
       <Container logoUrl={logoUrl} agentName="OpenUI Assistant">
         <SidebarContainer>
-          <SidebarHeader />
-          <SidebarContent>
+          <SidebarHeader>
             <NewChatButton />
+          </SidebarHeader>
+          <SidebarContent>
             <SidebarSeparator />
             <ThreadList />
           </SidebarContent>
         </SidebarContainer>
         <ThreadContainer>
-          <MobileHeader />
+          <MobileHeader
+            rightChildren={
+              <IconButton
+                icon={<Share size={16} />}
+                aria-label="Share"
+                size="medium"
+                variant="secondary"
+              />
+            }
+          />
           <WelcomeScreen
             title="Hi, I'm OpenUI Assistant"
             description="I can help you with questions about your account, products, and more."
@@ -279,7 +391,6 @@ export const WithWelcomeScreen = {
   ),
 };
 
-// WelcomeScreen with custom children
 export const WithCustomWelcomeScreen = {
   args: {
     variant: "short",
@@ -302,15 +413,25 @@ export const WithCustomWelcomeScreen = {
     >
       <Container logoUrl={logoUrl} agentName="OpenUI Assistant">
         <SidebarContainer>
-          <SidebarHeader />
-          <SidebarContent>
+          <SidebarHeader>
             <NewChatButton />
+          </SidebarHeader>
+          <SidebarContent>
             <SidebarSeparator />
             <ThreadList />
           </SidebarContent>
         </SidebarContainer>
         <ThreadContainer>
-          <MobileHeader />
+          <MobileHeader
+            rightChildren={
+              <IconButton
+                icon={<Share size={16} />}
+                aria-label="Share"
+                size="medium"
+                variant="secondary"
+              />
+            }
+          />
           <WelcomeScreen>
             <div style={{ textAlign: "center" }}>
               <div
diff --git a/packages/react-ui/src/components/Shell/thread.scss b/packages/react-ui/src/components/Shell/thread.scss
index 8b2ed712b..df3f3bf12 100644
--- a/packages/react-ui/src/components/Shell/thread.scss
+++ b/packages/react-ui/src/components/Shell/thread.scss
@@ -273,6 +273,22 @@ $center-align-spacing: calc(32px + cssUtils.$space-s);
   }
 }
 
+// =============================================================================
+// Thread Header
+// =============================================================================
+
+.openui-shell-thread-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: cssUtils.$space-m cssUtils.$space-s cssUtils.$space-xs;
+  flex-shrink: 0;
+
+  .openui-shell-container--mobile & {
+    display: none;
+  }
+}
+
 .openui-shell-thread-message-loading {
   display: flex;
   padding: 0 $center-align-spacing;
diff --git a/packages/react-ui/src/components/index.scss b/packages/react-ui/src/components/index.scss
index e9a4a77fc..d7f452eed 100644
--- a/packages/react-ui/src/components/index.scss
+++ b/packages/react-ui/src/components/index.scss
@@ -1,3 +1,8 @@
+// AUTO-GENERATED FILE — Do not manually edit this file.
+// Generated by: node src/scripts/scss-import.js
+// To regenerate, run from packages/react-ui:
+//   node src/scripts/scss-import.js
+
 @use "../openui-defaults.scss";
 
 @forward "./Accordion/accordion.scss";
@@ -9,11 +14,11 @@
 @forward "./Card/card.scss";
 @forward "./CardHeader/cardHeader.scss";
 @forward "./Carousel/carousel.scss";
+@forward "./Charts/charts.scss";
 @forward "./CheckBoxGroup/checkBoxGroup.scss";
 @forward "./CheckBoxItem/checkBoxItem.scss";
 @forward "./CodeBlock/codeBlock.scss";
 @forward "./CopilotShell/copilotShell.scss";
-@forward "./OpenUIChat/openUIChat.scss";
 @forward "./DatePicker/datePicker.scss";
 @forward "./FollowUpBlock/followUpBlock.scss";
 @forward "./FollowUpItem/followUpItem.scss";
@@ -28,9 +33,12 @@
 @forward "./ListItem/listItem.scss";
 @forward "./MarkDownRenderer/markDownRenderer.scss";
 @forward "./MessageLoading/messageLoading.scss";
+@forward "./OpenUIChat/openUIChat.scss";
 @forward "./RadioGroup/radioGroup.scss";
 @forward "./RadioItem/radioItem.scss";
+@forward "./SectionBlock/sectionBlock.scss";
 @forward "./Select/select.scss";
+@forward "./Separator/separator.scss";
 @forward "./Shell/shell.scss";
 @forward "./Slider/slider.scss";
 @forward "./Steps/steps.scss";
@@ -41,12 +49,9 @@
 @forward "./Tag/tag.scss";
 @forward "./TagBlock/tagBlock.scss";
 @forward "./TextArea/textArea.scss";
+@forward "./TextCallout/textCallout.scss";
 @forward "./TextContent/textContent.scss";
 @forward "./ToggleGroup/toggleGroup.scss";
 @forward "./ToggleItem/toggleItem.scss";
-@forward "./TextCallout/textCallout.scss";
 @forward "./ToolCall/toolCall.scss";
 @forward "./ToolResult/toolResult.scss";
-@forward "./Charts/charts.scss";
-@forward "./Separator/separator.scss";
-@forward "./Callout/callout.scss";
diff --git a/packages/react-ui/src/scripts/scss-import.js b/packages/react-ui/src/scripts/scss-import.js
index 55a58b164..a0f12893c 100644
--- a/packages/react-ui/src/scripts/scss-import.js
+++ b/packages/react-ui/src/scripts/scss-import.js
@@ -9,7 +9,8 @@ const dirname = path.dirname(new URL(import.meta.url).pathname);
 function generateScssIndex() {
   // Go up one directory to reach src, then into components
   const srcDir = path.join(dirname, "..", "components");
-  let indexScssContent = '@use "../openui-defaults.scss";\n\n';
+  let indexScssContent = `// AUTO-GENERATED FILE — Do not manually edit this file.\n// Generated by: node src/scripts/scss-import.js\n// To regenerate, run from packages/react-ui:\n//   node src/scripts/scss-import.js\n\n`;
+  indexScssContent += '@use "../openui-defaults.scss";\n\n';
 
   // Read all component directories
   // this produces an array of all the component directories
@@ -19,25 +20,25 @@ function generateScssIndex() {
   // for each component, it gets the component's source path and stylesheet name
   components.forEach((component) => {
     const componentSrcPath = path.join(srcDir, component);
-    const componentStylesheetName = `${camelCase(component)}.scss`;
 
     // if the component is not a directory, it skips it
     if (!fs.statSync(componentSrcPath).isDirectory()) {
       return;
     }
 
-    // this gets the path to the component's stylesheet
-    const stylePath = path.join(componentSrcPath, componentStylesheetName);
-
-    // if the stylesheet exists, it adds a forward statement to the index.scss file
-    if (fs.existsSync(stylePath)) {
-      // this creates a relative path from the index.scss file to the component's stylesheet
-      const relativePath = `./${component}/${componentStylesheetName}`;
-
-      // this appends the forward statement to the indexScssContent variable
+    // Find the component's scss file by matching against the actual files in the directory
+    // instead of computing the name with camelCase, to avoid case-sensitivity issues (e.g. OpenUIChat -> openUIChat.scss vs openUiChat.scss)
+    const expectedName = camelCase(component);
+    const files = fs.readdirSync(componentSrcPath);
+    const scssFile = files.find(
+      (f) =>
+        f.endsWith(".scss") && f.replace(".scss", "").toLowerCase() === expectedName.toLowerCase(),
+    );
+
+    if (scssFile) {
+      const relativePath = `./${component}/${scssFile}`;
       indexScssContent += `@forward "${relativePath}";\n`;
     } else {
-      // if the stylesheet does not exist, it logs a warning
       if (component !== "ThemeProvider") {
         console.warn(`No SCSS file found for ${component}`);
       }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 60c96deeb..c4be2acb5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,7 +64,7 @@ importers:
         version: 16.6.5(@mdx-js/mdx@3.1.1)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.570.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
       fumadocs-mdx:
         specifier: 14.2.8
-        version: 14.2.8(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.5(@mdx-js/mdx@3.1.1)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.570.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react@19.2.4)(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(sass@1.89.2))
+        version: 14.2.8(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.5(@mdx-js/mdx@3.1.1)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.570.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react@19.2.4)(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.89.2)(terser@5.43.0)(tsx@4.20.3)(yaml@2.8.0))
       fumadocs-ui:
         specifier: 16.6.5
         version: 16.6.5(@takumi-rs/image-response@0.68.17)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(fumadocs-core@16.6.5(@mdx-js/mdx@3.1.1)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.570.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
@@ -9661,8 +9661,8 @@ packages:
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
-  zod@3.25.67:
-    resolution: {integrity: sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==}
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
   zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
@@ -9697,7 +9697,7 @@ snapshots:
   '@ag-ui/core@0.0.45':
     dependencies:
       rxjs: 7.8.1
-      zod: 3.25.67
+      zod: 3.25.76
 
   '@ai-sdk/gateway@3.0.66(zod@4.3.6)':
     dependencies:
@@ -15868,7 +15868,7 @@ snapshots:
       eslint: 10.0.2(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.2(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.2(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.2(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@10.0.2(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@10.0.2(jiti@2.6.1))
       eslint-plugin-react-hooks: 7.0.1(eslint@10.0.2(jiti@2.6.1))
@@ -15925,7 +15925,7 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.2(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.2(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
@@ -15944,7 +15944,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.2(jiti@2.6.1)))(eslint@10.0.2(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.2(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -15955,7 +15955,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.29.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.29.0(jiti@2.6.1)))(eslint@9.29.0(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.29.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.29.0(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -15966,7 +15966,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.2(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint@10.0.2(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -15977,7 +15977,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 10.0.2(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@10.0.2(jiti@2.6.1)))(eslint@10.0.2(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.56.1(eslint@10.0.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@10.0.2(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -16006,7 +16006,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.29.0(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.29.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.29.0(jiti@2.6.1)))(eslint@9.29.0(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.56.1(eslint@9.29.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.29.0(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -16635,7 +16635,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-mdx@14.2.8(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.5(@mdx-js/mdx@3.1.1)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.570.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react@19.2.4)(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(sass@1.89.2)):
+  fumadocs-mdx@14.2.8(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.5(@mdx-js/mdx@3.1.1)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.570.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.89.2))(react@19.2.4)(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.89.2)(terser@5.43.0)(tsx@4.20.3)(yaml@2.8.0)):
     dependencies:
       '@mdx-js/mdx': 3.1.1
       '@standard-schema/spec': 1.1.0
@@ -21036,7 +21036,7 @@ snapshots:
     dependencies:
       zod: 4.3.6
 
-  zod@3.25.67: {}
+  zod@3.25.76: {}
 
   zod@4.3.6: {}