Fix autocomplete popover stability and workspace file suggestion ranking

packages/app/src/components/agent-input-area.tsx

@@ -642,50 +642,54 @@ export function AgentInputArea({
             </View>
           )}
 
-          {/* Command autocomplete dropdown */}
-          {autocomplete.isVisible && (
-            <Autocomplete
-              options={autocomplete.options}
-              selectedIndex={autocomplete.selectedIndex}
-              isLoading={autocomplete.isLoading}
-              errorMessage={autocomplete.errorMessage}
-              loadingText={autocomplete.loadingText}
-              emptyText={autocomplete.emptyText}
-              onSelect={autocomplete.onSelectOption}
-            />
-          )}
-
           {sendError && <Text style={styles.sendErrorText}>{sendError}</Text>}
 
-          {/* MessageInput handles everything: text, dictation, attachments, all buttons */}
-          <MessageInput
-            ref={messageInputRef}
-            value={userInput}
-            onChangeText={setUserInput}
-            onSubmit={handleSubmit}
-            isSubmitDisabled={isProcessing || isSubmitLoading}
-            isSubmitLoading={isProcessing || isSubmitLoading}
-            images={selectedImages}
-            onPickImages={handlePickImage}
-            onAddImages={addImages}
-            onRemoveImage={handleRemoveImage}
-            client={client}
-            placeholder="Message agent..."
-            autoFocus={autoFocus}
-            disabled={isSubmitLoading}
-            isScreenFocused={isScreenFocused}
-            leftContent={leftContent}
-            rightContent={rightContent}
-            voiceServerId={serverId}
-            voiceAgentId={agentId}
-            isAgentRunning={isAgentRunning}
-            onQueue={handleQueue}
-            onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
-            onKeyPress={handleCommandKeyPress}
-            onSelectionChange={(selection) => {
-              setCursorIndex(selection.start)
-            }}
-          />
+          <View style={styles.messageInputContainer}>
+            {/* Command + file mention autocomplete rendered as a true popover */}
+            {autocomplete.isVisible && (
+              <View style={styles.autocompletePopover} pointerEvents="box-none">
+                <Autocomplete
+                  options={autocomplete.options}
+                  selectedIndex={autocomplete.selectedIndex}
+                  isLoading={autocomplete.isLoading}
+                  errorMessage={autocomplete.errorMessage}
+                  loadingText={autocomplete.loadingText}
+                  emptyText={autocomplete.emptyText}
+                  onSelect={autocomplete.onSelectOption}
+                />
+              </View>
+            )}
+
+            {/* MessageInput handles everything: text, dictation, attachments, all buttons */}
+            <MessageInput
+              ref={messageInputRef}
+              value={userInput}
+              onChangeText={setUserInput}
+              onSubmit={handleSubmit}
+              isSubmitDisabled={isProcessing || isSubmitLoading}
+              isSubmitLoading={isProcessing || isSubmitLoading}
+              images={selectedImages}
+              onPickImages={handlePickImage}
+              onAddImages={addImages}
+              onRemoveImage={handleRemoveImage}
+              client={client}
+              placeholder="Message agent..."
+              autoFocus={autoFocus}
+              disabled={isSubmitLoading}
+              isScreenFocused={isScreenFocused}
+              leftContent={leftContent}
+              rightContent={rightContent}
+              voiceServerId={serverId}
+              voiceAgentId={agentId}
+              isAgentRunning={isAgentRunning}
+              onQueue={handleQueue}
+              onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
+              onKeyPress={handleCommandKeyPress}
+              onSelectionChange={(selection) => {
+                setCursorIndex(selection.start)
+              }}
+            />
+          </View>
         </View>
       </View>
     </Animated.View>
@@ -709,7 +713,7 @@ const styles = StyleSheet.create(((theme: Theme) => ({
     marginHorizontal: 'auto',
     alignItems: 'center',
     width: '100%',
-    overflow: 'hidden',
+    overflow: 'visible',
     padding: theme.spacing[4],
   },
   inputAreaContent: {
@@ -717,6 +721,18 @@ const styles = StyleSheet.create(((theme: Theme) => ({
     maxWidth: MAX_CONTENT_WIDTH,
     gap: theme.spacing[3],
   },
+  messageInputContainer: {
+    position: 'relative',
+    width: '100%',
+  },
+  autocompletePopover: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: '100%',
+    marginBottom: theme.spacing[3],
+    zIndex: 30,
+  },
   cancelButton: {
     width: 34,
     height: 34,

packages/app/src/components/ui/autocomplete.tsx

@@ -24,6 +24,16 @@ interface AutocompleteProps {
   maxHeight?: number
 }
 
+const BOLT_GLYPH_PATTERN = /[\u26A1\uFE0F]/g
+
+function removeBoltGlyphs(value?: string): string | undefined {
+  if (!value) {
+    return value
+  }
+  const cleaned = value.replace(BOLT_GLYPH_PATTERN, '').trim()
+  return cleaned.length > 0 ? cleaned : undefined
+}
+
 export function Autocomplete({
   options,
   selectedIndex,
@@ -156,6 +166,9 @@ export function Autocomplete({
       >
         {options.map((option, index) => {
           const isSelected = index === selectedIndex
+          const optionLabel = removeBoltGlyphs(option.label) ?? option.label
+          const optionDetail = removeBoltGlyphs(option.detail)
+          const optionDescription = removeBoltGlyphs(option.description)
           return (
             <Pressable
               key={option.id}
@@ -177,12 +190,12 @@ export function Autocomplete({
               ) : null}
               <View style={styles.itemMain}>
                 <View style={styles.itemHeader}>
-                  <Text style={styles.itemLabel}>{option.label}</Text>
-                  {option.detail ? <Text style={styles.itemDetail}>{option.detail}</Text> : null}
+                  <Text style={styles.itemLabel}>{optionLabel}</Text>
+                  {optionDetail ? <Text style={styles.itemDetail}>{optionDetail}</Text> : null}
                 </View>
-                {option.description ? (
+                {optionDescription ? (
                   <Text style={styles.itemDescription} numberOfLines={1}>
-                    {option.description}
+                    {optionDescription}
                   </Text>
                 ) : null}
               </View>
@@ -237,7 +250,7 @@ const styles = StyleSheet.create(((theme: Theme) => ({
   itemLabel: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.medium,
+    fontWeight: theme.fontWeight.normal,
   },
   itemDetail: {
     color: theme.colors.foregroundMuted,