@tablestore/tablestore-agent-cli 0.3.1 → 0.4.0

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>
+  );
+}