@hienlh/ppm 0.8.70 → 0.8.72

package/src/server/routes/chat.ts

@@ -8,8 +8,7 @@ import { renameSession as sdkRenameSession } from "@anthropic-ai/claude-agent-sd
 import { listSlashItems } from "../../services/slash-items.service.ts";
 import { getCachedUsage, refreshUsageNow } from "../../services/claude-usage.service.ts";
 import { getSessionLog } from "../../services/session-log.service.ts";
-import { getSessionMapping } from "../../services/db.service.ts";
-import { getSessionMapping, setSessionTitle } from "../../services/db.service.ts";
+import { getSessionMapping, setSessionTitle, getPinnedSessionIds, pinSession, unpinSession } from "../../services/db.service.ts";
 import { ok, err } from "../../types/api.ts";
 
 type Env = { Variables: { projectPath: string; projectName: string } };
@@ -64,7 +63,16 @@ chatRoutes.get("/sessions", async (c) => {
     const projectPath = c.get("projectPath");
     const providerId = c.req.query("providerId");
     const sessions = await chatService.listSessions(providerId, projectPath);
-    return c.json(ok(sessions));
+    // Enrich with pin status
+    const pinnedIds = getPinnedSessionIds();
+    const enriched = sessions.map((s) => ({ ...s, pinned: pinnedIds.has(s.id) }));
+    // Sort: pinned first (by pinned_at implicit via Set order), then unpinned by createdAt
+    enriched.sort((a, b) => {
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+    });
+    return c.json(ok(enriched));
   } catch (e) {
     return c.json(err((e as Error).message), 500);
   }
@@ -134,6 +142,28 @@ chatRoutes.patch("/sessions/:id", async (c) => {
   }
 });
 
