create-interview-cockpit 0.4.0 → 0.6.0

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

@@ -0,0 +1,1706 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  AlertCircle,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Clipboard,
+  ClipboardCheck,
+  FilePlus,
+  Folder,
+  GripVertical,
+  Loader2,
+  Maximize2,
+  MessageSquare,
+  Minimize2,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+  Play,
+  Save,
+  Send,
+  StopCircle,
+  Terminal,
+  Trash2,
+  X,
+} from "lucide-react";
+
+const MIN_W = 900;
+const MIN_H = 560;
+const DEFAULT_W = Math.min(1280, window.innerWidth - 48);
+const DEFAULT_H = Math.min(820, window.innerHeight - 48);
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+import type { InfraCommandStreamMessage } from "../api";
+
+interface ConsoleLine {
+  id: string;
+  kind: "stdout" | "stderr" | "info" | "input";
+  text: string;
+}
+import { useStore } from "../store";
+import {
+  cloneInfraLabWorkspace,
+  DEFAULT_INFRA_LAB,
+  getInfraLabFileOrder,
+  serializeInfraLabWorkspace,
+} from "../infraLab";
+import type { InfraLabWorkspace } from "../types";
+import type { InfraRunAction, InfraRunDetails, InfraRunListItem } from "../api";
+import * as api from "../api";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+function updateInfraFile(
+  workspace: InfraLabWorkspace,
+  fileName: string,
+  content: string,
+): InfraLabWorkspace {
+  return {
+    ...workspace,
+    activeFile: fileName,
+    files: {
+      ...workspace.files,
+      [fileName]: content,
+    },
+  };
+}
+
+export default function InfraLabModal() {
+  const {
+    closeInfraLab,
+    currentQuestion,
+    runnerInitialInfra,
+    runnerInitialInfraFileId,
+    saveCodeSnippetToQuestion,
+    overwriteContextFileContent,
+  } = useStore();
+
+  const [workspace, setWorkspace] = useState<InfraLabWorkspace>(() =>
+    cloneInfraLabWorkspace(runnerInitialInfra ?? DEFAULT_INFRA_LAB),
+  );
+  const [labName, setLabName] = useState(
+    runnerInitialInfra?.label ?? DEFAULT_INFRA_LAB.label,
+  );
+  const [activeFile, setActiveFile] = useState(
+    runnerInitialInfra?.activeFile ?? DEFAULT_INFRA_LAB.activeFile,
+  );
+  const [activeInfraId, setActiveInfraId] = useState<string | null>(
+    runnerInitialInfraFileId ?? null,
+  );
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [runningAction, setRunningAction] = useState<InfraRunAction | null>(
+    null,
+  );
+  const [runHistory, setRunHistory] = useState<InfraRunListItem[]>([]);
+  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
+  const [selectedRun, setSelectedRun] = useState<InfraRunDetails | null>(null);
+  const [loadingRuns, setLoadingRuns] = useState(false);
+  const [runError, setRunError] = useState<string | null>(null);
+  const [inspectorTab, setInspectorTab] = useState<"summary" | "json">(
+    "summary",
+  );
+
+  useEffect(() => {
+    const nextWorkspace = cloneInfraLabWorkspace(
+      runnerInitialInfra ?? DEFAULT_INFRA_LAB,
+    );
+    setWorkspace(nextWorkspace);
+    setLabName(nextWorkspace.label);
+    setActiveFile(nextWorkspace.activeFile);
+    setActiveInfraId(runnerInitialInfraFileId ?? null);
+  }, [runnerInitialInfra, runnerInitialInfraFileId]);
+
+  // ── 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);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeInfraLab();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [closeInfraLab]);
+
+  const fileOrder = getInfraLabFileOrder(workspace);
+  const currentFile = workspace.files[activeFile] ?? "";
+
+  const persistWorkspace = useCallback(
+    async (forceNew: boolean) => {
+      if (!currentQuestion) return;
+
+      setSaving(true);
+      try {
+        const nextWorkspace = cloneInfraLabWorkspace({
+          ...workspace,
+          label: labName.trim() || DEFAULT_INFRA_LAB.label,
+          activeFile,
+        });
+        const payload = serializeInfraLabWorkspace(nextWorkspace);
+        let nextFileId = activeInfraId;
+
+        if (!forceNew && activeInfraId) {
+          await overwriteContextFileContent(
+            currentQuestion.id,
+            activeInfraId,
+            payload,
+          );
+        } else {
+          const cf = await saveCodeSnippetToQuestion(
+            currentQuestion.id,
+            payload,
+            "infra",
+            nextWorkspace.label,
+            "infra",
+          );
+          nextFileId = cf.id;
+          setActiveInfraId(cf.id);
+        }
+
+        setWorkspace(nextWorkspace);
+        setLabName(nextWorkspace.label);
+        setSaved(true);
+        setTimeout(() => setSaved(false), 1800);
+        return {
+          fileId: nextFileId ?? null,
+          workspace: nextWorkspace,
+        };
+      } finally {
+        setSaving(false);
+      }
+    },
+    [
+      activeFile,
+      activeInfraId,
+      currentQuestion,
+      labName,
+      overwriteContextFileContent,
+      saveCodeSnippetToQuestion,
+      workspace,
+    ],
+  );
+
+  const loadRunDetails = useCallback(async (runId: string) => {
+    const run = await api.fetchInfraRun(runId);
+    setSelectedRun(run);
+    setSelectedRunId(run.id);
+  }, []);
+
+  const refreshRunHistory = useCallback(
+    async (fileId: string) => {
+      setLoadingRuns(true);
+      try {
+        const history = await api.fetchInfraRuns(fileId);
+        setRunHistory(history);
+        if (history.length > 0) {
+          const preferred = history.find((item) => item.id === selectedRunId);
+          await loadRunDetails(preferred?.id ?? history[0].id);
+        } else {
+          setSelectedRun(null);
+          setSelectedRunId(null);
+        }
+      } finally {
+        setLoadingRuns(false);
+      }
+    },
+    [loadRunDetails, selectedRunId],
+  );
+
+  useEffect(() => {
+    if (!activeInfraId) {
+      setRunHistory([]);
+      setSelectedRunId(null);
+      setSelectedRun(null);
+      return;
+    }
+
+    let cancelled = false;
+    setLoadingRuns(true);
+    api
+      .fetchInfraRuns(activeInfraId)
+      .then(async (history) => {
+        if (cancelled) return;
+        setRunHistory(history);
+        if (history[0]) {
+          const run = await api.fetchInfraRun(history[0].id);
+          if (!cancelled) {
+            setSelectedRun(run);
+            setSelectedRunId(run.id);
+          }
+        } else {
+          setSelectedRun(null);
+          setSelectedRunId(null);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setRunHistory([]);
+          setSelectedRun(null);
+          setSelectedRunId(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingRuns(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeInfraId]);
+
+  const runInfra = async (action: InfraRunAction) => {
+    if (!currentQuestion) return;
+
+    setRunError(null);
+    setRunningAction(action);
+    try {
+      const persisted = await persistWorkspace(false);
+      if (!persisted?.fileId) {
+        throw new Error("Save the infra lab before running it.");
+      }
+
+      const run = await api.runInfraAction({
+        questionId: currentQuestion.id,
+        fileId: persisted.fileId,
+        label: persisted.workspace.label,
+        action,
+        workspace: persisted.workspace,
+      });
+      setSelectedRun(run);
+      setSelectedRunId(run.id);
+      await refreshRunHistory(persisted.fileId);
+    } catch (error: any) {
+      setRunError(String(error?.message ?? error ?? "Infra run failed"));
+    } finally {
+      setRunningAction(null);
+    }
+  };
+
+  const inspectorJson = selectedRun?.planJson ?? selectedRun?.validationJson;
+  const logOutput =
+    selectedRun?.logs || runError || "Run output will appear here.";
+
+  // ── Practice console ──────────────────────────────────────────
+  const [bottomTab, setBottomTab] = useState<"output" | "console" | "chat">(
+    "output",
+  );
+  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 (bottomTab === "console" && consoleOutputRef.current) {
+      consoleOutputRef.current.scrollTop =
+        consoleOutputRef.current.scrollHeight;
+    }
+  }, [consoleLines, bottomTab]);
+
+  const handleRunCommand = useCallback(async () => {
+    const cmd = cmdInput.trim();
+    if (!cmd || consoleRunning) return;
+    setCmdInput("");
+    setConsoleRunning(true);
+    const abort = { aborted: false };
+    cmdAbortRef.current = abort;
+    // Don't echo here — the server sends back an info line "$ terraform ..."
+    // as the very first message, which serves as the canonical prompt echo.
+    try {
+      await api.streamInfraCommand(
+        {
+          questionId: currentQuestion?.id,
+          fileId: activeInfraId ?? undefined,
+          label: labName,
+          command: cmd,
+          workspace,
+        },
+        (msg: InfraCommandStreamMessage) => {
+          if (abort.aborted) return;
+          if (msg.type === "output") appendLine(msg.kind, msg.text);
+          else if (msg.type === "error") appendLine("stderr", msg.error);
+          else if (msg.type === "complete" && msg.run.workspaceSnapshot) {
+            // Merge any server-generated files (e.g. .terraform.lock.hcl) back
+            // into the workspace so they appear in the file tree.
+            setWorkspace((prev) => ({
+              ...prev,
+              files: { ...prev.files, ...msg.run.workspaceSnapshot!.files },
+            }));
+          }
+        },
+      );
+    } catch (err: unknown) {
+      if (!abort.aborted)
+        appendLine("stderr", (err as Error)?.message ?? "Command failed");
+    } finally {
+      if (!abort.aborted) setConsoleRunning(false);
+    }
+  }, [
+    cmdInput,
+    consoleRunning,
+    currentQuestion,
+    activeInfraId,
+    labName,
+    workspace,
+    appendLine,
+  ]);
+
+  const handleStop = useCallback(() => {
+    cmdAbortRef.current.aborted = true;
+    setConsoleRunning(false);
+    appendLine("info", "^C");
+  }, [appendLine]);
+
+  // ── AI chat ──────────────────────────────────────────────
+  interface ChatMessage {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+  }
+
+  // Key scoped to the saved artifact, or falls back to question ID
+  const chatStorageKey = `infra-chat:${activeInfraId ?? `q:${currentQuestion?.id ?? "_"}`}`;
+  // Ref always holds the latest key so save-effect never closes over a stale key
+  const chatStorageKeyRef = useRef(chatStorageKey);
+  chatStorageKeyRef.current = chatStorageKey;
+
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>(() => {
+    try {
+      const stored = localStorage.getItem(chatStorageKey);
+      return stored ? (JSON.parse(stored) as ChatMessage[]) : [];
+    } catch {
+      return [];
+    }
+  });
+  const [chatInput, setChatInput] = useState("");
+  const [chatLoading, setChatLoading] = useState(false);
+  const chatScrollRef = useRef<HTMLDivElement>(null);
+  const chatInputRef = useRef<HTMLTextAreaElement>(null);
+  const chatAbortRef = useRef<{ aborted: boolean }>({ aborted: false });
+
+  // When the user switches workspace/artifact, reload that workspace's chat history
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(chatStorageKey);
+      setChatMessages(stored ? (JSON.parse(stored) as ChatMessage[]) : []);
+    } catch {
+      setChatMessages([]);
+    }
+  }, [chatStorageKey]);
+
+  // Persist messages to localStorage every time they change
+  useEffect(() => {
+    if (chatMessages.length === 0) {
+      localStorage.removeItem(chatStorageKeyRef.current);
+      return;
+    }
+    localStorage.setItem(
+      chatStorageKeyRef.current,
+      JSON.stringify(chatMessages),
+    );
+  }, [chatMessages]);
+
+  useEffect(() => {
+    if (bottomTab === "chat" && chatScrollRef.current) {
+      chatScrollRef.current.scrollTop = chatScrollRef.current.scrollHeight;
+    }
+  }, [chatMessages, chatLoading, bottomTab]);
+
+  const handleChatSend = useCallback(async () => {
+    const text = chatInput.trim();
+    if (!text || chatLoading) return;
+    setChatInput("");
+    const userMsg: ChatMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: text,
+    };
+    setChatMessages((prev) => [...prev, userMsg]);
+    setChatLoading(true);
+    const abort = { aborted: false };
+    chatAbortRef.current = abort;
+    const assistantId = crypto.randomUUID();
+    setChatMessages((prev) => [
+      ...prev,
+      { id: assistantId, role: "assistant", content: "" },
+    ]);
+    try {
+      const history = [...chatMessages, userMsg].map((m) => ({
+        role: m.role,
+        content: m.content,
+      }));
+      await api.streamInfraAsk(
+        {
+          messages: history,
+          workspace: workspace.files,
+          questionId: currentQuestion?.id,
+        },
+        (delta) => {
+          if (abort.aborted) return;
+          setChatMessages((prev) =>
+            prev.map((m) =>
+              m.id === assistantId ? { ...m, content: m.content + delta } : m,
+            ),
+          );
+        },
+      );
+    } catch (err: unknown) {
+      if (!abort.aborted) {
+        setChatMessages((prev) =>
+          prev.map((m) =>
+            m.id === assistantId
+              ? { ...m, content: (err as Error)?.message ?? "Request failed" }
+              : m,
+          ),
+        );
+      }
+    } finally {
+      if (!abort.aborted) setChatLoading(false);
+    }
+  }, [chatInput, chatLoading, chatMessages, workspace.files, currentQuestion]);
+
+  const [consoleCopied, setConsoleCopied] = useState(false);
+
+  const handleCopyConsole = useCallback(() => {
+    const text = consoleLines.map((l) => l.text).join("\n");
+    void navigator.clipboard.writeText(text).then(() => {
+      setConsoleCopied(true);
+      setTimeout(() => setConsoleCopied(false), 1800);
+    });
+  }, [consoleLines]);
+
+  const [chatCopiedId, setChatCopiedId] = useState<string | null>(null);
+
+  const handleCopyMessage = useCallback((id: string, content: string) => {
+    void navigator.clipboard.writeText(content).then(() => {
+      setChatCopiedId(id);
+      setTimeout(() => setChatCopiedId(null), 1800);
+    });
+  }, []);
+
+  // ── Panel collapse ─────────────────────────────────────────────
+  const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [rightCollapsed, setRightCollapsed] = useState(false);
+
+  // ── File management ───────────────────────────────────────────
+  const [newFileName, setNewFileName] = useState("");
+  const [showNewFileInput, setShowNewFileInput] = useState(false);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
+    new Set(),
+  );
+  const newFileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (showNewFileInput)
+      setTimeout(() => newFileInputRef.current?.focus(), 30);
+  }, [showNewFileInput]);
+
+  const handleAddFile = useCallback(() => {
+    const name = newFileName.trim().replace(/\\/g, "/");
+    if (!name) {
+      setFileError("Name is required");
+      return;
+    }
+    if (name.includes("..") || name.startsWith("/")) {
+      setFileError("Invalid path");
+      return;
+    }
+    if (!/^[a-zA-Z0-9._/\-]+$/.test(name)) {
+      setFileError("Only letters, numbers, dots, _, -, / allowed");
+      return;
+    }
+    if (name in workspace.files) {
+      setFileError("File already exists");
+      return;
+    }
+    setWorkspace((w) => ({
+      ...w,
+      files: { ...w.files, [name]: "" },
+      activeFile: name,
+    }));
+    setActiveFile(name);
+    setNewFileName("");
+    setShowNewFileInput(false);
+    setFileError(null);
+  }, [newFileName, workspace.files]);
+
+  const handleDeleteFile = useCallback(
+    (fileName: string) => {
+      if (Object.keys(workspace.files).length <= 1) return;
+      if (!window.confirm(`Delete "${fileName}"?`)) return;
+      setWorkspace((w) => {
+        const next = { ...w.files };
+        delete next[fileName];
+        const remaining = Object.keys(next);
+        const nextActive =
+          w.activeFile === fileName ? (remaining[0] ?? "") : w.activeFile;
+        return { ...w, files: next, activeFile: nextActive };
+      });
+      if (activeFile === fileName) {
+        const remaining = Object.keys(workspace.files).filter(
+          (f) => f !== fileName,
+        );
+        setActiveFile(remaining[0] ?? "");
+      }
+    },
+    [workspace.files, activeFile],
+  );
+
+  // Build a visual tree from flat file paths (supports subfolders via /)
+  type TreeEntry =
+    | { kind: "folder"; path: string; label: string; depth: number }
+    | { kind: "file"; path: string; label: string; depth: number };
+
+  const treeEntries = (() => {
+    const seenFolders = new Set<string>();
+    const entries: TreeEntry[] = [];
+    const sorted = [...fileOrder].sort((a, b) => {
+      const ad = a.split("/").length;
+      const bd = b.split("/").length;
+      return ad !== bd ? ad - bd : a.localeCompare(b);
+    });
+    for (const filePath of sorted) {
+      const parts = filePath.split("/");
+      for (let i = 0; i < parts.length - 1; i++) {
+        const folderPath = parts.slice(0, i + 1).join("/");
+        if (!seenFolders.has(folderPath)) {
+          seenFolders.add(folderPath);
+          entries.push({
+            kind: "folder",
+            path: folderPath,
+            label: parts[i],
+            depth: i,
+          });
+        }
+      }
+      entries.push({
+        kind: "file",
+        path: filePath,
+        label: parts[parts.length - 1],
+        depth: parts.length - 1,
+      });
+    }
+    return entries;
+  })();
+
+  const visibleEntries = treeEntries.filter((entry) => {
+    const parts = entry.path.split("/");
+    for (let i = 1; i < parts.length; i++) {
+      if (collapsedFolders.has(parts.slice(0, i).join("/"))) return false;
+    }
+    return true;
+  });
+
+  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
+      className="z-50 flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
+      style={windowStyle}
+    >
+      {/* ── 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")}
+          />
+        </>
+      )}
+
+      {/* ── Title / drag bar ── */}
+      <div
+        className="flex items-center gap-2 px-3 py-2 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-[11px] uppercase tracking-[0.2em] text-cyan-400/80 shrink-0">
+          Infrastructure Lab
+        </span>
+        {/* Lab name */}
+        <input
+          value={labName}
+          onChange={(event) => setLabName(event.target.value)}
+          placeholder="Lab name"
+          onMouseDown={(e) => e.stopPropagation()}
+          className="flex-1 min-w-0 bg-slate-900 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100 focus:outline-none focus:border-cyan-500"
+        />
+        {/* Profile select */}
+        <select
+          onMouseDown={(e) => e.stopPropagation()}
+          value={workspace.executionMode}
+          onChange={(event) =>
+            setWorkspace((current) => ({
+              ...current,
+              executionMode:
+                event.target.value === "plan-only" ? "plan-only" : "localstack",
+            }))
+          }
+          className="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 focus:outline-none focus:border-cyan-500 shrink-0"
+        >
+          <option value="localstack">AWS LocalStack Profile</option>
+          <option value="plan-only">Plan-Only Profile</option>
+        </select>
+        {/* Actions */}
+        <div
+          className="flex items-center gap-1 shrink-0"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          {saved && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-xs text-emerald-300">
+              <Check className="w-3 h-3" />
+              Saved
+            </span>
+          )}
+          <button
+            onClick={() => void runInfra("validate")}
+            disabled={!!runningAction || !currentQuestion}
+            className="inline-flex items-center gap-1.5 rounded border border-emerald-500/30 bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-200 hover:bg-emerald-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            {runningAction === "validate" ? (
+              <Loader2 className="w-3 h-3 animate-spin" />
+            ) : (
+              <Play className="w-3 h-3" />
+            )}
+            Validate
+          </button>
+          <button
+            onClick={() => void runInfra("plan")}
+            disabled={!!runningAction || !currentQuestion}
+            className="inline-flex items-center gap-1.5 rounded border border-cyan-500/30 bg-cyan-500/10 px-2.5 py-1 text-xs font-medium text-cyan-100 hover:bg-cyan-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            {runningAction === "plan" ? (
+              <Loader2 className="w-3 h-3 animate-spin" />
+            ) : (
+              <Play className="w-3 h-3" />
+            )}
+            Plan
+          </button>
+          <button
+            onClick={() => void persistWorkspace(false)}
+            disabled={saving || !currentQuestion}
+            className="inline-flex items-center gap-1.5 rounded bg-cyan-500 px-2.5 py-1 text-xs font-medium text-slate-950 hover:bg-cyan-400 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            {saving ? (
+              <Loader2 className="w-3 h-3 animate-spin" />
+            ) : (
+              <Save className="w-3 h-3" />
+            )}
+            {activeInfraId ? "Save" : "Save Lab"}
+          </button>
+          <button
+            onClick={() => void persistWorkspace(true)}
+            disabled={saving || !currentQuestion}
+            className="rounded border border-slate-700 px-2.5 py-1 text-xs text-slate-200 hover:border-slate-600 hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            Save As
+          </button>
+          <button
+            onClick={toggleMax}
+            className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors"
+            title={maximized ? "Restore" : "Maximise"}
+          >
+            {maximized ? (
+              <Minimize2 className="w-3.5 h-3.5" />
+            ) : (
+              <Maximize2 className="w-3.5 h-3.5" />
+            )}
+          </button>
+          <button
+            onClick={closeInfraLab}
+            className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors"
+            title="Close (Esc)"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      <div
+        className="grid flex-1 min-h-0"
+        style={{
+          gridTemplateColumns: [
+            leftCollapsed ? "0px" : "220px",
+            "minmax(0,1fr)",
+            rightCollapsed ? "0px" : "360px",
+          ].join(" "),
+        }}
+      >
+        <aside
+          className="border-r border-slate-800 bg-slate-950/60 min-h-0 overflow-hidden flex flex-col"
+          style={{
+            width: leftCollapsed ? 0 : undefined,
+            padding: leftCollapsed ? 0 : undefined,
+          }}
+        >
+          <div
+            className="flex-1 overflow-y-auto p-3 flex flex-col gap-2"
+            style={{ display: leftCollapsed ? "none" : undefined }}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between">
+              <p className="text-xs font-semibold text-slate-200">
+                Workspace Files
+              </p>
+              <button
+                onClick={() => {
+                  setShowNewFileInput((v) => !v);
+                  setFileError(null);
+                  setNewFileName("");
+                }}
+                className="p-1 rounded text-slate-500 hover:text-cyan-400 hover:bg-slate-800 transition-colors"
+                title="New file"
+              >
+                <FilePlus className="w-3.5 h-3.5" />
+              </button>
+            </div>
+
+            {/* New file input */}
+            {showNewFileInput && (
+              <div className="space-y-1">
+                <input
+                  ref={newFileInputRef}
+                  value={newFileName}
+                  onChange={(e) => {
+                    setNewFileName(e.target.value);
+                    setFileError(null);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleAddFile();
+                    if (e.key === "Escape") {
+                      setShowNewFileInput(false);
+                      setNewFileName("");
+                      setFileError(null);
+                    }
+                  }}
+                  placeholder="e.g. modules/vpc.tf"
+                  className="w-full rounded border border-slate-700 bg-slate-800 px-2 py-1.5 text-xs text-slate-200 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
+                />
+                {fileError && (
+                  <p className="text-[10px] text-red-400">{fileError}</p>
+                )}
+                <div className="flex gap-1">
+                  <button
+                    onClick={handleAddFile}
+                    disabled={!newFileName.trim()}
+                    className="px-2 py-1 text-[10px] rounded bg-cyan-700 hover:bg-cyan-600 disabled:opacity-40 text-white transition-colors"
+                  >
+                    Create
+                  </button>
+                  <button
+                    onClick={() => {
+                      setShowNewFileInput(false);
+                      setNewFileName("");
+                      setFileError(null);
+                    }}
+                    className="px-2 py-1 text-[10px] rounded text-slate-400 hover:text-slate-200 hover:bg-slate-800 transition-colors"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* File tree */}
+            <div className="space-y-0.5">
+              {visibleEntries.map((entry) => {
+                if (entry.kind === "folder") {
+                  const isCollapsed = collapsedFolders.has(entry.path);
+                  return (
+                    <button
+                      key={`folder:${entry.path}`}
+                      onClick={() =>
+                        setCollapsedFolders((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(entry.path)) next.delete(entry.path);
+                          else next.add(entry.path);
+                          return next;
+                        })
+                      }
+                      style={{ paddingLeft: `${entry.depth * 12 + 2}px` }}
+                      className="w-full flex items-center gap-1 py-1 text-xs text-slate-500 hover:text-slate-300 transition-colors"
+                    >
+                      {isCollapsed ? (
+                        <ChevronRight className="w-3 h-3 shrink-0" />
+                      ) : (
+                        <ChevronDown className="w-3 h-3 shrink-0" />
+                      )}
+                      <Folder className="w-3 h-3 shrink-0" />
+                      <span className="truncate">{entry.label}/</span>
+                    </button>
+                  );
+                }
+                const isActive = entry.path === activeFile;
+                const canDelete = Object.keys(workspace.files).length > 1;
+                return (
+                  <div
+                    key={`file:${entry.path}`}
+                    style={{ paddingLeft: `${entry.depth * 12}px` }}
+                    className="group relative"
+                  >
+                    <button
+                      onClick={() => {
+                        setActiveFile(entry.path);
+                        setWorkspace((current) => ({
+                          ...current,
+                          activeFile: entry.path,
+                        }));
+                      }}
+                      className={`w-full rounded-lg border px-2 py-1.5 pr-6 text-left text-xs transition-colors ${
+                        isActive
+                          ? "border-cyan-500/60 bg-cyan-500/10 text-cyan-200"
+                          : "border-slate-800 bg-slate-900 text-slate-400 hover:border-slate-700 hover:text-slate-200"
+                      }`}
+                    >
+                      {entry.label}
+                    </button>
+                    {canDelete && (
+                      <button
+                        onClick={() => handleDeleteFile(entry.path)}
+                        className="absolute right-1 top-1/2 -translate-y-1/2 p-0.5 rounded text-slate-700 opacity-0 group-hover:opacity-100 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                        title={`Delete ${entry.path}`}
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </aside>
+
+        <section className="min-h-0 flex flex-col">
+          <div className="flex items-center justify-between border-b border-slate-800 px-2 py-3">
+            <div className="flex items-center gap-1.5 min-w-0">
+              <button
+                onClick={() => setLeftCollapsed((v) => !v)}
+                className="p-1 rounded text-slate-600 hover:text-slate-300 hover:bg-slate-800 transition-colors shrink-0"
+                title={leftCollapsed ? "Show files panel" : "Hide files panel"}
+              >
+                {leftCollapsed ? (
+                  <PanelLeftOpen className="w-3.5 h-3.5" />
+                ) : (
+                  <PanelLeftClose className="w-3.5 h-3.5" />
+                )}
+              </button>
+              <div>
+                <p className="text-sm font-medium text-slate-100">
+                  {activeFile}
+                </p>
+                <p className="text-xs text-slate-500">
+                  Edit the Terraform workspace and run validate or plan against
+                  the saved artifact.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-1.5 shrink-0">
+              <span className="rounded-full border border-slate-700 px-2 py-1 text-[11px] uppercase tracking-wide text-slate-400">
+                {workspace.executionMode === "localstack"
+                  ? "AWS LocalStack"
+                  : "Plan Only"}
+              </span>
+              <button
+                onClick={() => setRightCollapsed((v) => !v)}
+                className="p-1 rounded text-slate-600 hover:text-slate-300 hover:bg-slate-800 transition-colors"
+                title={
+                  rightCollapsed
+                    ? "Show inspector panel"
+                    : "Hide inspector panel"
+                }
+              >
+                {rightCollapsed ? (
+                  <PanelRightOpen className="w-3.5 h-3.5" />
+                ) : (
+                  <PanelRightClose className="w-3.5 h-3.5" />
+                )}
+              </button>
+            </div>
+          </div>
+          <div className="flex-1 min-h-0 p-4 bg-slate-950">
+            <textarea
+              value={currentFile}
+              onChange={(event) =>
+                setWorkspace((current) =>
+                  updateInfraFile(current, activeFile, event.target.value),
+                )
+              }
+              onKeyDown={(event) => {
+                if (event.key === "Tab") {
+                  event.preventDefault();
+                  const el = event.currentTarget;
+                  const start = el.selectionStart;
+                  const end = el.selectionEnd;
+                  const indent = "  ";
+                  const next =
+                    el.value.slice(0, start) + indent + el.value.slice(end);
+                  setWorkspace((current) =>
+                    updateInfraFile(current, activeFile, next),
+                  );
+                  // restore cursor after React re-render
+                  requestAnimationFrame(() => {
+                    el.selectionStart = start + indent.length;
+                    el.selectionEnd = start + indent.length;
+                  });
+                }
+              }}
+              spellCheck={false}
+              className="h-full w-full resize-none rounded-xl border border-slate-800 bg-slate-950 px-4 py-3 font-mono text-sm leading-6 text-slate-200 focus:outline-none focus:border-cyan-500"
+            />
+          </div>
+          <div className="h-72 border-t border-slate-800 bg-slate-950/80 flex flex-col">
+            {/* Tab bar */}
+            <div className="flex items-center border-b border-slate-800 px-1 shrink-0">
+              <button
+                onClick={() => setBottomTab("output")}
+                className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 transition-colors ${
+                  bottomTab === "output"
+                    ? "border-cyan-500 text-cyan-300"
+                    : "border-transparent text-slate-500 hover:text-slate-300"
+                }`}
+              >
+                Run Output
+              </button>
+              <button
+                onClick={() => setBottomTab("console")}
+                className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 transition-colors ${
+                  bottomTab === "console"
+                    ? "border-emerald-500 text-emerald-300"
+                    : "border-transparent text-slate-500 hover:text-slate-300"
+                }`}
+              >
+                <Terminal className="w-3 h-3" />
+                Console
+              </button>
+              <button
+                onClick={() => {
+                  setBottomTab("chat");
+                  setTimeout(() => chatInputRef.current?.focus(), 30);
+                }}
+                className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 transition-colors ${
+                  bottomTab === "chat"
+                    ? "border-violet-500 text-violet-300"
+                    : "border-transparent text-slate-500 hover:text-slate-300"
+                }`}
+              >
+                <MessageSquare className="w-3 h-3" />
+                Chat
+              </button>
+              <div className="flex-1" />
+              {bottomTab === "output" && selectedRun && (
+                <span
+                  className={`mr-2 rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide ${
+                    selectedRun.status === "completed"
+                      ? "bg-emerald-500/15 text-emerald-300"
+                      : "bg-red-500/15 text-red-300"
+                  }`}
+                >
+                  {selectedRun.status}
+                </span>
+              )}
+              {bottomTab === "console" && consoleLines.length > 0 && (
+                <div className="flex items-center gap-1 mr-2">
+                  <button
+                    onClick={handleCopyConsole}
+                    className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors flex items-center gap-1"
+                    title="Copy output"
+                  >
+                    {consoleCopied ? (
+                      <ClipboardCheck className="w-3 h-3 text-emerald-400" />
+                    ) : (
+                      <Clipboard className="w-3 h-3" />
+                    )}
+                  </button>
+                  <button
+                    onClick={() => setConsoleLines([])}
+                    className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+                  >
+                    clear
+                  </button>
+                </div>
+              )}
+              {bottomTab === "chat" && chatMessages.length > 0 && (
+                <button
+                  onClick={() => setChatMessages([])}
+                  className="mr-2 text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+                >
+                  clear
+                </button>
+              )}
+            </div>
+
+            {/* Run Output panel */}
+            {bottomTab === "output" && (
+              <pre className="flex-1 overflow-auto px-4 py-3 font-mono text-xs leading-5 text-slate-300 whitespace-pre-wrap">
+                {logOutput}
+              </pre>
+            )}
+
+            {/* Console panel */}
+            {bottomTab === "console" && (
+              <>
+                <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. e.g.{" "}
+                      <span className="text-slate-500">terraform validate</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>
+                <div className="flex items-center gap-1.5 px-3 py-2 border-t border-slate-800 bg-slate-900/60 shrink-0">
+                  <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>
+              </>
+            )}
+
+            {/* Chat panel */}
+            {bottomTab === "chat" && (
+              <>
+                <div
+                  ref={chatScrollRef}
+                  className="flex-1 overflow-y-auto px-3 py-2 space-y-3"
+                >
+                  {chatMessages.length === 0 && (
+                    <p className="text-xs text-slate-600 pt-1">
+                      Ask anything about your workspace — e.g.{" "}
+                      <span className="text-slate-500">
+                        "What does this provider block do?"
+                      </span>
+                    </p>
+                  )}
+                  {chatMessages.map((msg) => (
+                    <div
+                      key={msg.id}
+                      className={`flex flex-col gap-0.5 ${
+                        msg.role === "user" ? "items-end" : "items-start"
+                      }`}
+                    >
+                      <div
+                        className={`max-w-[85%] rounded-xl px-3 py-2 text-xs leading-5 ${
+                          msg.role === "user"
+                            ? "bg-violet-600/30 text-violet-100 whitespace-pre-wrap"
+                            : "bg-slate-800 text-slate-200 prose prose-invert prose-xs max-w-none"
+                        }`}
+                      >
+                        {msg.role === "user" ? (
+                          msg.content
+                        ) : msg.content ? (
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                              code({ className, children, ...props }) {
+                                const isBlock =
+                                  className?.startsWith("language-");
+                                return isBlock ? (
+                                  <pre className="bg-slate-900/80 rounded p-2 overflow-x-auto my-1">
+                                    <code
+                                      className={`${className ?? ""} text-[11px]`}
+                                      {...props}
+                                    >
+                                      {children}
+                                    </code>
+                                  </pre>
+                                ) : (
+                                  <code
+                                    className="bg-slate-900/60 px-1 rounded text-violet-300 text-[11px]"
+                                    {...props}
+                                  >
+                                    {children}
+                                  </code>
+                                );
+                              },
+                              table({ children }) {
+                                return (
+                                  <table className="text-[11px] border-collapse w-full my-1">
+                                    {children}
+                                  </table>
+                                );
+                              },
+                              th({ children }) {
+                                return (
+                                  <th className="border border-slate-700 px-2 py-1 text-left text-slate-300">
+                                    {children}
+                                  </th>
+                                );
+                              },
+                              td({ children }) {
+                                return (
+                                  <td className="border border-slate-700 px-2 py-1">
+                                    {children}
+                                  </td>
+                                );
+                              },
+                              p({ children }) {
+                                return (
+                                  <p className="mb-1 last:mb-0">{children}</p>
+                                );
+                              },
+                              ul({ children }) {
+                                return (
+                                  <ul className="list-disc list-inside mb-1 space-y-0.5">
+                                    {children}
+                                  </ul>
+                                );
+                              },
+                              ol({ children }) {
+                                return (
+                                  <ol className="list-decimal list-inside mb-1 space-y-0.5">
+                                    {children}
+                                  </ol>
+                                );
+                              },
+                              h2({ children }) {
+                                return (
+                                  <h2 className="text-xs font-semibold text-slate-200 mt-2 mb-0.5">
+                                    {children}
+                                  </h2>
+                                );
+                              },
+                              h3({ children }) {
+                                return (
+                                  <h3 className="text-xs font-semibold text-slate-300 mt-1.5 mb-0.5">
+                                    {children}
+                                  </h3>
+                                );
+                              },
+                              hr() {
+                                return <hr className="border-slate-700 my-2" />;
+                              },
+                            }}
+                          >
+                            {msg.content}
+                          </ReactMarkdown>
+                        ) : (
+                          <span className="flex items-center gap-1.5 text-slate-500">
+                            <Loader2 className="w-3 h-3 animate-spin" />{" "}
+                            thinking…
+                          </span>
+                        )}
+                      </div>
+                      {msg.role === "assistant" && msg.content && (
+                        <button
+                          onClick={() => handleCopyMessage(msg.id, msg.content)}
+                          className="flex items-center gap-1 text-[10px] text-slate-700 hover:text-slate-400 transition-colors px-1"
+                          title="Copy response"
+                        >
+                          {chatCopiedId === msg.id ? (
+                            <>
+                              <ClipboardCheck className="w-3 h-3 text-emerald-400" />
+                              <span className="text-emerald-400">Copied</span>
+                            </>
+                          ) : (
+                            <>
+                              <Clipboard className="w-3 h-3" />
+                              <span>Copy</span>
+                            </>
+                          )}
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <div className="flex items-end gap-1.5 px-3 py-2 border-t border-slate-800 bg-slate-900/60 shrink-0">
+                  <textarea
+                    ref={chatInputRef}
+                    rows={1}
+                    value={chatInput}
+                    onChange={(e) => setChatInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        void handleChatSend();
+                      }
+                    }}
+                    placeholder="Ask about your Terraform code…"
+                    disabled={chatLoading}
+                    className="flex-1 bg-transparent text-xs text-slate-200 placeholder-slate-600 outline-none resize-none disabled:opacity-50 max-h-20"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => void handleChatSend()}
+                    disabled={chatLoading || !chatInput.trim()}
+                    className="p-1 rounded text-slate-600 hover:text-violet-400 hover:bg-violet-500/10 disabled:opacity-40 transition-colors shrink-0"
+                    title="Send (Enter)"
+                  >
+                    {chatLoading ? (
+                      <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                    ) : (
+                      <Send className="w-3.5 h-3.5" />
+                    )}
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </section>
+
+        <aside
+          className="border-l border-slate-800 bg-slate-950/40 min-h-0 overflow-hidden"
+          style={{ width: rightCollapsed ? 0 : undefined }}
+        >
+          <div
+            className="p-4 overflow-y-auto h-full"
+            style={{ display: rightCollapsed ? "none" : undefined }}
+          >
+            <div className="rounded-xl border border-slate-800 bg-slate-900/80 p-4">
+              <p className="text-sm font-semibold text-slate-100">
+                Execution Profile
+              </p>
+              <dl className="mt-3 space-y-3 text-sm">
+                <div>
+                  <dt className="text-slate-500">Provider</dt>
+                  <dd className="mt-1 text-slate-200">AWS</dd>
+                </div>
+                <div>
+                  <dt className="text-slate-500">Mode</dt>
+                  <dd className="mt-1 text-slate-200">
+                    {workspace.executionMode === "localstack"
+                      ? "Local emulator target"
+                      : "Speculative plan target"}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-slate-500">Files</dt>
+                  <dd className="mt-1 text-slate-200">
+                    {fileOrder.length} tracked files
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-slate-500">Saved Artifact</dt>
+                  <dd className="mt-1 text-slate-200">
+                    {activeInfraId
+                      ? "Question-scoped infra lab"
+                      : "Unsaved draft"}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+
+            <div className="mt-4 rounded-xl border border-slate-800 bg-slate-900/80 p-4">
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-sm font-semibold text-slate-100">
+                  Selected Run
+                </p>
+                {selectedRun && (
+                  <span className="text-[11px] text-slate-500">
+                    {Math.round(selectedRun.durationMs / 100) / 10}s
+                  </span>
+                )}
+              </div>
+              {!selectedRun && (
+                <p className="mt-3 text-sm text-slate-500">
+                  Run validate or plan to inspect persisted artifacts here.
+                </p>
+              )}
+              {selectedRun && (
+                <div className="mt-3 space-y-4 text-sm">
+                  <div className="flex items-center gap-2 text-slate-300">
+                    <span className="rounded-full border border-slate-700 px-2 py-1 text-[11px] uppercase tracking-wide text-slate-400">
+                      {selectedRun.action}
+                    </span>
+                    <span
+                      className={`rounded-full px-2 py-1 text-[11px] uppercase tracking-wide ${
+                        selectedRun.status === "completed"
+                          ? "bg-emerald-500/15 text-emerald-300"
+                          : "bg-red-500/15 text-red-300"
+                      }`}
+                    >
+                      {selectedRun.status}
+                    </span>
+                  </div>
+
+                  {selectedRun.planSummary && (
+                    <div className="grid grid-cols-2 gap-2 text-xs">
+                      <div className="rounded-lg border border-slate-800 bg-slate-950 px-3 py-2">
+                        <p className="text-slate-500">Create</p>
+                        <p className="mt-1 text-lg text-emerald-300">
+                          {selectedRun.planSummary.add}
+                        </p>
+                      </div>
+                      <div className="rounded-lg border border-slate-800 bg-slate-950 px-3 py-2">
+                        <p className="text-slate-500">Change</p>
+                        <p className="mt-1 text-lg text-amber-300">
+                          {selectedRun.planSummary.change}
+                        </p>
+                      </div>
+                      <div className="rounded-lg border border-slate-800 bg-slate-950 px-3 py-2">
+                        <p className="text-slate-500">Destroy</p>
+                        <p className="mt-1 text-lg text-red-300">
+                          {selectedRun.planSummary.destroy}
+                        </p>
+                      </div>
+                      <div className="rounded-lg border border-slate-800 bg-slate-950 px-3 py-2">
+                        <p className="text-slate-500">Replace</p>
+                        <p className="mt-1 text-lg text-cyan-200">
+                          {selectedRun.planSummary.replace}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+
+                  {selectedRun.error && (
+                    <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-red-200">
+                      <div className="flex items-start gap-2">
+                        <AlertCircle className="w-4 h-4 mt-0.5 shrink-0" />
+                        <p>{selectedRun.error}</p>
+                      </div>
+                    </div>
+                  )}
+
+                  <div>
+                    <div className="flex items-center gap-2 rounded-lg bg-slate-950 p-1">
+                      <button
+                        onClick={() => setInspectorTab("summary")}
+                        className={`flex-1 rounded-md px-2 py-1.5 text-xs transition-colors ${
+                          inspectorTab === "summary"
+                            ? "bg-slate-800 text-slate-100"
+                            : "text-slate-500 hover:text-slate-300"
+                        }`}
+                      >
+                        Summary
+                      </button>
+                      <button
+                        onClick={() => setInspectorTab("json")}
+                        className={`flex-1 rounded-md px-2 py-1.5 text-xs transition-colors ${
+                          inspectorTab === "json"
+                            ? "bg-slate-800 text-slate-100"
+                            : "text-slate-500 hover:text-slate-300"
+                        }`}
+                      >
+                        JSON
+                      </button>
+                    </div>
+                    {inspectorTab === "summary" ? (
+                      <div className="mt-3 space-y-2">
+                        {selectedRun.diagnostics.length > 0 ? (
+                          selectedRun.diagnostics.map((diagnostic, index) => (
+                            <div
+                              key={`${diagnostic.summary}-${index}`}
+                              className="rounded-lg border border-slate-800 bg-slate-950 px-3 py-2"
+                            >
+                              <p className="text-xs uppercase tracking-wide text-slate-500">
+                                {diagnostic.severity}
+                              </p>
+                              <p className="mt-1 text-sm text-slate-200">
+                                {diagnostic.summary}
+                              </p>
+                              {diagnostic.filename && (
+                                <p className="mt-1 text-xs text-slate-500">
+                                  {diagnostic.filename}
+                                  {diagnostic.line ? `:${diagnostic.line}` : ""}
+                                </p>
+                              )}
+                              {diagnostic.detail && (
+                                <p className="mt-2 text-xs text-slate-400 whitespace-pre-wrap">
+                                  {diagnostic.detail}
+                                </p>
+                              )}
+                            </div>
+                          ))
+                        ) : (
+                          <div className="rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-400">
+                            No diagnostics were emitted for this run.
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <pre className="mt-3 max-h-72 overflow-auto rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 font-mono text-[11px] leading-5 text-slate-300 whitespace-pre-wrap">
+                        {inspectorJson
+                          ? JSON.stringify(inspectorJson, null, 2)
+                          : "No JSON artifact is available for this run."}
+                      </pre>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-4 rounded-xl border border-slate-800 bg-slate-900/80 p-4">
+              <div className="flex items-center justify-between gap-2">
+                <p className="text-sm font-semibold text-slate-100">
+                  Run History
+                </p>
+                {loadingRuns && (
+                  <Loader2 className="w-4 h-4 animate-spin text-slate-500" />
+                )}
+              </div>
+              <div className="mt-3 space-y-2">
+                {runHistory.length === 0 && (
+                  <p className="text-sm text-slate-500">
+                    Saved runs will appear here after the first validate or
+                    plan.
+                  </p>
+                )}
+                {runHistory.map((run) => (
+                  <button
+                    key={run.id}
+                    onClick={() => void loadRunDetails(run.id)}
+                    className={`w-full rounded-lg border px-3 py-2 text-left transition-colors ${
+                      selectedRunId === run.id
+                        ? "border-cyan-500/50 bg-cyan-500/10"
+                        : "border-slate-800 bg-slate-950 hover:border-slate-700"
+                    }`}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-sm text-slate-200">
+                        {run.action}
+                      </span>
+                      <span
+                        className={`rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide ${
+                          run.status === "completed"
+                            ? "bg-emerald-500/15 text-emerald-300"
+                            : "bg-red-500/15 text-red-300"
+                        }`}
+                      >
+                        {run.status}
+                      </span>
+                    </div>
+                    <p className="mt-1 text-[11px] text-slate-500">
+                      {new Date(run.startedAt).toLocaleString()}
+                    </p>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}