@flamingo-stack/openframe-frontend-core 0.0.685-snapshot.20260929164409 → 0.0.685

package/dist/components/chat/chat-appearance-context.d.ts

@@ -1,9 +0,0 @@
-import { type ChatAppearance } from './types/chat.types';
-/**
- * Thread-wide `ChatAppearance`. `ChatMessageList` provides it, so the blocks a
- * message renders (error, lifecycle receipts) follow the thread without every
- * segment component growing an `appearance` prop.
- */
-export declare const ChatAppearanceContext: import("react").Context<ChatAppearance>;
-export declare function useChatAppearance(): ChatAppearance;
-//# sourceMappingURL=chat-appearance-context.d.ts.map

package/dist/components/chat/chat-appearance-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-appearance-context.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-appearance-context.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1E;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,yCAAyD,CAAC;AAE5F,wBAAgB,iBAAiB,IAAI,cAAc,CAElD"}

package/dist/components/chat/chat-nav-sidebar.d.ts

@@ -1,50 +0,0 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
-export interface ChatNavSidebarItem {
-    id: string;
-    label: string;
-    /** 24px glyph before the label. */
-    icon: ReactNode;
-    /** The view this item opens is the one on screen. */
-    active?: boolean;
-    onClick?: () => void;
-}
-export interface ChatNavSidebarProps extends HTMLAttributes<HTMLElement> {
-    /** Brand row at the top. */
-    logo?: ReactNode;
-    /** Primary actions under the logo (new chat, archive, help, ...). */
-    items: ChatNavSidebarItem[];
-    /** Caption over the list (e.g. "Your Current Chats"). */
-    sectionLabel?: string;
-    /** The list itself, typically `ChatListItem` rows or an empty state. Scrolls
-     *  on its own; everything above it stays put. */
-    children?: ReactNode;
-    /** Pinned under the list, full width, above a divider (e.g. the MSP card). */
-    footer?: ReactNode;
-}
-/**
- * Left rail of the fae chat v2 layout (Figma `chat-sidebar`): brand, a stack of
- * navigation actions, a captioned scrolling list and a pinned footer. It only
- * lays things out; which rows exist, what they show and what selecting them
- * does belong to the host.
- */
-declare const ChatNavSidebar: import("react").ForwardRefExoticComponent<ChatNavSidebarProps & import("react").RefAttributes<HTMLElement>>;
-export interface ChatListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
-    title: ReactNode;
-    /** Second line (e.g. the ticket number). */
-    subtitle?: ReactNode;
-    /** 16px mark before the title (e.g. a resolved check). */
-    leading?: ReactNode;
-    /** 24px status glyph at the row's end. */
-    trailing?: ReactNode;
-    /** The chat open on screen. */
-    active?: boolean;
-}
-/**
- * One row of the `ChatNavSidebar` list (Figma `chat-list-item`): a one-line
- * title over a caption, an optional mark before the title and a status glyph
- * at the end. The selected row takes the accent's secondary fill, so a tenant
- * accent recolours it with the rest of the brand.
- */
-declare const ChatListItem: import("react").ForwardRefExoticComponent<ChatListItemProps & import("react").RefAttributes<HTMLButtonElement>>;
-export { ChatNavSidebar, ChatListItem };
-//# sourceMappingURL=chat-nav-sidebar.d.ts.map

package/dist/components/chat/chat-nav-sidebar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-nav-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-nav-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInG,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtE,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;qDACiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;;GAKG;AACH,QAAA,MAAM,cAAc,6GA6CnB,CAAC;AA6BF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC/F,KAAK,EAAE,SAAS,CAAC;IACjB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,QAAA,MAAM,YAAY,iHA8BjB,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/chat/chat-top-navigation.d.ts

