ankka-console 0.10.0 → 0.12.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/machines.d.ts

@@ -0,0 +1,78 @@
+/**
+ * An organization's machines (feature 040): programs outside the installation that hold a grant —
+ * an affiliate network reading a topic, say — each with a client id and a secret it trades for a
+ * token. A new machine's secret is shown exactly once, as a deploy token's is: the registration
+ * redirects (so a reload can never register twice), carrying the secret across in a sealed cookie
+ * that this page reads and clears on its next render.
+ */
+import { type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from "react-router";
+import { ConsoleErrorBoundary } from "../ui/errors.tsx";
+export declare const meta: MetaFunction;
+export declare function loader({ request, params, context }: LoaderFunctionArgs): Promise<{
+    console: import("../context.ts").ConsolePageData;
+    organization: {
+        id: string;
+        name: string;
+        projects: number;
+        disabled: boolean;
+        role: NonNullable<"member" | "owner"> | undefined;
+        quota: {
+            projects: number | undefined;
+            services: number | undefined;
+            instances: number | undefined;
+        } | undefined;
+        usage: {
+            projects: number;
+            services: number;
+            instances: number;
+        };
+    };
+    machines: {
+        name: string;
+        clientId: string;
+        registeredBy: string | undefined;
+        registeredAt: string | undefined;
+        byteRates: {
+            produceBytesPerSecond: number;
+            consumeBytesPerSecond: number;
+            requestPercentage: number;
+        } | undefined;
+    }[];
+    grants: {
+        id: string;
+        grantingProject: string;
+        grantingOrganization: string;
+        grantee: string;
+        target: {
+            kind: string;
+            service: string | undefined;
+            method: string | undefined;
+            path: string | undefined;
+            topic: string | undefined;
+            right: string | undefined;
+            decrypt: boolean;
+        };
+        state: string;
+        changes: {
+            change: string;
+            by: string | undefined;
+            at: string | undefined;
+        }[];
+        topic: {
+            partitions: number;
+            compacted: boolean;
+            retention: string | undefined;
+            copies: number | undefined;
+        } | undefined;
+    }[];
+    registered: {
+        name: string;
+        clientId: string;
+        clientSecret: string;
+        tokenUrl: string;
+        brokerBootstrap: string | undefined;
+    } | null;
+}>;
+export declare function action({ request, params, context }: ActionFunctionArgs): Promise<import("react-router").UNSAFE_DataWithResponseInit<import("../context.ts").ActionRefusal> | Response>;
+export default function Machines(): import("react").JSX.Element;
+export declare const ErrorBoundary: typeof ConsoleErrorBoundary;

package/dist/routes/machines.js

@@ -0,0 +1,78 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * An organization's machines (feature 040): programs outside the installation that hold a grant —
+ * an affiliate network reading a topic, say — each with a client id and a secret it trades for a
+ * token. A new machine's secret is shown exactly once, as a deploy token's is: the registration
+ * redirects (so a reload can never register twice), carrying the secret across in a sealed cookie
+ * that this page reads and clears on its next render.
+ */
+import { redirect, useLoaderData } from "react-router";
+import { act, guard, organizationShell, pageData, text, useConsoleContext } from "../context.js";
+import { targetText } from "../ui/grants.js";
+import { ConsoleErrorBoundary } from "../ui/errors.js";
+import { ConsoleForm, Field, Submit, useConsole, when } from "../ui/console.js";
+import { Page, SectionTitle } from "../ui/shell.js";
+import { Refused, useRefusal } from "../ui/refused.js";
+import { HostActions } from "../extensions/render.js";
+export const meta = () => [{ title: "Machines · ankka" }];
+export async function loader({ request, params, context }) {
+    const ctx = useConsoleContext(context);
+    const id = params.organizationId;
+    return guard(ctx, async () => {
+        const [organization, machines, grants, projects, page] = await Promise.all([
+            ctx.client.getOrganization(id),
+            ctx.client.machines(id),
+            ctx.client.organizationGrants(id),
+            ctx.client.listProjects(),
+            pageData(ctx),
+        ]);
+        const registered = await ctx.runtime.machineFlash.take(request, ctx.headers);
+        // Shown from the one-time cookie alone: the listing is a projection and may not show the new machine yet.
+        return {
+            console: organizationShell(page, organization, projects, "machines", [{ label: "Machines" }]),
+            organization,
+            machines,
+            grants,
+            registered,
+        };
+    });
+}
+export async function action({ request, params, context }) {
+    const ctx = useConsoleContext(context);
+    const id = params.organizationId;
+    const form = await request.formData();
+    const intent = text(form, "intent");
+    const self = ctx.href(`organizations/${encodeURIComponent(id)}/machines`);
+    return act(ctx, intent, form, async () => {
+        if (intent === "register") {
+            const registered = await ctx.client.registerMachine(id, text(form, "machineName"));
+            await ctx.runtime.machineFlash.write(registered, ctx.headers);
+            return redirect(self);
+        }
+        if (intent === "delete") {
+            await ctx.client.deleteMachine(id, text(form, "machineName"));
+            return redirect(self);
+        }
+        if (intent === "byte-rates") {
+            await ctx.client.setMachineByteRates(id, text(form, "rateMachine"), {
+                produceBytesPerSecond: Number(text(form, "produceBytesPerSecond")),
+                consumeBytesPerSecond: Number(text(form, "consumeBytesPerSecond")),
+                requestPercentage: Number(text(form, "requestPercentage")),
+            });
+            return redirect(self);
+        }
+        throw new Response(`unknown operation '${intent}'`, { status: 400 });
+    });
+}
+export default function Machines() {
+    const { organization: o, machines, grants, registered } = useLoaderData();
+    const { shows, shell } = useConsole();
+    const manages = shell.organization?.manages ?? false;
+    const registerRefusal = useRefusal("register");
+    const ratesRefusal = useRefusal("byte-rates");
+    const inspector = manages ? (_jsxs(_Fragment, { children: [shows("machine.register") ? (_jsxs("section", { "aria-labelledby": "register-machine", className: "ac-form", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "register-machine", children: "Register a machine" }) }), _jsxs(ConsoleForm, { intent: "register", className: "ac-inline", children: [_jsx(Field, { label: "Machine name", name: "machineName", required: true, placeholder: "affiliate-network", hint: "Lowercase letters, digits and '-'. A grant names it as machine:<organization>/<name>.", defaultValue: registerRefusal?.values.machineName, autoComplete: "off" }), _jsx(Submit, { intent: "register", primary: true, children: "Register machine" })] }), _jsx(Refused, { intent: "register" }), _jsx("div", { className: "ac-ops", children: _jsx(HostActions, { operation: "machine.register", entity: o }) })] })) : null, shows("machine.byte-rates") && machines.length > 0 ? (_jsxs("section", { "aria-labelledby": "byte-rates-title", className: "ac-form", children: [_jsx(SectionTitle, { children: _jsx("span", { id: "byte-rates-title", children: "Byte rates" }) }), _jsxs("details", { className: "ac-more", open: ratesRefusal !== undefined || undefined, children: [_jsx("summary", { children: "Limit a machine on the broker" }), _jsxs(ConsoleForm, { intent: "byte-rates", className: "ac-form", children: [_jsxs("div", { className: "ac-field", children: [_jsx("label", { htmlFor: "rateMachine", children: "Machine" }), _jsx("select", { id: "rateMachine", name: "rateMachine", defaultValue: ratesRefusal?.values.rateMachine ?? machines[0]?.name, children: machines.map((m) => (_jsx("option", { value: m.name, children: m.name }, m.name))) })] }), _jsx(Field, { label: "Produce bytes a second", name: "produceBytesPerSecond", type: "number", required: true, min: 1, defaultValue: ratesRefusal?.values.produceBytesPerSecond }), _jsx(Field, { label: "Consume bytes a second", name: "consumeBytesPerSecond", type: "number", required: true, min: 1, defaultValue: ratesRefusal?.values.consumeBytesPerSecond }), _jsx(Field, { label: "Request percentage", name: "requestPercentage", type: "number", required: true, min: 1, max: 100, hint: "The share of a broker thread's time its requests may take, 1 to 100.", defaultValue: ratesRefusal?.values.requestPercentage }), _jsx(Refused, { intent: "byte-rates" }), _jsx("div", { children: _jsx(Submit, { intent: "byte-rates", children: "Set byte rates" }) })] })] })] })) : null] })) : null;
+    return (_jsxs(Page, { inspector: inspector, children: [_jsxs("h1", { children: ["Machines of ", o.name] }), _jsx("p", { className: "ac-lede", children: "A machine is a program outside the installation that another project can grant a route, a method or a topic. It signs in with its client id and secret; owners register, limit and delete machines, and every member can see them." }), registered ? (_jsxs("div", { className: "ac-notice", role: "status", children: [_jsxs("p", { children: [_jsxs("strong", { children: ["Copy the client secret for ", registered.name, " now."] }), " It is shown this once and cannot be retrieved later."] }), _jsxs("dl", { className: "ac-facts", children: [_jsx("dt", { children: "Client id" }), _jsx("dd", { children: _jsx("code", { children: registered.clientId }) }), _jsx("dt", { children: "Token address" }), _jsx("dd", { children: _jsx("code", { children: registered.tokenUrl }) }), registered.brokerBootstrap ? (_jsxs(_Fragment, { children: [_jsx("dt", { children: "Broker" }), _jsx("dd", { children: _jsx("code", { children: registered.brokerBootstrap }) })] })) : null] }), _jsx("code", { className: "ac-secret", "data-secret": true, children: registered.clientSecret })] })) : null, _jsxs("section", { className: "ac-card", "aria-label": "Machines", children: [machines.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No machines registered." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", children: [_jsx("caption", { className: "ac-visually-hidden", children: "Machines" }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Name" }), _jsx("th", { scope: "col", children: "Client id" }), _jsx("th", { scope: "col", children: "Registered" }), _jsx("th", { scope: "col", children: "Byte rates" }), _jsx("th", { scope: "col", children: _jsx("span", { className: "ac-visually-hidden", children: "Actions" }) })] }) }), _jsx("tbody", { children: machines.map((m) => (_jsxs("tr", { "data-machine": m.name, children: [_jsx("td", { children: m.name }), _jsx("td", { children: _jsx("code", { children: m.clientId }) }), _jsxs("td", { children: [m.registeredAt ? when(m.registeredAt) : "—", m.registeredBy ? ` by ${m.registeredBy}` : ""] }), _jsx("td", { "data-byte-rates": true, children: m.byteRates
+                                                    ? `produce ${m.byteRates.produceBytesPerSecond} B/s, consume ${m.byteRates.consumeBytesPerSecond} B/s, ${m.byteRates.requestPercentage}% of requests`
+                                                    : "The installation's default" }), _jsx("td", { children: manages && shows("machine.delete") ? (_jsxs(ConsoleForm, { intent: "delete", children: [_jsx("input", { type: "hidden", name: "machineName", value: m.name }), _jsx(Submit, { intent: "delete", className: "ac-button ac-button-small ac-button-danger", label: `Delete ${m.name}`, children: "Delete" })] })) : null })] }, m.name))) })] }) })), _jsx(Refused, { intent: "delete" })] }), _jsxs("section", { className: "ac-card", "aria-labelledby": "held", children: [_jsx("h2", { id: "held", children: "Grants held" }), grants.length === 0 ? (_jsx("p", { className: "ac-empty", children: "Nothing is granted to this organization's machines or services by another project." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "aria-describedby": "held", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "From" }), _jsx("th", { scope: "col", children: "Grantee" }), _jsx("th", { scope: "col", children: "Target" }), _jsx("th", { scope: "col", children: "State" })] }) }), _jsx("tbody", { children: grants.map((g) => (_jsxs("tr", { "data-held": g.id, children: [_jsxs("td", { children: [g.grantingProject, " ", _jsxs("span", { className: "ac-hint", children: ["of ", g.grantingOrganization] })] }), _jsx("td", { children: _jsx("code", { children: g.grantee }) }), _jsx("td", { children: targetText(g.target) }), _jsx("td", { children: g.state })] }, g.id))) })] }) }))] })] }));
+}
+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.d.ts

