---
phase: 26-jamtrack-polish
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - jam-ui/src/components/client/JKSessionScreen.js
  - jam-ui/src/components/client/JKSessionJamTrackPlayer.js
autonomous: true

must_haves:
  truths:
    - "JamTrack player fits properly in popup window without scrollbars"
    - "Create custom mix button opens JamTrack editor in new tab"
  artifacts:
    - path: "jam-ui/src/components/client/JKSessionScreen.js"
      provides: "Corrected WindowPortal dimensions for JamTrack player"
      contains: "width=460,height=350"
    - path: "jam-ui/src/components/client/JKSessionJamTrackPlayer.js"
      provides: "Working create custom mix navigation"
      contains: "window.open"
  key_links:
    - from: "JKSessionJamTrackPlayer.js"
      to: "/jamtracks/{id}"
      via: "window.open on create custom mix click"
      pattern: "window\\.open.*jamtracks"
---

<objective>
Fix JamTrack player window sizing and implement "create custom mix" navigation.

Purpose: Address two visual/navigation bugs that impact user experience - popup window has scrollbars due to oversized dimensions, and "create custom mix" button does nothing.
Output: JamTrack player that fits its popup window and allows users to create custom mixes via the JamTrack editor.
</objective>

<execution_context>
@/Users/nuwan/.claude/get-shit-done/workflows/execute-plan.md
@/Users/nuwan/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@jam-ui/src/components/client/JKSessionScreen.js
@jam-ui/src/components/client/JKSessionJamTrackPlayer.js
</context>

<tasks>

<task type="auto">
  <name>Task 1: Fix WindowPortal sizing for JamTrack player</name>
  <files>jam-ui/src/components/client/JKSessionScreen.js</files>
  <action>
Find the WindowPortal for JamTrack player (around line 1750) with `windowFeatures="width=600,height=500..."`.

Change the dimensions to `width=460,height=350` to properly fit the player content (which is 420px wide with 20px padding on each side).

Before:
```
windowFeatures="width=600,height=500,left=200,top=200,menubar=no,toolbar=no,status=no,scrollbars=yes,resizable=yes,location=no, addressbar=no"
```

After:
```
windowFeatures="width=460,height=350,left=200,top=200,menubar=no,toolbar=no,status=no,scrollbars=no,resizable=yes,location=no,addressbar=no"
```

Note: Also change `scrollbars=yes` to `scrollbars=no` since the window should now fit content without scrolling.
  </action>
  <verify>
Grep for the updated window dimensions:
```bash
grep -n "width=460,height=350" jam-ui/src/components/client/JKSessionScreen.js
```
Should find the JamTrack WindowPortal with the new dimensions.
  </verify>
  <done>WindowPortal for JamTrack player uses width=460, height=350 with scrollbars=no</done>
</task>

<task type="auto">
  <name>Task 2: Implement "create custom mix" navigation</name>
  <files>jam-ui/src/components/client/JKSessionJamTrackPlayer.js</files>
  <action>
Find the "create custom mix" link (around line 851-861) which currently has:
```jsx
onClick={() => console.log('TODO: Open custom mix creator')}
```

Replace with proper navigation that opens the JamTrack editor in a new tab:
```jsx
onClick={() => window.open(`/jamtracks/${jamTrack?.id}`, '_blank', 'noopener,noreferrer')}
```

The JamTrack editor route at `/jamtracks/{id}` already exists in the application and provides the full stem mixing interface.

Note: Use `noopener,noreferrer` for security best practices when opening external windows.
  </action>
  <verify>
Grep for the window.open implementation:
```bash
grep -n "window.open.*jamtracks" jam-ui/src/components/client/JKSessionJamTrackPlayer.js
```
Should find the onClick handler with proper navigation.
  </verify>
  <done>Clicking "create custom mix" opens /jamtracks/{id} in a new browser tab</done>
</task>

</tasks>

<verification>
1. Build check: `cd jam-ui && npm run build` completes without errors
2. Code verification:
   - JKSessionScreen.js has `width=460,height=350` for JamTrack WindowPortal
   - JKSessionJamTrackPlayer.js has `window.open` for create custom mix link
</verification>

<success_criteria>
- JamTrack player WindowPortal uses correct dimensions (460x350)
- "Create custom mix" link navigates to /jamtracks/{id} in new tab
- No regressions in existing functionality
</success_criteria>

<output>
After completion, create `.planning/phases/26-jamtrack-polish/26-01-SUMMARY.md`
</output>
