create-astram-app 0.11.1 → 0.12.0

package/template/frontend/src/pages/Login.jsx

@@ -4,11 +4,26 @@
  * /dashboard. An account with MFA enrolled runs a second step: login returns a
  * challengeToken and we prompt for the 6-digit TOTP code, then complete via
  * useAuth().completeMfa() to establish the session exactly as a plain login would.
+ *
+ * Sign-in options (R13.2, R7.6): on mount the page reads `GET /auth/login-options`. The name
+ * field's label follows `signInWith` ("Email" until known). With CAPTCHA on, the widget shows in
+ * `always` mode or once a failed attempt answers `captchaRequired`; its token goes with the next
+ * attempt and the widget is reset after every attempt (single use). A provider mismatch between
+ * the server and this build shows a fixed notice and loads no widget (signInOptions.js).
  */
 import { useRef, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { AlertCircle, ArrowLeft, Eye, EyeOff, Loader2, LogIn, ShieldCheck } from 'lucide-react';
 import { useAuth } from '@/auth/AuthContext';
+import CaptchaWidget from '@/auth/CaptchaWidget';
+import { useSignInOptions } from '@/auth/useSignInOptions';
+import {
+  CAPTCHA_ACTIONS,
+  MISCONFIGURED_NOTICE,
+  captchaOpts,
+  captchaVisible,
+  signInLabel,
+} from '@/auth/signInOptions';
 import { loadReturnPath, clearReturnPath } from '@/platform/returnPathStore';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -19,7 +34,13 @@ import ThemeToggle from '@/theme/ThemeToggle';
 import { branding } from '@/config/branding';
 
 export default function Login() {
-  const { login, completeMfa } = useAuth();
+  const { login, completeMfa, auth } = useAuth();
+  const signIn = useSignInOptions(auth);
+  const nameLabel = signInLabel(signIn.signInWith);
+  // Sticky for this page: once the server asks for a CAPTCHA, every later attempt sends one.
+  const [captchaRequired, setCaptchaRequired] = useState(false);
+  const showCaptcha = captchaVisible(signIn.captcha, captchaRequired);
+  const captchaRef = useRef(null);
   const navigate = useNavigate();
   const location = useLocation();
   // Where to land after a successful login: the router's in-memory `from` (set when
@@ -64,12 +85,23 @@ export default function Login() {
     setError('');
     if (busy) return;
     if (!identityHint.trim() || !password) {
-      setError('Enter your username and password.');
+      setError(`Enter your ${nameLabel.toLowerCase()} and password.`);
       return;
     }
     setBusy(true);
-    const r = await login(identityHint.trim(), password);
+    let token = '';
+    if (showCaptcha) {
+      token = (await captchaRef.current?.getToken()) ?? '';
+      if (!token) {
+        setBusy(false);
+        setError('Complete the verification check, then sign in.');
+        return;
+      }
+    }
+    const r = await login(identityHint.trim(), password, captchaOpts(token));
     setBusy(false);
+    if (showCaptcha) captchaRef.current?.reset(); // the token is spent either way
+    if (r.ok === false && r.captchaRequired) setCaptchaRequired(true);
     if (r.ok === true) goAfterLogin(from);
     else if (r.ok === 'mfa') {
       // MFA enrolled: hold the challenge and move to the code step. The password is
@@ -201,6 +233,16 @@ export default function Login() {
             )}
           </div>
 
+          {step === 'credentials' && signIn.captcha.status === 'misconfigured' && (
+            <div
+              role="alert"
+              className="mb-4 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-sm text-destructive"
+            >
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
+              <span>{MISCONFIGURED_NOTICE}</span>
+            </div>
+          )}
+
           {error && (
             <div className="mb-4 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-sm text-destructive">
               <AlertCircle className="mt-0.5 size-4 shrink-0" />
@@ -316,7 +358,7 @@ export default function Login() {
                   htmlFor="identityHint"
                   className="block text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
                 >
-                  Email or username
+                  {nameLabel}
                 </label>
                 <Input
                   id="identityHint"
@@ -359,6 +401,14 @@ export default function Login() {
                 </div>
               </div>
 
+              {showCaptcha && (
+                <CaptchaWidget
+                  ref={captchaRef}
+                  setup={signIn.captcha}
+                  action={CAPTCHA_ACTIONS.login}
+                />
+              )}
+
               {/* Remember me + Forgot password, inline below the password. */}
               <div className="flex items-center justify-between pt-0.5">
                 <label

package/template/frontend/src/pages/ResetPassword.jsx

@@ -6,12 +6,25 @@
  * /login (the reset revokes ALL sessions server-side, so the user re-signs-in with the
  * new password). On 400 → an "invalid or expired link" message with a way back to
  * request a fresh link.
+ *
+ * Both password fields have a show/hide toggle (R13.5, AC-22). CAPTCHA (R7.6): the widget shows
+ * in `always` mode, or once an attempt answers `captchaRequired` (that 400 is not a dead link);
+ * its token goes with the next attempt and the widget is reset after every attempt.
  */
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
-import { AlertCircle, ArrowLeft, KeyRound, Loader2 } from 'lucide-react';
+import { AlertCircle, ArrowLeft, Eye, EyeOff, KeyRound, Loader2 } from 'lucide-react';
 import { useAuth } from '@/auth/AuthContext';
+import CaptchaWidget from '@/auth/CaptchaWidget';
+import { useSignInOptions } from '@/auth/useSignInOptions';
+import { passwordVisibility } from '@/auth/passwordVisibility';
+import {
+  CAPTCHA_ACTIONS,
+  MISCONFIGURED_NOTICE,
+  captchaOpts,
+  captchaVisible,
+} from '@/auth/signInOptions';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -22,6 +35,34 @@ import { resetWording } from '@/auth/resetWording';
 
 const MIN_PASSWORD_LEN = 8;
 
+/** A password input with the show/hide toggle (same style and labels as the login page). */
+function PasswordInput({ id, value, onChange, autoFocus }) {
+  const [shown, setShown] = useState(false);
+  const { type, toggleLabel } = passwordVisibility(shown);
+  return (
+    <div className="relative">
+      <Input
+        id={id}
+        type={type}
+        autoComplete="new-password"
+        autoFocus={autoFocus}
+        value={value}
+        onChange={onChange}
+        placeholder="••••••••"
+        className="pr-10"
+      />
+      <button
+        type="button"
+        onClick={() => setShown((s) => !s)}
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground"
+        aria-label={toggleLabel}
+      >
+        {shown ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+      </button>
+    </div>
+  );
+}
+
 export default function ResetPassword() {
   const { auth } = useAuth();
   const navigate = useNavigate();
@@ -36,6 +77,10 @@ export default function ResetPassword() {
   // When true, the link itself is invalid/expired (400) → offer a fresh request.
   const [linkDead, setLinkDead] = useState(false);
   const [busy, setBusy] = useState(false);
+  const signIn = useSignInOptions(auth);
+  const [captchaRequired, setCaptchaRequired] = useState(false);
+  const showCaptcha = captchaVisible(signIn.captcha, captchaRequired);
+  const captchaRef = useRef(null);
 
   const onSubmit = async (e) => {
     e.preventDefault();
@@ -58,14 +103,30 @@ export default function ResetPassword() {
     }
 
     setBusy(true);
-    const r = await auth.resetPassword(token, next);
+    let captchaToken = '';
+    if (showCaptcha) {
+      captchaToken = (await captchaRef.current?.getToken()) ?? '';
+      if (!captchaToken) {
+        setBusy(false);
+        setError('Complete the verification check, then try again.');
+        return;
+      }
+    }
+    const r = await auth.resetPassword(token, next, captchaOpts(captchaToken));
     setBusy(false);
+    if (showCaptcha) captchaRef.current?.reset(); // single-use token
 
     if (r.ok) {
       toast.success(words.success);
       navigate('/login', { replace: true });
       return;
     }
+    // A 400 asking for a CAPTCHA is not a dead link: show the widget and let the user retry.
+    if (r.captchaRequired) {
+      setCaptchaRequired(true);
+      setError('Complete the verification check, then try again.');
+      return;
+    }
     // 400 → the link is invalid/expired; surface a path to request a new one.
     if (r.status === 400) setLinkDead(true);
     setError(r.error);
@@ -97,6 +158,16 @@ export default function ResetPassword() {
             </div>
           </div>
 
+          {!linkDead && signIn.captcha.status === 'misconfigured' && (
+            <div
+              role="alert"
+              className="mb-4 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-sm text-destructive"
+            >
+              <AlertCircle className="mt-0.5 size-4 shrink-0" />
+              <span>{MISCONFIGURED_NOTICE}</span>
+            </div>
+          )}
+
           {error && (
             <div className="mb-4 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2.5 text-sm text-destructive">
               <AlertCircle className="mt-0.5 size-4 shrink-0" />
@@ -121,27 +192,28 @@ export default function ResetPassword() {
             <form onSubmit={onSubmit} className="space-y-4" noValidate>
               <div className="space-y-1.5">
                 <Label htmlFor="rp-new">New password</Label>
-                <Input
+                <PasswordInput
                   id="rp-new"
-                  type="password"
-                  autoComplete="new-password"
                   autoFocus
                   value={next}
                   onChange={(e) => setNext(e.target.value)}
-                  placeholder="••••••••"
                 />
               </div>
               <div className="space-y-1.5">
                 <Label htmlFor="rp-confirm">Confirm new password</Label>
-                <Input
+                <PasswordInput
                   id="rp-confirm"
-                  type="password"
-                  autoComplete="new-password"
                   value={confirm}
                   onChange={(e) => setConfirm(e.target.value)}
-                  placeholder="••••••••"
                 />
               </div>
+              {showCaptcha && (
+                <CaptchaWidget
+                  ref={captchaRef}
+                  setup={signIn.captcha}
+                  action={CAPTCHA_ACTIONS.reset}
+                />
+              )}
               <Button type="submit" disabled={busy} className="w-full">
                 {busy ? (
                   <Loader2 className="size-4 animate-spin" />

package/template/frontend/src/pages/account/ReenrollPage.jsx

@@ -9,27 +9,35 @@
  * adds the framing + the "you're done" transition.
  *
  * When a device confirm succeeds, the server clears the gate on the SAME token (§4.3) —
- * the next request is unrestricted. We clear the local re-enroll flag at that moment
- * (so the user is no longer bounced) while keeping them on-screen to save any one-time
+ * the next request is unrestricted. The auth facts and profile are then refetched and the
+ * local re-enroll flag cleared (useAuth().deviceConfirmed, so the user is no longer bounced and
+ * lands on a loaded app) while keeping them on-screen to save any one-time
  * recovery codes, then offer an explicit "Continue" back into the app.
+ *
+ * The same screen serves a session restricted by a 2FA policy (R2.3, 403
+ * `mfa_enrollment_required`): only the framing differs, per `restrictionReason`
+ * (reenrollWording.js).
  */
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ArrowRight, LogOut, ShieldAlert, ShieldCheck } from 'lucide-react';
 import { useAuth } from '@/auth/AuthContext';
+import { reenrollWording } from '@/auth/reenrollWording';
 import { Button } from '@/components/ui/button';
 import TwoFactorPage from './TwoFactorPage';
 
 export default function ReenrollPage() {
-  const { clearReenroll, logout } = useAuth();
+  const { logout, restrictionReason } = useAuth();
+  // Captured at mount: clearing the restriction on success must not swap the wording.
+  const [words] = useState(() => reenrollWording(restrictionReason));
   const navigate = useNavigate();
   const [secured, setSecured] = useState(false);
 
-  // A device confirm succeeded → the server has already lifted the restriction on this
-  // token; release the UI gate so the user can leave once they've saved their codes.
+  // A device confirm succeeded: TwoFactorPage has already refetched the auth facts and the
+  // profile and lifted the UI gate (useAuth().deviceConfirmed), so the user can leave once
+  // they've saved their codes.
   const onDeviceConfirmed = () => {
     setSecured(true);
-    clearReenroll();
   };
 
   const onSignOut = async () => {
@@ -55,18 +63,16 @@ export default function ReenrollPage() {
           )}
           <div className="min-w-0">
             <p className="text-sm font-semibold text-foreground">
-              {secured ? 'Your account is secured again' : 'Finish securing your account'}
+              {secured ? words.securedTitle : words.title}
             </p>
             <p className="mt-0.5 text-sm text-muted-foreground">
-              {secured
-                ? 'A new authenticator device is active. Save any recovery codes shown below, then continue.'
-                : 'You signed in with a recovery code. Add a new authenticator device below to re-secure your account — the rest of the app stays locked until you do.'}
+              {secured ? words.securedBody : words.body}
             </p>
           </div>
         </div>
 
         {/* The re-enroll work — the exact device-add + regenerate-codes flow from the
-            account 2FA page, reused as-is. onDeviceConfirmed lifts the gate on success.
+            account 2FA page, reused as-is; it lifts the gate on success, then calls onDeviceConfirmed.
             reenrollMode hides Rename/Remove on existing devices (those routes aren't on
             the server's re-enroll allowlist → they'd only 403 here). */}
         <TwoFactorPage onDeviceConfirmed={onDeviceConfirmed} reenrollMode />

package/template/frontend/src/pages/account/TwoFactorPage.jsx

@@ -270,15 +270,16 @@ function DeviceRow({ device, onRename, onRemove, disabled, reenrollMode = false
 /**
  * @param {object} props
  * @param {(() => void)} [props.onDeviceConfirmed]  Called after a device confirm
- *   succeeds. Undefined in the normal account context; the forced-re-enroll screen
- *   passes it to clear the re-enroll gate + leave the screen once a device is added.
+ *   succeeds, once the auth facts and profile are refetched and the restriction lifted
+ *   (useAuth().deviceConfirmed). Undefined in the normal account context; the
+ *   forced-re-enroll screen passes it to switch to its "secured" framing.
  * @param {boolean} [props.reenrollMode]  When true (the forced-re-enroll screen),
  *   hides Rename/Remove on existing devices — those routes aren't on the server's
  *   re-enroll allowlist, so offering them would only 403. Add-device + regenerate
  *   (both allowlisted) stay usable. Normal /account/2fa omits this → actions shown.
  */
 export default function TwoFactorPage({ onDeviceConfirmed, reenrollMode = false } = {}) {
-  const { tokens, account } = useAuth();
+  const { tokens, account, deviceConfirmed } = useAuth();
   const token = tokens?.accessToken;
 
   // List state.
@@ -476,9 +477,11 @@ export default function TwoFactorPage({ onDeviceConfirmed, reenrollMode = false
       setRecoveryCodes(codes);
       setShowRecovery(true);
     }
-    // In the forced-re-enroll flow, a successful device confirm is what re-secures the
-    // account — the server has cleared the gate, so release the UI. Deferred so any
-    // one-time recovery-codes panel is shown first (the parent decides when to leave).
+    // The server has lifted any restriction and grace deadline on this token: refetch the auth
+    // facts and the profile, then lift the local restriction (sessionFlow.js
+    // afterDeviceConfirmed), so the nav, gated pages and grace banner are current. Runs after
+    // the one-time recovery-codes panel is shown; the parent decides when to leave.
+    await deviceConfirmed();
     onDeviceConfirmed?.();
   };
 

package/template/frontend/src/pages/audit/AuditPage.jsx

@@ -12,8 +12,8 @@
  * instead (no new reusable component — same primitives EntityList itself imports).
  *
  * ⛔ No raw UUIDs: rows carry NONE (the backend already strips ids — `AuditReadService`
- * server-side). Only `actorLabel` / `tenantLabel` / `action` / `occurredAt` / `detail` are
- * ever rendered.
+ * server-side). Only `actorLabel` / `actorKind` (as a badge, `actorKind.js`) / `tenantLabel` /
+ * `action` / `occurredAt` / `detail` are ever rendered.
  *
  * Tenant column: audit rows always carry a `tenantLabel` (the server auto-scopes a non-
  * root to their own tenant already), but the column is only USEFUL for a
@@ -37,6 +37,7 @@ import EntityList from '@/components/EntityList';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { actorKindBadge } from './actorKind';
 
 /** Readable absolute date-time — e.g. "13 Jul 2026, 4:05 PM"; '—' when missing/invalid. */
 function formatDateTime(ms) {
@@ -167,7 +168,20 @@ export default function AuditPage() {
       {
         key: 'actorLabel',
         label: 'Actor',
-        render: (row) => <span className="text-sm text-foreground">{row.actorLabel || '—'}</span>,
+        render: (row) => {
+          // KI #140: an operation or a service account is badged so it never reads as a person.
+          const badge = actorKindBadge(row.actorKind);
+          return (
+            <span className="inline-flex items-center gap-1.5 text-sm text-foreground">
+              {row.actorLabel || '—'}
+              {badge ? (
+                <Badge variant="outline" className="font-normal text-xs">
+                  {badge}
+                </Badge>
+              ) : null}
+            </span>
+          );
+        },
       },
       {
         key: 'action',

package/template/frontend/src/pages/audit/actorKind.js

@@ -0,0 +1,17 @@
+// actorKind.js — the Audit page's actor badge (KI #140). Pure logic, tested by actorKind.test.mjs;
+// AuditPage renders from it. The server sends `actorKind` with every row ('user', 'service_account',
+// 'operation', 'unknown'); an older server sends none, which reads as a user.
+
+const BADGES = Object.freeze({
+  operation: 'System',
+  service_account: 'Service account',
+});
+
+/**
+ * The badge text for a row's `actorKind`, or null for users, unknown actors and missing kinds.
+ * @param {string | null | undefined} kind
+ * @returns {string | null}
+ */
+export function actorKindBadge(kind) {
+  return typeof kind === 'string' && Object.hasOwn(BADGES, kind) ? BADGES[kind] : null;
+}

package/template/frontend/src/pages/audit/actorKind.test.mjs

@@ -0,0 +1,23 @@
+// actorKind.test.mjs — KI #140: the Audit page badges actors that are not users (an org bootstrap or
+// audit-prune operation, a service account) so they never read as a person; users get no badge.
+//
+//   node --test src/pages/audit/actorKind.test.mjs
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { actorKindBadge } from './actorKind.js';
+
+describe('actorKindBadge', () => {
+  test('a framework operation is badged "System"', () => {
+    assert.equal(actorKindBadge('operation'), 'System');
+  });
+
+  test('a service account is badged "Service account"', () => {
+    assert.equal(actorKindBadge('service_account'), 'Service account');
+  });
+
+  test('users, unknown actors and older servers (no actorKind) get no badge', () => {
+    for (const kind of ['user', 'unknown', undefined, null, '', 'OPERATION', 'other']) {
+      assert.equal(actorKindBadge(kind), null);
+    }
+  });
+});

package/template/frontend/src/pages/companies/CompaniesPage.jsx

@@ -12,17 +12,30 @@
  *
  * ⛔ No raw UUIDs: columns render `fields.name` / `fields.status`; the row uuid (`row.id`)
  * is used only as a key and for routing to the edit page.
+ *
+ * "Move under…" (G-011) re-parents a company through `identity.moveCompany`; it shows only to
+ * callers holding identity:company:update (`moveAction.js`; UX only, the server decides).
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Outlet, useNavigate, useSearchParams } from 'react-router-dom';
-import { Building2 } from 'lucide-react';
+import { Building2, FolderTree } from 'lucide-react';
 import { toast } from 'sonner';
-import { useAuth } from '@/auth/AuthContext';
+import { useAuth, useCan } from '@/auth/AuthContext';
 import AppShell from '@/shell/AppShell';
 import PageHeader from '@/components/PageHeader';
 import EntityList, { EntityListControls, EntityListPager } from '@/components/EntityList';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { MOVE_PERMISSION, canMove, moveOutcome, parentOptions, parentUuidOf } from './moveAction';
 
 /** Compact absolute date — e.g. "13 Jul 2026"; '—' when missing/invalid. */
 function formatDate(v) {
@@ -70,6 +83,28 @@ const COLUMNS = [
   },
 ];
 
+/** The row action column: "Move under…" for callers holding the update key (G-011). */
+function moveColumn(holdsUpdate, onMove) {
+  return {
+    key: 'move',
+    label: 'Parent',
+    sortable: false,
+    render: (row) =>
+      canMove(row, holdsUpdate) ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => onMove(row)}
+          aria-label={`Move ${row.fields?.name || 'this company'} under another company`}
+        >
+          <FolderTree className="size-4" />
+          Move under…
+        </Button>
+      ) : null,
+  };
+}
+
 const DEFAULT_LIMIT = 25;
 
 /**
@@ -118,6 +153,12 @@ export default function CompaniesPage() {
     setSearchParams(p, { replace: true });
   }, [query, setSearchParams]);
 
+  // Move dialog state (G-011): the company being moved and the chosen parent option.
+  const holdsUpdate = useCan(MOVE_PERMISSION);
+  const [moveTarget, setMoveTarget] = useState(null);
+  const [moveParent, setMoveParent] = useState('');
+  const [moveBusy, setMoveBusy] = useState(false);
+
   // Delete confirm state (ConfirmDialog — the API fires ONLY from onConfirm).
   const [deleteTarget, setDeleteTarget] = useState(null);
   const [deleteBusy, setDeleteBusy] = useState(false);
@@ -151,6 +192,39 @@ export default function CompaniesPage() {
   const onPageChange = useCallback((page) => setQuery((q) => ({ ...q, page })), []);
   const onLimitChange = useCallback((limit) => setQuery((q) => ({ ...q, limit, page: 1 })), []);
 
+  const onMove = useCallback((row) => {
+    setMoveTarget(row);
+    setMoveParent('');
+  }, []);
+  const columns = useMemo(
+    () => [...COLUMNS, moveColumn(holdsUpdate, onMove)],
+    [holdsUpdate, onMove],
+  );
+  const moveOptions = useMemo(
+    () => (moveTarget ? parentOptions(rows, moveTarget.id) : []),
+    [rows, moveTarget],
+  );
+
+  const onConfirmMove = async () => {
+    if (!moveTarget) return;
+    if (!moveParent) {
+      toast.error('Choose the company to move it under.');
+      return;
+    }
+    setMoveBusy(true);
+    const outcome = moveOutcome(
+      await identity.moveCompany(token, moveTarget.id, parentUuidOf(moveParent)),
+    );
+    setMoveBusy(false);
+    if (outcome.kind === 'error') {
+      toast.error(outcome.text);
+      return;
+    }
+    setMoveTarget(null);
+    toast.success(outcome.text);
+    await load();
+  };
+
   const onConfirmDelete = async () => {
     if (!deleteTarget) return;
     setDeleteBusy(true);
@@ -184,7 +258,7 @@ export default function CompaniesPage() {
         />
 
         <EntityList
-          columns={COLUMNS}
+          columns={columns}
           rows={rows}
           search={query.search}
           sortBy={query.sortBy}
@@ -211,6 +285,32 @@ export default function CompaniesPage() {
       {/* Add / Edit render here as a routed overlay; onRefresh re-fetches the list. */}
       <Outlet context={{ onRefresh: load }} />
 
+      <ConfirmDialog
+        open={!!moveTarget}
+        title={moveTarget ? `Move “${moveTarget.fields?.name || 'this company'}”` : 'Move company'}
+        message="Choose the company it moves under. Its own companies move with it."
+        confirmLabel="Move"
+        busy={moveBusy}
+        onConfirm={onConfirmMove}
+        onCancel={() => setMoveTarget(null)}
+      >
+        <div className="grid gap-2">
+          <Label htmlFor="move-parent">New parent</Label>
+          <Select value={moveParent} onValueChange={setMoveParent}>
+            <SelectTrigger id="move-parent" className="w-full">
+              <SelectValue placeholder="Select a company" />
+            </SelectTrigger>
+            <SelectContent>
+              {moveOptions.map((o) => (
+                <SelectItem key={o.value} value={o.value}>
+                  {o.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </ConfirmDialog>
+
       <ConfirmDialog
         open={!!deleteTarget}
         title={

package/template/frontend/src/pages/companies/moveAction.js

@@ -0,0 +1,61 @@
+// moveAction.js — the Companies page's "Move under…" action (G-011). Pure logic, tested by
+// moveAction.test.mjs; CompaniesPage renders from it. Showing or hiding the action is UX only: the
+// server decides (`PUT /identity/companies/:uuid/parent` needs identity:company:update, both
+// companies inside the caller's subtree, and no cycle).
+
+/** The permission key the move route is gated on. */
+export const MOVE_PERMISSION = 'identity:company:update';
+
+/** The select value standing for "no parent" (Radix Select refuses an empty value). */
+export const TOP_LEVEL = '__top_level__';
+
+/** The label of the "no parent" option: only a platform admin (root) may move a company there. */
+export const TOP_LEVEL_LABEL = 'Top level (platform admins only)';
+
+/**
+ * Show "Move under…" for this row? Only when the caller holds {@link MOVE_PERMISSION}.
+ * @param {{ id?: string } | null | undefined} row
+ * @param {boolean} holdsUpdate
+ */
+export function canMove(row, holdsUpdate) {
+  return Boolean(holdsUpdate && row && row.id);
+}
+
+/**
+ * The parents offered for `movingUuid`: "Top level" first, then every visible company except the
+ * one being moved, by name. The frontend cannot tell a root caller (`/auth/me` carries no root
+ * flag), so "Top level" is always offered and labelled for platform admins; the server refuses it
+ * for anyone else, and refuses a cycle or an out-of-reach parent. Labels are names, never ids.
+ * @param {Array<{ id: string, fields?: { name?: string } }>} rows
+ * @param {string} movingUuid
+ * @returns {Array<{ value: string, label: string }>}
+ */
+export function parentOptions(rows, movingUuid) {
+  const out = (rows || [])
+    .filter((r) => r && r.id && r.id !== movingUuid)
+    .map((r) => ({ value: r.id, label: r.fields?.name || '(unnamed)' }))
+    .sort((a, b) => a.label.localeCompare(b.label));
+  out.unshift({ value: TOP_LEVEL, label: TOP_LEVEL_LABEL });
+  return out;
+}
+
+/**
+ * The `parentUuid` to send for a selected option value (`null` for "Top level").
+ * @param {string} value
+ * @returns {string | null}
+ */
+export function parentUuidOf(value) {
+  return value === TOP_LEVEL ? null : value;
+}
+
+/**
+ * The toast for an `identity.moveCompany` result.
+ * @param {{ ok: boolean, error?: string }} result
+ * @returns {{ kind: 'success' | 'error', text: string }}
+ */
+export function moveOutcome(result) {
+  if (!result || !result.ok) {
+    return { kind: 'error', text: (result && result.error) || 'Could not move the company.' };
+  }
+  return { kind: 'success', text: 'Company moved' };
+}