feat(swift): voeg keyboard shortcuts toe aan chat (E2.S5)

E2.S5 - Keyboard shortcuts (1 SP)
- ⌘K / Ctrl+K om chat input te focussen (global)
- Escape om input te clearen (local)
- Enter om bericht te versturen (al in E2.S4)
- Shift+Enter voor nieuwe regel (al in E2.S4)

ChatInput Updates:
- forwardRef toegevoegd voor ref support
- useImperativeHandle voor focus() en clear() methods
- ChatInputHandle interface geëxporteerd
- Escape key handler (clears input + resets height)
- Helper text updated: "⌘K focus • Esc clear • Enter versturen"

ChatPanel Updates:
- chatInputRef toegevoegd (ChatInputHandle type)
- Global keyboard event listener voor ⌘K/Ctrl+K
- Cross-platform support (metaKey voor macOS, ctrlKey voor Windows/Linux)
- preventDefault() om browser conflicts te voorkomen
- Cleanup listener bij unmount

Keyboard Shortcuts:
- ⌘K / Ctrl+K: Focus chat input (global window listener)
- Escape: Clear input (local textarea handler)
- Enter: Submit message (E2.S4)
- Shift+Enter: New line (E2.S4)

Cross-platform:
- macOS: ⌘K (e.metaKey)
- Windows/Linux: Ctrl+K (e.ctrlKey)
- Both: Escape, Enter, Shift+Enter

Components Updated:
- components/swift/chat/chat-input.tsx (+17 regels)
- components/swift/chat/chat-panel.tsx (+15 regels)

🎉 Epic 2 Compleet! 5/5 stories (13 SP / 13 SP = 100%)

Epic 2 Deliverables:
- E2.S1: Chat state in store (chatMessages, isStreaming, actions)
- E2.S2: ChatMessage component (4 message types met styling)
- E2.S3: Scrolling (auto-scroll, scroll-lock, scroll-to-bottom button)
- E2.S4: ChatInput (textarea, Enter submit, auto-resize)
- E2.S5: Keyboard shortcuts (⌘K focus, Escape clear)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

components/swift/chat/chat-input.tsx

@@ -9,7 +9,7 @@
  * Story: E2.S4 (ChatInput component)
  */
 
-import { useState, useRef, KeyboardEvent, ChangeEvent } from 'react';
+import { useState, useRef, KeyboardEvent, ChangeEvent, forwardRef, useImperativeHandle } from 'react';
 import { Send, Mic } from 'lucide-react';
 import { useSwiftStore } from '@/stores/swift-store';
 import { cn } from '@/lib/utils';
@@ -20,15 +20,33 @@ interface ChatInputProps {
   disabled?: boolean;
 }
 
-export function ChatInput({
+export interface ChatInputHandle {
+  focus: () => void;
+  clear: () => void;
+}
+
+export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(function ChatInput({
   placeholder = 'Typ of spreek wat je wilt doen...',
   onSend,
   disabled = false,
-}: ChatInputProps) {
+}, ref) {
   const [inputValue, setInputValue] = useState('');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const addChatMessage = useSwiftStore((s) => s.addChatMessage);
 
+  // Expose focus and clear methods to parent
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      textareaRef.current?.focus();
+    },
+    clear: () => {
+      setInputValue('');
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    },
+  }));
+
   // Handle input change and auto-resize
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setInputValue(e.target.value);
@@ -74,6 +92,15 @@ export function ChatInput({
       handleSubmit();
     }
 
+    // Escape to clear input
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      setInputValue('');
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    }
+
     // Shift+Enter for new line (default behavior, no need to handle)
   };
 
@@ -139,15 +166,19 @@ export function ChatInput({
 
       {/* Helper text */}
       <p className="text-xs text-slate-400 mt-2">
+        <kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
+          ⌘K
+        </kbd>{' '}
+        focus •{' '}
+        <kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
+          Esc
+        </kbd>{' '}
+        clear •{' '}
         <kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
           Enter
         </kbd>{' '}
-        om te versturen •{' '}
+        versturen
-        <kbd className="px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-xs">
-          Shift+Enter
-        </kbd>{' '}
-        voor nieuwe regel
       </p>
     </div>
   );
-}
+});

components/swift/chat/chat-panel.tsx

@@ -12,7 +12,7 @@
 import { useRef, useEffect, useState, useCallback } from 'react';
 import { ArrowDown } from 'lucide-react';
 import { ChatMessage } from './chat-message';
-import { ChatInput } from './chat-input';
+import { ChatInput, ChatInputHandle } from './chat-input';
 import { useSwiftStore } from '@/stores/swift-store';
 import { cn } from '@/lib/utils';
 
@@ -23,6 +23,9 @@ export function ChatPanel() {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
+  // Ref for chat input (for keyboard shortcuts)
+  const chatInputRef = useRef<ChatInputHandle>(null);
+
   // Scroll-lock state
   const [isScrolledUp, setIsScrolledUp] = useState(false);
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -61,6 +64,20 @@ export function ChatPanel() {
     scrollToBottom('auto');
   }, [scrollToBottom]);
 
+  // Global keyboard shortcuts
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      // ⌘K or Ctrl+K to focus chat input
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        chatInputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener('keydown', handleGlobalKeyDown);
+    return () => window.removeEventListener('keydown', handleGlobalKeyDown);
+  }, []);
+
   return (
     <div className="h-full flex flex-col bg-white">
       {/* Chat messages area - scrollable */}
@@ -118,10 +135,13 @@ export function ChatPanel() {
       </div>
 
       {/* Chat input */}
-      <ChatInput onSend={(message) => {
+      <ChatInput
-        // Handle send (AI response will be added in E3)
+        ref={chatInputRef}
-        console.log('User sent:', message);
+        onSend={(message) => {
-      }} />
+          // Handle send (AI response will be added in E3)
+          console.log('User sent:', message);
+        }}
+      />
     </div>
   );
 }