@bbearai/react 0.1.7 → 0.1.9

package/dist/index.js

@@ -50,7 +50,25 @@ var BugBearContext = (0, import_react.createContext)({
   },
   updateTesterProfile: async () => ({ success: false }),
   refreshTesterInfo: async () => {
-  }
+  },
+  // QA Sessions
+  activeSession: null,
+  sessionFindings: [],
+  startSession: async () => ({ success: false }),
+  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 (0, import_react.useContext)(BugBearContext);
@@ -63,11 +81,86 @@ function BugBearProvider({ config, children, enabled = true }) {
   const [assignments, setAssignments] = (0, import_react.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const hasInitialized = (0, import_react.useRef)(false);
+  const [activeSession, setActiveSession] = (0, import_react.useState)(null);
+  const [sessionFindings, setSessionFindings] = (0, import_react.useState)([]);
+  const [threads, setThreads] = (0, import_react.useState)([]);
+  const [unreadCount, setUnreadCount] = (0, import_react.useState)(0);
   const refreshAssignments = (0, import_react.useCallback)(async () => {
     if (!client) return;
     const newAssignments = await client.getAssignedTests();
     setAssignments(newAssignments);
   }, [client]);
+  const refreshSession = (0, import_react.useCallback)(async () => {
+    if (!client) return;
+    const session = await client.getActiveSession();
+    setActiveSession(session);
+    if (session) {
+      const findings = await client.getSessionFindings(session.id);
+      setSessionFindings(findings);
+    } else {
+      setSessionFindings([]);
+    }
+  }, [client]);
+  const startSession = (0, import_react.useCallback)(async (options = {}) => {
+    if (!client) return { success: false, error: "Client not initialized" };
+    const result = await client.startSession(options);
+    if (result.success && result.session) {
+      setActiveSession(result.session);
+      setSessionFindings([]);
+    }
+    return { success: result.success, error: result.error };
+  }, [client]);
+  const endSession = (0, import_react.useCallback)(async (notes) => {
+    if (!client || !activeSession) return { success: false, error: "No active session" };
+    const routesCovered = client.getNavigationHistory();
+    const result = await client.endSession(activeSession.id, { notes, routesCovered });
+    if (result.success) {
+      setActiveSession(null);
+      setSessionFindings([]);
+    }
+    return { success: result.success, error: result.error };
+  }, [client, activeSession]);
+  const addFinding = (0, import_react.useCallback)(async (options) => {
+    if (!client || !activeSession) return { success: false, error: "No active session" };
+    const result = await client.addFinding(activeSession.id, options);
+    if (result.success && result.finding) {
+      setSessionFindings((prev) => [...prev, result.finding]);
+      setActiveSession((prev) => prev ? { ...prev, findingsCount: prev.findingsCount + 1 } : null);
+    }
+    return result;
+  }, [client, activeSession]);
+  const refreshThreads = (0, import_react.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 = (0, import_react.useCallback)(async (threadId) => {
+    if (!client) return [];
+    return client.getThreadMessages(threadId);
+  }, [client]);
+  const sendMessage = (0, import_react.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 = (0, import_react.useCallback)(async (threadId) => {
+    if (!client) return;
+    await client.markThreadAsRead(threadId);
+    await refreshThreads();
+  }, [client, refreshThreads]);
+  const createThread = (0, import_react.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 = (0, import_react.useCallback)(async (bugBearClient) => {
     setIsLoading(true);
     try {
@@ -80,8 +173,20 @@ function BugBearProvider({ config, children, enabled = true }) {
       setTesterInfo(info);
       setIsTester(!!info);
       if (info && qaEnabled) {
-        const newAssignments = await bugBearClient.getAssignedTests();
+        const [newAssignments, session, newThreads] = await Promise.all([
+          bugBearClient.getAssignedTests(),
+          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);
+        }
       }
     } catch (err) {
       console.error("BugBear: Init error", err);
@@ -136,7 +241,22 @@ function BugBearProvider({ config, children, enabled = true }) {
         onNavigate: config.onNavigate,
         refreshTesterStatus,
         updateTesterProfile,
-        refreshTesterInfo
+        refreshTesterInfo,
+        // QA Sessions
+        activeSession,
+        sessionFindings,
+        startSession,
+        endSession,
+        addFinding,
+        refreshSession,
+        // Messaging
+        threads,
+        unreadCount,
+        refreshThreads,
+        getThreadMessages,
+        sendMessage,
+        markAsRead,
+        createThread
       },
       children
     }
@@ -215,13 +335,77 @@ function BugBearPanel({
   defaultCollapsed = false,
   draggable = true
 }) {
-  const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate, updateTesterProfile, refreshTesterInfo } = 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] = (0, import_react2.useState)(defaultCollapsed);
   const [activeTab, setActiveTab] = (0, import_react2.useState)("tests");
   const [showSteps, setShowSteps] = (0, import_react2.useState)(false);
   const [testView, setTestView] = (0, import_react2.useState)("detail");
   const [selectedTestId, setSelectedTestId] = (0, import_react2.useState)(null);
+  const [messageView, setMessageView] = (0, import_react2.useState)("list");
+  const [selectedThread, setSelectedThread] = (0, import_react2.useState)(null);
+  const [threadMessages, setThreadMessages] = (0, import_react2.useState)([]);
+  const [replyText, setReplyText] = (0, import_react2.useState)("");
+  const [sendingReply, setSendingReply] = (0, import_react2.useState)(false);
+  const [loadingMessages, setLoadingMessages] = (0, import_react2.useState)(false);
+  const [composeSubject, setComposeSubject] = (0, import_react2.useState)("");
+  const [composeMessage, setComposeMessage] = (0, import_react2.useState)("");
+  const [sendingNewMessage, setSendingNewMessage] = (0, import_react2.useState)(false);
   const displayedAssignment = selectedTestId ? assignments.find((a) => a.id === selectedTestId) || currentAssignment : currentAssignment;
+  const groupedAssignments = (0, import_react2.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 = (0, import_react2.useCallback)((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] = (0, import_react2.useState)(null);
   const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
   const dragStartRef = (0, import_react2.useRef)(null);
@@ -232,7 +416,21 @@ function BugBearPanel({
   const [submitting, setSubmitting] = (0, import_react2.useState)(false);
   const [submitted, setSubmitted] = (0, import_react2.useState)(false);
   const [justPassed, setJustPassed] = (0, import_react2.useState)(false);
+  const [showFeedbackPrompt, setShowFeedbackPrompt] = (0, import_react2.useState)(false);
+  const [pendingFeedbackStatus, setPendingFeedbackStatus] = (0, import_react2.useState)(null);
+  const [feedbackRating, setFeedbackRating] = (0, import_react2.useState)(5);
+  const [feedbackNote, setFeedbackNote] = (0, import_react2.useState)("");
+  const [feedbackFlags, setFeedbackFlags] = (0, import_react2.useState)({
+    isOutdated: false,
+    needsMoreDetail: false,
+    stepsUnclear: false,
+    expectedResultUnclear: false
+  });
   const [criteriaResults, setCriteriaResults] = (0, import_react2.useState)({});
+  const [showSkipModal, setShowSkipModal] = (0, import_react2.useState)(false);
+  const [selectedSkipReason, setSelectedSkipReason] = (0, import_react2.useState)(null);
+  const [skipNotes, setSkipNotes] = (0, import_react2.useState)("");
+  const [skipping, setSkipping] = (0, import_react2.useState)(false);
   const [profileEditing, setProfileEditing] = (0, import_react2.useState)(false);
   const [profileName, setProfileName] = (0, import_react2.useState)("");
   const [profileAdditionalEmails, setProfileAdditionalEmails] = (0, import_react2.useState)([]);
@@ -241,6 +439,23 @@ function BugBearPanel({
   const [savingProfile, setSavingProfile] = (0, import_react2.useState)(false);
   const [profileSaved, setProfileSaved] = (0, import_react2.useState)(false);
   const [showProfileOverlay, setShowProfileOverlay] = (0, import_react2.useState)(false);
+  const [collapsedFolders, setCollapsedFolders] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  const [startingSession, setStartingSession] = (0, import_react2.useState)(false);
+  const [sessionFocusArea, setSessionFocusArea] = (0, import_react2.useState)("");
+  const [sessionPlatform, setSessionPlatform] = (0, import_react2.useState)("web");
+  const [suggestedRoutes, setSuggestedRoutes] = (0, import_react2.useState)([]);
+  const [focusAreas, setFocusAreas] = (0, import_react2.useState)([]);
+  const [showAddFinding, setShowAddFinding] = (0, import_react2.useState)(false);
+  const [findingType, setFindingType] = (0, import_react2.useState)("bug");
+  const [findingTitle, setFindingTitle] = (0, import_react2.useState)("");
+  const [findingDescription, setFindingDescription] = (0, import_react2.useState)("");
+  const [findingSeverity, setFindingSeverity] = (0, import_react2.useState)("medium");
+  const [addingFinding, setAddingFinding] = (0, import_react2.useState)(false);
+  const [endingSession, setEndingSession] = (0, import_react2.useState)(false);
+  const [sessionNotes, setSessionNotes] = (0, import_react2.useState)("");
+  const [showEndConfirm, setShowEndConfirm] = (0, import_react2.useState)(false);
+  const [sessionElapsedTime, setSessionElapsedTime] = (0, import_react2.useState)(0);
+  const [assignmentElapsedTime, setAssignmentElapsedTime] = (0, import_react2.useState)(0);
   (0, import_react2.useEffect)(() => {
     if (typeof window === "undefined") return;
     try {
@@ -275,6 +490,84 @@ function BugBearPanel({
     setCriteriaResults({});
     setShowSteps(false);
   }, [displayedAssignment?.id]);
+  (0, import_react2.useEffect)(() => {
+    if (!activeSession) {
+      setSessionElapsedTime(0);
+      return;
+    }
+    const startTime = new Date(activeSession.startedAt).getTime();
+    const now = Date.now();
+    setSessionElapsedTime(Math.floor((now - startTime) / 1e3));
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1e3);
+      setSessionElapsedTime(elapsed);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [activeSession]);
+  (0, import_react2.useEffect)(() => {
+    const activeAssignment = displayedAssignment?.status === "in_progress" ? displayedAssignment : null;
+    if (!activeAssignment?.startedAt) {
+      setAssignmentElapsedTime(0);
+      return;
+    }
+    const startTime = new Date(activeAssignment.startedAt).getTime();
+    const now = Date.now();
+    setAssignmentElapsedTime(Math.floor((now - startTime) / 1e3));
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1e3);
+      setAssignmentElapsedTime(elapsed);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [displayedAssignment?.id, displayedAssignment?.status, displayedAssignment?.startedAt]);
+  (0, import_react2.useEffect)(() => {
+    if (!client || activeSession) {
+      setSuggestedRoutes([]);
+      setFocusAreas([]);
+      return;
+    }
+    const loadSuggestions = async () => {
+      try {
+        const supabase = client.supabase;
+        if (!supabase) return;
+        const projectId = client.config.projectId;
+        const [routeStatsRes, focusAreasRes] = await Promise.all([
+          supabase.from("route_test_stats").select("route, priority_score, open_bugs, exploratory_issues, last_tested_at, test_case_count").eq("project_id", projectId).order("priority_score", { ascending: false }).limit(10),
+          supabase.rpc("get_active_focus_areas", { p_project_id: projectId })
+        ]);
+        if (routeStatsRes.data && routeStatsRes.data.length > 0) {
+          const suggestions = routeStatsRes.data.filter((r) => r.route && r.priority_score > 0).slice(0, 5).map((r) => {
+            let reason = "";
+            if (r.open_bugs > 0) {
+              reason = `${r.open_bugs} open bug${r.open_bugs > 1 ? "s" : ""}`;
+            } else if (!r.last_tested_at) {
+              reason = "Never tested";
+            } else if (r.test_case_count === 0) {
+              reason = "No test coverage";
+            } else {
+              reason = `Priority: ${r.priority_score}`;
+            }
+            return {
+              route: r.route,
+              reason,
+              priorityScore: r.priority_score
+            };
+          });
+          setSuggestedRoutes(suggestions);
+        }
+        if (focusAreasRes.data && focusAreasRes.data.length > 0) {
+          setFocusAreas(focusAreasRes.data.slice(0, 3).map((fa) => ({
+            id: fa.id,
+            name: fa.name,
+            description: fa.description,
+            priority: fa.priority
+          })));
+        }
+      } catch (err) {
+        console.error("BugBear: Failed to load suggestions", err);
+      }
+    };
+    loadSuggestions();
+  }, [client, activeSession]);
   const handleMouseDown = (0, import_react2.useCallback)((e) => {
     if (!draggable || !panelPosition) return;
     const target = e.target;
@@ -325,27 +618,115 @@ function BugBearPanel({
     return null;
   }
   const handlePass = async () => {
-    if (!client || !displayedAssignment) return;
-    setSubmitting(true);
-    await client.submitReport({
-      type: "test_pass",
-      description: `Test passed: ${displayedAssignment.testCase.title}`,
-      assignmentId: displayedAssignment.id,
-      testCaseId: displayedAssignment.testCase.id,
-      appContext: getAppContext?.() || { currentRoute: window.location.pathname }
+    if (!displayedAssignment) return;
+    setPendingFeedbackStatus("passed");
+    setShowFeedbackPrompt(true);
+    setFeedbackRating(5);
+    setFeedbackNote("");
+    setFeedbackFlags({
+      isOutdated: false,
+      needsMoreDetail: false,
+      stepsUnclear: false,
+      expectedResultUnclear: false
     });
-    await refreshAssignments();
-    setSubmitting(false);
-    setJustPassed(true);
-    setTimeout(() => {
-      setJustPassed(false);
+  };
+  const handleFail = async () => {
+    if (!displayedAssignment) return;
+    setPendingFeedbackStatus("failed");
+    setShowFeedbackPrompt(true);
+    setFeedbackRating(3);
+    setFeedbackNote("");
+    setFeedbackFlags({
+      isOutdated: false,
+      needsMoreDetail: false,
+      stepsUnclear: false,
+      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");
-    }, 1200);
+    }
+    setSkipping(false);
   };
-  const handleFail = async () => {
-    setActiveTab("report");
-    setReportType("test_fail");
+  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);
+    const feedback = skipFeedback ? void 0 : {
+      rating: feedbackRating,
+      feedbackNote: feedbackNote.trim() || void 0,
+      isOutdated: feedbackFlags.isOutdated,
+      needsMoreDetail: feedbackFlags.needsMoreDetail,
+      stepsUnclear: feedbackFlags.stepsUnclear,
+      expectedResultUnclear: feedbackFlags.expectedResultUnclear
+    };
+    if (pendingFeedbackStatus === "passed") {
+      await client.submitReport({
+        type: "test_pass",
+        description: `Test passed: ${displayedAssignment.testCase.title}`,
+        assignmentId: displayedAssignment.id,
+        testCaseId: displayedAssignment.testCase.id,
+        appContext: getAppContext?.() || { currentRoute: window.location.pathname }
+      });
+      if (feedback) {
+        await client.submitTestFeedback({
+          testCaseId: displayedAssignment.testCase.id,
+          assignmentId: displayedAssignment.id,
+          feedback,
+          timeToCompleteSeconds: assignmentElapsedTime || void 0
+        });
+      }
+      await refreshAssignments();
+      setSubmitting(false);
+      setShowFeedbackPrompt(false);
+      setPendingFeedbackStatus(null);
+      setJustPassed(true);
+      setTimeout(() => {
+        setJustPassed(false);
+        setSelectedTestId(null);
+        setTestView("detail");
+      }, 1200);
+    } else if (pendingFeedbackStatus === "failed") {
+      if (feedback) {
+        await client.submitTestFeedback({
+          testCaseId: displayedAssignment.testCase.id,
+          assignmentId: displayedAssignment.id,
+          feedback,
+          timeToCompleteSeconds: assignmentElapsedTime || void 0
+        });
+      }
+      setSubmitting(false);
+      setShowFeedbackPrompt(false);
+      setPendingFeedbackStatus(null);
+      setActiveTab("report");
+      setReportType("test_fail");
+    }
+  };
+  const handleSkipFeedback = () => {
+    handleSubmitFeedback(true);
   };
   const handleSubmitReport = async () => {
     if (!client || !description.trim()) return;
@@ -438,6 +819,135 @@ function BugBearPanel({
     }
     setSavingProfile(false);
   };
+  const handleStartSession = async () => {
+    setStartingSession(true);
+    const result = await startSession({
+      focusArea: sessionFocusArea.trim() || void 0,
+      platform: sessionPlatform
+    });
+    if (result.success) {
+      setSessionFocusArea("");
+    }
+    setStartingSession(false);
+  };
+  const handleEndSession = async () => {
+    setEndingSession(true);
+    const result = await endSession(sessionNotes.trim() || void 0);
+    if (result.success) {
+      setSessionNotes("");
+      setShowEndConfirm(false);
+    }
+    setEndingSession(false);
+  };
+  const handleAddFinding = async () => {
+    if (!findingTitle.trim()) return;
+    setAddingFinding(true);
+    const result = await addFinding({
+      type: findingType,
+      title: findingTitle.trim(),
+      description: findingDescription.trim() || void 0,
+      severity: findingType === "bug" ? findingSeverity : void 0,
+      route: typeof window !== "undefined" ? window.location.pathname : void 0
+    });
+    if (result.success) {
+      setFindingTitle("");
+      setFindingDescription("");
+      setFindingType("bug");
+      setFindingSeverity("medium");
+      setShowAddFinding(false);
+    }
+    setAddingFinding(false);
+  };
+  const formatElapsedTime = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor(seconds % 3600 / 60);
+    const s = seconds % 60;
+    if (h > 0) {
+      return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+    }
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  };
+  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);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -460,22 +970,22 @@ function BugBearPanel({
             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",
+            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__ */ (0, import_jsx_runtime2.jsx)(BugBearIcon, { size: 24 }),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: "BugBear" }),
-              pendingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "bg-white text-purple-600 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
+              pendingCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "bg-white text-blue-400 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
             ]
           }
         ),
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-80 bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden", children: [
+        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "div",
             {
               "data-drag-handle": true,
               onDoubleClick: handleDoubleClick,
-              className: "bg-purple-600 text-white px-4 py-3 flex items-center justify-between",
+              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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -483,13 +993,13 @@ function BugBearPanel({
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [
                       "BugBear",
-                      draggable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-purple-300 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
+                      draggable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-zinc-500 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                       "button",
                       {
                         onClick: handleOpenProfile,
-                        className: "text-purple-200 text-xs flex items-center gap-1 hover:text-white transition-colors",
+                        className: "text-zinc-400 text-xs flex items-center gap-1 hover:text-white transition-colors",
                         children: [
                           testerInfo?.name,
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px]", children: "\u270E" })
@@ -502,30 +1012,52 @@ function BugBearPanel({
                   "button",
                   {
                     onClick: () => setCollapsed(true),
-                    className: "p-1 hover:bg-purple-500 rounded",
+                    className: "p-1 hover:bg-zinc-800 rounded",
                     children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex border-b border-gray-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex border-b border-zinc-800 bg-zinc-900", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "button",
               {
                 onClick: () => setActiveTab("tests"),
-                className: `flex-1 px-4 py-2 text-sm font-medium transition-colors ${activeTab === "tests" ? "text-purple-600 border-b-2 border-purple-600" : "text-gray-500 hover:text-gray-700"}`,
+                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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute top-2 ml-14 w-2 h-2 bg-green-500 rounded-full animate-pulse" })
+                ]
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
                 onClick: () => setActiveTab("report"),
-                className: `flex-1 px-4 py-2 text-sm font-medium transition-colors ${activeTab === "report" ? "text-purple-600 border-b-2 border-purple-600" : "text-gray-500 hover:text-gray-700"}`,
+                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"
               }
             )
@@ -533,59 +1065,202 @@ function BugBearPanel({
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
             activeTab === "tests" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: assignments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u2705" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-600 mt-2 font-medium", children: "All caught up!" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-400 text-sm", children: "No tests assigned" })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-400 mt-2 font-medium", children: "All caught up!" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-sm", children: "No tests assigned" })
             ] }) : testView === "list" ? (
-              /* List View - Show all tests */
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs font-medium text-gray-500", children: [
-                  assignments.length,
-                  " test",
-                  assignments.length !== 1 ? "s" : "",
-                  " assigned"
-                ] }) }),
-                assignments.map((assignment) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "button",
-                  {
-                    onClick: () => {
-                      setSelectedTestId(assignment.id);
-                      setTestView("detail");
-                      setShowSteps(false);
+              /* List View - Show tests grouped by folder */
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mb-2 px-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs font-medium text-zinc-500", children: [
+                    assignments.length,
+                    " test",
+                    assignments.length !== 1 ? "s" : "",
+                    " assigned"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-green-400", children: [
+                      "\u2705 ",
+                      assignments.filter((a) => a.status === "passed").length
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-red-400", children: [
+                      "\u274C ",
+                      assignments.filter((a) => a.status === "failed").length
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border border-zinc-700 rounded-lg overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                      "button",
+                      {
+                        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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm", children: isCollapsed ? "\u{1F4C1}" : "\u{1F4C2}" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium text-sm text-zinc-100", children: folder.group?.name || "Other Tests" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs text-zinc-500", children: [
+                              "(",
+                              completedCount,
+                              "/",
+                              folder.stats.total,
+                              ")"
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-16 h-1.5 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                              "div",
+                              {
+                                className: "h-full bg-green-500 transition-all",
+                                style: { width: `${completedCount / folder.stats.total * 100}%` }
+                              }
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-zinc-500 text-xs", children: isCollapsed ? "\u25B6" : "\u25BC" })
+                          ] })
+                        ]
+                      }
+                    ),
+                    !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "divide-y divide-zinc-800", children: folder.assignments.map((assignment) => {
+                      const statusBadge = getStatusBadge(assignment.status);
+                      return /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between mb-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-mono text-zinc-500", children: assignment.testCase.testKey }),
+                                assignment.isVerification && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${statusBadge.className}`, children: [
+                                  statusBadge.icon,
+                                  " ",
+                                  statusBadge.label
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-medium text-zinc-100 text-sm line-clamp-2", children: assignment.testCase.title }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mt-1 text-xs text-zinc-500", children: [
+                              assignment.testCase.track && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                "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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-blue-400 font-medium", children: "\u2022 Current" })
+                            ] })
+                          ]
+                        },
+                        assignment.id
+                      );
+                    }) })
+                  ] }, groupId);
+                })
+              ] })
+            ) : showFeedbackPrompt && displayedAssignment ? (
+              /* Feedback prompt after completing a test */
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-3xl", children: pendingFeedbackStatus === "passed" ? "\u2713" : "\u2717" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-400" : "text-red-400"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-blue-950/30 border border-blue-900 rounded-lg p-3 mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-blue-300 text-sm font-medium mb-1", children: "Help us improve this test" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-blue-400 text-xs", children: "Your feedback shapes better tests for everyone." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "How was this test?" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center gap-1 justify-center", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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"
                     },
-                    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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between mb-1", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-mono text-gray-500", children: assignment.testCase.testKey }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-medium text-gray-900 text-sm line-clamp-2", children: assignment.testCase.title }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-400", children: [
-                        assignment.testCase.track && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                          "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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-purple-600 font-medium", children: "\u2022 Current" })
-                      ] })
-                    ]
-                  },
-                  assignment.id
-                ))
+                    star
+                  )) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "What could be improved?" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Suggestions? (optional)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-5xl", children: "\u2713" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-green-600 mt-3 font-semibold text-lg", children: "Passed!" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-400 text-sm mt-1", children: "Loading next test..." })
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-green-400 mt-3 font-semibold text-lg", children: "Passed!" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-sm mt-1", children: "Loading next test..." })
               ] })
             ) : displayedAssignment ? (
               /* Detail View - Show single test */
@@ -597,7 +1272,7 @@ function BugBearPanel({
                       setTestView("list");
                       setSelectedTestId(null);
                     },
-                    className: "flex items-center gap-1 text-xs text-purple-600 font-medium hover:text-purple-700 mb-3",
+                    className: "flex items-center gap-1 text-xs text-blue-400 font-medium hover:text-blue-300 mb-2",
                     children: [
                       "\u2190 All Tests (",
                       assignments.length,
@@ -605,9 +1280,53 @@ function BugBearPanel({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
+                (() => {
+                  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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3 p-2 bg-blue-950/30 rounded-lg", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-medium text-blue-300", children: currentGroup ? `\u{1F4C1} ${currentGroup.name}` : "\u{1F4CB} All Tests" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs text-blue-400", children: [
+                        completed,
+                        "/",
+                        total,
+                        " complete"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-2 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        className: "h-full bg-blue-500 transition-all duration-300",
+                        style: { width: `${progressPercent}%` }
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-between mt-1 text-[10px] text-blue-400", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                        "\u2705 ",
+                        groupAssignments.filter((a) => a.status === "passed").length,
+                        " passed"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                        "\u274C ",
+                        groupAssignments.filter((a) => a.status === "failed").length,
+                        " failed"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                        "\u23ED\uFE0F ",
+                        groupAssignments.filter((a) => a.status === "skipped").length,
+                        " skipped"
+                      ] })
+                    ] })
+                  ] });
+                })(),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between mb-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-mono text-gray-500", children: displayedAssignment.testCase.testKey }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-mono text-zinc-500", children: displayedAssignment.testCase.testKey }),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
                       displayedAssignment.testCase.track && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "span",
@@ -617,16 +1336,24 @@ function BugBearPanel({
                           children: templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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 })
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-medium text-gray-900 text-sm mb-1", children: displayedAssignment.testCase.title }),
-                  displayedAssignment.testCase.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { className: "font-medium text-zinc-100 text-sm mb-1", children: displayedAssignment.testCase.title }),
+                  displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "relative flex h-2 w-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: "Testing" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono", children: formatElapsedTime(assignmentElapsedTime) })
+                  ] }),
+                  displayedAssignment.testCase.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
                   displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ (0, import_jsx_runtime2.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",
+                      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__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Go to test location" }),
                         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u2192" })
@@ -649,7 +1376,7 @@ function BugBearPanel({
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: info.icon }),
                             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: info.name }),
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-gray-500", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-zinc-500", children: [
                               "\u2022 ",
                               info.action
                             ] })
@@ -660,7 +1387,7 @@ function BugBearPanel({
                         "button",
                         {
                           onClick: () => setShowSteps(!showSteps),
-                          className: "text-purple-600 text-xs font-medium hover:text-purple-700 flex items-center gap-1",
+                          className: "text-blue-400 text-xs font-medium hover:text-blue-300 flex items-center gap-1",
                           children: [
                             showSteps ? "\u25BC" : "\u25B6",
                             " ",
@@ -669,10 +1396,10 @@ function BugBearPanel({
                         }
                       ),
                       showSteps && template === "steps" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-2 space-y-2", children: steps.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2 text-xs", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-700", children: step.action }),
-                          step.expectedResult && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-gray-400 mt-0.5", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-300", children: step.action }),
+                          step.expectedResult && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-zinc-500 mt-0.5", children: [
                             "\u2192 ",
                             step.expectedResult
                           ] })
@@ -691,39 +1418,39 @@ function BugBearPanel({
                               }
                               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"}`,
+                            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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-700" : "text-gray-700"}`, children: step.action })
+                              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-400" : "text-zinc-300"}`, children: step.action })
                             ]
                           },
                           idx
                         )),
                         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mt-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-400", children: "Tap to check off each item." }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500", children: "Tap to check off each item." }),
                           Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
                               onClick: () => setCriteriaResults({}),
-                              className: "text-xs text-gray-400 hover:text-red-500 transition-colors",
+                              className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
                               children: "\u21BA Reset"
                             }
                           )
                         ] })
                       ] }),
                       showSteps && template === "rubric" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 space-y-2", children: [
-                        steps.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-white p-2 rounded border border-gray-200", children: [
+                        steps.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-800 p-2 rounded border border-zinc-700", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 text-xs mb-1", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-5 h-5 rounded bg-purple-100 text-purple-700 flex items-center justify-center font-medium", children: idx + 1 }),
-                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-900 font-medium flex-1", children: step.action })
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-100 font-medium flex-1", children: step.action })
                           ] }),
-                          step.expectedResult && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 ml-7 mb-2", children: step.expectedResult }),
+                          step.expectedResult && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500 ml-7 mb-2", children: step.expectedResult }),
                           rubricMode === "pass_fail" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2 ml-7", children: [
                             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "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"}`,
+                                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"
                               }
                             ),
@@ -731,7 +1458,7 @@ function BugBearPanel({
                               "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"}`,
