@flamingo-stack/openframe-frontend-core 0.0.231 → 0.0.232-snapshot.20260608164341

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

@@ -1,32 +1,63 @@
+import Link from 'next/link'
 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
+  /**
+   * When set, each badge links to `${basePath}?tags=${slug}` (clickable, SPA nav
+   * via next/link). Omit for a non-interactive display (badges with no slug also
+   * render non-interactive even when basePath is set).
+   */
+  basePath?: string
+  /** Cap visible badges; the remainder collapse into a "+N" badge. */
+  max?: number
   /** Extra classes on the wrapper row. */
   className?: string
 }
 
+// The ONE tag-badge skin (OpenFrame design): rounded-rect, font-mono uppercase
+// StatusBadge on ods-card + ods-border. Clickable badges add the accent hover.
+const BADGE_CLASS = 'bg-ods-card border border-ods-border'
+
 /**
- * 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.
+ * THE single tag-badge renderer for the whole product (hub + lib). Renders the
+ * OpenFrame `StatusBadge` chip skin for a flat `<entity>_tags[]` array, optionally
+ * clickable (links each tag to its filtered list via `basePath`). The hub's
+ * `EntityTagList` delegates here so there is exactly one tag-display design.
+ * Renders nothing when there are no tags.
  */
-export function EntityTagBadges({ tags, className }: EntityTagBadgesProps) {
-  if (!tags || tags.length === 0) return null
+export function EntityTagBadges({ tags, basePath, max, className }: EntityTagBadgesProps) {
+  const items = (tags || []).filter((t): t is TagAssoc => !!t && !!t.name)
+  if (items.length === 0) return null
+
+  // Only null/undefined means "no cap"; max={0} shows none, negatives clamp to 0.
+  const visibleLimit = max == null ? items.length : Math.max(0, max)
+  const shown = items.slice(0, visibleLimit)
+  const overflow = items.length - shown.length
+
   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 className={`flex flex-wrap items-center gap-2 w-full ${className || ''}`}>
+      {shown.map((tag) => {
+        const key = tag.tag_id ?? tag.id ?? tag.slug ?? tag.name
+        const label = (tag.name || '').toUpperCase()
+        if (basePath && tag.slug) {
+          return (
+            <Link key={key} href={`${basePath}?tags=${tag.slug}`} className="inline-flex">
+              <StatusBadge
+                text={label}
+                variant="card"
+                className={`${BADGE_CLASS} cursor-pointer transition-colors hover:border-ods-accent`}
+              />
+            </Link>
+          )
+        }
+        return <StatusBadge key={key} text={label} variant="card" className={BADGE_CLASS} />
+      })}
+      {overflow > 0 && (
+        <StatusBadge text={`+${overflow}`} variant="card" className={`${BADGE_CLASS} text-ods-text-secondary`} />
+      )}
     </div>
   )
 }

package/src/components/ui/search-input.tsx

@@ -114,13 +114,16 @@ const innerInputStyles = cn(
 // Helper: chip variant → Tag variant mapping
 // ---------------------------------------------------------------------------
 
-function chipVariantToTagVariant(variant?: FilterChipData["variant"]): "primary" | "outline" {
+function chipVariantToTagVariant(variant?: FilterChipData["variant"]): "primary" | "outline" | "badge" {
   switch (variant) {
     case "selected":
       return "primary"
+    // Content tags render with the unified badge skin (ods-card + ods-border,
+    // mono uppercase) — identical to the public EntityTagBadges display.
+    case "tag":
+      return "badge"
     case "category":
     case "subcategory":
-    case "tag":
     default:
       return "outline"
   }

package/src/components/ui/tag.tsx

@@ -42,6 +42,13 @@ const tagVariants = cva(
           "bg-[var(--ods-system-greys-soft-grey)] text-[var(--ods-system-greys-grey)]",
           "hover:bg-[var(--ods-system-greys-soft-grey-hover)] active:bg-[var(--ods-system-greys-soft-grey-action)]",
         ],
+        // Matches the EntityTagBadges / StatusBadge tag skin (ods-card + ods-border,
+        // mono uppercase) so the tag-editor chips render identically to the public
+        // tag badges. Used for FilterChipData variant 'tag' (see search-input).
+        badge: [
+          "bg-ods-card text-ods-text-primary border border-ods-border font-mono uppercase tracking-wide",
+          "hover:border-ods-accent transition-colors",
+        ],
       },
     },
     defaultVariants: {