@bbearai/react 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -28,7 +28,17 @@ var BugBearContext = createContext({
   endSession: async () => ({ success: false }),
   addFinding: async () => ({ success: false }),
   refreshSession: async () => {
-  }
+  },
+  // Messaging
+  threads: [],
+  unreadCount: 0,
+  refreshThreads: async () => {
+  },
+  getThreadMessages: async () => [],
+  sendMessage: async () => false,
+  markAsRead: async () => {
+  },
+  createThread: async () => ({ success: false })
 });
 function useBugBear() {
   return useContext(BugBearContext);
@@ -43,6 +53,8 @@ function BugBearProvider({ config, children, enabled = true }) {
   const hasInitialized = useRef(false);
   const [activeSession, setActiveSession] = useState(null);
   const [sessionFindings, setSessionFindings] = useState([]);
+  const [threads, setThreads] = useState([]);
+  const [unreadCount, setUnreadCount] = useState(0);
   const refreshAssignments = useCallback(async () => {
     if (!client) return;
     const newAssignments = await client.getAssignedTests();
@@ -87,6 +99,38 @@ function BugBearProvider({ config, children, enabled = true }) {
     }
     return result;
   }, [client, activeSession]);
+  const refreshThreads = useCallback(async () => {
+    if (!client) return;
+    const newThreads = await client.getThreadsForTester();
+    setThreads(newThreads);
+    const totalUnread = newThreads.reduce((sum, t) => sum + t.unreadCount, 0);
+    setUnreadCount(totalUnread);
+  }, [client]);
+  const getThreadMessages = useCallback(async (threadId) => {
+    if (!client) return [];
+    return client.getThreadMessages(threadId);
+  }, [client]);
+  const sendMessage = useCallback(async (threadId, content) => {
+    if (!client) return false;
+    const success = await client.sendMessage(threadId, content);
+    if (success) {
+      await refreshThreads();
+    }
+    return success;
+  }, [client, refreshThreads]);
+  const markAsRead = useCallback(async (threadId) => {
+    if (!client) return;
+    await client.markThreadAsRead(threadId);
+    await refreshThreads();
+  }, [client, refreshThreads]);
+  const createThread = useCallback(async (options) => {
+    if (!client) return { success: false, error: "Client not initialized" };
+    const result = await client.createThread(options);
+    if (result.success) {
+      await refreshThreads();
+    }
+    return result;
+  }, [client, refreshThreads]);
   const initializeBugBear = useCallback(async (bugBearClient) => {
     setIsLoading(true);
     try {
@@ -99,12 +143,16 @@ function BugBearProvider({ config, children, enabled = true }) {
       setTesterInfo(info);
       setIsTester(!!info);
       if (info && qaEnabled) {
-        const [newAssignments, session] = await Promise.all([
+        const [newAssignments, session, newThreads] = await Promise.all([
           bugBearClient.getAssignedTests(),
-          bugBearClient.getActiveSession()
+          bugBearClient.getActiveSession(),
+          bugBearClient.getThreadsForTester()
         ]);
         setAssignments(newAssignments);
         setActiveSession(session);
+        setThreads(newThreads);
+        const totalUnread = newThreads.reduce((sum, t) => sum + t.unreadCount, 0);
+        setUnreadCount(totalUnread);
         if (session) {
           const findings = await bugBearClient.getSessionFindings(session.id);
           setSessionFindings(findings);
@@ -170,7 +218,15 @@ function BugBearProvider({ config, children, enabled = true }) {
         startSession,
         endSession,
         addFinding,
-        refreshSession
+        refreshSession,
+        // Messaging
+        threads,
+        unreadCount,
+        refreshThreads,
+        getThreadMessages,
+        sendMessage,
+        markAsRead,
+        createThread
       },
       children
     }
@@ -178,7 +234,8 @@ function BugBearProvider({ config, children, enabled = true }) {
 }
 
 // src/BugBearPanel.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useMemo } from "react";
+import { createPortal } from "react-dom";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function BugBearIcon({ size = 24, className = "" }) {
   return /* @__PURE__ */ jsxs(
@@ -249,13 +306,77 @@ function BugBearPanel({
   defaultCollapsed = false,
   draggable = true
 }) {
-  const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate, updateTesterProfile, refreshTesterInfo, activeSession, sessionFindings, startSession, endSession, addFinding } = useBugBear();
+  const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate, updateTesterProfile, refreshTesterInfo, activeSession, sessionFindings, startSession, endSession, addFinding, threads, unreadCount, refreshThreads, getThreadMessages, sendMessage, markAsRead, createThread } = useBugBear();
   const [collapsed, setCollapsed] = useState2(defaultCollapsed);
   const [activeTab, setActiveTab] = useState2("tests");
   const [showSteps, setShowSteps] = useState2(false);
   const [testView, setTestView] = useState2("detail");
   const [selectedTestId, setSelectedTestId] = useState2(null);
+  const [messageView, setMessageView] = useState2("list");
+  const [selectedThread, setSelectedThread] = useState2(null);
+  const [threadMessages, setThreadMessages] = useState2([]);
+  const [replyText, setReplyText] = useState2("");
+  const [sendingReply, setSendingReply] = useState2(false);
+  const [loadingMessages, setLoadingMessages] = useState2(false);
+  const [composeSubject, setComposeSubject] = useState2("");
+  const [composeMessage, setComposeMessage] = useState2("");
+  const [sendingNewMessage, setSendingNewMessage] = useState2(false);
   const displayedAssignment = selectedTestId ? assignments.find((a) => a.id === selectedTestId) || currentAssignment : currentAssignment;
+  const groupedAssignments = useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const assignment of assignments) {
+      const groupId = assignment.testCase.group?.id || "ungrouped";
+      const group = assignment.testCase.group || null;
+      if (!groups.has(groupId)) {
+        groups.set(groupId, {
+          group,
+          assignments: [],
+          stats: { total: 0, passed: 0, failed: 0, pending: 0, skipped: 0 }
+        });
+      }
+      const folder = groups.get(groupId);
+      folder.assignments.push(assignment);
+      folder.stats.total++;
+      if (assignment.status === "passed") folder.stats.passed++;
+      else if (assignment.status === "failed") folder.stats.failed++;
+      else if (assignment.status === "skipped") folder.stats.skipped++;
+      else folder.stats.pending++;
+    }
+    const sortedGroups = Array.from(groups.values()).sort((a, b) => {
+      if (!a.group && !b.group) return 0;
+      if (!a.group) return 1;
+      if (!b.group) return -1;
+      return a.group.sortOrder - b.group.sortOrder;
+    });
+    return sortedGroups;
+  }, [assignments]);
+  const toggleFolderCollapse = useCallback2((groupId) => {
+    setCollapsedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  }, []);
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case "passed":
+        return { icon: "\u2705", label: "Passed", className: "bg-green-900/30 text-green-400" };
+      case "failed":
+        return { icon: "\u274C", label: "Failed", className: "bg-red-900/30 text-red-400" };
+      case "skipped":
+        return { icon: "\u23ED\uFE0F", label: "Skipped", className: "bg-yellow-900/30 text-yellow-400" };
+      case "in_progress":
+        return { icon: "\u{1F504}", label: "In Progress", className: "bg-blue-900/30 text-blue-400" };
+      case "blocked":
+        return { icon: "\u{1F6AB}", label: "Blocked", className: "bg-orange-900/30 text-orange-400" };
+      default:
+        return { icon: "\u23F3", label: "Pending", className: "bg-zinc-700 text-zinc-400" };
+    }
+  };
   const [panelPosition, setPanelPosition] = useState2(null);
   const [isDragging, setIsDragging] = useState2(false);
   const dragStartRef = useRef2(null);
@@ -277,6 +398,10 @@ function BugBearPanel({
     expectedResultUnclear: false
   });
   const [criteriaResults, setCriteriaResults] = useState2({});
+  const [showSkipModal, setShowSkipModal] = useState2(false);
+  const [selectedSkipReason, setSelectedSkipReason] = useState2(null);
+  const [skipNotes, setSkipNotes] = useState2("");
+  const [skipping, setSkipping] = useState2(false);
   const [profileEditing, setProfileEditing] = useState2(false);
   const [profileName, setProfileName] = useState2("");
   const [profileAdditionalEmails, setProfileAdditionalEmails] = useState2([]);
@@ -285,6 +410,7 @@ function BugBearPanel({
   const [savingProfile, setSavingProfile] = useState2(false);
   const [profileSaved, setProfileSaved] = useState2(false);
   const [showProfileOverlay, setShowProfileOverlay] = useState2(false);
+  const [collapsedFolders, setCollapsedFolders] = useState2(/* @__PURE__ */ new Set());
   const [startingSession, setStartingSession] = useState2(false);
   const [sessionFocusArea, setSessionFocusArea] = useState2("");
   const [sessionPlatform, setSessionPlatform] = useState2("web");
@@ -488,6 +614,35 @@ function BugBearPanel({
       expectedResultUnclear: false
     });
   };
+  const handleOpenSkipModal = () => {
+    setShowSkipModal(true);
+    setSelectedSkipReason(null);
+    setSkipNotes("");
+  };
+  const handleSkip = async () => {
+    if (!client || !displayedAssignment || !selectedSkipReason) return;
+    setSkipping(true);
+    const result = await client.skipAssignment(
+      displayedAssignment.id,
+      selectedSkipReason,
+      skipNotes.trim() || void 0
+    );
+    if (result.success) {
+      await refreshAssignments();
+      setShowSkipModal(false);
+      setSelectedSkipReason(null);
+      setSkipNotes("");
+      setSelectedTestId(null);
+      setTestView("detail");
+    }
+    setSkipping(false);
+  };
+  const skipReasonOptions = [
+    { value: "blocked", label: "Blocked", description: "Environment issue or external blocker" },
+    { value: "not_ready", label: "Not Ready", description: "Feature not yet implemented" },
+    { value: "dependency", label: "Dependency", description: "Waiting on another test or task" },
+    { value: "other", label: "Other", description: "Other reason (please specify)" }
+  ];
   const handleSubmitFeedback = async (skipFeedback = false) => {
     if (!client || !displayedAssignment) return;
     setSubmitting(true);
@@ -683,965 +838,1396 @@ function BugBearPanel({
     }
     return `${m}:${s.toString().padStart(2, "0")}`;
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: panelRef,
-      className: "fixed font-sans",
-      style: {
-        zIndex: 2147483647,
-        // Max z-index to stay above all modals
-        left: panelPosition.x,
-        top: panelPosition.y,
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        cursor: isDragging ? "grabbing" : void 0,
-        userSelect: isDragging ? "none" : void 0
-      },
-      onMouseDown: handleMouseDown,
-      children: [
-        collapsed && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setCollapsed(false),
-            "data-drag-handle": true,
-            onDoubleClick: handleDoubleClick,
-            className: "flex items-center gap-2 px-3 py-2 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 transition-colors",
-            style: { cursor: draggable ? "grab" : "pointer" },
-            children: [
-              /* @__PURE__ */ jsx2(BugBearIcon, { size: 24 }),
-              /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "BugBear" }),
-              pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: "bg-white text-purple-600 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
-            ]
-          }
-        ),
-        !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
+  const formatRelativeTime = (dateString) => {
+    const date = new Date(dateString);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    const diffHours = Math.floor(diffMs / 36e5);
+    const diffDays = Math.floor(diffMs / 864e5);
+    if (diffMins < 1) return "Just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays === 1) return "Yesterday";
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  };
+  const formatMessageTime = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+  const getThreadTypeIcon = (type) => {
+    switch (type) {
+      case "announcement":
+        return "\u{1F4E2}";
+      case "direct":
+        return "\u{1F4AC}";
+      case "report":
+        return "\u{1F41B}";
+      case "general_note":
+        return "\u{1F4DD}";
+      default:
+        return "\u{1F4AC}";
+    }
+  };
+  const handleOpenThread = async (thread) => {
+    setSelectedThread(thread);
+    setMessageView("thread");
+    setLoadingMessages(true);
+    const messages = await getThreadMessages(thread.id);
+    setThreadMessages(messages);
+    setLoadingMessages(false);
+    if (thread.unreadCount > 0) {
+      await markAsRead(thread.id);
+    }
+  };
+  const handleSendReply = async () => {
+    if (!selectedThread || !replyText.trim()) return;
+    setSendingReply(true);
+    const success = await sendMessage(selectedThread.id, replyText.trim());
+    if (success) {
+      setReplyText("");
+      const messages = await getThreadMessages(selectedThread.id);
+      setThreadMessages(messages);
+    }
+    setSendingReply(false);
+  };
+  const handleBackToThreadList = () => {
+    setMessageView("list");
+    setSelectedThread(null);
+    setThreadMessages([]);
+    setReplyText("");
+    setComposeSubject("");
+    setComposeMessage("");
+  };
+  const handleStartNewMessage = () => {
+    setMessageView("compose");
+    setComposeSubject("");
+    setComposeMessage("");
+  };
+  const handleSendNewMessage = async () => {
+    if (!composeSubject.trim() || !composeMessage.trim()) return;
+    setSendingNewMessage(true);
+    const result = await createThread({
+      subject: composeSubject.trim(),
+      message: composeMessage.trim()
+    });
+    if (result.success) {
+      setComposeSubject("");
+      setComposeMessage("");
+      setMessageView("list");
+    }
+    setSendingNewMessage(false);
+  };
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: "fixed font-sans",
+        style: {
+          zIndex: 2147483647,
+          // Max z-index to stay above all modals
+          left: panelPosition.x,
+          top: panelPosition.y,
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          cursor: isDragging ? "grabbing" : void 0,
+          userSelect: isDragging ? "none" : void 0
+        },
+        onMouseDown: handleMouseDown,
+        children: [
+          collapsed && /* @__PURE__ */ jsxs(
+            "button",
             {
+              onClick: () => setCollapsed(false),
               "data-drag-handle": true,
               onDoubleClick: handleDoubleClick,
-              className: "bg-purple-600 text-white px-4 py-3 flex items-center justify-between",
-              style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default" },
+              className: "flex items-center gap-2 px-3 py-2 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition-colors",
+              style: { cursor: draggable ? "grab" : "pointer" },
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx2(BugBearIcon, { size: 28 }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [
-                      "BugBear",
-                      draggable && /* @__PURE__ */ jsx2("span", { className: "text-purple-300 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
-                    ] }),
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        onClick: handleOpenProfile,
-                        className: "text-purple-200 text-xs flex items-center gap-1 hover:text-white transition-colors",
-                        children: [
-                          testerInfo?.name,
-                          /* @__PURE__ */ jsx2("span", { className: "text-[10px]", children: "\u270E" })
-                        ]
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    onClick: () => setCollapsed(true),
-                    className: "p-1 hover:bg-purple-500 rounded",
-                    children: /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
-                  }
-                )
+                /* @__PURE__ */ jsx2(BugBearIcon, { size: 24 }),
+                /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "BugBear" }),
+                pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: "bg-white text-blue-400 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 p-2 bg-gray-50 border-b border-gray-200", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => setActiveTab("tests"),
-                className: `flex-1 py-2 px-3 rounded-lg text-sm font-semibold transition-all flex items-center justify-center gap-1.5 ${activeTab === "tests" ? "bg-purple-600 text-white shadow-sm" : "bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,
-                children: [
-                  /* @__PURE__ */ jsx2("span", { children: "\u{1F4CB}" }),
-                  /* @__PURE__ */ jsx2("span", { children: "Run Tests" }),
-                  pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: `ml-1 px-1.5 py-0.5 rounded-full text-xs ${activeTab === "tests" ? "bg-purple-500 text-white" : "bg-purple-100 text-purple-600"}`, children: pendingCount })
-                ]
-              }
-            ),
+          !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", children: [
             /* @__PURE__ */ jsxs(
-              "button",
+              "div",
               {
-                onClick: () => setActiveTab("session"),
-                className: `flex-1 py-2 px-3 rounded-lg text-sm font-semibold transition-all flex items-center justify-center gap-1.5 relative ${activeTab === "session" ? "bg-amber-500 text-white shadow-sm" : "bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,
+                "data-drag-handle": true,
+                onDoubleClick: handleDoubleClick,
+                className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800",
+                style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default" },
                 children: [
-                  /* @__PURE__ */ jsx2("span", { children: "\u{1F50D}" }),
-                  /* @__PURE__ */ jsx2("span", { children: "Explore" }),
-                  activeSession && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white animate-pulse" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx2("div", { className: "flex justify-center py-1.5 border-b border-gray-200 bg-white", children: /* @__PURE__ */ jsx2(
-            "button",
-            {
-              onClick: () => setActiveTab("report"),
-              className: `px-4 py-1 text-xs font-medium transition-colors rounded-full ${activeTab === "report" ? "bg-red-50 text-red-600 border border-red-200" : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"}`,
-              children: "\u{1F41B} Report Bug / Feedback"
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
-            activeTab === "tests" && /* @__PURE__ */ jsx2("div", { children: assignments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-600 mt-2 font-medium", children: "All caught up!" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-sm", children: "No tests assigned" })
-            ] }) : testView === "list" ? (
-              /* List View - Show all tests */
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-gray-500", children: [
-                  assignments.length,
-                  " test",
-                  assignments.length !== 1 ? "s" : "",
-                  " assigned"
-                ] }) }),
-                assignments.map((assignment) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => {
-                      setSelectedTestId(assignment.id);
-                      setTestView("detail");
-                      setShowSteps(false);
-                    },
-                    className: `w-full text-left p-3 rounded-lg border transition-colors ${assignment.id === currentAssignment?.id ? "bg-purple-50 border-purple-200" : "bg-gray-50 border-gray-200 hover:bg-gray-100"}`,
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-1", children: [
-                        /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-gray-500", children: assignment.testCase.testKey }),
-                        /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${assignment.testCase.priority === "P0" ? "bg-red-100 text-red-700" : assignment.testCase.priority === "P1" ? "bg-orange-100 text-orange-700" : "bg-gray-100 text-gray-600"}`, children: assignment.testCase.priority })
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx2(BugBearIcon, { size: 28 }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [
+                        "BugBear",
+                        draggable && /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
                       ] }),
-                      /* @__PURE__ */ jsx2("h4", { className: "font-medium text-gray-900 text-sm line-clamp-2", children: assignment.testCase.title }),
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-400", children: [
-                        assignment.testCase.track && /* @__PURE__ */ jsx2(
-                          "span",
-                          {
-                            className: "px-1 py-0.5 rounded text-white",
-                            style: { backgroundColor: assignment.testCase.track.color },
-                            children: templateInfo[assignment.testCase.track.testTemplate || "steps"].icon
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs("span", { children: [
-                          assignment.testCase.steps.length,
-                          " ",
-                          assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"
-                        ] }),
-                        assignment.id === currentAssignment?.id && /* @__PURE__ */ jsx2("span", { className: "text-purple-600 font-medium", children: "\u2022 Current" })
-                      ] })
-                    ]
-                  },
-                  assignment.id
-                ))
-              ] })
-            ) : showFeedbackPrompt && displayedAssignment ? (
-              /* Feedback prompt after completing a test */
-              /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-                /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "text-3xl", children: pendingFeedbackStatus === "passed" ? "\u2713" : "\u2717" }),
-                  /* @__PURE__ */ jsx2("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-600" : "text-red-600"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 border border-purple-100 rounded-lg p-3 mb-4", children: [
-                  /* @__PURE__ */ jsx2("p", { className: "text-purple-800 text-sm font-medium mb-1", children: "Help us improve this test" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-purple-600 text-xs", children: "Your feedback shapes better tests for everyone." })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-2", children: "How was this test?" }),
-                  /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1 justify-center", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setFeedbackRating(star),
-                      className: `text-2xl transition-colors ${star <= feedbackRating ? "text-yellow-400" : "text-gray-300"} hover:text-yellow-400`,
-                      children: "\u2605"
-                    },
-                    star
-                  )) }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-center text-xs text-gray-500 mt-1", children: feedbackRating === 1 ? "Needs work" : feedbackRating === 2 ? "Could be better" : feedbackRating === 3 ? "Okay" : feedbackRating === 4 ? "Good" : "Great!" })
-                ] }),
-                feedbackRating < 4 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-2", children: "What could be improved?" }),
-                  /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: [
-                    { key: "stepsUnclear", label: "Steps unclear" },
-                    { key: "expectedResultUnclear", label: "Expected result unclear" },
-                    { key: "needsMoreDetail", label: "Needs more detail" },
-                    { key: "isOutdated", label: "Seems outdated" }
-                  ].map(({ key, label }) => /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setFeedbackFlags((prev) => ({ ...prev, [key]: !prev[key] })),
-                      className: `px-2 py-1.5 rounded text-xs font-medium border transition-colors ${feedbackFlags[key] ? "bg-purple-100 border-purple-300 text-purple-700" : "bg-white border-gray-200 text-gray-600 hover:border-purple-200"}`,
-                      children: label
-                    },
-                    key
-                  )) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Suggestions? (optional)" }),
-                  /* @__PURE__ */ jsx2(
-                    "textarea",
-                    {
-                      value: feedbackNote,
-                      onChange: (e) => setFeedbackNote(e.target.value),
-                      placeholder: "How could this test be improved?",
-                      className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent",
-                      rows: 2
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      onClick: handleSkipFeedback,
-                      disabled: submitting,
-                      className: "flex-1 px-3 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors disabled:opacity-50",
-                      children: "Skip"
-                    }
-                  ),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: handleOpenProfile,
+                          className: "text-zinc-400 text-xs flex items-center gap-1 hover:text-white transition-colors",
+                          children: [
+                            testerInfo?.name,
+                            /* @__PURE__ */ jsx2("span", { className: "text-[10px]", children: "\u270E" })
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
                   /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: () => handleSubmitFeedback(false),
-                      disabled: submitting,
-                      className: "flex-1 px-3 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50",
-                      children: submitting ? "Submitting..." : "Submit Feedback"
+                      onClick: () => setCollapsed(true),
+                      className: "p-1 hover:bg-zinc-800 rounded",
+                      children: /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                     }
                   )
-                ] })
-              ] })
-            ) : justPassed ? (
-              /* Success state after passing */
-              /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-                /* @__PURE__ */ jsx2("span", { className: "text-5xl", children: "\u2713" }),
-                /* @__PURE__ */ jsx2("p", { className: "text-green-600 mt-3 font-semibold text-lg", children: "Passed!" }),
-                /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-sm mt-1", children: "Loading next test..." })
-              ] })
-            ) : displayedAssignment ? (
-              /* Detail View - Show single test */
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => {
-                      setTestView("list");
-                      setSelectedTestId(null);
-                    },
-                    className: "flex items-center gap-1 text-xs text-purple-600 font-medium hover:text-purple-700 mb-3",
-                    children: [
-                      "\u2190 All Tests (",
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex border-b border-zinc-800 bg-zinc-900", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setActiveTab("tests"),
+                  className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 border-b-2 ${activeTab === "tests" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
+                  children: [
+                    "Tests ",
+                    pendingCount > 0 && `(${pendingCount})`
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setActiveTab("messages"),
+                  className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 relative border-b-2 ${activeTab === "messages" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
+                  children: [
+                    "Messages",
+                    unreadCount > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute top-1.5 ml-16 min-w-[18px] h-[18px] px-1 bg-blue-500 rounded-full text-[10px] text-white font-bold flex items-center justify-center", children: unreadCount })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setActiveTab("session"),
+                  className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 relative border-b-2 ${activeTab === "session" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
+                  children: [
+                    "Explore",
+                    activeSession && /* @__PURE__ */ jsx2("span", { className: "absolute top-2 ml-14 w-2 h-2 bg-green-500 rounded-full animate-pulse" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: () => setActiveTab("report"),
+                  className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 border-b-2 ${activeTab === "report" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
+                  children: "Report"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
+              activeTab === "tests" && /* @__PURE__ */ jsx2("div", { children: assignments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+                /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
+                /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "All caught up!" }),
+                /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "No tests assigned" })
+              ] }) : testView === "list" ? (
+                /* List View - Show tests grouped by folder */
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 px-1", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
                       assignments.length,
-                      ")"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
-                    /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-gray-500", children: displayedAssignment.testCase.testKey }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                      displayedAssignment.testCase.track && /* @__PURE__ */ jsx2(
-                        "span",
+                      " test",
+                      assignments.length !== 1 ? "s" : "",
+                      " assigned"
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "text-green-400", children: [
+                        "\u2705 ",
+                        assignments.filter((a) => a.status === "passed").length
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "text-red-400", children: [
+                        "\u274C ",
+                        assignments.filter((a) => a.status === "failed").length
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
+                        "\u23F3 ",
+                        assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length
+                      ] })
+                    ] })
+                  ] }),
+                  groupedAssignments.map((folder) => {
+                    const groupId = folder.group?.id || "ungrouped";
+                    const isCollapsed = collapsedFolders.has(groupId);
+                    const completedCount = folder.stats.passed + folder.stats.failed + folder.stats.skipped;
+                    return /* @__PURE__ */ jsxs("div", { className: "border border-zinc-700 rounded-lg overflow-hidden", children: [
+                      /* @__PURE__ */ jsxs(
+                        "button",
                         {
-                          className: "text-xs px-1.5 py-0.5 rounded text-white",
-                          style: { backgroundColor: displayedAssignment.testCase.track.color },
-                          children: templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon
+                          onClick: () => toggleFolderCollapse(groupId),
+                          className: "w-full flex items-center justify-between p-2.5 bg-zinc-800 hover:bg-zinc-700 transition-colors",
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ jsx2("span", { className: "text-sm", children: isCollapsed ? "\u{1F4C1}" : "\u{1F4C2}" }),
+                              /* @__PURE__ */ jsx2("span", { className: "font-medium text-sm text-zinc-100", children: folder.group?.name || "Other Tests" }),
+                              /* @__PURE__ */ jsxs("span", { className: "text-xs text-zinc-500", children: [
+                                "(",
+                                completedCount,
+                                "/",
+                                folder.stats.total,
+                                ")"
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ jsx2("div", { className: "w-16 h-1.5 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
+                                "div",
+                                {
+                                  className: "h-full bg-green-500 transition-all",
+                                  style: { width: `${completedCount / folder.stats.total * 100}%` }
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", children: isCollapsed ? "\u25B6" : "\u25BC" })
+                            ] })
+                          ]
                         }
                       ),
-                      /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${displayedAssignment.testCase.priority === "P0" ? "bg-red-100 text-red-700" : displayedAssignment.testCase.priority === "P1" ? "bg-orange-100 text-orange-700" : "bg-gray-100 text-gray-600"}`, children: displayedAssignment.testCase.priority })
-                    ] })
+                      !isCollapsed && /* @__PURE__ */ jsx2("div", { className: "divide-y divide-zinc-800", children: folder.assignments.map((assignment) => {
+                        const statusBadge = getStatusBadge(assignment.status);
+                        return /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: () => {
+                              setSelectedTestId(assignment.id);
+                              setTestView("detail");
+                              setShowSteps(false);
+                            },
+                            className: `w-full text-left p-3 transition-colors ${assignment.id === currentAssignment?.id ? "bg-blue-950/30" : "bg-zinc-900 hover:bg-zinc-800"}`,
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-1", children: [
+                                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                                  /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: assignment.testCase.testKey }),
+                                  assignment.isVerification && /* @__PURE__ */ jsx2("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-900/30 text-green-400 font-medium", children: "\u{1F527} Verify" })
+                                ] }),
+                                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                                  /* @__PURE__ */ jsxs("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${statusBadge.className}`, children: [
+                                    statusBadge.icon,
+                                    " ",
+                                    statusBadge.label
+                                  ] }),
+                                  /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${assignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : assignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: assignment.testCase.priority })
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm line-clamp-2", children: assignment.testCase.title }),
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-zinc-500", children: [
+                                assignment.testCase.track && /* @__PURE__ */ jsx2(
+                                  "span",
+                                  {
+                                    className: "px-1 py-0.5 rounded text-white",
+                                    style: { backgroundColor: assignment.testCase.track.color },
+                                    children: templateInfo[assignment.testCase.track.testTemplate || "steps"].icon
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs("span", { children: [
+                                  assignment.testCase.steps.length,
+                                  " ",
+                                  assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"
+                                ] }),
+                                assignment.id === currentAssignment?.id && /* @__PURE__ */ jsx2("span", { className: "text-blue-400 font-medium", children: "\u2022 Current" })
+                              ] })
+                            ]
+                          },
+                          assignment.id
+                        );
+                      }) })
+                    ] }, groupId);
+                  })
+                ] })
+              ) : showFeedbackPrompt && displayedAssignment ? (
+                /* Feedback prompt after completing a test */
+                /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "text-3xl", children: pendingFeedbackStatus === "passed" ? "\u2713" : "\u2717" }),
+                    /* @__PURE__ */ jsx2("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-400" : "text-red-400"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
                   ] }),
