HTML Static Setup Web

.gitignore

@@ -16,6 +16,9 @@ node_modules/
 dist/
 build/
 
+# Runtime data
+data/
+
 # OS
 Thumbs.db
 .DS_Store

README.md

@@ -1,6 +1,6 @@
 # RepEx Web Starter
 
-Static HTML pages at the project root plus a minimal FastAPI backend.
+Static HTML pages at the project root served by a FastAPI backend (API + static files).
 
 ## Project Layout
 
@@ -35,7 +35,7 @@ Static HTML pages at the project root plus a minimal FastAPI backend.
 
 ## Quick Start
 
-### Server
+### Server (API + static pages)
 ```powershell
 python -m venv .venv
 .venv\Scripts\activate
@@ -43,12 +43,7 @@ pip install -r server/requirements.txt
 uvicorn server.app.main:app --reload --port 8000
 ```
 
-### Web
-Open `index.html` directly in your browser, or serve the root with a static server:
-```powershell
-python -m http.server 5173
-```
-Then open `http://localhost:5173`.
+Open `http://localhost:8000/index.html`.
 
 ## Configuration
 
@@ -56,3 +51,5 @@ Environment variables for the API:
 - `APP_NAME` (default: `Starter API`)
 - `API_PREFIX` (default: `/api`)
 - `CORS_ORIGINS` (comma-separated, default: `http://localhost:5173`)
+- `STORAGE_DIR` (default: `data`)
+- `MAX_UPLOAD_MB` (default: `50`)

components/report-editor.js

@@ -19,6 +19,10 @@ class ReportEditor extends HTMLElement {
       redo: [],
       payload: null,
     };
