From 4a235a7ef98b95316321baaf9005a81cf5be9f55 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:32:10 -0500
Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=A4=96=20Add=20customizable=20F-key?=
 =?UTF-8?q?=20macros?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add F1-F10 keybind bar above workspace title
- Click F-key buttons to edit macro messages
- Press F-keys to send messages (supports slash commands)
- Configuration stored in ~/.cmux/keybinds.jsonc
- Full IPC plumbing with type-safe backend service
- 8 unit tests for keybind service (all passing)

Backend:
- KeybindService for loading/saving keybinds.jsonc
- IPC handlers for get/set operations
- Type definitions for keybind actions

Frontend:
- FKeyBar component showing F1-F10 buttons
- EditKeybindModal for configuring macros
- useFKeyBinds hook for global keyboard handling
- Extended ChatInputAPI with sendMessage() method

Generated with `cmux`
---
 src/components/AIView.tsx           |  77 +++++++++++++
 src/components/ChatInput.tsx        |  39 +++++--
 src/components/EditKeybindModal.tsx | 168 ++++++++++++++++++++++++++++
 src/components/FKeyBar.tsx          | 105 +++++++++++++++++
 src/constants/ipc-constants.ts      |   4 +
 src/hooks/useFKeyBinds.ts           |  49 ++++++++
 src/preload.ts                      |   4 +
 src/services/ipcMain.ts             |  15 +++
 src/services/keybindService.test.ts | 127 +++++++++++++++++++++
 src/services/keybindService.ts      | 117 +++++++++++++++++++
 src/types/ipc.ts                    |   4 +
 src/types/keybinds.ts               |  19 ++++
 12 files changed, 721 insertions(+), 7 deletions(-)
 create mode 100644 src/components/EditKeybindModal.tsx
 create mode 100644 src/components/FKeyBar.tsx
 create mode 100644 src/hooks/useFKeyBinds.ts
 create mode 100644 src/services/keybindService.test.ts
 create mode 100644 src/services/keybindService.ts
 create mode 100644 src/types/keybinds.ts

diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index e4e94dbb7..753e3f061 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -28,6 +28,10 @@ import { useGitStatus } from "@/stores/GitStatusStore";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
 import type { DisplayedMessage } from "@/types/message";
 import { useAIViewKeybinds } from "@/hooks/useAIViewKeybinds";
+import { FKeyBar } from "./FKeyBar";
+import { EditKeybindModal } from "./EditKeybindModal";
+import { useFKeyBinds } from "@/hooks/useFKeyBinds";
+import type { Keybind, KeybindsConfig } from "@/types/keybinds";
 
 const ViewContainer = styled.div`
   flex: 1;
@@ -230,6 +234,17 @@ const AIViewInner: React.FC<AIViewProps> = ({
     { listener: true } // Enable cross-component synchronization
   );
 
+  // Keybinds state
+  const [keybinds, setKeybinds] = useState<KeybindsConfig>([]);
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editingKey, setEditingKey] = useState<string>("");
+  const [editingKeyMessage, setEditingKeyMessage] = useState<string>("");
+
+  // Load keybinds on mount
+  useEffect(() => {
+    void window.api.keybinds.get().then(setKeybinds);
+  }, []);
+
   // Use auto-scroll hook for scroll management
   const {
     contentRef,
@@ -313,6 +328,50 @@ const AIViewInner: React.FC<AIViewProps> = ({
     void window.api.workspace.openTerminal(namedWorkspacePath);
   }, [namedWorkspacePath]);
 
+  // Keybind handlers
+  const handleEditKeybind = useCallback((key: string, currentMessage = "") => {
+    setEditingKey(key);
+    setEditingKeyMessage(currentMessage);
+    setEditModalOpen(true);
+  }, []);
+
+  const handleSaveKeybind = useCallback(
+    async (message: string) => {
+      const trimmedMessage = message.trim();
+
+      if (trimmedMessage) {
+        // Save or update keybind
+        const newKeybind: Keybind = {
+          key: editingKey,
+          action: { type: "send_message", message: trimmedMessage },
+        };
+        const updated = [...keybinds.filter((kb) => kb.key !== editingKey), newKeybind];
+        await window.api.keybinds.set(updated);
+        setKeybinds(updated);
+      } else {
+        // Empty message means delete
+        const updated = keybinds.filter((kb) => kb.key !== editingKey);
+        await window.api.keybinds.set(updated);
+        setKeybinds(updated);
+      }
+
+      setEditModalOpen(false);
+    },
+    [editingKey, keybinds]
+  );
+
+  const handleClearKeybind = useCallback(async () => {
+    // Remove the keybind
+    const updated = keybinds.filter((kb) => kb.key !== editingKey);
+    await window.api.keybinds.set(updated);
+    setKeybinds(updated);
+    setEditModalOpen(false);
+  }, [editingKey, keybinds]);
+
+  const handleCloseKeybindModal = useCallback(() => {
+    setEditModalOpen(false);
+  }, []);
+
   // Auto-scroll when messages update (during streaming)
   useEffect(() => {
     if (workspaceState && autoScroll) {
@@ -347,6 +406,13 @@ const AIViewInner: React.FC<AIViewProps> = ({
     handleOpenTerminal,
   });
 
+  // F-key keybinds hook (disabled when modal is open)
+  useFKeyBinds({
+    keybinds,
+    chatInputAPI,
+    enabled: !editModalOpen,
+  });
+
   // Clear editing state if the message being edited no longer exists
   // Must be before early return to satisfy React Hooks rules
   useEffect(() => {
@@ -454,6 +520,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
           </WorkspaceTitle>
         </ViewHeader>
 
+        <FKeyBar keybinds={keybinds} onEditKeybind={handleEditKeybind} />
+
         <OutputContainer>
           <OutputContent
             ref={contentRef}
@@ -560,6 +628,15 @@ const AIViewInner: React.FC<AIViewProps> = ({
       </ChatArea>
 
       <ChatMetaSidebar key={workspaceId} workspaceId={workspaceId} chatAreaRef={chatAreaRef} />
+
+      <EditKeybindModal
+        isOpen={editModalOpen}
+        fKey={editingKey}
+        currentMessage={editingKeyMessage}
+        onSave={handleSaveKeybind}
+        onClear={handleClearKeybind}
+        onClose={handleCloseKeybindModal}
+      />
     </ViewContainer>
   );
 };
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index a5f0523d7..b39c4581d 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -120,6 +120,7 @@ const ModelDisplayWrapper = styled.div`
 
 export interface ChatInputAPI {
   focus: () => void;
+  sendMessage: (message: string) => void;
 }
 
 export interface ChatInputProps {
@@ -430,13 +431,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     });
   }, []);
 
