@hienlh/ppm 0.17.16 → 0.17.18

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo } from "react";
-import { X, Bug as BugIcon } from "lucide-react";
+import { X, Bug as BugIcon, Cloud } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
@@ -19,6 +19,8 @@ import { resolveTabOrder } from "@/lib/sidebar-tabs/resolve-tab-order";
 import { MobileDrawerTabBar } from "@/components/layout/mobile-drawer-tab-bar";
 import { openBugReportPopup } from "@/lib/report-bug";
 import { UpgradeButton } from "@/components/layout/upgrade-button";
+import { CloudSharePopover } from "@/components/layout/cloud-share-popover";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { cn } from "@/lib/utils";
 
 // Tab ids the mobile drawer can render content for. `search` is desktop-only for now;
@@ -43,6 +45,7 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
   const setSidebarTabOrder = useSettingsStore((s) => s.setSidebarTabOrder);
   const contributions = useExtensionStore((s) => s.contributions);
   const [activeTab, setActiveTab] = useState<SidebarActiveTab>(initialTab ?? "explorer");
+  const [cloudOpen, setCloudOpen] = useState(false);
 
   const tabs = useMemo(
     () => resolveTabOrder(getAvailableTabs({ jiraEnabled, contributions }), sidebarTabOrder).filter((t) => isMobileSupported(t.id)),
@@ -123,19 +126,33 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
             onReorder={setSidebarTabOrder}
           />
 
-          {/* Report Bug + Version / Upgrade */}
+          {/* Report Bug + Cloud & Share + Version / Upgrade */}
           <div className="flex items-center justify-between px-4 py-2 border-t border-border text-[11px]">
             <UpgradeButton align="left" />
-            <button
-              onClick={handleReportBug}
-              className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
-            >
-              <BugIcon className="size-3" />
-              <span>Report Bug</span>
-            </button>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => setCloudOpen(true)}
+                className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
+              >
+                <Cloud className="size-3" />
+                <span>Cloud &amp; Share</span>
+              </button>
+              <button
+                onClick={handleReportBug}
+                className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
+              >
+                <BugIcon className="size-3" />
+                <span>Report Bug</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
+
+      {/* Cloud & Share — bottom sheet (portals to body, so drawer transform doesn't clip it) */}
+      <BottomSheet open={cloudOpen} onClose={() => setCloudOpen(false)} zIndex={60}>
+        <CloudSharePopover variant="sheet" onClose={() => setCloudOpen(false)} />
+      </BottomSheet>
     </div>
   );
 }

package/src/web/components/layout/nav-section-rail.tsx

@@ -24,8 +24,8 @@ function Badge({ count }: { count: number }) {
 }
 
 // Section nav item: 38×38, active = tinted bg + inset accent bar + bolder icon.
