@tangle-network/ui 11.33.0 → 11.34.0

package/src/markdown/markdown-table.test.tsx

@@ -45,6 +45,15 @@ describe("Markdown tables", () => {
     expect(document.body.innerHTML).not.toContain("text-xs");
   });
 
+  it("contains its screen-reader status line, so a table deep in a scrolling panel cannot stretch the page", () => {
+    render(<Markdown>{TABLE}</Markdown>);
+    const status = screen.getByRole("status");
+    expect(status.className).toContain("sr-only");
+    // The status is absolutely positioned; the card it sits in must be its containing block.
+    const card = status.closest(".not-prose") as HTMLElement;
+    expect(card.className.split(" ")).toEqual(expect.arrayContaining(["relative", "overflow-hidden"]));
+  });
+
   it("copies the table as CSV with quoting and formula-safe cells", async () => {
     const writeText = vi.fn().mockResolvedValue(undefined);
     Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });

package/src/markdown/markdown-table.tsx

@@ -138,7 +138,11 @@ export function MarkdownTable({ node, className, children, ...props }: Component
     return { csv: tableCsv([...header, ...body]), kinds: columnKinds(body), rowCount: body.length };
   }, [node]);
   return (
-    <div className="not-prose my-4 overflow-hidden rounded-lg border border-border bg-card">
+    // `relative` makes the card the containing block of the copy control's
+    // screen-reader status line. Without it that absolutely positioned line
+    // resolves against the nearest positioned ancestor, often the page, and a
+    // table far down a scrolling panel stretches the page past the viewport.
+    <div className="not-prose relative my-4 overflow-hidden rounded-lg border border-border bg-card">
       <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-1">
         <span className="text-sm text-muted-foreground">{rowCount === 1 ? "1 row" : `${rowCount} rows`}</span>
         <CopyCsvButton csv={csv} />

package/src/run/inline-thinking-item.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type { ReasoningPart } from "../types/parts";
+import { InlineThinkingItem } from "./inline-thinking-item";
+
+const TEXT = "**Ensuring workspace configuration** I need to be cautious because the saved file is not verifiable.";
+
+function part(active: boolean): ReasoningPart {
+  return { type: "reasoning", text: TEXT, time: active ? { start: Date.now() } : { start: 0, end: 4_000 } };
+}
+
+describe("InlineThinkingItem", () => {
+  it("previews the reasoning as plain text, never raw markdown marks", () => {
+    const { container } = render(<InlineThinkingItem part={part(false)} />);
+    expect(container.textContent).toContain("Ensuring workspace configuration I need to be cautious");
+    expect(container.textContent).not.toContain("**");
+  });
+
+  it("opens while the model thinks, by default", () => {
+    render(<InlineThinkingItem part={part(true)} />);
+    expect(screen.getByRole("button", { expanded: true })).toBeInTheDocument();
+  });
+
+  it("stays closed while the model thinks when the product keeps deliberation out of view", () => {
+    render(<InlineThinkingItem part={part(true)} openWhileActive={false} />);
+    expect(screen.getByRole("button", { expanded: false })).toBeInTheDocument();
+    expect(screen.getByText("Thinking…")).toBeInTheDocument();
+  });
+});

package/src/run/inline-thinking-item.tsx

@@ -1,6 +1,6 @@
 import { memo, useEffect, useRef, useState } from "react";
 import { Brain } from "lucide-react";
-import { truncateText } from "../utils/format";
+import { plainTextFromMarkdown, truncateText } from "../utils/format";
 import type { ReasoningPart } from "../types/parts";
 import { Markdown } from "../markdown/markdown";
 import { TextShimmer } from "../primitives/text-shimmer";
@@ -11,6 +11,12 @@ export interface InlineThinkingItemProps {
   part: ReasoningPart;
   defaultOpen?: boolean;
   autoCollapse?: boolean;
+  /**
+   * Open the row while the model is still thinking. A product that keeps
+   * deliberation out of the reader's way passes false: the row stays as
+   * `defaultOpen` left it, with its one-line preview, until the reader opens it.
+   */
+  openWhileActive?: boolean;
   className?: string;
   contentClassName?: string;
 }
@@ -20,6 +26,7 @@ export const InlineThinkingItem = memo(
     part,
     defaultOpen = false,
     autoCollapse = true,
+    openWhileActive = true,
     className,
     contentClassName,
   }: InlineThinkingItemProps) => {
@@ -31,12 +38,12 @@ export const InlineThinkingItem = memo(
     const durationMs =
       startTime != null && endTime != null ? endTime - startTime : undefined;
     const isActive = startTime != null && endTime == null;
-    const preview = part.text ? truncateText(part.text, 120) : undefined;
+    const preview = part.text ? truncateText(plainTextFromMarkdown(part.text), 120) : undefined;
 
     useEffect(() => {
       if (isActive) {
         autoCollapsedRef.current = false;
-        setOpen(true);
+        if (openWhileActive) setOpen(true);
         return;
       }
 
@@ -48,7 +55,7 @@ export const InlineThinkingItem = memo(
 
         return () => window.clearTimeout(timer);
       }
-    }, [autoCollapse, durationMs, isActive]);
+    }, [autoCollapse, durationMs, isActive, openWhileActive]);
 
     return (
       <RunRowShell

package/src/utils/format.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { formatBytes, formatUptime } from "./format";
+import { formatBytes, formatUptime, plainTextFromMarkdown } from "./format";
 
 describe("formatUptime", () => {
   it("renders seconds for short durations", () => {
@@ -41,3 +41,18 @@ describe("formatBytes", () => {
     expect(formatBytes(-1)).toBe("—");
   });
 });
+
+describe("plainTextFromMarkdown", () => {
+  it("drops emphasis, headings, list markers, code marks and link syntax", () => {
+    expect(plainTextFromMarkdown("**Ensuring workspace configuration** I need to check")).toBe("Ensuring workspace configuration I need to check");
+    expect(plainTextFromMarkdown("## Plan\n- item one\n- *soft* point")).toBe("Plan\nitem one\nsoft point");
+    expect(plainTextFromMarkdown("see [docs](https://example.com) and _this_")).toBe("see docs and this");
+    expect(plainTextFromMarkdown("**bold** and __also__ ~~gone~~")).toBe("bold and also gone");
+    expect(plainTextFromMarkdown("1. First\n2) Second")).toBe("First\nSecond");
+  });
+
+  it("keeps characters that are not markdown marks", () => {
+    expect(plainTextFromMarkdown("read `src/a_b.ts` and snake_case_name")).toBe("read src/a_b.ts and snake_case_name");
+    expect(plainTextFromMarkdown("2 * 3 * 4 = 24")).toBe("2 * 3 * 4 = 24");
+  });
+});

package/src/utils/format.ts

@@ -8,6 +8,23 @@ export function formatDuration(ms: number): string {
   return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
 }
 
+/**
+ * Markdown read as plain text, for a one-line preview: code fences, emphasis,
+ * headings, list and quote markers, and link syntax are removed, so a preview
+ * never shows `**` or `#`. Underscores inside words (`snake_case`) are kept.
+ */
+export function plainTextFromMarkdown(text: string): string {
+  return text
+    .replace(/```[^\n]*\n?([\s\S]*?)```/g, "$1")
+    .replace(/`([^`]*)`/g, "$1")
+    .replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/^[ \t]{0,3}(?:#{1,6}[ \t]+|>[ \t]?|[-*+][ \t]+|\d+[.)][ \t]+)/gm, "")
+    .replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "$2")
+    .replace(/(^|[^\w*])\*(?=\S)([^*\n]*?\S)\*(?![\w*])/g, "$1$2")
+    .replace(/(^|[^\w])_(?=\S)([^_\n]*?\S)_(?!\w)/g, "$1$2")
+    .replace(/~~(?=\S)([\s\S]*?\S)~~/g, "$1");
+}
+
 /** Truncate text to `max` characters, appending "..." if truncated. */
 export function truncateText(text: string, max: number): string {
   const cleaned = text.replace(/\s+/g, " ").trim();

package/src/utils/index.ts

@@ -1,5 +1,5 @@
 export { copyText } from './copy-text';
-export { formatBytes, formatDuration, formatUptime, truncateText } from './format';
+export { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from './format';
 export { timeAgo } from './time-ago';
 export {
   getToolCategory,