ankka-console 0.10.0 → 0.11.0

package/dist/routes/logs.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * A service's logs, with the CLI's four choices: one instance or all, the container before the last
- * restart, how many lines, how far back. With scripts running the page follows new lines as they are
+ * A service's logs, with the CLI's choices: one instance or all, the container before the last
+ * restart, how many lines, how far back, and — for a pod that holds two — the platform's container
+ * instead of the developer's. With scripts running the page follows new lines as they are
  * written, until the person pauses it; without, it shows what was there when the page was asked for.
  */
 import { useMemo, useState } from "react";
 import { Form, useLoaderData } from "react-router";
-import { guard, pageData, useConsoleContext } from "../context.js";
+import { applyPrimary, guard, pageData, projectShell, useConsoleContext } from "../context.js";
 import { ControlPlaneError } from "../client/errors.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, useConsole } from "../ui/console.js";
+import { useConsole } from "../ui/console.js";
+import { Page, ServiceSections } from "../ui/shell.js";
 import { useServiceStream } from "../ui/use-stream.js";
 import { lines } from "../stream/log-follow.js";
 export const meta = ({ loaderData }) => [{ title: `Logs of ${loaderData?.service.name ?? "a service"} · ankka` }];
@@ -20,11 +22,12 @@ export async function loader({ request, params, context }) {
     const query = {
         instance: q.get("instance") || undefined,
         previous: q.get("previous") === "true",
+        platform: q.get("platform") === "true",
         tail: q.get("tail") ? Number(q.get("tail")) : 200,
         since: q.get("since") ? Number(q.get("since")) : undefined,
     };
     return guard(ctx, async () => {
-        const [service, project, page] = await Promise.all([ctx.client.getService(projectId, name), ctx.client.getProject(projectId), pageData(ctx)]);
+        const [service, project, services, page] = await Promise.all([ctx.client.getService(projectId, name), ctx.client.getProject(projectId), ctx.client.listServices(projectId), pageData(ctx)]);
         const organization = await ctx.client.getOrganization(project.organizationId);
         let instances = [];
         let none;
@@ -40,11 +43,12 @@ export async function loader({ request, params, context }) {
         }
         // Every instance the service has had output from, for the choice; the current read may be of one.
         const known = query.instance ? [query.instance, ...instances.map((i) => i.instance).filter((i) => i !== query.instance)] : instances.map((i) => i.instance);
-        return { console: page, service, project, organization, instances, none, query, known };
+        const shell = projectShell(page, organization, project, services, [{ label: name, to: `projects/${encodeURIComponent(projectId)}/services/${encodeURIComponent(name)}` }, { label: "Logs" }], applyPrimary(projectId, name), name);
+        return { console: shell, service, project, organization, instances, none, query, known };
     });
 }
 export default function Logs() {
-    const { service, project: p, organization: o, instances, none, query, known } = useLoaderData();
+    const { service, project: p, instances, none, query, known } = useLoaderData();
     const { mount } = useConsole();
     const [follow, setFollow] = useState(true);
     const initial = useMemo(() => Object.fromEntries(instances.map((i) => [i.instance, { lines: i.lines, error: i.error }])), [instances]);
@@ -53,7 +57,10 @@ export default function Logs() {
         params.set("instance", query.instance);
     if (query.previous)
         params.set("previous", "true");
+    if (query.platform)
+        params.set("platform", "true");
     params.set("tail", String(query.tail));
+    const twoContainers = service.hosting === "process" || service.hosting === "web";
     const { byInstance, state } = useServiceStream(p.id, service.name, service, {
         follow: follow && !query.previous,
         query: params.toString(),
@@ -61,12 +68,6 @@ export default function Logs() {
         initial,
     });
     const shown = Object.entries(byInstance);
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [
-                    { label: "Organizations", to: "" },
-                    { label: o.name, to: `organizations/${encodeURIComponent(o.id)}` },
-                    { label: p.name, to: `projects/${encodeURIComponent(p.id)}` },
-                    { label: service.name, to: `projects/${encodeURIComponent(p.id)}/services/${encodeURIComponent(service.name)}` },
-                    { label: "Logs" },
-                ] }), _jsxs("h1", { children: ["Logs of ", service.name] }), _jsxs(Form, { method: "get", className: "ac-inline", "aria-label": "Which logs", children: [_jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "instance", children: "Instance" }), _jsxs("select", { id: "instance", name: "instance", defaultValue: query.instance ?? "", children: [_jsx("option", { value: "", children: "Every instance" }), known.map((i) => (_jsx("option", { value: i, children: i }, i)))] })] }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "tail", children: "Last lines" }), _jsx("input", { id: "tail", name: "tail", type: "number", min: 1, max: 5000, defaultValue: query.tail })] }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "since", children: "Last seconds" }), _jsx("input", { id: "since", name: "since", type: "number", min: 1, defaultValue: query.since, placeholder: "Any" })] }), _jsx("div", { className: "ac-field", children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", name: "previous", value: "true", defaultChecked: query.previous }), " The container before the last restart"] }) }), _jsx("button", { type: "submit", className: "ac-button", children: "Show" })] }), query.previous ? null : (_jsxs("p", { className: "ac-actions", children: [follow ? _jsx("span", { className: state === "live" ? "ac-live" : undefined, children: state === "live" ? "Following new lines" : "Connecting to follow new lines" }) : _jsx("span", { children: "Paused" }), _jsx("button", { type: "button", className: "ac-button ac-button-quiet", onClick: () => setFollow((f) => !f), hidden: state === "off" && !follow ? false : undefined, children: follow ? "Pause following" : "Follow new lines" }), _jsx("noscript", { children: _jsx("a", { href: `${mount}projects/${encodeURIComponent(p.id)}/services/${encodeURIComponent(service.name)}/logs?${params}`, children: "Refresh" }) })] })), none ? _jsxs("p", { className: "ac-empty", children: [none, ". Logs exist only while an instance runs."] }) : null, !none && shown.length === 0 ? _jsx("p", { className: "ac-empty", children: "No output yet." }) : null, shown.map(([instance, log]) => (_jsxs("section", { "aria-labelledby": `log-${instance}`, children: [_jsx("h2", { id: `log-${instance}`, children: instance }), log.error ? _jsx("p", { className: "ac-refusal", children: log.error }) : null, _jsx("pre", { className: "ac-log", tabIndex: 0, "data-instance": instance, children: log.lines.join("\n") })] }, instance)))] }));
+    return (_jsxs(Page, { children: [_jsxs("div", { className: "ac-head", children: [_jsxs("h1", { children: ["Logs of ", service.name] }), _jsx(ServiceSections, { projectId: p.id, name: service.name, current: "logs" })] }), _jsxs(Form, { method: "get", className: "ac-card ac-inline", "aria-label": "Which logs", children: [_jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "instance", children: "Instance" }), _jsxs("select", { id: "instance", name: "instance", defaultValue: query.instance ?? "", children: [_jsx("option", { value: "", children: "Every instance" }), known.map((i) => (_jsx("option", { value: i, children: i }, i)))] })] }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "tail", children: "Last lines" }), _jsx("input", { id: "tail", name: "tail", type: "number", min: 1, max: 5000, defaultValue: query.tail })] }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "since", children: "Last seconds" }), _jsx("input", { id: "since", name: "since", type: "number", min: 1, defaultValue: query.since, placeholder: "Any" })] }), _jsx("div", { className: "ac-field", children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", name: "previous", value: "true", defaultChecked: query.previous }), " The container before the last restart"] }) }), twoContainers ? (_jsx("div", { className: "ac-field", children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", name: "platform", value: "true", defaultChecked: query.platform }), " ", service.hosting === "web" ? "The platform's proxy instead of your program" : "The platform's sidecar instead of your process"] }) })) : null, _jsx("button", { type: "submit", className: "ac-button", children: "Show" })] }), query.previous ? null : (_jsxs("p", { className: "ac-actions", children: [follow ? _jsx("span", { className: state === "live" ? "ac-live" : undefined, children: state === "live" ? "Following new lines" : "Connecting to follow new lines" }) : _jsx("span", { children: "Paused" }), _jsx("button", { type: "button", className: "ac-button ac-button-quiet", onClick: () => setFollow((f) => !f), hidden: state === "off" && !follow ? false : undefined, children: follow ? "Pause following" : "Follow new lines" }), _jsx("noscript", { children: _jsx("a", { href: `${mount}projects/${encodeURIComponent(p.id)}/services/${encodeURIComponent(service.name)}/logs?${params}`, children: "Refresh" }) })] })), none ? _jsxs("p", { className: "ac-empty", children: [none, ". Logs exist only while an instance runs."] }) : null, !none && shown.length === 0 ? _jsx("p", { className: "ac-empty", children: "No output yet." }) : null, shown.map(([instance, log]) => (_jsxs("section", { className: "ac-card", "aria-labelledby": `log-${instance}`, children: [_jsx("h2", { id: `log-${instance}`, children: instance }), log.error ? _jsx("p", { className: "ac-refusal", children: log.error }) : null, _jsx("pre", { className: "ac-log", tabIndex: 0, "data-instance": instance, children: log.lines.join("\n") })] }, instance)))] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/members.js

