xtra-cli 0.2.1 → 0.2.4

package/dist/commands/doctor.js

@@ -38,10 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.doctorCommand = void 0;
 /**
- * doctor.ts — Diagnose common xtra-cli setup issues
- *
- * Runs a series of self-diagnostic checks and reports
- * pass / warn / fail for each one.
+ * doctor.ts — Diagnose common xtra-cli setup issues
  */
 const commander_1 = require("commander");
 const chalk_1 = __importDefault(require("chalk"));
@@ -49,128 +46,119 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const axios_1 = __importDefault(require("axios"));
 const config_1 = require("../lib/config");
-const PASS = chalk_1.default.green("  ✔");
-const FAIL = chalk_1.default.red("  ✗");
-const WARN = chalk_1.default.yellow("  âš ");
+// ─── Box Drawing Helpers ─────────────────────────────────────────────────────
+const W = 65;
+const B = { tl: "╭", tr: "╮", bl: "╰", br: "╯", h: "─", v: "│" };
+function hline(w) { return B.h.repeat(w); }
+const PASS = chalk_1.default.green("✓  ");
+const FAIL = chalk_1.default.red("✗  ");
+const WARN = chalk_1.default.yellow("⚠  ");
 async function runChecks() {
     const checks = [];
     const config = (0, config_1.getConfig)();
-    // ── 1. Node Version ─────────────────────────────────────────────────────────
+    // 1. Node Version
     const nodeMajor = parseInt(process.versions.node.split(".")[0]);
     checks.push({
         name: "Node.js Version",
         status: nodeMajor >= 18 ? "pass" : "fail",
         message: `v${process.versions.node} ${nodeMajor >= 18 ? "(OK)" : "(requires >=18)"}`,
     });
-    // ── 2. Auth Token ────────────────────────────────────────────────────────────
+    // 2. Auth Token
     const token = (0, config_1.getAuthToken)();
     checks.push({
         name: "Auth Token",
         status: token ? "pass" : "fail",
-        message: token ? `Set (${token.substring(0, 8)}...)` : "Not set — run 'xtra login'",
+        message: token ? `Set (${token.substring(0, 8)}...)` : "Not set — run 'xtra login'",
     });
-    // ── 3. API URL Configured ────────────────────────────────────────────────────
-    const apiUrl = config.apiUrl || process.env.XTRA_API_URL;
+    // 3. API URL Configured
+    const apiUrl = config.apiUrl || process.env.XTRA_API_URL || "https://xtra-security.vercel.app/api";
     checks.push({
         name: "API URL",
-        status: apiUrl ? "pass" : "warn",
-        message: apiUrl || "Using default (https://xtra-security.vercel.app/api)",
+        status: config.apiUrl || process.env.XTRA_API_URL ? "pass" : "warn",
+        message: apiUrl,
     });
-    // ── 4. API Reachability ──────────────────────────────────────────────────────
+    // 4. API Reachability
     try {
-        const res = await axios_1.default.get(`${config.apiUrl}/health`, { timeout: 4000 });
+        const res = await axios_1.default.get(`${apiUrl}/health`, { timeout: 4000 });
         checks.push({
             name: "API Connectivity",
             status: res.status === 200 ? "pass" : "warn",
-            message: `${config.apiUrl} → ${res.status} ${res.statusText}`,
+            message: `${res.status} ${res.statusText}`,
         });
     }
     catch (e) {
-        const msg = e.code === "ECONNREFUSED"
-            ? "Connection refused — is the server running?"
-            : e.code === "ETIMEDOUT"
-                ? "Timed out — server may be slow or unreachable"
-                : e.message;
-        checks.push({ name: "API Connectivity", status: "fail", message: msg });
+        const msg = e.code === "ECONNREFUSED" ? "Connection refused (offline?)"
+            : e.code === "ETIMEDOUT" ? "Timed out (unreachable)"
+                : e.response?.status === 404 ? "API reachable (health endpoint missing)"
+                    : e.message;
+        // Special case: if it hits a 404 it means DNS and port work, but route is missing
+        const status = e.response?.status === 404 ? "pass" : "fail";
+        checks.push({ name: "API Connectivity", status, message: msg });
     }
-    // ── 5. Active Project ────────────────────────────────────────────────────────
+    // 5. Active Project
     const project = (0, config_1.getRcConfig)().project;
     checks.push({
         name: "Active Project",
         status: project ? "pass" : "warn",
-        message: project ? project : "Not set — run 'xtra project set <id>'",
+        message: project ? project : "Not set — run 'xtra project set <id>'",
     });
-    // ── 6. Active Branch ─────────────────────────────────────────────────────────
-    const branch = (0, config_1.getRcConfig)().branch;
+    // 6. Active Branch
+    const branch = (0, config_1.getRcConfig)().branch || "main";
     checks.push({
         name: "Active Branch",
         status: "pass",
-        message: branch || "main (default)",
+        message: branch,
     });
-    // ── 7. .xtrarc / xtra.json ─────────────────────────────────────────────────
+    // 7. Config files
     const rcPath = path.join(process.cwd(), ".xtrarc");
     const jsonPath = path.join(process.cwd(), "xtra.json");
-    const hasProjectConfig = fs.existsSync(rcPath) || fs.existsSync(jsonPath);
+    const hasConfig = fs.existsSync(rcPath) || fs.existsSync(jsonPath);
     checks.push({
-        name: "Project Config (.xtrarc)",
-        status: hasProjectConfig ? "pass" : "warn",
-        message: hasProjectConfig
-            ? fs.existsSync(rcPath) ? ".xtrarc found" : "xtra.json found"
-            : "Not found — run 'xtra init' to create one",
-    });
-    // ── 8. .env file present ────────────────────────────────────────────────────
-    const envPath = path.join(process.cwd(), ".env");
-    checks.push({
-        name: ".env File",
-        status: "pass",
-        message: fs.existsSync(envPath) ? ".env found" : "No .env (not required if using xtra run)",
-    });
-    // ── 9. XTRA_MACHINE_TOKEN (for CI) ─────────────────────────────────────────
-    const machineToken = process.env.XTRA_MACHINE_TOKEN;
-    checks.push({
-        name: "CI Machine Token",
-        status: "pass", // Always pass — optional
-        message: machineToken ? "XTRA_MACHINE_TOKEN is set ✔" : "Not set (only needed for CI/CD pipelines)",
+        name: "Project Config",
+        status: hasConfig ? "pass" : "warn",
+        message: hasConfig ? (fs.existsSync(rcPath) ? ".xtrarc found" : "xtra.json found") : "Not found (run 'xtra init')",
     });
     return checks;
 }
 exports.doctorCommand = new commander_1.Command("doctor")
