@hienlh/ppm 0.1.0

package/src/services/terminal.service.ts

@@ -0,0 +1,212 @@
+import type { Subprocess, Terminal } from "bun";
+
+/** Max output buffer size per session (10KB) */
+const MAX_BUFFER_SIZE = 10 * 1024;
+
+/** Idle session timeout: 1 hour */
+const IDLE_TIMEOUT_MS = 60 * 60 * 1000;
+
+/** Reconnect grace period after WS disconnect */
+const RECONNECT_GRACE_MS = 30 * 1000;
+
+export interface TerminalSession {
+  id: string;
+  proc: Subprocess;
+  terminal: Terminal;
+  projectPath: string;
+  createdAt: Date;
+  /** Connected WebSocket (if any) */
+  ws: unknown | null;
+  /** Timeout to kill session after WS disconnect */
+  disconnectTimer: ReturnType<typeof setTimeout> | null;
+  /** Idle timeout timer */
+  idleTimer: ReturnType<typeof setTimeout>;
+}
+
+export interface TerminalSessionInfo {
+  id: string;
+  projectPath: string;
+  createdAt: string;
+  connected: boolean;
+}
+
+type OutputCallback = (sessionId: string, data: string) => void;
+
+class TerminalService {
+  private sessions = new Map<string, TerminalSession>();
+  private outputBuffers = new Map<string, string>();
+  private outputListeners = new Map<string, OutputCallback>();
+
+  /** Create a new terminal session using Bun's native PTY */
+  create(projectPath: string, cols = 80, rows = 24): string {
+    const id = crypto.randomUUID();
+    const shellCmd = process.env.SHELL || "/bin/zsh";
+    const decoder = new TextDecoder();
+
+    const proc = Bun.spawn([shellCmd, "-l"], {
+      cwd: projectPath,
+      env: {
+        ...process.env,
+        TERM: "xterm-256color",
+      },
+      terminal: {
+        cols,
+        rows,
+        data: (_terminal: Terminal, data: Uint8Array) => {
+          const text = decoder.decode(data);
+          this.appendBuffer(id, text);
+          const listener = this.outputListeners.get(id);
+          if (listener) listener(id, text);
+        },
+      },
+    });
+
+    const terminal = proc.terminal!;
+
+    const session: TerminalSession = {
+      id,
+      proc,
+      terminal,
+      projectPath,
+      createdAt: new Date(),
+      ws: null,
+      disconnectTimer: null,
+      idleTimer: this.createIdleTimer(id),
+    };
+
+    this.sessions.set(id, session);
+    this.outputBuffers.set(id, "");
+
+    // When process exits, notify
+    proc.exited.then(() => {
+      const listener = this.outputListeners.get(id);
+      if (listener) listener(id, "\r\n[Process exited]\r\n");
+    });
+
+    return id;
+  }
+
+  /** Write data to terminal via PTY */
+  write(id: string, data: string): void {
+    const session = this.sessions.get(id);
+    if (!session || session.terminal.closed) return;
+
+    this.resetIdleTimer(id);
+    session.terminal.write(data);
+  }
+
+  /** Resize terminal PTY */
+  resize(id: string, cols: number, rows: number): void {
+    const session = this.sessions.get(id);
+    if (!session || session.terminal.closed) return;
+    session.terminal.resize(cols, rows);
+  }
+
+  /** Kill a terminal session */
+  kill(id: string): void {
+    const session = this.sessions.get(id);
+    if (!session) return;
+
+    if (session.disconnectTimer) clearTimeout(session.disconnectTimer);
+    clearTimeout(session.idleTimer);
+
+    try {
+      if (!session.terminal.closed) session.terminal.close();
+    } catch {
+      // Already closed
+    }
+    try {
+      session.proc.kill();
+    } catch {
+      // Already dead
+    }
+
+    this.sessions.delete(id);
+    this.outputBuffers.delete(id);
+    this.outputListeners.delete(id);
+  }
+
+  /** Get buffered output for reconnect */
+  getBuffer(id: string): string {
+    return this.outputBuffers.get(id) ?? "";
+  }
+
+  /** List all active sessions */
+  list(): TerminalSessionInfo[] {
+    const result: TerminalSessionInfo[] = [];
+    for (const [, session] of this.sessions) {
+      result.push({
+        id: session.id,
+        projectPath: session.projectPath,
+        createdAt: session.createdAt.toISOString(),
+        connected: session.ws !== null,
+      });
+    }
+    return result;
+  }
+
+  /** Get a session by ID */
+  get(id: string): TerminalSession | undefined {
+    return this.sessions.get(id);
+  }
+
+  /** Register output listener for a session (used by WS handler) */
+  onOutput(id: string, callback: OutputCallback): void {
+    this.outputListeners.set(id, callback);
+  }
+
+  /** Remove output listener */
+  removeOutputListener(id: string): void {
+    this.outputListeners.delete(id);
+  }
+
+  /** Mark session as connected to a WebSocket */
+  setConnected(id: string, ws: unknown): void {
+    const session = this.sessions.get(id);
+    if (!session) return;
+    session.ws = ws;
+
+    if (session.disconnectTimer) {
+      clearTimeout(session.disconnectTimer);
+      session.disconnectTimer = null;
+    }
+  }
+
+  /** Mark session as disconnected — start grace period */
+  setDisconnected(id: string): void {
+    const session = this.sessions.get(id);
+    if (!session) return;
+    session.ws = null;
+
+    session.disconnectTimer = setTimeout(() => {
+      this.kill(id);
+    }, RECONNECT_GRACE_MS);
+  }
+
+  /** Append to circular output buffer (max 10KB) */
+  private appendBuffer(id: string, data: string): void {
+    let buf = this.outputBuffers.get(id) ?? "";
+    buf += data;
+    if (buf.length > MAX_BUFFER_SIZE) {
+      buf = buf.slice(buf.length - MAX_BUFFER_SIZE);
+    }
+    this.outputBuffers.set(id, buf);
+  }
+
+  /** Create idle timeout — kills session after IDLE_TIMEOUT_MS */
+  private createIdleTimer(id: string): ReturnType<typeof setTimeout> {
+    return setTimeout(() => {
+      this.kill(id);
+    }, IDLE_TIMEOUT_MS);
+  }
+
+  /** Reset idle timer on activity */
+  private resetIdleTimer(id: string): void {
+    const session = this.sessions.get(id);
+    if (!session) return;
+    clearTimeout(session.idleTimer);
+    session.idleTimer = this.createIdleTimer(id);
+  }
+}
+
+export const terminalService = new TerminalService();

