paperclip-plugin-claude-accounts 0.3.0 → 0.4.0

package/dist/manifest.js

@@ -2,7 +2,7 @@
 var manifest = {
   id: "neotalk.claude-autoauth",
   apiVersion: 1,
-  version: "0.3.0",
+  version: "0.4.0",
   displayName: "Claude Accounts",
   description: "Each team member connects their own Claude account from the browser (no shell), picks which agents use it, and it stays signed in across restarts.",
   author: "Victor <victor@neotalk.com.br>",

package/dist/ui/index.js

@@ -2,9 +2,11 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   useHostContext,
+  useHostLocation,
   useHostNavigation,
   usePluginAction,
-  usePluginData
+  usePluginData,
+  usePluginToast
 } from "@paperclipai/plugin-sdk/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 async function api(method, url, body) {
@@ -44,19 +46,169 @@ async function setAgentConfigDir(agentId, dir) {
   else delete env.CLAUDE_CONFIG_DIR;
   await api("PATCH", `/agents/${agentId}`, { adapterConfig: { env } });
 }
-var S = {
-  card: { border: "1px solid var(--border, #8884)", borderRadius: 10, padding: 16, marginBottom: 16, maxWidth: 760 },
-  row: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" },
-  muted: { opacity: 0.7, fontSize: 13 },
-  input: { flex: 1, minWidth: 220, padding: "8px 10px", borderRadius: 6, border: "1px solid var(--border, #8886)", background: "transparent", color: "inherit", fontFamily: "monospace" },
-  btn: { padding: "7px 12px", borderRadius: 6, border: "1px solid var(--border, #8886)", background: "transparent", color: "inherit", cursor: "pointer" },
-  primary: { padding: "7px 14px", borderRadius: 6, border: "none", background: "#d97757", color: "#fff", cursor: "pointer", fontWeight: 600 },
-  ok: { color: "#2e9d5b", fontWeight: 600 },
-  bad: { color: "#d14343", fontWeight: 600 },
-  code: { fontFamily: "monospace", fontSize: 12, wordBreak: "break-all" }
+async function myClaudeConnections(companyId) {
+  const r = await api("GET", `/companies/${companyId}/ai-connections`);
+  return r.connections.filter(
+    (c) => c.provider === "anthropic" && c.method === "subscription" && c.ownership === "personal" && c.ownerUserId === r.currentUserId
+  );
+}
+async function connectToPaperclip(companyId, fill, record, opts = {}) {
+  const intent = {
+    provider: "anthropic",
+    method: "subscription",
+    name: opts.name ?? "My Claude",
+    ownership: "personal",
+    agentIds: [],
+    allAgents: false,
+    ...opts.connectionId ? { connectionId: opts.connectionId } : {}
+  };
+  const attempt = await api("POST", `/companies/${companyId}/ai-connections/local/attempts`, {
+    ...intent,
+    restart: true
+  });
+  const filled = await fill({ command: attempt.command });
+  if (!filled.filled) {
+    await api("DELETE", `/companies/${companyId}/ai-connections/local/attempts/${attempt.sessionId}`).catch(() => {
+    });
+    return { connectionId: "", needsSignIn: true };
+  }
+  const saved = await api("POST", `/companies/${companyId}/ai-connections/local`, {
+    ...intent,
+    localSessionId: attempt.sessionId
+  });
+  await record({ companyId, connectionId: saved.connectionId, name: intent.name });
+  return { connectionId: saved.connectionId };
+}
+var errText = (e) => String(e?.message ?? e);
+var cx = (...c) => c.filter(Boolean).join(" ");
+var BTN_BASE = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50";
+var BTN_VARIANT = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+  ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+  destructive: "bg-destructive text-white hover:bg-destructive/90 dark:bg-destructive/60"
+};
+var BTN_SIZE = { default: "h-10 px-4 py-2", sm: "h-9 rounded-md gap-1.5 px-3" };
+function Button(p) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "button",
+      disabled: p.disabled,
+      onClick: p.onClick,
+      className: cx(BTN_BASE, BTN_VARIANT[p.variant ?? "default"], BTN_SIZE[p.size ?? "sm"], p.className),
+      children: p.children
+    }
+  );
+}
+function Input(p) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "input",
+      type: p.type ?? "text",
+      value: p.value,
+      autoFocus: p.autoFocus,
+      placeholder: p.placeholder,
+      onChange: (e) => p.onChange(e.target.value),
+      className: "placeholder:text-muted-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs outline-none md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 font-mono"
+    }
+  );
+}
+function Badge({ tone, children }) {
+  const tones = {
+    ok: "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400",
+    warn: "border-amber-400 text-amber-600",
+    bad: "border-destructive/30 bg-destructive/10 text-destructive",
+    muted: "border-border text-muted-foreground"
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "badge",
+      className: cx("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1", tones[tone]),
+      children
+    }
+  );
+}
+var ICONS = {
+  key: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16.5", cy: "7.5", r: ".5", fill: "currentColor" })
+  ] }),
+  check: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }),
+  external: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+  ] }),
+  loader: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }),
+  chevron: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }),
+  bot: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 8V4H8" }),
+    /* @__PURE__ */ jsx("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 14h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 14h2" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 13v2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 13v2" })
+  ] })
 };
