@bbearai/react 0.1.8 → 0.1.9

package/dist/index.mjs

@@ -28,7 +28,17 @@ var BugBearContext = createContext({
   endSession: async () => ({ success: false }),
   addFinding: async () => ({ success: false }),
   refreshSession: async () => {
-  }
+  },
+  // Messaging
+  threads: [],
+  unreadCount: 0,
+  refreshThreads: async () => {
+  },
+  getThreadMessages: async () => [],
+  sendMessage: async () => false,
+  markAsRead: async () => {
+  },
+  createThread: async () => ({ success: false })
 });
 function useBugBear() {
   return useContext(BugBearContext);
@@ -43,6 +53,8 @@ function BugBearProvider({ config, children, enabled = true }) {
   const hasInitialized = useRef(false);
   const [activeSession, setActiveSession] = useState(null);
   const [sessionFindings, setSessionFindings] = useState([]);
+  const [threads, setThreads] = useState([]);
+  const [unreadCount, setUnreadCount] = useState(0);
   const refreshAssignments = useCallback(async () => {
     if (!client) return;
     const newAssignments = await client.getAssignedTests();
@@ -87,6 +99,38 @@ function BugBearProvider({ config, children, enabled = true }) {
     }
     return result;
   }, [client, activeSession]);
+  const refreshThreads = useCallback(async () => {
+    if (!client) return;
+    const newThreads = await client.getThreadsForTester();
+    setThreads(newThreads);
+    const totalUnread = newThreads.reduce((sum, t) => sum + t.unreadCount, 0);
+    setUnreadCount(totalUnread);
+  }, [client]);
+  const getThreadMessages = useCallback(async (threadId) => {
+    if (!client) return [];
+    return client.getThreadMessages(threadId);
+  }, [client]);
+  const sendMessage = useCallback(async (threadId, content) => {
+    if (!client) return false;
+    const success = await client.sendMessage(threadId, content);
+    if (success) {
+      await refreshThreads();
+    }
+    return success;
+  }, [client, refreshThreads]);
+  const markAsRead = useCallback(async (threadId) => {
+    if (!client) return;
+    await client.markThreadAsRead(threadId);
+    await refreshThreads();
+  }, [client, refreshThreads]);
+  const createThread = useCallback(async (options) => {
+    if (!client) return { success: false, error: "Client not initialized" };
+    const result = await client.createThread(options);
+    if (result.success) {
+      await refreshThreads();
+    }
+    return result;
+  }, [client, refreshThreads]);
   const initializeBugBear = useCallback(async (bugBearClient) => {
     setIsLoading(true);
     try {
@@ -99,12 +143,16 @@ function BugBearProvider({ config, children, enabled = true }) {
       setTesterInfo(info);
       setIsTester(!!info);
       if (info && qaEnabled) {
-        const [newAssignments, session] = await Promise.all([
+        const [newAssignments, session, newThreads] = await Promise.all([
           bugBearClient.getAssignedTests(),
-          bugBearClient.getActiveSession()
+          bugBearClient.getActiveSession(),
+          bugBearClient.getThreadsForTester()
         ]);
         setAssignments(newAssignments);
         setActiveSession(session);
+        setThreads(newThreads);
+        const totalUnread = newThreads.reduce((sum, t) => sum + t.unreadCount, 0);
+        setUnreadCount(totalUnread);
         if (session) {
           const findings = await bugBearClient.getSessionFindings(session.id);
           setSessionFindings(findings);
@@ -170,7 +218,15 @@ function BugBearProvider({ config, children, enabled = true }) {
         startSession,
         endSession,
         addFinding,
-        refreshSession
+        refreshSession,
+        // Messaging
+        threads,
+        unreadCount,
+        refreshThreads,
+        getThreadMessages,
+        sendMessage,
+        markAsRead,
+        createThread
       },
       children
     }
@@ -178,7 +234,7 @@ function BugBearProvider({ config, children, enabled = true }) {
 }
 
 // src/BugBearPanel.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useMemo } from "react";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function BugBearIcon({ size = 24, className = "" }) {
   return /* @__PURE__ */ jsxs(
@@ -249,13 +305,77 @@ function BugBearPanel({
   defaultCollapsed = false,
   draggable = true
 }) {
-  const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate, updateTesterProfile, refreshTesterInfo, activeSession, sessionFindings, startSession, endSession, addFinding } = useBugBear();
+  const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate, updateTesterProfile, refreshTesterInfo, activeSession, sessionFindings, startSession, endSession, addFinding, threads, unreadCount, refreshThreads, getThreadMessages, sendMessage, markAsRead, createThread } = useBugBear();
   const [collapsed, setCollapsed] = useState2(defaultCollapsed);
   const [activeTab, setActiveTab] = useState2("tests");
   const [showSteps, setShowSteps] = useState2(false);
   const [testView, setTestView] = useState2("detail");
   const [selectedTestId, setSelectedTestId] = useState2(null);
+  const [messageView, setMessageView] = useState2("list");
+  const [selectedThread, setSelectedThread] = useState2(null);
+  const [threadMessages, setThreadMessages] = useState2([]);
+  const [replyText, setReplyText] = useState2("");
+  const [sendingReply, setSendingReply] = useState2(false);
+  const [loadingMessages, setLoadingMessages] = useState2(false);
+  const [composeSubject, setComposeSubject] = useState2("");
+  const [composeMessage, setComposeMessage] = useState2("");
+  const [sendingNewMessage, setSendingNewMessage] = useState2(false);
   const displayedAssignment = selectedTestId ? assignments.find((a) => a.id === selectedTestId) || currentAssignment : currentAssignment;
+  const groupedAssignments = useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const assignment of assignments) {
+      const groupId = assignment.testCase.group?.id || "ungrouped";
+      const group = assignment.testCase.group || null;
+      if (!groups.has(groupId)) {
+        groups.set(groupId, {
+          group,
+          assignments: [],
+          stats: { total: 0, passed: 0, failed: 0, pending: 0, skipped: 0 }
+        });
+      }
+      const folder = groups.get(groupId);
+      folder.assignments.push(assignment);
+      folder.stats.total++;
+      if (assignment.status === "passed") folder.stats.passed++;
+      else if (assignment.status === "failed") folder.stats.failed++;
+      else if (assignment.status === "skipped") folder.stats.skipped++;
+      else folder.stats.pending++;
+    }
+    const sortedGroups = Array.from(groups.values()).sort((a, b) => {
+      if (!a.group && !b.group) return 0;
+      if (!a.group) return 1;
+      if (!b.group) return -1;
+      return a.group.sortOrder - b.group.sortOrder;
+    });
+    return sortedGroups;
+  }, [assignments]);
+  const toggleFolderCollapse = useCallback2((groupId) => {
+    setCollapsedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  }, []);
+  const getStatusBadge = (status) => {
+    switch (status) {
+      case "passed":
+        return { icon: "\u2705", label: "Passed", className: "bg-green-900/30 text-green-400" };
+      case "failed":
+        return { icon: "\u274C", label: "Failed", className: "bg-red-900/30 text-red-400" };
+      case "skipped":
+        return { icon: "\u23ED\uFE0F", label: "Skipped", className: "bg-yellow-900/30 text-yellow-400" };
+      case "in_progress":
+        return { icon: "\u{1F504}", label: "In Progress", className: "bg-blue-900/30 text-blue-400" };
+      case "blocked":
+        return { icon: "\u{1F6AB}", label: "Blocked", className: "bg-orange-900/30 text-orange-400" };
+      default:
+        return { icon: "\u23F3", label: "Pending", className: "bg-zinc-700 text-zinc-400" };
+    }
+  };
   const [panelPosition, setPanelPosition] = useState2(null);
   const [isDragging, setIsDragging] = useState2(false);
   const dragStartRef = useRef2(null);
@@ -277,6 +397,10 @@ function BugBearPanel({
     expectedResultUnclear: false
   });
   const [criteriaResults, setCriteriaResults] = useState2({});
+  const [showSkipModal, setShowSkipModal] = useState2(false);
+  const [selectedSkipReason, setSelectedSkipReason] = useState2(null);
+  const [skipNotes, setSkipNotes] = useState2("");
+  const [skipping, setSkipping] = useState2(false);
   const [profileEditing, setProfileEditing] = useState2(false);
   const [profileName, setProfileName] = useState2("");
   const [profileAdditionalEmails, setProfileAdditionalEmails] = useState2([]);
@@ -285,6 +409,7 @@ function BugBearPanel({
   const [savingProfile, setSavingProfile] = useState2(false);
   const [profileSaved, setProfileSaved] = useState2(false);
   const [showProfileOverlay, setShowProfileOverlay] = useState2(false);
+  const [collapsedFolders, setCollapsedFolders] = useState2(/* @__PURE__ */ new Set());
   const [startingSession, setStartingSession] = useState2(false);
   const [sessionFocusArea, setSessionFocusArea] = useState2("");
   const [sessionPlatform, setSessionPlatform] = useState2("web");
@@ -488,6 +613,35 @@ function BugBearPanel({
       expectedResultUnclear: false
     });
   };
+  const handleOpenSkipModal = () => {
+    setShowSkipModal(true);
+    setSelectedSkipReason(null);
+    setSkipNotes("");
+  };
+  const handleSkip = async () => {
+    if (!client || !displayedAssignment || !selectedSkipReason) return;
+    setSkipping(true);
+    const result = await client.skipAssignment(
+      displayedAssignment.id,
+      selectedSkipReason,
+      skipNotes.trim() || void 0
+    );
+    if (result.success) {
+      await refreshAssignments();
+      setShowSkipModal(false);
+      setSelectedSkipReason(null);
+      setSkipNotes("");
+      setSelectedTestId(null);
+      setTestView("detail");
+    }
+    setSkipping(false);
+  };
+  const skipReasonOptions = [
+    { value: "blocked", label: "Blocked", description: "Environment issue or external blocker" },
+    { value: "not_ready", label: "Not Ready", description: "Feature not yet implemented" },
+    { value: "dependency", label: "Dependency", description: "Waiting on another test or task" },
+    { value: "other", label: "Other", description: "Other reason (please specify)" }
+  ];
   const handleSubmitFeedback = async (skipFeedback = false) => {
     if (!client || !displayedAssignment) return;
     setSubmitting(true);
@@ -683,6 +837,87 @@ function BugBearPanel({
     }
     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__ */ jsxs(
     "div",
     {
@@ -705,22 +940,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__ */ jsx2(BugBearIcon, { size: 24 }),
               /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "BugBear" }),
-              pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: "bg-white text-purple-600 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
+              pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: "bg-white text-blue-400 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
             ]
           }
         ),
-        !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-white rounded-xl shadow-2xl border border-gray-200 overflow-hidden", children: [
+        !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", children: [
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -728,13 +963,13 @@ function BugBearPanel({
                   /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [
                       "BugBear",
-                      draggable && /* @__PURE__ */ jsx2("span", { className: "text-purple-300 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
+                      draggable && /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
                     ] }),
                     /* @__PURE__ */ jsxs(
                       "button",
                       {
                         onClick: handleOpenProfile,
-                        className: "text-purple-200 text-xs flex items-center gap-1 hover:text-white transition-colors",
+                        className: "text-zinc-400 text-xs flex items-center gap-1 hover:text-white transition-colors",
                         children: [
                           testerInfo?.name,
                           /* @__PURE__ */ jsx2("span", { className: "text-[10px]", children: "\u270E" })
@@ -747,23 +982,33 @@ function BugBearPanel({
                   "button",
                   {
                     onClick: () => setCollapsed(true),
-                    className: "p-1 hover:bg-purple-500 rounded",
+                    className: "p-1 hover:bg-zinc-800 rounded",
                     children: /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 p-2 bg-gray-50 border-b border-gray-200", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex border-b border-zinc-800 bg-zinc-900", children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
                 onClick: () => setActiveTab("tests"),
-                className: `flex-1 py-2 px-3 rounded-lg text-sm font-semibold transition-all flex items-center justify-center gap-1.5 ${activeTab === "tests" ? "bg-purple-600 text-white shadow-sm" : "bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,
+                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: [
-                  /* @__PURE__ */ jsx2("span", { children: "\u{1F4CB}" }),
-                  /* @__PURE__ */ jsx2("span", { children: "Run Tests" }),
-                  pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: `ml-1 px-1.5 py-0.5 rounded-full text-xs ${activeTab === "tests" ? "bg-purple-500 text-white" : "bg-purple-100 text-purple-600"}`, children: pendingCount })
+                  "Tests ",
+                  pendingCount > 0 && `(${pendingCount})`
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setActiveTab("messages"),
+                className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 relative border-b-2 ${activeTab === "messages" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
+                children: [
+                  "Messages",
+                  unreadCount > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute top-1.5 ml-16 min-w-[18px] h-[18px] px-1 bg-blue-500 rounded-full text-[10px] text-white font-bold flex items-center justify-center", children: unreadCount })
                 ]
               }
             ),
@@ -771,100 +1016,165 @@ function BugBearPanel({
               "button",
               {
                 onClick: () => setActiveTab("session"),
-                className: `flex-1 py-2 px-3 rounded-lg text-sm font-semibold transition-all flex items-center justify-center gap-1.5 relative ${activeTab === "session" ? "bg-amber-500 text-white shadow-sm" : "bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,
+                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: [
-                  /* @__PURE__ */ jsx2("span", { children: "\u{1F50D}" }),
-                  /* @__PURE__ */ jsx2("span", { children: "Explore" }),
-                  activeSession && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white animate-pulse" })
+                  "Explore",
+                  activeSession && /* @__PURE__ */ jsx2("span", { className: "absolute top-2 ml-14 w-2 h-2 bg-green-500 rounded-full animate-pulse" })
                 ]
               }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => setActiveTab("report"),
+                className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 border-b-2 ${activeTab === "report" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
+                children: "Report"
+              }
             )
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "flex justify-center py-1.5 border-b border-gray-200 bg-white", children: /* @__PURE__ */ jsx2(
-            "button",
-            {
-              onClick: () => setActiveTab("report"),
-              className: `px-4 py-1 text-xs font-medium transition-colors rounded-full ${activeTab === "report" ? "bg-red-50 text-red-600 border border-red-200" : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"}`,
-              children: "\u{1F41B} Report Bug / Feedback"
-            }
-          ) }),
           /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
             activeTab === "tests" && /* @__PURE__ */ jsx2("div", { children: assignments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
               /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-600 mt-2 font-medium", children: "All caught up!" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-sm", children: "No tests assigned" })
+              /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "All caught up!" }),
+              /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "No tests assigned" })
             ] }) : testView === "list" ? (
-              /* List View - Show all tests */
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-gray-500", children: [
-                  assignments.length,
-                  " test",
-                  assignments.length !== 1 ? "s" : "",
-                  " assigned"
-                ] }) }),
-                assignments.map((assignment) => /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => {
-                      setSelectedTestId(assignment.id);
-                      setTestView("detail");
-                      setShowSteps(false);
-                    },
-                    className: `w-full text-left p-3 rounded-lg border transition-colors ${assignment.id === currentAssignment?.id ? "bg-purple-50 border-purple-200" : "bg-gray-50 border-gray-200 hover:bg-gray-100"}`,
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-1", children: [
-                        /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-gray-500", children: assignment.testCase.testKey }),
-                        /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${assignment.testCase.priority === "P0" ? "bg-red-100 text-red-700" : assignment.testCase.priority === "P1" ? "bg-orange-100 text-orange-700" : "bg-gray-100 text-gray-600"}`, children: assignment.testCase.priority })
-                      ] }),
-                      /* @__PURE__ */ jsx2("h4", { className: "font-medium text-gray-900 text-sm line-clamp-2", children: assignment.testCase.title }),
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-400", children: [
-                        assignment.testCase.track && /* @__PURE__ */ jsx2(
-                          "span",
-                          {
-                            className: "px-1 py-0.5 rounded text-white",
-                            style: { backgroundColor: assignment.testCase.track.color },
-                            children: templateInfo[assignment.testCase.track.testTemplate || "steps"].icon
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs("span", { children: [
-                          assignment.testCase.steps.length,
-                          " ",
-                          assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"
-                        ] }),
-                        assignment.id === currentAssignment?.id && /* @__PURE__ */ jsx2("span", { className: "text-purple-600 font-medium", children: "\u2022 Current" })
-                      ] })
-                    ]
-                  },
-                  assignment.id
-                ))
+              /* List View - Show tests grouped by folder */
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 px-1", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
+                    assignments.length,
+                    " test",
+                    assignments.length !== 1 ? "s" : "",
+                    " assigned"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-green-400", children: [
+                      "\u2705 ",
+                      assignments.filter((a) => a.status === "passed").length
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-red-400", children: [
+                      "\u274C ",
+                      assignments.filter((a) => a.status === "failed").length
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
+                      "\u23F3 ",
+                      assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length
+                    ] })
+                  ] })
+                ] }),
+                groupedAssignments.map((folder) => {
+                  const groupId = folder.group?.id || "ungrouped";
+                  const isCollapsed = collapsedFolders.has(groupId);
+                  const completedCount = folder.stats.passed + folder.stats.failed + folder.stats.skipped;
+                  return /* @__PURE__ */ jsxs("div", { className: "border border-zinc-700 rounded-lg overflow-hidden", children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => toggleFolderCollapse(groupId),
+                        className: "w-full flex items-center justify-between p-2.5 bg-zinc-800 hover:bg-zinc-700 transition-colors",
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx2("span", { className: "text-sm", children: isCollapsed ? "\u{1F4C1}" : "\u{1F4C2}" }),
+                            /* @__PURE__ */ jsx2("span", { className: "font-medium text-sm text-zinc-100", children: folder.group?.name || "Other Tests" }),
+                            /* @__PURE__ */ jsxs("span", { className: "text-xs text-zinc-500", children: [
+                              "(",
+                              completedCount,
+                              "/",
+                              folder.stats.total,
+                              ")"
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx2("div", { className: "w-16 h-1.5 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
+                              "div",
+                              {
+                                className: "h-full bg-green-500 transition-all",
+                                style: { width: `${completedCount / folder.stats.total * 100}%` }
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", children: isCollapsed ? "\u25B6" : "\u25BC" })
+                          ] })
+                        ]
+                      }
+                    ),
+                    !isCollapsed && /* @__PURE__ */ jsx2("div", { className: "divide-y divide-zinc-800", children: folder.assignments.map((assignment) => {
+                      const statusBadge = getStatusBadge(assignment.status);
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => {
+                            setSelectedTestId(assignment.id);
+                            setTestView("detail");
+                            setShowSteps(false);
+                          },
+                          className: `w-full text-left p-3 transition-colors ${assignment.id === currentAssignment?.id ? "bg-blue-950/30" : "bg-zinc-900 hover:bg-zinc-800"}`,
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-1", children: [
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                                /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: assignment.testCase.testKey }),
+                                assignment.isVerification && /* @__PURE__ */ jsx2("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-900/30 text-green-400 font-medium", children: "\u{1F527} Verify" })
+                              ] }),
+                              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                                /* @__PURE__ */ jsxs("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${statusBadge.className}`, children: [
+                                  statusBadge.icon,
+                                  " ",
+                                  statusBadge.label
+                                ] }),
+                                /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${assignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : assignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: assignment.testCase.priority })
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm line-clamp-2", children: assignment.testCase.title }),
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-zinc-500", children: [
+                              assignment.testCase.track && /* @__PURE__ */ jsx2(
+                                "span",
+                                {
+                                  className: "px-1 py-0.5 rounded text-white",
+                                  style: { backgroundColor: assignment.testCase.track.color },
+                                  children: templateInfo[assignment.testCase.track.testTemplate || "steps"].icon
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs("span", { children: [
+                                assignment.testCase.steps.length,
+                                " ",
+                                assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"
+                              ] }),
+                              assignment.id === currentAssignment?.id && /* @__PURE__ */ jsx2("span", { className: "text-blue-400 font-medium", children: "\u2022 Current" })
+                            ] })
+                          ]
+                        },
+                        assignment.id
+                      );
+                    }) })
+                  ] }, groupId);
+                })
               ] })
             ) : showFeedbackPrompt && displayedAssignment ? (
               /* Feedback prompt after completing a test */
               /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
                 /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
                   /* @__PURE__ */ jsx2("span", { className: "text-3xl", children: pendingFeedbackStatus === "passed" ? "\u2713" : "\u2717" }),
-                  /* @__PURE__ */ jsx2("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-600" : "text-red-600"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
+                  /* @__PURE__ */ jsx2("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-400" : "text-red-400"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 border border-purple-100 rounded-lg p-3 mb-4", children: [
-                  /* @__PURE__ */ jsx2("p", { className: "text-purple-800 text-sm font-medium mb-1", children: "Help us improve this test" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-purple-600 text-xs", children: "Your feedback shapes better tests for everyone." })
+                /* @__PURE__ */ jsxs("div", { className: "bg-blue-950/30 border border-blue-900 rounded-lg p-3 mb-4", children: [
+                  /* @__PURE__ */ jsx2("p", { className: "text-blue-300 text-sm font-medium mb-1", children: "Help us improve this test" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-blue-400 text-xs", children: "Your feedback shapes better tests for everyone." })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-2", children: "How was this test?" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "How was this test?" }),
                   /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1 justify-center", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx2(
                     "button",
                     {
                       type: "button",
                       onClick: () => setFeedbackRating(star),
-                      className: `text-2xl transition-colors ${star <= feedbackRating ? "text-yellow-400" : "text-gray-300"} hover:text-yellow-400`,
+                      className: `text-2xl transition-colors ${star <= feedbackRating ? "text-yellow-400" : "text-zinc-600"} hover:text-yellow-400`,
                       children: "\u2605"
                     },
                     star
                   )) }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-center text-xs text-gray-500 mt-1", children: feedbackRating === 1 ? "Needs work" : feedbackRating === 2 ? "Could be better" : feedbackRating === 3 ? "Okay" : feedbackRating === 4 ? "Good" : "Great!" })
+                  /* @__PURE__ */ jsx2("p", { className: "text-center text-xs text-zinc-500 mt-1", children: feedbackRating === 1 ? "Needs work" : feedbackRating === 2 ? "Could be better" : feedbackRating === 3 ? "Okay" : feedbackRating === 4 ? "Good" : "Great!" })
                 ] }),
                 feedbackRating < 4 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-2", children: "What could be improved?" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "What could be improved?" }),
                   /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: [
                     { key: "stepsUnclear", label: "Steps unclear" },
                     { key: "expectedResultUnclear", label: "Expected result unclear" },
@@ -875,21 +1185,21 @@ function BugBearPanel({
                     {
                       type: "button",
                       onClick: () => setFeedbackFlags((prev) => ({ ...prev, [key]: !prev[key] })),
-                      className: `px-2 py-1.5 rounded text-xs font-medium border transition-colors ${feedbackFlags[key] ? "bg-purple-100 border-purple-300 text-purple-700" : "bg-white border-gray-200 text-gray-600 hover:border-purple-200"}`,
+                      className: `px-2 py-1.5 rounded text-xs font-medium border transition-colors ${feedbackFlags[key] ? "bg-blue-900/50 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:border-blue-800"}`,
                       children: label
                     },
                     key
                   )) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Suggestions? (optional)" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Suggestions? (optional)" }),
                   /* @__PURE__ */ jsx2(
                     "textarea",
                     {
                       value: feedbackNote,
                       onChange: (e) => setFeedbackNote(e.target.value),
                       placeholder: "How could this test be improved?",
-                      className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent",
+                      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
                     }
                   )
@@ -900,7 +1210,7 @@ function BugBearPanel({
                     {
                       onClick: handleSkipFeedback,
                       disabled: submitting,
-                      className: "flex-1 px-3 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors disabled:opacity-50",
+                      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"
                     }
                   ),
@@ -909,7 +1219,7 @@ function BugBearPanel({
                     {
                       onClick: () => handleSubmitFeedback(false),
                       disabled: submitting,
-                      className: "flex-1 px-3 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50",
+                      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"
                     }
                   )
@@ -919,8 +1229,8 @@ function BugBearPanel({
               /* Success state after passing */
               /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
                 /* @__PURE__ */ jsx2("span", { className: "text-5xl", children: "\u2713" }),
-                /* @__PURE__ */ jsx2("p", { className: "text-green-600 mt-3 font-semibold text-lg", children: "Passed!" }),
-                /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-sm mt-1", children: "Loading next test..." })
+                /* @__PURE__ */ jsx2("p", { className: "text-green-400 mt-3 font-semibold text-lg", children: "Passed!" }),
+                /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm mt-1", children: "Loading next test..." })
               ] })
             ) : displayedAssignment ? (
               /* Detail View - Show single test */
@@ -932,7 +1242,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,
@@ -940,9 +1250,53 @@ function BugBearPanel({
                     ]
                   }
                 ),
-                /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-3 p-2 bg-blue-950/30 rounded-lg", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium text-blue-300", children: currentGroup ? `\u{1F4C1} ${currentGroup.name}` : "\u{1F4CB} All Tests" }),
+                      /* @__PURE__ */ jsxs("span", { className: "text-xs text-blue-400", children: [
+                        completed,
+                        "/",
+                        total,
+                        " complete"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx2("div", { className: "w-full h-2 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        className: "h-full bg-blue-500 transition-all duration-300",
+                        style: { width: `${progressPercent}%` }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex justify-between mt-1 text-[10px] text-blue-400", children: [
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "\u2705 ",
+                        groupAssignments.filter((a) => a.status === "passed").length,
+                        " passed"
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "\u274C ",
+                        groupAssignments.filter((a) => a.status === "failed").length,
+                        " failed"
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        "\u23ED\uFE0F ",
+                        groupAssignments.filter((a) => a.status === "skipped").length,
+                        " skipped"
+                      ] })
+                    ] })
+                  ] });
+                })(),
+                /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
-                    /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-gray-500", children: displayedAssignment.testCase.testKey }),
+                    /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: displayedAssignment.testCase.testKey }),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                       displayedAssignment.testCase.track && /* @__PURE__ */ jsx2(
                         "span",
@@ -952,11 +1306,11 @@ function BugBearPanel({
                           children: templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon
                         }
                       ),
-                      /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${displayedAssignment.testCase.priority === "P0" ? "bg-red-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__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${displayedAssignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : displayedAssignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: displayedAssignment.testCase.priority })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx2("h4", { className: "font-medium text-gray-900 text-sm mb-1", children: displayedAssignment.testCase.title }),
-                  displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2 text-xs text-green-600 bg-green-50 px-2 py-1 rounded", children: [
+                  /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm mb-1", children: displayedAssignment.testCase.title }),
+                  displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2 text-xs text-green-400 bg-green-900/20 px-2 py-1 rounded", children: [
                     /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
                       /* @__PURE__ */ jsx2("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
                       /* @__PURE__ */ jsx2("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
@@ -964,12 +1318,12 @@ function BugBearPanel({
                     /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Testing" }),
                     /* @__PURE__ */ jsx2("span", { className: "font-mono", children: formatElapsedTime(assignmentElapsedTime) })
                   ] }),
-                  displayedAssignment.testCase.description && /* @__PURE__ */ jsx2("p", { className: "text-gray-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
+                  displayedAssignment.testCase.description && /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
                   displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ jsxs(
                     "button",
                     {
                       onClick: () => onNavigate(displayedAssignment.testCase.targetRoute),
-                      className: "w-full mb-2 py-1.5 px-3 bg-blue-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__ */ jsx2("span", { children: "Go to test location" }),
                         /* @__PURE__ */ jsx2("span", { children: "\u2192" })
@@ -992,7 +1346,7 @@ function BugBearPanel({
                           children: [
                             /* @__PURE__ */ jsx2("span", { children: info.icon }),
                             /* @__PURE__ */ jsx2("span", { className: "font-medium", children: info.name }),
-                            /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+                            /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
                               "\u2022 ",
                               info.action
                             ] })
@@ -1003,7 +1357,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",
                             " ",
@@ -1012,10 +1366,10 @@ function BugBearPanel({
                         }
                       ),
                       showSteps && template === "steps" && /* @__PURE__ */ jsx2("div", { className: "mt-2 space-y-2", children: steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
-                        /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center flex-shrink-0 font-medium", children: step.stepNumber }),
+                        /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded-full bg-blue-900/50 text-blue-300 flex items-center justify-center flex-shrink-0 font-medium", children: step.stepNumber }),
                         /* @__PURE__ */ jsxs("div", { children: [
-                          /* @__PURE__ */ jsx2("p", { className: "text-gray-700", children: step.action }),
-                          step.expectedResult && /* @__PURE__ */ jsxs("p", { className: "text-gray-400 mt-0.5", children: [
+                          /* @__PURE__ */ jsx2("p", { className: "text-zinc-300", children: step.action }),
+                          step.expectedResult && /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 mt-0.5", children: [
                             "\u2192 ",
                             step.expectedResult
                           ] })
@@ -1034,39 +1388,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__ */ jsx2("span", { className: `w-5 h-5 rounded border-2 flex items-center justify-center ${criteriaResults[idx] === true ? "bg-green-500 border-green-500 text-white" : "border-cyan-400 text-cyan-600"}`, children: criteriaResults[idx] === true ? "\u2713" : "" }),
-                              /* @__PURE__ */ jsx2("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-700" : "text-gray-700"}`, children: step.action })
+                              /* @__PURE__ */ jsx2("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-400" : "text-zinc-300"}`, children: step.action })
                             ]
                           },
                           idx
                         )),
                         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
-                          /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400", children: "Tap to check off each item." }),
+                          /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Tap to check off each item." }),
                           Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
                             "button",
                             {
                               onClick: () => setCriteriaResults({}),
-                              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__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
-                        steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "bg-white p-2 rounded border border-gray-200", children: [
+                        steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 p-2 rounded border border-zinc-700", children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs mb-1", children: [
-                            /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded bg-purple-100 text-purple-700 flex items-center justify-center font-medium", children: idx + 1 }),
-                            /* @__PURE__ */ jsx2("p", { className: "text-gray-900 font-medium flex-1", children: step.action })
+                            /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded bg-blue-900/50 text-blue-300 flex items-center justify-center font-medium", children: idx + 1 }),
+                            /* @__PURE__ */ jsx2("p", { className: "text-zinc-100 font-medium flex-1", children: step.action })
                           ] }),
-                          step.expectedResult && /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 ml-7 mb-2", children: step.expectedResult }),
+                          step.expectedResult && /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 ml-7 mb-2", children: step.expectedResult }),
                           rubricMode === "pass_fail" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 ml-7", children: [
                             /* @__PURE__ */ jsx2(
                               "button",
                               {
                                 onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: true })),
-                                className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === true ? "bg-green-500 text-white" : "bg-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"
                               }
                             ),
@@ -1074,7 +1428,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"
                               }
                             )
@@ -1083,28 +1437,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__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
-                          /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
+                          /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
                           Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
                             "button",
                             {
                               onClick: () => setCriteriaResults({}),
-                              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__ */ jsxs("div", { className: "mt-2 p-2 bg-amber-50 rounded border border-amber-200 text-xs", children: [
-                        /* @__PURE__ */ jsx2("p", { className: "text-amber-800 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
-                        /* @__PURE__ */ jsx2("p", { className: "text-amber-700", children: "Review the area described above and note:" }),
-                        /* @__PURE__ */ jsxs("ul", { className: "text-amber-700 mt-1 ml-4 list-disc", children: [
+                      showSteps && template === "freeform" && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-2 bg-amber-900/20 rounded border border-amber-800 text-xs", children: [
+                        /* @__PURE__ */ jsx2("p", { className: "text-amber-300 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
+                        /* @__PURE__ */ jsx2("p", { className: "text-amber-400", children: "Review the area described above and note:" }),
+                        /* @__PURE__ */ jsxs("ul", { className: "text-amber-400 mt-1 ml-4 list-disc", children: [
                           /* @__PURE__ */ jsx2("li", { children: "What works well" }),
                           /* @__PURE__ */ jsx2("li", { children: "Issues or concerns" }),
                           /* @__PURE__ */ jsx2("li", { children: "Suggestions" })
@@ -1112,7 +1466,7 @@ function BugBearPanel({
                       ] })
                     ] });
                   })(),
-                  /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-green-50 rounded text-xs text-green-700", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-green-900/20 rounded text-xs text-green-400", children: [
                     /* @__PURE__ */ jsx2("span", { className: "font-medium", children: displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:" }),
                     " ",
                     displayedAssignment.testCase.expectedResult
@@ -1123,69 +1477,279 @@ 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__ */ jsx2(
+                    "button",
+                    {
+                      onClick: handleOpenSkipModal,
+                      disabled: submitting || skipping,
+                      className: "py-2 px-3 bg-yellow-900/30 text-yellow-400 rounded-lg font-medium text-sm hover:bg-yellow-800/30 disabled:opacity-50 transition-colors",
+                      children: "\u23ED\uFE0F Skip"
+                    }
+                  ),
                   /* @__PURE__ */ jsx2(
                     "button",
                     {
                       onClick: handlePass,
-                      disabled: submitting,
+                      disabled: submitting || skipping,
                       className: "flex-1 py-2 px-3 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
                       children: submitting ? "..." : "\u2713 Pass"
                     }
                   )
-                ] })
+                ] }),
+                showSkipModal && /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: () => setShowSkipModal(false), children: /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-xl p-4 w-72 shadow-xl border border-zinc-700", onClick: (e) => e.stopPropagation(), children: [
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mb-3", children: "Skip Test" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-3", children: "Please select a reason for skipping this test." }),
+                  /* @__PURE__ */ jsx2("div", { className: "space-y-2 mb-4", children: skipReasonOptions.map((option) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => setSelectedSkipReason(option.value),
+                      className: `w-full text-left p-2.5 rounded-lg border transition-colors ${selectedSkipReason === option.value ? "bg-yellow-900/20 border-yellow-700 text-yellow-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-yellow-800"}`,
+                      children: [
+                        /* @__PURE__ */ jsx2("div", { className: "font-medium text-sm", children: option.label }),
+                        /* @__PURE__ */ jsx2("div", { className: "text-xs text-zinc-500", children: option.description })
+                      ]
+                    },
+                    option.value
+                  )) }),
+                  selectedSkipReason === "other" && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Notes (required)" }),
+                    /* @__PURE__ */ jsx2(
+                      "textarea",
+                      {
+                        value: skipNotes,
+                        onChange: (e) => setSkipNotes(e.target.value),
+                        placeholder: "Please explain why you're skipping...",
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent placeholder:text-zinc-500",
+                        rows: 2
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: () => setShowSkipModal(false),
+                        className: "flex-1 py-2 px-3 text-sm font-medium text-zinc-400 bg-zinc-700 rounded-lg hover:bg-zinc-700 transition-colors",
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        onClick: handleSkip,
+                        disabled: !selectedSkipReason || selectedSkipReason === "other" && !skipNotes.trim() || skipping,
+                        className: "flex-1 py-2 px-3 text-sm font-medium text-white bg-yellow-500 rounded-lg hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                        children: skipping ? "Skipping..." : "Skip Test"
+                      }
+                    )
+                  ] })
+                ] }) })
               ] })
             ) : null }),
