初始化

2026-09-07 18:24:55 +08:00
1 parent 34474bd5fc
commit b638b541d0
@@ -0,0 +1,214 @@
+import { useEffect, useMemo } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+import { DesensitizeWordsLoader } from "@/components/desensitize-words-loader";
+import { FontScaleApplier } from "@/components/font-scale";
+import { QueryClientProvider } from "@/components/query-client-provider";
+import { AuthSyncWatcher } from "@/core/auth/sync";
+import { I18nProvider } from "@/core/i18n/context";
+import { fetchYLogConfig } from "@/core/log/y-log-config";
+import { detectLocale } from "@/core/i18n/locale";
+import { resolveForcedThemeForPath } from "@/core/page-layout/chats-iframe-route";
+import { ChatProvider } from "@/contexts/ChatContext";
+import { ThemeProvider } from "@/contexts/ThemeContext";
+import {
+  resolveEmbedRoundtableTheme,
+  resolveEmbedTheme,
+} from "@/core/embed/params";
+import { usePublicEmbedTheme } from "@/core/embed/background";
+import { readWujieProps } from "@/core/embed/wujie";
+import {
+  resolveForcedEmbedTheme,
+  syncEmbedSessionFromSearch,
+} from "@/core/embed/embed-session";
+
+import { HashRouter, useLocation } from "react-router-dom";
+
+import LandingPage from "./pages/LandingPage";
+import LoginPage from "./pages/LoginPage";
+import PageRoutes from "./pages/PageRoutes";
+import PublicScheduledTaskPage, {
+  PublicScheduledTaskFullscreenPage,
+} from "./pages/PublicScheduledTaskPage";
+import PublicSharePage from "./pages/PublicSharePage";
+import PublicLeaderboardPage from "./pages/PublicLeaderboardPage";
+import PublicRoundtableSharePage from "./pages/PublicRoundtableSharePage";
+import EmbedChatPage from "./pages/EmbedChatPage";
+import EmbedRoundtablePage from "./pages/EmbedRoundtablePage";
+import DashboardStandalonePage from "@/roundtable-planning/pages/DashboardStandalonePage";
+import PositionRoundtablePage from "@/position-roundtable/pages/PositionRoundtablePage";
+import WeKnoraWikiPageView from "@/strategy-components/components/resource-management/llmwiki/WeKnoraWikiPageView";
+import {
+  isPositionRoundtableStandaloneMode,
+  POSITION_ROUNDTABLE_ROUTE,
+} from "@/position-roundtable/demo/position-roundtable-demo-config";
+import { ChatRuntime } from "./pages/WorkspaceRoutes";
+import { NotFoundPage } from "./pages/NotFoundPage";
+import OfficialDeerFlowEntry from "./pages/OfficialDeerFlowEntry";
+
+const PUBLIC_EMBED_PREFIXES = [
+  "/share/",
+  "/public/",
+  "/roundtable-share/",
+  "/embed/knowledge/",
+];
+
+function AppProviders({ children }: { children: React.ReactNode }) {
+  const locale = useMemo(() => detectLocale(), []);
+  const location = useLocation();
+  const publicEmbedTheme = usePublicEmbedTheme();
+  const positionStandaloneMode = isPositionRoundtableStandaloneMode();
+  // iframe 嵌入会话（按标签页 sessionStorage）集中在此同步：任何带 `&embed=1` 的入口（深链登录页
+  // 或直接深链路由）一进来就启用、`embed=0` 关闭，后续干净路由靠会话维持去 chrome + 强制主题。
+  useEffect(() => {
+    syncEmbedSessionFromSearch(location.search);
+  }, [location.search]);
+  // 操作日志(Y-Log)：启动早期预热上报配置，使 writeYLog 同步读缓存即可工作
+  // （刷新后 module 缓存清空，token 登录用户也能继续上报）。失败静默。
+  useEffect(() => {
+    if (positionStandaloneMode) return;
+    void fetchYLogConfig();
+  }, [positionStandaloneMode]);
+  const forcedTheme = useMemo(() => {
+    // iframe 嵌入模式（外部系统 `&embed=1`）最高优先：按本标签页的嵌入主题强制明/暗。
+    // 走 next-themes forcedTheme（不写 localStorage）→ 同浏览器另开的正常系统页不受影响。
+    const embedTheme = resolveForcedEmbedTheme(location.search);
+    if (embedTheme) return embedTheme;
+    const routeTheme = resolveForcedThemeForPath(
+      location.pathname,
+      location.search,
+    );
+    if (routeTheme) return routeTheme;
+    if (location.pathname === "/embed/roundtable") {
+      const wp = readWujieProps();
+      const raw =
+        (typeof wp.theme === "string" && wp.theme.trim()) ||
+        new URLSearchParams(location.search).get("theme")?.trim() ||
+        "dark";
+      return resolveEmbedRoundtableTheme(raw);
+    }
+    if (location.pathname.startsWith("/embed/chats")) {
+      const raw = new URLSearchParams(location.search).get("theme")?.trim();
+      return raw ? resolveEmbedTheme(raw) : undefined;
+    }
+    if (PUBLIC_EMBED_PREFIXES.some((p) => location.pathname.startsWith(p))) {
+      return publicEmbedTheme;
+    }
+    return undefined;
+  }, [location.pathname, location.search, publicEmbedTheme]);
+
+  return (
+    <NextThemesProvider
+      attribute="class"
+      storageKey="strategy-theme"
+      defaultTheme="light"
+      themes={["light", "dark", "lightblue", "lightgreen", "iceblue", "lightyellow"]}
+      enableSystem={false}
+      disableTransitionOnChange
+      forcedTheme={forcedTheme}
+    >
+      <QueryClientProvider>
+        <AuthSyncWatcher disabled={positionStandaloneMode}>
+          <I18nProvider initialLocale={locale}>
+            <ThemeProvider>
+              <ChatProvider>
+                {!positionStandaloneMode && <DesensitizeWordsLoader />}
+                <FontScaleApplier />
+                {children}
+              </ChatProvider>
+            </ThemeProvider>
+          </I18nProvider>
+        </AuthSyncWatcher>
+      </QueryClientProvider>
+    </NextThemesProvider>
+  );
+}
+
+/**
+ * 根路由 `/` → `/login` 重定向，**保留 query string**。
+ * 外部系统的任务深链落在 `#/?taskId=...&goPath=...`，裸 `<Navigate to="/login">` 会丢掉
+ * query，导致 LoginPage 读不到参数；这里把 search 一并带过去。
+ */
+function RootRedirect() {
+  const { search } = useLocation();
+  if (isPositionRoundtableStandaloneMode()) {
+    return <Navigate to={POSITION_ROUNDTABLE_ROUTE} replace />;
+  }
+  return <Navigate to={`/login${search}`} replace />;
+}
+
+export function App() {
+  const positionStandaloneMode = isPositionRoundtableStandaloneMode();
+  const standaloneLoginRedirect = (
+    <Navigate to={POSITION_ROUNDTABLE_ROUTE} replace />
+  );
+  const pageElement = positionStandaloneMode ? (
+    <ChatRuntime>
+      <PositionRoundtablePage compactChrome />
+    </ChatRuntime>
+  ) : (
+    <PageRoutes />
+  );
+
+  return (
+    <HashRouter>
+      <AppProviders>
+        <Routes>
+          <Route path="/" element={<RootRedirect />} />
+          <Route
+            path="/login"
+            element={positionStandaloneMode ? standaloneLoginRedirect : <LoginPage />}
+          />
+          <Route
+            path="/login/:username"
+            element={positionStandaloneMode ? standaloneLoginRedirect : <LoginPage />}
+          />
+          <Route path="/landing" element={<LandingPage />} />
+          <Route path="/share/:shareCode" element={<PublicSharePage />} />
+          <Route path="/public/leaderboard" element={<PublicLeaderboardPage />} />
+          <Route
+            path="/roundtable-share/:shareCode"
+            element={<PublicRoundtableSharePage view="landing" />}
+          />
+          <Route
+            path="/roundtable-share/:shareCode/report"
+            element={<PublicRoundtableSharePage view="report" />}
+          />
+          <Route
+            path="/roundtable-share/:shareCode/dashboard"
+            element={<PublicRoundtableSharePage view="dashboard" />}
+          />
+          <Route
+            path="/public/scheduled-tasks/:taskId"
+            element={<PublicScheduledTaskPage />}
+          />
+          <Route
+            path="/public/scheduled-tasks/:taskId/runs/:runId/fullscreen"
+            element={<PublicScheduledTaskFullscreenPage />}
+          />
+          <Route
+            path="/embed/chats/:thread_id"
+            element={
+              <ChatRuntime>
+                <EmbedChatPage />
+              </ChatRuntime>
+            }
+          />
+          <Route path="/embed/roundtable" element={<EmbedRoundtablePage />} />
+          <Route
+            path="/embed/knowledge/:noteId"
+            element={<WeKnoraWikiPageView publicEmbed />}
+          />
+          <Route
+            path="/roundtable-dashboard"
+            element={<DashboardStandalonePage />}
+          />
+          <Route path="/official/*" element={<OfficialDeerFlowEntry />} />
+          <Route path="/page/*" element={pageElement} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </AppProviders>
+    </HashRouter>
+  );
+}
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2064"
+  height="2591" viewBox="0 0 2064 2591">
+  <path fill-rule="nonzero"
+    d="M 68.582031 0 C 66.890625 0 65.300781 1 64.617188 2.640625 C 49.46875 38.800781 33.71875 76.199219 33.628906 106.539062 C 33.550781 134.230469 46.445312 155.730469 59.949219 175.71875 L 59.949219 175.730469 C 52.414062 175.671875 44.992188 175.371094 37.472656 174.171875 C 27.210938 172.53125 16.585938 169.199219 5.585938 165.738281 C 5.15625 165.609375 4.722656 165.539062 4.296875 165.539062 C 2.824219 165.539062 1.417969 166.300781 0.625 167.609375 C -0.402344 169.300781 -0.140625 171.46875 1.257812 172.871094 L 1.261719 172.878906 C 11.230469 182.871094 21.8125 193.53125 36.980469 200.050781 C 51.5625 206.320312 70.167969 208.628906 88.085938 210.78125 L 88.027344 210.78125 C 127.152344 253.410156 166.617188 296.300781 215.761719 334.941406 C 230.558594 346.578125 246.292969 357.878906 261.785156 369 C 277.171875 380.050781 292.441406 391.011719 306.660156 402.191406 C 326.132812 417.511719 343.5625 433.179688 356.773438 450.019531 C 377.808594 476.828125 388.449219 506.960938 395.4375 538.628906 L 395.4375 538.640625 C 372.683594 510.710938 349.328125 483.929688 324.855469 469.339844 C 295.957031 452.121094 265.800781 452 236.960938 451.808594 L 236.933594 451.820312 C 235.792969 451.808594 234.707031 452.261719 233.898438 453.070312 C 233.085938 453.871094 232.632812 454.96875 232.636719 456.121094 C 232.722656 494.011719 232.699219 533.539062 256.304688 567.480469 C 279.351562 600.621094 324.738281 628.019531 369.191406 654.679688 L 369.132812 654.691406 C 371.476562 683.539062 373.40625 710.691406 367.109375 728.03125 C 365.828125 731.558594 364.191406 734.71875 362.058594 738.820312 C 358.910156 744.871094 354.964844 752.441406 350.417969 764.960938 C 342.890625 785.699219 333.769531 819.839844 323.648438 883.109375 C 303.347656 1010.019531 278.722656 1255.949219 308.882812 1409.269531 C 326.265625 1497.660156 361.828125 1555.210938 393.511719 1606.519531 C 417.042969 1644.632812 438.207031 1678.960938 448.835938 1720.09375 C 466.921875 1790.089844 454.648438 1880.246094 444.5 1954.386719 C 440.613281 1982.78125 437.042969 2008.839844 435.726562 2030.261719 C 433.410156 2067.929688 438.066406 2091.179688 442.304688 2112.347656 L 442.304688 2112.355469 C 445.910156 2130.347656 449.152344 2146.589844 447.757812 2169.28125 C 447.429688 2174.613281 446.835938 2180.359375 445.933594 2186.535156 L 445.933594 2186.542969 C 436.582031 2250.328125 393.613281 2362.808594 362.105469 2416.636719 C 339.761719 2454.804688 323.546875 2462.851562 309.597656 2469.925781 C 303.980469 2472.777344 298.261719 2475.660156 292.691406 2480.238281 C 273.378906 2496.113281 256.457031 2532.078125 240.183594 2566.417969 C 239.578125 2567.703125 239.640625 2569.203125 240.363281 2570.429688 C 241.082031 2571.65625 242.359375 2572.449219 243.777344 2572.542969 L 243.789062 2572.542969 L 243.882812 2572.550781 L 243.882812 2572.554688 C 261.582031 2573.746094 279.460938 2574.957031 296.386719 2574.957031 C 323.671875 2574.957031 349.332031 2571.84375 368.355469 2559.785156 C 392.640625 2544.394531 405.109375 2514.960938 414.488281 2493.074219 C 417.011719 2487.183594 419.289062 2481.871094 421.546875 2477.308594 C 432.054688 2456.039062 441.753906 2451.664062 451.855469 2446.960938 C 453.054688 2446.402344 453.929688 2445.320312 454.226562 2444.042969 L 454.238281 2443.996094 L 454.238281 2443.988281 C 476.210938 2348.800781 498.035156 2254.347656 524.300781 2196.363281 L 524.300781 2196.367188 C 536.363281 2169.730469 549.363281 2150.796875 562.695312 2131.402344 C 576.28125 2111.625 590.1875 2091.402344 603.300781 2062.445312 L 603.304688 2062.453125 C 605.183594 2058.292969 607.054688 2053.949219 608.894531 2049.421875 C 625.066406 2009.675781 639.746094 1954.289062 653.585938 1902.101562 C 663.0625 1866.367188 672.15625 1832.09375 681.085938 1805.085938 C 699.308594 1749.992188 716.863281 1725.09375 734.371094 1705.144531 L 734.421875 1705.148438 C 727.285156 1740.746094 721.597656 1776.628906 729.320312 1807.472656 C 733.351562 1823.570312 740.996094 1838.160156 749.066406 1853.613281 C 758.828125 1872.296875 769.433594 1892.636719 776.359375 1919.675781 C 783.289062 1946.71875 786.574219 1980.605469 789.527344 2011.140625 L 789.527344 2011.148438 C 791.875 2035.402344 794.023438 2057.78125 797.746094 2072.316406 L 797.746094 2072.320312 C 797.929688 2073.023438 798.128906 2073.769531 798.316406 2074.441406 L 798.320312 2074.441406 C 802.132812 2087.941406 807.617188 2093.914062 813.515625 2100.324219 C 821.132812 2108.597656 830.351562 2118.441406 839.742188 2151.671875 L 839.738281 2151.675781 C 840.105469 2152.96875 840.402344 2154.039062 840.765625 2155.398438 C 857.484375 2217.601562 874.097656 2354.589844 872.078125 2423.390625 C 870.472656 2478.15625 857.140625 2488.390625 845.339844 2498.136719 C 842.320312 2500.632812 839.085938 2503.296875 836.09375 2506.566406 C 820.847656 2523.230469 812.652344 2554.886719 804.800781 2584.753906 C 804.457031 2586.0625 804.75 2587.453125 805.589844 2588.515625 C 806.40625 Line truncated
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none" aria-hidden="true">
+  <path d="M13 6H1.5M1.5 6L6.2 1.4M1.5 6L6.2 10.6" stroke="#A2E1F9" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:url(#a);}</style><linearGradient id="a" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><g transform="translate(-128.5 -117)"><rect class="a" width="16" height="16" transform="translate(128.5 117)"/><path class="b" d="M4,0,8,5H0Z" transform="translate(140.5 128) rotate(180)"/></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="84.499" height="70" viewBox="0 0 84.499 70"><defs><style>.a{fill:url(#a);}</style><linearGradient id="a" x1="0.043" x2="0.978" y2="1.016" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#0062d9" stop-opacity="0.6"/><stop offset="1" stop-color="#0062d9" stop-opacity="0.302"/></linearGradient></defs><path class="a" d="M8855.277-1940.39l-.054-70h78v31.183l6.5,5.257-6.5,5.259v28.3Z" transform="translate(-8855.224 2010.389)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="45" viewBox="0 0 77 45"><defs><style>.a{fill:url(#a);}</style><pattern id="a" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 340 45"><image width="340" height="45" xlink:href="data:image/png;base64,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 truncated
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="62" viewBox="0 0 1920 62"><defs><style>.a{fill:url(#a);}.b{fill:rgba(0,98,217,0.1);}.c{fill:#fff;}.d{fill:rgba(0,98,217,0.2);}.e{filter:url(#h);}.f{filter:url(#e);}.g{filter:url(#b);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#0b3776"/><stop offset="1" stop-color="#0c1935"/></linearGradient><filter id="b"><feOffset dy="-3" input="SourceAlpha"/><feGaussianBlur result="c"/><feFlood flood-color="#0062d9" flood-opacity="0.102" result="d"/><feComposite operator="out" in="SourceGraphic" in2="c"/><feComposite operator="in" in="d"/><feComposite operator="in" in2="SourceGraphic"/></filter><filter id="e"><feOffset dy="-3" input="SourceAlpha"/><feGaussianBlur result="f"/><feFlood flood-color="#0062d9" flood-opacity="0.102" result="g"/><feComposite operator="out" in="SourceGraphic" in2="f"/><feComposite operator="in" in="g"/><feComposite operator="in" in2="SourceGraphic"/></filter><filter id="h"><feOffset dy="-3" input="SourceAlpha"/><feGaussianBlur result="i"/><feFlood flood-color="#0062d9" flood-opacity="0.2" result="j"/><feComposite operator="out" in="SourceGraphic" in2="i"/><feComposite operator="in" in="j"/><feComposite operator="in" in2="SourceGraphic"/></filter></defs><g transform="translate(-2009 -3361)"><rect class="a" width="1920" height="62" transform="translate(2009 3361)"/><g data-type="innerShadowGroup"><path class="b" d="M0,0H318L268,62H0Z" transform="translate(2009 3361)"/><g class="g" transform="matrix(1, 0, 0, 1, 2009, 3361)"><path class="c" d="M0,0H318L268,62H0Z"/></g></g><g data-type="innerShadowGroup"><path class="b" d="M0,0H310L260,62H0Z" transform="translate(2009 3361)"/><g class="f" transform="matrix(1, 0, 0, 1, 2009, 3361)"><path class="c" d="M0,0H310L260,62H0Z"/></g></g><g data-type="innerShadowGroup"><path class="d" d="M0,0H302L252,62H0Z" transform="translate(2009 3361)"/><g class="e" transform="matrix(1, 0, 0, 1, 2009, 3361)"><path class="c" d="M0,0H302L252,62H0Z"/></g></g></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"><image width="1920" height="1080" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMwaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA5LjEtYzAwMSA3OS4xNDYyODk5Nzc3LCAyMDIzLzA2LzI1LTIzOjU3OjE0ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjUuMCAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUVERkMwNjI0Q0RCMTFGMDg5MTZCMkY2RDg1RkVEQkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUVERkMwNjM0Q0RCMTFGMDg5MTZCMkY2RDg1RkVEQkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5RURGQzA2MDRDREIxMUYwODkxNkIyRjZEODVGRURCRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5RURGQzA2MTRDREIxMUYwODkxNkIyRjZEODVGRURCRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAYEBAQFBAYFBQYJBgUG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 truncated
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152" height="42.359" viewBox="0 0 152 42.359"><defs><style>.a{fill:url(#a);}</style><pattern id="a" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 536 150"><image width="536" height="150" xlink:href="data:image/png;base64,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 truncated
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="64" viewBox="0 0 1920 64"><defs><style>.a{fill:url(#a);}.b{fill:url(#b);}.c{clip-path:url(#c);}.d{fill:url(#d);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#131f3d"/><stop offset="1" stop-color="#094593"/></linearGradient><linearGradient id="b" x1="0.473" x2="0.473" y2="0.95" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#131f3d"/><stop offset="1" stop-color="#094593" stop-opacity="0"/></linearGradient><clipPath id="c"><rect class="a" width="1920" height="64" transform="translate(-2 5)"/></clipPath><pattern id="d" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 1917 104"><image width="1917" height="104" xlink:href="data:image/png;base64,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 truncated
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="30" viewBox="0 0 32 30"><defs><style>.a{fill:rgba(255,255,255,0.05);}.b{fill:url(#a);}</style><linearGradient id="a" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#a2e1f9"/><stop offset="1" stop-color="#45c3f3"/></linearGradient></defs><g transform="translate(1.411 -9.285)"><rect class="a" width="32" height="30" rx="4" transform="translate(-1.411 9.285)"/><path class="b" d="M4618.588,4844.6a1.257,1.257,0,1,1,1.258,1.256A1.258,1.258,0,0,1,4618.588,4844.6Zm4.609.838v-1.676h12.569v1.676Zm-4.609-5.867a1.257,1.257,0,1,1,1.258,1.257A1.257,1.257,0,0,1,4618.588,4839.569Zm4.609.838v-1.676h12.569v1.676Zm-4.609-5.865a1.257,1.257,0,1,1,1.258,1.257A1.257,1.257,0,0,1,4618.588,4834.542Zm4.609.838V4833.7h12.569v1.676Z" transform="translate(-4613 -4815)"/></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M24.036,10l-.012,9.333" transform="translate(-16.016 -6.667)"/><path class="b" d="M10,24h9.333" transform="translate(-6.667 -16)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36"><defs><style>.a,.d{fill:#fff;}.a{opacity:0;}.b{fill:#da2331;}.c{fill:#0a54cf;}.e{fill:#1677ff;}.f{fill:#1e2433;}.g{fill:#10d6ff;}.h{fill:#ff8181;}.i{fill:none;stroke:#10d6ff;stroke-linecap:round;stroke-linejoin:round;}.j{filter:url(#d);}.k{filter:url(#a);}</style><filter id="a"><feOffset dx="4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="b"/><feFlood flood-opacity="0.161" result="c"/><feComposite operator="out" in="SourceGraphic" in2="b"/><feComposite operator="in" in="c"/><feComposite operator="in" in2="SourceGraphic"/></filter><filter id="d"><feOffset dx="-4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="e"/><feFlood flood-opacity="0.161" result="f"/><feComposite operator="out" in="SourceGraphic" in2="e"/><feComposite operator="in" in="f"/><feComposite operator="in" in2="SourceGraphic"/></filter></defs><g transform="translate(0 -1)"><rect class="a" width="36" height="36" transform="translate(0 1)"/><path class="b" d="M23.5,14.75a1.5,1.5,0,0,1-1.5-1.5V9.5a1.5,1.5,0,1,1,3,0v3.75A1.5,1.5,0,0,1,23.5,14.75Z" transform="translate(-5.5 -1)"/><g data-type="innerShadowGroup"><path class="c" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 19.541)"/><g class="k" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 18.54)"/></g></g><g data-type="innerShadowGroup"><path class="c" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 19.541)"/><g class="j" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 18.54)"/></g></g><path class="e" d="M5.5-2H16a7.508,7.508,0,0,1,7.5,7.5V13A7.508,7.508,0,0,1,16,20.5H5.5A7.508,7.508,0,0,1-2,13V5.5A7.508,7.508,0,0,1,5.5-2Z" transform="translate(7.25 13.5)"/><path class="f" d="M5.25,0h9A5.25,5.25,0,0,1,19.5,5.25V7.5a5.25,5.25,0,0,1-5.25,5.25h-9A5.25,5.25,0,0,1,0,7.5V5.25A5.25,5.25,0,0,1,5.25,0Z" transform="translate(8.25 15.25)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(21 19)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(12 19)"/><path class="d" d="M24,10v3.75" transform="translate(-6 -1.5)"/><circle class="h" cx="3" cy="3" r="3" transform="translate(15 4)"/><path class="i" d="M44,28.667a3.367,3.367,0,0,0,1.922.412,2.841,2.841,0,0,0,1.828-.412" transform="translate(-27.875 -5.017)"/></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#006efe;stroke-width:6px;}.b{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 1)"><rect class="a" width="96" height="96" transform="translate(0 -1)"/><path class="b" d="M47,67H38L18,77V67H4V7H84V29" transform="translate(4 8)"/><circle class="c" cx="12" cy="12" r="12" transform="translate(56 45)"/><path class="b" d="M39,32l10,8" transform="translate(39 33)"/><path class="b" d="M12,15H24" transform="translate(12 16)"/><path class="b" d="M12,21H36" transform="translate(12 22)"/></g></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{stroke:rgba(0,0,0,0);stroke-miterlimit:10;fill:url(#a);}</style><linearGradient id="a" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M1,10A1,1,0,1,1,1,8H6a1,1,0,0,1,0,2Zm9.8-.482L7.848,7.361A.445.445,0,0,1,7.661,7a.46.46,0,0,1,.187-.366L10.8,4.481a.45.45,0,0,1,.716.365V9.152a.44.44,0,0,1-.131.317.445.445,0,0,1-.322.136A.454.454,0,0,1,10.8,9.518ZM1,6A1,1,0,1,1,1,4H6A1,1,0,0,1,6,6ZM1,2A1,1,0,1,1,1,0H11a1,1,0,1,1,0,2Z" transform="translate(0.5 0.5)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{fill:url(#a);}.b{fill:url(#b);}</style><linearGradient id="a" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff" stop-opacity="0.302"/><stop offset="1" stop-color="#00c7ff" stop-opacity="0.302"/></linearGradient><linearGradient id="b" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M5.5,0,11,8H0Z" transform="translate(13) rotate(90)"/><path class="b" d="M5.5,0,11,8H0Z" transform="translate(8) rotate(90)"/></svg>
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <defs>
+    <style>
+      .hit { fill: rgba(255, 255, 255, 0.8); opacity: 0; }
+      .mark { fill: #fff; }
+    </style>
+  </defs>
+  <g transform="translate(-2434.135 -67.941)">
+    <rect class="hit" width="12" height="12" transform="translate(2434.135 67.941)"/>
+    <path class="mark" d="M.885,0,0,.885,3.692,4.577,4.135,5l.442-.423L8.269.885,7.385,0,4.135,3.25Z" transform="translate(2436 71.942)"/>
+  </g>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#fff;stroke-linejoin:round;}.b{stroke-linecap:round;}</style></defs><g transform="translate(-1)"><rect class="a" width="16" height="16" transform="translate(1)"/><path class="b" d="M7,42H19" transform="translate(-4 -28)"/><path class="b" d="M0,0H3" transform="translate(9.848 3.848) rotate(45)"/><path class="c" d="M11,12.907v2.427h2.439l6.894-6.9L17.9,6Z" transform="translate(-6.667 -4)"/></g></svg>
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .background { fill: none; }
+      .mark { stroke: rgba(0, 0, 0, 0); stroke-miterlimit: 10; fill: url(#gradient); }
+    </style>
+    <linearGradient id="gradient" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#a2e1f9"/>
+      <stop offset="1" stop-color="#45c3f3"/>
+    </linearGradient>
+  </defs>
+  <rect class="background" width="16" height="16"/>
+  <path class="mark" d="M14554.5,10202.5a1,1,0,1,1,0-2h5a1,1,0,0,1,0,2Zm9.8-.482-2.95-2.157a.445.445,0,0,1-.187-.361.46.46,0,0,1,.187-.366l2.95-2.152a.45.45,0,0,1,.716.365v4.307a.44.44,0,0,1-.131.317.445.445,0,0,1-.322.136A.454.454,0,0,1,14564.3,10202.019Zm-9.8-3.521a1,1,0,1,1,0-2h5a1,1,0,1,1,0,2Zm0-4a1,1,0,1,1,0-2h10a1,1,0,1,1,0,2Z" transform="translate(-14551.5 -10189.5)"/>
+</svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(255,255,255,0.8);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10,1.5A1.5,1.5,0,1,1,11.5,3,1.5,1.5,0,0,1,10,1.5Zm-5,0A1.5,1.5,0,1,1,6.5,3,1.5,1.5,0,0,1,5,1.5Zm-5,0A1.5,1.5,0,1,1,1.5,3,1.5,1.5,0,0,1,0,1.5Z" transform="translate(1.498 6.5)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(85,166,254,0.6);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M12.715,13.421,9.588,10.294a5.841,5.841,0,1,1,.707-.707l3.128,3.128a.5.5,0,0,1-.708.706ZM1,5.833A4.833,4.833,0,1,0,5.834,1,4.838,4.838,0,0,0,1,5.833Z" transform="translate(1.334 1.216)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M14.488.053.824,4.256a1.167,1.167,0,0,0-.285,2.1L4.576,8.936a1.167,1.167,0,0,0,1.382-.092L11,4.593A.292.292,0,0,1,11.408,5L7.156,10.043a1.167,1.167,0,0,0-.091,1.382l2.58,4.036a1.168,1.168,0,0,0,2.1-.286l4.2-13.663A1.167,1.167,0,0,0,14.488.053Z" transform="translate(0)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.131" height="16" viewBox="0 0 16.131 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#97edff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M6,30V34.12H18.361V30" transform="translate(-2.73 -19.994)"/><path class="b" d="M21.181,9.09,18.09,6,15,9.09" transform="translate(-8.64 -4.235)"/><path class="b" d="M23.992,14.241V6" transform="translate(-14.544 -4.235)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#346fb1;stroke-linejoin:round;}.c{stroke-linecap:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10.667,17.333A6.667,6.667,0,1,0,4,10.667,6.667,6.667,0,0,0,10.667,17.333Z" transform="translate(-2.667 -2.667)"/><path class="c" d="M24.008,12v4l2.826,2.826" transform="translate(-16.005 -8)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(212,120,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(207,19,34,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(29,171,123,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(132,85,230,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(201,181,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(69,195,243,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#346fb1;stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 -2)"><rect class="a" width="16" height="16" transform="translate(0 2)"/><path class="b" d="M17.333,8H4V18H9l1.667,1.667L12.333,18h5Z" transform="translate(-2.667 -3.667)"/><circle class="b" cx="1.667" cy="1.667" r="1.667" transform="translate(6.333 6.333)"/><path class="b" d="M21,26.667A2.848,2.848,0,0,0,18,24a2.848,2.848,0,0,0-3,2.667" transform="translate(-10 -14.333)"/></g></svg>
@@ -0,0 +1,158 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { type LucideIcon, XIcon } from "lucide-react";
+import { forwardRef, type ComponentProps, type HTMLAttributes } from "react";
+
+export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+
+export const Artifact = ({ className, ...props }: ArtifactProps) => (
+  <div
+    className={cn(
+      "flex flex-col overflow-hidden rounded-[1.35rem] border border-border bg-background shadow-[0_24px_60px_-28px_rgba(15,23,42,0.16)] ring-1 ring-black/3",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactHeader = ({
+  className,
+  ...props
+}: ArtifactHeaderProps) => (
+  <div
+    className={cn(
+      "flex items-center justify-between border-b border-border bg-background px-4 py-3",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ArtifactCloseProps = ComponentProps<typeof Button>;
+
+export const ArtifactClose = ({
+  className,
+  children,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}: ArtifactCloseProps) => (
+  <Button
+    className={cn(
+      "text-muted-foreground hover:text-foreground size-8 p-0",
+      className,
+    )}
+    size={size}
+    type="button"
+    variant={variant}
+    {...props}
+  >
+    {children ?? <XIcon className="size-4" />}
+    <span className="sr-only">Close</span>
+  </Button>
+);
+
+export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
+  <div
+    className={cn(
+      "text-foreground text-sm font-semibold tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const ArtifactDescription = ({
+  className,
+  ...props
+}: ArtifactDescriptionProps) => (
+  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
+);
+
+export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactActions = ({
+  className,
+  ...props
+}: ArtifactActionsProps) => (
+  <div className={cn("flex items-center gap-1.5", className)} {...props} />
+);
+
+export type ArtifactActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+  icon?: LucideIcon;
+};
+
+export const ArtifactAction = ({
+  tooltip,
+  label,
+  icon: Icon,
+  children,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}: ArtifactActionProps) => {
+  const button = (
+    <Button
+      className={cn(
+        "text-muted-foreground hover:text-foreground hover:bg-accent/70 size-8 rounded-full p-0 transition-all duration-200 hover:scale-[1.03]",
+        className,
+      )}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {Icon ? <Icon className="size-4" /> : children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};
+
+export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactContent = forwardRef<HTMLDivElement, ArtifactContentProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "min-h-0 flex-1 overflow-auto bg-background p-4",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+ArtifactContent.displayName = "ArtifactContent";
@@ -0,0 +1,22 @@
+import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";
+import type { ReactNode } from "react";
+import "@xyflow/react/dist/style.css";
+
+type CanvasProps = ReactFlowProps & {
+  children?: ReactNode;
+};
+
+export const Canvas = ({ children, ...props }: CanvasProps) => (
+  <ReactFlow
+    deleteKeyCode={["Backspace", "Delete"]}
+    fitView
+    panOnDrag={false}
+    panOnScroll
+    selectionOnDrag={true}
+    zoomOnDoubleClick={false}
+    {...props}
+  >
+    <Background bgColor="var(--sidebar)" />
+    {children}
+  </ReactFlow>
+);
@@ -0,0 +1,239 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  BrainIcon,
+  ChevronDownIcon,
+  DotIcon,
+  type LucideIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import {
+  createContext,
+  isValidElement,
+  memo,
+  useContext,
+  useMemo,
+} from "react";
+
+type ChainOfThoughtContextValue = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+  null,
+);
+
+const useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought",
+    );
+  }
+  return context;
+};
+
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }: ChainOfThoughtProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen],
+    );
+
+    return (
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+        <div className={cn("not-prose", className)} {...props}>
+          {children}
+        </div>
+      </ChainOfThoughtContext.Provider>
+    );
+  },
+);
+
+export type ChainOfThoughtHeaderProps = ComponentProps<
+  typeof CollapsibleTrigger
+> & {
+  icon?: React.ReactElement;
+};
+
+export const ChainOfThoughtHeader = memo(
+  ({ className, children, icon, ...props }: ChainOfThoughtHeaderProps) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+
+    return (
+      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+        <CollapsibleTrigger
+          className={cn(
+            "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
+            className,
+          )}
+          {...props}
+        >
+          {icon ?? <BrainIcon className="size-4" />}
+          <span className="flex-1 text-left">
+            {children ?? "Chain of Thought"}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              "size-4 transition-transform",
+              isOpen ? "rotate-180" : "rotate-0",
+            )}
+          />
+        </CollapsibleTrigger>
+      </Collapsible>
+    );
+  },
+);
+
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+  icon?: LucideIcon | React.ReactElement;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: "complete" | "active" | "pending";
+};
+
+export const ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = "complete",
+    children,
+    ...props
+  }: ChainOfThoughtStepProps) => {
+    const statusStyles = {
+      complete: "text-muted-foreground",
+      active: "text-foreground",
+      pending: "text-muted-foreground/50",
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex gap-2 text-sm",
+          statusStyles[status],
+          "fade-in-0 slide-in-from-top-2 animate-in",
+          className,
+        )}
+        {...props}
+      >
+        <div className="relative mt-0.5">
+          {isValidElement(Icon) ? Icon : <Icon className="size-4" />}
+          <div className="bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px" />
+        </div>
+        <div className="flex-1 space-y-2 overflow-hidden">
+          <div>{label}</div>
+          {description && (
+            <div className="text-muted-foreground text-xs">{description}</div>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+
+export const ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-2 overflow-x-hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+
+export const ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
+    <Badge
+      className={cn("gap-1 px-2 py-0.5 text-xs font-normal", className)}
+      variant="secondary"
+      {...props}
+    >
+      {children}
+    </Badge>
+  ),
+);
+
+export type ChainOfThoughtContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const ChainOfThoughtContent = memo(
+  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
+    const { isOpen } = useChainOfThought();
+
+    return (
+      <Collapsible open={isOpen}>
+        <CollapsibleContent
+          className={cn(
+            "mt-2 space-y-3",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  },
+);
+
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+  caption?: string;
+};
+
+export const ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
+    <div className={cn("mt-2 space-y-2", className)} {...props}>
+      <div className="bg-muted relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg p-3">
+        {children}
+      </div>
+      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
+    </div>
+  ),
+);
+
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
@@ -0,0 +1,71 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { BookmarkIcon, type LucideProps } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+
+export const Checkpoint = ({
+  className,
+  children,
+  ...props
+}: CheckpointProps) => (
+  <div
+    className={cn(
+      "text-muted-foreground flex items-center gap-0.5 overflow-hidden",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <Separator />
+  </div>
+);
+
+export type CheckpointIconProps = LucideProps;
+
+export const CheckpointIcon = ({
+  className,
+  children,
+  ...props
+}: CheckpointIconProps) =>
+  children ?? (
+    <BookmarkIcon className={cn("size-4 shrink-0", className)} {...props} />
+  );
+
+export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const CheckpointTrigger = ({
+  children,
+  className,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}: CheckpointTriggerProps) =>
+  tooltip ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size={size} type="button" variant={variant} {...props}>
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent align="start" side="bottom">
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+    </Button>
+  );
@@ -0,0 +1,174 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { copyTextToClipboard } from "@/core/clipboard";
+import { cn } from "@/lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { type BundledLanguage, codeToHtml, type ShikiTransformer } from "shiki";
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+  code: string;
+  language: BundledLanguage;
+  showLineNumbers?: boolean;
+};
+
+type CodeBlockContextType = {
+  code: string;
+};
+
+const CodeBlockContext = createContext<CodeBlockContextType>({
+  code: "",
+});
+
+const lineNumberTransformer: ShikiTransformer = {
+  name: "line-numbers",
+  line(node, line) {
+    node.children.unshift({
+      type: "element",
+      tagName: "span",
+      properties: {
+        className: [
+          "inline-block",
+          "min-w-10",
+          "mr-4",
+          "text-right",
+          "select-none",
+          "text-muted-foreground",
+        ],
+      },
+      children: [{ type: "text", value: String(line) }],
+    });
+  },
+};
+
+export async function highlightCode(
+  code: string,
+  language: BundledLanguage,
+  showLineNumbers = false,
+) {
+  const transformers: ShikiTransformer[] = showLineNumbers
+    ? [lineNumberTransformer]
+    : [];
+
+  return await Promise.all([
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-light",
+      transformers,
+    }),
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-dark-pro",
+      transformers,
+    }),
+  ]);
+}
+
+export const CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}: CodeBlockProps) => {
+  const [html, setHtml] = useState<string>("");
+  const [darkHtml, setDarkHtml] = useState<string>("");
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+      if (!mounted.current) {
+        setHtml(light);
+        setDarkHtml(dark);
+        mounted.current = true;
+      }
+    });
+
+    return () => {
+      mounted.current = false;
+    };
+  }, [code, language, showLineNumbers]);
+
+  return (
+    <CodeBlockContext.Provider value={{ code }}>
+      <div
+        className={cn(
+          "group bg-background text-foreground relative size-full overflow-hidden rounded-md border",
+          className,
+        )}
+        {...props}
+      >
+        <div className="relative size-full">
+          <div
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! size-full overflow-auto dark:hidden [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+          <div
+            className="[&>pre]:bg-background! [&>pre]:text-foreground! hidden size-full overflow-auto dark:block [&_code]:font-mono [&_code]:text-sm [&>pre]:m-0 [&>pre]:text-sm [&>pre]:whitespace-pre-wrap"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            dangerouslySetInnerHTML={{ __html: darkHtml }}
+          />
+          {children && (
+            <div className="absolute top-2 right-2 flex items-center gap-2">
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+    </CodeBlockContext.Provider>
+  );
+};
+
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export const CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeBlockCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { code } = useContext(CodeBlockContext);
+
+  const copyToClipboard = async () => {
+    try {
+      await copyTextToClipboard(code);
+      setIsCopied(true);
+      onCopy?.();
+      setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <Button
+      className={cn("shrink-0", className)}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </Button>
+  );
+};
@@ -0,0 +1,28 @@
+import type { ConnectionLineComponent } from "@xyflow/react";
+
+const HALF = 0.5;
+
+export const Connection: ConnectionLineComponent = ({
+  fromX,
+  fromY,
+  toX,
+  toY,
+}) => (
+  <g>
+    <path
+      className="animated"
+      d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
+      fill="none"
+      stroke="var(--color-ring)"
+      strokeWidth={1}
+    />
+    <circle
+      cx={toX}
+      cy={toY}
+      fill="#fff"
+      r={3}
+      stroke="var(--color-ring)"
+      strokeWidth={1}
+    />
+  </g>
+);
@@ -0,0 +1,408 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+import type { LanguageModelUsage } from "ai";
+import { type ComponentProps, createContext, useContext } from "react";
+import { getUsage } from "tokenlens";
+
+const PERCENT_MAX = 100;
+const ICON_RADIUS = 10;
+const ICON_VIEWBOX = 24;
+const ICON_CENTER = 12;
+const ICON_STROKE_WIDTH = 2;
+
+type ModelId = string;
+
+type ContextSchema = {
+  usedTokens: number;
+  maxTokens: number;
+  usage?: LanguageModelUsage;
+  modelId?: ModelId;
+};
+
+const ContextContext = createContext<ContextSchema | null>(null);
+
+const useContextValue = () => {
+  const context = useContext(ContextContext);
+
+  if (!context) {
+    throw new Error("Context components must be used within Context");
+  }
+
+  return context;
+};
+
+export type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+
+export const Context = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}: ContextProps) => (
+  <ContextContext.Provider
+    value={{
+      usedTokens,
+      maxTokens,
+      usage,
+      modelId,
+    }}
+  >
+    <HoverCard closeDelay={0} openDelay={0} {...props} />
+  </ContextContext.Provider>
+);
+
+const ContextIcon = () => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = usedTokens / maxTokens;
+  const dashOffset = circumference * (1 - usedPercent);
+
+  return (
+    <svg
+      aria-label="Model context usage"
+      height="20"
+      role="img"
+      style={{ color: "currentcolor" }}
+      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}
+      width="20"
+    >
+      <circle
+        cx={ICON_CENTER}
+        cy={ICON_CENTER}
+        fill="none"
+        opacity="0.25"
+        r={ICON_RADIUS}
+        stroke="currentColor"
+        strokeWidth={ICON_STROKE_WIDTH}
+      />
+      <circle
+        cx={ICON_CENTER}
+        cy={ICON_CENTER}
+        fill="none"
+        opacity="0.7"
+        r={ICON_RADIUS}
+        stroke="currentColor"
+        strokeDasharray={`${circumference} ${circumference}`}
+        strokeDashoffset={dashOffset}
+        strokeLinecap="round"
+        strokeWidth={ICON_STROKE_WIDTH}
+        style={{ transformOrigin: "center", transform: "rotate(-90deg)" }}
+      />
+    </svg>
+  );
+};
+
+export type ContextTriggerProps = ComponentProps<typeof Button>;
+
+export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const renderedPercent = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    maximumFractionDigits: 1,
+  }).format(usedPercent);
+
+  return (
+    <HoverCardTrigger asChild>
+      {children ?? (
+        <Button type="button" variant="ghost" {...props}>
+          <span className="text-muted-foreground font-medium">
+            {renderedPercent}
+          </span>
+          <ContextIcon />
+        </Button>
+      )}
+    </HoverCardTrigger>
+  );
+};
+
+export type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+
+export const ContextContent = ({
+  className,
+  ...props
+}: ContextContentProps) => (
+  <HoverCardContent
+    className={cn("min-w-60 divide-y overflow-hidden p-0", className)}
+    {...props}
+  />
+);
+
+export type ContextContentHeaderProps = ComponentProps<"div">;
+
+export const ContextContentHeader = ({
+  children,
+  className,
+  ...props
+}: ContextContentHeaderProps) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    maximumFractionDigits: 1,
+  }).format(usedPercent);
+  const used = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+  }).format(usedTokens);
+  const total = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+  }).format(maxTokens);
+
+  return (
+    <div className={cn("w-full space-y-2 p-3", className)} {...props}>
+      {children ?? (
+        <>
+          <div className="flex items-center justify-between gap-3 text-xs">
+            <p>{displayPct}</p>
+            <p className="text-muted-foreground font-mono">
+              {used} / {total}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Progress className="bg-muted" value={usedPercent * PERCENT_MAX} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export type ContextContentBodyProps = ComponentProps<"div">;
+
+export const ContextContentBody = ({
+  children,
+  className,
+  ...props
+}: ContextContentBodyProps) => (
+  <div className={cn("w-full p-3", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type ContextContentFooterProps = ComponentProps<"div">;
+
+export const ContextContentFooter = ({
+  children,
+  className,
+  ...props
+}: ContextContentFooterProps) => {
+  const { modelId, usage } = useContextValue();
+  const costUSD = modelId
+    ? getUsage({
+        modelId,
+        usage: {
+          input: usage?.inputTokens ?? 0,
+          output: usage?.outputTokens ?? 0,
+        },
+      }).costUSD?.totalUSD
+    : undefined;
+  const totalCost = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(costUSD ?? 0);
+
+  return (
+    <div
+      className={cn(
+        "bg-secondary flex w-full items-center justify-between gap-3 p-3 text-xs",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <span className="text-muted-foreground">Total cost</span>
+          <span>{totalCost}</span>
+        </>
+      )}
+    </div>
+  );
+};
+
+export type ContextInputUsageProps = ComponentProps<"div">;
+
+export const ContextInputUsage = ({
+  className,
+  children,
+  ...props
+}: ContextInputUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const inputTokens = usage?.inputTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!inputTokens) {
+    return null;
+  }
+
+  const inputCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { input: inputTokens, output: 0 },
+      }).costUSD?.totalUSD
+    : undefined;
+  const inputCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(inputCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Input</span>
+      <TokensWithCost costText={inputCostText} tokens={inputTokens} />
+    </div>
+  );
+};
+
+export type ContextOutputUsageProps = ComponentProps<"div">;
+
+export const ContextOutputUsage = ({
+  className,
+  children,
+  ...props
+}: ContextOutputUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const outputTokens = usage?.outputTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!outputTokens) {
+    return null;
+  }
+
+  const outputCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { input: 0, output: outputTokens },
+      }).costUSD?.totalUSD
+    : undefined;
+  const outputCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(outputCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Output</span>
+      <TokensWithCost costText={outputCostText} tokens={outputTokens} />
+    </div>
+  );
+};
+
+export type ContextReasoningUsageProps = ComponentProps<"div">;
+
+export const ContextReasoningUsage = ({
+  className,
+  children,
+  ...props
+}: ContextReasoningUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const reasoningTokens = usage?.reasoningTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!reasoningTokens) {
+    return null;
+  }
+
+  const reasoningCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { reasoningTokens },
+      }).costUSD?.totalUSD
+    : undefined;
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(reasoningCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Reasoning</span>
+      <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />
+    </div>
+  );
+};
+
+export type ContextCacheUsageProps = ComponentProps<"div">;
+
+export const ContextCacheUsage = ({
+  className,
+  children,
+  ...props
+}: ContextCacheUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const cacheTokens = usage?.cachedInputTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!cacheTokens) {
+    return null;
+  }
+
+  const cacheCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { cacheReads: cacheTokens, input: 0, output: 0 },
+      }).costUSD?.totalUSD
+    : undefined;
+  const cacheCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(cacheCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Cache</span>
+      <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />
+    </div>
+  );
+};
+
+const TokensWithCost = ({
+  tokens,
+  costText,
+}: {
+  tokens?: number;
+  costText?: string;
+}) => (
+  <span>
+    {tokens === undefined
+      ? "—"
+      : new Intl.NumberFormat("en-US", {
+          notation: "compact",
+        }).format(tokens)}
+    {costText ? (
+      <span className="text-muted-foreground ml-2">• {costText}</span>
+    ) : null}
+  </span>
+);
@@ -0,0 +1,18 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
+
+export const Controls = ({ className, ...props }: ControlsProps) => (
+  <ControlsPrimitive
+    className={cn(
+      "bg-card gap-px overflow-hidden rounded-md border p-1 shadow-none!",
+      "[&>button]:hover:bg-secondary! [&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent!",
+      className,
+    )}
+    {...props}
+  />
+);
@@ -0,0 +1,100 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ArrowDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn("relative flex-1 overflow-y-hidden", className)}
+    initial="smooth"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = ComponentProps<
+  typeof StickToBottom.Content
+>;
+
+export const ConversationContent = ({
+  className,
+  ...props
+}: ConversationContentProps) => (
+  <StickToBottom.Content
+    className={cn("flex flex-col gap-8 p-4", className)}
+    {...props}
+  />
+);
+
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+};
+
+export const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}: ConversationEmptyStateProps) => (
+  <div
+    className={cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        {icon && <div className="text-muted-foreground">{icon}</div>}
+        <div className="space-y-1">
+          <h3 className="text-sm font-medium">{title}</h3>
+          {description && (
+            <p className="text-muted-foreground text-sm">{description}</p>
+          )}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+
+export const ConversationScrollButton = ({
+  className,
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return (
+    !isAtBottom && (
+      <Button
+        className={cn(
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
+          className,
+        )}
+        onClick={handleScrollToBottom}
+        size="icon"
+        type="button"
+        variant="outline"
+        {...props}
+      >
+        <ArrowDownIcon className="size-4" />
+      </Button>
+    )
+  );
+};
@@ -0,0 +1,140 @@
+import {
+  BaseEdge,
+  type EdgeProps,
+  getBezierPath,
+  getSimpleBezierPath,
+  type InternalNode,
+  type Node,
+  Position,
+  useInternalNode,
+} from "@xyflow/react";
+
+const Temporary = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+}: EdgeProps) => {
+  const [edgePath] = getSimpleBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <BaseEdge
+      className="stroke-ring stroke-1"
+      id={id}
+      path={edgePath}
+      style={{
+        strokeDasharray: "5, 5",
+      }}
+    />
+  );
+};
+
+const getHandleCoordsByPosition = (
+  node: InternalNode<Node>,
+  handlePosition: Position,
+) => {
+  // Choose the handle type based on position - Left is for target, Right is for source
+  const handleType = handlePosition === Position.Left ? "target" : "source";
+
+  const handle = node.internals.handleBounds?.[handleType]?.find(
+    (h) => h.position === handlePosition,
+  );
+
+  if (!handle) {
+    return [0, 0] as const;
+  }
+
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+
+  // this is a tiny detail to make the markerEnd of an edge visible.
+  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
+  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
+  switch (handlePosition) {
+    case Position.Left:
+      offsetX = 0;
+      break;
+    case Position.Right:
+      offsetX = handle.width;
+      break;
+    case Position.Top:
+      offsetY = 0;
+      break;
+    case Position.Bottom:
+      offsetY = handle.height;
+      break;
+    default:
+      throw new Error(`Invalid handle position: ${handlePosition}`);
+  }
+
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+
+  return [x, y] as const;
+};
+
+const getEdgeParams = (
+  source: InternalNode<Node>,
+  target: InternalNode<Node>,
+) => {
+  const sourcePos = Position.Right;
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const targetPos = Position.Left;
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+
+  return {
+    sx,
+    sy,
+    tx,
+    ty,
+    sourcePos,
+    targetPos,
+  };
+};
+
+const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+
+  if (!(sourceNode && targetNode)) {
+    return null;
+  }
+
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode,
+  );
+
+  const [edgePath] = getBezierPath({
+    sourceX: sx,
+    sourceY: sy,
+    sourcePosition: sourcePos,
+    targetX: tx,
+    targetY: ty,
+    targetPosition: targetPos,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />
+      <circle fill="var(--primary)" r="4">
+        <animateMotion dur="2s" path={edgePath} repeatCount="indefinite" />
+      </circle>
+    </>
+  );
+};
+
+export const Edge = {
+  Temporary,
+  Animated,
+};
@@ -0,0 +1,24 @@
+import { cn } from "@/lib/utils";
+import type { Experimental_GeneratedImage } from "ai";
+
+export type ImageProps = Experimental_GeneratedImage & {
+  className?: string;
+  alt?: string;
+};
+
+export const Image = ({
+  base64,
+  uint8Array,
+  mediaType,
+  ...props
+}: ImageProps) => (
+  <img
+    {...props}
+    alt={props.alt}
+    className={cn(
+      "h-auto max-w-full overflow-hidden rounded-md",
+      props.className,
+    )}
+    src={`data:${mediaType};base64,${base64}`}
+  />
+);
@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+type LoaderIconProps = {
+  size?: number;
+};
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className,
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);
@@ -0,0 +1,446 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { FileUIPart, UIMessage } from "ai";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PaperclipIcon,
+  XIcon,
+} from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: UIMessage["role"];
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      "group flex w-full flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageContent = ({
+  children,
+  className,
+  ...props
+}: MessageContentProps) => (
+  <div
+    className={cn(
+      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-visible",
+      "group-[.is-user]:overflow-hidden",
+      "group-[.is-user]:bg-secondary group-[.is-user]:text-foreground group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:px-4 group-[.is-user]:py-3",
+      "group-[.is-assistant]:text-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionsProps = ComponentProps<"div">;
+
+export const MessageActions = ({
+  className,
+  children,
+  ...props
+}: MessageActionsProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type MessageActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+};
+
+export const MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}: MessageActionProps) => {
+  const button = (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};
+
+type MessageBranchContextType = {
+  currentBranch: number;
+  totalBranches: number;
+  goToPrevious: () => void;
+  goToNext: () => void;
+  branches: ReactElement[];
+  setBranches: (branches: ReactElement[]) => void;
+};
+
+const MessageBranchContext = createContext<MessageBranchContextType | null>(
+  null,
+);
+
+const useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch",
+    );
+  }
+
+  return context;
+};
+
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+  defaultBranch?: number;
+  onBranchChange?: (branchIndex: number) => void;
+};
+
+export const MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}: MessageBranchProps) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState<ReactElement[]>([]);
+
+  const handleBranchChange = (newBranch: number) => {
+    setCurrentBranch(newBranch);
+    onBranchChange?.(newBranch);
+  };
+
+  const goToPrevious = () => {
+    const newBranch =
+      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  };
+
+  const goToNext = () => {
+    const newBranch =
+      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  };
+
+  const contextValue: MessageBranchContextType = {
+    currentBranch,
+    totalBranches: branches.length,
+    goToPrevious,
+    goToNext,
+    branches,
+    setBranches,
+  };
+
+  return (
+    <MessageBranchContext.Provider value={contextValue}>
+      <div
+        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
+        {...props}
+      />
+    </MessageBranchContext.Provider>
+  );
+};
+
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageBranchContent = ({
+  children,
+  ...props
+}: MessageBranchContentProps) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = Array.isArray(children) ? children : [children];
+
+  // Use useEffect to update branches when they change
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+
+  return childrenArray.map((branch, index) => (
+    <div
+      className={cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden",
+      )}
+      key={branch.key}
+      {...props}
+    >
+      {branch}
+    </div>
+  ));
+};
+
+export type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
+  from: UIMessage["role"];
+};
+
+export const MessageBranchSelector = ({
+  className,
+  from,
+  ...props
+}: MessageBranchSelectorProps) => {
+  const { totalBranches } = useMessageBranch();
+
+  // Don't render if there's only one branch
+  if (totalBranches <= 1) {
+    return null;
+  }
+
+  return (
+    <ButtonGroup
+      className="[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md"
+      orientation="horizontal"
+      {...props}
+    />
+  );
+};
+
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+
+export const MessageBranchPrevious = ({
+  children,
+  ...props
+}: MessageBranchPreviousProps) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Previous branch"
+      disabled={totalBranches <= 1}
+      onClick={goToPrevious}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <ChevronLeftIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
+
+export const MessageBranchNext = ({
+  children,
+  className,
+  ...props
+}: MessageBranchNextProps) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Next branch"
+      disabled={totalBranches <= 1}
+      onClick={goToNext}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+
+export const MessageBranchPage = ({
+  className,
+  ...props
+}: MessageBranchPageProps) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+
+  return (
+    <ButtonGroupText
+      className={cn(
+        "text-muted-foreground border-none bg-transparent shadow-none",
+        className,
+      )}
+      {...props}
+    >
+      {currentBranch + 1} of {totalBranches}
+    </ButtonGroupText>
+  );
+};
+
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+
+export const MessageResponse = memo(
+  ({ className, ...props }: MessageResponseProps) => (
+    <Streamdown
+      className={cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children,
+);
+
+MessageResponse.displayName = "MessageResponse";
+
+export type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
+  data: FileUIPart;
+  className?: string;
+  onRemove?: () => void;
+};
+
+export function MessageAttachment({
+  data,
+  className,
+  onRemove,
+  ...props
+}: MessageAttachmentProps) {
+  const filename = data.filename || "";
+  const mediaType =
+    data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+  const isImage = mediaType === "image";
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+
+  return (
+    <div
+      className={cn(
+        "group relative size-24 overflow-hidden rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {isImage ? (
+        <>
+          <img
+            alt={filename || "attachment"}
+            className="size-full object-cover"
+            height={100}
+            src={data.url}
+            width={100}
+          />
+          {onRemove && (
+            <Button
+              aria-label="Remove attachment"
+              className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove();
+              }}
+              type="button"
+              variant="ghost"
+            >
+              <XIcon />
+              <span className="sr-only">Remove</span>
+            </Button>
+          )}
+        </>
+      ) : (
+        <>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="bg-muted text-muted-foreground flex size-full shrink-0 items-center justify-center rounded-lg">
+                <PaperclipIcon className="size-4" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{attachmentLabel}</p>
+            </TooltipContent>
+          </Tooltip>
+          {onRemove && (
+            <Button
+              aria-label="Remove attachment"
+              className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove();
+              }}
+              type="button"
+              variant="ghost"
+            >
+              <XIcon />
+              <span className="sr-only">Remove</span>
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export type MessageAttachmentsProps = ComponentProps<"div">;
+
+export function MessageAttachments({
+  children,
+  className,
+  ...props
+}: MessageAttachmentsProps) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "ml-auto flex w-fit flex-wrap items-start gap-2",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type MessageToolbarProps = ComponentProps<"div">;
+
+export const MessageToolbar = ({
+  className,
+  children,
+  ...props
+}: MessageToolbarProps) => (
+  <div
+    className={cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
@@ -0,0 +1,208 @@
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+export type ModelSelectorProps = ComponentProps<typeof Dialog>;
+
+export const ModelSelector = (props: ModelSelectorProps) => (
+  <Dialog {...props} />
+);
+
+export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+
+export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
+  <DialogTrigger {...props} />
+);
+
+export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+  title?: ReactNode;
+};
+
+export const ModelSelectorContent = ({
+  className,
+  children,
+  title = "Model Selector",
+  ...props
+}: ModelSelectorContentProps) => (
+  <DialogContent className={cn("p-0", className)} {...props}>
+    <DialogTitle className="sr-only">{title}</DialogTitle>
+    <Command className="**:data-[slot=command-input-wrapper]:h-auto">
+      {children}
+    </Command>
+  </DialogContent>
+);
+
+export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+
+export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
+  <CommandDialog {...props} />
+);
+
+export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+
+export const ModelSelectorInput = ({
+  className,
+  ...props
+}: ModelSelectorInputProps) => (
+  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
+);
+
+export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+
+export const ModelSelectorList = (props: ModelSelectorListProps) => (
+  <CommandList {...props} />
+);
+
+export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+
+export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
+  <CommandEmpty {...props} />
+);
+
+export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+
+export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
+  <CommandGroup {...props} />
+);
+
+export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+
+export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
+  <CommandItem {...props} />
+);
+
+export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+
+export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
+  <CommandShortcut {...props} />
+);
+
+export type ModelSelectorSeparatorProps = ComponentProps<
+  typeof CommandSeparator
+>;
+
+export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
+  <CommandSeparator {...props} />
+);
+
+export type ModelSelectorLogoProps = Omit<
+  ComponentProps<"img">,
+  "src" | "alt"
+> & {
+  provider:
+    | "moonshotai-cn"
+    | "lucidquery"
+    | "moonshotai"
+    | "zai-coding-plan"
+    | "alibaba"
+    | "xai"
+    | "vultr"
+    | "nvidia"
+    | "upstage"
+    | "groq"
+    | "github-copilot"
+    | "mistral"
+    | "vercel"
+    | "nebius"
+    | "deepseek"
+    | "alibaba-cn"
+    | "google-vertex-anthropic"
+    | "venice"
+    | "chutes"
+    | "cortecs"
+    | "github-models"
+    | "togetherai"
+    | "azure"
+    | "baseten"
+    | "huggingface"
+    | "opencode"
+    | "fastrouter"
+    | "google"
+    | "google-vertex"
+    | "cloudflare-workers-ai"
+    | "inception"
+    | "wandb"
+    | "openai"
+    | "zhipuai-coding-plan"
+    | "perplexity"
+    | "openrouter"
+    | "zenmux"
+    | "v0"
+    | "iflowcn"
+    | "synthetic"
+    | "deepinfra"
+    | "zhipuai"
+    | "submodel"
+    | "zai"
+    | "inference"
+    | "requesty"
+    | "morph"
+    | "lmstudio"
+    | "anthropic"
+    | "aihubmix"
+    | "fireworks-ai"
+    | "modelscope"
+    | "llama"
+    | "scaleway"
+    | "amazon-bedrock"
+    | "cerebras"
+    | (string & {});
+};
+
+export const ModelSelectorLogo = ({
+  provider,
+  className,
+  ...props
+}: ModelSelectorLogoProps) => (
+  <img
+    {...props}
+    alt={`${provider} logo`}
+    className={cn("size-3 dark:invert", className)}
+    height={12}
+    src={`https://models.dev/logos/${provider}.svg`}
+    width={12}
+  />
+);
+
+export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+
+export const ModelSelectorLogoGroup = ({
+  className,
+  ...props
+}: ModelSelectorLogoGroupProps) => (
+  <div
+    className={cn(
+      "[&>img]:bg-background dark:[&>img]:bg-foreground flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:p-px [&>img]:ring-1",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ModelSelectorNameProps = ComponentProps<"span">;
+
+export const ModelSelectorName = ({
+  className,
+  ...props
+}: ModelSelectorNameProps) => (
+  <span
+    className={cn("flex-1 truncate text-left text-xs", className)}
+    {...props}
+  />
+);
@@ -0,0 +1,71 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Handle, Position } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+export type NodeProps = ComponentProps<typeof Card> & {
+  handles: {
+    target: boolean;
+    source: boolean;
+  };
+};
+
+export const Node = ({ handles, className, ...props }: NodeProps) => (
+  <Card
+    className={cn(
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      className,
+    )}
+    {...props}
+  >
+    {handles.target && <Handle position={Position.Left} type="target" />}
+    {handles.source && <Handle position={Position.Right} type="source" />}
+    {props.children}
+  </Card>
+);
+
+export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
+  <CardHeader
+    className={cn("bg-secondary gap-0.5 rounded-t-md border-b p-3!", className)}
+    {...props}
+  />
+);
+
+export type NodeTitleProps = ComponentProps<typeof CardTitle>;
+
+export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
+
+export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+
+export const NodeDescription = (props: NodeDescriptionProps) => (
+  <CardDescription {...props} />
+);
+
+export type NodeActionProps = ComponentProps<typeof CardAction>;
+
+export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
+
+export type NodeContentProps = ComponentProps<typeof CardContent>;
+
+export const NodeContent = ({ className, ...props }: NodeContentProps) => (
+  <CardContent className={cn("p-3", className)} {...props} />
+);
+
+export type NodeFooterProps = ComponentProps<typeof CardFooter>;
+
+export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
+  <CardFooter
+    className={cn("bg-secondary rounded-b-md border-t p-3!", className)}
+    {...props}
+  />
+);
@@ -0,0 +1,365 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import {
+  ChevronDownIcon,
+  ExternalLinkIcon,
+  MessageCircleIcon,
+} from "lucide-react";
+import { type ComponentProps, createContext, useContext } from "react";
+
+const providers = {
+  github: {
+    title: "Open in GitHub",
+    createUrl: (url: string) => url,
+    icon: (
+      <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+        <title>GitHub</title>
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+      </svg>
+    ),
+  },
+  scira: {
+    title: "Open in Scira",
+    createUrl: (q: string) =>
+      `https://scira.ai/?${new URLSearchParams({
+        q,
+      })}`,
+    icon: (
+      <svg
+        fill="none"
+        height="934"
+        viewBox="0 0 910 934"
+        width="910"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Scira AI</title>
+        <path
+          d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="20"
+        />
+        <path
+          d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="20"
+        />
+        <path
+          d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="30"
+        />
+      </svg>
+    ),
+  },
+  chatgpt: {
+    title: "Open in ChatGPT",
+    createUrl: (prompt: string) =>
+      `https://chatgpt.com/?${new URLSearchParams({
+        hints: "search",
+        prompt,
+      })}`,
+    icon: (
+      <svg
+        fill="currentColor"
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>OpenAI</title>
+        <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+    ),
+  },
+  claude: {
+    title: "Open in Claude",
+    createUrl: (q: string) =>
+      `https://claude.ai/new?${new URLSearchParams({
+        q,
+      })}`,
+    icon: (
+      <svg
+        fill="currentColor"
+        role="img"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Claude</title>
+        <path
+          clipRule="evenodd"
+          d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    ),
+  },
+  t3: {
+    title: "Open in T3 Chat",
+    createUrl: (q: string) =>
+      `https://t3.chat/new?${new URLSearchParams({
+        q,
+      })}`,
+    icon: <MessageCircleIcon />,
+  },
+  v0: {
+    title: "Open in v0",
+    createUrl: (q: string) =>
+      `https://v0.app?${new URLSearchParams({
+        q,
+      })}`,
+    icon: (
+      <svg
+        fill="currentColor"
+        viewBox="0 0 147 70"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>v0</title>
+        <path d="M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z" />
+        <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z" />
+      </svg>
+    ),
+  },
+  cursor: {
+    title: "Open in Cursor",
+    createUrl: (text: string) => {
+      const url = new URL("https://cursor.com/link/prompt");
+      url.searchParams.set("text", text);
+      return url.toString();
+    },
+    icon: (
+      <svg
+        version="1.1"
+        viewBox="0 0 466.73 532.09"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Cursor</title>
+        <path
+          d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+};
+
+const OpenInContext = createContext<{ query: string } | undefined>(undefined);
+
+const useOpenInContext = () => {
+  const context = useContext(OpenInContext);
+  if (!context) {
+    throw new Error("OpenIn components must be used within an OpenIn provider");
+  }
+  return context;
+};
+
+export type OpenInProps = ComponentProps<typeof DropdownMenu> & {
+  query: string;
+};
+
+export const OpenIn = ({ query, ...props }: OpenInProps) => (
+  <OpenInContext.Provider value={{ query }}>
+    <DropdownMenu {...props} />
+  </OpenInContext.Provider>
+);
+
+export type OpenInContentProps = ComponentProps<typeof DropdownMenuContent>;
+
+export const OpenInContent = ({ className, ...props }: OpenInContentProps) => (
+  <DropdownMenuContent
+    align="start"
+    className={cn("w-[240px]", className)}
+    {...props}
+  />
+);
+
+export type OpenInItemProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInItem = (props: OpenInItemProps) => (
+  <DropdownMenuItem {...props} />
+);
+
+export type OpenInLabelProps = ComponentProps<typeof DropdownMenuLabel>;
+
+export const OpenInLabel = (props: OpenInLabelProps) => (
+  <DropdownMenuLabel {...props} />
+);
+
+export type OpenInSeparatorProps = ComponentProps<typeof DropdownMenuSeparator>;
+
+export const OpenInSeparator = (props: OpenInSeparatorProps) => (
+  <DropdownMenuSeparator {...props} />
+);
+
+export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
+
+export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
+  <DropdownMenuTrigger {...props} asChild>
+    {children ?? (
+      <Button type="button" variant="outline">
+        Open in chat
+        <ChevronDownIcon className="size-4" />
+      </Button>
+    )}
+  </DropdownMenuTrigger>
+);
+
+export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.chatgpt.createUrl(query)}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.chatgpt.icon}</span>
+        <span className="flex-1">{providers.chatgpt.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInClaude = (props: OpenInClaudeProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.claude.createUrl(query)}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.claude.icon}</span>
+        <span className="flex-1">{providers.claude.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInT3 = (props: OpenInT3Props) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.t3.createUrl(query)}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.t3.icon}</span>
+        <span className="flex-1">{providers.t3.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInScira = (props: OpenInSciraProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.scira.createUrl(query)}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.scira.icon}</span>
+        <span className="flex-1">{providers.scira.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInv0 = (props: OpenInv0Props) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.v0.createUrl(query)}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.v0.icon}</span>
+        <span className="flex-1">{providers.v0.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInCursor = (props: OpenInCursorProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.cursor.createUrl(query)}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.cursor.icon}</span>
+        <span className="flex-1">{providers.cursor.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import { Panel as PanelPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+type PanelProps = ComponentProps<typeof PanelPrimitive>;
+
+export const Panel = ({ className, ...props }: PanelProps) => (
+  <PanelPrimitive
+    className={cn(
+      "bg-card m-4 overflow-hidden rounded-md border p-1",
+      className,
+    )}
+    {...props}
+  />
+);
@@ -0,0 +1,142 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { ChevronsUpDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { createContext, useContext } from "react";
+import { Shimmer } from "./shimmer";
+
+type PlanContextValue = {
+  isStreaming: boolean;
+};
+
+const PlanContext = createContext<PlanContextValue | null>(null);
+
+const usePlan = () => {
+  const context = useContext(PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+
+export type PlanProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+};
+
+export const Plan = ({
+  className,
+  isStreaming = false,
+  children,
+  ...props
+}: PlanProps) => (
+  <PlanContext.Provider value={{ isStreaming }}>
+    <Collapsible asChild data-slot="plan" {...props}>
+      <Card className={cn("shadow-none", className)}>{children}</Card>
+    </Collapsible>
+  </PlanContext.Provider>
+);
+
+export type PlanHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (
+  <CardHeader
+    className={cn("flex items-start justify-between", className)}
+    data-slot="plan-header"
+    {...props}
+  />
+);
+
+export type PlanTitleProps = Omit<
+  ComponentProps<typeof CardTitle>,
+  "children"
+> & {
+  children: string;
+};
+
+export const PlanTitle = ({ children, ...props }: PlanTitleProps) => {
+  const { isStreaming } = usePlan();
+
+  return (
+    <CardTitle data-slot="plan-title" {...props}>
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+    </CardTitle>
+  );
+};
+
+export type PlanDescriptionProps = Omit<
+  ComponentProps<typeof CardDescription>,
+  "children"
+> & {
+  children: string;
+};
+
+export const PlanDescription = ({
+  className,
+  children,
+  ...props
+}: PlanDescriptionProps) => {
+  const { isStreaming } = usePlan();
+
+  return (
+    <CardDescription
+      className={cn("text-balance", className)}
+      data-slot="plan-description"
+      {...props}
+    >
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+    </CardDescription>
+  );
+};
+
+export type PlanActionProps = ComponentProps<typeof CardAction>;
+
+export const PlanAction = (props: PlanActionProps) => (
+  <CardAction data-slot="plan-action" {...props} />
+);
+
+export type PlanContentProps = ComponentProps<typeof CardContent>;
+
+export const PlanContent = (props: PlanContentProps) => (
+  <CollapsibleContent asChild>
+    <CardContent data-slot="plan-content" {...props} />
+  </CollapsibleContent>
+);
+
+export type PlanFooterProps = ComponentProps<"div">;
+
+export const PlanFooter = (props: PlanFooterProps) => (
+  <CardFooter data-slot="plan-footer" {...props} />
+);
+
+export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+
+export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (
+  <CollapsibleTrigger asChild>
+    <Button
+      className={cn("size-8", className)}
+      data-slot="plan-trigger"
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      <ChevronsUpDownIcon className="size-4" />
+      <span className="sr-only">Toggle plan</span>
+    </Button>
+  </CollapsibleTrigger>
+);
@@ -0,0 +1,274 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type QueueMessagePart = {
+  type: string;
+  text?: string;
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+};
+
+export type QueueMessage = {
+  id: string;
+  parts: QueueMessagePart[];
+};
+
+export type QueueTodo = {
+  id: string;
+  title: string;
+  description?: string;
+  status?: "pending" | "completed";
+};
+
+export type QueueItemProps = ComponentProps<"li">;
+
+export const QueueItem = ({ className, ...props }: QueueItemProps) => (
+  <li
+    className={cn(
+      "group hover:bg-muted flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemIndicatorProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemIndicatorProps) => (
+  <span
+    className={cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed
+        ? "border-muted-foreground/20 bg-muted-foreground/10"
+        : "border-muted-foreground/50",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemContentProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemContentProps) => (
+  <span
+    className={cn(
+      "line-clamp-1 grow break-words",
+      completed
+        ? "text-muted-foreground/50 line-through"
+        : "text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemDescriptionProps = ComponentProps<"div"> & {
+  completed?: boolean;
+};
+
+export const QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemDescriptionProps) => (
+  <div
+    className={cn(
+      "ml-6 text-xs",
+      completed
+        ? "text-muted-foreground/40 line-through"
+        : "text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemActionsProps = ComponentProps<"div">;
+
+export const QueueItemActions = ({
+  className,
+  ...props
+}: QueueItemActionsProps) => (
+  <div className={cn("flex gap-1", className)} {...props} />
+);
+
+export type QueueItemActionProps = Omit<
+  ComponentProps<typeof Button>,
+  "variant" | "size"
+>;
+
+export const QueueItemAction = ({
+  className,
+  ...props
+}: QueueItemActionProps) => (
+  <Button
+    className={cn(
+      "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground size-auto rounded p-1 opacity-0 transition-opacity group-hover:opacity-100",
+      className,
+    )}
+    size="icon"
+    type="button"
+    variant="ghost"
+    {...props}
+  />
+);
+
+export type QueueItemAttachmentProps = ComponentProps<"div">;
+
+export const QueueItemAttachment = ({
+  className,
+  ...props
+}: QueueItemAttachmentProps) => (
+  <div className={cn("mt-1 flex flex-wrap gap-2", className)} {...props} />
+);
+
+export type QueueItemImageProps = ComponentProps<"img">;
+
+export const QueueItemImage = ({
+  className,
+  ...props
+}: QueueItemImageProps) => (
+  <img
+    alt=""
+    className={cn("h-8 w-8 rounded border object-cover", className)}
+    height={32}
+    width={32}
+    {...props}
+  />
+);
+
+export type QueueItemFileProps = ComponentProps<"span">;
+
+export const QueueItemFile = ({
+  children,
+  className,
+  ...props
+}: QueueItemFileProps) => (
+  <span
+    className={cn(
+      "bg-muted flex items-center gap-1 rounded border px-2 py-1 text-xs",
+      className,
+    )}
+    {...props}
+  >
+    <PaperclipIcon size={12} />
+    <span className="max-w-[100px] truncate">{children}</span>
+  </span>
+);
+
+export type QueueListProps = ComponentProps<typeof ScrollArea>;
+
+export const QueueList = ({
+  children,
+  className,
+  ...props
+}: QueueListProps) => (
+  <ScrollArea className={cn("mt-2 -mb-1", className)} {...props}>
+    <div className="max-h-40 pr-4">
+      <ul>{children}</ul>
+    </div>
+  </ScrollArea>
+);
+
+// QueueSection - collapsible section container
+export type QueueSectionProps = ComponentProps<typeof Collapsible>;
+
+export const QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}: QueueSectionProps) => (
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+);
+
+// QueueSectionTrigger - section header/trigger
+export type QueueSectionTriggerProps = ComponentProps<"button">;
+
+export const QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}: QueueSectionTriggerProps) => (
+  <CollapsibleTrigger asChild>
+    <button
+      className={cn(
+        "group bg-muted/40 text-muted-foreground hover:bg-muted flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
+        className,
+      )}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  </CollapsibleTrigger>
+);
+
+// QueueSectionLabel - label content with icon and count
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
+  count?: number;
+  label: string;
+  icon?: React.ReactNode;
+};
+
+export const QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}: QueueSectionLabelProps) => (
+  <span className={cn("flex items-center gap-2", className)} {...props}>
+    <ChevronDownIcon className="size-4 transition-transform group-data-[state=closed]:-rotate-90" />
+    {icon}
+    <span>
+      {count} {label}
+    </span>
+  </span>
+);
+
+// QueueSectionContent - collapsible content area
+export type QueueSectionContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const QueueSectionContent = ({
+  className,
+  ...props
+}: QueueSectionContentProps) => (
+  <CollapsibleContent className={cn(className)} {...props} />
+);
+
+export type QueueProps = ComponentProps<"div">;
+
+export const Queue = ({ className, ...props }: QueueProps) => (
+  <div
+    className={cn(
+      "border-border bg-background flex flex-col gap-2 rounded-xl border px-3 pt-2 pb-2 shadow-xs",
+      className,
+    )}
+    {...props}
+  />
+);
@@ -0,0 +1,192 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+import { reasoningPlugins } from "@/core/streamdown/plugins";
+import { Shimmer } from "./shimmer";
+
+type ReasoningContextValue = {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+};
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }: ReasoningProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const [duration, setDuration] = useControllableState({
+      prop: durationProp,
+      defaultProp: undefined,
+    });
+
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const [startTime, setStartTime] = useState<number | null>(null);
+
+    // Track duration when streaming starts and ends
+    useEffect(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          setStartTime(Date.now());
+        }
+      } else if (startTime !== null) {
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setStartTime(null);
+      }
+    }, [isStreaming, startTime, setDuration]);
+
+    // Auto-open when streaming starts, auto-close when streaming ends (once only)
+    useEffect(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+        // Add a small delay before closing to allow user to see the content
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+
+    const handleOpenChange = (newOpen: boolean) => {
+      setIsOpen(newOpen);
+    };
+
+    return (
+      <ReasoningContext.Provider
+        value={{ isStreaming, isOpen, setIsOpen, duration }}
+      >
+        <Collapsible
+          className={cn("not-prose mb-4", className)}
+          onOpenChange={handleOpenChange}
+          open={isOpen}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  },
+);
+
+export type ReasoningTriggerProps = ComponentProps<
+  typeof CollapsibleTrigger
+> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <span>Thought for a few seconds</span>;
+  }
+  return <span>Thought for {duration} seconds</span>;
+};
+
+export const ReasoningTrigger = memo(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }: ReasoningTriggerProps) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
+          className,
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="size-4" />
+            {getThinkingMessage(isStreaming, duration)}
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0",
+              )}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  },
+);
+
+export type ReasoningContentProps = ComponentProps<
+  typeof CollapsibleContent
+> & {
+  children: ReactNode;
+};
+
+export const ReasoningContent = memo(
+  ({ className, children, ...props }: ReasoningContentProps) => (
+    <CollapsibleContent
+      className={cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+        className,
+      )}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Streamdown {...reasoningPlugins}>{children}</Streamdown>
+      ) : (
+        children
+      )}
+    </CollapsibleContent>
+  ),
+);
+
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import {
+  type CSSProperties,
+  type ElementType,
+  type JSX,
+  memo,
+  useMemo,
+} from "react";
+
+export type TextShimmerProps = {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+};
+
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2,
+}: TextShimmerProps) => {
+  const MotionComponent = motion.create(
+    Component as keyof JSX.IntrinsicElements,
+  );
+
+  const dynamicSpread = useMemo(
+    () => (children?.length ?? 0) * spread,
+    [children, spread],
+  );
+
+  return (
+    <MotionComponent
+      animate={{ backgroundPosition: "0% center" }}
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))]",
+        className,
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          backgroundImage:
+            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+        } as CSSProperties
+      }
+      transition={{
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear",
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+};
+
+export const Shimmer = memo(ShimmerComponent);
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type SourcesProps = ComponentProps<"div">;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible
+    className={cn("not-prose text-primary mb-4 text-xs", className)}
+    {...props}
+  />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}: SourcesTriggerProps) => (
+  <CollapsibleTrigger
+    className={cn("flex items-center gap-2", className)}
+    {...props}
+  >
+    {children ?? (
+      <>
+        <p className="font-medium">Used {count} sources</p>
+        <ChevronDownIcon className="h-4 w-4" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({
+  className,
+  ...props
+}: SourcesContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type SourceProps = ComponentProps<"a">;
+
+export const Source = ({ href, title, children, ...props }: SourceProps) => (
+  <a
+    className="flex items-center gap-2"
+    href={href}
+    rel="noopener noreferrer"
+    target="_blank"
+    {...props}
+  >
+    {children ?? (
+      <>
+        <BookIcon className="h-4 w-4" />
+        <span className="block font-medium">{title}</span>
+      </>
+    )}
+  </a>
+);
@@ -0,0 +1,80 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import { Children, type ComponentProps } from "react";
+
+import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+const STAGGER_DELAY_MS = 60;
+const STAGGER_DELAY_MS_OFFSET = 250;
+
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+
+export const Suggestions = ({
+  className,
+  children,
+  ...props
+}: SuggestionsProps) => (
+  <ScrollArea className="overflow-x-auto whitespace-normal" {...props}>
+    <div
+      className={cn("flex w-full flex-wrap items-center gap-2", className)}
+      data-slot="suggestions-list"
+    >
+      {Children.map(children, (child, index) =>
+        child != null ? (
+          <span
+            className="animate-fade-in-up max-w-full opacity-0"
+            style={{
+              animationDelay: `${STAGGER_DELAY_MS_OFFSET + index * STAGGER_DELAY_MS}ms`,
+            }}
+          >
+            {child}
+          </span>
+        ) : (
+          child
+        ),
+      )}
+    </div>
+    <ScrollBar className="hidden" orientation="horizontal" />
+  </ScrollArea>
+);
+
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  suggestion: React.ReactNode;
+  icon?: LucideIcon;
+  onClick?: () => void;
+};
+
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  icon: Icon,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = () => {
+    onClick?.();
+  };
+
+  return (
+    <Button
+      className={cn(
+        "text-muted-foreground dark:bg-background h-auto max-w-full cursor-pointer rounded-full px-4 py-2 text-center text-xs font-normal whitespace-normal",
+        className,
+      )}
+      onClick={handleClick}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {Icon && <Icon className="size-4" />}
+      {children ?? suggestion}
+    </Button>
+  );
+};
@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, SearchIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type TaskItemFileProps = ComponentProps<"div">;
+
+export const TaskItemFile = ({
+  children,
+  className,
+  ...props
+}: TaskItemFileProps) => (
+  <div
+    className={cn(
+      "bg-secondary text-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type TaskItemProps = ComponentProps<"div">;
+
+export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
+  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type TaskProps = ComponentProps<typeof Collapsible>;
+
+export const Task = ({
+  defaultOpen = true,
+  className,
+  ...props
+}: TaskProps) => (
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+);
+
+export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  title: string;
+};
+
+export const TaskTrigger = ({
+  children,
+  className,
+  title,
+  ...props
+}: TaskTriggerProps) => (
+  <CollapsibleTrigger asChild className={cn("group", className)} {...props}>
+    {children ?? (
+      <div className="text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center gap-2 text-sm transition-colors">
+        <SearchIcon className="size-4" />
+        <p className="text-sm">{title}</p>
+        <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
+      </div>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const TaskContent = ({
+  children,
+  className,
+  ...props
+}: TaskContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+      className,
+    )}
+    {...props}
+  >
+    <div className="border-muted mt-4 space-y-2 border-l-2 pl-4">
+      {children}
+    </div>
+  </CollapsibleContent>
+);
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import { NodeToolbar, Position } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+
+export const Toolbar = ({ className, ...props }: ToolbarProps) => (
+  <NodeToolbar
+    className={cn(
+      "bg-background flex items-center gap-1 rounded-sm border p-1.5",
+      className,
+    )}
+    position={Position.Bottom}
+    {...props}
+  />
+);
@@ -0,0 +1,263 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+export type WebPreviewContextValue = {
+  url: string;
+  setUrl: (url: string) => void;
+  consoleOpen: boolean;
+  setConsoleOpen: (open: boolean) => void;
+};
+
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
+
+const useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+
+export type WebPreviewProps = ComponentProps<"div"> & {
+  defaultUrl?: string;
+  onUrlChange?: (url: string) => void;
+};
+
+export const WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}: WebPreviewProps) => {
+  const [url, setUrl] = useState(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState(false);
+
+  const handleUrlChange = (newUrl: string) => {
+    setUrl(newUrl);
+    onUrlChange?.(newUrl);
+  };
+
+  const contextValue: WebPreviewContextValue = {
+    url,
+    setUrl: handleUrlChange,
+    consoleOpen,
+    setConsoleOpen,
+  };
+
+  return (
+    <WebPreviewContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "bg-card flex size-full flex-col rounded-lg border",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </WebPreviewContext.Provider>
+  );
+};
+
+export type WebPreviewNavigationProps = ComponentProps<"div">;
+
+export const WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}: WebPreviewNavigationProps) => (
+  <div
+    className={cn("flex items-center gap-1 border-b p-2", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}: WebPreviewNavigationButtonProps) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          className="hover:text-foreground h-8 w-8 p-0"
+          disabled={disabled}
+          onClick={onClick}
+          size="sm"
+          variant="ghost"
+          {...props}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+
+export const WebPreviewUrl = ({
+  value,
+  onChange,
+  onKeyDown,
+  ...props
+}: WebPreviewUrlProps) => {
+  const { url, setUrl } = useWebPreview();
+  const [inputValue, setInputValue] = useState(url);
+
+  // Sync input value with context URL when it changes externally
+  useEffect(() => {
+    setInputValue(url);
+  }, [url]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      const target = event.target as HTMLInputElement;
+      setUrl(target.value);
+    }
+    onKeyDown?.(event);
+  };
+
+  return (
+    <Input
+      className="h-8 flex-1 text-sm"
+      onChange={onChange ?? handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Enter URL..."
+      value={value ?? inputValue}
+      {...props}
+    />
+  );
+};
+
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+  loading?: ReactNode;
+};
+
+export const WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  ...props
+}: WebPreviewBodyProps) => {
+  const { url } = useWebPreview();
+
+  return (
+    <div className="flex-1">
+      <iframe
+        className={cn("size-full", className)}
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        src={(src ?? url) || undefined}
+        title="Preview"
+        {...props}
+      />
+      {loading}
+    </div>
+  );
+};
+
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+  logs?: Array<{
+    level: "log" | "warn" | "error";
+    message: string;
+    timestamp: Date;
+  }>;
+};
+
+export const WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}: WebPreviewConsoleProps) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+
+  return (
+    <Collapsible
+      className={cn("bg-muted/50 border-t font-mono text-sm", className)}
+      onOpenChange={setConsoleOpen}
+      open={consoleOpen}
+      {...props}
+    >
+      <CollapsibleTrigger asChild>
+        <Button
+          className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium"
+          variant="ghost"
+        >
+          Console
+          <ChevronDownIcon
+            className={cn(
+              "h-4 w-4 transition-transform duration-200",
+              consoleOpen && "rotate-180",
+            )}
+          />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent
+        className={cn(
+          "px-4 pb-4",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+        )}
+      >
+        <div className="max-h-48 space-y-1 overflow-y-auto">
+          {logs.length === 0 ? (
+            <p className="text-muted-foreground">No console output</p>
+          ) : (
+            logs.map((log, index) => (
+              <div
+                className={cn(
+                  "text-xs",
+                  log.level === "error" && "text-destructive",
+                  log.level === "warn" && "text-yellow-600",
+                  log.level === "log" && "text-foreground",
+                )}
+                key={`${log.timestamp.getTime()}-${index}`}
+              >
+                <span className="text-muted-foreground">
+                  {log.timestamp.toLocaleTimeString()}
+                </span>{" "}
+                {log.message}
+              </div>
+            ))
+          )}
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
@@ -0,0 +1,104 @@
+import { FileOutput } from "lucide-react";
+import { toast } from "sonner";
+
+import responsibilityIcon from "@/assets/position-roundtable/责任岗位.svg";
+import resultTimeIcon from "@/assets/position-roundtable/时间.svg";
+import { desensitize } from "@/lib/desensitize";
+import { cn } from "@/lib/utils";
+
+import "./analysis-results.css";
+import type { AnalysisResultCardItem } from "./types";
+
+function formatResultTime(value: string | undefined, fallback: string): string {
+  if (!value) return fallback;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(date);
+}
+
+export function AnalysisResultCardList({
+  items,
+  emptyTitle = "暂无交付产物",
+  emptyDescription = "第二步研讨与第三步总结生成 Markdown 后，产物会显示在这里。",
+  padded = true,
+  onOpen,
+}: {
+  items: AnalysisResultCardItem[];
+  emptyTitle?: string;
+  emptyDescription?: string;
+  padded?: boolean;
+  onOpen: (item: AnalysisResultCardItem) => void;
+}) {
+  if (items.length === 0) {
+    return (
+      <div className="position-roundtable-analysis-results-empty flex h-full min-h-[260px] flex-col items-center justify-center p-6 text-center">
+        <FileOutput className="mb-3 size-8 text-muted-foreground/50" />
+        <p className="text-sm font-semibold">{emptyTitle}</p>
+        <p className="mt-1 max-w-[240px] text-xs leading-5 text-muted-foreground">
+          {emptyDescription}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("analysis-result-card-list", padded && "p-[15px]")}>
+      {items.map((item, index) => {
+        const displayedTime = formatResultTime(
+          item.updatedAt,
+          item.fallbackTime || "刚刚",
+        );
+        const displayedProductName = item.delivered ? item.productName : "未交付";
+        return (
+          <button
+            key={item.id}
+            type="button"
+            className="position-roundtable-analysis-result-card"
+            onClick={() => {
+              if (!item.delivered) {
+                toast.info(
+                  item.unavailableMessage ||
+                    `「${desensitize(item.agentName)}」尚未交付可预览的 Markdown 文件。`,
+                );
+                return;
+              }
+              onOpen(item);
+            }}
+          >
+            <div className="position-roundtable-analysis-result-card-body">
+              <div
+                className={cn(
+                  "position-roundtable-analysis-result-tag",
+                  `position-roundtable-analysis-result-tag--${(index % 6) + 1}`,
+                )}
+                aria-label={desensitize(item.agentName)}
+              >
+                <span>{desensitize(item.agentName)}</span>
+              </div>
+              <p className="position-roundtable-analysis-result-product">
+                {desensitize(displayedProductName)}
+              </p>
+              <footer className="position-roundtable-analysis-result-meta">
+                <span>
+                  <img src={responsibilityIcon} alt="" aria-hidden="true" />
+                  {desensitize(item.positionName)}
+                </span>
+                <i aria-hidden="true" />
+                <span>
+                  <img src={resultTimeIcon} alt="" aria-hidden="true" />
+                  {displayedTime}
+                </span>
+              </footer>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,141 @@
+import { useQuery } from "@tanstack/react-query";
+import { FileOutput, Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { ArtifactFilePreview } from "@/components/workspace/artifacts";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { loadArtifactContent } from "@/core/artifacts/loader";
+import { desensitize } from "@/lib/desensitize";
+import { Button as TButton } from "tdesign-react";
+
+import type { AnalysisResultCardItem } from "./types";
+
+function isArtifactErrorContent(content: string | null | undefined): boolean {
+  const trimmed = content?.trim();
+  if (!trimmed || !trimmed.startsWith("{") || !trimmed.endsWith("}")) {
+    return false;
+  }
+  try {
+    const parsed = JSON.parse(trimmed) as Record<string, unknown>;
+    const detail = parsed.detail ?? parsed.message ?? parsed.error;
+    return typeof detail === "string" && detail.trim().length > 0;
+  } catch {
+    return false;
+  }
+}
+
+function fallbackContent(item: AnalysisResultCardItem | null): string {
+  return (
+    item?.artifactContent?.trim() ||
+    item?.summary?.trim() ||
+    "暂无产物正文"
+  );
+}
+
+export function AnalysisResultDetailDialog({
+  item,
+  onOpenChange,
+  extraBody,
+  footerStart,
+}: {
+  item: AnalysisResultCardItem | null;
+  onOpenChange: (open: boolean) => void;
+  extraBody?: ReactNode;
+  footerStart?: ReactNode;
+}) {
+  const artifactThreadId = item?.artifactThreadId || null;
+  const artifactPathValue = item?.artifactPath || "";
+  const artifactContentQuery = useQuery({
+    queryKey: [
+      "analysis-results",
+      "deliverable-artifact-content",
+      artifactThreadId,
+      artifactPathValue,
+    ],
+    queryFn: async () => {
+      if (!artifactThreadId || !artifactPathValue) return "";
+      const result = await loadArtifactContent({
+        filepath: artifactPathValue,
+        threadId: artifactThreadId,
+        isMock: false,
+      });
+      return result.content;
+    },
+    enabled: Boolean(item && artifactThreadId && artifactPathValue),
+    staleTime: 30_000,
+  });
+  const loadedArtifactContent =
+    typeof artifactContentQuery.data === "string" ? artifactContentQuery.data : "";
+  const loadedArtifactIsError = isArtifactErrorContent(loadedArtifactContent);
+  const artifactContent =
+    loadedArtifactContent.trim() && !loadedArtifactIsError ? loadedArtifactContent : null;
+  const displayedContent = artifactContent || fallbackContent(item);
+  const artifactLoadFailed =
+    (artifactContentQuery.isError || loadedArtifactIsError) &&
+    !item?.artifactContent?.trim();
+
+  return (
+    <Dialog open={Boolean(item)} onOpenChange={onOpenChange}>
+      <DialogContent
+        overlayClassName="!z-[6000]"
+        className="!z-[6001] flex max-h-[86vh] w-[900px] !max-w-[calc(100vw-2rem)] flex-col gap-0 overflow-hidden p-0"
+      >
+        <DialogHeader className="shrink-0 border-b px-5 py-4 dark:border-[#2b8ffe]/25">
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <FileOutput className="size-4 text-primary" />
+            交付产物详情
+          </DialogTitle>
+        </DialogHeader>
+        {!item ? null : (
+          <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto px-5 py-4">
+            <div className="min-w-0">
+              <p className="text-sm font-extrabold text-slate-900 dark:text-[#e8edf5]">
+                {desensitize(item.productName)}
+              </p>
+              <p className="mt-1 truncate text-xs text-muted-foreground">
+                {desensitize(item.agentName)} · {desensitize(item.positionName)}
+              </p>
+            </div>
+            {extraBody}
+            <div className="mt-4 rounded-xl border border-slate-200 bg-white p-3 dark:border-[#2b8ffe]/30 dark:bg-[#042b59]/65">
+              <div className="mb-2 flex items-center justify-between gap-2">
+                <p className="text-xs font-bold text-slate-700 dark:text-[#e8edf5]">产物内容</p>
+              </div>
+              <div className="h-[52vh] min-h-[320px] overflow-hidden rounded-lg border border-slate-100 bg-slate-50/60 dark:border-[#2b8ffe]/20 dark:bg-[#021d3d]/70">
+                {artifactContentQuery.isLoading ? (
+                  <div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground dark:text-[#8aa0c4]">
+                    <Loader2 className="size-4 animate-spin" />
+                    正在加载 Markdown 文件内容…
+                  </div>
+                ) : (
+                  <ArtifactFilePreview
+                    content={displayedContent}
+                    language="markdown"
+                    threadId={artifactThreadId ?? ""}
+                  />
+                )}
+              </div>
+              {artifactLoadFailed && (
+                <p className="mt-2 text-[11px] text-amber-600 dark:text-amber-300">
+                  Markdown 文件内容加载失败，当前展示的是已保存正文。
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+        <DialogFooter className="shrink-0 border-t px-5 py-3 dark:border-[#2b8ffe]/25">
+          {footerStart}
+          <TButton variant="outline" onClick={() => onOpenChange(false)}>
+            关闭
+          </TButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,130 @@
+.analysis-result-card-list {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.position-roundtable-analysis-result-card {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 102px;
+  box-sizing: border-box;
+  padding: 40px 12px 12px;
+  border: 1px solid rgba(85, 166, 254, 0.1);
+  border-radius: 4px;
+  background: rgba(0, 98, 217, 0.1);
+  color: #ffffff;
+  text-align: left;
+  cursor: pointer;
+  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.position-roundtable-analysis-result-card:hover,
+.position-roundtable-analysis-result-card:focus-visible {
+  border-color: #0062d9;
+  background: rgba(0, 98, 217, 0.3);
+  box-shadow: 0 4px 14px rgba(0, 44, 110, 0.18);
+  outline: none;
+}
+
+.position-roundtable-analysis-result-card-body {
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.position-roundtable-analysis-result-tag {
+  position: absolute;
+  top: -40px;
+  left: -12px;
+  display: inline-flex;
+  width: fit-content;
+  max-width: calc(100% + 12px);
+  height: 26px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 22px 0 12px;
+  overflow: hidden;
+  border-radius: 4px 0 0 0;
+  background: rgba(212, 120, 0, 0.5);
+  color: #ffffff;
+  font-family: "Noto Sans S Chinese", "Noto Sans SC", sans-serif;
+  font-size: 16px;
+  line-height: normal;
+  white-space: nowrap;
+  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
+}
+
+.position-roundtable-analysis-result-tag--1 { background: rgba(212, 120, 0, 0.5); }
+.position-roundtable-analysis-result-tag--2 { background: rgba(207, 19, 34, 0.5); }
+.position-roundtable-analysis-result-tag--3 { background: rgba(29, 171, 123, 0.5); }
+.position-roundtable-analysis-result-tag--4 { background: rgba(132, 85, 230, 0.5); }
+.position-roundtable-analysis-result-tag--5 { background: rgba(201, 181, 0, 0.5); }
+.position-roundtable-analysis-result-tag--6 { background: rgba(69, 195, 243, 0.5); }
+
+.position-roundtable-analysis-result-tag span {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+}
+
+.position-roundtable-analysis-result-product {
+  margin: 0;
+  overflow: hidden;
+  color: #ffffff;
+  font-family: "Noto Sans S Chinese", "Noto Sans SC", sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.position-roundtable-analysis-result-meta {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+  margin-top: 6px;
+  color: #80b7ff;
+  font-family: "Noto Sans S Chinese", "Noto Sans SC", sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+}
+
+.position-roundtable-analysis-result-meta span {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.position-roundtable-analysis-result-meta img {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+.position-roundtable-analysis-result-meta i {
+  width: 1px;
+  height: 14px;
+  flex: 0 0 auto;
+  background: rgba(128, 183, 255, 0.45);
+}
+
+.position-roundtable-analysis-results-empty {
+  color: #80b7ff;
+}
@@ -0,0 +1,3 @@
+export { AnalysisResultCardList } from "./AnalysisResultCardList";
+export { AnalysisResultDetailDialog } from "./AnalysisResultDetailDialog";
+export type { AnalysisResultCardItem } from "./types";
@@ -0,0 +1,17 @@
+export interface AnalysisResultCardItem {
+  id: string;
+  agentName: string;
+  productName: string;
+  positionName: string;
+  updatedAt?: string;
+  /** Shown when `updatedAt` is missing. */
+  fallbackTime?: string;
+  /** Clickable preview is available. */
+  delivered: boolean;
+  artifactPath?: string;
+  artifactMimeType?: string | null;
+  artifactThreadId?: string | null;
+  artifactContent?: string | null;
+  summary?: string;
+  unavailableMessage?: string;
+}
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Empty = ({
+  description = '暂无数据',
+  size = 'default'
+}: {
+  description?: string;
+  size?: 'default' | 'small';
+}) => {
+  return (
+    <div className={`empty-container ${size === 'small' ? 'empty-small' : ''}`}>
+      <div className="empty-image">
+        <img src="/icon/empty-list.png" alt="暂无数据" />
+      </div>
+      {description && <p className="empty-description">{description}</p>}
+    </div>
+  );
+};
+
+export default Empty;
@@ -0,0 +1,627 @@
+"use client";
+
+import {
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2, Plus, Search, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { getStoredAuth } from "@/core/auth";
+import { authenticatedFetch } from "@/components/assistant-ui/document-upload-popup";
+import { readRuntimeEnv } from "@/env";
+
+
+interface NetworkActorProps {
+  inputValue: string;
+  searchSpaceId: string;
+  onSuccess?: () => void;
+}
+
+interface platformItem {
+  title: string;
+  icon: string;
+  checked: boolean;
+}
+
+interface languageItem {
+  title: string;
+  checked: boolean;
+}
+
+interface PoliticsDirItem {
+  地区: string;
+  语言: string;
+  年龄段: string;
+  性别: string;
+  教育程度: string;
+  关注话题: { 话题: string; 倾向: string; 佐证: string; 风格: string }[];
+  类型: string;
+  对HZZLC: string;
+  对MZZLC: string;
+  对TZZLC: string[];
+  账号描述: string;
+  发文频率: string;
+  活跃时间: string;
+}
+
+interface 用户画像 {
+  地区: string;
+  教育程度: string;
+  关注话题: { 倾向: string; 话题: string; 佐证: string; 风格: string }[];
+  语言: string;
+  年龄段: string;
+  账号描述: string;
+  对TZZLC: string[];
+  对HZZLC: string;
+  对MZZLC: string[];
+  性别: string;
+  类型: string;
+  发文频率: string;
+  活跃时间: string;
+}
+
+interface hx_info {
+  语言: string;
+  用户画像: 用户画像;
+}
+
+interface UserDataItem {
+  comment_count: number;
+  country: string | null;
+  agent_task_id: string | null;
+  education: string | null;
+  groupId: string | null;
+  forward_count: number;
+  political_stand: string;
+  language: string;
+  type: string;
+  concern: string | null;
+  profile_image: string | null;
+  concern_topic: string | null;
+  screen_name: string;
+  school: string | null;
+  is_alive: number;
+  createdTime: string;
+  data_provider: string | null;
+  id: string;
+  text: string | null;
+  group: string | null;
+  read_count: number;
+  group_name: string;
+  area: string | null;
+  image: string | null;
+  updatedTime: string;
+  like_count: number;
+  m_politics_dir: string;
+  camp: string | null;
+  tags: string[];
+  army: string | null;
+  is_sync_a: number;
+  tweets_count: number;
+  groupName: string | null;
+  history_key: string;
+  user_id: string;
+  real_id: string | null;
+  h_politics_dir: string | null;
+  domain: string | null;
+  name: string | null;
+  position: string | null;
+  job: string | null;
+  age_round: string | null;
+  birthday: string | null;
+  is_virtual: number;
+  isMedia: number;
+  hx_info: hx_info;
+  gender: string | null;
+  agentInfo: PoliticsDirItem;
+  profile_url: string | null;
+  tagId: string[];
+  user_name: string;
+  a_update_time: string | null;
+  values: string | null;
+  follows_count: number;
+  title: string | null;
+  is_protected: number;
+  platform: string;
+  importType: string;
+  update_time: string;
+  key: string;
+  introduction: string | null;
+  brief: string | null;
+  creator: string;
+  history_title: string;
+  tweets_ratio: string | null;
+  is_verified: number;
+  t_politics_dir: string[];
+  eventMap: string | null;
+  fans_count: number;
+  a_create_time: string | null;
+  hobbies: string[];
+  location: string | null;
+  average_count: number;
+  ratio: string | null;
+  classification?: string | null;
+  groupDiscussTags?: string[];
+  checked?: boolean;
+  content?: string;
+  url?: string;
+}
+
+export function NetworkActor({ inputValue, searchSpaceId, onSuccess }: NetworkActorProps) {
+  const [platforms, setPlatforms] = useState<platformItem[]>([
+    { title: 'X', icon: 'x.png', checked: false },
+    { title: 'Facebook', icon: 'facebook.png', checked: false },
+    { title: 'Reddit', icon: 'reddit.png', checked: false },
+    { title: 'PTT', icon: 'ptt.png', checked: false },
+    { title: 'YouTube', icon: 'youtube.png', checked: false },
+    { title: 'Dcard', icon: 'dcard.png', checked: false },
+    { title: 'Mobile01', icon: 'mobile01.png', checked: false },
+    { title: 'Threads', icon: 'threads.png', checked: false },
+    { title: 'Instagram', icon: 'ins.png', checked: false },
+  ]);
+  const platformList = useRef<string[]>([]);
+  const [languages, setLanguages] = useState<languageItem[]>([
+    { title: '繁体中文', checked: false },
+    { title: '简体中文', checked: false },
+    { title: '英文', checked: false },
+    { title: '日文', checked: false },
+    { title: '其他', checked: false },
+  ]);
+  const languageList = useRef<string[]>([]);
+  const [allPlatforms, setAllPlatforms] = useState<boolean>(true);
+  const [allLanguage, setAllLanguage] = useState<boolean>(true);
+  const [sortType, setSortType] = useState<string>('fans_count');
+  const sortTypeValue = useRef('fans_count');
+  const [fansSort, setFansSort] = useState<string>('desc');
+  const sortValue = useRef('desc');
+  const [relevanceSort, setRelevanceSort] = useState<string>('desc');
+  const [userList, setUserList] = useState<UserDataItem[]>([]);
+  const [searchText, setSearchText] = useState<string>(inputValue);
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [searchType, setSearchType] = useState<string>('network');
+  const searchValue = useRef<string>('network');
+  const [selNetCount, setSelNetCount] = useState<number>(0);
+  const [actorCount, setActorCount] = useState<number>(0);
+  const [directionType, setDirectionType] = useState<string>('TW');
+  const directionValue = useRef<string>('TW');
+  const consumerUrl = readRuntimeEnv("VITE_AIPI_CONSUMER_URL") || 'https://ch1.b.uat.4.cn/consumer';
+  const backendUrl = typeof window !== 'undefined'
+    ? (readRuntimeEnv("VITE_BACKEND_BASE_URL") || 'http://localhost:8001')
+    : 'http://localhost:8001';
+  const [selectedSearchSources, setSelectedSearchSources] = useState<UserDataItem[]>([]);
+  const [isImporting, setIsImporting] = useState(false);
+
+  const searchChange = async () => {
+    setIsSearching(true);
+    if (searchValue.current === 'network') {
+      await agentUserSearch();
+    } else {
+      await agentGroupSearch();
+    }
+  };
+
+  const setDirectionChange = async (type: string) => {
+    setDirectionType(type);
+    directionValue.current = type;
+    await searchChange();
+  };
+
+  const searchTypeChange = async (value: string) => {
+    setSearchType(value);
+    searchValue.current = value;
+    await searchChange();
+  };
+
+  const allPlatformChange = async () => {
+    setAllPlatforms(true);
+    setPlatforms((prev) => prev.map((item) => ({ ...item, checked: false })));
+    platformList.current = [];
+    await searchChange();
+  };
+
+  const handleTogglePlatform = async (index: number) => {
+    setPlatforms((prev) => {
+      const newPlatforms = prev.map((item, i) =>
+        i === index ? { ...item, checked: !item.checked } : item
+      );
+      const checkedTitles = newPlatforms.filter((item) => item.checked).map((item) => item.title);
+      platformList.current = checkedTitles;
+      setAllPlatforms(newPlatforms.every((item) => !item.checked));
+      return newPlatforms;
+    });
+    await searchChange();
+  };
+
+  const allLanguageChange = async () => {
+    setAllLanguage(true);
+    setLanguages((prev) => prev.map((item) => ({ ...item, checked: false })));
+    languageList.current = [];
+    await searchChange();
+  };
+
+  const handleToggleLanguage = async (index: number) => {
+    setLanguages((prev) => {
+      const newItems = prev.map((item, i) =>
+        i === index ? { ...item, checked: !item.checked } : item
+      );
+      const checkedTitles = newItems.filter((item) => item.checked).map((item) => item.title);
+      languageList.current = checkedTitles;
+      setAllLanguage(newItems.every((item) => !item.checked));
+      return newItems;
+    });
+    await searchChange();
+  };
+
+  const sortTypeChange = async (type: string) => {
+    setSortType(type);
+    sortTypeValue.current = type;
+    sortValue.current = sortValue.current === 'desc' ? 'asc' : 'desc';
+    if (type === 'fans_count') setFansSort(sortValue.current);
+    else if (type === '_score') setRelevanceSort(sortValue.current);
+    await searchChange();
+  };
+
+  const agentUserSearch = async () => {
+    try {
+      const response = await authenticatedFetch(`${consumerUrl}/portrait/agentUser`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer admin' },
+        body: JSON.stringify({
+          historyKey: [],
+          historyTitle: '',
+          keyword: searchText,
+          language: languageList.current,
+          page: 1,
+          limit: 12,
+          platform: platformList.current,
+          politicalStand: directionValue.current,
+          sort: sortTypeValue.current,
+          asc: sortValue.current,
+          typeKeyword: 9,
+        }),
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setIsSearching(false);
+        const result: UserDataItem[] = data.data.list;
+        result.forEach((item) => {
+          item.profile_image = item.profile_image
+            ? `http://minio-proxy.b.sit.4.cn/facebook-proxy?url=${item.profile_image}&is_avatar=true`
+            : 'http://ty.b.uat.4.cn/manage/img/default.png';
+          item.classification = `${item.political_stand}-${item.history_key}-${item.history_title}`;
+          item.title = item.user_name || item.screen_name || item.user_id;
+          item.content = item.agentInfo['账号描述'];
+          item.url = `http://ty.b.uat.4.cn/fromB/toDetail?user_id=${item.user_id}&platform=${item.platform}`;
+        });
+        setUserList(result);
+        setSelNetCount(data.data.total);
+        setActorCount(data.data.zs_total);
+      }
+    } catch (error) {
+      console.error('Search error:', error);
+    }
+  };
+
+  const agentGroupSearch = async () => {
+    try {
+      const response = await authenticatedFetch(`${consumerUrl}/portrait/agentGroup`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer admin' },
+        body: JSON.stringify({
+          historyKey: [],
+          historyTitle: '',
+          keyword: searchText,
+          language: languageList.current,
+          page: 1,
+          limit: 12,
+          platform: platformList.current,
+          politicalStand: directionValue.current,
+          sort: sortTypeValue.current,
+          asc: sortValue.current,
+          typeKeyword: 9,
+        }),
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setIsSearching(false);
+        const result: UserDataItem[] = data.data.data;
+        result.forEach((item) => {
+          item.hobbies = item.groupDiscussTags || [];
+          item.profile_image = item.profile_image
+            ? `http://minio-proxy.b.sit.4.cn/facebook-proxy?url=${item.profile_image}&is_avatar=true`
+            : 'http://ty.b.uat.4.cn/manage/img/default.png';
+          item.classification = `${item.political_stand}`;
+          item.title = item.group_name || item.groupName;
+          if (item.hx_info?.['用户画像']) {
+            item.content = item.hx_info['用户画像']['账号描述'];
+          }
+          item.url = '';
+        });
+        setUserList(result);
+        setActorCount(data.data.total);
+      }
+    } catch (error) {
+      console.error('Search error:', error);
+    }
+  };
+
+  const listDataCheckedChange = (index: number, checked: boolean) => {
+    setUserList((prevSources) => {
+      const newSources = prevSources.map((item, aIndex) =>
+        aIndex === index ? { ...item, checked } : item
+      );
+      setSelectedSearchSources(newSources.filter((item) => item.checked));
+      return newSources;
+    });
+  };
+
+  const linkToB2 = (data: UserDataItem) => {
+    const url = `http://ty.b.uat.4.cn/fromB/toDetail?user_id=${data.user_id}&platform=${data.platform}`;
+    window.open(url, '_blank');
+  };
+
+  const handleBatchDelete = () => {
+    setUserList((prev) => prev.map((item) => ({ ...item, checked: false })));
+    setSelectedSearchSources([]);
+  };
+
+  const handleImport = async () => {
+    if (selectedSearchSources.length === 0) {
+      toast.warning('没有可导入的来源');
+      return;
+    }
+    setIsImporting(true);
+    const dataList = selectedSearchSources.map((item) => ({
+      title: item.title,
+      content: item.content,
+      url: item.url,
+    }));
+    try {
+      const response = await authenticatedFetch(`${backendUrl}/api/v1/source/import`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          search_space_id: Number(searchSpaceId),
+          source_list: dataList,
+        }),
+      }, true);
+      if (response.ok) {
+        const data = await response.json();
+        toast.success(`成功导入 ${data.imported_count || dataList.length} 个来源`);
+        setSearchText('');
+        setUserList([]);
+        handleBatchDelete();
+        onSuccess?.();
+      } else {
+        const errorData = await response.json();
+        toast.error(errorData.detail || '导入失败，请重试');
+      }
+    } catch {
+      toast.error('导入失败，请重试');
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  useEffect(() => {
+    void searchChange();
+  }, []);
+
+  return (
+    <div>
+      <div className="bg-white rounded-[5px] p-[10px]">
+        <div className="border border-[#e8e8e8] rounded-[5px] p-[10px]">
+          <div className="mb-[10px] flex">
+            <span className="text-[#3D3D3D]">所属平台：</span>
+            <span className="flex-1 min-w-0">
+              <span className="flex items-center gap-[10px] flex-wrap">
+                <span
+                  className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${allPlatforms ? 'platform-active' : ''}`}
+                  onClick={() => void allPlatformChange()}
+                >全部</span>
+                {platforms.map((item, index) => (
+                  <span
+                    key={index}
+                    className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${item.checked ? 'platform-active' : ''}`}
+                    onClick={() => void handleTogglePlatform(index)}
+                  >
+                    <img src={`/platform/${item.icon}`} className="w-[24px]" alt="" />
+                    <span className="w-[2px] h-[12px] ml-[5px] mr-[5px] bg-[#dbdbdb]"></span>
+                    <span className="ml-[5px]">{item.title}</span>
+                  </span>
+                ))}
+              </span>
+            </span>
+          </div>
+          <div className="mb-[10px] flex">
+            <span className="text-[#3D3D3D]">常用语言：</span>
+            <span className="flex-1 min-w-0">
+              <span className="flex items-center gap-[10px] flex-wrap">
+                <span
+                  className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${allLanguage ? 'platform-active' : ''}`}
+                  onClick={() => void allLanguageChange()}
+                >全部</span>
+                {languages.map((item, index) => (
+                  <span
+                    key={index}
+                    className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${item.checked ? 'platform-active' : ''}`}
+                    onClick={() => void handleToggleLanguage(index)}
+                  >
+                    <span>{item.title}</span>
+                  </span>
+                ))}
+              </span>
+            </span>
+          </div>
+          <div className="mb-[10px] flex">
+            <span className="text-[#3D3D3D]">方向：</span>
+            <span className="flex-1 min-w-0">
+              <span className="flex items-center gap-[10px] flex-wrap">
+                <span className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${directionType === 'TW' ? 'platform-active' : ''}`} onClick={() => void setDirectionChange('TW')}>W方向</span>
+                <span className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${directionType === 'US' ? 'platform-active' : ''}`} onClick={() => void setDirectionChange('US')}>U方向</span>
+                <span className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${directionType === '其他' ? 'platform-active' : ''}`} onClick={() => void setDirectionChange('其他')}>其他</span>
+              </span>
+            </span>
+          </div>
+          <div className="mb-[10px] flex">
+            <span className="text-[#3D3D3D]">类型：</span>
+            <span className="flex-1 min-w-0">
+              <span className="flex items-center gap-[10px] flex-wrap">
+                <span className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${searchType === 'network' ? 'platform-active' : ''}`} onClick={() => void searchTypeChange('network')}>网络XWT</span>
+                <span className={`flex items-center cursor-pointer border border-[transparent] pl-[10px] pr-[10px] ${searchType === 'group' ? 'platform-active' : ''}`} onClick={() => void searchTypeChange('group')}>群组XWT</span>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="bg-white rounded-[5px] pt-[15px] mt-[10px]">
+        <div className="flex items-center justify-between pb-[10px] mb-[10px] border-b border-b-[#f1f3f5]">
+          <div className="flex items-center ml-[10px]">
+            <div className="title-bar mr-[8px]"></div>
+            <div className="text-[#454859]">用户表格管理</div>
+          </div>
+          <div className="flex items-center">
+            <div
+              className={`relative flex items-center cursor-pointer border ${sortType === 'fans_count' ? 'border-[#cf1322]' : ''} p-[7px] pl-[10px] pr-[20px] rounded-[5px]`}
+              onClick={() => void sortTypeChange('fans_count')}
+            >
+              <span className="leading-[16px]">粉丝数排序</span>
+              <div className="ml-[10px]">
+                <div className={`sort-up ${fansSort === 'asc' ? 'sort-up-active' : ''}`}></div>
+                <div className={`mt-[4px] sort-down ${fansSort === 'desc' ? 'sort-down-active' : ''}`}></div>
+              </div>
+            </div>
+            <div
+              className={`relative flex items-center ml-[10px] cursor-pointer border ${sortType === '_score' ? 'border-[#cf1322]' : ''} p-[7px] pl-[10px] pr-[20px] rounded-[5px]`}
+              onClick={() => void sortTypeChange('_score')}
+            >
+              <span className="leading-[16px]">相关度排序</span>
+              <div className="ml-[10px]">
+                <div className={`sort-up ${relevanceSort === 'asc' ? 'sort-up-active' : ''}`}></div>
+                <div className={`mt-[4px] sort-down ${relevanceSort === 'desc' ? 'sort-down-active' : ''}`}></div>
+              </div>
+            </div>
+            {searchType === 'network' && (
+              <>
+                <div className="flex items-center ml-[35px]">
+                  <img className="w-[24px] h-[24px]" src="/icon/group-yellow-logo.svg" alt="" />
+                  <div className="ml-[5px]">
+                    <div className="text-[#454859] leading-[16px]">当前选中网络XWT数</div>
+                    <div className="text-[#d97b00] leading-[16px] mt-[5px]">{selNetCount}</div>
+                  </div>
+                </div>
+                <div className="ml-[5px] mr-[5px] h-[30px] w-[2px] -skew-x-[30deg] bg-[#dbdbdb]"></div>
+              </>
+            )}
+            <div className={`flex items-center ${searchType === 'network' ? 'ml-[5px]' : 'ml-[20px]'} mr-[25px]`}>
+              <img className="w-[24px] h-[24px]" src="/icon/group-red-logo.svg" alt="" />
+              <div className="ml-[5px]">
+                <div className="text-[#454859] leading-[16px]">网络XWT总数</div>
+                <div className="text-[#cf1322] leading-[16px] mt-[5px]">{actorCount}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {selectedSearchSources.length > 0 && (
+          <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-100">
+            <span className="text-sm text-gray-600">已选中 {selectedSearchSources.length} 项</span>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" onClick={handleBatchDelete} className="h-8 px-3 text-sm">
+                <Trash2 className="h-3.5 w-3.5 mr-1" />
+                删除选中
+              </Button>
+              <Button
+                size="sm"
+                onClick={() => void handleImport()}
+                disabled={isImporting}
+                className="h-8 px-3 text-sm bg-blue-50 hover:bg-blue-100 text-blue-600 border border-blue-200"
+              >
+                {isImporting ? <Loader2 className="h-3.5 w-3.5 mr-1 animate-spin" /> : <Plus className="h-3.5 w-3.5 mr-1" />}
+                导入选中
+              </Button>
+            </div>
+          </div>
+        )}
+        <div className="p-[10px]">
+          {isSearching ? (
+            <div className="flex items-center justify-center py-16">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          ) : null}
+          <div className={`grid grid-cols-4 gap-[10px] user-list${isSearching ? ' hidden' : ''}`}>
+            {userList.map((item, index) => (
+              <div key={index} className="user-item p-[10px] relative">
+                <div className="absolute top-[5px] right-[10px]">
+                  <input
+                    type="checkbox"
+                    checked={item.checked ?? false}
+                    onChange={() => listDataCheckedChange(index, !item.checked)}
+                    className="w-4 h-4 cursor-pointer accent-primary"
+                  />
+                </div>
+                <div className="flex items-center mb-[10px] cursor-pointer" onClick={() => linkToB2(item)}>
+                  <img src={item.profile_image ?? ''} className="w-[97px] h-[97px] rounded-[5px]" alt="" />
+                  <div className="flex-1 min-w-0 pl-[10px]">
+                    <div className="truncate mb-[10px] text-[18px]">{item.user_name || item.screen_name || item.user_id || item.group_name || item.groupName}</div>
+                    <div className="flex justify-between mb-[10px]">
+                      <div className="flex items-center">
+                        <img src="/icon/group-yellow-logo.svg" className="w-[16px] h-[16px] mr-[5px]" alt="" />
+                        <span>粉丝数：{item.fans_count || '-'}</span>
+                      </div>
+                      <div className="flex items-center">
+                        <img src={`/platform/${item.platform}.png`} className="w-[25px] mr-[5px]" alt="" />
+                        <span>{item.platform}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center">
+                      <img src="/icon/person-red-logo.svg" className="w-[16px] mr-[5px]" alt="" />
+                      <span>实体人:{item.name}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="cursor-pointer" onClick={() => linkToB2(item)}>
+                  <div className="flex items-center mb-[10px]">
+                    <div className="w-[70px] flex items-center">
+                      <img src="/icon/classification-logo.png" className="w-[16px] mr-[5px]" alt="" />
+                      <span>分类：</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="inline-block h-[28px] pl-[8px] pr-[8px] bg-[#fef6f6] text-[#cf1322]">{item.classification}</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center mb-[10px]">
+                    <div className="w-[70px] flex items-center">
+                      <img src="/icon/user-green-logo.png" className="w-[16px] mr-[5px]" alt="" />
+                      <span>标签：</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex flex-wrap items-center gap-[5px]">
+                        {(item.hobbies ?? []).map((hobbie) => (
+                          <div key={hobbie} className="h-[28px] pl-[8px] pr-[8px] bg-[#f6fdfb] text-[#1eb07f]">{hobbie}</div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-baseline mb-[10px]">
+                    <div className="w-[70px] flex items-center">
+                      <img src="/icon/user-green-logo.png" className="w-[16px] mr-[5px]" alt="" />
+                      <span>简介：</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="line-clamp-3 text-ellipsis overflow-hidden">
+                        {(item.agentInfo && item.agentInfo['账号描述']) || (item.hx_info?.['用户画像']?.['账号描述']) || ''}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+
+import { replaceDesensitizeMap } from "@/lib/desensitize";
+import { useSensitiveWords, wordsToMap } from "@/strategy-components/api/sensitive-words";
+
+/**
+ * 启动时把后台「敏感词管理」配置加载进运行时脱敏映射表。
+ *
+ * - 后台返回**非空**时：用其中「启用」的词条整体替换运行时映射
+ *   （{@link replaceDesensitizeMap}），后台即唯一真源，被删除的词不再生效。
+ * - 后台为空（全新部署还没配置）或拉取失败：什么都不做，保持使用
+ *   `src/lib/desensitize.ts` 内置的种子映射。
+ *
+ * 渲染 `null`；挂在 `AppProviders` 里（QueryClientProvider 之内）。与「敏感词管理」
+ * 页共享同一份 React Query 缓存，保存后会自动刷新并回灌运行时映射。
+ */
+export function DesensitizeWordsLoader() {
+  const { data } = useSensitiveWords();
+
+  useEffect(() => {
+    if (data && data.length > 0) {
+      replaceDesensitizeMap(wordsToMap(data));
+    }
+  }, [data]);
+
+  return null;
+}
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { useLocalSettings } from "@/core/settings";
+
+/**
+ * 基准字号 = 16px，对应《深蓝色 UI 规范》§2.1.2 后台系统正文字号（16px Regular）。
+ * 用户在「外观 → 字号」里选择的倍数通过 CSS 变量 `--ui-font-scale` 生效：globals.css
+ * 只把 Tailwind 的 `--text-*` 字号 token 乘以该倍数，**不动间距 token**，所以放大 / 缩小
+ * 的只有文字本身，padding / margin / 宽高等布局尺寸保持不变，不会把页面挤错位。
+ * `fontScale === 1` 即默认 16px。
+ */
+export const BASE_FONT_PX = 16;
+
+export const FONT_SCALE_OPTIONS: { value: number; label: string; px: number }[] =
+  [
+    { value: 0.875, label: "小", px: 14 },
+    { value: 1, label: "标准", px: 16 },
+    { value: 1.125, label: "大", px: 18 },
+    { value: 1.25, label: "特大", px: 20 },
+  ];
+
+/**
+ * 把用户选择的字号倍数写到 <html> 的 `--ui-font-scale` CSS 变量。挂在应用根部，
+ * 保证刷新后即时生效、全局统一。只设变量、不直接改 font-size，因此布局不受影响。
+ * 不渲染任何 DOM。
+ */
+export function FontScaleApplier() {
+  const [settings] = useLocalSettings();
+  const { fontScale } = settings.display;
+
+  useEffect(() => {
+    const scale =
+      typeof fontScale === "number" && Number.isFinite(fontScale) && fontScale > 0
+        ? fontScale
+        : 1;
+    const root = document.documentElement;
+    root.style.setProperty("--ui-font-scale", String(scale));
+    // 清掉旧实现可能残留的根级 font-size 内联样式（旧版用它做整页缩放）。
+    root.style.removeProperty("font-size");
+  }, [fontScale]);
+
+  return null;
+}
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+import { prepareGeneratedHtml } from "@/core/utils/legacy-html-preview";
+
+/**
+ * Sandboxed preview of a generated HTML document.
+ *
+ * Renders via a `blob:` URL rather than `srcDoc`. A srcDoc document's base URL
+ * is `about:srcdoc`, so clicking an in-page anchor (`<a href="#section">`)
+ * navigates the frame to `about:blank#section` and BLANKS it. A `blob:` URL is
+ * a real document URL, so fragment links scroll within the frame as expected —
+ * all without enabling scripts (the sandbox stays script-free for security; the
+ * server already sanitizes script vectors and this is defense-in-depth).
+ *
+ * The `charset=utf-8` on the blob type is required: a blob: URL whose
+ * Content-Type omits the charset is decoded with the OS default (GBK/Latin-1 on
+ * Chinese Windows), garbling CJK text when the HTML lacks a `<meta charset>`.
+ */
+export function HtmlPreviewFrame({
+  html,
+  className = "h-[70vh] w-full rounded-md border bg-white",
+}: {
+  html: string;
+  className?: string;
+}) {
+  const [url, setUrl] = useState<string>();
+
+  useEffect(() => {
+    const blob = new Blob([prepareGeneratedHtml(html ?? "")], {
+      type: "text/html;charset=utf-8",
+    });
+    const objectUrl = URL.createObjectURL(blob);
+    setUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [html]);
+
+  return (
+    <iframe
+      title="HTML 预览"
+      sandbox="allow-scripts allow-forms"
+      src={url}
+      className={className}
+    />
+  );
+}
@@ -0,0 +1,956 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react";
+
+import type {
+  GraphEdge,
+  GraphNode,
+  LayoutType,
+  SimEdge,
+  SimNode,
+  TooltipState,
+  Transform,
+} from "./graphTypes";
+import {
+  applyCircularLayout,
+  ForceSimulation,
+  getEdgeId,
+  getEdgeInfo,
+  getEdgeLabel,
+  getLinkDistance,
+  getNodeKind,
+  getNodeRadius,
+  getNodeTitle,
+  NODE_KIND_META,
+  seedPositions,
+  truncateLabel,
+} from "./graphUtils";
+
+const MIN_ZOOM = 0.15;
+const MAX_ZOOM = 4;
+
+/** Canvas-drawn colors per app theme (CSS variables don't reach the 2D context). */
+const CANVAS_PALETTE = {
+  dark: {
+    exportBg: "#0b1020",
+    labelHalo: "rgba(2, 6, 23, 0.9)",
+    nodeRim: "rgba(2, 6, 23, 0.55)",
+    rootRim: "#e0f2fe",
+    expandedRim: "#7dd3fc",
+    rootRing: "rgba(125, 211, 252, 0.9)",
+    expandedDot: "#7dd3fc",
+    expandedDotRim: "rgba(2, 6, 23, 0.8)",
+    selectionRing: "#ffffff",
+    hoverRing: "rgba(255, 255, 255, 0.85)",
+    pin: "rgba(255, 255, 255, 0.8)",
+    labelActive: "#ffffff",
+    label: "#e2e8f0",
+    minimapViewport: "rgba(56, 189, 248, 0.8)",
+  },
+  light: {
+    exportBg: "#f8fafc",
+    labelHalo: "rgba(255, 255, 255, 0.92)",
+    nodeRim: "rgba(255, 255, 255, 0.9)",
+    rootRim: "#075985",
+    expandedRim: "#0284c7",
+    rootRing: "rgba(2, 132, 199, 0.85)",
+    expandedDot: "#0284c7",
+    expandedDotRim: "rgba(255, 255, 255, 0.9)",
+    selectionRing: "#0f172a",
+    hoverRing: "rgba(15, 23, 42, 0.7)",
+    pin: "rgba(15, 23, 42, 0.6)",
+    labelActive: "#0f172a",
+    label: "#334155",
+    minimapViewport: "rgba(2, 132, 199, 0.8)",
+  },
+} as const;
+
+export interface GraphCanvasHandle {
+  zoomIn: () => void;
+  zoomOut: () => void;
+  fitView: () => void;
+  relayout: () => void;
+  focusNode: (id: string) => void;
+  exportImage: () => void;
+}
+
+interface GraphCanvasProps {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+  /** Degrees computed on the FULL graph so node sizes stay stable under filters. */
+  degrees: Map<string, number>;
+  selectedNodeId: string | null;
+  /** null = no active search; otherwise the set of matching node ids. */
+  searchMatchIds: Set<string> | null;
+  layoutType: LayoutType;
+  showLabels: boolean;
+  /** App theme; drives the canvas-drawn colors (labels, rims, rings). */
+  theme: "light" | "dark";
+  onSelectNode: (id: string | null) => void;
+  onTooltip: (tooltip: TooltipState | null) => void;
+  onZoomChange: (k: number) => void;
+  /**
+   * Explore-mode rendering context; null/undefined renders the normal full view.
+   * preview = no root picked yet: nodes are shown faded as pickable起点 candidates.
+   */
+  explore?: {
+    preview: boolean;
+    rootId: string | null;
+    nodeDepthMap: Map<string, number>;
+    expandedNodeIds: Set<string>;
+  } | null;
+  /** Floating pills rendered top-left over the canvas. */
+  toolbar?: ReactNode;
+  /** Small floating hint rendered bottom-center over the canvas. */
+  hint?: ReactNode;
+  /** Centered overlay (empty / loading states). */
+  overlay?: ReactNode;
+}
+
+interface DragState {
+  pointerId: number;
+  node: SimNode | null;
+  startX: number;
+  startY: number;
+  originX: number;
+  originY: number;
+  moved: boolean;
+}
+
+const easeCubicOut = (t: number) => 1 - Math.pow(1 - t, 3);
+
+export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
+  function GraphCanvas(props, ref) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const minimapRef = useRef<HTMLCanvasElement>(null);
+
+    const simRef = useRef<ForceSimulation | null>(null);
+    const nodeMapRef = useRef<Map<string, SimNode>>(new Map());
+    const adjacencyRef = useRef<Map<string, Set<string>>>(new Map());
+    const labelThresholdRef = useRef(3);
+
+    const transformRef = useRef<Transform>({ x: 0, y: 0, k: 0 });
+    const sizeRef = useRef({ w: 0, h: 0 });
+    const hoverRef = useRef<SimNode | null>(null);
+    const dragRef = useRef<DragState | null>(null);
+    const animRef = useRef<{
+      from: Transform;
+      to: Transform;
+      start: number;
+      duration: number;
+    } | null>(null);
+    const needsDrawRef = useRef(true);
+    const autoFitRef = useRef(false);
+    // While the initial layout is still settling we keep the whole graph in
+    // view every frame; any pan/zoom/drag from the user takes over.
+    const interactedRef = useRef(false);
+    const rafRef = useRef(0);
+
+    // Latest props readable from the rAF loop / event handlers.
+    const propsRef = useRef(props);
+    propsRef.current = props;
+
+    const requestDraw = useCallback(() => {
+      needsDrawRef.current = true;
+    }, []);
+
+    // ---------------------------------------------------------------- build
+
+    useEffect(() => {
+      const previous = nodeMapRef.current;
+      const simNodes: SimNode[] = props.nodes.map((n) => {
+        const degree = props.degrees.get(n.id) ?? 0;
+        const kind = getNodeKind(n);
+        const old = previous.get(n.id);
+        return {
+          id: n.id,
+          node: n,
+          kind,
+          degree,
+          radius: getNodeRadius(degree),
+          color: NODE_KIND_META[kind].color,
+          x: old?.x ?? Number.NaN,
+          y: old?.y ?? Number.NaN,
+          vx: 0,
+          vy: 0,
+          fx: old?.fx ?? null,
+          fy: old?.fy ?? null,
+        };
+      });
+
+      const fresh = simNodes.filter((n) => Number.isNaN(n.x));
+      if (fresh.length === simNodes.length) {
+        seedPositions(simNodes);
+      } else {
+        // Filters re-enabled some nodes: spiral the newcomers in near the center.
+        fresh.forEach((n, i) => {
+          const r = 60 + 16 * Math.sqrt(i + 1);
+          const angle = i * 2.3999632297;
+          n.x = r * Math.cos(angle);
+          n.y = r * Math.sin(angle);
+        });
+      }
+
+      const byId = new Map(simNodes.map((n) => [n.id, n]));
+      const simEdges: SimEdge[] = [];
+      const adjacency = new Map<string, Set<string>>();
+      for (const e of props.edges) {
+        const source = byId.get(e.source);
+        const target = byId.get(e.target);
+        if (!source || !target) continue;
+        const label = getEdgeLabel(e);
+        simEdges.push({
+          id: getEdgeId(e),
+          source,
+          target,
+          label,
+          info: getEdgeInfo(label),
+          weight: e.weight ?? 1,
+          distance: getLinkDistance(label) + source.radius + target.radius,
+        });
+        if (!adjacency.has(source.id)) adjacency.set(source.id, new Set());
+        if (!adjacency.has(target.id)) adjacency.set(target.id, new Set());
+        adjacency.get(source.id)!.add(target.id);
+        adjacency.get(target.id)!.add(source.id);
+      }
+
+      // Label budget: always label hubs; ~20 labels max by default.
+      const sortedDegrees = simNodes.map((n) => n.degree).sort((a, b) => b - a);
+      labelThresholdRef.current = Math.max(
+        2,
+        sortedDegrees[Math.min(19, sortedDegrees.length - 1)] ?? 2,
+      );
+
+      nodeMapRef.current = byId;
+      adjacencyRef.current = adjacency;
+      const sim = new ForceSimulation(simNodes, simEdges);
+      if (props.layoutType === "circular") {
+        applyCircularLayout(simNodes);
+        sim.alpha = 0;
+      } else {
+        sim.alpha = previous.size === 0 ? 1 : 0.5;
+      }
+      simRef.current = sim;
+      if (previous.size === 0) {
+        autoFitRef.current = false;
+        interactedRef.current = false;
+        // Pre-settle a fresh force layout synchronously (time-bounded) so the
+        // first paint is already roughly laid out instead of an exploding
+        // cloud that drifts out of the viewport.
+        if (props.layoutType === "force") {
+          const budget = simNodes.length > 350 ? 280 : 120;
+          const deadline = performance.now() + budget;
+          let guard = 0;
+          while (sim.alpha > 0.25 && guard < 600 && performance.now() < deadline) {
+            sim.tick();
+            guard += 1;
+          }
+        }
+      }
+      requestDraw();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.nodes, props.edges, props.degrees]);
+
+    // Layout switching.
+    const layoutRef = useRef(props.layoutType);
+    useEffect(() => {
+      if (layoutRef.current === props.layoutType) return;
+      layoutRef.current = props.layoutType;
+      const sim = simRef.current;
+      if (!sim) return;
+      if (props.layoutType === "circular") {
+        applyCircularLayout(sim.nodes);
+        sim.alpha = 0;
+      } else {
+        for (const n of sim.nodes) {
+          n.fx = null;
+          n.fy = null;
+        }
+        sim.reheat(0.9);
+      }
+      autoFitRef.current = false;
+      interactedRef.current = false;
+      requestDraw();
+    }, [props.layoutType, requestDraw]);
+
+    // Redraw on highlight-affecting prop changes.
+    useEffect(() => {
+      requestDraw();
+    }, [
+      props.selectedNodeId,
+      props.searchMatchIds,
+      props.showLabels,
+      props.explore,
+      props.theme,
+      requestDraw,
+    ]);
+
+    // ------------------------------------------------------------ transform
+
+    const clampZoom = (k: number) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, k));
+
+    // Notify React of zoom changes only when k actually moved — a state
+    // update per animation frame re-renders the whole page while settling.
+    const lastNotifiedZoomRef = useRef(0);
+    const setTransform = useCallback((t: Transform) => {
+      transformRef.current = t;
+      if (Math.abs(t.k - lastNotifiedZoomRef.current) > 0.004) {
+        lastNotifiedZoomRef.current = t.k;
+        propsRef.current.onZoomChange(t.k);
+      }
+      needsDrawRef.current = true;
+    }, []);
+
+    const animateTo = useCallback((to: Transform, duration = 350) => {
+      animRef.current = {
+        from: { ...transformRef.current },
+        to,
+        start: performance.now(),
+        duration,
+      };
+      needsDrawRef.current = true;
+    }, []);
+
+    const zoomBy = useCallback(
+      (factor: number, cx?: number, cy?: number) => {
+        interactedRef.current = true;
+        const t = transformRef.current;
+        const { w, h } = sizeRef.current;
+        const px = cx ?? w / 2;
+        const py = cy ?? h / 2;
+        const k = clampZoom(t.k * factor);
+        const wx = (px - t.x) / t.k;
+        const wy = (py - t.y) / t.k;
+        setTransform({ x: px - wx * k, y: py - wy * k, k });
+      },
+      [setTransform],
+    );
+
+    const computeFitTransform = useCallback((): Transform | null => {
+      const sim = simRef.current;
+      const { w, h } = sizeRef.current;
+      if (!sim || !sim.nodes.length || !w || !h) return null;
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const n of sim.nodes) {
+        minX = Math.min(minX, n.x - n.radius);
+        minY = Math.min(minY, n.y - n.radius);
+        maxX = Math.max(maxX, n.x + n.radius);
+        maxY = Math.max(maxY, n.y + n.radius);
+      }
+      // A single bad coordinate must not poison the viewport transform.
+      if (!Number.isFinite(minX + minY + maxX + maxY)) return null;
+      const pad = 70;
+      const bw = Math.max(maxX - minX, 1);
+      const bh = Math.max(maxY - minY, 1);
+      const k = clampZoom(Math.min((w - pad * 2) / bw, (h - pad * 2) / bh, 2.2));
+      const cx = (minX + maxX) / 2;
+      const cy = (minY + maxY) / 2;
+      return { x: w / 2 - cx * k, y: h / 2 - cy * k, k };
+    }, []);
+
+    const fitView = useCallback(
+      (animated = true) => {
+        const target = computeFitTransform();
+        if (!target) return;
+        if (animated) animateTo(target);
+        else setTransform(target);
+      },
+      [animateTo, computeFitTransform, setTransform],
+    );
+
+    const focusNode = useCallback(
+      (id: string) => {
+        const node = nodeMapRef.current.get(id);
+        const { w, h } = sizeRef.current;
+        if (!node || !w || !h) return;
+        interactedRef.current = true;
+        const k = clampZoom(Math.max(transformRef.current.k, 1.4));
+        animateTo({ x: w / 2 - node.x * k, y: h / 2 - node.y * k, k });
+      },
+      [animateTo],
+    );
+
+    const relayout = useCallback(() => {
+      const sim = simRef.current;
+      if (!sim) return;
+      if (layoutRef.current === "circular") {
+        applyCircularLayout(sim.nodes);
+        sim.alpha = 0;
+        fitView(true);
+      } else {
+        seedPositions(sim.nodes);
+        sim.alpha = 1;
+        autoFitRef.current = false;
+        interactedRef.current = false;
+      }
+      requestDraw();
+    }, [fitView, requestDraw]);
+
+    const exportImage = useCallback(() => {
+      const main = canvasRef.current;
+      if (!main) return;
+      const out = document.createElement("canvas");
+      out.width = main.width;
+      out.height = main.height;
+      const ctx = out.getContext("2d");
+      if (!ctx) return;
+      ctx.fillStyle = CANVAS_PALETTE[propsRef.current.theme].exportBg;
+      ctx.fillRect(0, 0, out.width, out.height);
+      ctx.drawImage(main, 0, 0);
+      out.toBlob((blob) => {
+        if (!blob) return;
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "knowledge-graph.png";
+        a.click();
+        URL.revokeObjectURL(url);
+      }, "image/png");
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        zoomIn: () => zoomBy(1.25),
+        zoomOut: () => zoomBy(1 / 1.25),
+        fitView: () => fitView(true),
+        relayout,
+        focusNode,
+        exportImage,
+      }),
+      [zoomBy, fitView, relayout, focusNode, exportImage],
+    );
+
+    // ----------------------------------------------------------------- draw
+
+    const draw = useCallback(() => {
+      const canvas = canvasRef.current;
+      const sim = simRef.current;
+      if (!canvas || !sim) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const { w, h } = sizeRef.current;
+      const t = transformRef.current;
+      const p = propsRef.current;
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, w, h);
+      ctx.translate(t.x, t.y);
+      ctx.scale(t.k, t.k);
+
+      const hover = hoverRef.current;
+      const activeId = hover?.id ?? p.selectedNodeId;
+      const neighbors = activeId ? adjacencyRef.current.get(activeId) : undefined;
+      const search = p.searchMatchIds;
+      const k = t.k || 1;
+      const explore = p.explore;
+      const palette = CANVAS_PALETTE[p.theme];
+
+      // ---- edges
+      for (const e of sim.edges) {
+        const touchesActive =
+          activeId !== null &&
+          (e.source.id === activeId || e.target.id === activeId);
+        let alpha: number;
+        if (activeId) alpha = touchesActive ? 0.95 : 0.07;
+        else if (search)
+          alpha = search.has(e.source.id) || search.has(e.target.id) ? 0.75 : 0.06;
+        else alpha = 0.38;
+
+        if (explore && !explore.preview) {
+          const sourceDepth = explore.nodeDepthMap.get(e.source.id) ?? 0;
+          const targetDepth = explore.nodeDepthMap.get(e.target.id) ?? 0;
+          const edgeDepth = Math.max(sourceDepth, targetDepth);
+          alpha *= Math.max(0.48, 1 - edgeDepth * 0.12);
+        }
+
+        ctx.globalAlpha = alpha;
+        ctx.strokeStyle = e.info.color;
+        ctx.lineWidth = (touchesActive ? 2.4 : 1.2) / k;
+        ctx.setLineDash(e.info.dashed ? [6 / k, 5 / k] : []);
+        ctx.beginPath();
+        ctx.moveTo(e.source.x, e.source.y);
+        ctx.lineTo(e.target.x, e.target.y);
+        ctx.stroke();
+
+        // Relation label at the midpoint while a node is focused.
+        if (touchesActive && k >= 0.55) {
+          const mx = (e.source.x + e.target.x) / 2;
+          const my = (e.source.y + e.target.y) / 2;
+          ctx.setLineDash([]);
+          ctx.font = `${10.5 / k}px "Noto Sans SC", system-ui, sans-serif`;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.lineWidth = 3 / k;
+          ctx.strokeStyle = palette.labelHalo;
+          ctx.strokeText(e.info.zh, mx, my);
+          ctx.fillStyle = e.info.color;
+          ctx.fillText(e.info.zh, mx, my);
+        }
+      }
+      ctx.setLineDash([]);
+
+      // ---- nodes
+      const labelThreshold = labelThresholdRef.current;
+      for (const n of sim.nodes) {
+        const isActive = n.id === activeId;
+        const isSelected = n.id === p.selectedNodeId;
+        const isNeighbor = neighbors?.has(n.id) ?? false;
+        const depth = explore?.nodeDepthMap.get(n.id);
+        const isExploreRoot = explore?.rootId === n.id;
+        const isExpanded = explore?.expandedNodeIds.has(n.id) ?? false;
+        let alpha: number;
+        if (activeId) alpha = isActive || isNeighbor ? 1 : 0.14;
+        else if (search) alpha = search.has(n.id) ? 1 : 0.14;
+        else alpha = 1;
+
+        let baseRadius = n.radius;
+        let labelByExplore = false;
+        let strokeWidth = 1.4 / k;
+        let strokeColor: string = palette.nodeRim;
+        let fillColor = n.color;
+        if (explore?.preview) {
+          alpha *= 0.42;
+          baseRadius = Math.max(8, n.radius * 0.86);
+          labelByExplore = isActive || isSelected;
+        } else if (explore && depth != null) {
+          baseRadius = depth === 0 ? 34 : Math.max(14, 28 - depth * 4);
+          alpha *= Math.max(0.45, 1 - depth * 0.12);
+          labelByExplore = depth <= 2 || isActive || isSelected;
+          strokeWidth = (depth === 0 ? 4 : isExpanded ? 3 : 1.5) / k;
+          strokeColor =
+            depth === 0
+              ? palette.rootRim
+              : isExpanded
+                ? palette.expandedRim
+                : palette.nodeRim;
+          if (isExploreRoot) fillColor = "#38bdf8";
+        }
+
+        const r = baseRadius * (n.id === hover?.id ? 1.15 : 1);
+        ctx.globalAlpha = alpha;
+
+        // Glow for hubs and the active node. Canvas shadows are expensive,
+        // so on large graphs only the focused nodes keep theirs.
+        const glowEligible =
+          sim.nodes.length <= 450
+            ? isActive || isSelected || isExploreRoot || isExpanded || n.degree >= labelThreshold
+            : isActive || isSelected || isExploreRoot;
+        if (alpha > 0.5 && glowEligible) {
+          ctx.shadowColor = fillColor;
+          ctx.shadowBlur = isActive || isSelected || isExploreRoot ? 24 : 12;
+        } else {
+          ctx.shadowBlur = 0;
+        }
+
+        ctx.beginPath();
+        ctx.arc(n.x, n.y, r, 0, Math.PI * 2);
+        ctx.fillStyle = fillColor;
+        ctx.fill();
+        ctx.shadowBlur = 0;
+
+        // Rim.
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = strokeColor;
+        ctx.stroke();
+
+        if (isExploreRoot) {
+          ctx.beginPath();
+          ctx.arc(n.x, n.y, r + 8 / k, 0, Math.PI * 2);
+          ctx.lineWidth = 1.4 / k;
+          ctx.strokeStyle = palette.rootRing;
+          ctx.stroke();
+        } else if (isExpanded) {
+          ctx.beginPath();
+          ctx.arc(n.x + r * 0.58, n.y - r * 0.58, Math.max(4 / k, 3), 0, Math.PI * 2);
+          ctx.fillStyle = palette.expandedDot;
+          ctx.fill();
+          ctx.lineWidth = 1 / k;
+          ctx.strokeStyle = palette.expandedDotRim;
+          ctx.stroke();
+        }
+
+        // Selection: double ring.
+        if (isSelected) {
+          ctx.beginPath();
+          ctx.arc(n.x, n.y, r + 4 / k, 0, Math.PI * 2);
+          ctx.lineWidth = 2 / k;
+          ctx.strokeStyle = palette.selectionRing;
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.arc(n.x, n.y, r + 8 / k, 0, Math.PI * 2);
+          ctx.lineWidth = 1.2 / k;
+          ctx.strokeStyle = n.color;
+          ctx.stroke();
+        } else if (n.id === hover?.id) {
+          ctx.beginPath();
+          ctx.arc(n.x, n.y, r + 3.5 / k, 0, Math.PI * 2);
+          ctx.lineWidth = 1.6 / k;
+          ctx.strokeStyle = palette.hoverRing;
+          ctx.stroke();
+        }
+
+        // Pin marker for dragged-and-fixed nodes.
+        if (n.fx != null && !isSelected) {
+          ctx.beginPath();
+          ctx.arc(n.x, n.y, Math.max(r * 0.28, 2 / k), 0, Math.PI * 2);
+          ctx.fillStyle = palette.pin;
+          ctx.fill();
+        }
+
+        // Label.
+        const wantsLabel =
+          isActive ||
+          isSelected ||
+          isNeighbor ||
+          labelByExplore ||
+          (search?.has(n.id) ?? false) ||
+          (p.showLabels && n.degree >= labelThreshold && k >= 0.45);
+        if (wantsLabel && alpha > 0.5) {
+          const text = truncateLabel(getNodeTitle(n.node), isActive ? 26 : 14);
+          const fontSize = (isActive || isSelected ? 13 : 12) / k;
+          ctx.font = `600 ${fontSize}px "Noto Sans SC", system-ui, sans-serif`;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "top";
+          ctx.lineWidth = 3.5 / k;
+          ctx.strokeStyle = palette.labelHalo;
+          ctx.strokeText(text, n.x, n.y + r + 5 / k);
+          ctx.fillStyle = isActive || isSelected ? palette.labelActive : palette.label;
+          ctx.fillText(text, n.x, n.y + r + 5 / k);
+        }
+      }
+      ctx.globalAlpha = 1;
+
+      drawMinimap();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const drawMinimap = useCallback(() => {
+      const minimap = minimapRef.current;
+      const sim = simRef.current;
+      if (!minimap || !sim || !sim.nodes.length) return;
+      const ctx = minimap.getContext("2d");
+      if (!ctx) return;
+      const mw = minimap.width;
+      const mh = minimap.height;
+      ctx.clearRect(0, 0, mw, mh);
+
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const n of sim.nodes) {
+        minX = Math.min(minX, n.x);
+        minY = Math.min(minY, n.y);
+        maxX = Math.max(maxX, n.x);
+        maxY = Math.max(maxY, n.y);
+      }
+      const pad = 10;
+      const scale = Math.min(
+        (mw - pad * 2) / Math.max(maxX - minX, 1),
+        (mh - pad * 2) / Math.max(maxY - minY, 1),
+      );
+      const ox = (mw - (maxX - minX) * scale) / 2 - minX * scale;
+      const oy = (mh - (maxY - minY) * scale) / 2 - minY * scale;
+
+      for (const n of sim.nodes) {
+        ctx.beginPath();
+        ctx.arc(n.x * scale + ox, n.y * scale + oy, 1.6, 0, Math.PI * 2);
+        ctx.fillStyle = n.color;
+        ctx.globalAlpha = 0.9;
+        ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+
+      // Viewport rectangle.
+      const t = transformRef.current;
+      const { w, h } = sizeRef.current;
+      if (t.k > 0 && w && h) {
+        const x0 = ((0 - t.x) / t.k) * scale + ox;
+        const y0 = ((0 - t.y) / t.k) * scale + oy;
+        const x1 = ((w - t.x) / t.k) * scale + ox;
+        const y1 = ((h - t.y) / t.k) * scale + oy;
+        ctx.strokeStyle = CANVAS_PALETTE[propsRef.current.theme].minimapViewport;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
+      }
+    }, []);
+
+    // ----------------------------------------------------------------- loop
+
+    useEffect(() => {
+      const loop = () => {
+        const sim = simRef.current;
+        let active = false;
+
+        const anim = animRef.current;
+        if (anim) {
+          const progress = Math.min(
+            (performance.now() - anim.start) / anim.duration,
+            1,
+          );
+          const e = easeCubicOut(progress);
+          transformRef.current = {
+            x: anim.from.x + (anim.to.x - anim.from.x) * e,
+            y: anim.from.y + (anim.to.y - anim.from.y) * e,
+            k: anim.from.k + (anim.to.k - anim.from.k) * e,
+          };
+          if (progress >= 1) {
+            animRef.current = null;
+            lastNotifiedZoomRef.current = transformRef.current.k;
+            propsRef.current.onZoomChange(transformRef.current.k);
+          }
+          active = true;
+        }
+
+        if (sim && layoutRef.current === "force" && sim.tick()) {
+          active = true;
+          // Until the user pans/zooms/drags, gently track the settling layout
+          // so it stays in view without the viewport snapping every frame.
+          if (!interactedRef.current && sizeRef.current.w) {
+            const target = computeFitTransform();
+            if (target) {
+              const t = transformRef.current;
+              const ease = t.k === 0 ? 1 : 0.16;
+              setTransform({
+                x: t.x + (target.x - t.x) * ease,
+                y: t.y + (target.y - t.y) * ease,
+                k: t.k + (target.k - t.k) * ease,
+              });
+            }
+            autoFitRef.current = true;
+          } else if (!autoFitRef.current && sim.alpha < 0.3) {
+            autoFitRef.current = true;
+            fitView(true);
+          }
+        } else if (sim && !autoFitRef.current && sim.nodes.length && sizeRef.current.w) {
+          autoFitRef.current = true;
+          fitView(false);
+        }
+
+        if (active || needsDrawRef.current) {
+          needsDrawRef.current = false;
+          draw();
+        }
+        rafRef.current = requestAnimationFrame(loop);
+      };
+      rafRef.current = requestAnimationFrame(loop);
+      return () => cancelAnimationFrame(rafRef.current);
+    }, [computeFitTransform, draw, fitView, setTransform]);
+
+    // --------------------------------------------------------------- resize
+
+    useEffect(() => {
+      const container = containerRef.current;
+      const canvas = canvasRef.current;
+      if (!container || !canvas) return;
+      let timer: number | undefined;
+      const apply = () => {
+        const rect = container.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        sizeRef.current = { w: rect.width, h: rect.height };
+        canvas.width = Math.max(1, Math.round(rect.width * dpr));
+        canvas.height = Math.max(1, Math.round(rect.height * dpr));
+        if (transformRef.current.k === 0) {
+          setTransform({ x: rect.width / 2, y: rect.height / 2, k: 0.9 });
+        }
+        requestDraw();
+      };
+      apply();
+      const observer = new ResizeObserver(() => {
+        window.clearTimeout(timer);
+        timer = window.setTimeout(apply, 120);
+      });
+      observer.observe(container);
+      return () => {
+        window.clearTimeout(timer);
+        observer.disconnect();
+      };
+    }, [requestDraw, setTransform]);
+
+    // --------------------------------------------------------------- events
+
+    const screenToWorld = (sx: number, sy: number) => {
+      const t = transformRef.current;
+      return { x: (sx - t.x) / t.k, y: (sy - t.y) / t.k };
+    };
+
+    const hitTest = (wx: number, wy: number): SimNode | null => {
+      const sim = simRef.current;
+      if (!sim) return null;
+      // Topmost (drawn last) first.
+      for (let i = sim.nodes.length - 1; i >= 0; i--) {
+        const n = sim.nodes[i];
+        const dx = wx - n.x;
+        const dy = wy - n.y;
+        const r = n.radius + 3 / (transformRef.current.k || 1);
+        if (dx * dx + dy * dy <= r * r) return n;
+      }
+      return null;
+    };
+
+    const localPoint = (e: { clientX: number; clientY: number }) => {
+      const rect = canvasRef.current!.getBoundingClientRect();
+      return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
+    };
+
+    const setHover = (node: SimNode | null, e?: React.PointerEvent) => {
+      if (hoverRef.current?.id !== node?.id) {
+        hoverRef.current = node;
+        requestDraw();
+      }
+      const canvas = canvasRef.current;
+      if (canvas) canvas.style.cursor = node ? "pointer" : "grab";
+      if (node && e) {
+        propsRef.current.onTooltip({
+          x: e.clientX,
+          y: e.clientY,
+          node: node.node,
+          kind: node.kind,
+          degree: node.degree,
+        });
+      } else {
+        propsRef.current.onTooltip(null);
+      }
+    };
+
+    const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
+      if (e.button !== 0) return;
+      const { sx, sy } = localPoint(e);
+      const { x: wx, y: wy } = screenToWorld(sx, sy);
+      const node = hitTest(wx, wy);
+      animRef.current = null;
+      dragRef.current = {
+        pointerId: e.pointerId,
+        node,
+        startX: sx,
+        startY: sy,
+        originX: transformRef.current.x,
+        originY: transformRef.current.y,
+        moved: false,
+      };
+      if (node) {
+        node.fx = node.x;
+        node.fy = node.y;
+      }
+      e.currentTarget.setPointerCapture(e.pointerId);
+    };
+
+    const handlePointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
+      const { sx, sy } = localPoint(e);
+      const drag = dragRef.current;
+      if (drag && drag.pointerId === e.pointerId) {
+        const dx = sx - drag.startX;
+        const dy = sy - drag.startY;
+        if (Math.abs(dx) + Math.abs(dy) > 3) {
+          drag.moved = true;
+          // Only a real pan/drag takes over the camera; a plain click keeps
+          // the auto-follow so the settling graph can't drift out of view.
+          interactedRef.current = true;
+        }
+        if (drag.node) {
+          const world = screenToWorld(sx, sy);
+          drag.node.fx = world.x;
+          drag.node.fy = world.y;
+          if (layoutRef.current === "force") simRef.current?.reheat(0.3);
+          propsRef.current.onTooltip(null);
+        } else {
+          transformRef.current = {
+            ...transformRef.current,
+            x: drag.originX + dx,
+            y: drag.originY + dy,
+          };
+        }
+        requestDraw();
+        return;
+      }
+      const world = screenToWorld(sx, sy);
+      setHover(hitTest(world.x, world.y), e);
+    };
+
+    const handlePointerUp = (e: React.PointerEvent<HTMLCanvasElement>) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== e.pointerId) return;
+      dragRef.current = null;
+      if (!drag.moved) {
+        // Plain click: select node / clear selection on empty space.
+        if (drag.node) {
+          drag.node.fx = null;
+          drag.node.fy = null;
+          propsRef.current.onSelectNode(drag.node.id);
+        } else {
+          propsRef.current.onSelectNode(null);
+        }
+        requestDraw();
+      }
+      // A real drag leaves the node pinned at its drop position.
+    };
+
+    const handleDoubleClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
+      const { sx, sy } = localPoint(e);
+      const world = screenToWorld(sx, sy);
+      const node = hitTest(world.x, world.y);
+      if (node) {
+        propsRef.current.onSelectNode(node.id);
+        focusNode(node.id);
+      }
+    };
+
+    const handlePointerLeave = () => {
+      setHover(null);
+    };
+
+    // Wheel zoom needs a non-passive listener to preventDefault.
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const onWheel = (e: WheelEvent) => {
+        e.preventDefault();
+        interactedRef.current = true;
+        const rect = canvas.getBoundingClientRect();
+        zoomBy(
+          Math.exp(-e.deltaY * 0.0012),
+          e.clientX - rect.left,
+          e.clientY - rect.top,
+        );
+      };
+      canvas.addEventListener("wheel", onWheel, { passive: false });
+      return () => canvas.removeEventListener("wheel", onWheel);
+    }, [zoomBy]);
+
+    const minimapVisible = useMemo(() => props.nodes.length > 0, [props.nodes]);
+
+    return (
+      <div className="kg-canvas-wrap" ref={containerRef}>
+        <canvas
+          ref={canvasRef}
+          className="kg-canvas"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerLeave={handlePointerLeave}
+          onDoubleClick={handleDoubleClick}
+        />
+        {props.toolbar ? (
+          <div className="kg-canvas-toolbar">{props.toolbar}</div>
+        ) : null}
+        {props.hint}
+        {minimapVisible ? (
+          <canvas ref={minimapRef} className="kg-minimap" width={180} height={120} />
+        ) : null}
+        {props.overlay}
+      </div>
+    );
+  },
+);
@@ -0,0 +1,287 @@
+import {
+  Ban,
+  Compass,
+  Crosshair,
+  EyeOff,
+  FileText,
+  Loader2,
+  MousePointerClick,
+  Waypoints,
+  X,
+} from "lucide-react";
+
+import type { KnowledgeNote } from "@/core/knowledge/types";
+
+import type { GraphNode } from "./graphTypes";
+import {
+  getEdgeInfo,
+  getNodeKind,
+  getNodeTitle,
+  NODE_KIND_META,
+} from "./graphUtils";
+
+const SOURCE_TYPE_ZH: Record<string, string> = {
+  thread: "对话沉淀",
+  search: "搜索沉淀",
+  tool: "工具结果",
+  file: "文件导入",
+  manual: "手动创建",
+  report: "报告",
+};
+
+const STATUS_ZH: Record<string, string> = {
+  draft: "草稿",
+  approved: "已审核",
+  archived: "已归档",
+};
+
+export interface NeighborItem {
+  node: GraphNode;
+  relation: string;
+}
+
+interface GraphDetailPanelProps {
+  node: GraphNode | null;
+  degree: number;
+  neighbors: NeighborItem[];
+  /** Note detail (only for note-type nodes; undefined while absent/loading). */
+  note: KnowledgeNote | undefined;
+  noteLoading: boolean;
+  /** Explore-mode context; null when in full mode. */
+  explore: {
+    /** Depth of this node in the explore graph; null = not yet visible. */
+    depth: number | null;
+    expanded: boolean;
+    isRoot: boolean;
+  } | null;
+  onViewSource: (noteId: string) => void;
+  onLocate: (id: string) => void;
+  onHide: (id: string) => void;
+  onBlacklist: (id: string) => void;
+  onPickNeighbor: (id: string) => void;
+  onExpandNode: (id: string) => void;
+  onSetExploreRoot: (id: string) => void;
+  onClose: () => void;
+}
+
+function formatTime(value: string | null | undefined): string {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("zh-CN", { hour12: false });
+}
+
+export function GraphDetailPanel(props: GraphDetailPanelProps) {
+  const { node } = props;
+
+  return (
+    <aside className="kg-panel kg-detail">
+      <div className="kg-panel-header">
+        <span className="kg-panel-title">节点详情</span>
+        <button
+          type="button"
+          className="kg-panel-close-btn"
+          title="收起详情面板"
+          onClick={props.onClose}
+        >
+          <X size={15} />
+        </button>
+      </div>
+      {!node ? (
+        <div className="kg-detail-empty">
+          <MousePointerClick size={28} />
+          <div className="kg-detail-empty-title">选择一个节点查看详情</div>
+          <div>
+            点击图谱中的文档、主题或实体节点,
+            <br />
+            查看摘要、标签、关联关系和相邻节点。
+          </div>
+        </div>
+      ) : (
+        <DetailBody {...props} node={node} />
+      )}
+    </aside>
+  );
+}
+
+function DetailBody(props: GraphDetailPanelProps & { node: GraphNode }) {
+  const { node, note } = props;
+  const kind = getNodeKind(node);
+  const kindMeta = NODE_KIND_META[kind];
+  const isNote = (node.type || "").toLowerCase() === "note";
+
+  return (
+    <div className="kg-panel-content">
+      <h2 className="kg-detail-title">{getNodeTitle(node)}</h2>
+      <div>
+        <span
+          className="kg-detail-type"
+          style={{
+            background: `${kindMeta.color}26`,
+            color: kindMeta.color,
+          }}
+        >
+          <span className="kg-legend-dot" style={{ background: kindMeta.color }} />
+          {kindMeta.label}
+          {node.category && node.category !== kindMeta.label
+            ? ` · ${node.category}`
+            : ""}
+        </span>
+        <span className="kg-detail-type kg-detail-type-neutral">
+          度数 {props.degree}
+        </span>
+        {props.explore && props.explore.depth !== null ? (
+          <>
+            <span className="kg-detail-type kg-detail-type-primary">
+              {props.explore.isRoot
+                ? "探索起点"
+                : `第 ${props.explore.depth} 层`}
+            </span>
+            <span
+              className={`kg-detail-type ${
+                props.explore.expanded
+                  ? "kg-detail-type-success"
+                  : "kg-detail-type-warn"
+              }`}
+            >
+              {props.explore.expanded ? "已展开" : "可展开"}
+            </span>
+          </>
+        ) : null}
+      </div>
+
+      {props.noteLoading ? (
+        <div className="kg-detail-summary" style={{ display: "flex", gap: 8 }}>
+          <Loader2 size={14} className="animate-spin" /> 加载笔记详情...
+        </div>
+      ) : null}
+
+      {note?.summary ? <p className="kg-detail-summary">{note.summary}</p> : null}
+
+      {note?.tags?.length ? (
+        <div className="kg-tag-list">
+          {note.tags.map((tag) => (
+            <span key={tag} className="kg-tag">
+              #{tag}
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      {note ? (
+        <div className="kg-detail-meta">
+          <span className="kg-detail-meta-label">来源</span>
+          <span className="kg-detail-meta-value">
+            {SOURCE_TYPE_ZH[note.source_type] ?? note.source_type}
+          </span>
+          <span className="kg-detail-meta-label">状态</span>
+          <span className="kg-detail-meta-value">
+            {STATUS_ZH[note.status] ?? note.status}
+          </span>
+          <span className="kg-detail-meta-label">创建时间</span>
+          <span className="kg-detail-meta-value">{formatTime(note.created_at)}</span>
+          <span className="kg-detail-meta-label">更新时间</span>
+          <span className="kg-detail-meta-value">{formatTime(note.updated_at)}</span>
+          {note.created_by_name ? (
+            <>
+              <span className="kg-detail-meta-label">创建人</span>
+              <span className="kg-detail-meta-value">{note.created_by_name}</span>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="kg-detail-actions">
+        {isNote ? (
+          <button
+            type="button"
+            className="kg-icon-button"
+            onClick={() => props.onViewSource(node.id)}
+          >
+            <FileText size={14} /> 查看原文
+          </button>
+        ) : null}
+        <button
+          type="button"
+          className="kg-icon-button"
+          onClick={() => props.onLocate(node.id)}
+        >
+          <Crosshair size={14} /> 定位节点
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          onClick={() => props.onHide(node.id)}
+        >
+          <EyeOff size={14} /> 隐藏节点
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="加入黑名单后该节点将不再出现在图谱中,可在左侧「图谱黑名单」中移除"
+          onClick={() => props.onBlacklist(node.id)}
+        >
+          <Ban size={14} /> 加入黑名单
+        </button>
+        {props.explore ? (
+          <>
+            <button
+              type="button"
+              className="kg-icon-button"
+              disabled={props.explore.depth === null || props.explore.expanded}
+              title={
+                props.explore.expanded
+                  ? "该节点的一跳邻居已全部展开"
+                  : "展开该节点的一跳邻居"
+              }
+              onClick={() => props.onExpandNode(node.id)}
+            >
+              <Waypoints size={14} /> 展开一跳邻居
+            </button>
+            <button
+              type="button"
+              className="kg-icon-button"
+              title="清空当前探索路径,以此节点为新起点"
+              onClick={() => props.onSetExploreRoot(node.id)}
+            >
+              <Compass size={14} /> 以此为新起点
+            </button>
+          </>
+        ) : null}
+      </div>
+
+      <h3 className="kg-detail-section-title">
+        关联节点({props.neighbors.length})
+      </h3>
+      {props.neighbors.length === 0 ? (
+        <div className="kg-search-hint">该节点暂无可见的关联节点</div>
+      ) : (
+        <div className="kg-neighbor-list">
+          {props.neighbors.map(({ node: neighbor, relation }) => {
+            const neighborKind = NODE_KIND_META[getNodeKind(neighbor)];
+            const relationInfo = getEdgeInfo(relation);
+            return (
+              <div
+                key={`${neighbor.id}:${relation}`}
+                className="kg-neighbor-item"
+                onClick={() => props.onPickNeighbor(neighbor.id)}
+              >
+                <span
+                  className="kg-legend-dot"
+                  style={{ background: neighborKind.color, flexShrink: 0 }}
+                />
+                <span className="kg-neighbor-title">{getNodeTitle(neighbor)}</span>
+                <span
+                  className="kg-neighbor-relation"
+                  style={{ color: relationInfo.color }}
+                >
+                  {relationInfo.zh}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,57 @@
+import type { NodeKind } from "./graphTypes";
+import { getEdgeInfo, NODE_KIND_META, NODE_KIND_ORDER } from "./graphUtils";
+
+interface GraphFooterProps {
+  nodeKindCounts: Map<NodeKind, number>;
+  edgeLabels: string[];
+  zoomLevel: number;
+  selectedTitle: string | null;
+  visibleNodes: number;
+  visibleEdges: number;
+}
+
+export function GraphFooter(props: GraphFooterProps) {
+  const kinds = NODE_KIND_ORDER.filter((k) => (props.nodeKindCounts.get(k) ?? 0) > 0);
+
+  return (
+    <footer className="kg-footer">
+      <div className="kg-legend">
+        {kinds.map((kind) => (
+          <span key={kind} className="kg-legend-item">
+            <span
+              className="kg-legend-dot"
+              style={{ background: NODE_KIND_META[kind].color }}
+            />
+            {NODE_KIND_META[kind].label}
+          </span>
+        ))}
+        {props.edgeLabels.slice(0, 6).map((label) => {
+          const info = getEdgeInfo(label);
+          return (
+            <span key={label} className="kg-legend-item">
+              <span
+                className="kg-legend-line"
+                style={{
+                  borderTopColor: info.color,
+                  borderTopStyle: info.dashed ? "dashed" : "solid",
+                }}
+              />
+              {info.zh}
+            </span>
+          );
+        })}
+      </div>
+      <div className="kg-footer-status">
+        {props.selectedTitle ? (
+          <span className="kg-footer-selected" title={props.selectedTitle}>
+            选中:{props.selectedTitle}
+          </span>
+        ) : null}
+        <span>
+          显示 {props.visibleNodes} 节点 · {props.visibleEdges} 关系
+        </span>
+        <span>缩放 {Math.round(props.zoomLevel * 100)}%</span>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,124 @@
+import {
+  ArrowLeft,
+  Download,
+  Loader2,
+  Maximize2,
+  RefreshCw,
+  Scan,
+  Shuffle,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+
+interface GraphHeaderProps {
+  nodeCount: number;
+  edgeCount: number;
+  totalNodes: number;
+  totalEdges: number;
+  refreshing: boolean;
+  onBack: () => void;
+  onRelayout: () => void;
+  onFitView: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onExport: () => void;
+  onFullscreen: () => void;
+  onRefresh: () => void;
+}
+
+export function GraphHeader(props: GraphHeaderProps) {
+  const filteredNodes =
+    props.nodeCount === props.totalNodes
+      ? `${props.totalNodes}`
+      : `${props.nodeCount}/${props.totalNodes}`;
+  const filteredEdges =
+    props.edgeCount === props.totalEdges
+      ? `${props.totalEdges}`
+      : `${props.edgeCount}/${props.totalEdges}`;
+
+  return (
+    <header className="kg-header">
+      <div className="kg-header-left">
+        <button type="button" className="kg-back" onClick={props.onBack}>
+          <ArrowLeft size={15} />
+          <span className="kg-button-text">返回</span>
+        </button>
+        <div className="kg-title-block">
+          <h1 className="kg-title">知识图谱</h1>
+          <span className="kg-subtitle">知识关系可视化</span>
+        </div>
+        <div className="kg-stat-pills">
+          <span className="kg-stat-pill">{filteredNodes} 个节点</span>
+          <span className="kg-stat-pill kg-stat-pill-violet">
+            {filteredEdges} 条关系
+          </span>
+        </div>
+      </div>
+      <div className="kg-header-actions">
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="重新布局"
+          onClick={props.onRelayout}
+        >
+          <Shuffle size={15} />
+          <span className="kg-button-text">重新布局</span>
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="适应视图"
+          onClick={props.onFitView}
+        >
+          <Scan size={15} />
+          <span className="kg-button-text">适应视图</span>
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="放大"
+          onClick={props.onZoomIn}
+        >
+          <ZoomIn size={15} />
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="缩小"
+          onClick={props.onZoomOut}
+        >
+          <ZoomOut size={15} />
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="导出图片"
+          onClick={props.onExport}
+        >
+          <Download size={15} />
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="全屏"
+          onClick={props.onFullscreen}
+        >
+          <Maximize2 size={15} />
+        </button>
+        <button
+          type="button"
+          className="kg-icon-button"
+          title="刷新图谱数据"
+          onClick={props.onRefresh}
+          disabled={props.refreshing}
+        >
+          {props.refreshing ? (
+            <Loader2 size={15} className="animate-spin" />
+          ) : (
+            <RefreshCw size={15} />
+          )}
+        </button>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,292 @@
+import { ChevronDown, ChevronRight, Eraser, Search, X } from "lucide-react";
+import { useState } from "react";
+
+import type { GraphBlacklistItem } from "@/core/knowledge/api";
+
+import type { GraphNode, GraphStats, NodeKind } from "./graphTypes";
+import {
+  getEdgeInfo,
+  getNodeTitle,
+  NODE_KIND_META,
+  NODE_KIND_ORDER,
+} from "./graphUtils";
+
+interface GraphSidebarProps {
+  searchKeyword: string;
+  searchMatchCount: number | null;
+  nodeKindCounts: Map<NodeKind, number>;
+  edgeLabelCounts: Map<string, number>;
+  disabledNodeKinds: Set<NodeKind>;
+  disabledEdgeLabels: Set<string>;
+  stats: GraphStats;
+  topNodes: Array<{ node: GraphNode; degree: number }>;
+  hiddenCount: number;
+  blacklistItems: GraphBlacklistItem[];
+  blacklistPending: boolean;
+  junkCandidateCount: number;
+  onSearchChange: (keyword: string) => void;
+  onSearchEnter: () => void;
+  onToggleNodeKind: (kind: NodeKind) => void;
+  onToggleEdgeLabel: (label: string) => void;
+  onRestoreHidden: () => void;
+  onRemoveBlacklist: (entryId: string) => void;
+  onCleanJunk: () => void;
+  onPickNode: (id: string) => void;
+  onClose: () => void;
+}
+
+type SectionKey =
+  | "nodeTypes"
+  | "edgeTypes"
+  | "graphStats"
+  | "coreNodes"
+  | "blacklist";
+
+interface FilterSectionProps {
+  title: string;
+  extra?: string;
+  collapsed: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}
+
+function FilterSection(props: FilterSectionProps) {
+  return (
+    <section className="kg-filter-section">
+      <button
+        type="button"
+        className="kg-filter-section-header"
+        onClick={props.onToggle}
+        aria-expanded={!props.collapsed}
+      >
+        <span>{props.title}</span>
+        <span className="kg-filter-section-extra">
+          {props.extra}
+          {props.collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
+        </span>
+      </button>
+      {!props.collapsed ? (
+        <div className="kg-filter-section-body">{props.children}</div>
+      ) : null}
+    </section>
+  );
+}
+
+export function GraphSidebar(props: GraphSidebarProps) {
+  // 节点类型 / 关系类型默认收起,统计与核心节点默认展开。
+  const [collapsedSections, setCollapsedSections] = useState<
+    Record<SectionKey, boolean>
+  >({
+    nodeTypes: true,
+    edgeTypes: true,
+    graphStats: false,
+    coreNodes: false,
+    blacklist: true,
+  });
+
+  const toggleFilterSection = (key: SectionKey) => {
+    setCollapsedSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const kinds = NODE_KIND_ORDER.filter((k) => (props.nodeKindCounts.get(k) ?? 0) > 0);
+  const edgeLabels = [...props.edgeLabelCounts.entries()].sort((a, b) => b[1] - a[1]);
+
+  return (
+    <aside className="kg-panel kg-sidebar">
+      <div className="kg-panel-header">
+        <span className="kg-panel-title">搜索与筛选</span>
+        <div className="kg-panel-header-actions">
+          {props.hiddenCount > 0 ? (
+            <button
+              type="button"
+              className="kg-text-button"
+              onClick={props.onRestoreHidden}
+            >
+              恢复 {props.hiddenCount} 个隐藏节点
+            </button>
+          ) : null}
+          <button
+            type="button"
+            className="kg-panel-close-btn"
+            title="收起筛选面板"
+            onClick={props.onClose}
+          >
+            <X size={15} />
+          </button>
+        </div>
+      </div>
+      <div className="kg-panel-content">
+        <div className="kg-search-wrap">
+          <Search size={14} />
+          <input
+            className="kg-search"
+            placeholder="搜索节点标题..."
+            value={props.searchKeyword}
+            onChange={(e) => props.onSearchChange(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") props.onSearchEnter();
+            }}
+          />
+        </div>
+        {props.searchMatchCount !== null ? (
+          <div
+            className={`kg-search-hint${props.searchMatchCount === 0 ? " kg-search-hint-warn" : ""}`}
+          >
+            {props.searchMatchCount === 0
+              ? "没有匹配的节点,换个关键词试试"
+              : `匹配 ${props.searchMatchCount} 个节点,回车定位`}
+          </div>
+        ) : null}
+
+        <FilterSection
+          title="节点类型"
+          extra={`${kinds.length} 类`}
+          collapsed={collapsedSections.nodeTypes}
+          onToggle={() => toggleFilterSection("nodeTypes")}
+        >
+          {kinds.map((kind) => (
+            <label key={kind} className="kg-check-row">
+              <span className="kg-check-row-main">
+                <input
+                  type="checkbox"
+                  checked={!props.disabledNodeKinds.has(kind)}
+                  onChange={() => props.onToggleNodeKind(kind)}
+                />
+                <span
+                  className="kg-legend-dot"
+                  style={{ background: NODE_KIND_META[kind].color }}
+                />
+                <span className="kg-check-label">{NODE_KIND_META[kind].label}</span>
+              </span>
+              <span className="kg-count">{props.nodeKindCounts.get(kind)}</span>
+            </label>
+          ))}
+        </FilterSection>
+
+        {edgeLabels.length > 0 ? (
+          <FilterSection
+            title="关系类型"
+            extra={`${edgeLabels.length} 类`}
+            collapsed={collapsedSections.edgeTypes}
+            onToggle={() => toggleFilterSection("edgeTypes")}
+          >
+            {edgeLabels.map(([label, count]) => {
+              const info = getEdgeInfo(label);
+              return (
+                <label key={label} className="kg-check-row">
+                  <span className="kg-check-row-main">
+                    <input
+                      type="checkbox"
+                      checked={!props.disabledEdgeLabels.has(label)}
+                      onChange={() => props.onToggleEdgeLabel(label)}
+                    />
+                    <span
+                      className="kg-legend-line"
+                      style={{
+                        borderTopColor: info.color,
+                        borderTopStyle: info.dashed ? "dashed" : "solid",
+                      }}
+                    />
+                    <span className="kg-check-label">{info.zh}</span>
+                  </span>
+                  <span className="kg-count">{count}</span>
+                </label>
+              );
+            })}
+          </FilterSection>
+        ) : null}
+
+        <FilterSection
+          title="图谱统计"
+          collapsed={collapsedSections.graphStats}
+          onToggle={() => toggleFilterSection("graphStats")}
+        >
+          <div className="kg-stats-grid">
+            <div className="kg-stat-card">
+              <div className="kg-stat-card-value">{props.stats.nodes}</div>
+              <div className="kg-stat-card-label">节点</div>
+            </div>
+            <div className="kg-stat-card">
+              <div className="kg-stat-card-value">{props.stats.edges}</div>
+              <div className="kg-stat-card-label">关系</div>
+            </div>
+            <div className="kg-stat-card">
+              <div className="kg-stat-card-value">
+                {props.stats.avgDegree.toFixed(2)}
+              </div>
+              <div className="kg-stat-card-label">平均度</div>
+            </div>
+            <div className="kg-stat-card">
+              <div className="kg-stat-card-value">{props.stats.largestComponent}</div>
+              <div className="kg-stat-card-label">最大连通分量</div>
+            </div>
+          </div>
+        </FilterSection>
+
+        {props.topNodes.length > 0 ? (
+          <FilterSection
+            title="核心节点"
+            extra={`${props.topNodes.length} 个`}
+            collapsed={collapsedSections.coreNodes}
+            onToggle={() => toggleFilterSection("coreNodes")}
+          >
+            {props.topNodes.map(({ node, degree }, i) => (
+              <div
+                key={node.id}
+                className="kg-rank-item"
+                onClick={() => props.onPickNode(node.id)}
+              >
+                <span className="kg-rank-index">{i + 1}</span>
+                <span className="kg-rank-title">{getNodeTitle(node)}</span>
+                <span className="kg-rank-degree">{degree} 度</span>
+              </div>
+            ))}
+          </FilterSection>
+        ) : null}
+
+        <FilterSection
+          title="图谱黑名单"
+          extra={`${props.blacklistItems.length} 个`}
+          collapsed={collapsedSections.blacklist}
+          onToggle={() => toggleFilterSection("blacklist")}
+        >
+          <div className="kg-search-hint">
+            黑名单中的主题 / 节点不会出现在图谱中。可在节点详情里加入黑名单。
+          </div>
+          <button
+            type="button"
+            className="kg-icon-button"
+            disabled={props.blacklistPending || props.junkCandidateCount === 0}
+            title="将单字符、纯数字符号、通用泛词等低价值主题批量加入黑名单"
+            onClick={props.onCleanJunk}
+          >
+            <Eraser size={13} /> 清理低价值主题
+            {props.junkCandidateCount > 0 ? `(${props.junkCandidateCount})` : ""}
+          </button>
+          {props.blacklistItems.length === 0 ? (
+            <div className="kg-search-hint">暂无黑名单条目。</div>
+          ) : (
+            props.blacklistItems.map((item) => (
+              <div key={item.id} className="kg-check-row">
+                <span className="kg-check-row-main">
+                  <span className="kg-check-label" title={item.label}>
+                    {item.label}
+                  </span>
+                </span>
+                <button
+                  type="button"
+                  className="kg-text-button"
+                  disabled={props.blacklistPending}
+                  title="移出黑名单,重新显示该节点"
+                  onClick={() => props.onRemoveBlacklist(item.id)}
+                >
+                  移除
+                </button>
+              </div>
+            ))
+          )}
+        </FilterSection>
+      </div>
+    </aside>
+  );
+}
@@ -0,0 +1,29 @@
+import type { TooltipState } from "./graphTypes";
+import { getNodeTitle, NODE_KIND_META } from "./graphUtils";
+
+interface GraphTooltipProps {
+  tooltip: TooltipState | null;
+}
+
+export function GraphTooltip({ tooltip }: GraphTooltipProps) {
+  if (!tooltip) return null;
+  const meta = NODE_KIND_META[tooltip.kind];
+  // Keep the tooltip inside the viewport.
+  const left = Math.min(tooltip.x + 14, window.innerWidth - 336);
+  const top = Math.min(tooltip.y + 14, window.innerHeight - 120);
+
+  return (
+    <div className="kg-tooltip" style={{ left, top }}>
+      <div className="kg-tooltip-title">{getNodeTitle(tooltip.node)}</div>
+      <div className="kg-tooltip-desc">
+        <span className="kg-legend-item">
+          <span className="kg-legend-dot" style={{ background: meta.color }} />
+          {meta.label}
+        </span>
+        {tooltip.node.category ? <span>· {tooltip.node.category}</span> : null}
+        <span>· 度数 {tooltip.degree}</span>
+      </div>
+      <div className="kg-tooltip-hint">单击查看详情 · 双击聚焦 · 拖拽固定位置</div>
+    </div>
+  );
+}
@@ -0,0 +1,111 @@
+/** Shared types for the knowledge-graph workbench. */
+
+/** Raw node as returned by `GET /api/knowledge/graph` (plus compat fields). */
+export interface GraphNode {
+  id: string;
+  /** "note" | "entity" on the current backend; kept loose for compat. */
+  type?: string;
+  label?: string;
+  title?: string;
+  name?: string;
+  /** note: source_type (thread/file/manual/...); entity: entity_type. */
+  category?: string | null;
+}
+
+/** Raw edge as returned by `GET /api/knowledge/graph` (plus compat fields). */
+export interface GraphEdge {
+  id?: string;
+  source: string;
+  target: string;
+  /** Relation type: "links" | "related" | LLM relation_type. */
+  label?: string;
+  type?: string;
+  relation?: string;
+  weight?: number;
+  directed?: boolean;
+}
+
+export interface GraphData {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+}
+
+/** Normalized visual bucket for a node. */
+export type NodeKind =
+  | "document"
+  | "concept"
+  | "person"
+  | "org"
+  | "location"
+  | "event"
+  | "tag"
+  | "other";
+
+export type LayoutType = "force" | "circular";
+
+/** Graph display mode: full graph vs. click-to-expand exploration. */
+export type GraphMode = "full" | "explore";
+
+/** One incremental expansion step in explore mode (for undo / rebuild). */
+export interface ExploreStep {
+  nodeId: string;
+  depth: number;
+  addedNodeIds: string[];
+  addedEdgeIds: string[];
+  timestamp: number;
+}
+
+/** Style metadata of an edge label. */
+export interface EdgeInfo {
+  color: string;
+  zh: string;
+  dashed: boolean;
+}
+
+/** A node inside the force simulation (world coordinates). */
+export interface SimNode {
+  id: string;
+  node: GraphNode;
+  kind: NodeKind;
+  degree: number;
+  radius: number;
+  color: string;
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  fx: number | null;
+  fy: number | null;
+}
+
+export interface SimEdge {
+  id: string;
+  source: SimNode;
+  target: SimNode;
+  label: string;
+  info: EdgeInfo;
+  weight: number;
+  distance: number;
+}
+
+export interface Transform {
+  x: number;
+  y: number;
+  k: number;
+}
+
+export interface TooltipState {
+  /** Viewport (client) coordinates. */
+  x: number;
+  y: number;
+  node: GraphNode;
+  kind: NodeKind;
+  degree: number;
+}
+
+export interface GraphStats {
+  nodes: number;
+  edges: number;
+  avgDegree: number;
+  largestComponent: number;
+}
@@ -0,0 +1,434 @@
+import type {
+  EdgeInfo,
+  GraphEdge,
+  GraphNode,
+  GraphStats,
+  NodeKind,
+  SimEdge,
+  SimNode,
+} from "./graphTypes";
+
+// ---------------------------------------------------------------------------
+// Node helpers
+// ---------------------------------------------------------------------------
+
+export const getNodeTitle = (node: GraphNode): string =>
+  node.title || node.label || node.name || node.id;
+
+const KIND_PATTERNS: Array<[NodeKind, RegExp]> = [
+  ["person", /^(person|people|human|人物|人名|人员)$/i],
+  ["org", /^(org|organization|organisation|company|institution|party|组织|机构|公司|团体|政党|国会)$/i],
+  ["location", /^(location|place|country|city|region|gpe|地点|地区|国家|城市|地理位置)$/i],
+  ["event", /^(event|事件|活动|会议|战争|选举|讲话)$/i],
+  ["tag", /^(tag|keyword|标签|关键词)$/i],
+  ["concept", /^(concept|topic|term|technology|theory|product|project|主题|概念|术语|技术|理论|产品|项目|政策)$/i],
+];
+
+/** Map a raw node (note source_type / entity entity_type) to a visual bucket. */
+export function getNodeKind(node: GraphNode): NodeKind {
+  const type = (node.type || "").toLowerCase();
+  if (type === "note" || type === "document" || type === "file") return "document";
+  const category = (node.category || "").trim();
+  if (category) {
+    for (const [kind, re] of KIND_PATTERNS) {
+      if (re.test(category)) return kind;
+    }
+  }
+  // Unmatched LLM entity types still read better as "concept" than as a grey blob.
+  if (type === "entity") return category ? "other" : "concept";
+  return "other";
+}
+
+export const NODE_KIND_META: Record<NodeKind, { label: string; color: string }> = {
+  document: { label: "文档", color: "#38bdf8" },
+  concept: { label: "主题", color: "#a78bfa" },
+  person: { label: "人物", color: "#fbbf24" },
+  org: { label: "组织", color: "#2dd4bf" },
+  location: { label: "地点", color: "#34d399" },
+  event: { label: "事件", color: "#fb7185" },
+  tag: { label: "标签", color: "#a3e635" },
+  other: { label: "其他", color: "#94a3b8" },
+};
+
+/** Stable ordering for filters / legend. */
+export const NODE_KIND_ORDER: NodeKind[] = [
+  "document",
+  "concept",
+  "person",
+  "org",
+  "location",
+  "event",
+  "tag",
+  "other",
+];
+
+export const getNodeRadius = (degree: number): number =>
+  Math.min(30, 9 + Math.sqrt(Math.max(degree, 0)) * 4);
+
+export function truncateLabel(text: string, max = 14): string {
+  return text.length > max ? `${text.slice(0, max)}…` : text;
+}
+
+// ---------------------------------------------------------------------------
+// Edge helpers
+// ---------------------------------------------------------------------------
+
+export const getEdgeLabel = (edge: GraphEdge): string =>
+  edge.label || edge.type || edge.relation || "related";
+
+/** Stable edge identity shared by explore-mode visibility sets and the canvas. */
+export const getEdgeId = (edge: GraphEdge): string =>
+  edge.id ?? `${edge.source}->${edge.target}:${getEdgeLabel(edge)}`;
+
+const KNOWN_EDGE_INFO: Record<string, EdgeInfo> = {
+  related: { color: "#94a3b8", zh: "相关", dashed: false },
+  links: { color: "#a78bfa", zh: "引用", dashed: true },
+  references: { color: "#a78bfa", zh: "引用", dashed: true },
+  contains: { color: "#34d399", zh: "包含", dashed: false },
+  belongs_to: { color: "#2dd4bf", zh: "属于", dashed: false },
+  similar: { color: "#fbbf24", zh: "相似", dashed: true },
+  mentions: { color: "#38bdf8", zh: "提及", dashed: false },
+};
+
+const EDGE_PALETTE = [
+  "#38bdf8",
+  "#a78bfa",
+  "#34d399",
+  "#fbbf24",
+  "#fb7185",
+  "#2dd4bf",
+  "#fb923c",
+  "#e879f9",
+];
+
+function hashString(text: string): number {
+  let h = 0;
+  for (let i = 0; i < text.length; i++) {
+    h = (h * 31 + text.charCodeAt(i)) | 0;
+  }
+  return Math.abs(h);
+}
+
+/** Color / display name / line style of an edge label (stable for unknown labels). */
+export function getEdgeInfo(label: string): EdgeInfo {
+  const known = KNOWN_EDGE_INFO[label.toLowerCase()];
+  if (known) return known;
+  return {
+    color: EDGE_PALETTE[hashString(label) % EDGE_PALETTE.length],
+    zh: label,
+    dashed: false,
+  };
+}
+
+export function getLinkDistance(label: string): number {
+  switch (label.toLowerCase()) {
+    case "contains":
+      return 100;
+    case "links":
+    case "references":
+      return 130;
+    case "similar":
+      return 170;
+    default:
+      return 145;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Graph statistics
+// ---------------------------------------------------------------------------
+
+export function computeDegrees(
+  nodes: GraphNode[],
+  edges: GraphEdge[],
+): Map<string, number> {
+  const degrees = new Map<string, number>();
+  for (const n of nodes) degrees.set(n.id, 0);
+  for (const e of edges) {
+    if (degrees.has(e.source)) degrees.set(e.source, (degrees.get(e.source) ?? 0) + 1);
+    if (degrees.has(e.target)) degrees.set(e.target, (degrees.get(e.target) ?? 0) + 1);
+  }
+  return degrees;
+}
+
+export function computeGraphStats(
+  nodes: GraphNode[],
+  edges: GraphEdge[],
+): GraphStats {
+  const adjacency = new Map<string, string[]>();
+  for (const n of nodes) adjacency.set(n.id, []);
+  let validEdges = 0;
+  for (const e of edges) {
+    if (!adjacency.has(e.source) || !adjacency.has(e.target)) continue;
+    validEdges += 1;
+    adjacency.get(e.source)!.push(e.target);
+    adjacency.get(e.target)!.push(e.source);
+  }
+  // Largest connected component via BFS.
+  const visited = new Set<string>();
+  let largest = 0;
+  for (const n of nodes) {
+    if (visited.has(n.id)) continue;
+    let size = 0;
+    const queue = [n.id];
+    visited.add(n.id);
+    while (queue.length) {
+      const cur = queue.pop()!;
+      size += 1;
+      for (const next of adjacency.get(cur) ?? []) {
+        if (!visited.has(next)) {
+          visited.add(next);
+          queue.push(next);
+        }
+      }
+    }
+    largest = Math.max(largest, size);
+  }
+  return {
+    nodes: nodes.length,
+    edges: validEdges,
+    avgDegree: nodes.length ? (validEdges * 2) / nodes.length : 0,
+    largestComponent: largest,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Layouts
+// ---------------------------------------------------------------------------
+
+const GOLDEN_ANGLE = 2.3999632297286533;
+
+/** Phyllotaxis seeding around the origin — hubs (high degree) near the center. */
+export function seedPositions(nodes: SimNode[]): void {
+  const sorted = [...nodes].sort((a, b) => b.degree - a.degree);
+  sorted.forEach((n, i) => {
+    const r = 22 * Math.sqrt(i + 0.5);
+    const angle = i * GOLDEN_ANGLE;
+    n.x = r * Math.cos(angle);
+    n.y = r * Math.sin(angle);
+    n.vx = 0;
+    n.vy = 0;
+    n.fx = null;
+    n.fy = null;
+  });
+}
+
+/** Static circular layout, grouped by kind then degree. */
+export function applyCircularLayout(nodes: SimNode[]): void {
+  const sorted = [...nodes].sort((a, b) => {
+    const ka = NODE_KIND_ORDER.indexOf(a.kind);
+    const kb = NODE_KIND_ORDER.indexOf(b.kind);
+    return ka !== kb ? ka - kb : b.degree - a.degree;
+  });
+  const radius = Math.max(180, (sorted.length * 56) / (2 * Math.PI));
+  sorted.forEach((n, i) => {
+    const angle = (i / sorted.length) * Math.PI * 2 - Math.PI / 2;
+    n.x = radius * Math.cos(angle);
+    n.y = radius * Math.sin(angle);
+    n.vx = 0;
+    n.vy = 0;
+    n.fx = null;
+    n.fy = null;
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Force simulation (d3-force-like, dependency-free, fine for <500 nodes)
+// ---------------------------------------------------------------------------
+
+export class ForceSimulation {
+  alpha = 1;
+  readonly alphaMin = 0.004;
+  private readonly alphaDecay: number;
+  private readonly velocityDecay = 0.38;
+  private readonly chargeStrength: number;
+  private readonly chargeCutoff: number;
+  private readonly chargeCutoff2: number;
+  /** Hard cap on per-tick movement so dense graphs can't oscillate or fly off. */
+  private readonly maxSpeed = 30;
+
+  constructor(
+    public nodes: SimNode[],
+    public edges: SimEdge[],
+  ) {
+    // Scale forces down and cool faster as the graph grows — with the
+    // small-graph constants a few hundred nodes keep shoving each other
+    // around for minutes and the layout never settles.
+    const n = nodes.length;
+    if (n > 600) {
+      this.chargeStrength = -160;
+      this.chargeCutoff = 260;
+      this.alphaDecay = 0.05;
+    } else if (n > 300) {
+      this.chargeStrength = -240;
+      this.chargeCutoff = 340;
+      this.alphaDecay = 0.038;
+    } else if (n > 150) {
+      this.chargeStrength = -320;
+      this.chargeCutoff = 440;
+      this.alphaDecay = 0.03;
+    } else {
+      this.chargeStrength = -420;
+      this.chargeCutoff = 600;
+      this.alphaDecay = 0.0228;
+    }
+    this.chargeCutoff2 = this.chargeCutoff * this.chargeCutoff;
+  }
+
+  reheat(alpha = 0.9): void {
+    this.alpha = Math.max(this.alpha, alpha);
+  }
+
+  /** Advance one step; returns false when the layout has cooled down. */
+  tick(): boolean {
+    if (this.alpha < this.alphaMin) return false;
+    this.alpha += (0 - this.alpha) * this.alphaDecay;
+    const a = this.alpha;
+    const { nodes, edges } = this;
+
+    // Link spring force.
+    for (const e of edges) {
+      const s = e.source;
+      const t = e.target;
+      let dx = t.x - s.x;
+      let dy = t.y - s.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1e-3;
+      const f = ((dist - e.distance) / dist) * 0.45 * a;
+      dx *= f;
+      dy *= f;
+      t.vx -= dx * 0.5;
+      t.vy -= dy * 0.5;
+      s.vx += dx * 0.5;
+      s.vy += dy * 0.5;
+    }
+
+    // Repulsion + collision over nearby pairs only (uniform grid).
+    this.applyPairForces(a);
+
+    // Gentle pull toward the origin keeps disconnected clusters on screen.
+    for (const n of nodes) {
+      n.vx += (0 - n.x) * 0.05 * a;
+      n.vy += (0 - n.y) * 0.05 * a;
+    }
+
+    // Integrate velocities.
+    for (let i = 0; i < nodes.length; i++) {
+      const n = nodes[i];
+      if (n.fx != null && n.fy != null) {
+        n.x = n.fx;
+        n.y = n.fy;
+        n.vx = 0;
+        n.vy = 0;
+      } else {
+        n.vx *= 1 - this.velocityDecay;
+        n.vy *= 1 - this.velocityDecay;
+        const speed = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
+        if (speed > this.maxSpeed) {
+          const s = this.maxSpeed / speed;
+          n.vx *= s;
+          n.vy *= s;
+        }
+        n.x += n.vx;
+        n.y += n.vy;
+      }
+      if (!Number.isFinite(n.x) || !Number.isFinite(n.y)) {
+        // A NaN/Infinity coordinate would blank the whole canvas (the
+        // bounding box and fit transform become NaN); park the node instead.
+        const r = 40 + 18 * Math.sqrt(i + 1);
+        n.x = r * Math.cos(i * GOLDEN_ANGLE);
+        n.y = r * Math.sin(i * GOLDEN_ANGLE);
+        n.vx = 0;
+        n.vy = 0;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Many-body repulsion + collision resolution, restricted to pairs within
+   * one grid cell (cell size = charge cutoff). Two nodes farther apart than
+   * the cutoff never interact, so binning by cell keeps the scan close to
+   * O(n) for spread-out layouts instead of O(n²) over all pairs.
+   */
+  private applyPairForces(a: number): void {
+    const cellSize = this.chargeCutoff;
+    const grid = new Map<string, { cx: number; cy: number; items: SimNode[] }>();
+    for (const n of this.nodes) {
+      const cx = Math.floor(n.x / cellSize);
+      const cy = Math.floor(n.y / cellSize);
+      const key = `${cx},${cy}`;
+      let bucket = grid.get(key);
+      if (!bucket) grid.set(key, (bucket = { cx, cy, items: [] }));
+      bucket.items.push(n);
+    }
+    // Half of the 8-neighborhood so every cell pair is visited exactly once.
+    const offsets = [
+      [0, 0],
+      [1, 0],
+      [0, 1],
+      [1, 1],
+      [1, -1],
+    ] as const;
+    for (const bucket of grid.values()) {
+      for (const [ox, oy] of offsets) {
+        const other =
+          ox === 0 && oy === 0
+            ? bucket
+            : grid.get(`${bucket.cx + ox},${bucket.cy + oy}`);
+        if (!other) continue;
+        const left = bucket.items;
+        const right = other.items;
+        if (other === bucket) {
+          for (let i = 0; i < left.length; i++) {
+            for (let j = i + 1; j < left.length; j++) {
+              this.pairForce(left[i], left[j], i, j, a);
+            }
+          }
+        } else {
+          for (let i = 0; i < left.length; i++) {
+            for (let j = 0; j < right.length; j++) {
+              this.pairForce(left[i], right[j], i, j, a);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private pairForce(ni: SimNode, nj: SimNode, i: number, j: number, a: number): void {
+    let dx = nj.x - ni.x;
+    let dy = nj.y - ni.y;
+    let d2 = dx * dx + dy * dy;
+    if (d2 > this.chargeCutoff2) return;
+    if (d2 < 1) {
+      // Deterministic nudge for coincident nodes.
+      dx = ((i % 3) - 1) * 0.5 || 0.5;
+      dy = ((j % 3) - 1) * 0.5 || -0.5;
+      d2 = dx * dx + dy * dy;
+    }
+    const d = Math.sqrt(d2);
+    const f = (this.chargeStrength * a) / d2;
+    const fx = (dx / d) * f;
+    const fy = (dy / d) * f;
+    ni.vx += fx;
+    ni.vy += fy;
+    nj.vx -= fx;
+    nj.vy -= fy;
+
+    // Positional collision resolution (prevents node overlap).
+    const minDist = ni.radius + nj.radius + 8;
+    if (d < minDist) {
+      const push = ((minDist - d) / d) * 0.5;
+      const px = dx * push;
+      const py = dy * push;
+      if (ni.fx == null) {
+        ni.x -= px;
+        ni.y -= py;
+      }
+      if (nj.fx == null) {
+        nj.x += px;
+        nj.y += py;
+      }
+    }
+  }
+}
@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+
+export function Footer() {
+  const year = useMemo(() => new Date().getFullYear(), []);
+  return (
+    <footer className="container-md mx-auto mt-32 flex flex-col items-center justify-center">
+      <hr className="from-border/0 to-border/0 m-0 h-px w-full border-none bg-linear-to-r via-white/20" />
+      <div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
+        <p className="text-center font-serif text-lg md:text-xl">
+          &quot;Originated from Open Source, give back to Open Source.&quot;
+        </p>
+      </div>
+      <div className="text-muted-foreground container mb-8 flex flex-col items-center justify-center text-xs">
+        <p>Licensed under MIT License</p>
+        <p>&copy; {year} CM 助手</p>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+
+import type { Locale } from "@/core/i18n/locale";
+import { useI18n } from "@/core/i18n/hooks";
+import { cn } from "@/lib/utils";
+
+export type HeaderProps = {
+  className?: string;
+  homeURL?: string;
+  locale?: Locale;
+};
+
+export function Header({ className, homeURL }: HeaderProps) {
+  const isExternalHome = !homeURL;
+  const { locale: resolvedLocale, t } = useI18n();
+  const lang = resolvedLocale.substring(0, 2);
+  return (
+    <header
+      className={cn(
+        "container-md fixed top-0 right-0 left-0 z-20 mx-auto flex h-16 items-center justify-between backdrop-blur-xs",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-6">
+        <a
+          href={homeURL ?? "/"}
+          target={isExternalHome ? "_blank" : "_self"}
+          rel={isExternalHome ? "noopener noreferrer" : undefined}
+        >
+          <h1 className="font-serif text-xl">CM 助手</h1>
+        </a>
+      </div>
+      <nav className="mr-8 ml-auto flex items-center gap-8 text-sm font-medium">
+        <Link
+          href={`/${lang}/docs`}
+          className="text-secondary-foreground hover:text-foreground transition-colors"
+        >
+          {t.home.docs}
+        </Link>
+        <Link
+          href="/blog/posts"
+          className="text-secondary-foreground hover:text-foreground transition-colors"
+        >
+          {t.home.blog}
+        </Link>
+      </nav>
+      <hr className="from-border/0 via-border/70 to-border/0 absolute top-16 right-0 left-0 z-10 m-0 h-px w-full border-none bg-linear-to-r" />
+    </header>
+  );
+}
@@ -0,0 +1,141 @@
+"use client";
+
+import { ChevronRightIcon } from "lucide-react";
+import Link from "next/link";
+
+import deerMaskUrl from "@/assets/deer.svg";
+import { Button } from "@/components/ui/button";
+import { FlickeringGrid } from "@/components/ui/flickering-grid";
+import Galaxy from "@/components/ui/galaxy";
+import { WordRotate } from "@/components/ui/word-rotate";
+import { env } from "@/env";
+import { cn } from "@/lib/utils";
+
+export function Hero({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "flex size-full flex-col items-center justify-center",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 z-0 bg-black/40">
+        <Galaxy
+          mouseRepulsion={false}
+          starSpeed={0.2}
+          density={0.6}
+          glowIntensity={0.35}
+          twinkleIntensity={0.3}
+          speed={0.5}
+        />
+      </div>
+      <FlickeringGrid
+        className="absolute inset-0 z-0 translate-y-8 mask-size-[100vw] mask-center mask-no-repeat md:mask-size-[72vh]"
+        style={{
+          WebkitMaskImage: `url("${deerMaskUrl}")`,
+          maskImage: `url("${deerMaskUrl}")`,
+        }}
+        squareSize={4}
+        gridGap={4}
+        color={"white"}
+        maxOpacity={0.3}
+        flickerChance={0.25}
+      />
+      <div className="container-md relative z-10 mx-auto flex h-screen flex-col items-center justify-center">
+        <h1 className="flex items-center gap-2 text-4xl font-bold md:text-6xl">
+          <WordRotate
+            words={[
+              "Deep Research",
+              "Collect Data",
+              "Analyze Data",
+              "Generate Webpages",
+              "Vibe Coding",
+              "Generate Slides",
+              "Generate Images",
+              "Generate Podcasts",
+              "Generate Videos",
+              "Generate Songs",
+              "Organize Emails",
+              "Do Anything",
+              "Learn Anything",
+            ]}
+          />{" "}
+          <div>CM 助手</div>
+        </h1>
+        {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY && (
+          <a
+            href="https://byteplus.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <div className="mt-4 flex size-fit items-center rounded-lg border border-white px-3 text-center text-shadow-sm">
+              <span>In partnership with</span>&nbsp;
+              <BytePlusIcon className="h-4" />
+            </div>
+          </a>
+        )}
+        <p className="text-muted-foreground mt-8 scale-105 text-center text-2xl text-shadow-sm">
+          An open-source SuperAgent harness that researches, codes, and creates.
+          With
+          <br />
+          the help of sandboxes, memories, tools, skills and subagents, it
+          handles
+          <br />
+          different levels of tasks that could take minutes to hours.
+        </p>
+        <Link href="/workspace">
+          <Button className="size-lg mt-8 scale-108" size="lg">
+            <span className="text-md">Get Started with 2.0</span>
+            <ChevronRightIcon className="size-4" />
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function BytePlusIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={80}
+      height={24}
+      viewBox="0 0 120 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M30.8027 3.64648H37.9333C38.8894 3.64648 39.7259 3.81911 40.4297 4.16435C41.1334 4.50959 41.6911 4.98761 42.0762 5.59843C42.4613 6.20924 42.6472 6.88644 42.6472 7.6566C42.6472 8.34708 42.4746 8.99773 42.1426 9.58198C41.7973 10.1795 41.3326 10.631 40.7483 10.9629C41.5583 11.3082 42.1691 11.8128 42.5808 12.49C42.9924 13.1672 43.1916 13.9108 43.1916 14.734C43.1916 15.5175 42.9924 16.208 42.5941 16.8188C42.1957 17.4296 41.638 17.9209 40.921 18.2661C40.2039 18.6246 39.3408 18.7973 38.3449 18.7973H30.8027V3.64648ZM37.8005 9.99361C38.4113 9.99361 38.9026 9.82099 39.2877 9.47575C39.6728 9.13051 39.8587 8.69232 39.8587 8.1479C39.8587 7.5902 39.6728 7.12546 39.301 6.76694C38.9292 6.40842 38.4379 6.22252 37.8138 6.22252H33.5248V9.99361H37.8005ZM38.1458 16.2345C38.7831 16.2345 39.301 16.0619 39.6993 15.7034C40.0977 15.3449 40.2969 14.8934 40.2969 14.349C40.2969 13.9772 40.2039 13.6319 40.018 13.3398C39.8321 13.0477 39.5798 12.8087 39.2479 12.636C38.9292 12.4634 38.5574 12.3705 38.1325 12.3705H33.5381V16.2212H38.1458V16.2345Z"
+        fill="currentColor"
+      />
+      <path
+        d="M49.2392 18.2385L44.127 7.3236H46.7295L50.567 15.4899L54.0062 7.3236H57.6445V5.09281L60.2073 4.33594V7.3236H63.0887V9.75357H60.2073V15.304C60.2073 15.7023 60.3135 16.021 60.5259 16.2202C60.7384 16.4327 61.0438 16.5655 61.4422 16.6318C61.8405 16.6982 62.3982 16.7115 63.0887 16.6584V18.9556C61.7741 19.1016 60.7251 19.0618 59.9417 18.8626C59.1582 18.6502 58.574 18.2518 58.2022 17.6676C57.8304 17.0833 57.6445 16.2866 57.6445 15.2907V9.75357H55.5863L49.4782 24.0014H46.7959L49.2392 18.2385Z"
+        fill="currentColor"
+      />
+      <path
+        d="M70.2461 19.1147C69.1572 19.1147 68.1746 18.8491 67.2849 18.318C66.3953 17.7869 65.6782 17.0565 65.1604 16.1138C64.6425 15.1843 64.377 14.1485 64.377 13.0066C64.377 11.8912 64.6425 10.882 65.1737 9.97908C65.7048 9.06286 66.4218 8.34582 67.3248 7.82796C68.2277 7.29682 69.2236 7.03125 70.2992 7.03125C71.6536 7.03125 72.7822 7.33666 73.6719 7.93419C74.5616 8.53172 75.2122 9.36827 75.584 10.4438C75.9691 11.5194 76.0753 12.7676 75.916 14.1751L67.0061 14.1884C67.1389 14.7062 67.3779 15.1577 67.7364 15.5295C68.0949 15.9013 68.5066 16.1802 68.958 16.366C69.4095 16.5519 69.8477 16.6316 70.2461 16.6316C70.6975 16.6316 71.1092 16.5918 71.5075 16.4988C71.8926 16.4059 72.2378 16.2731 72.5432 16.0739C72.8486 15.8747 73.1142 15.649 73.3665 15.3967L73.4727 15.2639L75.5043 16.6051C74.9998 17.4416 74.296 18.0657 73.4063 18.4773C72.5167 18.9022 71.4677 19.1147 70.2461 19.1147ZM73.486 11.9576C73.3665 11.4663 73.1673 11.0281 72.8619 10.6563C72.5565 10.2845 72.1847 9.99236 71.7332 9.79318C71.2818 9.594 70.8037 9.48778 70.2992 9.48778C69.8211 9.48778 69.3564 9.594 68.8916 9.79318C68.4269 9.99236 68.0285 10.2845 67.6833 10.6563C67.3381 11.0281 67.1256 11.4663 67.0459 11.9576H73.486Z"
+        fill="currentColor"
+      />
+      <path
+        d="M78 3.64648H84.3206C86.0733 3.64648 87.4278 4.0714 88.3838 4.92122C89.3399 5.77105 89.8179 6.93956 89.8179 8.42675C89.8179 9.39608 89.6054 10.2459 89.1805 10.9762C88.7556 11.7065 88.1315 12.2642 87.3215 12.6493C86.5115 13.0344 85.5156 13.2336 84.3471 13.2336H80.7354V18.7973H78V3.64648ZM84.3737 10.7505C84.9314 10.7505 85.4227 10.6575 85.8078 10.4849C86.2061 10.3123 86.5115 10.0467 86.724 9.70149C86.9364 9.35625 87.0427 8.93133 87.0427 8.42675C87.0427 7.6566 86.8169 7.08562 86.3655 6.71382C85.914 6.34202 85.2501 6.15612 84.387 6.15612H80.7487V10.7505H84.3737Z"
+        fill="currentColor"
+      />
+      <path
+        d="M92.168 3.36719H94.8104V18.8101H92.168V3.36719Z"
+        fill="currentColor"
+      />
+      <path
+        d="M101.982 19.1155C101.158 19.1155 100.415 18.9164 99.764 18.5313C99.1134 18.1462 98.5955 17.6018 98.2237 16.9113C97.8519 16.2208 97.666 15.4507 97.666 14.6008V7.32422H100.282V13.6979C100.282 14.2822 100.375 14.7735 100.574 15.1984C100.773 15.6233 101.052 15.9553 101.424 16.1943C101.796 16.4333 102.247 16.5528 102.765 16.5528C103.256 16.5528 103.708 16.4333 104.106 16.181C104.504 15.942 104.836 15.5835 105.075 15.1187C105.314 14.654 105.434 14.1228 105.434 13.512V7.32422H108.076V18.8101H105.527V17.3628C105.155 17.947 104.651 18.3719 104.04 18.6774C103.442 18.9562 102.752 19.1155 101.982 19.1155Z"
+        fill="currentColor"
+      />
+      <path
+        d="M115.287 19.1163C114.424 19.1163 113.535 18.9304 112.645 18.5586C111.755 18.1868 111.012 17.6424 110.414 16.9386L112.1 15.5045C112.525 15.8763 112.95 16.1817 113.375 16.4075C113.813 16.6332 114.358 16.766 115.048 16.8058C115.752 16.8457 116.35 16.766 116.828 16.5535C117.306 16.3411 117.558 16.0357 117.584 15.6107C117.598 15.3186 117.518 15.0929 117.345 14.9335C117.173 14.7742 116.907 14.6281 116.535 14.5219C116.164 14.4157 115.593 14.2962 114.809 14.1634L114.265 14.0572C113.123 13.8713 112.246 13.5127 111.622 12.9949C110.998 12.477 110.693 11.7334 110.693 10.7906C110.693 10.0072 110.905 9.34329 111.317 8.77231C111.742 8.21461 112.286 7.7897 112.99 7.51085C113.681 7.232 114.451 7.08594 115.314 7.08594C116.19 7.08594 117.053 7.24528 117.863 7.56396C118.687 7.88265 119.364 8.40051 119.882 9.10427L118.209 10.5118C117.903 10.1267 117.505 9.83459 117 9.63541C116.496 9.43624 115.951 9.34329 115.354 9.34329C114.969 9.34329 114.597 9.38312 114.252 9.47607C113.906 9.56902 113.614 9.70181 113.388 9.90098C113.163 10.1002 113.043 10.3392 113.043 10.6446C113.043 10.9102 113.123 11.1093 113.269 11.2554C113.415 11.4015 113.694 11.5342 114.079 11.6405C114.464 11.7467 115.128 11.8928 116.044 12.0654H116.084C117.226 12.2778 118.169 12.6762 118.899 13.2339C119.629 13.7916 120.001 14.5617 120.001 15.5045C120.001 16.2348 119.775 16.8855 119.324 17.4299C118.872 17.9743 118.288 18.3992 117.558 18.6914C116.841 18.9702 116.084 19.1163 115.287 19.1163Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.7392 9.80759C14.5931 9.92709 14.3806 9.83414 14.3806 9.63497V8.58596V2.23883C14.3806 2.05293 14.1549 1.9467 14.0221 2.06621L5.17862 9.56857C5.03256 9.68808 4.8201 9.59513 4.8201 9.39595V4.27044C4.8201 4.12438 4.70059 4.00487 4.55453 4.00487H0.26557C0.119507 4.00487 0 4.12438 0 4.27044V20.3242C0 20.5101 0.225735 20.6163 0.35852 20.4968L9.18873 12.9944C9.33479 12.8749 9.54725 12.9679 9.54725 13.1671V20.5765C9.54725 20.7624 9.77299 20.8686 9.90577 20.7491L18.736 13.2467C18.882 13.1272 19.0945 13.2202 19.0945 13.4193V18.5449C19.0945 18.6909 19.214 18.8104 19.3601 18.8104H23.649C23.7951 18.8104 23.9146 18.6909 23.9146 18.5449V2.47784C23.9146 2.29194 23.6889 2.18572 23.5561 2.30522L14.7392 9.80759Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,163 @@
+import Link from "next/link";
+
+import { getBlogRoute, normalizeTagSlug, type BlogPost } from "@/core/blog";
+import { cn } from "@/lib/utils";
+
+type PostListProps = {
+  description?: string;
+  posts: BlogPost[];
+  title: string;
+};
+
+type PostMetaProps = {
+  currentLang?: string;
+  date?: string | null;
+  languages?: string[];
+  pathname?: string;
+};
+
+function formatDate(date?: string): string | null {
+  if (!date) {
+    return null;
+  }
+
+  const value = new Date(date);
+  if (Number.isNaN(value.getTime())) {
+    return date;
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  }).format(value);
+}
+
+export function PostMeta({
+  currentLang,
+  date,
+  languages,
+  pathname,
+}: PostMetaProps) {
+  const formattedDate = formatDate(date ?? undefined);
+  const availableLanguages = Array.isArray(languages)
+    ? languages.filter((lang): lang is string => typeof lang === "string")
+    : [];
+
+  if (!formattedDate && availableLanguages.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-8 text-sm">
+      {formattedDate ? (
+        <p className="text-muted-foreground">{formattedDate}</p>
+      ) : null}
+
+      {pathname && availableLanguages.length > 1 ? (
+        <div className="flex flex-wrap items-center gap-3">
+          <span className="text-secondary-foreground text-sm">Language:</span>
+          {availableLanguages.map((lang) => {
+            const isActive = lang === currentLang;
+            return (
+              <Link
+                key={lang}
+                href={`${pathname}?lang=${lang}`}
+                className={
+                  isActive
+                    ? "text-foreground text-sm font-medium"
+                    : "text-muted-foreground hover:text-foreground text-sm transition-colors"
+                }
+              >
+                {lang.toUpperCase()}
+              </Link>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function PostTags({
+  tags,
+  className,
+}: {
+  tags?: unknown;
+  className?: string;
+}) {
+  if (!Array.isArray(tags)) {
+    return null;
+  }
+
+  const validTags = tags.filter(
+    (tag): tag is string => typeof tag === "string" && tag.length > 0,
+  );
+
+  if (validTags.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-3", className)}>
+      <span className="text-secondary-foreground text-sm">Tags:</span>
+      {validTags.map((tag) => (
+        <Link
+          key={tag}
+          href={`/blog/tags/${normalizeTagSlug(tag)}`}
+          className="border-border text-secondary-foreground hover:text-foreground rounded-xl border px-2 py-1 text-sm transition-colors"
+        >
+          {tag}
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export function PostList({ description, posts, title }: PostListProps) {
+  return (
+    <div className="mx-auto flex w-full max-w-5xl flex-col gap-12 px-6">
+      <header className="space-y-4">
+        <h2 className="text-foreground text-4xl font-semibold tracking-tight">
+          {title}
+        </h2>
+        {description ? (
+          <p className="text-secondary-foreground">{description}</p>
+        ) : null}
+      </header>
+
+      <div className="space-y-12">
+        {posts.map((post) => {
+          return (
+            <article
+              key={post.slug.join("/")}
+              className="border-border space-y-5 border-b pb-12 last:border-b-0 last:pb-0"
+            >
+              <div className="space-y-3">
+                <PostMeta
+                  currentLang={post.lang}
+                  date={post.metadata.date}
+                  languages={post.languages}
+                  pathname={getBlogRoute(post.slug)}
+                />
+                <Link
+                  href={getBlogRoute(post.slug)}
+                  className="text-foreground hover:text-primary block text-2xl font-semibold tracking-tight transition-colors"
+                >
+                  {post.title}
+                </Link>
+              </div>
+
+              {post.metadata.description ? (
+                <p className="text-secondary-foreground leading-10">
+                  {post.metadata.description}
+                </p>
+              ) : null}
+              <PostTags tags={post.metadata.tags} />
+            </article>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,710 @@
+"use client";
+
+import {
+  Folder,
+  FileText,
+  Search,
+  Globe,
+  Check,
+  Sparkles,
+  Terminal,
+  Play,
+  Pause,
+} from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+import { useState, useEffect, useRef } from "react";
+
+import { Tooltip } from "@/components/workspace/tooltip";
+
+type AnimationPhase =
+  | "idle"
+  | "user-input"
+  | "scanning"
+  | "load-skill"
+  | "load-template"
+  | "researching"
+  | "load-frontend"
+  | "building"
+  | "load-deploy"
+  | "deploying"
+  | "done";
+
+interface FileItem {
+  name: string;
+  type: "folder" | "file";
+  indent: number;
+  highlight?: boolean;
+  active?: boolean;
+  done?: boolean;
+  dragging?: boolean;
+}
+
+const searchSteps = [
+  { type: "search", text: "mRNA lipid nanoparticle delivery 2024" },
+  { type: "fetch", text: "nature.com/articles/s41587-024..." },
+  { type: "search", text: "LNP ionizable lipids efficiency" },
+  { type: "fetch", text: "pubs.acs.org/doi/10.1021/..." },
+  { type: "search", text: "targeted mRNA tissue-specific" },
+];
+
+// Animation duration configuration - adjust the duration for each step here
+const ANIMATION_DELAYS = {
+  "user-input": 0, // User input phase duration (milliseconds)
+  scanning: 2000, // Scanning phase duration
+  "load-skill": 1500, // Load skill phase duration
+  "load-template": 1200, // Load template phase duration
+  researching: 800, // Researching phase duration
+  "load-frontend": 800, // Load frontend phase duration
+  building: 1200, // Building phase duration
+  "load-deploy": 2500, // Load deploy phase duration
+  deploying: 1200, // Deploying phase duration
+  done: 2500, // Done phase duration (final step)
+} as const;
+
+export default function ProgressiveSkillsAnimation() {
+  const [phase, setPhase] = useState<AnimationPhase>("idle");
+  const [searchIndex, setSearchIndex] = useState(0);
+  const [buildIndex, setBuildIndex] = useState(0);
+  const [, setChatMessages] = useState<React.ReactNode[]>([]);
+  const [, setShowWorkspace] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [hasPlayed, setHasPlayed] = useState(false);
+  const [hasAutoPlayed, setHasAutoPlayed] = useState(false);
+  const chatMessagesRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const timeoutsRef = useRef<NodeJS.Timeout[]>([]);
+
+  // Additional display duration after the final step (done) completes, used to show the final result
+  const FINAL_DISPLAY_DURATION = 3000; // milliseconds
+
+  // Play animation only when isPlaying is true
+  useEffect(() => {
+    if (!isPlaying) {
+      // Clear all timeouts when paused
+      timeoutsRef.current.forEach(clearTimeout);
+      timeoutsRef.current = [];
+      return;
+    }
+
+    const timeline = [
+      { phase: "user-input" as const, delay: ANIMATION_DELAYS["user-input"] },
+      { phase: "scanning" as const, delay: ANIMATION_DELAYS.scanning },
+      { phase: "load-skill" as const, delay: ANIMATION_DELAYS["load-skill"] },
+      {
+        phase: "load-template" as const,
+        delay: ANIMATION_DELAYS["load-template"],
+      },
+      { phase: "researching" as const, delay: ANIMATION_DELAYS.researching },
+      {
+        phase: "load-frontend" as const,
+        delay: ANIMATION_DELAYS["load-frontend"],
+      },
+      { phase: "building" as const, delay: ANIMATION_DELAYS.building },
+      { phase: "load-deploy" as const, delay: ANIMATION_DELAYS["load-deploy"] },
+      { phase: "deploying" as const, delay: ANIMATION_DELAYS.deploying },
+      { phase: "done" as const, delay: ANIMATION_DELAYS.done },
+    ];
+
+    let totalDelay = 0;
+    const timeouts: NodeJS.Timeout[] = [];
+
+    timeline.forEach(({ phase, delay }) => {
+      totalDelay += delay;
+      timeouts.push(setTimeout(() => setPhase(phase), totalDelay));
+    });
+
+    // Reset after animation completes
+    // Total duration for the final step = ANIMATION_DELAYS["done"] + FINAL_DISPLAY_DURATION
+    timeouts.push(
+      setTimeout(() => {
+        setPhase("idle");
+        setChatMessages([]);
+        setSearchIndex(0);
+        setBuildIndex(0);
+        setShowWorkspace(false);
+        setIsPlaying(false);
+      }, totalDelay + FINAL_DISPLAY_DURATION),
+    );
+
+    timeoutsRef.current = timeouts;
+
+    return () => {
+      timeouts.forEach(clearTimeout);
+      timeoutsRef.current = [];
+    };
+  }, [isPlaying]);
+
+  const handlePlay = () => {
+    setIsPlaying(true);
+    setHasPlayed(true);
+    setPhase("idle");
+    setChatMessages([]);
+    setSearchIndex(0);
+    setBuildIndex(0);
+    setShowWorkspace(false);
+  };
+
+  const handleTogglePlayPause = () => {
+    if (isPlaying) {
+      setIsPlaying(false);
+    } else {
+      // If animation hasn't started or is at idle, restart from beginning
+      if (phase === "idle") {
+        handlePlay();
+      } else {
+        // Resume from current phase
+        setIsPlaying(true);
+      }
+    }
+  };
+
+  // Auto-play when component enters viewport for the first time
+  useEffect(() => {
+    if (hasAutoPlayed || !containerRef.current) return;
+
+    const containerElement = containerRef.current;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !hasAutoPlayed && !isPlaying) {
+            setHasAutoPlayed(true);
+            // Small delay before auto-playing for better UX
+            setTimeout(() => {
+              setIsPlaying(true);
+              setHasPlayed(true);
+              setPhase("idle");
+              setChatMessages([]);
+              setSearchIndex(0);
+              setBuildIndex(0);
+              setShowWorkspace(false);
+            }, 300);
+          }
+        });
+      },
+      {
+        threshold: 0.3, // Trigger when 30% of the component is visible
+        rootMargin: "0px",
+      },
+    );
+
+    observer.observe(containerElement);
+
+    return () => {
+      if (containerElement) {
+        observer.unobserve(containerElement);
+      }
+    };
+  }, [hasAutoPlayed, isPlaying]);
+
+  // Handle search animation
+  useEffect(() => {
+    if (phase === "researching" && searchIndex < searchSteps.length) {
+      const timer = setTimeout(() => {
+        setSearchIndex((i) => i + 1);
+      }, 350);
+      return () => clearTimeout(timer);
+    }
+  }, [phase, searchIndex]);
+
+  // Handle build animation
+  useEffect(() => {
+    if (phase === "building" && buildIndex < 3) {
+      const timer = setTimeout(() => {
+        setBuildIndex((i) => i + 1);
+      }, 600);
+      return () => clearTimeout(timer);
+    }
+    if (phase === "building") {
+      setShowWorkspace(true);
+    }
+  }, [phase, buildIndex]);
+
+  // Auto scroll chat to bottom when messages change
+  useEffect(() => {
+    if (chatMessagesRef.current && phase !== "idle") {
+      chatMessagesRef.current.scrollTo({
+        top: chatMessagesRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  }, [phase, searchIndex, buildIndex]);
+
+  const getFileTree = (): FileItem[] => {
+    const base: FileItem[] = [
+      {
+        name: "deep-search",
+        type: "folder",
+        indent: 0,
+        highlight: phase === "scanning",
+        active: ["load-skill", "load-template", "researching"].includes(phase),
+        done: [
+          "researching",
+          "load-frontend",
+          "building",
+          "load-deploy",
+          "deploying",
+          "done",
+        ].includes(phase),
+      },
+      {
+        name: "SKILL.md",
+        type: "file",
+        indent: 1,
+        highlight: phase === "scanning",
+        dragging: phase === "load-skill",
+        done: [
+          "load-template",
+          "researching",
+          "load-frontend",
+          "building",
+          "load-deploy",
+          "deploying",
+          "done",
+        ].includes(phase),
+      },
+      {
+        name: "biotech.md",
+        type: "file",
+        indent: 1,
+        highlight: phase === "load-template",
+        dragging: phase === "load-template",
+        done: [
+          "researching",
+          "load-frontend",
+          "building",
+          "load-deploy",
+          "deploying",
+          "done",
+        ].includes(phase),
+      },
+      { name: "computer-science.md", type: "file", indent: 1 },
+      { name: "physics.md", type: "file", indent: 1 },
+      {
+        name: "frontend-design",
+        type: "folder",
+        indent: 0,
+        highlight: phase === "scanning",
+        active: ["load-frontend", "building"].includes(phase),
+        done: ["building", "load-deploy", "deploying", "done"].includes(phase),
+      },
+      {
+        name: "SKILL.md",
+        type: "file",
+        indent: 1,
+        highlight: phase === "scanning",
+        dragging: phase === "load-frontend",
+        done: ["building", "load-deploy", "deploying", "done"].includes(phase),
+      },
+      {
+        name: "deploy",
+        type: "folder",
+        indent: 0,
+        highlight: phase === "scanning",
+        active: ["load-deploy", "deploying"].includes(phase),
+        done: ["deploying", "done"].includes(phase),
+      },
+      {
+        name: "SKILL.md",
+        type: "file",
+        indent: 1,
+        highlight: phase === "scanning",
+        dragging: phase === "load-deploy",
+        done: ["deploying", "done"].includes(phase),
+      },
+      {
+        name: "scripts",
+        type: "folder",
+        indent: 1,
+        done: ["deploying", "done"].includes(phase),
+      },
+      {
+        name: "deploy.sh",
+        type: "file",
+        indent: 2,
+        done: ["deploying", "done"].includes(phase),
+      },
+    ];
+    return base;
+  };
+
+  const workspaceFiles = ["index.html", "index.css", "index.js"];
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative flex h-[calc(100vh-280px)] w-full items-center justify-center overflow-hidden p-8"
+    >
+      {/* Overlay and Play Button */}
+      <AnimatePresence>
+        {!isPlaying && !hasPlayed && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 z-50 flex items-center justify-center"
+          >
+            <motion.button
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.8, opacity: 0 }}
+              onClick={handlePlay}
+              className="group flex flex-col items-center gap-4 transition-transform hover:scale-105 active:scale-95"
+            >
+              <div className="flex h-24 w-24 items-center justify-center rounded-full bg-white/10 backdrop-blur-md transition-all group-hover:bg-white/20">
+                <Play
+                  size={48}
+                  className="ml-1 text-white transition-transform group-hover:scale-110"
+                  fill="white"
+                />
+              </div>
+              <span className="text-lg font-medium text-white">
+                Click to play
+              </span>
+            </motion.button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Bottom Left Play/Pause Button */}
+      <Tooltip content="Play / Pause">
+        <div className="absolute bottom-12 left-12 z-40 flex items-center gap-2">
+          <motion.button
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            onClick={handleTogglePlayPause}
+            className="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 backdrop-blur-md transition-all hover:scale-110 hover:bg-white/20 active:scale-95"
+          >
+            {isPlaying ? (
+              <Pause size={24} className="text-white" fill="white" />
+            ) : (
+              <Play size={24} className="ml-0.5 text-white" fill="white" />
+            )}
+          </motion.button>
+          <span className="text-lg font-medium">
+            Click to {isPlaying ? "pause" : "play"}
+          </span>
+        </div>
+      </Tooltip>
+
+      <div className="flex h-full max-h-[700px] w-full max-w-6xl gap-8">
+        {/* Left: File Tree */}
+        <div className="flex flex-1 flex-col">
+          <motion.div
+            className="mb-4 font-mono text-sm text-zinc-500"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+          >
+            /mnt/skills/
+          </motion.div>
+
+          <div className="space-y-2">
+            {getFileTree().map((item, index) => (
+              <motion.div
+                key={`${item.name}-${index}`}
+                className={`flex items-center gap-3 text-lg font-medium transition-all duration-300 ${
+                  item.done
+                    ? "text-green-500"
+                    : item.dragging
+                      ? "translate-x-8 scale-105 text-blue-400"
+                      : item.active
+                        ? "text-white"
+                        : item.highlight
+                          ? "text-purple-400"
+                          : "text-zinc-600"
+                }`}
+                style={{ paddingLeft: `${item.indent * 24}px` }}
+                animate={
+                  item.done
+                    ? {
+                        scale: 1,
+                        opacity: 1,
+                      }
+                    : {}
+                }
+              >
+                {item.type === "folder" ? (
+                  <Folder
+                    size={20}
+                    className={
+                      item.done
+                        ? "text-green-500"
+                        : item.highlight
+                          ? "text-purple-400"
+                          : ""
+                    }
+                  />
+                ) : (
+                  <FileText
+                    size={20}
+                    className={
+                      item.done
+                        ? "text-green-500"
+                        : item.highlight
+                          ? "text-purple-400"
+                          : ""
+                    }
+                  />
+                )}
+                <span>{item.name}</span>
+                {item.done && <Check size={16} className="text-green-500" />}
+                {item.highlight && !item.done && (
+                  <Sparkles size={16} className="text-purple-400" />
+                )}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+
+        {/* Right: Chat Interface */}
+        <div className="flex flex-1 flex-col overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/50">
+          {/* Chat Header */}
+          <div className="border-b border-zinc-800 p-4">
+            <div className="flex items-center gap-2">
+              <div className="h-3 w-3 rounded-full bg-green-500" />
+              <span className="text-sm text-zinc-400">CM 助手 Agent</span>
+            </div>
+          </div>
+
+          {/* Chat Messages */}
+          <div
+            ref={chatMessagesRef}
+            className="flex-1 space-y-4 overflow-y-auto p-6"
+          >
+            {/* User Message */}
+            <AnimatePresence>
+              {phase !== "idle" && (
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex justify-end"
+                >
+                  <div className="max-w-[90%] rounded-2xl rounded-tr-sm bg-blue-600 px-5 py-3">
+                    <p className="text-base">
+                      Research mRNA delivery, build a landing page, deploy to
+                      Vercel
+                    </p>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            {/* Agent Messages */}
+            <AnimatePresence>
+              {phase !== "idle" && phase !== "user-input" && (
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="space-y-3"
+                >
+                  {/* Found Skills */}
+                  {[
+                    "scanning",
+                    "load-skill",
+                    "load-template",
+                    "researching",
+                    "load-frontend",
+                    "building",
+                    "load-deploy",
+                    "deploying",
+                    "done",
+                  ].includes(phase) && (
+                    <div className="flex items-center gap-2 text-base text-zinc-300">
+                      <Sparkles size={16} className="text-purple-400" />
+                      <span>Found 3 skills</span>
+                    </div>
+                  )}
+
+                  {/* Researching Section */}
+                  {[
+                    "load-skill",
+                    "load-template",
+                    "researching",
+                    "load-frontend",
+                    "building",
+                    "load-deploy",
+                    "deploying",
+                    "done",
+                  ].includes(phase) && (
+                    <div className="mt-4">
+                      <hr className="mb-3 border-zinc-700" />
+                      <div className="mb-3 inline-flex items-center gap-2 text-zinc-300">
+                        <Search size={16} className="text-blue-400" />
+                        <span>Researching...</span>
+                      </div>
+                      <div className="mb-3 space-y-2">
+                        {/* Loading SKILL.md */}
+                        {[
+                          "load-skill",
+                          "load-template",
+                          "researching",
+                          "load-frontend",
+                          "building",
+                          "load-deploy",
+                          "deploying",
+                          "done",
+                        ].includes(phase) && (
+                          <div className="flex items-center gap-2 pl-4 text-zinc-400">
+                            <FileText size={16} />
+                            <span>Loading deep-search/SKILL.md...</span>
+                          </div>
+                        )}
+                        {/* Loading biotech.md */}
+                        {[
+                          "load-template",
+                          "researching",
+                          "load-frontend",
+                          "building",
+                          "load-deploy",
+                          "deploying",
+                          "done",
+                        ].includes(phase) && (
+                          <div className="flex items-center gap-2 pl-4 text-zinc-400">
+                            <FileText size={16} />
+                            <span>
+                              Found biotech related topic, loading
+                              deep-search/biotech.md...
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                      {/* Search steps */}
+                      {phase === "researching" && (
+                        <div className="max-h-[180px] space-y-2 overflow-hidden pl-4">
+                          {searchSteps.slice(0, searchIndex).map((step, i) => (
+                            <motion.div
+                              key={i}
+                              initial={{ opacity: 0, y: 10 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              className="flex items-center gap-2 text-sm text-zinc-500"
+                            >
+                              {step.type === "search" ? (
+                                <Search size={14} className="text-blue-400" />
+                              ) : (
+                                <Globe size={14} className="text-green-400" />
+                              )}
+                              <span className="truncate">{step.text}</span>
+                            </motion.div>
+                          ))}
+                        </div>
+                      )}
+                      {[
+                        "load-frontend",
+                        "building",
+                        "load-deploy",
+                        "deploying",
+                        "done",
+                      ].includes(phase) && (
+                        <div className="max-h-[180px] space-y-2 overflow-hidden pl-4">
+                          {searchSteps.map((step, i) => (
+                            <motion.div
+                              key={i}
+                              initial={{ opacity: 0, y: 10 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              className="flex items-center gap-2 text-sm text-zinc-500"
+                            >
+                              {step.type === "search" ? (
+                                <Search size={14} className="text-blue-400" />
+                              ) : (
+                                <Globe size={14} className="text-green-400" />
+                              )}
+                              <span className="truncate">{step.text}</span>
+                            </motion.div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Building */}
+                  {["building", "load-deploy", "deploying", "done"].includes(
+                    phase,
+                  ) && (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      className="mt-4"
+                    >
+                      <hr className="mb-3 border-zinc-700" />
+                      <div className="mb-3 inline-flex items-center gap-2 text-zinc-300">
+                        <FileText size={16} className="text-zinc-400" />
+                        <span>Building...</span>
+                      </div>
+                      <div className="mb-3 flex items-center gap-2 pl-4 text-zinc-400">
+                        <FileText size={16} />
+                        <span>Loading frontend-design/SKILL.md...</span>
+                      </div>
+                      <div className="space-y-2 pl-4">
+                        {workspaceFiles.slice(0, buildIndex).map((file) => (
+                          <motion.div
+                            key={file}
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            className="flex items-center gap-2 text-sm text-green-500"
+                          >
+                            <FileText size={14} />
+                            <span>Generating {file}...</span>
+                            <Check size={14} />
+                          </motion.div>
+                        ))}
+                      </div>
+                    </motion.div>
+                  )}
+
+                  {/* Deploying */}
+                  {["load-deploy", "deploying", "done"].includes(phase) && (
+                    <motion.div
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      className="mt-4"
+                    >
+                      <hr className="mb-3 border-zinc-700" />
+                      <div className="mb-3 inline-flex items-center gap-2 text-zinc-300">
+                        <Terminal size={16} className="text-zinc-400" />
+                        <span>Deploying...</span>
+                      </div>
+                      <div className="mb-3 space-y-2">
+                        <div className="flex items-center gap-2 pl-4 text-zinc-400">
+                          <FileText size={16} />
+                          <span>Loading deploy/SKILL.md...</span>
+                        </div>
+                        {["deploying", "done"].includes(phase) && (
+                          <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            className="flex items-center gap-2 pl-4 text-zinc-400"
+                          >
+                            <Terminal size={16} />
+                            <span>Executing scripts/deploy.sh</span>
+                          </motion.div>
+                        )}
+                      </div>
+                      {phase === "done" && (
+                        <motion.div
+                          initial={{ opacity: 0, scale: 0.9 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          className="mt-4 rounded-xl border border-green-500/30 bg-green-500/10 p-4"
+                        >
+                          <div className="inline-flex items-center gap-2 text-lg font-medium text-green-500">
+                            <Check size={18} />
+                            <span>Live at biotech-startup.vercel.app</span>
+                          </div>
+                        </motion.div>
+                      )}
+                    </motion.div>
+                  )}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+
+          {/* Chat Input (decorative) */}
+          <div className="border-t border-zinc-800 p-4">
+            <div className="rounded-xl bg-zinc-800 px-4 py-3 text-sm text-zinc-500">
+              Ask CM 助手 anything...
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+export function Section({
+  className,
+  title,
+  subtitle,
+  children,
+}: {
+  className?: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className={cn("mx-auto flex flex-col py-16", className)}>
+      <header className="flex flex-col items-center justify-between">
+        <div className="mb-4 bg-linear-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-center text-5xl font-bold text-transparent">
+          {title}
+        </div>
+        {subtitle && (
+          <div className="text-muted-foreground text-center text-xl">
+            {subtitle}
+          </div>
+        )}
+      </header>
+      <main className="mt-4">{children}</main>
+    </section>
+  );
+}
@@ -0,0 +1,99 @@
+import Link from "next/link";
+
+import { Card } from "@/components/ui/card";
+import { pathOfThread } from "@/core/threads/utils";
+import { cn } from "@/lib/utils";
+
+import { Section } from "../section";
+
+export function CaseStudySection({ className }: { className?: string }) {
+  const caseStudies = [
+    {
+      threadId: "7cfa5f8f-a2f8-47ad-acbd-da7137baf990",
+      title: "Forecast 2026 Agent Trends and Opportunities",
+      description:
+        "Create a webpage with a Deep Research report forecasting the agent technology trends and opportunities in 2026.",
+    },
+    {
+      threadId: "4f3e55ee-f853-43db-bfb3-7d1a411f03cb",
+      title: 'Generate a Video Based On the Novel "Pride and Prejudice"',
+      description:
+        'Search the specific scene from the novel "Pride and Prejudice", then generate a video as well as a reference image based on the scenes.',
+    },
+    {
+      threadId: "21cfea46-34bd-4aa6-9e1f-3009452fbeb9",
+      title: "Doraemon Explains the MOE Architecture",
+      description:
+        "Generate a Doraemon comic strip explaining the MOE architecture to the teenagers who are interested in AI.",
+    },
+    {
+      threadId: "ad76c455-5bf9-4335-8517-fc03834ab828",
+      title: "An Exploratory Data Analysis of the Titanic Dataset",
+      description:
+        "Explore the Titanic dataset and identify the key factors that influenced survival rates with visualizations and insights.",
+    },
+    {
+      threadId: "d3e5adaf-084c-4dd5-9d29-94f1d6bccd98",
+      title: "Watch Y Combinator's Video then Conduct a Deep Research",
+      description:
+        "Watch the given Y Combinator's YouTube video and conduct a deep research on the YC's tips for technical startup founders.",
+    },
+    {
+      threadId: "3823e443-4e2b-4679-b496-a9506eae462b",
+      title: "Collect and Summarize Dr. Fei Fei Li's Podcasts",
+      description:
+        "Collect all the podcast appearances of Dr. Fei Fei Li in the last 6 months, then summarize them into a comprehensive report.",
+    },
+  ];
+  return (
+    <Section
+      className={className}
+      title="Case Studies"
+      subtitle="CM 助手"
+    >
+      <div className="container-md mt-8 grid grid-cols-1 gap-4 px-4 md:grid-cols-2 md:px-20 lg:grid-cols-3">
+        {caseStudies.map((caseStudy) => (
+          <Link
+            key={caseStudy.title}
+            href={pathOfThread(caseStudy.threadId) + "?mock=true"}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Card className="group/card relative h-64 overflow-hidden">
+              <div
+                className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat transition-all duration-300 group-hover/card:scale-110 group-hover/card:brightness-90"
+                style={{
+                  backgroundImage: `url(/images/${caseStudy.threadId}.jpg)`,
+                }}
+              ></div>
+              <div
+                className={cn(
+                  "flex h-full w-full translate-y-[calc(100%-60px)] flex-col items-center",
+                  "transition-all duration-300",
+                  "group-hover/card:translate-y-[calc(100%-128px)]",
+                )}
+              >
+                <div
+                  className="flex w-full flex-col p-4"
+                  style={{
+                    background:
+                      "linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)",
+                  }}
+                >
+                  <div className="flex flex-col gap-2">
+                    <h3 className="flex h-14 items-center text-xl font-bold text-shadow-black">
+                      {caseStudy.title}
+                    </h3>
+                    <p className="box-shadow-black overflow-hidden text-sm text-white/85 text-shadow-black">
+                      {caseStudy.description}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </Section>
+  );
+}
@@ -0,0 +1,20 @@
+"use client";
+
+import { AuroraText } from "@/components/ui/aurora-text";
+
+import { Section } from "../section";
+
+export function CommunitySection() {
+  return (
+    <Section
+      title={
+        <AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}>
+          Join the Community
+        </AuroraText>
+      }
+      subtitle="Contribute brilliant ideas to shape the future of CM Assistant. Collaborate, innovate, and make impacts."
+    >
+      <div />
+    </Section>
+  );
+}
@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  AnimatedSpan,
+  Terminal,
+  TypingAnimation,
+} from "@/components/ui/terminal";
+
+import { Section } from "../section";
+
+export function SandboxSection({ className }: { className?: string }) {
+  return (
+    <Section
+      className={className}
+      title="Agent Runtime Environment"
+      subtitle={
+        <p>
+          We give CM Assistant a &quot;computer&quot;, which can execute commands,
+          manage files, and run long tasks — all in a secure Docker-based
+          sandbox
+        </p>
+      }
+    >
+      <div className="mt-8 flex w-full max-w-6xl flex-col items-center gap-12 lg:flex-row lg:gap-16">
+        {/* Left: Terminal */}
+        <div className="w-full flex-1">
+          <Terminal className="h-[360px] w-full">
+            {/* Scene 1: Build a Game */}
+            <TypingAnimation>$ cat requirements.txt</TypingAnimation>
+            <AnimatedSpan delay={800} className="text-zinc-400">
+              pygame==2.5.0
+            </AnimatedSpan>
+
+            <TypingAnimation delay={1200}>
+              $ pip install -r requirements.txt
+            </TypingAnimation>
+            <AnimatedSpan delay={2000} className="text-green-500">
+              [ok] Installed pygame
+            </AnimatedSpan>
+
+            <TypingAnimation delay={2400}>
+              $ write game.py --lines 156
+            </TypingAnimation>
+            <AnimatedSpan delay={3200} className="text-blue-500">
+              [ok] Written 156 lines
+            </AnimatedSpan>
+
+            <TypingAnimation delay={3600}>
+              $ python game.py --test
+            </TypingAnimation>
+            <AnimatedSpan delay={4200} className="text-green-500">
+              [ok] All sprites loaded
+            </AnimatedSpan>
+            <AnimatedSpan delay={4500} className="text-green-500">
+              [ok] Physics engine OK
+            </AnimatedSpan>
+            <AnimatedSpan delay={4800} className="text-green-500">
+              [ok] 60 FPS stable
+            </AnimatedSpan>
+
+            {/* Scene 2: Data Analysis */}
+            <TypingAnimation delay={5400}>
+              $ curl -O sales-2024.csv
+            </TypingAnimation>
+            <AnimatedSpan delay={6200} className="text-zinc-400">
+              Downloaded 12.4 MB
+            </AnimatedSpan>
+          </Terminal>
+        </div>
+
+        {/* Right: Description */}
+        <div className="w-full flex-1 space-y-6">
+          <div className="space-y-4">
+            <p className="text-sm font-medium tracking-wider text-purple-400 uppercase">
+              Open-source
+            </p>
+            <h2 className="text-4xl font-bold tracking-tight lg:text-5xl">
+              <a
+                href="https://github.com/agent-infra/sandbox"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                AIO Sandbox
+              </a>
+            </h2>
+          </div>
+
+          <div className="space-y-4 text-lg text-zinc-400">
+            <p>
+              We recommend using{" "}
+              <a
+                href="https://github.com/agent-infra/sandbox"
+                className="underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                All-in-One Sandbox
+              </a>{" "}
+              that combines Browser, Shell, File, MCP and VSCode Server in a
+              single Docker container.
+            </p>
+          </div>
+
+          {/* Feature Tags */}
+          <div className="flex flex-wrap gap-3 pt-4">
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Isolated
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Safe
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Persistent
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Mountable FS
+            </span>
+            <span className="rounded-full border border-zinc-800 bg-zinc-900 px-4 py-2 text-sm text-zinc-300">
+              Long-running
+            </span>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+import ProgressiveSkillsAnimation from "../progressive-skills-animation";
+import { Section } from "../section";
+
+export function SkillsSection({ className }: { className?: string }) {
+  return (
+    <Section
+      className={cn("h-[calc(100vh-64px)] w-full bg-white/2", className)}
+      title="Agent Skills"
+      subtitle={
+        <div>
+          Agent Skills are loaded progressively — only what&apos;s needed, when
+          it&apos;s needed.
+          <br />
+          Extend CM Assistant with your own skill files, or use our built-in
+          library.
+        </div>
+      }
+    >
+      <div className="relative overflow-hidden">
+        <ProgressiveSkillsAnimation />
+      </div>
+    </Section>
+  );
+}
@@ -0,0 +1,63 @@
+"use client";
+
+import MagicBento, { type BentoCardProps } from "@/components/ui/magic-bento";
+import { cn } from "@/lib/utils";
+
+import { Section } from "../section";
+
+const COLOR = "#0a0a0a";
+const features: BentoCardProps[] = [
+  {
+    color: COLOR,
+    label: "Context Engineering",
+    title: "Long/Short-term Memory",
+    description: "Now the agent can better understand you",
+  },
+  {
+    color: COLOR,
+    label: "Long Task Running",
+    title: "Planning and Sub-tasking",
+    description:
+      "Plans ahead, reasons through complexity, then executes sequentially or in parallel",
+  },
+  {
+    color: COLOR,
+    label: "Extensible",
+    title: "Skills and Tools",
+    description:
+      "Plug, play, or even swap built-in tools. Build the agent you want.",
+  },
+
+  {
+    color: COLOR,
+    label: "Persistent",
+    title: "Sandbox with File System",
+    description: "Read, write, run — like a real computer",
+  },
+  {
+    color: COLOR,
+    label: "Flexible",
+    title: "Multi-Model Support",
+    description: "Doubao, DeepSeek, OpenAI, Gemini, etc.",
+  },
+  {
+    color: COLOR,
+    label: "Free",
+    title: "Open Source",
+    description: "MIT License, self-hosted, full control",
+  },
+];
+
+export function WhatsNewSection({ className }: { className?: string }) {
+  return (
+    <Section
+      className={cn("", className)}
+      title="CM 助手"
+      subtitle="CM 助手"
+    >
+      <div className="flex w-full items-center justify-center">
+        <MagicBento data={features} />
+      </div>
+    </Section>
+  );
+}
@@ -0,0 +1,814 @@
+.sidebar-contnet {
+    position: absolute;
+    left: 0;
+    top: 4rem;
+    z-index: 40;
+    width: 98px;
+    height: calc(100vh - 4rem);
+    flex-shrink: 0;
+}
+
+/* `?hideHeader=1`: keep the menu rail, but let it occupy the Header's space. */
+.sidebar-contnet--header-hidden {
+    top: 0;
+    height: 100vh;
+}
+
+.sidebar-contnet--header-hidden .item-nav-content {
+    height: calc(100vh - 20px);
+    min-height: calc(100vh - 20px);
+}
+
+.sidebar-contents {
+    width: 98px;
+    min-height: calc(100% - 20px);
+    background: rgba(3, 38, 80, 0.8);
+    border: 1px solid;
+    border-color: rgba(43, 143, 254, 0.6);
+    border-radius: 4px;
+    backdrop-filter: blur(2px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 10px;
+    position: relative;
+    height: calc(100% - 20px);
+    box-sizing: border-box;
+    transform: translate(10px, 10px);
+}
+
+.item-nav-group {
+    width: 100%;
+}
+
+.item-nav-wrap {
+    position: relative;
+    width: 100%;
+}
+
+.item-nav-group:first-child .item-nav {
+    margin-top: 0;
+}
+
+.item-nav {
+    width: 100%;
+    height: 75px;
+    margin-top: 13px;
+    font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
+    font-weight: 700;
+    color: #fff;
+    font-size: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background: #000c1c26;
+    border: 1px solid;
+    border-color: #55a6fe33;
+    box-shadow: 0 0 20px #00b9ff26 inset;
+    position: relative;
+}
+
+.item-nav:hover,
+.item-nav-active,
+.item-nav-hovered {
+    color: #ffffff;
+    background: linear-gradient(134.25deg,
+            rgba(0, 98, 217, 0.59) 2.28%,
+            rgba(0, 98, 217, 0.3) 99.59%) !important;
+    background-size: cover;
+    border: 1px solid;
+    border-color: rgba(255, 255, 255, 0.2);
+    position: relative;
+}
+
+.item-nav:hover::before,
+.item-nav-active::before,
+.item-nav-hovered::before {
+    content: '';
+    position: absolute;
+    right: -10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 10px solid rgba(0, 98, 217, 0.45);
+    pointer-events: none;
+}
+
+.item-nav:hover::after,
+.item-nav-active::after,
+.item-nav-hovered::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 29px;
+    width: 77px;
+    height: 45px;
+    background: url('../assets/icon/nav-line-logo.svg') no-repeat;
+    background-size: cover;
+}
+
+.item-nav__label {
+    display: block;
+    width: 3em;
+    margin: 0 auto;
+    padding-left: 6px;
+    box-sizing: border-box;
+    letter-spacing: 6px;
+    word-break: break-all;
+}
+
+.sidebar-contnet--top-submenu .sidebar-contents {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.sidebar-contnet--top-submenu .item-nav {
+    height: auto;
+    min-height: 75px;
+    padding: 10px 2px;
+    font-size: 19px;
+    line-height: 1.35;
+}
+
+.sidebar-contnet--top-submenu .item-nav__label {
+    width: 3.1em;
+    max-width: 100%;
+    padding-left: 0;
+    letter-spacing: 0;
+    line-height: 1.35;
+    text-align: center;
+    word-break: normal;
+    overflow-wrap: normal;
+    white-space: normal;
+}
+
+.sidebar-contnet--top-submenu .item-nav__label--four-char {
+    width: 2.2em;
+}
+
+.sidebar-contnet--top-submenu .item-nav:hover::after,
+.sidebar-contnet--top-submenu .item-nav-active::after,
+.sidebar-contnet--top-submenu .item-nav-hovered::after {
+    top: auto;
+    bottom: 0;
+}
+
+.item-nav-content {
+    width: 155px;
+    height: calc(100vh - 4rem - 20px);
+    min-height: calc(100vh - 4rem - 20px);
+    background: rgba(3, 38, 80, 0.8);
+    border: 1px solid;
+    border-color: rgba(43, 143, 254, 0.6);
+    border-radius: 4px;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    position: absolute;
+    left: 108px;
+    top: 0;
+    z-index: 1000;
+    padding: 14px 13px 18px 16px;
+    overflow-y: auto;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.item-nav-content::before {
+    content: '';
+    position: absolute;
+    left: -30px;
+    top: 0;
+    width: 30px;
+    height: 100%;
+}
+
+.item-nav-hover-bridge {
+    position: absolute;
+    right: -30px;
+    top: 0;
+    width: 30px;
+    height: 100%;
+    z-index: 999;
+}
+
+.item-nav-content--visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.sidebar-flyout-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    position: relative;
+}
+
+.sidebar-flyout-list--level-1,
+.sidebar-flyout-list--level-2,
+.sidebar-flyout-list--level-3 {
+    margin-left: 19px;
+    padding-left: 14px;
+}
+
+.sidebar-flyout-node {
+    position: relative;
+}
+
+.sidebar-flyout-node--has-children.sidebar-flyout-node--expanded>.sidebar-flyout-list::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1px;
+    height: 100%;
+    background: rgba(43, 143, 254, 0.22);
+}
+
+.sidebar-flyout-item {
+    width: 100%;
+    min-height: 34px;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    border: 0;
+    background: transparent;
+    padding: 3px 0;
+    font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
+    font-size: 18px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 0;
+    color: rgba(255, 255, 255, 0.8);
+    text-align: left;
+    cursor: pointer;
+    transition: color 0.2s ease, text-shadow 0.2s ease;
+}
+
+.sidebar-flyout-item:hover,
+.sidebar-flyout-item--active {
+    color: #48ddff;
+    text-shadow: 0 0 8px rgba(72, 221, 255, 0.25);
+}
+
+.sidebar-flyout-item--leaf {
+    justify-content: center;
+    padding-left: 0;
+}
+
+.sidebar-flyout-list--level-1>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-2>.sidebar-flyout-node>.sidebar-flyout-item--leaf,
+.sidebar-flyout-list--level-3>.sidebar-flyout-node>.sidebar-flyout-item--leaf {
+    padding-left: 0;
+}
+
+.sidebar-flyout-arrow {
+    width: 9px;
+    height: 9px;
+    flex: 0 0 9px;
+    background: url('../assets/icon/down-logo.svg') center / contain no-repeat;
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease;
+}
+
+.sidebar-flyout-node--expanded>.sidebar-flyout-item>.sidebar-flyout-arrow {
+    transform: rotate(0deg);
+}
+
+.sidebar-flyout-label {
+    flex: 1;
+    white-space: nowrap;
+}
+
+.sidebar-collapse-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.sidebar-collapse-btn__icon {
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    color: #80e9ff;
+}
+
+.sidebar-collapse-btn__label {
+    font-size: 14px;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.sidebar-collapse-btn--inline {
+    width: calc(100% - 6px);
+    min-height: 58px;
+    margin-top: auto;
+    margin-bottom: 2px;
+    flex-direction: column;
+    gap: 6px;
+    border: 1px solid #55a6fe33;
+    background: #000c1c26;
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: inset 0 0 16px #00b9ff1f;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.sidebar-collapse-btn--inline .sidebar-collapse-btn__label {
+    font-size: 16px;
+    line-height: 1.1;
+}
+
+.sidebar-collapse-btn--inline:hover {
+    background: rgba(0, 98, 217, 0.3);
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.sidebar-collapse-btn--floating {
+    position: fixed;
+    left: 10px;
+    bottom: 10px;
+    z-index: 60;
+    width: 36px;
+    height: 36px;
+    min-height: 36px;
+    padding: 0 10px;
+    border: 1px solid rgba(128, 233, 255, 0.35);
+    background: rgba(3, 38, 80, 0.82);
+    color: rgba(205, 245, 255, 0.95);
+    backdrop-filter: blur(2px);
+    transition: width 0.22s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+    overflow: hidden;
+}
+
+.sidebar-collapse-btn--floating:hover {
+    width: 104px;
+    background: rgba(7, 52, 110, 0.9);
+    border-color: rgba(128, 233, 255, 0.65);
+}
+
+.sidebar-collapse-btn--floating .sidebar-collapse-btn__label {
+    max-width: 0;
+    opacity: 0;
+    transform: translateX(-4px);
+    transition: max-width 0.22s ease, opacity 0.16s ease, transform 0.22s ease;
+}
+
+.sidebar-collapse-btn--floating:hover .sidebar-collapse-btn__label {
+    max-width: 64px;
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.sidebar-contnet--top-submenu .item-nav:hover::before,
+.sidebar-contnet--top-submenu .item-nav-active::before,
+.sidebar-contnet--top-submenu .item-nav-hovered::before {
+    display: none;
+}
+
+.top-submenu-bar {
+    position: relative;
+    z-index: 35;
+    height: 64px;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-self: stretch;
+    margin-left: 34px;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+/* 左右分组：不撑满、不裁切选中高光 */
+.top-submenu-bar--group {
+    flex: 0 0 auto;
+    margin-left: 0;
+    overflow: visible;
+}
+
+.top-submenu-list {
+    min-width: max-content;
+    height: 64px;
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+    padding: 0;
+}
+
+.top-submenu-item {
+    position: relative;
+    min-width: 122px;
+    height: 64px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    padding: 0 18px;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.8);
+    font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
+    font-size: 18px;
+    line-height: 1;
+    font-weight: 700;
+    letter-spacing: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: visible;
+    transition: color 0.18s ease, text-shadow 0.18s ease;
+}
+
+.top-submenu-item:hover {
+    color: #9fe3ff;
+    text-shadow: 0 0 10px rgba(91, 210, 255, 0.4);
+}
+
+/* 选中态：设计稿提供的 nav-active.svg 发光高光 + 青色文字 */
+.top-submenu-item--active {
+    color: #64cdf5;
+    text-shadow: 0 0 12px rgba(100, 205, 245, 0.5);
+    background-image: url("../assets/img/nav-active.svg");
+    background-repeat: no-repeat;
+    background-position: center calc(50% + 7px);
+    background-size: 152px 42px;
+}
+
+.third-submenu-bar {
+    position: relative;
+    z-index: 34;
+    height: 42px;
+    margin-left: 118px;
+    flex-shrink: 0;
+    background:
+        linear-gradient(180deg, rgba(4, 34, 78, 0.96) 0%, rgba(2, 24, 58, 0.96) 100%),
+        radial-gradient(ellipse at top left, rgba(45, 149, 255, 0.18) 0%, rgba(45, 149, 255, 0) 42%);
+    border-top: 1px solid rgba(79, 154, 255, 0.18);
+    border-bottom: 1px solid rgba(43, 143, 254, 0.26);
+    box-shadow: inset 0 1px 0 rgba(115, 194, 255, 0.08), inset 0 -10px 18px rgba(0, 26, 70, 0.22);
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.third-submenu-list {
+    min-width: max-content;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0 24px;
+}
+
+.third-submenu-item {
+    position: relative;
+    height: 28px;
+    min-width: 86px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(90, 169, 255, 0.2);
+    border-radius: 2px;
+    padding: 0 16px;
+    background: rgba(2, 28, 65, 0.36);
+    color: rgba(221, 242, 255, 0.78);
+    font-family: "Source Han Sans SC", "Noto Sans SC", "Noto Sans S Chinese", "Microsoft YaHei", sans-serif;
+    font-size: 14px;
+    line-height: 1;
+    font-weight: 700;
+    letter-spacing: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
+}
+
+.third-submenu-item:hover,
+.third-submenu-item--active {
+    color: #ffffff;
+    border-color: rgba(82, 205, 255, 0.55);
+    background: linear-gradient(180deg, rgba(14, 84, 165, 0.54) 0%, rgba(4, 45, 104, 0.58) 100%);
+    box-shadow: inset 0 0 12px rgba(0, 185, 255, 0.14), 0 0 10px rgba(35, 167, 255, 0.14);
+    text-shadow: 0 0 8px rgba(87, 215, 255, 0.34);
+}
+
+.third-submenu-item--active::after {
+    content: '';
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    bottom: -1px;
+    height: 2px;
+    background: linear-gradient(90deg, rgba(62, 178, 255, 0) 0%, #4ee6ff 50%, rgba(62, 178, 255, 0) 100%);
+    box-shadow: 0 0 10px rgba(78, 230, 255, 0.72);
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   浅色主题导航（红/蓝两套，颜色经 --brand-* 变量自动切换）
+   逻辑同深色：一级导航在顶栏、二级导航在侧边栏、三级导航在顶栏下方横条。
+   但一级导航不做深色那种围绕基座的特殊处理，正常横排即可。
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── 顶栏一级导航（白字落在 red/blue-header banner 上）──────────────────── */
+.light-topnav {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    min-width: 0;
+    gap: 6px;
+    /* 整体往右移（用百分比，随容器宽度自适应；约等于宽屏下的 200px 量级） */
+    margin-left: 10%;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.light-topnav-item {
+    position: relative;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    padding: 0 18px;
+    border: 0;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.85);
+    /* 复用全局字体栈（与「多智能体会商」等页面一致）：Source Han Sans SC 在 Windows 上
+       常按字重分家族，放栈首会导致 font-weight 选不到粗体；用 --font-sans（Noto Sans SC
+       领先）才能正常加粗。 */
+    font-family: var(--font-sans);
+    font-size: 16px;
+    /* 普通项用 500（雅黑兜底下渲染为常规字面），选中项 700 才能看出粗体对比 */
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.18s ease;
+}
+
+.light-topnav-item:hover {
+    color: #ffffff;
+}
+
+/* 选中态：不改背景，文字加粗变亮 + 贴近导航栏底部一条粗白线 */
+.light-topnav-item--active,
+.light-topnav-item--active:hover {
+    color: #ffffff;
+    font-weight: 700;
+}
+
+.light-topnav-item--active::after {
+    content: '';
+    position: absolute;
+    left: 12px;
+    right: 12px;
+    bottom: 0;
+    height: 4px;
+    border-radius: 3px 3px 0 0;
+    background: #ffffff;
+}
+
+/* Ice blue has a deliberately light banner. Keep top-level navigation and
+   its active marker dark enough to remain readable against #9BCEF1. */
+html.iceblue .light-topnav-item {
+    color: rgba(24, 50, 74, 0.78);
+}
+
+html.iceblue .light-topnav-item:hover,
+html.iceblue .light-topnav-item--active,
+html.iceblue .light-topnav-item--active:hover {
+    color: #18324a;
+}
+
+html.iceblue .light-topnav-item--active::after {
+    background: #3d6e96;
+}
+
+/* Pale yellow has the same light-banner contrast requirement as ice blue. */
+html.lightyellow .light-topnav-item {
+    color: rgba(48, 61, 35, 0.78);
+}
+
+html.lightyellow .light-topnav-item:hover,
+html.lightyellow .light-topnav-item--active,
+html.lightyellow .light-topnav-item--active:hover {
+    color: #303d23;
+}
+
+html.lightyellow .light-topnav-item--active::after {
+    background: #4c6330;
+}
+
+/* ── 侧边栏：二级图标卡片列（96px）+ 右侧三级列（展开时整体变宽，带过渡）──────── */
+/* Runtime themes use their configurable header gradient rather than the
+   red/blue banner artwork. Navigation copy follows an automatically chosen
+   contrasting foreground so both pale and deep brand colours remain legible. */
+html[data-custom-theme="true"] .light-topnav-item,
+html[data-custom-theme="true"] .top-submenu-item {
+    color: var(--navigation-foreground);
+}
+
+html[data-custom-theme="true"] .light-topnav-item:hover,
+html[data-custom-theme="true"] .light-topnav-item--active,
+html[data-custom-theme="true"] .light-topnav-item--active:hover,
+html[data-custom-theme="true"] .top-submenu-item:hover,
+html[data-custom-theme="true"] .top-submenu-item--active {
+    color: var(--navigation-foreground);
+    text-shadow: none;
+}
+
+html[data-custom-theme="true"] .light-topnav-item--active::after {
+    background: var(--navigation-foreground);
+}
+
+.light-sidebar {
+    position: fixed;
+    left: 0;
+    top: 4rem;
+    z-index: 40;
+    width: 96px;
+    height: calc(100vh - 4rem);
+    display: flex;
+    flex-direction: row;
+    background: #ffffff;
+    border-right: 1px solid var(--border);
+    box-sizing: border-box;
+    overflow: hidden;
+    /* 展开三级列时整体变宽的过渡动画 */
+    transition: width 0.3s ease;
+}
+
+/* 展开三级列：96(二级) + 140(三级) = 236px */
+.light-sidebar--expanded {
+    width: 236px;
+}
+
+/* `?hideHeader=1`: preserve the light sidebar while removing only Header. */
+.light-sidebar--header-hidden {
+    top: 0;
+    height: 100vh;
+}
+
+/* 二级列：固定 96px，竖排图标卡片 + 底部设置 */
+.light-sidebar__primary {
+    flex: 0 0 96px;
+    width: 96px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    /* 横向 padding 置 0：让选中态浅红背景能铺满与列宽一致 */
+    padding: 10px 0;
+    box-sizing: border-box;
+}
+
+/* 三级列：固定 140px，随侧边栏展开淡入 */
+.light-sidebar__secondary {
+    flex: 0 0 140px;
+    width: 140px;
+    height: 100%;
+    border-left: 1px solid var(--border);
+    /* 横向 padding 置 0：让三级选中背景能铺满与列宽一致（文字内缩由 subitem 自身 padding 保证） */
+    padding: 12px 0;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: #ffffff;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.light-sidebar--expanded .light-sidebar__secondary {
+    opacity: 1;
+}
+
+.light-sidebar__list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.light-sidebar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 14px 4px;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    color: #222222;
+    /* 复用全局字体栈，确保加粗生效（详见 .light-topnav-item 注释） */
+    font-family: var(--font-sans);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.3;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.light-sidebar-item__icon {
+    flex-shrink: 0;
+    /* 图标统一用主题色（红主题红、蓝主题蓝） */
+    color: var(--brand-900);
+    transition: color 0.18s ease, transform 0.18s ease;
+}
+
+.light-sidebar-item__label {
+    display: block;
+    width: 100%;
+    word-break: break-word;
+}
+
+.light-sidebar-item:hover {
+    background: var(--brand-200);
+}
+
+.light-sidebar-item:hover .light-sidebar-item__icon {
+    color: var(--brand-900);
+    transform: scale(1.05);
+}
+
+.light-sidebar-item--active {
+    background: var(--brand-200);
+    color: var(--brand-900);
+    font-weight: 600;
+    /* 选中态：去圆角去边框，浅红底铺满父元素宽度，右侧一条粗主题色边（用 inset 阴影避免挤压内容） */
+    box-shadow: inset -4px 0 0 0 var(--brand-900);
+}
+
+.light-sidebar-item--active .light-sidebar-item__icon {
+    color: var(--brand-900);
+}
+
+/* 侧边栏底部：设置入口（浅色模式不支持收起，故无收起按钮） */
+.light-sidebar__footer {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-top: 8px;
+    border-top: 1px solid var(--border);
+}
+
+/* ── 三级列条目（左对齐图标 + 文字，参考 xiugai-1.png）─────────────────────── */
+.light-sidebar-subnav {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.light-sidebar-subitem {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 10px;
+    border: 0;
+    background: transparent;
+    color: #222222;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.3;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.light-sidebar-subitem__icon {
+    flex-shrink: 0;
+    /* 图标用主题色（红主题红、蓝主题蓝） */
+    color: var(--brand-900);
+}
+
+.light-sidebar-subitem__label {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.light-sidebar-subitem:hover {
+    background: var(--brand-200);
+}
+
+.light-sidebar-subitem--active {
+    background: var(--brand-200);
+    color: var(--brand-900);
+    font-weight: 700;
+    box-shadow: inset -4px 0 0 0 var(--brand-900);
+}
@@ -0,0 +1,270 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PanelLeftOpen, PanelLeftClose } from "lucide-react";
+
+import { getStoredAuth } from "@/core/auth";
+import { isWujieEnv } from "@/core/embed/wujie";
+import {
+  defaultExpandedIds,
+  menuItemContainsPath,
+  menuItemMatchesPath,
+  type MenuItem,
+} from "@/core/page-layout/sidebar-menu";
+import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";
+import './page-sdebar.css'
+
+type PageSidebarDarkProps = {
+  /** 是否收起（true 时只渲染左下角浮动入口，sidebar 主体隐藏） */
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  /** 全局 Header 隐藏时，侧边栏从视口顶部开始占满高度。 */
+  headerHidden?: boolean;
+};
+
+export function PageSidebarDark({
+  collapsed,
+  onToggleCollapsed,
+  headerHidden = false,
+}: PageSidebarDarkProps) {
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
+  const inWujieEnv = isWujieEnv();
+  // defaultExpandedIds 是共享的 ReadonlySet，复制一份给 useState（避免外部突变）
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds));
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  // pathname 变化时取消任何未触发的 hover 关闭计时（cleanup 在卸载时也跑）
+  useEffect(() => {
+    return () => {
+      if (hoverCloseTimerRef.current !== null) {
+        window.clearTimeout(hoverCloseTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleNavHoverEnter = (id: string) => {
+    if (hoverCloseTimerRef.current !== null) {
+      window.clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
+    }
+    setHoveredTopId(id);
+  };
+
+  const scheduleNavPanelClose = () => {
+    if (hoverCloseTimerRef.current !== null) {
+      window.clearTimeout(hoverCloseTimerRef.current);
+    }
+    hoverCloseTimerRef.current = window.setTimeout(() => {
+      setHoveredTopId(null);
+      hoverCloseTimerRef.current = null;
+    }, 180);
+  };
+
+  const hasActiveChild = (item: MenuItem): boolean => menuItemContainsPath(item, pathname);
+
+  // lazy init：仅在首次 render 计算一次 active id；之后由下面的 useEffect 跟随 pathname 同步
+  const [activeTopId, setActiveTopId] = useState<string>(
+    () => visibleMenuItems.find(hasActiveChild)?.id ?? visibleMenuItems[0]?.id ?? "qa-center",
+  );
+  const [hoveredTopId, setHoveredTopId] = useState<string | null>(null);
+  const hoverCloseTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const matchedTopItem = visibleMenuItems.find(hasActiveChild);
+    if (matchedTopItem) {
+      setActiveTopId(matchedTopItem.id);
+    }
+    // 不在导航时强制关闭 flyout：flyout 绝对定位在 group 盒子之外，强制关闭后鼠标
+    // 仍停在 flyout 区域却收不到 group 的 mouseenter，导致连续点击第二个任务时面板
+    // 消失且不回来。开合只交给 hover（mouseleave 有 180ms 宽限），即可连续点选。
+  }, [pathname, visibleMenuItems]);
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const findFirstRoutePath = (items?: MenuItem[]): string | null => {
+    if (!items?.length) {
+      return null;
+    }
+
+    for (const child of items) {
+      if (child.path) {
+        return child.path;
+      }
+      const nestedPath = findFirstRoutePath(child.children);
+      if (nestedPath) {
+        return nestedPath;
+      }
+    }
+
+    return null;
+  };
+
+  const handleTopItemClick = (item: MenuItem) => {
+    setActiveTopId(item.id);
+
+    if (item.children?.length) {
+      const firstPath = findFirstRoutePath(item.children);
+      if (firstPath) {
+        navigate(firstPath);
+      }
+      return;
+    }
+
+    if (item.path) {
+      navigate(item.path);
+    }
+  };
+
+  const handleSecondItemClick = (item: MenuItem) => {
+    const path = item.path ?? findFirstRoutePath(item.children);
+    if (path) {
+      navigate(path);
+    }
+  };
+
+  const handleMenuItemClick = (item: MenuItem) => {
+    if (item.children?.length) {
+      toggleExpanded(item.id);
+      return;
+    }
+
+    if (item.path) {
+      navigate(item.path);
+    }
+  };
+
+  const activeTopItem =
+    visibleMenuItems.find((item) => item.id === activeTopId) ??
+    visibleMenuItems.find(hasActiveChild) ??
+    visibleMenuItems[0];
+  const sidebarMenuItemsToRender = inWujieEnv
+    ? visibleMenuItems
+    : activeTopItem?.children ?? [];
+  const isSidebarItemActive = (item: MenuItem) =>
+    inWujieEnv
+      ? item.id === activeTopId
+      : item.path || item.aliasPaths?.length
+        ? menuItemMatchesPath(item, pathname)
+        : menuItemContainsPath(item, pathname);
+  const handleSidebarItemClick = (item: MenuItem) => {
+    if (inWujieEnv) {
+      handleTopItemClick(item);
+      return;
+    }
+
+    handleSecondItemClick(item);
+  };
+  const getSidebarLabelClassName = (label: string) => {
+    if (!inWujieEnv && Array.from(label.trim()).length === 4) {
+      return "item-nav__label item-nav__label--four-char";
+    }
+
+    return "item-nav__label";
+  };
+
+  const renderFlyoutMenu = (items: MenuItem[], level = 0) => (
+    <div className={`sidebar-flyout-list sidebar-flyout-list--level-${level}`}>
+      {items.map((item) => {
+        const hasChildren = !!item.children?.length;
+        const isExpanded = expandedIds.has(item.id);
+        const isSelected = item.path || item.aliasPaths?.length
+          ? menuItemMatchesPath(item, pathname)
+          : hasActiveChild(item);
+
+        return (
+          <div
+            key={item.id}
+            className={`sidebar-flyout-node sidebar-flyout-node--level-${level} ${hasChildren ? "sidebar-flyout-node--has-children" : ""} ${isExpanded ? "sidebar-flyout-node--expanded" : ""}`}
+          >
+            <button
+              type="button"
+              className={`sidebar-flyout-item ${isSelected ? "sidebar-flyout-item--active" : ""} ${hasChildren ? "sidebar-flyout-item--parent" : "sidebar-flyout-item--leaf"}`}
+              onClick={() => handleMenuItemClick(item)}
+            >
+              {hasChildren ? <span className="sidebar-flyout-arrow" aria-hidden="true" /> : null}
+              <span className="sidebar-flyout-label">{item.label}</span>
+            </button>
+            {hasChildren && isExpanded ? renderFlyoutMenu(item.children ?? [], level + 1) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  // 收起时主侧栏不占宽度，保留左下角入口以便随时恢复。
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        title="展开侧边栏"
+        aria-label="展开侧边栏"
+        className="sidebar-collapse-btn sidebar-collapse-btn--floating"
+        onClick={onToggleCollapsed}
+      >
+        <PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
+        <span className="sidebar-collapse-btn__label">展开面板</span>
+      </button>
+    );
+  }
+
+  return (
+    <aside
+      className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"} ${
+        headerHidden ? "sidebar-contnet--header-hidden" : ""
+      }`}
+    >
+      <div className="sidebar-contents">
+        {sidebarMenuItemsToRender.map((item) => (
+          <div
+            key={item.id}
+            className="item-nav-group"
+            onMouseEnter={inWujieEnv ? () => handleNavHoverEnter(item.id) : undefined}
+            onMouseLeave={inWujieEnv ? scheduleNavPanelClose : undefined}
+          >
+            {inWujieEnv && item.children?.length ? (
+              <div
+                className={`item-nav-content ${hoveredTopId === item.id ? "item-nav-content--visible" : ""}`}
+              >
+                {renderFlyoutMenu(item.children)}
+              </div>
+            ) : null}
+            <div className="item-nav-wrap">
+              <button
+                type="button"
+                className={`item-nav ${isSidebarItemActive(item) ? "item-nav-active" : ""} ${hoveredTopId === item.id ? "item-nav-hovered" : ""}`}
+                onClick={() => handleSidebarItemClick(item)}
+              >
+                <span className={getSidebarLabelClassName(item.label)}>{item.label}</span>
+              </button>
+              {inWujieEnv && item.children?.length && hoveredTopId === item.id ? (
+                <span className="item-nav-hover-bridge" aria-hidden="true" />
+              ) : null}
+            </div>
+          </div>
+        ))}
+
+        <button
+          type="button"
+          title="收起侧边栏"
+          aria-label="收起侧边栏"
+          className="sidebar-collapse-btn sidebar-collapse-btn--inline"
+          onClick={onToggleCollapsed}
+        >
+          <PanelLeftClose className="sidebar-collapse-btn__icon" aria-hidden="true" />
+          <span className="sidebar-collapse-btn__label">收起面板</span>
+        </button>
+      </div>
+    </aside>
+  );
+}
@@ -0,0 +1,303 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+  Bell,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  Folder,
+  FolderOpen,
+  Settings,
+  User,
+  Wrench,
+} from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { NotificationDialog } from "@/components/workspace/notification-dialog";
+import { SettingsDialog } from "@/components/workspace/settings";
+import { useTheme } from "@/contexts/ThemeContext";
+import { getStoredAuth } from "@/core/auth";
+import { useI18n } from "@/core/i18n/hooks";
+import { useUnreadCount } from "@/core/notifications";
+import {
+  defaultExpandedIds,
+  type MenuItem,
+} from "@/core/page-layout/sidebar-menu";
+import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";
+
+type PageSidebarProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
+
+export function PageSidebar({
+  collapsed,
+  onToggleCollapsed,
+}: PageSidebarProps) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
+  const { t } = useI18n();
+  const { data: unreadCount = 0 } = useUnreadCount();
+  // defaultExpandedIds 是共享的 ReadonlySet，复制一份给 useState（避免外部突变）
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds));
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsDefaultSection, setSettingsDefaultSection] =
+    useState<SettingsSection>("appearance");
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const openSettings = (section: SettingsSection) => {
+    setSettingsDefaultSection(section);
+    setSettingsOpen(true);
+  };
+
+  const iconButtonClass = isDark
+    ? "rounded-lg p-2 text-slate-400 transition-all duration-300 ease-out hover:scale-105 hover:bg-slate-800/50 hover:text-white"
+    : "rounded-lg p-2 text-gray-500 transition-all duration-300 ease-out hover:scale-105 hover:bg-red-50 hover:text-red-600";
+  const panelClass = isDark
+    ? "ml-4 space-y-1 border-l border-blue-800/30 pl-4"
+    : "ml-4 space-y-1 border-l border-red-100 pl-4";
+  const labelClass = (compact: boolean, small = false) =>
+    `overflow-hidden whitespace-nowrap transition-all duration-300 ease-out ${
+      compact ? "max-w-0 opacity-0" : "max-w-[220px] opacity-100"
+    } ${small ? "text-xs" : "text-sm"} flex-1 font-medium`;
+  const menuButtonClass = (isActive: boolean, depth = 0) =>
+    `group relative flex w-full items-center rounded-[2px] py-2 text-left transition-all duration-300 ease-out theme-transition ${
+      collapsed && depth === 0 ? "justify-center px-2" : "gap-3 px-3"
+    } ${
+      isActive
+        ? isDark
+          ? "bg-blue-500/15 text-cyan-300 font-semibold"
+          : "bg-red-50 text-red-600 font-semibold"
+        : isDark
+          ? "text-slate-400 hover:bg-slate-800/50 hover:text-white"
+          : "text-gray-600 hover:bg-red-50 hover:text-red-600"
+    }`;
+  const footerButtonClass = menuButtonClass(false, 0);
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const renderLeaf = (item: MenuItem, depth = 0) => {
+    const Icon = item.icon;
+    const isActive = !!item.path && pathname === item.path;
+
+    return (
+      <button
+        key={item.id}
+        type="button"
+        title={collapsed && depth === 0 ? item.label : undefined}
+        onClick={() => item.path && navigate(item.path)}
+        className={menuButtonClass(isActive, depth)}
+      >
+        {isActive && (
+          <span
+            className={`absolute left-0 inset-y-0 w-[3px] rounded-r ${
+              isDark ? "bg-cyan-300" : "bg-red-600"
+            }`}
+          />
+        )}
+        <Icon className={`${depth === 0 ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105`} />
+        {(!collapsed || depth > 0) && (
+          <span className={labelClass(false, depth > 0)}>
+            {item.label}
+          </span>
+        )}
+      </button>
+    );
+  };
+
+  const renderBranch = (item: MenuItem, depth = 0) => {
+    const expanded = expandedIds.has(item.id);
+    const isTopLevel = depth === 0;
+    const Icon = depth > 0 && item.icon === Folder && expanded ? FolderOpen : item.icon;
+
+    return (
+      <div key={item.id} className="space-y-1">
+        <button
+          type="button"
+          onClick={() => {
+            if (collapsed && isTopLevel) {
+              onToggleCollapsed();
+              return;
+            }
+            toggleExpanded(item.id);
+          }}
+          title={collapsed && isTopLevel ? item.label : undefined}
+          className={menuButtonClass(false, depth)}
+        >
+          <Icon
+            className={`${isTopLevel ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105 ${
+              expanded && depth > 0 ? "scale-105" : ""
+            }`}
+          />
+          {(!collapsed || !isTopLevel) && (
+            <span className={labelClass(false, depth > 0)}>
+              {item.label}
+            </span>
+          )}
+          {(!collapsed || !isTopLevel) && (
+            <ChevronRight
+              className={`h-4 w-4 transition-transform duration-300 ease-out ${expanded ? "rotate-90" : ""}`}
+            />
+          )}
+        </button>
+
+        {(!collapsed || !isTopLevel) && item.children && (
+          <div
+            className={`${panelClass} overflow-hidden transition-all duration-300 ease-out ${
+              expanded ? "max-h-[1200px] opacity-100" : "max-h-0 opacity-0"
+            }`}
+          >
+            {item.children.map((child) =>
+              child.children ? renderBranch(child, depth + 1) : renderLeaf(child, depth + 1),
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
+      <NotificationDialog
+        open={notificationOpen}
+        onOpenChange={setNotificationOpen}
+      />
+      <aside
+        className={`fixed left-0 top-16 z-40 flex h-[calc(100vh-4rem)] flex-col overflow-hidden shadow-sm theme-transition transition-all duration-300 ${
+          isDark
+            ? "border-r border-blue-800/30 bg-slate-900"
+            : "border-r border-red-100 bg-white"
+        } ${collapsed ? "w-16" : "w-64"}`}
+      >
+      <button
+        type="button"
+        onClick={onToggleCollapsed}
+        title={collapsed ? "展开侧边栏" : "收起侧边栏"}
+        className={`absolute -right-3 top-6 z-50 flex h-6 w-6 items-center justify-center rounded-full shadow-md theme-transition ${
+          isDark
+            ? "bg-slate-700 text-slate-300 hover:bg-slate-600"
+            : "bg-white text-gray-500 hover:bg-red-50 hover:text-red-600 border border-red-100"
+        }`}
+      >
+        {collapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
+      </button>
+
+      <nav className={`flex-1 overflow-y-auto ${collapsed ? "p-2" : "p-4"} space-y-2 transition-all duration-300 ease-out`}>
+        {visibleMenuItems.map((item) =>
+          item.children ? renderBranch(item) : renderLeaf(item),
+        )}
+      </nav>
+
+      <div
+        className={`mt-auto shrink-0 theme-transition ${
+          isDark ? "border-t border-blue-800/30" : "border-t border-red-100"
+        } ${collapsed ? "p-2" : "p-4"}`}
+      >
+        {mounted ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                title={collapsed ? t.workspace.settingsAndMore : undefined}
+                className={footerButtonClass}
+              >
+                <Settings className="h-5 w-5 flex-shrink-0" />
+                {!collapsed && (
+                  <>
+                    <span className={labelClass(false)}>
+                      {t.workspace.settingsAndMore}
+                    </span>
+                    <ChevronsUpDown className="h-4 w-4 flex-shrink-0" />
+                  </>
+                )}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align={collapsed ? "start" : "end"}
+              side={collapsed ? "right" : "top"}
+              sideOffset={4}
+              className="min-w-56 rounded-lg"
+            >
+              <DropdownMenuItem onClick={() => setNotificationOpen(true)}>
+                <Bell className="size-4" />
+                {t.notifications.title}
+                {unreadCount > 0 && (
+                  <span
+                    className={`ml-auto flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium leading-none text-white ${
+                      isDark ? "bg-cyan-500" : "bg-red-500"
+                    }`}
+                  >
+                    {unreadCount > 99 ? "99+" : unreadCount}
+                  </span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => openSettings("tools")}>
+                <Wrench className="size-4" />
+                {t.settings.sections.tools}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => openSettings("account")}>
+                <User className="size-4" />
+                个人信息
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <button
+            type="button"
+            className={`${footerButtonClass} pointer-events-none`}
+          >
+            <Settings className="h-5 w-5 flex-shrink-0" />
+            {!collapsed && (
+              <span className={labelClass(false)}>
+                {t.workspace.settingsAndMore}
+              </span>
+            )}
+          </button>
+        )}
+      </div>
+
+      <div
+        className={`pointer-events-none absolute right-0 top-0 h-32 w-32 rounded-full blur-3xl theme-transition ${
+          isDark ? "bg-blue-500/10" : "bg-red-500/5"
+        }`}
+      />
+      <div
+        className={`pointer-events-none absolute bottom-20 right-0 h-24 w-24 rounded-full blur-3xl theme-transition ${
+          isDark ? "bg-cyan-400/5" : "bg-red-400/5"
+        }`}
+      />
+    </aside>
+    </>
+  );
+}
@@ -0,0 +1,642 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+  Bell,
+  Cpu,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  Folder,
+  FolderOpen,
+  Gauge,
+  ListTree,
+  MessageSquareText,
+  MousePointerClick,
+  BriefcaseBusiness,
+  Settings,
+  ShieldAlert,
+  ShieldCheck,
+  User,
+  Wrench,
+} from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { NotificationDialog } from "@/components/workspace/notification-dialog";
+import { SettingsDialog } from "@/components/workspace/settings";
+import { useTheme } from "@/contexts/ThemeContext";
+import { getAccountDisplayName, getStoredAuth } from "@/core/auth";
+
+/** 敏感词管理仅对用户名为 lqq 的账号可见（用户名 = 设置→个人信息页展示名）。 */
+const SENSITIVE_WORDS_USERNAME = "lqq";
+const canManageSensitiveWords = () =>
+  getAccountDisplayName().toLowerCase() === SENSITIVE_WORDS_USERNAME;
+import { isWujieEnv } from "@/core/embed/wujie";
+import { useI18n } from "@/core/i18n/hooks";
+import { useUnreadCount } from "@/core/notifications";
+import {
+  defaultExpandedIds,
+  getActiveThirdLevelItems,
+  menuItemContainsPath,
+  menuItemMatchesPath,
+  type MenuItem,
+} from "@/core/page-layout/sidebar-menu";
+import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";
+
+import "@/components/page-sdebar.css";
+
+type PageSidebarProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  /** Global Header is hidden but this sidebar remains available. */
+  headerHidden?: boolean;
+};
+
+type SettingsSection = "account" | "appearance" | "memory" | "tools" | "encoder" | "about";
+
+const hasActiveChild = (item: MenuItem, pathname: string): boolean =>
+  menuItemContainsPath(item, pathname);
+
+const findFirstRoutePath = (items?: MenuItem[]): string | null => {
+  if (!items?.length) {
+    return null;
+  }
+  for (const child of items) {
+    if (child.path) {
+      return child.path;
+    }
+    const nested = findFirstRoutePath(child.children);
+    if (nested) {
+      return nested;
+    }
+  }
+  return null;
+};
+
+/**
+ * 浅色侧边栏入口。
+ *
+ * - 普通桌面环境：渲染「二级导航图标卡片」（一级在顶栏、二级在侧边栏，参考 导航-1.png）。
+ * - wujie 嵌入环境：顶栏被宿主隐藏，一级导航无处安放，故回落到原手风琴整树菜单
+ *   （保证嵌入模式下所有层级仍可达，零回归）。
+ */
+export function PageSidebar({
+  collapsed,
+  onToggleCollapsed,
+  headerHidden = false,
+}: PageSidebarProps) {
+  if (isWujieEnv()) {
+    return (
+      <LegacyAccordionSidebar
+        collapsed={collapsed}
+        onToggleCollapsed={onToggleCollapsed}
+        headerHidden={headerHidden}
+      />
+    );
+  }
+  return <SecondaryNavSidebar headerHidden={headerHidden} />;
+}
+
+/**
+ * 浅色二级导航侧边栏（图标卡片，红/蓝主题色经 --brand-* 变量自动切换）。
+ * 浅色模式不支持侧边栏收起，故无收起按钮、不接收 collapsed 相关 props。
+ */
+function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
+  const { t } = useI18n();
+  const { data: unreadCount = 0 } = useUnreadCount();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsDefaultSection, setSettingsDefaultSection] =
+    useState<SettingsSection>("appearance");
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const openSettings = (section: SettingsSection) => {
+    setSettingsDefaultSection(section);
+    setSettingsOpen(true);
+  };
+
+  // 当前激活的一级菜单（与顶栏一级导航联动）；其 children 即侧边栏要渲染的二级导航。
+  const activeTopItem =
+    visibleMenuItems.find((item) => hasActiveChild(item, pathname)) ??
+    visibleMenuItems[0];
+  const secondaryItems = activeTopItem?.children ?? [];
+
+  const isItemActive = (item: MenuItem) =>
+    item.path || item.aliasPaths?.length
+      ? menuItemMatchesPath(item, pathname)
+      : menuItemContainsPath(item, pathname);
+
+  const handleItemClick = (item: MenuItem) => {
+    const path = item.path ?? findFirstRoutePath(item.children);
+    if (path) {
+      navigate(path);
+    }
+  };
+
+  // 当前激活二级项的三级子项；非空时侧边栏在右侧展开「三级列」并整体变宽（见 css 过渡）。
+  const thirdItems = getActiveThirdLevelItems(visibleMenuItems, pathname);
+  const expanded = thirdItems.length > 0;
+
+  return (
+    <>
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
+      <NotificationDialog
+        open={notificationOpen}
+        onOpenChange={setNotificationOpen}
+      />
+      <aside
+        className={`light-sidebar ${expanded ? "light-sidebar--expanded" : ""} ${
+          headerHidden ? "light-sidebar--header-hidden" : ""
+        }`}
+      >
+        {/* 一级列：二级图标卡片 + 底部设置 */}
+        <div className="light-sidebar__primary">
+          <nav className="light-sidebar__list" aria-label="二级菜单">
+            {secondaryItems.map((item) => {
+              const Icon = item.icon;
+              const active = isItemActive(item);
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  title={item.label}
+                  onClick={() => handleItemClick(item)}
+                  className={`light-sidebar-item ${active ? "light-sidebar-item--active" : ""}`}
+                >
+                  <Icon className="light-sidebar-item__icon h-7 w-7" />
+                  <span className="light-sidebar-item__label">{item.label}</span>
+                </button>
+              );
+            })}
+          </nav>
+
+          <div className="light-sidebar__footer">
+            {mounted ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    title={t.workspace.settingsAndMore}
+                    className="light-sidebar-item"
+                  >
+                    <Settings className="light-sidebar-item__icon h-7 w-7" />
+                    <span className="light-sidebar-item__label">设置</span>
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="start"
+                  side="right"
+                  sideOffset={8}
+                  className="min-w-56 rounded-lg"
+                >
+                  <DropdownMenuItem onClick={() => setNotificationOpen(true)}>
+                    <Bell className="size-4" />
+                    {t.notifications.title}
+                    {unreadCount > 0 && (
+                      <span className="ml-auto flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--brand-900)] px-1 text-[10px] font-medium leading-none text-white">
+                        {unreadCount > 99 ? "99+" : unreadCount}
+                      </span>
+                    )}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => openSettings("tools")}>
+                    <Wrench className="size-4" />
+                    {t.settings.sections.tools}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => openSettings("account")}>
+                    <User className="size-4" />
+                    个人信息
+                  </DropdownMenuItem>
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/strategy/admin/menu-management")}
+                    >
+                      <ListTree className="size-4" />
+                      菜单管理
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/strategy/admin/task-buttons")}
+                    >
+                      <MousePointerClick className="size-4" />
+                      按钮管理
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/strategy/admin/fixed-questions")}
+                    >
+                      <MessageSquareText className="size-4" />
+                      问题配置
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/strategy/admin/position-roles")}
+                    >
+                      <BriefcaseBusiness className="size-4" />
+                      岗位角色配置
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/strategy/admin/login-whitelist")}
+                    >
+                      <ShieldCheck className="size-4" />
+                      白名单管理
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/workspace/admin/models")}
+                    >
+                      <Cpu className="size-4" />
+                      模型配置
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem onClick={() => openSettings("encoder")}>
+                      <Cpu className="size-4" />
+                      本地编码器
+                    </DropdownMenuItem>
+                  )}
+                  {isAdmin && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/strategy/settings/model-concurrency")}
+                    >
+                      <Gauge className="size-4" />
+                      模型并发限制
+                    </DropdownMenuItem>
+                  )}
+                  {canManageSensitiveWords() && (
+                    <DropdownMenuItem
+                      onClick={() => navigate("/page/strategy/admin/sensitive-words")}
+                    >
+                      <ShieldAlert className="size-4" />
+                      敏感词管理
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : null}
+          </div>
+        </div>
+
+        {/* 二级列：三级导航（激活二级项有三级子项时展开，整体动画见 css width transition） */}
+        <div className="light-sidebar__secondary" aria-hidden={!expanded}>
+          <nav className="light-sidebar-subnav" aria-label="三级菜单">
+            {thirdItems.map((child) => {
+              const ChildIcon = child.icon;
+              const childActive = menuItemMatchesPath(child, pathname)
+                || (child.children?.length ? menuItemContainsPath(child, pathname) : false);
+              return (
+                <button
+                  key={child.id}
+                  type="button"
+                  title={child.label}
+                  onClick={() => handleItemClick(child)}
+                  className={`light-sidebar-subitem ${childActive ? "light-sidebar-subitem--active" : ""}`}
+                >
+                  <ChildIcon className="light-sidebar-subitem__icon h-4 w-4" />
+                  <span className="light-sidebar-subitem__label">{child.label}</span>
+                </button>
+              );
+            })}
+          </nav>
+        </div>
+      </aside>
+    </>
+  );
+}
+
+/**
+ * 旧版浅色整树手风琴侧边栏。仅用于 wujie 嵌入环境（顶栏被宿主隐藏时保证所有层级可达）。
+ */
+function LegacyAccordionSidebar({
+  collapsed,
+  onToggleCollapsed,
+  headerHidden,
+}: PageSidebarProps) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
+  const { t } = useI18n();
+  const { data: unreadCount = 0 } = useUnreadCount();
+  // defaultExpandedIds 是共享的 ReadonlySet，复制一份给 useState（避免外部突变）
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds));
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsDefaultSection, setSettingsDefaultSection] =
+    useState<SettingsSection>("appearance");
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const openSettings = (section: SettingsSection) => {
+    setSettingsDefaultSection(section);
+    setSettingsOpen(true);
+  };
+
+  const panelClass = isDark
+    ? "ml-4 space-y-1 border-l border-blue-800/30 pl-4"
+    : "ml-4 space-y-1 border-l border-red-100 pl-4";
+  const labelClass = (compact: boolean, small = false) =>
+    `overflow-hidden whitespace-nowrap transition-all duration-300 ease-out ${
+      compact ? "max-w-0 opacity-0" : "max-w-[220px] opacity-100"
+    } ${small ? "text-xs" : "text-sm"} flex-1 font-medium`;
+  const menuButtonClass = (isActive: boolean, depth = 0) =>
+    `group relative flex w-full items-center rounded-[2px] py-2 text-left transition-all duration-300 ease-out theme-transition ${
+      collapsed && depth === 0 ? "justify-center px-2" : "gap-3 px-3"
+    } ${
+      isActive
+        ? isDark
+          ? "bg-blue-500/15 text-cyan-300 font-semibold"
+          : "bg-red-50 text-red-600 font-semibold"
+        : isDark
+          ? "text-slate-400 hover:bg-slate-800/50 hover:text-white"
+          : "text-gray-600 hover:bg-red-50 hover:text-red-600"
+    }`;
+  const footerButtonClass = menuButtonClass(false, 0);
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const renderLeaf = (item: MenuItem, depth = 0) => {
+    const Icon = item.icon;
+    const isActive = menuItemMatchesPath(item, pathname);
+
+    return (
+      <button
+        key={item.id}
+        type="button"
+        title={collapsed && depth === 0 ? item.label : undefined}
+        onClick={() => item.path && navigate(item.path)}
+        className={menuButtonClass(isActive, depth)}
+      >
+        {isActive && (
+          <span
+            className={`absolute left-0 inset-y-0 w-[3px] rounded-r ${
+              isDark ? "bg-cyan-300" : "bg-red-600"
+            }`}
+          />
+        )}
+        <Icon className={`${depth === 0 ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105`} />
+        {(!collapsed || depth > 0) && (
+          <span className={labelClass(false, depth > 0)}>
+            {item.label}
+          </span>
+        )}
+      </button>
+    );
+  };
+
+  const renderBranch = (item: MenuItem, depth = 0) => {
+    const expanded = expandedIds.has(item.id);
+    const isTopLevel = depth === 0;
+    const Icon = depth > 0 && item.icon === Folder && expanded ? FolderOpen : item.icon;
+
+    return (
+      <div key={item.id} className="space-y-1">
+        <button
+          type="button"
+          onClick={() => {
+            if (collapsed && isTopLevel) {
+              onToggleCollapsed();
+              return;
+            }
+            toggleExpanded(item.id);
+          }}
+          title={collapsed && isTopLevel ? item.label : undefined}
+          className={menuButtonClass(false, depth)}
+        >
+          <Icon
+            className={`${isTopLevel ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105 ${
+              expanded && depth > 0 ? "scale-105" : ""
+            }`}
+          />
+          {(!collapsed || !isTopLevel) && (
+            <span className={labelClass(false, depth > 0)}>
+              {item.label}
+            </span>
+          )}
+          {(!collapsed || !isTopLevel) && (
+            <ChevronRight
+              className={`h-4 w-4 transition-transform duration-300 ease-out ${expanded ? "rotate-90" : ""}`}
+            />
+          )}
+        </button>
+
+        {(!collapsed || !isTopLevel) && item.children && (
+          <div
+            className={`${panelClass} overflow-hidden transition-all duration-300 ease-out ${
+              expanded ? "max-h-[1200px] opacity-100" : "max-h-0 opacity-0"
+            }`}
+          >
+            {item.children.map((child) =>
+              child.children ? renderBranch(child, depth + 1) : renderLeaf(child, depth + 1),
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
+      <NotificationDialog
+        open={notificationOpen}
+        onOpenChange={setNotificationOpen}
+      />
+      <aside
+        className={`fixed left-0 z-40 flex flex-col overflow-hidden shadow-sm theme-transition transition-all duration-300 ${
+          headerHidden ? "top-0 h-screen" : "top-16 h-[calc(100vh-4rem)]"
+        } ${
+          isDark
+            ? "border-r border-blue-800/30 bg-slate-900"
+            : "border-r border-red-100 bg-white"
+        } ${collapsed ? "w-16" : "w-64"}`}
+      >
+      <button
+        type="button"
+        onClick={onToggleCollapsed}
+        title={collapsed ? "展开侧边栏" : "收起侧边栏"}
+        className={`absolute -right-3 top-6 z-50 flex h-6 w-6 items-center justify-center rounded-full shadow-md theme-transition ${
+          isDark
+            ? "bg-slate-700 text-slate-300 hover:bg-slate-600"
+            : "bg-white text-gray-500 hover:bg-red-50 hover:text-red-600 border border-red-100"
+        }`}
+      >
+        {collapsed ? <ChevronRight className="h-3 w-3" /> : <ChevronLeft className="h-3 w-3" />}
+      </button>
+
+      <nav className={`flex-1 overflow-y-auto ${collapsed ? "p-2" : "p-4"} space-y-2 transition-all duration-300 ease-out`}>
+        {visibleMenuItems.map((item) =>
+          item.children ? renderBranch(item) : renderLeaf(item),
+        )}
+      </nav>
+
+      <div
+        className={`mt-auto shrink-0 theme-transition ${
+          isDark ? "border-t border-blue-800/30" : "border-t border-red-100"
+        } ${collapsed ? "p-2" : "p-4"}`}
+      >
+        {mounted ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                title={collapsed ? t.workspace.settingsAndMore : undefined}
+                className={footerButtonClass}
+              >
+                <Settings className="h-5 w-5 flex-shrink-0" />
+                {!collapsed && (
+                  <>
+                    <span className={labelClass(false)}>
+                      {t.workspace.settingsAndMore}
+                    </span>
+                    <ChevronsUpDown className="h-4 w-4 flex-shrink-0" />
+                  </>
+                )}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align={collapsed ? "start" : "end"}
+              side={collapsed ? "right" : "top"}
+              sideOffset={4}
+              className="min-w-56 rounded-lg"
+            >
+              <DropdownMenuItem onClick={() => setNotificationOpen(true)}>
+                <Bell className="size-4" />
+                {t.notifications.title}
+                {unreadCount > 0 && (
+                  <span
+                    className={`ml-auto flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium leading-none text-white ${
+                      isDark ? "bg-cyan-500" : "bg-red-500"
+                    }`}
+                  >
+                    {unreadCount > 99 ? "99+" : unreadCount}
+                  </span>
+                )}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => openSettings("tools")}>
+                <Wrench className="size-4" />
+                {t.settings.sections.tools}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => openSettings("account")}>
+                <User className="size-4" />
+                个人信息
+              </DropdownMenuItem>
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => navigate("/page/strategy/admin/menu-management")}>
+                  <ListTree className="size-4" />
+                  菜单管理
+                </DropdownMenuItem>
+              )}
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => navigate("/page/strategy/admin/task-buttons")}>
+                  <MousePointerClick className="size-4" />
+                  按钮管理
+                </DropdownMenuItem>
+              )}
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => navigate("/page/strategy/admin/fixed-questions")}>
+                  <MessageSquareText className="size-4" />
+                  问题配置
+                </DropdownMenuItem>
+              )}
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => navigate("/page/strategy/admin/position-roles")}>
+                  <BriefcaseBusiness className="size-4" />
+                  岗位角色配置
+                </DropdownMenuItem>
+              )}
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => navigate("/page/workspace/admin/models")}>
+                  <Cpu className="size-4" />
+                  模型配置
+                </DropdownMenuItem>
+              )}
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => openSettings("encoder")}>
+                  <Cpu className="size-4" />
+                  本地编码器
+                </DropdownMenuItem>
+              )}
+              {isAdmin && (
+                <DropdownMenuItem onClick={() => navigate("/page/strategy/admin/login-whitelist")}>
+                  <ShieldCheck className="size-4" />
+                  白名单管理
+                </DropdownMenuItem>
+              )}
+              {canManageSensitiveWords() && (
+                <DropdownMenuItem onClick={() => navigate("/page/strategy/admin/sensitive-words")}>
+                  <ShieldAlert className="size-4" />
+                  敏感词管理
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <button
+            type="button"
+            className={`${footerButtonClass} pointer-events-none`}
+          >
+            <Settings className="h-5 w-5 flex-shrink-0" />
+            {!collapsed && (
+              <span className={labelClass(false)}>
+                {t.workspace.settingsAndMore}
+              </span>
+            )}
+          </button>
+        )}
+      </div>
+
+      <div
+        className={`pointer-events-none absolute right-0 top-0 h-32 w-32 rounded-full blur-3xl theme-transition ${
+          isDark ? "bg-blue-500/10" : "bg-red-500/5"
+        }`}
+      />
+      <div
+        className={`pointer-events-none absolute bottom-20 right-0 h-24 w-24 rounded-full blur-3xl theme-transition ${
+          isDark ? "bg-cyan-400/5" : "bg-red-400/5"
+        }`}
+      />
+    </aside>
+    </>
+  );
+}
@@ -0,0 +1,20 @@
+"use client";
+
+import {
+  QueryClient,
+  QueryClientProvider as TanStackQueryClientProvider,
+} from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();
+
+export function QueryClientProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <TanStackQueryClientProvider client={queryClient}>
+      {children}
+    </TanStackQueryClientProvider>
+  );
+}
@@ -0,0 +1,19 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  const pathname = usePathname();
+  return (
+    <NextThemesProvider
+      {...props}
+      forcedTheme={pathname === "/landing" ? "dark" : undefined}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:url(#a);}</style><linearGradient id="a" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><g transform="translate(-128.5 -117)"><rect class="a" width="16" height="16" transform="translate(128.5 117)"/><path class="b" d="M4,0,8,5H0Z" transform="translate(140.5 128) rotate(180)"/></g></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M24.036,10l-.012,9.333" transform="translate(-16.016 -6.667)"/><path class="b" d="M10,24h9.333" transform="translate(-6.667 -16)"/></svg>`