-                  /* @__PURE__ */ jsx2("h4", { className: "font-medium text-gray-900 text-sm mb-1", children: displayedAssignment.testCase.title }),
-                  displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2 text-xs text-green-600 bg-green-50 px-2 py-1 rounded", children: [
-                    /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
-                      /* @__PURE__ */ jsx2("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
-                      /* @__PURE__ */ jsx2("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
-                    ] }),
-                    /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Testing" }),
-                    /* @__PURE__ */ jsx2("span", { className: "font-mono", children: formatElapsedTime(assignmentElapsedTime) })
+                  /* @__PURE__ */ jsxs("div", { className: "bg-blue-950/30 border border-blue-900 rounded-lg p-3 mb-4", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "text-blue-300 text-sm font-medium mb-1", children: "Help us improve this test" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-blue-400 text-xs", children: "Your feedback shapes better tests for everyone." })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "How was this test?" }),
+                    /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1 justify-center", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setFeedbackRating(star),
+                        className: `text-2xl transition-colors ${star <= feedbackRating ? "text-yellow-400" : "text-zinc-600"} hover:text-yellow-400`,
+                        children: "\u2605"
+                      },
+                      star
+                    )) }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-center text-xs text-zinc-500 mt-1", children: feedbackRating === 1 ? "Needs work" : feedbackRating === 2 ? "Could be better" : feedbackRating === 3 ? "Okay" : feedbackRating === 4 ? "Good" : "Great!" })
+                  ] }),
+                  feedbackRating < 4 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "What could be improved?" }),
+                    /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: [
+                      { key: "stepsUnclear", label: "Steps unclear" },
+                      { key: "expectedResultUnclear", label: "Expected result unclear" },
+                      { key: "needsMoreDetail", label: "Needs more detail" },
+                      { key: "isOutdated", label: "Seems outdated" }
+                    ].map(({ key, label }) => /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setFeedbackFlags((prev) => ({ ...prev, [key]: !prev[key] })),
+                        className: `px-2 py-1.5 rounded text-xs font-medium border transition-colors ${feedbackFlags[key] ? "bg-blue-900/50 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:border-blue-800"}`,
+                        children: label
+                      },
+                      key
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Suggestions? (optional)" }),
+                    /* @__PURE__ */ jsx2(
+                      "textarea",
+                      {
+                        value: feedbackNote,
+                        onChange: (e) => setFeedbackNote(e.target.value),
+                        placeholder: "How could this test be improved?",
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder:text-zinc-500",
+                        rows: 2
+                      }
+                    )
                   ] }),
