@tothalex/nulljs 0.0.60 → 0.0.62

package/dist/cli.js

@@ -12,93 +12,37 @@ var __export = (target, all) => {
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = import.meta.require;
-// ../../packages/api/types/index.ts
-var init_types = () => {};
 
-// ../../packages/api/actions/client.ts
-var buildUrl = (path, options) => {
-  let fullPath = options?.url ? `${options.url}${path}` : path;
-  if (options?.query) {
-    const params = [];
-    for (const [key, value] of Object.entries(options.query)) {
-      if (value === undefined || value === null)
-        continue;
-      if (Array.isArray(value)) {
-        params.push(`${key}=${value.join(",")}`);
-      } else {
-        params.push(`${key}=${encodeURIComponent(String(value))}`);
-      }
-    }
-    const queryString = params.join("&");
-    if (queryString) {
-      fullPath = `${fullPath}?${queryString}`;
+// src/lib/paths.ts
+import { existsSync } from "fs";
+import { join, dirname } from "path";
+var findProjectRoot = (startPath = process.cwd()) => {
+  let currentPath = startPath;
+  while (currentPath !== dirname(currentPath)) {
+    if (existsSync(join(currentPath, "package.json"))) {
+      return currentPath;
     }
+    currentPath = dirname(currentPath);
   }
-  return fullPath;
-}, apiGet = async (path, options) => {
-  const url = options?.url ? `${options.url}${path}` : path;
-  const headers = {};
-  if (options?.publicKey) {
-    headers["x-public-key"] = options.publicKey;
-  }
-  const response = await fetch(url, { headers });
-  if (!response.ok) {
-    const message = await response.text().catch(() => "");
-    throw new Error(`HTTP error! status: ${response.status}${message ? ` message: ${message}` : ""}`);
-  }
-  return response.json();
-};
-
-// ../../packages/api/actions/deployments.ts
-var init_deployments = () => {};
-
-// ../../packages/api/actions/invocations.ts
-var init_invocations = () => {};
-
-// ../../packages/api/actions/logs.ts
-var getSystemLogs = async (public_key, query, url) => {
-  const path = buildUrl("/api/system/logs", { url, query });
-  return apiGet(path, { publicKey: public_key });
-}, searchDeploymentLogs = async (public_key, props, url) => {
-  const path = buildUrl("/api/logs/search", { url, query: props });
-  return apiGet(path, { publicKey: public_key });
+  return startPath;
+}, getCloudPath = () => {
+  return join(findProjectRoot(), ".nulljs");
 };
-var init_logs = () => {};
-
-// ../../packages/api/actions/assets.ts
-var init_assets = () => {};
-
-// ../../packages/api/actions/activity.ts
-var init_activity = () => {};
-
-// ../../packages/api/actions/index.ts
-var init_actions = __esm(() => {
-  init_deployments();
-  init_invocations();
-  init_logs();
-  init_assets();
-  init_activity();
-});
-
-// ../../packages/api/index.ts
-var init_api = __esm(() => {
-  init_types();
-  init_actions();
-});
+var init_paths = () => {};
 
 // src/config/index.ts
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
-import { join } from "path";
+import { readFileSync, writeFileSync, existsSync as existsSync2, mkdirSync, readdirSync, rmSync } from "fs";
+import { join as join2 } from "path";
 import chalk from "chalk";
-var getLocalConfigDir = () => join(process.cwd(), ".nulljs"), getLocalConfigFile = () => join(getLocalConfigDir(), "config.json"), ensureLocalConfigDir = () => {
+var getLocalConfigDir = () => getCloudPath(), getLocalConfigFile = () => join2(getLocalConfigDir(), "config.json"), ensureLocalConfigDir = () => {
   const localDir = getLocalConfigDir();
-  if (!existsSync(localDir)) {
+  if (!existsSync2(localDir)) {
     mkdirSync(localDir, { recursive: true });
   }
 }, readConfigStore = () => {
   try {
     const localFile = getLocalConfigFile();
-    if (!existsSync(localFile)) {
+    if (!existsSync2(localFile)) {
       return null;
     }
     const data = readFileSync(localFile, "utf-8");
@@ -202,46 +146,59 @@ var getLocalConfigDir = () => join(process.cwd(), ".nulljs"), getLocalConfigFile
 }, loadPrivateKey = async (config) => {
   const privateKeyBytes = Uint8Array.from(atob(config.key.private), (c) => c.charCodeAt(0));
   return crypto.subtle.importKey("pkcs8", privateKeyBytes, { name: "Ed25519", namedCurve: "Ed25519" }, false, ["sign"]);
+}, cleanLocalData = () => {
+  const localDir = getLocalConfigDir();
+  const deleted = [];
+  const preserved = [];
+  if (!existsSync2(localDir)) {
+    return { deleted, preserved };
+  }
+  const entries = readdirSync(localDir);
+  for (const entry of entries) {
+    if (entry === "config.json") {
+      preserved.push(entry);
+      continue;
+    }
+    const entryPath = join2(localDir, entry);
+    try {
+      rmSync(entryPath, { recursive: true, force: true });
+      deleted.push(entry);
+    } catch {}
+  }
+  return { deleted, preserved };
 };
-var init_config = () => {};
+var init_config = __esm(() => {
+  init_paths();
+});
 
 // src/lib/server.ts
-import { existsSync as existsSync2, mkdirSync as mkdirSync2, realpathSync } from "fs";
-import { join as join2, dirname } from "path";
+import { existsSync as existsSync3, mkdirSync as mkdirSync2, realpathSync } from "fs";
+import { join as join3, dirname as dirname2 } from "path";
 import chalk2 from "chalk";
 var CLI_DIR, PLATFORMS, getPlatformKey = () => {
   return `${process.platform}-${process.arch}`;
-}, findProjectRoot = (startPath = process.cwd()) => {
-  let currentPath = startPath;
-  while (currentPath !== dirname(currentPath)) {
-    if (existsSync2(join2(currentPath, "package.json"))) {
-      return currentPath;
-    }
-    currentPath = dirname(currentPath);
-  }
-  return startPath;
 }, findMonorepoRoot = (startPath = process.cwd()) => {
   let currentPath = startPath;
-  while (currentPath !== dirname(currentPath)) {
-    if (existsSync2(join2(currentPath, "Cargo.toml")) && existsSync2(join2(currentPath, "package.json"))) {
+  while (currentPath !== dirname2(currentPath)) {
+    if (existsSync3(join3(currentPath, "Cargo.toml")) && existsSync3(join3(currentPath, "package.json"))) {
       return currentPath;
     }
-    currentPath = dirname(currentPath);
+    currentPath = dirname2(currentPath);
   }
   return null;
 }, getLocalBinaryPath = () => {
   const envBinary = process.env.NULLJS_SERVER_BINARY;
-  if (envBinary && existsSync2(envBinary)) {
+  if (envBinary && existsSync3(envBinary)) {
     return { path: envBinary, source: "local-env" };
   }
   const monorepoRoot = findMonorepoRoot() || findMonorepoRoot(CLI_DIR);
   if (monorepoRoot) {
-    const debugBinary = join2(monorepoRoot, "target", "debug", "server");
-    if (existsSync2(debugBinary)) {
+    const debugBinary = join3(monorepoRoot, "target", "debug", "server");
+    if (existsSync3(debugBinary)) {
       return { path: debugBinary, source: "local-debug" };
     }
-    const releaseBinary = join2(monorepoRoot, "target", "release", "server");
-    if (existsSync2(releaseBinary)) {
+    const releaseBinary = join3(monorepoRoot, "target", "release", "server");
+    if (existsSync3(releaseBinary)) {
       return { path: releaseBinary, source: "local-release" };
     }
   }
@@ -262,10 +219,9 @@ var CLI_DIR, PLATFORMS, getPlatformKey = () => {
   const args = ["--dev"];
   args.push("--api-port", "3000");
   args.push("--gateway-port", "3001");
-  const projectRoot = findProjectRoot();
-  const cloudPath = join2(projectRoot, ".nulljs");
+  const cloudPath = getCloudPath();
   args.push("--cloud-path", cloudPath);
-  if (!existsSync2(cloudPath)) {
+  if (!existsSync3(cloudPath)) {
     mkdirSync2(cloudPath, { recursive: true });
   }
   args.push("--public-key", devConfig.key.public);
@@ -307,7 +263,8 @@ var CLI_DIR, PLATFORMS, getPlatformKey = () => {
 };
 var init_server = __esm(() => {
   init_config();
-  CLI_DIR = dirname(realpathSync(import.meta.dir));
+  init_paths();
+  CLI_DIR = dirname2(realpathSync(import.meta.dir));
   PLATFORMS = {
     "linux-x64": "@tothalex/nulljs-linux-x64",
     "linux-arm64": "@tothalex/nulljs-linux-arm64",
@@ -515,9 +472,9 @@ var init_bundle = __esm(() => {
 });
 
 // ../../packages/api/actions/http.ts
-import { mkdtempSync, writeFileSync as writeFileSync2, rmSync } from "fs";
+import { mkdtempSync, writeFileSync as writeFileSync2, rmSync as rmSync2 } from "fs";
 import { tmpdir } from "os";
-import { join as join3 } from "path";
+import { join as join4 } from "path";
 var {$ } = globalThis.Bun;
 var parseCurlResponse = (result) => {
   const lines = result.trim().split(`
@@ -558,15 +515,15 @@ var parseCurlResponse = (result) => {
   const url = options?.baseUrl ? `${options.baseUrl}${path}` : path;
   const headers = options?.headers || {};
   if (options?.useCurl) {
-    const tempDir = mkdtempSync(join3(tmpdir(), "nulljs-http-"));
-    const bodyFile = join3(tempDir, "body.json");
+    const tempDir = mkdtempSync(join4(tmpdir(), "nulljs-http-"));
+    const bodyFile = join4(tempDir, "body.json");
     try {
       writeFileSync2(bodyFile, body);
       const headerFlags = buildHeaderFlags(headers);
       const result = await $`curl -s -w '\n%{http_code}' -X POST ${headerFlags} -d @${bodyFile} ${url}`.text();
       return parseCurlResponse(result);
     } finally {
-      rmSync(tempDir, { recursive: true, force: true });
+      rmSync2(tempDir, { recursive: true, force: true });
     }
   }
   const response = await fetch(url, {
@@ -583,11 +540,11 @@ var parseCurlResponse = (result) => {
   const url = options?.baseUrl ? `${options.baseUrl}${path}` : path;
   const headers = options?.headers || {};
   if (options?.useCurl) {
-    const tempDir = mkdtempSync(join3(tmpdir(), "nulljs-http-"));
+    const tempDir = mkdtempSync(join4(tmpdir(), "nulljs-http-"));
     try {
       const formParts = [];
       for (const file of files) {
-        const filePath = join3(tempDir, file.fileName);
+        const filePath = join4(tempDir, file.fileName);
         writeFileSync2(filePath, file.content);
         formParts.push("-F");
         formParts.push(`${file.fileName}=@${filePath};type=${file.mimeType}`);
@@ -596,7 +553,7 @@ var parseCurlResponse = (result) => {
       const result = await $`curl -s -w '\n%{http_code}' -X POST ${headerFlags} ${formParts} ${url}`.text();
       return parseCurlResponse(result);
     } finally {
-      rmSync(tempDir, { recursive: true, force: true });
+      rmSync2(tempDir, { recursive: true, force: true });
     }
   }
   const form = new FormData;
@@ -629,10 +586,10 @@ var getMimeType = (fileName) => {
   if (fileName.endsWith(".json"))
     return "application/json";
   return "application/octet-stream";
-}, assetsToFileData = (assets3) => {
+}, assetsToFileData = (assets) => {
   const files = [];
   const blobs = [];
-  for (const asset of assets3) {
+  for (const asset of assets) {
     const mimeType = getMimeType(asset.fileName);
     const buffer = Buffer.from(asset.code);
     files.push({
@@ -652,10 +609,10 @@ var getMimeType = (fileName) => {
   const dataString = sortedBlobs.map((b) => `${b.fileName}:${b.size}:${b.type}`).join("|");
   const sign = await crypto.subtle.sign("Ed25519", privateKey, Buffer.from(dataString));
   return btoa(String.fromCharCode(...new Uint8Array(sign)));
-}, createFunctionDeployment = async (deployment2, options) => {
-  const handler = deployment2.assets.find((asset) => asset.fileName === "handler.js");
+}, createFunctionDeployment = async (deployment, options) => {
+  const handler = deployment.assets.find((asset) => asset.fileName === "handler.js");
   if (!handler) {
-    throw new Error(`Handler not found for ${deployment2.name}`);
+    throw new Error(`Handler not found for ${deployment.name}`);
   }
   const { files, blobs } = assetsToFileData([handler]);
   const signature = await createSignature(blobs, options.privateKey);
@@ -671,8 +628,8 @@ var getMimeType = (fileName) => {
   if (!result.ok) {
     throw new Error(`Deployment failed (${result.status}): ${result.body}`);
   }
-}, createReactDeployment = async (deployment2, options) => {
-  const { files, blobs } = assetsToFileData(deployment2.assets);
+}, createReactDeployment = async (deployment, options) => {
+  const { files, blobs } = assetsToFileData(deployment.assets);
   const signature = await createSignature(blobs, options.privateKey);
   const baseUrl = options.url || "";
   const path = "/api/deployment/react";
@@ -722,21 +679,21 @@ var deployedHashes, clearDeployCache = () => {
 }, deployReact = async (filePath, privateKey, apiUrl, useCurl) => {
   const fileName = basename2(filePath);
   const result = await build(spaClientConfig(filePath));
-  const assets3 = [];
+  const assets = [];
   for (const output of result.output) {
     if (output.type === "chunk") {
-      assets3.push({ fileName: output.fileName, code: output.code });
+      assets.push({ fileName: output.fileName, code: output.code });
     } else if (output.type === "asset" && typeof output.source === "string") {
-      assets3.push({ fileName: output.fileName, code: output.source });
+      assets.push({ fileName: output.fileName, code: output.source });
     }
   }
-  const combinedCode = assets3.map((a) => a.code).join("");
+  const combinedCode = assets.map((a) => a.code).join("");
   const hash = hashCode(combinedCode);
   const lastHash = deployedHashes.get(filePath);
   if (lastHash === hash) {
     return { deployed: false, skipped: true };
   }
-  await createReactDeployment({ name: fileName, assets: assets3 }, { privateKey, url: apiUrl, useCurl });
+  await createReactDeployment({ name: fileName, assets }, { privateKey, url: apiUrl, useCurl });
   deployedHashes.set(filePath, hash);
   return { deployed: true, skipped: false };
 };
@@ -747,21 +704,21 @@ var init_deploy2 = __esm(() => {
 });
 
 // src/lib/watcher.ts
-import { watch, existsSync as existsSync3 } from "fs";
+import { watch, existsSync as existsSync4 } from "fs";
 import { readdir } from "fs/promises";
-import { join as join4 } from "path";
+import { join as join5 } from "path";
 import { build as build2 } from "vite";
 var FUNCTION_DIRS, deployedHashes2, hashCode2 = (code) => {
   return Bun.hash(code).toString(16);
 }, findFunctionEntries = async (functionsPath) => {
   const entries = [];
   for (const dir of FUNCTION_DIRS) {
-    const dirPath = join4(functionsPath, dir);
+    const dirPath = join5(functionsPath, dir);
     try {
       const items = await readdir(dirPath, { withFileTypes: true });
       for (const item of items) {
         if (item.isFile() && (item.name.endsWith(".ts") || item.name.endsWith(".tsx"))) {
-          const fullPath = join4(dirPath, item.name);
+          const fullPath = join5(dirPath, item.name);
           const name = `${dir}/${item.name.replace(/\.tsx?$/, "")}`;
           entries.push({
             name,
@@ -781,7 +738,7 @@ var FUNCTION_DIRS, deployedHashes2, hashCode2 = (code) => {
       console.error('No local configuration found. Run "nulljs dev" first.');
     return () => {};
   }
-  const functionsPath = join4(srcPath, "function");
+  const functionsPath = join5(srcPath, "function");
   let entries = await findFunctionEntries(functionsPath);
   let viteWatcher = null;
   let isRestarting = false;
@@ -852,8 +809,8 @@ var FUNCTION_DIRS, deployedHashes2, hashCode2 = (code) => {
   viteWatcher = await startViteWatcher();
   const dirWatchers = [];
   for (const dir of FUNCTION_DIRS) {
-    const dirPath = join4(functionsPath, dir);
-    if (!existsSync3(dirPath))
+    const dirPath = join5(functionsPath, dir);
+    if (!existsSync4(dirPath))
       continue;
     try {
       const watcher = watch(dirPath, async (eventType, filename) => {
@@ -861,10 +818,10 @@ var FUNCTION_DIRS, deployedHashes2, hashCode2 = (code) => {
           return;
         if (!filename.endsWith(".ts") && !filename.endsWith(".tsx"))
           return;
-        const fullPath = join4(dirPath, filename);
+        const fullPath = join5(dirPath, filename);
         const entryName = `${dir}/${filename.replace(/\.tsx?$/, "")}`;
         const existingEntry = entries.find((e) => e.name === entryName);
-        const fileExists = existsSync3(fullPath);
+        const fileExists = existsSync4(fullPath);
         if (!existingEntry && fileExists || existingEntry && !fileExists) {
           await restartViteWatcher();
         }
@@ -881,23 +838,25 @@ var FUNCTION_DIRS, deployedHashes2, hashCode2 = (code) => {
     }
   };
 }, forceDeployAll = async (srcPath, options = {}) => {
-  const { onDeploy, onComplete } = options;
+  const { onStart, onDeploy, onComplete } = options;
   const config = readLocalConfig();
   if (!config) {
     throw new Error('No local configuration found. Run "nulljs dev" first.');
   }
   const privateKey = await loadPrivateKey(config);
   deployedHashes2.clear();
-  const functionsPath = join4(srcPath, "function");
+  const functionsPath = join5(srcPath, "function");
   const entries = await findFunctionEntries(functionsPath);
-  const reactEntry = join4(srcPath, "index.tsx");
-  const hasReact = existsSync3(reactEntry);
-  let total = entries.length + (hasReact ? 1 : 0);
+  const reactEntry = join5(srcPath, "index.tsx");
+  const hasReact = existsSync4(reactEntry);
+  const total = entries.length + (hasReact ? 1 : 0);
   let successful = 0;
   let failed = 0;
+  let completed = 0;
   const { deployFunction: deployFunction2, deployReact: deployReact2, clearDeployCache: clearDeployCache2 } = await Promise.resolve().then(() => (init_deploy2(), exports_deploy));
   clearDeployCache2();
   for (const entry of entries) {
+    onStart?.(entry.name, completed, total);
     try {
       await deployFunction2(entry.path, privateKey, config.api);
       successful++;
@@ -906,9 +865,11 @@ var FUNCTION_DIRS, deployedHashes2, hashCode2 = (code) => {
       failed++;
       onDeploy?.(entry.name, false, error instanceof Error ? error.message : String(error));
     }
+    completed++;
   }
   if (hasReact) {
     const fileName = "index.tsx";
+    onStart?.(fileName, completed, total);
     try {
       await deployReact2(reactEntry, privateKey, config.api);
       successful++;
@@ -917,6 +878,7 @@ var FUNCTION_DIRS, deployedHashes2, hashCode2 = (code) => {
       failed++;
       onDeploy?.(fileName, false, error instanceof Error ? error.message : String(error));
     }
+    completed++;
   }
   onComplete?.(total, successful, failed);
 };
@@ -930,11 +892,11 @@ var init_watcher = __esm(() => {
 
 // src/lib/vite.ts
 import { createServer } from "vite";
-import { dirname as dirname2, resolve, basename as basename3 } from "path";
+import { dirname as dirname3, resolve, basename as basename3 } from "path";
 import react3 from "@vitejs/plugin-react";
 import tailwindcss2 from "@tailwindcss/vite";
 import { writeFile, unlink } from "fs/promises";
-import { existsSync as existsSync4 } from "fs";
+import { existsSync as existsSync5 } from "fs";
 var VITE_PORT = 5173, GATEWAY_PORT = 3001, createViteLogger = (onLog) => {
   return {
     info: (msg) => onLog?.(msg, "info"),
@@ -978,10 +940,10 @@ var VITE_PORT = 5173, GATEWAY_PORT = 3001, createViteLogger = (onLog) => {
 </html>`;
 }, startViteServer = async (options) => {
   const indexTsxPath = resolve(options.srcDir, "index.tsx");
-  if (!existsSync4(indexTsxPath)) {
+  if (!existsSync5(indexTsxPath)) {
     return null;
   }
-  const projectDir = dirname2(options.srcDir);
+  const projectDir = dirname3(options.srcDir);
   const tempIndexPath = resolve(projectDir, "index.html");
   try {
     const indexHtml = createTempIndexHtml(indexTsxPath, projectDir);
@@ -1022,344 +984,641 @@ var VITE_PORT = 5173, GATEWAY_PORT = 3001, createViteLogger = (onLog) => {
 };
 var init_vite = () => {};
 
-// src/components/DeploymentLogsPane.tsx
-import { jsxDEV } from "@opentui/react/jsx-dev-runtime";
-var getLevelColor = (level) => {
-  switch (level.toLowerCase()) {
-    case "error":
-      return "red";
-    case "warn":
-    case "warning":
-      return "yellow";
-    case "info":
-      return "cyan";
-    case "debug":
-      return "gray";
-    default:
-      return "white";
-  }
+// src/ui/utils/logs.ts
+var LOG_LEVEL_COLORS, SYSTEM_LOG_LEVEL_COLORS, getLevelColor = (level, variant = "deployment") => {
+  const colors = variant === "system" ? SYSTEM_LOG_LEVEL_COLORS : LOG_LEVEL_COLORS;
+  return colors[level.toLowerCase()] || "white";
 }, sanitizeMessage = (message) => {
   return message.replace(/\x1b\[[0-9;]*m/g, "").replace(/[\r\n]+/g, " ").replace(/\s+/g, " ").trim();
-}, DeploymentLogsPane = (props) => {
-  if (props.loading && props.logs.length === 0) {
-    return /* @__PURE__ */ jsxDEV("box", {
-      flexDirection: "column",
-      padding: 1,
-      children: /* @__PURE__ */ jsxDEV("text", {
-        children: "Loading deployment logs..."
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  if (!props.loading && props.logs.length === 0) {
-    return /* @__PURE__ */ jsxDEV("box", {
-      flexDirection: "column",
-      padding: 1,
-      children: /* @__PURE__ */ jsxDEV("text", {
-        children: "No deployment logs found"
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
+};
+var init_logs = __esm(() => {
+  LOG_LEVEL_COLORS = {
+    error: "red",
+    warn: "yellow",
+    warning: "yellow",
+    info: "cyan",
+    debug: "gray",
+    trace: "gray"
+  };
+  SYSTEM_LOG_LEVEL_COLORS = {
+    ...LOG_LEVEL_COLORS,
+    info: "green"
+  };
+});
+
+// src/ui/utils/clipboard.ts
+import { exec } from "child_process";
+var copyToClipboard = (text) => {
+  return new Promise((resolve2, reject) => {
+    const proc = exec("pbcopy", (err) => {
+      if (err)
+        reject(err);
+      else
+        resolve2();
+    });
+    proc.stdin?.write(text);
+    proc.stdin?.end();
+  });
+};
+var init_clipboard = () => {};
+
+// src/ui/utils/formatting.ts
+var getBinarySourceLabel = (source) => {
+  switch (source) {
+    case "local-debug":
+      return "local debug";
+    case "local-release":
+      return "local release";
+    case "local-env":
+      return "env";
+    case "npm":
+      return "npm";
+    default:
+      return source;
   }
-  const logsInOrder = [...props.logs].reverse();
-  return /* @__PURE__ */ jsxDEV("scrollbox", {
-    focused: true,
-    stickyStart: props.autoScroll ? "bottom" : "top",
-    stickyScroll: props.autoScroll,
-    children: logsInOrder.map((log) => {
-      const time = new Date(log.time).toLocaleTimeString();
-      const timestamp = `[${time}]`;
-      const level = log.level.toUpperCase();
-      return /* @__PURE__ */ jsxDEV("box", {
-        flexDirection: "row",
-        children: /* @__PURE__ */ jsxDEV("text", {
+};
+
+// src/ui/utils/index.ts
+var init_utils = __esm(() => {
+  init_logs();
+  init_clipboard();
+});
+
+// src/ui/components/layout/Header.tsx
+import { jsxDEV } from "@opentui/react/jsx-dev-runtime";
+var Header = (props) => {
+  const { activeTab, functionCount, viteRunning, isDeploying, binarySource } = props;
+  return /* @__PURE__ */ jsxDEV("box", {
+    flexDirection: "column",
+    children: /* @__PURE__ */ jsxDEV("box", {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsxDEV("box", {
+          flexDirection: "row",
+          gap: 2,
           children: [
-            /* @__PURE__ */ jsxDEV("span", {
-              fg: "gray",
-              children: timestamp
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("span", {
-              fg: getLevelColor(log.level),
-              children: ` ${level} `
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("span", {
-              fg: "blue",
-              children: `(${log.deployment_name})`
+            /* @__PURE__ */ jsxDEV("text", {
+              children: /* @__PURE__ */ jsxDEV("span", {
+                fg: activeTab === "system" ? "cyan" : "gray",
+                children: "[1] System Logs"
+              }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("span", {
-              fg: "cyan",
-              children: ` ${log.trigger} `
+            /* @__PURE__ */ jsxDEV("text", {
+              children: /* @__PURE__ */ jsxDEV("span", {
+                fg: "gray",
+                children: " | "
+              }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV("span", {
-              children: sanitizeMessage(log.message)
+            /* @__PURE__ */ jsxDEV("text", {
+              children: /* @__PURE__ */ jsxDEV("span", {
+                fg: activeTab === "deployment" ? "cyan" : "gray",
+                children: "[2] Deployment Logs"
+              }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
           ]
-        }, undefined, true, undefined, this)
-      }, log.id, false, undefined, this);
-    })
-  }, `${props.autoScroll}-${props.jumpTrigger}`, false, undefined, this);
-};
-var init_DeploymentLogsPane = () => {};
-
-// src/components/SystemLogsPane.tsx
-import { jsxDEV as jsxDEV2 } from "@opentui/react/jsx-dev-runtime";
-var getLevelColor2 = (level) => {
-  switch (level.toLowerCase()) {
-    case "error":
-      return "red";
-    case "warn":
-    case "warning":
-      return "yellow";
-    case "info":
-      return "green";
-    case "debug":
-    case "trace":
-      return "gray";
-    default:
-      return "white";
-  }
-}, sanitizeMessage2 = (message) => {
-  return message.replace(/\x1b\[[0-9;]*m/g, "").replace(/[\r\n]+/g, " ").replace(/\s+/g, " ").trim();
-}, SystemLogsPane = (props) => {
-  if (props.loading && props.logs.length === 0) {
-    return /* @__PURE__ */ jsxDEV2("box", {
-      flexDirection: "column",
-      padding: 1,
-      children: /* @__PURE__ */ jsxDEV2("text", {
-        children: "Loading system logs..."
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  if (!props.loading && props.logs.length === 0) {
-    return /* @__PURE__ */ jsxDEV2("box", {
-      flexDirection: "column",
-      padding: 1,
-      children: /* @__PURE__ */ jsxDEV2("text", {
-        children: "No system logs found"
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this);
-  }
-  const logsInOrder = [...props.logs].reverse();
-  return /* @__PURE__ */ jsxDEV2("scrollbox", {
-    focused: true,
-    stickyStart: props.autoScroll ? "bottom" : "top",
-    stickyScroll: props.autoScroll,
-    children: logsInOrder.map((log) => {
-      const time = new Date(log.timestamp).toLocaleTimeString();
-      const timestamp = `[${time}]`;
-      const level = log.level.toUpperCase();
-      return /* @__PURE__ */ jsxDEV2("box", {
-        flexDirection: "row",
-        children: /* @__PURE__ */ jsxDEV2("text", {
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV("box", {
+          flexDirection: "row",
+          gap: 2,
           children: [
-            /* @__PURE__ */ jsxDEV2("span", {
-              fg: "gray",
-              children: timestamp
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV2("span", {
-              fg: getLevelColor2(log.level),
-              children: ` ${level} `
+            isDeploying && /* @__PURE__ */ jsxDEV("text", {
+              children: /* @__PURE__ */ jsxDEV("span", {
+                fg: "yellow",
+                children: "deploying..."
+              }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV2("span", {
-              children: sanitizeMessage2(log.message)
+            /* @__PURE__ */ jsxDEV("text", {
+              children: /* @__PURE__ */ jsxDEV("span", {
+                fg: "gray",
+                children: [
+                  functionCount,
+                  " functions | vite ",
+                  viteRunning ? "running" : "stopped",
+                  " |",
+                  " ",
+                  getBinarySourceLabel(binarySource),
+                  " | ?=help"
+                ]
+              }, undefined, true, undefined, this)
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this)
-      }, log.id, false, undefined, this);
-    })
-  }, `${props.autoScroll}-${props.jumpTrigger}`, false, undefined, this);
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 };
-var init_SystemLogsPane = () => {};
+var init_Header = __esm(() => {
+  init_utils();
+});
 
-// src/components/DeployAnimation.tsx
-import { useEffect, useState, useRef } from "react";
-import { jsxDEV as jsxDEV3 } from "@opentui/react/jsx-dev-runtime";
-var DeployAnimation = (props) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [progress, setProgress] = useState(0);
-  const intervalRef = useRef(null);
-  const completedRef = useRef(false);
-  const duration = 400;
-  const frameRate = 16;
-  useEffect(() => {
-    if (props.deployed.length === 0) {
-      props.onComplete();
-      return;
-    }
-    if (completedRef.current) {
-      return;
-    }
-    setProgress(0);
-    const startTime = Date.now();
-    intervalRef.current = setInterval(() => {
-      const elapsed = Date.now() - startTime;
-      const newProgress = Math.min(100, elapsed / duration * 100);
-      setProgress(newProgress);
-      if (newProgress >= 100) {
-        if (intervalRef.current) {
-          clearInterval(intervalRef.current);
-          intervalRef.current = null;
-        }
-        setTimeout(() => {
-          if (currentIndex >= props.deployed.length - 1) {
-            completedRef.current = true;
-            props.onComplete();
-          } else {
-            setCurrentIndex((prev) => prev + 1);
-          }
-        }, 150);
-      }
-    }, frameRate);
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [currentIndex, props.deployed.length, props.onComplete]);
-  const current = props.deployed[currentIndex];
-  if (props.deployed.length === 0 || !current || completedRef.current) {
-    return null;
-  }
-  const barWidth = 8;
-  const filled = Math.round(progress / 100 * barWidth);
-  const empty = barWidth - filled;
-  const bar = "\u2501".repeat(filled) + "\u2500".repeat(empty);
-  return /* @__PURE__ */ jsxDEV3("box", {
+// src/ui/constants/colors.ts
+var STATUS_COLORS, DEPLOY_COLORS;
+var init_colors = __esm(() => {
+  STATUS_COLORS = {
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#3b82f6"
+  };
+  DEPLOY_COLORS = {
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    progress: "#3b82f6",
+    muted: "#666"
+  };
+});
+
+// src/ui/constants/keybindings.ts
+var KEYBINDINGS, KEYBINDING_DESCRIPTIONS;
+var init_keybindings = __esm(() => {
+  KEYBINDINGS = {
+    "1": { type: "NAVIGATE", tab: "system" },
+    "2": { type: "NAVIGATE", tab: "deployment" },
+    "\t": { type: "CYCLE_TAB" },
+    h: { type: "NAVIGATE", tab: "system" },
+    l: { type: "NAVIGATE", tab: "deployment" },
+    g: { type: "SCROLL", to: "top" },
+    G: { type: "SCROLL", to: "bottom" },
+    "?": { type: "TOGGLE_HELP" },
+    "\x1B": { type: "CLOSE_MODAL" },
+    d: { type: "DEPLOY" },
+    y: { type: "YANK" },
+    x: { type: "CLEAN" }
+  };
+  KEYBINDING_DESCRIPTIONS = [
+    { section: "Navigation", bindings: [
+      { keys: "1/2", description: "Switch tabs" },
+      { keys: "h/l", description: "Previous/next tab" },
+      { keys: "Tab", description: "Cycle tabs" }
+    ] },
+    { section: "Scrolling", bindings: [
+      { keys: "j/k", description: "Scroll down/up" },
+      { keys: "g/G", description: "Top/bottom" }
+    ] },
+    { section: "Actions", bindings: [
+      { keys: "y", description: "Yank (copy) selection" },
+      { keys: "d", description: "Deploy all" },
+      { keys: "x", description: "Clean local data" },
+      { keys: "?", description: "Toggle help" },
+      { keys: "Esc", description: "Close help" }
+    ] }
+  ];
+});
+
+// src/ui/constants/index.ts
+var init_constants = __esm(() => {
+  init_colors();
+  init_keybindings();
+});
+
+// src/ui/components/deploy/DeployProgress.tsx
+import { jsxDEV as jsxDEV2 } from "@opentui/react/jsx-dev-runtime";
+var DeployProgress = (props) => {
+  const { currentFile, completedFiles, totalFiles } = props.progress;
+  const completedCount = completedFiles.length;
+  const failedCount = completedFiles.filter((f) => !f.success).length;
+  return /* @__PURE__ */ jsxDEV2("box", {
     backgroundColor: "black",
     flexDirection: "row",
     paddingLeft: 1,
     paddingRight: 1,
-    children: /* @__PURE__ */ jsxDEV3("text", {
+    children: /* @__PURE__ */ jsxDEV2("text", {
       children: [
-        /* @__PURE__ */ jsxDEV3("span", {
-          fg: current.success ? "#22c55e" : "#ef4444",
-          children: [
-            bar,
-            " ",
-            current.success ? "\u2713" : "\u2717"
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV3("span", {
+        /* @__PURE__ */ jsxDEV2("span", {
+          fg: DEPLOY_COLORS.progress,
+          children: "\u27F3 Deploying"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2("span", {
           children: [
             " ",
-            current.name
+            currentFile
           ]
         }, undefined, true, undefined, this),
-        props.deployed.length > 1 && /* @__PURE__ */ jsxDEV3("span", {
-          fg: "#666",
+        /* @__PURE__ */ jsxDEV2("span", {
+          fg: DEPLOY_COLORS.muted,
           children: [
             " ",
             "(",
-            currentIndex + 1,
+            completedCount + 1,
             "/",
-            props.deployed.length,
+            totalFiles,
             ")"
           ]
+        }, undefined, true, undefined, this),
+        failedCount > 0 && /* @__PURE__ */ jsxDEV2("span", {
+          fg: DEPLOY_COLORS.error,
+          children: [
+            " (",
+            failedCount,
+            " failed)"
+          ]
         }, undefined, true, undefined, this)
       ]
     }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 };
-var init_DeployAnimation = () => {};
+var init_DeployProgress = __esm(() => {
+  init_constants();
+});
 
-// src/components/Header.tsx
-import { jsxDEV as jsxDEV4, Fragment } from "@opentui/react/jsx-dev-runtime";
-var getBinarySourceLabel = (source) => {
-  switch (source) {
-    case "local-debug":
-      return "local (debug)";
-    case "local-release":
-      return "local (release)";
-    case "local-env":
-      return "local (env)";
-    case "npm":
-      return "npm";
+// src/ui/components/deploy/DeployComplete.tsx
+import { useEffect, useState } from "react";
+import { jsxDEV as jsxDEV3, Fragment } from "@opentui/react/jsx-dev-runtime";
+var DeployComplete = (props) => {
+  const { results, onComplete } = props;
+  const [visible, setVisible] = useState(true);
+  const successCount = results.filter((r) => r.success).length;
+  const failedCount = results.filter((r) => !r.success).length;
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onComplete();
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [onComplete]);
+  if (!visible || results.length === 0) {
+    return null;
   }
-}, Header = (props) => {
-  const { activeTab, functionCount, viteRunning, isDeploying, binarySource } = props;
-  return /* @__PURE__ */ jsxDEV4("box", {
+  return /* @__PURE__ */ jsxDEV3("box", {
+    backgroundColor: "black",
     flexDirection: "row",
-    justifyContent: "space-between",
-    children: [
-      /* @__PURE__ */ jsxDEV4("box", {
-        flexDirection: "row",
+    paddingLeft: 1,
+    paddingRight: 1,
+    children: /* @__PURE__ */ jsxDEV3("text", {
+      children: failedCount === 0 ? /* @__PURE__ */ jsxDEV3("span", {
+        fg: DEPLOY_COLORS.success,
         children: [
-          /* @__PURE__ */ jsxDEV4("text", {
-            fg: activeTab === "system" ? "cyan" : undefined,
-            content: "[1] System Logs"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("text", {
-            content: " | "
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("text", {
-            fg: activeTab === "deployment" ? "cyan" : undefined,
-            content: "[2] Deployment Logs"
-          }, undefined, false, undefined, this)
+          "\u2713 Deployed ",
+          successCount,
+          " files"
         ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV4("box", {
-        flexDirection: "row",
+      }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV3(Fragment, {
         children: [
-          isDeploying ? /* @__PURE__ */ jsxDEV4("text", {
-            fg: "yellow",
-            content: "\u25CF deploying all..."
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4("text", {
-            fg: functionCount > 0 ? "green" : "yellow",
-            content: "\u25CF watching"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("text", {
-            fg: "gray",
-            content: ` (${functionCount} functions)`
-          }, undefined, false, undefined, this),
-          viteRunning && /* @__PURE__ */ jsxDEV4(Fragment, {
+          /* @__PURE__ */ jsxDEV3("span", {
+            fg: DEPLOY_COLORS.success,
             children: [
-              /* @__PURE__ */ jsxDEV4("text", {
-                fg: "gray",
-                content: " | vite: "
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV4("text", {
-                fg: "magenta",
-                content: ":5173"
-              }, undefined, false, undefined, this)
+              "\u2713 ",
+              successCount,
+              " deployed"
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV4("text", {
-            fg: "gray",
-            content: " | server: "
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV4("text", {
-            fg: binarySource.startsWith("local") ? "yellow" : "green",
-            content: getBinarySourceLabel(binarySource)
-          }, undefined, false, undefined, this)
+          /* @__PURE__ */ jsxDEV3("span", {
+            fg: DEPLOY_COLORS.error,
+            children: [
+              " \u2717 ",
+              failedCount,
+              " failed"
+            ]
+          }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
 };
-var init_Header = () => {};
+var init_DeployComplete = __esm(() => {
+  init_constants();
+});
 
-// src/components/HelpModal.tsx
-import { jsxDEV as jsxDEV5 } from "@opentui/react/jsx-dev-runtime";
-var KeyBinding = ({ keys, description }) => /* @__PURE__ */ jsxDEV5("text", {
-  children: [
-    "  ",
-    /* @__PURE__ */ jsxDEV5("span", {
-      fg: "green",
-      children: keys
-    }, undefined, false, undefined, this),
-    /* @__PURE__ */ jsxDEV5("span", {
-      fg: "gray",
-      children: " - "
-    }, undefined, false, undefined, this),
-    description
-  ]
-}, undefined, true, undefined, this), Section = ({ title }) => /* @__PURE__ */ jsxDEV5("text", {
-  children: /* @__PURE__ */ jsxDEV5("span", {
-    fg: "gray",
-    children: title
-  }, undefined, false, undefined, this)
-}, undefined, false, undefined, this), HelpModal = ({ visible }) => {
-  if (!visible)
-    return null;
-  return /* @__PURE__ */ jsxDEV5("box", {
+// src/ui/components/deploy/CleanProgress.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsxDEV as jsxDEV4 } from "@opentui/react/jsx-dev-runtime";
+var CleanProgress = (props) => {
+  const { items, onRestartServer, onComplete } = props;
+  const [currentIndex, setCurrentIndex] = useState2(0);
+  const [phase, setPhase] = useState2("deleting");
+  useEffect2(() => {
+    if (items.length === 0) {
+      onComplete();
+      return;
+    }
+    if (phase === "deleting") {
+      if (currentIndex >= items.length) {
+        setPhase("restarting");
+        return;
+      }
+      const timer = setTimeout(() => {
+        setCurrentIndex((prev) => prev + 1);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+    if (phase === "restarting") {
+      onRestartServer().then(() => {
+        setPhase("complete");
+      });
+      return;
+    }
+    if (phase === "complete") {
+      const timer = setTimeout(onComplete, 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [currentIndex, items.length, phase, onRestartServer, onComplete]);
+  if (items.length === 0) {
+    return null;
+  }
+  if (phase === "complete") {
+    return /* @__PURE__ */ jsxDEV4("box", {
+      backgroundColor: "black",
+      flexDirection: "row",
+      paddingLeft: 1,
+      paddingRight: 1,
+      children: /* @__PURE__ */ jsxDEV4("text", {
+        children: /* @__PURE__ */ jsxDEV4("span", {
+          fg: DEPLOY_COLORS.success,
+          children: [
+            "\u2713 Cleaned ",
+            items.length,
+            " items, server restarted"
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (phase === "restarting") {
+    return /* @__PURE__ */ jsxDEV4("box", {
+      backgroundColor: "black",
+      flexDirection: "row",
+      paddingLeft: 1,
+      paddingRight: 1,
+      children: /* @__PURE__ */ jsxDEV4("text", {
+        children: /* @__PURE__ */ jsxDEV4("span", {
+          fg: DEPLOY_COLORS.warning,
+          children: "\u27F3 Restarting server..."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const current = items[currentIndex];
+  return /* @__PURE__ */ jsxDEV4("box", {
+    backgroundColor: "black",
+    flexDirection: "row",
+    paddingLeft: 1,
+    paddingRight: 1,
+    children: /* @__PURE__ */ jsxDEV4("text", {
+      children: [
+        /* @__PURE__ */ jsxDEV4("span", {
+          fg: DEPLOY_COLORS.error,
+          children: "\u2717 Deleting"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4("span", {
+          children: [
+            " ",
+            current
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV4("span", {
+          fg: DEPLOY_COLORS.muted,
+          children: [
+            " ",
+            "(",
+            currentIndex + 1,
+            "/",
+            items.length,
+            ")"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+var init_CleanProgress = __esm(() => {
+  init_constants();
+});
+
+// src/ui/components/layout/StatusBar.tsx
+import { jsxDEV as jsxDEV5 } from "@opentui/react/jsx-dev-runtime";
+var StatusBar = (props) => {
+  const { deployProgress, deployComplete, cleanProgress, message } = props;
+  if (!deployProgress && !deployComplete?.results.length && !cleanProgress && !message) {
+    return null;
+  }
+  if (deployProgress) {
+    return /* @__PURE__ */ jsxDEV5("box", {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%",
+      flexDirection: "column",
+      children: /* @__PURE__ */ jsxDEV5(DeployProgress, {
+        progress: deployProgress
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (deployComplete && deployComplete.results.length > 0) {
+    return /* @__PURE__ */ jsxDEV5("box", {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%",
+      flexDirection: "column",
+      children: /* @__PURE__ */ jsxDEV5(DeployComplete, {
+        results: deployComplete.results,
+        onComplete: deployComplete.onComplete
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (cleanProgress && cleanProgress.items.length > 0) {
+    return /* @__PURE__ */ jsxDEV5("box", {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%",
+      flexDirection: "column",
+      children: /* @__PURE__ */ jsxDEV5(CleanProgress, {
+        items: cleanProgress.items,
+        onRestartServer: cleanProgress.onRestartServer,
+        onComplete: cleanProgress.onComplete
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (message) {
+    return /* @__PURE__ */ jsxDEV5("box", {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%",
+      flexDirection: "column",
+      children: /* @__PURE__ */ jsxDEV5("box", {
+        backgroundColor: "black",
+        paddingLeft: 1,
+        paddingRight: 1,
+        children: /* @__PURE__ */ jsxDEV5("text", {
+          children: [
+            /* @__PURE__ */ jsxDEV5("span", {
+              fg: STATUS_COLORS[message.type],
+              children: [
+                message.icon,
+                " ",
+                message.text
+              ]
+            }, undefined, true, undefined, this),
+            message.detail && /* @__PURE__ */ jsxDEV5("span", {
+              fg: "#666",
+              children: [
+                " ",
+                message.detail
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return null;
+};
+var init_StatusBar = __esm(() => {
+  init_DeployProgress();
+  init_DeployComplete();
+  init_CleanProgress();
+  init_constants();
+});
+
+// src/ui/components/layout/LogPane.tsx
+import { jsxDEV as jsxDEV6 } from "@opentui/react/jsx-dev-runtime";
+var LogPane = (props) => {
+  const { logs: logs2, loading, autoScroll, jumpTrigger, emptyMessage, loadingMessage, children } = props;
+  if (loading && logs2.length === 0) {
+    return /* @__PURE__ */ jsxDEV6("box", {
+      flexDirection: "column",
+      padding: 1,
+      children: /* @__PURE__ */ jsxDEV6("text", {
+        children: loadingMessage
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  if (!loading && logs2.length === 0) {
+    return /* @__PURE__ */ jsxDEV6("box", {
+      flexDirection: "column",
+      padding: 1,
+      children: /* @__PURE__ */ jsxDEV6("text", {
+        children: emptyMessage
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6("scrollbox", {
+    focused: true,
+    flexGrow: 1,
+    height: "100%",
+    stickyStart: autoScroll ? "bottom" : "top",
+    stickyScroll: autoScroll,
+    children
+  }, `${autoScroll}-${jumpTrigger}`, false, undefined, this);
+};
+var init_LogPane = () => {};
+
+// src/ui/components/layout/index.ts
+var init_layout = __esm(() => {
+  init_Header();
+  init_StatusBar();
+  init_LogPane();
+});
+
+// src/ui/components/logs/LogEntry.tsx
+import { jsxDEV as jsxDEV7 } from "@opentui/react/jsx-dev-runtime";
+var LogEntry = (props) => {
+  const { timestamp, level, message, variant = "deployment", deploymentName, trigger } = props;
+  return /* @__PURE__ */ jsxDEV7("box", {
+    flexDirection: "row",
+    children: /* @__PURE__ */ jsxDEV7("text", {
+      children: [
+        /* @__PURE__ */ jsxDEV7("span", {
+          fg: "gray",
+          children: [
+            "[",
+            timestamp,
+            "]"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV7("span", {
+          fg: getLevelColor(level, variant),
+          children: ` ${level.toUpperCase()} `
+        }, undefined, false, undefined, this),
+        deploymentName && /* @__PURE__ */ jsxDEV7("span", {
+          fg: "blue",
+          children: `(${deploymentName})`
+        }, undefined, false, undefined, this),
+        trigger && /* @__PURE__ */ jsxDEV7("span", {
+          fg: "cyan",
+          children: ` ${trigger} `
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV7("span", {
+          children: sanitizeMessage(message)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+var init_LogEntry = __esm(() => {
+  init_utils();
+});
+
+// src/ui/components/logs/SystemLogs.tsx
+import { jsxDEV as jsxDEV8 } from "@opentui/react/jsx-dev-runtime";
+var SystemLogs = (props) => {
+  const { logs: logs2, loading, autoScroll, jumpTrigger } = props;
+  const logsInOrder = [...logs2].reverse();
+  return /* @__PURE__ */ jsxDEV8(LogPane, {
+    logs: logs2,
+    loading,
+    autoScroll,
+    jumpTrigger,
+    loadingMessage: "Loading system logs...",
+    emptyMessage: "No system logs found",
+    children: logsInOrder.map((log) => /* @__PURE__ */ jsxDEV8(LogEntry, {
+      timestamp: new Date(log.timestamp).toLocaleTimeString(),
+      level: log.level,
+      message: log.message,
+      variant: "system"
+    }, log.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+};
+var init_SystemLogs = __esm(() => {
+  init_layout();
+  init_LogEntry();
+});
+
+// src/ui/components/logs/DeploymentLogs.tsx
+import { jsxDEV as jsxDEV9 } from "@opentui/react/jsx-dev-runtime";
+var DeploymentLogs = (props) => {
+  const { logs: logs2, loading, autoScroll, jumpTrigger } = props;
+  const logsInOrder = [...logs2].reverse();
+  return /* @__PURE__ */ jsxDEV9(LogPane, {
+    logs: logs2,
+    loading,
+    autoScroll,
+    jumpTrigger,
+    loadingMessage: "Loading deployment logs...",
+    emptyMessage: "No deployment logs found",
+    children: logsInOrder.map((log) => /* @__PURE__ */ jsxDEV9(LogEntry, {
+      timestamp: new Date(log.time).toLocaleTimeString(),
+      level: log.level,
+      message: log.message,
+      variant: "deployment",
+      deploymentName: log.deployment_name,
+      trigger: log.trigger
+    }, log.id, false, undefined, this))
+  }, undefined, false, undefined, this);
+};
+var init_DeploymentLogs = __esm(() => {
+  init_layout();
+  init_LogEntry();
+});
+
+// src/ui/components/logs/index.ts
+var init_logs2 = __esm(() => {
+  init_LogEntry();
+  init_SystemLogs();
+  init_DeploymentLogs();
+});
+
+// src/ui/components/modal/Modal.tsx
+import { jsxDEV as jsxDEV10 } from "@opentui/react/jsx-dev-runtime";
+var Modal = (props) => {
+  const { visible, width = 50, height = 20, children } = props;
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ jsxDEV10("box", {
     position: "absolute",
     top: 0,
     left: 0,
@@ -1369,124 +1628,190 @@ var KeyBinding = ({ keys, description }) => /* @__PURE__ */ jsxDEV5("text", {
     opacity: 0.9,
     justifyContent: "center",
     alignItems: "center",
-    children: /* @__PURE__ */ jsxDEV5("box", {
-      width: 50,
-      height: 18,
+    children: /* @__PURE__ */ jsxDEV10("box", {
+      width,
+      height,
       border: true,
       borderStyle: "rounded",
       flexDirection: "column",
       padding: 1,
       backgroundColor: "black",
-      children: [
-        /* @__PURE__ */ jsxDEV5("text", {
-          children: /* @__PURE__ */ jsxDEV5("span", {
-            fg: "cyan",
-            children: /* @__PURE__ */ jsxDEV5("strong", {
-              children: "Keyboard Shortcuts"
-            }, undefined, false, undefined, this)
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+var init_Modal = () => {};
+
+// src/ui/components/modal/HelpModal.tsx
+import { jsxDEV as jsxDEV11 } from "@opentui/react/jsx-dev-runtime";
+var KeyBinding = ({ keys, description }) => /* @__PURE__ */ jsxDEV11("text", {
+  children: [
+    "  ",
+    /* @__PURE__ */ jsxDEV11("span", {
+      fg: "green",
+      children: keys
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV11("span", {
+      fg: "gray",
+      children: " - "
+    }, undefined, false, undefined, this),
+    description
+  ]
+}, undefined, true, undefined, this), Section = ({ title }) => /* @__PURE__ */ jsxDEV11("text", {
+  children: /* @__PURE__ */ jsxDEV11("span", {
+    fg: "gray",
+    children: title
+  }, undefined, false, undefined, this)
+}, undefined, false, undefined, this), HelpModal = ({ visible }) => {
+  return /* @__PURE__ */ jsxDEV11(Modal, {
+    visible,
+    width: 50,
+    height: 20,
+    children: [
+      /* @__PURE__ */ jsxDEV11("text", {
+        children: /* @__PURE__ */ jsxDEV11("span", {
+          fg: "cyan",
+          children: /* @__PURE__ */ jsxDEV11("strong", {
+            children: "Keyboard Shortcuts"
           }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5("text", {}, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(Section, {
-          title: "Navigation"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "1/2",
-          description: "Switch tabs"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "h/l",
-          description: "Previous/next tab"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "Tab",
-          description: "Cycle tabs"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5("text", {}, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(Section, {
-          title: "Scrolling"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "j/k",
-          description: "Scroll down/up"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "g/G",
-          description: "Top/bottom"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5("text", {}, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(Section, {
-          title: "Actions"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "d",
-          description: "Deploy all"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "?",
-          description: "Toggle help"
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV5(KeyBinding, {
-          keys: "Esc",
-          description: "Close help"
         }, undefined, false, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV11("text", {}, undefined, false, undefined, this),
+      KEYBINDING_DESCRIPTIONS.map((section, sectionIndex) => /* @__PURE__ */ jsxDEV11("box", {
+        flexDirection: "column",
+        children: [
+          sectionIndex > 0 && /* @__PURE__ */ jsxDEV11("text", {}, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11(Section, {
+            title: section.section
+          }, undefined, false, undefined, this),
+          section.bindings.map((binding) => /* @__PURE__ */ jsxDEV11(KeyBinding, {
+            keys: binding.keys,
+            description: binding.description
+          }, binding.keys, false, undefined, this))
+        ]
+      }, section.section, true, undefined, this))
+    ]
+  }, undefined, true, undefined, this);
 };
-var init_HelpModal = () => {};
+var init_HelpModal = __esm(() => {
+  init_Modal();
+  init_constants();
+});
 
-// src/ui.tsx
-var exports_ui = {};
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { createCliRenderer } from "@opentui/core";
-import { createRoot } from "@opentui/react";
-import { jsxDEV as jsxDEV6 } from "@opentui/react/jsx-dev-runtime";
-var App = (props) => {
-  const [error, setError] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const [deploymentLogs, setDeploymentLogs] = useState2([]);
-  const [systemLogs, setSystemLogs] = useState2([]);
-  const [activeTab, setActiveTab] = useState2("system");
-  const [autoScroll, setAutoScroll] = useState2(true);
-  const [jumpTrigger, setJumpTrigger] = useState2(0);
-  const [watcherStatus, setWatcherStatus] = useState2(null);
-  const [showKeyBindings, setShowKeyBindings] = useState2(false);
-  const [isDeploying, setIsDeploying] = useState2(false);
-  useEffect2(() => {
-    props.onWatcherEvent((event) => {
-      console.error("DEBUG: received watcher event:", event.type, event.deployed?.length);
-      setWatcherStatus(event);
-    });
-  }, [props.onWatcherEvent]);
-  useEffect2(() => {
-    const fn = async () => {
+// src/ui/components/modal/index.ts
+var init_modal = __esm(() => {
+  init_Modal();
+  init_HelpModal();
+});
+// ../../packages/api/types/index.ts
+var init_types = () => {};
+
+// ../../packages/api/actions/client.ts
+var buildUrl = (path, options) => {
+  let fullPath = options?.url ? `${options.url}${path}` : path;
+  if (options?.query) {
+    const params = [];
+    for (const [key, value] of Object.entries(options.query)) {
+      if (value === undefined || value === null)
+        continue;
+      if (Array.isArray(value)) {
+        params.push(`${key}=${value.join(",")}`);
+      } else {
+        params.push(`${key}=${encodeURIComponent(String(value))}`);
+      }
+    }
+    const queryString = params.join("&");
+    if (queryString) {
+      fullPath = `${fullPath}?${queryString}`;
+    }
+  }
+  return fullPath;
+}, apiGet = async (path, options) => {
+  const url = options?.url ? `${options.url}${path}` : path;
+  const headers = {};
+  if (options?.publicKey) {
+    headers["x-public-key"] = options.publicKey;
+  }
+  const response = await fetch(url, { headers });
+  if (!response.ok) {
+    const message = await response.text().catch(() => "");
+    throw new Error(`HTTP error! status: ${response.status}${message ? ` message: ${message}` : ""}`);
+  }
+  return response.json();
+};
+
+// ../../packages/api/actions/deployments.ts
+var init_deployments = () => {};
+
+// ../../packages/api/actions/invocations.ts
+var init_invocations = () => {};
+
+// ../../packages/api/actions/logs.ts
+var getSystemLogs = async (public_key, query, url) => {
+  const path = buildUrl("/api/system/logs", { url, query });
+  return apiGet(path, { publicKey: public_key });
+}, searchDeploymentLogs = async (public_key, props, url) => {
+  const path = buildUrl("/api/logs/search", { url, query: props });
+  return apiGet(path, { publicKey: public_key });
+};
+var init_logs3 = () => {};
+
+// ../../packages/api/actions/assets.ts
+var init_assets = () => {};
+
+// ../../packages/api/actions/activity.ts
+var init_activity = () => {};
+
+// ../../packages/api/actions/index.ts
+var init_actions = __esm(() => {
+  init_deployments();
+  init_invocations();
+  init_logs3();
+  init_assets();
+  init_activity();
+});
+
+// ../../packages/api/index.ts
+var init_api = __esm(() => {
+  init_types();
+  init_actions();
+});
+
+// src/ui/hooks/useLogs.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var useLogs = (options) => {
+  const { config, pollInterval = 2000 } = options;
+  const [systemLogs, setSystemLogs] = useState3([]);
+  const [deploymentLogs, setDeploymentLogs] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  useEffect3(() => {
+    const fetchLogs = async () => {
       try {
         setLoading(true);
         setError(null);
         const [deploymentLogsData, systemLogsData] = await Promise.all([
-          searchDeploymentLogs(props.config.key.public, { limit: 100 }, props.config.api),
-          getSystemLogs(props.config.key.public, { limit: 100 }, props.config.api)
+          searchDeploymentLogs(config.key.public, { limit: 100 }, config.api),
+          getSystemLogs(config.key.public, { limit: 100 }, config.api)
         ]);
         setDeploymentLogs(deploymentLogsData);
         setSystemLogs(systemLogsData);
       } catch (err) {
         setError(err instanceof Error ? err.message : String(err));
-        console.error("Failed to fetch logs:", err);
       } finally {
         setLoading(false);
       }
     };
-    fn();
-  }, [props.config.key.public, props.config.api]);
-  useEffect2(() => {
+    fetchLogs();
+  }, [config.key.public, config.api]);
+  useEffect3(() => {
+    if (loading)
+      return;
     const interval = setInterval(async () => {
-      if (loading)
-        return;
       try {
         const [newDeploymentLogs, newSystemLogs] = await Promise.all([
-          searchDeploymentLogs(props.config.key.public, { limit: 100 }, props.config.api),
-          getSystemLogs(props.config.key.public, { limit: 100 }, props.config.api)
+          searchDeploymentLogs(config.key.public, { limit: 100 }, config.api),
+          getSystemLogs(config.key.public, { limit: 100 }, config.api)
         ]);
         if (newDeploymentLogs.length > 0) {
           setDeploymentLogs(newDeploymentLogs);
@@ -1494,59 +1819,206 @@ var App = (props) => {
         if (newSystemLogs.length > 0) {
           setSystemLogs(newSystemLogs);
         }
-      } catch (err) {
-        console.error("Failed to poll for new logs:", err);
-      }
-    }, 2000);
+      } catch {}
+    }, pollInterval);
     return () => clearInterval(interval);
-  }, [loading, props.config.key.public, props.config.api]);
-  useEffect2(() => {
-    const handleKeyPress = (data) => {
-      const key = data.toString();
-      if (key === "1") {
-        setActiveTab("system");
-        return;
-      }
-      if (key === "2") {
-        setActiveTab("deployment");
-        return;
-      }
-      if (key === "\t") {
-        setActiveTab((prev) => prev === "system" ? "deployment" : "system");
-        return;
-      }
-      if (key === "h") {
-        setActiveTab("system");
-        return;
-      }
-      if (key === "l") {
-        setActiveTab("deployment");
-        return;
-      }
-      if (key === "g") {
-        setAutoScroll(false);
-        setJumpTrigger((prev) => prev + 1);
-        return;
-      }
-      if (key === "G") {
-        setAutoScroll(true);
-        setJumpTrigger((prev) => prev + 1);
-        return;
-      }
-      if (key === "?") {
-        setShowKeyBindings((prev) => !prev);
-        return;
+  }, [loading, config.key.public, config.api, pollInterval]);
+  return { systemLogs, deploymentLogs, loading, error };
+};
+var init_useLogs = __esm(() => {
+  init_api();
+});
+
+// src/ui/hooks/useStatusMessage.ts
+import { useState as useState4, useCallback, useRef } from "react";
+var DEFAULT_DURATION = 3000, useStatusMessage = () => {
+  const [message, setMessage] = useState4(null);
+  const timeoutRef = useRef(null);
+  const clearMessage = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setMessage(null);
+  }, []);
+  const showMessage = useCallback((type, icon, text, detail, duration = DEFAULT_DURATION) => {
+    clearMessage();
+    setMessage({ type, icon, text, detail });
+    timeoutRef.current = setTimeout(clearMessage, duration);
+  }, [clearMessage]);
+  const showSuccess = useCallback((text, detail, duration) => {
+    showMessage("success", "\u2713", text, detail, duration);
+  }, [showMessage]);
+  const showError = useCallback((text, detail, duration) => {
+    showMessage("error", "\u2717", text, detail, duration);
+  }, [showMessage]);
+  const showWarning = useCallback((text, detail, duration) => {
+    showMessage("warning", "!", text, detail, duration);
+  }, [showMessage]);
+  const showInfo = useCallback((text, detail, duration) => {
+    showMessage("info", "\u25CB", text, detail, duration);
+  }, [showMessage]);
+  return {
+    message,
+    showMessage,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+    clearMessage
+  };
+};
+var init_useStatusMessage = () => {};
+
+// src/ui/hooks/useScrollControl.ts
+import { useState as useState5, useCallback as useCallback2 } from "react";
+var useScrollControl = () => {
+  const [autoScroll, setAutoScroll] = useState5(true);
+  const [jumpTrigger, setJumpTrigger] = useState5(0);
+  const jumpToTop = useCallback2(() => {
+    setAutoScroll(false);
+    setJumpTrigger((prev) => prev + 1);
+  }, []);
+  const jumpToBottom = useCallback2(() => {
+    setAutoScroll(true);
+    setJumpTrigger((prev) => prev + 1);
+  }, []);
+  return {
+    autoScroll,
+    jumpTrigger,
+    jumpToTop,
+    jumpToBottom,
+    setAutoScroll
+  };
+};
+var init_useScrollControl = () => {};
+
+// src/ui/hooks/useDeployment.ts
+import { useState as useState6, useCallback as useCallback3, useEffect as useEffect4 } from "react";
+var useDeployment = (options) => {
+  const { onForceDeploy, onWatcherEvent } = options;
+  const [isDeploying, setIsDeploying] = useState6(false);
+  const [progress, setProgress] = useState6(null);
+  const [completedResults, setCompletedResults] = useState6(null);
+  const [watcherResults, setWatcherResults] = useState6(null);
+  useEffect4(() => {
+    onWatcherEvent((event) => {
+      if (event.type === "deploy" && event.deployed?.length) {
+        setWatcherResults(event.deployed);
       }
-      if (key === "\x1B") {
-        setShowKeyBindings(false);
-        return;
+    });
+  }, [onWatcherEvent]);
+  const deploy = useCallback3(() => {
+    if (isDeploying)
+      return;
+    setIsDeploying(true);
+    onForceDeploy({
+      onProgress: (p) => setProgress(p),
+      onComplete: (results) => {
+        setProgress(null);
+        setCompletedResults(results);
       }
-      if (key === "d" && !isDeploying) {
-        setIsDeploying(true);
-        props.onForceDeploy().finally(() => {
-          setIsDeploying(false);
-        });
+    }).finally(() => {
+      setIsDeploying(false);
+    });
+  }, [isDeploying, onForceDeploy]);
+  const clearCompleted = useCallback3(() => {
+    setCompletedResults(null);
+  }, []);
+  const clearWatcherResults = useCallback3(() => {
+    setWatcherResults(null);
+  }, []);
+  return {
+    isDeploying,
+    progress,
+    completedResults,
+    watcherResults,
+    deploy,
+    clearCompleted,
+    clearWatcherResults
+  };
+};
+var init_useDeployment = () => {};
+
+// src/ui/hooks/useKeyboard.ts
+import { useEffect as useEffect5 } from "react";
+import { useRenderer } from "@opentui/react";
+var useKeyboard = (options) => {
+  const {
+    activeTab,
+    isDeploying,
+    isCleaning,
+    onTabChange,
+    onScrollTop,
+    onScrollBottom,
+    onToggleHelp,
+    onCloseModal,
+    onDeploy,
+    onCopySuccess,
+    onCopyError,
+    onNoSelection,
+    onClean,
+    onCleanEmpty
+  } = options;
+  const renderer = useRenderer();
+  useEffect5(() => {
+    const handleKeyPress = (data) => {
+      const key = data.toString();
+      const action = KEYBINDINGS[key];
+      if (!action)
         return;
+      switch (action.type) {
+        case "NAVIGATE":
+          onTabChange(action.tab);
+          break;
+        case "CYCLE_TAB":
+          onTabChange(activeTab === "system" ? "deployment" : "system");
+          break;
+        case "SCROLL":
+          if (action.to === "top") {
+            onScrollTop();
+          } else {
+            onScrollBottom();
+          }
+          break;
+        case "TOGGLE_HELP":
+          onToggleHelp();
+          break;
+        case "CLOSE_MODAL":
+          onCloseModal();
+          break;
+        case "DEPLOY":
+          if (!isDeploying) {
+            onDeploy();
+          }
+          break;
+        case "YANK":
+          if (!renderer.hasSelection) {
+            onNoSelection();
+            return;
+          }
+          const text = renderer.getSelection()?.getSelectedText();
+          if (!text) {
+            onNoSelection();
+            return;
+          }
+          copyToClipboard(text).then(() => {
+            renderer.clearSelection();
+            onCopySuccess(text);
+          }).catch(() => {
+            onCopyError();
+          });
+          break;
+        case "CLEAN":
+          if (isCleaning)
+            return;
+          const { deleted } = cleanLocalData();
+          if (deleted.length > 0) {
+            onClean(deleted);
+          } else {
+            onCleanEmpty();
+          }
+          break;
       }
     };
     process.stdin.setRawMode(true);
@@ -1555,14 +2027,101 @@ var App = (props) => {
       process.stdin.setRawMode(false);
       process.stdin.off("data", handleKeyPress);
     };
-  }, [isDeploying, props.onForceDeploy]);
+  }, [
+    activeTab,
+    isDeploying,
+    isCleaning,
+    renderer,
+    onTabChange,
+    onScrollTop,
+    onScrollBottom,
+    onToggleHelp,
+    onCloseModal,
+    onDeploy,
+    onCopySuccess,
+    onCopyError,
+    onNoSelection,
+    onClean,
+    onCleanEmpty
+  ]);
+};
+var init_useKeyboard = __esm(() => {
+  init_constants();
+  init_utils();
+  init_config();
+});
+
+// src/ui/hooks/index.ts
+var init_hooks = __esm(() => {
+  init_useLogs();
+  init_useStatusMessage();
+  init_useScrollControl();
+  init_useDeployment();
+  init_useKeyboard();
+});
+
+// src/ui/App.tsx
+import { useState as useState7, useCallback as useCallback4 } from "react";
+import { jsxDEV as jsxDEV12 } from "@opentui/react/jsx-dev-runtime";
+var App = (props) => {
+  const { config, binarySource, functionCount, viteRunning, onWatcherEvent, onForceDeploy, onRestartServer } = props;
+  const [activeTab, setActiveTab] = useState7("system");
+  const [showKeyBindings, setShowKeyBindings] = useState7(false);
+  const [cleaningItems, setCleaningItems] = useState7(null);
+  const { systemLogs, deploymentLogs, loading, error } = useLogs({ config });
+  const { message, showInfo } = useStatusMessage();
+  const { autoScroll, jumpTrigger, jumpToTop, jumpToBottom } = useScrollControl();
+  const {
+    isDeploying,
+    progress: deployProgress,
+    completedResults,
+    watcherResults,
+    deploy,
+    clearCompleted,
+    clearWatcherResults
+  } = useDeployment({ onForceDeploy, onWatcherEvent });
+  const handleCopySuccess = useCallback4((text) => {
+    const preview = text.length > 30 ? text.substring(0, 30) + "..." : text;
+    showInfo("Copied", `"${preview.replace(/\n/g, "\u21B5")}"`);
+  }, [showInfo]);
+  const handleCopyError = useCallback4(() => {
+    showInfo("Failed to copy");
+  }, [showInfo]);
+  const handleNoSelection = useCallback4(() => {
+    showInfo("No selection", "Select text first");
+  }, [showInfo]);
+  const handleClean = useCallback4((deletedItems) => {
+    setCleaningItems(deletedItems);
+  }, []);
+  const handleCleanComplete = useCallback4(() => {
+    setCleaningItems(null);
+  }, []);
+  const handleCleanEmpty = useCallback4(() => {
+    showInfo("Nothing to clean");
+  }, [showInfo]);
+  useKeyboard({
+    activeTab,
+    isDeploying,
+    isCleaning: cleaningItems !== null,
+    onTabChange: setActiveTab,
+    onScrollTop: jumpToTop,
+    onScrollBottom: jumpToBottom,
+    onToggleHelp: () => setShowKeyBindings((prev) => !prev),
+    onCloseModal: () => setShowKeyBindings(false),
+    onDeploy: deploy,
+    onCopySuccess: handleCopySuccess,
+    onCopyError: handleCopyError,
+    onNoSelection: handleNoSelection,
+    onClean: handleClean,
+    onCleanEmpty: handleCleanEmpty
+  });
   if (error) {
-    return /* @__PURE__ */ jsxDEV6("box", {
+    return /* @__PURE__ */ jsxDEV12("box", {
       flexGrow: 1,
       flexDirection: "column",
       padding: 1,
-      children: /* @__PURE__ */ jsxDEV6("text", {
-        children: /* @__PURE__ */ jsxDEV6("span", {
+      children: /* @__PURE__ */ jsxDEV12("text", {
+        children: /* @__PURE__ */ jsxDEV12("span", {
           fg: "red",
           children: [
             "Error: ",
@@ -1572,50 +2131,72 @@ var App = (props) => {
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV6("box", {
+  return /* @__PURE__ */ jsxDEV12("box", {
     flexDirection: "column",
+    height: "100%",
     children: [
-      /* @__PURE__ */ jsxDEV6(Header, {
+      /* @__PURE__ */ jsxDEV12(Header, {
         activeTab,
-        functionCount: props.functionCount,
-        viteRunning: props.viteRunning,
+        functionCount,
+        viteRunning,
         isDeploying,
-        binarySource: props.binarySource
+        binarySource
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("box", {
+      /* @__PURE__ */ jsxDEV12("box", {
         paddingTop: 1,
         flexDirection: "column",
-        children: [
-          activeTab === "system" ? /* @__PURE__ */ jsxDEV6(SystemLogsPane, {
-            logs: systemLogs,
-            loading,
-            autoScroll,
-            jumpTrigger
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV6(DeploymentLogsPane, {
-            logs: deploymentLogs,
-            loading,
-            autoScroll,
-            jumpTrigger
-          }, undefined, false, undefined, this),
-          watcherStatus?.type === "deploy" && watcherStatus.deployed && watcherStatus.deployed.length > 0 && /* @__PURE__ */ jsxDEV6(DeployAnimation, {
-            deployed: watcherStatus.deployed,
-            onComplete: () => {
-              console.error("DEBUG: animation complete");
-              setWatcherStatus(null);
-            }
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6(HelpModal, {
+        flexGrow: 1,
+        overflow: "hidden",
+        children: activeTab === "system" ? /* @__PURE__ */ jsxDEV12(SystemLogs, {
+          logs: systemLogs,
+          loading,
+          autoScroll,
+          jumpTrigger
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV12(DeploymentLogs, {
+          logs: deploymentLogs,
+          loading,
+          autoScroll,
+          jumpTrigger
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12(StatusBar, {
+        deployProgress,
+        deployComplete: completedResults ? { results: completedResults, onComplete: clearCompleted } : watcherResults ? { results: watcherResults, onComplete: clearWatcherResults } : undefined,
+        cleanProgress: cleaningItems ? { items: cleaningItems, onRestartServer, onComplete: handleCleanComplete } : null,
+        message
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12(HelpModal, {
         visible: showKeyBindings
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
-}, main = async () => {
+};
+var init_App = __esm(() => {
+  init_layout();
+  init_logs2();
+  init_modal();
+  init_hooks();
+});
+
+// src/ui.tsx
+var exports_ui = {};
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { jsxDEV as jsxDEV13 } from "@opentui/react/jsx-dev-runtime";
+var main = async () => {
   let serverInfo = null;
   let viteInfo = null;
   let stopWatcher = null;
   let isCleaningUp = false;
+  const stopServer = () => {
+    if (serverInfo) {
+      const pid = serverInfo.process.pid;
+      serverInfo = null;
+      try {
+        process.kill(pid, "SIGTERM");
+      } catch {}
+    }
+  };
   const cleanup = async (exitAfter = true) => {
     if (isCleaningUp)
       return;
@@ -1628,13 +2209,7 @@ var App = (props) => {
       await stopViteServer(viteInfo);
       viteInfo = null;
     }
-    if (serverInfo) {
-      const pid = serverInfo.process.pid;
-      serverInfo = null;
-      try {
-        process.kill(pid, "SIGTERM");
-      } catch {}
-    }
+    stopServer();
     if (exitAfter) {
       process.exit(0);
     }
@@ -1648,11 +2223,12 @@ var App = (props) => {
     const srcPath = process.cwd() + "/src";
     viteInfo = await startViteServer({
       srcDir: srcPath,
-      onLog: (_msg, _level) => {}
+      onLog: () => {}
     });
     let watcherEventHandler = null;
     let pendingEvents = [];
     let functionCount = 0;
+    let isInitialBuild = true;
     const sendEvent = (event) => {
       if (watcherEventHandler) {
         watcherEventHandler(event);
@@ -1660,22 +2236,27 @@ var App = (props) => {
         pendingEvents.push(event);
       }
     };
+    const restartServer = async () => {
+      stopServer();
+      serverInfo = await startServer();
+    };
     const renderer = await createCliRenderer();
     const root = createRoot(renderer);
-    const handleForceDeploy = async () => {
+    const handleForceDeploy = async (callbacks) => {
       const deployResults = [];
       await forceDeployAll(srcPath, {
+        onStart: (filePath, completedCount, totalCount) => {
+          callbacks.onProgress({
+            currentFile: filePath,
+            completedFiles: [...deployResults],
+            totalFiles: totalCount
+          });
+        },
         onDeploy: (filePath, success, error) => {
           deployResults.push({ name: filePath, success, error });
         }
       });
-      if (deployResults.length > 0) {
-        sendEvent({
-          type: "deploy",
-          deployed: deployResults,
-          timestamp: new Date
-        });
-      }
+      callbacks.onComplete(deployResults);
     };
     stopWatcher = await startWatcher(srcPath, {
       silent: true,
@@ -1683,6 +2264,10 @@ var App = (props) => {
         functionCount = count;
       },
       onDeployBatch: (results) => {
+        if (isInitialBuild) {
+          isInitialBuild = false;
+          return;
+        }
         sendEvent({
           type: "deploy",
           deployed: results.map((r) => ({
@@ -1694,7 +2279,7 @@ var App = (props) => {
         });
       }
     });
-    root.render(/* @__PURE__ */ jsxDEV6(App, {
+    root.render(/* @__PURE__ */ jsxDEV13(App, {
       config: devConfig,
       binarySource: serverInfo.binarySource,
       functionCount,
@@ -1708,7 +2293,8 @@ var App = (props) => {
           pendingEvents = [];
         }
       },
-      onForceDeploy: handleForceDeploy
+      onForceDeploy: handleForceDeploy,
+      onRestartServer: restartServer
     }, undefined, false, undefined, this));
   } catch (error) {
     console.error("Failed to start server:", error);
@@ -1716,16 +2302,11 @@ var App = (props) => {
   }
 };
 var init_ui = __esm(() => {
-  init_api();
   init_server();
   init_watcher();
   init_vite();
   init_config();
-  init_DeploymentLogsPane();
-  init_SystemLogsPane();
-  init_DeployAnimation();
-  init_Header();
-  init_HelpModal();
+  init_App();
   main();
 });
 
@@ -1743,8 +2324,8 @@ init_config();
 init_bundle();
 init_deploy2();
 import chalk3 from "chalk";
-import { basename as basename4, resolve as resolve2, join as join5 } from "path";
-import { existsSync as existsSync5 } from "fs";
+import { basename as basename4, resolve as resolve2, join as join6 } from "path";
+import { existsSync as existsSync6 } from "fs";
 import { readdir as readdir2 } from "fs/promises";
 import * as p from "@clack/prompts";
 var FUNCTION_DIRS2 = ["api", "cron", "event"];
@@ -1773,25 +2354,25 @@ var selectConfig = async () => {
 };
 var findAllDeployables = async (srcPath) => {
   const functions = [];
-  const functionsPath = join5(srcPath, "function");
+  const functionsPath = join6(srcPath, "function");
   for (const dir of FUNCTION_DIRS2) {
-    const dirPath = join5(functionsPath, dir);
+    const dirPath = join6(functionsPath, dir);
     try {
       const items = await readdir2(dirPath, { withFileTypes: true });
       for (const item of items) {
         if (item.isFile() && (item.name.endsWith(".ts") || item.name.endsWith(".tsx"))) {
-          functions.push(join5(dirPath, item.name));
+          functions.push(join6(dirPath, item.name));
         }
       }
     } catch {}
   }
-  const reactEntry = join5(srcPath, "index.tsx");
-  const hasReact = existsSync5(reactEntry);
+  const reactEntry = join6(srcPath, "index.tsx");
+  const hasReact = existsSync6(reactEntry);
   return { functions, reactEntry: hasReact ? reactEntry : null };
 };
 var deployAll = async (config, options) => {
-  const srcPath = join5(process.cwd(), "src");
-  if (!existsSync5(srcPath)) {
+  const srcPath = join6(process.cwd(), "src");
+  if (!existsSync6(srcPath)) {
     console.error(chalk3.red("\u2717 No src directory found"));
     process.exit(1);
   }
@@ -1875,7 +2456,7 @@ var registerDeployCommand = (program) => {
       return;
     }
     const filePath = resolve2(file);
-    if (!existsSync5(filePath)) {
+    if (!existsSync6(filePath)) {
       console.error(chalk3.red(`\u2717 File not found: ${filePath}`));
       process.exit(1);
     }
@@ -2046,7 +2627,7 @@ import { Command as Command2 } from "commander";
 import chalk6 from "chalk";
 import { resolve as resolve3 } from "path";
 import { readFile, readdir as readdir3 } from "fs/promises";
-import { existsSync as existsSync6 } from "fs";
+import { existsSync as existsSync7 } from "fs";
 import * as p3 from "@clack/prompts";
 
 // ../../packages/api/actions/secrets.ts
@@ -2281,7 +2862,7 @@ Secret keys:`));
         process.exit(1);
       }
     }
-    if (!existsSync6(filePath)) {
+    if (!existsSync7(filePath)) {
       console.error(chalk6.red(`\u2717 File not found: ${filePath}`));
       process.exit(1);
     }
@@ -2331,7 +2912,7 @@ Secret keys:`));
         process.exit(1);
       }
     }
-    if (!existsSync6(filePath)) {
+    if (!existsSync7(filePath)) {
       console.error(chalk6.red(`\u2717 File not found: ${filePath}`));
       process.exit(1);
     }
@@ -2370,8 +2951,8 @@ Secret keys:`));
   }));
 };
 // src/commands/host.ts
-import { existsSync as existsSync7, writeFileSync as writeFileSync3, mkdirSync as mkdirSync3, readFileSync as readFileSync2 } from "fs";
-import { join as join6 } from "path";
+import { existsSync as existsSync8, writeFileSync as writeFileSync3, mkdirSync as mkdirSync3, readFileSync as readFileSync2 } from "fs";
+import { join as join7 } from "path";
 import { homedir } from "os";
 var {$: $2 } = globalThis.Bun;
 import chalk7 from "chalk";
@@ -2404,7 +2985,7 @@ var generateProductionKeys = async () => {
   return { privateKey, publicKey };
 };
 var saveProductionConfig = async (cloudPath, privateKey, publicKey) => {
-  const configPath = join6(cloudPath, "config.json");
+  const configPath = join7(cloudPath, "config.json");
   const config = {
     key: {
       private: privateKey,
@@ -2438,7 +3019,7 @@ WantedBy=multi-user.target
   return serviceContent;
 };
 var ensureCloudDirectory = (cloudPath) => {
-  if (!existsSync7(cloudPath)) {
+  if (!existsSync8(cloudPath)) {
     console.log(chalk7.blue("Creating cloud directory..."));
     try {
       mkdirSync3(cloudPath, { recursive: true });
@@ -2468,15 +3049,15 @@ var validateLinux = () => {
   }
 };
 var validateServerBinary = (serverBinPath) => {
-  if (!existsSync7(serverBinPath)) {
+  if (!existsSync8(serverBinPath)) {
     console.log(chalk7.red("Server binary not found at:"), serverBinPath);
     console.log(chalk7.yellow("Make sure you have installed the package correctly"));
     process.exit(1);
   }
 };
 var checkExistingProductionConfig = (cloudPath) => {
-  const configPath = join6(cloudPath, "config.json");
-  if (!existsSync7(configPath)) {
+  const configPath = join7(cloudPath, "config.json");
+  if (!existsSync8(configPath)) {
     return null;
   }
   try {
@@ -2507,15 +3088,15 @@ var unhost = async (options = {}) => {
       console.log(chalk7.yellow("Service was not enabled"));
     }
     const servicePath = "/etc/systemd/system/nulljs.service";
-    if (existsSync7(servicePath)) {
+    if (existsSync8(servicePath)) {
       console.log(chalk7.blue("Removing systemd service file..."));
       await $2`sudo rm ${servicePath}`;
       await $2`sudo systemctl daemon-reload`;
       console.log(chalk7.green("Systemd service file removed"));
     }
     if (!options.keepData) {
-      const defaultCloudPath = join6(homedir(), ".nulljs");
-      if (existsSync7(defaultCloudPath)) {
+      const defaultCloudPath = join7(homedir(), ".nulljs");
+      if (existsSync8(defaultCloudPath)) {
         console.log(chalk7.blue("Removing cloud directory..."));
         await $2`rm -rf ${defaultCloudPath}`;
         console.log(chalk7.green("Cloud directory removed"));
@@ -2539,9 +3120,9 @@ var unhost = async (options = {}) => {
 };
 var update = async () => {
   validateLinux();
-  const cloudPath = join6(homedir(), ".nulljs");
+  const cloudPath = join7(homedir(), ".nulljs");
   const servicePath = "/etc/systemd/system/nulljs.service";
-  if (!existsSync7(servicePath)) {
+  if (!existsSync8(servicePath)) {
     console.log(chalk7.red("NullJS service is not installed."));
     console.log(chalk7.gray('Run "nulljs host" to set up hosting first.'));
     process.exit(1);
@@ -2572,7 +3153,7 @@ var update = async () => {
 };
 var host = async (cloudPath) => {
   validateLinux();
-  const resolvedCloudPath = cloudPath ? cloudPath.startsWith("/") ? cloudPath : join6(process.cwd(), cloudPath) : join6(homedir(), ".nulljs");
+  const resolvedCloudPath = cloudPath ? cloudPath.startsWith("/") ? cloudPath : join7(process.cwd(), cloudPath) : join7(homedir(), ".nulljs");
   console.log(chalk7.blue("Setting up NullJS production hosting..."));
   console.log(chalk7.gray(`   Cloud path: ${resolvedCloudPath}`));
   const serverBinPath = getServerBinPath();