0.4.0 convex及界面修改

wolai-frontend/src/components/breadcrumb.tsx

@@ -2,11 +2,14 @@
 
 import Link from "next/link";
 import { useParams, useSelectedLayoutSegments } from "next/navigation";
-import { ChevronRight, MoreHorizontal, Star } from "lucide-react";
+import { ChevronRight, MoreHorizontal, Sparkles, Star } from "lucide-react";
 import { useConvexAuth, useMutation, useQuery } from "convex/react";
 import type { DocumentRecord } from "@/lib/documents";
 import { findBreadcrumb } from "@/lib/documents";
+import { useBackendHealth } from "@/hooks/use-backend-health";
+import { cn } from "@/lib/utils";
 import { usePageLayoutStore } from "@/store/page-layout";
+import { useAiAgentUiStore } from "@/store/ai-agent-ui";
 import { api } from "@/lib/convex/api";
 
 interface BreadcrumbProps {
@@ -22,6 +25,9 @@ export function Breadcrumb({ documents }: BreadcrumbProps) {
   const path = findBreadcrumb(documents, activeId);
   const showInspector = usePageLayoutStore((state) => state.showInspector);
   const toggleInspector = usePageLayoutStore((state) => state.toggleInspector);
+  const backendStatus = useBackendHealth();
+  const documentAgentAvailable = useAiAgentUiStore((s) => s.documentAgentAvailable);
+  const toggleDocumentAgentOpen = useAiAgentUiStore((s) => s.toggleDocumentAgentOpen);
   const isStarred = useQuery(
     api.documentStars.isStarred,
     activeId && isAuthenticated ? { documentId: activeId } : "skip",
@@ -60,6 +66,35 @@ export function Breadcrumb({ documents }: BreadcrumbProps) {
         })}
       </nav>
       <div className="flex items-center gap-2 text-wolai-text-secondary">
+        <span
+          className={cn(
+            "h-2 w-2 rounded-full",
+            backendStatus === "ok" ? "bg-green-500" : "bg-red-500",
+          )}
+          title={`后端连接：${
+            backendStatus === "ok"
+              ? "正常"
+              : backendStatus === "disabled"
+                ? "未配置"
+                : backendStatus === "error"
+                  ? "异常"
+                  : "检测中"
+          }`}
+          aria-label="后端连接状态"
+        />
+        <button
+          type="button"
+          className={cn(
+            "hover:bg-wolai-bg-hover hover:text-wolai-text-primary rounded-full px-3 py-1 text-sm transition-colors",
+            !documentAgentAvailable && "cursor-not-allowed opacity-50",
+          )}
+          onClick={() => toggleDocumentAgentOpen()}
+          disabled={!documentAgentAvailable}
+          title={documentAgentAvailable ? "打开页面 AI" : "仅在页面编辑区可用"}
+        >
+          <Sparkles className="mr-1 inline h-4 w-4" />
+          AI
+        </button>
         <button
           type="button"
           className="hover:bg-wolai-bg-hover hover:text-wolai-text-primary rounded-full px-3 py-1 text-sm transition-colors"