feat: improve app ui and project metadata

apps/web/components/toolbox/ToolboxPage.tsx

@@ -2,8 +2,11 @@
 
 import { useCallback, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
+import { Sparkles } from "lucide-react";
 
 import { AppShell } from "@/components/AppShell";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { PageHeader } from "@/components/ui/PageHeader";
 import type { ProjectResponse, ToolDescriptorView } from "@/lib/api/types";
 import { isLegacyTool, resolveLegacyRoute } from "@/lib/toolbox/toolbox";
 import { ToolCard } from "./ToolCard";
@@ -63,13 +66,11 @@ export function ToolboxPage({
       activeNav="toolbox"
     >
       <div className="mx-auto flex max-w-5xl flex-col gap-6 p-6">
-        <header>
-          <h1 className="font-serif text-lg text-ink">创作工具箱</h1>
-          <p className="mt-1 text-xs text-ink-soft">
-            声明驱动的生成器集合：脑洞 / 书名 / 简介 / 名字 / 金手指 / 词条 / 黄金开篇 / 细纲…
-            选一个开始，结构化产物可一键入库（经一致性预检）。
-          </p>
-        </header>
+        <PageHeader
+          title="创作工具箱"
+          eyebrow="generator toolbox"
+          description="脑洞、书名、简介、名字、金手指、词条、黄金开篇与细纲。每个工具都先生成结构化预览，可入库内容会经过一致性预检。"
+        />
 
         {active ? (
           <GeneratorRunner
@@ -78,7 +79,11 @@ export function ToolboxPage({
             onClose={() => setActive(null)}
           />
         ) : sorted.length === 0 ? (
-          <p className="text-sm text-ink-soft">（暂无可用生成器）</p>
+          <EmptyState
+            icon={Sparkles}
+            title="暂无可用生成器"
+            description="后端暂未返回工具描述符。工具箱会在描述符可用后自动渲染卡片与输入表单。"
+          />
         ) : (
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
             {sorted.map((tool) => (