create-interview-cockpit 0.3.0 → 0.4.0

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

@@ -0,0 +1,827 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  X,
+  RotateCcw,
+  Save,
+  ChevronDown,
+  ChevronRight,
+  Check,
+  Loader2,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import { useStore } from "../store";
+import type { AiSettings, PromptGroup } from "../api";
+
+// ── 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.",
+  responseProfiles: {
+    concise: { maxOutputTokens: 1000, maxSteps: 3 },
+    moderate: { maxOutputTokens: 1000, maxSteps: 5 },
+    normal: { maxOutputTokens: 3000, maxSteps: 5 },
+  },
+  vizGuide: "",
+  promptGroups: {
+    length: {
+      label: "Response Length",
+      description:
+        "Appended to the user message when the selected length changes.",
+      default: "normal",
+      options: {
+        concise:
+          "Keep the response concise. Aim for roughly 300 characters of text when possible. These limits do not apply to mermaid diagrams. You can generate as many as you want to explain the solution effectively. Prioritize diagrams over text.",
+        moderate:
+          "Keep the response moderately detailed. Aim for roughly 550 characters of text when possible.",
+        normal:
+          "Use a fuller answer with enough context to explain the idea clearly.",
+      },
+    },
+    style: {
+      label: "Response Style",
+      description:
+        "Appended to the user message when the selected style changes.",
+      default: "prose",
+      options: {
+        prose:
+          "Use natural prose with short paragraphs. Avoid bullet lists and numbered lists unless I explicitly ask for them.",
+        bullets: "Use bullet points and short lists as the main format.",
+        structured:
+          "Use structured sections with headings and numbered steps when helpful.",
+      },
+    },
+    audience: {
+      label: "Response Audience",
+      description:
+        "Appended to the user message when the selected audience changes.",
+      default: "normal",
+      options: {
+        normal: "",
+        beginner:
+          "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.",
+      },
+    },
+  },
+};
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function Section({
+  title,
+  children,
+  defaultOpen = true,
+  trailingAction,
+}: {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  trailingAction?: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="border border-slate-700 rounded-lg overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between px-4 py-3 bg-slate-800/60 hover:bg-slate-800 text-left transition-colors"
+      >
+        <span className="text-sm font-medium text-slate-200">{title}</span>
+        <div className="flex items-center gap-2">
+          {trailingAction && (
+            <span
+              onClick={(e) => e.stopPropagation()}
+              className="flex items-center"
+            >
+              {trailingAction}
+            </span>
+          )}
+          {open ? (
+            <ChevronDown className="w-4 h-4 text-slate-400 shrink-0" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-slate-400 shrink-0" />
+          )}
+        </div>
+      </button>
+      {open && <div className="p-4 space-y-4 bg-slate-900/40">{children}</div>}
+    </div>
+  );
+}
+
+function Label({ children }: { children: React.ReactNode }) {
+  return (
+    <label className="block text-xs font-medium text-slate-400 mb-1 uppercase tracking-wide">
+      {children}
+    </label>
+  );
+}
+
+function Textarea({
+  value,
+  onChange,
+  rows = 4,
+  mono = false,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  rows?: number;
+  mono?: boolean;
+}) {
+  return (
+    <textarea
+      rows={rows}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className={`w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500 resize-y ${mono ? "font-mono" : ""}`}
+    />
+  );
+}
+
+function NumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}) {
+  return (
+    <input
+      type="number"
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      onChange={(e) => onChange(Number(e.target.value))}
+      className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-cyan-500"
+    />
+  );
+}
+
+// ── Generic prompt-group section ───────────────────────────────────────────
+
+function PromptGroupSection({
+  groupKey,
+  group,
+  onOptionChange,
+  onDefaultChange,
+  onAddOption,
+  onRemoveOption,
+  onRemoveGroup,
+  onMetaChange,
+}: {
+  groupKey: string;
+  group: PromptGroup;
+  onOptionChange: (optKey: string, value: string) => void;
+  onDefaultChange: (optKey: string) => void;
+  onAddOption: (optKey: string, prompt: string) => void;
+  onRemoveOption: (optKey: string) => void;
+  onRemoveGroup: () => void;
+  onMetaChange: (field: "label" | "description", value: string) => void;
+}) {
+  const [newOptKey, setNewOptKey] = useState("");
+  const [newOptPrompt, setNewOptPrompt] = useState("");
+  const [showAddOpt, setShowAddOpt] = useState(false);
+  const optionCount = Object.keys(group.options).length;
+
+  const handleAddOption = () => {
+    const key = newOptKey.trim();
+    if (!key || key in group.options) return;
+    onAddOption(key, newOptPrompt);
+    setNewOptKey("");
+    setNewOptPrompt("");
+    setShowAddOpt(false);
+  };
+
+  return (
+    <Section
+      title={group.label || groupKey}
+      trailingAction={
+        <button
+          type="button"
+          onClick={onRemoveGroup}
+          title="Delete this group"
+          className="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>
+      }
+    >
+      {/* Meta fields */}
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label>Label (shown in bottom bar)</Label>
+          <input
+            type="text"
+            value={group.label}
+            onChange={(e) => onMetaChange("label", e.target.value)}
+            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</Label>
+          <input
+            type="text"
+            value={group.description ?? ""}
+            onChange={(e) => onMetaChange("description", e.target.value)}
+            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>
+
+      {/* Options */}
+      {Object.entries(group.options).map(([optKey, optValue]) => (
+        <div key={optKey} className="flex gap-3 items-start">
+          <button
+            type="button"
+            title="Set as default"
+            onClick={() => onDefaultChange(optKey)}
+            className={`mt-6 shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors ${
+              group.default === optKey
+                ? "border-cyan-400 bg-cyan-400"
+                : "border-slate-600 hover:border-slate-400"
+            }`}
+          >
+            {group.default === optKey && (
+              <span className="w-1.5 h-1.5 rounded-full bg-slate-900" />
+            )}
+          </button>
+          <div className="flex-1">
+            <Label>
+              {optKey}
+              {group.default === optKey && (
+                <span className="ml-2 text-cyan-400 normal-case font-normal">
+                  (default)
+                </span>
+              )}
+            </Label>
+            <Textarea
+              value={optValue}
+              onChange={(v) => onOptionChange(optKey, v)}
+              rows={optValue.length > 120 ? 3 : 2}
+            />
+          </div>
+          {optionCount > 1 && (
+            <button
+              type="button"
+              title="Remove option"
+              onClick={() => onRemoveOption(optKey)}
+              className="mt-6 p-1 rounded text-slate-600 hover:text-red-400 hover:bg-red-500/10 transition-colors shrink-0"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          )}
+        </div>
+      ))}
+
+      {/* Add option */}
+      {showAddOpt ? (
+        <div className="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 option</p>
+          <div className="flex gap-2">
+            <div className="w-36">
+              <Label>Key (e.g. "verbose")</Label>
+              <input
+                type="text"
+                value={newOptKey}
+                onChange={(e) =>
+                  setNewOptKey(
+                    e.target.value.toLowerCase().replace(/\s+/g, "-"),
+                  )
+                }
+                placeholder="key"
+                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 className="flex-1">
+              <Label>Prompt text</Label>
+              <input
+                type="text"
+                value={newOptPrompt}
+                onChange={(e) => setNewOptPrompt(e.target.value)}
+                placeholder="Appended to user message when selected"
+                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="flex gap-2">
+            <button
+              type="button"
+              onClick={handleAddOption}
+              disabled={!newOptKey.trim() || newOptKey in group.options}
+              className="px-3 py-1 text-xs rounded bg-cyan-700 hover:bg-cyan-600 disabled:opacity-40 text-white transition-colors"
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setShowAddOpt(false);
+                setNewOptKey("");
+                setNewOptPrompt("");
+              }}
+              className="px-3 py-1 text-xs rounded text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setShowAddOpt(true)}
+          className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-cyan-400 transition-colors"
+        >
+          <Plus className="w-3.5 h-3.5" /> Add option
+        </button>
+      )}
+    </Section>
+  );
+}
+
+// ── Main modal ───────────────────────────────────────────────────────────────
+
+export default function AiSettingsModal() {
+  const { aiSettings, saveAiSettings, closeSettings } = 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);
+
+  // ── New group form state ─────────────────────
+  const [showNewGroupForm, setShowNewGroupForm] = useState(false);
+  const [newGroupKey, setNewGroupKey] = useState("");
+  const [newGroupLabel, setNewGroupLabel] = useState("");
+  const [newGroupDescription, setNewGroupDescription] = useState("");
+  const [newGroupOptions, setNewGroupOptions] = useState([
+    { key: "", prompt: "" },
+  ]);
+
+  function resetNewGroupForm() {
+    setShowNewGroupForm(false);
+    setNewGroupKey("");
+    setNewGroupLabel("");
+    setNewGroupDescription("");
+    setNewGroupOptions([{ key: "", prompt: "" }]);
+  }
+  // ───────────────────────────────────────────
+
+  // Sync draft if settings change externally (e.g. first fetch)
+  useEffect(() => {
+    setDraft(JSON.parse(JSON.stringify(aiSettings)));
+  }, [aiSettings]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeSettings();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [closeSettings]);
+
+  // ── Patch helpers ─────────────────────────────────────────────
+  function patchTop<K extends keyof AiSettings>(key: K, value: AiSettings[K]) {
+    setDraft((d) => ({ ...d, [key]: value }));
+  }
+
+  function patchProfileField(
+    profile: string,
+    field: "maxOutputTokens" | "maxSteps",
+    value: number,
+  ) {
+    setDraft((d) => ({
+      ...d,
+      responseProfiles: {
+        ...d.responseProfiles,
+        [profile]: { ...d.responseProfiles[profile], [field]: value },
+      },
+    }));
+  }
+
+  function patchGroupOption(groupKey: string, optKey: string, value: string) {
+    setDraft((d) => ({
+      ...d,
+      promptGroups: {
+        ...d.promptGroups,
+        [groupKey]: {
+          ...d.promptGroups[groupKey],
+          options: { ...d.promptGroups[groupKey].options, [optKey]: value },
+        },
+      },
+    }));
+  }
+
+  function patchGroupDefault(groupKey: string, optKey: string) {
+    setDraft((d) => ({
+      ...d,
+      promptGroups: {
+        ...d.promptGroups,
+        [groupKey]: { ...d.promptGroups[groupKey], default: optKey },
+      },
+    }));
+  }
+
+  function patchGroupMeta(
+    groupKey: string,
+    field: "label" | "description",
+    value: string,
+  ) {
+    setDraft((d) => ({
+      ...d,
+      promptGroups: {
+        ...d.promptGroups,
+        [groupKey]: { ...d.promptGroups[groupKey], [field]: value },
+      },
+    }));
+  }
+
+  function addGroupOption(groupKey: string, optKey: string, prompt: string) {
+    setDraft((d) => {
+      const g = d.promptGroups[groupKey];
+      return {
+        ...d,
+        promptGroups: {
+          ...d.promptGroups,
+          [groupKey]: {
+            ...g,
+            options: { ...g.options, [optKey]: prompt },
+          },
+        },
+      };
+    });
+  }
+
+  function removeGroupOption(groupKey: string, optKey: string) {
+    setDraft((d) => {
+      const g = d.promptGroups[groupKey];
+      const newOptions = { ...g.options };
+      delete newOptions[optKey];
+      const firstKey = Object.keys(newOptions)[0] ?? "";
+      return {
+        ...d,
+        promptGroups: {
+          ...d.promptGroups,
+          [groupKey]: {
+            ...g,
+            options: newOptions,
+            default: g.default === optKey ? firstKey : g.default,
+          },
+        },
+      };
+    });
+  }
+
+  function removeGroup(groupKey: string) {
+    if (
+      !window.confirm(
+        `Delete the “${draft.promptGroups[groupKey]?.label || groupKey}” group? This will also remove it from the bottom bar.`,
+      )
+    )
+      return;
+    setDraft((d) => {
+      const newGroups = { ...d.promptGroups };
+      delete newGroups[groupKey];
+      return { ...d, promptGroups: newGroups };
+    });
+  }
+
+  function addNewGroup() {
+    const key = newGroupKey.trim().toLowerCase().replace(/\s+/g, "-");
+    if (!key || key in draft.promptGroups) return;
+    if (newGroupOptions.some((o) => !o.key.trim())) return;
+    const options = Object.fromEntries(
+      newGroupOptions.map((o) => [o.key.trim(), o.prompt]),
+    );
+    const firstKey = Object.keys(options)[0] ?? "";
+    setDraft((d) => ({
+      ...d,
+      promptGroups: {
+        ...d.promptGroups,
+        [key]: {
+          label: newGroupLabel.trim() || key,
+          description: newGroupDescription.trim() || undefined,
+          default: firstKey,
+          options,
+        },
+      },
+    }));
+    resetNewGroupForm();
+  }
+
+  // ── Actions ───────────────────────────────────────────────────
+  async function handleSave() {
+    if (saving) return;
+    setSaving(true);
+    try {
+      await saveAiSettings(draft);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleReset() {
+    if (!window.confirm("Reset all settings to the committed baseline?"))
+      return;
+    setDraft(JSON.parse(JSON.stringify(BASELINE)));
+  }
+
+  // ── Render ────────────────────────────────────────────────────
+  const profileKeys = Object.keys(draft.responseProfiles);
+
+  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();
+      }}
+    >
+      <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>
+
+        {/* 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>
+
+          {/* ── 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">
+                  <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>
+                  )}
+                </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={() => 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"
+            >
+              <Plus className="w-4 h-4" /> Add setting group
+            </button>
+          )}
+
+          {/* ── 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>
+        </div>
+
+        {/* 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>
+          <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 changes"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}