Improve Docker dependency caching and isolate Python runtime

Reviewed-on: #45

.dockerignore

@@ -22,3 +22,18 @@ coverage
 
 # Local authoring assets are uploaded via APIs, never application build inputs.
 /content
+
+# Apply local metadata, secrets and generated-output exclusions at every depth.
+**/.git
+**/.worktrees
+**/.pnpm-store
+**/.turbo
+**/.nx
+**/coverage
+**/artifacts
+**/.pytest_cache
+**/*.egg-info
+**/*.tsbuildinfo
+**/.env
+**/.env.*
+!**/.env.example

.gitea/workflows/brand.yml

@@ -3,6 +3,7 @@ on:
   pull_request:
     branches: [main]
     paths:
+      - '.dockerignore'
       - 'packages/brand/**'
       - 'pnpm-workspace.yaml'
       - 'package.json'
@@ -11,6 +12,7 @@ on:
   push:
     branches: [main]
     paths:
+      - '.dockerignore'
       - 'packages/brand/**'
       - 'pnpm-workspace.yaml'
       - '.gitea/workflows/brand.yml'

.gitea/workflows/creative-workspace.yml

@@ -3,7 +3,11 @@ on:
   pull_request:
     branches: [main]
     paths:
+      - '.dockerignore'
+      - 'Dockerfile'
+      - 'pnpm-workspace.yaml'
       - 'apps/studio/**'
+      - 'packages/brand/**'
       - 'apps/waterfall-wiki/**'
       - '.gitea/workflows/**'
       - 'scripts/*studio*'
@@ -19,21 +23,27 @@ concurrency:
 jobs:
   verify-deployed-canvas:
     runs-on: ces-control
-    timeout-minutes: 10
+    timeout-minutes: 15
     steps:
       - uses: actions/checkout@v4
-      - name: Verify canvas acceptance script against the designated deployed server
+      - name: Verify production acceptance against the designated deployed server
         run: |
+          node --check scripts/verify-studio-visual.cjs
           node --check apps/studio/scripts/infinite-canvas-smoke.cjs
-          wiki_image=$(docker inspect --format '{{.Config.Image}}' prompt-waterfall-wiki-1)
-          [[ "$wiki_image" =~ ^waterfall-wiki:[0-9a-f]{40}$ ]]
-          test_image="waterfall-wiki-tests:${wiki_image#waterfall-wiki:}"
-          docker image inspect "$test_image" >/dev/null
-          docker run --rm \
-            --mount "type=bind,src=$PWD,dst=/delivery,readonly" \
-            -e NODE_PATH=/repo/apps/waterfall-wiki/node_modules \
-            -e CHROMIUM_PATH=/usr/bin/chromium \
-            --entrypoint node "$test_image" /delivery/apps/studio/scripts/infinite-canvas-smoke.cjs
+          bash -n scripts/verify-studio-production.sh
+          bash scripts/verify-studio-production.sh
+      - name: Save server acceptance evidence
+        id: acceptance_evidence
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: studio-production-acceptance
+          path: artifacts/studio-acceptance/
+          if-no-files-found: ignore
+          retention-days: 7
+      - name: Remove temporary acceptance output after upload
+        if: always() && steps.acceptance_evidence.outcome == 'success'
+        run: rm -rf artifacts/studio-acceptance
   verify:
     runs-on: ces-control
     timeout-minutes: 60

.gitea/workflows/python.yml

@@ -1,15 +1,22 @@
 name: python CI and deployment
 on:
+  pull_request:
+    branches: [main]
+    paths:
+      - '.dockerignore'
+      - 'apps/python/**'
+      - 'scripts/deploy-python.sh'
+      - '.gitea/workflows/python.yml'
   push:
     branches: [main]
     paths:
+      - '.dockerignore'
       - 'apps/python/**'
       - 'scripts/deploy-python.sh'
       - '.gitea/workflows/python.yml'
 
 jobs:
   verify-and-deploy:
-    if: gitea.ref == 'refs/heads/main' && gitea.event_name == 'push'
     runs-on: ces-control
     timeout-minutes: 45
     steps:

.gitea/workflows/waterfall-wiki.yml

@@ -3,8 +3,10 @@ on:
   push:
     branches: [main]
     paths:
+      - '.dockerignore'
       - 'apps/waterfall-wiki/**'
       - 'apps/studio/**'
+      - 'packages/brand/**'
       - 'scripts/*studio*'
       - 'content/studio-examples/**'
       - 'content/studio-tools/layouts-api.md'

Dockerfile

@@ -12,12 +12,14 @@ LABEL io.entroia.wiki.build="true"
 RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
 COPY apps/waterfall-wiki/pnpm-lock.yaml ./
 COPY pnpm-workspace.yaml /repo/pnpm-workspace.yaml
-COPY packages/brand/ /repo/packages/brand/
+COPY packages/brand/package.json /repo/packages/brand/package.json
 COPY apps/waterfall-wiki/package.json ./
 RUN pnpm --filter @prompt/waterfall-wiki install --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
 
 FROM dependencies AS build
 # .dockerignore excludes docs and operational notes without extra legacy COPY snapshots.
+# Brand source changes invalidate compilation, not dependency installation.
+COPY packages/brand/ /repo/packages/brand/
 COPY apps/waterfall-wiki/ .
 RUN pnpm typecheck && pnpm test && pnpm build && pnpm test:smoke
 

apps/python/Dockerfile

@@ -1,8 +1,22 @@
-FROM python:3.12-slim
+FROM python:3.12-slim AS base
 RUN apt-get update && apt-get install -y --no-install-recommends ffmpeg fonts-noto-cjk && rm -rf /var/lib/apt/lists/*
+
+FROM base AS dependencies
+ENV PATH="/opt/venv/bin:$PATH"
 WORKDIR /app
+RUN python -m venv /opt/venv
+COPY apps/python/pyproject.toml ./
+# Read the pinned requirements from the package metadata before copying source.
+RUN python -c 'import subprocess, tomllib; p = tomllib.load(open("pyproject.toml", "rb")); subprocess.check_call(["python", "-m", "pip", "install", "--no-cache-dir", *p["build-system"]["requires"], *p["project"]["dependencies"]])'
+
+FROM dependencies AS build
 COPY apps/python/ .
-RUN pip install --no-cache-dir . && python -m unittest discover -s tests -v
+RUN pip install --no-cache-dir --no-deps --no-build-isolation . && python -m unittest discover -s tests -v
+
+FROM base AS runtime
+WORKDIR /app
+ENV PATH="/opt/venv/bin:$PATH"
+COPY --from=build /opt/venv /opt/venv
 RUN useradd --create-home exporter
 USER exporter
 ENTRYPOINT ["prompt-export"]

apps/studio/Dockerfile

@@ -3,9 +3,11 @@ WORKDIR /repo/apps/studio
 RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
 COPY apps/studio/pnpm-lock.yaml ./
 COPY pnpm-workspace.yaml /repo/pnpm-workspace.yaml
-COPY packages/brand/ /repo/packages/brand/
+COPY packages/brand/package.json /repo/packages/brand/package.json
 COPY apps/studio/package.json ./
 RUN pnpm --filter @prompt/studio install --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
+# Brand source changes invalidate compilation, not dependency installation.
+COPY packages/brand/ /repo/packages/brand/
 COPY apps/studio/ .
 # Compare the two public parameter validators inside the isolated CI build.
 COPY apps/waterfall-wiki/src/lib/layout-parameters.ts /repo/apps/waterfall-wiki/src/lib/layout-parameters.ts

apps/waterfall-wiki/Dockerfile

@@ -10,12 +10,14 @@ WORKDIR /repo/apps/waterfall-wiki
 RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
 COPY apps/waterfall-wiki/pnpm-lock.yaml ./
 COPY pnpm-workspace.yaml /repo/pnpm-workspace.yaml
-COPY packages/brand/ /repo/packages/brand/
+COPY packages/brand/package.json /repo/packages/brand/package.json
 COPY apps/waterfall-wiki/package.json ./
 RUN pnpm --filter @prompt/waterfall-wiki install --frozen-lockfile --fetch-timeout=300000 --network-concurrency=8
 
 FROM dependencies AS build
 # .dockerignore excludes docs and operational notes without extra legacy COPY snapshots.
+# Brand source changes invalidate compilation, not dependency installation.
+COPY packages/brand/ /repo/packages/brand/
 COPY apps/waterfall-wiki/ .
 RUN pnpm typecheck && pnpm test && pnpm build && pnpm test:smoke
 

apps/waterfall-wiki/src/components/GuidanceShell.tsx

@@ -1,3 +1,4 @@
+import a from "@/styles/account.module.css";
 import { ThemeToggle } from "./ThemeToggle";
 import { Brand } from "./Brand";
 import Head from "next/head";
@@ -191,11 +192,10 @@ export default function GuidanceShell({
   }
   if (standalone) return (
     <AccountContext.Provider value={{ user, loading, error, refresh }}>
-      <div className={s.accountPage}>
+      <div className={a.page}>
         <Head><title>{`${title} · 啡跃`}</title></Head>
         <a className={s.skipLink} href="#account-content">跳到正文</a>
-        <header className={s.accountHeader}>
-          <Link href="/" aria-label="啡跃首页"><Brand /></Link>
+        <header className={a.header}>
           <div><Link href="/">返回首页</Link><ThemeToggle /></div>
         </header>
         <main id="account-content">{children}</main>

apps/waterfall-wiki/src/components/LandingSketches.tsx

@@ -0,0 +1,25 @@
+type Pose = "idea" | "read" | "make" | "collect" | "dream";
+
+/** Original theme-aware line drawings, independent of the fixed brand mark. */
+export function CreatorSketch({ pose }: { pose: Pose }) {
+  return <svg viewBox="0 0 200 220" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M13 17 185 14l3 176-174 3ZM17 202q42-3 86 0m-85 8 62 1" strokeWidth="1.5" />
+    <path d="M42 188q3-46 31-60l42 1q28 16 42 59" fill="var(--selection)" />
+    <path d="M78 64q-20-3-15-20 5-15 21-11 11-15 29-6 20 7 11 31l-18-10-15 18Z" fill="currentColor" />
+    <path d="M79 63q-11 5-5 17l8 2q1 27 21 29 21-4 21-39l-3-15m-34 52-5 20m24-18 7 18m-17-58-2 13 8 2m-9 13q9 5 17-3m-23-23h1m24-1h1" />
+    {pose === "idea" && <><path d="m117 135 17-38 13-48 11 3-7 53-14 49M68 143l-5 27 37 15" fill="var(--background)" /><path d="m141 70-8-31 26-9 11 29Z" fill="var(--selection)" /><path d="m142 42 14-5m-11 14 13-5m-10 13 12-5M151 22V12m16 14 8-7m-41 12-9-4" /></>}
+    {pose === "read" && <><path d="m49 132 49 16 46-20-4 58-41 15-46-15Z" fill="var(--background)" /><path d="m98 148 1 53m-35-54 23 8m-22 3 20 7m-19 3 16 6m28-16 20-8m-20 19 18-7m-18 17 15-6" /><path d="m50 162 12-5q8 1 5 8l-14 13m89-17-12-4q-9 0-6 7l15 12" fill="var(--background)" /></>}
+    {pose === "make" && <><path d="m99 143 65-7 15 51-68 5Z" fill="var(--background)" /><path d="m101 150-22 3-8 19 32 5m-39-6 16 7 29-2m21-12h13m-28 29H37" /><path d="m151 46 5-14 8 12 15 2-11 9 1 15-13-8-13 5 4-13-10-10Z" fill="var(--selection)" /></>}
+    {pose === "collect" && <><path d="m60 156 15-18 53 7-5 40-62-5Z" fill="var(--background)" /><path d="m76 138 8-11 19 3 7 13m-12 9a12 12 0 1 0 1 24 12 12 0 0 0-1-24m-36 10-11-5-8 8 15 15m64-21 15 9-13 11" /><path d="m143 68 25-7 7 31-25 7Zm7 14 6-6 10 9m-8-14h1" stroke="var(--primary)" /></>}
+    {pose === "dream" && <><path d="m82 136 16 30 26-6 12-36m-18 38 18 11 11-35-7-20q-4-7-8-3l-2 14-6-7m-46 26-9 25 28 14 37-13" fill="var(--background)" /><path d="m142 32 29-10-13 25-4-12-12-3 12 3 17-13m-36 25q-21 4-15 17t25 2" stroke="var(--primary)" /></>}
+  </svg>;
+}
+
+export function IdeaSketch({ kind }: { kind: "collect" | "connect" | "read" | "make" }) {
+  return <svg viewBox="0 0 140 110" fill="none" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    {kind === "collect" && <><path d="m43 25 49-5 7 64-53 6Z" fill="var(--selection)" /><path d="m54 39 25-2m-24 14 30-3m-28 14 21-2m20-23 18-20 7 7-20 21-9 3ZM34 18l-6-8m19 3-1-10m61 62 8 3m-81 2-10 2" /></>}
+    {kind === "connect" && <><path d="M42 37q27-31 50-1m-48 8q27-17 47-1M45 62q23 28 46 2" /><path d="m18 32 29-3 3 34-31 2Zm72-8 32 4-3 33-30-3ZM52 73l32-1 2 25-32 2Z" fill="var(--selection)" /><path d="m26 43 14-1m-13 9 10-1m62-13 13 2m-13 7 11 1M62 83h13m-12 7h9" /></>}
+    {kind === "read" && <><path d="M20 30q25-8 49 7 24-17 51-10l-3 56q-24-5-48 10-22-13-47-7Z" fill="var(--selection)" /><path d="m69 37 0 56M32 42q13-1 25 5m-23 8 21 5m-21 8 20 4m27-27 24-6m-23 19 21-6m-20 18 18-4m-35-44-2-11m17 10 6-10" /></>}
+    {kind === "make" && <><path d="m24 29 85-3 5 63-86 4ZM31 41h71M45 34h1m-10 0h1m20-1h1m-18 21 21-2 1 26-22 1Zm31 0 27-1m-26 12 20-1m-19 13 24-1" /><path d="m103 14 7-11 4 12 13 2-10 8 2 11-10-6-10 7 2-12-10-7Z" fill="var(--selection)" /></>}
+  </svg>;
+}