+                                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"
                               }
                             )
@@ -740,28 +1467,28 @@ function BugBearPanel({
                             "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"}`,
+                              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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mt-2", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-400", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
                               onClick: () => setCriteriaResults({}),
-                              className: "text-xs text-gray-400 hover:text-red-500 transition-colors",
+                              className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
                               children: "\u21BA Reset"
                             }
                           )
                         ] })
                       ] }),
-                      showSteps && template === "freeform" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 p-2 bg-amber-50 rounded border border-amber-200 text-xs", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-amber-800 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-amber-700", children: "Review the area described above and note:" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("ul", { className: "text-amber-700 mt-1 ml-4 list-disc", children: [
+                      showSteps && template === "freeform" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-2 p-2 bg-amber-900/20 rounded border border-amber-800 text-xs", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-amber-300 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-amber-400", children: "Review the area described above and note:" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("ul", { className: "text-amber-400 mt-1 ml-4 list-disc", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: "What works well" }),
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: "Issues or concerns" }),
                           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: "Suggestions" })
@@ -769,7 +1496,7 @@ function BugBearPanel({
                       ] })
                     ] });
                   })(),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-3 p-2 bg-green-50 rounded text-xs text-green-700", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-3 p-2 bg-green-900/20 rounded text-xs text-green-400", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:" }),
                     " ",
                     displayedAssignment.testCase.expectedResult
@@ -780,26 +1507,507 @@ function BugBearPanel({
                     "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",
+                      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__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsx)(
                     "button",
                     {
                       onClick: handlePass,
-                      disabled: submitting,
+                      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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: () => setShowSkipModal(false), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-800 rounded-xl p-4 w-72 shadow-xl border border-zinc-700", onClick: (e) => e.stopPropagation(), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100 mb-3", children: "Skip Test" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500 mb-3", children: "Please select a reason for skipping this test." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-2 mb-4", children: skipReasonOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "font-medium text-sm", children: option.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-xs text-zinc-500", children: option.description })
+                      ]
+                    },
+                    option.value
+                  )) }),
+                  selectedSkipReason === "other" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Notes (required)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsx)("div", { children: messageView === "compose" ? (
+              /* Compose New Message */
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100", children: "New Message" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-xs mt-1", children: "Send a message to the QA team" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Subject" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Message" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mb-4 pb-3 border-b border-zinc-700", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-lg", children: getThreadTypeIcon(selectedThread.threadType) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100 text-sm leading-tight", children: selectedThread.subject || "No subject" })
+                ] }),
+                loadingMessages ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-sm", children: "Loading messages..." }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-3 mb-4", children: threadMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "div",
+                  {
+                    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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("p", { className: `text-sm ${message.senderType === "tester" ? "text-blue-100" : "text-zinc-200"}`, children: message.content }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `text-[10px] mt-1 ${message.senderType === "tester" ? "text-blue-400/60" : "text-zinc-500"}`, children: formatMessageTime(message.createdAt) })
+                    ]
+                  },
+                  message.id
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2 pt-3 border-t border-zinc-700", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u{1F4AC}" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-400 mt-2 font-medium", children: "No messages yet" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-sm", children: "Start a conversation or wait for messages from admins" })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0 flex-1", children: [
+                          thread.isPinned && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs", children: "\u{1F4CC}" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs", children: getThreadTypeIcon(thread.threadType) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-xs text-zinc-500 truncate", children: [
+                        thread.lastMessage.senderName,
+                        ": ",
+                        thread.lastMessage.content
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mt-1.5", children: [
+                        thread.unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] text-zinc-600", children: "Read" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] text-zinc-600", children: formatRelativeTime(thread.lastMessageAt) })
+                      ] })
+                    ]
+                  },
+                  thread.id
+                )) })
+              ] })
+            ) }),
+            activeTab === "session" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: !activeSession ? (
+              /* Start Session View */
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u{1F50D}" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100 mt-2", children: "Exploratory QA Session" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
+                ] }),
+                focusAreas.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: [
+                    "\u{1F4CC} Focus Areas",
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-1 text-[10px] text-zinc-500 font-normal", children: "from your team" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1.5", children: focusAreas.map((area) => /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: area.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[10px] text-zinc-500 mt-0.5 line-clamp-2", children: area.description })
+                      ]
+                    },
+                    area.id
+                  )) })
+                ] }),
+                suggestedRoutes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1.5 max-h-32 overflow-y-auto", children: suggestedRoutes.map((suggestion, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium truncate", children: suggestion.route }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Focus Area (optional)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Platform" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsx)(
+                  "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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u25B6" }),
+                      " Start Session"
+                    ] })
+                  }
+                )
+              ] })
+            ) : showEndConfirm ? (
+              /* End Session Confirmation */
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u270B" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100 mt-2", children: "End Session?" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-zinc-500 text-xs mt-1", children: [
+                    "Duration: ",
+                    formatElapsedTime(sessionElapsedTime),
+                    " \u2022 ",
+                    sessionFindings.length,
+                    " finding",
+                    sessionFindings.length !== 1 ? "s" : ""
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Session Notes (optional)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100 text-sm", children: "Add Finding" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: () => setShowAddFinding(false),
+                      className: "text-zinc-500 hover:text-zinc-400",
+                      children: "\u2715"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+                  "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-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
+                  },
+                  type
+                )) }),
+                findingType === "bug" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low", "observation"].map((sev) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Title *" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Details (optional)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    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"
+                  }
+                )
+              ] })
+            ) : (
+              /* Active Session View */
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-green-900/20 rounded-lg p-3 mb-3 border border-green-800", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium text-green-300 text-sm", children: "Session Active" })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono text-green-400 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
+                  ] }),
+                  activeSession.focusArea && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-green-400 text-xs mt-1", children: [
+                    "Focus: ",
+                    activeSession.focusArea
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  "button",
+                  {
+                    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__ */ (0, import_jsx_runtime2.jsx)("span", { children: "+" }),
+                      " Add Finding"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs font-medium text-zinc-500", children: [
+                    "Findings (",
+                    sessionFindings.length,
+                    ")"
+                  ] }) }),
+                  sessionFindings.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-4 bg-zinc-800 rounded-lg", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-xs", children: "No findings yet" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-500 text-xs", children: "Explore and add findings as you go" })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-2 max-h-32 overflow-y-auto", children: sessionFindings.map((finding) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: finding.type === "bug" ? "\u{1F41B}" : finding.type === "concern" ? "\u26A0\uFE0F" : finding.type === "suggestion" ? "\u{1F4A1}" : "\u2753" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "font-medium text-zinc-100 truncate", children: finding.title }),
+                          finding.severity && finding.type === "bug" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    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"
+                  }
+                )
+              ] })
+            ) }),
             activeTab === "report" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u{1F389}" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-600 mt-2 font-medium", children: "Report submitted!" })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-400 mt-2 font-medium", children: "Report submitted!" })
             ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2 mb-4", children: [
                 { type: "bug", label: "\u{1F41B} Bug", color: "red" },
@@ -809,25 +2017,25 @@ function BugBearPanel({
                 "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"}`,
+                  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
               )) }),
               (reportType === "bug" || reportType === "test_fail") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Severity" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low"].map((sev) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "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"}`,
+                    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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "What happened?" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "What happened?" }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "textarea",
                   {
@@ -835,7 +2043,7 @@ function BugBearPanel({
                     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"
+                    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"
                   }
                 )
               ] }),
@@ -844,19 +2052,19 @@ function BugBearPanel({
                 {
                   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",
+                  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"
                 }
               )
             ] }) })
           ] }),
-          showProfileOverlay && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "absolute inset-0 bg-white z-50 flex flex-col rounded-xl overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-purple-600 text-white px-4 py-3 flex items-center justify-between", children: [
+          showProfileOverlay && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "button",
                 {
                   onClick: handleCloseProfile,
-                  className: "text-sm text-purple-200 hover:text-white transition-colors",
+                  className: "text-sm text-zinc-400 hover:text-white transition-colors",
                   children: "\u2190 Back"
                 }
               ),
@@ -866,23 +2074,23 @@ function BugBearPanel({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 overflow-y-auto p-4", children: profileSaved ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u2705" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-gray-600 mt-2 font-medium", children: "Profile saved!" })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-400 mt-2 font-medium", children: "Profile saved!" })
             ] }) : profileEditing ? (
               /* Edit Profile Form */
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-gray-900", children: "Edit Profile" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100", children: "Edit Profile" }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "button",
                     {
                       onClick: handleCancelEditProfile,
-                      className: "text-sm text-gray-500 hover:text-gray-700",
+                      className: "text-sm text-zinc-500 hover:text-zinc-300",
                       children: "Cancel"
                     }
                   )
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Name" }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "input",
                     {
@@ -890,27 +2098,27 @@ function BugBearPanel({
                       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"
+                      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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Primary Email" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-3 py-2 bg-gray-100 rounded-lg", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-gray-700", children: testerInfo?.email }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-400 mt-0.5", children: "Main communication email" })
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Primary Email" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-3 py-2 bg-zinc-800 rounded-lg", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-zinc-300", children: testerInfo?.email }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5", children: "Main communication email" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Additional Testing Emails" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 mb-2", children: "Add other emails you use to test on different accounts" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Additional Testing Emails" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500 mb-2", children: "Add other emails you use to test on different accounts" }),
                   profileAdditionalEmails.map((email) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1 px-3 py-1.5 bg-purple-50 text-purple-700 text-sm rounded-full", children: email }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1 px-3 py-1.5 bg-blue-950/30 text-blue-300 text-sm rounded-full", children: email }),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "button",
                       {
                         onClick: () => handleRemoveEmail(email),
-                        className: "text-purple-400 hover:text-red-500 text-sm",
+                        className: "text-blue-400 hover:text-red-500 text-sm",
                         children: "\u2715"
                       }
                     )
@@ -923,7 +2131,7 @@ function BugBearPanel({
                         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",
+                        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()
                       }
                     ),
@@ -932,15 +2140,15 @@ function BugBearPanel({
                       {
                         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",
+                        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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Testing Platforms" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500 mb-2", children: "Select the platforms you can test on" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Testing Platforms" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500 mb-2", children: "Select the platforms you can test on" }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-2", children: [
                     { key: "ios", label: "\u{1F4F1} iOS" },
                     { key: "android", label: "\u{1F916} Android" },
@@ -949,7 +2157,7 @@ function BugBearPanel({
                     "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"}`,
