From 78e35d3c3a553dcc601f4558244e74c51de3168f Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 08:55:43 -0400
Subject: [PATCH 01/16] Add fuzzy file search functionality

- Implement FuzzyFileSearch component with fuzzy matching algorithm
- Add file scanning with directory traversal and ignore patterns
- Include keyboard navigation (arrow keys, enter, escape)
- Support highlighting of matched characters in search results
- Integrate with ChatInput component for file selection
- Add loading states and error handling
- Limit results to 50 items for performance
---
 demo.json                                     |  17 +
 demo.txt                                      |  17 +
 package-lock.json                             |   6 +
 ui/desktop/src/components/ChatInput.tsx       | 423 ++++++++++--------
 ui/desktop/src/components/FuzzyFileSearch.tsx | 361 +++++++++++++++
 ui/desktop/src/floating-button-script.js      |  28 ++
 6 files changed, 653 insertions(+), 199 deletions(-)
 create mode 100644 demo.json
 create mode 100644 demo.txt
 create mode 100644 package-lock.json
 create mode 100644 ui/desktop/src/components/FuzzyFileSearch.tsx
 create mode 100644 ui/desktop/src/floating-button-script.js

diff --git a/demo.json b/demo.json
new file mode 100644
index 000000000000..bfbe0d8d653c
--- /dev/null
+++ b/demo.json
@@ -0,0 +1,17 @@
+{
+  "demo": {
+    "title": "Goose File Operations Demo",
+    "version": "1.0.0",
+    "features": [
+      "File creation",
+      "File reading",
+      "Content modification",
+      "Multiple formats"
+    ],
+    "metadata": {
+      "created_by": "Goose AI Assistant",
+      "created_at": "2025-07-02T17:33:32Z",
+      "file_type": "demonstration"
+    }
+  }
+}
diff --git a/demo.txt b/demo.txt
new file mode 100644
index 000000000000..a1e539c81009
--- /dev/null
+++ b/demo.txt
@@ -0,0 +1,17 @@
+Hello, World!
+
+This is a demonstration of file operations in Goose.
+
+Here are some key points:
+- Files can be created and edited
+- Content can be viewed and modified
+- Multiple file formats are supported
+
+Current timestamp: 2025-07-02 17:33:32
+
+--- UPDATE ---
+This content was added after the initial file creation!
+File modification operations include:
+- String replacement
+- Line insertion
+- Content appending
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000000..6deca24a71b8
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "goose",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index a785d5eeb4b1..98445108c0de 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -10,6 +10,7 @@ import { Message } from '../types/message';
 import { useWhisper } from '../hooks/useWhisper';
 import { WaveformVisualizer } from './WaveformVisualizer';
 import { toastError } from '../toasts';
