@peers-app/peers-ui 0.7.39 → 0.8.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>

package/src/command-palette/command-palette.ts

@@ -98,127 +98,6 @@ const coreCommands: Command[] = [
       closeCommandPalette();
       goToTabPath('threads');
     }
-  },
-  {
-    id: 'go-settings',
-    label: 'Open Settings',
-    description: 'Open application settings',
-    iconClassName: 'bi-gear-fill',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('settings');
-    }
-  },
-  {
-    id: 'go-assistants',
-    label: 'Go to Assistants',
-    description: 'View and manage assistants',
-    iconClassName: 'bi-person-fill-gear',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('assistants');
-    }
-  },
-  {
-    id: 'go-workflows',
-    label: 'Go to Workflows',
-    description: 'View and manage workflows',
-    iconClassName: 'bi-database-fill-gear',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('workflows');
-    }
-  },
-  {
-    id: 'go-tools',
-    label: 'Go to Tools',
-    description: 'View and manage tools',
-    iconClassName: 'bi-tools',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('tools');
-    }
-  },
-  {
-    id: 'go-events',
-    label: 'Go to Events',
-    description: 'View and manage events',
-    iconClassName: 'bi-lightning-charge-fill',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('events');
-    }
-  },
-  {
-    id: 'go-predicates',
-    label: 'Go to Predicates',
-    description: 'View and manage predicates',
-    iconClassName: 'bi-node-plus-fill',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('predicates');
-    }
-  },
-  {
-    id: 'go-peer-types',
-    label: 'Go to Peer Types',
-    description: 'View and manage peer types',
-    iconClassName: 'bi-code-square',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('peer-types');
-    }
-  },
-  {
-    id: 'go-packages',
-    label: 'Go to Packages',
-    description: 'View and manage packages',
-    iconClassName: 'bi-box-fill',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('packages');
-    }
-  },
-  {
-    id: 'go-variables',
-    label: 'Go to Variables',
-    description: 'View and manage variables',
-    iconClassName: 'bi-braces',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('variables');
-    }
-  },
-  {
-    id: 'go-knowledge-values',
-    label: 'Go to Knowledge Values',
-    description: 'View and manage knowledge values',
-    iconClassName: 'bi-journal-bookmark-fill',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('knowledge-values');
-    }
-  },
-  {
-    id: 'go-knowledge-frames',
-    label: 'Go to Knowledge Frames',
-    description: 'View and manage knowledge frames',
-    iconClassName: 'bi-window-dock',
-    category: 'Navigation',
-    action: () => {
-      closeCommandPalette();
-      goToTabPath('knowledge-frames');
-    }
   }
 ];
 

package/src/mention-configs.ts

@@ -143,7 +143,7 @@ export const valueTypeMentionConfig: IMentionConfig = {
     name: item.name
   }),
   onClick(data) {
-    rpcClientCalls.setClientPath(`value-types/${data.id}`);
+    rpcClientCalls.setClientPath(`peer-types/${data.id}`);
   },
 };
 

package/src/screens/console-logs/console-logs-list.tsx

@@ -1,4 +1,4 @@
-import { ConsoleLogs, DataFilter, IConsoleLog } from "@peers-app/peers-sdk";
+import { ConsoleLogs, DataFilter, IConsoleLog, ISubscriptionResult, newid, sleep } from "@peers-app/peers-sdk";
 import { min, sortBy, uniqBy } from 'lodash';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