apps/waterfall-wiki/src/pages/account.tsx

@@ -1,23 +1,19 @@
-import { Brand } from "../components/Brand";
+import { Brand } from "@/components/Brand";
+import a from "@/styles/account.module.css";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState, type FormEvent } from "react";
 import {
   ArrowRight,
-  BookOpen,
   CheckCircle2,
   Eye,
   EyeOff,
-  GitBranch,
-  Link2,
   LogOut,
   MailCheck,
-  Waypoints,
 } from "lucide-react";
 import GuidanceShell, { useGuidanceAccount } from "@/components/GuidanceShell";
-import { Notice } from "@/components/GuidanceUI";
 import s from "@/styles/guidance.module.css";
-type Mode = "login" | "register" | "resend";
+type Mode = "login" | "register" | "resend" | "forgot" | "reset" | "verify";
 function localNext(value: string | string[] | undefined) {
   if (
     typeof value !== "string" ||
@@ -36,327 +32,104 @@ function localNext(value: string | string[] | undefined) {
   }
 }
 export default function AccountPage() {
-  return (
-    <GuidanceShell title="登录与注册" standalone>
-      <AccountContent />
-    </GuidanceShell>
-  );
+  return <GuidanceShell title="登录与注册" standalone><AccountContent /></GuidanceShell>;
 }
 function AccountContent() {
-  const account = useGuidanceAccount(),
-    router = useRouter();
-  const [mode, setMode] = useState<Mode>("login"),
-    [email, setEmail] = useState(""),
-    [password, setPassword] = useState(""),
-    [showPassword, setShowPassword] = useState(false);
-  const [busy, setBusy] = useState(false),
-    [token, setToken] = useState(""),
-    [feedback, setFeedback] = useState<{
-      tone: "success" | "error";
-      text: string;
-    } | null>(null);
+  const account = useGuidanceAccount(), router = useRouter();
+  const [mode, setMode] = useState<Mode>("login");
+  const [email, setEmail] = useState(""), [password, setPassword] = useState(""), [confirm, setConfirm] = useState("");
+  const [showPassword, setShowPassword] = useState(false), [busy, setBusy] = useState(false);
+  const [token, setToken] = useState("");
+  const [feedback, setFeedback] = useState<{tone: "success" | "error"; text: string} | null>(null);
   useEffect(() => {
     const url = new URL(window.location.href);
-    const value = url.searchParams.get("verify");
-    if (value) {
-      setToken(value);
-      url.searchParams.delete("verify");
+    const reset = url.searchParams.get("reset"), verify = url.searchParams.get("verify");
+    if (reset || verify) {
+      setToken(reset || verify || ""); setMode(reset ? "reset" : "verify");
+      url.searchParams.delete("reset"); url.searchParams.delete("verify");
       window.history.replaceState({}, "", url.pathname + url.search + url.hash);
     }
   }, []);
-  async function action(name: Mode | "verify" | "logout", body: object = {}) {
+  function switchMode(value: Mode) { setMode(value); setFeedback(null); setPassword(""); setConfirm(""); setShowPassword(false); }
+  async function action(name: Mode | "logout", body: object = {}) {
     if (busy) return;
-    setBusy(true);
-    setFeedback(null);
+    setBusy(true); setFeedback(null);
     try {
-      const response = await fetch("/api/account/" + name, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
-      });
+      const response = await fetch("/api/account/" + name, {method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(body)});
       const data = await response.json();
       if (!response.ok) throw Error(data.error || "暂时无法完成操作，请重试");
-      if (name === "verify") {
-        setToken("");
-        setMode("login");
-        setFeedback({ tone: "success", text: "邮箱已验证，现在可以登录。" });
-      } else if (name === "login") {
-        setPassword("");
-        setFeedback({ tone: "success", text: "登录成功，欢迎回到啡跃。" });
-      } else if (name === "logout") {
-        setPassword("");
-        setFeedback({ tone: "success", text: "已退出登录。" });
-      } else
-        setFeedback({
-          tone: "success",
-          text:
-            data.message ||
-            "如果信息符合条件，验证邮件已发送。请检查收件箱和垃圾邮件。",
-        });
-      await account.refresh();
+      if (name === "verify" || name === "reset") { setToken(""); switchMode("login"); }
+      if (name === "login" || name === "logout" || name === "reset") { setPassword(""); setConfirm(""); }
+      setFeedback({tone: "success", text: name === "verify" ? "邮箱已验证，现在可以登录。" : name === "reset" ? "密码已更新，请使用新密码登录。" : name === "login" ? "登录成功，欢迎回到啡跃。" : name === "logout" ? "已退出登录。" : data.message || "若账户符合条件，邮件将发送到你的邮箱。"});
+      if (["verify", "login", "logout", "reset"].includes(name)) await account.refresh();
       if (name === "login") await router.push(localNext(router.query.next));
-    } catch (e) {
-      setFeedback({
-        tone: "error",
-        text: e instanceof Error ? e.message : "网络异常，请稍后重试",
-      });
-    } finally {
-      setBusy(false);
-    }
+    } catch (error) { setFeedback({tone: "error", text: error instanceof Error ? error.message : "网络异常，请稍后重试"}); }
+    finally { setBusy(false); }
   }
   function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    void action(mode, { email, password });
+    if (mode === "reset" && password !== confirm) { setFeedback({tone: "error", text: "两次输入的密码不一致。"}); return; }
+    void action(mode, mode === "reset" ? {token, password} : mode === "verify" ? {token} : {email, password});
   }
-  function switchMode(value: Mode) {
-    setMode(value);
-    setFeedback(null);
-  }
-  return (
-    <div className={s.accountLayout}>
-      <section className={s.accountIntro}>
-        <span className={s.accountSymbol}>
-          <Brand compact/>
-        </span>
-        <span className={s.eyebrow}>YOUR KNOWLEDGE, CONNECTED</span>
-        <h1>
-          让有用的知识，
-          <br />
-          成为下一次行动的起点。
-        </h1>
-        <p>
-          用邮箱建立你的知识空间。把工作方法写成独立文档，让 Agent
-          在需要的时候找到它。
-        </p>
-        <div className={s.accountFeatures}>
-          <div>
-            <BookOpen size={18} />
-            <div>
-              <strong>每篇文档，都能独立使用</strong>
-              <p>从当前任务出发，无需加载整个集合。</p>
-            </div>
-          </div>
-          <div>
-            <GitBranch size={18} />
-            <div>
-              <strong>每次更新，都有固定版本</strong>
-              <p>历史引用保持可读，修改始终有迹可循。</p>
-            </div>
-          </div>
-          <div>
-            <Link2 size={18} />
-            <div>
-              <strong>知识之间，按条件连接</strong>
-              <p>需要更多背景时，再沿有用的链接继续阅读。</p>
-            </div>
-          </div>
+  const user = mode === "reset" || mode === "verify" || mode === "forgot" ? null : account.user;
+  const title = user ? "你的账户" : ({login: "欢迎回来", register: "创建你的账户", resend: "重发验证邮件", forgot: "找回你的账户", reset: "设置新密码", verify: "确认验证邮箱"})[mode];
+  const description = user ? "你的知识与创作，随时继续。" : ({login: "使用邮箱与密码登录，继续你的创作。", register: "用邮箱建立你的知识与创作空间。", resend: "仅适用于尚未验证的账户，输入邮箱和原密码。", forgot: "输入注册邮箱，我们会发送重设密码链接。", reset: "由你设置新密码，原有内容会完整保留。", verify: "确认后，即可使用邮箱和密码登录。"})[mode];
+  const toast = feedback || (account.error ? {tone: "error" as const, text: account.error} : null);
+  return <div className={a.layout}>
+    <section className={a.intro} data-theme="home-dark" aria-label="啡跃创作空间">
+      <Link className={a.brand} href="/" aria-label="啡跃首页"><Brand /></Link>
+      <div className={a.story}>
+        <p className={a.eyebrow}>A SPACE FOR YOUR NEXT IDEA</p>
+        <h1>给想法留白，<br />让灵感有形。</h1>
+        <p className={a.description}>收集一闪而过的灵感，把有用的知识连接起来。下一件作品，从这里开始。</p>
+        <div className={a.art} aria-hidden="true">
+          <div className={a.orbit} />
+          <div className={a.idea}><span>01 / THE IDEA</span><strong>留住清晨<br />的一束光。</strong><i>灵感片段 · 随手记下</i></div>
+          <div className={a.work}><span>02 / IN THE MAKING</span><div className={a.artwork} /><strong>光的形状</strong><i>让一个念头，慢慢成形。</i></div>
+          <span className={a.artCaption}>COLLECT. CONNECT. CREATE.</span>
         </div>
-      </section>
-      <section className={s.authCard} aria-label="邮箱账户">
-        <h2>
-          {account.user
-            ? "你的账户"
-            : mode === "register"
-              ? "创建你的账户"
-              : mode === "resend"
-                ? "重发验证邮件"
-                : "欢迎回来"}
-        </h2>
-        <p className={s.authDescription}>
-          {account.user
-            ? "已准备好发布和管理你的独立文档。"
-            : mode === "register"
-              ? "验证邮箱后，就可以发布第一篇文档。"
-              : mode === "resend"
-                ? "输入注册时的邮箱和密码，重新获取验证链接。"
-                : "使用邮箱与密码登录，继续你的知识工作。"}
-        </p>
-        {token && (
-          <section className={s.verificationCard}>
-            <h3>
-              <MailCheck size={17} />
-              确认验证邮箱
-            </h3>
-            <p>验证链接有效期为 30 分钟。确认后，再使用邮箱与密码登录。</p>
-            <button
-              type="button"
-              className={s.primaryButton}
-              disabled={busy}
-              onClick={() => void action("verify", { token })}
-            >
-              {busy ? "正在验证…" : "确认验证邮箱"}
-            </button>
-          </section>
-        )}
-        {feedback && <Notice tone={feedback.tone}>{feedback.text}</Notice>}
-        {account.error && (
-          <Notice tone="error">
-            {account.error}{" "}
-            <button
-              type="button"
-              className={s.textLink}
-              onClick={() => void account.refresh()}
-            >
-              重新连接
-            </button>
-          </Notice>
-        )}
-        {account.loading ? (
-          <div className={s.accountLoading} aria-busy="true">
-            正在检查账户状态…
+      </div>
+      <p className={a.signature}>啡跃 Endoleap <span>为下一次创作，留一个起点。</span></p>
+    </section>
+    <section className={a.form} aria-label="邮箱账户">
+      <div className={a.frame}>
+        <h2 key={title}>{title}</h2><p className={a.formDescription}>{description}</p>
+        {account.loading ? <div className={a.loading} aria-busy="true">正在检查账户状态…</div> : user ? <>
+          <div className={a.accountDetails}><CheckCircle2 size={22} /><strong>{user.email}</strong><span>邮箱已验证</span></div>
+          <Link className={s.primaryButton} href={localNext(router.query.next)}>继续使用啡跃 <ArrowRight size={15} /></Link>
+          <button className={a.secondary} type="button" disabled={busy} onClick={() => void action("logout")}><LogOut size={14} />退出登录</button>
+        </> : <>
+          <div className={a.tabSlot}>
+            {(mode === "login" || mode === "register") && <nav className={a.tabs} aria-label="账户操作" data-active={mode}>
+              <button type="button" aria-pressed={mode === "login"} disabled={busy} onClick={() => switchMode("login")}>登录</button>
+              <button type="button" aria-pressed={mode === "register"} disabled={busy} onClick={() => switchMode("register")}>创建账户</button>
+            </nav>}
           </div>
-        ) : account.user ? (
-          <>
-            <div className={s.loggedUser}>
-              <span className={s.avatar}>
-                {account.user.email.slice(0, 1).toUpperCase()}
-              </span>
-              <div>
-                <strong>{account.user.email}</strong>
-                <span className={s.verifiedBadge}>
-                  <CheckCircle2 size={13} />
-                  邮箱已验证
-                </span>
-              </div>
-            </div>
-            <div className={s.accountInfo}>
-              <p>
-                <strong>你的内容，由你管理。</strong>
-                <br />
-                你可以发布文档、创建新版本，以及撤下自己的内容。公开文档的固定历史版本会继续保留。
-              </p>
-            </div>
-            <Link
-              className={s.primaryButton}
-              href={localNext(router.query.next)}
-            >
-              继续使用啡跃
-              <ArrowRight size={15} />
-            </Link>
-            <div className={s.authSecondary}>
-              <button
-                type="button"
-                disabled={busy}
-                onClick={() => void action("logout")}
-              >
-                <LogOut size={12} /> 退出登录
-              </button>
-            </div>
-          </>
-        ) : (
-          <>
-            {mode !== "resend" && (
-              <nav className={s.authTabs} aria-label="账户操作">
-                <button
-                  type="button"
-                  aria-pressed={mode === "login"}
-                  disabled={busy}
-                  onClick={() => switchMode("login")}
-                >
-                  登录
-                </button>
-                <button
-                  type="button"
-                  aria-pressed={mode === "register"}
-                  disabled={busy}
-                  onClick={() => switchMode("register")}
-                >
-                  创建账户
-                </button>
-              </nav>
-            )}
-            <form onSubmit={submit}>
-              <fieldset className={s.formFieldset} disabled={busy}>
-                <div className={s.formField}>
+          <form onSubmit={submit}>
+            <fieldset className={a.fieldset} disabled={busy}>
+              <div className={a.fields} key={mode}>
+                {mode !== "reset" && mode !== "verify" && <div className={a.field}>
                   <label htmlFor="account-email">邮箱地址</label>
-                  <input
-                    id="account-email"
-                    className={s.input}
-                    type="email"
-                    name="email"
-                    autoComplete="email"
-                    placeholder="you@example.com"
-                    required
-                    maxLength={254}
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                  />
-                </div>
-                <div className={s.formField}>
-                  <label htmlFor="account-password">密码</label>
+                  <input id="account-email" className={s.input} type="email" name="email" autoComplete="email" placeholder="you@example.com" required maxLength={254} value={email} onChange={event => setEmail(event.target.value)} />
+                </div>}
+                {mode !== "forgot" && mode !== "verify" && <div className={a.field}>
+                  <div className={a.labelRow}><label htmlFor="account-password">{mode === "reset" ? "新密码" : "密码"}</label>{mode === "login" && <button type="button" onClick={() => switchMode("forgot")}>忘记密码？</button>}</div>
                   <div className={s.passwordField}>
-                    <input
-                      id="account-password"
-                      className={s.input}
-                      type={showPassword ? "text" : "password"}
-                      name="password"
-                      autoComplete={
-                        mode === "register"
-                          ? "new-password"
-                          : "current-password"
-                      }
-                      placeholder={
-                        mode === "register"
-                          ? "设置至少 12 个字符的密码"
-                          : "输入你的密码"
-                      }
-                      minLength={12}
-                      maxLength={256}
-                      required
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                    />
-                    <button
-                      type="button"
-                      aria-label={showPassword ? "隐藏密码" : "显示密码"}
-                      onClick={() => setShowPassword((value) => !value)}
-                    >
-                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                    </button>
+                    <input id="account-password" className={s.input} type={showPassword ? "text" : "password"} name="password" autoComplete={mode === "register" || mode === "reset" ? "new-password" : "current-password"} placeholder={mode === "register" || mode === "reset" ? "设置至少 12 个字符的密码" : "输入你的密码"} minLength={12} maxLength={256} required value={password} onChange={event => setPassword(event.target.value)} />
+                    <button type="button" aria-label={showPassword ? "隐藏密码" : "显示密码"} onClick={() => setShowPassword(value => !value)}>{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}</button>
                   </div>
-                  {mode === "register" && (
-                    <small className={s.fieldHint}>
-                      建议使用包含字母、数字的长密码。
-                    </small>
-                  )}
-                </div>
-                <button className={s.primaryButton} type="submit">
-                  {busy
-                    ? "正在处理…"
-                    : mode === "login"
-                      ? "登录"
-                      : mode === "register"
-                        ? "创建账户"
-                        : "发送验证邮件"}
-                  {!busy && <ArrowRight size={15} />}
-                </button>
-              </fieldset>
-            </form>
-            <div className={s.authSecondary}>
-              {mode === "resend" ? (
-                <button
-                  type="button"
-                  disabled={busy}
-                  onClick={() => switchMode("login")}
-                >
-                  返回登录
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  disabled={busy}
-                  onClick={() => switchMode("resend")}
-                >
-                  没有收到验证邮件？重新发送
-                </button>
-              )}
-            </div>
-            <p className={s.authFootnote}>
-              注册后需要先验证邮箱。公开文档始终可以直接阅读。
-            </p>
-          </>
-        )}
-      </section>
-    </div>
-  );
+                </div>}
+                {mode === "reset" && <div className={a.field}><label htmlFor="account-confirm">确认新密码</label><input id="account-confirm" className={s.input} type={showPassword ? "text" : "password"} autoComplete="new-password" required minLength={12} maxLength={256} value={confirm} onChange={event => setConfirm(event.target.value)} /></div>}
+                {mode === "verify" && <div className={a.verifyInfo}><MailCheck size={28} /><p>验证链接有效期为 30 分钟。请确认这是你注册的邮箱。</p></div>}
+              </div>
+              <button className={`${s.primaryButton} ${a.submit}`} type="submit">{busy ? "正在处理…" : ({login: "登录", register: "创建账户", resend: "发送验证邮件", forgot: "发送重设链接", reset: "保存新密码", verify: "确认验证邮箱"})[mode]}{!busy && <ArrowRight size={15} />}</button>
+            </fieldset>
+          </form>
+          <div className={a.secondarySlot}>{mode === "login" || mode === "register" ? <button className={a.secondary} type="button" disabled={busy} onClick={() => switchMode("resend")}>没有收到验证邮件？重新发送</button> : <button className={a.secondary} type="button" disabled={busy} onClick={() => switchMode("login")}>返回登录</button>}</div>
+          <p className={a.footnote}>{mode === "forgot" || mode === "reset" ? "链接仅供本人使用。重设成功后，所有旧会话将退出。" : "首次注册需要验证邮箱；已验证的账户可直接登录。"}</p>
+        </>}
+      </div>
+    </section>
+    {toast && <div className={a.toast} data-tone={toast.tone} role={toast.tone === "error" ? "alert" : "status"}><span aria-hidden="true">{toast.tone === "error" ? "!" : "✓"}</span><p>{toast.text}</p><button type="button" aria-label={!feedback && account.error ? "重新连接" : "关闭提示"} onClick={() => {setFeedback(null); if (account.error) void account.refresh();}}>×</button></div>}
+  </div>;
 }

