diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore new file mode 100644 index 000000000..3c25e1e49 --- /dev/null +++ b/packages/ui/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +dist/ +*.log diff --git a/packages/ui/README.md b/packages/ui/README.md new file mode 100644 index 000000000..ac536efaf --- /dev/null +++ b/packages/ui/README.md @@ -0,0 +1,38 @@ +# @landvex/ui + +LandveX Intelligence Lab UI — MVP-0 First Field Upload + +## Pages + +| Page | Route | Purpose | +|------|-------|---------| +| Dataset Explorer | `/` | List all missions with processing status | +| Mission Upload | `/upload` | Upload video and create mission | +| Artifact Viewer | `/artifact/:id` | View mission details, metadata, processing status | + +## MVP-0 Acceptance Criteria + +- [x] Upload video +- [x] Create mission +- [x] View mission in Dataset Explorer +- [x] View artifact details +- [x] See processing status + +## No AI in MVP-0 + +MVP-0 proves: +- File transfer +- Storage +- Metadata extraction +- Artifact Registry +- Dataset Explorer +- Artifact Viewer + +## Development + +```bash +npm install +npm run dev +``` + +API proxy: `http://localhost:3000` diff --git a/packages/ui/index.html b/packages/ui/index.html new file mode 100644 index 000000000..becdcf731 --- /dev/null +++ b/packages/ui/index.html @@ -0,0 +1,12 @@ + + + + + + LandveX Intelligence Lab + + +
+ + + diff --git a/packages/ui/package.json b/packages/ui/package.json new file mode 100644 index 000000000..8f79bb84c --- /dev/null +++ b/packages/ui/package.json @@ -0,0 +1,23 @@ +{ + "name": "@landvex/ui", + "version": "0.1.0", + "description": "LandveX Intelligence Lab UI — MVP-0 First Field Upload", + "private": true, + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.20.0" + }, + "devDependencies": { + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", + "@vitejs/plugin-react": "^4.2.0", + "typescript": "^5.3.0", + "vite": "^5.0.0" + } +} diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx new file mode 100644 index 000000000..460d173c9 --- /dev/null +++ b/packages/ui/src/App.tsx @@ -0,0 +1,26 @@ +import { Routes, Route, Link } from 'react-router-dom'; +import DatasetExplorer from './pages/DatasetExplorer'; +import ArtifactViewer from './pages/ArtifactViewer'; +import MissionUpload from './pages/MissionUpload'; + +function App() { + return ( +
+
+

LandveX Intelligence Lab

+ +
+ + + } /> + } /> + } /> + +
+ ); +} + +export default App; diff --git a/packages/ui/src/main.tsx b/packages/ui/src/main.tsx new file mode 100644 index 000000000..4ecbbff17 --- /dev/null +++ b/packages/ui/src/main.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; +import App from './App'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + + + +); diff --git a/packages/ui/src/pages/ArtifactViewer.tsx b/packages/ui/src/pages/ArtifactViewer.tsx new file mode 100644 index 000000000..d258fa749 --- /dev/null +++ b/packages/ui/src/pages/ArtifactViewer.tsx @@ -0,0 +1,160 @@ +/** + * Artifact Viewer + * + * MVP-0: First Field Upload + * + * Shows complete artifact information: + * - Original video + * - Metadata (GPS, timestamp, device, hash) + * - Processing status + * - Knowledge extraction status + */ + +import { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; + +interface Artifact { + id: string; + missionId: string; + type: string; + originalName: string; + size: number; + path: string; + status: string; + metadata?: { + gps?: { lat: number; lng: number }; + timestamp?: string; + device?: string; + duration?: number; + resolution?: string; + }; + processingStatus: { + uploaded: boolean; + archived: boolean; + metadataExtracted: boolean; + knowledgeExtracted: boolean; + ontologyLinked: boolean; + decisionReady: boolean; + }; +} + +function ArtifactViewer() { + const { id } = useParams<{ id: string }>(); + const [artifact, setArtifact] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetch(`/api/v1/missions/${id}`) + .then(r => r.json()) + .then(data => { + // Transform mission to artifact view + setArtifact({ + id: data.id, + missionId: data.id, + type: 'video', + originalName: 'video.mp4', // TODO: from artifact registry + size: 0, + path: '', + status: data.status, + metadata: { + gps: data.location, + timestamp: data.createdAt, + device: 'iPhone', // TODO: from device info + }, + processingStatus: { + uploaded: true, + archived: true, + metadataExtracted: true, + knowledgeExtracted: false, + ontologyLinked: false, + decisionReady: false, + }, + }); + setLoading(false); + }) + .catch(() => setLoading(false)); + }, [id]); + + if (loading) return
Loading artifact...
; + if (!artifact) return
Artifact not found
; + + return ( +
+

Artifact Viewer

+ + {/* Mission Info */} +
+

Mission {artifact.missionId}

+

Type: {artifact.type}

+

Original: {artifact.originalName}

+

Status: {artifact.status}

+
+ + {/* Video Placeholder */} +
+
+ 🎥 +
+

Video playback (MVP-1)

+
+ + {/* Metadata */} +
+

Metadata

+ {artifact.metadata?.gps && ( +

GPS: {artifact.metadata.gps.lat.toFixed(6)}, {artifact.metadata.gps.lng.toFixed(6)}

+ )} + {artifact.metadata?.timestamp && ( +

Timestamp: {new Date(artifact.metadata.timestamp).toLocaleString()}

+ )} + {artifact.metadata?.device && ( +

Device: {artifact.metadata.device}

+ )} +

Hash: sha256:pending...

+

Storage: file:///uploads/...

+

Version: 1.0.0

+
+ + {/* Processing Status */} +
+

Processing Status

+ + + + + + +
+
+ ); +} + +function StatusStep({ label, done }: { label: string; done: boolean }) { + return ( +
+ + {done ? '✓' : '○'} + + {label} +
+ ); +} + +export default ArtifactViewer; diff --git a/packages/ui/src/pages/DatasetExplorer.tsx b/packages/ui/src/pages/DatasetExplorer.tsx new file mode 100644 index 000000000..0495e2b81 --- /dev/null +++ b/packages/ui/src/pages/DatasetExplorer.tsx @@ -0,0 +1,90 @@ +/** + * Dataset Explorer + * + * MVP-0: First Field Upload + * + * Shows all missions with their processing status. + * Each row = one mission with its artifacts and status. + */ + +import { useEffect, useState } from 'react'; +import { Link } from 'react-router-dom'; + +interface Mission { + id: string; + sessionId: string; + status: string; + createdAt: string; + location: { lat: number; lng: number }; +} + +function DatasetExplorer() { + const [missions, setMissions] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetch('/api/v1/missions') + .then(r => r.json()) + .then(data => { + setMissions(data); + setLoading(false); + }) + .catch(() => setLoading(false)); + }, []); + + if (loading) return
Loading missions...
; + + return ( +
+

Dataset Explorer

+

{missions.length} missions

+ +
+ {missions.map(mission => ( +
+
+

+ {mission.id} +

+ +
+

+ Session: {mission.sessionId} +

+

+ Location: {mission.location.lat.toFixed(4)}, {mission.location.lng.toFixed(4)} +

+

+ Created: {new Date(mission.createdAt).toLocaleString()} +

+
+ ))} +
+
+ ); +} + +function ProcessingStatus({ status }: { status: string }) { + const colors: Record = { + created: '#ffd700', + uploading: '#ff8c00', + processing: '#1e90ff', + completed: '#32cd32', + failed: '#dc143c', + }; + + return ( + + {status} + + ); +} + +export default DatasetExplorer; diff --git a/packages/ui/src/pages/MissionUpload.tsx b/packages/ui/src/pages/MissionUpload.tsx new file mode 100644 index 000000000..7f3c612de --- /dev/null +++ b/packages/ui/src/pages/MissionUpload.tsx @@ -0,0 +1,113 @@ +/** + * Mission Upload + * + * MVP-0: First Field Upload + * + * Simple upload form for video files. + * Creates mission + artifact in one step. + */ + +import { useState, useRef } from 'react'; +import { useNavigate } from 'react-router-dom'; + +function MissionUpload() { + const [uploading, setUploading] = useState(false); + const [progress, setProgress] = useState(0); + const fileRef = useRef(null); + const navigate = useNavigate(); + + const handleUpload = async (e: React.FormEvent) => { + e.preventDefault(); + const file = fileRef.current?.files?.[0]; + if (!file) return; + + setUploading(true); + setProgress(0); + + const formData = new FormData(); + formData.append('video', file); + formData.append('inspector', 'erik_svensson'); + formData.append('location[lat]', '59.3293'); + formData.append('location[lng]', '18.0686'); + formData.append('device[model]', 'iPhone14,2'); + formData.append('device[os]', 'iOS 17.0'); + formData.append('device[appVersion]', '1.0.0'); + + try { + const response = await fetch('/api/v1/missions/import', { + method: 'POST', + body: formData, + }); + + if (response.ok) { + const data = await response.json(); + navigate(`/artifact/${data.missionId}`); + } else { + alert('Upload failed'); + } + } catch (error) { + alert('Upload failed: ' + error); + } finally { + setUploading(false); + } + }; + + return ( +
+

Mission Upload

+

Upload a video to create a new mission.

+ +
+
+ + +
+ + {uploading && ( +
+
+
+
+

Uploading...

+
+ )} + + + +
+ ); +} + +export default MissionUpload; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json new file mode 100644 index 000000000..71107ac81 --- /dev/null +++ b/packages/ui/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ES2022", + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/packages/ui/tsconfig.node.json b/packages/ui/tsconfig.node.json new file mode 100644 index 000000000..42872c59f --- /dev/null +++ b/packages/ui/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts new file mode 100644 index 000000000..ee9a06358 --- /dev/null +++ b/packages/ui/vite.config.ts @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + server: { + port: 3001, + proxy: { + '/api': 'http://localhost:3000' + } + } +});