---
phase: 26-jamtrack-polish
plan: 04
type: execute
wave: 4
depends_on: ["26-03"]
files_modified:
  - jam-ui/src/components/client/JKSessionScreen.js
autonomous: true
gap_closure: true

must_haves:
  truths:
    - "User sees loading/progress indicators while JamTrack is being processed"
    - "Non-synchronized JamTracks trigger the download flow automatically"
    - "Already-synchronized JamTracks show controls immediately"
  artifacts:
    - path: "jam-ui/src/components/client/JKSessionScreen.js"
      provides: "handleJamTrackSelect calls loadJamTrack when track is not synchronized"
      contains: "loadJamTrack"
  key_links:
    - from: "handleJamTrackSelect"
      to: "loadJamTrack thunk"
      via: "dispatch call when syncResult.isSynchronized is false"
      pattern: "dispatch\\(loadJamTrack"
---

<objective>
Fix empty JamTrack player by triggering loadJamTrack when track is not synchronized.

Problem: After plan 26-03, when checkJamTrackSync returns isSynchronized=false, the state stays 'idle'. The download banner only shows for 'checking/packaging/downloading/keying' states, and controls only show for 'synchronized'. With 'idle' state, nothing renders.

Fix: If syncResult.isSynchronized is false, call loadJamTrack to start the download flow. This transitions state through 'checking' → 'packaging' → 'downloading' → 'keying' → 'synchronized', showing progress UI along the way.

Output: JamTrack player shows proper loading progress for non-synchronized tracks.
</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
@.planning/phases/26-jamtrack-polish/26-UAT.md
@jam-ui/src/components/client/JKSessionScreen.js (lines 1166-1204)
@jam-ui/src/store/features/mediaSlice.js (loadJamTrack thunk)
</context>

<tasks>

<task type="auto">
  <name>Task 1: Call loadJamTrack when track is not synchronized</name>
  <files>jam-ui/src/components/client/JKSessionScreen.js</files>
  <action>
In handleJamTrackSelect (around line 1166-1204), after checkJamTrackSync returns:
- If `syncResult.isSynchronized` is true: show success toast (current behavior)
- If `syncResult.isSynchronized` is false: call loadJamTrack to start download flow

**Step 1: Import loadJamTrack**

Check if loadJamTrack is already imported from mediaSlice (it may be). If not, add it to the imports.

**Step 2: Modify handleJamTrackSelect**

`loadJamTrack` is already available from `useMediaActions()` hook (line 153). It just takes the jamTrack object.

Change the sync result handling (around lines 1194-1199) from:

```javascript
// Show appropriate message based on sync state
if (syncResult.isSynchronized) {
  toast.success(`Loaded JamTrack: ${jamTrackWithStems.name}`);
} else {
  toast.info(`Loading JamTrack: ${jamTrackWithStems.name}...`);
}
```

To:

```javascript
// Handle sync result
if (syncResult.isSynchronized) {
  // Already synchronized - show success
  toast.success(`Loaded JamTrack: ${jamTrackWithStems.name}`);
} else {
  // Not synchronized - start download flow
  // This will transition state through checking → packaging → downloading → keying → synchronized
  toast.info(`Loading JamTrack: ${jamTrackWithStems.name}...`);
  loadJamTrack(jamTrackWithStems);
}
```

Note: `loadJamTrack` is already destructured from `useMediaActions()` at line 153, so no additional imports are needed.
  </action>
  <verify>
```bash
# Verify loadJamTrack is imported
grep -n "loadJamTrack" jam-ui/src/components/client/JKSessionScreen.js | head -5

# Verify it's called in handleJamTrackSelect
grep -A20 "const handleJamTrackSelect" jam-ui/src/components/client/JKSessionScreen.js | grep "loadJamTrack"
```
  </verify>
  <done>handleJamTrackSelect calls loadJamTrack when track is not synchronized, triggering the download flow</done>
</task>

<task type="auto">
  <name>Task 2: Build verification</name>
  <files>None (verification only)</files>
  <action>
Run build to verify no syntax errors from the changes:

```bash
cd jam-ui && npm run build
```

If build fails due to infrastructure issues (Node.js version, node-sass), verify syntax via babel parser instead.

Expected behavior after fix:
1. User selects non-synchronized JamTrack
2. handleJamTrackSelect calls checkJamTrackSync → returns isSynchronized=false
3. loadJamTrack is dispatched → state transitions to 'checking' (or 'packaging')
4. Player opens and shows download banner: "Checking sync status..." or "Your JamTrack is currently being created..."
5. Progress continues through 'packaging' → 'downloading' → 'keying' → 'synchronized'
6. Once 'synchronized', controls appear
  </action>
  <verify>
Build command exits with code 0 and no compilation errors, or babel parser confirms syntax is correct.
  </verify>
  <done>Build passes with no errors, changes are syntactically correct</done>
</task>

</tasks>

<verification>
1. Build check: `cd jam-ui && npm run build` completes without errors
2. Code verification:
   - JKSessionScreen.js imports loadJamTrack
   - handleJamTrackSelect dispatches loadJamTrack when syncResult.isSynchronized is false
3. Manual test: Select non-synchronized JamTrack → see loading progress → controls appear when synchronized
</verification>

<success_criteria>
- handleJamTrackSelect calls loadJamTrack when syncResult.isSynchronized is false
- Non-synchronized JamTracks trigger the download flow automatically
- User sees loading/progress indicators while JamTrack is being processed
- Build passes with no errors
- UAT gap "User sees loading/progress indicators while JamTrack is being processed" is closed
</success_criteria>

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