-                  displayedAssignment.testCase.description && /* @__PURE__ */ jsx2("p", { className: "text-gray-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
-                  displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleSkipFeedback,
+                        disabled: submitting,
+                        className: "flex-1 px-3 py-2 text-sm font-medium text-zinc-400 bg-zinc-700 rounded-lg hover:bg-zinc-700 transition-colors disabled:opacity-50",
+                        children: "Skip"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => handleSubmitFeedback(false),
+                        disabled: submitting,
+                        className: "flex-1 px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50",
+                        children: submitting ? "Submitting..." : "Submit Feedback"
+                      }
+                    )
+                  ] })
+                ] })
+              ) : justPassed ? (
+                /* Success state after passing */
+                /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "text-5xl", children: "\u2713" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-green-400 mt-3 font-semibold text-lg", children: "Passed!" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm mt-1", children: "Loading next test..." })
+                ] })
+              ) : displayedAssignment ? (
+                /* Detail View - Show single test */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs(
                     "button",
                     {
-                      onClick: () => onNavigate(displayedAssignment.testCase.targetRoute),
-                      className: "w-full mb-2 py-1.5 px-3 bg-blue-50 text-blue-700 border border-blue-200 rounded-lg text-xs font-medium hover:bg-blue-100 transition-colors flex items-center justify-center gap-1",
+                      onClick: () => {
+                        setTestView("list");
+                        setSelectedTestId(null);
+                      },
+                      className: "flex items-center gap-1 text-xs text-blue-400 font-medium hover:text-blue-300 mb-2",
                       children: [
-                        /* @__PURE__ */ jsx2("span", { children: "Go to test location" }),
-                        /* @__PURE__ */ jsx2("span", { children: "\u2192" })
+                        "\u2190 All Tests (",
+                        assignments.length,
+                        ")"
                       ]
                     }
                   ),
                   (() => {
-                    const template = displayedAssignment.testCase.track?.testTemplate || "steps";
-                    const steps = displayedAssignment.testCase.steps;
-                    const info = templateInfo[template];
-                    const rubricMode = displayedAssignment.testCase.track?.rubricMode || "pass_fail";
-                    return /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsxs(
+                    const currentGroup = displayedAssignment.testCase.group;
+                    const groupAssignments = currentGroup ? assignments.filter((a) => a.testCase.group?.id === currentGroup.id) : assignments;
+                    const completed = groupAssignments.filter(
+                      (a) => a.status === "passed" || a.status === "failed" || a.status === "skipped"
+                    ).length;
+                    const total = groupAssignments.length;
+                    const progressPercent = total > 0 ? completed / total * 100 : 0;
+                    return /* @__PURE__ */ jsxs("div", { className: "mb-3 p-2 bg-blue-950/30 rounded-lg", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+                        /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium text-blue-300", children: currentGroup ? `\u{1F4C1} ${currentGroup.name}` : "\u{1F4CB} All Tests" }),
+                        /* @__PURE__ */ jsxs("span", { className: "text-xs text-blue-400", children: [
+                          completed,
+                          "/",
+                          total,
+                          " complete"
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx2("div", { className: "w-full h-2 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
                         "div",
                         {
-                          className: "flex items-center gap-2 text-xs px-2 py-1 rounded mb-2",
-                          style: {
-                            backgroundColor: displayedAssignment.testCase.track ? `${displayedAssignment.testCase.track.color}15` : "#f3f4f6"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx2("span", { children: info.icon }),
-                            /* @__PURE__ */ jsx2("span", { className: "font-medium", children: info.name }),
-                            /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
-                              "\u2022 ",
-                              info.action
-                            ] })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => setShowSteps(!showSteps),
-                          className: "text-purple-600 text-xs font-medium hover:text-purple-700 flex items-center gap-1",
-                          children: [
-                            showSteps ? "\u25BC" : "\u25B6",
-                            " ",
-                            template === "freeform" ? "Instructions" : `${steps.length} ${template === "checklist" ? "items" : template === "rubric" ? "criteria" : "steps"}`
-                          ]
+                          className: "h-full bg-blue-500 transition-all duration-300",
+                          style: { width: `${progressPercent}%` }
                         }
-                      ),
-                      showSteps && template === "steps" && /* @__PURE__ */ jsx2("div", { className: "mt-2 space-y-2", children: steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
-                        /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center flex-shrink-0 font-medium", children: step.stepNumber }),
-                        /* @__PURE__ */ jsxs("div", { children: [
-                          /* @__PURE__ */ jsx2("p", { className: "text-gray-700", children: step.action }),
-                          step.expectedResult && /* @__PURE__ */ jsxs("p", { className: "text-gray-400 mt-0.5", children: [
-                            "\u2192 ",
-                            step.expectedResult
-                          ] })
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex justify-between mt-1 text-[10px] text-blue-400", children: [
+                        /* @__PURE__ */ jsxs("span", { children: [
+                          "\u2705 ",
+                          groupAssignments.filter((a) => a.status === "passed").length,
+                          " passed"
+                        ] }),
+                        /* @__PURE__ */ jsxs("span", { children: [
+                          "\u274C ",
+                          groupAssignments.filter((a) => a.status === "failed").length,
+                          " failed"
+                        ] }),
+                        /* @__PURE__ */ jsxs("span", { children: [
+                          "\u23ED\uFE0F ",
+                          groupAssignments.filter((a) => a.status === "skipped").length,
+                          " skipped"
                         ] })
-                      ] }, idx)) }),
-                      showSteps && template === "checklist" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
-                        steps.map((step, idx) => /* @__PURE__ */ jsxs(
+                      ] })
+                    ] });
+                  })(),
+                  /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: displayedAssignment.testCase.testKey }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                        displayedAssignment.testCase.track && /* @__PURE__ */ jsx2(
+                          "span",
+                          {
+                            className: "text-xs px-1.5 py-0.5 rounded text-white",
+                            style: { backgroundColor: displayedAssignment.testCase.track.color },
+                            children: templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${displayedAssignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : displayedAssignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: displayedAssignment.testCase.priority })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm mb-1", children: displayedAssignment.testCase.title }),
+                    displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2 text-xs text-green-400 bg-green-900/20 px-2 py-1 rounded", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+                        /* @__PURE__ */ jsx2("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                        /* @__PURE__ */ jsx2("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Testing" }),
+                      /* @__PURE__ */ jsx2("span", { className: "font-mono", children: formatElapsedTime(assignmentElapsedTime) })
+                    ] }),
+                    displayedAssignment.testCase.description && /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
+                    displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => onNavigate(displayedAssignment.testCase.targetRoute),
+                        className: "w-full mb-2 py-1.5 px-3 bg-blue-900/20 text-blue-300 border border-blue-800 rounded-lg text-xs font-medium hover:bg-blue-900/30 transition-colors flex items-center justify-center gap-1",
+                        children: [
+                          /* @__PURE__ */ jsx2("span", { children: "Go to test location" }),
+                          /* @__PURE__ */ jsx2("span", { children: "\u2192" })
+                        ]
+                      }
+                    ),
+                    (() => {
+                      const template = displayedAssignment.testCase.track?.testTemplate || "steps";
+                      const steps = displayedAssignment.testCase.steps;
+                      const info = templateInfo[template];
+                      const rubricMode = displayedAssignment.testCase.track?.rubricMode || "pass_fail";
+                      return /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: "flex items-center gap-2 text-xs px-2 py-1 rounded mb-2",
+                            style: {
+                              backgroundColor: displayedAssignment.testCase.track ? `${displayedAssignment.testCase.track.color}15` : "#f3f4f6"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx2("span", { children: info.icon }),
+                              /* @__PURE__ */ jsx2("span", { className: "font-medium", children: info.name }),
+                              /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
+                                "\u2022 ",
+                                info.action
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
                           "button",
                           {
-                            onClick: () => setCriteriaResults((prev) => {
-                              const newResults = { ...prev };
-                              if (prev[idx] === true) {
-                                delete newResults[idx];
-                              } else {
-                                newResults[idx] = true;
-                              }
-                              return newResults;
-                            }),
-                            className: `w-full flex items-center gap-2 text-xs p-2 rounded border transition-colors text-left ${criteriaResults[idx] === true ? "bg-green-50 border-green-300" : "bg-white border-gray-200 hover:bg-gray-50"}`,
+                            onClick: () => setShowSteps(!showSteps),
+                            className: "text-blue-400 text-xs font-medium hover:text-blue-300 flex items-center gap-1",
                             children: [
-                              /* @__PURE__ */ jsx2("span", { className: `w-5 h-5 rounded border-2 flex items-center justify-center ${criteriaResults[idx] === true ? "bg-green-500 border-green-500 text-white" : "border-cyan-400 text-cyan-600"}`, children: criteriaResults[idx] === true ? "\u2713" : "" }),
-                              /* @__PURE__ */ jsx2("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-700" : "text-gray-700"}`, children: step.action })
+                              showSteps ? "\u25BC" : "\u25B6",
+                              " ",
+                              template === "freeform" ? "Instructions" : `${steps.length} ${template === "checklist" ? "items" : template === "rubric" ? "criteria" : "steps"}`
                             ]
-                          },
-                          idx
-                        )),
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
-                          /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400", children: "Tap to check off each item." }),
-                          Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
+                          }
+                        ),
+                        showSteps && template === "steps" && /* @__PURE__ */ jsx2("div", { className: "mt-2 space-y-2", children: steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
+                          /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded-full bg-blue-900/50 text-blue-300 flex items-center justify-center flex-shrink-0 font-medium", children: step.stepNumber }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx2("p", { className: "text-zinc-300", children: step.action }),
+                            step.expectedResult && /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 mt-0.5", children: [
+                              "\u2192 ",
+                              step.expectedResult
+                            ] })
+                          ] })
+                        ] }, idx)) }),
+                        showSteps && template === "checklist" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+                          steps.map((step, idx) => /* @__PURE__ */ jsxs(
                             "button",
                             {
-                              onClick: () => setCriteriaResults({}),
-                              className: "text-xs text-gray-400 hover:text-red-500 transition-colors",
-                              children: "\u21BA Reset"
-                            }
-                          )
-                        ] })
-                      ] }),
-                      showSteps && template === "rubric" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
-                        steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "bg-white p-2 rounded border border-gray-200", children: [
-                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs mb-1", children: [
-                            /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded bg-purple-100 text-purple-700 flex items-center justify-center font-medium", children: idx + 1 }),
-                            /* @__PURE__ */ jsx2("p", { className: "text-gray-900 font-medium flex-1", children: step.action })
-                          ] }),
-                          step.expectedResult && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 ml-7 mb-2", children: step.expectedResult }),
-                          rubricMode === "pass_fail" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 ml-7", children: [
-                            /* @__PURE__ */ jsx2(
+                              onClick: () => setCriteriaResults((prev) => {
+                                const newResults = { ...prev };
+                                if (prev[idx] === true) {
+                                  delete newResults[idx];
+                                } else {
+                                  newResults[idx] = true;
+                                }
+                                return newResults;
+                              }),
+                              className: `w-full flex items-center gap-2 text-xs p-2 rounded border transition-colors text-left ${criteriaResults[idx] === true ? "bg-green-900/20 border-green-700" : "bg-zinc-900 border-zinc-700 hover:bg-zinc-800"}`,
+                              children: [
+                                /* @__PURE__ */ jsx2("span", { className: `w-5 h-5 rounded border-2 flex items-center justify-center ${criteriaResults[idx] === true ? "bg-green-500 border-green-500 text-white" : "border-cyan-400 text-cyan-600"}`, children: criteriaResults[idx] === true ? "\u2713" : "" }),
+                                /* @__PURE__ */ jsx2("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-400" : "text-zinc-300"}`, children: step.action })
+                              ]
+                            },
+                            idx
+                          )),
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
+                            /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Tap to check off each item." }),
+                            Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
                               "button",
                               {
-                                onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: true })),
-                                className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === true ? "bg-green-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-green-100"}`,
-                                children: "\u2713 Pass"
+                                onClick: () => setCriteriaResults({}),
+                                className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
+                                children: "\u21BA Reset"
                               }
-                            ),
-                            /* @__PURE__ */ jsx2(
+                            )
+                          ] })
+                        ] }),
+                        showSteps && template === "rubric" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+                          steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 p-2 rounded border border-zinc-700", children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs mb-1", children: [
+                              /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded bg-blue-900/50 text-blue-300 flex items-center justify-center font-medium", children: idx + 1 }),
+                              /* @__PURE__ */ jsx2("p", { className: "text-zinc-100 font-medium flex-1", children: step.action })
+                            ] }),
+                            step.expectedResult && /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 ml-7 mb-2", children: step.expectedResult }),
+                            rubricMode === "pass_fail" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 ml-7", children: [
+                              /* @__PURE__ */ jsx2(
+                                "button",
+                                {
+                                  onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: true })),
+                                  className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === true ? "bg-green-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-green-900/30"}`,
+                                  children: "\u2713 Pass"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2(
+                                "button",
+                                {
+                                  onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: false })),
+                                  className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === false ? "bg-red-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-red-900/30"}`,
+                                  children: "\u2717 Fail"
+                                }
+                              )
+                            ] }),
+                            rubricMode === "rating" && /* @__PURE__ */ jsx2("div", { className: "flex gap-1 ml-7", children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ jsx2(
+                              "button",
+                              {
+                                onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: n })),
+                                className: `w-8 h-8 rounded font-medium text-sm transition-colors ${criteriaResults[idx] === n ? "bg-blue-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-blue-900/50"}`,
+                                children: n
+                              },
+                              n
+                            )) })
+                          ] }, idx)),
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
+                            /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
+                            Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
                               "button",
                               {
-                                onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: false })),
-                                className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === false ? "bg-red-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-red-100"}`,
-                                children: "\u2717 Fail"
+                                onClick: () => setCriteriaResults({}),
+                                className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
+                                children: "\u21BA Reset"
                               }
                             )