+/** PUT /chat/sessions/:id/pin — pin a session */
+chatRoutes.put("/sessions/:id/pin", (c) => {
+  try {
+    const id = c.req.param("id");
+    pinSession(id);
+    return c.json(ok({ id, pinned: true }));
+  } catch (e) {
+    return c.json(err((e as Error).message), 500);
+  }
+});
+
+/** DELETE /chat/sessions/:id/pin — unpin a session */
+chatRoutes.delete("/sessions/:id/pin", (c) => {
+  try {
+    const id = c.req.param("id");
+    unpinSession(id);
+    return c.json(ok({ id, pinned: false }));
+  } catch (e) {
+    return c.json(err((e as Error).message), 500);
+  }
+});
+
 /** POST /chat/sessions/:id/fork — fork session into a new one (for rewind/branch) */
 chatRoutes.post("/sessions/:id/fork", async (c) => {
   try {

package/src/services/cloud-ws.service.ts

@@ -0,0 +1,208 @@
+/**
+ * Cloud WebSocket client — persistent connection from supervisor to PPM Cloud.
+ * Auto-reconnects with exponential backoff + jitter. Queues messages when disconnected.
+ */
+import { appendFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { homedir } from "node:os";
+
+// ─── Types (must match Cloud's ws-types.ts) ─────────
+interface WsMessage {
+  type: string;
+  id?: string;
+  timestamp: string;
+}
+
+interface HeartbeatMsg extends WsMessage {
+  type: "heartbeat";
+  tunnelUrl: string | null;
+  state: string;
+  appVersion: string;
+  serverPid: number | null;
+  uptime: number;
+}
+
+interface StateChangeMsg extends WsMessage {
+  type: "state_change";
+  from: string;
+  to: string;
+  reason: string;
+}
+
+interface CommandResultMsg extends WsMessage {
+  type: "command_result";
+  id: string;
+  success: boolean;
+  error?: string;
+  data?: Record<string, unknown>;
+}
+
+type OutboundMsg = HeartbeatMsg | StateChangeMsg | CommandResultMsg;
+
+interface CommandMsg extends WsMessage {
+  type: "command";
+  id: string;
+  action: string;
+  params?: Record<string, unknown>;
+}
+
+type CommandHandler = (cmd: CommandMsg) => void;
+
+// ─── Constants ──────────────────────────────────────
+const BACKOFF_STEPS = [1000, 2000, 4000, 8000, 15000, 30000, 60000];
+const MAX_QUEUE_SIZE = 50;
+const HEARTBEAT_INTERVAL_MS = 60_000; // 60s via WS
+
+// ─── State ──────────────────────────────────────────
+let ws: WebSocket | null = null;
+let connected = false;
+let reconnecting = false;
+let reconnectAttempt = 0;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let heartbeatTimer: ReturnType<typeof setInterval> | null = null;
+let commandHandler: CommandHandler | null = null;
+let outboundQueue: OutboundMsg[] = [];
+let wsUrl = "";
+let shouldConnect = false;
+
+// Credentials for first-message auth
+let deviceId = "";
+let secretKey = "";
+
+// For heartbeat payload
+let getHeartbeatData: (() => HeartbeatMsg) | null = null;
+
+// ─── Public API ─────────────────────────────────────
+
+export function connect(opts: {
+  cloudUrl: string;
+  deviceId: string;
+  secretKey: string;
+  heartbeatFn: () => HeartbeatMsg;
+}): void {
+  // No secret_key in URL — auth via first message after connect
+  wsUrl = `${opts.cloudUrl.replace(/^http/, "ws")}/ws/device`;
+  deviceId = opts.deviceId;
+  secretKey = opts.secretKey;
+  getHeartbeatData = opts.heartbeatFn;
+  shouldConnect = true;
+  reconnectAttempt = 0;
+  doConnect();
+}
+
+export function disconnect(): void {
+  shouldConnect = false;
+  if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+  if (heartbeatTimer) { clearInterval(heartbeatTimer); heartbeatTimer = null; }
+  if (ws) {
+    try { ws.close(1000, "shutdown"); } catch {}
+    ws = null;
+  }
+  connected = false;
+  outboundQueue = [];
+}
+
+export function send(msg: OutboundMsg): void {
+  if (connected && ws?.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(msg));
+  } else {
+    outboundQueue.push(msg);
+    if (outboundQueue.length > MAX_QUEUE_SIZE) outboundQueue.shift();
+  }
+}
+
+export function onCommand(handler: CommandHandler): void {
+  commandHandler = handler;
+}
+
+export function isConnected(): boolean {
+  return connected;
+}
+
+// ─── Internal ───────────────────────────────────────
+
+function doConnect(): void {
+  if (!shouldConnect || reconnecting) return;
+  reconnecting = true;
+
+  try {
+    ws = new WebSocket(wsUrl);
+  } catch {
+    reconnecting = false;
+    scheduleReconnect();
+    return;
+  }
+
+  ws.onopen = () => {
+    reconnecting = false;
+    log("INFO", "Cloud WS connected, sending auth");
+
+    // Send auth as first message (not in URL)
+    ws!.send(JSON.stringify({
+      type: "auth",
+      deviceId,
+      secretKey,
+      timestamp: new Date().toISOString(),
+      version: 1,
+    }));
+
+    connected = true;
+    reconnectAttempt = 0;
+
+    // Flush queued messages
+    while (outboundQueue.length > 0 && connected) {
+      const msg = outboundQueue.shift()!;
+      ws!.send(JSON.stringify(msg));
+    }
+
+    // Send immediate heartbeat
+    if (getHeartbeatData) send(getHeartbeatData());
+
+    // Start periodic heartbeat
+    if (heartbeatTimer) clearInterval(heartbeatTimer);
+    heartbeatTimer = setInterval(() => {
+      if (getHeartbeatData && connected) send(getHeartbeatData());
+    }, HEARTBEAT_INTERVAL_MS);
+  };
+
+  ws.onmessage = (event) => {
+    try {
+      const msg = JSON.parse(String(event.data)) as CommandMsg;
+      if (msg.type === "command" && commandHandler) {
+        commandHandler(msg);
+      }
+    } catch {} // ignore malformed
+  };
+
+  ws.onclose = () => {
+    connected = false;
+    reconnecting = false;
+    ws = null;
+    if (heartbeatTimer) { clearInterval(heartbeatTimer); heartbeatTimer = null; }
+    if (shouldConnect) scheduleReconnect();
+  };
+
+  ws.onerror = () => {
+    // onclose will fire after onerror — reconnect handled there
+  };
+}
+
+function scheduleReconnect(): void {
+  if (!shouldConnect || reconnectTimer) return;
+  const base = BACKOFF_STEPS[Math.min(reconnectAttempt, BACKOFF_STEPS.length - 1)]!;
+  // Add ±30% jitter to prevent thundering herd after Cloud deploy
+  const jitter = base * (0.7 + Math.random() * 0.6);
+  const delay = Math.round(jitter);
+  reconnectAttempt++;
+  log("WARN", `Cloud WS reconnect in ${delay}ms (attempt #${reconnectAttempt})`);
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    doConnect();
+  }, delay);
+}
+
+function log(level: string, msg: string): void {
+  const ts = new Date().toISOString();
+  const logFile = resolve(process.env.PPM_HOME || resolve(homedir(), ".ppm"), "ppm.log");
+  try { appendFileSync(logFile, `[${ts}] [${level}] [cloud-ws] ${msg}\n`); } catch {}
+}

package/src/services/db.service.ts

@@ -4,7 +4,7 @@ import { homedir } from "node:os";
 import { mkdirSync, existsSync } from "node:fs";
 
 const PPM_DIR = process.env.PPM_HOME || resolve(homedir(), ".ppm");
-const CURRENT_SCHEMA_VERSION = 8;
+const CURRENT_SCHEMA_VERSION = 9;
 
 let db: Database | null = null;
 let dbProfile: string | null = null;
@@ -240,6 +240,17 @@ function runMigrations(database: Database): void {
       PRAGMA user_version = 8;
     `);
   }
+
+  if (current < 9) {
+    database.exec(`
+      CREATE TABLE IF NOT EXISTS session_pins (
+        session_id TEXT PRIMARY KEY,
+        pinned_at TEXT DEFAULT (datetime('now'))
+      );
+
+      PRAGMA user_version = 9;
+    `);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -350,6 +361,25 @@ export function getSessionTitles(sessionIds: string[]): Record<string, string> {
   return result;
 }
 
+// ---------------------------------------------------------------------------
+// Session pin helpers
+// ---------------------------------------------------------------------------
+
+export function pinSession(sessionId: string): void {
+  getDb().query(
+    "INSERT INTO session_pins (session_id, pinned_at) VALUES (?, datetime('now')) ON CONFLICT(session_id) DO UPDATE SET pinned_at = datetime('now')",
+  ).run(sessionId);
+}
+
+export function unpinSession(sessionId: string): void {
+  getDb().query("DELETE FROM session_pins WHERE session_id = ?").run(sessionId);
+}
+
+export function getPinnedSessionIds(): Set<string> {
+  const rows = getDb().query("SELECT session_id FROM session_pins ORDER BY pinned_at DESC").all() as { session_id: string }[];
+  return new Set(rows.map((r) => r.session_id));
+}
+
 // ---------------------------------------------------------------------------
 // Push subscription helpers
 // ---------------------------------------------------------------------------

package/src/services/supervisor.ts

@@ -37,6 +37,24 @@ let tunnelChild: Subprocess | null = null;
 let tunnelUrl: string | null = null;
 let shuttingDown = false;
 
+type SupervisorState = "running" | "paused" | "upgrading";
+let supervisorState: SupervisorState = "running";
+
+let resumeResolve: (() => void) | null = null;
+
+function waitForResume(): Promise<void> {
+  return new Promise((resolve) => {
+    resumeResolve = resolve;
+  });
+}
+
+function triggerResume(): void {
+  if (resumeResolve) {
+    resumeResolve();
+    resumeResolve = null;
+  }
+}
+
 let serverRestarts = 0;
 let lastServerCrash = 0;
 let tunnelRestarts = 0;
@@ -129,8 +147,25 @@ export async function spawnServer(
   serverRestarts++;
 
   if (serverRestarts > MAX_RESTARTS) {
-    log("FATAL", `Server exceeded ${MAX_RESTARTS} restarts, giving up`);
-    shutdown();
+    log("WARN", `Server exceeded ${MAX_RESTARTS} restarts, pausing`);
+    notifyStateChange("running", "paused", "max_restarts_exceeded");
+    supervisorState = "paused";
+    updateStatus({
+      state: "paused",
+      pid: null,
+      pausedAt: new Date().toISOString(),
+      pauseReason: "max_restarts",
+      lastCrashError: `exit ${exitCode}`,
+    });
+    // Wait for resume signal — supervisor stays alive
+    await waitForResume();
+    // Resumed — reset and respawn
+    notifyStateChange("paused", "running", "user_resume");
+    supervisorState = "running";
+    serverRestarts = 0;
+    updateStatus({ state: "running", pausedAt: null, pauseReason: null });
+    log("INFO", "Resuming server after pause");
+    if (!shuttingDown) return spawnServer(serverArgs, logFd);
     return;
   }
 
@@ -189,12 +224,7 @@ async function syncUrlToCloud(url: string) {
   } catch {}
 }
 
-function startCloudHeartbeat(url: string) {
-  if (heartbeatTimer) clearInterval(heartbeatTimer);
-  heartbeatTimer = setInterval(() => {
-    if (tunnelUrl) syncUrlToCloud(tunnelUrl);
-  }, 5 * 60 * 1000);
-}
+// HTTP heartbeat removed — WS is the sole heartbeat mechanism (Phase 4)
 
 export async function spawnTunnel(port: number): Promise<void> {
   let bin: string;
@@ -230,9 +260,8 @@ export async function spawnTunnel(port: number): Promise<void> {
   updateStatus({ shareUrl: tunnelUrl, tunnelPid: tunnelChild.pid });
   log("INFO", `Tunnel ready: ${tunnelUrl} (PID: ${tunnelChild.pid})`);
 
-  // Sync new URL to cloud immediately + start periodic heartbeat
+  // One-time sync of tunnel URL to cloud (WS handles periodic heartbeat)
   await syncUrlToCloud(tunnelUrl);
-  startCloudHeartbeat(tunnelUrl);
 
   const exitCode = await tunnelChild.exited;
   tunnelChild = null;
@@ -330,6 +359,9 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
   try {
     // Prevent spawnServer crash-restart loop from respawning killed children
     shuttingDown = true;
+    notifyStateChange(supervisorState, "upgrading", "self_replace");
+    supervisorState = "upgrading";
+    updateStatus({ state: "upgrading" });
 
     // Kill server + tunnel children FIRST to free the port for the new supervisor
     log("INFO", "Stopping server and tunnel before spawning new supervisor");
@@ -372,20 +404,158 @@ async function selfReplace(): Promise<{ success: boolean; error?: string }> {
     log("ERROR", "Self-replace timeout: new supervisor did not start");
     try { child.kill(); } catch {}
     shuttingDown = false;
+    notifyStateChange("upgrading", "running", "upgrade_failed");
+    supervisorState = "running";
+    updateStatus({ state: "running" });
     return { success: false, error: "New supervisor failed to start within 30s" };
   } catch (e) {
     log("ERROR", `Self-replace error: ${e}`);
     shuttingDown = false;
+    notifyStateChange("upgrading", "running", "upgrade_failed");
+    supervisorState = "running";
+    updateStatus({ state: "running" });
     return { success: false, error: (e as Error).message };
   }
 }
 
+// ─── Cloud WS integration ─────────────────────────────────────────────
+
+/** Notify Cloud of supervisor state change via WS */
+async function notifyStateChange(from: string, to: string, reason: string) {
+  try {
+    const { send, isConnected } = await import("./cloud-ws.service.ts");
+    if (isConnected()) {
+      send({
+        type: "state_change",
+        from,
+        to,
+        reason,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  } catch {}
+}
+
+/** Connect supervisor to Cloud via WebSocket (if device is linked) */
+async function connectCloud(opts: { port: number }, serverArgs: string[], logFd: number) {
+  try {
+    const { getCloudDevice } = await import("./cloud.service.ts");
+    const device = getCloudDevice();
+    if (!device) return; // not linked to cloud
+
+    const { connect, onCommand } = await import("./cloud-ws.service.ts");
+    const { VERSION } = await import("../version.ts");
+    const startTime = Date.now();
+
+    connect({
+      cloudUrl: device.cloud_url,
+      deviceId: device.device_id,
+      secretKey: device.secret_key,
+      heartbeatFn: () => ({
+        type: "heartbeat" as const,
+        tunnelUrl,
+        state: supervisorState,
+        appVersion: VERSION,
+        serverPid: serverChild?.pid ?? null,
+        uptime: Math.floor((Date.now() - startTime) / 1000),
+        timestamp: new Date().toISOString(),
+      }),
+    });
+
+    // Handle commands from Cloud
+    onCommand(async (cmd) => {
+      const { send } = await import("./cloud-ws.service.ts");
+      const sendResult = (success: boolean, error?: string, data?: Record<string, unknown>) => {
+        send({
+          type: "command_result",
+          id: cmd.id,
+          success,
+          error,
+          data,
+          timestamp: new Date().toISOString(),
+        });
+      };
+
+      log("INFO", `Cloud command received: ${cmd.action}`);
+
+      switch (cmd.action) {
+        case "restart":
+          if (serverChild) {
+            serverRestartRequested = true;
+            try { serverChild.kill(); } catch {}
+            sendResult(true);
+          } else if (supervisorState === "paused") {
+            triggerResume();
+            sendResult(true);
+          } else {
+            sendResult(false, "No server child to restart");
+          }
+          break;
+
+        case "resume":
+          if (supervisorState === "paused") {
+            triggerResume();
+            sendResult(true);
+          } else {
+            sendResult(false, "Not in paused state");
+          }
+          break;
+
+        case "stop":
+          sendResult(true);
+          // Delay exit to allow WS buffer to flush
+          setTimeout(() => {
+            shutdown();
+            process.exit(0);
+          }, 500);
+          break;
+
+        case "upgrade":
+          // Send result BEFORE selfReplace (which exits on success)
+          sendResult(true, undefined, { status: "upgrading" });
+          await new Promise(r => setTimeout(r, 300));
+          const result = await selfReplace();
+          // Only reaches here on failure — selfReplace exits on success
+          if (!result.success) {
+            sendResult(false, result.error);
+            if (!serverChild && !shuttingDown) {
+              spawnServer(serverArgs, logFd);
+            }
+          }
+          break;
+
+        case "status":
+          sendResult(true, undefined, {
+            state: supervisorState,
+            serverPid: serverChild?.pid ?? null,
+            tunnelUrl,
+            serverRestarts,
+          });
+          break;
+
+        default:
+          sendResult(false, `Unknown action: ${cmd.action}`);
+      }
+    });
+  } catch (e) {
+    log("WARN", `Cloud WS setup failed: ${e}`);
+  }
+}
+
 // ─── Shutdown ──────────────────────────────────────────────────────────
 export function shutdown() {
   if (shuttingDown) return;
   shuttingDown = true;
   log("INFO", "Supervisor shutting down");
 
+  // Unblock if paused
+  triggerResume();
+
+  // Disconnect Cloud WS
+  import("./cloud-ws.service.ts")
+    .then(({ disconnect }) => disconnect())
+    .catch(() => {});
+
   if (healthTimer) clearInterval(healthTimer);
   if (tunnelProbeTimer) clearInterval(tunnelProbeTimer);
   if (heartbeatTimer) clearInterval(heartbeatTimer);
@@ -414,7 +584,10 @@ export async function runSupervisor(opts: {
 
   // Write supervisor PID + clear stale availableVersion from previous run
   writeFileSync(PID_FILE, String(process.pid));
-  updateStatus({ supervisorPid: process.pid, port: opts.port, host: opts.host, availableVersion: null });
+  updateStatus({
+    supervisorPid: process.pid, port: opts.port, host: opts.host, availableVersion: null,
+    state: "running", pausedAt: null, pauseReason: null, lastCrashError: null,
+  });
 
   // Build __serve__ args
   const serverArgs = [
@@ -428,8 +601,13 @@ export async function runSupervisor(opts: {
   process.on("SIGTERM", () => { shutdown(); process.exit(0); });
   process.on("SIGINT", () => { shutdown(); process.exit(0); });
 
-  // SIGUSR2 = graceful server restart (tunnel stays alive)
+  // SIGUSR2 = graceful server restart (tunnel stays alive) or resume from paused
   process.on("SIGUSR2", () => {
+    if (supervisorState === "paused") {
+      log("INFO", "SIGUSR2 received while paused, resuming server");
+      triggerResume();
+      return;
+    }
     log("INFO", "SIGUSR2 received, restarting server only");
     if (serverChild) {
       serverRestartRequested = true; // flag so spawnServer skips backoff
@@ -458,6 +636,9 @@ export async function runSupervisor(opts: {
     upgradeCheckTimer = setInterval(checkAvailableVersion, UPGRADE_CHECK_INTERVAL_MS);
   }, UPGRADE_SKIP_INITIAL_MS);
 
+  // Connect to Cloud via WebSocket (if device is linked)
+  connectCloud(opts, serverArgs, logFd);
+
   // Spawn server + tunnel in parallel
   const promises: Promise<void>[] = [spawnServer(serverArgs, logFd)];
 

package/src/types/chat.ts

@@ -42,6 +42,7 @@ export interface SessionInfo {
   projectName?: string;
   createdAt: string;
   updatedAt?: string;
+  pinned?: boolean;
 }
 
 export interface LimitBucket {

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -149,6 +149,27 @@ export function ChatHistoryBar({
 
   const cancelEditing = useCallback(() => setEditingId(null), []);
 
+  const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
+    e.stopPropagation();
+    if (!projectName) return;
+    const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/pin`;
+    try {
+      if (session.pinned) {
+        await api.del(url);
+      } else {
+        await api.put(url);
+      }
+      setSessions((prev) => {
+        const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
+        return updated.sort((a, b) => {
+          if (a.pinned && !b.pinned) return -1;
+          if (!a.pinned && b.pinned) return 1;
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        });
+      });
+    } catch { /* silent */ }
+  }, [projectName]);
+
   // Filter sessions by search query
   const filteredSessions = searchQuery.trim()
     ? sessions.filter((s) => (s.title || "").toLowerCase().includes(searchQuery.toLowerCase()))
