@tablestore/tablestore-agent-cli 0.1.7 → 0.1.9

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/loading.tsx

@@ -0,0 +1,26 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Route-segment loading UI rendered automatically by Next.js whenever a
+ * dashboard page (or any nested server component) is suspended. Avoids
+ * the previous "blank main area" flicker between sidebar nav clicks.
+ *
+ * Kept intentionally generic — page-level skeletons (memory list,
+ * llm-providers cards, etc.) still apply once the route has resolved
+ * and its own client component starts fetching.
+ */
+export default function DashboardLoading() {
+  return (
+    <div className="space-y-6" aria-busy="true" aria-live="polite">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-72" />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, idx) => (
+          <Skeleton key={idx} className="h-[160px] rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useMemoryStore } from "@/hooks/use-memory-store";
+import { MemoryDeleteDialog } from "@/components/memory/memory-delete-dialog";
+import { MemoryHeader } from "@/components/memory/memory-header";
+import { MemoryScopeBar } from "@/components/memory/memory-scope-bar";
+import { MemoryTabNav } from "@/components/memory/memory-tab-nav";
+
+export default function MemoryDetailLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const params = useParams<{ store: string }>();
+  const memoryStoreName = decodeURIComponent(params.store);
+  const { data: memoryStore, isLoading } = useMemoryStore(memoryStoreName);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="space-y-3">
+          <Skeleton className="h-10 w-64" />
+          <Skeleton className="h-4 w-96" />
+        </div>
+        <Skeleton className="h-28 w-full" />
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!memoryStore) {
+    return (
+      <div className="flex items-center justify-center py-20 text-muted-foreground">
+        记忆库不存在或已被删除
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <MemoryHeader
+        memoryStore={memoryStore}
+        onDelete={() => setShowDeleteDialog(true)}
+      />
+      <MemoryScopeBar />
+      <MemoryTabNav memoryStoreName={memoryStoreName} />
+      <div>{children}</div>
+
+      <MemoryDeleteDialog
+        memoryStoreName={memoryStoreName}
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        redirectToList
+      />
+    </div>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/app/(dashboard)/memory/[store]/messages/_helpers.ts

@@ -0,0 +1,109 @@
+import type { SessionMessage } from "@/types/memory";
+
+/* ------------------------------------------------------------------ */
+/*  Content / speaker helpers                                         */
+/* ------------------------------------------------------------------ */
+
+/** Strip embedded "[timestamp] Speaker:" prefix from message content. */
+export function cleanContent(content: string | undefined): string {
+  if (!content) return "";
+  return content.replace(/^\[.*?\]\s*(?:\w+:\s*)?/, "").trim();
+}
+
+export function getSpeakerName(message: SessionMessage): string {
+  const metaSpeaker = message.metadata?.speaker;
+  if (metaSpeaker) return metaSpeaker;
+  const role = (message.role ?? "user").toLowerCase();
+  if (role === "assistant") return "Assistant";
+  if (role === "system") return "System";
+  return "User";
+}
+
+export function getInitial(name: string): string {
+  if (!name) return "?";
+  return name.charAt(0).toUpperCase();
+}
+
+/* ------------------------------------------------------------------ */
+/*  Time formatting                                                   */
+/* ------------------------------------------------------------------ */
+
+export function formatTime(timestamp: string | number | undefined): string {
+  if (!timestamp) return "";
+  try {
+    const d = new Date(timestamp);
+    if (isNaN(d.getTime())) return "";
+    return d.toLocaleTimeString("zh-CN", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return "";
+  }
+}
+
+export function formatDateLabel(
+  timestamp: string | number | undefined,
+): string {
+  if (!timestamp) return "";
+  try {
+    const d = new Date(timestamp);
+    if (isNaN(d.getTime())) return "";
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    if (d.toDateString() === today.toDateString()) return "今天";
+    if (d.toDateString() === yesterday.toDateString()) return "昨天";
+    return d.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  } catch {
+    return "";
+  }
+}
+
+export function getDateKey(timestamp: string | number | undefined): string {
+  if (!timestamp) return "";
+  try {
+    return new Date(timestamp).toDateString();
+  } catch {
+    return "";
+  }
+}
+
+/** Convert "YYYY-MM-DDThh:mm" local input value → RFC3339 UTC string. */
+export function localToRFC3339(localStr: string): string {
+  if (!localStr) return "";
+  try {
+    const d = new Date(localStr);
+    if (isNaN(d.getTime())) return "";
+    return d.toISOString();
+  } catch {
+    return "";
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Avatar palette — stable colour per speaker name                   */
+/* ------------------------------------------------------------------ */
+
+const AVATAR_PALETTES = [
+  { bg: "bg-blue-600", text: "text-white" },
+  { bg: "bg-emerald-600", text: "text-white" },
+  { bg: "bg-violet-600", text: "text-white" },
+  { bg: "bg-amber-500", text: "text-white" },
+  { bg: "bg-rose-600", text: "text-white" },
+  { bg: "bg-cyan-600", text: "text-white" },
+  { bg: "bg-indigo-600", text: "text-white" },
+  { bg: "bg-pink-600", text: "text-white" },
+];
+
+export function avatarColor(name: string) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 31 + name.charCodeAt(i)) | 0;
+  }
+  return AVATAR_PALETTES[Math.abs(hash) % AVATAR_PALETTES.length];
+}

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

@@ -0,0 +1,309 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import { ArrowDown, ChevronUp, Loader2, MessageSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { buildMemoryScope, hasPreciseScope } from "@/lib/memory";
+import { useMemoryMessages } from "@/hooks/use-memory-messages";
+import type { SessionMessage } from "@/types/memory";
+
+import {
+  formatDateLabel,
+  getDateKey,
+  getSpeakerName,
+  localToRFC3339,
+} from "./_helpers";
+import { DateDivider, MessageBubble } from "./message-bubble";
+import { TimeFilterBar } from "./time-filter-bar";
+
+/* ------------------------------------------------------------------ */
+/*  Page                                                              */
+/* ------------------------------------------------------------------ */
+
+export default function MemoryMessagesPage() {
+  const params = useParams<{ store: string }>();
+  const searchParams = useSearchParams();
+  const memoryStoreName = decodeURIComponent(params.store);
+  const scope = useMemo(() => buildMemoryScope(searchParams), [searchParams.toString()]);
+
+  /* ---- Time filter state (default: last 1 day) ---- */
+  const [windowMinutes, setWindowMinutes] = useState(1440);
+  const [useCustomRange, setUseCustomRange] = useState(false);
+  const [customMin, setCustomMin] = useState("");
+  const [customMax, setCustomMax] = useState("");
+
+  const filters = useMemo(() => {
+    if (useCustomRange) {
+      const f: { minTimestamp?: string; maxTimestamp?: string } = {};
+      if (customMin) f.minTimestamp = localToRFC3339(customMin);
+      if (customMax) f.maxTimestamp = localToRFC3339(customMax);
+      return Object.keys(f).length > 0 ? f : undefined;
+    }
+    if (windowMinutes === 0) return undefined; // no limit
+    const now = new Date();
+    const min = new Date(now.getTime() - windowMinutes * 60_000);
+    return { minTimestamp: min.toISOString(), maxTimestamp: now.toISOString() };
+  }, [windowMinutes, useCustomRange, customMin, customMax]);
+
+  // Reset pagination when filter changes
+  const filterKey = JSON.stringify(filters);
+  const prevFilterKey = useRef(filterKey);
+  useEffect(() => {
+    if (prevFilterKey.current !== filterKey) {
+      prevFilterKey.current = filterKey;
+      setFetchToken(undefined);
+      setLoadedTokens(new Set());
+      setNextTokens(new Map());
+      setAllMessages([]);
+    }
+  }, [filterKey]);
+
+  /* ---- Pagination & messages state ---- */
+  const [fetchToken, setFetchToken] = useState<string | undefined>(undefined);
+  const [loadedTokens, setLoadedTokens] = useState<Set<string>>(new Set());
+  const [nextTokens, setNextTokens] = useState<Map<string, string | undefined>>(new Map());
+  const [autoScroll, setAutoScroll] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [pageSize] = useState(50);
+  const [allMessages, setAllMessages] = useState<SessionMessage[]>([]);
+
+  const precise = hasPreciseScope(scope);
+
+  const messagesQuery = useMemoryMessages(
+    memoryStoreName,
+    precise ? scope : null,
+    fetchToken,
+    pageSize,
+    precise,
+    filters,
+  );
+
+  // Accumulate messages across pages, reversing to ascending order
+  useEffect(() => {
+    if (!messagesQuery.data || !messagesQuery.isFetched) return;
+    const rawItems = messagesQuery.data.items ?? [];
+    // API returns newest-first; reverse to ascending (oldest first)
+    const items = [...rawItems].reverse();
+    const token = messagesQuery.data.nextToken;
+
+    if (!loadedTokens.has(fetchToken ?? "__initial__")) {
+      setAllMessages((prev) => {
+        if (fetchToken === undefined) return items;
+        // Older pages prepend to the top
+        return [...items, ...prev];
+      });
+      setLoadedTokens((prev) => new Set(prev).add(fetchToken ?? "__initial__"));
+    }
+
+    if (fetchToken !== undefined) {
+      setNextTokens((prev) => new Map(prev).set(fetchToken, token));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messagesQuery.data, messagesQuery.isFetched]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (!messagesQuery.isFetching && autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [allMessages, messagesQuery.isFetching, autoScroll]);
+
+  const handleScroll = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    setAutoScroll(el.scrollHeight - el.scrollTop - el.clientHeight < 100);
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: "smooth" });
+    setAutoScroll(true);
+  }, []);
+
+  const loadMore = useCallback(() => {
+    if (messagesQuery.isFetching) return;
+    const currentToken = fetchToken ?? "__initial__";
+    const tokenToFetch =
+      fetchToken === undefined
+        ? messagesQuery.data?.nextToken
+        : nextTokens.get(currentToken);
+    if (!tokenToFetch) return;
+    setFetchToken(tokenToFetch);
+  }, [fetchToken, messagesQuery.isFetching, messagesQuery.data?.nextToken, nextTokens]);
+
+  const effectiveToken =
+    fetchToken === undefined
+      ? messagesQuery.data?.nextToken
+      : nextTokens.get(fetchToken ?? "__initial__");
+  const hasMore = effectiveToken !== undefined && effectiveToken !== "";
+
+  const hasAppId = !!scope.appId;
+
+  const timeFilterBarProps = {
+    windowMinutes,
+    onWindowChange: setWindowMinutes,
+    useCustom: useCustomRange,
+    customMin,
+    customMax,
+    onCustomMinChange: setCustomMin,
+    onCustomMaxChange: setCustomMax,
+    onToggleCustom: () => setUseCustomRange(p => !p),
+  };
+
+  /* ---- Empty / loading states ---- */
+
+  if (!hasAppId) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-xl border border-dashed py-16 text-muted-foreground">
+        <MessageSquare className="mb-2 h-5 w-5" />
+        <span className="text-sm">请先在上方 Scope 区域填写 appId</span>
+      </div>
+    );
+  }
+
+  if (!precise) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-xl border border-dashed py-16 text-muted-foreground">
+        <MessageSquare className="mb-2 h-5 w-5" />
+        <span className="text-sm">请在上方 Scope 栏中为所有字段设置具体值以查询短期记忆</span>
+      </div>
+    );
+  }
+
+  if (messagesQuery.isLoading && allMessages.length === 0) {
+    return (
+      <div className="rounded-xl border bg-muted/20">
+        <TimeFilterBar {...timeFilterBarProps} />
+        <div className="space-y-3 p-6">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className={cn("flex gap-3", i % 2 === 0 ? "" : "flex-row-reverse")}>
+              <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+              <Skeleton className={cn("h-14 rounded-2xl", i % 2 === 0 ? "w-3/5" : "w-2/5")} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  /* ---- Render message list with date grouping ---- */
+
+  function renderMessages() {
+    if (allMessages.length === 0) {
+      return (
+        <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+          <MessageSquare className="mb-2 h-5 w-5" />
+          <span className="text-sm">
+            {filters ? "该时间范围内暂无消息" : "当前 scope 下暂无消息记录"}
+          </span>
+        </div>
+      );
+    }
+
+    const elements: React.ReactNode[] = [];
+    let lastDateKey = "";
+    let lastSpeaker = "";
+
+    allMessages.forEach((msg, idx) => {
+      const dateKey = getDateKey(msg.timestamp);
+      const dateLabel = formatDateLabel(msg.timestamp);
+      const speaker = getSpeakerName(msg);
+
+      if (dateKey && dateKey !== lastDateKey) {
+        elements.push(<DateDivider key={`date-${dateKey}-${idx}`} label={dateLabel} />);
+        lastSpeaker = "";
+        lastDateKey = dateKey;
+      }
+
+      const nextMsg = allMessages[idx + 1];
+      const nextSpeaker = nextMsg ? getSpeakerName(nextMsg) : "";
+      const nextDateKey = nextMsg ? getDateKey(nextMsg.timestamp) : "";
+      const isLastInGroup = !nextMsg || nextSpeaker !== speaker || nextDateKey !== dateKey;
+
+      const showName = speaker !== lastSpeaker;
+      elements.push(
+        <MessageBubble
+          key={msg.messageId ?? `${msg.timestamp}-${idx}`}
+          message={msg}
+          showAvatar={showName}
+          showName={showName}
+          showTime={isLastInGroup}
+        />,
+      );
+      lastSpeaker = speaker;
+    });
+
+    return elements;
+  }
+
+  return (
+    <div className="relative flex flex-col rounded-xl border bg-muted/20">
+      {/* Time filter bar */}
+      <TimeFilterBar {...timeFilterBarProps} />
+
+      {/* Scroll-to-bottom FAB */}
+      {!autoScroll && (
+        <div className="absolute bottom-12 right-4 z-10">
+          <Button
+            variant="secondary"
+            size="icon"
+            className="h-9 w-9 rounded-full shadow-lg border"
+            onClick={scrollToBottom}
+          >
+            <ArrowDown className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* Chat container */}
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex max-h-[calc(100vh-440px)] min-h-[320px] flex-col overflow-y-auto px-5 py-4"
+      >
+        {hasMore && (
+          <div className="mb-2 flex justify-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={loadMore}
+              disabled={messagesQuery.isFetching}
+              className="gap-1.5 text-xs text-muted-foreground hover:text-foreground"
+            >
+              {messagesQuery.isFetching ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  加载中…
+                </>
+              ) : (
+                <>
+                  <ChevronUp className="h-3.5 w-3.5" />
+                  加载更早的消息
+                </>
+              )}
+            </Button>
+          </div>
+        )}
+
+        {!hasMore && allMessages.length > 0 && (
+          <p className="mb-2 text-center text-[11px] text-muted-foreground/50">
+            — 已加载全部消息 —
+          </p>
+        )}
+
+        {renderMessages()}
+      </div>
+
+      {/* Footer summary */}
+      {allMessages.length > 0 && (
+        <div className="border-t px-5 py-2.5">
+          <span className="text-[11px] text-muted-foreground">
+            共 {allMessages.length} 条消息
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { redirect } from "next/navigation";
+
+// This page only redirects with query forwarding, always rendered dynamically.
+export const dynamic = "force-dynamic";
+
+export default async function MemoryStoreDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ store: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const { store } = await params;
+  const query = new URLSearchParams();
+  const resolvedSearchParams = await searchParams;
+
+  Object.entries(resolvedSearchParams).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => query.append(key, item));
+    } else if (value !== undefined) {
+      query.set(key, value);
+    }
+  });
+
+  redirect(`/memory/${store}/units${query.size ? `?${query.toString()}` : ""}`);
+}