-function Btn(p) {
-  return /* @__PURE__ */ jsx("button", { style: { ...p.primary ? S.primary : S.btn, opacity: p.disabled ? 0.5 : 1 }, disabled: p.disabled, onClick: p.onClick, children: p.children });
+function Icon({ name, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: cx("h-4 w-4 shrink-0", className),
+      children: ICONS[name]
+    }
+  );
+}
+var Spinner = () => /* @__PURE__ */ jsx(Icon, { name: "loader", className: "animate-spin" });
+function Step({ n, done, title, description, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
+          done ? "bg-primary text-primary-foreground" : "border border-border text-muted-foreground"
+        ),
+        children: done ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "h-3.5 w-3.5" }) : n
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+      ] }),
+      children
+    ] })
+  ] });
+}
+function Disclosure({ title, children }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: "flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "chevron", className: cx("h-3.5 w-3.5 transition-transform", open && "rotate-90") }),
+          title
+        ]
+      }
+    ),
+    open && children
+  ] });
 }
 function useMyAccount() {
   const me = usePluginAction("me");
@@ -67,7 +219,7 @@ function useMyAccount() {
       setAccount(await me());
       setError(null);
     } catch (e) {
-      setError(String(e.message ?? e));
+      setError(errText(e));
     }
   }, [me]);
   useEffect(() => {
@@ -75,298 +227,280 @@ function useMyAccount() {
   }, [refresh]);
   return { account, setAccount, error, refresh };
 }
