@tablestore/tablestore-agent-cli 0.3.1 → 0.4.1

package/dist/dashboard-runtime/dashboard/src/components/wiki/wiki-sources-panel.tsx

@@ -0,0 +1,506 @@
+"use client";
+
+import { useEffect, useMemo, useState, type ChangeEvent } from "react";
+import { FilePlus2, Save, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  useAddWikiSources,
+  useRemoveWikiSource,
+  useUpdateWikiSource,
+  useWikiSource,
+  useWikiSources,
+} from "@/hooks/use-wikis";
+import { useI18n } from "@/i18n/i18n-context";
+import { showApiError } from "@/lib/api-error-toast";
+import { ApiClientError } from "@/services/api-client";
+import type {
+  WikiRawSource,
+  WikiScope,
+  WikiSourceBatchResult,
+} from "@/types/wiki";
+
+const SOURCE_BATCH_SIZE = 20;
+
+interface WikiSourceUploadFile {
+  name: string;
+  text: () => Promise<string>;
+}
+
+export type WikiSourceUploadOutcome =
+  | { path: string; ok: true }
+  | { path: string; ok: false; error: WikiSourceDiagnostic };
+
+export interface WikiSourceDiagnostic {
+  code: string;
+  message?: string;
+  requestId?: string;
+  httpStatus?: number;
+  upstreamCode?: string;
+  upstreamRequestId?: string;
+}
+
+export interface WikiSourceDiagnosticLabels {
+  code: string;
+  upstreamCode: string;
+  requestId: string;
+  upstreamRequestId: string;
+}
+
+function safeWikiSourceMessage(
+  message: string | undefined,
+): string | undefined {
+  if (!message || message.includes("/.wiki/")) return undefined;
+  return message;
+}
+
+function wikiSourceDiagnosticFromError(
+  error: unknown,
+  fallbackCode: string,
+): WikiSourceDiagnostic {
+  if (error instanceof ApiClientError) {
+    return {
+      code: error.code,
+      message: safeWikiSourceMessage(error.message),
+      requestId: error.requestId,
+      httpStatus: error.status,
+      upstreamCode: error.details?.upstreamCode,
+      upstreamRequestId: error.details?.upstreamRequestId,
+    };
+  }
+  return {
+    code: fallbackCode,
+    message: safeWikiSourceMessage(
+      error instanceof Error ? error.message : undefined,
+    ),
+  };
+}
+
+export async function uploadWikiSourceFiles(
+  files: readonly WikiSourceUploadFile[],
+  uploadBatch: (
+    sources: Array<{ path: string; content: string }>,
+  ) => Promise<WikiSourceBatchResult>,
+): Promise<WikiSourceUploadOutcome[]> {
+  const eligible = files
+    .filter((file) => /\.(md|txt)$/i.test(file.name))
+    .map((file, index) => ({ file, index, path: file.name }));
+  const outcomes = new Array<WikiSourceUploadOutcome | undefined>(
+    eligible.length,
+  );
+  const readable = (
+    await Promise.all(
+      eligible.map(async ({ file, index, path }) => {
+        try {
+          return { index, path, content: await file.text() };
+        } catch {
+          outcomes[index] = {
+            path,
+            ok: false,
+            error: { code: "FILE_READ_FAILED" },
+          };
+          return null;
+        }
+      }),
+    )
+  ).filter(
+    (source): source is { index: number; path: string; content: string } =>
+      source !== null,
+  );
+
+  for (let offset = 0; offset < readable.length; offset += SOURCE_BATCH_SIZE) {
+    const batch = readable.slice(offset, offset + SOURCE_BATCH_SIZE);
+    try {
+      const response = await uploadBatch(
+        batch.map(({ path, content }) => ({ path, content })),
+      );
+      batch.forEach((source, index) => {
+        const result = response.results[index];
+        outcomes[source.index] =
+          result?.ok && result.path === source.path
+            ? { path: source.path, ok: true }
+            : {
+                path: source.path,
+                ok: false,
+                error: result?.error
+                  ? {
+                      ...result.error,
+                      message: safeWikiSourceMessage(result.error.message),
+                    }
+                  : { code: "INVALID_BATCH_RESPONSE" },
+              };
+      });
+    } catch (error) {
+      const diagnostic = wikiSourceDiagnosticFromError(error, "UPLOAD_FAILED");
+      for (const source of batch) {
+        outcomes[source.index] = {
+          path: source.path,
+          ok: false,
+          error: diagnostic,
+        };
+      }
+    }
+  }
+
+  return outcomes.filter(
+    (outcome): outcome is WikiSourceUploadOutcome => outcome !== undefined,
+  );
+}
+
+export function showWikiSourceUploadOutcomes(
+  outcomes: readonly WikiSourceUploadOutcome[],
+  translate: (
+    key: "wiki.sources.fileAdded" | "wiki.sources.fileFailed",
+    variables: { path: string; code?: string },
+  ) => string,
+  labels?: WikiSourceDiagnosticLabels,
+): void {
+  for (const outcome of outcomes) {
+    if (outcome.ok) {
+      toast.success(
+        translate("wiki.sources.fileAdded", { path: outcome.path }),
+      );
+    } else {
+      const title = translate("wiki.sources.fileFailed", {
+        path: outcome.path,
+        code: outcome.error.upstreamCode ?? outcome.error.code,
+      });
+      const description = formatWikiSourceDiagnostic(outcome.error, labels);
+      if (description) {
+        toast.error(title, { description });
+      } else {
+        toast.error(title);
+      }
+    }
+  }
+}
+
+function formatWikiSourceDiagnostic(
+  diagnostic: WikiSourceDiagnostic,
+  labels?: WikiSourceDiagnosticLabels,
+): string | undefined {
+  const parts: string[] = [];
+  const message = safeWikiSourceMessage(diagnostic.message);
+  const displayCode = diagnostic.upstreamCode ?? diagnostic.code;
+  if (message) parts.push(`[${displayCode}] ${message}`);
+  if (diagnostic.httpStatus !== undefined) {
+    parts.push(`HTTP ${diagnostic.httpStatus}`);
+  }
+  if (labels && diagnostic.upstreamCode) {
+    if (diagnostic.code !== diagnostic.upstreamCode) {
+      parts.push(`${labels.code}: ${diagnostic.code}`);
+    }
+    parts.push(`${labels.upstreamCode}: ${diagnostic.upstreamCode}`);
+  }
+  if (labels && diagnostic.requestId) {
+    parts.push(`${labels.requestId}: ${diagnostic.requestId}`);
+  }
+  if (
+    labels &&
+    diagnostic.upstreamRequestId &&
+    diagnostic.upstreamRequestId !== diagnostic.requestId
+  ) {
+    parts.push(`${labels.upstreamRequestId}: ${diagnostic.upstreamRequestId}`);
+  }
+  return parts.length ? parts.join(" · ") : undefined;
+}
+
+export function buildWikiSourceUpdateVariables(
+  memoryStoreName: string,
+  scope: WikiScope,
+  source: Pick<WikiRawSource, "latestVersionId" | "path">,
+  content: string,
+) {
+  return {
+    memoryStoreName,
+    scope,
+    path: source.path,
+    content,
+    expectedVersionId: source.latestVersionId,
+  };
+}
+
+export function buildWikiSourceDeleteVariables(
+  memoryStoreName: string,
+  scope: WikiScope,
+  source: Pick<WikiRawSource, "latestVersionId" | "path">,
+) {
+  return {
+    memoryStoreName,
+    scope,
+    path: source.path,
+    expectedVersionId: source.latestVersionId,
+  };
+}
+
+export function WikiSourcesPanel({
+  memoryStoreName,
+  scope,
+}: {
+  memoryStoreName: string;
+  scope: WikiScope;
+}) {
+  const { t } = useI18n();
+  const list = useWikiSources(memoryStoreName, scope, { limit: 100 });
+  const sources = useMemo(
+    () => list.data?.pages.flatMap((page) => page.sources) ?? [],
+    [list.data],
+  );
+  const [selectedPath, setSelectedPath] = useState<string>();
+  const source = useWikiSource(memoryStoreName, scope, selectedPath);
+  const [content, setContent] = useState("");
+  const add = useAddWikiSources();
+  const update = useUpdateWikiSource();
+  const remove = useRemoveWikiSource();
+  const diagnosticLabels: WikiSourceDiagnosticLabels = {
+    code: t("wiki.sources.errorCode"),
+    upstreamCode: t("wiki.sources.upstreamCode"),
+    requestId: t("wiki.detail.requestId"),
+    upstreamRequestId: t("wiki.detail.upstreamRequestId"),
+  };
+
+  useEffect(() => {
+    setContent(source.data?.content ?? "");
+  }, [source.data]);
+
+  async function handleFiles(event: ChangeEvent<HTMLInputElement>) {
+    const files = Array.from(event.target.files ?? []).filter((file) =>
+      /\.(md|txt)$/i.test(file.name),
+    );
+    event.target.value = "";
+    const outcomes = await uploadWikiSourceFiles(files, (sources) =>
+      add.mutateAsync({
+        memoryStoreName,
+        scope,
+        sources,
+      }),
+    );
+    showWikiSourceUploadOutcomes(outcomes, t, diagnosticLabels);
+  }
+
+  async function handleSave() {
+    if (!source.data || !selectedPath) return;
+    try {
+      await update.mutateAsync(
+        buildWikiSourceUpdateVariables(
+          memoryStoreName,
+          scope,
+          source.data,
+          content,
+        ),
+      );
+      toast.success(t("wiki.sources.saved"));
+    } catch (error) {
+      showWikiSourceError(error, {
+        fallbackTitle: t("wiki.sources.saveFailed"),
+        conflictMessage: t("wiki.sources.conflict"),
+        refreshLabel: t("wiki.sources.refresh"),
+        onRefresh: () => void source.refetch(),
+        labels: diagnosticLabels,
+      });
+    }
+  }
+
+  async function handleDelete() {
+    if (!source.data || !selectedPath) return;
+    try {
+      await remove.mutateAsync(
+        buildWikiSourceDeleteVariables(memoryStoreName, scope, source.data),
+      );
+      toast.success(t("wiki.sources.deleted"));
+      setSelectedPath(undefined);
+    } catch (error) {
+      showWikiSourceError(error, {
+        fallbackTitle: t("wiki.sources.deleteFailed"),
+        conflictMessage: t("wiki.sources.conflict"),
+        refreshLabel: t("wiki.sources.refresh"),
+        onRefresh: () => void source.refetch(),
+        labels: diagnosticLabels,
+      });
+    }
+  }
+
+  return (
+    <div className="grid min-h-[420px] gap-4 lg:grid-cols-[300px_1fr]">
+      <aside className="rounded-xl border p-3">
+        <label className="flex cursor-pointer items-center justify-center gap-2 rounded-md border border-dashed px-3 py-2 text-sm font-medium hover:bg-muted">
+          <FilePlus2 className="h-4 w-4" />
+          {t("wiki.sources.addFiles")}
+          <input
+            className="sr-only"
+            type="file"
+            accept=".md,.txt,text/markdown,text/plain"
+            multiple
+            onChange={handleFiles}
+          />
+        </label>
+        <p className="mt-2 text-xs text-muted-foreground">
+          {t("wiki.sources.addHint")}
+        </p>
+        <ul className="mt-3 space-y-1">
+          {sources.map((item) => (
+            <li key={item.path}>
+              <button
+                type="button"
+                className="w-full truncate rounded-md px-2 py-1.5 text-left font-mono text-sm hover:bg-muted"
+                onClick={() => setSelectedPath(item.path)}
+              >
+                {item.path}
+              </button>
+            </li>
+          ))}
+        </ul>
+        {list.hasNextPage ? (
+          <Button
+            className="mt-3 w-full"
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={list.isFetchingNextPage}
+            onClick={() => void list.fetchNextPage()}
+          >
+            {list.isFetchingNextPage
+              ? t("common.loading")
+              : t("wiki.sources.loadMore")}
+          </Button>
+        ) : null}
+        {list.isLoading ? (
+          <p className="mt-3 text-sm text-muted-foreground">
+            {t("common.loading")}
+          </p>
+        ) : null}
+        {list.error ? (
+          <WikiSourceErrorNotice
+            error={list.error}
+            fallbackTitle={t("wiki.sources.listFailed")}
+            refreshLabel={t("wiki.sources.refresh")}
+            onRefresh={() => void list.refetch()}
+            labels={diagnosticLabels}
+          />
+        ) : null}
+      </aside>
+      <section className="rounded-xl border p-4">
+        {selectedPath ? (
+          <>
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div>
+                <h3 className="break-all font-mono font-semibold">
+                  {selectedPath}
+                </h3>
+                <p className="text-xs text-muted-foreground">
+                  {t("wiki.sources.version", {
+                    version: source.data?.latestVersionId ?? "-",
+                  })}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleDelete}
+                  disabled={!source.data || remove.isPending}
+                >
+                  <Trash2 className="h-4 w-4" /> {t("wiki.sources.delete")}
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={!source.data || update.isPending}
+                >
+                  <Save className="h-4 w-4" /> {t("wiki.sources.save")}
+                </Button>
+              </div>
+            </div>
+            {source.isLoading ? (
+              <p className="mt-4 text-sm text-muted-foreground">
+                {t("common.loading")}
+              </p>
+            ) : (
+              <Textarea
+                className="mt-4 min-h-80 font-mono"
+                value={content}
+                onChange={(event) => setContent(event.target.value)}
+              />
+            )}
+            {source.error ? (
+              <WikiSourceErrorNotice
+                error={source.error}
+                fallbackTitle={t("wiki.sources.readFailed")}
+                refreshLabel={t("wiki.sources.refresh")}
+                onRefresh={() => void source.refetch()}
+                labels={diagnosticLabels}
+              />
+            ) : null}
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            {t("wiki.sources.selectHint")}
+          </p>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export function WikiSourceErrorNotice({
+  error,
+  fallbackTitle,
+  refreshLabel,
+  onRefresh,
+  labels,
+}: {
+  error: unknown;
+  fallbackTitle: string;
+  refreshLabel: string;
+  onRefresh: () => unknown;
+  labels: WikiSourceDiagnosticLabels;
+}) {
+  const diagnostic = wikiSourceDiagnosticFromError(error, "SOURCE_READ_FAILED");
+  const description = formatWikiSourceDiagnostic(diagnostic, labels);
+  return (
+    <div className="mt-3 rounded-md border border-danger/30 bg-danger-soft p-3 text-sm text-danger">
+      <p className="font-medium">{fallbackTitle}</p>
+      {description ? <p className="mt-1 break-words">{description}</p> : null}
+      <Button
+        className="mt-2"
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => void onRefresh()}
+      >
+        {refreshLabel}
+      </Button>
+    </div>
+  );
+}
+
+interface ShowWikiSourceErrorOptions {
+  fallbackTitle: string;
+  conflictMessage: string;
+  refreshLabel: string;
+  onRefresh: () => unknown;
+  labels: WikiSourceDiagnosticLabels;
+}
+
+export function showWikiSourceError(
+  error: unknown,
+  options: ShowWikiSourceErrorOptions,
+) {
+  if (error instanceof ApiClientError && error.status === 409) {
+    const description = formatWikiSourceDiagnostic(
+      wikiSourceDiagnosticFromError(error, "LOCK_CONFLICT"),
+      options.labels,
+    );
+    toast.error(options.conflictMessage, {
+      ...(description ? { description } : {}),
+      action: {
+        label: options.refreshLabel,
+        onClick: () => void options.onRefresh(),
+      },
+    });
+    return;
+  }
+  showApiError(error, { fallbackTitle: options.fallbackTitle });
+}