@hienlh/ppm 0.13.2 → 0.13.3

package/src/server/ws/chat.ts

@@ -50,6 +50,8 @@ interface SessionEntry {
   teamNames: Set<string>;
   /** toolUseId of a pending TeamCreate call */
   pendingTeamCreate?: string;
+  /** Compact indicator state — sticky until turn ends or boundary received, synced on reconnect */
+  compactStatus?: "compacting" | null;
 }
 
 /** Tracks active sessions — persists even when FE disconnects */
@@ -262,8 +264,12 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
       if (evType === "system") {
         const sub = (ev as any).subtype;
         if (sub === "compacting") {
+          entry.compactStatus = "compacting";
+          console.log(`[chat] session=${sessionId} compact_status=compacting (persisted on entry)`);
           broadcast(sessionId, { type: "compact_status", status: "compacting" });
         } else if (sub === "compact_done") {
+          entry.compactStatus = null;
+          console.log(`[chat] session=${sessionId} compact_status=done (via compact_boundary)`);
           broadcast(sessionId, { type: "compact_status", status: "done" });
         }
         if (!firstEventReceived) {
@@ -415,6 +421,14 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
       if (evType === "done") {
         entry.turnEvents = [];
         entry.pendingApprovalEvent = undefined;
+        // Clear stale compact status if turn ended without compact_boundary.
+        // SDK may emit `status: compacting` without a matching boundary (deferred,
+        // resolved, or errored); without this clear, UI shows stuck "Compacting…".
+        if (entry.compactStatus === "compacting") {
+          entry.compactStatus = null;
+          console.log(`[chat] session=${sessionId} compact_status=done (cleared on turn done without boundary)`);
+          broadcast(sessionId, { type: "compact_status", status: "done" });
+        }
         setPhase(sessionId, "idle");
         // Reset heartbeat tracking for next turn
         firstEventReceived = false;
@@ -432,6 +446,12 @@ async function startSessionConsumer(sessionId: string, providerId: string, conte
     if (heartbeat) clearInterval(heartbeat);
     entry.isStreamingActive = false;
     entry.turnEvents = [];
+    // Force-clear compact status on stream teardown (error, close, etc.)
+    if (entry.compactStatus === "compacting") {
+      entry.compactStatus = null;
+      console.log(`[chat] session=${sessionId} compact_status=done (cleared on stream teardown)`);
+      broadcast(sessionId, { type: "compact_status", status: "done" });
+    }
     setPhase(sessionId, "idle");
     entry.pendingApprovalEvent = undefined;
     // Cleanup bash output spies
@@ -488,6 +508,7 @@ export const chatWebSocket = {
         phase: existing.phase,
         pendingApproval: existing.pendingApprovalEvent ?? null,
         sessionTitle: session?.title || null,
+        compactStatus: existing.compactStatus ?? null,
       }));
 
       // If actively streaming, send buffered turn events for reconnect sync
@@ -528,6 +549,7 @@ export const chatWebSocket = {
       isStreamingActive: false,
       teamWatchers: new Map(),
       teamNames: new Set(),
+      compactStatus: null,
     };
     activeSessions.set(sessionId, newEntry);
     setupClientPing(newEntry, ws);
@@ -539,6 +561,7 @@ export const chatWebSocket = {
       phase: "idle",
       pendingApproval: null,
       sessionTitle: session?.title || null,
+      compactStatus: null,
     }));
 
     // Async: resolve title from SDK if in-memory title is generic (DB title takes priority)