-function ConnectCard({ account, onChange }) {
+function useClaudeConnections(companyId) {
+  const [conns, setConns] = useState(null);
+  const load = useCallback(() => {
+    if (!companyId) return;
+    myClaudeConnections(companyId).then(setConns).catch(() => setConns([]));
+  }, [companyId]);
+  useEffect(load, [load]);
+  return { conns, load, existing: conns?.find((c) => c.isDefault) ?? conns?.[0] };
+}
+function SignInStep({ account, onChange }) {
+  const toast = usePluginToast();
   const loginStart = usePluginAction("login-start");
   const loginCode = usePluginAction("login-code");
   const loginCancel = usePluginAction("login-cancel");
   const saveToken = usePluginAction("save-token");
   const disconnect = usePluginAction("disconnect");
-  const [url, setUrl] = useState(account?.login?.url ?? null);
+  const [url, setUrl] = useState(account.login?.url ?? null);
   const [code, setCode] = useState("");
   const [paste, setPaste] = useState("");
-  const [showPaste, setShowPaste] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [msg, setMsg] = useState(null);
-  const run = async (fn) => {
-    setBusy(true);
-    setMsg(null);
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const run = async (key, fn) => {
+    setBusy(key);
+    setError(null);
     try {
       await fn();
     } catch (e) {
-      setMsg({ ok: false, text: String(e.message ?? e) });
+      setError(errText(e));
     } finally {
-      setBusy(false);
+      setBusy(null);
     }
   };
-  if (!account) return /* @__PURE__ */ jsx("div", { style: S.card, children: "Loading\u2026" });
-  return /* @__PURE__ */ jsxs("div", { style: S.card, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginTop: 0 }, children: "My Claude account" }),
-    account.connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { style: S.row, children: [
-        /* @__PURE__ */ jsx("span", { style: S.ok, children: "\u25CF Connected" }),
-        /* @__PURE__ */ jsx("span", { style: S.muted, children: account.hasRefreshToken ? "renews automatically" : `token valid until ${account.expiresAt?.slice(0, 10) ?? "?"}` })
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: { ...S.row, marginTop: 12 }, children: /* @__PURE__ */ jsx(
-        Btn,
+  const description = account.connected ? account.hasRefreshToken ? "Signed in. Your login renews automatically." : `Signed in with a long-lived token, valid until ${account.expiresAt?.slice(0, 10) ?? "\u2014"}.` : "Use your own Claude Pro or Max subscription. You approve it on claude.ai, no terminal needed.";
+  return /* @__PURE__ */ jsxs(Step, { n: 1, done: account.connected, title: "Sign in to Claude", description, children: [
+    account.connected ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Badge, { tone: "ok", children: "Signed in" }),
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          disabled: busy,
-          onClick: () => run(async () => {
-            if (!confirm("Disconnect your Claude account? Agents using it will stop working.")) return;
+          variant: "ghost",
+          disabled: !!busy,
+          onClick: () => run("disconnect", async () => {
+            if (!confirm("Sign out of Claude? Agents using your account will stop working until you sign in again.")) return;
             await disconnect();
             onChange(null);
+            toast({ title: "Signed out of Claude", tone: "info" });
           }),
-          children: "Disconnect"
+          children: "Sign out"
         }
-      ) })
-    ] }) : url ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("p", { style: { marginTop: 0 }, children: [
-        /* @__PURE__ */ jsx("b", { children: "1." }),
-        " ",
-        /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noreferrer", children: "Open the Claude sign-in page \u2197" }),
+      )
+    ] }) : url ? /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border bg-muted/40 p-4", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+        "Approve the request on claude.ai, then paste the code it shows you.",
         " ",
-        "and approve."
-      ] }),
-      /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx("b", { children: "2." }),
-        " Paste the code that Claude shows you:"
+        /* @__PURE__ */ jsxs("a", { href: url, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1 font-medium text-primary underline-offset-4 hover:underline", children: [
+          "Open claude.ai ",
+          /* @__PURE__ */ jsx(Icon, { name: "external", className: "h-3.5 w-3.5" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.row, children: [
-        /* @__PURE__ */ jsx("input", { style: S.input, value: code, onChange: (e) => setCode(e.target.value), placeholder: "code#state", autoFocus: true }),
-        /* @__PURE__ */ jsx(
-          Btn,
-          {
-            primary: true,
-            disabled: busy || !code.trim(),
-            onClick: () => run(async () => {
-              const r = await loginCode({ code });
-              setMsg({ ok: r.ok, text: r.message });
-              if (r.ok) {
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+        /* @__PURE__ */ jsx(Input, { value: code, onChange: setCode, placeholder: "Paste code", autoFocus: true }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              disabled: !!busy || !code.trim(),
+              onClick: () => run("code", async () => {
+                const r = await loginCode({ code });
+                if (!r.ok) throw new Error(r.message);
                 setUrl(null);
                 onChange(r.status);
-              }
-            }),
-            children: busy ? "Connecting\u2026" : "Connect"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Btn,
-          {
-            disabled: busy,
-            onClick: () => run(async () => {
-              await loginCancel();
-              setUrl(null);
-            }),
-            children: "Cancel"
-          }
-        )
+                toast({ title: "Signed in to Claude", tone: "success" });
+              }),
+              children: [
+                busy === "code" && /* @__PURE__ */ jsx(Spinner, {}),
+                busy === "code" ? "Checking\u2026" : "Continue"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              disabled: !!busy,
+              onClick: () => run("cancel", async () => {
+                await loginCancel();
+                setUrl(null);
+                setCode("");
+              }),
+              children: "Cancel"
+            }
+          )
+        ] })
       ] })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { style: { marginTop: 0 }, children: "Connect your own Claude Pro/Max account. Your agents will use it, and it stays signed in." }),
