Feat/post deploy fixes

ui/app/App.tsx

@@ -81,6 +81,7 @@ const ShellLayout = () => {
         {activeTab === "missions" && (
           <MissionsTab
             filters={filters}
+            onFilterChange={setFilters}
             onSwitchTab={() => handleTabChange(TAB_ORDER.indexOf("progress"))}
           />
         )}

ui/app/components/AppSidebar.tsx

@@ -22,7 +22,7 @@ import {
   GroupIcon,
   type SvgIconProps,
 } from "@dynatrace/strato-icons";
-import { TOPIC_META_ORDERED, TOPIC_META } from "../types/UserState";
+import { TOPIC_META } from "../types/UserState";
 import type { TopicId } from "../types/UserState";
 import { MISSIONS } from "../data/missions";
 import { useUserStateContext } from "../context/UserStateContext";
@@ -80,7 +80,6 @@ export const AppSidebar = ({ activeTab, onFilterChange, onSwitchToMissions }: Ap
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const [statusOpen, setStatusOpen] = useState(true);
-  const [difficultyOpen, setDifficultyOpen] = useState(true);
 
   const [topicOpen, setTopicOpen] = useState(true);
 
@@ -114,21 +113,6 @@ export const AppSidebar = ({ activeTab, onFilterChange, onSwitchToMissions }: Ap
     { value: "completed", label: "Completed", count: statusCounts.completed },
   ];
 
-  const difficultyCounts = useMemo(() => {
-    const total = MISSIONS.length;
-    const rookie = MISSIONS.filter((m) => m.difficulty === "rookie").length;
-    const operator = MISSIONS.filter((m) => m.difficulty === "operator").length;
-    const elite = MISSIONS.filter((m) => m.difficulty === "elite").length;
-    return { total, rookie, operator, elite };
-  }, []);
-
-  const difficultyOptions: { value: "rookie" | "operator" | "elite" | null; label: string; count: number }[] = [
-    { value: null, label: "All", count: difficultyCounts.total },
-    { value: "rookie", label: "Rookie", count: difficultyCounts.rookie },
-    { value: "operator", label: "Operator", count: difficultyCounts.operator },
-    { value: "elite", label: "Elite", count: difficultyCounts.elite },
-  ];
-
   return (
     <div
       style={{
@@ -236,97 +220,6 @@ export const AppSidebar = ({ activeTab, onFilterChange, onSwitchToMissions }: Ap
             }}
           />
 
-          {/* Difficulty section */}
-          <div style={{ marginBottom: "16px" }}>
-            <div
-              onClick={() => setDifficultyOpen((v) => !v)}
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                cursor: "pointer",
-                fontSize: "12px",
-                fontWeight: 600,
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
-                color: "var(--dt-colors-text-neutral-subdued)",
-                marginBottom: "6px",
-              }}
-            >
-              Difficulty
-              <span
-                style={{
-                  display: "inline-block",
-                  transition: "none",
-                  transform: difficultyOpen ? "rotate(0deg)" : "rotate(-90deg)",
-                  fontSize: "10px",
-                  lineHeight: 1,
-                }}
-              >
-                ▾
-              </span>
-            </div>
-            {difficultyOpen && difficultyOptions.map((opt) => {
-              const isActive = filters.difficulty === opt.value;
-              return (
-                <div
-                  key={opt.value ?? "__all__"}
-                  onClick={() => update("difficulty", opt.value)}
-                  style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    padding: "4px 8px",
-                    fontSize: "12px",
-                    cursor: "pointer",
-                    borderRadius: "4px",
-                    background: isActive
-                      ? "var(--dt-colors-background-container-neutral-default)"
-                      : "transparent",
-                    color: isActive
-                      ? "var(--dt-colors-text-primary-default, #fff)"
-                      : "var(--dt-colors-text-neutral-subdued)",
-                    fontWeight: isActive ? 600 : 400,
-                    transition: "background 0.15s",
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!isActive) {
-                      e.currentTarget.style.background = "var(--dt-colors-background-container-neutral-subdued)";
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!isActive) {
-                      e.currentTarget.style.background = "transparent";
-                    }
-                  }}
-                >
-                  {opt.label}
-                  <span
-                    style={{
-                      background: "rgba(255, 255, 255, 0.08)",
-                      borderRadius: "10px",
-                      padding: "1px 7px",
-                      fontSize: "11px",
-                      fontWeight: 500,
-                      color: "inherit",
-                    }}
-                  >
-                    {opt.count}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Divider */}
-          <div
-            style={{
-              height: "1px",
-              background: "var(--dt-colors-border-neutral-default)",
-              margin: "8px 0 16px 0",
-            }}
-          />
-
           {/* Topic Track section */}
           <div>
             <div

ui/app/components/ChangeDriverModal.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { Heading } from "@dynatrace/strato-components/typography";
+import type { Discipline, ExperienceLevel } from "../types/UserState";
+
+interface DriverPickerOption {
+  discipline: Discipline;
+  experienceLevel: ExperienceLevel;
+  name: string;
+  tier: string;
+  description: string;
+  helmet: string;
+}
+
+const DRIVER_PICKER_OPTIONS: DriverPickerOption[] = [
+  { discipline: "incident-commander", experienceLevel: "new", name: "Arvid Lindblad", tier: "Rookie", description: "Just arrived. Learn the platform and find your feet.", helmet: "/ui/assets/helmets/lindblad.png" },
+  { discipline: "developer", experienceLevel: "learning", name: "Liam Lawson", tier: "Intermediate", description: "You know the basics. Now push harder.", helmet: "/ui/assets/helmets/lawson.png" },
+  { discipline: "platform-engineer", experienceLevel: "experienced", name: "Isack Hadjar", tier: "Advanced", description: "Comfortable under pressure. Build on solid foundations.", helmet: "/ui/assets/helmets/hadjar.png" },
+  { discipline: "sre", experienceLevel: "experienced", name: "Max Verstappen", tier: "Elite", description: "No hand-holding. Full stack, full pressure.", helmet: "/ui/assets/helmets/verstappen.png" },
+];
+
+interface ChangeDriverModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentDiscipline: Discipline;
+  onSelect: (discipline: Discipline, experienceLevel: ExperienceLevel) => void;
+}
+
+export const ChangeDriverModal = ({
+  isOpen,
+  onClose,
+  currentDiscipline,
+  onSelect,
+}: ChangeDriverModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 1000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0, 0, 0, 0.6)",
+      }}
+      onClick={onClose}
+    >
+      <div
+        style={{
+          background: "var(--dt-colors-background-container-neutral-default, #1a1a2e)",
+          border: "1px solid var(--dt-colors-border-neutral-default)",
+          borderRadius: "12px",
+          padding: "24px",
+          maxWidth: "560px",
+          width: "90%",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ textAlign: "center", marginBottom: "8px" }}>
+          <Heading level={4}>Pick your driver.</Heading>
+        </div>
+        <div style={{ textAlign: "center", opacity: 0.6, fontSize: "13px", marginBottom: "20px" }}>
+          This changes your starting discipline and experience level.
+        </div>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "12px",
+          }}
+        >
+          {DRIVER_PICKER_OPTIONS.map((driver) => {
+            const isSelected = currentDiscipline === driver.discipline;
+            return (
+              <div
+                key={driver.discipline}
+                onClick={() => onSelect(driver.discipline, driver.experienceLevel)}
+                style={{
+                  padding: "16px 20px",
+                  borderRadius: "8px",
+                  cursor: "pointer",
+                  border: isSelected
+                    ? "2px solid var(--dt-colors-charts-categorical-default-12, #1496ff)"
+                    : "1px solid var(--dt-colors-border-neutral-default)",
+                  background: isSelected
+                    ? "var(--dt-colors-background-container-neutral-default)"
+                    : "transparent",
+                  transition: "all 0.15s",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+                onMouseEnter={(e) => {
+                  if (!isSelected) e.currentTarget.style.background = "var(--dt-colors-background-container-neutral-subdued)";
+                }}
+                onMouseLeave={(e) => {
+                  if (!isSelected) e.currentTarget.style.background = "transparent";
+                }}
+              >
+                <div>
+                  <div style={{ fontSize: "14px", fontWeight: isSelected ? 600 : 500 }}>
+                    {driver.name}
+                  </div>
+                  <div style={{ fontSize: "11px", opacity: 0.5, marginTop: "2px" }}>
+                    {driver.tier}
+                  </div>
+                  <div style={{ fontSize: "12px", opacity: 0.6, marginTop: "6px" }}>
+                    {driver.description}
+                  </div>
+                </div>
+                <img
+                  src={driver.helmet}
+                  alt=""
+                  style={{
+                    width: "64px",
+                    height: "64px",
+                    objectFit: "contain",
+                    flexShrink: 0,
+                    opacity: isSelected ? 0.9 : 0.5,
+                    pointerEvents: "none",
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};

ui/app/components/MissionCard.tsx

@@ -117,13 +117,15 @@ interface MissionCardProps {
   isUnlocked: boolean;
   isCompleted: boolean;
   prerequisiteNames?: string[];
+  tierLocked?: string | null;
 }
 
 export const MissionCard = ({
   mission,
   isUnlocked,
   isCompleted,
   prerequisiteNames,
+  tierLocked,
 }: MissionCardProps) => {
   const navigate = useNavigate();
   const hasUnmetPrereqs = !isUnlocked && prerequisiteNames && prerequisiteNames.length > 0;
@@ -169,6 +171,26 @@ export const MissionCard = ({
               Replay
             </Button>
           </Flex>
+        ) : tierLocked ? (
+          <Tooltip text={tierLocked}>
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "6px",
+                padding: "4px 12px",
+                fontSize: "12px",
+                fontWeight: 500,
+                borderRadius: "4px",
+                border: "1px solid var(--dt-colors-border-neutral-disabled)",
+                background: "transparent",
+                color: "var(--dt-colors-text-neutral-disabled)",
+                cursor: "not-allowed",
+              }}
+            >
+              {"\uD83D\uDD12"} Locked
+            </span>
+          </Tooltip>
         ) : (
           <Button
             variant="emphasized"