@@ -310,9 +331,20 @@ export function ChatHistoryBar({
                       >
                         {session.title || "Untitled"}
                       </button>
+                      <button
+                        onClick={(e) => togglePin(e, session)}
+                        className={`p-0.5 rounded transition-all ${
+                          session.pinned
+                            ? "text-primary hover:text-primary/70"
+                            : "text-text-subtle hover:text-text-secondary md:opacity-0 md:group-hover:opacity-100"
+                        }`}
+                        title={session.pinned ? "Unpin session" : "Pin session"}
+                      >
+                        {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+                      </button>
                       <button
                         onClick={(e) => startEditing(session, e)}
-                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary opacity-0 group-hover:opacity-100 transition-opacity"
+                        className="p-0.5 rounded text-text-subtle hover:text-text-secondary md:opacity-0 md:group-hover:opacity-100 transition-opacity"
                         title="Rename session"
                       >
                         <Pencil className="size-3" />
@@ -320,7 +352,7 @@ export function ChatHistoryBar({
                     </>
                   )}
                   {editingId !== session.id && session.updatedAt && (
-                    <span className="text-[10px] text-text-subtle shrink-0">{formatDate(session.updatedAt)}</span>
+                    <span className="text-[10px] text-text-subtle shrink-0 w-10 text-right">{formatDate(session.updatedAt)}</span>
                   )}
                 </div>
               ))