@tablestore/tablestore-agent-cli 0.1.9 → 0.2.0

package/dist/dashboard-runtime/dashboard/src/components/layout/page-header.tsx

@@ -1,23 +1,142 @@
+"use client";
+
 import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { ChevronRight } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const SEGMENT_LABELS: Record<string, string> = {
+  'knowledge-base': '知识库',
+  memory: '记忆库',
+  'llm-providers': '大模型',
+  projects: '项目管理',
+  documents: '文档',
+  retrieval: '检索测试',
+  qa: '问答测试',
+  search: '记忆检索',
+  units: '长期记忆',
+  messages: '短期记忆',
+  requests: '请求审计',
+  settings: '设置',
+  create: '新建',
+  new: '新建',
+  chat: '对话',
+};
+
+interface Crumb {
+  label: string;
+  href?: string;
+}
+
+function buildCrumbs(pathname: string): Crumb[] {
+  // Detail-page sub-routes are wrapped by a DetailSidebar that already
+  // surfaces entity context + a "返回列表" affordance. Suppress the
+  // automatic breadcrumb there so we don't repeat the hierarchy in two
+  // places (sidebar AND header).
+  if (
+    /^\/knowledge-base\/[^/]+(?:\/.*)?$/.test(pathname) ||
+    /^\/memory\/[^/]+(?:\/.*)?$/.test(pathname)
+  ) {
+    return [];
+  }
+
+  const parts = pathname.split('/').filter(Boolean);
+  if (parts.length === 0) return [];
+
+  const crumbs: Crumb[] = [];
+  let acc = '';
+  parts.forEach((raw, index) => {
+    acc += `/${raw}`;
+    const decoded = decodeURIComponent(raw);
+    const label = SEGMENT_LABELS[decoded] ?? decoded;
+    crumbs.push({
+      label,
+      href: index < parts.length - 1 ? acc : undefined,
+    });
+  });
+  return crumbs;
+}
 
 interface PageHeaderProps {
-  title: string;
-  description?: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Hide the auto-derived breadcrumb above the title. */
+  hideBreadcrumb?: boolean;
+  /** Action buttons rendered on the right side. */
   children?: ReactNode;
+  className?: string;
 }
 
