@tablestore/tablestore-agent-cli 0.2.11 → 0.4.0

package/dist/dashboard-runtime/dashboard/src/components/memory/scope-combobox.tsx

@@ -1,26 +1,22 @@
 "use client";
 
-import { useState } from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "react";
+import { ChevronsUpDown } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
+import { Command, CommandInput, CommandList } from "@/components/ui/command";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { useAllMemoryStoreScopes } from "@/hooks/use-memory-store-scopes";
+import { scopeLabel } from "@/lib/memory";
 import { cn } from "@/lib/utils";
-import { useI18n } from "@/i18n/i18n-context";
+import { useI18n, type MessageKey } from "@/i18n/i18n-context";
 import type { MemoryScope } from "@/types/memory";
+import { ScopeHierarchyPicker } from "./scope-hierarchy-picker";
+import type { ScopeLevel } from "@/lib/scope-hierarchy";
 
 const WILDCARD: MemoryScope = {
   appId: "*",
@@ -29,16 +25,77 @@ const WILDCARD: MemoryScope = {
   runId: "*",
 };
 
-function scopeLabel(scope: MemoryScope): string {
-  return [scope.appId, scope.tenantId, scope.agentId, scope.runId]
-    .map((v) => v || "—")
-    .join(" / ");
+/** Stable identity so the memoized filter isn't invalidated every render. */
+const NO_SCOPES: MemoryScope[] = [];
+
+/** How many rows to render at once, and how many more each "show more" adds. */
+export const SCOPE_WINDOW_SIZE = 100;
+
+/** Distance from the bottom (px) at which scrolling grows the window. */
+const NEAR_BOTTOM_PX = 64;
+
+/**
+ * Case-insensitive substring match over the scope label, where every
+ * whitespace-separated term must hit somewhere — so `ots claude` narrows
+ * across two dimensions without caring about their order.
+ *
+ * We filter here rather than letting cmdk do it because cmdk's default is a
+ * fuzzy subsequence score, and run ids are uuids: almost any short query
+ * finds scattered hex characters in an unrelated tuple, so the "matches"
+ * drown out the real ones. Owning the filter also keeps DOM order equal to
+ * JSX order, which is what lets the window below stay correct.
+ */
+export function filterScopes(
+  scopes: readonly MemoryScope[],
+  query: string,
+): MemoryScope[] {
+  const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (terms.length === 0) return [...scopes];
+  return scopes.filter((scope) => {
+    const label = scopeLabel(scope).toLowerCase();
+    return terms.every((term) => label.includes(term));
+  });
+}
+
+export function isNearListBottom(el: {
+  scrollTop: number;
+  clientHeight: number;
+  scrollHeight: number;
+}): boolean {
+  return el.scrollHeight - el.scrollTop - el.clientHeight <= NEAR_BOTTOM_PX;
+}
+
+/**
+ * Which message the status bar shows. Windowing and server-side truncation are
+ * independent and, on a big enough store, simultaneous — truncation in fact
+ * implies windowing — so they get a combined message rather than an either/or
+ * that would hide "· 已截断" in the one case it matters.
+ */
+export function scopeStatusKey(state: {
+  loading: boolean;
+  error: boolean;
+  hasMore: boolean;
+  truncated: boolean;
+}): MessageKey {
+  if (state.loading) return "memory.common.querying";
+  if (state.error) return "memory.scopeCombobox.loadFailed";
+  if (state.hasMore) {
+    return state.truncated
+      ? "memory.scopeCombobox.windowCountTruncated"
+      : "memory.scopeCombobox.windowCount";
+  }
+  return state.truncated
+    ? "memory.common.scopeCountTruncated"
+    : "memory.common.scopeCount";
 }
 
 /**
  * 通过 ListScopes 拉取某记忆库里真实存在的 scope 元组，供下拉选择。选中后回调
  * `onPick(完整 scope)`，由上层决定填哪些字段。对话配置的记忆 scope、Dream 任务
  * 的 scope 输入共用它，避免用户手动逐字段敲。
+ *
+ * scope 多起来时的三件事：列表本身要能滚（见下方 `modal` 注释）、一次只渲染
+ * 一屏窗口（滚到底或点「显示更多」再追加），以及搜索由本组件负责而不是 cmdk。
  */
 export function ScopeCombobox({
   memoryStoreName,
@@ -46,23 +103,59 @@ export function ScopeCombobox({
   disabled,
   placeholder,
   className,
+  allowPartial = false,
+  currentScope = WILDCARD,
+  maxLevel = "run",
 }: {
   memoryStoreName: string | undefined;
   onPick: (scope: MemoryScope) => void;
   disabled?: boolean;
   placeholder?: string;
   className?: string;
+  allowPartial?: boolean;
+  currentScope?: MemoryScope;
+  maxLevel?: ScopeLevel;
 }) {
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
-  const query = useAllMemoryStoreScopes(memoryStoreName ?? "", WILDCARD);
-  const scopes = query.data?.items ?? [];
+  const [search, setSearch] = useState("");
+  const [windowSize, setWindowSize] = useState(SCOPE_WINDOW_SIZE);
+
+  // 只在弹层打开时才查。Dream 创建对话框最多同时挂 20 个 ScopeCombobox，
+  // 抽屉/对话框一打开就全量拉 scope 是白花的往返。
+  const query = useAllMemoryStoreScopes(memoryStoreName ?? "", WILDCARD, {
+    enabled: open,
+  });
+  const scopes = query.data?.items ?? NO_SCOPES;
   const truncated = query.data?.truncated ?? false;
   const resolvedPlaceholder =
     placeholder ?? t("memory.scopeCombobox.defaultPlaceholder");
 
+  const matches = useMemo(() => filterScopes(scopes, search), [scopes, search]);
+  const shownCount = Math.min(matches.length, windowSize);
+  const hasMore = shownCount < matches.length;
+
+  const showMore = () => setWindowSize((n) => n + SCOPE_WINDOW_SIZE);
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setSearch("");
+      setWindowSize(SCOPE_WINDOW_SIZE);
+    }
+  };
+
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    // `modal` is load-bearing, not decoration. Both call sites live inside a
+    // Radix Dialog (the chat config Sheet / the Dream create dialog), whose
+    // overlay wraps everything in <RemoveScroll shards={[content]}> with no
+    // `noIsolation`. That cancels wheel events on any portalled node the
+    // dialog doesn't own — and PopoverContent portals to document.body, so
+    // the list silently refused to scroll and only the first ~10 rows were
+    // ever reachable. `modal` gives the popover its own scroll lock, which
+    // sits on top of react-remove-scroll's lockStack and hands scrolling
+    // back. See components/ui/__tests__/popover-in-dialog.test.ts.
+    <Popover open={open} onOpenChange={handleOpenChange} modal>
       <PopoverTrigger asChild>
         <Button
           type="button"
@@ -76,70 +169,85 @@ export function ScopeCombobox({
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-[420px] p-0">
-        <Command shouldFilter>
+        <Command shouldFilter={false}>
           <CommandInput
             placeholder={t("memory.common.searchScopePlaceholder")}
             className="text-xs"
+            value={search}
+            onValueChange={(v) => {
+              setSearch(v);
+              setWindowSize(SCOPE_WINDOW_SIZE);
+            }}
           />
-          <CommandList className="max-h-[320px]">
-            <CommandEmpty>
-              {query.isLoading
-                ? t("common.loading")
-                : t("memory.scopeCombobox.empty")}
-            </CommandEmpty>
-            {scopes.length > 0 && (
-              <CommandGroup
-                heading={
-                  truncated
-                    ? t("memory.common.knownScopesTruncated", {
-                        count: scopes.length,
-                      })
-                    : t("memory.common.knownScopes", { count: scopes.length })
-                }
-              >
-                {scopes.map((scope, idx) => {
-                  const label = scopeLabel(scope);
-                  return (
-                    <CommandItem
-                      key={`${label}-${idx}`}
-                      value={label}
-                      onSelect={() => {
-                        onPick(scope);
-                        setOpen(false);
-                      }}
-                      className="text-xs"
-                    >
-                      <Check className="mr-2 h-3.5 w-3.5 opacity-0" />
-                      <span className="min-w-0 truncate font-mono">
-                        {label}
-                      </span>
-                    </CommandItem>
-                  );
-                })}
-              </CommandGroup>
-            )}
+          <CommandList
+            className="max-h-[min(52vh,420px)]"
+            onScroll={(e) => {
+              if (hasMore && isNearListBottom(e.currentTarget)) showMore();
+            }}
+          >
+            <ScopeHierarchyPicker
+              scopes={matches}
+              currentScope={currentScope}
+              search={search}
+              onSearchChange={setSearch}
+              onApply={(scope) => {
+                onPick(scope);
+                handleOpenChange(false);
+              }}
+              loading={query.isLoading}
+              error={query.isError}
+              truncated={truncated}
+              onRetry={() => query.refetch()}
+              allowPartial={allowPartial}
+              optionLimit={windowSize}
+              maxLevel={maxLevel}
+              t={t}
+            />
           </CommandList>
-          <div className="flex items-center justify-between border-t border-[hsl(var(--border-light))] px-2 py-1.5 text-[10px] text-muted-foreground">
-            <span>
-              {query.isLoading
-                ? t("memory.common.querying")
-                : truncated
-                  ? t("memory.common.scopeCountTruncated", {
-                      count: scopes.length,
-                    })
-                  : t("memory.common.scopeCount", { count: scopes.length })}
+          {/* 状态条留在 CommandList 之外：它不属于 [cmdk-list]，因此永远不会
+              被搜索过滤掉或被 cmdk 的排序搬走。 */}
+          <div className="flex items-center justify-between gap-2 border-t border-[hsl(var(--border-light))] px-2 py-1.5 text-[10px] text-muted-foreground">
+            <span className="truncate">
+              {t(
+                scopeStatusKey({
+                  loading: query.isLoading,
+                  error: query.isError,
+                  hasMore,
+                  truncated,
+                }),
+                // 各 key 只会用到其中一部分占位符，多余的会被 interpolate 忽略。
+                {
+                  shown: shownCount,
+                  total: matches.length,
+                  count: matches.length,
+                },
+              )}
+            </span>
+            <span className="flex shrink-0 items-center gap-1">
+              {hasMore ? (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    showMore();
+                  }}
+                  className="rounded px-1.5 py-0.5 font-medium text-[hsl(var(--primary))] hover:bg-[hsl(var(--accent))]"
+                >
+                  {t("memory.scopeCombobox.showMore")}
+                </button>
+              ) : null}
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  query.refetch();
+                }}
+                disabled={query.isFetching}
+                className="rounded px-1.5 py-0.5 hover:bg-[hsl(var(--accent))] disabled:opacity-50"
+              >
+                {t("common.refresh")}
+              </button>
             </span>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
-                query.refetch();
-              }}
-              disabled={query.isFetching}
-              className="rounded px-1.5 py-0.5 hover:bg-[hsl(var(--accent))] disabled:opacity-50"
-            >
-              {t("common.refresh")}
-            </button>
           </div>
         </Command>
       </PopoverContent>

