@tablestore/tablestore-agent-cli 0.1.8 → 0.2.0

package/dist/dashboard-runtime/dashboard/src/components/retrieval/retrieval-rerank-fields.tsx

@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
 import type { RetrievalInput } from "@/schemas/retrieval";
 
 interface RerankFieldsProps {
@@ -106,32 +107,63 @@ function RrfFields({ form }: { form: UseFormReturn<RetrievalInput> }) {
 }
 
 function WeightFields({ form }: { form: UseFormReturn<RetrievalInput> }) {
+  // WEIGHT rerank weights are bounded 0–1 floats — the previous "0 ~ 1"
+  // FormDescription read as a clunky bottom caption. A slider with the
+  // numeric value pinned inline next to the label communicates the
+  // range visually and gives instant tactile feedback, no caption needed.
   return (
-    <RerankPanel cols={2}>
-      <NumField
-        form={form}
-        name="weightDense"
-        label="向量权重"
-        step={0.1}
-        min={0}
-        max={1}
-        placeholder="0.5"
-        description="0 ~ 1"
-      />
-      <NumField
-        form={form}
-        name="weightFullText"
-        label="全文权重"
-        step={0.1}
-        min={0}
-        max={1}
-        placeholder="0.5"
-        description="0 ~ 1"
-      />
+    <RerankPanel cols={1}>
+      <WeightSliderField form={form} name="weightDense" label="向量权重" />
+      <WeightSliderField form={form} name="weightFullText" label="全文权重" />
     </RerankPanel>
   );
 }
 
+function WeightSliderField({
+  form,
+  name,
+  label,
+}: {
+  form: UseFormReturn<RetrievalInput>;
+  name: "weightDense" | "weightFullText";
+  label: string;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => {
+        const value =
+          typeof field.value === "number" && Number.isFinite(field.value)
+            ? field.value
+            : 0.5;
+        return (
+          <FormItem>
+            <div className="flex items-center justify-between gap-3">
+              <FormLabel>{label}</FormLabel>
+              <span className="rounded bg-[hsl(var(--secondary))] px-2 py-0.5 text-xs font-medium tabular-nums text-[hsl(var(--foreground))]">
+                {value.toFixed(2)}
+              </span>
+            </div>
+            <FormControl>
+              <Slider
+                min={0}
+                max={1}
+                step={0.05}
+                value={[value]}
+                onValueChange={(values) => field.onChange(values[0] ?? 0)}
+                onBlur={field.onBlur}
+                aria-label={label}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
 /** Providers currently wired up on the server side. Kept inline because the
  *  list is short and the settings page uses the same hard-coded catalogue. */
 const PROVIDER_OPTIONS: { value: string; label: string }[] = [
@@ -185,10 +217,15 @@ function RerankPanel({
   cols = 3,
   children,
 }: {
-  cols?: 2 | 3;
+  cols?: 1 | 2 | 3;
   children: React.ReactNode;
 }) {
-  const colClass = cols === 2 ? "sm:grid-cols-2" : "sm:grid-cols-3";
+  const colClass =
+    cols === 1
+      ? "grid-cols-1"
+      : cols === 2
+        ? "sm:grid-cols-2"
+        : "sm:grid-cols-3";
   return (
     <div className={"grid gap-3 px-0.5 pt-1 " + colClass}>{children}</div>
   );

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

@@ -25,7 +25,7 @@ export function EmptyState({
           <Icon className="text-primary" size={36} strokeWidth={1.75} />
         </div>
       )}
-      <h3 className="mb-2 font-display text-lg font-semibold text-foreground">
+      <h3 className="mb-2 text-base font-semibold text-foreground">
         {title}
       </h3>
       <p className="mb-6 max-w-sm text-sm text-muted-foreground">

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 text-base 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/llm-model-selector.tsx

@@ -1,11 +1,23 @@
 "use client";
 
-import { useEffect, useMemo } from "react";
-import { Loader2, RefreshCw } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Check, ChevronsUpDown, Loader2, Plus, RefreshCw } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
 import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -15,18 +27,15 @@ import {
 } from "@/components/ui/select";
 import { useLLMProviders } from "@/hooks/use-llm-providers";
 import { useLLMProviderModels } from "@/hooks/use-llm-provider-models";
+import { cn } from "@/lib/utils";
 
 interface LLMModelSelectorProps {
   providerId: string;
   model: string;
   onProviderChange: (providerId: string, defaultModel?: string) => void;
   onModelChange: (model: string) => void;
-  /**
-   * Show a free-text input next to the model dropdown so users can type any
-   * model id (useful when the provider's model list isn't exhaustive).
-   * Defaults to false; the chat config drawer keeps the dropdown only,
-   * while the QA tester opts in.
-   */
+  /** @deprecated Free-text typing is now part of the unified combobox in
+   *  every surface; this flag is ignored. Kept for callsite compatibility. */
   allowFreeText?: boolean;
   /** Auto-select the first provider on mount when no providerId is set. */
   autoSelectFirst?: boolean;
@@ -37,17 +46,19 @@ interface LLMModelSelectorProps {
 }
 
 /**
- * Reusable Provider + Model selector. Both QA test page and chat config
- * drawer mounted nearly identical inline copies of this widget; centralising
- * the data fetch + auto-select + refresh-list affordance keeps behaviour
- * uniform across surfaces.
+ * Reusable Provider + Model selector. The provider stays a plain Select
+ * (the list is small and authoritative), but the model widget is a
+ * typeable combobox: it filters known model ids as the user types and
+ * always offers a `使用 "<typed>"` row so callers can submit a model
+ * the upstream `/models` endpoint did not return — useful when a
+ * provider exposes a partial list, or when the user wants to test a
+ * preview / private model id.
  */
 export function LLMModelSelector({
   providerId,
   model,
   onProviderChange,
   onModelChange,
-  allowFreeText = false,
   autoSelectFirst = false,
   providerLabel = "Provider",
   modelLabel = "Model",
@@ -101,7 +112,7 @@ export function LLMModelSelector({
                 providersLoading
                   ? "加载中..."
                   : providers.length === 0
-                    ? "请先在「大模型」中创建配置"
+                    ? "请先在「模型提供商」中创建配置"
                     : "选择 Provider"
               }
             />
@@ -135,62 +146,141 @@ export function LLMModelSelector({
             刷新列表
           </Button>
         </div>
-        {allowFreeText ? (
-          <div className="flex gap-2">
-            <Select
-              value={modelOptions.includes(model) ? model : ""}
-              onValueChange={onModelChange}
-              disabled={!providerId}
-            >
-              <SelectTrigger className="flex-1">
-                <SelectValue placeholder="选择或输入模型名" />
-              </SelectTrigger>
-              <SelectContent>
-                {modelOptions.length === 0 ? (
-                  <div className="px-3 py-2 text-xs text-muted-foreground">
-                    点击「刷新列表」拉取可用模型
-                  </div>
-                ) : (
-                  modelOptions.map((id) => (
-                    <SelectItem key={id} value={id}>
-                      {id}
-                    </SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="或手动输入"
-              value={model}
-              onChange={(e) => onModelChange(e.target.value)}
-              className="flex-1"
-            />
-          </div>
-        ) : (
-          <Select
-            value={model}
-            onValueChange={onModelChange}
-            disabled={!providerId}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="选择模型" />
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.length === 0 ? (
-                <SelectItem value="__empty" disabled>
-                  无可用模型
-                </SelectItem>
-              ) : (
-                modelOptions.map((id) => (
-                  <SelectItem key={id} value={id}>
-                    {id}
-                  </SelectItem>
-                ))
-              )}
-            </SelectContent>
-          </Select>
-        )}
+        <LLMModelCombobox
+          value={model}
+          options={modelOptions}
+          onChange={onModelChange}
+          disabled={!providerId}
+          fetching={modelsFetching}
+        />
       </div>
     </div>
   );
 }
+
+interface LLMModelComboboxProps {
+  value: string;
+  options: string[];
+  onChange: (model: string) => void;
+  disabled?: boolean;
+  fetching?: boolean;
+}
+
+/**
+ * Typeable model picker with custom-value escape hatch. Built on
+ * Popover + Command (cmdk) so the input filters the known list as the
+ * user types; if no exact match exists, an "use <typed>" row appears at
+ * the bottom of the list, letting the user commit a model id the
+ * upstream `/models` endpoint never returned.
+ */
+function LLMModelCombobox({
+  value,
+  options,
+  onChange,
+  disabled,
+  fetching,
+}: LLMModelComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  // We do our own filtering so we can show a "use custom" row even when
+  // the typed value doesn't match any existing option.
+  const trimmed = query.trim();
+  const filtered = useMemo(() => {
+    if (!trimmed) return options;
+    const lower = trimmed.toLowerCase();
+    return options.filter((opt) => opt.toLowerCase().includes(lower));
+  }, [options, trimmed]);
+  const hasExactMatch = options.some(
+    (opt) => opt.toLowerCase() === trimmed.toLowerCase(),
+  );
+  const showCustom = trimmed.length > 0 && !hasExactMatch;
+
+  const commit = (next: string) => {
+    onChange(next);
+    setQuery("");
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className="w-full justify-between font-normal"
+        >
+          <span
+            className={cn(
+              "truncate text-left",
+              !value && "text-[hsl(var(--subtle))]",
+            )}
+          >
+            {value || "选择或输入模型名"}
+          </span>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        // cmdk's Command primitive sizes to its content, so widen the
+        // popover to match the trigger width for visual continuity.
+        className="w-[var(--radix-popover-trigger-width)] p-0"
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="搜索或输入模型名"
+            value={query}
+            onValueChange={setQuery}
+          />
+          <CommandList>
+            {filtered.length === 0 && !showCustom ? (
+              <CommandEmpty>
+                {fetching
+                  ? "正在拉取模型列表..."
+                  : options.length === 0
+                    ? "点击「刷新列表」拉取可用模型"
+                    : "无匹配结果"}
+              </CommandEmpty>
+            ) : null}
+            {filtered.length > 0 && (
+              <CommandGroup heading={showCustom ? "可选模型" : undefined}>
+                {filtered.map((id) => (
+                  <CommandItem
+                    key={id}
+                    value={id}
+                    onSelect={() => commit(id)}
+                  >
+                    <Check
+                      className={cn(
+                        "h-4 w-4",
+                        value === id ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    <span className="truncate">{id}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            {showCustom && (
+              <CommandGroup heading="使用自定义">
+                <CommandItem
+                  value={`__custom__${trimmed}`}
+                  onSelect={() => commit(trimmed)}
+                >
+                  <Plus className="h-4 w-4 text-[hsl(var(--primary))]" />
+                  <span className="truncate">
+                    使用 &quot;{trimmed}&quot;
+                  </span>
+                </CommandItem>
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/components/shared/relative-time.tsx

@@ -1,10 +1,16 @@
-
 "use client";
 
 import { useSyncExternalStore } from "react";
 import { formatDistanceToNow, format } from "date-fns";
 import { zhCN } from "date-fns/locale";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 // Shared singleton timer — all RelativeTime instances share one tick
 let tick = 0;
 const listeners: Set<() => void> = new Set();
@@ -39,21 +45,39 @@ interface RelativeTimeProps {
   timestamp: number;
 }
 
+/**
+ * Shows a relative-time label (e.g. "2 小时前") with a styled tooltip
+ * exposing the absolute local-timezone timestamp on hover. Replaces
+ * the previous native `title` attribute, which had a 1.5 s delay and
+ * unstyled OS tooltip; the shadcn Tooltip surfaces instantly with the
+ * dashboard's own typography + shadow tokens.
+ */
 export function RelativeTime({ timestamp }: RelativeTimeProps) {
   useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
-  const relativeText = formatDistanceToNow(new Date(timestamp), {
+  const date = new Date(timestamp);
+  const relativeText = formatDistanceToNow(date, {
     addSuffix: true,
     locale: zhCN,
   });
 
-  const fullDate = format(new Date(timestamp), "yyyy-MM-dd HH:mm:ss", {
+  // `format` from date-fns uses the runtime's local timezone implicitly;
+  // showing the timezone offset tag (e.g. UTC+8) makes that explicit so
+  // users in different regions can interpret the value unambiguously.
+  const localText = format(date, "yyyy-MM-dd HH:mm:ss (OOOO)", {
     locale: zhCN,
   });
 
   return (
-    <span title={fullDate} className="cursor-default text-sm text-muted-foreground">
-      {relativeText}
-    </span>
+    <TooltipProvider delayDuration={150}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="cursor-default text-sm text-muted-foreground">
+            {relativeText}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="top">{localText}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

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

@@ -0,0 +1,47 @@
+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 border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary)/0.3)] focus:ring-offset-1",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:opacity-90",
+        secondary:
+          "border-transparent bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] hover:opacity-80",
+        destructive:
+          "border-transparent bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] hover:opacity-90",
+        outline:
+          "border-[hsl(var(--border))] text-[hsl(var(--foreground))] bg-[hsl(var(--card))]",
+        primary:
+          "border-transparent bg-[hsl(var(--primary-soft))] text-[hsl(var(--primary))]",
+        success:
+          "border-transparent bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]",
+        warning:
+          "border-transparent bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]",
+        danger:
+          "border-transparent bg-[hsl(var(--danger-soft))] text-[hsl(var(--danger))]",
+        purple:
+          "border-transparent bg-[hsl(var(--purple-soft))] text-[hsl(var(--purple))]",
+      },
+    },
+    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,58 @@
+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-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)] focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--background))] 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-sm hover:opacity-90",
+        destructive:
+          "bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] shadow-sm hover:opacity-90",
+        outline:
+          "border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--foreground))] shadow-sm hover:border-[hsl(var(--primary))] hover:text-[hsl(var(--primary))]",
+        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-8 px-3 py-1",
+        sm: "h-7 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-4",
+        icon: "h-8 w-8",
+      },
+    },
+    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 }