@allbluecn/admin-app 0.2.5 → 0.3.0

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@allbluecn/admin-app",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",
   "dependencies": {
+    "@allbluecn/database": "0.9.0",
+    "@allbluecn/kernel": "0.9.0",
+    "@allbluecn/web-app": "0.17.0",
     "@auth/core": "^0.41.2",
-    "@lobehub/icons": "^5.16.0",
+    "@base-ui/react": "^1.8.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@lobehub/icons": "^5.19.3",
     "@prisma/client": "^7.8.0",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -19,6 +24,7 @@
     "@tabler/icons-react": "^3.44.0",
     "@tanstack/charts": "^0.16.0",
     "@tanstack/react-form": "2.0.0-alpha.2",
+    "@tanstack/react-pacer": "^0.23.0",
     "@tanstack/react-query": "^5.102.8",
     "@tanstack/react-router": "1.170.32",
     "@tanstack/react-router-ssr-query": "^1.167.2",
@@ -29,29 +35,27 @@
     "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cn": "^0.3.0",
     "date-fns": "^4.4.0",
-    "lucide-react": "^1.43.0",
-    "motion": "^12.42.2",
+    "lucide-react": "^1.47.0",
+    "motion": "^13.4.0",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "sonner": "^2.0.7",
     "start-authjs": "^1.0.2",
     "tailwind-merge": "^3.5.0",
-    "zod": "^4.4.3",
-    "@allbluecn/database": "0.8.0",
-    "@allbluecn/web-app": "0.11.1",
-    "@allbluecn/kernel": "0.8.0"
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.40.1",
     "@eslint/js": "^9.39.4",
     "@inlang/paraglide-js": "^2.25.0",
     "@inlang/plugin-message-format": "^4.4.4",
-    "@tailwindcss/vite": "^4.3.2",
+    "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query-devtools": "5.102.8",
     "@tanstack/react-router-devtools": "1.167.1",
     "@testing-library/jest-dom": "7.0.1",
@@ -65,10 +69,10 @@
     "eslint": "^9",
     "jsdom": "^29.1.1",
     "nitro": "3.0.260903-beta",
-    "shadcn": "^4.15.0",
-    "tailwindcss": "^4",
+    "shadcn": "^4.21.0",
+    "tailwindcss": "^4.3.3",
     "typescript": "^7",
-    "vite": "^8.1.5",
+    "vite": "^8.3.0",
     "vitest": "5.0.0",
     "wrangler": "^4.99.0"
   },

package/src/components/admin/admin-user-menu.tsx

