@flamingo-stack/openframe-frontend-core 0.0.702 → 0.0.703-snapshot.20261006080901

package/src/components/chat/index.ts

@@ -37,6 +37,9 @@ export * from './msp-organization-card';
 export * from './msp-organization-card-skeleton';
 export * from './guide-mode-banner';
 export * from './mingo-chat-history';
+export * from './mingo-archive-list';
+export * from './mingo-chat-header';
+export * from './mingo-chat-rail';
 export * from './mingo-history-rail';
 export * from './mingo-chat-modals';
 export * from './chat-header-icon-button';
@@ -95,5 +98,6 @@ export {
   EmbeddableChat,
   type EmbeddableChatHandle,
   type EmbeddableChatProps,
+  MINGO_V2_RAIL_WIDTH,
 } from './embeddable-chat';
 export * from './proxy-credentials-panel';

package/src/components/chat/mingo-archive-list.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { formatRelativeTime } from '../../utils/date-utils';
+import { BoxArchiveIcon } from '../icons-v2-generated';
+import { SquareAvatar } from '../ui/square-avatar';
+import { ChatListEmptyState } from './chat-list-empty-state';
+import { ChatListItem } from './chat-nav-sidebar';
+import type { DialogItem } from './types/component.types';
+
+export interface MingoArchiveListProps {
+  dialogs: ReadonlyArray<DialogItem>;
+  onSelectDialog?: (id: string) => void;
+  /** The first page is loading. */
+  isLoading?: boolean;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  onLoadMore?: () => void;
+}
+
+/**
+ * The Mingo v2 chat archive (Figma "chat archive"): it opens in the chat
+ * column with the chat list kept beside it, one row per archived chat with
+ * how long ago it was active and its owner.
+ */
+export function MingoArchiveList({
+  dialogs,
+  onSelectDialog,
+  isLoading = false,
+  hasMore = false,
+  isLoadingMore = false,
+  onLoadMore,
+}: MingoArchiveListProps) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const onLoadMoreRef = useRef(onLoadMore);
+  const isLoadingMoreRef = useRef(isLoadingMore);
+  useEffect(() => {
+    onLoadMoreRef.current = onLoadMore;
+    isLoadingMoreRef.current = isLoadingMore;
+  });
+  const dialogCount = dialogs.length;
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !hasMore || typeof IntersectionObserver === 'undefined') return undefined;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && !isLoadingMoreRef.current) onLoadMoreRef.current?.();
+      },
+      { rootMargin: '120px', threshold: 0.1 },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, dialogCount, isLoadingMore]);
+
+  return (
+    <section
+      aria-label="Archived chats"
+      className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)] px-[var(--spacing-system-xs)] pt-[var(--spacing-system-mf)]"
+    >
+      <p className="shrink-0 px-[var(--spacing-system-xs)] pt-[var(--spacing-system-xs)] text-ods-text-secondary text-h5">
+        Archived Chats
+      </p>
+      <div className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xxs)] overflow-y-auto overscroll-contain pb-[var(--spacing-system-mf)]">
+        {dialogs.length > 0 ? (
+          <>
+            {dialogs.map(dialog => (
+              <ChatListItem
+                key={dialog.id}
+                title={dialog.title || 'Untitled Chat'}
+                onClick={() => onSelectDialog?.(dialog.id)}
+                trailing={
+                  <span className="flex items-center gap-[var(--spacing-system-xs)]">
+                    {dialog.timestamp && (
+                      <span className="whitespace-nowrap text-ods-text-secondary text-h6">
+                        {formatRelativeTime(dialog.timestamp)}
+                      </span>
+                    )}
+                    {dialog.owner && (dialog.owner.name || dialog.owner.avatarUrl) ? (
+                      <SquareAvatar
+                        variant="round"
+                        sizePx={24}
+                        src={dialog.owner.avatarUrl || undefined}
+                        alt={dialog.owner.name || undefined}
+                        fallback={dialog.owner.name || undefined}
+                        title={dialog.owner.name || undefined}
+                      />
+                    ) : null}
+                  </span>
+                }
+              />
+            ))}
+            {hasMore && <div ref={sentinelRef} className="h-px shrink-0" aria-hidden />}
+          </>
+        ) : isLoading ? (
+          Array.from({ length: 6 }, (_, i) => (
+            <div key={i} className="h-10 shrink-0 animate-pulse rounded-md bg-ods-skeleton" aria-hidden />
+          ))
+        ) : (
+          <ChatListEmptyState
+            icon={<BoxArchiveIcon size={24} />}
+            title="No Archived Chats"
+            description="Archived Mingo sessions will show here"
+          />
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/chat/mingo-chat-header.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { Arrow02RightIcon, Ellipsis01Icon, Refresh01LeftIcon, SidebarIcon, XmarkIcon } from '../icons-v2-generated';
+import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
+import { SquareAvatar } from '../ui/square-avatar';
+import { ChatHeaderIconButton } from './chat-header-icon-button';
+
+export interface MingoChatHeaderProps {
+  title: string;
+  /** Second line: the chat's owner. */
+  subtitle?: string | null;
+  /** The owner's avatar at the title cell's end. */
+  avatar?: { name?: string | null; avatarUrl?: string | null } | null;
+  /** Shows the chat list toggle at the start. */
+  onToggleList?: () => void;
+  /** The list is on screen beside the chat; drives the toggle's state. */
+  listOpen?: boolean;
+  /** The chat's ⋯ menu. Empty or omitted leaves it out. */
+  menuItems?: ActionsMenuItem[];
+  /** An archived chat: offers "Unarchive". */
+  onRestore?: () => void;
+  /** Collapse the chat back to the list alone (the panel's minimum). */
+  onCollapse?: () => void;
+  /** Close the panel; only a panel that can close passes it. */
+  onClose?: () => void;
+}
+
+/**
+ * Top bar of the Mingo v2 chat (Figma `chat-top-navigation`): the chat list
+ * toggle, the title over its owner with the owner's avatar, then the chat's ⋯
+ * menu and the collapse arrow, split by vertical dividers. It sits over the
+ * chat column only; the list beside it has no bar.
+ */
+export function MingoChatHeader({
+  title,
+  subtitle,
+  avatar,
+  onToggleList,
+  listOpen = false,
+  menuItems = [],
+  onRestore,
+  onCollapse,
+  onClose,
+}: MingoChatHeaderProps) {
+  return (
+    <div className="flex h-14 w-full shrink-0 overflow-hidden border-b border-ods-border">
+      {onToggleList && (
+        <ChatHeaderIconButton
+          divider="right"
+          onClick={onToggleList}
+          aria-label={listOpen ? 'Hide chat list' : 'Show chat list'}
+          aria-pressed={listOpen}
+        >
+          <SidebarIcon size={24} />
+        </ChatHeaderIconButton>
+      )}
+
+      <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)]">
+        <div className="flex min-w-0 flex-1 flex-col">
+          <p className="truncate text-ods-text-primary text-h3">{title}</p>
+          {subtitle && <p className="truncate text-ods-text-secondary text-h6">{subtitle}</p>}
+        </div>
+        {avatar && (avatar.name || avatar.avatarUrl) ? (
+          <SquareAvatar
+            variant="round"
+            sizePx={32}
+            src={avatar.avatarUrl || undefined}
+            alt={avatar.name || undefined}
+            fallback={avatar.name || undefined}
+            title={avatar.name || undefined}
+          />
+        ) : null}
+      </div>
+
+      {onRestore && (
+        <ChatHeaderIconButton onClick={onRestore} aria-label="Unarchive chat">
+          <Refresh01LeftIcon size={24} />
+        </ChatHeaderIconButton>
+      )}
+      {menuItems.length > 0 && (
+        <ActionsMenuDropdown
+          triggerAriaLabel="Chat actions"
+          onCloseAutoFocus={e => e.preventDefault()}
+          groups={[{ items: menuItems }]}
+          customTrigger={
+            <ChatHeaderIconButton aria-label="Chat actions">
+              <Ellipsis01Icon size={24} />
+            </ChatHeaderIconButton>
+          }
+        />
+      )}
+      {onCollapse && (
+        <ChatHeaderIconButton onClick={onCollapse} aria-label="Collapse chat">
+          <Arrow02RightIcon size={24} />
+        </ChatHeaderIconButton>
+      )}
+      {onClose && (
+        <ChatHeaderIconButton onClick={onClose} aria-label="Close">
+          <XmarkIcon size={24} />
+        </ChatHeaderIconButton>
+      )}
+    </div>
+  );
+}

