@flamingo-stack/openframe-frontend-core 0.0.579 → 0.0.580-1958.5358.1

package/src/components/chat/utils/message-segment-accumulator.ts

@@ -155,22 +155,6 @@ export class MessageSegmentAccumulator {
     return this.getSegments();
   }
 
-  /**
-   * Append guide text to the current message.
-   * If the last segment is guide, append to it; otherwise start a new guide segment.
-   */
-  appendGuide(text: string): MessageSegment[] {
-    const lastSegment = this.segments[this.segments.length - 1];
-
-    if (lastSegment && lastSegment.type === 'guide') {
-      this.segments[this.segments.length - 1] = { type: 'guide', text: lastSegment.text + text };
-    } else {
-      this.segments.push({ type: 'guide', text });
-    }
-
-    return this.getSegments();
-  }
-
   /**
    * Add a clarification (ask) card. Unlike the three delta streams an ask
    * arrives whole in one chunk, so it is always a NEW segment — never merged
@@ -325,15 +309,11 @@ export class MessageSegmentAccumulator {
     status: ChatApprovalStatus = 'pending',
     /** Structured label/value rows. The card prefers them over `explanation`
      *  (see `ApprovalRequestData.fields`). Optional because the agent's own
-     *  approvals carry prose; a Product Guide card is almost entirely fields —
-     *  dropping them here left it as a bare title. */
+     *  approvals carry prose. */
     fields?: ApprovalRequestField[],
-    /** Where the card came from; `'guide'` keeps it inline (see
-     *  `ApprovalRequestData.origin`). */
-    origin?: 'guide',
   ): MessageSegment[] {
     this.segments.push(
-      this.buildApprovalRequestSegment(requestId, { command, explanation, approvalType, fields, origin }, status),
+      this.buildApprovalRequestSegment(requestId, { command, explanation, approvalType, fields }, status),
     );
     return this.getSegments();
   }
