@flamingo-stack/openframe-frontend-core 0.0.685 → 0.0.686-2463.7461.1

package/src/components/ui/avatar-stack.tsx

@@ -33,6 +33,10 @@ export interface AvatarStackProps {
    * so the text beside every stack starts at the same x.
    */
   slots?: number;
+  /** How many people the group has when `people` is only a sample of it (a
+   *  server that returns the first few faces plus a count). The "+N" circle
+   *  then counts everyone not shown. Defaults to `people.length`. */
+  total?: number;
   /** Size bucket (also sizes the "+N" circle). `xs` (24px) is for
    *  dense card meta rows (chat compact cards, delivery rows). */
   size?: AvatarStackSize;
@@ -63,22 +67,28 @@ export function AvatarStack({
   people,
   max = 3,
   slots,
+  total,
   size = 'md',
   ringClassName = 'ring-ods-card',
   label = 'Assignees',
   className,
 }: AvatarStackProps) {
   if (people.length === 0) return null;
-  const faces = slots ? (people.length > slots ? slots - 1 : slots) : max;
+  const groupSize = Math.max(total ?? people.length, people.length);
+  const faces = slots ? (groupSize > slots ? slots - 1 : slots) : max;
   const visible = people.slice(0, faces);
   const overflow = people.slice(faces);
+  const overflowCount = groupSize - visible.length;
+  const names = people.map(p => p.name).join(', ');
+  // Names beyond the sample are unknown here; say how many there are instead.
+  const unnamed = groupSize - people.length;
   const compact = size === 'xs';
   return (
     <div
       className={cn('flex items-center', slots && 'shrink-0', className)}
       style={slots ? { width: SIZE_PX[size] + (slots - 1) * (SIZE_PX[size] - OVERLAP_PX[size]) } : undefined}
       role="group"
-      aria-label={`${label}: ${people.map(p => p.name).join(', ')}`}
+      aria-label={`${label}: ${names}${unnamed > 0 ? ` and ${unnamed} more` : ''}`}
     >
       {visible.map((person, i) => (
         <SquareAvatar
@@ -95,9 +105,9 @@ export function AvatarStack({
           style={{ zIndex: visible.length - i }}
         />
       ))}
-      {overflow.length > 0 && (
+      {overflowCount > 0 && (
         <span
-          title={overflow.map(p => p.name).join(', ')}
+          title={overflow.length > 0 ? overflow.map(p => p.name).join(', ') : `${overflowCount} more`}
           className={cn(
             'relative z-0 flex shrink-0 items-center justify-center rounded-full bg-ods-bg text-ods-text-secondary ring-2',
             ringClassName,
@@ -109,7 +119,7 @@ export function AvatarStack({
             OVERFLOW_CIRCLE_SIZE[size],
           )}
         >
-          +{overflow.length}
+          +{overflowCount}
         </span>
       )}
     </div>

package/src/components/ui/reopen-ticket-request-modal.tsx

@@ -28,6 +28,9 @@ export interface ReopenTicketRequestModalProps {
    * omits `handoffToTechnician`.
    */
   showHandoffOption?: boolean;
+  /** Opens with the handoff checkbox already ticked — the user reached the
+   *  modal by asking for a technician, so that is the choice to confirm. */
+  defaultHandoff?: boolean;
   /** Confirm in-flight: buttons lock and the modal refuses to close. */
   isPending?: boolean;
   onConfirm: (selection: ReopenTicketRequestSelection) => void;
@@ -45,11 +48,12 @@ export function ReopenTicketRequestModal({
   isOpen,
   onClose,
   showHandoffOption = false,
+  defaultHandoff = false,
   isPending = false,
   onConfirm,
 }: ReopenTicketRequestModalProps) {
   const [reason, setReason] = useState('');
-  const [handoff, setHandoff] = useState(false);
+  const [handoff, setHandoff] = useState(defaultHandoff);
 
   // Re-seed the inputs every time the modal opens. Adjusted while rendering,
   // not from an effect: the modal does not unmount when it closes, so an effect
@@ -60,7 +64,7 @@ export function ReopenTicketRequestModal({
     setWasOpen(isOpen);
     if (isOpen) {
       setReason('');
-      setHandoff(false);
+      setHandoff(defaultHandoff);
     }
   }
 

package/src/components/ui/tab-navigation.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react';
 import { useSearchParams, useRouter, usePathname } from '../../embed-shims/next-navigation';
 import { cn } from '../../utils/cn';
+import { Tag } from './tag';
 
 export interface TabItem {
   id: string;
@@ -43,6 +44,13 @@ export interface TabItem {
    */
   component?: React.ComponentType<any>;
   indicator?: 'success' | 'warning' | 'error';
+  /**
+   * A stamp drawn after the label, e.g. "Beta" on a tab that is shipped but
+   * still behind its flag. The same `warning` chip the navigation sidebar draws
+   * for `NavigationSidebarItem.badge`; the tab's accessible name becomes
+   * "Label (Badge)". Cased as read — the chip upper-cases it.
+   */
+  badge?: string;
 }
 
 export interface TabNavigationUrlSyncOptions {
@@ -329,6 +337,7 @@ const TabBar = memo(function TabBarImpl({
               ref={isActive ? activeTabRef : undefined}
               type="button"
               onClick={() => onTabChange(tab.id)}
+              aria-label={tab.badge ? `${tab.label} (${tab.badge})` : undefined}
               className={cn(
                 'relative flex shrink-0 cursor-pointer items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
                 // Named rather than `transition-all`: the only thing that moves
@@ -376,6 +385,20 @@ const TabBar = memo(function TabBarImpl({
               >
                 {tab.label}
               </span>
+
+              {tab.badge && (
+                // The chip is 32px against a 20/24px label line. The negative
+                // margin takes the difference back, so a stamped tab is exactly
+                // as tall as its neighbours at every breakpoint. No hover shade:
+                // the tab is the target, and the cursor passes through to it.
+                <Tag
+                  as="span"
+                  aria-hidden
+                  label={tab.badge}
+                  variant="warning"
+                  className="pointer-events-none my-[calc((var(--font-line-space-h4-body)_-_2rem)/2)] ml-[var(--spacing-system-xxs)] shrink-0"
+                />
+              )}
             </button>
           );
         })}

package/src/stories/FaeLayoutV2.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+
+import { ChatInput } from '../components/chat/chat-input';
+import { ChatListEmptyState } from '../components/chat/chat-list-empty-state';
+import { ChatMessageList } from '../components/chat/chat-message-list';
+import { ChatListItem, ChatNavSidebar } from '../components/chat/chat-nav-sidebar';
+import { ChatTopNavigation } from '../components/chat/chat-top-navigation';
+import { MspOrganizationCard } from '../components/chat/msp-organization-card';
+import type { Message } from '../components/chat/types/message.types';
+import { OpenFrameLogo } from '../components/icons';
+import {
+  ChatPlusIcon,
+  ChatQuestionIcon,
+  ChatsIcon,
+  CheckCircleIcon,
+  ClockHistoryIcon,
+  DotsLoaderIcon,
+  HourglassClockIcon,
+  MessageIndicatorIcon,
+  UserCheckIcon,
+} from '../components/icons-v2-generated';
+import { Button } from '../components/ui/button';
+import { withFaeBrand } from './fae-brand-decorator';
+
+const at = (minute: number) => new Date(2026, 8, 29, 14, minute);
+
+const THREAD: Message[] = [
+  {
+    id: 'u1',
+    role: 'user',
+    name: 'John Smith',
+    content: 'My laptop has been running really slowly lately',
+    timestamp: at(47),
+  },
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    content: "I'll run a quick diagnostic to identify what's causing the performance issues.",
+    timestamp: at(47),
+  },
+];
+
+const CHATS = [
+  { id: '1', title: 'Slow Laptop', mark: <DotsLoaderIcon className="text-ods-accent" /> },
+  { id: '2', title: 'Forgot my password' },
+  { id: '3', title: 'Teams mic not working', mark: <HourglassClockIcon className="text-ods-accent" /> },
+  { id: '4', title: 'Email not syncing on phone', mark: <MessageIndicatorIcon className="text-ods-accent" /> },
+  { id: '5', title: 'Blue screen on startup', resolved: true },
+];
+
+function Layout({ withChats, withThread }: { withChats: boolean; withThread: boolean }) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  return (
+    <div data-surface="brand-tinted" className="flex h-[800px] w-[1024px] border-t border-ods-border bg-ods-bg">
+      {sidebarOpen && (
+        <ChatNavSidebar
+          logo={
+            <span className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary">
+              <OpenFrameLogo
+                className="size-6"
+                lowerPathColor="var(--ods-open-yellow-base)"
+                upperPathColor="var(--color-text-primary)"
+              />
+              <span className="text-wordmark">OpenFrame</span>
+            </span>
+          }
+          items={[
+            { id: 'new', label: 'Start New Chat', icon: <ChatPlusIcon />, active: !withThread },
+            { id: 'archive', label: 'Chat Archive', icon: <ClockHistoryIcon /> },
+            { id: 'guide', label: 'What to ask Fae?', icon: <ChatQuestionIcon /> },
+          ]}
+          sectionLabel="Your Current Chats"
+          footer={<MspOrganizationCard variant="footer" name="TechFlow Solutions" onOpenWebsite={() => undefined} />}
+        >
+          {withChats ? (
+            CHATS.map((chat, i) => (
+              <ChatListItem
+                key={chat.id}
+                title={chat.title}
+                subtitle="Ticket Number: 1932"
+                active={withThread && i === 0}
+                leading={chat.resolved ? <CheckCircleIcon className="text-ods-success" /> : undefined}
+                trailing={chat.mark}
+              />
+            ))
+          ) : (
+            <ChatListEmptyState
+              icon={<ChatsIcon size={24} />}
+              title="No Current Chats"
+              description="Your conversations will show here"
+            />
+          )}
+        </ChatNavSidebar>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <ChatTopNavigation
+          name="Fae"
+          subtitle="Your AI Assistant"
+          sidebarOpen={sidebarOpen}
+          onToggleSidebar={() => setSidebarOpen(open => !open)}
+          onOpenSettings={() => undefined}
+          actions={
+            <Button variant="outline" size="small" leftIcon={<UserCheckIcon />}>
+              Request a Technician
+            </Button>
+          }
+        />
+        <main className="ods-glow-accent-corner flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)] pt-[var(--spacing-system-mf)]">
+          {withThread ? (
+            <ChatMessageList
+              messages={THREAD}
+              assistantType="fae"
+              approvalVariant="client"
+              appearance="v2"
+              fullWidth
+              contentClassName="px-0"
+              autoScroll={false}
+            />
+          ) : (
+            <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-[var(--spacing-system-l)]">
+              <div className="flex flex-col gap-[var(--spacing-system-xsf)] text-center">
+                <h1 className="text-ods-text-primary text-h2">Hi, I&apos;m your IT assistant</h1>
+                <p className="text-ods-text-secondary text-h4">
+                  Having trouble with your computer, email, Wi-Fi, or software? Just describe it.
+                </p>
+              </div>
+            </div>
+          )}
+          <ChatInput fullWidth appearance="v2" placeholder="Enter your request here..." />
+        </main>
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Layout> = {
+  decorators: [withFaeBrand],
+  title: 'Chat/Fae Layout v2',
+  component: Layout,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Layout>;
+
+export const StartEmpty: Story = { args: { withChats: false, withThread: false } };
+export const ChatOpen: Story = { args: { withChats: true, withThread: true } };

package/src/stories/FaeOnboardingV2.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { OnboardingCarousel, type OnboardingCarouselStep } from '../components/chat/onboarding-carousel';
+import { PoweredByFlamingo } from '../components/features/auth/auth-branding';
+import { OpenFrameLogo } from '../components/icons';
+import { ClockCheckIcon, MessagesIcon, UserCheckIcon } from '../components/icons-v2-generated';
+import { SquareAvatar } from '../components/ui/square-avatar';
+import { withFaeBrand } from './fae-brand-decorator';
+
+const STEPS: OnboardingCarouselStep[] = [
+  {
+    id: 'meet',
+    icon: <SquareAvatar variant="round" sizePx={28} fallback="Fae" />,
+    title: 'Meet Your AI IT Assistant',
+    description: 'Fixes what it can right away,\nand hands off the rest to your technicians.',
+  },
+  {
+    id: 'type',
+    icon: <MessagesIcon size={28} />,
+    title: "Type what's going on.",
+    description:
+      "Your assistant troubleshoots first.\nAnything it can't solve goes to your technician with full context.",
+  },
+  {
+    id: 'human',
+    icon: <UserCheckIcon size={28} />,
+    title: 'Need a human?',
+    description: 'Skip the chat and create a ticket.\nIt goes straight to your technicians.',
+  },
+  {
+    id: 'anytime',
+    icon: <ClockCheckIcon size={28} />,
+    title: 'Ask anything, anytime.',
+    description: 'No hold music, no queue.\nJust immediate help.',
+  },
+];
+
+function Screen() {
+  return (
+    <div className="flex h-[800px] w-[1024px] flex-col items-center gap-[calc(2*var(--spacing-system-xlf))] bg-ods-bg px-[calc(2*var(--spacing-system-xlf))] py-[var(--spacing-system-xl)]">
+      <span className="flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary">
+        <OpenFrameLogo
+          className="size-6"
+          lowerPathColor="var(--ods-open-yellow-base)"
+          upperPathColor="var(--color-text-primary)"
+        />
+        <span className="text-wordmark">OpenFrame</span>
+      </span>
+      {/* The side cards run to the window edge, past the screen padding. */}
+      <div className="-mx-[calc(2*var(--spacing-system-xlf))] flex min-h-0 flex-1 self-stretch">
+        <OnboardingCarousel steps={STEPS} onComplete={() => undefined} />
+      </div>
+      <PoweredByFlamingo />
+    </div>
+  );
+}
+
+const meta: Meta<typeof Screen> = {
+  decorators: [withFaeBrand],
+  title: 'Chat/Fae Onboarding v2',
+  component: Screen,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Screen>;
+
+export const Introduction: Story = {};

package/src/stories/FaeThreadV2.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { ChatInput } from '../components/chat/chat-input';
+import { ChatMessageList } from '../components/chat/chat-message-list';
+import type { ChatAppearance } from '../components/chat/types/chat.types';
+import type { Message } from '../components/chat/types/message.types';
+import { withFaeBrand } from './fae-brand-decorator';
+
+const at = (minute: number) => new Date(2026, 8, 29, 14, minute);
+
+// The "Admin joins" frame of the fae chat v2 escalation flow: a user request,
+// an escalation offer the user approved, the hand-off and join receipts, then
+// the technician's reply.
+const ESCALATION_THREAD: Message[] = [
+  {
+    id: 'u1',
+    role: 'user',
+    name: 'John Smith',
+    content: 'My laptop has been running really slowly lately',
+    timestamp: at(47),
+  },
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    content: 'Sorry, I can’t help with this problem',
+    timestamp: at(47),
+  },
+  { id: 'u2', role: 'user', name: 'John Smith', content: 'call the admin', timestamp: at(47) },
+  {
+    id: 'a2',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    timestamp: at(47),
+    content: [
+      {
+        type: 'escalation_offer',
+        status: 'approved',
+        resolvedByName: 'User',
+        data: {
+          offerId: 'offer-1',
+          text: 'Having issues with the AI assistant? This ticket can be handed off to a technician. Fae will no longer respond in this conversation. A technician will review the ticket and reply when available.',
+        },
+      },
+      { type: 'ticket_escalated', data: { ticketId: 't-1', reason: 'MANUAL' } },
+      {
+        type: 'error',
+        title: 'AI response error',
+        details: 'Something went wrong. Please try again.',
+      },
+    ],
+  },
+  {
+    id: 's1',
+    role: 'user',
+    authorType: 'system',
+    name: 'Michael Johnson joined the chat',
+    content: '',
+    timestamp: at(48),
+  },
+  {
+    id: 't1',
+    role: 'assistant',
+    name: 'Michael Johnson',
+    authorType: 'admin',
+    content: 'I’ll do it faster',
+    timestamp: at(48),
+  },
+  { id: 'u3', role: 'user', name: 'John Smith', content: 'Cool!', timestamp: at(48) },
+];
+
+const APPROVAL_THREAD: Message[] = [
+  {
+    id: 'u1',
+    role: 'user',
+    name: 'John Smith',
+    content: 'My laptop has been running really slowly lately',
+    timestamp: at(47),
+  },
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    content:
+      'I found that your C: drive is 89% full. I can clean up temporary files to free some space - may I proceed with clearing C:/temp?',
+    timestamp: at(47),
+  },
+  {
+    id: 'a2',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    timestamp: at(47),
+    content: [
+      {
+        type: 'approval_request',
+        status: 'pending',
+        data: {
+          requestId: 'req-1',
+          command: 'Remove-Item C:\\Temp\\* -Recurse',
+          explanation: 'Clears temporary files in C:\\Temp to free disk space.',
+        },
+        onApprove: () => undefined,
+        onReject: () => undefined,
+      },
+    ],
+  },
+];
+
+function Thread({
+  messages,
+  appearance,
+  handedOff,
+}: {
+  messages: Message[];
+  appearance: ChatAppearance;
+  handedOff?: boolean;
+}) {
+  return (
+    <div className="flex h-[720px] w-[728px] flex-col bg-ods-bg">
+      <ChatMessageList
+        messages={messages}
+        assistantType="fae"
+        approvalVariant="client"
+        appearance={appearance}
+        fullWidth
+        autoScroll={false}
+      />
+      <div className="px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
+        <ChatInput
+          fullWidth
+          placeholder="Enter your request here..."
+          awaitingResponse={handedOff}
+          appearance={appearance}
+          awaitingTeam={[
+            { key: '1', name: 'Roman Smith' },
+            { key: '2', name: 'Ada Lin' },
+            { key: '3', name: 'Michael Johnson' },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof Thread> = {
+  decorators: [withFaeBrand],
+  title: 'Chat/Fae Thread v2',
+  component: Thread,
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Thread>;
+
+export const EscalationV2: Story = { args: { messages: ESCALATION_THREAD, appearance: 'v2', handedOff: true } };
+export const EscalationClassic: Story = {
+  args: { messages: ESCALATION_THREAD, appearance: 'classic', handedOff: true },
+};
+
+const approvalCard = (id: string, status: 'approved' | 'rejected' | 'cancelled', resolvedByName: string) => ({
+  type: 'approval_request' as const,
+  status,
+  resolvedByName,
+  data: {
+    requestId: id,
+    command: 'Remove-Item C:\\Temp\\* -Recurse',
+    explanation: 'Clears temporary files in C:\\Temp.',
+  },
+});
+
+const APPROVAL_STATES_THREAD: Message[] = [
+  {
+    id: 'a1',
+    role: 'assistant',
+    name: 'Fae',
+    assistantType: 'fae',
+    timestamp: at(47),
+    content: [
+      approvalCard('r1', 'approved', 'Michael Johnson'),
+      approvalCard('r2', 'rejected', 'Michael Johnson'),
+      approvalCard('r3', 'cancelled', 'Michael Johnson'),
+    ],
+  },
+];
+
+export const ApprovalV2: Story = { args: { messages: APPROVAL_THREAD, appearance: 'v2' } };
+
+export const ApprovalStatesV2: Story = { args: { messages: APPROVAL_STATES_THREAD, appearance: 'v2' } };

package/src/stories/fae-brand-decorator.tsx

@@ -0,0 +1,28 @@
+import type { Decorator } from '@storybook/nextjs-vite';
+import { useLayoutEffect, type ReactNode } from 'react';
+
+/**
+ * Renders a story in the Fae client's default brand. The chat app sets
+ * `data-app-type="flamingo"` on <html> before first paint, which points the
+ * accent tokens at flamingo pink; without it Storybook falls back to the
+ * OpenFrame yellow and a Fae screen shows two brand colours at once. Restores
+ * the previous value so the next story is unaffected.
+ */
+function FaeBrand({ children }: { children: ReactNode }) {
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    const previous = root.getAttribute('data-app-type');
+    root.setAttribute('data-app-type', 'flamingo');
+    return () => {
+      if (previous === null) root.removeAttribute('data-app-type');
+      else root.setAttribute('data-app-type', previous);
+    };
+  }, []);
+  return <>{children}</>;
+}
+
+export const withFaeBrand: Decorator = Story => (
+  <FaeBrand>
+    <Story />
+  </FaeBrand>
+);

package/src/styles/ods-colors.css

@@ -407,6 +407,16 @@
   --color-focus-ring: #00ff00;
 }
 
+/* ===================================================================== */
+/* BRAND-TINTED SURFACE — the page background takes 2% of the accent.    */
+/* Figma's fae-background (#1a1719) and mingo-background (#171b1a) are   */
+/* exactly 2% of their brand over the base background. Resolved on the   */
+/* element, so it follows the theme and a runtime (tenant) accent.       */
+/* ===================================================================== */
+[data-surface='brand-tinted'] {
+  --color-bg: color-mix(in srgb, var(--color-accent-primary) 2%, var(--ods-system-greys-background));
+}
+
 /* ===================================================================== */
 /* PLATFORM OVERRIDES — brand/accent ONLY.                               */
 /* Reference `--ods-*` so they follow the active theme; never touch      */

package/src/styles/ods-effects.css

@@ -51,3 +51,16 @@
 .ods-shadow-glyph {
   filter: var(--ods-shadow-glyph);
 }
+
+/* The brand glow in the bottom-right corner of a chat surface (Fae chat v2):
+   the accent at 4% fading out over the whole surface (radial fill centred on
+   the corner, radii 100% × 103% as in the design). Written
+   on the class, not as a :root variable, so the accent resolves on the element
+   and follows a platform or runtime (tenant) accent set below the root. */
+.ods-glow-accent-corner {
+  background-image: radial-gradient(
+    100% 103% at 100% 100%,
+    color-mix(in srgb, var(--color-accent-primary) 4%, transparent) 0%,
+    color-mix(in srgb, var(--color-accent-primary) 0%, transparent) 100%
+  );
+}