@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -29,7 +29,10 @@ import { contentFetch } from '../../../utils/embed-content-fetch';
 import { RoadmapCard } from '../../chat/entity-cards/roadmap-card';
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 import { EmptyState } from '../../empty-state';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../../ui';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { RoadmapGridSkeleton, roadmapGridClass } from './roadmap-grid-skeleton';
 import { useRoadmapVoting, type UseRoadmapVotingOptions } from './use-roadmap-voting';
 
 const DEFAULT_BUILD_REFRESH_URL = (taskId: string) => `/api/roadmap/${taskId}`;
@@ -121,6 +124,10 @@ export interface RoadmapGridProps {
   /** Past quarters within this window of the current quarter stay open by
    *  default; older ones collapse. Default `2`. */
   quartersToKeepClosed?: number;
+  /** The items are being read (the host's query runs): the grid draws its own skeleton. A page's loading scope does too. */
+  isLoading?: boolean;
+  /** The cards the flat grid's skeleton draws: one screen of the host's grid (default the skeleton's own). */
+  fold?: number;
 }
 
 /** Internal flat 2-col grid for ONE set of items. Voting comes from the parent
@@ -141,13 +148,7 @@ function RoadmapGridSingle({
   votingTasks: Set<string>;
 }) {
   return (
-    // LITERAL class strings: an interpolated `content-md:grid-cols-${n}` is invisible
-    // to Tailwind's scanner and is never generated.
-    <div
-      className={`grid grid-cols-1 gap-6 ${columns === 2 ? 'content-md:grid-cols-2' : ''} ${
-        showLeftMargin ? 'content-md:ml-[120px]' : ''
-      }`}
-    >
+    <div className={roadmapGridClass(columns, showLeftMargin)}>
       {items.map(item => (
         // DOM id + sticky-header scroll offset live ON RoadmapCard's own
         // outer element (no wrapper div). Anchor mirrors
@@ -167,6 +168,42 @@ function RoadmapGridSingle({
   );
 }
 
+/** The quarter list and a quarter's head, read by the grid and by its skeleton. */
+const QUARTER_LIST_CLASS = 'flex flex-col gap-10';
+const QUARTER_HEAD_CLASS = 'flex items-center gap-3';
+/** The quarter's content padding: the grid's `AccordionContent` takes `pt-4`, and pads its children `pb-4` itself. */
+const QUARTER_CONTENT_CLASS = 'pt-4';
+const QUARTER_CONTENT_INNER_CLASS = 'pb-4';
+
+/**
+ * The quarter-grouped grid while its items are read: one quarter, its heading and item count as bars, then the
+ * grid's card skeletons.
+ */
+export function RoadmapGridQuarterSkeleton({
+  showLeftMargin = true,
+  columns = 2,
+}: {
+  showLeftMargin?: boolean;
+  columns?: 1 | 2;
+}) {
+  return (
+    <div className={QUARTER_LIST_CLASS} aria-hidden>
+      <div className="flex flex-col">
+        <div className={QUARTER_HEAD_CLASS}>
+          <TextLineSkeleton type="h2" className="w-40" />
+          <TextLineSkeleton type="h6" className="w-16" />
+        </div>
+        {/* The quarter's content box: the `AccordionContent` padding (`pt-4` here, the content's own `pb-4` inside). */}
+        <div className={QUARTER_CONTENT_CLASS}>
+          <div className={QUARTER_CONTENT_INNER_CLASS}>
+            <RoadmapGridSkeleton region={false} showLeftMargin={showLeftMargin} columns={columns} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function RoadmapGrid({
   items,
   onItemUpdate,
@@ -177,9 +214,12 @@ export function RoadmapGrid({
   groupByQuarter = false,
   hasActiveFilters = false,
   quartersToKeepClosed = 2,
+  isLoading = false,
+  fold,
 }: RoadmapGridProps) {
   // ── Voting (shared across all quarters) ──
   const { getVote, toggleVote } = useRoadmapVoting(votingOptions);
+  const inScope = useLoadingScope();
   const [votingTasks, setVotingTasks] = useState<Set<string>>(new Set());
 
   const handleVote = async (taskId: string, voteType: 'up' | 'down') => {
@@ -267,6 +307,16 @@ export function RoadmapGrid({
     );
   }, [hasActiveFilters, sortedQuartersKey, isInitialized, quartersToKeepClosed]);
 
+  // While the page is read, or the host's query runs, the items are not known: the grid is its skeleton, never the
+  // empty state. The page's loading region announces a scope's; a host's own read announces itself.
+  if (inScope || isLoading) {
+    return groupByQuarter ? (
+      <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} columns={columns} />
+    ) : (
+      <RoadmapGridSkeleton region={!inScope} count={fold} showLeftMargin={showLeftMargin} columns={columns} />
+    );
+  }
+
   if (items.length === 0) {
     return (
       <EmptyState
@@ -296,7 +346,7 @@ export function RoadmapGrid({
       type="multiple"
       value={expandedQuarters}
       onValueChange={setExpandedQuarters}
-      className="flex flex-col gap-10"
+      className={QUARTER_LIST_CLASS}
     >
       {sortedQuarters.map(quarter => {
         const itemCount = itemsByQuarter[quarter]?.length || 0;
@@ -309,7 +359,7 @@ export function RoadmapGrid({
             className="border-0"
           >
             <AccordionTrigger className="w-full p-0 hover:no-underline [&>svg]:ml-auto [&>svg]:h-5 [&>svg]:w-5 [&>svg]:shrink-0 [&>svg]:text-ods-text-secondary">
-              <div className="flex items-center gap-3">
+              <div className={QUARTER_HEAD_CLASS}>
                 <h3
                   className={cn(
                     'text-ods-text-primary transition-opacity text-h2',

package/src/components/shared/roadmap/roadmap-view.tsx

@@ -22,8 +22,7 @@ import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 import { usePageDataSync } from '../../layout/page-data-sync';
 import { DataSyncLine } from '../../ui/data-attribution';
 import { LoadError } from '../../ui/error-state';
-import { RoadmapGrid } from './roadmap-grid';
-import { RoadmapGridSkeleton } from './roadmap-grid-skeleton';
+import { RoadmapGrid, RoadmapGridQuarterSkeleton } from './roadmap-grid';
 import type { UseRoadmapVotingOptions } from './use-roadmap-voting';
 
 const DEFAULT_ENDPOINT = '/api/roadmap';
@@ -103,7 +102,8 @@ export function RoadmapView({
     return (
       <div className={SYNCED_LIST_CLASS}>
         {!syncInPage && <DataSyncLine loading />}
-        <RoadmapGridSkeleton showLeftMargin={showLeftMargin} />
+        {/* The view groups by quarter, so its skeleton is the quarter-grouped grid's. */}
+        <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} />
       </div>
     );
   }

package/src/components/social-icon-row.tsx

@@ -5,9 +5,6 @@ import { normalizeSocialPlatform, type SocialIconLink } from '../utils/social-pl
 import { iconOf, type IconComponent, type IconRef } from './chat/utils/icon-loading';
 import { Button } from './ui/button';
 
-/** Re-exported for call sites that already import the link type from this module. */
-export type { SocialIconLink };
-
 interface SocialIconRowProps {
   className?: string;
   links?: SocialIconLink[];
@@ -79,6 +76,17 @@ function renderSocialIcon(platform: string) {
   return icon ? createElement(icon, { className: 'h-5 w-5' }) : null;
 }
 
+/** The row's box: what a caller's loading state draws its skeleton buttons in, so they sit where the row's buttons do. */
+export function socialIconRowClass(compact = false): string {
+  return `flex flex-row items-center ${compact ? 'gap-2 w-fit' : 'gap-3 w-full'}`;
+}
+
+/** One button's size and stretch in the row (compact: the quiet 32px icon; else the full-width 44/48px one): read by
+ *  the row and by a caller's skeleton buttons. */
+export function socialIconButtonProps(compact = false): { size: 'icon-sm' | 'icon'; className?: string } {
+  return compact ? { size: 'icon-sm' } : { size: 'icon', className: 'flex-1' };
+}
+
 export function SocialIconRow({
   className = '',
   links = defaultLinks,
@@ -109,8 +117,7 @@ export function SocialIconRow({
         key={index}
         type="button"
         variant={resolvedVariant}
-        size={compact ? 'icon-sm' : 'icon'}
-        className={compact ? undefined : 'flex-1'}
+        {...socialIconButtonProps(compact)}
         aria-label={ariaLabel}
         onClick={link.onClick}
       >
@@ -123,8 +130,7 @@ export function SocialIconRow({
       <Button
         key={index}
         variant={resolvedVariant}
-        size={compact ? 'icon-sm' : 'icon'}
-        className={compact ? undefined : 'flex-1'}
+        {...socialIconButtonProps(compact)}
         href={link.href}
         openInNewTab
         aria-label={ariaLabel}
@@ -134,7 +140,7 @@ export function SocialIconRow({
     );
   };
 
-  const rowClass = `flex flex-row items-center ${compact ? 'gap-2 w-fit' : 'gap-3 w-full'} ${className}`;
+  const rowClass = `${socialIconRowClass(compact)} ${className}`;
 
   // Two-group mode: external links, a thin divider, then internal links — but only
   // when both groups are present (otherwise it's just a flat row, no stray divider).

package/src/components/tickets/help-center-list.tsx

@@ -31,7 +31,11 @@ import { useCallback, useState } from 'react';
 import { useSearchParams, useRouter, usePathname } from '../../embed-shims';
 import { useScrollToHash } from '../../hooks/use-scroll-to-hash';
 import { toast as defaultToast } from '../../hooks/use-toast';
-import { DEV_SECTION_PARAM_KEYS, devSectionAnchorId } from '../../utils/dev-sections/dev-section-param-keys';
+import {
+  DEV_SECTION_PARAM_KEYS,
+  devSectionAnchorId,
+  TICKET_OPEN_PARAM,
+} from '../../utils/dev-sections/dev-section-param-keys';
 import { STICKY_HEADER_OFFSET_PX } from '../../utils/same-page-hash-nav';
 import { positiveInt } from '../../utils/search-params';
 import { useChatIdentity } from '../chat/hooks/use-chat-identity';
@@ -46,7 +50,7 @@ import { HelpCenterCreateForm, HelpCenterCreateFormSkeleton } from './help-cente
 import { useTicketActions } from './hooks/use-ticket-actions';
 import { useTicketsList } from './hooks/use-tickets-list';
 import type { AnyTicket, OptimisticTicket, TicketsCacheSlot } from './types';
-import { isOptimistic, TICKET_OPEN_PARAM } from './types';
+import { isOptimistic } from './types';
 
 export interface HelpCenterListProps {
   /** Toast override (test-friendly). Defaults to the lib's shared

package/src/components/tickets/hooks/use-ticket-actions.ts

@@ -37,7 +37,6 @@ import { randomId } from '../../../utils/random-id';
 import type { ChatAttachment } from '../../chat/utils/chat-attachment-markdown';
 import { useOptionalTicketLive } from '../ticket-live-provider';
 import {
-  type AnyTicket,
   type MappedTicketActionError,
   type OptimisticTicket,
   type TicketActionErrorCode,
@@ -745,6 +744,3 @@ function resolveErrorCode(bodyCode: string | undefined, status: number): TicketA
   if (status === 412) return 'HUBSPOT_DISCONNECTED';
   return 'UNKNOWN';
 }
-
-// Re-export so callers can narrow the type when needed.
-export type { AnyTicket, OptimisticTicket };

package/src/components/tickets/index.ts

@@ -41,6 +41,5 @@ export {
   type TicketUnreadSummary,
   TOAST_COPY as TICKET_TOAST_COPY,
   isOptimistic,
-  TICKET_OPEN_PARAM,
-  buildTicketOpenHref,
 } from './types';
+export { TICKET_OPEN_PARAM, buildTicketOpenHref } from '../../utils/dev-sections/dev-section-param-keys';

package/src/components/tickets/ticket-center.tsx

@@ -13,28 +13,45 @@
  * sign-in EmptyState — no form, no list, no fetch. This keeps the
  * Network tab clean for anon visitors and prevents the form from
  * accepting input that would 401 on submit.
+ *
+ * LOADING: while the identity or the tickets are read (or in a host's loading scope) the center renders its SAME view
+ * with no tickets inside a `LoadingScope` (`TicketCenterPending`): the open-ticket form is drawn for real (inert), the
+ * list's header is real with its sync line's skeleton, and the list draws its own skeleton.
  */
 
 import { useQueryClient } from '@tanstack/react-query';
 import { RefreshCw } from 'lucide-react';
-import { useCallback, useState } from 'react';
+import { type ReactNode, useCallback, useState } from 'react';
 import { toast as defaultToast } from '../../hooks/use-toast';
+import type { DataSync } from '../../types/data-sync';
+import { cn } from '../../utils/cn';
 import { devSectionAnchorId } from '../../utils/dev-sections/dev-section-param-keys';
+import { ChatTicketItemSkeleton } from '../chat/entity-cards/chat-ticket-item';
 import { useChatIdentity } from '../chat/hooks/use-chat-identity';
 import { EmptyState } from '../empty-state';
 import { usePageDataSync } from '../layout/page-data-sync';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
 import { Card } from '../ui/card';
 import { DataSyncLine } from '../ui/data-attribution';
+import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
 import { useTicketActions } from './hooks/use-ticket-actions';
 import { useTicketsList } from './hooks/use-tickets-list';
-import { TicketOpenForm } from './ticket-open-form';
+import { TicketOpenForm, type TicketOpenFormProps } from './ticket-open-form';
 import { TicketRow } from './ticket-row';
 import type { AnyTicket, OptimisticTicket, TicketData } from './types';
 import { isOptimistic } from './types';
 
+/** The center's layout. */
+const TICKET_CENTER_CLASS = 'flex flex-col gap-6';
+const TICKET_LIST_BLOCK_CLASS = 'flex flex-col gap-2';
+const TICKET_ROW_FRAME_CLASS = 'border-b border-ods-border last:border-b-0';
+/**
+ * Ticket rows the list's skeleton draws: what one screen shows under the open-ticket form (an 80px row; the form
+ * leaves room for four on a 1440x900 desktop and, stacked, for two on a 390x844 phone).
+ */
+const TICKET_LIST_FOLD = { phone: 2, wide: 4 } as const;
+
 export interface TicketCenterProps {
   /** Optional toast override (test-friendly). Defaults to the lib's
    *  shared toast singleton. */
@@ -42,12 +59,18 @@ export interface TicketCenterProps {
 }
 
 export function TicketCenter({ toast = defaultToast }: TicketCenterProps = {}) {
+  // In a page's loading state nothing is read: no identity, no ticket list (the gate below owns those reads).
+  if (useLoadingScope()) return <TicketCenterPending region={false} />;
+  return <TicketCenterGate toast={toast} />;
+}
+
+function TicketCenterGate({ toast }: { toast: typeof defaultToast }) {
   const identity = useChatIdentity();
   // Loading window — wait for the capability bag to resolve before
   // deciding what to render. `identity.isLoading` is the first-mount
   // window; once resolved we know authTier definitively.
   if (identity.isLoading) {
-    return <TicketCenterSkeleton />;
+    return <TicketCenterPending />;
   }
   if (identity.authTier === 'anon' || !identity.user?.email) {
     return (
@@ -124,94 +147,185 @@ function TicketCenterAuthed({
   const merged: AnyTicket[] = [...optimisticTickets, ...tickets];
 
   return (
-    <div className="flex flex-col gap-6">
-      <TicketOpenForm
-        onSubmit={input => actions.submitTicket(input)}
-        isSubmitting={actions.isSubmittingForm}
-        supportSystemDown={supportSystemDown}
-      />
-
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-ods-text-secondary text-h5">Your Current Tickets</p>
-          <div className="flex items-center gap-3 text-ods-text-secondary text-h6">
-            {!syncInPage && <DataSyncLine sync={sync} inline />}
-            <Button
-              type="button"
-              variant="transparent"
-              size="small"
-              onClick={refetch}
-              disabled={isFetching}
-              aria-label="Refresh ticket list"
-              leftIcon={<RefreshCw className="h-4 w-4" />}
-            />
-          </div>
-        </div>
-
-        {isLoading ? (
-          <TicketListSkeleton />
-        ) : merged.length === 0 ? (
-          <Card className="p-6">
-            <EmptyState
-              type="generic"
-              title="No tickets yet"
-              description="Open one above to start the conversation."
-              showCTA={false}
-            />
-          </Card>
-        ) : (
-          <Card className="overflow-hidden">
-            {merged.map(ticket => (
-              <TicketRow
-                key={ticket.id}
-                id={devSectionAnchorId('ticket', ticket.external_id)}
-                ticket={ticket}
-                expanded={expandedTicketId === ticket.id}
-                onToggle={toggleRow}
-                busy={isOptimistic(ticket) ? false : actions.isRowBusy(ticket.id)}
-                supportSystemDown={supportSystemDown}
-                onSendMessage={actions.sendMessage}
-                onClose={actions.closeTicket}
-                onReopen={actions.reopenTicket}
-                onActionCollapsed={() => setExpandedTicketId(null)}
-              />
-            ))}
-          </Card>
-        )}
-      </div>
-    </div>
+    <TicketCenterView
+      tickets={merged}
+      loading={isLoading}
+      sync={syncInPage ? undefined : sync}
+      onRefresh={refetch}
+      refreshing={isFetching}
+      onSubmit={input => actions.submitTicket(input)}
+      isSubmitting={actions.isSubmittingForm}
+      supportSystemDown={supportSystemDown}
+      renderRow={ticket => (
+        <TicketRow
+          key={ticket.id}
+          id={devSectionAnchorId('ticket', ticket.external_id)}
+          ticket={ticket}
+          expanded={expandedTicketId === ticket.id}
+          onToggle={toggleRow}
+          busy={isOptimistic(ticket) ? false : actions.isRowBusy(ticket.id)}
+          supportSystemDown={supportSystemDown}
+          onSendMessage={actions.sendMessage}
+          onClose={actions.closeTicket}
+          onReopen={actions.reopenTicket}
+          onActionCollapsed={() => setExpandedTicketId(null)}
+        />
+      )}
+    />
   );
 }
 
-function TicketCenterSkeleton({
+/**
+ * The center while its identity is read (or in a host's loading scope): the SAME view, with no tickets and nothing
+ * usable, inside a `LoadingScope` where every part draws its own loading state. Announced once (`region`).
+ */
+function TicketCenterPending({
   region = true,
 }: {
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
   region?: boolean;
 } = {}) {
+  // The page states the sync under its title: the list's header then draws no line, loading or loaded.
+  const syncInPage = usePageDataSync(null, true);
   return (
-    <LoadingRegion label="Loading tickets" announce={region} className="flex flex-col gap-6">
+    <LoadingRegion label="Loading tickets" announce={region}>
+      <LoadingScope>
+        <TicketCenterView
+          tickets={[]}
+          loading
+          formInert
+          sync={syncInPage ? undefined : null}
+          onSubmit={() => Promise.resolve(false)}
+          isSubmitting={false}
+          supportSystemDown={false}
+          renderRow={() => null}
+        />
+      </LoadingScope>
+    </LoadingRegion>
+  );
+}
+
+/** The center's ONE view, loaded and loading: the open-ticket form, then the list under its header. */
+function TicketCenterView({
+  tickets,
+  loading,
+  formInert = false,
+  sync,
+  onRefresh,
+  refreshing,
+  onSubmit,
+  isSubmitting,
+  supportSystemDown,
+  renderRow,
+}: {
+  tickets: AnyTicket[];
+  /** The tickets are being read: the list draws its skeleton. */
+  loading: boolean;
+  /** The identity is not read yet: the form is drawn for real but cannot be focused, typed into or submitted. */
+  formInert?: boolean;
+  /** `undefined`: the page states the sync, the header draws no line. */
+  sync: DataSync | null | undefined;
+  /** Absent while loading, where the button is drawn but cannot be used. */
+  onRefresh?: () => void;
+  refreshing?: boolean;
+  onSubmit: TicketOpenFormProps['onSubmit'];
+  isSubmitting: boolean;
+  supportSystemDown: boolean;
+  renderRow: (ticket: AnyTicket) => ReactNode;
+}) {
+  return (
+    <div className={TICKET_CENTER_CLASS}>
+      {/* `contents`: the wrapper adds no box, the form stays the view's own child. */}
+      <div inert={formInert || undefined} className="contents">
+        <TicketOpenForm onSubmit={onSubmit} isSubmitting={isSubmitting} supportSystemDown={supportSystemDown} />
+      </div>
+
+      <div className={TICKET_LIST_BLOCK_CLASS}>
+        <TicketListHeader sync={sync} syncLoading={loading} onRefresh={onRefresh} refreshing={refreshing} />
+        <TicketList tickets={tickets} loading={loading} renderRow={renderRow} />
+      </div>
+    </div>
+  );
+}
+
+/** The ticket list: its own skeleton while the tickets are read (`useLoadingScope() || loading`), else rows or empty. */
+function TicketList({
+  tickets,
+  loading,
+  renderRow,
+}: {
+  tickets: AnyTicket[];
+  loading: boolean;
+  renderRow: (ticket: AnyTicket) => ReactNode;
+}) {
+  if (useLoadingScope() || loading) return <TicketListSkeleton />;
+  if (tickets.length === 0) {
+    return (
       <Card className="p-6">
-        <UnifiedSkeleton className="mb-4 h-7 w-48" />
-        <UnifiedSkeleton className="mb-3 h-10 w-full" />
-        <UnifiedSkeleton className="h-24 w-full" />
+        <EmptyState
+          type="generic"
+          title="No tickets yet"
+          description="Open one above to start the conversation."
+          showCTA={false}
+        />
       </Card>
-      <TicketListSkeleton />
-    </LoadingRegion>
+    );
+  }
+  return <Card className="overflow-hidden">{tickets.map(renderRow)}</Card>;
+}
+
+/**
+ * The list's header, loaded and loading: "Your Current Tickets" (static), the sync line (when the page does not
+ * state it above) and the refresh button.
+ */
+function TicketListHeader({
+  sync,
+  syncLoading,
+  onRefresh,
+  refreshing = false,
+}: {
+  /** `undefined`: the page states the sync, the header draws no line. */
+  sync: DataSync | null | undefined;
+  syncLoading: boolean;
+  /** Absent in the skeleton, where the button is drawn but cannot be used. */
+  onRefresh?: () => void;
+  refreshing?: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <p className="text-ods-text-secondary text-h5">Your Current Tickets</p>
+      <div className="flex items-center gap-3 text-ods-text-secondary text-h6">
+        {sync !== undefined && <DataSyncLine sync={sync} loading={syncLoading} inline />}
+        <span inert={!onRefresh || undefined} aria-hidden={!onRefresh || undefined}>
+          <Button
+            type="button"
+            variant="transparent"
+            size="small"
+            onClick={onRefresh}
+            disabled={refreshing}
+            aria-label="Refresh ticket list"
+            leftIcon={<RefreshCw className="h-4 w-4" />}
+          />
+        </span>
+      </div>
+    </div>
   );
 }
 
 function TicketListSkeleton() {
   return (
     <Card className="overflow-hidden">
-      {[0, 1, 2].map(i => (
-        <div key={i} className="flex h-20 items-center gap-4 border-b border-ods-border px-4 last:border-b-0">
-          <div className="flex flex-1 flex-col gap-2">
-            <UnifiedSkeleton className="h-4 w-2/3" />
-            <UnifiedSkeleton className="h-3 w-full" />
-          </div>
-          <UnifiedSkeleton className="h-8 w-20" />
-          <UnifiedSkeleton className="h-8 w-16" />
+      {Array.from({ length: Math.max(TICKET_LIST_FOLD.phone, TICKET_LIST_FOLD.wide) }, (_, i) => (
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+          key={i}
+          className={cn(
+            TICKET_ROW_FRAME_CLASS,
+            i >= TICKET_LIST_FOLD.phone && 'hidden md:block',
+            i >= TICKET_LIST_FOLD.wide && 'md:hidden',
+          )}
+        >
+          <ChatTicketItemSkeleton />
         </div>
       ))}
     </Card>

package/src/components/tickets/types.ts

@@ -302,15 +302,6 @@ export type TicketUnreadSummary = {
  */
 export const TICKET_MARK_READ_DEBOUNCE_MS = 2000;
 
-/**
- * Ticket deep-link SSOT — DEFINED in the server-safe param-keys module
- * (`utils/dev-sections/dev-section-param-keys.ts`, beside its sibling
- * `devSectionAnchorId`) because producers span both worlds: the hub's
- * SERVER-side chat-ref builder and the client header cell. Re-exported
- * here so ticket-surface consumers keep one import home.
- */
-export { TICKET_OPEN_PARAM, buildTicketOpenHref } from '../../utils/dev-sections/dev-section-param-keys';
-
 /**
  * Centralized toast copy. Keep all wording here so QA / localization
  * can find every user-visible string in one file.

package/src/components/toggle-group.tsx

@@ -14,6 +14,9 @@ import {
 import { cn } from '../utils/cn';
 import { toggleVariants } from './ui/toggle';
 
+/** The group's row: read by the group and by every skeleton of one. */
+export const TOGGLE_GROUP_CLASS = 'flex items-center justify-center gap-1';
+
 const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
   size: 'default',
   variant: 'default',
@@ -26,7 +29,7 @@ const ToggleGroup = forwardRef<
     children?: ReactNode;
   } & ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>
 >(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root ref={ref} className={cn('flex items-center justify-center gap-1', className)} {...props}>
+  <ToggleGroupPrimitive.Root ref={ref} className={cn(TOGGLE_GROUP_CLASS, className)} {...props}>
     <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
 ));

package/src/components/tool-icon.tsx

@@ -1,6 +1,7 @@
 import { createElement, type FC } from 'react';
 import type { ToolType } from '../types/tool.types';
-import { findIcon, type IconComponent } from './chat/utils/icon-library';
+import { findIcon } from './chat/utils/icon-library';
+import type { IconComponent } from './chat/utils/icon-loading';
 
 export interface ToolIconProps {
   toolType: ToolType;