fix: layout, hotkeys, skip/switch speaker logic

frontend/src/components/Controls.svelte

@@ -30,8 +30,33 @@
     await StopMeeting()
     dispatch('stop')
   }
+
+  function handleKeydown(e) {
+    // ⌘N - Next speaker
+    if (e.metaKey && e.key.toLowerCase() === 'n') {
+      e.preventDefault()
+      handleNext()
+    }
+    // ⌘S - Skip speaker  
+    if (e.metaKey && e.key.toLowerCase() === 's') {
+      e.preventDefault()
+      handleSkip()
+    }
+    // Space - Pause/Resume
+    if (e.code === 'Space' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      e.preventDefault()
+      handlePauseResume()
+    }
+    // ⌘Q - Stop meeting
+    if (e.metaKey && e.key.toLowerCase() === 'q') {
+      e.preventDefault()
+      handleStop()
+    }
+  }
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
+
 <div class="controls">
   <button class="btn primary" on:click={handleNext}>
     {hasQueue ? $t('controls.next') : $t('controls.stop')}

frontend/src/components/History.svelte

@@ -205,7 +205,15 @@
                   <div class="participant-log" class:log-overtime={log.overtime} class:skipped={log.skipped}>
                     <span class="log-order">#{log.order}</span>
                     <span class="log-name">{log.participant?.name || 'Unknown'}</span>
-                    <span class="log-duration">{formatTime(log.duration)}</span>
+                    <span class="log-duration">
+                      <span class:overtime={log.duration > (log.participant?.timeLimit || 0)}>
+                        {formatTime(log.duration)}
+                      </span>
+                      {#if log.participant?.timeLimit}
+                        <span class="time-sep">/</span>
+                        <span class="time-limit">{formatTime(log.participant.timeLimit)}</span>
+                      {/if}
+                    </span>
                     {#if log.overtime}
                       <span class="overtime-icon">⚠️</span>
                     {/if}
@@ -463,6 +471,22 @@
   .log-duration {
     color: #9ca3af;
     font-family: 'SF Mono', 'Menlo', monospace;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .log-duration .overtime {
+    color: #ef4444;
+  }
+
+  .log-duration .time-sep {
+    color: #6b7280;
+    margin: 0 3px;
+  }
+
+  .log-duration .time-limit {
+    color: #6b7280;
   }
 
   .loading, .empty {

frontend/src/components/ParticipantList.svelte

@@ -1,19 +1,49 @@
 <script>
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, tick } from 'svelte'
   import { t } from '../lib/i18n'
 
   export let timerState
 
   const dispatch = createEventDispatcher()
 
+  let listEl
+  let lastSpeakingOrder = 0
+
   $: allSpeakers = timerState?.allSpeakers || []
   $: currentSpeakerId = timerState?.currentSpeakerId || 0
   $: currentElapsed = timerState?.speakerElapsed || 0
+  $: speakingOrder = timerState?.speakingOrder || 0
+
+  // Auto-scroll when speaker changes
+  $: if (speakingOrder !== lastSpeakingOrder && speakingOrder > 0) {
+    lastSpeakingOrder = speakingOrder
+    scrollToCurrentSpeaker()
+  }
+
+  async function scrollToCurrentSpeaker() {
+    await tick() // Wait for DOM update
+    if (!listEl) return
+    
+    // Find the index of the current speaking participant
+    const speakingIndex = allSpeakers.findIndex(s => s.status === 'speaking')
+    if (speakingIndex < 0) return
+    
+    // Scroll to show previous speaker at top (or current if first)
+    const targetIndex = Math.max(0, speakingIndex - 1)
+    const items = listEl.querySelectorAll('li')
+    if (items[targetIndex]) {
+      items[targetIndex].scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }
 
   function handleSkip(speakerId) {
     dispatch('skip', { speakerId })
   }
 
+  function handleSwitch(speakerId) {
+    dispatch('switch', { speakerId })
+  }
+
   function formatTime(seconds) {
     const mins = Math.floor(seconds / 60)
     const secs = seconds % 60
@@ -25,9 +55,14 @@
   <h3>{$t('timer.participants')}</h3>
   
   {#if allSpeakers.length > 0}
-    <ul>
+    <ul bind:this={listEl}>
       {#each allSpeakers as speaker}
-        <li class="speaker-item {speaker.status}">
+        <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+        <li 
+          class="speaker-item {speaker.status}" 
+          class:clickable={speaker.status !== 'speaking'}
+          on:click={() => speaker.status !== 'speaking' && handleSwitch(speaker.id)}
+        >
           <span class="order">{speaker.order}</span>
           <span class="name">{speaker.name}</span>
           <span class="time-display">
@@ -47,8 +82,8 @@
               <span class="time-limit">{formatTime(speaker.timeLimit)}</span>
             {/if}
           </span>
-          {#if speaker.status === 'pending' || speaker.status === 'skipped'}
-            <button class="skip-btn" on:click={() => handleSkip(speaker.id)} title="{$t('controls.skip')}">
+          {#if speaker.status === 'pending' || speaker.status === 'speaking'}
+            <button class="skip-btn" on:click|stopPropagation={() => handleSkip(speaker.id)} title="{$t('controls.skip')}">
               ⏭
             </button>
           {/if}
@@ -108,6 +143,18 @@
     background: #1b2636;
   }
 
+  .speaker-item.clickable {
+    cursor: pointer;
+  }
+
+  .speaker-item.clickable:hover {
+    background: #2d3f52;
+  }
+
+  .speaker-item.done.clickable:hover {
+    background: #2a4a6f;
+  }
+
   .speaker-item.skipped {
     background: repeating-linear-gradient(
       45deg,
@@ -181,12 +228,12 @@
   }
 
   .time-display {
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 2px;
     font-family: 'SF Mono', 'Menlo', monospace;
     font-size: 12px;
     flex-shrink: 0;
+    white-space: nowrap;
   }
 
   .time-spent {
@@ -199,6 +246,7 @@
 
   .time-sep {
     color: #6b7280;
+    margin: 0 3px;
   }
 
   .time-limit {