@knotpad/app 0.1.0 → 0.1.2

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

@@ -1,369 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-// @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();
-  });
-});