+
+    this.sessionId = null;
+    this.apiBase = null;
+    this._saveTimer = null;
   }
 
   connectedCallback() {
@@ -30,9 +34,15 @@ class ReportEditor extends HTMLElement {
   }
 
   // Public API
-  open({ payload, pageIndex = 0, totalPages = 6 } = {}) {
+  open({ payload, pageIndex = 0, totalPages = 6, sessionId = null } = {}) {
     this.state.payload = payload ?? null;
     this.state.isOpen = true;
+    this.sessionId =
+      sessionId ||
+      (window.REPEX && typeof window.REPEX.getSessionId === "function"
+        ? window.REPEX.getSessionId()
+        : null);
+    this.apiBase = window.REPEX && window.REPEX.apiBase ? window.REPEX.apiBase : null;
 
     // Load existing editor pages from storage, else initialize
     const stored = this._loadPages();
@@ -51,6 +61,19 @@ class ReportEditor extends HTMLElement {
 
     this.show();
     this.updateAll();
+
+    if (this.sessionId) {
+      this._loadPagesFromServer().then((pages) => {
+        if (pages && pages.length) {
+          this.state.pages = pages;
+          this.state.activePage = Math.min(
+            Math.max(0, pageIndex),
+            this.state.pages.length - 1
+          );
+          this.updateAll();
+        }
+      });
+    }
   }
 
   close() {
@@ -116,7 +139,7 @@ class ReportEditor extends HTMLElement {
                 <div class="space-y-2 max-h-[60vh] overflow-auto pr-1" data-page-list></div>
 
                 <div class="mt-3 text-xs text-gray-500">
-                  Tip: Click a page to edit. Your edits are saved to your browser storage.
+                  Tip: Click a page to edit. Your edits are saved to the server.
                 </div>
               </aside>
 
@@ -473,6 +496,9 @@ class ReportEditor extends HTMLElement {
 
   // ---------- Storage ----------
   _storageKey() {
+    if (this.sessionId) {
+      return `repex_report_pages_v1_${this.sessionId}`;
+    }
     return "repex_report_pages_v1";
   }
 
@@ -488,12 +514,58 @@ class ReportEditor extends HTMLElement {
   _savePages(showToast = false) {
     try {
       localStorage.setItem(this._storageKey(), JSON.stringify({ pages: this.state.pages }));
+      this._scheduleServerSave();
       if (showToast) this._toast("Saved");
     } catch {
       if (showToast) this._toast("Save failed");
     }
   }
 
+  _apiRoot() {
+    if (this.apiBase) return this.apiBase.replace(/\/$/, "");
+    if (window.REPEX && window.REPEX.apiBase) return window.REPEX.apiBase.replace(/\/$/, "");
+    return "";
+  }
+
+  async _loadPagesFromServer() {
+    const base = this._apiRoot();
+    if (!base || !this.sessionId) return null;
+    try {
+      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`);
+      if (!res.ok) return null;
+      const data = await res.json();
+      if (data && Array.isArray(data.pages)) {
+        return data.pages;
+      }
+    } catch {}
+    return null;
+  }
+
+  _scheduleServerSave() {
+    if (!this.sessionId) return;
+    if (this._saveTimer) clearTimeout(this._saveTimer);
+    this._saveTimer = setTimeout(() => {
+      this._savePagesToServer();
+    }, 800);
+  }
+
+  async _savePagesToServer() {
+    const base = this._apiRoot();
+    if (!base || !this.sessionId) return;
+    try {
+      const res = await fetch(`${base}/sessions/${this.sessionId}/pages`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ pages: this.state.pages }),
+      });
+      if (!res.ok) {
+        throw new Error("Failed");
+      }
+    } catch {
+      this._toast("Sync failed");
+    }
+  }
+
   _toast(text) {
     const el = document.createElement("div");
     el.className = "fixed z-[60] bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-gray-900 text-white text-sm font-semibold px-4 py-2 shadow";

edit-layouts.html

@@ -174,12 +174,7 @@ src="assets/prosento-logo.png"
           </div>
 
           <div class="text-xs text-gray-500">
-            Uses storage keys:
-            <div class="mt-1 font-mono text-[11px] text-gray-700">
-              repex_report_pages_v1<br>
-              repex_layout_settings_v1<br>
-              repex_report_payload
-            </div>
+            Stored in the active server session.
           </div>
         </div>
       </aside>
@@ -196,10 +191,8 @@ src="assets/prosento-logo.png"
     document.addEventListener('DOMContentLoaded', () => {
       if (window.feather && typeof window.feather.replace === 'function') feather.replace();
 
-      const PAGES_KEY = 'repex_report_pages_v1';
-      const LAYOUT_KEY = 'repex_layout_settings_v1';
-      const PAYLOAD_KEY = 'repex_report_payload';
-
+      const sessionId = window.REPEX.getSessionId();
+      window.REPEX.setSessionId(sessionId);
       const sumPages = document.getElementById('sumPages');
       const sumPhotos = document.getElementById('sumPhotos');
       const sumDocs = document.getElementById('sumDocs');
@@ -211,31 +204,17 @@ src="assets/prosento-logo.png"
       const incTimestamp = document.getElementById('incTimestamp');
       const downloadJson = document.getElementById('downloadJson');
 
-      function loadJson(key) {
-        try {
-          const raw = localStorage.getItem(key);
-          return raw ? JSON.parse(raw) : null;
-        } catch {
-          return null;
-        }
+      if (!sessionId) {
+        sumPages.textContent = 'No active session.';
+        sumPhotos.textContent = '-';
+        sumDocs.textContent = '-';
+        sumData.textContent = '-';
+        downloadJson.disabled = true;
+        return;
       }
 
-      const pagesObj = loadJson(PAGES_KEY);
-      const pages = pagesObj?.pages ?? [];
-      const layout = loadJson(LAYOUT_KEY);
-      const payload = loadJson(PAYLOAD_KEY);
-
-      const selectedPhotos = payload?.selectedPhotoIndices?.length ?? 0;
-      const docs = payload?.uploads?.documents?.length ?? 0;
-      const dataFiles = payload?.uploads?.dataFiles?.length ?? 0;
-
-      // Count total items
-      const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
-
-      sumPages.textContent = pages.length ? `${pages.length} pages • ${totalItems} total items` : 'No saved pages yet';
-      sumPhotos.textContent = `${selectedPhotos}`;
-      sumDocs.textContent = `${docs}`;
-      sumData.textContent = `${dataFiles}`;
+      let session = null;
+      let pages = [];
 
       function downloadBlob(filename, text) {
         const blob = new Blob([text], { type: 'application/json' });
@@ -249,16 +228,37 @@ src="assets/prosento-logo.png"
         URL.revokeObjectURL(url);
       }
 
+      function updateSummary() {
+        const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
+        sumPages.textContent = pages.length ? `${pages.length} pages ? ${totalItems} total items` : 'No saved pages yet';
+        sumPhotos.textContent = `${session?.selected_photo_ids?.length ?? 0}`;
+        sumDocs.textContent = `${session?.uploads?.documents?.length ?? 0}`;
+        sumData.textContent = `${session?.uploads?.data_files?.length ?? 0}`;
+      }
+
+      async function loadData() {
+        try {
+          session = await window.REPEX.request(`/sessions/${sessionId}`);
+          const pageResp = await window.REPEX.request(`/sessions/${sessionId}/pages`);
+          pages = Array.isArray(pageResp?.pages) ? pageResp.pages : [];
+          updateSummary();
+        } catch (err) {
+          sumPages.textContent = err.message || 'Failed to load session.';
+        }
+      }
+
       downloadJson.addEventListener('click', () => {
         const pack = {};
-        if (incPages.checked) pack.pages = pagesObj ?? null;
-        if (incLayout.checked) pack.layout = layout ?? null;
-        if (incPayload.checked) pack.payload = payload ?? null;
+        if (incPages.checked) pack.pages = pages;
+        if (incLayout.checked) pack.layout = session?.layout ?? null;
+        if (incPayload.checked) pack.payload = session;
         if (incTimestamp.checked) pack.exportedAt = new Date().toISOString();
 
         const filename = `repex_report_package_${new Date().toISOString().replace(/[:.]/g,'-')}.json`;
         downloadBlob(filename, JSON.stringify(pack, null, 2));
       });
+
+      loadData();
     });
   </script>
 </body>

export.html

@@ -174,12 +174,7 @@ src="assets/prosento-logo.png"
           </div>
 
           <div class="text-xs text-gray-500">
-            Uses storage keys:
-            <div class="mt-1 font-mono text-[11px] text-gray-700">
-              repex_report_pages_v1<br>
-              repex_layout_settings_v1<br>
-              repex_report_payload
-            </div>
+            Stored in the active server session.
           </div>
         </div>
       </aside>
@@ -196,10 +191,8 @@ src="assets/prosento-logo.png"
     document.addEventListener('DOMContentLoaded', () => {
       if (window.feather && typeof window.feather.replace === 'function') feather.replace();
 
-      const PAGES_KEY = 'repex_report_pages_v1';
-      const LAYOUT_KEY = 'repex_layout_settings_v1';
-      const PAYLOAD_KEY = 'repex_report_payload';
-
+      const sessionId = window.REPEX.getSessionId();
+      window.REPEX.setSessionId(sessionId);
       const sumPages = document.getElementById('sumPages');
       const sumPhotos = document.getElementById('sumPhotos');
       const sumDocs = document.getElementById('sumDocs');
@@ -211,31 +204,17 @@ src="assets/prosento-logo.png"
       const incTimestamp = document.getElementById('incTimestamp');
       const downloadJson = document.getElementById('downloadJson');
 
-      function loadJson(key) {
-        try {
-          const raw = localStorage.getItem(key);
-          return raw ? JSON.parse(raw) : null;
-        } catch {
-          return null;
-        }
+      if (!sessionId) {
+        sumPages.textContent = 'No active session.';
+        sumPhotos.textContent = '-';
+        sumDocs.textContent = '-';
+        sumData.textContent = '-';
+        downloadJson.disabled = true;
+        return;
       }
 
-      const pagesObj = loadJson(PAGES_KEY);
-      const pages = pagesObj?.pages ?? [];
-      const layout = loadJson(LAYOUT_KEY);
-      const payload = loadJson(PAYLOAD_KEY);
-
-      const selectedPhotos = payload?.selectedPhotoIndices?.length ?? 0;
-      const docs = payload?.uploads?.documents?.length ?? 0;
-      const dataFiles = payload?.uploads?.dataFiles?.length ?? 0;
-
-      // Count total items
-      const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
-
-      sumPages.textContent = pages.length ? `${pages.length} pages • ${totalItems} total items` : 'No saved pages yet';
-      sumPhotos.textContent = `${selectedPhotos}`;
-      sumDocs.textContent = `${docs}`;
-      sumData.textContent = `${dataFiles}`;
+      let session = null;
+      let pages = [];
 
       function downloadBlob(filename, text) {
         const blob = new Blob([text], { type: 'application/json' });
@@ -249,18 +228,38 @@ src="assets/prosento-logo.png"
         URL.revokeObjectURL(url);
       }
 
+      function updateSummary() {
+        const totalItems = pages.reduce((acc, p) => acc + ((p?.items?.length) || 0), 0);
+        sumPages.textContent = pages.length ? `${pages.length} pages ? ${totalItems} total items` : 'No saved pages yet';
+        sumPhotos.textContent = `${session?.selected_photo_ids?.length ?? 0}`;
+        sumDocs.textContent = `${session?.uploads?.documents?.length ?? 0}`;
+        sumData.textContent = `${session?.uploads?.data_files?.length ?? 0}`;
+      }
+
+      async function loadData() {
+        try {
+          session = await window.REPEX.request(`/sessions/${sessionId}`);
+          const pageResp = await window.REPEX.request(`/sessions/${sessionId}/pages`);
+          pages = Array.isArray(pageResp?.pages) ? pageResp.pages : [];
+          updateSummary();
+        } catch (err) {
+          sumPages.textContent = err.message || 'Failed to load session.';
+        }
+      }
+
       downloadJson.addEventListener('click', () => {
         const pack = {};
-        if (incPages.checked) pack.pages = pagesObj ?? null;
-        if (incLayout.checked) pack.layout = layout ?? null;
-        if (incPayload.checked) pack.payload = payload ?? null;
+        if (incPages.checked) pack.pages = pages;
+        if (incLayout.checked) pack.layout = session?.layout ?? null;
+        if (incPayload.checked) pack.payload = session;
         if (incTimestamp.checked) pack.exportedAt = new Date().toISOString();
 
         const filename = `repex_report_package_${new Date().toISOString().replace(/[:.]/g,'-')}.json`;
         downloadBlob(filename, JSON.stringify(pack, null, 2));
       });
+
+      loadData();
     });
   </script>
-  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

index.html

@@ -134,6 +134,7 @@
       <div class="rounded-lg border border-gray-200 bg-white p-6">
         <!-- Drop zone -->
         <div
+          id="dropZone"
           class="rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center hover:border-blue-400 transition mb-6"
           role="button"
           tabindex="0"
@@ -147,14 +148,23 @@
           <p class="text-sm text-gray-600 mt-1 mb-4">or browse to upload</p>
 
           <button
+            id="browseFiles"
             type="button"
             class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-white font-semibold hover:bg-blue-700 transition"
           >
             Browse Files
           </button>
 
-          <p class="text-xs text-gray-500 mt-4">
-            Supports JPG, PNG, PDF, DOCX (Max 50MB each)
+          <input
+            id="uploadInput"
+            type="file"
+            class="hidden"
+            multiple
+            accept=".jpg,.jpeg,.png,.webp,.pdf,.doc,.docx,.csv,.xls,.xlsx"
+          />
+
+          <p id="fileList" class="text-xs text-gray-500 mt-4">
+            Supports JPG, PNG, PDF, DOCX, CSV, XLSX (Max 50MB each)
           </p>
         </div>
 
@@ -194,12 +204,14 @@
         </div>
 
         <button
+          id="generateReport"
           type="button"
           class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 text-white font-semibold hover:bg-emerald-700 transition"
         >
           <i data-feather="file-plus" class="h-5 w-5"></i>
           Generate Report
         </button>
+        <p id="uploadStatus" class="text-sm text-gray-600 mt-3"></p>
       </div>
     </section>
 
@@ -232,42 +244,10 @@
               </tr>
             </thead>
 
-            <tbody class="bg-white divide-y divide-gray-200">
+            <tbody id="recentReports" class="bg-white divide-y divide-gray-200">
               <tr>
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#RPT-2023-001</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Bridge Inspection - Main Span</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">2023-10-15</td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold bg-emerald-50 text-emerald-700 border-emerald-200">
-                    Completed
-                  </span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm">
-                  <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800 mr-3" aria-label="Download report">
-                    <i data-feather="download" class="h-4 w-4"></i>
-                  </a>
-                  <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="Edit report">
-                    <i data-feather="edit" class="h-4 w-4"></i>
-                  </a>
-                </td>
-              </tr>
-
-              <tr>
-                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#RPT-2023-002</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Building Facade Assessment</td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">2023-10-18</td>
-                <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold bg-amber-50 text-amber-700 border-amber-200">
-                    Processing
-                  </span>
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm">
-                  <a href="#" class="inline-flex items-center text-gray-400 cursor-not-allowed mr-3" aria-label="Download report (disabled)">
-                    <i data-feather="download" class="h-4 w-4"></i>
-                  </a>
-                  <a href="#" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="Edit report">
-                    <i data-feather="edit" class="h-4 w-4"></i>
-                  </a>
+                <td colspan="5" class="px-6 py-6 text-sm text-gray-500 text-center">
+                  No recent reports yet.
                 </td>
               </tr>
             </tbody>
@@ -291,6 +271,127 @@
       if (window.feather && typeof window.feather.replace === 'function') {
         window.feather.replace();
       }
+
+      const dropZone = document.getElementById('dropZone');
+      const browseFiles = document.getElementById('browseFiles');
+      const uploadInput = document.getElementById('uploadInput');
+      const fileList = document.getElementById('fileList');
+      const generateReport = document.getElementById('generateReport');
+      const uploadStatus = document.getElementById('uploadStatus');
+
+      const projectName = document.getElementById('projectName');
+      const inspectionDate = document.getElementById('inspectionDate');
+      const notes = document.getElementById('notes');
+
+      let selectedFiles = [];
+
+      const updateFileList = () => {
+        if (!selectedFiles.length) {
+          fileList.textContent = 'Supports JPG, PNG, PDF, DOCX, CSV, XLSX (Max 50MB each)';
+          return;
+        }
+        const summary = selectedFiles
+          .map((file) => `${file.name} (${window.REPEX.formatBytes(file.size)})`)
+          .join(' • ');
+        fileList.textContent = summary;
+      };
+
+      browseFiles.addEventListener('click', () => uploadInput.click());
+      uploadInput.addEventListener('change', (event) => {
+        selectedFiles = Array.from(event.target.files || []);
+        updateFileList();
+      });
+
+      const setDragState = (active) => {
+        dropZone.classList.toggle('border-blue-500', active);
+        dropZone.classList.toggle('bg-blue-50', active);
+      };
+
+      ['dragenter', 'dragover'].forEach((evt) => {
+        dropZone.addEventListener(evt, (event) => {
+          event.preventDefault();
+          setDragState(true);
+        });
+      });
+      ['dragleave', 'drop'].forEach((evt) => {
+        dropZone.addEventListener(evt, (event) => {
+          event.preventDefault();
+          setDragState(false);
+        });
+      });
+      dropZone.addEventListener('drop', (event) => {
+        const files = Array.from(event.dataTransfer.files || []);
+        if (files.length) {
+          selectedFiles = files;
+          uploadInput.value = '';
+          updateFileList();
+        }
+      });
+
+      generateReport.addEventListener('click', async () => {
+        if (!selectedFiles.length) {
+          uploadStatus.textContent = 'Please add at least one file to continue.';
+          uploadStatus.classList.add('text-amber-700');
+          return;
+        }
+        generateReport.disabled = true;
+        uploadStatus.textContent = 'Uploading files...';
+        uploadStatus.classList.remove('text-amber-700');
+
+        const formData = new FormData();
+        formData.append('project_name', projectName.value.trim());
+        formData.append('inspection_date', inspectionDate.value);
+        formData.append('notes', notes.value.trim());
+        selectedFiles.forEach((file) => formData.append('files', file));
+
+        try {
+          const session = await window.REPEX.postForm('/sessions', formData);
+          window.REPEX.setSessionId(session.id);
+          window.location.href = `processing.html?session=${encodeURIComponent(session.id)}`;
+        } catch (err) {
+          uploadStatus.textContent = err.message || 'Upload failed.';
+          uploadStatus.classList.add('text-red-600');
+          generateReport.disabled = false;
+        }
+      });
+
+      async function loadRecentReports() {
+        const table = document.getElementById('recentReports');
+        if (!table) return;
+        try {
+          const sessions = await window.REPEX.request('/sessions');
+          if (!Array.isArray(sessions) || sessions.length === 0) {
+            return;
+          }
+          table.innerHTML = '';
+          sessions.slice(0, 5).forEach((session) => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+              <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">#${session.id.slice(0, 8)}</td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${session.project_name || 'Untitled project'}</td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${session.created_at ? new Date(session.created_at).toLocaleDateString() : '-'}</td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold bg-emerald-50 text-emerald-700 border-emerald-200">
+                  ${session.status || 'ready'}
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm">
+                <a href="report-viewer.html?session=${session.id}" class="inline-flex items-center text-blue-700 hover:text-blue-800" aria-label="View report">
+                  <i data-feather="edit" class="h-4 w-4"></i>
+                </a>
+              </td>
+            `;
+            table.appendChild(row);
+          });
+          if (window.feather && typeof window.feather.replace === 'function') {
+            window.feather.replace();
+          }
+        } catch {
+          // ignore for now
+        }
+      }
+
+      loadRecentReports();
     });
   </script>
 </body>

processing.html

@@ -50,6 +50,30 @@
       if (window.feather && typeof window.feather.replace === 'function') {
         window.feather.replace();
       }
+
+      const sessionId = window.REPEX.getSessionId();
+      window.REPEX.setSessionId(sessionId);
+      if (!sessionId) {
+        const message = document.createElement('p');
+        message.className = 'text-sm text-red-600 mt-6 text-center';
+        message.textContent = 'No active session found. Return to the upload page.';
+        document.querySelector('main').appendChild(message);
+        return;
+      }
+
+      const poll = async () => {
+        try {
+          const status = await window.REPEX.request(`/sessions/${sessionId}/status`);
+          if (status?.status === 'ready') {
+            window.location.href = `review-setup.html?session=${encodeURIComponent(sessionId)}`;
+          }
+        } catch {
+          // keep polling on transient errors
+        }
+      };
+
+      poll();
+      setInterval(poll, 2000);
     });
   </script>
 </body>

report-viewer.html

@@ -85,13 +85,12 @@ src="assets/prosento-logo.png"
     <!-- Workflow buttons -->
     <nav class="mb-6 no-print" aria-label="Report workflow navigation">
       <div class="flex flex-wrap gap-2">
-        <button
-          type="button"
+        <span
           class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-900 px-4 py-2 text-sm font-semibold text-white"
         >
           <i data-feather="layout" class="h-4 w-4"></i>
           Report Viewer
-        </button>
+        </span>
 
         <button
           type="button"
@@ -102,21 +101,21 @@ src="assets/prosento-logo.png"
           Edit Report
         </button>
 
-        <button
-          type="button"
+        <a
+          href="edit-layouts.html"
           class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
         >
           <i data-feather="grid" class="h-4 w-4"></i>
           Edit Page Layouts
-        </button>
+        </a>
 
-        <button
-          type="button"
+        <a
+          href="export.html"
           class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition"
         >
           <i data-feather="download" class="h-4 w-4"></i>
           Export
-        </button>
+        </a>
       </div>
     </nav>
 
@@ -177,12 +176,18 @@ src="assets/prosento-logo.png"
   <script src="script.js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', () => {
-      // Feather icons
       if (window.feather && typeof window.feather.replace === 'function') {
         window.feather.replace();
       }
 
-      // Mount editor (hidden until opened)
+      const sessionId = window.REPEX.getSessionId();
+      window.REPEX.setSessionId(sessionId);
+      if (!sessionId) {
+        const meta = document.getElementById('viewerMeta');
+        if (meta) meta.textContent = 'No active session found. Return to upload to continue.';
+        return;
+      }
+
       const editor = document.createElement('report-editor');
       document.body.appendChild(editor);
       editor.style.display = 'none';
@@ -197,57 +202,35 @@ src="assets/prosento-logo.png"
       const pageTotal = document.getElementById('pageTotal');
       const editBtn = document.getElementById('edit-report');
 
-      // A4 model dimensions (must match editor)
       const BASE_W = 595;
       const BASE_H = 842;
 
-      // ---- Load payload from Review page (optional meta) ----
-      const payloadRaw = localStorage.getItem('repex_report_payload');
-      let payload = null;
-      try { payload = payloadRaw ? JSON.parse(payloadRaw) : null; } catch { payload = null; }
-
-      // ---- Pages storage used by editor ----
-      const PAGES_STORAGE_KEY = 'repex_report_pages_v1';
-
-      function loadEditorPages() {
-        try {
-          const raw = localStorage.getItem(PAGES_STORAGE_KEY);
-          const parsed = raw ? JSON.parse(raw) : null;
-          if (parsed && Array.isArray(parsed.pages)) return parsed.pages;
-          return null;
-        } catch {
-          return null;
-        }
-      }
-
-      // ---- State ----
       const state = {
         pageIndex: 0,
         totalPages: 6,
         editMode: false,
-        pages: null
+        pages: [],
+        session: null,
       };
 
       function setMeta() {
-        const selected = payload?.selectedPhotoIndices?.length ?? 0;
-        const docs = payload?.uploads?.documents?.length ?? 0;
-        const dataFiles = payload?.uploads?.dataFiles?.length ?? 0;
-
-        const hasEdits = !!state.pages;
+        const selected = state.session?.selected_photo_ids?.length ?? 0;
+        const docs = state.session?.uploads?.documents?.length ?? 0;
+        const dataFiles = state.session?.uploads?.data_files?.length ?? 0;
+        const hasEdits = state.pages.length > 0;
         viewerMeta.textContent =
-          `Selected example photos: ${selected} • Documents: ${docs} • Data files: ${dataFiles}` +
-          (hasEdits ? ` • Edited pages loaded` : ` • No saved edits yet`);
+          `Selected example photos: ${selected} ? Documents: ${docs} ? Data files: ${dataFiles}` +
+          (hasEdits ? ' ? Edited pages loaded' : ' ? No saved edits yet');
       }
 
       function renderControls() {
-        pageTotal.textContent = String(state.totalPages);
+        pageTotal.textContent = String(state.totalPages || 1);
         pageNumber.textContent = String(state.pageIndex + 1);
         prevPageBtn.disabled = state.pageIndex === 0;
-        nextPageBtn.disabled = state.pageIndex === state.totalPages - 1;
+        nextPageBtn.disabled = state.pageIndex >= state.totalPages - 1;
       }
 
       function stageScale() {
-        // stage width is in CSS pixels; map model coords to it
         const rect = pageStage.getBoundingClientRect();
         return rect.width / BASE_W;
       }
@@ -262,16 +245,13 @@ src="assets/prosento-logo.png"
         const items = pageObj?.items ?? [];
         const hasItems = items.length > 0;
 
-        // page background style
         pageStage.classList.toggle('page-empty', !hasItems);
         pageStage.classList.toggle('page-white', hasItems);
 
-        // If empty, leave blank red page
         if (!hasItems) return;
 
         const scale = stageScale();
 
-        // Render items sorted by z
         items
           .slice()
           .sort((a, b) => (a.z ?? 0) - (b.z ?? 0))
@@ -325,16 +305,28 @@ src="assets/prosento-logo.png"
           });
       }
 
