@hienlh/ppm 0.13.4 → 0.13.6

package/src/services/supervisor.ts

@@ -7,7 +7,7 @@
 import type { Subprocess } from "bun";
 import { resolve } from "node:path";
 import {
-  readFileSync, writeFileSync, existsSync, mkdirSync, openSync, appendFileSync,
+  readFileSync, writeFileSync, existsSync, mkdirSync, openSync, closeSync, appendFileSync,
   unlinkSync,
 } from "node:fs";
 import { getPpmDir } from "./ppm-dir.ts";
@@ -170,40 +170,28 @@ export async function spawnServer(
 }
 
 // ─── Tunnel management ─────────────────────────────────────────────────
-async function extractUrlFromStderr(stderr: ReadableStream<Uint8Array>): Promise<string> {
-  const reader = stderr.getReader();
-  const decoder = new TextDecoder();
-  let buffer = "";
+const cloudflaredLogPath = () => resolve(getPpmDir(), "cloudflared.log");
 
-  return new Promise((resolve, reject) => {
-    const timeout = setTimeout(() => reject(new Error("Tunnel URL timeout (30s)")), 30_000);
-
-    const read = async () => {
+/**
+ * Poll cloudflared log file for trycloudflare URL.
+ * Stderr is redirected to this file (not piped) so cloudflared survives
+ * parent supervisor exit during self-replace (no SIGPIPE on closed pipe).
+ */
+async function extractUrlFromLogFile(child: Subprocess): Promise<string> {
+  const path = cloudflaredLogPath();
+  const deadline = Date.now() + 30_000;
+  while (Date.now() < deadline) {
+    if (existsSync(path)) {
       try {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          buffer += decoder.decode(value, { stream: true });
-          const match = buffer.match(TUNNEL_URL_REGEX);
-          if (match) {
-            clearTimeout(timeout);
-            // Keep draining in background to avoid SIGPIPE
-            (async () => {
-              try { while (!(await reader.read()).done) {} } catch {}
-            })();
-            resolve(match[0]);
-            return;
-          }
-        }
-        clearTimeout(timeout);
-        reject(new Error("cloudflared exited without providing URL"));
-      } catch (err) {
-        clearTimeout(timeout);
-        reject(err);
-      }
-    };
-    read();
-  });
+        const content = readFileSync(path, "utf8");
+        const match = content.match(TUNNEL_URL_REGEX);
+        if (match) return match[0];
+      } catch {}
+    }
+    if (child.exitCode !== null) throw new Error("cloudflared exited without providing URL");
+    await Bun.sleep(200);
+  }
+  throw new Error("Tunnel URL timeout (30s)");
 }
 
 async function syncUrlToCloud(url: string) {
@@ -243,11 +231,23 @@ export async function spawnTunnel(port: number): Promise<void> {
       ]
     : [bin, "tunnel", "--url", `http://127.0.0.1:${port}`];
 
-  tunnelChild = Bun.spawn(tunnelCmd, { stderr: "pipe", stdout: "ignore", stdin: "ignore" });
+  // Redirect cloudflared stderr to a log file (not pipe). This way cloudflared
+  // survives parent supervisor exit during self-replace — a piped stderr would
+  // close when parent exits, causing SIGPIPE on next cloudflared log write and
+  // killing the tunnel ~10-15s later (silently breaking adoption).
+  const logPath = cloudflaredLogPath();
+  try { unlinkSync(logPath); } catch {}  // truncate stale URLs from prior run
+  const tunnelLogFd = openSync(logPath, "a");
+  try {
+    tunnelChild = Bun.spawn(tunnelCmd, { stderr: tunnelLogFd, stdout: "ignore", stdin: "ignore" });
+  } finally {
+    // Close our handle; cloudflared keeps its own via dup2
+    try { closeSync(tunnelLogFd); } catch {}
+  }
   if (underSystemd) log("INFO", "Tunnel spawned inside transient systemd-run scope (escapes ppm.service cgroup)");
 
   try {
-    tunnelUrl = await extractUrlFromStderr(tunnelChild.stderr as ReadableStream<Uint8Array>);
+    tunnelUrl = await extractUrlFromLogFile(tunnelChild);
   } catch (err) {
     log("ERROR", `Tunnel URL extraction failed: ${err}`);
     tunnelUrl = null;

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

@@ -109,12 +109,21 @@ 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).
+  // Scroll anchor bridge published from inside StickToBottom (needs the context's scrollRef).
+  // MessageList captures pre-expand scroll metrics and restores post-render so the compact
+  // message stays at the same viewport offset when history is prepended.
+  const scrollAnchorRef = useRef<ScrollAnchorHandle | null>(null);
+
+  // Wrap expandCompact: bump visibleCount, then restore scroll after React commits the new DOM.
+  // Pre-compact messages land at top of flattened array, above pagination window — bumping
+  // visibleCount by loaded count ensures they render immediately.
   const handleExpandCompact = useCallback(async (compactId: string, jsonlPath: string): Promise<number> => {
     if (!onExpandCompact) throw new Error("Expansion not wired");
+    scrollAnchorRef.current?.capture();
     const count = await onExpandCompact(compactId, jsonlPath);
     setVisibleCount((c) => c + count);
+    // rAF fires after React commits + layout; two rAFs to cover any async measure (lazy markdown).
+    requestAnimationFrame(() => requestAnimationFrame(() => scrollAnchorRef.current?.restore()));
     return count;
   }, [onExpandCompact]);
 
@@ -140,6 +149,7 @@ export function MessageList({
     <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] [overflow-anchor:auto]" resize="smooth" initial="instant">
         <StickToBottom.Content className="p-4 space-y-4 select-none [&>*]:[overflow-anchor:auto]">
+          <ScrollAnchorBridge bridgeRef={scrollAnchorRef} />
           {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">
@@ -179,6 +189,43 @@ export function MessageList({
   );
 }
 
+/** Imperative handle exposed by ScrollAnchorBridge — capture & restore scroll on prepend. */
+interface ScrollAnchorHandle {
+  /** Record current scrollTop + scrollHeight before a prepend. No-op if user is at bottom. */
+  capture: () => void;
+  /** After prepend commits, adjust scrollTop by the height delta so viewport stays locked. */
+  restore: () => void;
+}
+
+/**
+ * Consumes StickToBottom's scrollRef (only accessible inside its subtree) and publishes
+ * capture/restore functions to a ref owned by the parent MessageList, so prepend-history
+ * expansion can preserve scroll position across the re-render.
+ */
+function ScrollAnchorBridge({ bridgeRef }: { bridgeRef: React.MutableRefObject<ScrollAnchorHandle | null> }) {
+  const { scrollRef, isAtBottom } = useStickToBottomContext();
+  const state = useRef<{ top: number; height: number } | null>(null);
+  useEffect(() => {
+    bridgeRef.current = {
+      capture: () => {
+        const el = scrollRef.current;
+        if (!el || isAtBottom) { state.current = null; return; } // skip if sticking to bottom
+        state.current = { top: el.scrollTop, height: el.scrollHeight };
+      },
+      restore: () => {
+        const el = scrollRef.current;
+        const s = state.current;
+        if (!el || !s) return;
+        const delta = el.scrollHeight - s.height;
+        if (delta !== 0) el.scrollTop = s.top + delta;
+        state.current = null;
+      },
+    };
+    return () => { bridgeRef.current = null; };
+  }, [bridgeRef, scrollRef, isAtBottom]);
+  return null;
+}
+
 /** Floating button to scroll back to bottom when user has scrolled up */
 function ScrollToBottomButton() {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();

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

@@ -166,7 +166,7 @@ export function DraggableTab({
         // Tag identity marker — VS Code-style vertical bar on left edge (centered, ~60% height, rounded right)
         <span
           aria-hidden
-          className="absolute left-0 top-2 bottom-2 w-[2px] rounded-r-full pointer-events-none"
+          className="absolute left-0 top-2 bottom-2 w-[3px] rounded-r-full pointer-events-none"
           style={{ backgroundColor: tagColor }}
         />
       )}

package/src/web/components/layout/mobile-nav.tsx

@@ -15,9 +15,11 @@ import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
+import { useStreamingStore } from "@/stores/streaming-store";
 import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
 import { downloadFile } from "@/lib/file-download";
 import { FileActions } from "@/components/explorer/file-actions";
+import { api, projectUrl } from "@/lib/api-client";
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "terminal", label: "Terminal" },
@@ -63,6 +65,9 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const mobileScrollRef = useRef<HTMLDivElement>(null);
   const prevTabCount = useRef(tabs.length);
   const notifications = useNotificationStore((s) => s.notifications);
+  const streamingSessions = useStreamingStore((s) => s.sessions);
+  const [sessionTagMap, setSessionTagMap] = useState<Record<string, { id: number; name: string; color: string }>>({});
+
   const { canScrollLeft, canScrollRight, scrollRight: doScrollRight } =
     useTabOverflow(mobileScrollRef);
   const hiddenUnread = getHiddenUnreadDirection(mobileScrollRef.current, tabRefs.current as Map<string, HTMLElement>, tabs, notifications);
@@ -154,6 +159,19 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
 
   // Active project avatar for the Projects button
   const { activeProject, projects, customOrder } = useProjectStore(useShallow((s) => ({ activeProject: s.activeProject, projects: s.projects, customOrder: s.customOrder })));
+
+  // Session tag map — same fetch pattern as desktop tab-bar so mobile tabs can show tag bar
+  const chatSessionIds = tabs.filter((t) => t.type === "chat" && t.metadata?.sessionId).map((t) => t.metadata!.sessionId as string);
+  useEffect(() => {
+    if (!activeProject?.name || chatSessionIds.length === 0) return;
+    api.get<{ sessions: { id: string; tag?: { id: number; name: string; color: string } | null }[] }>(
+      `${projectUrl(activeProject.name)}/chat/sessions?limit=50`,
+    ).then((data) => {
+      const map: Record<string, { id: number; name: string; color: string }> = {};
+      for (const s of data.sessions) { if (s.tag) map[s.id] = s.tag; }
+      setSessionTagMap(map);
+    }).catch(() => {});
+  }, [activeProject?.name, chatSessionIds.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
   const ordered = resolveOrder(projects, customOrder ?? null);
   const allNames = ordered.map((p) => p.name);
   const activeIdx = ordered.findIndex((p) => p.name === activeProject?.name);
@@ -218,6 +236,8 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
             const sessionId = tab.type === "chat" ? (tab.metadata?.sessionId as string) : undefined;
             const entry = sessionId ? notifications.get(sessionId) : undefined;
             const notiType = entry && entry.count > 0 ? entry.type : null;
+            const tagColor = sessionId ? sessionTagMap[sessionId]?.color : undefined;
+            const isStreaming = sessionId ? streamingSessions.has(sessionId) : false;
             return (
               <button
                 key={tab.id}
@@ -231,15 +251,30 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
                 onTouchMove={cancelLongPress}
                 onContextMenu={(e) => e.preventDefault()}
                 className={cn(
-                  "flex items-center gap-1 px-3 h-12 whitespace-nowrap text-xs shrink-0 border-t-2 transition-colors",
+                  "relative flex items-center gap-1 px-3 h-12 whitespace-nowrap text-xs shrink-0 border-t-2 transition-colors",
                   isActive ? "border-primary bg-surface text-primary" : "border-transparent text-text-secondary",
                 )}
               >
-                <span className="relative">
+                {tagColor && (
+                  // Tag identity marker — VS Code-style vertical bar on left edge, matches desktop tab
+                  <span
+                    aria-hidden
+                    className="absolute left-0 top-2 bottom-2 w-[3px] rounded-r-full pointer-events-none"
+                    style={{ backgroundColor: tagColor }}
+                  />
+                )}
+                <span className={cn("relative", isStreaming && "text-amber-500")}>
                   <Icon className="size-4" />
-                  {notiType && !isActive && (
+                  {isStreaming ? (
+                    // Messenger-style typing dots inside chat bubble — inherits amber via bg-current
+                    <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" }} />
+                      <span className="tab-typing-dot size-[2px] rounded-full bg-current" style={{ animationDelay: "0.3s" }} />
+                    </span>
+                  ) : notiType && !isActive ? (
                     <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notiType))} />
-                  )}
+                  ) : null}
                 </span>
                 <span className="max-w-[80px] truncate">{tab.title}</span>
                 {tab.closable && (

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

@@ -816,7 +816,14 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   /** 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)}`;
+    // Claude's compact summary references the CURRENT session file (pre+summary+post).
+    // Strip the `pc-{hash}-` prefix added by prefixPreCompactIds for nested expansions
+    // so BE receives the raw session uuid and truncates at the correct boundary.
+    const rawUuid = compactMessageId.replace(/^pc-[^-]+-/, "");
+    const url =
+      `${projectUrl(projectName)}/chat/pre-compact-messages` +
+      `?jsonlPath=${encodeURIComponent(jsonlPath)}` +
+      `&before=${encodeURIComponent(rawUuid)}`;
     const loaded = await api.get<ChatMessage[]>(url);
     const prefixed = prefixPreCompactIds(loaded, jsonlPath);
     setExpansions((prev) => {