-                          ] }),
-                          rubricMode === "rating" && /* @__PURE__ */ jsx2("div", { className: "flex gap-1 ml-7", children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ jsx2(
-                            "button",
-                            {
-                              onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: n })),
-                              className: `w-8 h-8 rounded font-medium text-sm transition-colors ${criteriaResults[idx] === n ? "bg-purple-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-purple-100"}`,
-                              children: n
-                            },
-                            n
-                          )) })
-                        ] }, idx)),
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
-                          /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
-                          Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
-                            "button",
-                            {
-                              onClick: () => setCriteriaResults({}),
-                              className: "text-xs text-gray-400 hover:text-red-500 transition-colors",
-                              children: "\u21BA Reset"
-                            }
-                          )
+                          ] })
+                        ] }),
+                        showSteps && template === "freeform" && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-2 bg-amber-900/20 rounded border border-amber-800 text-xs", children: [
+                          /* @__PURE__ */ jsx2("p", { className: "text-amber-300 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
+                          /* @__PURE__ */ jsx2("p", { className: "text-amber-400", children: "Review the area described above and note:" }),
+                          /* @__PURE__ */ jsxs("ul", { className: "text-amber-400 mt-1 ml-4 list-disc", children: [
+                            /* @__PURE__ */ jsx2("li", { children: "What works well" }),
+                            /* @__PURE__ */ jsx2("li", { children: "Issues or concerns" }),
+                            /* @__PURE__ */ jsx2("li", { children: "Suggestions" })
+                          ] })
                         ] })