@@ -1,5 +1,6 @@
 /**
- * An organization: its projects, and what its owners and the platform administrator may do to it.
+ * An organization: its projects, the grants other organizations' projects offer it (feature 040), and
+ * what its owners and the platform administrator may do to it.
  */
 import { type ActionFunctionArgs, type LoaderFunctionArgs, type MetaFunction } from "react-router";
 import { ConsoleErrorBoundary } from "../ui/errors.tsx";
@@ -35,6 +36,33 @@ export declare function loader({ params, context }: LoaderFunctionArgs): Promise
             setBy: string | undefined;
         } | undefined;
     }[];
+    offered: {
+        id: string;
+        grantingProject: string;
+        grantingOrganization: string;
+        grantee: string;
+        target: {
+            kind: string;
+            service: string | undefined;
+            method: string | undefined;
+            path: string | undefined;
+            topic: string | undefined;
+            right: string | undefined;
+            decrypt: boolean;
+        };
+        state: string;
+        changes: {
+            change: string;
+            by: string | undefined;
+            at: string | undefined;
+        }[];
+        topic: {
+            partitions: number;
+            compacted: boolean;
+            retention: string | undefined;
+            copies: number | undefined;
+        } | undefined;
+    }[];
     ownerless: boolean;
     panels: import("../extensions/render.tsx").LoadedPanels;
 }>;