package/src/types/api.ts

@@ -0,0 +1,37 @@
+/** Standard API response envelope — backend wraps all responses in this */
+export interface ApiResponse<T = unknown> {
+  ok: boolean;
+  data?: T;
+  error?: string;
+}
+
+/** Helper to create success response */
+export function ok<T>(data: T): ApiResponse<T> {
+  return { ok: true, data };
+}
+
+/** Helper to create error response */
+export function err(error: string): ApiResponse<never> {
+  return { ok: false, error };
+}
+
+/** WebSocket message types (terminal) */
+export type TerminalWsMessage =
+  | { type: "input"; data: string }
+  | { type: "resize"; cols: number; rows: number }
+  | { type: "output"; data: string };
+
+/** WebSocket message types (chat) */
+export type ChatWsClientMessage =
+  | { type: "message"; content: string }
+  | { type: "cancel" }
+  | { type: "approval_response"; requestId: string; approved: boolean; reason?: string; data?: unknown };
+
+export type ChatWsServerMessage =
+  | { type: "text"; content: string }
+  | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string }
+  | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string }
+  | { type: "approval_request"; requestId: string; tool: string; input: unknown }
+  | { type: "usage"; usage: { totalCostUsd?: number; fiveHour?: number; sevenDay?: number } }
+  | { type: "done"; sessionId: string }
+  | { type: "error"; message: string };

package/src/types/chat.ts

