@flamingo-stack/openframe-frontend-core 0.0.510 → 0.0.511-snapshot.20260804140004

package/dist/utils/list-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-url.d.ts","sourceRoot":"","sources":["../../src/utils/list-url.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAWH;;;;iEAIiE;AACjE,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAEtE;AA6BD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,SAAK,GAAG,MAAM,GAAG,IAAI,CAa5F"}
+{"version":3,"file":"list-url.d.ts","sourceRoot":"","sources":["../../src/utils/list-url.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAWH;;;;iEAIiE;AACjE,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAOtE;AA6BD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,IAAI,SAAK,GAAG,MAAM,GAAG,IAAI,CAa5F"}

package/dist/utils/same-page-hash-nav.d.ts

@@ -15,12 +15,23 @@ export declare const HUB_HEADER_OFFSET_PX = 80;
  */
 export declare function normalizeHashFragment(hash: string): string;
 /**
- * Resolve the DOM element a hash fragment id points at. Tries the raw
- * id first (ordinary anchors), then the percent-decoded form — href
- * composers like `buildTicketOpenHref` encode the id into the fragment
- * while rows render the raw id, so `#ticket-a%2Fb` must still find
- * `id="ticket-a/b"`. A malformed escape sequence falls back to the
- * raw lookup result.
+ * Resolve the DOM element a hash fragment id points at — THE hash resolver;
+ * `navigateSamePageHash`, `useScrollToHash` and the markdown link renderer
+ * all go through this one, so a fragment that resolves for a deep link
+ * resolves for an in-body click too.
+ *
+ * Three passes, cheapest first:
+ *   1. the raw id (ordinary anchors — the overwhelming common case);
+ *   2. the percent-decoded form — href composers like `buildTicketOpenHref`
+ *      encode the id into the fragment while rows render the raw id, so
+ *      `#ticket-a%2Fb` must still find `id="ticket-a/b"`. A malformed escape
+ *      sequence just falls through;
+ *   3. a NORMALIZED match against the document's headings — doc bodies are
+ *      authored on GitHub, whose slugger keeps the hyphen left behind by a
+ *      stripped emoji (`## 📚 Table of Contents` → `#-table-of-contents`)
+ *      while our ids trim it. Without this every in-body TOC link in every
+ *      GitHub-authored doc resolves to nothing and clicking one does nothing.
+ *      See `utils/anchor-id`.
  */
 export declare function getHashTargetElement(id: string): HTMLElement | null;
 export interface NavigateSamePageHashOptions {

package/dist/utils/same-page-hash-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"same-page-hash-nav.d.ts","sourceRoot":"","sources":["../../src/utils/same-page-hash-nav.ts"],"names":[],"mappings":"AAEA;;sCAEsC;AACtC,eAAO,MAAM,uBAAuB,KAAK,CAAA;AAEzC;yCACyC;AACzC,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAEtC;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI1D;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAWnE;AAED,MAAM,WAAW,2BAA2B;IAC1C,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;gEAC4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,2BAAgC,GACxC,OAAO,CAkET"}
+{"version":3,"file":"same-page-hash-nav.d.ts","sourceRoot":"","sources":["../../src/utils/same-page-hash-nav.ts"],"names":[],"mappings":"AAGA;;sCAEsC;AACtC,eAAO,MAAM,uBAAuB,KAAK,CAAA;AAEzC;yCACyC;AACzC,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAEtC;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI1D;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAkBnE;AAED,MAAM,WAAW,2BAA2B;IAC1C,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;gEAC4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,2BAAgC,GACxC,OAAO,CAkET"}

package/package.json

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

package/src/chat-protocol/decode.ts

@@ -100,6 +100,49 @@ function mapLeadingFrame(meta: any, out: ChatStreamEvent[]): void {
       ...(typeof meta.receiptText === 'string' ? { receiptText: meta.receiptText } : {}),
       requestId: typeof meta.proposalId === 'string' ? meta.proposalId : undefined,
     })
