@saadnvd1/agent-os 0.3.481 → 0.3.482

package/app/globals.css

@@ -245,6 +245,13 @@ body {
   background: hsl(var(--background));
 }
 
+/* A conversation's rows stay in the page (so a selection can span them), and
+   the ones off screen skip layout and paint until they are near. */
+.chat-row {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 90px;
+}
+
 /* Streaming chat text ends in a blinking caret. */
 .streaming-cursor .prose > :last-child::after {
   content: "▍";

package/components/Chat/ChatPanel.tsx

@@ -1,8 +1,16 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { LegendList, type LegendListRef } from "@legendapp/list/react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ArrowDown, Loader2 } from "lucide-react";
+import type { ClipboardEvent } from "react";
 import { useChat } from "@/data/chat/useChat";
 import {
   groupTimeline,
@@ -42,6 +50,7 @@ import { SetupCard } from "./SetupCard";
 import { UserTurn } from "./EventRow";
 import { useViewport } from "@/hooks/useViewport";
 import { useChatCommands } from "./useChatCommands";
+import { copySelection } from "./copy-selection";
 import { arrivalKey, useStickToBottom } from "./stick-to-bottom";
 import {
   AssistantMessage,
@@ -139,8 +148,6 @@ function Timeline({
 }
 
 const blockKey = (b: TimelineBlock) => (b.type === "item" ? b.item.id : b.id);
-const blockType = (b: TimelineBlock) =>
-  b.type === "item" ? b.item.kind : b.type;
 
 // One block, re-rendered only when its items or the actions change: a long
 // conversation doesn't redraw every message for each streamed word.
@@ -173,6 +180,27 @@ const Block = memo(
     prev.actions === next.actions && sameBlock(prev.block, next.block)
 );
 
+// The conversation's rows in the page's flow, not a virtualized list: a
+// selection follows the DOM, and a list that recycles and re-orders its rows
+// breaks it (docs/decisions/2026-10-11-chat-timeline-in-flow.md).
+export function TimelineRows({
+  blocks,
+  actions,
+}: {
+  blocks: TimelineBlock[];
+  actions: ItemActions;
+}) {
+  return blocks.map((b) => (
+    <div
+      key={blockKey(b)}
+      data-block={blockKey(b)}
+      className="chat-row mx-auto w-full max-w-3xl px-4 pb-4"
+    >
+      <Block block={b} actions={actions} />
+    </div>
+  ));
+}
+
 export function ChatPanel({
   sessionId,
   sessionName,
@@ -232,7 +260,7 @@ export function ChatPanel({
   } = useChat(sessionId, (text) => setPrefill({ text, at: Date.now() }));
   const { isMobile } = useViewport();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<LegendListRef>(null);
+  const listRef = useRef<HTMLDivElement>(null);
   // Follows new output only while the reader is at the end; sending brings
   // them back there, wherever they'd scrolled.
   const {
@@ -339,10 +367,34 @@ export function ChatPanel({
     () => ({ bodies: toolBodies, request: requestToolBody, connected }),
     [toolBodies, requestToolBody, connected]
   );
-  const blocksRef = useRef(blocks);
+  const itemsById = useMemo(
+    () => new Map(items.map((i) => [i.id, i])),
+    [items]
+  );
+  const itemsByIdRef = useRef(itemsById);
+  useEffect(() => {
+    itemsByIdRef.current = itemsById;
+  });
+  const onCopy = useCallback(
+    (e: ClipboardEvent<HTMLDivElement>) =>
+      copySelection(e, itemsByIdRef.current),
+    []
+  );
+  // Starts at the end; older pages load as the reader nears the top.
+  useLayoutEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [sessionId]);
+  const olderRef = useRef({ hasMore, loadingOlder, loadOlder });
   useEffect(() => {
-    blocksRef.current = blocks;
+    olderRef.current = { hasMore, loadingOlder, loadOlder };
   });
+  const onListScroll = useCallback(() => {
+    const el = listRef.current;
+    const o = olderRef.current;
+    if (el && o.hasMore && !o.loadingOlder && el.scrollTop < el.clientHeight)
+      o.loadOlder();
+  }, []);
   const find = useFind({
     search,
     items,
@@ -352,18 +404,13 @@ export function ChatPanel({
     rows: rowState,
     release,
     scrollToBlock: useCallback(async (key: string) => {
-      const index = blocksRef.current.findIndex((b) => blockKey(b) === key);
-      if (index !== -1)
-        await listRef.current?.scrollToIndex({
-          index,
-          viewPosition: 0.3,
-          animated: false,
-        });
-    }, []),
-    scroller: useCallback(() => {
-      const el = listRef.current?.getScrollableNode();
-      return el instanceof HTMLElement ? el : null;
+      // The row may only just have been added.
+      await new Promise((r) => requestAnimationFrame(r));
+      listRef.current
+        ?.querySelector(`[data-block="${CSS.escape(key)}"]`)
+        ?.scrollIntoView({ block: "center" });
     }, []),
+    scroller: useCallback(() => listRef.current, []),
   });
   const activeRef = useRef(active);
   useEffect(() => {
@@ -423,56 +470,39 @@ export function ChatPanel({
       <div ref={scrollRef} className="relative min-h-0 flex-1">
         <RowState.Provider value={rowState}>
           <ToolBodies.Provider value={bodies}>
-            <LegendList<TimelineBlock>
-              // A new conversation starts its list over, scrolled to the end.
+            <div
+              // A new conversation starts over, scrolled to the end.
               key={sessionId}
               ref={listRef}
-              data={blocks}
-              extraData={actions}
-              keyExtractor={blockKey}
-              getItemType={blockType}
-              renderItem={({ item }) => (
-                <div
-                  data-block={blockKey(item)}
-                  className="mx-auto w-full max-w-3xl px-4 pb-4"
-                >
-                  <Block block={item} actions={actions} />
-                </div>
-              )}
-              estimatedItemSize={90}
-              initialScrollAtEnd
-              // Older pages land above without moving what the reader sees.
-              maintainVisibleContentPosition
-              onStartReached={hasMore ? loadOlder : undefined}
-              onStartReachedThreshold={1}
-              style={{ height: "100%" }}
-              className="overscroll-y-contain"
-              ListHeaderComponent={
-                <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 pt-5 pb-4">
-                  {hasMore && (
-                    <div className="text-muted-foreground flex min-h-11 items-center justify-center text-xs">
-                      {loadingOlder ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <button
-                          type="button"
-                          onClick={loadOlder}
-                          className="hover:text-foreground min-h-11 px-3"
-                        >
-                          Show earlier messages
-                        </button>
-                      )}
-                    </div>
-                  )}
-                  <SetupCard sessionId={sessionId} />
-                  {blocks.length === 0 && !queue.length && (
-                    <p className="text-muted-foreground py-16 text-center text-sm">
-                      Ask anything to start.
-                    </p>
-                  )}
-                </div>
-              }
-            />
+              onScroll={onListScroll}
+              onCopy={onCopy}
+              className="h-full overflow-y-auto overscroll-y-contain"
+            >
+              <div className="mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 pt-5 pb-4">
+                {hasMore && (
+                  <div className="text-muted-foreground flex min-h-11 items-center justify-center text-xs">
+                    {loadingOlder ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <button
+                        type="button"
+                        onClick={loadOlder}
+                        className="hover:text-foreground min-h-11 px-3"
+                      >
+                        Show earlier messages
+                      </button>
+                    )}
+                  </div>
+                )}
+                <SetupCard sessionId={sessionId} />
+                {blocks.length === 0 && !queue.length && (
+                  <p className="text-muted-foreground py-16 text-center text-sm">
+                    Ask anything to start.
+                  </p>
+                )}
+              </div>
+              <TimelineRows blocks={blocks} actions={actions} />
+            </div>
           </ToolBodies.Provider>
         </RowState.Provider>
         {find.open && (

package/components/Chat/Code.tsx

@@ -119,7 +119,10 @@ export function CodeBlock({
   if (language === "mermaid") return <Mermaid code={code} />;
   return (
     <div className="bg-foreground/[0.04] not-prose my-3 overflow-hidden rounded-xl">
-      <div className="text-muted-foreground flex items-center justify-between pr-1 pl-3 font-mono text-[11px]">
+      <div
+        data-copy-skip
+        className="text-muted-foreground flex items-center justify-between pr-1 pl-3 font-mono text-[11px]"
+      >
         <span>{language || "text"}</span>
         <CopyButton text={code} label="Copy code" />
       </div>

package/components/Chat/Messages.tsx

@@ -34,12 +34,12 @@ export function UserMessage({
   return (
     <div className="group flex flex-col items-end gap-1">
       {item.from && (
-        <span className="label-mono text-muted-foreground">
+        <span data-copy-skip className="label-mono text-muted-foreground">
           from {item.from}
         </span>
       )}
       {item.images?.length ? (
-        <div className="flex flex-wrap justify-end gap-1.5">
+        <div data-copy-skip className="flex flex-wrap justify-end gap-1.5">
           {item.images.map((img, i) => (
             <ImageThumb
               key={i}

package/components/Chat/copy-selection.ts

@@ -0,0 +1,82 @@
+import type { ClipboardEvent } from "react";
+import type { ChatItem } from "@/lib/chat/events";
+import {
+  formatTranscript,
+  sourceText,
+  speakerOf,
+  type TranscriptPart,
+} from "@/lib/chat/copy-selection";
+
+// What isn't part of a message's words: buttons, times, and labels that
+// only the interface shows.
+const SKIP = "button, time, [aria-hidden='true'], [data-copy-skip]";
+
+// Range's own constants, which tests without a browser global don't have.
+const START_TO_START = 0;
+const END_TO_END = 2;
+
+const covers = (range: Range, el: Element) => {
+  const whole = el.ownerDocument.createRange();
+  whole.selectNodeContents(el);
+  return (
+    range.compareBoundaryPoints(START_TO_START, whole) <= 0 &&
+    range.compareBoundaryPoints(END_TO_END, whole) >= 0
+  );
+};
+
+// The part of a message inside the selection, as it reads on screen.
+function clippedText(range: Range, el: Element): string {
+  const doc = el.ownerDocument;
+  const whole = doc.createRange();
+  whole.selectNodeContents(el);
+  const part = range.cloneRange();
+  if (part.compareBoundaryPoints(START_TO_START, whole) < 0)
+    part.setStart(whole.startContainer, whole.startOffset);
+  if (part.compareBoundaryPoints(END_TO_END, whole) > 0)
+    part.setEnd(whole.endContainer, whole.endOffset);
+  const holder = doc.createElement("div");
+  holder.style.cssText =
+    "position:fixed;left:-9999px;top:0;width:600px;white-space:pre-wrap";
+  holder.append(part.cloneContents());
+  for (const skip of holder.querySelectorAll(SKIP)) skip.remove();
+  doc.body.append(holder);
+  const text = holder.innerText ?? holder.textContent ?? "";
+  holder.remove();
+  return text.replace(/\n{3,}/g, "\n\n");
+}
+
+/**
+ * Copy across several messages as a transcript: who said what, a blank line
+ * between. A selection inside one message is left to the browser, which
+ * already copies that cleanly.
+ */
+export function copySelection(
+  e: ClipboardEvent,
+  itemsById: ReadonlyMap<string, ChatItem>
+) {
+  const root = e.currentTarget as Element;
+  const sel = root.ownerDocument.getSelection();
+  if (!sel || sel.isCollapsed || !sel.rangeCount) return;
+  const ranges = Array.from({ length: sel.rangeCount }, (_, i) =>
+    sel.getRangeAt(i)
+  );
+  const parts: (TranscriptPart & { el: Element })[] = [];
+  for (const el of root.querySelectorAll("[data-item]")) {
+    const item = itemsById.get(el.getAttribute("data-item") ?? "");
+    const speaker = item && speakerOf(item);
+    if (!item || !speaker) continue;
+    const hit = ranges.filter((r) => r.intersectsNode(el));
+    if (!hit.length) continue;
+    const whole = hit.some((r) => covers(r, el));
+    parts.push({
+      el,
+      speaker,
+      text: whole
+        ? sourceText(item)
+        : hit.map((r) => clippedText(r, el)).join("\n"),
+    });
+  }
+  if (parts.length < 2) return;
+  e.clipboardData.setData("text/plain", formatTranscript(parts));
+  e.preventDefault();
+}

package/components/Chat/stick-to-bottom.test.ts

@@ -219,15 +219,75 @@ describe("stickToBottom", () => {
     expect(box.top).toBe(top);
   });
 
-  it("doesn't count a press inside the content as a scrollbar drag", () => {
+  it("doesn't count a click inside the content as a scrollbar drag", () => {
     const row = document.createElement("p");
     el.append(row);
     row.dispatchEvent(new window.Event("pointerdown", { bubbles: true }));
+    window.dispatchEvent(new window.Event("pointerup"));
+    clock += 300;
     box.height -= 300;
     el.scrollTop = box.top - 50; // moved by the page, not the reader
     expect(ctl.isStuck()).toBe(true);
   });
 
+  describe("while text is being selected", () => {
+    const text = () => {
+      const p = document.createElement("p");
+      p.textContent = "some words to select";
+      el.append(p);
+      return p;
+    };
+    const select = (node: Node) => {
+      const sel = document.getSelection()!;
+      sel.removeAllRanges();
+      const r = document.createRange();
+      r.selectNodeContents(node);
+      sel.addRange(r);
+    };
+    afterEach(() => document.getSelection()?.removeAllRanges());
+
+    it("doesn't pin under a drag in progress, and catches up when it ends", () => {
+      const p = text();
+      p.dispatchEvent(new window.Event("pointerdown", { bubbles: true }));
+      const top = box.top;
+      grow(300);
+      expect(box.top).toBe(top);
+      window.dispatchEvent(new window.Event("pointerup"));
+      expect(box.top).toBe(box.height - box.view);
+    });
+
+    it("doesn't pin under a standing selection, and catches up when it clears", () => {
+      select(text());
+      const top = box.top;
+      grow(300);
+      expect(box.top).toBe(top);
+      expect(ctl.isStuck()).toBe(true);
+      document.getSelection()!.removeAllRanges();
+      document.dispatchEvent(new window.Event("selectionchange"));
+      expect(box.top).toBe(box.height - box.view);
+    });
+
+    it("pins as usual for a selection elsewhere on the page", () => {
+      const outside = document.createElement("p");
+      outside.textContent = "composer text";
+      document.body.append(outside);
+      select(outside);
+      grow(300);
+      expect(box.top).toBe(box.height - box.view);
+      outside.remove();
+    });
+
+    it("lets go when the drag autoscrolls up", () => {
+      text().dispatchEvent(new window.Event("pointerdown", { bubbles: true }));
+      el.scrollTop -= 200;
+      expect(ctl.isStuck()).toBe(false);
+      window.dispatchEvent(new window.Event("pointerup"));
+      const top = box.top;
+      grow(300);
+      expect(box.top).toBe(top);
+    });
+  });
+
   it("stops counting scrolls as the reader's once the drag ends", () => {
     el.dispatchEvent(new window.Event("pointerdown"));
     window.dispatchEvent(new window.Event("pointerup"));
@@ -309,7 +369,7 @@ describe("useStickToBottom", () => {
   let hook: Hook;
   let el: HTMLElement;
   let box: { top: number; height: number; view: number };
-  let list: RefObject<{ getScrollableNode(): unknown } | null>;
+  let list: RefObject<HTMLElement | null>;
 
   function Probe(props: {
     id: string;
@@ -329,7 +389,7 @@ describe("useStickToBottom", () => {
   beforeEach(async () => {
     ({ el, box } = scroller());
     list = createRef();
-    (list as { current: unknown }).current = { getScrollableNode: () => el };
+    (list as { current: unknown }).current = el;
     root = createRoot(document.createElement("div"));
     await render("s1", "a:0");
   });
@@ -371,12 +431,12 @@ describe("useStickToBottom", () => {
     expect(box.top).toBe(box.height - box.view);
   });
 
-  it("binds once the list has mounted its scroller", async () => {
+  it("binds once the scroller has mounted", async () => {
     act(() => root.unmount());
     (list as { current: unknown }).current = null;
     root = createRoot(document.createElement("div"));
     await render("s1", "a:0");
-    (list as { current: unknown }).current = { getScrollableNode: () => el };
+    (list as { current: unknown }).current = el;
     await frame();
     scrollUp();
     expect(hook.stuck).toBe(false);

package/components/Chat/stick-to-bottom.ts

@@ -8,9 +8,14 @@
  * Content growing, rows expanding and images loading never let go, since only
  * the reader's own scrolling does. While they're away from the end, the text
  * under their eyes is held in place the way CSS scroll anchoring would (the
- * virtualized list turns that off, and Safari lacks it): the element at the
- * top of the view is remembered, and when a layout change moves it, the
- * scroll moves by the same amount.
+ * list turns that off, and Safari lacks it): the element at the top of the
+ * view is remembered, and when a layout change moves it, the scroll moves by
+ * the same amount.
+ *
+ * Nothing is pinned while the reader is selecting text in the conversation
+ * (a drag in progress, or a selection left standing): moving the view under a
+ * selection drags its end along or loses it. The catch-up happens once the
+ * selection is gone.
  */
 
 import {
@@ -81,6 +86,9 @@ export function stickToBottom(
   let touching = false;
   let touchY = 0;
   let dragging = false;
+  // A press inside the content: a text selection drag, or a tap.
+  let pressing = false;
+  let wasSelecting = false;
   let anchors: { node: Element; top: number }[] = [];
   const doc = el.ownerDocument;
   const win = doc.defaultView;
@@ -120,8 +128,18 @@ export function stickToBottom(
     }
     pickAnchors();
   };
+  const selecting = () => {
+    if (pressing) return true;
+    const sel = doc.getSelection?.();
+    if (!sel || sel.isCollapsed || !sel.rangeCount) return false;
+    return el.contains(sel.anchorNode) || el.contains(sel.focusNode);
+  };
   const pin = () => {
     if (!stuck) return holdAnchor();
+    if (selecting()) {
+      wasSelecting = true;
+      return;
+    }
     const end = el.scrollHeight - el.clientHeight;
     if (el.scrollTop < end) el.scrollTop = end;
     prevTop = el.scrollTop;
@@ -134,7 +152,7 @@ export function stickToBottom(
   };
 
   const onScroll = () => {
-    const byUser = touching || dragging || now() < intentUntil;
+    const byUser = touching || dragging || pressing || now() < intentUntil;
     set(nextStuck(stuck, { prevTop, metrics: el, byUser }));
     prevTop = el.scrollTop;
     pickAnchors();
@@ -165,11 +183,21 @@ export function stickToBottom(
   // Only a press on the container itself is its scrollbar.
   const onPointerDown = (e: PointerEvent) => {
     if (e.target === el) dragging = true;
+    else pressing = true;
   };
   const onPointerUp = () => {
-    if (!dragging) return;
+    const was = dragging || pressing;
     dragging = false;
+    pressing = false;
+    if (!was) return;
     intentUntil = now() + INTENT_MS;
+    catchUp();
+  };
+  // Following resumes the moment the selection that held it back is gone.
+  const catchUp = () => {
+    const live = selecting();
+    if (wasSelecting && !live && stuck) pin();
+    wasSelecting = live;
   };
 
   const passive = { passive: true } as const;
@@ -182,11 +210,12 @@ export function stickToBottom(
   el.addEventListener("keydown", onKeyDown);
   el.addEventListener("pointerdown", onPointerDown, passive);
   win?.addEventListener("pointerup", onPointerUp, passive);
+  win?.addEventListener("pointercancel", onPointerUp, passive);
+  doc.addEventListener("selectionchange", catchUp);
 
   // Content or the container changing size keeps a stuck reader at the end.
-  // The rows are watched too (the list's are three levels down, and come and
-  // go as it virtualizes), so a row growing is corrected before it's painted
-  // rather than a frame later, when the list catches up.
+  // The rows are watched too, so a row growing is corrected before it's
+  // painted rather than a frame later.
   const resize =
     typeof ResizeObserver === "undefined"
       ? null
@@ -196,7 +225,7 @@ export function stickToBottom(
         });
   function observeRows() {
     for (const row of el.querySelectorAll(
-      ":scope > *, :scope > * > *, :scope > * > * > *, :scope > * > * > * > *"
+      ":scope > *, :scope > * > *, :scope > * > * > *"
     ))
       resize?.observe(row);
   }
@@ -227,18 +256,20 @@ export function stickToBottom(
       el.removeEventListener("keydown", onKeyDown);
       el.removeEventListener("pointerdown", onPointerDown);
       win?.removeEventListener("pointerup", onPointerUp);
+      win?.removeEventListener("pointercancel", onPointerUp);
+      doc.removeEventListener("selectionchange", catchUp);
     },
   };
 }
 
 /**
- * The hook over `stickToBottom`, for a list that exposes its scroll
- * container (`key` re-binds when it's replaced); `latest` changes whenever
+ * The hook over `stickToBottom`, for a scroll container in a ref (`key`
+ * re-binds when it's replaced); `latest` changes whenever
  * something new arrives, which pins a stuck reader and marks it unread for
  * one who has scrolled away.
  */
 export function useStickToBottom(
-  list: RefObject<{ getScrollableNode(): unknown } | null>,
+  scroller: RefObject<HTMLElement | null>,
   key: unknown,
   latest: unknown
 ) {
@@ -249,10 +280,9 @@ export function useStickToBottom(
 
   useEffect(() => {
     let frame = 0;
-    // The list mounts its scroller a frame after it renders.
     const bind = () => {
-      const el = list.current?.getScrollableNode();
-      if (!(el instanceof HTMLElement)) {
+      const el = scroller.current;
+      if (!el) {
         frame = requestAnimationFrame(bind);
         return;
       }
@@ -267,7 +297,7 @@ export function useStickToBottom(
       ctl.current = null;
       setAway(null);
     };
-  }, [list, key]);
+  }, [scroller, key]);
 
   useEffect(() => {
     latestRef.current = latest;

package/components/Chat/timeline-selection.test.ts

@@ -0,0 +1,146 @@
+import "./composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ChatItem } from "@/lib/chat/events";
+import { groupTimeline } from "@/lib/chat/group";
+import { copySelection } from "./copy-selection";
+import { TimelineRows } from "./ChatPanel";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+const user = (id: string, text: string): ChatItem => ({
+  id,
+  kind: "user",
+  createdAt: 1,
+  text,
+  tagged: true,
+});
+const reply = (id: string, text: string, streaming = false): ChatItem => ({
+  id,
+  kind: "assistant",
+  createdAt: 2,
+  text,
+  streaming,
+});
+
+describe("the conversation's rows", () => {
+  let host: HTMLElement;
+  let root: Root;
+  const actions = () => ({ respond: vi.fn() }) as never;
+  const show = (items: ChatItem[], a = actions()) =>
+    act(() =>
+      root.render(
+        createElement(TimelineRows, {
+          blocks: groupTimeline(items),
+          actions: a,
+        })
+      )
+    );
+  const rows = () => [...host.querySelectorAll("[data-block]")];
+
+  beforeEach(() => {
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+    document.getSelection()?.removeAllRanges();
+  });
+
+  it("keeps a selection across messages through streaming updates", async () => {
+    const items = [
+      user("u1", "first"),
+      reply("a1", "second", true),
+      user("u2", "third"),
+    ];
+    await show(items);
+    const [r1, , r3] = rows();
+    const range = document.createRange();
+    range.setStart(r1, 0);
+    range.setEnd(r3, r3.childNodes.length);
+    document.getSelection()!.removeAllRanges();
+    document.getSelection()!.addRange(range);
+
+    await show([
+      items[0],
+      reply("a1", "second, and more words streamed in", true),
+      items[2],
+      reply("a2", "a new reply at the end", true),
+    ]);
+    await show(
+      [
+        items[0],
+        reply("a1", "second, and more words streamed in", false),
+        items[2],
+        reply("a2", "a new reply at the end, done", false),
+      ],
+      actions()
+    );
+
+    const after = rows();
+    expect(after).toHaveLength(4);
+    expect(after[0]).toBe(r1);
+    expect(after[2]).toBe(r3);
+    expect(r1.isConnected && r3.isConnected).toBe(true);
+    expect(after.map((r) => r.getAttribute("data-block"))).toEqual([
+      "u1",
+      "a1",
+      "u2",
+      "a2",
+    ]);
+    const sel = document.getSelection()!;
+    expect(sel.rangeCount).toBe(1);
+    expect(sel.isCollapsed).toBe(false);
+    expect(sel.getRangeAt(0).startContainer).toBe(r1);
+    expect(sel.getRangeAt(0).endContainer).toBe(r3);
+  });
+
+  describe("copying", () => {
+    const copy = (items: ChatItem[]) => {
+      const data: Record<string, string> = {};
+      const e = {
+        currentTarget: host,
+        clipboardData: { setData: (t: string, v: string) => (data[t] = v) },
+        preventDefault: vi.fn(),
+      };
+      copySelection(e as never, new Map(items.map((i) => [i.id, i])));
+      return { data, prevented: e.preventDefault.mock.calls.length > 0 };
+    };
+
+    it("gives speakers and blank lines across messages, from their source", async () => {
+      const items = [
+        user("u1", "fix `the` bug"),
+        reply("a1", "Done.\n\n- one\n- two"),
+        user("u2", "thanks"),
+      ];
+      await show(items);
+      const [r1, , r3] = rows();
+      const range = document.createRange();
+      range.selectNodeContents(host);
+      range.setStart(r1, 0);
+      range.setEnd(r3, r3.childNodes.length);
+      document.getSelection()!.addRange(range);
+      const { data, prevented } = copy(items);
+      expect(prevented).toBe(true);
+      expect(data["text/plain"]).toBe(
+        "User:\nfix `the` bug\n\nAssistant:\nDone.\n\n- one\n- two\n\nUser:\nthanks"
+      );
+    });
+
+    it("leaves a selection inside one message to the browser", async () => {
+      const items = [user("u1", "first"), reply("a1", "second words")];
+      await show(items);
+      const text = rows()[1].querySelector("p")!.firstChild!;
+      const range = document.createRange();
+      range.setStart(text, 1);
+      range.setEnd(text, 4);
+      document.getSelection()!.addRange(range);
+      expect(copy(items)).toEqual({ data: {}, prevented: false });
+    });
+  });
+});

package/lib/chat/copy-selection.ts

@@ -0,0 +1,58 @@
+import type { ChatItem } from "./events";
+import { eventParts, originOf } from "./origin";
+
+export interface TranscriptPart {
+  speaker: string;
+  text: string;
+}
+
+// Who a message is from when copied, or null for rows that aren't part of the
+// conversation itself (tools, turn markers, plans, approvals...).
+export function speakerOf(item: ChatItem): string | null {
+  switch (item.kind) {
+    case "user": {
+      const origin = originOf(item);
+      if (!origin) return "User";
+      return origin.kind === "decision" ? "Decision" : origin.label;
+    }
+    case "assistant":
+      return "Assistant";
+    case "error":
+      return "Error";
+    default:
+      return null;
+  }
+}
+
+// The whole message as written, for one a selection covers entirely.
+export function sourceText(item: ChatItem): string {
+  switch (item.kind) {
+    case "user": {
+      const origin = originOf(item);
+      if (!origin) return item.text;
+      const { body, decided } = eventParts(item, origin);
+      return [...decided, body].join("\n\n");
+    }
+    case "assistant":
+      return item.text;
+    case "error":
+      return item.message;
+    default:
+      return "";
+  }
+}
+
+// `Speaker:` then the text, a blank line between messages. Neighbours from
+// the same speaker (a reply split around its tools) read as one message.
+export function formatTranscript(parts: TranscriptPart[]): string {
+  const merged: TranscriptPart[] = [];
+  for (const p of parts) {
+    const text = p.text.trim();
+    if (!text) continue;
+    const last = merged.at(-1);
+    if (last && last.speaker === p.speaker)
+      last.text = `${last.text}\n\n${text}`;
+    else merged.push({ speaker: p.speaker, text });
+  }
+  return merged.map((p) => `${p.speaker}:\n${p.text}`).join("\n\n");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.481",
+  "version": "0.3.482",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"
@@ -83,7 +83,6 @@
     "@codemirror/language": "^6.12.3",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.41.0",
-    "@legendapp/list": "3.3.11",
     "@lezer/highlight": "^1.2.3",
     "@modelcontextprotocol/sdk": "^1.25.2",
     "@monaco-editor/react": "^4.7.0",