create-interview-cockpit 0.17.3 → 0.19.0

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   AlertCircle,
   Check,
@@ -26,31 +26,488 @@ import {
   Trash2,
   X,
 } from "lucide-react";
+import MonacoEditorLib from "@monaco-editor/react";
+import type {
+  BeforeMount,
+  Monaco,
+  OnChange,
+  OnMount,
+} from "@monaco-editor/react";
+import { useStore } from "../store";
+import {
+  cloneInfraLabWorkspace,
+  DEFAULT_INFRA_LAB,
+  getInfraLabFileOrder,
+  serializeInfraLabWorkspace,
+} from "../infraLab";
+import type { InfraLabWorkspace } from "../types";
+import type {
+  InfraCommandStreamMessage,
+  InfraRunAction,
+  InfraRunDetails,
+  InfraRunListItem,
+} from "../api";
+import * as api from "../api";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 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";
+
+const EDITOR_FONT =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+const DOCKER_DEMO_URL = "http://localhost:4288";
+const INFRA_CONSOLE_HELP = `Supported commands:
+  terraform init | validate | plan | apply -auto-approve | destroy -auto-approve | output | state | version
+  docker version | docker info | docker ps -a | docker images | docker inspect <name>
+  docker build -t <tag> . | docker run --rm <image> | docker exec <container> <cmd>
+  docker compose up -d --build | docker compose ps | docker compose logs | docker compose down [-v]
+  docker network ls | docker volume ls | docker logs <container> | docker stop/rm <container>
+  curl -s http://localhost:4288/api/ping | pwd | ls | cat <workspace-file>
+
+Notes:
+  - Run one command at a time; shell pipes/operators are disabled in this lab console.
+  - Use detached compose runs (docker compose up -d ...) so the console does not stay attached forever.
+  - Docker prune commands require --force or -f so they do not hang on an interactive prompt.
+  - The command runs from the saved infra workspace session directory.`;
+
+let infraMonacoConfigured = false;
+
+interface InfraFileTreeNode {
+  name: string;
+  path: string;
+  folders: InfraFileTreeNode[];
+  files: string[];
+}
+
+function baseName(filePath: string): string {
+  return filePath.split("/").pop() || filePath;
+}
+
+function buildInfraFileTree(paths: string[]): InfraFileTreeNode {
+  const root: InfraFileTreeNode = {
+    name: "",
+    path: "",
+    folders: [],
+    files: [],
+  };
+
+  for (const filePath of paths) {
+    const parts = filePath.split("/").filter(Boolean);
+    let node = root;
+
+    for (let index = 0; index < parts.length - 1; index += 1) {
+      const name = parts[index];
+      const folderPath = parts.slice(0, index + 1).join("/");
+      let child = node.folders.find((entry) => entry.path === folderPath);
+
+      if (!child) {
+        child = {
+          name,
+          path: folderPath,
+          folders: [],
+          files: [],
+        };
+        node.folders.push(child);
+      }
+
+      node = child;
+    }
+
+    node.files.push(filePath);
+  }
+
+  return root;
+}
+
+function getInfraEditorLanguage(fileName: string): string {
+  const lower = fileName.toLowerCase();
+
+  if (lower.endsWith(".tf") || lower.endsWith(".tfvars")) return "terraform";
+  if (lower.endsWith(".ts") || lower.endsWith(".tsx")) return "typescript";
+  if (
+    lower.endsWith(".js") ||
+    lower.endsWith(".jsx") ||
+    lower.endsWith(".mjs")
+  ) {
+    return "javascript";
+  }
+  if (lower.endsWith(".json")) return "json";
+  if (lower.endsWith(".md") || lower.endsWith(".markdown")) return "markdown";
+  if (baseName(fileName).toLowerCase() === "dockerfile") return "dockerfile";
+  if (lower.endsWith(".yaml") || lower.endsWith(".yml")) return "yaml";
+  return "plaintext";
+}
+
+function hasTerraformFiles(files: Record<string, string>): boolean {
+  return Object.keys(files).some((fileName) => {
+    const lower = fileName.toLowerCase();
+    return lower.endsWith(".tf") || lower.endsWith(".tfvars");
+  });
+}
+
+function hasDockerComposeFile(files: Record<string, string>): boolean {
+  return Object.keys(files).some((fileName) => {
+    const lower = baseName(fileName).toLowerCase();
+    return (
+      lower === "compose.yaml" ||
+      lower === "compose.yml" ||
+      lower === "docker-compose.yaml" ||
+      lower === "docker-compose.yml"
+    );
+  });
+}
+
+function hasDockerfile(files: Record<string, string>): boolean {
+  return Object.keys(files).some(
+    (fileName) => baseName(fileName).toLowerCase() === "dockerfile",
+  );
+}
+
+function isDockerFileWorkspace(workspace: InfraLabWorkspace): boolean {
+  return (
+    workspace.provider === "docker" &&
+    (hasDockerComposeFile(workspace.files) || hasDockerfile(workspace.files))
+  );
+}
+
+function configureInfraMonaco(monaco: Monaco) {
+  const hasTerraform = monaco.languages
+    .getLanguages()
+    .some((language: { id: string }) => language.id === "terraform");
+
+  if (!hasTerraform) {
+    monaco.languages.register({
+      id: "terraform",
+      extensions: [".tf", ".tfvars"],
+      aliases: ["Terraform", "tf", "tfvars"],
+    });
+    monaco.languages.setLanguageConfiguration("terraform", {
+      comments: {
+        lineComment: "#",
+        blockComment: ["/*", "*/"],
+      },
+      brackets: [
+        ["{", "}"],
+        ["[", "]"],
+        ["(", ")"],
+      ],
+      autoClosingPairs: [
+        { open: "{", close: "}" },
+        { open: "[", close: "]" },
+        { open: "(", close: ")" },
+        { open: '"', close: '"' },
+      ],
+      surroundingPairs: [
+        { open: "{", close: "}" },
+        { open: "[", close: "]" },
+        { open: "(", close: ")" },
+        { open: '"', close: '"' },
+      ],
+    });
+    monaco.languages.setMonarchTokensProvider("terraform", {
+      keywords: [
+        "terraform",
+        "provider",
+        "resource",
+        "data",
+        "variable",
+        "output",
+        "locals",
+        "module",
+        "required_providers",
+        "required_version",
+        "source",
+        "version",
+        "for",
+        "in",
+        "if",
+      ],
+      constants: ["true", "false", "null"],
+      tokenizer: {
+        root: [
+          [/#.*$/, "comment"],
+          [/\/\/.*$/, "comment"],
+          [/\/\*/, "comment", "@comment"],
+          [/"/, "string", "@string"],
+          [/[{}()[\]]/, "@brackets"],
+          [/[a-zA-Z_][\w-]*(?=\s*{)/, "type.identifier"],
+          [/[a-zA-Z_][\w-]*(?=\s*=)/, "attribute.name"],
+          [
+            /[a-zA-Z_][\w-]*/,
+            {
+              cases: {
+                "@keywords": "keyword",
+                "@constants": "constant",
+                "@default": "identifier",
+              },
+            },
+          ],
+          [/\d+(\.\d+)?/, "number"],
+          [/[=.:,]/, "delimiter"],
+        ],
+        string: [
+          [/[^\\"]+/, "string"],
+          [/\\./, "string.escape"],
+          [/"/, "string", "@pop"],
+        ],
+        comment: [
+          [/[^/*]+/, "comment"],
+          [/\*\//, "comment", "@pop"],
+          [/[/*]/, "comment"],
+        ],
+      },
+    });
+  }
+
+  if (!infraMonacoConfigured) {
+    // These app files are edited as an in-browser lab, not inside a real
+    // node_modules-backed project. Keep Monaco useful for syntax checks while
+    // preventing generated NestJS/Express/Redis imports from looking broken.
+    const tsLang = monaco.languages.typescript as any;
+    if (tsLang?.typescriptDefaults && tsLang?.javascriptDefaults) {
+      const compilerOptions = {
+        target: tsLang.ScriptTarget.ESNext,
+        module: tsLang.ModuleKind.ESNext,
+        moduleResolution:
+          tsLang.ModuleResolutionKind.Bundler ??
+          tsLang.ModuleResolutionKind.NodeJs,
+        allowJs: true,
+        allowNonTsExtensions: true,
+        allowSyntheticDefaultImports: true,
+        esModuleInterop: true,
+        experimentalDecorators: true,
+        emitDecoratorMetadata: true,
+        resolveJsonModule: true,
+        skipLibCheck: true,
+        strict: false,
+      };
+      const diagnosticsOptions = {
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        diagnosticCodesToIgnore: [2307, 2688, 2792, 7016],
+      };
+
+      tsLang.typescriptDefaults.setCompilerOptions(compilerOptions);
+      tsLang.javascriptDefaults.setCompilerOptions(compilerOptions);
+      tsLang.typescriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
+      tsLang.javascriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
+
+      const labAmbientTypes = `
+declare var process: {
+  env: Record<string, string | undefined>;
+  argv: string[];
+  cwd(): string;
+};
+
+declare var Buffer: {
+  from(value: string, encoding?: string): { toString(encoding?: string): string };
+};
+
+declare module 'reflect-metadata' {}
+
+declare module '@nestjs/common' {
+  export function Body(...args: any[]): ParameterDecorator;
+  export function Controller(...args: any[]): ClassDecorator;
+  export function Get(...args: any[]): MethodDecorator;
+  export function Headers(...args: any[]): ParameterDecorator;
+  export function Module(...args: any[]): ClassDecorator;
+  export function Param(...args: any[]): ParameterDecorator;
+  export function Post(...args: any[]): MethodDecorator;
+  export function Query(...args: any[]): ParameterDecorator;
+  export function Req(...args: any[]): ParameterDecorator;
+  export function Res(...args: any[]): ParameterDecorator;
+}
+
+declare module '@nestjs/core' {
+  export const NestFactory: {
+    create(module: any, options?: any): Promise<any>;
+  };
+}
+
+declare module '@nestjs/platform-express' {}
+
+declare module 'cookie-parser' {
+  function cookieParser(...args: any[]): any;
+  export default cookieParser;
+}
+
+declare module 'ioredis' {
+  export default class Redis {
+    constructor(...args: any[]);
+    get(key: string): Promise<string | null>;
+    setex(key: string, seconds: number, value: string): Promise<any>;
+    del(key: string): Promise<any>;
+    expire(key: string, seconds: number): Promise<any>;
+  }
+}
+
+declare module 'express' {
+  export type Request = any;
+  export type Response = any;
+  const express: any;
+  export default express;
+}
+
+declare module 'crypto' {
+  const crypto: any;
+  export default crypto;
+  export function randomUUID(): string;
+  export function randomBytes(size: number): { toString(encoding?: string): string };
+  export function createHash(algorithm: string): { update(value: string): any; digest(encoding?: string): string };
+}
+`;
+
+      tsLang.typescriptDefaults.addExtraLib(
+        labAmbientTypes,
+        "file:///infra-lab/types/node-and-nest.d.ts",
+      );
+      tsLang.javascriptDefaults.addExtraLib(
+        labAmbientTypes,
+        "file:///infra-lab/types/node-and-nest.d.ts",
+      );
+    }
+
+    monaco.editor.defineTheme("infra-lab-dark", {
+      base: "vs-dark",
+      inherit: true,
+      rules: [
+        { token: "comment", foreground: "64748b", fontStyle: "italic" },
+        { token: "keyword", foreground: "22d3ee", fontStyle: "bold" },
+        { token: "type.identifier", foreground: "a78bfa" },
+        { token: "attribute.name", foreground: "93c5fd" },
+        { token: "string", foreground: "86efac" },
+        { token: "number", foreground: "fbbf24" },
+        { token: "constant", foreground: "f472b6" },
+      ],
+      colors: {
+        "editor.background": "#020617",
+        "editor.foreground": "#dbeafe",
+        "editorLineNumber.foreground": "#475569",
+        "editorLineNumber.activeForeground": "#67e8f9",
+        "editorCursor.foreground": "#22d3ee",
+        "editor.lineHighlightBackground": "#0f172a",
+        "editor.selectionBackground": "#155e75AA",
+        "editor.inactiveSelectionBackground": "#164e6333",
+        "editorIndentGuide.background1": "#1e293b",
+        "editorIndentGuide.activeBackground1": "#0e7490",
+        "editorWidget.background": "#0f172a",
+        "editorWidget.border": "#334155",
+        "minimap.background": "#020617",
+      },
+    });
+    infraMonacoConfigured = true;
+  }
+}
+
+function InfraMonacoEditor({
+  value,
+  fileName,
+  onChange,
+  onSave,
+  onPlan,
+}: {
+  value: string;
+  fileName: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  onPlan: () => void;
+}) {
+  const language = getInfraEditorLanguage(fileName);
+  const modelPath = `file:///infra-lab/${fileName}`;
+  const onChangeRef = useRef(onChange);
+  const onSaveRef = useRef(onSave);
+  const onPlanRef = useRef(onPlan);
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    onSaveRef.current = onSave;
+    onPlanRef.current = onPlan;
+  }, [onChange, onSave, onPlan]);
+
+  const handleBeforeMount = useCallback<BeforeMount>((monaco) => {
+    configureInfraMonaco(monaco);
+  }, []);
+
+  const handleMount = useCallback<OnMount>((editor, monaco) => {
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      onSaveRef.current();
+    });
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+      onPlanRef.current();
+    });
+  }, []);
+
+  const handleEditorChange = useCallback<OnChange>((next) => {
+    onChangeRef.current(next ?? "");
+  }, []);
+
+  const editorOptions = useMemo(
+    () => ({
+      fontFamily: EDITOR_FONT,
+      fontSize: 13,
+      lineHeight: 22,
+      minimap: {
+        enabled: true,
+        renderCharacters: false,
+        scale: 0.8,
+      },
+      wordWrap: "off" as const,
+      automaticLayout: true,
+      smoothScrolling: true,
+      cursorSmoothCaretAnimation: "on" as const,
+      scrollBeyondLastLine: false,
+      renderWhitespace: "selection" as const,
+      bracketPairColorization: { enabled: true },
+      guides: {
+        indentation: true,
+        bracketPairs: true,
+      },
+      padding: { top: 14, bottom: 14 },
+      lineNumbersMinChars: 4,
+      glyphMargin: true,
+      folding: true,
+      foldingHighlight: true,
+      links: true,
+      formatOnPaste: true,
+      formatOnType: true,
+      suggest: { preview: true },
+      scrollbar: {
+        vertical: "auto" as const,
+        horizontal: "auto" as const,
+        useShadows: true,
+      },
+      stickyScroll: { enabled: true },
+    }),
+    [],
+  );
+
+  return (
+    <div className="h-full w-full overflow-hidden rounded-xl border border-slate-800 bg-slate-950 shadow-inner select-text">
+      <MonacoEditorLib
+        height="100%"
+        width="100%"
+        language={language}
+        path={modelPath}
+        theme="infra-lab-dark"
+        value={value}
+        beforeMount={handleBeforeMount}
+        onMount={handleMount}
+        onChange={handleEditorChange}
+        options={editorOptions}
+      />
+    </div>
+  );
+}
 
 function updateInfraFile(
   workspace: InfraLabWorkspace,
@@ -241,6 +698,15 @@ export default function InfraLabModal() {
 
   const fileOrder = getInfraLabFileOrder(workspace);
   const currentFile = workspace.files[activeFile] ?? "";
+  const dockerFileWorkspace = isDockerFileWorkspace(workspace);
+  const terraformWorkspace = hasTerraformFiles(workspace.files);
+  const dockerComposeWorkspace = hasDockerComposeFile(workspace.files);
+  const labTitle = dockerFileWorkspace ? "Docker Lab" : "Infrastructure Lab";
+  const primaryEditorActionLabel = dockerFileWorkspace
+    ? dockerComposeWorkspace
+      ? "docker compose up -d --build"
+      : "docker build -t interview-cockpit/docker-deep-dive-api:local ."
+    : "terraform plan";
 
   const persistWorkspace = useCallback(
     async (forceNew: boolean) => {
@@ -396,6 +862,19 @@ export default function InfraLabModal() {
   const inspectorJson = selectedRun?.planJson ?? selectedRun?.validationJson;
   const logOutput =
     selectedRun?.logs || runError || "Run output will appear here.";
+  const hasRunOutput = Boolean(selectedRun || runError);
+  const profileLabel =
+    workspace.executionMode === "docker"
+      ? "Local Docker"
+      : workspace.executionMode === "localstack"
+        ? "AWS LocalStack"
+        : "Plan Only";
+  const modeDescription =
+    workspace.executionMode === "docker"
+      ? "Local Docker container target"
+      : workspace.executionMode === "localstack"
+        ? "Local emulator target"
+        : "Speculative plan target";
 
   // ── Practice console ──────────────────────────────────────────
   const [bottomTab, setBottomTab] = useState<"output" | "console" | "chat">(
@@ -404,6 +883,7 @@ export default function InfraLabModal() {
   const [consoleLines, setConsoleLines] = useState<ConsoleLine[]>([]);
   const [cmdInput, setCmdInput] = useState("");
   const [consoleRunning, setConsoleRunning] = useState(false);
+  const [lastConsoleCommand, setLastConsoleCommand] = useState("");
   const consoleOutputRef = useRef<HTMLDivElement>(null);
   const cmdAbortRef = useRef<{ aborted: boolean }>({ aborted: false });
 
@@ -421,53 +901,80 @@ export default function InfraLabModal() {
     }
   }, [consoleLines, bottomTab]);
 
+  const runConsoleCommand = useCallback(
+    async (rawCommand: string) => {
+      const cmd = rawCommand.trim();
+      if (!cmd || consoleRunning) return;
+      setLastConsoleCommand(cmd);
+      if (rawCommand === cmdInput) setCmdInput("");
+
+      if (cmd === "clear") {
+        setConsoleLines([]);
+        return;
+      }
+
+      if (cmd === "help" || cmd === "?") {
+        appendLine("info", `${INFRA_CONSOLE_HELP}\n`);
+        setBottomTab("console");
+        return;
+      }
+
+      setBottomTab("console");
+      setConsoleRunning(true);
+      const abort = { aborted: false };
+      cmdAbortRef.current = abort;
+      // Don't echo here — the server sends back an info line "$ <command>"
+      // 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") {
+              setSelectedRun(msg.run);
+              setSelectedRunId(msg.run.id);
+              if (activeInfraId) void refreshRunHistory(activeInfraId);
+              if (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);
+      }
+    },
+    [
+      consoleRunning,
+      currentQuestion,
+      activeInfraId,
+      labName,
+      workspace,
+      appendLine,
+      cmdInput,
+      refreshRunHistory,
+    ],
+  );
+
   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,
-  ]);
+    await runConsoleCommand(cmdInput);
+  }, [cmdInput, runConsoleCommand]);
 
   const handleStop = useCallback(() => {
     cmdAbortRef.current.aborted = true;
@@ -583,16 +1090,36 @@ export default function InfraLabModal() {
     }
   }, [chatInput, chatLoading, chatMessages, workspace.files, currentQuestion]);
 
+  const [runOutputCopied, setRunOutputCopied] = useState(false);
   const [consoleCopied, setConsoleCopied] = useState(false);
+  const [consoleCommandCopied, setConsoleCommandCopied] = useState(false);
+
+  const handleCopyRunOutput = useCallback(() => {
+    if (!hasRunOutput) return;
+    void navigator.clipboard.writeText(logOutput).then(() => {
+      setRunOutputCopied(true);
+      setTimeout(() => setRunOutputCopied(false), 1800);
+    });
+  }, [hasRunOutput, logOutput]);
 
   const handleCopyConsole = useCallback(() => {
-    const text = consoleLines.map((l) => l.text).join("\n");
+    if (consoleLines.length === 0) return;
+    const text = consoleLines.map((l) => l.text).join("");
     void navigator.clipboard.writeText(text).then(() => {
       setConsoleCopied(true);
       setTimeout(() => setConsoleCopied(false), 1800);
     });
   }, [consoleLines]);
 
+  const handleCopyConsoleCommand = useCallback(() => {
+    const command = cmdInput.trim() || lastConsoleCommand;
+    if (!command) return;
+    void navigator.clipboard.writeText(command).then(() => {
+      setConsoleCommandCopied(true);
+      setTimeout(() => setConsoleCommandCopied(false), 1800);
+    });
+  }, [cmdInput, lastConsoleCommand]);
+
   const [chatCopiedId, setChatCopiedId] = useState<string | null>(null);
 
   const handleCopyMessage = useCallback((id: string, content: string) => {
@@ -602,6 +1129,37 @@ export default function InfraLabModal() {
     });
   }, []);
 
+  // ── Docker demo panel ─────────────────────────────────────────
+  const [dockerDemoLoading, setDockerDemoLoading] = useState(false);
+  const [dockerDemoResponse, setDockerDemoResponse] = useState(
+    "Start the Compose stack, then hit the API from here.",
+  );
+
+  const hitDockerDemo = useCallback(
+    async (path: string, init?: RequestInit) => {
+      setDockerDemoLoading(true);
+      try {
+        const response = await fetch(`${DOCKER_DEMO_URL}${path}`, init);
+        const contentType = response.headers.get("content-type") ?? "";
+        const body = contentType.includes("application/json")
+          ? await response.json()
+          : await response.text();
+        setDockerDemoResponse(
+          typeof body === "string" ? body : JSON.stringify(body, null, 2),
+        );
+      } catch (error) {
+        setDockerDemoResponse(
+          `Could not reach ${DOCKER_DEMO_URL}. Run docker compose up -d --build first.\n\n${
+            (error as Error)?.message ?? String(error)
+          }`,
+        );
+      } finally {
+        setDockerDemoLoading(false);
+      }
+    },
+    [],
+  );
+
   // ── Panel collapse ─────────────────────────────────────────────
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
@@ -671,50 +1229,86 @@ export default function InfraLabModal() {
     [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 fileOrderKey = fileOrder.join("\0");
+  const fileTree = useMemo(() => buildInfraFileTree(fileOrder), [fileOrderKey]);
 
-  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 renderFileNode = (fileName: string, depth: number) => {
+    const isActive = fileName === activeFile;
+    const canDelete = Object.keys(workspace.files).length > 1;
+
+    return (
+      <div
+        key={`file:${fileName}`}
+        style={{ paddingLeft: `${depth * 12}px` }}
+        className="group relative"
+      >
+        <button
+          onClick={() => {
+            setActiveFile(fileName);
+            setWorkspace((current) => ({
+              ...current,
+              activeFile: fileName,
+            }));
+          }}
+          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 shadow-[0_0_0_1px_rgba(34,211,238,0.08)]"
+              : "border-slate-800 bg-slate-900 text-slate-400 hover:border-slate-700 hover:text-slate-200"
+          }`}
+          title={fileName}
+        >
+          {baseName(fileName)}
+        </button>
+        {canDelete && (
+          <button
+            onClick={() => handleDeleteFile(fileName)}
+            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 ${fileName}`}
+          >
+            <Trash2 className="w-3 h-3" />
+          </button>
+        )}
+      </div>
+    );
+  };
+
+  const renderFolderNode = (folder: InfraFileTreeNode, depth: number) => {
+    const isCollapsed = collapsedFolders.has(folder.path);
+
+    return (
+      <div key={`folder:${folder.path}`} className="space-y-0.5">
+        <button
+          onClick={() =>
+            setCollapsedFolders((prev) => {
+              const next = new Set(prev);
+              if (next.has(folder.path)) next.delete(folder.path);
+              else next.add(folder.path);
+              return next;
+            })
+          }
+          style={{ paddingLeft: `${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"
+          title={folder.path}
+        >
+          {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">{folder.name}/</span>
+        </button>
+        {!isCollapsed && (
+          <div className="space-y-0.5">
+            {folder.files.map((fileName) =>
+              renderFileNode(fileName, depth + 1),
+            )}
+            {folder.folders.map((child) => renderFolderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
 
   const windowStyle: React.CSSProperties = maximized
     ? {
@@ -785,7 +1379,7 @@ export default function InfraLabModal() {
       >
         <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
+          {labTitle}
         </span>
         {/* Lab name */}
         <input
@@ -800,15 +1394,24 @@ export default function InfraLabModal() {
           onMouseDown={(e) => e.stopPropagation()}
           value={workspace.executionMode}
           onChange={(event) =>
-            setWorkspace((current) => ({
-              ...current,
-              executionMode:
-                event.target.value === "plan-only" ? "plan-only" : "localstack",
-            }))
+            setWorkspace((current) => {
+              const executionMode =
+                event.target.value === "docker"
+                  ? "docker"
+                  : event.target.value === "plan-only"
+                    ? "plan-only"
+                    : "localstack";
+              return {
+                ...current,
+                provider: executionMode === "docker" ? "docker" : "aws",
+                executionMode,
+              };
+            })
           }
           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="docker">Local Docker Profile</option>
           <option value="plan-only">Plan-Only Profile</option>
         </select>
         {/* Actions */}
@@ -822,30 +1425,81 @@ export default function InfraLabModal() {
               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>
+          {terraformWorkspace && (
+            <>
+              <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>
+            </>
+          )}
+          {dockerFileWorkspace && (
+            <>
+              {hasDockerfile(workspace.files) && (
+                <button
+                  onClick={() =>
+                    void runConsoleCommand(
+                      "docker build -t interview-cockpit/docker-deep-dive-api:local .",
+                    )
+                  }
+                  disabled={consoleRunning || !currentQuestion}
+                  className="inline-flex items-center gap-1.5 rounded border border-sky-500/30 bg-sky-500/10 px-2.5 py-1 text-xs font-medium text-sky-100 hover:bg-sky-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                >
+                  {consoleRunning ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : (
+                    <Play className="w-3 h-3" />
+                  )}
+                  Build
+                </button>
+              )}
+              {dockerComposeWorkspace && (
+                <button
+                  onClick={() =>
+                    void runConsoleCommand("docker compose up -d --build")
+                  }
+                  disabled={consoleRunning || !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"
+                >
+                  {consoleRunning ? (
+                    <Loader2 className="w-3 h-3 animate-spin" />
+                  ) : (
+                    <Play className="w-3 h-3" />
+                  )}
+                  Compose Up
+                </button>
+              )}
+              {dockerComposeWorkspace && (
+                <button
+                  onClick={() => void runConsoleCommand("docker compose down")}
+                  disabled={consoleRunning || !currentQuestion}
+                  className="inline-flex items-center gap-1.5 rounded border border-slate-700 bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-200 hover:border-slate-600 hover:bg-slate-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                >
+                  Down
+                </button>
+              )}
+            </>
+          )}
           <button
             onClick={() => void persistWorkspace(false)}
             disabled={saving || !currentQuestion}
@@ -973,69 +1627,8 @@ export default function InfraLabModal() {
 
             {/* 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>
-                );
-              })}
+              {fileTree.files.map((fileName) => renderFileNode(fileName, 0))}
+              {fileTree.folders.map((folder) => renderFolderNode(folder, 0))}
             </div>
           </div>
         </aside>
@@ -1059,16 +1652,15 @@ export default function InfraLabModal() {
                   {activeFile}
                 </p>
                 <p className="text-xs text-slate-500">
-                  Edit the Terraform workspace and run validate or plan against
-                  the saved artifact.
+                  {dockerFileWorkspace
+                    ? `Edit Dockerfile, Compose, and app files, then press Cmd/Ctrl+Enter to run ${primaryEditorActionLabel}.`
+                    : "Edit Terraform and app files, then run Terraform, Docker, or workspace commands through the console."}
                 </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"}
+                {profileLabel}
               </span>
               <button
                 onClick={() => setRightCollapsed((v) => !v)}
@@ -1087,35 +1679,23 @@ export default function InfraLabModal() {
               </button>
             </div>
           </div>
-          <div className="flex-1 min-h-0 p-4 bg-slate-950">
-            <textarea
+          <div className="flex-1 min-h-0 bg-slate-950 p-3 select-text">
+            <InfraMonacoEditor
               value={currentFile}
-              onChange={(event) =>
+              fileName={activeFile}
+              onChange={(value) =>
                 setWorkspace((current) =>
-                  updateInfraFile(current, activeFile, event.target.value),
+                  updateInfraFile(current, activeFile, 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;
-                  });
+              onSave={() => void persistWorkspace(false)}
+              onPlan={() => {
+                if (dockerFileWorkspace) {
+                  void runConsoleCommand(primaryEditorActionLabel);
+                } else {
+                  void runInfra("plan");
                 }
               }}
-              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">
@@ -1157,38 +1737,74 @@ export default function InfraLabModal() {
                 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">
+              {bottomTab === "output" && (
+                <div className="mr-2 flex items-center gap-1.5">
                   <button
-                    onClick={handleCopyConsole}
-                    className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors flex items-center gap-1"
-                    title="Copy output"
+                    onClick={handleCopyRunOutput}
+                    disabled={!hasRunOutput}
+                    className="inline-flex items-center gap-1 rounded border border-slate-700 px-2 py-1 text-[10px] font-medium text-slate-400 hover:border-cyan-500/40 hover:bg-cyan-500/10 hover:text-cyan-200 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                    title="Copy run output"
                   >
-                    {consoleCopied ? (
+                    {runOutputCopied ? (
                       <ClipboardCheck className="w-3 h-3 text-emerald-400" />
                     ) : (
                       <Clipboard className="w-3 h-3" />
                     )}
+                    {runOutputCopied ? "Copied" : "Copy log"}
                   </button>
-                  <button
-                    onClick={() => setConsoleLines([])}
-                    className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
-                  >
-                    clear
-                  </button>
+                  {selectedRun && (
+                    <span
+                      className={`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>
+                  )}
                 </div>
               )}
+              {bottomTab === "console" &&
+                (consoleLines.length > 0 ||
+                  !!cmdInput.trim() ||
+                  !!lastConsoleCommand) && (
+                  <div className="flex items-center gap-1.5 mr-2">
+                    <button
+                      onClick={handleCopyConsole}
+                      disabled={consoleLines.length === 0}
+                      className="inline-flex items-center gap-1 rounded border border-slate-700 px-2 py-1 text-[10px] font-medium text-slate-400 hover:border-emerald-500/40 hover:bg-emerald-500/10 hover:text-emerald-200 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      title="Copy output"
+                    >
+                      {consoleCopied ? (
+                        <ClipboardCheck className="w-3 h-3 text-emerald-400" />
+                      ) : (
+                        <Clipboard className="w-3 h-3" />
+                      )}
+                      {consoleCopied ? "Copied" : "Copy output"}
+                    </button>
+                    <button
+                      onClick={handleCopyConsoleCommand}
+                      disabled={!cmdInput.trim() && !lastConsoleCommand}
+                      className="inline-flex items-center gap-1 rounded border border-slate-700 px-2 py-1 text-[10px] font-medium text-slate-400 hover:border-cyan-500/40 hover:bg-cyan-500/10 hover:text-cyan-200 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      title="Copy current command, or the last command if the prompt is empty"
+                    >
+                      {consoleCommandCopied ? (
+                        <ClipboardCheck className="w-3 h-3 text-emerald-400" />
+                      ) : (
+                        <Clipboard className="w-3 h-3" />
+                      )}
+                      {consoleCommandCopied ? "Copied cmd" : "Copy cmd"}
+                    </button>
+                    <button
+                      onClick={() => setConsoleLines([])}
+                      disabled={consoleLines.length === 0}
+                      className="text-[10px] text-slate-600 hover:text-slate-400 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                    >
+                      clear
+                    </button>
+                  </div>
+                )}
               {bottomTab === "chat" && chatMessages.length > 0 && (
                 <button
                   onClick={() => setChatMessages([])}
@@ -1215,8 +1831,14 @@ export default function InfraLabModal() {
                 >
                   {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>
+                      Type a Terraform, Docker, or local workspace command and
+                      press Enter. Try{" "}
+                      <span className="text-slate-500">help</span>,{" "}
+                      <span className="text-slate-500">
+                        docker context show
+                      </span>
+                      , or{" "}
+                      <span className="text-slate-500">docker network ls</span>.
                     </p>
                   )}
                   {consoleLines.map((line) => (
@@ -1259,7 +1881,7 @@ export default function InfraLabModal() {
                         void handleRunCommand();
                       }
                     }}
-                    placeholder="terraform version"
+                    placeholder="terraform version, docker network ls, or help"
                     disabled={consoleRunning}
                     className="flex-1 bg-transparent font-mono text-xs text-slate-200 placeholder-slate-600 outline-none disabled:opacity-50"
                     autoComplete="off"
@@ -1300,7 +1922,9 @@ export default function InfraLabModal() {
                     <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?"
+                        {dockerFileWorkspace
+                          ? '"Why can the api reach Redis at redis:6379?"'
+                          : '"What does this provider block do?"'}
                       </span>
                     </p>
                   )}
@@ -1447,7 +2071,11 @@ export default function InfraLabModal() {
                         void handleChatSend();
                       }
                     }}
-                    placeholder="Ask about your Terraform code…"
+                    placeholder={
+                      dockerFileWorkspace
+                        ? "Ask about Docker images, containers, Compose, ports, networks, or volumes…"
+                        : "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"
                   />
@@ -1478,6 +2106,110 @@ export default function InfraLabModal() {
             className="p-4 overflow-y-auto h-full"
             style={{ display: rightCollapsed ? "none" : undefined }}
           >
+            {dockerFileWorkspace && (
+              <div className="mb-4 rounded-xl border border-cyan-500/20 bg-cyan-500/10 p-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <p className="text-sm font-semibold text-cyan-100">
+                      Docker Deep Dive
+                    </p>
+                    <p className="mt-1 text-xs leading-5 text-cyan-100/70">
+                      Build an image, run multiple containers, hit the exposed
+                      API, inspect logs, compare env vars, and reset volumes.
+                    </p>
+                  </div>
+                  <span className="rounded-full border border-cyan-400/30 px-2 py-1 text-[10px] uppercase tracking-wide text-cyan-200">
+                    port 4288
+                  </span>
+                </div>
+
+                <div className="mt-3 grid grid-cols-2 gap-2">
+                  {[
+                    ["Up", "docker compose up -d --build"],
+                    ["PS", "docker compose ps"],
+                    ["Logs", "docker logs docker-deep-dive-api"],
+                    [
+                      "Exec",
+                      'docker compose exec -T api node -e "console.log(process.env.REDIS_URL)"',
+                    ],
+                    ["Images", "docker images"],
+                    ["Down", "docker compose down"],
+                  ].map(([label, command]) => (
+                    <button
+                      key={command}
+                      onClick={() => void runConsoleCommand(command)}
+                      disabled={consoleRunning}
+                      className="rounded-lg border border-cyan-500/20 bg-slate-950/70 px-2 py-1.5 text-left text-[11px] font-medium text-cyan-100 hover:border-cyan-400/40 hover:bg-cyan-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      title={command}
+                    >
+                      {label}
+                    </button>
+                  ))}
+                </div>
+
+                <div className="mt-4 rounded-xl border border-slate-800 bg-slate-950/80 p-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <p className="text-xs font-semibold text-slate-200">
+                      Demo API
+                    </p>
+                    <button
+                      onClick={() =>
+                        window.open(DOCKER_DEMO_URL, "_blank", "noopener")
+                      }
+                      className="text-[10px] text-cyan-300 hover:text-cyan-200 transition-colors"
+                    >
+                      open page
+                    </button>
+                  </div>
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    <button
+                      onClick={() => void hitDockerDemo("/api/ping")}
+                      disabled={dockerDemoLoading}
+                      className="rounded-full border border-slate-700 px-2 py-1 text-[10px] text-slate-300 hover:border-cyan-500/40 hover:text-cyan-200 disabled:opacity-40"
+                    >
+                      Ping
+                    </button>
+                    <button
+                      onClick={() =>
+                        void hitDockerDemo("/api/redis/increment/panel")
+                      }
+                      disabled={dockerDemoLoading}
+                      className="rounded-full border border-slate-700 px-2 py-1 text-[10px] text-slate-300 hover:border-cyan-500/40 hover:text-cyan-200 disabled:opacity-40"
+                    >
+                      Redis ++
+                    </button>
+                    <button
+                      onClick={() =>
+                        void hitDockerDemo("/api/cache/panel", {
+                          method: "POST",
+                          headers: { "content-type": "application/json" },
+                          body: JSON.stringify({
+                            value: `panel saved ${new Date().toISOString()}`,
+                          }),
+                        })
+                      }
+                      disabled={dockerDemoLoading}
+                      className="rounded-full border border-slate-700 px-2 py-1 text-[10px] text-slate-300 hover:border-cyan-500/40 hover:text-cyan-200 disabled:opacity-40"
+                    >
+                      Set cache
+                    </button>
+                    <button
+                      onClick={() => void hitDockerDemo("/api/cache/panel")}
+                      disabled={dockerDemoLoading}
+                      className="rounded-full border border-slate-700 px-2 py-1 text-[10px] text-slate-300 hover:border-cyan-500/40 hover:text-cyan-200 disabled:opacity-40"
+                    >
+                      Read cache
+                    </button>
+                  </div>
+                  <pre className="mt-3 max-h-52 overflow-auto whitespace-pre-wrap rounded-lg bg-slate-900 px-3 py-2 font-mono text-[11px] leading-5 text-slate-300">
+                    {dockerDemoLoading
+                      ? "Calling demo API…"
+                      : dockerDemoResponse}
+                  </pre>
+                </div>
+              </div>
+            )}
+
             <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
@@ -1485,15 +2217,15 @@ export default function InfraLabModal() {
               <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>
+                  <dd className="mt-1 text-slate-200">
+                    {workspace.provider === "docker"
+                      ? "Docker + local containers"
+                      : "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>
+                  <dd className="mt-1 text-slate-200">{modeDescription}</dd>
                 </div>
                 <div>
                   <dt className="text-slate-500">Files</dt>
@@ -1525,7 +2257,7 @@ export default function InfraLabModal() {
               </div>
               {!selectedRun && (
                 <p className="mt-3 text-sm text-slate-500">
-                  Run validate or plan to inspect persisted artifacts here.
+                  Run a command to inspect persisted artifacts here.
                 </p>
               )}
               {selectedRun && (
@@ -1663,8 +2395,7 @@ export default function InfraLabModal() {
               <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.
+                    Saved runs will appear here after the first lab command.
                   </p>
                 )}
                 {runHistory.map((run) => (