+  } else if (meta.kind === 'approval_batch' && meta.batchId && Array.isArray(meta.proposals)) {
+    // Server-grouped multi-proposal turn → ONE batch event carrying a
+    // tool-call row per proposal. `toolExecutionRequestId` is the row's
+    // PROPOSAL id (each row resolves through its own per-proposal
+    // confirm); the batch's `requestId` is the stable anchor the shell
+    // uses for status flips. Field rows ride as the row's expandable
+    // args so per-proposal detail stays reachable inside the batch.
+    const toolCalls = (meta.proposals as Array<Record<string, any>>)
+      .filter((p) => p && typeof p.proposalId === 'string')
+      .map((p) => {
+        const rawFields = Array.isArray(p.fields)
+          ? (p.fields as Array<{ label?: string; value?: string }>).filter(
+              (f) => f && f.label && f.value,
+            )
+          : []
+        // Prefer human-readable identity labels for the row's
+        // disambiguator; opaque-id labels ("Task", "Ticket") only as
+        // the last-resort first field.
+        const detail =
+          rawFields.find((f) => /^(title|subject|name)$/i.test(String(f.label))) ??
+          rawFields[0]
+        const base =
+          typeof p.title === 'string' && p.title.length > 0 ? p.title : String(p.toolName ?? 'Tool call')
+        return {
+          toolExecutionRequestId: String(p.proposalId),
+          toolName: String(p.toolName ?? 'tool'),
+          toolTitle: detail ? `${base} — ${detail.value}` : base,
+          requiresApproval: true,
+          toolCallArguments:
+            rawFields.length > 0
+              ? Object.fromEntries(rawFields.map((f) => [String(f.label), String(f.value)]))
+              : null,
+        }
+      })
+    if (toolCalls.length > 0) {
+      out.push({
+        type: 'approval-request',
+        requestId: String(meta.batchId),
+        approvalType: 'chat',
+        toolCalls,
+        status: 'pending',
+      })
+    }
   } else if (meta.kind === 'approval_request' && meta.proposalId) {
     const proposalId = String(meta.proposalId)
     const toolName = String(meta.toolName ?? 'tool')

package/src/chat-protocol/frames.ts

@@ -165,6 +165,32 @@ export interface ApprovalRequestFrame {
   ttlSeconds?: number
 }
 
+/** A single write-tool turn produced MULTIPLE proposals (batch
+ *  operations — "delete both", "close all three"). The SERVER is the
+ *  authority on the grouping: it collects the turn's proposals and
+ *  ships ONE batch frame instead of N `approval_request` frames, so
+ *  clients render the bulk-approval component without any adjacency
+ *  heuristics. Single-proposal turns keep the classic
+ *  `approval_request` frame. */
+export interface ApprovalBatchFrame {
+  kind: 'approval_batch'
+  /** Stable batch anchor — client-side only (locates the batch segment
+   *  for status flips). MUST NOT equal any row's `proposalId`: the
+   *  click-time optimistic status flip keys on this id, and an anchor
+   *  that doubles as a row id would falsely tick that row's execution
+   *  as succeeded before its confirm ran (masking a failed write). The
+   *  server emits `batch:<first proposalId>`. */
+  batchId: string
+  proposals: Array<{
+    proposalId: string
+    toolName: string
+    title?: string
+    fields?: ApprovalRequestField[]
+    expiresAt?: string
+    ttlSeconds?: number
+  }>
+}
+
 /** Server-driven post-approve / post-reject frame (confirm-tool route).
  *  Mirror of the hub's `DecisionResolvedFrame` in
  *  `lib/data/chat-agent-utils.ts` (tool_name widened to string — the
@@ -205,6 +231,7 @@ export type SseLeadingFrame =
   | TextLeadingFrame
   | ToolErrorFrame
   | ApprovalRequestFrame
+  | ApprovalBatchFrame
   | DecisionResolvedFrame
 
 // =============================================================================

package/src/components/chat/__tests__/remark-mention-chips.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import type { Root, Text, Link, Paragraph } from 'mdast'
+import { remarkMentionChips } from '../remark-mention-chips'
+
+/** One-paragraph tree holding a single text leaf — what the plugin walks. */
+function treeOf(text: string): Root {
+  return { type: 'root', children: [{ type: 'paragraph', children: [{ type: 'text', value: text }] }] }
+}
+
+/**
+ * unified's `Plugin` type declares a `this: Processor` parameter, so calling the
+ * attacher bare (outside a pipeline) is a TS2684 — cast the attacher itself, not
+ * just its return value, to drop that `this`.
+ */
+const attach = remarkMentionChips as unknown as () => (t: Root) => void
+
+function run(text: string): Array<Text | Link> {
+  const tree = treeOf(text)
+  attach()(tree)
+  return (tree.children[0] as Paragraph).children as Array<Text | Link>
+}
+
+/** `mention://marker:id` urls the plugin emitted, in order. */
+function mentions(text: string): string[] {
+  return run(text).flatMap((n) => (n.type === 'link' ? [n.url] : []))
+}
+
+describe('remarkMentionChips markers', () => {
+  it('parses the lowercase markers', () => {
+    expect(mentions('see @device:64f0a1 and @kb:5')).toEqual([
+      'mention://device:64f0a1',
+      'mention://kb:5',
+    ])
+  })
+
+  it('parses a camelCase marker', () => {
+    // Regression: `ContextItemType.SCHEDULED_SCRIPT` ships as `scheduledScript`,
+    // and a lowercase-only grammar matched NOTHING in the token — the mention
+    // silently stayed raw text in the bubble instead of becoming a chip.
+    expect(mentions('run @scheduledScript:6a6c9342f8e10b2477900c08 now')).toEqual([
+      'mention://scheduledScript:6a6c9342f8e10b2477900c08',
+    ])
+  })
+
+  it('keeps the surrounding text intact around a camelCase mention', () => {
+    const parts = run('run @scheduledScript:6a6c9342f8e10b2477900c08 now')
+    expect(parts.map((n) => (n.type === 'text' ? n.value : `[${(n as Link).url}]`))).toEqual([
+      'run ',
+      '[mention://scheduledScript:6a6c9342f8e10b2477900c08]',
+      ' now',
+    ])
+  })
+
+  it('fires inside punctuation but never mid-word', () => {
+    expect(mentions('(@scheduledScript:6a6c9342f8e10b2477900c08)')).toEqual([
+      'mention://scheduledScript:6a6c9342f8e10b2477900c08',
+    ])
+    // An email-shaped host:port is not a mention — the `@` is preceded by a word char.
+    expect(mentions('mail user@Host:1234 stays text')).toEqual([])
+  })
+
+  it('leaves a trailing sentence period out of the id', () => {
+    expect(mentions('ran @scheduledScript:6a6c9342f8e10b2477900c08.')).toEqual([
+      'mention://scheduledScript:6a6c9342f8e10b2477900c08',
+    ])
+  })
+})

package/src/components/chat/approval-batch-message.tsx

@@ -25,8 +25,8 @@ import {
 export interface ApprovalBatchMessageProps extends React.HTMLAttributes<HTMLDivElement> {
   data: ApprovalBatchSegment["data"]
   status?: ApprovalBatchSegment["status"]
-  onApprove?: (requestId?: string) => void | Promise<void>
-  onReject?: (requestId?: string) => void | Promise<void>
+  onApprove?: (requestId?: string) => void | boolean | Promise<void | boolean>
+  onReject?: (requestId?: string) => void | boolean | Promise<void | boolean>
   /**
    * Cap the tool-call list height so it scrolls internally while the footer
    * (explanations + Approve/Reject) stays pinned below. Omit for the default

package/src/components/chat/chat-message-enhanced.tsx

@@ -15,6 +15,7 @@ import { GuideDisplay } from "./guide-display"
 import { SimpleMarkdownRenderer } from "../ui/markdown/simple-markdown-renderer"
 import type { ChatRef } from "./chat-ref.types"
 import { remarkCardLinks } from "./remark-card-links"
+import { remarkStripCitations } from "./remark-strip-citations"
 import { remarkMentionChips } from "./remark-mention-chips"
 import { BlockCard, type BlockCardProps } from "./entity-cards/block-card"
 import { ChatContextChipStrip } from "./chat-context-picker"
@@ -27,8 +28,9 @@ import type { MessageSegment, MessageContent, ChatMessageEnhancedProps } from ".
  *  (e.g. it matches `x@device:1` mid-word, which the plugin skips), so a context
  *  item would be stripped from the chip strip yet never rendered inline — lost
  *  from display entirely. The id is capture group 2 (group 1 is the boundary).
- *  Marker lowercase; id is the mention-token charset. */
-const MENTION_MARKER_REGEX = /(^|[^\w@])@[a-z]+:([A-Za-z0-9_.+/=-]*[A-Za-z0-9_+/=])/g
+ *  Marker `[a-zA-Z]+` (markers are mostly lowercase but not all — e.g.
+ *  `scheduledScript`); id is the mention-token charset. */
+const MENTION_MARKER_REGEX = /(^|[^\w@])@[a-zA-Z]+:([A-Za-z0-9_.+/=-]*[A-Za-z0-9_+/=])/g
 
 /**
  * Same regex shape as `remarkCardLinks` — kept in lockstep so the
@@ -109,7 +111,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
     // (user). Each is gated independently so neither fires without its data.
     const cardRemarkPlugins = useMemo(
       () => [
-        ...(hasMarkerSupport ? [remarkCardLinks] : []),
+        ...(hasMarkerSupport ? [remarkCardLinks, remarkStripCitations] : []),
         ...(hasMentionSupport ? [remarkMentionChips] : []),
       ],
       [hasMarkerSupport, hasMentionSupport],

package/src/components/chat/chat-message-list.tsx

@@ -6,6 +6,7 @@ import { cn } from "../../utils/cn"
 import { ChatMessageEnhanced } from "./chat-message-enhanced"
 import { ChatMessageListSkeleton } from "./chat-message-skeleton"
 import { DotsLoaderIcon, Arrow02DownIcon } from "../icons-v2-generated"
+import { OverlayOpenRegistryProvider } from "../ui/overlay-open-registry"
 import { CyclingPhrase } from "./cycling-phrase"
 import type { ChatMessageListProps } from "./types"
 import { SCROLL_ANCHOR } from "./types/message.types"
@@ -141,10 +142,44 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     // effect below owns first-paint positioning so re-opening a chat
     // with prior history lands at the bottom without a smooth-scroll
     // animation playing over the cold-paint.
-    const { scrollRef, contentRef, scrollToBottom, stopScroll } = useStickToBottom({
-      resize: 'smooth',
-      initial: false,
-    })
+    const { scrollRef, contentRef, scrollToBottom, stopScroll, isAtBottom } =
+      useStickToBottom({
+        resize: 'smooth',
+        initial: false,
+      })
+
+    // ---- Overlay guard: don't move the ground under an open menu -------
+    // A ⋯ menu inside a bubble stays anchored to its trigger. While a reply
+    // streams in, the follow-the-bottom scroll carries that trigger upward and
+    // drags the menu with it, until the menu sits at the panel edge detached
+    // from its card. So: while any overlay in this thread is open, stop
+    // chasing the bottom (the same thing ChatGPT/Claude do once you interact
+    // with the transcript), then catch up on close if we were at the bottom
+    // when it opened. New content still renders — we simply stop scrolling to
+    // it, and the existing "scroll to bottom" affordance stays available.
+    const overlayOpenRef = useRef(false)
+    const wasAtBottomOnOpenRef = useRef(false)
+    const isAtBottomRef = useRef(isAtBottom)
+    isAtBottomRef.current = isAtBottom
+    const handleOverlayOpenChange = useCallback(
+      (hasOpenOverlay: boolean) => {
+        overlayOpenRef.current = hasOpenOverlay
+        if (hasOpenOverlay) {
+          wasAtBottomOnOpenRef.current = isAtBottomRef.current
+          // Cancel any in-flight spring so the thread settles immediately
+          // instead of drifting for another few hundred ms under the menu.
+          stopScroll()
+          return
+        }
+        // Closed again: resume only if the reader was pinned to the bottom
+        // before opening it. Someone who had scrolled up to read history keeps
+        // their position.
+        if (wasAtBottomOnOpenRef.current) {
+          void scrollToBottom({ animation: 'smooth' })
+        }
+      },
+      [scrollToBottom, stopScroll],
+    )
 
     // ---- Prepend / load-more state (NOT owned by the library) --------
     const sentinelRef = useRef<HTMLDivElement>(null)
@@ -263,7 +298,12 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         const prevLastIdx = prevLastId ? messages.findIndex((m) => m.id === prevLastId) : -1
         const newSlice = prevLastIdx >= 0 ? messages.slice(prevLastIdx + 1) : messages.slice(prevCount)
         const hasNewUser = newSlice.some((m) => m.role === 'user')
-        if (hasNewUser) {
+        // An open overlay suppresses even this one: `ignoreEscapes` would yank
+        // the thread out from under it — and with it the follow intent, which
+        // would re-assert the jump on every later resize. A user who just sent
+        // a message with a menu open is rare; a menu jumping away mid-click is
+        // not worth it.
+        if (hasNewUser && !overlayOpenRef.current) {
           // Arms the follow intent for the WHOLE turn: the answer's
           // async growth (attachment images, streamed tokens, entity
           // cards resolving out of their skeletons long after the
@@ -657,6 +697,8 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
 
     useLayoutEffect(() => {
       if (!autoScroll) return
+      // Top-anchored display turns also move the ground — same guard.
+      if (overlayOpenRef.current) return
       const last = messages[messages.length - 1]
       if (!last || last.role !== 'assistant' || last.scrollAnchor !== SCROLL_ANCHOR.TOP) return
       // Metadata frame arrives BEFORE body. Wait for content so we don't
@@ -847,6 +889,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       !(pendingApprovals && pendingApprovals.length > 0)
 
     return (
+      <OverlayOpenRegistryProvider onOpenChange={handleOverlayOpenChange}>
       <div className="flex-1 min-h-0 flex flex-col">
         {/* Positioning box for the jump-to-bottom button: it wraps ONLY the
             scroller, so `absolute bottom-…` really is the scroller's lower
@@ -1029,6 +1072,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
           </div>
         )}
       </div>
+      </OverlayOpenRegistryProvider>
     )
   },
 )

package/src/components/chat/embeddable-chat.tsx

@@ -52,7 +52,7 @@ import { MingoHistoryRail } from './mingo-history-rail'
 import { GuideWelcome, type GuideWelcomeProps } from './guide-welcome'
 import { accentFromIdentityIcon, getAgentAccent } from './quick-action-chip'
 import { GuideModeBanner } from './guide-mode-banner'
-import { PortalContainerContext } from '../ui/portal-container'
+import { CollisionBoundaryContext, PortalContainerContext } from '../ui/portal-container'
 import { ChatPanelHeader, type ChatPanelHeaderProps } from './chat-panel-header'
 import { SquareAvatar } from '../ui/square-avatar'
 import { ChatHeaderIconButton } from './chat-header-icon-button'
@@ -1795,6 +1795,13 @@ function EmbeddableChatInner({
 
   // Host node for in-panel Radix portals (see the body wrapper below).
   const [portalHost, setPortalHost] = useState<HTMLDivElement | null>(null)
+  // The panel element itself, published as the COLLISION boundary for overlays
+  // opened inside it. Radix otherwise collides against the viewport, so a ⋯ menu
+  // near the top of the thread flips upward past the panel and renders over the
+  // app header (reported: an entity card's menu landing in the top-right corner,
+  // detached from its card). `portalHost` can't serve here — it is
+  // `display: contents` and has no box to measure.
+  const [panelBoundary, setPanelBoundary] = useState<HTMLDivElement | null>(null)
 
   // ── Split (wide) Mingo layout ─────────────────────────────────────────────
   // The panel measures its own width and, in Mingo mode, promotes the inline
@@ -1817,6 +1824,14 @@ function EmbeddableChatInner({
     return () => ro.disconnect()
   }, [])
 
+  // One ref for two consumers: the width measurement above (a plain ref, read
+  // once on mount) and the collision-boundary context (state, so provider
+  // consumers re-render once the node exists).
+  const setPanelNode = useCallback((node: HTMLDivElement | null) => {
+    panelMeasureRef.current = node
+    setPanelBoundary(node)
+  }, [])
+
   // Rail collapse toggle (Figma ⟶| control), persisted so it survives the
   // drawer remounting on close.
   const [railCollapsed, setRailCollapsed] = useState(false)
@@ -2003,6 +2018,7 @@ function EmbeddableChatInner({
   // document root. See `PortalContainerContext`.
   const body = (
         <PortalContainerContext.Provider value={portalHost}>
+         <CollisionBoundaryContext.Provider value={panelBoundary}>
             {/* Panel surface depends on state (Figma):
                   • Narrow "Current Chats" LIST + FULL-PANEL archive page → grey
                     `ods-card` (#212121) — matching the grey rail those lists live
@@ -2017,7 +2033,7 @@ function EmbeddableChatInner({
                 grey), so the chat block on the right must keep the conversation's
                 dark surface instead of following the archive. */}
             <div
-              ref={panelMeasureRef}
+              ref={setPanelNode}
               className={`flex h-full flex-col overflow-hidden transition-colors duration-200 ${
                 (archiveOpen && !splitActive) || stackedListView
                   ? 'bg-ods-card'
@@ -2587,6 +2603,7 @@ function EmbeddableChatInner({
             {/* Portal target for in-panel Radix overlays — `display: contents`
                 so it adds no box; content is positioned `fixed` by Radix. */}
             <div ref={setPortalHost} style={{ display: 'contents' }} />
+         </CollisionBoundaryContext.Provider>
           </PortalContainerContext.Provider>
   )
 

package/src/components/chat/entity-cards/deleted-data-card.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+/**
+ * Deleted Data Card — generic TOMBSTONE placeholder for an entity a chat
+ * action removed (ClickUp task today; any deletable entity tomorrow).
+ *
+ * Follows the established tombstone pattern (Teams / Slack "This message
+ * was deleted"): keep a visible, muted placeholder so the conversation
+ * thread's integrity holds — the reader sees WHAT was removed and that
+ * it may be recoverable, instead of a dead link or a silent gap.
+ *
+ * PURE PRESENTATION from the ChatRef — no fetch, no navigation (the
+ * underlying entity no longer resolves anywhere). Ref contract:
+ *   - `title`                    — the deleted entity's display title
+ *   - `metadata.entity_label`    — what kind of thing it was ("ClickUp task")
+ *   - `metadata.recovery_note`   — optional recoverability copy
+ *     ("Recoverable from the ClickUp Trash for 30 days")
+ */
+
+import React from 'react'
+import { Trash2 } from 'lucide-react'
+import {
+  COMPACT_CARD_ICON_SLOT,
+  COMPACT_CARD_META_ROW,
+  COMPACT_CARD_OUTER_STATIC,
+  COMPACT_CARD_TEXT_COL,
+  COMPACT_CARD_TITLE,
+  COMPACT_CARD_TITLE_ROW,
+} from '../utils/compact-card-classes'
+
+export interface DeletedDataCardProps {
+  title?: string | null
+  /** What kind of entity was deleted ("ClickUp task", "HubSpot ticket"). */
+  entityLabel?: string | null
+  /** Recoverability copy ("Recoverable from the ClickUp Trash for 30 days"). */
+  recoveryNote?: string | null
+  className?: string
+}
+
+export function DeletedDataCard({ title, entityLabel, recoveryNote, className }: DeletedDataCardProps) {
+  const label = entityLabel || 'Item'
+  return (
+    <div className={`${COMPACT_CARD_OUTER_STATIC} opacity-70 ${className ?? ''}`}>
+      <div className={COMPACT_CARD_ICON_SLOT}>
+        <Trash2 className="h-4 w-4 text-ods-text-secondary" />
+      </div>
+      <div className={COMPACT_CARD_TEXT_COL}>
+        <div className={COMPACT_CARD_TITLE_ROW}>
+          <span className={`${COMPACT_CARD_TITLE} line-through text-ods-text-secondary`}>
+            {title || `Deleted ${label.toLowerCase()}`}
+          </span>
+        </div>
+        <div className={COMPACT_CARD_META_ROW}>
+          <span className="text-ods-text-secondary">
+            {label} deleted{recoveryNote ? ` · ${recoveryNote}` : ''}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}