showpane 0.0.1 → 0.2.1

package/README.md

@@ -0,0 +1,22 @@
+# showpane
+
+CLI for [Showpane](https://showpane.com) — AI-generated client portals.
+
+## Install
+
+```bash
+npx showpane
+```
+
+## Commands
+
+### `npx showpane` (default)
+Scaffold a new Showpane portal project. Sets up Next.js, Prisma, and example portal.
+
+### `showpane login`
+Authenticate with Showpane Cloud for portal deployment.
+
+## Requirements
+
+- Node.js 20+
+- Claude Code (for portal creation)

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,264 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { createInterface } from "readline";
+import { execSync, spawn, exec } from "child_process";
+import fs from "fs";
+import { randomBytes } from "crypto";
+import { createServer } from "net";
+import path from "path";
+import os from "os";
+import { fileURLToPath } from "url";
+var { mkdirSync, readFileSync, writeFileSync } = fs;
+var { resolve, dirname, join } = path;
+var { homedir } = os;
+var RESET = "\x1B[0m";
+var BOLD = "\x1B[1m";
+var DIM = "\x1B[2m";
+var GREEN = "\x1B[32m";
+var BLUE = "\x1B[34m";
+var WHITE = "\x1B[37m";
+var RED = "\x1B[31m";
+function green(msg) {
+  console.log(`  ${GREEN}\u2713${RESET} ${msg}`);
+}
+function blue(msg) {
+  console.log(`  ${BLUE}\u2192${RESET} ${msg}`);
+}
+function error(msg) {
+  console.error(`  ${RED}\u2717${RESET} ${msg}`);
+}
+function printBanner() {
+  const banner = `
+${BOLD}${WHITE}  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557    \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
+  \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551    \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D
+  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557
+  \u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u255D \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D
+  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2554\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551     \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557
+  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u255D\u255A\u2550\u2550\u255D\u255A\u2550\u255D     \u255A\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D${RESET}
+${DIM}  Client portals that close deals.${RESET}
+`;
+  console.log(banner);
+}
+function ask(question) {
+  const rl = createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve2) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve2(answer.trim());
+    });
+  });
+}
+function toSlug(name) {
+  return name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function findFreePort(startPort) {
+  return new Promise((resolve2, reject) => {
+    const server = createServer();
+    server.listen(startPort, () => {
+      server.close(() => resolve2(startPort));
+    });
+    server.on("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        resolve2(findFreePort(startPort + 1));
+      } else {
+        reject(err);
+      }
+    });
+  });
+}
+function run(cmd, cwd) {
+  execSync(cmd, { cwd, stdio: "inherit" });
+}
+function openBrowser(url) {
+  const platform = process.platform;
+  const cmd = platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open";
+  exec(`${cmd} ${url}`);
+}
+async function main() {
+  if (process.argv.includes("--version")) {
+    const __dirname = dirname(fileURLToPath(import.meta.url));
+    const pkg = JSON.parse(readFileSync(join(__dirname, "..", "package.json"), "utf-8"));
+    console.log(pkg.version);
+    process.exit(0);
+  }
+  printBanner();
+  const companyName = await ask(`  ${BOLD}What's your company name?${RESET} `);
+  if (!companyName) {
+    error("Company name is required.");
+    process.exit(1);
+  }
+  const slug = toSlug(companyName);
+  const dirName = `showpane-${slug}`;
+  console.log();
+  blue(`Setting up ${BOLD}${companyName}${RESET} portal as ${DIM}${dirName}/${RESET}`);
+  console.log();
+  try {
+    run(
+      `git clone --depth 1 https://github.com/twillcocks/showpane.git ${dirName}`
+    );
+    green("Cloned repository");
+  } catch {
+    error("Failed to clone repository. Check your internet connection and try again.");
+    process.exit(1);
+  }
+  const appDir = resolve(process.cwd(), dirName, "app");
+  try {
+    run("npm install", appDir);
+    green("Dependencies installed");
+  } catch {
+    error("Failed to install dependencies.");
+    process.exit(1);
+  }
+  const authSecret = randomBytes(32).toString("hex");
+  const envContent = `DATABASE_URL="file:./dev.db"
+AUTH_SECRET="${authSecret}"
+`;
+  writeFileSync(resolve(appDir, ".env"), envContent);
+  green("Environment configured");
+  try {
+    run("npx prisma db push --schema prisma/schema.local.prisma", appDir);
+    green("Database ready");
+  } catch {
+    error("Failed to set up the database. Check Prisma schema and try again.");
+    process.exit(1);
+  }
+  try {
+    run("npx tsx prisma/seed.ts", appDir);
+    green("Example portal seeded");
+  } catch {
+    blue("Skipped example portal (seed failed \u2014 not a problem)");
+  }
+  const skillsSource = path.join(dirName, "skills");
+  const skillsTarget = path.join(os.homedir(), ".claude", "skills");
+  const oldSymlink = path.join(skillsTarget, "showpane");
+  try {
+    const stat = fs.lstatSync(oldSymlink);
+    if (stat.isSymbolicLink()) fs.unlinkSync(oldSymlink);
+  } catch {
+  }
+  fs.mkdirSync(skillsTarget, { recursive: true });
+  const skillDirs = fs.readdirSync(skillsSource, { withFileTypes: true }).filter((d) => d.isDirectory() && d.name.startsWith("portal-"));
+  for (const dir of skillDirs) {
+    const targetDir = path.join(skillsTarget, dir.name);
+    fs.mkdirSync(targetDir, { recursive: true });
+    const skillFile = path.join(targetDir, "SKILL.md");
+    try {
+      fs.unlinkSync(skillFile);
+    } catch {
+    }
+    fs.symlinkSync(
+      path.join(skillsSource, dir.name, "SKILL.md"),
+      skillFile
+    );
+  }
+  green(`${skillDirs.length} Claude Code skills installed`);
+  const port = await findFreePort(3e3);
+  green(`Server starting on port ${port}`);
+  const url = `http://localhost:${port}`;
+  blue(`Opening ${url}`);
+  console.log();
+  console.log(`  ${GREEN}Ready!${RESET} ${skillDirs.length} Claude Code skills installed.`);
+  console.log();
+  console.log(`  Open Claude Code and create your first portal:`);
+  console.log(`    ${DIM}cd ${dirName}/app${RESET}`);
+  console.log(`    ${BOLD}claude${RESET}`);
+  console.log(`    ${DIM}> Create a portal for my call with [client name]${RESET}`);
+  console.log();
+  console.log(`  Available skills: /portal-create, /portal-deploy, /portal-list, ...`);
+  console.log();
+  console.log(`  ${DIM}Don't have Claude Code? Install from https://claude.ai/code${RESET}`);
+  console.log();
+  const devServer = spawn("npm", ["run", "dev"], {
+    cwd: appDir,
+    stdio: "inherit",
+    env: { ...process.env, PORT: String(port) }
+  });
+  setTimeout(() => {
+    openBrowser(url);
+  }, 3e3);
+  devServer.on("close", (code) => {
+    if (code !== 0) {
+      error(`Dev server exited with code ${code}`);
+    }
+    process.exit(code ?? 1);
+  });
+  process.on("SIGINT", () => {
+    devServer.kill("SIGINT");
+  });
+  process.on("SIGTERM", () => {
+    devServer.kill("SIGTERM");
+  });
+}
+var API_BASE = "https://app.showpane.com";
+async function login() {
+  printBanner();
+  blue("Authenticating with Showpane...");
+  console.log();
+  const initRes = await fetch(`${API_BASE}/api/cli/init`, { method: "POST" });
+  if (!initRes.ok) {
+    throw new Error(`Failed to start auth flow (${initRes.status})`);
+  }
+  const { code, userCode, verificationUrl } = await initRes.json();
+  console.log(`  ${BOLD}Enter this code in your browser:${RESET}  ${BOLD}${GREEN}${userCode}${RESET}`);
+  console.log();
+  openBrowser(verificationUrl);
+  blue(`Opened ${verificationUrl}`);
+  console.log();
+  blue("Waiting for authorization...");
+  const POLL_INTERVAL = 2e3;
+  const TIMEOUT = 10 * 60 * 1e3;
+  const start = Date.now();
+  while (Date.now() - start < TIMEOUT) {
+    await new Promise((r) => setTimeout(r, POLL_INTERVAL));
+    const pollRes = await fetch(`${API_BASE}/api/cli/poll?code=${code}`);
+    if (pollRes.status === 410) {
+      error("Code expired. Please try again.");
+      process.exit(1);
+    }
+    if (!pollRes.ok && pollRes.status !== 202) {
+      throw new Error(`Poll failed (${pollRes.status})`);
+    }
+    const data = await pollRes.json();
+    if (data.status === "approved") {
+      const configDir = join(homedir(), ".showpane");
+      mkdirSync(configDir, { recursive: true });
+      const configPath = join(configDir, "config.json");
+      writeFileSync(
+        configPath,
+        JSON.stringify(
+          {
+            accessToken: data.accessToken,
+            orgSlug: data.orgSlug,
+            portalUrl: data.portalUrl,
+            vercelProjectId: data.vercelProjectId,
+            app_path: join(process.cwd(), "app"),
+            deploy_mode: "cloud"
+          },
+          null,
+          2
+        )
+      );
+      console.log();
+      green(`Authenticated! Connected to ${BOLD}${data.orgSlug}${RESET}`);
+      console.log();
+      return;
+    }
+  }
+  error("Authentication timed out. Please try again.");
+  process.exit(1);
+}
+if (process.argv[2] === "login") {
+  login().catch((err) => {
+    error(String(err));
+    process.exit(1);
+  });
+} else {
+  main().catch((err) => {
+    error(String(err));
+    process.exit(1);
+  });
+}

package/package.json

@@ -1,16 +1,44 @@
 {
   "name": "showpane",
-  "version": "0.0.1",
-  "description": "Open-source client portals. Generate professional client portals in minutes using Claude Code.",
+  "version": "0.2.1",
+  "description": "CLI for Showpane — AI-generated client portals",
+  "type": "module",
   "bin": {
-    "showpane": "./index.js"
+    "showpane": "./dist/index.js"
   },
-  "keywords": ["client-portal", "claude-code", "ai", "open-source"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsx src/index.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "showpane",
+    "client-portal",
+    "claude-code",
+    "portal",
+    "scaffolding",
+    "cli"
+  ],
   "author": "twillcocks",
-  "license": "MIT",
+  "license": "AGPL-3.0",
   "repository": {
     "type": "git",
-    "url": "https://github.com/twillcocks/showpane"
+    "url": "https://github.com/twillcocks/showpane.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://showpane.com",
+  "engines": {
+    "node": ">=20"
   },
-  "homepage": "https://showpane.com"
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "tsup": "^8.4.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3"
+  }
 }

package/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-console.log("showpane v0.0.1 — full installer coming soon.");
-console.log("For now: git clone https://github.com/twillcocks/showpane.git && cd showpane && ./setup");