@flamingo-stack/openframe-frontend-core 0.0.275 → 0.0.276

package/src/components/chat/utils/history-merge.ts

@@ -41,6 +41,20 @@ function isSyntheticRealtimeId(id: string): boolean {
   return SYNTHETIC_REALTIME_ID_PREFIXES.some((prefix) => id.startsWith(prefix))
 }
 
+/** Rendered answer text of an assistant message (TEXT segments, or a plain string). Used to
+ *  recognise a replayed synthetic as the twin of an already-persisted turn when the stream-seq
+ *  signal can't prove it (see the trailing-turn fallback below). Empty for tool/approval-only
+ *  turns that carry no answer text — callers must treat "" as "no signal", never as a match. */
+function assistantAnswerText(content: MessageContent): string {
+  if (typeof content === 'string') return content.trim()
+  if (!Array.isArray(content)) return ''
+  const parts: string[] = []
+  for (const seg of content) {
+    if (seg.type === 'text') parts.push(seg.text)
+  }
+  return parts.join('\n').trim()
+}
+
 /** Flattens DESC-sorted message pages (newest page first, newest message
  *  first within a page) into one chronological list. */
 export function flattenMessagePagesChronological<T>(pages: readonly { messages: readonly T[] }[] | undefined): T[] {
@@ -170,6 +184,14 @@ export function mergeHistoryWithRealtime<M extends MergeableChatMessage>(input:
     }
   }
 
