From e0c2d4a32d562e2920b7d93f41a5d5734d4de924 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 11 Jul 2026 20:27:20 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=E4=B8=BA=20prompt=20input=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=20border-beam=20pulse-inner=20=E5=91=BC=E5=90=B8?=
 =?UTF-8?q?=E5=85=89=E6=99=95=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

按 https://beam.jakubantalik.com/pulse 的 UI 风格，用 border-beam 的
pulse-inner 变体包裹 composer 外壳：彩色光晕贴着输入框内侧四周弥散、
缓慢呼吸。新增 ComposerBeam 包装组件，跟随 next-themes 的明暗主题，
并做了 SSR hydration 门控；wrapper 的 overflow:hidden 会裁掉外壳投影，
故将浅色模式投影上移到 wrapper。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DwZ3V6EaT97mtczZaqa2LJ
---
 components/assistant-ui/composer-beam.tsx | 35 +++++++++++++++++++++++
 components/assistant-ui/thread.tsx        |  5 +++-
 components/examples/base.tsx              |  3 ++
 package.json                              |  1 +
 pnpm-lock.yaml                            | 14 +++++++++
 5 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 components/assistant-ui/composer-beam.tsx

diff --git a/components/assistant-ui/composer-beam.tsx b/components/assistant-ui/composer-beam.tsx
new file mode 100644
index 00000000..da2a5996
--- /dev/null
+++ b/components/assistant-ui/composer-beam.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useEffect, useState, type FC, type ReactNode } from "react"
+import { BorderBeam } from "border-beam"
+import { useTheme } from "next-themes"
+
+/**
+ * 用 border-beam 的 pulse-inner 呼吸光晕包裹 composer 外壳，
+ * 复刻 https://beam.jakubantalik.com/pulse 的光影效果：
+ * 彩色光晕贴着输入框内侧四周弥散、缓慢呼吸（裁剪在边框以内），
+ * 而非仅沿边框流动的一条光线。
+ * 圆角由组件自动探测子元素的 border-radius（--composer-radius）。
+ */
+export const ComposerBeam: FC<{ children: ReactNode }> = ({ children }) => {
+  const { resolvedTheme } = useTheme()
+
+  // SSR 时 resolvedTheme 为 undefined，客户端首帧可能已解析出 light，
+  // 直接使用会导致 BorderBeam 内联 <style> 的 hydration 不匹配。
+  // 挂载后再切换到真实主题，服务端与客户端首帧统一按 dark 渲染。
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  // wrapper 自带 overflow:hidden 会裁掉外壳的投影，
+  // 所以把浅色模式的投影从外壳复制到 wrapper 上。
+  return (
+    <BorderBeam
+      size="pulse-inner"
+      colorVariant="colorful"
+      theme={mounted && resolvedTheme === "light" ? "light" : "dark"}
+      className="w-full rounded-(--composer-radius) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-none"
+    >
+      {children}
+    </BorderBeam>
+  )
+}
diff --git a/components/assistant-ui/thread.tsx b/components/assistant-ui/thread.tsx
index 5c5b0ae8..36e06069 100644
--- a/components/assistant-ui/thread.tsx
+++ b/components/assistant-ui/thread.tsx
@@ -5,6 +5,7 @@ import {
   ComposerAttachments,
   UserMessageAttachments,
 } from "@/components/assistant-ui/attachment";
+import { ComposerBeam } from "@/components/assistant-ui/composer-beam";
 import { ComposerPdfInsights } from "@/components/assistant-ui/pdf-insights";
 import { DeepResearchToggle } from "@/components/assistant-ui/deep-research-toggle";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