-      /* @__PURE__ */ jsxs("div", { style: S.row, children: [
-        /* @__PURE__ */ jsx(
-          Btn,
-          {
-            primary: true,
-            disabled: busy,
-            onClick: () => run(async () => {
-              const r = await loginStart();
-              setUrl(r.url);
-              window.open(r.url, "_blank", "noopener");
-            }),
-            children: busy ? "Starting\u2026" : "Sign in with Claude"
-          }
-        ),
-        /* @__PURE__ */ jsx(Btn, { onClick: () => setShowPaste((v) => !v), children: "Paste a token instead" })
-      ] }),
-      showPaste && /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsxs("p", { style: S.muted, children: [
-          "On your computer run ",
-          /* @__PURE__ */ jsx("code", { children: "claude setup-token" }),
-          " and paste the ",
-          /* @__PURE__ */ jsx("code", { children: "sk-ant-oat\u2026" }),
-          " token, or paste the contents of ",
-          /* @__PURE__ */ jsx("code", { children: "~/.claude/.credentials.json" }),
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          disabled: !!busy,
+          onClick: () => run("start", async () => {
+            const r = await loginStart();
+            setUrl(r.url);
+            window.open(r.url, "_blank", "noopener");
+          }),
+          children: [
+            busy === "start" ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Icon, { name: "external" }),
+            busy === "start" ? "Opening Claude\u2026" : "Sign in with Claude"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Disclosure, { title: "Use a token instead", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          "Run ",
+          /* @__PURE__ */ jsx("code", { className: "font-mono text-xs", children: "claude setup-token" }),
+          " on your computer and paste the token, or paste the contents of ",
+          /* @__PURE__ */ jsx("code", { className: "font-mono text-xs", children: "~/.claude/.credentials.json" }),
           "."
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.row, children: [
-          /* @__PURE__ */ jsx("input", { style: S.input, type: "password", value: paste, onChange: (e) => setPaste(e.target.value), placeholder: "sk-ant-oat01-\u2026" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+          /* @__PURE__ */ jsx(Input, { type: "password", value: paste, onChange: setPaste, placeholder: "sk-ant-oat01-\u2026" }),
           /* @__PURE__ */ jsx(
-            Btn,
+            Button,
             {
-              primary: true,
-              disabled: busy || !paste.trim(),
-              onClick: () => run(async () => {
+              variant: "outline",
+              disabled: !!busy || !paste.trim(),
+              onClick: () => run("paste", async () => {
                 onChange(await saveToken({ value: paste }));
                 setPaste("");
-                setShowPaste(false);
+                toast({ title: "Claude token saved", tone: "success" });
               }),
-              children: "Save"
+              children: "Save token"
             }
           )
         ] })
-      ] })
+      ] }) })
     ] }),
-    msg && /* @__PURE__ */ jsx("p", { style: msg.ok ? S.ok : S.bad, children: msg.text })
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })
   ] });
 }