@@ -83,11 +83,9 @@ export function AdminUserMenu() {
           </div>
         </SidebarMenuButton>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <SidebarMenuAction onClick={handleExitAdmin} className="hover:text-red-500 h-7 w-8 flex items-center justify-center">
+          <TooltipTrigger render={<SidebarMenuAction onClick={handleExitAdmin} className="hover:text-red-500 h-7 w-8 flex items-center justify-center" />}>
               <LogOut className="h-4 w-4" />
-            </SidebarMenuAction>
-          </TooltipTrigger>
+            </TooltipTrigger>
           <TooltipContent>{m.common_login_exitAdmin()}</TooltipContent>
         </Tooltip>
       </SidebarMenuItem>

package/src/components/admin/developer-log.tsx

@@ -4,7 +4,7 @@ import { Route } from '@/routes/_nav/developer-logs/route'
 import type { DeveloperLogEntry } from '@allbluecn/kernel'
 import { useQueryClient } from '@tanstack/react-query'
 import { useServerFn } from '@tanstack/react-start'
-import { toast } from 'sonner'
+import { toast } from '@/components/ui/toast'
 import {
   Plus,
   Pencil,
@@ -316,11 +316,9 @@ function DeveloperLogPage() {
                         <Pencil className="size-3.5" />
                       </Button>
                       <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <Button variant="ghost" size="icon" className="size-7 text-destructive">
+                        <AlertDialogTrigger render={<Button variant="ghost" size="icon" className="size-7 text-destructive" />}>
                             <Trash2 className="size-3.5" />
-                          </Button>
-                        </AlertDialogTrigger>
+                          </AlertDialogTrigger>
                         <AlertDialogContent>
                           <AlertDialogHeader>
                             <AlertDialogTitle>{m.common_button_delete()}</AlertDialogTitle>

package/src/components/ai-memory/memory-facts-panel.tsx

@@ -0,0 +1,383 @@
+// 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/>.
+
+// apps/admin/src/components/ai-memory/memory-facts-panel.tsx
+import { useMemo, useState } from "react"
+import {
+  Eraser,
+  Loader2,
+  RotateCw,
+  Search,
+  TriangleAlert,
+  Trash2,
+} from "lucide-react"
+
+import { m } from "@/paraglide/messages.js"
+import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
+import { toast } from "@/components/ui/toast"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
+import { listMemoryFactsFn } from "@/server/serverFns/ai-memory/list"
+import { deleteMemoryFactFn } from "@/server/serverFns/ai-memory/delete"
+import { clearMemoryFactsFn } from "@/server/serverFns/ai-memory/clear"
+
+export interface MemoryFactRow {
+  id: string
+  content: string
+  threadId: string
+  createdAt: string
+}
+
+export interface MemoryUserOption {
+  id: string
+  username: string
+  email: string
+  createdAt: string
+}
+
+function MemoryFactsTable({
+  data,
+  deletingId,
+  onDelete,
+}: {
+  data: MemoryFactRow[]
+  deletingId: string | null
+  onDelete: (row: MemoryFactRow) => void
+}) {
+  const columns = useMemo<Array<AdminColumnDef<MemoryFactRow>>>(
+    () => [
+      {
+        accessorKey: "content",
+        header: m["admin-ai-memory_columns_content"](),
+        cell: ({ row }: any) => {
+          const fact = row.original as MemoryFactRow
+          return (
+            <div className="flex min-w-0 flex-col gap-1">
+              <Badge
+                variant="outline"
+                className="self-start font-mono text-xs"
+              >
+                {fact.id}
+              </Badge>
+              <div className="whitespace-pre-wrap break-words text-sm">
+                {fact.content}
+              </div>
+            </div>
+          )
+        },
+      },
+      {
+        accessorKey: "threadId",
+        header: m["admin-ai-memory_columns_threadId"](),
+        meta: { style: { width: "12rem" } },
+        cell: ({ row }: any) => (
+          <span className="break-all font-mono text-xs">
+            {row.original.threadId}
+          </span>
+        ),
+      },
+      {
+        accessorKey: "createdAt",
+        header: m["admin-ai-memory_columns_createdAt"](),
+        meta: { style: { width: "9rem" } },
+        cell: ({ row }: any) => (
+          <span className="whitespace-nowrap text-muted-foreground">
+            {formatTimestamp(row.original.createdAt)}
+          </span>
+        ),
+      },
+      {
+        id: "actions",
+        header: m["admin-ai-memory_columns_actions"](),
+        meta: { style: { width: "4rem" } },
+        cell: ({ row }: any) => {
+          const fact = row.original as MemoryFactRow
+          return (
+            <Button
+              size="sm"
+              variant="ghost"
+              className="shrink-0"
+              disabled={deletingId !== null}
+              onClick={() => onDelete(fact)}
+            >
+              {deletingId === fact.id ? (
+                <Loader2 className="animate-spin" />
+              ) : (
+                <Trash2 />
+              )}
+            </Button>
+          )
+        },
+      },
+    ],
+    [deletingId],
+  )
+
+  return <DataTable columns={columns} data={data} />
+}
+
+export function MemoryFactsPanel({
+  users,
+}: {
+  users: Array<MemoryUserOption>
+}) {
+  const [userId, setUserId] = useState<string | undefined>(undefined)
+  const [facts, setFacts] = useState<MemoryFactRow[]>([])
+  const [count, setCount] = useState(0)
+  const [lastWriteAt, setLastWriteAt] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+  const [pendingDelete, setPendingDelete] = useState<MemoryFactRow | null>(
+    null,
+  )
+  const [confirmingClear, setConfirmingClear] = useState(false)
+
+  const selectedUser = users.find((user) => user.id === userId)
+
+  async function handleQuery() {
+    if (!userId) {
+      setError(m["admin-ai-memory_error_noUserId"]())
+      return
+    }
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await listMemoryFactsFn({ data: { userId } })
+      setFacts(result.facts)
+      setCount(result.count)
+      setLastWriteAt(result.lastWriteAt)
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : m["admin-ai-memory_error_query"](),
+      )
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleDelete(row: MemoryFactRow, onClose: () => void) {
+    if (!userId) return
+    setDeletingId(row.id)
+    try {
+      await deleteMemoryFactFn({ data: { id: row.id } })
+      toast.success(m["admin-ai-memory_toast_deleted"]())
+      const next = facts.filter((item) => item.id !== row.id)
+      setFacts(next)
+      setCount(Math.max(0, count - 1))
+      onClose()
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : m["admin-ai-memory_error_query"](),
+      )
+    } finally {
+      setDeletingId(null)
+    }
+  }
+
+  async function handleClear() {
+    if (!userId) return
+    setLoading(true)
+    try {
+      const result = await clearMemoryFactsFn({ data: { userId } })
+      toast.success(m["admin-ai-memory_toast_cleared"]({ count: result.deleted }))
+      setFacts([])
+      setCount(0)
+      setLastWriteAt(null)
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : m["admin-ai-memory_error_query"](),
+      )
+    } finally {
+      setLoading(false)
+      setConfirmingClear(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-end">
+        <div className="flex flex-1 flex-col gap-1">
+          <span className="text-sm text-muted-foreground">
+            {m["admin-ai-memory_form_user"]()}
+          </span>
+          <Select
+            value={userId}
+            onValueChange={(v) => setUserId(v ?? "")}
+            disabled={loading}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder={m["admin-ai-memory_placeholder_user"]()} />
+            </SelectTrigger>
+            <SelectContent>
+              {users.map((user) => (
+                <SelectItem key={user.id} value={user.id}>
+                  {`${user.username} · ${user.id}`}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button onClick={() => void handleQuery()} disabled={loading || !userId}>
+          {loading ? (
+            <Loader2 className="animate-spin" />
+          ) : (
+            <Search />
+          )}
+          {m["admin-ai-memory_action_query"]()}
+        </Button>
+      </div>
+
+      {selectedUser ? (
+        <Card>
+          <CardContent className="flex flex-wrap items-center gap-x-5 gap-y-1 pt-4 text-sm">
+            <span className="text-muted-foreground">
+              {m["admin-ai-memory_stat_count"]()}
+              <span className="ml-1.5 font-medium text-foreground">
+                {count}
+              </span>
+            </span>
+            <span className="text-muted-foreground">
+              {m["admin-ai-memory_stat_lastWrite"]()}
+              <span className="ml-1.5 text-foreground">
+                {lastWriteAt ? formatTimestamp(lastWriteAt) : "—"}
+              </span>
+            </span>
+            <div className="ml-auto">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={loading || count === 0}
+                onClick={() => setConfirmingClear(true)}
+              >
+                <Eraser />
+                {m["admin-ai-memory_action_clearUser"]()}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {error ? (
+        <Alert variant="destructive">
+          <TriangleAlert />
+          <AlertTitle>{m["admin-ai-memory_error_title"]()}</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      <Card>
+        <CardContent className="pt-4">
+          {loading ? (
+            <div className="flex h-28 items-center justify-center text-muted-foreground">
+              <Loader2 className="animate-spin" />
+            </div>
+          ) : facts.length === 0 ? (
+            <div className="flex h-28 items-center justify-center text-sm text-muted-foreground">
+              {userId
+                ? m["admin-ai-memory_empty"]()
+                : m["admin-ai-memory_emptyHint"]()}
+            </div>
+          ) : (
+            <MemoryFactsTable
+              data={facts}
+              deletingId={deletingId}
+              onDelete={(row) => setPendingDelete(row)}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={pendingDelete !== null} onOpenChange={(open) => { if (!open) setPendingDelete(null) }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {m["admin-ai-memory_delete_confirm_title"]()}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {m["admin-ai-memory_delete_confirm_description"]()}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>
+              {m["admin-ai-memory_delete_cancel"]()}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={deletingId !== null}
+              onClick={(event) => {
+                if (!pendingDelete) return
+                event.preventDefault()
+                void handleDelete(pendingDelete, () => setPendingDelete(null))
+              }}
+            >
+              {m["admin-ai-memory_delete_confirm_action"]()}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog
+        open={confirmingClear}
+        onOpenChange={(open) => {
+          if (!open) setConfirmingClear(false)
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {m["admin-ai-memory_clear_confirm_title"]()}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {m["admin-ai-memory_clear_confirm_description"]()}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>
+              {m["admin-ai-memory_clear_cancel"]()}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={loading}
+              onClick={() => void handleClear()}
+            >
+              {m["admin-ai-memory_clear_confirm_action"]()}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/src/components/ai-prompts/preview-panel.tsx

@@ -0,0 +1,165 @@
+// 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/>.
+
+// apps/admin/src/components/ai-prompts/preview-panel.tsx
+import { useCallback, useEffect, useRef, useState } from "react"
+import { AlertTriangle, Loader2 } from "lucide-react"
+
+import { m } from "@/paraglide/messages.js"
+import { Input } from "@/components/ui/input"
+import {
+  PROMPT_PREVIEW_DEBOUNCE_MS,
+  useDebouncedCallback,
+} from "@/lib/pacer"
+import { previewPromptFn } from "@/server/serverFns/ai-prompts/preview"
+import {
+  extractUsedVariables,
+  type PreviewResult,
+  type PromptSectionDTO,
+  type PromptVariableDTO,
+} from "./prompt-utils"
+
+interface PreviewPanelProps {
+  key: string
+  sections: PromptSectionDTO[]
+  variables: PromptVariableDTO[]
+}
+
+export function PreviewPanel({
+  key,
+  sections,
+  variables,
+}: PreviewPanelProps) {
+  const declared = variables.map((v) => v.name).filter(Boolean)
+  const allVarNames = [
+    ...declared,
+    ...extractUsedVariables(sections).filter((n) => !declared.includes(n)),
+  ]
+  const varDescriptions = new Map(
+    variables
+      .filter((v) => v.name && v.description)
+      .map((v) => [v.name, v.description as string]),
+  )
+
+  const [vars, setVars] = useState<Record<string, string>>({})
+  const [result, setResult] = useState<PreviewResult | null>(null)
+  const [pending, setPending] = useState(false)
+
+  const mountedRef = useRef(true)
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  const latestRef = useRef({ sections, vars })
+  latestRef.current = { sections, vars }
+
+  const runPreview = useCallback((sections: PromptSectionDTO[], vars: Record<string, string>) => {
+    setPending(true)
+    previewPromptFn({ data: { key, sections, vars } })
+      .then((res) => {
+        if (mountedRef.current) setResult(res)
+      })
+      .catch(() => {
+        if (mountedRef.current) setResult(null)
+      })
+      .finally(() => {
+        if (mountedRef.current) setPending(false)
+      })
+  }, [key])
+
+  const debouncedPreview = useDebouncedCallback(() => {
+    const { sections, vars } = latestRef.current
+    runPreview(sections, vars)
+  }, { wait: PROMPT_PREVIEW_DEBOUNCE_MS })
+
+  useEffect(() => {
+    debouncedPreview()
+  }, [sections, vars, debouncedPreview])
+
+  return (
+    <div className="space-y-3">
+      {allVarNames.length > 0 && (
+        <div className="space-y-2">
+          {allVarNames.map((name) => (
+            <div key={name} className="space-y-1">
+              <div className="flex items-center gap-2">
+                <Input
+                  className="font-mono text-sm flex-1 h-7"
+                  value={vars[name] ?? ""}
+                  placeholder={m["admin-ai_prompts_preview_placeholder"]({ name })}
+                  onChange={(e) =>
+                    setVars((prev) => ({ ...prev, [name]: e.target.value }))
+                  }
+                />
+              </div>
+              {varDescriptions.get(name) && (
+                <p className="pl-1 text-xs text-muted-foreground">
+                  {varDescriptions.get(name)}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {pending && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Loader2 className="size-3.5 animate-spin" />
+          <span>{m["admin-ai_prompts_preview_generating"]()}</span>
+        </div>
+      )}
+
+      {!pending && result && !result.ok && (
+        <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-2.5 text-sm text-destructive">
+          <AlertTriangle className="size-4 shrink-0 mt-0.5" />
+          <span>{result.error}</span>
+        </div>
+      )}
+
+      {!pending && result?.ok && (
+        <div className="space-y-2">
+          {result.sections.length === 0 && (
+            <p className="text-sm text-muted-foreground">
+              {m["admin-ai_prompts_preview_empty"]()}
+            </p>
+          )}
+          {result.sections.map((section, index) => (
+            <div
+              key={section.id}
+              className="rounded-md border border-border p-3"
+            >
+              <div className="mb-2 flex items-center justify-between">
+                <span className="font-mono text-xs text-muted-foreground">
+                  {section.id}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {m["admin-ai_prompts_preview_section"]({ index: index + 1 })}
+                </span>
+              </div>
+              <pre className="font-mono text-sm whitespace-pre-wrap break-words">
+                {section.text || m["admin-ai_prompts_preview_noContent"]()}
+              </pre>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}