-                      ] }),
-                      showSteps && template === "freeform" && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-2 bg-amber-50 rounded border border-amber-200 text-xs", children: [
-                        /* @__PURE__ */ jsx2("p", { className: "text-amber-800 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
-                        /* @__PURE__ */ jsx2("p", { className: "text-amber-700", children: "Review the area described above and note:" }),
-                        /* @__PURE__ */ jsxs("ul", { className: "text-amber-700 mt-1 ml-4 list-disc", children: [
-                          /* @__PURE__ */ jsx2("li", { children: "What works well" }),
-                          /* @__PURE__ */ jsx2("li", { children: "Issues or concerns" }),
-                          /* @__PURE__ */ jsx2("li", { children: "Suggestions" })
-                        ] })
-                      ] })
-                    ] });
-                  })(),
-                  /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-green-50 rounded text-xs text-green-700", children: [
-                    /* @__PURE__ */ jsx2("span", { className: "font-medium", children: displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:" }),
-                    " ",
-                    displayedAssignment.testCase.expectedResult
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                      ] });
+                    })(),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-green-900/20 rounded text-xs text-green-400", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "font-medium", children: displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:" }),
+                      " ",
+                      displayedAssignment.testCase.expectedResult
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleFail,
+                        disabled: submitting || skipping,
+                        className: "flex-1 py-2 px-3 bg-red-900/30 text-red-400 rounded-lg font-medium text-sm hover:bg-red-800/30 disabled:opacity-50 transition-colors",
+                        children: "\u2717 Fail"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleOpenSkipModal,
+                        disabled: submitting || skipping,
+                        className: "py-2 px-3 bg-yellow-900/30 text-yellow-400 rounded-lg font-medium text-sm hover:bg-yellow-800/30 disabled:opacity-50 transition-colors",
+                        children: "\u23ED\uFE0F Skip"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handlePass,
+                        disabled: submitting || skipping,
+                        className: "flex-1 py-2 px-3 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
+                        children: submitting ? "..." : "\u2713 Pass"
+                      }
+                    )
+                  ] }),
+                  showSkipModal && /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: () => setShowSkipModal(false), children: /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-xl p-4 w-72 shadow-xl border border-zinc-700", onClick: (e) => e.stopPropagation(), children: [
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mb-3", children: "Skip Test" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-3", children: "Please select a reason for skipping this test." }),
+                    /* @__PURE__ */ jsx2("div", { className: "space-y-2 mb-4", children: skipReasonOptions.map((option) => /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => setSelectedSkipReason(option.value),
+                        className: `w-full text-left p-2.5 rounded-lg border transition-colors ${selectedSkipReason === option.value ? "bg-yellow-900/20 border-yellow-700 text-yellow-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-yellow-800"}`,
+                        children: [
+                          /* @__PURE__ */ jsx2("div", { className: "font-medium text-sm", children: option.label }),
+                          /* @__PURE__ */ jsx2("div", { className: "text-xs text-zinc-500", children: option.description })
+                        ]
+                      },
+                      option.value
+                    )) }),
+                    selectedSkipReason === "other" && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                      /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Notes (required)" }),
+                      /* @__PURE__ */ jsx2(
+                        "textarea",
+                        {
+                          value: skipNotes,
+                          onChange: (e) => setSkipNotes(e.target.value),
+                          placeholder: "Please explain why you're skipping...",
+                          className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent placeholder:text-zinc-500",
+                          rows: 2
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          onClick: () => setShowSkipModal(false),
+                          className: "flex-1 py-2 px-3 text-sm font-medium text-zinc-400 bg-zinc-700 rounded-lg hover:bg-zinc-700 transition-colors",
+                          children: "Cancel"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          onClick: handleSkip,
+                          disabled: !selectedSkipReason || selectedSkipReason === "other" && !skipNotes.trim() || skipping,
+                          className: "flex-1 py-2 px-3 text-sm font-medium text-white bg-yellow-500 rounded-lg hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                          children: skipping ? "Skipping..." : "Skip Test"
+                        }
+                      )
+                    ] })
+                  ] }) })
+                ] })
+              ) : null }),
+              activeTab === "messages" && /* @__PURE__ */ jsx2("div", { children: messageView === "compose" ? (
+                /* Compose New Message */
+                /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: handleFail,
-                      disabled: submitting,
-                      className: "flex-1 py-2 px-3 bg-red-100 text-red-700 rounded-lg font-medium text-sm hover:bg-red-200 disabled:opacity-50 transition-colors",
-                      children: "\u2717 Fail"
+                      onClick: handleBackToThreadList,
+                      className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
+                      children: "\u2190 Back to Messages"
                     }
                   ),
+                  /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "New Message" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Send a message to the QA team" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Subject" }),
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          type: "text",
+                          value: composeSubject,
+                          onChange: (e) => setComposeSubject(e.target.value),
+                          placeholder: "What's this about?",
+                          maxLength: 100,
+                          className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Message" }),
+                      /* @__PURE__ */ jsx2(
+                        "textarea",
+                        {
+                          value: composeMessage,
+                          onChange: (e) => setComposeMessage(e.target.value),
+                          placeholder: "Write your message...",
+                          maxLength: 2e3,
+                          rows: 6,
+                          className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleSendNewMessage,
+                        disabled: !composeSubject.trim() || !composeMessage.trim() || sendingNewMessage,
+                        className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                        children: sendingNewMessage ? "Sending..." : "Send Message"
+                      }
+                    )
+                  ] })
+                ] })
+              ) : messageView === "thread" && selectedThread ? (
+                /* Thread Detail View */
+                /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: handlePass,
-                      disabled: submitting,
-                      className: "flex-1 py-2 px-3 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
-                      children: submitting ? "..." : "\u2713 Pass"
+                      onClick: handleBackToThreadList,
+                      className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
+                      children: "\u2190 Back to Messages"
                     }
-                  )
-                ] })
-              ] })
-            ) : null }),
-            activeTab === "session" && /* @__PURE__ */ jsx2("div", { children: !activeSession ? (
-              /* Start Session View */
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F50D}" }),
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 mt-2", children: "Exploratory QA Session" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-gray-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
-                ] }),
-                focusAreas.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: [
-                    "\u{1F4CC} Focus Areas",
-                    /* @__PURE__ */ jsx2("span", { className: "ml-1 text-[10px] text-gray-500 font-normal", children: "from your team" })
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4 pb-3 border-b border-zinc-700", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "text-lg", children: getThreadTypeIcon(selectedThread.threadType) }),
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm leading-tight", children: selectedThread.subject || "No subject" })
                   ] }),
-                  /* @__PURE__ */ jsx2("div", { className: "space-y-1.5", children: focusAreas.map((area) => /* @__PURE__ */ jsxs(
-                    "button",
+                  loadingMessages ? /* @__PURE__ */ jsx2("div", { className: "text-center py-6", children: /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Loading messages..." }) }) : /* @__PURE__ */ jsx2("div", { className: "space-y-3 mb-4", children: threadMessages.map((message) => /* @__PURE__ */ jsxs(
+                    "div",
                     {
-                      onClick: () => setSessionFocusArea(area.name),
-                      className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === area.name ? "bg-amber-50 border-amber-300 text-amber-700" : "bg-amber-50/50 border-amber-200 text-gray-700 hover:bg-amber-50"}`,
+                      className: `p-3 rounded-lg ${message.senderType === "tester" ? "bg-blue-900/30 border border-blue-800 ml-6" : "bg-zinc-800 border border-zinc-700 mr-6"}`,
                       children: [
-                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                          /* @__PURE__ */ jsx2("span", { className: "font-medium", children: area.name }),
-                          /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${area.priority >= 70 ? "bg-red-100 text-red-600" : area.priority >= 50 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"}`, children: area.priority >= 70 ? "Urgent" : area.priority >= 50 ? "Important" : "Suggested" })
-                        ] }),
-                        area.description && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-gray-500 mt-0.5 line-clamp-2", children: area.description })
+                        /* @__PURE__ */ jsx2("p", { className: `text-xs font-medium mb-1 ${message.senderType === "tester" ? "text-blue-300" : "text-zinc-300"}`, children: message.senderType === "tester" ? "You" : message.senderName }),
+                        /* @__PURE__ */ jsx2("p", { className: `text-sm ${message.senderType === "tester" ? "text-blue-100" : "text-zinc-200"}`, children: message.content }),
+                        /* @__PURE__ */ jsx2("p", { className: `text-[10px] mt-1 ${message.senderType === "tester" ? "text-blue-400/60" : "text-zinc-500"}`, children: formatMessageTime(message.createdAt) })
                       ]
                     },
