promptfoo 0.17.6 → 0.17.8

package/src/web/client/src/App.tsx

@@ -14,6 +14,7 @@ function App() {
   const { table, setTable, setConfig } = useStore();
   const [loaded, setLoaded] = React.useState<boolean>(false);
   const loadedFromApi = React.useRef(false);
+  const [recentFiles, setRecentFiles] = React.useState<string[]>([]);
 
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [darkMode, setDarkMode] = React.useState(prefersDarkMode);
@@ -43,6 +44,22 @@ function App() {
     }
   }, [prefersDarkMode]);
 
+  const fetchRecentFiles = async () => {
+    if (!window.location.href.includes('localhost')) {
+      return;
+    }
+    const resp = await fetch(`http://localhost:15500/results`);
+    const body = await resp.json();
+    setRecentFiles(body.data);
+  };
+
+  const handleRecentFileSelection = async (file: string) => {
+    const resp = await fetch(`http://localhost:15500/results/${file}`);
+    const body = await resp.json();
+    setTable(body.data.results.table);
+    setConfig(body.data.config);
+  };
+
   React.useEffect(() => {
     const fetchEvalData = async (id: string) => {
       if (loadedFromApi.current) {
@@ -72,12 +89,14 @@ function App() {
         setLoaded(true);
         setTable(data.results.table);
         setConfig(data.config);
+        fetchRecentFiles();
       });
 
       socket.on('update', (data) => {
         console.log('Received data update', data);
         setTable(data.results.table);
         setConfig(data.config);
+        fetchRecentFiles();
       });
     }
 
@@ -89,7 +108,11 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <NavBar darkMode={darkMode} onToggleDarkMode={toggleDarkMode} />
-      {loaded && table ? <ResultsView /> : <div>Loading...</div>}
+      {loaded && table ? (
+        <ResultsView recentFiles={recentFiles} onRecentFileSelected={handleRecentFileSelection} />
+      ) : (
+        <div>Loading...</div>
+      )}
     </ThemeProvider>
   );
 }

package/src/web/client/src/ResultsView.tsx

@@ -37,7 +37,26 @@ const ResponsiveStack = styled(Stack)(({ theme }) => ({
   },
 }));
 
-export default function ResultsView() {
+function filenameToDate(filename: string) {
+  const dateString = filename.slice('eval-'.length, filename.length - '.json'.length);
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZoneName: 'short',
+  });
+}
+
+interface ResultsViewProps {
+  recentFiles: string[];
+  onRecentFileSelected: (file: string) => void;
+}
+
+export default function ResultsView({ recentFiles, onRecentFileSelected }: ResultsViewProps) {
   const { table, config } = useStore();
   const [maxTextLength, setMaxTextLength] = React.useState(250);
   const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
@@ -148,10 +167,30 @@ export default function ResultsView() {
   return (
     <div>
       <Paper py="md">
-        <ResponsiveStack direction="row" spacing={8} alignItems="center">
+        <ResponsiveStack direction="row" spacing={4} alignItems="center">
+          <Box>
+            {recentFiles && recentFiles.length > 0 && (
+              <FormControl sx={{ m: 1, minWidth: 200 }} size="small">
+                <InputLabel>View run</InputLabel>
+                <Select
+                  key={recentFiles.join(',')}
+                  className="recent-files"
+                  label="Previous runs"
+                  defaultValue={recentFiles[0]}
+                  onChange={(e: SelectChangeEvent) => onRecentFileSelected(e.target.value)}
+                >
+                  {recentFiles.map((file) => (
+                    <MenuItem key={file} value={file}>
+                      {filenameToDate(file)}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          </Box>
           <Box>
             <FormControl sx={{ m: 1, minWidth: 200 }} size="small">
-              <InputLabel id="visible-columns-label">Visible columns</InputLabel>
+              <InputLabel id="visible-columns-label">Show columns</InputLabel>
               <Select
                 labelId="visible-columns-label"
                 id="visible-columns"

package/src/web/server.ts

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import fs, { Stats } from 'fs';
 import path from 'node:path';
 import readline from 'node:readline';
 import http from 'node:http';
@@ -11,7 +11,7 @@ import { Server as SocketIOServer } from 'socket.io';
 
 import logger from '../logger';
 import { getDirectory } from '../esm';
-import { getLatestResultsPath } from '../util';
+import { getLatestResultsPath, listPreviousResults, readResult } from '../util';
 
 export function init(port = 15500) {
   const app = express();
@@ -40,14 +40,37 @@ export function init(port = 15500) {
     socket.emit('init', readLatestJson());
 
     // Watch for changes to latest.json and emit the update event
-    fs.watch(
-      latestJsonPath,
-      debounce((event: string) => {
-        if (event === 'change') {
-          socket.emit('update', readLatestJson());
-        }
-      }, 250),
-    );
+    const watcher = debounce((curr: Stats, prev: Stats) => {
+      if (curr.mtime !== prev.mtime) {
+        socket.emit('update', readLatestJson());
+      }
+    }, 250);
+    fs.watchFile(latestJsonPath, watcher);
+
+    // Stop watching the file when the socket connection is closed
+    socket.on('disconnect', () => {
+      fs.unwatchFile(latestJsonPath, watcher);
+    });
+  });
+
+  app.get('/results', (req, res) => {
+    const previousResults = listPreviousResults();
+    res.json({ data: previousResults });
+  });
+
+  app.get('/results/:filename', (req, res) => {
+    const filename = req.params.filename;
+    const safeFilename = path.basename(filename);
+    if (safeFilename !== filename || !listPreviousResults().includes(safeFilename)) {
+      res.status(400).send('Invalid filename');
+      return;
+    }
+    const result = readResult(safeFilename);
+    if (!result) {
+      res.status(404).send('Result not found');
+      return;
+    }
+    res.json({ data: result });
   });
 
   httpServer.listen(port, () => {