@hienlh/ppm 0.17.15 → 0.17.17

package/src/web/components/group-chat/group-member-roster.tsx

@@ -1,12 +1,19 @@
 import { memo } from "react";
+import { Pencil, Trash2, UserPlus } from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { MemberStatus } from "../../../types/group-chat";
-import type { RosterMember } from "@/hooks/use-group-chat";
+import type { GroupMember, MemberStatus } from "../../../types/group-chat";
 
 interface GroupMemberRosterProps {
-  members: RosterMember[];
+  members: GroupMember[];
+  /** memberId → live status (working/done/error) from the running burst. */
+  liveStatus: Map<string, MemberStatus>;
   /** Member name → true when composing a turn. */
   typing: Record<string, boolean>;
+  /** Disables actions while a mutation is in flight. */
+  busy?: boolean;
+  onAdd: () => void;
+  onEdit: (member: GroupMember) => void;
+  onRemove: (member: GroupMember) => void;
 }
 
 const STATUS_DOT: Record<MemberStatus, string> = {
@@ -23,26 +30,17 @@ const STATUS_LABEL: Record<MemberStatus, string> = {
   error: "Error",
 };
 
-/** Compact roster: avatar dot + name + role + live status; shows typing state. */
+/** Editable roster: avatar + name + role/persona + live status; add/edit/remove. */
 export const GroupMemberRoster = memo(function GroupMemberRoster({
-  members,
-  typing,
+  members, liveStatus, typing, busy, onAdd, onEdit, onRemove,
 }: GroupMemberRosterProps) {
-  if (members.length === 0) {
-    return (
-      <div className="p-3 text-xs text-text-subtle">No members yet.</div>
-    );
-  }
-
   return (
-    <ul className="flex flex-col gap-0.5 p-2">
+    <div className="flex flex-col gap-0.5 p-2">
       {members.map((m) => {
         const isTyping = typing[m.name];
+        const status = liveStatus.get(m.id) ?? m.status;
         return (
-          <li
-            key={m.id}
-            className="flex items-center gap-2 rounded-md px-2 py-1.5"
-          >
+          <div key={m.id} className="group flex items-center gap-2 rounded-md px-2 py-1.5">
             <span
               className="flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white ring-2 ring-background"
               style={{ backgroundColor: m.color ?? "var(--accent)" }}
@@ -59,18 +57,48 @@ export const GroupMemberRoster = memo(function GroupMemberRoster({
                   </span>
                 )}
               </div>
-              <span className="text-[10px] text-text-subtle">
-                {isTyping ? "typing…" : STATUS_LABEL[m.status]}
+              <span className="block truncate text-[10px] text-text-subtle">
+                {isTyping ? "typing…" : (m.persona || STATUS_LABEL[status])}
               </span>
             </div>
+            {/* Actions — always visible on touch; hover-reveal on pointer devices. */}
+            <div className="flex shrink-0 items-center gap-0.5 can-hover:opacity-0 can-hover:group-hover:opacity-100">
+              <button
+                type="button"
+                onClick={() => onEdit(m)}
+                disabled={busy}
+                aria-label={`Edit ${m.name}`}
+                className="flex size-8 items-center justify-center rounded-md text-text-subtle hover:bg-surface-elevated hover:text-foreground active:bg-surface-elevated disabled:opacity-40"
+              >
+                <Pencil className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => onRemove(m)}
+                disabled={busy}
+                aria-label={`Remove ${m.name}`}
+                className="flex size-8 items-center justify-center rounded-md text-text-subtle hover:bg-surface-elevated hover:text-destructive active:bg-surface-elevated disabled:opacity-40"
+              >
+                <Trash2 className="size-3.5" />
+              </button>
+            </div>
             <span
-              className={cn("size-2 shrink-0 rounded-full", STATUS_DOT[m.status])}
-              title={STATUS_LABEL[m.status]}
+              className={cn("size-2 shrink-0 rounded-full", STATUS_DOT[status])}
+              title={STATUS_LABEL[status]}
               aria-hidden
             />
-          </li>
+          </div>
         );
       })}
-    </ul>
+
+      <button
+        type="button"
+        onClick={onAdd}
+        disabled={busy}
+        className="mt-1 flex items-center gap-2 rounded-md px-2 py-2 text-xs font-medium text-primary hover:bg-surface-elevated active:bg-surface-elevated disabled:opacity-40"
+      >
+        <UserPlus className="size-4" /> Add member
+      </button>
+    </div>
   );
 });

package/src/web/components/group-chat/group-message-item.tsx

@@ -1,5 +1,12 @@
 import { memo, type ReactNode } from "react";
+import { ScrollText } from "lucide-react";
 import { cn } from "@/lib/utils";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+} from "@/components/ui/adaptive-context-menu";
 import type { GroupMessage } from "../../../types/group-chat";
 
 interface GroupMessageItemProps {
@@ -21,7 +28,10 @@ function initials(name: string): string {
 
 function formatTime(ts: number): string {
   try {
-    return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    // The bus stores created_at in SECONDS (SQLite unixepoch()); Date expects ms.
+    // Normalize second-scale values so timestamps don't all collapse to one minute.
+    const ms = ts < 1e12 ? ts * 1000 : ts;
+    return new Date(ms).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   } catch {
     return "";
   }
@@ -30,7 +40,7 @@ function formatTime(ts: number): string {
 /** Render body text with @mentions tinted in the mentioned member's color
  *  (falls back to the primary accent) so it's obvious who is being addressed. */
 function withMentions(text: string, colorFor: (n: string) => string | null): ReactNode[] {
-  return text.split(/(@\w+)/g).map((part, i) => {
+  return text.split(/(@[\p{L}\p{N}_]+)/gu).map((part, i) => {
     if (part.startsWith("@") && part.length > 1) {
       const c = colorFor(part.slice(1));
       return (
@@ -44,7 +54,7 @@ function withMentions(text: string, colorFor: (n: string) => string | null): Rea
 }
 
 /** Slack-style feed row: colored avatar + name accent per speaker, left color
- *  bar, "You" for the user, leader badge, highlighted @mentions, final card. */
+ *  bar, "You" for the user, leader badge, highlighted @mentions. */
 export const GroupMessageItem = memo(function GroupMessageItem({
   message,
   colorFor,
@@ -55,18 +65,30 @@ export const GroupMessageItem = memo(function GroupMessageItem({
   const displayName = isUser ? "You" : message.fromMember;
   const accent = isUser ? "var(--color-primary)" : (colorFor(message.fromMember) ?? "var(--accent)");
   const leader = !isUser && isLeader(message.fromMember);
-  const isFinal = message.kind === "final";
   const summary = message.summary ?? "";
   const target = message.toMember && message.toMember !== "all" ? message.toMember : null;
 
-  return (
+  const row = (
     <div
       className={cn(
-        "flex gap-2.5 px-3 py-2 transition-colors hover:bg-surface-elevated/50",
+        "group relative flex gap-2.5 px-3 py-2 transition-colors hover:bg-surface-elevated/50",
         isUser && "bg-primary/5",
       )}
       style={{ boxShadow: `inset 3px 0 0 0 ${accent}` }}
     >
+      {/* Transcript (AI raw thinking / debug) — top-right icon, POINTER DEVICES ONLY,
+          revealed on hover. On touch it's hidden; use long-press → context menu instead. */}
+      {message.fullSessionRef && (
+        <button
+          type="button"
+          onClick={() => onViewFull(message)}
+          title="View full transcript (AI's raw thinking / debug)"
+          aria-label="View full transcript"
+          className="absolute right-1.5 top-1.5 hidden items-center rounded p-1 text-text-subtle/60 hover:bg-surface-elevated hover:text-text-secondary can-hover:group-hover:inline-flex"
+        >
+          <ScrollText className="size-3.5" />
+        </button>
+      )}
       <div
         className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold text-white ring-2 ring-background"
         style={{ backgroundColor: accent }}
@@ -75,7 +97,7 @@ export const GroupMessageItem = memo(function GroupMessageItem({
         {initials(displayName)}
       </div>
 
-      <div className="min-w-0 flex-1">
+      <div className="min-w-0 flex-1 can-hover:pr-6">
         <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
           <span
             className="text-sm font-semibold"
@@ -91,31 +113,28 @@ export const GroupMessageItem = memo(function GroupMessageItem({
           {target && (
             <span className="text-[11px] text-text-subtle">→ {target}</span>
           )}
-          {isFinal && (
-            <span className="rounded-full bg-accent-wash px-1.5 py-px text-[10px] font-medium text-primary">
-              final
-            </span>
-          )}
           <span className="text-[11px] text-text-subtle">{formatTime(message.createdAt)}</span>
         </div>
 
-        <div className={cn(
-          "mt-0.5 whitespace-pre-wrap break-words text-sm leading-relaxed text-text-secondary",
-          isFinal && "mt-1.5 rounded-md border border-accent-wash bg-accent-wash/40 px-3 py-2 text-foreground",
-        )}>
+        <div className="mt-0.5 whitespace-pre-wrap break-words text-sm leading-relaxed text-text-secondary">
           {withMentions(summary, colorFor)}
         </div>
-
-        {message.fullSessionRef && (
-          <button
-            type="button"
-            onClick={() => onViewFull(message)}
-            className="mt-1 inline-flex min-h-[44px] items-center text-xs font-medium text-primary hover:underline md:min-h-[32px]"
-          >
-            View full transcript
-          </button>
-        )}
       </div>
     </div>
   );
+
+  // No transcript → plain row. Otherwise wrap so long-press (mobile) / right-click
+  // (desktop) opens a menu with the transcript action; the hover icon covers pointer.
+  if (!message.fullSessionRef) return row;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{row}</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={() => onViewFull(message)}>
+          <ScrollText className="size-4" /> View full transcript
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
 });

package/src/web/components/group-chat/group-transcript-messages.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { ChevronRight, Brain, Settings2 } from "lucide-react";
+import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
+import { ToolCard } from "@/components/chat/tool-cards";
+import { cn } from "@/lib/utils";
+import type { ChatMessage, ChatEvent } from "../../../types/chat";
+import type { TranscriptConfig } from "@/lib/api-group-chat";
+
+interface Props {
+  messages: ChatMessage[];
+  config: TranscriptConfig | null;
+  projectName?: string;
+}
+
+/** Read-only, chat-style render of an archived member transcript: text (markdown),
+ *  collapsible thinking, tool calls with inputs + outputs, and the session input config.
+ *  Deliberately minimal — no approvals / fork / version affordances. */
+export function GroupTranscriptMessages({ messages, config, projectName }: Props) {
+  return (
+    <div className="flex flex-col gap-3">
+      {config && <ConfigBlock config={config} />}
+      {messages.map((m) => (
+        <div key={m.id} className="flex flex-col gap-1.5">
+          <span className="text-[10px] font-semibold uppercase tracking-wide text-text-subtle">
+            {m.role === "user" ? "User" : m.role === "assistant" ? "Assistant" : m.role}
+          </span>
+          <MessageBody message={m} projectName={projectName} />
+        </div>
+      ))}
+      {messages.length === 0 && (
+        <p className="py-6 text-center text-sm text-text-subtle">Transcript is empty.</p>
+      )}
+    </div>
+  );
+}
+
+function MessageBody({ message, projectName }: { message: ChatMessage; projectName?: string }) {
+  const events = message.events ?? [];
+  if (events.length === 0) {
+    return message.content.trim()
+      ? <MarkdownRenderer content={message.content} />
+      : null;
+  }
+  // Match tool_result events to their tool_use by id (rendered inside the ToolCard).
+  const resultById = new Map<string, ChatEvent>();
+  for (const ev of events) {
+    if (ev.type === "tool_result" && ev.toolUseId) resultById.set(ev.toolUseId, ev);
+  }
+  return (
+    <div className="flex flex-col gap-2">
+      {events.map((ev, i) => {
+        if (ev.type === "text") {
+          return ev.content.trim() ? <MarkdownRenderer key={i} content={ev.content} /> : null;
+        }
+        if (ev.type === "thinking") {
+          return <ThinkingBlock key={i} content={ev.content} />;
+        }
+        if (ev.type === "tool_use") {
+          const result = ev.toolUseId ? resultById.get(ev.toolUseId) : undefined;
+          return <ToolCard key={i} tool={ev} result={result} completed={!!result} projectName={projectName} />;
+        }
+        return null; // tool_result rendered via its tool_use
+      })}
+    </div>
+  );
+}
+
+/** Collapsible reasoning block (collapsed by default). */
+function ThinkingBlock({ content }: { content: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="rounded-md border border-border bg-surface-elevated/40">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-xs text-text-subtle hover:text-text-secondary"
+      >
+        <ChevronRight className={cn("size-3.5 transition-transform", open && "rotate-90")} />
+        <Brain className="size-3.5" />
+        <span>Thinking</span>
+      </button>
+      {open && (
+        <div className="border-t border-border px-3 py-2 text-xs leading-relaxed text-text-secondary">
+          <MarkdownRenderer content={content} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Collapsible input-config summary (model / cwd / branch / version / permission mode). */
+function ConfigBlock({ config }: { config: TranscriptConfig }) {
+  const [open, setOpen] = useState(false);
+  const rows: Array<[string, string | undefined]> = [
+    ["Model", config.model],
+    ["Permission", config.permissionMode],
+    ["CWD", config.cwd],
+    ["Git branch", config.gitBranch],
+    ["CLI version", config.version],
+  ];
+  const shown = rows.filter(([, v]) => v);
+  if (shown.length === 0) return null;
+  return (
+    <div className="rounded-md border border-border bg-surface-elevated/40">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-text-secondary hover:text-foreground"
+      >
+        <ChevronRight className={cn("size-3.5 transition-transform", open && "rotate-90")} />
+        <Settings2 className="size-3.5" />
+        <span>Input config</span>
+      </button>
+      {open && (
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 border-t border-border px-3 py-2 text-xs">
+          {shown.map(([k, v]) => (
+            <div key={k} className="contents">
+              <dt className="text-text-subtle">{k}</dt>
+              <dd className="break-all font-mono text-text-secondary">{v}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+    </div>
+  );
+}

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

@@ -134,6 +134,11 @@ export function MobileDrawerTabBar({ tabs, activeId, onSelect, onReorder }: Prop
           >
             <Icon className="size-4" />
             <span>{tab.shortLabel ?? tab.label}</span>
+            {tab.beta && (
+              <span className="absolute top-1 right-2 rounded-full bg-accent-wash px-1 text-[7px] font-bold uppercase leading-[1.4] tracking-wide text-primary">
+                beta
+              </span>
+            )}
           </button>
         );
       })}
@@ -168,6 +173,11 @@ export function MobileDrawerTabBar({ tabs, activeId, onSelect, onReorder }: Prop
               >
                 <Icon className="size-4 shrink-0" />
                 <span>{tab.label}</span>
+                {tab.beta && (
+                  <span className="rounded-full bg-accent-wash px-1.5 py-px text-[9px] font-semibold uppercase tracking-wide text-primary">
+                    beta
+                  </span>
+                )}
               </button>
             );
           })}

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/components/settings/ai-settings-section.tsx

@@ -20,6 +20,8 @@ const EFFORT_OPTIONS = [
   { value: "low", label: "Low" },
   { value: "medium", label: "Medium" },
   { value: "high", label: "High" },
+  { value: "xhigh", label: "Extra" },
+  { value: "max", label: "Max" },
 ];
 
 const PERMISSION_MODE_OPTIONS = [

package/src/web/components/settings/proxy-test-section.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/dialog";
 
 const DEFAULT_MESSAGE = "Hello! Reply briefly.";
-const DEFAULT_MODEL = "claude-opus-4-8";
+const DEFAULT_MODEL = "claude-opus-5";
 
 type EndpointFormat = "anthropic" | "openai";
 
@@ -159,10 +159,12 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
           onChange={(e) => setModel(e.target.value)}
           className="h-8 w-full rounded-md border bg-background px-2 text-[11px]"
         >
+          <option value="claude-opus-5">claude-opus-5</option>
           <option value="claude-fable-5">claude-fable-5</option>
           <option value="claude-opus-4-8">claude-opus-4-8</option>
           <option value="claude-opus-4-7">claude-opus-4-7</option>
           <option value="claude-opus-4-6">claude-opus-4-6</option>
+          <option value="claude-sonnet-5">claude-sonnet-5</option>
           <option value="claude-sonnet-4-6">claude-sonnet-4-6</option>
           <option value="claude-haiku-4-5">claude-haiku-4-5</option>
         </select>

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

@@ -67,6 +67,14 @@ interface UseChatReturn {
   model: string | null;
   /** Switch the per-session model (persists + recreates query on next message) */
   setModel: (model: string) => void;
+  /** Per-session effort override (null = provider default) */
+  effort: string | null;
+  /** Switch the per-session effort (low|medium|high|xhigh|max) */
+  setEffort: (effort: string) => void;
+  /** Whether per-session thinking is on */
+  thinking: boolean;
+  /** Toggle per-session thinking on/off */
+  setThinking: (enabled: boolean) => void;
   /** Team activity state from WS events */
   teamActivity: TeamActivityState;
   /** All team messages (ref-backed, updated live) */
@@ -126,6 +134,11 @@ export function useChat(sessionId: string | null, providerId = "claude", project
   // On a draft chat the WS doesn't exist, so set_model is lost — without this
   // guard the initial session_state (provider default) clobbers the selection.
   const pendingModelRef = useRef<string | null>(null);
+  const [effort, setEffortState] = useState<string | null>(null);
+  const effortRef = useRef<string | null>(null);
+  const [thinking, setThinkingState] = useState<boolean>(false);
+  // null = user hasn't chosen; don't send a value that would override provider config.
+  const thinkingRef = useRef<boolean | null>(null);
   const prevSessionIdRef = useRef<string | null>(null);
   const streamingContentRef = useRef("");
   const streamingEventsRef = useRef<ChatEvent[]>([]);
@@ -657,6 +670,14 @@ export function useChat(sessionId: string | null, providerId = "claude", project
           modelRef.current = state.model;
         }
       }
+      if (typeof state.effort === "string") {
+        setEffortState(state.effort);
+        effortRef.current = state.effort;
+      }
+      if (typeof state.thinking === "boolean") {
+        setThinkingState(state.thinking);
+        thinkingRef.current = state.thinking;
+      }
       if (state.pendingApproval) {
         setPendingApproval({
           requestId: state.pendingApproval.requestId,
@@ -903,6 +924,8 @@ export function useChat(sessionId: string | null, providerId = "claude", project
         priority: opts?.priority,
         images: opts?.images,
         ...(modelRef.current && { model: modelRef.current }),
+        ...(effortRef.current && { effort: effortRef.current }),
+        ...(thinkingRef.current !== null && { thinking: thinkingRef.current }),
       }));
     },
     [send],
@@ -918,6 +941,24 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     [send],
   );
 
+  const setEffort = useCallback(
+    (nextEffort: string) => {
+      setEffortState(nextEffort); // optimistic
+      effortRef.current = nextEffort;
+      send(JSON.stringify({ type: "set_effort", effort: nextEffort }));
+    },
+    [send],
+  );
+
+  const setThinking = useCallback(
+    (enabled: boolean) => {
+      setThinkingState(enabled); // optimistic
+      thinkingRef.current = enabled;
+      send(JSON.stringify({ type: "set_thinking", enabled }));
+    },
+    [send],
+  );
+
   const respondToApproval = useCallback(
     (requestId: string, approved: boolean, data?: unknown) => {
       send(
@@ -1104,6 +1145,10 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     sessionTitle,
     model,
     setModel,
+    effort,
+    setEffort,
+    thinking,
+    setThinking,
     teamActivity,
     teamMessages,
     markTeamRead,

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");