apps/waterfall-wiki/src/pages/index.tsx

@@ -1,12 +1,22 @@
 import { ThemeToggle } from "../components/ThemeToggle";
 import { Brand } from "../components/Brand";
 import Head from 'next/head';
-import {ArrowUpRight, MousePointer2, Plus, Type, Image, Sparkles, Workflow, Layers, ArrowRight} from 'lucide-react';
+import {ArrowUpRight, Workflow, Layers, ArrowRight} from 'lucide-react';
+import {CreatorSketch, IdeaSketch} from "@/components/LandingSketches";
 import s from '@/styles/landing.module.css';
 export default function Home(){return <main className={s.page}>
-<Head><title>啡跃 啡跃 Endoleap · 让灵感，有形。</title><meta name="description" content="连接你的 coding agent，在图形编辑器与无限画布中，把想法组织成作品。"/></Head>
-<nav className={s.nav}><a className={s.logo} href="/"><Brand/></a><div><a href="#tools">创作工具</a><a href="/documents">知识与教程</a><a href="#workflow">工作方式</a></div><ThemeToggle/><a href="/account?next=/workspace">登录</a><a className={s.dark} href="/account?next=/workspace">进入工作台 <ArrowUpRight size={15}/></a></nav>
-<section className={s.hero}><p className={s.eyebrow}>A SPACE FOR HUMAN IDEAS & AGENTS</p><h1>想法不该停在对话里。<br/><span>让灵感，有形。</span></h1><p className={s.intro}>从一闪而过的念头，到值得分享的作品。<br/>连接你的 coding agent，在一张画布上，把创作继续下去。</p><div className={s.actions}><a className={s.dark} href="/account?next=/workspace">开始创作 <ArrowRight size={17}/></a><a href="#tools">探索你的创作空间 ↓</a></div><div className={s.product}><div className={s.productBar}><Brand compact/><span>日常的另一种可能 / 创意探索</span><span>本机草稿</span></div><div className={s.demo}><aside>工作空间<hr/>图层与素材<p>◈ 创意简报</p><p>▧ 视觉探索</p><p>✳ 镜头构思</p><small>把线索连接起来</small></aside><div className={s.demoWorld}><svg viewBox="0 0 800 330" preserveAspectRatio="none"><path d="M190 170 C300 170 260 120 360 120 S520 240 620 240"/></svg><article className={s.note}><small>01 / THE IDEA</small><h3>把日常，<br/>拍成一场电影。</h3><p>自然光、细腻颗粒，<br/>让每一帧都有呼吸感。</p></article><article className={s.art}><small>02 / VISUAL STUDY</small><div className={s.orbit}/><h3>光的形状</h3><span>LIGHT / SPACE / EMOTION</span></article><article className={s.prompt}><Sparkles size={17}/><small>03 / PROMPT</small><h3>留住清晨的光。</h3><p>窗边的植物，安静的房间。<br/>35mm 胶片，缓慢推进。</p></article><div className={s.dock}><MousePointer2/><Plus/><Type/><Image/><Sparkles/></div></div></div></div><p className={s.caption}>一个创作场景示意。你的想法、素材与工具，在这里相遇。</p></section>
+<Head><title>啡跃 Endoleap · 让灵感，有形。</title><meta name="description" content="收藏灵感、连接知识，与熟悉的 Agent 一起，把想法变成作品。探索图形编辑器、无限画布与知识文档。"/></Head>
+<nav className={s.nav} aria-label="主导航"><a className={s.logo} href="/"><Brand/></a><div><a href="#tools">创作工具</a><a href="/documents">知识与教程</a><a href="#workflow">工作方式</a></div><ThemeToggle/><a href="/account?next=/workspace">登录</a><a className={s.dark} href="/account?next=/workspace">进入工作台 <ArrowUpRight size={15}/></a></nav>
+<section className={s.hero}><p className={s.eyebrow}>A SPACE FOR HUMAN IDEAS & AGENTS</p><h1>想法不该停在对话里。<br/><span>让灵感，有形。</span></h1><p className={s.intro}>从一闪而过的念头，到值得分享的作品。<br/>连接你的 coding agent，在一张画布上，把创作继续下去。</p><div className={s.actions}><a className={s.dark} href="/account?next=/workspace">开始创作 <ArrowRight size={17}/></a><a href="#tools">探索你的创作空间 ↓</a></div><div className={s.peopleStrip}><span className={s.stripNote}>每一种好奇，都有自己的起点。</span>{([
+ ['collect','收藏生活的切片'],['read','遇见新的工作方法'],['idea','记下突然出现的灵感'],['dream','给想法一点自由'],['make','做一件属于你的作品']
+] as const).map(([pose,label])=><figure key={pose}><CreatorSketch pose={pose}/><figcaption>{label}</figcaption></figure>)}<span className={s.stripSpark} aria-hidden="true">✳</span></div></section>
+<section className={s.possibilities} id="possibilities" aria-labelledby="possibilities-title"><p className={s.eyebrow}>MAKE ROOM FOR WHAT COMES NEXT</p><h2 id="possibilities-title">给好奇心一点空间，<br/>让下一步<em>自然发生。</em></h2><div className={s.featureGrid}>{([
+ ['collect','留住一闪而过','一句念头、一张参考图、一个还没想好的方向。先留下，再慢慢展开。'],
+ ['connect','让线索相遇','把笔记、图片和提示词放上画布，用连接看见它们之间的新可能。'],
+ ['read','找到有用的方法','阅读可独立使用的知识文档，需要更多背景时，沿链接继续探索。'],
+ ['make','把创作继续下去','用熟悉的 coding agent 探索，再亲手调整细节，让想法成为自己的作品。']
+] as const).map(([kind,title,copy])=><article key={kind}><IdeaSketch kind={kind}/><h3>{title}</h3><p>{copy}</p></article>)}</div></section>
 <section className={s.tools} id="tools"><p className={s.eyebrow}>TWO TOOLS. ONE CREATIVE FLOW.</p><h2>给不同的想法，<br/>恰好的空间。</h2><div className={s.toolGrid}><a href="/graphic"><Layers/><span>01 / GRAPHIC</span><h3>把灵感排成作品。</h3><p>文字、图形与图片自由编排。精确调整图层和位置，把设计导出为 SVG。</p><div className={s.poster}><span>MAKE<br/>ROOM<br/><i>for ideas.</i></span><b>✳</b></div><strong>打开图形编辑器 <ArrowUpRight size={17}/></strong></a><a href="/infinite_canvas"><Workflow/><span>02 / INFINITE CANVAS</span><h3>让思路，自由生长。</h3><p>把笔记、参考图与提示词连成线索。在无限画布上平移、缩放，整理下一次创作。</p><div className={s.miniCanvas}><b>一个念头</b><i>⟶</i><b>一张参考</b><i>⟶</i><b>新的可能</b></div><strong>打开无限画布 <ArrowUpRight size={17}/></strong></a></div></section>
+<section className={s.reading} aria-labelledby="reading-title"><div><p className={s.eyebrow}>GOOD IDEAS DESERVE GOOD COMPANY</p><h2 id="reading-title">不必每一次，<br/>都从空白开始。</h2><p>把有用的工作方法，留给下一次的自己。<br/>一篇文档讲清一件事，需要时再沿着链接走远一点。</p><a href="/documents">去知识空间逛逛 <ArrowUpRight size={16}/></a></div><div className={s.readingArt} aria-hidden="true"><span>读到这里，<br/><em>想到了什么？</em></span><CreatorSketch pose="read"/><small>READ. CONNECT. MAKE.</small><svg viewBox="0 0 440 380"><path d="M35 105q-20-55 35-64m-15 0 17-2-8 17M348 267q46 33 32 68m-14-13 14 15 14-13"/></svg></div></section>
 <section className={s.workflow} id="workflow"><div><p className={s.eyebrow}>YOUR AGENT. YOUR WORKFLOW.</p><h2>用熟悉的 Agent，<br/>继续你的创作。</h2><p>通过项目已有的 API 与文档，让 coding agent 理解模板和创作内容。画布负责呈现，你来决定下一步。</p><a href="/studio/api">查看 Agent 接入文档 <ArrowUpRight size={16}/></a></div><ol><li><b>01</b><div><h3>找到起点</h3><p>从空白设计、素材或一段灵感出发。</p></div></li><li><b>02</b><div><h3>连接工作方式</h3><p>将接入文档交给你的 coding agent。</p></div></li><li><b>03</b><div><h3>亲手打磨，保存作品</h3><p>在编辑器中调整细节，导出并保留备份。</p></div></li></ol></section>
-<section className={s.end}><span><Brand compact/></span><h2>下一件作品，<br/>从这里开始。</h2><a className={s.dark} href="/account?next=/workspace">进入你的工作台 <ArrowRight size={17}/></a></section><footer className={s.footer}><a className={s.logo} href="/"><Brand/></a><span>给想法留白，给创作空间。</span><a href="/documents">知识与教程 ↗</a></footer></main>}
+<section className={s.end}><div className={s.endWall} aria-hidden="true">{(['collect','read','connect','make'] as const).map(kind=><div key={kind}><IdeaSketch kind={kind}/><i/><i/><i/></div>)}</div><div className={s.endContent}><p className={s.eyebrow}>YOUR NEXT IDEA STARTS HERE</p><h2>给下一个念头，<br/><em>留一个起点。</em></h2><p>不用想好全部。带着一点好奇，先开始。</p><a className={s.dark} href="/account?next=/workspace">进入你的工作台 <ArrowRight size={17}/></a><a className={s.endSecondary} href="/documents">或先读一篇有用的文档 ↗</a></div></section><footer className={s.footer}><a className={s.logo} href="/"><Brand/></a><span>给想法留白，给创作空间。</span><a href="/documents">知识与教程 ↗</a></footer></main>}

