Skip to content

feat(developer-tools): add Developer menu with Style Lab, iDevice Lab, REST API#35

Open
erseco wants to merge 1 commit into
mainfrom
claude/developer-tools-labs-C6wRO
Open

feat(developer-tools): add Developer menu with Style Lab, iDevice Lab, REST API#35
erseco wants to merge 1 commit into
mainfrom
claude/developer-tools-labs-C6wRO

Conversation

@erseco
Copy link
Copy Markdown
Member

@erseco erseco commented May 17, 2026

Add a dev-only Developer dropdown to the workarea navbar containing three
entries: Style Lab, iDevice Lab, and REST API. The REST API entry is moved
out of the (hidden) Help menu so the canonical Swagger access point lives
here. All routes return 404 in production; visibility is gated on
APP_ENV=dev with an optional DEV_TOOLS_ENABLED override for staging.

What is in this MVP:

  • Backend: src/utils/developer-tools.util.ts (isDeveloperToolsEnabled +
    DeveloperToolEntries) and src/routes/developer.ts wiring
    /developer/style-lab, /developer/idevice-lab, /developer/api into both
    the root and BASE_PATH mounts. Both files have full spec coverage.
  • Shared frontend kernel under public/app/workarea/developer/shared/:
    DeveloperUrlState (sanitized query-param state), ViewportManager
    (desktop/tablet/mobile presets), FixtureRegistry, ExportPresetManager,
    DeveloperStatusReporter (data-status + JSON state), RoundtripValidator
    (save -> load -> save diff). Every module has colocated Vitest specs.
  • Style Lab + iDevice Lab pages with stable data-testid attributes,
    deterministic URL state, machine-readable state JSON, and Page Objects
    for Playwright at test/e2e/playwright/pages/developer.page.ts.
  • doc/development/developer-tools.md documents architecture, automation
    surface, fixture manifests, and known limitations.

Reused assets: fixture manifest entries reference .elpx files from the
authorized exelearning-style-designer repository; the actual fixtures are
not committed here (placeholders + README explaining where they go).

Known limitations (called out in the doc + UI):

  • Style Lab preview iframe is wired but not yet hooked to
    Html5Exporter.generateForPreview() + Service Worker. The integration
    point is DeveloperPreviewManager (next PR).
  • iDevice Lab edition/export views render their containers; the iDevice
    mount step lives in IdeviceSandbox follow-up work.
  • SCORM debug panel ships as a labeled simulator only.
  • Reload-from-disk emits a state token; backend filesystem reload route
    is the next step.

Test plan:

  • bun test ./src/routes/developer.spec.ts ./src/utils/developer-tools.util.spec.ts
    -> 23 pass, 0 fail
  • npx vitest run public/app/workarea/developer/ -> 104 pass, 0 fail
  • bun test ./src/routes/pages.spec.ts -> 86 pass (no regression)
  • make lint -> clean

…, REST API

Add a dev-only Developer dropdown to the workarea navbar containing three
entries: Style Lab, iDevice Lab, and REST API. The REST API entry is moved
out of the (hidden) Help menu so the canonical Swagger access point lives
here. All routes return 404 in production; visibility is gated on
APP_ENV=dev with an optional DEV_TOOLS_ENABLED override for staging.

What is in this MVP:

* Backend: src/utils/developer-tools.util.ts (isDeveloperToolsEnabled +
  DeveloperToolEntries) and src/routes/developer.ts wiring
  /developer/style-lab, /developer/idevice-lab, /developer/api into both
  the root and BASE_PATH mounts. Both files have full spec coverage.
* Shared frontend kernel under public/app/workarea/developer/shared/:
  DeveloperUrlState (sanitized query-param state), ViewportManager
  (desktop/tablet/mobile presets), FixtureRegistry, ExportPresetManager,
  DeveloperStatusReporter (data-status + JSON state), RoundtripValidator
  (save -> load -> save diff). Every module has colocated Vitest specs.
* Style Lab + iDevice Lab pages with stable data-testid attributes,
  deterministic URL state, machine-readable state JSON, and Page Objects
  for Playwright at test/e2e/playwright/pages/developer.page.ts.
* doc/development/developer-tools.md documents architecture, automation
  surface, fixture manifests, and known limitations.

Reused assets: fixture manifest entries reference .elpx files from the
authorized exelearning-style-designer repository; the actual fixtures are
not committed here (placeholders + README explaining where they go).

Known limitations (called out in the doc + UI):

* Style Lab preview iframe is wired but not yet hooked to
  Html5Exporter.generateForPreview() + Service Worker. The integration
  point is DeveloperPreviewManager (next PR).
* iDevice Lab edition/export views render their containers; the iDevice
  mount step lives in IdeviceSandbox follow-up work.
* SCORM debug panel ships as a labeled simulator only.
* Reload-from-disk emits a state token; backend filesystem reload route
  is the next step.

Test plan:

* bun test ./src/routes/developer.spec.ts ./src/utils/developer-tools.util.spec.ts
  -> 23 pass, 0 fail
* npx vitest run public/app/workarea/developer/ -> 104 pass, 0 fail
* bun test ./src/routes/pages.spec.ts -> 86 pass (no regression)
* make lint -> clean
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants