@allbluecn/web-app 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/web-app",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "files": [
@@ -202,7 +202,6 @@
     "@allbluecn/kernel": "0.5.1"
   },
   "devDependencies": {
-    "@allblue/devtools": "workspace:*",
     "@babel/parser": "^8.0.4",
     "@babel/traverse": "^8.0.4",
     "@cloudflare/vite-plugin": "^1.40.1",

package/src/components/devtools/ai-chat-panel.tsx

@@ -0,0 +1,54 @@
+// 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/>.
+
+export function AIChatPanel() {
+  return (
+    <div className="flex h-full flex-col gap-4 overflow-auto p-3">
+      <div className="space-y-2">
+        <h4 className="text-sm font-semibold">AI Chat 监控</h4>
+        <p className="text-xs text-muted-foreground">
+          预留面板：监控 AI 对话状态、模型选择和 Token 消耗。
+        </p>
+      </div>
+      <div className="space-y-2">
+        <h4 className="text-sm font-semibold">配置</h4>
+        <div className="rounded border p-3 space-y-2">
+          <div className="text-xs">
+            <span className="text-muted-foreground">SSE 端点: </span>
+            <code>/api/chat</code>
+          </div>
+          <div className="text-xs">
+            <span className="text-muted-foreground">Adapter: </span>
+            <span>TanStack AI + OpenRouter/Anthropic/Gemini/…</span>
+          </div>
+          <div className="text-xs">
+            <span className="text-muted-foreground">持久化: </span>
+            <span>Prisma (AiProviderConfig)</span>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <h4 className="text-sm font-semibold">调试提示</h4>
+        <div className="rounded border border-amber-200 bg-amber-50 p-2">
+          <p className="text-xs text-amber-800">
+            使用浏览器 DevTools Network 面板查看 <code>/api/chat</code> SSE 连接。
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/devtools/devtools-panel.tsx

@@ -0,0 +1,100 @@
+// 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 { useEffect, useState, useCallback } from 'react'
+import { AIChatPanel } from './ai-chat-panel'
+import { SessionPanel } from './session-panel'
+
+type TabName = 'ai-chat' | 'session'
+
+interface TabConfig {
+  id: TabName
+  label: string
+}
+
+const TABS: TabConfig[] = [
+  { id: 'ai-chat', label: 'AI Chat' },
+  { id: 'session', label: 'Session' },
+]
+
+export function DevtoolsPanel() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [activeTab, setActiveTab] = useState<TabName>('ai-chat')
+
+  const toggle = useCallback(() => setIsOpen((v) => !v), [])
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+    const handleModD = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'D') {
+        e.preventDefault()
+        toggle()
+      }
+    }
+    document.addEventListener('keydown', handleEsc)
+    document.addEventListener('keydown', handleModD)
+    return () => {
+      document.removeEventListener('keydown', handleEsc)
+      document.removeEventListener('keydown', handleModD)
+    }
+  }, [toggle])
+
+  const panel = activeTab === 'ai-chat' ? <AIChatPanel /> : <SessionPanel />
+
+  return (
+    <>
+      <button
+        onClick={toggle}
+        className="fixed left-4 bottom-4 z-[10000] rounded-full bg-blue-600 px-3 py-1.5 text-xs text-white shadow-lg hover:bg-blue-700"
+      >
+        AllBlue Dev
+      </button>
+      {isOpen && (
+        <div className="fixed right-4 top-4 z-[10000] h-96 w-11/12 max-w-md overflow-hidden rounded-lg border bg-background shadow-2xl">
+          <div className="flex items-center justify-between border-b px-3 py-2">
+            <div className="flex gap-1">
+              {TABS.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`rounded px-2 py-1 text-xs font-medium ${
+                    activeTab === tab.id
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <span className="text-sm">×</span>
+            </button>
+          </div>
+          <div className="h-[calc(100%-44px)] overflow-auto">
+            {panel}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/src/components/devtools/index.ts

@@ -0,0 +1,20 @@
+// 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/>.
+
+export { AIChatPanel } from './ai-chat-panel'
+export { DevtoolsPanel } from './devtools-panel'
+export { SessionPanel } from './session-panel'

package/src/components/devtools/session-panel.tsx

@@ -0,0 +1,102 @@
+// 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 { useEffect, useState } from 'react'
+
+type UserInfo = {
+  id: string
+  email: string
+  name: string | null
+  role: string
+  aiProvider?: string | null
+  aiModel?: string | null
+  hasAiKey?: boolean | null
+}
+
+export function SessionPanel() {
+  const [user, setUser] = useState<UserInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/auth/session', { credentials: 'include' })
+      .then((res) => res.ok ? res.json() : null)
+      .then((data) => {
+        setUser(data?.user ?? null)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <span className="text-sm text-muted-foreground">加载中…</span>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <span className="text-sm text-muted-foreground">未登录</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col gap-4 overflow-auto p-3">
+      <div className="space-y-2">
+        <h4 className="text-sm font-semibold">当前用户</h4>
+        <div className="grid grid-cols-2 gap-2 text-xs">
+          <div>
+            <span className="text-muted-foreground">ID: </span>
+            <code>{user.id}</code>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Email: </span>
+            <span>{user.email}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Name: </span>
+            <span>{user.name || '-'}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Role: </span>
+            <span className="font-medium">{user.role}</span>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <h4 className="text-sm font-semibold">AI 配置</h4>
+        <div className="grid grid-cols-2 gap-2 text-xs">
+          <div>
+            <span className="text-muted-foreground">Provider: </span>
+            <span>{user.aiProvider || '未配置'}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Model: </span>
+            <span>{user.aiModel || '未配置'}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Has Key: </span>
+            <span>{user.hasAiKey ? '是' : '否'}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/lib/changelog/sdk-versions.ts

@@ -95,7 +95,7 @@ export const SDK_GROUPS: SdkGroup[] = [
     "items": [
       {
         "name": "@allbluecn/web-app",
-        "version": "v0.9.1",
+        "version": "v0.9.2",
         "lastUpdate": "Sep 3, 2026",
         "source": "apps/web/package.json",
         "docsUrl": "https://github.com/allbluecn/allblue"
@@ -141,13 +141,6 @@ export const SDK_GROUPS: SdkGroup[] = [
         "lastUpdate": "Sep 3, 2026",
         "source": "apps/web/package.json#dependencies",
         "docsUrl": "https://ui.shadcn.com/"
-      },
-      {
-        "name": "TipTap",
-        "version": "v3.27.4",
-        "lastUpdate": "Sep 3, 2026",
-        "source": "packages/shared/package.json#devDependencies",
-        "docsUrl": "https://tiptap.dev/"
       }
     ]
   }

package/src/lib/perf.ts

@@ -15,5 +15,5 @@
 // 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/>.
 
-// 全站虚拟化/分页门槛常量统一自 @allbluecn/shared（web / admin / desktop 共享）
+// 全站虚拟化/分页门槛常量统一自 @allbluecn/kernel（web / admin / desktop 共享）
 export { VIRTUALIZE_THRESHOLD, LOAD_MORE_STEP, DND_STICKY_THRESHOLD } from "@allbluecn/kernel";

package/src/routes/__root.tsx

@@ -26,7 +26,7 @@ import globalsCss from '@/styles/globals.css?url'
 import type { RouterContext } from '@/lib/router-context'
 import { Providers } from '@/providers'
 import { Toaster } from '@/components/ui/sonner'
-import { DevtoolsPanel } from '@allblue/devtools'
+import { DevtoolsPanel } from '@/components/devtools'
 import { getSessionFn } from '@/server/serverFns/auth/session'
 import { getLocaleFn } from '@/server/serverFns/locale'
 import type { AppLocale } from '@/i18n/config'