@flamingo-stack/openframe-frontend-core 0.0.665 → 0.0.666-snapshot.20260925092147

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

@@ -12,10 +12,20 @@ import { ModelDisplay } from './model-display';
 import type { ChatInputRef, ModelDisplayProps } from './types/component.types';
 import type { ChatContextItem, ChatContextPickerConfig } from './types/context-item.types';
 
+/** Why the composer takes no input, in the user's words — shown where the prompt would be. */
+export interface ChatComposerLock {
+  placeholder: string;
+}
+
 export interface ChatComposerProps {
   /** Read-only archived chat → render the unarchive placeholder instead of the
    *  input (Figma node 7361:426949). */
   archived?: boolean;
+  /** The host cannot take a message right now — e.g. the AI balance is spent
+   *  and the agents are paused (Figma 954:28455). The composer keeps its place
+   *  but takes no input: the editor is disabled with the lock's copy in the
+   *  prompt's place, and the `+` menu, the chips and Send are inert. */
+  lock?: ChatComposerLock | null;
   inputRef: Ref<ChatInputRef>;
   onSend: (text: string) => void;
   onStop: () => void;
@@ -80,6 +90,7 @@ export interface ChatComposerProps {
  */
 export function ChatComposer({
   archived = false,
+  lock = null,
   inputRef,
   onSend,
   onStop,
@@ -107,6 +118,7 @@ export function ChatComposer({
   previewText,
 }: ChatComposerProps) {
   const contextEnabled = !!contextPicker && !archived;
+  const locked = lock != null;
   const selected = selectedContextItems ?? [];
   const memory = contextMemoryItems ?? [];
 
@@ -131,11 +143,15 @@ export function ChatComposer({
       onStop={onStop}
       sending={sending}
       placeholder={placeholder}
+      // Locked: the editor is disabled and the lock's copy stands where the
+      // prompt would; there is nothing to focus, so autofocus stands down too.
+      disabled={locked}
+      disabledPlaceholder={lock?.placeholder}
       previewText={previewText}
       fullWidth
       className="px-0"
       reserveAvatarOffset={false}
-      autoFocus={autoFocus}
+      autoFocus={locked ? false : autoFocus}
       slashCommands={slashCommands}
       onMentionQueryChange={contextEnabled ? onMentionQueryChange : undefined}
       onValueChange={contextEnabled ? onValueChange : undefined}
@@ -148,7 +164,7 @@ export function ChatComposer({
           <ChatComposerPlusMenu
             onToggle={() => (contextPickerOpen ? onCloseContextPicker?.() : onOpenContextPicker?.())}
             open={contextPickerOpen}
-            disabled={attachmentsDisabled}
+            disabled={attachmentsDisabled || locked}
             dropdown={
               contextPicker ? (
                 <ChatContextPicker
@@ -202,7 +218,7 @@ export function ChatComposer({
                 items={memory}
                 onRemove={onRemoveContextMemoryItem}
                 resolveIcon={resolveContextIcon}
-                disabled={sending}
+                disabled={sending || locked}
                 className="rounded-t-md"
               />
               {selected.length > 0 && (
@@ -210,7 +226,7 @@ export function ChatComposer({
                   items={selected}
                   onRemove={onRemoveContextItem}
                   resolveIcon={resolveContextIcon}
-                  disabled={sending}
+                  disabled={sending || locked}
                   className={cn(
                     'border-b border-ods-border bg-ods-bg p-2',
                     // Only the TOP strip rounds into the card corner.
@@ -236,7 +252,7 @@ export function ChatComposer({
             attachmentsEnabled
             attachmentsCount={attachmentsCount}
             onAddFiles={onAddFiles}
-            disabled={attachmentsDisabled}
+            disabled={attachmentsDisabled || locked}
           />
         )}
         <div className="min-w-0 flex-1">

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

@@ -167,6 +167,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
     placeholder = 'Enter your Request...',
     reserveAvatarOffset: _reserveAvatarOffset,
     disabled = false,
+    disabledPlaceholder = 'Connection lost. Waiting to reconnect...',
     autoFocus = false,
     fullWidth = false,
     allowEmptySend = false,
@@ -607,8 +608,18 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                   the draft is EMPTY, so the editor is always on its plain line
                   box here. */}
               {isEmpty && !showPreview && (
-                <span className="pointer-events-none absolute left-0 top-0 select-none text-ods-text-secondary text-h4">
-                  {disabled ? 'Connection lost. Waiting to reconnect...' : placeholder}
+                <span
+                  className={cn(
+                    // One line, clipped with an ellipsis (Figma 954:28455): the
+                    // disabled copy is a sentence, and the panel's narrowest
+                    // width does not fit it — wrapped, it ran under the row.
+                    'pointer-events-none absolute left-0 top-0 w-full select-none truncate text-h4',
+                    // Disabled reads as disabled (Figma 954:28455): the copy says
+                    // why, and the colour says it is not an invitation to type.
+                    disabled ? 'text-ods-text-disabled' : 'text-ods-text-secondary',
+                  )}
+                >
+                  {disabled ? disabledPlaceholder : placeholder}
                 </span>
               )}
               {/* Ghost preview of a hovered quick-action's prompt. Overlaid like
@@ -642,7 +653,8 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                 data-editor
                 role="textbox"
                 aria-multiline="true"
-                aria-label={typeof placeholder === 'string' ? placeholder : 'Message'}
+                // Named by what it shows: locked, the lock's copy is the name.
+                aria-label={disabled ? disabledPlaceholder : typeof placeholder === 'string' ? placeholder : 'Message'}
                 // `sending` blocks SENDING, never typing. Taking
                 // `contentEditable` away under a focused editor blurs it, and
                 // iOS dismisses the keyboard on blur; restoring it re-establishes

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

@@ -62,7 +62,7 @@ import { CollisionBoundaryContext, PortalContainerContext } from '../ui/portal-c
 import { SquareAvatar } from '../ui/square-avatar';
 import { ChatArchivePage } from './chat-archive-page';
 import { ChatAttachmentChipStrip } from './chat-attachment-bar';
-import { ChatComposer } from './chat-composer';
+import { ChatComposer, type ChatComposerLock } from './chat-composer';
 import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { ChatHeaderIconButton } from './chat-header-icon-button';
 import { ChatHeaderSearchField } from './chat-header-search-field';
@@ -185,6 +185,15 @@ export interface EmbeddableChatProps {
    * cursor. Scrolling is intentionally disabled too. Defaults to `false`.
    */
   previewMode?: boolean;
+  /**
+   * The host cannot serve a message right now — e.g. the tenant's AI balance
+   * is spent and the agents are paused (Figma 954:28455). The composer stays
+   * in place but takes no input: the editor is disabled with `placeholder`
+   * where the prompt would be, and the `+` menu and Send are inert. Sends that
+   * bypass the composer (quick-action chips, imperative prompts) are the
+   * host's to hold back — it owns their callbacks. `null`/unset = live.
+   */
+  composerLock?: ChatComposerLock | null;
   /** Optional builders for chat-card types whose props live in hub-land
    *  (programs + product_release). Forwarded straight to
    *  `renderChatInlineEntityCard`. */
@@ -943,6 +952,7 @@ function EmbeddableChatInner({
   defaultOpen,
   showInternalTrigger = true,
   previewMode = false,
+  composerLock = null,
   extras,
   tableIdForDocumentType,
   modes,
@@ -1571,6 +1581,9 @@ function EmbeddableChatInner({
 
   const handleSend = useCallback(
     (text: string) => {
+      // Locked: the disabled editor cannot submit, but a queued Enter or a
+      // stale ref call still lands here — refused at the seam, not by luck.
+      if (composerLock) return;
       // Append chat-attachment markdown lines to the user's bubble.
       let augmentedText = text;
       if (readyAttachments.length > 0) {
@@ -1598,7 +1611,7 @@ function EmbeddableChatInner({
         setContextItems([]);
       }
     },
-    [sendMessage, readyAttachments, viewUrlPrefix, clearAttachments, contextItems],
+    [composerLock, sendMessage, readyAttachments, viewUrlPrefix, clearAttachments, contextItems],
   );
 
   /**
@@ -2649,6 +2662,7 @@ function EmbeddableChatInner({
 
                       <ChatComposer
                         archived={isViewingArchived}
+                        lock={composerLock}
                         inputRef={chatInputRef}
                         onSend={handleSend}
                         onStop={stopMessage}

package/src/components/chat/types/component.types.ts

@@ -453,6 +453,13 @@ export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
    */
   reserveAvatarOffset?: boolean;
   disabled?: boolean;
+  /**
+   * Placeholder shown while `disabled`, in the prompt's place — what the user
+   * cannot do right now. Defaults to the connection-lost copy, which is what
+   * `disabled` has meant so far (the ticket reply composer); a host that
+   * disables the input for another reason says so here.
+   */
+  disabledPlaceholder?: string;
   maxRows?: number;
   showSendButton?: boolean;
   sendButtonLabel?: string;

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

@@ -5,10 +5,10 @@ Draggable and static board ticket card components for a kanban-style board view,
 
 | Export | Type | Description |
 |---|---|---|
-| `TicketCardBody` | Component | Pure presentational inner content — title, device/org row, priority flag, assignees, tags, the `<ticketNumber> • <relative time>` line (either half alone when the other is missing), new message badge, and approval row |
+| `TicketCardBody` | Component | Pure presentational inner content — title, device/org row, priority flag, assignees, tags, the `<ticketNumber> • <relative time>` line (either half alone when the other is missing; with `href` it is a link to the ticket, since it takes pointer events for its tooltip and would otherwise swallow the card's click), new message badge, and approval row |
 | `TicketCardView` | Component | Static, non-draggable card using the same shell and body as the board card; suitable for embeds, previews, and marketing |
 | `TicketCard` | Component | Full board card: registers itself as both draggable and drop target, fades in place while carried, draws the insertion line for the shared aim, and supports an optional `href` link plus drag/drop-disabled state |
-| `TicketCardBodyProps` | Interface | Props for the shared body: `ticket`, `columnColor`, `renderAssignSlot`, `onApprove`, `onReject` |
+| `TicketCardBodyProps` | Interface | Props for the shared body: `ticket`, `columnColor`, `renderAssignSlot`, `onApprove`, `onReject`, and optional `href` / `onLinkClick` for the number/time line |
 | `TicketCardProps` | Interface | Extends body props with `columnId`, `href`, `dragDisabled`, `dropDisabled`, `allowedFromColumns`, and board-aware approve/reject signatures |
 
 **Nothing about the lane moves during a drag.** The card being carried stays exactly where it is,

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

@@ -7,6 +7,7 @@ import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/elemen
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
   memo,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -82,11 +83,27 @@ export interface TicketCardBodyProps {
    *  `TicketCard` adapts its own `(ticketId, requestId)` signature onto these). */
   onApprove?: (requestId?: string) => void | Promise<void>;
   onReject?: (requestId?: string) => void | Promise<void>;
+  /** Where the card opens. The body sits above the card's own link with pointer
+   *  events off, but the number/time line has to take them back for its tooltip -
+   *  so with an `href` that line is a link of its own, and a click on it opens the
+   *  ticket like a click anywhere else on the card. That link is out of the tab
+   *  order, so pass `href` only from a card that already renders its own focusable
+   *  link to the same place, as `TicketCard` does. */
+  href?: string;
+  onLinkClick?: (e: MouseEvent) => void;
 }
 
 /** The card's inner content: title + device/org, priority + assignees, tags,
  *  timestamp, "New Message", and the approval row. Pure — driven only by props. */
-export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprove, onReject }: TicketCardBodyProps) {
+export function TicketCardBody({
+  ticket,
+  columnColor,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+  href,
+  onLinkClick,
+}: TicketCardBodyProps) {
   const showNewMessage = !!ticket.hasNewMessage && !!columnColor;
   const newMessageTextColor = columnColor ? getReadableTextColor(columnColor) : undefined;
 
@@ -143,6 +160,22 @@ export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprov
   // may be empty - the hub hero card and tickets without one send '' - so either
   // half stands on its own and the line disappears with both missing.
   const metaLabel = [ticket.ticketNumber || null, timestampLabel].filter(Boolean).join(' \u2022 ');
+  const metaClass = 'truncate text-ods-text-secondary text-h6';
+  // Out of the tab order: the card's own link is the one stop for the ticket.
+  const meta = href ? (
+    <Link
+      href={href}
+      draggable={false}
+      prefetch={false}
+      tabIndex={-1}
+      onClick={onLinkClick}
+      className={cn('pointer-events-auto block', metaClass)}
+    >
+      {metaLabel}
+    </Link>
+  ) : (
+    <p className={cn(tooltipLabel && 'pointer-events-auto', metaClass)}>{metaLabel}</p>
+  );
 
   return (
     <>
@@ -165,14 +198,12 @@ export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprov
         (tooltipLabel ? (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <p className="pointer-events-auto truncate text-ods-text-secondary text-h6">{metaLabel}</p>
-              </TooltipTrigger>
+              <TooltipTrigger asChild>{meta}</TooltipTrigger>
               <TooltipContent>{tooltipLabel}</TooltipContent>
             </Tooltip>
           </TooltipProvider>
         ) : (
-          <p className="truncate text-ods-text-secondary text-h6">{metaLabel}</p>
+          meta
         ))}
       {ticket.escalatedByUser && (
         <div className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-open-yellow text-h6">
@@ -215,7 +246,9 @@ export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprov
 // drag-and-drop / board context (for embeds, marketing heroes, previews).
 // =============================================================================
 
-export interface TicketCardViewProps extends TicketCardBodyProps {
+/** No `href`: the static card has no card-wide link for keyboard users, so the
+ *  number/time line must not become a pointer-only one. */
+export interface TicketCardViewProps extends Omit<TicketCardBodyProps, 'href' | 'onLinkClick'> {
   className?: string;
   /** Merged over the shell's own — the board uses it to fade the copy it leaves
    *  behind and to place the one that follows the pointer. */
@@ -412,9 +445,13 @@ export const TicketCard = memo(function TicketCardImpl({
   const style: CSSProperties = {};
   if (showNewMessage) style.borderColor = columnColor;
 
-  const handleClick = (e: MouseEvent) => {
-    if (isDragging) e.preventDefault();
-  };
+  // Stable between drags: it is handed into the memoized body below.
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      if (isDragging) e.preventDefault();
+    },
+    [isDragging],
+  );
 
   // Held as one memoized element, not re-created per render. A card being
   // dragged over re-renders on every edge flip — it owns the hover state that
@@ -430,9 +467,11 @@ export const TicketCard = memo(function TicketCardImpl({
         renderAssignSlot={renderAssignSlot}
         onApprove={onApprove ? requestId => onApprove(ticket.id, requestId) : undefined}
         onReject={onReject ? requestId => onReject(ticket.id, requestId) : undefined}
+        href={href}
+        onLinkClick={handleClick}
       />
     ),
-    [ticket, columnColor, renderAssignSlot, onApprove, onReject],
+    [ticket, columnColor, renderAssignSlot, onApprove, onReject, href, handleClick],
   );
 
   // No transition on the margins below, and that is not a style choice: room is

package/src/stories/EmbeddableChat.stories.tsx

@@ -535,6 +535,27 @@ export const MingoOnly: Story = {
   args: {},
 };
 
+/**
+ * The host cannot serve a message — the tenant's AI balance is spent and the
+ * agents are paused (Figma 954:28455). The panel reads as usual; the composer
+ * keeps its place, says why it takes nothing, and its `+` and Send are inert.
+ */
+export const ComposerLocked: Story = {
+  render: args => (
+    <EmbeddableChat
+      {...args}
+      modes={{
+        mingo: createMockMingoConfig(),
+      }}
+      defaultActiveMode="mingo"
+      defaultOpen
+      showInternalTrigger={false}
+      composerLock={{ placeholder: 'Mingo chat unavailable. Top up your balance.' }}
+    />
+  ),
+  args: {},
+};
+
 // =============================================================================
 // 3. Both modes (toggle visible — openframe-frontend target)
 // =============================================================================