feat(swift): Epic 4 - Navigation & Auth compleet

E4.S1 - Login form uitbreiden:
- Interface selector (Swift/Klassiek) toegevoegd
- Visuele keuze met icons (Layout/Zap)
- Redirect naar gekozen interface na login

E4.S2 - Preference opslag:
- updateInterfacePreference() in lib/auth/client.ts
- getInterfacePreference() voor ophalen
- Opslag in user_metadata.preferred_interface

E4.S3 - Redirect middleware:
- /epd → redirect naar preferred interface
- /login → redirect naar preferred interface (als ingelogd)
- Default: klassiek (/epd/clients)

E4.S4 - Fallback Picker:
- FallbackPicker component voor lage confidence
- Grid met 3 opties (Notitie, Zoeken, Overdracht)
- Keyboard shortcuts [1], [2], [3]
- Toont originele input voor context

Voortgang: Epic 4 compleet (8 SP)

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

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

components/swift/blocks/fallback-picker.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+/**
+ * Fallback Picker
+ *
+ * Visual intent selector shown when classification confidence is low.
+ * E4.S4: Grid met block opties, keyboard shortcuts (1-3).
+ */
+
+import { useEffect, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { FileText, Search, ArrowRightLeft, X } from 'lucide-react';
+import { useSwiftStore } from '@/stores/swift-store';
+import type { BlockType } from '@/lib/swift/types';
+
+interface FallbackPickerProps {
+  originalInput?: string;
+}
+
+interface BlockOption {
+  type: BlockType;
+  label: string;
+  description: string;
+  icon: typeof FileText;
+  shortcut: string;
+  color: string;
+}
+
+const BLOCK_OPTIONS: BlockOption[] = [
+  {
+    type: 'dagnotitie',
+    label: 'Notitie',
+    description: 'Schrijf een dagnotitie',
+    icon: FileText,
+    shortcut: '1',
+    color: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+  },
+  {
+    type: 'zoeken',
+    label: 'Zoeken',
+    description: 'Zoek een patiënt',
+    icon: Search,
+    shortcut: '2',
+    color: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
+  },
+  {
+    type: 'overdracht',
+    label: 'Overdracht',
+    description: 'Bekijk overdracht',
+    icon: ArrowRightLeft,
+    shortcut: '3',
+    color: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  },
+];
+
+export function FallbackPicker({ originalInput }: FallbackPickerProps) {
+  const { openBlock, closeBlock, addRecentAction } = useSwiftStore();
+
+  const handleSelect = useCallback(
+    (option: BlockOption) => {
+      // Pass original input as content for dagnotitie, or as search query for zoeken
+      const prefillData =
+        option.type === 'dagnotitie'
+          ? { content: originalInput }
+          : option.type === 'zoeken'
+            ? { patientName: originalInput }
+            : {};
+
+      openBlock(option.type, prefillData);
+
+      addRecentAction({
+        intent: option.type,
+        label: option.label,
+      });
+    },
+    [openBlock, addRecentAction, originalInput]
+  );
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't handle if in input field
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+
+      // Number keys 1-3 for quick select
+      const keyNum = parseInt(e.key);
+      if (keyNum >= 1 && keyNum <= BLOCK_OPTIONS.length) {
+        e.preventDefault();
+        handleSelect(BLOCK_OPTIONS[keyNum - 1]);
+      }
+
+      // Escape to close
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeBlock();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleSelect, closeBlock]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] as [number, number, number, number] }}
+      className="w-full max-w-md bg-slate-800 rounded-xl border border-slate-700 shadow-2xl overflow-hidden"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-slate-700">
+        <h2 className="text-lg font-medium text-white">Wat wil je doen?</h2>
+        <button
+          onClick={closeBlock}
+          className="p-1 rounded hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
+          title="Sluiten (Esc)"
+          aria-label="Sluiten"
+        >
+          <X size={20} />
+        </button>
+      </div>
+
+      {/* Original input display */}
+      {originalInput && (
+        <div className="px-4 py-2 bg-slate-900/50 border-b border-slate-700">
+          <p className="text-sm text-slate-400">
+            Je zei: <span className="text-slate-300">&quot;{originalInput}&quot;</span>
+          </p>
+        </div>
+      )}
+
+      {/* Options grid */}
+      <div className="p-4">
+        <div className="grid grid-cols-3 gap-3">
+          {BLOCK_OPTIONS.map((option) => (
+            <motion.button
+              key={option.type}
+              onClick={() => handleSelect(option)}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              className={`flex flex-col items-center gap-2 p-4 rounded-lg border transition-all ${option.color} hover:brightness-110`}
+            >
+              <option.icon size={28} />
+              <span className="font-medium text-sm">{option.label}</span>
+              <span className="text-xs opacity-60 text-center">{option.description}</span>
+              <span className="mt-1 px-2 py-0.5 bg-slate-900/50 rounded text-xs text-slate-400">
+                [{option.shortcut}]
+              </span>
+            </motion.button>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer hint */}
+      <div className="px-4 py-2 bg-slate-900/30 border-t border-slate-700">
+        <p className="text-xs text-slate-500 text-center">
+          Druk op [1], [2] of [3] voor snelle selectie
+        </p>
+      </div>
+    </motion.div>
+  );
+}

