fix: simplify delivery demo chrome and role toggle

Remove the delivery side control panel and make the player area single-pane, then add a Student|Scorer toggle next to Reset Input to mirror pie-players behavior.

Made-with: Cursor

Author: chillenious

apps/element-demo/src/lib/element-player/components/DeliveryPlayerLayout.svelte

@@ -2,14 +2,9 @@
 /**
  * Delivery Player Layout Component
  *
- * Extended layout with mode/role/session/model controls for delivery view.
+ * Delivery layout wrapper for the element player.
  */
 import { onMount } from 'svelte';
-import { page } from '$app/stores';
-import ModeSelector from './ModeSelector.svelte';
-import SessionPanel from './SessionPanel.svelte';
-import ScoringPanel from './ScoringPanel.svelte';
-import ModelPanel from './ModelPanel.svelte';
 import { loadController } from '../lib/demo-element-loader';
 import type { PieController } from '../lib/types';
 import type { PlayerType } from '$lib/config/player-runtime';
@@ -44,44 +39,15 @@ let {
 // State
 let loading = $state(true);
 let error = $state<string | null>(null);
-let score = $state<any>(null);
 let controllerWarning = $state<string | null>(null);
-let roleLocked = $state(false);
-let splitRatio = $state(50);
 
 // Effects
 $effect(() => {
-  roleLocked = mode === 'evaluate';
   if (playerRole !== 'instructor' && mode === 'evaluate') {
     mode = 'view';
   }
 });
 
-// Call controller in evaluate mode
-$effect(() => {
-  if (mode === 'evaluate' && controller && model && session) {
-    if (debug) console.log('[delivery-player-layout] Calling controller.score()');
-
-    const scoreMethod = controller.score || controller.outcome;
-
-    if (scoreMethod) {
-      scoreMethod(model, session, { mode, role: playerRole, partialScoring })
-        .then((result: any) => {
-          score = result;
-          if (debug) console.log('[delivery-player-layout] Score result:', result);
-        })
-        .catch((err: any) => {
-          console.error('[delivery-player-layout] Scoring error:', err);
-          if (debug) score = { error: err.message };
-        });
-    } else {
-      console.warn('[delivery-player-layout] Controller has no score or outcome method');
-    }
-  } else {
-    score = null;
-  }
-});
-
 onMount(async () => {
   try {
     if (!elementName) {
@@ -113,47 +79,10 @@ onMount(async () => {
   }
 });
 
-function handleSplitPointerDown(event: PointerEvent) {
-  const container = (event.currentTarget as HTMLElement)?.parentElement;
-  if (!container) return;
-
-  event.preventDefault();
-  const target = event.currentTarget as HTMLElement;
-  target.setPointerCapture(event.pointerId);
-
-  const startX = event.clientX;
-  const startRatio = splitRatio;
-  const rect = container.getBoundingClientRect();
-
-  const onMove = (moveEvent: PointerEvent) => {
-    const delta = moveEvent.clientX - startX;
-    const next = ((startRatio / 100) * rect.width + delta) / rect.width;
-    splitRatio = Math.min(80, Math.max(20, Math.round(next * 100)));
-  };
-
-  const onUp = () => {
-    target.releasePointerCapture(event.pointerId);
-    document.body.style.cursor = '';
-    window.removeEventListener('pointermove', onMove);
-    window.removeEventListener('pointerup', onUp);
-  };
-
-  document.body.style.cursor = 'col-resize';
-  window.addEventListener('pointermove', onMove);
-  window.addEventListener('pointerup', onUp);
-}
-
 function handleModelApply(nextModel: any) {
   // Model updates are handled by the store in parent routes
   console.log('[delivery-player-layout] Model apply requested:', nextModel);
 }
-
-// Build URL for role change, preserving other params
-function getRoleUrl(newRole: 'student' | 'instructor'): string {
-  const url = new URL($page.url);
-  url.searchParams.set('role', newRole);
-  return url.pathname + url.search;
-}
 </script>
 
 <div class="layout-container">
@@ -182,56 +111,10 @@ function getRoleUrl(newRole: 'student' | 'instructor'): string {
       </div>
     {/if}
 
-    <div class="player-content" style={`grid-template-columns: ${splitRatio}% 12px ${100 - splitRatio}%`}>
-      <main class="min-w-0 pr-3 overflow-auto">
+    <div class="player-content">
+      <main class="flex-1 min-w-0 overflow-auto">
         {@render children?.()}
       </main>
-
-      <div class="divider divider-horizontal cursor-col-resize" onpointerdown={handleSplitPointerDown} role="separator" aria-orientation="vertical"></div>
-
-      <aside class="min-w-0 pl-3 overflow-auto space-y-4">
-        <div class="card bg-base-100 border border-base-300">
-          <div class="card-body p-4">
-            <h3 class="card-title text-sm uppercase text-base-content/60">Mode</h3>
-            <ModeSelector bind:mode evaluateDisabled={playerRole !== 'instructor'} />
-          </div>
-        </div>
-
-        <div class="card bg-base-100 border border-base-300">
-          <div class="card-body p-4">
-            <h3 class="card-title text-sm uppercase text-base-content/60">Role</h3>
-            <div class="flex flex-col gap-2">
-              <a
-                href={getRoleUrl('student')}
-                data-sveltekit-reload
-                class="btn btn-sm justify-start"
-                class:btn-primary={playerRole === 'student'}
-                class:btn-outline={playerRole !== 'student'}
-                class:btn-disabled={roleLocked}
-                aria-disabled={roleLocked}
-                tabindex={roleLocked ? -1 : 0}
-                data-testid="role-student"
-              >
-                Student
-              </a>
-              <a
-                href={getRoleUrl('instructor')}
-                data-sveltekit-reload
-                class="btn btn-sm justify-start"
-                class:btn-primary={playerRole === 'instructor'}
-                class:btn-outline={playerRole !== 'instructor'}
-                data-testid="role-instructor"
-              >
-                Instructor
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <SessionPanel {session} />
-
-        <ScoringPanel {score} />
-      </aside>
     </div>
   {/if}
 </div>
@@ -245,25 +128,9 @@ function getRoleUrl(newRole: 'student' | 'instructor'): string {
   }
 
   .player-content {
-    display: grid;
+    display: flex;
     flex: 1;
     min-height: 0;
     overflow: hidden;
   }
-
-  .player-content > main,
-  .player-content > aside {
-    min-height: 0; /* Allow grid children to shrink below content size */
-  }
-
-  /* Responsive */
-  @media (max-width: 900px) {
-    .player-content {
-      grid-template-columns: 1fr !important;
-    }
-
-    .divider-horizontal {
-      display: none;
-    }
-  }
 </style>

apps/element-demo/src/routes/[element]/+layout.svelte

@@ -254,6 +254,18 @@ function resetDemoSessionFromToolbar() {
   }
 }
 
+function getDeliveryRoleModeUrl(viewMode: 'student' | 'scorer') {
+  const url = new URL($page.url);
+  if (viewMode === 'student') {
+    url.searchParams.set('role', 'student');
+    url.searchParams.set('mode', 'gather');
+  } else {
+    url.searchParams.set('role', 'instructor');
+    url.searchParams.set('mode', 'evaluate');
+  }
+  return url.pathname + url.search;
+}
+
 // Bidirectional sync: URL ↔ stores
 $effect(() => {
   const isDeliverRoute = $page.url.pathname.endsWith('/deliver');
@@ -352,6 +364,30 @@ function handleThemeToggle(event: Event) {
             >
               Reset Input
             </button>
+            <div class="join" aria-label="Demo role mode">
+              <a
+                href={getDeliveryRoleModeUrl('student')}
+                data-sveltekit-reload
+                class="btn btn-sm join-item"
+                class:btn-active={$role === 'student' && $mode === 'gather'}
+                aria-current={$role === 'student' && $mode === 'gather' ? 'page' : undefined}
+                title="Student view - gather mode"
+                data-testid="role-student"
+              >
+                Student
+              </a>
+              <a
+                href={getDeliveryRoleModeUrl('scorer')}
+                data-sveltekit-reload
+                class="btn btn-sm join-item"
+                class:btn-active={$role === 'instructor' && $mode === 'evaluate'}
+                aria-current={$role === 'instructor' && $mode === 'evaluate' ? 'page' : undefined}
+                title="Scorer view - evaluate mode"
+                data-testid="role-instructor"
+              >
+                Scorer
+              </a>
+            </div>
           {/if}
         </div>