diff --git a/apps/gui/src/components/play/DashboardView.tsx b/apps/gui/src/components/play/DashboardView.tsx index f79e7bf..b92b896 100644 --- a/apps/gui/src/components/play/DashboardView.tsx +++ b/apps/gui/src/components/play/DashboardView.tsx @@ -44,7 +44,9 @@ export function DashboardView() { const [scenarios, setScenarios] = useState< { path: string; name: string; description: string }[] >([]); - const [, setProviderInstances] = useState([]); + const [providerInstances, setProviderInstances] = useState< + ModelProviderInstance[] + >([]); // Modal State const [scenarioForModal, setScenarioForModal] = useState<{ @@ -203,6 +205,24 @@ export function DashboardView() { )} + {providerInstances.length === 0 && !loadingData && ( +
+ + ⚠️ No LLM providers have been configured. + + + Please go to the{" "} + + Configuration + {" "} + page to set up at least one provider before running simulations. + +
+ )} + {/* Simulations Section */}

@@ -235,8 +255,16 @@ export function DashboardView() { {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" + onClick={ + providerInstances.length === 0 + ? undefined + : () => handleResume(s.id) + } + className={`flex-shrink-0 w-72 border border-border/30 bg-card p-5 shadow-sm transition-all relative group ${ + providerInstances.length === 0 + ? "opacity-50 cursor-not-allowed filter grayscale" + : "cursor-pointer hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 active:shadow-sm" + }`} >
@@ -337,6 +365,7 @@ export function DashboardView() { name={s.name} description={s.description} onClick={() => handleScenarioClick(s)} + disabled={providerInstances.length === 0} /> ))}
diff --git a/apps/gui/src/components/play/ScenarioCard.tsx b/apps/gui/src/components/play/ScenarioCard.tsx index 7a3701d..d2fc3d4 100644 --- a/apps/gui/src/components/play/ScenarioCard.tsx +++ b/apps/gui/src/components/play/ScenarioCard.tsx @@ -9,17 +9,23 @@ interface ScenarioCardProps { name: string; description: string; onClick: () => void; + disabled?: boolean; } export function ScenarioCard({ name, description, onClick, + disabled, }: ScenarioCardProps) { return (
{name} @@ -27,7 +33,13 @@ export function ScenarioCard({

{truncate(description, 80)}

- + {">"}