@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/assistants/assistant-tools.tsx

@@ -1,7 +1,13 @@
-import React from "react";
-import { Assistants, IAssistant, ToolInclusionStrategy, IDoc, camelCaseToSpaces } from "@peers-app/peers-sdk";
-import { Tooltip } from "../../components/tooltip";
+import {
+  Assistants,
+  camelCaseToSpaces,
+  type IAssistant,
+  type IDoc,
+  type Observable,
+  ToolInclusionStrategy,
+} from "@peers-app/peers-sdk";
 import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { Tooltip } from "../../components/tooltip";
 import { useObservable } from "../../hooks";
 
 export const AssistantTools = (props: { assistant: IDoc<IAssistant> }) => {
@@ -9,53 +15,68 @@ export const AssistantTools = (props: { assistant: IDoc<IAssistant> }) => {
 
   return (
     <div>
-
-      <div className='mt-2'>
+      <div className="mt-2">
         <small>
           Tool Inclusion Strategy:
           <small>
-            <Tooltip markdownContent={Assistants().metaData.fields.find(f => f.name === 'toolInclusionStrategy')?.description ?? ''} />
+            <Tooltip
+              markdownContent={
+                Assistants().metaData.fields.find((f) => f.name === "toolInclusionStrategy")
+                  ?.description ?? ""
+              }
+            />
           </small>
         </small>
         <ToolInclusionStrategyDropDown assistant={assistant} />
       </div>
 
-      <div className='mt-2'>
+      <div className="mt-2">
         <small>
           Tools to Include:
           <small>
-            <Tooltip markdownContent={Assistants().metaData.fields.find(f => f.name === 'toolsToInclude')?.description ?? ''} />
+            <Tooltip
+              markdownContent={
+                Assistants().metaData.fields.find((f) => f.name === "toolsToInclude")
+                  ?.description ?? ""
+              }
+            />
           </small>
         </small>
-        <MarkdownEditorInline
-          value={assistant.qs.toolsToInclude as any}
-        />
+        <MarkdownEditorInline value={assistant.qs.toolsToInclude as Observable<string>} />
       </div>
-
     </div>
   );
 };
 
-
 const ToolInclusionStrategyDropDown = (props: { assistant: IDoc<IAssistant> }) => {
-  const { assistant } = props;  
+  const { assistant } = props;
 
   useObservable(assistant.qs.toolInclusionStrategy);
-  
+
   return (
     <div className="dropdown">
-      <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+      <button
+        className="btn btn-secondary dropdown-toggle"
+        type="button"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
         {camelCaseToSpaces(assistant.toolInclusionStrategy)}
       </button>
       <ul className="dropdown-menu">
-        {Object.values(ToolInclusionStrategy).map(strategy => {
+        {Object.values(ToolInclusionStrategy).map((strategy) => {
           return (
-            <li key={strategy} onClick={() => assistant.toolInclusionStrategy = strategy}>
+            <li
+              key={strategy}
+              onClick={() => {
+                assistant.toolInclusionStrategy = strategy;
+              }}
+            >
               <span className="dropdown-item">{camelCaseToSpaces(strategy)}</span>
             </li>
-          )
+          );
         })}
       </ul>
     </div>
   );
-}
+};

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

@@ -1,16 +1,22 @@
-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';
-import { LoadingIndicator } from '../../components/loading-indicator';
+import {
+  ConsoleLogs,
+  type DataFilter,
+  type IConsoleLog,
+  type ISubscriptionResult,
+  newid,
+} from "@peers-app/peers-sdk";
+import { min, sortBy, uniqBy } from "lodash";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { isDesktop } from "../../globals";
 import { useObservable, useObservableState } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-import { colorMode } from '../settings/color-mode-dropdown';
-import { LogDisplay } from './log-display';
-import { LogFilters } from './log-filters';
-import { ResizableTableHeader } from './resizable-table-header';
-import { isDesktop } from '../../globals';
-import { MobileLogCard } from './mobile-log-card';
+import { colorMode } from "../settings/color-mode-dropdown";
+import { LogDisplay } from "./log-display";
+import { LogFilters } from "./log-filters";
+import { MobileLogCard } from "./mobile-log-card";
+import { ResizableTableHeader } from "./resizable-table-header";
 
 const windowHeight = () => window.innerHeight;
 
@@ -21,20 +27,22 @@ interface Column {
 }
 
 const DEFAULT_COLUMNS: Column[] = [
-  { key: 'timestamp', label: 'Timestamp', width: 150 },
-  { key: 'level', label: 'Level', width: 80 },
-  { key: 'process', label: 'Process', width: 100 },
-  { key: 'source', label: 'Source', width: 120 },
-  { key: 'message', label: 'Message', width: 600 },
+  { key: "timestamp", label: "Timestamp", width: 150 },
+  { key: "level", label: "Level", width: 80 },
+  { key: "process", label: "Process", width: 100 },
+  { key: "source", label: "Source", width: 120 },
+  { key: "message", label: "Message", width: 600 },
 ];
 
 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 = useObservableState<string>('');
+  const [levelFilter, setLevelFilter] = useState<string>("all");
+  const [processFilter, setProcessFilter] = useState<string>("all");
+  const searchText = useObservableState<string>("");
+  /** Observable ref is stable — depend on this string in hooks so search changes refetch. */
+  const searchQuery = searchText();
   const [columns, setColumns] = useState<Column[]>(DEFAULT_COLUMNS);
   const [totalLogCount, setTotalLogCount] = useState<number>(0);
   const [_colorMode] = useObservable(colorMode);
@@ -46,169 +54,194 @@ export const ConsoleLogsList = () => {
   const batchSize = 50;
 
   // Track fixed column widths to trigger message column recalculation
-  const fixedColumnsWidthKey = useMemo(() => {
+  const _fixedColumnsWidthKey = useMemo(() => {
     return columns
-      .filter(col => col.key !== 'message')
-      .map(col => `${col.key}:${col.width}`)
-      .join(',');
+      .filter((col) => col.key !== "message")
+      .map((col) => `${col.key}:${col.width}`)
+      .join(",");
   }, [columns]);
 
-  // Calculate message column width based on available space
+  // Calculate message column width based on available space.
+  // Do not depend on `columns` — updating the message column width changes `columns` and would re-enter this effect forever.
+  // Re-run when fixed (non-message) column widths change (`_fixedColumnsWidthKey`) or on window resize.
   useEffect(() => {
     const updateMessageColumnWidth = () => {
       if (!containerRef.current) return;
 
       const containerWidth = containerRef.current.offsetWidth;
-      const fixedColumnsWidth = columns
-        .filter(col => col.key !== 'message')
-        .reduce((sum, col) => sum + col.width, 0);
 
-      const messageWidth = Math.max(200, containerWidth - fixedColumnsWidth - 20); // 20px for scrollbar
+      setColumns((prev) => {
+        const fixedColumnsWidth = prev
+          .filter((col) => col.key !== "message")
+          .reduce((sum, col) => sum + col.width, 0);
 
-      setColumns(prev => prev.map(col =>
-        col.key === 'message' ? { ...col, width: messageWidth } : col
-      ));
+        const messageWidth = Math.max(200, containerWidth - fixedColumnsWidth - 20); // 20px for scrollbar
+
+        return prev.map((col) => (col.key === "message" ? { ...col, width: messageWidth } : col));
+      });
     };
 
     updateMessageColumnWidth();
-    window.addEventListener('resize', updateMessageColumnWidth);
+    window.addEventListener("resize", updateMessageColumnWidth);
 
     return () => {
-      window.removeEventListener('resize', updateMessageColumnWidth);
+      window.removeEventListener("resize", updateMessageColumnWidth);
     };
-  }, [fixedColumnsWidthKey]);
+  }, [_fixedColumnsWidthKey]);
 
   // Build filter from UI state
-  const buildFilter = (): DataFilter<IConsoleLog> => {
+  const buildFilter = useCallback((): DataFilter<IConsoleLog> => {
     const filter: DataFilter<IConsoleLog> = {};
-    if (levelFilter !== 'all') {
-      filter.level = levelFilter as any;
+    if (levelFilter !== "all") {
+      filter.level = levelFilter as IConsoleLog["level"];
     }
-    if (processFilter !== 'all') {
+    if (processFilter !== "all") {
       filter.process = processFilter;
     }
-    if (searchText()) {
-      filter.message = { $matchWords: searchText() }
+    if (searchQuery.trim()) {
+      filter.message = { $matchWords: searchQuery };
     }
     return filter;
-  };
+  }, [levelFilter, processFilter, searchQuery]);
 
   // Update total log count
-  async function updateLogCount() {
+  const updateLogCount = useCallback(async () => {
     const table = await ConsoleLogs();
     const filter = buildFilter();
-    let count = await table.count(filter);
+    const count = await table.count(filter);
     setTotalLogCount(count);
-  }
+  }, [buildFilter]);
 
   // Fetch logs using cursor-based pagination
-  async function fetchLogs(lastLog?: IConsoleLog): Promise<IConsoleLog[]> {
-    const table = await ConsoleLogs();
-    const filter: any = buildFilter();
-    if (lastLog) {
-      filter.logId = { $lt: lastLog.logId };
-    }
-    const results = await table.list(filter, { pageSize: batchSize, sortBy: ['-timestamp', '-logId'] });
-    return results;
-  }
+  const fetchLogs = useCallback(
+    async (lastLog?: IConsoleLog): Promise<IConsoleLog[]> => {
+      const table = await ConsoleLogs();
+      const base = buildFilter();
+      const filter: DataFilter<IConsoleLog> = lastLog
+        ? { ...base, logId: { $lt: lastLog.logId } }
+        : base;
+      return table.list(filter, {
+        pageSize: batchSize,
+        sortBy: ["-timestamp", "-logId"],
+      });
+    },
+    [buildFilter],
+  );
+
+  const loadMoreLogsRef = useRef<(startLoadId?: string) => Promise<void>>(async () => {});
 
   // Load older logs (prepend to list)
-  async function loadMoreLogs(startLoadId?: string) {
-    if (startLoadId && startLoadId !== loadMoreId()) {
-      return;
-    }
-    startLoadId ??= loadMoreId();
-    const oldestLog = logs()[0];
-    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);
-  }
+  const loadMoreLogs = useCallback(
+    async (startLoadId?: string) => {
+      if (startLoadId && startLoadId !== loadMoreId()) {
+        return;
+      }
+      const sid = startLoadId ?? loadMoreId();
+      const oldestLog = logs()[0];
+      const fetchedLogs = await fetchLogs(oldestLog);
+      if (loadMoreId() !== sid) {
+        await loadMoreLogsRef.current(loadMoreId());
+        return;
+      }
+      if (fetchedLogs.length === 0) {
+        setAllLogsLoaded(true);
+      }
+      let _logs = sortBy([...logs(), ...fetchedLogs], "timestamp");
+      _logs = uniqBy(_logs, (l) => l.logId);
+      logs(_logs);
+    },
+    [fetchLogs, loadMoreId, logs],
+  );
+
+  loadMoreLogsRef.current = loadMoreLogs;
+
+  const scrollToBottom = useCallback((behavior: "instant" | "smooth", delay = 100) => {
+    setTimeout(() => {
+      logsEndRef.current?.scrollIntoView({ behavior });
+    }, delay);
+  }, []);
+
+  const logCount = logs().length;
 
   // Initial load and ensure screen is filled
   const minHeightOfLog = 30;
   useEffect(() => {
-    if (!allLogsLoaded && (!logs.length || logs.length * minHeightOfLog < windowHeight())) {
-      loadMoreLogs();
+    if (!allLogsLoaded && (!logCount || logCount * minHeightOfLog < windowHeight())) {
+      void loadMoreLogs();
     }
-  }, [logs, levelFilter, processFilter, searchText()]);
+  }, [allLogsLoaded, loadMoreLogs, logCount]);
 
-  // Reset when filters change
+  // Reset when filters change (`logs` is a stable observable setter; effect is driven by filter fields and callbacks).
   useEffect(() => {
     loadMoreId(newid());
     logs([]);
-    updateLogCount();
-    if (allLogsLoaded) {
-      setAllLogsLoaded(false);
-      loadMoreLogs()
-    }    
-  }, [levelFilter, processFilter, searchText()]);
-
-  // Subscribe to new logs
+    void updateLogCount();
+    setAllLogsLoaded(false);
+    void loadMoreLogs();
+  }, [levelFilter, processFilter, searchQuery, loadMoreId, loadMoreLogs, updateLogCount]);
+
+  // Subscribe to new logs (`searchText` ref is stable; handler calls searchText() per event for current query).
   useEffect(() => {
-    let sub: ISubscriptionResult | undefined = undefined;
-    ConsoleLogs().then(table => {
-      sub = table.dataChanged.subscribe(evt => {
+    let sub: ISubscriptionResult | undefined;
+    ConsoleLogs().then((table) => {
+      sub = table.dataChanged.subscribe((evt) => {
         // Update count whenever data changes
-        updateLogCount();
+        void updateLogCount();
 
         const log: IConsoleLog = evt.dataObject;
 
         // Check if log matches current filters
-        if (levelFilter !== 'all' && log.level !== levelFilter) return;
-        if (processFilter !== 'all' && log.process !== processFilter) return;
+        if (levelFilter !== "all" && log.level !== levelFilter) return;
+        if (processFilter !== "all" && log.process !== processFilter) return;
         if (searchText()) {
           const logMessage = log.message.toLowerCase();
-          const filterOut = searchText().toLowerCase().split(' ').some(word => !logMessage.includes(word));
+          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;
+        const timestamps = logs().map((l) => l.timestamp);
+        const oldestTs = min(timestamps);
+        if (logs().length > batchSize && oldestTs !== undefined && oldestTs > log.timestamp) {
+          return;
+        }
 
-        if (evt.op === 'insert') {
-          let _logs = sortBy([...logs(), log], 'timestamp');
-          _logs = uniqBy(_logs, l => l.logId);
+        if (evt.op === "insert") {
+          let _logs = sortBy([...logs(), log], "timestamp");
+          _logs = uniqBy(_logs, (l) => l.logId);
           logs(_logs);
-          scrollToBottom('smooth');
+          scrollToBottom("smooth");
         }
       });
     });
     return () => {
       sub?.unsubscribe();
     };
-  }, [levelFilter, processFilter]);
-
-  function scrollToBottom(behavior: 'instant' | 'smooth', delay = 100) {
-    setTimeout(() => {
-      logsEndRef.current?.scrollIntoView({ behavior });
-    }, delay);
-  }
+  }, [levelFilter, processFilter, logs, scrollToBottom, searchText, updateLogCount]);
 
   async function handleClearLogs() {
-    if (confirm('Are you sure you want to clear all console logs?')) {
+    if (confirm("Are you sure you want to clear all console logs?")) {
       try {
         const table = await ConsoleLogs();
         await table.deleteOldLogs(Date.now());
         logs([]);
         setTotalLogCount(0);
       } catch (err) {
-        console.error('Failed to clear logs:', err);
+        console.error("Failed to clear logs:", err);
       }
     }
   }
 
-  const _logs = uniqBy(logs(), l => l.logId);
+  const _logs = uniqBy(logs(), (l) => l.logId);
 
   return (
-    <div className="container-fluid" style={{ height: 'calc(100vh - 100px)', display: 'flex', flexDirection: 'column' }}>
+    <div
+      className="container-fluid"
+      style={{ height: "calc(100vh - 100px)", display: "flex", flexDirection: "column" }}
+    >
       <LogFilters
         levelFilter={levelFilter}
         setLevelFilter={setLevelFilter}
@@ -222,12 +255,12 @@ export const ConsoleLogsList = () => {
         ref={containerRef}
         style={{
           flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          backgroundColor: _colorMode === 'dark' ? '#1a1a1a' : '#f8f9fa',
-          borderRadius: '0.25rem',
-          marginBottom: '50px',
-          overflow: 'hidden',
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: _colorMode === "dark" ? "#1a1a1a" : "#f8f9fa",
+          borderRadius: "0.25rem",
+          marginBottom: "50px",
+          overflow: "hidden",
         }}
       >
         {/* Desktop: Resizable table header outside scroll area */}
@@ -244,27 +277,25 @@ export const ConsoleLogsList = () => {
           id="scrollableLogsDiv"
           style={{
             flex: 1,
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column-reverse',
+            overflow: "auto",
+            display: "flex",
+            flexDirection: "column-reverse",
           }}
         >
           <InfiniteScroll
             dataLength={_logs.length}
             next={loadMoreLogs}
-            style={{ display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }}
+            style={{ display: "flex", flexDirection: "column-reverse", overflow: "hidden" }}
             inverse={true}
             hasMore={!allLogsLoaded}
             loader={<LoadingIndicator />}
             scrollableTarget="scrollableLogsDiv"
             endMessage={
-              <Fragment>
-                <div className="d-flex justify-content-center p-3">
-                  <div className="text-muted">
-                    <i>beginning of logs</i>
-                  </div>
+              <div className="d-flex justify-content-center p-3">
+                <div className="text-muted">
+                  <i>beginning of logs</i>
                 </div>
-              </Fragment>
+              </div>
             }
           >
             <div ref={logsEndRef} />
@@ -282,7 +313,10 @@ export const ConsoleLogsList = () => {
               </div>
             ) : (
               /* Desktop: Table layout */
-              <table className="table table-sm table-hover mb-0" style={{ fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' }}>
+              <table
+                className="table table-sm table-hover mb-0"
+                style={{ fontSize: "0.85rem", tableLayout: "fixed", width: "100%" }}
+              >
                 <tbody>
                   {_logs.map((log) => (
                     <LogDisplay key={log.logId} log={log} columns={columns} />
@@ -296,33 +330,30 @@ export const ConsoleLogsList = () => {
 
       <div
         style={{
-          position: 'fixed',
+          position: "fixed",
           bottom: 0,
           left: 0,
           right: 0,
-          padding: '0.5rem 1rem',
-          backgroundColor: _colorMode === 'dark' ? '#2a2a2a' : '#ffffff',
-          borderTop: '1px solid #dee2e6',
+          padding: "0.5rem 1rem",
+          backgroundColor: _colorMode === "dark" ? "#2a2a2a" : "#ffffff",
+          borderTop: "1px solid #dee2e6",
           zIndex: 1000,
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
         }}
       >
         <div className="text-muted small">
           {totalLogCount > 0 ? (
             <>
               <i className="bi bi-list-ul me-1"></i>
-              {totalLogCount} log{totalLogCount !== 1 ? 's' : ''}
+              {totalLogCount} log{totalLogCount !== 1 ? "s" : ""}
             </>
           ) : (
             <span>&nbsp;</span>
           )}
         </div>
-        <button
-          className="btn btn-sm btn-outline-danger"
-          onClick={handleClearLogs}
-        >
+        <button className="btn btn-sm btn-outline-danger" onClick={handleClearLogs}>
           <i className="bi bi-trash me-1"></i>
           Clear All
         </button>
@@ -333,9 +364,11 @@ export const ConsoleLogsList = () => {
 
 registerInternalPeersUI({
   component: ConsoleLogsList,
-  routes: [{
-    isMatch: (_props, context) => context.path === 'console-logs',
-    uiCategory: 'screen',
-    priority: 0,
-  }]
+  routes: [
+    {
+      isMatch: (_props, context) => context.path === "console-logs",
+      uiCategory: "screen",
+      priority: 0,
+    },
+  ],
 });