Add routing and analysis features

- Introduced `react-router-dom` for navigation, enabling routing between Home and Analysis pages.
- Created `HomePage` for user registration and navigation.
- Developed `AnalysisPage` for CSV file upload and argument analysis.
- Implemented API services for user management and analysis.
- Updated constants for new API endpoints.
- Enforced explicit file extensions in imports for TypeScript files.
- Added utility functions for user management and CSV parsing.

.cursor/rules/rules.mdc

@@ -54,12 +54,12 @@ const MyComponent: React.FC<MyComponentProps> = ({ title, count = 0 }) => {
 - Always type API responses
 
 ```typescript
-// Direct API call
-import api from '../services/api-wrapper';
+// Direct API call (note: include .ts extension)
+import api from '../services/api-wrapper.ts';
 const data = await api.get<User[]>('/api/users');
 
-// With hook
-import { useApi } from '../hooks/useApi';
+// With hook (note: include .ts extension)
+import { useApi } from '../hooks/useApi.ts';
 const { data, loading, error } = useApi<User[]>('/api/users');
 ```
 
@@ -75,6 +75,9 @@ export type Debate = {
   topic: string;
   arguments: Argument[];
 };
+
+// When importing types, use explicit extension:
+import type { Debate } from '../types/debater.types.ts';
 ```
 
 ### Constants
@@ -90,7 +93,13 @@ export type Debate = {
 
 ## Conventions
 
-1. **Imports**: Use relative paths from `src/`
+1. **Imports**: 
+   - Use relative paths from `src/`
+   - **ALWAYS include explicit file extensions** in imports:
+     - Use `.tsx` for React components (e.g., `import Component from './Component.tsx'`)
+     - Use `.ts` for TypeScript files (e.g., `import { func } from './utils/index.ts'`)
+     - Use `/index.ts` for directory barrel exports (e.g., `import { something } from './utils/index.ts'`)
+   - This is required for webpack module resolution in this project
 2. **Styling**: Tailwind-first, avoid custom CSS
 3. **Error Handling**: Use ErrorBoundary for React errors, try/catch for API errors
 4. **Loading States**: Use `Loading` component from `components/common/Loading`
@@ -105,15 +114,27 @@ export type Debate = {
 - ❌ Don't create custom CSS files - use Tailwind
 - ❌ Don't commit `.env*` files (except `.env.example`)
 - ❌ Don't skip TypeScript types
+- ❌ **Don't omit file extensions in imports** - Always include `.ts` or `.tsx` extensions
+  - ❌ Bad: `import Component from './Component'`
+  - ✅ Good: `import Component from './Component.tsx'`
+  - ❌ Bad: `export * from './user.utils'`
+  - ✅ Good: `export * from './user.utils.ts'`
 
 ## When Adding New Features
 
 1. **New Page**: Create in `src/app/pages/` (`.tsx`), wire via `App.tsx`
+   - Import with `.tsx` extension: `import NewPage from './pages/NewPage.tsx'`
 2. **New Component**: Create in `src/app/components/` (`.tsx`), type props
+   - Import with `.tsx` extension: `import Component from './components/Component.tsx'`
 3. **New API Endpoint**: Add to `API_ENDPOINTS` in constants, use `api-wrapper.ts`
+   - Import services with `.ts` extension: `import { service } from './services/service.ts'`
 4. **New Type**: Add to `src/app/types/`, export from `index.ts`
+   - Import types with `.ts` extension: `import type { Type } from '../types/type.types.ts'`
 5. **New Hook**: Create in `src/app/hooks/` (`.ts`), type return values
+   - Import hooks with `.ts` extension: `import { useHook } from '../hooks/useHook.ts'`
 6. **New Utility**: Add to `src/app/utils/index.ts`, keep pure and typed
+   - Export with `.ts` extension: `export * from './new-util.ts'`
+   - Import from index: `import { util } from '../utils/index.ts'`
 
 ## Quality Checks
 

package-lock.json

@@ -12,8 +12,10 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "postgres": "^3.4.7",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-router-dom": "^7.10.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -13381,6 +13383,19 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/postgres": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.7.tgz",
+      "integrity": "sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/porsager"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -13784,6 +13799,57 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
+      "integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
+      "integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.10.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14767,6 +14833,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",

package.json

@@ -7,8 +7,10 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "postgres": "^3.4.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.10.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/app/App.tsx

@@ -1,13 +1,35 @@
 import React from 'react';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import MainLayout from './layouts/MainLayout.tsx';
+import HomePage from './pages/HomePage.tsx';
+import AnalysisPage from './pages/AnalysisPage.tsx';
+import { isUserRegistered } from './utils/index.ts';
 
-const App: React.FC = () => (
-  <MainLayout>
-    <div className="container mx-auto px-4 py-8">
-      {/* Your content here */}
-    </div>
-  </MainLayout>
-);
+const App: React.FC = () => {
+  // Check if user is already registered
+  const userRegistered = isUserRegistered();
+
+  return (
+    <BrowserRouter>
+      <MainLayout>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              userRegistered ? (
+                <Navigate to="/analysis" replace />
+              ) : (
+                <HomePage />
+              )
+            }
+          />
+          <Route path="/analysis" element={<AnalysisPage />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </MainLayout>
+    </BrowserRouter>
+  );
+};
 
 export default App;
 

src/app/constants/index.ts

@@ -4,7 +4,12 @@
 
 // API Endpoints (add your endpoints here as you build)
 export const API_ENDPOINTS = {
-
+  USER_REGISTER: '/api/v1/user/register',
+  USER_ME: '/api/v1/user/me',
+  USER_BY_UNIQUE_ID: '/api/v1/user/by-unique-id',
+  USER_UPDATE_NAME: '/api/v1/user/me/name',
+  ANALYSIS: '/api/v1/analyse',
+  ANALYSIS_CSV: '/api/v1/analyse/csv',
 } as const;
 
 // App configuration

src/app/pages/AnalysisPage.tsx

@@ -0,0 +1,229 @@
+import React, { useMemo, useState } from 'react';
+import { parseCsv, formatError } from '../utils/index.ts';
+import { CsvRow } from '../types/index.ts';
+import { AnalysisResult } from '../types/analysis.types.ts';
+import { analyzeArgumentsFromCsv } from '../services/analysis.service.ts';
+
+const AnalysisPage: React.FC = () => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [headers, setHeaders] = useState<string[]>(['id', 'argument']);
+  const [rows, setRows] = useState<CsvRow[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isAnalyzing, setIsAnalyzing] = useState<boolean>(false);
+  const [analysisResults, setAnalysisResults] = useState<AnalysisResult[]>([]);
+
+  const fileName = useMemo(
+    () => selectedFile?.name ?? 'Select a CSV file with arguments',
+    [selectedFile]
+  );
+
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0] ?? null;
+    setSelectedFile(file);
+    setError(null);
+    setAnalysisResults([]);
+
+    if (!file) {
+      setHeaders(['id', 'argument']);
+      setRows([]);
+      return;
+    }
+
+    // Automatically parse and preview CSV
+    try {
+      const content = await file.text();
+      const parsed = parseCsv(content);
+
+      setHeaders(parsed.headers.length > 0 ? parsed.headers : ['id', 'argument']);
+      setRows(parsed.rows);
+
+      if (parsed.rows.length === 0) {
+        setError('No data found in the CSV file.');
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Unable to read the CSV file.'
+      );
+      setHeaders(['id', 'argument']);
+      setRows([]);
+    }
+  };
+
+  const handleAnalyze = async () => {
+    if (!selectedFile) {
+      setError('Please choose a CSV file to analyze.');
+      return;
+    }
+
+    setIsAnalyzing(true);
+    setError(null);
+    setAnalysisResults([]);
+
+    try {
+      const response = await analyzeArgumentsFromCsv(selectedFile);
+      setAnalysisResults(response.results);
+    } catch (err) {
+      setError(formatError(err));
+    } finally {
+      setIsAnalyzing(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 px-4 py-10">
+      <div className="mx-auto max-w-4xl rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div className="border-b border-slate-200 px-6 py-4">
+          <h1 className="text-lg font-semibold text-slate-800">
+            Analysis page (open static)
+          </h1>
+          <p className="text-sm text-slate-500">
+            Upload a CSV file containing arguments to preview its contents.
+          </p>
+        </div>
+
+        <div className="space-y-6 p-6">
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium text-slate-700">
+              Upload a CSV file
+            </label>
+
+            <div className="flex flex-wrap items-center gap-3">
+              <label className="flex w-full max-w-xl cursor-pointer items-center justify-between rounded-full border border-slate-300 bg-slate-50 px-5 py-3 transition hover:border-slate-400">
+                <span className="truncate text-sm font-semibold text-slate-500">
+                  {fileName}
+                </span>
+                <input
+                  type="file"
+                  accept=".csv,text/csv"
+                  className="hidden"
+                  onChange={handleFileChange}
+                />
+              </label>
+
+              <button
+                type="button"
+                onClick={handleAnalyze}
+                disabled={!selectedFile || rows.length === 0 || isAnalyzing}
+                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {isAnalyzing ? 'Analyzing...' : 'Analyze'}
+              </button>
+            </div>
+
+            {error && <p className="text-sm text-red-600">{error}</p>}
+          </div>
+
+          {rows.length > 0 && (
+            <div className="overflow-hidden rounded-lg border border-slate-200">
+              <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
+                <h2 className="text-sm font-semibold text-slate-700">
+                  CSV Preview ({rows.length} rows)
+                </h2>
+              </div>
+              <table className="min-w-full divide-y divide-slate-200">
+                <thead className="bg-slate-50">
+                  <tr>
+                    {headers.map((header) => (
+                      <th
+                        key={header}
+                        scope="col"
+                        className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600"
+                      >
+                        {header}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-200 bg-white">
+                  {rows.map((row, index) => (
+                    <tr key={row.id ?? `row-${index}`} className="hover:bg-slate-50">
+                      {headers.map((header) => (
+                        <td
+                          key={`${header}-${index}`}
+                          className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700"
+                        >
+                          {row[header] ?? ''}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {analysisResults.length > 0 && (
+            <div className="overflow-hidden rounded-lg border border-slate-200">
+              <div className="bg-green-50 px-4 py-2 border-b border-slate-200">
+                <h2 className="text-sm font-semibold text-green-800">
+                  Analysis Results ({analysisResults.length} results)
+                </h2>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-slate-200">
+                  <thead className="bg-slate-50">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                        Argument
+                      </th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                        Topic
+                      </th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                        Stance
+                      </th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                        Confidence
+                      </th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                        PRO
+                      </th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold uppercase tracking-wide text-slate-600">
+                        CON
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-200 bg-white">
+                    {analysisResults.map((result) => (
+                      <tr key={result.id} className="hover:bg-slate-50">
+                        <td className="whitespace-pre-wrap px-4 py-3 text-sm text-slate-700 max-w-md">
+                          {result.argument}
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-700">
+                          {result.topic}
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          <span
+                            className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${
+                              result.predicted_stance === 'PRO'
+                                ? 'bg-green-100 text-green-800'
+                                : 'bg-red-100 text-red-800'
+                            }`}
+                          >
+                            {result.predicted_stance}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-700">
+                          {(result.confidence * 100).toFixed(1)}%
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-700">
+                          {(result.probability_pro * 100).toFixed(1)}%
+                        </td>
+                        <td className="px-4 py-3 text-sm text-slate-700">
+                          {(result.probability_con * 100).toFixed(1)}%
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AnalysisPage;
+

