@tablestore/tablestore-agent-cli 0.2.11 → 0.3.1

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   Check,
@@ -30,12 +30,21 @@ import {
 import {
   buildMemoryScope,
   hasWildcardScope,
+  scopeLabel,
   scopeToSearchParams,
 } from "@/lib/memory";
+import {
+  clearRecentMemoryScopes,
+  excludeRecentMemoryScopes,
+  isAllWildcardMemoryScope,
+  readRecentMemoryScopes,
+  rememberRecentMemoryScope,
+} from "@/lib/memory-scope-history";
 import { useAllMemoryStoreScopes } from "@/hooks/use-memory-store-scopes";
 import { cn } from "@/lib/utils";
 import { useI18n } from "@/i18n/i18n-context";
 import type { TranslateFn } from "@/i18n/i18n-context";
+import { useDataScopeKey } from "@/providers/runtime-context-provider";
 import type { MemoryScope } from "@/types/memory";
 
 const FIELD_KEYS: Array<{
@@ -59,20 +68,55 @@ const WILDCARD_SCOPE: MemoryScope = {
   agentId: "*",
   runId: "*",
 };
+const NO_SCOPES: MemoryScope[] = [];
+
+type RecentMemoryScopeStorage = Pick<
+  Storage,
+  "getItem" | "setItem" | "removeItem"
+>;
+
+const unavailableLocalStorage: RecentMemoryScopeStorage = {
+  getItem: () => null,
+  setItem: () => {},
+  removeItem: () => {},
+};
 
-function scopeLabel(scope: MemoryScope): string {
-  return [scope.appId, scope.tenantId, scope.agentId, scope.runId]
-    .map((v) => v || "—")
-    .join(" / ");
+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 {
+  const appId = (scope.appId ?? "").trim();
+  if (!appId) return null;
+
+  return {
+    appId,
+    tenantId: (scope.tenantId ?? "").trim() || undefined,
+    agentId: (scope.agentId ?? "").trim() || undefined,
+    runId: (scope.runId ?? "").trim() || undefined,
+  };
 }
 
 export function MemoryScopeBar({
@@ -89,6 +133,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,8 +146,36 @@ export function MemoryScopeBar({
   const [pickerOpen, setPickerOpen] = useState(false);
 
   const storeName = pathname.split("/").filter(Boolean)[1];
+  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);
 
+  // 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.
   useEffect(() => {
@@ -116,7 +189,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 +201,41 @@ export function MemoryScopeBar({
   const scopeQuery = useAllMemoryStoreScopes(storeName ?? "", WILDCARD_SCOPE, {
     enabled: allowScopeDiscovery,
   });
-  const knownScopes = scopeQuery.data?.items ?? [];
+  const knownScopes = scopeQuery.data?.items ?? NO_SCOPES;
+  const knownScopesWithoutRecent = useMemo(
+    () => excludeRecentMemoryScopes(knownScopes, recentScopes),
+    [knownScopes, recentScopes],
+  );
   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 +244,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 +259,8 @@ export function MemoryScopeBar({
   }
 
   function pickFromList(scope: MemoryScope) {
+    if (!applyScope(scope)) return;
     setDraft(scope);
-    applyScope(scope);
     setPickerOpen(false);
     setExpanded(false);
   }
@@ -201,13 +294,16 @@ export function MemoryScopeBar({
                 open={pickerOpen}
                 onOpenChange={setPickerOpen}
                 currentScope={currentScope}
-                knownScopes={knownScopes}
+                recentScopes={recentScopes}
+                knownScopes={knownScopesWithoutRecent}
                 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 +381,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,19 +406,23 @@ 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);
 
   return (
     <Popover open={open} onOpenChange={onOpenChange}>
@@ -336,6 +439,7 @@ function ScopePicker({
       <PopoverContent align="end" className="w-[420px] p-0">
         <Command shouldFilter>
           <CommandInput
+            ref={searchInputRef}
             placeholder={t("memory.common.searchScopePlaceholder")}
             className="text-xs"
           />
@@ -343,7 +447,9 @@ function ScopePicker({
             <CommandEmpty>
               {isLoading
                 ? t("common.loading")
-                : t("memory.common.noMatchingScope")}
+                : isError
+                  ? t("memory.scopeCombobox.loadFailed")
+                  : t("memory.common.noMatchingScope")}
             </CommandEmpty>
             <CommandGroup heading={t("memory.common.presets")}>
               <CommandItem
@@ -362,6 +468,35 @@ function ScopePicker({
                 </span>
               </CommandItem>
             </CommandGroup>
+            {recentScopes.length > 0 && (
+              <CommandGroup
+                heading={t("memory.common.recentScopes", {
+                  count: recentScopes.length,
+                })}
+              >
+                {recentScopes.map((scope) => {
+                  const label = scopeLabel(scope);
+                  const identity = memoryScopeIdentity(scope);
+                  const isSelected = isMemoryScopeSelected(scope, currentScope);
+                  return (
+                    <CommandItem
+                      key={`recent-${identity}`}
+                      value={`recent ${identity} ${label}`}
+                      onSelect={() => onPickScope(scope)}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-3.5 w-3.5",
+                          isSelected ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                      <span className="truncate font-mono">{label}</span>
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            )}
             {knownScopes.length > 0 && (
               <CommandGroup
                 heading={
@@ -374,14 +509,14 @@ function ScopePicker({
                       })
                 }
               >
-                {knownScopes.map((scope, idx) => {
+                {knownScopes.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={`known-${identity}`}
+                      value={`known ${identity} ${label}`}
                       onSelect={() => onPickScope(scope)}
                       className="text-xs"
                     >
@@ -402,25 +537,42 @@ function ScopePicker({
             <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>