Release v2.1.4 - React web panel + proper build pipeline

- Rebuild web UI using React (compiled with Bun)
- Add build:web script to compile React app and embed in binary
- Update build pipeline (local + GitHub Actions) to build web panel first
- Clean up web enable output to only show web panel URL
- Add build:linux and build:all npm scripts
- Remove binary from git (now in .gitignore)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: CyberClarence

.github/workflows/release.yml

@@ -36,6 +36,9 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Build web panel
+        run: bun run scripts/build-web.ts
+
       - name: Build binary
         run: |
           mkdir -p dist

.gitignore

@@ -4,6 +4,8 @@ bun.lock
 
 # Build output
 dist/
+pgforge
+pgforge-*
 easy-db
 easy-db-*
 

package.json

@@ -8,7 +8,10 @@
   },
   "scripts": {
     "dev": "bun run src/cli.ts",
-    "build": "bun build --compile src/cli.ts --outfile pgforge",
+    "build:web": "bun run scripts/build-web.ts",
+    "build": "bun run build:web && bun build --compile src/cli.ts --outfile pgforge",
+    "build:linux": "bun run build:web && bun build --compile --target=bun-linux-x64 src/cli.ts --outfile pgforge-linux",
+    "build:all": "bun run build:web && bun build --compile src/cli.ts --outfile pgforge && bun build --compile --target=bun-linux-x64 src/cli.ts --outfile pgforge-linux",
     "build:release": "bun run scripts/build.ts",
     "test": "bun test test/*.test.ts",
     "test:e2e": "bun test test/e2e",
@@ -26,6 +29,10 @@
     "postgres": "^3.4.7"
   },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   }
 }

pgforge

@@ -0,0 +1,59 @@
+#!/usr/bin/env bun
+/**
+ * Build script for the web panel
+ * Compiles React app and embeds it into panel.ts
+ */
+
+import { join } from "path";
+
+const ROOT = join(import.meta.dir, "..");
+const WEB_APP_DIR = join(ROOT, "src/web/app");
+const PANEL_TS = join(ROOT, "src/web/panel.ts");
+
+async function buildWebPanel() {
+  console.log("Building web panel...");
+
+  // Build the React app with Bun
+  const result = await Bun.build({
+    entrypoints: [join(WEB_APP_DIR, "App.tsx")],
+    minify: true,
+    target: "browser",
+  });
+
+  if (!result.success) {
+    console.error("Build failed:");
+    for (const log of result.logs) {
+      console.error(log);
+    }
+    process.exit(1);
+  }
+
+  // Get the bundled JavaScript
+  const jsBundle = await result.outputs[0].text();
+
+  // Read the HTML template
+  const htmlTemplate = await Bun.file(join(WEB_APP_DIR, "index.html")).text();
+
+  // Replace the script tag with the inline bundle
+  const finalHtml = htmlTemplate.replace(
+    /<script type="module" src="\.\/App\.tsx"><\/script>/,
+    `<script>${jsBundle}</script>`
+  );
+
+  // Escape backticks and dollar signs for template literal
+  const escapedHtml = finalHtml
+    .replace(/\\/g, "\\\\")
+    .replace(/`/g, "\\`")
+    .replace(/\$\{/g, "\\${");
+
+  // Write the panel.ts file
+  const panelTs = `// AUTO-GENERATED - DO NOT EDIT
+// Run 'bun run build:web' to regenerate
+export const PANEL_HTML = \`${escapedHtml}\`;
+`;
+
+  await Bun.write(PANEL_TS, panelTs);
+  console.log("Web panel built successfully!");
+}
+
+buildWebPanel();

scripts/build-web.ts

@@ -15,6 +15,16 @@ const TARGETS = [
 async function build() {
   console.log(`\n🔨 Building PgForge v${VERSION}\n`);
 
+  // Build web panel first
+  console.log(`🌐 Building web panel...`);
+  const webResult = await Bun.$`bun run scripts/build-web.ts`.quiet().nothrow();
+  if (webResult.exitCode !== 0) {
+    console.error(`❌ Web panel build failed`);
+    console.error(webResult.stderr.toString());
+    process.exit(1);
+  }
+  console.log(`✅ Web panel built`);
+
   // Create dist directory
   await Bun.$`mkdir -p dist`.quiet();
 

scripts/build.ts

@@ -141,8 +141,6 @@ export async function webStatus(): Promise<void> {
 
 async function startWebServer(port: number, hostname: string, displayHost: string, generatedPassword: string | null): Promise<void> {
   const config = await getWebConfig();
-  const state = await getState();
-  const databases = Object.values(state.databases);
 
   // Write PID file so we can stop the server later
   await Bun.write(getWebPidFile(), String(process.pid));
@@ -690,40 +688,19 @@ async function startWebServer(port: number, hostname: string, displayHost: strin
     },
   });
 
-  // Display the styled output with sections using the new design
-  ui.printSectionBox("Development Tools", [
-    { label: "Studio", value: `http://${displayHost}:${port}`, color: "highlight" },
-    { label: "Mailpit", value: `http://${displayHost}:54324`, color: "muted" },
-    { label: "MCP", value: `http://${displayHost}:54321/mcp`, color: "muted" },
+  // Display the web panel URL
+  console.log();
+  ui.printSectionBox("Web Panel", [
+    { label: "URL", value: `http://${displayHost}:${port}`, color: "highlight" },
   ]);
 
-  ui.printSectionBox("APIs", [
-    { label: "Project URL", value: `http://${displayHost}:54321`, color: "highlight" },
-    { label: "REST", value: `http://${displayHost}:54321/rest/v1`, color: "highlight" },
-    { label: "GraphQL", value: `http://${displayHost}:54321/graphql/v1`, color: "highlight" },
-    { label: "Edge Functions", value: `http://${displayHost}:54321/functions/v1`, color: "highlight" },
-  ], "🌐");
-
-  // Database section
-  if (databases.length > 0) {
-    const firstDb = databases[0];
-    const connectionUrl = `postgresql://${firstDb.username}:${firstDb.password}@${displayHost}:${firstDb.port}/${firstDb.database}`;
-    ui.printSectionBox("Database", [
-      { label: "URL", value: connectionUrl, color: "highlight" },
-    ], "💾");
-  } else {
-    ui.printSectionBox("Database", [
-      { label: "Status", value: "No databases created yet", color: "muted" },
-    ], "💾");
+  if (generatedPassword) {
+    ui.printSectionBox("Access", [
+      { label: "Password", value: generatedPassword, color: "warning" },
+    ], "🔑");
   }
 
-  // Authentication keys
-  ui.printSectionBox("Authentication Keys", [
-    { label: "Publishable", value: "sb_publishable", color: "success" },
-    { label: "Secret", value: generatedPassword || "sb_secret", color: "warning" },
-  ], "🔑");
-
   console.log();
-  console.log(ui.brand.muted("Press Ctrl+C to stop • Ctrl+D to detach"));
+  console.log(ui.brand.muted("Press Ctrl+C to stop"));
   console.log();
 }

src/commands/web.ts

@@ -5,7 +5,7 @@ import { join } from "path";
 // VERSION
 // =============================================================================
 
-export const VERSION = "2.1.3";
+export const VERSION = "2.1.4";
 export const STATE_VERSION = 1; // Increment when state schema changes
 
 // =============================================================================