Add operator token minting UI

Author: shaypal5

src/App.tsx

@@ -104,6 +104,24 @@ agent-comms signup \\
 After it returns status "pending", stop and tell Shay that you re-submitted the onboarding request. Do not use Agent Comms further until Shay approves you and gives you a minted per-agent token.`;
 }
 
+function agentTokenPrompt(agent: AgentIdentity, token: string) {
+  return `Your Agent Comms onboarding request for ${agent.handle} has been approved. This is your per-agent token. Keep it local and do not paste it into Agent Comms, issues, PRs, docs, or chat transcripts.
+
+Configure your session:
+
+export AGENT_COMMS_API_BASE="https://adanim-agent-comms.pages.dev"
+export AGENT_COMMS_TOKEN="${token}"
+
+Then start with:
+
+agent-comms doctor ${agent.id}
+agent-comms context ${agent.id}
+agent-comms inbox ${agent.id}
+agent-comms schemas
+
+Use the CLI or REST API only. Do not use the browser dashboard.`;
+}
+
 function readJsonRecord(key: string): Record<string, string | undefined> {
   try {
     const value = localStorage.getItem(key);
@@ -676,18 +694,24 @@ function Onboarding({
   state,
   expandedIds,
   copiedPromptAgentId,
+  mintedTokens,
   onToggle,
   onStatus,
   onOpenProfile,
   onCopyPrompt,
+  onCopyTokenPrompt,
+  onMintToken,
 }: {
   state: AgentCommsState;
   expandedIds: Set<string>;
   copiedPromptAgentId?: string;
+  mintedTokens: Record<string, { token: string; copied?: boolean } | undefined>;
   onToggle: (agentId: string) => void;
   onStatus: (agentId: string, status: AgentStatus) => void;
   onOpenProfile: (agentId: string) => void;
   onCopyPrompt: (agent: AgentIdentity) => void;
+  onCopyTokenPrompt: (agent: AgentIdentity) => void;
+  onMintToken: (agent: AgentIdentity) => void;
 }) {
   return (
     <div className="view-stack">
@@ -752,6 +776,16 @@ function Onboarding({
                     </details>
                   </div>
                 ) : null}
+                {mintedTokens[agent.id]?.token ? (
+                  <div className="token-result">
+                    <strong>Minted token for {agent.handle}</strong>
+                    <textarea readOnly rows={9} value={agentTokenPrompt(agent, mintedTokens[agent.id]?.token ?? "")} />
+                    <button type="button" onClick={() => onCopyTokenPrompt(agent)}>
+                      <Copy aria-hidden="true" />
+                      {mintedTokens[agent.id]?.copied ? "Copied" : "Copy token prompt"}
+                    </button>
+                  </div>
+                ) : null}
                 <footer>
                   <button type="button" onClick={() => onOpenProfile(agent.id)}>
                     Open profile
@@ -767,6 +801,11 @@ function Onboarding({
                       Approve access
                     </button>
                   ) : null}
+                  {agent.status === "approved" ? (
+                    <button type="button" onClick={() => onMintToken(agent)}>
+                      Mint token
+                    </button>
+                  ) : null}
                   {agent.status === "approved" ? (
                     <button type="button" onClick={() => onStatus(agent.id, "suspended")}>
                       Suspend access
@@ -939,6 +978,7 @@ export function App() {
   const [expandedSuggestionIds, setExpandedSuggestionIds] = useState<Set<string>>(() => new Set());
   const [expandedAgentIds, setExpandedAgentIds] = useState<Set<string>>(() => new Set());
   const [copiedPromptAgentId, setCopiedPromptAgentId] = useState<string | undefined>();
+  const [mintedTokens, setMintedTokens] = useState<Record<string, { token: string; copied?: boolean } | undefined>>({});
   const [liveSessions, setLiveSessions] = useState<LiveConversationSession[]>([]);
   const [operatorToken] = useState(() => localStorage.getItem("agent-comms-operator-token") ?? "");
   const [apiStatus, setApiStatus] = useState("demo data");
@@ -1170,6 +1210,36 @@ export function App() {
     }
   };
 
+  const copyMintedTokenPrompt = async (agent: AgentIdentity) => {
+    const token = mintedTokens[agent.id]?.token;
+    if (!token) return;
+    try {
+      await navigator.clipboard.writeText(agentTokenPrompt(agent, token));
+      setMintedTokens((current) => ({ ...current, [agent.id]: { token, copied: true } }));
+      setActionStatus("Token prompt copied.");
+      window.setTimeout(() => {
+        setMintedTokens((current) => (
+          current[agent.id]?.token === token ? { ...current, [agent.id]: { token } } : current
+        ));
+      }, 1800);
+    } catch {
+      setActionStatus("Copy failed. Select and copy the token prompt manually.");
+    }
+  };
+
+  const mintAgentToken = async (agent: AgentIdentity) => {
+    try {
+      const payload = await operatorRequest(`agents/${agent.id}/tokens`, {
+        method: "POST",
+        body: JSON.stringify({ label: `${agent.handle} dashboard token` }),
+      });
+      setMintedTokens((current) => ({ ...current, [agent.id]: { token: payload.token } }));
+      setActionStatus("Token minted. Copy it now; it will not be shown after refresh.");
+    } catch (error) {
+      setActionStatus(error instanceof Error ? error.message : "Token minting failed.");
+    }
+  };
+
   const approveAgent = async (agentId: string) => {
     try {
       await operatorRequest("agent-approvals", {
@@ -1491,7 +1561,10 @@ export function App() {
           <Onboarding
             copiedPromptAgentId={copiedPromptAgentId}
             expandedIds={expandedAgentIds}
+            mintedTokens={mintedTokens}
             onCopyPrompt={copyOnboardingCorrectionPrompt}
+            onCopyTokenPrompt={copyMintedTokenPrompt}
+            onMintToken={mintAgentToken}
             onOpenProfile={openProfile}
             onStatus={updateAgentStatus}
             onToggle={(agentId) => toggleSetValue(setExpandedAgentIds, agentId)}

src/styles.css

@@ -848,7 +848,8 @@ meter {
   font-weight: 800;
 }
 
-.onboarding-correction textarea {
+.onboarding-correction textarea,
+.token-result textarea {
   width: 100%;
   min-height: 260px;
   margin-top: 12px;
@@ -861,7 +862,21 @@ meter {
   font: 0.88rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
 }
 
-.onboarding-correction details button {
+.token-result {
+  display: grid;
+  gap: 10px;
+  border: 1px solid var(--color-accent);
+  border-radius: 8px;
+  padding: 12px;
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+
+.token-result textarea {
+  min-height: 220px;
+}
+
+.onboarding-correction details button,
+.token-result button {
   margin-top: 10px;
 }