+function ConnectionStep({ companyId, account }) {
+  const toast = usePluginToast();
+  const fill = usePluginAction("native-fill");
+  const record = usePluginAction("native-record");
+  const { existing, load } = useClaudeConnections(companyId);
+  const [cmd, setCmd] = useState("");
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const run = async (key, fn) => {
+    setBusy(key);
+    setError(null);
+    try {
+      await fn();
+      load();
+    } catch (e) {
+      setError(errText(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+  const connected = existing?.status === "connected";
+  return /* @__PURE__ */ jsxs(
+    Step,
+    {
+      n: 2,
+      done: !!connected,
+      title: "Use it in Paperclip",
+      description: "Saves your Claude as your personal AI connection. Agents you're responsible for use it, and it's kept fresh automatically.",
+      children: [
+        existing && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: existing.name }),
+          /* @__PURE__ */ jsx(Badge, { tone: connected ? "ok" : "warn", children: connected ? "Connected" : existing.status.replace(/_/g, " ") }),
+          existing.isDefault && /* @__PURE__ */ jsx(Badge, { tone: "muted", children: "Default" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: existing ? "outline" : "default",
+              disabled: !!busy || !account.connected,
+              onClick: () => run("connect", async () => {
+                const r = await connectToPaperclip(companyId, fill, record, existing ? { connectionId: existing.id, name: existing.name } : {});
+                if (r.needsSignIn) throw new Error("Sign in to Claude first.");
+                toast({ title: existing ? "Claude reconnected" : "Claude connected to Paperclip", tone: "success" });
+              }),
+              children: [
+                busy === "connect" && /* @__PURE__ */ jsx(Spinner, {}),
+                busy === "connect" ? "Connecting\u2026" : existing ? "Reconnect" : "Connect to Paperclip"
+              ]
+            }
+          ),
+          !account.connected && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Finish step 1 first." })
+        ] }),
+        /* @__PURE__ */ jsx(Disclosure, { title: "Paperclip showed me a terminal command", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "Paste the ",
+            /* @__PURE__ */ jsx("code", { className: "font-mono text-xs", children: "export CLAUDE_CONFIG_DIR=\u2026 claude auth login" }),
+            " command here. The plugin does it for you. Then click ",
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Connect" }),
+            " in Paperclip's dialog."
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+            /* @__PURE__ */ jsx(Input, { value: cmd, onChange: setCmd, placeholder: "(export CLAUDE_CONFIG_DIR='\u2026/ai-local-logins/\u2026' && \u2026)" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                disabled: !!busy || !cmd.trim() || !account.connected,
+                onClick: () => run("fill", async () => {
+                  const r = await fill({ command: cmd });
+                  if (!r.filled) throw new Error("Sign in to Claude first.");
+                  setCmd("");
+                  toast({ title: "Done. Click Connect in Paperclip's dialog", tone: "success" });
+                }),
+                children: "Do it for me"
+              }
+            )
+          ] })
+        ] }) }),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })
+      ]
+    }
+  );
+}
 function AgentToggle({ agent, account, onDone }) {
+  const toast = usePluginToast();
   const [busy, setBusy] = useState(false);
-  const [err, setErr] = useState(null);
-  const dir = agentConfigDir(agent);
-  const mine = dir === account.claudeConfigDir;
-  const bound = !!agent.runtimeConfig?.aiConnection;
+  const mine = agentConfigDir(agent) === account.claudeConfigDir;
   const set = async (value) => {
     setBusy(true);
-    setErr(null);
     try {
       await setAgentConfigDir(agent.id, value);
+      toast({ title: value ? `${agent.name} now uses your Claude` : `${agent.name} no longer uses your Claude`, tone: "success" });
       onDone();
     } catch (e) {
-      setErr(String(e.message ?? e));
+      toast({ title: "Couldn't update agent", body: errText(e), tone: "error" });
     } finally {
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    mine ? /* @__PURE__ */ jsx(Btn, { disabled: busy, onClick: () => set(null), children: "Stop using my Claude" }) : /* @__PURE__ */ jsx(Btn, { primary: true, disabled: busy || !account.connected, onClick: () => set(account.claudeConfigDir), children: "Use my Claude" }),
-    bound && /* @__PURE__ */ jsx("span", { style: { ...S.muted, color: "#c48a00" }, children: "\u26A0 This agent has a Paperclip \u201CAI connection\u201D selected, which overrides the folder. Switch it to the local login in the agent's settings." }),
-    err && /* @__PURE__ */ jsx("span", { style: S.bad, children: err })
+  return mine ? /* @__PURE__ */ jsxs(Button, { variant: "ghost", disabled: busy, onClick: () => set(null), children: [
+    busy && /* @__PURE__ */ jsx(Spinner, {}),
+    "Stop using"
+  ] }) : /* @__PURE__ */ jsxs(Button, { variant: "outline", disabled: busy || !account.connected, onClick: () => set(account.claudeConfigDir), children: [
+    busy && /* @__PURE__ */ jsx(Spinner, {}),
+    "Use my Claude"
   ] });
 }
-function AgentsCard({ companyId, account }) {
+function AgentsSection({ companyId, account }) {
   const [agents, setAgents] = useState(null);
-  const [err, setErr] = useState(null);
+  const [error, setError] = useState(null);
   const load = useCallback(() => {
-    listClaudeAgents(companyId).then(setAgents).catch((e) => setErr(String(e.message ?? e)));
+    listClaudeAgents(companyId).then(setAgents).catch((e) => setError(errText(e)));
   }, [companyId]);
   useEffect(load, [load]);
-  return /* @__PURE__ */ jsxs("div", { style: S.card, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginTop: 0 }, children: "Agents" }),
-    /* @__PURE__ */ jsx("p", { style: S.muted, children: "Choose which Claude agents run on your account. Each person can connect their own." }),
-    err && /* @__PURE__ */ jsx("p", { style: S.bad, children: err }),
-    !agents ? /* @__PURE__ */ jsx("p", { children: "Loading\u2026" }) : agents.length === 0 ? /* @__PURE__ */ jsx("p", { style: S.muted, children: "No Claude (claude_local) agents in this company." }) : agents.map((a) => {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Run agents directly on your login" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "For agents that must keep working while you're away. They renew the login on the server, no browser needed. Agents with a Paperclip AI connection selected keep using that instead." })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+    !agents ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading agents\u2026" }) : agents.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No Claude Code agents in this company." }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-border rounded-lg border border-border", children: agents.map((a) => {
       const dir = agentConfigDir(a);
-      return /* @__PURE__ */ jsxs("div", { style: { ...S.row, padding: "8px 0", borderTop: "1px solid var(--border, #8882)" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { minWidth: 160, fontWeight: 600 }, children: a.name }),
-        /* @__PURE__ */ jsx("span", { style: { ...S.muted, minWidth: 130 }, children: dir === account.claudeConfigDir ? "uses your Claude" : dir ? "uses another account" : "server login" }),
+      const mine = dir === account.claudeConfigDir;
+      const bound = !!a.runtimeConfig?.aiConnection;
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "bot", className: "text-muted-foreground" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: a.name }),
+          /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: bound ? "Uses a Paperclip AI connection" : mine ? "Your Claude" : dir ? "Another account" : "Server login" })
+        ] }),
+        mine && /* @__PURE__ */ jsx(Badge, { tone: "ok", children: "Yours" }),
         /* @__PURE__ */ jsx(AgentToggle, { agent: a, account, onDone: load })
       ] }, a.id);
