@tablestore/tablestore-agent-cli 0.1.8 → 0.2.0

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/logging/client-error-reporter.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect } from "react";
+
+const ENDPOINT = "/api/v1/logs/client";
+
+export function reportClientError(payload: Record<string, unknown>) {
+  try {
+    const body = JSON.stringify({
+      ...payload,
+      url: typeof window !== "undefined" ? window.location.href : undefined,
+    });
+    if (navigator.sendBeacon) {
+      const blob = new Blob([body], { type: "application/json" });
+      navigator.sendBeacon(ENDPOINT, blob);
+      return;
+    }
+    void fetch(ENDPOINT, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body,
+      keepalive: true,
+    });
+  } catch {
+    // Logging must never affect the dashboard itself.
+  }
+}
+
+export function ClientErrorReporter() {
+  useEffect(() => {
+    const onError = (event: ErrorEvent) => {
+      reportClientError({
+        event: "browser.error",
+        message: event.message,
+        name: event.error instanceof Error ? event.error.name : "Error",
+        stack: event.error instanceof Error ? event.error.stack : undefined,
+      });
+    };
+
+    const onUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      reportClientError({
+        event: "browser.unhandled_rejection",
+        message: reason instanceof Error ? reason.message : String(reason),
+        name: reason instanceof Error ? reason.name : "UnhandledRejection",
+        stack: reason instanceof Error ? reason.stack : undefined,
+      });
+    };
+
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onUnhandledRejection);
+    return () => {
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onUnhandledRejection);
+    };
+  }, []);
+
+  return null;
+}

package/dist/dashboard-runtime/dashboard/src/components/memory/memory-store-list.tsx

@@ -6,6 +6,7 @@ import { Brain, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { EmptyState } from "@/components/shared/empty-state";
+import { ErrorState } from "@/components/shared/error-state";
 import { SearchInput } from "@/components/shared/search-input";
 import { useDebounce } from "@/hooks/use-debounce";
 import { useMemoryStores } from "@/hooks/use-memory-stores";
@@ -14,7 +15,7 @@ import { MemoryDeleteDialog } from "./memory-delete-dialog";
 import { MemoryStoreCard } from "./memory-store-card";
 
 export function MemoryStoreList() {
-  const { data, isLoading } = useMemoryStores();
+  const { data, isLoading, error, refetch } = useMemoryStores();
   const [searchQuery, setSearchQuery] = useState("");
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
   const debouncedQuery = useDebounce(searchQuery, 300);
@@ -43,6 +44,10 @@ export function MemoryStoreList() {
     );
   }
 
+  if (error) {
+    return <ErrorState error={error} onRetry={() => refetch()} />;
+  }
+
   if (!data?.items?.length) {
     return (
       <EmptyState

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/markdown.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { code } from "@streamdown/code";
+import { Streamdown, type UrlTransform } from "streamdown";
+
+import { cn } from "@/lib/utils";
+
+import { CodeBlock } from "./code-block";
+
+const ALLOWED_LINK_PREFIXES = ["https://", "http://", "mailto:", "#", "/"];
+const ALLOWED_IMAGE_PREFIXES = ["https://", "data:image/"];
+
+/**
+ * Whitelist URL scheme to mitigate XSS via javascript:/data: links while
+ * keeping inline fragments and relative paths usable inside the dashboard.
+ */
+const safeUrlTransform: UrlTransform = (url, key) => {
+  const lower = url.toLowerCase();
+  const allowList =
+    key === "src" ? ALLOWED_IMAGE_PREFIXES : ALLOWED_LINK_PREFIXES;
+  return allowList.some((prefix) => lower.startsWith(prefix)) ? url : "";
+};
+
+interface MarkdownProps {
+  children: string;
+  className?: string;
+}
+
+/**
+ * Thin wrapper around Streamdown that applies our shadcn-friendly typography
+ * and a conservative URL whitelist. Streamdown ships KaTeX, Shiki and GFM out
+ * of the box and repairs partial Markdown during streaming.
+ */
+export function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div
+      className={cn(
+        "text-sm leading-relaxed text-foreground/90",
+        "[&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_li]:my-0.5",
+        "[&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5",
+        "[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold",
+        "[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold",
+        "[&_h3]:mt-3 [&_h3]:mb-1.5 [&_h3]:text-sm [&_h3]:font-semibold",
+        "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2",
+        // Inline code (not inside <pre>) keeps the subtle chip look. Block
+        // code is fully owned by the CodeBlock component below.
+        "[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-[hsl(var(--muted))] [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:text-[0.85em]",
+        "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse",
+        "[&_th]:border [&_th]:border-[hsl(var(--border))] [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold",
+        "[&_td]:border [&_td]:border-[hsl(var(--border))] [&_td]:px-2 [&_td]:py-1",
+        "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-[hsl(var(--border))] [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground",
+        "[&_hr]:my-3 [&_hr]:border-[hsl(var(--border))]",
+        className,
+      )}
+    >
+      <Streamdown
+        parseIncompleteMarkdown
+        // Disable raw HTML rendering. Combined with the URL whitelist
+        // above, this closes the last XSS vector where a crafted
+        // assistant reply could embed a `<script>` or inline event
+        // handler that the Markdown → HTML path would pass through
+        // verbatim.
+        skipHtml
+        urlTransform={safeUrlTransform}
+        plugins={{ code }}
+        components={{ pre: CodeBlock }}
+        controls={{
+          code: false,
+          table: false,
+          mermaid: false,
+        }}
+      >
+        {children}
+      </Streamdown>
+    </div>
+  );
+}

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 ? "检索中..." : "执行检索"}