create-interview-cockpit 0.4.0 → 0.6.0

package/template/client/src/components/AiSettingsModal.tsx

@@ -1,28 +1,55 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   X,
-  RotateCcw,
+  GripVertical,
+  Maximize2,
+  Minimize2,
   Save,
+  Download,
   ChevronDown,
   ChevronRight,
   Check,
   Loader2,
   Plus,
   Trash2,
+  Terminal,
+  Play,
+  StopCircle,
 } from "lucide-react";
 import { useStore } from "../store";
-import type { AiSettings, PromptGroup } from "../api";
+import type {
+  AiSettings,
+  PromptGroup,
+  InfraCommandStreamMessage,
+} from "../api";
+import * as api from "../api";
+import { DEFAULT_INFRA_LAB } from "../infraLab";
+
+const MIN_W = 480;
+const MIN_H = 420;
+const DEFAULT_W = 860;
+const DEFAULT_H = 700;
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+
+interface ConsoleLine {
+  id: string;
+  kind: "stdout" | "stderr" | "info" | "input";
+  text: string;
+}
 
 // ── Committed baseline — mirrors data/ai-settings.json ───────────────────────
 const BASELINE: AiSettings = {
   systemPrompt:
-    "You are a senior engineering interview coach.\n\nHighest priority: follow the user's explicit response preferences and current conversation context. If they conflict with your default teaching behavior, the user's preference wins.\nExplain clearly, accurately, and practically.\nOnly include Mermaid diagrams, code blocks, or tables when the user explicitly asks for them or when they materially improve the answer.\nIf you show code, use a fenced code block with the correct language.\n\nMermaid syntax rules (follow strictly):\n- Wrap node labels in quotes when they contain special characters: A[\"Microservice A (Producer)\"]\n- Edge labels use |text| syntax: A -->|sends message| B\n- Never put parentheses or brackets inside [] without quoting the label\n- Use simple node IDs (letters/numbers) and put descriptive text in the label\n\nYou can produce animated diagrams using ```viz blocks for flows, step-through walkthroughs, or any explanation that benefits from animation. Call getVizGuide() first to get the full spec reference before writing a viz block.",
+    "You are a senior engineering interview coach.\n\nHighest priority: follow the user's explicit response preferences and current conversation context. If they conflict with your default teaching behavior, the user's preference wins.\nExplain clearly, accurately, and practically.\nOnly include Mermaid diagrams, plot blocks, code blocks, or tables when the user explicitly asks for them or when they materially improve the answer.\nIf you show code, use a fenced code block with the correct language.\n\nMermaid syntax rules (follow strictly):\n- Wrap node labels in quotes when they contain special characters: A[\"Microservice A (Producer)\"]\n- Edge labels use |text| syntax: A -->|sends message| B\n- Never put parentheses or brackets inside [] without quoting the label\n- Use simple node IDs (letters/numbers) and put descriptive text in the label\n\nYou can produce animated diagrams using ```viz blocks for flows, step-through walkthroughs, or any explanation that benefits from animation. Call getVizGuide() first to get the full spec reference before writing a viz block.\n\nYou can produce graphs, curves, distributions, and data charts using ```plot blocks. Call getPlotGuide() first to get the full plotting spec reference before writing a plot block.",
   responseProfiles: {
     concise: { maxOutputTokens: 1000, maxSteps: 3 },
     moderate: { maxOutputTokens: 1000, maxSteps: 5 },
     normal: { maxOutputTokens: 3000, maxSteps: 5 },
+    brief: { maxOutputTokens: 10000, maxSteps: 5 },
   },
   vizGuide: "",
+  plotGuide: "",
+  alwaysSendPrefsDefault: false,
   promptGroups: {
     length: {
       label: "Response Length",
@@ -62,6 +89,19 @@ const BASELINE: AiSettings = {
           "When using technical terms or abbreviations, immediately expand their meaning in square brackets right after the term — e.g. 'TCP [Transmission Control Protocol — a connection-oriented transport protocol]' or 'idempotent [an operation that produces the same result no matter how many times it is applied]'. Do this throughout your response so I never need to look anything up.",
       },
     },
+    "diagram-use": {
+      label: "Diagram Usage",
+      description: "Which diagrams to use and how often",
+      default: "none",
+      options: {
+        none: "",
+        vizcraft:
+          "Prioritize using vizcraft (viz) diagrams as much as possible. *NB:* Character limits do not apply to these diagrams",
+        mermaid:
+          "Prioritize using mermaid diagrams as much as possible. *NB:* Character limits do not apply to these diagrams",
+        plot: "Prioritize using plot blocks for graphs, curves, distributions, and data charts when they would make the explanation clearer. *NB:* Character limits do not apply to these plots",
+      },
+    },
   },
 };
 