-    })
-  ] });
-}
-async function myClaudeConnections(companyId) {
-  const r = await api("GET", `/companies/${companyId}/ai-connections`);
-  return r.connections.filter(
-    (c) => c.provider === "anthropic" && c.method === "subscription" && c.ownership === "personal" && c.ownerUserId === r.currentUserId
-  );
-}
-async function connectToPaperclip(companyId, fill, record, opts = {}) {
-  const intent = {
-    provider: "anthropic",
-    method: "subscription",
-    name: opts.name ?? "My Claude",
-    ownership: "personal",
-    agentIds: [],
-    allAgents: false,
-    ...opts.connectionId ? { connectionId: opts.connectionId } : {}
-  };
-  const attempt = await api("POST", `/companies/${companyId}/ai-connections/local/attempts`, {
-    ...intent,
-    restart: true
-  });
-  const filled = await fill({ command: attempt.command });
-  if (!filled.filled) {
-    await api("DELETE", `/companies/${companyId}/ai-connections/local/attempts/${attempt.sessionId}`).catch(() => {
-    });
-    return { connectionId: "", needsSignIn: true };
-  }
-  const saved = await api("POST", `/companies/${companyId}/ai-connections/local`, {
-    ...intent,
-    localSessionId: attempt.sessionId
-  });
-  await record({ companyId, connectionId: saved.connectionId, name: intent.name });
-  return { connectionId: saved.connectionId };
-}
-function PaperclipConnectionCard({ companyId, account }) {
-  const fill = usePluginAction("native-fill");
-  const record = usePluginAction("native-record");
-  const [conns, setConns] = useState(null);
-  const [cmd, setCmd] = useState("");
-  const [busy, setBusy] = useState(false);
-  const [msg, setMsg] = useState(null);
-  const load = useCallback(() => {
-    myClaudeConnections(companyId).then(setConns).catch(() => setConns([]));
-  }, [companyId]);
-  useEffect(load, [load]);
-  const run = async (fn) => {
-    setBusy(true);
-    setMsg(null);
-    try {
-      setMsg({ ok: true, text: await fn() });
-      load();
-    } catch (e) {
-      setMsg({ ok: false, text: String(e.message ?? e) });
-    } finally {
-      setBusy(false);
-    }
-  };
-  const existing = conns?.find((c) => c.isDefault) ?? conns?.[0];
-  return /* @__PURE__ */ jsxs("div", { style: S.card, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginTop: 0 }, children: "Paperclip AI connection" }),
-    /* @__PURE__ */ jsx("p", { style: S.muted, children: "Saves your Claude as your personal Paperclip AI connection, with no terminal. Agents set to \u201Cresponsible user\u201D use it. The plugin renews it before it expires." }),
-    existing && /* @__PURE__ */ jsxs("p", { children: [
-      /* @__PURE__ */ jsxs("span", { style: existing.status === "connected" ? S.ok : S.bad, children: [
-        "\u25CF ",
-        existing.name
-      ] }),
-      " ",
-      /* @__PURE__ */ jsxs("span", { style: S.muted, children: [
-        existing.status,
-        existing.isDefault ? " \xB7 default" : ""
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: S.row, children: [
-      /* @__PURE__ */ jsx(
-        Btn,
-        {
-          primary: true,
-          disabled: busy || !account.connected,
-          onClick: () => run(async () => {
-            const r = await connectToPaperclip(companyId, fill, record, existing ? { connectionId: existing.id, name: existing.name } : {});
-            return r.needsSignIn ? "Sign in with Claude above first." : existing ? "Reconnected \u2713" : "Connected \u2713";
-          }),
-          children: busy ? "Connecting\u2026" : existing ? "Reconnect now" : "Connect to Paperclip"
-        }
-      ),
-      !account.connected && /* @__PURE__ */ jsx("span", { style: S.muted, children: "Sign in with Claude above first." })
-    ] }),
-    /* @__PURE__ */ jsxs("details", { style: { marginTop: 14 }, children: [
-      /* @__PURE__ */ jsx("summary", { style: { cursor: "pointer" }, children: "Paperclip showed me a terminal command" }),
-      /* @__PURE__ */ jsxs("p", { style: S.muted, children: [
-        "Paste it here. It looks like ",
-        /* @__PURE__ */ jsx("code", { style: S.code, children: "(export CLAUDE_CONFIG_DIR='\u2026/ai-local-logins/\u2026' && \u2026 claude auth login)" }),
-        ". The plugin does that step for you. Then click ",
-        /* @__PURE__ */ jsx("b", { children: "Connect" }),
-        " in Paperclip's dialog."
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.row, children: [
-        /* @__PURE__ */ jsx("input", { style: S.input, value: cmd, onChange: (e) => setCmd(e.target.value), placeholder: "(export CLAUDE_CONFIG_DIR=\u2026" }),
-        /* @__PURE__ */ jsx(
-          Btn,
-          {
-            disabled: busy || !cmd.trim(),
-            onClick: () => run(async () => {
-              const r = await fill({ command: cmd });
-              if (!r.filled) throw new Error("Sign in with Claude above first, then paste again.");
-              setCmd("");
-              return "Done. Now click Connect in Paperclip's dialog.";
-            }),
-            children: "Do it for me"
-          }
-        )
-      ] })
-    ] }),
-    msg && /* @__PURE__ */ jsx("p", { style: msg.ok ? S.ok : S.bad, children: msg.text })
+    }) })
   ] });
 }
 function useNativeKeepAlive(companyId) {
@@ -398,48 +532,84 @@ function useNativeKeepAlive(companyId) {
     return () => clearInterval(t);
   }, [companyId, keepalive, fill, record]);
 }
