shutro-erp 0.3.3 → 0.3.4

package/dist/server/images.js

@@ -0,0 +1,139 @@
+/**
+ * Profile photos and company logos: small images (resized to 256 px in the browser) kept in the database, so they
+ * work with or without file storage. PNG, JPEG or WebP only — checked by their bytes, never trusted from the name or
+ * the type given; at most 300 KB. Served to signed-in users with a version in the URL, so browsers cache them.
+ *
+ * - `GET    /api/v1/images/:kind/:id`        `kind`: `user` or `company`; the image, or 404
+ * - `PUT    /api/v1/auth/profile/avatar`     `{ image: 'data:image/…;base64,…' }`: your photo; `DELETE` removes it
+ * - `PUT    /api/v1/images/company/:id`      a company's logo (Administrator or Settings / Company, one of your
+ *                                            companies); `DELETE` removes it
+ */
+import { createHash } from 'node:crypto';
+import { audit } from './audit.js';
+import { HttpProblem } from './errors.js';
+const MAX_BYTES = 300 * 1024;
+const KINDS = { user: 'res.users', company: 'res.company' };
+const images = (env) => env.model('kosh.image');
+/** The image's type from its first bytes: PNG, JPEG or WebP; anything else (SVG included) is refused. */
+function sniff(bytes) {
+    if (bytes.subarray(0, 8).equals(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])))
+        return 'image/png';
+    if (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff)
+        return 'image/jpeg';
+    if (bytes.subarray(0, 4).toString('latin1') === 'RIFF' &&
+        bytes.subarray(8, 12).toString('latin1') === 'WEBP')
+        return 'image/webp';
+    return null;
+}
+/** The bytes of a `data:` URL, checked. @throws {HttpProblem} 422 */
+function decode(input) {
+    const bad = (detail) => new HttpProblem(422, 'invalid-image', 'Invalid image', detail);
+    const match = typeof input === 'string'
+        ? /^data:image\/[a-z+.-]+;base64,([A-Za-z0-9+/=]+)$/.exec(input)
+        : null;
+    if (match === null)
+        throw bad('Send the image as a data URL (PNG, JPEG or WebP).');
+    const bytes = Buffer.from(match[1], 'base64');
+    if (bytes.length === 0 || bytes.length > MAX_BYTES)
+        throw bad('The image must be under 300 KB.');
+    const mime = sniff(bytes);
+    if (mime === null)
+        throw bad('Only PNG, JPEG or WebP images.');
+    return { bytes, mime };
+}
+/** The image versions of `ids` of a kind (a short digest), for URLs that change when the image does. */
+export async function imageVersions(env, kind, ids) {
+    if (ids.length === 0)
+        return {};
+    const found = await images(env).search({
+        where: { ownerModel: KINDS[kind], ownerId: { in: [...ids] } },
+    });
+    const rows = found.length === 0 ? [] : (await found.load(['ownerId', 'hash'])).read(['ownerId', 'hash']);
+    return Object.fromEntries(rows.map((r) => [String(r['ownerId']), String(r['hash'])]));
+}
+async function store(env, kind, id, input) {
+    const existing = await images(env).search({ where: { ownerModel: KINDS[kind], ownerId: id } });
+    if (input === null) {
+        if (existing.length > 0)
+            await existing.unlink();
+        return null;
+    }
+    const { bytes, mime } = decode(input);
+    const hash = createHash('sha256').update(bytes).digest('hex').slice(0, 16);
+    const values = { mime, data: bytes.toString('base64'), hash };
+    if (existing.length > 0)
+        await existing.write(values);
+    else
+        await images(env).create([{ ownerModel: KINDS[kind], ownerId: id, ...values }]);
+    return hash;
+}
+export function registerImageRoutes(app, auth) {
+    app.get('/api/v1/images/:kind/:id', async (request, reply) => {
+        const { kind, id } = request.params;
+        const owner = Number(id);
+        if (!(kind === 'user' || kind === 'company') || !Number.isSafeInteger(owner) || owner <= 0)
+            throw new HttpProblem(404, 'not-found', 'Not found', 'No such image.');
+        const row = await request.env((env) => env.asSuperuser({ reason: 'image' }, async (su) => {
+            const found = await images(su).search({
+                where: { ownerModel: KINDS[kind], ownerId: owner },
+            });
+            return found.length === 0
+                ? undefined
+                : (await found.load(['mime', 'data', 'hash'])).read(['mime', 'data', 'hash'])[0];
+        }), { write: true });
+        if (row === undefined)
+            throw new HttpProblem(404, 'not-found', 'Not found', 'No image.');
+        const etag = `"${String(row['hash'])}"`;
+        reply
+            .header('content-type', String(row['mime']))
+            .header('etag', etag)
+            .header('x-content-type-options', 'nosniff')
+            // Versioned URLs (`?v=<hash>`) never change; plain ones are checked again after a minute.
+            .header('cache-control', request.query.v === undefined
+            ? 'private, max-age=60'
+            : 'private, max-age=31536000, immutable');
+        if (request.headers['if-none-match'] === etag)
+            return reply.status(304).send();
+        return reply.send(Buffer.from(String(row['data']), 'base64'));
+    });
+    const own = async (request, image) => {
+        const session = await auth.requireSession(request);
+        const hash = await request.env((env) => env.asSuperuser({ reason: 'profile photo' }, async (su) => {
+            const out = await store(su, 'user', session.user, image);
+            await audit(env, {
+                kind: 'auth.avatar',
+                summary: image === null ? 'Profile photo removed.' : 'Profile photo changed.',
+                targetModel: 'res.users',
+                targetId: session.user,
+            });
+            await su.flush();
+            return out;
+        }), { write: true });
+        auth.forget(session.user);
+        return { avatar: hash };
+    };
+    app.put('/api/v1/auth/profile/avatar', async (request) => own(request, request.body?.['image'] ?? ''));
+    app.delete('/api/v1/auth/profile/avatar', async (request) => own(request, null));
+    const logo = async (request, image) => {
+        const company = Number(request.params.id);
+        return request.env(async (env) => {
+            if (!env.administrator && !env.groups.has('settings.company'))
+                throw new HttpProblem(403, 'access', 'Company settings', 'Changing the logo needs the Administrator role or the Settings / Company access.');
+            if (!env.administrator && !env.companyIds.includes(company))
+                throw new HttpProblem(403, 'access', 'Company settings', 'Not one of your companies.');
+            return env.asSuperuser({ reason: 'company logo' }, async (su) => {
+                const hash = await store(su, 'company', company, image);
+                await audit(env, {
+                    kind: 'settings.logo',
+                    summary: image === null ? 'Company logo removed.' : 'Company logo changed.',
+                    targetModel: 'res.company',
+                    targetId: company,
+                });
+                await su.flush();
+                return { logo: hash };
+            });
+        }, { write: true });
+    };
+    app.put('/api/v1/images/company/:id', async (request) => logo(request, request.body?.['image'] ?? ''));
+    app.delete('/api/v1/images/company/:id', async (request) => logo(request, null));
+}