+            activeTab === "messages" && /* @__PURE__ */ jsx2("div", { children: messageView === "compose" ? (
+              /* Compose New Message */
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: handleBackToThreadList,
+                    className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
+                    children: "\u2190 Back to Messages"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "New Message" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Send a message to the QA team" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Subject" }),
+                    /* @__PURE__ */ jsx2(
+                      "input",
+                      {
+                        type: "text",
+                        value: composeSubject,
+                        onChange: (e) => setComposeSubject(e.target.value),
+                        placeholder: "What's this about?",
+                        maxLength: 100,
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Message" }),
+                    /* @__PURE__ */ jsx2(
+                      "textarea",
+                      {
+                        value: composeMessage,
+                        onChange: (e) => setComposeMessage(e.target.value),
+                        placeholder: "Write your message...",
+                        maxLength: 2e3,
+                        rows: 6,
+                        className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: handleSendNewMessage,
+                      disabled: !composeSubject.trim() || !composeMessage.trim() || sendingNewMessage,
+                      className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                      children: sendingNewMessage ? "Sending..." : "Send Message"
+                    }
+                  )
+                ] })
+              ] })
+            ) : messageView === "thread" && selectedThread ? (
+              /* Thread Detail View */
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: handleBackToThreadList,
+                    className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
+                    children: "\u2190 Back to Messages"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4 pb-3 border-b border-zinc-700", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "text-lg", children: getThreadTypeIcon(selectedThread.threadType) }),
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm leading-tight", children: selectedThread.subject || "No subject" })
+                ] }),
+                loadingMessages ? /* @__PURE__ */ jsx2("div", { className: "text-center py-6", children: /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Loading messages..." }) }) : /* @__PURE__ */ jsx2("div", { className: "space-y-3 mb-4", children: threadMessages.map((message) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    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__ */ jsx2("p", { className: `text-xs font-medium mb-1 ${message.senderType === "tester" ? "text-blue-300" : "text-zinc-300"}`, children: message.senderType === "tester" ? "You" : message.senderName }),
+                      /* @__PURE__ */ jsx2("p", { className: `text-sm ${message.senderType === "tester" ? "text-blue-100" : "text-zinc-200"}`, children: message.content }),
+                      /* @__PURE__ */ jsx2("p", { className: `text-[10px] mt-1 ${message.senderType === "tester" ? "text-blue-400/60" : "text-zinc-500"}`, children: formatMessageTime(message.createdAt) })
+                    ]
+                  },
+                  message.id
+                )) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-3 border-t border-zinc-700", children: [
+                  /* @__PURE__ */ jsx2(
+                    "input",
+                    {
+                      type: "text",
+                      value: replyText,
+                      onChange: (e) => setReplyText(e.target.value),
+                      placeholder: "Type a reply...",
+                      maxLength: 1e3,
+                      className: "flex-1 px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500",
+                      onKeyDown: (e) => e.key === "Enter" && !e.shiftKey && handleSendReply()
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: handleSendReply,
+                      disabled: !replyText.trim() || sendingReply,
+                      className: "px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                      children: sendingReply ? "..." : "Send"
+                    }
+                  )
+                ] })
+              ] })
+            ) : (
+              /* Thread List View */
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: handleStartNewMessage,
+                    className: "w-full flex items-center justify-center gap-2 py-2 px-4 mb-3 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 transition-colors",
+                    children: "\u2709\uFE0F New Message"
+                  }
+                ),
+                threads.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F4AC}" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "No messages yet" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Start a conversation or wait for messages from admins" })
+                ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => handleOpenThread(thread),
+                    className: `w-full text-left p-3 rounded-lg border transition-colors ${thread.unreadCount > 0 ? "bg-blue-900/20 border-blue-800 hover:bg-blue-900/30" : "bg-zinc-800 border-zinc-700 hover:bg-zinc-700"}`,
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0 flex-1", children: [
+                          thread.isPinned && /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "\u{1F4CC}" }),
+                          /* @__PURE__ */ jsx2("span", { className: "text-xs", children: getThreadTypeIcon(thread.threadType) }),
+                          /* @__PURE__ */ jsx2("span", { className: `text-sm truncate ${thread.unreadCount > 0 ? "font-semibold text-zinc-100" : "text-zinc-300"}`, children: thread.subject || "No subject" })
+                        ] }),
+                        (thread.priority === "high" || thread.priority === "urgent") && /* @__PURE__ */ jsx2("span", { className: `w-2 h-2 rounded-full flex-shrink-0 ml-2 ${thread.priority === "urgent" ? "bg-red-500" : "bg-orange-500"}` })
+                      ] }),
+                      thread.lastMessage && /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500 truncate", children: [
+                        thread.lastMessage.senderName,
+                        ": ",
+                        thread.lastMessage.content
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1.5", children: [
+                        thread.unreadCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-500 text-white rounded-full font-medium", children: [
+                          thread.unreadCount,
+                          " new"
+                        ] }) : /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: "Read" }),
+                        /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: formatRelativeTime(thread.lastMessageAt) })
+                      ] })
+                    ]
+                  },
+                  thread.id
+                )) })
+              ] })
+            ) }),
             activeTab === "session" && /* @__PURE__ */ jsx2("div", { children: !activeSession ? (
               /* Start Session View */
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
                   /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F50D}" }),
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 mt-2", children: "Exploratory QA Session" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-gray-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "Exploratory QA Session" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
                 ] }),
                 focusAreas.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: [
+                  /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: [
                     "\u{1F4CC} Focus Areas",
-                    /* @__PURE__ */ jsx2("span", { className: "ml-1 text-[10px] text-gray-500 font-normal", children: "from your team" })
+                    /* @__PURE__ */ jsx2("span", { className: "ml-1 text-[10px] text-zinc-500 font-normal", children: "from your team" })
                   ] }),
                   /* @__PURE__ */ jsx2("div", { className: "space-y-1.5", children: focusAreas.map((area) => /* @__PURE__ */ jsxs(
                     "button",
                     {
                       onClick: () => setSessionFocusArea(area.name),
-                      className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === area.name ? "bg-amber-50 border-amber-300 text-amber-700" : "bg-amber-50/50 border-amber-200 text-gray-700 hover:bg-amber-50"}`,
+                      className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === area.name ? "bg-amber-900/20 border-amber-700 text-amber-400" : "bg-amber-900/20/50 border-amber-800 text-zinc-300 hover:bg-amber-900/20"}`,
                       children: [
                         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                           /* @__PURE__ */ jsx2("span", { className: "font-medium", children: area.name }),
-                          /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${area.priority >= 70 ? "bg-red-100 text-red-600" : area.priority >= 50 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"}`, children: area.priority >= 70 ? "Urgent" : area.priority >= 50 ? "Important" : "Suggested" })
+                          /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${area.priority >= 70 ? "bg-red-900/30 text-red-400" : area.priority >= 50 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: area.priority >= 70 ? "Urgent" : area.priority >= 50 ? "Important" : "Suggested" })
                         ] }),
-                        area.description && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-gray-500 mt-0.5 line-clamp-2", children: area.description })
+                        area.description && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-zinc-500 mt-0.5 line-clamp-2", children: area.description })
                       ]
                     },
                     area.id
                   )) })
                 ] }),
                 suggestedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
                   /* @__PURE__ */ jsx2("div", { className: "space-y-1.5 max-h-32 overflow-y-auto", children: suggestedRoutes.map((suggestion, idx) => /* @__PURE__ */ jsx2(
                     "button",
                     {
                       onClick: () => setSessionFocusArea(suggestion.route),
-                      className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === suggestion.route ? "bg-purple-50 border-purple-300 text-purple-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100"}`,
+                      className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === suggestion.route ? "bg-blue-950/30 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:bg-zinc-700"}`,
                       children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                         /* @__PURE__ */ jsx2("span", { className: "font-medium truncate", children: suggestion.route }),
-                        /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${suggestion.priorityScore >= 40 ? "bg-red-100 text-red-600" : suggestion.priorityScore >= 25 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"}`, children: suggestion.reason })
+                        /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${suggestion.priorityScore >= 40 ? "bg-red-900/30 text-red-400" : suggestion.priorityScore >= 25 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: suggestion.reason })
                       ] })
                     },
                     idx
                   )) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Focus Area (optional)" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Focus Area (optional)" }),
                   /* @__PURE__ */ jsx2(
                     "input",
                     {
@@ -1193,12 +1757,12 @@ function BugBearPanel({
                       value: sessionFocusArea,
                       onChange: (e) => setSessionFocusArea(e.target.value),
                       placeholder: "e.g., checkout flow, settings page",
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                      className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Platform" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Platform" }),
                   /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
                     { key: "web", label: "\u{1F310} Web" },
                     { key: "ios", label: "\u{1F4F1} iOS" },
@@ -1207,7 +1771,7 @@ function BugBearPanel({
                     "button",
                     {
                       onClick: () => setSessionPlatform(key),
-                      className: `flex-1 py-2 px-3 rounded-lg text-xs font-medium transition-colors border-2 ${sessionPlatform === key ? "bg-purple-50 border-purple-500 text-purple-700" : "bg-gray-50 border-transparent text-gray-600 hover:bg-gray-100"}`,
+                      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
@@ -1231,8 +1795,8 @@ function BugBearPanel({
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
                   /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u270B" }),
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 mt-2", children: "End Session?" }),
-                  /* @__PURE__ */ jsxs("p", { className: "text-gray-500 text-xs mt-1", children: [
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "End Session?" }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 text-xs mt-1", children: [
                     "Duration: ",
                     formatElapsedTime(sessionElapsedTime),
                     " \u2022 ",
@@ -1242,7 +1806,7 @@ function BugBearPanel({
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Session Notes (optional)" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Session Notes (optional)" }),
                   /* @__PURE__ */ jsx2(
                     "textarea",
                     {
@@ -1250,7 +1814,7 @@ function BugBearPanel({
                       onChange: (e) => setSessionNotes(e.target.value),
                       placeholder: "Any overall observations from this session...",
                       rows: 3,
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
+                      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"
                     }
                   )
                 ] }),
@@ -1259,7 +1823,7 @@ function BugBearPanel({
                     "button",
                     {
                       onClick: () => setShowEndConfirm(false),
-                      className: "flex-1 py-2 px-3 bg-gray-100 text-gray-700 rounded-lg font-medium text-sm hover:bg-gray-200 transition-colors",
+                      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"
                     }
                   ),
@@ -1278,12 +1842,12 @@ function BugBearPanel({
               /* Add Finding Form */
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 text-sm", children: "Add Finding" }),
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm", children: "Add Finding" }),
                   /* @__PURE__ */ jsx2(
                     "button",
                     {
                       onClick: () => setShowAddFinding(false),
-                      className: "text-gray-400 hover:text-gray-600",
+                      className: "text-zinc-500 hover:text-zinc-400",
                       children: "\u2715"
                     }
                   )
@@ -1297,25 +1861,25 @@ function BugBearPanel({
                   "button",
                   {
                     onClick: () => setFindingType(type),
-                    className: `flex-1 py-1.5 px-2 rounded text-xs font-medium transition-colors ${findingType === type ? color === "red" ? "bg-red-100 text-red-700 ring-2 ring-red-400" : color === "orange" ? "bg-orange-100 text-orange-700 ring-2 ring-orange-400" : color === "blue" ? "bg-blue-100 text-blue-700 ring-2 ring-blue-400" : "bg-purple-100 text-purple-700 ring-2 ring-purple-400" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                    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__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Severity" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
                   /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low", "observation"].map((sev) => /* @__PURE__ */ jsx2(
                     "button",
                     {
                       onClick: () => setFindingSeverity(sev),
-                      className: `flex-1 py-1 px-1 rounded text-xs font-medium capitalize transition-colors ${findingSeverity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : sev === "low" ? "bg-gray-500 text-white" : "bg-blue-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                      className: `flex-1 py-1 px-1 rounded text-xs font-medium capitalize transition-colors ${findingSeverity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : sev === "low" ? "bg-zinc-8000 text-white" : "bg-blue-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
                       children: sev === "observation" ? "obs" : sev
                     },
                     sev
                   )) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Title *" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Title *" }),
                   /* @__PURE__ */ jsx2(
                     "input",
                     {
@@ -1323,12 +1887,12 @@ function BugBearPanel({
                       value: findingTitle,
                       onChange: (e) => setFindingTitle(e.target.value),
                       placeholder: "Brief description of what you found",
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                      className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Details (optional)" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Details (optional)" }),
                   /* @__PURE__ */ jsx2(
                     "textarea",
                     {
@@ -1336,7 +1900,7 @@ function BugBearPanel({
                       onChange: (e) => setFindingDescription(e.target.value),
                       placeholder: "Steps to reproduce, expected behavior, etc.",
                       rows: 2,
-                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
+                      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"
                     }
                   )
                 ] }),
@@ -1345,7 +1909,7 @@ function BugBearPanel({
                   {
                     onClick: handleAddFinding,
                     disabled: addingFinding || !findingTitle.trim(),
-                    className: "w-full py-2 px-4 bg-purple-600 text-white rounded-lg font-medium text-sm hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                    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"
                   }
                 )
@@ -1353,15 +1917,15 @@ function BugBearPanel({
             ) : (
               /* Active Session View */
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "bg-green-50 rounded-lg p-3 mb-3 border border-green-200", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-green-900/20 rounded-lg p-3 mb-3 border border-green-800", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
-                      /* @__PURE__ */ jsx2("span", { className: "font-medium text-green-800 text-sm", children: "Session Active" })
+                      /* @__PURE__ */ jsx2("span", { className: "font-medium text-green-300 text-sm", children: "Session Active" })
                     ] }),
-                    /* @__PURE__ */ jsx2("span", { className: "font-mono text-green-700 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
+                    /* @__PURE__ */ jsx2("span", { className: "font-mono text-green-400 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
                   ] }),
-                  activeSession.focusArea && /* @__PURE__ */ jsxs("p", { className: "text-green-700 text-xs mt-1", children: [
+                  activeSession.focusArea && /* @__PURE__ */ jsxs("p", { className: "text-green-400 text-xs mt-1", children: [
                     "Focus: ",
                     activeSession.focusArea
                   ] })
@@ -1370,7 +1934,7 @@ function BugBearPanel({
                   "button",
                   {
                     onClick: () => setShowAddFinding(true),
-                    className: "w-full py-3 px-4 bg-purple-600 text-white rounded-lg font-semibold text-sm hover:bg-purple-700 transition-colors flex items-center justify-center gap-2 mb-3",
+                    className: "w-full py-3 px-4 bg-blue-500 text-white rounded-lg font-semibold text-sm hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 mb-3",
                     children: [
                       /* @__PURE__ */ jsx2("span", { children: "+" }),
                       " Add Finding"
@@ -1378,23 +1942,23 @@ function BugBearPanel({
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-gray-500", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
                     "Findings (",
                     sessionFindings.length,
                     ")"
                   ] }) }),
-                  sessionFindings.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 bg-gray-50 rounded-lg", children: [
-                    /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-xs", children: "No findings yet" }),
-                    /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-xs", children: "Explore and add findings as you go" })
+                  sessionFindings.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 bg-zinc-800 rounded-lg", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "No findings yet" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "Explore and add findings as you go" })
                   ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2 max-h-32 overflow-y-auto", children: sessionFindings.map((finding) => /* @__PURE__ */ jsx2(
                     "div",
                     {
-                      className: `p-2 rounded-lg border text-xs ${finding.type === "bug" ? "bg-red-50 border-red-200" : finding.type === "concern" ? "bg-orange-50 border-orange-200" : finding.type === "suggestion" ? "bg-blue-50 border-blue-200" : "bg-purple-50 border-purple-200"}`,
+                      className: `p-2 rounded-lg border text-xs ${finding.type === "bug" ? "bg-red-900/20 border-red-800" : finding.type === "concern" ? "bg-orange-900/20 border-orange-200" : finding.type === "suggestion" ? "bg-blue-900/20 border-blue-800" : "bg-blue-950/30 border-blue-800"}`,
                       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
                         /* @__PURE__ */ jsx2("span", { children: finding.type === "bug" ? "\u{1F41B}" : finding.type === "concern" ? "\u26A0\uFE0F" : finding.type === "suggestion" ? "\u{1F4A1}" : "\u2753" }),
                         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                          /* @__PURE__ */ jsx2("p", { className: "font-medium text-gray-900 truncate", children: finding.title }),
-                          finding.severity && finding.type === "bug" && /* @__PURE__ */ jsx2("span", { className: `inline-block mt-0.5 px-1 py-0.5 rounded text-[10px] font-medium ${finding.severity === "critical" ? "bg-red-200 text-red-800" : finding.severity === "high" ? "bg-orange-200 text-orange-800" : finding.severity === "medium" ? "bg-yellow-200 text-yellow-800" : "bg-gray-200 text-gray-700"}`, children: finding.severity })
+                          /* @__PURE__ */ jsx2("p", { className: "font-medium text-zinc-100 truncate", children: finding.title }),
+                          finding.severity && finding.type === "bug" && /* @__PURE__ */ jsx2("span", { className: `inline-block mt-0.5 px-1 py-0.5 rounded text-[10px] font-medium ${finding.severity === "critical" ? "bg-red-900/40 text-red-300" : finding.severity === "high" ? "bg-orange-900/40 text-orange-300" : finding.severity === "medium" ? "bg-yellow-900/40 text-yellow-300" : "bg-zinc-700 text-zinc-300"}`, children: finding.severity })
                         ] })
                       ] })
                     },
@@ -1405,7 +1969,7 @@ function BugBearPanel({
                   "button",
                   {
                     onClick: () => setShowEndConfirm(true),
-                    className: "w-full py-2 px-4 bg-gray-100 text-gray-700 rounded-lg font-medium text-sm hover:bg-gray-200 transition-colors",
+                    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"
                   }
                 )
@@ -1413,7 +1977,7 @@ function BugBearPanel({
             ) }),
             activeTab === "report" && /* @__PURE__ */ jsx2("div", { children: submitted ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
               /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F389}" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-600 mt-2 font-medium", children: "Report submitted!" })
+              /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Report submitted!" })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx2("div", { className: "flex gap-2 mb-4", children: [
                 { type: "bug", label: "\u{1F41B} Bug", color: "red" },
@@ -1423,25 +1987,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__ */ jsxs("div", { className: "mb-3", children: [
-                /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Severity" }),
+                /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
                 /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low"].map((sev) => /* @__PURE__ */ jsx2(
                   "button",
                   {
                     onClick: () => 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__ */ jsxs("div", { className: "mb-3", children: [
-                /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "What happened?" }),
+                /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "What happened?" }),
                 /* @__PURE__ */ jsx2(
                   "textarea",
                   {
@@ -1449,7 +2013,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"
                   }
                 )
               ] }),
@@ -1458,19 +2022,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__ */ jsxs("div", { className: "absolute inset-0 bg-white z-50 flex flex-col rounded-xl overflow-hidden", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-purple-600 text-white px-4 py-3 flex items-center justify-between", children: [
+          showProfileOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", children: [
               /* @__PURE__ */ jsx2(
                 "button",
                 {
                   onClick: 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"
                 }
               ),
@@ -1480,23 +2044,23 @@ function BugBearPanel({
             ] }),
             /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto p-4", children: profileSaved ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
               /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
-              /* @__PURE__ */ jsx2("p", { className: "text-gray-600 mt-2 font-medium", children: "Profile saved!" })
+              /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Profile saved!" })
             ] }) : profileEditing ? (
               /* Edit Profile Form */
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900", children: "Edit Profile" }),
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "Edit Profile" }),
                   /* @__PURE__ */ jsx2(
                     "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__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Name" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Name" }),
                   /* @__PURE__ */ jsx2(
                     "input",
                     {
@@ -1504,27 +2068,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__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Primary Email" }),
-                  /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-gray-100 rounded-lg", children: [
-                    /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-700", children: testerInfo?.email }),
-                    /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400 mt-0.5", children: "Main communication email" })
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Primary Email" }),
+                  /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-zinc-800 rounded-lg", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: testerInfo?.email }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mt-0.5", children: "Main communication email" })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Additional Testing Emails" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 mb-2", children: "Add other emails you use to test on different accounts" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Additional Testing Emails" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Add other emails you use to test on different accounts" }),
                   profileAdditionalEmails.map((email) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-                    /* @__PURE__ */ jsx2("span", { className: "flex-1 px-3 py-1.5 bg-purple-50 text-purple-700 text-sm rounded-full", children: email }),
+                    /* @__PURE__ */ jsx2("span", { className: "flex-1 px-3 py-1.5 bg-blue-950/30 text-blue-300 text-sm rounded-full", children: email }),
                     /* @__PURE__ */ jsx2(
                       "button",
                       {
                         onClick: () => handleRemoveEmail(email),
-                        className: "text-purple-400 hover:text-red-500 text-sm",
+                        className: "text-blue-400 hover:text-red-500 text-sm",
                         children: "\u2715"
                       }
                     )
@@ -1537,7 +2101,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()
                       }
                     ),
@@ -1546,15 +2110,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__ */ jsxs("div", { className: "mb-4", children: [
-                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Testing Platforms" }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 mb-2", children: "Select the platforms you can test on" }),
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Testing Platforms" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Select the platforms you can test on" }),
                   /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
                     { key: "ios", label: "\u{1F4F1} iOS" },
                     { key: "android", label: "\u{1F916} Android" },
@@ -1563,7 +2127,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
@@ -1582,31 +2146,31 @@ function BugBearPanel({
             ) : (
               /* Profile View */
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-4 text-center mb-4", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "w-16 h-16 mx-auto bg-purple-600 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx2("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
-                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900", children: testerInfo?.name }),
-                  /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-500", children: testerInfo?.email }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-gray-200", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-4 text-center mb-4", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "w-16 h-16 mx-auto bg-blue-500 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx2("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: testerInfo?.name }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-500", children: testerInfo?.email }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-zinc-700", children: [
                     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-purple-600", children: testerInfo?.assignedTests || 0 }),
-                      /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500", children: "Assigned" })
+                      /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.assignedTests || 0 }),
+                      /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Assigned" })
                     ] }),
                     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-purple-600", children: testerInfo?.completedTests || 0 }),
-                      /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500", children: "Completed" })
+                      /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.completedTests || 0 }),
+                      /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Completed" })
                     ] })
                   ] })
                 ] }),
-                (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
-                  testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ jsx2("p", { className: "text-sm text-gray-700", children: email }, email))
+                (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
+                  testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: email }, email))
                 ] }),
-                (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-3 mb-3", children: [
-                  /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
+                (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
+                  /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
                   /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2", children: testerInfo?.platforms?.map((platform) => /* @__PURE__ */ jsx2(
                     "span",
                     {
-                      className: "px-2 py-1 bg-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
@@ -1616,14 +2180,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__ */ 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__ */ jsx2("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              threads.length,
+              " thread",
+              threads.length !== 1 ? "s" : "",
+              " \xB7 ",
+              unreadCount,
+              " unread"
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: refreshThreads,
+                className: "hover:text-zinc-300",
+                children: "\u21BB Refresh"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("span", { children: [
               pendingCount,
               " pending \xB7 ",
@@ -1634,11 +2215,11 @@ function BugBearPanel({
               "button",
               {
                 onClick: refreshAssignments,
-                className: "hover:text-gray-600",
+                className: "hover:text-zinc-300",
                 children: "\u21BB Refresh"
               }
             )
-          ] })
+          ] }) })
         ] })
       ]
     }