+var PAGE_ROUTE = "/claude-accounts";
 function ClaudeAccountsPage(_props) {
   const { companyId } = useHostContext();
   const { account, setAccount, error, refresh } = useMyAccount();
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 24 }, children: [
-    /* @__PURE__ */ jsx("h2", { style: { marginTop: 0 }, children: "Claude accounts" }),
-    error && /* @__PURE__ */ jsx("p", { style: S.bad, children: error }),
-    /* @__PURE__ */ jsx(ConnectCard, { account, onChange: (a) => a ? setAccount(a) : void refresh() }),
-    account && companyId && /* @__PURE__ */ jsx(PaperclipConnectionCard, { companyId, account }),
-    account && companyId && /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsx("summary", { style: { cursor: "pointer", marginBottom: 12 }, children: "Advanced: run specific agents directly on my login folder" }),
-      /* @__PURE__ */ jsx(AgentsCard, { companyId, account })
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-3xl space-y-6 pb-12", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "key", className: "h-6 w-6 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold", children: "Claude accounts" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Connect your own Claude subscription once. It stays signed in, even across restarts." })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: error }),
+    !account ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      " Loading\u2026"
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-6 rounded-lg border border-border p-4", children: [
+        /* @__PURE__ */ jsx(SignInStep, { account, onChange: (a) => a ? setAccount(a) : void refresh() }),
+        companyId && /* @__PURE__ */ jsx(ConnectionStep, { companyId, account })
+      ] }),
+      companyId && /* @__PURE__ */ jsx(Disclosure, { title: "Advanced", children: /* @__PURE__ */ jsx(AgentsSection, { companyId, account }) })
     ] })
   ] });
 }
 function ClaudeAccountsSidebar(_props) {
   const nav = useHostNavigation();
+  const { pathname } = useHostLocation();
   const { companyId } = useHostContext();
   useNativeKeepAlive(companyId);
-  return /* @__PURE__ */ jsx("a", { ...nav.linkProps("/claude-accounts"), children: "Claude accounts" });
+  const active = pathname === nav.resolveHref(PAGE_ROUTE);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...nav.linkProps(PAGE_ROUTE),
+      "aria-current": active ? "page" : void 0,
+      className: cx(
+        "flex items-center gap-2.5 mx-2 rounded-lg px-2 py-1.5 pointer-coarse:py-1 text-(length:--text-compact) font-medium transition-colors",
+        active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "sidebar-nav-icon", className: "relative shrink-0", children: /* @__PURE__ */ jsx(Icon, { name: "key" }) }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: "Claude accounts" })
+      ]
+    }
+  );
 }
 function AgentClaudeTab({ context }) {
-  const { account, setAccount, refresh } = useMyAccount();
+  const nav = useHostNavigation();
+  const { account } = useMyAccount();
   const [agent, setAgent] = useState(null);
-  const [err, setErr] = useState(null);
+  const [error, setError] = useState(null);
   const load = useCallback(() => {
-    api("GET", `/agents/${context.entityId}`).then(setAgent).catch((e) => setErr(String(e.message ?? e)));
+    api("GET", `/agents/${context.entityId}`).then(setAgent).catch((e) => setError(errText(e)));
   }, [context.entityId]);
   useEffect(load, [load]);
   const dir = agent ? agentConfigDir(agent) : null;
   const owner = usePluginData("dir-owner", { dir: dir ?? "" });
-  if (err) return /* @__PURE__ */ jsx("p", { style: S.bad, children: err });
-  if (!agent || !account) return /* @__PURE__ */ jsx("p", { children: "Loading\u2026" });
-  if (agent.adapterType !== "claude_local") return /* @__PURE__ */ jsx("p", { style: S.muted, children: "This agent does not use Claude Code." });
-  const who = !dir ? "the server's shared login" : dir === account.claudeConfigDir ? "your Claude account" : owner.data?.managed ? "another team member's Claude account" : `a custom folder (${dir})`;
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 16 }, children: [
-    /* @__PURE__ */ jsxs("p", { children: [
-      "This agent signs in with ",
-      /* @__PURE__ */ jsx("b", { children: who }),
-      "."
+  if (error) return /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error });
+  if (!agent || !account)
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      " Loading\u2026"
+    ] });
+  if (agent.adapterType !== "claude_local") return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This agent doesn't use Claude Code." });
+  const bound = !!agent.runtimeConfig?.aiConnection;
+  const mine = dir === account.claudeConfigDir;
+  const who = bound ? "its Paperclip AI connection" : !dir ? "the server login" : mine ? "your Claude account" : owner.data?.managed ? "a teammate's Claude account" : "a custom folder";
+  return /* @__PURE__ */ jsx("div", { className: "max-w-3xl space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-lg border border-border p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Claude login" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "This agent signs in with ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: who }),
+        "."
+      ] })
     ] }),
-    !account.connected && /* @__PURE__ */ jsx(ConnectCard, { account, onChange: (a) => a ? setAccount(a) : void refresh() }),
-    /* @__PURE__ */ jsx("div", { style: S.row, children: /* @__PURE__ */ jsx(
+    bound ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "To run it on your own login folder instead, switch it to the local login in the agent's configuration." }) : account.connected ? /* @__PURE__ */ jsx(
       AgentToggle,
       {
         agent,
@@ -449,8 +619,8 @@ function AgentClaudeTab({ context }) {
           owner.refresh();
         }
       }
-    ) })
-  ] });
+    ) : /* @__PURE__ */ jsx("a", { ...nav.linkProps(PAGE_ROUTE), className: "text-sm font-medium text-primary underline-offset-4 hover:underline", children: "Connect your Claude account first \u2192" })
+  ] }) });
 }
 export {
   AgentClaudeTab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paperclip-plugin-claude-accounts",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Per-user Claude accounts for Paperclip: each member signs in to Claude from the browser, picks which agents use it, and it stays signed in. No shell, no re-auth.",
   "type": "module",
   "license": "MIT",