@hienlh/ppm 0.12.12 → 0.13.2

package/src/services/supervisor.ts

@@ -19,6 +19,7 @@ import {
   STATUS_FILE, PID_FILE,
 } from "./supervisor-state.ts";
 import { startStoppedPage, stopStoppedPage } from "./supervisor-stopped-page.ts";
+import { sdNotify } from "./sd-notify.ts";
 
 // ─── Constants ─────────────────────────────────────────────────────────
 const MAX_RESTARTS = 10;
@@ -228,10 +229,22 @@ export async function spawnTunnel(port: number): Promise<void> {
     return;
   }
 
-  tunnelChild = Bun.spawn(
-    [bin, "tunnel", "--url", `http://127.0.0.1:${port}`],
-    { stderr: "pipe", stdout: "ignore", stdin: "ignore" },
-  );
+  // Under systemd, wrap tunnel in a transient user scope so it lives in its
+  // own cgroup instead of ppm.service. This prevents systemd from SIGKILLing
+  // the tunnel when ppm.service cgroup is torn down during upgrade/restart,
+  // preserving the cloudflared trycloudflare URL across the new supervisor.
+  // INVOCATION_ID is set by systemd; absence means we're not under systemd.
+  const underSystemd = !!process.env.INVOCATION_ID && process.platform === "linux";
+  const tunnelCmd = underSystemd
+    ? [
+        "systemd-run", "--user", "--scope", "--quiet", "--collect",
+        "--",
+        bin, "tunnel", "--url", `http://127.0.0.1:${port}`,
+      ]
+    : [bin, "tunnel", "--url", `http://127.0.0.1:${port}`];
+
+  tunnelChild = Bun.spawn(tunnelCmd, { stderr: "pipe", stdout: "ignore", stdin: "ignore" });
+  if (underSystemd) log("INFO", "Tunnel spawned inside transient systemd-run scope (escapes ppm.service cgroup)");
 
   try {
     tunnelUrl = await extractUrlFromStderr(tunnelChild.stderr as ReadableStream<Uint8Array>);
@@ -481,7 +494,15 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
       try {
         const data = JSON.parse(readFileSync(STATUS_FILE(), "utf-8"));
         if (data.supervisorPid && data.supervisorPid !== currentSupervisorPid) {
-          log("INFO", `New supervisor detected (PID: ${data.supervisorPid}), old exiting`);
+          log("INFO", `New supervisor detected (PID: ${data.supervisorPid}), handing off MainPID to systemd`);
+          // Tell systemd the new supervisor is now MainPID — required so that
+          // systemd does NOT tear down the ppm.service cgroup when this old
+          // supervisor exits 0. Needs NotifyAccess=all in unit file.
+          // No-op on non-systemd platforms (NOTIFY_SOCKET unset).
+          await sdNotify(`MAINPID=${data.supervisorPid}`);
+          // Small delay so systemd processes the datagram before our exit.
+          await Bun.sleep(300);
+          log("INFO", `Old supervisor exiting`);
           // Children already killed, just clear remaining timers and exit
           if (heartbeatTimer) clearInterval(heartbeatTimer);
           if (upgradeCheckTimer) clearInterval(upgradeCheckTimer);
@@ -919,6 +940,11 @@ export async function runSupervisor(opts: {
   connectCloud(opts, serverArgs, logFd);
   startCloudMonitor(opts, serverArgs, logFd);
 
+  // Signal readiness to systemd (Type=notify). No-op on non-systemd platforms.
+  // Must happen AFTER signal handlers + status.json are set up so systemd
+  // can race-freely promote us to MainPID and forward SIGUSR1/TERM.
+  await sdNotify("READY=1");
+
   // Spawn server + tunnel in parallel
   const promises: Promise<void>[] = [spawnServer(serverArgs, logFd)];
 

package/src/web/components/chat/chat-history-bar.tsx

@@ -10,6 +10,7 @@ import { SessionContextMenu } from "./session-context-menu";
 import { UsageDetailPanel } from "./usage-badge";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
+import { formatRelativeDate } from "@/lib/format-date";
 import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
 import type { TeamMessageItem } from "@/hooks/use-chat";
@@ -40,14 +41,6 @@ interface ChatHistoryBarProps {
   onTeamOpen?: () => void;
 }
 
-function formatDate(iso: string): string {
-  try {
-    return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
-  } catch {
-    return "";
-  }
-}
-
 function relativeTime(iso: string): string {
   const secs = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
   if (secs < 5) return "now";
@@ -545,7 +538,7 @@ export function ChatHistoryBar({
                       </>
                     )}
                     {editingId !== session.id && session.updatedAt && (
-                      <span className="text-[10px] text-text-subtle shrink-0 w-10 text-right">{formatDate(session.updatedAt)}</span>
+                      <span className="text-[10px] text-text-subtle shrink-0 w-16 text-right">{formatRelativeDate(session.updatedAt)}</span>
                     )}
                   </div>
                   </SessionContextMenu>

package/src/web/components/chat/chat-history-panel.tsx

@@ -2,20 +2,13 @@ import { useEffect, useState, useCallback } from "react";
 import { MessageSquare, Loader2, RefreshCw } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
+import { formatRelativeDate } from "@/lib/format-date";
 import type { SessionInfo } from "../../../types/chat";
 
 interface ChatHistoryPanelProps {
   projectName?: string;
 }
 
-function formatDate(iso: string): string {
-  try {
-    return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
-  } catch {
-    return "";
-  }
-}
-
 export function ChatHistoryPanel({ projectName }: ChatHistoryPanelProps) {
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [loading, setLoading] = useState(false);
@@ -96,7 +89,7 @@ export function ChatHistoryPanel({ projectName }: ChatHistoryPanelProps) {
           <div className="flex-1 min-w-0">
             <p className="text-xs font-medium truncate text-text-primary">{session.title || "Untitled"}</p>
             {session.updatedAt && (
-              <p className="text-[10px] text-text-subtle">{formatDate(session.updatedAt)}</p>
+              <p className="text-[10px] text-text-subtle">{formatRelativeDate(session.updatedAt)}</p>
             )}
           </div>
         </button>

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

@@ -88,6 +88,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   const {
     messages,
+    renderedMessages,
+    expandCompact,
+    isCompactExpanded,
     messagesLoading,
     isStreaming,
     phase,
@@ -384,7 +387,9 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
       {/* Messages */}
       <MessageList
-        messages={messages}
+        messages={renderedMessages}
+        onExpandCompact={expandCompact}
+        isCompactExpanded={isCompactExpanded}
         messagesLoading={messagesLoading}
         pendingApproval={pendingApproval}
         onApprovalResponse={respondToApproval}

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

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { Bot, ChevronDown, ChevronUp, MessageSquare, Pin, PinOff } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
+import { formatRelativeDate } from "@/lib/format-date";
 import { useProjectTags, TagChipBar } from "./tag-filter-chips";
 import { SessionContextMenu } from "./session-context-menu";
 import type { SessionInfo } from "../../../types/chat";
@@ -8,24 +9,6 @@ import type { SessionInfo } from "../../../types/chat";
 const MAX_RECENT_SESSIONS = 5;
 const FETCH_SESSIONS_LIMIT = 20;
 
-function formatRelativeDate(iso: string): string {
-  try {
-    const date = new Date(iso);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMin = Math.floor(diffMs / 60_000);
-    if (diffMin < 1) return "just now";
-    if (diffMin < 60) return `${diffMin}m ago`;
-    const diffHr = Math.floor(diffMin / 60);
-    if (diffHr < 24) return `${diffHr}h ago`;
-    const diffDay = Math.floor(diffHr / 24);
-    if (diffDay < 7) return `${diffDay}d ago`;
-    return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-  } catch {
-    return "";
-  }
-}
-
 interface ChatWelcomeProps {
   projectName: string;
   onSelectSession: (session: SessionInfo) => void;

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/components/layout/draggable-tab.tsx

@@ -100,13 +100,20 @@ export function DraggableTab({
         colorStyle && "border-transparent",
       )}
     >
-      {tagColor && (
-        <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: tagColor }} />
-      )}
-      <span className="relative">
+      <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}
+      >
         <Icon className="size-4" />
         {isStreaming ? (
-          <span className="absolute -top-1 -right-1 size-2 rounded-full bg-emerald-500 animate-pulse motion-reduce:animate-none" />
+          // Messenger-style typing dots inside chat bubble — inherits current icon color
+          <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>
         ) : notificationType && !isActive ? (
           <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notificationType))} />
         ) : null}

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/hooks/use-notification-badge.ts

@@ -3,7 +3,7 @@ import { useNotificationStore, selectTotalUnread } from "@/stores/notification-s
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useStreamingStore, selectAnyStreaming } from "@/stores/streaming-store";
-import { setFavicon } from "@/lib/favicon";
+import { setFavicon, STREAM_FRAME_COUNT } from "@/lib/favicon";
 
 function buildTitle(unread: number, projectName?: string, deviceName?: string): string {
   const parts = [projectName, deviceName || null, "PPM"].filter(Boolean).join(" - ");
@@ -30,13 +30,13 @@ export function useNotificationBadge(): void {
     updateTitle();
 
     if (anyStreaming) {
-      // Alternate favicon between primary (blue) and streaming (amber) every 800ms
-      let alt = false;
-      setFavicon(getHasBadge(), false);
+      // Cycle through typing-dots frames (3 dots + 1 rest frame, Messenger style) every 300ms
+      let frame = 0;
+      setFavicon(getHasBadge(), frame);
       intervalRef.current = setInterval(() => {
-        alt = !alt;
-        setFavicon(getHasBadge(), alt);
-      }, 800);
+        frame = (frame + 1) % STREAM_FRAME_COUNT;
+        setFavicon(getHasBadge(), frame);
+      }, 300);
     } else {
       setFavicon(getHasBadge());
     }

package/src/web/lib/favicon.ts

@@ -1,30 +1,52 @@
 const COLOR_PRIMARY = "#3b82f6";
-const COLOR_STREAMING = "#f59e0b"; // amber-500
+const COLOR_STREAMING = "#f59e0b"; // amber-500 — high-attention bg for typing state
+const COLOR_BADGE = "#ef4444";
 
-function buildSvg(bgColor: string, badgeDot: boolean): string {
+/** Idle favicon — "PPM" text on primary background, optional red badge dot. */
+function buildIdleSvg(badgeDot: boolean): string {
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="6" fill="${bgColor}"/>
+  <rect width="32" height="32" rx="6" fill="${COLOR_PRIMARY}"/>
   <text x="16" y="22" text-anchor="middle" font-family="system-ui,sans-serif" font-weight="700" font-size="11" fill="white">PPM</text>
-  ${badgeDot ? '<circle cx="26" cy="6" r="5" fill="#ef4444"/>' : ""}
+  ${badgeDot ? `<circle cx="26" cy="6" r="5" fill="${COLOR_BADGE}"/>` : ""}
 </svg>`;
 }
 
-// Pre-encode all 4 variants
-export const FAVICON_NORMAL = `data:image/svg+xml,${encodeURIComponent(buildSvg(COLOR_PRIMARY, false))}`;
-export const FAVICON_BADGE = `data:image/svg+xml,${encodeURIComponent(buildSvg(COLOR_PRIMARY, true))}`;
-const FAVICON_STREAMING = `data:image/svg+xml,${encodeURIComponent(buildSvg(COLOR_STREAMING, false))}`;
-const FAVICON_STREAMING_BADGE = `data:image/svg+xml,${encodeURIComponent(buildSvg(COLOR_STREAMING, true))}`;
+/** Streaming favicon — 3 dots (Messenger typing style). `activeDot` (0-2) is raised, -1 = rest. */
+function buildStreamingSvg(activeDot: number, badgeDot: boolean): string {
+  const dots = [10, 16, 22].map((cx, i) => {
+    const cy = i === activeDot ? 13 : 17;
+    return `<circle cx="${cx}" cy="${cy}" r="3" fill="white"/>`;
+  }).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="${COLOR_STREAMING}"/>
+  ${dots}
+  ${badgeDot ? `<circle cx="26" cy="6" r="5" fill="${COLOR_BADGE}"/>` : ""}
+</svg>`;
+}
+
+const encode = (svg: string) => `data:image/svg+xml,${encodeURIComponent(svg)}`;
+
+// Pre-encode all variants: [no-badge, with-badge]
+const FAVICON_IDLE: [string, string] = [encode(buildIdleSvg(false)), encode(buildIdleSvg(true))];
+// 4 frames: dot0 up, dot1 up, dot2 up, all rest (-1) — rest frame makes cycle boundary perceptible
+const FAVICON_STREAM: [string, string][] = [0, 1, 2, -1].map((f) =>
+  [encode(buildStreamingSvg(f, false)), encode(buildStreamingSvg(f, true))] as [string, string],
+);
+export const STREAM_FRAME_COUNT = FAVICON_STREAM.length;
 
 /**
- * Swap favicon. When `isStreamingAlt` is true, uses amber color to
- * create an alternation effect (caller toggles this on an interval).
+ * Swap favicon.
+ * @param hasBadge — true if unread notifications exist
+ * @param streamingFrame — 0..STREAM_FRAME_COUNT-1 for typing-dots animation, null for idle
  */
-export function setFavicon(hasBadge: boolean, isStreamingAlt = false): void {
+export function setFavicon(hasBadge: boolean, streamingFrame: number | null = null): void {
   const el = document.getElementById("ppm-favicon") as HTMLLinkElement | null;
   if (!el) return;
-  if (isStreamingAlt) {
-    el.href = hasBadge ? FAVICON_STREAMING_BADGE : FAVICON_STREAMING;
+  const badgeIdx = hasBadge ? 1 : 0;
+  if (streamingFrame === null) {
+    el.href = FAVICON_IDLE[badgeIdx];
   } else {
-    el.href = hasBadge ? FAVICON_BADGE : FAVICON_NORMAL;
+    const frame = ((streamingFrame % STREAM_FRAME_COUNT) + STREAM_FRAME_COUNT) % STREAM_FRAME_COUNT;
+    el.href = FAVICON_STREAM[frame]![badgeIdx];
   }
 }