@flamingo-stack/openframe-frontend-core 0.0.200 → 0.0.201-snapshot.20260521220457

package/dist/index.js

@@ -100,6 +100,7 @@ import {
   CursorPaginationSimple,
   CveLink,
   DEFAULT_OS_PLATFORM,
+  DEFAULT_THEME,
   DashboardInfoCard,
   DataTable,
   DataTableBody,
@@ -142,6 +143,7 @@ import {
   DrawerTrigger,
   DropdownButton,
   DynamicThemeProvider,
+  EntityImage,
   EntitySummaryEditor,
   EntityVideoSection,
   ErrorBoundary,
@@ -258,7 +260,6 @@ import {
   OnboardingStepCard,
   OnboardingWalkthrough,
   OrganizationCard,
-  OrganizationIcon,
   PageActions,
   PageContainer,
   PageError,
@@ -337,6 +338,8 @@ import {
   StatusIndicator,
   StickySectionNav,
   Switch,
+  THEME_ATTRIBUTE,
+  THEME_STORAGE_KEY,
   TMCG_ROLES,
   TMCG_ROLE_DISPLAY_NAMES,
   TMCG_SOCIAL_PLATFORMS,
@@ -362,6 +365,7 @@ import {
   TagsManager,
   TagsSelector,
   Textarea,
+  ThemeProvider,
   ThinkingDisplay,
   TicketAttachmentsList,
   TicketCard,
@@ -503,12 +507,14 @@ import {
   usePageActionsBottomPadding,
   useRealtimeChunkProcessor,
   useSectionNavigation,
+  useTheme,
+  useThemeToggle,
   validateAccessCode,
   validateAndConsumeAccessCode,
   validateEmailDomain,
   validateEmailDomainList,
   validatePhoneNumber
-} from "./chunk-ZOM75JOY.js";
+} from "./chunk-IDULPYOU.js";
 import {
   CommandApprovalToast,
   GraphQLIntrospector,
@@ -622,7 +628,7 @@ import {
   SkeletonText,
   SplitButton,
   buttonVariants
-} from "./chunk-TMD44IKJ.js";
+} from "./chunk-55HF462A.js";
 import {
   AboutIcon,
   AiRobotIcon,
@@ -924,6 +930,7 @@ export {
   CutVendorCostsIcon,
   CveLink,
   DEFAULT_OS_PLATFORM,
+  DEFAULT_THEME,
   DashboardIcon,
   DashboardInfoCard,
   DataTable,
@@ -991,6 +998,7 @@ export {
   EditProfileIcon,
   ElestioLogo,
   EmptyVendorIcon,
+  EntityImage,
   EntitySummaryEditor,
   EntityVideoSection,
   ErrorBoundary,
@@ -1170,7 +1178,6 @@ export {
   OpenSourceIcon,
   OpenmspLogo,
   OrganizationCard,
-  OrganizationIcon,
   OrganizationsIcon,
   PLAY_ICON_PATH,
   PackageIcon,
@@ -1293,6 +1300,8 @@ export {
   StickySectionNav,
   SunIcon,
   Switch,
+  THEME_ATTRIBUTE,
+  THEME_STORAGE_KEY,
   TMCG_ROLES,
   TMCG_ROLE_DISPLAY_NAMES,
   TMCG_SOCIAL_PLATFORMS,
@@ -1320,6 +1329,7 @@ export {
   TagsSelector,
   TelegramIcon,
   Textarea,
+  ThemeProvider,
   ThinkingDisplay,
   ThumbsDownIcon,
   ThumbsUpIcon,
@@ -1558,6 +1568,8 @@ export {
   useSectionNavigation,
   useSmUp,
   useTablePagination,
+  useTheme,
+  useThemeToggle,
   useThrottle,
   useToast,
   useValidatePlatform,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.200",
+  "version": "0.0.201-snapshot.20260521220457",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -211,6 +211,7 @@
     "recharts": "^3.1.0",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark": "^15.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",

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'
     }
   }
 

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/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/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'
@@ -16,7 +31,6 @@ export * from './knowledge-base-links-manager'
 export * from './loading-provider'
 export * from './media-gallery-manager'
 export * from './more-about-button'
-export * from './organization-icon'
 export * from './os-type-badge'
 export * from './os-type-badge-group'
 export * from './parallax-image-showcase'

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

@@ -3,16 +3,10 @@
 import React from 'react'
 import { cn } from '../../utils/cn'
 import type { ActionsMenuGroup } from '../ui/actions-menu'
+import { EntityImage } from '../ui/entity-image'
 import { PageActions, type PageActionButton } from '../ui/page-actions'
 import { BackButton } from './back-button'
 
-function getInitials(name?: string): string {
-  if (!name) return ''
-  const words = name.trim().split(/\s+/)
-  if (words.length === 1) return words[0].charAt(0).toUpperCase()
-  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase()
-}
-
 export interface TitleBlockProps {
   title?: string
   subtitle?: string
@@ -45,14 +39,6 @@ export function TitleBlock({
   className,
 }: TitleBlockProps) {
   const hasActions = actions && actions.length > 0
-  const [imageFailed, setImageFailed] = React.useState(false)
-
-  React.useEffect(() => {
-    setImageFailed(false)
-  }, [image?.src])
-
-  const showImageFallback = !!image && (imageFailed || !image.src)
-  const initials = getInitials(image?.alt || title)
 
   return (
     <div
@@ -83,21 +69,11 @@ export function TitleBlock({
         {(image || subtitle) ? (
           <div className="flex items-center gap-[var(--spacing-system-m)] min-w-0 w-full">
             {image && (
-              showImageFallback ? (
-                <div
-                  aria-label={image.alt}
-                  className="size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border bg-ods-bg flex items-center justify-center text-ods-text-secondary text-h4 select-none"
-                >
-                  {initials || '?'}
-                </div>
-              ) : (
-                <img
-                  src={image.src}
-                  alt={image.alt ?? ''}
-                  onError={() => setImageFailed(true)}
-                  className="size-[52px] md:size-[60px] shrink-0 rounded-md border border-ods-border object-cover"
-                />
-              )
+              <EntityImage
+                src={image.src}
+                alt={image.alt}
+                fallbackText={image.alt || title}
+              />
             )}
             <div className="flex flex-col justify-center min-w-0 flex-1">
               {title && (