feat(demo): add disabled badges + read-only fieldsets across settings UI

[TerrifiedBug]

Summary

Pairs with #185 to make the read-only nature of the public demo obvious before a user interacts. Backend rejects credential/identity mutations in demo, but the UI was still letting users type into API key, S3 secret, Git PAT, OIDC client secret, and SCIM token fields and only surfacing the rejection on submit.

New primitives

src/components/demo-disabled.tsx:

• <DemoDisabledBadge /> — inline lock badge for card titles
• <DemoDisabledNotice /> — amber info banner above a section
• <DemoDisabledFieldset> — wraps content in <fieldset disabled> + notice; passthrough outside demo mode

All three short-circuit to no-op when `isDemoMode()` is false, so non-demo deployments are unaffected.

Surfaces updated

• `/settings/ai` — provider, base URL, API key, model, save/test
• `/settings/backup` — storage backend selector, S3 credentials, schedule, manual backup, restore, delete
• `/settings/auth` — OIDC issuer/client/secret, group mappings
• `/settings/scim` — enable toggle, base URL, token generator
• `/environments/[id]` Git Integration tab — repo URL, branch, PAT, mode
• `/environments/[id]` Agent Enrollment tab — Generate/Revoke disabled; Quick Start snippets remain visible with a clearly-fake `vf_enroll_demo_example_...` placeholder so the install flow still demonstrates how it would work

Test plan

• `pnpm vitest run` -- 2532 tests pass
• `tsc --noEmit` clean
• Smoke in demo: badges visible, inputs disabled, fieldset notices shown
• Smoke in non-demo: no badges, no fieldsets, behaviour unchanged

[greptile-apps]

Greptile Summary

This PR introduces three new UI primitives (DemoDisabledBadge, DemoDisabledNotice, DemoDisabledFieldset) and applies them across six settings/environment surfaces to make read-only demo-mode state visually obvious before users interact. All three primitives short-circuit to no-ops when isDemoMode() is false, so production deployments are unaffected.

• P1 — backup-settings.tsx: A standalone <DemoDisabledNotice> is placed directly before <DemoDisabledFieldset> (which has no message prop), causing DemoDisabledFieldset to also render its internal default notice — two amber banners appear back-to-back in demo mode. Pass the custom message to DemoDisabledFieldset and remove the outer <DemoDisabledNotice>.

Confidence Score: 4/5

Safe to merge after fixing the double-notice in backup-settings; all other surfaces are correct and non-demo deployments are unaffected.

One P1 correctness bug (duplicate amber banner in demo mode) keeps this below a clean 5. The rest of the implementation is straightforward and correct.

src/app/(dashboard)/settings/_components/backup-settings.tsx — standalone DemoDisabledNotice must be removed in favour of passing its message to DemoDisabledFieldset.

Important Files Changed

Filename	Overview
src/components/demo-disabled.tsx	New primitives (DemoDisabledBadge, DemoDisabledNotice, DemoDisabledFieldset) are correct; all short-circuit to no-op outside demo mode, and the fieldset approach is valid HTML for disabling native form controls.
src/app/(dashboard)/settings/_components/backup-settings.tsx	A standalone DemoDisabledNotice rendered directly before DemoDisabledFieldset (which also renders a notice internally) causes two amber banners to appear in demo mode.
src/app/(dashboard)/settings/_components/auth-settings.tsx	DemoDisabledFieldset correctly wraps both OIDC and IdP Group Mapping forms with appropriate messages; fieldset-over-form disables all descendant controls as expected.
src/app/(dashboard)/environments/[id]/page.tsx	Generate/Revoke buttons correctly disabled via isDemoMode(); Quick Start snippets shown with clearly-fake placeholder token; no logic issues.
src/components/environment/git-sync-section.tsx	DemoDisabledFieldset wraps the full Git Integration form content cleanly; no issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["isDemoMode()\nNEXT_PUBLIC_VF_DEMO_MODE === 'true'"] -->|false| B["Return children unchanged\n(no-op passthrough)"]
    A -->|true| C["DemoDisabledFieldset"]
    C --> D["Render DemoDisabledNotice\n(amber banner with message)"]
    C --> E["Render fieldset disabled\n+ opacity-70"]
    E --> F["All native inputs/buttons/selects\ninside are disabled by HTML spec"]

    G["Surfaces using DemoDisabledFieldset"] --> H["ai-settings: AI provider form"]
    G --> I["auth-settings: OIDC form\n+ IdP Group Mappings form"]
    G --> J["backup-settings: All backup cards"]
    G --> K["scim-settings: SCIM toggle + token"]
    G --> L["git-sync-section: Git config form"]

    M["enrollment tab (page.tsx)"] -->|"isDemoMode()"| N["Generate/Revoke buttons\ndisabled=true"]
    M -->|"isDemoMode()"| O["Show Quick Start\nwith DEMO_EXAMPLE_ENROLL_TOKEN"]

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: src/app/(dashboard)/settings/_components/backup-settings.tsx
Line: 221-224

Comment:
**Double amber notice rendered in demo mode**

A standalone `<DemoDisabledNotice>` is placed immediately before `<DemoDisabledFieldset>`, but `DemoDisabledFieldset` unconditionally calls `<DemoDisabledNotice message={message}>` internally. Since no `message` prop is passed to `DemoDisabledFieldset` here, in demo mode two banners appear back-to-back: the explicit custom one, then the default "This area is read-only in the public demo. Self-host VectorFlow to configure it." fallback.

Remove the standalone `<DemoDisabledNotice>` and pass its message to `DemoDisabledFieldset` instead:

```suggestion
      <DemoDisabledFieldset message="Backup creation, restore, and S3 storage configuration are disabled in the public demo. The buttons and inputs below are read-only.">
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "feat(demo): add disabled badges and read..." | Re-trigger Greptile}