package/src/components/chat/mingo-chat-rail.tsx

@@ -0,0 +1,361 @@
+'use client';
+
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { cn } from '../../utils/cn';
+import {
+  AlertCircleIcon,
+  ChatPlusIcon,
+  ChatQuestionIcon,
+  ChatsIcon,
+  ClockHistoryIcon,
+  DotsLoaderIcon,
+  Ellipsis01Icon,
+  MessageIndicatorIcon,
+  Refresh01RightIcon,
+  SearchIcon,
+  ShieldCheckIcon,
+  UserIcon,
+  UsersIcon,
+} from '../icons-v2-generated';
+import { MingoIcon } from '../icons/mingo-icon';
+import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
+import { Button } from '../ui/button';
+import { chatDialogMenuItems } from './chat-dialog-menu-items';
+import { ChatHeaderSearchField } from './chat-header-search-field';
+import { ChatListEmptyState } from './chat-list-empty-state';
+import { ChatListItem, ChatNavSidebar, type ChatNavSidebarItem } from './chat-nav-sidebar';
+import type { MingoHistoryScope } from './mingo-history-rail';
+import type { DialogItem } from './types/component.types';
+
+/**
+ * What a chat is doing, shown at the end of its row:
+ * - `working`: Mingo is answering in it
+ * - `unread`: a reply the user has not seen
+ * - `approval`: Mingo waits for an approval there
+ */
+export type MingoDialogStatus = 'working' | 'unread' | 'approval';
+
+export interface MingoChatRailProps {
+  /** Dialogs to list, newest first. */
+  dialogs: ReadonlyArray<DialogItem>;
+  activeDialogId?: string;
+  onSelectDialog?: (id: string) => void;
+  /** A chat being started and not saved yet: a selected row at the top
+   *  (e.g. "New Chat"), so the list says what the chat beside it is. */
+  draftTitle?: string;
+  onNewChat?: () => void;
+  /** Open the archive. `archiveActive` marks it as the view on screen. */
+  onOpenArchive?: () => void;
+  archiveActive?: boolean;
+  /** "What to ask Mingo?": the suggestions a new chat starts from. */
+  onWhatToAsk?: () => void;
+  /** A row's status glyph. Unread replies are shown without it. */
+  statusOf?: (dialog: DialogItem) => MingoDialogStatus | undefined;
+  onRequestRename?: (dialog: DialogItem) => void;
+  onRequestArchive?: (dialog: DialogItem) => void;
+  onRequestCopyLink?: (dialog: DialogItem) => void;
+  onRequestCompact?: (dialog: DialogItem) => void;
+  /** "Show My Chats" / "Show All Chats" in the list's ⋯ menu; both or neither. */
+  scope?: MingoHistoryScope;
+  onScopeChange?: (scope: MingoHistoryScope) => void;
+  /** Server-side search. With a handler the ⋯ menu offers "Search for Chat". */
+  searchQuery?: string;
+  onSearchChange?: (query: string) => void;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  onLoadMore?: () => void;
+  /** The first page is still loading. */
+  isLoadingHistory?: boolean;
+  /** The list failed to load with nothing cached. */
+  loadError?: boolean;
+  onRetry?: () => void;
+  className?: string;
+}
+
+const STATUS_GLYPHS: Record<MingoDialogStatus, { icon: ReactNode; label: string }> = {
+  working: { icon: <DotsLoaderIcon className="text-ods-text-secondary" />, label: 'Mingo is working' },
+  unread: { icon: <MessageIndicatorIcon className="text-ods-accent" />, label: 'New reply' },
+  approval: { icon: <ShieldCheckIcon className="text-ods-accent" />, label: 'Waiting for approval' },
+};
+
+function statusFor(dialog: DialogItem, statusOf: MingoChatRailProps['statusOf']): MingoDialogStatus | undefined {
+  return statusOf?.(dialog) ?? ((dialog.unreadMessagesCount ?? 0) > 0 ? 'unread' : undefined);
+}
+
+/**
+ * The Mingo chat list of the v2 layout (Figma `chat-sidebar`, type
+ * mingo-my-chats): the Mingo mark, the three actions, a "Your Current Chats"
+ * list with a ⋯ menu that scopes or searches it, and one row per chat with its
+ * status at the end. Row actions (rename, archive, ...) sit behind a ⋯ that
+ * replaces the status on hover.
+ */
+export function MingoChatRail({
+  dialogs,
+  activeDialogId,
+  onSelectDialog,
+  draftTitle,
+  onNewChat,
+  onOpenArchive,
+  archiveActive = false,
+  onWhatToAsk,
+  statusOf,
+  onRequestRename,
+  onRequestArchive,
+  onRequestCopyLink,
+  onRequestCompact,
+  scope,
+  onScopeChange,
+  searchQuery,
+  onSearchChange,
+  hasMore = false,
+  isLoadingMore = false,
+  onLoadMore,
+  isLoadingHistory = false,
+  loadError = false,
+  onRetry,
+  className,
+}: MingoChatRailProps) {
+  const [searchOpen, setSearchOpen] = useState(!!searchQuery?.trim());
+  const hasSearch = !!searchQuery?.trim();
+
+  const items: ChatNavSidebarItem[] = [];
+  if (onNewChat) items.push({ id: 'new', label: 'Start New Chat', icon: <ChatPlusIcon />, onClick: onNewChat });
+  if (onOpenArchive) {
+    items.push({
+      id: 'archive',
+      label: 'Chat Archive',
+      icon: <ClockHistoryIcon />,
+      active: archiveActive,
+      onClick: onOpenArchive,
+    });
+  }
+  if (onWhatToAsk)
+    items.push({ id: 'ask', label: 'What to ask Mingo?', icon: <ChatQuestionIcon />, onClick: onWhatToAsk });
+
+  const listMenu: ActionsMenuItem[] = [];
+  if (scope && onScopeChange) {
+    listMenu.push(
+      {
+        id: 'my',
+        label: 'Show My Chats',
+        icon: <UserIcon className="h-full w-full text-ods-text-secondary" />,
+        type: 'checkbox',
+        checked: scope === 'my',
+        onClick: () => onScopeChange('my'),
+      },
+      {
+        id: 'all',
+        label: 'Show All Chats',
+        icon: <UsersIcon className="h-full w-full text-ods-text-secondary" />,
+        type: 'checkbox',
+        checked: scope === 'all',
+        onClick: () => onScopeChange('all'),
+      },
+    );
+  }
+  if (onSearchChange) {
+    if (listMenu.length > 0) listMenu.push({ id: 'divider', label: '', type: 'separator' });
+    listMenu.push({
+      id: 'search',
+      label: 'Search for Chat',
+      icon: <SearchIcon className="h-full w-full text-ods-text-secondary" />,
+      onClick: () => setSearchOpen(true),
+    });
+  }
+
+  // Infinite scroll: the next page when the sentinel at the list's end shows.
+  // The observer clips against the scrolling list, so the viewport root works.
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const onLoadMoreRef = useRef(onLoadMore);
+  const isLoadingMoreRef = useRef(isLoadingMore);
+  useEffect(() => {
+    onLoadMoreRef.current = onLoadMore;
+    isLoadingMoreRef.current = isLoadingMore;
+  });
+  const dialogCount = dialogs.length;
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !hasMore || typeof IntersectionObserver === 'undefined') return undefined;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && !isLoadingMoreRef.current) onLoadMoreRef.current?.();
+      },
+      { rootMargin: '120px', threshold: 0.1 },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+    // Re-armed per page: a sentinel still in view after a short page keeps loading.
+  }, [hasMore, dialogCount, isLoadingMore]);
+
+  let list: ReactNode;
+  if (loadError) {
+    list = (
+      <div className="flex flex-col items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-xs)] py-[var(--spacing-system-l)] text-center">
+        <AlertCircleIcon className="size-8 shrink-0 text-ods-text-secondary" />
+        <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+          <p className="text-ods-text-primary text-h4">Couldn’t load your chats</p>
+          <p className="text-ods-text-secondary text-h6">Something went wrong reaching the server. Try again.</p>
+        </div>
+        {onRetry && (
+          <Button variant="outline" size="small" leftIcon={<Refresh01RightIcon />} onClick={onRetry}>
+            Try again
+          </Button>
+        )}
+      </div>
+    );
+  } else if (isLoadingHistory) {
+    list = Array.from({ length: 6 }, (_, i) => (
+      <div key={i} className="h-10 shrink-0 animate-pulse rounded-md bg-ods-skeleton" aria-hidden />
+    ));
+  } else if (dialogs.length === 0 && !draftTitle) {
+    list = hasSearch ? (
+      <p className="px-[var(--spacing-system-xs)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h6">
+        No chats found
+      </p>
+    ) : (
+      <ChatListEmptyState
+        icon={<ChatsIcon size={24} />}
+        title="No Current Chats"
+        description="Previous Mingo sessions will show here"
+      />
+    );
+  } else {
+    list = (
+      <>
+        {draftTitle && <ChatListItem active title={draftTitle} tabIndex={-1} className="cursor-default" />}
+        {dialogs.map(dialog => (
+          <MingoChatRailRow
+            key={dialog.id}
+            dialog={dialog}
+            active={dialog.id === activeDialogId}
+            status={statusFor(dialog, statusOf)}
+            onSelect={onSelectDialog}
+            menuItems={chatDialogMenuItems({
+              onCopyLink: onRequestCopyLink && (() => onRequestCopyLink(dialog)),
+              onRename: onRequestRename && (() => onRequestRename(dialog)),
+              onCompact: onRequestCompact && (() => onRequestCompact(dialog)),
+              onArchive: onRequestArchive && (() => onRequestArchive(dialog)),
+            })}
+          />
+        ))}
+        {hasMore && <div ref={sentinelRef} className="h-px shrink-0" aria-hidden />}
+      </>
+    );
+  }
+
+  return (
+    <ChatNavSidebar
+      className={className}
+      // Mingo's cyan for the selection and the status glyphs, whatever the
+      // tenant accent the rest of the panel carries.
+      data-accent="mingo"
+      aria-label="Mingo chats"
+      logo={
+        <MingoIcon
+          color="currentColor"
+          eyesColor="var(--ods-flamingo-cyan-base)"
+          cornerColor="var(--ods-flamingo-cyan-base)"
+          className="size-6 text-ods-text-primary"
+          aria-hidden
+        />
+      }
+      items={items}
+      sectionLabel="Your Current Chats"
+      sectionActions={
+        listMenu.length > 0 ? (
+          <ActionsMenuDropdown
+            triggerAriaLabel="Chat list options"
+            groups={[{ items: listMenu }]}
+            onCloseAutoFocus={e => e.preventDefault()}
+            customTrigger={
+              <Button
+                variant="transparent"
+                size="icon"
+                aria-label="Chat list options"
+                className="size-6 p-0 text-ods-text-secondary hover:text-ods-text-primary md:size-6"
+              >
+                <Ellipsis01Icon size={24} />
+              </Button>
+            }
+          />
+        ) : undefined
+      }
+      listHeader={
+        searchOpen && onSearchChange ? (
+          <ChatHeaderSearchField
+            initialValue={searchQuery}
+            onSearchChange={onSearchChange}
+            onCollapse={() => setSearchOpen(false)}
+            className="h-10 rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-xs)]"
+          />
+        ) : undefined
+      }
+    >
+      {list}
+    </ChatNavSidebar>
+  );
+}
+
+interface MingoChatRailRowProps {
+  dialog: DialogItem;
+  active: boolean;
+  status?: MingoDialogStatus;
+  onSelect?: (id: string) => void;
+  menuItems: ActionsMenuItem[];
+}
+
+function MingoChatRailRow({ dialog, active, status, onSelect, menuItems }: MingoChatRailRowProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const hasMenu = menuItems.length > 0;
+  const glyph = status ? STATUS_GLYPHS[status] : undefined;
+  const title = dialog.title || 'Untitled Chat';
+
+  return (
+    <div className="group/row relative shrink-0">
+      <ChatListItem
+        active={active}
+        title={title}
+        onClick={() => onSelect?.(dialog.id)}
+        className={cn(hasMenu && 'pr-10')}
+        trailing={
+          glyph ? (
+            <span
+              role="img"
+              aria-label={glyph.label}
+              className={cn('flex transition-opacity', hasMenu && 'group-hover/row:opacity-0', menuOpen && 'opacity-0')}
+            >
+              {glyph.icon}
+            </span>
+          ) : undefined
+        }
+      />
+      {hasMenu && (
+        // Revealed on hover or its own focus, and kept while its menu is open.
+        <span
+          className={cn(
+            'absolute inset-y-0 right-[var(--spacing-system-xs)] flex items-center transition-opacity',
+            menuOpen ? 'opacity-100' : 'opacity-0 focus-within:opacity-100 group-hover/row:opacity-100',
+          )}
+        >
+          <ActionsMenuDropdown
+            triggerAriaLabel={`Actions for ${title}`}
+            groups={[{ items: menuItems }]}
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            onCloseAutoFocus={e => e.preventDefault()}
+            customTrigger={
+              <Button
+                variant="transparent"
+                size="icon"
+                aria-label={`Actions for ${title}`}
+                className="size-6 p-0 text-ods-text-secondary hover:text-ods-text-primary md:size-6"
+              >
+                <Ellipsis01Icon size={24} />
+              </Button>
+            }
+          />
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/chat/model-display.tsx

@@ -5,7 +5,9 @@ import { cn } from '../../utils/cn';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../hover-card';
 import { AnthropicLogoGreyIcon, GeminiLogoGreyIcon, OpenaiLogoGreyIcon } from '../icons-v2-generated';
 import { Skeleton } from '../ui/skeleton';
+import { useChatAppearance } from './chat-appearance-context';
 import type { ModelDisplayProps, ModelUsageBreakdown } from './types';
+import { CHAT_APPEARANCE } from './types/chat.types';
 
 const getProviderIcon = (provider?: string) => {
   if (!provider) return null;
@@ -66,6 +68,9 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
   ) => {
     const icon = getProviderIcon(provider);
     const name = displayName || modelName;
+    // v2 spells the counts out ("372 / 50,000 tokens used"); classic keeps them short.
+    const isV2 = useChatAppearance() === CHAT_APPEARANCE.V2;
+    const formatCount = (count: number) => (isV2 ? count.toLocaleString('en-US') : formatTokenCount(count));
 
     // Inline pill: provider icon + model name + "X / Y tokens used".
     // The "tokens used" tail renders as soon as `contextWindow` is known
@@ -79,7 +84,9 @@ const ModelDisplay = React.forwardRef<HTMLDivElement, ModelDisplayProps>(
         <span className="font-body">{name}</span>
         {contextWindow != null && (
           <span className="ml-auto opacity-70 text-h6">
-            {usedTokens != null ? formatTokenCount(usedTokens) : '—'}/{formatTokenCount(contextWindow)} tokens used
+            {usedTokens != null ? formatCount(usedTokens) : '—'}
+            {isV2 ? ' / ' : '/'}
+            {formatCount(contextWindow)} tokens used
           </span>
         )}
       </div>

package/src/components/contact/contact-form.tsx

@@ -262,11 +262,11 @@ export function ContactForm({
 
   return (
     <div
-      className={`flex h-full flex-col ${!noBorder ? 'rounded-2xl border border-ods-border md:rounded-3xl' : ''} ${!noPadding ? 'p-6 md:p-8 lg:p-10' : ''}`}
+      className={`flex h-full flex-col ${!noBorder ? 'rounded-2xl border border-ods-border content-md:rounded-3xl' : ''} ${!noPadding ? 'p-6 content-md:p-8 content-lg:p-10' : ''}`}
     >
       {(title || subtitle) && (
-        <div className="mb-6 md:mb-8">
-          {title && <h2 className={`${SECTION_HEADING_CLASS} mb-3 md:mb-4`}>{accentSentenceMarks(title)}</h2>}
+        <div className="mb-6 content-md:mb-8">
+          {title && <h2 className={`${SECTION_HEADING_CLASS} mb-3 content-md:mb-4`}>{accentSentenceMarks(title)}</h2>}
           {subtitle && <p className="text-ods-text-primary text-h4">{subtitle}</p>}
         </div>
       )}
@@ -283,7 +283,7 @@ export function ContactForm({
             Object.fromEntries(Object.entries(validationErrors).map(([k, v]) => [k, v?.message ?? v])),
           );
         })}
-        className="flex flex-grow flex-col space-y-4 md:space-y-6"
+        className="flex flex-grow flex-col space-y-4 content-md:space-y-6"
         {...HUBSPOT_DO_NOT_COLLECT_FORM_PROPS}
       >
         {/* Hidden inputs for fields that are required by `ContactSchema`
@@ -308,7 +308,7 @@ export function ContactForm({
         {extraTopField}
 
         {showNameEmailRow && (
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+          <div className="grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6">
             {showName && (
               <div className="flex flex-col">
                 <Label htmlFor="name">
@@ -359,7 +359,7 @@ export function ContactForm({
         )}
 
         {(showCompanySize || showReferralSource) && (
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
+          <div className="grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6">
             {showCompanySize && (
               <div className="flex flex-col">
                 <Label htmlFor="companySize">Company Size</Label>
@@ -511,14 +511,16 @@ export function ContactForm({
           </div>
         )}
 
-        <div className="mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 md:flex-row md:gap-6">
-          {footerText && <p className="text-center text-ods-text-secondary text-h6 md:text-left">{footerText}</p>}
+        <div className="mt-auto flex w-full flex-col items-center justify-end gap-4 pt-2 content-md:flex-row content-md:gap-6">
+          {footerText && (
+            <p className="text-center text-ods-text-secondary text-h6 content-md:text-left">{footerText}</p>
+          )}
           <Button
             type="submit"
             loading={isSubmitting}
             disabled={isSubmitting || isSuccess || (attachmentsEnabled && attachments.hasInflightUploads)}
             variant={buttonVariant}
-            className={`w-full md:w-auto ${buttonClassName}`}
+            className={`w-full content-md:w-auto ${buttonClassName}`}
           >
             {isSuccess ? submitSuccessLabel : submitLabel}
           </Button>