@hienlh/ppm 0.9.0-beta.7 → 0.9.0-beta.8

package/src/services/db.service.ts

@@ -4,7 +4,7 @@ import { homedir } from "node:os";
 import { mkdirSync, existsSync } from "node:fs";
 
 const PPM_DIR = process.env.PPM_HOME || resolve(homedir(), ".ppm");
-const CURRENT_SCHEMA_VERSION = 5;
+const CURRENT_SCHEMA_VERSION = 8;
 
 let db: Database | null = null;
 let dbProfile: string | null = null;
@@ -228,6 +228,26 @@ function runMigrations(database: Database): void {
     }
     database.exec(`PRAGMA user_version = 7`);
   }
+
+  if (current < 8) {
+    database.exec(`
+      CREATE TABLE IF NOT EXISTS mcp_servers (
+        name TEXT PRIMARY KEY,
+        transport TEXT NOT NULL DEFAULT 'stdio',
+        config TEXT NOT NULL,
+        created_at TEXT DEFAULT (datetime('now')),
+        updated_at TEXT DEFAULT (datetime('now'))
+      );
+
+      CREATE TABLE IF NOT EXISTS session_titles (
+        session_id TEXT PRIMARY KEY,
+        title TEXT NOT NULL,
+        updated_at TEXT DEFAULT (datetime('now'))
+      );
+
+      PRAGMA user_version = 8;
+    `);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -311,6 +331,33 @@ export function getAllSessionMappings(): Record<string, string> {
   return result;
 }
 
+// ---------------------------------------------------------------------------
+// Session title helpers (user-set titles persisted in PPM DB)
+// ---------------------------------------------------------------------------
+
+export function getSessionTitle(sessionId: string): string | null {
+  const row = getDb().query("SELECT title FROM session_titles WHERE session_id = ?").get(sessionId) as { title: string } | null;
+  return row?.title ?? null;
+}
+
+export function setSessionTitle(sessionId: string, title: string): void {
+  getDb().query(
+    "INSERT INTO session_titles (session_id, title, updated_at) VALUES (?, ?, datetime('now')) ON CONFLICT(session_id) DO UPDATE SET title = excluded.title, updated_at = excluded.updated_at",
+  ).run(sessionId, title);
+}
+
+/** Bulk-fetch DB titles for a list of session IDs. Returns map of id → title. */
+export function getSessionTitles(sessionIds: string[]): Record<string, string> {
+  if (sessionIds.length === 0) return {};
+  const placeholders = sessionIds.map(() => "?").join(", ");
+  const rows = getDb().query(
+    `SELECT session_id, title FROM session_titles WHERE session_id IN (${placeholders})`,
+  ).all(...sessionIds) as { session_id: string; title: string }[];
+  const result: Record<string, string> = {};
+  for (const r of rows) result[r.session_id] = r.title;
+  return result;
+}
+
 // ---------------------------------------------------------------------------
 // Push subscription helpers
 // ---------------------------------------------------------------------------
@@ -441,13 +488,13 @@ export function insertLimitSnapshot(data: Omit<LimitSnapshotRow, "id" | "recorde
 
 export function getLatestLimitSnapshot(): LimitSnapshotRow | null {
   return getDb().query(
-    "SELECT * FROM claude_limit_snapshots ORDER BY recorded_at DESC LIMIT 1",
+    "SELECT * FROM claude_limit_snapshots ORDER BY recorded_at DESC, id DESC LIMIT 1",
   ).get() as LimitSnapshotRow | null;
 }
 
 export function getLatestSnapshotForAccount(accountId: string): LimitSnapshotRow | null {
   return getDb().query(
-    "SELECT * FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC LIMIT 1",
+    "SELECT * FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC, id DESC LIMIT 1",
   ).get(accountId) as LimitSnapshotRow | null;
 }
 
@@ -455,17 +502,17 @@ export function getAllLatestSnapshots(): LimitSnapshotRow[] {
   return getDb().query(
     `SELECT s.* FROM claude_limit_snapshots s
      INNER JOIN (
-       SELECT account_id, MAX(recorded_at) as max_recorded
+       SELECT account_id, MAX(id) as max_id
        FROM claude_limit_snapshots WHERE account_id IS NOT NULL
        GROUP BY account_id
-     ) latest ON s.account_id = latest.account_id AND s.recorded_at = latest.max_recorded`,
+     ) latest ON s.id = latest.max_id`,
   ).all() as LimitSnapshotRow[];
 }
 
 export function touchSnapshotTimestamp(accountId: string): void {
   getDb().query(
     `UPDATE claude_limit_snapshots SET recorded_at = datetime('now')
-     WHERE id = (SELECT id FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC LIMIT 1)`,
+     WHERE id = (SELECT id FROM claude_limit_snapshots WHERE account_id = ? ORDER BY recorded_at DESC, id DESC LIMIT 1)`,
   ).run(accountId);
 }
 

package/src/services/mcp-config.service.ts

@@ -0,0 +1,102 @@
+import type { Database } from "bun:sqlite";
+import type { McpServerConfig, McpTransportType } from "../types/mcp";
+import { validateMcpName, validateMcpConfig } from "../types/mcp";
+import { getDb } from "./db.service";
+
+function resolveTransport(config: McpServerConfig): McpTransportType {
+  if ("type" in config && config.type) return config.type;
+  return "stdio";
+}
+
+function safeParse(json: string, label: string): McpServerConfig | null {
+  try { return JSON.parse(json); }
+  catch { console.warn(`[mcp] Skipping ${label}: corrupt config`); return null; }
+}
+
+export class McpConfigService {
+  private explicitDb: Database | null;
+
+  constructor(db?: Database) {
+    this.explicitDb = db ?? null;
+  }
+
+  /** Get DB — explicit (testing) or lazy singleton */
+  private get db(): Database {
+    return this.explicitDb ?? getDb();
+  }
+
+  /** List all MCP servers as Record (SDK-compatible format) */
+  list(): Record<string, McpServerConfig> {
+    const rows = this.db.query("SELECT name, config FROM mcp_servers ORDER BY name").all() as { name: string; config: string }[];
+    const result: Record<string, McpServerConfig> = {};
+    for (const row of rows) {
+      const parsed = safeParse(row.config, row.name);
+      if (parsed) result[row.name] = parsed;
+    }
+    return result;
+  }
+
+  /** List as array with metadata (for UI) */
+  listWithMeta(): Array<{ name: string; transport: string; config: McpServerConfig; createdAt: string; updatedAt: string }> {
+    const rows = this.db.query("SELECT name, transport, config, created_at, updated_at FROM mcp_servers ORDER BY name").all() as {
+      name: string; transport: string; config: string; created_at: string; updated_at: string;
+    }[];
+    const result: Array<{ name: string; transport: string; config: McpServerConfig; createdAt: string; updatedAt: string }> = [];
+    for (const r of rows) {
+      const parsed = safeParse(r.config, r.name);
+      if (parsed) result.push({ name: r.name, transport: r.transport, config: parsed, createdAt: r.created_at, updatedAt: r.updated_at });
+    }
+    return result;
+  }
+
+  /** Get single server */
+  get(name: string): McpServerConfig | null {
+    const row = this.db.query("SELECT config FROM mcp_servers WHERE name = ?").get(name) as { config: string } | null;
+    return row ? safeParse(row.config, name) : null;
+  }
+
+  /** Add or update server */
+  set(name: string, config: McpServerConfig): void {
+    const transport = resolveTransport(config);
+    this.db.query(`
+      INSERT INTO mcp_servers (name, transport, config, updated_at)
+      VALUES (?, ?, ?, datetime('now'))
+      ON CONFLICT(name) DO UPDATE SET
+        transport = excluded.transport,
+        config = excluded.config,
+        updated_at = datetime('now')
+    `).run(name, transport, JSON.stringify(config));
+  }
+
+  /** Remove server. Returns true if deleted. */
+  remove(name: string): boolean {
+    const result = this.db.query("DELETE FROM mcp_servers WHERE name = ?").run(name);
+    return result.changes > 0;
+  }
+
+  /** Check if name exists */
+  exists(name: string): boolean {
+    const row = this.db.query("SELECT 1 FROM mcp_servers WHERE name = ?").get(name);
+    return row != null;
+  }
+
+  /** Bulk insert (for import) — validates entries, skips existing/invalid, wrapped in transaction */
+  bulkImport(servers: Record<string, McpServerConfig>): { imported: number; skipped: number } {
+    let imported = 0, skipped = 0;
+    const tx = this.db.transaction(() => {
+      for (const [name, config] of Object.entries(servers)) {
+        if (this.exists(name)) { skipped++; continue; }
+        const nameErr = validateMcpName(name);
+        if (nameErr) { skipped++; continue; }
+        const configErrs = validateMcpConfig(config);
+        if (configErrs.length) { skipped++; continue; }
+        this.set(name, config);
+        imported++;
+      }
+    });
+    tx();
+    return { imported, skipped };
+  }
+}
+
+export const mcpConfigService = new McpConfigService();

package/src/services/supervisor.ts

@@ -328,6 +328,9 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
   const currentSupervisorPid = process.pid;
 
   try {
+    // Prevent spawnServer crash-restart loop from respawning killed children
+    shuttingDown = true;
+
     // Kill server + tunnel children FIRST to free the port for the new supervisor
     log("INFO", "Stopping server and tunnel before spawning new supervisor");
     if (serverChild) { try { serverChild.kill(); } catch {} serverChild = null; }
@@ -365,12 +368,14 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
       } catch {}
     }
 
