@flamingo-stack/openframe-frontend-core 0.0.284 → 0.0.285-snapshot.20260618135145

package/src/components/embeds/figma-embed.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, ToggleGroup, ToggleGroupItem } from '../ui'
+import { FigmaIcon } from '../icons-v2-generated'
+import { ExternalLink, Play, LayoutGrid } from 'lucide-react'
+import { toFigmaEmbedUrl, toFigmaOriginalUrl, isFigmaSlidesUrl } from '../../utils/embed-url-converters'
+import { EmbedIframe } from './embed-iframe'
+
+export interface FigmaEmbedProps {
+  /** Any Figma URL (design/file/proto/board/slides/deck) or an already-resolved embed URL. */
+  url: string
+  /** Heading shown above the embed. Defaults to "Figma Design". */
+  title?: string
+  /**
+   * iframe height (CSS value). The data-room document viewer omits it (full
+   * height, `calc(100vh - 250px)`); inline markdown passes e.g. `"70vh"` so the
+   * embed sits naturally inside article content.
+   */
+  height?: string
+  /** iframe loading strategy. Defaults to `"lazy"`; the data-room viewer passes `"eager"`. */
+  loading?: 'eager' | 'lazy'
+}
+
+type SlidesView = 'present' | 'browse'
+
+/**
+ * Two-state present/browse toggle for Figma Slides. `present` (default) uses
+ * Figma's deck viewer (full-bleed slide + `‹ n/N ›` nav bar + keyboard nav);
+ * `browse` uses the thumbnail-rail + zoom viewer.
+ */
+function SlidesViewToggle({
+  view,
+  onChange,
+}: {
+  view: SlidesView
+  onChange: (v: SlidesView) => void
+}) {
+  const options: { key: SlidesView; label: string; Icon: typeof Play }[] = [
+    { key: 'present', label: 'Present', Icon: Play },
+    { key: 'browse', label: 'Browse', Icon: LayoutGrid },
+  ]
+  return (
+    <ToggleGroup
+      type="single"
+      value={view}
+      onValueChange={(v: string) => {
+        if (v && v !== view) onChange(v as SlidesView)
+      }}
+      aria-label="Figma slides view mode"
+      className="flex shrink-0 items-center gap-0.5 rounded-lg border border-ods-border bg-ods-card p-0.5"
+    >
+      {options.map(({ key, label, Icon }) => {
+        const active = view === key
+        return (
+          <ToggleGroupItem
+            key={key}
+            value={key}
+            aria-label={label}
+            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium transition-colors ${
+              active
+                ? 'bg-ods-accent text-ods-text-on-accent'
+                : 'text-ods-text-secondary hover:text-ods-text-primary hover:bg-ods-bg-hover'
+            }`}
+          >
+            <Icon className="h-4 w-4 shrink-0" />
+            {label}
+          </ToggleGroupItem>
+        )
+      })}
+    </ToggleGroup>
+  )
+}
+
+/**
+ * Single source of truth for every Figma surface — the data-room document viewer
+ * and in-article markdown both render this. A header (icon + title + "Open in
+ * Figma") over an interactive Figma iframe, built from the canonical
+ * `toFigmaEmbedUrl` / `toFigmaOriginalUrl` converters + the shared `<EmbedIframe>`.
+ * Only height/loading differ per surface.
+ *
+ * For Slides decks, a present/browse toggle (default = present) lets viewers flip
+ * slides with Figma's native nav bar + keyboard, or switch to the thumbnail-rail
+ * browse view.
+ */
+export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedProps) {
+  const [view, setView] = useState<SlidesView>('present')
+  const isSlides = url ? isFigmaSlidesUrl(url) : false
+  const embedSrc = url ? toFigmaEmbedUrl(url, { slidesView: view }) : null
+  const originalUrl = (() => {
+    if (!url) return null
+    try {
+      const parsed = new URL(toFigmaOriginalUrl(url))
+      const host = parsed.hostname.toLowerCase()
+      const okHost = host === 'figma.com' || host.endsWith('.figma.com')
+      const okProtocol = parsed.protocol === 'https:' || parsed.protocol === 'http:'
+      return okHost && okProtocol ? parsed.toString() : null
+    } catch {
+      return null
+    }
+  })()
+  const heading = title || 'Figma Design'
+
+  return (
+    <div className="my-6 space-y-3">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          <FigmaIcon className="w-5 h-5 shrink-0" />
+          <span className="font-sans text-base font-semibold text-ods-text-primary truncate">
+            {heading}
+          </span>
+        </div>
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          {isSlides && embedSrc && <SlidesViewToggle view={view} onChange={setView} />}
+          {originalUrl && (
+            <Button
+              variant="outline"
+              size="small-legacy"
+              href={originalUrl}
+              openInNewTab
+              leftIcon={<FigmaIcon className="w-4 h-4" />}
+              rightIcon={<ExternalLink className="w-4 h-4" />}
+              className="w-full sm:w-auto"
+            >
+              Open in Figma
+            </Button>
+          )}
+        </div>
+      </div>
+      {embedSrc ? (
+        <EmbedIframe
+          src={embedSrc}
+          title={heading}
+          allow="clipboard-write; clipboard-read; fullscreen"
+          loading={loading}
+          height={height}
+          allowFullScreen
+        />
+      ) : (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <FigmaIcon className="w-16 h-16 text-ods-text-secondary mb-4" />
+          <p className="text-ods-text-secondary">Figma URL not configured</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/embeds/google-sheets-viewer.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import React from 'react'
+import { Button } from '../ui'
+import { ExternalLink } from 'lucide-react'
+import { GoogleSheetsIcon } from '../icons-v2-generated'
+import { EmbedIframe } from './embed-iframe'
+import { toGoogleSheetsEmbedUrl, toGoogleSheetsOriginalUrl } from '../../utils/embed-url-converters'
+
+export interface GoogleSheetsViewerProps {
+  externalUrl: string
+  fileName?: string
+  height?: string
+}
+
+export function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleSheetsViewerProps) {
+  const displayName = fileName || 'Google Sheet'
+
+  if (!externalUrl) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <GoogleSheetsIcon className="w-16 h-16 text-ods-text-secondary mb-4" />
+        <p className="text-ods-text-secondary">Google Sheet URL not configured</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          <GoogleSheetsIcon className="w-5 h-5 shrink-0" />
+          <h2 className="text-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
+        </div>
+        <Button
+          variant="outline"
+          size="small-legacy"
+          href={toGoogleSheetsOriginalUrl(externalUrl)}
+          openInNewTab
+          leftIcon={<GoogleSheetsIcon className="w-4 h-4" />}
+          rightIcon={<ExternalLink className="w-4 h-4" />}
+          className="w-full sm:w-auto"
+        >
+          Open in Google Sheets
+        </Button>
+      </div>
+      <EmbedIframe
+        src={toGoogleSheetsEmbedUrl(externalUrl)}
+        title={displayName}
+        height={height}
+      />
+    </div>
+  )
+}

package/src/components/embeds/index.ts

@@ -0,0 +1,11 @@
+export { EmbedIframe } from './embed-iframe'
+export type { EmbedIframeProps } from './embed-iframe'
+
+export { PdfViewer } from './pdf-viewer'
+export type { PdfViewerProps } from './pdf-viewer'
+
+export { GoogleSheetsViewer } from './google-sheets-viewer'
+export type { GoogleSheetsViewerProps } from './google-sheets-viewer'
+
+export { FigmaEmbed } from './figma-embed'
+export type { FigmaEmbedProps } from './figma-embed'

package/src/components/embeds/pdf-viewer.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import React from 'react'
+import { Button } from '../ui'
+import { Download, Eye } from 'lucide-react'
+import { AdobePdfIcon } from '../icons-v2-generated'
+import { EmbedIframe } from './embed-iframe'
+
+export interface PdfViewerProps {
+  src: string
+  fileName?: string
+  onPreview?: () => void
+  onDownload?: () => void
+  height?: string
+}
+
+export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfViewerProps) {
+  const displayName = fileName || 'PDF Document'
+
+  if (!src) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <AdobePdfIcon className="w-16 h-16 text-ods-text-secondary mb-4" />
+        <p className="text-ods-text-secondary">PDF file not available</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          <AdobePdfIcon className="w-5 h-5 shrink-0" />
+          <h2 className="text-xl font-semibold text-ods-text-primary truncate">{displayName}</h2>
+        </div>
+        <div className="flex items-center gap-2 w-full sm:w-auto">
+          <Button
+            variant="outline"
+            size="small-legacy"
+            href={onPreview ? undefined : src}
+            openInNewTab={!onPreview}
+            onClick={onPreview}
+            leftIcon={<Eye className="w-4 h-4" />}
+            className="flex-1 sm:flex-initial"
+          >
+            Preview
+          </Button>
+          <Button
+            variant="outline"
+            size="small-legacy"
+            href={onDownload ? undefined : src}
+            openInNewTab={!onDownload}
+            onClick={onDownload}
+            leftIcon={<Download className="w-4 h-4" />}
+            className="flex-1 sm:flex-initial"
+          >
+            Download
+          </Button>
+        </div>
+      </div>
+      <EmbedIframe src={src} title={displayName} height={height} />
+    </div>
+  )
+}

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 {

package/src/components/index.ts

@@ -2,6 +2,8 @@
 
 // Components exports
 export * from './chat'
+export * from './docs'
+export * from './embeds'
 export * from './features'
 export * from './icons'
 export * from './navigation'

package/src/components/navigation/index.ts

@@ -56,6 +56,11 @@ export type { HeaderGlobalSearchProps } from './header-global-search'
 export { HeaderOrganizationFilter } from './header-organization-filter'
 export type { HeaderOrganizationFilterOrganization, HeaderOrganizationFilterProps } from './header-organization-filter'
 
+// Multi-level navigation — sidebar + mobile dropdown for the doc-viewer
+// (DocViewer / DocSourceViewer) and any other tree-shaped navigation surface.
+export { MultiLevelNavigation, MobileNavigationDropdown } from './multi-level-navigation'
+export type { NavigationNode } from './multi-level-navigation'
+
 // Re-export types from navigation types
 export type {
   MobileNavConfig, NavigationItem, NavigationSidebarConfig,