@tangle-network/ui 11.33.0 → 11.35.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/primitives/segmented-control.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { SegmentedControl, type SegmentedControlOption } from "./segmented-control"
+
+const meta: Meta = {
+  title: "Primitives/SegmentedControl",
+  parameters: { layout: "fullscreen" },
+}
+
+export default meta
+type Story = StoryObj
+
+const workTabs: SegmentedControlOption[] = [
+  { value: "today", label: "Today" },
+  { value: "messages", label: "Messages" },
+  { value: "tasks", label: "Tasks" },
+  { value: "operations", label: "Operations" },
+  { value: "payments", label: "Payments" },
+  { value: "approvals", label: "Approvals" },
+  { value: "activity", label: "Activity" },
+  { value: "people", label: "People" },
+]
+
+const fileSources: SegmentedControlOption[] = [
+  { value: "knowledge", label: "Knowledge" },
+  { value: "attachments", label: "Attachments" },
+  { value: "apps", label: "Apps & chats" },
+]
+
+function Controlled({
+  initial,
+  render,
+}: {
+  initial: string
+  render: (value: string, setValue: (value: string) => void) => React.ReactNode
+}) {
+  const [value, setValue] = React.useState(initial)
+  return <>{render(value, setValue)}</>
+}
+
+/**
+ * Eight section tabs on a 390 px phone, as a workspace header renders them:
+ * full width with the page's 16 px inline padding on the strip itself. Most
+ * tabs sit past the right edge, the selected one starts off screen, and the
+ * cut lands in the gap between two tabs, so only a chevron shows that the strip
+ * scrolls.
+ */
+export const OverflowingTabs: Story = {
+  render: () => (
+    <div className="w-full max-w-[390px] py-4">
+      <Controlled
+        initial="approvals"
+        render={(value, setValue) => (
+          <SegmentedControl
+            data-testid="overflow-tabs"
+            aria-label="Work"
+            variant="tabs"
+            value={value}
+            onValueChange={setValue}
+            options={workTabs}
+            className="w-full px-4"
+          />
+        )}
+      />
+    </div>
+  ),
+}
+
+/** A row control a host made scroll instead of wrap, beside a page title. */
+export const OverflowingRow: Story = {
+  render: () => (
+    <div className="flex w-full max-w-[390px] items-center gap-3 px-4 py-4">
+      <h2 className="shrink-0 text-lg font-semibold">Files</h2>
+      <Controlled
+        initial="knowledge"
+        render={(value, setValue) => (
+          <SegmentedControl
+            data-testid="overflow-row"
+            aria-label="File source"
+            value={value}
+            onValueChange={setValue}
+            options={fileSources}
+            className="min-w-0 flex-nowrap overflow-x-auto"
+          />
+        )}
+      />
+    </div>
+  ),
+}

package/src/primitives/segmented-control.test.tsx