@@ -347,13 +387,197 @@ function PromptGroupSection({
 // ── Main modal ───────────────────────────────────────────────────────────────
 
 export default function AiSettingsModal() {
-  const { aiSettings, saveAiSettings, closeSettings } = useStore();
+  const { aiSettings, saveAiSettings, closeSettings, currentQuestion } =
+    useStore();
   const [draft, setDraft] = useState<AiSettings>(() =>
     JSON.parse(JSON.stringify(aiSettings)),
   );
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
-  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // ── Drag / resize ─────────────────────────────────────────────
+  const [pos, setPos] = useState(() => ({
+    x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+  const [maximized, setMaximized] = useState(false);
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeDir = useRef<ResizeDir>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+  const savedPos = useRef(pos);
+  const savedSize = useRef(size);
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [maximized, pos],
+  );
+
+  const startResize = useCallback(
+    (dir: ResizeDir) => (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeDir.current = dir;
+      resizeStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+        ow: size.w,
+        oh: size.h,
+      };
+    },
+    [maximized, pos, size],
+  );
+
+  const toggleMax = useCallback(() => {
+    if (!maximized) {
+      savedPos.current = pos;
+      savedSize.current = size;
+      setMaximized(true);
+    } else {
+      setPos(savedPos.current);
+      setSize(savedSize.current);
+      setMaximized(false);
+    }
+  }, [maximized, pos, size]);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const drag = dragStart.current;
+      const resize = resizeStart.current;
+      const dir = resizeDir.current;
+      if (drag) {
+        setPos({
+          x: Math.max(0, drag.ox + e.clientX - drag.mx),
+          y: Math.max(0, drag.oy + e.clientY - drag.my),
+        });
+      }
+      if (resize && dir) {
+        const dx = e.clientX - resize.mx;
+        const dy = e.clientY - resize.my;
+        setSize((prev) => {
+          let w = prev.w,
+            h = prev.h;
+          if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+          if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+          if (dir.includes("w")) w = Math.max(MIN_W, resize.ow - dx);
+          if (dir.includes("n")) h = Math.max(MIN_H, resize.oh - dy);
+          return { w, h };
+        });
+        if (dir.includes("w"))
+          setPos((p) => ({
+            ...p,
+            x: Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx),
+          }));
+        if (dir.includes("n"))
+          setPos((p) => ({
+            ...p,
+            y: Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy),
+          }));
+      }
+    };
+    const onUp = () => {
+      dragStart.current = null;
+      resizeStart.current = null;
+      resizeDir.current = null;
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  // ── Console ───────────────────────────────────────────────────
+  const [consoleOpen, setConsoleOpen] = useState(false);
+  const [consoleLines, setConsoleLines] = useState<ConsoleLine[]>([]);
+  const [cmdInput, setCmdInput] = useState("");
+  const [consoleRunning, setConsoleRunning] = useState(false);
+  const consoleOutputRef = useRef<HTMLDivElement>(null);
+  const cmdAbortRef = useRef<{ aborted: boolean }>({ aborted: false });
+
+  const appendLine = useCallback((kind: ConsoleLine["kind"], text: string) => {
+    setConsoleLines((prev) => [
+      ...prev,
+      { id: crypto.randomUUID(), kind, text },
+    ]);
+  }, []);
+
+  useEffect(() => {
+    if (consoleOutputRef.current) {
+      consoleOutputRef.current.scrollTop =
+        consoleOutputRef.current.scrollHeight;
+    }
+  }, [consoleLines]);
+
+  const handleRunCommand = useCallback(async () => {
+    const cmd = cmdInput.trim();
+    if (!cmd || consoleRunning) return;
+    setCmdInput("");
+    setConsoleRunning(true);
+    const abort = { aborted: false };
+    cmdAbortRef.current = abort;
+    appendLine("input", `$ ${cmd}`);
+    try {
+      await api.streamInfraCommand(
+        {
+          questionId: currentQuestion?.id,
+          command: cmd,
+          workspace: DEFAULT_INFRA_LAB,
+        },
+        (msg: InfraCommandStreamMessage) => {
+          if (abort.aborted) return;
+          if (msg.type === "output") appendLine(msg.kind, msg.text);
+          else if (msg.type === "error") appendLine("stderr", msg.error);
+        },
+      );
+    } catch (err: unknown) {
+      if (!abort.aborted)
+        appendLine("stderr", (err as Error)?.message ?? "Command failed");
+    } finally {
+      if (!abort.aborted) setConsoleRunning(false);
+    }
+  }, [cmdInput, consoleRunning, currentQuestion, appendLine]);
+
+  const handleStop = useCallback(() => {
+    cmdAbortRef.current.aborted = true;
+    setConsoleRunning(false);
+    appendLine("info", "^C");
+  }, [appendLine]);
+
+  // ── New profile form state ────────────────────────────────────
+  const [showNewProfileForm, setShowNewProfileForm] = useState(false);
+  const [newProfileKey, setNewProfileKey] = useState("");
+
+  function resetNewProfileForm() {
+    setShowNewProfileForm(false);
+    setNewProfileKey("");
+  }
 
   // ── New group form state ─────────────────────
   const [showNewGroupForm, setShowNewGroupForm] = useState(false);
@@ -406,6 +630,26 @@ export default function AiSettingsModal() {
     }));
   }
 