package/dist/server/index.d.ts

@@ -24,6 +24,7 @@ export { applyEnvironmentNames } from './env-names.js';
 export { HttpProblem, type Problem, problemOf, ServerConfigError } from './errors.js';
 export { type AppHost, type AppHostOptions, createAppHost, startAppHost } from './host.js';
 export { type Authenticator, denyAll, isSuperuser, languageOf, type RequestIdentity, type RequestRunOptions, runOptionsOf, } from './identity.js';
+export { imageVersions, registerImageRoutes } from './images.js';
 export { migrate, orm, pg } from './orm.js';
 export { buildKoshRegistry, KOSH_VERSION, type KoshRegistry } from './registry.js';
 export { type AppsContext, createServer, type KoshServer, type ModuleContext, type ServerOptions, startServer, } from './server.js';

package/dist/server/index.js

@@ -24,6 +24,7 @@ export { applyEnvironmentNames } from './env-names.js';
 export { HttpProblem, problemOf, ServerConfigError } from './errors.js';
 export { createAppHost, startAppHost } from './host.js';
 export { denyAll, isSuperuser, languageOf, runOptionsOf, } from './identity.js';
+export { imageVersions, registerImageRoutes } from './images.js';
 export { migrate, orm, pg } from './orm.js';
 export { buildKoshRegistry, KOSH_VERSION } from './registry.js';
 export { createServer, startServer, } from './server.js';

package/dist/server/server.d.ts

@@ -47,6 +47,10 @@ export interface ServerOptions {
         /** Sign-in attempts per 15 minutes per IP and login (default 10; 0 turns the limit off). */
         readonly loginLimit?: number;
     };
+    /** OAuth 2.0 provider (RFC 0017 §5.2): the back-office's address, where the consent page is (`KOSH_BASE_URL`). */
+    readonly oauth?: {
+        readonly baseUrl?: string;
+    };
     /**
      * Shutro's identity loader checks every request's user (active, companies, groups) against `base`'s data. Default:
      * on with the built-in authentication; custom authenticators opt in.

package/dist/server/server.js

@@ -13,12 +13,14 @@ import { openApiDocument } from './api/openapi.js';
 import { registerRestApi } from './api/rest.js';
 import { ViewRegistry } from './api/views.js';
 import { registerApiKeyRoutes } from './auth/api-keys.js';
+import { registerOAuthRoutes } from './auth/oauth.js';
 import { registerAuthRoutes } from './auth/routes.js';
 import { enforceScopes } from './auth/scopes.js';
 import { AuthService } from './auth/service.js';
 import { applyEnvironmentNames } from './env-names.js';
 import { HttpProblem, problemOf, ServerConfigError } from './errors.js';
 import { denyAll, runOptionsOf } from './identity.js';
+import { registerImageRoutes } from './images.js';
 import { orm, pg } from './orm.js';
 import { buildKoshRegistry, KOSH_VERSION } from './registry.js';
 import { endSpan, tracer } from './telemetry.js';
@@ -169,7 +171,9 @@ export async function createServer(options) {
                 ? `ip:${request.ip}`
                 : request.identity.apiKey !== undefined
                     ? `key:${request.identity.apiKey}`
-                    : `user:${request.identity.user}`,
+                    : request.identity.oauthToken !== undefined
+                        ? `oauth:${request.identity.oauthToken}`
+                        : `user:${request.identity.user}`,
             allowList: (request) => request.routeOptions.config.public === true,
             errorResponseBuilder: (_request, context) => new HttpProblem(429, 'rate-limited', 'Too many requests', `Limit of ${context.max} requests per ${context.after} reached.`, `Retry after ${context.after}.`),
         });
@@ -209,6 +213,10 @@ export async function createServer(options) {
     if (auth !== undefined) {
         registerAuthRoutes(app, auth, { loginLimit: options.auth?.loginLimit ?? 10 });
         registerApiKeyRoutes(app, auth, registry);
+        registerImageRoutes(app, auth);
+        registerOAuthRoutes(app, auth, () => shutro, registry, {
+            baseUrl: options.oauth?.baseUrl ?? process.env['KOSH_BASE_URL'] ?? 'http://localhost:5173',
+        });
     }
     // The generated REST API and its OpenAPI document (RFC 0002 §6.3–6.4).
     for (const statement of idempotencyTableStatements())

package/dist/settings/company.js

@@ -10,7 +10,7 @@
  * - `GET   /api/v1/settings/companies`   every company with its currency and people, the currencies
  * - `POST  /api/v1/settings/companies`   `{ name, currency }`: a new company (administrators)
  */