@@ -361,13 +361,14 @@ describe("SegmentedControl tabs on a narrow strip", () => {
     Object.defineProperty(proto, key, { configurable: true, ...descriptor })
   }
   const isStrip = (el: Element) => el.getAttribute("role") === "radiogroup"
-  const index = (el: Element) => Array.from(el.parentElement?.children ?? []).indexOf(el)
+  // Options sit side by side; the edge chevrons take no room in the row.
+  const index = (el: Element) => Array.from(el.parentElement?.querySelectorAll(':scope > [role="radio"]') ?? []).indexOf(el)
 
   beforeEach(() => {
     define(HTMLElement.prototype, "offsetLeft", { get(this: HTMLElement) { return isStrip(this) ? 0 : index(this) * TAB } })
     define(HTMLElement.prototype, "offsetWidth", { get(this: HTMLElement) { return isStrip(this) ? STRIP : TAB } })
     define(Element.prototype, "clientWidth", { get(this: Element) { return isStrip(this) ? STRIP : TAB } })
-    define(Element.prototype, "scrollWidth", { get(this: Element) { return isStrip(this) ? this.children.length * TAB : TAB } })
+    define(Element.prototype, "scrollWidth", { get(this: Element) { return isStrip(this) ? this.querySelectorAll(':scope > [role="radio"]').length * TAB : TAB } })
     define(Element.prototype, "scrollLeft", {
       get(this: Element) { return scroll.get(this) ?? 0 },
       set(this: Element, v: number) { scroll.set(this, v) },
@@ -390,32 +391,44 @@ describe("SegmentedControl tabs on a narrow strip", () => {
       <SegmentedControl aria-label="Work" variant="tabs" value="payments" onValueChange={vi.fn()} options={work} />,
     )
     const strip = screen.getByRole("radiogroup")
-    // Payments spans 400-500px: its right edge plus the 24px fade fits the 250px view.
-    expect(strip.scrollLeft).toBe(500 - STRIP + 24)
+    // Payments spans 400-500px: its right edge clears the 32px chevron, plus a 4px gap, in the 250px view.
+    expect(strip.scrollLeft).toBe(500 - STRIP + 32 + 4)
 
     rerender(<SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />)
     expect(strip.scrollLeft).toBe(0)
   })
 
-  it("fades the edge that has more tabs past it", () => {
+  it("shows a chevron at the edge that has more tabs past it", () => {
     const { rerender } = render(
       <SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />,
     )
     const strip = screen.getByRole("radiogroup")
     expect(strip).toHaveAttribute("data-overflow-end", "true")
     expect(strip).not.toHaveAttribute("data-overflow-start")
-    expect(strip.className).toContain("data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]")
+    expect(strip.querySelector('[data-scroll-cue="end"]')).not.toBeNull()
+    expect(strip.querySelector('[data-scroll-cue="start"]')).toBeNull()
 
     rerender(<SegmentedControl aria-label="Work" variant="tabs" value="people" onValueChange={vi.fn()} options={work} />)
     expect(strip).toHaveAttribute("data-overflow-start", "true")
     expect(strip).not.toHaveAttribute("data-overflow-end")
+    expect(strip.querySelector('[data-scroll-cue="start"]')).not.toBeNull()
+    expect(strip.querySelector('[data-scroll-cue="end"]')).toBeNull()
   })
 
-  it("leaves a strip that fits unmasked", () => {
+  it("keeps the chevrons out of the radio group and the tab order", () => {
+    render(<SegmentedControl aria-label="Work" variant="tabs" value="today" onValueChange={vi.fn()} options={work} />)
+    expect(screen.getAllByRole("radio")).toHaveLength(work.length)
+    const cue = screen.getByRole("radiogroup").querySelector('[data-scroll-cue="end"]')
+    expect(cue).toHaveAttribute("aria-hidden", "true")
+    expect(cue).toHaveAttribute("tabindex", "-1")
+  })
+
+  it("leaves a strip that fits without chevrons", () => {
     render(<SegmentedControl aria-label="Work" variant="tabs" value="all" onValueChange={vi.fn()} options={options.slice(0, 2)} />)
     const strip = screen.getByRole("radiogroup")
     expect(strip).not.toHaveAttribute("data-overflow-start")
     expect(strip).not.toHaveAttribute("data-overflow-end")
+    expect(strip.querySelector("[data-scroll-cue]")).toBeNull()
   })
 })
 

package/src/primitives/segmented-control.tsx

@@ -2,6 +2,7 @@
 
 declare const process: { env: { NODE_ENV?: string } } | undefined
 
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import * as React from "react"
 import { touchTarget } from "../lib/control-presentation"
 import { focusRing, focusRingInset } from "../lib/focus"
@@ -32,9 +33,12 @@ import { cn } from "../lib/utils"
  *   - Every label keeps one weight. Selection is colour plus surface or
  *     underline, so changing the value never reflows the row.
  *
- * The tabs variant scrolls sideways when its options outgrow the row: the
- * selected tab is kept in view, and a faded edge shows that more tabs sit
- * past it.
+ * When the options outgrow the row they scroll sideways (the tabs variant
+ * always can; the row variant can when a host gives it `flex-nowrap
+ * overflow-x-auto`). A chevron button pinned to each edge with options past it
+ * shows that the strip scrolls and pages it on click or tap; touch and
+ * trackpad scroll it natively, and arrow keys move the selection, which is
+ * kept fully in view clear of the chevrons.
  */
 export interface SegmentedControlOption<T extends string = string> {
   value: T
@@ -61,14 +65,47 @@ export interface SegmentedControlProps<T extends string = string>
   "data-testid"?: string
 }
 
-/** Width of the faded edge that marks more tabs past the strip, in px. */
-const TAB_EDGE_FADE = 24
-// Fade whichever edge has tabs past it; the two-attribute rule wins on specificity.
-const tabEdgeFade = [
-  "data-[overflow-start]:[mask-image:linear-gradient(to_right,transparent,#000_24px)]",
-  "data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]",
-  "data-[overflow-start]:data-[overflow-end]:[mask-image:linear-gradient(to_right,transparent,#000_24px,#000_calc(100%-24px),transparent)]",
-]
+/** Size of the edge chevron, in px. The selected option is kept this far
+ *  (plus the strip's own padding) from an edge so the chevron never covers it. */
+const SCROLL_CUE_SIZE = 32
+/** The strip's flex gap (`gap-1`). A cue's negative margin cancels its width
+ *  and this gap, so showing it never shifts the options: a shift is not a
+ *  resize, so nothing would re-reveal the selected option afterwards. */
+const STRIP_GAP = 4
+
+/**
+ * A chevron pinned to one edge of the scrolling strip. It is a sticky flex
+ * item with a negative margin equal to its width plus the gap, so it takes no room in the
+ * row (showing it never reflows the options) and stays at the visible edge
+ * while the strip scrolls. A solid surface keeps it legible on any plane,
+ * which an edge fade is not: a fade over the gap between two options, or over
+ * a host's inline padding, shows nothing.
+ */
+function ScrollCue({ side, onPage }: { side: "start" | "end"; onPage: () => void }) {
+  const Icon = side === "start" ? ChevronLeft : ChevronRight
+  return (
+    <button
+      type="button"
+      // Pointer and touch affordance only: keyboard users move the selection
+      // with the arrow keys, and the strip keeps it in view.
+      tabIndex={-1}
+      aria-hidden="true"
+      data-scroll-cue={side}
+      onClick={onPage}
+      className={cn(
+        "sticky z-[1] flex shrink-0 items-center justify-center self-center rounded-full border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground",
+        side === "start" ? "left-0" : "right-0",
+      )}
+      style={{
+        width: SCROLL_CUE_SIZE,
+        height: SCROLL_CUE_SIZE,
+        [side === "start" ? "marginRight" : "marginLeft"]: -(SCROLL_CUE_SIZE + STRIP_GAP),
+      }}
+    >
+      <Icon className="h-4 w-4" aria-hidden="true" />
+    </button>
+  )
+}
 
 export function SegmentedControl<T extends string = string>({
   value,
@@ -92,7 +129,9 @@ export function SegmentedControl<T extends string = string>({
   const optionRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map())
   const stripRef = React.useRef<HTMLDivElement>(null)
   const [overflow, setOverflow] = React.useState({ start: false, end: false })
-  const tabs = variant === "tabs"
+  // Re-observe when the option set changes, not on every render of a host
+  // that builds its options array inline.
+  const optionKey = options.map((o) => o.value).join("\u0000")
 
   const measureOverflow = React.useCallback(() => {
     const strip = stripRef.current
@@ -102,32 +141,52 @@ export function SegmentedControl<T extends string = string>({
     setOverflow((prev) => (prev.start === start && prev.end === end ? prev : { start, end }))
   }, [])
 
-  // Keep the selected tab inside the strip. Only the strip scrolls: the page
-  // never moves, which scrollIntoView cannot promise.
-  React.useLayoutEffect(() => {
-    if (!tabs) return
+  // Keep the selected option inside the strip and clear of the chevrons.
+  // Only the strip scrolls: the page never moves, which scrollIntoView cannot
+  // promise. A strip that does not overflow ignores the assignment.
+  const valueRef = React.useRef(value)
+  valueRef.current = value
+  const revealSelected = React.useCallback(() => {
     const strip = stripRef.current
-    const option = optionRefs.current.get(value)
-    if (strip && option) {
+    const option = optionRefs.current.get(valueRef.current)
+    if (strip && option && strip.scrollWidth > strip.clientWidth) {
+      const style = getComputedStyle(strip)
+      // offsetLeft/offsetWidth round to whole pixels while the tab is fractional (a 101.42 px tab overlapped the
+      // chevron by 0.66 px at 390 px), so keep a small gap beside each cue rather than touching its edge.
+      const gap = 4
+      const reserveStart = SCROLL_CUE_SIZE + gap + (Number.parseFloat(style.paddingLeft) || 0)
+      const reserveEnd = SCROLL_CUE_SIZE + gap + (Number.parseFloat(style.paddingRight) || 0)
       const start = option.offsetLeft
       const end = start + option.offsetWidth
-      if (start < strip.scrollLeft + TAB_EDGE_FADE) {
-        strip.scrollLeft = Math.max(0, start - TAB_EDGE_FADE)
-      } else if (end > strip.scrollLeft + strip.clientWidth - TAB_EDGE_FADE) {
-        strip.scrollLeft = end - strip.clientWidth + TAB_EDGE_FADE
+      if (start - reserveStart < strip.scrollLeft) {
+        strip.scrollLeft = Math.max(0, start - reserveStart)
+      } else if (end + reserveEnd > strip.scrollLeft + strip.clientWidth) {
+        strip.scrollLeft = end + reserveEnd - strip.clientWidth
       }
     }
     measureOverflow()
-  }, [tabs, value, options.length, measureOverflow])
+  }, [measureOverflow])
 
+  React.useLayoutEffect(revealSelected, [value, options.length, revealSelected])
+
+  // The strip's own size and its options' sizes (late web fonts, a changed
+  // label or adornment) move both the selected option and the overflow edges.
   React.useEffect(() => {
-    if (!tabs || typeof ResizeObserver === "undefined") return
+    if (typeof ResizeObserver === "undefined") return
     const strip = stripRef.current
     if (!strip) return
-    const observer = new ResizeObserver(measureOverflow)
+    const observer = new ResizeObserver(revealSelected)
     observer.observe(strip)
+    for (const option of optionRefs.current.values()) observer.observe(option)
     return () => observer.disconnect()
-  }, [tabs, measureOverflow])
+  }, [optionKey, revealSelected])
+
+  const page = (direction: 1 | -1) => {
+    const strip = stripRef.current
+    if (!strip) return
+    const reduce = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+    strip.scrollBy({ left: direction * strip.clientWidth * 0.75, behavior: reduce ? "auto" : "smooth" })
+  }
 
   const hasMatch = options.some((o) => o.value === value)
 
@@ -161,16 +220,17 @@ export function SegmentedControl<T extends string = string>({
       data-overflow-end={overflow.end || undefined}
       ref={stripRef}
       onKeyDown={handleKeyDown}
-      onScroll={tabs ? measureOverflow : undefined}
+      onScroll={measureOverflow}
       className={cn(
-        "flex gap-1",
+        "relative flex gap-1",
         variant === "row" &&
           "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1",
         variant === "tabs" &&
-          ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade],
+          "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
         className,
       )}
     >
+      {overflow.start && <ScrollCue side="start" onPage={() => page(-1)} />}
       {options.map((option, i) => {
         const active = option.value === value
         const focusable = active || (!hasMatch && i === 0)
@@ -214,6 +274,7 @@ export function SegmentedControl<T extends string = string>({
           </button>
         )
       })}
+      {overflow.end && <ScrollCue side="end" onPage={() => page(1)} />}
     </div>
   )
 }

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,