@hienlh/ppm 0.8.94 → 0.8.95

package/src/web/components/chat/message-list.tsx

@@ -43,7 +43,7 @@ interface MessageListProps {
   connectingElapsed?: number;
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
-  onFork?: (userMessage: string) => void;
+  onFork?: (userMessage: string, messageId?: string) => void;
 }
 
 export function MessageList({
@@ -90,13 +90,17 @@ export function MessageList({
     <div className="relative flex-1 overflow-hidden flex flex-col min-h-0">
       <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden" resize="smooth" initial="instant">
         <StickToBottom.Content className="p-4 space-y-4">
-          {filtered.map((msg) => (
+          {filtered.map((msg, idx) => (
               <MessageBubble
                 key={msg.id}
                 message={msg}
                 isStreaming={isStreaming && msg.id.startsWith("streaming-")}
                 projectName={projectName}
-                onFork={msg.role === "user" && onFork ? () => onFork(msg.content) : undefined}
+                onFork={msg.role === "user" && onFork ? () => {
+                  // Pass the previous message ID so the fork includes history up to (but not including) this user message
+                  const prevMsg = idx > 0 ? filtered[idx - 1] : undefined;
+                  onFork(msg.content, prevMsg?.id);
+                } : undefined}
               />
             ))}
 

package/src/web/components/chat/session-picker.tsx

@@ -47,6 +47,7 @@ export function SessionPicker({
 
   const handleDelete = async (e: React.MouseEvent, session: SessionInfo) => {
     e.stopPropagation();
+    if (!window.confirm("Delete this session? This cannot be undone.")) return;
     try {
       if (!projectName) return;
       await api.del(

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

package/src/web/components/settings/change-password-section.tsx

@@ -0,0 +1,128 @@
+import { useState, useCallback } from "react";
+import { KeyRound, Check, Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api-client";
+import { setAuthToken } from "@/lib/api-client";
+
+export function ChangePasswordSection() {
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [showPw, setShowPw] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mismatch = confirm.length > 0 && password !== confirm;
+  const canSubmit = password.trim().length >= 4 && password === confirm && !saving;
+
+  const handleSubmit = useCallback(async () => {
+    if (!canSubmit) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const { token } = await api.put<{ token: string }>("/api/settings/auth/password", {
+        password: password.trim(),
+        confirm: confirm.trim(),
+      });
+      // Update localStorage so current session stays authenticated
+      setAuthToken(token);
+      setSaved(true);
+      setPassword("");
+      setConfirm("");
+      setTimeout(() => {
+        setSaved(false);
+        setOpen(false);
+      }, 1500);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to change password");
+    } finally {
+      setSaving(false);
+    }
+  }, [canSubmit, password, confirm]);
+
+  if (!open) {
+    return (
+      <section className="space-y-2">
+        <h3 className="text-xs font-medium text-muted-foreground">Security</h3>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 text-xs gap-1.5 cursor-pointer"
+          onClick={() => setOpen(true)}
+        >
+          <KeyRound className="size-3.5" />
+          Change Password
+        </Button>
+      </section>
+    );
+  }
+
+  return (
+    <section className="space-y-2">
+      <h3 className="text-xs font-medium text-muted-foreground">Change Password</h3>
+      <div className="space-y-2">
+        <div className="relative">
+          <Input
+            type={showPw ? "text" : "password"}
+            placeholder="New password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="h-8 text-xs pr-8"
+            autoFocus
+          />
+          <button
+            type="button"
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground cursor-pointer"
+            onClick={() => setShowPw(!showPw)}
+            tabIndex={-1}
+          >
+            {showPw ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+          </button>
+        </div>
+        <Input
+          type={showPw ? "text" : "password"}
+          placeholder="Confirm password"
+          value={confirm}
+          onChange={(e) => setConfirm(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") handleSubmit(); }}
+          className="h-8 text-xs"
+        />
+        {mismatch && (
+          <p className="text-[11px] text-destructive">Passwords do not match</p>
+        )}
+        {error && (
+          <p className="text-[11px] text-destructive">{error}</p>
+        )}
+        <div className="flex gap-1.5">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 text-xs flex-1 cursor-pointer"
+            onClick={() => {
+              setOpen(false);
+              setPassword("");
+              setConfirm("");
+              setError(null);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant={saved ? "default" : "outline"}
+            size="sm"
+            className="h-8 text-xs flex-1 cursor-pointer"
+            disabled={!canSubmit}
+            onClick={handleSubmit}
+          >
+            {saving ? "..." : saved ? <Check className="size-3.5" /> : "Save"}
+          </Button>
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          Min 4 characters. You'll stay logged in on this device.
+        </p>
+      </div>
+    </section>
+  );
+}

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

@@ -14,6 +14,7 @@ import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
 import { TelegramSettingsSection } from "./telegram-settings-section";
 import { ProxySettingsSection } from "./proxy-settings-section";
 import { McpSettingsSection } from "./mcp-settings-section";
+import { ChangePasswordSection } from "./change-password-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -128,6 +129,9 @@ export function SettingsTab() {
             </p>
           </section>
 
+          {/* Security: Change Password */}
+          <ChangePasswordSection />
+
           {/* Quick: Theme */}
           <section className="space-y-2">
             <h3 className="text-xs font-medium text-muted-foreground">Theme</h3>

package/src/web/hooks/use-chat.ts

@@ -22,6 +22,7 @@ interface UseChatReturn {
   connectingElapsed: number;
   pendingApproval: ApprovalRequest | null;
   contextWindowPct: number | null;
+  compactStatus: "compacting" | null;
   sessionTitle: string | null;
   /** When CLI provider assigns a different session ID, this holds the new ID */
   migratedSessionId: string | null;
@@ -51,6 +52,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   const [connectingElapsed, setConnectingElapsed] = useState(0);
   const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
   const [contextWindowPct, setContextWindowPct] = useState<number | null>(null);
+  const [compactStatus, setCompactStatus] = useState<"compacting" | null>(null);
   const [sessionTitle, setSessionTitle] = useState<string | null>(null);
   const [isConnected, setIsConnected] = useState(false);
   const [migratedSessionId, setMigratedSessionId] = useState<string | null>(null);
@@ -270,6 +272,19 @@ export function useChat(sessionId: string | null, providerId = "claude", project
       return;
     }
 
+    // Handle compact status events
+    if ((data as any).type === "compact_status") {
+      const status = (data as any).status;
+      if (status === "compacting") {
+        setCompactStatus("compacting");
+      } else if (status === "done") {
+        setCompactStatus(null);
+        // Refresh messages to show compacted history
+        refetchRef.current?.();
+      }
+      return;
+    }
+
     // Handle phase transitions from BE
     if ((data as any).type === "phase_changed") {
       const p = (data as any).phase as SessionPhase;
@@ -362,6 +377,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     setPhase("idle");
     phaseRef.current = "idle";
     setPendingApproval(null);
+    setCompactStatus(null);
     streamingContentRef.current = "";
     streamingEventsRef.current = [];
     setIsConnected(false);
@@ -550,6 +566,7 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     connectingElapsed,
     pendingApproval,
     contextWindowPct,
+    compactStatus,
     sessionTitle,
     migratedSessionId,
     sendMessage,