@flamingo-stack/openframe-frontend-core 0.0.562 → 0.0.563-snapshot.20260824140722

package/src/components/ui/ticket-info-section.tsx

@@ -1,117 +1,128 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon"
-import { UserIcon } from "../icons-v2-generated/users/user-icon"
-import { cn } from "../../utils/cn"
-import { AssigneeDropdown, type TicketAssigneeOption } from "./assignee-dropdown"
-import { SquareAvatar } from "./square-avatar"
-import { Tag } from "./tag"
-import { TicketStatusTag, type TicketStatusTagOption } from "./ticket-status-tag"
-import { TicketDetailSection } from "./ticket-detail-section"
-import { type TicketAttachment, TicketAttachmentsList } from "./ticket-attachments-list"
-import type { TicketNote } from "./ticket-note-card"
-import { TicketNotesSection } from "./ticket-notes-section"
-import { SimpleMarkdownRenderer } from "./markdown/simple-markdown-renderer"
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
+import { UserIcon } from '../icons-v2-generated/users/user-icon';
+import { AssigneeDropdown, type TicketAssigneeOption } from './assignee-dropdown';
+import { SimpleMarkdownRenderer } from './markdown/simple-markdown-renderer';
+import { SquareAvatar } from './square-avatar';
+import { Tag } from './tag';
+import { type TicketAttachment, TicketAttachmentsList } from './ticket-attachments-list';
+import { TicketDetailSection } from './ticket-detail-section';
+import type { TicketNote } from './ticket-note-card';
+import { TicketNotesSection } from './ticket-notes-section';
+import { TicketStatusTag, type TicketStatusTagOption } from './ticket-status-tag';
 
-export type { TicketAssigneeOption }
+export type { TicketAssigneeOption };
 
 export interface TicketInfoSectionProps {
   /** Organization name and image */
   organization?: {
-    name: string
-    imageSrc?: string
-  }
+    name: string;
+    imageSrc?: string;
+  };
   /** User name */
-  user?: string
+  user?: string;
   /** Device info */
   device?: {
-    name: string
-    icon?: React.ReactNode
-    onClick?: () => void
-  }
+    name: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+  };
   /** Status tag */
-  status?: string
+  status?: string;
   /** Display label for the status tag (e.g. a custom status name). */
-  statusLabel?: string
+  statusLabel?: string;
   /** Hex color for the status tag (e.g. a custom status color). */
-  statusColor?: string
+  statusColor?: string;
   /** When provided, the status tag becomes an inline changer with these options. */
-  statusOptions?: TicketStatusTagOption[]
+  statusOptions?: TicketStatusTagOption[];
   /** Called with the chosen status id from the inline status dropdown. */
-  onStatusSelect?: (id: string) => void
+  onStatusSelect?: (id: string) => void;
   /** Disables the inline status dropdown while a change is in flight. */
-  isStatusPending?: boolean
+  isStatusPending?: boolean;
+  /** Locks the status: renders the plain tag instead of the dropdown (e.g. a pending approval blocks the transition). */
+  isStatusDisabled?: boolean;
+  /** Reason shown in a tooltip over the status tag when `isStatusDisabled`. */
+  statusDisabledReason?: string;
   /** Expand button click handler */
-  onExpand?: () => void
+  onExpand?: () => void;
   /** Whether the section is expanded */
-  expanded?: boolean
+  expanded?: boolean;
   /** Additional className */
-  className?: string
+  className?: string;
 
   // --- Expanded view props ---
 
   /** Assigned person info with inline dropdown */
   assigned?: {
     currentAssignee?: {
-      id: string
-      name: string
-      avatarSrc?: string
+      id: string;
+      name: string;
+      avatarSrc?: string;
       /** Deleted account (DELETED / SELF_DELETED) — renders the red user-x placeholder + red name. */
-      deleted?: boolean
-    }
-    options: TicketAssigneeOption[]
-    isLoading?: boolean
-    isPending?: boolean
-    onAssign: (userId: string | null) => void
-  }
+      deleted?: boolean;
+    };
+    options: TicketAssigneeOption[];
+    isLoading?: boolean;
+    isPending?: boolean;
+    onAssign: (userId: string | null) => void;
+  };
   /** Created date string */
