feat: lower opacity for thinking summaries (#4610)

2 files changed, 35 insertions, 5 deletions

diff --git a/packages/opencode/src/cli/cmd/tui/context/theme.tsx b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
index 4b7c4de0a..abca5ba2a 100644
--- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx
+++ b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
@@ -189,6 +189,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const syntax = createMemo(() => generateSyntax(values()))
+    const subtleSyntax = createMemo(() => generateSubtleSyntax(values()))
 
     return {
       theme: new Proxy(values(), {
@@ -204,6 +205,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         return store.themes
       },
       syntax,
+      subtleSyntax,
       mode() {
         return store.mode
       },
@@ -427,7 +429,35 @@ function generateMutedTextColor(bg: RGBA, isDark: boolean): RGBA {
 }
 
 function generateSyntax(theme: Theme) {
-  return SyntaxStyle.fromTheme([
+  return SyntaxStyle.fromTheme(getSyntaxRules(theme))
+}
+
+function generateSubtleSyntax(theme: Theme) {
+  const rules = getSyntaxRules(theme)
+  return SyntaxStyle.fromTheme(
+    rules.map((rule) => {
+      if (rule.style.foreground) {
+        const fg = rule.style.foreground
+        return {
+          ...rule,
+          style: {
+            ...rule.style,
+            foreground: RGBA.fromInts(
+              Math.round(fg.r * 255),
+              Math.round(fg.g * 255),
+              Math.round(fg.b * 255),
+              Math.round(0.6 * 255),
+            ),
+          },
+        }
+      }
+      return rule
+    }),
+  )
+}
+
+function getSyntaxRules(theme: Theme) {
+  return [
     {
       scope: ["prompt"],
       style: {
@@ -921,5 +951,5 @@ function generateSyntax(theme: Theme) {
         foreground: theme.textMuted,
       },
     },
-  ])
+  ]
 }
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 6c83bf68c..ba4da4d21 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -1080,7 +1080,7 @@ const PART_MAPPING = {
 }
 
 function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: AssistantMessage }) {
-  const { theme, syntax } = useTheme()
+  const { theme, subtleSyntax } = useTheme()
   const ctx = use()
   const content = createMemo(() => props.part.text.trim())
   return (
@@ -1098,10 +1098,10 @@ function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: Ass
           filetype="markdown"
           drawUnstyledText={false}
           streaming={true}
-          syntaxStyle={syntax()}
+          syntaxStyle={subtleSyntax()}
           content={"_Thinking:_ " + content()}
           conceal={ctx.conceal()}
-          fg={theme.text}
+          fg={theme.textMuted}
         />
       </box>
     </Show>