package/dist/routes/organization.js

@@ -1,25 +1,39 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * An organization: its projects, and what its owners and the platform administrator may do to it.
+ * An organization: its projects, the grants other organizations' projects offer it (feature 040), 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, when } 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";
+import { targetText } from "../ui/grants.js";
 export const meta = ({ loaderData }) => [{ title: `${loaderData?.organization.name ?? "Organization"} · ankka` }];
 export async function loader({ params, context }) {
     const ctx = useConsoleContext(context);
     const id = params.organizationId;
     return guard(ctx, async () => {
-        const [organization, projects, page] = await Promise.all([ctx.client.getOrganization(id), ctx.client.listProjects(), pageData(ctx)]);
+        const [organization, projects, offered, page] = await Promise.all([
+            ctx.client.getOrganization(id),
+            ctx.client.listProjects(),
+            ctx.client.organizationGrants(id),
+            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,
+            offered,
             ownerless,
             panels: await loadPanels(ctx, "organization", organization),
         };
@@ -60,14 +74,25 @@ export async function action({ request, params, context }) {
             case "repair":
                 await ctx.client.repair(id, text(form, "subject"), "owner");
                 return redirect(self);
+            case "grant-accept":
+                await ctx.client.answerGrant(id, text(form, "grantId"), "accept");
+                return redirect(self);
+            case "grant-decline":
+                await ctx.client.answerGrant(id, text(form, "grantId"), "decline");
+                return redirect(self);
+            case "grant-relinquish":
+                await ctx.client.answerGrant(id, text(form, "grantId"), "relinquish");
+                return redirect(self);
             default:
                 throw new Response(`unknown operation '${intent}'`, { status: 400 });
         }
     });
 }
 const limit = (n, what) => (n === undefined ? `any number of ${what}` : `${n} ${what}`);
+/** A grant in one phrase for a control's accessible name: what it opens, to whom, from where. */
+const grantName = (g) => `${targetText(g.target)} to ${g.grantee} from ${g.grantingProject}`;
 export default function Organization() {
-    const { organization: o, projects, ownerless, panels, console: page } = useLoaderData();
+    const { organization: o, projects, offered, ownerless, panels, console: page } = useLoaderData();
     const { shows } = useConsole();
     const admin = page.principal?.platformAdmin ?? false;
     const owner = o.role === "owner" || admin;
@@ -75,8 +100,12 @@ 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))) })] }) }))] }), _jsxs("section", { className: "ac-card", "aria-labelledby": "offered", children: [_jsx("h2", { id: "offered", children: "Offered grants" }), offered.length === 0 ? (_jsx("p", { className: "ac-empty", children: "No other organization's project offers this organization's machines or services anything. A grant from another organization waits here until an owner accepts it." })) : (_jsx("div", { className: "ac-table-wrap", children: _jsxs("table", { className: "ac-table", "aria-describedby": "offered", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "From" }), _jsx("th", { scope: "col", children: "Grantee" }), _jsx("th", { scope: "col", children: "Target" }), _jsx("th", { scope: "col", children: "State" }), _jsx("th", { scope: "col", children: "Last change" }), _jsx("th", { scope: "col", children: _jsx("span", { className: "ac-visually-hidden", children: "Actions" }) })] }) }), _jsx("tbody", { children: offered.map((g) => {
+                                        const last = g.changes[g.changes.length - 1];
+                                        return (_jsxs("tr", { "data-offered": g.id, "data-state": g.state, children: [_jsxs("td", { children: [g.grantingProject, " ", _jsxs("span", { className: "ac-hint", children: ["of ", g.grantingOrganization] })] }), _jsx("td", { children: _jsx("code", { children: g.grantee }) }), _jsx("td", { children: targetText(g.target) }), _jsx("td", { children: g.state }), _jsx("td", { children: last ? (_jsxs(_Fragment, { children: [last.change, last.at ? ` ${when(last.at)}` : "", last.by ? ` by ${last.by}` : ""] })) : ("—") }), _jsxs("td", { children: [owner && g.state === "pending" && shows("grant.answer") ? (_jsxs("div", { className: "ac-ops", children: [_jsxs(ConsoleForm, { intent: "grant-accept", className: "ac-inline", children: [_jsx("input", { type: "hidden", name: "grantId", value: g.id }), _jsx(Submit, { intent: "grant-accept", label: `Accept ${grantName(g)}`, children: "Accept" })] }), _jsxs(ConsoleForm, { intent: "grant-decline", className: "ac-inline", children: [_jsx("input", { type: "hidden", name: "grantId", value: g.id }), _jsx(Submit, { intent: "grant-decline", label: `Decline ${grantName(g)}`, children: "Decline" })] })] })) : null, owner && g.state === "accepted" && shows("grant.relinquish") ? (_jsxs(ConsoleForm, { intent: "grant-relinquish", className: "ac-inline", children: [_jsx("input", { type: "hidden", name: "grantId", value: g.id }), _jsx(Submit, { intent: "grant-relinquish", danger: true, label: `Relinquish ${grantName(g)}`, children: "Relinquish" })] })) : null] })] }, g.id));
+                                    }) })] }) })), _jsx(Refused, { intent: "grant-accept" }), _jsx(Refused, { intent: "grant-decline" }), _jsx(Refused, { intent: "grant-relinquish" })] }), _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;