codexapp 0.1.28 → 0.1.29

package/dist-cli/index.js

@@ -3,21 +3,22 @@
 // src/cli/index.ts
 import { createServer as createServer2 } from "http";
 import { chmodSync, createWriteStream, existsSync as existsSync2, mkdirSync } from "fs";
-import { readFile as readFile2 } from "fs/promises";
+import { readFile as readFile3 } from "fs/promises";
 import { homedir as homedir2, networkInterfaces } from "os";
-import { join as join3 } from "path";
+import { join as join4 } from "path";
 import { spawn as spawn2, spawnSync } from "child_process";
+import { createInterface } from "readline/promises";
 import { fileURLToPath as fileURLToPath2 } from "url";
-import { dirname as dirname2 } from "path";
+import { dirname as dirname3 } from "path";
 import { get as httpsGet } from "https";
 import { Command } from "commander";
 import qrcode from "qrcode-terminal";
 
 // src/server/httpServer.ts
 import { fileURLToPath } from "url";
-import { dirname, extname, isAbsolute as isAbsolute2, join as join2 } from "path";
+import { dirname as dirname2, extname as extname2, isAbsolute as isAbsolute2, join as join3 } from "path";
 import { existsSync } from "fs";
-import { readdir as readdir2, stat as stat2 } from "fs/promises";
+import { writeFile as writeFile2, stat as stat3 } from "fs/promises";
 import express from "express";
 
 // src/server/codexAppServerBridge.ts
@@ -1578,32 +1579,77 @@ function createAuthSession(password) {
   };
 }
 