@@ -1,29 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-export interface ChatTopNavigationProps extends HTMLAttributes<HTMLElement> {
-    /** Who the user is talking to. */
-    name: string;
-    /** Line under the name (e.g. "Your AI Assistant", "IT Technician"). */
-    subtitle?: string;
-    avatarUrl?: string | null;
-    /** Actions after the identity (e.g. "Request a Technician"). */
-    actions?: ReactNode;
-    /** Shows the sidebar toggle at the start of the bar. */
-    onToggleSidebar?: () => void;
-    /** Whether the sidebar is currently shown; drives the toggle's state. */
-    sidebarOpen?: boolean;
-    /** Shows the settings button at the end of the bar. */
-    onOpenSettings?: () => void;
-    /** Content above the bar, full width (e.g. a "Back to ..." strip). */
-    before?: ReactNode;
-    /** Identity still resolving: placeholders instead of a default name that
-     *  would flash before the tenant's branding lands. */
-    isLoading?: boolean;
-}
-/**
- * Top bar of the fae chat v2 layout (Figma `chat-top-navigation`): an optional
- * sidebar toggle, the counterpart's avatar, name and role, the host's actions
- * and an optional settings button, split by vertical dividers.
- */
-declare const ChatTopNavigation: import("react").ForwardRefExoticComponent<ChatTopNavigationProps & import("react").RefAttributes<HTMLElement>>;
-export { ChatTopNavigation };
-//# sourceMappingURL=chat-top-navigation.d.ts.map

package/dist/components/chat/chat-top-navigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chat-top-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/chat/chat-top-navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxE,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACzE,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;0DACsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAQD;;;;GAIG;AACH,QAAA,MAAM,iBAAiB,gHAgEtB,CAAC;AAIF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/chat/onboarding-carousel.d.ts

@@ -1,29 +0,0 @@
-import { type ReactNode } from 'react';
-export interface OnboardingCarouselStep {
-    id: string;
-    /** Glyph in the 64px tile above the title. Pass it sized to 28px. */
-    icon: ReactNode;
-    title: ReactNode;
-    description?: ReactNode;
-}
-export interface OnboardingCarouselProps {
-    steps: OnboardingCarouselStep[];
-    /** The last step's primary action. */
-    onComplete: () => void;
-    /** Label of the last step's primary action. */
-    completeLabel?: string;
-    previousLabel?: string;
-    nextLabel?: string;
-    /** Accessible name of the carousel region. */
-    label?: string;
-    className?: string;
-}
-/**
- * Step-by-step introduction: one card at a time in the middle, its neighbours
- * peeking in from the sides under an edge fade, dots below, Previous / Next
- * underneath. The last step swaps Next for `completeLabel`. There is no skip:
- * the design walks every step. Fills the height its parent gives it: the cards
- * stretch, the dots and buttons keep their size.
- */
-export declare function OnboardingCarousel({ steps, onComplete, completeLabel, previousLabel, nextLabel, label, className, }: OnboardingCarouselProps): import("react").JSX.Element;
-//# sourceMappingURL=onboarding-carousel.d.ts.map

package/dist/components/chat/onboarding-carousel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"onboarding-carousel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/onboarding-carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0C,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAIzF,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,sCAAsC;IACtC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,UAAU,EACV,aAA4B,EAC5B,aAA+B,EAC/B,SAAuB,EACvB,KAAsB,EACtB,SAAS,GACV,EAAE,uBAAuB,+BAuHzB"}

package/dist/components/chat/system-event-message.d.ts

@@ -1,14 +0,0 @@
-import { type HTMLAttributes } from 'react';
-export interface SystemEventMessageProps extends HTMLAttributes<HTMLDivElement> {
-    /** The system line as the backend sent it. */
-    text: string;
-    timestamp?: Date;
-}
-/**
- * A system line in the fae chat v2 thread (`ai-assistant-info`,
- * type=direct-chat): a technician joining becomes "Technician Joined" with
- * their initials; any other line keeps its own wording under an info icon.
- */
-declare const SystemEventMessage: import("react").ForwardRefExoticComponent<SystemEventMessageProps & import("react").RefAttributes<HTMLDivElement>>;
-export { SystemEventMessage };
-//# sourceMappingURL=system-event-message.d.ts.map

package/dist/components/chat/system-event-message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"system-event-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat/system-event-message.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAWxD,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAED;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,oHAyBtB,CAAC;AAIH,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/src/components/chat/__tests__/chat-appearance.test.tsx