+                      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
@@ -968,31 +2176,31 @@ function BugBearPanel({
             ) : (
               /* Profile View */
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4 text-center mb-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-16 h-16 mx-auto bg-purple-600 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-gray-900", children: testerInfo?.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-gray-500", children: testerInfo?.email }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-gray-200", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-800 rounded-lg p-4 text-center mb-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-16 h-16 mx-auto bg-blue-500 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "font-semibold text-zinc-100", children: testerInfo?.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-zinc-500", children: testerInfo?.email }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-zinc-700", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-purple-600", children: testerInfo?.assignedTests || 0 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500", children: "Assigned" })
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.assignedTests || 0 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500", children: "Assigned" })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-purple-600", children: testerInfo?.completedTests || 0 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-gray-500", children: "Completed" })
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.completedTests || 0 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-zinc-500", children: "Completed" })
                     ] })
                   ] })
                 ] }),
-                (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
-                  testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-gray-700", children: email }, email))
+                (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
+                  testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-zinc-300", children: email }, email))
                 ] }),
-                (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
+                (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-wrap gap-2", children: testerInfo?.platforms?.map((platform) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "span",
                     {
-                      className: "px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded-full font-medium",
+                      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
@@ -1002,14 +2210,31 @@ function BugBearPanel({
                   "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",
+                    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__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+              threads.length,
+              " thread",
+              threads.length !== 1 ? "s" : "",
+              " \xB7 ",
+              unreadCount,
+              " unread"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: refreshThreads,
+                className: "hover:text-zinc-300",
+                children: "\u21BB Refresh"
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
               pendingCount,
               " pending \xB7 ",
@@ -1020,11 +2245,11 @@ function BugBearPanel({
               "button",
               {
                 onClick: refreshAssignments,
-                className: "hover:text-gray-600",
+                className: "hover:text-zinc-300",
                 children: "\u21BB Refresh"
               }
             )
-          ] })
+          ] }) })
         ] })
       ]
     }