Implement toggle thinking blocks with localStorage persistence

- Add preferences store to manage user preferences in localStorage
- Toggle thinking blocks visibility via command palette (default: hidden)
- Dynamic command label shows current state (Show/Hide Thinking Blocks)
- Filter reasoning parts based on preference in message-stream
- Conditionally render reasoning parts in message-part component
- Support function labels in Command interface for dynamic text

src/App.tsx

@@ -13,6 +13,7 @@ import { initMarkdown } from "./lib/markdown"
 import { createCommandRegistry } from "./lib/commands"
 import type { Command } from "./lib/commands"
 import { hasInstances, isSelectingFolder, setIsSelectingFolder, setHasInstances } from "./stores/ui"
+import { toggleShowThinkingBlocks, preferences } from "./stores/preferences"
 import {
   createInstance,
   instances,
@@ -588,13 +589,11 @@ const App: Component = () => {
 
     commandRegistry.register({
       id: "thinking",
-      label: "Toggle Thinking Blocks",
+      label: () => `${preferences().showThinkingBlocks ? "Hide" : "Show"} Thinking Blocks`,
       description: "Show/hide AI thinking process",
       category: "System",
       keywords: ["/thinking", "toggle", "show", "hide"],
-      action: () => {
-        console.log("Toggle thinking blocks (not implemented)")
-      },
+      action: toggleShowThinkingBlocks,
     })
 
     commandRegistry.register({

src/components/command-palette.tsx

@@ -34,7 +34,8 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
     if (!q) return props.commands
 
     return props.commands.filter((cmd) => {
-      const labelMatch = cmd.label.toLowerCase().includes(q)
+      const label = typeof cmd.label === "function" ? cmd.label() : cmd.label
+      const labelMatch = label.toLowerCase().includes(q)
       const descMatch = cmd.description.toLowerCase().includes(q)
       const keywordMatch = cmd.keywords?.some((k) => k.toLowerCase().includes(q))
       const categoryMatch = cmd.category?.toLowerCase().includes(q)
@@ -190,7 +191,9 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                                 onMouseEnter={() => setSelectedIndex(commandIndex)}
                               >
                                 <div class="flex-1 min-w-0">
-                                  <div class="font-medium text-gray-900 dark:text-gray-100">{command.label}</div>
+                                  <div class="font-medium text-gray-900 dark:text-gray-100">
+                                    {typeof command.label === "function" ? command.label() : command.label}
+                                  </div>
                                   <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5">
                                     {command.description}
                                   </div>

src/components/message-part.tsx

@@ -3,6 +3,7 @@ import ToolCall from "./tool-call"
 import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
 import { Markdown } from "./markdown"
 import { useTheme } from "../lib/theme"
+import { preferences } from "../stores/preferences"
 
 interface MessagePartProps {
   part: any
@@ -38,19 +39,21 @@ export default function MessagePart(props: MessagePartProps) {
       </Match>
 
       <Match when={partType() === "reasoning"}>
-        <div class="message-reasoning">
-          <div class="reasoning-container">
-            <div class="reasoning-header" onClick={handleReasoningClick}>
-              <span class="reasoning-icon">{isReasoningExpanded() ? "▼" : "▶"}</span>
-              <span class="reasoning-label">Reasoning</span>
-            </div>
-            <Show when={isReasoningExpanded()}>
-              <div class="message-text mt-2">
-                <Markdown content={props.part.text || ""} isDark={isDark()} />
+        <Show when={preferences().showThinkingBlocks}>
+          <div class="message-reasoning">
+            <div class="reasoning-container">
+              <div class="reasoning-header" onClick={handleReasoningClick}>
+                <span class="reasoning-icon">{isReasoningExpanded() ? "▼" : "▶"}</span>
+                <span class="reasoning-label">Reasoning</span>
               </div>
-            </Show>
+              <Show when={isReasoningExpanded()}>
+                <div class="message-text mt-2">
+                  <Markdown content={props.part.text || ""} isDark={isDark()} />
+                </div>
+              </Show>
+            </div>
           </div>
-        </div>
+        </Show>
       </Match>
     </Switch>
   )

src/components/message-stream.tsx

@@ -4,6 +4,7 @@ import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import { sseManager } from "../lib/sse-manager"
 import Kbd from "./kbd"
+import { preferences } from "../stores/preferences"
 
 interface MessageStreamProps {
   instanceId: string
@@ -72,7 +73,7 @@ export default function MessageStream(props: MessageStreamProps) {
 
       const textParts = message.parts.filter((p) => p.type === "text" && !p.synthetic)
       const toolParts = message.parts.filter((p) => p.type === "tool")
-      const reasoningParts = message.parts.filter((p) => p.type === "reasoning")
+      const reasoningParts = preferences().showThinkingBlocks ? message.parts.filter((p) => p.type === "reasoning") : []
 
       const isQueued = message.type === "user" && message.id > lastAssistantMessageId
 

src/lib/commands.ts

@@ -8,7 +8,7 @@ export interface KeyboardShortcut {
 
 export interface Command {
   id: string
-  label: string
+  label: string | (() => string)
   description: string
   keywords?: string[]
   shortcut?: KeyboardShortcut
@@ -47,7 +47,8 @@ export function createCommandRegistry() {
 
     const lowerQuery = query.toLowerCase()
     return getAll().filter((cmd) => {
-      const labelMatch = cmd.label.toLowerCase().includes(lowerQuery)
+      const label = typeof cmd.label === "function" ? cmd.label() : cmd.label
+      const labelMatch = label.toLowerCase().includes(lowerQuery)
       const descMatch = cmd.description.toLowerCase().includes(lowerQuery)
       const keywordMatch = cmd.keywords?.some((k) => k.toLowerCase().includes(lowerQuery))
       return labelMatch || descMatch || keywordMatch

src/stores/preferences.ts

@@ -0,0 +1,45 @@
+import { createSignal } from "solid-js"
+
+const STORAGE_KEY = "opencode-preferences"
+
+interface Preferences {
+  showThinkingBlocks: boolean
+}
+
+const defaultPreferences: Preferences = {
+  showThinkingBlocks: false,
+}
+
+function loadPreferences(): Preferences {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      return { ...defaultPreferences, ...JSON.parse(stored) }
+    }
+  } catch (error) {
+    console.error("Failed to load preferences:", error)
+  }
+  return defaultPreferences
+}
+
+function savePreferences(prefs: Preferences): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
+  } catch (error) {
+    console.error("Failed to save preferences:", error)
+  }
+}
+
+const [preferences, setPreferences] = createSignal<Preferences>(loadPreferences())
+
+function updatePreferences(updates: Partial<Preferences>): void {
+  const updated = { ...preferences(), ...updates }
+  setPreferences(updated)
+  savePreferences(updated)
+}
+
+function toggleShowThinkingBlocks(): void {
+  updatePreferences({ showThinkingBlocks: !preferences().showThinkingBlocks })
+}
+
+export { preferences, updatePreferences, toggleShowThinkingBlocks }