-  createdAt?: string
+  createdAt?: string;
   /** Ticket description — markdown/HTML content */
-  description?: string
+  description?: string;
   /** File attachments (view-only with download) */
-  attachments?: TicketAttachment[]
+  attachments?: TicketAttachment[];
   /** Tag labels */
-  tags?: string[]
+  tags?: string[];
   /** Notes */
-  notes?: TicketNote[]
-  onAddNote?: (text: string) => void
-  onEditNote?: (id: string, text: string) => void
-  onDeleteNote?: (id: string) => void
+  notes?: TicketNote[];
+  onAddNote?: (text: string) => void;
+  onEditNote?: (id: string, text: string) => void;
+  onDeleteNote?: (id: string) => void;
   /** Disables the note input while a note is being added */
-  isAddingNote?: boolean
+  isAddingNote?: boolean;
 }
 
-function InfoCell({ value, label, icon, onClick }: {
-  value: string
-  label: string
-  icon?: React.ReactNode
-  onClick?: () => void
+function InfoCell({
+  value,
+  label,
+  icon,
+  onClick,
+}: {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
 }) {
   return (
     <div className="flex-1 min-w-0 overflow-hidden">
       <div className="flex flex-col justify-center">
         <div className="flex items-center gap-1 w-full min-w-0">
           {icon && (
-            <span className="shrink-0 size-4 flex items-center justify-center text-ods-text-secondary">
-              {icon}
-            </span>
+            <span className="shrink-0 size-4 flex items-center justify-center text-ods-text-secondary">{icon}</span>
           )}
           {onClick ? (
             <button
               type="button"
               onClick={onClick}
-              className="text-h4 text-ods-text-primary truncate hover:text-ods-accent transition-colors cursor-pointer text-left" title={value}>
+              className="text-h4 text-ods-text-primary truncate hover:text-ods-accent transition-colors cursor-pointer text-left"
+              title={value}
+            >
               {value}
             </button>
           ) : (
-            <span className="text-h4 text-ods-text-primary truncate" title={value}>{value}</span>
+            <span className="text-h4 text-ods-text-primary truncate" title={value}>
+              {value}
+            </span>
           )}
         </div>
         <span className="text-h6 text-ods-text-secondary truncate">{label}</span>
       </div>
     </div>
-  )
+  );
 }
 
 export function TicketInfoSection({
@@ -123,6 +134,8 @@ export function TicketInfoSection({
   statusOptions,
   onStatusSelect,
   isStatusPending,
+  isStatusDisabled,
+  statusDisabledReason,
   onExpand,
   expanded = false,
   className,
@@ -138,12 +151,7 @@ export function TicketInfoSection({
   isAddingNote,
 }: TicketInfoSectionProps) {
   return (
-    <div
-      className={cn(
-        "rounded-[6px] border border-ods-border overflow-hidden",
-        className,
-      )}
-    >
+    <div className={cn('rounded-[6px] border border-ods-border overflow-hidden', className)}>
       {/* Header row */}
       <div className="grid grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_auto] gap-4 px-4 py-3 bg-ods-card border-b border-ods-border items-center">
         {/* Organization with image */}
@@ -151,11 +159,11 @@ export function TicketInfoSection({
           <SquareAvatar
             src={organization?.imageSrc}
             alt={organization?.name}
-            fallback={organization?.name || "Org"}
+            fallback={organization?.name || 'Org'}
             size="md"
             className="shrink-0"
           />
-          <InfoCell value={organization?.name || "Unassigned"} label="Organization" />
+          <InfoCell value={organization?.name || 'Unassigned'} label="Organization" />
         </div>
 
         {/* Assigned */}
@@ -180,24 +188,21 @@ export function TicketInfoSection({
         </div>
 
         {/* Device */}
-        <InfoCell
-          value={device?.name || "Unassigned"}
-          label="Device"
-          icon={device?.icon}
-          onClick={device?.onClick}
-        />
+        <InfoCell value={device?.name || 'Unassigned'} label="Device" icon={device?.icon} onClick={device?.onClick} />
 
         {/* Status tag + expand button */}
         <div className="flex items-center gap-4 min-w-0">
           {(status || statusLabel) && (
             <div className="min-w-0">
               <TicketStatusTag
-                status={status ?? ""}
+                status={status ?? ''}
                 label={statusLabel}
                 color={statusColor}
                 options={statusOptions}
                 onSelect={onStatusSelect}
                 isPending={isStatusPending}
+                disabled={isStatusDisabled}
+                disabledReason={statusDisabledReason}
               />
             </div>
           )}
@@ -206,16 +211,16 @@ export function TicketInfoSection({
               type="button"
               onClick={onExpand}
               className={cn(
-                "shrink-0 flex items-center justify-center p-3 rounded-[6px]",
-                "bg-ods-card border border-ods-border",
-                "hover:bg-ods-bg-hover transition-colors duration-150",
+                'shrink-0 flex items-center justify-center p-3 rounded-[6px]',
+                'bg-ods-card border border-ods-border',
+                'hover:bg-ods-bg-hover transition-colors duration-150',
               )}
-              aria-label={expanded ? "Collapse" : "Expand"}
+              aria-label={expanded ? 'Collapse' : 'Expand'}
             >
               <Chevron02DownIcon
                 className={cn(
-                  "size-6 text-ods-text-primary transition-transform duration-200",
-                  expanded && "rotate-180",
+                  'size-6 text-ods-text-primary transition-transform duration-200',
+                  expanded && 'rotate-180',
                 )}
               />
             </button>
@@ -236,9 +241,7 @@ export function TicketInfoSection({
           {/* Content area */}
           <div className="flex flex-col gap-4 p-4 bg-ods-bg border-b border-ods-border">
             {/* Description */}
-            {description && (
-              <SimpleMarkdownRenderer content={description} />
-            )}
+            {description && <SimpleMarkdownRenderer content={description} />}
 
             {/* Attachments */}
             {attachments && attachments.length > 0 && (
@@ -274,5 +277,5 @@ export function TicketInfoSection({
         </>
       )}
     </div>
-  )
+  );
 }

package/src/components/ui/ticket-status-tag.tsx

@@ -1,25 +1,26 @@
-'use client'
+'use client';
 
-import React from 'react'
-import { ActionsMenuDropdown } from './actions-menu'
-import { ColorSwatch } from './color-swatch'
-import { Tag, type TagProps, tagVariants } from './tag'
-import { CheckCircleIcon, Chevron02DownIcon } from '../icons-v2-generated'
-import { cn } from '../../utils/cn'
-import { deriveActiveColor, deriveHoverColor, getReadableTextColor } from '../../utils/ods-color-utils'
+import React from 'react';
+import { cn } from '../../utils/cn';
+import { deriveActiveColor, deriveHoverColor, getReadableTextColor } from '../../utils/ods-color-utils';
+import { CheckCircleIcon, Chevron02DownIcon } from '../icons-v2-generated';
+import { ActionsMenuDropdown } from './actions-menu';
+import { ColorSwatch } from './color-swatch';
+import { Tag, type TagProps, tagVariants } from './tag';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
 /**
  * Canonical ticket status values.
  * This is the single source of truth for ticket statuses across all frontends.
  */
-export type TicketStatus = 'ACTIVE' | 'AI_ASSISTANCE' | 'TECH_REQUIRED' | 'ON_HOLD' | 'RESOLVED' | 'ARCHIVED'
+export type TicketStatus = 'ACTIVE' | 'AI_ASSISTANCE' | 'TECH_REQUIRED' | 'ON_HOLD' | 'RESOLVED' | 'ARCHIVED';
 
-type TagVariant = NonNullable<TagProps['variant']>
+type TagVariant = NonNullable<TagProps['variant']>;
 
 interface TicketStatusConfig {
-  label: string
-  variant: TagVariant
-  icon?: React.ReactNode
+  label: string;
+  variant: TagVariant;
+  icon?: React.ReactNode;
 }
 
 const STATUS_CONFIG: Record<TicketStatus, TicketStatusConfig> = {
@@ -28,7 +29,7 @@ const STATUS_CONFIG: Record<TicketStatus, TicketStatusConfig> = {
     variant: 'success',
   },
   AI_ASSISTANCE: {
-    label: 'AI Assistance',
+    label: 'AI Handling',
     variant: 'outline',
   },
   TECH_REQUIRED: {
@@ -48,7 +49,7 @@ const STATUS_CONFIG: Record<TicketStatus, TicketStatusConfig> = {
     label: 'Archived',
     variant: 'grey',
   },
-}
+};
 
 /**
  * Maps known aliases to canonical TicketStatus values.
@@ -81,14 +82,14 @@ const STATUS_ALIASES: Record<string, TicketStatus> = {
   resolved: 'RESOLVED',
   archived: 'ARCHIVED',
   action_required: 'TECH_REQUIRED',
-}
+};
 
 /**
  * Resolves any status string to a canonical TicketStatus.
  * Returns null for unknown values.
  */
 export function resolveTicketStatus(status: string): TicketStatus | null {
-  return STATUS_ALIASES[status] ?? null
+  return STATUS_ALIASES[status] ?? null;
 }
 
 /**
@@ -96,11 +97,11 @@ export function resolveTicketStatus(status: string): TicketStatus | null {
  * Accepts any known status format (backend, chat, dialog).
  */
 export function getTicketStatusConfig(status: string): TicketStatusConfig {
-  const canonical = resolveTicketStatus(status)
+  const canonical = resolveTicketStatus(status);
   if (!canonical) {
-    return { label: status.replace(/_/g, ' '), variant: 'outline' }
+    return { label: status.replace(/_/g, ' '), variant: 'outline' };
   }
-  return STATUS_CONFIG[canonical]
+  return STATUS_CONFIG[canonical];
 }
 
 /**
@@ -108,8 +109,8 @@ export function getTicketStatusConfig(status: string): TicketStatusConfig {
  * Drop-in replacement for the getTicketStatusTag utility in openframe-frontend.
  */
 export function getTicketStatusTag(status: string): { label: string; variant: TagVariant; icon?: React.ReactNode } {
-  const config = getTicketStatusConfig(status)
-  return { label: config.label, variant: config.variant, icon: config.icon }
+  const config = getTicketStatusConfig(status);
+  return { label: config.label, variant: config.variant, icon: config.icon };
 }
 
 // ---------------------------------------------------------------------------
@@ -117,19 +118,19 @@ export function getTicketStatusTag(status: string): { label: string; variant: Ta
 // ---------------------------------------------------------------------------
 
 /** Backend status-definition kinds. */
-export type TicketStatusKind = 'AI_ASSISTANCE' | 'TECH_REQUIRED' | 'RESOLVED' | 'ARCHIVED' | 'CUSTOM'
+export type TicketStatusKind = 'AI_ASSISTANCE' | 'TECH_REQUIRED' | 'RESOLVED' | 'ARCHIVED' | 'CUSTOM';
 
 const KIND_TO_CANONICAL: Record<Exclude<TicketStatusKind, 'CUSTOM'>, TicketStatus> = {
   AI_ASSISTANCE: 'AI_ASSISTANCE',
   TECH_REQUIRED: 'TECH_REQUIRED',
   RESOLVED: 'RESOLVED',
   ARCHIVED: 'ARCHIVED',
-}
+};
 
 /** Canonical TicketStatus for a backend kind, or undefined for CUSTOM/unknown. */
 export function kindToCanonicalStatus(kind: string | null | undefined): TicketStatus | undefined {
-  if (kind == null || kind === 'CUSTOM') return undefined
-  return (KIND_TO_CANONICAL as Record<string, TicketStatus | undefined>)[kind]
+  if (kind == null || kind === 'CUSTOM') return undefined;
+  return (KIND_TO_CANONICAL as Record<string, TicketStatus | undefined>)[kind];
 }
 
 /**
@@ -138,18 +139,18 @@ export function kindToCanonicalStatus(kind: string | null | undefined): TicketSt
  * TECH_REQUIRED and custom statuses use their color.
  */
 export function usesCanonicalStatusStyle(kind: string | null | undefined): boolean {
-  return kind != null && kind !== 'CUSTOM' && kind !== 'TECH_REQUIRED'
+  return kind != null && kind !== 'CUSTOM' && kind !== 'TECH_REQUIRED';
 }
 
 export interface TicketStatusInput {
   /** Legacy enum status (may be empty/null under the lifecycle feature). */
-  status?: string | null
+  status?: string | null;
   /** Backend status kind (AI_ASSISTANCE, TECH_REQUIRED, RESOLVED, ARCHIVED, CUSTOM). */
-  statusKind?: string | null
+  statusKind?: string | null;
   /** Custom status display name. */
-  statusName?: string | null
+  statusName?: string | null;
   /** Custom status hex color. */
-  statusColor?: string | null
+  statusColor?: string | null;
 }
 
 /**
@@ -159,12 +160,12 @@ export interface TicketStatusInput {
  * backend color, labelled by the custom status name.
  */
 export function resolveStatusTagProps(input: TicketStatusInput): { status: string; label?: string; color?: string } {
-  const canonical = usesCanonicalStatusStyle(input.statusKind) ? kindToCanonicalStatus(input.statusKind) : undefined
+  const canonical = usesCanonicalStatusStyle(input.statusKind) ? kindToCanonicalStatus(input.statusKind) : undefined;
   return {
     status: canonical ?? input.status ?? '',
     label: input.statusName ?? undefined,
     color: canonical ? undefined : (input.statusColor ?? undefined),
-  }
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -173,36 +174,43 @@ export function resolveStatusTagProps(input: TicketStatusInput): { status: strin
 
 /** A selectable status option for the inline status-change dropdown. */
 export interface TicketStatusTagOption {
-  id: string
-  name: string
-  color: string
+  id: string;
+  name: string;
+  color: string;
 }
 
 export interface TicketStatusTagProps {
   /** Ticket status in any known format (ACTIVE, active, ACTION_REQUIRED, etc.) */
-  status: string
+  status: string;
   /** Override the default label */
-  label?: string
+  label?: string;
   /**
    * Hex color override. Replaces the variant's fill; text
    * color is computed for contrast. The status's preset icon is preserved.
    */
-  color?: string
+  color?: string;
   /** Override the status's default Tag variant (e.g. force 'outline' or 'primary'). */
-  variant?: TagVariant
+  variant?: TagVariant;
   /** Additional className for the Tag */
-  className?: string
+  className?: string;
   /** Show the status-specific icon (e.g. checkmark for resolved) */
-  showIcon?: boolean
+  showIcon?: boolean;
   /**
    * Make the tag an inline status changer. When provided (with `onSelect`), the
    * tag renders with a chevron and opens a dropdown of these options on click.
    */
-  options?: TicketStatusTagOption[]
+  options?: TicketStatusTagOption[];
   /** Called with the chosen option id. Required for the inline dropdown. */
-  onSelect?: (id: string) => void
+  onSelect?: (id: string) => void;
   /** Disables the dropdown while a change is in flight. */
-  isPending?: boolean
+  isPending?: boolean;
+  /**
+   * Lock the status: renders the plain non-interactive tag even when `options`
+   * are provided (e.g. a pending approval request blocks the transition).
+   */
+  disabled?: boolean;
+  /** Reason shown in a tooltip over the tag when `disabled`. */
+  disabledReason?: string;
 }
 
 /**
@@ -220,8 +228,10 @@ export function TicketStatusTag({
   options,
   onSelect,
   isPending = false,
+  disabled = false,
+  disabledReason,
 }: TicketStatusTagProps) {
-  const config = getTicketStatusConfig(status)
+  const config = getTicketStatusConfig(status);
   // Custom color: drive bg via CSS vars so the derived hover/active fills can win
   // on :hover/:active (an inline backgroundColor would block class-based hover).
   const customStyle = color
@@ -231,10 +241,10 @@ export function TicketStatusTag({
         '--tag-bg-active': deriveActiveColor(color),
         color: getReadableTextColor(color),
       } as React.CSSProperties)
-    : undefined
+    : undefined;
   const customColorClasses = color
     ? 'bg-[var(--tag-bg)] hover:bg-[var(--tag-bg-hover)] active:bg-[var(--tag-bg-active)]'
-    : undefined
+    : undefined;
 
   const tag = (
     <Tag
@@ -244,10 +254,22 @@ export function TicketStatusTag({
       className={cn('shrink-0 w-fit', customColorClasses, className)}
       style={customStyle}
     />
-  )
+  );
 
-  if (!options || options.length === 0 || !onSelect) {
-    return tag
+  if (disabled || !options || options.length === 0 || !onSelect) {
+    if (disabled && disabledReason) {
+      return (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="w-fit shrink-0 cursor-not-allowed">{tag}</span>
+            </TooltipTrigger>
+            <TooltipContent>{disabledReason}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    }
+    return tag;
   }
 
   return (
@@ -293,5 +315,5 @@ export function TicketStatusTag({
         </button>
       }
     />
-  )
+  );
 }

package/src/stories/.Board.stories.md

@@ -16,7 +16,7 @@ Storybook stories for the `Board` component, covering all major interaction stat
 | Story | Description |
 |---|---|
 | `Default` | Five canonical-status columns with full DnD wired up |
-| `SystemAndCustom` | Mixed system + custom columns; AI-Assistance refuses drops, Resolved tickets are pinned |
+| `SystemAndCustom` | Mixed system + custom columns; AI Handling refuses drops, Resolved tickets are pinned |
 | `CustomColumns` | Fully custom columns decoupled from `TicketStatus` (Backlog, In Review, Blocked, Done) |
 | `Collapsible` | Column collapse/expand with `localStorage` persistence via `collapseStorageKey` |
 | `Pagination` | One column loads 10 of 50 tickets; `onLoadMore` appends pages after a 600ms simulated delay |

package/src/stories/Board.stories.tsx

@@ -112,11 +112,11 @@ export const Default: Story = {
 
 /**
  * Mixed system + custom columns matching the OpenFrame Tickets layout:
- * AI-Assistance and Tech Required are system columns (default surface, joined
+ * AI Handling and Tech Required are system columns (default surface, joined
  * with no gap), middle columns are custom (tinted by color), Resolved is a
  * system column whose `RESOLVED` status gives the green-checkmark tag.
  *
- * DnD restrictions: AI-Assistance refuses drops (tickets enter via the AI
+ * DnD restrictions: AI Handling refuses drops (tickets enter via the AI
  * pipeline, not by dragging), but tickets in it can still be dragged out.
  * Resolved tickets are pinned (`dragDisabled`).
  */
@@ -124,8 +124,8 @@ export const SystemAndCustom: Story = {
   render: function Render() {
     const [columns, setColumns] = React.useState<BoardColumnDef[]>([
       {
-        id: 'ai-assistance',
-        label: 'AI-Assistance',
+        id: 'ai-handling',
+        label: 'AI Handling',
         color: '#f357bb',
         system: true,
         dropDisabled: true,

package/src/stories/DashboardInfoCard.stories.tsx

@@ -356,7 +356,7 @@ export const ProgressSizeComparison: Story = {
 export const WithTitleTag: Story = {
   args: {
     value: 75,
-    titleTag: <Tag variant="outline" label="AI-Assistance" />,
+    titleTag: <Tag variant="outline" label="AI Handling" />,
   },
   parameters: {
     docs: {

package/src/stories/InfoSection.stories.tsx

@@ -35,7 +35,7 @@ const assigneeOptions = [
 ];
 
 const statusOptions = [
-  { id: 's1', name: 'AI Assistance', color: '#3a3a3a' },
+  { id: 's1', name: 'AI Handling', color: '#3a3a3a' },
   { id: 's2', name: 'Tech Required', color: '#f59e0b' },
   { id: 's3', name: 'Resolved', color: '#5ea62e' },
 ];

package/src/stories/TicketEventMessage.stories.tsx

@@ -71,7 +71,7 @@ export const ReopenedWithReason: Story = {
 	},
 };
 
-/** Reopened into AI Assistance (targetStatusKind decides) — Figma type=reopened-fae. */
+/** Reopened into AI Handling (targetStatusKind decides) — Figma type=reopened-fae. */
 export const ReopenedFaeContinues: Story = {
 	args: {
 		data: { kind: "REOPENED", actorId: "u-7", actorName: "John Smith", actorType: "CLIENT", targetStatusKind: "AI_ASSISTANCE" },