Merge upstream main, preferring our changes

feature-flag-agent-env/agents/rl_agent.py

@@ -7,32 +7,41 @@ import numpy as np
 from feature_flag_env.models import FeatureFlagAction, FeatureFlagObservation
 from agents.replay_buffer import ReplayBuffer
 
+TORCH_AVAILABLE = True
 try:
     import torch
     import torch.nn as nn
     import torch.optim as optim
     from torch.nn.utils import clip_grad_norm_
-except ImportError as exc:
-    raise ImportError(
-        "PyTorch is required for RLAgent. Install with: pip install torch"
-    ) from exc
-
-
-class DQN(nn.Module):
-    def __init__(self, state_dim: int, action_dim: int):
-        super().__init__()
-        self.net = nn.Sequential(
-            nn.Linear(state_dim, 128),
-            nn.ReLU(),
-            nn.Linear(128, 64),
-            nn.ReLU(),
-            nn.Linear(64, 32),
-            nn.ReLU(),
-            nn.Linear(32, action_dim),
-        )
+except ImportError:
+    TORCH_AVAILABLE = False
+    torch = None
+    nn = None
+    optim = None
+    clip_grad_norm_ = None
+
+
+if TORCH_AVAILABLE:
+    class DQN(nn.Module):
+        def __init__(self, state_dim: int, action_dim: int):
+            super().__init__()
+            self.net = nn.Sequential(
+                nn.Linear(state_dim, 128),
+                nn.ReLU(),
+                nn.Linear(128, 64),
+                nn.ReLU(),
+                nn.Linear(64, 32),
+                nn.ReLU(),
+                nn.Linear(32, action_dim),
+            )
 
-    def forward(self, x):
-        return self.net(x)
+        def forward(self, x):
+            return self.net(x)
+else:
+    class DQN:
+        def __init__(self, state_dim: int, action_dim: int):
+            self.state_dim = state_dim
+            self.action_dim = action_dim
 
 
 class RLAgent:
@@ -139,14 +148,22 @@ class RLAgent:
         self.action_mask_events = 0
         self.action_safety_overrides = 0
 
-        self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
-        self.policy_net = DQN(self.state_dim, self.action_dim).to(self.device)
-        self.target_net = DQN(self.state_dim, self.action_dim).to(self.device)
-        self.target_net.load_state_dict(self.policy_net.state_dict())
-        self.target_net.eval()
+        self.torch_available = TORCH_AVAILABLE
+        if self.torch_available:
+            self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+            self.policy_net = DQN(self.state_dim, self.action_dim).to(self.device)
+            self.target_net = DQN(self.state_dim, self.action_dim).to(self.device)
+            self.target_net.load_state_dict(self.policy_net.state_dict())
+            self.target_net.eval()
+            self.optimizer = optim.Adam(self.policy_net.parameters(), lr=lr)
+            self.loss_fn = nn.MSELoss()
+        else:
+            self.device = "cpu"
+            self.policy_net = None
+            self.target_net = None
+            self.optimizer = None
+            self.loss_fn = None
 
-        self.optimizer = optim.Adam(self.policy_net.parameters(), lr=lr)
-        self.loss_fn = nn.MSELoss()
         self.replay_buffer = ReplayBuffer(capacity=buffer_capacity)
         self.external_transition_mode = False
 
@@ -368,6 +385,9 @@ class RLAgent:
         if self.training and random.random() < self.epsilon:
             return int(random.choice(allowed_actions))
 
+        if not self.torch_available:
+            return int(random.choice(allowed_actions))
+
         with torch.no_grad():
             state_tensor = torch.from_numpy(state).float().unsqueeze(0).to(self.device)
             q_values = self.policy_net(state_tensor)
@@ -413,6 +433,8 @@ class RLAgent:
         )
 
     def _optimize_model(self):
+        if not self.torch_available:
+            return None
         if len(self.replay_buffer) < self.batch_size:
             return None
 
@@ -557,6 +579,8 @@ class RLAgent:
         self.last_action = None
 
     def save_model(self, model_path: Optional[str] = None):
