fix: always swap conversation data on tab switch

src/main/index.ts

@@ -481,12 +481,21 @@ function createWindow(): void {
   const ZOOM_OUT_KEYS = new Set(['-', '_']);
   mainWindow.webContents.on('before-input-event', (event, input) => {
     if (!mainWindow || mainWindow.isDestroyed()) return;
+
     if (input.type !== 'keyDown') return;
 
-    // Prevent Electron's default Ctrl+R / Cmd+R page reload so the renderer
-    // keyboard handler can use it as "Refresh Session" (fixes #58).
-    // Also prevent Ctrl+Shift+R / Cmd+Shift+R (hard reload).
-    if ((input.control || input.meta) && input.key.toLowerCase() === 'r') {
+    // Intercept Ctrl+R / Cmd+R to prevent Chromium's built-in page reload,
+    // then notify the renderer via IPC so it can refresh the session (fixes #58, #85).
+    // We must preventDefault here because Chromium handles Ctrl+R at the browser
+    // engine level, which also blocks the keydown from reaching the renderer —
+    // hence the IPC bridge.
+    if ((input.control || input.meta) && !input.shift && input.key.toLowerCase() === 'r') {
+      event.preventDefault();
+      mainWindow.webContents.send('session:refresh');
+      return;
+    }
+    // Also block Ctrl+Shift+R (hard reload)
+    if ((input.control || input.meta) && input.shift && input.key.toLowerCase() === 'r') {
       event.preventDefault();
       return;
     }

src/preload/constants/ipcChannels.ts

@@ -174,3 +174,6 @@ export const WINDOW_IS_MAXIMIZED = 'window:isMaximized';
 
 /** Relaunch the application */
 export const APP_RELAUNCH = 'app:relaunch';
+
+/** Refresh session shortcut (main → renderer, triggered by Ctrl+R / Cmd+R) */
+export const SESSION_REFRESH = 'session:refresh';

src/preload/index.ts

@@ -10,6 +10,7 @@ import {
   HTTP_SERVER_GET_STATUS,
   HTTP_SERVER_START,
   HTTP_SERVER_STOP,
+  SESSION_REFRESH,
   SSH_CONNECT,
   SSH_DISCONNECT,
   SSH_GET_CONFIG_HOSTS,
@@ -347,6 +348,15 @@ const electronAPI: ElectronAPI = {
     };
   },
 
+  // Session refresh event (Ctrl+R / Cmd+R intercepted by main process)
+  onSessionRefresh: (callback: () => void): (() => void) => {
+    const listener = (): void => callback();
+    ipcRenderer.on(SESSION_REFRESH, listener);
+    return (): void => {
+      ipcRenderer.removeListener(SESSION_REFRESH, listener);
+    };
+  },
+
   // Shell operations
   openPath: (targetPath: string, projectRoot?: string) =>
     ipcRenderer.invoke('shell:openPath', targetPath, projectRoot),

src/renderer/api/httpClient.ts

@@ -490,6 +490,11 @@ export class HttpAPIClient implements ElectronAPI {
   onTodoChange = (callback: (event: FileChangeEvent) => void): (() => void) =>
     this.addEventListener('todo-change', callback);
 
+  // No-op in browser mode — Ctrl+R refresh is Electron-only
+  onSessionRefresh = (_callback: () => void): (() => void) => {
+    return () => {};
+  };
+
   // ---------------------------------------------------------------------------
   // Shell operations (browser fallbacks)
   // ---------------------------------------------------------------------------

src/renderer/components/chat/ChatHistory.tsx

@@ -377,6 +377,15 @@ export const ChatHistory = ({ tabId }: ChatHistoryProps): JSX.Element => {
     checkScrollButton();
   }, [conversation, checkScrollButton]);
 
+  // Listen for session-refresh-scroll-bottom events (from Ctrl+R / refresh button)
+  useEffect(() => {
+    const handler = (): void => {
+      scrollToBottom('smooth');
+    };
+    window.addEventListener('session-refresh-scroll-bottom', handler);
+    return () => window.removeEventListener('session-refresh-scroll-bottom', handler);
+  }, [scrollToBottom]);
+
   // Callback to register AI group refs (combines with visibility hook)
   const registerAIGroupRefCombined = useCallback(
     (groupId: string) => {

src/renderer/components/chat/items/LinkedToolItem.tsx

@@ -14,6 +14,7 @@ import {
   getToolContextTokens,
   getToolStatus,
   getToolSummary,
+  hasBashContent,
   hasEditContent,
   hasReadContent,
   hasSkillInstructions,
@@ -31,6 +32,7 @@ import { Wrench } from 'lucide-react';
 import { BaseItem, StatusDot } from './BaseItem';
 import { formatDuration } from './baseItemHelpers';
 import {
+  BashToolViewer,
   DefaultToolViewer,
   EditToolViewer,
   ReadToolViewer,
@@ -39,6 +41,7 @@ import {
   WriteToolViewer,
 } from './linkedTool';
 
+import type { StepVariant } from '@renderer/constants/stepVariants';
 import type { LinkedToolItem as LinkedToolItemType } from '@renderer/types/groups';
 
 interface LinkedToolItemProps {
@@ -139,7 +142,12 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
   const useWriteViewer =
     linkedTool.name === 'Write' && hasWriteContent(linkedTool) && !linkedTool.result?.isError;
   const useSkillViewer = linkedTool.name === 'Skill' && hasSkillInstructions(linkedTool);
-  const useDefaultViewer = !useReadViewer && !useEditViewer && !useWriteViewer && !useSkillViewer;
+  const useBashViewer = linkedTool.name === 'Bash' && hasBashContent(linkedTool);
+  const useDefaultViewer =
+    !useReadViewer && !useEditViewer && !useWriteViewer && !useSkillViewer && !useBashViewer;
+
+  // Determine step variant for colored borders/icons
+  const toolVariant: StepVariant = status === 'error' ? 'tool-error' : 'tool';
 
   // Check if we should show error display for Read/Write tools
   const showReadError = linkedTool.name === 'Read' && linkedTool.result?.isError;
@@ -164,6 +172,7 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
         highlightClasses={highlightClasses}
         highlightStyle={highlightStyle}
         notificationDotColor={notificationDotColor}
+        variant={toolVariant}
       >
         {/* Read tool with CodeBlockViewer */}
         {useReadViewer && <ReadToolViewer linkedTool={linkedTool} />}
@@ -177,6 +186,9 @@ export const LinkedToolItem: React.FC<LinkedToolItemProps> = ({
         {/* Skill tool with instructions */}
         {useSkillViewer && <SkillToolViewer linkedTool={linkedTool} />}
 
+        {/* Bash tool with syntax-highlighted command */}
+        {useBashViewer && <BashToolViewer linkedTool={linkedTool} status={status} />}
+
         {/* Default rendering for other tools */}
         {useDefaultViewer && <DefaultToolViewer linkedTool={linkedTool} status={status} />}
 

src/renderer/components/chat/items/linkedTool/BashToolViewer.tsx

@@ -0,0 +1,52 @@
+/**
+ * BashToolViewer
+ *
+ * Renders Bash tool calls with syntax-highlighted command input
+ * via CodeBlockViewer and collapsible output section.
+ */
+
+import React from 'react';
+
+import { CodeBlockViewer } from '@renderer/components/chat/viewers';
+
+import { type ItemStatus } from '../BaseItem';
+
+import { CollapsibleOutputSection } from './CollapsibleOutputSection';
+import { renderOutput } from './renderHelpers';
+
+import type { LinkedToolItem } from '@renderer/types/groups';
+
+interface BashToolViewerProps {
+  linkedTool: LinkedToolItem;
+  status: ItemStatus;
+}
+
+export const BashToolViewer: React.FC<BashToolViewerProps> = ({ linkedTool, status }) => {
+  const command = linkedTool.input.command as string;
+  const description = linkedTool.input.description as string | undefined;
+
+  // Use the description (truncated) as the file name label, or fallback to "bash"
+  const fileName = description
+    ? description.length > 60
+      ? description.slice(0, 57) + '...'
+      : description
+    : 'bash';
+
+  return (
+    <>
+      {/* Input Section — Syntax-highlighted command */}
+      <CodeBlockViewer
+        fileName={fileName}
+        content={command}
+        language="bash"
+      />
+
+      {/* Output Section — Collapsible */}
+      {!linkedTool.isOrphaned && linkedTool.result && (
+        <CollapsibleOutputSection status={status}>
+          {renderOutput(linkedTool.result.content)}
+        </CollapsibleOutputSection>
+      )}
+    </>
+  );
+};

src/renderer/components/chat/items/linkedTool/CollapsibleOutputSection.tsx

@@ -0,0 +1,57 @@
+/**
+ * CollapsibleOutputSection
+ *
+ * Reusable component that wraps tool output in a collapsed-by-default section.
+ * Shows a clickable header with label, StatusDot, and chevron toggle.
+ */
+
+import React, { useState } from 'react';
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+import { type ItemStatus, StatusDot } from '../BaseItem';
+
+interface CollapsibleOutputSectionProps {
+  status: ItemStatus;
+  children: React.ReactNode;
+  /** Label shown in the header (default: "Output") */
+  label?: string;
+}
+
+export const CollapsibleOutputSection: React.FC<CollapsibleOutputSectionProps> = ({
+  status,
+  children,
+  label = 'Output',
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div>
+      <button
+        type="button"
+        className="mb-1 flex items-center gap-2 text-xs"
+        style={{ color: 'var(--tool-item-muted)', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+        {label}
+        <StatusDot status={status} />
+      </button>
+      {isExpanded && (
+        <div
+          className="max-h-96 overflow-auto rounded p-3 font-mono text-xs"
+          style={{
+            backgroundColor: 'var(--code-bg)',
+            border: '1px solid var(--code-border)',
+            color:
+              status === 'error'
+                ? 'var(--tool-result-error-text)'
+                : 'var(--color-text-secondary)',
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

src/renderer/components/chat/items/linkedTool/DefaultToolViewer.tsx

@@ -6,8 +6,9 @@
 
 import React from 'react';
 
-import { type ItemStatus, StatusDot } from '../BaseItem';
+import { type ItemStatus } from '../BaseItem';
 
+import { CollapsibleOutputSection } from './CollapsibleOutputSection';
 import { renderInput, renderOutput } from './renderHelpers';
 
 import type { LinkedToolItem } from '@renderer/types/groups';
@@ -37,30 +38,11 @@ export const DefaultToolViewer: React.FC<DefaultToolViewerProps> = ({ linkedTool
         </div>
       </div>
 
-      {/* Output Section */}
+      {/* Output Section — Collapsed by default */}
       {!linkedTool.isOrphaned && linkedTool.result && (
-        <div>
-          <div
-            className="mb-1 flex items-center gap-2 text-xs"
-            style={{ color: 'var(--tool-item-muted)' }}
-          >
-            Output
-            <StatusDot status={status} />
-          </div>
-          <div
-            className="max-h-96 overflow-auto rounded p-3 font-mono text-xs"
-            style={{
-              backgroundColor: 'var(--code-bg)',
-              border: '1px solid var(--code-border)',
-              color:
-                status === 'error'
-                  ? 'var(--tool-result-error-text)'
-                  : 'var(--color-text-secondary)',
-            }}
-          >
-            {renderOutput(linkedTool.result.content)}
-          </div>
-        </div>
+        <CollapsibleOutputSection status={status}>
+          {renderOutput(linkedTool.result.content)}
+        </CollapsibleOutputSection>
       )}
     </>
   );

src/renderer/components/chat/items/linkedTool/ReadToolViewer.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { CodeBlockViewer } from '@renderer/components/chat/viewers';
+import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers';
 
 import type { LinkedToolItem } from '@renderer/types/groups';
 
@@ -54,12 +54,49 @@ export const ReadToolViewer: React.FC<ReadToolViewerProps> = ({ linkedTool }) =>
       ? startLine + limit - 1
       : undefined;
 
+  const isMarkdownFile = /\.mdx?$/i.test(filePath);
+  const [viewMode, setViewMode] = React.useState<'code' | 'preview'>(isMarkdownFile ? 'preview' : 'code');
+
   return (
-    <CodeBlockViewer
-      fileName={filePath}
-      content={content}
-      startLine={startLine}
-      endLine={endLine}
-    />
+    <div className="space-y-2">
+      {isMarkdownFile && (
+        <div className="flex items-center justify-end gap-1">
+          <button
+            type="button"
+            onClick={() => setViewMode('code')}
+            className="rounded px-2 py-1 text-xs transition-colors"
+            style={{
+              backgroundColor: viewMode === 'code' ? 'var(--tag-bg)' : 'transparent',
+              color: viewMode === 'code' ? 'var(--tag-text)' : 'var(--color-text-muted)',
+              border: '1px solid var(--tag-border)',
+            }}
+          >
+            Code
+          </button>
+          <button
+            type="button"
+            onClick={() => setViewMode('preview')}
+            className="rounded px-2 py-1 text-xs transition-colors"
+            style={{
+              backgroundColor: viewMode === 'preview' ? 'var(--tag-bg)' : 'transparent',
+              color: viewMode === 'preview' ? 'var(--tag-text)' : 'var(--color-text-muted)',
+              border: '1px solid var(--tag-border)',
+            }}
+          >
+            Preview
+          </button>
+        </div>
+      )}
+      {isMarkdownFile && viewMode === 'preview' ? (
+        <MarkdownViewer content={content} label="Markdown Preview" copyable />
+      ) : (
+        <CodeBlockViewer
+          fileName={filePath}
+          content={content}
+          startLine={startLine}
+          endLine={endLine}
+        />
+      )}
+    </div>
   );
 };

src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx

@@ -21,7 +21,7 @@ export const WriteToolViewer: React.FC<WriteToolViewerProps> = ({ linkedTool })
   const content = (toolUseResult?.content as string) || (linkedTool.input.content as string) || '';
   const isCreate = toolUseResult?.type === 'create';
   const isMarkdownFile = /\.mdx?$/i.test(filePath);
-  const [viewMode, setViewMode] = React.useState<'code' | 'preview'>('code');
+  const [viewMode, setViewMode] = React.useState<'code' | 'preview'>(isMarkdownFile ? 'preview' : 'code');
 
   return (
     <div className="space-y-2">

src/renderer/components/chat/items/linkedTool/index.ts

@@ -4,6 +4,8 @@
  * Exports all specialized tool viewer components.
  */
 
+export { BashToolViewer } from './BashToolViewer';
+export { CollapsibleOutputSection } from './CollapsibleOutputSection';
 export { DefaultToolViewer } from './DefaultToolViewer';
 export { EditToolViewer } from './EditToolViewer';
 export { ReadToolViewer } from './ReadToolViewer';