@package-broker/ui 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/pages/tokens.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { pendingStorage } from '../token-pending.js';
 import { useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { useServices } from '../auth.js';
 import { loadPending, savePending } from '../pending.js';
@@ -15,7 +16,10 @@ import { Badge } from '../components/ui/badge.js';
 import { LoadedListFilters } from '../components/ui/toolbar.js';
 import { ListState } from '../components/ui/list-state.js';
 import { ConfirmAction } from '../components/ui/confirm-action.js';
+import { IssueTokenForm, accessLabels } from './tokens/issue-token-form.js';
+import { PrincipalForm } from './tokens/principal-form.js';
 import { tokenClientConfig } from './tokens/client-config.js';
+export const dayLabel = (days) => `${days} ${days === 1 ? 'day' : 'days'}`;
 export function lifetimeChoices(policy) {
     return [...new Set([30, 90, 180, 365, policy.maxDays, policy.defaultDays])]
         .filter((days) => days > 0 && days <= policy.maxDays)
@@ -27,6 +31,7 @@ export function tokensReducer(state, action) {
             ...state,
             secret: null,
             secretProject: null,
+            result: null,
             issuedId: null,
             oldPersonalId: null,
             pending: null,
@@ -36,16 +41,6 @@ export function tokensReducer(state, action) {
         };
     return state;
 }
-function pendingStorage(storage) {
-    return {
-        getItem: (key) => storage.getItem(`tokens:${key}`),
-        setItem: (key, value) => storage.setItem(`tokens:${key}`, value),
-        removeItem: (key) => storage.removeItem(`tokens:${key}`),
-    };
-}
-export function clearPendingTokenIssue(storage) {
-    loadPending(pendingStorage(storage), Date.now());
-}
 function record(value) {
     return value !== null && typeof value === 'object' && !Array.isArray(value);
 }
@@ -72,6 +67,13 @@ function restoredIssue(value) {
         target: value.target,
         project: value.project,
         key: value.key,
+        ...(value.refresh === true ? { refresh: true } : {}),
+        ...(['personal', 'project', 'organization'].includes(String(value.listTarget))
+            ? {
+                listTarget: value.listTarget,
+                listProject: typeof value.listProject === 'string' ? value.listProject : null,
+            }
+            : {}),
         ...(typeof value.rotate === 'string' ? { rotate: value.rotate } : {}),
         ...(typeof value.replace === 'string' ? { replace: value.replace } : {}),
         draft: {
@@ -105,17 +107,48 @@ function publicToken(t) {
         revokedAt: t.revokedAt,
     };
 }
+export function inResultScope(result, project) {
+    if (!result)
+        return true;
+    if (result.target === 'project')
+        return project.slug === result.project;
+    if (result.target === 'personal')
+        return result.draft.projectMode !== 'selected' || result.draft.projectIds.includes(project.id);
+    return true;
+}
+export function hasSetupAccess(state, project) {
+    const result = state.result;
+    if (!result)
+        return false;
+    const permissions = result.target === 'personal'
+        ? project.permissions
+        : state.principals.find((p) => p.id === result.draft.servicePrincipalId)?.permissions;
+    return (permissions?.includes('project:packages:read') === true ||
+        (result.draft.scope !== 'read' &&
+            project.cap !== 'read' &&
+            permissions?.includes('project:packages:write') === true));
+}
 export function createTokensController(services, deps) {
     let state = {
         target: 'personal',
         project: null,
+        issuanceProject: null,
         items: [],
         next: null,
         principals: [],
         principalsNext: null,
         principalsRestricted: false,
+        principalsLoading: true,
+        principalsError: false,
+        organizationPermissions: [],
+        issuanceDraft: null,
+        issuancePrincipal: null,
+        issuanceNonce: 0,
         names: {},
         projectSlugs: {},
+        projects: [],
+        projectsError: false,
+        result: null,
         lifetime: null,
         userId: null,
         secret: null,
@@ -132,6 +165,8 @@ export function createTokensController(services, deps) {
     let epoch = 0;
     let listing = 0;
     let navigation = 0;
+    const policyQueue = [];
+    let policyWorkers = 0;
     const listeners = new Set();
     const set = (next) => {
         state = { ...state, ...next };
@@ -157,6 +192,7 @@ export function createTokensController(services, deps) {
             busy: true,
             secret: null,
             secretProject: null,
+            result: null,
             issuedId: null,
             oldPersonalId: null,
             pending: null,
@@ -203,10 +239,15 @@ export function createTokensController(services, deps) {
         if (result.ok) {
             set({
                 secret: result.data.token,
-                secretProject: target === 'project' ? project : null,
+                secretProject: target === 'project'
+                    ? project
+                    : d.projectMode === 'selected' && d.projectIds.length === 1
+                        ? (state.projectSlugs[d.projectIds[0]] ?? null)
+                        : null,
+                result: action,
                 oldPersonalId: action.replace ?? null,
                 issuedId: result.data.id,
-                notice: 'Save this token now; it is shown once.',
+                notice: 'Token created.',
             });
         }
         else if (result.code === 'reauth_required') {
@@ -234,6 +275,9 @@ export function createTokensController(services, deps) {
     }
     const controller = {
         snapshot: () => state,
+        announce(notice) {
+            set({ notice });
+        },
         subscribe(listener) {
             listeners.add(listener);
             return () => {
@@ -244,7 +288,12 @@ export function createTokensController(services, deps) {
             epoch++;
             navigation++;
             listing++;
-            set(tokensReducer(state, { type: 'navigate' }));
+            policyQueue.length = 0;
+            set({
+                ...tokensReducer(state, { type: 'navigate' }),
+                principalsLoading: false,
+                projects: state.projects.map((p) => p.policyState === 'loading' ? { ...p, policyState: 'idle' } : p),
+            });
         },
         dispose() {
             controller.navigate();
@@ -254,24 +303,33 @@ export function createTokensController(services, deps) {
             if (state.busy)
                 return;
             epoch++;
-            set({ secret: null, issuedId: null, oldPersonalId: null, notice: null, renewal: null });
+            set({
+                secret: null,
+                secretProject: null,
+                result: null,
+                issuedId: null,
+                oldPersonalId: null,
+                notice: null,
+                renewal: null,
+                issuanceDraft: state.pending === null ? null : state.issuanceDraft,
+            });
         },
         restore() {
             const loaded = loadPending(storage, deps.now());
             const action = loaded.ok ? restoredIssue(loaded.action?.body) : null;
             if (action !== null)
-                set({ target: action.target, project: action.project, pending: action, secret: null });
+                set({ pending: action, issuanceDraft: action.refresh ? action : null, secret: null });
         },
         async start(target, project) {
+            set({ issuanceProject: project });
             controller.restore();
             const action = state.pending;
-            await controller.load(action?.target ?? target, action === null ? project : action.project);
+            await controller.load(action?.listTarget ?? action?.target ?? target, action ? (action.listTarget ? (action.listProject ?? null) : action.project) : project);
         },
         async selectTarget(target, project) {
             if (state.busy)
                 return;
-            epoch++;
-            set(tokensReducer(state, { type: 'navigate' }));
+            set({ pending: null, renewal: null });
             await controller.load(target, project);
         },
         decline() {
@@ -282,11 +340,40 @@ export function createTokensController(services, deps) {
             if (action === null || state.busy || state.loading)
                 return;
             if (state.lifetime === null) {
-                await controller.load(action.target, action.project);
+                await controller.load();
                 if (state.pending !== action || state.lifetime === null || state.loading)
                     return;
             }
             await send(action);
+            if (action.refresh && state.secret !== null)
+                await controller.load();
+        },
+        async issueFor(target, project, draft) {
+            const action = {
+                target,
+                project,
+                draft,
+                key: deps.newKey(),
+                refresh: true,
+                listTarget: state.target,
+                listProject: state.project,
+            };
+            set({ issuanceDraft: action });
+            await send(action);
+            if (state.secret !== null)
+                await controller.load();
+        },
+        configureProject(slug) {
+            const result = state.result;
+            const project = state.projects.find((p) => p.slug === slug);
+            if (!project ||
+                !result ||
+                (result.target === 'project' && result.project !== slug) ||
+                (result.target === 'personal' &&
+                    result.draft.projectMode === 'selected' &&
+                    !result.draft.projectIds.includes(project.id)))
+                return;
+            set({ secretProject: slug });
         },
         async issue(draft) {
             await send({
@@ -316,6 +403,9 @@ export function createTokensController(services, deps) {
             }
             set({ renewal: token, secret: null, issuedId: null, oldPersonalId: null, notice: null });
         },
+        invalidProjects() {
+            set({ notice: 'Choose between 1 and 200 projects.' });
+        },
         registryOrigin: () => new URL(deps.origin).origin,
         clientConfig() {
             return state.secret === null || state.secretProject === null
@@ -338,7 +428,9 @@ export function createTokensController(services, deps) {
             catch {
                 if (version === epoch)
                     set({
-                        notice: kind === undefined ? 'Unable to copy token.' : 'Unable to copy configuration.',
+                        notice: kind === undefined
+                            ? 'Could not copy. Select and copy the token manually.'
+                            : 'Could not copy. Select and copy the configuration manually.',
                     });
             }
         },
@@ -349,7 +441,7 @@ export function createTokensController(services, deps) {
                 project,
                 loading: true,
                 listError: false,
-                notice: null,
+                notice: state.secret === null ? null : state.notice,
                 items: [],
                 next: null,
                 lifetime: null,
@@ -375,36 +467,106 @@ export function createTokensController(services, deps) {
         },
         async loadPrincipals(after) {
             const version = navigation;
-            const result = await services.client.request('get', '/_pb/service-principals', {
-                query: { after },
+            set({ principalsLoading: true, principalsError: false });
+            const principals = [];
+            let cursor = after;
+            do {
+                const result = await services.client.request('get', '/_pb/service-principals', {
+                    query: { after: cursor },
+                });
+                if (version !== navigation)
+                    return;
+                if (!result.ok) {
+                    set({
+                        principalsLoading: false,
+                        principalsError: result.status !== 403,
+                        principalsRestricted: result.status === 403,
+                        principals: [],
+                        principalsNext: null,
+                    });
+                    return;
+                }
+                principals.push(...result.data.items.map((p) => ({
+                    id: p.id,
+                    name: p.name,
+                    projectId: p.projectId,
+                    status: p.status,
+                    revision: p.revision,
+                    createdByUserId: p.createdByUserId,
+                    permissions: p.permissions,
+                })));
+                cursor = result.data.next ?? undefined;
+            } while (cursor !== undefined);
+            set({
+                principals,
+                principalsNext: null,
+                principalsRestricted: false,
+                principalsLoading: false,
             });
-            if (version !== navigation)
-                return;
-            if (result.ok)
+        },
+        loadProjectPolicies(ids, retry = false) {
+            const marked = new Set();
+            for (const id of ids) {
+                const project = state.projects.find((p) => p.id === id);
+                if (!project ||
+                    project.policyState === 'loading' ||
+                    project.policyState === 'loaded' ||
+                    (!retry && project.policyState === 'error'))
+                    continue;
+                marked.add(id);
+                policyQueue.push(id);
+            }
+            if (marked.size)
                 set({
-                    principals: result.data.items.map((p) => ({
-                        id: p.id,
-                        name: p.name,
-                        projectId: p.projectId,
-                        status: p.status,
-                        revision: p.revision,
-                        createdByUserId: p.createdByUserId,
-                        permissions: p.permissions,
-                    })),
-                    principalsNext: result.data.next,
-                    principalsRestricted: false,
+                    projects: state.projects.map((p) => marked.has(p.id) ? { ...p, policyState: 'loading' } : p),
                 });
-            else if (result.status === 403)
-                set({ principals: [], principalsNext: null, principalsRestricted: true });
+            async function work() {
+                policyWorkers++;
+                try {
+                    while (policyQueue.length) {
+                        const id = policyQueue.shift();
+                        const project = state.projects.find((p) => p.id === id);
+                        if (!project)
+                            continue;
+                        const version = navigation;
+                        const detail = await services.client.request('get', '/_pb/projects/{project}', {
+                            params: { project: project.slug },
+                        });
+                        const authority = await services.client.request('get', '/_pb/projects/{project}/permissions', { params: { project: project.slug } });
+                        if (version !== navigation)
+                            continue;
+                        set({
+                            projects: state.projects.map((p) => p.id === id
+                                ? {
+                                    ...p,
+                                    cap: detail.ok ? detail.data.tokenMaxScope : null,
+                                    permissions: authority.ok ? authority.data.project : null,
+                                    policyState: detail.ok && authority.ok ? 'loaded' : 'error',
+                                }
+                                : p),
+                        });
+                    }
+                }
+                finally {
+                    policyWorkers--;
+                }
+            }
+            while (policyQueue.length && policyWorkers < 4)
+                void work();
+        },
+        choosePrincipal(id, project, organization = project === null) {
+            set({
+                issuancePrincipal: id,
+                issuanceProject: organization ? '__organization' : (project ?? ''),
+                issuanceNonce: state.issuanceNonce + 1,
+            });
         },
         async identity() {
             const version = navigation;
-            const result = await services.client.request('get', '/_pb/session');
-            if (version !== navigation)
-                return;
-            if (result.ok)
-                set({ userId: result.data.user.id });
+            const session = services.client.request('get', '/_pb/session');
             const projectSlugs = {};
+            const catalogue = [];
+            let projectsError = false;
             let projectAfter;
             do {
                 const projects = await services.client.request('get', '/_pb/projects', {
@@ -412,16 +574,36 @@ export function createTokensController(services, deps) {
                 });
                 if (version !== navigation)
                     return;
-                if (!projects.ok)
+                if (!projects.ok) {
+                    projectsError = true;
                     break;
-                for (const project of projects.data.items)
+                }
+                for (const project of projects.data.items) {
                     projectSlugs[project.id] = project.slug;
+                    if (project.status === 'archived')
+                        continue;
+                    catalogue.push({
+                        id: project.id,
+                        slug: project.slug,
+                        name: project.name ?? project.slug,
+                        cap: null,
+                        permissions: null,
+                        policyState: 'idle',
+                    });
+                }
                 projectAfter = projects.data.next ?? undefined;
+                set({ projectSlugs: { ...projectSlugs }, projects: [...catalogue], projectsError });
             } while (projectAfter !== undefined);
-            set({ projectSlugs });
+            set({ projectSlugs, projects: catalogue, projectsError });
+            const result = await session;
+            if (version !== navigation)
+                return;
+            if (result.ok)
+                set({ userId: result.data.user.id });
             const permissions = await services.client.request('get', '/_pb/me/permissions');
             if (version !== navigation)
                 return;
+            set({ organizationPermissions: permissions.ok ? permissions.data.organization : [] });
             if (!permissions.ok || !permissions.data.organization.includes('org:users:read')) {
                 set({ names: {} });
                 return;
@@ -489,7 +671,8 @@ export function createTokensController(services, deps) {
                 failure(result);
             else {
                 await controller.loadPrincipals();
-                set({ notice: 'Service principal created.' });
+                set({ notice: 'Service principal created. Create a token to use it.' });
+                return result.data;
             }
         },
         async suspendPrincipal(principal) {
@@ -518,7 +701,9 @@ export function createTokensController(services, deps) {
 }
 export function filterTokens(items, filters) {
     return items.filter((item) => item.name.toLowerCase().includes(filters.q.toLowerCase()) &&
-        (!filters.scope || item.scope === filters.scope) &&
+        (!filters.scope ||
+            item.scope === filters.scope ||
+            accessLabels[item.scope] === filters.scope) &&
         (!filters.status || item.status === filters.status));
 }
 export function TokenList({ state: s, controller: c }) {
@@ -532,7 +717,7 @@ export function TokenList({ state: s, controller: c }) {
             : 'Organization';
     return (_jsxs(_Fragment, { children: [_jsx(LoadedListFilters, { values: filters, fields: [
                     { key: 'q', label: 'Name (this page)' },
-                    { key: 'scope', label: 'Scope', options: ['read', 'write', 'full'] },
+                    { key: 'scope', label: 'Scope', options: Object.values(accessLabels) },
                     { key: 'status', label: 'Status', options: ['active', 'expired', 'revoked'] },
                 ], onChange: setFilters }), _jsxs("div", { className: "my-3 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("p", { className: "text-sm text-neutral-600", children: [items.length, " tokens on this page \u00B7", ' ', items.filter((token) => token.status === 'active').length, " active"] }), _jsx(Button, { type: "button", variant: "outline", disabled: s.loading || s.busy, onClick: () => void c.load(), children: "Reload tokens" })] }), s.loading ? (_jsx(ListState, { kind: "loading", title: "Loading tokens\u2026" })) : s.listError ? (_jsx(ListState, { kind: "error", title: "Unable to load tokens." })) : items.length === 0 ? (_jsx(ListState, { kind: filtered ? 'filtered-empty' : 'empty', title: filtered ? 'No tokens match these filters on this page.' : 'No tokens on this page.' })) : (_jsx(DataTable, { label: "Tokens", items: items, columns: [
                     {
@@ -551,7 +736,7 @@ export function TokenList({ state: s, controller: c }) {
                         key: 'scope',
                         label: 'Scope',
                         value: (token) => token.scope,
-                        render: (token) => _jsx(Badge, { variant: "outline", children: token.scope }),
+                        render: (token) => _jsx(Badge, { variant: "outline", children: accessLabels[token.scope] }),
                     },
                     {
                         key: 'project',
@@ -599,8 +784,25 @@ export function TokenList({ state: s, controller: c }) {
                     },
                 ] })), s.next === null ? null : (_jsx(Button, { type: "button", disabled: s.busy || s.loading, onClick: () => void c.load(s.target, s.project, s.next), children: "Next tokens" })), _jsx("p", { className: "mt-3 text-xs text-neutral-600", children: "Secrets are never listed. Only tokens in your accessible scope appear here." })] }));
 }
+function focusResult(node) {
+    node?.focus();
+}
+function SetupProjectAccess({ state: s, controller: c }) {
+    const [setupCandidate, setSetupCandidate] = useState('');
+    const candidate = s.projects.find((p) => p.id === setupCandidate);
+    useEffect(() => {
+        if (s.secret && candidate?.policyState === 'loaded' && hasSetupAccess(s, candidate))
+            c.configureProject(candidate.slug);
+    }, [c, s.secret, candidate]);
+    return (_jsxs(_Fragment, { children: [' ', s.projects.some((p) => p.permissions === null) && (_jsxs("details", { children: [_jsx("summary", { className: "min-h-11 cursor-pointer", children: "Check another project's package access" }), _jsx(Label, { htmlFor: "setup-candidate", children: "Project to configure" }), _jsxs(Select, { id: "setup-candidate", className: "min-h-11", value: setupCandidate, onChange: (event) => {
+                            setSetupCandidate(event.target.value);
+                            c.loadProjectPolicies([event.target.value]);
+                        }, children: [_jsx("option", { value: "", children: "Choose a project" }), s.projects
+                                .filter((p) => inResultScope(s.result, p))
+                                .map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id)))] }), candidate?.policyState === 'loading' && _jsx("p", { children: "Loading project access\u2026" }), candidate?.policyState === 'error' && (_jsx(Button, { type: "button", onClick: () => c.loadProjectPolicies([candidate.id], true), children: "Try again loading project access" })), candidate?.policyState === 'loaded' && !hasSetupAccess(s, candidate) && (_jsx("p", { children: "This token does not have package access to this project." }))] }))] }));
+}
 export function TokensView({ state: s, controller: c }) {
-    const personal = s.renewal?.kind === 'pat' || s.target === 'personal';
+    const personal = s.renewal !== null ? s.renewal.kind === 'pat' : s.target === 'personal';
     const policy = s.lifetime?.[personal ? 'personal' : 'service'];
     const renewal = s.renewal;
     const clientConfig = c.clientConfig();
@@ -609,26 +811,20 @@ export function TokensView({ state: s, controller: c }) {
         : s.target === 'project'
             ? Object.keys(s.projectSlugs).find((id) => s.projectSlugs[id] === s.project)
             : null;
-    const principalChoices = s.principalsRestricted
-        ? [
-            ...new Map(s.items
-                .filter((t) => t.kind === 'svc' && t.status === 'active' && t.servicePrincipalId !== null)
-                .map((t) => [
-                t.servicePrincipalId,
-                {
-                    id: t.servicePrincipalId,
-                    name: t.servicePrincipalId,
-                    projectId: t.projectId,
-                },
-            ])).values(),
-        ]
-        : s.principals.filter((p) => p.status === 'active');
+    const principalChoices = s.principals.filter((p) => p.status === 'active');
     function issue(event) {
         event.preventDefault();
         if (s.busy)
             return;
         const form = event.currentTarget;
         const data = new FormData(form);
+        const selectedIds = data.getAll('projectIds').map(String);
+        if (personal &&
+            data.get('projectMode') === 'selected' &&
+            (selectedIds.length < 1 || selectedIds.length > 200)) {
+            c.invalidProjects();
+            return;
+        }
         const scope = renewal?.kind === 'svc' ? renewal.scope : String(data.get('scope'));
         void c.issue({
             name: String(data.get('name')),
@@ -636,28 +832,49 @@ export function TokensView({ state: s, controller: c }) {
             lifetimeDays: Number(data.get('lifetimeDays')),
             servicePrincipalId: String(data.get('principal') ?? ''),
             projectMode: data.get('projectMode') === 'selected' ? 'selected' : 'all',
-            projectIds: String(data.get('projectIds') ?? '')
-                .split(/\s+/)
-                .filter(Boolean),
+            projectIds: data.getAll('projectIds').map(String),
             overlapDays: Number(data.get('overlap') ?? 0),
         });
-        form.reset();
     }
-    return (_jsxs("section", { "aria-labelledby": "page-heading", className: "space-y-4", children: [_jsx("h1", { tabIndex: -1, id: "page-heading", className: "text-xl font-semibold", children: "Tokens" }), _jsx("p", { className: "text-neutral-600", children: "Credentials for Composer and npm clients. Management writes use your signed-in session. Secrets are shown once." }), _jsx(Label, { htmlFor: "token-list", children: "Token list" }), _jsxs(Select, { id: "token-list", value: s.target, disabled: s.busy, onChange: (e) => {
-                    void c.selectTarget(e.target.value, s.project);
-                }, children: [_jsx("option", { value: "personal", children: "My personal tokens" }), s.project === null ? null : _jsx("option", { value: "project", children: "Project tokens" }), _jsx("option", { value: "organization", children: "Organization tokens" })] }), _jsxs("details", { className: "detail-group", children: [_jsx("summary", { className: "cursor-pointer font-medium", children: "Token lifetimes and access" }), _jsx("p", { className: "mt-3", children: "Your personal tokens are revoked when you leave the organization or your account is suspended. Access stops at once; the tokens are marked revoked shortly after." }), _jsx("p", { children: "Service tokens keep working when the person who created them leaves. Project owners can see, renew and revoke every service token of their project." }), _jsxs("dl", { className: "detail-list mt-3", children: [_jsx("dt", { children: "Personal maximum lifetime" }), _jsx("dd", { children: "1 year (the operator can set less)" }), _jsx("dt", { children: "Service maximum lifetime" }), _jsx("dd", { children: "1 year for every scope (the operator can change it)" })] })] }), s.notice === null || s.listError ? null : (_jsx(Alert, { children: _jsx(AlertDescription, { children: s.notice }) })), s.pending === null ? null : (_jsxs("section", { "aria-label": "Confirm token issue", className: "space-y-2", children: [_jsx("h2", { children: "Confirm token issue" }), _jsx("p", { children: "Your identity was checked. Issue this token now?" }), _jsx(Button, { type: "button", disabled: s.busy || s.loading || s.lifetime === null, onClick: () => void c.confirm(), children: "Confirm token issue" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => c.decline(), children: "Cancel" })] })), s.secret === null ? null : (_jsxs("section", { "aria-label": "Token secret", className: "detail-group space-y-3 border-emerald-200", children: [_jsx("h2", { children: "Token secret \u2014 shown once" }), _jsx("p", { children: "Copy it now. This value will not be shown again. Closing this panel keeps the token active." }), _jsx("pre", { className: "rounded-md border bg-neutral-50 p-3 overflow-x-auto whitespace-pre-wrap break-all", children: _jsx("code", { children: s.secret }) }), _jsx(Button, { type: "button", onClick: () => void c.copy(), children: "Copy token" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => c.closeSecret(), children: "Close secret panel" }), clientConfig === null ? (_jsxs("p", { children: ["Choose a project this token can access to configure Composer or npm. Open that project\u2019s registry at ", c.registryOrigin(), "/<project> for Composer or", ' ', c.registryOrigin(), "/<project>/npm/ for npm."] })) : (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Composer" }), _jsx("pre", { className: "overflow-x-auto rounded-md border bg-neutral-50 p-3", children: _jsx("code", { children: clientConfig.composer }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => void c.copy('composer'), children: "Copy Composer configuration" }), _jsx("h3", { children: "npm (.npmrc)" }), _jsx("pre", { className: "overflow-x-auto rounded-md border bg-neutral-50 p-3", children: _jsx("code", { children: clientConfig.npm }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => void c.copy('npm'), children: "Copy npm configuration" })] })), s.oldPersonalId !== null ? (_jsx(ConfirmAction, { action: "Revoke old personal token", target: s.oldPersonalId, scope: "My personal tokens", description: "Clients using the old token will lose access immediately. This cannot be undone. Update clients to the new token before revoking.", disabled: s.busy, onConfirm: () => void c.revoke(s.oldPersonalId, true) })) : null] })), s.pending !== null || s.secret !== null ? null : (_jsxs("details", { open: renewal !== null, className: "detail-group", children: [_jsx("summary", { className: "cursor-pointer font-semibold", children: renewal === null ? 'Issue token' : 'Renew token' }), _jsxs("form", { onSubmit: issue, className: "grid gap-2", children: [_jsx("h2", { children: renewal === null ? 'Issue token' : 'Renew token' }), _jsx(Label, { htmlFor: "token-name", children: "Name" }), _jsx(Input, { id: "token-name", name: "name", defaultValue: renewal?.name ?? '', required: true }), _jsx(Label, { htmlFor: "token-scope", children: "Scope" }), _jsxs(Select, { id: "token-scope", name: "scope", defaultValue: renewal?.scope ?? 'read', disabled: renewal?.kind === 'svc', children: [_jsx("option", { value: "read", children: "Read" }), _jsx("option", { value: "write", children: "Write" }), _jsx("option", { value: "full", children: "Full" })] }), _jsx(Label, { htmlFor: "token-lifetime", children: "Lifetime" }), _jsx(Select, { id: "token-lifetime", name: "lifetimeDays", defaultValue: policy?.defaultDays, required: true, children: policy === undefined
+    return (_jsxs("section", { "aria-labelledby": "page-heading", className: "space-y-4", children: [_jsx("h1", { tabIndex: -1, id: "page-heading", className: "text-xl font-semibold", children: "Tokens" }), _jsx("p", { className: "text-neutral-600", children: "Connect your tools and CI pipelines to your packages." }), s.notice === null || s.listError ? null : (_jsx(Alert, { role: "status", "aria-live": "polite", children: _jsx(AlertDescription, { children: s.notice }) })), s.pending === null ? null : (_jsxs("section", { "aria-label": "Confirm token issue", className: "space-y-2", children: [_jsx("h2", { children: "Confirm token issue" }), _jsx("p", { children: "Your identity was checked. Issue this token now?" }), _jsx(Button, { type: "button", disabled: s.busy || s.loading || s.lifetime === null, onClick: () => void c.confirm(), children: "Confirm token issue" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => c.decline(), children: "Cancel" })] })), s.secret === null ? null : (_jsxs("section", { "aria-label": "Token secret", className: "detail-group space-y-3 border-emerald-200", children: [_jsx("h2", { tabIndex: -1, ref: focusResult, children: "Token created" }), s.result && (_jsxs("p", { className: "break-words", children: [s.result.draft.name, " \u00B7", ' ', s.result.target === 'project'
+                                ? (s.projects.find((p) => p.slug === s.result?.project)?.name ??
+                                    'Project name unavailable')
+                                : s.result.target === 'organization'
+                                    ? 'Organization-wide'
+                                    : s.result.draft.projectMode === 'all'
+                                        ? 'All accessible projects'
+                                        : s.result.draft.projectIds.length === 1
+                                            ? (s.projects.find((p) => p.id === s.result?.draft.projectIds[0])?.name ??
+                                                '1 selected project')
+                                            : `${s.result.draft.projectIds.length} selected projects`, ' ', "\u00B7 ", accessLabels[s.result.draft.scope], " \u00B7 Expires after", ' ', dayLabel(s.result.draft.lifetimeDays)] })), _jsx("p", { children: "Copy this token now. You cannot view it again. Closing this panel keeps it active." }), _jsx("pre", { className: "rounded-md border bg-neutral-50 p-3 overflow-x-auto whitespace-pre-wrap break-all", children: _jsx("code", { role: "region", "aria-label": "Created token", children: s.secret }) }), _jsx(Button, { className: "min-h-11", type: "button", onClick: () => void c.copy(), children: "Copy token" }), _jsx(Button, { type: "button", variant: "outline", className: "min-h-11", onClick: () => {
+                            c.closeSecret();
+                            requestAnimationFrame(() => document.getElementById('new-token')?.focus());
+                        }, children: "Done" }), _jsx(SetupProjectAccess, { state: s, controller: c }), _jsx(Label, { htmlFor: "configure-project", children: "Configure for project" }), _jsxs(Select, { className: "min-h-11", id: "configure-project", value: s.secretProject ?? '', onChange: (event) => c.configureProject(event.target.value), children: [_jsx("option", { value: "", children: "Choose a project" }), s.projects
+                                .filter((p) => hasSetupAccess(s, p))
+                                .filter((p) => inResultScope(s.result, p))
+                                .map((p) => (_jsx("option", { value: p.slug, children: p.name }, p.id)))] }), clientConfig === null ? (_jsx("p", { children: "Choose a project this token can access to configure Composer or npm." })) : (_jsxs(_Fragment, { children: [_jsx("p", { children: "Composer sends this credential to this registry host. The token still limits which projects it can access." }), [
+                                ['Composer', ['composer', 'composerAuth']],
+                                ['npm', ['npm']],
+                                ['CI environment', ['ciComposer', 'ciNpm']],
+                            ].map(([title, kinds], index) => (_jsxs("details", { open: index === 0, className: "min-w-0", children: [_jsx("summary", { className: "min-h-11 cursor-pointer", children: title }), kinds.map((kind) => (_jsxs("div", { children: [_jsx("p", { children: {
+                                                    composer: 'Composer repository command',
+                                                    composerAuth: 'Merge this into your local auth.json. Do not commit credentials.',
+                                                    npm: 'Use this on your computer. For CI, use the environment-variable version below.',
+                                                    ciComposer: 'Save PACKAGE_BROKER_TOKEN as a secret in your CI settings. These examples install packages; they do not publish them.',
+                                                    ciNpm: 'Save this as .npmrc, then run npm ci.',
+                                                }[kind] }), _jsx("pre", { className: "whitespace-pre-wrap break-all rounded-md border bg-neutral-50 p-3", children: _jsx("code", { children: clientConfig[kind] }) }), _jsx(Button, { type: "button", variant: "outline", className: "min-h-11", onClick: () => void c.copy(kind), children: {
+                                                    composer: 'Copy Composer configuration',
+                                                    composerAuth: 'Copy auth.json',
+                                                    npm: 'Copy npm configuration',
+                                                    ciComposer: 'Copy CI Composer',
+                                                    ciNpm: 'Copy CI npm',
+                                                }[kind] })] }, kind)))] }, title)))] })), s.oldPersonalId !== null ? (_jsx(ConfirmAction, { action: "Revoke old personal token", target: s.oldPersonalId, scope: "My personal tokens", description: "Clients using the old token will lose access immediately. This cannot be undone. Update clients to the new token before revoking.", disabled: s.busy, onConfirm: () => void c.revoke(s.oldPersonalId, true) })) : null] })), _jsx("div", { hidden: s.pending !== null || s.secret !== null || renewal !== null, children: _jsx(IssueTokenForm, { state: s, controller: c }) }), s.pending !== null || s.secret !== null || renewal === null ? null : (_jsxs("details", { open: renewal !== null, className: "detail-group", children: [_jsx("summary", { className: "min-h-11 cursor-pointer font-semibold", children: renewal === null ? 'Issue token' : 'Renew token' }), _jsxs("form", { onSubmit: issue, className: "grid gap-2", children: [_jsx(Label, { htmlFor: "token-name", children: "Name" }), _jsx(Input, { id: "token-name", name: "name", defaultValue: renewal?.name ?? '', required: true }), _jsx(Label, { htmlFor: "token-scope", children: "Scope" }), _jsxs(Select, { id: "token-scope", name: "scope", defaultValue: renewal?.scope ?? 'read', disabled: renewal?.kind === 'svc', children: [_jsx("option", { value: "read", children: "Install and download" }), _jsx("option", { value: "write", children: "Include publish permission" }), _jsx("option", { value: "full", children: "Include grants, sources and audit access" })] }), _jsx(Label, { htmlFor: "token-lifetime", children: "Lifetime" }), _jsx(Select, { id: "token-lifetime", name: "lifetimeDays", defaultValue: policy?.defaultDays, required: true, children: policy === undefined
                                     ? null
-                                    : lifetimeChoices(policy).map((days) => (_jsxs("option", { value: days, children: [days, " days"] }, days))) }), personal ? (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-project-mode", children: "Projects" }), _jsxs(Select, { id: "token-project-mode", name: "projectMode", defaultValue: renewal?.projectMode ?? 'all', children: [_jsx("option", { value: "all", children: "All accessible projects" }), _jsx("option", { value: "selected", children: "Selected projects" })] }), _jsx(Label, { htmlFor: "token-project-ids", children: "Selected project IDs (space separated; re-enter when renewing)" }), _jsx(Input, { id: "token-project-ids", name: "projectIds", required: renewal?.projectMode === 'selected' })] })) : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-principal", children: "Service principal" }), _jsxs(Select, { id: "token-principal", name: "principal", defaultValue: renewal?.servicePrincipalId ?? '', disabled: renewal?.kind === 'svc', required: renewal?.kind !== 'svc', children: [_jsx("option", { value: "", disabled: true, children: "Select a principal" }), principalChoices
+                                    : lifetimeChoices(policy).map((days) => (_jsx("option", { value: days, children: dayLabel(days) }, days))) }), personal ? (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-project-mode", children: "Projects" }), _jsxs(Select, { id: "token-project-mode", name: "projectMode", defaultValue: renewal?.projectMode ?? 'all', children: [_jsx("option", { value: "all", children: "All accessible projects" }), _jsx("option", { value: "selected", children: "Selected projects" })] }), _jsxs("fieldset", { children: [_jsx("legend", { children: "Choose projects again when renewing a selected token" }), s.projects.map((p) => (_jsxs("label", { className: "flex min-h-11 items-center gap-2", children: [_jsx("input", { type: "checkbox", name: "projectIds", value: p.id }), p.name] }, p.id)))] })] })) : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-principal", children: "Service principal" }), _jsxs(Select, { id: "token-principal", name: "principal", defaultValue: renewal?.servicePrincipalId ?? '', disabled: renewal?.kind === 'svc', required: renewal?.kind !== 'svc', children: [_jsx("option", { value: "", disabled: true, children: "Select a principal" }), principalChoices
                                                 .filter((p) => p.projectId === projectId)
-                                                .map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id)))] }), s.principalsRestricted ? (_jsx("p", { children: "Principal discovery is limited to principals referenced by the tokens you can see." })) : null] })), renewal?.kind !== 'svc' ? null : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-overlap", children: "Overlap" }), _jsxs(Select, { id: "token-overlap", name: "overlap", defaultValue: "0", children: [_jsx("option", { value: "0", children: "None" }), _jsx("option", { value: "1", children: "1 day" }), _jsx("option", { value: "7", children: "7 days" })] }), _jsx("p", { children: "The old token stops at the end of the overlap or when the new token expires, whichever is first." })] })), _jsx(Button, { type: "submit", disabled: s.busy || s.loading || policy === undefined, children: renewal === null ? 'Issue token' : 'Renew token' }), renewal === null ? null : (_jsx(Button, { type: "button", variant: "outline", disabled: s.busy, onClick: () => c.closeSecret(), children: "Cancel renewal" }))] }, `${s.target}:${renewal?.id ?? ''}:${policy?.defaultDays}`)] }, `${s.target}:${renewal?.id ?? ''}`)), _jsx(TokenList, { state: s, controller: c }, `${s.target}:${s.project}`), _jsxs("details", { className: "detail-group", children: [_jsx("summary", { className: "cursor-pointer font-semibold", children: "Service principals" }), _jsx("h2", { children: "Service principals" }), _jsxs("form", { className: "grid gap-2", onSubmit: (event) => {
-                            event.preventDefault();
-                            if (s.busy)
-                                return;
-                            const form = event.currentTarget;
-                            const data = new FormData(form);
-                            void c.createPrincipal(String(data.get('name')), String(data.get('project')), String(data.get('permissions')).split(/\s+/).filter(Boolean));
-                            form.reset();
-                        }, children: [_jsx(Label, { htmlFor: "principal-name", children: "Principal name" }), _jsx(Input, { id: "principal-name", name: "name", required: true }), _jsx(Label, { htmlFor: "principal-project", children: "Project ID (empty for organization)" }), _jsx(Input, { id: "principal-project", name: "project" }), _jsx(Label, { htmlFor: "principal-permissions", children: "Permissions (space separated)" }), _jsx(Input, { id: "principal-permissions", name: "permissions" }), _jsx(Button, { type: "submit", disabled: s.busy, children: "Create service principal" })] }), _jsx(Button, { type: "button", variant: "outline", disabled: s.busy, onClick: () => void c.loadPrincipals(), children: "Reload service principals" }), s.principalsRestricted ? (_jsx(ListState, { kind: "placeholder", title: "Service principal discovery is restricted." })) : s.principals.length === 0 ? (_jsx(ListState, { kind: "empty", title: "No service principals loaded." })) : (_jsx(DataTable, { label: "Service principals", items: s.principals, columns: [
+                                                .map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id)))] }), s.principalsRestricted ? (_jsx("p", { children: "Ask an organization administrator to create a service identity for this project." })) : null] })), renewal?.kind !== 'svc' ? null : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-overlap", children: "Overlap" }), _jsxs(Select, { id: "token-overlap", name: "overlap", defaultValue: "0", children: [_jsx("option", { value: "0", children: "None" }), _jsx("option", { value: "1", children: "1 day" }), _jsx("option", { value: "7", children: "7 days" })] }), _jsx("p", { children: "The old token stops at the end of the overlap or when the new token expires, whichever is first." })] })), _jsx(Button, { type: "submit", disabled: s.busy || s.loading || policy === undefined, children: renewal === null ? 'Issue token' : 'Renew token' }), renewal === null ? null : (_jsx(Button, { type: "button", variant: "outline", disabled: s.busy, onClick: () => c.closeSecret(), children: "Cancel renewal" }))] }, `${s.target}:${renewal?.id ?? ''}:${policy?.defaultDays}`)] }, `${s.target}:${renewal?.id ?? ''}`)), _jsx(Label, { htmlFor: "token-list", children: "Token list" }), _jsxs(Select, { id: "token-list", value: s.target, disabled: s.busy, onChange: (e) => {
+                    void c.selectTarget(e.target.value, s.project);
+                }, children: [_jsx("option", { value: "personal", children: "My personal tokens" }), s.project === null ? null : _jsx("option", { value: "project", children: "Project tokens" }), _jsx("option", { value: "organization", children: "Organization tokens" })] }), _jsxs("details", { className: "detail-group", children: [_jsx("summary", { children: "How token access works" }), _jsx("p", { children: "Personal tokens use your access and stop working if you leave or your account is suspended. Service tokens use a service identity and keep working when their creator leaves. Each project's access policy can limit a token further." })] }), _jsx(TokenList, { state: s, controller: c }, `${s.target}:${s.project}`), _jsxs("details", { className: "detail-group", children: [_jsx("summary", { className: "min-h-11 cursor-pointer font-semibold", children: "Service principals" }), _jsx(PrincipalForm, { state: s, controller: c }), _jsx(Button, { type: "button", variant: "outline", disabled: s.busy, onClick: () => void c.loadPrincipals(), children: "Reload service principals" }), s.principalsRestricted ? (_jsx(ListState, { kind: "placeholder", title: "You cannot browse service principals here." })) : s.principalsLoading ? (_jsx(ListState, { kind: "loading", title: "Loading service principals\u2026" })) : s.principals.length === 0 ? (_jsx(ListState, { kind: "empty", title: "No service principals loaded." })) : (_jsx(DataTable, { label: "Service principals", items: s.principals, columns: [
                             {
                                 key: 'name',
                                 label: 'Name',
@@ -687,13 +904,18 @@ export function bindTokensLifecycle(controller, events, onNavigate) {
         onNavigate();
     };
     const clear = () => controller.navigate();
+    const show = (event) => {
+        clear();
+        if (event.persisted === true)
+            onNavigate();
+    };
     events.addEventListener('hashchange', change);
     events.addEventListener('pagehide', clear);
-    events.addEventListener('pageshow', clear);
+    events.addEventListener('pageshow', show);
     return () => {
         events.removeEventListener('hashchange', change);
         events.removeEventListener('pagehide', clear);
-        events.removeEventListener('pageshow', clear);
+        events.removeEventListener('pageshow', show);
         controller.dispose();
     };
 }
@@ -733,10 +955,19 @@ export function TokensPage() {
             if (window.location.hash.startsWith('#/tokens'))
                 void controller.start(project === null ? 'personal' : 'project', project);
         }
+        function reload() {
+            if (!window.location.hash.startsWith('#/tokens'))
+                return;
+            void controller.identity();
+            void controller.loadPrincipals();
+        }
         change();
         void controller.identity();
         void controller.loadPrincipals();
-        return bindTokensLifecycle(controller, window, change);
+        return bindTokensLifecycle(controller, window, () => {
+            change();
+            reload();
+        });
     }, [controller]);
     useEffect(() => bindTokensReplay(controller, services), [controller, services]);
     return _jsx(TokensView, { state: state, controller: controller });