@hienlh/ppm 0.17.15 → 0.17.17

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

@@ -637,12 +637,15 @@ function parseIdeOpenedFile(text: string): { idePath: string | null; cleanText:
 /** Parse user message content, extracting attached file paths and the actual text */
 function parseUserAttachments(content: string): { files: string[]; text: string } {
   // Match: [Attached file: /path] or [Attached files:\n/path1\n/path2\n]
-  const singleMatch = content.match(/^\[Attached file: (.+?)\]\n\n?/);
+  // Trailing newlines are optional — an attachment-only message has the marker
+  // trimmed to the end of the string (extractTerminalBlocks trims), so the
+  // separator newlines may be absent.
+  const singleMatch = content.match(/^\[Attached file: (.+?)\]\n*/);
   if (singleMatch) {
     return { files: [singleMatch[1]!], text: content.slice(singleMatch[0].length) };
   }
 
-  const multiMatch = content.match(/^\[Attached files:\n([\s\S]+?)\]\n\n?/);
+  const multiMatch = content.match(/^\[Attached files:\n([\s\S]+?)\]\n*/);
   if (multiMatch) {
     const files = multiMatch[1]!.split("\n").map((l) => l.trim()).filter(Boolean);
     return { files, text: content.slice(multiMatch[0].length) };
@@ -815,7 +818,7 @@ function UserBubble({ content, messageId, timestamp, projectName, onFork, onEdit
             expanded && "max-h-[50vh] overflow-y-auto",
           )}
         >
-          {isSystemContext ? <TextWithFilePaths text={text} projectName={projectName} /> : text}
+          {isSystemContext ? <TextWithFilePaths text={text} projectName={projectName} /> : <TextWithLinks text={text} />}
         </div>
       )}
       {(isOverflowing || expanded) && (
@@ -1002,6 +1005,48 @@ function FilePathChip({ path, projectName }: { path: string; projectName?: strin
   );
 }
 
+/** Render plain text with http(s) URLs turned into clickable links. Preserves
+ *  whitespace/newlines via the surrounding `whitespace-pre-wrap` container. */
+function TextWithLinks({ text }: { text: string }) {
+  const parts = useMemo(() => {
+    const re = /(https?:\/\/[^\s<>()]+[^\s<>().,;:!?'"])/g;
+    const result: { kind: "text" | "url"; value: string }[] = [];
+    let last = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+      if (m.index > last) result.push({ kind: "text", value: text.slice(last, m.index) });
+      result.push({ kind: "url", value: m[1]! });
+      last = m.index + m[0].length;
+    }
+    if (last < text.length) result.push({ kind: "text", value: text.slice(last) });
+    return result;
+  }, [text]);
+
+  // No URLs — return the raw string so nothing about the layout changes.
+  if (parts.every((p) => p.kind === "text")) return <>{text}</>;
+
+  return (
+    <>
+      {parts.map((p, i) =>
+        p.kind === "url" ? (
+          <a
+            key={i}
+            href={p.value}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary underline underline-offset-2 hover:text-primary/80 break-all"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {p.value}
+          </a>
+        ) : (
+          <span key={i}>{p.value}</span>
+        ),
+      )}
+    </>
+  );
+}
+
 /** Render text with absolute file paths detected and turned into clickable chips */
 function TextWithFilePaths({ text, projectName }: { text: string; projectName?: string }) {
   const parts = useMemo(() => {

package/src/web/components/chat/model-thinking-selector-helpers.ts

@@ -0,0 +1,33 @@
+// Pure helpers for the unified model + thinking picker. Kept DOM-free so the
+// label↔value mapping (the crash-prone "Extra"→"xhigh" contract) is unit-testable
+// without a browser harness.
+//
+// SDK effort enum = low | medium | high | xhigh | max. The app UI shows "Extra"
+// for the SDK value "xhigh"; the literal "extra" would crash the CLI subprocess,
+// so it must NEVER appear as a value here.
+
+export interface EffortOption {
+  label: string;
+  value: "low" | "medium" | "high" | "xhigh" | "max";
+  default?: boolean;
+}
+
+export const EFFORT_OPTIONS: EffortOption[] = [
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "High", value: "high", default: true },
+  { label: "Extra", value: "xhigh" },
+  { label: "Max", value: "max" },
+];
+
+/** UI label for an effort value; falls back to the raw value when unknown. */
+export function effortLabel(value: string | null | undefined): string {
+  if (!value) return "";
+  return EFFORT_OPTIONS.find((o) => o.value === value)?.label ?? value;
+}
+
+/** Chip text: model display, plus " · <Effort>" when an effort is set. */
+export function chipLabel(modelDisplay: string, effortValue: string | null | undefined): string {
+  const eff = effortLabel(effortValue);
+  return eff ? `${modelDisplay} · ${eff}` : modelDisplay;
+}

package/src/web/components/chat/model-thinking-selector.tsx

@@ -0,0 +1,189 @@
+import { useState, useEffect, useRef, type ReactNode } from "react";
+import { Check, Sparkles, Brain } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { EFFORT_OPTIONS, chipLabel } from "./model-thinking-selector-helpers";
+
+interface ModelOption {
+  value: string;
+  label: string;
+}
+
+interface ModelThinkingSelectorProps {
+  model: string | null;
+  effort: string | null;
+  thinking: boolean;
+  onModelChange: (model: string) => void;
+  onEffortChange: (effort: string) => void;
+  onThinkingChange: (enabled: boolean) => void;
+  projectName: string;
+  providerId: string;
+  /** Locked while a turn is streaming (model/effort can't change mid-turn). */
+  disabled?: boolean;
+}
+
+/** Strip the leading "Claude " so the chip stays compact: "Claude Opus 5" → "Opus 5" */
+function shortLabel(label: string): string {
+  return label.replace(/^Claude\s+/i, "");
+}
+
+const DEFAULT_EFFORT = EFFORT_OPTIONS.find((o) => o.default)!.value;
+
+/**
+ * Unified model + thinking picker — one chip, one popup. Mirrors Anthropic's native
+ * picker: model list, effort levels (Extra→SDK "xhigh"), and a thinking on/off toggle.
+ * Desktop → absolute popover; mobile (<md) → bottom sheet with 44px targets.
+ */
+export function ModelThinkingSelector({
+  model,
+  effort,
+  thinking,
+  onModelChange,
+  onEffortChange,
+  onThinkingChange,
+  projectName,
+  providerId,
+  disabled,
+}: ModelThinkingSelectorProps) {
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    if (!projectName || !providerId) return;
+    api
+      .get<ModelOption[]>(`${projectUrl(projectName)}/chat/providers/${providerId}/models`)
+      .then(setModels)
+      .catch(() => {});
+  }, [projectName, providerId]);
+
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+
+  // Desktop popover: close on click outside (mobile bottom sheet handles its own backdrop).
+  useEffect(() => {
+    if (!open || isMobile) return;
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, isMobile]);
+
+  const current = models.find((m) => m.value === model);
+  const modelDisplay = current ? shortLabel(current.label) : model ? shortLabel(model) : "Model";
+  const effortValue = effort ?? DEFAULT_EFFORT;
+  const showModelList = models.length > 1;
+  const chipText = chipLabel(modelDisplay, effortValue);
+
+  const pick = (fn: () => void) => {
+    fn();
+    if (!isMobile) setOpen(false);
+  };
+
+  const content = (
+    <div className="flex divide-x divide-border">
+      {/* Left column: model list */}
+      {showModelList && (
+        <div className="flex-1 min-w-0 py-1">
+          <SectionLabel>Model</SectionLabel>
+          {models.map((m) => (
+            <OptionRow key={m.value} active={m.value === model} onClick={() => pick(() => onModelChange(m.value))}>
+              <span className="flex-1 truncate">{shortLabel(m.label)}</span>
+              {m.value === model && <Check className="size-4 shrink-0 text-primary" />}
+            </OptionRow>
+          ))}
+        </div>
+      )}
+      {/* Right column: effort + thinking toggle */}
+      <div className="flex-1 min-w-0 py-1">
+        <SectionLabel>Effort</SectionLabel>
+        {EFFORT_OPTIONS.map((o) => (
+          <OptionRow key={o.value} active={o.value === effortValue} onClick={() => pick(() => onEffortChange(o.value))}>
+            <span className="flex-1 truncate">
+              {o.label}
+              {o.default && <span className="ml-2 text-xs text-text-subtle">Default</span>}
+            </span>
+            {o.value === effortValue && <Check className="size-4 shrink-0 text-primary" />}
+          </OptionRow>
+        ))}
+        <Separator />
+        <button
+          type="button"
+          onClick={() => onThinkingChange(!thinking)}
+          className="w-full flex items-center gap-3 px-3 min-h-[44px] text-left text-sm hover:bg-surface-elevated"
+          role="switch"
+          aria-checked={thinking}
+        >
+          <Brain className="size-4 shrink-0" />
+          <span className="flex-1">Thinking</span>
+          <span className={`inline-flex h-5 w-9 items-center rounded-full transition-colors ${thinking ? "bg-primary" : "bg-border"}`}>
+            <span className={`h-4 w-4 rounded-full bg-white transition-transform ${thinking ? "translate-x-4" : "translate-x-0.5"}`} />
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (!disabled) setOpen((v) => !v);
+        }}
+        className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-primary bg-accent-wash border border-accent-wash-border hover:brightness-110 transition-[filter] disabled:opacity-50 disabled:cursor-default"
+        aria-label={`Model ${modelDisplay}, effort ${effortValue}${thinking ? ", thinking on" : ""}`}
+        title={disabled ? "Can't change while running" : chipText}
+      >
+        <Sparkles className="h-3.5 w-3.5 shrink-0" />
+        <span className="max-w-[140px] truncate">{chipText}</span>
+        {thinking && <Brain className="h-3 w-3 shrink-0" />}
+      </button>
+
+      {open && !disabled && (
+        isMobile ? (
+          <BottomSheet open={open} onClose={() => setOpen(false)}>
+            <div className="px-1 pb-2">{content}</div>
+          </BottomSheet>
+        ) : (
+          <div
+            ref={panelRef}
+            role="listbox"
+            aria-label="Model and thinking"
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+            className="absolute bottom-full left-0 mb-1 z-50 w-80 rounded-lg border border-border popover-solid shadow-[var(--shadow-panel)] max-h-[70vh] overflow-y-auto"
+          >
+            {content}
+          </div>
+        )
+      )}
+    </div>
+  );
+}
+
+function SectionLabel({ children }: { children: ReactNode }) {
+  return <div className="px-3 py-1.5 text-xs font-medium text-text-secondary">{children}</div>;
+}
+
+function Separator() {
+  return <div className="my-1 border-t border-border" />;
+}
+
+function OptionRow({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`w-full flex items-center gap-3 px-3 min-h-[44px] text-left text-sm text-text-primary transition-colors hover:bg-surface-elevated ${active ? "bg-surface-elevated" : ""}`}
+    >
+      {children}
+    </button>
+  );
+}

package/src/web/components/group-chat/group-chat-tab.tsx

@@ -5,11 +5,14 @@ import { useProjectStore } from "@/stores/project-store";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useGroupChat } from "@/hooks/use-group-chat";
 import { Button } from "@/components/ui/button";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { cn } from "@/lib/utils";
 import { GroupMessageItem } from "./group-message-item";
 import { GroupMemberRoster } from "./group-member-roster";
