@flamingo-stack/openframe-frontend-core 0.0.726 → 0.0.727

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   ShellTypeBadge,
   SoftwareInfo,
   SoftwareSourceBadge
-} from "./chunk-4VRHDFF2.js";
+} from "./chunk-FIKAJKPE.js";
 import {
   AppHeader,
   AppLayout,
@@ -33,15 +33,15 @@ import {
   isMegaMenu,
   navLinkLabel,
   siteNavHasMobileMenus
-} from "./chunk-SCTS3EMJ.js";
+} from "./chunk-URDJXB75.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useScrollSpy,
   useSectionNavigation
-} from "./chunk-NZYMMYWN.js";
-import "./chunk-JYJBL7GD.js";
+} from "./chunk-AU4WWLFP.js";
+import "./chunk-C6Y22J32.js";
 import {
   AIEnrichButton,
   AIEnrichSection,
@@ -573,7 +573,7 @@ import {
   useTrackerClock,
   useWalkthroughVideo,
   usersCountLabel
-} from "./chunk-C5KMQLJP.js";
+} from "./chunk-N27CSEDR.js";
 import {
   Board,
   BoardColumn,
@@ -1173,6 +1173,7 @@ import {
   tokensForBalance,
   upsertTrailingCompaction,
   useAskPrompts,
+  useAskSurface,
   useAssistantOpen,
   useCaptions,
   useChat,
@@ -1196,8 +1197,6 @@ import {
   useSSE,
   useScriptedStream,
   useScrollFade,
-  useShownAskPromptIds,
-  useShownAskPrompts,
   useSlashCommandRegistry,
   useSlashCommands,
   useSseChatAdapter,
@@ -1210,7 +1209,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-SBPPM65Y.js";
+} from "./chunk-CIAAU44V.js";
 import {
   ApprovalBatchMessage,
   ApprovalStatusTag,
@@ -3859,6 +3858,7 @@ export {
   useApiParams,
   useAppLayoutDrawerContainer,
   useAskPrompts,
+  useAskSurface,
   useAssistantOpen,
   useAuthedAssetSrc,
   useAuthedImageSrc,
@@ -3956,8 +3956,6 @@ export {
   useScrollToHash,
   useSearch,
   useSectionNavigation,
-  useShownAskPromptIds,
-  useShownAskPrompts,
   useSlashCommandRegistry,
   useSlashCommands,
   useSmUp,

package/dist/{knowledge-5AYFIVKD.cjs → knowledge-3FAF5T7Q.cjs}

@@ -8,7 +8,7 @@ var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
 var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
-var _chunkQ2G7NVFHcjs = require('./chunk-Q2G7NVFH.cjs');
+var _chunkAM2RHT3Hcjs = require('./chunk-AM2RHT3H.cjs');
 require('./chunk-ABSWD4PQ.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -21,7 +21,7 @@ require('./chunk-BYUIFT7Q.cjs');
 require('./chunk-LX22Y43B.cjs');
 
 
-var _chunkRVSNXG6Jcjs = require('./chunk-RVSNXG6J.cjs');
+var _chunkBKTV3VODcjs = require('./chunk-BKTV3VOD.cjs');
 require('./chunk-HP4UUBJC.cjs');
 require('./chunk-EWPR7662.cjs');
 require('./chunk-NJV3LIDE.cjs');
@@ -97,10 +97,10 @@ function KnowledgeScreen(_props) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkQ2G7NVFHcjs.KnowledgeBaseArticleView,
+    _chunkAM2RHT3Hcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
-      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRVSNXG6Jcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
+      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBKTV3VODcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })
     }
   ) });
 }

package/dist/{knowledge-L7WQ7IEP.js → knowledge-IMTMYURI.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-CYUUHFXL.js";
 import {
   KnowledgeBaseArticleView
-} from "./chunk-C5KMQLJP.js";
+} from "./chunk-N27CSEDR.js";
 import "./chunk-KS3YLYVL.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
@@ -21,7 +21,7 @@ import "./chunk-3UBWDR65.js";
 import "./chunk-PLWMIU72.js";
 import {
   SimpleMarkdownRenderer
-} from "./chunk-SBPPM65Y.js";
+} from "./chunk-CIAAU44V.js";
 import "./chunk-5D2K7TFT.js";
 import "./chunk-AFTRPEXO.js";
 import "./chunk-JXJFUGJY.js";

package/dist/{logs-MGFHGVIE.js → logs-55GOSGVE.js}

@@ -16,7 +16,7 @@ import {
   ToolBadge,
   logSeverityVariant,
   logSourceLabels
-} from "./chunk-C5KMQLJP.js";
+} from "./chunk-N27CSEDR.js";
 import "./chunk-KS3YLYVL.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
