ui: migrate to shadcn/ui primitives across dialogs, filters, and forms

Adopts shadcn/ui components (Dialog, Button, Input, Select, Popover,
Command, Checkbox, Switch, Toggle, Calendar, etc.) across the app,
replacing hand-rolled modals, dropdowns, and form controls. Adds a
reusable cmdk-backed MultiSelect for the Type, Tags, and Flag filters
so all multi-value filter popovers share one component and layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/auth/LoginPage.tsx

@@ -1,5 +1,9 @@
 import { useState, type FormEvent } from 'react'
 import { useAuth } from '../../contexts/AuthContext'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
 export function LoginPage() {
   const { login } = useAuth()
@@ -34,47 +38,37 @@ export function LoginPage() {
         </h1>
 
         {error && (
-          <div className="rounded bg-red-900/30 px-3 py-2 text-sm text-red-300">
-            {error}
-          </div>
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
 
-        <div className="space-y-1">
-          <label htmlFor="login-user" className="block text-sm text-text-muted">
-            Username
-          </label>
-          <input
+        <div className="space-y-1.5">
+          <Label htmlFor="login-user">Username</Label>
+          <Input
             id="login-user"
             type="text"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
             required
             autoFocus
-            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
           />
         </div>
 
-        <div className="space-y-1">
-          <label htmlFor="login-pass" className="block text-sm text-text-muted">
-            Password
-          </label>
-          <input
+        <div className="space-y-1.5">
+          <Label htmlFor="login-pass">Password</Label>
+          <Input
             id="login-pass"
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
-            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
           />
         </div>
 
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full rounded bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent/80 disabled:opacity-50"
-        >
+        <Button type="submit" disabled={loading} className="w-full">
           {loading ? 'Signing in\u2026' : 'Sign In'}
-        </button>
+        </Button>
       </form>
     </div>
   )

frontend/src/components/auth/SetupPage.tsx

@@ -1,6 +1,10 @@
 import { useState, type FormEvent } from 'react'
 import { useAuth } from '../../contexts/AuthContext'
 import api from '../../services/api'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 
 export function SetupPage() {
   const { onSetupComplete } = useAuth()
@@ -58,61 +62,48 @@ export function SetupPage() {
         </div>
 
         {error && (
-          <div className="rounded bg-red-900/30 px-3 py-2 text-sm text-red-300">
-            {error}
-          </div>
+          <Alert variant="destructive">
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
         )}
 
-        <div className="space-y-1">
-          <label htmlFor="setup-user" className="block text-sm text-text-muted">
-            Username
-          </label>
-          <input
+        <div className="space-y-1.5">
+          <Label htmlFor="setup-user">Username</Label>
+          <Input
             id="setup-user"
             type="text"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
             required
             autoFocus
-            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
           />
         </div>
 
-        <div className="space-y-1">
-          <label htmlFor="setup-pass" className="block text-sm text-text-muted">
-            Password
-          </label>
-          <input
+        <div className="space-y-1.5">
+          <Label htmlFor="setup-pass">Password</Label>
+          <Input
             id="setup-pass"
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
-            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
           />
         </div>
 
-        <div className="space-y-1">
-          <label htmlFor="setup-confirm" className="block text-sm text-text-muted">
-            Confirm Password
-          </label>
-          <input
+        <div className="space-y-1.5">
+          <Label htmlFor="setup-confirm">Confirm Password</Label>
+          <Input
             id="setup-confirm"
             type="password"
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             required
-            className="w-full rounded border border-border bg-bg px-3 py-2 text-sm text-text outline-none focus:border-accent"
           />
         </div>
 
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full rounded bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent/80 disabled:opacity-50"
-        >
+        <Button type="submit" disabled={loading} className="w-full">
           {loading ? 'Creating account\u2026' : 'Create Admin Account'}
-        </button>
+        </Button>
       </form>
     </div>
   )