components/swift/blocks/index.ts

@@ -7,3 +7,4 @@ export { DagnotatieBlock } from './dagnotitie-block';
 export { ZoekenBlock } from './zoeken-block';
 export { OverdrachtBlock } from './overdracht-block';
 export { PatientContextCard } from './patient-context-card';
+export { FallbackPicker } from './fallback-picker';

components/swift/command-center/canvas-area.tsx

@@ -8,12 +8,12 @@
 
 import { AnimatePresence, motion } from 'framer-motion';
 import { useSwiftStore } from '@/stores/swift-store';
-import type { BlockType } from '@/lib/swift/types';
-import type { BlockPrefillData } from '@/stores/swift-store';
+import type { BlockType, BlockPrefillData } from '@/stores/swift-store';
 import { DagnotatieBlock } from '../blocks/dagnotitie-block';
 import { ZoekenBlock } from '../blocks/zoeken-block';
 import { OverdrachtBlock } from '../blocks/overdracht-block';
 import { PatientContextCard } from '../blocks/patient-context-card';
+import { FallbackPicker } from '../blocks/fallback-picker';
 
 export function CanvasArea() {
   const { activeBlock, prefillData, activePatient } = useSwiftStore();
@@ -26,6 +26,8 @@ export function CanvasArea() {
         return <ZoekenBlock prefill={prefill} />;
       case 'overdracht':
         return <OverdrachtBlock prefill={prefill} />;
+      case 'fallback':
+        return <FallbackPicker originalInput={prefill.content} />;
       default:
         return null;
     }

components/swift/command-center/command-input.tsx

@@ -152,29 +152,16 @@ export const CommandInput = forwardRef<HTMLInputElement>(function CommandInput(_
         
         clearInput();
       } else {
-        // Low confidence or unknown intent - temporary fallback to dagnotitie
-        // TODO: Replace with FallbackPicker in E4.S4
-        openBlock('dagnotitie', { content: inputText });
-        
-        addRecentAction({
-          intent: 'dagnotitie',
-          label: inputText.slice(0, 50),
-        });
-        
+        // Low confidence or unknown intent - show FallbackPicker
+        openBlock('fallback', { content: inputText });
         clearInput();
       }
     } catch (error) {
       console.error('Error processing intent:', error);
-      
-      // On error, fallback to dagnotitie with the input as content
+
+      // On error, show FallbackPicker so user can choose
       // This ensures the user's input is not lost
-      openBlock('dagnotitie', { content: inputText });
-      
-      addRecentAction({
-        intent: 'dagnotitie',
-        label: inputText.slice(0, 50),
-      });
-      
+      openBlock('fallback', { content: inputText });
       clearInput();
     } finally {
       setIsProcessing(false);