@hienlh/ppm 0.12.12 → 0.13.2

package/src/web/lib/flatten-expansions.ts

@@ -0,0 +1,36 @@
+import type { ChatMessage } from "../../types/chat";
+
+/** Simple deterministic hash of a jsonlPath → short prefix (non-cryptographic). */
+function hashPath(path: string): string {
+  let h = 0;
+  for (let i = 0; i < path.length; i++) h = ((h << 5) - h + path.charCodeAt(i)) | 0;
+  return Math.abs(h).toString(36);
+}
+
+/**
+ * Prefix pre-compact message IDs so they don't collide with current-session IDs.
+ * React keys rely on `id`; collisions cause render corruption.
+ */
+export function prefixPreCompactIds(msgs: ChatMessage[], jsonlPath: string): ChatMessage[] {
+  const prefix = `pc-${hashPath(jsonlPath)}-`;
+  return msgs.map((m) => (m.id ? { ...m, id: `${prefix}${m.id}` } : m));
+}
+
+/**
+ * Flatten messages with expansions prepended before their corresponding compact message.
+ * Key of `expansions` = compact message id. Values = already-prefixed ChatMessage[].
+ * Preserves reference equality when expansions is empty (zero-cost for non-compact chats).
+ */
+export function flattenWithExpansions(
+  messages: ChatMessage[],
+  expansions: Map<string, ChatMessage[]>,
+): ChatMessage[] {
+  if (expansions.size === 0) return messages;
+  const out: ChatMessage[] = [];
+  for (const m of messages) {
+    const pre = m.id ? expansions.get(m.id) : undefined;
+    if (pre && pre.length > 0) out.push(...pre);
+    out.push(m);
+  }
+  return out;
+}

package/src/web/lib/format-date.ts

@@ -0,0 +1,21 @@
+/**
+ * Format an ISO timestamp as a short English relative time string.
+ * Examples: "just now", "5m ago", "3h ago", "2d ago", "Apr 21".
+ */
+export function formatRelativeDate(iso: string): string {
+  try {
+    const date = new Date(iso);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMin = Math.floor(diffMs / 60_000);
+    if (diffMin < 1) return "just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay < 7) return `${diffDay}d ago`;
+    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}

package/src/web/styles/globals.css

@@ -294,3 +294,15 @@ html, body {
 @media (prefers-reduced-motion: reduce) {
   .markdown-content.is-streaming > *:last-child { animation: none; }
 }
+
+/* Tab streaming indicator — 3 dots bouncing inside chat bubble icon (Messenger typing style) */
+@keyframes tabTypingBounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-1.5px); }
+}
+.tab-typing-dot {
+  animation: tabTypingBounce 1s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .tab-typing-dot { animation: none; }
+}

package/templates/skill/SKILL.md.tmpl

