@hienlh/ppm 0.6.6 → 0.7.0

package/src/services/fs-browse.service.ts

@@ -0,0 +1,216 @@
+import {
+  existsSync,
+  readdirSync,
+  statSync,
+  lstatSync,
+  readFileSync,
+  writeFileSync,
+} from "node:fs";
+import { resolve, basename, dirname, normalize } from "node:path";
+import { homedir } from "node:os";
+
+// ── Types ──────────────────────────────────────────────────────────
+
+export interface BrowseEntry {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  size?: number;
+  modified: string;
+}
+
+export interface BrowseResult {
+  entries: BrowseEntry[];
+  current: string;
+  parent: string | null;
+  breadcrumbs: { name: string; path: string }[];
+}
+
+export interface BrowseOptions {
+  showHidden?: boolean;
+}
+
+// ── Constants ──────────────────────────────────────────────────────
+
+const SKIP_NAMES = new Set([".git", "node_modules", ".DS_Store"]);
+const LIST_MAX_FILES = 200;
+const LIST_MAX_DEPTH = 4;
+const READ_MAX_SIZE = 5 * 1024 * 1024; // 5 MB
+
+/** Roots allowed for system-level browsing (outside project scope). */
+const ALLOWED_ROOTS_POSIX = ["/Volumes", "/mnt", "/media", "/tmp", "/home"];
+
+// ── Shared helpers ─────────────────────────────────────────────────
+
+/** Resolve a path, expanding leading `~` to home directory. */
+export function resolvePath(input: string): string {
+  const home = homedir();
+  return input.startsWith("~")
+    ? resolve(home, input.slice(2))
+    : resolve(input);
+}
+
+/** Check if an absolute path is within the allowed whitelist. */
+export function isAllowedPath(resolved: string): boolean {
+  const home = homedir();
+  if (resolved === home || resolved.startsWith(home + "/")) return true;
+
+  if (process.platform === "win32") {
+    return /^[A-Z]:\\/i.test(resolved);
+  }
+
+  return ALLOWED_ROOTS_POSIX.some(
+    (r) => resolved === r || resolved.startsWith(r + "/"),
+  );
+}
+
+// ── Browse (new) ───────────────────────────────────────────────────
+
+/** List entries of a single directory (1-level, structured). */
+export function browse(
+  dirPath?: string,
+  options?: BrowseOptions,
+): BrowseResult {
+  const resolved = dirPath ? resolvePath(dirPath) : homedir();
+
+  if (!isAllowedPath(resolved)) {
+    throw Object.assign(new Error("Access denied"), { status: 403 });
+  }
+  if (!existsSync(resolved)) {
+    throw Object.assign(new Error("Directory not found"), { status: 404 });
+  }
+  if (!statSync(resolved).isDirectory()) {
+    throw Object.assign(new Error("Not a directory"), { status: 400 });
+  }
+
+  const raw = readdirSync(resolved, { withFileTypes: true });
+  const entries: BrowseEntry[] = [];
+
+  for (const entry of raw) {
+    if (!options?.showHidden && entry.name.startsWith(".")) continue;
+    if (entry.name.startsWith(".env")) continue; // always hide .env*
+
+    const fullPath = resolve(resolved, entry.name);
+    try {
+      if (lstatSync(fullPath).isSymbolicLink()) continue;
+      const st = statSync(fullPath);
+      entries.push({
+        name: entry.name,
+        path: fullPath,
+        type: st.isDirectory() ? "directory" : "file",
+        size: st.isFile() ? st.size : undefined,
+        modified: st.mtime.toISOString(),
+      });
+    } catch {
+      /* permission denied — skip */
+    }
+  }
+
+  entries.sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  const parentDir = dirname(resolved);
+  return {
+    entries,
+    current: resolved,
+    parent: parentDir !== resolved ? parentDir : null,
+    breadcrumbs: buildBreadcrumbs(resolved),
+  };
+}
+
+function buildBreadcrumbs(
+  absPath: string,
+): { name: string; path: string }[] {
+  const home = homedir();
+  const parts: { name: string; path: string }[] = [];
+  let current = absPath;
+
+  while (current !== dirname(current)) {
+    if (current === home) {
+      parts.unshift({ name: "~", path: current });
+      return parts;
+    }
+    parts.unshift({ name: basename(current), path: current });
+    current = dirname(current);
+  }
+
+  // Reached filesystem root
+  if (!parts.length || parts[0]!.path !== current) {
+    parts.unshift({ name: basename(current) || "/", path: current });
+  }
+  return parts;
+}
+
+// ── List (moved from index.ts inline) ──────────────────────────────
+
+/** Recursive file listing for command palette. */
+export function list(dir: string): string[] {
+  const resolved = resolvePath(dir);
+  if (!isAllowedPath(resolved)) {
+    throw Object.assign(new Error("Access denied"), { status: 403 });
+  }
+
+  const files: string[] = [];
+
+  function walk(dirPath: string, depth: number) {
+    if (depth > LIST_MAX_DEPTH || files.length >= LIST_MAX_FILES) return;
+    let entries: import("node:fs").Dirent[];
+    try {
+      entries = readdirSync(dirPath, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (SKIP_NAMES.has(entry.name)) continue;
+      const full = resolve(dirPath, entry.name);
+      if (entry.isFile()) {
+        files.push(full);
+        if (files.length >= LIST_MAX_FILES) return;
+      } else if (entry.isDirectory()) {
+        walk(full, depth + 1);
+      }
+    }
+  }
+
+  walk(resolved, 0);
+  return files;
+}
+
+// ── Read (moved from index.ts inline) ──────────────────────────────
+
+/** Read a file outside project scope. */
+export function readSystemFile(
+  filePath: string,
+): { content: string; path: string } {
+  const resolved = resolvePath(filePath);
+  if (!isAllowedPath(resolved)) {
+    throw Object.assign(new Error("Access denied"), { status: 403 });
+  }
+  if (!existsSync(resolved)) {
+    throw Object.assign(new Error("File not found"), { status: 404 });
+  }
+
+  const st = statSync(resolved);
+  if (!st.isFile()) {
+    throw Object.assign(new Error("Not a file"), { status: 400 });
+  }
+  if (st.size > READ_MAX_SIZE) {
+    throw Object.assign(new Error("File too large (>5MB)"), { status: 400 });
+  }
+
+  const content = readFileSync(resolved, "utf-8");
+  return { content, path: resolved };
+}
+
+// ── Write (moved from index.ts inline) ─────────────────────────────
+
+/** Write a file outside project scope. */
+export function writeSystemFile(filePath: string, content: string): void {
+  const resolved = resolvePath(filePath);
+  if (!isAllowedPath(resolved)) {
+    throw Object.assign(new Error("Access denied"), { status: 403 });
+  }
+  writeFileSync(resolved, content, "utf-8");
+}

package/src/services/notification.service.ts

@@ -0,0 +1,42 @@
+import { hasActiveClient } from "../server/ws/chat.ts";
+
+export type NotificationType = "done" | "approval_request" | "question";
+
+export interface NotificationPayload {
+  title: string;
+  body: string;
+  project: string;
+  sessionId: string;
+  sessionTitle?: string;
+  tool?: string;
+  deviceName?: string;
+}
+
+class NotificationService {
+  /** Broadcast notification to all channels (push, telegram). Fire-and-forget. */
+  async broadcast(_type: NotificationType, payload: NotificationPayload): Promise<void> {
+    const tasks: Promise<void>[] = [];
+    const userOnline = hasActiveClient();
+
+    // Push notifications — always send (works as ambient alert)
+    tasks.push(
+      import("./push-notification.service.ts")
+        .then(({ pushService }) => pushService.notifyAll(payload.title, payload.body))
+        .catch(() => {}),
+    );
+
+    // Telegram — only when user has no active browser session
+    if (!userOnline) {
+      tasks.push(
+        import("./telegram-notification.service.ts")
+          .then(({ telegramService }) => telegramService.send(payload))
+          .catch(() => {}),
+      );
+    }
+
+    await Promise.allSettled(tasks);
+  }
+}
+
+/** Singleton notification dispatcher */
+export const notificationService = new NotificationService();

package/src/services/telegram-notification.service.ts

@@ -0,0 +1,106 @@
+import { configService } from "./config.service.ts";
+import { tunnelService } from "./tunnel.service.ts";
+import { getLocalIp } from "../lib/network-utils.ts";
+import type { TelegramConfig } from "../types/config.ts";
+import type { NotificationPayload } from "./notification.service.ts";
+
+const BOT_TOKEN_RE = /^\d+:[A-Za-z0-9_-]{30,50}$/;
+
+/** Escape HTML special chars for Telegram HTML parse mode */
+function escapeHtml(str: string): string {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+class TelegramNotificationService {
+  /** Send notification to Telegram. No-op if not configured. */
+  async send(payload: NotificationPayload): Promise<void> {
+    const config = configService.get("telegram") as TelegramConfig | undefined;
+    if (!config?.bot_token || !config?.chat_id) return;
+    if (!BOT_TOKEN_RE.test(config.bot_token)) return;
+
+    const deviceName = (configService.get("device_name") as string) || "PPM";
+    const deepLink = this.buildDeepLink(payload);
+
+    let text = `<b>${escapeHtml(deviceName)} — ${escapeHtml(payload.title)}</b>\n`;
+    text += escapeHtml(payload.body);
+    if (deepLink) {
+      text += `\n\n<a href="${deepLink}">Open in PPM</a>`;
+    }
+
+    await this.callApi(config.bot_token, config.chat_id, text);
+  }
+
+  /** Send a test message. Returns { ok, error? } */
+  async sendTest(botToken: string, chatId: string): Promise<{ ok: boolean; error?: string }> {
+    if (!BOT_TOKEN_RE.test(botToken)) return { ok: false, error: "Invalid bot token format" };
+    const deviceName = (configService.get("device_name") as string) || "PPM";
+    const text = `<b>${escapeHtml(deviceName)} — Test</b>\nTelegram notifications are working!`;
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 10_000);
+    try {
+      const res = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ chat_id: chatId, text, parse_mode: "HTML" }),
+        signal: controller.signal,
+      });
+      const json = (await res.json()) as { ok: boolean; description?: string };
+      if (!json.ok) return { ok: false, error: json.description || "Unknown error" };
+      return { ok: true };
+    } catch (e) {
+      return { ok: false, error: (e as Error).message };
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+
+  private buildDeepLink(payload: NotificationPayload): string | null {
+    // Prefer tunnel URL (globally accessible), fallback to local IP
+    let baseUrl = tunnelService.getTunnelUrl();
+    if (!baseUrl) {
+      const localIp = getLocalIp();
+      const port = configService.get("port") ?? 8080;
+      if (localIp) {
+        baseUrl = `http://${localIp}:${port}`;
+      }
+    }
+    if (!baseUrl) return null;
+
+    const projectPath = payload.project
+      ? `/project/${encodeURIComponent(payload.project)}`
+      : "";
+    const query = payload.sessionId ? `?openChat=${payload.sessionId}` : "";
+    return `${baseUrl}${projectPath}${query}`;
+  }
+
+  private async callApi(token: string, chatId: string, text: string): Promise<void> {
+    if (!BOT_TOKEN_RE.test(token)) return;
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 10_000);
+
+    try {
+      const res = await fetch(`https://api.telegram.org/bot${token}/sendMessage`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          chat_id: chatId,
+          text,
+          parse_mode: "HTML",
+          disable_web_page_preview: true,
+        }),
+        signal: controller.signal,
+      });
+      if (!res.ok) {
+        const errBody = await res.text();
+        console.error(`[telegram] sendMessage failed: ${res.status} ${errBody}`);
+      }
+    } catch (e) {
+      console.error(`[telegram] send error: ${(e as Error).message}`);
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+}
+
+/** Singleton Telegram notification service */
+export const telegramService = new TelegramNotificationService();