@@ -29,7 +29,7 @@ import "./chunk-3UBWDR65.js";
 import "./chunk-PLWMIU72.js";
 import {
   normalizeToolTypeWithFallback
-} from "./chunk-SBPPM65Y.js";
+} from "./chunk-CIAAU44V.js";
 import "./chunk-5D2K7TFT.js";
 import "./chunk-AFTRPEXO.js";
 import "./chunk-JXJFUGJY.js";

package/dist/{logs-4F77RJXJ.cjs → logs-UL7BQEXP.cjs}

@@ -16,7 +16,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkQ2G7NVFHcjs = require('./chunk-Q2G7NVFH.cjs');
+var _chunkAM2RHT3Hcjs = require('./chunk-AM2RHT3H.cjs');
 require('./chunk-ABSWD4PQ.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -29,7 +29,7 @@ require('./chunk-BYUIFT7Q.cjs');
 require('./chunk-LX22Y43B.cjs');
 
 
-var _chunkRVSNXG6Jcjs = require('./chunk-RVSNXG6J.cjs');
+var _chunkBKTV3VODcjs = require('./chunk-BKTV3VOD.cjs');
 require('./chunk-HP4UUBJC.cjs');
 require('./chunk-EWPR7662.cjs');
 require('./chunk-NJV3LIDE.cjs');
@@ -78,7 +78,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkKHXZFLINcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkQ2G7NVFHcjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkAM2RHT3Hcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -150,13 +150,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2G7NVFHcjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAM2RHT3Hcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQ2G7NVFHcjs.LogsPageView,
+      _chunkAM2RHT3Hcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -164,7 +164,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkQ2G7NVFHcjs.LogsTableView,
+          _chunkAM2RHT3Hcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -178,8 +178,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2G7NVFHcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkQ2G7NVFHcjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAM2RHT3Hcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkAM2RHT3Hcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -191,12 +191,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2G7NVFHcjs.ToolBadge, { toolType: _chunkRVSNXG6Jcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAM2RHT3Hcjs.ToolBadge, { toolType: _chunkBKTV3VODcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkQ2G7NVFHcjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkAM2RHT3Hcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkQ2G7NVFHcjs.DeviceCard,
+          _chunkAM2RHT3Hcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-WRDZFNIB.js → policies-KRDF563O.js}

@@ -10,7 +10,7 @@ import {
   PolicySummaryCards,
   computePolicySummary,
   getPolicyTableStatus
-} from "./chunk-C5KMQLJP.js";
+} from "./chunk-N27CSEDR.js";
 import "./chunk-KS3YLYVL.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
@@ -21,7 +21,7 @@ import "./chunk-HFL2F4RM.js";
 import "./chunk-YYYVS7CX.js";
 import "./chunk-3UBWDR65.js";
 import "./chunk-PLWMIU72.js";
-import "./chunk-SBPPM65Y.js";
+import "./chunk-CIAAU44V.js";
 import "./chunk-5D2K7TFT.js";
 import "./chunk-AFTRPEXO.js";
 import "./chunk-JXJFUGJY.js";

package/dist/{policies-VCGM3C5Z.cjs → policies-O5F2XSCY.cjs}

@@ -10,7 +10,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkQ2G7NVFHcjs = require('./chunk-Q2G7NVFH.cjs');
+var _chunkAM2RHT3Hcjs = require('./chunk-AM2RHT3H.cjs');
 require('./chunk-ABSWD4PQ.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -21,7 +21,7 @@ require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-BYUIFT7Q.cjs');
 require('./chunk-LX22Y43B.cjs');
-require('./chunk-RVSNXG6J.cjs');
+require('./chunk-BKTV3VOD.cjs');
 require('./chunk-HP4UUBJC.cjs');
 require('./chunk-EWPR7662.cjs');
 require('./chunk-NJV3LIDE.cjs');
@@ -83,14 +83,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkQ2G7NVFHcjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkAM2RHT3Hcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkQ2G7NVFHcjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkAM2RHT3Hcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -104,16 +104,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkQ2G7NVFHcjs.PoliciesTable,
+    _chunkAM2RHT3Hcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2G7NVFHcjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAM2RHT3Hcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQ2G7NVFHcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAM2RHT3Hcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{software-update-WVG2GDZO.js → software-update-NXSC4OVM.js}

@@ -15,7 +15,7 @@ import {
   PACKAGE_SEARCH_LABEL,
   PACKAGE_SEARCH_PLACEHOLDER,
   SoftwareActionForm
-} from "./chunk-C5KMQLJP.js";
+} from "./chunk-N27CSEDR.js";
 import "./chunk-KS3YLYVL.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
@@ -28,7 +28,7 @@ import "./chunk-HFL2F4RM.js";
 import "./chunk-YYYVS7CX.js";
 import "./chunk-3UBWDR65.js";
 import "./chunk-PLWMIU72.js";
