docs(spikes): Deno 2.9.7 + TS 7 compatibility spike and ADR-004

Co-Authored-By: Claude Fable 5.1 <[email protected]>

spikes/deno/web/app/routes/console/agent.tsx

@@ -0,0 +1,31 @@
+import { Bot, Send } from "lucide-react";
+import { EmptyState } from "~/components/console/empty-state";
+import { PageHeader } from "~/components/console/page-header";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+
+/** Agent 会话页占位:消息流 + 输入框骨架,W2/W3 接入 agent_run 与 SSE 增量 */
+export default function AgentSession() {
+  return (
+    <>
+      <PageHeader
+        title="Agent 会话"
+        description="交代目标，Agent 在授权范围内边执行边汇报；只要方案时，它只调查不执行。"
+      />
+      <div className="flex min-h-[60vh] flex-col gap-4">
+        <EmptyState
+          icon={Bot}
+          title="还没有会话"
+          description="例如：“把某部电影的 1080p 收进来”。会话能力计划在 W2 接入。"
+          className="flex-1"
+        />
+        <form className="flex items-center gap-2" onSubmit={(e) => e.preventDefault()}>
+          <Input disabled placeholder="Agent 尚未接入" className="flex-1" />
+          <Button type="submit" disabled size="icon" aria-label="发送">
+            <Send className="h-4 w-4" />
+          </Button>
+        </form>
+      </div>
+    </>
+  );
+}

spikes/deno/web/app/routes/console/home.tsx

@@ -0,0 +1,58 @@
+import { Activity, AlertTriangle, CircleCheck, HardDrive, ListTodo, Radio, Sparkles } from "lucide-react";
+import { useHealth } from "~/api/health";
+import { EmptyState } from "~/components/console/empty-state";
+import { PageHeader } from "~/components/console/page-header";
+import { StatusBadge } from "~/components/console/status-badge";
+import { formatDateTime } from "~/lib/utils";
+
+// 首页六区块(REQ §13.4.3),W3 接入正式状态投影
+const SECTIONS = [
+  { title: "自动化概览", icon: Sparkles, hint: "今日新增、升级与已核验入库" },
+  { title: "当前工作", icon: Activity, hint: "正在搜索/下载/整理/核验的目标" },
+  { title: "需要我处理", icon: AlertTriangle, hint: "根因级事项与剩余决策" },
+  { title: "缓存与保留", icon: HardDrive, hint: "使用率、在途预留与可清理量" },
+  { title: "来源健康", icon: Radio, hint: "站点、qB、Emby、模型上游" },
+  { title: "最近产出", icon: ListTodo, hint: "新增的集与版本、整理前后路径" },
+];
+
+function ServiceStatus() {
+  const { data, isPending, isError, error } = useHealth();
+  if (isPending) return <StatusBadge>检查中</StatusBadge>;
+  if (isError) return <StatusBadge tone="destructive">服务不可达：{error.message}</StatusBadge>;
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <StatusBadge tone={data.status === "ok" ? "success" : "warning"}>
+        服务{data.status === "ok" ? "正常" : "降级"}
+      </StatusBadge>
+      <StatusBadge tone={data.db === "ok" ? "success" : data.db === "down" ? "destructive" : "neutral"}>
+        数据库 {data.db === "ok" ? "正常" : data.db === "down" ? "不可用" : "未知"}
+      </StatusBadge>
+      <span className="text-meta text-muted-foreground">
+        v{data.version} · {data.role} · {formatDateTime(data.time)}
+      </span>
+    </div>
+  );
+}
+
+export default function Home() {
+  return (
+    <>
+      <PageHeader
+        title="首页"
+        description="系统是否在推进目标、完成了什么、还有什么缺口、是否需要你。"
+        actions={<ServiceStatus />}
+      />
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {SECTIONS.map((s) => (
+          <section key={s.title} className="pg-slab rounded-xl p-5">
+            <div className="mb-3 flex items-center gap-2">
+              <s.icon className="h-4 w-4 text-muted-foreground" />
+              <h2 className="text-body font-semibold text-foreground">{s.title}</h2>
+            </div>
+            <EmptyState icon={CircleCheck} title="暂无数据" description={s.hint} plain className="py-8" />
+          </section>
+        ))}
+      </div>
+    </>
+  );
+}