apps/waterfall-wiki/src/styles/account.module.css

@@ -0,0 +1,95 @@
+.page { height: 100dvh; overflow: hidden; background: var(--surface); color: var(--foreground); }
+.page > main { height: 100%; min-height: 0; }
+.header { position: absolute; z-index: 2; top: 28px; right: 36px; }
+.header > div { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--muted-foreground); }
+.header a:hover { color: var(--foreground-strong); }
+.layout { display: grid; grid-template-columns: 46% minmax(0, 1fr); height: 100%; min-height: 0; }
+.intro { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 38px clamp(32px, 5vw, 80px) 30px; overflow: hidden; background: var(--background); color: var(--foreground); }
+.intro::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 0% 35%, color-mix(in srgb, var(--el-deep-mocha) 85%, transparent), transparent 60%), radial-gradient(ellipse at 100% 92%, color-mix(in srgb, var(--primary) 45%, transparent), transparent 65%); }
+.brand { align-self: flex-start; }
+.story { margin: auto 0; padding-top: clamp(16px, 4dvh, 40px); }
+.eyebrow { margin: 0 0 20px; font-size: 10px; letter-spacing: .18em; color: var(--muted-foreground); line-height: 1.7; }
+.story h1 { margin: 0 0 22px; font-size: clamp(32px, 3.3vw, 50px); font-weight: 600; line-height: 1.3; letter-spacing: -.035em; color: var(--foreground-strong); }
+.description { margin: 0; max-width: 340px; font-size: 15px; line-height: 1.9; color: var(--foreground); }
+.signature { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 32px 0 0; font-size: 11px; line-height: 1.7; color: var(--muted-foreground); }
+.signature span { opacity: .8; }
+.art { position: relative; height: clamp(180px, 28dvh, 280px); margin: 28px -12px 0; pointer-events: none; }
+.orbit { position: absolute; width: 245px; height: 245px; left: 15%; top: 5%; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: 50%; }
+.orbit::after { content: ''; position: absolute; inset: 25px -35px; border: inherit; border-radius: 50%; transform: rotate(-38deg); }
+.idea, .work { position: absolute; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--foreground) 24%, transparent); border-radius: 14px; box-shadow: 0 20px 50px var(--shadow); }
+.idea { left: 0; top: 42px; width: 48%; min-height: 196px; padding: 22px 18px; transform: rotate(-8deg); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(16px); }
+.idea span, .work > span { font-size: 8px; letter-spacing: .12em; line-height: 1.6; }
+.idea strong { margin: 24px 0 18px; font-size: clamp(18px, 1.8vw, 26px); font-weight: 500; line-height: 1.5; }
+.idea i, .work i { font-size: 9px; font-style: normal; line-height: 1.7; opacity: .72; }
+.work { right: 0; top: 15px; width: 51%; padding: 18px; transform: rotate(8deg); background: var(--el-cream); color: var(--el-espresso); }
+.artwork { height: 110px; margin: 16px 0 14px; overflow: hidden; border-radius: 100px 100px 8px 8px; background: radial-gradient(ellipse at 75% 20%, var(--el-cream), transparent 60%), linear-gradient(135deg, var(--el-deep-mocha), var(--el-espresso)); }
+.work strong { margin-bottom: 6px; font-size: 19px; font-weight: 500; }
+.artCaption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: .2em; color: var(--muted-foreground); }
+
+.form { align-self: center; justify-self: center; width: min(400px, calc(100% - 80px)); min-width: 0; padding: 0; }
+.frame { height: 560px; display: flex; flex-direction: column; justify-content: center; }
+.frame h2 { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.3; text-align: center; letter-spacing: -.04em; animation: mode-in 180ms ease-out; }
+.formDescription { height: 42px; flex-shrink: 0; margin: 10px 0 20px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--muted-foreground); }
+.tabSlot { height: 44px; flex-shrink: 0; margin-bottom: 24px; }
+.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 44px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); isolation: isolate; }
+.tabs::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 5px; background: var(--surface); box-shadow: 0 1px 3px var(--shadow); transition: transform 180ms ease; }
+.tabs[data-active='register']::before { transform: translateX(100%); }
+.tabs button { border: 0; background: transparent; font-size: 13px; color: var(--muted-foreground); }
+.tabs button[aria-pressed='true'] { color: var(--foreground-strong); font-weight: 600; }
+.fieldset { margin: 0; padding: 0; min-width: 0; border: 0; }
+.fields { height: 168px; display: flex; flex-direction: column; gap: 16px; animation: mode-in 180ms ease-out; }
+.field { min-width: 0; }
+.field label { display: block; margin-bottom: 7px; font-size: 13px; line-height: 20px; font-weight: 500; }
+.labelRow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.labelRow button { font-size: 12px; color: var(--muted-foreground); }
+.labelRow button:hover { color: var(--foreground-strong); }
+.page .form input { width: 100%; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; background: var(--surface); border: 1px solid var(--input); border-radius: 8px; box-shadow: 0 1px 2px var(--shadow); }
+.page .form input[name='password'] { padding-right: 44px; }
+.page .submit { width: 100%; min-height: 44px; margin-top: 8px; font-size: 14px; border-radius: 8px; }
+.secondarySlot { min-height: 38px; display: grid; place-items: center; margin-top: 14px; }
+.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0; font-size: 12px; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 4px; }
+.footnote { height: 60px; flex-shrink: 0; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.7; text-align: center; color: var(--muted-foreground); }
+.verifyInfo, .accountDetails { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 168px; text-align: center; color: var(--muted-foreground); }
+.accountDetails strong { color: var(--foreground-strong); overflow-wrap: anywhere; }
+.accountDetails span, .verifyInfo p { font-size: 13px; line-height: 1.8; }
+.loading { height: 320px; display: grid; place-items: center; font-size: 13px; color: var(--muted-foreground); }
+.toast { position: fixed; z-index: 50; right: 20px; bottom: 20px; width: min(420px, calc(100% - 40px)); display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--foreground); box-shadow: 0 8px 32px var(--shadow); animation: mode-in 180ms ease-out; }
+.toast > span { flex: 0 0 20px; height: 20px; text-align: center; border-radius: 50%; background: var(--success-background); color: var(--success); font-size: 13px; font-weight: 600; }
+.toast[data-tone='error'] > span { color: var(--danger); background: var(--danger-background); }
+.toast p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
+.toast button { flex: 0 0 24px; min-height: 24px; color: var(--muted-foreground); }
+@keyframes mode-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
+@media (min-width: 1500px) { .story { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; } }
+@media (max-width: 1000px) { .intro { padding-left: 28px; padding-right: 28px; } .story h1 { font-size: 34px; } .description { font-size: 14px; } .form { width: min(380px, calc(100% - 64px)); } .header { right: 28px; } }
+@media (max-width: 760px) {
+ .header { top: 20px; right: 20px; }
+ .layout { grid-template-columns: minmax(0, 1fr); }
+ .intro { position: absolute; top: 20px; left: 24px; padding: 0; background: transparent; overflow: visible; }
+ .intro::before, .story, .signature { display: none; }
+ .brand { padding: 5px; border-radius: 8px; background: var(--background); }
+ .form { width: min(400px, calc(100% - 48px)); padding-top: 40px; }
+ .frame h2 { font-size: 25px; }
+}
+@media (max-height: 760px) {
+ .art, .signature { display: none; }
+ .intro { padding-top: 24px; padding-bottom: 24px; }
+ .formDescription { height: 34px; font-size: 13px; margin: 8px 0 14px; }
+ .frame { height: 460px; }
+ .frame h2 { font-size: 25px; }
+ .tabSlot { margin-bottom: 18px; }
+ .fields { height: 158px; gap: 12px; }
+ .footnote { display: none; }
+ .secondarySlot { margin-top: 10px; }
+}
+@media (max-height: 560px) {
+ .header a { display: none; }
+ .formDescription { display: none; }
+ .frame { height: 340px; }
+ .frame h2 { font-size: 22px; margin-bottom: 14px; }
+ .tabSlot { height: 36px; margin-bottom: 14px; }
+ .tabs { height: 36px; }
+ .story h1 { font-size: 28px; }
+ .eyebrow { display: none; }
+}
+@media (max-width: 760px) and (max-height: 760px) { .intro { padding: 0; } }
+@media (prefers-reduced-motion: reduce) { .frame h2, .fields, .toast { animation: none; } .tabs::before { transition: none; } }