@@ -1,13 +1,15 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * An organization's members and the invitations waiting to be claimed. Everyone in it sees the
  * list; only owners see the controls. A machine — a deploy token — is a member like anyone else,
  * and is shown as the machine it is.
  */
 import { redirect, useLoaderData } from "react-router";
-import { act, guard, pageData, text, useConsoleContext } from "../context.js";
+import { act, guard, organizationShell, pageData, text, useConsoleContext } from "../context.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, ConsoleForm, Field, Submit, useConsole, when } from "../ui/console.js";
+import { ConsoleForm, Field, Submit, useConsole, when } from "../ui/console.js";
+import { Page, SectionTitle } from "../ui/shell.js";
+import { Select } from "../ui/primitives/select.js";
 import { Refused, useRefusal } from "../ui/refused.js";
 import { HostActions } from "../extensions/render.js";
 export const meta = () => [{ title: "Members · ankka" }];
@@ -15,8 +17,8 @@ export async function loader({ params, context }) {
     const ctx = useConsoleContext(context);
     const id = params.organizationId;
     return guard(ctx, async () => {
-        const [organization, members, page] = await Promise.all([ctx.client.getOrganization(id), ctx.client.members(id), pageData(ctx)]);
-        return { console: page, organization, ...members };
+        const [organization, members, projects, page] = await Promise.all([ctx.client.getOrganization(id), ctx.client.members(id), ctx.client.listProjects(), pageData(ctx)]);
+        return { console: organizationShell(page, organization, projects, "members", [{ label: "Members" }]), organization, ...members };
     });
 }
 const role = (form) => (text(form, "role") === "owner" ? "owner" : "member");
@@ -51,9 +53,10 @@ export default function Members() {
     const { shows } = useConsole();
     const owner = o.role === "owner" || (page.principal?.platformAdmin ?? false);
     const inviteRefusal = useRefusal("invite");
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [{ label: "Organizations", to: "" }, { label: o.name, to: `organizations/${encodeURIComponent(o.id)}` }, { label: "Members" }] }), _jsxs("h1", { children: ["Members of ", o.name] }), _jsx("p", { className: "ac-lede", children: "Owners manage members and deploy tokens; every member can deploy." }), _jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsx("caption", { className: "ac-visually-hidden", children: "Members" }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Who" }), _jsx("th", { scope: "col", children: "Role" }), _jsx("th", { scope: "col", children: "Since" }), _jsx("th", { scope: "col", children: "Added by" }), owner ? _jsx("th", { scope: "col", children: "Change" }) : null] }) }), _jsx("tbody", { children: members.map((m) => {
+    const inspector = owner && shows("member.invite") ? (_jsxs("section", { "aria-labelledby": "invite", className: "ac-form", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "invite", children: "Invite someone" }) }), _jsx("p", { className: "ac-hint", children: "They become a member the first time they sign in with this email address, once the identity provider has verified it." }), _jsxs(ConsoleForm, { intent: "invite", className: "ac-inline", children: [_jsx(Field, { label: "Email", name: "email", type: "email", required: true, autoComplete: "off", defaultValue: inviteRefusal?.values.email }), _jsxs(Select, { label: "Role", id: "invite-role", name: "role", defaultValue: inviteRefusal?.values.role ?? "member", children: [_jsx("option", { value: "member", children: "Member" }), _jsx("option", { value: "owner", children: "Owner" })] }), _jsx(Submit, { intent: "invite", primary: true, children: "Invite" })] }), _jsx(Refused, { intent: "invite" }), _jsx("div", { className: "ac-ops", children: _jsx(HostActions, { operation: "member.invite", entity: o }) })] })) : null;
+    return (_jsxs(Page, { inspector: inspector, children: [_jsxs("h1", { children: ["Members of ", o.name] }), _jsx("p", { className: "ac-lede", children: "Owners manage members and deploy tokens; every member can deploy." }), _jsx("div", { className: "ac-card ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsx("caption", { className: "ac-visually-hidden", children: "Members" }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Who" }), _jsx("th", { scope: "col", children: "Role" }), _jsx("th", { scope: "col", children: "Since" }), _jsx("th", { scope: "col", children: "Added by" }), owner ? _jsx("th", { scope: "col", children: "Change" }) : null] }) }), _jsx("tbody", { children: members.map((m) => {
                                 const machine = m.subject.startsWith("token:");
-                                return (_jsxs("tr", { "data-member": m.subject, children: [_jsxs("td", { children: [machine ? "Deploy token " : null, _jsx("strong", { children: m.display ?? m.email ?? m.subject }), m.email && m.display ? _jsx("div", { className: "ac-hint", children: m.email }) : null, _jsx("div", { className: "ac-hint", children: m.subject })] }), _jsx("td", { children: roleWord(m.role) }), _jsx("td", { children: when(m.since) }), _jsx("td", { children: m.addedBy ?? "—" }), owner ? (_jsx("td", { children: machine ? (_jsx("span", { className: "ac-hint", children: "Revoke it on the deploy tokens page" })) : (_jsxs("div", { className: "ac-actions", children: [shows("member.role") ? (_jsxs(ConsoleForm, { intent: "role", children: [_jsx("input", { type: "hidden", name: "subject", value: m.subject }), _jsx("input", { type: "hidden", name: "role", value: m.role === "owner" ? "member" : "owner" }), _jsx(Submit, { intent: "role", children: m.role === "owner" ? "Make member" : "Make owner" })] })) : null, shows("member.remove") ? (_jsxs(ConsoleForm, { intent: "remove", children: [_jsx("input", { type: "hidden", name: "subject", value: m.subject }), _jsx(Submit, { intent: "remove", danger: true, children: "Remove" })] })) : null] })) })) : null] }, m.subject));
-                            }) })] }) }), _jsx(Refused, { intent: "role" }), _jsx(Refused, { intent: "remove" }), _jsx("h2", { children: "Invitations" }), invitations.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No invitations are waiting." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsx("caption", { className: "ac-visually-hidden", children: "Invitations waiting to be claimed" }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Email" }), _jsx("th", { scope: "col", children: "Role" }), _jsx("th", { scope: "col", children: "Invited" }), owner ? _jsx("th", { scope: "col", children: "Change" }) : null] }) }), _jsx("tbody", { children: invitations.map((i) => (_jsxs("tr", { "data-invitation": i.email, children: [_jsx("td", { children: i.email }), _jsx("td", { children: roleWord(i.role) }), _jsxs("td", { children: [when(i.invitedAt), i.invitedBy ? ` by ${i.invitedBy}` : ""] }), owner ? (_jsx("td", { children: shows("invitation.withdraw") ? (_jsxs(ConsoleForm, { intent: "withdraw", children: [_jsx("input", { type: "hidden", name: "email", value: i.email }), _jsx(Submit, { intent: "withdraw", children: "Withdraw" })] })) : null })) : null] }, i.email))) })] }) })), _jsx(Refused, { intent: "withdraw" }), owner && shows("member.invite") ? (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Invite someone" }), _jsx("p", { children: "They become a member the first time they sign in with this email address, once the identity provider has verified it." }), _jsxs(ConsoleForm, { intent: "invite", className: "ac-inline", children: [_jsx(Field, { label: "Email", name: "email", type: "email", required: true, autoComplete: "off", defaultValue: inviteRefusal?.values.email }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "invite-role", children: "Role" }), _jsxs("select", { id: "invite-role", name: "role", defaultValue: inviteRefusal?.values.role ?? "member", children: [_jsx("option", { value: "member", children: "Member" }), _jsx("option", { value: "owner", children: "Owner" })] })] }), _jsx(Submit, { intent: "invite", children: "Invite" })] }), _jsx(Refused, { intent: "invite" }), _jsx("div", { className: "ac-actions", children: _jsx(HostActions, { operation: "member.invite", entity: o }) })] })) : null] }));
+                                return (_jsxs("tr", { "data-member": m.subject, children: [_jsxs("td", { children: [machine ? "Deploy token " : null, _jsx("strong", { children: m.display ?? m.email ?? m.subject }), m.email && m.display ? _jsx("div", { className: "ac-hint", children: m.email }) : null, _jsx("div", { className: "ac-hint", children: m.subject })] }), _jsx("td", { children: roleWord(m.role) }), _jsx("td", { children: when(m.since) }), _jsx("td", { children: m.addedBy ?? "—" }), owner ? (_jsx("td", { children: machine ? (_jsx("span", { className: "ac-hint", children: "Revoke it on the deploy tokens page" })) : (_jsxs("div", { className: "ac-actions", children: [shows("member.role") ? (_jsxs(ConsoleForm, { intent: "role", children: [_jsx("input", { type: "hidden", name: "subject", value: m.subject }), _jsx("input", { type: "hidden", name: "role", value: m.role === "owner" ? "member" : "owner" }), _jsx(Submit, { intent: "role", className: "ac-button ac-button-small", children: m.role === "owner" ? "Make member" : "Make owner" })] })) : null, shows("member.remove") ? (_jsxs(ConsoleForm, { intent: "remove", children: [_jsx("input", { type: "hidden", name: "subject", value: m.subject }), _jsx(Submit, { intent: "remove", className: "ac-button ac-button-small ac-button-danger", children: "Remove" })] })) : null] })) })) : null] }, m.subject));
+                            }) })] }) }), _jsx(Refused, { intent: "role" }), _jsx(Refused, { intent: "remove" }), _jsxs("section", { className: "ac-card", "aria-labelledby": "invitations", children: [_jsx("h2", { id: "invitations", children: "Invitations" }), invitations.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No invitations are waiting." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsx("caption", { className: "ac-visually-hidden", children: "Invitations waiting to be claimed" }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Email" }), _jsx("th", { scope: "col", children: "Role" }), _jsx("th", { scope: "col", children: "Invited" }), owner ? _jsx("th", { scope: "col", children: "Change" }) : null] }) }), _jsx("tbody", { children: invitations.map((i) => (_jsxs("tr", { "data-invitation": i.email, children: [_jsx("td", { children: i.email }), _jsx("td", { children: roleWord(i.role) }), _jsxs("td", { children: [when(i.invitedAt), i.invitedBy ? ` by ${i.invitedBy}` : ""] }), owner ? (_jsx("td", { children: shows("invitation.withdraw") ? (_jsxs(ConsoleForm, { intent: "withdraw", children: [_jsx("input", { type: "hidden", name: "email", value: i.email }), _jsx(Submit, { intent: "withdraw", className: "ac-button ac-button-small", children: "Withdraw" })] })) : null })) : null] }, i.email))) })] }) })), _jsx(Refused, { intent: "withdraw" })] })] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/organization-new.js

