@hienlh/ppm 0.11.17 → 0.12.0

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

@@ -1,12 +1,10 @@
 import { useState, useEffect, useCallback } from "react";
 import { api } from "@/lib/api-client";
 import { toast } from "sonner";
-import { Loader2, ArrowUpCircle, X } from "lucide-react";
+import { Loader2, ArrowUpCircle, X, RefreshCw, CheckCircle2 } from "lucide-react";
 
 const POLL_INTERVAL_MS = 60_000;
 const DISMISS_KEY_PREFIX = "ppm-upgrade-dismissed-";
-const RESTART_POLL_MS = 1_500;
-const RESTART_TIMEOUT_MS = 60_000;
 
 interface UpgradeStatus {
   currentVersion: string;
@@ -21,28 +19,13 @@ interface UpgradeResult {
   message?: string;
 }
 
-/** Poll /api/health aggressively until server goes down then back up, then reload. */
-async function waitForServerRestart(): Promise<boolean> {
-  let serverWentDown = false;
-  const start = Date.now();
-
-  while (Date.now() - start < RESTART_TIMEOUT_MS) {
-    await new Promise((r) => setTimeout(r, RESTART_POLL_MS));
-    try {
-      const res = await fetch("/api/health", { cache: "no-store" });
-      if (res.ok && serverWentDown) {
-        if ("caches" in window) {
-          const keys = await caches.keys();
-          await Promise.all(keys.map((k) => caches.delete(k)));
-        }
-        window.location.reload();
-        return true;
-      }
-    } catch {
-      serverWentDown = true;
-    }
+/** Clear browser/SW caches and reload the page */
+async function clearCachesAndReload() {
+  if ("caches" in window) {
+    const keys = await caches.keys();
+    await Promise.all(keys.map((k) => caches.delete(k)));
   }
-  return false;
+  window.location.reload();
 }
 
 interface UpgradeBannerProps {
@@ -52,6 +35,7 @@ interface UpgradeBannerProps {
 export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
   const [availableVersion, setAvailableVersion] = useState<string | null>(null);
   const [upgrading, setUpgrading] = useState(false);
+  const [upgradeComplete, setUpgradeComplete] = useState(false);
   const [dismissed, setDismissed] = useState(false);
 
   // Poll for upgrade status
@@ -86,12 +70,9 @@ export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
       const data = await api.post<UpgradeResult>("/api/upgrade/apply");
 
       if (data.restart) {
-        // Server will restart — poll aggressively until it comes back
-        const restarted = await waitForServerRestart();
-        if (!restarted) {
-          toast.warning("Upgrade installed but server hasn't restarted. Try refreshing manually.");
-          setUpgrading(false);
-        }
+        // Upgrade installed, server will restart — ask user to reload
+        setUpgrading(false);
+        setUpgradeComplete(true);
       } else {
         // No supervisor — manual restart needed
         toast.info(data.message || "Upgrade installed. Restart PPM manually.");
@@ -102,10 +83,21 @@ export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
         setDismissed(true);
       }
     } catch (e) {
-      toast.error(`Upgrade failed: ${(e as Error).message}`);
-      setUpgrading(false);
+      // If fetch failed with a network error, the server likely died mid-response
+      // after the install succeeded (supervisor killed the server before response flushed).
+      // Show reload prompt instead of a confusing error.
+      const isNetworkError = e instanceof TypeError
+        || (e as Error).message?.includes("fetch")
+        || (e as Error).message?.includes("network");
+      if (isNetworkError) {
+        setUpgrading(false);
+        setUpgradeComplete(true);
+      } else {
+        toast.error(`Upgrade failed: ${(e as Error).message}`);
+        setUpgrading(false);
+      }
     }
-  }, []);
+  }, [availableVersion]);
 
   const handleDismiss = useCallback(() => {
     if (availableVersion) {
@@ -114,7 +106,7 @@ export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
     setDismissed(true);
   }, [availableVersion]);
 
-  const visible = !!availableVersion && !dismissed;
+  const visible = (!!availableVersion && !dismissed) || upgradeComplete;
 
   useEffect(() => {
     onVisibilityChange?.(visible);
@@ -123,12 +115,30 @@ export function UpgradeBanner({ onVisibilityChange }: UpgradeBannerProps) {
   if (!visible) return null;
 
   return (
-    <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={`w-full text-white px-3 py-1 flex items-center justify-between gap-2 z-50 text-sm shrink-0 ${
+      upgradeComplete ? "bg-green-600 dark:bg-green-700" : "bg-blue-600 dark:bg-blue-700"
+    }`}>
+      {upgradeComplete ? (
+        <>
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <CheckCircle2 className="size-4 shrink-0" />
+            <span className="truncate">
+              Upgrade to v{availableVersion} installed! Reload to apply.
+            </span>
+          </div>
+          <button
+            onClick={clearCachesAndReload}
+            className="bg-white text-green-600 font-medium rounded-full px-3 py-0.5 text-xs min-h-[28px] min-w-[28px] flex items-center gap-1.5 justify-center hover:bg-green-50 active:bg-green-100 transition-colors shrink-0"
+          >
+            <RefreshCw className="size-3" />
+            Reload
+          </button>
+        </>
+      ) : upgrading ? (
         <div className="flex items-center gap-2 flex-1 min-w-0">
           <Loader2 className="size-4 animate-spin shrink-0" />
           <span className="truncate">
-            Upgrading to v{availableVersion}... PPM will restart shortly
+            Upgrading to v{availableVersion}...
           </span>
         </div>
       ) : (

package/src/web/components/settings/tag-settings-section.tsx

@@ -0,0 +1,167 @@
+import { useState, useEffect, useCallback } from "react";
+import { Plus, Trash2, Pencil, Check, X, RotateCcw } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import type { ProjectTag } from "../../../types/chat";
+
+interface TagSettingsSectionProps {
+  projectName: string;
+  onTagsChanged?: () => void;
+}
+
+export function TagSettingsSection({ projectName, onTagsChanged }: TagSettingsSectionProps) {
+  const [tags, setTags] = useState<ProjectTag[]>([]);
+  const [defaultTagId, setDefaultTagId] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editColor, setEditColor] = useState("");
+  const [newName, setNewName] = useState("");
+  const [newColor, setNewColor] = useState("#22c55e");
+  const [showAdd, setShowAdd] = useState(false);
+
+  const baseUrl = `${projectUrl(projectName)}/tags`;
+
+  const loadTags = useCallback(async () => {
+    try {
+      const data = await api.get<{ tags: ProjectTag[]; defaultTagId: number | null }>(baseUrl);
+      setTags(data.tags);
+      setDefaultTagId(data.defaultTagId);
+    } catch { /* silent */ }
+    setLoading(false);
+  }, [baseUrl]);
+
+  useEffect(() => { loadTags(); }, [loadTags]);
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    try {
+      await api.post(baseUrl, { name: newName.trim(), color: newColor });
+      setNewName("");
+      setShowAdd(false);
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  const handleUpdate = async (id: number) => {
+    try {
+      await api.patch(`${baseUrl}/${id}`, { name: editName.trim() || undefined, color: editColor || undefined });
+      setEditingId(null);
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  const handleDelete = async (id: number, name: string) => {
+    if (!window.confirm(`Delete tag "${name}"? Sessions with this tag will become untagged.`)) return;
+    try {
+      await api.del(`${baseUrl}/${id}`);
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  const handleSetDefault = async (tagId: number) => {
+    const newId = tagId === defaultTagId ? null : tagId;
+    try {
+      await api.patch(`${baseUrl}/default-tag`, { tagId: newId });
+      setDefaultTagId(newId);
+    } catch { /* silent */ }
+  };
+
+  const handleReset = async () => {
+    try {
+      await api.post(`${baseUrl}/reset`, {});
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  if (loading) return <p className="text-[11px] text-muted-foreground animate-pulse">Loading tags...</p>;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-medium text-muted-foreground">Session Tags</h3>
+        <div className="flex items-center gap-1">
+          <button onClick={handleReset} className="p-1 rounded text-text-subtle hover:text-text-secondary" title="Reset to defaults">
+            <RotateCcw className="size-3" />
+          </button>
+          <button onClick={() => setShowAdd(!showAdd)} className="p-1 rounded text-primary hover:bg-primary/10" title="Add tag">
+            <Plus className="size-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Add form */}
+      {showAdd && (
+        <div className="flex items-center gap-1.5 px-1">
+          <input type="color" value={newColor} onChange={(e) => setNewColor(e.target.value)} className="size-6 rounded cursor-pointer border-0 p-0" />
+          <input
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); if (e.key === "Escape") setShowAdd(false); }}
+            placeholder="Tag name"
+            className="flex-1 min-w-0 bg-surface-elevated text-[11px] text-text-primary px-2 py-1 rounded border border-border outline-none focus:border-primary"
+            autoFocus
+          />
+          <button onClick={handleCreate} className="p-1 text-green-500 hover:text-green-400"><Check className="size-3.5" /></button>
+          <button onClick={() => setShowAdd(false)} className="p-1 text-text-subtle hover:text-text-secondary"><X className="size-3.5" /></button>
+        </div>
+      )}
+
+      {/* Tag list */}
+      <div className="space-y-0.5">
+        {tags.map((tag) => (
+          <div key={tag.id} className="flex items-center gap-1.5 px-1 py-1 rounded hover:bg-surface-elevated group">
+            {editingId === tag.id ? (
+              <>
+                <input type="color" value={editColor} onChange={(e) => setEditColor(e.target.value)} className="size-5 rounded cursor-pointer border-0 p-0" />
+                <input
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleUpdate(tag.id); if (e.key === "Escape") setEditingId(null); }}
+                  className="flex-1 min-w-0 bg-surface-elevated text-[11px] px-1.5 py-0.5 rounded border border-border outline-none focus:border-primary"
+                  autoFocus
+                />
+                <button onClick={() => handleUpdate(tag.id)} className="p-0.5 text-green-500"><Check className="size-3" /></button>
+                <button onClick={() => setEditingId(null)} className="p-0.5 text-text-subtle"><X className="size-3" /></button>
+              </>
+            ) : (
+              <>
+                <span className="size-3 rounded-full shrink-0" style={{ backgroundColor: tag.color }} />
+                <span className="flex-1 text-[11px] text-text-primary truncate">{tag.name}</span>
+                <button
+                  onClick={() => handleSetDefault(tag.id)}
+                  className={`px-1.5 py-0.5 rounded text-[9px] font-medium transition-colors ${
+                    tag.id === defaultTagId
+                      ? "bg-primary/15 text-primary border border-primary/30"
+                      : "text-text-subtle border border-transparent can-hover:opacity-0 can-hover:group-hover:opacity-100 hover:bg-surface-elevated hover:border-border"
+                  }`}
+                  title={tag.id === defaultTagId ? "Default tag (click to unset)" : "Set as default for new sessions"}
+                >
+                  {tag.id === defaultTagId ? "Default" : "Set default"}
+                </button>
+                <button
+                  onClick={() => { setEditingId(tag.id); setEditName(tag.name); setEditColor(tag.color); }}
+                  className="p-0.5 rounded text-text-subtle hover:text-text-secondary can-hover:opacity-0 can-hover:group-hover:opacity-100"
+                >
+                  <Pencil className="size-3" />
+                </button>
+                <button
+                  onClick={() => handleDelete(tag.id, tag.name)}
+                  className="p-0.5 rounded text-text-subtle hover:text-red-400 can-hover:opacity-0 can-hover:group-hover:opacity-100"
+                >
+                  <Trash2 className="size-3" />
+                </button>
+              </>
+            )}
+          </div>
+        ))}
+        {tags.length === 0 && (
+          <p className="text-[11px] text-muted-foreground py-2 text-center">No tags. Click + to create one.</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/hooks/use-extension-ws.ts

@@ -151,10 +151,15 @@ export function useExtensionWs(enabled = true) {
             if (t) { existingTabId = t.id; break; }
           }
           if (existingTabId) {
-            // Tab already exists — update metadata with new panelId (panel was recreated)
+            // Tab already exists — update metadata with new panelId (panel was recreated).
+            // Preserve existing metadata (e.g. projectName) since updateTab replaces metadata entirely.
+            const existingTab = ps.grid.flat().reduce<Record<string, unknown> | undefined>((acc, pid) => {
+              if (acc) return acc;
+              return ps.panels[pid]?.tabs.find(tab => tab.id === existingTabId)?.metadata;
+            }, undefined);
             useTabStore.getState().updateTab(existingTabId, {
               title: msg.title,
-              metadata: { viewType: viewTypeSlug, panelId: msg.panelId, extensionId: msg.extensionId },
+              metadata: { ...existingTab, viewType: viewTypeSlug, panelId: msg.panelId, extensionId: msg.extensionId },
             });
             // Focus the existing tab so Cmd+G / command palette switches to it
             useTabStore.getState().setActiveTab(existingTabId);

package/src/web/styles/globals.css

@@ -172,6 +172,7 @@ html, body {
 
 .markdown-content pre {
   overflow-x: auto;
+  overflow-y: hidden;
   border-radius: 6px;
   background: var(--color-background);
   padding: 0.5rem;
@@ -179,6 +180,19 @@ html, body {
   font-family: var(--font-mono);
   border: 1px solid var(--color-border);
   margin: 0.5rem 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+.markdown-content pre::-webkit-scrollbar {
+  height: 4px;
+}
+.markdown-content pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+.markdown-content pre::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 9999px;
 }
 
 .markdown-content code {