@gram-ai/elements 1.34.0 → 1.36.0

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/global.css

@@ -258,14 +258,36 @@
 
 /* assistant-ui streaming indicator — rainbow gradient ring matches the
    Speakeasy brand palette used elsewhere (see `INSIGHTS_AI_RAINBOW_BORDER_CLASS`
-   and the login page's BrandGradientBar). */
+   and the login page's BrandGradientBar). Shared as a variable so the inline
+   trailing dot and the standalone "thinking" dot stay in sync. */
+.gram-elements {
+  --aui-rainbow: conic-gradient(
+    from 0deg,
+    #320f1e,
+    #c83228,
+    #fb873f,
+    #d2dc91,
+    #5a8250,
+    #002314,
+    #00143c,
+    #2873d7,
+    #9bc3ff,
+    #320f1e
+  );
+  /* Spin shorthand shared by both rainbow dots so a single reduced-motion
+     override (below) stops all of them at once. */
+  --aui-spin: aui-rainbow-spin 1.6s linear infinite;
+}
+
 @keyframes aui-rainbow-spin {
   to {
     transform: rotate(360deg);
   }
 }
 
-.gram-elements :where(.aui-md[data-status="running"]):empty::after,
+/* Trailing dot that follows answer text as it streams. The "before first
+   token" state is handled by <ThinkingIndicator> (cycling verbs), so there is
+   deliberately no `:empty::after` rule here. */
 .gram-elements
   :where(.aui-md[data-status="running"])
   > :where(:not(ol):not(ul):not(pre)):last-child::after,
@@ -301,19 +323,29 @@
   margin-right: 0.15rem;
   padding: 3px;
   border-radius: 50%;
-  background: conic-gradient(
-    from 0deg,
-    #320f1e,
-    #c83228,
-    #fb873f,
-    #d2dc91,
-    #5a8250,
-    #002314,
-    #00143c,
-    #2873d7,
-    #9bc3ff,
-    #320f1e
-  );
+  background: var(--aui-rainbow);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  animation: var(--aui-spin);
+}
+
+/* Standalone rainbow dot for the cycling "thinking" indicator (shown before
+   the assistant streams any answer text). Same ring as the inline dot above. */
+.gram-elements .aui-thinking-dot {
+  display: inline-block;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 0.95em;
+  height: 0.95em;
+  padding: 2.5px;
+  border-radius: 50%;
+  background: var(--aui-rainbow);
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
@@ -322,7 +354,14 @@
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   mask-composite: exclude;
-  animation: aui-rainbow-spin 1.6s linear infinite;
+  animation: var(--aui-spin);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Stops both the trailing streaming dot and the standalone thinking dot. */
+  .gram-elements {
+    --aui-spin: none;
+  }
 }
 
 /* Simple shimmer animation for title text */

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) {

package/src/hooks/useRadius.ts

@@ -34,7 +34,7 @@ type RadiusSize = "sm" | "md" | "lg" | "xl" | "full";
  * Hook to get radius classes based on theme config
  * Use: const r = useRadius(); then r('lg') returns the appropriate rounded class
  */
-export const useRadius = () => {
+export const useRadius = (): ((size: RadiusSize) => string) => {
   const { config } = useElements();
   const radius = config.theme?.radius ?? "soft";
 

package/src/hooks/useSession.ts

@@ -1,7 +1,9 @@
 import { GetSessionFn } from "@/types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-export function getChatSessionQueryKey(projectSlug: string) {
+export function getChatSessionQueryKey(
+  projectSlug: string,
+): readonly ["chatSession", string] {
   return ["chatSession", projectSlug] as const;
 }
 

package/src/hooks/useThemeProps.ts

@@ -4,13 +4,13 @@ import { useElements } from "./useElements";
 /**
  * Hook to get theme-related props including dark mode class
  */
-export const useThemeProps = () => {
+export const useThemeProps = (): {
+  readonly className: string | undefined;
+} => {
   const { config } = useElements();
-  const theme = config.theme ?? {};
+  const colorScheme = config.theme?.colorScheme ?? "light";
 
   return useMemo(() => {
-    const { colorScheme = "light" } = theme;
-
     const isDark =
       colorScheme === "dark" ||
       (colorScheme === "system" &&
@@ -20,5 +20,5 @@ export const useThemeProps = () => {
     return {
       className: isDark ? "dark" : undefined,
     } as const;
-  }, [theme]);
+  }, [colorScheme]);
 };

package/src/hooks/useToolApproval.ts

@@ -1,11 +1,12 @@
 import { useContext } from "react";
 import { ToolApprovalContext } from "@/contexts/contexts";
+import type { ToolApprovalContextType } from "@/contexts/ToolApprovalContext";
 
 /**
  * Hook to access the tool approval context for managing human-in-the-loop
  * tool execution approval.
  */
-export const useToolApproval = () => {
+export const useToolApproval = (): ToolApprovalContextType => {
   const context = useContext(ToolApprovalContext);
   if (!context) {
     throw new Error(