@hienlh/ppm 0.17.16 → 0.17.18

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" : ""}`;
+}

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/cloud-share-popover.tsx

@@ -22,9 +22,11 @@ interface TunnelStatus {
 
 interface Props {
   onClose: () => void;
+  /** "popover" = self-contained card (desktop rail); "sheet" = fills a bottom sheet on mobile. */
+  variant?: "popover" | "sheet";
 }
 
-export function CloudSharePopover({ onClose }: Props) {
+export function CloudSharePopover({ onClose, variant = "popover" }: Props) {
   const [cloud, setCloud] = useState<CloudStatus | null>(null);
   const [tunnel, setTunnel] = useState<TunnelStatus | null>(null);
   const [loading, setLoading] = useState(true);
@@ -184,7 +186,13 @@ export function CloudSharePopover({ onClose }: Props) {
   const shareUrl = tunnel?.url || cloud?.tunnel_url;
 
   return (
-    <div className="w-72 bg-background border border-border rounded-lg shadow-lg p-3 space-y-3">
+    <div
+      className={
+        variant === "sheet"
+          ? "w-full p-3 space-y-3"
+          : "w-72 bg-background border border-border rounded-lg shadow-lg p-3 space-y-3"
+      }
+    >
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1.5">

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