-function NavItem({ icon: Icon, label, active, badge, onClick, dragging, dropBefore, onDragStart, onDragOver, onDrop, onDragEnd }: {
-  icon: React.ElementType; label: string; active: boolean; badge?: number; onClick: () => void;
+function NavItem({ icon: Icon, label, active, badge, beta, onClick, dragging, dropBefore, onDragStart, onDragOver, onDrop, onDragEnd }: {
+  icon: React.ElementType; label: string; active: boolean; badge?: number; beta?: boolean; onClick: () => void;
   dragging?: boolean; dropBefore?: boolean;
   onDragStart?: (e: React.DragEvent) => void;
   onDragOver?: (e: React.DragEvent) => void;
@@ -51,6 +51,11 @@ function NavItem({ icon: Icon, label, active, badge, onClick, dragging, dropBefo
     >
       <Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
       {badge != null && badge > 0 && <Badge count={badge} />}
+      {beta && (
+        <span className="absolute -top-0.5 -right-0.5 rounded-full bg-accent-wash px-1 text-[7px] font-bold uppercase leading-[1.4] tracking-wide text-primary shadow-sm">
+          beta
+        </span>
+      )}
       {/* hover tooltip (pointer devices only) */}
       <span className="pointer-events-none absolute left-[calc(100%+8px)] z-50 hidden can-hover:group-hover:block whitespace-nowrap rounded-md border border-border bg-surface-elevated px-2 py-1 text-xs font-medium text-foreground shadow-[0_4px_12px_rgba(0,0,0,.4)]">
         {label}
@@ -155,6 +160,7 @@ export const NavSectionRail = memo(function NavSectionRail({ className }: { clas
             label={tab.label}
             active={sidebarActiveTab === tab.id}
             badge={tab.id === "git" ? gitChangesCount : tab.id === "jira" ? jiraUnreadCount : tab.id === "history" ? historyUnreadCount : undefined}
+            beta={tab.beta}
             onClick={() => handleTabClick(tab.id)}
             dragging={dragId === tab.id}
             dropBefore={dropId === tab.id && dragId !== tab.id}

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

@@ -81,6 +81,21 @@ async function reloadWhenServerReady() {
   await clearCachesAndReload();
 }
 
+/**
+ * Whether an /api/upgrade/apply failure actually means "the server is
+ * restarting", not "the upgrade failed". The self-replace tears the server down
+ * mid-request, so the response often never arrives cleanly: the connection
+ * drops (TypeError) or a proxy/tunnel in front returns a gateway error while the
+ * origin is briefly gone (502/503/504, or Cloudflare's 52x). Real upgrade
+ * failures come back as a JSON 500 with a specific message and won't match here.
+ */
+function looksLikeServerRestart(e: unknown): boolean {
+  if (e instanceof TypeError) return true; // dropped connection / fetch failure
+  const msg = (e as Error)?.message ?? "";
+  if (/fetch|network|failed to fetch|load failed/i.test(msg)) return true;
+  return /HTTP 5(0[234]|2\d)\b/.test(msg); // 502/503/504 + Cloudflare 520–529
+}
+
 /**
  * Status-bar version chip. Shows the current version normally; when a new
  * release is available it turns into an accent "update" button that opens a
@@ -150,14 +165,23 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
       .finally(() => setNotesLoading(false));
   }, [open, current, hasUpdate, isTest]);
 
+  // The server is restarting into the new version — stop showing "Updating…",
+  // switch to the reconnect state, and auto-reload once it's listening again
+  // (no manual click, and no raw 502 surfaced while the origin is briefly down).
+  const enterRestartWait = useCallback(() => {
+    setUpgrading(false);
+    setComplete(true);
+    setReloading(true);
+    reloadWhenServerReady();
+  }, []);
+
   const handleUpgrade = useCallback(async () => {
     setUpgrading(true);
     setOpen(false);
     try {
       const data = await api.post<UpgradeResult>("/api/upgrade/apply");
       if (data.restart) {
-        setUpgrading(false);
-        setComplete(true);
+        enterRestartWait();
       } else {
         toast.info(data.message || "Upgrade installed. Restart PPM manually.");
         setUpgrading(false);
@@ -165,18 +189,16 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
         setDismissed(true);
       }
     } catch (e) {
-      const isNetworkError = e instanceof TypeError
-        || (e as Error).message?.includes("fetch")
-        || (e as Error).message?.includes("network");
-      if (isNetworkError) {
-        setUpgrading(false);
-        setComplete(true);
+      if (looksLikeServerRestart(e)) {
+        // Expected: self-replace killed the server before the response flushed.
+        // The upgrade is in progress — wait for it, don't report a failure.
+        enterRestartWait();
       } else {
         toast.error(`Upgrade failed: ${(e as Error).message}`);
         setUpgrading(false);
       }
     }
-  }, [availableVersion]);
+  }, [availableVersion, enterRestartWait]);
 
   const handleDismiss = useCallback(() => {
     if (availableVersion) sessionStorage.setItem(DISMISS_KEY_PREFIX + availableVersion, "1");
@@ -194,10 +216,10 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
         onClick={() => { setReloading(true); reloadWhenServerReady(); }}
         disabled={reloading}
         className="flex items-center gap-1 px-1 rounded-sm text-success hover:brightness-110 transition-[filter] disabled:opacity-70"
-        title={reloading ? "Waiting for the server to restart…" : "Reload to apply the update"}
+        title={reloading ? "Applying update — reconnecting to the server…" : "Reload to apply the update"}
       >
         {reloading
-          ? <><Loader2 className="size-3 animate-spin" /> Waiting for server…</>
+          ? <><Loader2 className="size-3 animate-spin" /> Updating, reconnecting…</>
           : <><RefreshCw className="size-3" /> Reload</>}
       </button>
     );

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

@@ -147,7 +147,14 @@ export function useGroupChat(groupId: string | null, projectName: string): UseGr
     getFeed(groupId, { limit: 200 })
       .then((res) => {
         if (cancelled) return;
-        setMessages(res.messages);
+        // Merge, don't clobber: a live WS message (e.g. the very first message on a
+        // brand-new group) can arrive BEFORE this fetch resolves. Keep any such live
+        // messages that the fetched snapshot doesn't already include.
+        setMessages((prev) => {
+          const fetchedIds = new Set(res.messages.map((m) => m.id));
+          const liveExtra = prev.filter((m) => !fetchedIds.has(m.id));
+          return [...res.messages, ...liveExtra];
+        });
       })
       .catch((e) => {
         if (!cancelled) setError(e instanceof Error ? e.message : "Failed to load feed");

package/src/web/lib/api-group-chat.ts

@@ -1,5 +1,6 @@
 import { api } from "@/lib/api-client";
 import type { Group, GroupMember, GroupMessage, MemberRole } from "../../types/group-chat";
+import type { ChatMessage } from "../../types/chat";
 
 const BASE = "/api/group-chat";
 
@@ -41,6 +42,11 @@ export function createGroup(body: CreateGroupBody): Promise<Group> {
   return api.post<Group>(BASE, body);
 }
 
+/** Update per-group settings (currently the reply-burst cap `maxTurns`, 1–50). */
+export function updateGroupSettings(id: string, patch: { maxTurns?: number }): Promise<GroupDetail> {
+  return api.patch<GroupDetail>(`${BASE}/${encodeURIComponent(id)}`, patch);
+}
+
 /** Windowed feed for a group. */
 export function getFeed(
   id: string,
@@ -70,10 +76,47 @@ export function deleteGroup(id: string): Promise<void> {
   return api.del(`${BASE}/${encodeURIComponent(id)}`);
 }
 
-/** Raw archived transcript JSONL for a member session (powers "view full").
- *  Backend endpoint tracked for Phase 6 — surfaced as a friendly message if 404. */
-export function getTranscript(id: string, sessionRef: string): Promise<{ content: string }> {
-  return api.get<{ content: string }>(
+/** Member management (post-creation). */
+export interface MemberPatch {
+  role?: MemberRole;
+  name?: string;
+  persona?: string | null;
+  model?: string | null;
+  color?: string | null;
+}
+
+export function addGroupMember(
+  id: string,
+  member: { name: string; role?: MemberRole; persona?: string | null; model?: string | null; color?: string | null },
+): Promise<GroupMember> {
+  return api.post<GroupMember>(`${BASE}/${encodeURIComponent(id)}/members`, member);
+}
+
+export function updateGroupMember(id: string, memberId: string, patch: MemberPatch): Promise<GroupMember> {
+  return api.patch<GroupMember>(`${BASE}/${encodeURIComponent(id)}/members/${encodeURIComponent(memberId)}`, patch);
+}
+
+export function removeGroupMember(id: string, memberId: string): Promise<void> {
+  return api.del(`${BASE}/${encodeURIComponent(id)}/members/${encodeURIComponent(memberId)}`);
+}
+
+/** Parsed archived transcript for a member session (powers "view full") — chat-style
+ *  messages (text/thinking/tool_use/tool_result) plus the session input config. */
+export function getTranscript(id: string, sessionRef: string): Promise<TranscriptResult> {
+  return api.get<TranscriptResult>(
     `${BASE}/${encodeURIComponent(id)}/transcript?sessionRef=${encodeURIComponent(sessionRef)}`,
   );
 }
+
+export interface TranscriptConfig {
+  model?: string;
+  cwd?: string;
+  gitBranch?: string;
+  version?: string;
+  permissionMode?: string;
+}
+
+export interface TranscriptResult {
+  messages: ChatMessage[];
+  config: TranscriptConfig | null;
+}

package/src/web/lib/sidebar-tabs/tab-registry.ts

@@ -13,6 +13,8 @@ export interface SidebarTabDef {
   /** Compact label for the mobile bottom bar; falls back to `label`. */
   shortLabel?: string;
   icon: React.ElementType;
+  /** Marks the tab's feature as beta — renders a small "beta" tag on the rail + mobile bar. */
+  beta?: boolean;
 }
 
 /**
@@ -22,7 +24,7 @@ export interface SidebarTabDef {
  */
 export const BUILTIN_SIDEBAR_TABS: SidebarTabDef[] = [
   { id: "history", label: "Chat History", shortLabel: "History", icon: BotMessageSquare },
-  { id: "teams", label: "Teams", icon: Users },
+  { id: "teams", label: "Teams", icon: Users, beta: true },
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "search", label: "Search", icon: Search },
   { id: "git", label: "Git", icon: GitBranch },

package/dist/web/assets/architecture-PBZL5I3N-NAS99xy0.js

@@ -1 +0,0 @@
-import{G as e}from"./vendor-mermaid-DGOXKrJC.js";export{e as createArchitectureServices};