Skip to content

Scaffold jamapp with JamTools feature modules and custom app shell (Vibe Kanban)#1

Open
mickmister wants to merge 11 commits intomainfrom
vk/e1e4-copy-jamtools-fe
Open

Scaffold jamapp with JamTools feature modules and custom app shell (Vibe Kanban)#1
mickmister wants to merge 11 commits intomainfrom
vk/e1e4-copy-jamtools-fe

Conversation

@mickmister
Copy link
Copy Markdown
Member

@mickmister mickmister commented Apr 27, 2026

Summary

This PR scaffolds the new jamapp Springboard application and ports over the JamTools frontend modules, dashboards, snacks, and supporting UI so the app can be browsed and exercised from a standalone shell.

What changed

  • scaffolded the jamapp app with its own package.json, tsconfig.json, vite.config.ts, lockfile, and registry configuration
  • added the main Springboard entrypoint and wired in @jamtools/core plus the copied JamTools feature modules
  • registered a custom application shell with a sidebar, nested module navigation, and a theme toggle
  • brought over the feature modules and supporting components/utilities, including:
    • dashboards and dashboard supervisors
    • Ultimate Guitar setlist / tab management views and services
    • Eventide preset controls
    • WLED, HandRaiser, DAW interaction, MIDI playback, and Phone Jam modules
    • supporting snacks and QR code helpers
  • updated the shell styling so dark mode colors render correctly

Why

This branch appears to be the initial implementation for copying the JamTools frontend into the new jamapp project (vk/e1e4-copy-jamtools-fe). The goal is to make the existing JamTools UI/modules available inside a standalone Springboard app, with a usable application shell for navigating the imported functionality.

Important implementation details

  • module registration is primarily driven by side-effect imports from src/index.tsx and src/features/src/modules/index.ts
  • the custom shell is registered through src/modules/ui_main.tsx, which wraps module routes with ApplicationShell
  • the imported feature set includes both full modules and smaller snack-style tools that depend on the shared JamTools macro/module ecosystem
  • the Vite/Springboard config is set up for both browser and node builds, with @jamtools/core marked as ssr.noExternal
  • the latest branch changes also include a dark mode pass for the application shell so the imported UI is easier to use in darker themes

This PR was written using Vibe Kanban

Vibe Kanban and others added 11 commits February 26, 2026 23:30
…mtools

Initialize the jamapp project using create-springboard-app@0.0.1-dev-vite-with-docs-7
and copy the features folder from springboard/packages/jamtools/features into src/.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Both springboard and @jamtools/core are now pinned to the same version.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The features folder no longer needs its own package.json now that it's part of
the jamapp monolith. Dependencies (jsdom, qrcode, react-guitar, tonal,
wled-client) have been moved to jamapp's package.json.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The create-springboard-app scaffolding didn't include tsconfig.json, so copied
the configuration from springboard/apps/vite-test.

Note: There are currently some TypeScript errors in the copied features code
that need to be addressed (imports using @jamtools/features paths, type issues).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Changed @jamtools/features imports to relative paths in song_structures_dashboards
- Added @ts-expect-error comment for MidiFile module type issue (module is registered via side-effect import)
- Added explicit type annotation for onParsed callback parameter

Type checking now passes cleanly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The issue was that '@jamtools/core/modules/midi_files/midi_files_module' is not
in the package.json exports field, so TypeScript couldn't resolve it for the
side-effect import. Changed to import '@jamtools/core/modules' which is exported
and includes the midi_files_module import, bringing in the MidiFile module
augmentation properly.

This fixes the type errors without using 'any' or '@ts-expect-error'.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The features/src/modules/index.ts file imports all feature modules. However,
importing it causes the web build to fail because @jamtools/core pulls in
Node.js-specific services (child_process, easymidi) even for browser builds.

This needs to be fixed in @jamtools/core to conditionally import Node services
only when building for the Node platform, or the springboard vite plugin needs
to handle this tree-shaking better.

For now, the import is commented out until this issue is resolved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Created a custom ApplicationShell component with:
- Header with app title and theme toggle
- Sidebar with collapsible module navigation
- Hierarchical navigation (modules and their routes)
- Active state highlighting for current module/route

Added UIMain module that registers the application shell.

Added demo module with multiple routes to demonstrate the shell navigation.

Note: Features modules import is temporarily commented out until the
@jamtools/core export conditions fix is published to npm.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Updated package.json to use link: protocol to reference the local
springboard @jamtools/core package with the export conditions fix.

Uncommented the features modules imports - the build now succeeds!

The export conditions properly resolve:
- Browser build: Uses io_dependencies.browser.js (no Node modules)
- Node build: Uses io_dependencies.node.js (includes Node MIDI services)

Build output shows 765 modules transformed for web and 94 for node,
confirming the platform-specific bundling is working correctly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Updated package.json to use @jamtools/core@0.0.1-dev-jamapp-5 and
springboard@0.0.1-dev-jamapp-5 from local verdaccio registry.

Added .npmrc to configure registry URL (http://localhost:4873).

Added explicit import of macro_module to ensure macro types are available
for features that depend on macro functionality.

Re-added demo module for testing the application shell.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Added proper dark mode support with theme-aware colors:
- Created ThemeContext to share theme state across components
- Dark backgrounds: #1a1a1a (main), #1e1e1e (sidebar), #252525 (header)
- Dark text colors: #e0e0e0 (primary), #d0d0d0 (secondary), #b0b0b0 (muted)
- Dark borders: #444 instead of #ccc
- Dark buttons: #2a2a2a background, #444 borders
- Active states: #2d5a8c (module), #1e4d7a (route) for blue highlights in dark mode

The sidebar elements now properly adapt to dark mode instead of showing
light colors on dark background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@mickmister mickmister changed the title Jam App - First implementation Scaffold jamapp with JamTools feature modules and custom app shell (Vibe Kanban) Apr 27, 2026
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.

1 participant