src/app/pages/HomePage.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { registerUser } from '../services/user.service.ts';
+import { getOrCreateUniqueId, setUserId, formatError } from '../utils/index.ts';
+import Loading from '../components/common/Loading.tsx';
+
+const HomePage: React.FC = () => {
+  const [name, setName] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await registerAndNavigate(name.trim() || null);
+  };
+
+  const handleSkip = async () => {
+    await registerAndNavigate(null);
+  };
+
+  const registerAndNavigate = async (userName: string | null) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const uniqueId = getOrCreateUniqueId();
+      const user = await registerUser({
+        unique_id: uniqueId,
+        name: userName,
+      });
+
+      // Store user_id for future API calls
+      setUserId(user.id);
+
+      // Navigate to analysis page
+      navigate('/analysis');
+    } catch (err) {
+      const errorMessage = formatError(err);
+      setError(errorMessage);
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-slate-50">
+        <Loading />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10">
+      <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white shadow-sm">
+        <div className="border-b border-slate-200 px-6 py-6">
+          <h1 className="text-2xl font-bold text-slate-800">
+            Welcome to NLP IBM Debater
+          </h1>
+          <p className="mt-2 text-sm text-slate-500">
+            Enter your name to get started, or skip to use a random name.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6 p-6">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-slate-700"
+            >
+              Your Name (Optional)
+            </label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter your name"
+              maxLength={100}
+              className="mt-2 w-full rounded-md border border-slate-300 px-4 py-2 text-sm text-slate-700 placeholder-slate-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-20"
+              disabled={isLoading}
+            />
+          </div>
+
+          {error && (
+            <div className="rounded-md bg-red-50 p-3">
+              <p className="text-sm text-red-600">{error}</p>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-3 sm:flex-row">
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="flex-1 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              Continue
+            </button>
+            <button
+              type="button"
+              onClick={handleSkip}
+              disabled={isLoading}
+              className="flex-1 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              Skip (Random Name)
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
+

src/app/services/analysis.service.ts

@@ -0,0 +1,83 @@
+/**
+ * Analysis service for API calls related to argument analysis
+ */
+
+import api from './api-wrapper.ts';
+import type {
+  AnalysisRequest,
+  AnalysisResponse,
+  GetAnalysisResponse,
+} from '../types/analysis.types.ts';
+import { API_ENDPOINTS } from '../constants/index.ts';
+import { getUserId } from '../utils/index.ts';
+
+/**
+ * Analyze arguments from JSON body
+ */
+export async function analyzeArguments(
+  request: AnalysisRequest
+): Promise<AnalysisResponse> {
+  return api.post<AnalysisResponse, AnalysisRequest>(
+    API_ENDPOINTS.ANALYSIS,
+    request
+  );
+}
+
+/**
+ * Analyze arguments from CSV file upload
+ */
+export async function analyzeArgumentsFromCsv(
+  file: File
+): Promise<AnalysisResponse> {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const BASE_URL =
+    process.env.REACT_APP_API_BASE_URL?.replace(/\/$/, '') || '';
+  const url = `${BASE_URL}${API_ENDPOINTS.ANALYSIS_CSV}`;
+
+  // Get user ID for header
+  const userId = getUserId();
+  const headers: Record<string, string> = {};
+  if (userId) {
+    headers['X-User-ID'] = userId;
+  }
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: formData,
+  });
+
+  const contentType = response.headers.get('content-type');
+  const isJson = contentType?.includes('application/json');
+  const payload = isJson ? await response.json().catch(() => undefined) : undefined;
+
+  if (!response.ok) {
+    const error = {
+      status: response.status,
+      message:
+        (payload as { detail?: string })?.detail ||
+        (payload as { message?: string })?.message ||
+        response.statusText ||
+        'Request failed',
+      details: payload,
+    };
+    throw error;
+  }
+
+  return payload as AnalysisResponse;
+}
+
+/**
+ * Get user's analysis results
+ */
+export async function getAnalysisResults(
+  limit: number = 100,
+  offset: number = 0
+): Promise<GetAnalysisResponse> {
+  return api.get<GetAnalysisResponse>(
+    `${API_ENDPOINTS.ANALYSIS}?limit=${limit}&offset=${offset}`
+  );
+}
+

src/app/services/api-wrapper.ts

@@ -1,4 +1,5 @@
-import type { ApiRequestOptions, ApiError } from '../types/api.types';
+import type { ApiRequestOptions, ApiError } from '../types/api.types.ts';
+import { getUserId } from '../utils/index.ts';
 
 const DEFAULT_HEADERS: HeadersInit = {
   'Content-Type': 'application/json',
@@ -18,12 +19,29 @@ export async function apiRequest<TResponse = unknown, TBody = unknown>({
 }: ApiRequestOptions<TBody>): Promise<TResponse> {
   const url = `${BASE_URL}${path.startsWith('/') ? '' : '/'}${path}`;
 
+  // Automatically include user ID header if available
+  const userId = getUserId();
+  
+  // Convert headers to plain object if needed
+  let baseHeaders: Record<string, string> = {};
+  if (headers instanceof Headers) {
+    baseHeaders = Object.fromEntries(headers.entries());
+  } else if (headers) {
+    baseHeaders = headers as Record<string, string>;
+  }
+  
+  const requestHeaders: Record<string, string> = {
+    ...(DEFAULT_HEADERS as Record<string, string>),
+    ...baseHeaders,
+  };
+
+  if (userId) {
+    requestHeaders['X-User-ID'] = userId;
+  }
+
   const response = await fetch(url, {
     method,
-    headers: {
-      ...DEFAULT_HEADERS,
-      ...(headers ?? {}),
-    },
+    headers: requestHeaders,
     body: body ? JSON.stringify(body) : undefined,
     signal,
   });

src/app/services/user.service.ts

@@ -0,0 +1,76 @@
+/**
+ * User service for API calls related to user management
+ */
+
+import api from './api-wrapper.ts';
+import type {
+  UserRegisterRequest,
+  UserRegisterResponse,
+  UserUpdateNameRequest,
+  UserUpdateNameResponse,
+  User,
+} from '../types/user.types.ts';
+import { API_ENDPOINTS } from '../constants/index.ts';
+import { getUserId } from '../utils/index.ts';
+
+/**
+ * Register a new user or get existing user by unique_id
+ */
+export async function registerUser(
+  request: UserRegisterRequest
+): Promise<UserRegisterResponse> {
+  return api.post<UserRegisterResponse, UserRegisterRequest>(
+    API_ENDPOINTS.USER_REGISTER,
+    request
+  );
+}
+
+/**
+ * Get current user by user_id (requires X-User-ID header)
+ */
+export async function getCurrentUser(): Promise<User> {
+  const userId = getUserId();
+  if (!userId) {
+    throw new Error('User ID not found in localStorage');
+  }
+
+  return api.get<User>(API_ENDPOINTS.USER_ME, {
+    headers: {
+      'X-User-ID': userId,
+    },
+  });
+}
+
+/**
+ * Get user by unique_id
+ */
+export async function getUserByUniqueId(
+  uniqueId: string
+): Promise<User> {
+  return api.get<User>(
+    `${API_ENDPOINTS.USER_BY_UNIQUE_ID}?unique_id=${encodeURIComponent(uniqueId)}`
+  );
+}
+
+/**
+ * Update user's display name
+ */
+export async function updateUserName(
+  request: UserUpdateNameRequest
+): Promise<UserUpdateNameResponse> {
+  const userId = getUserId();
+  if (!userId) {
+    throw new Error('User ID not found in localStorage');
+  }
+
+  return api.patch<UserUpdateNameResponse, UserUpdateNameRequest>(
+    API_ENDPOINTS.USER_UPDATE_NAME,
+    request,
+    {
+      headers: {
+        'X-User-ID': userId,
+      },
+    }
+  );
+}
+

src/app/types/analysis.types.ts

@@ -0,0 +1,49 @@
+export type CsvRow = Record<string, string>;
+
+export type CsvParseResult = {
+  headers: string[];
+  rows: CsvRow[];
+};
+
+/**
+ * Analysis result for a single argument
+ */
+export type AnalysisResult = {
+  id: string;
+  user_id: string;
+  argument: string;
+  topic: string;
+  predicted_stance: 'PRO' | 'CON';
+  confidence: number;
+  probability_con: number;
+  probability_pro: number;
+  created_at: string;
+  updated_at: string;
+};
+
+/**
+ * Response from analysis endpoint
+ */
+export type AnalysisResponse = {
+  results: AnalysisResult[];
+  total_processed: number;
+  timestamp: string;
+};
+
+/**
+ * Request for analysis with JSON body
+ */
+export type AnalysisRequest = {
+  arguments: string[];
+};
+
+/**
+ * Response from get analysis results endpoint
+ */
+export type GetAnalysisResponse = {
+  results: AnalysisResult[];
+  total: number;
+  limit: number;
+  offset: number;
+};
+

src/app/types/index.ts

@@ -1,7 +1,9 @@
 /**
  * Central export point for all types
- * Import types from here: import { SomeType } from '../types';
+ * Import types from here: import { SomeType } from '../types/index.ts';
  */
 
-export * from './api.types';
+export * from './api.types.ts';
+export * from './analysis.types.ts';
+export * from './user.types.ts';
 

src/app/types/user.types.ts

@@ -0,0 +1,25 @@
+/**
+ * User-related TypeScript types
+ */
+
+export type User = {
+  id: string;
+  unique_id: string;
+  name: string;
+  created_at: string;
+  updated_at: string;
+};
+
+export type UserRegisterRequest = {
+  unique_id: string;
+  name?: string | null;
+};
+
+export type UserRegisterResponse = User;
+
+export type UserUpdateNameRequest = {
+  name: string;
+};
+
+export type UserUpdateNameResponse = User;
+

src/app/utils/index.ts

@@ -2,6 +2,11 @@
  * Utility functions and helpers
  */
 
+import { CsvParseResult, CsvRow } from '../types/index.ts';
+
+// Export user utilities
+export * from './user.utils.ts';
+
 /**
  * Debounce function - delays execution until after wait time
  */
@@ -49,3 +54,65 @@ export function isEmpty(value: unknown): boolean {
   return false;
 }
 
+/**
+ * Parse a CSV string into headers and rows.
+ * Supports quoted fields and trims whitespace around values.
+ */
+export function parseCsv(content: string): CsvParseResult {
+  const lines = content.split(/\r?\n/).filter((line) => line.trim().length > 0);
+
+  if (lines.length === 0) {
+    return { headers: [], rows: [] };
+  }
+
+  const parseLine = (line: string): string[] => {
+    const cells: string[] = [];
+    let current = '';
+    let inQuotes = false;
+
+    for (let i = 0; i < line.length; i += 1) {
+      const char = line[i];
+      const nextChar = line[i + 1];
+
+      if (char === '"') {
+        if (inQuotes && nextChar === '"') {
+          current += '"';
+          i += 1;
+        } else {
+          inQuotes = !inQuotes;
+        }
+      } else if (char === ',' && !inQuotes) {
+        cells.push(current.trim());
+        current = '';
+      } else {
+        current += char;
+      }
+    }
+
+    cells.push(current.trim());
+    return cells;
+  };
+
+  const headers = parseLine(lines[0]).map((header, index) =>
+    header ? header : `column_${index + 1}`
+  );
+
+  const rows: CsvRow[] = lines.slice(1).map((line) => {
+    const values = parseLine(line);
+    const row: CsvRow = {};
+
+    headers.forEach((header, idx) => {
+      row[header] = values[idx]?.trim() ?? '';
+    });
+
+    return row;
+  });
+
+  return {
+    headers,
+    rows: rows.filter((row) =>
+      Object.values(row).some((value) => value !== undefined && value !== '')
+    ),
+  };
+}
+

src/app/utils/user.utils.ts

@@ -0,0 +1,51 @@
+/**
+ * User-related utility functions
+ */
+
+const UNIQUE_ID_KEY = 'user_unique_id';
+const USER_ID_KEY = 'user_id';
+
+/**
+ * Get or create a unique browser identifier
+ */
+export function getOrCreateUniqueId(): string {
+  let uniqueId = localStorage.getItem(UNIQUE_ID_KEY);
+
+  if (!uniqueId) {
+    // Generate a UUID v4
+    uniqueId = crypto.randomUUID();
+    localStorage.setItem(UNIQUE_ID_KEY, uniqueId);
+  }
+
+  return uniqueId;
+}
+
+/**
+ * Get user ID from localStorage
+ */
+export function getUserId(): string | null {
+  return localStorage.getItem(USER_ID_KEY);
+}
+
+/**
+ * Set user ID in localStorage
+ */
+export function setUserId(userId: string): void {
+  localStorage.setItem(USER_ID_KEY, userId);
+}
+
+/**
+ * Clear user data from localStorage
+ */
+export function clearUserData(): void {
+  localStorage.removeItem(USER_ID_KEY);
+  localStorage.removeItem(UNIQUE_ID_KEY);
+}
+
+/**
+ * Check if user is registered (has user_id)
+ */
+export function isUserRegistered(): boolean {
+  return getUserId() !== null;
+}
+