-
- Omnia
-
+
- {links.map((link) => (
-
-
-
- {link.label}
-
-
-
- ))}
+ {links.map((link) => {
+ const isActive = pathname === link.href || (link.href !== "/" && pathname?.startsWith(link.href));
+ return (
+
+
+
+ {link.label}
+
+
+
+ );
+ })}
diff --git a/apps/gui/src/app/page.tsx b/apps/gui/src/app/page.tsx
index cc1306c..b267fae 100644
--- a/apps/gui/src/app/page.tsx
+++ b/apps/gui/src/app/page.tsx
@@ -1,35 +1,361 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
-import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { useRouter } from "next/navigation";
+import {
+ startSimulation,
+ listSavedSimulations,
+ getConfigStatus,
+ getScenarioEntities,
+ deleteSimulation,
+ listProviderInstances,
+} from "@/app/play/actions";
+import type { SimSnapshot } from "@/lib/simulation-types";
+import type { ModelProviderInstance } from "@omnia/llm";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+ DialogFooter,
+} from "@/components/ui/dialog";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
export default function Home() {
+ const router = useRouter();
+ const [loading, setLoading] = useState(false);
+ const [loadingData, setLoadingData] = useState(true);
+ const [error, setError] = useState("");
+
+ const [savedSessions, setSavedSessions] = useState
([]);
+ const [scenarios, setScenarios] = useState<{ path: string; name: string }[]>([]);
+ const [providerInstances, setProviderInstances] = useState([]);
+
+ // Modal State
+ const [scenarioForModal, setScenarioForModal] = useState<{ path: string; name: string } | null>(null);
+ const [modalEntities, setModalEntities] = useState<{ id: string; name: string }[]>([]);
+ const [loadingEntities, setLoadingEntities] = useState(false);
+ const [selectedEntityForModal, setSelectedEntityForModal] = useState("");
+
+ const loadSavedSessions = useCallback(async () => {
+ try {
+ const res = await listSavedSimulations();
+ if (res.ok) {
+ setSavedSessions(res.sessions);
+ }
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ useEffect(() => {
+ let active = true;
+ async function loadAll() {
+ setLoadingData(true);
+ try {
+ const sessionsRes = await listSavedSimulations();
+ if (active && sessionsRes.ok) {
+ setSavedSessions(sessionsRes.sessions);
+ }
+ } catch {}
+
+ try {
+ const configStatus = await getConfigStatus();
+ if (active) {
+ setScenarios(configStatus.availableScenarios);
+ }
+ } catch {}
+
+ try {
+ const providersList = await listProviderInstances();
+ if (active) {
+ setProviderInstances(providersList);
+ }
+ } catch {}
+
+ if (active) {
+ setLoadingData(false);
+ }
+ }
+ loadAll();
+ return () => {
+ active = false;
+ };
+ }, []);
+
+ const handleResume = (id: string) => {
+ router.push(`/play?simId=${id}`);
+ };
+
+ const handleDelete = async (id: string, e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (!confirm("Are you sure you want to delete this simulation session?")) return;
+ setLoading(true);
+ try {
+ const res = await deleteSimulation(id);
+ if (!res.ok) {
+ setError(res.error);
+ } else {
+ await loadSavedSessions();
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to delete session.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleScenarioClick = async (scenario: { path: string; name: string }) => {
+ setScenarioForModal(scenario);
+ setLoadingEntities(true);
+ setSelectedEntityForModal(""); // Reset selection to Spectator
+ try {
+ const res = await getScenarioEntities(scenario.path);
+ if (res.ok) {
+ setModalEntities(res.entities);
+ } else {
+ setModalEntities([]);
+ }
+ } catch {
+ setModalEntities([]);
+ } finally {
+ setLoadingEntities(false);
+ }
+ };
+
+ const handleStartFromModal = async () => {
+ if (!scenarioForModal) return;
+ setLoading(true);
+ setError("");
+ const targetScenario = scenarioForModal;
+ setScenarioForModal(null); // close modal
+ try {
+ const result = await startSimulation({
+ scenario: targetScenario.path,
+ playEntity: selectedEntityForModal || undefined,
+ });
+
+ if (!result.ok) {
+ setError(result.error);
+ setLoading(false);
+ return;
+ }
+
+ // Navigate to the separate play page with the newly created simulation ID
+ router.push(`/play?simId=${result.snapshot.id}`);
+ } catch (err) {
+ setError(
+ err instanceof Error
+ ? err.message
+ : "Failed to start simulation.",
+ );
+ setLoading(false);
+ }
+ };
+
return (
-
- Omnia GUI
-
- Configuration and gameplay interface for the Omnia simulation engine.
-
-
-
-
-
- Play
-
- Start a simulation and interact with NPCs
-
-
-
-
-
-
-
- Config
-
- Check environment, API keys, and available scenarios
-
-
-
-
+
+
+ {/* Centered Big Logo */}
+
+
+
Simulation Engine
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* Simulations Section */}
+
+ Simulations
+ {loadingData ? (
+
+ {Array.from({ length: 3 }).map((_, index) => (
+
+ ))}
+
No saved simulations found. Start a new one below!
+ ) : (
+
+ {savedSessions.map((s) => (
+
handleResume(s.id)}
+ className="flex-shrink-0 w-72 border border-border/30 bg-card p-5 cursor-pointer shadow-sm hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-sm transition-all relative group"
+ >
+
+ {s.scenarioName}
+
+ Turn {s.turn} · {s.entities.length} entities · {s.status}
+
+
+ ID: {s.id.substring(0, 8)}...
+
+
+
+ Resume
+
+
+
+ ))}
+
+
+ {/* Scenarios Section */}
+
+ Scenarios
+ {loadingData ? (
+
+
+
+
+ Build a scenario
+ Create a custom simulation starting point
+
+
+ +
+ Create New
+
+
+
+ {Array.from({ length: 3 }).map((_, index) => (
+
+ ))}
+
+
+
+
+ Build a scenario
+ Create a custom simulation starting point
+
+
+ +
+ Create New
+
+
+
+ {scenarios.map((s) => (
+
handleScenarioClick(s)}
+ className="flex-shrink-0 w-64 border border-border/30 bg-card p-5 cursor-pointer shadow-sm hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-sm transition-all"
+ >
+ {s.name}
+ {s.path}
+ Click to Start
+
+ ))}
+
+
+ {/* Start Scenario Selection Modal */}
+ {scenarioForModal && (
+
+ )}
-
+
);
}
diff --git a/apps/gui/src/app/play/page.tsx b/apps/gui/src/app/play/page.tsx
index 9e2dab7..b7d5487 100644
--- a/apps/gui/src/app/play/page.tsx
+++ b/apps/gui/src/app/play/page.tsx
@@ -1,5 +1,16 @@
+"use client";
+
import { PlayView } from "@/components/play/PlayView";
+import { Suspense } from "react";
export default function PlayPage() {
- return
;
+ return (
+
+ Loading...
+
+
+ Initializing simulation...
+
+ );
+ }
+
+ if (!snapshot && error) {
+ return (
+
+
+ {error}
+
+
+
-
Omnia Play
-
- {!snapshot && (
-