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,61 +329,71 @@
     </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>
-        <Label class="mb-1" for="endpoint">Endpoint</Label>
+        <Dialog.Title>Chat Settings</Dialog.Title>
-        <Select.Root
+      </Dialog.Header>
-          type="single"
+
-          value={$endpointStore}
+      <div class="space-y-4">
-          onValueChange={(v) => v && endpointStore.set(v as Endpoint)}
+        <div>
-        >
+          <Label class="mb-1" for="endpoint">Endpoint</Label>
-          <Select.Trigger class="w-full">/{$endpointStore}</Select.Trigger>
+          <Select.Root
-          <Select.Content>
+            type="single"
-            <Select.Item value="v1/chat/completions">/v1/chat/completions</Select.Item>
+            value={$endpointStore}
-            <Select.Item value="v1/messages">/v1/messages</Select.Item>
+            onValueChange={(v) => v && endpointStore.set(v as Endpoint)}
-            <Select.Item value="v1/responses">/v1/responses</Select.Item>
+          >
-          </Select.Content>
+            <Select.Trigger class="w-full">/{$endpointStore}</Select.Trigger>
-        </Select.Root>
+            <Select.Content>
-      </div>
+              <Select.Item value="v1/chat/completions">/v1/chat/completions</Select.Item>
-      <div class="mb-4">
+              <Select.Item value="v1/messages">/v1/messages</Select.Item>
-        <Label class="mb-1" for="system-prompt">System Prompt</Label>
+              <Select.Item value="v1/responses">/v1/responses</Select.Item>
-        <Textarea
+            </Select.Content>
-          id="system-prompt"
+          </Select.Root>
-          class="resize-none"
+        </div>
-          placeholder="You are a helpful assistant..."
+        <div>
-          rows={3}
+          <Label class="mb-1" for="system-prompt">System Prompt</Label>
-          bind:value={$systemPromptStore}
+          <Textarea
-          disabled={isStreaming}
+            id="system-prompt"
-        />
+            class="resize-none"
-      </div>
+            placeholder="You are a helpful assistant..."
-      <div class="mb-4">
+            rows={3}
-        <Label class="mb-1" for="temperature">
+            bind:value={$systemPromptStore}
-          Temperature: {$temperatureStore.toFixed(2)}
+            disabled={isStreaming}
-        </Label>
+          />
-        <input
+        </div>
-          id="temperature"
+        <div>
-          type="range"
+          <Label class="mb-1" for="temperature">
-          min="0"
+            Temperature: {$temperatureStore.toFixed(2)}
-          max="2"
+          </Label>
-          step="0.05"
+          <input
-          class="accent-primary w-full"
+            id="temperature"
-          bind:value={$temperatureStore}
+            type="range"
-          disabled={isStreaming}
+            min="0"
-        />
+            max="2"
-        <div class="text-muted-foreground mt-1 flex justify-between text-xs">
+            step="0.05"
-          <span>Precise (0)</span>
+            class="accent-primary w-full"
-          <span>Creative (2)</span>
+            bind:value={$temperatureStore}
+            disabled={isStreaming}
+          />
+          <div class="text-muted-foreground mt-1 flex justify-between text-xs">
+            <span>Precise (0)</span>
+            <span>Creative (2)</span>
+          </div>
+        </div>
+        <div>
+          <Label class="mb-1" for="max-tokens">Max Tokens</Label>
+          <Input id="max-tokens" type="number" min="1" bind:value={$maxTokensStore} disabled={isStreaming} />
+          <p class="text-muted-foreground mt-1 text-xs">Required for /v1/messages.</p>
         </div>
       </div>
-      <div>
+
-        <Label class="mb-1" for="max-tokens">Max Tokens</Label>
+      <Dialog.Footer>
-        <Input id="max-tokens" type="number" min="1" bind:value={$maxTokensStore} disabled={isStreaming} />
+        <Button variant="outline" onclick={() => (showSettings = false)}>Done</Button>
-        <p class="text-muted-foreground mt-1 text-xs">Required for /v1/messages.</p>
+      </Dialog.Footer>
-      </div>
+    </Dialog.Content>
-    </div>
+  </Dialog.Root>
-  {/if}
 
   <!-- Empty state for no models configured -->
   {#if !hasModels}