@hienlh/ppm 0.10.3 → 0.10.5

package/src/services/supervisor-state.ts

@@ -55,7 +55,19 @@ export function updateStatus(patch: Record<string, unknown>) {
   try {
     const data = { ...readStatus(), ...patch };
     atomicWriteJson(STATUS_FILE(), data);
-  } catch {}
+  } catch (e) {
+    // Log to stderr so failures are visible in ppm.log
+    try { process.stderr.write(`[updateStatus] Failed to write status.json: ${e}\n`); } catch {}
+  }
+}
+
+/** Full write — replaces entire status.json (use at supervisor startup to clear stale data) */
+export function writeStatus(data: Record<string, unknown>) {
+  try {
+    atomicWriteJson(STATUS_FILE(), data);
+  } catch (e) {
+    try { process.stderr.write(`[writeStatus] Failed to write status.json: ${e}\n`); } catch {}
+  }
 }
 
 // ─── Command file protocol ─────────────────────────────────────────────

package/src/services/supervisor.ts

@@ -15,7 +15,7 @@ import { isCompiledBinary } from "./autostart-generator.ts";
 import {
   type SupervisorState,
   getState, setState, waitForResume, triggerResume,
-  readAndDeleteCmd, readStatus, updateStatus,
+  readAndDeleteCmd, readStatus, updateStatus, writeStatus,
   STATUS_FILE, PID_FILE,
 } from "./supervisor-state.ts";
 import { startStoppedPage, stopStoppedPage } from "./supervisor-stopped-page.ts";
@@ -767,11 +767,12 @@ export async function runSupervisor(opts: {
     log("ERROR", `Unhandled rejection: ${reason}`);
   });
 
-  // Write supervisor PID + clear stale availableVersion from previous run
+  // Full write to clear any stale data from previous runs (different port, dead PIDs, etc.)
   writeFileSync(PID_FILE(), String(process.pid));
