@tablestore/tablestore-agent-cli 0.1.9 → 0.2.0

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

@@ -1,11 +1,22 @@
 "use client";
 
 import Link from "next/link";
-import { ChevronLeft, ChevronRight, Database } from "lucide-react";
-import { sidebarNav, sidebarResources } from "@/config/navigation";
+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();
@@ -19,71 +30,108 @@ export function Sidebar() {
         width,
       )}
     >
-      {/* Logo */}
+      {/* Brand */}
       <Link
         href="/"
         className={cn(
-          "flex h-16 items-center gap-2 border-b border-[hsl(var(--sidebar-border))] px-4 transition-opacity hover:opacity-80",
-          collapsed && "justify-center px-0",
+          "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-primary text-primary-foreground shadow-sm">
-          <Database className="h-4 w-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="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>
 
-      {/* Main navigation */}
-      <nav className={cn("flex-1 overflow-y-auto px-3 py-4", collapsed && "px-2")}>
-        <div className="space-y-1">
-          {sidebarNav.map((item) => (
-            <SidebarItem key={item.title} item={item} collapsed={collapsed} />
-          ))}
-        </div>
+      {/* Instance switcher card */}
+      <SidebarInstanceCard collapsed={collapsed} />
 
-        {sidebarResources.length > 0 && (
-          <>
-            <div
-              className={cn(
-                "mt-6 mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70",
-                collapsed && "px-0 text-center",
-              )}
-            >
-              {collapsed ? "···" : "资源"}
-            </div>
-            <div className="space-y-1">
-              {sidebarResources.map((item) => (
-                <SidebarItem key={item.title} item={item} 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: collapse toggle */}
-      <div className="border-t border-[hsl(var(--sidebar-border))] p-3">
-        <button
-          type="button"
-          onClick={toggle}
-          aria-label={collapsed ? "展开侧边栏" : "收起侧边栏"}
+      {/* 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 h-9 w-full items-center gap-2 rounded-lg px-3 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-            collapsed && "justify-center px-0",
+            "flex items-center",
+            collapsed ? "flex-col gap-1" : "justify-between gap-1",
           )}
         >
+          <HelpLink collapsed={collapsed} />
+          <ThemeToggle collapsed={collapsed} />
           {collapsed ? (
-            <ChevronRight className="h-4 w-4" />
-          ) : (
-            <>
-              <ChevronLeft className="h-4 w-4" />
-              <span>收起</span>
-            </>
-          )}
-        </button>
+            <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>
   );

package/dist/dashboard-runtime/dashboard/src/components/layout/theme-toggle.tsx

@@ -1,63 +1,183 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Moon, Sun } from "lucide-react";
+import { Moon, Monitor, Sun } from "lucide-react";
 import { useTheme } from "@/providers/theme-provider";
 import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+type ThemeMode = "light" | "system" | "dark";
+
+const MODES: ThemeMode[] = ["light", "system", "dark"];
+const ICONS: Record<ThemeMode, React.ComponentType<{ className?: string }>> = {
+  light: Sun,
+  system: Monitor,
+  dark: Moon,
+};
+const LABELS: Record<ThemeMode, string> = {
+  light: "浅色",
+  system: "自动",
+  dark: "深色",
+};
+
+interface ThemeToggleProps {
+  /** When true, render the compact icon-only variant suitable for a
+   *  collapsed sidebar (32×32 button cycling through modes). */
+  collapsed?: boolean;
+}
 
 /**
- * iOS-style light/dark switch. The thumb carries the icon of the currently
- * active mode (sun = light, moon = dark) and slides between the two ends.
- * Initial state follows the OS preference; once the user toggles it the
- * choice is persisted by next-themes and overrides the system setting.
+ * Three-state theme switcher (light / system / dark) inspired by the
+ * segmented-control patterns used by Vercel, Linear, and GitHub. Exposes
+ * the "system" option explicitly so users can opt into following their
+ * OS preference instead of being forced to pick a manual override.
+ *
+ * Layout adapts to available space:
+ *   - Expanded sidebar: full 3-button segmented track with icons +
+ *     animated active thumb. Inset shadow on the track gives the
+ *     recessed "well" look used by iOS / macOS toggle groups.
+ *   - Collapsed sidebar: single icon button showing the *current* mode
+ *     (resolves system → light/dark visually). Click cycles through
+ *     light → system → dark; tooltip previews the next state so the
+ *     compact UI is still discoverable.
  */
-export function ThemeToggle() {
-  const { setTheme, resolvedTheme } = useTheme();
+export function ThemeToggle({ collapsed }: ThemeToggleProps) {
+  const { theme, setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => setMounted(true), []);
 
-  // Reserve the same footprint during SSR to avoid layout shift and the
-  // classic next-themes hydration warning.
+  // Reserve identical footprint during SSR to avoid layout shift / hydration
+  // warnings from next-themes.
   if (!mounted) {
-    return <div className="h-6 w-11" aria-hidden />;
+    return collapsed ? (
+      <div className="h-8 w-8" aria-hidden />
+    ) : (
+      <div className="h-8 w-[108px]" aria-hidden />
+    );
   }
 
-  const isDark = resolvedTheme === "dark";
+  const current: ThemeMode = (theme as ThemeMode) ?? "system";
+
+  if (collapsed) {
+    // Collapsed: cycle through modes on click.
+    const nextIndex = (MODES.indexOf(current) + 1) % MODES.length;
+    const nextMode = MODES[nextIndex];
+    // Pick the icon to display: for `system`, show whichever the OS
+    // currently resolves to so the button always reflects the *visible*
+    // theme, not the abstract preference.
+    const displayMode: "light" | "dark" =
+      current === "system"
+        ? resolvedTheme === "dark"
+          ? "dark"
+          : "light"
+        : current;
+    const Icon = ICONS[displayMode];
+
+    return (
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              aria-label={`切换到 ${LABELS[nextMode]} 主题`}
+              data-mode={current}
+              onClick={() => setTheme(nextMode)}
+              className={cn(
+                "relative 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))]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)]",
+              )}
+            >
+              {/* Icon morph: rotate + scale + opacity cross-fade between
+                  light and dark glyphs so the button itself becomes the
+                  affordance, not a text label. The `system` state inherits
+                  whichever glyph the OS resolves to. */}
+              <Sun
+                className={cn(
+                  "absolute h-[18px] w-[18px] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+                  displayMode === "light"
+                    ? "rotate-0 scale-100 opacity-100"
+                    : "-rotate-90 scale-50 opacity-0",
+                )}
+              />
+              <Moon
+                className={cn(
+                  "absolute h-[18px] w-[18px] transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+                  displayMode === "dark"
+                    ? "rotate-0 scale-100 opacity-100"
+                    : "rotate-90 scale-50 opacity-0",
+                )}
+              />
+              {/* Tiny `system` indicator badge: a 6px monitor pip in the
+                  bottom-right corner when current === "system" so users
+                  can tell apart "explicitly light" from "system→light". */}
+              {current === "system" && (
+                <span
+                  aria-hidden
+                  className="absolute bottom-0.5 right-0.5 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-[hsl(var(--card))] text-[hsl(var(--primary))] ring-1 ring-[hsl(var(--border))]"
+                >
+                  <Monitor className="h-1.5 w-1.5" strokeWidth={3} />
+                </span>
+              )}
+              <Icon aria-hidden className="hidden" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={8}>
+            主题：{LABELS[current]} · 点击切换至 {LABELS[nextMode]}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
 
+  // Expanded: full 3-button segmented control.
   return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={isDark}
-      aria-label={isDark ? "切换到亮色模式" : "切换到暗色模式"}
-      title={isDark ? "切换到亮色模式" : "切换到暗色模式"}
-      data-state={isDark ? "checked" : "unchecked"}
-      onClick={() => setTheme(isDark ? "light" : "dark")}
+    <div
+      role="radiogroup"
+      aria-label="主题"
       className={cn(
-        "peer relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200",
-        "shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04),inset_0_1px_2px_rgba(0,0,0,0.06)]",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-        isDark
-          ? "bg-slate-700 hover:bg-slate-600"
-          : "bg-sky-200 hover:bg-sky-300",
+        "inline-flex items-center gap-0.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--secondary))] p-0.5",
+        "shadow-[inset_0_1px_2px_rgba(15,23,42,0.04)]",
       )}
     >
-      <span
-        aria-hidden
-        className={cn(
-          "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-white transition-transform duration-200",
-          "shadow-[0_1px_2px_rgba(0,0,0,0.1),0_2px_6px_rgba(0,0,0,0.15)] ring-1 ring-black/5",
-          "ease-[cubic-bezier(0.34,1.56,0.64,1)]",
-          isDark ? "translate-x-5" : "translate-x-0.5",
-        )}
-      >
-        {isDark ? (
-          <Moon className="h-3 w-3 text-slate-700" />
-        ) : (
-          <Sun className="h-3 w-3 text-amber-500" />
-        )}
-      </span>
-    </button>
+      {MODES.map((mode) => {
+        const Icon = ICONS[mode];
+        const active = current === mode;
+        return (
+          <TooltipProvider key={mode} delayDuration={300}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  role="radio"
+                  aria-checked={active}
+                  aria-label={LABELS[mode]}
+                  data-state={active ? "on" : "off"}
+                  onClick={() => setTheme(mode)}
+                  className={cn(
+                    "relative flex h-7 w-7 items-center justify-center rounded transition-all duration-200",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)]",
+                    active
+                      ? "bg-[hsl(var(--card))] text-[hsl(var(--primary))] shadow-sm"
+                      : "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]",
+                  )}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top" sideOffset={6}>
+                {LABELS[mode]}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        );
+      })}
+    </div>
   );
 }

package/dist/dashboard-runtime/dashboard/src/components/memory/requests-histogram-chart.tsx

@@ -67,8 +67,8 @@ export default function RequestsHistogramChart({
             background: "var(--popover)",
           }}
         />
-        <Bar dataKey="success" stackId="status" fill="#10b981" />
-        <Bar dataKey="error" stackId="status" fill="#ef4444" />
+        <Bar dataKey="success" stackId="status" fill="hsl(var(--success))" />
+        <Bar dataKey="error" stackId="status" fill="hsl(var(--danger))" />
       </BarChart>
     </ResponsiveContainer>
   );

package/dist/dashboard-runtime/dashboard/src/components/qa/qa-chat-panel.tsx

@@ -117,7 +117,7 @@ export function QaChatPanel({
   };
 
   return (
-    <div className="flex h-full flex-col rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--surface))]">
+    <div className="flex h-full min-h-0 flex-1 flex-col bg-[hsl(var(--card))]">
       <div
         ref={scrollRef}
         // role=log + aria-live=polite tells screen readers that new chunks

package/dist/dashboard-runtime/dashboard/src/components/retrieval/retrieval-form.tsx

@@ -3,7 +3,8 @@
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Search, ChevronDown, ChevronRight } from "lucide-react";
+import { Check, Code2, Copy, Search } from "lucide-react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -14,6 +15,17 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { type FilterBuilderHandle } from "./filter-builder";
 import { RetrievalParamsFields } from "./retrieval-params-fields";
 import { assembleRetrievalConfiguration } from "./assemble-retrieval-configuration";
@@ -99,24 +111,92 @@ export function retrievalDefaultsFromKB(
   };
 }
 
-function RequestPreviewPanel({ buildRequestJson }: { buildRequestJson: () => Record<string, unknown> }) {
+/**
+ * Compact "developer tool" affordance for the retrieval form: an icon
+ * button at the form's top-right corner that opens a popover preview of
+ * the assembled request body. The user can hover for a tooltip, click to
+ * see the JSON, and copy it to the clipboard from the popover header.
+ *
+ * Replaces the previous inline collapsible panel that ate vertical
+ * space in the form column even when collapsed and read like a primary
+ * affordance instead of a secondary inspection helper.
+ */
+function RequestPreviewButton({
+  buildRequestJson,
+}: {
+  buildRequestJson: () => Record<string, unknown>;
+}) {
   const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  // Snapshot the current form values whenever the popover opens so the
+  // displayed JSON does not flicker as the user clicks around inside it.
+  const json = open ? JSON.stringify(buildRequestJson(), null, 2) : "";
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(json);
+      setCopied(true);
+      toast.success("已复制请求体");
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("复制失败，请手动选择");
+    }
+  };
+
   return (
-    <div className="border border-[hsl(var(--border))] rounded-md overflow-hidden">
-      <button
-        type="button"
-        className="flex w-full items-center gap-1 px-3 py-2 text-xs text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]"
-        onClick={() => setOpen((prev) => !prev)}
+    <Popover open={open} onOpenChange={setOpen}>
+      <TooltipProvider delayDuration={200}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
+                aria-label="查看请求体"
+              >
+                <Code2 className="h-3.5 w-3.5" />
+              </Button>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            查看 / 复制请求体 JSON
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <PopoverContent
+        align="end"
+        sideOffset={6}
+        className="w-[420px] max-w-[90vw] p-0"
       >
-        {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
-        请求预览
-      </button>
-      {open && (
-        <pre className="px-3 pb-3 text-xs overflow-auto max-h-60 text-[hsl(var(--foreground))]">
-          {JSON.stringify(buildRequestJson(), null, 2)}
+        <div className="flex items-center justify-between border-b border-[hsl(var(--border-light))] px-3 py-2">
+          <span className="text-xs font-semibold text-[hsl(var(--foreground))]">
+            请求体（实时预览）
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-6 gap-1 px-2 text-xs"
+            onClick={handleCopy}
+          >
+            {copied ? (
+              <>
+                <Check className="h-3 w-3" /> 已复制
+              </>
+            ) : (
+              <>
+                <Copy className="h-3 w-3" /> 复制
+              </>
+            )}
+          </Button>
+        </div>
+        <pre className="max-h-80 overflow-auto px-3 py-2 font-mono text-[11px] leading-snug text-[hsl(var(--foreground))]">
+          {json}
         </pre>
-      )}
-    </div>
+      </PopoverContent>
+    </Popover>
   );
 }
 
@@ -153,6 +233,11 @@ export function RetrievalForm({
         onSubmit={form.handleSubmit(handleSubmit)}
         className="space-y-5"
       >
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="text-base font-semibold">检索测试</h3>
+          <RequestPreviewButton buildRequestJson={buildRequestJson} />
+        </div>
+
         <FormField
           control={form.control}
           name="query"
@@ -181,8 +266,6 @@ export function RetrievalForm({
           filterRef={filterRef}
         />
 
-        <RequestPreviewPanel buildRequestJson={buildRequestJson} />
-
         <Button type="submit" disabled={isLoading} className="w-full">
           <Search className="mr-2 h-4 w-4" />
           {isLoading ? "检索中..." : "执行检索"}