feat(ux): T4-a 全局 AI 工具条 — 项目页顶部常驻写本章/审稿/大纲/设定库/工具箱

新 lib/nav/ai-tools.ts (aiToolItems) + components/AiToolbar.tsx 服务端组件；AppShell 顶栏下渲染（仅项目页），用 --chrome CSS 变量统一 chrome 高度，6 个固定高度页改用 calc(100vh-var(--chrome,4rem)) 适配。TDD: ai-tools 测。前端门禁绿: lint/tsc/vitest/build。

apps/web/components/AiToolbar.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+
+import { aiToolItems } from "@/lib/nav/ai-tools";
+import type { ActiveNav } from "@/lib/nav/items";
+
+interface AiToolbarProps {
+  projectId: string;
+  activeNav?: ActiveNav;
+}
+
+// T4-a · 项目内页常驻 AI 工具条（顶栏下，UX §3/§5）。
+// 纯链接服务端组件：写本章=朱砂主动作，其余次级；激活项朱砂高亮。窄屏横向滚动。
+export function AiToolbar({ projectId, activeNav }: AiToolbarProps) {
+  return (
+    <nav
+      aria-label="AI 工具条"
+      className="flex h-12 items-center gap-2 overflow-x-auto whitespace-nowrap border-b border-line bg-panel px-4 sm:px-6"
+    >
+      {aiToolItems(projectId).map((item) => {
+        const isActive = item.key === activeNav;
+        const className = toolClassName(item.primary === true, isActive);
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            aria-current={isActive ? "page" : undefined}
+            className={className}
+          >
+            <span aria-hidden="true">{item.glyph}</span>
+            <span>{item.label}</span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+function toolClassName(isPrimary: boolean, isActive: boolean): string {
+  const base =
+    "flex items-center gap-1.5 rounded border px-3 py-1.5 text-sm transition-colors";
+  if (isActive) {
+    return `${base} border-cinnabar text-cinnabar`;
+  }
+  if (isPrimary) {
+    return `${base} border-cinnabar bg-cinnabar text-panel hover:border-cinnabar`;
+  }
+  return `${base} border-line text-ink-soft hover:border-cinnabar hover:text-cinnabar`;
+}

apps/web/components/AppShell.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import type { ReactNode } from "react";
 
 import type { ActiveNav } from "@/lib/nav/items";
+import { AiToolbar } from "./AiToolbar";
 import { LeftNav } from "./LeftNav";
 import { NavDrawer } from "./NavDrawer";
 
@@ -25,7 +26,10 @@ export function AppShell({
   activeNav,
 }: AppShellProps) {
   return (
-    <div className="min-h-screen">
+    <div
+      className="min-h-screen"
+      style={{ ["--chrome" as string]: projectId ? "7rem" : "4rem" }}
+    >
       <header className="flex h-16 items-center gap-4 border-b border-line bg-panel px-4 sm:px-6">
         <NavDrawer projectId={projectId} activeNav={activeNav} />
         <Link
@@ -50,9 +54,14 @@ export function AppShell({
           </Link>
         </nav>
       </header>
+      {projectId ? (
+        <AiToolbar projectId={projectId} activeNav={activeNav} />
+      ) : null}
       <div className="flex">
         <LeftNav projectId={projectId} activeNav={activeNav} />
-        <main className="min-h-[calc(100vh-4rem)] flex-1 bg-bg">{children}</main>
+        <main className="min-h-[calc(100vh-var(--chrome,4rem))] flex-1 bg-bg">
+          {children}
+        </main>
       </div>
     </div>
   );

apps/web/components/codex/CodexPage.tsx

@@ -59,7 +59,7 @@ export function CodexPage({
       projectId={project.id}
       activeNav="codex"
     >
-      <div className="flex h-[calc(100vh-4rem)] flex-col p-4">
+      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-4">
         <div className="mb-4 flex items-center gap-2" role="tablist">
           {TABS.map((t) => (
             <button

apps/web/components/foreshadow/ForeshadowBoard.tsx

@@ -46,7 +46,7 @@ export function ForeshadowBoard({
       projectId={project.id}
       activeNav="foreshadow"
     >
-      <div className="flex h-[calc(100vh-4rem)] flex-col p-4">
+      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-4">
         <div className="mb-4 flex items-start justify-between gap-4">
           <h1 className="font-serif text-lg text-ink">伏笔看板</h1>
           <RegisterForm

apps/web/components/outline/OutlineEditor.tsx

@@ -31,7 +31,7 @@ export function OutlineEditor({
       projectId={project.id}
       activeNav="outline"
     >
-      <div className="flex h-[calc(100vh-4rem)] flex-col p-6">
+      <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-6">
         <div className="mb-4 flex items-center gap-3">
           <h1 className="font-serif text-lg text-ink">大纲</h1>
           <label htmlFor="vol" className="ml-auto text-xs text-ink-soft">

apps/web/components/review/ReviewReport.tsx

@@ -215,7 +215,7 @@ export function ReviewReport({
       projectId={project.id}
       activeNav="review"
     >
-      <div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[1fr_24rem]">
+      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[1fr_24rem]">
         {/* 左：终稿正文 + 就地标注 */}
         <section className="flex min-w-0 flex-col bg-bg">
           <div className="flex items-center gap-3 border-b border-line bg-panel px-6 py-3">

apps/web/components/style/StylePage.tsx

@@ -27,7 +27,7 @@ export function StylePage({ project, initialFingerprint }: StylePageProps) {
       projectId={project.id}
       activeNav="style"
     >
-      <div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[28rem_1fr]">
+      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[28rem_1fr]">
         <section className="flex flex-col overflow-auto border-r border-line bg-panel px-6 py-6">
           <h1 className="mb-3 font-serif text-lg text-ink">学习文风</h1>
           <StyleUpload

apps/web/components/workbench/Workbench.tsx

@@ -70,7 +70,7 @@ export function Workbench({ project, initialText = "" }: WorkbenchProps) {
       projectId={project.id}
       activeNav="write"
     >
-      <div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[12rem_1fr_18rem]">
+      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[12rem_1fr_18rem]">
         <ChapterList currentChapterNo={chapterNo} />
 
         <section className="flex min-w-0 flex-col bg-bg">