apps/waterfall-wiki/src/styles/guidance.module.css

@@ -1678,66 +1678,11 @@
   height: 31px;
   color: var(--muted-foreground);
 }
-.accountLayout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 410px;
-  max-width: 990px;
-  gap: 70px;
-  align-items: center;
-  margin: 50px auto 70px;
-}
-.accountIntro {
-  padding: 20px 0;
-}
-.accountSymbol {
-  width: 54px;
-  height: 54px;
-  display: grid;
-  place-items: center;
-  background: var(--selection);
-  border: 1px solid var(--selection-border);
-  border-radius: 14px;
-  color: var(--primary);
-  margin-bottom: 28px;
-}
-.accountIntro h1 {
-  font-size: 32px;
-  line-height: 1.5;
-  letter-spacing: -1px;
-  font-weight: 650;
-  margin-bottom: 17px;
-}
-.accountIntro > p {
-  font-size: 13px;
-  line-height: 1.9;
-  color: var(--muted-foreground);
-  max-width: 360px;
-}
-.accountFeatures {
-  display: grid;
-  gap: 21px;
-  margin-top: 35px;
-}
-.accountFeatures > div {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-.accountFeatures svg {
-  color: var(--muted-foreground);
-  margin-top: 2px;
-}
-.accountFeatures strong {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-}
-.accountFeatures p {
-  font-size: 11px;
-  color: var(--muted-foreground);
-  line-height: 1.8;
-  margin-top: 5px;
-}
+
+
+
+
+
 .authCard {
   padding: 28px;
   border: 1px solid var(--line);
@@ -1922,13 +1867,7 @@
     grid-template-columns: minmax(0, 1fr) 230px;
     gap: 20px;
   }
-  .accountLayout {
-    gap: 35px;
-    grid-template-columns: minmax(0, 1fr) 370px;
-  }
-  .accountIntro h1 {
-    font-size: 29px;
-  }
+
   .protocolLayout {
     grid-template-columns: minmax(0, 1fr) 190px;
   }
@@ -1968,30 +1907,9 @@
   .protocolLayout > aside {
     display: none;
   }
-  .accountLayout {
-    grid-template-columns: 1fr;
-    max-width: 430px;
-    margin: 15px auto 40px;
-    gap: 25px;
-  }
-  .accountIntro {
-    padding: 0;
-  }
-  .accountIntro h1 {
-    font-size: 26px;
-    margin-bottom: 8px;
-  }
-  .accountSymbol,
-  .accountFeatures {
-    display: none;
-  }
-  .accountIntro > p {
-    max-width: none;
-    font-size: 12px;
-  }
-  .accountIntro h1 br {
-    display: none;
-  }
+
+
+
   .topbarProtocol {
     display: none;
   }
@@ -2302,19 +2220,8 @@
   .authCard {
     padding: 24px;
   }
-  .accountLayout {
-    margin-top: 8px;
-    gap: 24px;
-  }
-  .accountIntro h1 {
-    font-size: 24px;
-  }
-  .accountIntro > p {
-    font-size: 11px;
-  }
-  .accountSymbol {
-    display: none;
-  }
+
+
   .modalBody {
     padding: 23px;
   }
@@ -2380,14 +2287,3 @@
 .primaryButton,.primaryButton:hover{color:var(--primary-foreground);background:var(--primary)}
 .primaryButton:hover{background:var(--primary-hover)}
 .primaryButton:disabled{background:var(--disabled-background);color:var(--disabled-foreground)}
-
-/* Authentication has its own public page, without workspace navigation. */
-.accountPage { min-height: 100vh; background: var(--background); color: var(--foreground); }
-.accountHeader { max-width: 1200px; margin: 0 auto; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
-.accountHeader a { color: var(--muted-foreground); text-decoration: none; }
-.accountHeader > div { display: flex; align-items: center; gap: 20px; font-size: 13px; }
-.accountPage > main { max-width: 1120px; margin: 0 auto; padding: 48px 32px 72px; }
-@media (max-width: 650px) {
-  .accountHeader { padding: 20px; }
-  .accountPage > main { padding: 20px 20px 48px; }
-}

apps/waterfall-wiki/tests/brand-navigation.mjs

@@ -51,9 +51,11 @@ export async function visitBrowserDocument(page, url, reload = false) {
         const remaining = timeout - (Date.now() - started);
         if (remaining <= 0) throw new Error('Document hydration budget exhausted: ' + url);
         try {
+          // Responsive layouts may hide the toggle. Its mounted ready marker
+          // proves hydration; each caller still checks the controls it needs.
           // A cancelled script may be a preload duplicate. Hydration is the
           // authority; recover only when cancellation actually blocks startup.
-          await page.locator('button[data-theme-ready="true"]').first().waitFor({timeout: failures.length ? Math.min(5000, remaining) : remaining});
+          await page.locator('button[data-theme-ready="true"]').first().waitFor({state: 'attached', timeout: failures.length ? Math.min(5000, remaining) : remaining});
         } catch (error) {
           if (failures.length) throw new Error('Document bootstrap script request failed: ' + failures.join('; '), {cause: error});
           throw error;

apps/waterfall-wiki/tests/brand-navigation.test.mjs

@@ -49,7 +49,7 @@ test('recovery cannot extend the total navigation budget', async () => {
   assert.equal(calls, 1);
 });
 
-function browserFixture(failBootstrap = false, failHydration = false, blockedOnce = false) {
+function browserFixture(failBootstrap = false, failHydration = false, blockedOnce = false, readyVisible = true) {
   const listeners = new Map(), calls = [];
   const page = {
     on(event, fn) { if (!listeners.has(event)) listeners.set(event, new Set()); listeners.get(event).add(fn); },
@@ -61,7 +61,7 @@ function browserFixture(failBootstrap = false, failHydration = false, blockedOnc
       if (failBootstrap && calls.length === 1) for (const fn of listeners.get('requestfailed') || []) fn(request);
       return response(200);
     },
-    locator() { return {first: () => ({waitFor: async () => { calls.push('hydrated'); if (failHydration || (blockedOnce && calls.length === 2)) throw Error('Hydration timeout'); }})}; },
+    locator() { return {first: () => ({waitFor: async options => { calls.push('hydrated'); if (!readyVisible && options.state !== 'attached') throw Error('Ready marker is hidden by responsive CSS'); if (failHydration || (blockedOnce && calls.length === 2)) throw Error('Hydration timeout'); }})}; },
   };
   return {page, calls, listeners};
 }
@@ -87,3 +87,9 @@ test('cancelled script does not reject an already hydrated document', async () =
   await visitBrowserDocument(page, '/account');
   assert.deepEqual(calls, ['domcontentloaded', 'hydrated']);
 });
+
+test('hydrated pages are ready even when responsive CSS hides the marker', async () => {
+  const {page, calls} = browserFixture(false, false, false, false);
+  await visitBrowserDocument(page, '/graphic');
+  assert.deepEqual(calls, ['domcontentloaded', 'hydrated']);
+});

apps/waterfall-wiki/tests/brand-ui-integration.ts

@@ -62,6 +62,14 @@ export async function verifyBrandUI(base: string) {
     await page.setViewportSize({ width: 390, height: 844 });
     assert.equal(await page.locator('.endoleap-mark-light').first().isVisible(), true);
     assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1), 'mobile home has no horizontal overflow');
+    for (const width of [390, 320]) {
+      await page.setViewportSize({ width, height: 844 });
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1), 'Editorial home fits narrow screens');
+      const entry = await page.getByRole('navigation', {name: '主导航'}).getByRole('link', {name: /进入工作台/}).boundingBox();
+      assert.ok(entry && entry.x >= 0 && entry.x + entry.width <= width, 'Workspace entry is visible, not clipped');
+      assert.equal(await page.getByRole('link', {name: /去知识空间逛逛/}).getAttribute('href'), '/documents');
+      assert.equal(await page.getByRole('link', {name: '开始创作', exact: true}).getAttribute('href'), '/account?next=/workspace');
+    }
     console.log('Endoleap logos, both favicon paths, persisted home/canvas themes and artwork color isolation passed.');
   } finally { await browser.close(); }
 }

