paperclip-plugin-claude-accounts 0.3.0

package/README.md

@@ -0,0 +1,94 @@
+# Claude Accounts (Paperclip plugin)
+
+Every team member connects **their own** Claude Pro/Max account from the browser, picks which agents use it,
+and it **stays signed in** across restarts, redeploys and reconnects. No `docker exec … /bin/sh`, no `claude login`
+every few hours.
+
+## Why you kept having to re-auth
+
+With the "local" Claude sign-in, Paperclip saves only `claudeAiOauth.accessToken`, which is short-lived. It drops the
+refresh token (`server/src/services/local-ai-credentials.ts`) and never writes a renewed token back for Anthropic.
+So the saved login dies and you're sent back to a shell. The UI setup-token flow only works in sandbox
+environments, not local/SSH (Docker).
+
+This plugin keeps the **full** login, including the refresh token, in a per-user folder. The Claude CLI renews it there on its own,
+and the plugin backs it up so nothing is lost when the container restarts.
+
+## Paperclip's own "Connect Claude", without the terminal
+
+Paperclip normally tells you to run this in a shell:
+
+```
+(export CLAUDE_CONFIG_DIR='/paperclip/instances/default/ai-local-logins/<id>' && mkdir -p "$CLAUDE_CONFIG_DIR" && claude auth login)
+```
+
+The plugin does the same thing for you:
+
+- **One click:** on **Claude accounts**, click **Connect to Paperclip**. The plugin:
+  1. starts Paperclip's sign-in attempt
+  2. writes your Claude login into that `ai-local-logins/<id>` folder
+  3. completes it with Paperclip's own API
+
+  You get a normal **personal Paperclip AI connection**, the default for agents set to "responsible user".
+- **Or paste the command** Paperclip showed you into **Paperclip showed me a terminal command → Do it for me**,
+  then click **Connect** in Paperclip's dialog.
+- **Stays connected:** Paperclip keeps only the short-lived access token. The plugin keeps the refresh token in your
+  account folder, and while you have Paperclip open in a browser tab, the sidebar checks every 2 minutes. Shortly before
+  the token expires, it renews it with one tiny `claude -p` call (Haiku) and **reconnects the same connection**,
+  which rotates its secret in place. No shell, ever.
+
+  Only the owner can reconnect a personal connection, so this runs in your own browser. If you don't open Paperclip for longer than the token lives, the connection can expire. The next time you open
+  Paperclip it reconnects by itself within ~2 minutes. For agents that must keep running unattended, use
+  **Advanced → Use my Claude**, which renews entirely on the server.
+
+## For each user (≈30 seconds)
+
+1. Open **Claude accounts** in the sidebar.
+2. Click **Sign in with Claude**. A Claude page opens. Approve it and copy the code it shows.
+3. Paste the code and click **Connect**. ✅
+4. Under **Agents**, click **Use my Claude** on the agents that should run on your account.
+   You can also do this from the agent's **Claude login** tab.
+
+Alternative: click **Paste a token instead** and paste the output of `claude setup-token` (run on your own computer),
+or your `~/.claude/.credentials.json`.
+
+## How it works
+
+- Each user gets `$PAPERCLIP_HOME/claude-accounts/<userId>/`, used as that user's `CLAUDE_CONFIG_DIR`.
+- **Use my Claude** sets `CLAUDE_CONFIG_DIR` in the agent's adapter env. The browser does this through Paperclip's own API, as
+  the signed-in user, so normal permissions apply.
+- **Sign in with Claude** runs `claude auth login` in a pseudo-terminal on the server (`script` from util-linux) and
+  relays the link and code through the UI.
+- A keeper process watches every account. It runs on startup, every 5 min, on file changes and on agent events, plus right away
+  after a run fails with an auth error. For each account it:
+  - restores a missing, corrupt or older `.credentials.json` from the backup in Paperclip's database
+  - updates the backup when the CLI rotates the token (refresh tokens rotate)
+  - makes sure a `.claude.json` with onboarding marked done exists
+- Users can only manage **their own** account. Every action is checked against the authenticated Paperclip user, and agents
+  and the system are rejected.
+- The server's shared login (`$HOME/.claude`) is also kept alive for agents that don't use a personal account. You can turn this off.
+
+## Install
+
+```bash
+npm install && npm run build
+npx paperclipai plugin install ./paperclip-plugin-claude-autoauth
+```
+
+Then in the plugin settings, set a **Backup encryption key** secret (any long random string).
+
+## Limits
+
+- An agent that has a Paperclip **AI connection** selected (`runtimeConfig.aiConnection`) ignores `CLAUDE_CONFIG_DIR`.
+  Paperclip blanks it, and its PATCH API won't let a plugin remove the binding. The UI warns you. Switch that agent
+  to the local login in its settings.
+- Agents with `filesystemScope` sandboxing use the server login dir instead of the per-user one.
+- The browser sign-in needs `script` (util-linux; included in Debian/Ubuntu images) and `claude` on the server's PATH.
+  If either is missing, use **Paste a token instead**.
+- A `setup-token` token can't renew itself. It is valid for about 1 year. Browser sign-in can renew forever.
+- `accountsDir` must be on a persistent volume if you want sessions and settings kept. The credentials are restored either way.
+
+## Security
+
+The backup holds live OAuth refresh tokens. Set the encryption key, and treat Paperclip DB backups as secrets.
+Folders are created `0700` and files `0600`.