@@ -29,14 +29,15 @@ const DEFAULT_COLUMNS: Column[] = [
 export const ConsoleLogsList = () => {
   const logs = useObservableState<IConsoleLog[]>([]);
   const [allLogsLoaded, setAllLogsLoaded] = useState(false);
+  const loadMoreId = useObservableState<string>(newid(), true);
   const [levelFilter, setLevelFilter] = useState<string>('all');
   const [processFilter, setProcessFilter] = useState<string>('all');
-  const [searchText, setSearchText] = useState('');
+  const searchText = useObservableState<string>('');
   const [columns, setColumns] = useState<Column[]>(DEFAULT_COLUMNS);
   const [totalLogCount, setTotalLogCount] = useState<number>(0);
   const [_colorMode] = useObservable(colorMode);
   const logsEndRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);  
 
   const batchSize = 50;
 
@@ -82,6 +83,9 @@ export const ConsoleLogsList = () => {
     if (processFilter !== 'all') {
       filter.process = processFilter;
     }
+    if (searchText()) {
+      filter.message = { $matchWords: searchText() }
+    }
     return filter;
   };
 
@@ -90,15 +94,6 @@ export const ConsoleLogsList = () => {
     const table = await ConsoleLogs();
     const filter = buildFilter();
     let count = await table.count(filter);
-
-    // If search text is applied, we need to count manually since it's client-side filtering
-    if (searchText) {
-      const allLogs = await table.list(filter);
-      count = allLogs.filter(log =>
-        log.message.toLowerCase().includes(searchText.toLowerCase())
-      ).length;
-    }
-
     setTotalLogCount(count);
   }
 
@@ -106,63 +101,57 @@ export const ConsoleLogsList = () => {
   async function fetchLogs(lastLog?: IConsoleLog): Promise<IConsoleLog[]> {
     const table = await ConsoleLogs();
     const filter: any = buildFilter();
-
     if (lastLog) {
       filter.logId = { $lt: lastLog.logId };
     }
-
-    const cursor = table.cursor(filter, {
-      sortBy: ['-timestamp', '-logId'],
-    });
-
-    const fetchedLogs: IConsoleLog[] = [];
-    for await (const log of cursor) {
-      // Apply text search filter (if search is implemented in cursor, this can be removed)
-      if (searchText && !log.message.toLowerCase().includes(searchText.toLowerCase())) {
-        continue;
-      }
-      fetchedLogs.push(log);
-      if (fetchedLogs.length >= batchSize) {
-        break;
-      }
-    }
-    return fetchedLogs;
+    const results = await table.list(filter, { pageSize: batchSize, sortBy: ['-timestamp', '-logId'] });
+    return results;
   }
 
   // Load older logs (prepend to list)
-  function prependLogs() {
+  async function loadMoreLogs(startLoadId?: string) {
+    if (startLoadId && startLoadId !== loadMoreId()) {
+      return;
+    }
+    startLoadId ??= loadMoreId();
     const oldestLog = logs()[0];
-    fetchLogs(oldestLog).then(fetchedLogs => {
-      if (fetchedLogs.length === 0) {
-        setAllLogsLoaded(true);
-      } else {
-        let _logs = sortBy([...logs(), ...fetchedLogs], 'timestamp');
-        _logs = uniqBy(_logs, l => l.logId);
-        logs(_logs);
-      }
-    });
-    return false;
+    const fetchedLogs = await fetchLogs(oldestLog);
+    if (loadMoreId() !== startLoadId) {
+      loadMoreLogs(loadMoreId());
+      return;
+    }
+    if (fetchedLogs.length === 0) {
+      setAllLogsLoaded(true);
+    }
+    let _logs = sortBy([...logs(), ...fetchedLogs], 'timestamp');
+    _logs = uniqBy(_logs, l => l.logId);
+    logs(_logs);
   }
 
   // Initial load and ensure screen is filled
   const minHeightOfLog = 30;
   useEffect(() => {
     if (!allLogsLoaded && (!logs.length || logs.length * minHeightOfLog < windowHeight())) {
-      prependLogs();
+      loadMoreLogs();
     }
-  }, [logs, levelFilter, processFilter, searchText]);
+  }, [logs, levelFilter, processFilter, searchText()]);
 
   // Reset when filters change
   useEffect(() => {
+    loadMoreId(newid());
     logs([]);
-    setAllLogsLoaded(false);
     updateLogCount();
-  }, [levelFilter, processFilter, searchText]);
+    if (allLogsLoaded) {
+      setAllLogsLoaded(false);
+      loadMoreLogs()
+    }    
+  }, [levelFilter, processFilter, searchText()]);
 
   // Subscribe to new logs
   useEffect(() => {
+    let sub: ISubscriptionResult | undefined = undefined;
     ConsoleLogs().then(table => {
-      const sub = table.dataChanged.subscribe(evt => {
+      sub = table.dataChanged.subscribe(evt => {
         // Update count whenever data changes
         updateLogCount();
 
@@ -171,7 +160,11 @@ export const ConsoleLogsList = () => {
         // Check if log matches current filters
         if (levelFilter !== 'all' && log.level !== levelFilter) return;
         if (processFilter !== 'all' && log.process !== processFilter) return;
-        if (searchText && !log.message.toLowerCase().includes(searchText.toLowerCase())) return;
+        if (searchText()) {
+          const logMessage = log.message.toLowerCase();
+          const filterOut = searchText().toLowerCase().split(' ').some(word => !logMessage.includes(word));
+          if (filterOut) return;
+        }
 
         // Don't add we're only showing a limited batch and this is older
         if (logs().length > batchSize && min(logs().map(l => l.timestamp))! > log.timestamp) return;
@@ -183,12 +176,11 @@ export const ConsoleLogsList = () => {
           scrollToBottom('smooth');
         }
       });
-
-      return () => {
-        sub.unsubscribe();
-      };
     });
-  }, [levelFilter, processFilter, searchText]);
+    return () => {
+      sub?.unsubscribe();
+    };
+  }, [levelFilter, processFilter]);
 
   function scrollToBottom(behavior: 'instant' | 'smooth', delay = 100) {
     setTimeout(() => {
@@ -202,7 +194,6 @@ export const ConsoleLogsList = () => {
         const table = await ConsoleLogs();
         await table.deleteOldLogs(Date.now());
         logs([]);
-        setAllLogsLoaded(true);
         setTotalLogCount(0);
       } catch (err) {
         console.error('Failed to clear logs:', err);
@@ -219,8 +210,8 @@ export const ConsoleLogsList = () => {
         setLevelFilter={setLevelFilter}
         processFilter={processFilter}
         setProcessFilter={setProcessFilter}
-        searchText={searchText}
-        setSearchText={setSearchText}
+        searchText={searchText()}
+        setSearchText={searchText}
       />
 
       <div
@@ -254,7 +245,7 @@ export const ConsoleLogsList = () => {
         >
           <InfiniteScroll
             dataLength={_logs.length}
-            next={prependLogs}
+            next={loadMoreLogs}
             style={{ display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }}
             inverse={true}
             hasMore={!allLogsLoaded}