Delete frontend

frontend/app/compare/page.tsx

@@ -1,26 +0,0 @@
-'use client';
-import { useState } from 'react';
-import RunComparisonTable from '../../components/RunComparisonTable';
-import { apiGet } from '../../lib/api';
-import type { CompareRunItem } from '../../lib/types';
-
-export default function ComparePage() {
-  const [ids, setIds] = useState('');
-  const [runs, setRuns] = useState<CompareRunItem[]>([]);
-  async function compare() {
-    const data = await apiGet<{ runs: CompareRunItem[] }>(`/compare?experiment_ids=${encodeURIComponent(ids)}`);
-    setRuns(data.runs);
-  }
-  return (
-    <div className='grid'>
-      <div className='card'>
-        <h1>Compare Runs</h1>
-        <p className='small'>Enter experiment ids separated by commas.</p>
-        <input value={ids} onChange={(e) => setIds(e.target.value)} placeholder='exp_x,exp_y,exp_z' />
-        <div style={{ height: 12 }} />
-        <button onClick={compare}>Compare</button>
-      </div>
-      {runs.length > 0 ? <RunComparisonTable runs={runs} /> : null}
-    </div>
-  );
-}

frontend/app/datasets/[id]/page.tsx

@@ -1,9 +0,0 @@
-import DatasetProfileCard from '../../../components/DatasetProfileCard';
-import { apiGet } from '../../../lib/api';
-import type { DatasetProfile } from '../../../lib/types';
-
-export default async function DatasetProfilePage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
-  const profile = await apiGet<DatasetProfile>(`/datasets/${id}/profile`);
-  return <DatasetProfileCard profile={profile} />;
-}

frontend/app/experiments/[id]/page.tsx

@@ -1,32 +0,0 @@
-import ClusterBarChart from '../../../components/ClusterBarChart';
-import ClusterScatterPlot from '../../../components/ClusterScatterPlot';
-import ClusterSummaryCard from '../../../components/ClusterSummaryCard';
-import ClusterTable from '../../../components/ClusterTable';
-import MetricsGrid from '../../../components/MetricsGrid';
-import OutlierTable from '../../../components/OutlierTable';
-import { apiGet } from '../../../lib/api';
-import type { ExperimentResult } from '../../../lib/types';
-
-export default async function ExperimentResultPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
-  const data = await apiGet<ExperimentResult>(`/experiments/${id}/results`);
-  return (
-    <div className='grid' style={{ gap: 18 }}>
-      <div className='card'>
-        <div className='header-row'>
-          <h1>Experiment {data.experiment_id}</h1>
-          <div className='badge'>{data.algorithm}</div>
-        </div>
-        <p className='small'>Status: {data.status}</p>
-      </div>
-      <MetricsGrid metrics={data.metrics} />
-      <ClusterScatterPlot points={data.scatter_points} />
-      <ClusterBarChart summaries={data.cluster_summaries} />
-      <ClusterTable summaries={data.cluster_summaries} />
-      <OutlierTable points={data.scatter_points} />
-      <div className='grid grid-2'>
-        {data.cluster_summaries.map((item) => <ClusterSummaryCard key={item.cluster_label} item={item} />)}
-      </div>
-    </div>
-  );
-}

frontend/app/experiments/new/page.tsx

