@tablestore/tablestore-agent-cli 0.1.7 → 0.1.9

package/dist/dashboard-runtime/dashboard/src/components/shared/confirm-dialog.tsx

@@ -1,7 +1,7 @@
 
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, type ReactNode } from "react";
 import {
   Dialog,
   DialogContent,
@@ -23,6 +23,10 @@ interface ConfirmDialogProps {
   variant?: "default" | "danger";
   onConfirm: () => void;
   confirmInput?: string;
+  /** Optional body slot rendered between the description and the footer.
+   *  Used for inline form elements (e.g. the chat-message delete dialog's
+   *  「同时删除下方的 AI 回复」 checkbox). */
+  children?: ReactNode;
 }
 
 export function ConfirmDialog({
@@ -35,6 +39,7 @@ export function ConfirmDialog({
   variant = "default",
   onConfirm,
   confirmInput,
+  children,
 }: ConfirmDialogProps) {
   const [inputValue, setInputValue] = useState("");
 
@@ -81,6 +86,8 @@ export function ConfirmDialog({
           </div>
         )}
 
+        {children && <div className="py-1">{children}</div>}
+
         <DialogFooter>
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
             {cancelText}

package/dist/dashboard-runtime/dashboard/src/components/shared/error-state.tsx

@@ -0,0 +1,54 @@
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ApiClientError } from "@/services/api-client";
+
+interface ErrorStateProps {
+  error: Error;
+  onRetry?: () => void;
+}
+
+function getHint(error: Error): string | null {
+  if (!(error instanceof ApiClientError)) return null;
+  const { status } = error;
+  if (status === 401 || status === 403) {
+    return "Please check your AccessKey credentials in the project settings.";
+  }
+  if (status === 503 || error.code === "NETWORK_ERROR") {
+    return "The service may be unreachable. Verify the endpoint address and network connectivity.";
+  }
+  return null;
+}
+
+export function ErrorState({ error, onRetry }: ErrorStateProps) {
+  const hint = getHint(error);
+
+  return (
+    <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+      <div className="mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-destructive/10 ring-8 ring-destructive/5">
+        <AlertTriangle
+          className="text-destructive"
+          size={36}
+          strokeWidth={1.75}
+        />
+      </div>
+      <h3 className="mb-2 font-display text-lg font-semibold text-foreground">
+        Failed to load data
+      </h3>
+      <p className="mb-1 max-w-md text-sm text-muted-foreground">
+        {error.message}
+      </p>
+      {hint && (
+        <p className="mb-6 max-w-md text-xs text-muted-foreground/80">
+          {hint}
+        </p>
+      )}
+      {!hint && <div className="mb-6" />}
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          <RefreshCw className="mr-2 h-4 w-4" />
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/components/shared/refresh-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -22,32 +22,29 @@ interface RefreshButtonProps {
   variant?: "outline" | "ghost";
 }
 
-/** One full turn takes this long. Matches the transition duration so the
- *  tick cadence and the animation finish together, producing continuous
- *  rotation without visible seams. */
-const TURN_MS = 600;
-/** Minimum on-screen spin time to avoid a flash on sub-100ms refetches. */
-const MIN_SPIN_MS = 300;
-/** Material `ease-standard`: smooth ease-in-out that looks natural on both
- *  the first turn and the final settling turn. */
-const EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+/** Duration of one full revolution. 800ms is the GitHub / Vercel / Slack
+ *  band — fast enough to feel responsive, slow enough to read as motion
+ *  rather than a blur. */
+const SPIN_PERIOD_MS = 800;
 
 /**
- * Refresh button with a strictly monotonic rotation model.
+ * Refresh button with **atomic chained rotations**.
  *
- * Every spin increments an integer `turns` counter; the outer wrapper
- * animates to `rotate(turns * 360deg)` via a single CSS transition. There is
- * no keyframe-to-static handoff, no angle sampling, no settle phase — so the
- * icon physically cannot rewind or over-rotate.
+ * Industry pattern (GitHub, Linear, Raycast, ChatGPT regenerate): a refresh
+ * spin is not a single "infinite" CSS animation that gets stopped mid-flight
+ * — it's a chain of complete 360° cycles. Each cycle is one Animation with
+ * `iterations: 1, easing: 'linear'`. On `finish`, if loading is still in
+ * flight we start another cycle; otherwise we stop. This way:
  *
- * - While `loading`, a timer advances `turns` once per {@link TURN_MS}, each
- *   tick landing exactly on a full revolution and continuing seamlessly into
- *   the next one thanks to the matching transition duration.
- * - When `loading` flips to false (after {@link MIN_SPIN_MS} has elapsed) the
- *   timer stops; the last in-flight transition finishes naturally with an
- *   ease-out tail.
- * - Hover tilt lives on a separate inner element, so its transform composes
- *   with the outer rotation rather than fighting it.
+ * - The icon always lands cleanly at 0° (== 360°), no partial-angle settle.
+ * - Speed is constant the entire time — no "slow down to a stop" that looks
+ *   like the spinner hit a wall, which is the most common cause of refresh
+ *   animations feeling unnatural.
+ * - The transition between "loading" and "idle" never produces a snap-back,
+ *   even if the request finishes inside a single millisecond.
+ *
+ * A minimum of one full revolution plays after a click, so sub-100ms refetches
+ * still register as "I did something" instead of flickering.
  *
  * Drive `loading` from TanStack Query's `isRefetching` (not `isFetching`) so
  * background auto-refetches on mount do not animate without user intent.
@@ -59,66 +56,80 @@ export function RefreshButton({
   className,
   size = "icon",
   label,
-  variant = "outline",
+  variant = "ghost",
 }: RefreshButtonProps) {
-  // Accumulated full revolutions. Monotonic: `turns` only ever grows, so the
-  // wrapper never animates backwards.
-  const [turns, setTurns] = useState(0);
-  // Whether the timer is actively ticking. Tracked to dedupe starts and to
-  // decide whether MIN_SPIN_MS still needs to be honoured on stop.
-  const activeRef = useRef(false);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-  const stopTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const startedAtRef = useRef(0);
+  const iconRef = useRef<HTMLSpanElement | null>(null);
+  /** Currently-running cycle; null when idle. */
+  const animRef = useRef<Animation | null>(null);
+  /** Mirror of the `loading` prop accessible from inside the `finish`
+   *  listener, which closes over a stale value if we read the prop directly. */
+  const loadingRef = useRef(loading);
 
-  const clearAll = () => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-    if (stopTimerRef.current) {
-      clearTimeout(stopTimerRef.current);
-      stopTimerRef.current = null;
-    }
-  };
+  const startCycle = () => {
+    const el = iconRef.current;
+    if (!el) return;
+    if (animRef.current) return;
 
-  const startSpinning = () => {
-    if (activeRef.current) return;
-    activeRef.current = true;
-    startedAtRef.current = performance.now();
-    // Advance immediately so the user sees motion on the first frame.
-    setTurns((t) => t + 1);
-    intervalRef.current = setInterval(() => {
-      setTurns((t) => t + 1);
-    }, TURN_MS);
-  };
+    const anim = el.animate(
+      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+      {
+        duration: SPIN_PERIOD_MS,
+        easing: "linear",
+        iterations: 1,
+        fill: "none",
+      },
+    );
+    animRef.current = anim;
+
+    anim.addEventListener("finish", () => {
+      animRef.current = null;
+      // Chain the next cycle if the request is still in flight. The chain
+      // is implicit, not explicit: each cycle only knows about itself.
+      if (loadingRef.current) {
+        startCycle();
+      }
+    });
 
-  const stopSpinning = () => {
-    clearAll();
-    activeRef.current = false;
-    // No angle reset: the current turn finishes its in-flight transition and
-    // ends cleanly aligned with 360deg * turns.
+    // `cancel` shouldn't normally fire — we never call .cancel() ourselves —
+    // but defensively clear the ref so a fresh click can start a new cycle.
+    anim.addEventListener("cancel", () => {
+      animRef.current = null;
+    });
   };
 
+  // Keep the ref in sync so the `finish` listener sees the latest value.
+  useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+
+  // Start a cycle when loading begins. We don't have to do anything when
+  // loading ends — the in-flight cycle finishes on its own and the chain
+  // doesn't continue because `loadingRef.current` will be false.
   useEffect(() => {
     if (loading) {
-      startSpinning();
-      return;
+      startCycle();
     }
-    if (!activeRef.current) return;
-    const elapsed = performance.now() - startedAtRef.current;
-    const remaining = MIN_SPIN_MS - elapsed;
-    if (remaining <= 0) {
-      stopSpinning();
-      return;
-    }
-    stopTimerRef.current = setTimeout(stopSpinning, remaining);
+    // startCycle is a stable closure over refs; including it would force a
+    // re-run on every render with no behaviour change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loading]);
 
-  useEffect(() => () => clearAll(), []);
+  useEffect(
+    () => () => {
+      animRef.current?.cancel();
+      animRef.current = null;
+    },
+    [],
+  );
 
   const handleClick = () => {
     if (loading) return;
+    // Start a cycle eagerly so the user gets visual confirmation even when
+    // the request resolves in <100ms (cache hit). Cycles are atomic: once
+    // started, they always play to completion regardless of `loading` —
+    // that's what makes the "minimum one full revolution" guarantee
+    // structural rather than a separate timer.
+    startCycle();
     onClick();
   };
 
@@ -127,33 +138,38 @@ export function RefreshButton({
 
   return (
     <Button
+      type="button"
       variant={variant}
       size={size}
       onClick={handleClick}
-      disabled={loading}
+      // We don't disable while loading: the icon is its own affordance, and
+      // disabling produces a "dead" hit state that feels worse than letting
+      // a redundant click no-op silently.
       title={title}
       aria-label={label ?? title}
-      className={cn("group transition-colors", className)}
+      aria-busy={loading || undefined}
+      className={cn(
+        "group text-muted-foreground transition-colors duration-150",
+        "hover:text-foreground active:scale-[0.96]",
+        // Soft hover wash for the default ghost variant; outlined stays as-is.
+        variant === "ghost" && "hover:bg-[hsl(var(--accent))]",
+        className,
+      )}
     >
-      {/* Outer wrapper owns the monotonic rotation. Using inline style keeps
-          the transform in sync with `turns` regardless of Tailwind arbitrary
-          value caching. */}
+      {/*
+        The icon lives inside its own span which is what we animate. We
+        intentionally do NOT add a hover-tilt to this span — a hover transform
+        and the rotate animation share the same `transform` property, and
+        switching from "tilted" to "rotating-from-0" produces a visible snap
+        back to 0deg the moment the user clicks. Hover state is conveyed via
+        text + background colour shifts on the parent button instead.
+      */}
       <span
+        ref={iconRef}
         aria-hidden
         className={cn("inline-flex transform-gpu", showLabel && "mr-1.5")}
-        style={{
-          transform: `rotate(${turns * 360}deg)`,
-          transition: `transform ${TURN_MS}ms ${EASING}`,
-        }}
       >
-        {/* Inner icon owns the idle hover tilt, completely decoupled from
-            the outer rotation so the two transforms compose without fighting. */}
-        <RefreshCw
-          className={cn(
-            iconSize,
-            "transition-transform duration-200 group-hover:-rotate-[35deg]",
-          )}
-        />
+        <RefreshCw className={iconSize} />
       </span>
       {showLabel && label}
     </Button>

package/dist/dashboard-runtime/dashboard/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/dist/dashboard-runtime/dashboard/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow hover:opacity-90",
+        destructive:
+          "bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] shadow-sm hover:opacity-90",
+        outline:
+          "border border-[hsl(var(--input))] bg-[hsl(var(--background))] shadow-sm hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+        secondary:
+          "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] shadow-sm hover:opacity-80",
+        ghost: "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+        link: "text-[hsl(var(--primary))] underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/dist/dashboard-runtime/dashboard/src/components/ui/card.tsx

@@ -0,0 +1,97 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+/**
+ * Interactive card variant with a subtle lift on hover, intended for clickable
+ * list items such as knowledge-base cards and home feature cards.
+ */
+const CardInteractive = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow-sm",
+      "transition-[transform,box-shadow,border-color] duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+      "hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md",
+      className,
+    )}
+    {...props}
+  />
+))
+CardInteractive.displayName = "CardInteractive"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardInteractive }

package/dist/dashboard-runtime/dashboard/src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("grid place-content-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/dist/dashboard-runtime/dashboard/src/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }