@startsimpli/integrations 0.2.28 → 0.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/integrations",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "description": "Provider-agnostic types, API clients, hooks, and UI primitives for email + calendar integrations across StartSimpli apps.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/__tests__/barrel-exports.test.ts

@@ -0,0 +1,78 @@
+/**
+ * EVERY PAGE COMPOSER IS REACHABLE FROM THE PACKAGE ROOT.
+ *
+ * WHY THIS EXISTS. `PlanningPage` shipped in the tarball — the FILE was there,
+ * at `src/components/pages/PlanningPage.tsx` — while the one line exporting it
+ * from `src/components/index.ts` had been dropped by an unrelated PR's merge
+ * resolution. Nothing caught it: type-check passes (the file compiles), the unit
+ * tests pass (they import the module directly), and `npm pack` includes it. The
+ * failure surfaced two publishes later, in a CUSTOMER'S docker build:
+ *
+ *     The export PlanningPage was not found in module
+ *     .../@startsimpli/integrations/src/index.ts
+ *     Did you mean to import ConnectionsPage?
+ *
+ * That is the worst possible place to find it — a tenant's deploy, against a
+ * published artifact, with the composer's own tests green the whole time.
+ *
+ * So the barrel is asserted against the DIRECTORY rather than against a list
+ * somebody has to remember to update. A new composer is exported or this fails;
+ * a merge that drops an export line fails here instead of in a deploy.
+ */
+import { readdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+import * as pkg from '../index';
+
+const PAGES_DIR = join(__dirname, '..', 'components', 'pages');
+
+/** Files that are not composers and are deliberately not re-exported by name. */
+const NOT_A_COMPOSER = new Set([
+  // Shared prop/api types — re-exported explicitly and selectively by the barrel
+  // so a fork gets the ones it needs without the internal slot unions.
+  'types.ts',
+  // The shared pieces two composers mount; exported by NAME, asserted below.
+  'work-items.tsx',
+  // A SUB-COMPONENT, not a composer: ConnectionsPage is its only mount, and the
+  // roster is the one list on that screen that shows OTHER people's accounts —
+  // it is meaningless outside the page that gates it. Listed here rather than
+  // exported, so this stays a real assertion about what a fork can reach and not
+  // a rubber stamp.
+  'MemberConnectionRoster.tsx',
+]);
+
+function composerNames(): string[] {
+  return readdirSync(PAGES_DIR)
+    .filter((f) => f.endsWith('.tsx') && !NOT_A_COMPOSER.has(f))
+    .map((f) => f.replace(/\.tsx$/, ''));
+}
+
+describe('package barrel', () => {
+  it('re-exports every page composer in components/pages', () => {
+    const missing = composerNames().filter((name) => !(name in pkg));
+    expect(missing, `not exported from @startsimpli/integrations: ${missing.join(', ')}`)
+      .toEqual([]);
+  });
+
+  it('exports the pieces the tracker and the planner share', () => {
+    // These are what stop the two screens drifting. If the barrel loses them, a
+    // fork silently reimplements the row and the divergence starts.
+    for (const name of ['WorkItemRow', 'UnfilteredNotice', 'isOverdue', 'compareForScreen']) {
+      expect(pkg, `missing shared export ${name}`).toHaveProperty(name);
+    }
+  });
+
+  it('exports the planning client alongside its screen', () => {
+    // A screen with no client is a mount nobody can wire; they ship together or
+    // the fork gets a confusing half-error at build time.
+    expect(pkg).toHaveProperty('PlanningPage');
+    expect(pkg).toHaveProperty('createPlanningApi');
+  });
+
+  it('still exports the composers that were already shipping', () => {
+    for (const name of ['ConnectionsPage', 'LibraryPage', 'AskPage', 'TrackerPage']) {
+      expect(pkg, `regressed export ${name}`).toHaveProperty(name);
+    }
+  });
+});

package/src/__tests__/connect-claude.test.tsx

@@ -0,0 +1,143 @@
+/**
+ * The "connect an MCP client" composer (bd startsim-62dca).
+ *
+ * THE ASSERTION THIS FILE EXISTS FOR is `never mints without a click`. Every
+ * other surface in this package reads; this one ISSUES A CREDENTIAL that reads a
+ * workspace as a human, lasts weeks, and cannot be withdrawn before it expires
+ * (startsim-ja8mt). A mint fired from an effect, a retry, or a re-render would
+ * scatter live bearers nobody asked for and nobody can cancel — and it would do
+ * it silently, because each one succeeds. So the number of POSTs is asserted,
+ * not assumed.
+ *
+ * The rest pins the four disclosures the bead requires. They are not decoration:
+ * a screen that renders a copy button without them is lying by omission about
+ * what the user is about to hand over.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ConnectClaudePage } from '../components/pages/ConnectClaudePage';
+import type { McpTokensApi } from '../api/mcp-tokens';
+
+const MINTED = {
+  token: 'eyJhbGciOiJSUzI1NiJ9.PAYLOAD.SIG',
+  token_type: 'Bearer',
+  foundry: 'tandem',
+  audience: 'tenant:tandem',
+  acting_as: { org_id: 'tandem', role: 'owner', email: 'qa-tandem@startsimpli.com' },
+  jti: 'abc123',
+  issued_at: '2026-08-27T00:00:00Z',
+  expires_at: '2026-09-26T00:00:00Z',
+  mcp_url: 'https://tandem.ai.startsimpli.com/api/v1/mcp/',
+  claude_code_command:
+    'claude mcp add --transport http tandem https://tandem.ai.startsimpli.com/api/v1/mcp/ --header "Authorization: Bearer eyJ…"',
+  notice: 'Shown once — store it like a password. It cannot be revoked before it expires.',
+};
+
+function stubApi(overrides: Partial<McpTokensApi> = {}): McpTokensApi {
+  return {
+    list: vi.fn().mockResolvedValue({
+      foundries: [
+        { slug: 'tandem', name: 'Tandem', audience: 'tenant:tandem', mcp_url: MINTED.mcp_url, state: 'live' },
+      ],
+      default_ttl_days: 30,
+      max_ttl_days: 90,
+    }),
+    mint: vi.fn().mockResolvedValue(MINTED),
+    ...overrides,
+  };
+}
+
+describe('ConnectClaudePage', () => {
+  it('NEVER mints without a click', async () => {
+    const api = stubApi();
+    render(<ConnectClaudePage api={api} />);
+    await waitFor(() => expect(api.list).toHaveBeenCalled());
+    // Give any stray effect a chance to fire before asserting the absence.
+    await new Promise((r) => setTimeout(r, 25));
+    expect(api.mint).not.toHaveBeenCalled();
+  });
+
+  it('mints exactly once per click, never once per render', async () => {
+    const api = stubApi();
+    const { rerender } = render(<ConnectClaudePage api={api} />);
+    await screen.findByRole('button', { name: /create connection token/i });
+    await userEvent.click(screen.getByRole('button', { name: /create connection token/i }));
+    await screen.findByText(/copy it now/i);
+    rerender(<ConnectClaudePage api={api} />);
+    expect(api.mint).toHaveBeenCalledTimes(1);
+  });
+
+  it('warns about the consequences BEFORE the token exists', async () => {
+    // A warning that only appears next to the credential is one nobody can act
+    // on — by then it has been issued and cannot be taken back.
+    render(<ConnectClaudePage api={stubApi()} />);
+    const note = await screen.findByRole('note');
+    expect(note.textContent).toMatch(/as\s+you/i);
+    expect(note.textContent).toMatch(/cannot be cancelled before it expires/i);
+    expect(note.textContent).toMatch(/shown once/i);
+    // ...and specifically that losing the seat does not switch it off.
+    expect(note.textContent).toMatch(/does not switch this one off/i);
+  });
+
+  it('shows WHOSE data the token reads, from the server, not the browser', async () => {
+    render(<ConnectClaudePage api={stubApi()} />);
+    await userEvent.click(await screen.findByRole('button', { name: /create connection token/i }));
+    // Scoped to the identity card, because the slug legitimately appears in
+    // several places on this page (the command, the URL) and a bare text query
+    // would pass on any of them rather than on the one that states WHOSE.
+    const identity = (await screen.findByText(/This connection reads/i))
+      .closest('div') as HTMLElement;
+    expect(identity.textContent).toMatch(/qa-tandem@startsimpli\.com/);
+    expect(identity.textContent).toMatch(/owner/);
+    expect(identity.textContent).toMatch(/tandem/);
+  });
+
+  it('shows when it expires as a date, not an ISO string', async () => {
+    render(<ConnectClaudePage api={stubApi()} />);
+    await userEvent.click(await screen.findByRole('button', { name: /create connection token/i }));
+    const expiry = await screen.findByText(/Expires/);
+    expect(expiry.textContent).not.toMatch(/2026-09-26T00:00:00Z/);
+    expect(expiry.textContent).toMatch(/2026/);
+  });
+
+  it('renders the command the SERVER composed, not one it builds itself', async () => {
+    // The tenant's own record knows its host; a vanity domain would break a
+    // pattern assembled in the browser.
+    render(<ConnectClaudePage api={stubApi()} />);
+    await userEvent.click(await screen.findByRole('button', { name: /create connection token/i }));
+    expect(await screen.findByText(/claude mcp add --transport http tandem/)).toBeTruthy();
+  });
+
+  it('surfaces a refused mint as the reason, not as an outage', async () => {
+    // The listing is advisory; central decides membership independently, so a
+    // 403 here is an ordinary answer the user has to be able to read.
+    const api = stubApi({ mint: vi.fn().mockRejectedValue(new Error('You do not have an active seat in `tandem`')) });
+    render(<ConnectClaudePage api={api} />);
+    await userEvent.click(await screen.findByRole('button', { name: /create connection token/i }));
+    const alert = await screen.findByRole('alert');
+    expect(alert.textContent).toMatch(/active seat/i);
+    expect(screen.queryByText(/copy it now/i)).toBeNull();
+  });
+
+  it('says so plainly when the account is in no workspace', async () => {
+    const api = stubApi({
+      list: vi.fn().mockResolvedValue({ foundries: [], default_ttl_days: 30, max_ttl_days: 90 }),
+    });
+    render(<ConnectClaudePage api={api} />);
+    expect(await screen.findByText(/not a member of any workspace/i)).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /create connection token/i })).toBeNull();
+  });
+
+  it('names no foundry, vendor or product of its own', async () => {
+    // Everything specific must arrive as DATA. Rendering an empty list must not
+    // leak a hardcoded example workspace into the page.
+    const api = stubApi({
+      list: vi.fn().mockResolvedValue({ foundries: [], default_ttl_days: 30, max_ttl_days: 90 }),
+    });
+    const { container } = render(<ConnectClaudePage api={api} />);
+    await screen.findByText(/not a member of any workspace/i);
+    expect(container.textContent).not.toMatch(/tandem|mcr|marketing-agents/i);
+  });
+});

package/src/api/index.ts

@@ -3,4 +3,7 @@ export * from './calendar';
 export * from './email';
 export * from './accounts';
 export * from './connections';
+// The MCP bearer mint (bd startsim-hj5zh / startsim-62dca). Central, not the
+// tenant — it rides the tenant's own /api/v1/auth/ proxy, see the module.
+export * from './mcp-tokens';
 export { setApiBase, getApiBase, setAuthTokenProvider } from './_fetch';

package/src/api/mcp-tokens.ts

@@ -0,0 +1,86 @@
+/**
+ * `/api/v1/auth/mcp-token/` — the long-lived bearer an MCP client holds for ONE
+ * foundry (bd startsim-hj5zh, surfaced by startsim-62dca).
+ *
+ * WHY THIS IS NOT A CONNECTION CLIENT even though it lives beside them. Every
+ * other client in this directory talks to the tenant or to the connectors API
+ * about a vendor account WE hold. This one talks to CENTRAL about a credential
+ * the user is about to hand to software we do not run. That inversion is the
+ * whole reason the composer over it is mostly warnings.
+ *
+ * IT MUST REACH CENTRAL, NOT THE TENANT. `request()` prefixes the configured
+ * base, and inside a tenant app that base points at the tenant's own same-origin
+ * proxy — which forwards `/api/v1/auth/*` to central (see the tenant nginx: the
+ * `/api/v1/auth/` location proxies to api.startsimpli.com, above the `/api/`
+ * location that would otherwise send it to the tenant's Django). So the ordinary
+ * base is correct here and no cross-origin call is made with a bearer on it.
+ * A client that hardcoded central's host would break that property.
+ *
+ * TWO VERBS, and the asymmetry is deliberate: `list` is safe to call on render,
+ * `mint` is not. Minting ISSUES A CREDENTIAL — it is not idempotent in any way a
+ * user cares about, because every call produces another bearer that stays valid
+ * until it expires and cannot be withdrawn (startsim-ja8mt). Nothing in this
+ * package may call `mint` from an effect.
+ */
+import { request } from './_fetch';
+
+/** A foundry the signed-in account may connect a client to. */
+export interface McpFoundry {
+  slug: string;
+  name: string;
+  audience: string;
+  mcp_url: string;
+  state: string;
+}
+
+export interface McpFoundryList {
+  foundries: McpFoundry[];
+  default_ttl_days: number;
+  max_ttl_days: number;
+}
+
+/**
+ * The mint's answer. `token` is present exactly once, in this response, and is
+ * never retrievable again — the server stores no copy it could hand back.
+ */
+export interface McpMintedToken {
+  token: string;
+  token_type: string;
+  foundry: string;
+  audience: string;
+  /**
+   * WHOSE data this reads. All three are DB-derived by central, never taken from
+   * the request, so this is the identity the tenant will actually act as — the
+   * thing a user has to see before pasting the token anywhere.
+   */
+  acting_as: { org_id: string | null; role: string | null; email: string | null };
+  jti: string | null;
+  issued_at: string;
+  expires_at: string;
+  mcp_url: string;
+  claude_code_command: string | null;
+  notice: string;
+}
+
+export interface McpTokensApi {
+  list(): Promise<McpFoundryList>;
+  mint(input: { foundry: string; ttl_days?: number }): Promise<McpMintedToken>;
+}
+
+const BASE = '/auth/mcp-token';
+
+export const mcpTokens: McpTokensApi = {
+  /**
+   * The foundries this account holds an active seat in. Advisory — central
+   * refuses the mint independently — so a slug that appears here can still be
+   * denied, and the composer has to render that denial rather than assume the
+   * list was authoritative.
+   */
+  list(): Promise<McpFoundryList> {
+    return request<McpFoundryList>(`${BASE}/`);
+  },
+
+  mint(input: { foundry: string; ttl_days?: number }): Promise<McpMintedToken> {
+    return request<McpMintedToken>(`${BASE}/`, { method: 'POST', body: input });
+  },
+};

package/src/components/index.ts

@@ -12,6 +12,10 @@ export * from './ReconsentPromptCard';
 // one level into each app.
 export * from './CredentialSchemaForm';
 export * from './pages/ConnectionsPage';
+// "Connect an MCP client" — a sibling composer, deliberately in the same place
+// as ConnectionsPage: from a user's point of view both are "connect a thing to
+// this workspace", even though this one hands a credential OUT (startsim-62dca).
+export * from './pages/ConnectClaudePage';
 export type {
   ConnectionsApi,
   ConnectorCatalogEntry,

package/src/components/pages/ConnectClaudePage.tsx

@@ -0,0 +1,270 @@
+/**
+ * CONNECT AN MCP CLIENT to this workspace, as one composer (bd startsim-62dca).
+ *
+ * `<ConnectClaudePage api={mcpTokens} />` is the whole integration. An app owns
+ * theme classNames and a ten-line wrapper — same shape as `ConnectionsPage`, and
+ * for the same reason: shipping primitives without the page-level composer just
+ * moves the duplication up one level.
+ *
+ * THIS SCREEN IS MOSTLY WARNINGS, AND THAT IS THE DESIGN. Every other surface in
+ * this package helps somebody connect a vendor account WE hold. This one issues
+ * a credential the user then pastes into software we do not run, which reads
+ * their workspace as them, lasts weeks, and — until bd startsim-ja8mt lands —
+ * CANNOT BE WITHDRAWN before it expires. Deactivating the member's seat stops
+ * the next mint, not this token. A screen that rendered a copy button and no
+ * consequences would be lying by omission, so the consequences are not tucked
+ * into a tooltip: they are on the page, next to the token, in the four places
+ * the bead names.
+ *
+ * NOTHING HERE NAMES A FOUNDRY, a vendor, or a client product beyond the command
+ * the server itself composed. The foundry list arrives as data from central, and
+ * `claude_code_command` is built server-side from the tenant's own record — so a
+ * foundry on a vanity domain gets its own host rather than a pattern this file
+ * guessed. An `if (slug === ...)` here would undo that.
+ *
+ * MINTING IS NEVER AUTOMATIC. `list()` runs on mount; `mint()` runs only from a
+ * click. Every call to it issues another unrevokable bearer, so a re-render, a
+ * retry, or a `useEffect` that "just refreshes" would quietly scatter live
+ * credentials. That is why the mint state machine below is explicit rather than
+ * a query hook.
+ */
+import * as React from 'react';
+
+import type { McpFoundry, McpMintedToken, McpTokensApi } from '../../api/mcp-tokens';
+
+type ClassNames = Partial<Record<
+  'root' | 'section' | 'heading' | 'card' | 'button' | 'muted' | 'error' | 'warning' | 'code', string
+>>;
+
+export interface ConnectClaudePageProps {
+  api: McpTokensApi;
+  classNames?: ClassNames;
+  /** Pre-select a foundry. Optional — with one seat the list is the answer. */
+  foundrySlug?: string;
+}
+
+const FALLBACK: Required<Pick<ClassNames,
+  'root' | 'section' | 'heading' | 'card' | 'button' | 'muted' | 'error' | 'warning' | 'code'>> = {
+  root: 'space-y-6',
+  section: 'space-y-3',
+  heading: 'text-lg font-semibold',
+  card: 'rounded-lg border p-4',
+  button: 'rounded-md border px-3 py-2 text-sm font-medium',
+  muted: 'text-sm opacity-70',
+  error: 'rounded-md border p-3 text-sm',
+  warning: 'rounded-md border p-3 text-sm',
+  code: 'block w-full overflow-x-auto rounded p-3 font-mono text-xs',
+};
+
+function cx(theme: ClassNames | undefined, key: keyof typeof FALLBACK): string {
+  return theme?.[key] ?? FALLBACK[key];
+}
+
+/** Local-date rendering, so "expires" is not an ISO string a person has to parse. */
+function readableDate(iso: string): string {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? iso : d.toLocaleDateString(undefined, {
+    year: 'numeric', month: 'long', day: 'numeric',
+  });
+}
+
+function daysUntil(iso: string): number | null {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return null;
+  return Math.max(0, Math.round((d.getTime() - Date.now()) / 86_400_000));
+}
+
+export function ConnectClaudePage({ api, classNames, foundrySlug }: ConnectClaudePageProps) {
+  const [list, setList] = React.useState<{ foundries: McpFoundry[]; maxTtl: number; defaultTtl: number } | null>(null);
+  const [selected, setSelected] = React.useState<string>(foundrySlug ?? '');
+  const [ttlDays, setTtlDays] = React.useState<number | ''>('');
+  const [minted, setMinted] = React.useState<McpMintedToken | null>(null);
+  const [minting, setMinting] = React.useState(false);
+  const [error, setError] = React.useState<string>('');
+  const [copied, setCopied] = React.useState<'' | 'token' | 'command'>('');
+
+  React.useEffect(() => {
+    let live = true;
+    api.list().then(
+      (r) => {
+        if (!live) return;
+        setList({ foundries: r.foundries, maxTtl: r.max_ttl_days, defaultTtl: r.default_ttl_days });
+        setSelected((cur) => cur || (r.foundries.length === 1 ? r.foundries[0].slug : cur));
+      },
+      (e: unknown) => { if (live) setError(e instanceof Error ? e.message : String(e)); },
+    );
+    return () => { live = false; };
+  }, [api]);
+
+  async function doMint() {
+    if (!selected || minting) return;
+    setMinting(true);
+    setError('');
+    try {
+      // The ONLY call site. See the module docstring: nothing may mint from an
+      // effect, a retry, or a render.
+      const r = await api.mint({ foundry: selected, ...(ttlDays === '' ? {} : { ttl_days: ttlDays }) });
+      setMinted(r);
+    } catch (e: unknown) {
+      // A 403 here is the ordinary case, not an outage: the listing is advisory
+      // and central decides membership independently. Show what it said.
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setMinting(false);
+    }
+  }
+
+  async function copy(text: string, which: 'token' | 'command') {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(which);
+      window.setTimeout(() => setCopied(''), 2000);
+    } catch {
+      // A denied clipboard permission must not read as a failed mint — the token
+      // is on screen and selectable either way.
+      setCopied('');
+    }
+  }
+
+  if (error && !list) {
+    return <div className={cx(classNames, 'error')} role="alert">{error}</div>;
+  }
+  if (!list) {
+    return <p className={cx(classNames, 'muted')}>Loading…</p>;
+  }
+  if (list.foundries.length === 0) {
+    return (
+      <div className={cx(classNames, 'card')}>
+        <p className={cx(classNames, 'muted')}>
+          You are not a member of any workspace that can be connected yet. Ask an
+          owner or admin to invite you, then come back.
+        </p>
+      </div>
+    );
+  }
+
+  const chosen = list.foundries.find((f) => f.slug === selected);
+
+  return (
+    <div className={cx(classNames, 'root')}>
+      {!minted && (
+        <section className={cx(classNames, 'section')}>
+          {list.foundries.length > 1 && (
+            <label className="block">
+              <span className={cx(classNames, 'heading')}>Which workspace?</span>
+              <select
+                className="mt-1 block w-full rounded-md border px-3 py-2"
+                value={selected}
+                onChange={(e) => setSelected(e.target.value)}
+              >
+                <option value="">Choose…</option>
+                {list.foundries.map((f) => (
+                  <option key={f.slug} value={f.slug}>{f.name}</option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          <label className="block">
+            <span className={cx(classNames, 'heading')}>How long should it last?</span>
+            <input
+              type="number"
+              min={1}
+              max={list.maxTtl}
+              placeholder={`${list.defaultTtl} days`}
+              className="mt-1 block w-full rounded-md border px-3 py-2"
+              value={ttlDays}
+              onChange={(e) => setTtlDays(e.target.value === '' ? '' : Number(e.target.value))}
+            />
+            <span className={cx(classNames, 'muted')}>
+              Up to {list.maxTtl} days. Shorter is safer — this cannot be
+              cancelled early, so the expiry date is the only way it stops working.
+            </span>
+          </label>
+
+          {/* The consequences, BEFORE the button rather than after the token.
+              A warning that appears only once the credential exists is a warning
+              nobody can act on. */}
+          <div className={cx(classNames, 'warning')} role="note">
+            <strong>Before you create this:</strong> it reads this workspace <em>as
+            you</em> — whatever you can see, it can see. It is shown once and
+            cannot be retrieved again, and it <strong>cannot be cancelled before
+            it expires</strong>. Turning off your access to the workspace stops
+            new ones being made; it does not switch this one off.
+          </div>
+
+          <button
+            type="button"
+            className={cx(classNames, 'button')}
+            disabled={!selected || minting}
+            onClick={doMint}
+          >
+            {minting ? 'Creating…' : 'Create connection token'}
+          </button>
+
+          {error && <div className={cx(classNames, 'error')} role="alert">{error}</div>}
+        </section>
+      )}
+
+      {minted && (
+        <section className={cx(classNames, 'section')}>
+          <h2 className={cx(classNames, 'heading')}>Your token — copy it now</h2>
+
+          {/* WHOSE DATA, stated first. The mint derives these server-side from
+              the DB, so this is the identity the workspace will actually act as
+              — not what the browser asked for. */}
+          <div className={cx(classNames, 'card')}>
+            <p className={cx(classNames, 'muted')}>This connection reads</p>
+            <p>
+              <strong>{minted.foundry}</strong>
+              {minted.acting_as.email ? <> as <strong>{minted.acting_as.email}</strong></> : null}
+              {minted.acting_as.role ? <> ({minted.acting_as.role})</> : null}
+            </p>
+            <p className={cx(classNames, 'muted')}>
+              Expires {readableDate(minted.expires_at)}
+              {daysUntil(minted.expires_at) !== null ? ` — about ${daysUntil(minted.expires_at)} days` : ''}
+            </p>
+          </div>
+
+          <div className={cx(classNames, 'warning')} role="alert">
+            {minted.notice}
+          </div>
+
+          {minted.claude_code_command && (
+            <div className={cx(classNames, 'section')}>
+              <p className={cx(classNames, 'muted')}>Run this in your terminal:</p>
+              <code className={cx(classNames, 'code')}>{minted.claude_code_command}</code>
+              <button
+                type="button"
+                className={cx(classNames, 'button')}
+                onClick={() => copy(minted.claude_code_command as string, 'command')}
+              >
+                {copied === 'command' ? 'Copied' : 'Copy command'}
+              </button>
+            </div>
+          )}
+
+          <details>
+            <summary className={cx(classNames, 'muted')}>Just the token</summary>
+            <code className={cx(classNames, 'code')}>{minted.token}</code>
+            <button
+              type="button"
+              className={cx(classNames, 'button')}
+              onClick={() => copy(minted.token, 'token')}
+            >
+              {copied === 'token' ? 'Copied' : 'Copy token'}
+            </button>
+          </details>
+
+          <button
+            type="button"
+            className={cx(classNames, 'button')}
+            onClick={() => { setMinted(null); setCopied(''); }}
+          >
+            Done
+          </button>
+        </section>
+      )}
+    </div>
+  );
+}