@hienlh/ppm 0.2.0 → 0.2.2

package/src/server/index.ts

@@ -1,6 +1,7 @@
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { configService } from "../services/config.service.ts";
+import { VERSION } from "../version.ts";
 import { authMiddleware } from "./middleware/auth.ts";
 import { projectRoutes } from "./routes/projects.ts";
 import { settingsRoutes } from "./routes/settings.ts";
@@ -10,13 +11,85 @@ import { terminalWebSocket } from "./ws/terminal.ts";
 import { chatWebSocket } from "./ws/chat.ts";
 import { ok } from "../types/api.ts";
 
+/** Tee console.log/error to ~/.ppm/ppm.log while preserving terminal output */
+async function setupLogFile() {
+  const { resolve } = await import("node:path");
+  const { homedir } = await import("node:os");
+  const { appendFileSync, mkdirSync, existsSync } = await import("node:fs");
+
+  const ppmDir = resolve(homedir(), ".ppm");
+  if (!existsSync(ppmDir)) mkdirSync(ppmDir, { recursive: true });
+  const logPath = resolve(ppmDir, "ppm.log");
+
+  const origLog = console.log.bind(console);
+  const origError = console.error.bind(console);
+  const origWarn = console.warn.bind(console);
+
+  /** Redact tokens, passwords, API keys, and other sensitive values from log output */
+  const redact = (text: string): string =>
+    text
+      .replace(/Token:\s*\S+/gi, "Token: [REDACTED]")
+      .replace(/Bearer\s+\S+/gi, "Bearer [REDACTED]")
+      .replace(/password['":\s]+\S+/gi, "password: [REDACTED]")
+      .replace(/api[_-]?key['":\s]+\S+/gi, "api_key: [REDACTED]")
+      .replace(/ANTHROPIC_API_KEY=\S+/gi, "ANTHROPIC_API_KEY=[REDACTED]")
+      .replace(/secret['":\s]+\S+/gi, "secret: [REDACTED]");
+
+  const writeLog = (level: string, args: unknown[]) => {
+    const ts = new Date().toISOString();
+    const msg = args.map((a) => (typeof a === "string" ? a : JSON.stringify(a))).join(" ");
+    try { appendFileSync(logPath, `[${ts}] [${level}] ${redact(msg)}\n`); } catch {}
+  };
+
+  console.log = (...args: unknown[]) => { origLog(...args); writeLog("INFO", args); };
+  console.error = (...args: unknown[]) => { origError(...args); writeLog("ERROR", args); };
+  console.warn = (...args: unknown[]) => { origWarn(...args); writeLog("WARN", args); };
+
+  // Capture uncaught errors
+  process.on("uncaughtException", (err) => {
+    writeLog("FATAL", [`Uncaught exception: ${err.stack ?? err.message}`]);
+  });
+  process.on("unhandledRejection", (reason) => {
+    writeLog("FATAL", [`Unhandled rejection: ${reason}`]);
+  });
+}
+
 export const app = new Hono();
 
 // CORS for dev
 app.use("*", cors());
 
-// Health check (before auth)
+// Public endpoints (before auth)
 app.get("/api/health", (c) => c.json(ok({ status: "running" })));
+app.get("/api/info", (c) => c.json(ok({
+  version: VERSION,
+  device_name: configService.get("device_name") || null,
+})));
+
+// Public: recent logs for bug reports (last 30 lines)
+app.get("/api/logs/recent", async (c) => {
+  const { resolve } = await import("node:path");
+  const { homedir } = await import("node:os");
+  const { existsSync, readFileSync } = await import("node:fs");
+  const logFile = resolve(homedir(), ".ppm", "ppm.log");
+  if (!existsSync(logFile)) return c.json(ok({ logs: "" }));
+  const content = readFileSync(logFile, "utf-8");
+  const lines = content.split("\n").slice(-30).join("\n").trim();
+  // Double-redact in case old logs have unredacted content
+  const redacted = lines
+    .replace(/Token:\s*\S+/gi, "Token: [REDACTED]")
+    .replace(/Bearer\s+\S+/gi, "Bearer [REDACTED]")
+    .replace(/password['":\s]+\S+/gi, "password: [REDACTED]")
+    .replace(/api[_-]?key['":\s]+\S+/gi, "api_key: [REDACTED]")
+    .replace(/ANTHROPIC_API_KEY=\S+/gi, "ANTHROPIC_API_KEY=[REDACTED]")
+    .replace(/secret['":\s]+\S+/gi, "secret: [REDACTED]");
+  return c.json(ok({ logs: redacted }));
+});
+
+// Dev-only: crash endpoint for testing health check UI
+if (process.env.NODE_ENV !== "production") {
+  app.get("/api/debug/crash", () => { process.exit(1); });
+}
 
 // Auth check endpoint (behind auth middleware)
 app.use("/api/*", authMiddleware);
@@ -42,6 +115,9 @@ export async function startServer(options: {
   const port = parseInt(options.port ?? String(configService.get("port")), 10);
   const host = configService.get("host");
 
+  // Setup log file (both foreground and daemon modes)
+  await setupLogFile();
+
   const isDaemon = !options.foreground;
 
   if (isDaemon) {
@@ -54,52 +130,87 @@ export async function startServer(options: {
     const pidFile = resolve(ppmDir, "ppm.pid");
     const statusFile = resolve(ppmDir, "status.json");
 
-    // If --share, download cloudflared in parent (shows progress to user)
+    // If --share, download cloudflared and start tunnel as independent process
+    let shareUrl: string | undefined;
+    let tunnelPid: number | undefined;
     if (options.share) {
       const { ensureCloudflared } = await import("../services/cloudflared.service.ts");
-      await ensureCloudflared();
+      const bin = await ensureCloudflared();
+
+      // Check if tunnel already running (reuse from previous server crash)
+      if (existsSync(statusFile)) {
+        try {
+          const prev = JSON.parse(readFileSync(statusFile, "utf-8"));
+          if (prev.tunnelPid && prev.shareUrl) {
+            try {
+              process.kill(prev.tunnelPid, 0); // Check alive
+              console.log(`  Reusing existing tunnel (PID: ${prev.tunnelPid})`);
+              shareUrl = prev.shareUrl;
+              tunnelPid = prev.tunnelPid;
+            } catch { /* tunnel dead, spawn new one */ }
+          }
+        } catch {}
+      }
+
+      // Spawn new tunnel if no existing one
+      if (!shareUrl) {
+        console.log("  Starting share tunnel...");
+        const { openSync: openFd } = await import("node:fs");
+        const tunnelLog = resolve(ppmDir, "tunnel.log");
+        const tfd = openFd(tunnelLog, "a");
+        const tunnelProc = Bun.spawn({
+          cmd: [bin, "tunnel", "--url", `http://localhost:${port}`],
+          stdio: ["ignore", "ignore", tfd],
+          env: process.env,
+        });
+        tunnelProc.unref();
+        tunnelPid = tunnelProc.pid;
+
+        // Parse URL from tunnel.log (poll stderr output)
+        const urlRegex = /https:\/\/[a-z0-9-]+\.trycloudflare\.com/;
+        const pollStart = Date.now();
+        while (Date.now() - pollStart < 30_000) {
+          await Bun.sleep(500);
+          try {
+            const logContent = readFileSync(tunnelLog, "utf-8");
+            const match = logContent.match(urlRegex);
+            if (match) { shareUrl = match[0]; break; }
+          } catch {}
+        }
+        if (!shareUrl) console.warn("  ⚠  Tunnel started but URL not detected.");
+      }
     }
 
-    // Spawn child process
+    // Spawn server child process with log file
+    const { openSync } = await import("node:fs");
+    const logFile = resolve(ppmDir, "ppm.log");
+    const logFd = openSync(logFile, "a");
     const child = Bun.spawn({
       cmd: [
         process.execPath, "run", import.meta.dir + "/index.ts", "__serve__",
-        String(port), host, options.config ?? "", options.share ? "share" : "",
+        String(port), host, options.config ?? "",
       ],
-      stdio: ["ignore", "ignore", "ignore"],
+      stdio: ["ignore", logFd, logFd],
       env: process.env,
     });
     child.unref();
-    writeFileSync(pidFile, String(child.pid));
 
-    // Poll for status.json (child writes it when ready)
-    const startTime = Date.now();
-    let status: { pid: number; port: number; host: string; shareUrl?: string } | null = null;
-    while (Date.now() - startTime < 30_000) {
-      if (existsSync(statusFile)) {
-        try {
-          status = JSON.parse(readFileSync(statusFile, "utf-8"));
-          break;
-        } catch { /* file not fully written yet */ }
-      }
-      await Bun.sleep(200);
-    }
+    // Write status file with both PIDs
+    const status = { pid: child.pid, port, host, shareUrl, tunnelPid };
+    writeFileSync(statusFile, JSON.stringify(status));
+    writeFileSync(pidFile, String(child.pid));
 
-    if (status) {
-      console.log(`\n  PPM daemon started (PID: ${status.pid})\n`);
-      console.log(`  ➜  Local:   http://localhost:${status.port}/`);
-      if (status.shareUrl) {
-        console.log(`  ➜  Share:   ${status.shareUrl}`);
-        if (!configService.get("auth").enabled) {
-          console.log(`\n  ⚠  Warning: auth is disabled — your IDE is publicly accessible!`);
-          console.log(`     Enable auth in ~/.ppm/config.yaml or restart without --share.`);
-        }
-        const qr = await import("qrcode-terminal");
-        console.log();
-        qr.generate(status.shareUrl, { small: true });
+    console.log(`\n  PPM v${VERSION} daemon started (PID: ${child.pid})\n`);
+    console.log(`  ➜  Local:   http://localhost:${port}/`);
+    if (shareUrl) {
+      console.log(`  ➜  Share:   ${shareUrl}`);
+      if (!configService.get("auth").enabled) {
+        console.log(`\n  ⚠  Warning: auth is disabled — your IDE is publicly accessible!`);
+        console.log(`     Enable auth in ~/.ppm/config.yaml or restart without --share.`);
       }
-    } else {
-      console.log(`\n  PPM daemon started (PID: ${child.pid}) but status not confirmed.`);
+      const qr = await import("qrcode-terminal");
+      console.log();
+      qr.generate(shareUrl, { small: true });
     }
 
     process.exit(0);
@@ -157,7 +268,7 @@ export async function startServer(options: {
     } as Parameters<typeof Bun.serve>[0] extends { websocket?: infer W } ? W : never,
   });
 
-  console.log(`\n  PPM v0.2.0 ready\n`);
+  console.log(`\n  PPM v${VERSION} ready\n`);
   console.log(`  ➜  Local:   http://localhost:${server.port}/`);
 
   const { networkInterfaces } = await import("node:os");
@@ -203,16 +314,9 @@ if (process.argv.includes("__serve__")) {
   const port = parseInt(process.argv[idx + 1] ?? "8080", 10);
   const host = process.argv[idx + 2] ?? "0.0.0.0";
   const configPath = process.argv[idx + 3] || undefined;
-  const shareFlag = process.argv[idx + 4] === "share";
 
   configService.load(configPath);
-
-  const { resolve } = await import("node:path");
-  const { homedir } = await import("node:os");
-  const { writeFileSync, unlinkSync } = await import("node:fs");
-
-  const statusFile = resolve(homedir(), ".ppm", "status.json");
-  const pidFile = resolve(homedir(), ".ppm", "ppm.pid");
+  await setupLogFile();
 
   Bun.serve({
     port,
@@ -264,27 +368,5 @@ if (process.argv.includes("__serve__")) {
     } as Parameters<typeof Bun.serve>[0] extends { websocket?: infer W } ? W : never,
   });
 
-  // Start tunnel if --share was passed (eagerly import so cleanup doesn't race)
-  let shareUrl: string | undefined;
-  const tunnel = shareFlag
-    ? (await import("../services/tunnel.service.ts")).tunnelService
-    : null;
-  if (tunnel) {
-    try {
-      shareUrl = await tunnel.startTunnel(port);
-    } catch { /* non-fatal: server runs without share URL */ }
-  }
-
-  // Write status file for parent to read
-  writeFileSync(statusFile, JSON.stringify({ pid: process.pid, port, host, shareUrl }));
-
-  // Cleanup on exit
-  const cleanup = () => {
-    try { unlinkSync(statusFile); } catch {}
-    try { unlinkSync(pidFile); } catch {}
-    tunnel?.stopTunnel();
-    process.exit(0);
-  };
-  process.on("SIGINT", cleanup);
-  process.on("SIGTERM", cleanup);
+  console.log(`Server child ready on port ${port}`);
 }

package/src/types/config.ts

@@ -1,4 +1,5 @@
 export interface PpmConfig {
+  device_name: string;
   port: number;
   host: string;
   auth: AuthConfig;
@@ -33,6 +34,7 @@ export interface AIProviderConfig {
 }
 
 export const DEFAULT_CONFIG: PpmConfig = {
+  device_name: "",
   port: 8080,
   host: "0.0.0.0",
   auth: { enabled: true, token: "" },

package/src/version.ts

@@ -0,0 +1,7 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const pkg = JSON.parse(readFileSync(resolve(import.meta.dir, "../package.json"), "utf-8"));
+
+/** App version from package.json — single source of truth */
+export const VERSION: string = pkg.version;

package/src/web/app.tsx

@@ -16,6 +16,7 @@ import {
 import { getAuthToken } from "@/lib/api-client";
 import { useUrlSync, parseUrlState } from "@/hooks/use-url-sync";
 import { useGlobalKeybindings } from "@/hooks/use-global-keybindings";
+import { useHealthCheck } from "@/hooks/use-health-check";
 import { CommandPalette } from "@/components/layout/command-palette";
 
 type AuthState = "checking" | "authenticated" | "unauthenticated";
@@ -25,6 +26,7 @@ export function App() {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const theme = useSettingsStore((s) => s.theme);
   const fetchProjects = useProjectStore((s) => s.fetchProjects);
+  const fetchServerInfo = useSettingsStore((s) => s.fetchServerInfo);
   const activeProject = useProjectStore((s) => s.activeProject);
 
   // Apply theme on mount and when it changes
@@ -40,6 +42,9 @@ export function App() {
     }
   }, [theme]);
 
+  // Fetch server info on mount (before auth — shown on login screen)
+  useEffect(() => { fetchServerInfo(); }, [fetchServerInfo]);
+
   // Auth check on mount
   useEffect(() => {
     async function checkAuth() {
@@ -73,6 +78,9 @@ export function App() {
   // Global keyboard shortcuts (Shift+Shift → command palette, Alt+[/] → cycle tabs)
   const { paletteOpen, closePalette } = useGlobalKeybindings();
 
+  // Health check — detects server crash/restart
+  useHealthCheck();
+
   // Fetch projects after auth, then restore from URL if applicable
   useEffect(() => {
     if (authState !== "authenticated") return;

package/src/web/components/auth/login-screen.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { setAuthToken } from "@/lib/api-client";
 import { Lock, AlertCircle } from "lucide-react";
+import { useSettingsStore } from "@/stores/settings-store";
 
 interface LoginScreenProps {
   onSuccess: () => void;
@@ -10,6 +11,7 @@ interface LoginScreenProps {
 
 export function LoginScreen({ onSuccess }: LoginScreenProps) {
   const [token, setToken] = useState("");
+  const deviceName = useSettingsStore((s) => s.deviceName);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -50,8 +52,13 @@ export function LoginScreen({ onSuccess }: LoginScreenProps) {
             <Lock className="size-6 text-primary" />
           </div>
           <h1 className="text-xl font-semibold text-foreground">PPM</h1>
+          {deviceName && (
+            <p className="text-xs text-text-subtle bg-surface-elevated inline-block px-2 py-0.5 rounded-full">
+              {deviceName}
+            </p>
+          )}
           <p className="text-sm text-text-secondary">
-            Enter your auth token to unlock
+            Enter your access password to unlock
           </p>
         </div>
 

package/src/web/components/layout/sidebar.tsx

@@ -9,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useSettingsStore } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 
 /** Max projects shown before needing to search (desktop) */
@@ -18,6 +19,8 @@ export function Sidebar() {
   const { projects, activeProject, setActiveProject, loading } =
     useProjectStore();
   const openTab = useTabStore((s) => s.openTab);
+  const deviceName = useSettingsStore((s) => s.deviceName);
+  const version = useSettingsStore((s) => s.version);
   const [query, setQuery] = useState("");
 
   const sorted = useMemo(() => sortByRecent(projects), [projects]);
@@ -41,6 +44,11 @@ export function Sidebar() {
       {/* Logo + project dropdown — same height as tab bar */}
       <div className="flex items-center gap-2 px-3 h-[41px] border-b border-border shrink-0">
         <span className="text-sm font-bold text-primary tracking-tight shrink-0">PPM</span>
+        {deviceName && (
+          <span className="text-[10px] text-text-subtle bg-surface-elevated px-1.5 py-0.5 rounded-full truncate max-w-[100px]" title={deviceName}>
+            {deviceName}
+          </span>
+        )}
 
         <DropdownMenu onOpenChange={() => setQuery("")}>
           <DropdownMenuTrigger asChild>
@@ -121,6 +129,13 @@ export function Sidebar() {
           </p>
         </div>
       )}
+
+      {/* Version footer */}
+      {version && (
+        <div className="px-3 py-1.5 border-t border-border shrink-0">
+          <span className="text-[10px] text-text-subtle">v{version}</span>
+        </div>
+      )}
     </aside>
   );
 }

package/src/web/components/ui/sonner.tsx

@@ -7,15 +7,18 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from "lucide-react"
-import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { useSettingsStore } from "@/stores/settings-store"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const theme = useSettingsStore((s) => s.theme)
+  const resolved = theme === "system"
+    ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+    : theme
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={resolved as ToasterProps["theme"]}
       className="toaster group"
       icons={{
         success: <CircleCheckIcon className="size-4" />,
@@ -26,9 +29,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       style={
         {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
+          "--normal-bg": "var(--color-popover)",
+          "--normal-text": "var(--color-popover-foreground)",
+          "--normal-border": "var(--color-border)",
           "--border-radius": "var(--radius)",
         } as React.CSSProperties
       }

package/src/web/hooks/use-health-check.ts

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+
+const POLL_INTERVAL = 5_000;
+const HEALTH_URL = "/api/health";
+const LOGS_URL = "/api/logs/recent";
+const REPO = "hienlh/ppm";
+
+/** Fetch recent server logs for bug report */
+async function fetchRecentLogs(): Promise<string> {
+  try {
+    const res = await fetch(LOGS_URL, { signal: AbortSignal.timeout(3000) });
+    const json = await res.json();
+    return json.ok ? json.data.logs : "(failed to fetch logs)";
+  } catch {
+    return "(server logs unavailable)";
+  }
+}
+
+/** Open GitHub issue pre-filled with crash context + logs */
+async function openBugReport() {
+  const logs = await fetchRecentLogs();
+  const title = encodeURIComponent("bug: server crashed unexpectedly");
+  const body = encodeURIComponent([
+    "## Environment",
+    `- URL: ${window.location.href}`,
+    `- UserAgent: ${navigator.userAgent}`,
+    `- Time: ${new Date().toISOString()}`,
+    "",
+    "## Description",
+    "The PPM server went down and restarted unexpectedly.",
+    "",
+    "## Steps to Reproduce",
+    "1. ",
+    "",
+    "## Recent Server Logs",
+    "```",
+    logs,
+    "```",
+  ].join("\n"));
+  window.open(`https://github.com/${REPO}/issues/new?title=${title}&body=${body}`, "_blank");
+}
+
+/**
+ * Periodically pings /api/health. When server goes down and comes back,
+ * shows a toast suggesting the user report a bug.
+ */
+export function useHealthCheck() {
+  const wasDown = useRef(false);
+  const isFirstCheck = useRef(true);
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setInterval>;
+
+    async function check() {
+      try {
+        const res = await fetch(HEALTH_URL, { signal: AbortSignal.timeout(3000) });
+        if (res.ok) {
+          if (wasDown.current && !isFirstCheck.current) {
+            toast.warning("Server was restarted", {
+              description: "PPM server went down and recovered. If unexpected, please report it.",
+              duration: 15_000,
+              action: {
+                label: "Report Bug",
+                onClick: () => openBugReport(),
+              },
+            });
+            wasDown.current = false;
+          }
+          isFirstCheck.current = false;
+        } else {
+          wasDown.current = true;
+        }
+      } catch {
+        if (!wasDown.current && !isFirstCheck.current) {
+          toast.error("Server unreachable", {
+            description: "PPM server is not responding. It may have crashed.",
+            duration: 10_000,
+          });
+        }
+        wasDown.current = true;
+      }
+    }
+
+    const initialDelay = setTimeout(() => {
+      check();
+      timer = setInterval(check, POLL_INTERVAL);
+    }, POLL_INTERVAL);
+
+    return () => {
+      clearTimeout(initialDelay);
+      clearInterval(timer);
+    };
+  }, []);
+}

package/src/web/stores/settings-store.ts

@@ -6,7 +6,10 @@ const STORAGE_KEY = "ppm-settings";
 
 interface SettingsState {
   theme: Theme;
+  deviceName: string | null;
+  version: string | null;
   setTheme: (theme: Theme) => void;
+  fetchServerInfo: () => Promise<void>;
 }
 
 function loadPersistedTheme(): Theme {
@@ -56,10 +59,26 @@ export function applyThemeClass(theme: Theme) {
 
 export const useSettingsStore = create<SettingsState>((set) => ({
   theme: loadPersistedTheme(),
+  deviceName: null,
+  version: null,
 
   setTheme: (theme) => {
     persistTheme(theme);
     applyThemeClass(theme);
     set({ theme });
   },
+
+  fetchServerInfo: async () => {
+    try {
+      const res = await fetch("/api/info");
+      const json = await res.json();
+      if (json.ok) {
+        const { device_name, version } = json.data;
+        set({ deviceName: device_name || null, version: version || null });
+        if (device_name) {
+          document.title = `PPM — ${device_name}`;
+        }
+      }
+    } catch {}
+  },
 }));