-      function renderPage() {
-        // Reload pages each time to reflect saved edits immediately
-        state.pages = loadEditorPages();
-        state.totalPages = state.pages?.length ?? state.totalPages;
+      async function fetchSession() {
+        const session = await window.REPEX.request(`/sessions/${sessionId}`);
+        state.session = session;
+        state.totalPages = session.page_count || state.totalPages;
+      }
 
-        renderControls();
+      async function fetchPages() {
+        try {
+          const result = await window.REPEX.request(`/sessions/${sessionId}/pages`);
+          state.pages = Array.isArray(result?.pages) ? result.pages : [];
+          if (state.pages.length) {
+            state.totalPages = Math.max(state.totalPages, state.pages.length);
+          }
+        } catch {
+          state.pages = [];
+        }
+      }
 
-        const pageObj = state.pages ? state.pages[state.pageIndex] : null;
+      function renderPage() {
+        renderControls();
+        const pageObj = state.pages?.[state.pageIndex] ?? null;
         renderStageFromPage(pageObj);
-
         setMeta();
       }
 
@@ -357,14 +349,11 @@ src="assets/prosento-logo.png"
         editor.style.display = 'block';
         viewerSection.classList.add('hidden');
 
-        // Ensure the editor has the latest page count
-        const pages = loadEditorPages();
-        const totalPages = pages?.length ?? state.totalPages;
-
         editor.open({
-          payload,
+          payload: state.session,
           pageIndex: state.pageIndex,
-          totalPages
+          totalPages: state.totalPages,
+          sessionId,
         });
 
         editBtn.classList.add('bg-gray-900', 'text-white', 'border-gray-900');
@@ -375,7 +364,7 @@ src="assets/prosento-logo.png"
         }
       }
 