-import "./chunk-SBPPM65Y.js";
+import "./chunk-CIAAU44V.js";
 import "./chunk-5D2K7TFT.js";
 import "./chunk-AFTRPEXO.js";
 import "./chunk-JXJFUGJY.js";

package/dist/{software-update-YD2MNL3K.cjs → software-update-R2ASCRWP.cjs}

@@ -15,7 +15,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkQ2G7NVFHcjs = require('./chunk-Q2G7NVFH.cjs');
+var _chunkAM2RHT3Hcjs = require('./chunk-AM2RHT3H.cjs');
 require('./chunk-ABSWD4PQ.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -28,7 +28,7 @@ require('./chunk-MZ4KBSH7.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-BYUIFT7Q.cjs');
 require('./chunk-LX22Y43B.cjs');
-require('./chunk-RVSNXG6J.cjs');
+require('./chunk-BKTV3VOD.cjs');
 require('./chunk-HP4UUBJC.cjs');
 require('./chunk-EWPR7662.cjs');
 require('./chunk-NJV3LIDE.cjs');
@@ -118,12 +118,12 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkU6LRRG2Ecjs.Autocomplete,
     {
-      label: _chunkQ2G7NVFHcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkAM2RHT3Hcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkQ2G7NVFHcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkAM2RHT3Hcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -137,7 +137,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkQ2G7NVFHcjs.SoftwareActionForm,
+    _chunkAM2RHT3Hcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -149,7 +149,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkQ2G7NVFHcjs.DeviceSelector,
+        _chunkAM2RHT3Hcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

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

package/src/components/chat/assistant-ask-prompts.tsx

@@ -1,74 +1,119 @@
 'use client';
 
-import { useMemo } from 'react';
 import {
   AssistantRuntimeContext,
   useAssistantRuntime,
   type AssistantOpenRequest,
 } from '../../contexts/assistant-runtime-context';
-import { AskPrompts, type AskPromptsProps } from './ask-prompts';
-import {
-  assistantAvailable,
-  ASK_PROMPTS_DEFAULT_COUNT,
-  useAskPrompts,
-  useAssistantOpen,
-  useShownAskPrompts,
-} from './hooks/use-ask-prompts';
+import { AskCard, AskPrompts, type AskPromptsProps } from './ask-prompts';
+import { assistantAvailable, ASK_PROMPTS_DEFAULT_COUNT, useAskSurface } from './hooks/use-ask-prompts';
+
+/** The lib's own wording of the card, when neither the host nor the runtime states it. */
+const DEFAULT_ASK_CARD = {
+  title: 'Still deciding?',
+  description: '{assistant} answers from our docs and customer stories.',
+} as const;
+
+const fillAssistant = (text: string, name: string) => text.split('{assistant}').join(name);
 
 export interface AssistantAskPromptsProps extends Pick<AskPromptsProps, 'align' | 'fadeColor' | 'className'> {
-  /** What this row is about: any string the host's questions endpoint knows. Reported with every click. */
+  /**
+   * How the surface looks. `row` (default): the launcher, then the questions,
+   * for a page section. `card`: the "still deciding?" card beside a list of
+   * questions (a FAQ), with a title, a line of description and the launcher.
+   */
+  variant?: 'row' | 'card';
+  /** What this surface is about: any string the host's questions endpoint knows. Reported with every click. */
   topic?: string;
-  /** How many questions the row offers: the same number of slots on every load. */
+  /** How many questions it offers: the same number of slots on every load. Absent: three (a card: the runtime's, else three). */
   count?: number;
+  /**
+   * Ids of questions never to offer. Absent: the ones the page's other "ask"
+   * surfaces show, which this one waits for. `null`: wait.
+   */
+  exclude?: readonly string[] | null;
+  /** False: the surface does not pick yet (its host is waiting for it to be reached). Default true. */
+  enabled?: boolean;
   /** The launcher's name. Absent: the assistant's configured name, else the launcher's default. */
   label?: string;
-  /** Something else the row waits for (the host is still reading the name it will show). */
+  /** Something else the surface waits for (the host is still reading the name it will show). */
   loading?: boolean;
-  /** How the chat is opened from THIS row. Absent: the assistant runtime's opener. */
+  /** A card's wording. `{assistant}` is replaced by the assistant's name. Absent: the runtime's, else the lib's. */
+  title?: string;
+  description?: string;
+  /** How the chat is opened from THIS surface. Absent: the assistant runtime's opener. */
   onOpen?: (request: AssistantOpenRequest) => void;
 }
 
 /**
- * A row of questions for the host's assistant, wired by itself: the launcher
- * with the assistant's name and glyph, then the questions the host picked for
- * this row's `topic`, each opening the chat and asking it. Everything comes
- * from the nearest assistant runtime (`AssistantRuntimeContext`): whether a
- * chat is there, the identity, the questions endpoint and the opener. While
- * the pick is on its way the row is the SAME block (a chip skeleton in every
- * slot), so nothing moves when the questions land. The row tells the page
- * which questions it shows, so the FAQ's card never repeats one. Nothing
- * renders with no chat, or once the pick has settled empty.
+ * THE "ask the assistant" surface, wired by itself: a row of questions in a
+ * page section, or the card beside a FAQ (`variant`). Everything comes from
+ * the nearest assistant runtime (`AssistantRuntimeContext`) through ONE hook,
+ * `useAskSurface`: whether a chat is there, the identity, the questions the
+ * host picked for this surface's `topic`, the opener and the click report.
+ * Surfaces of one page pick one after another and never show a question
+ * another already shows, so two of them may share a topic. While a pick is on
+ * its way the surface is the SAME block (a chip skeleton in every slot), so
+ * nothing moves when the questions land.
+ *
+ * Nothing renders with no chat. A row also renders nothing with no questions
+ * endpoint, or once its pick has settled empty; a card needs the assistant's
+ * name for its words, and with no endpoint is the launcher alone.
  */
 export function AssistantAskPrompts({
+  variant = 'row',
   topic,
-  count = ASK_PROMPTS_DEFAULT_COUNT,
+  count,
+  exclude,
+  enabled,
   label,
   loading = false,
+  title,
+  description,
   onOpen,
   align,
   fadeColor,
   className,
 }: AssistantAskPromptsProps) {
+  const card = variant === 'card';
   const assistant = useAssistantRuntime();
-  const { prompts, isLoading, supported } = useAskPrompts({ topic, count });
-  const open = useAssistantOpen(topic, onOpen);
-  const shown = assistantAvailable(assistant) && supported;
-  // Nothing to say where the row shows nothing; `null` while its pick is on its way.
-  useShownAskPrompts(shown ? (isLoading ? null : prompts.map(prompt => prompt.id)) : undefined);
-  // The row's launcher opens the same chat as its questions, with the row's topic: it reads the runtime.
-  const scoped = useMemo(() => (assistant ? { ...assistant, open } : null), [assistant, open]);
-  if (!assistantAvailable(assistant) || !supported) return null;
+  const slots = count ?? (card ? assistant?.askCard?.count : undefined) ?? ASK_PROMPTS_DEFAULT_COUNT;
+  const ask = useAskSurface({ topic, count: slots, exclude, enabled, onOpen });
+  if (!assistantAvailable(assistant)) return null;
+
+  const shared = {
+    prompts: ask.prompts,
+    loading: ask.isLoading || loading,
+    source: assistant.source,
+    icon: assistant.icon,
+    onOpen: ask.open,
+    onAsk: ask.reportAsk,
+  };
+  if (card) {
+    const name = label ?? assistant.name;
+    if (!name) return null;
+    const words = description ?? assistant.askCard?.description ?? DEFAULT_ASK_CARD.description;
+    return (
+      <AssistantRuntimeContext.Provider value={ask.scoped}>
+        <AskCard
+          {...shared}
+          title={fillAssistant(title ?? assistant.askCard?.title ?? DEFAULT_ASK_CARD.title, name)}
+          description={words ? fillAssistant(words, name) : undefined}
+          // Fixed slots, one question per row: chip skeletons until the pick lands, the same box after.
+          count={ask.supported ? slots : 0}
+          label={name}
+          className={className}
+        />
+      </AssistantRuntimeContext.Provider>
+    );
+  }
+  if (!ask.supported) return null;
   return (
-    <AssistantRuntimeContext.Provider value={scoped}>
+    <AssistantRuntimeContext.Provider value={ask.scoped}>
       <AskPrompts
-        prompts={prompts}
-        loading={isLoading || loading}
-        count={count}
-        source={assistant.source}
+        {...shared}
+        count={slots}
         label={label ?? assistant.name ?? undefined}
-        icon={assistant.icon}
-        onOpen={open}
-        onAsk={prompt => assistant.onAsk?.({ promptId: prompt.id, topic })}
         align={align}
         fadeColor={fadeColor}
         className={className}

package/src/components/chat/hooks/index.ts

@@ -45,9 +45,10 @@ export {
   buildAskPromptsUrl,
   useAskPrompts,
   useAssistantOpen,
-  useShownAskPromptIds,
-  useShownAskPrompts,
+  useAskSurface,
   type AskPromptsResponse,
   type UseAskPromptsOptions,
   type UseAskPromptsResult,
+  type UseAskSurfaceOptions,
+  type UseAskSurfaceResult,
 } from './use-ask-prompts';