create-interview-cockpit 0.11.0 → 0.13.0

package/template/client/src/components/DeploymentLabModal.tsx

@@ -0,0 +1,1941 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  X,
+  Plus,
+  Trash2,
+  Play,
+  Pause,
+  RotateCcw,
+  Server,
+  ArrowRight,
+  ChevronLeft,
+  ChevronRight,
+  Network,
+} from "lucide-react";
+import { useStore } from "../store";
+
+// ═══════════════════════════════════════════════════════════════════ Types
+
+type Strategy =
+  | "recreate"
+  | "rolling"
+  | "blue-green"
+  | "canary"
+  | "ab"
+  | "shadow";
+type InstState = "old" | "new" | "updating" | "down" | "shadow";
+type Tab = "viz" | "metrics" | "mechanism" | "timeline";
+
+type EventType =
+  | "start"
+  | "downtime-start"
+  | "downtime-end"
+  | "deploy-start"
+  | "health-check"
+  | "traffic-switch"
+  | "rollback-point"
+  | "observation"
+  | "complete";
+
+interface Svc {
+  id: string;
+  name: string;
+  fromVer: string;
+  toVer: string;
+  instances: number;
+}
+
+interface Inst {
+  id: string;
+  svcId: string;
+  state: InstState;
+  env: "blue" | "green" | "main";
+}
+
+interface Metrics {
+  errorRate: number;
+  p50: number;
+  p99: number;
+  rps: number;
+  healthyOld: number;
+  healthyNew: number;
+  total: number;
+  trafficOldPct: number;
+  trafficNewPct: number;
+  rolloutPct: number;
+}
+
+interface Snapshot {
+  label: string;
+  insts: Inst[];
+  metrics: Metrics;
+  note?: string;
+  // timeline fields
+  timestamp: number; // seconds from T+0
+  eventType: EventType;
+  infraCount: number; // total running instances (old + new + shadow)
+  isDowntime?: boolean;
+  downtimeDeltaSecs?: number; // how many seconds of downtime this step adds
+}
+
+interface Cfg {
+  batchSize: number;
+  canaryInitPct: number;
+  canaryStepPct: number;
+  abSplitPct: number;
+}
+
+// ═══════════════════════════════════════════════════════════════════ Constants
+
+const STRATEGIES: Strategy[] = [
+  "recreate",
+  "rolling",
+  "blue-green",
+  "canary",
+  "ab",
+  "shadow",
+];
+
+const STRAT_LABELS: Record<Strategy, [string, string]> = {
+  recreate: ["Recreate", "All down → all new"],
+  rolling: ["Rolling", "Instance by instance"],
+  "blue-green": ["Blue-Green", "Full env switch"],
+  canary: ["Canary", "Gradual % rollout"],
+  ab: ["A/B", "Split by segment"],
+  shadow: ["Shadow", "Mirror traffic"],
+};
+
+const STRAT_ACTIVE_COLOR: Record<Strategy, string> = {
+  recreate: "border-red-500/50 bg-red-500/10 text-red-300",
+  rolling: "border-amber-500/50 bg-amber-500/10 text-amber-300",
+  "blue-green": "border-emerald-500/50 bg-emerald-500/10 text-emerald-300",
+  canary: "border-yellow-500/50 bg-yellow-500/10 text-yellow-300",
+  ab: "border-violet-500/50 bg-violet-500/10 text-violet-300",
+  shadow: "border-slate-500/50 bg-slate-500/15 text-slate-300",
+};
+
+// scores 1-5 per dimension
+const STRAT_TRADEOFFS: Record<
+  Strategy,
+  {
+    speed: number;
+    safety: number;
+    downtime: number;
+    rollback: number;
+    cost: number;
+  }
+> = {
+  recreate: { speed: 5, safety: 1, downtime: 1, rollback: 2, cost: 1 },
+  rolling: { speed: 3, safety: 3, downtime: 4, rollback: 3, cost: 2 },
+  "blue-green": { speed: 3, safety: 4, downtime: 5, rollback: 5, cost: 2 },
+  canary: { speed: 2, safety: 5, downtime: 5, rollback: 4, cost: 3 },
+  ab: { speed: 2, safety: 4, downtime: 5, rollback: 3, cost: 3 },
+  shadow: { speed: 1, safety: 5, downtime: 5, rollback: 5, cost: 1 },
+};
+
+// legend for scores
+const TRADEOFF_HINT: Record<string, [string, string]> = {
+  speed: ["Speed", "How quickly can you release?"],
+  safety: ["Safety", "How much risk if the release has bugs?"],
+  downtime: ["No downtime", "Will users notice interruptions?"],
+  rollback: ["Rollback ease", "How easy to return to the old version?"],
+  cost: [
+    "Low cost",
+    "Servers, tools & processes required — inverted (5 = cheaper)",
+  ],
+};
+
+const INST_STYLE: Record<
+  InstState,
+  { bg: string; border: string; text: string; label: string; pulse?: boolean }
+> = {
+  old: {
+    bg: "bg-slate-700",
+    border: "border-slate-500",
+    text: "text-slate-300",
+    label: "v1",
+  },
+  new: {
+    bg: "bg-cyan-700",
+    border: "border-cyan-400",
+    text: "text-cyan-200",
+    label: "v2",
+  },
+  updating: {
+    bg: "bg-amber-700",
+    border: "border-amber-400",
+    text: "text-amber-200",
+    label: "↻",
+    pulse: true,
+  },
+  down: {
+    bg: "bg-red-900/80",
+    border: "border-red-700",
+    text: "text-red-400",
+    label: "✕",
+  },
+  shadow: {
+    bg: "bg-violet-900",
+    border: "border-violet-500",
+    text: "text-violet-300",
+    label: "v2",
+  },
+};
+
+const DEFAULT_SVCS: Svc[] = [
+  { id: "host", name: "Host", fromVer: "1.2.0", toVer: "2.0.0", instances: 3 },
+  {
+    id: "mfe-auth",
+    name: "MFE Auth",
+    fromVer: "1.0.4",
+    toVer: "1.1.0",
+    instances: 2,
+  },
+];
+
+const DEFAULT_CFG: Cfg = {
+  batchSize: 1,
+  canaryInitPct: 10,
+  canaryStepPct: 30,
+  abSplitPct: 50,
+};
+
+// ═══════════════════════════════════════════════════════════════════ Sim helpers
+
+function buildInsts(svcs: Svc[]): Inst[] {
+  return svcs.flatMap((s) =>
+    Array.from({ length: s.instances }, (_, i) => ({
+      id: `${s.id}:${i}`,
+      svcId: s.id,
+      state: "old" as InstState,
+      env: "main" as const,
+    })),
+  );
+}
+
+function baseMx(insts: Inst[]): Metrics {
+  return {
+    errorRate: 0.4,
+    p50: 42,
+    p99: 180,
+    rps: 1200,
+    healthyOld: insts.length,
+    healthyNew: 0,
+    total: insts.length,
+    trafficOldPct: 100,
+    trafficNewPct: 0,
+    rolloutPct: 0,
+  };
+}
+
+function patch(insts: Inst[], updates: Record<string, Partial<Inst>>): Inst[] {
+  return insts.map((i) => (updates[i.id] ? { ...i, ...updates[i.id] } : i));
+}
+
+// ═══════════════════════════════════════════════════════════════════ Simulation builders
+
+function simRecreate(svcs: Svc[]): Snapshot[] {
+  const base = buildInsts(svcs);
+  const n = base.length;
+  const mx = baseMx(base);
+  // ~10s to stop, ~40s to start per instance group
+  const stopDur = 10;
+  const startDur = Math.round(n * 15);
+  return [
+    {
+      label: "Live: v1 serving all traffic",
+      insts: base,
+      metrics: mx,
+      timestamp: 0,
+      eventType: "start",
+      infraCount: n,
+    },
+    {
+      label: "Shutting down all v1 instances...",
+      insts: base.map((i) => ({ ...i, state: "down" })),
+      metrics: {
+        ...mx,
+        errorRate: 100,
+        rps: 0,
+        healthyOld: 0,
+        trafficOldPct: 0,
+        trafficNewPct: 0,
+      },
+      note: "⚠ DOWNTIME — App is unreachable during this phase",
+      timestamp: 5,
+      eventType: "downtime-start",
+      infraCount: 0,
+      isDowntime: true,
+      downtimeDeltaSecs: stopDur,
+    },
+    {
+      label: "Starting v2 instances...",
+      insts: base.map((i) => ({ ...i, state: "updating" })),
+      metrics: {
+        ...mx,
+        errorRate: 100,
+        rps: 0,
+        healthyOld: 0,
+        trafficOldPct: 0,
+        trafficNewPct: 0,
+      },
+      note: "⚠ DOWNTIME — Instances initializing",
+      timestamp: 5 + stopDur,
+      eventType: "deploy-start",
+      infraCount: n,
+      isDowntime: true,
+      downtimeDeltaSecs: startDur,
+    },
+    {
+      label: "✓ v2 deployed — all traffic restored",
+      insts: base.map((i) => ({ ...i, state: "new" })),
+      metrics: {
+        ...mx,
+        healthyOld: 0,
+        healthyNew: n,
+        trafficOldPct: 0,
+        trafficNewPct: 100,
+        rolloutPct: 100,
+      },
+      timestamp: 5 + stopDur + startDur,
+      eventType: "complete",
+      infraCount: n,
+    },
+  ];
+}
+
+function simRolling(svcs: Svc[], batchSize: number): Snapshot[] {
+  let current = buildInsts(svcs);
+  const n = current.length;
+  const mx = baseMx(current);
+  const perBatchSecs = 20;
+  const snaps: Snapshot[] = [
+    {
+      label: "Live: v1 serving all traffic",
+      insts: [...current],
+      metrics: mx,
+      timestamp: 0,
+      eventType: "start",
+      infraCount: n,
+    },
+  ];
+
+  const ids = current.map((i) => i.id);
+  const totalBatches = Math.ceil(n / batchSize);
+  let t = 5;
+
+  for (let start = 0; start < ids.length; start += batchSize) {
+    const batch = ids.slice(start, start + batchSize);
+    const batchNum = Math.floor(start / batchSize) + 1;
+
+    const upd1: Record<string, Partial<Inst>> = {};
+    batch.forEach((id) => {
+      upd1[id] = { state: "updating" };
+    });
+    const insts1 = patch(current, upd1);
+    const newSoFar = insts1.filter((i) => i.state === "new").length;
+
+    snaps.push({
+      label: `Batch ${batchNum}/${totalBatches}: replacing instance(s)...`,
+      insts: insts1,
+      metrics: {
+        ...mx,
+        errorRate: 0.8,
+        p50: 58,
+        healthyOld: n - newSoFar - batch.length,
+        healthyNew: newSoFar,
+        trafficOldPct: Math.round(((n - newSoFar) / n) * 100),
+        trafficNewPct: Math.round((newSoFar / n) * 100),
+        rolloutPct: Math.round((newSoFar / n) * 100),
+      },
+      timestamp: t,
+      eventType: "deploy-start",
+      infraCount: n,
+    });
+    t += Math.round(perBatchSecs * 0.6);
+
+    const upd2: Record<string, Partial<Inst>> = {};
+    batch.forEach((id) => {
+      upd2[id] = { state: "new" };
+    });
+    current = patch(current, upd2);
+    const newCount = current.filter((i) => i.state === "new").length;
+
+    snaps.push({
+      label: `Batch ${batchNum}/${totalBatches}: v2 live on updated instances`,
+      insts: [...current],
+      metrics: {
+        ...mx,
+        healthyOld: n - newCount,
+        healthyNew: newCount,
+        trafficOldPct: Math.round(((n - newCount) / n) * 100),
+        trafficNewPct: Math.round((newCount / n) * 100),
+        rolloutPct: Math.round((newCount / n) * 100),
+      },
+      timestamp: t,
+      eventType: newCount === n ? "complete" : "health-check",
+      infraCount: n,
+    });
+    t += Math.round(perBatchSecs * 0.4);
+  }
+  return snaps;
+}
+
+function simBlueGreen(svcs: Svc[]): Snapshot[] {
+  const base = buildInsts(svcs);
+  const n = base.length;
+  const mx = baseMx(base);
+  const blue = base.map((i) => ({
+    ...i,
+    env: "blue" as const,
+    state: "old" as InstState,
+  }));
+  const green = base.map((i) => ({
+    ...i,
+    id: i.id + ":g",
+    env: "green" as const,
+    state: "new" as InstState,
+  }));
+  const spinUpSecs = Math.round(n * 20);
+
+  return [
+    {
+      label: "Live: Blue env (v1) serving all traffic",
+      insts: blue,
+      metrics: mx,
+      note: "Blue = active environment",
+      timestamp: 0,
+      eventType: "start" as EventType,
+      infraCount: n,
+    },
+    {
+      label: "Deploying v2 to Green environment...",
+      insts: [
+        ...blue,
+        ...green.map((i) => ({ ...i, state: "updating" as InstState })),
+      ],
+      metrics: { ...mx, total: n * 2 },
+      note: "Green receives no user traffic yet",
+      timestamp: 5,
+      eventType: "deploy-start" as EventType,
+      infraCount: n * 2,
+    },
+    {
+      label: "Green v2 ready — running health checks...",
+      insts: [...blue, ...green],
+      metrics: { ...mx, total: n * 2 },
+      note: "✓ Health checks passing. Ready to switch.",
+      timestamp: 5 + spinUpSecs,
+      eventType: "health-check" as EventType,
+      infraCount: n * 2,
+    },
+    {
+      label: "✓ Traffic switched: Blue → Green (v2 live)",
+      insts: [...blue, ...green],
+      metrics: {
+        ...mx,
+        healthyOld: n,
+        healthyNew: n,
+        total: n * 2,
+        trafficOldPct: 0,
+        trafficNewPct: 100,
+        rolloutPct: 100,
+      },
+      note: "Blue kept as warm standby. Rollback: flip LB back to Blue (< 30s)",
+      timestamp: 5 + spinUpSecs + 5,
+      eventType: "traffic-switch" as EventType,
+      infraCount: n * 2,
+    },
+    {
+      label: "Blue env decommissioned (optional)",
+      insts: green,
+      metrics: {
+        ...mx,
+        healthyOld: 0,
+        healthyNew: n,
+        total: n,
+        trafficOldPct: 0,
+        trafficNewPct: 100,
+        rolloutPct: 100,
+      },
+      note: "Blue instances terminated. System back to baseline infra cost.",
+      timestamp: 5 + spinUpSecs + 5 + 300,
+      eventType: "rollback-point" as EventType,
+      infraCount: n,
+    },
+  ];
+}
+
+function simCanary(svcs: Svc[], initPct: number, stepPct: number): Snapshot[] {
+  let current = buildInsts(svcs);
+  const n = current.length;
+  const mx = baseMx(current);
+  const observationPerStep = 120; // 2 min observation window per canary step
+  const snaps: Snapshot[] = [
+    {
+      label: "Live: v1 serving 100% traffic",
+      insts: [...current],
+      metrics: mx,
+      timestamp: 0,
+      eventType: "start",
+      infraCount: n,
+    },
+  ];
+
+  const pcts: number[] = [];
+  let p = initPct;
+  while (p < 100) {
+    pcts.push(p);
+    p = Math.min(100, p + stepPct);
+  }
+  pcts.push(100);
+
+  let alreadyNew = 0;
+  let t = 5;
+  for (const targetPct of pcts) {
+    const targetCount = Math.max(1, Math.round((targetPct / 100) * n));
+    const toFlip = targetCount - alreadyNew;
+    if (toFlip <= 0) continue;
+
+    let flipped = 0;
+    current = current.map((i) => {
+      if (i.state !== "old" || flipped >= toFlip) return i;
+      flipped++;
+      return { ...i, state: "new" as InstState };
+    });
+    alreadyNew = current.filter((i) => i.state === "new").length;
+    const actualPct = Math.round((alreadyNew / n) * 100);
+    const isLast = actualPct >= 100;
+
+    snaps.push({
+      label: `Canary at ${actualPct}% — monitoring signals...`,
+      insts: [...current],
+      metrics: {
+        ...mx,
+        errorRate: 0.3,
+        healthyOld: n - alreadyNew,
+        healthyNew: alreadyNew,
+        trafficOldPct: 100 - actualPct,
+        trafficNewPct: actualPct,
+        rolloutPct: actualPct,
+      },
+      note: isLast
+        ? "✓ Rollout complete — all traffic on v2"
+        : `${actualPct}% of users routed to v2 via X-Canary header. Watching error rate & latency.`,
+      timestamp: t,
+      eventType: isLast ? "complete" : "observation",
+      infraCount: n,
+    });
+    t += isLast ? 10 : observationPerStep;
+  }
+  return snaps;
+}
+
+function simAB(svcs: Svc[], splitPct: number): Snapshot[] {
+  const base = buildInsts(svcs);
+  const n = base.length;
+  const mx = baseMx(base);
+  const splitN = Math.max(1, Math.round((splitPct / 100) * n));
+  const split = base.map((i, idx) => ({
+    ...i,
+    state: (idx < splitN ? "new" : "old") as InstState,
+  }));
+  const statSigSecs = 3600 * 24; // typically 24h+ to reach statistical significance
+  return [
+    {
+      label: "Live: v1 serving 100% traffic",
+      insts: base,
+      metrics: mx,
+      timestamp: 0,
+      eventType: "start",
+      infraCount: n,
+    },
+    {
+      label: `A/B active — A: ${100 - splitPct}%  B: ${splitPct}%`,
+      insts: split,
+      metrics: {
+        ...mx,
+        healthyOld: n - splitN,
+        healthyNew: splitN,
+        trafficOldPct: 100 - splitPct,
+        trafficNewPct: splitPct,
+        rolloutPct: splitPct,
+      },
+      note: "Users assigned by stable hash on user_id. Each user consistently sees the same variant.",
+      timestamp: 30,
+      eventType: "traffic-switch",
+      infraCount: n,
+    },
+    {
+      label: "Collecting signal data...",
+      insts: split,
+      metrics: {
+        ...mx,
+        errorRate: 0.2,
+        p50: 38,
+        healthyOld: n - splitN,
+        healthyNew: splitN,
+        trafficOldPct: 100 - splitPct,
+        trafficNewPct: splitPct,
+        rolloutPct: splitPct,
+      },
+      note: "Comparing: conversion rate, session duration, error rates per variant",
+      timestamp: 30 + statSigSecs,
+      eventType: "observation",
+      infraCount: n,
+    },
+    {
+      label: "✓ Winner declared — shifting 100% to B",
+      insts: base.map((i) => ({ ...i, state: "new" as InstState })),
+      metrics: {
+        ...mx,
+        healthyOld: 0,
+        healthyNew: n,
+        trafficOldPct: 0,
+        trafficNewPct: 100,
+        rolloutPct: 100,
+      },
+      note: "Based on statistical significance (p < 0.05). Full rollout complete.",
+      timestamp: 30 + statSigSecs + 300,
+      eventType: "complete",
+      infraCount: n,
+    },
+  ];
+}
+
+function simShadow(svcs: Svc[]): Snapshot[] {
+  const base = buildInsts(svcs);
+  const n = base.length;
+  const mx = baseMx(base);
+  const shadows = base.map((i) => ({
+    ...i,
+    id: i.id + ":s",
+    state: "shadow" as InstState,
+  }));
+  const observeSecs = 3600 * 2; // 2 hours typical shadow observation period
+  return [
+    {
+      label: "Live: v1 serving all traffic",
+      insts: base,
+      metrics: mx,
+      timestamp: 0,
+      eventType: "start",
+      infraCount: n,
+    },
+    {
+      label: "Shadow mode: v2 receiving mirrored traffic",
+      insts: [...base, ...shadows],
+      metrics: { ...mx, total: n * 2 },
+      note: "Users only see v1 responses. v2 processes each request silently — responses discarded.",
+      timestamp: 30,
+      eventType: "deploy-start",
+      infraCount: n * 2,
+    },
+    {
+      label: "Observation phase: comparing v1 vs v2 behaviour",
+      insts: [...base, ...shadows],
+      metrics: { ...mx, p50: 41, p99: 172, errorRate: 0.1, total: n * 2 },
+      note: "⚠ Shadow traffic must be read-only — no writes to prod DB, real emails, or payments",
+      timestamp: 30 + observeSecs,
+      eventType: "observation",
+      infraCount: n * 2,
+    },
+    {
+      label: "✓ Observation complete — v2 promoted to primary",
+      insts: base.map((i) => ({ ...i, state: "new" as InstState })),
+      metrics: {
+        ...mx,
+        healthyOld: 0,
+        healthyNew: n,
+        trafficOldPct: 0,
+        trafficNewPct: 100,
+        rolloutPct: 100,
+      },
+      note: "Shadow instances decommissioned. System at baseline infra cost.",
+      timestamp: 30 + observeSecs + 300,
+      eventType: "complete",
+      infraCount: n,
+    },
+  ];
+}
+
+function buildSim(svcs: Svc[], strategy: Strategy, cfg: Cfg): Snapshot[] {
+  switch (strategy) {
+    case "recreate":
+      return simRecreate(svcs);
+    case "rolling":
+      return simRolling(svcs, cfg.batchSize);
+    case "blue-green":
+      return simBlueGreen(svcs);
+    case "canary":
+      return simCanary(svcs, cfg.canaryInitPct, cfg.canaryStepPct);
+    case "ab":
+      return simAB(svcs, cfg.abSplitPct);
+    case "shadow":
+      return simShadow(svcs);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════ Sub-components
+
+function CodeBlock({ children }: { children: string }) {
+  return (
+    <pre className="bg-slate-900/80 border border-slate-700 rounded p-3 text-[10px] font-mono text-slate-300 overflow-x-auto whitespace-pre leading-relaxed">
+      {children}
+    </pre>
+  );
+}
+
+function MetricBar({
+  label,
+  value,
+  max,
+  format,
+  color = "bg-cyan-500",
+}: {
+  label: string;
+  value: number;
+  max: number;
+  format: (v: number) => string;
+  color?: string;
+}) {
+  const pct = Math.min(100, (value / max) * 100);
+  return (
+    <div className="mb-3">
+      <div className="flex justify-between text-[10px] mb-1">
+        <span className="text-slate-400">{label}</span>
+        <span className="text-slate-300 font-mono">{format(value)}</span>
+      </div>
+      <div className="h-1.5 bg-slate-800 rounded-full overflow-hidden">
+        <div
+          className={`h-full rounded-full transition-all duration-700 ${color}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function InstDot({ inst, svcs }: { inst: Inst; svcs: Svc[] }) {
+  const svc = svcs.find((s) => s.id === inst.svcId);
+  const style = INST_STYLE[inst.state];
+  const versionLabel =
+    inst.state === "old"
+      ? svc?.fromVer
+      : inst.state === "new" || inst.state === "shadow"
+        ? svc?.toVer
+        : inst.state;
+
+  return (
+    <div
+      title={`${inst.id} [${inst.env}] — ${versionLabel}`}
+      className={[
+        "w-10 h-10 rounded-lg border-2 flex items-center justify-center",
+        "text-[9px] font-bold select-none transition-all duration-500",
+        style.bg,
+        style.border,
+        style.text,
+        style.pulse ? "animate-pulse" : "",
+        inst.state === "shadow" ? "opacity-60 ring-1 ring-violet-400/30" : "",
+        inst.env === "blue" ? "ring-1 ring-blue-400/30" : "",
+        inst.env === "green" ? "ring-1 ring-emerald-400/30" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {style.label}
+    </div>
+  );
+}
+
+function MechanismView({
+  strategy,
+  cfg,
+  snap,
+}: {
+  strategy: Strategy;
+  cfg: Cfg;
+  snap: Snapshot | null;
+}) {
+  const trafficNew = snap?.metrics.trafficNewPct ?? 0;
+  const trafficOld = snap?.metrics.trafficOldPct ?? 100;
+
+  return (
+    <div className="p-4 space-y-4">
+      <h3 className="text-[10px] font-semibold text-slate-500 uppercase tracking-widest">
+        Mechanism — {STRAT_LABELS[strategy][0]}
+      </h3>
+
+      {strategy === "recreate" && (
+        <div className="space-y-3">
+          <p className="text-[11px] text-slate-400">
+            No special routing mechanism. All instances are replaced before
+            traffic resumes.
+          </p>
+          <CodeBlock>{`# Kubernetes deployment strategy config
+strategy:
+  type: Recreate   ← stops all old pods, then starts new ones
+
+# Deployment sequence
+1. kubectl rollout:  stop all v1 instances
+2. Pull new image:   registry.io/app:2.0.0
+3. Start all v2 instances
+4. Traffic resumes once v2 is healthy`}</CodeBlock>
+          <div className="bg-red-500/10 border border-red-500/30 rounded p-2.5 text-[10px] text-red-300 leading-relaxed">
+            ⚠ Downtime window: ~30–90 seconds
+            <br />
+            Rollback: re-deploy v1 image — same downtime cost applies
+          </div>
+        </div>
+      )}
+
+      {strategy === "rolling" && (
+        <div className="space-y-3">
+          <p className="text-[11px] text-slate-400">
+            Load balancer routes only to healthy instances. Old and new coexist
+            during rollout.
+          </p>
+          <CodeBlock>{`# Kubernetes RollingUpdate config (deployment.yaml)
+strategy:
+  type: RollingUpdate
+  rollingUpdate:
+    maxUnavailable: ${cfg.batchSize}   ← max instances down at once
+    maxSurge: ${cfg.batchSize}         ← max extra instances created
+
+# Traffic routing during rollout
+Request → Load Balancer → any healthy instance
+                          (v1 OR v2, whichever is ready)
+
+# No special request headers needed —
+# LB health checks gate which instances receive traffic`}</CodeBlock>
+          <div className="bg-amber-500/10 border border-amber-500/30 rounded p-2.5 text-[10px] text-amber-300 leading-relaxed">
+            ⚠ Backward compatibility required
+            <br />
+            v1 and v2 run simultaneously. API changes and DB schema must be
+            compatible with both versions during rollout.
+          </div>
+        </div>
+      )}
+
+      {strategy === "blue-green" && (
+        <div className="space-y-3">
+          <p className="text-[11px] text-slate-400">
+            Two full environments. Traffic switches atomically via a load
+            balancer rule.
+          </p>
+          <CodeBlock>{`# Before switch
+User → ALB listener → Blue target group (v1.2.0) ✓
+
+# After switch
+User → ALB listener → Green target group (v2.0.0) ✓
+Blue target group (v1.2.0) → kept as warm standby
+
+# AWS ALB listener rule (simplified)
+Action:
+  type: forward
+  target_group: ${trafficNew > 0 ? "green-tg  ← v2.0.0 (active)" : "blue-tg   ← v1.2.0 (active)"}
+
+# Rollback: update listener to point back at blue-tg
+# Takes < 30 seconds — no container restart needed`}</CodeBlock>
+          <div className="bg-emerald-500/10 border border-emerald-500/30 rounded p-2.5 text-[10px] text-emerald-300 leading-relaxed">
+            ⚠ Database migrations must be forward-compatible
+            <br />
+            The DB is shared by both environments. If v2 changes the schema in a
+            way v1 cannot handle, rollback becomes hard.
+          </div>
+        </div>
+      )}
+
+      {strategy === "canary" && (
+        <div className="space-y-3">
+          <p className="text-[11px] text-slate-400">
+            A small percentage of users are routed to v2, identified by request
+            headers or ID hashing.
+          </p>
+          <CodeBlock>{`# Current traffic split
+${trafficOld}% → v1.2.0 stable instances
+${trafficNew}% → v2.0.0 canary instances
+
+# NGINX split_clients (address + UA hashing)
+split_clients "$remote_addr$http_user_agent" $upstream {
+  ${String(trafficNew).padEnd(3)}  canary_v2;
+  *    stable_v1;
+}
+
+# Request arriving at a canary instance:
+GET /api/checkout HTTP/1.1
+Host: app.example.com
+X-Canary-Group: true
+X-User-ID: a7f3bc92
+Cookie: canary_session=1
+
+# Routing decision (server-side)
+IF hash(X-User-ID) % 100 < ${trafficNew}:
+  → route to v2.0.0 canary instance group
+ELSE:
+  → route to v1.2.0 stable instance group`}</CodeBlock>
+          <div className="bg-yellow-500/10 border border-yellow-500/30 rounded p-2.5 text-[10px] text-yellow-300 leading-relaxed">
+            Blast radius: only {trafficNew}% of users see any v2 bugs right now
+            <br />
+            Monitor: error rate, p99 latency, conversion — before increasing %
+          </div>
+        </div>
+      )}
+
+      {strategy === "ab" && (
+        <div className="space-y-3">
+          <p className="text-[11px] text-slate-400">
+            Users are deterministically bucketed — consistent variant across
+            sessions.
+          </p>
+          <CodeBlock>{`# Traffic split
+A (v1): ${trafficOld}%  |  B (v2): ${trafficNew}%
+
+# User assignment (stable — same user always gets same variant)
+bucket = murmur_hash(user_id) % 100
+variant = bucket < ${trafficNew} ? "B" : "A"
+route_to = variant === "B" ? v2_instances : v1_instances
+
+# Request headers for a Group B user
+GET /checkout HTTP/1.1
+Cookie: user_id=u-48f2ca; ab_group=B
+X-AB-Variant: B
+
+# Metrics tracked per group
+- Conversion rate
+- Session duration (minutes)
+- Error rate (%)
+- Revenue per session ($)`}</CodeBlock>
+          <div className="bg-violet-500/10 border border-violet-500/30 rounded p-2.5 text-[10px] text-violet-300 leading-relaxed">
+            Unlike canary, the A/B split stays fixed until statistical
+            significance is reached.
+            <br />
+            Changing the split mid-experiment invalidates results.
+          </div>
+        </div>
+      )}
+
+      {strategy === "shadow" && (
+        <div className="space-y-3">
+          <p className="text-[11px] text-slate-400">
+            Real traffic is mirrored to v2. Users only ever see v1 responses.
+          </p>
+          <CodeBlock>{`# Envoy proxy mirror configuration
+routes:
+  - match: { prefix: "/" }
+    route:
+      cluster: v1-primary            ← user sees this response ✓
+    request_mirror_policies:
+      - cluster: v2-shadow
+        runtime_fraction:
+          default_value: { numerator: 100 }  ← 100% mirrored
+
+# What happens to each request
+User Request
+  │
+  ├── Primary  → v1.2.0  → Response returned to user ✓
+  └── Mirror   → v2.0.0  → Response DISCARDED (metrics only)
+
+# v2 shadow response recorded for
+- Error rate comparison
+- Latency comparison (p50, p99)
+- Response body diff (optional)`}</CodeBlock>
+          <div className="bg-red-500/10 border border-red-500/30 rounded p-2.5 text-[10px] text-red-300 leading-relaxed">
+            ⚠ Critical isolation rules for shadow traffic
+            <br />
+            → Must NOT write to the production database
+            <br />
+            → Must NOT send real emails, SMS, or push notifications
+            <br />
+            → Must NOT process real payments
+            <br />→ Use read-only DB replicas or mocked services in v2
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════ Timeline helpers
+
+function fmtTime(secs: number): string {
+  if (secs === 0) return "0 sec";
+  if (secs < 60) return `${secs} sec`;
+  if (secs < 3600) return `${Math.round(secs / 60)} min`;
+  if (secs < 86400) return `${(secs / 3600).toFixed(1)} hr`;
+  return `${(secs / 86400).toFixed(1)} days`;
+}
+
+function fmtOffset(secs: number): string {
+  if (secs === 0) return "start";
+  if (secs < 60) return `+${secs}s`;
+  if (secs < 3600) return `+${Math.round(secs / 60)} min`;
+  if (secs < 86400) return `+${(secs / 3600).toFixed(1)} hr`;
+  return `+${(secs / 86400).toFixed(1)} days`;
+}
+
+const EVENT_STYLE: Record<
+  EventType,
+  { dot: string; text: string; label: string }
+> = {
+  start: { dot: "bg-slate-500", text: "text-slate-400", label: "Start" },
+  "deploy-start": {
+    dot: "bg-amber-500",
+    text: "text-amber-400",
+    label: "Deploy",
+  },
+  "downtime-start": {
+    dot: "bg-red-600",
+    text: "text-red-400",
+    label: "Downtime start",
+  },
+  "downtime-end": {
+    dot: "bg-emerald-600",
+    text: "text-emerald-400",
+    label: "Downtime end",
+  },
+  "health-check": {
+    dot: "bg-blue-500",
+    text: "text-blue-400",
+    label: "Health check",
+  },
+  "traffic-switch": {
+    dot: "bg-cyan-500",
+    text: "text-cyan-400",
+    label: "Traffic switch",
+  },
+  "rollback-point": {
+    dot: "bg-violet-500",
+    text: "text-violet-400",
+    label: "Rollback point",
+  },
+  observation: {
+    dot: "bg-yellow-500",
+    text: "text-yellow-400",
+    label: "Observation",
+  },
+  complete: {
+    dot: "bg-emerald-500",
+    text: "text-emerald-400",
+    label: "Complete",
+  },
+};
+
+function TimelineView({
+  snapshots,
+  currentIdx,
+  svcs,
+  onJump,
+}: {
+  snapshots: Snapshot[];
+  currentIdx: number;
+  svcs: Svc[];
+  onJump: (idx: number) => void;
+}) {
+  if (snapshots.length === 0) {
+    return (
+      <div className="mt-24 text-center text-slate-600 text-[12px] p-6">
+        Run a deployment to see the event timeline.
+      </div>
+    );
+  }
+
+  const totalSecs = snapshots[snapshots.length - 1].timestamp;
+  const totalDowntime = snapshots.reduce(
+    (acc, s) => acc + (s.downtimeDeltaSecs ?? 0),
+    0,
+  );
+  const peakInfra = Math.max(...snapshots.map((s) => s.infraCount));
+  const baseInfra = snapshots[0]?.infraCount ?? 0;
+  const extraInfra = peakInfra - baseInfra;
+
+  return (
+    <div className="p-5 space-y-5">
+      {/* Summary stat cards */}
+      <div className="grid grid-cols-4 gap-2">
+        <div className="bg-slate-900 border border-slate-700 rounded p-3">
+          <div className="text-[9px] text-slate-500 uppercase tracking-widest mb-1">
+            Total time
+          </div>
+          <div className="text-[15px] font-mono text-slate-200 font-semibold leading-none">
+            {fmtTime(totalSecs)}
+          </div>
+          <div className="text-[9px] text-slate-600 mt-1">
+            from first step to complete
+          </div>
+        </div>
+        <div
+          className={`border rounded p-3 ${totalDowntime > 0 ? "bg-red-900/20 border-red-700/40" : "bg-slate-900 border-slate-700"}`}
+        >
+          <div className="text-[9px] text-slate-500 uppercase tracking-widest mb-1">
+            Downtime
+          </div>
+          <div
+            className={`text-[15px] font-mono font-semibold leading-none ${totalDowntime > 0 ? "text-red-400" : "text-emerald-400"}`}
+          >
+            {totalDowntime > 0 ? fmtTime(totalDowntime) : "Zero"}
+          </div>
+          <div className="text-[9px] text-slate-600 mt-1">
+            user-visible outage
+          </div>
+        </div>
+        <div
+          className={`border rounded p-3 ${extraInfra > 0 ? "bg-amber-900/20 border-amber-700/40" : "bg-slate-900 border-slate-700"}`}
+        >
+          <div className="text-[9px] text-slate-500 uppercase tracking-widest mb-1">
+            Peak infra
+          </div>
+          <div
+            className={`text-[15px] font-mono font-semibold leading-none ${extraInfra > 0 ? "text-amber-400" : "text-slate-200"}`}
+          >
+            {peakInfra} inst.
+          </div>
+          <div className="text-[9px] text-slate-600 mt-1">
+            {extraInfra > 0
+              ? `+${extraInfra} extra vs. baseline`
+              : "same as baseline"}
+          </div>
+        </div>
+        <div className="bg-slate-900 border border-slate-700 rounded p-3">
+          <div className="text-[9px] text-slate-500 uppercase tracking-widest mb-1">
+            Events
+          </div>
+          <div className="text-[15px] font-mono text-slate-200 font-semibold leading-none">
+            {snapshots.length}
+          </div>
+          <div className="text-[9px] text-slate-600 mt-1">
+            steps in this deploy
+          </div>
+        </div>
+      </div>
+
+      {/* Infra chart */}
+      <div className="bg-slate-900/60 border border-slate-800 rounded p-3">
+        <div className="text-[10px] text-slate-500 mb-2">
+          Instance count over time
+          <span className="text-slate-600 ml-2 italic">
+            (baseline = {baseInfra})
+          </span>
+        </div>
+        <div className="flex items-end gap-1 h-12">
+          {snapshots.map((s, i) => {
+            const pct = peakInfra > 0 ? (s.infraCount / peakInfra) * 100 : 0;
+            const isActive = i === currentIdx;
+            return (
+              <button
+                key={i}
+                onClick={() => onJump(i)}
+                title={`${s.label}\n${s.infraCount} instances`}
+                className="flex-1 rounded-sm transition-all relative"
+                style={{ height: `${Math.max(8, pct)}%` }}
+              >
+                <div
+                  className={`w-full h-full rounded-sm transition-colors ${
+                    s.isDowntime
+                      ? "bg-red-700"
+                      : isActive
+                        ? "bg-cyan-500"
+                        : "bg-slate-600 hover:bg-slate-500"
+                  }`}
+                />
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex justify-between text-[9px] text-slate-600 mt-1">
+          <span>start</span>
+          <span>{fmtTime(totalSecs)} total</span>
+        </div>
+      </div>
+
+      {/* Event log */}
+      <div>
+        <div className="text-[10px] font-semibold tracking-widest text-slate-500 mb-3">
+          EVENT LOG
+        </div>
+        <div className="relative">
+          {/* Vertical line */}
+          <div className="absolute left-[7px] top-2 bottom-2 w-px bg-slate-700" />
+
+          <div className="space-y-0">
+            {snapshots.map((s, i) => {
+              const style = EVENT_STYLE[s.eventType];
+              const isActive = i === currentIdx;
+              const isFuture = i > currentIdx;
+
+              return (
+                <button
+                  key={i}
+                  onClick={() => onJump(i)}
+                  className={`w-full text-left flex items-start gap-3 py-2 px-1 rounded transition-colors group ${
+                    isActive ? "bg-slate-800/70" : "hover:bg-slate-800/40"
+                  } ${isFuture ? "opacity-40" : ""}`}
+                >
+                  {/* Dot */}
+                  <div
+                    className={`w-3.5 h-3.5 rounded-full shrink-0 mt-0.5 ring-2 ring-slate-950 ${
+                      isActive
+                        ? style.dot
+                        : isFuture
+                          ? "bg-slate-700"
+                          : style.dot
+                    } transition-colors`}
+                  />
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span
+                        className={`text-[10px] font-mono shrink-0 ${isActive ? "text-slate-300" : "text-slate-600"}`}
+                      >
+                        {fmtOffset(s.timestamp)}
+                      </span>
+                      <span
+                        className={`text-[9px] font-semibold uppercase tracking-wide ${style.text}`}
+                      >
+                        {style.label}
+                      </span>
+                      {s.isDowntime && (
+                        <span className="text-[9px] bg-red-900/60 text-red-400 border border-red-700/50 rounded px-1">
+                          DOWNTIME
+                        </span>
+                      )}
+                    </div>
+                    <div
+                      className={`text-[11px] leading-tight mt-0.5 ${isActive ? "text-slate-200" : "text-slate-400"}`}
+                    >
+                      {s.label}
+                    </div>
+                    {s.note && (
+                      <div className="text-[10px] text-slate-500 leading-snug mt-0.5 italic">
+                        {s.note}
+                      </div>
+                    )}
+                    <div className="flex gap-3 text-[10px] text-slate-600 mt-1">
+                      <span>{s.infraCount} inst.</span>
+                      {s.downtimeDeltaSecs != null &&
+                        s.downtimeDeltaSecs > 0 && (
+                          <span className="text-red-500">
+                            +{fmtTime(s.downtimeDeltaSecs)} outage
+                          </span>
+                        )}
+                    </div>
+                  </div>
+
+                  {isActive && (
+                    <div className="w-1.5 h-1.5 rounded-full bg-cyan-400 shrink-0 mt-1.5 animate-pulse" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ═══════════════════════════════════════════════════════════════════ Main component
+
+export default function DeploymentLabModal() {
+  const { closeDeploymentLab } = useStore();
+
+  const [svcs, setSvcs] = useState<Svc[]>(DEFAULT_SVCS);
+  const [strategy, setStrategy] = useState<Strategy>("rolling");
+  const [cfg, setCfg] = useState<Cfg>(DEFAULT_CFG);
+  const [tab, setTab] = useState<Tab>("viz");
+  const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
+  const [stepIdx, setStepIdx] = useState(0);
+  const [playing, setPlaying] = useState(false);
+
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const isDeployed = snapshots.length > 0;
+  const snap = snapshots[stepIdx] ?? null;
+  const mx = snap?.metrics;
+
+  // Auto-step
+  useEffect(() => {
+    if (playing) {
+      intervalRef.current = setInterval(() => {
+        setStepIdx((prev) => {
+          if (prev >= snapshots.length - 1) {
+            setPlaying(false);
+            return prev;
+          }
+          return prev + 1;
+        });
+      }, 1800);
+    } else {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    }
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [playing, snapshots.length]);
+
+  function handleDeploy() {
+    if (svcs.length === 0) return;
+    const sim = buildSim(svcs, strategy, cfg);
+    setSnapshots(sim);
+    setStepIdx(0);
+    setPlaying(true);
+    setTab("viz");
+  }
+
+  function handleReset() {
+    setPlaying(false);
+    setSnapshots([]);
+    setStepIdx(0);
+  }
+
+  function addSvc() {
+    const id = `svc-${Date.now()}`;
+    setSvcs((prev) => [
+      ...prev,
+      { id, name: "MFE", fromVer: "1.0.0", toVer: "2.0.0", instances: 2 },
+    ]);
+  }
+
+  function updateSvc(id: string, field: keyof Svc, value: string | number) {
+    setSvcs((prev) =>
+      prev.map((s) => (s.id === id ? { ...s, [field]: value } : s)),
+    );
+  }
+
+  // Build instance list, group by service for rendering
+  const insts = snap?.insts ?? [];
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col bg-slate-950 text-slate-200">
+      {/* ── Header ───────────────────────────────────────────────── */}
+      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-slate-800 shrink-0">
+        <Network className="w-4 h-4 text-violet-400" />
+        <span className="text-sm font-semibold text-slate-200">
+          Deployment Lab
+        </span>
+        <span className="text-[10px] text-slate-600 font-mono ml-1">
+          — simulate deployment strategies
+        </span>
+        <div className="flex-1" />
+        <button
+          onClick={closeDeploymentLab}
+          className="p-1 text-slate-500 hover:text-slate-300 transition-colors"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* ── Body ─────────────────────────────────────────────────── */}
+      <div className="flex flex-1 min-h-0">
+        {/* Left panel */}
+        <div className="w-64 shrink-0 border-r border-slate-800 flex flex-col overflow-y-auto">
+          {/* Services */}
+          <div className="p-3 border-b border-slate-800">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-[10px] font-semibold tracking-widest text-slate-500">
+                SERVICES
+              </span>
+              <button
+                onClick={addSvc}
+                className="text-slate-500 hover:text-slate-300 transition-colors"
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </button>
+            </div>
+
+            <div className="space-y-2">
+              {svcs.map((s) => (
+                <div
+                  key={s.id}
+                  className="bg-slate-900/60 border border-slate-800 rounded p-2"
+                >
+                  <div className="flex items-center gap-1 mb-1.5">
+                    <Server className="w-3 h-3 text-slate-500 shrink-0" />
+                    <input
+                      value={s.name}
+                      onChange={(e) => updateSvc(s.id, "name", e.target.value)}
+                      className="flex-1 bg-transparent text-[11px] text-slate-300 outline-none min-w-0"
+                    />
+                    <button
+                      onClick={() =>
+                        setSvcs((prev) => prev.filter((x) => x.id !== s.id))
+                      }
+                      className="text-slate-600 hover:text-red-400 transition-colors shrink-0"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  </div>
+
+                  <div className="flex items-center gap-1 text-[10px]">
+                    <input
+                      value={s.fromVer}
+                      onChange={(e) =>
+                        updateSvc(s.id, "fromVer", e.target.value)
+                      }
+                      className="w-14 bg-slate-800 rounded px-1 py-0.5 text-slate-400 font-mono outline-none"
+                      placeholder="1.0.0"
+                    />
+                    <ArrowRight className="w-3 h-3 text-slate-600 shrink-0" />
+                    <input
+                      value={s.toVer}
+                      onChange={(e) => updateSvc(s.id, "toVer", e.target.value)}
+                      className="w-14 bg-slate-800 rounded px-1 py-0.5 text-cyan-400 font-mono outline-none"
+                      placeholder="2.0.0"
+                    />
+                  </div>
+
+                  <div className="flex items-center gap-1.5 mt-1.5 text-[10px] text-slate-500">
+                    <span>Instances:</span>
+                    <input
+                      type="number"
+                      min={1}
+                      max={6}
+                      value={s.instances}
+                      onChange={(e) =>
+                        updateSvc(
+                          s.id,
+                          "instances",
+                          Math.max(1, parseInt(e.target.value) || 1),
+                        )
+                      }
+                      className="w-8 bg-slate-800 rounded px-1 text-slate-300 outline-none text-center"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Strategy picker */}
+          <div className="p-3 border-b border-slate-800">
+            <span className="text-[10px] font-semibold tracking-widest text-slate-500 block mb-2">
+              STRATEGY
+            </span>
+            <div className="grid grid-cols-2 gap-1">
+              {STRATEGIES.map((s) => {
+                const [label, tag] = STRAT_LABELS[s];
+                const active = strategy === s;
+                return (
+                  <button
+                    key={s}
+                    onClick={() => setStrategy(s)}
+                    className={`text-left rounded border p-1.5 transition-colors ${
+                      active
+                        ? STRAT_ACTIVE_COLOR[s]
+                        : "border-slate-700/50 text-slate-500 hover:text-slate-300 hover:border-slate-600"
+                    }`}
+                  >
+                    <div className="text-[10px] font-semibold leading-tight">
+                      {label}
+                    </div>
+                    <div className="text-[9px] opacity-70 leading-tight mt-0.5">
+                      {tag}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Tradeoffs */}
+          <div className="p-3 border-b border-slate-800">
+            <span className="text-[10px] font-semibold tracking-widest text-slate-500 block mb-2">
+              TRADEOFFS
+            </span>
+            <div className="space-y-1.5">
+              {(
+                Object.keys(TRADEOFF_HINT) as (keyof typeof TRADEOFF_HINT)[]
+              ).map((dim) => {
+                const score =
+                  STRAT_TRADEOFFS[strategy][
+                    dim as keyof (typeof STRAT_TRADEOFFS)[Strategy]
+                  ];
+                const [label, hint] = TRADEOFF_HINT[dim];
+                return (
+                  <div key={dim} title={hint}>
+                    <div className="flex items-center justify-between mb-0.5">
+                      <span className="text-[10px] text-slate-400">
+                        {label}
+                      </span>
+                      <div className="flex gap-0.5">
+                        {Array.from({ length: 5 }, (_, i) => (
+                          <div
+                            key={i}
+                            className={`w-2.5 h-2.5 rounded-sm transition-colors ${
+                              i < score ? "bg-cyan-500" : "bg-slate-700"
+                            }`}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <p className="text-[9px] text-slate-600 mt-2 italic leading-snug">
+              Higher = better for that dimension. Cost is inverted (5 =
+              cheapest).
+            </p>
+          </div>
+
+          {/* Config */}
+          <div className="p-3 border-b border-slate-800">
+            <span className="text-[10px] font-semibold tracking-widest text-slate-500 block mb-2">
+              CONFIG
+            </span>
+
+            {strategy === "rolling" && (
+              <div className="flex items-center justify-between text-[10px]">
+                <span className="text-slate-400">Batch size</span>
+                <input
+                  type="number"
+                  min={1}
+                  max={5}
+                  value={cfg.batchSize}
+                  onChange={(e) =>
+                    setCfg((c) => ({
+                      ...c,
+                      batchSize: Math.max(1, parseInt(e.target.value) || 1),
+                    }))
+                  }
+                  className="w-10 bg-slate-800 rounded px-1 py-0.5 text-slate-300 font-mono outline-none text-center"
+                />
+              </div>
+            )}
+
+            {strategy === "canary" && (
+              <div className="space-y-1.5">
+                <div className="flex items-center justify-between text-[10px]">
+                  <span className="text-slate-400">Initial %</span>
+                  <input
+                    type="number"
+                    min={1}
+                    max={50}
+                    value={cfg.canaryInitPct}
+                    onChange={(e) =>
+                      setCfg((c) => ({
+                        ...c,
+                        canaryInitPct: Math.max(
+                          1,
+                          parseInt(e.target.value) || 10,
+                        ),
+                      }))
+                    }
+                    className="w-12 bg-slate-800 rounded px-1 py-0.5 text-slate-300 font-mono outline-none text-center"
+                  />
+                </div>
+                <div className="flex items-center justify-between text-[10px]">
+                  <span className="text-slate-400">Step %</span>
+                  <input
+                    type="number"
+                    min={5}
+                    max={50}
+                    value={cfg.canaryStepPct}
+                    onChange={(e) =>
+                      setCfg((c) => ({
+                        ...c,
+                        canaryStepPct: Math.max(
+                          5,
+                          parseInt(e.target.value) || 30,
+                        ),
+                      }))
+                    }
+                    className="w-12 bg-slate-800 rounded px-1 py-0.5 text-slate-300 font-mono outline-none text-center"
+                  />
+                </div>
+              </div>
+            )}
+
+            {strategy === "ab" && (
+              <div className="flex items-center justify-between text-[10px]">
+                <span className="text-slate-400">B split %</span>
+                <input
+                  type="number"
+                  min={1}
+                  max={99}
+                  value={cfg.abSplitPct}
+                  onChange={(e) =>
+                    setCfg((c) => ({
+                      ...c,
+                      abSplitPct: Math.max(
+                        1,
+                        Math.min(99, parseInt(e.target.value) || 50),
+                      ),
+                    }))
+                  }
+                  className="w-12 bg-slate-800 rounded px-1 py-0.5 text-slate-300 font-mono outline-none text-center"
+                />
+              </div>
+            )}
+
+            {(strategy === "recreate" ||
+              strategy === "blue-green" ||
+              strategy === "shadow") && (
+              <span className="text-[10px] text-slate-600 italic">
+                No extra config needed
+              </span>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="p-3 space-y-2">
+            <button
+              onClick={handleDeploy}
+              disabled={svcs.length === 0}
+              className="w-full py-1.5 rounded text-[11px] font-semibold bg-cyan-600 hover:bg-cyan-500 text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-1.5"
+            >
+              <Play className="w-3.5 h-3.5" />
+              Deploy
+            </button>
+            {isDeployed && (
+              <button
+                onClick={handleReset}
+                className="w-full py-1.5 rounded text-[11px] text-slate-400 border border-slate-700 hover:border-slate-600 hover:text-slate-300 transition-colors flex items-center justify-center gap-1.5"
+              >
+                <RotateCcw className="w-3 h-3" />
+                Reset
+              </button>
+            )}
+          </div>
+
+          {/* Legend */}
+          <div className="p-3 mt-auto border-t border-slate-800">
+            <span className="text-[9px] font-semibold tracking-widest text-slate-600 block mb-1.5">
+              LEGEND
+            </span>
+            <div className="space-y-1">
+              {(
+                ["old", "updating", "new", "down", "shadow"] as InstState[]
+              ).map((s) => (
+                <div key={s} className="flex items-center gap-2">
+                  <div
+                    className={`w-5 h-5 rounded border-2 flex items-center justify-center text-[8px] font-bold ${INST_STYLE[s].bg} ${INST_STYLE[s].border} ${INST_STYLE[s].text} ${s === "shadow" ? "opacity-60" : ""}`}
+                  >
+                    {INST_STYLE[s].label}
+                  </div>
+                  <span className="text-[10px] text-slate-500 capitalize">
+                    {s}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Right panel */}
+        <div className="flex-1 min-w-0 flex flex-col">
+          {/* Tabs */}
+          <div className="flex border-b border-slate-800 shrink-0">
+            {(["viz", "timeline", "metrics", "mechanism"] as Tab[]).map((t) => (
+              <button
+                key={t}
+                onClick={() => setTab(t)}
+                className={`px-4 py-2 text-[11px] font-medium transition-colors border-b-2 ${
+                  tab === t
+                    ? "border-cyan-500 text-cyan-400 bg-cyan-500/5"
+                    : "border-transparent text-slate-500 hover:text-slate-300"
+                }`}
+              >
+                {
+                  {
+                    viz: "Visualization",
+                    timeline: "Timeline",
+                    metrics: "Metrics",
+                    mechanism: "Mechanism",
+                  }[t]
+                }
+              </button>
+            ))}
+          </div>
+
+          {/* Tab content */}
+          <div className="flex-1 min-h-0 overflow-y-auto">
+            {/* ── Timeline ── */}
+            {tab === "timeline" && (
+              <TimelineView
+                snapshots={snapshots}
+                currentIdx={stepIdx}
+                svcs={svcs}
+                onJump={(i) => {
+                  setPlaying(false);
+                  setStepIdx(i);
+                }}
+              />
+            )}
+
+            {/* ── Visualization ── */}
+            {tab === "viz" && (
+              <div className="p-5">
+                {!isDeployed ? (
+                  <div className="mt-24 text-center text-slate-600 text-[12px]">
+                    Configure services and strategy on the left, then click{" "}
+                    <strong className="text-slate-500">Deploy</strong> to
+                    simulate.
+                  </div>
+                ) : (
+                  <>
+                    {svcs.map((s) => {
+                      const svcInsts = insts.filter((i) => i.svcId === s.id);
+                      const blueInsts = svcInsts.filter(
+                        (i) => i.env === "blue",
+                      );
+                      const greenInsts = svcInsts.filter(
+                        (i) => i.env === "green",
+                      );
+                      const mainInsts = svcInsts.filter(
+                        (i) => i.env === "main",
+                      );
+                      const isBG =
+                        blueInsts.length > 0 || greenInsts.length > 0;
+                      const shadowInsts = mainInsts.filter(
+                        (i) => i.state === "shadow",
+                      );
+                      const primaryInsts = mainInsts.filter(
+                        (i) => i.state !== "shadow",
+                      );
+
+                      return (
+                        <div key={s.id} className="mb-6">
+                          <div className="flex items-center gap-2 mb-3">
+                            <Server className="w-3.5 h-3.5 text-slate-500" />
+                            <span className="text-[12px] font-semibold text-slate-300">
+                              {s.name}
+                            </span>
+                            <span className="text-[10px] font-mono text-slate-600">
+                              {s.fromVer}
+                            </span>
+                            <ArrowRight className="w-3 h-3 text-slate-600" />
+                            <span className="text-[10px] font-mono text-cyan-500">
+                              {s.toVer}
+                            </span>
+                          </div>
+
+                          {isBG ? (
+                            <div className="space-y-2.5">
+                              {blueInsts.length > 0 && (
+                                <div className="flex items-start gap-3">
+                                  <span className="text-[9px] font-bold text-blue-400 w-12 pt-3 shrink-0">
+                                    BLUE
+                                  </span>
+                                  <div className="flex flex-wrap gap-2">
+                                    {blueInsts.map((i) => (
+                                      <InstDot
+                                        key={i.id}
+                                        inst={i}
+                                        svcs={svcs}
+                                      />
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+                              {greenInsts.length > 0 && (
+                                <div className="flex items-start gap-3">
+                                  <span className="text-[9px] font-bold text-emerald-400 w-12 pt-3 shrink-0">
+                                    GREEN
+                                  </span>
+                                  <div className="flex flex-wrap gap-2">
+                                    {greenInsts.map((i) => (
+                                      <InstDot
+                                        key={i.id}
+                                        inst={i}
+                                        svcs={svcs}
+                                      />
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          ) : (
+                            <div>
+                              {primaryInsts.length > 0 && (
+                                <div className="flex flex-wrap gap-2 mb-2">
+                                  {primaryInsts.map((i) => (
+                                    <InstDot key={i.id} inst={i} svcs={svcs} />
+                                  ))}
+                                </div>
+                              )}
+                              {shadowInsts.length > 0 && (
+                                <div className="flex items-start gap-3 mt-1">
+                                  <span className="text-[9px] font-bold text-violet-400 pt-3 shrink-0 w-12">
+                                    SHADOW
+                                  </span>
+                                  <div className="flex flex-wrap gap-2">
+                                    {shadowInsts.map((i) => (
+                                      <InstDot
+                                        key={i.id}
+                                        inst={i}
+                                        svcs={svcs}
+                                      />
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+
+                    {/* Traffic bar */}
+                    {mx && (
+                      <div className="mt-2 bg-slate-900/60 border border-slate-800 rounded p-3">
+                        <div className="text-[10px] text-slate-500 mb-1.5">
+                          Traffic distribution
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <div className="flex-1 h-3 bg-slate-800 rounded overflow-hidden flex">
+                            <div
+                              className="h-full bg-slate-500 transition-all duration-700"
+                              style={{ width: `${mx.trafficOldPct}%` }}
+                            />
+                            <div
+                              className="h-full bg-cyan-500 transition-all duration-700"
+                              style={{ width: `${mx.trafficNewPct}%` }}
+                            />
+                          </div>
+                          <span className="text-[10px] font-mono text-slate-400 shrink-0 w-28">
+                            v1: {mx.trafficOldPct}% / v2: {mx.trafficNewPct}%
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
+
+            {/* ── Metrics ── */}
+            {tab === "metrics" && (
+              <div className="p-5">
+                {!mx ? (
+                  <div className="mt-24 text-center text-slate-600 text-[12px]">
+                    Run a deployment to see live metrics.
+                  </div>
+                ) : (
+                  <div className="max-w-sm">
+                    <MetricBar
+                      label="Error rate"
+                      value={mx.errorRate}
+                      max={100}
+                      format={(v) => `${v.toFixed(1)}%`}
+                      color={
+                        mx.errorRate > 5
+                          ? "bg-red-500"
+                          : mx.errorRate > 1
+                            ? "bg-amber-500"
+                            : "bg-emerald-500"
+                      }
+                    />
+                    <MetricBar
+                      label="P50 response time"
+                      value={mx.p50}
+                      max={500}
+                      format={(v) => `${v} ms`}
+                      color="bg-cyan-500"
+                    />
+                    <MetricBar
+                      label="P99 response time"
+                      value={mx.p99}
+                      max={2000}
+                      format={(v) => `${v} ms`}
+                      color="bg-blue-500"
+                    />
+                    <MetricBar
+                      label="Requests / sec"
+                      value={mx.rps}
+                      max={2000}
+                      format={(v) => `${v}`}
+                      color="bg-violet-500"
+                    />
+                    <MetricBar
+                      label="Rollout progress"
+                      value={mx.rolloutPct}
+                      max={100}
+                      format={(v) => `${v}%`}
+                      color="bg-emerald-500"
+                    />
+
+                    <div className="mt-5 grid grid-cols-2 gap-2 text-[10px]">
+                      <div className="bg-slate-900 border border-slate-700 rounded p-2.5">
+                        <div className="text-slate-500 mb-0.5">
+                          Healthy (v1)
+                        </div>
+                        <div className="text-slate-200 font-mono text-lg leading-none">
+                          {mx.healthyOld}
+                        </div>
+                      </div>
+                      <div className="bg-slate-900 border border-slate-700 rounded p-2.5">
+                        <div className="text-cyan-600 mb-0.5">Healthy (v2)</div>
+                        <div className="text-cyan-300 font-mono text-lg leading-none">
+                          {mx.healthyNew}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* ── Mechanism ── */}
+            {tab === "mechanism" && (
+              <MechanismView strategy={strategy} cfg={cfg} snap={snap} />
+            )}
+          </div>
+
+          {/* Step nav bar */}
+          {isDeployed && (
+            <div className="shrink-0 border-t border-slate-800 px-4 py-2 flex items-center gap-2">
+              <button
+                onClick={() => {
+                  setPlaying(false);
+                  setStepIdx((p) => Math.max(0, p - 1));
+                }}
+                disabled={stepIdx === 0}
+                className="p-1 text-slate-500 hover:text-slate-300 disabled:opacity-30 transition-colors"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+
+              <button
+                onClick={() => setPlaying((p) => !p)}
+                disabled={stepIdx >= snapshots.length - 1 && !playing}
+                className="p-1 text-slate-400 hover:text-slate-200 transition-colors disabled:opacity-30"
+              >
+                {playing ? (
+                  <Pause className="w-4 h-4" />
+                ) : (
+                  <Play className="w-4 h-4" />
+                )}
+              </button>
+
+              <button
+                onClick={() => {
+                  setPlaying(false);
+                  setStepIdx((p) => Math.min(snapshots.length - 1, p + 1));
+                }}
+                disabled={stepIdx >= snapshots.length - 1}
+                className="p-1 text-slate-500 hover:text-slate-300 disabled:opacity-30 transition-colors"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+
+              <div className="flex-1 flex flex-col min-w-0 ml-1">
+                <span className="text-[11px] text-slate-300 truncate">
+                  {snap?.label}
+                </span>
+                {snap?.note && (
+                  <span className="text-[10px] text-amber-400/80 truncate">
+                    {snap.note}
+                  </span>
+                )}
+              </div>
+
+              <span className="text-[10px] text-slate-600 shrink-0 font-mono">
+                {stepIdx + 1} / {snapshots.length}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}