@flamingo-stack/openframe-frontend-core 0.0.336 → 0.0.337-snapshot.20260629165153

package/src/components/features/video-source-selector.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 import { Upload, Sparkles, X, Video, Loader2 } from 'lucide-react';
+import { AIGeneratedBadge } from '../ui/ai-generated-badge';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
@@ -201,10 +202,7 @@ export function VideoSourceSelector({
             <div className="flex items-center gap-2">
               <Label>{uploadLabel}</Label>
               {showAIBadge && isAIGenerated && (
-                <Badge variant="secondary" className="flex items-center gap-1">
-                  <Sparkles className="h-3 w-3" />
-                  AI Generated
-                </Badge>
+                <AIGeneratedBadge />
               )}
             </div>
             <Button

package/src/components/shared/product-release/release-detail-page.tsx

@@ -402,7 +402,7 @@ export function ReleaseDetailPage({
           isBreaking
           hideTitle
           icon={<AlertTriangle className="h-6 w-6" />}
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
         {/* Features / Bugs / Improvements use `previewFirst` — same
             progressive-disclosure pattern as the investor-update detail
@@ -415,21 +415,21 @@ export function ReleaseDetailPage({
           entries={featuresAdded || []}
           icon={<Sparkles className="h-6 w-6" />}
           previewFirst
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Bugs Fixed"
           entries={bugFixed || []}
           icon={<Wrench className="h-6 w-6" />}
           previewFirst
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Improvements"
           entries={improvements || []}
           icon={<TrendingUp className="h-6 w-6" />}
           previewFirst
-          SimpleMarkdownRenderer={MarkdownRenderer}
+          MarkdownRenderer={MarkdownRenderer}
         />
 
         {/* Video Bites Section - Only when VideoDisplaySection is not handling it */}

package/src/components/ui/ai-generated-badge.tsx

@@ -0,0 +1,17 @@
+import { Badge } from './badge';
+import { Sparkles } from 'lucide-react';
+
+/**
+ * Canonical "AI Generated" chip (Sparkles + label). Single source of truth for
+ * every AI-generated indicator across the app — replaces the byte-identical
+ * inline `<Badge variant="secondary"><Sparkles/> AI Generated</Badge>` that was
+ * copy-pasted across the summary / video / SEO editors.
+ */
+export function AIGeneratedBadge({ className }: { className?: string }) {
+  return (
+    <Badge variant="secondary" className={`flex items-center gap-1${className ? ` ${className}` : ''}`}>
+      <Sparkles className="h-3 w-3" />
+      AI Generated
+    </Badge>
+  );
+}

package/src/components/ui/index.ts

@@ -52,6 +52,7 @@ export * from './tab-navigation'
 // Feedback components
 export * from './alert'
 export * from './badge'
+export * from './ai-generated-badge'
 export * from './progress'
 export * from './release-changelog-section'
 export * from './status-badge'

package/src/components/ui/info-card.tsx

@@ -29,6 +29,8 @@ export interface InfoCardData {
     label?: string
     value: string | string[]
     copyable?: boolean
+    /** Optional trailing icon/logo (e.g. an SVG) rendered next to the value */
+    icon?: React.ReactNode
   }>
   progress?: {
     value: number
@@ -83,6 +85,7 @@ export function InfoCard({ data, className = '' }: InfoCardProps) {
                   value={val}
                   showLabel={valIndex === 0}
                   copyable={item.copyable}
+                  icon={valIndex === 0 ? item.icon : undefined}
                   copyAriaLabel={`Copy ${item.label ?? 'value'} ${valIndex + 1}`}
                 />
               ))}
@@ -136,10 +139,11 @@ interface InfoCardValueRowProps {
   value: string
   showLabel: boolean
   copyable?: boolean
+  icon?: React.ReactNode
   copyAriaLabel: string
 }
 
-function InfoCardValueRow({ label, value, showLabel, copyable, copyAriaLabel }: InfoCardValueRowProps) {
+function InfoCardValueRow({ label, value, showLabel, copyable, icon, copyAriaLabel }: InfoCardValueRowProps) {
   const { copy, copied } = useCopyToClipboard()
 
   return (
@@ -155,6 +159,7 @@ function InfoCardValueRow({ label, value, showLabel, copyable, copyAriaLabel }:
         >
           {value}
         </span>
+        {icon}
         {copyable && (
           <button
             type="button"

package/src/components/ui/release-changelog-section.tsx

@@ -36,7 +36,7 @@ interface ReleaseChangelogSectionProps {
    *  the lib's `RichMarkdownRenderer` so changelog rich-link previews
    *  (YouTube, OG cards, etc.) work out of the box. Hosts that already
    *  wrap with a Supabase-aware preset can keep passing their own. */
-  SimpleMarkdownRenderer?: React.ComponentType<{ content: string }>;
+  MarkdownRenderer?: React.ComponentType<{ content: string }>;
 }
 
 // Collapsed height for the preview-first mode. ~120px shows the first
@@ -52,7 +52,7 @@ export function ReleaseChangelogSection({
   defaultCollapsed = true,
   previewFirst = false,
   icon,
-  SimpleMarkdownRenderer = RichMarkdownRenderer,
+  MarkdownRenderer = RichMarkdownRenderer,
 }: ReleaseChangelogSectionProps) {
   const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
   const [previewExpanded, setPreviewExpanded] = useState(false);
@@ -126,7 +126,7 @@ export function ReleaseChangelogSection({
                 } : {}),
               }}
             >
-              <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
+              <ChangelogEntryList entries={entries} MarkdownRenderer={MarkdownRenderer} />
             </div>
             {previewNeedsFade && (
               <button
@@ -142,7 +142,7 @@ export function ReleaseChangelogSection({
             )}
           </div>
         ) : (
-          <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
+          <ChangelogEntryList entries={entries} MarkdownRenderer={MarkdownRenderer} />
         )
       )}
     </div>
@@ -156,31 +156,36 @@ export function ReleaseChangelogSection({
  */
 function ChangelogEntryList({
   entries,
-  SimpleMarkdownRenderer,
+  MarkdownRenderer,
 }: {
   entries: ChangelogEntry[];
-  SimpleMarkdownRenderer: React.ComponentType<{ content: string }>;
+  MarkdownRenderer: React.ComponentType<{ content: string }>;
 }) {
   return (
     <ul className="space-y-6">
       {entries.map((entry, index) => (
         <li key={index} className="border-l-2 border-ods-border pl-4 ml-0">
-          {/* Entry title — `text-h3` is body family + BOLD weight (per
-              ODS tokens: `--font-h3-weight: var(--font-weight-bold)`)
-              at 14/18px responsive. Same body size as the description
-              below, distinguished by weight — clean visual hierarchy
-              without inflating the body scale. */}
-          <p className="text-h3 text-ods-text-primary mb-2">{entry.title}</p>
+          {/* Entry title — run through the SAME markdown renderer as the
+              description so inline markdown (links like `[label](url)`,
+              emphasis) renders instead of showing as raw text, then pinned
+              back to the `text-h3` body+BOLD scale (per ODS tokens:
+              `--font-h3-weight: var(--font-weight-bold)`, 14/18px responsive)
+              so plain-text titles look exactly as before. `[&_p]:!my-0`
+              strips the renderer's paragraph margins; `mb-2` keeps the gap to
+              the description. */}
+          <div className="text-h3 text-ods-text-primary mb-2 [&_p]:!text-[length:var(--font-size-h3-body)] [&_p]:!leading-[var(--font-line-space-h3-body)] [&_p]:!font-bold [&_p]:!my-0 [&_p+p]:!mt-2">
+            <MarkdownRenderer content={entry.title} />
+          </div>
           {entry.description && (
             /* Entry description — body text matches the main release
                summary at the SAME 14/18px responsive `text-h4` scale.
-               The `SimpleMarkdownRenderer` forces its own `<p>` typography
+               The `MarkdownRenderer` forces its own `<p>` typography
                which would override `text-h4` on `lg+` viewports and
                inflate the changelog body to 20px. The `[&_p]:!` overrides
                pin every descendant `<p>` back to the h4 responsive tokens
                so the breakpoints stay aligned with the rest of the page. */
             <div className="text-h4 text-ods-text-primary [&_p]:!text-[length:var(--font-size-h4-body)] [&_p]:!leading-[var(--font-line-space-h4-body)] [&_p]:!font-medium">
-              <SimpleMarkdownRenderer content={entry.description} />
+              <MarkdownRenderer content={entry.description} />
             </div>
           )}
         </li>

package/src/components/ui/table/table-skeleton.tsx

@@ -16,6 +16,10 @@ export function TableCardSkeleton({
   className,
   rowClassName
 }: TableCardSkeletonProps) {
+  // The multi-line placeholder belongs to the primary text column — the wide,
+  // GROWING one (`flex-1` / `flex-[n]`), not necessarily the first column, which
+  // may be a narrow leading action/icon column. Falls back to the first column.
+  const primaryKey = (columns.find((c) => /flex-(1|\[)/.test(c.width || '')) ?? columns[0])?.key
   return (
     <>
       {Array.from({ length: rows }).map((_, index) => (
@@ -41,8 +45,8 @@ export function TableCardSkeleton({
                 )}
               >
                 <div className="h-5 bg-ods-bg-surface rounded w-3/4 mb-1" />
-                {/* Add second line for some columns to simulate multi-line content */}
-                {index % 2 === 0 && column.key === columns[0].key && (
+                {/* second line simulates multi-line content on the primary column */}
+                {index % 2 === 0 && column.key === primaryKey && (
                   <div className="h-4 bg-ods-bg-surface rounded w-1/2 opacity-60" />
                 )}
               </div>

package/src/stories/InfoCard.stories.tsx

@@ -103,6 +103,28 @@ export const WithCopyableValues: Story = {
   ),
 }
 
+export const WithItemIcon: Story = {
+  args: {
+    data: {
+      items: [
+        { label: 'toolEventId', value: 'fleet_67890abcdef123456' },
+        { label: 'ingestDay', value: '2024-01-20' },
+        {
+          label: 'toolType',
+          value: 'Fleet',
+          icon: <ShieldCheckIcon size={16} className="text-ods-text-secondary" />,
+        },
+        { label: 'severity', value: 'ERROR' },
+      ],
+    },
+  },
+  render: (args) => (
+    <div className="w-96">
+      <InfoCard {...args} />
+    </div>
+  ),
+}
+
 export const WithFooter: Story = {
   args: {
     data: {