-                    area.id
-                  )) })
-                ] }),
-                suggestedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
-                  /* @__PURE__ */ jsx2("div", { className: "space-y-1.5 max-h-32 overflow-y-auto", children: suggestedRoutes.map((suggestion, idx) => /* @__PURE__ */ jsx2(
+                    message.id
+                  )) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-3 border-t border-zinc-700", children: [
+                    /* @__PURE__ */ jsx2(
+                      "input",
+                      {
+                        type: "text",
+                        value: replyText,
+                        onChange: (e) => setReplyText(e.target.value),
+                        placeholder: "Type a reply...",
+                        maxLength: 1e3,
+                        className: "flex-1 px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500",
+                        onKeyDown: (e) => e.key === "Enter" && !e.shiftKey && handleSendReply()
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleSendReply,
+                        disabled: !replyText.trim() || sendingReply,
+                        className: "px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                        children: sendingReply ? "..." : "Send"
+                      }
+                    )
+                  ] })
+                ] })
+              ) : (
+                /* Thread List View */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: () => setSessionFocusArea(suggestion.route),
-                      className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === suggestion.route ? "bg-purple-50 border-purple-300 text-purple-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100"}`,
-                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                        /* @__PURE__ */ jsx2("span", { className: "font-medium truncate", children: suggestion.route }),
-                        /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${suggestion.priorityScore >= 40 ? "bg-red-100 text-red-600" : suggestion.priorityScore >= 25 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"}`, children: suggestion.reason })
-                      ] })
+                      onClick: handleStartNewMessage,
+                      className: "w-full flex items-center justify-center gap-2 py-2 px-4 mb-3 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 transition-colors",
+                      children: "\u2709\uFE0F New Message"
+                    }
+                  ),
+                  threads.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F4AC}" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "No messages yet" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Start a conversation or wait for messages from admins" })
+                  ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => handleOpenThread(thread),
+                      className: `w-full text-left p-3 rounded-lg border transition-colors ${thread.unreadCount > 0 ? "bg-blue-900/20 border-blue-800 hover:bg-blue-900/30" : "bg-zinc-800 border-zinc-700 hover:bg-zinc-700"}`,
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0 flex-1", children: [
+                            thread.isPinned && /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "\u{1F4CC}" }),
+                            /* @__PURE__ */ jsx2("span", { className: "text-xs", children: getThreadTypeIcon(thread.threadType) }),
+                            /* @__PURE__ */ jsx2("span", { className: `text-sm truncate ${thread.unreadCount > 0 ? "font-semibold text-zinc-100" : "text-zinc-300"}`, children: thread.subject || "No subject" })
+                          ] }),
+                          (thread.priority === "high" || thread.priority === "urgent") && /* @__PURE__ */ jsx2("span", { className: `w-2 h-2 rounded-full flex-shrink-0 ml-2 ${thread.priority === "urgent" ? "bg-red-500" : "bg-orange-500"}` })
+                        ] }),
+                        thread.lastMessage && /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500 truncate", children: [
+                          thread.lastMessage.senderName,
+                          ": ",
+                          thread.lastMessage.content
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1.5", children: [
+                          thread.unreadCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-500 text-white rounded-full font-medium", children: [
+                            thread.unreadCount,
+                            " new"
+                          ] }) : /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: "Read" }),
+                          /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: formatRelativeTime(thread.lastMessageAt) })
+                        ] })
+                      ]
                     },
-                    idx
+                    thread.id
                   )) })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Focus Area (optional)" }),
+                ] })
+              ) }),
+              activeTab === "session" && /* @__PURE__ */ jsx2("div", { children: !activeSession ? (
+                /* Start Session View */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F50D}" }),
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "Exploratory QA Session" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
+                  ] }),
+                  focusAreas.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: [
+                      "\u{1F4CC} Focus Areas",
+                      /* @__PURE__ */ jsx2("span", { className: "ml-1 text-[10px] text-zinc-500 font-normal", children: "from your team" })
+                    ] }),
+                    /* @__PURE__ */ jsx2("div", { className: "space-y-1.5", children: focusAreas.map((area) => /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => setSessionFocusArea(area.name),
+                        className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === area.name ? "bg-amber-900/20 border-amber-700 text-amber-400" : "bg-amber-900/20/50 border-amber-800 text-zinc-300 hover:bg-amber-900/20"}`,
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                            /* @__PURE__ */ jsx2("span", { className: "font-medium", children: area.name }),
+                            /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${area.priority >= 70 ? "bg-red-900/30 text-red-400" : area.priority >= 50 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: area.priority >= 70 ? "Urgent" : area.priority >= 50 ? "Important" : "Suggested" })
+                          ] }),
+                          area.description && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-zinc-500 mt-0.5 line-clamp-2", children: area.description })
+                        ]
+                      },
+                      area.id
+                    )) })
+                  ] }),
+                  suggestedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
+                    /* @__PURE__ */ jsx2("div", { className: "space-y-1.5 max-h-32 overflow-y-auto", children: suggestedRoutes.map((suggestion, idx) => /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setSessionFocusArea(suggestion.route),
+                        className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === suggestion.route ? "bg-blue-950/30 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:bg-zinc-700"}`,
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                          /* @__PURE__ */ jsx2("span", { className: "font-medium truncate", children: suggestion.route }),
+                          /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${suggestion.priorityScore >= 40 ? "bg-red-900/30 text-red-400" : suggestion.priorityScore >= 25 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: suggestion.reason })
+                        ] })
+                      },
+                      idx
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Focus Area (optional)" }),
+                    /* @__PURE__ */ jsx2(
+                      "input",
+                      {
+                        type: "text",
+                        value: sessionFocusArea,
+                        onChange: (e) => setSessionFocusArea(e.target.value),
+                        placeholder: "e.g., checkout flow, settings page",
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Platform" }),
+                    /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
+                      { key: "web", label: "\u{1F310} Web" },
+                      { key: "ios", label: "\u{1F4F1} iOS" },
+                      { key: "android", label: "\u{1F916} Android" }
+                    ].map(({ key, label }) => /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setSessionPlatform(key),
+                        className: `flex-1 py-2 px-3 rounded-lg text-xs font-medium transition-colors border-2 ${sessionPlatform === key ? "bg-blue-950/30 border-blue-500 text-blue-300" : "bg-zinc-800 border-transparent text-zinc-400 hover:bg-zinc-700"}`,
+                        children: label
+                      },
+                      key
+                    )) })
+                  ] }),
                   /* @__PURE__ */ jsx2(
-                    "input",
+                    "button",
                     {
-                      type: "text",
-                      value: sessionFocusArea,
-                      onChange: (e) => setSessionFocusArea(e.target.value),
-                      placeholder: "e.g., checkout flow, settings page",
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                      onClick: handleStartSession,
+                      disabled: startingSession,
+                      className: "w-full py-3 px-4 bg-green-600 text-white rounded-lg font-semibold text-sm hover:bg-green-700 disabled:opacity-50 transition-colors flex items-center justify-center gap-2",
+                      children: startingSession ? "Starting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx2("span", { children: "\u25B6" }),
+                        " Start Session"
+                      ] })
                     }
                   )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Platform" }),
-                  /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
-                    { key: "web", label: "\u{1F310} Web" },
-                    { key: "ios", label: "\u{1F4F1} iOS" },
-                    { key: "android", label: "\u{1F916} Android" }
-                  ].map(({ key, label }) => /* @__PURE__ */ jsx2(
+                ] })
+              ) : showEndConfirm ? (
+                /* End Session Confirmation */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u270B" }),
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "End Session?" }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 text-xs mt-1", children: [
+                      "Duration: ",
+                      formatElapsedTime(sessionElapsedTime),
+                      " \u2022 ",
+                      sessionFindings.length,
+                      " finding",
+                      sessionFindings.length !== 1 ? "s" : ""
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Session Notes (optional)" }),
+                    /* @__PURE__ */ jsx2(
+                      "textarea",
+                      {
+                        value: sessionNotes,
+                        onChange: (e) => setSessionNotes(e.target.value),
+                        placeholder: "Any overall observations from this session...",
+                        rows: 3,
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setShowEndConfirm(false),
+                        className: "flex-1 py-2 px-3 bg-zinc-700 text-zinc-300 rounded-lg font-medium text-sm hover:bg-zinc-700 transition-colors",
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleEndSession,
+                        disabled: endingSession,
+                        className: "flex-1 py-2 px-3 bg-red-600 text-white rounded-lg font-medium text-sm hover:bg-red-700 disabled:opacity-50 transition-colors",
+                        children: endingSession ? "Ending..." : "End Session"
+                      }
+                    )
+                  ] })
+                ] })
+              ) : showAddFinding ? (
+                /* Add Finding Form */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm", children: "Add Finding" }),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setShowAddFinding(false),
+                        className: "text-zinc-500 hover:text-zinc-400",
+                        children: "\u2715"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx2("div", { className: "flex gap-1 mb-3", children: [
+                    { type: "bug", label: "\u{1F41B} Bug", color: "red" },
+                    { type: "concern", label: "\u26A0\uFE0F Concern", color: "orange" },
+                    { type: "suggestion", label: "\u{1F4A1} Idea", color: "blue" },
+                    { type: "question", label: "\u2753 Question", color: "purple" }
+                  ].map(({ type, label, color }) => /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: () => setSessionPlatform(key),
-                      className: `flex-1 py-2 px-3 rounded-lg text-xs font-medium transition-colors border-2 ${sessionPlatform === key ? "bg-purple-50 border-purple-500 text-purple-700" : "bg-gray-50 border-transparent text-gray-600 hover:bg-gray-100"}`,
+                      onClick: () => setFindingType(type),
+                      className: `flex-1 py-1.5 px-2 rounded text-xs font-medium transition-colors ${findingType === type ? color === "red" ? "bg-red-900/30 text-red-400 ring-2 ring-red-400" : color === "orange" ? "bg-orange-900/30 text-orange-400 ring-2 ring-orange-400" : color === "blue" ? "bg-blue-900/30 text-blue-300 ring-2 ring-blue-400" : "bg-blue-900/50 text-blue-300 ring-2 ring-blue-400" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
                       children: label
                     },
-                    key
-                  )) })
-                ] }),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    onClick: handleStartSession,
-                    disabled: startingSession,
-                    className: "w-full py-3 px-4 bg-green-600 text-white rounded-lg font-semibold text-sm hover:bg-green-700 disabled:opacity-50 transition-colors flex items-center justify-center gap-2",
-                    children: startingSession ? "Starting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx2("span", { children: "\u25B6" }),
-                      " Start Session"
-                    ] })
-                  }
-                )
-              ] })
-            ) : showEndConfirm ? (
-              /* End Session Confirmation */
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u270B" }),
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 mt-2", children: "End Session?" }),
-                  /* @__PURE__ */ jsxs("p", { className: "text-gray-500 text-xs mt-1", children: [
-                    "Duration: ",
-                    formatElapsedTime(sessionElapsedTime),
-                    " \u2022 ",
-                    sessionFindings.length,
-                    " finding",
-                    sessionFindings.length !== 1 ? "s" : ""
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Session Notes (optional)" }),
+                    type
+                  )) }),
+                  findingType === "bug" && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
+                    /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low", "observation"].map((sev) => /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setFindingSeverity(sev),
+                        className: `flex-1 py-1 px-1 rounded text-xs font-medium capitalize transition-colors ${findingSeverity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : sev === "low" ? "bg-zinc-8000 text-white" : "bg-blue-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
+                        children: sev === "observation" ? "obs" : sev
+                      },
+                      sev
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Title *" }),
+                    /* @__PURE__ */ jsx2(
+                      "input",
+                      {
+                        type: "text",
+                        value: findingTitle,
+                        onChange: (e) => setFindingTitle(e.target.value),
+                        placeholder: "Brief description of what you found",
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Details (optional)" }),
+                    /* @__PURE__ */ jsx2(
+                      "textarea",
+                      {
+                        value: findingDescription,
+                        onChange: (e) => setFindingDescription(e.target.value),
+                        placeholder: "Steps to reproduce, expected behavior, etc.",
+                        rows: 2,
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsx2(
-                    "textarea",
+                    "button",
                     {
-                      value: sessionNotes,
-                      onChange: (e) => setSessionNotes(e.target.value),
-                      placeholder: "Any overall observations from this session...",
-                      rows: 3,
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
+                      onClick: handleAddFinding,
+                      disabled: addingFinding || !findingTitle.trim(),
+                      className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                      children: addingFinding ? "Adding..." : "Add Finding"
                     }
                   )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-                  /* @__PURE__ */ jsx2(
+                ] })
+              ) : (
+                /* Active Session View */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "bg-green-900/20 rounded-lg p-3 mb-3 border border-green-800", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
+                        /* @__PURE__ */ jsx2("span", { className: "font-medium text-green-300 text-sm", children: "Session Active" })
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { className: "font-mono text-green-400 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
+                    ] }),
+                    activeSession.focusArea && /* @__PURE__ */ jsxs("p", { className: "text-green-400 text-xs mt-1", children: [
+                      "Focus: ",
+                      activeSession.focusArea
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
                     "button",
                     {
-                      onClick: () => setShowEndConfirm(false),
-                      className: "flex-1 py-2 px-3 bg-gray-100 text-gray-700 rounded-lg font-medium text-sm hover:bg-gray-200 transition-colors",
-                      children: "Cancel"
+                      onClick: () => setShowAddFinding(true),
+                      className: "w-full py-3 px-4 bg-blue-500 text-white rounded-lg font-semibold text-sm hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 mb-3",
+                      children: [
+                        /* @__PURE__ */ jsx2("span", { children: "+" }),
+                        " Add Finding"
+                      ]
                     }
                   ),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
+                      "Findings (",
+                      sessionFindings.length,
+                      ")"
+                    ] }) }),
+                    sessionFindings.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 bg-zinc-800 rounded-lg", children: [
+                      /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "No findings yet" }),
+                      /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "Explore and add findings as you go" })
+                    ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2 max-h-32 overflow-y-auto", children: sessionFindings.map((finding) => /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        className: `p-2 rounded-lg border text-xs ${finding.type === "bug" ? "bg-red-900/20 border-red-800" : finding.type === "concern" ? "bg-orange-900/20 border-orange-200" : finding.type === "suggestion" ? "bg-blue-900/20 border-blue-800" : "bg-blue-950/30 border-blue-800"}`,
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                          /* @__PURE__ */ jsx2("span", { children: finding.type === "bug" ? "\u{1F41B}" : finding.type === "concern" ? "\u26A0\uFE0F" : finding.type === "suggestion" ? "\u{1F4A1}" : "\u2753" }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                            /* @__PURE__ */ jsx2("p", { className: "font-medium text-zinc-100 truncate", children: finding.title }),
+                            finding.severity && finding.type === "bug" && /* @__PURE__ */ jsx2("span", { className: `inline-block mt-0.5 px-1 py-0.5 rounded text-[10px] font-medium ${finding.severity === "critical" ? "bg-red-900/40 text-red-300" : finding.severity === "high" ? "bg-orange-900/40 text-orange-300" : finding.severity === "medium" ? "bg-yellow-900/40 text-yellow-300" : "bg-zinc-700 text-zinc-300"}`, children: finding.severity })
+                          ] })
+                        ] })
+                      },
+                      finding.id
+                    )) })
+                  ] }),
                   /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: handleEndSession,