+  function addProfile(key: string) {
+    const k = key.trim().toLowerCase().replace(/\s+/g, "-");
+    if (!k || k in draft.responseProfiles) return;
+    setDraft((d) => ({
+      ...d,
+      responseProfiles: {
+        ...d.responseProfiles,
+        [k]: { maxOutputTokens: 2000, maxSteps: 5 },
+      },
+    }));
+  }
+
+  function removeProfile(key: string) {
+    setDraft((d) => {
+      const next = { ...d.responseProfiles };
+      delete next[key];
+      return { ...d, responseProfiles: next };
+    });
+  }
+
   function patchGroupOption(groupKey: string, optKey: string, value: string) {
     setDraft((d) => ({
       ...d,
@@ -529,298 +773,661 @@ export default function AiSettingsModal() {
     }
   }
 
-  function handleReset() {
-    if (!window.confirm("Reset all settings to the committed baseline?"))
-      return;
-    setDraft(JSON.parse(JSON.stringify(BASELINE)));
+  function handleSaveAs() {
+    const blob = new Blob([JSON.stringify(draft, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "ai-settings.json";
+    a.click();
+    URL.revokeObjectURL(url);
   }
 
   // ── Render ────────────────────────────────────────────────────
   const profileKeys = Object.keys(draft.responseProfiles);
 
+  const windowStyle: React.CSSProperties = maximized
+    ? {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: 0,
+      }
+    : {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+        minWidth: MIN_W,
+        minHeight: MIN_H,
+      };
+
   return (
     <div
-      ref={overlayRef}
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
-      onMouseDown={(e) => {
-        if (e.target === overlayRef.current) closeSettings();
-      }}
+      className="fixed z-50 flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
+      style={windowStyle}
     >
-      <div className="relative w-full max-w-3xl max-h-[90vh] flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-700 shrink-0">
-          <h2 className="text-base font-semibold text-slate-100">
-            AI Settings
-          </h2>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={handleReset}
-              title="Reset to baseline defaults"
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
-            >
-              <RotateCcw className="w-3.5 h-3.5" />
-              Reset to defaults
-            </button>
-            <button
-              type="button"
-              onClick={closeSettings}
-              className="p-1.5 rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
-            >
-              <X className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
+      {/* ── Resize handles ── */}
+      {!maximized && (
+        <>
+          <div
+            className="absolute top-0 left-0 right-0 h-1 cursor-n-resize z-10"
+            onMouseDown={startResize("n")}
+          />
+          <div
+            className="absolute bottom-0 left-0 right-0 h-1 cursor-s-resize z-10"
+            onMouseDown={startResize("s")}
+          />
+          <div
+            className="absolute top-0 left-0 bottom-0 w-1 cursor-w-resize z-10"
+            onMouseDown={startResize("w")}
+          />
+          <div
+            className="absolute top-0 right-0 bottom-0 w-1 cursor-e-resize z-10"
+            onMouseDown={startResize("e")}
+          />
+          <div
+            className="absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20"
+            onMouseDown={startResize("nw")}
+          />
+          <div
+            className="absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20"
+            onMouseDown={startResize("ne")}
+          />
+          <div
+            className="absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20"
+            onMouseDown={startResize("sw")}
+          />
+          <div
+            className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20"
+            onMouseDown={startResize("se")}
+          />
+        </>
+      )}
 
-        {/* Scrollable body */}
-        <div className="flex-1 overflow-y-auto px-6 py-5 space-y-4">
-          {/* ── System Prompt ─────────────────────────────────── */}
-          <Section title="System Prompt">
-            <Textarea
-              value={draft.systemPrompt}
-              onChange={(v) => patchTop("systemPrompt", v)}
-              rows={8}
-            />
-          </Section>
+      {/* ── Title bar ── */}
+      <div
+        className="flex items-center gap-2 px-3 py-2.5 bg-slate-800 border-b border-slate-700 shrink-0"
+        onMouseDown={onTitleMouseDown}
+        style={{ cursor: maximized ? "default" : "grab" }}
+      >
+        <GripVertical className="w-3.5 h-3.5 text-slate-600 shrink-0" />
+        <span className="text-sm font-semibold text-slate-100 flex-1">
+          AI Settings
+        </span>
+        <button
+          type="button"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={toggleMax}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+          title={maximized ? "Restore" : "Maximise"}
+        >
+          {maximized ? (
+            <Minimize2 className="w-3.5 h-3.5" />
+          ) : (
+            <Maximize2 className="w-3.5 h-3.5" />
+          )}
+        </button>
+        <button
+          type="button"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={closeSettings}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors shrink-0"
+          title="Close (Esc)"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* Scrollable body */}
+      <div className="flex-1 overflow-y-auto px-6 py-5 space-y-4 min-h-0">
+        {/* ── System Prompt ─────────────────────────────────── */}
+        <Section title="System Prompt">
+          <Textarea
+            value={draft.systemPrompt}
+            onChange={(v) => patchTop("systemPrompt", v)}
+            rows={8}
+          />
+        </Section>
 
-          {/* ── Response Profiles ─────────────────────────────── */}
-          <Section title="Response Profiles (token limits per length setting)">
-            <div className="grid grid-cols-3 gap-4">
-              {profileKeys.map((key) => (
-                <div key={key} className="space-y-3">
+        {/* ── Response Profiles ─────────────────────────────── */}
+        <Section title="Response Profiles (token limits per length setting)">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
+            {profileKeys.map((key) => (
+              <div key={key} className="space-y-3">
+                <div className="flex items-center justify-between">
                   <p className="text-xs font-semibold text-cyan-400 capitalize">
                     {key}
                   </p>
-                  <div>
-                    <Label>Max Output Tokens</Label>
-                    <NumberInput
-                      value={draft.responseProfiles[key].maxOutputTokens}
-                      onChange={(v) =>
-                        patchProfileField(key, "maxOutputTokens", v)
-                      }
-                      min={100}
-                      max={32000}
-                      step={100}
-                    />
-                  </div>
-                  <div>
-                    <Label>Max Steps</Label>
-                    <NumberInput
-                      value={draft.responseProfiles[key].maxSteps}
-                      onChange={(v) => patchProfileField(key, "maxSteps", v)}
-                      min={1}
-                      max={20}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Section>
-
-          {/* ── Prompt Groups ─────────────────────────────────── */}
-          {Object.entries(draft.promptGroups).map(([groupKey, group]) => (
-            <PromptGroupSection
-              key={groupKey}
-              groupKey={groupKey}
-              group={group}
-              onOptionChange={(optKey, value) =>
-                patchGroupOption(groupKey, optKey, value)
-              }
-              onDefaultChange={(optKey) => patchGroupDefault(groupKey, optKey)}
-              onAddOption={(optKey, prompt) =>
-                addGroupOption(groupKey, optKey, prompt)
-              }
-              onRemoveOption={(optKey) => removeGroupOption(groupKey, optKey)}
-              onRemoveGroup={() => removeGroup(groupKey)}
-              onMetaChange={(field, value) =>
-                patchGroupMeta(groupKey, field, value)
-              }
-            />
-          ))}
-
-          {/* ── Add group form ─────────────────────────────── */}
-          {showNewGroupForm ? (
-            <div className="border border-cyan-600/30 rounded-lg p-4 space-y-4 bg-slate-900/60">
-              <p className="text-sm font-medium text-cyan-300">
-                New setting group
-              </p>
-              <div className="grid grid-cols-3 gap-3">
-                <div>
-                  <Label>Key (internal ID)</Label>
-                  <input
-                    type="text"
-                    value={newGroupKey}
-                    onChange={(e) =>
-                      setNewGroupKey(
-                        e.target.value.toLowerCase().replace(/\s+/g, "-"),
-                      )
-                    }
-                    placeholder="e.g. tone"
-                    className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
-                  />
-                  {newGroupKey && newGroupKey in draft.promptGroups && (
-                    <p className="text-xs text-red-400 mt-1">
-                      Key already exists.
-                    </p>
+                  {profileKeys.length > 1 && (
+                    <button
+                      type="button"
+                      title={`Remove "${key}" profile`}
+                      onClick={() => removeProfile(key)}
+                      className="p-0.5 rounded text-slate-600 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
                   )}
                 </div>
                 <div>
-                  <Label>Label (shown in bottom bar)</Label>
-                  <input
-                    type="text"
-                    value={newGroupLabel}
-                    onChange={(e) => setNewGroupLabel(e.target.value)}
-                    placeholder="e.g. Response Tone"
-                    className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                  <Label>Max Output Tokens</Label>
+                  <NumberInput
+                    value={draft.responseProfiles[key].maxOutputTokens}
+                    onChange={(v) =>
+                      patchProfileField(key, "maxOutputTokens", v)
+                    }
+                    min={100}
+                    max={32000}
+                    step={100}
                   />
                 </div>
                 <div>
-                  <Label>Description (optional)</Label>
-                  <input
-                    type="text"
-                    value={newGroupDescription}
-                    onChange={(e) => setNewGroupDescription(e.target.value)}
-                    placeholder="Shown in the settings panel"
-                    className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                  <Label>Max Steps</Label>
+                  <NumberInput
+                    value={draft.responseProfiles[key].maxSteps}
+                    onChange={(v) => patchProfileField(key, "maxSteps", v)}
+                    min={1}
+                    max={20}
                   />
                 </div>
               </div>
+            ))}
+          </div>
 
-              <div className="space-y-2">
-                <Label>Options (first will be the default)</Label>
-                {newGroupOptions.map((opt, i) => (
-                  <div key={i} className="flex gap-2 items-start">
-                    <input
-                      type="text"
-                      value={opt.key}
-                      onChange={(e) => {
-                        const upd = [...newGroupOptions];
-                        upd[i] = {
-                          ...upd[i],
-                          key: e.target.value
-                            .toLowerCase()
-                            .replace(/\s+/g, "-"),
-                        };
-                        setNewGroupOptions(upd);
-                      }}
-                      placeholder="key"
-                      className="w-28 shrink-0 bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
-                    />
-                    <input
-                      type="text"
-                      value={opt.prompt}
-                      onChange={(e) => {
-                        const upd = [...newGroupOptions];
-                        upd[i] = { ...upd[i], prompt: e.target.value };
-                        setNewGroupOptions(upd);
-                      }}
-                      placeholder="Prompt text appended to message when selected (can be empty)"
-                      className="flex-1 bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
-                    />
-                    {newGroupOptions.length > 1 && (
-                      <button
-                        type="button"
-                        onClick={() =>
-                          setNewGroupOptions((prev) =>
-                            prev.filter((_, j) => j !== i),
-                          )
-                        }
-                        className="mt-1 p-1 rounded text-slate-600 hover:text-red-400 hover:bg-red-500/10 transition-colors"
-                      >
-                        <Trash2 className="w-3.5 h-3.5" />
-                      </button>
-                    )}
-                  </div>
-                ))}
-                <button
-                  type="button"
-                  onClick={() =>
-                    setNewGroupOptions((prev) => [
-                      ...prev,
-                      { key: "", prompt: "" },
-                    ])
+          {/* Add profile */}
+          {showNewProfileForm ? (
+            <div className="mt-4 border border-slate-700 rounded-lg p-3 space-y-2 bg-slate-800/40">
+              <p className="text-xs font-medium text-slate-400">
+                New profile key
+              </p>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={newProfileKey}
+                  onChange={(e) =>
+                    setNewProfileKey(
+                      e.target.value.toLowerCase().replace(/\s+/g, "-"),
+                    )
                   }
-                  className="flex items-center gap-1 text-xs text-slate-500 hover:text-cyan-400 transition-colors"
-                >
-                  <Plus className="w-3.5 h-3.5" /> Add option row
-                </button>
-              </div>
-
-              <div className="flex gap-2 pt-1">
+                  placeholder="e.g. brief"
+                  className="flex-1 bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                />
                 <button
                   type="button"
-                  onClick={addNewGroup}
+                  onClick={() => {
+                    addProfile(newProfileKey);
+                    resetNewProfileForm();
+                  }}
                   disabled={
-                    !newGroupKey.trim() ||
-                    newGroupKey in draft.promptGroups ||
-                    newGroupOptions.every((o) => !o.key.trim())
+                    !newProfileKey.trim() ||
+                    newProfileKey.trim() in draft.responseProfiles
                   }
-                  className="px-4 py-1.5 text-sm rounded bg-cyan-600 hover:bg-cyan-500 disabled:opacity-40 text-white transition-colors"
+                  className="px-3 py-1 text-xs rounded bg-cyan-700 hover:bg-cyan-600 disabled:opacity-40 text-white transition-colors"
                 >
-                  Create group
+                  Add
                 </button>
                 <button
                   type="button"
-                  onClick={resetNewGroupForm}
-                  className="px-4 py-1.5 text-sm rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+                  onClick={resetNewProfileForm}
+                  className="px-3 py-1 text-xs rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
                 >
                   Cancel
                 </button>
               </div>
+              {newProfileKey.trim() in draft.responseProfiles && (
+                <p className="text-xs text-red-400">
+                  A profile with that key already exists.
+                </p>
+              )}
             </div>
           ) : (
             <button
               type="button"
-              onClick={() => setShowNewGroupForm(true)}
-              className="flex items-center gap-2 w-full justify-center py-2.5 border border-dashed border-slate-700 hover:border-cyan-600/50 rounded-lg text-sm text-slate-500 hover:text-cyan-400 transition-colors"
+              onClick={() => setShowNewProfileForm(true)}
+              className="mt-3 flex items-center gap-1.5 text-xs text-slate-500 hover:text-cyan-400 transition-colors"
             >
-              <Plus className="w-4 h-4" /> Add setting group
+              <Plus className="w-3.5 h-3.5" /> Add profile
             </button>
           )}
+        </Section>
 
-          {/* ── Viz Guide ─────────────────────────────────────── */}
-          <Section
-            title="Viz Guide (returned by getVizGuide tool)"
-            defaultOpen={false}
-          >
-            <p className="text-xs text-slate-500 -mt-1">
-              The full VizCraft spec reference the AI receives when it calls{" "}
-              <code className="text-cyan-400">getVizGuide()</code>.
+        {/* ── Prompt Groups ─────────────────────────────────── */}
+        {Object.entries(draft.promptGroups).map(([groupKey, group]) => (
+          <PromptGroupSection
+            key={groupKey}
+            groupKey={groupKey}
+            group={group}
+            onOptionChange={(optKey, value) =>
+              patchGroupOption(groupKey, optKey, value)
+            }
+            onDefaultChange={(optKey) => patchGroupDefault(groupKey, optKey)}
+            onAddOption={(optKey, prompt) =>
+              addGroupOption(groupKey, optKey, prompt)
+            }
+            onRemoveOption={(optKey) => removeGroupOption(groupKey, optKey)}
+            onRemoveGroup={() => removeGroup(groupKey)}
+            onMetaChange={(field, value) =>
+              patchGroupMeta(groupKey, field, value)
+            }
+          />
+        ))}
+
+        {/* ── Preferences behaviour ─────────────────────────── */}
+        <Section title="Preference Sending Behaviour">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-slate-200">Always send preferences</p>
+              <p className="text-xs text-slate-500 mt-0.5">
+                When on, preference prompt texts are appended to every message.
+                When off, they are only sent when you change a setting (saves
+                tokens).
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() =>
+                patchTop(
+                  "alwaysSendPrefsDefault",
+                  !draft.alwaysSendPrefsDefault,
+                )
+              }
+              className={`relative shrink-0 w-10 h-5 rounded-full transition-colors ${
+                draft.alwaysSendPrefsDefault ? "bg-amber-500" : "bg-slate-700"
+              }`}
+            >
+              <span
+                className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
+                  draft.alwaysSendPrefsDefault ? "translate-x-5" : ""
+                }`}
+              />
+            </button>
+          </div>
+        </Section>
+
+        {/* ── Model / Thinking ───────────────────────────────── */}
+        <Section title="Model & Thinking" defaultOpen={false}>
+          {/* Current model info (read-only) */}
+          <div className="flex gap-3 mb-4">
+            <div className="flex-1">
+              <Label>Provider</Label>
+              <div className="bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm text-slate-400 font-mono">
+                {draft.provider || "openai"}
+              </div>
+            </div>
+            <div className="flex-1">
+              <Label>Model</Label>
+              <div className="bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm text-slate-400 font-mono truncate">
+                {draft.model || "(default)"}
+              </div>
+            </div>
+          </div>
+
+          {/* Thinking budget — only useful for Google/Gemini */}
+          {["google", "gemini"].includes(draft.provider ?? "") ? (
+            <div>
+              <Label>Thinking Budget</Label>
+              <p className="text-xs text-slate-500 mb-2">
+                Number of tokens Gemini can use for internal reasoning before
+                responding. 0 = disabled. Shows a collapsible "Thinking…" block
+                in the chat. Recommended: 8000 for medium, 0 to save tokens.
+              </p>
+              <div className="flex items-center gap-2 flex-wrap">
+                {[
+                  { label: "Off", value: 0 },
+                  { label: "Low", value: 1024 },
+                  { label: "Medium", value: 8192 },
+                  { label: "High", value: 24576 },
+                ].map((preset) => (
+                  <button
+                    key={preset.label}
+                    type="button"
+                    onClick={() => patchTop("thinkingBudget", preset.value)}
+                    className={`px-3 py-1 text-xs rounded-md border transition-colors ${
+                      (draft.thinkingBudget ?? 0) === preset.value
+                        ? "bg-cyan-600/30 text-cyan-300 border-cyan-600/50"
+                        : "text-slate-500 hover:text-slate-300 border-slate-700 hover:border-slate-500"
+                    }`}
+                  >
+                    {preset.label}
+                    {preset.value > 0 && (
+                      <span className="ml-1 opacity-60">
+                        ({preset.value.toLocaleString()})
+                      </span>
+                    )}
+                  </button>
+                ))}
+                <div className="flex items-center gap-1.5">
+                  <span className="text-xs text-slate-500">Custom:</span>
+                  <input
+                    type="number"
+                    value={draft.thinkingBudget ?? 0}
+                    min={0}
+                    max={32768}
+                    step={256}
+                    onChange={(e) =>
+                      patchTop("thinkingBudget", Number(e.target.value))
+                    }
+                    className="w-24 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 focus:outline-none focus:border-cyan-500"
+                  />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <p className="text-xs text-slate-500">
+              Thinking / reasoning display is only available for Google / Gemini
+              models. Switch{" "}
+              <code className="bg-slate-800 px-1 rounded">AI_PROVIDER</code> to{" "}
+              <code className="bg-slate-800 px-1 rounded">google</code> in your{" "}
+              <code className="bg-slate-800 px-1 rounded">.env</code> to enable
+              it.
             </p>
-            <Textarea
-              value={draft.vizGuide}
-              onChange={(v) => patchTop("vizGuide", v)}
-              rows={16}
-              mono
-            />
-          </Section>
-        </div>
+          )}
+        </Section>
 
-        {/* Footer */}
-        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-700 shrink-0">
-          <button
-            type="button"
-            onClick={closeSettings}
-            className="px-4 py-2 text-sm rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
-          >
-            Cancel
-          </button>
+        {/* ── Add group form ─────────────────────────────── */}
+        {showNewGroupForm ? (
+          <div className="border border-cyan-600/30 rounded-lg p-4 space-y-4 bg-slate-900/60">
+            <p className="text-sm font-medium text-cyan-300">
+              New setting group
+            </p>
+            <div className="grid grid-cols-3 gap-3">
+              <div>
+                <Label>Key (internal ID)</Label>
+                <input
+                  type="text"
+                  value={newGroupKey}
+                  onChange={(e) =>
+                    setNewGroupKey(
+                      e.target.value.toLowerCase().replace(/\s+/g, "-"),
+                    )
+                  }
+                  placeholder="e.g. tone"
+                  className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                />
+                {newGroupKey && newGroupKey in draft.promptGroups && (
+                  <p className="text-xs text-red-400 mt-1">
+                    Key already exists.
+                  </p>
+                )}
+              </div>
+              <div>
+                <Label>Label (shown in bottom bar)</Label>
+                <input
+                  type="text"
+                  value={newGroupLabel}
+                  onChange={(e) => setNewGroupLabel(e.target.value)}
+                  placeholder="e.g. Response Tone"
+                  className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                />
+              </div>
+              <div>
+                <Label>Description (optional)</Label>
+                <input
+                  type="text"
+                  value={newGroupDescription}
+                  onChange={(e) => setNewGroupDescription(e.target.value)}
+                  placeholder="Shown in the settings panel"
+                  className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Options (first will be the default)</Label>
+              {newGroupOptions.map((opt, i) => (
+                <div key={i} className="flex gap-2 items-start">
+                  <input
+                    type="text"
+                    value={opt.key}
+                    onChange={(e) => {
+                      const upd = [...newGroupOptions];
+                      upd[i] = {
+                        ...upd[i],
+                        key: e.target.value.toLowerCase().replace(/\s+/g, "-"),
+                      };
+                      setNewGroupOptions(upd);
+                    }}
+                    placeholder="key"
+                    className="w-28 shrink-0 bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                  />
+                  <input
+                    type="text"
+                    value={opt.prompt}
+                    onChange={(e) => {
+                      const upd = [...newGroupOptions];
+                      upd[i] = { ...upd[i], prompt: e.target.value };
+                      setNewGroupOptions(upd);
+                    }}
+                    placeholder="Prompt text appended to message when selected (can be empty)"
+                    className="flex-1 bg-slate-800 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+                  />
+                  {newGroupOptions.length > 1 && (
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setNewGroupOptions((prev) =>
+                          prev.filter((_, j) => j !== i),
+                        )
+                      }
+                      className="mt-1 p-1 rounded text-slate-600 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={() =>
+                  setNewGroupOptions((prev) => [
+                    ...prev,
+                    { key: "", prompt: "" },
+                  ])
+                }
+                className="flex items-center gap-1 text-xs text-slate-500 hover:text-cyan-400 transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" /> Add option row
+              </button>
+            </div>
+
+            <div className="flex gap-2 pt-1">
+              <button
+                type="button"
+                onClick={addNewGroup}
+                disabled={
+                  !newGroupKey.trim() ||
+                  newGroupKey in draft.promptGroups ||
+                  newGroupOptions.every((o) => !o.key.trim())
+                }
+                className="px-4 py-1.5 text-sm rounded bg-cyan-600 hover:bg-cyan-500 disabled:opacity-40 text-white transition-colors"
+              >
+                Create group
+              </button>
+              <button
+                type="button"
+                onClick={resetNewGroupForm}
+                className="px-4 py-1.5 text-sm rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
           <button
             type="button"
-            onClick={handleSave}
-            disabled={saving}
-            className="flex items-center gap-2 px-4 py-2 text-sm rounded bg-cyan-600 hover:bg-cyan-500 disabled:opacity-60 text-white transition-colors"
+            onClick={() => setShowNewGroupForm(true)}
+            className="flex items-center gap-2 w-full justify-center py-2.5 border border-dashed border-slate-700 hover:border-cyan-600/50 rounded-lg text-sm text-slate-500 hover:text-cyan-400 transition-colors"
           >
-            {saving ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : saved ? (
-              <Check className="w-4 h-4" />
-            ) : (
-              <Save className="w-4 h-4" />
-            )}
-            {saved ? "Saved!" : "Save changes"}
+            <Plus className="w-4 h-4" /> Add setting group
           </button>
-        </div>
+        )}
+
+        {/* ── Viz Guide ─────────────────────────────────────── */}
+        <Section
+          title="Viz Guide (returned by getVizGuide tool)"
+          defaultOpen={false}
+        >
+          <p className="text-xs text-slate-500 -mt-1">
+            The full VizCraft spec reference the AI receives when it calls{" "}
+            <code className="text-cyan-400">getVizGuide()</code>.
+          </p>
+          <Textarea
+            value={draft.vizGuide}
+            onChange={(v) => patchTop("vizGuide", v)}
+            rows={16}
+            mono
+          />
+        </Section>
+
+        <Section
+          title="Plot Guide (returned by getPlotGuide tool)"
+          defaultOpen={false}
+        >
+          <p className="text-xs text-slate-500 -mt-1">
+            The plotting spec reference the AI receives when it calls{" "}
+            <code className="text-cyan-400">getPlotGuide()</code>.
+          </p>
+          <Textarea
+            value={draft.plotGuide}
+            onChange={(v) => patchTop("plotGuide", v)}
+            rows={16}
+            mono
+          />
+        </Section>
+      </div>
+
+      {/* ── Practice Console ── */}
+      <div className="shrink-0 border-t border-slate-700">
+        <button
+          type="button"
+          onClick={() => setConsoleOpen((v) => !v)}
+          className="w-full flex items-center gap-2 px-4 py-2.5 bg-slate-800/60 hover:bg-slate-800 text-left transition-colors"
+        >
+          <Terminal className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
+          <span className="text-xs font-medium text-slate-300 flex-1">
+            Practice Console
+          </span>
+          <span className="text-[10px] text-slate-500 mr-1">terraform</span>
+          {consoleOpen ? (
+            <ChevronDown className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+          ) : (
+            <ChevronRight className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+          )}
+        </button>
+
+        {consoleOpen && (
+          <div className="flex flex-col bg-slate-950" style={{ height: 220 }}>
+            {/* Output area */}
+            <div
+              ref={consoleOutputRef}
+              className="flex-1 overflow-y-auto px-3 py-2 font-mono text-xs leading-5"
+            >
+              {consoleLines.length === 0 && (
+                <p className="text-slate-600">
+                  Type a terraform command and press Enter to run it. e.g.{" "}
+                  <span className="text-slate-500">terraform version</span>
+                </p>
+              )}
+              {consoleLines.map((line) => (
+                <div
+                  key={line.id}
+                  className={
+                    line.kind === "input"
+                      ? "text-cyan-400"
+                      : line.kind === "stderr"
+                        ? "text-red-400"
+                        : line.kind === "info"
+                          ? "text-slate-500"
+                          : "text-slate-200"
+                  }
+                  style={{ whiteSpace: "pre-wrap", wordBreak: "break-all" }}
+                >
+                  {line.text}
+                </div>
+              ))}
+              {consoleRunning && (
+                <div className="flex items-center gap-1.5 text-slate-500 mt-1">
+                  <Loader2 className="w-3 h-3 animate-spin" /> running…
+                </div>
+              )}
+            </div>
+
+            {/* Input bar */}
+            <div className="flex items-center gap-1 px-3 py-2 border-t border-slate-800 bg-slate-900/60">
+              <span className="text-emerald-400 font-mono text-xs select-none shrink-0">
+                $
+              </span>
+              <input
+                type="text"
+                value={cmdInput}
+                onChange={(e) => setCmdInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    void handleRunCommand();
+                  }
+                }}
+                placeholder="terraform version"
+                disabled={consoleRunning}
+                className="flex-1 bg-transparent font-mono text-xs text-slate-200 placeholder-slate-600 outline-none disabled:opacity-50"
+                autoComplete="off"
+                spellCheck={false}
+              />
+              {consoleRunning ? (
+                <button
+                  type="button"
+                  onClick={handleStop}
+                  className="p-1 rounded text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-colors shrink-0"
+                  title="Stop"
+                >
+                  <StopCircle className="w-3.5 h-3.5" />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => void handleRunCommand()}
+                  disabled={!cmdInput.trim()}
+                  className="p-1 rounded text-slate-600 hover:text-emerald-400 hover:bg-emerald-500/10 disabled:opacity-40 transition-colors shrink-0"
+                  title="Run (Enter)"
+                >
+                  <Play className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-slate-700 shrink-0 bg-slate-900">
+        <button
+          type="button"
+          onClick={handleSaveAs}
+          className="flex items-center gap-2 px-4 py-2 text-sm rounded border border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800 transition-colors"
+        >
+          <Download className="w-4 h-4" />
+          Save As
+        </button>
+        <button
+          type="button"
+          onClick={handleSave}
+          disabled={saving}
+          className="flex items-center gap-2 px-4 py-2 text-sm rounded bg-cyan-600 hover:bg-cyan-500 disabled:opacity-60 text-white transition-colors"
+        >
+          {saving ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : saved ? (
+            <Check className="w-4 h-4" />
+          ) : (
+            <Save className="w-4 h-4" />
+          )}
+          {saved ? "Saved!" : "Save"}
+        </button>
       </div>
     </div>
   );