-    .description("Diagnose common setup issues (connectivity, auth, config)")
+    .description("Diagnose CLI configuration and API connectivity")
     .option("--json", "Output results as JSON", false)
     .action(async (options) => {
     if (!options.json) {
-        console.log(chalk_1.default.bold("\n🩺 xtra doctor — running diagnostics...\n"));
+        console.log();
+        console.log(chalk_1.default.bold.cyan("  ⚕ XtraSecurity Diagnostics"));
+        console.log(chalk_1.default.hex("#4a5568")("  " + B.tl + hline(W) + B.tr));
     }
     const checks = await runChecks();
     if (options.json) {
         process.stdout.write(JSON.stringify(checks, null, 2) + "\n");
         return;
     }
-    let failures = 0;
-    let warnings = 0;
+    let failures = 0, warnings = 0;
     for (const c of checks) {
-        const icon = c.status === "pass" ? PASS : c.status === "warn" ? WARN : FAIL;
-        const nameStr = chalk_1.default.bold(c.name.padEnd(22));
-        const msgStr = c.status === "fail"
-            ? chalk_1.default.red(c.message)
-            : c.status === "warn"
-                ? chalk_1.default.yellow(c.message)
-                : chalk_1.default.gray(c.message);
-        console.log(`${icon}  ${nameStr}${msgStr}`);
         if (c.status === "fail")
             failures++;
         if (c.status === "warn")
             warnings++;
+        const icon = c.status === "pass" ? PASS : c.status === "warn" ? WARN : FAIL;
+        const name = chalk_1.default.bold(chalk_1.default.white(c.name.padEnd(20)));
+        const msg = c.status === "pass" ? chalk_1.default.hex("#94a3b8")(c.message)
+            : c.status === "warn" ? chalk_1.default.yellow(c.message)
+                : chalk_1.default.red(c.message);
+        console.log(chalk_1.default.hex("#4a5568")("  " + B.v) + ` ${icon}${name}  ${msg}`.padEnd(W) + chalk_1.default.hex("#4a5568")(B.v));
     }
+    console.log(chalk_1.default.hex("#4a5568")("  " + B.bl + hline(W) + B.br));
     console.log();
     if (failures === 0 && warnings === 0) {
-        console.log(chalk_1.default.green.bold("  ✅ All checks passed! Your CLI is ready to use."));
+        console.log(chalk_1.default.green("  ✓ All systems operational. The CLI is ready to use."));
     }
     else {
+        const parts = [];
         if (failures > 0)
-            console.log(chalk_1.default.red(`  ${failures} issue(s) need attention.`));
+            parts.push(chalk_1.default.red(`${failures} error(s)`));
         if (warnings > 0)
-            console.log(chalk_1.default.yellow(`  ${warnings} warning(s) found.`));
+            parts.push(chalk_1.default.yellow(`${warnings} warning(s)`));
+        console.log(`  Found ${parts.join(" and ")}.`);
     }
     console.log();
 });

