@flamingo-stack/openframe-frontend-core 0.0.284 → 0.0.285

package/dist/index.js

@@ -62,6 +62,7 @@ import {
   Board,
   BoardColumn,
   BoardColumnHeader,
+  BoardTicketApproval,
   BrandAssociationCard,
   BrandAssociationGrid,
   Breadcrumb,
@@ -692,7 +693,7 @@ import {
   validateEmailDomain,
   validateEmailDomainList,
   validatePhoneNumber
-} from "./chunk-RGXDDOQR.js";
+} from "./chunk-VQW7CEGS.js";
 import {
   CommandApprovalToast,
   DEFAULT_MIN_FILL_MS,
@@ -1215,6 +1216,7 @@ export {
   Board,
   BoardColumn,
   BoardColumnHeader,
+  BoardTicketApproval,
   BotIcon,
   BrandAssociationCard,
   BrandAssociationGrid,

package/package.json

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

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

@@ -19,6 +19,8 @@ export interface BoardColumnProps {
   onArchive?: (columnId: string) => void
   getTicketHref?: (ticketId: string) => string
   renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
+  onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
   onLoadMore?: (columnId: string) => void
   loadMoreRootMargin?: string
   joinLeft?: boolean
@@ -33,6 +35,8 @@ export function BoardColumn({
   onArchive,
   getTicketHref,
   renderAssignSlot,
+  onApprove,
+  onReject,
   onLoadMore,
   loadMoreRootMargin = '200px 0px',
   joinLeft = false,
@@ -64,6 +68,8 @@ export function BoardColumn({
             column={column}
             getTicketHref={getTicketHref}
             renderAssignSlot={renderAssignSlot}
+            onApprove={onApprove}
+            onReject={onReject}
             onLoadMore={onLoadMore}
             loadMoreRootMargin={loadMoreRootMargin}
           />
@@ -77,11 +83,13 @@ interface ColumnBodyProps {
   column: BoardColumnDef
   getTicketHref?: (ticketId: string) => string
   renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
+  onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
   onLoadMore?: (columnId: string) => void
   loadMoreRootMargin: string
 }
 
-function ColumnBody({ column, getTicketHref, renderAssignSlot, onLoadMore, loadMoreRootMargin }: ColumnBodyProps) {
+function ColumnBody({ column, getTicketHref, renderAssignSlot, onApprove, onReject, onLoadMore, loadMoreRootMargin }: ColumnBodyProps) {
   const ticketIds = React.useMemo(() => column.tickets.map(t => t.id), [column.tickets])
 
   const droppableData = React.useMemo(
@@ -150,6 +158,8 @@ function ColumnBody({ column, getTicketHref, renderAssignSlot, onLoadMore, loadM
               columnColor={column.color}
               href={getTicketHref?.(t.id)}
               renderAssignSlot={renderAssignSlot}
+              onApprove={onApprove}
+              onReject={onReject}
               dragDisabled={column.dragDisabled}
             />
           ))

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

@@ -0,0 +1,76 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../../utils/cn'
+import { ApprovalBatchMessage } from '../../chat/approval-batch-message'
+import { useCollapsible } from '../../chat/hooks/use-collapsible'
+import { Chevron02DownIcon, Chevron02UpIcon, DotsLoaderIcon, ShieldCheckIcon } from '../../icons-v2-generated'
+import type { BoardTicketPendingApproval } from './types'
+
+export interface BoardTicketApprovalProps {
+  pendingApproval: BoardTicketPendingApproval
+  onApprove?: (requestId?: string) => void | Promise<void>
+  onReject?: (requestId?: string) => void | Promise<void>
+}
+
+/**
+ * Inline, collapsed-by-default approval section for a board ticket card. Expands to
+ * the shared {@link ApprovalBatchMessage} so the request can be approved/rejected
+ * without leaving the board. The header switches between the client variant (grey,
+ * "Pending client approval") and the technician/admin variant (yellow shield,
+ * "Technician approval required") on `approvalType`.
+ */
+export function BoardTicketApproval({ pendingApproval, onApprove, onReject }: BoardTicketApprovalProps) {
+  const [expanded, setExpanded] = React.useState(false)
+  const { innerRef, containerStyle } = useCollapsible({ expanded })
+  const isAdmin = pendingApproval.approvalType === 'ADMIN'
+
+  return (
+    <div className="pointer-events-auto flex flex-col">
+      <button
+        type="button"
+        onClick={() => setExpanded(v => !v)}
+        aria-expanded={expanded}
+        className="flex w-full cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-h6"
+      >
+        <span
+          className={cn(
+            'flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]',
+            isAdmin ? 'text-ods-open-yellow' : 'text-ods-text-secondary',
+          )}
+        >
+          {isAdmin ? (
+            <ShieldCheckIcon className="size-4 shrink-0" />
+          ) : (
+            <DotsLoaderIcon size={16} className="shrink-0" />
+          )}
+          <span className="flex-1 truncate text-left">
+            {isAdmin ? 'Technician approval required' : 'Pending client approval'}
+          </span>
+        </span>
+        {expanded ? (
+          <Chevron02UpIcon className="size-4 shrink-0 text-ods-text-secondary" />
+        ) : (
+          <Chevron02DownIcon className="size-4 shrink-0 text-ods-text-secondary" />
+        )}
+      </button>
+
+      <div style={containerStyle}>
+        <div ref={innerRef} className="pt-[var(--spacing-system-xs)]">
+          <ApprovalBatchMessage
+            className="mb-0"
+            data={{
+              approvalRequestId: pendingApproval.id,
+              approvalType: pendingApproval.approvalType ?? 'CLIENT',
+              toolCalls: pendingApproval.toolCalls ?? [],
+            }}
+            status="pending"
+            showExecutionStatus={false}
+            onApprove={onApprove}
+            onReject={onReject}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -32,6 +32,8 @@ export interface BoardProps {
   onArchiveColumn?: (columnId: string) => void
   getTicketHref?: (ticketId: string) => string
   renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
+  onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
   collapseStorageKey?: string
   loadMoreRootMargin?: string
   className?: string
@@ -45,6 +47,8 @@ export function Board({
   onArchiveColumn,
   getTicketHref,
   renderAssignSlot,
+  onApprove,
+  onReject,
   collapseStorageKey,
   loadMoreRootMargin,
   className,
@@ -271,6 +275,8 @@ export function Board({
                   onArchive={onArchiveColumn}
                   getTicketHref={getTicketHref}
                   renderAssignSlot={renderAssignSlot}
+                  onApprove={onApprove}
+                  onReject={onReject}
                   onLoadMore={onLoadMore}
                   loadMoreRootMargin={loadMoreRootMargin}
                   joinLeft={joinLeft}

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

@@ -8,6 +8,8 @@ export { BoardColumnHeader } from './board-column-header'
 export type { BoardColumnHeaderProps } from './board-column-header'
 export { TicketCard } from './ticket-card'
 export type { TicketCardProps } from './ticket-card'
+export { BoardTicketApproval } from './board-ticket-approval'
+export type { BoardTicketApprovalProps } from './board-ticket-approval'
 export { TicketCardSkeleton } from './ticket-card-skeleton'
 export type { TicketCardSkeletonProps } from './ticket-card-skeleton'
 export { useBoardCollapse } from './use-board-collapse'
@@ -23,4 +25,5 @@ export type {
   BoardPriority,
   BoardTicket,
   BoardTicketAssignee,
+  BoardTicketPendingApproval,
 } from './types'

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

@@ -11,6 +11,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../
 import { cn } from '../../../utils/cn'
 import { getReadableTextColor } from '../../../utils/ods-color-utils'
 import { formatTicketRelativeTime, formatTicketFullTimestamp } from '../../../utils/date-utils'
+import { BoardTicketApproval } from './board-ticket-approval'
 import type { BoardPriority, BoardTicket } from './types'
 
 const PRIORITY_COLOR_CLASS: Record<BoardPriority, string> = {
@@ -31,6 +32,8 @@ export interface TicketCardProps {
   isOverlay?: boolean
   dragDisabled?: boolean
   renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
+  onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
 }
 
 export function TicketCard({
@@ -41,6 +44,8 @@ export function TicketCard({
   isOverlay = false,
   dragDisabled,
   renderAssignSlot,
+  onApprove,
+  onReject,
 }: TicketCardProps) {
   const sortableData = React.useMemo(
     () => ({ columnId, type: 'ticket' as const }),
@@ -143,6 +148,13 @@ export function TicketCard({
           style={{ backgroundColor: columnColor, color: newMessageTextColor }}
         />
       )}
+      {ticket.pendingApproval && (
+        <BoardTicketApproval
+          pendingApproval={ticket.pendingApproval}
+          onApprove={onApprove ? requestId => onApprove(ticket.id, requestId) : undefined}
+          onReject={onReject ? requestId => onReject(ticket.id, requestId) : undefined}
+        />
+      )}
     </>
   )
 

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

@@ -1,7 +1,18 @@
+import type { PendingToolCallData } from '../../chat/types'
 import type { TicketStatus } from '../../ui/ticket-status-tag'
 
 export type BoardPriority = 'low' | 'medium' | 'high' | 'urgent'
 
+/** Latest pending tool-approval request attached to a board ticket (from `Ticket.pendingApproval`). */
+export interface BoardTicketPendingApproval {
+  id: string
+  approvalType?: string
+  command?: string
+  explanation?: string
+  createdAt?: string
+  toolCalls?: PendingToolCallData[]
+}
+
 export interface BoardTicketAssignee {
   id: string
   initials?: string
@@ -22,6 +33,7 @@ export interface BoardTicket {
   tags?: string[]
   createdAt?: string
   hasNewMessage?: boolean
+  pendingApproval?: BoardTicketPendingApproval
 }
 
 export interface BoardColumnDef {