feat(onboarding/phase-2): settings hub, setup wizard shell, first-run redirect

Phase 2 of hospital onboarding & self-service plan
(docs/superpowers/plans/2026-04-06-hospital-onboarding-self-service.md
checked in here for the helix-engage repo).

Frontend foundations for the staff-portal Settings hub and 6-step setup
wizard. Backend was Phase 1 (helix-engage-server commit).

New shared components (src/components/setup/):
- wizard-shell.tsx — fullscreen layout with left step navigator, progress
  bar, and Skip-for-now affordance
- wizard-step.tsx — single-step wrapper with Mark Complete + Prev/Next/
  Finish navigation, completion badge
- section-card.tsx — Settings hub card with title/description/icon, links
  to a section page, optional status badge mirroring setup-state

New pages:
- pages/setup-wizard.tsx — top-level /setup route, fullscreen (no AppShell),
  loads setup-state from sidecar, renders the active step. Each step has a
  placeholder body for now; Phase 5 swaps placeholders for real form
  components from the matching settings pages. Already functional end-to-end:
  Mark Complete writes to PUT /api/config/setup-state/steps/<step>, Skip
  posts to /dismiss, Finish navigates to /.
- pages/team-settings.tsx — moved the existing workspace member listing out
  of the old monolithic settings.tsx into its own /settings/team route. No
  functional change; Phase 3 will add the invite form + role editor here.
- pages/settings-placeholder.tsx — generic "Coming in Phase X" stub used by
  routes for clinics, doctors, telephony, ai, widget until those pages land.

Modified pages:
- pages/settings.tsx — rewritten as the Settings hub (the new /settings
  route). Renders SectionCards in 3 groups (Hospital identity, Care
  delivery, Channels & automation) with completion badges sourced from
  /api/config/setup-state. The hub links to existing pages (/branding,
  /rules) and to placeholder pages for the not-yet-built sections.
- pages/login.tsx — after successful login, calls getSetupState() and
  redirects to /setup if wizardRequired. Failures fall through to / so an
  older sidecar without the setup-state endpoint still works.
- components/layout/sidebar.tsx — collapsed the Configuration group
  (Rules Engine + Branding standalone entries) into the single Settings
  entry that opens the hub. Removes the IconSlidersUp import that's no
  longer used.

New types and helpers (src/lib/setup-state.ts):
- SetupState / SetupStepName / SetupStepStatus types mirroring the sidecar
  shape
- SETUP_STEP_NAMES constant + SETUP_STEP_LABELS map (title + description
  per step) — single source of truth used by the wizard, hub, and any
  future surface that wants to render step metadata
- getSetupState / markSetupStepComplete / markSetupStepIncomplete /
  dismissSetupWizard / resetSetupState helpers wrapping the api-client

Other:
- lib/api-client.ts — added apiClient.put() helper for the setup-state
  step update mutations (PUT was the only verb missing from the existing
  get/post/graphql helpers)
- main.tsx — registered new routes:
    /setup                       (fullscreen, no AppShell)
    /settings                    (the hub, replaces old settings.tsx)
    /settings/team               (moved member listing)
    /settings/clinics            (placeholder, Phase 3)
    /settings/doctors            (placeholder, Phase 3)
    /settings/telephony          (placeholder, Phase 4)
    /settings/ai                 (placeholder, Phase 4)
    /settings/widget             (placeholder, Phase 4)

Tested via npx tsc --noEmit and npm run build (clean, only pre-existing
chunk-size and dynamic-import warnings unrelated to this change).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/setup/wizard-step.tsx

@@ -0,0 +1,105 @@
+import type { ReactNode } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faArrowRight, faCircleCheck } from '@fortawesome/pro-duotone-svg-icons';
+import { Button } from '@/components/base/buttons/button';
+import { SETUP_STEP_LABELS, type SetupStepName } from '@/lib/setup-state';
+
+type WizardStepProps = {
+    step: SetupStepName;
+    isCompleted: boolean;
+    isLast: boolean;
+    onPrev: (() => void) | null;
+    onNext: (() => void) | null;
+    onMarkComplete: () => void;
+    onFinish: () => void;
+    saving?: boolean;
+    children: ReactNode;
+};
+
+// Single-step wrapper. The parent picks which step is active and supplies
+// the form content as children. The step provides title, description,
+// "mark complete" CTA, and prev/next/finish navigation. In Phase 5 the
+// children will be real form components from the corresponding settings
+// pages — for now they're placeholders.
+export const WizardStep = ({
+    step,
+    isCompleted,
+    isLast,
+    onPrev,
+    onNext,
+    onMarkComplete,
+    onFinish,
+    saving = false,
+    children,
+}: WizardStepProps) => {
+    const meta = SETUP_STEP_LABELS[step];
+
+    return (
+        <div className="rounded-xl border border-secondary bg-primary p-8 shadow-xs">
+            <div className="mb-6 flex items-start justify-between gap-4">
+                <div>
+                    <h2 className="text-2xl font-bold text-primary">{meta.title}</h2>
+                    <p className="mt-1 text-sm text-tertiary">{meta.description}</p>
+                </div>
+                {isCompleted && (
+                    <span className="inline-flex items-center gap-2 rounded-full bg-success-primary px-3 py-1 text-xs font-medium text-success-primary">
+                        <FontAwesomeIcon icon={faCircleCheck} className="size-3.5" />
+                        Complete
+                    </span>
+                )}
+            </div>
+
+            <div className="mb-8">{children}</div>
+
+            <div className="flex items-center justify-between gap-4 border-t border-secondary pt-6">
+                <Button
+                    color="secondary"
+                    size="md"
+                    isDisabled={!onPrev}
+                    onClick={onPrev ?? undefined}
+                    iconLeading={({ className }: { className?: string }) => (
+                        <FontAwesomeIcon icon={faArrowLeft} className={className} />
+                    )}
+                >
+                    Previous
+                </Button>
+
+                <div className="flex items-center gap-3">
+                    {!isCompleted && (
+                        <Button
+                            color="primary"
+                            size="md"
+                            isLoading={saving}
+                            showTextWhileLoading
+                            onClick={onMarkComplete}
+                        >
+                            Mark complete
+                        </Button>
+                    )}
+                    {isLast ? (
+                        <Button
+                            color="primary"
+                            size="md"
+                            isDisabled={!isCompleted}
+                            onClick={onFinish}
+                        >
+                            Finish setup
+                        </Button>
+                    ) : (
+                        <Button
+                            color={isCompleted ? 'primary' : 'secondary'}
+                            size="md"
+                            isDisabled={!onNext}
+                            onClick={onNext ?? undefined}
+                            iconTrailing={({ className }: { className?: string }) => (
+                                <FontAwesomeIcon icon={faArrowRight} className={className} />
+                            )}
+                        >
+                            Next
+                        </Button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};