package/dist/commands/project.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -10,9 +43,41 @@ const ora_1 = __importDefault(require("ora"));
 const inquirer_1 = __importDefault(require("inquirer"));
 const config_1 = require("../lib/config");
 const api_1 = require("../lib/api");
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
 exports.projectCommand = new commander_1.Command("project")
     .alias("projects")
     .description("Manage project context");
+const updateConfigs = (projectId, projectName) => {
+    const oldProject = (0, config_1.getConfigValue)("project");
+    // Always update global
+    (0, config_1.setConfig)("project", projectId);
+    // Clear branch if project changed
+    if (oldProject !== projectId) {
+        (0, config_1.setConfig)("branch", "main"); // Reset to main or clear? Projects have different branches.
+    }
+    // Update local .xtrarc if exists
+    const rcPath = path.join(process.cwd(), ".xtrarc");
+    if (fs.existsSync(rcPath)) {
+        try {
+            const rc = JSON.parse(fs.readFileSync(rcPath, "utf-8"));
+            rc.project = projectId;
+            if (oldProject !== projectId) {
+                rc.branch = "main"; // Sync local branch too
+            }
+            fs.writeFileSync(rcPath, JSON.stringify(rc, null, 2), "utf8");
+            console.log(chalk_1.default.gray(`  ✔ Updated local .xtrarc`));
+        }
+        catch (e) {
+            console.error(chalk_1.default.yellow(`  ⚠ Could not update local .xtrarc: ${e instanceof Error ? e.message : 'Unknown error'}`));
+        }
+    }
+    console.log(chalk_1.default.green(`✔ Default project set to '${projectName}'`));
+    const currentBranch = (0, config_1.getConfigValue)("branch");
+    if (currentBranch) {
+        console.log(chalk_1.default.gray(`  Active branch: ${currentBranch}`));
+    }
+};
 // SET
 exports.projectCommand
     .command("set")
@@ -21,12 +86,7 @@ exports.projectCommand
     .action(async (projectId) => {
     // If projectId is provided, set it directly
     if (projectId) {
-        (0, config_1.setConfig)("project", projectId);
-        console.log(chalk_1.default.green(`✔ Default project set to '${projectId}'`));
-        const currentBranch = (0, config_1.getConfigValue)("branch");
-        if (currentBranch) {
-            console.log(chalk_1.default.gray(`  Active branch: ${currentBranch}`));
-        }
+        updateConfigs(projectId, projectId);
         return;
     }
     // Otherwise, fetch projects and show interactive selector
@@ -49,13 +109,8 @@ exports.projectCommand
                 message: "Select a project:",
                 choices
             }]);