@@ -344,7 +324,7 @@ export class MessageSegmentAccumulator {
    * Three paths produce these: `addApprovalRequest` (live stream and replay),
    * `flushPendingApprovals` (tracked-but-unresolved after a history replay) and
    * `processApprovalResult` (a result arriving for a tracked request). They used
-   * to hand-write the object each, which is how `fields` and `origin` reached
+   * to hand-write the object each, which is how `fields` reached
    * the card down one path and not the others — the same proposal rendering as a
    * bare title, or losing the marker that routes its buttons to the hub.
    */
@@ -361,7 +341,6 @@ export class MessageSegmentAccumulator {
         requestId,
         approvalType: approval.approvalType,
         ...(approval.fields && approval.fields.length > 0 ? { fields: approval.fields } : {}),
-        ...(approval.origin ? { origin: approval.origin } : {}),
       },
       status,
       onApprove: this.callbacks.onApprove,
@@ -389,9 +368,6 @@ export class MessageSegmentAccumulator {
     status: ChatApprovalStatus = 'pending',
     executions?: Record<string, ApprovalBatchExecutionState>,
     resolvedByName?: string | null,
-    /** Where the batch came from; `'guide'` keeps it inline and routes it to
-     *  the hub, exactly as for a single card (see `ApprovalBatchData.origin`). */
-    origin?: 'guide',
   ): MessageSegment[] {
     const existingIndex = this.segments.findIndex(
       (s): s is ApprovalBatchSegment => s.type === 'approval_batch' && s.data.approvalRequestId === approvalRequestId,
@@ -400,9 +376,6 @@ export class MessageSegmentAccumulator {
     if (existingIndex !== -1) {
       const existing = this.segments[existingIndex] as ApprovalBatchSegment;
       const mergedExecutions = executions ?? existing.data.executions;
-      // An upsert must not strip the marker: the flip to `approved` comes from
-      // a later event that carries no origin of its own.
-      const mergedOrigin = origin ?? existing.data.origin;
       this.segments[existingIndex] = {
         ...existing,
         data: {
@@ -410,7 +383,6 @@ export class MessageSegmentAccumulator {
           approvalType,
           toolCalls,
           ...(mergedExecutions ? { executions: mergedExecutions } : {}),
-          ...(mergedOrigin ? { origin: mergedOrigin } : {}),
         },
         status,
         resolvedByName: resolvedByName ?? existing.resolvedByName,
@@ -427,7 +399,6 @@ export class MessageSegmentAccumulator {
         approvalType,
         toolCalls,
         ...(executions ? { executions } : {}),
-        ...(origin ? { origin } : {}),
       },
       status,
       resolvedByName,
@@ -685,9 +656,6 @@ export class MessageSegmentAccumulator {
         case 'thinking':
           if (segment.text) this.appendThinking(segment.text);
           break;
-        case 'guide':
-          if (segment.text) this.appendGuide(segment.text);
-          break;
         case 'ask':
           this.addAsk(segment.question, segment.options);
           break;
@@ -703,7 +671,6 @@ export class MessageSegmentAccumulator {
             data.approvalType || '',
             status,
             data.fields,
-            data.origin,
           );
           break;
         }
@@ -716,7 +683,6 @@ export class MessageSegmentAccumulator {
             status,
             data.executions,
             resolvedByName,
-            data.origin,
           );
           break;
         }

package/src/components/chat/utils/process-historical-messages.ts

@@ -33,7 +33,7 @@ import {
 } from '../../../chat-protocol/events';
 // One normalizer for ask rows, shared with the live decoder — history and the
 // stream must agree on which options are usable.
-import { guideFrameEvent, normalizeAskOptions } from '../../../chat-protocol/nats-decoder';
+import { normalizeAskOptions } from '../../../chat-protocol/nats-decoder';
 import { applyApprovalStatusToSegment } from '../stream/message-mutations';
 import {
   MESSAGE_TYPE,
@@ -47,7 +47,7 @@ import {
   type MessageData,
   type MessageOwner,
 } from '../types';
-import { approvalDisplaysInline, guideApprovalOrigin } from './approval-display';
+import { approvalDisplaysInline } from './approval-display';
 import { type MessageSegmentAccumulator, createMessageSegmentAccumulator } from './message-segment-accumulator';
 import { getCommandText } from './tool-call-helpers';
 
@@ -121,22 +121,6 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
       }
       return null;
 
-    // Two persisted shapes, mirroring the live `GUIDE` chunk: the answer body
-    // (`text`) and a Product Guide frame the agent re-streamed (`payload`,
-    // persisted so a card survives a reload). Decoded through the SAME
-    // `guideFrameEvent` the live path uses — a second mapping here would let
-    // history and realtime disagree about the same bytes.
-    case MESSAGE_TYPE.GUIDE: {
-      if ('text' in data && data.text) {
-        return { type: 'guide-delta', text: data.text };
-      }
-      const payload = 'payload' in data ? data.payload : undefined;
-      if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
-        return guideFrameEvent(payload);
-      }
-      return null;
-    }
-
     // Same completeness gate as the live decoder (`decodeNatsChunk`): a
     // persisted row without a question or without options is not a card the
     // user can answer, so it replays as nothing rather than as empty chrome.
@@ -397,10 +381,6 @@ function applyHistoryEvent(
       accumulator.appendThinking(event.text);
       break;
 
-    case 'guide-delta':
-      accumulator.appendGuide(event.text);
-      break;
-
     // Mirror of the live path: the intro sentence replays as answer text in
     // front of the card, so a reloaded thread reads exactly like the stream did.
     case 'ask':
@@ -417,23 +397,13 @@ function applyHistoryEvent(
       const toolCalls = event.toolCalls;
       const isBatch = !!toolCalls && toolCalls.length > 0;
       // Same rule the live kernels use — a card must not change where it
-      // renders (or which backend its buttons hit) just because the page was
-      // reloaded and it came back through history instead of the stream.
-      const guideOrigin = guideApprovalOrigin(event);
-
-      if (approvalDisplaysInline(event, approvalType, displayApprovalTypes)) {
+      // renders just because the page was reloaded and it came back through
+      // history instead of the stream.
+      if (approvalDisplaysInline(approvalType, displayApprovalTypes)) {
         if (isBatch) {
           const status = (approvalStatuses[event.requestId] as ChatApprovalStatus) || 'pending';
           if (batchApprovalsEnabled) {
-            accumulator.addApprovalBatch(
-              event.requestId,
-              approvalType,
-              toolCalls,
-              status,
-              undefined,
-              undefined,
-              guideOrigin,
-            );
+            accumulator.addApprovalBatch(event.requestId, approvalType, toolCalls, status, undefined, undefined);
           } else {
             // Flag OFF — unfold batch into N legacy approval cards (same id).
             for (const call of toolCalls) {
@@ -445,7 +415,6 @@ function applyHistoryEvent(
                 approvalType,
                 status,
                 undefined,
-                guideOrigin,
               );
             }
           }
@@ -459,12 +428,7 @@ function applyHistoryEvent(
           // and honor `approvalStatuses`.
           const resolvedStatus = approvalStatuses[event.requestId] as ChatApprovalStatus | undefined;
           const isResolved = resolvedStatus === 'approved' || resolvedStatus === 'rejected';
-          // A guide card is added inline even while pending. The tracked path
-          // below ends in `flushPendingApprovals`, whose segments the consumer
-          // lifts into a sticky footer — that is the treatment for the
-          // consumer's OWN approvals, and it is not how the hub's chat renders
-          // a proposal (nor where its preamble expects it).
-          if (guideOrigin || isResolved) {
+          if (isResolved) {
             accumulator.addApprovalRequest(
               event.requestId,
               event.command || '',
@@ -472,7 +436,6 @@ function applyHistoryEvent(
               approvalType,
               resolvedStatus ?? 'pending',
               event.fields,
-              guideOrigin,
             );
           } else {
             accumulator.trackApprovalRequest(event.requestId, {

package/src/components/chat/utils/resolve-fetched-card-href.ts

@@ -11,7 +11,7 @@
  *     (`title` / `url` / `targetPlatform` / `sourceRepo`). `resolveSourceRowCTA`
  *     then routes that `externalUrl` through the host's `composeContentUrl`
  *     seam and the card is clickable.
- *   - **Mingo / NATS transport** (`messageData: [{ type: 'GUIDE' | 'TEXT', text }]`)
+ *   - **Mingo / NATS transport** (`messageData: [{ type: 'TEXT', text }]`)
  *     — the body carries bare `[card://type:id]` markers and NOTHING else.
  *     `chat-message-enhanced.tsx` synthesizes a minimal `{ type, id, title: id,
  *     url: null }` ref so fetch-mode cards can still self-fetch their row, but

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

@@ -1,4 +1,4 @@
-<!-- source-hash: 1b470f4e084b6cb0c7cd286c460838ca -->
+<!-- source-hash: 79a669c46226384775342873e4432c2f -->
 A client-side React component that renders a list of toggleable push-button options with support for single/multi-select, section grouping, disabled states with tooltips, loading skeletons, and error handling.
 
 ## Key Components

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

@@ -2,7 +2,8 @@
 
 import { Check } from 'lucide-react';
 import type React from 'react';
-import { Badge } from '../ui';
+import { useEffect, useRef } from 'react';
+import { Badge, Input } from '../ui';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
 export interface SelectableOption {
@@ -27,6 +28,28 @@ export interface SectionDefinition {
   description?: string; // Optional description shown under section label
 }
 
+/** SERVER-SIDE search: the selector renders the input; the PARENT owns the
+ *  query state and re-fetches `options` (never a client-side .filter of a
+ *  pre-fetched list). While `isLoading`, the input stays mounted (typing
+ *  must not lose focus to a skeleton swap). */
+export interface PushButtonSelectorSearch {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+}
+
+/** Lazy paging: the option list becomes a FIXED-HEIGHT scroll viewport with
+ *  an IntersectionObserver sentinel near the bottom — the selector calls
+ *  `onLoadMore` as the user scrolls; the parent appends to `options`. */
+export interface PushButtonSelectorLazyLoad {
+  hasMore: boolean;
+  isFetchingMore: boolean;
+  onLoadMore: () => void;
+  /** CSS height of the scroll viewport (default '336px' ≈ 6 rows). */
+  maxHeight?: string;
+}
+
 interface PushButtonSelectorProps {
   options: SelectableOption[];
   selectedIds: string[];
@@ -41,6 +64,14 @@ interface PushButtonSelectorProps {
   error?: string | null;
   skeletonCount?: number;
   sections?: SectionDefinition[]; // Optional sections for grouping options
+  /** Built-in server-side search input (see PushButtonSelectorSearch). */
+  search?: PushButtonSelectorSearch;
+  /** Built-in fixed-height scroll + infinite paging (see PushButtonSelectorLazyLoad). */
+  lazyLoad?: PushButtonSelectorLazyLoad;
+  /** Rendered inside the list when `options` is empty and not loading. */
+  emptyMessage?: React.ReactNode;
+  /** Rendered under the list (result counts, hints). */
+  footer?: React.ReactNode;
 }
 
 // Skeleton component matching external pattern from announcement-form.tsx
@@ -94,21 +125,82 @@ export function PushButtonSelector({
   error = null,
   skeletonCount = 3,
   sections,
+  search,
+  lazyLoad,
+  emptyMessage,
+  footer,
 }: PushButtonSelectorProps) {
-  // LOADING STATE
+  // Lazy-load sentinel: observe within the scroll viewport so onLoadMore
+  // fires as the user approaches the bottom. Hooks run unconditionally
+  // (before the early returns) per the rules of hooks. Pass a STABLE
+  // onLoadMore (react-query's fetchNextPage is) — an inline arrow re-arms
+  // the observer each render (harmless, just wasteful).
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const lazyHasMore = lazyLoad?.hasMore ?? false;
+  const lazyFetching = lazyLoad?.isFetchingMore ?? false;
+  const onLoadMore = lazyLoad?.onLoadMore;
+  const optionCount = options.length;
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    const root = scrollRef.current;
+    if (!sentinel || !root || !onLoadMore || !lazyHasMore) return undefined;
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries.some(e => e.isIntersecting) && !lazyFetching) {
+          onLoadMore();
+        }
+      },
+      { root, rootMargin: '80px' },
+    );
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+    };
+    // optionCount: re-arm when the list grows (the sentinel moves).
+  }, [lazyHasMore, lazyFetching, onLoadMore, optionCount]);
+
+  const searchInput = search ? (
+    <Input
+      value={search.value}
+      onChange={e => search.onChange(e.target.value)}
+      placeholder={search.placeholder}
+      aria-label={search.ariaLabel ?? search.placeholder ?? 'Search'}
+    />
+  ) : null;
+
+  // LOADING STATE — with a search input, the input STAYS mounted (a skeleton
+  // swap mid-keystroke would drop focus); only the list skeletons.
   if (isLoading) {
     return (
       <div className={className}>
-        <PushButtonSelectorSkeleton count={skeletonCount} hasTitle={!!title} />
+        {search ? (
+          <div className="space-y-4">
+            {title && <h3 className="text-ods-text-primary text-h5">{title}</h3>}
+            {searchInput}
+            <PushButtonSelectorSkeleton count={skeletonCount} />
+          </div>
+        ) : (
+          <PushButtonSelectorSkeleton count={skeletonCount} hasTitle={!!title} />
+        )}
       </div>
     );
   }
 
-  // ERROR STATE
+  // ERROR STATE — same rule as loading: a mounted search input survives so
+  // the user can adjust the query to retry.
   if (error) {
     return (
       <div className={className}>
-        <PushButtonSelectorError message={error} title={title} />
+        {search ? (
+          <div className="space-y-4">
+            {title && <h3 className="text-ods-text-primary text-h5">{title}</h3>}
+            {searchInput}
+            <PushButtonSelectorError message={error} />
+          </div>
+        ) : (
+          <PushButtonSelectorError message={error} title={title} />
+        )}
       </div>
     );
   }
@@ -252,12 +344,44 @@ export function PushButtonSelector({
     );
   };
 
+  const listContent = (
+    <>
+      {options.length === 0 && emptyMessage !== undefined ? (
+        <div className="text-ods-text-secondary text-h6">{emptyMessage}</div>
+      ) : (
+        renderOptionsContent()
+      )}
+      {lazyLoad ? (
+        <>
+          <div ref={sentinelRef} />
+          {lazyLoad.isFetchingMore ? (
+            <div className="py-2 text-center text-ods-text-secondary text-h6">Loading more…</div>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+
   return (
     <TooltipProvider delayDuration={150}>
       <div className={`space-y-4 ${className}`}>
         {title && <h3 className="text-ods-text-primary text-h5">{title}</h3>}
 
-        {renderOptionsContent()}
+        {searchInput}
+
+        {lazyLoad ? (
+          <div
+            ref={scrollRef}
+            className="space-y-4 overflow-y-auto rounded-lg border border-ods-border p-2"
+            style={{ height: lazyLoad.maxHeight ?? '336px' }}
+          >
+            {listContent}
+          </div>
+        ) : (
+          listContent
+        )}
+
+        {footer}
 
         {/* Selection Summary */}
         {selectionSummary && validSelectedIds.length > 0 && (

package/src/stories/ChatMessageEnhanced.stories.tsx

@@ -210,18 +210,18 @@ export const GuideWithEntityCards: Story = {
       ) : null,
     content: [
       {
-        type: 'guide',
+        type: 'text',
         text: "Here's how to create a monitoring policy (check) in OpenFrame:\n\n[card://onboarding_guide:first-check]\n\nStep-by-step:\n\n1. Go to Monitoring → Policies → Add Policy\n2. Write your osquery SQL query\n3. Save the policy",
       },
       {
         type: 'text',
-        text: 'A plain text segment renders its own marker identically:\n\n[card://onboarding_guide:add-devices]',
+        text: 'A second text segment renders its own marker identically:\n\n[card://onboarding_guide:add-devices]',
       },
     ] satisfies MessageSegment[],
   },
 };
 
-/** Every remaining segment type in one message — thinking, guide, tool execution, context compaction, error. */
+/** Every remaining segment type in one message — thinking, tool execution, context compaction, error. */
 export const AllSegmentTypes: Story = {
   args: {
     role: 'assistant',
@@ -233,10 +233,6 @@ export const AllSegmentTypes: Story = {
         text: 'The user wants Slack installed. Homebrew is present on the endpoint, so `brew install --cask slack` is the cleanest path.',
       },
       { type: 'text', text: 'Installing Slack now.' },
-      {
-        type: 'guide',
-        text: "Here's how to create a monitoring policy (check) in OpenFrame:\n\nStep-by-step:\n\n1. Go to Monitoring → Policies → Add Policy\n2. Give it a Name (something descriptive)\n3. Write your osquery SQL query — the query should return rows for devices that fail the check\n4. Set the interval — how often each device runs the check\n5. Save the policy",
-      },
       {
         type: 'tool_execution',
         data: {