@gram-ai/elements 1.34.0 → 1.35.0

package/src/components/ui/tool-ui.tsx

@@ -159,7 +159,11 @@ function isStructuredContent(
  * Helper Components
  * -------------------------------------------------------------------------- */
 
-function StatusIndicator({ status }: { status: ToolStatus }) {
+function StatusIndicator({
+  status,
+}: {
+  status: ToolStatus;
+}): React.JSX.Element {
   return (
     <div className={cn(statusVariants({ status }))}>
       {status === "pending" && null}
@@ -173,7 +177,7 @@ function StatusIndicator({ status }: { status: ToolStatus }) {
   );
 }
 
-function CopyButton({ content }: { content: string }) {
+function CopyButton({ content }: { content: string }): React.JSX.Element {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async (e: React.MouseEvent) => {
@@ -185,7 +189,9 @@ function CopyButton({ content }: { content: string }) {
 
   return (
     <button
-      onClick={handleCopy}
+      onClick={(e) => {
+        void handleCopy(e);
+      }}
       className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
       aria-label="Copy to clipboard"
     >
@@ -226,7 +232,7 @@ function SyntaxHighlightedCode({
   text: string;
   language?: BundledLanguage;
   className?: string;
-}) {
+}): React.JSX.Element {
   const [highlightedCode, setHighlightedCode] = useState<string | null>(null);
   const [expanded, setExpanded] = useState(false);
 
@@ -241,7 +247,7 @@ function SyntaxHighlightedCode({
     setHighlightedCode(null);
     if (!language || !canHighlight) return;
     let cancelled = false;
-    codeToHtml(displayText, {
+    void codeToHtml(displayText, {
       lang: language,
       theme: "github-dark-default",
       rootStyle: "background-color: transparent;",
@@ -370,7 +376,7 @@ function ToolUISection({
   defaultExpanded = false,
   highlightSyntax = true,
   language = "json",
-}: ToolUISectionProps) {
+}: ToolUISectionProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   // For structured content, we don't stringify it
@@ -434,7 +440,7 @@ function ToolUI({
   onApproveOnce,
   onApproveForSession,
   onDeny,
-}: ToolUIProps) {
+}: ToolUIProps): React.JSX.Element {
   // Use annotation title if available, otherwise fall back to name
   const displayName = annotations?.title || name;
   const isApprovalPending =
@@ -455,6 +461,7 @@ function ToolUI({
     if (!isApprovalPending && isExpanded && !defaultExpanded) {
       setIsExpanded(false);
     }
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- only react to approval transition; defaultExpanded/isExpanded are intentionally not deps
   }, [isApprovalPending]);
 
   // Handle approve based on selected mode
@@ -497,7 +504,9 @@ function ToolUI({
 
       {/* Tool row */}
       <button
-        onClick={() => hasContent && setIsExpanded(!isExpanded)}
+        onClick={() => {
+          if (hasContent) setIsExpanded(!isExpanded);
+        }}
         disabled={!hasContent}
         className={cn(
           "flex w-full items-center gap-2 px-4 py-3 text-left",
@@ -715,7 +724,7 @@ function ToolUIGroup({
   defaultExpanded = false,
   children,
   className,
-}: ToolUIGroupProps) {
+}: ToolUIGroupProps): React.JSX.Element {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   return (

package/src/components/ui/tooltip.tsx

@@ -9,7 +9,7 @@ import { usePortalContainer } from "@/hooks/usePortalContainer";
 function TooltipProvider({
   delayDuration = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
@@ -21,7 +21,7 @@ function TooltipProvider({
 
 function Tooltip({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -31,7 +31,7 @@ function Tooltip({
 
 function TooltipTrigger({
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
@@ -43,7 +43,7 @@ function TooltipContent({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
   container?: HTMLElement | null;
-}) {
+}): React.JSX.Element {
   const portalContainer = usePortalContainer();
   return (
     <TooltipPrimitive.Portal container={container ?? portalContainer}>

package/src/contexts/ChatIdContext.tsx

@@ -12,7 +12,7 @@ export const ChatIdContext = createContext<ChatIdContextValue | null>(null);
  *
  * @returns The current chat ID, or null if not yet initialized
  */
-export const useChatId = () => {
+export const useChatId = (): string | null => {
   const context = useContext(ChatIdContext);
   if (!context) {
     throw new Error("useChatId must be used within ElementsProvider");

package/src/contexts/ConnectionStatusContext.tsx

@@ -36,7 +36,7 @@ interface ConnectionStatusProviderProps {
 
 export const ConnectionStatusProvider = ({
   children,
-}: ConnectionStatusProviderProps) => {
+}: ConnectionStatusProviderProps): React.JSX.Element => {
   const [state, setState] = useState<ConnectionState>("connected");
   const [retryCount, setRetryCount] = useState(0);
   const [isOnline, setIsOnline] = useState(
@@ -138,7 +138,7 @@ export const ConnectionStatusProvider = ({
   );
 };
 
-export const useConnectionStatus = () => {
+export const useConnectionStatus = (): ConnectionStatusContextValue => {
   const context = useContext(ConnectionStatusContext);
   if (!context) {
     throw new Error(
@@ -153,6 +153,7 @@ export const useConnectionStatus = () => {
  * Returns null if not within a ConnectionStatusProvider (for backwards compatibility).
  */
 
-export const useConnectionStatusOptional = () => {
-  return useContext(ConnectionStatusContext);
-};
+export const useConnectionStatusOptional =
+  (): ConnectionStatusContextValue | null => {
+    return useContext(ConnectionStatusContext);
+  };

package/src/contexts/ElementsProvider.tsx

@@ -17,7 +17,6 @@ import {
   wrapToolsWithApproval,
   wrapToolsWithByteCap,
   type ApprovalHelpers,
-  type FrontendTool,
 } from "@/lib/tools";
 import { compactForModel } from "@/lib/contextCompaction";
 import { describeStreamError } from "@/lib/streamErrorMessage";
@@ -49,6 +48,8 @@ import {
   type ChatTransport,
   type UIMessage,
 } from "ai";
+
+type UIMessagePart = UIMessage["parts"][number];
 import {
   ReactNode,
   useCallback,
@@ -67,43 +68,47 @@ import { ElementsContext } from "./contexts";
 import { ToolApprovalProvider } from "./ToolApprovalContext";
 import { ToolExecutionProvider } from "./ToolExecutionContext";
 
-// Reads the active local thread id from the runtime's threads store. Reaches
-// into an assistant-ui internal that isn't part of the public type, so it's
-// isolated here as the single point of breakage if the API moves.
+// Reads the active local thread id from the runtime's threads store. Goes
+// through assistant-ui's public ThreadListRuntime.getState() API.
 function getActiveLocalThreadId(
   runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>,
 ): string | undefined {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const threadsState = (runtimeRef.current as any)?.threads?.getState?.();
-  return (threadsState?.mainThreadId ?? threadsState?.threadIds?.[0]) as
-    | string
-    | undefined;
+  const threadsState = runtimeRef.current?.threads.getState();
+  if (!threadsState) return undefined;
+  // `mainThreadId` is always populated by the SDK; the secondary read is a
+  // defensive fallback in case the SDK ever returns a state shape with an
+  // older `threadIds` field instead. The cast widens to an indexable shape
+  // because `ThreadListState` doesn't declare that historical field.
+  const legacy = (threadsState as { threadIds?: readonly string[] }).threadIds;
+  return threadsState.mainThreadId ?? legacy?.[0];
 }
 
+type ExecutableTool = {
+  execute?: (args: unknown, options?: unknown) => Promise<unknown>;
+};
+
 /**
  * Extracts executable tools from frontend tool definitions.
  * Frontend tools created via defineFrontendTool have an unstable_tool property
  * that contains the tool definition with execute function.
+ *
+ * The AI SDK's `ToolExecuteFunction<INPUT, OUTPUT>` signature is too strict on
+ * its second parameter (a typed `ToolCallOptions`) and too broad on its return
+ * (`AsyncIterable | PromiseLike | OUTPUT`) to match `ExecutableTool.execute`
+ * directly. The reference is copied as-is — no runtime wrapping — and only the
+ * type surface is widened.
  */
 function extractExecutableTools(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  frontendTools: Record<string, FrontendTool<any, any>> | undefined,
-): Record<
-  string,
-  { execute?: (args: unknown, options?: unknown) => Promise<unknown> }
-> {
+  frontendTools: Record<string, AssistantTool> | undefined,
+): Record<string, ExecutableTool> {
   if (!frontendTools) return {};
 
   return Object.fromEntries(
     Object.entries(frontendTools).map(([name, tool]) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const toolDef = (tool as any).unstable_tool;
-      return [
-        name,
-        {
-          execute: toolDef?.execute,
-        },
-      ];
+      const toolDef = tool.unstable_tool as {
+        execute?: ExecutableTool["execute"];
+      };
+      return [name, { execute: toolDef.execute }];
     }),
   );
 }
@@ -154,13 +159,14 @@ function cleanMessagesForModel(messages: UIMessage[]): UIMessage[] {
       return message;
     }
 
-    // Process each part: strip providerOptions/providerMetadata and filter reasoning
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const cleanedParts = partsArray.map((part: any) => {
-      // Strip providerOptions and providerMetadata from all remaining parts
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { callProviderMetadata: _, ...cleanPart } = part;
-      return cleanPart;
+    // Process each part: strip providerOptions/providerMetadata and filter reasoning.
+    // `callProviderMetadata` is not declared on `UIMessagePart`, so we widen the
+    // part to an indexable record just for the destructure.
+    const cleanedParts = partsArray.map((part) => {
+      const { callProviderMetadata: _omit, ...cleanPart } =
+        part as UIMessagePart & { callProviderMetadata?: unknown };
+      void _omit;
+      return cleanPart as UIMessagePart;
     });
 
     return {
@@ -218,6 +224,7 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       projectSlug: config.projectSlug,
       variant: config.variant,
     });
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- one-time init at mount; later config changes are intentionally ignored
   }, []);
 
   // Generate a stable chat ID for server-side persistence (when history is disabled)
@@ -227,7 +234,11 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
   // State to expose the current chat ID via context
   const [currentChatId, setCurrentChatId] = useState<string | null>(null);
 
-  const { data: mcpTools, mcpHeaders } = useMCPTools({
+  const {
+    data: mcpTools,
+    mcpHeaders,
+    isLoading: mcpQueryLoading,
+  } = useMCPTools({
     auth,
     mcp: config.mcp,
     mcps: config.mcps,
@@ -235,6 +246,11 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
     toolsToInclude: config.tools?.toolsToInclude,
     gramEnvironment: config.gramEnvironment,
   });
+  // Treat auth-loading as "tools not yet resolved" too — the MCP query is
+  // disabled (and so not "loading") until auth settles, so without this a
+  // tool-list consumer would briefly see an empty, settled state before tools
+  // arrive.
+  const mcpToolsLoading = auth.isLoading || mcpQueryLoading;
 
   // Store approval helpers in ref so they can be used in async contexts
   const approvalHelpersRef = useRef<ApprovalHelpers>({
@@ -522,8 +538,11 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       config.contextCompaction?.maxTokens,
       config.contextCompaction?.compactAtFraction,
       config.contextCompaction?.keepRecent,
+      config.gramEnvironment,
+      config.api?.headers,
       model,
       mcpTools,
+      mcpHeaders,
       getApprovalHelpers,
       apiUrl,
       auth.isLoading,
@@ -561,12 +580,13 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       setCurrentChatId(chatId);
     };
   }, [mcpHeaders, setCurrentChatId]);
+  const configTransport = config.transport;
   const transport = useMemo<ChatTransport<UIMessage>>(() => {
-    if (typeof config.transport === "function") {
-      return config.transport({ getChatId, adoptChatId });
+    if (typeof configTransport === "function") {
+      return configTransport({ getChatId, adoptChatId });
     }
-    return config.transport ?? defaultTransport;
-  }, [config.transport, defaultTransport, getChatId, adoptChatId]);
+    return configTransport ?? defaultTransport;
+  }, [configTransport, defaultTransport, getChatId, adoptChatId]);
 
   const historyEnabled = config.history?.enabled ?? false;
 
@@ -582,8 +602,9 @@ const ElementsProviderInner = ({ children, config }: ElementsProviderProps) => {
       setIsOpen,
       plugins,
       mcpTools,
+      mcpToolsLoading,
     }),
-    [config, model, isExpanded, isOpen, plugins, mcpTools],
+    [config, model, isExpanded, isOpen, plugins, mcpTools, mcpToolsLoading],
   );
 
   const frontendTools = config.tools?.frontendTools ?? {};
@@ -657,8 +678,7 @@ interface ElementsProviderWithHistoryProps {
   headers: Record<string, string>;
   contextValue: React.ContextType<typeof ElementsContext>;
   runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  frontendTools: Record<string, AssistantTool | FrontendTool<any, any>>;
+  frontendTools: Record<string, AssistantTool>;
   localIdToUuidMap: Map<string, string>;
   currentRemoteIdRef: React.RefObject<string | null>;
   executableTools: ExecutableToolSet;
@@ -707,6 +727,7 @@ const ElementsProviderWithHistory = ({
     localIdToUuidMap,
     threadListFilters: contextValue?.config.history?.threadListFilters,
     deferThreadIdMinting: contextValue?.config.history?.deferThreadIdMinting,
+    transformChatMessage: contextValue?.config.history?.transformChatMessage,
   });
   const initialThreadId = contextValue?.config.history?.initialThreadId;
 
@@ -714,6 +735,7 @@ const ElementsProviderWithHistory = ({
   // half-finished: the tool-result is patched in but the agent never resumes,
   // so the next user message lands on top of an unresolved tool-call sequence.
   const useChatRuntimeHook = useCallback(() => {
+    // oxlint-disable-next-line react-hooks/rules-of-hooks -- intentional: useChatRuntime is invoked by useRemoteThreadListRuntime as a hook for each thread
     return useChatRuntime({
       transport,
       sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
@@ -785,8 +807,7 @@ interface ElementsProviderWithoutHistoryProps {
   transport: ChatTransport<UIMessage>;
   contextValue: React.ContextType<typeof ElementsContext>;
   runtimeRef: React.RefObject<ReturnType<typeof useChatRuntime> | null>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  frontendTools: Record<string, AssistantTool | FrontendTool<any, any>>;
+  frontendTools: Record<string, AssistantTool>;
   executableTools: ExecutableToolSet;
   currentChatId: string | null;
 }
@@ -835,7 +856,9 @@ const ElementsProviderWithoutHistory = ({
 
 const queryClient = new QueryClient();
 
-export const ElementsProvider = (props: ElementsProviderProps) => {
+export const ElementsProvider = (
+  props: ElementsProviderProps,
+): React.JSX.Element => {
   return (
     <QueryClientProvider client={queryClient}>
       <ConnectionStatusProvider>

package/src/contexts/ReplayContext.ts

@@ -2,6 +2,6 @@ import { createContext, useContext } from "react";
 
 export const ReplayContext = createContext<{ isReplay: boolean } | null>(null);
 
-export function useReplayContext() {
+export function useReplayContext(): { isReplay: boolean } | null {
   return useContext(ReplayContext);
 }

package/src/contexts/ToolApprovalContext.tsx

@@ -26,7 +26,11 @@ interface ToolApprovalContextType {
   getPendingApproval: (toolCallId: string) => PendingApproval | undefined;
 }
 
-export function ToolApprovalProvider({ children }: { children: ReactNode }) {
+export function ToolApprovalProvider({
+  children,
+}: {
+  children: ReactNode;
+}): React.JSX.Element {
   const [pendingApprovals, setPendingApprovals] = useState<
     Map<string, PendingApproval>
   >(new Map());

package/src/contexts/ToolExecutionContext.tsx

@@ -36,7 +36,7 @@ interface ToolExecutionProviderProps {
 export function ToolExecutionProvider({
   children,
   tools,
-}: ToolExecutionProviderProps) {
+}: ToolExecutionProviderProps): React.JSX.Element {
   const executeTool = useCallback(
     async (
       toolName: string,

package/src/contexts/portal-container.tsx

@@ -11,7 +11,7 @@ export function PortalContainerProvider({
 }: {
   containerRef: RefObject<HTMLElement | null>;
   children: React.ReactNode;
-}) {
+}): React.JSX.Element {
   return (
     <PortalContainerContext.Provider value={containerRef}>
       {children}

package/src/hooks/useAuth.ts

@@ -131,7 +131,8 @@ export const useAuth = ({
   // useMCPTools). Today the dashboard uses this to forward
   // `Authorization: Bearer <user-session JWT>` so the runtime gateway can
   // resolve the user's upstream credentials for issuer-gated toolsets.
-  const extraHeaders = auth?.headers ?? {};
+  const authHeaders = auth?.headers;
+  const extraHeaders = useMemo(() => authHeaders ?? {}, [authHeaders]);
 
   const ensureValidHeaders = useCallback(async (): Promise<
     Record<string, string>

package/src/hooks/useDensity.ts

@@ -102,7 +102,7 @@ type DensityToken = keyof (typeof densityClasses)["normal"];
  * Hook to get density classes based on theme config
  * Use: const d = useDensity(); then d('p-md') returns the appropriate padding class
  */
-export const useDensity = () => {
+export const useDensity = (): ((token: DensityToken) => string) => {
   const { config } = useElements();
   const density = config.theme?.density ?? "normal";
 

package/src/hooks/useElements.ts

@@ -1,11 +1,12 @@
 import { useContext } from "react";
 import { ElementsContext } from "@/contexts/contexts";
+import type { ElementsContextType } from "@/types";
 
 /**
  * @private Internal hook to access the ElementsContext
  *
  */
-export const useElements = () => {
+export const useElements = (): ElementsContextType => {
   const context = useContext(ElementsContext);
   if (!context) {
     throw new Error("useElements must be used within a ElementsProvider");

package/src/hooks/useFollowOnSuggestions.ts

@@ -1,5 +1,4 @@
 import { useReplayContext } from "@/contexts/ReplayContext";
-import { getApiUrl } from "@/lib/api";
 import { useAssistantState } from "@assistant-ui/react";
 import { generateObject } from "ai";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -64,8 +63,6 @@ export function useFollowOnSuggestions(): {
   const isRunning = useAssistantState(({ thread }) => thread.isRunning);
   const messages = useAssistantState(({ thread }) => thread.messages);
 
-  const apiUrl = getApiUrl(config);
-
   const fetchSuggestions = useCallback(async () => {
     if (!isEnabled || auth.isLoading || !auth.headers) return;
 
@@ -89,7 +86,7 @@ export function useFollowOnSuggestions(): {
     let lastAssistantMessage = "";
     for (let i = recentMessages.length - 1; i >= 0; i--) {
       const msg = recentMessages[i];
-      if (msg.role === "assistant") {
+      if (msg && msg.role === "assistant") {
         lastAssistantMessage = msg.content;
         break;
       }
@@ -191,7 +188,7 @@ ${conversation}`,
         abortControllerRef.current = null;
       }
     }
-  }, [isEnabled, apiUrl, auth.headers, auth.isLoading, messages]);
+  }, [isEnabled, auth.headers, auth.isLoading, messages, model]);
 
   // Fetch suggestions when:
   // 1. The thread stops running (assistant finished responding)
@@ -224,7 +221,7 @@ ${conversation}`,
     if (lastProcessedMessageIdRef.current === lastMessage.id) return;
 
     lastProcessedMessageIdRef.current = lastMessage.id;
-    fetchSuggestions();
+    void fetchSuggestions();
   }, [isRunning, messages, fetchSuggestions, auth.isLoading, auth.headers]);
 
   // Cleanup on unmount

package/src/hooks/useGramThreadListAdapter.tsx

@@ -10,6 +10,7 @@ import { createAssistantStream, type AssistantStream } from "assistant-stream";
 import {
   GramChatOverview,
   GramChat,
+  GramChatMessage,
   convertGramMessagesToExported,
   convertGramMessagesToUIMessages,
 } from "@/lib/messageConverter";
@@ -60,6 +61,14 @@ async function waitForMappedId(
   }
 }
 
+/**
+ * Transforms or drops a persisted chat message before it is rendered from
+ * history. Return the (possibly rewritten) message, or `null` to omit it.
+ */
+export type ChatMessageTransform = (
+  message: GramChatMessage,
+) => GramChatMessage | null;
+
 export interface ThreadListAdapterOptions {
   apiUrl: string;
   headers: Record<string, string>;
@@ -78,6 +87,13 @@ export interface ThreadListAdapterOptions {
    * `crypto.randomUUID()`. Use this when the backend owns chat-id creation.
    */
   deferThreadIdMinting?: boolean;
+  /**
+   * Optional hook to transform or drop each persisted message before it is
+   * converted for rendering. Return a message to render it (possibly rewritten),
+   * or `null` to omit it. Keeps product-specific transcript conventions out of
+   * the library — see {@link HistoryConfig.transformChatMessage}.
+   */
+  transformChatMessage?: ChatMessageTransform;
 }
 
 interface ListChatsResponse {
@@ -93,15 +109,41 @@ class GramThreadHistoryAdapter {
   private apiUrl: string;
   private headers: Record<string, string>;
   private store: AssistantApi;
+  // Read lazily rather than captured: the adapter is constructed once, but the
+  // consumer may swap `transformChatMessage` across renders, so resolve it from
+  // the live options on every load instead of snapshotting it here.
+  private getTransformChatMessage?: () => ChatMessageTransform | undefined;
 
   constructor(
     apiUrl: string,
     headers: Record<string, string>,
     store: AssistantApi,
+    getTransformChatMessage?: () => ChatMessageTransform | undefined,
   ) {
     this.apiUrl = apiUrl;
     this.headers = headers;
     this.store = store;
+    this.getTransformChatMessage = getTransformChatMessage;
+  }
+
+  /**
+   * Applies the consumer-supplied `transformChatMessage` hook to a loaded
+   * transcript: rewrites each message and drops any the hook returns `null` for.
+   * Without a hook configured the messages pass through untouched.
+   */
+  private applyTransform(messages: GramChatMessage[]): GramChatMessage[] {
+    const transform = this.getTransformChatMessage?.();
+    if (!transform) {
+      return messages;
+    }
+    const result: GramChatMessage[] = [];
+    for (const message of messages) {
+      const transformed = transform(message);
+      if (transformed) {
+        result.push(transformed);
+      }
+    }
+    return result;
   }
 
   async load() {
@@ -122,7 +164,7 @@ class GramThreadHistoryAdapter {
       }
 
       const chat = (await response.json()) as GramChat;
-      return convertGramMessagesToExported(chat.messages);
+      return convertGramMessagesToExported(this.applyTransform(chat.messages));
     } catch (error) {
       console.error("Error loading chat:", error);
       return { messages: [], headId: null };
@@ -156,7 +198,9 @@ class GramThreadHistoryAdapter {
         }
 
         const chat = (await response.json()) as GramChat;
-        return convertGramMessagesToUIMessages(chat.messages);
+        return convertGramMessagesToUIMessages(
+          this.applyTransform(chat.messages),
+        );
 
         // // Filter out system messages (assistant-ui doesn't support them in the import path)
         // const filteredMessages = chat.messages.filter(
@@ -211,6 +255,7 @@ function useGramThreadHistoryAdapter(
         optionsRef.current.apiUrl,
         optionsRef.current.headers,
         store,
+        () => optionsRef.current.transformChatMessage,
       ),
   );
   // Cast to ThreadHistoryAdapter - the withFormat generic doesn't match but works at runtime
@@ -360,7 +405,9 @@ export function useGramThreadListAdapter(
         // Title generation happens async server-side via Temporal after first completion.
         // This delay allows the OpenRouter LLM call to complete before we fetch the title.
         const TITLE_GENERATION_DELAY_MS = 2000;
-        await new Promise((r) => setTimeout(r, TITLE_GENERATION_DELAY_MS));
+        await new Promise((r) => {
+          setTimeout(r, TITLE_GENERATION_DELAY_MS);
+        });
 
         try {
           // TODO: rename generateTitle endpoint to getTitle

package/src/hooks/useMCPTools.ts

@@ -42,10 +42,10 @@ export function useMCPTools({
   );
 
   const envQueryKey = Object.entries(environment ?? {}).map(
-    ([k, v]) => `${k}:${v}`,
+    ([k, v]) => `${k}:${String(v)}`,
   );
   const authQueryKey = Object.entries(auth.headers ?? {}).map(
-    ([k, v]) => `${k}:${v}`,
+    ([k, v]) => `${k}:${String(v)}`,
   );
   const serversQueryKey = servers.map(
     (s) => `${s.url}|${s.name ?? ""}|${s.environment ?? ""}`,

package/src/hooks/useModel.ts

@@ -5,9 +5,7 @@ import { useAuth } from "./useAuth";
 import { useElements } from "./useElements";
 
 // Creates an OpenRouter client to be used for "internal Gram" usage, such as follow-on suggestions
-export const useModel = (
-  model: string = "openai/gpt-5.4-mini",
-): LanguageModel => {
+export const useModel = (model = "openai/gpt-5.4-mini"): LanguageModel => {
   const { config } = useElements();
 
   const auth = useAuth({

package/src/hooks/usePluginComponents.ts

@@ -15,7 +15,9 @@ type ComponentsByLanguage =
     >
   | undefined;
 
-export function useComponentsByLanguage(plugins: Plugin[]) {
+export function useComponentsByLanguage(
+  plugins: Plugin[],
+): ComponentsByLanguage {
   return useMemo(() => {
     return plugins.reduce((acc, plugin) => {
       if (acc?.[plugin.language] && !plugin.overrideExisting) {