-      function closeEditor() {
+      async function closeEditor() {
         state.editMode = false;
         editor.style.display = 'none';
         viewerSection.classList.remove('hidden');
@@ -383,19 +372,20 @@ src="assets/prosento-logo.png"
         editBtn.classList.remove('bg-gray-900', 'text-white', 'border-gray-900');
         editBtn.classList.add('bg-white', 'text-gray-800', 'border-gray-200');
 
-        // Re-render to reflect latest saved edits
+        await fetchPages();
         renderPage();
       }
 
-      // Events
       prevPageBtn.addEventListener('click', prevPage);
       nextPageBtn.addEventListener('click', nextPage);
 
-      document.getElementById('edit-report').addEventListener('click', () => {
+      editBtn.addEventListener('click', () => {
         if (!state.editMode) openEditor();
       });
 
-      editor.addEventListener('editor-closed', closeEditor);
+      editor.addEventListener('editor-closed', () => {
+        closeEditor();
+      });
 
       window.addEventListener('keydown', (e) => {
         if (state.editMode) return;
@@ -403,7 +393,6 @@ src="assets/prosento-logo.png"
         if (e.key === 'ArrowLeft') prevPage();
       });
 
-      // Re-render on resize so scaling stays correct
       window.addEventListener('resize', () => {
         if (!state.editMode) renderPage();
       });
@@ -412,8 +401,11 @@ src="assets/prosento-logo.png"
         document.querySelectorAll('img').forEach(img => (img.loading = 'eager'));
       });
 
-      // Initial render
-      renderPage();
+      (async () => {
+        await fetchSession();
+        await fetchPages();
+        renderPage();
+      })();
     });
   </script>
 </body>

