feat: redesign UI with Twilight design system

Outfit + JetBrains Mono typography, soft dark palette with blue
undertones, electric teal primary, purple-branded AI features,
noise texture, glow effects, glassmorphism, and refined grid/tree.

src/components/ai/AiBar.tsx

@@ -52,21 +52,21 @@ export function AiBar({ connectionId, onSqlGenerated, onClose, onExecute }: Prop
   };
 
   return (
-    <div className="flex items-center gap-2 border-b bg-muted/50 px-2 py-1">
-      <Sparkles className="h-3.5 w-3.5 shrink-0 text-purple-500" />
+    <div className="tusk-ai-bar flex items-center gap-2 px-2 py-1.5 tusk-fade-in">
+      <Sparkles className="h-3.5 w-3.5 shrink-0 tusk-ai-icon" />
       <Input
         value={prompt}
         onChange={(e) => setPrompt(e.target.value)}
         onKeyDown={handleKeyDown}
         placeholder="Describe the query you want..."
-        className="h-7 min-w-0 flex-1 text-xs"
+        className="h-7 min-w-0 flex-1 border-tusk-purple/20 bg-tusk-purple/5 text-xs placeholder:text-muted-foreground/40 focus:border-tusk-purple/40 focus:ring-tusk-purple/20"
         autoFocus
         disabled={generateMutation.isPending}
       />
       <Button
-        size="sm"
+        size="xs"
         variant="ghost"
-        className="h-6 gap-1 text-xs"
+        className="gap-1 text-[11px] text-tusk-purple hover:bg-tusk-purple/10 hover:text-tusk-purple"
         onClick={handleGenerate}
         disabled={generateMutation.isPending || !prompt.trim()}
       >
@@ -78,23 +78,23 @@ export function AiBar({ connectionId, onSqlGenerated, onClose, onExecute }: Prop
       </Button>
       {prompt.trim() && (
         <Button
-          size="sm"
+          size="icon-xs"
           variant="ghost"
-          className="h-6 w-6 p-0"
           onClick={() => setPrompt("")}
           title="Clear prompt"
           disabled={generateMutation.isPending}
+          className="text-muted-foreground"
         >
           <Eraser className="h-3 w-3" />
         </Button>
       )}
       <AiSettingsPopover />
       <Button
-        size="sm"
+        size="icon-xs"
         variant="ghost"
-        className="h-6 w-6 p-0"
         onClick={onClose}
         title="Close AI bar"
+        className="text-muted-foreground"
       >
         <X className="h-3 w-3" />
       </Button>