-import { audit, HttpProblem, installDefaults, publicApiModels, } from '../server/index.js';
+import { audit, HttpProblem, imageVersions, installDefaults, publicApiModels, } from '../server/index.js';
 const model = (env, name) => env.model(name);
 const find = async (env, name, where, keys) => {
     const set = await model(env, name).search({ where, order: ['id asc'] });
@@ -118,6 +118,7 @@ export function registerCompanyRoutes(context) {
     app.get('/api/v1/settings/companies', async (request) => guarded(request, async (su, current, env) => {
         const all = await find(su, 'res.company', {}, ['name', 'currency']);
         const currencies = await find(su, 'res.currency', {}, ['name']);
+        const logos = await imageVersions(su, 'company', all.map((c) => c['id']));
         const currencyName = new Map(currencies.map((c) => [c['id'], String(c['name'])]));
         return {
             canCreate: env.administrator,
@@ -129,6 +130,7 @@ export function registerCompanyRoutes(context) {
                     where: { isService: { ne: true }, companies: { any: { id: c['id'] } } },
                 })).length,
                 current: c['id'] === current,
+                logo: logos[String(c['id'])] ?? null,
                 // The person can switch to it: it is one of their companies.
                 member: (await model(su, 'res.users').search({
                     where: { id: env.uid, companies: { any: { id: c['id'] } } },

package/dist/settings/people.js

@@ -17,7 +17,7 @@
  */
 import { createHash, randomBytes } from 'node:crypto';
 import { layout } from '../mail/index.js';
-import { audit, HttpProblem, isAdministratorUser } from '../server/index.js';
+import { audit, HttpProblem, imageVersions, isAdministratorUser, } from '../server/index.js';
 /** How long an invitation works. */
 export const INVITATION_DAYS = 7;
 const ref = (env, name) => env.model(name);
@@ -164,6 +164,7 @@ export function registerPeopleRoutes(context, options) {
         const invitations = await rows(ref(su, 'settings.invitation').search({ where: { user: { in: ids }, usedAt: null } }), ['user', 'expiresAt']);
         const known = await knownGroups();
         const admin = adminGroups(su);
+        const photos = await imageVersions(su, 'user', ids);
         // "Purchase · Manager": a group named by the app level that gives it, else by its own label.
         const levelLabel = new Map();
         for (const m of modules)
@@ -184,6 +185,7 @@ export function registerPeopleRoutes(context, options) {
                 name: String(u['name'] ?? ''),
                 login: String(u['login'] ?? ''),
                 email: typeof u['email'] === 'string' ? u['email'] : null,
+                avatar: photos[String(id)] ?? null,
                 active: u['active'] !== false,
                 state: u['active'] === false
                     ? 'deactivated'

package/dist/settings/web/CompaniesPage.js

@@ -4,7 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * in it; switching to one; and, for administrators, a new company — its apps' defaults (journals, sequences, taxes…)
  * are installed with it, and the administrators can switch to it at once.
  */
-import { Alert, ApiError, Badge, Button, Dialog, Input, Label, Select, useKosh, } from '../../ui/index.js';
+import { Alert, ApiError, Avatar, Badge, Button, Dialog, Input, imageUrl, Label, Select, useKosh, } from '../../ui/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Building2, Plus } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
@@ -48,5 +48,5 @@ export function CompaniesPage({ api }) {
     if (list.error !== null)
         return _jsx(Alert, { tone: "danger", children: message(list.error) });
     const data = list.data;
-    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('companies.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('companies.intro') })] }), data?.canCreate === true ? (_jsxs(Button, { variant: "primary", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4", "aria-hidden": true }), t('companies.new')] })) : null] }), data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : (_jsx("ul", { className: "divide-y rounded-lg border bg-surface", children: data.companies.map((c) => (_jsxs("li", { className: "flex flex-wrap items-center gap-3 px-4 py-3", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Building2, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "flex items-center gap-2 font-medium", children: [_jsx("span", { className: "truncate", children: c.name }), c.current ? _jsx(Badge, { tone: "info", children: t('companies.current') }) : null] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [c.currency, " \u00B7 ", t('companies.people', { count: c.people })] })] }), c.current || !c.member || switchCompany === undefined ? null : (_jsx(Button, { size: "sm", "aria-label": t('companies.switchTo', { name: c.name }), onClick: () => switchCompany(c.id), children: t('companies.switch') }))] }, c.id))) })), data === undefined ? null : (_jsx(NewCompanyDialog, { api: api, currencies: data.currencies, open: creating, onOpenChange: setCreating }))] }));
+    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('companies.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('companies.intro') })] }), data?.canCreate === true ? (_jsxs(Button, { variant: "primary", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4", "aria-hidden": true }), t('companies.new')] })) : null] }), data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : (_jsx("ul", { className: "divide-y rounded-lg border bg-surface", children: data.companies.map((c) => (_jsxs("li", { className: "flex flex-wrap items-center gap-3 px-4 py-3", children: [c.logo === null ? (_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Building2, { className: "size-4" }) })) : (_jsx(Avatar, { name: c.name, src: imageUrl('company', c.id, c.logo), shape: "square", className: "size-9 border" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "flex items-center gap-2 font-medium", children: [_jsx("span", { className: "truncate", children: c.name }), c.current ? _jsx(Badge, { tone: "info", children: t('companies.current') }) : null] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: [c.currency, " \u00B7 ", t('companies.people', { count: c.people })] })] }), c.current || !c.member || switchCompany === undefined ? null : (_jsx(Button, { size: "sm", "aria-label": t('companies.switchTo', { name: c.name }), onClick: () => switchCompany(c.id), children: t('companies.switch') }))] }, c.id))) })), data === undefined ? null : (_jsx(NewCompanyDialog, { api: api, currencies: data.currencies, open: creating, onOpenChange: setCreating }))] }));
 }

package/dist/settings/web/CompanyPage.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * apps add (tax ids, fiscal year…), as the server offers them. The preview shows the colour as buttons, links and
  * selections take it, in light and dark; the themes keep text readable whatever colour is chosen.
  */
-import { Alert, ApiError, accentVariables, Badge, Button, Checkbox, Input, Label, Select, Textarea, } from '../../ui/index.js';
+import { Alert, ApiError, accentVariables, Badge, Button, Checkbox, ImagePicker, Input, imageUrl, Label, Select, Textarea, } from '../../ui/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Check } from 'lucide-react';
 import { useId, useState } from 'react';
@@ -58,6 +58,17 @@ function CompanyForm({ api, company }) {
     const [grouping, setGrouping] = useState(company.numberGrouping);
     const [color, setColor] = useState(company.accentColor);
     const [typed, setTyped] = useState(company.accentColor ?? '');
+    const me = useQuery({
+        queryKey: ['me'],
+        queryFn: () => api.call('GET', '/api/v1/auth/me'),
+    });
+    const logo = useMutation({
+        mutationFn: (image) => image === null
+            ? api.call('DELETE', `/api/v1/images/company/${company.id}`)
+            : api.call('PUT', `/api/v1/images/company/${company.id}`, { image }),
+        // The sidebar and the switcher show the logo from the user's details.
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['me'] }),
+    });
     // Only the details changed are sent.
     const [details, setDetails] = useState({});
     const save = useMutation({
@@ -81,7 +92,7 @@ function CompanyForm({ api, company }) {
     return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('company.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('company.intro') })] }), _jsxs("form", { className: "grid gap-6", onSubmit: (e) => {
                     e.preventDefault();
                     save.mutate();
-                }, children: [_jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsx("h2", { className: "font-semibold", children: t('company.identity') }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('company.name') }), _jsx(Input, { id: `${id}-name`, value: name, required: true, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-grouping`, children: t('company.grouping') }), _jsx(Select, { id: `${id}-grouping`, label: t('company.grouping'), value: grouping, options: [
+                }, children: [_jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsx("h2", { className: "font-semibold", children: t('company.identity') }), _jsx(ImagePicker, { name: name, src: imageUrl('company', company.id, me.data?.logos?.[String(company.id)]), fit: "logo", busy: logo.isPending, onChoose: (image) => logo.mutate(image), onRemove: () => logo.mutate(null) }), logo.error === null ? null : (_jsx(Alert, { tone: "danger", children: logo.error instanceof ApiError ? logo.error.message : String(logo.error) })), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('company.name') }), _jsx(Input, { id: `${id}-name`, value: name, required: true, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-grouping`, children: t('company.grouping') }), _jsx(Select, { id: `${id}-grouping`, label: t('company.grouping'), value: grouping, options: [
                                             { value: 'international', label: t('company.international') },
                                             { value: 'lakh', label: t('company.lakh') },
                                         ], onChange: (v) => setGrouping(v === 'lakh' ? 'lakh' : 'international') })] })] }), company.details.length === 0 ? null : (_jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold", children: t('company.details') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('company.detailsHint', { currency: company.currency }) })] }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: company.details.map((d) => (_jsx(DetailField, { detail: d, value: d.key in details ? details[d.key] : d.value, onChange: (v) => setDetails((all) => ({ ...all, [d.key]: v })) }, d.key))) })] })), _jsxs("section", { className: "grid gap-4 rounded-lg border bg-surface p-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold", children: t('company.brand') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('company.brandHint') })] }), _jsxs("fieldset", { className: "grid gap-3", children: [_jsx("legend", { className: "sr-only", children: t('company.brand') }), _jsx("div", { className: "flex flex-wrap gap-2", children: SWATCHES.map((swatch) => (_jsx("button", { type: "button", "aria-label": swatch, "aria-pressed": color === swatch, onClick: () => pick(swatch), className: "grid size-8 place-items-center rounded-full border-2 border-surface ring-1 ring-border", style: { background: swatch }, children: color === swatch ? _jsx(Check, { className: "size-4 text-white", "aria-hidden": true }) : null }, swatch))) }), _jsxs("div", { className: "flex flex-wrap items-end gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-hex`, children: t('company.hex') }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", "aria-label": t('company.picker'), value: color ?? '#4f46e5', onChange: (e) => pick(e.target.value), className: "size-9 cursor-pointer rounded-md border bg-surface p-1" }), _jsx(Input, { id: `${id}-hex`, className: "w-32 font-mono", value: typed, placeholder: "#4f46e5", "aria-invalid": typed !== '' && !HEX.test(typed) ? true : undefined, onChange: (e) => {

package/dist/settings/web/ConnectedAppsPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Connected apps (RFC 0017 §5.2), from the account menu: the apps you allowed to act for you through OAuth, what each
+ * may do in words, when it last did, and *Remove access* — which ends every token the app holds for you at once.
+ */
+import { type PageProps } from '../../ui/index.js';
+import type { ReactElement } from 'react';
+export declare function ConnectedAppsPage({ api }: PageProps): ReactElement;

package/dist/settings/web/ConnectedAppsPage.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Connected apps (RFC 0017 §5.2), from the account menu: the apps you allowed to act for you through OAuth, what each
+ * may do in words, when it last did, and *Remove access* — which ends every token the app holds for you at once.
+ */
+import { Alert, ApiError, Button, useKosh } from '../../ui/index.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ExternalLink, Plug } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+export function ConnectedAppsPage({ api }) {
+    const { t } = useTranslation('settings');
+    const { format } = useKosh();
+    const queryClient = useQueryClient();
+    const grants = useQuery({
+        queryKey: ['oauth', 'grants'],
+        queryFn: () => api.call('GET', '/api/v1/auth/oauth/grants'),
+    });
+    const revoke = useMutation({
+        mutationFn: (id) => api.call('POST', `/api/v1/auth/oauth/grants/${id}/revoke`),
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['oauth', 'grants'] }),
+    });
+    const error = grants.error ?? revoke.error;
+    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('connected.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('connected.intro') })] }), error === null ? null : (_jsx(Alert, { tone: "danger", children: error instanceof ApiError ? error.message : String(error) })), grants.data === undefined ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" })) : grants.data.grants.length === 0 ? (_jsx("p", { className: "rounded-lg border bg-surface p-6 text-center text-sm text-muted-foreground", children: t('connected.none') })) : (_jsx("ul", { className: "grid gap-3", children: grants.data.grants.map((g) => (_jsxs("li", { className: "flex flex-wrap items-start gap-3 rounded-lg border bg-surface p-4", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-muted-foreground", children: _jsx(Plug, { className: "size-4" }) }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1", children: [_jsxs("p", { className: "flex items-center gap-2 font-medium", children: [g.app, g.homepage === null ? null : (_jsx("a", { href: g.homepage, target: "_blank", rel: "noreferrer noopener", "aria-label": t('connected.homepage', { app: g.app }), className: "text-muted-foreground hover:text-foreground", children: _jsx(ExternalLink, { className: "size-3.5", "aria-hidden": true }) }))] }), _jsx("ul", { className: "flex flex-wrap gap-x-3 text-sm text-muted-foreground", children: g.scopes.map((s) => (_jsx("li", { children: s.label }, s.scope))) }), _jsx("p", { className: "text-xs text-muted-foreground", children: [
+                                        g.createdAt === null
+                                            ? null
+                                            : t('connected.since', { when: format.date(g.createdAt.slice(0, 10)) }),
+                                        g.lastUsedAt === null
+                                            ? t('connected.neverUsed')
+                                            : t('connected.lastUsed', { when: format.datetime(g.lastUsedAt) }),
+                                    ]
+                                        .filter((x) => x !== null)
+                                        .join(' · ') })] }), _jsx(Button, { size: "sm", variant: "danger", busy: revoke.isPending && revoke.variables === g.id, onClick: () => revoke.mutate(g.id), "aria-label": t('connected.revokeApp', { app: g.app }), children: t('connected.revoke') })] }, g.id))) }))] }));
+}

package/dist/settings/web/OverviewPage.js

@@ -12,6 +12,17 @@ import { Search, UserRound } from 'lucide-react';
 import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 const normalise = (s) => s.toLocaleLowerCase().normalize('NFKD');
+/** Each section's icon (AppIcon names); a module's own section shows the Settings gear. */
+const SECTION_ICONS = {
+    'settings.action_company': 'company',
+    'settings.action_companies': 'companies',
+    'settings.action_people': 'users',
+    'settings.action_roles': 'shield',
+    'settings.action_security': 'security',
+    'settings.action_audit': 'audit',
+    'settings.action_apps': 'apps',
+    'assistant.action_settings': 'assistant',
+};
 export function OverviewPage({ api }) {
     const { t } = useTranslation('settings');
     const id = useId();
@@ -62,5 +73,5 @@ export function OverviewPage({ api }) {
     const showProfile = matches(profile);
     return (_jsxs("div", { className: "mx-auto grid max-w-4xl gap-6", children: [_jsxs("header", { className: "grid gap-3", children: [_jsx("h1", { className: "text-2xl font-semibold", children: t('overview.title') }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }), _jsx("label", { htmlFor: `${id}-q`, className: "sr-only", children: t('overview.search') }), _jsx("input", { id: `${id}-q`, type: "search", 
                                 // biome-ignore lint/a11y/noAutofocus: the page is a search first; it opens on purpose
-                                autoFocus: true, value: query, placeholder: t('overview.search'), onChange: (e) => setQuery(e.target.value), className: "h-11 w-full rounded-lg border border-input bg-surface ps-10 pe-3 text-base shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" })] })] }), shown.length === 0 && !showProfile ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('overview.nothing', { query }) })) : null, shown.map((g) => (_jsxs("section", { "aria-labelledby": `${id}-${g.id}`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-${g.id}`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: g.label }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: g.entries.map((e) => card(e, _jsxs(Link, { to: "/$app/a/$action", params: { app: 'settings', action: e.action }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx(AppIcon, { name: "settings", className: "size-9" }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: e.label }), e.description === '' ? null : (_jsx("span", { className: "text-sm text-muted-foreground", children: e.description }))] })] }))) })] }, g.id))), showProfile ? (_jsxs("section", { "aria-labelledby": `${id}-you`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-you`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: t('overview.you') }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: card(profile, _jsxs(Link, { to: "/me/$page", params: { page: 'settings.Profile' }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-lg bg-accent text-accent-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: profile.label }), _jsx("span", { className: "text-sm text-muted-foreground", children: profile.description })] })] })) })] })) : null] }));
+                                autoFocus: true, value: query, placeholder: t('overview.search'), onChange: (e) => setQuery(e.target.value), className: "h-11 w-full rounded-lg border border-input bg-surface ps-10 pe-3 text-base shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" })] })] }), shown.length === 0 && !showProfile ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('overview.nothing', { query }) })) : null, shown.map((g) => (_jsxs("section", { "aria-labelledby": `${id}-${g.id}`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-${g.id}`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: g.label }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: g.entries.map((e) => card(e, _jsxs(Link, { to: "/$app/a/$action", params: { app: 'settings', action: e.action }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx(AppIcon, { name: SECTION_ICONS[e.action] ?? 'settings', className: "size-9" }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: e.label }), e.description === '' ? null : (_jsx("span", { className: "text-sm text-muted-foreground", children: e.description }))] })] }))) })] }, g.id))), showProfile ? (_jsxs("section", { "aria-labelledby": `${id}-you`, className: "grid gap-2", children: [_jsx("h2", { id: `${id}-you`, className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: t('overview.you') }), _jsx("ul", { className: "grid gap-3 sm:grid-cols-2", children: card(profile, _jsxs(Link, { to: "/me/$page", params: { page: 'settings.Profile' }, className: "flex h-full items-start gap-3 rounded-lg border bg-surface p-4 hover:border-primary/40 hover:bg-accent/40", children: [_jsx("span", { "aria-hidden": true, className: "grid size-9 shrink-0 place-items-center rounded-lg bg-accent text-accent-foreground", children: _jsx(UserRound, { className: "size-4" }) }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { className: "font-medium", children: profile.label }), _jsx("span", { className: "text-sm text-muted-foreground", children: profile.description })] })] })) })] })) : null] }));
 }