@@ -0,0 +1,74 @@
+---
+name: ppm
+description: Control PPM (Project & Process Manager) via its CLI, HTTP API, and SQLite config database. Use when the user wants to manage PPM projects, query database connections, start/stop the PPM server, view logs, or read/write PPM config.
+---
+
+# PPM Skill
+
+PPM is a local-first web IDE + project manager. This skill describes how to control PPM from the terminal, over HTTP, and by inspecting its SQLite config database.
+
+## Quick Reference
+
+| What | Where |
+|---|---|
+| CLI binary | `ppm` |
+| Default server | `http://localhost:8080` |
+| Config DB (prod) | `~/.ppm/ppm.db` (SQLite) |
+| Config DB (dev) | `~/.ppm/ppm.dev.db` (port 8081) |
+| Skill root (user) | `~/.claude/skills/` |
+| Skill root (project) | `<project>/.claude/skills/` |
+
+## When to Use This Skill
+
+Invoke when the user asks to:
+- Start, stop, restart, or check the PPM server
+- Manage registered projects (`projects list/add/remove`)
+- Manage database connections stored in PPM config (`db list/add/test/query`)
+- Get or set PPM config values (`config get/set`)
+- View PPM logs, status, or report a bug
+- Install, upgrade, or inspect bundled skills / extensions
+- Control the PPM daemon autostart registration
+
+## Top Tasks
+
+1. **Check if PPM is running** → `ppm status`
+2. **Start server** → `ppm start` (use `--port <n>` to override, `--profile dev` for dev DB)
+3. **List projects** → `ppm projects list`
+4. **Add project** → `ppm projects add <path>`
+5. **List DB connections** → `ppm db list`
+6. **Query a saved DB connection** → `ppm db query <connection-name> "<sql>"`
+7. **Read config** → `ppm config get <key>` (e.g. `port`, `auth.enabled`)
+8. **Tail logs** → `ppm logs --tail 100` or `ppm logs -f` to follow
+9. **Upgrade PPM** → `ppm upgrade` (or `--check` to only check)
+10. **Open in browser** → `ppm open`
+
+## Rules of Thumb
+
+- Always run `ppm status` before assuming the server is up.
+- Commands exit non-zero on failure and print to stderr. Capture both streams.
+- Listing commands accept `--json` for structured output; prefer JSON when parsing.
+- The config DB is **SQLite**. You may open `~/.ppm/ppm.db` read-only for inspection — see [references/db-schema.md](references/db-schema.md).
+- Do NOT edit the config DB directly while the server is running; use `ppm config set` or the HTTP API.
+
+## Links
+
+- Complete CLI options, every subcommand → [references/cli-reference.md](references/cli-reference.md)
+- HTTP API routes (25+) → [references/http-api.md](references/http-api.md)
+- Config DB schema (runtime-generated from user's DB) → [references/db-schema.md](references/db-schema.md)
+- Worked recipes for common tasks → [references/common-tasks.md](references/common-tasks.md)
+
+## Error Handling
+
+- Server not running → `ppm status` exits non-zero; start with `ppm start`.
+- Port conflict → `ppm config set port <n>` then `ppm restart`.
+- Missing config DB → `ppm init` creates defaults.
+- Upgrade failure → re-run `ppm upgrade` or `npm i -g @hienlh/ppm@latest`.
+
+## Scope Boundaries
+
+This skill covers the `ppm` CLI, its HTTP API, and its config DB. It does **not** cover:
+- Projects managed by PPM (those are user code, outside skill scope).
+- Third-party extensions (inspect via `ppm ext list`).
+- The Claude Agent SDK internals (separate skill).
+
+<!-- AUTO:version_footer -->

package/templates/skill/common-tasks.md

@@ -0,0 +1,139 @@
+# PPM Common Tasks
+
+Practical recipes for controlling PPM. Prefer these stable shell invocations over HTTP unless the user has specifically asked for HTTP.
+
+## Task 1: Confirm PPM is running
+
+```bash
+ppm status --json
+```
+
+Non-zero exit = server not running. Use `ppm status` (no flag) for a human-readable view.
+
+## Task 2: Start the server
+
+```bash
+# Default port (from config, usually 8080)
+ppm start
+
+# Override port
+ppm start --port 9090
+
+# Use dev DB profile (port 8081, ~/.ppm/ppm.dev.db)
+ppm start --profile dev
+```
+
+## Task 3: Register a project
+
+```bash
+# Add the current directory
+ppm projects add "$PWD"
+
+# List registered projects as JSON
+ppm projects list --json
+```
+
+## Task 4: Add and test a database connection
+
+```bash
+# Interactive add
+ppm db add
+
+# Non-interactive (check `ppm db add --help` for full flag list)
+ppm db add --name staging --type postgres --host db.example.com --port 5432 --user app --database myapp
+
+# Test the connection
+ppm db test staging
+```
+
+## Task 5: Query a saved DB connection
+
+```bash
+# Run a SQL query against a registered connection
+ppm db query staging "SELECT count(*) AS total FROM users"
+
+# Output as JSON for scripting
+ppm db query staging "SELECT id, email FROM users LIMIT 10" --json
+```
+
+## Task 6: Read or change config
+
+```bash
+# Read a value
+ppm config get port
+ppm config get auth.enabled
+
+# Set a value (takes effect on next restart)
+ppm config set port 9090
+ppm config set auth.enabled true
+
+# List all keys
+ppm config list
+```
+
+## Task 7: Tail the daemon log
+
+```bash
+# Last 100 lines
+ppm logs --tail 100
+
+# Follow live
+ppm logs -f
+
+# Clear the log
+ppm logs --clear
+```
+
+## Task 8: Upgrade PPM
+
+```bash
+# Check for a new version without installing
+ppm upgrade --check
+
+# Install the latest
+ppm upgrade
+```
+
+## Task 9: Manage auto-start on boot
+
+```bash
+ppm autostart enable              # register
+ppm autostart status --json       # inspect
+ppm autostart disable             # unregister
+```
+
+## Task 10: Inspect installed skills
+
+```bash
+ppm skills list
+ppm skills list --json
+```
+
+## HTTP API Quick Calls
+
+Assume `PPM_BASE=http://localhost:8080`. See [http-api.md](http-api.md) for full list.
+
+```bash
+# List projects over HTTP
+curl -s $PPM_BASE/api/projects | jq
+
+# List DB connections
+curl -s $PPM_BASE/api/db/connections | jq
+
+# Get server status (via CLI is easier; HTTP equivalent varies)
+```
+
+## Troubleshooting
+
+| Symptom | Check |
+|---|---|
+| `ppm: command not found` | Ensure `npm i -g @hienlh/ppm` ran; check `$PATH` includes npm bin. |
+| Server won't start | `ppm logs --tail 50`; check port conflict with `lsof -i :8080`. |
+| Stale tunnel URL | `ppm restart --force`. |
+| Auth prompts unexpected | `ppm config get auth.enabled`; toggle with `ppm config set auth.enabled false`. |
+
+## Exit Code Convention
+
+- `0` — success
+- `1` — generic error (IO, validation, server not running)
+- `2` — asset/setup missing (e.g. bundled skill assets)

package/assets/skills/ppm-guide/SKILL.md

@@ -1,61 +0,0 @@
----
-name: ppm-guide
-description: PPM project structure, commands, config, and development workflow reference
-argument-hint: "[topic]"
----
-
-# PPM Guide
-
-## Overview
-# PPM Project Overview & Product Development Requirements
-## Project Description
-**PPM** (Personal Project Manager) is a full-stack, mobile-first web IDE designed for developers to manage code projects with AI-powered assistance. It combines a responsive web interface, real-time terminal access, AI chat with tool support, and Git integration into a cohesive development environment.
-Built on the **Bun runtime** for performance, PPM enables developers to:
-- Browse and edit project files with Monaco Editor syntax highlighting
-- Execute commands via xterm.js terminal with full PTY support
-- Chat with Claude AI with file attachments and slash commands
-- View Git status, diffs, and commit graphs in real-time
-
-## CLI Commands
-```bash
-bun dev:server    # Start backend dev (port 8081, uses ~/.ppm/ppm.dev.db)
-bun dev:web       # Start Vite frontend (port 5173)
-bun test          # Run all tests
-bun test tests/integration/  # Integration tests only
-```
-
-## Dev Config
-Config is stored in **SQLite** (`~/.ppm/ppm.db`). Dev uses a separate DB:
-
-- **Dev**: `~/.ppm/ppm.dev.db` — port **8081**
-- **Production**: `~/.ppm/ppm.db` — port **8080**
-
-`bun dev:server` automatically uses the dev database. On a new machine, run `ppm init` to create default config, then `ppm config set port 8081` for dev.
-
-## Architecture
-- `src/providers/claude-agent-sdk.ts` — SDK integration, tool execution, streaming
-- `src/server/ws/chat.ts` — WebSocket chat handler
-- `src/web/hooks/use-chat.ts` — Frontend chat state management
-- `src/services/config.service.ts` — Config from SQLite (`~/.ppm/ppm.db`)
-
-## Code Standards
-# PPM Code Standards & Conventions
-## File Naming
-| File Type | Convention | Example | Purpose |
-|-----------|-----------|---------|---------|
-| CLI commands | kebab-case | `start-cmd.ts`, `init.ts` | Descriptive command names |
-| Services | kebab-case | `chat.service.ts`, `file.service.ts` | `{feature}.service.ts` pattern |
-| Providers | kebab-case | `claude-agent-sdk.ts`, `mock-provider.ts` | `{name}-provider.ts` or `{name}.ts` |
-| Routes | kebab-case | `chat.ts`, `project-scoped.ts` | Describe HTTP route group |
-| WebSocket | kebab-case | `chat.ts`, `terminal.ts` | Match feature area |
-| Components | PascalCase | `ChatTab.tsx`, `FileTree.tsx` | React convention |
-
-## Slash Commands
-Use `/skills` to list all available skills and commands.
-Use `/help` for session help, `/status` for context usage, `/compact` to reduce context.
-
-## Dev Workflow
-1. `bun dev:server` — Start backend (port 8081, dev DB)
-2. `bun dev:web` — Start Vite frontend (port 5173)
-3. `bun test` — Run all tests
-4. `bun run typecheck` — TypeScript type checking