@allbluecn/web-app 0.17.2 → 0.18.1

package/src/routes/_nav/dashboard/route.lazy.tsx

@@ -20,9 +20,7 @@ import { ClientOnly, createLazyFileRoute } from '@tanstack/react-router'
 import { useEffect, useState } from 'react'
 import { StatsGrid } from './-components/stats-grid'
 import { ActivityFeed } from './-components/activity-feed'
-import { QuickActions } from './-components/quick-actions'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import LiquidEther from '@/components/react-bits/liquid-ether'
+import { Card, CardContent, CardHeader, CardTitle } from '@allbluecn/ui/card'
 import { LightRays as MagicuiLightRays } from '@/components/magicui/light-rays'
 import WebglLightRays from '@/components/react-bits/light-rays'
 import { AiChatPrompt } from '@/components/ai/ai-chat-prompt'

package/src/routes/_nav/dashboard/route.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from '@tanstack/react-router'
-import { listPrdFn } from '@/plugins/core/prd/serverFns'
+import { listDesignsFn } from '@/server/serverFns/design'
 import { getActivityDataFn } from '@/server/serverFns/activity'
 import { resolveTimezone } from '@/lib/datetime'
 
@@ -25,7 +25,7 @@ export const Route = createFileRoute('/_nav/dashboard')({
     try {
       const timezone = resolveTimezone(null, context.session?.user?.timezone)
       const [prds, activityData] = await Promise.all([
-        listPrdFn({ data: {} }),
+        listDesignsFn({ data: {} }),
         getActivityDataFn({ data: { timezone } }),
       ])
       return { prds, activityData }

package/src/routes/_nav/design/canvas/$id/route.lazy.tsx

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { DesignDetailPage } from '@/components/design/editor/pages/design-detail-page'
+
+export const Route = createLazyFileRoute('/_nav/design/canvas/$id')({
+  component: DesignDetailPage,
+})

package/src/routes/_nav/design/canvas/$id/route.tsx

@@ -0,0 +1,36 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute, notFound, redirect } from '@tanstack/react-router'
+import { getDesignDetailFn } from '@/server/serverFns/design/detail'
+
+export const Route = createFileRoute('/_nav/design/canvas/$id')({
+  beforeLoad: async (ctx) => {
+    const id = ctx.params.id
+    const result = await getDesignDetailFn({ data: { id } })
+    if (result.error === 'unauthorized') {
+      throw redirect({ to: '/login' })
+    }
+    if (result.error === 'not_found') {
+      throw notFound()
+    }
+    return {
+      prd: result.prd,
+      session: result.session,
+    }
+  },
+})

package/src/routes/_nav/design/index.lazy.tsx

@@ -15,305 +15,13 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { createLazyFileRoute, Link } from "@tanstack/react-router"
-import { cn } from "@/lib/utils"
-import { useEffect, useMemo, useState } from "react"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { GridPattern } from "@/components/magicui/grid-pattern"
-import { StripedPattern } from "@/components/magicui/striped-pattern"
-import { PenToolIcon } from "@/components/animated-icons/pen-tool"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { deleteDesignProjectFn } from "@/server/serverFns/design"
-import { formatDate } from "@/lib/datetime"
-import { useTimezone } from "@/providers/timezone-provider"
-import {
-  Clock,
-  Download,
-  LoaderPinwheel,
-  Palette,
-  Search,
-  Trash2,
-  Plus,
-} from "lucide-react"
-import { m } from "@/paraglide/messages.js";
-
-const DEFAULT_SQUARES: [number, number][] = []
-
-interface DesignProject {
-  id: string
-  name: string
-  sketchName: string | null
-  version: number
-  createdAt: string
-  updatedAt: string
-  _count: { artboards: number }
-  artboards: { pngPath: string; width: number; height: number }[]
-}
-
-interface StatCard {
-  title: string
-  value: number
-  accent: string
-}
-
-function formatRelative(dateStr: string, timezone: string): string {
-  const date = new Date(dateStr)
-  const now = new Date()
-  const diffMs = now.getTime() - date.getTime()
-  const minutes = Math.floor(diffMs / 60000)
-  const hours = Math.floor(minutes / 60)
-  const days = Math.floor(hours / 24)
-  if (minutes < 1) return m.design_justNow()
-  if (minutes < 60) return m.design_minutesAgo({ count: minutes })
-  if (hours < 24) return m.design_hoursAgo({ count: hours })
-  if (days < 7) return m.design_daysAgo({ count: days })
-  return formatDate(date, timezone, 'yyyy-MM-dd')
-}
+import { createLazyFileRoute } from "@tanstack/react-router"
+import { DesignDashboard } from "@/components/design/editor/dashboard/design-dashboard"
 
 export const Route = createLazyFileRoute("/_nav/design/")({
-  pendingComponent: () => (
-    <div className="flex h-full items-center justify-center">
-      <LoaderPinwheel className="size-6 animate-spin text-muted-foreground" />
-    </div>
-  ),
-  component: DesignDashboard,
+  component: DesignPage,
 })
 
-function DesignDashboard() {
-  const { projects: initialProjects } = Route.useLoaderData()
-  const timezone = useTimezone()
-  const [projects, setProjects] = useState<DesignProject[]>(initialProjects as unknown as DesignProject[])
-  const [loading, setLoading] = useState(false)
-  const [search, setSearch] = useState("")
-  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null)
-  const [deleting, setDeleting] = useState(false)
-  const [squares, setSquares] = useState<[number, number][]>(DEFAULT_SQUARES)
-
-  useEffect(() => {
-    setSquares(Array.from({ length: 30 }, () => [
-      Math.floor(Math.random() * 30),
-      Math.floor(Math.random() * 30),
-    ]))
-  }, [])
-
-  const handleConfirmDelete = async () => {
-    if (!pendingDeleteId) return
-    setDeleting(true)
-    try {
-      await deleteDesignProjectFn({ data: { id: pendingDeleteId } })
-      setProjects((prev) => prev.filter((p) => p.id !== pendingDeleteId))
-      setPendingDeleteId(null)
-    } catch (error) {
-      console.error("Failed to delete design project:", error instanceof Error ? error.message : String(error))
-    } finally {
-      setDeleting(false)
-    }
-  }
-
-  const filtered = useMemo(() => {
-    const q = search.trim().toLowerCase()
-    if (!q) return projects
-    return projects.filter(
-      (p) =>
-        p.name.toLowerCase().includes(q) ||
-        (p.sketchName || "").toLowerCase().includes(q),
-    )
-  }, [projects, search])
-
-  const stats = useMemo<StatCard[]>(() => {
-    const weekAgo = new Date()
-    weekAgo.setDate(weekAgo.getDate() - 7)
-    const dayAgo = new Date()
-    dayAgo.setDate(dayAgo.getDate() - 1)
-    return [
-      { title: m.design_stats_totalTitle(), value: projects.length, accent: "text-foreground" },
-      {
-        title: m.design_stats_weeklyNew(),
-        value: projects.filter((p) => new Date(p.createdAt) >= weekAgo).length,
-        accent: "text-emerald-600 dark:text-emerald-400",
-      },
-      {
-        title: m.design_stats_updated24h(),
-        value: projects.filter((p) => new Date(p.updatedAt) >= dayAgo).length,
-        accent: "text-sky-600 dark:text-sky-400",
-      },
-    ]
-  }, [projects])
-
-  const thumbnailUrl = (project: DesignProject) => {
-    const first = project.artboards[0]
-    if (!first) return null
-    return `/design-files/${project.id}/${first.pngPath.split("/").slice(-2, -1)[0]}/preview.png`
-  }
-
-  return (
-    <div className="relative h-full overflow-y-auto overflow-x-hidden">
-      <div className="absolute inset-x-0 top-0 h-100 overflow-hidden">
-        {/* <GridPattern
-          width={30}
-          height={30}
-          x={-1}
-          y={-1}
-          strokeDasharray={"4 2"}
-          squares={squares}
-          className={cn(
-            "mask-[linear-gradient(to_bottom,white_80%,transparent)] fill-primary/10 stroke-primary/10 -skew-y-6"
-          )}
-        /> */}
-        <StripedPattern
-          direction="right"
-          className="stroke-[0.1] mask-[linear-gradient(to_bottom,white_80%,transparent)]"
-        />
-      </div>
-      <div className="relative z-10 mx-auto max-w-6xl px-6 py-6">
-        <div className="relative mb-8 mt-2 flex flex-col items-center py-10 text-center">
-          <PenToolIcon size={56} className="mb-4 text-primary" />
-          <h1 className="text-2xl font-semibold">{m.design_title()}</h1>
-          <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            {m.design_subtitle()}
-          </p>
-          <div className="mx-auto mt-6 flex w-full max-w-2xl flex-col items-center gap-3">
-            <div className="relative w-full">
-              <Search className="absolute left-6 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder={m.design_searchPlaceholder()}
-                className="h-14 rounded-3xl bg-background/60 pl-12 dark:border-primary/40"
-              />
-            </div>
-          </div>
-          <div className="space-x-4">
-            <a href="/downloads/allblue-sketch-plugin.zip" download>
-              <Button className="mt-6">
-                <Plus className="size-4" />
-                {m.design_createDesign()}
-              </Button>
-            </a>
-            <a href="/downloads/allblue-sketch-plugin.zip" download>
-              <Button variant="outline" className="gap-2">
-                <Download className="size-4" />
-                {m.design_downloadSketchPlugin()}
-              </Button>
-            </a>
-          </div>
-        </div>
-
-        <div className="grid gap-4 sm:grid-cols-3">
-          {stats.map((stat) => (
-            <Card key={stat.title} className="p-5">
-              <p className="text-sm font-medium text-muted-foreground">{stat.title}</p>
-              <div className={`mt-2 text-3xl font-bold ${stat.accent}`}>{stat.value}</div>
-            </Card>
-          ))}
-        </div>
-
-        {loading ? (
-          <Card className="mt-6 flex flex-col items-center gap-2 p-16 text-muted-foreground">
-            <LoaderPinwheel className="size-6 animate-spin" />
-            <span>{m.design_loading()}</span>
-          </Card>
-        ) : filtered.length === 0 ? (
-          <Card className="mt-6 flex flex-col items-center justify-center gap-4 p-16 text-center">
-            <div>
-              <h2 className="text-lg font-medium">{m.design_emptyTitle()}</h2>
-              <p className="mt-1 text-sm text-muted-foreground">
-                {search.trim() ? m.design_emptyNoResults() : m.design_emptyDescription()}
-              </p>
-            </div>
-            {!search.trim() && (
-              <a href="/downloads/allblue-sketch-plugin.zip" download>
-                <Button variant="outline" className="gap-2">
-                  <Download className="size-4" />
-                  {m.design_downloadSketchPlugin()}
-                </Button>
-              </a>
-            )}
-          </Card>
-        ) : (
-          <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-            {filtered.map((project) => {
-              const thumb = thumbnailUrl(project)
-              return (
-                <Card key={project.id} className="group relative p-0 transition-colors hover:bg-accent/40 border rounded-lg overflow-hidden">
-                  <Link to="/design/$projectId" params={{ projectId: project.id }} className="absolute inset-0" aria-label={project.name} />
-                  <div className="aspect-video bg-muted flex items-center justify-center overflow-hidden">
-                    {thumb ? (
-                      <img src={thumb} alt={project.name} className="h-full w-full object-cover" />
-                    ) : (
-                      <Palette className="size-8 text-muted-foreground/50" />
-                    )}
-                  </div>
-                  <div className="p-5">
-                    <div className="flex items-start justify-between">
-                      <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-                        <Palette className="size-5 text-primary" />
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="relative z-10 size-7 opacity-0 group-hover:opacity-100"
-                        aria-label={m.design_deleteDesign()}
-                        onClick={() => setPendingDeleteId(project.id)}
-                      >
-                        <Trash2 className="size-4 text-muted-foreground" />
-                      </Button>
-                    </div>
-                    <h3 className="mt-4 font-medium text-lg truncate">{project.name}</h3>
-                    {project.sketchName && (
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        {m.design_sketchFile({ name: project.sketchName })}
-                      </p>
-                    )}
-                    <p className="mt-1 line-clamp-2 min-h-10 text-sm text-muted-foreground">
-                      {m.design_artboardVersionInfo({ count: project._count.artboards, version: project.version })}
-                    </p>
-                    <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
-                      <span className="flex items-center gap-1">
-                        <Clock className="size-3.5" />
-                        {m.design_updatedAt({ date: formatRelative(project.updatedAt, timezone) })}
-                      </span>
-                    </div>
-                  </div>
-                </Card>
-              )
-            })}
-          </div>
-        )}
-      </div>
-
-      <AlertDialog
-        open={!!pendingDeleteId}
-        onOpenChange={(open) => {
-          if (!open) setPendingDeleteId(null)
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{m.design_deleteConfirmTitle()}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {m.design_deleteConfirmDescription()}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleting}>{m.design_cancel()}</AlertDialogCancel>
-            <AlertDialogAction onClick={handleConfirmDelete} disabled={deleting}>
-              {deleting ? m.design_deleteLoading() : m.design_deleteConfirm()}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  )
+function DesignPage() {
+  return <DesignDashboard />
 }

package/src/routes/_nav/design/index.tsx

@@ -16,11 +16,11 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from "@tanstack/react-router"
-import { listDesignProjectsFn } from "@/server/serverFns/design"
+import { listDesignsFn } from "@/server/serverFns/design/designs"
 
 export const Route = createFileRoute("/_nav/design/")({
   loader: async () => {
-    const projects = await listDesignProjectsFn({ data: {} })
-    return { projects }
+    const prds = await listDesignsFn({ data: {} })
+    return { prds }
   },
 })

package/src/routes/_nav/harness/$threadId.lazy.tsx

@@ -23,6 +23,8 @@ export const Route = createLazyFileRoute('/_nav/harness/$threadId')({
   component: function HarnessThreadRoute() {
     const { threadId } = Route.useParams()
     const messages = Route.useLoaderData() as { messages: UIMessage[] }
-    return <HarnessWorkbenchPage initialThreadId={threadId} initialMessages={messages.messages} />
+    // key 强制重建：HarnessWorkbenchPage 以 useState(initialThreadId) 持有会话状态，
+    // route param 变化时组件实例被复用，无 key 会残留上一线程的消息
+    return <HarnessWorkbenchPage key={threadId} initialThreadId={threadId} initialMessages={messages.messages} />
   },
 })

package/src/routes/_nav/inspiration/route.lazy.tsx

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { InspirationPage } from '@/components/inspiration/pages/inspiration-page'
+
+export const Route = createLazyFileRoute('/_nav/inspiration')({
+  component: InspirationPage,
+})

package/src/routes/_nav/inspiration/route.tsx

@@ -1,8 +1,20 @@
-// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
 import { createFileRoute } from '@tanstack/react-router'
-import type { PluginRouteContext } from '@allbluecn/kernel'
-import { inspiration_route_0 } from '@/plugins/core/inspiration/routes'
 
-export const Route = createFileRoute('/_nav/inspiration')({
-  component: inspiration_route_0.Component as any,
-})
+export const Route = createFileRoute('/_nav/inspiration')({})

package/src/routes/_nav/knowledge/$kbId/-components/knowledge-workspace-pending.tsx

@@ -0,0 +1,70 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Skeleton } from '@allbluecn/ui/skeleton'
+
+const PENDING_CONTENT_SKELETON = (
+  <div className="px-20 pt-6 pb-2 mx-auto w-full space-y-6" style={{ maxWidth: '50%' }}>
+    <Skeleton className="h-10 w-64" />
+    <div className="flex items-center gap-3">
+      <Skeleton className="size-6 rounded-full" />
+      <Skeleton className="h-[20px] w-20" />
+      <Skeleton className="h-[20px] w-24" />
+      <Skeleton className="h-5 w-14 rounded-md" />
+    </div>
+    <div className="space-y-3">
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="h-4 w-4/5" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/4" />
+    </div>
+  </div>
+)
+
+export function KnowledgeWorkspacePending() {
+  return (
+    <div className="flex h-full overflow-hidden rounded-xl">
+      <div className="w-64 shrink-0 border-r bg-background flex flex-col">
+        <div className="flex items-center justify-between px-3 py-3 border-b">
+          <Skeleton className="h-[20px] w-16" />
+          <Skeleton className="size-6 rounded" />
+        </div>
+        <div className="flex-1 overflow-auto p-3">
+          <div className="space-y-1">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} className="h-7 rounded-md" style={{ width: `${85 - (i % 2) * 15}%` }} />
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 flex flex-col min-w-0">
+        <div className="flex items-center gap-3 px-4 py-2 border-b">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-20" />
+          <div className="ml-auto flex gap-2">
+            <Skeleton className="h-8 w-8 rounded" />
+            <Skeleton className="h-8 w-8 rounded" />
+          </div>
+        </div>
+        <div className="flex-1 min-h-0">
+          {PENDING_CONTENT_SKELETON}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/knowledge/$kbId/doc/$docId/route.lazy.tsx

@@ -18,7 +18,8 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { FileText, Table } from 'lucide-react'
 import { PlaceholderPage } from '@/components/shared-kit/pages/placeholder-page'
-import { KnowledgeDocEditor, DOC_EDITOR_WIDTH_VARS } from '@/components/knowledge/editor/knowledge-doc-editor'
+import { KnowledgeDocEditor } from '@/components/knowledge/editor/knowledge-doc-editor'
+import { DOC_EDITOR_WIDTH_VARS } from '@/components/knowledge/editor/knowledge-doc-editor-vars'
 import { EDITOR_WIDTH_MAX_WIDTH, useEditorWidth } from '@/components/knowledge/editor/editor-width-context'
 import { m } from "@/paraglide/messages.js";
 

package/src/routes/_nav/knowledge/$kbId/doc/$docId/route.tsx

@@ -16,9 +16,9 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from '@tanstack/react-router'
-import { Skeleton } from '@/components/ui/skeleton'
+import { Skeleton } from '@allbluecn/ui/skeleton'
 import { getDocumentFn } from '@/server/serverFns/knowledge'
-import { DOC_EDITOR_WIDTH_VARS } from '@/components/knowledge/editor/knowledge-doc-editor'
+import { DOC_EDITOR_WIDTH_VARS } from '@/components/knowledge/editor/knowledge-doc-editor-vars'
 import { EDITOR_WIDTH_MAX_WIDTH, useEditorWidth } from '@/components/knowledge/editor/editor-width-context'
 
 function DocPending() {
@@ -48,10 +48,6 @@ function DocPending() {
 export const Route = createFileRoute('/_nav/knowledge/$kbId/doc/$docId')({
   pendingComponent: DocPending,
   loader: async ({ params }) => {
-    try {
-      return await getDocumentFn({ data: { id: params.docId } })
-    } catch (e) {
-      throw e
-    }
+    return getDocumentFn({ data: { id: params.docId } })
   },
 })

package/src/routes/_nav/knowledge/$kbId/route.lazy.tsx

@@ -17,14 +17,14 @@
 
 import { createLazyFileRoute, Outlet, useNavigate, useLocation, useRouter } from '@tanstack/react-router'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useSession } from '@/lib/auth/auth-client'
-import { Button } from '@/components/ui/button'
+import { Button } from '@allbluecn/ui/button'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 import { KnowledgeTree } from '@/components/knowledge/knowledge-tree'
 import { KnowledgeToolbar } from '@/components/knowledge/knowledge-toolbar'
 import { EditorWidthContext, type EditorWidth } from '@/components/knowledge/editor/editor-width-context'
 import { getDocBreadcrumbFn, createDocumentFn } from '@/server/serverFns/knowledge'
 import { m } from "@/paraglide/messages.js";
+import { onEvent, AppEvents } from '@/lib/events'
 
 const WIDTH_SWITCH_THRESHOLD = 1400
 
@@ -44,7 +44,6 @@ function KnowledgeWorkspaceLayout() {
   const navigate = useNavigate()
   const location = useLocation()
   const router = useRouter()
-  const session = useSession()
   const [selectedWidth, setSelectedWidth] = useState<EditorWidth>('auto')
   const [effectiveWidth, setEffectiveWidth] = useState<EditorWidth>('auto')
   const [treeRefreshKey, setTreeRefreshKey] = useState(0)
@@ -90,13 +89,7 @@ function KnowledgeWorkspaceLayout() {
   }, [activeDocId, kbId, treeRefreshKey])
 
   useEffect(() => {
-    if (session.data && !session.data.user?.id) navigate({ to: '/login' })
-  }, [session.data, navigate])
-
-  useEffect(() => {
-    const handleUpdated = () => router.invalidate()
-    window.addEventListener('knowledge-updated', handleUpdated)
-    return () => window.removeEventListener('knowledge-updated', handleUpdated)
+    return onEvent(AppEvents.knowledge.updated, () => router.invalidate())
   }, [router])
 
   useEffect(() => {
@@ -109,8 +102,6 @@ function KnowledgeWorkspaceLayout() {
     return () => observer.disconnect()
   }, [selectedWidth])
 
-  if (!session.data?.user?.id) return null
-
   if (!kb) {
     return (
       <div className="flex h-full overflow-hidden rounded-xl items-center justify-center">