+import { GroupMemberEditDialog, type MemberFormValues } from "./group-member-edit-dialog";
 import { GroupFullTranscriptView } from "./group-full-transcript-view";
-import type { GroupMessage } from "../../../types/group-chat";
+import { getGroup, addGroupMember, updateGroupMember, removeGroupMember, updateGroupSettings } from "@/lib/api-group-chat";
+import type { GroupMessage, GroupMember } from "../../../types/group-chat";
 
 interface GroupChatTabProps {
   metadata?: Record<string, unknown>;
@@ -31,20 +34,64 @@ export function GroupChatTab({ metadata }: GroupChatTabProps) {
   const [rosterOpen, setRosterOpen] = useState(false);
   const feedEndRef = useRef<HTMLDivElement>(null);
 
+  // Full roster (with persona/model) for management — the WS `members` only carry
+  // live status/color, so we fetch the editable detail separately and refetch on change.
+  const [roster, setRoster] = useState<GroupMember[]>([]);
+  const [cap, setCap] = useState<number | null>(null); // per-group reply-burst cap
+  const [rosterBusy, setRosterBusy] = useState(false);
+  const [rosterError, setRosterError] = useState<string | null>(null);
+  // `null` = dialog closed; `{ member: null }` = add; `{ member }` = edit.
+  const [editing, setEditing] = useState<{ member: GroupMember | null } | null>(null);
+
+  const reloadRoster = useCallback(async () => {
+    if (!groupId) return;
+    try { const g = await getGroup(groupId); setRoster(g.members); setCap(g.maxTurns); } catch { /* keep last */ }
+  }, [groupId]);
+
+  const handleCapChange = useCallback(async (n: number) => {
+    if (!groupId) return;
+    const clamped = Math.max(1, Math.min(50, Math.floor(n) || 1));
+    setCap(clamped);
+    try { await updateGroupSettings(groupId, { maxTurns: clamped }); }
+    catch { void reloadRoster(); }
+  }, [groupId, reloadRoster]);
+
+  useEffect(() => { setRoster([]); void reloadRoster(); }, [groupId, reloadRoster]);
+
   // Stick to bottom on new messages.
   useEffect(() => {
     feedEndRef.current?.scrollIntoView({ block: "end" });
   }, [messages.length, typing]);
 
+  // memberId → live status from the running burst (overlays the fetched roster).
+  const liveStatus = useMemo(() => new Map(members.map((m) => [m.id, m.status] as const)), [members]);
+
+  // Prefer the fetched roster (fresh after edits); fall back to WS members before load.
+  const metaSource = roster.length ? roster : members;
   const colorFor = useMemo(() => {
-    const map = new Map(members.map((m) => [m.name, m.color]));
+    const map = new Map(metaSource.map((m) => [m.name, m.color]));
     return (name: string) => map.get(name) ?? null;
-  }, [members]);
+  }, [metaSource]);
 
   const isLeader = useMemo(() => {
-    const leaders = new Set(members.filter((m) => m.role === "leader").map((m) => m.name));
+    const leaders = new Set(metaSource.filter((m) => m.role === "leader").map((m) => m.name));
     return (name: string) => leaders.has(name);
-  }, [members]);
+  }, [metaSource]);
+
+  const handleSubmitMember = useCallback(async (values: MemberFormValues) => {
+    if (!groupId) return;
+    if (editing?.member) await updateGroupMember(groupId, editing.member.id, values);
+    else await addGroupMember(groupId, values);
+    await reloadRoster();
+  }, [groupId, editing, reloadRoster]);
+
+  const handleRemoveMember = useCallback(async (m: GroupMember) => {
+    if (!groupId) return;
+    setRosterBusy(true); setRosterError(null);
+    try { await removeGroupMember(groupId, m.id); await reloadRoster(); }
+    catch (e) { setRosterError(e instanceof Error ? e.message : "Failed to remove member"); }
+    finally { setRosterBusy(false); }
+  }, [groupId, reloadRoster]);
 
   const handleSend = useCallback(() => {
     const content = draft.trim();
@@ -156,17 +203,65 @@ export function GroupChatTab({ metadata }: GroupChatTabProps) {
         </div>
       </div>
 
-      {/* Roster — sidebar on desktop, drawer toggle on mobile */}
-      {rosterOpen && (
-        <div className={cn(
-          "shrink-0 border-l border-border bg-panel",
-          isMobile ? "absolute inset-y-0 right-0 z-20 w-64 shadow-xl" : "w-60",
-        )}>
-          <div className="flex h-11 items-center border-b border-border px-3 text-sm font-medium text-foreground">
+      {/* Roster — inline sidebar on desktop; bottom sheet on mobile (tap backdrop
+          or swipe down to dismiss, since the header toggle sits under an overlay). */}
+      {isMobile ? (
+        <BottomSheet open={rosterOpen} onClose={() => setRosterOpen(false)} className="flex max-h-[72vh] flex-col">
+          <div className="flex h-11 shrink-0 items-center px-4 text-sm font-medium text-foreground">
             Members
           </div>
-          <GroupMemberRoster members={members} typing={typing} />
-        </div>
+          <div className="min-h-0 overflow-y-auto">
+            {cap !== null && (
+              <label className="flex items-center gap-2 px-4 py-2 text-xs text-text-secondary">
+                <span>Reply cap</span>
+                <input type="number" min={1} max={50} value={cap}
+                  onChange={(e) => handleCapChange(Number(e.target.value))}
+                  className="w-14 rounded border border-border bg-background px-1.5 py-1 text-xs text-foreground" />
+                <span className="text-text-subtle">turns/msg</span>
+              </label>
+            )}
+            {rosterError && <p className="px-3 py-1 text-xs text-destructive">{rosterError}</p>}
+            <GroupMemberRoster
+              members={roster} liveStatus={liveStatus} typing={typing} busy={rosterBusy}
+              onAdd={() => setEditing({ member: null })} onEdit={(m) => setEditing({ member: m })} onRemove={handleRemoveMember}
+            />
+          </div>
+        </BottomSheet>
+      ) : (
+        rosterOpen && (
+          <div className="flex w-60 shrink-0 flex-col border-l border-border bg-panel">
+            <div className="flex h-11 shrink-0 items-center border-b border-border px-3 text-sm font-medium text-foreground">
+              Members
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto">
+              {cap !== null && (
+                <label className="flex items-center gap-2 px-3 py-2 text-xs text-text-secondary">
+                  <span>Reply cap</span>
+                  <input type="number" min={1} max={50} value={cap}
+                    onChange={(e) => handleCapChange(Number(e.target.value))}
+                    className="w-14 rounded border border-border bg-background px-1.5 py-1 text-xs text-foreground" />
+                  <span className="text-text-subtle">turns/msg</span>
+                </label>
+              )}
+              {rosterError && <p className="px-3 py-1 text-xs text-destructive">{rosterError}</p>}
+              <GroupMemberRoster
+                members={roster} liveStatus={liveStatus} typing={typing} busy={rosterBusy}
+                onAdd={() => setEditing({ member: null })} onEdit={(m) => setEditing({ member: m })} onRemove={handleRemoveMember}
+              />
+            </div>
+          </div>
+        )
+      )}
+
+      {editing && (
+        <GroupMemberEditDialog
+          key={editing.member?.id ?? "add"}
+          open
+          member={editing.member}
+          projectName={projectName}
+          onSubmit={handleSubmitMember}
+          onClose={() => setEditing(null)}
+        />
       )}
 
       <GroupFullTranscriptView groupId={groupId} message={transcriptMsg} onClose={() => setTranscriptMsg(null)} />

package/src/web/components/group-chat/group-create-dialog.tsx

@@ -35,6 +35,7 @@ export function GroupCreateDialog({
 }: GroupCreateDialogProps) {
   const isMobile = useIsMobile();
   const [name, setName] = useState("");
+  const [cap, setCap] = useState(10); // reply-burst cap (max AI turns per message)
   const [leaderName, setLeaderName] = useState("Leader");
   const [leaderPersona, setLeaderPersona] = useState("");
   const [leaderModel, setLeaderModel] = useState<string | null>(null);
@@ -43,7 +44,7 @@ export function GroupCreateDialog({
   const [error, setError] = useState<string | null>(null);
 
   const reset = useCallback(() => {
-    setName(""); setLeaderName("Leader"); setLeaderPersona(""); setLeaderModel(null);
+    setName(""); setCap(10); setLeaderName("Leader"); setLeaderPersona(""); setLeaderModel(null);
     setMembers([newMember()]); setError(null); setSubmitting(false);
   }, []);
 
@@ -79,14 +80,14 @@ export function GroupCreateDialog({
     setSubmitting(true);
     setError(null);
     try {
-      const group = await createGroup({ projectName, projectPath, name: gName, members: roster });
+      const group = await createGroup({ projectName, projectPath, name: gName, maxTurns: cap, members: roster });
       onCreated(group);
       close();
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to create group");
       setSubmitting(false);
     }
-  }, [name, leaderName, leaderPersona, leaderModel, members, projectName, projectPath, onCreated, close]);
+  }, [name, cap, leaderName, leaderPersona, leaderModel, members, projectName, projectPath, onCreated, close]);
 
   const inputCls =
     "w-full min-h-[40px] rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-text-subtle focus:outline-none focus:ring-1 focus:ring-primary";
@@ -99,6 +100,12 @@ export function GroupCreateDialog({
           placeholder="e.g. Design Review" autoFocus />
       </div>
 
+      <div>
+        <label className="mb-1 block text-xs font-medium text-text-secondary">Reply cap (max AI turns per message, 1–50)</label>
+        <input type="number" min={1} max={50} className={inputCls} value={cap}
+          onChange={(e) => setCap(Math.max(1, Math.min(50, Number(e.target.value) || 1)))} />
+      </div>
+
       <div className="rounded-lg border border-border p-3">
         <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-primary">Leader</p>
         <div className="flex flex-col gap-2">

package/src/web/components/group-chat/group-full-transcript-view.tsx

@@ -3,7 +3,8 @@ import { Loader2 } from "lucide-react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { getTranscript } from "@/lib/api-group-chat";
+import { getTranscript, type TranscriptResult } from "@/lib/api-group-chat";
+import { GroupTranscriptMessages } from "./group-transcript-messages";
 import type { GroupMessage } from "../../../types/group-chat";
 
 interface GroupFullTranscriptViewProps {
@@ -16,7 +17,7 @@ interface GroupFullTranscriptViewProps {
  *  Adaptive: centered dialog on desktop, bottom sheet on mobile. */
 export function GroupFullTranscriptView({ groupId, message, onClose }: GroupFullTranscriptViewProps) {
   const isMobile = useIsMobile();
-  const [content, setContent] = useState<string | null>(null);
+  const [data, setData] = useState<TranscriptResult | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -25,11 +26,11 @@ export function GroupFullTranscriptView({ groupId, message, onClose }: GroupFull
   useEffect(() => {
     if (!message || !sessionRef) return;
     let cancelled = false;
-    setContent(null);
+    setData(null);
     setError(null);
     setLoading(true);
     getTranscript(groupId, sessionRef)
-      .then((res) => { if (!cancelled) setContent(res.content); })
+      .then((res) => { if (!cancelled) setData(res); })
       .catch((e) => { if (!cancelled) setError(e instanceof Error ? e.message : "Failed to load transcript"); })
       .finally(() => { if (!cancelled) setLoading(false); });
     return () => { cancelled = true; };
@@ -55,10 +56,10 @@ export function GroupFullTranscriptView({ groupId, message, onClose }: GroupFull
           )}
         </div>
       )}
-      {!loading && !error && content != null && (
-        <pre className="whitespace-pre-wrap break-words rounded-md bg-surface-elevated p-3 text-xs leading-relaxed text-text-secondary">
-          {content}
-        </pre>
+      {!loading && !error && data != null && (
+        <div className="px-1 py-1">
+          <GroupTranscriptMessages messages={data.messages} config={data.config} />
+        </div>
       )}
     </div>
   );

package/src/web/components/group-chat/group-member-edit-dialog.tsx

@@ -0,0 +1,108 @@
+import { useState, useCallback } from "react";
+import { Loader2 } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ModelSelector } from "@/components/chat/model-selector";
+import type { GroupMember, MemberRole } from "../../../types/group-chat";
+
+export interface MemberFormValues {
+  name: string;
+  persona: string | null;
+  model: string | null;
+  role: MemberRole;
+}
+
+interface Props {
+  open: boolean;
+  /** Editing an existing member, or null when adding a new one. */
+  member: GroupMember | null;
+  projectName: string;
+  providerId?: string;
+  onSubmit: (values: MemberFormValues) => Promise<void>;
+  onClose: () => void;
+}
+
+const inputCls =
+  "w-full min-h-[40px] rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-text-subtle focus:outline-none focus:ring-1 focus:ring-primary";
+
+export function GroupMemberEditDialog({ open, member, projectName, providerId = "claude", onSubmit, onClose }: Props) {
+  const isMobile = useIsMobile();
+  const [name, setName] = useState(member?.name ?? "");
+  const [persona, setPersona] = useState(member?.persona ?? "");
+  const [model, setModel] = useState<string | null>(member?.model ?? null);
+  const [isLeader, setIsLeader] = useState(member?.role === "leader");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = useCallback(async () => {
+    const n = name.trim();
+    if (!n) { setError("Name is required"); return; }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await onSubmit({ name: n, persona: persona.trim() || null, model, role: isLeader ? "leader" : "member" });
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to save member");
+      setSubmitting(false);
+    }
+  }, [name, persona, model, isLeader, onSubmit, onClose]);
+
+  const alreadyLeader = member?.role === "leader";
+
+  const form = (
+    <div className="flex flex-col gap-3 px-1 py-1">
+      <input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder="Member name" autoFocus />
+      <input className={inputCls} value={persona} onChange={(e) => setPersona(e.target.value)} placeholder="Persona (optional)" />
+      <ModelSelector value={model} onChange={setModel} projectName={projectName} providerId={providerId} />
+      <label className={cnLeader(alreadyLeader)}>
+        <input
+          type="checkbox"
+          className="size-4 accent-[var(--color-primary)]"
+          checked={isLeader}
+          disabled={alreadyLeader}
+          onChange={(e) => setIsLeader(e.target.checked)}
+        />
+        <span>{alreadyLeader ? "Leader (reassign from another member)" : "Set as leader"}</span>
+      </label>
+      {error && <p className="text-xs text-destructive">{error}</p>}
+      <div className="flex justify-end gap-2 pt-1">
+        <Button variant="outline" onClick={onClose} disabled={submitting}>Cancel</Button>
+        <Button onClick={handleSubmit} disabled={submitting}>
+          {submitting && <Loader2 className="mr-1.5 size-4 animate-spin" />}
+          {member ? "Save" : "Add member"}
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (!open) return null;
+  const title = member ? "Edit member" : "Add member";
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onClose} className="flex max-h-[90vh] flex-col">
+        <div className="flex min-h-0 flex-col px-4 pb-2">
+          <h2 className="mb-2 text-base font-semibold text-foreground">{title}</h2>
+          {form}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="flex flex-col sm:max-w-md">
+        <DialogHeader><DialogTitle>{title}</DialogTitle></DialogHeader>
+        {form}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** Label styling for the leader checkbox row (dimmed when already leader). */
+function cnLeader(disabled: boolean): string {
+  return `flex items-center gap-2 text-sm text-text-secondary ${disabled ? "opacity-60" : ""}`;
+}