feat(web): respect newlines + render split-marker bubbles in chat-screen

- Pull in remark-breaks so single newlines in markdown become <br>
  in the rendered bubble. Without it, IM-style replies (single \n
  separators between thoughts) collapsed to one paragraph in the
  web UI and looked off vs how the IM channels render them.
- Render the on-the-wire <|split|> SplitMessageMarker into separate
  bubbles client-side so web matches the IM dispatcher's behavior.
  The marker constant is colocated in chat-screen.tsx with a doc
  comment pointing at internal/channels/base.go for the source of
  truth.
- Admin /chats page: add loading + refresh affordances (Loader2 +
  RefreshCw), small UX polish on the listing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: idoubi

web/package.json

@@ -19,6 +19,7 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-markdown": "^10.1.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "shadcn": "^4.1.0",
     "tailwind-merge": "^3.5.0",

web/pnpm-lock.yaml

@@ -1,13 +1,15 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   MessagesSquare,
   ChevronLeft,
   ChevronRight,
   Bot,
   User as UserIcon,
   ExternalLink,
+  Loader2,
+  RefreshCw,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -27,26 +29,34 @@ const PAGE_SIZE = 30;
 export default function AdminChatsPage() {
   const [sessions, setSessions] = useState<AdminChatSessionEntry[]>([]);
   const [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [page, setPage] = useState(1);
 
-  useEffect(() => {
-    let aborted = false;
-    (async () => {
-      try {
-        const list = await adminListChats();
-        if (aborted) return;
-        setSessions(list);
-        setError("");
-      } catch (e) {
-        if (aborted) return;
-        setError(e instanceof Error ? e.message : "Failed to load chats");
-      }
-    })();
-    return () => {
-      aborted = true;
-    };
+  // load is shared by the initial mount effect and the refresh button.
+  // The mount path passes initial=true so it owns the full-page spinner
+  // (sessions still empty); manual refreshes use the smaller in-button
+  // spinner instead so the existing rows stay visible while the fetch
+  // is in flight.
+  const load = useCallback(async (initial: boolean) => {
+    if (initial) setLoading(true);
+    else setRefreshing(true);
+    try {
+      const list = await adminListChats();
+      setSessions(list);
+      setError("");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load chats");
+    } finally {
+      if (initial) setLoading(false);
+      else setRefreshing(false);
+    }
   }, []);
 
+  useEffect(() => {
+    void load(true);
+  }, [load]);
+
   // Newest first — backend doesn't guarantee order across (user, agent)
   // pairs because it concatenates per-agent lists.
   const sorted = useMemo(
@@ -62,13 +72,23 @@ export default function AdminChatsPage() {
 
   return (
     <div className="p-6 space-y-6 max-w-5xl mx-auto">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between gap-4">
         <div>
           <h2 className="text-2xl font-semibold tracking-tight">Chats</h2>
           <p className="text-sm text-muted-foreground mt-1">
             All conversations across every agent on the platform.
           </p>
         </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => void load(false)}
+          disabled={loading || refreshing}
+          title="Refresh chats"
+        >
+          <RefreshCw className={`h-4 w-4 mr-2 ${refreshing ? "animate-spin" : ""}`} />
+          Refresh
+        </Button>
       </div>
 
       {error && (
@@ -79,7 +99,14 @@ export default function AdminChatsPage() {
         </Card>
       )}
 
-      {sorted.length === 0 ? (
+      {loading ? (
+        <div className="rounded-lg border border-border bg-card">
+          <div className="flex flex-col items-center justify-center py-16">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            <p className="mt-3 text-xs text-muted-foreground/60">Loading chats…</p>
+          </div>
+        </div>
+      ) : sorted.length === 0 ? (
         <div className="rounded-lg border border-border bg-card">
           <div className="flex flex-col items-center justify-center py-16">
             <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 mb-4">

web/src/app/admin/chats/page.tsx

@@ -10,6 +10,7 @@ import { Bot, Send, Copy, Check, Pencil, Wrench, ChevronDown, ChevronRight, Down
 import Link from "next/link";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
+import remarkBreaks from "remark-breaks";
 import { ExternalAnchor } from "@/components/markdown-link";
 
 // react-markdown's default urlTransform strips any protocol not in the
@@ -116,7 +117,7 @@ function renderContentWithDataImages(
           );
         }
         return (
-          <ReactMarkdown key={i} remarkPlugins={[remarkGfm]} urlTransform={urlTransformFn} components={{ a: ExternalAnchor }}>
+          <ReactMarkdown key={i} remarkPlugins={[remarkGfm, remarkBreaks]} urlTransform={urlTransformFn} components={{ a: ExternalAnchor }}>
             {p.text}
           </ReactMarkdown>
         );
@@ -212,6 +213,23 @@ const CHAT_PROSE_CLASS =
   "prose-th:py-1 prose-th:px-2 prose-td:py-1 prose-td:px-2 " +
   "prose-hr:my-3";
 
+// Wire token the agent emits to request a multi-bubble reply — must
+// match channels.SplitMessageMarker in internal/channels/base.go. On
+// IM channels the dispatcher (manager.dispatchOutbound) splits the
+// outbound text on this marker into separate platform messages; the
+// web UI renders one bubble per split chunk so the experience matches.
+const SPLIT_MARKER = "<|split|>";
+
+// splitOnMarker breaks `s` on SPLIT_MARKER, trims each chunk, and
+// drops the empty ones. Used at render time so a streamed assistant
+// reply containing the marker becomes multiple bubbles without any
+// upstream content-event rewriting.
+function splitOnMarker(s: string): string[] {
+  if (!s.includes(SPLIT_MARKER)) return [s];
+  const parts = s.split(SPLIT_MARKER).map((p) => p.trim()).filter((p) => p.length > 0);
+  return parts.length > 0 ? parts : [s];
+}
+
 // Single-segment identity filenames that route to the agent's home dir
 // (not the workspace) — exclude from the "Your files" panel.
 const SYSTEM_FILES = new Set([
@@ -2030,6 +2048,28 @@ export function ChatScreen() {
                   }
                   continue;
                 }
+                // Agent bubbles may carry the `<|split|>` marker the
+                // LLM emits for multi-bubble output (mirrors IM channel
+                // behavior). Expand into one bubble per chunk so the
+                // marker never surfaces as literal text. Attach files /
+                // metadata only to the last chunk to match the IM
+                // dispatcher's "attach to last chunk" rule.
+                if (msg.role === "agent" && msg.content.includes(SPLIT_MARKER)) {
+                  const parts = splitOnMarker(msg.content);
+                  parts.forEach((part, idx) => {
+                    const isLast = idx === parts.length - 1;
+                    elements.push(
+                      renderRegularBubble({
+                        ...msg,
+                        id: `${msg.id}-s${idx}`,
+                        content: part,
+                        files: isLast ? msg.files : undefined,
+                        metadata: isLast ? msg.metadata : undefined,
+                      }),
+                    );
+                  });
+                  continue;
+                }
                 elements.push(renderRegularBubble(msg));
               }
               return elements;
@@ -2123,7 +2163,7 @@ export function ChatScreen() {
                             (attachedImages.get(msg.id)?.length ?? 0) > 0,
                             makeUrlTransform(selectedAgent, sessionId),
                           ) ?? (
-                            <ReactMarkdown remarkPlugins={[remarkGfm]} urlTransform={makeUrlTransform(selectedAgent, sessionId)} components={{ a: ExternalAnchor }}>
+                            <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} urlTransform={makeUrlTransform(selectedAgent, sessionId)} components={{ a: ExternalAnchor }}>
                               {msg.content}
                             </ReactMarkdown>
                           )}
@@ -2676,7 +2716,7 @@ function ToolCallGroup({ msg, surfacedSrcs, agentId, sessionId, nested = false,
         <div className="bg-muted rounded-2xl rounded-bl-md px-4 py-2.5">
           <div className={CHAT_PROSE_CLASS}>
             {renderContentWithDataImages(msg.content, surfacedSrcs, false, makeUrlTransform(agentId, sessionId)) ?? (
-              <ReactMarkdown remarkPlugins={[remarkGfm]} urlTransform={makeUrlTransform(agentId, sessionId)} components={{ a: ExternalAnchor }}>
+              <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} urlTransform={makeUrlTransform(agentId, sessionId)} components={{ a: ExternalAnchor }}>
                 {msg.content}
               </ReactMarkdown>
             )}