@tablestore/tablestore-agent-cli 0.1.7 → 0.1.8

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/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>