apps/waterfall-wiki/tests/guidance-workspace-ui.ts

@@ -164,6 +164,26 @@ export async function verifyGuidanceWorkspaceUI(base: string, browser: Browser)
     assert.equal(await page.getByRole("complementary").count(), 0, "Account page has no workspace sidebar");
     assert.equal(await page.getByRole("link", { name: "创建文档", exact: true }).count(), 0);
     await page.getByRole("link", { name: "返回首页", exact: true }).waitFor();
+    const accountFits = async () => assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1 && document.documentElement.scrollHeight <= innerHeight + 1), "Account page fits the viewport on both axes");
+    await accountFits();
+    await context.route("**/api/account/login", route => route.fulfill({status: 401, json: {error: "测试登录失败，请重试"}}));
+    await page.getByLabel("邮箱地址", {exact: true}).fill("fixture@example.com");
+    await page.getByLabel("密码", {exact: true}).fill("fixture-password-long");
+    await page.waitForFunction(() => document.getAnimations().every(animation => animation.playState !== "running"));
+    const beforeMessage = await page.getByLabel("邮箱地址", {exact: true}).boundingBox();
+    await page.locator("form").getByRole("button", {name: "登录", exact: true}).click();
+    await page.getByRole("alert").getByText("测试登录失败，请重试").waitFor();
+    const afterMessage = await page.getByLabel("邮箱地址", {exact: true}).boundingBox();
+    assert.equal(afterMessage?.y, beforeMessage?.y, "Status messages must not move the form");
+    await accountFits();
+    await page.getByRole("button", {name: "关闭提示", exact: true}).click();
+    await context.route("**/api/account/forgot", route => route.fulfill({json: {ok: true, message: "若账户符合条件，重设链接将发送到邮箱。"}}));
+    await page.getByRole("button", {name: "忘记密码？", exact: true}).click();
+    await page.getByRole("heading", {name: "找回你的账户", exact: true}).waitFor();
+    await page.getByLabel("邮箱地址", {exact: true}).fill("fixture@example.com");
+    await page.getByRole("button", {name: "发送重设链接", exact: true}).click();
+    await page.getByRole("status").getByText("若账户符合条件，重设链接将发送到邮箱。").waitFor();
+    await page.getByRole("button", {name: "返回登录", exact: true}).click();
     await page.getByRole("button", { name: "创建账户", exact: true }).click();
     await page.getByRole("heading", { name: "创建你的账户" }).waitFor();
     await page