-                      disabled: endingSession,
-                      className: "flex-1 py-2 px-3 bg-red-600 text-white rounded-lg font-medium text-sm hover:bg-red-700 disabled:opacity-50 transition-colors",
-                      children: endingSession ? "Ending..." : "End Session"
+                      onClick: () => setShowEndConfirm(true),
+                      className: "w-full py-2 px-4 bg-zinc-700 text-zinc-300 rounded-lg font-medium text-sm hover:bg-zinc-700 transition-colors",
+                      children: "End Session"
                     }
                   )
                 ] })
-              ] })
-            ) : showAddFinding ? (
-              /* Add Finding Form */
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 text-sm", children: "Add Finding" }),
-                  /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      onClick: () => setShowAddFinding(false),
-                      className: "text-gray-400 hover:text-gray-600",
-                      children: "\u2715"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx2("div", { className: "flex gap-1 mb-3", children: [
+              ) }),
+              activeTab === "report" && /* @__PURE__ */ jsx2("div", { children: submitted ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+                /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F389}" }),
+                /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Report submitted!" })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx2("div", { className: "flex gap-2 mb-4", children: [
                   { type: "bug", label: "\u{1F41B} Bug", color: "red" },
-                  { type: "concern", label: "\u26A0\uFE0F Concern", color: "orange" },
-                  { type: "suggestion", label: "\u{1F4A1} Idea", color: "blue" },
-                  { type: "question", label: "\u2753 Question", color: "purple" }
+                  { type: "feedback", label: "\u{1F4A1} Feedback", color: "blue" },
+                  { type: "suggestion", label: "\u2728 Idea", color: "purple" }
                 ].map(({ type, label, color }) => /* @__PURE__ */ jsx2(
                   "button",
                   {
-                    onClick: () => setFindingType(type),
-                    className: `flex-1 py-1.5 px-2 rounded text-xs font-medium transition-colors ${findingType === type ? color === "red" ? "bg-red-100 text-red-700 ring-2 ring-red-400" : color === "orange" ? "bg-orange-100 text-orange-700 ring-2 ring-orange-400" : color === "blue" ? "bg-blue-100 text-blue-700 ring-2 ring-blue-400" : "bg-purple-100 text-purple-700 ring-2 ring-purple-400" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                    onClick: () => setReportType(type),
+                    className: `flex-1 py-1.5 px-2 rounded-lg text-xs font-medium transition-colors ${reportType === type ? color === "red" ? "bg-red-900/30 text-red-400 ring-2 ring-red-500" : color === "blue" ? "bg-blue-900/30 text-blue-300 ring-2 ring-blue-500" : "bg-blue-900/50 text-blue-300 ring-2 ring-blue-500" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
                     children: label
                   },
                   type
                 )) }),
-                findingType === "bug" && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Severity" }),
-                  /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low", "observation"].map((sev) => /* @__PURE__ */ jsx2(
+                (reportType === "bug" || reportType === "test_fail") && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
+                  /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low"].map((sev) => /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: () => setFindingSeverity(sev),
-                      className: `flex-1 py-1 px-1 rounded text-xs font-medium capitalize transition-colors ${findingSeverity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : sev === "low" ? "bg-gray-500 text-white" : "bg-blue-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
-                      children: sev === "observation" ? "obs" : sev
+                      onClick: () => setSeverity(sev),
+                      className: `flex-1 py-1 px-2 rounded text-xs font-medium capitalize transition-colors ${severity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : "bg-zinc-8000 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
+                      children: sev
                     },
                     sev
                   )) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Title *" }),