@@ -1,79 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { AiAssistantInfo } from '../ai-assistant-info';
-import { ChatAppearanceContext } from '../chat-appearance-context';
-import { ChatInput } from '../chat-input';
-import { ChatMessageEnhanced } from '../chat-message-enhanced';
-import { ErrorMessageDisplay } from '../error-message-display';
-
-describe('chat appearance', () => {
-  it('classic keeps the colon after the author name', () => {
-    render(<ChatMessageEnhanced role="assistant" assistantType="fae" name="Fae" content="Hi" />);
-    expect(screen.getByText('Fae:')).toBeTruthy();
-  });
-
-  it('v2 drops the colon after the author name', () => {
-    render(<ChatMessageEnhanced role="assistant" assistantType="fae" name="Fae" content="Hi" appearance="v2" />);
-    expect(screen.getByText('Fae')).toBeTruthy();
-    expect(screen.queryByText('Fae:')).toBeNull();
-  });
-
-  it('a row inherits v2 from the thread context', () => {
-    render(
-      <ChatAppearanceContext.Provider value="v2">
-        <ChatMessageEnhanced role="user" name="John Smith" content="Hi" />
-      </ChatAppearanceContext.Provider>,
-    );
-    expect(screen.getByText('John Smith')).toBeTruthy();
-  });
-
-  it('v2 blocks sit on the page surface', () => {
-    render(
-      <ChatAppearanceContext.Provider value="v2">
-        <ErrorMessageDisplay data-testid="error" title="AI response error" details="Something went wrong." />
-        <AiAssistantInfo data-testid="info" title="Handed Off to a Technician" />
-      </ChatAppearanceContext.Provider>,
-    );
-    const error = screen.getByTestId('error');
-    const info = screen.getByTestId('info');
-    expect(error.className).toContain('bg-ods-bg');
-    expect(error.className).not.toContain('mb-');
-    expect(info.className).toContain('bg-ods-bg');
-    expect(info.className).toContain('items-center');
-  });
-
-  it('v2 turns a technician joining into a receipt card', () => {
-    render(
-      <ChatMessageEnhanced
-        role="user"
-        authorType="system"
-        name="Roman Smith joined the chat"
-        content=""
-        appearance="v2"
-      />,
-    );
-    expect(screen.getByText('Technician Joined')).toBeTruthy();
-    expect(screen.getByText("You're now chatting with Roman Smith.")).toBeTruthy();
-  });
-
-  it('classic keeps the system line as an author row', () => {
-    render(<ChatMessageEnhanced role="user" authorType="system" name="Roman Smith joined the chat" content="" />);
-    expect(screen.getByText('Roman Smith joined the chat')).toBeTruthy();
-    expect(screen.queryByText('Technician Joined')).toBeNull();
-  });
-
-  it('hand-off bar names the team and shows their faces', () => {
-    render(
-      <ChatInput
-        awaitingResponse
-        appearance="v2"
-        awaitingTeam={[
-          { key: '1', name: 'Roman Smith' },
-          { key: '2', name: 'Ada Lin' },
-        ]}
-      />,
-    );
-    expect(screen.getByText('Handed off to your technical support team')).toBeTruthy();
-    expect(screen.getByRole('group', { name: 'Technicians: Roman Smith, Ada Lin' })).toBeTruthy();
-  });
-});

package/src/components/chat/__tests__/onboarding-carousel.test.tsx