@@ -5,14 +5,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * is a projection and may not show it yet.
  */
 import { redirect } from "react-router";
-import { act, guard, pageData, text, useConsoleContext } from "../context.js";
+import { act, guard, pageData, text, useConsoleContext, withShell } from "../context.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, ConsoleForm, Field, Submit } from "../ui/console.js";
+import { ConsoleForm, Field, Submit } from "../ui/console.js";
+import { Page } from "../ui/shell.js";
 import { Refused, useRefusal } from "../ui/refused.js";
 export const meta = () => [{ title: "Create an organization · ankka" }];
 export async function loader({ context }) {
     const ctx = useConsoleContext(context);
-    return guard(ctx, async () => ({ console: await pageData(ctx) }));
+    return guard(ctx, async () => ({
+        console: withShell(await pageData(ctx), { area: "organizations", crumbs: [{ label: "Organizations", to: "" }, { label: "New organization" }] }),
+    }));
 }
 export async function action({ request, context }) {
     const ctx = useConsoleContext(context);
@@ -25,6 +28,6 @@ export async function action({ request, context }) {
 }
 export default function NewOrganization() {
     const refusal = useRefusal("create");
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [{ label: "Organizations", to: "" }, { label: "New organization" }] }), _jsx("h1", { children: "Create an organization" }), _jsx("p", { className: "ac-lede", children: "You become its first owner. Invite others once it exists." }), _jsxs(ConsoleForm, { to: "organizations/new", intent: "create", className: "ac-form", children: [_jsx(Field, { label: "Id", name: "id", required: true, pattern: "[a-z]([\\-a-z0-9]{0,61}[a-z0-9])?", hint: "Lowercase letters, digits and hyphens, starting with a letter. It cannot be changed, and once deleted it cannot be used again.", defaultValue: refusal?.values.id, autoComplete: "off" }), _jsx(Field, { label: "Name", name: "name", required: true, hint: "What people see. You can rename it later.", defaultValue: refusal?.values.name }), _jsx(Refused, { intent: "create" }), _jsx("div", { children: _jsx(Submit, { intent: "create", children: "Create organization" }) })] })] }));
+    return (_jsxs(Page, { children: [_jsx("h1", { children: "Create an organization" }), _jsx("p", { className: "ac-lede", children: "You become its first owner. Invite others once it exists." }), _jsxs(ConsoleForm, { to: "organizations/new", intent: "create", className: "ac-card ac-form", children: [_jsx(Field, { label: "Id", name: "id", required: true, pattern: "[a-z]([\\-a-z0-9]{0,61}[a-z0-9])?", hint: "Lowercase letters, digits and hyphens, starting with a letter. It cannot be changed, and once deleted it cannot be used again.", defaultValue: refusal?.values.id, autoComplete: "off" }), _jsx(Field, { label: "Name", name: "name", required: true, hint: "What people see. You can rename it later.", defaultValue: refusal?.values.name }), _jsx(Refused, { intent: "create" }), _jsx("div", { children: _jsx(Submit, { intent: "create", primary: true, children: "Create organization" }) })] })] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/organization.js

@@ -3,9 +3,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * An organization: its projects, and what its owners and the platform administrator may do to it.
  */
 import { redirect, useLoaderData } from "react-router";
-import { act, guard, pageData, text, useConsoleContext } from "../context.js";
+import { act, guard, organizationShell, pageData, text, useConsoleContext } from "../context.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, ConsoleForm, ConsoleLink, Field, Submit, useConsole } from "../ui/console.js";
+import { ConsoleForm, ConsoleLink, Field, Submit, useConsole } from "../ui/console.js";
+import { Page } from "../ui/shell.js";
 import { Refused, useRefusal } from "../ui/refused.js";
 import { HostActions, loadPanels, Panels } from "../extensions/render.js";
 export const meta = ({ loaderData }) => [{ title: `${loaderData?.organization.name ?? "Organization"} · ankka` }];
@@ -16,10 +17,15 @@ export async function loader({ params, context }) {
         const [organization, projects, page] = await Promise.all([ctx.client.getOrganization(id), ctx.client.listProjects(), pageData(ctx)]);
         // An organization whose owners have all left can be given one by an administrator.
         const ownerless = page.principal?.platformAdmin ? !(await ctx.client.members(id)).members.some((m) => m.role === "owner") : false;
+        const own = projects.filter((p) => p.organizationId === id);
         return {
-            console: page,
+            console: organizationShell(page, organization, own, "organizations", [], {
+                label: "Create a project",
+                to: `organizations/${encodeURIComponent(id)}/projects/new`,
+                operation: "project.create",
+            }),
             organization,
-            projects: projects.filter((p) => p.organizationId === id),
+            projects: own,
             ownerless,
             panels: await loadPanels(ctx, "organization", organization),
         };
@@ -75,8 +81,9 @@ export default function Organization() {
     const deleteRefusal = useRefusal("delete");
     const adminRefused = [useRefusal("disable"), useRefusal("enable"), useRefusal("quota-set"), useRefusal("quota-clear"), useRefusal("repair")].some(Boolean);
     const path = `organizations/${encodeURIComponent(o.id)}`;
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [{ label: "Organizations", to: "" }, { label: o.name }] }), _jsx("h1", { children: o.name }), _jsxs("dl", { className: "ac-facts", children: [_jsx("dt", { children: "Id" }), _jsx("dd", { children: o.id }), _jsx("dt", { children: "Your role" }), _jsx("dd", { children: o.role === "owner" ? "Owner" : o.role === "member" ? "Member" : "Administrator (not a member)" }), _jsx("dt", { children: "State" }), _jsx("dd", { children: o.disabled ? "Disabled: its services are suspended and every change is refused" : "Active" }), _jsx("dt", { children: "Holds" }), _jsxs("dd", { children: [o.usage.projects, " projects, ", o.usage.services, " services, ", o.usage.instances, " instances"] }), o.quota ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Quota" }), _jsxs("dd", { children: [limit(o.quota.projects, "projects"), ", ", limit(o.quota.services, "services"), ", ", limit(o.quota.instances, "instances")] })] })) : null] }), _jsxs("nav", { "aria-label": "Organization", className: "ac-actions", children: [_jsx(ConsoleLink, { to: `${path}/members`, children: "Members" }), o.role === "owner" || admin ? _jsx(ConsoleLink, { to: `${path}/tokens`, children: "Deploy tokens" }) : null] }), _jsx("h2", { children: "Projects" }), projects.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No projects yet. A project groups services and gives them a namespace of their own." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsxs("caption", { className: "ac-visually-hidden", children: ["Projects in ", o.name] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Name" }), _jsx("th", { scope: "col", children: "Id" }), _jsx("th", { scope: "col", className: "ac-num", children: "Services" }), _jsx("th", { scope: "col", children: "Registry" })] }) }), _jsx("tbody", { children: projects.map((p) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ConsoleLink, { to: `projects/${encodeURIComponent(p.id)}`, children: p.name }) }), _jsx("td", { children: p.id }), _jsx("td", { className: "ac-num", children: p.services }), _jsx("td", { children: p.registry ? p.registry.server : "Public images only" })] }, p.id))) })] }) })), _jsxs("div", { className: "ac-actions", children: [shows("project.create") ? (_jsx(ConsoleLink, { to: `${path}/projects/new`, className: "ac-button", children: "Create a project" })) : null, _jsx(HostActions, { operation: "project.create", entity: o })] }), _jsx(Panels, { kind: "organization", entity: o, loaded: panels }), owner && (shows("organization.rename") || shows("organization.delete")) ? (_jsxs("details", { className: "ac-more", open: renameRefusal !== undefined || deleteRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Rename or delete" }), shows("organization.rename") ? (_jsxs(ConsoleForm, { intent: "rename", className: "ac-inline", children: [_jsx(Field, { label: "New name", name: "name", required: true, defaultValue: renameRefusal?.values.name ?? o.name }), _jsx(Submit, { intent: "rename", children: "Rename" })] })) : null, _jsx(Refused, { intent: "rename" }), shows("organization.delete") ? (_jsxs("div", { className: "ac-danger-zone", children: [_jsxs("p", { children: ["Deleting ", o.name, " is permanent, and its id can never be used again. It must have no projects."] }), _jsx(ConsoleForm, { intent: "delete", children: _jsx(Submit, { intent: "delete", danger: true, children: "Delete organization" }) }), _jsx(Refused, { intent: "delete" })] })) : null, _jsx(HostActions, { operation: "organization.delete", entity: o })] })) : null, admin ? (_jsxs("details", { className: "ac-more", open: adminRefused || undefined, children: [_jsx("summary", { children: "Platform administration" }), _jsx("div", { className: "ac-actions", children: o.disabled
+    const inspector = (_jsxs(_Fragment, { children: [_jsx(HostActions, { operation: "project.create", entity: o }), admin ? (_jsxs("details", { className: "ac-more", open: adminRefused || undefined, children: [_jsx("summary", { children: "Platform administration" }), _jsx("div", { className: "ac-ops", children: o.disabled
                             ? shows("organization.enable") && (_jsx(ConsoleForm, { intent: "enable", children: _jsx(Submit, { intent: "enable", children: "Enable organization" }) }))
-                            : shows("organization.disable") && (_jsx(ConsoleForm, { intent: "disable", children: _jsx(Submit, { intent: "disable", danger: true, children: "Disable organization" }) })) }), _jsx(Refused, { intent: "disable" }), _jsx(Refused, { intent: "enable" }), shows("organization.quota.set") ? (_jsxs(ConsoleForm, { intent: "quota-set", className: "ac-inline", "aria-label": "Quota", children: [_jsx(Field, { label: "Projects", name: "projects", type: "number", min: 0, defaultValue: o.quota?.projects, hint: "Empty for no limit" }), _jsx(Field, { label: "Services", name: "services", type: "number", min: 0, defaultValue: o.quota?.services }), _jsx(Field, { label: "Instances", name: "instances", type: "number", min: 0, defaultValue: o.quota?.instances }), _jsx(Submit, { intent: "quota-set", children: "Set quota" })] })) : null, _jsx(Refused, { intent: "quota-set" }), o.quota && shows("organization.quota.clear") ? (_jsx(ConsoleForm, { intent: "quota-clear", children: _jsx(Submit, { intent: "quota-clear", children: "Clear quota" }) })) : null, ownerless && shows("member.repair") ? (_jsxs(ConsoleForm, { intent: "repair", className: "ac-inline", children: [_jsx(Field, { label: "Subject to make owner", name: "subject", required: true, hint: "This organization has no owner. Name the subject of the person to make one." }), _jsx(Submit, { intent: "repair", children: "Add owner" })] })) : null, _jsx(Refused, { intent: "repair" })] })) : null] }));
+                            : shows("organization.disable") && (_jsx(ConsoleForm, { intent: "disable", children: _jsx(Submit, { intent: "disable", danger: true, children: "Disable organization" }) })) }), _jsx(Refused, { intent: "disable" }), _jsx(Refused, { intent: "enable" }), shows("organization.quota.set") ? (_jsxs(ConsoleForm, { intent: "quota-set", className: "ac-inline", "aria-label": "Quota", children: [_jsx(Field, { label: "Projects", name: "projects", type: "number", min: 0, defaultValue: o.quota?.projects, hint: "Empty for no limit" }), _jsx(Field, { label: "Services", name: "services", type: "number", min: 0, defaultValue: o.quota?.services }), _jsx(Field, { label: "Instances", name: "instances", type: "number", min: 0, defaultValue: o.quota?.instances }), _jsx(Submit, { intent: "quota-set", children: "Set quota" })] })) : null, _jsx(Refused, { intent: "quota-set" }), o.quota && shows("organization.quota.clear") ? (_jsx(ConsoleForm, { intent: "quota-clear", children: _jsx(Submit, { intent: "quota-clear", children: "Clear quota" }) })) : null, ownerless && shows("member.repair") ? (_jsxs(ConsoleForm, { intent: "repair", className: "ac-inline", children: [_jsx(Field, { label: "Subject to make owner", name: "subject", required: true, hint: "This organization has no owner. Name the subject of the person to make one." }), _jsx(Submit, { intent: "repair", children: "Add owner" })] })) : null, _jsx(Refused, { intent: "repair" })] })) : null, owner && (shows("organization.rename") || shows("organization.delete")) ? (_jsxs("details", { className: "ac-more", open: renameRefusal !== undefined || deleteRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Rename or delete" }), shows("organization.rename") ? (_jsxs(ConsoleForm, { intent: "rename", className: "ac-inline", children: [_jsx(Field, { label: "New name", name: "name", required: true, defaultValue: renameRefusal?.values.name ?? o.name }), _jsx(Submit, { intent: "rename", children: "Rename" })] })) : null, _jsx(Refused, { intent: "rename" }), shows("organization.delete") ? (_jsxs("div", { className: "ac-danger-zone", children: [_jsxs("p", { children: ["Deleting ", o.name, " is permanent, and its id can never be used again. It must have no projects."] }), _jsx(ConsoleForm, { intent: "delete", children: _jsx(Submit, { intent: "delete", danger: true, children: "Delete organization" }) }), _jsx(Refused, { intent: "delete" })] })) : null, _jsx(HostActions, { operation: "organization.delete", entity: o })] })) : null] }));
+    return (_jsxs(Page, { inspector: inspector, children: [_jsx("h1", { children: o.name }), _jsxs("dl", { className: "ac-card ac-facts", children: [_jsx("dt", { children: "Id" }), _jsx("dd", { children: o.id }), _jsx("dt", { children: "Your role" }), _jsx("dd", { children: o.role === "owner" ? "Owner" : o.role === "member" ? "Member" : "Administrator (not a member)" }), _jsx("dt", { children: "State" }), _jsx("dd", { children: o.disabled ? "Disabled: its services are suspended and every change is refused" : "Active" }), _jsx("dt", { children: "Holds" }), _jsxs("dd", { children: [o.usage.projects, " projects, ", o.usage.services, " services, ", o.usage.instances, " instances"] }), o.quota ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Quota" }), _jsxs("dd", { children: [limit(o.quota.projects, "projects"), ", ", limit(o.quota.services, "services"), ", ", limit(o.quota.instances, "instances")] })] })) : null] }), _jsxs("section", { className: "ac-card", children: [_jsx("h2", { children: "Projects" }), projects.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No projects yet. A project groups services and gives them a namespace of their own." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsxs("caption", { className: "ac-visually-hidden", children: ["Projects in ", o.name] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Name" }), _jsx("th", { scope: "col", children: "Id" }), _jsx("th", { scope: "col", className: "ac-num", children: "Services" }), _jsx("th", { scope: "col", children: "Registry" })] }) }), _jsx("tbody", { children: projects.map((p) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(ConsoleLink, { to: `projects/${encodeURIComponent(p.id)}`, children: p.name }) }), _jsx("td", { children: p.id }), _jsx("td", { className: "ac-num", children: p.services }), _jsx("td", { children: p.registry ? p.registry.server : "Public images only" })] }, p.id))) })] }) }))] }), _jsx(Panels, { kind: "organization", entity: o, loaded: panels })] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/project-new.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Creates a project in an organization, then goes to it, read by id. */
 import { redirect, useLoaderData } from "react-router";
-import { act, guard, pageData, text, useConsoleContext } from "../context.js";
+import { act, guard, organizationShell, pageData, text, useConsoleContext } from "../context.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, ConsoleForm, Field, Submit } from "../ui/console.js";
+import { ConsoleForm, Field, Submit } from "../ui/console.js";
+import { Page } from "../ui/shell.js";
 import { Refused, useRefusal } from "../ui/refused.js";
 export const meta = () => [{ title: "Create a project · ankka" }];
 export async function loader({ params, context }) {
     const ctx = useConsoleContext(context);
-    return guard(ctx, async () => ({ console: await pageData(ctx), organization: await ctx.client.getOrganization(params.organizationId) }));
+    return guard(ctx, async () => {
+        const [organization, projects, page] = await Promise.all([ctx.client.getOrganization(params.organizationId), ctx.client.listProjects(), pageData(ctx)]);
+        return { console: organizationShell(page, organization, projects, "projects", [{ label: "New project" }]), organization };
+    });
 }
 export async function action({ request, params, context }) {
     const ctx = useConsoleContext(context);
@@ -22,6 +26,6 @@ export async function action({ request, params, context }) {
 export default function NewProject() {
     const { organization: o } = useLoaderData();
     const refusal = useRefusal("create");
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [{ label: "Organizations", to: "" }, { label: o.name, to: `organizations/${encodeURIComponent(o.id)}` }, { label: "New project" }] }), _jsxs("h1", { children: ["Create a project in ", o.name] }), _jsx("p", { className: "ac-lede", children: "A project gets a namespace of its own; each of its services gets its own database." }), _jsxs(ConsoleForm, { intent: "create", className: "ac-form", children: [_jsx(Field, { label: "Id", name: "id", required: true, pattern: "[a-z]([\\-a-z0-9]{0,61}[a-z0-9])?", hint: "Lowercase letters, digits and hyphens, starting with a letter. Part of every exposed service's address, and never reusable once deleted.", defaultValue: refusal?.values.id, autoComplete: "off" }), _jsx(Field, { label: "Name", name: "name", required: true, defaultValue: refusal?.values.name }), _jsx(Refused, { intent: "create" }), _jsx("div", { children: _jsx(Submit, { intent: "create", children: "Create project" }) })] })] }));
+    return (_jsxs(Page, { children: [_jsxs("h1", { children: ["Create a project in ", o.name] }), _jsx("p", { className: "ac-lede", children: "A project gets a namespace of its own; each of its services gets its own database." }), _jsxs(ConsoleForm, { intent: "create", className: "ac-card ac-form", children: [_jsx(Field, { label: "Id", name: "id", required: true, pattern: "[a-z]([\\-a-z0-9]{0,61}[a-z0-9])?", hint: "Lowercase letters, digits and hyphens, starting with a letter. Part of every exposed service's address, and never reusable once deleted.", defaultValue: refusal?.values.id, autoComplete: "off" }), _jsx(Field, { label: "Name", name: "name", required: true, defaultValue: refusal?.values.name }), _jsx(Refused, { intent: "create" }), _jsx("div", { children: _jsx(Submit, { intent: "create", primary: true, children: "Create project" }) })] })] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/project.d.ts

@@ -1,5 +1,6 @@
 /**
- * A project: its services, kept current while the page is open, and its registry credential.
+ * A project: its services, kept current while the page is open, its registry credential, its
+ * project secrets — by name and entry, never a value — and the topics it declares on the broker.
  */
 import { type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from "react-router";
 import { ConsoleErrorBoundary } from "../ui/errors.tsx";
@@ -51,9 +52,79 @@ export declare function loader({ params, context }: LoaderFunctionArgs): Promise
         paused: boolean;
         hosting: string;
         protocol: string | undefined;
+        mounts: {
+            path: string;
+            service: string;
+            state: string;
+        }[];
+        callers: string[];
+        processPort: number | undefined;
+        broker: string | undefined;
+        undeclaredTopics: string[] | undefined;
+        topicChecks: {
+            topic: string | undefined;
+            service: string;
+            component: string;
+            direction: string;
+            stated: string | undefined;
+            state: string;
+        }[] | undefined;
+        topicSources: {
+            kind: string;
+            component: string;
+            topic: string;
+            group: string;
+            start: string;
+            version: number;
+            recordedVersion: number | undefined;
+            behind: boolean;
+            broker: string | undefined;
+            contract: string | undefined;
+            lag: number | undefined;
+            failing: string | undefined;
+        }[] | undefined;
+        objectStorage: string | undefined;
+        bucket: string | undefined;
+        bucketAddress: string | undefined;
+    }[];
+    secrets: {
+        name: string;
+        entries: string[];
+        setAt: string | undefined;
+        setBy: string | undefined;
+    }[];
+    topics: {
+        name: string;
+        partitions: number;
+        phase: string | undefined;
+        detail: string | undefined;
+        compacted: boolean;
+        contract: {
+            name: string;
+            fingerprint: string;
+        } | undefined;
+        checks: {
+            topic: string | undefined;
+            service: string;
+            component: string;
+            direction: string;
+            stated: string | undefined;
+            state: string;
+        }[];
+    }[];
+    brokers: {
+        name: string;
+        bootstrap: string;
+        shape: string;
+        secret: string;
+        declaredAt: string | undefined;
     }[];
     panels: import("../extensions/render.tsx").LoadedPanels;
 }>;
-export declare function action({ request, params, context }: ActionFunctionArgs): Promise<import("react-router").UNSAFE_DataWithResponseInit<import("../context.ts").ActionRefusal> | Response>;
+export declare function action({ request, params, context }: ActionFunctionArgs): Promise<import("react-router").UNSAFE_DataWithResponseInit<import("../context.ts").ActionRefusal> | import("react-router").UNSAFE_DataWithResponseInit<{
+    intent: "topic-schema";
+    topic: string;
+    schema: unknown;
+}> | Response>;
 export default function Project(): import("react").JSX.Element;
 export declare const ErrorBoundary: typeof ConsoleErrorBoundary;

package/dist/routes/project.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * A project: its services, kept current while the page is open, and its registry credential.
+ * A project: its services, kept current while the page is open, its registry credential, its
+ * project secrets — by name and entry, never a value — and the topics it declares on the broker.
  */
-import { redirect, useLoaderData } from "react-router";
-import { act, guard, pageData, text, useConsoleContext } from "../context.js";
+import { data, redirect, useActionData, useLoaderData } from "react-router";
+import { ControlPlaneError } from "../client/errors.js";
+import { act, guard, pageData, projectShell, text, useConsoleContext } from "../context.js";
 import { ConsoleErrorBoundary } from "../ui/errors.js";
-import { Breadcrumbs, ConsoleForm, ConsoleLink, Field, Submit, useConsole, when } from "../ui/console.js";
+import { ConsoleForm, ConsoleLink, Field, Submit, useConsole, when } from "../ui/console.js";
+import { Page, SectionTitle } from "../ui/shell.js";
 import { Refused, useRefusal } from "../ui/refused.js";
 import { Lifecycle } from "../ui/status.js";
 import { useProjectStream } from "../ui/use-stream.js";
@@ -15,9 +18,26 @@ export async function loader({ params, context }) {
     const ctx = useConsoleContext(context);
     const id = params.projectId;
     return guard(ctx, async () => {
-        const [project, services, page] = await Promise.all([ctx.client.getProject(id), ctx.client.listServices(id), pageData(ctx)]);
+        const [project, services, secrets, topics, brokers, page] = await Promise.all([
+            ctx.client.getProject(id),
+            ctx.client.listServices(id),
+            ctx.client.listProjectSecrets(id),
+            ctx.client.listTopics(id),
+            ctx.client.listBrokers(id),
+            pageData(ctx),
+        ]);
         const organization = await ctx.client.getOrganization(project.organizationId);
-        return { console: page, project, organization, services, panels: await loadPanels(ctx, "project", project) };
+        const primary = { label: "Apply a descriptor", to: `projects/${encodeURIComponent(id)}/services/apply`, operation: "service.apply" };
+        return {
+            console: projectShell(page, organization, project, services, [], primary),
+            project,
+            organization,
+            services,
+            secrets,
+            topics,
+            brokers,
+            panels: await loadPanels(ctx, "project", project),
+        };
     });
 }
 export async function action({ request, params, context }) {
@@ -43,19 +63,71 @@ export async function action({ request, params, context }) {
             case "registry-clear":
                 await ctx.client.clearRegistry(id);
                 return redirect(self);
+            case "secret-set":
+                // The value crosses once, to the control plane, and is never shown again by anything.
+                await ctx.client.setProjectSecret(id, text(form, "secretName"), { [text(form, "secretEntry")]: String(form.get("secretValue") ?? "") });
+                return redirect(self);
+            case "secret-unset":
+                await ctx.client.unsetProjectSecretEntry(id, text(form, "secretName"), text(form, "secretEntry"));
+                return redirect(self);
+            case "topic-set": {
+                // A contract is a name and a schema document, both or neither; the document is read here so
+                // that a file that is not JSON is refused beside the form rather than by the platform.
+                const contractName = text(form, "topicContract");
+                const schemaText = String(form.get("topicSchema") ?? "").trim();
+                let contract;
+                if (contractName || schemaText) {
+                    if (!contractName)
+                        throw new ControlPlaneError(400, "a contract is a name and a schema document: give the contract's name");
+                    if (!schemaText)
+                        throw new ControlPlaneError(400, "a contract is a name and a schema document: give the schema");
+                    let schema;
+                    try {
+                        schema = JSON.parse(schemaText);
+                    }
+                    catch (e) {
+                        throw new ControlPlaneError(400, `the schema is not valid JSON: ${e instanceof Error ? e.message : String(e)}`);
+                    }
+                    contract = { name: contractName, schema };
+                }
+                await ctx.client.declareTopic(id, text(form, "topicName"), {
+                    partitions: Number(text(form, "topicPartitions")),
+                    compacted: form.get("topicCompacted") === "on",
+                    contract,
+                });
+                return redirect(self);
+            }
+            case "topic-schema":
+                // The document a member builds against, shown beside the topic rather than sent anywhere.
+                return data({ intent, topic: text(form, "topicName"), schema: await ctx.client.topicSchema(id, text(form, "topicName")) });
+            case "topic-unset":
+                await ctx.client.removeTopic(id, text(form, "topicName"));
+                return redirect(self);
+            case "broker-set":
+                await ctx.client.declareBroker(id, text(form, "brokerName"), { bootstrap: text(form, "brokerBootstrap"), shape: text(form, "brokerShape"), secret: text(form, "brokerSecret") });
+                return redirect(self);
+            case "broker-unset":
+                await ctx.client.removeBroker(id, text(form, "brokerName"));
+                return redirect(self);
             default:
                 throw new Response(`unknown operation '${intent}'`, { status: 400 });
         }
     });
 }
 export default function Project() {
-    const { project: p, organization: o, services: initial, panels } = useLoaderData();
+    const { project: p, organization: o, services: initial, secrets, topics, brokers, panels } = useLoaderData();
     const { services, state } = useProjectStream(p.id, initial);
     const { shows } = useConsole();
     const renameRefusal = useRefusal("rename");
     const deleteRefusal = useRefusal("delete");
     const registryRefusal = useRefusal("registry-set");
+    const secretRefusal = useRefusal("secret-set");
+    const topicRefusal = useRefusal("topic-set");
+    const brokerRefusal = useRefusal("broker-set");
+    const shown = useActionData();
+    const shownSchema = shown && shown.intent === "topic-schema" && typeof shown.topic === "string" ? shown : undefined;
     const path = `projects/${encodeURIComponent(p.id)}`;
-    return (_jsxs("section", { className: "ac-page", children: [_jsx(Breadcrumbs, { trail: [{ label: "Organizations", to: "" }, { label: o.name, to: `organizations/${encodeURIComponent(o.id)}` }, { label: p.name }] }), _jsx("h1", { children: p.name }), _jsxs("dl", { className: "ac-facts", children: [_jsx("dt", { children: "Id" }), _jsx("dd", { children: p.id }), _jsx("dt", { children: "Organization" }), _jsx("dd", { children: o.name })] }), _jsx("h2", { id: "services", children: "Services" }), state === "live" ? _jsx("p", { className: "ac-live", children: "Updating as the platform reports" }) : null, services.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No services yet. Apply a descriptor to deploy one." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "aria-describedby": "services", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Service" }), _jsx("th", { scope: "col", children: "State" }), _jsx("th", { scope: "col", className: "ac-num", children: "Instances" }), _jsx("th", { scope: "col", children: "Image" }), _jsx("th", { scope: "col", className: "ac-num", children: "Generation" }), _jsx("th", { scope: "col", children: "Address" })] }) }), _jsx("tbody", { children: services.map((s) => (_jsxs("tr", { "data-service": s.name, children: [_jsx("td", { children: _jsx(ConsoleLink, { to: `${path}/services/${encodeURIComponent(s.name)}`, children: s.name }) }), _jsx("td", { children: _jsx(Lifecycle, { lifecycle: s.lifecycle, confirmed: s.confirmed }) }), _jsxs("td", { className: "ac-num", children: [s.readyInstances, " of ", s.desiredInstances] }), _jsx("td", { children: s.image }), _jsx("td", { className: "ac-num", children: s.generation }), _jsx("td", { children: s.hostname ? _jsx("a", { href: s.hostname, children: s.hostname.replace(/^https:\/\//, "") }) : s.exposed ? "Exposed, no address yet" : "Not exposed" })] }, s.name))) })] }) })), _jsxs("div", { className: "ac-actions", children: [shows("service.apply") ? (_jsx(ConsoleLink, { to: `${path}/services/apply`, className: "ac-button", children: "Apply a descriptor" })) : null, _jsx(HostActions, { operation: "service.apply", entity: p })] }), _jsx("h2", { children: "Registry" }), p.registry ? (_jsxs("p", { children: ["Private images are pulled from ", _jsx("strong", { children: p.registry.server }), " as ", _jsx("strong", { children: p.registry.username }), ", set ", when(p.registry.setAt), p.registry.setBy ? ` by ${p.registry.setBy}` : "", "."] })) : (_jsx("p", { children: "Services in this project pull only public images. Set a credential to pull private ones." })), shows("registry.set") ? (_jsxs("details", { className: "ac-more", open: registryRefusal !== undefined || undefined, children: [_jsx("summary", { children: p.registry ? "Replace the registry credential" : "Set a registry credential" }), _jsxs(ConsoleForm, { intent: "registry-set", className: "ac-form", children: [_jsx(Field, { label: "Registry server", name: "server", required: true, placeholder: "ghcr.io", defaultValue: registryRefusal?.values.server ?? p.registry?.server }), _jsx(Field, { label: "Username", name: "username", required: true, autoComplete: "off", defaultValue: registryRefusal?.values.username ?? p.registry?.username }), _jsx(Field, { label: "Password or token", name: "password", type: "password", required: true, autoComplete: "new-password", hint: "Sent once to the platform, which keeps it only in the cluster. It is never shown again." }), _jsx(Refused, { intent: "registry-set" }), _jsx("div", { children: _jsx(Submit, { intent: "registry-set", children: "Save credential" }) })] })] })) : null, p.registry && shows("registry.clear") ? (_jsxs(ConsoleForm, { intent: "registry-clear", children: [_jsx(Submit, { intent: "registry-clear", children: "Clear credential" }), _jsx(Refused, { intent: "registry-clear" })] })) : null, _jsx(Panels, { kind: "project", entity: p, loaded: panels }), shows("project.rename") || shows("project.delete") ? (_jsxs("details", { className: "ac-more", open: renameRefusal !== undefined || deleteRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Rename or delete" }), shows("project.rename") ? (_jsxs(ConsoleForm, { intent: "rename", className: "ac-inline", children: [_jsx(Field, { label: "New name", name: "name", required: true, defaultValue: renameRefusal?.values.name ?? p.name }), _jsx(Submit, { intent: "rename", children: "Rename" })] })) : null, _jsx(Refused, { intent: "rename" }), shows("project.delete") ? (_jsxs("div", { className: "ac-danger-zone", children: [_jsxs("p", { children: ["Deleting ", p.name, " is permanent, and its id can never be used again. It must have no services."] }), _jsx(ConsoleForm, { intent: "delete", children: _jsx(Submit, { intent: "delete", danger: true, children: "Delete project" }) }), _jsx(Refused, { intent: "delete" })] })) : null] })) : null] }));
+    const inspector = (_jsxs(_Fragment, { children: [_jsx("div", { className: "ac-ops", children: _jsx(HostActions, { operation: "service.apply", entity: p }) }), _jsxs("section", { className: "ac-form", "aria-labelledby": "registry-title", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "registry-title", children: "Registry" }) }), shows("registry.set") ? (_jsxs("details", { className: "ac-more", open: registryRefusal !== undefined || undefined, children: [_jsx("summary", { children: p.registry ? "Replace the registry credential" : "Set a registry credential" }), _jsxs(ConsoleForm, { intent: "registry-set", className: "ac-form", children: [_jsx(Field, { label: "Registry server", name: "server", required: true, placeholder: "ghcr.io", defaultValue: registryRefusal?.values.server ?? p.registry?.server }), _jsx(Field, { label: "Username", name: "username", required: true, autoComplete: "off", defaultValue: registryRefusal?.values.username ?? p.registry?.username }), _jsx(Field, { label: "Password or token", name: "password", type: "password", required: true, autoComplete: "new-password", hint: "Sent once to the platform, which keeps it only in the cluster. It is never shown again." }), _jsx(Refused, { intent: "registry-set" }), _jsx("div", { children: _jsx(Submit, { intent: "registry-set", children: "Save credential" }) })] })] })) : null, p.registry && shows("registry.clear") ? (_jsxs(ConsoleForm, { intent: "registry-clear", children: [_jsx(Submit, { intent: "registry-clear", children: "Clear credential" }), _jsx(Refused, { intent: "registry-clear" })] })) : null] }), shows("project-secret.set") ? (_jsxs("section", { className: "ac-form", "aria-labelledby": "secret-set-title", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "secret-set-title", children: "Project secrets" }) }), _jsxs("details", { className: "ac-more", open: secretRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Set a project secret entry" }), _jsxs(ConsoleForm, { intent: "secret-set", className: "ac-form", children: [_jsx(Field, { label: "Project secret", name: "secretName", required: true, placeholder: "checkout", defaultValue: secretRefusal?.values.secretName }), _jsx(Field, { label: "Entry", name: "secretEntry", required: true, placeholder: "STRIPE_KEY", autoComplete: "off", defaultValue: secretRefusal?.values.secretEntry }), _jsx(Field, { label: "Value", name: "secretValue", type: "password", required: true, autoComplete: "new-password", hint: "Sent once to the platform, which keeps it only in the cluster. It is never shown again." }), _jsx(Refused, { intent: "secret-set" }), _jsx("div", { children: _jsx(Submit, { intent: "secret-set", children: "Save entry" }) })] })] })] })) : null, shows("project-topic.set") ? (_jsxs("section", { className: "ac-form", "aria-labelledby": "topic-set-title", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "topic-set-title", children: "Topics" }) }), _jsxs("details", { className: "ac-more", open: topicRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Declare a topic" }), _jsxs(ConsoleForm, { intent: "topic-set", className: "ac-form", children: [_jsx(Field, { label: "Topic", name: "topicName", required: true, placeholder: "transactions", defaultValue: topicRefusal?.values.topicName }), _jsx(Field, { label: "Partitions", name: "topicPartitions", type: "number", required: true, defaultValue: topicRefusal?.values.topicPartitions ?? "3", hint: "A topic can be given more partitions later, never fewer." }), _jsxs("div", { className: "ac-field", children: [_jsxs("label", { htmlFor: "topicCompacted", children: [_jsx("input", { id: "topicCompacted", name: "topicCompacted", type: "checkbox", defaultChecked: topicRefusal?.values.topicCompacted === "on" }), " Compacted"] }), _jsx("p", { className: "ac-hint", id: "topicCompacted-hint", children: "The broker keeps the last message under each key, as a graph's delta topic needs." })] }), _jsx(Field, { label: "Contract", name: "topicContract", placeholder: "order.v1", autoComplete: "off", defaultValue: topicRefusal?.values.topicContract, hint: "What the topic carries, which every side must state. Optional, with its schema." }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "topicSchema", children: "Schema" }), _jsx("textarea", { id: "topicSchema", name: "topicSchema", spellCheck: false, placeholder: '{"type": "object"}', defaultValue: topicRefusal?.values.topicSchema, "aria-describedby": "topicSchema-hint" }), _jsx("p", { className: "ac-hint", id: "topicSchema-hint", children: "The contract's JSON Schema document, held by the project for members to build against." })] }), _jsx(Refused, { intent: "topic-set" }), _jsx("div", { children: _jsx(Submit, { intent: "topic-set", children: "Declare topic" }) })] })] })] })) : null, shows("project-broker.set") ? (_jsxs("section", { className: "ac-form", "aria-labelledby": "broker-set-title", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "broker-set-title", children: "Brokers" }) }), _jsxs("details", { className: "ac-more", open: brokerRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Declare a broker" }), _jsxs(ConsoleForm, { intent: "broker-set", className: "ac-form", children: [_jsx(Field, { label: "Broker", name: "brokerName", required: true, placeholder: "legacy", defaultValue: brokerRefusal?.values.brokerName, hint: "The name a component gives for a topic that lives there." }), _jsx(Field, { label: "Bootstrap", name: "brokerBootstrap", required: true, placeholder: "kafka.legacy:9094", autoComplete: "off", defaultValue: brokerRefusal?.values.brokerBootstrap, hint: "host:port, several separated by commas." }), _jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "brokerShape", children: "Shape" }), _jsxs("select", { id: "brokerShape", name: "brokerShape", defaultValue: brokerRefusal?.values.brokerShape ?? "sasl", "aria-describedby": "brokerShape-hint", children: [_jsx("option", { value: "sasl", children: "sasl" }), _jsx("option", { value: "certificate", children: "certificate" })] }), _jsx("p", { className: "ac-hint", id: "brokerShape-hint", children: "sasl: the secret holds ca.crt, username and password. certificate: ca.crt, tls.crt and tls.key. Both over TLS." })] }), _jsx(Field, { label: "Credential secret", name: "brokerSecret", required: true, placeholder: "legacy-credential", autoComplete: "off", list: "broker-secrets", defaultValue: brokerRefusal?.values.brokerSecret, hint: "The project secret holding the credential, mounted for the platform's program alone." }), _jsx("datalist", { id: "broker-secrets", children: secrets.map((s) => (_jsx("option", { value: s.name }, s.name))) }), _jsx(Refused, { intent: "broker-set" }), _jsx("div", { children: _jsx(Submit, { intent: "broker-set", children: "Declare broker" }) })] })] })] })) : null, shows("project.rename") || shows("project.delete") ? (_jsxs("details", { className: "ac-more", open: renameRefusal !== undefined || deleteRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Rename or delete" }), shows("project.rename") ? (_jsxs(ConsoleForm, { intent: "rename", className: "ac-inline", children: [_jsx(Field, { label: "New name", name: "name", required: true, defaultValue: renameRefusal?.values.name ?? p.name }), _jsx(Submit, { intent: "rename", children: "Rename" })] })) : null, _jsx(Refused, { intent: "rename" }), shows("project.delete") ? (_jsxs("div", { className: "ac-danger-zone", children: [_jsxs("p", { children: ["Deleting ", p.name, " is permanent, and its id can never be used again. It must have no services."] }), _jsx(ConsoleForm, { intent: "delete", children: _jsx(Submit, { intent: "delete", danger: true, children: "Delete project" }) }), _jsx(Refused, { intent: "delete" })] })) : null] })) : null] }));
+    return (_jsxs(Page, { inspector: inspector, children: [_jsx("h1", { children: p.name }), _jsxs("dl", { className: "ac-card ac-facts", children: [_jsx("dt", { children: "Id" }), _jsx("dd", { children: p.id }), _jsx("dt", { children: "Organization" }), _jsx("dd", { children: o.name }), _jsx("dt", { children: "Registry" }), _jsx("dd", { children: p.registry ? (_jsxs(_Fragment, { children: ["Private images are pulled from ", _jsx("strong", { children: p.registry.server }), " as ", _jsx("strong", { children: p.registry.username }), ", set ", when(p.registry.setAt), p.registry.setBy ? ` by ${p.registry.setBy}` : "", "."] })) : ("Services in this project pull only public images. Set a credential to pull private ones.") })] }), _jsxs("section", { className: "ac-card", "aria-labelledby": "services", children: [_jsx("h2", { id: "services", children: "Services" }), state === "live" ? _jsx("p", { className: "ac-live", children: "Updating as the platform reports" }) : null, services.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No services yet. Apply a descriptor to deploy one." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "aria-describedby": "services", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Service" }), _jsx("th", { scope: "col", children: "State" }), _jsx("th", { scope: "col", className: "ac-num", children: "Instances" }), _jsx("th", { scope: "col", children: "Image" }), _jsx("th", { scope: "col", className: "ac-num", children: "Generation" }), _jsx("th", { scope: "col", children: "Address" })] }) }), _jsx("tbody", { children: services.map((s) => (_jsxs("tr", { "data-service": s.name, children: [_jsx("td", { children: _jsx(ConsoleLink, { to: `${path}/services/${encodeURIComponent(s.name)}`, children: s.name }) }), _jsx("td", { children: _jsx(Lifecycle, { lifecycle: s.lifecycle, confirmed: s.confirmed }) }), _jsxs("td", { className: "ac-num", children: [s.readyInstances, " of ", s.desiredInstances] }), _jsx("td", { children: s.image }), _jsx("td", { className: "ac-num", children: s.generation }), _jsx("td", { children: s.hostname ? _jsx("a", { href: s.hostname, children: s.hostname.replace(/^https:\/\//, "") }) : s.exposed ? "Exposed, no address yet" : "Not exposed" })] }, s.name))) })] }) }))] }), _jsxs("section", { className: "ac-card", "aria-labelledby": "secrets", children: [_jsx("h2", { id: "secrets", children: "Project secrets" }), secrets.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No project secrets. A descriptor's variable can take an entry of one by secretKeyRef." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "aria-describedby": "secrets", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Secret" }), _jsx("th", { scope: "col", children: "Entry" }), _jsx("th", { scope: "col", children: "Set" }), _jsx("th", { scope: "col", children: _jsx("span", { className: "ac-visually-hidden", children: "Actions" }) })] }) }), _jsx("tbody", { children: secrets.flatMap((s) => s.entries.map((entry) => (_jsxs("tr", { "data-secret": s.name, "data-entry": entry, children: [_jsx("td", { children: s.name }), _jsx("td", { children: entry }), _jsxs("td", { children: [when(s.setAt), s.setBy ? ` by ${s.setBy}` : ""] }), _jsx("td", { children: shows("project-secret.unset") ? (_jsxs(ConsoleForm, { intent: "secret-unset", className: "ac-inline", children: [_jsx("input", { type: "hidden", name: "secretName", value: s.name }), _jsx("input", { type: "hidden", name: "secretEntry", value: entry }), _jsx(Submit, { intent: "secret-unset", children: `Remove ${entry}` })] })) : null })] }, `${s.name}/${entry}`)))) })] }) })), _jsx(Refused, { intent: "secret-unset" })] }), _jsxs("section", { className: "ac-card", "aria-labelledby": "topics", children: [_jsx("h2", { id: "topics", children: "Topics" }), topics.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No topics declared. Every service of the project uses a declared topic by its name." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "aria-describedby": "topics", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Topic" }), _jsx("th", { scope: "col", className: "ac-num", children: "Partitions" }), _jsx("th", { scope: "col", children: "Compacted" }), _jsx("th", { scope: "col", children: "Contract" }), _jsx("th", { scope: "col", children: "Broker" }), _jsx("th", { scope: "col", children: "Checks" }), _jsx("th", { scope: "col", children: _jsx("span", { className: "ac-visually-hidden", children: "Actions" }) })] }) }), _jsx("tbody", { children: topics.map((t) => (_jsxs("tr", { "data-topic": t.name, children: [_jsx("td", { children: _jsx("code", { children: t.name }) }), _jsx("td", { className: "ac-num", children: t.partitions }), _jsx("td", { "data-compacted": t.compacted ? "yes" : "no", children: t.compacted ? "yes" : "no" }), _jsx("td", { children: t.contract ? (_jsxs(_Fragment, { children: [_jsx("code", { children: t.contract.name }), " ", _jsx("span", { className: "ac-hint", children: t.contract.fingerprint.slice(0, 15) })] })) : ("none") }), _jsxs("td", { children: [t.phase ?? "Nothing reported yet", t.detail ? ` — ${t.detail}` : ""] }), _jsx("td", { children: t.checks.length === 0 ? (t.contract ? "no side seen yet" : "—") : (_jsx("ul", { className: "ac-topics", children: t.checks.map((c) => (_jsxs("li", { "data-check": c.state, children: [c.service, " ", c.direction, ": ", c.state, c.state === "mismatch" ? ` (${c.stated ?? "none"})` : ""] }, `${c.service}/${c.component}/${c.direction}`))) })) }), _jsxs("td", { children: [t.contract ? (_jsxs(ConsoleForm, { intent: "topic-schema", className: "ac-inline", children: [_jsx("input", { type: "hidden", name: "topicName", value: t.name }), _jsx(Submit, { intent: "topic-schema", children: `Show schema of ${t.name}` })] })) : null, shows("project-topic.unset") ? (_jsxs(ConsoleForm, { intent: "topic-unset", className: "ac-inline", children: [_jsx("input", { type: "hidden", name: "topicName", value: t.name }), _jsx(Submit, { intent: "topic-unset", children: `Stop declaring ${t.name}` })] })) : null] })] }, t.name))) })] }) })), shownSchema ? (_jsxs("div", { className: "ac-card", "data-schema": shownSchema.topic, children: [_jsxs("h3", { children: ["Schema of ", _jsx("code", { children: shownSchema.topic })] }), _jsx("pre", { children: JSON.stringify(shownSchema.schema, null, 2) })] })) : null, _jsx(Refused, { intent: "topic-unset" }), _jsx(Refused, { intent: "topic-schema" })] }), _jsxs("section", { className: "ac-card", "aria-labelledby": "brokers", children: [_jsx("h2", { id: "brokers", children: "Brokers" }), brokers.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No brokers declared beside the installation's. A component may name one for a topic that lives elsewhere." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "aria-describedby": "brokers", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Broker" }), _jsx("th", { scope: "col", children: "Bootstrap" }), _jsx("th", { scope: "col", children: "Shape" }), _jsx("th", { scope: "col", children: "Secret" }), _jsx("th", { scope: "col", children: "Declared" }), _jsx("th", { scope: "col", children: _jsx("span", { className: "ac-visually-hidden", children: "Actions" }) })] }) }), _jsx("tbody", { children: brokers.map((b) => (_jsxs("tr", { "data-broker": b.name, children: [_jsx("td", { children: _jsx("code", { children: b.name }) }), _jsx("td", { children: b.bootstrap }), _jsx("td", { children: b.shape }), _jsx("td", { children: b.secret }), _jsx("td", { children: b.declaredAt ? when(b.declaredAt) : "—" }), _jsx("td", { children: shows("project-broker.unset") ? (_jsxs(ConsoleForm, { intent: "broker-unset", className: "ac-inline", children: [_jsx("input", { type: "hidden", name: "brokerName", value: b.name }), _jsx(Submit, { intent: "broker-unset", children: `Stop declaring ${b.name}` })] })) : null })] }, b.name))) })] }) })), _jsx(Refused, { intent: "broker-unset" })] }), _jsx(Panels, { kind: "project", entity: p, loaded: panels })] }));
 }
 export const ErrorBoundary = ConsoleErrorBoundary;

package/dist/routes/service-apply.d.ts

@@ -1,6 +1,7 @@
 /**
- * Applies a descriptor: pasted, or read from a file. The console checks only that the text is JSON
- * and names a service; every rule about what a descriptor may say is the control plane's, and its
+ * Applies a descriptor: pasted, read from a file, or started from the one a service applied at an
+ * earlier generation (`?name=cart&generation=1`). The console checks only that the text is JSON and
+ * names a service; every rule about what a descriptor may say is the control plane's, and its
  * refusal is shown problem by problem beside the text.
  */
 import { type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from "react-router";
@@ -38,6 +39,8 @@ export declare function loader({ request, params, context }: LoaderFunctionArgs)
         };
     };
     name: string | null;
+    generation: string | null;
+    from: string | undefined;
 }>;
 export declare function action({ request, params, context }: ActionFunctionArgs): Promise<import("react-router").UNSAFE_DataWithResponseInit<ActionRefusal> | Response>;
 export default function ApplyDescriptor(): import("react").JSX.Element;