@agent-native/toolkit 0.228.0-nightly-20261111212500 → 0.228.0

package/src/app/chat/agentkit-chat/labels.ts

@@ -0,0 +1,259 @@
+import type { useFormatters, useT } from "@agent-native/core/client/i18n";
+
+import type { AgentKitLabels } from "../../agentkit/react/context.js";
+import {
+  agentKitQuestionLabels,
+  agentKitWorkStepLabels,
+} from "./work-step-labels.js";
+
+/** Both Chat roots, the sidebar and the /chat route, spread these labels. */
+export function agentKitChatLabels(
+  t: ReturnType<typeof useT>,
+  formatDate: ReturnType<typeof useFormatters>["formatDate"],
+): Partial<AgentKitLabels> {
+  return {
+    conversation: t("agentChat.message.messages"),
+    assistant: t("agentChat.common.agent"),
+    you: t("agentChat.common.you"),
+    approvalApprove: t("agentChat.approval.approve"),
+    approvalDeny: t("agentChat.approval.deny"),
+    approvalSubmit: t("agentChat.approval.submit"),
+    approvalOther: t("agentChat.approval.other"),
+    approvalOtherPlaceholder: t("agentChat.approval.otherPlaceholder"),
+    approvalPending: t("agentChat.approval.pending"),
+    approvalAnswerPending: t("agentChat.approval.answerPending"),
+    connectionConnect: t("agentChat.common.connect"),
+    connectionConnecting: t("agentChat.connection.connecting"),
+    connectionRetry: t("agentChat.common.retry"),
+    connectionConnected: t("agentChat.integrations.connectedSection"),
+    connectionNotNow: t("agentChat.connection.notNow"),
+    connectionFailed: t("agentChat.connection.failed"),
+    connectionAdminRequired: t("agentChat.connection.adminRequired"),
+    activities: t("agentChat.activity.groupLabel"),
+    activityBuckets: {
+      thinking: t("agentChat.activity.bucketThinking"),
+      research: t("agentChat.activity.bucketResearch"),
+      actions: t("agentChat.activity.bucketActions"),
+      other: t("agentChat.activity.bucketOther"),
+    },
+    agents: t("agentChat.activity.agents"),
+    tasks: t("agentChat.activity.tasks"),
+    tasksProgress: t("agentChat.activity.tasksProgress", {
+      completed: "{{completed}}",
+      total: "{{total}}",
+    }),
+    toolInput: t("agentChat.tool.input"),
+    toolResult: t("agentChat.tool.result"),
+    activityValueIdentifierHidden: t("agentChat.tool.identifierHidden"),
+    activityValueOmitted: t("agentChat.tool.contentOmitted"),
+    activityValueCircular: t("agentChat.tool.circularReference"),
+    working: t("agentChat.status.working"),
+    workingFor: t("agentChat.status.workingFor", {
+      duration: "{{duration}}",
+    }),
+    worked: t("agentChat.tool.worked"),
+    workedFor: t("agentChat.tool.workedFor", { duration: "{{duration}}" }),
+    showMoreActivities: t("agentChat.activity.showMore", {
+      count: "{{count}}",
+    }),
+    ...agentKitWorkStepLabels(t),
+    ...agentKitQuestionLabels(t),
+    durationHourShort: t("agentChat.duration.hourShort"),
+    durationMinuteShort: t("agentChat.duration.minuteShort"),
+    durationSecondShort: t("agentChat.duration.secondShort"),
+    composerLabel: t("agentChat.composer.messageAgent"),
+    composerReplyPlaceholder: t("agentChat.composer.replyPlaceholder"),
+    emptyStateText: t("agentChat.empty.prompt"),
+    queue: t("agentChat.queue.label"),
+    queueSendNow: t("agentChat.queue.sendNow"),
+    queueSendNowHint: t("agentChat.queue.sendNowHint"),
+    queueSendNext: t("agentChat.queue.sendNext"),
+    queueSendNextHint: t("agentChat.queue.sendNextHint"),
+    queueItemBusy: t("agentChat.queue.itemBusy"),
+    queueItemBlocked: t("agentChat.queue.itemBlocked"),
+    queueOrderStale: t("agentChat.queue.orderStale"),
+    queueRemove: t("agentChat.queue.remove"),
+    queueMore: t("agentChat.queue.moreActions"),
+    suggestions: t("agentChat.composer.suggestedPrompts"),
+    copy: t("agentChat.message.copyMessage"),
+    copied: t("agentChat.common.copied"),
+    messageActions: t("agentChat.message.actions"),
+    copyRequestId: t("agentChat.message.copyRequestId"),
+    usage: t("agentChat.message.usage"),
+    usageLoading: t("agentChat.message.usageLoading"),
+    usageUnavailable: t("agentChat.message.usageUnavailable"),
+    usageNotRecorded: t("agentChat.message.usageNotRecorded"),
+    usageIncomplete: t("agentChat.message.usageIncomplete"),
+    usageReportedCost: t("agentChat.message.usageReportedCost", {
+      amount: "{{amount}}",
+    }),
+    usageEstimatedCost: t("agentChat.message.usageEstimatedCost", {
+      amount: "{{amount}}",
+    }),
+    usageMixedCost: t("agentChat.message.usageMixedCost", {
+      amount: "{{amount}}",
+    }),
+    usageBuilderCredits: t("agentChat.message.usageBuilderCredits", {
+      amount: "{{amount}}",
+    }),
+    usageEstimatedBuilderCredits: t(
+      "agentChat.message.usageEstimatedBuilderCredits",
+      { amount: "{{amount}}" },
+    ),
+    usageMixedBuilderCredits: t("agentChat.message.usageMixedBuilderCredits", {
+      amount: "{{amount}}",
+    }),
+    requestIdUnavailable: t("agentChat.message.requestIdUnavailable"),
+    runDetails: t("agentChat.message.runDetails"),
+    runCreditsUsed: t("agentChat.message.creditsUsed"),
+    runCost: t("agentChat.message.cost"),
+    runToolCalls: t("agentChat.message.toolCalls"),
+    runModel: t("agentChat.message.modelUsed"),
+    runDetailUnavailable: t("agentChat.message.detailUnavailable"),
+    runDetailNotRecorded: t("agentChat.message.notRecorded"),
+    runDetailIncomplete: t("agentChat.message.incomplete"),
+    runDetailEstimated: t("agentChat.message.estimatedAmount", {
+      amount: "{{amount}}",
+    }),
+    runDetailMixed: t("agentChat.message.mixedAmount", {
+      amount: "{{amount}}",
+    }),
+    suggestedActions: t("agentChat.composer.suggestedActions"),
+    messageUnavailable: t("agentChat.message.unavailable"),
+    navigationUnavailable: t("agentChat.message.navigationUnavailable"),
+    copyUnavailable: t("agentChat.recovery.copyFailed"),
+    positiveFeedback: t("agentChat.feedback.thumbsUp"),
+    negativeFeedback: t("agentChat.feedback.notHelpful"),
+    feedbackSubmitted: t("agentChat.feedback.submitted"),
+    feedbackWhatWentWrong: t("agentChat.feedback.whatWentWrong"),
+    feedbackPlaceholder: t("agentChat.feedback.placeholder"),
+    feedbackKeyboardHint: t("agentChat.feedback.keyboardHint", {
+      shortcut: "{{shortcut}}",
+    }),
+    feedbackSubmit: t("agentChat.feedback.submit"),
+    feedbackReasonMisread: t("agentChat.feedback.reasonMisread"),
+    feedbackReasonNotDone: t("agentChat.feedback.reasonNotDone"),
+    feedbackReasonWrongNumbers: t("agentChat.feedback.reasonWrongNumbers"),
+    feedbackReasonTooSlow: t("agentChat.feedback.tooSlow"),
+    feedbackCopyDetails: t("agentChat.feedback.copyDetails"),
+    feedback: t("agentChat.feedback.label"),
+    feedbackGood: t("agentChat.feedback.goodResponse"),
+    feedbackBad: t("agentChat.feedback.badResponse"),
+    rateResponse: t("agentChat.feedback.rate"),
+    forkFromHere: t("agentChat.message.forkFromHere"),
+    feedbackNote: t("agentChat.feedback.note"),
+    moreMessageActions: t("agentChat.message.moreActions"),
+    fewerMessageActions: t("agentChat.message.fewerActions"),
+    fork: t("agentChat.message.forkChat"),
+    previousBranch: t("agentChat.message.previousBranch"),
+    nextBranch: t("agentChat.message.nextBranch"),
+    branchPosition: "{{index}}/{{count}}",
+    error: t("agentChat.error.failed"),
+    renderError: t("agentChat.error.render"),
+    runFailed: t("agentChat.error.failed"),
+    continueRun: t("agentChat.common.continue"),
+    continueRunUnavailable: t("agentChat.recovery.continueUnavailable"),
+    reconnect: t("agentChat.common.reconnect"),
+    dismissNotice: t("agentChat.common.dismiss"),
+    reasoning: t("agentChat.status.thinking"),
+    expandActivity: t("agentChat.common.expand"),
+    collapseActivity: t("agentChat.common.collapse"),
+    agentStarted: t("agentChat.agent.started"),
+    agentResumed: t("agentChat.agent.resumed"),
+    agentMessaged: t("agentChat.agent.messaged"),
+    agentDelegated: t("agentChat.agent.delegated"),
+    agentWorking: t("agentChat.agent.working"),
+    agentWorkedFor: t("agentChat.agent.workedFor", {
+      duration: "{{duration}}",
+    }),
+    agentPaused: t("agentChat.agent.paused"),
+    agentCompleted: t("agentChat.agent.completed"),
+    agentFailed: t("agentChat.agent.failed"),
+    agentClosed: t("agentChat.agent.closed"),
+    editMessage: t("agentChat.message.edit"),
+    editingMessage: t("agentChat.message.editing"),
+    editingMessageHint: t("agentChat.message.editingHint"),
+    cancelEditing: t("agentChat.common.cancel"),
+    regenerateResponse: t("agentChat.common.retry"),
+    expandMessage: t("agentChat.common.expand"),
+    collapseMessage: t("agentChat.common.collapse"),
+    previewAttachment: t("agentChat.composer.previewAttachment", {
+      name: "{{name}}",
+    }),
+    pastedText: t("agentChat.pastedText.title"),
+    attachmentNotSaved: t("agentChat.composer.attachmentNotSaved"),
+    imagePreview: t("agentChat.composer.imagePreview"),
+    closePreview: t("agentChat.composer.closePreview"),
+    dropFilesToAttach: t("agentChat.composer.dropToAttach"),
+    dropFileFailed: t("agentChat.composer.droppedFileError"),
+    scrollToBottom: t("agentChat.composer.scrollToBottom"),
+    skipToComposer: t("agentChat.composer.skipToMessageBox"),
+    stop: t("agentChat.composer.stop"),
+    copyCode: t("agentChat.message.copyCode"),
+    codeCopied: t("agentChat.message.codeCopied"),
+    codeBlock: t("agentChat.message.codeBlock"),
+    codeBlockLanguage: t("agentChat.message.codeBlockLanguage", {
+      language: "{{language}}",
+    }),
+    table: t("agentChat.message.table"),
+    runStopped: t("agentChat.message.runStopped"),
+    responseReady: t("agentChat.message.responseReady"),
+    responseFailed: t("agentChat.message.responseFailed"),
+    waitingForApproval: t("agentChat.message.waitingForApproval"),
+    waitingForInput: t("agentChat.message.waitingForInput"),
+    workSummaryFailedCount: t("agentChat.message.workSummaryFailedCount", {
+      summary: "{{summary}}",
+      count: "{{count}}",
+    }),
+    taskStatusPending: t("agentChat.message.taskStatusPending"),
+    taskStatusRunning: t("agentChat.message.taskStatusRunning"),
+    taskStatusCompleted: t("agentChat.message.taskStatusCompleted"),
+    taskStatusFailed: t("agentChat.message.taskStatusFailed"),
+    taskStatusAwaitingInput: t("agentChat.message.taskStatusAwaitingInput"),
+    untitledTask: t("agentChat.message.untitledTask"),
+    connectionConnectProvider: t("agentChat.message.connectProvider", {
+      provider: "{{provider}}",
+    }),
+    connectionDeclined: t("agentChat.message.connectionDeclined", {
+      provider: "{{provider}}",
+    }),
+    connectionAdminRequiredTitle: t(
+      "agentChat.message.connectionAdminRequiredTitle",
+      { provider: "{{provider}}" },
+    ),
+    branchPositionLabel: t("agentChat.message.branchPositionLabel", {
+      index: "{{index}}",
+      count: "{{count}}",
+    }),
+    taskListChecked: t("agentChat.message.taskListChecked"),
+    taskListUnchecked: t("agentChat.message.taskListUnchecked"),
+    threadUnavailable: t("agentChat.message.threadNotFound"),
+    newChat: t("agentChat.tabs.newChat"),
+    loadingConversation: t("agentChat.empty.loadingChat"),
+    formatTimestamp: (createdAt: string) => {
+      const date = new Date(createdAt);
+      if (Number.isNaN(date.getTime())) return createdAt;
+      const now = new Date();
+      const yesterday = new Date(now);
+      yesterday.setDate(now.getDate() - 1);
+      const time = formatDate(date, {
+        hour: "numeric",
+        minute: "2-digit",
+      });
+      const sameDay = (left: Date, right: Date) =>
+        left.getFullYear() === right.getFullYear() &&
+        left.getMonth() === right.getMonth() &&
+        left.getDate() === right.getDate();
+      if (sameDay(date, now)) return time;
+      if (sameDay(date, yesterday)) {
+        return `${t("agentChat.history.yesterday")} ${time}`;
+      }
+      return formatDate(date, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      });
+    },
+  };
+}

