Rename the admin example plugin to auth-admin, and let config/menu.ts hide or rename a profile-menu entry

examples/plugins/auth-admin/views/client-detail.ejs

@@ -0,0 +1,17 @@
+<%#
+  OAuth2 client detail page: the client-detail body (info · one-time secret · delete) in the
+  shell. Doubles as the post-register page when `created`/`secret` are set.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const body = include("partials/client-detail-body", { canWrite: model.canWrite, client: model.client, created: model.created, csrfToken: chrome.csrfToken, del: model.delete, secret: model.secret });
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/client-form.ejs

@@ -0,0 +1,16 @@
+<%#
+  OAuth2 client register page: the client-form body captured into the app shell.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const body = include("partials/client-form-body", { error: model.error, form: model.form });
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/clients.ejs

@@ -0,0 +1,22 @@
+<%#
+  OAuth2 clients admin list: apps that log in *through* us (Hydra). Same building blocks as
+  the Groups screen, around the shell, backed by live Hydra OAuth2 clients (admin-clients.ts).
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const filters = include("partials/filter-bar", model.filterBar);
+  const table = include("partials/data-table", model.table);
+  const pager = include("partials/pagination", model.pagination);
+  // Only offer "Register client" to an oauth2-clients:write holder — a :read one would get the 403 page.
+  const actions = model.canWrite === false ? "" : '<a class="btn btn-primary" href="' + localeHref("/auth-admin/clients/new") + '"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>' + t("admin.clients.registerClient") + '</a>';
+-%>
+<%- include("partials/shell", {
+  actions,
+  body: filters + table + pager,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/confirm.ejs

@@ -0,0 +1,17 @@
+<%#
+  Admin destructive-action confirmation page: the confirm body in the app shell. Model
+  from buildConfirmModel: { message, confirm:{action,label}, cancelHref, nav, shell }.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const body = include("partials/confirm-body", { cancelHref: model.cancelHref, confirm: model.confirm, csrfToken: chrome.csrfToken, message: model.message });
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/group-detail.ejs

@@ -0,0 +1,16 @@
+<%#
+  Group admin detail / membership page: the group-detail body in the app shell.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const body = include("partials/group-detail-body", { add: model.add, canWrite: model.canWrite, csrfToken: model.csrfToken, del: model.delete, error: model.error, group: model.group, members: model.members, permissions: model.permissions });
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/group-form.ejs

@@ -0,0 +1,16 @@
+<%#
+  Group admin create page: the group-form body captured into the app shell.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const body = include("partials/group-form-body", { error: model.error, form: model.form });
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/groups.ejs

@@ -0,0 +1,22 @@
+<%#
+  Groups admin list: the same building blocks as the Users screen, around the shell, but
+  backed by live Keto subject sets (admin-groups.ts). Filter/sort/page round-trip the URL.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const filters = include("partials/filter-bar", model.filterBar);
+  const table = include("partials/data-table", model.table);
+  const pager = include("partials/pagination", model.pagination);
+  // Only offer "New group" to a groups:write holder — a groups:read one would get the 403 page.
+  const actions = model.canWrite === false ? "" : '<a class="btn btn-primary" href="' + localeHref("/auth-admin/groups/new") + '"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>' + t("admin.groups.new") + '</a>';
+-%>
+<%- include("partials/shell", {
+  actions,
+  body: filters + table + pager,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/notice.ejs

@@ -0,0 +1,17 @@
+<%#
+  Admin notice page — a single message in the app shell, reused for not-found (404) and
+  capability-unavailable (503). The shell renders `title` as the page <h1>; the body is one line.
+  Data: chrome, title, message.
+%><%
+  const navHtml = include("partials/nav-tree", { nodes: chrome.nav });
+  const body = include("partials/notice-body", { message });
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  csrfToken: chrome.csrfToken,
+  nav: navHtml,
+  theme: chrome.theme,
+  title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/partials/client-detail-body.ejs

@@ -0,0 +1,40 @@
+<%#
+  Admin OAuth2 client detail body, captured into the shell content slot. Config:
+    client  { firstParty, id, name, public, redirectUris[], scopes[] }
+    created bool        just registered → success banner
+    secret? string      one-time client secret (confidential clients), shown once right after create
+    del     { action }  delete the client
+    csrfToken
+%><%
+  const c = locals.client;
+  const del = locals.del;
+-%>
+<div class="form-page">
+<% if (locals.created) { -%>
+<%- include("partials/alert", { text: t("admin.clients.createdNotice"), tone: "pos" }) %>
+<% } -%>
+<% if (locals.secret) { -%>
+  <section class="form-card" aria-labelledby="secret-h">
+    <h2 class="card-title" id="secret-h"><%= t("admin.clients.secret") %></h2>
+    <p class="field-hint"><%= t("admin.clients.secretHint") %></p>
+    <div class="field"><label for="cid"><%= t("admin.clients.column.id") %></label><input class="input" id="cid" type="text" value="<%= c.id %>" readonly></div>
+    <div class="field"><label for="csecret"><%= t("admin.clients.secret") %></label><input class="input" id="csecret" type="text" value="<%= locals.secret %>" readonly></div>
+  </section>
+<% } -%>
+  <section class="form-card" aria-labelledby="client-h">
+    <h2 class="card-title" id="client-h"><%= c.name %></h2>
+    <dl class="detail-list">
+      <dt><%= t("admin.clients.column.id") %></dt><dd><%= c.id %></dd>
+      <dt><%= t("admin.clients.column.type") %></dt><dd><%= c.public ? t("admin.clients.publicPkce") : t("admin.clients.confidential") %></dd>
+      <dt><%= t("admin.clients.consent.label") %></dt><dd><%= c.firstParty ? t("admin.clients.consent.firstParty") : t("admin.clients.consent.screen") %></dd>
+      <dt><%= t("admin.clients.field.scopes") %></dt><dd><%= c.scopes.length ? c.scopes.join(" ") : "—" %></dd>
+      <dt><%= t("admin.clients.field.redirectUris") %></dt><dd><% if (c.redirectUris.length) { %><ul class="plain-list"><% c.redirectUris.forEach((u) => { %><li><%= u %></li><% }) %></ul><% } else { %>—<% } %></dd>
+    </dl>
+  </section>
+<% if (locals.canWrite !== false) { -%>
+  <section class="form-card admin-actions" aria-label="<%= t("admin.clients.title") %>">
+    <p class="field-hint"><%= t("admin.clients.rereg") %></p>
+    <a class="btn btn-danger" href="<%= localeHref(del.action) %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg><%= t("admin.clients.delete") %></a>
+  </section>
+<% } -%>
+</div>

examples/plugins/auth-admin/views/partials/client-form-body.ejs

@@ -0,0 +1,30 @@
+<%#
+  Admin OAuth2 client register form body, captured into the shell content slot. Config:
+    form { action, csrfToken, submitLabel, cancelHref, nameField, scopeField (field.ejs configs),
+           redirectUris: string (newline-separated), public: bool, firstParty: bool }
+    error? string shown when a write was rejected
+%><%
+  const form = locals.form;
+-%>
+<div class="form-page">
+<% if (locals.error) { -%>
+<%- include("partials/alert", { text: locals.error, tone: "neg" }) %>
+<% } -%>
+  <form class="form-card" method="post" action="<%= localeHref(form.action) %>">
+    <input type="hidden" name="_csrf" value="<%= form.csrfToken %>">
+    <%- include("partials/field", form.nameField) %>
+    <div class="field">
+      <label for="redirectUris"><%= t("admin.clients.field.redirectUris") %></label>
+      <textarea class="input" id="redirectUris" name="redirectUris" rows="3" placeholder="https://app.example.com/callback"><%= form.redirectUris %></textarea>
+      <span class="field-hint"><%= t("admin.clients.field.redirectUrisHint") %></span>
+    </div>
+    <%- include("partials/field", form.scopeField) %>
+    <label class="check"><input type="checkbox" name="public"<% if (form.public) { %> checked<% } %>> Public client (SPA / native app, PKCE — no secret)</label>
+    <span class="field-hint"><%= t("admin.clients.field.typeHint") %></span>
+    <label class="check"><input type="checkbox" name="firstParty"<% if (form.firstParty) { %> checked<% } %>> First-party (auto-grant consent — skip the consent screen)</label>
+    <div class="form-actions">
+      <a class="btn" href="<%= localeHref(form.cancelHref) %>"><%= t("common.cancel") %></a>
+      <button class="btn btn-primary" type="submit"><%= form.submitLabel %></button>
+    </div>
+  </form>
+</div>

examples/plugins/auth-admin/views/partials/confirm-body.ejs

@@ -0,0 +1,17 @@
+<%#
+  Destructive-action confirm body, captured into the shell content slot. Zero-JS: the
+  delete is a deliberate second step (a POST form), with a cancel link back. Config:
+    message    string
+    confirm    { action, label }   the danger POST endpoint + button label
+    cancelHref string
+    csrfToken
+%>
+<div class="form-page">
+  <section class="form-card admin-actions" aria-label="<%= t("admin.users.confirm") %>">
+    <p><%= locals.message %></p>
+    <div class="form-actions">
+      <a class="btn" href="<%= localeHref(locals.cancelHref) %>"><%= t("common.cancel") %></a>
+      <form method="post" action="<%= localeHref(locals.confirm.action) %>"><input type="hidden" name="_csrf" value="<%= locals.csrfToken %>"><button class="btn btn-danger" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg><%= locals.confirm.label %></button></form>
+    </div>
+  </section>
+</div>

examples/plugins/auth-admin/views/partials/group-detail-body.ejs

@@ -0,0 +1,49 @@
+<%#
+  Admin group membership body, captured into the shell content slot. Config:
+    group   { name }
+    members { action, rows: { kind:"group"|"identity", label, subject }[] }   action = remove-member endpoint
+    add     { action, options: {label,value}[] }                          action = add-member endpoint
+    del     { action }                                                     delete the whole group
+    csrfToken, error?
+%><%
+  const group = locals.group;
+  const members = locals.members;
+  const add = locals.add;
+  const del = locals.del;
+  const csrf = locals.csrfToken;
+-%>
+<div class="form-page">
+<% if (locals.error) { -%>
+<%- include("partials/alert", { text: locals.error, tone: "neg" }) %>
+<% } -%>
+  <section class="form-card" aria-labelledby="members-h">
+    <h2 class="card-title" id="members-h"><%= t("admin.groups.members") %></h2>
+<% if (members.rows.length) { -%>
+    <div class="table-wrap"><table class="table"><caption class="sr-only"><%= t("admin.groups.membersOf", { name: group.name }) %></caption><thead><tr><th scope="col"><%= t("admin.common.member") %></th><th scope="col"><%= t("admin.common.type") %></th><th class="col-actions" scope="col"><span class="sr-only"><%= t("table.actions") %></span></th></tr></thead><tbody>
+<% members.rows.forEach((m) => { -%>
+      <tr><th scope="row"><span class="cell-strong"><%= m.label %></span></th><td><span class="badge info"><span class="dot"></span><%= m.kind === "group" ? t("admin.common.group") : t("admin.common.user") %></span></td><td class="col-actions"><% if (locals.canWrite !== false) { %><form method="post" action="<%= localeHref(members.action) %>"><input type="hidden" name="_csrf" value="<%= csrf %>"><input type="hidden" name="member" value="<%= m.subject %>"><button class="btn" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg><%= t("common.remove") %></button></form><% } %></td></tr>
+<% }) -%>
+    </tbody></table></div>
+<% } else { -%>
+    <p class="cell-muted"><%= t("admin.groups.noMembers") %></p>
+<% } -%>
+  </section>
+<% if (locals.canWrite !== false) { -%>
+  <section class="form-card" aria-labelledby="add-h">
+    <h2 class="card-title" id="add-h"><%= t("admin.groups.addMember") %></h2>
+<% if (add.options.length) { -%>
+    <form class="inline-form" method="post" action="<%= localeHref(add.action) %>"><input type="hidden" name="_csrf" value="<%= csrf %>"><label class="sr-only" for="add-member"><%= t("admin.common.member") %></label><span class="select"><select id="add-member" name="member" required><option value="" disabled selected><%= t("admin.common.chooseMember") %></option><% add.options.forEach((o) => { %><option value="<%= o.value %>"><%= o.label %></option><% }) %></select></span><button class="btn btn-primary" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg><%= t("common.add") %></button></form>
+<% } else { -%>
+    <p class="cell-muted"><%= t("admin.groups.allMembers") %></p>
+<% } -%>
+  </section>
+<% } -%>
+<% if (locals.permissions) { -%>
+<%- include("partials/permission-picker", { csrfToken: csrf, permissions: locals.permissions }) %>
+<% } -%>
+<% if (locals.canWrite !== false) { -%>
+  <section class="form-card admin-actions" aria-label="<%= t("admin.groups.actions") %>">
+    <a class="btn btn-danger" href="<%= localeHref(del.action) %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg><%= t("admin.groups.delete") %></a>
+  </section>
+<% } -%>
+</div>

examples/plugins/auth-admin/views/partials/group-form-body.ejs

@@ -0,0 +1,26 @@
+<%#
+  Admin group create form body, captured into the shell content slot. Config:
+    form  { action, csrfToken, submitLabel, cancelHref, nameField: field.ejs config,
+            memberOptions: {label,value}[], selectedMember }
+    error?  string  shown when a write was rejected
+%><%
+  const form = locals.form;
+-%>
+<div class="form-page">
+<% if (locals.error) { -%>
+<%- include("partials/alert", { text: locals.error, tone: "neg" }) %>
+<% } -%>
+  <form class="form-card" method="post" action="<%= localeHref(form.action) %>">
+    <input type="hidden" name="_csrf" value="<%= form.csrfToken %>">
+    <%- include("partials/field", form.nameField) %>
+    <div class="field">
+      <label for="member"><%= t("admin.groups.firstMember") %></label>
+      <span class="select"><select id="member" name="member" required><option value="" disabled<% if (!form.selectedMember) { %> selected<% } %>><%= t("admin.common.chooseMember") %></option><% form.memberOptions.forEach((o) => { %><option value="<%= o.value %>"<% if (form.selectedMember === o.value) { %> selected<% } %>><%= o.label %></option><% }) %></select></span>
+      <span class="field-hint"><%= t("admin.groups.firstMemberHint") %></span>
+    </div>
+    <div class="form-actions">
+      <a class="btn" href="<%= localeHref(form.cancelHref) %>"><%= t("common.cancel") %></a>
+      <button class="btn btn-primary" type="submit"><%= form.submitLabel %></button>
+    </div>
+  </form>
+</div>

examples/plugins/auth-admin/views/partials/notice-body.ejs

@@ -0,0 +1,2 @@
+<%# One-line notice body (not-found / unavailable). Data: message. %>
+<section class="notice"><p><%= message %></p></section>

examples/plugins/auth-admin/views/partials/permission-picker.ejs

@@ -0,0 +1,54 @@
+<%#
+  The permission picker, shared by the user-edit and group-detail pages. A fieldset of checkboxes —
+  one per permission the installed plugins declare — ticked where this user/group holds it. The whole
+  set posts back, so what is submitted IS the desired set of *direct* grants (see admin-grants.ts).
+
+  Two rows never post, by design: an `inherited` one (the grant comes from a group, so it is changed
+  there) and every row when `readOnly` (the viewer holds :read but not :write). Neither can be diffed
+  into an accidental revoke, because grantDiff compares against the direct grants only.
+
+  Locals: csrfToken, permissions ({ action, baseline, choices, empty, error, field, hint, inheritedNote, legend, notice, pending, readOnly, submit }).
+%>
+  <section class="form-card" aria-labelledby="permissions-h">
+    <h2 class="card-title" id="permissions-h"><%= permissions.legend %></h2>
+<% if (permissions.error) { -%>
+<%- include("partials/alert", { text: permissions.error, tone: "neg" }) %>
+<% } -%>
+<% if (permissions.notice) { -%>
+<%- include("partials/alert", { text: permissions.notice, tone: "pos" }) %>
+<% } -%>
+<% if (permissions.empty) { -%>
+    <p class="cell-muted"><%= permissions.empty %></p>
+<% } else { -%>
+    <p class="cell-muted"><%= permissions.hint %></p>
+<% if (permissions.readOnly) { -%>
+    <fieldset class="check-group">
+      <legend class="sr-only"><%= permissions.legend %></legend>
+<% permissions.choices.forEach((c) => { -%>
+      <label class="check"><input type="checkbox"<%= c.checked ? " checked" : "" %> disabled><span><%= c.description || c.name %></span><span class="cell-muted"><%= c.name %></span></label>
+<% }) -%>
+    </fieldset>
+<% } else { -%>
+    <%# The fragment brings the card, and the notice in it, into view on a long page. %>
+    <form method="post" action="<%= localeHref(permissions.action + '#permissions-h') %>">
+      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
+      <input type="hidden" name="baseline" value="<%= permissions.baseline %>">
+      <fieldset class="check-group">
+        <legend class="sr-only"><%= permissions.legend %></legend>
+<% permissions.choices.forEach((c) => { -%>
+        <label class="check"><input type="checkbox" name="<%= permissions.field %>" value="<%= c.name %>"<%= c.checked ? " checked" : "" %><%= c.inherited ? " disabled" : "" %>><span><%= c.description || c.name %></span><span class="cell-muted"><%= c.name %></span></label>
+<% }) -%>
+      </fieldset>
+      <div class="form-actions">
+        <button class="btn btn-primary" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-check-circle"/></svg><%= permissions.submit %></button>
+      </div>
+    </form>
+<% } -%>
+<% if (permissions.inheritedNote) { -%>
+    <p class="cell-muted"><%= permissions.inheritedNote %></p>
+<% } -%>
+<% if (permissions.pending) { -%>
+    <p class="cell-muted"><%= permissions.pending %></p>
+<% } -%>
+<% } -%>
+  </section>

examples/plugins/auth-admin/views/partials/user-form-body.ejs

@@ -0,0 +1,41 @@
+<%#
+  Admin user create/edit form body, captured into the shell content slot. Config:
+    form  { action, csrfToken, submitLabel, cancelHref, fields: field.ejs config[] }
+    edit? { nextLabel, stateAction, recoveryAction, deleteAction }   (edit mode only)
+    recovery? { code, link }   shown after a recovery code is generated; link is the URL of the flow the code was minted on, the only flow that accepts the code
+    error?   string              shown when a write was rejected
+%><%
+  const form = locals.form;
+  const edit = locals.edit;
+  const recovery = locals.recovery;
+-%>
+<div class="form-page">
+<% if (locals.error) { -%>
+<%- include("partials/alert", { text: locals.error, tone: "neg" }) %>
+<% } -%>
+<% if (recovery) { -%>
+  <div class="alert alert-pos" role="status"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-check-circle"/></svg><div class="alert-body"><strong><%= t("admin.users.recovery.title") %></strong><span><%= t("admin.users.recovery.body") %> <a href="<%= recovery.link %>"><%= t("admin.users.recovery.link") %></a></span><span class="recovery-code"><code><%= recovery.code %></code></span></div></div>
+<% } -%>
+  <form class="form-card" method="post" action="<%= localeHref(form.action) %>">
+    <input type="hidden" name="_csrf" value="<%= form.csrfToken %>">
+<% form.fields.forEach((field) => { -%>
+    <%- include("partials/field", field) %>
+<% }) -%>
+    <div class="form-actions">
+      <a class="btn" href="<%= localeHref(form.cancelHref) %>"><%= t("common.cancel") %></a>
+<% if (locals.canWrite !== false) { -%>
+      <button class="btn btn-primary" type="submit"><%= form.submitLabel %></button>
+<% } -%>
+    </div>
+  </form>
+<% if (edit && locals.permissions) { -%>
+<%- include("partials/permission-picker", { csrfToken: form.csrfToken, permissions: locals.permissions }) %>
+<% } -%>
+<% if (edit && locals.canWrite !== false) { -%>
+  <section class="form-card admin-actions" aria-label="<%= t("admin.users.actions") %>">
+    <form method="post" action="<%= localeHref(edit.recoveryAction) %>"><input type="hidden" name="_csrf" value="<%= form.csrfToken %>"><button class="btn" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-mail"/></svg><%= t("admin.users.recovery.generate") %></button></form>
+    <form method="post" action="<%= localeHref(edit.stateAction) %>"><input type="hidden" name="_csrf" value="<%= form.csrfToken %>"><button class="btn" type="submit"><%= edit.nextLabel %></button></form>
+    <a class="btn btn-danger" href="<%= localeHref(edit.deleteAction) %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg><%= t("admin.users.delete") %></a>
+  </section>
+<% } -%>
+</div>

examples/plugins/auth-admin/views/plugin-settings.ejs

@@ -0,0 +1,24 @@
+<%#
+  Plugin settings admin list: one section per installed plugin, each a table of what it declares
+  and how each key resolved (admin-plugin-settings.ts). Read-only — no actions, no forms.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  let body = "";
+  for (const group of model.groups) {
+    // A plugin id is the folder name, which discovery constrains to [a-z0-9-] — no escaping needed.
+    body += '<h2 class="h2">' + group.pluginId + "</h2>";
+    body += group.table.rows.length === 0
+      ? '<p class="muted">' + group.emptyText + "</p>"
+      : include("partials/data-table", group.table);
+  }
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/user-form.ejs

@@ -0,0 +1,16 @@
+<%#
+  Users admin create/edit page: the user-form body captured into the app shell.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const body = include("partials/user-form-body", { canWrite: model.canWrite, edit: model.edit, error: model.error, form: model.form, permissions: model.permissions, recovery: model.recovery });
+-%>
+<%- include("partials/shell", {
+  body,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>

examples/plugins/auth-admin/views/users.ejs

@@ -0,0 +1,22 @@
+<%#
+  Users admin list: the same building blocks as the dashboard, around the shell, but
+  backed by live Kratos identities (admin-users.ts). Filter/sort/page all round-trip the URL.
+%><%
+  const nav = include("partials/nav-tree", { nodes: chrome.nav });
+  const filters = include("partials/filter-bar", model.filterBar);
+  const table = include("partials/data-table", model.table);
+  const pager = include("partials/pagination", model.pagination);
+  // Only offer "New user" to a users:write holder — a users:read one would get the 403 page.
+  const actions = model.canWrite === false ? "" : '<a class="btn btn-primary" href="' + localeHref("/auth-admin/users/new") + '"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>' + t("admin.users.new") + '</a>';
+-%>
+<%- include("partials/shell", {
+  actions,
+  body: filters + table + pager,
+  brand: chrome.brand,
+  breadcrumbs: model.breadcrumbs,
+  csrfToken: chrome.csrfToken,
+  nav,
+  theme: chrome.theme,
+  title: model.title,
+  user: chrome.user,
+}) %>