@@ -1,96 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import AlgorithmSelector from '../../../components/AlgorithmSelector';
-import DynamicParamForm from '../../../components/DynamicParamForm';
-import { apiGet, apiPost } from '../../../lib/api';
-import type { AlgorithmPreset, DatasetItem, DatasetProfile } from '../../../lib/types';
-
-export default function NewExperimentPage() {
-  const [datasets, setDatasets] = useState<DatasetItem[]>([]);
-  const [algorithms, setAlgorithms] = useState<AlgorithmPreset[]>([]);
-  const [datasetId, setDatasetId] = useState('');
-  const [profile, setProfile] = useState<DatasetProfile | null>(null);
-  const [algorithm, setAlgorithm] = useState('kmeans');
-  const [params, setParams] = useState<Record<string, unknown>>({});
-  const [featureColumns, setFeatureColumns] = useState<string[]>([]);
-  const [name, setName] = useState('Experiment');
-  const [message, setMessage] = useState('');
-
-  useEffect(() => {
-    apiGet<DatasetItem[]>('/datasets').then(setDatasets).catch(() => {});
-    apiGet<{ algorithms: AlgorithmPreset[] }>('/presets/algorithms').then((d) => {
-      setAlgorithms(d.algorithms);
-      if (d.algorithms.length > 0) {
-        setAlgorithm(d.algorithms[0].key);
-        setParams(d.algorithms[0].params);
-      }
-    }).catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    if (!datasetId) return;
-    apiGet<DatasetProfile>(`/datasets/${datasetId}/profile`).then((data) => {
-      setProfile(data);
-      setFeatureColumns(data.suggested_feature_columns);
-    }).catch(() => {});
-  }, [datasetId]);
-
-  useEffect(() => {
-    const match = algorithms.find((a) => a.key === algorithm);
-    if (match) setParams(match.params);
-  }, [algorithm, algorithms]);
-
-  async function run() {
-    setMessage('');
-    const result = await apiPost<{ experiment_id: string; status: string }>('/experiments/run', {
-      dataset_id: datasetId,
-      name,
-      algorithm,
-      feature_columns: featureColumns,
-      preprocessing: { numeric_scaler: 'standard', categorical_encoder: 'onehot', dimensionality_reduction: 'umap' },
-      algorithm_params: params,
-      outlier_detection_enabled: true
-    });
-    setMessage(`Completed: ${result.experiment_id}`);
-  }
-
-  return (
-    <div className='grid grid-2'>
-      <div className='card'>
-        <h1>New Experiment</h1>
-        <div className='grid'>
-          <div><label>Experiment Name</label><input value={name} onChange={(e) => setName(e.target.value)} /></div>
-          <div>
-            <label>Dataset</label>
-            <select value={datasetId} onChange={(e) => setDatasetId(e.target.value)}>
-              <option value=''>Select dataset</option>
-              {datasets.map((d) => <option key={d.dataset_id} value={d.dataset_id}>{d.name}</option>)}
-            </select>
-          </div>
-          <AlgorithmSelector algorithms={algorithms} value={algorithm} onChange={setAlgorithm} />
-          <div>
-            <label>Feature Columns</label>
-            <textarea rows={8} value={featureColumns.join(',')} onChange={(e) => setFeatureColumns(e.target.value.split(',').map((s) => s.trim()).filter(Boolean))} />
-          </div>
-          <DynamicParamForm params={params} onChange={setParams} />
-          <button onClick={run}>Run Experiment</button>
-          {message ? <p>{message}</p> : null}
-        </div>
-      </div>
-      <div className='card'>
-        <h2>Dataset Hints</h2>
-        {profile ? (
-          <>
-            <p className='small'>Recommended algorithms: {profile.recommended_algorithms.join(', ')}</p>
-            <p className='small'>Suggested feature columns: {profile.suggested_feature_columns.join(', ')}</p>
-            <div className='grid'>
-              {profile.columns.slice(0, 20).map((col) => <div key={col.name} className='badge'>{col.name}: {col.inferred_type}</div>)}
-            </div>
-          </>
-        ) : (
-          <p className='small'>Choose a dataset to load schema and recommendations.</p>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/app/globals.css

@@ -1,27 +0,0 @@
-html, body {
-  padding: 0;
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-  background: #0b1020;
-  color: #f4f7fb;
-}
-a { color: inherit; text-decoration: none; }
-* { box-sizing: border-box; }
-.page { min-height: 100vh; padding: 24px; }
-.container { max-width: 1200px; margin: 0 auto; }
-.card { background: #121933; border: 1px solid #243054; border-radius: 14px; padding: 18px; }
-.grid { display: grid; gap: 16px; }
-.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-input, select, textarea, button { font: inherit; }
-input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #33406d; background: #0f1730; color: #f4f7fb; }
-button { padding: 10px 14px; border-radius: 10px; border: none; background: #4f8cff; color: white; cursor: pointer; }
-.table { width: 100%; border-collapse: collapse; }
-.table th, .table td { padding: 10px; border-bottom: 1px solid #243054; text-align: left; }
-.small { color: #b9c4e2; font-size: 14px; }
-.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.nav { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
-.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #1e2a4e; color: #c4d7ff; font-size: 12px; }
-.code { font-family: monospace; }
-pre { overflow: auto; }
-@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

frontend/app/layout.tsx

@@ -1,22 +0,0 @@
-import './globals.css';
-import Navbar from '../components/Navbar';
-
-export const metadata = {
-  title: 'ClusterForge',
-  description: 'Interactive clustering intelligence platform'
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang='en'>
-      <body>
-        <div className='page'>
-          <div className='container'>
-            <Navbar />
-            {children}
-          </div>
-        </div>
-      </body>
-    </html>
-  );
-}

frontend/app/page.tsx

@@ -1,19 +0,0 @@
-import Link from 'next/link';
-export default function HomePage() {
-  return (
-    <div className='grid' style={{ gap: 20 }}>
-      <div className='card'>
-        <h1>ClusterForge</h1>
-        <p>A full stack clustering intelligence platform. Upload data, choose the clustering algorithm, tune parameters, compare runs, inspect visualizations, and export labeled output.</p>
-        <div className='grid grid-3'>
-          <div className='card'><h3>Algorithms</h3><p className='small'>KMeans, MiniBatch KMeans, Agglomerative, DBSCAN, HDBSCAN, GMM, Spectral, Birch</p></div>
-          <div className='card'><h3>Backend</h3><p className='small'>FastAPI, SQLAlchemy, SQLite, scikit learn, UMAP</p></div>
-          <div className='card'><h3>Frontend</h3><p className='small'>Next.js, React, Plotly, TypeScript</p></div>
-        </div>
-        <div style={{ marginTop: 20 }}>
-          <Link href='/upload'><button>Upload Dataset</button></Link>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/app/runs/page.tsx

@@ -1,28 +0,0 @@
-import Link from 'next/link';
-import { apiGet } from '../../lib/api';
-import type { ExperimentListItem } from '../../lib/types';
-
-export default async function RunsPage() {
-  const runs = await apiGet<ExperimentListItem[]>('/experiments');
-  return (
-    <div className='card'>
-      <h1>Saved Runs</h1>
-      <table className='table'>
-        <thead>
-          <tr><th>Name</th><th>Algorithm</th><th>Status</th><th>Started</th><th>Open</th></tr>
-        </thead>
-        <tbody>
-          {runs.map((run) => (
-            <tr key={run.experiment_id}>
-              <td>{run.name}</td>
-              <td>{run.algorithm}</td>
-              <td>{run.status}</td>
-              <td>{run.started_at}</td>
-              <td><Link href={`/experiments/${run.experiment_id}`}>View</Link></td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

frontend/app/upload/page.tsx

@@ -1,4 +0,0 @@
-import FileUploadCard from '../../components/FileUploadCard';
-export default function UploadPage() {
-  return <div className='grid'><FileUploadCard /></div>;
-}

frontend/components/AlgorithmSelector.tsx

@@ -1,23 +0,0 @@
-'use client';
-import type { AlgorithmPreset } from '../lib/types';
-
-export default function AlgorithmSelector({
-  algorithms,
-  value,
-  onChange
-}: {
-  algorithms: AlgorithmPreset[];
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <div>
-      <label>Algorithm</label>
-      <select value={value} onChange={(e) => onChange(e.target.value)}>
-        {algorithms.map((alg) => (
-          <option key={alg.key} value={alg.key}>{alg.label}</option>
-        ))}
-      </select>
-    </div>
-  );
-}

frontend/components/ClusterBarChart.tsx

@@ -1,24 +0,0 @@
-'use client';
-import dynamic from 'next/dynamic';
-import type { ClusterSummaryResponse } from '../lib/types';
-const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
-
-export default function ClusterBarChart({ summaries }: { summaries: ClusterSummaryResponse[] }) {
-  return (
-    <div className='card'>
-      <h2>Cluster Size Distribution</h2>
-      <Plot
-        data={[{ type: 'bar', x: summaries.map((s) => `Cluster ${s.cluster_label}`), y: summaries.map((s) => s.size) }]}
-        layout={{
-          width: 1000,
-          height: 420,
-          paper_bgcolor: '#121933',
-          plot_bgcolor: '#121933',
-          font: { color: '#f4f7fb' },
-          margin: { l: 30, r: 20, t: 30, b: 40 }
-        }}
-        config={{ responsive: true }}
-      />
-    </div>
-  );
-}

frontend/components/ClusterScatterPlot.tsx

@@ -1,35 +0,0 @@
-'use client';
-import dynamic from 'next/dynamic';
-import type { ScatterPoint } from '../lib/types';
-const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
-
-export default function ClusterScatterPlot({ points }: { points: ScatterPoint[] }) {
-  const traces = Array.from(new Set(points.map((p) => p.cluster_label))).map((label) => {
-    const rows = points.filter((p) => p.cluster_label === label);
-    return {
-      x: rows.map((r) => r.x),
-      y: rows.map((r) => r.y),
-      mode: 'markers',
-      type: 'scattergl',
-      name: `Cluster ${label}`,
-      text: rows.map((r) => `row ${r.row_index}, outlier=${r.is_outlier}`)
-    };
-  });
-  return (
-    <div className='card'>
-      <h2>Cluster Plot</h2>
-      <Plot
-        data={traces}
-        layout={{
-          width: 1000,
-          height: 520,
-          paper_bgcolor: '#121933',
-          plot_bgcolor: '#121933',
-          font: { color: '#f4f7fb' },
-          margin: { l: 30, r: 20, t: 30, b: 40 }
-        }}
-        config={{ responsive: true }}
-      />
-    </div>
-  );
-}

frontend/components/ClusterSummaryCard.tsx

@@ -1,14 +0,0 @@
-import type { ClusterSummaryResponse } from '../lib/types';
-export default function ClusterSummaryCard({ item }: { item: ClusterSummaryResponse }) {
-  const profile = item.summary_json?.profile as Record<string, unknown> | undefined;
-  return (
-    <div className='card'>
-      <div className='header-row'>
-        <h3>Cluster {item.cluster_label}</h3>
-        <div className='badge'>{item.size} rows</div>
-      </div>
-      <p>{item.description_text}</p>
-      <pre className='small' style={{ whiteSpace: 'pre-wrap' }}>{JSON.stringify(profile, null, 2)}</pre>
-    </div>
-  );
-}

frontend/components/ClusterTable.tsx

@@ -1,22 +0,0 @@
-import type { ClusterSummaryResponse } from '../lib/types';
-export default function ClusterTable({ summaries }: { summaries: ClusterSummaryResponse[] }) {
-  return (
-    <div className='card'>
-      <h2>Cluster Summaries</h2>
-      <table className='table'>
-        <thead>
-          <tr><th>Cluster</th><th>Size</th><th>Description</th></tr>
-        </thead>
-        <tbody>
-          {summaries.map((s) => (
-            <tr key={s.cluster_label}>
-              <td>{s.cluster_label}</td>
-              <td>{s.size}</td>
-              <td>{s.description_text}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

frontend/components/DatasetProfileCard.tsx

@@ -1,36 +0,0 @@
-import type { DatasetProfile } from '../lib/types';
-
-export default function DatasetProfileCard({ profile }: { profile: DatasetProfile }) {
-  return (
-    <div className='card'>
-      <div className='header-row'>
-        <h2>Dataset Profile</h2>
-        <div className='badge'>{profile.row_count} rows</div>
-      </div>
-      <p className='small'>Suggested features: {profile.suggested_feature_columns.join(', ') || 'None'}</p>
-      <p className='small'>Recommended algorithms: {profile.recommended_algorithms.join(', ') || 'None'}</p>
-      <table className='table'>
-        <thead>
-          <tr>
-            <th>Column</th>
-            <th>Type</th>
-            <th>Missing %</th>
-            <th>Cardinality</th>
-            <th>Samples</th>
-          </tr>
-        </thead>
-        <tbody>
-          {profile.columns.map((col) => (
-            <tr key={col.name}>
-              <td>{col.name}</td>
-              <td>{col.inferred_type}</td>
-              <td>{col.missing_pct}</td>
-              <td>{col.cardinality}</td>
-              <td className='small'>{col.sample_values.join(', ')}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

frontend/components/DynamicParamForm.tsx

@@ -1,26 +0,0 @@
-'use client';
-export default function DynamicParamForm({
-  params,
-  onChange
-}: {
-  params: Record<string, unknown>;
-  onChange: (next: Record<string, unknown>) => void;
-}) {
-  return (
-    <div className='grid'>
-      {Object.entries(params).map(([key, value]) => (
-        <div key={key}>
-          <label>{key}</label>
-          <input
-            value={String(value)}
-            onChange={(e) => {
-              const raw = e.target.value;
-              const parsed = raw !== '' && !Number.isNaN(Number(raw)) ? Number(raw) : raw;
-              onChange({ ...params, [key]: parsed });
-            }}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}

frontend/components/FileUploadCard.tsx

@@ -1,38 +0,0 @@
-'use client';
-import { useState } from 'react';
-import { apiUpload } from '../lib/api';
-import type { DatasetItem } from '../lib/types';
-
-export default function FileUploadCard() {
-  const [file, setFile] = useState<File | null>(null);
-  const [result, setResult] = useState<DatasetItem | null>(null);
-  const [error, setError] = useState('');
-  async function onUpload() {
-    if (!file) return;
-    setError('');
-    try {
-      const data = await apiUpload<DatasetItem>('/datasets/upload', file);
-      setResult(data);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Upload failed');
-    }
-  }
-  return (
-    <div className='card'>
-      <h2>Upload CSV or Excel</h2>
-      <p className='small'>Upload your dataset and start profiling.</p>
-      <input type='file' accept='.csv,.xlsx,.xls' onChange={(e) => setFile(e.target.files?.[0] || null)} />
-      <div style={{ height: 12 }} />
-      <button onClick={onUpload}>Upload Dataset</button>
-      {error ? <p>{error}</p> : null}
-      {result ? (
-        <div style={{ marginTop: 16 }}>
-          <div className='badge'>Uploaded</div>
-          <p className='small code'>{result.dataset_id}</p>
-          <p>{result.name}</p>
-          <p className='small'>{result.row_count} rows, {result.column_count} columns</p>
-        </div>
-      ) : null}
-    </div>
-  );
-}

frontend/components/MetricsGrid.tsx

@@ -1,24 +0,0 @@
-import type { MetricResponse } from '../lib/types';
-const entries: Array<[keyof MetricResponse, string]> = [
-  ['cluster_count', 'Clusters'],
-  ['noise_ratio', 'Noise Ratio'],
-  ['silhouette_score', 'Silhouette'],
-  ['davies_bouldin_score', 'Davies Bouldin'],
-  ['calinski_harabasz_score', 'Calinski Harabasz'],
-  ['stability_score', 'Stability'],
-  ['interpretability_score', 'Interpretability']
-];
-export default function MetricsGrid({ metrics }: { metrics: MetricResponse }) {
-  return (
-    <div className='grid grid-3'>
-      {entries.map(([key, label]) => (
-        <div key={String(key)} className='card'>
-          <div className='small'>{label}</div>
-          <div style={{ fontSize: 28, fontWeight: 700 }}>
-            {metrics[key] === undefined || metrics[key] === null ? 'N/A' : String(metrics[key])}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

frontend/components/Navbar.tsx

@@ -1,13 +0,0 @@
-import Link from 'next/link';
-
-export default function Navbar() {
-  return (
-    <div className='nav'>
-      <Link className='badge' href='/'>Home</Link>
-      <Link className='badge' href='/upload'>Upload</Link>
-      <Link className='badge' href='/experiments/new'>New Experiment</Link>
-      <Link className='badge' href='/runs'>Runs</Link>
-      <Link className='badge' href='/compare'>Compare</Link>
-    </div>
-  );
-}

frontend/components/OutlierTable.tsx

@@ -1,24 +0,0 @@
-import type { ScatterPoint } from '../lib/types';
-export default function OutlierTable({ points }: { points: ScatterPoint[] }) {
-  const outliers = points.filter((p) => p.is_outlier).slice(0, 100);
-  return (
-    <div className='card'>
-      <h2>Outliers</h2>
-      <table className='table'>
-        <thead>
-          <tr><th>Row</th><th>Cluster</th><th>X</th><th>Y</th></tr>
-        </thead>
-        <tbody>
-          {outliers.map((p) => (
-            <tr key={p.row_index}>
-              <td>{p.row_index}</td>
-              <td>{p.cluster_label}</td>
-              <td>{p.x.toFixed(3)}</td>
-              <td>{p.y.toFixed(3)}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

frontend/components/RunComparisonTable.tsx

@@ -1,30 +0,0 @@
-import type { CompareRunItem } from '../lib/types';
-export default function RunComparisonTable({ runs }: { runs: CompareRunItem[] }) {
-  return (
-    <div className='card'>
-      <h2>Run Comparison</h2>
-      <table className='table'>
-        <thead>
-          <tr>
-            <th>Name</th><th>Algorithm</th><th>Clusters</th><th>Noise</th><th>Silhouette</th><th>DB</th><th>CH</th><th>Stability</th><th>Interpretability</th>
-          </tr>
-        </thead>
-        <tbody>
-          {runs.map((r) => (
-            <tr key={r.experiment_id}>
-              <td>{r.name}</td>
-              <td>{r.algorithm}</td>
-              <td>{r.cluster_count}</td>
-              <td>{r.noise_ratio}</td>
-              <td>{r.silhouette_score ?? 'N/A'}</td>
-              <td>{r.davies_bouldin_score ?? 'N/A'}</td>
-              <td>{r.calinski_harabasz_score ?? 'N/A'}</td>
-              <td>{r.stability_score ?? 'N/A'}</td>
-              <td>{r.interpretability_score ?? 'N/A'}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

frontend/lib/api.ts

@@ -1,36 +0,0 @@
-import { API_BASE_URL } from './constants';
-
-export async function apiGet<T>(path: string): Promise<T> {
-  const res = await fetch(`${API_BASE_URL}${path}`, { cache: 'no-store' });
-  if (!res.ok) {
-    throw new Error(`GET ${path} failed`);
-  }
-  return res.json();
-}
-
-export async function apiPost<T>(path: string, body: unknown): Promise<T> {
-  const res = await fetch(`${API_BASE_URL}${path}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(body)
-  });
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(text || `POST ${path} failed`);
-  }
-  return res.json();
-}
-
-export async function apiUpload<T>(path: string, file: File): Promise<T> {
-  const form = new FormData();
-  form.append('file', file);
-  const res = await fetch(`${API_BASE_URL}${path}`, {
-    method: 'POST',
-    body: form
-  });
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(text || `UPLOAD ${path} failed`);
-  }
-  return res.json();
-}

frontend/lib/constants.ts

@@ -1,2 +0,0 @@
-export const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000/api';

frontend/lib/types.ts

@@ -1,86 +0,0 @@
-export type DatasetItem = {
-  dataset_id: string;
-  name: string;
-  row_count: number;
-  column_count: number;
-};
-
-export type ColumnProfile = {
-  name: string;
-  inferred_type: string;
-  missing_pct: number;
-  cardinality: number;
-  sample_values: unknown[];
-};
-
-export type DatasetProfile = {
-  dataset_id: string;
-  columns: ColumnProfile[];
-  suggested_feature_columns: string[];
-  recommended_algorithms: string[];
-  row_count: number;
-  column_count: number;
-};
-
-export type AlgorithmPreset = {
-  key: string;
-  label: string;
-  params: Record<string, unknown>;
-};
-
-export type ExperimentListItem = {
-  experiment_id: string;
-  dataset_id: string;
-  name: string;
-  algorithm: string;
-  status: string;
-  started_at: string;
-  completed_at?: string | null;
-};
-
-export type MetricResponse = {
-  cluster_count: number;
-  noise_ratio: number;
-  silhouette_score?: number | null;
-  davies_bouldin_score?: number | null;
-  calinski_harabasz_score?: number | null;
-  stability_score?: number | null;
-  interpretability_score?: number | null;
-};
-
-export type ScatterPoint = {
-  row_index: number;
-  cluster_label: number;
-  is_outlier: boolean;
-  x: number;
-  y: number;
-};
-
-export type ClusterSummaryResponse = {
-  cluster_label: number;
-  size: number;
-  description_text: string;
-  summary_json: Record<string, unknown>;
-};
-
-export type ExperimentResult = {
-  experiment_id: string;
-  algorithm: string;
-  metrics: MetricResponse;
-  scatter_points: ScatterPoint[];
-  cluster_summaries: ClusterSummaryResponse[];
-  status: string;
-};
-
-export type CompareRunItem = {
-  experiment_id: string;
-  name: string;
-  algorithm: string;
-  cluster_count: number;
-  noise_ratio: number;
-  silhouette_score?: number | null;
-  davies_bouldin_score?: number | null;
-  calinski_harabasz_score?: number | null;
-  stability_score?: number | null;
-  interpretability_score?: number | null;
-};

frontend/next.config.js

@@ -1,5 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true
-};
-module.exports = nextConfig;

frontend/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "clusterforge-frontend",
-  "private": true,
-  "version": "1.0.0",
-  "scripts": {
-    "dev": "next dev -p 3000",
-    "build": "next build",
-    "start": "next start -p 3000"
-  },
-  "dependencies": {
-    "next": "15.2.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "plotly.js-dist-min": "3.0.1",
-    "react-plotly.js": "2.6.0"
-  },
-  "devDependencies": {
-    "@types/node": "22.14.1",
-    "@types/react": "19.0.12",
-    "@types/react-dom": "19.0.4",
-    "typescript": "5.8.3"
-  }
-}

frontend/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "esnext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [{ "name": "next" }]
-  },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}

frontend/types/react-plotly.js.d.ts

@@ -1,21 +0,0 @@
-declare module 'react-plotly.js' {
-  import * as React from 'react';
-
-  export interface PlotParams {
-    data?: any[];
-    layout?: any;
-    config?: any;
-    frames?: any[];
-    style?: React.CSSProperties;
-    className?: string;
-    useResizeHandler?: boolean;
-    onInitialized?: (figure: any, graphDiv: any) => void;
-    onUpdate?: (figure: any, graphDiv: any) => void;
-    onPurge?: (figure: any, graphDiv: any) => void;
-    onError?: (err: Error) => void;
-    divId?: string;
-  }
-
-  const Plot: React.ComponentType<PlotParams>;
-  export default Plot;
-}