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

package/dist/packem_chunks/handler45.js

@@ -1,27 +1,2574 @@
-var Ee=Object.defineProperty;var f=(e,t)=>Ee(e,"name",{value:t,configurable:!0});import{createRequire as Ae}from"node:module";import{isAccessibleSync as re,isFsCaseSensitive as je}from"@visulima/fs";import{isAbsolute as Fe,join as X,relative as D,basename as ve}from"@visulima/path";import{execa as ye}from"execa";import ke from"zeptomatch";import{jsx as k,jsxs as x}from"react/jsx-runtime";import{Spinner as Ne,Text as S,Box as A,render as Ge}from"@visulima/tui";import{C as be,D as B,T as Te}from"../packem_shared/symbols-CQmER5MT.js";import{dim as C,green as _e,yellow as se,cyan as K,red as Y}from"@visulima/colorize";const Me=Ae(import.meta.url),F=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,we=f(e=>{if(typeof F<"u"&&F.versions&&F.versions.node){const[t,r]=F.versions.node.split(".").map(Number);if(t>22||t===22&&r>=3||t===20&&r>=16)return F.getBuiltinModule(e)}return Me(e)},"__cjs_getBuiltinModule"),{readFileSync:Oe,writeFileSync:Pe,unlinkSync:Re}=we("node:fs"),{availableParallelism:ne}=we("node:os");var De=Object.defineProperty,He=f((e,t)=>De(e,"name",{value:t,configurable:!0}),"s$4");class O extends Error{static{f(this,"StagedError")}static{He(this,"StagedError")}constructor(t,r){super(t,r),this.name=this.constructor.name}}var Le=Object.defineProperty,Be=f((e,t)=>Le(e,"name",{value:t,configurable:!0}),"o$6");class Ue extends O{static{f(this,"ApplyEmptyCommitError")}static{Be(this,"ApplyEmptyCommitError")}}var qe=Object.defineProperty,Ve=f((e,t)=>qe(e,"name",{value:t,configurable:!0}),"o$5");class b extends O{static{f(this,"ConfigError")}static{Ve(this,"ConfigError")}}var ze=Object.defineProperty,We=f((e,t)=>ze(e,"name",{value:t,configurable:!0}),"t$1");class ae extends O{static{f(this,"GetBackupStashError")}static{We(this,"GetBackupStashError")}}var Ke=Object.defineProperty,Ye=f((e,t)=>Ke(e,"name",{value:t,configurable:!0}),"s$3");class _ extends O{static{f(this,"GitError")}static{Ye(this,"GitError")}stderr;constructor(t,r,n){super(t,n),this.stderr=r}}var Je=Object.defineProperty,Qe=f((e,t)=>Je(e,"name",{value:t,configurable:!0}),"e");class ie extends O{static{f(this,"RestoreOriginalStateError")}static{Qe(this,"RestoreOriginalStateError")}}var Xe=Object.defineProperty,Ze=f((e,t)=>Xe(e,"name",{value:t,configurable:!0}),"o$2");class M extends O{static{f(this,"TaskError")}static{Ze(this,"TaskError")}commandTitle;constructor(t,r,n){super(r,n),this.commandTitle=t}}var et=Object.defineProperty,q=f((e,t)=>et(e,"name",{value:t,configurable:!0}),"i");const tt=q(async e=>{if(e.config!==void 0)return e.config;throw new b(`No staged config provided. Add \`staged\` to your vis.config.ts:
+import { createRequire as __cjs_createRequire } from "node:module";
 
-  import { defineConfig } from "@visulima/vis/config";
+const __cjs_require = __cjs_createRequire(import.meta.url);
 
-  export default defineConfig({
-    staged: { "*.ts": "eslint --fix" },
-  });
+const __cjs_getProcess = typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" ? globalThis.process : process;
 
-Coming from lint-staged or nano-staged? Run \`vis migrate lint-staged\` (or \`vis migrate nano-staged\`) to move the config in and remove the legacy files.`)},"resolveConfig"),oe=q(e=>{if(typeof e!="object"||e===null)throw new b("Staged config must be an object mapping glob patterns to tasks.");const t=Object.entries(e);if(t.length===0)throw new b("Staged config is empty — at least one glob pattern is required.");for(const[r,n]of t){if(!r||r.trim()==="")throw new b("Staged config keys must be non-empty glob patterns.");Se(r,n)}return e},"validateConfig"),Se=q((e,t)=>{if(typeof t=="string"){if(t.trim()==="")throw new b(`Task for "${e}" is an empty string.`);return}if(Array.isArray(t)){if(t.length===0)throw new b(`Task array for "${e}" is empty.`);for(const r of t)Se(e,r);return}if(typeof t!="function"&&!rt(t))throw new b(`Invalid task for "${e}" — expected string, string[], function, or { title, task } object.`)},"validateTask"),rt=q(e=>typeof e=="object"&&e!==null&&typeof e.title=="string"&&typeof e.task=="function","isCustomTask");var st=Object.defineProperty,$=f((e,t)=>st(e,"name",{value:t,configurable:!0}),"n$1");const ce=2048,g=$(async(e,t)=>{const r=await ye("git",[...e],{cwd:t.cwd,env:t.env?{...process.env,...t.env}:void 0,input:t.input,reject:!1,stderr:"pipe",stdin:t.input===void 0?"ignore":"pipe",stdout:"pipe"}),n=typeof r.exitCode=="number"?r.exitCode:1;if(n!==0&&!t.lenient){const s=typeof r.stderr=="string"?r.stderr:"",i=s.length>ce?`${s.slice(0,ce)}…`:s;throw new _(`git ${e.join(" ")} failed with exit code ${n}: ${i.trim()}`,s)}return{exitCode:n,stderr:typeof r.stderr=="string"?r.stderr:"",stdout:typeof r.stdout=="string"?r.stdout:""}},"git"),R=$(async(e,t)=>{const{stdout:r}=await g(e,t);return r.trim()},"gitOut"),nt=$(async e=>{const t=await g(["rev-parse","--is-inside-work-tree"],{cwd:e,lenient:!0});return t.exitCode===0&&t.stdout.trim()==="true"},"isGitRepo"),at=$(async e=>R(["rev-parse","--absolute-git-dir"],{cwd:e}),"getGitDirectory"),$e=$(async e=>R(["rev-parse","--show-toplevel"],{cwd:e}),"getWorkTree"),de=$(async e=>R(["write-tree"],{cwd:e}),"writeIndexTree"),it=$(async e=>{const t=await g(["rev-parse","HEAD^{tree}"],{cwd:e,lenient:!0});return t.exitCode===0?t.stdout.trim():""},"headTreeSha"),N={major:2,minor:32},ot=$(e=>{const t=/git version (\d+)\.(\d+)/.exec(e);if(!t)return null;const r=Number.parseInt(t[1]??"",10),n=Number.parseInt(t[2]??"",10);return Number.isNaN(r)||Number.isNaN(n)?null:{major:r,minor:n}},"parseGitVersion"),ct=$(async e=>{const t=ot(await R(["--version"],{cwd:e}));if(t!==null&&(t.major<N.major||t.major===N.major&&t.minor<N.minor))throw new _(`Git ${N.major}.${N.minor} or newer is required; found ${t.major}.${t.minor}.`)},"assertGitVersion");var dt=Object.defineProperty,I=f((e,t)=>dt(e,"name",{value:t,configurable:!0}),"a$2");const lt="ACMR",le=500,ut=I(async e=>{const{stdout:t}=await g(["diff-files","--raw","-z"],{cwd:e}),r=t.split("\0").filter(s=>s.length>0),n=[];for(let s=0;s<r.length;s+=1){const i=r[s];if(!i?.startsWith(":"))continue;const o=i.slice(1).split(" "),a=o[3],c=o[4],l=r[s+1];s+=1,c==="A"&&a!==void 0&&/^0+$/.test(a)&&l!==void 0&&n.push(l)}return n},"getIntentToAddPaths"),ue=I(async e=>{const{stdout:t}=await g(["ls-files","--others","--exclude-standard","-z"],{cwd:e});return t.split("\0").filter(r=>r.length>0)},"getUntrackedFiles"),ft=I(async(e,t)=>{if(e.length===0)return;const r=`${e.join("\0")}\0`;await g(["rm","--cached","--quiet","--pathspec-from-file=-","--pathspec-file-nul","--"],{cwd:t.cwd,input:r})},"removeFromIndex"),ht=I(async e=>{const t=e.diffFilter??lt,r=e.diff===void 0?["diff","--name-only","-z",`--diff-filter=${t}`,"--staged"]:["diff","--name-only","-z",`--diff-filter=${t}`,...e.diff.split(/\s+/).filter(Boolean)],{stdout:n}=await g(r,{cwd:e.cwd}),s=n.split("\0").filter(o=>o.length>0);if(s.length===0)return[];const i=e.workTree??await $e(e.cwd);return s.map(o=>Fe(o)?o:X(i,o))},"getFiles"),pt=I(async(e,t)=>{if(e.length===0)return null;const r=[];for(let i=0;i<e.length;i+=le){const o=e.slice(i,i+le),{stdout:a}=await g(["diff","--binary","--unified=0","--no-color","--no-ext-diff","--src-prefix=a/","--dst-prefix=b/","--patch","--submodule=short","--",...o],{cwd:t.cwd});a.length>0&&r.push(a)}if(r.length===0)return null;const n=r.join(""),s=n.endsWith(`
-`)?n:`${n}
-`;return Buffer.from(s,"utf8")},"capturePatch"),gt=I(async e=>{const{stdout:t}=await g(["status","--porcelain=v1","-z"],{cwd:e}),r=t.split("\0"),n=[];for(let s=0;s<r.length;s+=1){const i=r[s];if(i===void 0||i.length<4)continue;const o=i.charAt(0),a=i.charAt(1),c=i.slice(3),l=o==="R"||o==="C"||a==="R"||a==="C";o!==" "&&o!=="?"&&a!==" "&&a!=="?"&&n.push(c),l&&(s+=1)}return n},"getPartiallyStagedFiles"),mt=I(async(e,t)=>{if(e.length===0)return;const r=`${e.join("\0")}\0`;await g(["checkout","--force","--pathspec-from-file=-","--pathspec-file-nul","--"],{cwd:t.cwd,input:r})},"checkoutPaths"),wt=I(async(e,t)=>{if(await g(["update-index","--again"],{cwd:t.cwd,lenient:!0}),e.length===0)return;const r=`${e.join("\0")}\0`;await g(["add","-u","--pathspec-from-file=-","--pathspec-file-nul","--"],{cwd:t.cwd,input:r})},"updateIndexAgain");var vt=Object.defineProperty,P=f((e,t)=>vt(e,"name",{value:t,configurable:!0}),"r$1");const yt="vis_staged_automatic_backup",xe=P(()=>`${yt}-${process.pid}-${Date.now()}-${Math.random().toString(36).slice(2,8)}`,"buildMessage"),kt=P(async e=>{const t=await R(["stash","create"],{cwd:e});return t.length===0?null:(await g(["stash","store","-m",xe(),t],{cwd:e}),t)},"createBackupStash"),bt=P(async e=>{const t=xe(),{exitCode:r,stdout:n}=await g(["stash","push","--keep-index","--include-untracked","--quiet","-m",t],{cwd:e,lenient:!0});if(r!==0)return null;const s=n.trim();return s.length>0&&/no local changes/i.test(s)?null:R(["rev-parse","stash@{0}"],{cwd:e})},"createHideAllStash"),ee=P(async(e,t)=>{const{exitCode:r,stdout:n}=await g(["reflog","--format=%H %gd","refs/stash"],{cwd:e,lenient:!0});if(r!==0)return null;for(const s of n.split(/\r?\n/)){const[i,o]=s.split(/\s+/,2);if(i===t&&o!==void 0)return o}return null},"findStashRefBySha"),fe=P(async(e,t)=>{if(t===null)return;const r=await ee(e,t);r!==null&&await g(["stash","drop","--quiet",r],{cwd:e})},"dropBackupStash"),Tt=P(async(e,t)=>{if(t===null)throw new ae("Backup stash was not found — can't revert working tree.");const r=await ee(e,t);if(r===null)throw new ae(`Backup stash ${t} is no longer reachable — can't revert working tree.`);await g(["reset","--hard","HEAD"],{cwd:e}),await g(["stash","apply","--index","--quiet",r],{cwd:e})},"applyBackupStash"),St=P(async(e,t)=>{if(t===null)return;const r=await ee(e,t);r!==null&&await g(["stash","pop","--quiet",r],{cwd:e})},"popHideAllStash");var $t=Object.defineProperty,xt=f((e,t)=>$t(e,"name",{value:t,configurable:!0}),"l");class Ct{static{f(this,"GitWorkflow")}static{xt(this,"GitWorkflow")}stagedFiles=[];partiallyStaged=[];workTree="";gitDir="";preTaskIndexTree="";postTaskIndexTree="";headTree="";revertApplied=!1;warnings=[];cwd;options;patch=null;backupStashSha=null;merge=[];shouldStash;shouldHidePartial;shouldHideUnstaged;shouldHideAll;hideAllStashSha=null;intentToAddPaths=[];preTaskUntracked=new Set;constructor(t){this.cwd=t.cwd??process.cwd(),this.options=t,this.shouldStash=t.stash!==!1&&t.diff===void 0,this.shouldHidePartial=t.hidePartiallyStaged!==!1,this.shouldHideUnstaged=t.hideUnstaged===!0,this.shouldHideAll=t.hideAll===!0}async prepare(){if(!await nt(this.cwd))throw new _(`Not a git repository: ${this.cwd}`);await ct(this.cwd),this.workTree=await $e(this.cwd),this.gitDir=await at(this.cwd),this.stagedFiles=await ht({cwd:this.cwd,diff:this.options.diff,diffFilter:this.options.diffFilter,workTree:this.workTree}),this.partiallyStaged=this.stagedFiles.length===0?[]:await gt(this.cwd),this.snapshotMergeState(),this.intentToAddPaths=await ut(this.workTree),this.intentToAddPaths.length>0&&await ft(this.intentToAddPaths,{cwd:this.workTree}),this.shouldStash?this.backupStashSha=await kt(this.workTree):this.partiallyStaged.length>0&&this.warnings.push("Running with --no-stash on partially-staged files — unstaged deltas will be captured to a patch, but if re-applying the patch fails after tasks run the changes cannot be recovered."),this.shouldHideAll?this.hideAllStashSha=await bt(this.workTree):await this.hideUnstagedChanges(),this.preTaskIndexTree=this.stagedFiles.length===0?"":await de(this.workTree),this.postTaskIndexTree=this.preTaskIndexTree,this.headTree=await it(this.workTree),this.preTaskUntracked=new Set(await ue(this.workTree))}async applyModifications({autoStage:t=!1}={}){if(this.stagedFiles.length===0)return;const r=this.stagedFiles.map(n=>D(this.workTree,n));if(await wt(r,{cwd:this.workTree}),t){const n=(await ue(this.workTree)).filter(s=>!this.preTaskUntracked.has(s));if(n.length>0){const s=`${n.join("\0")}\0`;await g(["add","--pathspec-from-file=-","--pathspec-file-nul","--"],{cwd:this.workTree,input:s})}}if(this.intentToAddPaths.length>0)try{await g(["add","--intent-to-add","--",...this.intentToAddPaths],{cwd:this.workTree})}catch{}this.postTaskIndexTree=await de(this.workTree)}indexTreeChanged(){return this.preTaskIndexTree.length>0&&this.postTaskIndexTree.length>0&&this.preTaskIndexTree!==this.postTaskIndexTree}postTaskIndexMatchesHead(){return this.postTaskIndexTree.length>0&&this.headTree.length>0&&this.postTaskIndexTree===this.headTree}async restoreUnstagedChanges(){if(this.revertApplied||this.patch===null||this.shouldHideAll)return;const t=["apply","--whitespace=nowarn","--recount","--unidiff-zero"];let r;try{await g(t,{cwd:this.workTree,input:this.patch});return}catch(n){r=n instanceof _?n.stderr:String(n)}try{await g([...t,"--3way"],{cwd:this.workTree,input:this.patch})}catch(n){const s=n instanceof _&&n.stderr?n.stderr:String(n);throw new ie(`Failed to re-apply unstaged changes after running tasks. Original changes remain in the backup stash — recover with \`git stash list\` and \`git stash apply\`.
-First attempt: ${r??"(no stderr)"}
-Second attempt: ${s}`,{cause:n})}}async revert(){if(this.backupStashSha!==null){try{await Tt(this.workTree,this.backupStashSha)}catch(t){throw new ie("Revert failed while restoring the backup stash. Use `git stash list` to recover manually.",{cause:t})}if(await fe(this.workTree,this.backupStashSha),this.intentToAddPaths.length>0)try{await g(["add","--intent-to-add","--",...this.intentToAddPaths],{cwd:this.workTree})}catch{}this.revertApplied=!0}}async cleanup(t){if(this.restoreMergeState(),this.hideAllStashSha!==null)try{await St(this.workTree,this.hideAllStashSha)}catch{}t&&this.backupStashSha!==null&&!this.revertApplied&&await fe(this.workTree,this.backupStashSha)}recoveryHint(){return this.backupStashSha===null?null:`Backup stash is preserved (sha ${this.backupStashSha.slice(0,7)}) — restore with: git stash apply --index ${this.backupStashSha}`}async hideUnstagedChanges(){const t=new Set(this.stagedFiles.map(n=>D(this.workTree,n))),r=this.shouldHideUnstaged?[...t]:this.shouldHidePartial?this.partiallyStaged.filter(n=>t.has(n)):[];r.length!==0&&(this.patch=await pt(r,{cwd:this.workTree}),this.patch!==null&&await mt(r,{cwd:this.workTree}))}snapshotMergeState(){this.gitDir.length!==0&&(this.merge=["MERGE_HEAD","MERGE_MODE","MERGE_MSG"].map(t=>{const r=X(this.gitDir,t);return re(r)?{body:Oe(r),existed:!0,name:t}:{body:null,existed:!1,name:t}}))}restoreMergeState(){if(!(this.gitDir.length===0||this.merge.length===0))for(const t of this.merge){const r=X(this.gitDir,t.name);try{t.existed&&t.body!==null?Pe(r,t.body):re(r)&&Re(r)}catch{}}}}var It=Object.defineProperty,V=f((e,t)=>It(e,"name",{value:t,configurable:!0}),"r");const Ce=V(e=>e.includes("/"),"isPathStyle"),U=V((e,t)=>t?e.toLowerCase():e,"normalizeForMatch"),Et=V((e,t,r,n={})=>{const s=Ce(e),i=n.caseInsensitive===!0,o=U(e,i),a=[];for(const c of t){const l=s?D(r,c):ve(c);ke(o,U(l,i))&&a.push(c)}return a},"matchFiles"),At=V((e,t,r,n={})=>{if(!t||t.length===0)return[...e];const s=n.caseInsensitive===!0;return e.filter(i=>{for(const o of t){const a=Ce(o)?D(r,i):ve(i),c=U(o,s);if(ke(c,U(a,s)))return!1}return!0})},"applyIgnore");var Mt=Object.defineProperty,H=f((e,t)=>Mt(e,"name",{value:t,configurable:!0}),"g");const jt=H(e=>{switch(e){case"failed":return"red";case"running":return"cyan";case"skipped":return"yellow";case"success":return"green";default:return"gray"}},"colorForStatus"),he=H(e=>{if(e==="running")return k(Ne,{type:"dots"});const t=e==="failed"?be:e==="skipped"?B:e==="success"?Te:B;return k(S,{color:jt(e),children:t})},"iconForStatus"),pe=H(({state:e,tick:t,verbose:r})=>x(A,{flexDirection:"column",children:[[...e.patterns.values()].map(n=>x(A,{flexDirection:"column",children:[x(A,{children:[he(n.status),x(S,{children:[" ",n.title]})]}),[...n.commands.values()].map(s=>x(A,{flexDirection:"column",marginLeft:2,children:[x(A,{children:[he(s.status),x(S,{children:[" ",s.title," "]}),s.status!=="pending"&&s.status!=="running"?x(S,{color:"gray",children:["(",s.durationMs,"ms)"]}):null]}),r&&s.output?k(A,{flexDirection:"column",marginLeft:2,children:s.output.split(/\r?\n/).slice(0,20).map((i,o)=>k(S,{color:"gray",children:i},`${s.id}-line-${o}`))}):null,s.status==="failed"&&s.error?k(A,{marginLeft:2,children:k(S,{color:"red",children:s.error.message})}):null]},s.id))]},n.id)),e.infoMessages.map((n,s)=>k(S,{color:"gray",children:n},`info-${s}`)),e.warnMessages.map((n,s)=>k(S,{color:"yellow",children:n},`warn-${s}`)),e.errorMessages.map(({message:n},s)=>k(S,{color:"red",children:n},`err-${s}`))]}),"App"),Ot=H((e={})=>{const t=e.verbose===!0,r={errorMessages:[],infoMessages:[],patterns:new Map,started:!1,warnMessages:[]};let n=0;const s=Ge(k(pe,{state:r,tick:n,verbose:t}),{exitOnCtrlC:!1,stdout:process.stderr}),i=H(()=>{n+=1,s.rerender(k(pe,{state:r,tick:n,verbose:t}))},"refresh");return{commandEnd({commandId:o,durationMs:a,error:c,output:l,patternId:u,status:d}){const p=r.patterns.get(u)?.commands.get(o);p&&(p.status=d,p.durationMs=a,p.output=l,p.error=c,i())},commandStart({commandId:o,patternId:a}){const c=r.patterns.get(a)?.commands.get(o);c&&(c.status="running",i())},error({error:o,message:a}){r.errorMessages.push({error:o,message:a}),i()},info({message:o}){r.infoMessages.push(o),i()},patternEnd({patternId:o,status:a}){const c=r.patterns.get(o);c&&(c.status=a,i())},patternStart({patternId:o}){const a=r.patterns.get(o);a&&(a.status="running",i())},start({patterns:o}){r.started=!0;for(const a of o){const c=new Map;for(const l of a.commands)c.set(l.id,{durationMs:0,id:l.id,status:"pending",title:l.title});r.patterns.set(a.id,{commands:c,id:a.id,status:"pending",title:a.title})}i()},async stop(){s.unmount(),await s.waitUntilExit()},warn({message:o}){r.warnMessages.push(o),i()}}},"createInkRenderer");var Pt=Object.defineProperty,J=f((e,t)=>Pt(e,"name",{value:t,configurable:!0}),"a$1");const ge=J((e={})=>{const{quiet:t=!1,verbose:r=!1}=e,n=new Map,s=new Map,i=J(a=>{t||process.stderr.write(`${a}
-`)},"print"),o=J(a=>{switch(a){case"failed":return Y(be);case"running":return K(">");case"skipped":return se(B);case"success":return _e(Te);default:return C(B)}},"iconFor");return{commandEnd({commandId:a,durationMs:c,error:l,output:u,status:d}){const p=s.get(a)??a,w=C(`(${c}ms)`);if(i(`  ${o(d)} ${p} ${w}`),d==="failed"&&l&&i(C(l.message)),(d==="failed"||r)&&u&&u.trim().length>0)for(const h of u.split(/\r?\n/))i(`    ${C(h)}`)},commandStart({commandId:a}){if(!r)return;const c=s.get(a)??a;i(`  ${C("…")} ${c}`)},error({error:a,message:c}){t?process.stderr.write(`${Y(c)}
-`):i(Y(c)),a?.stack&&(r||!t)&&process.stderr.write(`${C(a.stack)}
-`)},info({message:a}){i(C(a))},patternEnd({patternId:a,status:c}){const l=n.get(a)??a;i(`${o(c)} ${l}`)},patternStart({patternId:a}){const c=n.get(a)??a;i(`${K(">")} ${c}`)},start({patterns:a}){if(a.length===0){i(C("No staged files matched any pattern."));return}const c=new Set(a.flatMap(l=>l.files)).size;i(`${K(">")} Running staged tasks on ${c} file${c===1?"":"s"} across ${a.length} pattern${a.length===1?"":"s"}`);for(const l of a){n.set(l.id,l.title);for(const u of l.commands)s.set(u.id,u.title)}},stop(){},warn({message:a}){i(se(a))}}},"createPlainRenderer");var Rt=Object.defineProperty,Ft=f((e,t)=>Rt(e,"name",{value:t,configurable:!0}),"t");const Nt=Ft(async e=>{const{env:t}=process;if(e.debug===!0||e.quiet===!0||t.NODE_ENV==="test"||t.TERM==="dumb"||t.CI!==void 0||!process.stderr.isTTY)return ge({quiet:e.quiet,verbose:e.verbose});try{return Ot({verbose:e.verbose})}catch{return ge({quiet:e.quiet,verbose:e.verbose})}},"pickRenderer");var Gt=Object.defineProperty,G=f((e,t)=>Gt(e,"name",{value:t,configurable:!0}),"a");const Q=G(e=>typeof e=="object"&&e!==null&&typeof e.title=="string"&&typeof e.task=="function","isCustomTask"),_t=G(async e=>{let t=0,r=0;const n=G(()=>(t+=1,`pattern-${t}`),"nextPatternId"),s=G(()=>(r+=1,`cmd-${r}`),"nextCommandId"),i=G(async(a,c,l)=>{if(typeof a=="string"){l.push({command:a,files:c,id:s(),source:"string",title:a});return}if(Array.isArray(a)){for(const u of a)await i(u,c,l);return}if(typeof a=="function"){const u=await a([...c]);if(typeof u=="string"){l.push({command:u,files:c,id:s(),source:"function",title:u});return}if(Array.isArray(u)){for(const d of u)if(typeof d=="string")l.push({command:d,files:c,id:s(),source:"function",title:d});else if(Q(d))l.push({files:c,id:s(),run:d.task,source:"custom",title:d.title});else throw new b("Task function returned an array with an unsupported entry — expected strings or { title, task }.");return}if(Q(u)){l.push({files:c,id:s(),run:u.task,source:"custom",title:u.title});return}throw new b("Task function returned an unsupported value — expected string, string[], or { title, task }.")}if(Q(a)){l.push({files:c,id:s(),run:a.task,source:"custom",title:a.title});return}throw new b("Unsupported task value — expected string, string[], function, or { title, task }.")},"expandTask"),o=[];for(const[a,c]of Object.entries(e.config)){const l=Et(a,e.files,e.cwd,{caseInsensitive:e.caseInsensitive===!0});if(l.length===0)continue;const u=e.relative?l.map(p=>D(e.cwd,p)):l,d=[];await i(c,u,d),d.length!==0&&o.push({commands:d,files:u,id:n(),pattern:a,title:`${a} — ${l.length} file${l.length===1?"":"s"}`})}return o},"buildTaskGraph");var Dt=Object.defineProperty,z=f((e,t)=>Dt(e,"name",{value:t,configurable:!0}),"d$1");const Ht=z(e=>{const t=[];let r="",n=!1,s=!1;for(let i=0;i<e.length;i+=1){const o=e[i];if(o===void 0)break;if(o==="\\"&&!n&&i+1<e.length){const a=e[i+1];if(a!==void 0){s&&a!=='"'&&a!=="\\"&&(r+=o),r+=a,i+=1;continue}}if(o==='"'&&!n){s=!s;continue}if(o==="'"&&!s){n=!n;continue}if(!n&&!s&&/\s/.test(o)){r.length>0&&(t.push(r),r="");continue}r+=o}if(n||s)throw new b(`Unterminated ${n?"single":"double"} quote in command: ${e}`);return r.length>0&&t.push(r),t},"parseCommandString"),Ie=process.platform==="win32"?28e3:131072,Lt=z((e,t,r)=>{const n=[];let s=[],i=t;const o=r<=0?Ie:r;for(const a of e){const c=Buffer.byteLength(a)+1;s.length>0&&i+c>o&&(n.push(s),s=[],i=t),s.push(a),i+=c}return s.length>0&&n.push(s),n},"chunkFiles"),Bt=z(async(e,t,r)=>{const n=Ht(e);if(n.length===0)throw new M(e,"Empty command for staged task.");const[s,...i]=n;if(s===void 0)throw new M(e,"Empty command for staged task.");const o=Buffer.byteLength(s)+i.reduce((u,d)=>u+Buffer.byteLength(d)+1,0),a=Lt(t,o,r.maxArgLength??Ie),c=Date.now(),l=[];for(const u of a){if(r.signal?.aborted===!0)throw new M(e,"Task aborted by earlier failure.");const d=await ye(s,[...i,...u],{cancelSignal:r.signal,cwd:r.cwd,env:Ut(r.env),killSignal:r.killSignal??"SIGTERM",reject:!1,stderr:"pipe",stdout:"pipe"}),p=typeof d.stdout=="string"?d.stdout:"",w=typeof d.stderr=="string"?d.stderr:"",h=[p,w].filter(m=>m.length>0).join(`
-`);if(h.length>0&&l.push(h),d.isCanceled||d.isTerminated||typeof d.exitCode!="number"){const m=d.isCanceled?"Task aborted by earlier failure.":d.isTerminated?`Task killed by signal ${d.signal??"(unknown)"}.`:h.trim()||"Task exited without a numeric status code.";throw new M(e,m)}if(d.exitCode!==0)throw new M(e,h.trim()||`Exit code ${d.exitCode} from ${s}`)}return{durationMs:Date.now()-c,output:l.join(`
-`)}},"execCommand"),Ut=z(e=>{const t={...process.env};return process.stderr.isTTY&&t.FORCE_COLOR===void 0&&t.NO_COLOR===void 0&&(t.FORCE_COLOR="1"),e?{...t,...e}:t},"buildTaskEnv");var qt=Object.defineProperty,j=f((e,t)=>qt(e,"name",{value:t,configurable:!0}),"o");const Vt=j(async(e,t,r)=>{const n=Wt(r.concurrent,e.length),s=[],i=new AbortController;let o=!1,a=0;const c=j(()=>{o||(o=!0,r.continueOnError||i.abort())},"cancel");r.externalSignal&&(r.externalSignal.aborted?c():r.externalSignal.addEventListener("abort",()=>{c()},{once:!0}));const l=j(h=>{for(const m of h.commands)t.commandEnd({commandId:m.id,durationMs:0,patternId:h.id,status:"skipped"})},"emitSkippedCommands"),u=j(async h=>{if(o){l(h),t.patternEnd({patternId:h.id,status:"skipped"});return}t.patternStart({patternId:h.id});let m="success";for(const v of h.commands){if(o){t.commandEnd({commandId:v.id,durationMs:0,patternId:h.id,status:"skipped"}),m=m==="success"?"skipped":m;continue}t.commandStart({commandId:v.id,patternId:h.id});const y=await zt(v,r,i.signal),T=y.status==="failed"&&i.signal.aborted?{...y,status:"skipped"}:y;if(t.commandEnd({commandId:v.id,durationMs:T.durationMs,error:T.error,output:T.output,patternId:h.id,status:T.status}),T.status==="failed"){s.push(v.title),m="failed",c();break}if(T.status==="skipped"){m=m==="success"?"skipped":m;break}}t.patternEnd({patternId:h.id,status:m})},"runOne"),d=j(async()=>{for(;a<e.length;){const h=e[a];a+=1,h&&await u(h)}},"pickNext"),p=[];for(let h=0;h<Math.min(n,e.length);h+=1)p.push(d());await Promise.all(p);const w=r.externalSignal?.aborted===!0;return{failedCommands:s,success:s.length===0&&!w}},"runTasks"),zt=j(async(e,t,r)=>{const n=Date.now();try{if(e.source==="custom"&&e.run)return await e.run([...e.files]),{durationMs:Date.now()-n,status:"success"};if(e.command){const s=await Bt(e.command,e.files,{cwd:t.cwd,killSignal:t.killSignal,maxArgLength:t.maxArgLength,signal:r});return{durationMs:s.durationMs,output:t.verbose?s.output:void 0,status:"success"}}return{durationMs:Date.now()-n,error:new M(e.title,"Command has no invocation target."),status:"failed"}}catch(s){const i=s instanceof Error?s:new Error(String(s));return{durationMs:Date.now()-n,error:i,output:i instanceof M?i.message:void 0,status:"failed"}}},"runCommand"),Wt=j((e,t)=>{if(e===!1)return 1;if(e===!0){const n=Math.max(1,typeof ne=="function"?ne():4);return Math.min(Math.max(1,t),n)}const r=Math.floor(e);return r>0?r:1},"concurrencyLimit");var Kt=Object.defineProperty,Z=f((e,t)=>Kt(e,"name",{value:t,configurable:!0}),"u");const Yt=!0,Jt=Z(e=>{try{return!je(e)}catch{return!1}},"detectCaseInsensitive"),Qt=Z(async(e={})=>{const t=e.cwd??process.cwd(),r=await Nt(e),n=await tt(e);typeof n!="function"&&oe(n);const s=new Ct({...e,cwd:t}),i=new AbortController;let o=!1;const a=Z(d=>{if(o){process.removeListener("SIGINT",a),process.removeListener("SIGTERM",a),process.kill(process.pid,d);return}o=!0,r.warn({message:`Received ${d} — cancelling staged tasks and restoring state. Press Ctrl+C again to abort.`}),i.abort()},"onInterrupt");process.on("SIGINT",a),process.on("SIGTERM",a);let c={failedCommands:[],ranTasks:!1,success:!0},l=!1,u=!1;try{await s.prepare(),l=!0;for(const y of s.warnings)r.warn({message:y});if(s.stagedFiles.length===0)return e.allowEmpty!==!0&&r.info({message:"No staged files found."}),u=!0,{failedCommands:[],ranTasks:!1,success:!0};const d=Jt(t),p=At(s.stagedFiles,e.ignore,t,{caseInsensitive:d});if(p.length===0&&s.stagedFiles.length>0)return r.info({message:"Every staged file was excluded by the `ignore` list."}),u=!0,{failedCommands:[],ranTasks:!1,success:!0};const w=typeof n=="function"?oe(await n([...p])):n,h=await _t({caseInsensitive:d,config:w,cwd:t,files:p,relative:e.relative});if(r.start({patterns:h}),h.length===0)return r.info({message:"No staged files matched any pattern."}),u=!0,{failedCommands:[],ranTasks:!1,success:!0};const{failedCommands:m,success:v}=await Vt(h,r,{concurrent:e.concurrent??Yt,continueOnError:e.continueOnError===!0,cwd:t,externalSignal:i.signal,killSignal:e.killSignal,maxArgLength:e.maxArgLength,verbose:e.verbose});if(c={failedCommands:m,ranTasks:!0,success:v},v){if(e.diff===void 0&&(await s.applyModifications({autoStage:e.autoStage===!0}),e.failOnChanges===!0&&s.indexTreeChanged()&&(r.warn({message:"Tasks modified staged content — failing because --fail-on-changes is set."}),c={failedCommands:[...m],ranTasks:!0,success:!1}),e.allowEmpty!==!0&&s.postTaskIndexMatchesHead()))throw new Ue("All staged changes were reverted by tasks. Re-stage changes or rerun with --allow-empty.")}else if(e.revert===!0)r.info({message:"Reverting working tree from backup stash."}),await s.revert();else{const y=s.recoveryHint();y&&r.warn({message:y})}return await s.restoreUnstagedChanges(),u=c.success,c}catch(d){const p=d instanceof Error?d.message:String(d),w=d instanceof Error?d:new Error(p);if(r.error({error:w,message:p}),d instanceof O)return{failedCommands:c.failedCommands,ranTasks:c.ranTasks,success:!1};throw d}finally{if(process.removeListener("SIGINT",a),process.removeListener("SIGTERM",a),l)try{await s.cleanup(u)}catch(d){r.error({error:d,message:"Cleanup failed."})}await r.stop()}},"runStaged");var Xt=Object.defineProperty,Zt=f((e,t)=>Xt(e,"name",{value:t,configurable:!0}),"n");const er="VIS_STAGED_CONCURRENT",me=Zt(e=>{const t=e.trim();if(t==="true"||t==="")return!0;if(t==="false")return!1;const r=Number(t);return Number.isNaN(r)?!0:r},"parseConcurrent");var tr=Object.defineProperty,L=f((e,t)=>tr(e,"name",{value:t,configurable:!0}),"d");const rr=L((e,t)=>{const r={};t!==void 0&&(r.config=t);const n=L(E=>e[E]===void 0?void 0:!!e[E],"readBool"),s=L(E=>{const W=e[E];return typeof W=="string"&&W.length>0?W:void 0},"readString"),i=n("allow-empty");i!==void 0&&(r.allowEmpty=i);const o=n("auto-stage");o!==void 0&&(r.autoStage=o);const a=n("continue-on-error");a!==void 0&&(r.continueOnError=a);const c=n("debug");c!==void 0&&(r.debug=c);const l=n("fail-on-changes");l!==void 0&&(r.failOnChanges=l);const u=n("hide-partially-staged");u!==void 0&&(r.hidePartiallyStaged=u);const d=n("hide-unstaged");d!==void 0&&(r.hideUnstaged=d);const p=n("quiet");p!==void 0&&(r.quiet=p);const w=n("relative");w!==void 0&&(r.relative=w);const h=n("revert");h!==void 0&&(r.revert=h);const m=n("stash");m!==void 0&&(r.stash=m);const v=n("verbose");v!==void 0&&(r.verbose=v);const y=s("cwd");y!==void 0&&(r.cwd=y);const T=s("diff");T!==void 0&&(r.diff=T);const te=s("diff-filter");if(te!==void 0&&(r.diffFilter=te),n("force-kill")===!0&&(r.killSignal="SIGKILL"),e.concurrent===void 0){const E=process.env[er];E!==void 0&&(r.concurrent=me(E.trim()))}else r.concurrent=me(String(e.concurrent));return r},"buildRunOptions"),hr=L(async({options:e,visConfig:t})=>{const r=(t??{}).staged;if(!r)throw new Error(`No "staged" config found in vis.config.ts. Add one:
+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);
+};
 
-  // vis.config.ts
-  import { defineConfig } from "@visulima/vis/config";
+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';
 
-  export default defineConfig({
-    staged: { '*': 'vis check --fix' },
-  });
+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)"
+  }
+];
 
-Migrating from lint-staged or nano-staged? Run \`vis migrate lint-staged\` (or \`vis migrate nano-staged\`) to move the config in and remove the legacy files.`);(await Qt(rr(e,r))).success||(process.exitCode=1)},"execute");export{rr as buildRunOptions,hr as default};
+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 };