-                  /* @__PURE__ */ jsx2(
-                    "input",
-                    {
-                      type: "text",
-                      value: findingTitle,
-                      onChange: (e) => setFindingTitle(e.target.value),
-                      placeholder: "Brief description of what you found",
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Details (optional)" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "What happened?" }),
                   /* @__PURE__ */ jsx2(
                     "textarea",
                     {
-                      value: findingDescription,
-                      onChange: (e) => setFindingDescription(e.target.value),
-                      placeholder: "Steps to reproduce, expected behavior, etc.",
-                      rows: 2,
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
+                      value: description,
+                      onChange: (e) => setDescription(e.target.value),
+                      placeholder: "Describe the issue...",
+                      rows: 3,
+                      className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsx2(
                   "button",
                   {
-                    onClick: handleAddFinding,
-                    disabled: addingFinding || !findingTitle.trim(),
-                    className: "w-full py-2 px-4 bg-purple-600 text-white rounded-lg font-medium text-sm hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-                    children: addingFinding ? "Adding..." : "Add Finding"
+                    onClick: handleSubmitReport,
+                    disabled: submitting || !description.trim(),
+                    className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                    children: submitting ? "Submitting..." : "Submit Report"
                   }
                 )
-              ] })
-            ) : (
-              /* Active Session View */
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "bg-green-50 rounded-lg p-3 mb-3 border border-green-200", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
-                      /* @__PURE__ */ jsx2("span", { className: "font-medium text-green-800 text-sm", children: "Session Active" })
-                    ] }),
-                    /* @__PURE__ */ jsx2("span", { className: "font-mono text-green-700 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
-                  ] }),
-                  activeSession.focusArea && /* @__PURE__ */ jsxs("p", { className: "text-green-700 text-xs mt-1", children: [
-                    "Focus: ",
-                    activeSession.focusArea
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => setShowAddFinding(true),
-                    className: "w-full py-3 px-4 bg-purple-600 text-white rounded-lg font-semibold text-sm hover:bg-purple-700 transition-colors flex items-center justify-center gap-2 mb-3",
-                    children: [
-                      /* @__PURE__ */ jsx2("span", { children: "+" }),
-                      " Add Finding"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-gray-500", children: [
-                    "Findings (",
-                    sessionFindings.length,
-                    ")"
-                  ] }) }),
-                  sessionFindings.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 bg-gray-50 rounded-lg", children: [
-                    /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-xs", children: "No findings yet" }),
-                    /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-xs", children: "Explore and add findings as you go" })
-                  ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2 max-h-32 overflow-y-auto", children: sessionFindings.map((finding) => /* @__PURE__ */ jsx2(
-                    "div",
-                    {
-                      className: `p-2 rounded-lg border text-xs ${finding.type === "bug" ? "bg-red-50 border-red-200" : finding.type === "concern" ? "bg-orange-50 border-orange-200" : finding.type === "suggestion" ? "bg-blue-50 border-blue-200" : "bg-purple-50 border-purple-200"}`,
-                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-                        /* @__PURE__ */ jsx2("span", { children: finding.type === "bug" ? "\u{1F41B}" : finding.type === "concern" ? "\u26A0\uFE0F" : finding.type === "suggestion" ? "\u{1F4A1}" : "\u2753" }),
-                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ jsx2("p", { className: "font-medium text-gray-900 truncate", children: finding.title }),
-                          finding.severity && finding.type === "bug" && /* @__PURE__ */ jsx2("span", { className: `inline-block mt-0.5 px-1 py-0.5 rounded text-[10px] font-medium ${finding.severity === "critical" ? "bg-red-200 text-red-800" : finding.severity === "high" ? "bg-orange-200 text-orange-800" : finding.severity === "medium" ? "bg-yellow-200 text-yellow-800" : "bg-gray-200 text-gray-700"}`, children: finding.severity })
-                        ] })
-                      ] })
-                    },
-                    finding.id
-                  )) })
-                ] }),
+              ] }) })
+            ] }),
+            showProfileOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", children: [
+              /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", children: [
                 /* @__PURE__ */ jsx2(
                   "button",
                   {
-                    onClick: () => setShowEndConfirm(true),
-                    className: "w-full py-2 px-4 bg-gray-100 text-gray-700 rounded-lg font-medium text-sm hover:bg-gray-200 transition-colors",
-                    children: "End Session"
+                    onClick: handleCloseProfile,
+                    className: "text-sm text-zinc-400 hover:text-white transition-colors",
+                    children: "\u2190 Back"
                   }
-                )
-              ] })
-            ) }),
-            activeTab === "report" && /* @__PURE__ */ jsx2("div", { children: submitted ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F389}" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-600 mt-2 font-medium", children: "Report submitted!" })
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx2("div", { className: "flex gap-2 mb-4", children: [
-                { type: "bug", label: "\u{1F41B} Bug", color: "red" },
-                { type: "feedback", label: "\u{1F4A1} Feedback", color: "blue" },
-                { type: "suggestion", label: "\u2728 Idea", color: "purple" }
-              ].map(({ type, label, color }) => /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  onClick: () => setReportType(type),
-                  className: `flex-1 py-1.5 px-2 rounded-lg text-xs font-medium transition-colors ${reportType === type ? color === "red" ? "bg-red-100 text-red-700 ring-2 ring-red-500" : color === "blue" ? "bg-blue-100 text-blue-700 ring-2 ring-blue-500" : "bg-purple-100 text-purple-700 ring-2 ring-purple-500" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
-                  children: label
-                },
-                type
-              )) }),
-              (reportType === "bug" || reportType === "test_fail") && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Severity" }),
-                /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low"].map((sev) => /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    onClick: () => setSeverity(sev),
-                    className: `flex-1 py-1 px-2 rounded text-xs font-medium capitalize transition-colors ${severity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : "bg-gray-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
-                    children: sev
-                  },
-                  sev
-                )) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "What happened?" }),
-                /* @__PURE__ */ jsx2(
-                  "textarea",
-                  {
-                    value: description,
-                    onChange: (e) => setDescription(e.target.value),
-                    placeholder: "Describe the issue...",
-                    rows: 3,
-                    className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
-                  }
-                )
+                ),
+                /* @__PURE__ */ jsx2("span", { className: "font-semibold text-sm", children: "Profile" }),
+                /* @__PURE__ */ jsx2("div", { className: "w-12" }),
+                " "
               ] }),
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  onClick: handleSubmitReport,
-                  disabled: submitting || !description.trim(),
-                  className: "w-full py-2 px-4 bg-purple-600 text-white rounded-lg font-medium text-sm hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-                  children: submitting ? "Submitting..." : "Submit Report"
-                }
-              )
-            ] }) })
-          ] }),
-          showProfileOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-white z-50 flex flex-col rounded-xl overflow-hidden", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-purple-600 text-white px-4 py-3 flex items-center justify-between", children: [
-              /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  onClick: handleCloseProfile,
-                  className: "text-sm text-purple-200 hover:text-white transition-colors",
-                  children: "\u2190 Back"
-                }
-              ),
-              /* @__PURE__ */ jsx2("span", { className: "font-semibold text-sm", children: "Profile" }),
-              /* @__PURE__ */ jsx2("div", { className: "w-12" }),
-              " "
-            ] }),
-            /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto p-4", children: profileSaved ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
-              /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-600 mt-2 font-medium", children: "Profile saved!" })
-            ] }) : profileEditing ? (
-              /* Edit Profile Form */
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900", children: "Edit Profile" }),
-                  /* @__PURE__ */ jsx2(
-                    "button",
-                    {
-                      onClick: handleCancelEditProfile,
-                      className: "text-sm text-gray-500 hover:text-gray-700",
-                      children: "Cancel"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Name" }),
-                  /* @__PURE__ */ jsx2(
-                    "input",
-                    {
-                      type: "text",
-                      value: profileName,
-                      onChange: (e) => setProfileName(e.target.value),
-                      placeholder: "Your name",
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Primary Email" }),
-                  /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-gray-100 rounded-lg", children: [
-                    /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-700", children: testerInfo?.email }),
-                    /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400 mt-0.5", children: "Main communication email" })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Additional Testing Emails" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 mb-2", children: "Add other emails you use to test on different accounts" }),
-                  profileAdditionalEmails.map((email) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ jsx2("span", { className: "flex-1 px-3 py-1.5 bg-purple-50 text-purple-700 text-sm rounded-full", children: email }),
+              /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto p-4", children: profileSaved ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+                /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
+                /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Profile saved!" })
+              ] }) : profileEditing ? (
+                /* Edit Profile Form */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "Edit Profile" }),
                     /* @__PURE__ */ jsx2(
                       "button",
                       {
-                        onClick: () => handleRemoveEmail(email),
-                        className: "text-purple-400 hover:text-red-500 text-sm",
-                        children: "\u2715"
+                        onClick: handleCancelEditProfile,
+                        className: "text-sm text-zinc-500 hover:text-zinc-300",
+                        children: "Cancel"
                       }
                     )
-                  ] }, email)),
-                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Name" }),
                     /* @__PURE__ */ jsx2(
                       "input",
                       {
-                        type: "email",
-                        value: newEmailInput,
-                        onChange: (e) => setNewEmailInput(e.target.value),
-                        placeholder: "email@example.com",
-                        className: "flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500",
-                        onKeyDown: (e) => e.key === "Enter" && handleAddEmail()
+                        type: "text",
+                        value: profileName,
+                        onChange: (e) => setProfileName(e.target.value),
+                        placeholder: "Your name",
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
                       }
-                    ),
-                    /* @__PURE__ */ jsx2(
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Primary Email" }),
+                    /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-zinc-800 rounded-lg", children: [
+                      /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: testerInfo?.email }),
+                      /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mt-0.5", children: "Main communication email" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Additional Testing Emails" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Add other emails you use to test on different accounts" }),
+                    profileAdditionalEmails.map((email) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "flex-1 px-3 py-1.5 bg-blue-950/30 text-blue-300 text-sm rounded-full", children: email }),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          onClick: () => handleRemoveEmail(email),
+                          className: "text-blue-400 hover:text-red-500 text-sm",
+                          children: "\u2715"
+                        }
+                      )
+                    ] }, email)),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsx2(
+                        "input",
+                        {
+                          type: "email",
+                          value: newEmailInput,
+                          onChange: (e) => setNewEmailInput(e.target.value),
+                          placeholder: "email@example.com",
+                          className: "flex-1 px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500",
+                          onKeyDown: (e) => e.key === "Enter" && handleAddEmail()
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          onClick: handleAddEmail,
+                          disabled: !newEmailInput.trim(),
+                          className: "px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed",
+                          children: "Add"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Testing Platforms" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Select the platforms you can test on" }),
+                    /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
+                      { key: "ios", label: "\u{1F4F1} iOS" },
+                      { key: "android", label: "\u{1F916} Android" },
+                      { key: "web", label: "\u{1F310} Web" }
+                    ].map(({ key, label }) => /* @__PURE__ */ jsx2(
                       "button",
                       {
-                        onClick: handleAddEmail,
-                        disabled: !newEmailInput.trim(),
-                        className: "px-3 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed",
-                        children: "Add"
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Testing Platforms" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 mb-2", children: "Select the platforms you can test on" }),
-                  /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
-                    { key: "ios", label: "\u{1F4F1} iOS" },
-                    { key: "android", label: "\u{1F916} Android" },
-                    { key: "web", label: "\u{1F310} Web" }
-                  ].map(({ key, label }) => /* @__PURE__ */ jsx2(
+                        onClick: () => handleTogglePlatform(key),
+                        className: `flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-colors border-2 ${profilePlatforms.includes(key) ? "bg-blue-950/30 border-blue-500 text-blue-300" : "bg-zinc-800 border-transparent text-zinc-400 hover:bg-zinc-700"}`,
+                        children: label
+                      },
+                      key
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsx2(
                     "button",
                     {
-                      onClick: () => handleTogglePlatform(key),
-                      className: `flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-colors border-2 ${profilePlatforms.includes(key) ? "bg-purple-50 border-purple-500 text-purple-700" : "bg-gray-50 border-transparent text-gray-600 hover:bg-gray-100"}`,
-                      children: label
-                    },
-                    key
-                  )) })
-                ] }),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    onClick: handleSaveProfile,
-                    disabled: savingProfile,
-                    className: "w-full py-2 px-4 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
-                    children: savingProfile ? "Saving..." : "Save Profile"
-                  }
-                )
-              ] })
-            ) : (
-              /* Profile View */
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-4 text-center mb-4", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "w-16 h-16 mx-auto bg-purple-600 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx2("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900", children: testerInfo?.name }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-500", children: testerInfo?.email }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-gray-200", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-purple-600", children: testerInfo?.assignedTests || 0 }),
-                      /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500", children: "Assigned" })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-purple-600", children: testerInfo?.completedTests || 0 }),
-                      /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500", children: "Completed" })
+                      onClick: handleSaveProfile,
+                      disabled: savingProfile,
+                      className: "w-full py-2 px-4 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
+                      children: savingProfile ? "Saving..." : "Save Profile"
+                    }
+                  )
+                ] })
+              ) : (
+                /* Profile View */
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-4 text-center mb-4", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "w-16 h-16 mx-auto bg-blue-500 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx2("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
+                    /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: testerInfo?.name }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-500", children: testerInfo?.email }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-zinc-700", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                        /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.assignedTests || 0 }),
+                        /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Assigned" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                        /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.completedTests || 0 }),
+                        /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Completed" })
+                      ] })
                     ] })
-                  ] })
-                ] }),
-                (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
-                  testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-700", children: email }, email))
-                ] }),
-                (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
-                  /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2", children: testerInfo?.platforms?.map((platform) => /* @__PURE__ */ jsx2(
-                    "span",
+                  ] }),
+                  (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
+                    testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: email }, email))
+                  ] }),
+                  (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
+                    /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2", children: testerInfo?.platforms?.map((platform) => /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        className: "px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full font-medium",
+                        children: platform === "ios" ? "\u{1F4F1} iOS" : platform === "android" ? "\u{1F916} Android" : "\u{1F310} Web"
+                      },
+                      platform
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsx2(
+                    "button",
                     {
-                      className: "px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full font-medium",
-                      children: platform === "ios" ? "\u{1F4F1} iOS" : platform === "android" ? "\u{1F916} Android" : "\u{1F310} Web"
-                    },
-                    platform
-                  )) })
-                ] }),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    onClick: handleStartEditProfile,
-                    className: "w-full py-2 px-4 bg-purple-600 text-white rounded-lg font-medium text-sm hover:bg-purple-700 transition-colors",
-                    children: "Edit Profile"
-                  }
-                )
-              ] })
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-gray-50 border-t border-gray-200 flex items-center justify-between text-xs text-gray-400", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              pendingCount,
-              " pending \xB7 ",
-              inProgressCount,
-              " in progress"
+                      onClick: handleStartEditProfile,
+                      className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 transition-colors",
+                      children: "Edit Profile"
+                    }
+                  )
+                ] })
+              ) })
             ] }),
-            /* @__PURE__ */ jsx2(
-              "button",
-              {
-                onClick: refreshAssignments,
-                className: "hover:text-gray-600",
-                children: "\u21BB Refresh"
-              }
-            )
+            /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                threads.length,
+                " thread",
+                threads.length !== 1 ? "s" : "",
+                " \xB7 ",
+                unreadCount,
+                " unread"
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: refreshThreads,
+                  className: "hover:text-zinc-300",
+                  children: "\u21BB Refresh"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                pendingCount,
+                " pending \xB7 ",
+                inProgressCount,
+                " in progress"
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: refreshAssignments,
+                  className: "hover:text-zinc-300",
+                  children: "\u21BB Refresh"
+                }
+              )
+            ] }) })
           ] })
-        ] })
-      ]
-    }
+        ]
+      }
+    ),
+    document.body
   );
 }