-        (0, config_1.setConfig)("project", selectedProject);
         const selectedName = projects.find((p) => p.id === selectedProject)?.name || selectedProject;
-        console.log(chalk_1.default.green(`✔ Default project set to '${selectedName}'`));
-        const currentBranch = (0, config_1.getConfigValue)("branch");
-        if (currentBranch) {
-            console.log(chalk_1.default.gray(`  Active branch: ${currentBranch}`));
-        }
+        updateConfigs(selectedProject, selectedName);
     }
     catch (error) {
         spinner.fail("Failed to fetch projects");

package/dist/commands/run.js

@@ -199,10 +199,11 @@ Examples:
         }
     }
     console.log(chalk_1.default.gray(`> ${command} ${args.join(" ")}`));
+    const isWindows = process.platform === "win32";
     const child = (0, child_process_1.spawn)(command, args, {
         env: envVars,
         stdio: "inherit",
-        shell: useShell, // false by default; --shell enables for npm scripts / Windows
+        shell: useShell || isWindows, // Auto-enable shell on Windows for better compatibility (e.g. npm, etc)
     });
     child.on("exit", (code) => {
         process.exit(code ?? 0);

package/dist/commands/ui.js

@@ -41,178 +41,249 @@ const commander_1 = require("commander");
 const chalk_1 = __importDefault(require("chalk"));
 const readline = __importStar(require("readline"));
 const api_1 = require("../lib/api");
+const config_1 = require("../lib/config");
 const ENVS = ["development", "staging", "production"];
-// ─── Rendering ────────────────────────────────────────────────────────────────
-function clear() { process.stdout.write("\x1Bc"); }
-function renderHeader() {
-    console.log(chalk_1.default.cyan("╔═══════════════════════════════════════════════════════════╗"));
-    console.log(chalk_1.default.cyan("║") + chalk_1.default.bold.cyan("  🔒  XtraSecurity — Interactive Shell                     ") + chalk_1.default.cyan("║"));
-    console.log(chalk_1.default.cyan("╚═══════════════════════════════════════════════════════════╝"));
-    console.log(chalk_1.default.gray("  ↑↓ Navigate  •  Enter Select  •  Tab Switch Panel  •  Q Quit\n"));
-}
-function renderList(title, items, selectedIdx, active) {
-    const border = active ? chalk_1.default.cyan : chalk_1.default.gray;
-    console.log(border(`┌─ ${title} ${"─".repeat(Math.max(0, 28 - title.length))}┐`));
-    items.forEach((item, i) => {
-        const isSelected = i === selectedIdx;
-        const icon = isSelected ? (active ? chalk_1.default.cyan("â–¶ ") : chalk_1.default.gray("â–¶ ")) : "  ";
-        const text = isSelected && active ? chalk_1.default.bold.cyan(item) : isSelected ? chalk_1.default.cyan(item) : chalk_1.default.white(item);
-        console.log(border("│") + ` ${icon}${text}`.padEnd(30) + border("│"));
-    });
-    console.log(border(`└${"─".repeat(32)}┘`));
-}
-function renderSecrets(secrets, selectedIdx, active) {
-    const border = active ? chalk_1.default.cyan : chalk_1.default.gray;
-    const COLS = [36, 12, 20];
-    const sep = "─".repeat(COLS[0]) + "┬" + "─".repeat(COLS[1]) + "┬" + "─".repeat(COLS[2]);
-    console.log(border(`┌${sep}┐`));
-    const header = [
-        chalk_1.default.bold.yellow("KEY".padEnd(COLS[0])),
-        chalk_1.default.bold.yellow("VALUE".padEnd(COLS[1])),
-        chalk_1.default.bold.yellow("UPDATED".padEnd(COLS[2]))
-    ].join(border("│"));
-    console.log(border("│") + header + border("│"));
-    console.log(border(`├${sep}┤`));
-    if (secrets.length === 0) {
-        console.log(border("│") + chalk_1.default.gray("  No secrets found.".padEnd(COLS[0] + COLS[1] + COLS[2] + 2)) + border("│"));
-    }
-    else {
-        secrets.forEach((s, i) => {
-            const isSelected = i === selectedIdx;
-            const fmt = (t, w) => {
-                const str = t.length > w - 2 ? t.slice(0, w - 5) + "..." : t;
-                return isSelected && active ? chalk_1.default.bold.bgCyan.black(str.padEnd(w)) : isSelected ? chalk_1.default.cyan(str.padEnd(w)) : str.padEnd(w);
-            };
-            const row = [
-                fmt(s.key, COLS[0]),
-                fmt("*".repeat(8), COLS[1]),
-                fmt(new Date(s.updatedAt).toLocaleDateString(), COLS[2]),
-            ].join(border("│"));
-            console.log(border("│") + row + border("│"));
-        });
-    }
-    console.log(border(`└${"─".repeat(COLS[0])}┴${"─".repeat(COLS[1])}┴${"─".repeat(COLS[2])}┘`));
-}
-function renderStatus(msg) {
-    console.log("\n" + chalk_1.default.gray("  ● ") + chalk_1.default.white(msg));
+const ENV_COLORS = {
+    development: chalk_1.default.green,
+    staging: chalk_1.default.yellow,
+    production: chalk_1.default.red,
+};
+const W = process.stdout.columns || 120;
+// ─── Box Drawing Helpers ─────────────────────────────────────────────────────
+const B = {
+    tl: "╭", tr: "╮", bl: "╰", br: "╯",
+    h: "─", v: "│", x: "┼",
+    lt: "├", rt: "┤", tt: "┬", bt: "┴",
+};
+function hline(width, c = B.h) { return c.repeat(width); }
+function box(title, lines, width, active) {
+    const border = active ? chalk_1.default.cyan : chalk_1.default.hex("#2d3a4d");
+    const inner = width - 2;
+    const pad = (s) => s.padEnd(inner).slice(0, inner);
+    const label = active
+        ? chalk_1.default.bold.cyan(` ${title} `)
+        : chalk_1.default.hex("#4a5568")(` ${title} `);
+    const titleLine = border(B.tl) + label + border(hline(inner - title.length - 2)) + border(B.tr);
+    const body = lines.map(l => border(B.v) + l.slice(0, inner).padEnd(inner) + border(B.v));
+    const foot = border(B.bl) + border(hline(inner)) + border(B.br);
+    return [titleLine, ...body, foot];
 }
-// ─── Main TUI Loop ────────────────────────────────────────────────────────────
+function clear() { process.stdout.write("\x1B[H\x1B[2J\x1B[3J"); }
+// ─── Main TUI ────────────────────────────────────────────────────────────────
 async function runUI() {
-    let screen = "project";
+    let panel = "projects";
     let projects = [];
-    let projectIdx = 0;
+    let projIdx = 0;
     let envIdx = 0;
     let secrets = [];
-    let secretIdx = 0;
-    let status = "Loading projects...";
+    let secIdx = 0;
+    let status = "Loading…";
     let loading = false;
+    let showValues = false;
+    // ── Loaders ────────────────────────────────────────────────────────────────
     async function loadProjects() {
+        status = "Loading projects…";
+        draw();
         try {
-            projects = await api_1.api.getProjects();
+            const raw = await api_1.api.getProjects();
+            projects = Array.isArray(raw) ? raw : raw.projects ?? [];
             status = projects.length > 0
-                ? `Loaded ${projects.length} projects. Use ↑↓ and Enter to navigate.`
-                : "No projects found. Try running `xtra login`.";
+                ? `${projects.length} project(s) found  ·  ↑↓ navigate  ·  Enter to load secrets`
+                : "No projects found. Run `xtra login` first.";
         }
         catch (e) {
-            status = chalk_1.default.red(`Error: ${e.message}`);
+            status = chalk_1.default.red(`✗ ${e.message}`);
         }
         draw();
     }
     async function loadSecrets() {
-        if (!projects[projectIdx])
+        if (!projects[projIdx])
             return;
         loading = true;
-        status = `Fetching secrets for ${projects[projectIdx].name}/${ENVS[envIdx]}...`;
+        status = `Fetching secrets for ${chalk_1.default.cyan(projects[projIdx].name)} / ${ENV_COLORS[ENVS[envIdx]](ENVS[envIdx])}…`;
         draw();
         try {
-            secrets = await api_1.api.getSecrets(projects[projectIdx].id, ENVS[envIdx]);
-            secretIdx = 0;
-            status = `${secrets.length} secret(s) loaded. Tab to switch panel, Q to quit.`;
+            const rc = (0, config_1.getRcConfig)();
+            const branch = rc.branch || "main";
+            const raw = await api_1.api.getSecrets(projects[projIdx].id, ENVS[envIdx], branch);
+            if (raw && typeof raw === "object" && !Array.isArray(raw)) {
+                secrets = Object.entries(raw).map(([key, value]) => ({
+                    id: key, key, value: String(value), updatedAt: new Date().toISOString(),
+                }));
+            }
+            else if (Array.isArray(raw)) {
+                secrets = raw;
+            }
+            else {
+                secrets = [];
+            }
+            secIdx = 0;
+            status = secrets.length > 0
+                ? `${secrets.length} secret(s) ·  V toggle values  ·  Tab switch panel  ·  Q quit`
+                : "No secrets in this environment.";
         }
         catch (e) {
             secrets = [];
-            status = chalk_1.default.red(`Error: ${e.message}`);
+            status = chalk_1.default.red(`✗ ${e.message}`);
         }
         loading = false;
         draw();
     }
+    // ── Render ─────────────────────────────────────────────────────────────────
     function draw() {
         clear();
-        renderHeader();
-        const projectNames = projects.map(p => p.name);
-        renderList("PROJECTS", projectNames.length ? projectNames : ["(loading...)"], projectIdx, screen === "project");
+        // ── Header ──────────────────────────────────────────────────────────────
+        const appTitle = chalk_1.default.bold.cyan("  🔒 XtraSecurity") + chalk_1.default.hex("#4a5a6b")(" — Interactive Secrets Shell");
+        const env = ENV_COLORS[ENVS[envIdx]] ? ENV_COLORS[ENVS[envIdx]](ENVS[envIdx]) : chalk_1.default.white(ENVS[envIdx]);
+        const crumb = projects[projIdx]
+            ? chalk_1.default.hex("#4a5568")(`  ${projects[projIdx].name} `) + chalk_1.default.hex("#4a5568")("/") + chalk_1.default.hex("#4a5568")(` ${ENVS[envIdx]}`)
+            : chalk_1.default.hex("#4a5568")("  No project selected");
         console.log();
-        renderList("ENVIRONMENT", ENVS, envIdx, screen === "env");
+        console.log(appTitle + chalk_1.default.hex("#2d3a4d")("  │") + crumb);
+        console.log(chalk_1.default.hex("#1e293b")(hline(W)));
         console.log();
+        // ── Left column: Projects (22 chr) + Env (22 chr) ─────────────────────
+        const LEFT_W = 26;
+        const RIGHT_W = W - LEFT_W - 3;
+        // Projects panel
+        const projLines = (projects.length > 0 ? projects : [{ id: "", name: "(loading…)" }]).map((p, i) => {
+            const active = i === projIdx;
+            const icon = active ? chalk_1.default.cyan("▶ ") : "  ";
+            const name = active && panel === "projects"
+                ? chalk_1.default.bold.bgCyan.black(` ${p.name} `.padEnd(LEFT_W - 4))
+                : active
+                    ? chalk_1.default.bold.cyan(p.name)
+                    : chalk_1.default.hex("#6b7c93")(p.name);
+            return ` ${icon}${name}`;
+        });
+        const projBox = box("PROJECTS", projLines, LEFT_W, panel === "projects");
+        // Env panel
+        const envLines = ENVS.map((e, i) => {
+            const active = i === envIdx;
+            const icon = active ? chalk_1.default.cyan("▶ ") : "  ";
+            const col = ENV_COLORS[e] ?? chalk_1.default.white;
+            const name = active && panel === "env"
+                ? chalk_1.default.bold.bgCyan.black(` ${e} `.padEnd(LEFT_W - 4))
+                : active
+                    ? col.bold(e)
+                    : chalk_1.default.hex("#6b7c93")(e);
+            return ` ${icon}${name}`;
+        });
+        const envBox = box("ENVIRONMENT", envLines, LEFT_W, panel === "env");
+        // Secrets panel
+        const KW = Math.floor((RIGHT_W - 3) * 0.45);
+        const VW = Math.floor((RIGHT_W - 3) * 0.35);
+        const DW = RIGHT_W - KW - VW - 4;
+        const secHeader = chalk_1.default.bold.hex("#64748b")("KEY".padEnd(KW)) + "  " + chalk_1.default.bold.hex("#64748b")("VALUE".padEnd(VW)) + "  " + chalk_1.default.bold.hex("#64748b")("UPDATED".padEnd(DW));
+        const divider = chalk_1.default.hex("#1e293b")(hline(KW) + "  " + hline(VW) + "  " + hline(DW));
+        let secLines;
         if (loading) {
-            console.log(chalk_1.default.cyan("  â ‹ Loading secrets..."));
+            secLines = [` ${chalk_1.default.cyan("⠋")} Loading…`];
+        }
+        else if (secrets.length === 0) {
+            secLines = [` ${chalk_1.default.hex("#4a5568")("No secrets in this environment.")}`];
         }
         else {
-            renderSecrets(secrets, secretIdx, screen === "secrets");
+            secLines = [" " + secHeader, " " + divider, ...secrets.map((s, i) => {
+                    const sel = i === secIdx && panel === "secrets";
+                    const key = s.key.padEnd(KW).slice(0, KW);
+                    const val = showValues ? s.value.padEnd(VW).slice(0, VW) : "●".repeat(Math.min(8, VW)).padEnd(VW).slice(0, VW);
+                    const dt = new Date(s.updatedAt).toLocaleDateString("en-GB", { day: "2-digit", month: "short" }).padEnd(DW);
+                    if (sel) {
+                        return chalk_1.default.bold.bgHex("#0e243e")(" ▶ " + chalk_1.default.cyan(key) + "  " + chalk_1.default.greenBright(val) + "  " + chalk_1.default.hex("#4a9eff")(dt) + " ");
+                    }
+                    return "   " + chalk_1.default.white(key) + "  " + chalk_1.default.hex("#4a5568")(val) + "  " + chalk_1.default.hex("#374151")(dt);
+                })];
+        }
+        const secBox = box(`SECRETS (${secrets.length})`, secLines, RIGHT_W, panel === "secrets");
+        // ── Print side-by-side ────────────────────────────────────────────────
+        const leftPanel = [...projBox, ...["", ""], ...envBox];
+        const maxRows = Math.max(leftPanel.length, secBox.length);
+        const gap = chalk_1.default.hex("#1e293b")("  │  ");
+        for (let r = 0; r < maxRows; r++) {
+            const l = leftPanel[r] ?? " ".repeat(LEFT_W);
+            const rr = secBox[r] ?? " ".repeat(RIGHT_W);
+            console.log(l + gap + rr);
         }
-        renderStatus(status);
+        // ── Footer ───────────────────────────────────────────────────────────
+        console.log();
+        console.log(chalk_1.default.hex("#1e293b")(hline(W)));
+        const keys = [
+            [chalk_1.default.hex("#64748b")("↑↓"), "Navigate"],
+            [chalk_1.default.hex("#64748b")("Enter"), "Select"],
+            [chalk_1.default.hex("#64748b")("Tab"), "Switch Panel"],
+            [chalk_1.default.hex("#64748b")("V"), showValues ? chalk_1.default.green("Hide values") : chalk_1.default.yellow("Show values")],
+            [chalk_1.default.hex("#64748b")("Q"), "Quit"],
+        ].map(([k, a]) => `${k} ${chalk_1.default.hex("#374151")(a)}`).join(chalk_1.default.hex("#1e293b")("  ·  "));
+        console.log("  " + keys);
+        console.log();
+        console.log("  " + (status || ""));
     }
-    // Set up raw mode for keyboard input
+    // ── Keyboard ──────────────────────────────────────────────────────────────
     readline.emitKeypressEvents(process.stdin);
     if (process.stdin.isTTY)
         process.stdin.setRawMode(true);
-    process.stdin.on("keypress", async (str, key) => {
+    process.stdin.on("keypress", async (_str, key) => {
         if (!key)
             return;
         // Quit
-        if (str === "q" || str === "Q" || (key.ctrl && key.name === "c")) {
+        if (key.name === "q" || (key.ctrl && key.name === "c")) {
             if (process.stdin.isTTY)
                 process.stdin.setRawMode(false);
             clear();
-            console.log(chalk_1.default.cyan("Goodbye! 👋"));
+            console.log(chalk_1.default.cyan("  Goodbye! 👋\n"));
             process.exit(0);
         }
-        // Tab to cycle panels
+        // Toggle secret values with V
+        if (key.name === "v") {
+            showValues = !showValues;
+            draw();
+            return;
+        }
+        // Tab cycle panels
         if (key.name === "tab") {
-            screen = screen === "project" ? "env" : screen === "env" ? "secrets" : "project";
+            panel = panel === "projects" ? "env" : panel === "env" ? "secrets" : "projects";
             draw();
             return;
         }
-        // Navigation based on active panel
-        if (screen === "project") {
+        if (panel === "projects") {
             if (key.name === "up")
-                projectIdx = Math.max(0, projectIdx - 1);
+                projIdx = Math.max(0, projIdx - 1);
             if (key.name === "down")
-                projectIdx = Math.min(projects.length - 1, projectIdx + 1);
+                projIdx = Math.min(projects.length - 1, projIdx + 1);
             if (key.name === "return") {
-                screen = "env";
-                await loadSecrets();
+                panel = "env";
+                draw();
                 return;
             }
         }
-        if (screen === "env") {
+        if (panel === "env") {
             if (key.name === "up")
                 envIdx = Math.max(0, envIdx - 1);
             if (key.name === "down")
                 envIdx = Math.min(ENVS.length - 1, envIdx + 1);
             if (key.name === "return") {
-                screen = "secrets";
+                panel = "secrets";
                 await loadSecrets();
                 return;
             }
         }
-        if (screen === "secrets") {
+        if (panel === "secrets") {
             if (key.name === "up")
-                secretIdx = Math.max(0, secretIdx - 1);
+                secIdx = Math.max(0, secIdx - 1);
             if (key.name === "down")
-                secretIdx = Math.min(secrets.length - 1, secretIdx + 1);
+                secIdx = Math.min(secrets.length - 1, secIdx + 1);
         }
         draw();
     });
+    // ── Boot ──────────────────────────────────────────────────────────────────
     await loadProjects();
     if (projects.length > 0)
         await loadSecrets();
     else
         draw();
 }
-// ─── Commander Command ────────────────────────────────────────────────────────
+// ─── Commander ───────────────────────────────────────────────────────────────
 exports.uiCommand = new commander_1.Command("ui")
-    .description("Launch interactive TUI secrets dashboard (arrow keys to navigate, Q to quit)")
-    .action(async () => {
-    await runUI();
-});
+    .description("Launch interactive TUI secrets dashboard (arrow keys, Tab, Q to quit)")
+    .action(async () => { await runUI(); });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xtra-cli",
-    "version": "0.2.1",
+    "version": "0.2.4",
     "description": "CLI for XtraSecurity Platform",
     "main": "dist/index.js",
     "bin": {