@@ -181,6 +201,26 @@ export async function verifyGuidanceWorkspaceUI(base: string, browser: Browser)
         path: process.env.WORKSPACE_SCREENSHOT_DIR + "/account.png",
         fullPage: true,
       });
+    for (const viewport of [{width: 390, height: 844}, {width: 320, height: 568}]) {
+      await page.setViewportSize(viewport);
+      await accountFits();
+      await page.getByLabel("邮箱地址", {exact: true}).waitFor({state: "visible"});
+    }
+    await page.setViewportSize({width: 1440, height: 1000});
+    await context.route("**/api/account/reset", async route => {
+      const body = route.request().postDataJSON();
+      assert.equal(body.token, "f".repeat(64));
+      assert.equal(body.password, "replacement-fixture-password");
+      await route.fulfill({json: {ok: true}});
+    });
+    await visitBrowserDocument(page, base + "/account?reset=" + "f".repeat(64));
+    await page.getByRole("heading", {name: "设置新密码", exact: true}).waitFor();
+    assert.equal(new URL(page.url()).searchParams.has("reset"), false, "Recovery token is removed from the visible URL");
+    await page.getByLabel("新密码", {exact: true}).fill("replacement-fixture-password");
+    await page.getByLabel("确认新密码", {exact: true}).fill("replacement-fixture-password");
+    await page.getByRole("button", {name: "保存新密码", exact: true}).click();
+    await page.getByRole("heading", {name: "欢迎回来", exact: true}).waitFor();
+    await accountFits();
     await navigate(base + "/write");
     await page.getByRole("heading", { name: "登录后开始编写" }).waitFor();
     signedIn = true;

docs/docker-build-cache.md

@@ -0,0 +1,23 @@
+# Docker 构建上下文与缓存
+
+## 入口与忽略规则
+
+所有 CI 构建命令都在仓库根目录使用 `.` 作为 context，包括以 `-f` 选择的子项目 Dockerfile。统一使用根 `.dockerignore`，递归排除依赖目录、Git 元数据、本机环境文件、编译输出、测试证据及缓存；保留 `.env.example` 供 Compose 校验使用。
+
+普通的子目录 `.dockerignore` 不会自动叠加到根 context。当前 runner 使用 legacy builder，不依赖 Dockerfile 专属忽略文件或 BuildKit cache mount。若以后改用子目录 context，必须同时调整共享包与跨应用文件的输入路径，不能只在子目录添加忽略文件。
+
+## 依赖层与源码层
+
+- Wiki 的根 Dockerfile 是实际 CI 入口，`apps/waterfall-wiki/Dockerfile` 是对应副本，两者的功能内容保持同步；根文件额外保留镜像生命周期标签。
+- Web 应用安装前只复制自身清单、锁文件、workspace 配置和品牌包清单，满足 `workspace:*` 依赖发现。完整品牌包在安装后复制；颜色、Logo 或品牌脚本变化仍会重新编译应用，但不会仅因此重新下载依赖。
+- Python 从 `pyproject.toml` 读取固定运行依赖与构建后端要求，在独立依赖阶段安装。源码阶段安装当前包并运行单测，最终镜像仅继承系统运行环境并复制已验证的虚拟环境，不携带应用源码目录和测试目录。虚拟环境仍包含 pip 和构建后端，未声称完全剥离构建工具。
+- 品牌检查镜像只用于 CI。其 Python 图片校验依赖安装放在品牌源码之前，避免源码变化重新下载这些依赖。
+- 不因共享包缓存命中而漏掉消费者：品牌变更需触发 Wiki/Studio PR 检查和 main 发布。根忽略规则变化也触发相关检查。
+
+## 验证与限制
+
+构建、打包与产物验证只在已确认的 `ces-control` runner 执行。Python PR 运行镜像构建和单测，但只有 main push 才会发布 latest 标签。Web PR 与品牌检查沿用现有远程 Docker 验证流程。
+
+本次没有升级 Docker builder，也没有承诺消除 legacy builder 的镜像层提交耗时；缓存层调整后的实际收益需比较后续 CI 日志。源码变化仍需构建，持久测试环境和按影响范围选择测试属于后续 CI 调整。
+
+本机不新增 Dev Containers/Tilt 启动方式；这类方案需要单独确认本地运行和编译授权。

packages/brand/Dockerfile

@@ -3,10 +3,10 @@ WORKDIR /repo
 RUN corepack enable && corepack prepare pnpm@11.25.0 --activate
 COPY packages/brand/package.json packages/brand/pnpm-lock.yaml ./
 RUN pnpm install --frozen-lockfile --ignore-scripts
-COPY packages/brand/ ./
-RUN pnpm test && pnpm build && pnpm test:tailwind && pnpm test:types
 RUN apt-get update && apt-get install -y --no-install-recommends python3 python3-venv \
     && rm -rf /var/lib/apt/lists/* \
     && python3 -m venv /opt/brand-python \
     && /opt/brand-python/bin/pip install --only-binary=:all: Pillow==13.0.0 resvg-py==0.5.0
+COPY packages/brand/ ./
+RUN pnpm test && pnpm build && pnpm test:tailwind && pnpm test:types
 RUN /opt/brand-python/bin/python tests/assets.py

scripts/verify-studio-visual.cjs

@@ -8,54 +8,100 @@ const assert=require('node:assert/strict');
  const now=Math.floor(Date.now()/1000),part=o=>Buffer.from(JSON.stringify(o)).toString('base64url');
  const content=part({alg:'HS256',typ:'JWT'})+'.'+part({iss:'prompt',aud:'prompt-web',sub:'shared',iat:now,exp:now+1200,jti:randomBytes(16).toString('hex')});
  const token=content+'.'+createHmac('sha256',Buffer.from(config.jwtKey,'hex')).update(content).digest('base64url');
+ const {navigateBrandDocument,visitBrowserDocument}=await import('../apps/waterfall-wiki/tests/brand-navigation.mjs');
  const browser=await chromium.launch({executablePath:'/usr/bin/chromium',headless:true,args:['--no-sandbox','--disable-dev-shm-usage']});
  const context=await browser.newContext({viewport:{width:1100,height:1000},deviceScaleFactor:1});
  await context.route('**/*',async route=>{const u=new URL(route.request().url());if(u.origin===origin)return route.continue({headers:{...route.request().headers(),Authorization:'Bearer '+token}});if(['data:','blob:'].includes(u.protocol))return route.continue();return route.abort()});
  const page=await context.newPage(),errors=[],images=[];
- page.on('pageerror',error=>errors.push({url:page.url(),message:error.message}));
+ page.setDefaultTimeout(60000);
+ page.on('pageerror',error=>errors.push({url:page.url(),message:error.message,stack:error.stack}));
  page.on('response',async response=>{if(response.request().resourceType()==='image'){const url=new URL(response.url());images.push({path:url.pathname+url.search,status:response.status(),type:response.headers()['content-type'],bytes:(await response.body().catch(()=>Buffer.alloc(0))).length})}});
+ // Wait for the actual document and application, not an idle background network.
+ // Shared navigation recovery is limited to safe GETs; assertions are never retried.
+ const visitDocument=async(url,interactive=false,reload=false)=>{
+  if(interactive)await visitBrowserDocument(page,url,reload);
+  else await navigateBrandDocument(timeout=>page.goto(url,{waitUntil:'domcontentloaded',timeout}),url);
+  await page.waitForFunction(()=>Array.from(document.images).every(img=>img.complete&&img.naturalWidth>0));
+  console.log('Production document ready:',new URL(url).pathname);
+ };
  // The retired catalogue is retained for existing API consumers, not a release UI gate.
  // Explicit legacy/diagnostic runs still exercise its full overflow assertions.
  const checkLegacy=process.argv.includes('--legacy-layouts')||process.argv.includes('--diagnose');
  const metrics=[];
  for(let i=1;i<=27&&checkLegacy;i++){
-  const id='ref-'+String(i).padStart(2,'0');await page.goto(base+'/studio/layouts/'+id,{waitUntil:'networkidle'});await page.locator('article.native-layout').screenshot({path:dir+'/'+id+'.png',style:'.page-tools{visibility:hidden}'});
+  const id='ref-'+String(i).padStart(2,'0');await visitDocument(base+'/studio/layouts/'+id);await page.locator('article.native-layout').screenshot({path:dir+'/'+id+'.png',style:'.page-tools{visibility:hidden}'});
   const m=await page.locator('article.native-layout').evaluate(el=>{
    const overflow=[...el.querySelectorAll('.native-copy')].filter(e=>e.scrollHeight>e.clientHeight+2||e.scrollWidth>e.clientWidth+2);
    return {id:el.dataset.layoutId,elements:el.querySelectorAll('[data-element]').length,width:el.clientWidth,height:el.clientHeight,overflow:overflow.map(e=>e.closest('[data-element]').dataset.element),overflowDetails:overflow.map(e=>{const style=getComputedStyle(e);return {id:e.closest('[data-element]').dataset.element,text:e.textContent,clientWidth:e.clientWidth,scrollWidth:e.scrollWidth,clientHeight:e.clientHeight,scrollHeight:e.scrollHeight,fontSize:style.fontSize,lineHeight:style.lineHeight,letterSpacing:style.letterSpacing,fontFamily:style.fontFamily,fontWeight:style.fontWeight,writingMode:style.writingMode}})};
   });metrics.push(m);await writeFile(dir+'/metrics.json',JSON.stringify({metrics,images,errors},null,2));
  }
  if(checkLegacy&&!process.argv.includes('--diagnose'))assert.deepEqual(metrics.filter(m=>m.overflow.length),[],'Default copy must fit every native slot');
