ui: convert chat settings panel to a dialog

Replace the inline settings panel with a modal Dialog that pops up
over the chat interface, matching the CaptureDialog pattern.

ui-svelte/src/components/playground/ChatInterface.svelte

@@ -13,6 +13,7 @@
   import { Textarea } from "$lib/components/ui/textarea/index.js";
   import { Label } from "$lib/components/ui/label/index.js";
   import * as Select from "$lib/components/ui/select/index.js";
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
   import { X } from "@lucide/svelte";
 
   const selectedModelStore = persistentStore<string>("playground-selected-model", "");
@@ -319,7 +320,7 @@
   <div class="shrink-0 flex flex-wrap gap-2 mb-4">
     <ModelSelector bind:value={$selectedModelStore} placeholder="Select a model..." disabled={isStreaming} />
     <div class="flex gap-2">
-      <Button variant="outline" size="icon" onclick={() => (showSettings = !showSettings)} title="Settings">
+      <Button variant="outline" size="icon" onclick={() => (showSettings = true)} title="Settings">
         <Settings />
       </Button>
       <Button variant="outline" onclick={newChat} disabled={messages.length === 0 && !isStreaming}>
@@ -328,10 +329,15 @@
     </div>
   </div>
 
-  <!-- Settings panel -->
+  <!-- Settings dialog -->
-  {#if showSettings}
+  <Dialog.Root bind:open={showSettings}>
-    <div class="bg-muted/40 mb-4 shrink-0 rounded-lg border p-4">
+    <Dialog.Content class="max-w-xl">
-      <div class="mb-4">
+      <Dialog.Header>
+        <Dialog.Title>Chat Settings</Dialog.Title>
+      </Dialog.Header>
+
+      <div class="space-y-4">
+        <div>
           <Label class="mb-1" for="endpoint">Endpoint</Label>
           <Select.Root
             type="single"
@@ -346,7 +352,7 @@
             </Select.Content>
           </Select.Root>
         </div>
-      <div class="mb-4">
+        <div>
           <Label class="mb-1" for="system-prompt">System Prompt</Label>
           <Textarea
             id="system-prompt"
@@ -357,7 +363,7 @@
             disabled={isStreaming}
           />
         </div>
-      <div class="mb-4">
+        <div>
           <Label class="mb-1" for="temperature">
             Temperature: {$temperatureStore.toFixed(2)}
           </Label>
@@ -382,7 +388,12 @@
           <p class="text-muted-foreground mt-1 text-xs">Required for /v1/messages.</p>
         </div>
       </div>
-  {/if}
+
+      <Dialog.Footer>
+        <Button variant="outline" onclick={() => (showSettings = false)}>Done</Button>
+      </Dialog.Footer>
+    </Dialog.Content>
+  </Dialog.Root>
 
   <!-- Empty state for no models configured -->
   {#if !hasModels}