@peers-app/peers-ui 0.7.39 → 0.7.40

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}

package/src/screens/search/global-search.tsx

@@ -12,7 +12,9 @@ import {
   valueTypeMentionConfig,
   IMentionConfig 
 } from '../../mention-configs';
-import { IMentionData } from "@peers-app/peers-sdk";
+import { IMentionData, IAppNav } from "@peers-app/peers-sdk";
+import { allPackages } from '../../ui-router/routes-loader';
+import { systemPackage } from '../../system-apps';
 
 interface SearchResult {
   config: IMentionConfig;
@@ -20,10 +22,22 @@ interface SearchResult {
   category: string;
 }
 
+interface AppSearchItem {
+  packageId: string;
+  packageName: string;
+  navItem: IAppNav;
+  path: string;
+  name: string;
+  displayName: string;
+  iconClassName: string;
+}
+
 export function GlobalSearch() {
   const [_colorMode] = useObservable(colorMode);
+  const [packages] = useObservable(allPackages);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [appResults, setAppResults] = useState<AppSearchItem[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   
@@ -47,10 +61,42 @@ export function GlobalSearch() {
     { config: userMentionConfig, category: 'Users', navigationPath: 'profile' },
   ];
 
+  // 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'
+          };
+        })
+      );
+  };
+
   // Debounced search effect
   useEffect(() => {
     if (!searchQuery.trim()) {
       setSearchResults([]);
+      setAppResults([]);
       return;
     }
 
@@ -75,13 +121,23 @@ export function GlobalSearch() {
         const filteredResults = searchResults.filter(Boolean) as SearchResult[];
         
         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: SearchResult, item: IMentionData) => {
     // Try using the config's onClick first
@@ -103,7 +159,11 @@ export function GlobalSearch() {
     }
   };
 
-  const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0);
+  const handleAppClick = (app: AppSearchItem) => {
+    goToTabPath(app.path);
+  };
+
+  const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0) + appResults.length;
 
   return (
     <div className="container-fluid h-100 p-4" style={{ maxHeight: '100vh', overflowY: 'auto' }}>
@@ -131,7 +191,7 @@ export function GlobalSearch() {
             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..."
+            placeholder="Search across apps, tools, assistants, workflows, events, and more..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             style={{
@@ -162,7 +222,7 @@ export function GlobalSearch() {
             {isSearching ? (
               'Searching...'
             ) : totalResults > 0 ? (
-              `Found ${totalResults} result${totalResults !== 1 ? 's' : ''} across ${searchResults.length} categor${searchResults.length !== 1 ? 'ies' : 'y'}`
+              `Found ${totalResults} result${totalResults !== 1 ? 's' : ''}`
             ) : searchQuery.trim() ? (
               'No results found'
             ) : null}
@@ -173,7 +233,7 @@ export function GlobalSearch() {
       {/* Search Results */}
       {searchQuery && !isSearching && (
         <div>
-          {searchResults.length === 0 ? (
+          {searchResults.length === 0 && appResults.length === 0 ? (
             <div className="text-center py-5">
               <i className="bi-search mb-3 d-block text-muted" style={{ fontSize: '48px' }} />
               <h4 className="text-muted">No results found</h4>
@@ -183,6 +243,65 @@ export function GlobalSearch() {
             </div>
           ) : (
             <div>
+              {/* Apps Section */}
+              {appResults.length > 0 && (
+                <div className="mb-5">
+                  <div className="d-flex align-items-center mb-3">
+                    <i className="bi-grid-3x3-gap me-3" style={{ fontSize: '20px', color: '#6c757d' }} />
+                    <h4 className="mb-0 me-3">Apps</h4>
+                    <span className="badge bg-secondary">{appResults.length}</span>
+                  </div>
+                  <div className="row g-3">
+                    {appResults.map((app) => (
+                      <div key={`${app.packageId}-${app.path}`} className="col-12 col-md-6 col-lg-4">
+                        <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';
+                          }}
+                        >
+                          <div className="card-body p-3">
+                            <div className="d-flex align-items-start">
+                              <i 
+                                className={`${app.iconClassName} me-3 mt-1`}
+                                style={{ 
+                                  fontSize: '16px',
+                                  color: isDark ? '#0d6efd' : '#0d6efd',
+                                  minWidth: '16px'
+                                }}
+                              />
+                              <div className="flex-grow-1">
+                                <h6 className="card-title mb-1 fw-medium">
+                                  {app.displayName}
+                                </h6>
+                                <small className="text-muted text-uppercase" style={{ fontSize: '11px', letterSpacing: '0.5px' }}>
+                                  {app.packageId === 'system-apps' ? 'System App' : app.packageName}
+                                </small>
+                              </div>
+                              <i className="bi-arrow-right text-muted" style={{ fontSize: '12px' }} />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Entity Results */}
               {searchResults.map((result) => (
                 <div key={result.category} className="mb-5">
                   {/* Category Header */}
@@ -253,7 +372,7 @@ export function GlobalSearch() {
           <i className="bi-search mb-3 d-block text-muted" style={{ fontSize: '64px' }} />
           <h3 className="text-muted mb-3">Search across everything</h3>
           <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.
+            Find apps, tools, assistants, workflows, events, predicates, types, and users all in one place.
           </p>
           <div className="d-flex flex-wrap justify-content-center gap-2">
             {searchConfigs.map(({ config, category }) => (