- await page.goto(base+'/',{waitUntil:'networkidle'});await page.getByRole('heading',{name:/想法不该停在对话里/}).waitFor();await page.screenshot({path:dir+'/landing-desktop.png',fullPage:true});
- await page.goto(base+'/graphic',{waitUntil:'networkidle'});
+ await visitDocument(base+'/',true);await page.getByRole('heading',{name:/想法不该停在对话里/}).waitFor();await page.screenshot({path:dir+'/landing-desktop.png',fullPage:true});
+ // Capture the complete editorial home at both narrow breakpoints on the deployed server.
+ await page.getByRole('heading',{name:/给好奇心一点空间/}).waitFor();
+ for(const [width,name] of [[390,'landing-mobile'],[320,'landing-mobile-compact']]){
+  await page.setViewportSize({width,height:844});
+  assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth+1),'Landing fits narrow screens');
+  const entry=await page.getByRole('navigation',{name:'主导航'}).getByRole('link',{name:/进入工作台/}).boundingBox();
+  assert.ok(entry&&entry.x>=0&&entry.x+entry.width<=width,'Landing workspace entry remains inside the viewport');
+  await page.screenshot({path:dir+'/'+name+'.png',fullPage:true});
+ }
+ // Verify the public account flow in this fresh context, without submitting credentials.
+ await page.setViewportSize({width:1128,height:959});
+ await visitDocument(base+'/account?next=/workspace',true);
+ await page.locator('button[data-theme-ready="true"]').waitFor();
+ await page.getByLabel('邮箱地址',{exact:true}).waitFor();
+ assert.equal(await page.locator('aside').count(),0,'Authentication must not include a workspace sidebar');
+ assert.equal(await page.getByRole('link',{name:'创建文档',exact:true}).count(),0);
+ assert.equal(await page.locator('.endoleap-brand').count(),1,'Only one brand belongs on the account page');
+ const accountSections=await page.locator('#account-content > div > section').evaluateAll(elements=>elements.map(el=>{const r=el.getBoundingClientRect();return {x:r.x,right:r.right,width:r.width}}));
+ assert.equal(accountSections.length,2);
+ assert.ok(accountSections[0].right<=accountSections[1].x,'Brand panel and credentials occupy separate columns');
+ const accountFits=async()=>assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth+1&&document.documentElement.scrollHeight<=innerHeight+1),'Account document fits both viewport axes');
+ const accountControlsFit=async()=>assert.ok(await page.locator('#account-content input, #account-content button[type="submit"]').evaluateAll(elements=>elements.every(el=>{const r=el.getBoundingClientRect();return r.left>=0&&r.right<=innerWidth&&r.top>=0&&r.bottom<=innerHeight})),'Account inputs and submit button remain visible, not merely clipped');
+ await accountFits();await accountControlsFit();
+ await page.screenshot({path:dir+'/account-desktop.png',fullPage:true});
+ await page.getByRole('button',{name:'创建账户',exact:true}).click();
+ await page.getByRole('heading',{name:'创建你的账户',exact:true}).waitFor();
+ await page.waitForFunction(()=>document.querySelector('#account-content').getAnimations({subtree:true}).every(animation=>animation.playState!=='running'));
+ await page.screenshot({path:dir+'/account-register.png',fullPage:true});
+ await page.getByRole('button',{name:'登录',exact:true}).click();
+ await page.waitForFunction(()=>document.querySelector('#account-content').getAnimations({subtree:true}).every(animation=>animation.playState!=='running'));
+ await page.setViewportSize({width:390,height:844});
+ await accountFits();await accountControlsFit();
+ await page.screenshot({path:dir+'/account-mobile.png',fullPage:true});
+ await page.setViewportSize({width:320,height:568});await accountFits();await accountControlsFit();
+ await page.screenshot({path:dir+'/account-mobile-compact.png',fullPage:true});
+ await page.setViewportSize({width:1100,height:1000});
+ await visitDocument(base+'/graphic',true);
  assert.equal(new URL(page.url()).pathname,'/graphic');
  await page.getByRole('button',{name:'添加文字',exact:true}).waitFor({state:'visible'});
  assert.equal(await page.locator('.library-item').count(),0,'Old catalog is retired from the entry page');
  await page.getByRole('button',{name:'添加文字',exact:true}).click();
  await page.getByRole('textbox',{name:'文字内容',exact:true}).fill('Studio 线上验收');
- await page.reload({waitUntil:'networkidle'});
+ await visitDocument(page.url(),true,true);
  assert.ok(await page.evaluate(()=>JSON.parse(localStorage.getItem('studio.graphic.v1')).items.some(i=>i.text==='Studio 线上验收')));
  await page.screenshot({path:dir+'/graphic-desktop.png',fullPage:true});
- await page.goto(base+'/infinite_canvas',{waitUntil:'networkidle'});
+ await visitDocument(base+'/infinite_canvas',true);
  assert.equal(new URL(page.url()).pathname,'/infinite_canvas');
  await page.getByRole('button',{name:'添加笔记',exact:true}).waitFor({state:'visible'});
  await page.screenshot({path:dir+'/infinite-canvas-desktop.png',fullPage:true});
  const verify=JSON.parse(await readFile('/tmp/studio-library/verification.json','utf8'));
- for(const d of verify.results){await page.goto(base+d.url,{waitUntil:'networkidle'});assert.equal(await page.locator('img').count(),1);const current=await page.locator('img').evaluate(img=>({src:img.currentSrc,complete:img.complete,width:img.naturalWidth}));assert.ok(current.complete&&current.width>0);assert.equal(new URL(current.src).pathname,'/api/preview');await page.locator('article.native-layout').screenshot({path:dir+'/'+d.layoutId+'-saved.png',style:'.page-tools{visibility:hidden}'});
+ for(const d of verify.results){await visitDocument(base+d.url);assert.equal(await page.locator('img').count(),1);const current=await page.locator('img').evaluate(img=>({src:img.currentSrc,complete:img.complete,width:img.naturalWidth}));assert.ok(current.complete&&current.width>0);assert.equal(new URL(current.src).pathname,'/api/preview');await page.locator('article.native-layout').screenshot({path:dir+'/'+d.layoutId+'-saved.png',style:'.page-tools{visibility:hidden}'});
   assert.equal(new URL(page.url()).pathname,'/studio/template-layout');
   assert.equal(await page.locator('button,input,textarea,select,[contenteditable],.page-tools,.workbench-top').count(),0);
   await page.locator('.native-copy').first().dblclick();await page.locator('.native-copy').first().dispatchEvent('contextmenu');
   assert.equal(await page.locator('button,input,textarea,select,[contenteditable],.workbench-top').count(),0);
   const plain=await browser.newContext({viewport:{width:1100,height:1000},javaScriptEnabled:false});
   await plain.route('**/*',async route=>{const u=new URL(route.request().url());if(u.origin===origin)return route.continue({headers:{...route.request().headers(),Authorization:'Bearer '+token}});return route.abort()});
-  const direct=await plain.newPage();await direct.goto(base+d.url,{waitUntil:'networkidle'});assert.equal(await direct.locator('article[data-design-id="'+d.id+'"]').count(),1);assert.ok((await direct.locator('article').innerText()).includes('API 验收'));await plain.close();
+  const direct=await plain.newPage();await navigateBrandDocument(timeout=>direct.goto(base+d.url,{waitUntil:'domcontentloaded',timeout}),base+d.url);assert.equal(await direct.locator('article[data-design-id="'+d.id+'"]').count(),1);assert.ok((await direct.locator('article').innerText()).includes('API 验收'));await plain.close();
  }
- for(const slug of ['learning-skills-template','layout-selection']){await page.goto(base+'/studio/ideas/'+slug,{waitUntil:'networkidle'});await page.screenshot({path:dir+'/tool-'+slug+'.png',fullPage:true})}
- await page.setViewportSize({width:390,height:844});await page.goto(base+'/graphic',{waitUntil:'networkidle'});assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));await page.screenshot({path:dir+'/graphic-mobile.png',fullPage:true});
- await page.goto(base+verify.results[0].url,{waitUntil:'networkidle'});await page.screenshot({path:dir+'/standard-mobile.png',fullPage:true});
- await page.goto(base+'/categories?category='+encodeURIComponent('文档入口'),{waitUntil:'domcontentloaded',timeout:60000});await page.getByRole('navigation',{name:'系统标签分类',exact:true}).waitFor({state:'visible'});assert.equal(await page.locator('.discovery-card').count(),3);await page.waitForFunction(()=>Array.from(document.querySelectorAll('.discovery-card img')).every(img=>img.complete&&img.naturalWidth>0),null,{timeout:60000});await page.screenshot({path:dir+'/document-entries.png',fullPage:true});
+ for(const slug of ['learning-skills-template','layout-selection']){await visitDocument(base+'/studio/ideas/'+slug);await page.screenshot({path:dir+'/tool-'+slug+'.png',fullPage:true})}
+ await page.setViewportSize({width:390,height:844});await visitDocument(base+'/graphic',true);assert.ok(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth));await page.screenshot({path:dir+'/graphic-mobile.png',fullPage:true});
+ await visitDocument(base+verify.results[0].url);await page.screenshot({path:dir+'/standard-mobile.png',fullPage:true});
+ await visitDocument(base+'/categories?category='+encodeURIComponent('文档入口'),true);await page.getByRole('navigation',{name:'系统标签分类',exact:true}).waitFor({state:'visible'});assert.equal(await page.locator('.discovery-card').count(),3);await page.waitForFunction(()=>Array.from(document.querySelectorAll('.discovery-card img')).every(img=>img.complete&&img.naturalWidth>0),null,{timeout:60000});await page.screenshot({path:dir+'/document-entries.png',fullPage:true});
  await writeFile(dir+'/metrics.json',JSON.stringify({metrics,images,errors},null,2));
  assert.equal(images.filter(r=>new URL(r.path,base).pathname.startsWith('/api/media/')).length,0,'Display must never fetch originals');if(!process.argv.includes('--diagnose'))assert.equal(errors.length,0,JSON.stringify(errors));for(const image of images){if(/^\/(?:studio\/)?brand\/(?:logo-light|logo-dark|icon-dark)\.svg$/.test(new URL(image.path,base).pathname)){assert.equal(image.status,200);assert.match(image.type,/image\/svg\+xml/);continue;}assert.equal(new URL(image.path,base).pathname,'/api/preview');assert.equal(image.status,200);assert.equal(image.type,'image/webp');assert.ok(image.bytes>0&&image.bytes<=220000)}
  await writeFile(dir+'/metrics.json',JSON.stringify({metrics,images,errors},null,2));await browser.close();
  console.log(JSON.stringify({diagnostic:process.argv.includes('--diagnose'),legacyLayoutsChecked:checkLegacy,legacyPages:metrics.length,errors:errors.length,displayImages:images.length,originalImageRequests:0,overflow:metrics.filter(m=>m.overflow.length)}));
-})().catch(e=>{console.error(e.message);process.exit(1)});
+})().catch(e=>{console.error(e.stack||e.message);process.exit(1)});