@hienlh/ppm 0.8.88 → 0.8.90

package/src/services/account.service.ts

@@ -139,7 +139,7 @@ class AccountService {
       await this.refreshAccessToken(id, false);
       return this.getWithTokens(id);
     } catch (e) {
-      console.error(`[accounts] Pre-flight refresh failed for ${id}:`, e);
+      console.error(`[accounts] Pre-flight refresh failed for ${id}: ${(e as Error).message ?? e}`);
       return null;
     }
   }
@@ -709,7 +709,7 @@ class AccountService {
         try {
           await this.refreshAccessToken(acc.id, false);
         } catch (e) {
-          console.error(`[accounts] Auto-refresh failed for ${acc.id}:`, e);
+          console.error(`[accounts] Auto-refresh failed for ${acc.id}: ${(e as Error).message ?? e}`);
         }
       }
     };

package/src/services/claude-usage.service.ts

@@ -273,14 +273,9 @@ export function getUsageForAccount(accountId: string): ClaudeUsage {
   return row ? snapshotToUsage(row) : {};
 }
 
-/** Get usage for all accounts (excludes expired temporary accounts) */
+/** Get usage for all accounts */
 export function getAllAccountUsages(): AccountUsageEntry[] {
-  const nowS = Math.floor(Date.now() / 1000);
-  const accounts = accountService.list().filter(acc => {
-    // Exclude expired accounts without refresh token (temporary/invalid)
-    if (!accountService.hasRefreshToken(acc.id) && acc.expiresAt && acc.expiresAt < nowS) return false;
-    return true;
-  });
+  const accounts = accountService.list();
   const snapshots = getAllLatestSnapshots();
   const snapshotMap = new Map(snapshots.map(s => [s.account_id, s]));
   return accounts.map(acc => {

package/src/services/mcp-config.service.ts

@@ -27,13 +27,22 @@ export class McpConfigService {
 
   /** List all MCP servers as Record (SDK-compatible format) */
   list(): Record<string, McpServerConfig> {
-    const rows = this.db.query("SELECT name, config FROM mcp_servers ORDER BY name").all() as { name: string; config: string }[];
-    const result: Record<string, McpServerConfig> = {};
-    for (const row of rows) {
-      const parsed = safeParse(row.config, row.name);
-      if (parsed) result[row.name] = parsed;
+    try {
+      const rows = this.db.query("SELECT name, config FROM mcp_servers ORDER BY name").all() as { name: string; config: string }[];
+      const result: Record<string, McpServerConfig> = {};
+      for (const row of rows) {
+        const parsed = safeParse(row.config, row.name);
+        if (parsed) result[row.name] = parsed;
+      }
+      return result;
+    } catch (e) {
+      const msg = (e as Error).message ?? String(e);
+      if (msg.includes("no such table")) {
+        console.warn("[mcp] mcp_servers table not found — returning empty list");
+        return {};
+      }
+      throw e;
     }
-    return result;
   }
 
   /** List as array with metadata (for UI) */

package/src/services/supervisor.ts

@@ -378,17 +378,33 @@ function adoptTunnel(): boolean {
     const status = readStatus();
     const pid = status.tunnelPid as number;
     const url = status.shareUrl as string;
-    if (!pid || !url) return false;
+    if (!pid || !url) {
+      log("DEBUG", `adoptTunnel: missing tunnelPid(${pid}) or shareUrl(${url}) in status`);
+      return false;
+    }
     process.kill(pid, 0); // throws if process is dead
     adoptedTunnelPid = pid;
     tunnelUrl = url;
     log("INFO", `Adopted existing tunnel (PID: ${pid}, URL: ${url})`);
     return true;
-  } catch {
+  } catch (e) {
+    log("WARN", `adoptTunnel: tunnel PID ${(readStatus().tunnelPid)} unreachable: ${e}`);
     return false;
   }
 }
 
+/** Kill stale tunnel PID from status.json (cleanup after failed adoption) */
+function killStaleTunnel() {
+  try {
+    const status = readStatus();
+    const pid = status.tunnelPid as number;
+    if (!pid) return;
+    try { process.kill(pid, "SIGTERM"); } catch {}
+    log("INFO", `Killed stale tunnel (PID: ${pid})`);
+  } catch {}
+  updateStatus({ tunnelPid: null, shareUrl: null });
+}
+
 /** Spawn new supervisor from updated code, wait for it to be healthy, then exit */
 async function selfReplace(): Promise<{ success: boolean; error?: string }> {
   log("INFO", "Starting self-replace for upgrade");
@@ -706,6 +722,7 @@ export async function runSupervisor(opts: {
     startTunnelProbe(opts.port);
     // Try adopting tunnel kept alive from previous upgrade; spawn new if dead
     if (!adoptTunnel()) {
+      killStaleTunnel(); // kill orphaned tunnel before spawning new one
       promises.push(spawnTunnel(opts.port));
     }
   }

package/src/web/app.tsx

@@ -37,6 +37,7 @@ type AuthState = "checking" | "authenticated" | "unauthenticated";
 
 export function App() {
   const [authState, setAuthState] = useState<AuthState>("checking");
+  const [upgradeBannerVisible, setUpgradeBannerVisible] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | "settings" | undefined>();
   const [projectSheetOpen, setProjectSheetOpen] = useState(false);
@@ -229,11 +230,11 @@ export function App() {
     <TooltipProvider>
       <div className="h-dvh flex flex-col bg-background text-foreground overflow-hidden relative">
         {/* Upgrade banner — shown when new version available */}
-        <UpgradeBanner />
+        <UpgradeBanner onVisibilityChange={setUpgradeBannerVisible} />
 
         {/* Mobile device name badge — floating top-left */}
         {deviceName && (
-          <div className="md:hidden fixed top-0 left-0 z-50 px-2 py-0.5 bg-primary/80 text-primary-foreground text-[10px] font-medium rounded-br">
+          <div className={cn("md:hidden fixed left-0 z-50 px-2 py-0.5 bg-primary/80 text-primary-foreground text-[10px] font-medium rounded-br transition-[top]", upgradeBannerVisible ? "top-7" : "top-0")}>
             {deviceName}
           </div>
         )}

package/src/web/components/chat/usage-badge.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { Activity, RefreshCw, Eye, Download, Upload, Plus, X, Settings } from "lucide-react";
+import { Activity, RefreshCw, Eye, Download, Upload, Plus, X, Settings, Trash2 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import type { UsageInfo, LimitBucket } from "../../../types/chat";
 import {
@@ -7,6 +7,7 @@ import {
   getActiveAccount,
   getAllAccountUsages,
   patchAccount,
+  deleteAccount,
   type AccountInfo,
   type AccountUsageEntry,
   type OAuthProfileData,
@@ -152,11 +153,12 @@ function formatLastUpdated(ts: number | null | undefined): string | null {
   return `${days}d ago`;
 }
 
-function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, onViewProfile, flash }: {
+function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onDelete, onExport, onViewProfile, flash }: {
   entry: AccountUsageEntry;
   isActive: boolean;
   accountInfo?: AccountInfo;
   onToggle?: (id: string, status: string) => void;
+  onDelete?: (id: string, display: string) => void;
   onExport?: (id: string) => void;
   onViewProfile?: (profile: OAuthProfileData) => void;
   flash?: boolean;
@@ -164,19 +166,24 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
   const { usage } = entry;
   const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
   const status = accountInfo?.status ?? entry.accountStatus;
+  // Expired: has expiresAt in the past AND no refresh token to auto-renew
+  const isExpired = !!(accountInfo && !accountInfo.hasRefreshToken && accountInfo.expiresAt && accountInfo.expiresAt < Math.floor(Date.now() / 1000));
 
   return (
-    <div className={`rounded-md border p-2 space-y-1.5 transition-colors duration-500 min-w-[200px] shrink-0 snap-start ${flash ? "bg-primary/10 border-primary/40" : ""} ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
+    <div className={`rounded-md border p-2 space-y-1.5 transition-colors duration-500 min-w-[200px] shrink-0 snap-start ${isExpired ? "opacity-50" : ""} ${flash ? "bg-primary/10 border-primary/40" : ""} ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
       <div className="flex items-center gap-1.5">
         <span className="text-xs font-medium truncate flex-1 min-w-0">
           {entry.accountLabel ?? entry.accountId.slice(0, 8)}
         </span>
-        {!entry.isOAuth && (
+        {isExpired && (
+          <span className="text-[9px] text-red-500 shrink-0 font-medium">Expired</span>
+        )}
+        {!entry.isOAuth && !isExpired && (
           <span className="text-[9px] text-text-subtle shrink-0">API key</span>
         )}
         {/* Account controls */}
         <div className="flex items-center gap-0.5 shrink-0">
-          {onViewProfile && accountInfo?.profileData && (
+          {!isExpired && onViewProfile && accountInfo?.profileData && (
             <button
               className="p-1 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
               onClick={() => onViewProfile(accountInfo.profileData!)}
@@ -185,7 +192,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               <Eye className="size-3" />
             </button>
           )}
-          {onExport && entry.isOAuth && (
+          {!isExpired && onExport && entry.isOAuth && (
             <button
               className="p-1 rounded cursor-pointer text-text-subtle hover:text-blue-500 hover:bg-surface-elevated transition-colors"
               onClick={() => onExport(entry.accountId)}
@@ -194,7 +201,7 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               <Download className="size-3" />
             </button>
           )}
-          {onToggle && (
+          {!isExpired && onToggle && (
             <Switch
               checked={status !== "disabled"}
               onCheckedChange={() => onToggle(entry.accountId, status)}
@@ -202,6 +209,15 @@ function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onExport, on
               className="scale-[0.6] cursor-pointer"
             />
           )}
+          {onDelete && (
+            <button
+              className="p-1 rounded cursor-pointer text-text-subtle hover:text-red-500 hover:bg-surface-elevated transition-colors"
+              onClick={() => onDelete(entry.accountId, entry.accountLabel ?? entry.accountId.slice(0, 8))}
+              title="Remove account"
+            >
+              <Trash2 className="size-3" />
+            </button>
+          )}
         </div>
       </div>
       {hasBuckets ? (
@@ -247,6 +263,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
   const [showExportDialog, setShowExportDialog] = useState(false);
   const [showImportDialog, setShowImportDialog] = useState(false);
   const [showRotationSettings, setShowRotationSettings] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; display: string } | null>(null);
   const [exportPreselect, setExportPreselect] = useState<string | null>(null);
   const [message, setMessage] = useState<string | null>(null);
   const msgTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -325,13 +342,26 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
     onReload?.();
   }
 
+  async function confirmDeleteAccount() {
+    if (!deleteTarget) return;
+    try {
+      await deleteAccount(deleteTarget.id);
+      showMessage(`Account "${deleteTarget.display}" removed.`);
+      loadAll();
+      onReload?.();
+    } catch (e) {
+      showMessage(`Failed to remove: ${(e as Error).message}`);
+    }
+    setDeleteTarget(null);
+  }
+
   function openExportAll() {
     setExportPreselect(null);
     setShowExportDialog(true);
   }
 
   return (
-    <div className="border-b border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
+    <div className="relative border-b border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-text-primary">Usage & Accounts</span>
@@ -384,6 +414,7 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
                 isActive={entry.accountId === (activeAccountId ?? usage.activeAccountId)}
                 accountInfo={accountMap.get(entry.accountId)}
                 onToggle={handleToggle}
+                onDelete={(id, display) => setDeleteTarget({ id, display })}
                 onExport={(id) => { setExportPreselect(id); setShowExportDialog(true); }}
                 onViewProfile={setProfileView}
                 flash={flashIds.has(entry.accountId)}
@@ -460,6 +491,25 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
         </button>
       </div>
 
+      {/* Delete confirmation overlay */}
+      {deleteTarget && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-md">
+          <div className="bg-surface border border-border rounded-lg shadow-lg p-4 mx-4 max-w-[280px] w-full space-y-3">
+            <p className="text-xs text-text-primary text-center">
+              Remove <strong className="text-foreground">{deleteTarget.display}</strong>?
+            </p>
+            <div className="flex gap-2">
+              <button onClick={() => setDeleteTarget(null)} className="flex-1 px-3 py-1.5 rounded-md text-xs border border-border text-text-secondary hover:bg-surface-hover cursor-pointer transition-colors">
+                Cancel
+              </button>
+              <button onClick={confirmDeleteAccount} className="flex-1 px-3 py-1.5 rounded-md text-xs bg-red-500 text-white hover:bg-red-600 cursor-pointer transition-colors">
+                Remove
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Account dialogs */}
       <AddAccountDialog open={showAddDialog} onOpenChange={setShowAddDialog} onSuccess={handleSuccess} />
       <ExportAccountsDialog open={showExportDialog} onOpenChange={(v) => { setShowExportDialog(v); if (!v) setExportPreselect(null); }} accounts={accounts} preselectId={exportPreselect} onMessage={showMessage} />

package/src/web/components/layout/upgrade-banner.tsx

@@ -12,7 +12,11 @@ interface UpgradeStatus {
   installMethod: string;
 }
 
-export function UpgradeBanner() {
+interface UpgradeBannerProps {
+  onVisibilityChange?: (visible: boolean) => void;
+}
+
+export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
   const [availableVersion, setAvailableVersion] = useState<string | null>(null);
   const [upgrading, setUpgrading] = useState(false);
   const [dismissed, setDismissed] = useState(false);
@@ -61,10 +65,16 @@ export function UpgradeBanner() {
     setDismissed(true);
   }, [availableVersion]);
 
-  if (!availableVersion || dismissed) return null;
+  const visible = !!availableVersion && !dismissed;
+
+  useEffect(() => {
+    onVisibilityChange?.(visible);
+  }, [visible, onVisibilityChange]);
+
+  if (!visible) return null;
 
   return (
-    <div className="w-full bg-blue-600 dark:bg-blue-700 text-white px-3 py-2 flex items-center justify-between gap-2 z-50 text-sm shrink-0">
+    <div className="w-full bg-blue-600 dark:bg-blue-700 text-white px-3 py-1 flex items-center justify-between gap-2 z-50 text-sm shrink-0">
       {upgrading ? (
         <div className="flex items-center gap-2 flex-1 min-w-0">
           <Loader2 className="size-4 animate-spin shrink-0" />
@@ -83,13 +93,13 @@ export function UpgradeBanner() {
           <div className="flex items-center gap-1 shrink-0">
             <button
               onClick={handleUpgrade}
-              className="bg-white text-blue-600 font-medium rounded-full px-3 min-h-[44px] min-w-[44px] flex items-center justify-center hover:bg-blue-50 active:bg-blue-100 transition-colors"
+              className="bg-white text-blue-600 font-medium rounded-full px-3 py-0.5 text-xs min-h-[28px] min-w-[28px] flex items-center justify-center hover:bg-blue-50 active:bg-blue-100 transition-colors"
             >
               Upgrade
             </button>
             <button
               onClick={handleDismiss}
-              className="min-h-[44px] min-w-[44px] flex items-center justify-center rounded-full hover:bg-blue-500 active:bg-blue-800 transition-colors"
+              className="min-h-[28px] min-w-[28px] flex items-center justify-center rounded-full hover:bg-blue-500 active:bg-blue-800 transition-colors"
               aria-label="Dismiss upgrade notification"
             >
               <X className="size-4" />