package/src/app/chat/agentkit-chat/questions.ts

@@ -1,5 +1,7 @@
 export {
+  GuidedQuestionCard,
   GuidedQuestionFlow,
   GuidedQuestionProviderGate,
   useGuidedQuestionFlow,
+  useRefetchGuidedQuestionsWhenAsked,
 } from "./guided-questions.js";

package/src/app/chat/agentkit-chat/root.spec.tsx

@@ -13,6 +13,7 @@ const mocks = vi.hoisted(() => ({
 
 vi.mock("@agent-native/core/client/i18n", () => ({
   useT: () => (key: string) => key,
+  useFormatters: () => ({ formatDate: (date: Date) => date.toISOString() }),
 }));
 
 vi.mock("@agent-native/core/client/hooks", () => ({
@@ -72,6 +73,23 @@ describe("CoreAgentKitRoot", () => {
     });
   });
 
+  it("localizes the same AgentKit copy as the sidebar chat", () => {
+    renderToStaticMarkup(
+      <CoreAgentKitRoot transport={transport} threadId="thread-1" />,
+    );
+
+    expect(mocks.rootProps?.labels).toMatchObject({
+      agentDelegated: "agentChat.agent.delegated",
+      agentWorking: "agentChat.agent.working",
+      tasksProgress: "agentChat.activity.tasksProgress",
+      negativeFeedback: expect.stringMatching(/^agentChat\./),
+      queueSendNow: expect.stringMatching(/^agentChat\./),
+      question: "agentChat.guided.question",
+      threadLoadFailed: "agentChat.message.threadLoadFailed",
+      composerPlaceholder: "agentChat.composer.newChatPlaceholder",
+    });
+  });
+
   it("reports the model the run's calls recorded, and none for the store's unknown", async () => {
     renderToStaticMarkup(
       <CoreAgentKitRoot transport={transport} threadId="thread-1" />,

package/src/app/chat/agentkit-chat/root.tsx

@@ -4,7 +4,7 @@ import {
   clearAgentNativeAgentKitUploads,
 } from "@agent-native/core/client/agentkit-chat/transport";
 import { callAction } from "@agent-native/core/client/hooks";
-import { useT } from "@agent-native/core/client/i18n";
+import { useFormatters, useT } from "@agent-native/core/client/i18n";
 import { readFileUploadStatus } from "@agent-native/core/client/uploads";
 import { useSession } from "@agent-native/core/client/use-session";
 import { useMemo, useEffect } from "react";
@@ -15,7 +15,7 @@ import type { AgentKitRootProps } from "../../agentkit/react/root.js";
 import { FileStorageSetupPopover } from "../FileStorageSetupPopover.js";
 import { AgentKitActionWidget } from "./action-widget.js";
 import { CoreAgentKitApproval } from "./approval-card.js";
-import { agentKitWorkStepLabels } from "./work-step-labels.js";
+import { agentKitChatLabels } from "./labels.js";
 
 // Every agent-native app serves this framework action, so run details can
 // show credits and the model that ran without each host wiring a loader.
@@ -39,6 +39,7 @@ function coreModelDisplayName(model: string): string {
 
 export function CoreAgentKitRoot(props: AgentKitRootProps) {
   const t = useT();
+  const { formatDate } = useFormatters();
   const nativeUpload = props.transport
     ? getAgentNativeAgentKitUploadDriver(props.transport)
     : undefined;
@@ -117,75 +118,15 @@ export function CoreAgentKitRoot(props: AgentKitRootProps) {
     }),
     [props.slots],
   );
-  // Thread-load states, the empty greeting, the default approval card and the
-  // reply footer render for any host, so their copy is localized here rather
-  // than left to each host.
   const labels = useMemo(
     () => ({
-      threadUnavailable: t("agentChat.message.threadNotFound"),
+      ...agentKitChatLabels(t, formatDate),
       threadLoadFailed: t("agentChat.message.threadLoadFailed"),
       threadLoadRetry: t("agentChat.common.retry"),
-      newChat: t("agentChat.tabs.newChat"),
-      loadingConversation: t("agentChat.empty.loadingChat"),
-      emptyStateText: t("agentChat.empty.prompt"),
       composerPlaceholder: t("agentChat.composer.newChatPlaceholder"),
-      composerReplyPlaceholder: t("agentChat.composer.replyPlaceholder"),
-      worked: t("agentChat.tool.worked"),
-      workedFor: t("agentChat.tool.workedFor", { duration: "{{duration}}" }),
-      showMoreActivities: t("agentChat.activity.showMore", {
-        count: "{{count}}",
-      }),
-      ...agentKitWorkStepLabels(t),
-      approvalApprove: t("agentChat.approval.approve"),
-      approvalDeny: t("agentChat.approval.deny"),
-      approvalSubmit: t("agentChat.approval.submit"),
-      approvalOther: t("agentChat.approval.other"),
-      approvalOtherPlaceholder: t("agentChat.approval.otherPlaceholder"),
-      approvalPending: t("agentChat.approval.pending"),
-      approvalAnswerPending: t("agentChat.approval.answerPending"),
-      messageActions: t("agentChat.message.actions"),
-      moreMessageActions: t("agentChat.message.moreActions"),
-      fewerMessageActions: t("agentChat.message.fewerActions"),
-      copyRequestId: t("agentChat.message.copyRequestId"),
-      copy: t("agentChat.message.copyMessage"),
-      copied: t("agentChat.common.copied"),
-      runDetails: t("agentChat.message.runDetails"),
-      runCreditsUsed: t("agentChat.message.creditsUsed"),
-      runCost: t("agentChat.message.cost"),
-      runToolCalls: t("agentChat.message.toolCalls"),
-      runModel: t("agentChat.message.modelUsed"),
-      runDetailUnavailable: t("agentChat.message.detailUnavailable"),
-      runDetailNotRecorded: t("agentChat.message.notRecorded"),
-      runDetailIncomplete: t("agentChat.message.incomplete"),
-      runDetailEstimated: t("agentChat.message.estimatedAmount", {
-        amount: "{{amount}}",
-      }),
-      runDetailMixed: t("agentChat.message.mixedAmount", {
-        amount: "{{amount}}",
-      }),
-      regenerateResponse: t("agentChat.common.retry"),
-      suggestedActions: t("agentChat.composer.suggestedActions"),
-      fork: t("agentChat.message.forkChat"),
-      editMessage: t("agentChat.message.edit"),
-      editingMessage: t("agentChat.message.editing"),
-      editingMessageHint: t("agentChat.message.editingHint"),
-      cancelEditing: t("agentChat.common.cancel"),
-      feedback: t("agentChat.feedback.label"),
-      feedbackGood: t("agentChat.feedback.goodResponse"),
-      feedbackBad: t("agentChat.feedback.badResponse"),
-      rateResponse: t("agentChat.feedback.rate"),
-      forkFromHere: t("agentChat.message.forkFromHere"),
-      feedbackNote: t("agentChat.feedback.note"),
-      feedbackSubmit: t("agentChat.feedback.submit"),
-      feedbackSubmitted: t("agentChat.feedback.submitted"),
-      runFailed: t("agentChat.error.failed"),
-      continueRun: t("agentChat.common.continue"),
-      continueRunUnavailable: t("agentChat.recovery.continueUnavailable"),
-      reconnect: t("agentChat.common.reconnect"),
-      dismissNotice: t("agentChat.common.dismiss"),
       ...props.labels,
     }),
-    [props.labels, t],
+    [formatDate, props.labels, t],
   );
   const rootProps: AgentKitRootProps = props.controller
     ? props

package/src/app/chat/agentkit-chat/work-step-labels.ts

@@ -23,6 +23,23 @@ export function agentKitWorkStepLabels(
     workStepReadPagesOther: t("agentChat.workSteps.readPagesOther", count),
     workStepFetchedOne: t("agentChat.workSteps.fetchedOne"),
     workStepFetchedOther: t("agentChat.workSteps.fetchedOther", count),
+    workStepSourcesOne: t("agentChat.workSteps.sourcesOne"),
+    workStepSourcesOther: t("agentChat.workSteps.sourcesOther", count),
+    workStepFrameworkFrames: t("agentChat.workSteps.frameworkFrames", count),
+    workStepCopyStackTrace: t("agentChat.workSteps.copyStackTrace"),
+    workStepTerminalExitCode: t("agentChat.toolCells.exitCode", {
+      code: "{{code}}",
+    }),
+    workStepTerminalTimedOut: t("agentChat.toolCells.timedOut"),
+    workStepTerminalEarlierLines: t(
+      "agentChat.toolCells.showEarlierLines",
+      count,
+    ),
+    workStepCopyOutput: t("agentChat.toolCells.copyOutput"),
+    workStepFilePartial: t("agentChat.toolCells.partial"),
+    workStepFileMoreLines: t("agentChat.toolCells.showMoreLines", count),
+    workStepLineAdded: t("agentChat.toolCells.lineAdded"),
+    workStepLineRemoved: t("agentChat.toolCells.lineRemoved"),
     workStepReadFilesOne: t("agentChat.workSteps.readFilesOne"),
     workStepReadFilesOther: t("agentChat.workSteps.readFilesOther", count),
     workStepEditedOne: t("agentChat.workSteps.editedOne"),
@@ -42,3 +59,28 @@ export function agentKitWorkStepLabels(
     workStepRunningActions: t("agentChat.workSteps.runningActions"),
   };
 }
+
+type QuestionLabelKey = Extract<keyof AgentKitLabels, `question${string}`>;
+
+export function agentKitQuestionLabels(
+  t: ReturnType<typeof useT>,
+): Pick<AgentKitLabels, QuestionLabelKey> {
+  const progress = { current: "{{current}}", total: "{{total}}" };
+  return {
+    question: t("agentChat.guided.question"),
+    questionProgress: t("agentChat.guided.questionProgress", progress),
+    questionProgressLabel: t(
+      "agentChat.guided.questionProgressLabel",
+      progress,
+    ),
+    questionOwnResponse: t("agentChat.guided.ownResponse"),
+    questionAnswer: t("agentChat.guided.typeAnswer"),
+    questionSkip: t("agentChat.guided.skip"),
+    questionNext: t("agentChat.guided.next"),
+    questionSend: t("agentChat.guided.send"),
+    questionRecommended: t("agentChat.guided.recommended"),
+    questionDismiss: t("agentChat.guided.dismiss"),
+    questionChooseFiles: t("agentChat.guided.chooseFiles"),
+    questionRemoveFile: t("agentChat.guided.removeFile", { name: "{{name}}" }),
+  };
+}

package/src/app/chat/chat/markdown-renderer.tsx

@@ -21,6 +21,7 @@ import {
   useBufferedAgentText,
   useStreamingRevealOrigin,
 } from "../../agentkit/react/streaming-text.js";
+import { loadCodeHighlighter } from "../../code-highlighter.js";
 import { HighlightedCodeBlock as SharedHighlightedCodeBlock } from "../HighlightedCodeBlock.js";
 import { IframeEmbed, parseEmbedBody } from "./IframeEmbed.js";
 import {
@@ -79,65 +80,7 @@ export function onMarkdownReady(fn: () => void): () => void {
 
 loadMarkdown();
 
-// ─── Lazy shiki highlighter ──────────────────────────────────────────────────
-// Using the fine-grained API so we only ship the languages and themes we
-// actually use (instead of shiki's full ~30 MB bundle of every grammar).
-// Required to keep the Cloudflare Pages Functions bundle under 25 MiB.
-
-type ShikiHighlighter = {
-  codeToHtml: (
-    code: string,
-    options: {
-      lang: string;
-      themes: { light: string; dark: string };
-      defaultColor?: false | "light" | "dark";
-    },
-  ) => string | Promise<string>;
-  getLoadedLanguages: () => string[];
-};
-
-let highlighterLoader: Promise<ShikiHighlighter> | null = null;
-export function loadHighlighter(): Promise<ShikiHighlighter> {
-  if (!highlighterLoader) {
-    highlighterLoader = (async () => {
-      // Use the JavaScript regex engine instead of Oniguruma WASM (~608 KB saved).
-      // forgiving:true degrades unsupported patterns gracefully instead of throwing.
-      const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] =
-        await Promise.all([
-          import("shiki/core"),
-          import("shiki/engine/javascript"),
-        ]);
-      return createHighlighterCore({
-        themes: [
-          import("shiki/themes/github-light-default.mjs"),
-          import("shiki/themes/github-dark-default.mjs"),
-        ],
-        langs: [
-          import("shiki/langs/javascript.mjs"),
-          import("shiki/langs/typescript.mjs"),
-          import("shiki/langs/jsx.mjs"),
-          import("shiki/langs/tsx.mjs"),
-          import("shiki/langs/json.mjs"),
-          import("shiki/langs/css.mjs"),
-          import("shiki/langs/html.mjs"),
-          import("shiki/langs/markdown.mjs"),
-          import("shiki/langs/bash.mjs"),
-          import("shiki/langs/shellscript.mjs"),
-          import("shiki/langs/python.mjs"),
-          import("shiki/langs/yaml.mjs"),
-          import("shiki/langs/sql.mjs"),
-        ],
-        engine: createJavaScriptRegexEngine({ forgiving: true }),
-      }) as unknown as Promise<ShikiHighlighter>;
-    })().catch((error) => {
-      // Reset on failure so a future code block can retry instead of
-      // silently failing forever on a stale chunk / network blip.
-      highlighterLoader = null;
-      throw error;
-    });
-  }
-  return highlighterLoader;
-}
+export const loadHighlighter = loadCodeHighlighter;
 
 // ─── Streaming context ───────────────────────────────────────────────────────
 // Declared at module level so HighlightedCodeBlock (used in markdownComponents

package/src/app/chat/chat/tool-call-display.spec.tsx

@@ -152,6 +152,15 @@ const mcpApp: AgentMcpAppPayload = {
   toolResult: {},
 };
 
+// The summary's trace line is `display: contents`: its parts are the row's.
+function summaryParts(summary: Element | null | undefined): Element[] {
+  return Array.from(summary?.children ?? []).flatMap((child) =>
+    child.classList.contains("agentkit-trace-line")
+      ? Array.from(child.children)
+      : [child],
+  );
+}
+
 describe("ToolCallDisplay native renderers", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -529,7 +538,12 @@ describe("ToolCallDisplay native renderers", () => {
       "button[aria-expanded]",
     );
     expect(disclosure?.getAttribute("aria-expanded")).toBe("false");
-    expect(container.textContent).not.toContain(errorMessage);
+    // Closed, the output stays in the DOM, hidden, for find-in-page.
+    expect(
+      container
+        .querySelector(".agentkit-terminal-body")
+        ?.getAttribute("hidden"),
+    ).toBe("until-found");
     expect(container.querySelector(".text-destructive")).toBeNull();
 
     act(() => disclosure?.click());
@@ -1644,13 +1658,10 @@ describe("ToolCallDisplay native renderers", () => {
       "button.agentkit-disclosure-summary",
     );
     expect(trigger?.getAttribute("aria-expanded")).toBe("false");
-    expect(trigger?.children[0]?.className).toContain(
-      "agentkit-disclosure-icon-slot",
-    );
-    expect(trigger?.children[1]?.className).toContain(
-      "agentkit-disclosure-label",
-    );
-    expect(trigger?.children[2]?.getAttribute("class")).toContain(
+    const parts = summaryParts(trigger);
+    expect(parts[0]?.className).toContain("agentkit-disclosure-icon-slot");
+    expect(parts[1]?.className).toContain("agentkit-disclosure-label");
+    expect(parts[2]?.getAttribute("class")).toContain(
       "agentkit-disclosure-chevron",
     );
 
@@ -2955,11 +2966,10 @@ describe("WorkedForSummary", () => {
 
     const button = container.querySelector("button[aria-expanded]");
     expect(button?.classList).toContain("agentkit-disclosure-summary");
-    expect(button?.children[0]?.className).toContain(
-      "agentkit-disclosure-icon-slot",
-    );
-    expect(button?.children[1]?.textContent).toBe("Worked for 5s");
-    expect(button?.children[2]?.getAttribute("class")).toContain(
+    const parts = summaryParts(button);
+    expect(parts[0]?.className).toContain("agentkit-disclosure-icon-slot");
+    expect(parts[1]?.textContent).toBe("Worked for 5s");
+    expect(parts[2]?.getAttribute("class")).toContain(
       "agentkit-disclosure-chevron",
     );
     expect(button?.getAttribute("aria-controls")).toBeNull();
@@ -3374,7 +3384,9 @@ describe("ApprovalAffordance", () => {
     ) as HTMLParagraphElement;
     const actionButtons = Array.from(approvalCard.querySelectorAll("button"));
 
-    expect(approvalCard.className).toContain("rounded-lg");
+    expect(approvalCard.className).toContain(
+      "rounded-[var(--agent-kit-radius-sm,0.5rem)]",
+    );
     expect(approvalCopy.className).toContain("font-medium");
     // The card lets the question wrap instead of truncating it.
     expect(

package/src/app/chat/chat/tool-call-display.tsx

@@ -725,7 +725,7 @@ export function ToolCallDisplay({
       {children}
     </ToolActivityPresentation>
   );
-  if (!isError && toolKind === "bash") {
+  if (toolKind === "bash") {
     return wrapToolDisplay(
       <BashCell
         meta={
@@ -733,6 +733,7 @@ export function ToolCallDisplay({
         }
         output={result}
         isRunning={effectiveIsRunning}
+        isError={isError}
       />,
     );
   }