package/dist/manifest.js

@@ -0,0 +1,95 @@
+// src/manifest.ts
+var manifest = {
+  id: "neotalk.claude-autoauth",
+  apiVersion: 1,
+  version: "0.3.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>",
+  categories: ["automation"],
+  capabilities: [
+    "events.subscribe",
+    "jobs.schedule",
+    "plugin.state.read",
+    "plugin.state.write",
+    "secrets.read-ref",
+    "agents.read",
+    "ui.page.register",
+    "ui.sidebar.register",
+    "ui.detailTab.register"
+  ],
+  entrypoints: {
+    worker: "./dist/worker.js",
+    ui: "./dist/ui"
+  },
+  ui: {
+    slots: [
+      { type: "page", id: "claude-accounts", displayName: "Claude accounts", exportName: "ClaudeAccountsPage", routePath: "claude-accounts" },
+      { type: "sidebar", id: "claude-accounts-link", displayName: "Claude accounts", exportName: "ClaudeAccountsSidebar" },
+      { type: "detailTab", id: "agent-claude", displayName: "Claude login", exportName: "AgentClaudeTab", entityTypes: ["agent"] }
+    ]
+  },
+  instanceConfigSchema: {
+    type: "object",
+    properties: {
+      accountsDir: {
+        type: "string",
+        title: "Where per-user Claude logins are stored",
+        description: "Default: $PAPERCLIP_HOME/claude-accounts. Must be on a persistent volume and readable by the agents."
+      },
+      claudeCommand: {
+        type: "string",
+        title: "Claude CLI command",
+        default: "claude"
+      },
+      sharedAccountEnabled: {
+        type: "boolean",
+        title: "Also keep the server's shared login alive",
+        description: "Backs up/restores $HOME/.claude for agents that don't use a personal account.",
+        default: true
+      },
+      claudeConfigDirs: {
+        type: "array",
+        items: { type: "string" },
+        title: "Shared login: Claude config directories",
+        description: "Directories that hold .credentials.json. Empty = $CLAUDE_CONFIG_DIR and $HOME/.claude. In Docker add the per-agent dirs too (e.g. /paperclip/.claude).",
+        default: []
+      },
+      seedCredentialsSecret: {
+        type: "object",
+        format: "secret-ref",
+        title: "Shared login seed: credentials.json (secret)",
+        description: "Optional. Paste the full contents of ~/.claude/.credentials.json from a machine where you ran `claude login`. Used only when no valid credentials exist yet (fresh container)."
+      },
+      seedOauthTokenSecret: {
+        type: "object",
+        format: "secret-ref",
+        title: "Shared login seed: `claude setup-token` token (secret)",
+        description: "Optional fallback. A 1-year sk-ant-oat01-... token. Written as a credentials file when nothing better exists."
+      },
+      encryptionKeySecret: {
+        type: "object",
+        format: "secret-ref",
+        title: "Backup encryption key (secret, recommended)",
+        description: "Optional. Any random string; encrypts the backup stored in plugin state (AES-256-GCM)."
+      },
+      secretsCompanyId: {
+        type: "string",
+        title: "Company ID owning the secrets",
+        description: "Needed if your Paperclip version scopes secret resolution to a company."
+      }
+    }
+  },
+  jobs: [
+    {
+      jobKey: "credentials-watchdog",
+      displayName: "Claude credentials watchdog",
+      schedule: "*/5 * * * *"
+    }
+  ]
+};
+var manifest_default = manifest;
+export {
+  manifest_default as default,
+  manifest
+};

package/dist/ui/index.js