+import FuzzyFileSearch from './FuzzyFileSearch';
 
 interface PastedImage {
   id: string;
@@ -65,6 +66,7 @@ export default function ChatInput({
   const [displayValue, setDisplayValue] = useState(initialValue); // For immediate visual feedback
   const [isFocused, setIsFocused] = useState(false);
   const [pastedImages, setPastedImages] = useState<PastedImage[]>([]);
+  const [isFuzzySearchOpen, setIsFuzzySearchOpen] = useState(false);
 
   // Whisper hook for voice dictation
   const {
@@ -428,6 +430,13 @@ export default function ChatInput({
     // Handle history navigation first
     handleHistoryNavigation(evt);
 
+    // Handle fuzzy file search trigger (Cmd/Ctrl + P)
+    if (evt.key === 'p' && (evt.metaKey || evt.ctrlKey) && !evt.shiftKey && !evt.altKey) {
+      evt.preventDefault();
+      setIsFuzzySearchOpen(true);
+      return;
+    }
+
     if (evt.key === 'Enter') {
       // should not trigger submit on Enter if it's composing (IME input in progress) or shift/alt(option) is pressed
       if (evt.shiftKey || isComposing) {
@@ -474,223 +483,239 @@ export default function ChatInput({
     }
   };
 
+  const handleFuzzyFileSelect = (filePath: string) => {
+    const newValue = displayValue.trim() ? `${displayValue.trim()} ${filePath}` : filePath;
+    setDisplayValue(newValue);
+    setValue(newValue);
+    textAreaRef.current?.focus();
+  };
+
   const hasSubmittableContent =
     displayValue.trim() || pastedImages.some((img) => img.filePath && !img.error && !img.isLoading);
   const isAnyImageLoading = pastedImages.some((img) => img.isLoading);
 
   return (
-    <div
-      className={`flex flex-col relative h-auto border rounded-lg transition-colors ${
-        isFocused
-          ? 'border-borderProminent hover:border-borderProminent'
-          : 'border-borderSubtle hover:border-borderStandard'
-      } bg-bgApp z-10`}
-    >
-      <form onSubmit={onFormSubmit}>
-        <div className="relative">
-          <textarea
-            data-testid="chat-input"
-            autoFocus
-            id="dynamic-textarea"
-            placeholder={isRecording ? '' : 'What can goose help with?   ⌘↑/⌘↓'}
-            value={displayValue}
-            onChange={handleChange}
-            onCompositionStart={handleCompositionStart}
-            onCompositionEnd={handleCompositionEnd}
-            onKeyDown={handleKeyDown}
-            onPaste={handlePaste}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            ref={textAreaRef}
-            rows={1}
-            style={{
-              minHeight: `${minHeight}px`,
-              maxHeight: `${maxHeight}px`,
-              overflowY: 'auto',
-              opacity: isRecording ? 0 : 1,
-            }}
-            className="w-full pl-4 pr-[108px] outline-none border-none focus:ring-0 bg-transparent pt-3 pb-1.5 text-sm resize-none text-textStandard placeholder:text-textPlaceholder"
-          />
-          {isRecording && (
-            <div className="absolute inset-0 flex items-center pl-4 pr-[108px] pt-3 pb-1.5">
-              <WaveformVisualizer
-                audioContext={audioContext}
-                analyser={analyser}
-                isRecording={isRecording}
-              />
+    <>
+      <div
+        className={`flex flex-col relative h-auto border rounded-lg transition-colors ${
+          isFocused
+            ? 'border-borderProminent hover:border-borderProminent'
+            : 'border-borderSubtle hover:border-borderStandard'
+        } bg-bgApp z-10`}
+      >
+        <form onSubmit={onFormSubmit}>
+          <div className="relative">
+            <textarea
+              data-testid="chat-input"
+              autoFocus
+              id="dynamic-textarea"
+              placeholder={isRecording ? '' : 'What can goose help with?   ⌘↑/⌘↓ • ⌘P files'}
+              value={displayValue}
+              onChange={handleChange}
+              onCompositionStart={handleCompositionStart}
+              onCompositionEnd={handleCompositionEnd}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              ref={textAreaRef}
+              rows={1}
+              style={{
+                minHeight: `${minHeight}px`,
+                maxHeight: `${maxHeight}px`,
+                overflowY: 'auto',
+                opacity: isRecording ? 0 : 1,
+              }}
+              className="w-full pl-4 pr-[108px] outline-none border-none focus:ring-0 bg-transparent pt-3 pb-1.5 text-sm resize-none text-textStandard placeholder:text-textPlaceholder"
+            />
+            {isRecording && (
+              <div className="absolute inset-0 flex items-center pl-4 pr-[108px] pt-3 pb-1.5">
+                <WaveformVisualizer
+                  audioContext={audioContext}
+                  analyser={analyser}
+                  isRecording={isRecording}
+                />
+              </div>
+            )}
+          </div>
+
+          {pastedImages.length > 0 && (
+            <div className="flex flex-wrap gap-2 p-2 border-t border-borderSubtle">
+              {pastedImages.map((img) => (
+                <div key={img.id} className="relative group w-20 h-20">
+                  {img.dataUrl && (
+                    <img
+                      src={img.dataUrl} // Use dataUrl for instant preview
+                      alt={`Pasted image ${img.id}`}
+                      className={`w-full h-full object-cover rounded border ${img.error ? 'border-red-500' : 'border-borderStandard'}`}
+                    />
+                  )}
+                  {img.isLoading && (
+                    <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded">
+                      <div className="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-white"></div>
+                    </div>
+                  )}
+                  {img.error && !img.isLoading && (
+                    <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-75 rounded p-1 text-center">
+                      <p className="text-red-400 text-[10px] leading-tight break-all mb-1">
+                        {img.error.substring(0, 50)}
+                      </p>
+                      {img.dataUrl && (
+                        <button
+                          type="button"
+                          onClick={() => handleRetryImageSave(img.id)}
+                          className="bg-blue-600 hover:bg-blue-700 text-white rounded px-1 py-0.5 text-[8px] leading-none"
+                          title="Retry saving image"
+                        >
+                          Retry
+                        </button>
+                      )}
+                    </div>
+                  )}
+                  {!img.isLoading && (
+                    <button
+                      type="button"
+                      onClick={() => handleRemovePastedImage(img.id)}
+                      className="absolute -top-1 -right-1 bg-gray-700 hover:bg-red-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs leading-none opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity z-10"
+                      aria-label="Remove image"
+                    >
+                      <Close className="w-3.5 h-3.5" />
+                    </button>
+                  )}
+                </div>
+              ))}
             </div>
           )}
-        </div>
 
-        {pastedImages.length > 0 && (
-          <div className="flex flex-wrap gap-2 p-2 border-t border-borderSubtle">
-            {pastedImages.map((img) => (
-              <div key={img.id} className="relative group w-20 h-20">
-                {img.dataUrl && (
-                  <img
-                    src={img.dataUrl} // Use dataUrl for instant preview
-                    alt={`Pasted image ${img.id}`}
-                    className={`w-full h-full object-cover rounded border ${img.error ? 'border-red-500' : 'border-borderStandard'}`}
-                  />
-                )}
-                {img.isLoading && (
-                  <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded">
-                    <div className="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-white"></div>
-                  </div>
-                )}
-                {img.error && !img.isLoading && (
-                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-75 rounded p-1 text-center">
-                    <p className="text-red-400 text-[10px] leading-tight break-all mb-1">
-                      {img.error.substring(0, 50)}
-                    </p>
-                    {img.dataUrl && (
-                      <button
-                        type="button"
-                        onClick={() => handleRetryImageSave(img.id)}
-                        className="bg-blue-600 hover:bg-blue-700 text-white rounded px-1 py-0.5 text-[8px] leading-none"
-                        title="Retry saving image"
-                      >
-                        Retry
-                      </button>
-                    )}
-                  </div>
-                )}
-                {!img.isLoading && (
-                  <button
+          {isLoading ? (
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onStop?.();
+              }}
+              className="absolute right-3 top-2 text-textSubtle rounded-full border border-borderSubtle hover:border-borderStandard hover:text-textStandard w-7 h-7 [&_svg]:size-4"
+            >
+              <Stop size={24} />
+            </Button>
+          ) : (
+            <>
+              {/* Microphone button - only show if dictation is enabled and configured */}
+              {canUseDictation && (
+                <>
+                  <Button
                     type="button"
-                    onClick={() => handleRemovePastedImage(img.id)}
-                    className="absolute -top-1 -right-1 bg-gray-700 hover:bg-red-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs leading-none opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity z-10"
-                    aria-label="Remove image"
-                  >
-                    <Close className="w-3.5 h-3.5" />
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-
-        {isLoading ? (
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onStop?.();
-            }}
-            className="absolute right-3 top-2 text-textSubtle rounded-full border border-borderSubtle hover:border-borderStandard hover:text-textStandard w-7 h-7 [&_svg]:size-4"
-          >
-            <Stop size={24} />
-          </Button>
-        ) : (
-          <>
-            {/* Microphone button - only show if dictation is enabled and configured */}
-            {canUseDictation && (
-              <>
-                <Button
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  onClick={() => {
-                    if (isRecording) {
-                      stopRecording();
-                    } else {
-                      startRecording();
+                    size="icon"
+                    variant="ghost"
+                    onClick={() => {
+                      if (isRecording) {
+                        stopRecording();
+                      } else {
+                        startRecording();
+                      }
+                    }}
+                    disabled={isTranscribing}
+                    className={`absolute right-12 top-2 transition-colors rounded-full w-7 h-7 [&_svg]:size-4 ${
+                      isRecording
+                        ? 'bg-red-500 text-white hover:bg-red-600'
+                        : isTranscribing
+                          ? 'text-textSubtle cursor-not-allowed animate-pulse'
+                          : 'text-textSubtle hover:text-textStandard'
+                    }`}
+                    title={
+                      isRecording
+                        ? `Stop recording (${Math.floor(recordingDuration)}s, ~${estimatedSize.toFixed(1)}MB)`
+                        : isTranscribing
+                          ? 'Transcribing...'
+                          : 'Start dictation'
                     }
-                  }}
-                  disabled={isTranscribing}
-                  className={`absolute right-12 top-2 transition-colors rounded-full w-7 h-7 [&_svg]:size-4 ${
-                    isRecording
-                      ? 'bg-red-500 text-white hover:bg-red-600'
-                      : isTranscribing
-                        ? 'text-textSubtle cursor-not-allowed animate-pulse'
-                        : 'text-textSubtle hover:text-textStandard'
-                  }`}
-                  title={
-                    isRecording
-                      ? `Stop recording (${Math.floor(recordingDuration)}s, ~${estimatedSize.toFixed(1)}MB)`
+                  >
+                    <Microphone />
+                  </Button>
+                  {/* Recording/transcribing status indicator - positioned above the input */}
+                  {(isRecording || isTranscribing) && (
+                    <div className="absolute right-0 -top-8 bg-bgApp px-2 py-1 rounded text-xs whitespace-nowrap shadow-md border border-borderSubtle">
+                      {isTranscribing ? (
+                        <span className="text-blue-500 flex items-center gap-1">
+                          <span className="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
+                          Transcribing...
+                        </span>
+                      ) : (
+                        <span
+                          className={`flex items-center gap-2 ${estimatedSize > 20 ? 'text-orange-500' : 'text-textSubtle'}`}
+                        >
+                          <span className="inline-block w-2 h-2 bg-red-500 rounded-full animate-pulse" />
+                          {Math.floor(recordingDuration)}s • ~{estimatedSize.toFixed(1)}MB
+                          {estimatedSize > 20 && <span className="text-xs">(near 25MB limit)</span>}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+              <Button
+                type="submit"
+                size="icon"
+                variant="ghost"
+                disabled={
+                  !hasSubmittableContent || isAnyImageLoading || isRecording || isTranscribing
+                }
+                className={`absolute right-3 top-2 transition-colors rounded-full w-7 h-7 [&_svg]:size-4 ${
+                  !hasSubmittableContent || isAnyImageLoading || isRecording || isTranscribing
+                    ? 'text-textSubtle cursor-not-allowed'
+                    : 'bg-bgAppInverse text-textProminentInverse hover:cursor-pointer'
+                }`}
+                title={
+                  isAnyImageLoading
+                    ? 'Waiting for images to save...'
+                    : isRecording
+                      ? 'Recording...'
                       : isTranscribing
                         ? 'Transcribing...'
-                        : 'Start dictation'
-                  }
-                >
-                  <Microphone />
-                </Button>
-                {/* Recording/transcribing status indicator - positioned above the input */}
-                {(isRecording || isTranscribing) && (
-                  <div className="absolute right-0 -top-8 bg-bgApp px-2 py-1 rounded text-xs whitespace-nowrap shadow-md border border-borderSubtle">
-                    {isTranscribing ? (
-                      <span className="text-blue-500 flex items-center gap-1">
-                        <span className="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
-                        Transcribing...
-                      </span>
-                    ) : (
-                      <span
-                        className={`flex items-center gap-2 ${estimatedSize > 20 ? 'text-orange-500' : 'text-textSubtle'}`}
-                      >
-                        <span className="inline-block w-2 h-2 bg-red-500 rounded-full animate-pulse" />
-                        {Math.floor(recordingDuration)}s • ~{estimatedSize.toFixed(1)}MB
-                        {estimatedSize > 20 && <span className="text-xs">(near 25MB limit)</span>}
-                      </span>
-                    )}
-                  </div>
-                )}
-              </>
-            )}
+                        : 'Send'
+                }
+              >
+                <Send />
+              </Button>
+            </>
+          )}
+        </form>
+
+        <div className="flex items-center transition-colors text-textSubtle relative text-xs p-2 pr-3 border-t border-borderSubtle gap-2">
+          <div className="gap-1 flex items-center justify-between w-full">
             <Button
-              type="submit"
+              type="button"
               size="icon"
               variant="ghost"
-              disabled={
-                !hasSubmittableContent || isAnyImageLoading || isRecording || isTranscribing
-              }
-              className={`absolute right-3 top-2 transition-colors rounded-full w-7 h-7 [&_svg]:size-4 ${
-                !hasSubmittableContent || isAnyImageLoading || isRecording || isTranscribing
-                  ? 'text-textSubtle cursor-not-allowed'
-                  : 'bg-bgAppInverse text-textProminentInverse hover:cursor-pointer'
-              }`}
-              title={
-                isAnyImageLoading
-                  ? 'Waiting for images to save...'
-                  : isRecording
-                    ? 'Recording...'
-                    : isTranscribing
-                      ? 'Transcribing...'
-                      : 'Send'
-              }
+              onClick={handleFileSelect}
+              className="text-textSubtle hover:text-textStandard w-7 h-7 [&_svg]:size-4"
             >
-              <Send />
+              <Attach />
             </Button>
-          </>
-        )}
-      </form>
-
-      <div className="flex items-center transition-colors text-textSubtle relative text-xs p-2 pr-3 border-t border-borderSubtle gap-2">
-        <div className="gap-1 flex items-center justify-between w-full">
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={handleFileSelect}
-            className="text-textSubtle hover:text-textStandard w-7 h-7 [&_svg]:size-4"
-          >
-            <Attach />
-          </Button>
-
-          <BottomMenu
-            setView={setView}
-            numTokens={numTokens}
-            inputTokens={inputTokens}
-            outputTokens={outputTokens}
-            messages={messages}
-            isLoading={isLoading}
-            setMessages={setMessages}
-            sessionCosts={sessionCosts}
-          />
+
+            <BottomMenu
+              setView={setView}
+              numTokens={numTokens}
+              inputTokens={inputTokens}
+              outputTokens={outputTokens}
+              messages={messages}
+              isLoading={isLoading}
+              setMessages={setMessages}
+              sessionCosts={sessionCosts}
+            />
+          </div>
         </div>
       </div>
-    </div>
+
+      <FuzzyFileSearch
+        isOpen={isFuzzySearchOpen}
+        onClose={() => setIsFuzzySearchOpen(false)}
+        onSelect={handleFuzzyFileSelect}
+        workingDirectory={window.appConfig.get('GOOSE_WORKING_DIR') as string}
+      />
+    </>
   );
 }
diff --git a/ui/desktop/src/components/FuzzyFileSearch.tsx b/ui/desktop/src/components/FuzzyFileSearch.tsx
new file mode 100644
index 000000000000..cab168a5e844
--- /dev/null
+++ b/ui/desktop/src/components/FuzzyFileSearch.tsx
@@ -0,0 +1,361 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Card } from './ui/card';
+import { ScrollArea } from './ui/scroll-area';
+import { Close } from './icons';
+
+interface FileItem {
+  path: string;
+  name: string;
+  isDirectory: boolean;
+  relativePath: string;
+}
+
+interface FuzzyFileSearchProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (filePath: string) => void;
+  workingDirectory: string;
+}
+
+// Simple fuzzy matching algorithm
+const fuzzyMatch = (pattern: string, text: string): { score: number; matches: number[] } => {
+  if (!pattern) return { score: 0, matches: [] };
+  
+  const patternLower = pattern.toLowerCase();
+  const textLower = text.toLowerCase();
+  const matches: number[] = [];
+  
+  let patternIndex = 0;
+  let score = 0;
+  let consecutiveMatches = 0;
+  
+  for (let i = 0; i < textLower.length && patternIndex < patternLower.length; i++) {
+    if (textLower[i] === patternLower[patternIndex]) {
+      matches.push(i);
+      patternIndex++;
+      consecutiveMatches++;
+      
+      // Bonus for consecutive matches
+      score += consecutiveMatches * 2;
+      
+      // Bonus for matches at word boundaries
+      if (i === 0 || textLower[i - 1] === '/' || textLower[i - 1] === '_' || textLower[i - 1] === '-') {
+        score += 5;
+      }
+    } else {
+      consecutiveMatches = 0;
+    }
+  }
+  
+  // Only return a score if all pattern characters were matched
+  if (patternIndex === patternLower.length) {
+    // Penalty for longer strings
+    score -= text.length * 0.1;
+    return { score, matches };
+  }
+  
+  return { score: -1, matches: [] };
+};
+
+// Highlight matched characters in the text
+const HighlightedText: React.FC<{ text: string; matches: number[] }> = ({ text, matches }) => {
+  if (matches.length === 0) return <span>{text}</span>;
+  
+  const elements: React.ReactNode[] = [];
+  let lastIndex = 0;
+  
+  matches.forEach((matchIndex, i) => {
+    // Add text before the match
+    if (matchIndex > lastIndex) {
+      elements.push(text.slice(lastIndex, matchIndex));
+    }
+    
+    // Add the highlighted match
+    elements.push(
+      <span key={i} className="bg-yellow-200 dark:bg-yellow-800 text-yellow-900 dark:text-yellow-100">
+        {text[matchIndex]}
+      </span>
+    );
+    
+    lastIndex = matchIndex + 1;
+  });
+  
+  // Add remaining text
+  if (lastIndex < text.length) {
+    elements.push(text.slice(lastIndex));
+  }
+  
+  return <span>{elements}</span>;
+};
+
+export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDirectory }: FuzzyFileSearchProps) {
+  const [query, setQuery] = useState('');
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  
+  // Scan files when component opens or working directory changes
+  useEffect(() => {
+    if (isOpen && workingDirectory) {
+      scanFiles();
+    }
+  }, [isOpen, workingDirectory]);
+  
+  // Focus input when opened
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  
+  // Reset state when opened/closed
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setSelectedIndex(0);
+    }
+  }, [isOpen]);
+  
+  const scanFiles = async () => {
+    setIsLoading(true);
+    try {
+      const scannedFiles = await scanDirectory(workingDirectory);
+      setFiles(scannedFiles);
+    } catch (error) {
+      console.error('Error scanning files:', error);
+      setFiles([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  const scanDirectory = async (dirPath: string, relativePath = ''): Promise<FileItem[]> => {
+    try {
+      const items = await window.electron.listFiles(dirPath);
+      const results: FileItem[] = [];
+      
+      // Add current directory files
+      for (const item of items) {
+        const fullPath = `${dirPath}/${item}`;
+        const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
+        
+        // Skip hidden files and common ignore patterns
+        if (item.startsWith('.') || 
+            item === 'node_modules' || 
+            item === '.git' || 
+            item === '__pycache__' || 
+            item === '.vscode' ||
+            item === 'target' ||
+            item === 'dist' ||
+            item === 'build') {
+          continue;
+        }
+        
+        try {
+          // Check if it's a directory by trying to list its contents
+          const subItems = await window.electron.listFiles(fullPath);
+          
+          // It's a directory
+          results.push({
+            path: fullPath,
+            name: item,
+            isDirectory: true,
+            relativePath: itemRelativePath
+          });
+          
+          // Recursively scan subdirectories (limit depth to avoid performance issues)
+          if (relativePath.split('/').length < 3) {
+            const subFiles = await scanDirectory(fullPath, itemRelativePath);
+            results.push(...subFiles);
+          }
+        } catch {
+          // It's a file
+          results.push({
+            path: fullPath,
+            name: item,
+            isDirectory: false,
+            relativePath: itemRelativePath
+          });
+        }
+      }
+      
+      return results;
+    } catch (error) {
+      console.error(`Error scanning directory ${dirPath}:`, error);
+      return [];
+    }
+  };
+  
+  // Filter and sort files based on query
+  const filteredFiles = useMemo(() => {
+    if (!query.trim()) {
+      return files.slice(0, 50); // Show first 50 files when no query
+    }
+    
+    const results = files
+      .map(file => {
+        const nameMatch = fuzzyMatch(query, file.name);
+        const pathMatch = fuzzyMatch(query, file.relativePath);
+        
+        // Use the better of the two matches
+        const bestMatch = nameMatch.score > pathMatch.score ? nameMatch : pathMatch;
+        
+        return {
+          ...file,
+          matchScore: bestMatch.score,
+          matches: bestMatch.matches,
+          matchedText: nameMatch.score > pathMatch.score ? file.name : file.relativePath
+        };
+      })
+      .filter(file => file.matchScore > 0)
+      .sort((a, b) => b.matchScore - a.matchScore)
+      .slice(0, 50); // Limit to 50 results
+    
+    return results;
+  }, [files, query]);
+  
+  // Update selected index when filtered results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredFiles]);
+  
+  // Scroll selected item into view
+  useEffect(() => {
+    if (listRef.current) {
+      const selectedElement = listRef.current.children[selectedIndex] as HTMLElement;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [selectedIndex]);
+  
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        onClose();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(prev + 1, filteredFiles.length - 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(prev - 1, 0));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filteredFiles[selectedIndex]) {
+          onSelect(filteredFiles[selectedIndex].path);
+          onClose();
+        }
+        break;
+    }
+  };
+  
+  const handleItemClick = (index: number) => {
+    setSelectedIndex(index);
+    onSelect(filteredFiles[index].path);
+    onClose();
+  };
+  
+  if (!isOpen) return null;
+  
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center pt-20 z-50">
+      <Card className="w-full max-w-2xl mx-4 bg-bgApp border-borderStandard">
+        <div className="p-4">
+          <div className="flex items-center gap-2 mb-4">
+            <div className="flex-1 relative">
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Type to search files..."
+                className="w-full px-3 py-2 border border-borderSubtle rounded-md bg-bgApp text-textStandard placeholder-textPlaceholder focus:outline-none focus:border-borderProminent"
+              />
+              {isLoading && (
+                <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                  <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-textSubtle"></div>
+                </div>
+              )}
+            </div>
+            <button
+              onClick={onClose}
+              className="p-2 text-textSubtle hover:text-textStandard rounded-md hover:bg-bgSubtle"
+            >
+              <Close className="w-4 h-4" />
+            </button>
+          </div>
+          
+          <div className="text-xs text-textSubtle mb-2">
+            {isLoading ? 'Scanning files...' : `${filteredFiles.length} files found`}
+          </div>
+          
+          <ScrollArea className="h-96">
+            <div ref={listRef} className="space-y-1">
+              {filteredFiles.map((file, index) => (
+                <div
+                  key={file.path}
+                  onClick={() => handleItemClick(index)}
+                  className={`p-3 rounded-md cursor-pointer transition-colors ${
+                    index === selectedIndex
+                      ? 'bg-bgProminent text-textProminentInverse'
+                      : 'hover:bg-bgSubtle'
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${
+                      file.isDirectory 
+                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                        : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
+                    }`}>
+                      {file.isDirectory ? 'DIR' : 'FILE'}
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">
+                        <HighlightedText 
+                          text={file.name} 
+                          matches={file.matchedText === file.name ? (file as any).matches : []} 
+                        />
+                      </div>
+                      <div className="text-sm text-textSubtle truncate">
+                        <HighlightedText 
+                          text={file.relativePath} 
+                          matches={file.matchedText === file.relativePath ? (file as any).matches : []} 
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+              
+              {!isLoading && filteredFiles.length === 0 && query && (
+                <div className="p-8 text-center text-textSubtle">
+                  No files found matching "{query}"
+                </div>
+              )}
+              
+              {!isLoading && filteredFiles.length === 0 && !query && (
+                <div className="p-8 text-center text-textSubtle">
+                  Start typing to search for files
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+          
+          <div className="mt-4 text-xs text-textSubtle border-t border-borderSubtle pt-2">
+            <div className="flex justify-between">
+              <span>↑↓ Navigate • Enter Select • Esc Close</span>
+              <span>{workingDirectory}</span>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/desktop/src/floating-button-script.js b/ui/desktop/src/floating-button-script.js
new file mode 100644
index 000000000000..12fbcd133717
--- /dev/null
+++ b/ui/desktop/src/floating-button-script.js
@@ -0,0 +1,28 @@
+// Handle window movement and docking detection
+let isDragging = false;
+let startX, startY;
+
+document.addEventListener('mousedown', (e) => {
+  isDragging = true;
+  startX = e.screenX - window.screenX;
+  startY = e.screenY - window.screenY;
+});
+
+document.addEventListener('mouseup', () => {
+  if (isDragging) {
+    isDragging = false;
+    // Check for docking with parent window
+    if (window.electronFloating) {
+      window.electronFloating.checkDocking();
+    }
+  }
+});
+
+// Handle click to focus parent window
+document.addEventListener('click', (e) => {
+  if (!isDragging && window.electronFloating) {
+    window.electronFloating.focusParent();
+  }
+});
+
+console.log('Floating button script loaded');
\ No newline at end of file

From f3fdf774a191670940e7705751d2e6d3a2f3c5c3 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:04:03 -0400
Subject: [PATCH 02/16] Implement @ mention file search functionality

- Add MentionPopover component for @ mention file selection
- Update FuzzyFileSearch to support computer-wide search with searchFromRoot prop
- Implement @ mention detection in ChatInput with cursor position tracking
- Add popover positioning logic based on cursor location
- Support both local directory and full computer file search
- Update placeholder text to indicate @ mention functionality
- Fix TypeScript errors and improve type safety
- Optimize directory scanning with depth limits and file type filtering
---
 ui/desktop/src/components/ChatInput.tsx       | 104 +++++++++++++-
 ui/desktop/src/components/FuzzyFileSearch.tsx | 136 ++++++++++++++++--
 ui/desktop/src/components/MentionPopover.tsx  | 122 ++++++++++++++++
 3 files changed, 351 insertions(+), 11 deletions(-)
 create mode 100644 ui/desktop/src/components/MentionPopover.tsx

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 98445108c0de..aaf64a4a111e 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -11,6 +11,7 @@ import { useWhisper } from '../hooks/useWhisper';
 import { WaveformVisualizer } from './WaveformVisualizer';
 import { toastError } from '../toasts';
 import FuzzyFileSearch from './FuzzyFileSearch';
+import MentionPopover from './MentionPopover';
 
 interface PastedImage {
   id: string;
@@ -67,6 +68,17 @@ export default function ChatInput({
   const [isFocused, setIsFocused] = useState(false);
   const [pastedImages, setPastedImages] = useState<PastedImage[]>([]);
   const [isFuzzySearchOpen, setIsFuzzySearchOpen] = useState(false);
+  const [mentionPopover, setMentionPopover] = useState<{
+    isOpen: boolean;
+    position: { x: number; y: number };
+    query: string;
+    mentionStart: number;
+  }>({
+    isOpen: false,
+    position: { x: 0, y: 0 },
+    query: '',
+    mentionStart: -1,
+  });
 
   // Whisper hook for voice dictation
   const {
@@ -221,8 +233,61 @@ export default function ChatInput({
 
   const handleChange = (evt: React.ChangeEvent<HTMLTextAreaElement>) => {
     const val = evt.target.value;
+    const cursorPosition = evt.target.selectionStart;
+    
     setDisplayValue(val); // Update display immediately
     debouncedSetValue(val); // Debounce the actual state update
+    
+    // Check for @ mention
+    checkForMention(val, cursorPosition, evt.target);
+  };
+
+  const checkForMention = (text: string, cursorPosition: number, textArea: HTMLTextAreaElement) => {
+    // Find the last @ before the cursor
+    const beforeCursor = text.slice(0, cursorPosition);
+    const lastAtIndex = beforeCursor.lastIndexOf('@');
+    
+    if (lastAtIndex === -1) {
+      // No @ found, close mention popover
+      setMentionPopover(prev => ({ ...prev, isOpen: false }));
+      return;
+    }
+    
+    // Check if there's a space between @ and cursor (which would end the mention)
+    const afterAt = beforeCursor.slice(lastAtIndex + 1);
+    if (afterAt.includes(' ') || afterAt.includes('\n')) {
+      setMentionPopover(prev => ({ ...prev, isOpen: false }));
+      return;
+    }
+    
+    // Calculate position for the popover
+    const textAreaRect = textArea.getBoundingClientRect();
+    const textBeforeAt = beforeCursor.slice(0, lastAtIndex);
+    
+    // Create a temporary element to measure text width
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (context) {
+      const computedStyle = window.getComputedStyle(textArea);
+      context.font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+      
+      const lines = textBeforeAt.split('\n');
+      const lastLine = lines[lines.length - 1];
+      const textWidth = context.measureText(lastLine).width;
+      
+      const lineHeight = parseInt(computedStyle.lineHeight) || parseInt(computedStyle.fontSize) * 1.2;
+      const yOffset = (lines.length - 1) * lineHeight;
+      
+      setMentionPopover({
+        isOpen: true,
+        position: {
+          x: textAreaRect.left + textWidth + 16, // 16px for padding
+          y: textAreaRect.top + yOffset + 30, // 30px offset below the line
+        },
+        query: afterAt,
+        mentionStart: lastAtIndex,
+      });
+    }
   };
 
   const handlePaste = async (evt: React.ClipboardEvent<HTMLTextAreaElement>) => {
@@ -437,6 +502,15 @@ export default function ChatInput({
       return;
     }
 
+    // Handle Escape key
+    if (evt.key === 'Escape') {
+      if (mentionPopover.isOpen) {
+        evt.preventDefault();
+        setMentionPopover(prev => ({ ...prev, isOpen: false }));
+        return;
+      }
+    }
+
     if (evt.key === 'Enter') {
       // should not trigger submit on Enter if it's composing (IME input in progress) or shift/alt(option) is pressed
       if (evt.shiftKey || isComposing) {
@@ -490,6 +564,26 @@ export default function ChatInput({
     textAreaRef.current?.focus();
   };
 
+  const handleMentionFileSelect = (filePath: string) => {
+    // Replace the @ mention with the file path
+    const beforeMention = displayValue.slice(0, mentionPopover.mentionStart);
+    const afterMention = displayValue.slice(mentionPopover.mentionStart + 1 + mentionPopover.query.length);
+    const newValue = `${beforeMention}${filePath}${afterMention}`;
+    
+    setDisplayValue(newValue);
+    setValue(newValue);
+    setMentionPopover(prev => ({ ...prev, isOpen: false }));
+    textAreaRef.current?.focus();
+    
+    // Set cursor position after the inserted file path
+    setTimeout(() => {
+      if (textAreaRef.current) {
+        const newCursorPosition = beforeMention.length + filePath.length;
+        textAreaRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
+      }
+    }, 0);
+  };
+
   const hasSubmittableContent =
     displayValue.trim() || pastedImages.some((img) => img.filePath && !img.error && !img.isLoading);
   const isAnyImageLoading = pastedImages.some((img) => img.isLoading);
@@ -509,7 +603,7 @@ export default function ChatInput({
               data-testid="chat-input"
               autoFocus
               id="dynamic-textarea"
-              placeholder={isRecording ? '' : 'What can goose help with?   ⌘↑/⌘↓ • ⌘P files'}
+              placeholder={isRecording ? '' : 'What can goose help with?   @ files • ⌘↑/⌘↓ • ⌘P files'}
               value={displayValue}
               onChange={handleChange}
               onCompositionStart={handleCompositionStart}
@@ -716,6 +810,14 @@ export default function ChatInput({
         onSelect={handleFuzzyFileSelect}
         workingDirectory={window.appConfig.get('GOOSE_WORKING_DIR') as string}
       />
+
+      <MentionPopover
+        isOpen={mentionPopover.isOpen}
+        onClose={() => setMentionPopover(prev => ({ ...prev, isOpen: false }))}
+        onSelect={handleMentionFileSelect}
+        position={mentionPopover.position}
+        query={mentionPopover.query}
+      />
     </>
   );
 }
diff --git a/ui/desktop/src/components/FuzzyFileSearch.tsx b/ui/desktop/src/components/FuzzyFileSearch.tsx
index cab168a5e844..f455bb9861e2 100644
--- a/ui/desktop/src/components/FuzzyFileSearch.tsx
+++ b/ui/desktop/src/components/FuzzyFileSearch.tsx
@@ -10,11 +10,18 @@ interface FileItem {
   relativePath: string;
 }
 
+interface FileItemWithMatch extends FileItem {
+  matchScore: number;
+  matches: number[];
+  matchedText: string;
+}
+
 interface FuzzyFileSearchProps {
   isOpen: boolean;
   onClose: () => void;
   onSelect: (filePath: string) => void;
-  workingDirectory: string;
+  workingDirectory?: string;
+  searchFromRoot?: boolean;
 }
 
 // Simple fuzzy matching algorithm
@@ -88,7 +95,7 @@ const HighlightedText: React.FC<{ text: string; matches: number[] }> = ({ text,
   return <span>{elements}</span>;
 };
 
-export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDirectory }: FuzzyFileSearchProps) {
+export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDirectory, searchFromRoot = false }: FuzzyFileSearchProps) {
   const [query, setQuery] = useState('');
   const [files, setFiles] = useState<FileItem[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -98,10 +105,14 @@ export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDire
   
   // Scan files when component opens or working directory changes
   useEffect(() => {
-    if (isOpen && workingDirectory) {
-      scanFiles();
+    if (isOpen) {
+      if (searchFromRoot) {
+        scanFilesFromRoot();
+      } else if (workingDirectory) {
+        scanFiles();
+      }
     }
-  }, [isOpen, workingDirectory]);
+  }, [isOpen, workingDirectory, searchFromRoot]);
   
   // Focus input when opened
   useEffect(() => {
@@ -121,7 +132,7 @@ export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDire
   const scanFiles = async () => {
     setIsLoading(true);
     try {
-      const scannedFiles = await scanDirectory(workingDirectory);
+      const scannedFiles = await scanDirectory(workingDirectory || '', '');
       setFiles(scannedFiles);
     } catch (error) {
       console.error('Error scanning files:', error);
@@ -130,6 +141,27 @@ export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDire
       setIsLoading(false);
     }
   };
+
+  const scanFilesFromRoot = async () => {
+    setIsLoading(true);
+    try {
+      // Start from common user directories for better performance
+      let startPath = '/Users'; // Default to macOS
+      if (window.electron.platform === 'win32') {
+        startPath = 'C:\\Users';
+      } else if (window.electron.platform === 'linux') {
+        startPath = '/home';
+      }
+      
+      const scannedFiles = await scanDirectoryFromRoot(startPath);
+      setFiles(scannedFiles);
+    } catch (error) {
+      console.error('Error scanning files from root:', error);
+      setFiles([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
   
   const scanDirectory = async (dirPath: string, relativePath = ''): Promise<FileItem[]> => {
     try {
@@ -155,7 +187,7 @@ export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDire
         
         try {
           // Check if it's a directory by trying to list its contents
-          const subItems = await window.electron.listFiles(fullPath);
+          await window.electron.listFiles(fullPath);
           
           // It's a directory
           results.push({
@@ -187,11 +219,95 @@ export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDire
       return [];
     }
   };
+
+  const scanDirectoryFromRoot = async (dirPath: string, relativePath = '', depth = 0): Promise<FileItem[]> => {
+    // Limit depth for performance when searching from root
+    if (depth > 4) return [];
+    
+    try {
+      const items = await window.electron.listFiles(dirPath);
+      const results: FileItem[] = [];
+      
+      // Common directories to prioritize or skip
+      const priorityDirs = ['Desktop', 'Documents', 'Downloads', 'Projects', 'Development', 'Code'];
+      const skipDirs = [
+        '.git', '.svn', '.hg', 'node_modules', '__pycache__', '.vscode', '.idea',
+        'target', 'dist', 'build', '.cache', '.npm', '.yarn', 'Library', 
+        'System', 'Applications', '.Trash', 'Music', 'Movies', 'Pictures'
+      ];
+      
+      // Sort items to prioritize certain directories
+      const sortedItems = items.sort((a, b) => {
+        const aPriority = priorityDirs.includes(a);
+        const bPriority = priorityDirs.includes(b);
+        if (aPriority && !bPriority) return -1;
+        if (!aPriority && bPriority) return 1;
+        return a.localeCompare(b);
+      });
+      
+      for (const item of sortedItems.slice(0, 50)) { // Limit items per directory
+        const fullPath = `${dirPath}/${item}`;
+        const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
+        
+        // Skip hidden files and common ignore patterns
+        if (item.startsWith('.') || skipDirs.includes(item)) {
+          continue;
+        }
+        
+        try {
+          // Check if it's a directory by trying to list its contents
+          await window.electron.listFiles(fullPath);
+          
+          // It's a directory
+          results.push({
+            path: fullPath,
+            name: item,
+            isDirectory: true,
+            relativePath: itemRelativePath
+          });
+          
+          // Recursively scan important directories
+          if (depth < 3 && (priorityDirs.includes(item) || depth === 0)) {
+            const subFiles = await scanDirectoryFromRoot(fullPath, itemRelativePath, depth + 1);
+            results.push(...subFiles);
+          }
+        } catch {
+          // It's a file - only include common file types
+          const ext = item.split('.').pop()?.toLowerCase();
+          const commonExtensions = [
+            'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'h',
+            'css', 'html', 'json', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg',
+            'sh', 'bat', 'ps1', 'rb', 'go', 'rs', 'php', 'sql', 'r', 'scala',
+            'swift', 'kt', 'dart', 'vue', 'svelte', 'astro'
+          ];
+          
+          if (ext && commonExtensions.includes(ext)) {
+            results.push({
+              path: fullPath,
+              name: item,
+              isDirectory: false,
+              relativePath: itemRelativePath
+            });
+          }
+        }
+      }
+      
+      return results;
+    } catch (error) {
+      console.error(`Error scanning directory ${dirPath}:`, error);
+      return [];
+    }
+  };
   
   // Filter and sort files based on query
-  const filteredFiles = useMemo(() => {
+  const filteredFiles = useMemo((): FileItemWithMatch[] => {
     if (!query.trim()) {
-      return files.slice(0, 50); // Show first 50 files when no query
+      return files.slice(0, 50).map(file => ({
+        ...file,
+        matchScore: 0,
+        matches: [],
+        matchedText: file.name
+      })); // Show first 50 files when no query
     }
     
     const results = files
@@ -351,7 +467,7 @@ export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDire
           <div className="mt-4 text-xs text-textSubtle border-t border-borderSubtle pt-2">
             <div className="flex justify-between">
               <span>↑↓ Navigate • Enter Select • Esc Close</span>
-              <span>{workingDirectory}</span>
+              <span>{searchFromRoot ? 'Searching entire computer' : (workingDirectory || 'No directory')}</span>
             </div>
           </div>
         </div>
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
new file mode 100644
index 000000000000..0f3f9eeeabd6
--- /dev/null
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -0,0 +1,122 @@
+import React, { useState, useEffect, useRef } from 'react';
+import FuzzyFileSearch from './FuzzyFileSearch';
+
+interface MentionPopoverProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (filePath: string) => void;
+  position: { x: number; y: number };
+  query: string;
+}
+
+export default function MentionPopover({ 
+  isOpen, 
+  onClose, 
+  onSelect, 
+  position, 
+  query
+}: MentionPopoverProps) {
+  const [isFuzzySearchOpen, setIsFuzzySearchOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Handle clicks outside the popover
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  const handleFileSearch = () => {
+    setIsFuzzySearchOpen(true);
+  };
+
+  const handleFuzzyFileSelect = (filePath: string) => {
+    onSelect(filePath);
+    setIsFuzzySearchOpen(false);
+    onClose();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    } else if (e.key === 'Enter') {
+      handleFileSearch();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div
+        ref={popoverRef}
+        className="fixed z-50 bg-bgApp border border-borderStandard rounded-lg shadow-lg min-w-64"
+        style={{
+          left: position.x,
+          top: position.y,
+        }}
+      >
+        <div className="p-3">
+          <div className="text-sm font-medium text-textStandard mb-2">
+            Attach files
+          </div>
+          <div className="space-y-2">
+            <button
+              onClick={handleFileSearch}
+              onKeyDown={handleKeyDown}
+              className="w-full text-left px-3 py-2 text-sm text-textStandard hover:bg-bgSubtle rounded-md transition-colors flex items-center gap-2"
+            >
+              <span className="text-textSubtle">📁</span>
+              <div>
+                <div>Search files on computer</div>
+                <div className="text-xs text-textSubtle">
+                  {query ? `Search for "${query}"` : 'Browse and search all files'}
+                </div>
+              </div>
+            </button>
+            <button
+              onClick={() => {
+                // Trigger the existing file selector
+                window.electron.selectFileOrDirectory().then((path) => {
+                  if (path) {
+                    onSelect(path);
+                    onClose();
+                  }
+                });
+              }}
+              className="w-full text-left px-3 py-2 text-sm text-textStandard hover:bg-bgSubtle rounded-md transition-colors flex items-center gap-2"
+            >
+              <span className="text-textSubtle">📎</span>
+              <div>
+                <div>Select file or folder</div>
+                <div className="text-xs text-textSubtle">
+                  Open file picker dialog
+                </div>
+              </div>
+            </button>
+          </div>
+          <div className="mt-3 pt-2 border-t border-borderSubtle text-xs text-textSubtle">
+            Press Enter to search • Esc to close
+          </div>
+        </div>
+      </div>
+
+      <FuzzyFileSearch
+        isOpen={isFuzzySearchOpen}
+        onClose={() => setIsFuzzySearchOpen(false)}
+        onSelect={handleFuzzyFileSelect}
+        searchFromRoot={true}
+      />
+    </>
+  );
+}
\ No newline at end of file

From da00e2788b3c8b62e1bde8bc442a92b935585664 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:08:09 -0400
Subject: [PATCH 03/16] Redesign @ mention popover to match reference design

- Redesign MentionPopover to show file list above chat input
- Add file type icons for different file extensions and folders
- Display file name in bold with full path below in gray text
- Implement fuzzy search functionality directly in the popover
- Add keyboard navigation (arrow keys, enter, escape)
- Show 'Show X more...' when there are additional results
- Position popover above chat input with proper styling
- Optimize file scanning for better performance
- Add loading state while scanning files
- Remove unused imports and fix TypeScript errors
---
 ui/desktop/src/components/ChatInput.tsx      |  58 +--
 ui/desktop/src/components/MentionPopover.tsx | 436 ++++++++++++++++---
 2 files changed, 390 insertions(+), 104 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index aaf64a4a111e..d3eee22179e8 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -260,34 +260,18 @@ export default function ChatInput({
       return;
     }
     
-    // Calculate position for the popover
+    // Calculate position for the popover - position it above the chat input
     const textAreaRect = textArea.getBoundingClientRect();
-    const textBeforeAt = beforeCursor.slice(0, lastAtIndex);
     
-    // Create a temporary element to measure text width
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    if (context) {
-      const computedStyle = window.getComputedStyle(textArea);
-      context.font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;
-      
-      const lines = textBeforeAt.split('\n');
-      const lastLine = lines[lines.length - 1];
-      const textWidth = context.measureText(lastLine).width;
-      
-      const lineHeight = parseInt(computedStyle.lineHeight) || parseInt(computedStyle.fontSize) * 1.2;
-      const yOffset = (lines.length - 1) * lineHeight;
-      
-      setMentionPopover({
-        isOpen: true,
-        position: {
-          x: textAreaRect.left + textWidth + 16, // 16px for padding
-          y: textAreaRect.top + yOffset + 30, // 30px offset below the line
-        },
-        query: afterAt,
-        mentionStart: lastAtIndex,
-      });
-    }
+    setMentionPopover({
+      isOpen: true,
+      position: {
+        x: textAreaRect.left,
+        y: textAreaRect.top, // Position at the top of the textarea
+      },
+      query: afterAt,
+      mentionStart: lastAtIndex,
+    });
   };
 
   const handlePaste = async (evt: React.ClipboardEvent<HTMLTextAreaElement>) => {
@@ -492,6 +476,19 @@ export default function ChatInput({
   };
 
   const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // If mention popover is open, let it handle arrow keys and enter
+    if (mentionPopover.isOpen) {
+      if (evt.key === 'ArrowDown' || evt.key === 'ArrowUp' || evt.key === 'Enter') {
+        // Don't handle these keys here, let the popover handle them
+        return;
+      }
+      if (evt.key === 'Escape') {
+        evt.preventDefault();
+        setMentionPopover(prev => ({ ...prev, isOpen: false }));
+        return;
+      }
+    }
+
     // Handle history navigation first
     handleHistoryNavigation(evt);
 
@@ -502,15 +499,6 @@ export default function ChatInput({
       return;
     }
 
-    // Handle Escape key
-    if (evt.key === 'Escape') {
-      if (mentionPopover.isOpen) {
-        evt.preventDefault();
-        setMentionPopover(prev => ({ ...prev, isOpen: false }));
-        return;
-      }
-    }
-
     if (evt.key === 'Enter') {
       // should not trigger submit on Enter if it's composing (IME input in progress) or shift/alt(option) is pressed
       if (evt.shiftKey || isComposing) {
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 0f3f9eeeabd6..1253301f12af 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -1,5 +1,17 @@
-import React, { useState, useEffect, useRef } from 'react';
-import FuzzyFileSearch from './FuzzyFileSearch';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+
+interface FileItem {
+  path: string;
+  name: string;
+  isDirectory: boolean;
+  relativePath: string;
+}
+
+interface FileItemWithMatch extends FileItem {
+  matchScore: number;
+  matches: number[];
+  matchedText: string;
+}
 
 interface MentionPopoverProps {
   isOpen: boolean;
@@ -9,6 +21,105 @@ interface MentionPopoverProps {
   query: string;
 }
 
+// Simple fuzzy matching algorithm
+const fuzzyMatch = (pattern: string, text: string): { score: number; matches: number[] } => {
+  if (!pattern) return { score: 0, matches: [] };
+  
+  const patternLower = pattern.toLowerCase();
+  const textLower = text.toLowerCase();
+  const matches: number[] = [];
+  
+  let patternIndex = 0;
+  let score = 0;
+  let consecutiveMatches = 0;
+  
+  for (let i = 0; i < textLower.length && patternIndex < patternLower.length; i++) {
+    if (textLower[i] === patternLower[patternIndex]) {
+      matches.push(i);
+      patternIndex++;
+      consecutiveMatches++;
+      
+      // Bonus for consecutive matches
+      score += consecutiveMatches * 2;
+      
+      // Bonus for matches at word boundaries
+      if (i === 0 || textLower[i - 1] === '/' || textLower[i - 1] === '_' || textLower[i - 1] === '-') {
+        score += 5;
+      }
+    } else {
+      consecutiveMatches = 0;
+    }
+  }
+  
+  // Only return a score if all pattern characters were matched
+  if (patternIndex === patternLower.length) {
+    // Penalty for longer strings
+    score -= text.length * 0.1;
+    return { score, matches };
+  }
+  
+  return { score: -1, matches: [] };
+};
+
+// Get file icon based on file type
+const getFileIcon = (fileName: string, isDirectory: boolean): string => {
+  if (isDirectory) {
+    return '📁';
+  }
+  
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  
+  switch (ext) {
+    case 'js':
+    case 'jsx':
+    case 'ts':
+    case 'tsx':
+      return '📄';
+    case 'py':
+      return '🐍';
+    case 'java':
+      return '☕';
+    case 'cpp':
+    case 'c':
+    case 'h':
+      return '⚙️';
+    case 'html':
+    case 'htm':
+      return '🌐';
+    case 'css':
+      return '🎨';
+    case 'json':
+      return '📋';
+    case 'md':
+    case 'markdown':
+      return '📝';
+    case 'txt':
+      return '📄';
+    case 'pdf':
+      return '📕';
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'gif':
+    case 'svg':
+      return '🖼️';
+    case 'mp4':
+    case 'mov':
+    case 'avi':
+      return '🎬';
+    case 'mp3':
+    case 'wav':
+    case 'flac':
+      return '🎵';
+    case 'zip':
+    case 'tar':
+    case 'gz':
+      return '📦';
+    default:
+      return '📄';
+  }
+};
+
 export default function MentionPopover({ 
   isOpen, 
   onClose, 
@@ -16,8 +127,25 @@ export default function MentionPopover({
   position, 
   query
 }: MentionPopoverProps) {
-  const [isFuzzySearchOpen, setIsFuzzySearchOpen] = useState(false);
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const popoverRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Scan files when component opens
+  useEffect(() => {
+    if (isOpen) {
+      scanFilesFromRoot();
+    }
+  }, [isOpen]);
+
+  // Focus the popover when it opens to enable keyboard navigation
+  useEffect(() => {
+    if (isOpen && popoverRef.current) {
+      popoverRef.current.focus();
+    }
+  }, [isOpen]);
 
   // Handle clicks outside the popover
   useEffect(() => {
@@ -36,87 +164,257 @@ export default function MentionPopover({
     };
   }, [isOpen, onClose]);
 
-  const handleFileSearch = () => {
-    setIsFuzzySearchOpen(true);
+  const scanFilesFromRoot = async () => {
+    setIsLoading(true);
+    try {
+      // Start from common user directories for better performance
+      let startPath = '/Users'; // Default to macOS
+      if (window.electron.platform === 'win32') {
+        startPath = 'C:\\Users';
+      } else if (window.electron.platform === 'linux') {
+        startPath = '/home';
+      }
+      
+      const scannedFiles = await scanDirectoryFromRoot(startPath);
+      setFiles(scannedFiles);
+    } catch (error) {
+      console.error('Error scanning files from root:', error);
+      setFiles([]);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  const handleFuzzyFileSelect = (filePath: string) => {
-    onSelect(filePath);
-    setIsFuzzySearchOpen(false);
-    onClose();
+  const scanDirectoryFromRoot = async (dirPath: string, relativePath = '', depth = 0): Promise<FileItem[]> => {
+    // Limit depth for performance when searching from root
+    if (depth > 3) return [];
+    
+    try {
+      const items = await window.electron.listFiles(dirPath);
+      const results: FileItem[] = [];
+      
+      // Common directories to prioritize or skip
+      const priorityDirs = ['Desktop', 'Documents', 'Downloads', 'Projects', 'Development', 'Code'];
+      const skipDirs = [
+        '.git', '.svn', '.hg', 'node_modules', '__pycache__', '.vscode', '.idea',
+        'target', 'dist', 'build', '.cache', '.npm', '.yarn', 'Library', 
+        'System', 'Applications', '.Trash', 'Music', 'Movies', 'Pictures'
+      ];
+      
+      // Sort items to prioritize certain directories
+      const sortedItems = items.sort((a, b) => {
+        const aPriority = priorityDirs.includes(a);
+        const bPriority = priorityDirs.includes(b);
+        if (aPriority && !bPriority) return -1;
+        if (!aPriority && bPriority) return 1;
+        return a.localeCompare(b);
+      });
+      
+      for (const item of sortedItems.slice(0, 30)) { // Limit items per directory
+        const fullPath = `${dirPath}/${item}`;
+        const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
+        
+        // Skip hidden files and common ignore patterns
+        if (item.startsWith('.') || skipDirs.includes(item)) {
+          continue;
+        }
+        
+        try {
+          // Check if it's a directory by trying to list its contents
+          await window.electron.listFiles(fullPath);
+          
+          // It's a directory
+          results.push({
+            path: fullPath,
+            name: item,
+            isDirectory: true,
+            relativePath: itemRelativePath
+          });
+          
+          // Recursively scan important directories
+          if (depth < 2 && (priorityDirs.includes(item) || depth === 0)) {
+            const subFiles = await scanDirectoryFromRoot(fullPath, itemRelativePath, depth + 1);
+            results.push(...subFiles);
+          }
+        } catch {
+          // It's a file - only include common file types
+          const ext = item.split('.').pop()?.toLowerCase();
+          const commonExtensions = [
+            'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'h',
+            'css', 'html', 'json', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg',
+            'sh', 'bat', 'ps1', 'rb', 'go', 'rs', 'php', 'sql', 'r', 'scala',
+            'swift', 'kt', 'dart', 'vue', 'svelte', 'astro'
+          ];
+          
+          if (ext && commonExtensions.includes(ext)) {
+            results.push({
+              path: fullPath,
+              name: item,
+              isDirectory: false,
+              relativePath: itemRelativePath
+            });
+          }
+        }
+      }
+      
+      return results;
+    } catch (error) {
+      console.error(`Error scanning directory ${dirPath}:`, error);
+      return [];
+    }
   };
 
+  // Filter and sort files based on query
+  const filteredFiles = useMemo((): FileItemWithMatch[] => {
+    if (!query.trim()) {
+      return files.slice(0, 10).map(file => ({
+        ...file,
+        matchScore: 0,
+        matches: [],
+        matchedText: file.name
+      })); // Show first 10 files when no query
+    }
+    
+    const results = files
+      .map(file => {
+        const nameMatch = fuzzyMatch(query, file.name);
+        const pathMatch = fuzzyMatch(query, file.relativePath);
+        
+        // Use the better of the two matches
+        const bestMatch = nameMatch.score > pathMatch.score ? nameMatch : pathMatch;
+        
+        return {
+          ...file,
+          matchScore: bestMatch.score,
+          matches: bestMatch.matches,
+          matchedText: nameMatch.score > pathMatch.score ? file.name : file.relativePath
+        };
+      })
+      .filter(file => file.matchScore > 0)
+      .sort((a, b) => b.matchScore - a.matchScore)
+      .slice(0, 10); // Limit to 10 results
+    
+    return results;
+  }, [files, query]);
+
+  // Update selected index when filtered results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [filteredFiles]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (listRef.current) {
+      const selectedElement = listRef.current.children[selectedIndex] as HTMLElement;
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [selectedIndex]);
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      onClose();
-    } else if (e.key === 'Enter') {
-      handleFileSearch();
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        onClose();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(prev + 1, filteredFiles.length - 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(prev - 1, 0));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filteredFiles[selectedIndex]) {
+          onSelect(filteredFiles[selectedIndex].path);
+          onClose();
+        }
+        break;
     }
   };
 
+  const handleItemClick = (index: number) => {
+    setSelectedIndex(index);
+    onSelect(filteredFiles[index].path);
+    onClose();
+  };
+
   if (!isOpen) return null;
 
+  const displayedFiles = filteredFiles.slice(0, 5);
+  const remainingCount = filteredFiles.length - displayedFiles.length;
+
   return (
-    <>
-      <div
-        ref={popoverRef}
-        className="fixed z-50 bg-bgApp border border-borderStandard rounded-lg shadow-lg min-w-64"
-        style={{
-          left: position.x,
-          top: position.y,
-        }}
-      >
-        <div className="p-3">
-          <div className="text-sm font-medium text-textStandard mb-2">
-            Attach files
+    <div
+      ref={popoverRef}
+      className="fixed z-50 bg-bgApp border border-borderStandard rounded-lg shadow-lg min-w-96 max-w-lg"
+      style={{
+        left: position.x,
+        top: position.y - 10, // Position above the chat input
+        transform: 'translateY(-100%)', // Move it fully above
+      }}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+    >
+      <div className="p-3">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-4">
+            <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-textSubtle"></div>
+            <span className="ml-2 text-sm text-textSubtle">Scanning files...</span>
           </div>
-          <div className="space-y-2">
-            <button
-              onClick={handleFileSearch}
-              onKeyDown={handleKeyDown}
-              className="w-full text-left px-3 py-2 text-sm text-textStandard hover:bg-bgSubtle rounded-md transition-colors flex items-center gap-2"
-            >
-              <span className="text-textSubtle">📁</span>
-              <div>
-                <div>Search files on computer</div>
-                <div className="text-xs text-textSubtle">
-                  {query ? `Search for "${query}"` : 'Browse and search all files'}
+        ) : (
+          <>
+            <div ref={listRef} className="space-y-1">
+              {displayedFiles.map((file, index) => (
+                <div
+                  key={file.path}
+                  onClick={() => handleItemClick(index)}
+                  className={`flex items-center gap-3 p-2 rounded-md cursor-pointer transition-colors ${
+                    index === selectedIndex
+                      ? 'bg-bgProminent text-textProminentInverse'
+                      : 'hover:bg-bgSubtle'
+                  }`}
+                >
+                  <span className="text-lg flex-shrink-0">
+                    {getFileIcon(file.name, file.isDirectory)}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-sm truncate">
+                      {file.name}
+                    </div>
+                    <div className="text-xs text-textSubtle truncate">
+                      {file.path}
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </button>
-            <button
-              onClick={() => {
-                // Trigger the existing file selector
-                window.electron.selectFileOrDirectory().then((path) => {
-                  if (path) {
-                    onSelect(path);
-                    onClose();
-                  }
-                });
-              }}
-              className="w-full text-left px-3 py-2 text-sm text-textStandard hover:bg-bgSubtle rounded-md transition-colors flex items-center gap-2"
-            >
-              <span className="text-textSubtle">📎</span>
-              <div>
-                <div>Select file or folder</div>
-                <div className="text-xs text-textSubtle">
-                  Open file picker dialog
+              ))}
+              
+              {!isLoading && displayedFiles.length === 0 && query && (
+                <div className="p-4 text-center text-textSubtle text-sm">
+                  No files found matching "{query}"
+                </div>
+              )}
+              
+              {!isLoading && displayedFiles.length === 0 && !query && (
+                <div className="p-4 text-center text-textSubtle text-sm">
+                  Start typing to search for files
+                </div>
+              )}
+            </div>
+            
+            {remainingCount > 0 && (
+              <div className="mt-2 pt-2 border-t border-borderSubtle">
+                <div className="text-xs text-textSubtle text-center">
+                  Show {remainingCount} more...
                 </div>
               </div>
-            </button>
-          </div>
-          <div className="mt-3 pt-2 border-t border-borderSubtle text-xs text-textSubtle">
-            Press Enter to search • Esc to close
-          </div>
-        </div>
+            )}
+          </>
+        )}
       </div>
-
-      <FuzzyFileSearch
-        isOpen={isFuzzySearchOpen}
-        onClose={() => setIsFuzzySearchOpen(false)}
-        onSelect={handleFuzzyFileSelect}
-        searchFromRoot={true}
-      />
-    </>
+    </div>
   );
 }
\ No newline at end of file

From 89a5204096919d2bea906bdc121b4b6a8b8b0599 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:15:09 -0400
Subject: [PATCH 04/16] Fix @ mention popover focus issues and replace emojis
 with icon set

- Create FileIcon component with simple SVG icons for different file types
- Replace emoji icons with clean, consistent SVG icon set
- Fix focus stealing issue by removing auto-focus from popover
- Move keyboard navigation handling to ChatInput component
- Prevent popover from stealing focus while typing
- Update MentionPopover to receive filtered files from parent
- Improve keyboard navigation (arrow keys, enter, escape)
- Maintain chat input focus while popover is open
- Add proper TypeScript types for all components
- Remove unused React import to fix TypeScript warnings
---
 ui/desktop/src/components/ChatInput.tsx      |  47 ++++++-
 ui/desktop/src/components/FileIcon.tsx       | 127 +++++++++++++++++
 ui/desktop/src/components/MentionPopover.tsx | 135 ++++---------------
 3 files changed, 193 insertions(+), 116 deletions(-)
 create mode 100644 ui/desktop/src/components/FileIcon.tsx

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index d3eee22179e8..c55bb6d89d43 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -73,11 +73,23 @@ export default function ChatInput({
     position: { x: number; y: number };
     query: string;
     mentionStart: number;
+    selectedIndex: number;
+    filteredFiles: Array<{
+      path: string;
+      name: string;
+      isDirectory: boolean;
+      relativePath: string;
+      matchScore: number;
+      matches: number[];
+      matchedText: string;
+    }>;
   }>({
     isOpen: false,
     position: { x: 0, y: 0 },
     query: '',
     mentionStart: -1,
+    selectedIndex: 0,
+    filteredFiles: [],
   });
 
   // Whisper hook for voice dictation
@@ -263,7 +275,8 @@ export default function ChatInput({
     // Calculate position for the popover - position it above the chat input
     const textAreaRect = textArea.getBoundingClientRect();
     
-    setMentionPopover({
+    setMentionPopover(prev => ({
+      ...prev,
       isOpen: true,
       position: {
         x: textAreaRect.left,
@@ -271,7 +284,9 @@ export default function ChatInput({
       },
       query: afterAt,
       mentionStart: lastAtIndex,
-    });
+      selectedIndex: 0, // Reset selection when query changes
+      filteredFiles: [], // Will be populated by the popover
+    }));
   };
 
   const handlePaste = async (evt: React.ClipboardEvent<HTMLTextAreaElement>) => {
@@ -476,10 +491,29 @@ export default function ChatInput({
   };
 
   const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // If mention popover is open, let it handle arrow keys and enter
+    // If mention popover is open, handle arrow keys and enter
     if (mentionPopover.isOpen) {
-      if (evt.key === 'ArrowDown' || evt.key === 'ArrowUp' || evt.key === 'Enter') {
-        // Don't handle these keys here, let the popover handle them
+      if (evt.key === 'ArrowDown') {
+        evt.preventDefault();
+        setMentionPopover(prev => ({
+          ...prev,
+          selectedIndex: Math.min(prev.selectedIndex + 1, prev.filteredFiles.length - 1)
+        }));
+        return;
+      }
+      if (evt.key === 'ArrowUp') {
+        evt.preventDefault();
+        setMentionPopover(prev => ({
+          ...prev,
+          selectedIndex: Math.max(prev.selectedIndex - 1, 0)
+        }));
+        return;
+      }
+      if (evt.key === 'Enter') {
+        evt.preventDefault();
+        if (mentionPopover.filteredFiles[mentionPopover.selectedIndex]) {
+          handleMentionFileSelect(mentionPopover.filteredFiles[mentionPopover.selectedIndex].path);
+        }
         return;
       }
       if (evt.key === 'Escape') {
@@ -805,6 +839,9 @@ export default function ChatInput({
         onSelect={handleMentionFileSelect}
         position={mentionPopover.position}
         query={mentionPopover.query}
+        selectedIndex={mentionPopover.selectedIndex}
+        onSelectedIndexChange={(index) => setMentionPopover(prev => ({ ...prev, selectedIndex: index }))}
+        filteredFiles={mentionPopover.filteredFiles}
       />
     </>
   );
diff --git a/ui/desktop/src/components/FileIcon.tsx b/ui/desktop/src/components/FileIcon.tsx
new file mode 100644
index 000000000000..ae5207987f16
--- /dev/null
+++ b/ui/desktop/src/components/FileIcon.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+
+interface FileIconProps {
+  fileName: string;
+  isDirectory: boolean;
+  className?: string;
+}
+
+export const FileIcon: React.FC<FileIconProps> = ({ fileName, isDirectory, className = "w-4 h-4" }) => {
+  if (isDirectory) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+      </svg>
+    );
+  }
+  
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  
+  switch (ext) {
+    case 'js':
+    case 'jsx':
+    case 'ts':
+    case 'tsx':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10,9 9,9 8,9"/>
+        </svg>
+      );
+    case 'py':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <line x1="12" y1="18" x2="12" y2="12"/>
+          <line x1="9" y1="15" x2="15" y2="15"/>
+        </svg>
+      );
+    case 'html':
+    case 'htm':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10,9 9,9 8,9"/>
+        </svg>
+      );
+    case 'css':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <circle cx="12" cy="15" r="3"/>
+        </svg>
+      );
+    case 'json':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <path d="M9 12h6"/>
+          <path d="M9 16h6"/>
+        </svg>
+      );
+    case 'md':
+    case 'markdown':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10,9 9,9 8,9"/>
+        </svg>
+      );
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'gif':
+    case 'svg':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+          <circle cx="8.5" cy="8.5" r="1.5"/>
+          <polyline points="21,15 16,10 5,21"/>
+        </svg>
+      );
+    case 'pdf':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10,9 9,9 8,9"/>
+        </svg>
+      );
+    case 'zip':
+    case 'tar':
+    case 'gz':
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <path d="M10 20v-1a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0Z"/>
+          <path d="M10 7h4"/>
+          <path d="M10 11h4"/>
+        </svg>
+      );
+    default:
+      return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14,2 14,8 20,8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10,9 9,9 8,9"/>
+        </svg>
+      );
+  }
+};
\ No newline at end of file
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 1253301f12af..7b2bf8158508 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { FileIcon } from './FileIcon';
 
 interface FileItem {
   path: string;
@@ -19,6 +20,9 @@ interface MentionPopoverProps {
   onSelect: (filePath: string) => void;
   position: { x: number; y: number };
   query: string;
+  selectedIndex: number;
+  onSelectedIndexChange: (index: number) => void;
+  filteredFiles: FileItemWithMatch[];
 }
 
 // Simple fuzzy matching algorithm
@@ -61,91 +65,27 @@ const fuzzyMatch = (pattern: string, text: string): { score: number; matches: nu
   return { score: -1, matches: [] };
 };
 
-// Get file icon based on file type
-const getFileIcon = (fileName: string, isDirectory: boolean): string => {
-  if (isDirectory) {
-    return '📁';
-  }
-  
-  const ext = fileName.split('.').pop()?.toLowerCase();
-  
-  switch (ext) {
-    case 'js':
-    case 'jsx':
-    case 'ts':
-    case 'tsx':
-      return '📄';
-    case 'py':
-      return '🐍';
-    case 'java':
-      return '☕';
-    case 'cpp':
-    case 'c':
-    case 'h':
-      return '⚙️';
-    case 'html':
-    case 'htm':
-      return '🌐';
-    case 'css':
-      return '🎨';
-    case 'json':
-      return '📋';
-    case 'md':
-    case 'markdown':
-      return '📝';
-    case 'txt':
-      return '📄';
-    case 'pdf':
-      return '📕';
-    case 'png':
-    case 'jpg':
-    case 'jpeg':
-    case 'gif':
-    case 'svg':
-      return '🖼️';
-    case 'mp4':
-    case 'mov':
-    case 'avi':
-      return '🎬';
-    case 'mp3':
-    case 'wav':
-    case 'flac':
-      return '🎵';
-    case 'zip':
-    case 'tar':
-    case 'gz':
-      return '📦';
-    default:
-      return '📄';
-  }
-};
-
 export default function MentionPopover({ 
   isOpen, 
   onClose, 
   onSelect, 
   position, 
-  query
+  query,
+  selectedIndex,
+  onSelectedIndexChange,
+  filteredFiles
 }: MentionPopoverProps) {
   const [files, setFiles] = useState<FileItem[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(0);
   const popoverRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
   // Scan files when component opens
   useEffect(() => {
-    if (isOpen) {
+    if (isOpen && filteredFiles.length === 0) {
       scanFilesFromRoot();
     }
-  }, [isOpen]);
-
-  // Focus the popover when it opens to enable keyboard navigation
-  useEffect(() => {
-    if (isOpen && popoverRef.current) {
-      popoverRef.current.focus();
-    }
-  }, [isOpen]);
+  }, [isOpen, filteredFiles.length]);
 
   // Handle clicks outside the popover
   useEffect(() => {
@@ -265,7 +205,11 @@ export default function MentionPopover({
   };
 
   // Filter and sort files based on query
-  const filteredFiles = useMemo((): FileItemWithMatch[] => {
+  const displayFiles = useMemo((): FileItemWithMatch[] => {
+    if (filteredFiles.length > 0) {
+      return filteredFiles;
+    }
+    
     if (!query.trim()) {
       return files.slice(0, 10).map(file => ({
         ...file,
@@ -295,12 +239,7 @@ export default function MentionPopover({
       .slice(0, 10); // Limit to 10 results
     
     return results;
-  }, [files, query]);
-
-  // Update selected index when filtered results change
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [filteredFiles]);
+  }, [files, query, filteredFiles]);
 
   // Scroll selected item into view
   useEffect(() => {
@@ -312,40 +251,16 @@ export default function MentionPopover({
     }
   }, [selectedIndex]);
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    switch (e.key) {
-      case 'Escape':
-        e.preventDefault();
-        onClose();
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIndex(prev => Math.min(prev + 1, filteredFiles.length - 1));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIndex(prev => Math.max(prev - 1, 0));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (filteredFiles[selectedIndex]) {
-          onSelect(filteredFiles[selectedIndex].path);
-          onClose();
-        }
-        break;
-    }
-  };
-
   const handleItemClick = (index: number) => {
-    setSelectedIndex(index);
-    onSelect(filteredFiles[index].path);
+    onSelectedIndexChange(index);
+    onSelect(displayFiles[index].path);
     onClose();
   };
 
   if (!isOpen) return null;
 
-  const displayedFiles = filteredFiles.slice(0, 5);
-  const remainingCount = filteredFiles.length - displayedFiles.length;
+  const displayedFiles = displayFiles.slice(0, 5);
+  const remainingCount = displayFiles.length - displayedFiles.length;
 
   return (
     <div
@@ -356,8 +271,6 @@ export default function MentionPopover({
         top: position.y - 10, // Position above the chat input
         transform: 'translateY(-100%)', // Move it fully above
       }}
-      onKeyDown={handleKeyDown}
-      tabIndex={-1}
     >
       <div className="p-3">
         {isLoading ? (
@@ -378,9 +291,9 @@ export default function MentionPopover({
                       : 'hover:bg-bgSubtle'
                   }`}
                 >
-                  <span className="text-lg flex-shrink-0">
-                    {getFileIcon(file.name, file.isDirectory)}
-                  </span>
+                  <div className="flex-shrink-0 text-textSubtle">
+                    <FileIcon fileName={file.name} isDirectory={file.isDirectory} />
+                  </div>
                   <div className="flex-1 min-w-0">
                     <div className="font-medium text-sm truncate">
                       {file.name}

From 234ba44661100a287f2857d851df4635fdd278a2 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:18:17 -0400
Subject: [PATCH 05/16] Improve fuzzy search to find files inside directories

- Increase directory scanning depth from 3 to 5 levels for better file discovery
- Add 'icons', 'src', 'components' to priority directories for scanning
- Reduce directory skip list at deeper levels to find more nested files
- Increase item limits per directory (50/40/30 based on depth)
- Enhance fuzzy matching algorithm with better scoring:
  - Higher bonus for consecutive matches (3x vs 2x)
  - Bonus for path separators and word boundaries (10 points)
  - Bonus for filename start matches (15 points)
  - Bonus for exact substring matches (20 points)
  - Bonus for filename-specific matches (25 points)
  - Reduced penalty for longer paths (0.05x vs 0.1x)
- Search against file name, relative path, AND full path
- Prefer files over directories in results when scores are similar
- Increase displayed results from 5 to 8 files
- Increase total results from 10 to 20 files
- Add more file extensions including design files (ai, eps, sketch, fig, xd, psd)
- Include files without extensions (README, LICENSE, etc.)

Now searching '@icons' will find files inside icon directories!
---
 ui/desktop/src/components/MentionPopover.tsx | 113 ++++++++++++++-----
 1 file changed, 87 insertions(+), 26 deletions(-)

diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 7b2bf8158508..d45a0e7f3ad3 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -25,7 +25,7 @@ interface MentionPopoverProps {
   filteredFiles: FileItemWithMatch[];
 }
 
-// Simple fuzzy matching algorithm
+// Enhanced fuzzy matching algorithm
 const fuzzyMatch = (pattern: string, text: string): { score: number; matches: number[] } => {
   if (!pattern) return { score: 0, matches: [] };
   
@@ -44,11 +44,17 @@ const fuzzyMatch = (pattern: string, text: string): { score: number; matches: nu
       consecutiveMatches++;
       
       // Bonus for consecutive matches
-      score += consecutiveMatches * 2;
+      score += consecutiveMatches * 3;
       
-      // Bonus for matches at word boundaries
-      if (i === 0 || textLower[i - 1] === '/' || textLower[i - 1] === '_' || textLower[i - 1] === '-') {
-        score += 5;
+      // Bonus for matches at word boundaries or path separators
+      if (i === 0 || textLower[i - 1] === '/' || textLower[i - 1] === '_' || textLower[i - 1] === '-' || textLower[i - 1] === '.') {
+        score += 10;
+      }
+      
+      // Bonus for matching the start of the filename (after last /)
+      const lastSlash = textLower.lastIndexOf('/', i);
+      if (lastSlash !== -1 && i === lastSlash + 1) {
+        score += 15;
       }
     } else {
       consecutiveMatches = 0;
@@ -57,8 +63,20 @@ const fuzzyMatch = (pattern: string, text: string): { score: number; matches: nu
   
   // Only return a score if all pattern characters were matched
   if (patternIndex === patternLower.length) {
-    // Penalty for longer strings
-    score -= text.length * 0.1;
+    // Less penalty for longer strings to allow nested files to rank well
+    score -= text.length * 0.05;
+    
+    // Bonus for exact substring matches
+    if (textLower.includes(patternLower)) {
+      score += 20;
+    }
+    
+    // Bonus for matching the filename specifically (not just the path)
+    const fileName = text.split('/').pop()?.toLowerCase() || '';
+    if (fileName.includes(patternLower)) {
+      score += 25;
+    }
+    
     return { score, matches };
   }
   
@@ -126,21 +144,24 @@ export default function MentionPopover({
   };
 
   const scanDirectoryFromRoot = async (dirPath: string, relativePath = '', depth = 0): Promise<FileItem[]> => {
-    // Limit depth for performance when searching from root
-    if (depth > 3) return [];
+    // Increase depth limit for better file discovery
+    if (depth > 5) return [];
     
     try {
       const items = await window.electron.listFiles(dirPath);
       const results: FileItem[] = [];
       
       // Common directories to prioritize or skip
-      const priorityDirs = ['Desktop', 'Documents', 'Downloads', 'Projects', 'Development', 'Code'];
+      const priorityDirs = ['Desktop', 'Documents', 'Downloads', 'Projects', 'Development', 'Code', 'src', 'components', 'icons'];
       const skipDirs = [
         '.git', '.svn', '.hg', 'node_modules', '__pycache__', '.vscode', '.idea',
         'target', 'dist', 'build', '.cache', '.npm', '.yarn', 'Library', 
-        'System', 'Applications', '.Trash', 'Music', 'Movies', 'Pictures'
+        'System', 'Applications', '.Trash'
       ];
       
+      // Don't skip as many directories at deeper levels to find more files
+      const skipDirsAtDepth = depth > 2 ? ['.git', '.svn', '.hg', 'node_modules', '__pycache__'] : skipDirs;
+      
       // Sort items to prioritize certain directories
       const sortedItems = items.sort((a, b) => {
         const aPriority = priorityDirs.includes(a);
@@ -150,12 +171,15 @@ export default function MentionPopover({
         return a.localeCompare(b);
       });
       
-      for (const item of sortedItems.slice(0, 30)) { // Limit items per directory
+      // Increase item limit per directory for better coverage
+      const itemLimit = depth === 0 ? 50 : depth === 1 ? 40 : 30;
+      
+      for (const item of sortedItems.slice(0, itemLimit)) {
         const fullPath = `${dirPath}/${item}`;
         const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
         
         // Skip hidden files and common ignore patterns
-        if (item.startsWith('.') || skipDirs.includes(item)) {
+        if (item.startsWith('.') || skipDirsAtDepth.includes(item)) {
           continue;
         }
         
@@ -171,22 +195,38 @@ export default function MentionPopover({
             relativePath: itemRelativePath
           });
           
-          // Recursively scan important directories
-          if (depth < 2 && (priorityDirs.includes(item) || depth === 0)) {
+          // Recursively scan directories more aggressively
+          // Always scan priority directories and continue scanning to reasonable depth
+          if (depth < 4 || priorityDirs.includes(item)) {
             const subFiles = await scanDirectoryFromRoot(fullPath, itemRelativePath, depth + 1);
             results.push(...subFiles);
           }
         } catch {
-          // It's a file - only include common file types
+          // It's a file - include more file types
           const ext = item.split('.').pop()?.toLowerCase();
           const commonExtensions = [
+            // Code files
             'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'h',
             'css', 'html', 'json', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg',
             'sh', 'bat', 'ps1', 'rb', 'go', 'rs', 'php', 'sql', 'r', 'scala',
-            'swift', 'kt', 'dart', 'vue', 'svelte', 'astro'
+            'swift', 'kt', 'dart', 'vue', 'svelte', 'astro', 'scss', 'less',
+            // Documentation
+            'readme', 'license', 'changelog', 'contributing',
+            // Config files
+            'gitignore', 'dockerignore', 'editorconfig', 'prettierrc', 'eslintrc',
+            // Images and assets
+            'png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'tiff', 'tif',
+            // Vector and design files
+            'ai', 'eps', 'sketch', 'fig', 'xd', 'psd',
+            // Other common files
+            'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'
           ];
           
-          if (ext && commonExtensions.includes(ext)) {
+          // Include files without extensions (like README, LICENSE, etc.)
+          const hasExtension = item.includes('.');
+          const shouldInclude = !hasExtension || (ext && commonExtensions.includes(ext));
+          
+          if (shouldInclude) {
             results.push({
               path: fullPath,
               name: item,
@@ -211,32 +251,53 @@ export default function MentionPopover({
     }
     
     if (!query.trim()) {
-      return files.slice(0, 10).map(file => ({
+      return files.slice(0, 15).map(file => ({
         ...file,
         matchScore: 0,
         matches: [],
         matchedText: file.name
-      })); // Show first 10 files when no query
+      })); // Show first 15 files when no query
     }
     
     const results = files
       .map(file => {
         const nameMatch = fuzzyMatch(query, file.name);
         const pathMatch = fuzzyMatch(query, file.relativePath);
+        const fullPathMatch = fuzzyMatch(query, file.path);
+        
+        // Use the best match among name, relative path, and full path
+        let bestMatch = nameMatch;
+        let matchedText = file.name;
+        
+        if (pathMatch.score > bestMatch.score) {
+          bestMatch = pathMatch;
+          matchedText = file.relativePath;
+        }
         
-        // Use the better of the two matches
-        const bestMatch = nameMatch.score > pathMatch.score ? nameMatch : pathMatch;
+        if (fullPathMatch.score > bestMatch.score) {
+          bestMatch = fullPathMatch;
+          matchedText = file.path;
+        }
         
         return {
           ...file,
           matchScore: bestMatch.score,
           matches: bestMatch.matches,
-          matchedText: nameMatch.score > pathMatch.score ? file.name : file.relativePath
+          matchedText
         };
       })
       .filter(file => file.matchScore > 0)
-      .sort((a, b) => b.matchScore - a.matchScore)
-      .slice(0, 10); // Limit to 10 results
+      .sort((a, b) => {
+        // Sort by score first, then prefer files over directories, then alphabetically
+        if (Math.abs(a.matchScore - b.matchScore) < 1) {
+          if (a.isDirectory !== b.isDirectory) {
+            return a.isDirectory ? 1 : -1; // Files first
+          }
+          return a.name.localeCompare(b.name);
+        }
+        return b.matchScore - a.matchScore;
+      })
+      .slice(0, 20); // Increase to 20 results
     
     return results;
   }, [files, query, filteredFiles]);
@@ -259,7 +320,7 @@ export default function MentionPopover({
 
   if (!isOpen) return null;
 
-  const displayedFiles = displayFiles.slice(0, 5);
+  const displayedFiles = displayFiles.slice(0, 8); // Show up to 8 files
   const remainingCount = displayFiles.length - displayedFiles.length;
 
   return (

From 2db486ca0df30f387bbad3409f265b23bcf64528 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:21:32 -0400
Subject: [PATCH 06/16] Add comprehensive file type icons for better file
 identification
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Expand FileIcon component with specific icons for different file categories:
  📸 Image files: PNG, JPG, GIF, SVG, WebP, etc. - camera/image icon
  🎬 Video files: MP4, MOV, AVI, MKV, etc. - play button icon
  🎵 Audio files: MP3, WAV, FLAC, AAC, etc. - music note icon
  📦 Archive files: ZIP, TAR, GZ, RAR, 7Z, etc. - compressed folder icon
  📄 PDF files: Distinct PDF icon with document lines
  🎨 Design files: AI, EPS, Sketch, Figma, XD, PSD - design tool icon
  ⚡ JavaScript/TypeScript: JS, TS, JSX, TSX - code with checkmark
  🐍 Python files: PY, PYW, PYC - code with Python-specific elements
  🌐 HTML files: HTML, HTM, XHTML - structured markup icon
  🎨 CSS files: CSS, SCSS, SASS, LESS - styling icon
  📋 Data files: JSON, XML, YAML, CSV - structured data icon
  📝 Markdown files: MD, MDX - document with formatting
  🗄️ Database files: SQL, DB, SQLite - database cylinder icon
  ⚙️ Config files: ENV, INI, CFG, Dockerfile, etc. - settings gear icon
  📄 Text files: TXT, README, LICENSE, etc. - basic document icon
  🚀 Executable files: EXE, APP, DMG, etc. - executable with checkmark
  💻 Script files: SH, BAT, PS1, RB, PHP, etc. - terminal prompt icon
  📁 Directories: Folder icon
  📄 Default: Generic file icon for unknown types

- Support filename-based detection for files without extensions
- Include comprehensive file extension coverage
- Maintain consistent visual design with stroke-based SVG icons
- Improve user experience by making file types instantly recognizable
---
 ui/desktop/src/components/FileIcon.tsx | 315 ++++++++++++++++---------
 1 file changed, 209 insertions(+), 106 deletions(-)

diff --git a/ui/desktop/src/components/FileIcon.tsx b/ui/desktop/src/components/FileIcon.tsx
index ae5207987f16..d45bbeabec1b 100644
--- a/ui/desktop/src/components/FileIcon.tsx
+++ b/ui/desktop/src/components/FileIcon.tsx
@@ -17,111 +17,214 @@ export const FileIcon: React.FC<FileIconProps> = ({ fileName, isDirectory, class
   
   const ext = fileName.split('.').pop()?.toLowerCase();
   
-  switch (ext) {
-    case 'js':
-    case 'jsx':
-    case 'ts':
-    case 'tsx':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <line x1="16" y1="13" x2="8" y2="13"/>
-          <line x1="16" y1="17" x2="8" y2="17"/>
-          <polyline points="10,9 9,9 8,9"/>
-        </svg>
-      );
-    case 'py':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <line x1="12" y1="18" x2="12" y2="12"/>
-          <line x1="9" y1="15" x2="15" y2="15"/>
-        </svg>
-      );
-    case 'html':
-    case 'htm':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <line x1="16" y1="13" x2="8" y2="13"/>
-          <line x1="16" y1="17" x2="8" y2="17"/>
-          <polyline points="10,9 9,9 8,9"/>
-        </svg>
-      );
-    case 'css':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <circle cx="12" cy="15" r="3"/>
-        </svg>
-      );
-    case 'json':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <path d="M9 12h6"/>
-          <path d="M9 16h6"/>
-        </svg>
-      );
-    case 'md':
-    case 'markdown':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <line x1="16" y1="13" x2="8" y2="13"/>
-          <line x1="16" y1="17" x2="8" y2="17"/>
-          <polyline points="10,9 9,9 8,9"/>
-        </svg>
-      );
-    case 'png':
-    case 'jpg':
-    case 'jpeg':
-    case 'gif':
-    case 'svg':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-          <circle cx="8.5" cy="8.5" r="1.5"/>
-          <polyline points="21,15 16,10 5,21"/>
-        </svg>
-      );
-    case 'pdf':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <line x1="16" y1="13" x2="8" y2="13"/>
-          <line x1="16" y1="17" x2="8" y2="17"/>
-          <polyline points="10,9 9,9 8,9"/>
-        </svg>
-      );
-    case 'zip':
-    case 'tar':
-    case 'gz':
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <path d="M10 20v-1a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0Z"/>
-          <path d="M10 7h4"/>
-          <path d="M10 11h4"/>
-        </svg>
-      );
-    default:
-      return (
-        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14,2 14,8 20,8"/>
-          <line x1="16" y1="13" x2="8" y2="13"/>
-          <line x1="16" y1="17" x2="8" y2="17"/>
-          <polyline points="10,9 9,9 8,9"/>
-        </svg>
-      );
+  // Image files
+  if (['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'tiff', 'tif'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+        <circle cx="8.5" cy="8.5" r="1.5"/>
+        <polyline points="21,15 16,10 5,21"/>
+      </svg>
+    );
+  }
+  
+  // Video files
+  if (['mp4', 'mov', 'avi', 'mkv', 'webm', 'flv', 'wmv'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polygon points="23 7 16 12 23 17 23 7"/>
+        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
+      </svg>
+    );
+  }
+  
+  // Audio files
+  if (['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M9 18V5l12-2v13"/>
+        <circle cx="6" cy="18" r="3"/>
+        <circle cx="18" cy="16" r="3"/>
+      </svg>
+    );
   }
+  
+  // Archive/compressed files
+  if (['zip', 'tar', 'gz', 'rar', '7z', 'bz2'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M16 22h2a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v3"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <path d="M10 20v-1a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0Z"/>
+        <path d="M10 7h4"/>
+        <path d="M10 11h4"/>
+      </svg>
+    );
+  }
+  
+  // PDF files
+  if (ext === 'pdf') {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <path d="M10 12h4"/>
+        <path d="M10 16h2"/>
+        <path d="M10 8h2"/>
+      </svg>
+    );
+  }
+  
+  // Design files
+  if (['ai', 'eps', 'sketch', 'fig', 'xd', 'psd'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+        <path d="M9 9h6v6h-6z"/>
+        <path d="M16 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3z"/>
+      </svg>
+    );
+  }
+  
+  // JavaScript/TypeScript files
+  if (['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <path d="M10 13l2 2 4-4"/>
+      </svg>
+    );
+  }
+  
+  // Python files
+  if (['py', 'pyw', 'pyc'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <circle cx="10" cy="12" r="2"/>
+        <circle cx="14" cy="16" r="2"/>
+        <path d="M12 10c0-1 1-2 2-2s2 1 2 2-1 2-2 2"/>
+      </svg>
+    );
+  }
+  
+  // HTML files
+  if (['html', 'htm', 'xhtml'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <polyline points="9,13 9,17 15,17 15,13"/>
+        <line x1="12" y1="13" x2="12" y2="17"/>
+      </svg>
+    );
+  }
+  
+  // CSS files
+  if (['css', 'scss', 'sass', 'less', 'stylus'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <path d="M8 13h8"/>
+        <path d="M8 17h8"/>
+        <circle cx="12" cy="15" r="1"/>
+      </svg>
+    );
+  }
+  
+  // JSON/Data files
+  if (['json', 'xml', 'yaml', 'yml', 'toml', 'csv'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <path d="M9 13v-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1"/>
+        <path d="M9 17v-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1"/>
+      </svg>
+    );
+  }
+  
+  // Markdown files
+  if (['md', 'markdown', 'mdx'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <line x1="16" y1="13" x2="8" y2="13"/>
+        <line x1="16" y1="17" x2="8" y2="17"/>
+        <polyline points="10,9 9,9 8,9"/>
+      </svg>
+    );
+  }
+  
+  // Database files
+  if (['sql', 'db', 'sqlite', 'sqlite3'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <ellipse cx="12" cy="5" rx="9" ry="3"/>
+        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
+        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+      </svg>
+    );
+  }
+  
+  // Configuration files
+  if (['env', 'ini', 'cfg', 'conf', 'config', 'gitignore', 'dockerignore', 'editorconfig', 'prettierrc', 'eslintrc'].includes(ext || '') || 
+      ['dockerfile', 'makefile', 'rakefile', 'gemfile'].includes(fileName.toLowerCase())) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="12" cy="12" r="3"/>
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+      </svg>
+    );
+  }
+  
+  // Text files
+  if (['txt', 'log', 'readme', 'license', 'changelog', 'contributing'].includes(ext || '') ||
+      ['readme', 'license', 'changelog', 'contributing'].includes(fileName.toLowerCase())) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <line x1="16" y1="13" x2="8" y2="13"/>
+        <line x1="16" y1="17" x2="8" y2="17"/>
+        <polyline points="10,9 9,9 8,9"/>
+      </svg>
+    );
+  }
+  
+  // Executable files
+  if (['exe', 'app', 'deb', 'rpm', 'dmg', 'pkg', 'msi'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polygon points="14 2 18 6 18 20 6 20 6 4 14 4"/>
+        <polyline points="14,2 14,8 20,8"/>
+        <path d="M10 12l2 2 4-4"/>
+      </svg>
+    );
+  }
+  
+  // Script files
+  if (['sh', 'bash', 'zsh', 'fish', 'bat', 'cmd', 'ps1', 'rb', 'pl', 'php'].includes(ext || '')) {
+    return (
+      <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <polyline points="4 17 10 11 4 5"/>
+        <line x1="12" y1="19" x2="20" y2="19"/>
+      </svg>
+    );
+  }
+  
+  // Default file icon
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+      <polyline points="14,2 14,8 20,8"/>
+      <line x1="16" y1="13" x2="8" y2="13"/>
+      <line x1="16" y1="17" x2="8" y2="17"/>
+      <polyline points="10,9 9,9 8,9"/>
+    </svg>
+  );
 };
\ No newline at end of file

From 9b1d66ef244d216c34aa1e937a271aa1417dce9e Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:23:37 -0400
Subject: [PATCH 07/16] Add debug logging to investigate icon issue

---
 ui/desktop/src/components/FileIcon.tsx       | 3 +++
 ui/desktop/src/components/MentionPopover.tsx | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/ui/desktop/src/components/FileIcon.tsx b/ui/desktop/src/components/FileIcon.tsx
index d45bbeabec1b..5529e5869295 100644
--- a/ui/desktop/src/components/FileIcon.tsx
+++ b/ui/desktop/src/components/FileIcon.tsx
@@ -7,6 +7,9 @@ interface FileIconProps {
 }
 
 export const FileIcon: React.FC<FileIconProps> = ({ fileName, isDirectory, className = "w-4 h-4" }) => {
+  // Debug logging
+  console.log('FileIcon:', { fileName, isDirectory, ext: fileName.split('.').pop()?.toLowerCase() });
+  
   if (isDirectory) {
     return (
       <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index d45a0e7f3ad3..2f980948cc78 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -358,6 +358,11 @@ export default function MentionPopover({
                   <div className="flex-1 min-w-0">
                     <div className="font-medium text-sm truncate">
                       {file.name}
+                      {/* Debug info */}
+                      <span className="text-xs text-red-500 ml-2">
+                        {file.isDirectory ? '[DIR]' : '[FILE]'} 
+                        {file.name.includes('.') ? `[.${file.name.split('.').pop()}]` : '[NO-EXT]'}
+                      </span>
                     </div>
                     <div className="text-xs text-textSubtle truncate">
                       {file.path}

From 37ba8e72265e740b30523d99e2e138f4f55ca507 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:25:15 -0400
Subject: [PATCH 08/16] Improve file vs directory detection logic

- Use extension-based detection first for files
- Check known file extensions before trying directory listing
- Add explicit handling for files without extensions (README, LICENSE, etc.)
- Add debug logging to track file detection
- More reliable file type identification
---
 ui/desktop/src/components/MentionPopover.tsx | 84 ++++++++++++--------
 1 file changed, 50 insertions(+), 34 deletions(-)

diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 2f980948cc78..529a44a12f64 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -183,11 +183,58 @@ export default function MentionPopover({
           continue;
         }
         
+        // First, check if this looks like a file based on extension
+        const hasExtension = item.includes('.');
+        const ext = item.split('.').pop()?.toLowerCase();
+        const commonExtensions = [
+          // Code files
+          'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'h',
+          'css', 'html', 'json', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg',
+          'sh', 'bat', 'ps1', 'rb', 'go', 'rs', 'php', 'sql', 'r', 'scala',
+          'swift', 'kt', 'dart', 'vue', 'svelte', 'astro', 'scss', 'less',
+          // Documentation
+          'readme', 'license', 'changelog', 'contributing',
+          // Config files
+          'gitignore', 'dockerignore', 'editorconfig', 'prettierrc', 'eslintrc',
+          // Images and assets
+          'png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'tiff', 'tif',
+          // Vector and design files
+          'ai', 'eps', 'sketch', 'fig', 'xd', 'psd',
+          // Other common files
+          'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'
+        ];
+        
+        // If it has a known file extension, treat it as a file
+        if (hasExtension && ext && commonExtensions.includes(ext)) {
+          console.log('Adding file by extension:', { item, ext });
+          results.push({
+            path: fullPath,
+            name: item,
+            isDirectory: false,
+            relativePath: itemRelativePath
+          });
+          continue;
+        }
+        
+        // If it's a known file without extension (README, LICENSE, etc.)
+        const knownFiles = ['readme', 'license', 'changelog', 'contributing', 'dockerfile', 'makefile'];
+        if (!hasExtension && knownFiles.includes(item.toLowerCase())) {
+          console.log('Adding known file without extension:', { item });
+          results.push({
+            path: fullPath,
+            name: item,
+            isDirectory: false,
+            relativePath: itemRelativePath
+          });
+          continue;
+        }
+        
+        // Otherwise, try to determine if it's a directory
         try {
-          // Check if it's a directory by trying to list its contents
           await window.electron.listFiles(fullPath);
           
           // It's a directory
+          console.log('Adding directory:', { item });
           results.push({
             path: fullPath,
             name: item,
@@ -196,44 +243,13 @@ export default function MentionPopover({
           });
           
           // Recursively scan directories more aggressively
-          // Always scan priority directories and continue scanning to reasonable depth
           if (depth < 4 || priorityDirs.includes(item)) {
             const subFiles = await scanDirectoryFromRoot(fullPath, itemRelativePath, depth + 1);
             results.push(...subFiles);
           }
         } catch {
-          // It's a file - include more file types
-          const ext = item.split('.').pop()?.toLowerCase();
-          const commonExtensions = [
-            // Code files
-            'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'h',
-            'css', 'html', 'json', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg',
-            'sh', 'bat', 'ps1', 'rb', 'go', 'rs', 'php', 'sql', 'r', 'scala',
-            'swift', 'kt', 'dart', 'vue', 'svelte', 'astro', 'scss', 'less',
-            // Documentation
-            'readme', 'license', 'changelog', 'contributing',
-            // Config files
-            'gitignore', 'dockerignore', 'editorconfig', 'prettierrc', 'eslintrc',
-            // Images and assets
-            'png', 'jpg', 'jpeg', 'gif', 'svg', 'ico', 'webp', 'bmp', 'tiff', 'tif',
-            // Vector and design files
-            'ai', 'eps', 'sketch', 'fig', 'xd', 'psd',
-            // Other common files
-            'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'
-          ];
-          
-          // Include files without extensions (like README, LICENSE, etc.)
-          const hasExtension = item.includes('.');
-          const shouldInclude = !hasExtension || (ext && commonExtensions.includes(ext));
-          
-          if (shouldInclude) {
-            results.push({
-              path: fullPath,
-              name: item,
-              isDirectory: false,
-              relativePath: itemRelativePath
-            });
-          }
+          // If we can't list it and it doesn't have a known extension, skip it
+          console.log('Skipping unknown item:', { item });
         }
       }
       

From b093f9437de78e6682a1e7b396639ccd48765d6d Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:26:42 -0400
Subject: [PATCH 09/16] Clean up debug logging and finalize file icon system

- Remove debug console.log statements
- Remove debug UI elements from file names
- Clean up file detection logic
- Finalize comprehensive file type icon system
- Ready for testing with proper file type detection
---
 ui/desktop/src/components/FileIcon.tsx       |  3 ---
 ui/desktop/src/components/MentionPopover.tsx | 10 +---------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/ui/desktop/src/components/FileIcon.tsx b/ui/desktop/src/components/FileIcon.tsx
index 5529e5869295..d45bbeabec1b 100644
--- a/ui/desktop/src/components/FileIcon.tsx
+++ b/ui/desktop/src/components/FileIcon.tsx
@@ -7,9 +7,6 @@ interface FileIconProps {
 }
 
 export const FileIcon: React.FC<FileIconProps> = ({ fileName, isDirectory, className = "w-4 h-4" }) => {
-  // Debug logging
-  console.log('FileIcon:', { fileName, isDirectory, ext: fileName.split('.').pop()?.toLowerCase() });
-  
   if (isDirectory) {
     return (
       <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 529a44a12f64..595ea6acfeaf 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -206,7 +206,6 @@ export default function MentionPopover({
         
         // If it has a known file extension, treat it as a file
         if (hasExtension && ext && commonExtensions.includes(ext)) {
-          console.log('Adding file by extension:', { item, ext });
           results.push({
             path: fullPath,
             name: item,
@@ -219,7 +218,6 @@ export default function MentionPopover({
         // If it's a known file without extension (README, LICENSE, etc.)
         const knownFiles = ['readme', 'license', 'changelog', 'contributing', 'dockerfile', 'makefile'];
         if (!hasExtension && knownFiles.includes(item.toLowerCase())) {
-          console.log('Adding known file without extension:', { item });
           results.push({
             path: fullPath,
             name: item,
@@ -234,7 +232,6 @@ export default function MentionPopover({
           await window.electron.listFiles(fullPath);
           
           // It's a directory
-          console.log('Adding directory:', { item });
           results.push({
             path: fullPath,
             name: item,
@@ -249,7 +246,7 @@ export default function MentionPopover({
           }
         } catch {
           // If we can't list it and it doesn't have a known extension, skip it
-          console.log('Skipping unknown item:', { item });
+          // This could be a file with an unknown extension or a permission issue
         }
       }
       
@@ -374,11 +371,6 @@ export default function MentionPopover({
                   <div className="flex-1 min-w-0">
                     <div className="font-medium text-sm truncate">
                       {file.name}
-                      {/* Debug info */}
-                      <span className="text-xs text-red-500 ml-2">
-                        {file.isDirectory ? '[DIR]' : '[FILE]'} 
-                        {file.name.includes('.') ? `[.${file.name.split('.').pop()}]` : '[NO-EXT]'}
-                      </span>
                     </div>
                     <div className="text-xs text-textSubtle truncate">
                       {file.path}

From 7a3c6203a3390f0e36689fc4f0fbea3f9b3773a4 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:30:33 -0400
Subject: [PATCH 10/16] Fix arrow key navigation in @ mention popover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix keyboard navigation by properly handling filtered files state
- Add callback to communicate filtered files from MentionPopover to ChatInput
- Ensure arrow keys work correctly when mention popover is open
- Improve bounds checking for navigation (prevent going out of range)
- Reset selected index when query changes
- Maintain proper state synchronization between components

Now arrow keys ↑↓ properly navigate the file list when searching with @
---
 ui/desktop/src/components/ChatInput.tsx      |  6 ++++--
 ui/desktop/src/components/MentionPopover.tsx | 14 +++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index c55bb6d89d43..53d6cf7198d6 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -285,7 +285,7 @@ export default function ChatInput({
       query: afterAt,
       mentionStart: lastAtIndex,
       selectedIndex: 0, // Reset selection when query changes
-      filteredFiles: [], // Will be populated by the popover
+      // filteredFiles will be populated by the MentionPopover component
     }));
   };
 
@@ -495,9 +495,10 @@ export default function ChatInput({
     if (mentionPopover.isOpen) {
       if (evt.key === 'ArrowDown') {
         evt.preventDefault();
+        const maxIndex = Math.max(0, mentionPopover.filteredFiles.length - 1);
         setMentionPopover(prev => ({
           ...prev,
-          selectedIndex: Math.min(prev.selectedIndex + 1, prev.filteredFiles.length - 1)
+          selectedIndex: Math.min(prev.selectedIndex + 1, maxIndex)
         }));
         return;
       }
@@ -842,6 +843,7 @@ export default function ChatInput({
         selectedIndex={mentionPopover.selectedIndex}
         onSelectedIndexChange={(index) => setMentionPopover(prev => ({ ...prev, selectedIndex: index }))}
         filteredFiles={mentionPopover.filteredFiles}
+        onFilteredFilesChange={(files) => setMentionPopover(prev => ({ ...prev, filteredFiles: files }))}
       />
     </>
   );
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 595ea6acfeaf..88b1e4b09155 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -23,6 +23,7 @@ interface MentionPopoverProps {
   selectedIndex: number;
   onSelectedIndexChange: (index: number) => void;
   filteredFiles: FileItemWithMatch[];
+  onFilteredFilesChange: (files: FileItemWithMatch[]) => void;
 }
 
 // Enhanced fuzzy matching algorithm
@@ -91,7 +92,8 @@ export default function MentionPopover({
   query,
   selectedIndex,
   onSelectedIndexChange,
-  filteredFiles
+  filteredFiles,
+  onFilteredFilesChange
 }: MentionPopoverProps) {
   const [files, setFiles] = useState<FileItem[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -264,12 +266,16 @@ export default function MentionPopover({
     }
     
     if (!query.trim()) {
-      return files.slice(0, 15).map(file => ({
+      const defaultFiles = files.slice(0, 15).map(file => ({
         ...file,
         matchScore: 0,
         matches: [],
         matchedText: file.name
       })); // Show first 15 files when no query
+      
+      // Update parent with the filtered files
+      onFilteredFilesChange(defaultFiles);
+      return defaultFiles;
     }
     
     const results = files
@@ -312,8 +318,10 @@ export default function MentionPopover({
       })
       .slice(0, 20); // Increase to 20 results
     
+    // Update parent with the filtered files
+    onFilteredFilesChange(results);
     return results;
-  }, [files, query, filteredFiles]);
+  }, [files, query, filteredFiles, onFilteredFilesChange]);
 
   // Scroll selected item into view
   useEffect(() => {

From 4f6d0cd1a7593ef8f3b179c65511b1f14ca2d997 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:39:55 -0400
Subject: [PATCH 11/16] Fix infinite loop and restore arrow key navigation

- Remove problematic callback approach that caused infinite re-renders
- Use forwardRef and useImperativeHandle to expose methods to parent
- Fix Maximum update depth exceeded error
- Restore proper arrow key navigation functionality
- Remove duplicate displayFiles definition
- Clean up component communication without state loops

The app should no longer be stuck in loading state and arrow keys should work!
---
 ui/desktop/openapi.json                      |   6 +
 ui/desktop/src/api/types.gen.ts              |   3 +
 ui/desktop/src/components/ChatInput.tsx      |  23 +--
 ui/desktop/src/components/MentionPopover.tsx | 152 ++++++++++---------
 4 files changed, 92 insertions(+), 92 deletions(-)

diff --git a/ui/desktop/openapi.json b/ui/desktop/openapi.json
index e2de8305dac9..6aeb71cb1043 100644
--- a/ui/desktop/openapi.json
+++ b/ui/desktop/openapi.json
@@ -1342,6 +1342,12 @@
               "envs": {
                 "$ref": "#/components/schemas/Envs"
               },
+              "headers": {
+                "type": "object",
+                "additionalProperties": {
+                  "type": "string"
+                }
+              },
               "name": {
                 "type": "string",
                 "description": "The name used to identify this extension"
diff --git a/ui/desktop/src/api/types.gen.ts b/ui/desktop/src/api/types.gen.ts
index 2f821de044b6..14a147a20fd0 100644
--- a/ui/desktop/src/api/types.gen.ts
+++ b/ui/desktop/src/api/types.gen.ts
@@ -132,6 +132,9 @@ export type ExtensionConfig = {
     description?: string | null;
     env_keys?: Array<string>;
     envs?: Envs;
+    headers?: {
+        [key: string]: string;
+    };
     /**
      * The name used to identify this extension
      */
diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 53d6cf7198d6..e588f7b1843d 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -74,23 +74,14 @@ export default function ChatInput({
     query: string;
     mentionStart: number;
     selectedIndex: number;
-    filteredFiles: Array<{
-      path: string;
-      name: string;
-      isDirectory: boolean;
-      relativePath: string;
-      matchScore: number;
-      matches: number[];
-      matchedText: string;
-    }>;
   }>({
     isOpen: false,
     position: { x: 0, y: 0 },
     query: '',
     mentionStart: -1,
     selectedIndex: 0,
-    filteredFiles: [],
   });
+  const mentionPopoverRef = useRef<{ getDisplayFiles: () => any[]; selectFile: (index: number) => void }>(null);
 
   // Whisper hook for voice dictation
   const {
@@ -492,10 +483,11 @@ export default function ChatInput({
 
   const handleKeyDown = (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
     // If mention popover is open, handle arrow keys and enter
-    if (mentionPopover.isOpen) {
+    if (mentionPopover.isOpen && mentionPopoverRef.current) {
       if (evt.key === 'ArrowDown') {
         evt.preventDefault();
-        const maxIndex = Math.max(0, mentionPopover.filteredFiles.length - 1);
+        const displayFiles = mentionPopoverRef.current.getDisplayFiles();
+        const maxIndex = Math.max(0, displayFiles.length - 1);
         setMentionPopover(prev => ({
           ...prev,
           selectedIndex: Math.min(prev.selectedIndex + 1, maxIndex)
@@ -512,9 +504,7 @@ export default function ChatInput({
       }
       if (evt.key === 'Enter') {
         evt.preventDefault();
-        if (mentionPopover.filteredFiles[mentionPopover.selectedIndex]) {
-          handleMentionFileSelect(mentionPopover.filteredFiles[mentionPopover.selectedIndex].path);
-        }
+        mentionPopoverRef.current.selectFile(mentionPopover.selectedIndex);
         return;
       }
       if (evt.key === 'Escape') {
@@ -835,6 +825,7 @@ export default function ChatInput({
       />
 
       <MentionPopover
+        ref={mentionPopoverRef}
         isOpen={mentionPopover.isOpen}
         onClose={() => setMentionPopover(prev => ({ ...prev, isOpen: false }))}
         onSelect={handleMentionFileSelect}
@@ -842,8 +833,6 @@ export default function ChatInput({
         query={mentionPopover.query}
         selectedIndex={mentionPopover.selectedIndex}
         onSelectedIndexChange={(index) => setMentionPopover(prev => ({ ...prev, selectedIndex: index }))}
-        filteredFiles={mentionPopover.filteredFiles}
-        onFilteredFilesChange={(files) => setMentionPopover(prev => ({ ...prev, filteredFiles: files }))}
       />
     </>
   );
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 88b1e4b09155..aa661d9726b3 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import { FileIcon } from './FileIcon';
 
 interface FileItem {
@@ -22,8 +22,6 @@ interface MentionPopoverProps {
   query: string;
   selectedIndex: number;
   onSelectedIndexChange: (index: number) => void;
-  filteredFiles: FileItemWithMatch[];
-  onFilteredFilesChange: (files: FileItemWithMatch[]) => void;
 }
 
 // Enhanced fuzzy matching algorithm
@@ -84,28 +82,94 @@ const fuzzyMatch = (pattern: string, text: string): { score: number; matches: nu
   return { score: -1, matches: [] };
 };
 
-export default function MentionPopover({ 
+const MentionPopover = forwardRef<
+  { getDisplayFiles: () => FileItemWithMatch[]; selectFile: (index: number) => void },
+  MentionPopoverProps
+>(({ 
   isOpen, 
   onClose, 
   onSelect, 
   position, 
   query,
   selectedIndex,
-  onSelectedIndexChange,
-  filteredFiles,
-  onFilteredFilesChange
-}: MentionPopoverProps) {
+  onSelectedIndexChange
+}, ref) => {
   const [files, setFiles] = useState<FileItem[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const popoverRef = useRef<HTMLDivElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
+  // Filter and sort files based on query
+  const displayFiles = useMemo((): FileItemWithMatch[] => {
+    if (!query.trim()) {
+      return files.slice(0, 15).map(file => ({
+        ...file,
+        matchScore: 0,
+        matches: [],
+        matchedText: file.name
+      })); // Show first 15 files when no query
+    }
+    
+    const results = files
+      .map(file => {
+        const nameMatch = fuzzyMatch(query, file.name);
+        const pathMatch = fuzzyMatch(query, file.relativePath);
+        const fullPathMatch = fuzzyMatch(query, file.path);
+        
+        // Use the best match among name, relative path, and full path
+        let bestMatch = nameMatch;
+        let matchedText = file.name;
+        
+        if (pathMatch.score > bestMatch.score) {
+          bestMatch = pathMatch;
+          matchedText = file.relativePath;
+        }
+        
+        if (fullPathMatch.score > bestMatch.score) {
+          bestMatch = fullPathMatch;
+          matchedText = file.path;
+        }
+        
+        return {
+          ...file,
+          matchScore: bestMatch.score,
+          matches: bestMatch.matches,
+          matchedText
+        };
+      })
+      .filter(file => file.matchScore > 0)
+      .sort((a, b) => {
+        // Sort by score first, then prefer files over directories, then alphabetically
+        if (Math.abs(a.matchScore - b.matchScore) < 1) {
+          if (a.isDirectory !== b.isDirectory) {
+            return a.isDirectory ? 1 : -1; // Files first
+          }
+          return a.name.localeCompare(b.name);
+        }
+        return b.matchScore - a.matchScore;
+      })
+      .slice(0, 20); // Increase to 20 results
+    
+    return results;
+  }, [files, query]);
+
+  // Expose methods to parent component
+  useImperativeHandle(ref, () => ({
+    getDisplayFiles: () => displayFiles,
+    selectFile: (index: number) => {
+      if (displayFiles[index]) {
+        onSelect(displayFiles[index].path);
+        onClose();
+      }
+    }
+  }), [displayFiles, onSelect, onClose]);
+
   // Scan files when component opens
   useEffect(() => {
-    if (isOpen && filteredFiles.length === 0) {
+    if (isOpen && displayFiles.length === 0) {
       scanFilesFromRoot();
     }
-  }, [isOpen, filteredFiles.length]);
+  }, [isOpen, displayFiles.length]);
 
   // Handle clicks outside the popover
   useEffect(() => {
@@ -259,70 +323,6 @@ export default function MentionPopover({
     }
   };
 
-  // Filter and sort files based on query
-  const displayFiles = useMemo((): FileItemWithMatch[] => {
-    if (filteredFiles.length > 0) {
-      return filteredFiles;
-    }
-    
-    if (!query.trim()) {
-      const defaultFiles = files.slice(0, 15).map(file => ({
-        ...file,
-        matchScore: 0,
-        matches: [],
-        matchedText: file.name
-      })); // Show first 15 files when no query
-      
-      // Update parent with the filtered files
-      onFilteredFilesChange(defaultFiles);
-      return defaultFiles;
-    }
-    
-    const results = files
-      .map(file => {
-        const nameMatch = fuzzyMatch(query, file.name);
-        const pathMatch = fuzzyMatch(query, file.relativePath);
-        const fullPathMatch = fuzzyMatch(query, file.path);
-        
-        // Use the best match among name, relative path, and full path
-        let bestMatch = nameMatch;
-        let matchedText = file.name;
-        
-        if (pathMatch.score > bestMatch.score) {
-          bestMatch = pathMatch;
-          matchedText = file.relativePath;
-        }
-        
-        if (fullPathMatch.score > bestMatch.score) {
-          bestMatch = fullPathMatch;
-          matchedText = file.path;
-        }
-        
-        return {
-          ...file,
-          matchScore: bestMatch.score,
-          matches: bestMatch.matches,
-          matchedText
-        };
-      })
-      .filter(file => file.matchScore > 0)
-      .sort((a, b) => {
-        // Sort by score first, then prefer files over directories, then alphabetically
-        if (Math.abs(a.matchScore - b.matchScore) < 1) {
-          if (a.isDirectory !== b.isDirectory) {
-            return a.isDirectory ? 1 : -1; // Files first
-          }
-          return a.name.localeCompare(b.name);
-        }
-        return b.matchScore - a.matchScore;
-      })
-      .slice(0, 20); // Increase to 20 results
-    
-    // Update parent with the filtered files
-    onFilteredFilesChange(results);
-    return results;
-  }, [files, query, filteredFiles, onFilteredFilesChange]);
-
   // Scroll selected item into view
   useEffect(() => {
     if (listRef.current) {
@@ -412,4 +412,6 @@ export default function MentionPopover({
       </div>
     </div>
   );
-}
\ No newline at end of file
+});
+
+export default MentionPopover;
\ No newline at end of file

From 4bf9517a0e4e91ae2a95135ccdcecf6ba93a4d33 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:41:12 -0400
Subject: [PATCH 12/16] Change file title text from bold to regular font weight

- Remove font-medium class from file names in mention popover
- Use regular font weight for better visual hierarchy
- File names now appear less prominent, making the overall design cleaner
---
 ui/desktop/src/components/MentionPopover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index aa661d9726b3..11cf8588d9c9 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -377,7 +377,7 @@ const MentionPopover = forwardRef<
                     <FileIcon fileName={file.name} isDirectory={file.isDirectory} />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <div className="font-medium text-sm truncate">
+                    <div className="text-sm truncate">
                       {file.name}
                     </div>
                     <div className="text-xs text-textSubtle truncate">

From 1eed6afc6a4dcb9c1f0af6ae4f53006d9bb9e8a4 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:43:07 -0400
Subject: [PATCH 13/16] Fix dark mode text styling in mention popover

- Add text-textStandard class to file names for proper dark mode support
- Ensure file names use theme-aware colors instead of default black
- File names now properly adapt to light/dark mode themes
- Other text elements already use appropriate theme-aware classes
---
 ui/desktop/src/components/MentionPopover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 11cf8588d9c9..40614618af17 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -377,7 +377,7 @@ const MentionPopover = forwardRef<
                     <FileIcon fileName={file.name} isDirectory={file.isDirectory} />
                   </div>
                   <div className="flex-1 min-w-0">
-                    <div className="text-sm truncate">
+                    <div className="text-sm truncate text-textStandard">
                       {file.name}
                     </div>
                     <div className="text-xs text-textSubtle truncate">

From 85984022e0c2727d09ec1089cf288be02758ebde Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 09:50:27 -0400
Subject: [PATCH 14/16] Remove Cmd+P fuzzy file search modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove FuzzyFileSearch component and its usage
- Remove Cmd+P keyboard shortcut handler
- Remove isFuzzySearchOpen state and related functions
- Update placeholder text to remove ⌘P reference
- Focus entirely on @ mention functionality for file search

The @ mention system provides a more intuitive and integrated
file search experience directly in the chat input.
---
 ui/desktop/src/components/ChatInput.tsx       |  25 +-
 ui/desktop/src/components/FuzzyFileSearch.tsx | 477 ------------------
 2 files changed, 1 insertion(+), 501 deletions(-)
 delete mode 100644 ui/desktop/src/components/FuzzyFileSearch.tsx

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index e588f7b1843d..554bba6b6e66 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -10,7 +10,6 @@ import { Message } from '../types/message';
 import { useWhisper } from '../hooks/useWhisper';
 import { WaveformVisualizer } from './WaveformVisualizer';
 import { toastError } from '../toasts';
-import FuzzyFileSearch from './FuzzyFileSearch';
 import MentionPopover from './MentionPopover';
 
 interface PastedImage {
@@ -67,7 +66,6 @@ export default function ChatInput({
   const [displayValue, setDisplayValue] = useState(initialValue); // For immediate visual feedback
   const [isFocused, setIsFocused] = useState(false);
   const [pastedImages, setPastedImages] = useState<PastedImage[]>([]);
-  const [isFuzzySearchOpen, setIsFuzzySearchOpen] = useState(false);
   const [mentionPopover, setMentionPopover] = useState<{
     isOpen: boolean;
     position: { x: number; y: number };
@@ -517,13 +515,6 @@ export default function ChatInput({
     // Handle history navigation first
     handleHistoryNavigation(evt);
 
-    // Handle fuzzy file search trigger (Cmd/Ctrl + P)
-    if (evt.key === 'p' && (evt.metaKey || evt.ctrlKey) && !evt.shiftKey && !evt.altKey) {
-      evt.preventDefault();
-      setIsFuzzySearchOpen(true);
-      return;
-    }
-
     if (evt.key === 'Enter') {
       // should not trigger submit on Enter if it's composing (IME input in progress) or shift/alt(option) is pressed
       if (evt.shiftKey || isComposing) {
@@ -570,13 +561,6 @@ export default function ChatInput({
     }
   };
 
-  const handleFuzzyFileSelect = (filePath: string) => {
-    const newValue = displayValue.trim() ? `${displayValue.trim()} ${filePath}` : filePath;
-    setDisplayValue(newValue);
-    setValue(newValue);
-    textAreaRef.current?.focus();
-  };
-
   const handleMentionFileSelect = (filePath: string) => {
     // Replace the @ mention with the file path
     const beforeMention = displayValue.slice(0, mentionPopover.mentionStart);
@@ -616,7 +600,7 @@ export default function ChatInput({
               data-testid="chat-input"
               autoFocus
               id="dynamic-textarea"
-              placeholder={isRecording ? '' : 'What can goose help with?   @ files • ⌘↑/⌘↓ • ⌘P files'}
+              placeholder={isRecording ? '' : 'What can goose help with?   @ files • ⌘↑/⌘↓'}
               value={displayValue}
               onChange={handleChange}
               onCompositionStart={handleCompositionStart}
@@ -817,13 +801,6 @@ export default function ChatInput({
         </div>
       </div>
 
-      <FuzzyFileSearch
-        isOpen={isFuzzySearchOpen}
-        onClose={() => setIsFuzzySearchOpen(false)}
-        onSelect={handleFuzzyFileSelect}
-        workingDirectory={window.appConfig.get('GOOSE_WORKING_DIR') as string}
-      />
-
       <MentionPopover
         ref={mentionPopoverRef}
         isOpen={mentionPopover.isOpen}
diff --git a/ui/desktop/src/components/FuzzyFileSearch.tsx b/ui/desktop/src/components/FuzzyFileSearch.tsx
deleted file mode 100644
index f455bb9861e2..000000000000
--- a/ui/desktop/src/components/FuzzyFileSearch.tsx
+++ /dev/null
@@ -1,477 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { Card } from './ui/card';
-import { ScrollArea } from './ui/scroll-area';
-import { Close } from './icons';
-
-interface FileItem {
-  path: string;
-  name: string;
-  isDirectory: boolean;
-  relativePath: string;
-}
-
-interface FileItemWithMatch extends FileItem {
-  matchScore: number;
-  matches: number[];
-  matchedText: string;
-}
-
-interface FuzzyFileSearchProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSelect: (filePath: string) => void;
-  workingDirectory?: string;
-  searchFromRoot?: boolean;
-}
-
-// Simple fuzzy matching algorithm
-const fuzzyMatch = (pattern: string, text: string): { score: number; matches: number[] } => {
-  if (!pattern) return { score: 0, matches: [] };
-  
-  const patternLower = pattern.toLowerCase();
-  const textLower = text.toLowerCase();
-  const matches: number[] = [];
-  
-  let patternIndex = 0;
-  let score = 0;
-  let consecutiveMatches = 0;
-  
-  for (let i = 0; i < textLower.length && patternIndex < patternLower.length; i++) {
-    if (textLower[i] === patternLower[patternIndex]) {
-      matches.push(i);
-      patternIndex++;
-      consecutiveMatches++;
-      
-      // Bonus for consecutive matches
-      score += consecutiveMatches * 2;
-      
-      // Bonus for matches at word boundaries
-      if (i === 0 || textLower[i - 1] === '/' || textLower[i - 1] === '_' || textLower[i - 1] === '-') {
-        score += 5;
-      }
-    } else {
-      consecutiveMatches = 0;
-    }
-  }
-  
-  // Only return a score if all pattern characters were matched
-  if (patternIndex === patternLower.length) {
-    // Penalty for longer strings
-    score -= text.length * 0.1;
-    return { score, matches };
-  }
-  
-  return { score: -1, matches: [] };
-};
-
-// Highlight matched characters in the text
-const HighlightedText: React.FC<{ text: string; matches: number[] }> = ({ text, matches }) => {
-  if (matches.length === 0) return <span>{text}</span>;
-  
-  const elements: React.ReactNode[] = [];
-  let lastIndex = 0;
-  
-  matches.forEach((matchIndex, i) => {
-    // Add text before the match
-    if (matchIndex > lastIndex) {
-      elements.push(text.slice(lastIndex, matchIndex));
-    }
-    
-    // Add the highlighted match
-    elements.push(
-      <span key={i} className="bg-yellow-200 dark:bg-yellow-800 text-yellow-900 dark:text-yellow-100">
-        {text[matchIndex]}
-      </span>
-    );
-    
-    lastIndex = matchIndex + 1;
-  });
-  
-  // Add remaining text
-  if (lastIndex < text.length) {
-    elements.push(text.slice(lastIndex));
-  }
-  
-  return <span>{elements}</span>;
-};
-
-export default function FuzzyFileSearch({ isOpen, onClose, onSelect, workingDirectory, searchFromRoot = false }: FuzzyFileSearchProps) {
-  const [query, setQuery] = useState('');
-  const [files, setFiles] = useState<FileItem[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  
-  // Scan files when component opens or working directory changes
-  useEffect(() => {
-    if (isOpen) {
-      if (searchFromRoot) {
-        scanFilesFromRoot();
-      } else if (workingDirectory) {
-        scanFiles();
-      }
-    }
-  }, [isOpen, workingDirectory, searchFromRoot]);
-  
-  // Focus input when opened
-  useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-  
-  // Reset state when opened/closed
-  useEffect(() => {
-    if (isOpen) {
-      setQuery('');
-      setSelectedIndex(0);
-    }
-  }, [isOpen]);
-  
-  const scanFiles = async () => {
-    setIsLoading(true);
-    try {
-      const scannedFiles = await scanDirectory(workingDirectory || '', '');
-      setFiles(scannedFiles);
-    } catch (error) {
-      console.error('Error scanning files:', error);
-      setFiles([]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const scanFilesFromRoot = async () => {
-    setIsLoading(true);
-    try {
-      // Start from common user directories for better performance
-      let startPath = '/Users'; // Default to macOS
-      if (window.electron.platform === 'win32') {
-        startPath = 'C:\\Users';
-      } else if (window.electron.platform === 'linux') {
-        startPath = '/home';
-      }
-      
-      const scannedFiles = await scanDirectoryFromRoot(startPath);
-      setFiles(scannedFiles);
-    } catch (error) {
-      console.error('Error scanning files from root:', error);
-      setFiles([]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  
-  const scanDirectory = async (dirPath: string, relativePath = ''): Promise<FileItem[]> => {
-    try {
-      const items = await window.electron.listFiles(dirPath);
-      const results: FileItem[] = [];
-      
-      // Add current directory files
-      for (const item of items) {
-        const fullPath = `${dirPath}/${item}`;
-        const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
-        
-        // Skip hidden files and common ignore patterns
-        if (item.startsWith('.') || 
-            item === 'node_modules' || 
-            item === '.git' || 
-            item === '__pycache__' || 
-            item === '.vscode' ||
-            item === 'target' ||
-            item === 'dist' ||
-            item === 'build') {
-          continue;
-        }
-        
-        try {
-          // Check if it's a directory by trying to list its contents
-          await window.electron.listFiles(fullPath);
-          
-          // It's a directory
-          results.push({
-            path: fullPath,
-            name: item,
-            isDirectory: true,
-            relativePath: itemRelativePath
-          });
-          
-          // Recursively scan subdirectories (limit depth to avoid performance issues)
-          if (relativePath.split('/').length < 3) {
-            const subFiles = await scanDirectory(fullPath, itemRelativePath);
-            results.push(...subFiles);
-          }
-        } catch {
-          // It's a file
-          results.push({
-            path: fullPath,
-            name: item,
-            isDirectory: false,
-            relativePath: itemRelativePath
-          });
-        }
-      }
-      
-      return results;
-    } catch (error) {
-      console.error(`Error scanning directory ${dirPath}:`, error);
-      return [];
-    }
-  };
-
-  const scanDirectoryFromRoot = async (dirPath: string, relativePath = '', depth = 0): Promise<FileItem[]> => {
-    // Limit depth for performance when searching from root
-    if (depth > 4) return [];
-    
-    try {
-      const items = await window.electron.listFiles(dirPath);
-      const results: FileItem[] = [];
-      
-      // Common directories to prioritize or skip
-      const priorityDirs = ['Desktop', 'Documents', 'Downloads', 'Projects', 'Development', 'Code'];
-      const skipDirs = [
-        '.git', '.svn', '.hg', 'node_modules', '__pycache__', '.vscode', '.idea',
-        'target', 'dist', 'build', '.cache', '.npm', '.yarn', 'Library', 
-        'System', 'Applications', '.Trash', 'Music', 'Movies', 'Pictures'
-      ];
-      
-      // Sort items to prioritize certain directories
-      const sortedItems = items.sort((a, b) => {
-        const aPriority = priorityDirs.includes(a);
-        const bPriority = priorityDirs.includes(b);
-        if (aPriority && !bPriority) return -1;
-        if (!aPriority && bPriority) return 1;
-        return a.localeCompare(b);
-      });
-      
-      for (const item of sortedItems.slice(0, 50)) { // Limit items per directory
-        const fullPath = `${dirPath}/${item}`;
-        const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
-        
-        // Skip hidden files and common ignore patterns
-        if (item.startsWith('.') || skipDirs.includes(item)) {
-          continue;
-        }
-        
-        try {
-          // Check if it's a directory by trying to list its contents
-          await window.electron.listFiles(fullPath);
-          
-          // It's a directory
-          results.push({
-            path: fullPath,
-            name: item,
-            isDirectory: true,
-            relativePath: itemRelativePath
-          });
-          
-          // Recursively scan important directories
-          if (depth < 3 && (priorityDirs.includes(item) || depth === 0)) {
-            const subFiles = await scanDirectoryFromRoot(fullPath, itemRelativePath, depth + 1);
-            results.push(...subFiles);
-          }
-        } catch {
-          // It's a file - only include common file types
-          const ext = item.split('.').pop()?.toLowerCase();
-          const commonExtensions = [
-            'txt', 'md', 'js', 'ts', 'jsx', 'tsx', 'py', 'java', 'cpp', 'c', 'h',
-            'css', 'html', 'json', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg',
-            'sh', 'bat', 'ps1', 'rb', 'go', 'rs', 'php', 'sql', 'r', 'scala',
-            'swift', 'kt', 'dart', 'vue', 'svelte', 'astro'
-          ];
-          
-          if (ext && commonExtensions.includes(ext)) {
-            results.push({
-              path: fullPath,
-              name: item,
-              isDirectory: false,
-              relativePath: itemRelativePath
-            });
-          }
-        }
-      }
-      
-      return results;
-    } catch (error) {
-      console.error(`Error scanning directory ${dirPath}:`, error);
-      return [];
-    }
-  };
-  
-  // Filter and sort files based on query
-  const filteredFiles = useMemo((): FileItemWithMatch[] => {
-    if (!query.trim()) {
-      return files.slice(0, 50).map(file => ({
-        ...file,
-        matchScore: 0,
-        matches: [],
-        matchedText: file.name
-      })); // Show first 50 files when no query
-    }
-    
-    const results = files
-      .map(file => {
-        const nameMatch = fuzzyMatch(query, file.name);
-        const pathMatch = fuzzyMatch(query, file.relativePath);
-        
-        // Use the better of the two matches
-        const bestMatch = nameMatch.score > pathMatch.score ? nameMatch : pathMatch;
-        
-        return {
-          ...file,
-          matchScore: bestMatch.score,
-          matches: bestMatch.matches,
-          matchedText: nameMatch.score > pathMatch.score ? file.name : file.relativePath
-        };
-      })
-      .filter(file => file.matchScore > 0)
-      .sort((a, b) => b.matchScore - a.matchScore)
-      .slice(0, 50); // Limit to 50 results
-    
-    return results;
-  }, [files, query]);
-  
-  // Update selected index when filtered results change
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [filteredFiles]);
-  
-  // Scroll selected item into view
-  useEffect(() => {
-    if (listRef.current) {
-      const selectedElement = listRef.current.children[selectedIndex] as HTMLElement;
-      if (selectedElement) {
-        selectedElement.scrollIntoView({ block: 'nearest' });
-      }
-    }
-  }, [selectedIndex]);
-  
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    switch (e.key) {
-      case 'Escape':
-        e.preventDefault();
-        onClose();
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIndex(prev => Math.min(prev + 1, filteredFiles.length - 1));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIndex(prev => Math.max(prev - 1, 0));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (filteredFiles[selectedIndex]) {
-          onSelect(filteredFiles[selectedIndex].path);
-          onClose();
-        }
-        break;
-    }
-  };
-  
-  const handleItemClick = (index: number) => {
-    setSelectedIndex(index);
-    onSelect(filteredFiles[index].path);
-    onClose();
-  };
-  
-  if (!isOpen) return null;
-  
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center pt-20 z-50">
-      <Card className="w-full max-w-2xl mx-4 bg-bgApp border-borderStandard">
-        <div className="p-4">
-          <div className="flex items-center gap-2 mb-4">
-            <div className="flex-1 relative">
-              <input
-                ref={inputRef}
-                type="text"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder="Type to search files..."
-                className="w-full px-3 py-2 border border-borderSubtle rounded-md bg-bgApp text-textStandard placeholder-textPlaceholder focus:outline-none focus:border-borderProminent"
-              />
-              {isLoading && (
-                <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
-                  <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-textSubtle"></div>
-                </div>
-              )}
-            </div>
-            <button
-              onClick={onClose}
-              className="p-2 text-textSubtle hover:text-textStandard rounded-md hover:bg-bgSubtle"
-            >
-              <Close className="w-4 h-4" />
-            </button>
-          </div>
-          
-          <div className="text-xs text-textSubtle mb-2">
-            {isLoading ? 'Scanning files...' : `${filteredFiles.length} files found`}
-          </div>
-          
-          <ScrollArea className="h-96">
-            <div ref={listRef} className="space-y-1">
-              {filteredFiles.map((file, index) => (
-                <div
-                  key={file.path}
-                  onClick={() => handleItemClick(index)}
-                  className={`p-3 rounded-md cursor-pointer transition-colors ${
-                    index === selectedIndex
-                      ? 'bg-bgProminent text-textProminentInverse'
-                      : 'hover:bg-bgSubtle'
-                  }`}
-                >
-                  <div className="flex items-center gap-2">
-                    <span className={`text-xs px-1.5 py-0.5 rounded ${
-                      file.isDirectory 
-                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                        : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
-                    }`}>
-                      {file.isDirectory ? 'DIR' : 'FILE'}
-                    </span>
-                    <div className="flex-1 min-w-0">
-                      <div className="font-medium truncate">
-                        <HighlightedText 
-                          text={file.name} 
-                          matches={file.matchedText === file.name ? (file as any).matches : []} 
-                        />
-                      </div>
-                      <div className="text-sm text-textSubtle truncate">
-                        <HighlightedText 
-                          text={file.relativePath} 
-                          matches={file.matchedText === file.relativePath ? (file as any).matches : []} 
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-              
-              {!isLoading && filteredFiles.length === 0 && query && (
-                <div className="p-8 text-center text-textSubtle">
-                  No files found matching "{query}"
-                </div>
-              )}
-              
-              {!isLoading && filteredFiles.length === 0 && !query && (
-                <div className="p-8 text-center text-textSubtle">
-                  Start typing to search for files
-                </div>
-              )}
-            </div>
-          </ScrollArea>
-          
-          <div className="mt-4 text-xs text-textSubtle border-t border-borderSubtle pt-2">
-            <div className="flex justify-between">
-              <span>↑↓ Navigate • Enter Select • Esc Close</span>
-              <span>{searchFromRoot ? 'Searching entire computer' : (workingDirectory || 'No directory')}</span>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-}
\ No newline at end of file

From 2b599467ba8b21cb9c6340e78f93c6af94b47530 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 10:03:10 -0400
Subject: [PATCH 15/16] Fix TypeScript and linting issues in MentionPopover

- Export FileItemWithMatch interface for proper typing
- Fix circular dependency issues with useCallback hooks
- Resolve TypeScript errors and ESLint warnings
- Add proper type annotations and dependency management
---
 ui/desktop/src/components/ChatInput.tsx      |  4 +-
 ui/desktop/src/components/MentionPopover.tsx | 57 ++++++++++----------
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index 554bba6b6e66..528e4d4273ec 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -10,7 +10,7 @@ import { Message } from '../types/message';
 import { useWhisper } from '../hooks/useWhisper';
 import { WaveformVisualizer } from './WaveformVisualizer';
 import { toastError } from '../toasts';
-import MentionPopover from './MentionPopover';
+import MentionPopover, { FileItemWithMatch } from './MentionPopover';
 
 interface PastedImage {
   id: string;
@@ -79,7 +79,7 @@ export default function ChatInput({
     mentionStart: -1,
     selectedIndex: 0,
   });
-  const mentionPopoverRef = useRef<{ getDisplayFiles: () => any[]; selectFile: (index: number) => void }>(null);
+  const mentionPopoverRef = useRef<{ getDisplayFiles: () => FileItemWithMatch[]; selectFile: (index: number) => void }>(null);
 
   // Whisper hook for voice dictation
   const {
diff --git a/ui/desktop/src/components/MentionPopover.tsx b/ui/desktop/src/components/MentionPopover.tsx
index 40614618af17..627061685776 100644
--- a/ui/desktop/src/components/MentionPopover.tsx
+++ b/ui/desktop/src/components/MentionPopover.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle, useCallback } from 'react';
 import { FileIcon } from './FileIcon';
 
 interface FileItem {
@@ -8,7 +8,7 @@ interface FileItem {
   relativePath: string;
 }
 
-interface FileItemWithMatch extends FileItem {
+export interface FileItemWithMatch extends FileItem {
   matchScore: number;
   matches: number[];
   matchedText: string;
@@ -166,10 +166,11 @@ const MentionPopover = forwardRef<
 
   // Scan files when component opens
   useEffect(() => {
-    if (isOpen && displayFiles.length === 0) {
+    if (isOpen && files.length === 0) {
       scanFilesFromRoot();
     }
-  }, [isOpen, displayFiles.length]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, files.length]); // scanFilesFromRoot intentionally omitted to avoid circular dependency
 
   // Handle clicks outside the popover
   useEffect(() => {
@@ -188,28 +189,7 @@ const MentionPopover = forwardRef<
     };
   }, [isOpen, onClose]);
 
-  const scanFilesFromRoot = async () => {
-    setIsLoading(true);
-    try {
-      // Start from common user directories for better performance
-      let startPath = '/Users'; // Default to macOS
-      if (window.electron.platform === 'win32') {
-        startPath = 'C:\\Users';
-      } else if (window.electron.platform === 'linux') {
-        startPath = '/home';
-      }
-      
-      const scannedFiles = await scanDirectoryFromRoot(startPath);
-      setFiles(scannedFiles);
-    } catch (error) {
-      console.error('Error scanning files from root:', error);
-      setFiles([]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const scanDirectoryFromRoot = async (dirPath: string, relativePath = '', depth = 0): Promise<FileItem[]> => {
+  const scanDirectoryFromRoot = useCallback(async (dirPath: string, relativePath = '', depth = 0): Promise<FileItem[]> => {
     // Increase depth limit for better file discovery
     if (depth > 5) return [];
     
@@ -321,7 +301,28 @@ const MentionPopover = forwardRef<
       console.error(`Error scanning directory ${dirPath}:`, error);
       return [];
     }
-  };
+  }, []);
+
+  const scanFilesFromRoot = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      // Start from common user directories for better performance
+      let startPath = '/Users'; // Default to macOS
+      if (window.electron.platform === 'win32') {
+        startPath = 'C:\\Users';
+      } else if (window.electron.platform === 'linux') {
+        startPath = '/home';
+      }
+      
+      const scannedFiles = await scanDirectoryFromRoot(startPath);
+      setFiles(scannedFiles);
+    } catch (error) {
+      console.error('Error scanning files from root:', error);
+      setFiles([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [scanDirectoryFromRoot]);
 
   // Scroll selected item into view
   useEffect(() => {
@@ -414,4 +415,6 @@ const MentionPopover = forwardRef<
   );
 });
 
+MentionPopover.displayName = 'MentionPopover';
+
 export default MentionPopover;
\ No newline at end of file

From 2e5a36e9c5b3c1ad7d4991967056ea0f217d7169 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Thu, 3 Jul 2025 10:19:27 -0400
Subject: [PATCH 16/16] Fix clippy warning for unused MockTestProvider struct

- Change #[warn(dead_code)] to #[allow(dead_code)] for test-only struct
- This resolves CI failure where clippy treats warnings as errors
---
 crates/goose/src/providers/factory.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/goose/src/providers/factory.rs b/crates/goose/src/providers/factory.rs
index 9f31f2567737..6ab9bb59dce8 100644
--- a/crates/goose/src/providers/factory.rs
+++ b/crates/goose/src/providers/factory.rs
@@ -149,7 +149,7 @@ mod tests {
     use mcp_core::{content::TextContent, Role};
     use std::env;
 
-    #[warn(dead_code)]
+    #[allow(dead_code)]
     #[derive(Clone)]
     struct MockTestProvider {
         name: String,