[codex] Add local tool trace toggle (#806)

* test: harden tool approval browser contract

* test: cover tool trace display edge cases

* test: cover resumed tool trace edge cases

* feat: hide tool traces by default

* Add local tool trace toggle

---------

Co-authored-by: Zhicheng Han <zhicheng.han@mathematik.uni-goettingen.de>

packages/client/src/components/hermes/chat/ChatInput.vue

@@ -8,10 +8,12 @@ import { setModelContext } from '@/api/hermes/model-context'
 import { NButton, NTooltip, NSwitch, NModal, NInputNumber, useMessage } from 'naive-ui'
 import { computed, ref, nextTick, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useToolTraceVisibility } from '@/composables/useToolTraceVisibility'
 
 const chatStore = useChatStore()
 const { t } = useI18n()
 const message = useMessage()
+const { toolTraceVisible, toggleToolTraceVisible } = useToolTraceVisibility()
 const inputText = ref('')
 const textareaRef = ref<HTMLTextAreaElement>()
 const commandDropdownRef = ref<HTMLDivElement>()
@@ -430,6 +432,24 @@ function isImage(type: string): boolean {
         />
       </div>
 
+      <NTooltip trigger="hover">
+        <template #trigger>
+          <NButton
+            quaternary
+            size="tiny"
+            class="tool-trace-toggle"
+            :class="{ active: toolTraceVisible }"
+            :aria-label="toolTraceVisible ? t('chat.hideToolCalls') : t('chat.showToolCalls')"
+            @click="toggleToolTraceVisible"
+          >
+            <svg class="tool-trace-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M14.7 6.3a4.5 4.5 0 0 0-5.8 5.8L3.5 17.5a2.1 2.1 0 0 0 3 3l5.4-5.4a4.5 4.5 0 0 0 5.8-5.8l-3 3-3-3 3-3z"/>
+            </svg>
+          </NButton>
+        </template>
+        {{ toolTraceVisible ? t('chat.hideToolCalls') : t('chat.showToolCalls') }}
+      </NTooltip>
+
       <span v-if="totalTokens > 0" class="context-info" :class="{ 'context-warning': usagePercent > 80 }">
         {{ formatTokens(totalTokens) }} /
         <NTooltip trigger="hover">
@@ -614,20 +634,65 @@ function isImage(type: string): boolean {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 0 8px;
+  padding: 0 0 0 8px;
   border-left: 1px solid $border-light;
   margin-left: 4px;
 
   .switch-label {
     display: flex;
     align-items: center;
-    color: $text-muted;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    color: #999999;
     font-size: 12px;
 
     svg {
-      opacity: 0.7;
+      opacity: 1;
     }
   }
+
+  :deep(.n-switch),
+  :deep(.n-switch__rail) {
+    margin-right: 0;
+  }
+}
+
+.tool-trace-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #999999;
+  width: 24px;
+  min-width: 24px;
+  height: 22px;
+  margin-left: -4px;
+  padding: 0;
+  background: transparent !important;
+  opacity: 1;
+
+  :deep(.n-button__state-border),
+  :deep(.n-button__border),
+  :deep(.n-button__ripple) {
+    display: none;
+  }
+
+  .tool-trace-icon {
+    display: block;
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &.active {
+    color: #999999;
+    opacity: 1;
+  }
+
+  &:hover {
+    color: #999999;
+    opacity: 1;
+  }
 }
 
 .context-info {