+        if not self.torch_available:
+            return
         path = model_path or self.model_path
         os.makedirs(os.path.dirname(path), exist_ok=True)
         torch.save(
@@ -570,6 +594,8 @@ class RLAgent:
         )
 
     def load_model(self, model_path: Optional[str] = None):
+        if not self.torch_available:
+            return
         path = model_path or self.model_path
         checkpoint = torch.load(path, map_location=self.device)
 

feature-flag-agent-env/feature_flag_env/tools/connectors.py

@@ -8,7 +8,6 @@ by higher-level lifecycle handlers (Tools) to enforce backward compatibility and
 
 from abc import ABC, abstractmethod
 from typing import Dict, Any, Optional
-import time
 
 
 class Connector(ABC):

feature-flag-agent-env/pyproject.toml

@@ -18,7 +18,6 @@ dependencies = [
     
     # 🧮 Math & Simulation
     "numpy>=1.24.0",
-    "torch>=2.0.0",
     
     # 🤖 LLM Integration (OpenAI-compatible client)
     "groq>=0.4.0",

feature-flag-agent-env/requirements.txt

@@ -21,7 +21,6 @@ prometheus-client>=0.19.0
 
 # Math & Simulation
 numpy>=1.24.0
-torch>=2.0.0
 
 # LLM Integration
 groq>=0.4.0

frontend/app/ai-decisions/page.tsx

@@ -193,6 +193,11 @@ export default function AIDecisionsPage() {
           <div className="space-y-0">
              {recentDecisions.length > 0 ? (
                recentDecisions.map((step, i) => (
+                 (() => {
+                   const actionType = step.action?.action_type ?? "MAINTAIN";
+                   const targetPercentage = step.action?.target_percentage ?? 0;
+                   const reason = step.action?.reason ?? "No reasoning provided.";
+                   return (
                  <div key={i} className="flex gap-4 border-b border-border/30 last:border-0 py-4 group">
                     <div className="flex flex-col items-center">
                        <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
@@ -240,6 +245,8 @@ export default function AIDecisionsPage() {
                        </div>
                     </div>
                  </div>
+                   );
+                 })()
                ))
              ) : (
                <div className="py-20 text-center text-muted-foreground flex flex-col items-center gap-4">

frontend/app/integrations/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { 
+  MessageSquare, 
+  GitGraph, 
+  ExternalLink,
+  RefreshCw,
+  Bell
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+
+const IntegrationsPage = () => {
+  const [loading, setLoading] = useState(false);
+  const [lastSync, setLastSync] = useState("Never");
+  const [isHealthy, setIsHealthy] = useState(false);
+
+  const syncIntegrations = async () => {
+    setLoading(true);
+    try {
+      const [health] = await Promise.all([
+        api.getHealth(),
+        api.getDashboard(),
+      ]);
+      setIsHealthy(Boolean(health?.environment_ready));
+      setLastSync(new Date().toLocaleTimeString());
+    } catch (error) {
+      console.error("Failed to sync integration status:", error);
+      setIsHealthy(false);
+      setLastSync("Sync failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const initialSync = setTimeout(() => {
+      void syncIntegrations();
+    }, 0);
+    return () => clearTimeout(initialSync);
+  }, []);
+
+  const integrations = [
+    {
+      id: "slack",
+      name: "Slack",
+      description: "Automated rollout notifications and approval workflows.",
+      icon: MessageSquare,
+      status: isHealthy ? "connected" : "disconnected",
+      details: isHealthy ? "Alerts can be routed through backend automation" : "Backend unavailable",
+      lastSync
+    },
+    {
+      id: "github",
+      name: "GitHub",
+      description: "Trigger rollouts from PRs and sync deployment status.",
+      icon: GitGraph,
+      status: "disconnected",
+      details: "Requires OAuth",
+      lastSync
+    }
+  ];
+
+  return (
+    <div className="flex-1 space-y-6 p-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Integrations</h1>
+          <p className="text-muted-foreground mt-1">Manage external connections and observability sync.</p>
+        </div>
+        <Button variant="outline" size="sm" className="rounded-full" onClick={syncIntegrations} disabled={loading}>
+          <RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+          {loading ? "Syncing..." : "Sync All"}
+        </Button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {integrations.map((item) => (
+          <Card key={item.id} className="border-border/50 bg-card/50">
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted/50">
+                  <item.icon className="h-6 w-6 text-primary" />
+                </div>
+                <Badge 
+                  variant={item.status === "connected" ? "default" : "secondary"}
+                  className={item.status === "connected" ? "bg-green-500/10 text-green-600 hover:bg-green-500/10" : ""}
+                >
+                  {item.status === "connected" ? "Connected" : "Disconnected"}
+                </Badge>
+              </div>
+              <CardTitle className="mt-4">{item.name}</CardTitle>
+              <CardDescription>{item.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Status</span>
+                  <span className="font-medium">{item.details}</span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Last Sync</span>
+                  <span className="text-xs">{item.lastSync}</span>
+                </div>
+                <div className="pt-4 flex gap-2">
+                  <Button variant="outline" className="w-full text-xs h-8 rounded-full">
+                    Configure
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+                    <ExternalLink className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card className="border-primary/20 bg-primary/5">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-primary">
+            <Bell className="h-5 w-5" />
+            Webhook Endpoints
+          </CardTitle>
+          <CardDescription>Receive automated alerts from your own infrastructure.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-lg border bg-background/50 p-4 font-mono text-xs">
+             GET {(api.getApiBaseUrl() || "http://localhost:8000")}/monitoring/alerts
+          </div>
+          <p className="text-[10px] text-muted-foreground mt-4">
+            Uses live backend monitoring routes for alert ingestion and observability polling.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default IntegrationsPage;

frontend/app/layout.tsx

@@ -30,8 +30,7 @@ export default function RootLayout({
       <body className="min-h-full flex flex-col font-sans">
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
           disableTransitionOnChange
         >
           <EnvProvider>

frontend/app/page.tsx

@@ -16,7 +16,6 @@ import {
 import { 
   Area, 
   AreaChart, 
-  ResponsiveContainer, 
   Tooltip, 
   XAxis, 
   YAxis,
@@ -27,6 +26,7 @@ import {
 } from "recharts";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { useMemo } from "react";
 import { Observation } from "@/lib/api";
@@ -38,6 +38,14 @@ const Dashboard = () => {
   const { dashboard: data, state, connectionState, connectionText } = useEnv();
   const loading = useMemo(() => connectionState === "checking" && !data && !state, [connectionState, data, state]);
 
+  useEffect(() => {
+    let simInterval: NodeJS.Timeout;
+    if (isSimulating) {
+      simInterval = setInterval(runSimulationStep, 2000);
+    }
+    return () => clearInterval(simInterval);
+  }, [isSimulating, state]);
+
   const lastObs: Observation | undefined = state?.history?.[state.history.length - 1]?.observation;
   
   const healthScore = lastObs?.system_health_score ?? data?.summary?.health_score ?? 0;
@@ -79,23 +87,42 @@ const Dashboard = () => {
           <h1 className="text-3xl font-bold tracking-tight">Enterprise Overview</h1>
           <p className="text-muted-foreground mt-1">Real-time autonomous deployment monitoring.</p>
         </div>
-        <Badge
-          variant="outline"
-          className={cn(
-            "px-4 py-1.5 rounded-full border-2",
-            connectionState === "connected"
-              ? "border-green-500/30 text-green-600 bg-green-50"
-              : connectionState === "disconnected"
-              ? "border-destructive/30 text-destructive bg-destructive/5"
-              : ""
-          )}
-        >
-          <div className={cn(
-            "w-2 h-2 rounded-full mr-2 animate-pulse",
-            connectionState === "connected" ? "bg-green-500" : "bg-destructive"
-          )} />
-          {loading ? "Syncing..." : connectionText}
-        </Badge>
+        <div className="flex items-center gap-3">
+          <Button 
+            variant={isSimulating ? "destructive" : "default"} 
+            size="sm" 
+            onClick={() => setIsSimulating(!isSimulating)}
+            className="rounded-full gap-2 px-6"
+          >
+            {isSimulating ? <Zap className="h-4 w-4 animate-pulse" /> : <Zap className="h-4 w-4" />}
+            {isSimulating ? "Stop Autonomous Mode" : "Start Autonomous Mode"}
+          </Button>
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={() => { api.reset().then(() => fetchData()); }}
+            className="rounded-full"
+          >
+            Reset Session
+          </Button>
+          <Badge
+            variant="outline"
+            className={cn(
+              "px-4 py-1.5 rounded-full border-2",
+              connectionState === "connected"
+                ? "border-green-500/30 text-green-600 bg-green-50"
+                : connectionState === "disconnected"
+                ? "border-destructive/30 text-destructive bg-destructive/5"
+                : ""
+            )}
+          >
+            <div className={cn(
+              "w-2 h-2 rounded-full mr-2 animate-pulse",
+              connectionState === "connected" ? "bg-green-500" : "bg-destructive"
+            )} />
+            {loading ? "Syncing..." : connectionText}
+          </Badge>
+        </div>
       </div>
 
       {/* Primary Metrics */}
@@ -204,11 +231,11 @@ const Dashboard = () => {
 
       <div className="grid gap-6 md:grid-cols-7">
         {/* Main Traffic Chart */}
-        <Card className="md:col-span-4 border-border/50 bg-card/50 shadow-sm">
+        <Card className="md:col-span-4 border-border/50 bg-card/50 shadow-sm overflow-hidden">
           <CardHeader>
             <CardTitle className="flex items-center justify-between">
               Evaluation Traffic
-              <Badge variant="outline" className="font-normal text-xs">
+              <Badge variant="outline" className="font-normal text-xs bg-background/50">
                 Live Stream
               </Badge>
             </CardTitle>
@@ -219,21 +246,37 @@ const Dashboard = () => {
                 <AreaChart data={state?.history?.map(h => ({ 
                   time: h.observation?.time_step, 
                   rollout: h.observation?.current_rollout_percentage,
-                  error: (h.observation?.error_rate ?? 0) * 10000 // scaling for visibility
-                })) || []}>
-                  <defs>
-                    <linearGradient id="colorRollout" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="var(--primary)" stopOpacity={0.2}/>
-                      <stop offset="95%" stopColor="var(--primary)" stopOpacity={0}/>
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--border)" opacity={0.5} />
-                  <XAxis dataKey="time" stroke="var(--muted-foreground)" fontSize={10} tickLine={false} axisLine={false} />
-                  <YAxis stroke="var(--muted-foreground)" fontSize={10} tickLine={false} axisLine={false} />
-                  <Tooltip />
-                  <Area type="monotone" dataKey="rollout" stroke="var(--primary)" strokeWidth={2} fill="url(#colorRollout)" />
-                </AreaChart>
-              </ResponsiveContainer>
+                  error: (h.observation?.error_rate ?? 0) * 100
+                })) : [
+                  { time: -2, rollout: 5, error: 0.1 },
+                  { time: -1, rollout: 5, error: 0.15 },
+                  { time: 0, rollout: 5, error: 0.1 }
+                ]}
+                margin={{ top: 20, right: 30, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient id="colorRollout" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.4}/>
+                    <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0}/>
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#222" />
+                <XAxis dataKey="time" stroke="#444" fontSize={10} tickLine={false} axisLine={false} />
+                <YAxis stroke="#444" fontSize={10} tickLine={false} axisLine={false} domain={[0, 100]} />
+                <Tooltip 
+                  contentStyle={{ backgroundColor: '#111', border: '1px solid #333', borderRadius: '8px' }} 
+                  itemStyle={{ color: '#8b5cf6' }}
+                />
+                <Area 
+                  type="monotone" 
+                  dataKey="rollout" 
+                  stroke="#a78bfa" 
+                  strokeWidth={3} 
+                  fillOpacity={1} 
+                  fill="url(#colorRollout)" 
+                  animationDuration={1000}
+                />
+              </AreaChart>
             </div>
           </CardContent>
         </Card>
@@ -296,9 +339,16 @@ const Dashboard = () => {
 
          <Card className="border-border/50 bg-card/50 col-span-2">
             <CardHeader className="pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                <ShieldAlert className="h-4 w-4 text-red-500" />
-                Active Alerts & Incidents
+              <CardTitle className="text-sm font-medium flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <ShieldAlert className="h-4 w-4 text-red-500" />
+                  Active Alerts & Incidents
+                </div>
+                <div className="flex items-center gap-4">
+                   <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground uppercase font-bold">
+                      <div className="w-1.5 h-1.5 rounded-full bg-green-500" /> Slack
+                   </div>
+                </div>
               </CardTitle>
             </CardHeader>
             <CardContent>

frontend/components/layout/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Flag,
   Beaker,
   BrainCircuit,
+  Activity,
   Settings,
 } from "lucide-react";
 import { motion } from "framer-motion";
@@ -33,6 +34,11 @@ const sidebarNavItems = [
     href: "/ai-decisions",
     icon: BrainCircuit,
   },
+  {
+    title: "Integrations",
+    href: "/integrations",
+    icon: Activity,
+  },
   {
     title: "Settings",
     href: "/settings",

frontend/components/theme-provider.tsx

@@ -1,11 +1,71 @@
 "use client";
 
 import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const ThemeProviderContext = React.createContext<ThemeProviderState | undefined>(
+  undefined
+);
 
 export function ThemeProvider({
   children,
+  defaultTheme = "dark",
+  storageKey = "ui-theme",
   ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}: {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+  [key: string]: unknown;
+}) {
+  const [theme, setTheme] = React.useState<Theme>(
+    () => (typeof window !== "undefined" && (localStorage.getItem(storageKey) as Theme)) || defaultTheme
+  );
+
+  React.useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
 }

frontend/components/theme-toggle.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/components/theme-provider";
 import { cn } from "@/lib/utils";
 
 import {

frontend/lib/api.ts

@@ -122,9 +122,12 @@ export interface State {
   episode_id: string;
   step_count: number;
   total_reward: number;
+  done?: boolean;
   is_done: boolean;
   scenario_name: string;
   difficulty: string;
+  action_history?: ActionHistoryItem[];
+  rollout_history?: number[];
   history: Array<{
     observation?: Observation;
     reward?: number;
@@ -323,7 +326,8 @@ export const api = {
 
   async getDashboard(): Promise<DashboardData> {
     try {
-      return this.request<DashboardData>("/monitoring/dashboard", { method: "GET" });
+      const dashboard = await this.request<unknown>("/monitoring/dashboard", { method: "GET" });
+      return normalizeDashboard(dashboard);
     } catch (error) {
       // Monitoring can be disabled on backend; fall back to core state/health data.
       if (error instanceof Error && /(403|monitoring is not enabled)/i.test(error.message)) {

node_modules/frontend/app/ai-decisions/page.tsx

@@ -193,6 +193,11 @@ export default function AIDecisionsPage() {
           <div className="space-y-0">
              {recentDecisions.length > 0 ? (
                recentDecisions.map((step, i) => (
+                 (() => {
+                   const actionType = step.action?.action_type ?? "MAINTAIN";
+                   const targetPercentage = step.action?.target_percentage ?? 0;
+                   const reason = step.action?.reason ?? "No reasoning provided.";
+                   return (
                  <div key={i} className="flex gap-4 border-b border-border/30 last:border-0 py-4 group">
                     <div className="flex flex-col items-center">
                        <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
@@ -240,6 +245,8 @@ export default function AIDecisionsPage() {
                        </div>
                     </div>
                  </div>
+                   );
+                 })()
                ))
              ) : (
                <div className="py-20 text-center text-muted-foreground flex flex-col items-center gap-4">

node_modules/frontend/app/integrations/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { 
+  MessageSquare, 
+  GitGraph, 
+  ExternalLink,
+  RefreshCw,
+  Bell
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { api } from "@/lib/api";
+
+const IntegrationsPage = () => {
+  const [loading, setLoading] = useState(false);
+  const [lastSync, setLastSync] = useState("Never");
+  const [isHealthy, setIsHealthy] = useState(false);
+
+  const syncIntegrations = async () => {
+    setLoading(true);
+    try {
+      const [health] = await Promise.all([
+        api.getHealth(),
+        api.getDashboard(),
+      ]);
+      setIsHealthy(Boolean(health?.environment_ready));
+      setLastSync(new Date().toLocaleTimeString());
+    } catch (error) {
+      console.error("Failed to sync integration status:", error);
+      setIsHealthy(false);
+      setLastSync("Sync failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const initialSync = setTimeout(() => {
+      void syncIntegrations();
+    }, 0);
+    return () => clearTimeout(initialSync);
+  }, []);
+
+  const integrations = [
+    {
+      id: "slack",
+      name: "Slack",
+      description: "Automated rollout notifications and approval workflows.",
+      icon: MessageSquare,
+      status: isHealthy ? "connected" : "disconnected",
+      details: isHealthy ? "Alerts can be routed through backend automation" : "Backend unavailable",
+      lastSync
+    },
+    {
+      id: "github",
+      name: "GitHub",
+      description: "Trigger rollouts from PRs and sync deployment status.",
+      icon: GitGraph,
+      status: "disconnected",
+      details: "Requires OAuth",
+      lastSync
+    }
+  ];
+
+  return (
+    <div className="flex-1 space-y-6 p-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Integrations</h1>
+          <p className="text-muted-foreground mt-1">Manage external connections and observability sync.</p>
+        </div>
+        <Button variant="outline" size="sm" className="rounded-full" onClick={syncIntegrations} disabled={loading}>
+          <RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+          {loading ? "Syncing..." : "Sync All"}
+        </Button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {integrations.map((item) => (
+          <Card key={item.id} className="border-border/50 bg-card/50">
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted/50">
+                  <item.icon className="h-6 w-6 text-primary" />
+                </div>
+                <Badge 
+                  variant={item.status === "connected" ? "default" : "secondary"}
+                  className={item.status === "connected" ? "bg-green-500/10 text-green-600 hover:bg-green-500/10" : ""}
+                >
+                  {item.status === "connected" ? "Connected" : "Disconnected"}
+                </Badge>
+              </div>
+              <CardTitle className="mt-4">{item.name}</CardTitle>
+              <CardDescription>{item.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Status</span>
+                  <span className="font-medium">{item.details}</span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground">Last Sync</span>
+                  <span className="text-xs">{item.lastSync}</span>
+                </div>
+                <div className="pt-4 flex gap-2">
+                  <Button variant="outline" className="w-full text-xs h-8 rounded-full">
+                    Configure
+                  </Button>
+                  <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+                    <ExternalLink className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card className="border-primary/20 bg-primary/5">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-primary">
+            <Bell className="h-5 w-5" />
+            Webhook Endpoints
+          </CardTitle>
+          <CardDescription>Receive automated alerts from your own infrastructure.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="rounded-lg border bg-background/50 p-4 font-mono text-xs">
+             GET {(api.getApiBaseUrl() || "http://localhost:8000")}/monitoring/alerts
+          </div>
+          <p className="text-[10px] text-muted-foreground mt-4">
+            Uses live backend monitoring routes for alert ingestion and observability polling.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default IntegrationsPage;

node_modules/frontend/app/layout.tsx

@@ -30,8 +30,7 @@ export default function RootLayout({
       <body className="min-h-full flex flex-col font-sans">
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
           disableTransitionOnChange
         >
           <EnvProvider>

node_modules/frontend/app/page.tsx

@@ -16,7 +16,6 @@ import {
 import { 
   Area, 
   AreaChart, 
-  ResponsiveContainer, 
   Tooltip, 
   XAxis, 
   YAxis,
@@ -27,6 +26,7 @@ import {
 } from "recharts";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { useMemo } from "react";
 import { Observation } from "@/lib/api";
@@ -38,6 +38,14 @@ const Dashboard = () => {
   const { dashboard: data, state, connectionState, connectionText } = useEnv();
   const loading = useMemo(() => connectionState === "checking" && !data && !state, [connectionState, data, state]);
 
+  useEffect(() => {
+    let simInterval: NodeJS.Timeout;
+    if (isSimulating) {
+      simInterval = setInterval(runSimulationStep, 2000);
+    }
+    return () => clearInterval(simInterval);
+  }, [isSimulating, state]);
+
   const lastObs: Observation | undefined = state?.history?.[state.history.length - 1]?.observation;
   
   const healthScore = lastObs?.system_health_score ?? data?.summary?.health_score ?? 0;
@@ -79,23 +87,42 @@ const Dashboard = () => {
           <h1 className="text-3xl font-bold tracking-tight">Enterprise Overview</h1>
           <p className="text-muted-foreground mt-1">Real-time autonomous deployment monitoring.</p>
         </div>
-        <Badge
-          variant="outline"
-          className={cn(
-            "px-4 py-1.5 rounded-full border-2",
-            connectionState === "connected"
-              ? "border-green-500/30 text-green-600 bg-green-50"
-              : connectionState === "disconnected"
-              ? "border-destructive/30 text-destructive bg-destructive/5"
-              : ""
-          )}
-        >
-          <div className={cn(
-            "w-2 h-2 rounded-full mr-2 animate-pulse",
-            connectionState === "connected" ? "bg-green-500" : "bg-destructive"
-          )} />
-          {loading ? "Syncing..." : connectionText}
-        </Badge>
+        <div className="flex items-center gap-3">
+          <Button 
+            variant={isSimulating ? "destructive" : "default"} 
+            size="sm" 
+            onClick={() => setIsSimulating(!isSimulating)}
+            className="rounded-full gap-2 px-6"
+          >
+            {isSimulating ? <Zap className="h-4 w-4 animate-pulse" /> : <Zap className="h-4 w-4" />}
+            {isSimulating ? "Stop Autonomous Mode" : "Start Autonomous Mode"}
+          </Button>
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={() => { api.reset().then(() => fetchData()); }}
+            className="rounded-full"
+          >
+            Reset Session
+          </Button>
+          <Badge
+            variant="outline"
+            className={cn(
+              "px-4 py-1.5 rounded-full border-2",
+              connectionState === "connected"
+                ? "border-green-500/30 text-green-600 bg-green-50"
+                : connectionState === "disconnected"
+                ? "border-destructive/30 text-destructive bg-destructive/5"
+                : ""
+            )}
+          >
+            <div className={cn(
+              "w-2 h-2 rounded-full mr-2 animate-pulse",
+              connectionState === "connected" ? "bg-green-500" : "bg-destructive"
+            )} />
+            {loading ? "Syncing..." : connectionText}
+          </Badge>
+        </div>
       </div>
 
       {/* Primary Metrics */}
@@ -204,11 +231,11 @@ const Dashboard = () => {
 
       <div className="grid gap-6 md:grid-cols-7">
         {/* Main Traffic Chart */}
-        <Card className="md:col-span-4 border-border/50 bg-card/50 shadow-sm">
+        <Card className="md:col-span-4 border-border/50 bg-card/50 shadow-sm overflow-hidden">
           <CardHeader>
             <CardTitle className="flex items-center justify-between">
               Evaluation Traffic
-              <Badge variant="outline" className="font-normal text-xs">
+              <Badge variant="outline" className="font-normal text-xs bg-background/50">
                 Live Stream
               </Badge>
             </CardTitle>
@@ -219,21 +246,37 @@ const Dashboard = () => {
                 <AreaChart data={state?.history?.map(h => ({ 
                   time: h.observation?.time_step, 
                   rollout: h.observation?.current_rollout_percentage,
-                  error: (h.observation?.error_rate ?? 0) * 10000 // scaling for visibility
-                })) || []}>
-                  <defs>
-                    <linearGradient id="colorRollout" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="var(--primary)" stopOpacity={0.2}/>
-                      <stop offset="95%" stopColor="var(--primary)" stopOpacity={0}/>
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--border)" opacity={0.5} />
-                  <XAxis dataKey="time" stroke="var(--muted-foreground)" fontSize={10} tickLine={false} axisLine={false} />
-                  <YAxis stroke="var(--muted-foreground)" fontSize={10} tickLine={false} axisLine={false} />
-                  <Tooltip />
-                  <Area type="monotone" dataKey="rollout" stroke="var(--primary)" strokeWidth={2} fill="url(#colorRollout)" />
-                </AreaChart>
-              </ResponsiveContainer>
+                  error: (h.observation?.error_rate ?? 0) * 100
+                })) : [
+                  { time: -2, rollout: 5, error: 0.1 },
+                  { time: -1, rollout: 5, error: 0.15 },
+                  { time: 0, rollout: 5, error: 0.1 }
+                ]}
+                margin={{ top: 20, right: 30, left: 0, bottom: 0 }}
+              >
+                <defs>
+                  <linearGradient id="colorRollout" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.4}/>
+                    <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0}/>
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#222" />
+                <XAxis dataKey="time" stroke="#444" fontSize={10} tickLine={false} axisLine={false} />
+                <YAxis stroke="#444" fontSize={10} tickLine={false} axisLine={false} domain={[0, 100]} />
+                <Tooltip 
+                  contentStyle={{ backgroundColor: '#111', border: '1px solid #333', borderRadius: '8px' }} 
+                  itemStyle={{ color: '#8b5cf6' }}
+                />
+                <Area 
+                  type="monotone" 
+                  dataKey="rollout" 
+                  stroke="#a78bfa" 
+                  strokeWidth={3} 
+                  fillOpacity={1} 
+                  fill="url(#colorRollout)" 
+                  animationDuration={1000}
+                />
+              </AreaChart>
             </div>
           </CardContent>
         </Card>
@@ -296,9 +339,16 @@ const Dashboard = () => {
 
          <Card className="border-border/50 bg-card/50 col-span-2">
             <CardHeader className="pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                <ShieldAlert className="h-4 w-4 text-red-500" />
-                Active Alerts & Incidents
+              <CardTitle className="text-sm font-medium flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <ShieldAlert className="h-4 w-4 text-red-500" />
+                  Active Alerts & Incidents
+                </div>
+                <div className="flex items-center gap-4">
+                   <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground uppercase font-bold">
+                      <div className="w-1.5 h-1.5 rounded-full bg-green-500" /> Slack
+                   </div>
+                </div>
               </CardTitle>
             </CardHeader>
             <CardContent>

node_modules/frontend/components/layout/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Flag,
   Beaker,
   BrainCircuit,
+  Activity,
   Settings,
 } from "lucide-react";
 import { motion } from "framer-motion";
@@ -33,6 +34,11 @@ const sidebarNavItems = [
     href: "/ai-decisions",
     icon: BrainCircuit,
   },
+  {
+    title: "Integrations",
+    href: "/integrations",
+    icon: Activity,
+  },
   {
     title: "Settings",
     href: "/settings",

node_modules/frontend/components/theme-provider.tsx

@@ -1,11 +1,71 @@
 "use client";
 
 import * as React from "react";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const ThemeProviderContext = React.createContext<ThemeProviderState | undefined>(
+  undefined
+);
 
 export function ThemeProvider({
   children,
+  defaultTheme = "dark",
+  storageKey = "ui-theme",
   ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}: {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+  [key: string]: unknown;
+}) {
+  const [theme, setTheme] = React.useState<Theme>(
+    () => (typeof window !== "undefined" && (localStorage.getItem(storageKey) as Theme)) || defaultTheme
+  );
+
+  React.useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
 }

node_modules/frontend/components/theme-toggle.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useTheme } from "@/components/theme-provider";
 import { cn } from "@/lib/utils";
 
 import {

node_modules/frontend/lib/api.ts

@@ -122,9 +122,12 @@ export interface State {
   episode_id: string;
   step_count: number;
   total_reward: number;
+  done?: boolean;
   is_done: boolean;
   scenario_name: string;
   difficulty: string;
+  action_history?: ActionHistoryItem[];
+  rollout_history?: number[];
   history: Array<{
     observation?: Observation;
     reward?: number;
@@ -323,7 +326,8 @@ export const api = {
 
   async getDashboard(): Promise<DashboardData> {
     try {
-      return this.request<DashboardData>("/monitoring/dashboard", { method: "GET" });
+      const dashboard = await this.request<unknown>("/monitoring/dashboard", { method: "GET" });
+      return normalizeDashboard(dashboard);
     } catch (error) {
       // Monitoring can be disabled on backend; fall back to core state/health data.
       if (error instanceof Error && /(403|monitoring is not enabled)/i.test(error.message)) {

pyproject.toml

@@ -18,7 +18,6 @@ dependencies = [
     
     # 🧮 Math & Simulation
     "numpy>=1.24.0",
-    "torch>=2.0.0",
     
     # 🤖 LLM Integration (OpenAI-compatible client)
     "groq>=0.4.0",