feat(sdk-app): selectable demo chromes

[jeffredodd]

Summary

• Adds a "Chrome" section to the Settings panel with a dropdown of pre-built demo chromes that ship in this repo. Selecting a chrome replaces the SDK app's TopBar + Sidebar with a partner-styled shell whose nav links drive the existing react-router routes.
• Two built-in entries:
  • sdk-native (default): the existing SDK app chrome, unchanged.
  • acme-hr: a generic partner-styled shell with branded header (logo, top nav, avatar, "SDK Settings" button), left workspace nav (Employees, Onboarding, Compensation, Run Payroll, Documents), and footer.
• Selection persists in `sdk-app-chrome-id` localStorage.
• Composes with the `\ chrome-hide shortcut from #1732 — pressing \\` hides whichever chrome is active.
• Settings panel and Code Panel continue to render at the app root regardless of active chrome.

Screensho

ts

Why

For customer demos we want to show SDK components inside a credible product context without seeing any SDK-app chrome bleeding through. Adding new chromes is a single registry entry — partners or PMs can fork/clone to build their own.

Test plan

• Default load — sdk-native chrome unchanged (no visual regression).
• Open Settings → Chrome → select "Acme HR (partner demo)" → app re-renders with the Acme chrome (header, nav, sidebar, footer).
• Click an Acme sidebar link (e.g. "Compensation") — URL updates to `/employee/Compensation` and the SDK component renders inside the Acme content area.
• Refresh — Acme chrome persists.
• Press `\` (Feature 2) — Acme chrome hides; press again → restored.
• Open Code Panel (`?`, Feature 3) with Acme active — JSX snippet still reflects the rendered SDK component.
• Manual token mode (Feature 1) still works under both chromes.
• Switch back to "SDK Dev App (default)" — original TopBar + Sidebar restored.

Branch base

This branch stacks on `feat/sdk-app-code-panel` (#1733), which stacks on `feat/sdk-app-hide-chrome-shortcut` (#1732), which stacks on `feat/sdk-app-manual-token-mode` (#1727). Re-target to `al/create-secondary-ui-components` after upstream PRs merge.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Adds “demo chrome” selection to the sdk-app so demos can be shown inside partner-styled shells, and introduces a Code panel that renders a usage snippet for the currently displayed SDK component.

Changes:

• Add a demo-chrome registry (including an “Acme HR” chrome) and a Settings dropdown that persists the selected chrome in localStorage.
• Add a Code panel (toggleable via ? and TopBar) that generates/highlights JSX usage snippets based on the current route/component and entity IDs.
• Wire the App layout to wrap routed content with the selected demo chrome and provide current-component context for snippet generation.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
sdk-app/src/useDemoChrome.ts	Hook to persist/read the selected demo chrome ID.
sdk-app/src/useCurrentComponent.ts	Context + hooks for tracking the currently rendered component/entities.
sdk-app/src/useCodePanel.ts	Hook to manage Code panel open state + global ? shortcut persistence.
sdk-app/src/TopBar.tsx	Adds Code toggle button and new props for Code panel state.
sdk-app/src/TopBar.module.scss	Styles for active state of the Code toggle button.
sdk-app/src/generateSnippet.ts	Generates a JSX snippet from registry metadata + entity IDs + defaults.
sdk-app/src/DemoSettingsPanel.tsx	Adds “Chrome” section with demo chrome dropdown + description.
sdk-app/src/demoChromes/types.ts	Types for demo chrome entries and chrome component props.
sdk-app/src/demoChromes/registry.ts	Registry of built-in demo chromes + lookup helper.
sdk-app/src/demoChromes/AcmeHrChrome.tsx	Partner-styled chrome implementation with header/nav/sidebar/footer.
sdk-app/src/demoChromes/AcmeHrChrome.module.scss	Styling for the Acme HR chrome shell.
sdk-app/src/CurrentComponentContext.tsx	Provider implementation for the current-component registry.
sdk-app/src/ComponentRenderer.tsx	Registers/unregisters the current component/entities for snippet generation.
sdk-app/src/CodePanel.tsx	Code panel UI, copy-to-clipboard, and resize handling.
sdk-app/src/CodePanel.module.scss	Layout/styling for the Code panel and resize handle.
sdk-app/src/assets/icons/icon-code.svg	Adds Code icon used in the TopBar.
sdk-app/src/App.tsx	Integrates demo chrome selection, current-component provider, and Code panel into the app layout.
package.json	Adds prism-react-renderer dependency.
package-lock.json	Locks prism-react-renderer (and transitive deps).

Comments suppressed due to low confidence (2)

sdk-app/src/App.tsx:98

• This effect disables react-hooks/exhaustive-deps and omits settingsOpen from the dependency list. That makes the behavior harder to reason about and can reintroduce stale-closure issues if this logic changes. Prefer including settingsOpen (and any referenced callbacks) in deps, or consolidating the mutual-exclusion logic into a single effect/state transition without lint overrides.

  useEffect(() => {
    if (codePanel.isOpen && settingsOpen) setSettingsOpen(false)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [codePanel.isOpen])

sdk-app/src/App.tsx:103

• This effect also disables react-hooks/exhaustive-deps and omits codePanel/codePanel.close from deps. Since useCodePanel returns callbacks, include the referenced values in the dependency array (or refactor to avoid needing the lint override) to keep the effect correct if the hook implementation changes.

  useEffect(() => {
    if (settingsOpen && codePanel.isOpen) codePanel.close()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [settingsOpen])

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.