-export function PageHeader({ title, description, children }: PageHeaderProps) {
+/**
+ * Page-level header with a webUI-flavoured layout: small breadcrumb on top,
+ * 20px h1 with optional description on the next line, optional action slot
+ * on the right. Replaces the old separate BreadcrumbBar — by deriving the
+ * crumbs from `usePathname()` we keep the same surface the dashboard had
+ * while merging it into the page-header position webUI uses.
+ */
+export function PageHeader({
+  title,
+  description,
+  hideBreadcrumb,
+  children,
+  className,
+}: PageHeaderProps) {
+  const pathname = usePathname() ?? '/';
+  const crumbs = hideBreadcrumb ? [] : buildCrumbs(pathname);
+
   return (
-    <div className="flex items-start justify-between gap-4">
-      <div className="space-y-1">
-        <h1 className="text-[32px] font-semibold leading-tight text-foreground">
-          {title}
-        </h1>
-        {description && (
-          <p className="text-sm text-muted-foreground">{description}</p>
+    <div className={cn('mb-5 flex flex-col gap-2', className)}>
+      {crumbs.length > 1 && (
+        <nav
+          aria-label="面包屑"
+          className="flex items-center gap-1 text-[13px] text-[hsl(var(--muted-foreground))]"
+        >
+          <Link
+            href="/"
+            className="transition-colors hover:text-[hsl(var(--foreground))]"
+          >
+            主页
+          </Link>
+          {crumbs.map((crumb, index) => (
+            <span
+              key={`${crumb.label}-${index}`}
+              className="flex items-center gap-1"
+            >
+              <ChevronRight className="h-3 w-3 opacity-60" />
+              {crumb.href ? (
+                <Link
+                  href={crumb.href}
+                  className="transition-colors hover:text-[hsl(var(--foreground))]"
+                >
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span className="font-medium text-[hsl(var(--foreground))]">
+                  {crumb.label}
+                </span>
+              )}
+            </span>
+          ))}
+        </nav>
+      )}
+
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-xl font-semibold leading-tight text-[hsl(var(--foreground))]">
+            {title}
+          </h1>
+          {description && (
+            <p className="text-[13px] text-[hsl(var(--muted-foreground))]">
+              {description}
+            </p>
+          )}
+        </div>
+        {children && (
+          <div className="flex shrink-0 items-center gap-2">{children}</div>
         )}
       </div>
-      {children && <div className="flex items-center gap-2">{children}</div>}
     </div>
   );
 }

package/dist/dashboard-runtime/dashboard/src/components/layout/sidebar-instance-card.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { Check, ChevronsUpDown, Plus, Settings2 } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ConnectInstanceDialog } from "@/components/instance/connect-instance-dialog";
+import { useInstances, useSwitchInstance } from "@/hooks/use-instances";
+import { cn } from "@/lib/utils";
+
+function resolveSwitchTarget(pathname: string | null): string | null {
+  if (!pathname) return null;
+  if (pathname.match(/^\/knowledge-base\/[^/]+(?:\/.*)?$/)) return "/knowledge-base";
+  if (pathname.match(/^\/memory\/[^/]+(?:\/.*)?$/)) return "/memory";
+  return null;
+}
+
+interface SidebarInstanceCardProps {
+  collapsed?: boolean;
+}
+
+/**
+ * Sidebar-embedded instance switcher: an inline card sitting just below the
+ * brand line. Reuses the existing `useInstances` / `useSwitchInstance` data
+ * layer so behaviour parity with the previous top-bar switcher is preserved.
+ */
+export function SidebarInstanceCard({ collapsed }: SidebarInstanceCardProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [connectOpen, setConnectOpen] = useState(false);
+  const { data, isLoading } = useInstances();
+  const switchMutation = useSwitchInstance();
+
+  const activeName = data?.activeInstance ?? null;
+  const instances = data?.instances ?? [];
+
+  async function handleSwitch(name: string) {
+    if (name === activeName || switchMutation.isPending) return;
+    try {
+      await switchMutation.mutateAsync(name);
+      const target = resolveSwitchTarget(pathname) ?? window.location.pathname;
+      window.location.assign(target);
+    } catch {
+      // toast handled in the hook
+    }
+  }
+
+  if (collapsed) {
+    return (
+      <div className="flex justify-center px-0 pt-3">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              aria-label={activeName ? `当前实例：${activeName}` : "选择项目"}
+              title={activeName ?? "选择项目"}
+              disabled={isLoading}
+              className={cn(
+                // Circular avatar to differentiate the instance switcher
+                // from the rectangular menu items below; subtle border +
+                // card surface keeps it readable on the white sidebar.
+                "flex h-8 w-8 items-center justify-center rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[11px] font-semibold uppercase text-[hsl(var(--foreground))] transition-colors",
+                "hover:border-[hsl(var(--primary))] hover:text-[hsl(var(--primary))]",
+                "disabled:opacity-50",
+              )}
+            >
+              {(activeName ?? "?").charAt(0)}
+            </button>
+          </DropdownMenuTrigger>
+          <InstanceMenu
+            activeName={activeName}
+            instances={instances}
+            onSelect={handleSwitch}
+            onCreate={() => setConnectOpen(true)}
+            onManage={() => router.push("/projects")}
+          />
+        </DropdownMenu>
+        <ConnectInstanceDialog
+          open={connectOpen}
+          onOpenChange={setConnectOpen}
+          onSuccess={() => router.refresh()}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-3 pt-3">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            disabled={isLoading}
+            className="group flex w-full items-center gap-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--secondary))] px-3 py-2 text-left transition-colors hover:bg-[hsl(var(--accent))]"
+          >
+            <div className="flex flex-1 flex-col overflow-hidden">
+              <span className="text-[11px] uppercase tracking-wider text-[hsl(var(--muted-foreground))]">
+                当前实例
+              </span>
+              <span className="truncate text-sm font-semibold text-[hsl(var(--foreground))]">
+                {activeName ?? "未选择"}
+              </span>
+            </div>
+            <ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-[hsl(var(--muted-foreground))]" />
+          </button>
+        </DropdownMenuTrigger>
+        <InstanceMenu
+          activeName={activeName}
+          instances={instances}
+          onSelect={handleSwitch}
+          onCreate={() => setConnectOpen(true)}
+          onManage={() => router.push("/projects")}
+        />
+      </DropdownMenu>
+      <ConnectInstanceDialog
+        open={connectOpen}
+        onOpenChange={setConnectOpen}
+        onSuccess={() => router.refresh()}
+      />
+    </div>
+  );
+}
+
+interface InstanceMenuProps {
+  activeName: string | null;
+  instances: Array<{ name: string; region?: string }>;
+  onSelect: (name: string) => void;
+  onCreate: () => void;
+  onManage: () => void;
+}
+
+function InstanceMenu({
+  activeName,
+  instances,
+  onSelect,
+  onCreate,
+  onManage,
+}: InstanceMenuProps) {
+  return (
+    <DropdownMenuContent align="start" className="min-w-[220px]">
+      <DropdownMenuLabel>切换项目</DropdownMenuLabel>
+      {instances.length === 0 ? (
+        <div className="px-3 py-2 text-xs text-[hsl(var(--muted-foreground))]">
+          暂无项目，先创建一个。
+        </div>
+      ) : (
+        instances.map((item) => {
+          const isActive = item.name === activeName;
+          return (
+            <DropdownMenuItem
+              key={item.name}
+              onSelect={(event) => {
+                event.preventDefault();
+                onSelect(item.name);
+              }}
+              className="flex items-center gap-2 pr-2"
+            >
+              <Check
+                className={cn(
+                  "h-3.5 w-3.5 shrink-0",
+                  isActive ? "text-[hsl(var(--primary))]" : "opacity-0",
+                )}
+              />
+              <span className="flex-1 truncate">{item.name}</span>
+              {item.region && (
+                <span className="text-[11px] text-[hsl(var(--muted-foreground))]">
+                  {item.region}
+                </span>
+              )}
+            </DropdownMenuItem>
+          );
+        })
+      )}
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        onSelect={(event) => {
+          event.preventDefault();
+          onCreate();
+        }}
+      >
+        <Plus className="h-3.5 w-3.5" />
+        创建新项目
+      </DropdownMenuItem>
+      <DropdownMenuItem
+        onSelect={(event) => {
+          event.preventDefault();
+          onManage();
+        }}
+      >
+        <Settings2 className="h-3.5 w-3.5" />
+        项目管理
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/components/layout/sidebar-item.tsx

@@ -27,23 +27,27 @@ export function SidebarItem({ item, collapsed = false }: SidebarItemProps) {
   const content = (
     <span
       className={cn(
-        "group relative flex h-10 items-center gap-2.5 rounded-lg px-3 text-sm font-medium transition-colors duration-150",
-        collapsed && "justify-center px-0",
+        "group relative flex items-center font-medium transition-colors duration-150",
+        // Expanded: full-width row with icon + label.
+        // Collapsed: 32×32 icon-only chip centered horizontally so the
+        // rail reads as a column of evenly-sized affordances rather
+        // than full-width tinted bars.
+        collapsed
+          ? "mx-auto h-8 w-8 justify-center rounded-md text-[14px]"
+          : "h-9 gap-2.5 rounded-md px-3 text-[14px]",
         isActive
-          ? "bg-[hsl(var(--primary)/0.1)] text-primary"
-          : "text-muted-foreground hover:bg-accent hover:text-foreground",
-        disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-muted-foreground",
+          ? "bg-[hsl(var(--sidebar-active-bg))] text-[hsl(var(--sidebar-active-fg))]"
+          : "text-[hsl(var(--sidebar-text))] hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]",
+        disabled &&
+          "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[hsl(var(--sidebar-text))]",
       )}
     >
-      {isActive && !collapsed && (
-        <span className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-primary" />
-      )}
-      <Icon className={cn("h-[18px] w-[18px] shrink-0", isActive && "text-primary")} />
+      <Icon className={cn("shrink-0", collapsed ? "h-[18px] w-[18px]" : "h-4 w-4")} />
       {!collapsed && (
         <>
           <span className="flex-1 truncate">{item.title}</span>
           {item.comingSoon && (
-            <span className="flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+            <span className="flex items-center gap-1 rounded-md bg-[hsl(var(--muted))] px-1.5 py-0.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
               <Lock className="h-3 w-3" />
               即将开放
             </span>
@@ -53,7 +57,6 @@ export function SidebarItem({ item, collapsed = false }: SidebarItemProps) {
     </span>
   );
 
-  // Collapsed state or disabled items: wrap with tooltip for discoverability
   const needsTooltip = collapsed || disabled;
   const tooltipLabel = item.tooltip ?? item.title;
 

package/dist/dashboard-runtime/dashboard/src/components/layout/sidebar-mobile.tsx

@@ -4,15 +4,20 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import * as Dialog from "@radix-ui/react-dialog";
-import { Database, Menu, X } from "lucide-react";
-import { sidebarNav, sidebarResources } from "@/config/navigation";
+import { Menu, X, Zap } from "lucide-react";
+
+import { sidebarGroups } from "@/config/navigation";
+import { cn } from "@/lib/utils";
 import { SidebarItem } from "./sidebar-item";
+import { SidebarInstanceCard } from "./sidebar-instance-card";
+import { SidebarUsageStats } from "./sidebar-usage-stats";
+import { HelpLink } from "./help-link";
+import { ThemeToggle } from "./theme-toggle";
 
 export function SidebarMobile() {
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
 
-  // Auto-close drawer after navigation
   useEffect(() => {
     setOpen(false);
   }, [pathname]);
@@ -24,21 +29,21 @@ export function SidebarMobile() {
           <button
             type="button"
             aria-label="打开菜单"
-            className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            className="rounded-md p-2 text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]"
           >
             <Menu className="h-5 w-5" />
           </button>
         </Dialog.Trigger>
         <Dialog.Portal>
-          <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-          <Dialog.Content className="fixed left-0 top-0 z-50 flex h-full w-[260px] flex-col border-r border-[hsl(var(--sidebar-border))] bg-[hsl(var(--sidebar-bg))] shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-[state=open]:duration-200">
+          <Dialog.Overlay className="fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+          <Dialog.Content className="fixed left-0 top-0 z-50 flex h-full w-[260px] flex-col border-r border-[hsl(var(--sidebar-border))] bg-[hsl(var(--sidebar-bg))] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-[state=open]:duration-200">
             <Dialog.Title className="sr-only">导航菜单</Dialog.Title>
-            <div className="flex h-16 items-center justify-between border-b border-[hsl(var(--sidebar-border))] px-4">
-              <Link href="/" className="flex items-center gap-2">
-                <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
-                  <Database className="h-4 w-4" />
+            <div className="flex h-14 items-center justify-between border-b border-[hsl(var(--sidebar-border))] px-4">
+              <Link href="/" className="flex items-center gap-2.5">
+                <span className="flex h-7 w-7 items-center justify-center rounded-md bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-sm">
+                  <Zap className="h-4 w-4" />
                 </span>
-                <span className="font-display text-[15px] font-semibold tracking-tight text-foreground">
+                <span className="text-[15px] font-semibold tracking-tight text-[hsl(var(--foreground))]">
                   Agent Storage
                 </span>
               </Link>
@@ -46,40 +51,43 @@ export function SidebarMobile() {
                 <button
                   type="button"
                   aria-label="关闭菜单"
-                  className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                  className="rounded-md p-2 text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]"
                 >
                   <X className="h-4 w-4" />
                 </button>
               </Dialog.Close>
             </div>
-            <nav className="flex-1 overflow-y-auto px-3 py-4">
-              <div className="space-y-1">
-                {sidebarNav.map((item) => (
-                  <SidebarItem key={item.title} item={item} />
-                ))}
-              </div>
-              {sidebarResources.length > 0 && (
-                <>
-                  <div className="mt-6 mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">
-                    资源
+            <SidebarInstanceCard />
+            <nav className="flex-1 overflow-y-auto px-3 py-3">
+              {sidebarGroups.map((group, groupIndex) => (
+                <div key={group.title} className={cn(groupIndex > 0 && "mt-4")}>
+                  <div className="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]">
+                    {group.title}
                   </div>
-                  <div className="space-y-1">
-                    {sidebarResources.map((item) => (
+                  <div className="space-y-0.5">
+                    {group.items.map((item) => (
                       <SidebarItem key={item.title} item={item} />
                     ))}
                   </div>
-                </>
-              )}
+                </div>
+              ))}
             </nav>
+            <div className="border-t border-[hsl(var(--sidebar-border))] p-3 space-y-2">
+              <SidebarUsageStats />
+              <div className="flex items-center justify-between gap-1">
+                <HelpLink />
+                <ThemeToggle />
+              </div>
+            </div>
           </Dialog.Content>
         </Dialog.Portal>
       </Dialog.Root>
 
       <Link href="/" className="flex items-center gap-2">
-        <span className="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground">
-          <Database className="h-3.5 w-3.5" />
+        <span className="flex h-7 w-7 items-center justify-center rounded-md bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]">
+          <Zap className="h-3.5 w-3.5" />
         </span>
-        <span className="font-display text-sm font-semibold tracking-tight text-foreground">
+        <span className="text-sm font-semibold tracking-tight text-[hsl(var(--foreground))]">
           Agent Storage
         </span>
       </Link>

package/dist/dashboard-runtime/dashboard/src/components/layout/sidebar-usage-stats.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { UsageCard } from "@/components/ui/usage-card";
+import { useKnowledgeBases } from "@/hooks/use-knowledge-bases";
+import { useMemoryStores } from "@/hooks/use-memory-stores";
+
+/**
+ * Sidebar footer "Usage" card. Reuses the cached KB / memory-store list
+ * queries so the counts share their cache with the actual list pages and
+ * never trigger duplicate network calls beyond the one initial fetch.
+ */
+export function SidebarUsageStats() {
+  const kb = useKnowledgeBases();
+  const ms = useMemoryStores();
+  const kbCount = kb.data?.totalCount ?? kb.data?.items?.length;
+  const msCount = ms.data?.totalCount ?? ms.data?.items?.length;
+
+  return (
+    <UsageCard
+      items={[
+        { label: "知识库", value: kbCount ?? "—" },
+        { label: "记忆库", value: msCount ?? "—" },
+      ]}
+    />
+  );
+}