@tablestore/tablestore-agent-cli 0.1.8 → 0.2.0

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/[store]/requests/page.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import dynamic from "next/dynamic";
+import { AlertTriangle, Calendar, Clock, Loader2, Search } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import { buildMemoryScope } from "@/lib/memory";
+import { listMemoryRequests } from "@/services/memory";
+import type { MemoryRequestLog } from "@/types/memory";
+import { RefreshButton } from "@/components/shared/refresh-button";
+
+import {
+  DEFAULT_WINDOW_MIN,
+  MAX_RECORDS,
+  PAGE_LIMIT,
+  TABLE_PAGE_SIZE,
+  buildHistogram,
+  executeQuery,
+  type HistBucket,
+} from "./_helpers";
+import { RequestDetailDialog } from "./request-detail-dialog";
+import { RequestsSearchBar } from "./requests-search-bar";
+import { RequestsTable } from "./requests-table";
+
+// recharts is heavy (~200 KB gzipped); load it on demand so it only
+// lands in the browser bundle once the user navigates to this page.
+const RequestsHistogramChart = dynamic(
+  () => import("@/components/memory/requests-histogram-chart"),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex h-[180px] items-center justify-center text-xs text-muted-foreground">
+        加载图表…
+      </div>
+    ),
+  },
+);
+
+/* ------------------------------------------------------------------ */
+/*  Page                                                              */
+/* ------------------------------------------------------------------ */
+
+export default function MemoryRequestsPage() {
+  const params = useParams<{ store: string }>();
+  const searchParams = useSearchParams();
+  const memoryStoreName = decodeURIComponent(params.store);
+  const scope = useMemo(() => buildMemoryScope(searchParams), [searchParams.toString()]);
+
+  /* ---- Time range state ---- */
+  const [windowMinutes, setWindowMinutes] = useState(DEFAULT_WINDOW_MIN);
+  const [customMin, setCustomMin] = useState("");
+  const [customMax, setCustomMax] = useState("");
+  const [useCustomRange, setUseCustomRange] = useState(false);
+
+  const timeRange = useMemo(() => {
+    if (useCustomRange && customMin) {
+      const min = new Date(customMin).getTime();
+      const max = customMax ? new Date(customMax).getTime() : Date.now();
+      return { minTs: new Date(min).toISOString(), maxTs: new Date(max).toISOString(), minMs: min, maxMs: max };
+    }
+    const now = Date.now();
+    const min = now - windowMinutes * 60_000;
+    return { minTs: new Date(min).toISOString(), maxTs: new Date(now).toISOString(), minMs: min, maxMs: now };
+  }, [windowMinutes, customMin, customMax, useCustomRange]);
+
+  /* ---- Bulk fetch state ---- */
+  const [allRecords, setAllRecords] = useState<MemoryRequestLog[]>([]);
+  const [fetchStatus, setFetchStatus] = useState<"idle" | "loading" | "done" | "error">("idle");
+  const [fetchProgress, setFetchProgress] = useState(0);
+  const [truncated, setTruncated] = useState(false);
+  const abortRef = useRef(false);
+  const fetchIdRef = useRef(0);
+
+  const fetchAll = useCallback(async () => {
+    if (!scope.appId) return;
+    const id = ++fetchIdRef.current;
+    abortRef.current = false;
+    setFetchStatus("loading");
+    setFetchProgress(0);
+    setAllRecords([]);
+    setTruncated(false);
+
+    const accumulated: MemoryRequestLog[] = [];
+    let nextToken: string | undefined;
+
+    try {
+      while (true) {
+        if (abortRef.current || fetchIdRef.current !== id) return;
+        const res = await listMemoryRequests(memoryStoreName, scope, {
+          limit: PAGE_LIMIT,
+          nextToken,
+          minTimestamp: timeRange.minTs,
+          maxTimestamp: timeRange.maxTs,
+        });
+        const items = res.items ?? [];
+        accumulated.push(...items);
+        setFetchProgress(accumulated.length);
+
+        if (accumulated.length >= MAX_RECORDS) {
+          setTruncated(true);
+          break;
+        }
+        nextToken = res.nextToken;
+        if (!nextToken) break;
+      }
+    } catch {
+      if (fetchIdRef.current === id) setFetchStatus("error");
+      return;
+    }
+
+    if (fetchIdRef.current === id) {
+      setAllRecords(accumulated);
+      setFetchStatus("done");
+    }
+  }, [memoryStoreName, scope, timeRange.minTs, timeRange.maxTs]);
+
+  // Auto-fetch on mount and when time range changes
+  useEffect(() => {
+    fetchAll();
+    return () => { abortRef.current = true; };
+  }, [fetchAll]);
+
+  /* ---- Query state ---- */
+  const [query, setQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<"all" | "success" | "error">("all");
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedQuery(query), 200);
+    return () => clearTimeout(t);
+  }, [query]);
+
+  const filtered = useMemo(() => {
+    let result = executeQuery(allRecords, debouncedQuery);
+    if (statusFilter === "success") result = result.filter(r => r.responseStatus != null && r.responseStatus < 400);
+    if (statusFilter === "error") result = result.filter(r => r.responseStatus != null && r.responseStatus >= 400);
+    return result;
+  }, [allRecords, debouncedQuery, statusFilter]);
+
+  /* ---- Sorted for table display (newest first) ---- */
+  const sortedForTable = useMemo(() => {
+    return [...filtered].sort((a, b) => {
+      const ta = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+      const tb = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+      return tb - ta;
+    });
+  }, [filtered]);
+
+  /* ---- Histogram ---- */
+  const histogram = useMemo(
+    () => buildHistogram(filtered, timeRange.minMs, timeRange.maxMs),
+    [filtered, timeRange.minMs, timeRange.maxMs],
+  );
+
+  const handleBarClick = useCallback((data: HistBucket | undefined) => {
+    if (!data) return;
+    // Format to datetime-local input value: "YYYY-MM-DDThh:mm:ss"
+    const toLocal = (ms: number) => {
+      const d = new Date(ms);
+      const pad = (n: number) => String(n).padStart(2, "0");
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+    };
+    setCustomMin(toLocal(data.time));
+    setCustomMax(toLocal(data.endTime));
+    setUseCustomRange(true);
+  }, []);
+
+  const [tablePage, setTablePage] = useState(0);
+  useEffect(() => setTablePage(0), [debouncedQuery, allRecords, statusFilter]);
+  const tableStart = tablePage * TABLE_PAGE_SIZE;
+  const tableSlice = sortedForTable.slice(tableStart, tableStart + TABLE_PAGE_SIZE);
+  const totalPages = Math.ceil(sortedForTable.length / TABLE_PAGE_SIZE);
+
+  /* ---- Detail dialog ---- */
+  const [selectedReq, setSelectedReq] = useState<MemoryRequestLog | null>(null);
+
+  /* ---- Helpers ---- */
+  const hasAppId = !!scope.appId;
+
+  if (!hasAppId) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-xl border border-dashed py-16 text-muted-foreground">
+        <Search className="mb-2 h-5 w-5" />
+        <span className="text-sm">请先在上方 Scope 区域填写 appId</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* ---- Time range + controls ---- */}
+      <div className="flex flex-wrap items-end gap-3 rounded-xl border bg-muted/20 px-5 py-3">
+        <Clock className="h-4 w-4 shrink-0 text-muted-foreground mt-1" />
+
+        {!useCustomRange ? (
+          <div className="flex items-end gap-2">
+            <div className="space-y-1">
+              <Label className="text-[11px] text-muted-foreground">时间窗口</Label>
+              <select
+                className="h-8 rounded-md border bg-background px-2 text-sm"
+                value={windowMinutes}
+                onChange={(e) => setWindowMinutes(Number(e.target.value))}
+              >
+                <option value={1}>最近 1 分钟</option>
+                <option value={5}>最近 5 分钟</option>
+                <option value={15}>最近 15 分钟</option>
+                <option value={30}>最近 30 分钟</option>
+                <option value={60}>最近 1 小时</option>
+                <option value={360}>最近 6 小时</option>
+                <option value={1440}>最近 24 小时</option>
+              </select>
+            </div>
+            <Button variant="link" size="sm" className="text-xs h-8" onClick={() => setUseCustomRange(true)}>
+              <Calendar className="mr-1 h-3 w-3" /> 自定义范围
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-end gap-2">
+            <div className="space-y-1">
+              <Label className="text-[11px] text-muted-foreground">起始时间</Label>
+              <Input type="datetime-local" step="1" value={customMin} onChange={(e) => setCustomMin(e.target.value)} className="h-8 w-[210px] text-xs" />
+            </div>
+            <span className="pb-1.5 text-xs text-muted-foreground">—</span>
+            <div className="space-y-1">
+              <Label className="text-[11px] text-muted-foreground">结束时间</Label>
+              <Input type="datetime-local" step="1" value={customMax} onChange={(e) => setCustomMax(e.target.value)} className="h-8 w-[210px] text-xs" />
+            </div>
+            <Button variant="link" size="sm" className="text-xs h-8" onClick={() => setUseCustomRange(false)}>
+              快速选择
+            </Button>
+          </div>
+        )}
+
+        <div className="ml-auto flex items-center gap-2">
+          {fetchStatus === "loading" && (
+            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              拉取中 {fetchProgress} 条…
+            </span>
+          )}
+          {fetchStatus === "done" && (
+            <span className="text-xs text-muted-foreground">
+              共 {allRecords.length} 条{truncated ? <span className="ml-1 text-amber-600">（数据不完整，超过 {MAX_RECORDS.toLocaleString()} 条上限）</span> : ""}
+            </span>
+          )}
+          <RefreshButton
+            loading={fetchStatus === "loading"}
+            onClick={fetchAll}
+            size="sm"
+            label="刷新"
+            className="h-8"
+          />
+        </div>
+      </div>
+
+      {/* ---- Truncation warning ---- */}
+      {truncated && (
+        <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
+          <AlertTriangle className="h-4 w-4 shrink-0" />
+          数据不完整：该时间范围内请求数超过 {MAX_RECORDS.toLocaleString()} 条上限，仅展示前 {MAX_RECORDS.toLocaleString()} 条。请缩小时间范围以获取完整数据。
+        </div>
+      )}
+
+      {/* ---- Histogram ---- */}
+      {fetchStatus === "done" && allRecords.length > 0 && (
+        <div className="rounded-xl border bg-background p-4">
+          <p className="mb-3 text-xs font-medium text-muted-foreground">
+            请求分布{debouncedQuery ? "（已过滤）" : ""}
+          </p>
+          <RequestsHistogramChart data={histogram} onBarClick={handleBarClick} />
+        </div>
+      )}
+
+      {/* ---- Loading skeleton ---- */}
+      {fetchStatus === "loading" && allRecords.length === 0 && (
+        <div className="space-y-3 rounded-xl border p-6">
+          <Skeleton className="h-[140px] w-full rounded-lg" />
+          <Skeleton className="h-8 w-full" />
+          {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
+        </div>
+      )}
+
+      {/* ---- Query bar ---- */}
+      {fetchStatus === "done" && allRecords.length > 0 && (
+        <RequestsSearchBar
+          query={query}
+          onQueryChange={setQuery}
+          statusFilter={statusFilter}
+          onStatusFilterChange={setStatusFilter}
+          totalCount={allRecords.length}
+          filteredCount={filtered.length}
+        />
+      )}
+
+      {/* ---- Table ---- */}
+      {fetchStatus === "done" && (
+        <RequestsTable
+          rows={tableSlice}
+          totalCount={filtered.length}
+          emptyHint={
+            allRecords.length === 0
+              ? "该时间范围内暂无请求审计记录"
+              : "没有匹配查询条件的记录"
+          }
+          page={tablePage}
+          totalPages={totalPages}
+          onPageChange={setTablePage}
+          onSelect={setSelectedReq}
+        />
+      )}
+
+      <RequestDetailDialog
+        request={selectedReq}
+        open={!!selectedReq}
+        onOpenChange={(open) => !open && setSelectedReq(null)}
+      />
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/[store]/search/page.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useMemo, useState } from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import { toast } from "sonner";
+import { useMemorySearch } from "@/hooks/use-memory-search";
+import { buildMemoryScope } from "@/lib/memory";
+import type { MemorySearchHit } from "@/types/memory";
+import { MemorySearchForm, type MemorySearchValues } from "@/components/memory/memory-search-form";
+import { MemorySearchResults } from "@/components/memory/memory-search-results";
+import { WorkbenchLayout } from "@/components/layout/detail-sidebar";
+
+export default function MemorySearchPage() {
+  const params = useParams<{ store: string }>();
+  const searchParams = useSearchParams();
+  const memoryStoreName = decodeURIComponent(params.store);
+  const scope = useMemo(() => buildMemoryScope(searchParams), [searchParams.toString()]);
+  const search = useMemorySearch();
+  const [results, setResults] = useState<MemorySearchHit[] | null>(null);
+  const [elapsedMs, setElapsedMs] = useState<number | undefined>();
+
+  async function handleSubmit(values: MemorySearchValues) {
+    const startTime = Date.now();
+    try {
+      const response = await search.mutateAsync({
+        memoryStoreName,
+        query: values.query,
+        scope: values.scope,
+        topK: values.topK,
+        enableRerank: values.enableRerank,
+        metadata: values.metadata,
+      });
+      setResults(response.results ?? []);
+      setElapsedMs(Date.now() - startTime);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "搜索失败");
+    }
+  }
+
+  return (
+    <WorkbenchLayout
+      asideWidth={400}
+      aside={
+        <MemorySearchForm
+          scope={scope}
+          isLoading={search.isPending}
+          onSubmit={handleSubmit}
+        />
+      }
+    >
+      <div className="min-h-0 flex-1 overflow-y-auto px-7 py-5 max-md:px-4">
+        <MemorySearchResults results={results} elapsedMs={elapsedMs} />
+      </div>
+    </WorkbenchLayout>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/[store]/settings/page.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useParams } from "next/navigation";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useMemoryStore } from "@/hooks/use-memory-store";
+import { MemorySettingsForm } from "@/components/memory/memory-settings-form";
+
+function formatTimestamp(value: string | number | undefined): string {
+  if (!value) return "-";
+  try {
+    const date = new Date(value);
+    if (isNaN(date.getTime())) return String(value);
+    return date.toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  } catch {
+    return String(value);
+  }
+}
+
+export default function MemorySettingsPage() {
+  const params = useParams<{ store: string }>();
+  const memoryStoreName = decodeURIComponent(params.store);
+  const { data: memoryStore, isLoading } = useMemoryStore(memoryStoreName);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-32 w-full" />
+      </div>
+    );
+  }
+
+  if (!memoryStore) {
+    return (
+      <div className="py-12 text-center text-muted-foreground">
+        记忆库不存在
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl space-y-8">
+      <MemorySettingsForm memoryStore={memoryStore} />
+
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-4 text-sm font-semibold">记忆库信息</h3>
+        <dl className="grid gap-3 sm:grid-cols-2">
+          <div>
+            <dt className="text-xs text-muted-foreground">OTS 实例</dt>
+            <dd className="mt-0.5 text-sm font-mono">{memoryStore.otsInstance ?? "-"}</dd>
+          </div>
+          <div>
+            <dt className="text-xs text-muted-foreground">创建时间</dt>
+            <dd className="mt-0.5 text-sm">{formatTimestamp(memoryStore.createdAt)}</dd>
+          </div>
+          <div>
+            <dt className="text-xs text-muted-foreground">更新时间</dt>
+            <dd className="mt-0.5 text-sm">{formatTimestamp(memoryStore.updatedAt)}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  );
+}