package/dist/dashboard-runtime/dashboard/src/components/memory/scope-hierarchy-picker.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { MessageKey, TranslateFn } from "@/i18n/i18n-context";
+import { scopeLabel } from "@/lib/memory";
+import {
+  filterScopeTuples,
+  normalizeHierarchicalScope,
+  scopeAtLevel,
+  scopeBreadcrumb,
+  scopeChildren,
+  scopeGranularity,
+  scopeWithSelection,
+  SCOPE_LEVELS,
+  SCOPE_FIELD_BY_LEVEL,
+  type ScopeGranularity,
+  type ScopeLevel,
+} from "@/lib/scope-hierarchy";
+import type { MemoryScope } from "@/types/memory";
+import { cn } from "@/lib/utils";
+
+export interface ScopeHierarchyPickerProps {
+  scopes: readonly MemoryScope[];
+  currentScope: MemoryScope;
+  search: string;
+  onSearchChange: (value: string) => void;
+  onApply: (scope: MemoryScope) => void;
+  loading?: boolean;
+  error?: boolean;
+  truncated?: boolean;
+  onRetry?: () => void;
+  allowPartial?: boolean;
+  optionLimit?: number;
+  maxLevel?: ScopeLevel;
+  t: TranslateFn;
+}
+
+const ALL_SCOPE: MemoryScope = {
+  appId: "*",
+  tenantId: "*",
+  agentId: "*",
+  runId: "*",
+};
+
+const CHOOSE_KEY: Record<ScopeLevel, MessageKey> = {
+  app: "memory.scopeHierarchy.chooseApp",
+  tenant: "memory.scopeHierarchy.chooseTenant",
+  agent: "memory.scopeHierarchy.chooseAgent",
+  run: "memory.scopeHierarchy.chooseRun",
+};
+
+const ALL_CHILDREN_KEY: Record<ScopeLevel, MessageKey> = {
+  app: "memory.scopeHierarchy.allApps",
+  tenant: "memory.scopeHierarchy.allTenants",
+  agent: "memory.scopeHierarchy.allAgents",
+  run: "memory.scopeHierarchy.allRuns",
+};
+
+const RANGE_KEY: Record<ScopeGranularity, MessageKey> = {
+  all: "memory.scopeHierarchy.allRange",
+  app: "memory.scopeHierarchy.appRange",
+  tenant: "memory.scopeHierarchy.tenantRange",
+  agent: "memory.scopeHierarchy.agentRange",
+  run: "memory.scopeHierarchy.runRange",
+};
+
+function identity(scope: MemoryScope): string {
+  return JSON.stringify([
+    scope.appId,
+    scope.tenantId,
+    scope.agentId,
+    scope.runId,
+  ]);
+}
+
+export function ScopeHierarchyPicker({
+  scopes,
+  currentScope,
+  search,
+  onApply,
+  loading = false,
+  error = false,
+  truncated = false,
+  onRetry,
+  allowPartial = false,
+  optionLimit,
+  maxLevel = "run",
+  t,
+}: ScopeHierarchyPickerProps) {
+  const normalizedCurrent =
+    normalizeHierarchicalScope(currentScope) ?? ALL_SCOPE;
+  const [draft, setDraft] = useState<MemoryScope>(normalizedCurrent);
+
+  useEffect(() => {
+    setDraft(normalizeHierarchicalScope(currentScope) ?? ALL_SCOPE);
+  }, [currentScope]);
+
+  const granularity = scopeGranularity(draft);
+  const breadcrumb = scopeBreadcrumb(draft);
+  const children = useMemo(() => {
+    if (
+      granularity !== "all" &&
+      SCOPE_LEVELS.indexOf(granularity) >= SCOPE_LEVELS.indexOf(maxLevel)
+    ) {
+      return [];
+    }
+    const items = scopeChildren(scopes, draft);
+    return optionLimit === undefined ? items : items.slice(0, optionLimit);
+  }, [draft, granularity, maxLevel, optionLimit, scopes]);
+  const searchResults = useMemo(() => {
+    const seen = new Set<string>();
+    const matches = filterScopeTuples(scopes, search).filter((scope) => {
+      const key = identity(scope);
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+    const limited =
+      optionLimit === undefined ? matches : matches.slice(0, optionLimit);
+    return limited.map((scope) => scopeAtLevel(scope, maxLevel));
+  }, [maxLevel, optionLimit, scopes, search]);
+  const isSearching = search.trim().length > 0;
+
+  function selectLevel(level: ScopeLevel) {
+    setDraft(scopeAtLevel(draft, level));
+  }
+
+  function selectChild(level: ScopeLevel, value: string) {
+    const next = scopeWithSelection(draft, SCOPE_FIELD_BY_LEVEL[level], value);
+    setDraft(next);
+    if (level === maxLevel) onApply(next);
+  }
+
+  return (
+    <div className="space-y-2 p-2">
+      <nav
+        aria-label={t("memory.scopeHierarchy.breadcrumb")}
+        className="flex min-w-0 items-center gap-1 overflow-x-auto text-xs"
+      >
+        <button
+          type="button"
+          aria-current={granularity === "all" ? "step" : undefined}
+          onClick={() => setDraft({ ...ALL_SCOPE })}
+          className="shrink-0 rounded px-1.5 py-1 text-muted-foreground hover:bg-[hsl(var(--accent))]"
+        >
+          {t("memory.common.allData")}
+        </button>
+        {breadcrumb.map((item) => (
+          <span key={item.level} className="flex min-w-0 items-center gap-1">
+            <span aria-hidden="true" className="text-muted-foreground">
+              /
+            </span>
+            <button
+              type="button"
+              aria-current={item.level === granularity ? "step" : undefined}
+              onClick={() => selectLevel(item.level)}
+              disabled={!item.concrete}
+              className={cn(
+                "max-w-32 truncate rounded px-1.5 py-1",
+                item.concrete
+                  ? "font-mono hover:bg-[hsl(var(--accent))]"
+                  : "cursor-default text-muted-foreground",
+              )}
+              title={
+                item.concrete ? item.value : t(ALL_CHILDREN_KEY[item.level])
+              }
+            >
+              {item.concrete ? item.value : t(ALL_CHILDREN_KEY[item.level])}
+            </button>
+          </span>
+        ))}
+      </nav>
+
+      {loading ? (
+        <p className="px-2 py-3 text-xs text-muted-foreground">
+          {t("common.loading")}
+        </p>
+      ) : error ? (
+        <div className="flex items-center justify-between gap-2 px-2 py-3 text-xs text-muted-foreground">
+          <span>{t("memory.scopeCombobox.loadFailed")}</span>
+          {onRetry ? (
+            <Button type="button" size="sm" variant="ghost" onClick={onRetry}>
+              {t("common.refresh")}
+            </Button>
+          ) : null}
+        </div>
+      ) : isSearching ? (
+        <div className="space-y-1" role="listbox">
+          {searchResults.length > 0 ? (
+            searchResults.map((scope) => {
+              const normalized = normalizeHierarchicalScope(scope);
+              if (!normalized) return null;
+              const label = scopeLabel(normalized);
+              return (
+                <button
+                  key={identity(normalized)}
+                  type="button"
+                  role="option"
+                  aria-label={label}
+                  aria-selected={
+                    identity(normalized) ===
+                    identity(scopeAtLevel(draft, maxLevel))
+                  }
+                  onClick={() => onApply(normalized)}
+                  className="block w-full truncate rounded px-2 py-1.5 text-left font-mono text-xs hover:bg-[hsl(var(--accent))]"
+                >
+                  {label}
+                </button>
+              );
+            })
+          ) : (
+            <p className="px-2 py-3 text-xs text-muted-foreground">
+              {t("memory.common.noMatchingScope")}
+            </p>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-1" role="listbox">
+          {children.length > 0 ? (
+            children.map((child) => (
+              <button
+                key={`${child.level}:${child.value}`}
+                type="button"
+                role="option"
+                aria-label={t(CHOOSE_KEY[child.level], { value: child.value })}
+                aria-selected={
+                  draft[SCOPE_FIELD_BY_LEVEL[child.level]] === child.value
+                }
+                onClick={() => selectChild(child.level, child.value)}
+                className="block w-full truncate rounded px-2 py-1.5 text-left font-mono text-xs hover:bg-[hsl(var(--accent))]"
+              >
+                {child.value}
+              </button>
+            ))
+          ) : granularity === maxLevel ? (
+            <p className="px-2 py-3 text-xs text-muted-foreground">
+              {t("memory.scopeHierarchy.exactRunSelected")}
+            </p>
+          ) : (
+            <p className="px-2 py-3 text-xs text-muted-foreground">
+              {t("memory.scopeCombobox.empty")}
+            </p>
+          )}
+        </div>
+      )}
+
+      {allowPartial && !isSearching ? (
+        <Button
+          type="button"
+          size="sm"
+          variant="secondary"
+          className="w-full"
+          onClick={() => onApply(scopeAtLevel(draft, granularity))}
+        >
+          {granularity === "all"
+            ? t("memory.scopeHierarchy.applyAll")
+            : t("memory.scopeHierarchy.applyCurrentRange", {
+                range: t(RANGE_KEY[granularity]),
+              })}
+        </Button>
+      ) : null}
+
+      {truncated ? (
+        <p className="border-t px-2 pt-2 text-[10px] text-amber-700 dark:text-amber-300">
+          {t("memory.scopeHierarchy.inventoryIncomplete", {
+            count: scopes.length,
+          })}
+        </p>
+      ) : null}
+    </div>
+  );
+}