spikes/deno/web/app/routes/console/identity.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function IdentityPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/inbox.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function InboxPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/layout.tsx

@@ -0,0 +1,208 @@
+import { ChevronLeft, ChevronRight, Clapperboard, Menu } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Link, NavLink, Outlet, useLocation } from "react-router";
+import { ApiKeyDialog } from "~/components/console/api-key-dialog";
+import { findNavItem, NAV_GROUPS, NAV_ITEMS, type NavGroup } from "~/components/console/nav";
+import PrismLeak from "~/components/prism-leak";
+import { ThemeToggle } from "~/components/theme-toggle";
+import { Button } from "~/components/ui/button";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "~/components/ui/sheet";
+import { cn } from "~/lib/utils";
+
+const PORTAL_NAME = "媒体自动化";
+
+// ─── 展开态导航:选中项由一枚玻璃滑块(seg-thumb)滑到激活链接背后 ───
+function ExpandedNav({ groups, onNavigate }: { groups: NavGroup[]; onNavigate?: () => void }) {
+  const location = useLocation();
+  const navRef = useRef<HTMLElement>(null);
+  const [pill, setPill] = useState<{ x: number; y: number; w: number; h: number } | null>(null);
+
+  const measure = useCallback(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const active = nav.querySelector<HTMLElement>('[aria-current="page"]');
+    if (!active) {
+      setPill(null);
+      return;
+    }
+    const navRect = nav.getBoundingClientRect();
+    const rect = active.getBoundingClientRect();
+    setPill({ x: rect.left - navRect.left, y: rect.top - navRect.top + nav.scrollTop, w: rect.width, h: rect.height });
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: 路由变化时重新量测
+  useLayoutEffect(() => {
+    measure();
+  }, [measure, location.pathname]);
+
+  useEffect(() => {
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [measure]);
+
+  return (
+    <nav ref={navRef} className="relative flex-1 space-y-4 overflow-y-auto px-2.5 py-4">
+      {pill ? (
+        <span
+          aria-hidden
+          className="tab-slider seg-thumb pointer-events-none absolute top-0 left-0 -z-[1] rounded-lg"
+          style={{ transform: `translate(${pill.x}px, ${pill.y}px)`, width: pill.w, height: pill.h }}
+        />
+      ) : null}
+      {groups.map((group) => (
+        <div key={group.title}>
+          <p className="mb-1 px-2 text-micro font-semibold tracking-[0.15em] text-muted-foreground/75 uppercase">
+            {group.title}
+          </p>
+          <div className="space-y-0.5">
+            {group.items.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.to === "/"}
+                onClick={onNavigate}
+                className={({ isActive }) =>
+                  cn(
+                    "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-base",
+                    isActive
+                      ? "text-foreground"
+                      : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+                  )
+                }
+              >
+                {({ isActive }) => (
+                  <>
+                    <item.icon className={cn("h-4 w-4 shrink-0", isActive && "text-primary")} />
+                    <span className="flex-1 truncate">{item.label}</span>
+                  </>
+                )}
+              </NavLink>
+            ))}
+          </div>
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+// ─── 折叠态:只显示图标 ───
+function CollapsedNav() {
+  return (
+    <nav className="flex flex-1 flex-col items-center gap-1 overflow-y-auto py-4">
+      {NAV_ITEMS.map((item) => (
+        <NavLink
+          key={item.to}
+          to={item.to}
+          end={item.to === "/"}
+          title={item.label}
+          className={({ isActive }) =>
+            cn(
+              "flex h-10 w-10 items-center justify-center rounded-xl transition-colors duration-micro",
+              isActive
+                ? "seg-thumb text-primary"
+                : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+            )
+          }
+        >
+          <item.icon className="h-[18px] w-[18px]" />
+        </NavLink>
+      ))}
+    </nav>
+  );
+}
+
+function Brand({ collapsed = false }: { collapsed?: boolean }) {
+  return (
+    <Link
+      to="/"
+      className={cn(
+        "flex items-center transition-opacity hover:opacity-80",
+        collapsed ? "w-full justify-center" : "gap-2",
+      )}
+    >
+      <span className="grid h-7 w-7 place-items-center rounded-lg pill-selected">
+        <Clapperboard className="h-4 w-4" />
+      </span>
+      {!collapsed && <p className="text-xs font-bold tracking-wide text-foreground">UHD Media Tool</p>}
+    </Link>
+  );
+}
+
+export default function ConsoleLayout() {
+  const location = useLocation();
+  const [collapsed, setCollapsed] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const activeLabel = findNavItem(location.pathname)?.label ?? PORTAL_NAME;
+
+  return (
+    <div className="app-scrollbars relative isolate flex min-h-screen overflow-x-hidden bg-background">
+      <div className="pointer-events-none fixed inset-0 -z-10 bg-page-glow" />
+      <PrismLeak className="-z-10" />
+
+      {/* 桌面端侧栏 */}
+      <aside
+        className={cn(
+          "pg-chrome pg-chrome-side fixed inset-y-0 left-0 z-30 hidden flex-col border-r transition-all duration-layout select-none xl:flex",
+          collapsed ? "w-[60px]" : "w-60",
+        )}
+      >
+        <button
+          type="button"
+          onClick={() => setCollapsed((v) => !v)}
+          className="absolute top-3 -right-4 z-40 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-[var(--shell-border)] bg-background text-muted-foreground shadow-md transition-all duration-base hover:scale-110 hover:bg-foreground/[0.04] hover:text-foreground"
+          title={collapsed ? "展开侧边栏" : "收起侧边栏"}
+        >
+          {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+        </button>
+        <div
+          className={cn(
+            "flex h-14 shrink-0 items-center border-b border-[var(--shell-border)]",
+            collapsed ? "justify-center px-0" : "px-4",
+          )}
+        >
+          <Brand collapsed={collapsed} />
+        </div>
+        {collapsed ? <CollapsedNav /> : <ExpandedNav groups={NAV_GROUPS} />}
+      </aside>
+
+      {/* 主内容区 */}
+      <div
+        className={cn(
+          "relative flex min-h-screen min-w-0 flex-1 flex-col transition-all duration-layout",
+          collapsed ? "xl:ml-[60px]" : "xl:ml-60",
+        )}
+      >
+        <header className="pg-chrome sticky top-0 z-20 flex h-14 items-center border-b px-4 md:px-6">
+          <div className="flex min-w-0 items-center gap-3">
+            <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8 xl:hidden" aria-label="打开导航">
+                  <Menu className="h-4 w-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-64 p-0 select-none">
+                <SheetHeader className="border-b border-[var(--shell-border)] px-5 py-4">
+                  <SheetTitle className="text-sm">
+                    <Brand />
+                  </SheetTitle>
+                </SheetHeader>
+                <ExpandedNav groups={NAV_GROUPS} onNavigate={() => setSheetOpen(false)} />
+              </SheetContent>
+            </Sheet>
+            <span className="truncate text-sm font-semibold text-foreground">{activeLabel}</span>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <ApiKeyDialog />
+            <ThemeToggle />
+          </div>
+        </header>
+
+        <main className="relative flex-1 overflow-x-hidden px-4 py-6 md:px-6 md:py-8">
+          <div key={location.pathname} className="mx-auto max-w-6xl motion-safe:animate-blur-in">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

spikes/deno/web/app/routes/console/library.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function LibraryPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/organize.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function OrganizePage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/preferences.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function PreferencesPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/settings.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function SettingsPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/sites.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function SitesPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/sources.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function SourcesPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/subscriptions.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function SubscriptionsPage() {
+  return <WorkspacePlaceholder />;
+}

spikes/deno/web/app/routes/console/tasks.tsx

@@ -0,0 +1,6 @@
+import { WorkspacePlaceholder } from "~/components/console/workspace-placeholder";
+
+// 占位:标题与说明取自 components/console/nav.ts
+export default function TasksPage() {
+  return <WorkspacePlaceholder />;
+}