@flamingo-stack/openframe-frontend-core 0.0.274 → 0.0.275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.274",
+  "version": "0.0.275",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/chat/chat-message-row.tsx

@@ -22,7 +22,7 @@
 import Image from '../../embed-shims/next-image'
 import { getFirstLastInitials } from '../../utils/format'
 import { useProxiedImageUrl } from './hooks/use-proxied-image-url'
-import type { ReactNode } from 'react'
+import { useState, type ReactNode } from 'react'
 
 export interface ChatMessageRowProps {
   /** Display name (bold, top-left). */
@@ -47,8 +47,17 @@ export function ChatMessageRow({
   body,
   footer,
 }: ChatMessageRowProps) {
+  // Avatars load directly from their (https) host — same as the rest of the app,
+  // so the browser disk-caches them (Google/etc. send `cache-control: max-age`).
+  // `useProxiedImageUrl` only rewrites http/relative URLs; https pass through.
   const proxiedAvatar = useProxiedImageUrl(avatarUrl ?? '')
-  const src = proxiedAvatar || avatarUrl || undefined
+  const resolvedAvatar = proxiedAvatar || avatarUrl || undefined
+  // Fall back to the initials box if the avatar load FAILS (transient CDN 429,
+  // ad-blocker, dead URL) instead of showing a broken image. Keyed on the URL
+  // (not a bool) so a later render with a DIFFERENT avatar re-attempts the load
+  // rather than inheriting a stale failure.
+  const [failedSrc, setFailedSrc] = useState<string | null>(null)
+  const src = resolvedAvatar && resolvedAvatar !== failedSrc ? resolvedAvatar : undefined
   const hasBody = body.trim().length > 0
 
   return (
@@ -63,6 +72,7 @@ export function ChatMessageRow({
           className="w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover flex-shrink-0"
           width={40}
           height={40}
+          onError={() => setFailedSrc(resolvedAvatar ?? null)}
         />
       ) : (
         <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg flex-shrink-0 flex items-center justify-center bg-ods-bg border border-ods-border text-[12px] font-medium text-ods-text-primary font-body">

package/src/components/faq/faq-document-page.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+/**
+ * FaqDocumentPage — the full `/faqs` page with chrome, so embedders drop in
+ * ONE component instead of hand-assembling `PageShell` + `PageLayout` around the
+ * bare `<FaqSection>`. Mirrors `LegalDocumentPage` / `DevSectionPage`: the
+ * page-level layout lives in the lib, the host passes only config + a back button.
+ *
+ * `<FaqSection heading={null}>` lets `PageLayout`'s `TitleBlock` own the heading +
+ * back button; it self-fetches `${apiBaseUrl}/api/faqs` via the authed
+ * `useSelfFetch`, and renders nothing on a fetch error or zero FAQs.
+ */
+
+import { PageShell, PageLayout } from '../ui';
+import { useRouter } from '../../embed-shims/next-navigation';
+import { FaqSection } from './faq-section';
+
+export interface FaqDocumentPageProps {
+  /** Page title (PageLayout TitleBlock). Default "FAQs". */
+  title?: string;
+  /** Subtitle under the title. */
+  subtitle?: string;
+  /** Back-button config — same pattern as `DevSectionPage` / `LegalDocumentPage`.
+   *  Pass `false` to hide. Default `{ label: 'Back to home', href: '/' }`. */
+  backButton?: { label?: string; href?: string } | false;
+  /** Base URL `FaqSection` appends `/api/faqs` to (reverse-proxy embedders). */
+  apiBaseUrl?: string;
+  /** Optional entity scoping forwarded to `FaqSection`. */
+  entityType?: string;
+  entityId?: number | string;
+  /** Minimum FAQ count before the section renders (forwarded to `FaqSection`). */
+  minResults?: number;
+}
+
+export function FaqDocumentPage({
+  title = 'FAQs',
+  subtitle,
+  backButton,
+  apiBaseUrl,
+  entityType,
+  entityId,
+  minResults,
+}: FaqDocumentPageProps) {
+  const router = useRouter();
+
+  // Back-button config — mirrors LegalDocumentPage/DevSectionPage. Hide entirely
+  // when the caller passes `false` (embed-mode where the host owns nav chrome).
+  const backCfg =
+    backButton === false
+      ? undefined
+      : {
+          label: backButton?.label ?? 'Back to home',
+          onClick: () => router.push(backButton?.href ?? '/'),
+        };
+
+  return (
+    <PageShell>
+      <PageLayout title={title} subtitle={subtitle} backButton={backCfg}>
+        <FaqSection
+          heading={null}
+          apiBaseUrl={apiBaseUrl}
+          entityType={entityType}
+          entityId={entityId}
+          minResults={minResults}
+        />
+      </PageLayout>
+    </PageShell>
+  );
+}

package/src/components/faq/index.ts

@@ -10,3 +10,4 @@
 // (Server-safe subpath is wired in tsup.config.ts under the server/universal
 // block and exposed via "./components/faq/json-ld" in package.json#exports.)
 export { FaqSection, type FaqSectionProps } from './faq-section'
+export { FaqDocumentPage, type FaqDocumentPageProps } from './faq-document-page'

package/src/components/layout/article-detail-layout.tsx

@@ -1,30 +1,41 @@
 import React from 'react';
+import { cn } from '../../utils/cn';
 
 /**
  * Unified page layout components.
  *
- * PageShell: Full-width layout for list pages (max-w-[1920px])
- * ArticleDetailLayout: Constrained layout for detail pages (max-w-[1280px])
+ * PageShell: full-width <main> for list pages, dashboards, and other wide
+ * layouts (max-w-[1920px]) — bg + min-height + centered, max-width content box.
+ * ArticleDetailLayout: the same shell constrained to a readable article width
+ * (max-w-[1280px]) — blog posts, release notes, case studies, etc.
+ * Child components render content only; no layout wrappers needed.
  *
- * Both provide: <main> + bg-ods-bg + responsive padding + max-width + centering.
- * Child components should render content only — no layout wrappers needed.
+ * Outer padding is driven by CSS custom properties (see
+ * `styles/ods-page-shell.css`), so an embedder matches its host grid by setting
+ * the `--page-shell-*` vars on ANY ancestor — no prop-threading through the lib
+ * wrappers (DevSectionPage / LegalDocumentPage / ReleaseDetailPage / …), no
+ * imperative global, no context. The cascade scopes each override to its own
+ * subtree. Per-instance escape hatch: `contentClassName` (Tailwind padding
+ * utilities there win over the class defaults).
  */
 
 interface LayoutProps {
   children: React.ReactNode;
   /** JSON-LD schema script elements (breadcrumbs, article schema, etc.) */
   schemas?: React.ReactNode;
+  /** Per-instance class override on the content box (wins over the var defaults). */
+  contentClassName?: string;
 }
 
 /**
  * Full-width page shell for list pages, dashboards, and other wide layouts.
  * Max width: 1920px.
  */
-export function PageShell({ children, schemas }: LayoutProps) {
+export function PageShell({ children, schemas, contentClassName }: LayoutProps) {
   return (
     <main className="bg-ods-bg min-h-screen">
       {schemas}
-      <div className="max-w-[1920px] mx-auto px-6 md:px-20 py-6 md:py-10">
+      <div className={cn('page-shell-content max-w-[1920px] mx-auto', contentClassName)}>
         {children}
       </div>
     </main>
@@ -32,15 +43,17 @@ export function PageShell({ children, schemas }: LayoutProps) {
 }
 
 /**
- * Constrained layout for article/detail pages.
- * Max width: 1280px for readable content width.
- * Used by: release pages, blog posts, case studies, investor updates, interviews.
+ * Constrained layout for article/detail pages (max-w-[1280px]) — readable
+ * content width for blog posts, release notes, case studies, investor updates.
+ * Fixed hub padding (`px-6 md:px-20 py-6 md:py-10`); pass `contentClassName` to
+ * override per instance. (PageShell's `--page-shell-*` var system does NOT apply
+ * here — this layout keeps its own fixed spacing.)
  */
-export function ArticleDetailLayout({ children, schemas }: LayoutProps) {
+export function ArticleDetailLayout({ children, schemas, contentClassName }: LayoutProps) {
   return (
     <main className="bg-ods-bg min-h-screen">
       {schemas}
-      <div className="max-w-[1280px] mx-auto px-6 md:px-20 py-6 md:py-10">
+      <div className={cn('max-w-[1280px] mx-auto px-6 md:px-20 py-6 md:py-10', contentClassName)}>
         {children}
       </div>
     </main>

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -16,9 +16,9 @@
  */
 
 import { type ComponentType, type ReactNode } from 'react'
-import { ArrowLeft } from 'lucide-react'
+import { PageLayout } from '../layout/page-layout'
 
-import { Link } from '../../embed-shims'
+import { useRouter } from '../../embed-shims'
 // PageShell (max-w-[1920px]) — the guide detail content must share the SAME
 // container sizing as the related-content/FAQ rail the host page renders
 // below it (which uses the wide shell). ArticleDetailLayout (1280px) made
@@ -91,6 +91,7 @@ export function OnboardingGuideDetailView({
 }: OnboardingGuideDetailViewProps) {
   const resolvedBackHref = backHref ?? basePath
   const runtime = useChatRuntime()
+  const router = useRouter()
 
   // Controlled (hub SSR `initialData`) OR self-fetch by slug (config-only embed).
   const url = initialData ? null : slug && guideEndpoint ? guideEndpoint(slug) : null
@@ -104,13 +105,26 @@ export function OnboardingGuideDetailView({
   })
 
   if (error || (!guide && !isLoading)) {
-    return <LoadError message="Guide not found." onRetry={reload} />
+    return (
+      <PageShell>
+        <LoadError message="Guide not found." onRetry={reload} />
+      </PageShell>
+    )
   }
   if (!guide) {
     // Skeleton (not a bare "Loading…") for parity with every other shared view —
     // catalog, roadmap, releases all render a skeleton on first load, so the detail
-    // page shouldn't flash text then content.
-    return <DetailPageSkeleton showImageGallery={false} />
+    // page shouldn't flash text then content. `bare` + `PageShell` so the loading
+    // state matches the loaded page's full width / padding / min-height.
+    return (
+      <PageShell>
+        {/* Match the loaded page's top offset (TitleBlock's
+            `pt-[var(--spacing-system-l)]`) so content doesn't jump on load. */}
+        <div className="pt-[var(--spacing-system-l)]">
+          <DetailPageSkeleton bare showImageGallery={false} />
+        </div>
+      </PageShell>
+    )
   }
 
   const captionsUrl = getCaptionsUrl('onboarding_guide', guide.id, guide.srt_content)
@@ -135,16 +149,7 @@ export function OnboardingGuideDetailView({
 
   return (
     <PageShell>
-      <div className="space-y-6 md:space-y-8">
-        {/* Back link */}
-        <Link
-          href={resolvedBackHref}
-          className="inline-flex items-center gap-2 text-ods-text-secondary hover:text-ods-accent transition-colors"
-        >
-          <ArrowLeft className="h-4 w-4" />
-          <span className="text-h5">{backLabel}</span>
-        </Link>
-
+      <PageLayout backButton={{ label: backLabel, onClick: () => router.push(resolvedBackHref) }}>
         <h1 className="text-h1 tracking-[-1.12px] text-ods-text-primary">{guide.title}</h1>
 
         {/* Tags — flat onboarding_guide_tags[] from entity_tags. */}
@@ -225,7 +230,7 @@ export function OnboardingGuideDetailView({
             </ul>
           </div>
         )}
-      </div>
+      </PageLayout>
     </PageShell>
   )
 }

package/src/components/shared/delivery/delivery-lists.tsx

@@ -35,6 +35,7 @@ import { DeliveryTable } from './delivery-table';
 import { EmptyState } from '../../empty-state';
 import { LoadError } from '../../ui/error-state';
 import { DEV_SECTION_PARAM_KEYS } from '../../../utils/dev-sections/dev-section-param-keys';
+import { contentFetch } from '../../../utils/embed-content-fetch';
 
 const DEFAULT_COMPLETED_ENDPOINT = '/api/delivery/completed';
 const DEFAULT_IN_PROGRESS_ENDPOINT = '/api/delivery/in-progress';
@@ -97,8 +98,8 @@ export function DeliveryLists({
 
         // Fetch completed and in-progress tasks separately with filters
         const [completedResponse, inProgressResponse] = await Promise.all([
-          fetch(`${completedApiEndpoint}${queryParam}`),
-          fetch(`${inProgressApiEndpoint}${queryParam}`),
+          contentFetch(`${completedApiEndpoint}${queryParam}`),
+          contentFetch(`${inProgressApiEndpoint}${queryParam}`),
         ]);
 
         if (!completedResponse.ok || !inProgressResponse.ok) {

package/src/components/shared/detail-page-skeleton.tsx

@@ -1,23 +1,23 @@
 "use client";
 
-import { PageContainer } from '../layout/page-container';
+import { PageLayout } from '../layout/page-layout';
 
 export interface DetailPageSkeletonProps {
   metadataColumns?: number; // Number of metadata grid columns (default 4)
   showImageGallery?: boolean; // Show horizontal image gallery (default true)
+  /** Render only the skeleton blocks, WITHOUT the self-contained page wrapper
+   *  — the caller supplies its own (e.g. `<PageShell>`) so the loading state
+   *  matches the loaded page's width, padding, and min-height. Default false
+   *  (self-contained `<PageLayout>` at the hub article width). */
+  bare?: boolean;
 }
 
 export function DetailPageSkeleton({
   metadataColumns = 4,
-  showImageGallery = true
+  showImageGallery = true,
+  bare = false
 }: DetailPageSkeletonProps = {}) {
-  return (
-    <PageContainer
-      as="article"
-      backgroundClassName="bg-ods-bg"
-      contentPadding="py-6 md:py-10 px-6 md:px-20"
-      maxWidth="max-w-[1280px]"
-    >
+  const content = (
       <div className="space-y-6 md:space-y-10 animate-pulse">
         {/* Title Block */}
         <div className="flex flex-col gap-6 w-full">
@@ -67,6 +67,14 @@ export function DetailPageSkeleton({
           </div>
         ))}
       </div>
-    </PageContainer>
+  );
+  if (bare) return content;
+  return (
+    <PageLayout
+      showHeader={false}
+      className="bg-ods-bg max-w-[1280px] mx-auto py-6 md:py-10 px-6 md:px-20"
+    >
+      {content}
+    </PageLayout>
   );
 }

package/src/components/shared/legal-document/use-legal-docs.ts

@@ -14,6 +14,7 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
+import { contentFetch } from '../../../utils/embed-content-fetch';
 
 export interface LegalDocument {
   title: string;
@@ -68,7 +69,7 @@ export function useLegalDocs(
       setIsLoading(true);
       setError(null);
 
-      const response = await fetch(effectiveEndpoint);
+      const response = await contentFetch(effectiveEndpoint);
 
       if (!response.ok) {
         throw new Error(

package/src/components/shared/product-release/release-detail-page.tsx

@@ -8,7 +8,7 @@ import { Card, CardContent } from '../../ui/card';
 // renders below this view (was ArticleDetailLayout, 1280px — narrower than
 // the rail, see hub detail-container alignment decision 2026-06-10).
 import { PageShell } from '../../layout/article-detail-layout';
-import { BackButton } from '../../layout/back-button';
+import { PageLayout } from '../../layout/page-layout';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
 import { EntityTagBadges } from '../../features/entity-tag-badges';
 import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
@@ -17,6 +17,7 @@ import { MediaGalleryStrip } from '../media-gallery-strip';
 import { GitHubIcon } from '../../icons/github-icon';
 import { AlertTriangle, ExternalLink, BookMarked, Sparkles, TrendingUp, Wrench } from 'lucide-react';
 import { formatReleaseDate } from '../../../utils/date-formatters';
+import { contentFetch } from '../../../utils/embed-content-fetch';
 import { Video } from '../../features/video';
 import { DetailPageSkeleton } from '../detail-page-skeleton';
 import type { ChangelogEntry } from '../../../types/product-release';
@@ -158,7 +159,7 @@ export function ReleaseDetailPage({
         if (roadmapTasksData && roadmapTasksData.length > 0 && RoadmapSection) {
           setRoadmapLoading(true);
           const roadmapIds = roadmapTasksData.map(t => t.clickup_task_id).join(',');
-          const roadmapResponse = await fetch(`${roadmapApiEndpoint}?task_ids=${roadmapIds}`);
+          const roadmapResponse = await contentFetch(`${roadmapApiEndpoint}?task_ids=${roadmapIds}`);
           const roadmapData = await roadmapResponse.json();
           setRoadmapTasks(roadmapData.items || []);
           setRoadmapLoading(false);
@@ -169,7 +170,7 @@ export function ReleaseDetailPage({
         if (deliveryTasksData && deliveryTasksData.length > 0 && DeliverySection) {
           setDeliveryLoading(true);
           const deliveryIds = deliveryTasksData.map(t => t.clickup_task_id).join(',');
-          const deliveryResponse = await fetch(`${deliveryApiEndpoint}?task_ids=${deliveryIds}`);
+          const deliveryResponse = await contentFetch(`${deliveryApiEndpoint}?task_ids=${deliveryIds}`);
           const deliveryResponseData = await deliveryResponse.json();
           setDeliveryData(deliveryResponseData);
           setDeliveryLoading(false);
@@ -186,15 +187,27 @@ export function ReleaseDetailPage({
 
   // Don't show loading skeleton if we have initialData
   if (!initialData && isLoading) {
-    return <DetailPageSkeleton metadataColumns={4} showImageGallery={true} />;
+    // `bare` + `PageShell` so the loading state matches the loaded page's full
+    // width / padding / min-height (the wrapper supplies the page chrome).
+    return (
+      <PageShell>
+        {/* Match the loaded page's top offset (TitleBlock's
+            `pt-[var(--spacing-system-l)]`) so content doesn't jump on load. */}
+        <div className="pt-[var(--spacing-system-l)]">
+          <DetailPageSkeleton bare metadataColumns={4} showImageGallery={true} />
+        </div>
+      </PageShell>
+    );
   }
 
   if (error || !release) {
     return (
-      <div className="text-center py-16">
-        <h1 className="text-4xl font-bold text-ods-text-primary mb-4">Release Not Found</h1>
-        <p className="text-xl text-ods-text-secondary">The release you&apos;re looking for doesn&apos;t exist.</p>
-      </div>
+      <PageShell>
+        <div className="text-center py-16">
+          <h1 className="text-4xl font-bold text-ods-text-primary mb-4">Release Not Found</h1>
+          <p className="text-xl text-ods-text-secondary">The release you&apos;re looking for doesn&apos;t exist.</p>
+        </div>
+      </PageShell>
     );
   }
 
@@ -228,15 +241,11 @@ export function ReleaseDetailPage({
 
   return (
     <PageShell>
-      {/* Back button — desktop-only, matches DevSectionPage / LegalDocumentPage
-          (TitleBlock renders the same `hidden md:inline-flex` BackButton). */}
-      {showBackButton && (
-        <BackButton
-          label={backLabel}
-          onClick={() => router.push(backHref)}
-          className="hidden md:inline-flex mb-4"
-        />
-      )}
+      <PageLayout
+        backButton={
+          showBackButton ? { label: backLabel, onClick: () => router.push(backHref) } : undefined
+        }
+      >
       <div className="space-y-6 md:space-y-8">
         {/* Title Block */}
         <div className="flex flex-col md:flex-row md:items-end gap-4 w-full">
@@ -557,6 +566,7 @@ export function ReleaseDetailPage({
           </div>
         )}
       </div>
+      </PageLayout>
     </PageShell>
   );
 }

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

@@ -33,6 +33,7 @@ import {
   AccordionContent,
 } from '../../ui';
 import { cn } from '../../../utils/cn';
+import { contentFetch } from '../../../utils/embed-content-fetch';
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 
 const DEFAULT_BUILD_REFRESH_URL = (taskId: string) => `/api/roadmap/${taskId}`;
@@ -165,7 +166,7 @@ export function RoadmapGrid({
     try {
       const result = await toggleVote(taskId, voteType);
       if (result.success) {
-        const response = await fetch(buildRefreshUrl(taskId));
+        const response = await contentFetch(buildRefreshUrl(taskId));
         if (response.ok) {
           const data = await response.json();
           if (data.item && onItemUpdate) onItemUpdate(data.item);

package/src/components/shared/roadmap/use-roadmap-voting.ts

@@ -16,6 +16,7 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
+import { contentFetch } from '../../../utils/embed-content-fetch';
 
 export type VoteType = 'up' | 'down' | null;
 
@@ -100,7 +101,7 @@ export function useRoadmapVoting(options: UseRoadmapVotingOptions = {}) {
         // User clicked different vote - set it. If they had an opposite
         // vote, remove that first so the server totals stay consistent.
         if (currentVote) {
-          await fetch(voteApiEndpoint, {
+          await contentFetch(voteApiEndpoint, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
@@ -122,7 +123,7 @@ export function useRoadmapVoting(options: UseRoadmapVotingOptions = {}) {
       }));
 
       try {
-        const response = await fetch(voteApiEndpoint, {
+        const response = await contentFetch(voteApiEndpoint, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ taskId, voteType, action }),

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

@@ -47,9 +47,14 @@ export interface HelpCenterListProps {
   /** Toast override (test-friendly). Defaults to the lib's shared
    *  toast singleton. */
   toast?: typeof defaultToast
+  /** Back-button forwarded to the internal `DevSectionPage` chrome (same shape
+   *  as `DevSectionPage` / `LegalDocumentPage`: `{ label?, href? }`, or `false`
+   *  to hide). Omit ⇒ `DevSectionPage`'s default (`Back to home` → `/`), which
+   *  embedders whose home isn't `/` MUST override. */
+  backButton?: { label?: string; href?: string } | false
 }
 
-export function HelpCenterList({ toast = defaultToast }: HelpCenterListProps = {}) {
+export function HelpCenterList({ toast = defaultToast, backButton }: HelpCenterListProps = {}) {
   const identity = useChatIdentity()
   const searchParams = useSearchParams()
   const router = useRouter()
@@ -77,14 +82,14 @@ export function HelpCenterList({ toast = defaultToast }: HelpCenterListProps = {
   // mounts in the `preControls` slot.
   if (identity.isLoading) {
     return (
-      <DevSectionPage sectionKey="tickets" preControls={<HelpCenterCreateFormSkeleton />}>
+      <DevSectionPage sectionKey="tickets" backButton={backButton} preControls={<HelpCenterCreateFormSkeleton />}>
         <DevCardRowSkeletonList />
       </DevSectionPage>
     )
   }
   if (identity.authTier === 'anon' || !identity.user?.email) {
     return (
-      <DevSectionPage sectionKey="tickets">
+      <DevSectionPage sectionKey="tickets" backButton={backButton}>
         <EmptyState
           type="generic"
           title="Sign in to manage tickets"
@@ -119,6 +124,7 @@ export function HelpCenterList({ toast = defaultToast }: HelpCenterListProps = {
       toast={toast}
       sessionName={sessionName}
       sessionEmail={sessionEmail}
+      backButton={backButton}
     />
   )
 }
@@ -135,6 +141,7 @@ interface AuthedProps {
   toast: typeof defaultToast
   sessionName: string
   sessionEmail: string
+  backButton?: { label?: string; href?: string } | false
 }
 
 function HelpCenterListAuthed({
@@ -148,6 +155,7 @@ function HelpCenterListAuthed({
   toast,
   sessionName,
   sessionEmail,
+  backButton,
 }: AuthedProps) {
   const queryClient = useQueryClient()
   const [optimisticTickets, setOptimisticTickets] = useState<OptimisticTicket[]>([])
@@ -365,7 +373,7 @@ function HelpCenterListAuthed({
   )
 
   return (
-    <DevSectionPage sectionKey="tickets" preControls={form}>
+    <DevSectionPage sectionKey="tickets" backButton={backButton} preControls={form}>
       {body}
     </DevSectionPage>
   )

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

@@ -31,6 +31,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
+import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context'
 import { embedAuthedFetch } from '../../../utils/embed-authed-fetch'
 import type { ChatAttachment } from '../../chat/utils/chat-attachment-markdown'
 import {
@@ -149,6 +150,10 @@ export interface UseTicketActionsReturn {
 
 export function useTicketActions(options: UseTicketActionsOptions): UseTicketActionsReturn {
   const queryClient = useQueryClient()
+  // Endpoint from the runtime config (like every other endpoint); falls back to
+  // the bare hub path when unconfigured.
+  const ticketActionEndpoint =
+    useRequiredChatRuntime().endpoints.ticketActionUrl ?? TICKET_ACTION_ENDPOINT
   const { prependOptimistic, removeOptimistic, removeTicketFromCache, toast, onSupportSystemDown } = options
 
   // Form-level single-flight uses BOTH a ref (for synchronous guarding
@@ -234,7 +239,7 @@ export function useTicketActions(options: UseTicketActionsOptions): UseTicketAct
 
   const executeTicketAction = useCallback(
     async (toolName: ToolName, args: Record<string, unknown>): Promise<TicketActionResponse> => {
-      const res = await embedAuthedFetch(TICKET_ACTION_ENDPOINT, {
+      const res = await embedAuthedFetch(ticketActionEndpoint, {
         method: 'POST',
         body: JSON.stringify({ tool_name: toolName, args }),
       })
@@ -248,7 +253,7 @@ export function useTicketActions(options: UseTicketActionsOptions): UseTicketAct
       }
       return body
     },
-    [],
+    [ticketActionEndpoint],
   )
 
   // Mirror-sync watcher — backoff refetches when the post-create mirror

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

@@ -15,6 +15,7 @@
  */
 
 import { useQuery } from '@tanstack/react-query'
+import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context'
 import { embedAuthedFetch } from '../../../utils/embed-authed-fetch'
 import { useChatIdentity } from '../../chat/hooks/use-chat-identity'
 
@@ -87,6 +88,10 @@ export function useTicketEngagements(
 ): UseTicketEngagementsReturn {
   const identity = useChatIdentity()
   const identityKey = identity.user?.email ?? 'anon'
+  // Endpoint from the runtime config (like every other endpoint); falls back to
+  // the bare hub path when unconfigured.
+  const listEngagementsEndpoint =
+    useRequiredChatRuntime().endpoints.listEngagementsUrl ?? LIST_ENGAGEMENTS_ENDPOINT
 
   // "Will this ticket fetch its timeline once identity is ready?" — i.e. it's a
   // real, non-optimistic ticket the caller enabled. INDEPENDENT of whether
@@ -116,7 +121,7 @@ export function useTicketEngagements(
     // so polling pauses on a hidden tab.
     refetchInterval,
     queryFn: async (): Promise<TicketEngagement[]> => {
-      const response = await embedAuthedFetch(LIST_ENGAGEMENTS_ENDPOINT, {
+      const response = await embedAuthedFetch(listEngagementsEndpoint, {
         method: 'POST',
         body: JSON.stringify({ ticket_id: externalTicketId }),
       })

package/src/components/tickets/hooks/use-tickets-list.ts

@@ -20,6 +20,7 @@
  */
 
 import { useQuery } from '@tanstack/react-query'
+import { useRequiredChatRuntime } from '../../../contexts/chat-runtime-context'
 import { embedAuthedFetch } from '../../../utils/embed-authed-fetch'
 import type { TicketData } from '../types'
 
@@ -91,6 +92,11 @@ export interface UseTicketsListReturn {
 }
 
 export function useTicketsList(filters: UseTicketsListFilters): UseTicketsListReturn {
+  // Endpoint from the runtime config (like every other endpoint) so embedders
+  // behind a reverse proxy route it through `/content/*`; falls back to the bare
+  // hub path when unconfigured.
+  const findTicketEndpoint =
+    useRequiredChatRuntime().endpoints.findTicketUrl ?? FIND_TICKET_ENDPOINT
   const customerEmail = filters.customerEmail
   const search = (filters.search ?? '').trim()
   const status = (filters.status ?? '').trim().toLowerCase()
@@ -135,7 +141,7 @@ export function useTicketsList(filters: UseTicketsListFilters): UseTicketsListRe
         pageSize,
       }
       if (statusFilter) body.status = statusFilter
-      const response = await embedAuthedFetch(FIND_TICKET_ENDPOINT, {
+      const response = await embedAuthedFetch(findTicketEndpoint, {
         method: 'POST',
         body: JSON.stringify(body),
       })