@peers-app/peers-ui 0.7.39 → 0.7.40

package/dist/screens/search/global-search.js

@@ -39,10 +39,14 @@ const hooks_1 = require("../../hooks");
 const color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
 const mention_configs_1 = require("../../mention-configs");
+const routes_loader_1 = require("../../ui-router/routes-loader");
+const system_apps_1 = require("../../system-apps");
 function GlobalSearch() {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const [packages] = (0, hooks_1.useObservable)(routes_loader_1.allPackages);
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
     const [searchResults, setSearchResults] = (0, react_1.useState)([]);
+    const [appResults, setAppResults] = (0, react_1.useState)([]);
     const [isSearching, setIsSearching] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
     const isDark = _colorMode === 'dark';
@@ -62,10 +66,39 @@ function GlobalSearch() {
         { config: mention_configs_1.valueTypeMentionConfig, category: 'Types', navigationPath: 'peer-types' },
         { config: mention_configs_1.userMentionConfig, category: 'Users', navigationPath: 'profile' },
     ];
+    // Get all apps (system and user)
+    const getAllApps = () => {
+        const allPackages_ = [...packages, system_apps_1.systemPackage];
+        return allPackages_
+            .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
+            .flatMap(pkg => pkg.appNavs.map(navItem => {
+            // Construct path - use direct path for system apps, package-nav for others
+            let path;
+            if (pkg.packageId === 'system-apps') {
+                path = navItem.navigationPath ?? navItem.name.replace(/\s/g, '-').toLowerCase();
+            }
+            else {
+                path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
+                while (path.includes('//')) {
+                    path = path.replace('//', '/');
+                }
+            }
+            return {
+                packageId: pkg.packageId,
+                packageName: pkg.name,
+                navItem,
+                path,
+                name: navItem.name,
+                displayName: navItem.displayName || navItem.name,
+                iconClassName: navItem.iconClassName || 'bi-box-seam'
+            };
+        }));
+    };
     // Debounced search effect
     (0, react_1.useEffect)(() => {
         if (!searchQuery.trim()) {
             setSearchResults([]);
+            setAppResults([]);
             return;
         }
         const timeoutId = setTimeout(async () => {
@@ -88,13 +121,20 @@ function GlobalSearch() {
                 const searchResults = await Promise.all(searchPromises);
                 const filteredResults = searchResults.filter(Boolean);
                 setSearchResults(filteredResults);
+                // Search apps
+                const allApps = getAllApps();
+                const lowerQuery = searchQuery.toLowerCase();
+                const filteredApps = allApps.filter(app => app.name.toLowerCase().includes(lowerQuery) ||
+                    app.displayName.toLowerCase().includes(lowerQuery) ||
+                    app.packageName.toLowerCase().includes(lowerQuery));
+                setAppResults(filteredApps);
             }
             finally {
                 setIsSearching(false);
             }
         }, 300); // 300ms debounce
         return () => clearTimeout(timeoutId);
-    }, [searchQuery]);
+    }, [searchQuery, packages]);
     const handleItemClick = (result, item) => {
         // Try using the config's onClick first
         if (result.config.onClick) {
@@ -114,7 +154,10 @@ function GlobalSearch() {
             }
         }
     };
-    const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0);
+    const handleAppClick = (app) => {
+        (0, tabs_state_1.goToTabPath)(app.path);
+    };
+    const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0) + appResults.length;
     return (react_1.default.createElement("div", { className: "container-fluid h-100 p-4", style: { maxHeight: '100vh', overflowY: 'auto' } },
         react_1.default.createElement("div", { className: "mb-4" },
             react_1.default.createElement("h1", { className: "h3 mb-3 d-flex align-items-center" },
@@ -129,7 +172,7 @@ function GlobalSearch() {
                         zIndex: 1,
                         fontSize: '18px'
                     } }),
-                react_1.default.createElement("input", { ref: inputRef, type: "text", className: `form-control form-control-lg ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Search across tools, assistants, workflows, events, and more...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
+                react_1.default.createElement("input", { ref: inputRef, type: "text", className: `form-control form-control-lg ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Search across apps, tools, assistants, workflows, events, and more...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
                         paddingLeft: '50px',
                         fontSize: '18px',
                         borderRadius: '12px',
@@ -142,44 +185,75 @@ function GlobalSearch() {
                         transform: 'translateY(-50%)'
                     } },
                     react_1.default.createElement("div", { className: "spinner-border spinner-border-sm text-muted" })))),