+  // Content-equality fallback for the trailing turn. The backend stamps `lastChunkStreamSeq`
+  // asynchronously, so a just-finished assistant can land in history with a seq BELOW the replay's
+  // terminal chunk seq; seq coverage then reads "not covered" and the replayed synthetic survives
+  // next to its persisted twin. Recognise the twin by its rendered answer text.
+  const lastProcessed = processedToUse[processedToUse.length - 1]
+  const trailingAssistantText =
+    lastProcessed && lastProcessed.role === 'assistant' ? assistantAnswerText(lastProcessed.content) : ''
+
   const realtimeMessages = existingMessages.filter((m) => {
     // Pin wins over everything: the twin may carry a persisted Mongo id (the
     // chunk processors ADOPT an in-progress trailing assistant after a prior
@@ -196,6 +218,11 @@ export function mergeHistoryWithRealtime<M extends MergeableChatMessage>(input:
     // (JetStream resumes after the highest seq this client has consumed).
     // Decided by seq coverage when known, wall-clock otherwise.
     if (isSyntheticRealtimeId(m.id) && m.id !== streamingMessageId) {
+      // A non-streaming synthetic that re-renders the trailing persisted assistant verbatim is its
+      // twin no matter what the seq signal says — drop it (covers the persistence-lag gap).
+      if (m.role === 'assistant' && trailingAssistantText && assistantAnswerText(m.content) === trailingAssistantText) {
+        return false
+      }
       const covered =
         historyCoversRealtime !== null ? historyCoversRealtime : (m.timestamp?.getTime() ?? 0) <= historyFetchedAt
       if (covered) return false

package/src/components/features/board/board-column.tsx

@@ -147,6 +147,7 @@ function ColumnBody({ column, getTicketHref, renderAssignSlot, onLoadMore, loadM
               key={t.id}
               ticket={t}
               columnId={column.id}
+              columnColor={column.color}
               href={getTicketHref?.(t.id)}
               renderAssignSlot={renderAssignSlot}
               dragDisabled={column.dragDisabled}

package/src/components/features/board/board.tsx

@@ -302,7 +302,12 @@ export function Board({
       </div>
       <DragOverlay dropAnimation={null}>
         {activeTicket ? (
-          <TicketCard ticket={activeTicket.ticket} columnId={activeTicket.columnId} isOverlay />
+          <TicketCard
+            ticket={activeTicket.ticket}
+            columnId={activeTicket.columnId}
+            columnColor={items.find(c => c.id === activeTicket.columnId)?.color}
+            isOverlay
+          />
         ) : null}
       </DragOverlay>
     </DndContext>

package/src/components/features/board/ticket-card.tsx

@@ -4,11 +4,12 @@ import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import Link from '../../../embed-shims/next-link'
 import * as React from 'react'
-import { LaptopIcon, Flag02Icon } from '../../icons-v2-generated'
+import { LaptopIcon, Flag02Icon, MessagesIcon } from '../../icons-v2-generated'
 import { SquareAvatar } from '../../ui/square-avatar'
 import { Tag } from '../../ui/tag'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip'
 import { cn } from '../../../utils/cn'
+import { getReadableTextColor } from '../../../utils/ods-color-utils'
 import { formatTicketRelativeTime, formatTicketFullTimestamp } from '../../../utils/date-utils'
 import type { BoardPriority, BoardTicket } from './types'
 
@@ -25,6 +26,7 @@ const MAX_VISIBLE_ASSIGNEES = 3
 export interface TicketCardProps {
   ticket: BoardTicket
   columnId: string
+  columnColor?: string
   href?: string
   isOverlay?: boolean
   dragDisabled?: boolean
@@ -34,6 +36,7 @@ export interface TicketCardProps {
 export function TicketCard({
   ticket,
   columnId,
+  columnColor,
   href,
   isOverlay = false,
   dragDisabled,
@@ -49,10 +52,16 @@ export function TicketCard({
     disabled: dragDisabled,
   })
 
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(sortable.transform),
-    transition: sortable.transition,
-  }
+  const showNewMessage = !!ticket.hasNewMessage && !!columnColor
+  const newMessageTextColor = columnColor ? getReadableTextColor(columnColor) : undefined
+
+  const style: React.CSSProperties = isOverlay
+    ? {}
+    : {
+        transform: CSS.Transform.toString(sortable.transform),
+        transition: sortable.transition,
+      }
+  if (showNewMessage) style.borderColor = columnColor
 
   const showDeviceRow = !!(ticket.deviceHostnames?.length || ticket.organizationName)
   const deviceText = [
@@ -126,6 +135,14 @@ export function TicketCard({
           </Tooltip>
         </TooltipProvider>
       )}
+      {showNewMessage && (
+        <Tag
+          label="New Message"
+          icon={<MessagesIcon size={16} color={newMessageTextColor} />}
+          className="w-fit shrink-0"
+          style={{ backgroundColor: columnColor, color: newMessageTextColor }}
+        />
+      )}
     </>
   )
 
@@ -138,7 +155,7 @@ export function TicketCard({
 
   const outerProps = {
     ref: isOverlay ? undefined : sortable.setNodeRef,
-    style: isOverlay ? undefined : style,
+    style,
     className: cardClasses,
     ...(isOverlay ? {} : sortable.attributes),
     ...(isOverlay ? {} : sortable.listeners),

package/src/components/features/board/types.ts

@@ -21,6 +21,7 @@ export interface BoardTicket {
   assignees?: BoardTicketAssignee[]
   tags?: string[]
   createdAt?: string
+  hasNewMessage?: boolean
 }
 
 export interface BoardColumnDef {

package/src/components/ui/actions-menu.tsx

@@ -31,6 +31,12 @@ export interface ActionsMenuItem {
 	disabled?: boolean;
 	type?: "item" | "checkbox" | "submenu" | "separator";
 	checked?: boolean;
+	/**
+	 * Keep the dropdown open after this item is clicked instead of closing it
+	 * (e.g. multi-select add). Only affects ActionsMenuDropdown; `checkbox` and
+	 * `submenu` items always keep the menu open regardless. Defaults to closing.
+	 */
+	closeOnSelect?: boolean;
 	submenu?: ActionsMenuItem[];
 	/** Render the row in the error/destructive color (label + icon). */
 	danger?: boolean;
@@ -373,7 +379,11 @@ export const ActionsMenuDropdown: React.FC<ActionsMenuDropdownProps> = ({
 	const handleItemClick = useCallback(
 		(item: ActionsMenuItem) => {
 			onItemClick?.(item);
-			if (item.type !== "checkbox" && item.type !== "submenu") {
+			if (
+				item.type !== "checkbox" &&
+				item.type !== "submenu" &&
+				item.closeOnSelect !== false
+			) {
 				setOpen(false);
 			}
 		},