@@ -1,56 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import { OnboardingCarousel } from '../onboarding-carousel';
-
-const STEPS = [
-  { id: 'a', icon: null, title: 'First' },
-  { id: 'b', icon: null, title: 'Second' },
-  { id: 'c', icon: null, title: 'Third' },
-];
-
-const currentSlide = () =>
-  screen.getAllByRole('group', { hidden: true }).find(el => el.getAttribute('aria-hidden') === 'false');
-
-describe('OnboardingCarousel', () => {
-  it('starts on the first step with Previous disabled', () => {
-    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
-    expect(currentSlide()).toHaveTextContent('First');
-    expect(screen.getByRole('button', { name: 'Previous Step' })).toHaveAttribute('aria-disabled', 'true');
-    expect(screen.getByRole('button', { name: 'Next Step' })).toBeEnabled();
-  });
-
-  it('walks forward and back', () => {
-    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Next Step' }));
-    expect(currentSlide()).toHaveTextContent('Second');
-    fireEvent.click(screen.getByRole('button', { name: 'Previous Step' }));
-    expect(currentSlide()).toHaveTextContent('First');
-    expect(screen.getByText('Step 1 of 3: First')).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('swaps Next for the complete action on the last step', () => {
-    const onComplete = vi.fn();
-    render(<OnboardingCarousel steps={STEPS} onComplete={onComplete} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Go to step 3' }));
-    expect(screen.queryByRole('button', { name: 'Next Step' })).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Start Chat' }));
-    expect(onComplete).toHaveBeenCalledTimes(1);
-  });
-
-  it('follows the arrow keys and stops at the ends', () => {
-    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
-    const region = screen.getByRole('region', { name: 'Introduction' });
-    fireEvent.keyDown(region, { key: 'ArrowLeft' });
-    expect(currentSlide()).toHaveTextContent('First');
-    fireEvent.keyDown(region, { key: 'ArrowRight' });
-    fireEvent.keyDown(region, { key: 'ArrowRight' });
-    fireEvent.keyDown(region, { key: 'ArrowRight' });
-    expect(currentSlide()).toHaveTextContent('Third');
-  });
-
-  it('marks the current dot', () => {
-    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
-    expect(screen.getByRole('button', { name: 'Go to step 1' })).toHaveAttribute('aria-current', 'step');
-    expect(screen.getByRole('button', { name: 'Go to step 2' })).not.toHaveAttribute('aria-current');
-  });
-});

package/src/components/chat/chat-appearance-context.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import { createContext, useContext } from 'react';
-import { CHAT_APPEARANCE, type ChatAppearance } from './types/chat.types';
-
-/**
- * Thread-wide `ChatAppearance`. `ChatMessageList` provides it, so the blocks a
- * message renders (error, lifecycle receipts) follow the thread without every
- * segment component growing an `appearance` prop.
- */
-export const ChatAppearanceContext = createContext<ChatAppearance>(CHAT_APPEARANCE.CLASSIC);
-
-export function useChatAppearance(): ChatAppearance {
-  return useContext(ChatAppearanceContext);
-}

package/src/components/chat/chat-nav-sidebar.tsx

@@ -1,163 +0,0 @@
-'use client';
-
-import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
-import { cn } from '../../utils/cn';
-import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
-
-export interface ChatNavSidebarItem {
-  id: string;
-  label: string;
-  /** 24px glyph before the label. */
-  icon: ReactNode;
-  /** The view this item opens is the one on screen. */
-  active?: boolean;
-  onClick?: () => void;
-}
-
-export interface ChatNavSidebarProps extends HTMLAttributes<HTMLElement> {
-  /** Brand row at the top. */
-  logo?: ReactNode;
-  /** Primary actions under the logo (new chat, archive, help, ...). */
-  items: ChatNavSidebarItem[];
-  /** Caption over the list (e.g. "Your Current Chats"). */
-  sectionLabel?: string;
-  /** The list itself, typically `ChatListItem` rows or an empty state. Scrolls
-   *  on its own; everything above it stays put. */
-  children?: ReactNode;
-  /** Pinned under the list, full width, above a divider (e.g. the MSP card). */
-  footer?: ReactNode;
-}
-
-/**
- * Left rail of the fae chat v2 layout (Figma `chat-sidebar`): brand, a stack of
- * navigation actions, a captioned scrolling list and a pinned footer. It only
- * lays things out; which rows exist, what they show and what selecting them
- * does belong to the host.
- */
-const ChatNavSidebar = forwardRef<HTMLElement, ChatNavSidebarProps>(
-  ({ className, logo, items, sectionLabel, children, footer, ...props }, ref) => {
-    const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade<HTMLDivElement>();
-
-    return (
-      <aside
-        ref={ref}
-        className={cn('flex h-full w-[296px] shrink-0 flex-col border-r border-ods-border bg-ods-bg', className)}
-        {...props}
-      >
-        <div className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] px-[var(--spacing-system-xs)] pt-[var(--spacing-system-mf)]">
-          {logo && <div className="flex shrink-0 items-center px-[var(--spacing-system-xs)]">{logo}</div>}
-
-          <nav className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]">
-            {items.map(item => (
-              <ChatNavSidebarButton key={item.id} icon={item.icon} active={item.active} onClick={item.onClick}>
-                {item.label}
-              </ChatNavSidebarButton>
-            ))}
-          </nav>
-
-          <div className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-            {sectionLabel && (
-              <p className="shrink-0 px-[var(--spacing-system-xs)] pt-[var(--spacing-system-xs)] text-ods-text-secondary text-h5">
-                {sectionLabel}
-              </p>
-            )}
-            <div className="relative flex min-h-0 flex-1 flex-col">
-              <div
-                ref={scrollRef}
-                onScroll={updateFade}
-                className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)] overflow-y-auto overscroll-contain pb-[var(--spacing-system-mf)]"
-              >
-                {children}
-              </div>
-              <ScrollFadeOverlay edge="top" visible={fadeTop} />
-              <ScrollFadeOverlay edge="bottom" visible={fadeBottom} />
-            </div>
-          </div>
-        </div>
-
-        {footer && <div className="shrink-0 border-t border-ods-border">{footer}</div>}
-      </aside>
-    );
-  },
-);
-
-ChatNavSidebar.displayName = 'ChatNavSidebar';
-
-interface ChatNavSidebarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  icon: ReactNode;
-  active?: boolean;
-}
-
-function ChatNavSidebarButton({ icon, active, className, children, ...props }: ChatNavSidebarButtonProps) {
-  return (
-    <button
-      type="button"
-      aria-current={active ? 'page' : undefined}
-      className={cn(
-        'flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left text-h4',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-        '[&_svg]:size-6 [&_svg]:shrink-0',
-        active ? 'text-ods-accent' : 'text-ods-text-primary [&_svg]:text-ods-text-secondary',
-        className,
-      )}
-      {...props}
-    >
-      {icon}
-      <span className="min-w-0 flex-1 truncate">{children}</span>
-    </button>
-  );
-}
-
-export interface ChatListItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
-  title: ReactNode;
-  /** Second line (e.g. the ticket number). */
-  subtitle?: ReactNode;
-  /** 16px mark before the title (e.g. a resolved check). */
-  leading?: ReactNode;
-  /** 24px status glyph at the row's end. */
-  trailing?: ReactNode;
-  /** The chat open on screen. */
-  active?: boolean;
-}
-
-/**
- * One row of the `ChatNavSidebar` list (Figma `chat-list-item`): a one-line
- * title over a caption, an optional mark before the title and a status glyph
- * at the end. The selected row takes the accent's secondary fill, so a tenant
- * accent recolours it with the rest of the brand.
- */
-const ChatListItem = forwardRef<HTMLButtonElement, ChatListItemProps>(
-  ({ className, title, subtitle, leading, trailing, active, ...props }, ref) => (
-    <button
-      ref={ref}
-      type="button"
-      aria-current={active ? 'true' : undefined}
-      className={cn(
-        'flex w-full shrink-0 items-center gap-[var(--spacing-system-xs)] rounded-md p-[var(--spacing-system-xs)] text-left',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
-        active && 'bg-ods-accent-secondary',
-        className,
-      )}
-      {...props}
-    >
-      <span className="flex min-w-0 flex-1 flex-col">
-        <span className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
-          {leading && <span className="flex shrink-0 items-center [&_svg]:size-4">{leading}</span>}
-          <span className={cn('min-w-0 flex-1 truncate text-h4', active ? 'text-ods-accent' : 'text-ods-text-primary')}>
-            {title}
-          </span>
-        </span>
-        {subtitle != null && (
-          <span className={cn('truncate text-h6', active ? 'text-ods-text-primary' : 'text-ods-text-secondary')}>
-            {subtitle}
-          </span>
-        )}
-      </span>
-      {trailing && <span className="flex shrink-0 items-center [&_svg]:size-6">{trailing}</span>}
-    </button>
-  ),
-);
-
-ChatListItem.displayName = 'ChatListItem';
-
-export { ChatNavSidebar, ChatListItem };