review-setup.html

@@ -202,34 +202,10 @@ src="assets/prosento-logo.png"
   <script src="script.js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', () => {
-      // Feather icons
       if (window.feather && typeof window.feather.replace === 'function') {
         window.feather.replace();
       }
 
-      // ---- Simulated "uploads processed" payload ----
-      // Replace this with the real payload passed from the progress page (e.g., localStorage, URL params, backend session).
-      const processedUploads = {
-        photos: [
-          { name: 'photo_01.jpg', url: 'https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Picture2.png' },
-          { name: 'photo_02.jpg', url: 'https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Screenshot%202026-02-02%20100102.png' },
-          { name: 'photo_03.jpg', url: 'https://huggingface.co/spaces/ChristopherJKoen/minefix-simm-inspector/resolve/main/images/Picture2.png' }
-        ],
-        documents: [
-          { name: 'inspection_notes.pdf', type: 'PDF' },
-          { name: 'supporting_docs.docx', type: 'DOCX' }
-        ],
-        dataFiles: [
-          { name: 'report_data.xlsx', type: 'XLSX' }
-        ]
-      };
-
-      // ---- State ----
-      const state = {
-        selectedPhotoIds: new Set(),
-      };
-
-      // ---- Elements ----
       const photoGrid = document.getElementById('photoGrid');
       const photoCount = document.getElementById('photoCount');
       const photoSelected = document.getElementById('photoSelected');
@@ -246,34 +222,62 @@ src="assets/prosento-logo.png"
       const readyStatus = document.getElementById('readyStatus');
       const continueBtn = document.getElementById('continueBtn');
 
