add timeline tool visibility toggle

packages/ui/src/App.tsx

@@ -52,6 +52,7 @@ const App: Component = () => {
     preferences,
     recordWorkspaceLaunch,
     toggleShowThinkingBlocks,
+    toggleShowTimelineTools,
     toggleAutoCleanupBlankSessions,
     toggleUsageMetrics,
     setDiffViewMode,
@@ -222,6 +223,7 @@ const App: Component = () => {
     preferences,
     toggleAutoCleanupBlankSessions,
     toggleShowThinkingBlocks,
+    toggleShowTimelineTools,
     toggleUsageMetrics,
     setDiffViewMode,
     setToolOutputExpansion,

packages/ui/src/components/message-section.tsx

@@ -39,6 +39,7 @@ export interface MessageSectionProps {
 export default function MessageSection(props: MessageSectionProps) {
   const { preferences } = useConfig()
   const showUsagePreference = () => preferences().showUsageMetrics ?? true
+  const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
   const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
   const messageIds = createMemo(() => store().getSessionMessageIds(props.sessionId))
 
@@ -639,6 +640,7 @@ export default function MessageSection(props: MessageSectionProps) {
               activeMessageId={activeMessageId()}
               instanceId={props.instanceId}
               sessionId={props.sessionId}
+              showToolSegments={showTimelineToolsPreference()}
             />
           </div>
         </Show>

packages/ui/src/components/message-timeline.tsx

@@ -24,6 +24,7 @@ interface MessageTimelineProps {
   activeMessageId?: string | null
   instanceId: string
   sessionId: string
+  showToolSegments?: boolean
 }
 
 const SEGMENT_LABELS: Record<TimelineSegmentType, string> = {
@@ -239,6 +240,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   const [hoveredSegment, setHoveredSegment] = createSignal<TimelineSegment | null>(null)
   const [tooltipCoords, setTooltipCoords] = createSignal<{ top: number; left: number }>({ top: 0, left: 0 })
   let hoverTimer: number | null = null
+  const showTools = () => props.showToolSegments ?? true
  
   const registerButtonRef = (segmentId: string, element: HTMLButtonElement | null) => {
     if (element) {
@@ -313,6 +315,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
         {(segment) => {
           onCleanup(() => buttonRefs.delete(segment.id))
           const isActive = () => props.activeMessageId === segment.messageId
+          const isHidden = () => segment.type === "tool" && !(showTools() || isActive())
           const shortLabelContent = () => {
             if (segment.type === "tool") {
               return segment.shortLabel ?? getToolIcon("tool")
@@ -326,8 +329,9 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
             <button
               ref={(el) => registerButtonRef(segment.id, el)}
               type="button"
-              class={`message-timeline-segment message-timeline-${segment.type} ${isActive() ? "message-timeline-segment-active" : ""}`}
+              class={`message-timeline-segment message-timeline-${segment.type} ${isActive() ? "message-timeline-segment-active" : ""} ${isHidden() ? "message-timeline-segment-hidden" : ""}`}
               aria-current={isActive() ? "true" : undefined}
+              aria-hidden={isHidden() ? "true" : undefined}
               onClick={() => props.onSegmentClick?.(segment)}
               onMouseEnter={(event) => handleMouseEnter(segment, event)}
               onMouseLeave={handleMouseLeave}

packages/ui/src/lib/hooks/use-commands.ts

@@ -24,6 +24,7 @@ const log = getLogger("actions")
 export interface UseCommandsOptions {
   preferences: Accessor<Preferences>
   toggleShowThinkingBlocks: () => void
+  toggleShowTimelineTools: () => void
   toggleUsageMetrics: () => void
   toggleAutoCleanupBlankSessions: () => void
   setDiffViewMode: (mode: "split" | "unified") => void
@@ -410,6 +411,15 @@ export function useCommands(options: UseCommandsOptions) {
       action: options.toggleShowThinkingBlocks,
     })
 
+    commandRegistry.register({
+      id: "timeline-tools",
+      label: () => `${options.preferences().showTimelineTools ? "Hide" : "Show"} Timeline Tool Calls`,
+      description: "Toggle tool call entries in the message timeline",
+      category: "System",
+      keywords: ["timeline", "tool", "toggle"],
+      action: options.toggleShowTimelineTools,
+    })
+
     commandRegistry.register({
       id: "thinking-default-visibility",
       label: () => {

packages/ui/src/stores/preferences.tsx

@@ -35,6 +35,7 @@ export type ListeningMode = "local" | "all"
 export interface Preferences {
   showThinkingBlocks: boolean
   thinkingBlocksExpansion: ExpansionPreference
+  showTimelineTools: boolean
   lastUsedBinary?: string
   environmentVariables: Record<string, string>
   modelRecents: ModelPreference[]
@@ -67,6 +68,7 @@ const MAX_RECENT_MODELS = 5
 const defaultPreferences: Preferences = {
   showThinkingBlocks: false,
   thinkingBlocksExpansion: "expanded",
+  showTimelineTools: true,
   environmentVariables: {},
   modelRecents: [],
   diffViewMode: "split",
@@ -103,6 +105,7 @@ function normalizePreferences(pref?: Partial<Preferences> & { agentModelSelectio
   return {
     showThinkingBlocks: sanitized.showThinkingBlocks ?? defaultPreferences.showThinkingBlocks,
     thinkingBlocksExpansion: sanitized.thinkingBlocksExpansion ?? defaultPreferences.thinkingBlocksExpansion,
+    showTimelineTools: sanitized.showTimelineTools ?? defaultPreferences.showTimelineTools,
     lastUsedBinary: sanitized.lastUsedBinary ?? defaultPreferences.lastUsedBinary,
     environmentVariables,
     modelRecents,
@@ -301,6 +304,10 @@ function toggleShowThinkingBlocks(): void {
   updatePreferences({ showThinkingBlocks: !preferences().showThinkingBlocks })
 }
 
+function toggleShowTimelineTools(): void {
+  updatePreferences({ showTimelineTools: !preferences().showTimelineTools })
+}
+
 function toggleUsageMetrics(): void {
   updatePreferences({ showUsageMetrics: !preferences().showUsageMetrics })
 }
@@ -411,8 +418,10 @@ interface ConfigContextValue {
   setThemePreference: typeof setThemePreference
   updateConfig: typeof updateConfig
   toggleShowThinkingBlocks: typeof toggleShowThinkingBlocks
+  toggleShowTimelineTools: typeof toggleShowTimelineTools
   toggleUsageMetrics: typeof toggleUsageMetrics
   toggleAutoCleanupBlankSessions: typeof toggleAutoCleanupBlankSessions
+
   setDiffViewMode: typeof setDiffViewMode
   setToolOutputExpansion: typeof setToolOutputExpansion
   setDiagnosticsExpansion: typeof setDiagnosticsExpansion
@@ -445,6 +454,7 @@ const configContextValue: ConfigContextValue = {
   setThemePreference,
   updateConfig,
   toggleShowThinkingBlocks,
+  toggleShowTimelineTools,
   toggleUsageMetrics,
   toggleAutoCleanupBlankSessions,
   setDiffViewMode,
@@ -503,6 +513,7 @@ export {
   updateConfig,
   updatePreferences,
   toggleShowThinkingBlocks,
+  toggleShowTimelineTools,
   toggleAutoCleanupBlankSessions,
   toggleUsageMetrics,
   recentFolders,

packages/ui/src/styles/messaging/message-timeline.css

@@ -80,6 +80,10 @@
   transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
+.message-timeline-segment.message-timeline-segment-hidden {
+  display: none !important;
+}
+
 .message-timeline-segment-active {
   border-color: transparent;
   background-color: #0f5b44;