fix: resolve all TypeScript errors in web app

apps/web/src/components/personalities/PersonalityForm.tsx

@@ -45,7 +45,7 @@ export function PersonalityForm({ personality, onSubmit, onCancel }: Personality
     name: personality?.name || "",
     description: personality?.description || "",
     tone: personality?.tone || "",
-    formalityLevel: personality?.formalityLevel || "NEUTRAL",
+    formalityLevel: (personality?.formalityLevel ?? "NEUTRAL") as FormalityLevel,
     systemPromptTemplate: personality?.systemPromptTemplate || "",
     isDefault: personality?.isDefault || false,
     isActive: personality?.isActive ?? true,
@@ -158,7 +158,7 @@ export function PersonalityForm({ personality, onSubmit, onCancel }: Personality
             </div>
             <Switch
               id="isDefault"
-              checked={formData.isDefault}
+              checked={formData.isDefault ?? false}
               onCheckedChange={(checked) => setFormData({ ...formData, isDefault: checked })}
             />
           </div>
@@ -172,7 +172,7 @@ export function PersonalityForm({ personality, onSubmit, onCancel }: Personality
             </div>
             <Switch
               id="isActive"
-              checked={formData.isActive}
+              checked={formData.isActive ?? true}
               onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })}
             />
           </div>

apps/web/src/components/personalities/PersonalityPreview.tsx

@@ -27,7 +27,7 @@ const FORMALITY_LABELS: Record<string, string> = {
 };
 
 export function PersonalityPreview({ personality }: PersonalityPreviewProps): React.ReactElement {
-  const [selectedPrompt, setSelectedPrompt] = useState<string>(SAMPLE_PROMPTS[0]);
+  const [selectedPrompt, setSelectedPrompt] = useState<string>(SAMPLE_PROMPTS[0]!);
 
   return (
     <Card>
@@ -66,16 +66,19 @@ export function PersonalityPreview({ personality }: PersonalityPreviewProps): Re
         <div className="space-y-2">
           <label className="text-sm font-medium">Preview with Sample Prompt:</label>
           <div className="flex flex-wrap gap-2">
-            {SAMPLE_PROMPTS.map((prompt) => (
-              <Button
-                key={prompt}
-                variant={selectedPrompt === prompt ? "default" : "outline"}
-                size="sm"
-                onClick={() => setSelectedPrompt(prompt)}
-              >
-                {prompt.substring(0, 30)}...
-              </Button>
-            ))}
+            {SAMPLE_PROMPTS.map((prompt) => {
+              const variant = selectedPrompt === prompt ? "default" : "outline";
+              return (
+                <Button
+                  key={prompt}
+                  variant={variant}
+                  size="sm"
+                  onClick={() => setSelectedPrompt(prompt)}
+                >
+                  {prompt.substring(0, 30)}...
+                </Button>
+              );
+            })}
           </div>
         </div>
 

apps/web/src/components/personalities/PersonalitySelector.tsx

@@ -52,7 +52,7 @@ export function PersonalitySelector({
           {label}
         </Label>
       )}
-      <Select value={value} onValueChange={onChange} disabled={isLoading}>
+      <Select {...(value && { value })} {...(onChange && { onValueChange: onChange })} disabled={isLoading}>
         <SelectTrigger id="personality-select">
           <SelectValue placeholder={isLoading ? "Loading..." : "Choose a personality"} />
         </SelectTrigger>