@@ -580,7 +603,7 @@ export const chatWebSocket = {
       const newEntry: SessionEntry = {
         providerId: pid, clients: new Set([ws]), projectPath: pp, projectName: pn,
         pingIntervals: new Map(), phase: "idle", turnEvents: [], isStreamingActive: false,
-        teamWatchers: new Map(), teamNames: new Set(),
+        teamWatchers: new Map(), teamNames: new Set(), compactStatus: null,
       };
       activeSessions.set(sessionId, newEntry);
       setupClientPing(newEntry, ws);
@@ -605,6 +628,7 @@ export const chatWebSocket = {
         phase: entry.phase,
         pendingApproval: entry.pendingApprovalEvent ?? null,
         sessionTitle: chatService.getSession(sessionId)?.title || null,
+        compactStatus: entry.compactStatus ?? null,
       }));
       if (entry.phase !== "idle") {
         sendTurnEvents(sessionId, ws);
@@ -705,7 +729,10 @@ export const chatWebSocket = {
     } else if (parsed.type === "cancel") {
       // Fully teardown streaming session — user must resume to continue
       const provider = providerRegistry.get(providerId);
-      provider?.abortQuery?.(sessionId);
+      const phase = entry?.phase ?? "unknown";
+      console.log(`[chat] session=${sessionId} WS cancel received from FE (phase=${phase})`);
+      logSessionEvent(sessionId, "CANCEL", `WS cancel from FE (phase=${phase})`);
+      provider?.abortQuery?.(sessionId, "ws_cancel");
     } else if (parsed.type === "approval_response") {
       const provider = providerRegistry.get(providerId);
       if (provider && typeof provider.resolveApproval === "function") {

package/src/types/chat.ts

@@ -24,7 +24,7 @@ export interface AIProvider {
   // Optional capabilities — providers implement what they support
   resolveApproval?(requestId: string, approved: boolean, data?: unknown): void;
   onToolApproval?: (callback: ToolApprovalHandler) => void;
-  abortQuery?(sessionId: string): void;
+  abortQuery?(sessionId: string, source?: string): void;
   getMessages?(sessionId: string): Promise<ChatMessage[]>;
   listSessionsByDir?(dir: string, opts?: { limit?: number; offset?: number }): Promise<SessionInfo[]>;
   ensureProjectPath?(sessionId: string, path: string): void;

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

@@ -348,7 +348,11 @@ function UserBubble({ content, messageId, projectName, onFork, onExpandCompact,
     const parsed = parseUserAttachments(content);
     const { cleanText: noSysTags, tags } = extractSystemTags(parsed.text);
     const { command, cleanText } = parseCommandTags(noSysTags);
-    return { files: parsed.files, text: cleanText, tags, command, jsonlPath: extractJsonlPath(cleanText) };
+    // Merge command args into body text so line-clamp + Show more applies uniformly
+    const bodyText = command?.args
+      ? (cleanText ? `${command.args}\n\n${cleanText}` : command.args)
+      : cleanText;
+    return { files: parsed.files, text: bodyText, tags, command, jsonlPath: extractJsonlPath(cleanText) };
   }, [content]);
 
   // Pre-compact expansion state — local per button instance
@@ -394,16 +398,13 @@ function UserBubble({ content, messageId, projectName, onFork, onExpandCompact,
       {/* System tags as badges */}
       {tags.length > 0 && <SystemTagBadges tags={tags} />}
 
-      {/* Slash command chip */}
+      {/* Slash command chip — args rendered in body for expand/collapse support */}
       {command && (
         <div className="flex items-center gap-1.5 mb-0.5">
           <span className="inline-flex items-center gap-1 rounded-md bg-primary/15 border border-primary/20 px-2 py-0.5 text-xs font-medium text-primary">
             <Slash className="size-3 shrink-0" />
             {command.name}
           </span>
-          {command.args && (
-            <span className="text-xs text-text-secondary truncate max-w-80">{command.args}</span>
-          )}
         </div>
       )}
 

package/src/web/components/layout/command-palette.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { useState, useEffect, useRef, useMemo, useCallback, useDeferredValue } from "react";
 import {
   Terminal,
   MessageSquare,
@@ -25,7 +25,10 @@ import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useExtensionStore } from "@/stores/extension-store";
 import { api } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
-import { scoreFileSearch, compareScores, type FileSearchScore } from "@/lib/score-file-search";
+import { scoreFileSearchFast, compareScores, getFilename, type FileSearchScore } from "@/lib/score-file-search";
+
+/** Max results to display — prevents rendering thousands of matches */
+const MAX_RESULTS = 100;
 
 interface CommandItem {
   id: string;
@@ -108,6 +111,7 @@ const fsCache = new Map<string, string[]>();
 
 export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boolean; onClose: () => void; initialQuery?: string }) {
   const [query, setQuery] = useState("");
+  const deferredQuery = useDeferredValue(query);
   const [selectedIdx, setSelectedIdx] = useState(0);
   const [fsFiles, setFsFiles] = useState<string[]>([]);
   const [fsLoading, setFsLoading] = useState(false);
@@ -305,11 +309,29 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     [actionCommands, fileCommands],
   );
 
+  /**
+   * Precomputed lowercase search index — avoids re-allocating thousands of
+   * lowercased strings per keystroke. Recomputed only when allCommands changes.
+   */
+  const searchIndex = useMemo(() => {
+    return allCommands.map((cmd) => {
+      const path = cmd.keywords ?? cmd.label;
+      const pathLower = path.toLowerCase();
+      return {
+        cmd,
+        filenameLower: getFilename(pathLower),
+        pathLower,
+        labelLen: cmd.label.length,
+        depth: path.split("/").length,
+      };
+    });
+  }, [allCommands]);
+
   const filtered = useMemo(() => {
     // Path mode — search filesystem results using filename portion only
-    if (isPathQuery(query)) {
-      const lastSlash = query.lastIndexOf("/");
-      const fileFilter = lastSlash >= 0 ? query.slice(lastSlash + 1).toLowerCase() : "";
+    if (isPathQuery(deferredQuery)) {
+      const lastSlash = deferredQuery.lastIndexOf("/");
+      const fileFilter = lastSlash >= 0 ? deferredQuery.slice(lastSlash + 1).toLowerCase() : "";
       if (!fileFilter) return fsCommands.slice(0, 50);
       return fsCommands.filter((c) => {
         const name = c.label.toLowerCase();
@@ -319,17 +341,18 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     }
 
     // Normal mode
-    if (!query.trim()) return actionCommands;
+    if (!deferredQuery.trim()) return actionCommands;
+    const qLower = deferredQuery.toLowerCase();
     const scored: Array<{ cmd: CommandItem; score: FileSearchScore }> = [];
-    for (const c of allCommands) {
-      const s = scoreFileSearch(query, c.label, c.keywords ?? c.label);
-      if (s) scored.push({ cmd: c, score: s });
+    for (const entry of searchIndex) {
+      const s = scoreFileSearchFast(qLower, entry.filenameLower, entry.pathLower, entry.labelLen, entry.depth);
+      if (s) scored.push({ cmd: entry.cmd, score: s });
     }
     scored.sort((a, b) => compareScores(a.score, b.score));
-    const matched = scored.map((s) => s.cmd);
+    const matched = scored.slice(0, MAX_RESULTS).map((s) => s.cmd);
     // Prepend DB results (already filtered server-side) when query is 2+ chars
-    return query.trim().length >= 2 ? [...dbCommands, ...matched] : matched;
-  }, [allCommands, actionCommands, fsCommands, dbCommands, query]);
+    return deferredQuery.trim().length >= 2 ? [...dbCommands, ...matched] : matched;
+  }, [searchIndex, actionCommands, fsCommands, dbCommands, deferredQuery]);
 
   // Reset state when opening
   useEffect(() => {

package/src/web/components/layout/draggable-tab.tsx

@@ -101,14 +101,14 @@ export function DraggableTab({
       )}
     >
       <span
-        // No-tag: force neutral gray (overrides parent text-primary for active tabs) so untagged
-        // tabs don't look like they have a blue tag. Active state is still signaled via border + title color.
-        className={cn("relative", !tagColor && "text-text-secondary")}
-        style={tagColor ? { color: tagColor } : undefined}
+        // Streaming: force amber (matches favicon streaming bg) so typing state is unmistakable
+        // regardless of tab active state. Otherwise inherits parent button's color (primary/text-secondary).
+        // Tag identity is now shown as a separate left-edge bar (see wrapper div below), not icon color.
+        className={cn("relative", isStreaming && "text-amber-500")}
       >
         <Icon className="size-4" />
         {isStreaming ? (
-          // Messenger-style typing dots inside chat bubble — inherits current icon color
+          // Messenger-style typing dots inside chat bubble — inherits current icon color (amber while streaming)
           <span aria-hidden className="absolute inset-0 flex items-center justify-center gap-[1.5px]">
             <span className="tab-typing-dot size-[2px] rounded-full bg-current" />
             <span className="tab-typing-dot size-[2px] rounded-full bg-current" style={{ animationDelay: "0.15s" }} />

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

@@ -505,6 +505,9 @@ export function useChat(sessionId: string | null, providerId = "claude", project
       setPhase(p);
       phaseRef.current = p;
       setConnectingElapsed(p === "connecting" ? ((data as any).elapsed ?? 0) : 0);
+      // Safety: idle phase means no turn running — ensure compact indicator does not linger.
+      // BE should broadcast compact_status=done too, but this is a belt-and-braces clear.
+      if (p === "idle") setCompactStatus(null);
       return;
     }
 
@@ -523,6 +526,9 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           input: state.pendingApproval.input,
         });
       }
+      // Sync compact indicator from authoritative server state (covers reconnect).
+      // state.compactStatus is "compacting" | null — treat undefined as null for back-compat.
+      setCompactStatus(state.compactStatus === "compacting" ? "compacting" : null);
       // If idle, refetch history (completed turns) and hide overlay
       if (p === "idle") {
         refetchRef.current?.();

package/src/web/lib/score-file-search.ts

@@ -6,6 +6,10 @@
  *      > path contains(3) > fuzzy filename(4) > fuzzy path(5)
  *
  * Tie-breakers: shorter filename, fewer path segments.
+ *
+ * Hot-path note: callers pass PRE-LOWERCASED strings to avoid repeated
+ * allocations per keystroke. Use `scoreFileSearch` (convenience wrapper)
+ * for ad-hoc calls; use `scoreFileSearchFast` for the inner loop.
  */
 
 export interface FileSearchScore {
@@ -20,7 +24,7 @@ export interface FileSearchScore {
 }
 
 /** Extract filename from a path */
-function getFilename(path: string): string {
+export function getFilename(path: string): string {
   const i = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
   return i >= 0 ? path.slice(i + 1) : path;
 }
@@ -43,42 +47,58 @@ function fuzzyGap(query: string, text: string): number {
   return gap;
 }
 
-export function scoreFileSearch(
-  query: string,
-  label: string,
-  path: string,
+/**
+ * Fast scoring — requires pre-lowercased inputs. Use for tight loops.
+ * All string params MUST already be lowercase.
+ */
+export function scoreFileSearchFast(
+  qLower: string,
+  filenameLower: string,
+  pathLower: string,
+  labelLen: number,
+  depth: number,
 ): FileSearchScore | null {
-  const q = query.toLowerCase();
-  const nameLower = label.toLowerCase();
-  const pathLower = path.toLowerCase();
-  const filename = getFilename(pathLower);
-  const depth = path.split("/").length;
-
   // Tier 0: exact filename match
-  if (filename === q) return { tier: 0, offset: 0, nameLen: label.length, depth };
+  if (filenameLower === qLower) return { tier: 0, offset: 0, nameLen: labelLen, depth };
 
   // Tier 1: filename starts with query
-  if (filename.startsWith(q)) return { tier: 1, offset: 0, nameLen: label.length, depth };
+  if (filenameLower.startsWith(qLower)) return { tier: 1, offset: 0, nameLen: labelLen, depth };
 
   // Tier 2: filename contains query as substring
-  const fnIdx = filename.indexOf(q);
-  if (fnIdx >= 0) return { tier: 2, offset: fnIdx, nameLen: label.length, depth };
+  const fnIdx = filenameLower.indexOf(qLower);
+  if (fnIdx >= 0) return { tier: 2, offset: fnIdx, nameLen: labelLen, depth };
 
   // Tier 3: full path contains query as substring
-  const pathIdx = pathLower.indexOf(q);
-  if (pathIdx >= 0) return { tier: 3, offset: pathIdx, nameLen: label.length, depth };
+  const pathIdx = pathLower.indexOf(qLower);
+  if (pathIdx >= 0) return { tier: 3, offset: pathIdx, nameLen: labelLen, depth };
 
   // Tier 4: fuzzy match on filename
-  const fnGap = fuzzyGap(q, filename);
-  if (fnGap >= 0) return { tier: 4, offset: fnGap, nameLen: label.length, depth };
+  const fnGap = fuzzyGap(qLower, filenameLower);
+  if (fnGap >= 0) return { tier: 4, offset: fnGap, nameLen: labelLen, depth };
 
   // Tier 5: fuzzy match on full path
-  const pathGap = fuzzyGap(q, pathLower);
-  if (pathGap >= 0) return { tier: 5, offset: pathGap, nameLen: label.length, depth };
+  const pathGap = fuzzyGap(qLower, pathLower);
+  if (pathGap >= 0) return { tier: 5, offset: pathGap, nameLen: labelLen, depth };
 
   return null;
 }
 
+/** Convenience wrapper — lowers inputs on the fly. Use for ad-hoc calls. */
+export function scoreFileSearch(
+  query: string,
+  label: string,
+  path: string,
+): FileSearchScore | null {
+  const pathLower = path.toLowerCase();
+  return scoreFileSearchFast(
+    query.toLowerCase(),
+    getFilename(pathLower),
+    pathLower,
+    label.length,
+    path.split("/").length,
+  );
+}
+
 /** Compare two scores — for Array.sort (ascending = best first) */
 export function compareScores(a: FileSearchScore, b: FileSearchScore): number {
   return (