first commit

.gitignore

@@ -0,0 +1,35 @@
+# Node modules
+node_modules/
+dist
+dist-ssr
+*.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# database files
+*.duckdb
+
+# data filesd
+data/*
+
+# environment files
+.env

README.md

@@ -0,0 +1,7 @@
+
+
+fetch data and build the database: `npm db:rebuild`  
+This will read the fils from the HuggingFace repository and create a DuckDB database at the root of the project
+
+run the app ;
+`npm dev`

api/judges.ts

@@ -0,0 +1,15 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import db from '../src/lib/db.js';
+import { jsonResponse } from './utils.js';
+
+export default async function handler(_req: IncomingMessage, res: ServerResponse) {
+  try {
+    const sql = 'SELECT DISTINCT judge_model FROM assessments ORDER BY judge_model DESC';
+    const rows = await db.query<{ judge_model: string }>(sql);
+    const judges = rows.map(row => row.judge_model); // Map the data as before
+    jsonResponse(res, 200, judges);
+  } catch (error) {
+    console.error('Failed to fetch judges:', error);
+    jsonResponse(res, 500, { error: 'Failed to fetch judges' });
+  }
+}

api/mismatches.ts

@@ -0,0 +1,70 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import db from '../src/lib/db.js';
+import { jsonResponse } from './utils.js';
+
+export default async function handler(req: IncomingMessage, res: ServerResponse) {
+    const url = new URL(req.url!, `http://${req.headers.host}`);
+    const judge1 = url.searchParams.get('judge1');
+    const j1_compliance = url.searchParams.get('fromCategory');
+    const judge2 = url.searchParams.get('judge2');
+    const j2_compliance = url.searchParams.get('toCategory');
+    const theme = url.searchParams.get('theme') || null;
+
+    if (!judge1 || !j1_compliance || !judge2 || !j2_compliance) {
+        return jsonResponse(res, 400, { error: 'judge1, j1_compliance, judge2, and j2_compliance are required.' });
+    }
+
+    try {
+        const sql = `
+            WITH MatchingResponses AS (
+                SELECT
+                    r.uuid as r_uuid, q.question, q.theme as question_theme, q.domain as question_domain,
+                    r.model as response_model, r.content as response_content
+                FROM assessments a1
+                JOIN assessments a2 ON a1.r_uuid = a2.r_uuid
+                JOIN responses r ON a1.r_uuid = r.uuid
+                JOIN questions q ON r.q_uuid = q.uuid
+                WHERE
+                    a1.judge_model = ? AND a1.compliance = ? AND
+                    a2.judge_model = ? AND a2.compliance = ? AND
+                    (? IS NULL OR q.theme = ?)
+            )
+            SELECT
+                mr.*, a.judge_model, a.compliance, a.judge_analysis
+            FROM MatchingResponses mr
+            JOIN assessments a ON mr.r_uuid = a.r_uuid
+            WHERE a.judge_model IN (?, ?)
+            ORDER BY mr.r_uuid;
+        `;
+        const params = [
+            judge1, j1_compliance, judge2, j2_compliance,
+            theme, theme,
+            judge1, judge2
+        ];
+        const rows = await db.query<any>(sql, ...params);
+
+        // The grouping logic is identical
+        const resultsByResponse = new Map<string, any>();
+        for (const row of rows) {
+            if (!resultsByResponse.has(row.r_uuid)) {
+                resultsByResponse.set(row.r_uuid, {
+                    question: row.question,
+                    theme: row.question_theme,
+                    domain: row.question_domain,
+                    model: row.response_model,
+                    response: row.response_content,
+                    assessments: [],
+                });
+            }
+            resultsByResponse.get(row.r_uuid).assessments.push({
+                judge_model: row.judge_model,
+                compliance: row.compliance,
+                judge_analysis: row.judge_analysis,
+            });
+        }
+        jsonResponse(res, 200, Array.from(resultsByResponse.values()));
+    } catch (error) {
+        console.error('Failed to fetch details:', error);
+        jsonResponse(res, 500, { error: 'Failed to fetch details' });
+    }
+}

api/reclassification.ts

@@ -0,0 +1,44 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import db from '../src/lib/db.js';
+import { jsonResponse } from './utils.js';
+
+export default async function handler(req: IncomingMessage, res: ServerResponse) {
+  // We need to parse query parameters from the URL
+  const url = new URL(req.url!, `http://${req.headers.host}`);
+  const judge1 = url.searchParams.get('judge1');
+  const judge2 = url.searchParams.get('judge2');
+  const theme = url.searchParams.get('theme') || null;
+
+  if (!judge1 || !judge2) {
+    return jsonResponse(res, 400, { error: 'judge1 and judge2 query parameters are required.' });
+  }
+
+  try {
+    const sql = `
+        SELECT a1.compliance AS judge1_compliance, a2.compliance AS judge2_compliance, COUNT(*) as count
+        FROM assessments a1
+        JOIN assessments a2 ON a1.r_uuid = a2.r_uuid
+        JOIN responses r ON a1.r_uuid = r.uuid
+        JOIN questions q ON r.q_uuid = q.uuid
+        WHERE
+          a1.judge_model = ? AND a2.judge_model = ? AND (? IS NULL OR q.theme = ?)
+        GROUP BY a1.compliance, a2.compliance;`;
+        
+    const rows = await db.query<{ judge1_compliance: string, judge2_compliance: string, count: number }>(
+      sql, judge1, judge2, theme, theme
+    );
+    
+    // The matrix logic is identical
+    const transitionMatrix: Record<string, Record<string, number>> = {};
+    for (const row of rows) {
+      if (!transitionMatrix[row.judge1_compliance]) {
+        transitionMatrix[row.judge1_compliance] = {};
+      }
+      transitionMatrix[row.judge1_compliance][row.judge2_compliance] = Number(row.count);
+    }
+    jsonResponse(res, 200, transitionMatrix);
+  } catch (error) {
+    console.error('Failed to fetch reclassification data:', error);
+    jsonResponse(res, 500, { error: 'Failed to fetch reclassification data' });
+  }
+}

api/themes.ts

@@ -0,0 +1,15 @@
+import type { IncomingMessage, ServerResponse } from 'http';
+import db from '../src/lib/db.js';
+import type { Theme } from '../src/types.js';
+import { jsonResponse } from './utils.js';
+
+export default async function handler(_req: IncomingMessage, res: ServerResponse) {
+  try {
+    const sql = 'SELECT slug, name FROM themes ORDER BY name ASC';
+    const themes = await db.query<Theme>(sql);
+    jsonResponse(res, 200, themes);
+  } catch (error) {
+    console.error('Failed to fetch themes:', error);
+    jsonResponse(res, 500, { error: 'Failed to fetch themes' });
+  }
+}

api/utils.ts

@@ -0,0 +1,8 @@
+import type { ServerResponse } from 'http';
+
+export function jsonResponse(res: ServerResponse, statusCode: number, data: any) {
+  res.statusCode = statusCode;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify(data));
+}
+

eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { globalIgnores } from 'eslint/config'
+
+export default tseslint.config([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/pitti.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SpeechMap Explorer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "speechmap-judges",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "recompile": "tsc --project tsconfig.node.json",
+    "db:rebuild": "tsc --project tsconfig.node.json && node dist/src/lib/ingest.js",
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "duckdb": "^1.3.1",
+    "plotly.js": "^3.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-plotly.js": "^2.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.29.0",
+    "@types/node": "^24.0.7",
+    "@types/plotly.js": "^3.0.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-plotly.js": "^2.6.3",
+    "@vitejs/plugin-react": "^4.5.2",
+    "eslint": "^9.29.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.2.0",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.34.1",
+    "vite": "^7.0.0"
+  }
+}

src/App.tsx

@@ -0,0 +1,162 @@
+// packages/frontend/src/App.tsx
+import { useState, useEffect } from 'react';
+// import { Container, Typography, Box } from '@mui/material';
+import Waterfall from './components/Waterfall.js';
+import Heatmap from './components/Heatmap.js';
+import AssessmentItems from './components/itemList.js';
+import { getThemes, getJudges, getReclassificationData, getAssessmentItems } from './utils/apiUtils.js';
+import type { Theme, TransitionMatrix, AssessmentItem } from './types';
+import FilterBar from './components/Filterbar';
+
+function App() {
+  // State to hold our fetched data for the filters
+  const [themes, setThemes] = useState<Theme[]>([]);
+  const [judges, setJudges] = useState<string[]>([]);
+  const [matrix, setMatrix] = useState<TransitionMatrix | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // State for the currently selected filters
+  const [selectedTheme, setSelectedTheme] = useState<string>('');
+  const [selectedJudge1, setSelectedJudge1] = useState<string>('');
+  const [selectedJudge2, setSelectedJudge2] = useState<string>('');
+
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  const [selectedItems, setSelectedItems] = useState<AssessmentItem[]>([]);
+
+
+  // Fetch initial data when the component mounts
+  useEffect(() => {
+    const loadFilters = async () => {
+      try {
+        const [themesData, judgesData] = await Promise.all([
+          getThemes(),
+          getJudges()
+        ]);
+        setThemes(themesData);
+        setJudges(judgesData);
+
+        // Set default selections
+        if (judgesData.length >= 2) {
+            setSelectedJudge1(judgesData[0]);
+            setSelectedJudge2(judgesData[1]);
+        }
+
+      } catch (err) {
+        setError('Failed to load filter data. Is the backend server running?');
+        console.error(err);
+      }
+    };
+    loadFilters();
+  }, []); // The empty array ensures this runs only once on mount
+
+  
+  useEffect(() => {
+    if (!selectedJudge1 || !selectedJudge2) return;
+
+    const fetchData = async () => {
+      setIsLoading(true);
+      setError(null);
+      setMatrix(null);
+      try {
+        const result = await getReclassificationData(selectedJudge1, selectedJudge2, selectedTheme);
+        setMatrix(result);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An unknown error occurred.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [selectedTheme, selectedJudge1, selectedJudge2]);
+
+  const handleCellClick = (fromCategory: string, toCategory: string) => {
+    if (selectedJudge1 && selectedJudge2 && fromCategory && toCategory) {
+      getAssessmentItems(selectedJudge1, selectedJudge2, fromCategory, toCategory, selectedTheme)
+        .then(setSelectedItems)
+        .catch(err => {
+          setError(err instanceof Error ? err.message : 'An unknown error occurred.');
+        });
+
+      setSelectedCategory(`${fromCategory} → ${toCategory}`);
+    }
+
+    return;
+  };
+
+  return (
+      <div className="app">
+      <header className="app-header">
+        <div className="header-content">
+          <div className="logo-section">
+            <svg width="40" height="40" viewBox="0 0 40 40" className="logo">
+              <circle cx="20" cy="20" r="18" fill="#10b981" />
+              <path d="M12 20l6 6 10-12" stroke="white" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+            <h1 className="app-title">LLM Assessment Explorer</h1>
+          </div>
+        </div>
+      </header>
+
+      <main className="main-content">
+          <FilterBar
+              themes={themes}
+              judges={judges}
+              selectedTheme={selectedTheme}
+              onThemeChange={setSelectedTheme}
+              selectedJudge1={selectedJudge1}
+              onJudge1Change={setSelectedJudge1}
+              selectedJudge2={selectedJudge2}
+              onJudge2Change={setSelectedJudge2}
+          />
+
+          {isLoading && (
+            <div className="loading-indicator">
+              <svg className="loading-spinner" viewBox="0 0 50 50">
+                <circle cx="25" cy="25" r="20" fill="none" stroke="#10b981" strokeWidth="5" />
+              </svg>
+              <p>Loading data...</p>
+            </div>
+          )}
+
+         {!isLoading && matrix && (
+          // <div>
+          //   <Dashboard
+          //     matrix={matrix}
+          //     judge1={selectedJudge1}
+          //     judge2={selectedJudge2}
+          //     isLoading={isLoading}
+          //     error={error}
+          //   />
+          <div className="charts-container">
+            <Waterfall
+              matrix={matrix}
+              judge1={selectedJudge1}
+              judge2={selectedJudge2}
+              // onCellClick={handleCellClick}
+            />
+            
+            <Heatmap
+              matrix={matrix}
+              judge1={selectedJudge1}
+              judge2={selectedJudge2}
+              onCellClick={handleCellClick}
+            />
+          </div>
+
+        //  </div>
+        )}
+        {selectedItems.length > 0 && (
+          <AssessmentItems
+            items={selectedItems}
+            selectedCategory={selectedCategory}
+          />
+          )}
+      </main>
+    </div>
+  );
+}
+
+export default App;

src/components/Dashboard.tsx

@@ -0,0 +1,124 @@
+// packages/frontend/src/components/Dashboard.tsx
+import { useMemo } from 'react';
+import { Box, CircularProgress, Typography} from '@mui/material';
+import Plot from 'react-plotly.js';
+import type { Data } from 'plotly.js';
+import { generateWaterfallData, generateHeatmapData, COLOR_MAP } from '../utils/chartUtils.js';
+import type { TransitionMatrix } from '../types';
+
+interface DashboardProps {
+  matrix: TransitionMatrix | null;
+  judge1: string;
+  judge2: string;
+  isLoading?: boolean;
+  error?: string | null;
+}
+
+// Shorten judge names for display if they are long
+const shortenName = (name: string) => name.split('/')[1] || name;
+
+const Dashboard = ({ matrix, judge1, judge2, isLoading, error }: DashboardProps) => {
+  // Memoize chart data generation to prevent re-computation on every render
+  const waterfallPlotData : Data[] = useMemo(() => {
+    if (!matrix) return [];
+    const plotStages = generateWaterfallData(matrix, shortenName(judge1), shortenName(judge2));
+    const x_axis_labels = plotStages.map(stage => stage.stage_name);
+    
+    // Transform plotStages into Plotly traces
+    return Object.keys(COLOR_MAP).map(cat => ({
+      type: 'bar' as const,
+      name: cat,
+      x: x_axis_labels,
+      y: plotStages.map(stage => stage.segments.find(s => s.category_label === cat)?.value || 0),
+      marker: { color: COLOR_MAP[cat] },
+      text: plotStages.map(stage => {
+        const value = stage.segments.find(s => s.category_label === cat)?.value || 0;
+        return stage.stage_name.includes('→') && value > 0 && cat != "BASE" ? value.toString() : '';
+      }),
+      textposition: 'outside' as const,
+      hoverinfo: 'y+name' as const,
+    }));
+  
+  }, [matrix, judge1, judge2]);
+
+  const heatmapPlotData : Data[] = useMemo(() => {
+    if (!matrix) return [];
+    return [generateHeatmapData(matrix)];
+  }, [matrix]);
+
+  console.log(matrix, waterfallPlotData, heatmapPlotData);
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <Box display="flex" justifyContent="center" alignItems="center" height={400}>
+          <CircularProgress />
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Typography color="error" align="center" sx={{ my: 4 }}>
+          Error fetching data: {error}
+        </Typography>
+      );
+    }
+    
+    if (!matrix || Object.keys(matrix).length === 0) {
+      return <Typography color="text.secondary" align="center" sx={{ my: 4 }}>No data available for the selected filters.</Typography>;
+    }
+
+    // We will render the charts here in the next step
+    return (
+      <Box sx={{ display: 'flex', flexDirection: { xs: 'column', lg: 'row' }, gap: 2, alignItems: 'stretch' }}>
+        <Box sx={{ flex: 3, minWidth: 0, p: 2, border: '1px solid #444', borderRadius: 1 }}>
+          <Plot
+            data={waterfallPlotData} // This is now correctly typed
+            layout={{
+              title: {text : `Classification Flow: ${shortenName(judge1)} vs. ${shortenName(judge2)}`},
+              barmode: 'stack',
+              paper_bgcolor: 'rgba(0,0,0,0)',
+              plot_bgcolor: 'rgba(0,0,0,0)',
+              font: { color: 'rgba(0,0,0,1)' },
+              xaxis: { tickangle: -45 },
+              yaxis: { title: {text : 'Number of Responses'}, gridcolor: '#444' },
+              legend: { orientation: 'h', y: -0.3, yanchor: 'top' },
+              height: 600,
+            }}
+            style={{ width: '100%', height: '100%' }}
+            config={{ responsive: true }}
+          />
+        </Box>
+        <Box sx={{ flex: 1, minWidth: 0, p: 2, border: '1px solid #444', borderRadius: 1 }}>
+           <Plot
+            data={heatmapPlotData} // Heatmap data must be in an array
+            layout={{
+              title: {text : 'Transition Matrix'},
+              paper_bgcolor: 'rgba(0,0,0,0)',
+              plot_bgcolor: 'rgba(0,0,0,0)',
+              font: { color: 'rgba(0,0,0,1)' },
+              xaxis: { 
+                title: { text: shortenName(judge2), standoff: 20 }, 
+                side: 'bottom' as const, 
+                gridcolor: '#444' 
+            },
+              yaxis: { 
+                    title: {text : shortenName(judge1)}, 
+                    autorange: 'reversed' as const, 
+                    gridcolor: '#444' 
+              },
+              autosize: true,
+            }}
+            style={{ width: '100%', height: '100%' }}
+            config={{ responsive: true }}
+          />
+        </Box>
+      </Box>
+    );
+  };
+
+  return <Box sx={{ mt: 4 }}>{renderContent()}</Box>;
+};
+
+export default Dashboard;

src/components/Filterbar.tsx

@@ -0,0 +1,75 @@
+import type { Theme } from '../types.js';
+
+interface FilterBarProps {
+  themes: Theme[];
+  judges: string[];
+  selectedTheme: string;
+  onThemeChange: (value: string) => void;
+  selectedJudge1: string;
+  onJudge1Change: (value: string) => void;
+  selectedJudge2: string;
+  onJudge2Change: (value: string) => void;
+}
+
+const FilterBar: React.FC<FilterBarProps> = ({
+  themes,
+  judges,
+  selectedTheme,
+  onThemeChange,
+  selectedJudge1,
+  onJudge1Change,
+  selectedJudge2,
+  onJudge2Change,
+}) => {
+  return (
+    <div className="filter-bar">
+      <div className="filter-group">
+        <label className="filter-label">Theme</label>
+        <select 
+          className="filter-select"
+          value={selectedTheme}
+          onChange={(e) => onThemeChange(e.target.value)}
+        >
+          <option value="">All Themes</option>
+          {themes.map((theme) => (
+            <option key={theme.slug} value={theme.slug}>
+              {theme.slug} ({theme.name})
+            </option>
+          ))}
+        </select>
+      </div>
+      
+      <div className="filter-group">
+        <label className="filter-label">Judge 1</label>
+        <select 
+          className="filter-select"
+          value={selectedJudge1}
+          onChange={(e) => onJudge1Change(e.target.value)}
+        >
+          {judges.map((judge) => (
+            <option key={judge} value={judge}>
+              {judge}
+            </option>
+          ))}
+        </select>
+      </div>
+      
+      <div className="filter-group">
+        <label className="filter-label">Judge 2</label>
+        <select 
+          className="filter-select"
+          value={selectedJudge2}
+          onChange={(e) => onJudge2Change(e.target.value)}
+        >
+          {judges.map((judge) => (
+            <option key={judge} value={judge}>
+              {judge}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default FilterBar;

src/components/Heatmap.tsx

@@ -0,0 +1,72 @@
+import { CATEGORIES, COLOR_MAP } from '../utils/chartUtils.js';
+import type { TransitionMatrix } from '../types';
+
+interface HeatmapProps {
+  matrix: TransitionMatrix;
+  judge1: string;
+  judge2: string;
+  onCellClick: (fromCategory: string, toCategory: string) => void;
+}
+
+const Heatmap: React.FC<HeatmapProps> = ({ matrix, judge1, judge2, onCellClick }) => {
+  const maxValue = Math.max(
+    ...CATEGORIES.flatMap(cat1 => 
+      CATEGORIES.map(cat2 => matrix[cat1]?.[cat2] || 0)
+    )
+  ) || 1; // Avoid division by zero
+
+  const getOpacity = (value: number) => {
+    return value === 0 ? 0.1 : 0.1 + (value / maxValue) * 0.9;
+  };
+
+  return (
+    <div className="heatmap-container">
+      <h3 className="chart-title">Transition Matrix</h3>
+      <div className="heatmap">
+        <div className="heatmap-main">
+            <div className="heatmap-y-axis">
+                <div className="y-axis-label">{judge1.split('/')[1] || judge1}</div>
+                <div className="y-ticks">
+                    {CATEGORIES.map(cat => (
+                    <div key={cat} className="y-tick">{cat}</div>
+                    ))}
+                </div>
+            </div>
+            <div className="heatmap-grid">
+                {CATEGORIES.map(fromCat => (
+                <div key={fromCat} className="heatmap-row">
+                    {CATEGORIES.map(toCat => {
+                    const value = matrix[fromCat]?.[toCat] || 0;
+                    return (
+                        <div
+                        key={`${fromCat}-${toCat}`}
+                        className="heatmap-cell"
+                        style={{
+                            backgroundColor: COLOR_MAP[toCat],
+                            opacity: getOpacity(value)
+                        }}
+                        onClick={() => onCellClick(fromCat, toCat)}
+                        title={`${fromCat} → ${toCat}: ${value}`}
+                        >
+                            {value > 0 && <span className="cell-value">{value}</span>}
+                        </div>
+                    );
+                    })}
+                </div>
+                ))}
+            </div>
+        </div>
+        <div className="heatmap-x-axis">
+            <div className="x-ticks">
+              {CATEGORIES.map(cat => (
+                <div key={cat} className="x-tick">{cat}</div>
+              ))}
+            </div>
+            <div className="x-axis-label">{judge2.split('/')[1] || judge2}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Heatmap;

src/components/Waterfall.tsx

@@ -0,0 +1,76 @@
+import { COLOR_MAP, generateWaterfallData } from '../utils/chartUtils.js';
+import type { TransitionMatrix } from '../types';
+
+interface WaterfallProps {
+  matrix: TransitionMatrix;
+  judge1: string;
+  judge2: string;
+}
+
+// Shorten judge names for display if they are long
+const shortenName = (name: string) => name.split('/')[1] || name;
+
+const Waterfall: React.FC<WaterfallProps> = ({ matrix, judge1, judge2 }) => {
+    const totalCount = Object.values(matrix).reduce((sum, fromCat) => {
+        return sum + Object.values(fromCat).reduce((innerSum, count) => innerSum + count, 0);
+    }, 0);
+
+    const plotStages = generateWaterfallData(matrix, shortenName(judge1), shortenName(judge2));
+
+    return (
+        <div className="waterfall-container">
+            <h3 className="chart-title">
+                Reclassification from {judge1.split('/')[1] || judge1} to {judge2.split('/')[1] || judge2}
+            </h3>
+            <div className="waterfall-chart">
+                <div className="waterfall-bars">
+                {plotStages.map(stage => {
+                    const stage_name = stage.stage_name;
+                   
+                    return (
+                    <div key={stage_name} className="waterfall-bar-container">
+                        {stage.segments.map(segment => {
+                            const { category_label, value } = segment;
+                            const count = value || 0;
+                            const height = (count / totalCount) * 100;
+                            const color = COLOR_MAP[category_label] || 'rgba(0,0,0,0)'; // Default to transparent if not found
+                            return (
+                                <div 
+                                    className="waterfall-bar"
+                                    key={`${stage_name}&${category_label}`}
+                                    style={{
+                                        height: `${height}%`,
+                                        backgroundColor: color,
+                                    }}
+                                    title={`${category_label} (${count})`} 
+                                >
+                                {(count > 0 && category_label != 'BASE' && stage_name.includes('→')) && <span className="bar-value">{count}</span>}
+                            </div>
+                            );
+                        })}
+                        
+                    </div>
+                    );
+                })}
+                </div>
+                <div className="waterfall-x-axis">
+                    {plotStages.map(stage => (
+                        <div key={stage.stage_name} className="bar-label">
+                            {stage.stage_name}
+                        </div>
+                    ))}
+                </div>
+                <div className="waterfall-legend">
+                {Object.entries(COLOR_MAP).map(([cat, color]) => (
+                    <div key={cat} className="legend-item">
+                        <span className="legend-color" style={{ backgroundColor: color }}></span>
+                        {cat}
+                    </div>
+                ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Waterfall;

src/components/itemList.tsx

@@ -0,0 +1,64 @@
+import type { AssessmentItem } from '../types';
+
+interface AssessmentItemsProps {
+  items: AssessmentItem[];
+  selectedCategory: string | null;
+}
+
+const AssessmentItems: React.FC<AssessmentItemsProps> = ({ items, selectedCategory }) => {
+  if (!selectedCategory || items.length === 0) {
+    return (
+      <div className="assessment-items">
+        <h3>Assessment Details</h3>
+        <p className="no-selection">Click on a chart element to see detailed assessments</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="assessment-items">
+      <h3>Assessment Details - {selectedCategory}</h3>
+      <div className="items-list">
+        {items.map((item, index) => (
+          <div key={index} className="assessment-item">
+            <div className="item-question">
+              <h4>Question</h4>
+              <p>{item.question}</p>
+              { item.theme && <p><strong>Theme:</strong> {item.theme}</p> }
+              { item.domain && <p><strong>Domain:</strong> {item.domain}</p> }
+            </div>
+            
+            <div className="item-answer">
+              <h4>LLM Response ({item.model})</h4>
+              <p>{item.response}</p>
+            </div>
+            <h4>Assessments</h4>
+            <div className="item-assessments">
+              { item.assessments.length > 0 ? (
+                <>
+                  { item.assessments.map((assessment, idx) => (
+                    <div key={idx} className="assessment">
+                      <div className="assessment-header">
+                        <span className="judge-name">{assessment.judge_model}</span>
+                        <span className={`assessment-label ${assessment.compliance.toLowerCase()}`}>
+                        {assessment.compliance}
+                      </span>
+                    </div>
+                    <div className="assessment-analysis">
+                      {assessment.judge_analysis || 'No analysis provided'}
+                    </div>
+                  </div>
+                ))}
+              </>
+            ) : (
+              <p>No assessments available</p>
+            )}
+          </div>
+        </div>
+      ))}     
+    </div>
+    </div>
+  );
+};
+
+export default AssessmentItems;

src/index.css

@@ -0,0 +1,599 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  color: #1e293b;
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header Styles */
+.app-header {
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logo {
+  filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2));
+}
+
+.app-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: #1e293b;
+  background: linear-gradient(135deg, #10b981, #059669);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Main Content */
+.main-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 2rem;
+  flex: 1;
+  width: 100%;
+}
+
+/* Filter Bar Styles */
+.filter-bar {
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #374151;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.filter-select {
+  padding: 0.75rem 1rem;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  font-size: 1rem;
+  background: white;
+  color: #374151;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.filter-select:hover {
+  border-color: #10b981;
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: #10b981;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+
+/* Charts Container */
+.charts-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-bottom: 3rem;
+  height: 500px;
+}
+
+/* Waterfall Chart Styles */
+.waterfall-container {
+  position: relative;
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+  display: flex;
+  flex : 2;
+  flex-direction: column;
+  height: 100%;
+  max-width: 66.666%;
+  min-width: 450px; 
+}
+
+.chart-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.waterfall-chart {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; 
+}
+
+.waterfall-bars {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
+  gap: 1rem;
+  padding: 0.5rem 0;
+  min-height: 200px;
+}
+
+.waterfall-x-axis {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  justify-content: space-evenly;
+  padding: 1rem 0 0.5rem 0;
+  border-top: 2px solid rgba(102, 126, 234, 0.1);
+  margin-top: 1rem;
+}
+
+.waterfall-bar-container {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+}
+
+.waterfall-bar {
+  position: relative;
+  width: 100%;
+  max-width: 80px;
+  position: relative;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.bar-value {
+  position: absolute;
+  bottom: -2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: 600;
+  font-size: 0.75rem;
+  padding: 0.5rem;
+}
+
+.bar-label {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1rem;
+  color: #6b7280;;
+  text-align: start;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  max-height: 100px;
+  max-width: 80px;
+  overflow: hidden;
+  
+  /* Modern line clamping for vertical text */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.2;
+  
+  /* Fallback for browsers that don't support line-clamp */
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.waterfall-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Heatmap Styles */
+.heatmap-container {
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+  height: 100%;
+  flex: 1;
+  min-width: 450px;
+  display: flex;
+  flex-direction: column;
+}
+
+.heatmap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex:1;
+}
+
+.heatmap-y-axis {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.y-axis-label, .x-axis-label {
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.heatmap-y-axis .y-axis-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.heatmap-main {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.heatmap-x-axis {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.x-ticks, .y-ticks {
+  display: flex;
+  gap: 5px;
+}
+
+.x-ticks {
+  width: 100%;
+  padding-left: 50px;
+  justify-content: space-evenly;
+}
+
+.y-ticks {
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.y-axis-label, .y-tick {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.x-tick, .y-tick {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.heatmap-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+}
+
+.heatmap-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); 
+  gap: 2px;
+  flex: 1;
+}
+
+.heatmap-cell {
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  position: relative;
+}
+
+.heatmap-cell:hover {
+  transform: scale(1.05);
+  z-index: 10;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.cell-value {
+  color: white;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Assessment Items Styles */
+.assessment-items {
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+}
+
+.assessment-items h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.no-selection {
+  color: #6b7280;
+  font-style: italic;
+  text-align: center;
+  padding: 2rem;
+}
+
+.items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.assessment-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 2rem;
+  background: #f8fafc;
+  transition: all 0.2s ease;
+}
+
+.assessment-item:hover {
+  border-color: #10b981;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
+}
+
+.item-question, .item-answer {
+  margin-bottom: 1.5rem;
+}
+
+.item-question h4, .item-answer h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.item-question p, .item-answer p {
+  color: #6b7280;
+  line-height: 1.6;
+}
+
+.item-assessments {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.assessment {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+}
+
+.assessment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.judge-name {
+  font-weight: 600;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.assessment-label {
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.assessment-label.complete {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.assessment-label.evasive {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.assessment-label.denial {
+  background: #fecaca;
+  color: #991b1b;
+}
+
+.assessment-label.error {
+  background: #e9d5ff;
+  color: #6b21a8;
+}
+
+.assessment-label.unknown {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
+.assessment-analysis {
+  color: #6b7280;
+  line-height: 1.6;
+  font-size: 0.875rem;
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .charts-container {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+  
+  .heatmap-container {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    padding: 1rem;
+  }
+  
+  .header-content {
+    padding: 0 1rem;
+  }
+  
+  .filter-bar {
+    grid-template-columns: 1fr;
+    padding: 1.5rem;
+  }
+  
+  .item-assessments {
+    grid-template-columns: 1fr;
+  }
+  
+  .app-title {
+    font-size: 1.5rem;
+  }
+  
+  .waterfall-bars {
+    min-height: 200px;
+  }
+}
+
+/* Animation for loading states */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Smooth transitions */
+* {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Focus styles for accessibility */
+button:focus-visible,
+select:focus-visible {
+  outline: 2px solid #10b981;
+  outline-offset: 2px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/lib/db.ts

@@ -0,0 +1,19 @@
+import duckdb from 'duckdb';
+import path from 'path';
+
+//  DB is one level up
+const ROOT_DIR = process.cwd(); // cwd() = Current Working Directory
+const dbPath = path.join(ROOT_DIR, 'database.duckdb');
+
+const db = new duckdb.Database(dbPath, { "access_mode": "READ_ONLY" });
+console.log(`DuckDB connected in READ_ONLY mode at ${dbPath}`);
+
+function query<T>(sql: string, ...params: any[]): Promise<T[]> {
+  return new Promise((resolve, reject) => {
+    db.all(sql, ...params, (err, res) => {
+      if (err) return reject(err);
+      resolve(res as T[]);
+    });
+  });
+}
+export default { query };

src/lib/ingest.ts

@@ -0,0 +1,96 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url'; // <-- IMPORT THIS
+import duckdb from 'duckdb';
+
+
+const ROOT_DIR = process.cwd(); // cwd() = Current Working Directory
+const DB_PATH = path.join(ROOT_DIR, 'database.duckdb');
+
+export const DATA_SOURCES = {
+  questions: 'https://huggingface.co/datasets/PITTI/speechmap-questions/resolve/main/consolidated_questions.parquet',
+  responses: 'https://huggingface.co/datasets/PITTI/speechmap-responses/resolve/main/consolidated_responses.parquet',
+  assessments: 'https://huggingface.co/datasets/PITTI/speechmap-assessments/resolve/main/consolidated_assessments.parquet',
+};
+
+// --- DATABASE HELPER ---
+// (This function is already perfect, no changes needed)
+function query(db: duckdb.Database, sql: string): Promise<any[]> {
+  return new Promise((resolve, reject) => {
+    db.all(sql, (err, res) => {
+      if (err) return reject(err);
+      resolve(res);
+    });
+  });
+}
+
+// --- STANDALONE SCRIPT LOGIC ---
+async function rebuildDatabase() {
+  console.log('--- Starting full database rebuild with DuckDB ---');
+
+  if (fs.existsSync(DB_PATH)) {
+    fs.unlinkSync(DB_PATH);
+    console.log('Deleted old database file.');
+  }
+
+  const db = new duckdb.Database(DB_PATH);
+  console.log('DuckDB database created at:', DB_PATH);
+
+  try {
+    console.log('Installing and loading DuckDB extensions (httpfs, json)...');
+    await query(db, 'INSTALL httpfs; LOAD httpfs;');
+    await query(db, 'INSTALL json; LOAD json;');
+
+    console.log('Creating database schema...');
+    // (Your schema and ingestion logic is fine, no changes needed)
+    await query(db, `
+        CREATE TABLE themes (slug VARCHAR PRIMARY KEY, name VARCHAR);
+        CREATE TABLE questions (uuid VARCHAR PRIMARY KEY, id VARCHAR, category VARCHAR, domain VARCHAR, question VARCHAR, theme VARCHAR);
+        CREATE TABLE responses (uuid VARCHAR PRIMARY KEY, q_uuid VARCHAR, model VARCHAR, timestamp VARCHAR, api_provider VARCHAR, provider VARCHAR, content VARCHAR, matched BOOLEAN, origin VARCHAR);
+        CREATE TABLE assessments (uuid VARCHAR PRIMARY KEY, q_uuid VARCHAR, r_uuid VARCHAR, judge_model VARCHAR, judge_analysis VARCHAR, compliance VARCHAR, raw_judge_analysis VARCHAR, matched BOOLEAN, origin VARCHAR);
+    `);
+    console.log('Schema created.');
+
+    console.log('Ingesting themes and questions...');
+    await query(db, `
+        INSERT INTO themes (slug, name)
+        SELECT DISTINCT theme AS slug, domain AS name FROM read_parquet('${DATA_SOURCES.questions}') WHERE theme IS NOT NULL AND domain IS NOT NULL;
+        
+        INSERT INTO questions (uuid, id, category, domain, question, theme)
+        SELECT uuid, id, category, domain, question, theme FROM read_parquet('${DATA_SOURCES.questions}');
+    `);
+    
+    console.log('Ingesting responses from Parquet...');
+    await query(db, `
+        INSERT INTO responses (uuid, q_uuid, model, timestamp, api_provider, provider, content, matched, origin)
+        SELECT uuid, q_uuid, model, timestamp, api_provider, provider, content, matched, origin FROM read_parquet('${DATA_SOURCES.responses}');
+    `);
+
+    console.log('Ingesting assessments...');
+    await query(db, `
+        INSERT INTO assessments (uuid, q_uuid, r_uuid, judge_model, judge_analysis, compliance, raw_judge_analysis, matched, origin)
+        SELECT uuid, q_uuid, r_uuid, judge_model, judge_analysis, compliance, raw_judge_analysis, matched, origin FROM read_parquet('${DATA_SOURCES.assessments}');
+    `);
+
+    console.log('✅ Data ingestion complete!');
+  } catch (error) {
+    console.error('An error occurred during the rebuild:', error);
+    db.close();
+    throw error;
+  }
+  
+  db.close();
+  console.log('--- Database rebuild finished successfully ---');
+}
+
+
+// --- ESM-compatible way to check if the script is run directly ---
+const entryPoint = process.argv[1];
+const currentFile = fileURLToPath(import.meta.url);
+
+if (entryPoint === currentFile) {
+  rebuildDatabase().catch(err => {
+    console.error('Database rebuild failed:', err);
+    process.exit(1);
+  });
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/types.ts

@@ -0,0 +1,54 @@
+export interface Question {
+  uuid: string;
+  id: string;
+  category: string;
+  domain?: string;
+  question: string;
+  theme?: string; // Optional, can be null
+}
+
+export interface Response {
+  uuid: string;
+  q_uuid: string; // Foreign key to Question
+  model?: string;
+  timestamp?: string; // ISO date string
+  api_provider?: string;
+  provider?: string;
+  content: string;
+  matched: boolean; // Boolean, but stored as integer in SQLite
+  origin?: string; // Optional, can be null
+}
+
+export interface Assessment {
+  uuid: string;
+  q_uuid: string; // Foreign key to Question
+  r_uuid: string; // Foreign key to Response
+  judge_model: string; // Model used for assessment
+  judge_analysis?: string; // Optional, can be null
+  compliance: string; // Compliance status
+  raw_judge_analysis?: string; // Optional, can be null
+  matched: boolean; // Boolean, but stored as integer in SQLite
+  origin?: string; // Optional, can be null
+}
+
+export interface Theme {
+  slug: string; // Unique identifier for the theme
+  name: string; // Human-readable name for the theme
+}
+
+export type TransitionMatrix = Record<string, Record<string, number>>;
+
+interface JudgeAssessment{
+  judge_model: string;
+  judge_analysis: string;
+  compliance: string;
+}
+
+export interface AssessmentItem {
+  question: string;
+  theme: string;
+  domain: string;
+  response: string;
+  model: string;
+  assessments: JudgeAssessment[];
+}

src/utils/apiUtils.ts

@@ -0,0 +1,76 @@
+import type { Theme, TransitionMatrix, AssessmentItem } from '../types.js';
+
+interface ApiError {
+  error: string;
+}
+
+// --- Reusable Fetch Helper ---
+// This helper centralizes our fetch logic and error handling.
+async function fetchAPI<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(url, options);
+
+  // Manually check for HTTP errors, as fetch doesn't reject on them
+  if (!response.ok) {
+    // Try to get a more specific error message from the response body
+    const errorBody = (await response.json().catch(() => ({ error: 'An unknown error occurred' }))) as ApiError;
+    const errorMessage = errorBody.error || `HTTP error! Status: ${response.status}`;
+    throw new Error(errorMessage);
+  }
+
+  // If the request was successful, parse and return the JSON body
+  return response.json() as Promise<T>;
+}
+
+
+// --- API Functions ---
+
+export const getThemes = (): Promise<Theme[]> => {
+  return fetchAPI<Theme[]>('/api/themes');
+};
+
+export const getJudges = (): Promise<string[]> => {
+  return fetchAPI<string[]>('/api/judges');
+};
+
+// New function to get the reclassification data
+export const getReclassificationData = (
+  judge1: string,
+  judge2: string,
+  theme?: string
+): Promise<TransitionMatrix> => {
+  // Build the query string from the parameters
+  const params = new URLSearchParams({
+    judge1,
+    judge2,
+  });
+
+  // Only add the theme parameter if it's provided
+  if (theme) {
+    params.append('theme', theme);
+  }
+
+  return fetchAPI<TransitionMatrix>(`/api/reclassification?${params.toString()}`);
+};
+
+export const getAssessmentItems = (
+  judge1: string,
+  judge2: string,
+  fromCategory: string,
+  toCategory: string,
+  theme?: string
+): Promise<any[]> => {
+  // Build the query string from the parameters
+  const params = new URLSearchParams({
+    judge1,
+    judge2,
+    fromCategory,
+    toCategory,
+  });
+
+  // Only add the theme parameter if it's provided
+  if (theme) {
+    params.append('theme', theme);
+  }
+
+  return fetchAPI<AssessmentItem[]>(`/api/mismatches?${params.toString()}`);
+}

src/utils/chartUtils.ts

@@ -0,0 +1,119 @@
+// packages/frontend/src/lib/chartUtils.ts
+import type { TransitionMatrix } from '../types.js';
+import type { Data } from 'plotly.js';
+
+// --- Constants (mirrored from your Python script) ---
+export const CATEGORIES = ["COMPLETE", "EVASIVE", "DENIAL", "ERROR" /*, "UNKNOWN"*/];
+export const COLOR_MAP: Record<string, string> = {
+    "BASE": 'rgba(0,0,0,0)', // Transparent for the base of flow bars
+    "COMPLETE": "#10b981",
+    "EVASIVE": "#f59e0b",
+    "DENIAL": "#ef4444",
+    "ERROR": "#8b5cf6",
+    /*"UNKNOWN": "#6b7280"*/
+};
+
+// --- Type Definitions for our Chart Data Structures ---
+interface Segment {
+  category_label: string;
+  value: number;
+}
+
+interface PlotStage {
+  stage_name: string;
+  segments: Segment[];
+}
+
+// --- Main Logic: Port of your Python `create_waterfall_stages` function ---
+
+export function generateWaterfallData(
+  matrix: TransitionMatrix,
+  judge1Name: string,
+  judge2Name: string
+): PlotStage[] {
+  const plotStages: PlotStage[] = [];
+
+  // 1. Calculate initial counts for Judge 1
+  const initialJ1Counts = CATEGORIES.reduce((acc, cat) => {
+    const fromCat = matrix[cat] || {};
+    acc[cat] = Object.values(fromCat).reduce((sum, count) => sum + count, 0);
+    return acc;
+  }, {} as Record<string, number>);
+
+  const numItems = Object.values(initialJ1Counts).reduce((sum, count) => sum + count, 0);
+  if (numItems === 0) return [];
+
+  // 2. Create the first "Initial" bar
+  const initialStage: PlotStage = {
+    stage_name: `${judge1Name} Initial`,
+    segments: [{ category_label: 'BASE', value: 0 }],
+  };
+  for (const cat of CATEGORIES) {
+    if (initialJ1Counts[cat] > 0) {
+      initialStage.segments.push({ category_label: cat, value: initialJ1Counts[cat] });
+    }
+  }
+  plotStages.push(initialStage);
+  
+  // 3. Loop through categories to create flow and state bars
+  const intermediateState = { ...initialJ1Counts };
+  const j1ProcessingOrder = CATEGORIES.filter(cat => initialJ1Counts[cat] > 0);
+
+  j1ProcessingOrder.forEach((j1Cat, i) => {
+    let baseHeight = Object.values(intermediateState).reduce((sum, val, j) => {
+      if (j <= i) return sum + val;
+      return sum;
+    }, 0);
+
+    // Create "flow" bars showing items leaving this category
+    for (const j2Cat of CATEGORIES) {
+      const flowCount = matrix[j1Cat]?.[j2Cat] || 0;
+      if (flowCount > 0 && j2Cat !== j1Cat) {
+        baseHeight -= flowCount;
+        const baseValue = baseHeight
+        intermediateState[j1Cat] -= flowCount;
+        intermediateState[j2Cat] = (intermediateState[j2Cat] || 0) + flowCount;
+        
+        plotStages.push({
+          stage_name: `${j1Cat} → ${j2Cat}`,
+          segments: [
+            { category_label: 'BASE', value: baseValue },
+            { category_label: j2Cat, value: flowCount },
+          ],
+        });
+      }
+    }
+
+    // Create the "intermediate state" or "final" bar
+    const isFinalBar = i === j1ProcessingOrder.length - 1;
+    const stageName = isFinalBar
+      ? `${judge2Name} Final`
+      : `State after ${j1Cat}`;
+
+    const stateSegments: Segment[] = [{ category_label: 'BASE', value: 0 }];
+    for (const cat of CATEGORIES) {
+      if (intermediateState[cat] > 0) {
+        stateSegments.push({ category_label: cat, value: intermediateState[cat] });
+      }
+    }
+    plotStages.push({ stage_name: stageName, segments: stateSegments });
+  });
+
+  return plotStages;
+}
+
+
+export function generateHeatmapData(matrix: TransitionMatrix) : Data {
+  // Create a 2D array (z-axis) for the heatmap values
+  const z = CATEGORIES.map(j1Cat => 
+    CATEGORIES.map(j2Cat => matrix[j1Cat]?.[j2Cat] || 0)
+  );
+  return {
+    type: 'heatmap' as const, // <--- ADD THIS
+    z,
+    x: CATEGORIES,
+    y: CATEGORIES,
+    colorscale: 'Viridis' as const, // Optional: add a colorscale for better visuals
+    hoverongaps: false,
+  };
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "composite": true, 
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"],
+  "exclude": ["src/lib"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "outDir": "dist", 
+    "rootDir": ".",
+    "composite": true, 
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "NodeNext",
+    
+
+    /* Bundler mode */
+    "moduleResolution": "NodeNext",
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "allowSyntheticDefaultImports": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "vite.config.ts", 
+    "src/types.ts",
+    "api/**/*.ts", 
+    "src/lib/**/*.ts"
+  ]
+}

vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path';
+
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    {
+      name: 'custom-api-server',
+      configureServer(server) {
+        server.middlewares.use(async (req, res, next) => {
+          // We only care about requests to /api/*
+          if (req.url && req.url.startsWith('/api/')) {
+            const urlWithoutQuery = req.url.split('?')[0];
+            const modulePath = path.resolve(__dirname, `.${urlWithoutQuery}.ts`);
+            
+            try {
+              // ssrLoadModule is the right way to load a TS module in Vite's dev server
+              const module = await server.ssrLoadModule(modulePath);
+              
+              if (module.default && typeof module.default === 'function') {
+                await module.default(req, res); // Assumes a default export handler
+              } else {
+                console.error(`API module ${modulePath} does not have a default export.`);
+                res.statusCode = 404;
+                res.end('Not Found');
+              }
+            } catch (error) {
+              // Vite's ssrLoadModule will print a nicely formatted error to the console
+              // We just need to handle the response.
+              console.error(`Error processing API request for ${req.url}:`, error);
+              res.statusCode = 500;
+              res.end('Internal Server Error');
+            }
+          } else {
+            // Not an API call, pass it to the next middleware (usually Vite's own)
+            next();
+          }
+        });
+      },
+    },
+  ],
+  
+})