@hienlh/ppm 0.13.0 → 0.13.2

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/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/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-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 "";
+  }
+}

package/src/web/styles/globals.css

@@ -294,3 +294,15 @@ html, body {
 @media (prefers-reduced-motion: reduce) {
   .markdown-content.is-streaming > *:last-child { animation: none; }
 }
+
+/* Tab streaming indicator — 3 dots bouncing inside chat bubble icon (Messenger typing style) */
+@keyframes tabTypingBounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-1.5px); }
+}
+.tab-typing-dot {
+  animation: tabTypingBounce 1s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .tab-typing-dot { animation: none; }
+}