@visulima/vis 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/packem_chunks/handler45.js

@@ -0,0 +1,2574 @@
+import { createRequire as __cjs_createRequire } from "node:module";
+
+const __cjs_require = __cjs_createRequire(import.meta.url);
+
+const __cjs_getProcess = typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" ? globalThis.process : process;
+
+const __cjs_getBuiltinModule = (module) => {
+    // Check if we're in Node.js and version supports getBuiltinModule
+    if (typeof __cjs_getProcess !== "undefined" && __cjs_getProcess.versions && __cjs_getProcess.versions.node) {
+        const [major, minor] = __cjs_getProcess.versions.node.split(".").map(Number);
+        // Node.js 20.16.0+ and 22.3.0+
+        if (major > 22 || (major === 22 && minor >= 3) || (major === 20 && minor >= 16)) {
+            return __cjs_getProcess.getBuiltinModule(module);
+        }
+    }
+    // Fallback to createRequire
+    return __cjs_require(module);
+};
+
+import { Box, Text, TextInput, ScrollBar, ScrollView, useApp, useWindowSize, useInput, Dialog, Tabs, Tab, render } from '@visulima/tui';
+import { _ as QuitDialog, c as detectPm, i as isInCi } from './bin.js';
+import React, { useMemo, useSyncExternalStore, useState, useRef, useEffect, useCallback } from 'react';
+const {
+  writeFileSync
+} = __cjs_getBuiltinModule("node:fs");
+import { isAccessibleSync, readFileSync, ensureDirSync } from '@visulima/fs';
+import { stripJsonComments } from '@visulima/fs/utils';
+import { join, dirname } from '@visulima/path';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const TEMPLATES = [
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/github-cli:1": {}
+      },
+      forwardPorts: [3e3],
+      image: "mcr.microsoft.com/devcontainers/javascript-node:22",
+      name: "Node.js",
+      postCreateCommand: "npm install"
+    },
+    description: "Node.js 22 with Git and GitHub CLI",
+    id: "node",
+    name: "Node.js"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/github-cli:1": {}
+      },
+      forwardPorts: [3e3],
+      image: "mcr.microsoft.com/devcontainers/javascript-node:22",
+      mounts: [
+        {
+          source: "${localWorkspaceFolderBasename}-node_modules",
+          target: "${containerWorkspaceFolder}/node_modules",
+          type: "volume"
+        },
+        {
+          source: "${localWorkspaceFolderBasename}-pnpm-store",
+          target: "/home/node/.local/share/pnpm/store",
+          type: "volume"
+        }
+      ],
+      name: "Node.js + pnpm Monorepo",
+      postCreateCommand: "corepack enable && pnpm install",
+      remoteUser: "node",
+      workspaceFolder: "/workspaces/${localWorkspaceFolderBasename}"
+    },
+    description: "Node.js 22 with pnpm, corepack, and optimized volume mounts",
+    id: "node-pnpm",
+    name: "Node.js + pnpm"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "ms-azuretools.vscode-docker"]
+        }
+      },
+      dockerComposeFile: "docker-compose.yml",
+      forwardPorts: [3e3, 5432],
+      name: "Node.js + PostgreSQL",
+      postCreateCommand: "npm install",
+      service: "app",
+      workspaceFolder: "/workspaces/${localWorkspaceFolderBasename}"
+    },
+    description: "Node.js with PostgreSQL via Docker Compose",
+    id: "node-postgres",
+    name: "Node.js + PostgreSQL"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "ms-azuretools.vscode-docker"]
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/docker-in-docker:2": {},
+        "ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/github-cli:1": {}
+      },
+      forwardPorts: [3e3],
+      image: "mcr.microsoft.com/devcontainers/javascript-node:22",
+      name: "Node.js + Docker",
+      postCreateCommand: "npm install"
+    },
+    description: "Node.js 22 with Docker-in-Docker for container workflows",
+    id: "node-dind",
+    name: "Node.js + Docker-in-Docker"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "ms-azuretools.vscode-docker"]
+        }
+      },
+      dockerComposeFile: "docker-compose.yml",
+      features: {
+        "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+      },
+      forwardPorts: [3e3, 5432, 6379],
+      name: "Full Stack",
+      postCreateCommand: "npm install",
+      service: "app",
+      workspaceFolder: "/workspaces/${localWorkspaceFolderBasename}"
+    },
+    description: "Node.js + PostgreSQL + Redis + Docker via Compose",
+    id: "fullstack",
+    name: "Full Stack"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["ms-python.python", "ms-python.vscode-pylance"],
+          settings: {
+            "editor.formatOnSave": true,
+            "python.defaultInterpreterPath": "/usr/local/bin/python"
+          }
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/github-cli:1": {},
+        "ghcr.io/devcontainers/features/python:1": { version: "3.12" }
+      },
+      forwardPorts: [8e3],
+      image: "mcr.microsoft.com/devcontainers/python:3.12",
+      name: "Python",
+      postCreateCommand: "pip install -r requirements.txt || true"
+    },
+    description: "Python 3.12 with pip and venv",
+    id: "python",
+    name: "Python"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["golang.go"],
+          settings: {
+            "editor.formatOnSave": true,
+            "go.toolsManagement.autoUpdate": true
+          }
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/go:1": { version: "1.22" }
+      },
+      forwardPorts: [8080],
+      image: "mcr.microsoft.com/devcontainers/go:1.22",
+      name: "Go",
+      postCreateCommand: "go mod download || true"
+    },
+    description: "Go 1.22 development environment",
+    id: "go",
+    name: "Go"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["rust-lang.rust-analyzer", "tamasfe.even-better-toml"],
+          settings: {
+            "editor.formatOnSave": true
+          }
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/rust:1": {}
+      },
+      image: "mcr.microsoft.com/devcontainers/rust:latest",
+      name: "Rust",
+      postCreateCommand: "cargo build || true"
+    },
+    description: "Rust development with cargo and rust-analyzer",
+    id: "rust",
+    name: "Rust"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["vscjava.vscode-java-pack", "vscjava.vscode-maven"]
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/java:1": { version: "17" }
+      },
+      forwardPorts: [8080],
+      image: "mcr.microsoft.com/devcontainers/java:17",
+      name: "Java",
+      postCreateCommand: "./mvnw install || ./gradlew build || true"
+    },
+    description: "Java 17 with Maven/Gradle support",
+    id: "java",
+    name: "Java"
+  },
+  {
+    config: {
+      customizations: {
+        vscode: {
+          extensions: ["ms-azuretools.vscode-docker", "ms-kubernetes-tools.vscode-kubernetes-tools", "hashicorp.terraform"]
+        }
+      },
+      features: {
+        "ghcr.io/devcontainers/features/aws-cli:1": {},
+        "ghcr.io/devcontainers/features/azure-cli:1": {},
+        "ghcr.io/devcontainers/features/docker-in-docker:2": {},
+        "ghcr.io/devcontainers/features/kubectl-helm-minikube:1": {},
+        "ghcr.io/devcontainers/features/terraform:1": {}
+      },
+      image: "mcr.microsoft.com/devcontainers/base:ubuntu",
+      name: "DevOps"
+    },
+    description: "Docker, Kubernetes, Terraform, AWS & Azure CLIs",
+    id: "devops",
+    name: "DevOps"
+  },
+  {
+    config: {
+      features: {
+        "ghcr.io/devcontainers/features/common-utils:2": {}
+      },
+      image: "mcr.microsoft.com/devcontainers/base:ubuntu",
+      name: "Minimal",
+      remoteUser: "vscode"
+    },
+    description: "Bare Ubuntu with common utilities",
+    id: "minimal",
+    name: "Minimal"
+  },
+  {
+    config: {
+      image: "mcr.microsoft.com/devcontainers/base:ubuntu",
+      name: "Custom"
+    },
+    description: "Minimal Ubuntu base - configure from scratch",
+    id: "custom",
+    name: "Custom (Blank)"
+  }
+];
+
+const readDevcontainerJson = (workspaceRoot) => {
+  const filePath = join(workspaceRoot, ".devcontainer", "devcontainer.json");
+  if (!isAccessibleSync(filePath)) {
+    return null;
+  }
+  const raw = readFileSync(filePath);
+  const stripped = stripJsonComments(raw);
+  const hadComments = stripped !== raw;
+  let config;
+  try {
+    config = JSON.parse(stripped);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new Error(`Failed to parse ${filePath}: ${message}`);
+  }
+  return { config, hadComments };
+};
+const writeDevcontainerJson = (workspaceRoot, config, outputPath) => {
+  const dir = outputPath ? dirname(outputPath) : join(workspaceRoot, ".devcontainer");
+  const filePath = outputPath ?? join(dir, "devcontainer.json");
+  ensureDirSync(dir);
+  writeFileSync(filePath, `${JSON.stringify(config, null, 2)}
+`, "utf8");
+};
+
+const PM_MOUNTS = {
+  bun: [
+    {
+      source: "${localWorkspaceFolderBasename}-node_modules",
+      target: "${containerWorkspaceFolder}/node_modules",
+      type: "volume"
+    },
+    {
+      source: "${localWorkspaceFolderBasename}-bun-cache",
+      target: "/home/node/.bun/install/cache",
+      type: "volume"
+    }
+  ],
+  npm: [
+    {
+      source: "${localWorkspaceFolderBasename}-node_modules",
+      target: "${containerWorkspaceFolder}/node_modules",
+      type: "volume"
+    },
+    {
+      source: "${localWorkspaceFolderBasename}-npm-cache",
+      target: "/home/node/.npm",
+      type: "volume"
+    }
+  ],
+  pnpm: [
+    {
+      source: "${localWorkspaceFolderBasename}-node_modules",
+      target: "${containerWorkspaceFolder}/node_modules",
+      type: "volume"
+    },
+    {
+      source: "${localWorkspaceFolderBasename}-pnpm-store",
+      target: "/home/node/.local/share/pnpm/store",
+      type: "volume"
+    }
+  ],
+  yarn: [
+    {
+      source: "${localWorkspaceFolderBasename}-node_modules",
+      target: "${containerWorkspaceFolder}/node_modules",
+      type: "volume"
+    },
+    {
+      source: "${localWorkspaceFolderBasename}-yarn-cache",
+      target: "/home/node/.yarn/cache",
+      type: "volume"
+    }
+  ]
+};
+const FEATURE_MOUNTS = [
+  {
+    featureMatch: "docker-in-docker",
+    mounts: []
+    // Docker-in-Docker manages its own storage
+  },
+  {
+    featureMatch: "docker-outside-of-docker",
+    mounts: [
+      {
+        source: "/var/run/docker.sock",
+        target: "/var/run/docker.sock",
+        type: "bind"
+      }
+    ]
+  },
+  {
+    featureMatch: "/features/git:",
+    mounts: [
+      {
+        source: "${localWorkspaceFolderBasename}-git-config",
+        target: "/home/node/.gitconfig",
+        type: "volume"
+      }
+    ]
+  }
+];
+const getSuggestedMounts = (pm, enabledFeatures, currentMounts) => {
+  const suggestions = [];
+  const existingTargets = new Set(currentMounts.map((m) => typeof m === "string" ? m : m.target));
+  if (pm) {
+    for (const mount of PM_MOUNTS[pm]) {
+      if (!existingTargets.has(mount.target)) {
+        suggestions.push(mount);
+      }
+    }
+  }
+  const featureIds = Object.keys(enabledFeatures);
+  for (const { featureMatch, mounts } of FEATURE_MOUNTS) {
+    const hasFeature = featureIds.some((id) => id.includes(featureMatch));
+    if (hasFeature) {
+      for (const mount of mounts) {
+        if (!existingTargets.has(mount.target)) {
+          suggestions.push(mount);
+        }
+      }
+    }
+  }
+  return suggestions;
+};
+
+const SECTION_ORDER = ["general", "features", "ports", "lifecycle", "extensions", "environment", "mounts", "compose"];
+
+const deepClone = (value) => structuredClone(value);
+class DevcontainerStore {
+  #listeners = /* @__PURE__ */ new Set();
+  #state;
+  constructor(config, hadComments, detectedPm = null) {
+    const isCreate = config === null;
+    const initial = config ?? { name: "" };
+    const cloned = deepClone(initial);
+    this.#state = {
+      config: cloned,
+      detectedPm,
+      extensionSearch: "",
+      featureSearch: "",
+      fieldEditing: false,
+      fieldIndex: 0,
+      hadComments,
+      isDirty: false,
+      mode: isCreate ? "create" : "edit",
+      originalConfig: isCreate ? null : deepClone(initial),
+      section: "general",
+      showTemplateSelector: isCreate,
+      suggestedMounts: getSuggestedMounts(detectedPm, cloned.features ?? {}, cloned.mounts ?? []),
+      templateIndex: 0
+    };
+  }
+  // ── React integration ───────────────────────────────────────────
+  getSnapshot = () => this.#state;
+  subscribe = (listener) => {
+    this.#listeners.add(listener);
+    return () => {
+      this.#listeners.delete(listener);
+    };
+  };
+  // ── Tab navigation ──────────────────────────────────────────────
+  setSection(section) {
+    if (section !== this.#state.section) {
+      this.#emit({
+        ...this.#state,
+        fieldEditing: false,
+        fieldIndex: 0,
+        section
+      });
+    }
+  }
+  nextSection() {
+    const current = SECTION_ORDER.indexOf(this.#state.section);
+    const next = (current + 1) % SECTION_ORDER.length;
+    this.setSection(SECTION_ORDER[next]);
+  }
+  previousSection() {
+    const current = SECTION_ORDER.indexOf(this.#state.section);
+    const previous = (current - 1 + SECTION_ORDER.length) % SECTION_ORDER.length;
+    this.setSection(SECTION_ORDER[previous]);
+  }
+  // ── Field navigation ────────────────────────────────────────────
+  setFieldIndex(index) {
+    if (index !== this.#state.fieldIndex) {
+      this.#emit({ ...this.#state, fieldIndex: Math.max(0, index) });
+    }
+  }
+  setFieldEditing(editing) {
+    if (editing !== this.#state.fieldEditing) {
+      this.#emit({ ...this.#state, fieldEditing: editing });
+    }
+  }
+  // ── Template selector ───────────────────────────────────────────
+  setTemplateIndex(index) {
+    const clamped = Math.max(0, Math.min(index, TEMPLATES.length - 1));
+    if (clamped !== this.#state.templateIndex) {
+      this.#emit({ ...this.#state, templateIndex: clamped });
+    }
+  }
+  applyTemplate(templateId) {
+    const template = TEMPLATES.find((t) => t.id === templateId);
+    if (template) {
+      this.#emit(
+        this.#withSuggestions({
+          ...this.#state,
+          config: deepClone(template.config),
+          isDirty: true,
+          showTemplateSelector: false
+        })
+      );
+    }
+  }
+  dismissTemplateSelector() {
+    this.#emit({ ...this.#state, showTemplateSelector: false });
+  }
+  // ── General config updates ──────────────────────────────────────
+  updateConfig(partial) {
+    this.#emit({
+      ...this.#state,
+      config: { ...this.#state.config, ...partial },
+      isDirty: true
+    });
+  }
+  // ── Features ────────────────────────────────────────────────────
+  toggleFeature(featureId) {
+    const features = { ...this.#state.config.features };
+    if (features[featureId] === void 0) {
+      features[featureId] = {};
+    } else {
+      delete features[featureId];
+    }
+    this.#emit(
+      this.#withSuggestions({
+        ...this.#state,
+        config: { ...this.#state.config, features },
+        isDirty: true
+      })
+    );
+  }
+  setFeatureSearch(search) {
+    this.#emit({ ...this.#state, featureSearch: search, fieldIndex: 0 });
+  }
+  // ── Ports ───────────────────────────────────────────────────────
+  addPort(port) {
+    const existing = this.#state.config.forwardPorts ?? [];
+    if (existing.includes(port)) {
+      return;
+    }
+    const ports = [...existing, port];
+    this.#emit({
+      ...this.#state,
+      config: { ...this.#state.config, forwardPorts: ports },
+      isDirty: true
+    });
+  }
+  removePort(index) {
+    const ports = [...this.#state.config.forwardPorts ?? []];
+    ports.splice(index, 1);
+    this.#emit({
+      ...this.#state,
+      config: { ...this.#state.config, forwardPorts: ports.length > 0 ? ports : void 0 },
+      isDirty: true
+    });
+  }
+  // ── Extensions ──────────────────────────────────────────────────
+  toggleExtension(extensionId) {
+    const customizations = { ...this.#state.config.customizations };
+    const vscode = { ...customizations.vscode };
+    const extensions = [...vscode.extensions ?? []];
+    const index = extensions.indexOf(extensionId);
+    if (index === -1) {
+      extensions.push(extensionId);
+    } else {
+      extensions.splice(index, 1);
+    }
+    vscode.extensions = extensions.length > 0 ? extensions : void 0;
+    customizations.vscode = vscode.extensions || vscode.settings ? vscode : void 0;
+    this.#emit({
+      ...this.#state,
+      config: {
+        ...this.#state.config,
+        customizations: customizations.vscode || customizations.jetbrains ? customizations : void 0
+      },
+      isDirty: true
+    });
+  }
+  setExtensionSearch(search) {
+    this.#emit({ ...this.#state, extensionSearch: search, fieldIndex: 0 });
+  }
+  // ── Environment variables ───────────────────────────────────────
+  addEnvVar(target, key, value) {
+    const field = target === "container" ? "containerEnv" : "remoteEnv";
+    const env = { ...this.#state.config[field], [key]: value };
+    this.#emit({
+      ...this.#state,
+      config: { ...this.#state.config, [field]: env },
+      isDirty: true
+    });
+  }
+  removeEnvVar(target, key) {
+    const field = target === "container" ? "containerEnv" : "remoteEnv";
+    const env = { ...this.#state.config[field] };
+    delete env[key];
+    this.#emit({
+      ...this.#state,
+      config: { ...this.#state.config, [field]: Object.keys(env).length > 0 ? env : void 0 },
+      isDirty: true
+    });
+  }
+  // ── Mounts ──────────────────────────────────────────────────────
+  addMount(mount) {
+    const mounts = [...this.#state.config.mounts ?? [], mount];
+    this.#emit(
+      this.#withSuggestions({
+        ...this.#state,
+        config: { ...this.#state.config, mounts },
+        isDirty: true
+      })
+    );
+  }
+  removeMount(index) {
+    const mounts = [...this.#state.config.mounts ?? []];
+    mounts.splice(index, 1);
+    this.#emit(
+      this.#withSuggestions({
+        ...this.#state,
+        config: { ...this.#state.config, mounts: mounts.length > 0 ? mounts : void 0 },
+        isDirty: true
+      })
+    );
+  }
+  /** Add all currently suggested mounts to the config. */
+  applySuggestedMounts() {
+    if (this.#state.suggestedMounts.length === 0) {
+      return;
+    }
+    const mounts = [...this.#state.config.mounts ?? [], ...this.#state.suggestedMounts];
+    this.#emit(
+      this.#withSuggestions({
+        ...this.#state,
+        config: { ...this.#state.config, mounts },
+        isDirty: true
+      })
+    );
+  }
+  // ── Lifecycle commands ───────────────────────────────────────────
+  setLifecycleCommand(hook, command) {
+    this.#emit({
+      ...this.#state,
+      config: { ...this.#state.config, [hook]: command || void 0 },
+      isDirty: true
+    });
+  }
+  // ── Save lifecycle ────────────────────────────────────────────────
+  markClean() {
+    this.#emit({
+      ...this.#state,
+      isDirty: false,
+      originalConfig: deepClone(this.#state.config)
+    });
+  }
+  // ── Preview / Serialization ─────────────────────────────────────
+  getJsonPreview() {
+    return JSON.stringify(this.#cleanConfig(), null, 2);
+  }
+  /** Return a cleaned config with empty/undefined fields stripped. */
+  cleanConfig() {
+    return this.#cleanConfig();
+  }
+  // ── Internal ────────────────────────────────────────────────────
+  #cleanConfig() {
+    const config = deepClone(this.#state.config);
+    for (const [key, value] of Object.entries(config)) {
+      if (value === "" || value === void 0) {
+        delete config[key];
+      }
+    }
+    if (config.build) {
+      if (config.build.dockerfile === "") {
+        delete config.build.dockerfile;
+      }
+      if (config.build.context === "") {
+        delete config.build.context;
+      }
+      if (config.build.args && Object.keys(config.build.args).length === 0) {
+        delete config.build.args;
+      }
+      if (Object.keys(config.build).length === 0) {
+        delete config.build;
+      }
+    }
+    if (config.forwardPorts?.length === 0) {
+      delete config.forwardPorts;
+    }
+    if (config.mounts?.length === 0) {
+      delete config.mounts;
+    }
+    if (config.runServices?.length === 0) {
+      delete config.runServices;
+    }
+    if (config.capAdd?.length === 0) {
+      delete config.capAdd;
+    }
+    if (config.securityOpt?.length === 0) {
+      delete config.securityOpt;
+    }
+    if (config.features && Object.keys(config.features).length === 0) {
+      delete config.features;
+    }
+    if (config.customizations?.vscode?.extensions?.length === 0) {
+      delete config.customizations.vscode.extensions;
+    }
+    if (config.customizations?.vscode && Object.keys(config.customizations.vscode).length === 0) {
+      delete config.customizations.vscode;
+    }
+    if (config.customizations && Object.keys(config.customizations).length === 0) {
+      delete config.customizations;
+    }
+    if (config.containerEnv && Object.keys(config.containerEnv).length === 0) {
+      delete config.containerEnv;
+    }
+    if (config.remoteEnv && Object.keys(config.remoteEnv).length === 0) {
+      delete config.remoteEnv;
+    }
+    return config;
+  }
+  /** Recalculate suggested mounts for the given state. */
+  #withSuggestions(state) {
+    return {
+      ...state,
+      suggestedMounts: getSuggestedMounts(state.detectedPm, state.config.features ?? {}, state.config.mounts ?? [])
+    };
+  }
+  #emit(newState) {
+    this.#state = newState;
+    for (const listener of this.#listeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+}
+
+const EXTENSION_CATALOG = [
+  // Linting
+  {
+    category: "linting",
+    description: "Integrates ESLint into the editor",
+    id: "dbaeumer.vscode-eslint",
+    name: "ESLint"
+  },
+  {
+    category: "linting",
+    description: "Stylelint CSS/SCSS linting",
+    id: "stylelint.vscode-stylelint",
+    name: "Stylelint"
+  },
+  // Formatting
+  {
+    category: "formatting",
+    description: "Opinionated code formatter",
+    id: "esbenp.prettier-vscode",
+    name: "Prettier"
+  },
+  {
+    category: "formatting",
+    description: "EditorConfig file support",
+    id: "editorconfig.editorconfig",
+    name: "EditorConfig"
+  },
+  {
+    category: "formatting",
+    description: "Fast Rust-based formatter and linter",
+    id: "biomejs.biome",
+    name: "Biome"
+  },
+  // Language
+  {
+    category: "language",
+    description: "Rich TypeScript and JavaScript support",
+    id: "ms-vscode.vscode-typescript-next",
+    name: "TypeScript Nightly"
+  },
+  {
+    category: "language",
+    description: "Tailwind CSS IntelliSense",
+    id: "bradlc.vscode-tailwindcss",
+    name: "Tailwind CSS"
+  },
+  {
+    category: "language",
+    description: "YAML language support with schemas",
+    id: "redhat.vscode-yaml",
+    name: "YAML"
+  },
+  {
+    category: "language",
+    description: "TOML language support",
+    id: "tamasfe.even-better-toml",
+    name: "TOML"
+  },
+  {
+    category: "language",
+    description: "Dockerfile and Docker Compose support",
+    id: "ms-azuretools.vscode-docker",
+    name: "Docker"
+  },
+  {
+    category: "language",
+    description: "Python language support with Pylance",
+    id: "ms-python.python",
+    name: "Python"
+  },
+  {
+    category: "language",
+    description: "Go language support",
+    id: "golang.go",
+    name: "Go"
+  },
+  {
+    category: "language",
+    description: "Rust language support via rust-analyzer",
+    id: "rust-lang.rust-analyzer",
+    name: "rust-analyzer"
+  },
+  // Git
+  {
+    category: "git",
+    description: "Git supercharged: blame, history, stash, etc.",
+    id: "eamodio.gitlens",
+    name: "GitLens"
+  },
+  {
+    category: "git",
+    description: "GitHub Pull Requests and Issues",
+    id: "github.vscode-pull-request-github",
+    name: "GitHub PR"
+  },
+  // Testing
+  {
+    category: "testing",
+    description: "Vitest test explorer integration",
+    id: "vitest.explorer",
+    name: "Vitest Explorer"
+  },
+  {
+    category: "testing",
+    description: "Jest test runner and assertions",
+    id: "orta.vscode-jest",
+    name: "Jest"
+  },
+  // Debugging
+  {
+    category: "debugging",
+    description: "REST client for testing APIs",
+    id: "humao.rest-client",
+    name: "REST Client"
+  },
+  {
+    category: "debugging",
+    description: "Error Lens: inline error highlighting",
+    id: "usernamehw.errorlens",
+    name: "Error Lens"
+  },
+  // Other
+  {
+    category: "other",
+    description: "Intelligent code completion with AI",
+    id: "github.copilot",
+    name: "GitHub Copilot"
+  },
+  {
+    category: "other",
+    description: "Path autocompletion for imports",
+    id: "christian-kohler.path-intellisense",
+    name: "Path Intellisense"
+  },
+  {
+    category: "other",
+    description: "Import cost display in editor",
+    id: "wix.vscode-import-cost",
+    name: "Import Cost"
+  },
+  {
+    category: "other",
+    description: "Todo Tree: highlight and list TODOs",
+    id: "gruntfuggly.todo-tree",
+    name: "Todo Tree"
+  }
+];
+
+const FEATURE_CATALOG = [
+  // Languages
+  {
+    category: "language",
+    description: "Node.js runtime via nvm with optional pnpm/yarn",
+    id: "ghcr.io/devcontainers/features/node:1",
+    name: "Node.js"
+  },
+  {
+    category: "language",
+    description: "Python runtime with pip and optional tools",
+    id: "ghcr.io/devcontainers/features/python:1",
+    name: "Python"
+  },
+  {
+    category: "language",
+    description: "Go compiler and tools",
+    id: "ghcr.io/devcontainers/features/go:1",
+    name: "Go"
+  },
+  {
+    category: "language",
+    description: "Rust toolchain via rustup",
+    id: "ghcr.io/devcontainers/features/rust:1",
+    name: "Rust"
+  },
+  {
+    category: "language",
+    description: "Java runtime and JDK via SDKMAN",
+    id: "ghcr.io/devcontainers/features/java:1",
+    name: "Java"
+  },
+  {
+    category: "language",
+    description: ".NET SDK and runtime",
+    id: "ghcr.io/devcontainers/features/dotnet:2",
+    name: ".NET"
+  },
+  // Tools
+  {
+    category: "tool",
+    description: "Common utilities: zsh, Oh My Zsh, git, curl, etc.",
+    id: "ghcr.io/devcontainers/features/common-utils:2",
+    name: "Common Utilities"
+  },
+  {
+    category: "tool",
+    description: "Git version control",
+    id: "ghcr.io/devcontainers/features/git:1",
+    name: "Git"
+  },
+  {
+    category: "tool",
+    description: "Git Large File Storage support",
+    id: "ghcr.io/devcontainers/features/git-lfs:1",
+    name: "Git LFS"
+  },
+  {
+    category: "tool",
+    description: "GitHub CLI for repository management",
+    id: "ghcr.io/devcontainers/features/github-cli:1",
+    name: "GitHub CLI"
+  },
+  {
+    category: "tool",
+    description: "Run Docker containers inside the dev container",
+    id: "ghcr.io/devcontainers/features/docker-in-docker:2",
+    name: "Docker-in-Docker"
+  },
+  {
+    category: "tool",
+    description: "Access host Docker daemon from inside the container",
+    id: "ghcr.io/devcontainers/features/docker-outside-of-docker:1",
+    name: "Docker-from-Docker"
+  },
+  {
+    category: "tool",
+    description: "kubectl, Helm, and Minikube for Kubernetes",
+    id: "ghcr.io/devcontainers/features/kubectl-helm-minikube:1",
+    name: "Kubernetes Tools"
+  },
+  {
+    category: "tool",
+    description: "Infrastructure as code with Terraform",
+    id: "ghcr.io/devcontainers/features/terraform:1",
+    name: "Terraform"
+  },
+  {
+    category: "tool",
+    description: "Nix package manager",
+    id: "ghcr.io/devcontainers/features/nix:1",
+    name: "Nix"
+  },
+  {
+    category: "tool",
+    description: "SSH server for remote connections to the container",
+    id: "ghcr.io/devcontainers/features/sshd:1",
+    name: "SSH Server"
+  },
+  // Cloud
+  {
+    category: "cloud",
+    description: "Amazon Web Services CLI v2",
+    id: "ghcr.io/devcontainers/features/aws-cli:1",
+    name: "AWS CLI"
+  },
+  {
+    category: "cloud",
+    description: "Microsoft Azure CLI",
+    id: "ghcr.io/devcontainers/features/azure-cli:1",
+    name: "Azure CLI"
+  },
+  {
+    category: "cloud",
+    description: "Google Cloud Platform CLI",
+    id: "ghcr.io/devcontainers/features/gcloud:1",
+    name: "Google Cloud CLI"
+  },
+  // Databases
+  {
+    category: "database",
+    description: "PostgreSQL client tools",
+    id: "ghcr.io/devcontainers-extra/features/postgres-client:1",
+    name: "PostgreSQL Client"
+  },
+  {
+    category: "database",
+    description: "Redis client tools",
+    id: "ghcr.io/devcontainers-extra/features/redis-client:1",
+    name: "Redis Client"
+  }
+];
+
+const filterFeatures = (searchText) => {
+  if (!searchText) {
+    return FEATURE_CATALOG;
+  }
+  const lower = searchText.toLowerCase();
+  return FEATURE_CATALOG.filter(
+    (f) => f.name.toLowerCase().includes(lower) || f.id.toLowerCase().includes(lower) || f.description.toLowerCase().includes(lower)
+  );
+};
+const filterExtensions = (searchText) => {
+  if (!searchText) {
+    return EXTENSION_CATALOG;
+  }
+  const lower = searchText.toLowerCase();
+  return EXTENSION_CATALOG.filter(
+    (e) => e.name.toLowerCase().includes(lower) || e.id.toLowerCase().includes(lower) || e.description.toLowerCase().includes(lower)
+  );
+};
+
+const FIELDS$1 = ["dockerComposeFile", "service"];
+const FIELD_LABELS$1 = {
+  dockerComposeFile: "Compose File",
+  service: "Service"
+};
+const FIELD_PLACEHOLDERS$1 = {
+  dockerComposeFile: "docker-compose.yml",
+  service: "app"
+};
+const FIELD_DESCRIPTIONS = {
+  dockerComposeFile: "Path to Docker Compose file (relative to .devcontainer/)",
+  service: "Which service in the compose file to connect the IDE to"
+};
+const DockerComposeSection = ({ config, fieldEditing, fieldIndex, onUpdate }) => {
+  const hasCompose = Boolean(config.dockerComposeFile);
+  const hasImage = Boolean(config.image || config.build);
+  return jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+    jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, color: "cyan", children: "Docker Compose Integration" }) }),
+    hasImage && hasCompose && jsx(Box, { marginBottom: 1, children: jsx(Text, { color: "yellow", children: "Note: When using Docker Compose, the image/build settings in General are ignored." }) }),
+    FIELDS$1.map((field, index) => {
+      const isSelected = index === fieldIndex;
+      const value = config[field] ?? "";
+      const displayValue = Array.isArray(config[field]) ? config[field].join(", ") : value;
+      return jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+        jsxs(Box, { children: [
+          jsx(Box, { width: 20, children: jsxs(Text, { bold: isSelected, color: isSelected ? "cyan" : "white", children: [
+            isSelected ? "❯ " : "  ",
+            FIELD_LABELS$1[field],
+            ":"
+          ] }) }),
+          jsx(Box, { flexGrow: 1, children: isSelected && fieldEditing ? jsx(
+            TextInput,
+            {
+              defaultValue: displayValue,
+              onChange: (newValue) => {
+                onUpdate({ [field]: newValue || void 0 });
+              },
+              placeholder: FIELD_PLACEHOLDERS$1[field]
+            }
+          ) : jsx(Text, { color: displayValue ? "white" : "gray", children: displayValue || FIELD_PLACEHOLDERS$1[field] }) })
+        ] }),
+        jsx(Box, { paddingLeft: 4, children: jsx(Text, { dimColor: true, children: FIELD_DESCRIPTIONS[field] }) })
+      ] }, field);
+    }),
+    jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: [
+      jsx(Text, { bold: true, color: "white", children: "Enter" }),
+      " ",
+      "edit field",
+      "  ",
+      jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+      " ",
+      "navigate",
+      "  ",
+      jsx(Text, { bold: true, color: "white", children: "Esc" }),
+      " ",
+      "stop editing"
+    ] }) })
+  ] });
+};
+const COMPOSE_FIELD_COUNT = FIELDS$1.length;
+
+const EnvironmentSection = ({ config, fieldIndex }) => {
+  const containerEnv = config.containerEnv ?? {};
+  const remoteEnv = config.remoteEnv ?? {};
+  const containerKeys = Object.keys(containerEnv);
+  const remoteKeys = Object.keys(remoteEnv);
+  const containerAddIndex = containerKeys.length;
+  const remoteStart = containerKeys.length + 1;
+  const remoteAddIndex = remoteStart + remoteKeys.length;
+  const isInContainerSection = fieldIndex <= containerAddIndex;
+  const isInRemoteSection = fieldIndex > containerAddIndex;
+  return jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+    jsxs(Box, { borderColor: isInContainerSection ? "cyan" : "gray", borderStyle: "single", flexDirection: "column", paddingX: 1, paddingY: 0, children: [
+      jsxs(Box, { flexShrink: 0, marginBottom: containerKeys.length > 0 ? 1 : 0, children: [
+        jsx(Text, { bold: true, color: isInContainerSection ? "cyan" : "white", children: "containerEnv" }),
+        jsx(Text, { dimColor: true, children: " — baked into the container image" })
+      ] }),
+      containerKeys.map((key, index) => {
+        const isSelected = index === fieldIndex;
+        return jsx(Box, { flexShrink: 0, children: jsxs(Text, { color: isSelected ? "cyan" : void 0, inverse: isSelected, wrap: "truncate", children: [
+          isSelected ? " ❯ " : "   ",
+          jsx(Text, { bold: true, children: key }),
+          jsx(Text, { dimColor: true, children: " = " }),
+          jsx(Text, { children: containerEnv[key] })
+        ] }) }, key);
+      }),
+      jsx(Box, { flexShrink: 0, marginTop: containerKeys.length > 0 ? 1 : 0, children: jsxs(Text, { color: fieldIndex === containerAddIndex ? "cyan" : "gray", inverse: fieldIndex === containerAddIndex, children: [
+        "   ",
+        "+ Add variable..."
+      ] }) })
+    ] }),
+    jsxs(Box, { borderColor: isInRemoteSection ? "cyan" : "gray", borderStyle: "single", flexDirection: "column", marginTop: 1, paddingX: 1, paddingY: 0, children: [
+      jsxs(Box, { flexShrink: 0, marginBottom: remoteKeys.length > 0 ? 1 : 0, children: [
+        jsx(Text, { bold: true, color: isInRemoteSection ? "cyan" : "white", children: "remoteEnv" }),
+        jsx(Text, { dimColor: true, children: " — set at runtime by the IDE" })
+      ] }),
+      remoteKeys.map((key, remoteIdx) => {
+        const actualIndex = remoteStart + remoteIdx;
+        const isSelected = actualIndex === fieldIndex;
+        return jsx(Box, { flexShrink: 0, children: jsxs(Text, { color: isSelected ? "cyan" : void 0, inverse: isSelected, wrap: "truncate", children: [
+          isSelected ? " ❯ " : "   ",
+          jsx(Text, { bold: true, children: key }),
+          jsx(Text, { dimColor: true, children: " = " }),
+          jsx(Text, { children: remoteEnv[key] })
+        ] }) }, key);
+      }),
+      jsx(Box, { flexShrink: 0, marginTop: remoteKeys.length > 0 ? 1 : 0, children: jsxs(Text, { color: fieldIndex === remoteAddIndex ? "cyan" : "gray", inverse: fieldIndex === remoteAddIndex, children: [
+        "   ",
+        "+ Add variable..."
+      ] }) })
+    ] }),
+    jsx(Box, { flexShrink: 0, marginTop: 1, children: jsxs(Text, { dimColor: true, wrap: "truncate", children: [
+      jsx(Text, { bold: true, color: "white", children: "a" }),
+      "/",
+      jsx(Text, { bold: true, color: "white", children: "Enter" }),
+      " ",
+      "add on + row",
+      " ",
+      jsx(Text, { bold: true, color: "white", children: "d" }),
+      " ",
+      "remove",
+      " ",
+      jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+      " ",
+      "navigate"
+    ] }) })
+  ] });
+};
+const getEnvFieldCount = (config) => {
+  const containerCount = Object.keys(config.containerEnv ?? {}).length;
+  const remoteCount = Object.keys(config.remoteEnv ?? {}).length;
+  return containerCount + 1 + remoteCount + 1;
+};
+
+const ExtensionsSection = ({ config, fieldIndex, scrollOffset, searchText, viewportHeight }) => {
+  const enabledExtensions = useMemo(() => new Set(config.customizations?.vscode?.extensions), [config.customizations?.vscode?.extensions]);
+  const filtered = useMemo(() => filterExtensions(searchText), [searchText]);
+  const contentHeight = filtered.length;
+  const showScrollbar = contentHeight > viewportHeight && viewportHeight > 0;
+  return jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [
+    jsxs(Box, { flexShrink: 0, gap: 1, paddingX: 1, children: [
+      jsxs(Text, { bold: true, color: "cyan", children: [
+        enabledExtensions.size,
+        " selected"
+      ] }),
+      searchText && jsxs(Text, { dimColor: true, children: [
+        "— filter: ",
+        jsx(Text, { color: "yellow", children: searchText }),
+        " (",
+        filtered.length,
+        " results)"
+      ] })
+    ] }),
+    jsxs(Box, { flexDirection: "row", flexGrow: 1, overflow: "hidden", children: [
+      jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", paddingLeft: 1, children: jsx(Box, { flexDirection: "column", marginTop: -scrollOffset, children: filtered.map((ext, index) => {
+        const isSelected = index === fieldIndex;
+        const isEnabled = enabledExtensions.has(ext.id);
+        return jsxs(Box, { flexShrink: 0, height: 1, children: [
+          jsx(Text, { children: isSelected ? ">" : " " }),
+          jsxs(Text, { color: isEnabled ? "white" : "gray", children: [
+            " ",
+            isEnabled ? "☑" : "☐",
+            " "
+          ] }),
+          jsx(Box, { flexGrow: 1, children: jsxs(Text, { bold: isSelected, inverse: isSelected, wrap: "truncate", children: [
+            ext.name,
+            jsxs(Text, { dimColor: true, children: [
+              " -",
+              ext.id
+            ] })
+          ] }) })
+        ] }, ext.id);
+      }) }) }),
+      showScrollbar && jsx(Box, { flexShrink: 0, marginLeft: 1, marginRight: 1, children: jsx(ScrollBar, { contentHeight, placement: "inset", scrollOffset, style: "block", viewportHeight }) })
+    ] }),
+    filtered.length === 0 && jsx(Box, { paddingX: 1, children: jsx(Text, { dimColor: true, children: "No extensions match the search." }) })
+  ] });
+};
+
+const FeaturesSection = ({ config, fieldIndex, scrollOffset, searchText, viewportHeight }) => {
+  const enabledFeatures = useMemo(() => new Set(Object.keys(config.features ?? {})), [config.features]);
+  const filtered = useMemo(() => filterFeatures(searchText), [searchText]);
+  const contentHeight = filtered.length;
+  const showScrollbar = contentHeight > viewportHeight && viewportHeight > 0;
+  return jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [
+    jsxs(Box, { flexShrink: 0, gap: 1, paddingX: 1, children: [
+      jsxs(Text, { bold: true, color: "cyan", children: [
+        enabledFeatures.size,
+        " selected"
+      ] }),
+      searchText && jsxs(Text, { dimColor: true, children: [
+        "— filter: ",
+        jsx(Text, { color: "yellow", children: searchText }),
+        " (",
+        filtered.length,
+        " results)"
+      ] })
+    ] }),
+    jsxs(Box, { flexDirection: "row", flexGrow: 1, overflow: "hidden", children: [
+      jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", paddingLeft: 1, children: jsx(Box, { flexDirection: "column", marginTop: -scrollOffset, children: filtered.map((feature, index) => {
+        const isSelected = index === fieldIndex;
+        const isEnabled = enabledFeatures.has(feature.id);
+        return jsxs(Box, { flexShrink: 0, height: 1, children: [
+          jsx(Text, { children: isSelected ? ">" : " " }),
+          jsxs(Text, { color: isEnabled ? "white" : "gray", children: [
+            " ",
+            isEnabled ? "☑" : "☐",
+            " "
+          ] }),
+          jsx(Box, { flexGrow: 1, children: jsxs(Text, { bold: isSelected, inverse: isSelected, wrap: "truncate", children: [
+            feature.name,
+            jsxs(Text, { dimColor: true, children: [
+              " -",
+              feature.description
+            ] })
+          ] }) })
+        ] }, feature.id);
+      }) }) }),
+      showScrollbar && jsx(Box, { flexShrink: 0, marginLeft: 1, marginRight: 1, children: jsx(ScrollBar, { contentHeight, placement: "inset", scrollOffset, style: "block", viewportHeight }) })
+    ] }),
+    filtered.length === 0 && jsx(Box, { paddingX: 1, children: jsx(Text, { dimColor: true, children: "No features match the search." }) })
+  ] });
+};
+
+const FIELDS = ["name", "image", "workspaceFolder", "workspaceMount", "remoteUser", "containerUser", "shutdownAction"];
+const FIELD_LABELS = {
+  containerUser: "Container User",
+  image: "Image",
+  name: "Name",
+  remoteUser: "Remote User",
+  shutdownAction: "Shutdown Action",
+  workspaceFolder: "Workspace Folder",
+  workspaceMount: "Workspace Mount"
+};
+const FIELD_PLACEHOLDERS = {
+  containerUser: "root",
+  image: "mcr.microsoft.com/devcontainers/javascript-node:22",
+  name: "My Dev Container",
+  remoteUser: "node",
+  shutdownAction: "none | stopContainer",
+  workspaceFolder: "/workspaces/${localWorkspaceFolderBasename}",
+  workspaceMount: "source=${localWorkspaceFolder},target=...,type=bind"
+};
+const BOOLEAN_FIELDS = ["privileged", "overrideCommand"];
+const BOOLEAN_LABELS = {
+  overrideCommand: "Override Command",
+  privileged: "Privileged"
+};
+const ALL_FIELD_COUNT = FIELDS.length + BOOLEAN_FIELDS.length;
+const GeneralSection = ({ config, fieldEditing, fieldIndex, onUpdate }) => jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+  jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, color: "cyan", children: "General Configuration" }) }),
+  FIELDS.map((field, index) => {
+    const isSelected = index === fieldIndex;
+    const value = config[field] ?? "";
+    return jsxs(Box, { marginBottom: 1, children: [
+      jsx(Box, { width: 20, children: jsxs(Text, { bold: isSelected, color: isSelected ? "cyan" : "white", children: [
+        isSelected ? "❯ " : "  ",
+        FIELD_LABELS[field],
+        ":"
+      ] }) }),
+      jsx(Box, { flexGrow: 1, children: isSelected && fieldEditing ? jsx(
+        TextInput,
+        {
+          defaultValue: value,
+          onChange: (newValue) => {
+            onUpdate({ [field]: newValue });
+          },
+          placeholder: FIELD_PLACEHOLDERS[field]
+        }
+      ) : jsx(Text, { color: value ? "white" : "gray", children: value || FIELD_PLACEHOLDERS[field] }) })
+    ] }, field);
+  }),
+  BOOLEAN_FIELDS.map((field, boolIndex) => {
+    const absoluteIndex = FIELDS.length + boolIndex;
+    const isSelected = absoluteIndex === fieldIndex;
+    const value = config[field] ?? false;
+    return jsxs(Box, { marginBottom: boolIndex < BOOLEAN_FIELDS.length - 1 ? 1 : 0, children: [
+      jsx(Box, { width: 20, children: jsxs(Text, { bold: isSelected, color: isSelected ? "cyan" : "white", children: [
+        isSelected ? "❯ " : "  ",
+        BOOLEAN_LABELS[field],
+        ":"
+      ] }) }),
+      jsx(Box, { flexGrow: 1, children: jsxs(Text, { color: value ? "green" : "gray", children: [
+        value ? "yes" : "no",
+        isSelected && jsx(Text, { dimColor: true, children: " (Space to toggle)" })
+      ] }) })
+    ] }, field);
+  }),
+  jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: [
+    jsx(Text, { bold: true, color: "white", children: "Enter" }),
+    " ",
+    "edit field",
+    "  ",
+    jsx(Text, { bold: true, color: "white", children: "Space" }),
+    " ",
+    "toggle",
+    "  ",
+    jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+    " ",
+    "navigate",
+    "  ",
+    jsx(Text, { bold: true, color: "white", children: "Esc" }),
+    " ",
+    "stop editing"
+  ] }) })
+] });
+const GENERAL_FIELD_COUNT = ALL_FIELD_COUNT;
+const GENERAL_BOOLEAN_FIELDS = BOOLEAN_FIELDS;
+
+const HOOKS = ["postCreateCommand", "postStartCommand", "postAttachCommand", "onCreateCommand"];
+const HOOK_LABELS = {
+  onCreateCommand: "On Create",
+  postAttachCommand: "Post Attach",
+  postCreateCommand: "Post Create",
+  postStartCommand: "Post Start"
+};
+const HOOK_DESCRIPTIONS = {
+  onCreateCommand: "Runs once when the container is first created",
+  postAttachCommand: "Runs each time the IDE attaches",
+  postCreateCommand: "Runs after the container is created and workspace mounted",
+  postStartCommand: "Runs each time the container starts"
+};
+const LifecycleSection = ({ config, fieldEditing, fieldIndex, onSetCommand }) => jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+  jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, color: "cyan", children: "Lifecycle Commands" }) }),
+  HOOKS.map((hook, index) => {
+    const isSelected = index === fieldIndex;
+    const value = config[hook];
+    const displayValue = Array.isArray(value) ? value.join(" && ") : value ?? "";
+    return jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+      jsx(Box, { children: jsxs(Text, { bold: isSelected, color: isSelected ? "cyan" : "white", children: [
+        isSelected ? "❯ " : "  ",
+        HOOK_LABELS[hook]
+      ] }) }),
+      jsx(Box, { paddingLeft: 4, children: jsx(Text, { dimColor: true, children: HOOK_DESCRIPTIONS[hook] }) }),
+      jsx(Box, { paddingLeft: 4, children: isSelected && fieldEditing ? jsx(
+        TextInput,
+        {
+          defaultValue: displayValue,
+          onChange: (newValue) => {
+            onSetCommand(hook, newValue);
+          },
+          placeholder: "e.g. npm install"
+        }
+      ) : jsx(Text, { color: displayValue ? "green" : "gray", children: displayValue || "(not set)" }) })
+    ] }, hook);
+  }),
+  jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: [
+    jsx(Text, { bold: true, color: "white", children: "Enter" }),
+    " ",
+    "edit command",
+    "  ",
+    jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+    " ",
+    "navigate",
+    "  ",
+    jsx(Text, { bold: true, color: "white", children: "Esc" }),
+    " ",
+    "stop editing"
+  ] }) })
+] });
+const LIFECYCLE_FIELD_COUNT = HOOKS.length;
+
+const formatMount = (mount) => {
+  if (typeof mount === "string") {
+    return mount;
+  }
+  return `[${mount.type}] ${mount.source} → ${mount.target}`;
+};
+const MountsSection = ({
+  addingMount,
+  config,
+  detectedPm,
+  fieldIndex,
+  mountPhase,
+  mountSource,
+  mountTarget,
+  mountType,
+  suggestedMounts
+}) => {
+  const mounts = config.mounts ?? [];
+  return jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+    jsxs(Box, { flexShrink: 0, gap: 1, paddingX: 1, children: [
+      jsxs(Text, { bold: true, color: "cyan", children: [
+        mounts.length,
+        " mounts"
+      ] }),
+      detectedPm && jsxs(Text, { dimColor: true, children: [
+        "— detected: ",
+        jsx(Text, { color: "white", children: detectedPm })
+      ] })
+    ] }),
+    suggestedMounts.length > 0 && !addingMount && jsxs(Box, { borderColor: "yellow", borderStyle: "single", flexDirection: "column", marginBottom: 1, marginTop: 1, paddingX: 1, children: [
+      jsxs(Box, { flexShrink: 0, children: [
+        jsx(Text, { bold: true, color: "yellow", children: "Suggested mounts" }),
+        jsxs(Text, { dimColor: true, children: [
+          " ",
+          "— press",
+          " ",
+          jsx(Text, { bold: true, color: "white", children: "A" }),
+          " ",
+          "to add all"
+        ] })
+      ] }),
+      suggestedMounts.map((mount, index) => jsx(Box, { flexShrink: 0, children: jsxs(Text, { dimColor: true, wrap: "truncate", children: [
+        "  + ",
+        formatMount(mount)
+      ] }) }, `suggestion-${String(index)}`))
+    ] }),
+    mounts.length > 0 && jsx(Box, { flexDirection: "column", marginBottom: 1, children: mounts.map((mount, index) => {
+      const isSelected = index === fieldIndex;
+      return jsxs(Box, { flexShrink: 0, height: 1, children: [
+        jsx(Text, { children: isSelected ? ">" : " " }),
+        jsx(Box, { flexGrow: 1, children: jsxs(Text, { bold: isSelected, inverse: isSelected, wrap: "truncate", children: [
+          " ",
+          formatMount(mount)
+        ] }) })
+      ] }, `mount-${String(index)}`);
+    }) }),
+    !addingMount && jsx(Box, { flexShrink: 0, children: jsxs(Text, { color: fieldIndex === mounts.length ? "cyan" : "gray", inverse: fieldIndex === mounts.length, children: [
+      "   ",
+      "+ Add mount..."
+    ] }) }),
+    addingMount && jsxs(Box, { borderColor: "cyan", borderStyle: "single", flexDirection: "column", marginTop: 1, paddingX: 1, children: [
+      jsx(Box, { flexShrink: 0, marginBottom: 1, children: jsx(Text, { bold: true, color: "cyan", children: "New Mount" }) }),
+      jsxs(Box, { flexShrink: 0, children: [
+        jsx(Box, { width: 12, children: jsxs(Text, { bold: mountPhase === "source", color: mountPhase === "source" ? "cyan" : "white", children: [
+          mountPhase === "source" ? "❯ " : "  ",
+          "Source:"
+        ] }) }),
+        jsx(Text, { color: mountSource ? "yellow" : "gray", children: mountSource || (mountPhase === "source" ? "_" : "(type source, Enter to continue)") })
+      ] }),
+      jsxs(Box, { flexShrink: 0, children: [
+        jsx(Box, { width: 12, children: jsxs(Text, { bold: mountPhase === "target", color: mountPhase === "target" ? "cyan" : "white", children: [
+          mountPhase === "target" ? "❯ " : "  ",
+          "Target:"
+        ] }) }),
+        jsx(Text, { color: mountTarget ? "yellow" : "gray", children: mountTarget || (mountPhase === "target" ? "_" : "/container/path") })
+      ] }),
+      jsxs(Box, { flexShrink: 0, children: [
+        jsx(Box, { width: 12, children: jsxs(Text, { bold: mountPhase === "type", color: mountPhase === "type" ? "cyan" : "white", children: [
+          mountPhase === "type" ? "❯ " : "  ",
+          "Type:"
+        ] }) }),
+        mountPhase === "type" ? jsxs(Text, { children: [
+          jsx(Text, { bold: mountType === "volume", color: mountType === "volume" ? "cyan" : "gray", children: "[1] volume" }),
+          "  ",
+          jsx(Text, { bold: mountType === "bind", color: mountType === "bind" ? "cyan" : "gray", children: "[2] bind" }),
+          "  ",
+          jsx(Text, { bold: mountType === "tmpfs", color: mountType === "tmpfs" ? "cyan" : "gray", children: "[3] tmpfs" })
+        ] }) : jsx(Text, { color: "gray", children: mountType })
+      ] }),
+      jsx(Box, { flexShrink: 0, marginTop: 1, children: jsx(Text, { dimColor: true, wrap: "truncate", children: mountPhase === "type" ? "1/2/3 select type, Enter confirm, Esc cancel" : "Type text, Enter next step, Esc cancel" }) })
+    ] }),
+    mounts.length === 0 && !addingMount && suggestedMounts.length === 0 && jsx(Box, { marginTop: 1, children: jsx(Text, { dimColor: true, children: "Tip: Use volume mounts for node_modules and caches to improve performance." }) })
+  ] });
+};
+
+const PortsSection = ({ addingPort, addPortValue, config, fieldIndex }) => {
+  const ports = config.forwardPorts ?? [];
+  const isAddRowSelected = fieldIndex === ports.length;
+  return jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+    jsxs(Box, { marginBottom: 1, children: [
+      jsx(Text, { bold: true, color: "cyan", children: "Forwarded Ports" }),
+      jsxs(Text, { dimColor: true, children: [
+        " (",
+        ports.length,
+        " ports)"
+      ] })
+    ] }),
+    ports.map((port, index) => {
+      const isSelected = index === fieldIndex;
+      return jsx(Box, { children: jsxs(Text, { color: isSelected ? "cyan" : void 0, inverse: isSelected, children: [
+        "  ",
+        String(port)
+      ] }) }, `port-${String(port)}`);
+    }),
+    jsx(Box, { marginTop: ports.length > 0 ? 1 : 0, children: jsxs(Text, { color: isAddRowSelected ? "cyan" : "gray", inverse: isAddRowSelected, children: [
+      "  ",
+      isAddRowSelected && addingPort ? jsxs(Text, { children: [
+        "Enter port: ",
+        jsx(Text, { color: "yellow", children: addPortValue || "_" })
+      ] }) : "+ Add port..."
+    ] }) }),
+    jsx(Box, { marginTop: 1, children: jsxs(Text, { dimColor: true, children: [
+      jsx(Text, { bold: true, color: "white", children: "Enter" }),
+      " ",
+      isAddRowSelected ? "type port number, Enter to confirm" : "select",
+      "  ",
+      jsx(Text, { bold: true, color: "white", children: "d" }),
+      " ",
+      "remove selected",
+      "  ",
+      jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+      " ",
+      "navigate"
+    ] }) })
+  ] });
+};
+
+const PreviewPanel = ({ focused, hadComments, jsonPreview, mode, scrollRef }) => jsxs(Box, { borderColor: focused ? "cyan" : "gray", borderStyle: "single", flexDirection: "column", flexGrow: 1, children: [
+  jsxs(Box, { flexShrink: 0, paddingX: 1, children: [
+    jsx(Text, { bold: true, color: focused ? "cyan" : "white", children: "Preview" }),
+    jsxs(Text, { dimColor: true, children: [
+      " (",
+      mode === "create" ? "new" : "edit",
+      ")"
+    ] })
+  ] }),
+  hadComments && mode === "edit" && jsx(Box, { flexShrink: 0, paddingX: 1, children: jsx(Text, { color: "yellow", children: "Comments will not be preserved." }) }),
+  jsx(ScrollView, { flexGrow: 1, ref: scrollRef, scrollbar: true, scrollbarColor: "gray", children: jsonPreview.split("\n").map((line, index) => jsx(Text, { color: "green", children: line }, `line-${String(index)}`)) })
+] });
+
+const validateConfig = (config) => {
+  const errors = [];
+  const warnings = [];
+  const suggestions = [];
+  if (!config.image && !config.build && !config.dockerComposeFile) {
+    errors.push({ field: "image", message: 'One of "image", "build", or "dockerComposeFile" is required' });
+  }
+  if (config.build) {
+    if (config.image) {
+      warnings.push({ field: "image", message: 'Both "image" and "build" are set; "build" takes precedence' });
+    }
+    if (!config.build.dockerfile) {
+      errors.push({ field: "build.dockerfile", message: '"build" requires a "dockerfile" path' });
+    }
+  }
+  if (config.dockerComposeFile && !config.service) {
+    errors.push({ field: "service", message: '"service" is required when using "dockerComposeFile"' });
+  }
+  if (config.features !== void 0 && (typeof config.features !== "object" || Array.isArray(config.features))) {
+    errors.push({ field: "features", message: '"features" must be an object mapping feature IDs to options' });
+  }
+  if (config.forwardPorts) {
+    if (Array.isArray(config.forwardPorts)) {
+      for (const [index, port] of config.forwardPorts.entries()) {
+        if (typeof port === "number" && (port < 1 || port > 65535)) {
+          errors.push({ field: "forwardPorts", message: `Invalid port ${String(port)} at index ${String(index)}` });
+        }
+      }
+    } else {
+      errors.push({ field: "forwardPorts", message: '"forwardPorts" must be an array' });
+    }
+  }
+  if (config.customizations?.vscode?.extensions && !Array.isArray(config.customizations.vscode.extensions)) {
+    errors.push({ field: "customizations.vscode.extensions", message: "Extensions must be an array" });
+  }
+  if (config.customizations?.vscode?.settings && typeof config.customizations.vscode.settings !== "object") {
+    errors.push({ field: "customizations.vscode.settings", message: "Settings must be an object" });
+  }
+  if (!config.name) {
+    suggestions.push({ field: "name", message: "Consider adding a name for better identification" });
+  }
+  if (!config.features || Object.keys(config.features).length === 0) {
+    suggestions.push({ field: "features", message: "Consider adding features for common tools" });
+  }
+  if (!config.customizations?.vscode?.extensions || config.customizations.vscode.extensions.length === 0) {
+    suggestions.push({ field: "extensions", message: "Consider adding VS Code extensions for your stack" });
+  }
+  if (config.privileged) {
+    warnings.push({ field: "privileged", message: "Running in privileged mode is a security risk" });
+  }
+  return { errors, suggestions, valid: errors.length === 0, warnings };
+};
+
+const MIN_VIEWPORT_WIDTH = 80;
+const MIN_VIEWPORT_HEIGHT = 15;
+const MIN_SPLIT_WIDTH = 120;
+const EDITOR_SECTIONS = [
+  { description: "Container name, base image, workspace folder, and user", id: "general", label: "General" },
+  { description: "Installable tools and runtimes (Node, Python, Docker, etc.)", id: "features", label: "Features" },
+  { description: "Ports to forward from the container to your host", id: "ports", label: "Ports" },
+  { description: "Commands to run at different stages of the container lifecycle", id: "lifecycle", label: "Lifecycle" },
+  { description: "VS Code extensions to auto-install in the container", id: "extensions", label: "Extensions" },
+  { description: "Environment variables for the container and IDE", id: "environment", label: "Env" },
+  { description: "Volume and bind mounts for persistent data and caches", id: "mounts", label: "Mounts" },
+  { description: "Docker Compose integration for multi-container setups", id: "compose", label: "Compose" }
+];
+const getFieldCount = (section, config, featureSearch, extensionSearch) => {
+  switch (section) {
+    case "compose": {
+      return COMPOSE_FIELD_COUNT;
+    }
+    case "environment": {
+      return getEnvFieldCount(config);
+    }
+    case "extensions": {
+      return filterExtensions(extensionSearch).length;
+    }
+    case "features": {
+      return filterFeatures(featureSearch).length;
+    }
+    case "general": {
+      return GENERAL_FIELD_COUNT;
+    }
+    case "lifecycle": {
+      return LIFECYCLE_FIELD_COUNT;
+    }
+    case "mounts": {
+      return (config.mounts?.length ?? 0) + 1;
+    }
+    case "ports": {
+      return (config.forwardPorts?.length ?? 0) + 1;
+    }
+    default: {
+      return 0;
+    }
+  }
+};
+const VisDevcontainerApp = ({ onSave, store }) => {
+  const { exit } = useApp();
+  const { columns, rows } = useWindowSize();
+  const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const [helpVisible, setHelpVisible] = useState(false);
+  const [quitDialogVisible, setQuitDialogVisible] = useState(false);
+  const [searchActive, setSearchActive] = useState(false);
+  const [saveMessage, setSaveMessage] = useState(null);
+  const [focusedPanel, setFocusedPanel] = useState("editor");
+  const [listScrollOffset, setListScrollOffset] = useState(0);
+  const [addingPort, setAddingPort] = useState(false);
+  const [addPortValue, setAddPortValue] = useState("");
+  const [addingEnv, setAddingEnv] = useState(null);
+  const [addEnvKey, setAddEnvKey] = useState("");
+  const [addEnvValue, setAddEnvValue] = useState("");
+  const [addEnvPhase, setAddEnvPhase] = useState("key");
+  const [addingMount, setAddingMount] = useState(false);
+  const [mountSource, setMountSource] = useState("");
+  const [mountTarget, setMountTarget] = useState("");
+  const [mountType, setMountType] = useState("volume");
+  const [mountPhase, setMountPhase] = useState("source");
+  const helpScrollRef = useRef(null);
+  const previewScrollRef = useRef(null);
+  const saveTimerRef = useRef(null);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+      }
+    };
+  }, []);
+  const fieldCount = getFieldCount(state.section, state.config, state.featureSearch, state.extensionSearch);
+  const listViewportHeight = Math.max(1, rows - 9);
+  useEffect(() => {
+    if (state.section !== "features" && state.section !== "extensions") {
+      return;
+    }
+    setListScrollOffset((current) => {
+      if (state.fieldIndex >= current + listViewportHeight) {
+        return state.fieldIndex - listViewportHeight + 1;
+      }
+      if (state.fieldIndex < current) {
+        return state.fieldIndex;
+      }
+      return current;
+    });
+  }, [state.fieldIndex, state.section, listViewportHeight]);
+  useEffect(() => {
+    setListScrollOffset(0);
+  }, [state.section, state.featureSearch, state.extensionSearch]);
+  const handleSave = useCallback(() => {
+    const cleanConfig = store.cleanConfig();
+    const validation = validateConfig(cleanConfig);
+    if (!validation.valid) {
+      const firstError = validation.errors[0];
+      setSaveMessage(firstError ? `Error: ${firstError.message}` : "Validation failed");
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+      }
+      saveTimerRef.current = setTimeout(() => {
+        if (mountedRef.current) {
+          setSaveMessage(null);
+        }
+      }, 3e3);
+      return;
+    }
+    onSave(cleanConfig);
+    store.markClean();
+    const warningCount = validation.warnings.length;
+    setSaveMessage(warningCount > 0 ? `Saved! (${String(warningCount)} warning${warningCount > 1 ? "s" : ""})` : "Saved!");
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+    }
+    saveTimerRef.current = setTimeout(() => {
+      if (mountedRef.current) {
+        setSaveMessage(null);
+      }
+    }, 2e3);
+  }, [onSave, store]);
+  useInput(
+    (input, key) => {
+      if (key.downArrow || input === "j") {
+        store.setTemplateIndex(state.templateIndex + 1);
+      } else if (key.upArrow || input === "k") {
+        store.setTemplateIndex(state.templateIndex - 1);
+      } else if (key.return) {
+        const template = TEMPLATES[state.templateIndex];
+        if (template) {
+          store.applyTemplate(template.id);
+        }
+      } else if (key.escape) {
+        store.dismissTemplateSelector();
+      }
+    },
+    { isActive: state.showTemplateSelector }
+  );
+  useInput(
+    (input, key) => {
+      if (key.escape) {
+        setAddingPort(false);
+        setAddPortValue("");
+        return;
+      }
+      if (key.return) {
+        const parsed = Number.parseInt(addPortValue, 10);
+        if (!Number.isNaN(parsed) && parsed > 0 && parsed <= 65535) {
+          store.addPort(parsed);
+        }
+        setAddingPort(false);
+        setAddPortValue("");
+        return;
+      }
+      if (key.backspace) {
+        setAddPortValue((v) => v.slice(0, -1));
+        return;
+      }
+      if (input && /^\d$/u.test(input)) {
+        setAddPortValue((v) => v + input);
+      }
+    },
+    { isActive: addingPort }
+  );
+  useInput(
+    (input, key) => {
+      if (key.escape) {
+        setAddingEnv(null);
+        setAddEnvKey("");
+        setAddEnvValue("");
+        setAddEnvPhase("key");
+        return;
+      }
+      if (key.return) {
+        if (addEnvPhase === "key" && addEnvKey) {
+          setAddEnvPhase("value");
+          return;
+        }
+        if (addEnvPhase === "value" && addEnvKey) {
+          store.addEnvVar(addingEnv, addEnvKey, addEnvValue);
+          setAddingEnv(null);
+          setAddEnvKey("");
+          setAddEnvValue("");
+          setAddEnvPhase("key");
+          return;
+        }
+      }
+      if (key.backspace) {
+        if (addEnvPhase === "key") {
+          setAddEnvKey((v) => v.slice(0, -1));
+        } else {
+          setAddEnvValue((v) => v.slice(0, -1));
+        }
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        if (addEnvPhase === "key") {
+          setAddEnvKey((v) => v + input);
+        } else {
+          setAddEnvValue((v) => v + input);
+        }
+      }
+    },
+    { isActive: addingEnv !== null }
+  );
+  useInput(
+    (input, key) => {
+      if (key.escape) {
+        setAddingMount(false);
+        setMountSource("");
+        setMountTarget("");
+        setMountPhase("source");
+        return;
+      }
+      if (key.return) {
+        if (mountPhase === "source" && mountSource) {
+          setMountPhase("target");
+          return;
+        }
+        if (mountPhase === "target" && mountTarget) {
+          setMountPhase("type");
+          return;
+        }
+        if (mountPhase === "type") {
+          store.addMount({ source: mountSource, target: mountTarget, type: mountType });
+          setAddingMount(false);
+          setMountSource("");
+          setMountTarget("");
+          setMountPhase("source");
+          return;
+        }
+      }
+      if (mountPhase === "type") {
+        switch (input) {
+          case "1": {
+            setMountType("volume");
+            break;
+          }
+          case "2": {
+            setMountType("bind");
+            break;
+          }
+          case "3": {
+            setMountType("tmpfs");
+            break;
+          }
+        }
+        return;
+      }
+      if (key.backspace) {
+        if (mountPhase === "source") {
+          setMountSource((v) => v.slice(0, -1));
+        } else if (mountPhase === "target") {
+          setMountTarget((v) => v.slice(0, -1));
+        }
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        if (mountPhase === "source") {
+          setMountSource((v) => v + input);
+        } else if (mountPhase === "target") {
+          setMountTarget((v) => v + input);
+        }
+      }
+    },
+    { isActive: addingMount }
+  );
+  useInput(
+    (input, key) => {
+      if (input === "c" && key.ctrl) {
+        exit();
+        return;
+      }
+      if (quitDialogVisible) {
+        return;
+      }
+      if (helpVisible) {
+        if (key.escape || input === "?") {
+          setHelpVisible(false);
+        } else if (key.downArrow || input === "j") {
+          helpScrollRef.current?.scrollBy(1);
+        } else if (key.upArrow || input === "k") {
+          helpScrollRef.current?.scrollBy(-1);
+        } else if (input === "q") {
+          setHelpVisible(false);
+          setQuitDialogVisible(true);
+        }
+        return;
+      }
+      if (searchActive) {
+        if (key.escape) {
+          setSearchActive(false);
+          if (state.section === "features") {
+            store.setFeatureSearch("");
+          } else {
+            store.setExtensionSearch("");
+          }
+          return;
+        }
+        if (key.return) {
+          setSearchActive(false);
+          return;
+        }
+        if (key.backspace) {
+          if (state.section === "features") {
+            store.setFeatureSearch(state.featureSearch.slice(0, -1));
+          } else {
+            store.setExtensionSearch(state.extensionSearch.slice(0, -1));
+          }
+          return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          if (state.section === "features") {
+            store.setFeatureSearch(state.featureSearch + input);
+          } else {
+            store.setExtensionSearch(state.extensionSearch + input);
+          }
+          return;
+        }
+        return;
+      }
+      if (state.fieldEditing) {
+        if (key.escape) {
+          store.setFieldEditing(false);
+          return;
+        }
+        if (key.return) {
+          store.setFieldEditing(false);
+          return;
+        }
+        return;
+      }
+      if (input === "?") {
+        setHelpVisible(true);
+        return;
+      }
+      if (input === "q") {
+        if (state.isDirty) {
+          setQuitDialogVisible(true);
+        } else {
+          exit();
+        }
+        return;
+      }
+      if (input === "s") {
+        handleSave();
+        return;
+      }
+      if (key.tab) {
+        setFocusedPanel((p) => p === "editor" ? "preview" : "editor");
+        return;
+      }
+      if (focusedPanel === "preview") {
+        if (key.downArrow || input === "j") {
+          previewScrollRef.current?.scrollBy(1);
+          return;
+        }
+        if (key.upArrow || input === "k") {
+          previewScrollRef.current?.scrollBy(-1);
+          return;
+        }
+        if (key.pageDown) {
+          previewScrollRef.current?.scrollBy(10);
+          return;
+        }
+        if (key.pageUp) {
+          previewScrollRef.current?.scrollBy(-10);
+          return;
+        }
+        if (key.home) {
+          previewScrollRef.current?.scrollToTop();
+          return;
+        }
+        if (key.end) {
+          previewScrollRef.current?.scrollToBottom();
+          return;
+        }
+        if (key.escape) {
+          setFocusedPanel("editor");
+        }
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        if (fieldCount > 0) {
+          store.setFieldIndex(Math.min(state.fieldIndex + 1, fieldCount - 1));
+        }
+        return;
+      }
+      if (key.upArrow || input === "k") {
+        store.setFieldIndex(Math.max(state.fieldIndex - 1, 0));
+        return;
+      }
+      if (key.return) {
+        switch (state.section) {
+          case "compose":
+          case "general":
+          case "lifecycle": {
+            store.setFieldEditing(true);
+            break;
+          }
+          case "environment": {
+            const containerCount = Object.keys(state.config.containerEnv ?? {}).length;
+            const containerAddIndex = containerCount;
+            const remoteAddIndex = containerCount + 1 + Object.keys(state.config.remoteEnv ?? {}).length;
+            if (state.fieldIndex === containerAddIndex) {
+              setAddingEnv("container");
+              setAddEnvKey("");
+              setAddEnvValue("");
+              setAddEnvPhase("key");
+            } else if (state.fieldIndex === remoteAddIndex) {
+              setAddingEnv("remote");
+              setAddEnvKey("");
+              setAddEnvValue("");
+              setAddEnvPhase("key");
+            }
+            break;
+          }
+          case "mounts": {
+            const mounts = state.config.mounts ?? [];
+            if (state.fieldIndex === mounts.length) {
+              setAddingMount(true);
+              setMountSource("");
+              setMountTarget("");
+              setMountType("volume");
+              setMountPhase("source");
+            }
+            break;
+          }
+          case "ports": {
+            const ports = state.config.forwardPorts ?? [];
+            if (state.fieldIndex === ports.length) {
+              setAddingPort(true);
+              setAddPortValue("");
+            }
+            break;
+          }
+        }
+        return;
+      }
+      if (input === " ") {
+        switch (state.section) {
+          case "extensions": {
+            const catalog = filterExtensions(state.extensionSearch);
+            const ext = catalog[state.fieldIndex];
+            if (ext) {
+              store.toggleExtension(ext.id);
+            }
+            break;
+          }
+          case "features": {
+            const catalog = filterFeatures(state.featureSearch);
+            const feature = catalog[state.fieldIndex];
+            if (feature) {
+              store.toggleFeature(feature.id);
+            }
+            break;
+          }
+          case "general": {
+            const stringFieldCount = GENERAL_FIELD_COUNT - GENERAL_BOOLEAN_FIELDS.length;
+            const boolIndex = state.fieldIndex - stringFieldCount;
+            if (boolIndex >= 0 && boolIndex < GENERAL_BOOLEAN_FIELDS.length) {
+              const field = GENERAL_BOOLEAN_FIELDS[boolIndex];
+              store.updateConfig({ [field]: !state.config[field] });
+            }
+            break;
+          }
+        }
+        return;
+      }
+      if (input === "/") {
+        if (state.section === "features" || state.section === "extensions") {
+          setSearchActive(true);
+        }
+        return;
+      }
+      if (input === "A" && state.section === "mounts") {
+        store.applySuggestedMounts();
+        return;
+      }
+      if (input === "a") {
+        if (state.section === "environment") {
+          const containerCount = Object.keys(state.config.containerEnv ?? {}).length;
+          const target = state.fieldIndex <= containerCount ? "container" : "remote";
+          setAddingEnv(target);
+          setAddEnvKey("");
+          setAddEnvValue("");
+          setAddEnvPhase("key");
+        } else if (state.section === "mounts") {
+          setAddingMount(true);
+          setMountSource("");
+          setMountTarget("");
+          setMountType("volume");
+          setMountPhase("source");
+        }
+        return;
+      }
+      if (input === "d") {
+        switch (state.section) {
+          case "environment": {
+            const containerKeys = Object.keys(state.config.containerEnv ?? {});
+            const remoteKeys = Object.keys(state.config.remoteEnv ?? {});
+            if (state.fieldIndex < containerKeys.length) {
+              store.removeEnvVar("container", containerKeys[state.fieldIndex]);
+              if (containerKeys.length === 1) ; else if (state.fieldIndex >= containerKeys.length - 1) {
+                store.setFieldIndex(containerKeys.length - 2);
+              }
+            } else {
+              const remoteIndex = state.fieldIndex - containerKeys.length - 1;
+              if (remoteIndex >= 0 && remoteIndex < remoteKeys.length) {
+                store.removeEnvVar("remote", remoteKeys[remoteIndex]);
+                if (remoteKeys.length === 1) ; else if (remoteIndex >= remoteKeys.length - 1) {
+                  store.setFieldIndex(state.fieldIndex - 1);
+                }
+              }
+            }
+            break;
+          }
+          case "mounts": {
+            const mounts = state.config.mounts ?? [];
+            if (state.fieldIndex < mounts.length) {
+              store.removeMount(state.fieldIndex);
+              const newCount = mounts.length - 1;
+              if (state.fieldIndex >= newCount && newCount > 0) {
+                store.setFieldIndex(newCount - 1);
+              }
+            }
+            break;
+          }
+          case "ports": {
+            const ports = state.config.forwardPorts ?? [];
+            if (state.fieldIndex < ports.length) {
+              store.removePort(state.fieldIndex);
+              const newCount = ports.length - 1;
+              if (state.fieldIndex >= newCount && newCount > 0) {
+                store.setFieldIndex(newCount - 1);
+              }
+            }
+            break;
+          }
+        }
+      }
+    },
+    { isActive: !state.showTemplateSelector && !addingPort && addingEnv === null && !addingMount }
+  );
+  const jsonPreview = useMemo(() => store.getJsonPreview(), [state.config]);
+  if (columns < MIN_VIEWPORT_WIDTH || rows < MIN_VIEWPORT_HEIGHT) {
+    return jsx(Box, { alignItems: "center", height: rows, justifyContent: "center", width: columns, children: jsxs(Text, { color: "yellow", children: [
+      "Terminal too small (",
+      columns,
+      "x",
+      rows,
+      "), need ",
+      MIN_VIEWPORT_WIDTH,
+      "x",
+      MIN_VIEWPORT_HEIGHT
+    ] }) });
+  }
+  if (state.showTemplateSelector) {
+    return jsx(Box, { alignItems: "center", flexDirection: "column", height: rows, justifyContent: "center", width: columns, children: jsxs(Box, { borderColor: "cyan", borderStyle: "round", flexDirection: "column", paddingX: 2, paddingY: 1, width: 60, children: [
+      jsx(Box, { justifyContent: "center", marginBottom: 1, children: jsx(Text, { bold: true, color: "cyan", children: "Select a Template" }) }),
+      TEMPLATES.map((template, index) => {
+        const isSelected = index === state.templateIndex;
+        return jsx(Box, { children: jsxs(Text, { color: isSelected ? "cyan" : void 0, inverse: isSelected, children: [
+          isSelected ? " ❯ " : "   ",
+          jsx(Text, { bold: isSelected, children: template.name }),
+          jsxs(Text, { dimColor: true, children: [
+            " -",
+            template.description
+          ] })
+        ] }) }, template.id);
+      }),
+      jsx(Box, { justifyContent: "center", marginTop: 1, children: jsxs(Text, { dimColor: true, children: [
+        jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+        " ",
+        "navigate",
+        "  ",
+        jsx(Text, { bold: true, color: "white", children: "Enter" }),
+        " ",
+        "select",
+        "  ",
+        jsx(Text, { bold: true, color: "white", children: "Esc" }),
+        " ",
+        "blank"
+      ] }) })
+    ] }) });
+  }
+  let sectionContent;
+  switch (state.section) {
+    case "compose": {
+      sectionContent = jsx(
+        DockerComposeSection,
+        {
+          config: state.config,
+          fieldEditing: state.fieldEditing,
+          fieldIndex: state.fieldIndex,
+          onUpdate: (partial) => {
+            store.updateConfig(partial);
+          }
+        }
+      );
+      break;
+    }
+    case "environment": {
+      sectionContent = jsxs(Box, { flexDirection: "column", children: [
+        jsx(EnvironmentSection, { config: state.config, fieldIndex: state.fieldIndex }),
+        addingEnv !== null && jsx(Box, { marginTop: 1, paddingX: 1, children: jsxs(Text, { color: "cyan", children: [
+          "Add ",
+          addingEnv,
+          " env:",
+          " ",
+          addEnvPhase === "key" ? jsxs(Text, { children: [
+            "key=",
+            jsx(Text, { color: "yellow", children: addEnvKey || "_" }),
+            " (Enter to set value)"
+          ] }) : jsxs(Text, { children: [
+            addEnvKey,
+            "=",
+            jsx(Text, { color: "yellow", children: addEnvValue || "_" }),
+            " (Enter to confirm, Esc to cancel)"
+          ] })
+        ] }) })
+      ] });
+      break;
+    }
+    case "extensions": {
+      sectionContent = jsx(
+        ExtensionsSection,
+        {
+          config: state.config,
+          fieldIndex: state.fieldIndex,
+          scrollOffset: listScrollOffset,
+          searchText: state.extensionSearch,
+          viewportHeight: listViewportHeight
+        }
+      );
+      break;
+    }
+    case "features": {
+      sectionContent = jsx(
+        FeaturesSection,
+        {
+          config: state.config,
+          fieldIndex: state.fieldIndex,
+          scrollOffset: listScrollOffset,
+          searchText: state.featureSearch,
+          viewportHeight: listViewportHeight
+        }
+      );
+      break;
+    }
+    case "general": {
+      sectionContent = jsx(
+        GeneralSection,
+        {
+          config: state.config,
+          fieldEditing: state.fieldEditing,
+          fieldIndex: state.fieldIndex,
+          onUpdate: (partial) => {
+            store.updateConfig(partial);
+          }
+        }
+      );
+      break;
+    }
+    case "lifecycle": {
+      sectionContent = jsx(
+        LifecycleSection,
+        {
+          config: state.config,
+          fieldEditing: state.fieldEditing,
+          fieldIndex: state.fieldIndex,
+          onSetCommand: (hook, command) => {
+            store.setLifecycleCommand(hook, command);
+          }
+        }
+      );
+      break;
+    }
+    case "mounts": {
+      sectionContent = jsx(
+        MountsSection,
+        {
+          addingMount,
+          config: state.config,
+          detectedPm: state.detectedPm,
+          fieldIndex: state.fieldIndex,
+          mountPhase,
+          mountSource,
+          mountTarget,
+          mountType,
+          suggestedMounts: state.suggestedMounts
+        }
+      );
+      break;
+    }
+    case "ports": {
+      sectionContent = jsx(PortsSection, { addingPort, addPortValue, config: state.config, fieldIndex: state.fieldIndex });
+      break;
+    }
+    default: {
+      sectionContent = jsx(Text, { children: "Unknown section" });
+    }
+  }
+  const footer = jsxs(Box, { borderBottom: false, borderColor: "gray", borderLeft: false, borderRight: false, borderStyle: "single", flexShrink: 0, children: [
+    jsxs(Box, { flexGrow: 1, flexWrap: "wrap", gap: 2, paddingX: 1, children: [
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "q" }),
+        jsx(Text, { dimColor: true, children: "QUIT" })
+      ] }),
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "?" }),
+        jsx(Text, { dimColor: true, children: "HELP" })
+      ] }),
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+        jsx(Text, { dimColor: true, children: "NAV" })
+      ] }),
+      (state.section === "features" || state.section === "extensions") && jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "Space" }),
+        jsx(Text, { dimColor: true, children: "CHECK" })
+      ] }),
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "←→" }),
+        jsx(Text, { dimColor: true, children: "TABS" })
+      ] }),
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "Tab" }),
+        jsx(Text, { dimColor: true, children: "PANEL" })
+      ] }),
+      (state.section === "features" || state.section === "extensions") && jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "/" }),
+        jsx(Text, { dimColor: true, children: "FILTER" })
+      ] }),
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { bold: true, color: "white", children: "s" }),
+        jsx(Text, { dimColor: true, children: "SAVE" })
+      ] })
+    ] }),
+    jsxs(Box, { paddingX: 1, children: [
+      saveMessage && jsxs(Text, { color: saveMessage.startsWith("Error") ? "red" : "green", children: [
+        saveMessage,
+        " "
+      ] }),
+      state.isDirty && jsx(Text, { color: "yellow", children: "[modified]" }),
+      !state.isDirty && !saveMessage && jsx(Text, { dimColor: true, children: "[saved]" })
+    ] })
+  ] });
+  const helpPopup = jsxs(
+    Dialog,
+    {
+      footer: jsxs(Text, { dimColor: true, children: [
+        jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+        " ",
+        "scroll",
+        " ",
+        jsx(Text, { bold: true, color: "white", children: "?" }),
+        "/",
+        jsx(Text, { bold: true, color: "white", children: "Esc" }),
+        " ",
+        "close"
+      ] }),
+      scrollRef: helpScrollRef,
+      title: "KEYBOARD SHORTCUTS",
+      visible: helpVisible,
+      width: 56,
+      children: [
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "NAVIGATION" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "←→" }),
+            jsx(Text, { dimColor: true, children: " Switch tabs" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+            "/",
+            jsx(Text, { bold: true, color: "white", children: "j/k" }),
+            jsx(Text, { dimColor: true, children: " Navigate within section" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "Tab" }),
+            jsx(Text, { dimColor: true, children: " Switch editor/preview panel" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "Enter" }),
+            jsx(Text, { dimColor: true, children: " Edit selected field" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "Esc" }),
+            jsx(Text, { dimColor: true, children: " Stop editing / cancel" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "FEATURES / EXTENSIONS" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "Space" }),
+            jsx(Text, { dimColor: true, children: " Toggle selection" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "/" }),
+            jsx(Text, { dimColor: true, children: " Search / filter" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "LISTS (Ports, Mounts, Env)" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "a" }),
+            jsx(Text, { dimColor: true, children: " Add new entry" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "d" }),
+            jsx(Text, { dimColor: true, children: " Delete selected entry" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "ACTIONS" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "s" }),
+            jsx(Text, { dimColor: true, children: " Save configuration" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "q" }),
+            jsx(Text, { dimColor: true, children: " Quit" })
+          ] }),
+          jsxs(Text, { children: [
+            " ",
+            jsx(Text, { bold: true, color: "white", children: "?" }),
+            jsx(Text, { dimColor: true, children: " Toggle help" })
+          ] })
+        ] })
+      ]
+    }
+  );
+  const previewPanel = jsx(
+    PreviewPanel,
+    {
+      focused: focusedPanel === "preview",
+      hadComments: state.hadComments,
+      jsonPreview,
+      mode: state.mode,
+      scrollRef: previewScrollRef
+    }
+  );
+  const isSplitLayout = columns >= MIN_SPLIT_WIDTH;
+  const previewWidth = isSplitLayout ? Math.floor(columns * 0.38) : 0;
+  return jsxs(Box, { flexDirection: "column", height: rows, width: columns, children: [
+    jsxs(Box, { flexShrink: 0, gap: 1, paddingX: 1, children: [
+      jsx(Text, { bold: true, inverse: true, children: " VIS " }),
+      jsxs(Text, { wrap: "truncate", children: [
+        state.mode === "create" ? "Create" : "Edit",
+        " devcontainer"
+      ] })
+    ] }),
+    jsx(Box, { flexShrink: 0, paddingX: 1, paddingY: 1, children: jsx(
+      Tabs,
+      {
+        defaultValue: state.section,
+        keyMap: { useNumbers: false, useTab: false },
+        onChange: (name) => {
+          store.setSection(name);
+          setFocusedPanel("editor");
+        },
+        showIndex: false,
+        children: EDITOR_SECTIONS.map(({ id, label }) => jsx(Tab, { name: id, children: label }, id))
+      }
+    ) }),
+    jsx(Box, { flexShrink: 0, paddingRight: 2, children: jsx(Text, { dimColor: true, wrap: "truncate", children: EDITOR_SECTIONS.find((s) => s.id === state.section)?.description ?? "" }) }),
+    jsxs(Box, { flexDirection: "row", flexGrow: 1, overflow: "hidden", children: [
+      jsx(Box, { borderColor: focusedPanel === "editor" ? "white" : "gray", borderStyle: "single", flexDirection: "column", flexGrow: 1, overflow: "hidden", children: sectionContent }),
+      isSplitLayout && jsx(Box, { flexShrink: 0, width: previewWidth, children: previewPanel })
+    ] }),
+    footer,
+    jsx(
+      QuitDialog,
+      {
+        autoExitSeconds: 3,
+        onCancel: () => {
+          setQuitDialogVisible(false);
+        },
+        visible: quitDialogVisible
+      }
+    ),
+    helpPopup
+  ] });
+};
+
+const execute = async ({ logger, options, workspaceRoot: wsRoot }) => {
+  if (!wsRoot) {
+    throw new Error("Could not determine workspace root. Run this command inside a monorepo or project directory.");
+  }
+  const workspaceRoot = wsRoot;
+  const templateId = options.template;
+  const outputPath = options.output;
+  const isTTY = Boolean(process.stdout.isTTY) && !isInCi;
+  let detectedPm = null;
+  try {
+    const pmInfo = detectPm(workspaceRoot);
+    detectedPm = pmInfo.name;
+  } catch {
+  }
+  const existing = readDevcontainerJson(workspaceRoot);
+  let initialConfig = existing?.config ?? null;
+  const hadComments = existing?.hadComments ?? false;
+  if (templateId && !existing) {
+    const template = TEMPLATES.find((t) => t.id === templateId);
+    if (!template) {
+      const validIds = TEMPLATES.map((t) => t.id).join(", ");
+      throw new Error(`Unknown template "${templateId}". Valid templates: ${validIds}`);
+    }
+    initialConfig = template.config;
+  }
+  if (!isTTY) {
+    if (initialConfig) {
+      logger.info(JSON.stringify(initialConfig, null, 2));
+    } else {
+      logger.error("No existing devcontainer.json found. Use --template to generate one in non-TTY mode.");
+      process.exitCode = 1;
+    }
+    return;
+  }
+  if (process.stdin.isTTY && typeof process.stdin.setRawMode === "function") {
+    process.stdin.setRawMode(true);
+    process.stdin.ref();
+    process.stdin.resume();
+  }
+  const keepAlive = setInterval(() => {
+  }, 1e3);
+  const store = new DevcontainerStore(initialConfig, hadComments, detectedPm);
+  if (templateId && !existing) {
+    store.dismissTemplateSelector();
+  }
+  let savedConfig = null;
+  const instance = render(
+    React.createElement(VisDevcontainerApp, {
+      onSave: (config) => {
+        writeDevcontainerJson(workspaceRoot, config, outputPath);
+        savedConfig = config;
+      },
+      store
+    }),
+    {
+      alternateScreen: true,
+      exitOnCtrlC: false,
+      interactive: true,
+      patchConsole: true
+    }
+  );
+  await instance.waitUntilExit();
+  clearInterval(keepAlive);
+  if (savedConfig) {
+    const target = outputPath ?? ".devcontainer/devcontainer.json";
+    logger.info(`DevContainer config saved to ${target}`);
+  }
+};
+
+export { execute as default };