@knotpad/app 0.1.5 → 0.1.7

package/components/settings/agent-token-settings.tsx

@@ -0,0 +1,369 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check, RefreshCw, Trash2 } from "lucide-react";
+import { ConfirmDangerAction } from "@/components/settings/confirm-danger-action";
+
+type Tool = "claude" | "windsurf" | "cursor" | "trae" | "other";
+
+const TOOLS: { id: Tool; label: string; configPath: string; command?: (url: string, token: string) => string }[] = [
+  {
+    id: "claude",
+    label: "Claude Code",
+    configPath: "~/.claude/claude_mcp_config.json",
+    command: (mcpUrl, token) =>
+      `claude mcp add knotpad \\\n  --transport http \\\n  --url ${mcpUrl} \\\n  --header "Authorization: Bearer ${token}"`,
+  },
+  { id: "windsurf", label: "Windsurf", configPath: "~/.windsurf/mcp_config.json" },
+  { id: "cursor", label: "Cursor", configPath: "~/.cursor/mcp.json" },
+  { id: "trae", label: "Trae", configPath: "~/.trae/mcp_config.json" },
+  { id: "other", label: "Other", configPath: "Check your tool's MCP config file" },
+];
+
+function buildConfig(mcpUrl: string, token: string) {
+  return JSON.stringify(
+    {
+      mcpServers: {
+        knotpad: {
+          type: "streamable-http",
+          url: mcpUrl,
+          headers: { Authorization: `Bearer ${token}` },
+        },
+      },
+    },
+    null,
+    2
+  );
+}
+
+type WorkspaceEntry = {
+  id: string;
+  name: string;
+  slug: string;
+  existingToken: { id: string; alias: string | null; lastUsed: string | null } | null;
+};
+
+type WorkspaceCardState = {
+  token: string | null;
+  tokenMeta: { id: string; alias: string | null; lastUsed: string | null } | null;
+  alias: string;
+  generating: boolean;
+  revoking: boolean;
+  savingAlias: boolean;
+  copied: string | null;
+  activeTool: Tool;
+  error: string;
+};
+
+type ConfirmState =
+  | { action: "regenerate" }
+  | { action: "revoke"; tokenId: string }
+  | null;
+
+function WorkspaceTokenCard({
+  workspace,
+  initial,
+  mcpUrl,
+}: {
+  workspace: WorkspaceEntry;
+  initial: WorkspaceEntry["existingToken"];
+  mcpUrl: string;
+}) {
+  const [state, setState] = useState<WorkspaceCardState>({
+    token: null,
+    tokenMeta: initial,
+    alias: initial?.alias ?? "",
+    generating: false,
+    revoking: false,
+    savingAlias: false,
+    copied: null,
+    activeTool: "claude",
+    error: "",
+  });
+  const [confirmState, setConfirmState] = useState<ConfirmState>(null);
+
+  function set(patch: Partial<WorkspaceCardState>) {
+    setState((s) => ({ ...s, ...patch }));
+  }
+
+  async function generate() {
+    set({ generating: true, error: "" });
+    try {
+      const res = await fetch("/api/mcp/generate-token", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ workspaceId: workspace.id }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        set({ token: data.token, tokenMeta: { id: data.id, alias: data.alias, lastUsed: null } });
+      } else {
+        set({ error: "Failed to generate token" });
+      }
+    } catch {
+      set({ error: "Something went wrong. Please try again." });
+    } finally {
+      set({ generating: false });
+    }
+  }
+
+  async function revoke(tokenId: string) {
+    set({ revoking: true, error: "" });
+    try {
+      const res = await fetch(`/api/mcp/revoke-token/${tokenId}`, { method: "DELETE" });
+      if (res.ok) {
+        set({ token: null, tokenMeta: null });
+      } else {
+        const d = await res.json().catch(() => ({}));
+        set({ error: d.error ?? "Failed to revoke token" });
+      }
+    } catch {
+      set({ error: "Something went wrong. Please try again." });
+    } finally {
+      set({ revoking: false });
+    }
+  }
+
+  async function confirmDangerAction() {
+    if (!confirmState) return;
+
+    const pendingAction = confirmState;
+    setConfirmState(null);
+
+    if (pendingAction.action === "regenerate") {
+      await generate();
+      return;
+    }
+
+    await revoke(pendingAction.tokenId);
+  }
+
+  async function saveAlias() {
+    if (!state.tokenMeta) return;
+    set({ savingAlias: true, error: "" });
+    try {
+      const res = await fetch(`/api/mcp/update-alias/${state.tokenMeta.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ alias: state.alias }),
+      });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        set({ error: d.error ?? "Failed to save alias" });
+      }
+    } catch {
+      set({ error: "Something went wrong. Please try again." });
+    } finally {
+      set({ savingAlias: false });
+    }
+  }
+
+  function copy(text: string, key: string) {
+    navigator.clipboard.writeText(text);
+    set({ copied: key });
+    setTimeout(() => set({ copied: null }), 2000);
+  }
+
+  const { token, tokenMeta, alias, generating, revoking, savingAlias, copied, activeTool, error } = state;
+  const displayToken = token ?? (tokenMeta ? "mcp_tok_••••••••••••" : null);
+  const templateToken = token ?? (tokenMeta ? "<your-existing-token>" : null);
+  const config = templateToken ? buildConfig(mcpUrl, templateToken) : "";
+  const showQuickSetup = Boolean(tokenMeta && templateToken);
+  const activeTool_ = TOOLS.find((t) => t.id === activeTool)!;
+
+  return (
+    <div className="rounded-lg border border-zinc-800 bg-zinc-900 overflow-hidden">
+      {/* Workspace header */}
+      <div className="px-4 py-3 border-b border-zinc-800 flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-zinc-200">{workspace.name}</p>
+          <p className="text-xs text-zinc-600 font-mono">{workspace.slug}</p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => {
+              if (tokenMeta) {
+                setConfirmState({ action: "regenerate" });
+                return;
+              }
+
+              void generate();
+            }}
+            disabled={generating}
+            className="flex items-center gap-1.5 rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-700 disabled:opacity-50"
+          >
+            <RefreshCw size={12} className={generating ? "animate-spin" : ""} />
+            {tokenMeta ? "Regenerate" : "Generate"}
+          </button>
+          {tokenMeta && (
+            <button
+              onClick={() => setConfirmState({ action: "revoke", tokenId: tokenMeta.id })}
+              disabled={revoking}
+              className="flex items-center gap-1.5 rounded-md border border-red-900/40 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/20 disabled:opacity-50"
+            >
+              <Trash2 size={12} />
+              Revoke
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="p-4 space-y-4">
+        {tokenMeta?.lastUsed && (
+          <p className="text-xs text-zinc-600">
+            Last active: {new Date(tokenMeta.lastUsed).toLocaleString()}
+          </p>
+        )}
+
+        {displayToken && (
+          <div className="flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-2">
+            <code className="flex-1 text-xs text-zinc-400 font-mono truncate">{displayToken}</code>
+            {token && (
+              <button
+                aria-label="Copy token"
+                onClick={() => copy(token, "token")}
+                className="shrink-0 text-zinc-500 hover:text-zinc-300"
+              >
+                {copied === "token" ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+              </button>
+            )}
+          </div>
+        )}
+
+        {token && (
+          <p className="text-xs text-amber-400 bg-amber-950/20 border border-amber-900/30 rounded px-3 py-2">
+            Copy this token now — it won't be shown again after you leave this page.
+          </p>
+        )}
+
+        {error && <p className="text-xs text-red-400">{error}</p>}
+
+        {tokenMeta && (
+          <div className="flex items-center gap-2">
+            <input
+              value={alias}
+              onChange={(e) => set({ alias: e.target.value })}
+              placeholder={`e.g. "My Claude Code for ${workspace.name}"`}
+              className="flex-1 rounded-md border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300 placeholder-zinc-600 focus:border-zinc-500 focus:outline-none ring-focus"
+            />
+            <button
+              onClick={saveAlias}
+              disabled={savingAlias}
+              className="rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-700 disabled:opacity-50"
+            >
+              {savingAlias ? "Saving…" : "Save alias"}
+            </button>
+          </div>
+        )}
+
+        {!tokenMeta && (
+          <p className="text-xs text-zinc-600 text-center py-2">
+            No token yet — click <span className="text-zinc-400">Generate</span> to create one.
+          </p>
+        )}
+
+        {showQuickSetup && (
+          <div className="space-y-3 pt-2 border-t border-zinc-800">
+            <p className="text-sm font-medium text-zinc-300">Quick Setup</p>
+            {!token && (
+              <p className="text-xs text-zinc-500">
+                Your existing token is still active, but the secret is only shown once. Paste your saved token into
+                this template, or regenerate only if you no longer have it.
+              </p>
+            )}
+            <div className="flex gap-1">
+              {TOOLS.map((t) => (
+                <button
+                  key={t.id}
+                  onClick={() => set({ activeTool: t.id })}
+                  className={`rounded-md px-3 py-1.5 text-xs transition-colors ${
+                    activeTool === t.id
+                      ? "bg-zinc-700 text-zinc-100"
+                      : "text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
+                  }`}
+                >
+                  {t.label}
+                </button>
+              ))}
+            </div>
+
+            <div className="rounded-lg border border-zinc-800 bg-zinc-950 p-4 space-y-3">
+              <div>
+                <p className="text-xs text-zinc-500 mb-1">
+                  Paste into: <code className="text-zinc-400">{activeTool_.configPath}</code>
+                </p>
+                <div className="relative">
+                  <pre className="text-xs text-zinc-300 font-mono overflow-x-auto">{config}</pre>
+                  <button
+                    aria-label="Copy MCP config"
+                    onClick={() => copy(config, "config")}
+                    className="absolute top-0 right-0 text-zinc-600 hover:text-zinc-300"
+                  >
+                    {copied === "config" ? <Check size={13} className="text-emerald-400" /> : <Copy size={13} />}
+                  </button>
+                </div>
+              </div>
+
+              {activeTool === "claude" && activeTool_.command && (
+                <div className="border-t border-zinc-800 pt-3">
+                  <p className="text-xs text-zinc-500 mb-1">Or run this command:</p>
+                  <div className="relative">
+                    <pre className="text-xs text-zinc-300 font-mono">{activeTool_.command(mcpUrl, templateToken!)}</pre>
+                    <button
+                      aria-label="Copy MCP command"
+                      onClick={() => copy(activeTool_.command!(mcpUrl, templateToken!), "cmd")}
+                      className="absolute top-0 right-0 text-zinc-600 hover:text-zinc-300"
+                    >
+                      {copied === "cmd" ? <Check size={13} className="text-emerald-400" /> : <Copy size={13} />}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      <ConfirmDangerAction
+        open={confirmState !== null}
+        title={confirmState?.action === "regenerate" ? "Regenerate token" : "Revoke token"}
+        body={
+          confirmState?.action === "regenerate"
+            ? "Regenerating this token disconnects any connected agent immediately."
+            : "Revoke this token? Any connected agent will stop working immediately."
+        }
+        busy={generating || revoking}
+        onConfirm={confirmDangerAction}
+        onClose={() => setConfirmState(null)}
+      />
+    </div>
+  );
+}
+
+export function AgentTokenSettings({
+  workspaces,
+  mcpUrl,
+}: {
+  workspaces: WorkspaceEntry[];
+  mcpUrl: string;
+  appUrl: string;
+  userId: string;
+}) {
+  return (
+    <div className="space-y-4">
+      <section className="rounded-xl border border-red-900/40 bg-red-950/10 p-4">
+        <h3 className="text-sm font-medium text-red-200">Danger zone</h3>
+        <p className="mt-1 text-xs text-red-300/80">
+          Revoking or regenerating a token disconnects any agent currently using it.
+        </p>
+      </section>
+      {workspaces.map((ws) => (
+        <WorkspaceTokenCard
+          key={ws.id}
+          workspace={ws}
+          initial={ws.existingToken}
+          mcpUrl={mcpUrl}
+        />
+      ))}
+    </div>
+  );
+}

package/components/settings/backup-restore-settings.test.tsx

@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { BackupRestoreSettings } from "@/components/settings/backup-restore-settings";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ refresh: vi.fn() }),
+}));
+
+describe("BackupRestoreSettings", () => {
+  it("shows manual backup buttons and restore button for cloud workspaces", () => {
+    render(
+      <BackupRestoreSettings
+        isCloudWorkspace
+        isOwner
+        initialSettings={null}
+      />
+    );
+
+    expect(screen.getByText("Download DB backup")).toBeInTheDocument();
+    expect(screen.getByText("Download notes ZIP")).toBeInTheDocument();
+    expect(screen.getByText("Restore from file...")).toBeInTheDocument();
+    expect(screen.queryByText("Enable scheduled backup")).not.toBeInTheDocument();
+  });
+});