fix: hide empty tool input card and remove user prompt copy button

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/UserChatGroup.tsx

@@ -10,8 +10,6 @@ import { User } from 'lucide-react';
 import remarkGfm from 'remark-gfm';
 import { useShallow } from 'zustand/react/shallow';
 
-import { CopyButton } from '../common/CopyButton';
-
 import {
   createSearchContext,
   highlightSearchInChildren,
@@ -439,8 +437,6 @@ const UserChatGroupInner = ({ userGroup }: Readonly<UserChatGroupProps>): React.
               boxShadow: 'var(--chat-user-shadow)',
             }}
           >
-            <CopyButton text={textContent} bgColor="var(--chat-user-bg)" />
-
             <div className="text-sm" style={{ color: 'var(--chat-user-text)' }} data-search-content>
               <ReactMarkdown remarkPlugins={[remarkGfm]} components={userMarkdownComponents}>
                 {displayText}

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';
@@ -18,50 +19,35 @@ interface DefaultToolViewerProps {
 }
 
 export const DefaultToolViewer: React.FC<DefaultToolViewerProps> = ({ linkedTool, status }) => {
+  const hasInput = Object.keys(linkedTool.input).length > 0;
+
   return (
     <>
       {/* Input Section */}
-      <div>
-        <div className="mb-1 text-xs" style={{ color: 'var(--tool-item-muted)' }}>
-          Input
-        </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: 'var(--color-text-secondary)',
-          }}
-        >
-          {renderInput(linkedTool.name, linkedTool.input)}
-        </div>
-      </div>
-
-      {/* Output Section */}
-      {!linkedTool.isOrphaned && linkedTool.result && (
+      {hasInput && (
         <div>
-          <div
-            className="mb-1 flex items-center gap-2 text-xs"
-            style={{ color: 'var(--tool-item-muted)' }}
-          >
-            Output
-            <StatusDot status={status} />
+          <div className="mb-1 text-xs" style={{ color: 'var(--tool-item-muted)' }}>
+            Input
           </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)',
+              color: 'var(--color-text-secondary)',
             }}
           >
-            {renderOutput(linkedTool.result.content)}
+            {renderInput(linkedTool.name, linkedTool.input)}
           </div>
         </div>
       )}
+
+      {/* Output Section — Collapsed by default */}
+      {!linkedTool.isOrphaned && linkedTool.result && (
+        <CollapsibleOutputSection status={status}>
+          {renderOutput(linkedTool.result.content)}
+        </CollapsibleOutputSection>
+      )}
     </>
   );
 };