@hienlh/ppm 0.5.2 → 0.5.4

package/src/server/index.ts

@@ -254,14 +254,32 @@ export async function startServer(options: {
         const tunnelLog = resolve(ppmDir, "tunnel.log");
         // Truncate old log so we only match the new tunnel URL
         writeFs(tunnelLog, "");
-        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;
+
+        if (process.platform === "win32") {
+          // Windows: use PowerShell for detached tunnel process
+          const psCmd = [
+            `$p = Start-Process -PassThru -WindowStyle Hidden`,
+            `-FilePath '${bin.replace(/\\/g, "\\\\")}'`,
+            `-ArgumentList 'tunnel','--url','http://localhost:${port}'`,
+            `-RedirectStandardError '${tunnelLog.replace(/\\/g, "\\\\")}'`,
+            `; Write-Output $p.Id`,
+          ].join(" ");
+          const result = Bun.spawnSync({
+            cmd: ["powershell", "-NoProfile", "-Command", psCmd],
+            stdout: "pipe", stderr: "pipe",
+          });
+          tunnelPid = parseInt(result.stdout.toString().trim(), 10);
+          if (isNaN(tunnelPid)) tunnelPid = null;
+        } else {
+          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/;
@@ -282,22 +300,65 @@ export async function startServer(options: {
     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 ?? "",
-      ],
-      stdio: ["ignore", logFd, logFd],
-      env: process.env,
-    });
-    child.unref();
+    const { resolve: resolvePath } = await import("node:path");
+    const script = resolvePath(import.meta.dir, "index.ts");
+    const args = ["__serve__", String(port), host, options.config ?? ""];
+
+    let childPid: number;
+
+    if (process.platform === "win32") {
+      // Windows: Bun.spawn child may die when parent exits (same job object).
+      // Use PowerShell Start-Process to create a truly detached process.
+      const bunExe = process.execPath.replace(/\\/g, "\\\\");
+      const argStr = ["run", script, ...args].map((a) => `'${a}'`).join(",");
+      const psCmd = [
+        `$p = Start-Process -PassThru -WindowStyle Hidden`,
+        `-FilePath '${bunExe}'`,
+        `-ArgumentList ${argStr}`,
+        `-RedirectStandardOutput '${logFile.replace(/\\/g, "\\\\")}'`,
+        `-RedirectStandardError '${logFile.replace(/\\/g, "\\\\")}'`,
+        `; Write-Output $p.Id`,
+      ].join(" ");
+      const result = Bun.spawnSync({
+        cmd: ["powershell", "-NoProfile", "-Command", psCmd],
+        stdout: "pipe",
+        stderr: "pipe",
+      });
+      childPid = parseInt(result.stdout.toString().trim(), 10);
+      if (isNaN(childPid)) {
+        console.error("  ✗  Failed to start daemon on Windows.");
+        console.error(`     ${result.stderr.toString().trim()}`);
+        console.error("     Try: ppm start -f (foreground mode)");
+        process.exit(1);
+      }
+    } else {
+      // macOS/Linux: Bun.spawn + unref works fine
+      const child = Bun.spawn({
+        cmd: [process.execPath, "run", script, ...args],
+        stdio: ["ignore", logFd, logFd],
+        env: process.env,
+      });
+      child.unref();
+      childPid = child.pid;
+    }
+
+    // Verify daemon is alive after brief startup
+    await Bun.sleep(500);
+    let alive = false;
+    try { process.kill(childPid, 0); alive = true; } catch {}
+    if (!alive) {
+      console.error("  ✗  Daemon exited immediately after start.");
+      console.error("     Check logs: ppm logs");
+      console.error("     Or try: ppm start -f (foreground mode)");
+      process.exit(1);
+    }
 
     // Write status file with both PIDs
-    const status = { pid: child.pid, port, host, shareUrl, tunnelPid };
+    const status = { pid: childPid, port, host, shareUrl, tunnelPid };
     writeFileSync(statusFile, JSON.stringify(status));
-    writeFileSync(pidFile, String(child.pid));
+    writeFileSync(pidFile, String(childPid));
 
-    console.log(`\n  PPM v${VERSION} daemon started (PID: ${child.pid})\n`);
+    console.log(`\n  PPM v${VERSION} daemon started (PID: ${childPid})\n`);
     console.log(`  ➜  Local:   http://localhost:${port}/`);
     if (shareUrl) {
       console.log(`  ➜  Share:   ${shareUrl}`);

package/src/services/config.service.ts

@@ -23,12 +23,18 @@ class ConfigService {
     ].filter(Boolean) as string[];
 
     for (const p of searchPaths) {
-      if (existsSync(p)) {
+      const found = existsSync(p);
+      if (!found) {
+        console.log(`[config] Not found: ${p}`);
+        continue;
+      }
+      try {
         const raw = readFileSync(p, "utf-8");
         const parsed = yaml.load(raw) as Partial<PpmConfig> | null;
         if (parsed) {
           this.config = { ...structuredClone(DEFAULT_CONFIG), ...parsed };
           this.configPath = p;
+          console.log(`[config] Loaded from: ${p}`);
           // Auto-generate token if auth enabled but token is empty
           if (this.config.auth.enabled && !this.config.auth.token) {
             this.config.auth.token = randomBytes(16).toString("hex");
@@ -40,10 +46,14 @@ class ConfigService {
           }
           return this.config;
         }
+        console.log(`[config] Empty or invalid YAML: ${p}`);
+      } catch (err) {
+        console.error(`[config] Error reading ${p}:`, (err as Error).message);
       }
     }
 
     // No config found — create default
+    console.log(`[config] No config found, creating default at ${GLOBAL_CONFIG_PATH}`);
     this.config = this.createDefault();
     return this.config;
   }

package/src/web/components/chat/attachment-chips.tsx

@@ -10,7 +10,7 @@ export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps)
   if (attachments.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap gap-1.5 px-3 pt-2">
+    <div className="flex flex-wrap gap-1.5 px-2 md:px-4 pt-2">
       {attachments.map((att) => (
         <div
           key={att.id}

package/src/web/components/chat/chat-history-bar.tsx

@@ -149,9 +149,6 @@ export function ChatHistoryBar({
               <span className={pctColor(contextWindowPct)}>Ctx:{contextWindowPct}%</span>
             </>
           )}
-          {lastFetchedAt && (
-            <span className="text-text-subtle/50 font-normal text-[9px] ml-0.5">{relativeTime(lastFetchedAt)}</span>
-          )}
         </button>
 
         {/* Spacer */}

package/src/web/components/chat/message-input.tsx

@@ -57,6 +57,7 @@ export function MessageInput({
   const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const slashItemsRef = useRef<SlashItem[]>([]);
   const fileItemsRef = useRef<FileNode[]>([]);
@@ -238,7 +239,7 @@ export function MessageInput({
           );
         });
       }
-      textareaRef.current?.focus();
+      (mobileTextareaRef.current ?? textareaRef.current)?.focus();
     },
     [uploadFile],
   );
@@ -266,9 +267,8 @@ export function MessageInput({
       if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
     }
     setAttachments([]);
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto";
-    }
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
   }, [value, attachments, disabled, onSend, onSlashStateChange, onFileStateChange]);
 
   const handleKeyDown = useCallback(
@@ -320,8 +320,8 @@ export function MessageInput({
     [updatePickerState],
   );
 
-  const handleInput = useCallback(() => {
-    const el = textareaRef.current;
+  const handleInput = useCallback((e?: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const el = e?.target ?? textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = Math.min(el.scrollHeight, 160) + "px";
@@ -382,14 +382,13 @@ export function MessageInput({
 
   return (
     <div className="p-2 md:p-3 bg-background">
-      {/* Attachment chips (above input) */}
-      <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
-
       {/* Rounded input container */}
       <div
         className="border border-border rounded-xl md:rounded-2xl bg-surface shadow-sm cursor-text"
-        onClick={() => !disabled && textareaRef.current?.focus()}
+        onClick={() => !disabled && (mobileTextareaRef.current ?? textareaRef.current)?.focus()}
       >
+        {/* Attachment chips (inside container, aligned with input) */}
+        <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
         {/* Mobile: single row — attach + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
           <button
@@ -402,9 +401,9 @@ export function MessageInput({
             <Paperclip className="size-4" />
           </button>
           <textarea
-            ref={textareaRef}
+            ref={mobileTextareaRef}
             value={value}
-            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onChange={(e) => { handleChange(e.target.value); handleInput(e); }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             onDrop={handleDrop}
@@ -412,7 +411,7 @@ export function MessageInput({
             placeholder={isStreaming ? "Follow-up..." : "Ask anything..."}
             disabled={disabled}
             rows={1}
-            className="flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-32"
+            className="flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-20"
           />
           {showCancel ? (
             <button
@@ -439,7 +438,7 @@ export function MessageInput({
           <textarea
             ref={textareaRef}
             value={value}
-            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onChange={(e) => { handleChange(e.target.value); handleInput(e); }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             onDrop={handleDrop}

package/src/web/components/chat/message-list.tsx

@@ -5,6 +5,7 @@ import type { ChatMessage, ChatEvent } from "../../../types/chat";
 import type { StreamingStatus } from "@/hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
+import { basename } from "@/lib/utils";
 
 import {
   AlertCircle,
@@ -164,7 +165,7 @@ function parseUserAttachments(content: string): { files: string[]; text: string
 
 /** Build a preview URL for an uploaded file (served from /chat/uploads/:filename) */
 function uploadPreviewUrl(filePath: string, projectName?: string): string {
-  const filename = filePath.split("/").pop() ?? "";
+  const filename = basename(filePath);
   // Use a generic project name — the upload route is project-scoped but files are global
   return `/api/project/${encodeURIComponent(projectName ?? "_")}/chat/uploads/${encodeURIComponent(filename)}`;
 }
@@ -195,13 +196,13 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
                 <AuthImage
                   key={i}
                   src={uploadPreviewUrl(filePath, projectName)}
-                  alt={filePath.split("/").pop() ?? "image"}
+                  alt={basename(filePath) || "image"}
                 />
               ) : isPdfPath(filePath) ? (
                 <AuthFileLink
                   key={i}
                   src={uploadPreviewUrl(filePath, projectName)}
-                  filename={filePath.split("/").pop() ?? "document.pdf"}
+                  filename={basename(filePath) || "document.pdf"}
                   mimeType="application/pdf"
                 />
               ) : (
@@ -210,7 +211,7 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
                   className="flex items-center gap-1.5 rounded-md border border-border bg-background/50 px-2 py-1 text-xs text-text-secondary"
                 >
                   <FileText className="size-3.5 shrink-0" />
-                  <span className="truncate max-w-40">{filePath.split("/").pop()}</span>
+                  <span className="truncate max-w-40">{basename(filePath)}</span>
                 </div>
               ),
             )}

package/src/web/components/chat/tool-cards.tsx

@@ -21,6 +21,7 @@ import {
 } from "lucide-react";
 import type { ChatEvent } from "../../../types/chat";
 import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
 
 /** Extract tool name and input from a ChatEvent */
 function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<string, unknown> } {
@@ -165,7 +166,7 @@ function ToolDetails({
     if (!projectName) return;
     openTab({
       type: "editor",
-      title: filePath.split("/").pop() ?? filePath,
+      title: basename(filePath),
       metadata: { filePath, projectName },
       projectId: projectName,
       closable: true,
@@ -176,7 +177,7 @@ function ToolDetails({
   const openEditDiff = (filePath: string, oldStr: string, newStr: string) => {
     openTab({
       type: "git-diff",
-      title: `Diff ${filePath.split("/").pop() ?? filePath}`,
+      title: `Diff ${basename(filePath)}`,
       metadata: { filePath, projectName, original: oldStr, modified: newStr },
       projectId: projectName ?? null,
       closable: true,
@@ -453,10 +454,6 @@ function MiniMarkdown({ content, maxHeight = "max-h-48" }: { content: string; ma
   return <MarkdownRenderer content={content} className={`text-text-secondary overflow-auto ${maxHeight}`} />;
 }
 
-function basename(path?: string): string {
-  if (!path) return "";
-  return path.split("/").pop() ?? path;
-}
 
 function truncate(str?: string, max = 50): string {
   if (!str) return "";

package/src/web/components/editor/code-editor.tsx

@@ -5,6 +5,7 @@ import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { Loader2, FileWarning, ExternalLink, Code, Eye, WrapText } from "lucide-react";
 
@@ -91,7 +92,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   // Update tab title unsaved indicator
   useEffect(() => {
     if (!ownTab) return;
-    const baseName = filePath?.split("/").pop() ?? "Untitled";
+    const baseName = filePath ? basename(filePath) : "Untitled";
     const newTitle = unsaved ? `${baseName} \u25CF` : baseName;
     if (ownTab.title !== newTitle) updateTab(ownTab.id, { title: newTitle });
   }, [unsaved]); // eslint-disable-line react-hooks/exhaustive-deps

package/src/web/components/editor/diff-viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, useRef } from "react";
 import { DiffEditor } from "@monaco-editor/react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -43,6 +43,20 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const { wordWrap, toggleWordWrap } = useSettingsStore();
   const monacoTheme = useMonacoTheme();
 
+  // Measure container height — Monaco needs explicit pixel height on mobile
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number | undefined>();
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setContainerHeight(Math.floor(entry.contentRect.height));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   useEffect(() => {
     if (isInline) return;
     if (!projectName) return;
@@ -92,6 +106,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     return langFile ? getMonacoLanguage(langFile) : "plaintext";
   }, [filePath, file1, file2]);
 
+  // Force inline on mobile (<768px) since side-by-side is too narrow
+  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+  const renderSideBySide = !isMobile && expandMode === "both";
+
   if (!projectName && !isInline) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
@@ -125,9 +143,6 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     );
   }
 
-  // expandMode left/right → inline diff (Monaco has no single-side mode)
-  const renderSideBySide = expandMode === "both";
-
   const expandToggle = (
     <div className="flex items-center gap-0.5 shrink-0">
       <button type="button"
@@ -163,24 +178,30 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   return (
     <div className="flex flex-col h-full">
       {/* Monaco DiffEditor */}
-      <div className="flex-1 overflow-hidden">
-        <DiffEditor
-          height="100%"
-          language={language}
-          original={original}
-          modified={modified}
-          theme={monacoTheme}
-          options={{
-            fontSize: 13,
-            fontFamily: "Menlo, Monaco, Consolas, monospace",
-            wordWrap: wordWrap ? "on" : "off",
-            renderSideBySide,
-            readOnly: true,
-            automaticLayout: true,
-            scrollBeyondLastLine: false,
-          }}
-          loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
-        />
+      <div ref={containerRef} className="flex-1 overflow-hidden">
+        {containerHeight && containerHeight > 0 ? (
+          <DiffEditor
+            height={containerHeight}
+            language={language}
+            original={original}
+            modified={modified}
+            theme={monacoTheme}
+            options={{
+              fontSize: isMobile ? 11 : 13,
+              fontFamily: "Menlo, Monaco, Consolas, monospace",
+              wordWrap: isMobile ? "on" : wordWrap ? "on" : "off",
+              renderSideBySide,
+              readOnly: true,
+              automaticLayout: true,
+              scrollBeyondLastLine: false,
+            }}
+            loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="size-5 animate-spin text-text-subtle" />
+          </div>
+        )}
       </div>
     </div>
   );

package/src/web/components/explorer/file-tree.tsx

@@ -14,7 +14,7 @@ import {
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
-import { cn } from "@/lib/utils";
+import { cn, basename } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   ContextMenu,
@@ -220,8 +220,8 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     if (action === "compare-selected" && selectedFiles.length === 2) {
       const file1 = selectedFiles[0]!;
       const file2 = selectedFiles[1]!;
-      const name1 = file1.split("/").pop() ?? file1;
-      const name2 = file2.split("/").pop() ?? file2;
+      const name1 = basename(file1);
+      const name2 = basename(file2);
       openTab({
         type: "git-diff",
         title: `Compare ${name1} vs ${name2}`,

package/src/web/components/git/git-graph.tsx

@@ -14,6 +14,7 @@ import {
   GripVertical,
 } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
+import { basename } from "@/lib/utils";
 import { useTabStore } from "@/stores/tab-store";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -582,7 +583,7 @@ export function GitGraph({ metadata }: GitGraphProps) {
                 className="flex items-center gap-2 py-0.5 text-xs hover:bg-muted/50 rounded px-1 cursor-pointer"
                 onClick={() => openTab({
                   type: "git-diff",
-                  title: `Diff ${file.path.split("/").pop()}`,
+                  title: `Diff ${basename(file.path)}`,
                   closable: true,
                   metadata: {
                     projectName,