-// src/server/httpServer.ts
-import { WebSocketServer } from "ws";
-var __dirname = dirname(fileURLToPath(import.meta.url));
-var distDir = join2(__dirname, "..", "dist");
-var spaEntryFile = join2(distDir, "index.html");
-var IMAGE_CONTENT_TYPES = {
-  ".avif": "image/avif",
-  ".bmp": "image/bmp",
-  ".gif": "image/gif",
-  ".jpeg": "image/jpeg",
-  ".jpg": "image/jpeg",
-  ".png": "image/png",
-  ".svg": "image/svg+xml",
-  ".webp": "image/webp"
-};
-function normalizeLocalImagePath(rawPath) {
-  const trimmed = rawPath.trim();
-  if (!trimmed) return "";
-  if (trimmed.startsWith("file://")) {
-    try {
-      return decodeURIComponent(trimmed.replace(/^file:\/\//u, ""));
-    } catch {
-      return trimmed.replace(/^file:\/\//u, "");
-    }
+// src/server/localBrowseUi.ts
+import { dirname, extname, join as join2 } from "path";
+import { open, readFile as readFile2, readdir as readdir2, stat as stat2 } from "fs/promises";
+var TEXT_EDITABLE_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".txt",
+  ".md",
+  ".json",
+  ".js",
+  ".ts",
+  ".tsx",
+  ".jsx",
+  ".css",
+  ".scss",
+  ".html",
+  ".htm",
+  ".xml",
+  ".yml",
+  ".yaml",
+  ".log",
+  ".csv",
+  ".env",
+  ".py",
+  ".sh",
+  ".toml",
+  ".ini",
+  ".conf",
+  ".sql",
+  ".bat",
+  ".cmd",
+  ".ps1"
+]);
+function languageForPath(pathValue) {
+  const extension = extname(pathValue).toLowerCase();
+  switch (extension) {
+    case ".js":
+      return "javascript";
+    case ".ts":
+      return "typescript";
+    case ".jsx":
+      return "javascript";
+    case ".tsx":
+      return "typescript";
+    case ".py":
+      return "python";
+    case ".sh":
+      return "sh";
+    case ".css":
+    case ".scss":
+      return "css";
+    case ".html":
+    case ".htm":
+      return "html";
+    case ".json":
+      return "json";
+    case ".md":
+      return "markdown";
+    case ".yaml":
+    case ".yml":
+      return "yaml";
+    case ".xml":
+      return "xml";
+    case ".sql":
+      return "sql";
+    case ".toml":
+      return "ini";
+    case ".ini":
+    case ".conf":
+      return "ini";
+    default:
+      return "plaintext";
   }
-  return trimmed;
 }
 function normalizeLocalPath(rawPath) {
   const trimmed = rawPath.trim();
@@ -1625,39 +1671,102 @@ function decodeBrowsePath(rawPath) {
     return rawPath;
   }
 }
+function isTextEditablePath(pathValue) {
+  return TEXT_EDITABLE_EXTENSIONS.has(extname(pathValue).toLowerCase());
+}
+function looksLikeTextBuffer(buffer) {
+  if (buffer.length === 0) return true;
+  for (const byte of buffer) {
+    if (byte === 0) return false;
+  }
+  const decoded = buffer.toString("utf8");
+  const replacementCount = (decoded.match(/\uFFFD/gu) ?? []).length;
+  return replacementCount / decoded.length < 0.05;
+}
+async function probeFileIsText(localPath) {
+  const handle = await open(localPath, "r");
+  try {
+    const sample = Buffer.allocUnsafe(4096);
+    const { bytesRead } = await handle.read(sample, 0, sample.length, 0);
+    return looksLikeTextBuffer(sample.subarray(0, bytesRead));
+  } finally {
+    await handle.close();
+  }
+}
+async function isTextEditableFile(localPath) {
+  if (isTextEditablePath(localPath)) return true;
+  try {
+    const fileStat = await stat2(localPath);
+    if (!fileStat.isFile()) return false;
+    return await probeFileIsText(localPath);
+  } catch {
+    return false;
+  }
+}
 function escapeHtml(value) {
   return value.replace(/&/gu, "&amp;").replace(/</gu, "&lt;").replace(/>/gu, "&gt;").replace(/"/gu, "&quot;").replace(/'/gu, "&#39;");
 }
 function toBrowseHref(pathValue) {
   return `/codex-local-browse${encodeURI(pathValue)}`;
 }
-async function renderDirectoryListing(res, localPath) {
+function toEditHref(pathValue) {
+  return `/codex-local-edit${encodeURI(pathValue)}`;
+}
+function escapeForInlineScriptString(value) {
+  return JSON.stringify(value).replace(/<\//gu, "<\\/").replace(/<!--/gu, "<\\!--").replace(/\u2028/gu, "\\u2028").replace(/\u2029/gu, "\\u2029");
+}
+async function getDirectoryItems(localPath) {
   const entries = await readdir2(localPath, { withFileTypes: true });
-  const sorted = entries.slice().sort((a, b) => {
-    if (a.isDirectory() && !b.isDirectory()) return -1;
-    if (!a.isDirectory() && b.isDirectory()) return 1;
+  const withMeta = await Promise.all(entries.map(async (entry) => {
+    const entryPath = join2(localPath, entry.name);
+    const entryStat = await stat2(entryPath);
+    const editable = !entry.isDirectory() && await isTextEditableFile(entryPath);
+    return {
+      name: entry.name,
+      path: entryPath,
+      isDirectory: entry.isDirectory(),
+      editable,
+      mtimeMs: entryStat.mtimeMs
+    };
+  }));
+  return withMeta.sort((a, b) => {
+    if (b.mtimeMs !== a.mtimeMs) return b.mtimeMs - a.mtimeMs;
+    if (a.isDirectory && !b.isDirectory) return -1;
+    if (!a.isDirectory && b.isDirectory) return 1;
     return a.name.localeCompare(b.name);
   });
+}
+async function createDirectoryListingHtml(localPath) {
+  const items = await getDirectoryItems(localPath);
   const parentPath = dirname(localPath);
-  const rows = sorted.map((entry) => {
-    const entryPath = join2(localPath, entry.name);
-    const suffix = entry.isDirectory() ? "/" : "";
-    return `<li><a href="${escapeHtml(toBrowseHref(entryPath))}">${escapeHtml(entry.name)}${suffix}</a></li>`;
+  const rows = items.map((item) => {
+    const suffix = item.isDirectory ? "/" : "";
+    const editAction = item.editable ? ` <a class="icon-btn" aria-label="Edit ${escapeHtml(item.name)}" href="${escapeHtml(toEditHref(item.path))}" title="Edit">\u270F\uFE0F</a>` : "";
+    return `<li class="file-row"><a class="file-link" href="${escapeHtml(toBrowseHref(item.path))}">${escapeHtml(item.name)}${suffix}</a>${editAction}</li>`;
   }).join("\n");
   const parentLink = localPath !== parentPath ? `<p><a href="${escapeHtml(toBrowseHref(parentPath))}">..</a></p>` : "";
-  const html = `<!doctype html>
+  return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Index of ${escapeHtml(localPath)}</title>
   <style>
-    body { font-family: ui-monospace, Menlo, Monaco, monospace; margin: 24px; background: #0b1020; color: #dbe6ff; }
+    body { font-family: ui-monospace, Menlo, Monaco, monospace; margin: 16px; background: #0b1020; color: #dbe6ff; }
     a { color: #8cc2ff; text-decoration: none; }
     a:hover { text-decoration: underline; }
-    ul { list-style: none; padding: 0; margin: 12px 0 0; }
-    li { padding: 3px 0; }
+    ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
+    .file-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
+    .file-link { display: block; padding: 10px 12px; border: 1px solid #28405f; border-radius: 10px; background: #0f1b33; overflow-wrap: anywhere; }
+    .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #36557a; border-radius: 10px; background: #162643; text-decoration: none; }
+    .icon-btn:hover { filter: brightness(1.08); text-decoration: none; }
     h1 { font-size: 18px; margin: 0; word-break: break-all; }
+    @media (max-width: 640px) {
+      body { margin: 12px; }
+      .file-row { gap: 8px; }
+      .file-link { font-size: 15px; padding: 12px; }
+      .icon-btn { width: 44px; height: 44px; }
+    }
   </style>
 </head>
 <body>
@@ -1666,7 +1775,107 @@ async function renderDirectoryListing(res, localPath) {
   <ul>${rows}</ul>
 </body>
 </html>`;
-  res.status(200).type("text/html; charset=utf-8").send(html);
+}
+async function createTextEditorHtml(localPath) {
+  const content = await readFile2(localPath, "utf8");
+  const parentPath = dirname(localPath);
+  const language = languageForPath(localPath);
+  const safeContentLiteral = escapeForInlineScriptString(content);
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Edit ${escapeHtml(localPath)}</title>
+  <style>
+    html, body { width: 100%; height: 100%; margin: 0; }
+    body { font-family: ui-monospace, Menlo, Monaco, monospace; background: #0b1020; color: #dbe6ff; display: flex; flex-direction: column; overflow: hidden; }
+    .toolbar { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #0b1020; border-bottom: 1px solid #243a5a; }
+    .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+    button, a { background: #1b2a4a; color: #dbe6ff; border: 1px solid #345; padding: 6px 10px; border-radius: 6px; text-decoration: none; cursor: pointer; }
+    button:hover, a:hover { filter: brightness(1.08); }
+    #editor { flex: 1 1 auto; min-height: 0; width: 100%; border: none; overflow: hidden; }
+    #status { margin-left: 8px; color: #8cc2ff; }
+    .ace_editor { background: #07101f !important; color: #dbe6ff !important; width: 100% !important; height: 100% !important; }
+    .ace_gutter { background: #07101f !important; color: #6f8eb5 !important; }
+    .ace_marker-layer .ace_active-line { background: #10213c !important; }
+    .ace_marker-layer .ace_selection { background: rgba(140, 194, 255, 0.3) !important; }
+    .meta { opacity: 0.9; font-size: 12px; overflow-wrap: anywhere; }
+  </style>
+</head>
+<body>
+  <div class="toolbar">
+    <div class="row">
+      <a href="${escapeHtml(toBrowseHref(parentPath))}">Back</a>
+      <button id="saveBtn" type="button">Save</button>
+      <span id="status"></span>
+    </div>
+    <div class="meta">${escapeHtml(localPath)} \xB7 ${escapeHtml(language)}</div>
+  </div>
+  <div id="editor"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/ace.js"></script>
+  <script>
+    const saveBtn = document.getElementById('saveBtn');
+    const status = document.getElementById('status');
+    const editor = ace.edit('editor');
+    editor.setTheme('ace/theme/tomorrow_night');
+    editor.session.setMode('ace/mode/${escapeHtml(language)}');
+    editor.setValue(${safeContentLiteral}, -1);
+    editor.setOptions({
+      fontSize: '13px',
+      wrap: true,
+      showPrintMargin: false,
+      useSoftTabs: true,
+      tabSize: 2,
+      behavioursEnabled: true,
+    });
+    editor.resize();
+
+    saveBtn.addEventListener('click', async () => {
+      status.textContent = 'Saving...';
+      const response = await fetch(location.pathname, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+        body: editor.getValue(),
+      });
+      status.textContent = response.ok ? 'Saved' : 'Save failed';
+    });
+  </script>
+</body>
+</html>`;
+}
+
+// src/server/httpServer.ts
+import { WebSocketServer } from "ws";
+var __dirname = dirname2(fileURLToPath(import.meta.url));
+var distDir = join3(__dirname, "..", "dist");
+var spaEntryFile = join3(distDir, "index.html");
+var IMAGE_CONTENT_TYPES = {
+  ".avif": "image/avif",
+  ".bmp": "image/bmp",
+  ".gif": "image/gif",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp"
+};
+function normalizeLocalImagePath(rawPath) {
+  const trimmed = rawPath.trim();
+  if (!trimmed) return "";
+  if (trimmed.startsWith("file://")) {
+    try {
+      return decodeURIComponent(trimmed.replace(/^file:\/\//u, ""));
+    } catch {
+      return trimmed.replace(/^file:\/\//u, "");
+    }
+  }
+  return trimmed;
+}
+function readWildcardPathParam(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.join("/");
+  return "";
 }
 function createServer(options = {}) {
   const app = express();
@@ -1683,7 +1892,7 @@ function createServer(options = {}) {
       res.status(400).json({ error: "Expected absolute local file path." });
       return;
     }
-    const contentType = IMAGE_CONTENT_TYPES[extname(localPath).toLowerCase()];
+    const contentType = IMAGE_CONTENT_TYPES[extname2(localPath).toLowerCase()];
     if (!contentType) {
       res.status(415).json({ error: "Unsupported image type." });
       return;
@@ -1710,17 +1919,18 @@ function createServer(options = {}) {
     });
   });
   app.get("/codex-local-browse/*path", async (req, res) => {
-    const rawPath = typeof req.params.path === "string" ? req.params.path : "";
+    const rawPath = readWildcardPathParam(req.params.path);
     const localPath = decodeBrowsePath(`/${rawPath}`);
     if (!localPath || !isAbsolute2(localPath)) {
       res.status(400).json({ error: "Expected absolute local file path." });
       return;
     }
     try {
-      const fileStat = await stat2(localPath);
+      const fileStat = await stat3(localPath);
       res.setHeader("Cache-Control", "private, no-store");
       if (fileStat.isDirectory()) {
-        await renderDirectoryListing(res, localPath);
+        const html = await createDirectoryListingHtml(localPath);
+        res.status(200).type("text/html; charset=utf-8").send(html);
         return;
       }
       res.sendFile(localPath, { dotfiles: "allow" }, (error) => {
@@ -1731,6 +1941,44 @@ function createServer(options = {}) {
       res.status(404).json({ error: "File not found." });
     }
   });
+  app.get("/codex-local-edit/*path", async (req, res) => {
+    const rawPath = readWildcardPathParam(req.params.path);
+    const localPath = decodeBrowsePath(`/${rawPath}`);
+    if (!localPath || !isAbsolute2(localPath)) {
+      res.status(400).json({ error: "Expected absolute local file path." });
+      return;
+    }
+    try {
+      const fileStat = await stat3(localPath);
+      if (!fileStat.isFile()) {
+        res.status(400).json({ error: "Expected file path." });
+        return;
+      }
+      const html = await createTextEditorHtml(localPath);
+      res.status(200).type("text/html; charset=utf-8").send(html);
+    } catch {
+      res.status(404).json({ error: "File not found." });
+    }
+  });
+  app.put("/codex-local-edit/*path", express.text({ type: "*/*", limit: "10mb" }), async (req, res) => {
+    const rawPath = readWildcardPathParam(req.params.path);
+    const localPath = decodeBrowsePath(`/${rawPath}`);
+    if (!localPath || !isAbsolute2(localPath)) {
+      res.status(400).json({ error: "Expected absolute local file path." });
+      return;
+    }
+    if (!await isTextEditableFile(localPath)) {
+      res.status(415).json({ error: "Only text-like files are editable." });
+      return;
+    }
+    const body = typeof req.body === "string" ? req.body : "";
+    try {
+      await writeFile2(localPath, body, "utf8");
+      res.status(200).json({ ok: true });
+    } catch {
+      res.status(404).json({ error: "File not found." });
+    }
+  });
   const hasFrontendAssets = existsSync(spaEntryFile);
   if (hasFrontendAssets) {
     app.use(express.static(distDir));
@@ -1802,11 +2050,11 @@ function generatePassword() {
 
 // src/cli/index.ts
 var program = new Command().name("codexui").description("Web interface for Codex app-server");
-var __dirname2 = dirname2(fileURLToPath2(import.meta.url));
+var __dirname2 = dirname3(fileURLToPath2(import.meta.url));
 async function readCliVersion() {
   try {
-    const packageJsonPath = join3(__dirname2, "..", "package.json");
-    const raw = await readFile2(packageJsonPath, "utf8");
+    const packageJsonPath = join4(__dirname2, "..", "package.json");
+    const raw = await readFile3(packageJsonPath, "utf8");
     const parsed = JSON.parse(raw);
     return typeof parsed.version === "string" ? parsed.version : "unknown";
   } catch {
@@ -1831,13 +2079,13 @@ function runWithStatus(command, args) {
   return result.status ?? -1;
 }
 function getUserNpmPrefix() {
-  return join3(homedir2(), ".npm-global");
+  return join4(homedir2(), ".npm-global");
 }
 function resolveCodexCommand() {
   if (canRun("codex", ["--version"])) {
     return "codex";
   }
-  const userCandidate = join3(getUserNpmPrefix(), "bin", "codex");
+  const userCandidate = join4(getUserNpmPrefix(), "bin", "codex");
   if (existsSync2(userCandidate) && canRun(userCandidate, ["--version"])) {
     return userCandidate;
   }
@@ -1845,7 +2093,7 @@ function resolveCodexCommand() {
   if (!prefix) {
     return null;
   }
-  const candidate = join3(prefix, "bin", "codex");
+  const candidate = join4(prefix, "bin", "codex");
   if (existsSync2(candidate) && canRun(candidate, ["--version"])) {
     return candidate;
   }
@@ -1855,7 +2103,7 @@ function resolveCloudflaredCommand() {
   if (canRun("cloudflared", ["--version"])) {
     return "cloudflared";
   }
-  const localCandidate = join3(homedir2(), ".local", "bin", "cloudflared");
+  const localCandidate = join4(homedir2(), ".local", "bin", "cloudflared");
   if (existsSync2(localCandidate) && canRun(localCandidate, ["--version"])) {
     return localCandidate;
   }
@@ -1909,9 +2157,9 @@ async function ensureCloudflaredInstalledLinux() {
   if (!mappedArch) {
     throw new Error(`cloudflared auto-install is not supported for Linux architecture: ${process.arch}`);
   }
-  const userBinDir = join3(homedir2(), ".local", "bin");
+  const userBinDir = join4(homedir2(), ".local", "bin");
   mkdirSync(userBinDir, { recursive: true });
-  const destination = join3(userBinDir, "cloudflared");
+  const destination = join4(userBinDir, "cloudflared");
   const downloadUrl = `https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-${mappedArch}`;
   console.log("\ncloudflared not found. Installing to ~/.local/bin...\n");
   await downloadFile(downloadUrl, destination);
@@ -1924,9 +2172,34 @@ async function ensureCloudflaredInstalledLinux() {
   console.log("\ncloudflared installed.\n");
   return installed;
 }
+async function shouldInstallCloudflaredInteractively() {
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    console.warn("\n[cloudflared] cloudflared is missing and terminal is non-interactive, skipping install.");
+    return false;
+  }
+  const prompt = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    const answer = await prompt.question("cloudflared is not installed. Install it now to ~/.local/bin? [y/N] ");
+    const normalized = answer.trim().toLowerCase();
+    return normalized === "y" || normalized === "yes";
+  } finally {
+    prompt.close();
+  }
+}
+async function resolveCloudflaredForTunnel() {
+  const current = resolveCloudflaredCommand();
+  if (current) {
+    return current;
+  }
+  const installApproved = await shouldInstallCloudflaredInteractively();
+  if (!installApproved) {
+    return null;
+  }
+  return ensureCloudflaredInstalledLinux();
+}
 function hasCodexAuth() {
-  const codexHome = process.env.CODEX_HOME?.trim() || join3(homedir2(), ".codex");
-  return existsSync2(join3(codexHome, "auth.json"));
+  const codexHome = process.env.CODEX_HOME?.trim() || join4(homedir2(), ".codex");
+  return existsSync2(join4(codexHome, "auth.json"));
 }
 function ensureCodexInstalled() {
   let codexCommand = resolveCodexCommand();
@@ -1944,7 +2217,7 @@ function ensureCodexInstalled() {
 Global npm install requires elevated permissions. Retrying with --prefix ${userPrefix}...
 `);
       runOrFail("npm", ["install", "-g", "--prefix", userPrefix, pkg], `${label} (user prefix)`);
-      process.env.PATH = `${join3(userPrefix, "bin")}:${process.env.PATH ?? ""}`;
+      process.env.PATH = `${join4(userPrefix, "bin")}:${process.env.PATH ?? ""}`;
     };
     if (isTermuxRuntime()) {
       console.log("\nCodex CLI not found. Installing Termux-compatible Codex CLI from npm...\n");
@@ -2098,7 +2371,10 @@ async function startServer(options) {
   let tunnelUrl = null;
   if (options.tunnel) {
     try {
-      const cloudflaredCommand = await ensureCloudflaredInstalledLinux() ?? "cloudflared";
+      const cloudflaredCommand = await resolveCloudflaredForTunnel();
+      if (!cloudflaredCommand) {
+        throw new Error("cloudflared is not installed");
+      }
       const tunnel = await startCloudflaredTunnel(cloudflaredCommand, port);
       tunnelChild = tunnel.process;
       tunnelUrl = tunnel.url;