feat(chat): adopt upstream rendering and client sync improvements

apps/mobile/src/components/ComposerToolbar.tsx

@@ -35,7 +35,7 @@ export function ComposerInlineControl(props: {
   readonly icon?: ComponentProps<typeof SymbolView>["name"];
   readonly iconNode?: ReactNode;
   readonly label: string;
-  readonly maxWidth?: number;
+  readonly maxWidth?: ViewStyle["maxWidth"];
   readonly onPress?: () => void;
   readonly selected?: boolean;
   readonly static?: boolean;

apps/mobile/src/features/threads/NewTaskDraftScreen.tsx

@@ -32,7 +32,6 @@ import {
   ComposerActionButton,
   ComposerInlineControl,
   ComposerToolbarRow,
-  ComposerToolbarScroller,
 } from "../../components/ComposerToolbar";
 import { AndroidScreenHeader } from "../../components/AndroidScreenHeader";
 import { ComposerAttachmentButton } from "../../components/ComposerAttachmentButton";
@@ -1349,21 +1348,23 @@ export function NewTaskDraftScreen(props: {
                     onPickMedia={handlePickMedia}
                     onPickFiles={handlePickFiles}
                   />
-                  <ComposerToolbarScroller align="end" contentPaddingRight={0} fadeSurface="sheet">
-                    <ComposerInlineControl
-                      accessibilityLabel="Model and reasoning settings"
-                      disabled={isComposerInteractionLocked}
-                      emphasized
-                      iconNode={
-                        <ProviderIcon
-                          provider={flow.selectedModelOption?.providerDriver}
-                          size={16}
-                        />
-                      }
-                      label={flow.selectedModelOption?.label ?? "Choose model"}
-                      maxWidth={152}
-                      onPress={settingsSheetPresentation.open}
-                    />
+                  <View className="min-w-0 flex-1 flex-row items-center justify-end gap-2">
+                    <View className="min-w-0 shrink">
+                      <ComposerInlineControl
+                        accessibilityLabel="Model and reasoning settings"
+                        disabled={isComposerInteractionLocked}
+                        emphasized
+                        iconNode={
+                          <ProviderIcon
+                            provider={flow.selectedModelOption?.providerDriver}
+                            size={16}
+                          />
+                        }
+                        label={flow.selectedModelOption?.label ?? "Choose model"}
+                        maxWidth="100%"
+                        onPress={settingsSheetPresentation.open}
+                      />
+                    </View>
                     {flow.planModeEnabled ? (
                       <ComposerInlineControl
                         accessibilityHint={`Switches to ${flow.interactionMode === "plan" ? "Build" : "Plan"} mode`}
@@ -1384,7 +1385,7 @@ export function NewTaskDraftScreen(props: {
                         showChevron={false}
                       />
                     ) : null}
-                  </ComposerToolbarScroller>
+                  </View>
                 </>
               )}
               <ComposerDictationPrimaryAction

apps/mobile/src/features/threads/QuestionAnswerHistory.tsx

@@ -4,6 +4,7 @@ import type {
   UserInputAttachments,
 } from "@t3tools/contracts";
 import { Image, Linking, Pressable, View } from "react-native";
+import { getQuestionAnswerText } from "@t3tools/client-runtime/work-log/user-input";
 import { AppText as Text } from "../../components/AppText";
 import { useAssetUrl } from "../../state/assets";
 
@@ -41,6 +42,7 @@ export function QuestionAnswerHistory(props: {
     <View className="gap-2">
       {[
         ...new Set([
+          ...Object.keys(props.answer.questionTextById ?? {}),
           ...Object.keys(props.answer.answers),
           ...Object.keys(props.answer.attachmentsByQuestionId),
         ]),
@@ -51,12 +53,11 @@ export function QuestionAnswerHistory(props: {
               {props.answer.questionTextById[questionId]}
             </Text>
           ) : null}
-          <Text className="text-sm text-foreground">
-            {[props.answer.answers[questionId]]
-              .flat()
-              .filter((value): value is string => typeof value === "string")
-              .join(", ")}
-          </Text>
+          {getQuestionAnswerText(props.answer.answers[questionId]) ? (
+            <Text className="ml-3 text-sm text-foreground-muted">
+              {getQuestionAnswerText(props.answer.answers[questionId])}
+            </Text>
+          ) : null}
           {(props.answer.attachmentsByQuestionId[questionId] ?? []).map((attachment) => (
             <AnswerFile
               key={attachment.id}

apps/mobile/src/features/threads/ThreadComposer.tsx

@@ -1863,22 +1863,24 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
                         onPress={() => setQuickQuestionOpenScopeKey(quickQuestionScopeKey)}
                       />
                     ) : null}
-                    <ComposerInlineControl
-                      accessibilityLabel="Model and reasoning settings"
-                      emphasized
-                      iconNode={
-                        <ProviderIcon provider={currentModelOption?.providerDriver} size={16} />
-                      }
-                      label={currentModelOption?.label ?? currentModelSelection.model}
-                      maxWidth={152}
-                      disabled={props.sessionInputBlocked}
-                      accessibilityHint={
-                        props.sessionInputBlocked
-                          ? "Provider changes are blocked while this thread has a pending safety operation"
-                          : undefined
-                      }
-                      onPress={openSettings}
-                    />
+                    <View className="min-w-0 shrink">
+                      <ComposerInlineControl
+                        accessibilityLabel="Model and reasoning settings"
+                        emphasized
+                        iconNode={
+                          <ProviderIcon provider={currentModelOption?.providerDriver} size={16} />
+                        }
+                        label={currentModelOption?.label ?? currentModelSelection.model}
+                        maxWidth="100%"
+                        disabled={props.sessionInputBlocked}
+                        accessibilityHint={
+                          props.sessionInputBlocked
+                            ? "Provider changes are blocked while this thread has a pending safety operation"
+                            : undefined
+                        }
+                        onPress={openSettings}
+                      />
+                    </View>
                     {sessionHarnessRefinementActions.length > 0 ? (
                       <ControlPillMenu
                         title="Local harness"

apps/mobile/src/features/threads/thread-work-log.tsx

@@ -1,4 +1,8 @@
 import { QuestionAnswerHistory } from "./QuestionAnswerHistory";
+import {
+  getQuestionAnswerPreview,
+  hasQuestionAnswer,
+} from "@t3tools/client-runtime/work-log/user-input";
 import * as Haptics from "expo-haptics";
 import { Image } from "expo-image";
 import { type AppSymbolName, SymbolView } from "../../components/AppSymbol";
@@ -741,6 +745,10 @@ const ThreadWorkLogRow = memo(function ThreadWorkLogRow(
   const viewedImagePath = workEntryViewedImagePath(row.workEntry);
   const toolPresentation = resolveWorkEntryToolPresentation(row.workEntry);
   const previewText = workEntryRowLabel(row.workEntry);
+  const answerPreview = row.workEntry.questionAnswer
+    ? getQuestionAnswerPreview(row.workEntry.questionAnswer)
+    : null;
+  const accessiblePreview = [previewText, answerPreview].filter(Boolean).join(": ");
   const displayText = workEntryRowLabel(row.workEntry, expanded);
   const failed = row.status === "failure";
   const iconIsDestructive = row.icon === "alert" || failed;
@@ -756,7 +764,7 @@ const ThreadWorkLogRow = memo(function ThreadWorkLogRow(
     >
       <Pressable
         accessibilityRole={canExpand ? "button" : undefined}
-        accessibilityLabel={failed ? `${previewText}, tool call failed` : previewText}
+        accessibilityLabel={failed ? `${accessiblePreview}, tool call failed` : accessiblePreview}
         accessibilityHint={
           canExpand
             ? `Double tap to ${expanded ? "hide" : "show"} full details. Long press to copy.`
@@ -822,6 +830,17 @@ const ThreadWorkLogRow = memo(function ThreadWorkLogRow(
                 numberOfLines={expanded ? undefined : 1}
               >
                 {displayText}
+                {answerPreview ? (
+                  <Text
+                    className={
+                      !expanded &&
+                      row.workEntry.questionAnswer &&
+                      hasQuestionAnswer(row.workEntry.questionAnswer)
+                        ? "text-foreground"
+                        : "text-foreground-subtle"
+                    }
+                  >{`  ${answerPreview}`}</Text>
+                ) : null}
               </Text>
             </>
           )}

apps/mobile/src/features/usage/UsageRouteScreen.tsx

@@ -2,6 +2,7 @@ import { EnvironmentId, USAGE_CONTRACT_VERSION } from "@t3tools/contracts";
 import { useNavigation } from "@react-navigation/native";
 import {
   isCompatibleUsageContractVersion,
+  isModelCostUnknown,
   type DailyTotals,
   type MergedUsage,
 } from "@t3tools/shared/usageMerge";
@@ -607,10 +608,14 @@ function ModelsSection(props: { readonly merged: MergedUsage }) {
               {model.model}
             </Text>
             <Text className="text-sm text-foreground-muted">
-              {formatPercent(model.costShare)} of cost · {formatTokens(model.totalTokens)} tokens
+              {isModelCostUnknown(model)
+                ? `no known rates · ${formatTokens(model.totalTokens)} tokens`
+                : `${formatPercent(model.costShare)} of cost · ${formatTokens(model.totalTokens)} tokens`}
             </Text>
           </View>
-          <Text className="text-base tabular-nums text-foreground">{formatUsd(model.costUsd)}</Text>
+          <Text className="text-base tabular-nums text-foreground">
+            {isModelCostUnknown(model) ? "Unpriced" : formatUsd(model.costUsd)}
+          </Text>
         </View>
       ))}
     </SettingsSection>

apps/mobile/src/lib/threadActivity.ts

@@ -1,4 +1,5 @@
 import * as Option from "effect/Option";
+import { foldUserInputActivities } from "@t3tools/client-runtime/work-log/user-input";
 import * as Schema from "effect/Schema";
 import {
   requestKindFromRequestType,
@@ -414,7 +415,7 @@ function deriveWorkLogEntries(
 ): DerivedWorkLogEntry[] {
   const ordered = Arr.sort(activities, activityOrder);
   const entries: DerivedWorkLogEntry[] = [];
-  for (const activity of ordered) {
+  for (const activity of foldUserInputActivities(ordered)) {
     if (activity.tone !== "error" && isWorktreeSetupActivity(activity.kind)) continue;
     if (activity.kind === "tool.started") continue;
     // Like web: an agent's task.started row anchors its batch. It has a fixed
@@ -959,6 +960,7 @@ function workEntryStatus(entry: WorkLogEntry): ThreadFeedActivity["status"] {
 function workEntryIcon(entry: DerivedWorkLogEntry): ThreadFeedActivity["icon"] {
   if (entry.agentSpawn) return "agent";
   if (
+    entry.questionAnswer ||
     entry.sourceActivityKind === "user-input.requested" ||
     entry.sourceActivityKind === "user-input.resolved"
   ) {
@@ -2232,31 +2234,40 @@ export function buildThreadFeed(
   const oldestLoadedMessageCreatedAt =
     options?.loadedMessages !== undefined ? (loadedMessages[0]?.createdAt ?? null) : null;
   const reportedTurnCosts = deriveReportedTurnCosts(thread.activities);
-  const activityEntries = getThreadFeedActivityEntries(thread.activities);
+  const activityEntries = getThreadFeedActivityEntries(thread.activities).filter(
+    (entry) =>
+      oldestLoadedMessageCreatedAt === null || entry.createdAt >= oldestLoadedMessageCreatedAt,
+  );
+  const foldedAnswerMessageIds = new Set(
+    activityEntries.flatMap((entry) =>
+      entry.activity.workEntry.questionAnswer
+        ? [`async-answer:${entry.activity.workEntry.questionAnswer.requestId}`]
+        : [],
+    ),
+  );
   const entries = Arr.sortWith(
     [
-      ...messages.map((message) => {
-        const reportedCostLabel =
-          message.role === "assistant" && message.turnId !== null
-            ? (formatReportedTurnCost(reportedTurnCosts.get(message.turnId) ?? -1) ?? undefined)
-            : undefined;
-        let entry = messageEntriesCache.get(message);
-        if (!entry || entry.reportedCostLabel !== reportedCostLabel) {
-          entry = {
-            type: "message",
-            id: message.id,
-            createdAt: message.createdAt,
-            message,
-            reportedCostLabel,
-          };
-          messageEntriesCache.set(message, entry);
-        }
-        return entry;
-      }),
-      ...activityEntries.filter(
-        (entry) =>
-          oldestLoadedMessageCreatedAt === null || entry.createdAt >= oldestLoadedMessageCreatedAt,
-      ),
+      ...messages
+        .filter((message) => message.role !== "user" || !foldedAnswerMessageIds.has(message.id))
+        .map((message) => {
+          const reportedCostLabel =
+            message.role === "assistant" && message.turnId !== null
+              ? (formatReportedTurnCost(reportedTurnCosts.get(message.turnId) ?? -1) ?? undefined)
+              : undefined;
+          let entry = messageEntriesCache.get(message);
+          if (!entry || entry.reportedCostLabel !== reportedCostLabel) {
+            entry = {
+              type: "message",
+              id: message.id,
+              createdAt: message.createdAt,
+              message,
+              reportedCostLabel,
+            };
+            messageEntriesCache.set(message, entry);
+          }
+          return entry;
+        }),
+      ...activityEntries,
     ],
     (s) => new Date(s.createdAt),
     Order.Date,

apps/server/src/orchestration/ActivityPayloadProjection.test.ts

@@ -21,6 +21,37 @@ function activity(payload: Record<string, unknown>): OrchestrationThreadActivity
  * assertions are the tripwire.
  */
 describe("projectActivityPayload", () => {
+  it.each(["mcp_tool_call", "dynamic_tool_call"])(
+    "keeps question matching text through %s payload slimming without duplicating choices",
+    (itemType) => {
+      const projected = projectActivityPayload(
+        activity({
+          itemType,
+          title: "mcp__pylon__request_user_input_async",
+          data: {
+            input: {
+              questions: [
+                {
+                  id: "target",
+                  question: "Where should this run?",
+                  options: [{ label: "Local", value: "local" }],
+                },
+              ],
+            },
+          },
+        }),
+      );
+      expect(projected.payload).toMatchObject({
+        data: {
+          toolName: "mcp__pylon__request_user_input_async",
+          input: { questions: [{ question: "Where should this run?" }] },
+        },
+      });
+      expect(JSON.stringify(projected.payload)).not.toContain('"options"');
+      expect(projectActivityPayload(projected)).toEqual(projected);
+    },
+  );
+
   it("preserves tool attribution (agentId/parentToolUseId) through data slimming", () => {
     const projected = projectActivityPayload(
       activity({

apps/server/src/orchestration/ActivityPayloadProjection.ts

@@ -1,3 +1,4 @@
+import { projectQuestionToolInput } from "@t3tools/shared/toolActivity";
 import type {
   OrchestrationEvent,
   OrchestrationThreadActivity,
@@ -370,18 +371,19 @@ export function projectActivityPayload(
     payload.status === "completed" && (itemStatus === "failed" || itemStatus === "declined")
       ? { ...payload, status: itemStatus }
       : payload;
+  const questionInput = projectQuestionToolInput(data, payload.title);
 
   if (payload.itemType === "mcp_tool_call") {
     return {
       ...activity,
       payload: {
         ...projectedPayload,
-        data: projectMcpToolCallData(data),
+        data: { ...projectMcpToolCallData(data), ...questionInput },
       },
     };
   }
 
-  const projectedData: Record<string, unknown> = {};
+  const projectedData: Record<string, unknown> = { ...questionInput };
   const item = projectCommandData(data);
   if (item) {
     projectedData.item = item;

apps/web/package.json

@@ -36,6 +36,8 @@
     "class-variance-authority": "^0.7.1",
     "culori": "^4.0.2",
     "effect": "catalog:",
+    "hast-util-to-html": "^9.0.5",
+    "hast-util-to-jsx-runtime": "^2.3.6",
     "heic-to": "^1.5.2",
     "jose": "catalog:",
     "jsonc-parser": "3.3.1",
@@ -61,6 +63,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/compression": "^1.8.1",
     "@types/culori": "^4.0.1",
+    "@types/mdast": "^4.0.4",
     "@types/react": "~19.2.14",
     "@types/react-dom": "~19.2.3",
     "@types/react-test-renderer": "19.1.0",
@@ -70,6 +73,7 @@
     "compression": "^1.8.1",
     "react-test-renderer": "19.2.6",
     "tailwindcss": "^4.0.0",
+    "unified": "^11.0.5",
     "vite": "catalog:",
     "vite-plus": "catalog:"
   }