feat(frontend): compact theme selector, adaptive prompt editor layout

- Theme dropdown: 亮色/暗色/随系统 as one row of three icons
- Prompt editor: sections centered (max-w-7xl) when debug drawer is
  closed, full-width aligned with tab edges when open
- Debug drawer opens by default
- Prompt textarea: 8 → 16 rows

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/layout/ThemeToggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Check, Laptop, Moon, Sun } from "lucide-react";
+import { Laptop, Moon, Sun } from "lucide-react";
 
 export type ThemeMode = "light" | "dark" | "system";
 
@@ -60,7 +60,7 @@ export function ThemeModeSelector() {
     <div
       role="radiogroup"
       aria-label="界面主题"
-      className="space-y-1"
+      className="grid grid-cols-3 gap-1"
     >
       {themeOptions.map((option) => {
         const Icon = option.icon;
@@ -72,17 +72,17 @@ export function ThemeModeSelector() {
             type="button"
             role="radio"
             aria-checked={selected}
+            aria-label={option.label}
+            title={option.label}
             onClick={() => selectMode(option.value)}
             className={[
-              "flex h-10 w-full items-center gap-2.5 rounded-xl px-3 text-sm font-normal transition-colors",
+              "flex h-9 items-center justify-center rounded-xl transition-colors",
               selected
                 ? "bg-surface-strong text-foreground shadow-sm"
                 : "text-muted-foreground hover:bg-surface-strong/60 hover:text-foreground",
             ].join(" ")}
           >
             <Icon size={16} />
-            <span className="min-w-0 flex-1 text-left">{option.label}</span>
-            {selected && <Check size={15} className="shrink-0" />}
           </button>
         );
       })}