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

package/src/components/chat/approval-request-message.tsx

@@ -6,11 +6,77 @@ import { Button } from "../ui/button"
 import { Tag } from "../ui/tag"
 import { CheckCircle, XCircle } from "lucide-react"
 import type { ApprovalRequestMessageProps } from "./types"
+import type { ApprovalRequestField } from "./types/message.types"
+
+/**
+ * Stacked label/value rows for the approval card's structured field
+ * list. Labels are tiny uppercase muted text; values render as primary
+ * text with `whitespace-pre-wrap` so multi-line descriptions
+ * (`content`, `resolution`, etc.) keep their structure. Mirrored across
+ * the pending + resolved branches so an approved ticket reads the same
+ * way it did at decision time.
+ */
+function ApprovalFieldList({ fields }: { fields: ApprovalRequestField[] }) {
+  return (
+    <dl className="flex flex-col gap-2.5 mt-1">
+      {fields.map((f, i) => (
+        <div key={i} className="flex flex-col gap-0.5">
+          <dt className="font-['DM_Sans'] font-semibold text-[11px] uppercase tracking-wide text-ods-text-tertiary leading-4">
+            {f.label}
+          </dt>
+          <dd className="font-['DM_Sans'] text-sm text-ods-text-primary leading-5 whitespace-pre-wrap break-words">
+            {f.value}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+/**
+ * Shared body for both pending and resolved branches of
+ * `<ApprovalRequestMessage>`. The pending card adds Approve/Reject
+ * buttons below; the resolved card adds an Approved/Rejected `<Tag>`.
+ * Everything ABOVE the footer — command bar, icon, structured-fields
+ * stack, explanation paragraph — is identical, so the body lives here
+ * to prevent silent drift between the two render paths (a prior
+ * version already had a `break-words` vs `break-all` mismatch on the
+ * `<code>` element from an out-of-sync copy-paste edit).
+ */
+function ApprovalCardBody({
+  data,
+}: {
+  data: ApprovalRequestMessageProps['data']
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="bg-ods-bg border border-ods-border rounded-md p-3 flex gap-2 items-start max-h-32 overflow-y-auto">
+        <code className="font-['DM_Sans'] font-medium text-sm text-ods-text-primary flex-1 leading-5 whitespace-pre-wrap break-words">
+          {data.command}
+        </code>
+        {data.icon && (
+          <div className="w-4 h-4 shrink-0 text-ods-text-tertiary">
+            {data.icon}
+          </div>
+        )}
+      </div>
+      {data.fields && data.fields.length > 0 ? (
+        <ApprovalFieldList fields={data.fields} />
+      ) : (
+        data.explanation && (
+          <p className="font-['DM_Sans'] font-medium text-sm text-ods-text-secondary leading-5 whitespace-pre-line break-words">
+            {data.explanation}
+          </p>
+        )
+      )}
+    </div>
+  )
+}
 
 const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessageProps>(
   ({ className, data, onApprove, onReject, status = 'pending', ...props }, ref) => {
     const [isProcessing, setIsProcessing] = useState(false)
-    
+
     const handleApprove = async () => {
       setIsProcessing(true)
       try {
@@ -28,49 +94,7 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
         setIsProcessing(false)
       }
     }
-    
-    if (status !== 'pending') {
-      return (
-        <div
-          ref={ref}
-          className={cn(
-            "bg-ods-card border border-ods-border rounded-md p-4 mb-2 flex flex-col gap-4",
-            className
-          )}
-          {...props}
-        >
-          {/* Command and icon section */}
-          <div className="flex flex-col gap-1">
-            <div className="bg-ods-bg border border-ods-border rounded-md p-3 flex gap-2 items-start max-h-32 overflow-y-auto">
-              <code className="font-['DM_Sans'] font-medium text-sm text-ods-text-primary flex-1 leading-5 whitespace-pre-wrap break-words">
-                {data.command}
-              </code>
-              {data.icon && (
-                <div className="w-4 h-4 shrink-0 text-ods-text-tertiary">
-                  {data.icon}
-                </div>
-              )}
-            </div>
-            
-            {data.explanation && (
-              <p className="font-['DM_Sans'] font-medium text-sm text-ods-text-secondary leading-5 whitespace-pre-line break-words">
-                {data.explanation}
-              </p>
-            )}
-          </div>
-          
-          {/* Status indicator */}
-          <div className="flex">
-            <Tag
-              label={status === 'approved' ? 'Approved' : 'Rejected'}
-              variant={status === 'approved' ? 'success' : 'error'}
-              icon={status === 'approved' ? <CheckCircle className="w-4 h-4" /> : <XCircle className="w-4 h-4" />}
-            />
-          </div>
-        </div>
-      )
-    }
-    
+
     return (
       <div
         ref={ref}
@@ -80,55 +104,45 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
         )}
         {...props}
       >
-        {/* Command and icon section */}
-        <div className="flex flex-col gap-1">
-          <div className="bg-ods-bg border border-ods-border rounded-md p-3 flex gap-2 items-start max-h-32 overflow-y-auto">
-            <code className="font-['DM_Sans'] font-medium text-sm text-ods-text-primary flex-1 leading-5 whitespace-pre-wrap break-all">
-              {data.command}
-            </code>
-            {data.icon && (
-              <div className="w-4 h-4 shrink-0 text-ods-text-tertiary">
-                {data.icon}
-              </div>
-            )}
+        <ApprovalCardBody data={data} />
+        {status === 'pending' ? (
+          <div className="flex gap-4 items-center">
+            <Button
+              size="small-legacy"
+              variant="accent"
+              onClick={handleApprove}
+              disabled={isProcessing}
+              className={cn(
+                "bg-ods-accent hover:bg-ods-accent/90",
+                "font-mono font-medium md:!text-sm text-ods-bg uppercase tracking-[-0.28px]",
+                "px-2 py-1 h-auto"
+              )}
+            >
+              Approve
+            </Button>
+            <Button
+              size="small-legacy"
+              variant="outline"
+              onClick={handleReject}
+              disabled={isProcessing}
+              className={cn(
+                "bg-ods-card border-ods-border",
+                "font-mono font-medium md:!text-sm text-ods-text-primary uppercase tracking-[-0.28px]",
+                "hover:bg-ods-bg px-2 py-1 h-auto"
+              )}
+            >
+              Reject
+            </Button>
           </div>
-          
-          {data.explanation && (
-            <p className="font-['DM_Sans'] font-medium text-sm text-ods-text-secondary leading-5">
-              {data.explanation}
-            </p>
-          )}
-        </div>
-        
-        {/* Approve/Reject buttons */}
-        <div className="flex gap-4 items-center">
-          <Button
-            size="small-legacy"
-            variant="accent"
-            onClick={handleApprove}
-            disabled={isProcessing}
-            className={cn(
-              "bg-ods-accent hover:bg-ods-accent/90",
-              "font-mono font-medium md:!text-sm text-ods-bg uppercase tracking-[-0.28px]",
-              "px-2 py-1 h-auto"
-            )}
-          >
-            Approve
-          </Button>
-          <Button
-            size="small-legacy"
-            variant="outline"
-            onClick={handleReject}
-            disabled={isProcessing}
-            className={cn(
-              "bg-ods-card border-ods-border",
-              "font-mono font-medium md:!text-sm text-ods-text-primary uppercase tracking-[-0.28px]",
-              "hover:bg-ods-bg px-2 py-1 h-auto"
-            )}
-          >
-            Reject
-          </Button>
-        </div>
+        ) : (
+          <div className="flex">
+            <Tag
+              label={status === 'approved' ? 'Approved' : 'Rejected'}
+              variant={status === 'approved' ? 'success' : 'error'}
+              icon={status === 'approved' ? <CheckCircle className="w-4 h-4" /> : <XCircle className="w-4 h-4" />}
+            />
+          </div>
+        )}
       </div>
     )
   }

package/src/components/chat/chat-container.tsx

@@ -11,14 +11,18 @@ import type { ConnectionIndicatorProps, ChatContainerProps, ChatHeaderProps } fr
 const ConnectionIndicator: React.FC<ConnectionIndicatorProps> = ({ status }) => {
   const getStatusStyles = () => {
     switch (status) {
+      // ODS attention tokens — same scheme used by the rest of the chat
+      // shell (StatusBadge, error toast, etc.). Hex Tailwind palette
+      // (`bg-green-500` / `bg-red-500`) would diverge from the theme and
+      // is forbidden by the host's design-token policy.
       case 'connected':
-        return 'bg-green-500'
+        return 'bg-ods-attention-green-success'
       case 'connecting':
-        return 'bg-yellow-500 animate-pulse'
+        return 'bg-ods-attention-yellow-warning animate-pulse'
       case 'disconnected':
-        return 'bg-red-500'
+        return 'bg-ods-attention-red-error'
       default:
-        return 'bg-gray-500'
+        return 'bg-ods-text-tertiary'
     }
   }
 
@@ -142,9 +146,9 @@ const ChatHeader = React.forwardRef<HTMLDivElement, ChatHeaderProps>(
               <div className="h-px bg-ods-border" />
               <div className="flex items-center justify-between gap-4 px-4 py-2">
                 <div className="flex flex-col min-w-0">
-                  <span className="text-heading-3 truncate">{ticketInfo.title}</span>
+                  <span className="text-heading-3 truncate" title={typeof ticketInfo.title === 'string' ? ticketInfo.title : undefined}>{ticketInfo.title}</span>
                   {ticketInfo.meta && (
-                    <div className="text-h6 text-ods-text-secondary truncate">{ticketInfo.meta}</div>
+                    <div className="text-h6 text-ods-text-secondary truncate" title={typeof ticketInfo.meta === 'string' ? ticketInfo.meta : undefined}>{ticketInfo.meta}</div>
                   )}
                 </div>
                 {ticketInfo.status && <TicketStatusTag status={ticketInfo.status} />}

package/src/components/chat/chat-message-enhanced.tsx

@@ -111,8 +111,32 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           // returns the cached node so React reuses the same instance.
           let rendered = seenRendered.get(key)
           if (!seenRendered.has(key)) {
+            // Always invoke render() — even when the metadata map has
+            // no entry for this marker. Fetch-mode card types
+            // (delivery_item, roadmap_item, internal_task, etc.) don't
+            // ship metadata in the SSE frame; they self-fetch by `id`
+            // via the host's list-API hook, so a minimal {type,id}
+            // ChatRef is all the renderer needs to mount the loader.
+            // For no-fetch types (hubspot_ticket_self, slack_message,
+            // …) without a refMatch the host's render() returns null
+            // and we fall through to the bare-cardId fallback in the
+            // `<a card://…>` override below.
+            //
+            // SYNTHETIC REF DEFAULTS: `ChatRef.title` and `ChatRef.url`
+            // are non-optional in the type; a bare `{type, id}` cast
+            // would lie to consumers that read those fields. Default
+            // `title` to the cardId (so any host renderer that prints
+            // `ref.title` shows the id rather than `undefined`) and
+            // `url` to null (matches the no-link semantics fetch-mode
+            // cards rely on — they resolve their own URL after fetch).
             const refMatch = refs[key]
-            rendered = refMatch ? render(refMatch) : undefined
+            const refForRender: ChatRef = refMatch ?? {
+              type: cardType,
+              id: cardId,
+              title: cardId,
+              url: null,
+            }
+            rendered = render(refForRender)
             seenRendered.set(key, rendered)
           }
           if (React.isValidElement(rendered) && rendered.type === BlockCard) {
@@ -171,15 +195,33 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               const key = `${cardType}:${cardId}`
               const inline = inlineByKey?.get(key)
               if (inline != null) return inline
-              // No renderer, no ref, OR renderer returned null — fall back
-              // to plain text title-only. Use any same-type ref's title if
-              // available; otherwise the bare cardId. Never render the
-              // literal `card://` URL.
+              // Three fallback cases — keep them DISTINCT, never blur them
+              // together. Mixing them up (which the old code did by reaching
+              // for "any same-type ref's title") makes LLM hallucinations
+              // LOOK like real cards, which the user can't tell apart from
+              // genuine references.
+              //
+              //   (1) Exact ref present, renderer returned null:
+              //       The marker is legit (server confirmed the row exists)
+              //       but no compact-card type is registered for `cardType`.
+              //       Render the ref's REAL title as plain text — accurate,
+              //       just no rich UI.
+              //
+              //   (2) Exact ref absent (refs map has no `${cardType}:${cardId}`):
+              //       The LLM emitted a marker for an ID the server did NOT
+              //       surface. Either the LLM hallucinated the id, or the
+              //       refs map and the snapshot drifted (server-side bug
+              //       worth fixing — see `MAX_ROWS_PER_ENTITY_GROUP` in
+              //       `doc-chat-utils.ts:buildSourcesMeta`). Render the raw
+              //       `cardId` so the breakage is VISIBLE; never borrow a
+              //       title from an unrelated ref — that hides the bug and
+              //       deceives the reader into thinking they're looking at
+              //       a real card.
               const refMatch: ChatRef | undefined = refs[key]
-              const fallbackTitle = (refMatch?.title)
-                ?? Object.values(refs).find((r) => r.type === cardType)?.title
-                ?? cardId
-              return <span className="text-ods-text-primary">{fallbackTitle}</span>
+              if (refMatch) {
+                return <span className="text-ods-text-primary">{refMatch.title}</span>
+              }
+              return <span className="text-ods-text-secondary opacity-60">{cardId}</span>
             }
           }
           // Unified click rule — delegated to the host's `NavLinkAnchor`

package/src/components/chat/chat-message-list.tsx

@@ -441,25 +441,33 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
               <div ref={sentinelRef} className="h-px" />
             )}
             <div className="flex-1" />
-            {messages.map((message, index) => (
-              <ChatMessageEnhanced
-                key={message.id}
-                ref={getRegisterMessageEl(message.id)}
-                role={message.role}
-                name={message.name}
-                content={message.content}
-                timestamp={message.timestamp}
-                isTyping={index === messages.length - 1 && isTyping && message.role === 'assistant'}
-                avatar={showAvatars ? message.avatar : null}
-                showAvatar={showAvatars}
-                assistantType={message.assistantType || assistantType}
-                authorType={message.authorType}
-                assistantIcon={message.role !== 'user' ? assistantIcon : undefined}
-                chatRefs={message.chatRefs}
-                renderEntityCard={renderEntityCard}
-                NavLinkAnchor={NavLinkAnchor}
-              />
-            ))}
+            {messages.map((message, index) => {
+              // Hidden messages (synthetic continuation prompts the host
+              // injects after an approval card) are part of the API
+              // conversation history but never render. Skipping here
+              // keeps the visible thread coherent — see
+              // `Message.hidden` doc-comment in message.types.ts.
+              if (message.hidden) return null
+              return (
+                <ChatMessageEnhanced
+                  key={message.id}
+                  ref={getRegisterMessageEl(message.id)}
+                  role={message.role}
+                  name={message.name}
+                  content={message.content}
+                  timestamp={message.timestamp}
+                  isTyping={index === messages.length - 1 && isTyping && message.role === 'assistant'}
+                  avatar={showAvatars ? message.avatar : null}
+                  showAvatar={showAvatars}
+                  assistantType={message.assistantType || assistantType}
+                  authorType={message.authorType}
+                  assistantIcon={message.role !== 'user' ? assistantIcon : undefined}
+                  chatRefs={message.chatRefs}
+                  renderEntityCard={renderEntityCard}
+                  NavLinkAnchor={NavLinkAnchor}
+                />
+              )
+            })}
           </div>
         </div>
 

package/src/components/chat/chat-ticket-item.tsx

@@ -48,12 +48,11 @@ const ChatTicketItem = React.forwardRef<HTMLButtonElement, ChatTicketItemProps>(
             className={cn(
               "text-h3 truncate",
               isResolved ? "text-ods-text-secondary" : "text-ods-text-primary",
-            )}
-          >
+            )} title={ticket.title}>
             {ticket.title}
           </p>
           {subtitle && (
-            <p className="text-h6 text-ods-text-secondary truncate">
+            <p className="text-h6 text-ods-text-secondary truncate" title={subtitle}>
               {subtitle}
             </p>
           )}

package/src/components/chat/types/message.types.ts

@@ -78,8 +78,24 @@ export interface ExecutingToolState {
 
 // ========== Approval Request Types ==========
 
+export interface ApprovalRequestField {
+  /** Short label — e.g. "Subject", "Priority". Rendered in a muted
+   *  caps style above the value. */
+  label: string
+  /** Free-text value. Wraps and line-breaks are preserved
+   *  (`whitespace-pre-wrap`). */
+  value: string
+}
+
 export interface ApprovalRequestData {
   command: string
+  /** Structured field list — preferred over `explanation`. When set,
+   *  the approval card renders a vertical label/value stack with
+   *  proper spacing. Falls back to `explanation` (a single paragraph)
+   *  when omitted. Keep BOTH when you want hosts on older lib
+   *  versions to still see the prose; new hosts should send only
+   *  `fields`. */
+  fields?: ApprovalRequestField[]
   explanation?: string
   icon?: React.ReactNode
   requestId?: string
@@ -333,4 +349,23 @@ export interface Message {
    *  whose body is a long article). The server is the sole decision-
    *  maker — set on the metadata leading frame. */
   scrollAnchor?: ScrollAnchor
+  /** When true the message is part of the API conversation history (sent
+   *  to the LLM so it has context) but is NOT rendered in the chat UI.
+   *
+   *  Used for "synthetic continuation" turns: when the user clicks Approve
+   *  on a tool proposal, the host auto-fires a follow-up `sendMessage`
+   *  with `hidden: true` carrying a directive like "the user just
+   *  approved <tool>; ask follow-up questions per protocol". The LLM's
+   *  response IS rendered (as a normal assistant message); only the
+   *  trigger prompt is suppressed so the chat reads naturally:
+   *
+   *    user: "open a ticket"
+   *    assistant: preamble + approval card
+   *    [user clicks Approve]
+   *    assistant: "Now to triage faster, can you share..."   ← auto-fires
+   *
+   *  Without this flag the trigger prompt would surface as a confusing
+   *  bubble like "(continue per protocol)" between the approval card
+   *  and the AI's follow-up. */
+  hidden?: boolean
 }

package/src/components/features/board/ticket-card.tsx

@@ -99,12 +99,12 @@ export function TicketCard({
   const body = (
     <>
       <div className="flex items-start gap-[var(--spacing-system-sf)]">
-        <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]">
+        <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]" title={ticket.title}>
           <p className="text-h3 truncate text-ods-text-primary">{ticket.title}</p>
           {showDeviceRow && (
             <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-h6 text-ods-text-secondary">
               <LaptopIcon className="size-4 shrink-0" />
-              <span className="truncate">{deviceText}</span>
+              <span className="truncate" title={deviceText}>{deviceText}</span>
             </div>
           )}
         </div>

package/src/components/features/filters-dropdown.tsx

@@ -429,7 +429,7 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
                           )}
                         >
                           <FilterCheckbox checked={isSelected} />
-                          <span className="flex-1 min-w-0 text-h4 text-ods-text-primary truncate">
+                          <span className="flex-1 min-w-0 text-h4 text-ods-text-primary truncate" title={option.label}>
                             {option.label}
                           </span>
                           {option.count !== undefined && (

package/src/components/features/index.ts

@@ -2,6 +2,21 @@
 
 // Feature Components exports
 export { DynamicThemeProvider, useDynamicTheme } from '../providers/dynamic-theme-provider'
+// Canonical ODS theme system — thin wrapper over `next-themes`
+// (manual light/dark, default dark, no-flash handled by next-themes).
+// Headless by design: apps build their own toggle button via the lib's
+// existing <Button> + `useThemeToggle()`.
+export {
+  ThemeProvider,
+  useTheme,
+  useThemeToggle,
+  THEME_STORAGE_KEY,
+  THEME_ATTRIBUTE,
+  DEFAULT_THEME,
+  type Theme,
+  type ThemeProviderProps,
+  type UseThemeToggleResult,
+} from '../providers/theme-provider'
 export * from './array-entry-manager'
 export * from './auth-providers-list'
 export * from './changelog-manager'

package/src/components/features/notifications/notification-tile.tsx

@@ -50,9 +50,9 @@ export function NotificationTile({
         </div>
 
         <div className="flex min-w-0 flex-1 flex-col">
-          {title ? <p className="truncate text-h4 text-ods-text-primary">{title}</p> : null}
+          {title ? <p className="truncate text-h4 text-ods-text-primary" title={typeof title === 'string' ? title : undefined}>{title}</p> : null}
           {description ? (
-            <p className="text-h6 line-clamp-2 text-ods-text-secondary">{description}</p>
+            <p className="text-h6 line-clamp-2 text-ods-text-secondary" title={typeof description === 'string' ? description : undefined}>{description}</p>
           ) : null}
         </div>
 

package/src/components/features/policy-configuration-panel.tsx

@@ -49,7 +49,7 @@ const PolicyRow: React.FC<{
 
       {/* Policy Info */}
       <div className="flex-1 flex flex-col min-w-0">
-        <p className="text-[16px] font-medium text-ods-text-primary truncate">
+        <p className="text-[16px] font-medium text-ods-text-primary truncate" title={policy.name}>
           {policy.name}
         </p>
         <p className="text-[12px] text-ods-text-secondary break-all font-mono">

package/src/components/features/push-button-selector.tsx

@@ -177,7 +177,7 @@ export function PushButtonSelector({
                 {option.displayName || option.name}
               </div>
               {option.description && (
-                <div className="font-['DM_Sans'] text-[12px] text-ods-text-secondary line-clamp-2">
+                <div className="font-['DM_Sans'] text-[12px] text-ods-text-secondary line-clamp-2" title={option.description}>
                   {option.description}
                 </div>
               )}

package/src/components/features/select-button.tsx

@@ -59,7 +59,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
         )}
 
         <span className="flex flex-1 flex-col justify-center min-w-0 overflow-hidden">
-          <span className="md:text-[18px] text-[14px] font-medium text-ods-text-primary truncate">
+          <span className="md:text-[18px] text-[14px] font-medium text-ods-text-primary truncate" title={title}>
             {title}
           </span>
           {description && (
@@ -67,8 +67,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
               className={cn(
                 "text-[14px] font-medium leading-5 truncate hidden md:flex",
                 selected ? "text-ods-accent" : "text-ods-text-secondary",
-              )}
-            >
+              )} title={description}>
               {description}
             </span>
           )}

package/src/components/features/video-bites-display.tsx

@@ -206,7 +206,7 @@ function VideoBiteCard({ url, title, thumbnailUrl }: VideoBiteCardProps) {
       </div>
       {title && (
         <div className="p-4">
-          <p className="text-h4 text-ods-text-primary line-clamp-2">{title}</p>
+          <p className="text-h4 text-ods-text-primary line-clamp-2" title={title}>{title}</p>
         </div>
       )}
     </Card>

package/src/components/features/waitlist-form.tsx

@@ -212,7 +212,7 @@ export function WaitlistForm({
           onKeyDown={handleKeyDown}
         />
         {showPhoneWarning && (
-          <p className="text-h6 absolute bottom-0 left-0 translate-y-full text-[var(--ods-attention-yellow-warning)] truncate">
+          <p className="text-h6 absolute bottom-0 left-0 translate-y-full text-[var(--ods-attention-yellow-warning)] truncate" title={invalidPhoneHint}>
             {invalidPhoneHint}
           </p>
         )}

package/src/components/filter-chip.tsx

@@ -69,7 +69,7 @@ export function FilterChip({
       <span className={cn(
         "truncate font-['DM_Sans'] font-medium leading-none text-center",
         size === 'sm' ? "max-w-[100px] md:max-w-[120px]" : "max-w-[120px] md:max-w-[140px]"
-      )}>
+      )} title={label}>
         {label}
       </span>
       {removable && onRemove && (

package/src/components/layout/title-block.tsx

@@ -77,10 +77,10 @@ export function TitleBlock({
             )}
             <div className="flex flex-col justify-center min-w-0 flex-1">
               {title && (
-                <h1 className="text-h2 text-ods-text-primary truncate">{title}</h1>
+                <h1 className="text-h2 text-ods-text-primary truncate" title={title}>{title}</h1>
               )}
               {subtitle && (
-                <p className="text-h6 text-ods-text-secondary truncate">{subtitle}</p>
+                <p className="text-h6 text-ods-text-secondary truncate" title={subtitle}>{subtitle}</p>
               )}
             </div>
           </div>

package/src/components/navigation/header-organization-filter.tsx

@@ -48,7 +48,7 @@ export function HeaderOrganizationFilter({
         >
           <Filter02Icon className="w-4 h-4 shrink-0 text-ods-text-secondary" />
           <div className="flex flex-col items-start justify-center min-w-0">
-            <span className="font-mono text-sm font-medium leading-5 text-ods-text-primary uppercase tracking-tight truncate">
+            <span className="font-mono text-sm font-medium leading-5 text-ods-text-primary uppercase tracking-tight truncate" title={displayName}>
               {displayName}
             </span>
             {deviceCount !== undefined && (