@@ -213,13 +214,15 @@ const Composer: FC = () => {
   return (
     <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
       <ComposerPdfInsights />
-      <ComposerPrimitive.AttachmentDropzone render={<div data-slot="aui_composer-shell" className="border-border/60 data-[dragging=true]:border-ring focus-within:border-border dark:border-muted-foreground/15 dark:focus-within:border-muted-foreground/30 flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-(--composer-bg) p-(--composer-padding) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-[border-color,box-shadow] focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] data-[dragging=true]:border-dashed data-[dragging=true]:bg-[color-mix(in_oklab,var(--color-accent)_50%,var(--color-background))] dark:shadow-none" />}><ComposerAttachments /><ComposerPrimitive.Input
+      <ComposerBeam>
+        <ComposerPrimitive.AttachmentDropzone render={<div data-slot="aui_composer-shell" className="border-border/60 data-[dragging=true]:border-ring focus-within:border-border dark:border-muted-foreground/15 dark:focus-within:border-muted-foreground/30 flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-(--composer-bg) p-(--composer-padding) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-[border-color,box-shadow] focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] data-[dragging=true]:border-dashed data-[dragging=true]:bg-[color-mix(in_oklab,var(--color-accent)_50%,var(--color-background))] dark:shadow-none" />}><ComposerAttachments /><ComposerPrimitive.Input
                       placeholder="Send a message..."
                       className="aui-composer-input placeholder:text-muted-foreground/80 max-h-32 min-h-10 w-full resize-none bg-transparent px-2.5 py-1 text-base outline-none"
                       rows={1}
                       autoFocus
                       aria-label="Message input"
                     /><ComposerAction /></ComposerPrimitive.AttachmentDropzone>
+      </ComposerBeam>
     </ComposerPrimitive.Root>
   );
 };
diff --git a/components/examples/base.tsx b/components/examples/base.tsx
index bcf8fb42..ff4d9107 100644
--- a/components/examples/base.tsx
+++ b/components/examples/base.tsx
@@ -4,6 +4,7 @@ import {
   ComposerAttachments,
   UserMessageAttachments,
 } from "@/components/assistant-ui/attachment";
