@flamingo-stack/openframe-frontend-core 0.0.201 → 0.0.202-snapshot.20260521221224

package/src/components/ui/simple-markdown-renderer.tsx

@@ -7,10 +7,153 @@ import remarkGfm from 'remark-gfm';
 import remarkBreaks from 'remark-breaks';
 import rehypeHighlight from 'rehype-highlight';
 import rehypeRaw from 'rehype-raw';
+import { visit } from 'unist-util-visit';
 import Image from 'next/image';
 import { AlertCircleIcon } from '../icons-v2-generated';
 import { cn } from '../../utils/cn';
 
+// ---------------------------------------------------------------------------
+// rehype HAST sanitizer — runs AFTER rehype-raw to strip XSS vectors
+// ---------------------------------------------------------------------------
+/**
+ * Minimal HAST sanitizer. Runs AFTER `rehype-raw` (which parses raw HTML
+ * embedded in markdown) and BEFORE `rehype-highlight`. Strips the
+ * attack surfaces that rehype-raw leaves wide open:
+ *
+ *   - `on*` event handlers (onerror, onload, onclick, …) on ANY element
+ *   - href / src / formaction / xlink:href / poster pointing at
+ *     `javascript:` (case + whitespace tolerant)
+ *   - `iframe srcdoc` (full-document XSS)
+ *   - `<script>`, `<style>`, `<noscript>`, `<noembed>` elements (drop)
+ *   - `data:` URIs on src-ish attrs (SVG-with-embedded-JS class of bug)
+ *
+ * Why custom (vs `rehype-sanitize`): the OSS-lib build environment
+ * doesn't have `rehype-sanitize` in its `node_modules` (sandbox
+ * restriction), but `unist-util-visit` is already a transitive dep of
+ * `rehype-raw`. This plugin is ~60 lines, ships nothing new, and is
+ * tighter than the default sanitize schema for our threat model
+ * (we want LLM-emitted markdown to be safe; we don't need full HTML5
+ * fidelity).
+ *
+ * The text-level `escapeUnknownHtmlTags` pre-pass below is still useful
+ * for catching `<their>`-style accidental tag emissions that React 19
+ * rejects, but it is NOT a security boundary. THIS is.
+ */
+const EVENT_HANDLER_ATTR_RE = /^on[a-z]+$/i
+const JAVASCRIPT_URL_RE = /^[\s\x00-\x1f]*javascript:/i
+const DATA_URL_RE = /^[\s\x00-\x1f]*data:/i
+const URL_ATTRS = new Set([
+  'href',
+  'src',
+  // `srcset` accepts `javascript:` on legacy browsers — same guard
+  // as the canonical hast-util-sanitize default schema's attr set.
+  // Multi-candidate scanning lives in `srcsetHasUnsafeCandidate` below;
+  // a single-URL check would miss a malicious second candidate like
+  // `"https://safe.png 1x, javascript:alert(1) 2x"`.
+  'srcset',
+  'formaction',
+  'xlink:href',
+  'poster',
+  'data',
+  'action',
+  'background',
+])
+
+/**
+ * Returns true if any candidate in an `srcset` attribute has a dangerous
+ * URL scheme. Per the HTML spec, srcset is a comma-separated list of
+ * candidates; each candidate is `<url> <descriptor>?` (e.g.
+ * `"https://x/a.png 2x"`). The single-URL `JAVASCRIPT_URL_RE.test(v)`
+ * check only inspects the FIRST candidate — so a malicious second
+ * candidate (`"https://safe 1x, javascript:alert(1) 2x"`) would slip
+ * through. This helper splits on `,`, trims each candidate, takes the
+ * leading whitespace-delimited token (the URL), and tests that.
+ *
+ * Splitting on every comma over-matches the rare-in-practice case of
+ * commas inside URL paths. That's the correct error bias for a
+ * sanitizer: over-strip is safe, under-strip is not.
+ */
+function srcsetHasUnsafeCandidate(srcset: string): boolean {
+  for (const candidate of srcset.split(',')) {
+    const url = candidate.trim().split(/\s+/)[0] ?? ''
+    if (JAVASCRIPT_URL_RE.test(url) || DATA_URL_RE.test(url)) return true
+  }
+  return false
+}
+// Element-level drop list. The text-pre-pass `escapeUnknownHtmlTags`
+// already escapes any `<tag>` whose name isn't on its allow-list, so
+// `<object>`, `<embed>`, `<applet>`, `<base>`, `<meta>` normally never
+// reach `rehype-raw` as elements. Re-stripping at the HAST layer
+// removes the cross-layer dependency: this sanitizer is sufficient
+// on its own even if the text pre-pass is bypassed.
+const STRIP_ELEMENTS = new Set([
+  'script',
+  'style',
+  'noscript',
+  'noembed',
+  'object',
+  'embed',
+  'applet',
+  'base',
+  'meta',
+])
+
+function rehypeStripUnsafe() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (tree: any) => {
+    visit(tree, 'element', (node: any, index: number | undefined, parent: any) => {
+      const tag = String(node.tagName ?? '').toLowerCase()
+      if (STRIP_ELEMENTS.has(tag)) {
+        if (parent && typeof index === 'number') {
+          parent.children.splice(index, 1)
+          // Return the numeric index (`unist-util-visit` treats it as
+          // `[CONTINUE, index]`) so the walker resumes at the slot the
+          // removed node vacated. Don't return `[SKIP, index]`:
+          // skip-descendants is meaningless for a node we just removed,
+          // and SKIP+index conflates two signals.
+          return index
+        }
+        // Root-level strip element (parent undefined). Rare, but
+        // possible if `rehype-raw` ever lifts one. Neutralize in
+        // place by clearing children + retagging as a blank span.
+        node.children = []
+        node.tagName = 'span'
+        node.properties = {}
+        return
+      }
+      if (!node.properties || typeof node.properties !== 'object') return
+      for (const key of Object.keys(node.properties)) {
+        // 1. event handlers
+        if (EVENT_HANDLER_ATTR_RE.test(key)) {
+          delete node.properties[key]
+          continue
+        }
+        // 2. dangerous URL schemes on URL-bearing attrs. `srcset` is
+        //    multi-candidate so it routes through `srcsetHasUnsafeCandidate`
+        //    which inspects every URL in the list (not just the first).
+        if (URL_ATTRS.has(key.toLowerCase())) {
+          const raw = node.properties[key]
+          const v = Array.isArray(raw) ? raw[0] : raw
+          if (typeof v === 'string') {
+            const unsafe =
+              key.toLowerCase() === 'srcset'
+                ? srcsetHasUnsafeCandidate(v)
+                : JAVASCRIPT_URL_RE.test(v) || DATA_URL_RE.test(v)
+            if (unsafe) {
+              delete node.properties[key]
+              continue
+            }
+          }
+        }
+        // 3. iframe srcdoc — full-document XSS vector
+        if (tag === 'iframe' && key.toLowerCase() === 'srcdoc') {
+          delete node.properties[key]
+        }
+      }
+    })
+  }
+}
+
 /**
  * URL transformer that extends react-markdown's default safe-protocol
  * allowlist with `card://` — the non-standard scheme `remarkCardLinks`
@@ -35,6 +178,90 @@ function cardAwareUrlTransform(url: string, key: string): string {
   return defaultUrlTransform(url);
 }
 
+// ---------------------------------------------------------------------------
+// LLM-output sanitizer — escape unknown HTML-style tags
+// ---------------------------------------------------------------------------
+/**
+ * Tags `rehype-raw` is allowed to forward to React as-is. Anything
+ * outside this set gets its angle brackets escaped so it renders as
+ * plain text rather than reaching React as an unrecognized custom
+ * element.
+ *
+ * Why this matters: chat output is LLM-generated markdown. An LLM that
+ * accidentally wraps a word in angle brackets ("share <their> settings")
+ * or echoes a system-prompt XML tag ("the <ticket> element above")
+ * makes `rehype-raw` mint a `<their>` / `<ticket>` JSX element. React
+ * 18 logs "tag is unrecognized in this browser" for every unknown tag;
+ * React 19 throws on tags with reserved kebab-case forms. We pre-escape
+ * to keep the renderer pristine without losing legitimate inline HTML
+ * (details/summary, video, iframe, kbd, mark, etc.).
+ *
+ * The allow-list mirrors HTML5 + the elements the chat shell wires
+ * component overrides for. Kept lower-case; matched case-insensitively.
+ */
+const SAFE_HTML_TAGS = new Set([
+  // Block + inline text
+  'a', 'abbr', 'address', 'article', 'aside', 'b', 'bdi', 'bdo', 'blockquote',
+  'br', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'dd', 'del',
+  'details', 'dfn', 'div', 'dl', 'dt', 'em', 'figcaption', 'figure', 'footer',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'ins',
+  'kbd', 'li', 'main', 'mark', 'nav', 'ol', 'p', 'pre', 'q', 'rp', 'rt',
+  'ruby', 's', 'samp', 'section', 'small', 'span', 'strong', 'sub', 'summary',
+  'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'time', 'tr', 'u',
+  'ul', 'var', 'wbr',
+  // Media
+  'img', 'picture', 'source', 'audio', 'video', 'iframe', 'track',
+  // Forms (rehype-raw allows them; mostly harmless for chat output)
+  'button', 'input', 'label', 'select', 'option', 'optgroup', 'textarea', 'form', 'fieldset', 'legend',
+])
+
+/**
+ * Match an opening / closing HTML tag in markdown source. Captures:
+ *   1 — optional `/` for closing tags
+ *   2 — tag name (must start with a letter)
+ *   3 — everything between the name and the closing `>` (attrs etc.)
+ *   4 — optional `/` for void-element self-close
+ */
+const TAG_LIKE_REGEX = /<(\/?)([a-zA-Z][a-zA-Z0-9-]*)([^>]*?)(\/?)>/g
+
+function escapeUnknownHtmlTags(text: string): string {
+  if (!text || text.indexOf('<') === -1) return text
+  // Carve out fenced code blocks AND inline-backtick spans so we don't
+  // corrupt `<their>` examples that legitimately live inside code. The
+  // regex matches in priority order: triple-fence first (greediest),
+  // then inline single-backtick. Each protected span is preserved
+  // verbatim; everything between/around them runs through
+  // `escapeOutsideFences`.
+  const parts: string[] = []
+  let cursor = 0
+  // Triple-fence ``` … ```  OR  single-backtick `…` (one line, no
+  // embedded newlines). Backtick group is non-greedy and forbids
+  // inner newlines per CommonMark inline-code semantics.
+  const PROTECTED_SPAN_RE = /```[\s\S]*?```|`[^`\n]+`/g
+  let span: RegExpExecArray | null
+  while ((span = PROTECTED_SPAN_RE.exec(text)) !== null) {
+    if (span.index > cursor) {
+      parts.push(escapeOutsideFences(text.slice(cursor, span.index)))
+    }
+    parts.push(span[0])
+    cursor = span.index + span[0].length
+  }
+  if (cursor < text.length) {
+    parts.push(escapeOutsideFences(text.slice(cursor)))
+  }
+  return parts.join('')
+}
+
+function escapeOutsideFences(segment: string): string {
+  return segment.replace(TAG_LIKE_REGEX, (match, slash, tag, rest, selfClose) => {
+    const lower = (tag as string).toLowerCase()
+    if (SAFE_HTML_TAGS.has(lower)) return match
+    // Unknown tag — escape so it renders as text instead of reaching
+    // React as a custom element.
+    return `&lt;${slash}${tag}${rest}${selfClose}&gt;`
+  })
+}
+
 // ---------------------------------------------------------------------------
 // Mermaid styles (responsive)
 // ---------------------------------------------------------------------------
@@ -396,7 +623,19 @@ export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({
   }, [sectionIds, sectionIdMap]);
 
   // ---- preprocess ----
-  const processedContent = preprocessContent ? preprocessContent(content) : content;
+  // Run the optional caller-supplied transform first, then defensively
+  // escape unknown HTML-style tags so an LLM that wrote `<their>` or
+  // accidentally echoed a system-prompt XML tag like `<ticket>` doesn't
+  // make `rehype-raw` hand React an unrecognized custom element (which
+  // logs a noisy "tag is unrecognized in this browser" warning AND can
+  // crash the SimpleMarkdownRenderer when the tag has a kebab-case
+  // form React rejects outright). Allow-listed tags pass through
+  // unchanged so legitimate inline HTML (details/summary, video,
+  // iframe, etc.) still renders.
+  const processedContent = useMemo(
+    () => escapeUnknownHtmlTags(preprocessContent ? preprocessContent(content) : content),
+    [preprocessContent, content],
+  );
 
   // ---- heading factory ----
   const makeHeading = useCallback(
@@ -499,7 +738,7 @@ export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({
         return (
           <span className="text-ods-accent cursor-not-allowed">
             {children}
-            <sup className="ml-1 text-xs font-bold text-red-500">[BROKEN]</sup>
+            <sup className="ml-1 text-xs font-bold text-ods-attention-red-error">[BROKEN]</sup>
           </span>
         );
       }
@@ -617,7 +856,14 @@ export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({
           <ReactMarkdown
             remarkPlugins={[remarkGfm, remarkBreaks, ...(additionalRemarkPlugins ?? [])]}
             rehypePlugins={[
+              // ORDER MATTERS: rehype-raw parses the raw HTML embedded
+              // in the source markdown into HAST nodes; rehypeStripUnsafe
+              // then walks the HAST tree and drops XSS vectors (on*
+              // event handlers, javascript: URLs, script/style/iframe-srcdoc,
+              // data: URIs). Reversing the order would have nothing to
+              // sanitize (raw HTML would still be strings).
               rehypeRaw,
+              rehypeStripUnsafe,
               [rehypeHighlight, { detect: true, ignoreMissing: true }],
             ]}
             urlTransform={cardAwareUrlTransform}

package/src/components/ui/tag.tsx

@@ -92,7 +92,7 @@ function Tag({
           {icon}
         </span>
       )}
-      <span className={cn("truncate", labelClassName)}>{label}</span>
+      <span className={cn("truncate", labelClassName)} title={typeof label === 'string' ? label : undefined}>{label}</span>
       {onClose && (
         <button
           type="button"

package/src/components/ui/tags-manager.tsx

@@ -329,7 +329,7 @@ export function TagsManager({
 												}}
 											>
 												<div className="flex items-center justify-between w-full">
-													<span className="truncate">{tag.name}</span>
+													<span className="truncate" title={tag.name}>{tag.name}</span>
 													<div className="flex items-center gap-1 shrink-0">
 														{isSelected && (
 															<CheckIcon
@@ -401,7 +401,7 @@ export function TagsManager({
 												size={16}
 												className="text-ods-accent shrink-0"
 											/>
-											<span className="text-ods-accent truncate">
+											<span className="text-ods-accent truncate" title={`Create "${search.trim()}"`}>
 												Create &ldquo;{search.trim()}&rdquo;
 											</span>
 										</div>

package/src/components/ui/ticket-attachments-list.tsx

@@ -44,7 +44,7 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
             </div>
           )}
           <div className="flex-1 min-w-0 overflow-hidden">
-            <p className="text-h4 text-ods-text-primary truncate">{attachment.fileName}</p>
+            <p className="text-h4 text-ods-text-primary truncate" title={attachment.fileName}>{attachment.fileName}</p>
             <p className="text-h6 text-ods-text-secondary">{attachment.fileSize}</p>
           </div>
           {attachment.onDownload && (

package/src/components/ui/ticket-info-section.tsx

@@ -89,12 +89,11 @@ function InfoCell({ value, label, icon, onClick }: {
             <button
               type="button"
               onClick={onClick}
-              className="text-h4 text-ods-text-primary truncate hover:text-ods-accent transition-colors cursor-pointer text-left"
-            >
+              className="text-h4 text-ods-text-primary truncate hover:text-ods-accent transition-colors cursor-pointer text-left" title={value}>
               {value}
             </button>
           ) : (
-            <span className="text-h4 text-ods-text-primary truncate">{value}</span>
+            <span className="text-h4 text-ods-text-primary truncate" title={value}>{value}</span>
           )}
         </div>
         <span className="text-h6 text-ods-text-secondary truncate">{label}</span>

package/src/components/ui/ticket-note-card.tsx

@@ -96,7 +96,10 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
         ) : (
           <>
             <p className="text-h4 text-ods-text-primary">{note.text}</p>
-            <p className="text-h6 text-ods-text-secondary truncate">
+            <p
+              className="text-h6 text-ods-text-secondary truncate"
+              title={`${note.authorName} • ${note.createdAt}`}
+            >
               {note.authorName} &bull; {note.createdAt}
             </p>
           </>

package/src/components/ui/toaster.tsx

@@ -61,10 +61,10 @@ function ToastHeader({
 
       <div className="flex min-w-0 flex-1 flex-col justify-center font-['DM_Sans'] font-medium">
         {title ? (
-          <p className="truncate pr-5 text-[18px] leading-6 text-ods-text-primary">{title}</p>
+          <p className="truncate pr-5 text-[18px] leading-6 text-ods-text-primary" title={typeof title === 'string' ? title : undefined}>{title}</p>
         ) : null}
         {description ? (
-          <p className="text-[14px] leading-5 text-ods-text-secondary line-clamp-3">{description}</p>
+          <p className="text-[14px] leading-5 text-ods-text-secondary line-clamp-3" title={typeof description === 'string' ? description : undefined}>{description}</p>
         ) : null}
       </div>
 
@@ -206,7 +206,7 @@ export function CommandApprovalToast({
       >
         <div className="overflow-hidden">
           <div className="flex h-11 w-full items-center gap-2 border-b border-ods-border bg-ods-card px-3 py-2">
-            <p className="min-w-0 flex-1 truncate font-['DM_Sans'] text-[14px] font-medium leading-5 text-ods-text-primary">
+            <p className="min-w-0 flex-1 truncate font-['DM_Sans'] text-[14px] font-medium leading-5 text-ods-text-primary" title={command}>
               {command}
             </p>
             {toolType ? <ToolIcon toolType={toolType} size={16} /> : null}

package/src/components/ui/truncate-text.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import React, { type ReactNode, useEffect, useRef, useState } from 'react'
+import { cn } from '../../utils/cn'
+import { FloatingTooltip } from './floating-tooltip'
+
+/** ODS typography variants. Maps to the `.text-h1`…`.text-h6` utilities. */
+export type TruncateTextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+/** ODS text tone. Maps to the `text-ods-text-*` colour utilities. */
+export type TruncateTextTone = 'primary' | 'secondary'
+
+export interface TruncateTextProps {
+  children: string
+  /** Tooltip content; defaults to `children`. */
+  tooltip?: ReactNode
+  /** Extra classes merged after the variant/tone defaults. */
+  className?: string
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  /** Max visible lines. `1` uses `truncate` (single-line ellipsis); higher values use `line-clamp-N`. */
+  lines?: 1 | 2 | 3 | 4 | 5 | 6
+  /** ODS typography token. Default: `'h4'` (body). */
+  variant?: TruncateTextVariant
+  /** ODS text tone. Default: `'primary'`. */
+  tone?: TruncateTextTone
+  /** Force the monospace (heading) font family — preserves the variant's size while swapping family. */
+  mono?: boolean
+}
+
+const VARIANT_CLASS: Record<TruncateTextVariant, string> = {
+  h1: 'text-h1',
+  h2: 'text-h2',
+  h3: 'text-h3',
+  h4: 'text-h4',
+  h5: 'text-h5',
+  h6: 'text-h6',
+}
+
+const TONE_CLASS: Record<TruncateTextTone, string> = {
+  primary: 'text-ods-text-primary',
+  secondary: 'text-ods-text-secondary',
+}
+
+const LINE_CLAMP_CLASS: Record<2 | 3 | 4 | 5 | 6, string> = {
+  2: 'line-clamp-2',
+  3: 'line-clamp-3',
+  4: 'line-clamp-4',
+  5: 'line-clamp-5',
+  6: 'line-clamp-6',
+}
+
+/**
+ * Truncated text bound to the ODS typography system. Shows a `FloatingTooltip`
+ * with the full value when (and only when) the content overflows.
+ *
+ * ```tsx
+ * <TruncateText>{name}</TruncateText>                                // h4 / primary
+ * <TruncateText variant="h6" tone="secondary">{email}</TruncateText> // caption
+ * <TruncateText lines={3}>{description}</TruncateText>               // 3-line clamp
+ * ```
+ */
+export function TruncateText({
+  children,
+  tooltip,
+  className,
+  side = 'top',
+  lines = 1,
+  variant = 'h4',
+  tone = 'primary',
+  mono = false,
+}: TruncateTextProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
+  const isMultiLine = lines > 1
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const check = () => {
+      const overflows = isMultiLine
+        ? el.scrollHeight > el.clientHeight + 1
+        : el.scrollWidth > el.clientWidth + 1
+      setIsTruncated(overflows)
+    }
+    check()
+    const ro = new ResizeObserver(check)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [children, isMultiLine])
+
+  const clampClass = isMultiLine
+    ? LINE_CLAMP_CLASS[lines as Exclude<typeof lines, 1>]
+    : 'truncate block'
+
+  return (
+    <FloatingTooltip
+      content={tooltip ?? children}
+      side={side}
+      disabled={!isTruncated}
+      className="max-w-xs whitespace-pre-line [overflow-wrap:anywhere]"
+    >
+      <span
+        ref={ref}
+        className={cn(
+          VARIANT_CLASS[variant],
+          TONE_CLASS[tone],
+          mono && '[font-family:var(--font-family-heading)]',
+          clampClass,
+          className,
+        )}
+      >
+        {children}
+      </span>
+    </FloatingTooltip>
+  )
+}

package/src/components/user-summary-stub.tsx

@@ -102,13 +102,16 @@ export function UserSummary({
           )}
         </div>
         <div className="min-w-0 flex-1">
-          <p className="text-h4 text-ods-text-primary truncate">
+          <p
+            className="text-h4 text-ods-text-primary truncate"
+            title={mspPreview?.name ? `${name} • ${mspPreview.name}` : name}
+          >
             {name}
             {mspPreview?.name && (
               <span className="text-ods-text-secondary"> • {mspPreview.name}</span>
             )}
           </p>
-          <p className="text-h6 text-ods-text-secondary truncate">
+          <p className="text-h6 text-ods-text-secondary truncate" title={subtitle && subtitle.trim().length > 0 ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}>
             {subtitle && subtitle.trim().length > 0 ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}
           </p>
         </div>
@@ -154,34 +157,37 @@ export function UserSummary({
         <div className="flex-1 grid grid-cols-[1fr_auto] gap-4">
           {/* LEFT : text stack */}
           <div className="min-h-[6rem] flex flex-col justify-center space-y-3 truncate">
-          <p className="text-h2 text-ods-text-primary leading-none truncate">
+          <p className="text-h2 text-ods-text-primary leading-none truncate" title={name}>
             {name}
           </p>
-            <p className="text-h4 text-ods-text-secondary break-all truncate">
+            <p className="text-h4 text-ods-text-secondary break-all truncate" title={(subtitle && subtitle.trim().length > 0) ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}>
               {(subtitle && subtitle.trim().length > 0) ? subtitle : (email && email.trim().length > 0 ? email : '\u00A0')}
             </p>
-            {mspPreview && (
-              <p className="text-h6 text-ods-text-primary truncate">
-                {/* Build string with separators */}
-                {[
-                  mspPreview.name ?? '—',
-                  typeof mspPreview.seatCount === 'number'
-                    ? `${formatNumber(mspPreview.seatCount)} Seats`
-                    : null,
-                  typeof mspPreview.technicianCount === 'number'
-                    ? `${formatNumber(mspPreview.technicianCount)} Technicians`
-                    : null,
-                  typeof mspPreview.annualRevenue === 'number'
-                    ? `$${formatNumber(mspPreview.annualRevenue)}`
-                    : null,
-                ]
-                  .filter(Boolean)
-                  .flatMap((txt, idx) => (idx === 0 ? [txt] : [' • ', txt]))
-                  .map((seg, idx) => (
-                    <span key={idx} className={seg === ' • ' ? 'text-ods-text-secondary' : ''}>{seg}</span>
-                  ))}
-              </p>
-            )}
+            {mspPreview && (() => {
+              const mspSegments = [
+                mspPreview.name ?? '—',
+                typeof mspPreview.seatCount === 'number'
+                  ? `${formatNumber(mspPreview.seatCount)} Seats`
+                  : null,
+                typeof mspPreview.technicianCount === 'number'
+                  ? `${formatNumber(mspPreview.technicianCount)} Technicians`
+                  : null,
+                typeof mspPreview.annualRevenue === 'number'
+                  ? `$${formatNumber(mspPreview.annualRevenue)}`
+                  : null,
+              ].filter(Boolean) as string[];
+              const mspTitle = mspSegments.join(' • ');
+              return (
+                <p className="text-h6 text-ods-text-primary truncate" title={mspTitle}>
+                  {/* Build string with separators */}
+                  {mspSegments
+                    .flatMap((txt, idx) => (idx === 0 ? [txt] : [' • ', txt]))
+                    .map((seg, idx) => (
+                      <span key={idx} className={seg === ' • ' ? 'text-ods-text-secondary' : ''}>{seg}</span>
+                    ))}
+                </p>
+              );
+            })()}
           </div>
 
           {/* RIGHT (desktop) */}

package/src/components/vendor-display-button.tsx

@@ -79,7 +79,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
           </span>
         </div>
       )}
-      <span className="text-h4 text-ods-text-primary truncate min-w-0">
+      <span className="text-h4 text-ods-text-primary truncate min-w-0" title={vendor.title}>
         {vendor.title}
       </span>
     </button>

package/src/stories/SplitButton.stories.tsx

@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ChevronDown, ExternalLink, MoreVertical, Save, Trash2 } from 'lucide-react'
+import {
+  Chevron01DownIcon as ChevronDown,
+  Ellipsis02Icon as MoreVertical,
+  ExternalLinkIcon as ExternalLink,
+  FloppyDiscIcon as Save,
+  TrashIcon as Trash2,
+} from '../components/icons-v2-generated'
 import React from 'react'
 import { SplitButton } from '../components/ui/button'