@@ -0,0 +1,92 @@
+export interface AIProvider {
+  id: string;
+  name: string;
+  createSession(config: SessionConfig): Promise<Session>;
+  resumeSession(sessionId: string): Promise<Session>;
+  listSessions(): Promise<SessionInfo[]>;
+  deleteSession(sessionId: string): Promise<void>;
+  sendMessage(
+    sessionId: string,
+    message: string,
+  ): AsyncIterable<ChatEvent>;
+  /** Resolve a pending tool/question approval by requestId */
+  resolveApproval?(requestId: string, approved: boolean, data?: unknown): void;
+  onToolApproval?: (callback: ToolApprovalHandler) => void;
+}
+
+export interface Session {
+  id: string;
+  providerId: string;
+  title: string;
+  projectName?: string;
+  projectPath?: string;
+  createdAt: string;
+}
+
+export interface SessionConfig {
+  providerId?: string;
+  projectName?: string;
+  projectPath?: string;
+  title?: string;
+}
+
+export interface SessionInfo {
+  id: string;
+  providerId: string;
+  title: string;
+  projectName?: string;
+  createdAt: string;
+  updatedAt?: string;
+}
+
+export interface LimitBucket {
+  utilization: number;
+  budgetPace: number;
+  resetsAt: string;
+  resetsInMinutes: number | null;
+  resetsInHours: number | null;
+  windowHours: number;
+  status: string;
+}
+
+export interface UsageInfo {
+  /** Cumulative cost across the session */
+  totalCostUsd?: number;
+  /** Cost of the last query only (resets each query) */
+  queryCostUsd?: number;
+  /** 0–1 utilization for five_hour limit */
+  fiveHour?: number;
+  /** 0–1 utilization for seven_day limit */
+  sevenDay?: number;
+  /** ISO timestamp when five_hour limit resets */
+  fiveHourResetsAt?: string;
+  /** ISO timestamp when seven_day limit resets */
+  sevenDayResetsAt?: string;
+  /** Detailed limit buckets from ccburn */
+  session?: LimitBucket;
+  weekly?: LimitBucket;
+  weeklyOpus?: LimitBucket;
+  weeklySonnet?: LimitBucket;
+}
+
+export type ChatEvent =
+  | { type: "text"; content: string }
+  | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string }
+  | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string }
+  | { type: "approval_request"; requestId: string; tool: string; input: unknown }
+  | { type: "usage"; usage: UsageInfo }
+  | { type: "error"; message: string }
+  | { type: "done"; sessionId: string };
+
+export type ToolApprovalHandler = (
+  tool: string,
+  input: unknown,
+) => Promise<{ approved: boolean; reason?: string }>;
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  events?: ChatEvent[];
+  timestamp: string;
+}

package/src/types/config.ts

@@ -0,0 +1,41 @@
+export interface PpmConfig {
+  port: number;
+  host: string;
+  auth: AuthConfig;
+  projects: ProjectConfig[];
+  ai: AIConfig;
+}
+
+export interface AuthConfig {
+  enabled: boolean;
+  token: string;
+}
+
+export interface ProjectConfig {
+  path: string;
+  name: string;
+}
+
+export interface AIConfig {
+  default_provider: string;
+  providers: Record<string, AIProviderConfig>;
+}
+
+export interface AIProviderConfig {
+  type: "agent-sdk" | "cli";
+  api_key_env?: string;
+  command?: string;
+}
+
+export const DEFAULT_CONFIG: PpmConfig = {
+  port: 8080,
+  host: "0.0.0.0",
+  auth: { enabled: true, token: "" },
+  projects: [],
+  ai: {
+    default_provider: "claude",
+    providers: {
+      claude: { type: "agent-sdk", api_key_env: "ANTHROPIC_API_KEY" },
+    },
+  },
+};

package/src/types/git.ts

@@ -0,0 +1,50 @@
+export interface GitCommit {
+  hash: string;
+  abbreviatedHash: string;
+  subject: string;
+  body: string;
+  authorName: string;
+  authorEmail: string;
+  authorDate: string;
+  parents: string[];
+  refs: string[];
+}
+
+export interface GitBranch {
+  name: string;
+  current: boolean;
+  remote: boolean;
+  commitHash: string;
+  ahead: number;
+  behind: number;
+}
+
+export interface GitStatus {
+  current: string | null;
+  staged: GitFileChange[];
+  unstaged: GitFileChange[];
+  untracked: string[];
+}
+
+export interface GitFileChange {
+  path: string;
+  status: "M" | "A" | "D" | "R" | "C" | "?";
+  oldPath?: string;
+}
+
+export interface GitGraphData {
+  commits: GitCommit[];
+  branches: GitBranch[];
+}
+
+export interface GitDiffResult {
+  files: GitDiffFile[];
+  raw: string;
+}
+
+export interface GitDiffFile {
+  path: string;
+  additions: number;
+  deletions: number;
+  content: string;
+}

package/src/types/project.ts

@@ -0,0 +1,18 @@
+export interface Project {
+  name: string;
+  path: string;
+}
+
+export interface ProjectInfo extends Project {
+  branch?: string;
+  status?: "clean" | "dirty";
+}
+
+export interface FileNode {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  children?: FileNode[];
+  size?: number;
+  modified?: string;
+}

package/src/types/terminal.ts