-  updateStatus({
+  writeStatus({
     supervisorPid: process.pid, port: opts.port, host: opts.host, availableVersion: null,
     state: "running", pausedAt: null, pauseReason: null, lastCrashError: null,
+    pid: null, tunnelPid: null, shareUrl: null,
   });
 
   // Build __serve__ args

package/src/web/components/chat/chat-tab.tsx

@@ -38,6 +38,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [slashFilter, setSlashFilter] = useState("");
   const [slashRanked, setSlashRanked] = useState(false);
   const [slashSelected, setSlashSelected] = useState<SlashItem | null>(null);
+  const [slashRecentNames, setSlashRecentNames] = useState<string[]>([]);
 
   // File picker state
   const [fileItems, setFileItems] = useState<FileNode[]>([]);
@@ -251,9 +252,10 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   /** Stable callback for slash items loaded — prevents MessageInput memo break */
   const handleSlashItemsLoaded = useCallback(
-    (items: SlashItem[], ranked?: boolean) => {
+    (items: SlashItem[], ranked?: boolean, recentNames?: string[]) => {
       setSlashItems(items);
       if (ranked !== undefined) setSlashRanked(ranked);
+      if (recentNames) setSlashRecentNames(recentNames);
     },
     [],
   );
@@ -270,7 +272,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     setShowSlashPicker(false);
     setSlashFilter("");
     setTimeout(() => setSlashSelected(null), 50);
-  }, []);
+    // Record usage for recents (fire-and-forget)
+    if (projectName) {
+      api.post(`${projectUrl(projectName)}/chat/slash-recents`, { name: item.name, type: item.type }).catch(() => {});
+      // Optimistic update: add to front of recents
+      setSlashRecentNames((prev) => [item.name, ...prev.filter((n) => n !== item.name)].slice(0, 5));
+    }
+  }, [projectName]);
 
   const handleSlashClose = useCallback(() => {
     setShowSlashPicker(false);
@@ -404,6 +412,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           onClose={handleSlashClose}
           visible={showSlashPicker}
           ranked={slashRanked}
+          recentNames={slashRecentNames}
+          projectName={projectName}
         />
         <FilePicker
           items={fileItems}

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

@@ -32,7 +32,7 @@ interface MessageInputProps {
   projectName?: string;
   /** Slash picker state change */
   onSlashStateChange?: (visible: boolean, filter: string) => void;
-  onSlashItemsLoaded?: (items: SlashItem[], ranked?: boolean) => void;
+  onSlashItemsLoaded?: (items: SlashItem[], ranked?: boolean, recentNames?: string[]) => void;
   slashSelected?: SlashItem | null;
   /** File picker state change */
   onFileStateChange?: (visible: boolean, filter: string) => void;
@@ -169,25 +169,35 @@ export const MessageInput = memo(function MessageInput({
     setTimeout(() => { getVisibleTextarea()?.focus(); }, 100);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Fetch slash items when projectName changes
-  useEffect(() => {
+  // Fetch slash items from server
+  const fetchSlashItems = useCallback(() => {
     if (!projectName) {
       slashItemsRef.current = [];
-      onSlashItemsLoaded?.([], false);
+      onSlashItemsLoaded?.([], false, []);
       return;
     }
     api
-      .get<SlashItem[]>(`${projectUrl(projectName)}/chat/slash-items`)
-      .then((items) => {
-        slashItemsRef.current = items;
+      .get<{ items: SlashItem[]; recentNames: string[] }>(`${projectUrl(projectName)}/chat/slash-items`)
+      .then((data) => {
+        slashItemsRef.current = data.items;
         slashRankedRef.current = false;
-        onSlashItemsLoaded?.(items, false);
+        onSlashItemsLoaded?.(data.items, false, data.recentNames);
       })
       .catch(() => {
         slashItemsRef.current = [];
-        onSlashItemsLoaded?.([], false);
+        onSlashItemsLoaded?.([], false, []);
       });
-  }, [projectName]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [projectName, onSlashItemsLoaded]);
+
+  // Fetch slash items when projectName changes
+  useEffect(() => { fetchSlashItems(); }, [fetchSlashItems]);
+
+  // Re-fetch when cache is invalidated via refresh button
+  useEffect(() => {
+    const handler = () => fetchSlashItems();
+    window.addEventListener("ppm:slash-items-refresh", handler);
+    return () => window.removeEventListener("ppm:slash-items-refresh", handler);
+  }, [fetchSlashItems]);
 
   // Cleanup debounce timer on unmount
   useEffect(() => {
@@ -437,12 +447,12 @@ export const MessageInput = memo(function MessageInput({
       const requestId = ++slashSearchIdRef.current;
       slashDebounceRef.current = setTimeout(() => {
         api
-          .get<SlashItem[]>(`${projectUrl(projectName)}/chat/slash-items?q=${encodeURIComponent(query)}`)
-          .then((items) => {
+          .get<{ items: SlashItem[]; recentNames: string[] }>(`${projectUrl(projectName)}/chat/slash-items?q=${encodeURIComponent(query)}`)
+          .then((data) => {
             if (requestId !== slashSearchIdRef.current) return; // stale response
-            slashItemsRef.current = items;
+            slashItemsRef.current = data.items;
             slashRankedRef.current = true;
-            onSlashItemsLoaded?.(items, true);
+            onSlashItemsLoaded?.(data.items, true, data.recentNames);
           })
           .catch(() => {
             if (requestId !== slashSearchIdRef.current) return;

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

@@ -807,21 +807,14 @@ function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming:
  * When `isStreaming=true`, shows a blinking cursor at the end.
  */
 function StreamingText({ content, animate: isStreaming, projectName }: { content: string; animate: boolean; projectName?: string }) {
-  // During active streaming, render plain text to avoid running 6 heavy markdown
-  // plugins (remarkGfm, remarkMath, remarkBreaks, rehypeRaw, rehypeKatex, rehypeHighlight)
-  // on every rAF frame. Full markdown renders once streaming ends.
-  if (isStreaming) {
-    const cleaned = stripTeammateMessages(content);
-    return (
-      <>
-        {cleaned && (
-          <div className="prose prose-invert max-w-none whitespace-pre-wrap break-words select-text">{cleaned}</div>
-        )}
+  return (
+    <>
+      <MarkdownContent content={content} projectName={projectName} isStreaming={isStreaming} />
+      {isStreaming && (
         <span className="text-text-subtle text-sm animate-pulse">Thinking...</span>
-      </>
-    );
-  }
-  return <MarkdownContent content={content} projectName={projectName} />;
+      )}
+    </>
+  );
 }
 
 /**

package/src/web/components/chat/slash-command-picker.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
-import { Sparkles, Terminal, Zap } from "lucide-react";
+import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent } from "react";
+import { Sparkles, Terminal, Zap, RefreshCw, Clock } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
 
 export interface SlashItem {
   type: "skill" | "command" | "builtin";
@@ -19,6 +20,10 @@ interface SlashCommandPickerProps {
   visible: boolean;
   /** When true, items are pre-ranked by server — skip client-side filtering */
   ranked?: boolean;
+  /** Recently used item names (most recent first) */
+  recentNames?: string[];
+  /** Project name for cache invalidation */
+  projectName?: string;
 }
 
 export function SlashCommandPicker({
@@ -28,19 +33,46 @@ export function SlashCommandPicker({
   onClose,
   visible,
   ranked,
+  recentNames = [],
+  projectName,
 }: SlashCommandPickerProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
   const listRef = useRef<HTMLDivElement>(null);
 
-  const filtered = ranked
-    ? items
-    : items.filter((item) => {
-        const q = filter.toLowerCase();
-        return (
-          item.name.toLowerCase().includes(q) ||
-          item.description.toLowerCase().includes(q)
-        );
-      });
+  const recentSet = useMemo(() => new Set(recentNames), [recentNames]);
+
+  // Build display list: when no filter + not ranked, put recents first
+  const displayItems = useMemo(() => {
+    let base: SlashItem[];
+    if (ranked) {
+      base = items;
+    } else if (filter) {
+      const q = filter.toLowerCase();
+      base = items.filter(
+        (item) => item.name.toLowerCase().includes(q) || item.description.toLowerCase().includes(q),
+      );
+    } else {
+      base = items;
+    }
+
+    // Reorder: recents first when no filter and not server-ranked
+    if (!filter && !ranked && recentNames.length > 0) {
+      const recents: SlashItem[] = [];
+      const rest: SlashItem[] = [];
+      for (const item of base) {
+        if (recentSet.has(item.name)) recents.push(item);
+        else rest.push(item);
+      }
+      // Sort recents by their order in recentNames (most recent first)
+      recents.sort((a, b) => recentNames.indexOf(a.name) - recentNames.indexOf(b.name));
+      return { items: [...recents, ...rest], recentCount: recents.length };
+    }
+    return { items: base, recentCount: 0 };
+  }, [items, filter, ranked, recentNames, recentSet]);
+
+  const filtered = displayItems.items;
+  const recentCount = displayItems.recentCount;
 
   // Reset selection when filter changes
   useEffect(() => {
@@ -95,49 +127,91 @@ export function SlashCommandPicker({
     return () => document.removeEventListener("keydown", handler, true);
   }, [visible, handleKeyDown]);
 
+  const handleRefresh = useCallback(() => {
+    if (!projectName || refreshing) return;
+    setRefreshing(true);
+    api.del(`${projectUrl(projectName)}/chat/slash-items/cache`)
+      .then(() => {
+        // Trigger re-fetch by dispatching custom event (MessageInput listens on projectName)
+        window.dispatchEvent(new CustomEvent("ppm:slash-items-refresh"));
+      })
+      .finally(() => setRefreshing(false));
+  }, [projectName, refreshing]);
+
   if (!visible || filtered.length === 0) return null;
 
   return (
     <div className="max-h-52 overflow-y-auto border-b border-border bg-surface">
       <div ref={listRef} className="py-1">
-        {filtered.map((item, i) => (
-          <button
-            key={`${item.type}-${item.name}`}
-            className={`flex items-start gap-3 w-full px-3 py-2 text-left transition-colors ${
-              i === selectedIndex
-                ? "bg-primary/10 text-primary"
-                : "hover:bg-surface-hover text-text-primary"
-            }`}
-            onMouseEnter={() => setSelectedIndex(i)}
-            onClick={() => onSelect(item)}
-          >
-            <span className="shrink-0 mt-0.5">
-              {item.type === "builtin" ? (
-                <Zap className="size-4 text-emerald-500" />
-              ) : item.type === "skill" ? (
-                <Sparkles className="size-4 text-amber-500" />
-              ) : (
-                <Terminal className="size-4 text-blue-500" />
+        {filtered.map((item, i) => {
+          // Show "Recent" separator before first item, "All" before first non-recent
+          const showRecentLabel = recentCount > 0 && i === 0;
+          const showAllLabel = recentCount > 0 && i === recentCount;
+
+          return (
+            <div key={`${item.type}-${item.name}`}>
+              {showRecentLabel && (
+                <div className="flex items-center justify-between px-3 pt-1 pb-0.5">
+                  <span className="text-[10px] font-medium text-text-subtle uppercase tracking-wider flex items-center gap-1">
+                    <Clock className="size-3" />
+                    Recent
+                  </span>
+                  {projectName && (
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); handleRefresh(); }}
+                      className="text-text-subtle hover:text-text-primary transition-colors p-0.5 rounded"
+                      title="Refresh skill list"
+                      aria-label="Refresh skill list"
+                    >
+                      <RefreshCw className={`size-3 ${refreshing ? "animate-spin" : ""}`} />
+                    </button>
+                  )}
+                </div>
               )}
-            </span>
-            <div className="min-w-0 flex-1">
-              <div className="flex items-baseline gap-2">
-                <span className="font-medium text-sm">/{item.name}</span>
-                {item.argumentHint && (
-                  <span className="text-xs text-text-subtle">{item.argumentHint}</span>
-                )}
-                <span className="text-xs text-text-subtle capitalize ml-auto">
-                  {item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
-                </span>
-              </div>
-              {item.description && (
-                <p className="text-xs text-text-subtle mt-0.5 line-clamp-2">
-                  {item.description}
-                </p>
+              {showAllLabel && (
+                <div className="px-3 pt-1.5 pb-0.5">
+                  <span className="text-[10px] font-medium text-text-subtle uppercase tracking-wider">All</span>
+                </div>
               )}
+              <button
+                className={`flex items-start gap-3 w-full px-3 py-2 text-left transition-colors ${
+                  i === selectedIndex
+                    ? "bg-primary/10 text-primary"
+                    : "hover:bg-surface-hover text-text-primary"
+                }`}
+                onMouseEnter={() => setSelectedIndex(i)}
+                onClick={() => onSelect(item)}
+              >
+                <span className="shrink-0 mt-0.5">
+                  {item.type === "builtin" ? (
+                    <Zap className="size-4 text-emerald-500" />
+                  ) : item.type === "skill" ? (
+                    <Sparkles className="size-4 text-amber-500" />
+                  ) : (
+                    <Terminal className="size-4 text-blue-500" />
+                  )}
+                </span>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-baseline gap-2">
+                    <span className="font-medium text-sm">/{item.name}</span>
+                    {item.argumentHint && (
+                      <span className="text-xs text-text-subtle">{item.argumentHint}</span>
+                    )}
+                    <span className="text-xs text-text-subtle capitalize ml-auto">
+                      {item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
+                    </span>
+                  </div>
+                  {item.description && (
+                    <p className="text-xs text-text-subtle mt-0.5 line-clamp-2">
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+              </button>
             </div>
-          </button>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

package/src/web/components/extensions/extension-webview.tsx

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState, useCallback } from "react";
 import { useExtensionStore } from "@/stores/extension-store";
 import { useTabStore } from "@/stores/tab-store";
+import { getAuthToken } from "@/lib/api-client";
 import { Loader2 } from "lucide-react";
 
 /** Inject acquireVsCodeApi() shim so extension webviews can postMessage to parent */
@@ -74,7 +75,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
       let args: unknown[] = [];
       if (projectName) {
         try {
-          const res = await fetch("/api/projects");
+          const token = getAuthToken();
+          const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
           const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
           const match = json.data?.find((p) => p.name === projectName);
           if (match) args = [match.path];
@@ -103,7 +105,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     const command = viewType.includes(".") ? viewType : `${viewType}.view`;
     (async () => {
       try {
-        const res = await fetch("/api/projects");
+        const token = getAuthToken();
+        const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
         const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
         const match = json.data?.find((p) => p.name === projectName);
         if (match) {
@@ -135,7 +138,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     const command = viewType.includes(".") ? viewType : `${viewType}.view`;
     (async () => {
       try {
-        const res = await fetch("/api/projects");
+        const token = getAuthToken();
+        const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
         const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
         const match = json.data?.find((p) => p.name === projectName);
         const args = match ? [match.path] : [];

package/src/web/lib/report-bug.ts

@@ -1,4 +1,4 @@
-import { api, projectUrl } from "./api-client";
+import { api, projectUrl, getAuthToken } from "./api-client";
 
 const REPO = "hienlh/ppm";
 
@@ -9,7 +9,8 @@ export async function buildBugReport(
 ): Promise<string> {
   let serverLogs = "(could not fetch)";
   try {
-    const res = await fetch("/api/logs/recent");
+    const token = getAuthToken();
+    const res = await fetch("/api/logs/recent", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
     const json = await res.json();
     if (json.ok) serverLogs = json.data.logs || "(empty)";
   } catch {}

package/src/web/lib/ws-client.ts

@@ -90,11 +90,12 @@ export class WsClient {
   send(data: string | ArrayBuffer): void {
     if (this.ws?.readyState === WebSocket.OPEN) {
       this.ws.send(data);
-    } else if (this.ws?.readyState === WebSocket.CONNECTING) {
-      console.warn("[ws] WS still CONNECTING — queuing message");
+    } else if (!this.intentionalClose) {
+      // Queue message — will be flushed when WS (re)connects
+      console.warn(`[ws] WS not open (readyState=${this.ws?.readyState ?? "no-ws"}) — queuing message`);
       this.pendingMessages.push(data);
     } else {
-      console.warn(`[ws] message dropped — readyState=${this.ws?.readyState ?? "no-ws"}`);
+      console.warn(`[ws] message dropped — WS intentionally closed`);
     }
   }
 

package/src/web/stores/settings-store.ts

@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { getAuthToken } from "@/lib/api-client";
 
 export type Theme = "light" | "dark" | "system";
 export type GitStatusViewMode = "flat" | "tree";
@@ -93,9 +94,10 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     applyThemeClass(theme);
     set({ theme });
     // Save to server (fire-and-forget)
+    const token = getAuthToken();
     fetch("/api/settings/theme", {
       method: "PUT",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", ...(token ? { Authorization: `Bearer ${token}` } : {}) },
       body: JSON.stringify({ theme }),
     }).catch(() => {});
   },
@@ -144,9 +146,11 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
 
   fetchServerInfo: async () => {
     try {
+      const token = getAuthToken();
+      const authInit = token ? { headers: { Authorization: `Bearer ${token}` } } : {};
       const [infoRes, themeRes] = await Promise.all([
-        fetch("/api/info"),
-        fetch("/api/settings/theme"),
+        fetch("/api/info", authInit),
+        fetch("/api/settings/theme", authInit),
       ]);
       const infoJson = await infoRes.json();
       if (infoJson.ok) {

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

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