get-bb · SawyerHood · Aug 25, 2026
diff --git a/apps/app/src/components/plugin/PluginProviderExtensionStates.tsx b/apps/app/src/components/plugin/PluginProviderExtensionStates.tsx
@@ -0,0 +1,54 @@
+import type { ThreadTimelineExtensionState } from "@bb/server-contract";
+import { usePluginSlots } from "@/lib/plugin-slots";
+import { sdk } from "@/lib/sdk";
+import { PluginSlotMount } from "./PluginSlotMount";
+
+interface PluginProviderExtensionStatesProps {
+  extensionStates: readonly ThreadTimelineExtensionState[];
+  placement: "aboveEditor" | "belowEditor";
+  providerId: string;
+  threadId: string;
+}
+
+/** Generic mount point; payload interpretation and visuals stay in the owner. */
+export function PluginProviderExtensionStates({
+  extensionStates,
+  placement,
+  providerId,
+  threadId,
+}: PluginProviderExtensionStatesProps) {
+  const { providerExtensionStates } = usePluginSlots();
+
+  return extensionStates.flatMap((state) => {
+    const slot = providerExtensionStates.find(
+      (candidate) => state.kind === `${candidate.pluginId}/${candidate.name}`,
+    );
+    if (!slot) return [];
+    return [
+      <PluginSlotMount
+        key={`${state.kind}:${placement}`}
+        pluginId={slot.pluginId}
+        slotKind="providerExtensionState"
+        slotId={slot.name}
+        instanceId={`${threadId}:${placement}`}
+        crashFallback={null}
+      >
+        <slot.component
+          threadId={threadId}
+          providerId={providerId}
+          kind={state.kind}
+          payload={state.payload}
+          sourceSeq={state.sourceSeq}
+          placement={placement}
+          experimental_dispatchAction={(action) =>
+            sdk.threads.experimental_applyExtensionStateAction({
+              threadId,
+              kind: state.kind,
+              action,
+            })
+          }
+        />
+      </PluginSlotMount>,
+    ];
+  });
+}
diff --git a/apps/app/src/components/plugin/PluginSettingsSections.tsx b/apps/app/src/components/plugin/PluginSettingsSections.tsx
@@ -4,6 +4,8 @@ import {
 } from "@/lib/plugin-slots";
 import { PluginSlotMount } from "./PluginSlotMount";
 import { ResourceDetailPanel } from "@bb/shared-ui/resource-detail";
