promptfoo 0.8.3 → 0.10.0

package/src/web/client/src/ResultsTable.css

@@ -46,6 +46,17 @@ td,
   padding: 1.5rem;
 }
 
+th.variable,
+.th.variable,
+td.variable,
+.td.variable {
+  background-color: #f8fbff;
+}
+
+tr.header {
+  background-color: #fffdf7;
+}
+
 th,
 .th {
   padding: 1rem;
@@ -103,6 +114,14 @@ td .fail {
   color: var(--fail-color);
 }
 
+.first-prompt-col {
+  border-left: 2px solid #888;
+}
+
+.first-prompt-row {
+  border-top: 2px solid #888;
+}
+
 .resizer {
   position: absolute;
   right: 0;

package/src/web/client/src/ResultsTable.tsx

@@ -148,9 +148,28 @@ export default function ResultsTable({ maxTextLength, columnVisibility }: Result
 
   const columnHelper = createColumnHelper<EvalRow>();
   const columns = [
+    columnHelper.group({
+      id: 'vars',
+      header: () => <span>Variables</span>,
+      columns: head.vars.map((varName, idx) =>
+        columnHelper.accessor((row: EvalRow) => row.vars[idx], {
+          id: `Variable ${idx + 1}`,
+          header: () => (
+            <TableHeader
+              smallText={`Variable ${idx + 1}`}
+              text={varName}
+              maxLength={maxTextLength}
+            />
+          ),
+          cell: (info: CellContext<EvalRow, string>) => (
+            <TruncatedText text={info.getValue()} maxLength={maxTextLength} />
+          ),
+        }),
+      ),
+    }),
     columnHelper.group({
       id: 'prompts',
-      header: () => <span>Prompts</span>,
+      header: () => <span>Outputs</span>,
       columns: head.prompts.map((prompt, idx) =>
         columnHelper.accessor((row: EvalRow) => row.outputs[idx], {
           id: `Prompt ${idx + 1}`,
@@ -176,25 +195,6 @@ export default function ResultsTable({ maxTextLength, columnVisibility }: Result
         }),
       ),
     }),
-    columnHelper.group({
-      id: 'vars',
-      header: () => <span>Variables</span>,
-      columns: head.vars.map((varName, idx) =>
-        columnHelper.accessor((row: EvalRow) => row.vars[idx], {
-          id: `Variable ${idx + 1}`,
-          header: () => (
-            <TableHeader
-              smallText={`Variable ${idx + 1}`}
-              text={varName}
-              maxLength={maxTextLength}
-            />
-          ),
-          cell: (info: CellContext<EvalRow, string>) => (
-            <TruncatedText text={info.getValue()} maxLength={maxTextLength} />
-          ),
-        }),
-      ),
-    }),
   ];
 
   const reactTable = useReactTable({
@@ -212,7 +212,7 @@ export default function ResultsTable({ maxTextLength, columnVisibility }: Result
     <table>
       <thead>
         {reactTable.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id}>
+          <tr key={headerGroup.id} className="header">
             {headerGroup.headers.map((header) => (
               <th
                 {...{
@@ -239,22 +239,36 @@ export default function ResultsTable({ maxTextLength, columnVisibility }: Result
         ))}
       </thead>
       <tbody>
-        {reactTable.getRowModel().rows.map((row) => (
-          <tr key={row.id}>
-            {row.getVisibleCells().map((cell) => (
-              <td
-                {...{
-                  key: cell.id,
-                  style: {
-                    width: cell.column.getSize(),
-                  },
-                }}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </td>
-            ))}
-          </tr>
-        ))}
+        {reactTable.getRowModel().rows.map((row, rowIndex) => {
+          let colBorderDrawn = false;
+          return (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => {
+                const isVariableCol = cell.column.id.startsWith('Variable');
+                const shouldDrawColBorder = !isVariableCol && !colBorderDrawn;
+                if (shouldDrawColBorder) {
+                  colBorderDrawn = true;
+                }
+                const shouldDrawRowBorder = rowIndex === 0 && !isVariableCol;
+                return (
+                  <td
+                    {...{
+                      key: cell.id,
+                      style: {
+                        width: cell.column.getSize(),
+                      },
+                      className: `${isVariableCol ? 'variable' : ''} ${
+                        shouldDrawRowBorder ? 'first-prompt-row' : ''
+                      } ${shouldDrawColBorder ? 'first-prompt-col' : ''}`,
+                    }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
       </tbody>
     </table>
   );

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

@@ -35,8 +35,8 @@ export default function ResultsView() {
     setSelectedColumns(typeof value === 'string' ? value.split(',') : value);
 
     const allColumns = [
-      ...head.prompts.map((_, idx) => `Prompt ${idx + 1}`),
       ...head.vars.map((_, idx) => `Variable ${idx + 1}`),
+      ...head.prompts.map((_, idx) => `Prompt ${idx + 1}`),
     ];
     const newColumnVisibility: VisibilityState = {};
     allColumns.forEach((col) => {
@@ -48,23 +48,23 @@ export default function ResultsView() {
   };
 
   const columnData = [
-    ...head.prompts.map((_, idx) => ({
-      value: `Prompt ${idx + 1}`,
-      label: `Prompt ${idx + 1}`,
-      group: 'Prompts',
-    })),
     ...head.vars.map((_, idx) => ({
       value: `Variable ${idx + 1}`,
       label: `Variable ${idx + 1}`,
       group: 'Variables',
     })),
+    ...head.prompts.map((_, idx) => ({
+      value: `Prompt ${idx + 1}`,
+      label: `Prompt ${idx + 1}`,
+      group: 'Prompts',
+    })),
   ];
 
   // Set all columns as selected by default
   React.useEffect(() => {
     setSelectedColumns([
-      ...head.prompts.map((_, idx) => `Prompt ${idx + 1}`),
       ...head.vars.map((_, idx) => `Variable ${idx + 1}`),
+      ...head.prompts.map((_, idx) => `Prompt ${idx + 1}`),
     ]);
   }, [head]);
 

package/src/web/server.ts

@@ -10,9 +10,9 @@ import opener from 'opener';
 import { Server as SocketIOServer } from 'socket.io';
 
 import promptfoo from '../index.js';
-import logger from '../logger.js';
-import { getDirectory } from '../esm.js';
-import { getLatestResultsPath } from '../util.js';
+import logger from '../logger';
+import { getDirectory } from '../esm';
+import { getLatestResultsPath } from '../util';
 
 import type { Request, Response } from 'express';
 

package/dist/web/client/assets/index-207192fc.css

@@ -1 +0,0 @@
-:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--background-color: #ffffff;--text-color: #404040;--border-color: lightgray;--table-border-color: lightgray;--pass-color: green;--fail-color: #ad0000;--smalltext-color: gray}@media (prefers-color-scheme: dark){:root{--background-color: #1a1a1a;--text-color: #f0f0f0;--border-color: #444444;--table-border-color: #444444;--pass-color: #4caf50;--fail-color: #f44336;--smalltext-color: #888888}}[data-theme=dark]{--background-color: #1a1a1a;--text-color: #f0f0f0;--border-color: #444444;--table-border-color: #444444;--pass-color: #4caf50;--fail-color: #f44336;--smalltext-color: #888888}html{font-size:calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)))}*{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:16px;background-color:var(--background-color);color:var(--text-color)}table,.divTable{border:1px solid var(--table-border-color);border-collapse:collapse;width:100%;margin:1rem 0;box-shadow:0 2px 4px #0000001a}.tr{display:flex}tr,.tr{width:fit-content}tr:hover,.tr:hover{background-color:#0000000d}th,.th,td,.td{position:relative;box-shadow:inset 0 0 0 1px var(--border-color);word-break:break-all;vertical-align:top;padding:1.5rem}th,.th{padding:1rem;position:relative;text-align:center;font-weight:semi-bold}tr .cell-rating{visibility:hidden;position:absolute;bottom:1.25rem;right:-1rem;line-height:0;font-size:1.75rem}tr:hover .cell-rating{visibility:visible}tr .cell-rating .rating{cursor:pointer;margin-right:1rem}th .smalltext{visibility:hidden;font-weight:400;font-size:.75rem;color:var(--smalltext-color)}th:hover .smalltext{visibility:visible}td .status{margin-bottom:.5rem;font-weight:700}td .pass{color:var(--pass-color)}td .fail{color:var(--fail-color)}.resizer{position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;background:var(--text-color);opacity:.5}.resizer.isResizing{background:var(--text-color);opacity:1}@media (hover: hover){.resizer{opacity:0}*:hover>.resizer{opacity:1}}.logo{display:flex;align-items:center;gap:4px}.logo img{width:30px}.logo span{margin-bottom:6px;color:var(--text-color)}[data-theme=dark] .logo img{filter:invert(1)}nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;color:var(--text-color)}.dark-mode-toggle{background-color:transparent;border:none;color:var(--text-color);cursor:pointer;font-size:16px;padding:8px;transition:color .3s}.dark-mode-toggle:hover{color:var(--pass-color)}body{background-color:var(--background-color);color:var(--text-color)}