@flamingo-stack/openframe-frontend-core 0.0.230 → 0.0.231-snapshot.20260608073228

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.230",
+  "version": "0.0.231-snapshot.20260608073228",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/hooks/use-realtime-chunk-processor.ts

@@ -15,6 +15,11 @@ import { MESSAGE_TYPE } from '../types'
 import type { UseRealtimeChunkProcessorReturn, UseRealtimeChunkProcessorOptions, ChatApprovalStatus, PendingToolCallData } from '../types'
 import { getCommandText } from '../utils/tool-call-helpers'
 
+// Actions allowed through once the dialog is in direct mode. Everything else is
+// an AI-assistant chunk and gets dropped — an allowlist so any future assistant
+// action is blocked by default.
+const DIRECT_MODE_ALLOWED = new Set(['direct_message', 'message_request', 'system', 'dialog_closed'])
+
 /**
  * Hook for processing real-time NATS chunks into message segments
  */
@@ -31,6 +36,7 @@ export function useRealtimeChunkProcessor(
     // tickets view). Default ON so consumers that haven't wired the flag yet
     // get the new batch UI; pass `false` explicitly to fall back to legacy.
     batchApprovalsEnabled = true,
+    isDirectMode = false,
   } = options
 
   const accumulatorRef = useRef<MessageSegmentAccumulator>(
@@ -72,6 +78,14 @@ export function useRealtimeChunkProcessor(
   // resumed-dialog initializeWithState.
   const hasEverStreamedRef = useRef(false)
 
+  // Direct-mode barrier: once engaged, AI-assistant chunks are dropped. Engaged
+  // by the host flag (optimistic) or by an in-order DIRECT_MESSAGE chunk.
+  const directModeFlagRef = useRef(isDirectMode)
+  const sawDirectMessageRef = useRef(false)
+  useEffect(() => {
+    directModeFlagRef.current = isDirectMode
+  }, [isDirectMode])
+
   // Track pending escalated approvals (single or batch)
   const pendingEscalatedRef = useRef<
     Map<string, { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }>
@@ -93,6 +107,19 @@ export function useRealtimeChunkProcessor(
 
       const accumulator = accumulatorRef.current
 
+      if (action.action === 'direct_message') sawDirectMessageRef.current = true
+
+      if ((directModeFlagRef.current || sawDirectMessageRef.current) && !DIRECT_MODE_ALLOWED.has(action.action)) {
+        // Hard stop: tear down an open AI stream exactly once so the typing
+        // indicator and half-rendered bubble clear, then drop the chunk.
+        if (isInStreamRef.current) {
+          isInStreamRef.current = false
+          callbacks.onStreamEnd?.()
+          accumulator.resetSegments()
+        }
+        return
+      }
+
       switch (action.action) {
         case 'message_start':
           isInStreamRef.current = true
@@ -362,6 +389,7 @@ export function useRealtimeChunkProcessor(
     accumulatorRef.current.reset()
     pendingEscalatedRef.current.clear()
     hasInitializedWithData.current = false
+    sawDirectMessageRef.current = false
   }, [])
 
   const updateApprovalStatus = useCallback(

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

@@ -243,6 +243,20 @@ export interface UseRealtimeChunkProcessorOptions {
    * dropped from the UI in the unfolded mode.
    */
   batchApprovalsEnabled?: boolean
+  /**
+   * Engages the direct-mode barrier optimistically: once true, all AI-assistant
+   * chunks (text, thinking, tool executions, approvals, metadata, errors, etc.)
+   * are dropped and any open stream is torn down, leaving only human/control
+   * messages. A `DIRECT_MESSAGE` chunk engages the same barrier automatically
+   * regardless of this flag. Pass this from a host that already knows the dialog
+   * switched to direct mode (e.g. an optimistic mode toggle) to close the race
+   * window before the server emits the first `DIRECT_MESSAGE`.
+   *
+   * Do NOT set this when the host reconstructs history by replaying chunks
+   * through `processChunk` — a static flag would drop legitimate pre-switch AI
+   * history. Rely on the in-order `DIRECT_MESSAGE` detection instead.
+   */
+  isDirectMode?: boolean
 }
 
 export interface UseRealtimeChunkProcessorReturn {

package/src/components/features/entity-tag-badges.tsx

@@ -0,0 +1,32 @@
+import { StatusBadge } from '../ui/status-badge'
+import type { TagAssoc } from '../../types/blog'
+
+interface EntityTagBadgesProps {
+  /** Flat `<entity>_tags[]` association array (from entity_tags hydration). */
+  tags?: TagAssoc[] | null
+  /** Extra classes on the wrapper row. */
+  className?: string
+}
+
+/**
+ * The single lib-side tag-badge renderer for detail views (release, onboarding
+ * guide, …). Lib-package analogue of the hub's `EntityTagList` — the hub can't
+ * be imported here, so this lives in the lib and is reused across lib detail
+ * pages instead of each one re-implementing the StatusBadge chip row. Renders
+ * nothing when there are no tags.
+ */
+export function EntityTagBadges({ tags, className }: EntityTagBadgesProps) {
+  if (!tags || tags.length === 0) return null
+  return (
+    <div className={`flex flex-wrap gap-2 w-full ${className || ''}`}>
+      {tags.map((tag) => (
+        <StatusBadge
+          key={tag.tag_id ?? tag.id}
+          text={(tag.name || '').toUpperCase()}
+          variant="card"
+          className="bg-ods-card border border-ods-border"
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/features/index.ts

@@ -23,6 +23,7 @@ export * from './changelog-manager'
 export * from './changelog-sections-manager'
 export * from './clickup-tasks-manager'
 export * from './command-box'
+export * from './entity-tag-badges'
 export * from './error-boundary'
 export * from './figma-prototype-viewer'
 export * from './filters-dropdown'

package/src/components/features/tags-selector.tsx

@@ -117,22 +117,22 @@ export function TagsSelector({
           {getSelectedTags().map((tag) => (
             <span
               key={tag.id}
-              className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-ods-accent text-ods-bg text-xs font-medium font-['DM_Sans']"
+              className="inline-flex items-center gap-1 pl-2.5 pr-1 py-1 rounded-md bg-ods-accent/15 border border-ods-accent/30 text-ods-text-primary text-[13px] leading-none font-medium font-['DM_Sans']"
             >
               {tag.name}
               {!disabled && (
-                <Button
-                  variant="transparent"
+                <button
                   type="button"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     handleTagRemove(tag.id);
                   }}
-                  leftIcon={<X className="w-2.5 h-2.5" />}
-                  className="w-3 h-3 p-0 min-h-0 min-w-0 ml-0.5 hover:opacity-70 text-ods-bg hover:bg-transparent"
+                  className="inline-flex items-center justify-center w-4 h-4 rounded-full text-ods-text-secondary hover:text-ods-text-primary hover:bg-ods-accent/20 transition-colors"
                   aria-label={`Remove ${tag.name}`}
-                />
+                >
+                  <X className="w-3 h-3" />
+                </button>
               )}
             </span>
           ))}

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -26,6 +26,7 @@ import { VideoBitesDisplay } from '../features/video-bites-display'
 import { useVideoWarmup } from '../features/use-video-warmup'
 import { getCaptionsUrl } from '../features/captions-url'
 import { SimpleMarkdownRenderer } from '../ui/simple-markdown-renderer'
+import { EntityTagBadges } from '../features/entity-tag-badges'
 import { LoadError } from '../ui/error-state'
 import { EntityAuthorCard } from '../chat/entity-cards/entity-author-card'
 import { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card'
@@ -128,6 +129,9 @@ export function OnboardingGuideDetailView({
 
         <h1 className="text-h1 tracking-[-1.12px] text-ods-text-primary">{guide.title}</h1>
 
+        {/* Tags — flat onboarding_guide_tags[] from entity_tags. */}
+        <EntityTagBadges tags={(guide as any).onboarding_guide_tags} />
+
         {/* Metadata grid — Section · Step | Published | Author. */}
         <EntityAuthorCard
           author={guide.author}

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

@@ -7,7 +7,7 @@ import { Card, CardContent } from '../../ui/card';
 import { ArticleDetailLayout } from '../../layout/article-detail-layout';
 import { BackButton } from '../../layout/back-button';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
-import { StatusBadge } from '../../ui/status-badge';
+import { EntityTagBadges } from '../../features/entity-tag-badges';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { GitHubIcon } from '../../icons/github-icon';
@@ -17,6 +17,7 @@ import { nameInitials } from '../../../utils/format';
 import { Video } from '../../features/video';
 import { DetailPageSkeleton } from '../detail-page-skeleton';
 import type { ChangelogEntry } from '../../../types/product-release';
+import type { TagAssoc } from '../../../types/blog';
 import type { VideoTeaser } from '../../../types/video-processing';
 
 // Types for injectable components
@@ -202,7 +203,6 @@ export function ReleaseDetailPage({
   const releaseDate = release.release_date as string;
   const releaseType = release.release_type as string;
   const releaseStatus = release.release_status as string;
-  const blogTags = release.blog_tags as Array<{ id?: string; name?: string; blog_tags?: { id: string; name: string } }> | undefined;
   const releaseMedia = release.release_media as Array<{ id?: string; media_type: string; media_url: string; title?: string }> | undefined;
   const author = release.author as { avatar_url?: string; full_name?: string } | undefined;
   const githubReleases = release.github_releases as Array<{ id: string; github_release_url: string }> | undefined;
@@ -246,18 +246,8 @@ export function ReleaseDetailPage({
           </div>
         </div>
 
-        {/* Category Tags */}
-        <div className="flex flex-wrap gap-2 w-full">
-          {/* Blog Tags */}
-          {blogTags?.map((tag) => (
-            <StatusBadge
-              key={tag.id || tag.blog_tags?.id}
-              text={(tag.name || tag.blog_tags?.name || '').toUpperCase()}
-              variant="card"
-              className="bg-ods-card border border-ods-border"
-            />
-          ))}
-        </div>
+        {/* Tags — flat product_release_tags[] from entity_tags */}
+        <EntityTagBadges tags={release.product_release_tags as TagAssoc[] | undefined} />
 
         {/* Metadata Grid */}
         <div className="grid grid-cols-1 md:grid-cols-4 border border-ods-border rounded-md overflow-hidden w-full">

package/src/components/unified-filter-logic.tsx

@@ -45,7 +45,7 @@ export function useUnifiedFiltering(config: FilterConfig) {
     const search = searchParams?.get('search') || undefined
     const categories = searchParams?.get('category')?.split(',').filter(Boolean) || []
     const subcategories = searchParams?.get('subcategory')?.split(',').filter(Boolean) || []
-    const tags = searchParams?.get('tag')?.split(',').filter(Boolean) || []
+    const tags = searchParams?.get('tags')?.split(',').filter(Boolean) || []
     const filters = searchParams?.getAll('filter') || []
     const pricing = searchParams?.get('pricing') || undefined
     const page = parseInt(searchParams?.get('page') || "1")
@@ -88,9 +88,10 @@ export function useUnifiedFiltering(config: FilterConfig) {
       params.set('subcategory', updatedState.subcategories.join(','))
     }
 
-    // Add tag parameters (AND logic - all must match)
+    // Add tag parameters (AND logic - all must match). Unified `?tags=` param
+    // (matches blog/case-study/media/publication).
     if (updatedState.tags && updatedState.tags.length > 0 && config.supportedFilters.tags) {
-      params.set('tag', updatedState.tags.join(','))
+      params.set('tags', updatedState.tags.join(','))
     }
 
     // Add filter parameters (AND logic - all must match)

package/src/types/blog.ts

@@ -45,7 +45,8 @@ export interface BlogPost {
   };
   blog_post_platforms?: BlogPostPlatform[];
   blog_post_categories?: BlogPostCategory[];
-  blog_post_tags?: BlogPostTag[];
+  // Flat unified tag-association shape (hydrated by entity-tag-utils).
+  blog_post_tags?: TagAssoc[];
   blog_media_assets?: BlogMediaAsset[];
 }
 
@@ -70,6 +71,19 @@ export interface BlogPostTag {
   blog_tags?: BlogTag;
 }
 
+/**
+ * Flat per-entity tag association — the unified shape hydrated onto every
+ * taggable entity's `<entity>_tags[]` array (mirrors the platform `*_platforms`
+ * association shape). `tag_id` is always present; `id`/`name`/`slug` come from
+ * the embedded vocabulary row. Replaces the legacy nested `{ blog_tags: {...} }`.
+ */
+export interface TagAssoc {
+  tag_id: number;
+  id?: number;
+  name?: string;
+  slug?: string;
+}
+
 export interface BlogCategory {
   id: number;
   name: string;

package/src/types/case-study.ts

@@ -2,7 +2,7 @@
 // Following the blog.ts pattern for consistency
 
 import type { PlatformRecord } from './platform'
-import type { BlogTag } from './blog'
+import type { BlogTag, TagAssoc } from './blog'
 import type { MSP } from './stack'
 import type { UserProfile } from './user'
 import type { VideoTeaser, CustomerInterview } from './customer-interview'
@@ -64,10 +64,8 @@ export interface CaseStudy {
     is_featured: boolean
     featured_order: number | null
   }>
-  case_study_tags?: Array<{
-    tag_id: number
-  }>
-  blog_tags?: BlogTag[]
+  // Flat unified tag-association shape (hydrated by entity-tag-utils).
+  case_study_tags?: TagAssoc[]
 }
 
 export interface CreateCaseStudyData {

package/src/types/product-release.ts

@@ -2,7 +2,7 @@
 // Following the blog.ts pattern for consistency
 
 import type { PlatformRecord } from './platform'
-import type { BlogTag } from './blog'
+import type { BlogTag, TagAssoc } from './blog'
 import type { VideoTeaser, TranscriptWord, SpeakerMapping } from './video-processing'
 
 export interface ChangelogEntry {
@@ -162,10 +162,8 @@ export interface ProductRelease {
     name?: string
     display_name?: string
   }>
-  product_release_tags?: Array<{
-    tag_id: number
-  }>
-  blog_tags?: BlogTag[]
+  // Flat unified tag-association shape (hydrated by entity-tag-utils).
+  product_release_tags?: TagAssoc[]
 }
 
 export interface CreateProductReleaseData {

package/src/types/supabase.ts

@@ -61,7 +61,6 @@ export type Database = {
           icon_type: string | null
           id: string
           is_active: boolean | null
-          platform_id: string | null
           title: string
           updated_at: string | null
         }
@@ -75,7 +74,6 @@ export type Database = {
           icon_type?: string | null
           id?: string
           is_active?: boolean | null
-          platform_id?: string | null
           title: string
           updated_at?: string | null
         }
@@ -89,18 +87,10 @@ export type Database = {
           icon_type?: string | null
           id?: string
           is_active?: boolean | null
-          platform_id?: string | null
           title?: string
           updated_at?: string | null
         }
         Relationships: [
-          {
-            foreignKeyName: "announcements_platform_id_fkey"
-            columns: ["platform_id"]
-            isOneToOne: false
-            referencedRelation: "platforms"
-            referencedColumns: ["id"]
-          },
         ]
       }
       slack_channels: {
@@ -299,7 +289,6 @@ export type Database = {
           published_at: string | null
           external_url: string | null
           hosts: Json | null
-          platform_id: string
           is_deleted: boolean | null
           last_synced_at: string | null
           created_at: string | null
@@ -320,7 +309,6 @@ export type Database = {
           published_at?: string | null
           external_url?: string | null
           hosts?: Json | null
-          platform_id: string
           is_deleted?: boolean | null
           last_synced_at?: string | null
           created_at?: string | null
@@ -341,20 +329,12 @@ export type Database = {
           published_at?: string | null
           external_url?: string | null
           hosts?: Json | null
-          platform_id?: string
           is_deleted?: boolean | null
           last_synced_at?: string | null
           created_at?: string | null
           updated_at?: string | null
         }
         Relationships: [
-          {
-            foreignKeyName: "podcast_episodes_platform_id_fkey"
-            columns: ["platform_id"]
-            isOneToOne: false
-            referencedRelation: "platforms"
-            referencedColumns: ["id"]
-          },
         ]
       }
       webinars: {
@@ -370,7 +350,6 @@ export type Database = {
           registration_url: string | null
           main_video_url: string | null
           hosts: Json | null
-          platform_id: string
           is_deleted: boolean | null
           last_synced_at: string | null
           created_at: string | null
@@ -388,7 +367,6 @@ export type Database = {
           registration_url?: string | null
           main_video_url?: string | null
           hosts?: Json | null
-          platform_id: string
           is_deleted?: boolean | null
           last_synced_at?: string | null
           created_at?: string | null
@@ -406,20 +384,12 @@ export type Database = {
           registration_url?: string | null
           main_video_url?: string | null
           hosts?: Json | null
-          platform_id?: string
           is_deleted?: boolean | null
           last_synced_at?: string | null
           created_at?: string | null
           updated_at?: string | null
         }
         Relationships: [
-          {
-            foreignKeyName: "webinars_platform_id_fkey"
-            columns: ["platform_id"]
-            isOneToOne: false
-            referencedRelation: "platforms"
-            referencedColumns: ["id"]
-          },
         ]
       }
       luma_events: {
@@ -445,7 +415,6 @@ export type Database = {
           registration_questions: Json | null
           tags: string[] | null
           guest_count: number | null
-          platform_id: string
           is_deleted: boolean | null
           last_synced_at: string | null
           created_at: string | null
@@ -473,7 +442,6 @@ export type Database = {
           registration_questions?: Json | null
           tags?: string[] | null
           guest_count?: number | null
-          platform_id: string
           is_deleted?: boolean | null
           last_synced_at?: string | null
           created_at?: string | null
@@ -501,20 +469,12 @@ export type Database = {
           registration_questions?: Json | null
           tags?: string[] | null
           guest_count?: number | null
-          platform_id?: string
           is_deleted?: boolean | null
           last_synced_at?: string | null
           created_at?: string | null
           updated_at?: string | null
         }
         Relationships: [
-          {
-            foreignKeyName: "luma_events_platform_id_fkey"
-            columns: ["platform_id"]
-            isOneToOne: false
-            referencedRelation: "platforms"
-            referencedColumns: ["id"]
-          },
         ]
       }
       vendor_github_stats: {