-      function renderUploads() {
-        // Photos
-        const photos = processedUploads.photos || [];
+      const sessionId = window.REPEX.getSessionId();
+      window.REPEX.setSessionId(sessionId);
+      if (!sessionId) {
+        readyStatus.textContent = 'No active session found. Return to upload to continue.';
+        readyStatus.className = 'font-semibold text-red-600';
+        continueBtn.disabled = true;
+        return;
+      }
+
+      const state = {
+        selectedPhotoIds: new Set(),
+      };
+
+      function updateSelectionState() {
+        photoSelected.textContent = String(state.selectedPhotoIds.size);
+        const canContinue = state.selectedPhotoIds.size > 0;
+        continueBtn.disabled = !canContinue;
+
+        if (!canContinue) {
+          readyStatus.textContent = 'Choose report example images to continue...';
+          readyStatus.className = 'font-semibold text-amber-700';
+        } else {
+          readyStatus.textContent = 'Ready. Continue to report viewer.';
+          readyStatus.className = 'font-semibold text-emerald-700';
+        }
+      }
+
+      function renderUploads(uploads, selectedIds) {
+        const photos = uploads.photos || [];
         photoCount.textContent = `${photos.length} file${photos.length === 1 ? '' : 's'}`;
 
-        photoGrid.innerHTML = photos.map((p, idx) => {
-          const id = `photo-${idx}`;
-          return `
-            <label class="group cursor-pointer">
-              <input type="checkbox" class="sr-only photoCheck" data-photo-id="${id}">
-              <div class="rounded-lg border border-gray-200 bg-gray-50 overflow-hidden group-has-[:checked]:ring-2 group-has-[:checked]:ring-emerald-200 group-has-[:checked]:border-emerald-300 transition">
-                <div class="relative">
-                  <img src="${p.url}" alt="${p.name}" class="h-28 w-full object-cover" loading="eager">
-                  <div class="absolute top-2 right-2 inline-flex items-center justify-center rounded-full bg-white/90 border border-gray-200 p-1.5 text-gray-700 group-has-[:checked]:bg-emerald-50 group-has-[:checked]:border-emerald-200 group-has-[:checked]:text-emerald-700">
-                    <i data-feather="check" class="h-4 w-4"></i>
+        photoGrid.innerHTML = photos.length
+          ? photos.map((p) => {
+              const checked = selectedIds.includes(p.id) ? 'checked' : '';
+              if (checked) state.selectedPhotoIds.add(p.id);
+              return `
+                <label class="group cursor-pointer">
+                  <input type="checkbox" class="sr-only photoCheck" data-photo-id="${p.id}" ${checked}>
+                  <div class="rounded-lg border border-gray-200 bg-gray-50 overflow-hidden group-has-[:checked]:ring-2 group-has-[:checked]:ring-emerald-200 group-has-[:checked]:border-emerald-300 transition">
+                    <div class="relative">
+                      <img src="${p.url}" alt="${p.name}" class="h-28 w-full object-cover" loading="eager">
+                      <div class="absolute top-2 right-2 inline-flex items-center justify-center rounded-full bg-white/90 border border-gray-200 p-1.5 text-gray-700 group-has-[:checked]:bg-emerald-50 group-has-[:checked]:border-emerald-200 group-has-[:checked]:text-emerald-700">
+                        <i data-feather="check" class="h-4 w-4"></i>
+                      </div>
+                    </div>
+                    <div class="p-2">
+                      <div class="text-xs font-semibold text-gray-900 truncate">${p.name}</div>
+                      <div class="text-xs text-gray-500">Click to select for report</div>
+                    </div>
                   </div>
-                </div>
-                <div class="p-2">
-                  <div class="text-xs font-semibold text-gray-900 truncate">${p.name}</div>
-                  <div class="text-xs text-gray-500">Click to select for report</div>
-                </div>
-              </div>
-            </label>
-          `;
-        }).join('');
+                </label>
+              `;
+            }).join('')
+          : `<div class="col-span-full text-sm text-gray-500">No photos were uploaded.</div>`;
 
-        // Documents
-        const docs = processedUploads.documents || [];
+        const docs = uploads.documents || [];
         docCount.textContent = `${docs.length} file${docs.length === 1 ? '' : 's'}`;
         docList.innerHTML = docs.length
           ? docs.map(d => `
@@ -282,14 +286,13 @@ src="assets/prosento-logo.png"
                   <i data-feather="file-text" class="h-4 w-4 text-gray-600"></i>
                   <span class="truncate text-gray-800">${d.name}</span>
                 </div>
-                <span class="text-xs font-semibold text-gray-600">${d.type}</span>
+                <span class="text-xs font-semibold text-gray-600">${d.content_type || 'File'}</span>
               </li>
             `).join('')
           : `<li class="text-sm text-gray-500">No supporting documents detected.</li>`;
         docHint.style.display = docs.length ? 'none' : 'block';
 
-        // Data files
-        const dataFiles = processedUploads.dataFiles || [];
+        const dataFiles = uploads.data_files || [];
         dataCount.textContent = `${dataFiles.length} file${dataFiles.length === 1 ? '' : 's'}`;
         dataBox.innerHTML = dataFiles.length
           ? dataFiles.map(f => `
@@ -299,7 +302,7 @@ src="assets/prosento-logo.png"
                     <i data-feather="table" class="h-4 w-4 text-amber-700"></i>
                     <span class="truncate font-semibold text-gray-900">${f.name}</span>
                   </div>
-                  <span class="text-xs font-semibold text-gray-600">${f.type}</span>
+                  <span class="text-xs font-semibold text-gray-600">${f.content_type || 'Data'}</span>
                 </div>
                 <div class="text-xs text-gray-600 mt-1">
                   Will populate report data areas (tables/fields).
@@ -313,31 +316,22 @@ src="assets/prosento-logo.png"
             </div>
           `;
 
-        // Icons for dynamic content
         if (window.feather && typeof window.feather.replace === 'function') {
           window.feather.replace();
         }
       }
 
-      function updateSelectionState() {
-        photoSelected.textContent = String(state.selectedPhotoIds.size);
-        const canContinue = state.selectedPhotoIds.size > 0;
-        continueBtn.disabled = !canContinue;
-
-        if (!canContinue) {
-          readyStatus.textContent = 'Choose report example images to continue…';
-          readyStatus.className = 'font-semibold text-amber-700';
-        } else {
-          readyStatus.textContent = 'Ready. Continue to report viewer.';
-          readyStatus.className = 'font-semibold text-emerald-700';
+      async function loadSession() {
+        try {
+          const session = await window.REPEX.request(`/sessions/${sessionId}`);
+          renderUploads(session.uploads || {}, session.selected_photo_ids || []);
+          updateSelectionState();
+        } catch (err) {
+          readyStatus.textContent = err.message || 'Failed to load session.';
+          readyStatus.className = 'font-semibold text-red-600';
         }
       }
 
-      // Init render
-      renderUploads();
-      updateSelectionState();
-
-      // Photo selection tracking
       photoGrid.addEventListener('change', (e) => {
         const cb = e.target.closest('.photoCheck');
         if (!cb) return;
@@ -361,24 +355,21 @@ src="assets/prosento-logo.png"
         updateSelectionState();
       });
 
-      // Continue → go to report-viewer.html and pass selections
-      continueBtn.addEventListener('click', () => {
+      continueBtn.addEventListener('click', async () => {
         if (state.selectedPhotoIds.size === 0) return;
-
-        const selectedIndices = Array.from(state.selectedPhotoIds)
-          .map(id => Number(id.replace('photo-', '')))
-          .filter(n => Number.isFinite(n));
-
-        const payload = {
-          // what the viewer might need later
-          selectedPhotoIndices: selectedIndices,
-          uploads: processedUploads,
-          createdAt: new Date().toISOString(),
-        };
-
-        localStorage.setItem('repex_report_payload', JSON.stringify(payload));
-        window.location.href = 'report-viewer.html';
+        const selectedIds = Array.from(state.selectedPhotoIds);
+        try {
+          await window.REPEX.putJson(`/sessions/${sessionId}/selection`, {
+            selected_photo_ids: selectedIds,
+          });
+          window.location.href = `report-viewer.html?session=${encodeURIComponent(sessionId)}`;
+        } catch (err) {
+          readyStatus.textContent = err.message || 'Failed to save selection.';
+          readyStatus.className = 'font-semibold text-red-600';
+        }
       });
+
+      loadSession();
     });
   </script>
 </body>

script.js

@@ -1 +1,107 @@
 "use strict";
+
+(function () {
+  const SESSION_KEY = "repex_session_id";
+  const apiBase =
+    window.REPEX_API_BASE ||
+    new URL("/api", window.location.origin).toString().replace(/\/$/, "");
+
+  function getSessionId() {
+    const params = new URLSearchParams(window.location.search);
+    return params.get("session") || localStorage.getItem(SESSION_KEY) || "";
+  }
+
+  function setSessionId(id) {
+    if (!id) return;
+    localStorage.setItem(SESSION_KEY, id);
+  }
+
+  function clearSessionId() {
+    localStorage.removeItem(SESSION_KEY);
+  }
+
+  function formatBytes(bytes) {
+    if (!Number.isFinite(bytes)) return "0 B";
+    const units = ["B", "KB", "MB", "GB"];
+    let value = bytes;
+    let idx = 0;
+    while (value >= 1024 && idx < units.length - 1) {
+      value /= 1024;
+      idx += 1;
+    }
+    return `${value.toFixed(value >= 10 || idx === 0 ? 0 : 1)} ${units[idx]}`;
+  }
+
+  async function request(path, options = {}) {
+    const url = `${apiBase}${path}`;
+    const res = await fetch(url, {
+      credentials: "same-origin",
+      ...options,
+    });
+    if (!res.ok) {
+      let detail = res.statusText;
+      try {
+        const data = await res.json();
+        detail = data?.detail || detail;
+      } catch {}
+      throw new Error(detail);
+    }
+    if (res.status === 204) return null;
+    const contentType = res.headers.get("content-type") || "";
+    if (contentType.includes("application/json")) {
+      return res.json();
+    }
+    return res.text();
+  }
+
+  async function postForm(path, formData) {
+    return request(path, { method: "POST", body: formData });
+  }
+
+  async function postJson(path, body) {
+    return request(path, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+  }
+
+  async function putJson(path, body) {
+    return request(path, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+  }
+
+  function applySessionToLinks() {
+    const sessionId = getSessionId();
+    if (!sessionId) return;
+    document.querySelectorAll('a[href$=".html"]').forEach((link) => {
+      const href = link.getAttribute("href");
+      if (!href || href.startsWith("http")) return;
+      const url = new URL(href, window.location.origin);
+      if (!url.searchParams.get("session")) {
+        url.searchParams.set("session", sessionId);
+        link.setAttribute("href", `${url.pathname}${url.search}`);
+      }
+    });
+  }
+
+  window.REPEX = {
+    apiBase,
+    getSessionId,
+    setSessionId,
+    clearSessionId,
+    request,
+    postForm,
+    postJson,
+    putJson,
+    formatBytes,
+    applySessionToLinks,
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    applySessionToLinks();
+  });
+})();

server/app/api/deps.py

@@ -0,0 +1,8 @@
+from functools import lru_cache
+
+from ..services import SessionStore
+
+
+@lru_cache
+def get_session_store() -> SessionStore:
+    return SessionStore()

server/app/api/router.py

@@ -1,8 +1,10 @@
 from fastapi import APIRouter
 
 from .routes.health import router as health_router
+from .routes.sessions import router as sessions_router
 
 api_router = APIRouter()
 api_router.include_router(health_router, tags=["system"])
+api_router.include_router(sessions_router, prefix="/sessions", tags=["sessions"])
 
 __all__ = ["api_router"]

server/app/api/routes/__init__.py

@@ -1,3 +1,4 @@
 from .health import router as health_router
+from .sessions import router as sessions_router
 
-__all__ = ["health_router"]
+__all__ = ["health_router", "sessions_router"]

server/app/api/routes/sessions.py

@@ -0,0 +1,166 @@
+from __future__ import annotations
+
+import json
+from pathlib import Path
+from typing import List
+
+from fastapi import APIRouter, Depends, File, Form, HTTPException, UploadFile, status
+from fastapi.responses import FileResponse
+
+from ..deps import get_session_store
+from ..schemas import (
+    PagesRequest,
+    PagesResponse,
+    SelectionRequest,
+    SessionResponse,
+    SessionStatusResponse,
+)
+from ...services import SessionStore
+
+
+router = APIRouter()
+
+
+def _attach_urls(session: dict) -> dict:
+    session = dict(session)
+    uploads = {}
+    for category, items in (session.get("uploads") or {}).items():
+        enriched = []
+        for item in items:
+            enriched.append(
+                {
+                    **item,
+                    "url": f"/api/sessions/{session['id']}/uploads/{item['id']}",
+                }
+            )
+        uploads[category] = enriched
+    session["uploads"] = uploads
+    return session
+
+
+@router.get("", response_model=List[SessionResponse])
+def list_sessions(store: SessionStore = Depends(get_session_store)) -> List[SessionResponse]:
+    sessions = store.list_sessions()
+    sessions.sort(key=lambda item: item.get("created_at", ""), reverse=True)
+    return [_attach_urls(session) for session in sessions]
+
+
+@router.post("", response_model=SessionResponse, status_code=status.HTTP_201_CREATED)
+def create_session(
+    project_name: str = Form(""),
+    inspection_date: str = Form(""),
+    notes: str = Form(""),
+    files: List[UploadFile] = File(...),
+    store: SessionStore = Depends(get_session_store),
+) -> SessionResponse:
+    if not files:
+        raise HTTPException(status_code=400, detail="At least one file is required.")
+
+    session = store.create_session(project_name, inspection_date, notes)
+    saved_files = []
+    for upload in files:
+        try:
+            saved_files.append(store.save_upload(session["id"], upload))
+        except ValueError as exc:
+            raise HTTPException(status_code=413, detail=str(exc)) from exc
+        finally:
+            try:
+                upload.file.close()
+            except Exception:
+                pass
+
+    session = store.add_uploads(session, saved_files)
+    return _attach_urls(session)
+
+
+@router.get("/{session_id}", response_model=SessionResponse)
+def get_session(session_id: str, store: SessionStore = Depends(get_session_store)) -> SessionResponse:
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    return _attach_urls(session)
+
+
+@router.get("/{session_id}/status", response_model=SessionStatusResponse)
+def get_session_status(
+    session_id: str, store: SessionStore = Depends(get_session_store)
+) -> SessionStatusResponse:
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    return SessionStatusResponse(
+        id=session["id"], status=session["status"], updated_at=session["updated_at"]
+    )
+
+
+@router.put("/{session_id}/selection", response_model=SessionResponse)
+def update_selection(
+    session_id: str,
+    payload: SelectionRequest,
+    store: SessionStore = Depends(get_session_store),
+) -> SessionResponse:
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    session = store.set_selected_photos(session, payload.selected_photo_ids)
+    return _attach_urls(session)
+
+
+@router.get("/{session_id}/pages", response_model=PagesResponse)
+def get_pages(session_id: str, store: SessionStore = Depends(get_session_store)) -> PagesResponse:
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    pages = store.ensure_pages(session)
+    return PagesResponse(pages=pages)
+
+
+@router.put("/{session_id}/pages", response_model=PagesResponse)
+def save_pages(
+    session_id: str,
+    payload: PagesRequest,
+    store: SessionStore = Depends(get_session_store),
+) -> PagesResponse:
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    session = store.set_pages(session, payload.pages)
+    return PagesResponse(pages=session.get("pages") or [])
+
+
+@router.get("/{session_id}/uploads/{file_id}")
+def get_upload(
+    session_id: str,
+    file_id: str,
+    store: SessionStore = Depends(get_session_store),
+) -> FileResponse:
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    path = store.resolve_upload_path(session, file_id)
+    if not path or not path.exists():
+        raise HTTPException(status_code=404, detail="File not found.")
+    return FileResponse(path)
+
+
+@router.get("/{session_id}/export")
+def export_package(
+    session_id: str, store: SessionStore = Depends(get_session_store)
+) -> FileResponse:
+    session = store.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found.")
+    export_path = Path(store.session_dir(session_id)) / "export.json"
+    payload = {
+        "session": session,
+        "pages": session.get("pages") or [],
+        "exported_at": session.get("updated_at"),
+    }
+    export_path.write_text(
+        json.dumps(payload, indent=2), encoding="utf-8"
+    )
+    return FileResponse(
+        export_path,
+        media_type="application/json",
+        filename=f"repex_report_{session_id}.json",
+    )

server/app/api/schemas.py

@@ -0,0 +1,45 @@
+from __future__ import annotations
+
+from typing import Dict, List, Optional
+
+from pydantic import BaseModel, Field
+
+
+class FileMeta(BaseModel):
+    id: str
+    name: str
+    size: int
+    content_type: str
+    category: str
+    url: Optional[str] = None
+
+
+class SessionResponse(BaseModel):
+    id: str
+    status: str
+    created_at: str
+    updated_at: str
+    project_name: str
+    inspection_date: str
+    notes: str
+    uploads: Dict[str, List[FileMeta]] = Field(default_factory=dict)
+    selected_photo_ids: List[str] = Field(default_factory=list)
+    page_count: int = 0
+
+
+class SessionStatusResponse(BaseModel):
+    id: str
+    status: str
+    updated_at: str
+
+
+class SelectionRequest(BaseModel):
+    selected_photo_ids: List[str] = Field(default_factory=list)
+
+
+class PagesResponse(BaseModel):
+    pages: List[dict] = Field(default_factory=list)
+
+
+class PagesRequest(BaseModel):
+    pages: List[dict] = Field(default_factory=list)

server/app/core/config.py

@@ -3,6 +3,7 @@ from __future__ import annotations
 import os
 from dataclasses import dataclass
 from functools import lru_cache
+from pathlib import Path
 from typing import List
 
 
@@ -17,6 +18,8 @@ class Settings:
     app_name: str
     api_prefix: str
     cors_origins: List[str]
+    storage_dir: Path
+    max_upload_mb: int
 
 
 @lru_cache
@@ -27,4 +30,6 @@ def get_settings() -> Settings:
         cors_origins=_split_csv(
             os.getenv("CORS_ORIGINS"), fallback=["http://localhost:5173"]
         ),
+        storage_dir=Path(os.getenv("STORAGE_DIR", "data")).resolve(),
+        max_upload_mb=int(os.getenv("MAX_UPLOAD_MB", "50")),
     )

server/app/main.py

@@ -1,5 +1,8 @@
+from pathlib import Path
+
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
 
 from .api.router import api_router
 from .core.config import get_settings
@@ -17,6 +20,9 @@ def create_app() -> FastAPI:
         allow_headers=["*"],
     )
     app.include_router(api_router, prefix=settings.api_prefix)
+
+    static_root = Path(__file__).resolve().parents[2]
+    app.mount("/", StaticFiles(directory=static_root, html=True), name="static")
     return app
 
 

server/app/services/__init__.py

@@ -0,0 +1,3 @@
+from .session_store import SessionStore, StoredFile
+
+__all__ = ["SessionStore", "StoredFile"]

server/app/services/session_store.py

@@ -0,0 +1,197 @@
+from __future__ import annotations
+
+import json
+import re
+from dataclasses import dataclass
+from datetime import datetime, timezone
+from pathlib import Path
+from threading import Lock
+from typing import Iterable, List, Optional
+from uuid import uuid4
+
+from fastapi import UploadFile
+
+from ..core.config import get_settings
+
+
+IMAGE_EXTS = {".jpg", ".jpeg", ".png", ".gif", ".webp"}
+DOC_EXTS = {".pdf", ".doc", ".docx"}
+DATA_EXTS = {".csv", ".xls", ".xlsx"}
+
+
+@dataclass
+class StoredFile:
+    id: str
+    name: str
+    size: int
+    content_type: str
+    category: str
+    path: str
+
+
+def _now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+def _safe_name(name: str) -> str:
+    name = Path(name).name
+    name = re.sub(r"[^a-zA-Z0-9._-]", "_", name)
+    return name or "upload"
+
+
+def _category_for(filename: str) -> str:
+    ext = Path(filename).suffix.lower()
+    if ext in IMAGE_EXTS:
+        return "photos"
+    if ext in DOC_EXTS:
+        return "documents"
+    if ext in DATA_EXTS:
+        return "data_files"
+    return "documents"
+
+
+class SessionStore:
+    def __init__(self, base_dir: Optional[Path] = None) -> None:
+        settings = get_settings()
+        self.base_dir = (base_dir or settings.storage_dir).resolve()
+        self.sessions_dir = self.base_dir / "sessions"
+        self.sessions_dir.mkdir(parents=True, exist_ok=True)
+        self.max_upload_bytes = settings.max_upload_mb * 1024 * 1024
+        self._lock = Lock()
+
+    def list_sessions(self) -> List[dict]:
+        sessions: List[dict] = []
+        for session_file in sorted(self.sessions_dir.glob("*/session.json"), reverse=True):
+            try:
+                sessions.append(json.loads(session_file.read_text(encoding="utf-8")))
+            except Exception:
+                continue
+        return sessions
+
+    def create_session(self, project_name: str, inspection_date: str, notes: str) -> dict:
+        session_id = uuid4().hex
+        now = _now_iso()
+        session = {
+            "id": session_id,
+            "status": "ready",
+            "created_at": now,
+            "updated_at": now,
+            "project_name": project_name,
+            "inspection_date": inspection_date,
+            "notes": notes,
+            "uploads": {"photos": [], "documents": [], "data_files": []},
+            "selected_photo_ids": [],
+            "page_count": 6,
+            "pages": [],
+        }
+        self._save_session(session)
+        return session
+
+    def get_session(self, session_id: str) -> Optional[dict]:
+        session_path = self._session_file(session_id)
+        if not session_path.exists():
+            return None
+        try:
+            return json.loads(session_path.read_text(encoding="utf-8"))
+        except Exception:
+            return None
+
+    def update_session(self, session: dict) -> None:
+        session["updated_at"] = _now_iso()
+        self._save_session(session)
+
+    def add_uploads(self, session: dict, uploads: Iterable[StoredFile]) -> dict:
+        for item in uploads:
+            session["uploads"].setdefault(item.category, [])
+            session["uploads"][item.category].append(
+                {
+                    "id": item.id,
+                    "name": item.name,
+                    "size": item.size,
+                    "content_type": item.content_type,
+                    "category": item.category,
+                    "path": item.path,
+                }
+            )
+        self.update_session(session)
+        return session
+
+    def set_selected_photos(self, session: dict, selected_ids: List[str]) -> dict:
+        session["selected_photo_ids"] = selected_ids
+        self.update_session(session)
+        return session
+
+    def set_pages(self, session: dict, pages: List[dict]) -> dict:
+        session["pages"] = pages
+        session["page_count"] = max(len(pages), session.get("page_count", 0))
+        self.update_session(session)
+        return session
+
+    def ensure_pages(self, session: dict) -> List[dict]:
+        pages = session.get("pages") or []
+        if pages:
+            return pages
+        count = session.get("page_count", 6) or 6
+        pages = [{"items": []} for _ in range(count)]
+        session["pages"] = pages
+        self.update_session(session)
+        return pages
+
+    def save_upload(self, session_id: str, upload: UploadFile) -> StoredFile:
+        filename = _safe_name(upload.filename or "upload")
+        ext = Path(filename).suffix
+        file_id = uuid4().hex
+        stored_name = f"{file_id}{ext}"
+        session_dir = self._session_dir(session_id)
+        uploads_dir = session_dir / "uploads"
+        uploads_dir.mkdir(parents=True, exist_ok=True)
+        dest = uploads_dir / stored_name
+
+        size = 0
+        with dest.open("wb") as handle:
+            while True:
+                chunk = upload.file.read(1024 * 1024)
+                if not chunk:
+                    break
+                size += len(chunk)
+                if size > self.max_upload_bytes:
+                    handle.close()
+                    dest.unlink(missing_ok=True)
+                    raise ValueError("File exceeds maximum upload size.")
+                handle.write(chunk)
+
+        category = _category_for(filename)
+        return StoredFile(
+            id=file_id,
+            name=filename,
+            size=size,
+            content_type=upload.content_type or "application/octet-stream",
+            category=category,
+            path=f"uploads/{stored_name}",
+        )
+
+    def _session_dir(self, session_id: str) -> Path:
+        return self.sessions_dir / session_id
+
+    def session_dir(self, session_id: str) -> Path:
+        return self._session_dir(session_id)
+
+    def _session_file(self, session_id: str) -> Path:
+        return self._session_dir(session_id) / "session.json"
+
+    def _save_session(self, session: dict) -> None:
+        session_dir = self._session_dir(session["id"])
+        session_dir.mkdir(parents=True, exist_ok=True)
+        session_path = self._session_file(session["id"])
+        with self._lock:
+            session_path.write_text(json.dumps(session, indent=2), encoding="utf-8")
+
+    def resolve_upload_path(self, session: dict, file_id: str) -> Optional[Path]:
+        uploads = session.get("uploads") or {}
+        for items in uploads.values():
+            for item in items:
+                if item.get("id") == file_id:
+                    relative = item.get("path")
+                    if relative:
+                        return self._session_dir(session["id"]) / relative
+        return None

server/requirements.txt

@@ -1,2 +1,3 @@
 fastapi>=0.115.0,<1.0.0
 uvicorn[standard]>=0.30.0,<0.32.0
+python-multipart>=0.0.9,<0.1.0