-  // Provide API to parent via callback
-  useEffect(() => {
-    if (onReady) {
-      onReady({ focus: focusMessageInput });
-    }
-  }, [onReady, focusMessageInput]);
-
   useEffect(() => {
     const handleGlobalKeyDown = (event: KeyboardEvent) => {
       if (isEditableElement(event.target)) {
@@ -942,6 +936,37 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     }
   };
 
+  // Programmatically send a message (for F-key macros, etc.)
+  const sendMessageProgrammatically = useCallback(
+    (message: string) => {
+      if (!message.trim() || disabled || isSending || isCompacting) {
+        return;
+      }
+
+      // Set the input value and let the regular send flow handle it
+      setInput(message);
+      // Focus the input to show what's being sent
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+      // Trigger send after a brief delay to ensure state updates
+      setTimeout(() => {
+        void handleSend();
+      }, 10);
+    },
+    [disabled, isSending, isCompacting, setInput, handleSend]
+  );
+
+  // Provide API to parent via callback
+  useEffect(() => {
+    if (onReady) {
+      onReady({
+        focus: focusMessageInput,
+        sendMessage: sendMessageProgrammatically,
+      });
+    }
+  }, [onReady, focusMessageInput, sendMessageProgrammatically]);
+
   // Build placeholder text based on current state
   const placeholder = (() => {
     if (editingMessage) {
diff --git a/src/components/EditKeybindModal.tsx b/src/components/EditKeybindModal.tsx
new file mode 100644
index 000000000..cdf0aa93a
--- /dev/null
+++ b/src/components/EditKeybindModal.tsx
@@ -0,0 +1,168 @@
+import React, { useState, useEffect, useRef } from "react";
+import styled from "@emotion/styled";
+import { Modal } from "./Modal";
+
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 500px;
+`;
+
+const Label = styled.label`
+  font-size: 13px;
+  color: #ccc;
+  margin-bottom: 6px;
+  display: block;
+`;
+
+const TextArea = styled.textarea`
+  width: 100%;
+  min-height: 100px;
+  padding: 8px;
+  background: #1e1e1e;
+  border: 1px solid #3e3e42;
+  border-radius: 3px;
+  color: #d4d4d4;
+  font-family: var(--font-monospace);
+  font-size: 13px;
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+    border-color: #007acc;
+  }
+`;
+
+const ButtonRow = styled.div`
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+`;
+
+const Button = styled.button<{ variant?: "primary" | "danger" }>`
+  padding: 6px 16px;
+  border-radius: 3px;
+  font-size: 13px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s ease;
+
+  ${(props) => {
+    if (props.variant === "primary") {
+      return `
+        background: #007acc;
+        color: white;
+        &:hover { background: #005a9e; }
+        &:disabled {
+          background: #555;
+          color: #888;
+          cursor: not-allowed;
+        }
+      `;
+    } else if (props.variant === "danger") {
+      return `
+        background: #c72e2e;
+        color: white;
+        &:hover { background: #a02020; }
+      `;
+    } else {
+      return `
+        background: #3e3e42;
+        color: #ccc;
+        &:hover { background: #505055; }
+      `;
+    }
+  }}
+`;
+
+const HintText = styled.div`
+  font-size: 12px;
+  color: #888;
+  line-height: 1.4;
+`;
+
+interface EditKeybindModalProps {
+  isOpen: boolean;
+  fKey: string;
+  currentMessage: string;
+  onSave: (message: string) => void;
+  onClear: () => void;
+  onClose: () => void;
+}
+
+export function EditKeybindModal({
+  isOpen,
+  fKey,
+  currentMessage,
+  onSave,
+  onClear,
+  onClose,
+}: EditKeybindModalProps) {
+  const [message, setMessage] = useState(currentMessage);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Reset message when modal opens with new key
+  useEffect(() => {
+    setMessage(currentMessage);
+  }, [currentMessage, isOpen]);
+
+  // Focus textarea when modal opens
+  useEffect(() => {
+    if (isOpen && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const handleSave = () => {
+    onSave(message.trim());
+  };
+
+  const handleClear = () => {
+    onClear();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Ctrl+Enter / Cmd+Enter to save
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={`Edit ${fKey} Macro`}>
+      <ModalContent>
+        <div>
+          <Label htmlFor="keybind-message">Message to send:</Label>
+          <TextArea
+            ref={textareaRef}
+            id="keybind-message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Enter message (supports slash commands like /edit, /compact, etc.)"
+          />
+        </div>
+
+        <HintText>
+          Tip: You can use slash commands like <code>/edit</code>, <code>/compact</code>, or any
+          other message. Press Ctrl+Enter to save.
+        </HintText>
+
+        <ButtonRow>
+          {currentMessage && (
+            <Button variant="danger" onClick={handleClear}>
+              Clear
+            </Button>
+          )}
+          <Button onClick={onClose}>Cancel</Button>
+          <Button variant="primary" onClick={handleSave}>
+            Save
+          </Button>
+        </ButtonRow>
+      </ModalContent>
+    </Modal>
+  );
+}
+
diff --git a/src/components/FKeyBar.tsx b/src/components/FKeyBar.tsx
new file mode 100644
index 000000000..b34acc5a0
--- /dev/null
+++ b/src/components/FKeyBar.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import styled from "@emotion/styled";
+import type { Keybind } from "@/types/keybinds";
+import { TooltipWrapper, Tooltip } from "./Tooltip";
+
+const FKeyBarContainer = styled.div`
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  background: #252526;
+  border-bottom: 1px solid #3e3e42;
+  align-items: center;
+  flex-shrink: 0;
+  min-height: 28px;
+`;
+
+const FKeyButton = styled.button<{ isEmpty: boolean }>`
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  background: ${(props) => (props.isEmpty ? "transparent" : "#37373d")};
+  border: 1px solid ${(props) => (props.isEmpty ? "#3e3e42" : "#555")};
+  border-radius: 3px;
+  color: ${(props) => (props.isEmpty ? "#666" : "#ccc")};
+  font-family: var(--font-monospace);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+
+  &:hover {
+    background: ${(props) => (props.isEmpty ? "#2a2d2e" : "#45454a")};
+    border-color: ${(props) => (props.isEmpty ? "#555" : "#666")};
+    color: ${(props) => (props.isEmpty ? "#888" : "#fff")};
+  }
+
+  &:active {
+    background: ${(props) => (props.isEmpty ? "#1e1e1e" : "#505055")};
+  }
+`;
+
+const KeyLabel = styled.span`
+  font-weight: 600;
+  margin-right: 6px;
+  opacity: 0.8;
+`;
+
+const MessagePreview = styled.span`
+  opacity: 0.9;
+`;
+
+interface FKeyBarProps {
+  keybinds: Keybind[];
+  onEditKeybind: (key: string, currentMessage?: string) => void;
+}
+
+export function FKeyBar({ keybinds, onEditKeybind }: FKeyBarProps) {
+  // Create lookup map for quick access
+  const keybindMap = new Map(keybinds.map((kb) => [kb.key, kb]));
+
+  // Always show F1-F10 buttons
+  const fKeys = ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10"];
+
+  return (
+    <FKeyBarContainer>
+      {fKeys.map((key) => {
+        const keybind = keybindMap.get(key);
+        const message = keybind?.action.type === "send_message" ? keybind.action.message : "";
+        const isEmpty = !message;
+
+        return (
+          <TooltipWrapper key={key} inline>
+            <FKeyButton
+              isEmpty={isEmpty}
+              onClick={() => onEditKeybind(key, message)}
+              title={isEmpty ? `Configure ${key}` : message}
+            >
+              <KeyLabel>{key}</KeyLabel>
+              {!isEmpty && <MessagePreview>{truncateMessage(message, 15)}</MessagePreview>}
+            </FKeyButton>
+            {!isEmpty && (
+              <Tooltip position="bottom" align="center">
+                {message}
+              </Tooltip>
+            )}
+          </TooltipWrapper>
+        );
+      })}
+    </FKeyBarContainer>
+  );
+}
+
+/**
+ * Truncate message for preview display
+ */
+function truncateMessage(message: string, maxLength: number): string {
+  if (message.length <= maxLength) {
+    return message;
+  }
+  return message.substring(0, maxLength) + "...";
+}
+
diff --git a/src/constants/ipc-constants.ts b/src/constants/ipc-constants.ts
index c0100ed7f..9b8a0a84c 100644
--- a/src/constants/ipc-constants.ts
+++ b/src/constants/ipc-constants.ts
@@ -39,6 +39,10 @@ export const IPC_CHANNELS = {
   // Window channels
   WINDOW_SET_TITLE: "window:setTitle",
 
+  // Keybind channels
+  KEYBINDS_GET: "keybinds:get",
+  KEYBINDS_SET: "keybinds:set",
+
   // Dynamic channel prefixes
   WORKSPACE_CHAT_PREFIX: "workspace:chat:",
   WORKSPACE_METADATA: "workspace:metadata",
diff --git a/src/hooks/useFKeyBinds.ts b/src/hooks/useFKeyBinds.ts
new file mode 100644
index 000000000..8ecc72ee2
--- /dev/null
+++ b/src/hooks/useFKeyBinds.ts
@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import type { Keybind } from "@/types/keybinds";
+import type { ChatInputAPI } from "@/components/ChatInput";
+
+interface UseFKeyBindsParams {
+  keybinds: Keybind[];
+  chatInputAPI: React.RefObject<ChatInputAPI | null>;
+  enabled: boolean; // Disable when modal is open
+}
+
+/**
+ * Hook to handle F1-F10 key presses and trigger keybind actions
+ *
+ * When an F-key is pressed, looks up the keybind and sends the message
+ * through ChatInputAPI to ensure proper command parsing and validation.
+ */
+export function useFKeyBinds({ keybinds, chatInputAPI, enabled }: UseFKeyBindsParams): void {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Check if it's an F1-F10 key
+      if (!e.key.match(/^F([1-9]|10)$/)) {
+        return;
+      }
+
+      // Find matching keybind
+      const keybind = keybinds.find((kb) => kb.key === e.key);
+      if (!keybind) {
+        return;
+      }
+
+      // Only handle send_message actions for now
+      if (keybind.action.type === "send_message" && keybind.action.message) {
+        e.preventDefault();
+
+        // Send through ChatInputAPI to get command parsing, validation, etc.
+        const message = keybind.action.message;
+        chatInputAPI.current?.sendMessage(message);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [keybinds, chatInputAPI, enabled]);
+}
+
diff --git a/src/preload.ts b/src/preload.ts
index 632d7394e..9233bfd45 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -114,6 +114,10 @@ const api: IPCApi = {
   window: {
     setTitle: (title: string) => ipcRenderer.invoke(IPC_CHANNELS.WINDOW_SET_TITLE, title),
   },
+  keybinds: {
+    get: () => ipcRenderer.invoke(IPC_CHANNELS.KEYBINDS_GET),
+    set: (keybinds) => ipcRenderer.invoke(IPC_CHANNELS.KEYBINDS_SET, keybinds),
+  },
 };
 
 // Expose the API along with platform/versions
diff --git a/src/services/ipcMain.ts b/src/services/ipcMain.ts
index 01fd1b4c1..5ec79be52 100644
--- a/src/services/ipcMain.ts
+++ b/src/services/ipcMain.ts
@@ -28,6 +28,7 @@ import { createBashTool } from "@/services/tools/bash";
 import type { BashToolResult } from "@/types/tools";
 import { secretsToRecord } from "@/types/secrets";
 import { DisposableTempDir } from "@/services/tempDir";
+import { KeybindService } from "@/services/keybindService";
 
 /**
  * IpcMain - Manages all IPC handlers and service coordination
@@ -47,6 +48,7 @@ export class IpcMain {
   private readonly historyService: HistoryService;
   private readonly partialService: PartialService;
   private readonly aiService: AIService;
+  private readonly keybindService: KeybindService;
   private readonly sessions = new Map<string, AgentSession>();
   private readonly sessionSubscriptions = new Map<
     string,
@@ -60,6 +62,7 @@ export class IpcMain {
     this.historyService = new HistoryService(config);
     this.partialService = new PartialService(config, this.historyService);
     this.aiService = new AIService(config, this.historyService, this.partialService);
+    this.keybindService = new KeybindService(config.rootDir);
   }
 
   private getOrCreateSession(workspaceId: string): AgentSession {
@@ -144,6 +147,7 @@ export class IpcMain {
     this.registerWorkspaceHandlers(ipcMain);
     this.registerProviderHandlers(ipcMain);
     this.registerProjectHandlers(ipcMain);
+    this.registerKeybindHandlers(ipcMain);
     this.registerSubscriptionHandlers(ipcMain);
     this.registered = true;
   }
@@ -175,6 +179,17 @@ export class IpcMain {
     });
   }
 
+  private registerKeybindHandlers(ipcMain: ElectronIpcMain): void {
+    ipcMain.handle(IPC_CHANNELS.KEYBINDS_GET, () => {
+      return this.keybindService.loadKeybinds();
+    });
+
+    ipcMain.handle(IPC_CHANNELS.KEYBINDS_SET, (_event, keybinds: unknown) => {
+      // Type validation is handled by KeybindService.isValidKeybind
+      this.keybindService.saveKeybinds(keybinds as import("@/types/keybinds").KeybindsConfig);
+    });
+  }
+
   private registerWorkspaceHandlers(ipcMain: ElectronIpcMain): void {
     ipcMain.handle(
       IPC_CHANNELS.WORKSPACE_CREATE,
diff --git a/src/services/keybindService.test.ts b/src/services/keybindService.test.ts
new file mode 100644
index 000000000..cec6ef37c
--- /dev/null
+++ b/src/services/keybindService.test.ts
@@ -0,0 +1,127 @@
+import { describe, test, expect, beforeEach, afterEach } from "bun:test";
+import * as fs from "fs";
+import * as path from "path";
+import * as os from "os";
+import { KeybindService } from "./keybindService";
+import type { KeybindsConfig } from "@/types/keybinds";
+
+describe("KeybindService", () => {
+  let tempDir: string;
+  let service: KeybindService;
+
+  beforeEach(() => {
+    // Create a temporary directory for testing
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "keybind-test-"));
+    service = new KeybindService(tempDir);
+  });
+
+  afterEach(() => {
+    // Clean up temp directory
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  });
+
+  test("loadKeybinds returns empty array when file doesn't exist", () => {
+    const keybinds = service.loadKeybinds();
+    expect(keybinds).toEqual([]);
+  });
+
+  test("saveKeybinds creates file with valid JSON", () => {
+    const keybinds: KeybindsConfig = [
+      { key: "F1", action: { type: "send_message", message: "test" } },
+    ];
+
+    service.saveKeybinds(keybinds);
+
+    const keybindsFile = path.join(tempDir, "keybinds.jsonc");
+    expect(fs.existsSync(keybindsFile)).toBe(true);
+
+    const content = fs.readFileSync(keybindsFile, "utf-8");
+    expect(content).toContain("// Cmux F-Key Keybinds Configuration");
+    expect(content).toContain('"key": "F1"');
+    expect(content).toContain('"message": "test"');
+  });
+
+  test("loadKeybinds reads saved keybinds", () => {
+    const original: KeybindsConfig = [
+      { key: "F1", action: { type: "send_message", message: "hello" } },
+      { key: "F2", action: { type: "send_message", message: "world" } },
+    ];
+
+    service.saveKeybinds(original);
+    const loaded = service.loadKeybinds();
+
+    expect(loaded).toEqual(original);
+  });
+
+  test("loadKeybinds handles JSONC with comments", () => {
+    const keybindsFile = path.join(tempDir, "keybinds.jsonc");
+    const content = `
+// This is a comment
+[
+  // Another comment
+  { "key": "F1", "action": { "type": "send_message", "message": "test" } }
+]
+`;
+    fs.writeFileSync(keybindsFile, content);
+
+    const keybinds = service.loadKeybinds();
+    expect(keybinds).toEqual([
+      { key: "F1", action: { type: "send_message", message: "test" } },
+    ]);
+  });
+
+  test("loadKeybinds filters out invalid keybinds", () => {
+    const keybindsFile = path.join(tempDir, "keybinds.jsonc");
+    const content = `
+[
+  { "key": "F1", "action": { "type": "send_message", "message": "valid" } },
+  { "key": "F2" },
+  { "action": { "type": "send_message", "message": "no key" } },
+  { "key": "F3", "action": { "type": "unknown", "data": "invalid" } },
+  { "key": "F4", "action": { "type": "send_message", "message": 123 } }
+]
+`;
+    fs.writeFileSync(keybindsFile, content);
+
+    const keybinds = service.loadKeybinds();
+    expect(keybinds).toEqual([
+      { key: "F1", action: { type: "send_message", message: "valid" } },
+    ]);
+  });
+
+  test("loadKeybinds handles malformed JSON gracefully", () => {
+    const keybindsFile = path.join(tempDir, "keybinds.jsonc");
+    fs.writeFileSync(keybindsFile, "not valid json {{{");
+
+    const keybinds = service.loadKeybinds();
+    expect(keybinds).toEqual([]);
+  });
+
+  test("saveKeybinds overwrites existing file", () => {
+    const first: KeybindsConfig = [
+      { key: "F1", action: { type: "send_message", message: "first" } },
+    ];
+    const second: KeybindsConfig = [
+      { key: "F2", action: { type: "send_message", message: "second" } },
+    ];
+
+    service.saveKeybinds(first);
+    service.saveKeybinds(second);
+
+    const loaded = service.loadKeybinds();
+    expect(loaded).toEqual(second);
+  });
+
+  test("saveKeybinds handles empty array", () => {
+    service.saveKeybinds([]);
+
+    const keybindsFile = path.join(tempDir, "keybinds.jsonc");
+    expect(fs.existsSync(keybindsFile)).toBe(true);
+
+    const loaded = service.loadKeybinds();
+    expect(loaded).toEqual([]);
+  });
+});
+
diff --git a/src/services/keybindService.ts b/src/services/keybindService.ts
new file mode 100644
index 000000000..ef53d312e
--- /dev/null
+++ b/src/services/keybindService.ts
@@ -0,0 +1,117 @@
+/**
+ * KeybindService - Manages F-key macro keybinds
+ *
+ * Handles loading and saving keybinds from ~/.cmux/keybinds.jsonc
+ * Similar pattern to how Config class handles providers.jsonc
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+import * as jsonc from "jsonc-parser";
+import writeFileAtomic from "write-file-atomic";
+import type { KeybindsConfig, Keybind } from "@/types/keybinds";
+
+export class KeybindService {
+  private readonly keybindsFile: string;
+
+  constructor(rootDir: string) {
+    this.keybindsFile = path.join(rootDir, "keybinds.jsonc");
+  }
+
+  /**
+   * Load keybinds from keybinds.jsonc
+   * Returns empty array if file doesn't exist or can't be parsed
+   */
+  loadKeybinds(): KeybindsConfig {
+    try {
+      if (fs.existsSync(this.keybindsFile)) {
+        const data = fs.readFileSync(this.keybindsFile, "utf-8");
+        const parsed = jsonc.parse(data) as unknown;
+
+        if (Array.isArray(parsed)) {
+          // Validate each keybind has required structure
+          return parsed.filter(this.isValidKeybind);
+        }
+      }
+    } catch (error) {
+      console.error("Error loading keybinds:", error);
+    }
+
+    return [];
+  }
+
+  /**
+   * Save keybinds to keybinds.jsonc
+   * Writes atomically to prevent corruption
+   */
+  saveKeybinds(keybinds: KeybindsConfig): void {
+    try {
+      const dir = path.dirname(this.keybindsFile);
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+
+      // Format with comments for user guidance
+      const content = this.formatKeybindsWithComments(keybinds);
+      writeFileAtomic.sync(this.keybindsFile, content);
+    } catch (error) {
+      console.error("Error saving keybinds:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * Type guard to validate keybind structure
+   */
+  private isValidKeybind(item: unknown): item is Keybind {
+    if (typeof item !== "object" || item === null) {
+      return false;
+    }
+
+    const candidate = item as Record<string, unknown>;
+
+    // Validate key field
+    if (typeof candidate.key !== "string") {
+      return false;
+    }
+
+    // Validate action field
+    if (typeof candidate.action !== "object" || candidate.action === null) {
+      return false;
+    }
+
+    const action = candidate.action as Record<string, unknown>;
+
+    // Currently only support send_message action
+    if (action.type === "send_message") {
+      return typeof action.message === "string";
+    }
+
+    return false;
+  }
+
+  /**
+   * Format keybinds config with helpful comments
+   */
+  private formatKeybindsWithComments(keybinds: KeybindsConfig): string {
+    const header = [
+      "// Cmux F-Key Keybinds Configuration",
+      "// This file defines custom macros for F1-F10 keys",
+      "//",
+      "// Each keybind has:",
+      '//   - key: The F-key name (e.g., "F1", "F2", ...)',
+      "//   - action: What happens when the key is pressed",
+      "//",
+      "// Supported actions:",
+      '//   - send_message: Send a message to the AI (supports slash commands)',
+      "//",
+      "// Examples:",
+      '//   { "key": "F1", "action": { "type": "send_message", "message": "/edit Add tests" } }',
+      '//   { "key": "F2", "action": { "type": "send_message", "message": "continue" } }',
+      "",
+    ].join("\n");
+
+    return header + JSON.stringify(keybinds, null, 2) + "\n";
+  }
+}
+
diff --git a/src/types/ipc.ts b/src/types/ipc.ts
index 128875a0a..dc2c89917 100644
--- a/src/types/ipc.ts
+++ b/src/types/ipc.ts
@@ -239,4 +239,8 @@ export interface IPCApi {
   window: {
     setTitle(title: string): Promise<void>;
   };
+  keybinds: {
+    get(): Promise<import("./keybinds").KeybindsConfig>;
+    set(keybinds: import("./keybinds").KeybindsConfig): Promise<void>;
+  };
 }
diff --git a/src/types/keybinds.ts b/src/types/keybinds.ts
new file mode 100644
index 000000000..93a4019ce
--- /dev/null
+++ b/src/types/keybinds.ts
@@ -0,0 +1,19 @@
+/**
+ * Type definitions for customizable F-key keybinds
+ */
+
+export interface SendMessageAction {
+  type: "send_message";
+  message: string;
+}
+
+// Union type to easily add more action types in the future
+export type KeybindAction = SendMessageAction;
+
+export interface Keybind {
+  key: string; // "F1" through "F10"
+  action: KeybindAction;
+}
+
+export type KeybindsConfig = Keybind[];
+

From 5fc7cd8e044dc64c429d7259aa68ec2d9385d0e1 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:35:37 -0500
Subject: [PATCH 02/10] Move F-key bar above workspace title bar

---
 src/components/AIView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index 753e3f061..84659d318 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -492,6 +492,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <ViewContainer className={className}>
       <ChatArea ref={chatAreaRef}>
+        <FKeyBar keybinds={keybinds} onEditKeybind={handleEditKeybind} />
+
         <ViewHeader>
           <WorkspaceTitle>
             <StatusIndicator
@@ -520,8 +522,6 @@ const AIViewInner: React.FC<AIViewProps> = ({
           </WorkspaceTitle>
         </ViewHeader>
 
-        <FKeyBar keybinds={keybinds} onEditKeybind={handleEditKeybind} />
-
         <OutputContainer>
           <OutputContent
             ref={contentRef}

From 069e9cc655f3e5dc47f380aa4268c5ac5835ca74 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:36:31 -0500
Subject: [PATCH 03/10] Make F-key buttons more compact and keyboard-like

- Reduced vertical spacing (3px padding instead of 4px)
- Added gradient background for depth
- Added subtle shadow and bottom border for 3D effect
- Buttons raise on hover, depress on click
- Smaller font size (10px) for compact look
---
 src/components/FKeyBar.tsx | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/FKeyBar.tsx b/src/components/FKeyBar.tsx
index b34acc5a0..8ae6283a6 100644
--- a/src/components/FKeyBar.tsx
+++ b/src/components/FKeyBar.tsx
@@ -5,47 +5,57 @@ import { TooltipWrapper, Tooltip } from "./Tooltip";
 
 const FKeyBarContainer = styled.div`
   display: flex;
-  gap: 4px;
-  padding: 4px 8px;
-  background: #252526;
+  gap: 3px;
+  padding: 3px 6px;
+  background: #1e1e1e;
   border-bottom: 1px solid #3e3e42;
   align-items: center;
   flex-shrink: 0;
-  min-height: 28px;
 `;
 
 const FKeyButton = styled.button<{ isEmpty: boolean }>`
   flex: 1;
   min-width: 0;
-  padding: 4px 8px;
-  background: ${(props) => (props.isEmpty ? "transparent" : "#37373d")};
+  padding: 2px 6px;
+  background: ${(props) =>
+    props.isEmpty
+      ? "linear-gradient(180deg, #2d2d30 0%, #252526 100%)"
+      : "linear-gradient(180deg, #3e3e42 0%, #2d2d30 100%)"};
   border: 1px solid ${(props) => (props.isEmpty ? "#3e3e42" : "#555")};
+  border-bottom: 2px solid ${(props) => (props.isEmpty ? "#1e1e1e" : "#3e3e42")};
   border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   color: ${(props) => (props.isEmpty ? "#666" : "#ccc")};
   font-family: var(--font-monospace);
-  font-size: 11px;
+  font-size: 10px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all 0.1s ease;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: left;
 
   &:hover {
-    background: ${(props) => (props.isEmpty ? "#2a2d2e" : "#45454a")};
+    background: ${(props) =>
+      props.isEmpty
+        ? "linear-gradient(180deg, #3e3e42 0%, #2d2d30 100%)"
+        : "linear-gradient(180deg, #4e4e52 0%, #3e3e42 100%)"};
     border-color: ${(props) => (props.isEmpty ? "#555" : "#666")};
     color: ${(props) => (props.isEmpty ? "#888" : "#fff")};
+    transform: translateY(-1px);
   }
 
   &:active {
-    background: ${(props) => (props.isEmpty ? "#1e1e1e" : "#505055")};
+    transform: translateY(1px);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
+    border-bottom-width: 1px;
   }
 `;
 
 const KeyLabel = styled.span`
   font-weight: 600;
-  margin-right: 6px;
-  opacity: 0.8;
+  margin-right: 4px;
+  opacity: 0.9;
 `;
 
 const MessagePreview = styled.span`

From a72ccc2a64dc2b4ef2aa512d531e40eae6429053 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:38:13 -0500
Subject: [PATCH 04/10] Fix modal layout conflict in EditKeybindModal

- Rename ModalContent to KeybindModalContent to avoid conflict with Modal's built-in ModalContent
- Remove min-width: 500px (Modal already handles responsive width)
- Fixes textarea overflow issue
---
 src/components/EditKeybindModal.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/EditKeybindModal.tsx b/src/components/EditKeybindModal.tsx
index cdf0aa93a..c5abac471 100644
--- a/src/components/EditKeybindModal.tsx
+++ b/src/components/EditKeybindModal.tsx
@@ -2,11 +2,10 @@ import React, { useState, useEffect, useRef } from "react";
 import styled from "@emotion/styled";
 import { Modal } from "./Modal";
 
-const ModalContent = styled.div`
+const KeybindModalContent = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
-  min-width: 500px;
 `;
 
 const Label = styled.label`
@@ -132,7 +131,7 @@ export function EditKeybindModal({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={`Edit ${fKey} Macro`}>
-      <ModalContent>
+      <KeybindModalContent>
         <div>
           <Label htmlFor="keybind-message">Message to send:</Label>
           <TextArea
@@ -161,7 +160,7 @@ export function EditKeybindModal({
             Save
           </Button>
         </ButtonRow>
-      </ModalContent>
+      </KeybindModalContent>
     </Modal>
   );
 }

From 73725396dea0a340136c9135c56338a50e8bdaa2 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:41:01 -0500
Subject: [PATCH 05/10] Change F-key behavior: append to existing messages,
 auto-send when empty

- If chat input has text: append macro message with space separator
- If chat input is empty: set message and auto-send immediately
- Move cursor to end after appending for easy editing
---
 src/components/ChatInput.tsx | 39 +++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index b39c4581d..2a9dd1a26 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -943,18 +943,37 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         return;
       }
 
-      // Set the input value and let the regular send flow handle it
-      setInput(message);
-      // Focus the input to show what's being sent
-      if (inputRef.current) {
-        inputRef.current.focus();
+      const currentInput = input.trim();
+      
+      if (currentInput) {
+        // If there's existing input, append the message (don't auto-send)
+        const newInput = currentInput + " " + message;
+        setInput(newInput);
+        // Focus the input so user can edit/send
+        if (inputRef.current) {
+          inputRef.current.focus();
+          // Move cursor to end
+          setTimeout(() => {
+            if (inputRef.current) {
+              inputRef.current.selectionStart = inputRef.current.value.length;
+              inputRef.current.selectionEnd = inputRef.current.value.length;
+            }
+          }, 0);
+        }
+      } else {
+        // If input is empty, set the message and auto-send
+        setInput(message);
+        // Focus the input to show what's being sent
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+        // Trigger send after a brief delay to ensure state updates
+        setTimeout(() => {
+          void handleSend();
+        }, 10);
       }
-      // Trigger send after a brief delay to ensure state updates
-      setTimeout(() => {
-        void handleSend();
-      }, 10);
     },
-    [disabled, isSending, isCompacting, setInput, handleSend]
+    [disabled, isSending, isCompacting, input, setInput, handleSend]
   );
 
   // Provide API to parent via callback

From d3f4cbae2d584daa94aa10fc6f9edce7724fe6bb Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:42:42 -0500
Subject: [PATCH 06/10] Fix F-key auto-send by bypassing state update delay

- Directly invoke send logic instead of relying on setState + handleSend
- Duplicate minimal send logic to avoid state timing issues
- Handles all command types (/clear, /truncate, /compact, etc.)
- Auto-send now works reliably when input is empty
---
 src/components/ChatInput.tsx | 150 ++++++++++++++++++++++++++++++++---
 1 file changed, 139 insertions(+), 11 deletions(-)

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 2a9dd1a26..ac1476a58 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -961,19 +961,147 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           }, 0);
         }
       } else {
-        // If input is empty, set the message and auto-send
-        setInput(message);
-        // Focus the input to show what's being sent
-        if (inputRef.current) {
-          inputRef.current.focus();
-        }
-        // Trigger send after a brief delay to ensure state updates
-        setTimeout(() => {
-          void handleSend();
-        }, 10);
+        // If input is empty, auto-send immediately
+        // Bypass state by directly invoking send with the message
+        const sendDirectly = async () => {
+          const messageText = message.trim();
+          
+          try {
+            // Parse command
+            const parsed = parseCommand(messageText);
+
+            if (parsed) {
+              // Handle /clear command
+              if (parsed.type === "clear") {
+                await onTruncateHistory(1.0);
+                setToast({
+                  id: Date.now().toString(),
+                  type: "success",
+                  message: "Chat history cleared",
+                });
+                return;
+              }
+
+              // Handle /truncate command
+              if (parsed.type === "truncate") {
+                await onTruncateHistory(parsed.percentage);
+                setToast({
+                  id: Date.now().toString(),
+                  type: "success",
+                  message: `Chat history truncated by ${Math.round(parsed.percentage * 100)}%`,
+                });
+                return;
+              }
+
+              // Handle /providers set command
+              if (parsed.type === "providers-set" && onProviderConfig) {
+                setIsSending(true);
+                try {
+                  await onProviderConfig(parsed.provider, parsed.keyPath, parsed.value);
+                  setToast({
+                    id: Date.now().toString(),
+                    type: "success",
+                    message: `Provider ${parsed.provider} configuration updated`,
+                  });
+                } catch (error) {
+                  setToast({
+                    id: Date.now().toString(),
+                    type: "error",
+                    message:
+                      error instanceof Error
+                        ? error.message
+                        : "Failed to update provider configuration",
+                  });
+                } finally {
+                  setIsSending(false);
+                }
+                return;
+              }
+
+              // Handle /compact command
+              if (parsed.type === "compact") {
+                setIsSending(true);
+                try {
+                  const { messageText: compactionMessage, metadata, options } = 
+                    prepareCompactionMessage(messageText, sendMessageOptions);
+                  
+                  const result = await window.api.workspace.sendMessage(workspaceId, compactionMessage, {
+                    ...sendMessageOptions,
+                    ...options,
+                    cmuxMetadata: metadata,
+                  });
+
+                  if (!result.success) {
+                    console.error("Failed to send message:", result.error);
+                    setToast(createErrorToast(result.error));
+                  } else {
+                    telemetry.messageSent(sendMessageOptions.model, mode, compactionMessage.length);
+                    onMessageSent?.();
+                  }
+                } catch (error) {
+                  console.error("Unexpected error sending message:", error);
+                  setToast(
+                    createErrorToast({
+                      type: "unknown",
+                      raw: error instanceof Error ? error.message : "Failed to send message",
+                    })
+                  );
+                } finally {
+                  setIsSending(false);
+                }
+                return;
+              }
+
+              // Handle other commands with toast display
+              const commandToast = createCommandToast(parsed);
+              if (commandToast) {
+                setToast(commandToast);
+                return;
+              }
+            }
+
+            // Regular message send
+            setIsSending(true);
+            const result = await window.api.workspace.sendMessage(workspaceId, messageText, {
+              ...sendMessageOptions,
+            });
+
+            if (!result.success) {
+              console.error("Failed to send message:", result.error);
+              setToast(createErrorToast(result.error));
+            } else {
+              telemetry.messageSent(sendMessageOptions.model, mode, messageText.length);
+              onMessageSent?.();
+            }
+          } catch (error) {
+            console.error("Unexpected error sending message:", error);
+            setToast(
+              createErrorToast({
+                type: "unknown",
+                raw: error instanceof Error ? error.message : "Failed to send message",
+              })
+            );
+          } finally {
+            setIsSending(false);
+          }
+        };
+
+        void sendDirectly();
       }
     },
-    [disabled, isSending, isCompacting, input, setInput, handleSend]
+    [
+      disabled,
+      isSending,
+      isCompacting,
+      input,
+      setInput,
+      onTruncateHistory,
+      onProviderConfig,
+      sendMessageOptions,
+      workspaceId,
+      onMessageSent,
+      mode,
+    ]
   );
 
   // Provide API to parent via callback

From c5e808372feb8d314d8e5c85d95fb1655d72fcfd Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:46:07 -0500
Subject: [PATCH 07/10] Refactor ChatInput: eliminate duplicated send logic

- Refactored handleSend to accept optional messageOverride parameter
- Added clearInputIfNeeded helper to avoid clearing on programmatic sends
- Simplified sendMessageProgrammatically from 150+ lines to ~25 lines
- Eliminated complete duplication of command parsing and send logic
- Single source of truth for all message sending

This fixes the messiness from having duplicate send logic in two places.
---
 src/components/ChatInput.tsx | 186 +++++------------------------------
 1 file changed, 26 insertions(+), 160 deletions(-)

diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index ac1476a58..1b98cae24 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -607,13 +607,25 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     [setInput]
   );
 
-  const handleSend = async () => {
+  const handleSend = async (messageOverride?: string) => {
+    // Use override message if provided (for programmatic sends), otherwise use input state
+    const messageText = messageOverride?.trim() ?? input.trim();
+    const isProgrammaticSend = messageOverride !== undefined;
+    
     // Allow sending if there's text or images
-    if ((!input.trim() && imageAttachments.length === 0) || disabled || isSending || isCompacting) {
+    if ((!messageText && imageAttachments.length === 0) || disabled || isSending || isCompacting) {
       return;
     }
 
-    const messageText = input.trim();
+    // Helper to clear input only for non-programmatic sends
+    const clearInputIfNeeded = () => {
+      if (!isProgrammaticSend) {
+        setInput("");
+        if (inputRef.current) {
+          inputRef.current.style.height = "36px";
+        }
+      }
+    };
 
     try {
       // Parse command
@@ -622,10 +634,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       if (parsed) {
         // Handle /clear command
         if (parsed.type === "clear") {
-          setInput("");
-          if (inputRef.current) {
-            inputRef.current.style.height = "36px";
-          }
+          clearInputIfNeeded();
           await onTruncateHistory(1.0);
           setToast({
             id: Date.now().toString(),
@@ -637,10 +646,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
         // Handle /truncate command
         if (parsed.type === "truncate") {
-          setInput("");
-          if (inputRef.current) {
-            inputRef.current.style.height = "36px";
-          }
+          clearInputIfNeeded();
           await onTruncateHistory(parsed.percentage);
           setToast({
             id: Date.now().toString(),
@@ -653,7 +659,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         // Handle /providers set command
         if (parsed.type === "providers-set" && onProviderConfig) {
           setIsSending(true);
-          setInput(""); // Clear input immediately
+          clearInputIfNeeded();
 
           try {
             await onProviderConfig(parsed.provider, parsed.keyPath, parsed.value);
@@ -679,7 +685,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
         // Handle /model command
         if (parsed.type === "model-set") {
-          setInput(""); // Clear input immediately
+          clearInputIfNeeded();
           setPreferredModel(parsed.modelString);
           onModelChange?.(parsed.modelString);
           setToast({
@@ -692,7 +698,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
         // Handle /telemetry command
         if (parsed.type === "telemetry-set") {
-          setInput(""); // Clear input immediately
+          clearInputIfNeeded();
           setTelemetryEnabled(parsed.enabled);
           setToast({
             id: Date.now().toString(),
@@ -704,7 +710,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
         // Handle /compact command
         if (parsed.type === "compact") {
-          setInput(""); // Clear input immediately
+          clearInputIfNeeded();
           setIsSending(true);
 
           try {
@@ -755,7 +761,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
         // Handle /fork command
         if (parsed.type === "fork") {
-          setInput(""); // Clear input immediately
+          clearInputIfNeeded();
           setIsSending(true);
 
           try {
@@ -856,12 +862,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           telemetry.messageSent(sendMessageOptions.model, mode, actualMessageText.length);
 
           // Success - clear input and images
-          setInput("");
+          clearInputIfNeeded();
           setImageAttachments([]);
-          // Reset textarea height
-          if (inputRef.current) {
-            inputRef.current.style.height = "36px";
-          }
           // Exit editing mode if we were editing
           if (editingMessage && onCancelEdit) {
             onCancelEdit();
@@ -961,147 +963,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           }, 0);
         }
       } else {
-        // If input is empty, auto-send immediately
-        // Bypass state by directly invoking send with the message
-        const sendDirectly = async () => {
-          const messageText = message.trim();
-          
-          try {
-            // Parse command
-            const parsed = parseCommand(messageText);
-
-            if (parsed) {
-              // Handle /clear command
-              if (parsed.type === "clear") {
-                await onTruncateHistory(1.0);
-                setToast({
-                  id: Date.now().toString(),
-                  type: "success",
-                  message: "Chat history cleared",
-                });
-                return;
-              }
-
-              // Handle /truncate command
-              if (parsed.type === "truncate") {
-                await onTruncateHistory(parsed.percentage);
-                setToast({
-                  id: Date.now().toString(),
-                  type: "success",
-                  message: `Chat history truncated by ${Math.round(parsed.percentage * 100)}%`,
-                });
-                return;
-              }
-
-              // Handle /providers set command
-              if (parsed.type === "providers-set" && onProviderConfig) {
-                setIsSending(true);
-                try {
-                  await onProviderConfig(parsed.provider, parsed.keyPath, parsed.value);
-                  setToast({
-                    id: Date.now().toString(),
-                    type: "success",
-                    message: `Provider ${parsed.provider} configuration updated`,
-                  });
-                } catch (error) {
-                  setToast({
-                    id: Date.now().toString(),
-                    type: "error",
-                    message:
-                      error instanceof Error
-                        ? error.message
-                        : "Failed to update provider configuration",
-                  });
-                } finally {
-                  setIsSending(false);
-                }
-                return;
-              }
-
-              // Handle /compact command
-              if (parsed.type === "compact") {
-                setIsSending(true);
-                try {
-                  const { messageText: compactionMessage, metadata, options } = 
-                    prepareCompactionMessage(messageText, sendMessageOptions);
-                  
-                  const result = await window.api.workspace.sendMessage(workspaceId, compactionMessage, {
-                    ...sendMessageOptions,
-                    ...options,
-                    cmuxMetadata: metadata,
-                  });
-
-                  if (!result.success) {
-                    console.error("Failed to send message:", result.error);
-                    setToast(createErrorToast(result.error));
-                  } else {
-                    telemetry.messageSent(sendMessageOptions.model, mode, compactionMessage.length);
-                    onMessageSent?.();
-                  }
-                } catch (error) {
-                  console.error("Unexpected error sending message:", error);
-                  setToast(
-                    createErrorToast({
-                      type: "unknown",
-                      raw: error instanceof Error ? error.message : "Failed to send message",
-                    })
-                  );
-                } finally {
-                  setIsSending(false);
-                }
-                return;
-              }
-
-              // Handle other commands with toast display
-              const commandToast = createCommandToast(parsed);
-              if (commandToast) {
-                setToast(commandToast);
-                return;
-              }
-            }
-
-            // Regular message send
-            setIsSending(true);
-            const result = await window.api.workspace.sendMessage(workspaceId, messageText, {
-              ...sendMessageOptions,
-            });
-
-            if (!result.success) {
-              console.error("Failed to send message:", result.error);
-              setToast(createErrorToast(result.error));
-            } else {
-              telemetry.messageSent(sendMessageOptions.model, mode, messageText.length);
-              onMessageSent?.();
-            }
-          } catch (error) {
-            console.error("Unexpected error sending message:", error);
-            setToast(
-              createErrorToast({
-                type: "unknown",
-                raw: error instanceof Error ? error.message : "Failed to send message",
-              })
-            );
-          } finally {
-            setIsSending(false);
-          }
-        };
-
-        void sendDirectly();
+        // If input is empty, auto-send using the refactored handleSend
+        void handleSend(message);
       }
     },
-    [
-      disabled,
-      isSending,
-      isCompacting,
-      input,
-      setInput,
-      onTruncateHistory,
-      onProviderConfig,
-      sendMessageOptions,
-      workspaceId,
-      onMessageSent,
-      mode,
-    ]
+    [disabled, isSending, isCompacting, input, setInput, handleSend]
   );
 
   // Provide API to parent via callback

From 39c3916dacbf9c2aa56269eb684f30df6e4d320d Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:48:44 -0500
Subject: [PATCH 08/10] Move FKeyBar above chat input for better UX

- Positioned FKeyBar directly above ChatInput textarea
- Makes more sense since F-keys interact with chat input
- Adjusted styling: removed bottom border, adjusted padding
- Background matches chat input section for seamless integration
---
 src/components/AIView.tsx  | 4 ++--
 src/components/FKeyBar.tsx | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index 84659d318..0608c72d0 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -492,8 +492,6 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <ViewContainer className={className}>
       <ChatArea ref={chatAreaRef}>
-        <FKeyBar keybinds={keybinds} onEditKeybind={handleEditKeybind} />
-
         <ViewHeader>
           <WorkspaceTitle>
             <StatusIndicator
@@ -612,6 +610,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
           )}
         </OutputContainer>
 
+        <FKeyBar keybinds={keybinds} onEditKeybind={handleEditKeybind} />
+
         <ChatInput
           workspaceId={workspaceId}
           onMessageSent={handleMessageSent}
diff --git a/src/components/FKeyBar.tsx b/src/components/FKeyBar.tsx
index 8ae6283a6..db733fc40 100644
--- a/src/components/FKeyBar.tsx
+++ b/src/components/FKeyBar.tsx
@@ -6,9 +6,8 @@ import { TooltipWrapper, Tooltip } from "./Tooltip";
 const FKeyBarContainer = styled.div`
   display: flex;
   gap: 3px;
-  padding: 3px 6px;
-  background: #1e1e1e;
-  border-bottom: 1px solid #3e3e42;
+  padding: 4px 6px 2px 6px;
+  background: #252526;
   align-items: center;
   flex-shrink: 0;
 `;

From 1e6cd925322578ed4fec065bfcf6baf13c2ca2c3 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:50:07 -0500
Subject: [PATCH 09/10] Match FKeyBar background with chat area

- Changed background from #252526 to #1e1e1e
- Now blends seamlessly with chat output area
---
 src/components/FKeyBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FKeyBar.tsx b/src/components/FKeyBar.tsx
index db733fc40..952d6df0c 100644
--- a/src/components/FKeyBar.tsx
+++ b/src/components/FKeyBar.tsx
@@ -7,7 +7,7 @@ const FKeyBarContainer = styled.div`
   display: flex;
   gap: 3px;
   padding: 4px 6px 2px 6px;
-  background: #252526;
+  background: #1e1e1e;
   align-items: center;
   flex-shrink: 0;
 `;

From 846b8ffc951c7515613c48555c59c901a9716698 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 17 Oct 2025 13:55:52 -0500
Subject: [PATCH 10/10] Make FKeyBar appear only when chat input is focused

- Added onFocusChange prop to ChatInput component
- Track focus state in AIView with chatInputFocused
- Conditionally render FKeyBar only when input is focused
- Added smooth slide-down animation (0.2s ease-out)
- Cleaner UI: F-keys only visible when relevant
---
 src/components/AIView.tsx    |  4 +++-
 src/components/ChatInput.tsx |  5 +++++
 src/components/FKeyBar.tsx   | 16 ++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
index 0608c72d0..8e72dd772 100644
--- a/src/components/AIView.tsx
+++ b/src/components/AIView.tsx
@@ -239,6 +239,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [editingKey, setEditingKey] = useState<string>("");
   const [editingKeyMessage, setEditingKeyMessage] = useState<string>("");
+  const [chatInputFocused, setChatInputFocused] = useState(false);
 
   // Load keybinds on mount
   useEffect(() => {
@@ -610,7 +611,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           )}
         </OutputContainer>
 
-        <FKeyBar keybinds={keybinds} onEditKeybind={handleEditKeybind} />
+        {chatInputFocused && <FKeyBar keybinds={keybinds} onEditKeybind={handleEditKeybind} />}
 
         <ChatInput
           workspaceId={workspaceId}
@@ -624,6 +625,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           onEditLastUserMessage={handleEditLastUserMessage}
           canInterrupt={canInterrupt}
           onReady={handleChatInputReady}
+          onFocusChange={setChatInputFocused}
         />
       </ChatArea>
 
diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 1b98cae24..a9226b2f9 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -121,6 +121,7 @@ const ModelDisplayWrapper = styled.div`
 export interface ChatInputAPI {
   focus: () => void;
   sendMessage: (message: string) => void;
+  onFocusChange?: (focused: boolean) => void;
 }
 
 export interface ChatInputProps {
@@ -136,6 +137,7 @@ export interface ChatInputProps {
   onEditLastUserMessage?: () => void;
   canInterrupt?: boolean; // Whether Esc can be used to interrupt streaming
   onReady?: (api: ChatInputAPI) => void; // Callback with focus method
+  onFocusChange?: (focused: boolean) => void; // Callback when input focus changes
 }
 
 // Helper function to convert parsed command to display toast
@@ -383,6 +385,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   onEditLastUserMessage,
   canInterrupt = false,
   onReady,
+  onFocusChange,
 }) => {
   const [input, setInput] = usePersistedState(getInputKey(workspaceId), "", { listener: true });
   const [isSending, setIsSending] = useState(false);
@@ -1020,6 +1023,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           onChange={setInput}
           onKeyDown={handleKeyDown}
           onPaste={handlePaste}
+          onFocus={() => onFocusChange?.(true)}
+          onBlur={() => onFocusChange?.(false)}
           suppressKeys={showCommandSuggestions ? COMMAND_SUGGESTION_KEYS : undefined}
           placeholder={placeholder}
           disabled={!editingMessage && (disabled || isSending || isCompacting)}
diff --git a/src/components/FKeyBar.tsx b/src/components/FKeyBar.tsx
index 952d6df0c..939470015 100644
--- a/src/components/FKeyBar.tsx
+++ b/src/components/FKeyBar.tsx
@@ -10,6 +10,22 @@ const FKeyBarContainer = styled.div`
   background: #1e1e1e;
   align-items: center;
   flex-shrink: 0;
+  animation: slideDown 0.2s ease-out;
+
+  @keyframes slideDown {
+    from {
+      max-height: 0;
+      opacity: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    to {
+      max-height: 50px;
+      opacity: 1;
+      padding-top: 4px;
+      padding-bottom: 2px;
+    }
+  }
 `;
 
 const FKeyButton = styled.button<{ isEmpty: boolean }>`