@tangle-network/ui 11.51.11 → 11.51.13

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 11.51.13
+
+### Patch Changes
+
+- 919beef: The user's turn in `UserMessage` and `ChatMessage` is an indigo tint (`bg-primary/15`, foreground text) instead of the inverted foreground bubble, which rendered near-white in dark mode beside dark transcripts (run-page panel, 2026-11-04).
+
+## 11.51.12
+
+### Patch Changes
+
+- e5f85bd: Preserve sequence zero when a named native stream reconnects; omit the cursor before any event arrives.
+
 ## 11.51.11
 
 - Keep tool-row actions and navigation reachable after a hover preview. HoverCard uses its anchor for placement, preserves keyboard inspection, and dismisses previews when a nested control commits an action. Touch actions do not become hover intent.

package/dist/chat/chat-message.js

@@ -32,7 +32,7 @@ function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, classNa
 				children: formatUtcTime(timestamp)
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: cn("min-w-0 max-w-[85%] space-y-1", fromViewer ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background" : fromOtherPerson ? "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-foreground" : isAssistant ? "text-foreground" : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"),
+			className: cn("min-w-0 max-w-[85%] space-y-1", fromViewer ? "rounded-[var(--radius-lg)] bg-primary/15 px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-foreground" : fromOtherPerson ? "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-foreground" : isAssistant ? "text-foreground" : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"),
 			children: [isUser ? /* @__PURE__ */ jsx("div", {
 				className: cn("whitespace-pre-wrap", TRANSCRIPT_TEXT),
 				children: content

package/dist/chat/user-message.js

@@ -61,7 +61,7 @@ function UserBubble({ text, timestamp, actions, lines }) {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "group flex min-w-0 max-w-[78%] flex-col items-end gap-2",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background",
+				className: "relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground",
 				children: [timestamp ? /* @__PURE__ */ jsx("span", {
 					"data-user-message-time": "",
 					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-sm text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",

package/dist/hooks/use-event-stream.d.ts

@@ -12,4 +12,4 @@ export interface EventStreamHandlers {
   onLiveChange?: (live: boolean) => void;
 }
 /** Producer-owned named events; host transports keep their authenticated reconnect lifecycle. */
-export declare function useEventStream(url: string | undefined, handlers: EventStreamHandlers): void;
+export declare function useEventStream(url: string | (() => string) | undefined, handlers: EventStreamHandlers): void;

package/dist/hooks/use-event-stream.js

@@ -8,7 +8,7 @@ function openNativeStream(url, handlers) {
 	const open = () => {
 		handlers.onConnecting?.(attempt);
 		const target = new URL(typeof url === "function" ? url() : url, globalThis.location?.href), after = handlers.after?.();
-		if (after !== void 0 && after > 0) target.searchParams.set("after", String(after));
+		if (after !== void 0 && after >= 0) target.searchParams.set("after", String(after));
 		let connection;
 		const live = (value) => {
 			if (!stopped && (!connection || source === connection)) handlers.onLiveChange?.(value);
@@ -56,7 +56,7 @@ function useEventStream(url, handlers) {
 		const connection = openNativeStream(url, {
 			opener: handlers.opener,
 			events: Object.fromEntries(Object.keys(handlers.events).map((name) => [name, (event) => latest.current.events[name]?.(event)])),
-			after: () => latest.current.after?.() ?? 0,
+			after: () => latest.current.after?.() ?? -1,
 			onStart: () => latest.current.onStart?.(),
 			onLiveChange: (live) => latest.current.onLiveChange?.(live),
 			terminalEvent: "end"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.11",
+  "version": "11.51.13",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/chat-message.tsx

@@ -95,7 +95,7 @@ export function ChatMessage({
         className={cn(
           "min-w-0 max-w-[85%] space-y-1",
           fromViewer
-            ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"
+            ? "rounded-[var(--radius-lg)] bg-primary/15 px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-foreground"
             : fromOtherPerson
               ? "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-foreground"
               : isAssistant

package/src/chat/message-author.test.tsx

@@ -23,12 +23,12 @@ const segmentedParts: SessionPart[] = [
 describe("a transcript without authors", () => {
 
   it("renders UserMessage actions and application notes as before", () => {
-    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
-    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div>"`)
+    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
+    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div>"`)
   })
 
   it("renders UserMessage as before", () => {
-    expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div>"`)
+    expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div>"`)
   })
 
 })
@@ -92,7 +92,7 @@ describe("UserMessage with an author", () => {
     const { container } = render(<UserMessage content="Did you give a forwarding address?" author={attorney} viewerId={client.id} />)
     expect(container.firstElementChild?.className).toContain("justify-start")
     expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-card")
-    expect(bubbleOf("Did you give a forwarding address?").className).not.toContain("bg-foreground")
+    expect(bubbleOf("Did you give a forwarding address?").className).not.toContain("bg-primary/15")
     expect(screen.getByText("Jane Doe")).toBeInTheDocument()
     expect(screen.getByText("Attorney")).toBeInTheDocument()
   })
@@ -148,7 +148,7 @@ describe("AgentTimeline with three participants", () => {
 
   it("sets the client's own words apart from the attorney's on the client's screen", () => {
     render(<AgentTimeline items={thread} viewerId={client.id} />)
-    expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-foreground")
+    expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-primary/15")
     expect(screen.queryByText("Maria Lopez")).not.toBeInTheDocument()
     expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-card")
     expect(screen.getByText("Jane Doe")).toBeInTheDocument()
@@ -156,7 +156,7 @@ describe("AgentTimeline with three participants", () => {
 
   it("mirrors the thread on the attorney's screen", () => {
     render(<AgentTimeline items={thread} viewerId={attorney.id} />)
-    expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-foreground")
+    expect(bubbleOf("Did you give a forwarding address?").className).toContain("bg-primary/15")
     expect(bubbleOf("My landlord kept my deposit.").className).toContain("bg-card")
     expect(screen.getByText("Maria Lopez")).toBeInTheDocument()
     expect(screen.queryByText("Jane Doe")).not.toBeInTheDocument()

package/src/chat/speaker.stories.tsx

@@ -12,7 +12,7 @@ type Part =
 function Turn({ parts, live = false }: { parts: Part[]; live?: boolean }) {
   return (
     <div className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6">
-      <p className={`ml-auto w-fit max-w-[78%] rounded-2xl bg-foreground px-4 py-3 text-background ${TRANSCRIPT_TEXT}`}>
+      <p className={`ml-auto w-fit max-w-[78%] rounded-2xl bg-primary/15 px-4 py-3 text-foreground ${TRANSCRIPT_TEXT}`}>
         @writer @research-lead plan the launch announcement for the roster feature.
       </p>
       {partitionBySpeaker(parts).map(({ speaker, parts: own }) => (

package/src/chat/synthetic-text.test.tsx

@@ -38,7 +38,7 @@ describe("user text boundaries", () => {
 
   it("preserves a single joined bubble when no application note is present", () => {
     const { container } = render(<UserMessage parts={mixed.slice(0, 2)} />);
-    expect(container.querySelectorAll(".bg-foreground.text-background")).toHaveLength(1);
+    expect(container.querySelectorAll(".bg-primary\\/15")).toHaveLength(1);
     expect(container.querySelector(".whitespace-pre-wrap")?.textContent).toBe("First\nSecond");
     expect(screen.queryByRole("note")).not.toBeInTheDocument();
   });
@@ -61,7 +61,7 @@ describe("user text boundaries", () => {
     const { container } = render(<UserMessage parts={[mixed[2]]} actions={<button type="button">Inspect receipt</button>} />);
     expect(screen.getByRole("note")).toHaveTextContent("Receipt");
     expect(screen.getByRole("button", { name: "Inspect receipt" })).toBeInTheDocument();
-    expect(container.querySelector(".bg-foreground")).toBeNull();
+    expect(container.querySelector(".bg-primary\\/15")).toBeNull();
   });
 
   it("retains direct-content timestamps", () => {

package/src/chat/user-message.tsx

@@ -96,7 +96,7 @@ function UserBubble({ text, timestamp, actions, lines }: {
   return (
     <div className="flex justify-end">
       <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
-        <div className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background">
+        <div className="relative w-full min-w-0 rounded-2xl bg-primary/15 px-4 py-3 text-foreground">
           {timestamp ? (
             <span
               data-user-message-time=""

package/src/hooks/use-event-stream.ts

@@ -25,7 +25,7 @@ export function openNativeStream(url: string | (() => string), handlers: NativeP
   const open = () => {
     handlers.onConnecting?.(attempt)
     const target = new URL(typeof url === 'function' ? url() : url, globalThis.location?.href), after = handlers.after?.()
-    if (after !== undefined && after > 0) target.searchParams.set('after', String(after))
+    if (after !== undefined && after >= 0) target.searchParams.set('after', String(after))
     let connection: EventStreamSource
     const live = (value: boolean) => { if (!stopped && (!connection || source === connection)) handlers.onLiveChange?.(value) }
     connection = handlers.opener ? handlers.opener(target.toString(), live) : new EventSource(target.toString())
@@ -52,7 +52,7 @@ export function openNativeStream(url: string | (() => string), handlers: NativeP
 }
 
 /** Producer-owned named events; host transports keep their authenticated reconnect lifecycle. */
-export function useEventStream(url: string | undefined, handlers: EventStreamHandlers): void {
+export function useEventStream(url: string | (() => string) | undefined, handlers: EventStreamHandlers): void {
   const latest = useRef(handlers)
   latest.current = handlers
   const names = Object.keys(handlers.events).sort().join(',')
@@ -61,7 +61,7 @@ export function useEventStream(url: string | undefined, handlers: EventStreamHan
     const current: EventStreamHandlers = {
       opener: handlers.opener,
       events: Object.fromEntries(Object.keys(handlers.events).map(name => [name, (event: MessageEvent<string>) => latest.current.events[name]?.(event)])),
-      after: () => latest.current.after?.() ?? 0,
+      after: () => latest.current.after?.() ?? -1,
       onStart: () => latest.current.onStart?.(),
       onLiveChange: live => latest.current.onLiveChange?.(live),
     }