+import { selectPrimaryHost, useHosts } from "@/hooks/queries/host-queries";
+import { useSystemConfig } from "@/hooks/queries/system-queries";
 
 /**
  * Plugin `settingsSection` slot mounts, rendered on that plugin's canonical
@@ -12,30 +14,47 @@ import { ResourceDetailPanel } from "@bb/shared-ui/resource-detail";
  */
 export function PluginSettingsSections({ pluginId }: { pluginId: string }) {
   const { settingsSections } = usePluginSlots();
+  const hostsQuery = useHosts();
+  const systemConfigQuery = useSystemConfig();
   const sections = settingsSections.filter(
     (section) => section.pluginId === pluginId,
   );
   if (sections.length === 0) return null;
-  return <PluginSettingsSectionList sections={sections} />;
+  const selectedHost = selectPrimaryHost(
+    hostsQuery.data,
+    systemConfigQuery.data?.primaryHostId ?? null,
+  );
+  return (
+    <PluginSettingsSectionList
+      sections={sections}
+      hostId={selectedHost?.id ?? null}
+    />
+  );
 }
 
 function PluginSettingsSectionList({
   sections,
+  hostId,
 }: {
   sections: readonly PluginSettingsSectionSlot[];
+  hostId: string | null;
 }) {
   return (
     <div className="space-y-6" data-testid="plugin-settings-sections">
       {sections.map((section) => {
         const key = `${section.pluginId}/${section.id}/${section.generation}`;
         return section.title === undefined ? (
-          <PluginSettingsSectionPanel key={key} section={section} />
+          <PluginSettingsSectionPanel
+            key={key}
+            section={section}
+            hostId={hostId}
+          />
         ) : (
           <div key={key} className="space-y-3">
             <h3 className="text-xs font-medium text-foreground">
               {section.title}
             </h3>
-            <PluginSettingsSectionPanel section={section} />
+            <PluginSettingsSectionPanel section={section} hostId={hostId} />
           </div>
         );
       })}
@@ -45,8 +64,10 @@ function PluginSettingsSectionList({
 
 function PluginSettingsSectionPanel({
   section,
+  hostId,
 }: {
   section: PluginSettingsSectionSlot;
+  hostId: string | null;
 }) {
   return (
     <ResourceDetailPanel surface="recessed" className="px-3 py-3">
@@ -60,7 +81,7 @@ function PluginSettingsSectionPanel({
         slotKind="settingsSection"
         slotId={section.id}
       >
-        <section.component />
+        <section.component experimental_hostId={hostId} />
       </PluginSlotMount>
     </ResourceDetailPanel>
   );

diff --git a/apps/app/src/components/promptbox/FollowUpPromptBox.tsx b/apps/app/src/components/promptbox/FollowUpPromptBox.tsx
@@ -19,9 +19,11 @@ import type {
   ThreadTimelineActivePromptMode,
 } from "@bb/domain";
 import type { ComposerView, PluginComposerScope } from "@get-bb/plugin-sdk";
+import type { ThreadTimelineExtensionState } from "@bb/server-contract";
 import type { ComposerTextEffectSource } from "@/lib/composer-text-effects";
 import { isKeyboardFocusTarget } from "@/components/layout/useMobileVisualViewportHeight";
 import { ComposerBannersSlot } from "@/components/plugin/PluginComposerBanners";
+import { PluginProviderExtensionStates } from "@/components/plugin/PluginProviderExtensionStates";
 import {
   PluginComposerHostProvider,
   PluginComposerViewProvider,
@@ -216,6 +218,12 @@ export interface FollowUpPromptBoxProps {
   suppressPluginComposerCustomizations?: boolean;
   /** Optional transient draft host exposed to plugin composer hooks. */
   pluginComposerHost?: PluginComposerHost | null;
+  /** Current provider-extension state rendered by its owning plugin. */
+  providerExtensionState?: {
+    extensionStates: readonly ThreadTimelineExtensionState[];
+    providerId: string;
+    threadId: string;
+  };
   /** Active scope used to filter and lifecycle-key plugin banner slots. */
   pluginComposerScope?: PluginComposerScope | null;
   textEffects?: readonly ComposerTextEffectSource[];
@@ -312,6 +320,7 @@ function FollowUpPromptBoxWithComposer({
   suppressPluginComposerCustomizations,
   pluginComposerHost,
   pluginComposerScope,
+  providerExtensionState,
   textEffects,
   collapseResetKey,
   focusEndKey,
@@ -819,6 +828,7 @@ function FollowUpPromptBoxWithComposer({
           hasPluginComposerScope={composerScope !== null}
           isPrimaryComposer={isPrimaryComposer}
           pendingInteraction={pendingInteraction}
+          providerExtensionState={providerExtensionState}
           showScrollToBottomButton={showScrollToBottomButton}
           stack={stack}
           stackRef={stackRef}
@@ -834,6 +844,7 @@ interface DefaultFollowUpComposerProps {
   hasPluginComposerScope: boolean;
   isPrimaryComposer: boolean;
   pendingInteraction?: ReactNode;
+  providerExtensionState?: FollowUpPromptBoxProps["providerExtensionState"];
   showScrollToBottomButton: boolean;
   stack: ReactNode | null;
   stackRef: RefObject<HTMLDivElement | null>;
@@ -846,6 +857,7 @@ function DefaultFollowUpComposer({
   hasPluginComposerScope,
   isPrimaryComposer,
   pendingInteraction = null,
+  providerExtensionState,
   showScrollToBottomButton,
   stack,
   stackRef,
@@ -867,9 +879,21 @@ function DefaultFollowUpComposer({
           ) : (
             stack
           )}
+          {providerExtensionState ? (
+            <PluginProviderExtensionStates
+              {...providerExtensionState}
+              placement="aboveEditor"
+            />
+          ) : null}
           {pendingInteraction}
         </div>
         <div data-follow-up-composer-anchor="">{composerElement}</div>
+        {providerExtensionState ? (
+          <PluginProviderExtensionStates
+            {...providerExtensionState}
+            placement="belowEditor"
+          />
+        ) : null}
       </div>
     </>
   );

diff --git a/...app/src/components/thread/pending-interactions/ThreadPendingInteractionBanner.stories.tsx b/...app/src/components/thread/pending-interactions/ThreadPendingInteractionBanner.stories.tsx
@@ -19,8 +19,8 @@ function PromptStage({ children }: { children: React.ReactNode }) {
 // The common fields; each story pairs its own payload with its resolution.
 function basePendingInteraction(): Omit<
   ProviderPendingInteraction,
-  "payload" | "resolution"
-> {
+  "payload" | "resolution" | "turnId"
+> & { turnId: string } {
   return {
     id: "pi_demo",
     threadId: "thr_qfk8ksbxkk",

diff --git a/apps/app/src/components/thread/timeline/ThreadTimelinePanelContent.test.tsx b/apps/app/src/components/thread/timeline/ThreadTimelinePanelContent.test.tsx
@@ -48,6 +48,7 @@ vi.mock("./useThreadTimelineController.js", () => ({
     activeWorkflows: [],
     activeBackgroundCommands: [],
     contextWindowUsage: undefined,
+    extensionStates: [],
     goal: null,
     modelFallback: null,
     hasOlderTimelineRows: false,
@@ -101,6 +102,7 @@ function baseTimeline(
     activeWorkflows: [],
     activeBackgroundCommands: [],
     contextWindowUsage: undefined,
+    extensionStates: [],
     goal: null,
     hasOlderTimelineRows: false,
     isLoadingOlderTimelineRows: false,

diff --git a/apps/app/src/components/thread/timeline/useThreadTimelineController.test.tsx b/apps/app/src/components/thread/timeline/useThreadTimelineController.test.tsx
@@ -41,6 +41,7 @@ function makeTimelineResponse(): ThreadTimelineResponse {
     activeThinking: null,
     activeWorkflows: [],
     activeBackgroundCommands: [],
+    extensionStates: [],
     pendingTodos: null,
     goal: null,
     modelFallback: null,

diff --git a/apps/app/src/components/thread/timeline/useThreadTimelineController.ts b/apps/app/src/components/thread/timeline/useThreadTimelineController.ts
@@ -25,6 +25,7 @@ export interface UseThreadTimelineControllerResult {
   activeWorkflows: ThreadTimelineResponse["activeWorkflows"];
   activeBackgroundCommands: ThreadTimelineResponse["activeBackgroundCommands"];
   contextWindowUsage: ThreadTimelineResponse["contextWindowUsage"];
+  extensionStates: ThreadTimelineResponse["extensionStates"];
   goal: ThreadTimelineResponse["goal"];
   modelFallback: ThreadTimelineResponse["modelFallback"];
   hasOlderTimelineRows: boolean;
@@ -200,6 +201,7 @@ export function useThreadTimelineController({
     activeWorkflows: latestTimeline?.activeWorkflows ?? [],
     activeBackgroundCommands: latestTimeline?.activeBackgroundCommands ?? [],
     contextWindowUsage: latestTimeline?.contextWindowUsage,
+    extensionStates: latestTimeline?.extensionStates ?? [],
     goal: latestTimeline?.goal ?? null,
     modelFallback: latestTimeline?.modelFallback ?? null,
     hasOlderTimelineRows,

diff --git a/apps/app/src/components/thread/user-questions/UserQuestionInteractionContent.tsx b/apps/app/src/components/thread/user-questions/UserQuestionInteractionContent.tsx
@@ -134,7 +134,9 @@ function QuestionOptionRow({
         {checked ? <Icon name="Check" className="size-3" aria-hidden /> : null}
       </span>
       <span className="min-w-0 flex-1">
-        <span className="block text-sm font-medium text-foreground">{label}</span>
+        <span className="block text-sm font-medium text-foreground">
+          {label}
+        </span>
         {description ? (
           <span className="mt-0.5 block text-xs leading-snug text-muted-foreground">
             {description}
@@ -212,12 +214,7 @@ function QuestionInputBlock({
   useLayoutEffect(() => {
     if (!state.otherSelected) return;
     resizeFreeTextArea();
-  }, [
-    question.id,
-    resizeFreeTextArea,
-    state.otherSelected,
-    state.otherText,
-  ]);
+  }, [question.id, resizeFreeTextArea, state.otherSelected, state.otherText]);
 
   const handleFreeTextKeyDown = (
     event: KeyboardEvent<HTMLTextAreaElement>,
@@ -275,7 +272,9 @@ function QuestionInputBlock({
             resizeFreeTextArea(event.target);
           }}
           onKeyDown={handleFreeTextKeyDown}
-          placeholder="Type your own answer…"
+          placeholder={
+            question.experimental_placeholder ?? "Type your own answer…"
+          }
           className="mt-2 w-full resize-none overflow-y-auto rounded-md border border-border bg-surface-raised px-3 py-2 text-sm leading-relaxed text-foreground placeholder:text-muted-foreground focus-visible:border-ring/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/40"
           style={{
             minHeight: `${USER_QUESTION_FREE_TEXT_MIN_HEIGHT}px`,