+import { ComposerBeam } from "@/components/assistant-ui/composer-beam";
 import { ComposerPdfInsights } from "@/components/assistant-ui/pdf-insights";
 import { DeepResearchToggle } from "@/components/assistant-ui/deep-research-toggle";
 import {
@@ -570,6 +571,7 @@ const Composer: FC = () => {
   return (
     <ComposerPrimitive.Unstable_TriggerPopoverRoot>
       <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
+        <ComposerBeam>
         <ComposerPrimitive.AttachmentDropzone asChild>
           <div
             data-slot="aui_composer-shell"
@@ -586,6 +588,7 @@ const Composer: FC = () => {
             <ComposerAction />
           </div>
         </ComposerPrimitive.AttachmentDropzone>
+        </ComposerBeam>
         <ComposerTriggerPopover char="@" {...mention} />
         <ComposerTriggerPopover
           char="/"
diff --git a/package.json b/package.json
index 0e6f7b82..751c005e 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "ai": "^7.0.14",
     "assistant-stream": "^0.3.25",
     "beautiful-mermaid": "^1.1.3",
+    "border-beam": "^1.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f22eef25..42bc3cc5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       beautiful-mermaid:
         specifier: ^1.1.3
         version: 1.1.3
+      border-beam:
+        specifier: ^1.3.0
+        version: 1.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -3014,6 +3017,12 @@ packages:
     resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
     engines: {node: '>=18'}
 
+  border-beam@1.3.0:
+    resolution: {integrity: sha512-oZSISp3aQau4ASTmzm5pzxeBinO6Fh2HW0gyEixJgtpUZvRiU0vNpP+IwGRrNpIyqPjA7Rf5EBnVqDSJ49cm5w==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   bowser@2.14.1:
     resolution: {integrity: sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg==}
 
@@ -8735,6 +8744,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  border-beam@1.3.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   bowser@2.14.1: {}
 
   brace-expansion@1.1.15:

From bb87bc9072f59eb3bc4631cba0d5290bd5c36fb2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 11 Jul 2026 20:52:33 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20beam-demo=20=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=9A=E4=BE=A7=E8=BE=B9=E6=A0=8F=E4=B8=8E=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E5=85=A8=E9=93=BE=E8=B7=AF=E6=8E=A5=E5=85=A5=20pulse?=
 =?UTF-8?q?=20=E5=85=89=E6=99=95=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 抽出通用 PulseBeam 组件（pulse-inner 呼吸光晕 + 主题跟随 +
  useSyncExternalStore 水合门控），ComposerBeam 改为复用它
- ThreadListSidebar（assistant-ui 侧边栏组件）面板接入光晕，
  SidebarRail 留在光晕外避免被 overflow:hidden 裁掉
- 抽出共享 useThreadChatRuntime（原 app/page.tsx 内联的
  runtime 组合），首页与 demo 页共用
- 新增 /beam-demo：floating 侧边栏 + Thread，走完整聊天 runtime
  （MiniMax 流式 + Postgres 线程持久化）

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DwZ3V6EaT97mtczZaqa2LJ
---
 app/beam-demo/page.tsx                        | 39 ++++++++++++
 app/page.tsx                                  | 37 +----------
 components/assistant-ui/composer-beam.tsx     | 32 +++-------
 components/assistant-ui/pulse-beam.tsx        | 47 ++++++++++++++
 .../assistant-ui/threadlist-sidebar.tsx       | 61 ++++++++++---------
 lib/chat/use-thread-chat-runtime.ts           | 55 +++++++++++++++++
 6 files changed, 184 insertions(+), 87 deletions(-)
 create mode 100644 app/beam-demo/page.tsx
 create mode 100644 components/assistant-ui/pulse-beam.tsx
 create mode 100644 lib/chat/use-thread-chat-runtime.ts

diff --git a/app/beam-demo/page.tsx b/app/beam-demo/page.tsx
new file mode 100644
index 00000000..555c10b1
--- /dev/null
+++ b/app/beam-demo/page.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { AssistantRuntimeProvider } from "@assistant-ui/react"
+import { Thread } from "@/components/assistant-ui/thread"
+import { ThreadListSidebar } from "@/components/assistant-ui/threadlist-sidebar"
+import { AssistantTools } from "@/components/assistant-ui/tools"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+import { useThreadChatRuntime } from "@/lib/chat/use-thread-chat-runtime"
+
+/**
+ * border-beam 风格 demo：assistant-ui 的 ThreadListSidebar（floating 变体）
+ * 与 Thread 组合，侧边栏面板和 composer 都带 pulse-inner 呼吸光晕，
+ * 聊天走与首页相同的完整 runtime（MiniMax 流式 + Postgres 持久化）。
+ */
+export default function BeamDemoPage() {
+  const runtime = useThreadChatRuntime()
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <AssistantTools />
+      <SidebarProvider>
+        <ThreadListSidebar variant="floating" />
+        <SidebarInset className="h-svh min-w-0">
+          <header className="flex h-12 shrink-0 items-center gap-2 px-4">
+            <SidebarTrigger />
+            <span className="text-sm font-medium">Border Beam Demo</span>
+          </header>
+          <div className="min-h-0 flex-1">
+            <Thread />
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </AssistantRuntimeProvider>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
index d32c3676..4cd18b2d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,43 +1,12 @@
 "use client"
 
-import { useMemo } from "react"
-import { AssistantRuntimeProvider, useRemoteThreadListRuntime } from "@assistant-ui/react"
-import { AssistantChatTransport, useChatRuntime } from "@assistant-ui/react-ai-sdk"
+import { AssistantRuntimeProvider } from "@assistant-ui/react"
 import { Base } from "@/components/examples/base"
 import { AssistantTools } from "@/components/assistant-ui/tools"
-import { postgresThreadListAdapter } from "@/lib/chat/thread-list-adapter"
-import { usePostgresThreadHistoryAdapter } from "@/lib/chat/use-thread-history-adapter"
-import { r2AttachmentAdapter } from "@/lib/chat/attachment-adapter"
-import { useResearchMode } from "@/lib/chat/research-mode"
-
-function useMyChatRuntime() {
-  const history = usePostgresThreadHistoryAdapter()
-  // 把「深度研究」开关状态随每条消息发给 chat route。用 getState() 而非闭包快照，
-  // 保证读到发送时的最新开关值。
-  const transport = useMemo(
-    () =>
-      new AssistantChatTransport({
-        prepareSendMessagesRequest: ({ id, messages, trigger, messageId, body }) => ({
-          body: {
-            ...body,
-            id,
-            messages,
-            trigger,
-            messageId,
-            deepResearch: useResearchMode.getState().enabled,
-          },
-        }),
-      }),
-    [],
-  )
-  return useChatRuntime({ transport, adapters: { history, attachments: r2AttachmentAdapter } })
-}
+import { useThreadChatRuntime } from "@/lib/chat/use-thread-chat-runtime"
 
 export default function Page() {
-  const runtime = useRemoteThreadListRuntime({
-    runtimeHook: useMyChatRuntime,
-    adapter: postgresThreadListAdapter,
-  })
+  const runtime = useThreadChatRuntime()
 
   return (
     <div className="h-svh w-full">
diff --git a/components/assistant-ui/composer-beam.tsx b/components/assistant-ui/composer-beam.tsx
index da2a5996..0d763758 100644
--- a/components/assistant-ui/composer-beam.tsx
+++ b/components/assistant-ui/composer-beam.tsx
@@ -1,35 +1,17 @@
 "use client"
 
-import { useEffect, useState, type FC, type ReactNode } from "react"
-import { BorderBeam } from "border-beam"
-import { useTheme } from "next-themes"
+import type { FC, ReactNode } from "react"
+import { PulseBeam } from "@/components/assistant-ui/pulse-beam"
 
 /**
- * 用 border-beam 的 pulse-inner 呼吸光晕包裹 composer 外壳，
- * 复刻 https://beam.jakubantalik.com/pulse 的光影效果：
- * 彩色光晕贴着输入框内侧四周弥散、缓慢呼吸（裁剪在边框以内），
- * 而非仅沿边框流动的一条光线。
- * 圆角由组件自动探测子元素的 border-radius（--composer-radius）。
+ * composer 外壳专用的 pulse-inner 呼吸光晕。
+ * wrapper 自带 overflow:hidden 会裁掉外壳的投影，
+ * 所以把浅色模式的投影从外壳复制到 wrapper 上。
  */
 export const ComposerBeam: FC<{ children: ReactNode }> = ({ children }) => {
-  const { resolvedTheme } = useTheme()
-
-  // SSR 时 resolvedTheme 为 undefined，客户端首帧可能已解析出 light，
-  // 直接使用会导致 BorderBeam 内联 <style> 的 hydration 不匹配。
-  // 挂载后再切换到真实主题，服务端与客户端首帧统一按 dark 渲染。
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => setMounted(true), [])
-
-  // wrapper 自带 overflow:hidden 会裁掉外壳的投影，
-  // 所以把浅色模式的投影从外壳复制到 wrapper 上。
   return (
-    <BorderBeam
-      size="pulse-inner"
-      colorVariant="colorful"
-      theme={mounted && resolvedTheme === "light" ? "light" : "dark"}
-      className="w-full rounded-(--composer-radius) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-none"
-    >
+    <PulseBeam className="w-full rounded-(--composer-radius) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-none">
       {children}
-    </BorderBeam>
+    </PulseBeam>
   )
 }
diff --git a/components/assistant-ui/pulse-beam.tsx b/components/assistant-ui/pulse-beam.tsx
new file mode 100644
index 00000000..6ecdbfd4
--- /dev/null
+++ b/components/assistant-ui/pulse-beam.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { useSyncExternalStore, type FC, type ReactNode } from "react"
+import { BorderBeam } from "border-beam"
+import { useTheme } from "next-themes"
+
+// 水合安全的挂载检测：服务端快照为 false，水合完成后 React 以客户端快照 true 重渲染。
+const noopSubscribe = () => () => {}
+function useHydrated() {
+  return useSyncExternalStore(
+    noopSubscribe,
+    () => true,
+    () => false
+  )
+}
+
+/**
+ * border-beam pulse-inner 呼吸光晕的通用包装，
+ * 复刻 https://beam.jakubantalik.com/pulse 的光影效果：
+ * 彩色光晕贴着元素内侧四周弥散、缓慢呼吸（裁剪在边框以内）。
+ * 跟随 next-themes 的明暗主题；圆角默认自动探测子元素，
+ * 子元素圆角探测不到时（如首子元素是无圆角的内部布局）可显式传 borderRadius。
+ */
+export const PulseBeam: FC<{
+  children: ReactNode
+  className?: string
+  borderRadius?: number
+}> = ({ children, className, borderRadius }) => {
+  const { resolvedTheme } = useTheme()
+
+  // SSR 时 resolvedTheme 为 undefined，客户端首帧可能已解析出 light，
+  // 直接使用会导致 BorderBeam 内联 <style> 的 hydration 不匹配。
+  // 水合完成后再切换到真实主题，服务端与客户端首帧统一按 dark 渲染。
+  const hydrated = useHydrated()
+
+  return (
+    <BorderBeam
+      size="pulse-inner"
+      colorVariant="colorful"
+      theme={hydrated && resolvedTheme === "light" ? "light" : "dark"}
+      borderRadius={borderRadius}
+      className={className}
+    >
+      {children}
+    </BorderBeam>
+  )
+}
diff --git a/components/assistant-ui/threadlist-sidebar.tsx b/components/assistant-ui/threadlist-sidebar.tsx
index 2db83daf..0c621a8f 100644
--- a/components/assistant-ui/threadlist-sidebar.tsx
+++ b/components/assistant-ui/threadlist-sidebar.tsx
@@ -12,45 +12,50 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar";
 import { ThreadList } from "@/components/assistant-ui/thread-list";
+import { PulseBeam } from "@/components/assistant-ui/pulse-beam";
 
 export function ThreadListSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar {...props}>
-      <SidebarHeader className="aui-sidebar-header mb-2 border-b">
-        <div className="aui-sidebar-header-content flex items-center justify-between">
+      {/* 光晕贴着侧边栏面板内侧呼吸；floating 变体的内面板是 rounded-2xl（16px）。
+          SidebarRail 靠绝对定位悬在面板边缘，放在光晕外以免被 overflow:hidden 裁掉。 */}
+      <PulseBeam borderRadius={16} className="flex h-full min-h-0 w-full flex-col">
+        <SidebarHeader className="aui-sidebar-header mb-2 border-b">
+          <div className="aui-sidebar-header-content flex items-center justify-between">
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="lg" render={<a href="https://assistant-ui.com" target="_blank" rel="noopener noreferrer" />}><div className="aui-sidebar-header-icon-wrapper bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                                <MessagesSquare className="aui-sidebar-header-icon size-4" />
+                                              </div><div className="aui-sidebar-header-heading me-6 flex flex-col gap-0.5 leading-none">
+                                                <span className="aui-sidebar-header-title font-semibold">
+                                                  assistant-ui
+                                                </span>
+                                              </div></SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </div>
+        </SidebarHeader>
+        <SidebarContent className="aui-sidebar-content px-2">
+          <ThreadList />
+        </SidebarContent>
+        <SidebarFooter className="aui-sidebar-footer border-t">
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton size="lg" render={<a href="https://assistant-ui.com" target="_blank" rel="noopener noreferrer" />}><div className="aui-sidebar-header-icon-wrapper bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                                              <MessagesSquare className="aui-sidebar-header-icon size-4" />
-                                            </div><div className="aui-sidebar-header-heading me-6 flex flex-col gap-0.5 leading-none">
-                                              <span className="aui-sidebar-header-title font-semibold">
-                                                assistant-ui
-                                              </span>
-                                            </div></SidebarMenuButton>
+              <SidebarMenuButton size="lg" render={<a href="https://github.com/assistant-ui/assistant-ui" target="_blank" rel="noopener noreferrer" />}><div className="aui-sidebar-footer-icon-wrapper bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                                          <GitHubIcon className="aui-sidebar-footer-icon size-4" />
+                                        </div><div className="aui-sidebar-footer-heading flex flex-col gap-0.5 leading-none">
+                                          <span className="aui-sidebar-footer-title font-semibold">
+                                            GitHub
+                                          </span>
+                                          <span>View Source</span>
+                                        </div></SidebarMenuButton>
             </SidebarMenuItem>
           </SidebarMenu>
-        </div>
-      </SidebarHeader>
-      <SidebarContent className="aui-sidebar-content px-2">
-        <ThreadList />
-      </SidebarContent>
+        </SidebarFooter>
+      </PulseBeam>
       <SidebarRail />
-      <SidebarFooter className="aui-sidebar-footer border-t">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton size="lg" render={<a href="https://github.com/assistant-ui/assistant-ui" target="_blank" rel="noopener noreferrer" />}><div className="aui-sidebar-footer-icon-wrapper bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                                        <GitHubIcon className="aui-sidebar-footer-icon size-4" />
-                                      </div><div className="aui-sidebar-footer-heading flex flex-col gap-0.5 leading-none">
-                                        <span className="aui-sidebar-footer-title font-semibold">
-                                          GitHub
-                                        </span>
-                                        <span>View Source</span>
-                                      </div></SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
     </Sidebar>
   );
 }
diff --git a/lib/chat/use-thread-chat-runtime.ts b/lib/chat/use-thread-chat-runtime.ts
new file mode 100644
index 00000000..dd62b38e
--- /dev/null
+++ b/lib/chat/use-thread-chat-runtime.ts
@@ -0,0 +1,55 @@
+"use client"
+
+import { useMemo } from "react"
+import { useRemoteThreadListRuntime } from "@assistant-ui/react"
+import {
+  AssistantChatTransport,
+  useChatRuntime,
+} from "@assistant-ui/react-ai-sdk"
+import { postgresThreadListAdapter } from "@/lib/chat/thread-list-adapter"
+import { usePostgresThreadHistoryAdapter } from "@/lib/chat/use-thread-history-adapter"
+import { r2AttachmentAdapter } from "@/lib/chat/attachment-adapter"
+import { useResearchMode } from "@/lib/chat/research-mode"
+
+function useMyChatRuntime() {
+  const history = usePostgresThreadHistoryAdapter()
+  // 把「深度研究」开关状态随每条消息发给 chat route。用 getState() 而非闭包快照，
+  // 保证读到发送时的最新开关值。
+  const transport = useMemo(
+    () =>
+      new AssistantChatTransport({
+        prepareSendMessagesRequest: ({
+          id,
+          messages,
+          trigger,
+          messageId,
+          body,
+        }) => ({
+          body: {
+            ...body,
+            id,
+            messages,
+            trigger,
+            messageId,
+            deepResearch: useResearchMode.getState().enabled,
+          },
+        }),
+      }),
+    []
+  )
+  return useChatRuntime({
+    transport,
+    adapters: { history, attachments: r2AttachmentAdapter },
+  })
+}
+
+/**
+ * 本项目的完整聊天 runtime：AI SDK transport + Postgres 线程列表/历史持久化。
+ * 供 app/page.tsx 与各 demo 页面共用，传给 AssistantRuntimeProvider。
+ */
+export function useThreadChatRuntime() {
+  return useRemoteThreadListRuntime({
+    runtimeHook: useMyChatRuntime,
+    adapter: postgresThreadListAdapter,
+  })
+}

From c62173c4c5f279cb07c550d9d09c7d19b5431b33 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 12 Jul 2026 06:28:46 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=E5=85=89=E6=99=95=E7=BB=91=E5=AE=9A=20AI?=
 =?UTF-8?q?=20=E5=9B=9E=E5=A4=8D=E7=8A=B6=E6=80=81=EF=BC=9A=E5=9B=9E?=
 =?UTF-8?q?=E5=A4=8D=E4=B8=AD=E6=B5=81=E5=8A=A8=EF=BC=8C=E7=BB=93=E6=9D=9F?=
 =?UTF-8?q?=E5=90=8E=E6=B7=A1=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PulseBeam 增加 active 透传（BorderBeam 自带淡入/淡出过渡），
ComposerBeam 订阅 thread.isRunning——AI 生成中 composer 光晕
淡入流动，作为运行状态反馈；生成结束淡出。侧边栏保持常亮。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DwZ3V6EaT97mtczZaqa2LJ
---
 components/assistant-ui/composer-beam.tsx | 10 +++++++++-
 components/assistant-ui/pulse-beam.tsx    |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/assistant-ui/composer-beam.tsx b/components/assistant-ui/composer-beam.tsx
index 0d763758..c1153dfd 100644
--- a/components/assistant-ui/composer-beam.tsx
+++ b/components/assistant-ui/composer-beam.tsx
@@ -1,16 +1,24 @@
 "use client"
 
 import type { FC, ReactNode } from "react"
+import { useAuiState } from "@assistant-ui/react"
 import { PulseBeam } from "@/components/assistant-ui/pulse-beam"
 
 /**
  * composer 外壳专用的 pulse-inner 呼吸光晕。
+ * 光晕绑定 AI 回复状态：回复中淡入并流动，回复结束淡出，
+ * 作为「正在生成」的运行状态反馈。
  * wrapper 自带 overflow:hidden 会裁掉外壳的投影，
  * 所以把浅色模式的投影从外壳复制到 wrapper 上。
  */
 export const ComposerBeam: FC<{ children: ReactNode }> = ({ children }) => {
+  const isRunning = useAuiState((s) => s.thread.isRunning)
+
   return (
-    <PulseBeam className="w-full rounded-(--composer-radius) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-none">
+    <PulseBeam
+      active={isRunning}
+      className="w-full rounded-(--composer-radius) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-none"
+    >
       {children}
     </PulseBeam>
   )
diff --git a/components/assistant-ui/pulse-beam.tsx b/components/assistant-ui/pulse-beam.tsx
index 6ecdbfd4..632a827b 100644
--- a/components/assistant-ui/pulse-beam.tsx
+++ b/components/assistant-ui/pulse-beam.tsx
@@ -20,12 +20,14 @@ function useHydrated() {
  * 彩色光晕贴着元素内侧四周弥散、缓慢呼吸（裁剪在边框以内）。
  * 跟随 next-themes 的明暗主题；圆角默认自动探测子元素，
  * 子元素圆角探测不到时（如首子元素是无圆角的内部布局）可显式传 borderRadius。
+ * active 控制光晕开关（带淡入/淡出过渡），用于绑定 AI 回复中等运行状态。
  */
 export const PulseBeam: FC<{
   children: ReactNode
   className?: string
   borderRadius?: number
-}> = ({ children, className, borderRadius }) => {
+  active?: boolean
+}> = ({ children, className, borderRadius, active = true }) => {
   const { resolvedTheme } = useTheme()
 
   // SSR 时 resolvedTheme 为 undefined，客户端首帧可能已解析出 light，
@@ -39,6 +41,7 @@ export const PulseBeam: FC<{
       colorVariant="colorful"
       theme={hydrated && resolvedTheme === "light" ? "light" : "dark"}
       borderRadius={borderRadius}
+      active={active}
       className={className}
     >
       {children}

From 1efef5f2a5e227c73c503b0c7f3de8cd75d9f294 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 12 Jul 2026 06:56:58 +0000
Subject: [PATCH 4/4] =?UTF-8?q?composer=20=E5=85=89=E6=99=95=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E6=B7=B7=E5=90=88=E6=96=B9=E6=A1=88=EF=BC=9A=E7=A9=BA?=
 =?UTF-8?q?=E9=97=B2=E5=BE=AE=E5=85=89=E3=80=81=E5=9B=9E=E5=A4=8D=E4=B8=AD?=
 =?UTF-8?q?=E5=85=A8=E5=BD=A9=E6=B5=81=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PulseBeam 增加 staticColors / strength 透传；ComposerBeam 改为
光晕常开，空闲时色相定格 + 强度降至 0.55（微光、仍轻微呼吸），
AI 回复中恢复全彩色相流转与全亮度，回复结束色相定格在停止时的
颜色。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DwZ3V6EaT97mtczZaqa2LJ
---
 components/assistant-ui/composer-beam.tsx |  7 ++++---
 components/assistant-ui/pulse-beam.tsx    | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/components/assistant-ui/composer-beam.tsx b/components/assistant-ui/composer-beam.tsx
index c1153dfd..b1d63551 100644
--- a/components/assistant-ui/composer-beam.tsx
+++ b/components/assistant-ui/composer-beam.tsx
@@ -5,8 +5,8 @@ import { useAuiState } from "@assistant-ui/react"
 import { PulseBeam } from "@/components/assistant-ui/pulse-beam"
 
 /**
- * composer 外壳专用的 pulse-inner 呼吸光晕。
- * 光晕绑定 AI 回复状态：回复中淡入并流动，回复结束淡出，
+ * composer 外壳专用的 pulse-inner 呼吸光晕，绑定 AI 回复状态的混合方案：
+ * 空闲时色相定格 + 低强度微光（仍轻微呼吸），回复中恢复全彩流动与全亮度，
  * 作为「正在生成」的运行状态反馈。
  * wrapper 自带 overflow:hidden 会裁掉外壳的投影，
  * 所以把浅色模式的投影从外壳复制到 wrapper 上。
@@ -16,7 +16,8 @@ export const ComposerBeam: FC<{ children: ReactNode }> = ({ children }) => {
 
   return (
     <PulseBeam
-      active={isRunning}
+      staticColors={!isRunning}
+      strength={isRunning ? 1 : 0.55}
       className="w-full rounded-(--composer-radius) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-shadow focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-none"
     >
       {children}
diff --git a/components/assistant-ui/pulse-beam.tsx b/components/assistant-ui/pulse-beam.tsx
index 632a827b..ebf98b5f 100644
--- a/components/assistant-ui/pulse-beam.tsx
+++ b/components/assistant-ui/pulse-beam.tsx
@@ -21,13 +21,24 @@ function useHydrated() {
  * 跟随 next-themes 的明暗主题；圆角默认自动探测子元素，
  * 子元素圆角探测不到时（如首子元素是无圆角的内部布局）可显式传 borderRadius。
  * active 控制光晕开关（带淡入/淡出过渡），用于绑定 AI 回复中等运行状态。
+ * staticColors 冻结色相流转（呼吸仍在），strength 控制整体亮度（0-1），
+ * 两者组合可实现「空闲微光、运行全彩流动」的混合状态。
  */
 export const PulseBeam: FC<{
   children: ReactNode
   className?: string
   borderRadius?: number
   active?: boolean
-}> = ({ children, className, borderRadius, active = true }) => {
+  staticColors?: boolean
+  strength?: number
+}> = ({
+  children,
+  className,
+  borderRadius,
+  active = true,
+  staticColors,
+  strength,
+}) => {
   const { resolvedTheme } = useTheme()
 
   // SSR 时 resolvedTheme 为 undefined，客户端首帧可能已解析出 light，
@@ -42,6 +53,8 @@ export const PulseBeam: FC<{
       theme={hydrated && resolvedTheme === "light" ? "light" : "dark"}
       borderRadius={borderRadius}
       active={active}
+      staticColors={staticColors}
+      strength={strength}
       className={className}
     >
       {children}