cursedbelt 2.7.0 → 3.0.0

package/src/react/studios/GuardAccountPanels.tsx

@@ -1,705 +0,0 @@
-/**
- * The GuardEngine `account` surface (02 §5 / 03 §1e) — the screens for the
- * account routes that landed in 02 §2–§4 and had, until now, no UI at all.
- *
- * These are the ORPHANED auth kit (`react/components/auth/*`) finally fronting a
- * real login: `LoginForm` and `SignupForm` render the fields and own the
- * validation/error mapping; the only new code is the adapter that turns their
- * values into this app's wire calls (`accountClient`). Building a second set of
- * forms here would have been the "second security path" this arc exists to
- * remove — in the UI tier instead of the server tier.
- *
- * Presentation-pure, like every other studio panel: props in, callbacks out, no
- * fetch. `GuardEngineView` binds them.
- *
- * The rules the panels encode, none of which are cosmetic:
- *
- *   * **The password lives exactly as long as the submit call.** It goes from the
- *     form's field into the callback and is never lifted into a parent's state,
- *     a ref or a cache. (A browser cannot zeroize a string — the SERVER reads it
- *     as bytes off the stream, 01 §3.4 — so "hold it for as short a time as
- *     possible" is the honest client-side rule.)
- *   * **The members panel does not exist below ADMIN.** Not disabled, not hidden
- *     — absent, the same omission law the DevStudio's `infra:write` surfaces
- *     follow (02 §4.4): a rendered control the session may not use is a UI that
- *     lies, and the server refuses it anyway.
- *   * **An invitation token is shown ONCE.** The server returns the raw token to
- *     the creating request and keeps only its hash, so this panel is the only
- *     place it will ever exist. It is rendered as copyable text with that fact
- *     stated, never silently dropped into a toast that scrolls away.
- */
-import { type FormEvent, useEffect, useMemo, useState } from 'react';
-import { z } from 'zod';
-import { useForm } from 'react-hook-form';
-import type { SignupMode } from '../../config/appConfig';
-import type { GuardSiteCopyState, SiteCopyAdminEntry } from './types';
-import { AutoGrowTextarea } from '../components/AutoGrowTextarea';
-import { type CCRole, CC_ROLES, CC_ROLE_RANK } from '../../core/session/claims';
-import type { AuditEntryView } from '../../server/mixins/services';
-import type { AccountMember, AccountSession } from '../data/accountClient';
-import { Alert } from '../components/Alert';
-import { Button } from '../components/Button';
-import { CopyableText } from '../components/CopyableText';
-import { EmptyState } from '../components/EmptyState';
-import { Input } from '../components/Input';
-import { ScrollArea } from '../components/ScrollArea';
-import { SelectField } from '../components/SelectField';
-import { AuthCard } from '../components/auth/AuthCard';
-import { AuthForm } from '../components/auth/AuthForm';
-import { AuthPasswordField } from '../components/auth/fields';
-import { LoginForm } from '../components/auth/LoginForm';
-import { PasswordSetFields } from '../components/auth/PasswordSetFields';
-import { SignupForm } from '../components/auth/SignupForm';
-import { makeFormConfig } from '../lib/form';
-import { cn } from '../lib/cn';
-
-/* --------------------------------------------------------------- sign in */
-
-export interface AccountSignInPanelProps {
-  /** Verify a password and adopt the minted session. Throws to show an error. */
-  onSignIn(input: { email: string; password: string }): Promise<unknown>;
-  /** Create an account (optionally on an invitation) and sign in. */
-  onSignUp(input: { email: string; password: string; inviteToken?: string }): Promise<unknown>;
-  /** Prefill an invitation token — e.g. from an `?invite=` link. */
-  inviteToken?: string;
-  /** Whether the signup half is offered at all (a closed tenant hides it). */
-  allowSignup?: boolean;
-  /**
-   * The launch gate (D33). `invite` offers signup ONLY to a caller arriving
-   * with an invitation token — everyone else sees the coming-soon notice;
-   * `closed` never offers it. Wins over `allowSignup` when both are given
-   * (`allowSignup: false` is the pre-D33 spelling of `closed`).
-   */
-  signupMode?: SignupMode;
-  /** Rendered as the card's title. */
-  title?: string;
-  /**
-   * Render as the dark-aurora full-screen FRONT DOOR (see {@link AuthCard}'s
-   * `aurora`) rather than an embedded studio panel. On when this is the app's
-   * logged-out door ({@link CCSessionGate}); OFF when it's the `/account` tab
-   * inside the shell, where full-screen + a dark canvas would fight the chrome.
-   */
-  aurora?: boolean;
-}
-
-/**
- * The sign-in surface: the landed `LoginForm`/`SignupForm` bound to the real
- * `/api/guard/{login,accounts}` routes. `AuthCard` is NOT full-screen here — it
- * renders inside a studio view, not as the app's front door.
- */
-export function AccountSignInPanel({
-  onSignIn,
-  onSignUp,
-  inviteToken,
-  allowSignup = true,
-  signupMode,
-  title = 'Sign in',
-  aurora = false,
-}: AccountSignInPanelProps) {
-  // The server refuses what the gate closes (`refuseGatedSignup`); this only
-  // decides what to OFFER, so a stale client can never open a closed door.
-  const gate: SignupMode = signupMode ?? (allowSignup ? 'open' : 'closed');
-  const signupOffered = gate === 'open' || (gate === 'invite' && inviteToken !== undefined);
-  // An invitation is an instruction to create an account, so a link that carries
-  // one opens on the signup half rather than making the invitee find the tab.
-  const [mode, setMode] = useState<'sign-in' | 'sign-up'>(signupOffered && inviteToken ? 'sign-up' : 'sign-in');
-  const [invite, setInvite] = useState(inviteToken ?? '');
-
-  const crossLink = (
-    <Button
-      variant='ghost'
-      size='sm'
-      data-cc-auth-switch={mode === 'sign-in' ? 'sign-up' : 'sign-in'}
-      tooltip={mode === 'sign-in' ? 'Create a new account instead' : 'Sign in with an existing account'}
-      onClick={() => setMode(mode === 'sign-in' ? 'sign-up' : 'sign-in')}
-    >
-      {mode === 'sign-in' ? 'Create an account' : 'I already have an account'}
-    </Button>
-  );
-
-  return (
-    <AuthCard
-      title={title}
-      fullScreen={aurora}
-      aurora={aurora}
-      subtitle={mode === 'sign-in' ? 'Sign in to your account.' : undefined}
-      className={aurora ? undefined : 'p-0'}
-    >
-      {/*
-        `autoFocus={false}` on both halves, and it is not a style preference.
-        This panel is a TAB inside a studio shell, not a full-page sign-in: an
-        autofocused field steals focus from the surface's own tab list, and —
-        because validation is on-blur — the first click on anything below it
-        raises a "This field is required" the user never earned AND shifts that
-        control 60px down between mousedown and mouseup, so the click lands on
-        nothing. The browser reachability gate caught exactly that on this
-        surface: the first click on "Create an account" did nothing at all.
-      */}
-      <div data-cc-auth={mode}>
-        {mode === 'sign-in' || !signupOffered ? (
-          <LoginForm
-            autoFocus={false}
-            onSubmit={({ email, password }) => onSignIn({ email, password })}
-            footer={
-              signupOffered ? (
-                crossLink
-              ) : gate === 'invite' ? (
-                // The launch posture (D33): the door reads as "not yet", and an
-                // invitee's own link is what opens it — never a form that would
-                // collect a password only to be 403'd by the server's gate.
-                <p data-cc-signup-closed='invite' className='text-sm text-muted-foreground'>
-                  New sign-ups are coming soon. Have an invitation? Open your invite link to create your account.
-                </p>
-              ) : gate === 'closed' ? (
-                <p data-cc-signup-closed='closed' className='text-sm text-muted-foreground'>
-                  New sign-ups are coming soon.
-                </p>
-              ) : undefined
-            }
-          />
-        ) : (
-          <SignupForm
-            autoFocus={false}
-            onSubmit={({ email, password }) =>
-              onSignUp({ email, password, ...(invite.trim() ? { inviteToken: invite.trim() } : {}) })
-            }
-            footer={crossLink}
-            notice={
-              inviteToken ? 'You were invited — signing up joins the inviting workspace at the role it named.' : undefined
-            }
-          >
-            {/* Outside the RHF schema on purpose: the token is a bearer secret
-                pasted from a link, not a validated credential field. */}
-            <div className='flex flex-col gap-1.5 text-sm'>
-              <label htmlFor='cc-invite-token' className='text-foreground'>
-                Invitation token (optional)
-              </label>
-              <Input
-                id='cc-invite-token'
-                value={invite}
-                onChange={(event) => setInvite(event.target.value)}
-                aria-label='Invitation token'
-                autoComplete='off'
-                spellCheck={false}
-              />
-            </div>
-          </SignupForm>
-        )}
-      </div>
-    </AuthCard>
-  );
-}
-
-/* -------------------------------------------------------------- identity */
-
-export interface AccountIdentityPanelProps {
-  email?: string;
-  userId: string;
-  tenantId: string;
-  tenantTitle?: string;
-  role: CCRole;
-  permissions: readonly string[];
-  /** Self-change: the current password re-authenticates (a hijacked session cannot lock you out). */
-  onChangePassword(input: { current: string; next: string }): Promise<unknown>;
-  onSignOut?: () => void;
-  onSignOutEverywhere?: () => void;
-  signingOut?: boolean;
-}
-
-interface ChangePasswordValues {
-  current: string;
-  newPassword: string;
-  confirmPassword: string;
-}
-
-/** Who you are, and the two things you can do to your own account. */
-export function AccountIdentityPanel({
-  email,
-  userId,
-  tenantId,
-  tenantTitle,
-  role,
-  permissions,
-  onChangePassword,
-  onSignOut,
-  onSignOutEverywhere,
-  signingOut,
-}: AccountIdentityPanelProps) {
-  const [changed, setChanged] = useState(false);
-  const schema = useMemo(
-    () =>
-      z
-        .object({
-          current: z.string().min(1, 'Your current password is required'),
-          newPassword: z.string().min(8, 'Use at least 8 characters'),
-          confirmPassword: z.string(),
-        })
-        .refine((values) => values.newPassword === values.confirmPassword, {
-          path: ['confirmPassword'],
-          message: 'Passwords do not match',
-        }),
-    [],
-  );
-  const form = useForm<ChangePasswordValues>(
-    makeFormConfig(schema, { current: '', newPassword: '', confirmPassword: '' }),
-  );
-
-  return (
-    <div data-cc-account='identity' className='flex flex-col gap-4'>
-      <dl className='grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm'>
-        <dt className='text-muted-foreground'>Signed in as</dt>
-        <dd data-cc-account-email className='truncate text-foreground'>{email ?? userId}</dd>
-        <dt className='text-muted-foreground'>Workspace</dt>
-        <dd className='truncate text-foreground'>{tenantTitle ?? tenantId}</dd>
-        <dt className='text-muted-foreground'>Role</dt>
-        <dd data-cc-account-role className='text-foreground'>{role}</dd>
-        <dt className='text-muted-foreground'>Grants</dt>
-        <dd className='text-foreground'>{permissions.length > 0 ? permissions.join(', ') : 'read-only'}</dd>
-      </dl>
-
-      <div className='flex flex-wrap items-center gap-2'>
-        <Button variant='secondary' tooltip='End this device’s session' onClick={onSignOut} loading={signingOut}>
-          Sign out
-        </Button>
-        <Button
-          variant='ghost'
-          tooltip='End every session of this account, on every device'
-          onClick={onSignOutEverywhere}
-        >
-          Sign out everywhere
-        </Button>
-      </div>
-
-      <section className='flex max-w-sm flex-col gap-2 rounded-lg border border-border p-4'>
-        <h4 className='font-semibold text-foreground text-sm'>Change password</h4>
-        <AuthForm
-          form={form}
-          submitLabel='Update password'
-          onSubmit={async (values) => {
-            setChanged(false);
-            // The value goes straight into the call; nothing keeps a copy.
-            await onChangePassword({ current: values.current, next: values.newPassword });
-            form.reset({ current: '', newPassword: '', confirmPassword: '' });
-          }}
-          onSuccess={() => setChanged(true)}
-          notice={changed ? 'Password updated.' : undefined}
-        >
-          <AuthPasswordField name='current' label='Current password' autoComplete='current-password' />
-          <PasswordSetFields />
-        </AuthForm>
-      </section>
-    </div>
-  );
-}
-
-/* -------------------------------------------------------------- sessions */
-
-export interface AccountSessionsPanelProps {
-  sessions: readonly AccountSession[];
-  onEndSession?: (jti: string) => void;
-  endingJti?: string | null;
-}
-
-/** "Your devices" — every live session of this account (02 §4). */
-export function AccountSessionsPanel({ sessions, onEndSession, endingJti }: AccountSessionsPanelProps) {
-  if (sessions.length === 0)
-    return <EmptyState compact title='No other sessions' description='This account is signed in on this device only.' />;
-
-  return (
-    <ul data-cc-sessions='' className='flex flex-col gap-1'>
-      {sessions.map((session) => (
-        <li
-          key={session.jti}
-          data-cc-session={session.jti}
-          data-cc-session-current={session.current ? '' : undefined}
-          className='flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2'
-        >
-          <span className='flex min-w-0 flex-col'>
-            <span className='truncate text-foreground text-sm'>
-              {session.deviceLabel ?? 'Unknown device'}
-              {session.current ? ' · this device' : ''}
-            </span>
-            <span className='cb-meta-label text-muted-foreground'>
-              signed in {session.issuedAt} · expires {session.expiresAt}
-            </span>
-          </span>
-          {/* The current session ends through "Sign out", which also clears the
-              client's own copy — offering it twice invites a signed-in shell
-              holding a token the server has already closed. */}
-          {session.current ? null : (
-            <Button
-              variant='secondary'
-              size='sm'
-              tooltip={`End the session on ${session.deviceLabel ?? 'this device'}`}
-              loading={endingJti === session.jti}
-              onClick={() => onEndSession?.(session.jti)}
-            >
-              End
-            </Button>
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-/* --------------------------------------------------------------- members */
-
-export interface AccountMembersPanelProps {
-  members: readonly AccountMember[];
-  /** The acting session's role — caps every role option offered (02 §3). */
-  actorRole: CCRole;
-  actorUserId: string;
-  onInvite?: (input: { email: string; role: CCRole }) => void;
-  /** The token of the most recent invitation — shown ONCE, never re-fetchable. */
-  issuedInvitation?: { email: string; token: string; expiresAt: string } | null;
-  onChangeRole?: (userId: string, role: CCRole) => void;
-  onRemove?: (userId: string) => void;
-  busyUserId?: string | null;
-  inviting?: boolean;
-  className?: string;
-}
-
-/**
- * The members panel. Every control it offers is one the SERVER would also allow:
- * roles above the actor's own are not in the dropdown, and the actor's own row
- * carries no controls at all (`SELF_ADMIN_DENIED`). The server re-checks all of
- * it — this only avoids rendering a button whose sole outcome is a 403.
- */
-export function AccountMembersPanel({
-  members,
-  actorRole,
-  actorUserId,
-  onInvite,
-  issuedInvitation,
-  onChangeRole,
-  onRemove,
-  busyUserId,
-  inviting,
-  className,
-}: AccountMembersPanelProps) {
-  const [email, setEmail] = useState('');
-  const [role, setRole] = useState<CCRole>('MEMBER');
-
-  /** Roles the actor may hand out: never above their own rank (02 §3). */
-  const assignable = useMemo(
-    () => CC_ROLES.filter((candidate) => CC_ROLE_RANK[candidate] <= CC_ROLE_RANK[actorRole]),
-    [actorRole],
-  );
-  const options = useMemo(() => assignable.map((value) => ({ value, label: value })), [assignable]);
-
-  const invite = (event: FormEvent): void => {
-    event.preventDefault();
-    if (!email.trim()) return;
-    onInvite?.({ email: email.trim(), role });
-    setEmail('');
-  };
-
-  return (
-    <div data-cc-members='' className={cn('flex min-h-0 flex-col gap-3', className)}>
-      <form onSubmit={invite} className='flex flex-wrap items-end gap-2'>
-        <div className='flex min-w-48 flex-1 flex-col gap-1.5 text-sm'>
-          <label htmlFor='cc-invite-email' className='text-foreground'>
-            Invite by email
-          </label>
-          <Input
-            id='cc-invite-email'
-            type='email'
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-            aria-label='Invite email'
-            autoComplete='off'
-          />
-        </div>
-        <div className='flex w-36 flex-col gap-1.5 text-sm'>
-          <span className='text-foreground'>Role</span>
-          <SelectField
-            value={role}
-            onValueChange={(next) => setRole(next as CCRole)}
-            options={options}
-            emptyLabel='No roles you are allowed to assign'
-            aria-label='Invite role'
-          />
-        </div>
-        <Button type='submit' variant='primary' tooltip='Issue a single-use invitation' loading={inviting}>
-          Invite
-        </Button>
-      </form>
-
-      {issuedInvitation ? (
-        <Alert tone='info' title={`Invitation for ${issuedInvitation.email}`}>
-          <div className='flex flex-col gap-1'>
-            <span>
-              Send this token to them — it is shown once, expires {issuedInvitation.expiresAt}, and can be used a
-              single time.
-            </span>
-            <span data-cc-invite-token=''>
-              <CopyableText value={issuedInvitation.token} block />
-            </span>
-          </div>
-        </Alert>
-      ) : null}
-
-      <ScrollArea className='min-h-0 flex-1'>
-        <ul className='flex flex-col gap-1 pr-2'>
-          {members.map((member) => {
-            // The self row and any member who outranks the actor are read-only —
-            // both are refusals the server would issue anyway (02 §3).
-            const editable =
-              member.userId !== actorUserId && CC_ROLE_RANK[member.role] <= CC_ROLE_RANK[actorRole];
-            return (
-              <li
-                key={member.userId}
-                data-cc-member={member.userId}
-                className='flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2'
-              >
-                <span className='flex min-w-0 flex-col'>
-                  <span className='truncate text-foreground text-sm'>{member.email ?? member.userId}</span>
-                  <span className='cb-meta-label text-muted-foreground'>
-                    {member.status}
-                    {member.permissions.length > 0 ? ` · ${member.permissions.join(', ')}` : ''}
-                  </span>
-                </span>
-                {editable ? (
-                  <span className='flex items-center gap-2'>
-                    <SelectField
-                      emptyLabel='No roles you are allowed to assign'
-                      value={member.role}
-                      onValueChange={(next) => onChangeRole?.(member.userId, next as CCRole)}
-                      options={options}
-                      size='sm'
-                      aria-label={`Role for ${member.email ?? member.userId}`}
-                    />
-                    <Button
-                      variant='secondary'
-                      size='sm'
-                      tooltip={`Remove ${member.email ?? member.userId}`}
-                      loading={busyUserId === member.userId}
-                      onClick={() => onRemove?.(member.userId)}
-                    >
-                      Remove
-                    </Button>
-                  </span>
-                ) : (
-                  <span data-cc-member-role className='text-muted-foreground text-sm'>{member.role}</span>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </ScrollArea>
-    </div>
-  );
-}
-
-/* ---------------------------------------------------------------- activity */
-
-export interface AccountActivityPanelProps {
-  entries: readonly AuditEntryView[];
-  /** A reload is a fetch, not a CDC frame — the trail publishes none (see the resource). */
-  onRefresh?: () => void;
-  refreshing?: boolean;
-}
-
-/**
- * "Recent activity" — the audit trail's read side (05 §B2, owner decision D25).
- *
- * The trail has been written on every mutation since the previous landing and
- * could be read only from code, which is a compliance record nobody can
- * produce. This is the surface.
- *
- * Two rules it encodes:
- *
- *   * **It renders what the row SAYS, never a prettier guess.** `actor` is a
- *     user id (or `system`), not a name this panel resolves through another
- *     lookup — an audit view that renders a *current* display name for a past
- *     action is a record that changes after the fact. Same for `action`: the
- *     dotted op id is the thing an operator greps the server logs for.
- *   * **An empty trail says which of the two empties it is.** "Nothing has
- *     happened yet" and "nothing is being recorded" are different facts, and the
- *     route's own absence (a 404, not an empty list) is what distinguishes them
- *     — so this panel may honestly say the first.
- */
-export function AccountActivityPanel({ entries, onRefresh, refreshing }: AccountActivityPanelProps) {
-  if (entries.length === 0)
-    return (
-      <div className='flex flex-col items-start gap-2'>
-        <EmptyState
-          compact
-          title='No activity recorded yet'
-          description='Changes to this tenant’s data appear here as they happen.'
-        />
-        {onRefresh ? (
-          <Button variant='secondary' size='sm' tooltip='Re-read the audit trail' loading={refreshing} onClick={onRefresh}>
-            Refresh
-          </Button>
-        ) : null}
-      </div>
-    );
-
-  return (
-    <div className='flex flex-col gap-2'>
-      {onRefresh ? (
-        <div className='flex justify-end'>
-          <Button variant='secondary' size='sm' tooltip='Re-read the audit trail' loading={refreshing} onClick={onRefresh}>
-            Refresh
-          </Button>
-        </div>
-      ) : null}
-      <ul data-cc-audit-trail='' className='flex flex-col gap-1'>
-        {entries.map((entry) => (
-          <li
-            // The row id, because `at` is NOT unique: two entries of one
-            // transaction share a timestamp by design (the database stamps them
-            // at transaction start). That is exactly what the id exists to
-            // break, so the list keys on it rather than on a position.
-            key={entry.id ?? `${entry.at ?? ''}:${entry.action}:${entry.targetId ?? ''}`}
-            data-cc-audit-entry={entry.action}
-            className='flex items-center justify-between gap-3 rounded-md border border-border px-3 py-2'
-          >
-            <span className='flex min-w-0 flex-col'>
-              <span className='truncate text-foreground text-sm'>
-                <code>{entry.action}</code>
-                {entry.targetId ? ` · ${entry.targetId}` : ''}
-              </span>
-              <span className='cb-meta-label text-muted-foreground'>
-                {entry.actor} · {entry.at ?? 'unknown time'}
-                {entry.inTransaction ? ' · in a transaction' : ''}
-              </span>
-            </span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-/* -------------------------------------------------------------- site copy */
-
-/**
- * The marketing-copy editor (owner decision D36) — the "admin section where I
- * can edit them" from the owner's answer, rendered inside the account surface
- * for exactly one caller: the platform tenant's OWNER. Everyone else never
- * sees it (the bound view withholds the state — the same omission law as the
- * members panel).
- *
- * Three rules it encodes:
- *
- *   * **The default is always visible next to the override.** "Reset" restores
- *     a value the owner can READ before clicking, not a value they have to
- *     trust; and an edited row says who edited it and when, because the store
- *     records provenance for the same reason the audit trail does.
- *   * **Save is per-key and disabled until the text actually differs.** A
- *     whole-form "save all" would turn one typo into twenty-four writes with
- *     one attribution.
- *   * **Baked-only keys say so.** `seo.title`/`seo.description` live in the
- *     page's `<head>`, which only a site rebuild re-emits — the row is
- *     labeled "applies at the next site publish" instead of pretending the
- *     edit is live in five minutes like the body copy is.
- */
-export function SiteCopyPanel({ entries, bakedOnly, onSave, onReset, busyKey, error }: GuardSiteCopyState) {
-  if (entries.length === 0)
-    return (
-      <EmptyState
-        compact
-        title='No editable copy'
-        description='The marketing page has no copy keys registered — regenerate the app after enabling siteCopy.'
-      />
-    );
-
-  return (
-    <div data-cc-site-copy='' className='flex flex-col gap-3'>
-      <p className='text-muted-foreground text-sm'>
-        These strings feed the public marketing page. Body copy goes live within five minutes of a save (the page
-        polls a cached endpoint); rows marked “next publish” are baked into the page’s metadata and update when the
-        site is redeployed.
-      </p>
-      {error ? (
-        <Alert tone='error' title='Copy change failed'>
-          {error}
-        </Alert>
-      ) : null}
-      <ul className='flex flex-col gap-3'>
-        {entries.map((entry) => (
-          <SiteCopyRow
-            key={entry.key}
-            entry={entry}
-            bakedOnly={bakedOnly.includes(entry.key)}
-            onSave={onSave}
-            onReset={onReset}
-            busy={busyKey === entry.key}
-          />
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-function SiteCopyRow({
-  entry,
-  bakedOnly,
-  onSave,
-  onReset,
-  busy,
-}: {
-  entry: SiteCopyAdminEntry;
-  bakedOnly: boolean;
-  onSave: (key: string, value: string) => void;
-  onReset: (key: string) => void;
-  busy: boolean;
-}) {
-  const effective = entry.value ?? entry.defaultValue;
-  const [draft, setDraft] = useState(effective);
-  // A save/reset lands as new props; the draft follows them so the row never
-  // shows a stale editor over a fresh value. Local edits win between saves.
-  useEffect(() => setDraft(effective), [effective]);
-
-  const dirty = draft !== effective;
-  const overridden = entry.value !== undefined;
-
-  return (
-    <li data-cc-copy-key={entry.key} className='flex flex-col gap-1.5 rounded-md border border-border p-3'>
-      <div className='flex items-center justify-between gap-2'>
-        <code className='text-foreground text-xs'>{entry.key}</code>
-        <span className='cb-meta-label text-muted-foreground'>
-          {bakedOnly ? 'next publish · ' : ''}
-          {overridden ? `edited by ${entry.updatedBy ?? 'unknown'}${entry.updatedAt ? ` · ${entry.updatedAt}` : ''}` : 'default'}
-        </span>
-      </div>
-      <AutoGrowTextarea
-        value={draft}
-        onChange={(event) => setDraft(event.target.value)}
-        aria-label={`Copy for ${entry.key}`}
-        className='w-full rounded-md border border-border bg-background px-2 py-1.5 text-foreground text-sm'
-      />
-      {overridden ? (
-        <p className='cb-meta-label text-muted-foreground'>
-          Default: <span className='italic'>{entry.defaultValue}</span>
-        </p>
-      ) : null}
-      <div className='flex items-center gap-2'>
-        <Button
-          variant='primary'
-          size='sm'
-          tooltip='Store this text — the public page picks it up from the database'
-          disabled={!dirty || draft.trim().length === 0}
-          loading={busy}
-          onClick={() => onSave(entry.key, draft)}
-        >
-          Save
-        </Button>
-        {overridden ? (
-          <Button
-            variant='secondary'
-            size='sm'
-            tooltip='Remove the override and return to the shipped default'
-            disabled={busy}
-            onClick={() => onReset(entry.key)}
-          >
-            Reset to default
-          </Button>
-        ) : null}
-      </div>
-    </li>
-  );
-}