diff --git a/packages/tui/src/context/theme.tsx b/packages/tui/src/context/theme.tsx
index 13caa748c9e..a29c25501cf 100644
--- a/packages/tui/src/context/theme.tsx
+++ b/packages/tui/src/context/theme.tsx
@@ -22,7 +22,7 @@ import { createComponentTheme, type ComponentTheme } from "../theme/v2/component
 import { resolveThemeFile } from "../theme/v2/resolve"
 import { migrateV1 } from "../theme/v2/v1-migrate"
 import { themeModes } from "../theme/v2/select"
-import { createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
+import { createEffect, createMemo, onCleanup, onMount, type Accessor, type ParentProps } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "./helper"
 import { useConfig } from "../config"
@@ -99,7 +99,7 @@ const [store, setStore] = createStore<State>({
 
 subscribeThemes((themes) => setStore("themes", themes))
 
-export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
+const themeContext = createSimpleContext({
   name: "Theme",
   init: (props: { mode: "dark" | "light"; source?: ThemeSource }) => {
     const renderer = useRenderer()
@@ -363,6 +363,18 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   },
 })
 
+export const useTheme = themeContext.use
+export const ThemeProvider = themeContext.provider
+
+export function ThemeContextProvider(props: ParentProps<{ context: ContextName }>) {
+  const theme = useTheme()
+  return (
+    <themeContext.context.Provider value={theme.contextual(props.context)}>
+      {props.children}
+    </themeContext.context.Provider>
+  )
+}
+
 function duration(milliseconds: number) {
   return `${milliseconds.toFixed(2)} ms`
 }
diff --git a/packages/tui/src/routes/session/index.tsx b/packages/tui/src/routes/session/index.tsx
index d2f3543c0ed..acf38c353c3 100644
--- a/packages/tui/src/routes/session/index.tsx
+++ b/packages/tui/src/routes/session/index.tsx
@@ -22,7 +22,7 @@ import { useData } from "../../context/data"
 import { SplitBorder } from "../../ui/border"
 import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime"
 import { Spinner, SPINNER_FRAMES } from "../../component/spinner"
-import { useTheme } from "../../context/theme"
+import { ThemeContextProvider, useTheme } from "../../context/theme"
 import { BoxRenderable, ScrollBoxRenderable, addDefaultParsers, TextAttributes, RGBA } from "@opentui/core"
 import { Prompt, type PromptRef } from "../../component/prompt"
 import type {
@@ -2352,15 +2352,26 @@ function StatusBadge(props: { children: string }) {
   )
 }
 
-function BlockTool(props: {
+type BlockToolProps = {
   title?: string
   path?: { label: string; value: string }
   children?: JSX.Element
   onClick?: () => void
   part?: SessionMessageAssistantTool
   spinner?: boolean
-}) {
-  const { themeV2 } = useTheme().contextual("elevated")
+}
+
+function BlockTool(props: BlockToolProps) {
+  const parentTheme = useTheme()
+  return (
+    <ThemeContextProvider context="elevated">
+      <BlockToolContent {...props} borderColor={parentTheme.themeV2.background.default} />
+    </ThemeContextProvider>
+  )
+}
+
+function BlockToolContent(props: BlockToolProps & { borderColor: RGBA }) {
+  const { themeV2 } = useTheme()
   const ctx = use()
   const data = useData()
   const renderer = useRenderer()
@@ -2380,7 +2391,7 @@ function BlockTool(props: {
       gap={1}
       backgroundColor={hover() ? themeV2.raise(themeV2.background.default) : themeV2.background.default}
       customBorderChars={SplitBorder.customBorderChars}
-      borderColor={themeV2.background.default}
+      borderColor={props.borderColor}
       onMouseOver={() => props.onClick && setHover(true)}
       onMouseOut={() => setHover(false)}
       onMouseUp={() => {