-            searchQuery && (react_1.default.createElement("div", { className: "mt-3 text-muted small" }, isSearching ? ('Searching...') : totalResults > 0 ? (`Found ${totalResults} result${totalResults !== 1 ? 's' : ''} across ${searchResults.length} categor${searchResults.length !== 1 ? 'ies' : 'y'}`) : searchQuery.trim() ? ('No results found') : null))),
-        searchQuery && !isSearching && (react_1.default.createElement("div", null, searchResults.length === 0 ? (react_1.default.createElement("div", { className: "text-center py-5" },
+            searchQuery && (react_1.default.createElement("div", { className: "mt-3 text-muted small" }, isSearching ? ('Searching...') : totalResults > 0 ? (`Found ${totalResults} result${totalResults !== 1 ? 's' : ''}`) : searchQuery.trim() ? ('No results found') : null))),
+        searchQuery && !isSearching && (react_1.default.createElement("div", null, searchResults.length === 0 && appResults.length === 0 ? (react_1.default.createElement("div", { className: "text-center py-5" },
             react_1.default.createElement("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: '48px' } }),
             react_1.default.createElement("h4", { className: "text-muted" }, "No results found"),
-            react_1.default.createElement("p", { className: "text-muted" }, "Try different keywords or check your spelling"))) : (react_1.default.createElement("div", null, searchResults.map((result) => (react_1.default.createElement("div", { key: result.category, className: "mb-5" },
-            react_1.default.createElement("div", { className: "d-flex align-items-center mb-3" },
-                react_1.default.createElement("i", { className: `${result.config.iconClass} me-3`, style: { fontSize: '20px', color: '#6c757d' } }),
-                react_1.default.createElement("h4", { className: "mb-0 me-3" }, result.category),
-                react_1.default.createElement("span", { className: "badge bg-secondary" }, result.items.length)),
-            react_1.default.createElement("div", { className: "row g-3" }, result.items.map((item) => (react_1.default.createElement("div", { key: item.id, className: "col-12 col-md-6 col-lg-4" },
-                react_1.default.createElement("div", { className: `card h-100 ${isDark ? 'bg-dark border-secondary' : 'bg-light'}`, style: {
-                        cursor: 'pointer',
-                        transition: 'all 0.15s ease',
-                        borderRadius: '8px'
-                    }, onClick: () => handleItemClick(result, item), onMouseEnter: (e) => {
-                        e.currentTarget.style.transform = 'translateY(-2px)';
-                        e.currentTarget.style.boxShadow = isDark
-                            ? '0 4px 12px rgba(0,0,0,0.3)'
-                            : '0 4px 12px rgba(0,0,0,0.1)';
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.transform = 'translateY(0)';
-                        e.currentTarget.style.boxShadow = 'none';
-                    } },
-                    react_1.default.createElement("div", { className: "card-body p-3" },
-                        react_1.default.createElement("div", { className: "d-flex align-items-start" },
-                            react_1.default.createElement("i", { className: `${result.config.iconClass} me-3 mt-1`, style: {
-                                    fontSize: '16px',
-                                    color: isDark ? '#0d6efd' : '#0d6efd',
-                                    minWidth: '16px'
-                                } }),
-                            react_1.default.createElement("div", { className: "flex-grow-1" },
-                                react_1.default.createElement("h6", { className: "card-title mb-1 fw-medium" }, item.name),
-                                react_1.default.createElement("small", { className: "text-muted text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, result.category.slice(0, -1))),
-                            react_1.default.createElement("i", { className: "bi-arrow-right text-muted", style: { fontSize: '12px' } }))))))))))))))),
+            react_1.default.createElement("p", { className: "text-muted" }, "Try different keywords or check your spelling"))) : (react_1.default.createElement("div", null,
+            appResults.length > 0 && (react_1.default.createElement("div", { className: "mb-5" },
+                react_1.default.createElement("div", { className: "d-flex align-items-center mb-3" },
+                    react_1.default.createElement("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: '20px', color: '#6c757d' } }),
+                    react_1.default.createElement("h4", { className: "mb-0 me-3" }, "Apps"),
+                    react_1.default.createElement("span", { className: "badge bg-secondary" }, appResults.length)),
+                react_1.default.createElement("div", { className: "row g-3" }, appResults.map((app) => (react_1.default.createElement("div", { key: `${app.packageId}-${app.path}`, className: "col-12 col-md-6 col-lg-4" },
+                    react_1.default.createElement("div", { className: `card h-100 ${isDark ? 'bg-dark border-secondary' : 'bg-light'}`, style: {
+                            cursor: 'pointer',
+                            transition: 'all 0.15s ease',
+                            borderRadius: '8px'
+                        }, onClick: () => handleAppClick(app), onMouseEnter: (e) => {
+                            e.currentTarget.style.transform = 'translateY(-2px)';
+                            e.currentTarget.style.boxShadow = isDark
+                                ? '0 4px 12px rgba(0,0,0,0.3)'
+                                : '0 4px 12px rgba(0,0,0,0.1)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.transform = 'translateY(0)';
+                            e.currentTarget.style.boxShadow = 'none';
+                        } },
+                        react_1.default.createElement("div", { className: "card-body p-3" },
+                            react_1.default.createElement("div", { className: "d-flex align-items-start" },
+                                react_1.default.createElement("i", { className: `${app.iconClassName} me-3 mt-1`, style: {
+                                        fontSize: '16px',
+                                        color: isDark ? '#0d6efd' : '#0d6efd',
+                                        minWidth: '16px'
+                                    } }),
+                                react_1.default.createElement("div", { className: "flex-grow-1" },
+                                    react_1.default.createElement("h6", { className: "card-title mb-1 fw-medium" }, app.displayName),
+                                    react_1.default.createElement("small", { className: "text-muted text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, app.packageId === 'system-apps' ? 'System App' : app.packageName)),
+                                react_1.default.createElement("i", { className: "bi-arrow-right text-muted", style: { fontSize: '12px' } })))))))))),
+            searchResults.map((result) => (react_1.default.createElement("div", { key: result.category, className: "mb-5" },
+                react_1.default.createElement("div", { className: "d-flex align-items-center mb-3" },
+                    react_1.default.createElement("i", { className: `${result.config.iconClass} me-3`, style: { fontSize: '20px', color: '#6c757d' } }),
+                    react_1.default.createElement("h4", { className: "mb-0 me-3" }, result.category),
+                    react_1.default.createElement("span", { className: "badge bg-secondary" }, result.items.length)),
+                react_1.default.createElement("div", { className: "row g-3" }, result.items.map((item) => (react_1.default.createElement("div", { key: item.id, className: "col-12 col-md-6 col-lg-4" },
+                    react_1.default.createElement("div", { className: `card h-100 ${isDark ? 'bg-dark border-secondary' : 'bg-light'}`, style: {
+                            cursor: 'pointer',
+                            transition: 'all 0.15s ease',
+                            borderRadius: '8px'
+                        }, onClick: () => handleItemClick(result, item), onMouseEnter: (e) => {
+                            e.currentTarget.style.transform = 'translateY(-2px)';
+                            e.currentTarget.style.boxShadow = isDark
+                                ? '0 4px 12px rgba(0,0,0,0.3)'
+                                : '0 4px 12px rgba(0,0,0,0.1)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.transform = 'translateY(0)';
+                            e.currentTarget.style.boxShadow = 'none';
+                        } },
+                        react_1.default.createElement("div", { className: "card-body p-3" },
+                            react_1.default.createElement("div", { className: "d-flex align-items-start" },
+                                react_1.default.createElement("i", { className: `${result.config.iconClass} me-3 mt-1`, style: {
+                                        fontSize: '16px',
+                                        color: isDark ? '#0d6efd' : '#0d6efd',
+                                        minWidth: '16px'
+                                    } }),
+                                react_1.default.createElement("div", { className: "flex-grow-1" },
+                                    react_1.default.createElement("h6", { className: "card-title mb-1 fw-medium" }, item.name),
+                                    react_1.default.createElement("small", { className: "text-muted text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, result.category.slice(0, -1))),
+                                react_1.default.createElement("i", { className: "bi-arrow-right text-muted", style: { fontSize: '12px' } }))))))))))))))),
         !searchQuery && (react_1.default.createElement("div", { className: "text-center py-5" },
             react_1.default.createElement("i", { className: "bi-search mb-3 d-block text-muted", style: { fontSize: '64px' } }),
             react_1.default.createElement("h3", { className: "text-muted mb-3" }, "Search across everything"),
-            react_1.default.createElement("p", { className: "text-muted mb-4", style: { maxWidth: '400px', margin: '0 auto' } }, "Find tools, assistants, workflows, events, predicates, types, and users all in one place."),
+            react_1.default.createElement("p", { className: "text-muted mb-4", style: { maxWidth: '400px', margin: '0 auto' } }, "Find apps, tools, assistants, workflows, events, predicates, types, and users all in one place."),
             react_1.default.createElement("div", { className: "d-flex flex-wrap justify-content-center gap-2" }, searchConfigs.map(({ config, category }) => (react_1.default.createElement("span", { key: category, className: `badge ${isDark ? 'bg-secondary' : 'bg-light text-dark'} px-3 py-2 d-flex align-items-center`, style: { fontSize: '12px' } },
                 react_1.default.createElement("i", { className: `${config.iconClass} me-2` }),
                 category))))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.7.39",
+  "version": "0.7.40",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "bootstrap": "^5.3.3",
-    "@peers-app/peers-sdk": "^0.7.39",
+    "@peers-app/peers-sdk": "^0.7.40",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -57,7 +57,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.5",
     "path-browserify": "^1.0.1",
-    "@peers-app/peers-sdk": "0.7.39",
+    "@peers-app/peers-sdk": "0.7.40",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "string-width": "^7.1.0",

package/src/command-palette/command-palette-ui.tsx

@@ -9,11 +9,27 @@ import {
   isCommandPaletteOpen,
   searchCommands
 } from './command-palette';
+import { allPackages } from '../ui-router/routes-loader';
+import { systemPackage } from '../system-apps';
+import { goToTabPath } from '../tabs-layout/tabs-state';
+import { IAppNav, Messages, newid, getMe } from "@peers-app/peers-sdk";
+import { openThreadInTab } from '../globals';
+
+interface AppSearchItem {
+  packageId: string;
+  packageName: string;
+  navItem: IAppNav;
+  path: string;
+  name: string;
+  displayName: string;
+  iconClassName: string;
+}
 
 export function CommandPaletteOverlay() {
   const [isOpen] = useObservable(isCommandPaletteOpen);
   const [_persistedQuery] = useObservable(commandSearchQuery);
   const [_colorMode] = useObservable(colorMode);
+  const [packages] = useObservable(allPackages);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   
@@ -53,7 +69,78 @@ export function CommandPaletteOverlay() {
   const searchQuery = localQuery;
   const filteredCommands = searchCommands(searchQuery);
   
+  // Get all apps (system and user)
+  const getAllApps = (): AppSearchItem[] => {
+    const allPackages_ = [...packages, systemPackage];
+    return allPackages_
+      .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
+      .flatMap(pkg =>
+        pkg.appNavs!.map(navItem => {
+          // Construct path - use direct path for system apps, package-nav for others
+          let path: string;
+          if (pkg.packageId === 'system-apps') {
+            path = navItem.navigationPath ?? navItem.name.replace(/\s/g, '-').toLowerCase();
+          } else {
+            path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
+            while (path.includes('//')) {
+              path = path.replace('//', '/');
+            }
+          }
+
+          return {
+            packageId: pkg.packageId,
+            packageName: pkg.name,
+            navItem,
+            path,
+            name: navItem.name,
+            displayName: navItem.displayName || navItem.name,
+            iconClassName: navItem.iconClassName || 'bi-box-seam'
+          };
+        })
+      );
+  };
+
+  // Search apps
+  const searchApps = (query: string): AppSearchItem[] => {
+    if (!query.trim()) return [];
+    const allApps = getAllApps();
+    const lowerQuery = query.toLowerCase();
+    return allApps.filter(app =>
+      app.name.toLowerCase().includes(lowerQuery) ||
+      app.displayName.toLowerCase().includes(lowerQuery) ||
+      app.packageName.toLowerCase().includes(lowerQuery)
+    );
+  };
+
+  const filteredApps = searchApps(searchQuery);
+  
+  // Function to create a new thread from search query
+  const createNewThreadFromQuery = async (query: string) => {
+    try {
+      const currentUser = await getMe();
+      const threadMessage = await Messages().insert({
+        messageId: newid(),
+        userId: currentUser.userId,
+        channelId: currentUser.userId,
+        message: query.trim(),
+        createdAt: new Date(),
+      });
+      await openThreadInTab(threadMessage);
+    } catch (error) {
+      console.error('Failed to create new thread:', error);
+    }
+  };
+  
   // Create a flattened list that matches the visual rendering order
+  // Apps first, then commands
+  const allItems: Array<{ type: 'app' | 'command'; app?: AppSearchItem; command?: Command; id: string }> = [];
+  
+  // Add apps first
+  filteredApps.forEach((app) => {
+    allItems.push({ type: 'app', app, id: `app-${app.packageId}-${app.path}` });
+  });
+  
+  // Then add commands
   const visualOrderCommands = Object.entries(
     filteredCommands.reduce((acc, cmd) => {
       const category = cmd.category || 'Other';
@@ -63,6 +150,10 @@ export function CommandPaletteOverlay() {
     }, {} as Record<string, Command[]>)
   ).flatMap(([, commands]) => commands);
   
+  visualOrderCommands.forEach((cmd) => {
+    allItems.push({ type: 'command', command: cmd, id: `command-${cmd.id}` });
+  });
+  
   // Focus input when opened
   useEffect(() => {
     if (isOpen && inputRef.current) {
@@ -82,21 +173,40 @@ export function CommandPaletteOverlay() {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'ArrowDown') {
         e.preventDefault();
-        setSelectedIndex(prev => Math.min(prev + 1, visualOrderCommands.length - 1));
+        // Allow selection to go one past the end if there's a search query (for new thread option)
+        const maxIndex = searchQuery.trim() ? allItems.length : allItems.length - 1;
+        setSelectedIndex(prev => Math.min(prev + 1, maxIndex));
       } else if (e.key === 'ArrowUp') {
         e.preventDefault();
         setSelectedIndex(prev => Math.max(prev - 1, 0));
       } else if (e.key === 'Enter') {
         e.preventDefault();
-        if (visualOrderCommands[selectedIndex]) {
-          executeCommand(visualOrderCommands[selectedIndex].id);
+        // Check if the new thread option is selected (selectedIndex >= allItems.length)
+        if (selectedIndex >= allItems.length && searchQuery.trim()) {
+          closeCommandPalette();
+          createNewThreadFromQuery(searchQuery);
+        } else {
+          const selectedItem = allItems[selectedIndex];
+          if (selectedItem) {
+            if (selectedItem.type === 'app' && selectedItem.app) {
+              closeCommandPalette();
+              goToTabPath(selectedItem.app.path);
+            } else if (selectedItem.type === 'command' && selectedItem.command) {
+              executeCommand(selectedItem.command.id);
+            }
+          } else if (searchQuery.trim()) {
+            // Fallback: Create a new thread with the search query as the message
+            // This happens when no item is selected (selectedIndex is out of bounds or -1)
+            closeCommandPalette();
+            createNewThreadFromQuery(searchQuery);
+          }
         }
       }
     };
     
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, visualOrderCommands, selectedIndex]);
+  }, [isOpen, allItems, selectedIndex]);
   
   if (!isOpen) return null;
   
@@ -151,7 +261,7 @@ export function CommandPaletteOverlay() {
               ref={inputRef}
               type="text"
               className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
-              placeholder="Type a command or search..."
+              placeholder="Search apps, commands, or navigate..."
               value={searchQuery}
               onChange={(e) => {
                 const newQuery = e.target.value;
@@ -178,22 +288,85 @@ export function CommandPaletteOverlay() {
           </div>
         </div>
         
-        {/* Commands List */}
+        {/* Commands and Apps List */}
         <div
           style={{
             maxHeight: '400px',
             overflowY: 'auto'
           }}
         >
-          {visualOrderCommands.length === 0 ? (
+          {allItems.length === 0 && !searchQuery.trim() ? (
             <div className="p-4 text-center text-muted">
               <i className="bi-search mb-2 d-block" style={{ fontSize: '24px' }} />
-              No commands found
+              No results found
             </div>
           ) : (
             <div className="py-2">
-              {/* Group commands by category */}
-              {Object.entries(
+              {/* Show "No results" message if there's a query but no results yet */}
+              {allItems.length === 0 && searchQuery.trim() && (
+                <div className="px-3 py-2 text-muted small text-center">
+                  No matching results
+                </div>
+              )}
+              {/* Apps Section */}
+              {filteredApps.length > 0 && (
+                <div>
+                  <div 
+                    className="px-3 py-1 small text-muted fw-bold text-uppercase"
+                    style={{ fontSize: '11px', letterSpacing: '0.5px' }}
+                  >
+                    Apps
+                  </div>
+                  {filteredApps.map((app) => {
+                    const appId = `app-${app.packageId}-${app.path}`;
+                    const globalIndex = allItems.findIndex(item => item.id === appId);
+                    const isSelected = globalIndex === selectedIndex;
+                    
+                    return (
+                      <div
+                        key={`${app.packageId}-${app.path}`}
+                        className={`px-3 py-2 d-flex align-items-center justify-content-between ${
+                          isSelected 
+                            ? (isDark ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-10')
+                            : ''
+                        }`}
+                        style={{
+                          cursor: 'pointer',
+                          transition: 'background-color 0.1s ease'
+                        }}
+                        onClick={() => {
+                          closeCommandPalette();
+                          goToTabPath(app.path);
+                        }}
+                        onMouseEnter={() => setSelectedIndex(globalIndex)}
+                      >
+                        <div className="d-flex align-items-center">
+                          <i 
+                            className={`${app.iconClassName} me-3`}
+                            style={{ 
+                              fontSize: '16px',
+                              color: isSelected ? (isDark ? '#ffffff' : '#0d6efd') : '#6c757d',
+                              minWidth: '16px'
+                            }}
+                          />
+                          <div>
+                            <div className="fw-medium">{app.displayName}</div>
+                            <div 
+                              className="small text-muted"
+                              style={{ fontSize: '12px' }}
+                            >
+                              {app.packageId === 'system-apps' ? 'System App' : app.packageName}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+
+              {/* Commands Section - Group commands by category */}
+              {filteredCommands.length > 0 && Object.entries(
                 filteredCommands.reduce((acc, cmd) => {
                   const category = cmd.category || 'Other';
                   if (!acc[category]) acc[category] = [];
@@ -212,7 +385,8 @@ export function CommandPaletteOverlay() {
                   
                   {/* Commands in Category */}
                   {commands.map((command) => {
-                    const globalIndex = visualOrderCommands.indexOf(command);
+                    const commandId = `command-${command.id}`;
+                    const globalIndex = allItems.findIndex(item => item.id === commandId);
                     const isSelected = globalIndex === selectedIndex;
                     
                     return (
@@ -274,6 +448,64 @@ export function CommandPaletteOverlay() {
                   })}
                 </div>
               ))}
+
+              {/* New Thread Indicator - Show when there's a search query */}
+              {searchQuery.trim() && (
+                <div>
+                  <div 
+                    className="px-3 py-1 small text-muted fw-bold text-uppercase"
+                    style={{ fontSize: '11px', letterSpacing: '0.5px' }}
+                  >
+                    Actions
+                  </div>
+                  <div
+                    className={`px-3 py-2 d-flex align-items-center ${
+                      (allItems.length === 0 || selectedIndex >= allItems.length) && searchQuery.trim()
+                        ? (isDark ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-10')
+                        : ''
+                    }`}
+                    style={{
+                      cursor: 'pointer',
+                      transition: 'background-color 0.1s ease',
+                      borderTop: allItems.length > 0 ? `1px solid ${isDark ? '#495057' : '#dee2e6'}` : 'none',
+                      marginTop: allItems.length > 0 ? '8px' : '0',
+                      paddingTop: allItems.length > 0 ? '12px' : '8px'
+                    }}
+                    onClick={() => {
+                      closeCommandPalette();
+                      createNewThreadFromQuery(searchQuery);
+                    }}
+                    onMouseEnter={() => {
+                      // Set selected index beyond the list to indicate this item is selected
+                      setSelectedIndex(allItems.length);
+                    }}
+                  >
+                    <div className="d-flex align-items-center">
+                      <i 
+                        className="bi-chat-dots me-3"
+                        style={{ 
+                          fontSize: '16px',
+                          color: (allItems.length === 0 || selectedIndex >= allItems.length) && searchQuery.trim() 
+                            ? (isDark ? '#ffffff' : '#0d6efd') 
+                            : '#6c757d',
+                          minWidth: '16px'
+                        }}
+                      />
+                      <div>
+                        <div className="fw-medium">
+                          Start new thread: <span className="text-muted">{searchQuery.trim().slice(0, 50)}{searchQuery.trim().length > 50 ? '...' : ''}</span>
+                        </div>
+                        <div 
+                          className="small text-muted"
+                          style={{ fontSize: '12px' }}
+                        >
+                          Press Enter to create
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -298,7 +530,8 @@ export function CommandPaletteOverlay() {
             </span>
           </div>
           <div>
-            {visualOrderCommands.length} command{visualOrderCommands.length !== 1 ? 's' : ''}
+            {allItems.length} result{allItems.length !== 1 ? 's' : ''}
+            {searchQuery.trim() && allItems.length === 0 && ' • Start thread'}
           </div>
         </div>
       </div>