@hienlh/ppm 0.12.12 → 0.13.0

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

@@ -5,10 +5,7 @@ import type { ChatMessage, ChatEvent } from "../../../types/chat";
 import type { SessionPhase } from "../../../types/api";
 import type { BashPartialEntry } from "../../hooks/use-chat";
 import { ToolCard } from "./tool-cards";
-import { extractJsonlPath } from "./pre-compact-button";
-const PreCompactSection = lazy(() =>
-  import("./pre-compact-section").then((m) => ({ default: m.PreCompactSection }))
-);
+import { extractJsonlPath, PreCompactButton, type PreCompactStatus } from "./pre-compact-button";
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
 );
@@ -59,6 +56,10 @@ interface MessageListProps {
   onSelectSession?: (session: import("../../../types/chat").SessionInfo) => void;
   /** Partial bash output ref from useChat for real-time streaming */
   bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
+  /** Fetches pre-compact transcript and prepends messages. Returns loaded count. */
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  /** Whether a given compact message has already been expanded. */
+  isCompactExpanded?: (compactMessageId: string) => boolean;
 }
 
 export function MessageList({
@@ -75,6 +76,8 @@ export function MessageList({
   projectName,
   onFork,
   bashPartialOutput,
+  onExpandCompact,
+  isCompactExpanded,
 }: MessageListProps) {
   // Scroll handled by StickToBottom wrapper — no manual scroll logic needed
 
@@ -106,6 +109,15 @@ export function MessageList({
     onFork?.(msgContent, msgId);
   }, [onFork]);
 
+  // Wrap expandCompact: bump visibleCount by loaded count so expansion is immediately visible
+  // in the paginated view (pre-compact messages land at top of flattened array, above pagination window).
+  const handleExpandCompact = useCallback(async (compactId: string, jsonlPath: string): Promise<number> => {
+    if (!onExpandCompact) throw new Error("Expansion not wired");
+    const count = await onExpandCompact(compactId, jsonlPath);
+    setVisibleCount((c) => c + count);
+    return count;
+  }, [onExpandCompact]);
+
   if (messagesLoading) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
@@ -126,8 +138,8 @@ export function MessageList({
 
   return (
     <div className="relative flex-1 overflow-hidden flex flex-col min-h-0">
-      <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden [contain:strict]" resize="smooth" initial="instant">
-        <StickToBottom.Content className="p-4 space-y-4 select-none">
+      <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden [contain:strict] [overflow-anchor:auto]" resize="smooth" initial="instant">
+        <StickToBottom.Content className="p-4 space-y-4 select-none [&>*]:[overflow-anchor:auto]">
           {hasMore && (
             <button onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}
               className="w-full py-2 text-xs text-text-secondary hover:text-text-primary bg-surface-elevated/50 hover:bg-surface-elevated rounded-md border border-border/50 transition-colors">
@@ -146,6 +158,8 @@ export function MessageList({
                 onFork={msg.role === "user" && onFork ? handleFork : undefined}
                 prevMsgId={prevMsg?.sdkUuid ?? prevMsg?.id}
                 bashPartialOutput={bashPartialOutput}
+                onExpandCompact={handleExpandCompact}
+                isCompactExpanded={isCompactExpanded}
               />
             );
           })}
@@ -180,16 +194,25 @@ function ScrollToBottomButton() {
   );
 }
 
-const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId, bashPartialOutput }: {
+const MessageBubble = memo(function MessageBubble({ message, isStreaming, projectName, onFork, prevMsgId, bashPartialOutput, onExpandCompact, isCompactExpanded }: {
   message: ChatMessage; isStreaming: boolean; projectName?: string;
   onFork?: (content: string, messageId: string | undefined) => void;
   prevMsgId?: string;
   bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  isCompactExpanded?: (compactMessageId: string) => boolean;
 }) {
   if (message.role === "user") {
     const handleFork = onFork ? () => onFork(message.content, prevMsgId) : undefined;
     return (
-      <UserBubble content={message.content} projectName={projectName} onFork={handleFork} />
+      <UserBubble
+        content={message.content}
+        messageId={message.id}
+        projectName={projectName}
+        onFork={handleFork}
+        onExpandCompact={onExpandCompact}
+        isCompactExpanded={isCompactExpanded}
+      />
     );
   }
 
@@ -206,7 +229,7 @@ const MessageBubble = memo(function MessageBubble({ message, isStreaming, projec
   return (
     <div className="flex flex-col gap-2">
       {message.events && message.events.length > 0
-        ? <InterleavedEvents events={message.events} isStreaming={isStreaming} projectName={projectName} bashPartialOutput={bashPartialOutput} />
+        ? <InterleavedEvents events={message.events} isStreaming={isStreaming} projectName={projectName} bashPartialOutput={bashPartialOutput} messageId={message.id} onExpandCompact={onExpandCompact} isCompactExpanded={isCompactExpanded} />
         : message.content && (
             <div className="text-sm text-text-primary select-text">
               <MarkdownContent content={message.content} projectName={projectName} />
@@ -313,7 +336,14 @@ function isPdfPath(path: string): boolean {
 const SYSTEM_TAG_NAMES = new Set(["task-notification", "environment_details"]);
 
 /** User message bubble — full width, collapsible, with system tag badges */
-function UserBubble({ content, projectName, onFork }: { content: string; projectName?: string; onFork?: () => void }) {
+function UserBubble({ content, messageId, projectName, onFork, onExpandCompact, isCompactExpanded }: {
+  content: string;
+  messageId?: string;
+  projectName?: string;
+  onFork?: () => void;
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  isCompactExpanded?: (compactMessageId: string) => boolean;
+}) {
   const { files, text, tags, command, jsonlPath } = useMemo(() => {
     const parsed = parseUserAttachments(content);
     const { cleanText: noSysTags, tags } = extractSystemTags(parsed.text);
@@ -321,6 +351,23 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
     return { files: parsed.files, text: cleanText, tags, command, jsonlPath: extractJsonlPath(cleanText) };
   }, [content]);
 
+  // Pre-compact expansion state — local per button instance
+  const [preCompactStatus, setPreCompactStatus] = useState<PreCompactStatus>(() =>
+    messageId && isCompactExpanded?.(messageId) ? "loaded" : "idle",
+  );
+  const [preCompactCount, setPreCompactCount] = useState<number | undefined>();
+  const handleExpand = useCallback(async () => {
+    if (!jsonlPath || !messageId || !onExpandCompact) return;
+    setPreCompactStatus("loading");
+    try {
+      const count = await onExpandCompact(messageId, jsonlPath);
+      setPreCompactCount(count);
+      setPreCompactStatus("loaded");
+    } catch {
+      setPreCompactStatus("error");
+    }
+  }, [jsonlPath, messageId, onExpandCompact]);
+
   const isSystemContext = tags.some((t) => SYSTEM_TAG_NAMES.has(t.name));
 
   const [expanded, setExpanded] = useState(false);
@@ -403,22 +450,14 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
           {expanded ? <><ChevronUp className="size-3" />Show less</> : <><ChevronDown className="size-3" />Show more</>}
         </button>
       )}
-      {/* Expand compacted conversation: detect JSONL path in compact summary user message */}
-      {jsonlPath && (
-        <Suspense fallback={<div className="mt-2 animate-pulse h-10 bg-surface/50 rounded" />}>
-          <PreCompactSection
-            jsonlPath={jsonlPath}
-            projectName={projectName}
-            renderMessage={(msg, idx) => (
-              <MessageBubble
-                key={msg.id ?? `pc-${idx}`}
-                message={msg}
-                isStreaming={false}
-                projectName={projectName}
-              />
-            )}
-          />
-        </Suspense>
+      {/* Expand compacted conversation: detect JSONL path in compact summary user message.
+          Prepends pre-compact messages into main flattened list (see useChat.expandCompact). */}
+      {jsonlPath && messageId && onExpandCompact && (
+        <PreCompactButton
+          status={preCompactStatus}
+          onLoad={preCompactStatus === "idle" || preCompactStatus === "error" ? handleExpand : undefined}
+          count={preCompactCount}
+        />
       )}
       {/* Fork/Rewind button — only for real user messages */}
       {!isSystemContext && onFork && (
@@ -694,7 +733,31 @@ type EventGroup =
   | { kind: "thinking"; content: string }
   | { kind: "tool"; tool: ChatEvent; result?: ChatEvent; completed?: boolean };
 
-function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput }: { events: ChatEvent[]; isStreaming: boolean; projectName?: string; bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>> }) {
+function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput, messageId, onExpandCompact, isCompactExpanded }: {
+  events: ChatEvent[];
+  isStreaming: boolean;
+  projectName?: string;
+  bashPartialOutput?: React.RefObject<Map<string, BashPartialEntry>>;
+  messageId?: string;
+  onExpandCompact?: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  isCompactExpanded?: (compactMessageId: string) => boolean;
+}) {
+  // Local state for the /compact slash-command path (assistant-authored summary)
+  const [preCompactStatus, setPreCompactStatus] = useState<PreCompactStatus>(() =>
+    messageId && isCompactExpanded?.(messageId) ? "loaded" : "idle",
+  );
+  const [preCompactCount, setPreCompactCount] = useState<number | undefined>();
+  const handleExpand = useCallback(async (jsonlPath: string) => {
+    if (!messageId || !onExpandCompact) return;
+    setPreCompactStatus("loading");
+    try {
+      const count = await onExpandCompact(messageId, jsonlPath);
+      setPreCompactCount(count);
+      setPreCompactStatus("loaded");
+    } catch {
+      setPreCompactStatus("error");
+    }
+  }, [messageId, onExpandCompact]);
   // Group: consecutive text → merged text block; tool_use + tool_result paired by toolUseId
   const groups: EventGroup[] = [];
   let textBuffer = "";
@@ -813,22 +876,12 @@ function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput
           return (
             <div key={`text-${i}`} className="text-sm text-text-primary select-text">
               <StreamingText content={group.content} animate={isLast} projectName={projectName} />
-              {jsonlPath && (
-                <Suspense fallback={<div className="mt-2 animate-pulse h-10 bg-surface/50 rounded" />}>
-                  <PreCompactSection
-                    jsonlPath={jsonlPath}
-                    projectName={projectName}
-                    renderMessage={(msg, idx) => (
-                      <MessageBubble
-                        key={msg.id ?? `pc-${idx}`}
-                        message={msg}
-                        isStreaming={false}
-                        projectName={projectName}
-                        bashPartialOutput={bashPartialOutput}
-                      />
-                    )}
-                  />
-                </Suspense>
+              {jsonlPath && messageId && onExpandCompact && (
+                <PreCompactButton
+                  status={preCompactStatus}
+                  onLoad={preCompactStatus === "idle" || preCompactStatus === "error" ? () => handleExpand(jsonlPath) : undefined}
+                  count={preCompactCount}
+                />
               )}
             </div>
           );

package/src/web/hooks/use-chat.ts

@@ -1,6 +1,7 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { useWebSocket } from "./use-websocket";
 import { api, getAuthToken, projectUrl } from "@/lib/api-client";
+import { flattenWithExpansions, prefixPreCompactIds } from "@/lib/flatten-expansions";
 import { useNotificationStore } from "@/stores/notification-store";
 import { useStreamingStore } from "@/stores/streaming-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -41,6 +42,12 @@ export interface BashPartialEntry {
 
 interface UseChatReturn {
   messages: ChatMessage[];
+  /** Messages flattened with pre-compact expansions prepended before their compact cards. */
+  renderedMessages: ChatMessage[];
+  /** Fetch pre-compact transcript and store expansion. Returns loaded message count. */
+  expandCompact: (compactMessageId: string, jsonlPath: string) => Promise<number>;
+  /** Whether a given compactMessageId has been expanded. */
+  isCompactExpanded: (compactMessageId: string) => boolean;
   messagesLoading: boolean;
   isStreaming: boolean;
   phase: SessionPhase;
@@ -79,6 +86,8 @@ function isSessionTabActive(sid: string): boolean {
 
 export function useChat(sessionId: string | null, providerId = "claude", projectName = ""): UseChatReturn {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
+  /** Map of compactMessageId → pre-compact messages (already ID-prefixed). Ephemeral. */
+  const [expansions, setExpansions] = useState<Map<string, ChatMessage[]>>(new Map());
   const [messagesLoading, setMessagesLoading] = useState(false);
   const [phase, setPhase] = useState<SessionPhase>("idle");
   const [isReconnecting, setIsReconnecting] = useState(false);
@@ -604,6 +613,8 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     setPendingApproval(null);
     if (approvalToastRef.current != null) { toast.dismiss(approvalToastRef.current); approvalToastRef.current = null; }
     setCompactStatus(null);
+    // Clear ephemeral pre-compact expansions on session change
+    setExpansions(new Map());
     streamingContentRef.current = "";
     streamingEventsRef.current = [];
     bashOutputRef.current.clear();
@@ -796,8 +807,33 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   // Keep refetchRef in sync
   refetchRef.current = refetchMessages;
 
+  /** Fetch pre-compact transcript. Idempotent: re-expanding same id replaces entry. */
+  const expandCompact = useCallback(async (compactMessageId: string, jsonlPath: string): Promise<number> => {
+    if (!projectName) throw new Error("No project context available");
+    const url = `${projectUrl(projectName)}/chat/pre-compact-messages?jsonlPath=${encodeURIComponent(jsonlPath)}`;
+    const loaded = await api.get<ChatMessage[]>(url);
+    const prefixed = prefixPreCompactIds(loaded, jsonlPath);
+    setExpansions((prev) => {
+      const next = new Map(prev);
+      next.set(compactMessageId, prefixed);
+      return next;
+    });
+    return prefixed.length;
+  }, [projectName]);
+
+  const isCompactExpanded = useCallback((id: string) => expansions.has(id), [expansions]);
+
+  /** Flattened view: expansions prepended before their compact cards. */
+  const renderedMessages = useMemo(
+    () => flattenWithExpansions(messages, expansions),
+    [messages, expansions],
+  );
+
   return {
     messages,
+    renderedMessages,
+    expandCompact,
+    isCompactExpanded,
     messagesLoading,
     isStreaming,
     phase,

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/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

package/dist/web/assets/ai-settings-section-NNWp6nw7.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{b as t,x as n}from"./vendor-markdown-0Mxgxy0L.js";import{D as r,_ as i,b as a,c as o,d as s,f as c,g as l,h as u,m as d,p as f,s as p,u as m,v as h,x as g,y as _}from"./vendor-ui-B-89Uj8i.js";import{t as v}from"./createLucideIcon-BjHrJDVb.js";import{i as y}from"./dist-D7KGU7Vl.js";import{n as b,t as x}from"./chevron-up-BWBvMZkp.js";import{t as S}from"./input-2eDVjcRZ.js";import{t as C}from"./refresh-cw-BjrAbUJe.js";import{t as w}from"./trash-2-DjQOpgUV.js";import{i as T,t as E}from"./api-client-DIhJ5qVW.js";import{n as D}from"./utils-CQux7CsO.js";import{a as O,h as k}from"./api-settings-C3T95dWg.js";var A=v(`bell-off`,[[`path`,{d:`M10.268 21a2 2 0 0 0 3.464 0`,key:`vwvbt9`}],[`path`,{d:`M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742`,key:`178tsu`}],[`path`,{d:`m2 2 20 20`,key:`1ooewy`}],[`path`,{d:`M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05`,key:`1hqiys`}]]),j=v(`bot`,[[`path`,{d:`M12 8V4H8`,key:`hb8ula`}],[`rect`,{width:`16`,height:`12`,x:`4`,y:`8`,rx:`2`,key:`enze0r`}],[`path`,{d:`M2 14h2`,key:`vft8re`}],[`path`,{d:`M20 14h2`,key:`4cs60a`}],[`path`,{d:`M15 13v2`,key:`1xurst`}],[`path`,{d:`M9 13v2`,key:`rq6x2g`}]]),M=v(`bug`,[[`path`,{d:`M12 20v-9`,key:`1qisl0`}],[`path`,{d:`M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z`,key:`uouzyp`}],[`path`,{d:`M14.12 3.88 16 2`,key:`qol33r`}],[`path`,{d:`M21 21a4 4 0 0 0-3.81-4`,key:`1b0z45`}],[`path`,{d:`M21 5a4 4 0 0 1-3.55 3.97`,key:`5cxbf6`}],[`path`,{d:`M22 13h-4`,key:`1jl80f`}],[`path`,{d:`M3 21a4 4 0 0 1 3.81-4`,key:`1fjd4g`}],[`path`,{d:`M3 5a4 4 0 0 0 3.55 3.97`,key:`1d7oge`}],[`path`,{d:`M6 13H2`,key:`82j7cp`}],[`path`,{d:`m8 2 1.88 1.88`,key:`fmnt4t`}],[`path`,{d:`M9 7.13V6a3 3 0 1 1 6 0v1.13`,key:`1vgav8`}]]),N=v(`lock`,[[`rect`,{width:`18`,height:`11`,x:`3`,y:`11`,rx:`2`,ry:`2`,key:`1w4ew1`}],[`path`,{d:`M7 11V7a5 5 0 0 1 10 0v4`,key:`fwvmzm`}]]),P=v(`pencil`,[[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}],[`path`,{d:`m15 5 4 4`,key:`1mk7zo`}]]),F=v(`rotate-ccw`,[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`,key:`1357e3`}],[`path`,{d:`M3 3v5h5`,key:`1xhq8a`}]]),I=e(n(),1),L=t();function R({className:e,...t}){return(0,L.jsx)(r,{"data-slot":`label`,className:D(`flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50`,e),...t})}var z=I.forwardRef(({className:e,...t},n)=>(0,L.jsx)(p,{className:D(`peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input`,e),...t,ref:n,children:(0,L.jsx)(o,{className:D(`pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0`)})}));z.displayName=p.displayName;function B({...e}){return(0,L.jsx)(l,{"data-slot":`select`,...e})}function V({...e}){return(0,L.jsx)(a,{"data-slot":`select-value`,...e})}function H({className:e,size:t=`default`,children:n,...r}){return(0,L.jsxs)(_,{"data-slot":`select-trigger`,"data-size":t,className:D(`flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground`,e),...r,children:[n,(0,L.jsx)(s,{asChild:!0,children:(0,L.jsx)(b,{className:`size-4 opacity-50`})})]})}function U({className:e,children:t,position:n=`item-aligned`,align:r=`center`,...i}){return(0,L.jsx)(u,{children:(0,L.jsxs)(m,{"data-slot":`select-content`,className:D(`relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95`,n===`popper`&&`data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1`,e),position:n,align:r,...i,children:[(0,L.jsx)(G,{}),(0,L.jsx)(g,{className:D(`p-1`,n===`popper`&&`h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1`),children:t}),(0,L.jsx)(K,{})]})})}function W({className:e,children:t,...n}){return(0,L.jsxs)(c,{"data-slot":`select-item`,className:D(`relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,e),...n,children:[(0,L.jsx)(`span`,{"data-slot":`select-item-indicator`,className:`absolute right-2 flex size-3.5 items-center justify-center`,children:(0,L.jsx)(f,{children:(0,L.jsx)(y,{className:`size-4`})})}),(0,L.jsx)(d,{children:t})]})}function G({className:e,...t}){return(0,L.jsx)(h,{"data-slot":`select-scroll-up-button`,className:D(`flex cursor-default items-center justify-center py-1`,e),...t,children:(0,L.jsx)(x,{className:`size-4`})})}function K({className:e,...t}){return(0,L.jsx)(i,{"data-slot":`select-scroll-down-button`,className:D(`flex cursor-default items-center justify-center py-1`,e),...t,children:(0,L.jsx)(b,{className:`size-4`})})}var q={claude:`C`,cursor:`▶`,codex:`◆`,gemini:`G`};function J({value:e,onChange:t,projectName:n}){let[r,i]=(0,I.useState)([]),[a,o]=(0,I.useState)(!1),s=(0,I.useRef)(null),c=(0,I.useRef)(0);(0,I.useEffect)(()=>{n&&E.get(`${T(n)}/chat/providers`).then(i).catch(()=>{})},[n]),(0,I.useEffect)(()=>{if(!a)return;let e=e=>{s.current&&!s.current.contains(e.target)&&o(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[a]),(0,I.useEffect)(()=>{a&&(c.current=Math.max(0,r.findIndex(t=>t.id===e)))},[a,e,r]);let l=(0,I.useCallback)(e=>{if(e.key===`Escape`){o(!1);return}if(e.key===`ArrowDown`||e.key===`ArrowUp`){e.preventDefault();let t=e.key===`ArrowDown`?1:-1;c.current=(c.current+t+r.length)%r.length,(s.current?.querySelector(`[data-idx="${c.current}"]`))?.focus()}if(e.key===`Enter`){e.preventDefault();let n=r[c.current];n&&(t(n.id),o(!1))}},[t,r]);if(r.length<=1)return null;let u=r.find(t=>t.id===e),d=q[e]||`?`;return(0,L.jsxs)(`div`,{className:`relative`,children:[(0,L.jsxs)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),o(e=>!e)},className:`inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-text-subtle hover:text-text-primary hover:bg-surface-elevated transition-colors border border-transparent hover:border-border`,"aria-label":`AI Provider: ${u?.name??e}`,children:[(0,L.jsx)(`span`,{className:`inline-flex h-3.5 w-3.5 items-center justify-center rounded text-[9px] font-bold bg-surface-elevated shrink-0`,children:d}),(0,L.jsx)(`span`,{className:`max-w-[80px] truncate capitalize`,children:u?.name??e})]}),a&&(0,L.jsxs)(`div`,{ref:s,role:`listbox`,"aria-label":`AI Providers`,onKeyDown:l,onMouseDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),className:`absolute bottom-full left-0 mb-1 z-50 w-56 rounded-lg border border-border bg-surface shadow-lg`,children:[(0,L.jsx)(`div`,{className:`px-3 py-2 border-b border-border`,children:(0,L.jsx)(`span`,{className:`text-xs font-medium text-text-secondary`,children:`Provider`})}),(0,L.jsx)(`div`,{className:`py-1`,children:r.map((n,r)=>{let i=q[n.id]||`?`,a=n.id===e;return(0,L.jsxs)(`button`,{"data-idx":r,role:`option`,"aria-selected":a,tabIndex:0,onClick:()=>{t(n.id),o(!1)},className:`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-elevated focus:bg-surface-elevated focus:outline-none ${a?`bg-surface-elevated`:``}`,children:[(0,L.jsx)(`span`,{className:`inline-flex h-5 w-5 items-center justify-center rounded text-[11px] font-bold bg-surface-elevated text-text-subtle shrink-0`,children:i}),(0,L.jsx)(`span`,{className:`flex-1 text-sm font-medium text-text-primary capitalize`,children:n.name}),a&&(0,L.jsx)(y,{className:`size-4 shrink-0 text-primary`})]},n.id)})})]})]})}function Y({providerId:e}){return(0,L.jsx)(`span`,{className:`inline-flex h-4 w-4 items-center justify-center rounded text-[10px] font-bold bg-surface-elevated text-text-subtle shrink-0`,title:e,children:q[e]||`?`})}var X=[{value:`low`,label:`Low`},{value:`medium`,label:`Medium`},{value:`high`,label:`High`}],Z=[{value:`bypassPermissions`,label:`Bypass permissions (default)`},{value:`default`,label:`Ask before edits`},{value:`acceptEdits`,label:`Edit automatically`},{value:`plan`,label:`Plan mode`}],Q={claude:`Claude`,cursor:`Cursor`,codex:`Codex`,gemini:`Gemini`};function $({compact:e}={}){let[t,n]=(0,I.useState)(null),[r,i]=(0,I.useState)(``),[a,o]=(0,I.useState)([]),[s,c]=(0,I.useState)(!1),[l,u]=(0,I.useState)(!1),[d,f]=(0,I.useState)(null),[p,m]=(0,I.useState)(0);(0,I.useEffect)(()=>{O().then(e=>{n(e),i(e.default_provider??`claude`)}).catch(e=>f(e.message))},[]),(0,I.useEffect)(()=>{r&&(c(!0),E.get(`/api/settings/ai/providers/${r}/models`).then(o).catch(()=>o([])).finally(()=>c(!1)))},[r]);let h=t?Object.keys(t.providers).filter(e=>e!==`mock`).map(e=>({id:e,name:Q[e]??e})):[],g=t?.providers[r],_=g?.type===`agent-sdk`||!g?.type&&r===`claude`,v=async(e,i)=>{if(t){u(!0),f(null);try{n(await k({providers:{[r]:{[e]:i}}})),m(e=>e+1)}catch(e){f(e.message)}finally{u(!1)}}},y=e?`text-[11px]`:`text-sm`,b=e?`text-xs`:`text-sm`,x=e?`space-y-2`:`space-y-4`,C=e?`space-y-1.5`:`space-y-3`,w=e?`space-y-1`:`space-y-1.5`;if(!t)return(0,L.jsxs)(`div`,{className:C,children:[(0,L.jsx)(`h3`,{className:`${b} font-medium text-text-secondary`,children:`AI Settings`}),(0,L.jsx)(`p`,{className:`${y} text-text-subtle`,children:d?`Error: ${d}`:`Loading...`})]});let T=_?a:[{value:`__default__`,label:`Auto (default)`},...a];return(0,L.jsxs)(`div`,{className:x,children:[(0,L.jsx)(`h3`,{className:`${b} font-medium text-text-secondary`,children:`AI Settings`}),h.length>1&&(0,L.jsx)(`div`,{className:`flex gap-0.5 border-b border-border/50 -mx-1 px-1`,children:h.map(e=>(0,L.jsxs)(`button`,{onClick:()=>i(e.id),className:`flex items-center gap-1 px-2 py-1 text-[11px] rounded-t transition-colors ${r===e.id?`text-primary border-b-2 border-primary font-medium`:`text-text-subtle hover:text-text-secondary`}`,children:[(0,L.jsx)(Y,{providerId:e.id}),(0,L.jsx)(`span`,{className:`capitalize`,children:e.name})]},e.id))}),(0,L.jsxs)(`div`,{className:C,children:[a.length>0&&(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-model`,className:e?y:void 0,children:`Model`}),(0,L.jsxs)(B,{value:_?g?.model??a[0]?.value:g?.model||`__default__`,onValueChange:e=>v(`model`,e===`__default__`?void 0:e),disabled:s,children:[(0,L.jsx)(H,{id:`ai-model`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,L.jsx)(V,{placeholder:s?`Loading models...`:`Select model`})}),(0,L.jsx)(U,{className:`max-h-[300px]`,children:T.map(e=>(0,L.jsx)(W,{value:e.value,children:e.label},e.value))})]})]}),_&&(0,L.jsxs)(L.Fragment,{children:[(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-base-url`,className:e?y:void 0,children:`Base URL`}),(0,L.jsx)(S,{id:`ai-base-url`,type:`url`,defaultValue:g?.base_url??``,placeholder:`https://api.anthropic.com (default)`,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{v(`base_url`,e.target.value.trim()||void 0)}},`baseurl-${r}-${p}`)]}),(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-api-key`,className:e?y:void 0,children:`API Key / Token`}),(0,L.jsx)(S,{id:`ai-api-key`,type:`password`,defaultValue:g?.api_key??``,placeholder:`sk-ant-... (optional, overrides accounts)`,className:e?`h-7 text-[11px] font-mono`:`font-mono`,onBlur:e=>{let t=e.target.value.trim();t.startsWith(`••••`)||v(`api_key`,t||void 0)}},`apikey-${r}-${p}`),(0,L.jsx)(`p`,{className:`${e?`text-[9px]`:`text-[11px]`} text-muted-foreground`,children:`Direct API key or OAuth token. Leave empty to use connected accounts.`})]}),(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-effort`,className:e?y:void 0,children:`Effort`}),(0,L.jsxs)(B,{value:g?.effort??`high`,onValueChange:e=>v(`effort`,e),children:[(0,L.jsx)(H,{id:`ai-effort`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,L.jsx)(V,{})}),(0,L.jsx)(U,{children:X.map(e=>(0,L.jsx)(W,{value:e.value,children:e.label},e.value))})]})]}),(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-max-turns`,className:e?y:void 0,children:`Max Turns (1-500)`}),(0,L.jsx)(S,{id:`ai-max-turns`,type:`number`,min:1,max:500,defaultValue:g?.max_turns??100,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{let t=parseInt(e.target.value);isNaN(t)||v(`max_turns`,t)}},`turns-${r}-${p}`)]}),(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-budget`,className:e?y:void 0,children:`Max Budget (USD)`}),(0,L.jsx)(S,{id:`ai-budget`,type:`number`,step:.1,min:.01,max:50,defaultValue:g?.max_budget_usd??``,placeholder:`No limit`,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{let t=parseFloat(e.target.value);v(`max_budget_usd`,isNaN(t)?void 0:t)}},`budget-${r}-${p}`)]}),(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-thinking`,className:e?y:void 0,children:`Thinking Budget (tokens)`}),(0,L.jsx)(S,{id:`ai-thinking`,type:`number`,min:0,defaultValue:g?.thinking_budget_tokens??``,placeholder:`Disabled`,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{let t=parseInt(e.target.value);v(`thinking_budget_tokens`,isNaN(t)?void 0:t)}},`thinking-${r}-${p}`)]}),(0,L.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,L.jsxs)(`div`,{children:[(0,L.jsx)(R,{htmlFor:`ai-agent-teams`,className:e?y:void 0,children:`Agent Teams`}),(0,L.jsx)(`p`,{className:`${e?`text-[9px]`:`text-[11px]`} text-muted-foreground`,children:`Experimental. Enables multi-agent collaboration with shared tasks and messaging. Uses ~7x more tokens.`})]}),(0,L.jsx)(z,{id:`ai-agent-teams`,checked:g?.agent_teams??!1,onCheckedChange:e=>v(`agent_teams`,e)})]}),g?.agent_teams&&(0,L.jsx)(ee,{compact:e})]}),(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-permission-mode`,className:e?y:void 0,children:`Default Permission Mode`}),(0,L.jsxs)(B,{value:g?.permission_mode??`bypassPermissions`,onValueChange:e=>v(`permission_mode`,e),children:[(0,L.jsx)(H,{id:`ai-permission-mode`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,L.jsx)(V,{})}),(0,L.jsx)(U,{children:Z.map(e=>(0,L.jsx)(W,{value:e.value,children:e.label},e.value))})]})]}),(0,L.jsxs)(`div`,{className:w,children:[(0,L.jsx)(R,{htmlFor:`ai-system-prompt`,className:e?y:void 0,children:`Additional Instructions`}),(0,L.jsx)(`textarea`,{id:`ai-system-prompt`,rows:e?3:4,defaultValue:g?.system_prompt??``,placeholder:`Enter additional instructions for ${r}...`,className:`w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${e?`text-[11px]`:`text-sm`}`,onBlur:e=>{v(`system_prompt`,e.target.value.trim()||void 0)}},`sysprompt-${r}-${p}`)]})]}),l&&(0,L.jsx)(`p`,{className:`text-xs text-text-subtle`,children:`Saving...`}),d&&(0,L.jsx)(`p`,{className:`text-xs text-red-500`,children:d})]})}function ee({compact:e}){let[t,n]=(0,I.useState)([]),[r,i]=(0,I.useState)(!1),[a,o]=(0,I.useState)(null),s=(0,I.useCallback)(async()=>{i(!0);try{n(await E.get(`/api/teams`)??[])}catch{}i(!1)},[]);(0,I.useEffect)(()=>{s()},[s]);let c=async e=>{try{await E.del(`/api/teams/${encodeURIComponent(e)}`),n(t=>t.filter(t=>t.name!==e)),o(null)}catch{}};return t.length===0&&!r?null:(0,L.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,L.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,L.jsxs)(R,{className:e?`text-[11px]`:void 0,children:[`Teams (`,t.length,`)`]}),(0,L.jsx)(`button`,{onClick:s,className:`text-text-subtle hover:text-foreground p-1`,"aria-label":`Refresh teams`,children:(0,L.jsx)(C,{className:`size-3 ${r?`animate-spin`:``}`})})]}),t.map(e=>(0,L.jsxs)(`div`,{className:`flex items-center justify-between p-2 rounded bg-surface-elevated text-xs`,children:[(0,L.jsxs)(`div`,{className:`min-w-0`,children:[(0,L.jsx)(`div`,{className:`font-medium truncate`,children:e.name}),e.description&&(0,L.jsx)(`div`,{className:`text-text-subtle truncate`,children:e.description}),(0,L.jsxs)(`div`,{className:`text-text-subtle`,children:[e.members?.length??e.memberCount??0,` members`,e.createdAt?` · ${new Date(e.createdAt).toLocaleDateString()}`:``]})]}),a===e.name?(0,L.jsxs)(`div`,{className:`flex gap-1 shrink-0 ml-2`,children:[(0,L.jsx)(`button`,{onClick:()=>c(e.name),className:`px-2 py-1 bg-red-600 text-white rounded text-[10px]`,children:`Delete`}),(0,L.jsx)(`button`,{onClick:()=>o(null),className:`px-2 py-1 bg-zinc-600 text-white rounded text-[10px]`,children:`Cancel`})]}):(0,L.jsx)(`button`,{onClick:()=>o(e.name),className:`shrink-0 text-text-subtle hover:text-red-500 p-1 ml-2`,"aria-label":`Delete team ${e.name}`,children:(0,L.jsx)(w,{className:`size-3.5`})})]},e.name))]})}export{U as a,V as c,F as d,P as f,A as g,j as h,B as i,z as l,M as m,Y as n,W as o,N as p,J as r,H as s,$ as t,R as u};

package/dist/web/assets/architecture-PBZL5I3N-DDuzYaUV.js

@@ -1 +0,0 @@
-import{W as e}from"./vendor-mermaid-sQS4C_iL.js";export{e as createArchitectureServices};