@hienlh/ppm 0.13.0 → 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/services/autostart-generator.ts

@@ -125,10 +125,12 @@ After=network-online.target
 Wants=network-online.target
 
 [Service]
-Type=simple
+Type=notify
+NotifyAccess=all
 ExecStart=${execStart}
 Restart=on-failure
 RestartSec=5
+TimeoutStartSec=60
 TimeoutStopSec=10
 KillMode=mixed
 ${envPath}

package/src/services/autostart-register.ts

@@ -350,4 +350,21 @@ export function getAutoStartStatus(): AutoStartStatus {
   };
 }
 
+/**
+ * Detect whether an existing systemd unit file is outdated and needs
+ * regeneration. Currently flags units missing Type=notify (introduced to fix
+ * the WSL/systemd upgrade-kill bug). Linux-only; returns false elsewhere.
+ */
+export function isAutoStartUnitStale(): boolean {
+  if (process.platform !== "linux") return false;
+  try {
+    const path = getServicePath();
+    if (!existsSync(path)) return false;
+    const content = readFileSync(path, "utf-8");
+    return !content.includes("Type=notify");
+  } catch {
+    return false;
+  }
+}
+
 export { loadMetadata, METADATA_FILE };

package/src/services/sd-notify.ts

@@ -0,0 +1,27 @@
+/**
+ * sd_notify helper — forwards messages to systemd via the `systemd-notify` binary.
+ * No-op on non-systemd platforms (NOTIFY_SOCKET unset).
+ *
+ * Usage:
+ *   await sdNotify("READY=1");                   // mark unit active (Type=notify)
+ *   await sdNotify(`MAINPID=${newPid}`);         // handoff main process (NotifyAccess=all)
+ *
+ * Shelling out to `systemd-notify` avoids implementing AF_UNIX SOCK_DGRAM
+ * transport in Node/Bun (not supported by node:dgram). The binary ships with
+ * systemd itself, so availability matches systemd availability.
+ */
+export async function sdNotify(state: string): Promise<void> {
+  if (!process.env.NOTIFY_SOCKET) return; // not running under systemd
+  try {
+    const proc = Bun.spawn({
+      cmd: ["systemd-notify", state],
+      stdio: ["ignore", "ignore", "ignore"],
+      env: process.env,
+    });
+    await proc.exited;
+  } catch {
+    // best-effort: if systemd-notify is missing, startup still proceeds
+    // (Type=notify units without READY=1 will time out, but that's already
+    // the failure mode — this helper doesn't make it worse).
+  }
+}

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

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

@@ -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
+        // 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 ? (
-          <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 (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" }} />
+            <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

@@ -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/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];
   }
 }

package/src/web/lib/format-date.ts

@@ -0,0 +1,21 @@
+/**
+ * Format an ISO timestamp as a short English relative time string.
+ * Examples: "just now", "5m ago", "3h ago", "2d ago", "Apr 21".
+ */
+export 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 "";
+  }
+}