@tablestore/tablestore-agent-cli 0.1.8 → 0.2.0

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 ?? "—" },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,138 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronLeft, ChevronRight, Zap } from "lucide-react";
+
+import { sidebarGroups } from "@/config/navigation";
+import { useSidebarCollapsed } from "@/hooks/use-sidebar-collapsed";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+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 Sidebar() {
+  const { collapsed, toggle } = useSidebarCollapsed();
+  const width = collapsed ? "w-16" : "w-[220px]";
+
+  return (
+    <aside
+      data-collapsed={collapsed}
+      className={cn(
+        "fixed left-0 top-0 bottom-0 z-40 hidden flex-col border-r border-[hsl(var(--sidebar-border))] bg-[hsl(var(--sidebar-bg))] transition-[width] duration-200 ease-out md:flex",
+        width,
+      )}
+    >
+      {/* Brand */}
+      <Link
+        href="/"
+        className={cn(
+          "flex h-14 shrink-0 items-center gap-2.5 border-b border-[hsl(var(--sidebar-border))] transition-opacity hover:opacity-80",
+          collapsed ? "justify-center px-0" : "px-4",
+        )}
+      >
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-sm">
+          <Zap className="h-4 w-4" />
+        </span>
+        {!collapsed && (
+          <span className="text-[15px] font-semibold tracking-tight text-[hsl(var(--foreground))]">
+            Agent Storage
+          </span>
+        )}
+      </Link>
+
+      {/* Instance switcher card */}
+      <SidebarInstanceCard collapsed={collapsed} />
+
+      {/* Grouped navigation */}
+      <nav
+        className={cn(
+          "flex-1 overflow-y-auto py-3",
+          collapsed ? "px-2" : "px-3",
+        )}
+      >
+        {sidebarGroups.map((group, groupIndex) => (
+          <div
+            key={group.title}
+            className={cn(groupIndex > 0 && (collapsed ? "mt-3" : "mt-4"))}
+          >
+            {!collapsed && (
+              <div className="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]">
+                {group.title}
+              </div>
+            )}
+            <div className={cn(collapsed ? "space-y-1" : "space-y-0.5")}>
+              {group.items.map((item) => (
+                <SidebarItem
+                  key={item.title}
+                  item={item}
+                  collapsed={collapsed}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </nav>
+
+      {/* Footer: usage card + help + theme toggle + collapse */}
+      <div
+        className={cn(
+          "shrink-0 border-t border-[hsl(var(--sidebar-border))]",
+          collapsed ? "px-2 py-2" : "p-3",
+        )}
+      >
+        {!collapsed && (
+          <div className="mb-2">
+            <SidebarUsageStats />
+          </div>
+        )}
+        <div
+          className={cn(
+            "flex items-center",
+            collapsed ? "flex-col gap-1" : "justify-between gap-1",
+          )}
+        >
+          <HelpLink collapsed={collapsed} />
+          <ThemeToggle collapsed={collapsed} />
+          {collapsed ? (
+            <TooltipProvider delayDuration={200}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={toggle}
+                    aria-label="展开侧边栏"
+                    className="flex h-8 w-8 items-center justify-center rounded-md text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]"
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={8}>
+                  展开侧边栏
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ) : null}
+        </div>
+        {!collapsed && (
+          <button
+            type="button"
+            onClick={toggle}
+            aria-label="收起侧边栏"
+            className="mt-2 flex h-8 w-full items-center gap-2 rounded-md px-3 text-xs text-[hsl(var(--muted-foreground))] transition-colors hover:bg-[hsl(var(--background))] hover:text-[hsl(var(--foreground))]"
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+            <span>收起</span>
+          </button>
+        )}
+      </div>
+    </aside>
+  );
+}