package/src/types/config.ts

@@ -4,6 +4,11 @@ export interface PushConfig {
   vapid_subject: string;
 }
 
+export interface TelegramConfig {
+  bot_token: string;
+  chat_id: string;
+}
+
 export type ThemeConfig = "light" | "dark" | "system";
 
 export interface PpmConfig {
@@ -15,6 +20,7 @@ export interface PpmConfig {
   projects: ProjectConfig[];
   ai: AIConfig;
   push?: PushConfig;
+  telegram?: TelegramConfig;
 }
 
 export interface AuthConfig {

package/src/web/app.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { PanelLayout } from "@/components/layout/panel-layout";
@@ -8,7 +8,7 @@ import { MobileNav } from "@/components/layout/mobile-nav";
 import { MobileDrawer } from "@/components/layout/mobile-drawer";
 import { ProjectBottomSheet } from "@/components/layout/project-bottom-sheet";
 import { LoginScreen } from "@/components/auth/login-screen";
-import { useProjectStore } from "@/stores/project-store";
+import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import {
   useSettingsStore,
@@ -18,6 +18,7 @@ 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 { useNotificationBadge } from "@/hooks/use-notification-badge";
 import { CommandPalette } from "@/components/layout/command-palette";
 import { BugReportPopup } from "@/components/shared/bug-report-popup";
 import { cn } from "@/lib/utils";
@@ -45,6 +46,9 @@ export function App() {
   const fetchServerInfo = useSettingsStore((s) => s.fetchServerInfo);
   const activeProject = useProjectStore((s) => s.activeProject);
 
+  // Capture URL state on mount — before any effect can overwrite it
+  const initialUrlRef = useRef(parseUrlState());
+
   // Apply theme on mount and when it changes
   useEffect(() => {
     applyThemeClass(theme);
@@ -99,6 +103,19 @@ export function App() {
   // Health check — detects server crash/restart
   useHealthCheck();
 
+  // Notification badge — syncs document.title + favicon with unread count
+  useNotificationBadge();
+
+  // Warn before closing browser tab (prevents accidental Ctrl+W)
+  useEffect(() => {
+    if (authState !== "authenticated") return;
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [authState]);
+
   // Load keybindings after auth confirmed (must not call ApiClient before auth)
   useEffect(() => {
     if (authState !== "authenticated") return;
@@ -112,24 +129,50 @@ export function App() {
     if (authState !== "authenticated") return;
 
     fetchProjects().then(() => {
-      const { projectName: urlProject, tabId: urlTab } = parseUrlState();
-      const projects = useProjectStore.getState().projects;
-
-      if (urlProject) {
-        const matched = projects.find((p) => p.name === urlProject);
-        if (matched) {
-          useProjectStore.getState().setActiveProject(matched);
-          // After switchProject runs, restore active tab from URL
-          if (urlTab) {
-            queueMicrotask(() => {
-              const { tabs } = useTabStore.getState();
-              if (tabs.some((t) => t.id === urlTab)) {
-                useTabStore.getState().setActiveTab(urlTab);
-              }
+      const { projectName: urlProject, tabId: urlTab, openChat } = initialUrlRef.current;
+      const { projects, customOrder } = useProjectStore.getState();
+      if (projects.length === 0) return;
+
+      // URL project takes priority, then fall back to first sorted project
+      let target = urlProject ? projects.find((p) => p.name === urlProject) : undefined;
+      if (!target) {
+        target = resolveOrder(projects, customOrder)[0];
+      }
+      if (target) {
+        useProjectStore.getState().setActiveProject(target);
+        if (urlProject && urlTab) {
+          queueMicrotask(() => {
+            const { tabs } = useTabStore.getState();
+            if (tabs.some((t) => t.id === urlTab)) {
+              useTabStore.getState().setActiveTab(urlTab);
+            }
+          });
+        }
+      }
+
+      // Deep link: ?openChat=sessionId — open/focus the chat tab
+      if (openChat) {
+        queueMicrotask(() => {
+          const { tabs, setActiveTab, openTab } = useTabStore.getState();
+          const existing = tabs.find(
+            (t) => t.type === "chat" && t.metadata?.sessionId === openChat,
+          );
+          if (existing) {
+            setActiveTab(existing.id);
+          } else {
+            openTab({
+              type: "chat",
+              title: "Chat",
+              projectId: target?.name ?? null,
+              closable: true,
+              metadata: { sessionId: openChat },
             });
           }
-          return;
-        }
+          // Clean up query param
+          const url = new URL(window.location.href);
+          url.searchParams.delete("openChat");
+          window.history.replaceState(null, "", url.pathname);
+        });
       }
     });
   }, [authState, fetchProjects]);

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

@@ -21,6 +21,8 @@ import {
   RotateCcw,
   TerminalSquare,
 } from "lucide-react";
+import { QuestionCard } from "./question-card";
+import type { Question } from "./question-card";
 
 interface MessageListProps {
   messages: ChatMessage[];
@@ -575,113 +577,14 @@ function AskUserQuestionCard({
   approval: { requestId: string; tool: string; input: unknown };
   onRespond: (requestId: string, approved: boolean, data?: unknown) => void;
 }) {
-  const input = approval.input as {
-    questions?: Array<{
-      question: string;
-      header?: string;
-      options: Array<{ label: string; description?: string }>;
-      multiSelect?: boolean;
-    }>;
-  };
+  const input = approval.input as { questions?: Question[] };
   const questions = input.questions ?? [];
 
-  const [answers, setAnswers] = useState<Record<string, string>>({});
-  // Track which questions have "Other" active
-  const [otherActive, setOtherActive] = useState<Record<string, boolean>>({});
-
-  const handleSelect = (question: string, label: string, multiSelect?: boolean) => {
-    // Deactivate "Other" when selecting a predefined option
-    setOtherActive((prev) => ({ ...prev, [question]: false }));
-    setAnswers((prev) => {
-      if (!multiSelect) return { ...prev, [question]: label };
-      const current = prev[question] ?? "";
-      const labels = current ? current.split(", ") : [];
-      const idx = labels.indexOf(label);
-      if (idx >= 0) labels.splice(idx, 1);
-      else labels.push(label);
-      return { ...prev, [question]: labels.join(", ") };
-    });
-  };
-
-  const handleOtherToggle = (question: string) => {
-    setOtherActive((prev) => ({ ...prev, [question]: true }));
-    setAnswers((prev) => ({ ...prev, [question]: "" }));
-  };
-
-  const handleOtherText = (question: string, text: string) => {
-    setAnswers((prev) => ({ ...prev, [question]: text }));
-  };
-
-  const allAnswered = questions.every((q) => answers[q.question]?.trim());
-
   return (
-    <div className="rounded-lg border-2 border-accent/40 bg-accent/5 p-3 space-y-3">
-      {questions.map((q, qi) => (
-        <div key={qi} className="space-y-1.5">
-          <p className="text-sm text-text-primary font-medium">
-            {q.header ? `${q.header}: ` : ""}{q.question}
-          </p>
-          {q.multiSelect && (
-            <p className="text-xs text-text-subtle">Select multiple</p>
-          )}
-          <div className="flex flex-col gap-1">
-            {q.options.map((opt, oi) => {
-              const isOther = otherActive[q.question];
-              const selected = !isOther && (answers[q.question] ?? "").split(", ").includes(opt.label);
-              return (
-                <button
-                  key={oi}
-                  onClick={() => handleSelect(q.question, opt.label, q.multiSelect)}
-                  className={`text-left rounded px-2.5 py-1.5 text-xs border transition-colors ${
-                    selected
-                      ? "border-accent bg-accent/20 text-text-primary"
-                      : "border-border bg-background text-text-secondary hover:bg-surface-elevated"
-                  }`}
-                >
-                  <span className="font-medium">{opt.label}</span>
-                  {opt.description && (
-                    <span className="text-text-subtle ml-1.5">— {opt.description}</span>
-                  )}
-                </button>
-              );
-            })}
-            {/* Other option */}
-            {otherActive[q.question] ? (
-              <input
-                type="text"
-                autoFocus
-                placeholder="Type your answer..."
-                value={answers[q.question] ?? ""}
-                onChange={(e) => handleOtherText(q.question, e.target.value)}
-                className="rounded px-2.5 py-1.5 text-xs border border-accent bg-accent/10 text-text-primary outline-none placeholder:text-text-subtle"
-              />
-            ) : (
-              <button
-                onClick={() => handleOtherToggle(q.question)}
-                className="text-left rounded px-2.5 py-1.5 text-xs border border-dashed border-border text-text-subtle hover:bg-surface-elevated transition-colors"
-              >
-                Other — type your own answer
-              </button>
-            )}
-          </div>
-        </div>
-      ))}
-
-      <div className="flex gap-2 pt-1">
-        <button
-          onClick={() => onRespond(approval.requestId, true, answers)}
-          disabled={!allAnswered}
-          className="px-4 py-1.5 rounded bg-accent text-white text-xs font-medium hover:bg-accent/80 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-        >
-          Submit
-        </button>
-        <button
-          onClick={() => onRespond(approval.requestId, false)}
-          className="px-4 py-1.5 rounded bg-surface-elevated text-text-secondary text-xs hover:bg-surface transition-colors"
-        >
-          Skip
-        </button>
-      </div>
-    </div>
+    <QuestionCard
+      questions={questions}
+      onSubmit={(answers) => onRespond(approval.requestId, true, answers)}
+      onSkip={() => onRespond(approval.requestId, false)}
+    />
   );
 }