-    // Timeout — new supervisor didn't start
+    // Timeout — new supervisor didn't start, restore old supervisor
     log("ERROR", "Self-replace timeout: new supervisor did not start");
     try { child.kill(); } catch {}
+    shuttingDown = false;
     return { success: false, error: "New supervisor failed to start within 30s" };
   } catch (e) {
     log("ERROR", `Self-replace error: ${e}`);
+    shuttingDown = false;
     return { success: false, error: (e as Error).message };
   }
 }
@@ -436,7 +441,12 @@ export async function runSupervisor(opts: {
   process.on("SIGUSR1", async () => {
     log("INFO", "SIGUSR1 received, starting self-replace for upgrade");
     const result = await selfReplace();
-    if (!result.success) log("ERROR", `Self-replace failed: ${result.error}`);
+    if (!result.success) {
+      log("ERROR", `Self-replace failed: ${result.error}, restarting children`);
+      // Respawn server (and tunnel if configured) since selfReplace killed them
+      spawnServer(serverArgs, logFd);
+      if (opts.share) spawnTunnel(opts.port);
+    }
   });
 
   // Start health checks

package/src/types/mcp.ts

@@ -0,0 +1,47 @@
+/** stdio transport */
+export interface McpStdioConfig {
+  type?: "stdio";
+  command: string;
+  args?: string[];
+  env?: Record<string, string>;
+}
+
+/** HTTP transport */
+export interface McpHttpConfig {
+  type: "http";
+  url: string;
+  headers?: Record<string, string>;
+}
+
+/** SSE transport */
+export interface McpSseConfig {
+  type: "sse";
+  url: string;
+  headers?: Record<string, string>;
+}
+
+export type McpServerConfig = McpStdioConfig | McpHttpConfig | McpSseConfig;
+export type McpTransportType = "stdio" | "http" | "sse";
+
+export function validateMcpName(name: string): string | null {
+  if (!name || !/^[a-zA-Z0-9][a-zA-Z0-9_-]*$/.test(name)) return "Name must start with a letter/digit, then alphanumeric, hyphens, or underscores";
+  if (name.length > 50) return "Name max 50 chars";
+  return null;
+}
+
+export function validateMcpConfig(config: unknown): string[] {
+  const errors: string[] = [];
+  if (!config || typeof config !== "object") return ["Config must be an object"];
+  const c = config as Record<string, unknown>;
+  const type = (c.type as string) ?? "stdio";
+
+  if (type === "stdio") {
+    if (!c.command || typeof c.command !== "string") errors.push("command is required for stdio");
+  } else if (type === "http" || type === "sse") {
+    if (!c.url || typeof c.url !== "string") errors.push("url is required for " + type);
+    if (c.url && typeof c.url === "string" && !/^https?:\/\/.+/.test(c.url)) errors.push("url must be HTTP(S)");
+  } else {
+    errors.push("type must be stdio, http, or sse");
+  }
+  return errors;
+}

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

@@ -7,7 +7,12 @@ 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";
+import { Loader2, FileWarning, ExternalLink } from "lucide-react";
+import { EditorBreadcrumb } from "./editor-breadcrumb";
+import { EditorToolbar } from "./editor-toolbar";
+import { lazy, Suspense } from "react";
+
+const CsvPreview = lazy(() => import("./csv-preview").then((m) => ({ default: m.CsvPreview })));
 
 /** Image extensions renderable inline */
 const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg", "ico"]);
@@ -58,7 +63,9 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   const isPdf = ext === "pdf";
   const isSqlite = SQLITE_EXTS.has(ext);
   const isMarkdown = ext === "md" || ext === "mdx";
+  const isCsv = ext === "csv";
   const [mdMode, setMdMode] = useState<"edit" | "preview">("preview");
+  const [csvMode, setCsvMode] = useState<"table" | "raw">("table");
 
   // Redirect .db files to sqlite viewer by changing tab type
   useEffect(() => {
@@ -196,33 +203,36 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
     );
   }
 
-  const mdModeButtons = isMarkdown ? (
-    <>
-      <button type="button" onClick={() => setMdMode("edit")}
-        className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${mdMode === "edit" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
-      >
-        <Code className="size-3" /> Edit
-      </button>
-      <button type="button" onClick={() => setMdMode("preview")}
-        className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${mdMode === "preview" ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
-      >
-        <Eye className="size-3" /> Preview
-      </button>
-    </>
-  ) : null;
-
-  const wrapBtn = (
-    <button type="button" onClick={toggleWordWrap} title="Toggle word wrap (Alt+Z)"
-      className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${wordWrap ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`}
-    >
-      <WrapText className="size-3" />
-      <span className="hidden sm:inline">Wrap</span>
-    </button>
-  );
-
   return (
     <div className="flex flex-col h-full w-full overflow-hidden">
-      {isMarkdown && mdMode === "preview" ? (
+      {/* Breadcrumb + Toolbar bar — desktop only */}
+      {filePath && projectName && tabId && (
+        <div className="hidden md:flex items-center h-7 border-b border-border bg-background shrink-0">
+          <EditorBreadcrumb
+            filePath={filePath}
+            projectName={projectName}
+            tabId={tabId}
+            className="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none px-2 gap-0.5"
+          />
+          <EditorToolbar
+            ext={ext}
+            mdMode={mdMode}
+            onMdModeChange={setMdMode}
+            csvMode={csvMode}
+            onCsvModeChange={setCsvMode}
+            wordWrap={wordWrap}
+            onToggleWordWrap={toggleWordWrap}
+            className="shrink-0 flex items-center gap-1 px-2"
+          />
+        </div>
+      )}
+
+      {/* Content area */}
+      {isCsv && csvMode === "table" ? (
+        <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-5 animate-spin text-text-subtle" /></div>}>
+          <CsvPreview content={content ?? ""} onContentChange={handleChange} wordWrap={wordWrap} />
+        </Suspense>
+      ) : isMarkdown && mdMode === "preview" ? (
         <MarkdownPreview content={content ?? ""} />
       ) : (
         <div className="flex-1 overflow-hidden">

package/src/web/components/editor/csv-preview.tsx

@@ -0,0 +1,228 @@
+import { useState, useMemo, useRef, useCallback, useEffect } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { parseCsv, serializeCsv } from "@/lib/csv-parser";
+import { ArrowUp, ArrowDown } from "lucide-react";
+
+interface CsvPreviewProps {
+  content: string;
+  onContentChange: (csv: string) => void;
+  wordWrap?: boolean;
+}
+
+export function CsvPreview({ content, onContentChange, wordWrap }: CsvPreviewProps) {
+  const parsed = useMemo(() => parseCsv(content), [content]);
+  const [rows, setRows] = useState<string[][]>(() => parsed.rows);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const internalEditRef = useRef(false);
+
+  // Sync when content changes externally (e.g. file reload) — skip if we triggered it
+  useEffect(() => {
+    if (internalEditRef.current) {
+      internalEditRef.current = false;
+      return;
+    }
+    setRows(parsed.rows);
+  }, [parsed.rows]);
+
+  const headers = parsed.headers;
+
+  const updateCell = useCallback(
+    (rowIndex: number, colIndex: number, value: string) => {
+      setRows((prev) => {
+        const next = prev.map((r, i) => (i === rowIndex ? [...r] : r));
+        next[rowIndex]![colIndex] = value;
+        internalEditRef.current = true;
+        onContentChange(serializeCsv(headers, next));
+        return next;
+      });
+    },
+    [headers, onContentChange],
+  );
+
+  const columns = useMemo<ColumnDef<string[], string>[]>(
+    () =>
+      headers.map((h, i) => ({
+        id: `col-${i}`,
+        header: h || `Column ${i + 1}`,
+        accessorFn: (row: string[]) => row[i] ?? "",
+        cell: ({ row, getValue }) => (
+          <CsvCell
+            value={getValue()}
+            onSave={(v) => updateCell(row.index, i, v)}
+            wordWrap={wordWrap}
+          />
+        ),
+        size: 150,
+        minSize: 80,
+      })),
+    [headers, updateCell, wordWrap],
+  );
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+  });
+
+  const { rows: tableRows } = table.getRowModel();
+
+  const virtualizer = useVirtualizer({
+    count: tableRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 32,
+    overscan: 20,
+  });
+
+  if (headers.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+        Empty CSV file
+      </div>
+    );
+  }
+
+  return (
+    <div ref={scrollRef} className="flex-1 overflow-auto">
+      <table className="w-full text-xs font-mono border-collapse">
+        <thead className="sticky top-0 bg-background z-10 border-b border-border block">
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id} className="flex w-full">
+              {hg.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="relative text-left px-2 py-1.5 font-medium text-muted-foreground select-none cursor-pointer hover:bg-muted/50 border-r border-border last:border-r-0"
+                  style={{ width: header.getSize(), minWidth: header.getSize() }}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1">
+                    <span className="truncate">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                    {header.column.getIsSorted() === "asc" && <ArrowUp className="size-3 shrink-0" />}
+                    {header.column.getIsSorted() === "desc" && <ArrowDown className="size-3 shrink-0" />}
+                  </div>
+                  {/* Resize handle */}
+                  <div
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    onClick={(e) => e.stopPropagation()}
+                    className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/50 active:bg-primary"
+                  />
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody style={{ height: virtualizer.getTotalSize(), position: "relative", display: "block" }}>
+          {virtualizer.getVirtualItems().map((vRow) => {
+            const row = tableRows[vRow.index]!;
+            return (
+              <tr
+                key={row.id}
+                data-index={vRow.index}
+                ref={(node) => virtualizer.measureElement(node)}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${vRow.start}px)`,
+                  display: "flex",
+                }}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    className={`px-2 py-1 border-b border-border/50 border-r border-r-border/30 last:border-r-0 ${wordWrap ? "whitespace-pre-wrap break-words" : "truncate"}`}
+                    style={{ width: cell.column.getSize(), minWidth: cell.column.getSize() }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function CsvCell({ value, onSave, wordWrap }: { value: string; onSave: (v: string) => void; wordWrap?: boolean }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea to fit content
+  const autoResize = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      autoResize(textareaRef.current);
+    }
+  }, [editing, autoResize]);
+
+  if (!editing) {
+    return (
+      <span
+        className={`block cursor-text ${wordWrap ? "whitespace-pre-wrap break-words" : "truncate"}`}
+        onClick={() => {
+          setDraft(value);
+          setEditing(true);
+        }}
+      >
+        {value || "\u00A0"}
+      </span>
+    );
+  }
+
+  const isMultiline = draft.includes("\n");
+
+  return (
+    <textarea
+      ref={textareaRef}
+      className="w-full bg-transparent outline-none border border-primary/50 rounded text-xs font-mono resize-none p-0.5"
+      style={{ minHeight: isMultiline ? 48 : 20 }}
+      rows={1}
+      value={draft}
+      onChange={(e) => {
+        setDraft(e.target.value);
+        autoResize(e.target);
+      }}
+      onBlur={() => {
+        setEditing(false);
+        if (draft !== value) onSave(draft);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          // Enter = save, Shift+Enter = newline
+          e.preventDefault();
+          setEditing(false);
+          if (draft !== value) onSave(draft);
+        } else if (e.key === "Escape") {
+          setEditing(false);
+          setDraft(value);
+        }
+      }}
+    />
+  );
+}