package/dist/settings/web/PeoplePage.js

@@ -5,7 +5,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * invitation, a two-factor reset, deactivation and reactivation, and their recent activity. The server decides
  * what a People manager may do (not administrators, not their own roles) and audits it all.
  */
-import { Alert, ApiError, Badge, Button, Dialog, EmptyState, Input, Label, useKosh, } from '../../ui/index.js';
+import { Alert, ApiError, Avatar, Badge, Button, Dialog, EmptyState, Input, imageUrl, Label, useKosh, } from '../../ui/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Check, Copy, Search, ShieldCheck, UserPlus } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
@@ -13,15 +13,6 @@ import { useTranslation } from 'react-i18next';
 import { RolesEditor } from './RolesEditor.js';
 const P = '/api/v1/settings/people';
 const message = (error) => (error instanceof ApiError ? error.message : String(error));
-const initials = (name) => name
-    .split(/\s+/)
-    .map((w) => w.slice(0, 1))
-    .join('')
-    .slice(0, 2)
-    .toUpperCase();
-function Avatar({ name }) {
-    return (_jsx("span", { "aria-hidden": true, className: "grid size-8 shrink-0 place-items-center rounded-full bg-accent text-xs font-semibold text-accent-foreground", children: initials(name) }));
-}
 function StateBadge({ person }) {
     const { t } = useTranslation('settings');
     return person.state === 'deactivated' ? (_jsx(Badge, { tone: "neutral", children: t('people.deactivated') })) : person.state === 'invited' ? (_jsx(Badge, { tone: "warning", children: t('people.invited') })) : (_jsx(Badge, { tone: "success", children: t('people.active') }));
@@ -130,7 +121,7 @@ function PersonDialog({ api, catalogue, personId, onClose, }) {
     const p = person.data;
     const error = saveDetails.error ?? saveRoles.error ?? setActive.error ?? resend.error ?? reset.error;
     const self = personId === uid;
-    return (_jsx(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), title: p?.name ?? '…', wide: true, children: p === undefined ? null : (_jsxs("div", { className: "grid gap-5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx(Avatar, { name: p.name }), _jsx("span", { className: "text-muted-foreground", children: p.login }), _jsx(StateBadge, { person: p }), p.administrator ? _jsx(Badge, { tone: "info", children: t('people.administrator') }) : null, p.twoFactor ? (_jsxs(Badge, { tone: "success", children: [_jsx(ShieldCheck, { className: "size-3", "aria-hidden": true }), t('people.twoFactor')] })) : null] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.details') }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('profile.name') }), _jsx(Input, { id: `${id}-name`, value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-email`, children: t('profile.email') }), _jsx(Input, { id: `${id}-email`, type: "email", value: email, onChange: (e) => setEmail(e.target.value) })] }), _jsx(Button, { variant: "secondary", busy: saveDetails.isPending, onClick: () => saveDetails.mutate(), children: t('profile.save') })] })] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.roles') }), self && !catalogue.manager.administrator ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('people.notYourOwn') })) : (_jsxs(_Fragment, { children: [_jsx(RolesEditor, { catalogue: catalogue, value: assignments, onChange: setAssignments }), _jsx("div", { children: _jsx(Button, { variant: "primary", busy: saveRoles.isPending, onClick: () => saveRoles.mutate(), children: t('people.saveRoles') }) })] }))] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.access') }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [p.state === 'invited' || p.state === 'active' ? (_jsx(Button, { variant: "secondary", busy: resend.isPending, onClick: () => resend.mutate(), children: p.state === 'invited' ? t('people.resend') : t('people.newLink') })) : null, p.twoFactor ? (_jsx(Button, { variant: "secondary", onClick: () => setConfirm('reset'), children: t('people.reset2fa') })) : null, self ? null : p.active ? (_jsx(Button, { variant: "danger", onClick: () => setConfirm('deactivate'), children: t('people.deactivate') })) : (_jsx(Button, { variant: "secondary", busy: setActive.isPending, onClick: () => setActive.mutate(true), children: t('people.reactivate') }))] }), link === null ? null : (_jsx(InvitationLink, { url: link.url, emailed: link.emailed, to: p.login })), confirm === null ? null : (_jsx(Alert, { tone: "warning", action: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", onClick: () => setConfirm(null), children: t('profile.cancel') }), _jsx(Button, { size: "sm", variant: "danger", busy: setActive.isPending || reset.isPending, onClick: () => confirm === 'reset' ? reset.mutate() : setActive.mutate(false), children: confirm === 'reset' ? t('people.reset2fa') : t('people.deactivate') })] }), children: confirm === 'reset' ? t('people.resetConfirm') : t('people.deactivateConfirm') }))] }), error === null ? null : _jsx(Alert, { tone: "danger", children: message(error) }), catalogue.manager.administrator ? _jsx(Effective, { api: api, personId: personId }) : null, _jsxs("section", { className: "grid gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.activity') }), p.activity.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('people.noActivity') })) : (_jsx("ol", { className: "grid gap-1.5 text-sm", children: p.activity.map((a, i) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "w-40 shrink-0 text-xs text-muted-foreground", children: a.at === null ? '' : format.datetime(a.at) }), _jsx("span", { children: a.summary })] }, i))) }))] })] })) }));
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), title: p?.name ?? '…', wide: true, children: p === undefined ? null : (_jsxs("div", { className: "grid gap-5", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx(Avatar, { name: p.name, src: imageUrl('user', p.id, p.avatar), className: "size-8" }), _jsx("span", { className: "text-muted-foreground", children: p.login }), _jsx(StateBadge, { person: p }), p.administrator ? _jsx(Badge, { tone: "info", children: t('people.administrator') }) : null, p.twoFactor ? (_jsxs(Badge, { tone: "success", children: [_jsx(ShieldCheck, { className: "size-3", "aria-hidden": true }), t('people.twoFactor')] })) : null] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.details') }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-[1fr_1fr_auto] sm:items-end", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-name`, children: t('profile.name') }), _jsx(Input, { id: `${id}-name`, value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: `${id}-email`, children: t('profile.email') }), _jsx(Input, { id: `${id}-email`, type: "email", value: email, onChange: (e) => setEmail(e.target.value) })] }), _jsx(Button, { variant: "secondary", busy: saveDetails.isPending, onClick: () => saveDetails.mutate(), children: t('profile.save') })] })] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.roles') }), self && !catalogue.manager.administrator ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('people.notYourOwn') })) : (_jsxs(_Fragment, { children: [_jsx(RolesEditor, { catalogue: catalogue, value: assignments, onChange: setAssignments }), _jsx("div", { children: _jsx(Button, { variant: "primary", busy: saveRoles.isPending, onClick: () => saveRoles.mutate(), children: t('people.saveRoles') }) })] }))] }), _jsxs("section", { className: "grid gap-3", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.access') }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [p.state === 'invited' || p.state === 'active' ? (_jsx(Button, { variant: "secondary", busy: resend.isPending, onClick: () => resend.mutate(), children: p.state === 'invited' ? t('people.resend') : t('people.newLink') })) : null, p.twoFactor ? (_jsx(Button, { variant: "secondary", onClick: () => setConfirm('reset'), children: t('people.reset2fa') })) : null, self ? null : p.active ? (_jsx(Button, { variant: "danger", onClick: () => setConfirm('deactivate'), children: t('people.deactivate') })) : (_jsx(Button, { variant: "secondary", busy: setActive.isPending, onClick: () => setActive.mutate(true), children: t('people.reactivate') }))] }), link === null ? null : (_jsx(InvitationLink, { url: link.url, emailed: link.emailed, to: p.login })), confirm === null ? null : (_jsx(Alert, { tone: "warning", action: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", onClick: () => setConfirm(null), children: t('profile.cancel') }), _jsx(Button, { size: "sm", variant: "danger", busy: setActive.isPending || reset.isPending, onClick: () => confirm === 'reset' ? reset.mutate() : setActive.mutate(false), children: confirm === 'reset' ? t('people.reset2fa') : t('people.deactivate') })] }), children: confirm === 'reset' ? t('people.resetConfirm') : t('people.deactivateConfirm') }))] }), error === null ? null : _jsx(Alert, { tone: "danger", children: message(error) }), catalogue.manager.administrator ? _jsx(Effective, { api: api, personId: personId }) : null, _jsxs("section", { className: "grid gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: t('people.activity') }), p.activity.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('people.noActivity') })) : (_jsx("ol", { className: "grid gap-1.5 text-sm", children: p.activity.map((a, i) => (_jsxs("li", { className: "flex gap-3", children: [_jsx("span", { className: "w-40 shrink-0 text-xs text-muted-foreground", children: a.at === null ? '' : format.datetime(a.at) }), _jsx("span", { children: a.summary })] }, i))) }))] })] })) }));
 }
 export function PeoplePage({ api }) {
     const { t } = useTranslation('settings');
@@ -152,7 +143,7 @@ export function PeoplePage({ api }) {
         return _jsx(Alert, { tone: "danger", children: message(catalogue.error) });
     const list = people.data?.people ?? [];
     const statuses = ['all', 'active', 'invited', 'deactivated'];
-    return (_jsxs("div", { className: "mx-auto grid max-w-5xl gap-5", children: [_jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('people.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('people.intro') })] }), _jsxs(Button, { variant: "primary", onClick: () => setInviting(true), disabled: catalogue.data === undefined, children: [_jsx(UserPlus, { "aria-hidden": true }), t('people.invite')] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { className: "relative min-w-60 flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }), _jsx("label", { htmlFor: `${id}-q`, className: "sr-only", children: t('people.search') }), _jsx(Input, { id: `${id}-q`, type: "search", className: "ps-9", placeholder: t('people.search'), value: q, onChange: (e) => setQ(e.target.value) })] }), _jsxs("fieldset", { className: "flex rounded-md border p-0.5", children: [_jsx("legend", { className: "sr-only", children: t('people.status') }), statuses.map((s) => (_jsx("button", { type: "button", "aria-pressed": status === s, onClick: () => setStatus(s), className: "rounded px-3 py-1 text-sm aria-pressed:bg-accent aria-pressed:font-medium aria-pressed:text-accent-foreground", children: t(`people.filter.${s}`) }, s)))] })] }), people.isSuccess && list.length === 0 ? (_jsx(EmptyState, { title: t('people.empty') })) : (_jsx("ul", { className: "divide-y rounded-lg border bg-surface", "aria-label": t('people.title'), children: list.map((p) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setOpen(p.id), className: "flex w-full flex-wrap items-center gap-3 px-4 py-3 text-start hover:bg-muted/50", children: [_jsx(Avatar, { name: p.name }), _jsxs("span", { className: "grid min-w-48 flex-1", children: [_jsx("span", { className: "font-medium", children: p.name }), _jsx("span", { className: "text-sm text-muted-foreground", children: p.login })] }), _jsxs("span", { className: "flex min-w-48 flex-1 flex-wrap gap-1", children: [p.administrator ? _jsx(Badge, { tone: "info", children: t('people.administrator') }) : null, p.assignments
+    return (_jsxs("div", { className: "mx-auto grid max-w-5xl gap-5", children: [_jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('people.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('people.intro') })] }), _jsxs(Button, { variant: "primary", onClick: () => setInviting(true), disabled: catalogue.data === undefined, children: [_jsx(UserPlus, { "aria-hidden": true }), t('people.invite')] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { className: "relative min-w-60 flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": true }), _jsx("label", { htmlFor: `${id}-q`, className: "sr-only", children: t('people.search') }), _jsx(Input, { id: `${id}-q`, type: "search", className: "ps-9", placeholder: t('people.search'), value: q, onChange: (e) => setQ(e.target.value) })] }), _jsxs("fieldset", { className: "flex rounded-md border p-0.5", children: [_jsx("legend", { className: "sr-only", children: t('people.status') }), statuses.map((s) => (_jsx("button", { type: "button", "aria-pressed": status === s, onClick: () => setStatus(s), className: "rounded px-3 py-1 text-sm aria-pressed:bg-accent aria-pressed:font-medium aria-pressed:text-accent-foreground", children: t(`people.filter.${s}`) }, s)))] })] }), people.isSuccess && list.length === 0 ? (_jsx(EmptyState, { title: t('people.empty') })) : (_jsx("ul", { className: "divide-y rounded-lg border bg-surface", "aria-label": t('people.title'), children: list.map((p) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setOpen(p.id), className: "flex w-full flex-wrap items-center gap-3 px-4 py-3 text-start hover:bg-muted/50", children: [_jsx(Avatar, { name: p.name, src: imageUrl('user', p.id, p.avatar), className: "size-8" }), _jsxs("span", { className: "grid min-w-48 flex-1", children: [_jsx("span", { className: "font-medium", children: p.name }), _jsx("span", { className: "text-sm text-muted-foreground", children: p.login })] }), _jsxs("span", { className: "flex min-w-48 flex-1 flex-wrap gap-1", children: [p.administrator ? _jsx(Badge, { tone: "info", children: t('people.administrator') }) : null, p.assignments
                                         .filter((a) => !a.group.startsWith('base.'))
                                         .slice(0, 3)
                                         .map((a) => (_jsx(Badge, { tone: "neutral", children: a.label }, `${a.group}-${a.company}`))), p.assignments.length > 3 ? (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["+", p.assignments.length - 3] })) : null] }), _jsxs("span", { className: "flex items-center gap-2", children: [p.twoFactor ? (_jsx(ShieldCheck, { className: "size-4 text-success", "aria-label": t('people.twoFactor') })) : null, _jsx(StateBadge, { person: p })] }), _jsx("span", { className: "w-40 text-end text-xs text-muted-foreground", children: p.state === 'invited' && p.invitationExpiresAt !== null

package/dist/settings/web/ProfilePage.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * your password, two-factor sign-in (set up with an authenticator app, recovery codes, turn off) and the devices
  * signed in as you (sign one out, or all the others). The server checks and audits every change.
  */
-import { Alert, ApiError, Badge, Button, Input, LANGUAGES, Label, Select, useKosh, useLanguage, } from '../../ui/index.js';
+import { Alert, ApiError, Badge, Button, ImagePicker, Input, imageUrl, LANGUAGES, Label, Select, useKosh, useLanguage, } from '../../ui/index.js';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Laptop, Monitor, Smartphone } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
@@ -142,6 +142,13 @@ export function ProfilePage({ api }) {
             setLang(saved.lang);
         },
     });
+    const photo = useMutation({
+        mutationFn: (image) => image === null
+            ? api.call('DELETE', '/api/v1/auth/profile/avatar')
+            : api.call('PUT', '/api/v1/auth/profile/avatar', { image }),
+        // The shell shows the photo from the user's details.
+        onSuccess: () => void queryClient.invalidateQueries({ queryKey: ['me'] }),
+    });
     const [current, setCurrent] = useState('');
     const [next, setNext] = useState('');
     const [repeat, setRepeat] = useState('');
@@ -169,12 +176,7 @@ export function ProfilePage({ api }) {
     if (draft === null || me.data === undefined)
         return _jsx("p", { className: "text-sm text-muted-foreground", children: "\u2026" });
     const set = (patch) => setDraft({ ...draft, ...patch });
-    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { className: "flex items-center gap-4", children: [_jsx("span", { "aria-hidden": true, className: "grid size-14 place-items-center rounded-full bg-primary text-lg font-semibold text-primary-foreground", children: draft.name
-                            .split(/\s+/)
-                            .map((w) => w.slice(0, 1))
-                            .join('')
-                            .slice(0, 2)
-                            .toUpperCase() }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('profile.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('profile.signedInAs', { login: draft.login }) })] })] }), _jsxs("form", { className: "grid gap-6", onSubmit: (e) => {
+    return (_jsxs("div", { className: "mx-auto grid max-w-3xl gap-6", children: [_jsxs("header", { className: "grid gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-semibold", children: t('profile.title') }), _jsx("p", { className: "text-sm text-muted-foreground", children: t('profile.signedInAs', { login: draft.login }) })] }), _jsxs("section", { "aria-label": t('profile.photo'), className: "rounded-lg border bg-surface p-5", children: [_jsx(ImagePicker, { name: draft.name, src: imageUrl('user', me.data.id, me.data.avatar), fit: "photo", busy: photo.isPending, onChoose: (image) => photo.mutate(image), onRemove: () => photo.mutate(null) }), photo.error === null ? null : (_jsx("div", { className: "mt-3", children: _jsx(Alert, { tone: "danger", children: message(photo.error) }) }))] })] }), _jsxs("form", { className: "grid gap-6", onSubmit: (e) => {
                     e.preventDefault();
                     save.mutate({
                         name: draft.name,

package/dist/settings/web/index.d.ts

@@ -11,6 +11,7 @@ export { AppsPage } from './AppsPage.js';
 export { AuditPage } from './AuditPage.js';
 export { CompaniesPage } from './CompaniesPage.js';
 export { CompanyPage } from './CompanyPage.js';
+export { ConnectedAppsPage } from './ConnectedAppsPage.js';
 export { OverviewPage } from './OverviewPage.js';
 export { PeoplePage } from './PeoplePage.js';
 export { deviceOf, ProfilePage } from './ProfilePage.js';

package/dist/settings/web/index.js

@@ -9,6 +9,7 @@ import { AppsPage } from './AppsPage.js';
 import { AuditPage } from './AuditPage.js';
 import { CompaniesPage } from './CompaniesPage.js';
 import { CompanyPage } from './CompanyPage.js';
+import { ConnectedAppsPage } from './ConnectedAppsPage.js';
 import { messages } from './messages.js';
 import { OverviewPage } from './OverviewPage.js';
 import { PeoplePage } from './PeoplePage.js';
@@ -20,6 +21,7 @@ export { AppsPage } from './AppsPage.js';
 export { AuditPage } from './AuditPage.js';
 export { CompaniesPage } from './CompaniesPage.js';
 export { CompanyPage } from './CompanyPage.js';
+export { ConnectedAppsPage } from './ConnectedAppsPage.js';
 export { OverviewPage } from './OverviewPage.js';
 export { PeoplePage } from './PeoplePage.js';
 export { deviceOf, ProfilePage } from './ProfilePage.js';
@@ -39,6 +41,9 @@ export function registerSettingsWeb(registry, i18n) {
     // Every signed-in user's own profile (RFC 0019) and keys (RFC 0017 §5.1): in the user menu, not in Settings.
     registry.registerUserPage('settings.Profile', ProfilePage, { label: 'settings:profile.title' });
     registry.registerUserPage('settings.ApiKeys', ApiKeysPage, { label: 'settings:apiKeys.title' });
+    registry.registerUserPage('settings.ConnectedApps', ConnectedAppsPage, {
+        label: 'settings:connected.title',
+    });
     if (i18n !== undefined)
         addMessages(i18n, 'settings', messages);
     return registry;