@@ -0,0 +1,459 @@
+// src/ui/index.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  useHostContext,
+  useHostNavigation,
+  usePluginAction,
+  usePluginData
+} from "@paperclipai/plugin-sdk/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+async function api(method, url, body) {
+  const res = await fetch(`/api${url}`, {
+    method,
+    credentials: "include",
+    headers: body ? { "content-type": "application/json" } : void 0,
+    body: body ? JSON.stringify(body) : void 0
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    let msg = text;
+    try {
+      msg = JSON.parse(text).error ?? text;
+    } catch {
+    }
+    throw new Error(msg || `${method} ${url} failed (${res.status})`);
+  }
+  return res.json();
+}
+async function listClaudeAgents(companyId) {
+  const raw = await api("GET", `/companies/${companyId}/agents`);
+  return (Array.isArray(raw) ? raw : raw.agents ?? []).filter((a) => a.adapterType === "claude_local");
+}
+function envValue(v) {
+  if (typeof v === "string") return v;
+  if (v && typeof v === "object" && v.type === "plain") return String(v.value ?? "");
+  return null;
+}
+function agentConfigDir(agent) {
+  return envValue(agent.adapterConfig?.env?.CLAUDE_CONFIG_DIR) || null;
+}
+async function setAgentConfigDir(agentId, dir) {
+  const agent = await api("GET", `/agents/${agentId}`);
+  const env = { ...agent.adapterConfig?.env ?? {} };
+  if (dir) env.CLAUDE_CONFIG_DIR = { type: "plain", value: 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" }
+};
+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 useMyAccount() {
+  const me = usePluginAction("me");
+  const [account, setAccount] = useState(null);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    try {
+      setAccount(await me());
+      setError(null);
+    } catch (e) {
+      setError(String(e.message ?? e));
+    }
+  }, [me]);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  return { account, setAccount, error, refresh };
+}
+function ConnectCard({ account, onChange }) {
+  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 [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);
+    try {
+      await fn();
+    } catch (e) {
+      setMsg({ ok: false, text: String(e.message ?? e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+  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,
+        {
+          disabled: busy,
+          onClick: () => run(async () => {
+            if (!confirm("Disconnect your Claude account? Agents using it will stop working.")) return;
+            await disconnect();
+            onChange(null);
+          }),
+          children: "Disconnect"
+        }
+      ) })
+    ] }) : 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" }),
+        " ",
+        "and approve."
+      ] }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("b", { children: "2." }),
+        " Paste the code that Claude shows you:"
+      ] }),
+      /* @__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) {
+                setUrl(null);
+                onChange(r.status);
+              }
+            }),
+            children: busy ? "Connecting\u2026" : "Connect"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Btn,
+          {
+            disabled: busy,
+            onClick: () => run(async () => {
+              await loginCancel();
+              setUrl(null);
+            }),
+            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", { 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__ */ jsx(
+            Btn,
+            {
+              primary: true,
+              disabled: busy || !paste.trim(),
+              onClick: () => run(async () => {
+                onChange(await saveToken({ value: paste }));
+                setPaste("");
+                setShowPaste(false);
+              }),
+              children: "Save"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    msg && /* @__PURE__ */ jsx("p", { style: msg.ok ? S.ok : S.bad, children: msg.text })
+  ] });
+}
+function AgentToggle({ agent, account, onDone }) {
+  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 set = async (value) => {
+    setBusy(true);
+    setErr(null);
+    try {
+      await setAgentConfigDir(agent.id, value);
+      onDone();
+    } catch (e) {
+      setErr(String(e.message ?? e));
+    } 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 })
+  ] });
+}
+function AgentsCard({ companyId, account }) {
+  const [agents, setAgents] = useState(null);
+  const [err, setErr] = useState(null);
+  const load = useCallback(() => {
+    listClaudeAgents(companyId).then(setAgents).catch((e) => setErr(String(e.message ?? 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) => {
+      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" }),
+        /* @__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) {
+  const keepalive = usePluginAction("native-keepalive");
+  const fill = usePluginAction("native-fill");
+  const record = usePluginAction("native-record");
+  const busy = useRef(false);
+  useEffect(() => {
+    if (!companyId) return;
+    const tick = async () => {
+      if (busy.current) return;
+      busy.current = true;
+      try {
+        const r = await keepalive();
+        if (r.action === "discover") {
+          const mine = await myClaudeConnections(companyId);
+          const pick = mine.find((c) => c.isDefault) ?? mine[0];
+          if (pick) await record({ companyId, connectionId: pick.id, name: pick.name });
+        } else if (r.action === "push" && r.companyId && r.connectionId) {
+          await connectToPaperclip(r.companyId, fill, record, { connectionId: r.connectionId, name: r.name });
+        }
+      } catch {
+      } finally {
+        busy.current = false;
+      }
+    };
+    void tick();
+    const t = setInterval(tick, 2 * 60 * 1e3);
+    return () => clearInterval(t);
+  }, [companyId, keepalive, fill, record]);
+}
+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 })
+    ] })
+  ] });
+}
+function ClaudeAccountsSidebar(_props) {
+  const nav = useHostNavigation();
+  const { companyId } = useHostContext();
+  useNativeKeepAlive(companyId);
+  return /* @__PURE__ */ jsx("a", { ...nav.linkProps("/claude-accounts"), children: "Claude accounts" });
+}
+function AgentClaudeTab({ context }) {
+  const { account, setAccount, refresh } = useMyAccount();
+  const [agent, setAgent] = useState(null);
+  const [err, setErr] = useState(null);
+  const load = useCallback(() => {
+    api("GET", `/agents/${context.entityId}`).then(setAgent).catch((e) => setErr(String(e.message ?? 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 }),
+      "."
+    ] }),
+    !account.connected && /* @__PURE__ */ jsx(ConnectCard, { account, onChange: (a) => a ? setAccount(a) : void refresh() }),
+    /* @__PURE__ */ jsx("div", { style: S.row, children: /* @__PURE__ */ jsx(
+      AgentToggle,
+      {
+        agent,
+        account,
+        onDone: () => {
+          load();
+          owner.refresh();
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  AgentClaudeTab,
+  ClaudeAccountsPage,
+  ClaudeAccountsSidebar
+};