@@ -0,0 +1,20 @@
+export interface TerminalSession {
+  id: string;
+  projectPath: string;
+  shell: string;
+  createdAt: Date;
+  lastActivity: Date;
+}
+
+export interface TerminalSessionInfo {
+  id: string;
+  projectPath: string;
+  shell: string;
+  createdAt: string;
+  lastActivity: string;
+}
+
+export interface TerminalResize {
+  cols: number;
+  rows: number;
+}

package/src/web/app.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useState, useCallback } from "react";
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { TabBar } from "@/components/layout/tab-bar";
+import { TabContent } from "@/components/layout/tab-content";
+import { Sidebar } from "@/components/layout/sidebar";
+import { MobileNav } from "@/components/layout/mobile-nav";
+import { MobileDrawer } from "@/components/layout/mobile-drawer";
+import { LoginScreen } from "@/components/auth/login-screen";
+import { useProjectStore } from "@/stores/project-store";
+import { useTabStore } from "@/stores/tab-store";
+import {
+  useSettingsStore,
+  applyThemeClass,
+} from "@/stores/settings-store";
+import { getAuthToken } from "@/lib/api-client";
+import { useUrlSync, parseUrlState } from "@/hooks/use-url-sync";
+
+type AuthState = "checking" | "authenticated" | "unauthenticated";
+
+export function App() {
+  const [authState, setAuthState] = useState<AuthState>("checking");
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const theme = useSettingsStore((s) => s.theme);
+  const fetchProjects = useProjectStore((s) => s.fetchProjects);
+  const activeProject = useProjectStore((s) => s.activeProject);
+
+  // Apply theme on mount and when it changes
+  useEffect(() => {
+    applyThemeClass(theme);
+
+    // Listen for OS theme changes when set to "system"
+    if (theme === "system") {
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const handler = () => applyThemeClass("system");
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }
+  }, [theme]);
+
+  // Auth check on mount
+  useEffect(() => {
+    async function checkAuth() {
+      const token = getAuthToken();
+
+      // If no token stored, try without auth (server may have auth disabled)
+      try {
+        const headers: HeadersInit = {};
+        if (token) headers["Authorization"] = `Bearer ${token}`;
+
+        const res = await fetch("/api/auth/check", { headers });
+        const json = await res.json();
+
+        if (json.ok) {
+          setAuthState("authenticated");
+        } else {
+          setAuthState("unauthenticated");
+        }
+      } catch {
+        // Network error — try to proceed if no auth required
+        setAuthState("unauthenticated");
+      }
+    }
+
+    checkAuth();
+  }, []);
+
+  // URL sync — keeps browser URL in sync with active project/tab
+  useUrlSync();
+
+  // Fetch projects after auth, then restore from URL if applicable
+  useEffect(() => {
+    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);
+              }
+            });
+          }
+          return;
+        }
+      }
+    });
+  }, [authState, fetchProjects]);
+
+  // Switch project tabs when active project changes
+  useEffect(() => {
+    const projectName = activeProject?.name ?? "__global__";
+    useTabStore.getState().switchProject(projectName);
+  }, [activeProject?.name]);
+
+  // On initial auth with no project selected, ensure a tab set exists
+  useEffect(() => {
+    if (authState === "authenticated" && !activeProject) {
+      useTabStore.getState().switchProject("__global__");
+    }
+  }, [authState, activeProject]);
+
+  const handleLoginSuccess = useCallback(() => {
+    setAuthState("authenticated");
+  }, []);
+
+  if (authState === "checking") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="animate-pulse text-text-secondary text-sm">
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (authState === "unauthenticated") {
+    return <LoginScreen onSuccess={handleLoginSuccess} />;
+  }
+
+  return (
+    <TooltipProvider>
+      <div className="h-screen flex flex-col bg-background text-foreground overflow-hidden">
+        {/* Main layout */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Desktop sidebar */}
+          <Sidebar />
+
+          {/* Content area */}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* Desktop tab bar */}
+            <TabBar />
+
+            {/* Tab content */}
+            <main className="flex-1 overflow-hidden pb-12 md:pb-0">
+              <TabContent />
+            </main>
+          </div>
+        </div>
+
+        {/* Mobile bottom nav */}
+        <MobileNav onMenuPress={() => setDrawerOpen(true)} />
+
+        {/* Mobile drawer overlay */}
+        <MobileDrawer
+          isOpen={drawerOpen}
+          onClose={() => setDrawerOpen(false)}
+        />
+
+        {/* Toast notifications */}
+        <Toaster
+          position="bottom-left"
+          toastOptions={{
+            className: "bg-surface border-border text-foreground",
+          }}
+        />
+      </div>
+    </TooltipProvider>
+  );
+}