@tablestore/tablestore-agent-cli 0.2.10 → 0.2.11

package/dist/dashboard-runtime/dashboard/src/components/memory/memory-files-browser.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useReducer, useRef, useState } from "react";
 import {
   ChevronDown,
   ChevronRight,
@@ -8,218 +8,502 @@ import {
   Folder,
   FolderOpen,
   FolderTree,
-  RefreshCw,
+  Search,
 } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import type { ChatMemoryWriteScope } from "@/components/chat/chat-config-context";
+import { Input } from "@/components/ui/input";
 import {
-  useFileMemoryFile,
-  useFileMemoryTree,
-  useSyncFileMemory,
+  useCreateFileMemory,
+  useDeleteFileMemory,
+  useFileMemories,
+  useFileMemory,
+  useRenameFileMemory,
+  useUpdateFileMemory,
 } from "@/hooks/use-file-memory";
-import { buildFileTree, flattenVisible } from "@/lib/file-tree";
 import { useI18n } from "@/i18n/i18n-context";
+import { buildFileTree, flattenVisible } from "@/lib/file-tree";
+import { cn } from "@/lib/utils";
+import { ApiClientError } from "@/services/api-client";
+import type {
+  FileMemory,
+  FileMemoryScope,
+  ListFileMemoriesResponse,
+  UpdateFileMemoryRequest,
+} from "@/types/file-memory";
+
+import { FileDetailsPanel } from "./file-details-panel";
+import {
+  FileEditor,
+  normalizeFileMemoryPath,
+  validateFileMemoryContent,
+} from "./file-editor";
+import {
+  FileMutationDialogs,
+  type FileMutationDialog,
+} from "./file-mutation-dialogs";
+import { FileWorkspaceToolbar } from "./file-workspace-toolbar";
+
+export interface WorkspaceEditorState {
+  selectedPath: string | null;
+  content: string;
+  loadedSha256: string | null;
+  dirty: boolean;
+  conflict: string | null;
+}
+
+export const initialWorkspaceEditorState: WorkspaceEditorState = {
+  selectedPath: null,
+  content: "",
+  loadedSha256: null,
+  dirty: false,
+  conflict: null,
+};
+
+type WorkspaceEditorAction =
+  | { type: "select"; path: string | null }
+  | { type: "load"; path: string; content: string; sha256: string }
+  | { type: "edit"; content: string }
+  | { type: "save-success"; sha256: string; content?: string }
+  | { type: "save-conflict"; message: string };
+
+export function workspaceEditorReducer(
+  state: WorkspaceEditorState,
+  action: WorkspaceEditorAction,
+): WorkspaceEditorState {
+  switch (action.type) {
+    case "select":
+      return {
+        ...initialWorkspaceEditorState,
+        selectedPath: action.path,
+      };
+    case "load":
+      if (state.selectedPath !== action.path) return state;
+      return {
+        selectedPath: action.path,
+        content: action.content,
+        loadedSha256: action.sha256,
+        dirty: false,
+        conflict: null,
+      };
+    case "edit":
+      return { ...state, content: action.content, dirty: true, conflict: null };
+    case "save-success":
+      return {
+        ...state,
+        content: action.content ?? state.content,
+        loadedSha256: action.sha256,
+        dirty: false,
+        conflict: null,
+      };
+    case "save-conflict":
+      return { ...state, dirty: true, conflict: action.message };
+  }
+}
+
+export function isFileMemoryReadOnly(
+  pages: Array<Pick<ListFileMemoriesResponse, "readOnly">> | undefined,
+): boolean {
+  return pages?.some((page) => page.readOnly === true) ?? false;
+}
+
+export function shouldApplyFileSelection(
+  editor: WorkspaceEditorState,
+  nextPath: string | null,
+  confirmDiscard: () => boolean,
+): boolean {
+  return !editor.dirty || nextPath === editor.selectedPath || confirmDiscard();
+}
 
-/**
- * 记忆文件浏览器：左侧文件树 + 右侧文件内容 + 顶部「立即同步」。
- *
- * 展示 openclaw 文件记忆 local 模式在本机镜像出的目录结构。同步走 BFF（server
- * 侧持 STS）；树/内容为只读。dialog（对话抽屉）与 units tab 复用同一个组件，
- * `className` 由外层控制高度/边框。
- */
-export function MemoryFilesBrowser(props: {
+export function isFileMemoryShaConflict(error: unknown): boolean {
+  if (error instanceof ApiClientError && error.code === "SHA_MISMATCH") {
+    return true;
+  }
+  return error instanceof Error && error.message.includes("SHA_MISMATCH");
+}
+
+export function buildFileUpdateRequest(
+  memoryStoreName: string,
+  scope: FileMemoryScope,
+  editor: WorkspaceEditorState,
+): UpdateFileMemoryRequest & { memoryStoreName: string } {
+  if (!editor.selectedPath) throw new Error("FILE_NOT_SELECTED");
+  return {
+    memoryStoreName,
+    scope,
+    path: editor.selectedPath,
+    content: editor.content,
+    ...(editor.loadedSha256 ? { expectedSha256: editor.loadedSha256 } : {}),
+  };
+}
+
+export function MemoryFilesBrowser({
+  memoryStoreName,
+  scope,
+  enabled = true,
+  initialPath,
+  className,
+}: {
   memoryStoreName: string;
-  scope: ChatMemoryWriteScope;
-  /** 是否允许拉取（如 scope 未就绪时传 false）。默认 true。 */
+  scope: FileMemoryScope;
   enabled?: boolean;
+  initialPath?: string | null;
   className?: string;
 }) {
-  const { memoryStoreName, scope, enabled = true, className } = props;
   const { t } = useI18n();
-  const [selected, setSelected] = useState<string | null>(null);
+  const [editor, dispatch] = useReducer(
+    workspaceEditorReducer,
+    initialWorkspaceEditorState,
+  );
+  const editorRef = useRef(editor);
+  editorRef.current = editor;
+  const tRef = useRef(t);
+  tRef.current = t;
   const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
+  const [filter, setFilter] = useState("");
+  const [dialog, setDialog] = useState<FileMutationDialog>(null);
+
+  useEffect(() => {
+    if (initialPath) {
+      const path = normalizeFileMemoryPath(initialPath);
+      if (
+        shouldApplyFileSelection(editorRef.current, path, () =>
+          window.confirm(tRef.current("memory.files.discardChanges")),
+        )
+      ) {
+        dispatch({ type: "select", path });
+      }
+    }
+  }, [initialPath]);
 
-  const tree = useFileMemoryTree(memoryStoreName, scope, enabled);
-  const file = useFileMemoryFile(memoryStoreName, scope, selected);
-  const sync = useSyncFileMemory();
+  const listQuery = useFileMemories(memoryStoreName, scope, {
+    limit: 100,
+    enabled,
+  });
+  const fileQuery = useFileMemory(memoryStoreName, scope, editor.selectedPath);
+  const createMutation = useCreateFileMemory();
+  const updateMutation = useUpdateFileMemory();
+  const renameMutation = useRenameFileMemory();
+  const deleteMutation = useDeleteFileMemory();
 
-  const files = useMemo(() => tree.data?.files ?? [], [tree.data?.files]);
+  const pages = listQuery.data?.pages;
+  const memories = useMemo(() => {
+    const byPath = new Map<string, FileMemory>();
+    for (const page of pages ?? []) {
+      for (const file of page.memories) {
+        byPath.set(normalizeFileMemoryPath(file.path), {
+          ...file,
+          path: normalizeFileMemoryPath(file.path),
+        });
+      }
+    }
+    return Array.from(byPath.values()).sort((a, b) =>
+      a.path.localeCompare(b.path),
+    );
+  }, [pages]);
+  const visibleMemories = useMemo(() => {
+    const query = filter.trim().toLocaleLowerCase();
+    return query
+      ? memories.filter((file) => file.path.toLocaleLowerCase().includes(query))
+      : memories;
+  }, [filter, memories]);
+  const filesByPath = useMemo(
+    () => new Map(memories.map((file) => [file.path, file])),
+    [memories],
+  );
   const rows = useMemo(
-    () => flattenVisible(buildFileTree(files), collapsed),
-    [files, collapsed],
+    () =>
+      flattenVisible(
+        buildFileTree(
+          visibleMemories.map((file) => ({
+            rel: file.path.replace(/^\/+/, ""),
+            size: file.contentSizeBytes,
+          })),
+        ),
+        collapsed,
+      ),
+    [visibleMemories, collapsed],
   );
+  const readOnly = isFileMemoryReadOnly(pages);
+  const selectedFile = editor.selectedPath
+    ? (filesByPath.get(editor.selectedPath) ?? fileQuery.data)
+    : undefined;
+
+  useEffect(() => {
+    const file = fileQuery.data;
+    if (!file || editor.dirty || !editor.selectedPath) return;
+    dispatch({
+      type: "load",
+      path: normalizeFileMemoryPath(file.path),
+      content: file.content ?? "",
+      sha256: file.contentSha256,
+    });
+  }, [
+    editor.dirty,
+    editor.selectedPath,
+    fileQuery.data,
+    fileQuery.data?.content,
+    fileQuery.data?.contentSha256,
+    fileQuery.data?.path,
+  ]);
+
+  function selectFile(path: string | null) {
+    if (
+      !shouldApplyFileSelection(editor, path, () =>
+        window.confirm(t("memory.files.discardChanges")),
+      )
+    ) {
+      return;
+    }
+    dispatch({ type: "select", path });
+  }
 
-  function toggleDir(rel: string) {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(rel)) next.delete(rel);
-      else next.add(rel);
+  function toggleDirectory(path: string) {
+    setCollapsed((previous) => {
+      const next = new Set(previous);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
       return next;
     });
   }
 
-  function renderFileContent() {
-    if (!selected) {
-      return (
-        <p className="text-xs text-muted-foreground">
-          {t("memory.files.selectFile")}
-        </p>
-      );
+  async function save() {
+    const validationError = validateFileMemoryContent(editor.content);
+    if (validationError) {
+      toast.error(t("memory.files.contentTooLarge"));
+      return;
     }
-    if (file.isLoading) {
-      return (
-        <p className="text-xs text-muted-foreground">{t("common.loading")}</p>
-      );
-    }
-    if (file.isError) {
-      return (
-        <p className="text-xs text-[hsl(var(--destructive))]">
-          {t("memory.files.readFailed", {
-            error: (file.error as Error)?.message ?? t("common.unknownError"),
-          })}
-        </p>
+    try {
+      const updated = await updateMutation.mutateAsync(
+        buildFileUpdateRequest(memoryStoreName, scope, editor),
       );
+      dispatch({
+        type: "save-success",
+        sha256: updated.contentSha256,
+        content: editor.content,
+      });
+      toast.success(t("memory.files.saveSuccess"));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (isFileMemoryShaConflict(error)) {
+        dispatch({ type: "save-conflict", message });
+        return;
+      }
+      toast.error(message || t("memory.files.saveFailed"));
     }
-    return (
-      <pre className="whitespace-pre-wrap break-words font-mono text-xs text-foreground/90">
-        {file.data?.content}
-      </pre>
-    );
   }
 
-  async function handleSync() {
-    try {
-      const res = await sync.mutateAsync({ memoryStoreName, scope });
-      await tree.refetch();
-      if (res.sync.ok) {
-        toast.success(
-          t("memory.files.syncSuccess", {
-            downloaded: res.sync.downloaded ?? 0,
-            deleted: res.sync.deleted ?? 0,
-            total: res.sync.total ?? res.files.length,
-          }),
-        );
-      } else {
-        toast.error(
-          t("memory.files.syncFallback", {
-            error: res.sync.error ?? t("common.unknownError"),
-          }),
-        );
-      }
-    } catch (err) {
-      toast.error(
-        err instanceof Error ? err.message : t("memory.files.syncFailed"),
-      );
-    }
+  async function create(path: string, content: string) {
+    const created = await createMutation.mutateAsync({
+      memoryStoreName,
+      scope,
+      path,
+      content,
+    });
+    dispatch({ type: "select", path: normalizeFileMemoryPath(created.path) });
+    toast.success(t("memory.files.createSuccess"));
+  }
+
+  async function rename(toPath: string) {
+    if (!editor.selectedPath) return;
+    const renamed = await renameMutation.mutateAsync({
+      memoryStoreName,
+      scope,
+      fromPath: editor.selectedPath,
+      toPath,
+      expectedSha256: selectedFile?.contentSha256,
+    });
+    dispatch({ type: "select", path: normalizeFileMemoryPath(renamed.path) });
+    toast.success(t("memory.files.renameSuccess"));
+  }
+
+  async function remove() {
+    if (!editor.selectedPath) return;
+    await deleteMutation.mutateAsync({
+      memoryStoreName,
+      scope,
+      path: editor.selectedPath,
+      expectedSha256: selectedFile?.contentSha256,
+    });
+    dispatch({ type: "select", path: null });
+    toast.success(t("memory.files.deleteSuccess"));
   }
 
+  async function refresh() {
+    await listQuery.refetch();
+    if (editor.selectedPath) await fileQuery.refetch();
+  }
+
+  const mutationPending =
+    createMutation.isPending ||
+    renameMutation.isPending ||
+    deleteMutation.isPending;
+
   return (
-    <div className={cn("flex flex-col gap-3", className)}>
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0">
-          <span className="text-xs text-muted-foreground">
-            {t("memory.files.fileCount", { count: files.length })}
-          </span>
-          {tree.data?.scopeDir ? (
-            <p
-              className="truncate font-mono text-[10px] text-muted-foreground"
-              title={tree.data.scopeDir}
-            >
-              {tree.data.scopeDir}
-            </p>
-          ) : null}
+    <div
+      className={cn(
+        "flex min-h-[440px] flex-col overflow-hidden rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))]",
+        className,
+      )}
+    >
+      <FileWorkspaceToolbar
+        readOnly={readOnly}
+        loading={listQuery.isLoading || listQuery.isRefetching}
+        hasSelection={!!editor.selectedPath}
+        dirty={editor.dirty}
+        saving={updateMutation.isPending}
+        onCreate={() => setDialog("create")}
+        onRename={() => setDialog("rename")}
+        onDelete={() => setDialog("delete")}
+        onRefresh={() => void refresh()}
+        onSave={() => void save()}
+      />
+
+      {readOnly ? (
+        <div className="border-b border-blue-500/20 bg-blue-500/10 px-3 py-2 text-xs text-blue-800 dark:text-blue-200">
+          {t("memory.files.readOnlyGuidance")}
         </div>
-        <Button
-          type="button"
-          size="sm"
-          variant="outline"
-          disabled={sync.isPending}
-          onClick={handleSync}
-        >
-          <RefreshCw
-            className={cn("h-3.5 w-3.5", sync.isPending && "animate-spin")}
-          />
-          {t("memory.files.syncNow")}
-        </Button>
-      </div>
+      ) : null}
 
-      <div className="grid min-h-0 flex-1 grid-cols-[220px_1fr] gap-3">
-        {/* 文件树（目录可折叠，按层级缩进） */}
-        <div className="min-h-0 overflow-auto rounded-md border border-[hsl(var(--border))] p-1.5">
-          {tree.isLoading ? (
-            <p className="p-2 text-xs text-muted-foreground">
-              {t("common.loading")}
+      <div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[250px_minmax(320px,1fr)_290px]">
+        <aside className="flex min-h-0 flex-col border-b border-[hsl(var(--border))] lg:border-r lg:border-b-0">
+          <div className="border-b border-[hsl(var(--border))] p-2">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={filter}
+                onChange={(event) => setFilter(event.target.value)}
+                placeholder={t("memory.files.searchPlaceholder")}
+                className="h-7 pl-8 text-xs"
+              />
+            </div>
+            <p className="mt-1.5 px-1 text-[10px] text-muted-foreground">
+              {t("memory.files.fileCount", { count: memories.length })}
             </p>
-          ) : rows.length === 0 ? (
-            <p className="p-2 text-xs text-muted-foreground">
-              {t("memory.files.emptyHint")}
-            </p>
-          ) : (
-            rows.map(({ node, depth }) => {
-              const indent = { paddingLeft: `${depth * 12 + 4}px` };
-              if (node.type === "dir") {
-                const open = !collapsed.has(node.rel);
+          </div>
+          <div className="min-h-[160px] flex-1 overflow-auto p-1.5">
+            {listQuery.isLoading ? (
+              <p className="p-2 text-xs text-muted-foreground">
+                {t("common.loading")}
+              </p>
+            ) : listQuery.isError ? (
+              <p className="p-2 text-xs text-[hsl(var(--destructive))]">
+                {(listQuery.error as Error).message}
+              </p>
+            ) : rows.length === 0 ? (
+              <p className="p-3 text-center text-xs text-muted-foreground">
+                {t("memory.files.emptyHint")}
+              </p>
+            ) : (
+              rows.map(({ node, depth }) => {
+                const indent = { paddingLeft: `${depth * 12 + 6}px` };
+                if (node.type === "dir") {
+                  const open = !collapsed.has(node.rel);
+                  return (
+                    <button
+                      key={`dir:${node.rel}`}
+                      type="button"
+                      onClick={() => toggleDirectory(node.rel)}
+                      style={indent}
+                      className="flex w-full items-center gap-1 rounded px-1.5 py-1.5 text-left text-xs hover:bg-[hsl(var(--accent))]"
+                    >
+                      {open ? (
+                        <ChevronDown className="h-3 w-3" />
+                      ) : (
+                        <ChevronRight className="h-3 w-3" />
+                      )}
+                      {open ? (
+                        <FolderOpen className="h-3.5 w-3.5 text-[hsl(var(--primary))]" />
+                      ) : (
+                        <Folder className="h-3.5 w-3.5 text-[hsl(var(--primary))]" />
+                      )}
+                      <span className="truncate font-mono">{node.name}</span>
+                    </button>
+                  );
+                }
+                const path = normalizeFileMemoryPath(node.rel);
                 return (
                   <button
-                    key={`dir:${node.rel}`}
+                    key={`file:${path}`}
                     type="button"
-                    onClick={() => toggleDir(node.rel)}
+                    onClick={() => selectFile(path)}
                     style={indent}
-                    className="flex w-full items-center gap-1 rounded px-2 py-1.5 text-left text-xs text-foreground/80 transition-colors hover:bg-[hsl(var(--accent))]"
-                    title={node.rel}
-                  >
-                    {open ? (
-                      <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
-                    ) : (
-                      <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+                    className={cn(
+                      "flex w-full items-center gap-1.5 rounded px-1.5 py-1.5 text-left text-xs hover:bg-[hsl(var(--accent))]",
+                      editor.selectedPath === path &&
+                        "bg-[hsl(var(--primary-soft))] text-[hsl(var(--primary))]",
                     )}
-                    {open ? (
-                      <FolderOpen className="h-3.5 w-3.5 shrink-0 text-[hsl(var(--primary))]" />
-                    ) : (
-                      <Folder className="h-3.5 w-3.5 shrink-0 text-[hsl(var(--primary))]" />
-                    )}
-                    <span className="min-w-0 truncate font-mono">
-                      {node.name}
-                    </span>
+                    title={path}
+                  >
+                    <span className="h-3 w-3 shrink-0" />
+                    <FileText className="h-3.5 w-3.5 shrink-0" />
+                    <span className="truncate font-mono">{node.name}</span>
                   </button>
                 );
-              }
-              return (
-                <button
-                  key={`file:${node.rel}`}
-                  type="button"
-                  onClick={() => setSelected(node.rel)}
-                  style={indent}
-                  className={cn(
-                    "flex w-full items-center gap-1.5 rounded px-2 py-1.5 text-left text-xs transition-colors hover:bg-[hsl(var(--accent))]",
-                    selected === node.rel &&
-                      "bg-[hsl(var(--accent))] text-foreground",
-                  )}
-                  title={node.rel}
-                >
-                  {/* 与目录的 chevron 对齐：文件行留出等宽占位 */}
-                  <span className="h-3 w-3 shrink-0" />
-                  <FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  <span className="min-w-0 truncate font-mono">
-                    {node.name}
-                  </span>
-                </button>
-              );
-            })
-          )}
-        </div>
+              })
+            )}
+            {listQuery.hasNextPage ? (
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                className="mt-2 w-full"
+                disabled={listQuery.isFetchingNextPage}
+                onClick={() => void listQuery.fetchNextPage()}
+              >
+                {t("memory.files.loadMore")}
+              </Button>
+            ) : null}
+          </div>
+        </aside>
 
-        {/* 文件内容 */}
-        <div className="min-h-0 overflow-auto rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.3)] p-3">
-          {renderFileContent()}
-        </div>
+        <main className="min-h-[280px] border-b border-[hsl(var(--border))] lg:border-r lg:border-b-0">
+          <FileEditor
+            path={editor.selectedPath}
+            content={editor.content}
+            dirty={editor.dirty}
+            readOnly={readOnly}
+            loading={fileQuery.isLoading}
+            error={
+              fileQuery.error instanceof Error
+                ? fileQuery.error.message
+                : undefined
+            }
+            conflict={editor.conflict}
+            onChange={(content) => dispatch({ type: "edit", content })}
+          />
+        </main>
+
+        <aside className="min-h-[220px]">
+          <FileDetailsPanel
+            memoryStoreName={memoryStoreName}
+            scope={scope}
+            file={selectedFile}
+            readOnly={readOnly}
+            onRestored={(file, content) =>
+              dispatch({
+                type: "load",
+                path: normalizeFileMemoryPath(file.path),
+                content,
+                sha256: file.contentSha256,
+              })
+            }
+          />
+        </aside>
       </div>
+
+      <FileMutationDialogs
+        mode={dialog}
+        selectedPath={editor.selectedPath}
+        pending={mutationPending}
+        onClose={() => setDialog(null)}
+        onCreate={create}
+        onRename={rename}
+        onDelete={remove}
+      />
     </div>
   );
 }
 
-/** 文件树顶部图标，供外层标题复用。 */
 export const MemoryFilesIcon = FolderTree;