@tablestore/tablestore-agent-cli 0.2.11 → 0.4.0

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

@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   Check,
   ChevronDown,
+  ChevronRight,
   ChevronUp,
   ChevronsUpDown,
   RotateCcw,
@@ -14,7 +16,6 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
   Command,
-  CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
@@ -30,13 +31,31 @@ import {
 import {
   buildMemoryScope,
   hasWildcardScope,
+  scopeLabel,
   scopeToSearchParams,
 } from "@/lib/memory";
+import {
+  clearRecentMemoryScopes,
+  isAllWildcardMemoryScope,
+  readRecentMemoryScopes,
+  rememberRecentMemoryScope,
+} from "@/lib/memory-scope-history";
 import { useAllMemoryStoreScopes } from "@/hooks/use-memory-store-scopes";
 import { cn } from "@/lib/utils";
+import { buildScopeWorkspaceHref, toExactScope } from "@/lib/scope-workspace";
 import { useI18n } from "@/i18n/i18n-context";
-import type { TranslateFn } from "@/i18n/i18n-context";
+import type { MessageKey, TranslateFn } from "@/i18n/i18n-context";
+import { useDataScopeKey } from "@/providers/runtime-context-provider";
 import type { MemoryScope } from "@/types/memory";
+import { ScopeHierarchyPicker } from "./scope-hierarchy-picker";
+import {
+  filterScopeTuples,
+  normalizeHierarchicalScope,
+  scopeBreadcrumb,
+  scopeGranularity,
+  type ScopeGranularity,
+  type ScopeLevel,
+} from "@/lib/scope-hierarchy";
 
 const FIELD_KEYS: Array<{
   key: keyof MemoryScope;
@@ -59,20 +78,62 @@ const WILDCARD_SCOPE: MemoryScope = {
   agentId: "*",
   runId: "*",
 };
+const NO_SCOPES: MemoryScope[] = [];
+
+const ALL_CHILDREN_KEY: Record<ScopeLevel, MessageKey> = {
+  app: "memory.scopeHierarchy.allApps",
+  tenant: "memory.scopeHierarchy.allTenants",
+  agent: "memory.scopeHierarchy.allAgents",
+  run: "memory.scopeHierarchy.allRuns",
+};
+
+const GRANULARITY_KEY: Record<ScopeGranularity, MessageKey> = {
+  all: "memory.scopeHierarchy.allRange",
+  app: "memory.scopeHierarchy.appRange",
+  tenant: "memory.scopeHierarchy.tenantRange",
+  agent: "memory.scopeHierarchy.agentRange",
+  run: "memory.scopeHierarchy.runRange",
+};
+
+type RecentMemoryScopeStorage = Pick<
+  Storage,
+  "getItem" | "setItem" | "removeItem"
+>;
 
-function scopeLabel(scope: MemoryScope): string {
-  return [scope.appId, scope.tenantId, scope.agentId, scope.runId]
-    .map((v) => v || "—")
-    .join(" / ");
+const unavailableLocalStorage: RecentMemoryScopeStorage = {
+  getItem: () => null,
+  setItem: () => {},
+  removeItem: () => {},
+};
+
+function getLocalStorage(): RecentMemoryScopeStorage {
+  try {
+    return window.localStorage;
+  } catch {
+    return unavailableLocalStorage;
+  }
 }
 
-function scopesEqual(a: MemoryScope, b: MemoryScope): boolean {
-  return (
-    (a.appId ?? "") === (b.appId ?? "") &&
-    (a.tenantId ?? "") === (b.tenantId ?? "") &&
-    (a.agentId ?? "") === (b.agentId ?? "") &&
-    (a.runId ?? "") === (b.runId ?? "")
-  );
+export function memoryScopeIdentity(scope: MemoryScope): string {
+  return JSON.stringify([
+    scope.appId,
+    scope.tenantId ?? "",
+    scope.agentId ?? "",
+    scope.runId ?? "",
+  ]);
+}
+
+export function isMemoryScopeSelected(
+  scope: MemoryScope,
+  currentScope: MemoryScope,
+): boolean {
+  return memoryScopeIdentity(scope) === memoryScopeIdentity(currentScope);
+}
+
+export function normalizeMemoryScopeForApply(
+  scope: MemoryScope,
+): MemoryScope | null {
+  return normalizeHierarchicalScope(scope);
 }
 
 export function MemoryScopeBar({
@@ -89,6 +150,7 @@ export function MemoryScopeBar({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const dataScopeKey = useDataScopeKey();
   const searchParamsString = searchParams.toString();
   const currentScope = useMemo(
     () => buildMemoryScope(new URLSearchParams(searchParamsString)),
@@ -101,7 +163,42 @@ export function MemoryScopeBar({
   const [pickerOpen, setPickerOpen] = useState(false);
 
   const storeName = pathname.split("/").filter(Boolean)[1];
+  const exactScope = toExactScope(currentScope);
+  const workspaceHref =
+    allowScopeDiscovery && storeName && exactScope
+      ? buildScopeWorkspaceHref(decodeURIComponent(storeName), exactScope)
+      : null;
+  const recentScopeId =
+    allowScopeDiscovery && storeName
+      ? JSON.stringify([dataScopeKey, storeName])
+      : null;
+  const [recentState, setRecentState] = useState<{
+    scopeId: string | null;
+    scopes: MemoryScope[];
+  }>({ scopeId: recentScopeId, scopes: [] });
+  const recentScopes =
+    recentState.scopeId === recentScopeId ? recentState.scopes : NO_SCOPES;
   const hasWildcard = hasWildcardScope(currentScope);
+  const currentBreadcrumb = scopeBreadcrumb(currentScope);
+  const currentGranularity = scopeGranularity(currentScope);
+
+  // Hydrate browser history separately from the online inventory. Carrying
+  // the composite identity in state prevents one render of the old runtime or
+  // store while this effect catches up after a route/context switch.
+  useEffect(() => {
+    if (!recentScopeId || !storeName) {
+      setRecentState({ scopeId: recentScopeId, scopes: [] });
+      return;
+    }
+    setRecentState({
+      scopeId: recentScopeId,
+      scopes: readRecentMemoryScopes(
+        getLocalStorage(),
+        dataScopeKey,
+        storeName,
+      ),
+    });
+  }, [dataScopeKey, recentScopeId, storeName]);
 
   // Default to wildcard when entering a memory detail page without scope
   // params so list/read views immediately show everything in the store.
@@ -116,7 +213,9 @@ export function MemoryScopeBar({
   // Sync draft from URL whenever the URL changes; typing into the
   // expanded inputs is the only thing that should diverge draft from URL.
   useEffect(() => {
-    setDraft((prev) => (scopesEqual(prev, currentScope) ? prev : currentScope));
+    setDraft((prev) =>
+      isMemoryScopeSelected(prev, currentScope) ? prev : currentScope,
+    );
     setError(null);
   }, [currentScope]);
 
@@ -126,29 +225,37 @@ export function MemoryScopeBar({
   const scopeQuery = useAllMemoryStoreScopes(storeName ?? "", WILDCARD_SCOPE, {
     enabled: allowScopeDiscovery,
   });
-  const knownScopes = scopeQuery.data?.items ?? [];
+  const knownScopes = scopeQuery.data?.items ?? NO_SCOPES;
   const knownTruncated = scopeQuery.data?.truncated ?? false;
-  const isWildcardSelected = hasWildcardScope(currentScope);
+  const isWildcardSelected = isAllWildcardMemoryScope(currentScope);
 
-  function applyScope(scope: MemoryScope) {
-    const trimmed: MemoryScope = {
-      appId: (scope.appId ?? "").trim() || "*",
-      tenantId: (scope.tenantId ?? "").trim() || undefined,
-      agentId: (scope.agentId ?? "").trim() || undefined,
-      runId: (scope.runId ?? "").trim() || undefined,
-    };
-    if (!trimmed.appId) {
+  function applyScope(scope: MemoryScope): boolean {
+    const trimmed = normalizeMemoryScopeForApply(scope);
+    if (!trimmed) {
       setError(t("memory.scopeBar.appRequired"));
-      return;
+      return false;
     }
     setError(null);
     const params = scopeToSearchParams(trimmed);
+    if (recentScopeId && storeName) {
+      setRecentState({
+        scopeId: recentScopeId,
+        scopes: rememberRecentMemoryScope(
+          getLocalStorage(),
+          dataScopeKey,
+          storeName,
+          trimmed,
+        ),
+      });
+    }
     router.replace(`${pathname}?${params.toString()}`);
+    return true;
   }
 
   function applyDraft() {
-    applyScope(draft);
-    setExpanded(false);
+    if (applyScope(draft)) {
+      setExpanded(false);
+    }
   }
 
   function resetScope() {
@@ -157,6 +264,12 @@ export function MemoryScopeBar({
     router.replace(`${pathname}?appId=*&tenantId=*&agentId=*&runId=*`);
   }
 
+  function clearRecentScopes() {
+    if (!recentScopeId || !storeName) return;
+    clearRecentMemoryScopes(getLocalStorage(), dataScopeKey, storeName);
+    setRecentState({ scopeId: recentScopeId, scopes: [] });
+  }
+
   function updateField(key: keyof MemoryScope, value: string) {
     if (key === "appId") {
       setDraft((prev) => ({ ...prev, appId: value }));
@@ -166,8 +279,8 @@ export function MemoryScopeBar({
   }
 
   function pickFromList(scope: MemoryScope) {
-    setDraft(scope);
-    applyScope(scope);
+    if (!applyScope(scope)) return;
+    setDraft(normalizeHierarchicalScope(scope) ?? scope);
     setPickerOpen(false);
     setExpanded(false);
   }
@@ -177,18 +290,40 @@ export function MemoryScopeBar({
       <CardContent className="p-4">
         {/* Collapsed: scope chips + picker + edit toggle */}
         <div className="flex items-center justify-between gap-4">
-          <div className="flex flex-wrap items-center gap-3">
+          <div className="flex min-w-0 flex-wrap items-center gap-3">
             <Settings2 className="h-4 w-4 text-muted-foreground" />
-            {FIELDS.map(({ key, label }) => (
-              <div key={key} className="flex items-center gap-1.5">
-                <span className="text-xs font-medium text-muted-foreground">
-                  {label}
-                </span>
-                <span className="rounded-md bg-[hsl(var(--muted))] px-2.5 py-1 text-xs font-mono text-[hsl(var(--foreground))]">
-                  {currentScope[key] ?? "—"}
-                </span>
-              </div>
-            ))}
+            <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
+              {currentBreadcrumb.map((item, index) => (
+                <div
+                  key={item.level}
+                  className="flex min-w-0 items-center gap-1"
+                >
+                  {index > 0 ? (
+                    <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+                  ) : null}
+                  <span
+                    className={cn(
+                      "max-w-36 truncate rounded px-1.5 py-1 text-xs",
+                      item.concrete
+                        ? "font-mono font-medium text-[hsl(var(--foreground))]"
+                        : "text-muted-foreground",
+                    )}
+                    title={
+                      item.concrete
+                        ? item.value
+                        : t(ALL_CHILDREN_KEY[item.level])
+                    }
+                  >
+                    {item.concrete
+                      ? item.value
+                      : t(ALL_CHILDREN_KEY[item.level])}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <span className="rounded-full bg-[hsl(var(--muted))] px-2 py-1 text-[10px] font-medium text-muted-foreground">
+              {t(GRANULARITY_KEY[currentGranularity])}
+            </span>
           </div>
           <div className="flex shrink-0 items-center gap-2">
             {hasWildcard && (
@@ -196,18 +331,28 @@ export function MemoryScopeBar({
                 {t("memory.scopeBar.readOnly")}
               </span>
             )}
+            {workspaceHref ? (
+              <Button asChild size="sm" variant="secondary">
+                <Link href={workspaceHref}>
+                  {t("memory.scopeBar.openWorkspace")}
+                </Link>
+              </Button>
+            ) : null}
             {allowScopeDiscovery ? (
               <ScopePicker
                 open={pickerOpen}
                 onOpenChange={setPickerOpen}
                 currentScope={currentScope}
+                recentScopes={recentScopes}
                 knownScopes={knownScopes}
                 isLoading={scopeQuery.isLoading}
+                isError={scopeQuery.isError}
                 isFetching={scopeQuery.isFetching}
                 truncated={knownTruncated}
                 isWildcardSelected={isWildcardSelected}
                 onPickWildcard={() => pickFromList(WILDCARD_SCOPE)}
                 onPickScope={pickFromList}
+                onClearRecent={clearRecentScopes}
                 onRefresh={() => scopeQuery.refetch()}
                 t={t}
               />
@@ -285,13 +430,16 @@ interface ScopePickerProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   currentScope: MemoryScope;
+  recentScopes: MemoryScope[];
   knownScopes: MemoryScope[];
   isLoading: boolean;
+  isError: boolean;
   isFetching: boolean;
   truncated: boolean;
   isWildcardSelected: boolean;
   onPickWildcard: () => void;
   onPickScope: (scope: MemoryScope) => void;
+  onClearRecent: () => void;
   onRefresh: () => void;
   t: TranslateFn;
 }
@@ -307,22 +455,36 @@ function ScopePicker({
   open,
   onOpenChange,
   currentScope,
+  recentScopes,
   knownScopes,
   isLoading,
+  isError,
   isFetching,
   truncated,
   isWildcardSelected,
   onPickWildcard,
   onPickScope,
+  onClearRecent,
   onRefresh,
   t,
 }: ScopePickerProps) {
   const triggerLabel = isWildcardSelected
     ? t("memory.common.allData")
     : scopeLabel(currentScope);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const [search, setSearch] = useState("");
+  const visibleRecentScopes = useMemo(
+    () => filterScopeTuples(recentScopes, search),
+    [recentScopes, search],
+  );
+
+  function handleOpenChange(next: boolean) {
+    onOpenChange(next);
+    if (!next) setSearch("");
+  }
 
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
+    <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
@@ -334,17 +496,15 @@ function ScopePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent align="end" className="w-[420px] p-0">
-        <Command shouldFilter>
+        <Command shouldFilter={false}>
           <CommandInput
+            ref={searchInputRef}
             placeholder={t("memory.common.searchScopePlaceholder")}
             className="text-xs"
+            value={search}
+            onValueChange={setSearch}
           />
           <CommandList className="max-h-[360px]">
-            <CommandEmpty>
-              {isLoading
-                ? t("common.loading")
-                : t("memory.common.noMatchingScope")}
-            </CommandEmpty>
             <CommandGroup heading={t("memory.common.presets")}>
               <CommandItem
                 value="* wildcard 全部数据"
@@ -362,26 +522,20 @@ function ScopePicker({
                 </span>
               </CommandItem>
             </CommandGroup>
-            {knownScopes.length > 0 && (
+            {visibleRecentScopes.length > 0 && (
               <CommandGroup
-                heading={
-                  truncated
-                    ? t("memory.common.knownScopesTruncated", {
-                        count: knownScopes.length,
-                      })
-                    : t("memory.common.knownScopes", {
-                        count: knownScopes.length,
-                      })
-                }
+                heading={t("memory.common.recentScopes", {
+                  count: visibleRecentScopes.length,
+                })}
               >
-                {knownScopes.map((scope, idx) => {
+                {visibleRecentScopes.map((scope) => {
                   const label = scopeLabel(scope);
-                  const isSelected =
-                    !isWildcardSelected && scopesEqual(scope, currentScope);
+                  const identity = memoryScopeIdentity(scope);
+                  const isSelected = isMemoryScopeSelected(scope, currentScope);
                   return (
                     <CommandItem
-                      key={`${label}-${idx}`}
-                      value={label}
+                      key={`recent-${identity}`}
+                      value={`recent ${identity} ${label}`}
                       onSelect={() => onPickScope(scope)}
                       className="text-xs"
                     >
@@ -391,36 +545,66 @@ function ScopePicker({
                           isSelected ? "opacity-100" : "opacity-0",
                         )}
                       />
-                      <span className="font-mono truncate">{label}</span>
+                      <span className="truncate font-mono">{label}</span>
                     </CommandItem>
                   );
                 })}
               </CommandGroup>
             )}
+            <ScopeHierarchyPicker
+              scopes={knownScopes}
+              currentScope={currentScope}
+              search={search}
+              onSearchChange={setSearch}
+              onApply={onPickScope}
+              loading={isLoading}
+              error={isError}
+              truncated={truncated}
+              onRetry={onRefresh}
+              allowPartial
+              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>
               {isLoading
                 ? t("memory.common.querying")
-                : truncated
-                  ? t("memory.common.scopeCountTruncated", {
-                      count: knownScopes.length,
-                    })
-                  : t("memory.common.scopeCount", {
-                      count: knownScopes.length,
-                    })}
+                : isError
+                  ? t("memory.scopeCombobox.loadFailed")
+                  : truncated
+                    ? t("memory.common.scopeCountTruncated", {
+                        count: knownScopes.length,
+                      })
+                    : t("memory.common.scopeCount", {
+                        count: knownScopes.length,
+                      })}
             </span>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
-                onRefresh();
-              }}
-              disabled={isFetching}
-              className="rounded px-1.5 py-0.5 hover:bg-[hsl(var(--accent))] disabled:opacity-50"
-            >
-              {t("common.refresh")}
-            </button>
+            <div className="flex items-center gap-1">
+              {recentScopes.length > 0 && (
+                <button
+                  type="button"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    searchInputRef.current?.focus();
+                    onClearRecent();
+                  }}
+                  className="h-6 rounded px-1.5 py-0.5 hover:bg-[hsl(var(--accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)]"
+                >
+                  {t("memory.common.clearRecentScopes")}
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.preventDefault();
+                  onRefresh();
+                }}
+                disabled={isFetching}
+                className="h-6 rounded px-1.5 py-0.5 hover:bg-[hsl(var(--accent))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)] disabled:opacity-50"
+              >
+                {t("common.refresh")}
+              </button>
+            </div>
           </div>
         </Command>
       </PopoverContent>