@tablestore/tablestore-agent-cli 0.1.6 → 0.1.8

package/dist/dashboard-runtime/dashboard/src/components/documents/doc-upload-dialog.tsx

@@ -24,6 +24,7 @@ import {
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Checkbox } from "@/components/ui/checkbox";
 import { useUploadDocuments } from "@/hooks/use-upload-documents";
+import { cn } from "@/lib/utils";
 import type { MetadataField } from "@/types/knowledge-base";
 
 interface DocUploadDialogProps {
@@ -93,6 +94,107 @@ interface FolderFilterOptions {
   recursive: boolean;
 }
 
+/**
+ * Minimal subset of the FileSystemEntry API we rely on. Typescript ships
+ * loose types under DOM lib, but they don't reliably expose
+ * `createReader().readEntries(...)` — declare what we use.
+ */
+interface FsEntry {
+  isFile: boolean;
+  isDirectory: boolean;
+  name: string;
+  fullPath: string;
+}
+interface FsFileEntry extends FsEntry {
+  isFile: true;
+  file(success: (file: File) => void, error?: (e: Error) => void): void;
+}
+interface FsDirEntry extends FsEntry {
+  isDirectory: true;
+  createReader(): {
+    readEntries(success: (entries: FsEntry[]) => void, error?: (e: Error) => void): void;
+  };
+}
+
+/** Tag a File with a relative path so the rest of the pipeline (filter, list,
+ *  display) can treat drag-dropped folder uploads identically to picker-based
+ *  ones. `webkitRelativePath` is normally a read-only inherited getter, but
+ *  defining a same-named own data property shadows it cleanly across browsers.
+ */
+function tagRelativePath(file: File, path: string): File {
+  try {
+    Object.defineProperty(file, "webkitRelativePath", {
+      value: path,
+      configurable: true,
+      writable: false,
+    });
+  } catch {
+    // Some engines may freeze the prototype shape; fall back to a parallel
+    // own property so filterFolderFiles' fallback (`|| file.name`) at least
+    // surfaces a reasonable label.
+  }
+  return file;
+}
+
+/** Recursively walk a FileSystemEntry tree and resolve a flat File[] with
+ *  webkitRelativePath populated to the root-relative path. */
+async function walkEntry(entry: FsEntry, parentPath = ""): Promise<File[]> {
+  if (entry.isFile) {
+    const fileEntry = entry as FsFileEntry;
+    return new Promise<File[]>((resolve) => {
+      fileEntry.file(
+        (file) => {
+          const relPath = parentPath ? `${parentPath}/${file.name}` : file.name;
+          resolve([tagRelativePath(file, relPath)]);
+        },
+        () => resolve([]),
+      );
+    });
+  }
+  if (entry.isDirectory) {
+    const dirEntry = entry as FsDirEntry;
+    const reader = dirEntry.createReader();
+    // readEntries returns at most ~100 entries per call; loop until empty.
+    const collected: FsEntry[] = [];
+    await new Promise<void>((resolve) => {
+      const readBatch = () => {
+        reader.readEntries(
+          (batch) => {
+            if (batch.length === 0) {
+              resolve();
+              return;
+            }
+            collected.push(...batch);
+            readBatch();
+          },
+          () => resolve(),
+        );
+      };
+      readBatch();
+    });
+    const here = parentPath ? `${parentPath}/${entry.name}` : entry.name;
+    const nested = await Promise.all(collected.map((child) => walkEntry(child, here)));
+    return nested.flat();
+  }
+  return [];
+}
+
+/** Pull entries off a DataTransferItemList. Items without `webkitGetAsEntry`
+ *  (older browsers) silently fall back to whatever the dataTransfer.files
+ *  list resolved to. */
+function extractEntries(items: DataTransferItemList): FsEntry[] {
+  const out: FsEntry[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.kind !== "file") continue;
+    const entry = (item as DataTransferItem & {
+      webkitGetAsEntry?: () => FsEntry | null;
+    }).webkitGetAsEntry?.();
+    if (entry) out.push(entry);
+  }
+  return out;
+}
+
 /** Apply include / exclude / recursive filters to a batch of picked files. */
 function filterFolderFiles(list: File[], opts: FolderFilterOptions): File[] {
   const { include, exclude, recursive } = opts;
@@ -136,6 +238,7 @@ export function DocUploadDialog({
   const [excludeInput, setExcludeInput] = useState("");
   const [recursive, setRecursive] = useState(true);
   const folderInputRef = useRef<HTMLInputElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const hasSchemaFields = metadataFields && metadataFields.length > 0;
   const uploadDocuments = useUploadDocuments();
@@ -157,6 +260,8 @@ export function DocUploadDialog({
 
   const handleDragOver = useCallback((event: React.DragEvent) => {
     event.preventDefault();
+    // `move` cursor confuses folder drops; `copy` reads as "I'll add this".
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
     setIsDragOver(true);
   }, []);
 
@@ -164,11 +269,137 @@ export function DocUploadDialog({
     setIsDragOver(false);
   }, []);
 
-  const handleDrop = useCallback((event: React.DragEvent) => {
+  /** Walk a list of FileSystemDirectoryEntry trees and store the resulting
+   *  File[] in folderRaw. Shared between drag-drop and the toast action.
+   *  Declared before handleDropFileMode so its callback identity is stable
+   *  for that hook's dependency array. */
+  const importDirEntries = useCallback(async (dirs: FsEntry[]) => {
+    const all = await Promise.all(dirs.map((d) => walkEntry(d)));
+    const flat = all.flat();
+    if (flat.length > 0) {
+      setFolderRaw((prev) => [...prev, ...flat]);
+    }
+  }, []);
+
+  /**
+   * File-mode drop. Tolerates the user dragging folders by (a) silently
+   * extracting all leaf files from any dropped folder via webkitGetAsEntry
+   * and (b) hinting via toast that 「按文件夹」 mode supports filtering. The
+   * old behaviour of forwarding raw `dataTransfer.files` would have surfaced
+   * a 0-byte directory entry to the API and failed the upload.
+   */
+  const handleDropFileMode = useCallback(async (event: React.DragEvent) => {
     event.preventDefault();
     setIsDragOver(false);
-    const droppedFiles = Array.from(event.dataTransfer.files);
-    setFiles((prev) => [...prev, ...droppedFiles]);
+
+    const entries = extractEntries(event.dataTransfer.items);
+    if (entries.length === 0) {
+      // Browser without webkitGetAsEntry — fall back to the file list. Any
+      // raw "directory" entry will show up as a zero-byte File with empty
+      // type, which we filter out below as a defensive measure.
+      const fallback = Array.from(event.dataTransfer.files).filter(
+        (f) => f.size > 0 || f.type !== "",
+      );
+      if (fallback.length > 0) {
+        setFiles((prev) => [...prev, ...fallback]);
+      }
+      return;
+    }
+
+    const fileEntries = entries.filter((e) => e.isFile);
+    const dirEntries = entries.filter((e) => e.isDirectory);
+
+    // Resolve File objects from the file entries directly (no recursion in
+    // file mode — the user explicitly chose 「按文件」).
+    const directFiles = (
+      await Promise.all(
+        fileEntries.map(
+          (e) =>
+            new Promise<File | null>((resolve) => {
+              (e as FsFileEntry).file(
+                (file) => resolve(file),
+                () => resolve(null),
+              );
+            }),
+        ),
+      )
+    ).filter((f): f is File => f !== null);
+
+    if (directFiles.length > 0) {
+      setFiles((prev) => [...prev, ...directFiles]);
+    }
+
+    if (dirEntries.length > 0) {
+      const folderNames = dirEntries.map((d) => d.name).join("、");
+      toast.info(
+        directFiles.length > 0
+          ? `已忽略 ${dirEntries.length} 个文件夹（${folderNames}）`
+          : `检测到文件夹（${folderNames}），已自动切换到「按文件夹」模式`,
+        {
+          description: "可在「按文件夹」模式按后缀筛选并递归上传",
+          action: {
+            label: "切换至按文件夹",
+            onClick: () => {
+              setMode("folder");
+              // Auto-import the dropped folders so the user doesn't repeat
+              // the gesture.
+              void importDirEntries(dirEntries);
+            },
+          },
+        },
+      );
+
+      // Auto-switch and import when the user dropped only folders. They
+      // clearly intended a folder upload — don't make them click the toast.
+      if (directFiles.length === 0) {
+        setMode("folder");
+        await importDirEntries(dirEntries);
+      }
+    }
+  }, [importDirEntries]);
+
+  /**
+   * Folder-mode drop. Walks any dropped FileSystemDirectoryEntry tree to
+   * produce a flat File[] with webkitRelativePath populated, so the existing
+   * include/exclude/recursive filter pipeline works identically to a folder
+   * picked through `<input webkitdirectory>`.
+   */
+  const handleDropFolderMode = useCallback(async (event: React.DragEvent) => {
+    event.preventDefault();
+    setIsDragOver(false);
+
+    const entries = extractEntries(event.dataTransfer.items);
+    if (entries.length === 0) {
+      toast.error("当前浏览器不支持文件夹拖拽，请使用「选择文件夹」按钮");
+      return;
+    }
+
+    const dirs = entries.filter((e) => e.isDirectory);
+    const looseFiles = entries.filter((e) => e.isFile);
+
+    if (dirs.length === 0 && looseFiles.length > 0) {
+      toast.info("拖拽内容均为文件，已合并到当前列表（不会经过过滤）");
+    }
+
+    const dirFiles = (await Promise.all(dirs.map((d) => walkEntry(d)))).flat();
+    const looseFileObjs = (
+      await Promise.all(
+        looseFiles.map(
+          (e) =>
+            new Promise<File | null>((resolve) => {
+              (e as FsFileEntry).file(
+                (file) => resolve(tagRelativePath(file, file.name)),
+                () => resolve(null),
+              );
+            }),
+        ),
+      )
+    ).filter((f): f is File => f !== null);
+
+    const merged = [...dirFiles, ...looseFileObjs];
+    if (merged.length > 0) {
+      setFolderRaw((prev) => [...prev, ...merged]);
+    }
   }, []);
 
   const handleFileSelect = useCallback(
@@ -311,75 +542,114 @@ export function DocUploadDialog({
         <DialogHeader>
           <DialogTitle>上传文档</DialogTitle>
           <DialogDescription>
-            将文档上传到知识库 {knowledgeBaseName}
+            将文档上传到知识库 <span className="font-medium text-foreground">{knowledgeBaseName}</span>
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 min-w-0">
           <Tabs value={mode} onValueChange={handleModeChange}>
             <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="file">文件</TabsTrigger>
-              <TabsTrigger value="folder">文件夹</TabsTrigger>
+              <TabsTrigger value="file" className="gap-2">
+                <FileText className="h-3.5 w-3.5" />
+                按文件
+              </TabsTrigger>
+              <TabsTrigger value="folder" className="gap-2">
+                <FolderOpen className="h-3.5 w-3.5" />
+                按文件夹
+              </TabsTrigger>
             </TabsList>
 
             {/* ---- File mode ---- */}
             <TabsContent value="file" className="space-y-3">
               <div
-                className={`relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 transition-colors ${
+                className={cn(
+                  "relative flex h-36 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors",
                   isDragOver
                     ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]/5"
-                    : "border-[hsl(var(--border))] hover:border-[hsl(var(--primary))]/50"
-                }`}
+                    : "border-[hsl(var(--border))] bg-[hsl(var(--secondary))]/40 hover:border-[hsl(var(--primary))]/50 hover:bg-[hsl(var(--primary))]/[0.03]",
+                )}
                 onDragOver={handleDragOver}
                 onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
+                onDrop={handleDropFileMode}
               >
-                <Upload className="mb-2 h-8 w-8 text-[hsl(var(--muted-foreground))]" />
+                <Upload className="h-7 w-7 text-[hsl(var(--muted-foreground))]" />
                 <p className="text-sm text-[hsl(var(--muted-foreground))]">
-                  拖拽文件到此处，或{" "}
-                  <label className="cursor-pointer text-[hsl(var(--primary))] hover:underline">
-                    点击选择
-                    <input
-                      type="file"
-                      multiple
-                      className="hidden"
-                      onChange={handleFileSelect}
-                    />
-                  </label>
+                  拖拽文件到此处
                 </p>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  选择文件
+                </Button>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple
+                  className="hidden"
+                  onChange={handleFileSelect}
+                />
               </div>
 
               {files.length > 0 && (
-                <div className="space-y-2 max-h-32 overflow-y-auto">
-                  {files.map((file, index) => (
-                    <div
-                      key={`${file.name}-${index}`}
-                      className="flex items-center justify-between rounded-md border px-3 py-2 text-sm"
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs text-[hsl(var(--muted-foreground))]">
+                    <span>
+                      已选择{" "}
+                      <span className="font-medium text-foreground">{files.length}</span>{" "}
+                      个文件
+                    </span>
+                    <button
+                      type="button"
+                      className="hover:text-foreground transition-colors"
+                      onClick={() => setFiles([])}
                     >
-                      <div className="flex items-center gap-2 min-w-0">
-                        <FileText className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" />
-                        <span className="truncate">{file.name}</span>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-6 w-6 shrink-0"
-                        onClick={() => removeFile(index)}
+                      全部清除
+                    </button>
+                  </div>
+                  <div className="max-h-32 overflow-y-auto space-y-1.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--secondary))]/30 p-1.5">
+                    {files.map((file, index) => (
+                      <div
+                        key={`${file.name}-${index}`}
+                        className="flex items-center justify-between rounded-md bg-[hsl(var(--background))] px-2.5 py-1.5 text-sm shadow-sm"
                       >
-                        <X className="h-3 w-3" />
-                      </Button>
-                    </div>
-                  ))}
+                        <div className="flex items-center gap-2 min-w-0">
+                          <FileText className="h-3.5 w-3.5 shrink-0 text-[hsl(var(--muted-foreground))]" />
+                          <span className="truncate">{file.name}</span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 shrink-0"
+                          onClick={() => removeFile(index)}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
                 </div>
               )}
             </TabsContent>
 
             {/* ---- Folder mode ---- */}
             <TabsContent value="folder" className="space-y-3">
-              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-[hsl(var(--border))] p-6">
-                <FolderOpen className="mb-2 h-8 w-8 text-[hsl(var(--muted-foreground))]" />
-                <p className="text-sm text-[hsl(var(--muted-foreground))] mb-3">
-                  选择一个文件夹，自动读取其中的文件
+              <div
+                className={cn(
+                  "relative flex h-36 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed transition-colors",
+                  isDragOver
+                    ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]/5"
+                    : "border-[hsl(var(--border))] bg-[hsl(var(--secondary))]/40 hover:border-[hsl(var(--primary))]/50 hover:bg-[hsl(var(--primary))]/[0.03]",
+                )}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDropFolderMode}
+              >
+                <FolderOpen className="h-7 w-7 text-[hsl(var(--muted-foreground))]" />
+                <p className="text-sm text-[hsl(var(--muted-foreground))]">
+                  拖拽文件夹到此处，或选择
                 </p>
                 <Button
                   type="button"
@@ -404,59 +674,68 @@ export function DocUploadDialog({
                 />
               </div>
 
-              <div className="grid grid-cols-2 gap-3">
-                <div className="space-y-1">
-                  <Label className="text-xs">包含后缀（可选）</Label>
-                  <Input
-                    placeholder=".md, .pdf, .txt"
-                    value={includeInput}
-                    onChange={(e) => setIncludeInput(e.target.value)}
-                  />
+              <div className="rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--secondary))]/30 p-3 space-y-3">
+                <div className="text-xs font-medium text-foreground">过滤选项</div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="space-y-1">
+                    <Label className="text-xs text-muted-foreground">包含后缀</Label>
+                    <Input
+                      placeholder=".md, .pdf, .txt"
+                      value={includeInput}
+                      onChange={(e) => setIncludeInput(e.target.value)}
+                      className="h-8 bg-background"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-xs text-muted-foreground">排除后缀</Label>
+                    <Input
+                      placeholder=".log, .tmp"
+                      value={excludeInput}
+                      onChange={(e) => setExcludeInput(e.target.value)}
+                      className="h-8 bg-background"
+                    />
+                  </div>
                 </div>
-                <div className="space-y-1">
-                  <Label className="text-xs">排除后缀（可选）</Label>
-                  <Input
-                    placeholder=".log, .tmp"
-                    value={excludeInput}
-                    onChange={(e) => setExcludeInput(e.target.value)}
+                <label className="flex cursor-pointer items-center gap-2 text-sm text-foreground">
+                  <Checkbox
+                    checked={recursive}
+                    onCheckedChange={(v) => setRecursive(v === true)}
                   />
-                </div>
+                  递归包含子目录
+                </label>
               </div>
 
-              <label className="flex items-center gap-2 text-sm text-[hsl(var(--muted-foreground))]">
-                <Checkbox
-                  checked={recursive}
-                  onCheckedChange={(v) => setRecursive(v === true)}
-                />
-                递归包含子目录
-              </label>
-
               {folderRaw.length > 0 && (
-                <div className="text-xs text-[hsl(var(--muted-foreground))]">
-                  已选择 {folderRaw.length} 个文件，过滤后将上传{" "}
-                  <span className="font-medium text-[hsl(var(--foreground))]">
-                    {folderFiltered.length}
-                  </span>{" "}
-                  个
-                </div>
-              )}
-
-              {folderFiltered.length > 0 && (
-                <div className="space-y-1 max-h-32 overflow-y-auto overflow-x-hidden rounded-md border p-2 min-w-0">
-                  {folderFiltered.slice(0, 50).map((file, index) => (
-                    <div
-                      key={`${file.webkitRelativePath || file.name}-${index}`}
-                      className="flex items-center gap-2 text-xs min-w-0"
-                    >
-                      <FileText className="h-3 w-3 shrink-0 text-[hsl(var(--muted-foreground))]" />
-                      <span className="truncate">
-                        {file.webkitRelativePath || file.name}
-                      </span>
-                    </div>
-                  ))}
-                  {folderFiltered.length > 50 && (
-                    <div className="text-xs text-[hsl(var(--muted-foreground))] pt-1">
-                      ... 还有 {folderFiltered.length - 50} 个文件未展示
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs text-[hsl(var(--muted-foreground))]">
+                    <span>
+                      已选择{" "}
+                      <span className="font-medium text-foreground">{folderRaw.length}</span>{" "}
+                      个文件，过滤后将上传{" "}
+                      <span className="font-medium text-[hsl(var(--primary))]">
+                        {folderFiltered.length}
+                      </span>{" "}
+                      个
+                    </span>
+                  </div>
+                  {folderFiltered.length > 0 && (
+                    <div className="max-h-32 overflow-y-auto overflow-x-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--secondary))]/30 p-1.5 min-w-0 space-y-1">
+                      {folderFiltered.slice(0, 50).map((file, index) => (
+                        <div
+                          key={`${file.webkitRelativePath || file.name}-${index}`}
+                          className="flex items-center gap-2 rounded-md bg-[hsl(var(--background))] px-2.5 py-1 text-xs shadow-sm min-w-0"
+                        >
+                          <FileText className="h-3 w-3 shrink-0 text-[hsl(var(--muted-foreground))]" />
+                          <span className="truncate">
+                            {file.webkitRelativePath || file.name}
+                          </span>
+                        </div>
+                      ))}
+                      {folderFiltered.length > 50 && (
+                        <div className="text-xs text-[hsl(var(--muted-foreground))] pt-1 px-2">
+                          ... 还有 {folderFiltered.length - 50} 个文件未展示
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>

package/dist/dashboard-runtime/dashboard/src/components/knowledge-base/kb-card.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { MoreHorizontal, Trash2, FileText, Search, Settings } from "lucide-react";
+import { BookOpenText, MoreHorizontal, Trash2, FileText, Search, Settings } from "lucide-react";
 // Note: router is still used for dropdown menu navigation items
 import { CardContent, CardInteractive } from "@/components/ui/card";
 import {
@@ -44,10 +44,13 @@ export function KBCard({ knowledgeBase, onDelete }: KBCardProps) {
       className="group relative flex h-full cursor-pointer flex-col"
     >
       <CardContent className="flex flex-col flex-1 p-5">
-        <div className="flex items-start justify-between">
-          <h3 className="text-base font-semibold text-foreground">
-            {knowledgeBaseName}
-          </h3>
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            <BookOpenText className="h-4 w-4 shrink-0 text-primary" />
+            <h3 className="truncate text-base font-semibold text-foreground">
+              {knowledgeBaseName}
+            </h3>
+          </div>
 
           <div
             className="opacity-0 transition-opacity duration-150 delay-75 group-hover:opacity-100 focus-within:opacity-100"

package/dist/dashboard-runtime/dashboard/src/components/knowledge-base/kb-header.tsx

@@ -2,7 +2,7 @@
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
+import { BookOpenText, Trash2 } from "lucide-react";
 import { RelativeTime } from "@/components/shared/relative-time";
 import { SubspaceSwitcher } from "@/components/knowledge-base/subspace-switcher";
 import type { KnowledgeBase } from "@/types/knowledge-base";
@@ -24,13 +24,21 @@ export function KBHeader({ knowledgeBase, onDelete }: KBHeaderProps) {
 
   return (
     <div className="space-y-4">
-      <div className="flex items-start justify-between">
-        <div className="space-y-1">
-          <h1 className="font-display text-[32px] font-semibold leading-tight tracking-tight text-foreground">
-            {knowledgeBaseName}
-          </h1>
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0 space-y-2">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-[hsl(var(--primary)/0.1)] p-2 text-primary">
+              <BookOpenText className="h-5 w-5" />
+            </div>
+            <h1 className="truncate font-display text-[32px] font-semibold leading-tight tracking-tight text-foreground">
+              {knowledgeBaseName}
+            </h1>
+            <Badge variant="secondary" className="border-0 bg-[hsl(var(--primary-50))] text-primary">
+              Knowledge Base
+            </Badge>
+          </div>
           {description && (
-            <p className="text-sm text-muted-foreground max-w-2xl">
+            <p className="max-w-3xl text-sm text-muted-foreground">
               {description}
             </p>
           )}
@@ -61,14 +69,16 @@ export function KBHeader({ knowledgeBase, onDelete }: KBHeaderProps) {
         </div>
       )}
 
-      <div className="flex items-center gap-4 text-xs text-muted-foreground">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground">
         {subspace && (
-          <span className="inline-flex items-center gap-1">
-            <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
-            已开启子空间隔离
-          </span>
+          <>
+            <span className="inline-flex items-center gap-1.5">
+              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shadow-[0_0_0_3px_rgb(16,185,129,0.15)]" />
+              已开启子空间隔离
+            </span>
+            <SubspaceSwitcher />
+          </>
         )}
-        <SubspaceSwitcher />
         <span>
           创建于 <RelativeTime timestamp={createdAt} />
         </span>