package/src/components/chat/chat-top-navigation.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
-import { cn } from '../../utils/cn';
-import { Settings01Icon, SidebarIcon } from '../icons-v2-generated';
-import { Skeleton } from '../ui/skeleton';
-import { SquareAvatar } from '../ui/square-avatar';
-
-export interface ChatTopNavigationProps extends HTMLAttributes<HTMLElement> {
-  /** Who the user is talking to. */
-  name: string;
-  /** Line under the name (e.g. "Your AI Assistant", "IT Technician"). */
-  subtitle?: string;
-  avatarUrl?: string | null;
-  /** Actions after the identity (e.g. "Request a Technician"). */
-  actions?: ReactNode;
-  /** Shows the sidebar toggle at the start of the bar. */
-  onToggleSidebar?: () => void;
-  /** Whether the sidebar is currently shown; drives the toggle's state. */
-  sidebarOpen?: boolean;
-  /** Shows the settings button at the end of the bar. */
-  onOpenSettings?: () => void;
-  /** Content above the bar, full width (e.g. a "Back to ..." strip). */
-  before?: ReactNode;
-  /** Identity still resolving: placeholders instead of a default name that
-   *  would flash before the tenant's branding lands. */
-  isLoading?: boolean;
-}
-
-const edgeButtonClass = cn(
-  'flex size-14 shrink-0 items-center justify-center border-ods-border text-ods-text-secondary',
-  'hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
-  '[&_svg]:size-6',
-);
-
-/**
- * Top bar of the fae chat v2 layout (Figma `chat-top-navigation`): an optional
- * sidebar toggle, the counterpart's avatar, name and role, the host's actions
- * and an optional settings button, split by vertical dividers.
- */
-const ChatTopNavigation = forwardRef<HTMLElement, ChatTopNavigationProps>(
-  (
-    {
-      className,
-      name,
-      subtitle,
-      avatarUrl,
-      actions,
-      onToggleSidebar,
-      sidebarOpen,
-      onOpenSettings,
-      before,
-      isLoading,
-      ...props
-    },
-    ref,
-  ) => (
-    <header ref={ref} className={cn('flex shrink-0 flex-col bg-ods-bg', className)} {...props}>
-      {before}
-      <div className="flex h-14 items-stretch border-b border-ods-border">
-        {onToggleSidebar && (
-          <button
-            type="button"
-            onClick={onToggleSidebar}
-            aria-label={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
-            aria-expanded={sidebarOpen}
-            className={cn(edgeButtonClass, 'border-r')}
-          >
-            <SidebarIcon />
-          </button>
-        )}
-        <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)]">
-          {isLoading ? (
-            <>
-              <Skeleton className="size-10 shrink-0 rounded-full" />
-              <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-                <Skeleton className="h-5 w-24" />
-                <Skeleton className="h-4 w-32" />
-              </div>
-            </>
-          ) : (
-            <>
-              <SquareAvatar src={avatarUrl ?? undefined} alt={name} fallback={name} size="md" variant="round" />
-              <div className="flex min-w-0 flex-1 flex-col">
-                <p className="truncate text-ods-text-primary text-h3">{name}</p>
-                {subtitle && <p className="truncate text-ods-text-secondary text-h6">{subtitle}</p>}
-              </div>
-            </>
-          )}
-          {actions && <div className="flex shrink-0 items-center gap-[var(--spacing-system-xs)]">{actions}</div>}
-        </div>
-        {onOpenSettings && (
-          <button
-            type="button"
-            onClick={onOpenSettings}
-            aria-label="Settings"
-            className={cn(edgeButtonClass, 'border-l')}
-          >
-            <Settings01Icon />
-          </button>
-        )}
-      </div>
-    </header>
-  ),
-);
-
-ChatTopNavigation.displayName = 'ChatTopNavigation';
-
-export { ChatTopNavigation };