@bbearai/react 0.1.7 → 0.1.8

package/dist/index.mjs

@@ -20,6 +20,14 @@ var BugBearContext = createContext({
   },
   updateTesterProfile: async () => ({ success: false }),
   refreshTesterInfo: async () => {
+  },
+  // QA Sessions
+  activeSession: null,
+  sessionFindings: [],
+  startSession: async () => ({ success: false }),
+  endSession: async () => ({ success: false }),
+  addFinding: async () => ({ success: false }),
+  refreshSession: async () => {
   }
 });
 function useBugBear() {
@@ -33,11 +41,52 @@ function BugBearProvider({ config, children, enabled = true }) {
   const [assignments, setAssignments] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const hasInitialized = useRef(false);
+  const [activeSession, setActiveSession] = useState(null);
+  const [sessionFindings, setSessionFindings] = useState([]);
   const refreshAssignments = useCallback(async () => {
     if (!client) return;
     const newAssignments = await client.getAssignedTests();
     setAssignments(newAssignments);
   }, [client]);
+  const refreshSession = useCallback(async () => {
+    if (!client) return;
+    const session = await client.getActiveSession();
+    setActiveSession(session);
+    if (session) {
+      const findings = await client.getSessionFindings(session.id);
+      setSessionFindings(findings);
+    } else {
+      setSessionFindings([]);
+    }
+  }, [client]);
+  const startSession = useCallback(async (options = {}) => {
+    if (!client) return { success: false, error: "Client not initialized" };
+    const result = await client.startSession(options);
+    if (result.success && result.session) {
+      setActiveSession(result.session);
+      setSessionFindings([]);
+    }
+    return { success: result.success, error: result.error };
+  }, [client]);
+  const endSession = useCallback(async (notes) => {
+    if (!client || !activeSession) return { success: false, error: "No active session" };
+    const routesCovered = client.getNavigationHistory();
+    const result = await client.endSession(activeSession.id, { notes, routesCovered });
+    if (result.success) {
+      setActiveSession(null);
+      setSessionFindings([]);
+    }
+    return { success: result.success, error: result.error };
+  }, [client, activeSession]);
+  const addFinding = useCallback(async (options) => {
+    if (!client || !activeSession) return { success: false, error: "No active session" };
+    const result = await client.addFinding(activeSession.id, options);
+    if (result.success && result.finding) {
+      setSessionFindings((prev) => [...prev, result.finding]);
+      setActiveSession((prev) => prev ? { ...prev, findingsCount: prev.findingsCount + 1 } : null);
+    }
+    return result;
+  }, [client, activeSession]);
   const initializeBugBear = useCallback(async (bugBearClient) => {
     setIsLoading(true);
     try {
@@ -50,8 +99,16 @@ function BugBearProvider({ config, children, enabled = true }) {
       setTesterInfo(info);
       setIsTester(!!info);
       if (info && qaEnabled) {
-        const newAssignments = await bugBearClient.getAssignedTests();
+        const [newAssignments, session] = await Promise.all([
+          bugBearClient.getAssignedTests(),
+          bugBearClient.getActiveSession()
+        ]);
         setAssignments(newAssignments);
+        setActiveSession(session);
+        if (session) {
+          const findings = await bugBearClient.getSessionFindings(session.id);
+          setSessionFindings(findings);
+        }
       }
     } catch (err) {
       console.error("BugBear: Init error", err);
@@ -106,7 +163,14 @@ function BugBearProvider({ config, children, enabled = true }) {
         onNavigate: config.onNavigate,
         refreshTesterStatus,
         updateTesterProfile,
-        refreshTesterInfo
+        refreshTesterInfo,
+        // QA Sessions
+        activeSession,
+        sessionFindings,
+        startSession,
+        endSession,
+        addFinding,
+        refreshSession
       },
       children
     }
@@ -185,7 +249,7 @@ function BugBearPanel({
   defaultCollapsed = false,
   draggable = true
 }) {
-  const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate, updateTesterProfile, refreshTesterInfo } = useBugBear();
+  const { client, shouldShowWidget, testerInfo, assignments, currentAssignment, refreshAssignments, isLoading, onNavigate, updateTesterProfile, refreshTesterInfo, activeSession, sessionFindings, startSession, endSession, addFinding } = useBugBear();
   const [collapsed, setCollapsed] = useState2(defaultCollapsed);
   const [activeTab, setActiveTab] = useState2("tests");
   const [showSteps, setShowSteps] = useState2(false);
@@ -202,6 +266,16 @@ function BugBearPanel({
   const [submitting, setSubmitting] = useState2(false);
   const [submitted, setSubmitted] = useState2(false);
   const [justPassed, setJustPassed] = useState2(false);
+  const [showFeedbackPrompt, setShowFeedbackPrompt] = useState2(false);
+  const [pendingFeedbackStatus, setPendingFeedbackStatus] = useState2(null);
+  const [feedbackRating, setFeedbackRating] = useState2(5);
+  const [feedbackNote, setFeedbackNote] = useState2("");
+  const [feedbackFlags, setFeedbackFlags] = useState2({
+    isOutdated: false,
+    needsMoreDetail: false,
+    stepsUnclear: false,
+    expectedResultUnclear: false
+  });
   const [criteriaResults, setCriteriaResults] = useState2({});
   const [profileEditing, setProfileEditing] = useState2(false);
   const [profileName, setProfileName] = useState2("");
@@ -211,6 +285,22 @@ function BugBearPanel({
   const [savingProfile, setSavingProfile] = useState2(false);
   const [profileSaved, setProfileSaved] = useState2(false);
   const [showProfileOverlay, setShowProfileOverlay] = useState2(false);
+  const [startingSession, setStartingSession] = useState2(false);
+  const [sessionFocusArea, setSessionFocusArea] = useState2("");
+  const [sessionPlatform, setSessionPlatform] = useState2("web");
+  const [suggestedRoutes, setSuggestedRoutes] = useState2([]);
+  const [focusAreas, setFocusAreas] = useState2([]);
+  const [showAddFinding, setShowAddFinding] = useState2(false);
+  const [findingType, setFindingType] = useState2("bug");
+  const [findingTitle, setFindingTitle] = useState2("");
+  const [findingDescription, setFindingDescription] = useState2("");
+  const [findingSeverity, setFindingSeverity] = useState2("medium");
+  const [addingFinding, setAddingFinding] = useState2(false);
+  const [endingSession, setEndingSession] = useState2(false);
+  const [sessionNotes, setSessionNotes] = useState2("");
+  const [showEndConfirm, setShowEndConfirm] = useState2(false);
+  const [sessionElapsedTime, setSessionElapsedTime] = useState2(0);
+  const [assignmentElapsedTime, setAssignmentElapsedTime] = useState2(0);
   useEffect2(() => {
     if (typeof window === "undefined") return;
     try {
@@ -245,6 +335,84 @@ function BugBearPanel({
     setCriteriaResults({});
     setShowSteps(false);
   }, [displayedAssignment?.id]);
+  useEffect2(() => {
+    if (!activeSession) {
+      setSessionElapsedTime(0);
+      return;
+    }
+    const startTime = new Date(activeSession.startedAt).getTime();
+    const now = Date.now();
+    setSessionElapsedTime(Math.floor((now - startTime) / 1e3));
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1e3);
+      setSessionElapsedTime(elapsed);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [activeSession]);
+  useEffect2(() => {
+    const activeAssignment = displayedAssignment?.status === "in_progress" ? displayedAssignment : null;
+    if (!activeAssignment?.startedAt) {
+      setAssignmentElapsedTime(0);
+      return;
+    }
+    const startTime = new Date(activeAssignment.startedAt).getTime();
+    const now = Date.now();
+    setAssignmentElapsedTime(Math.floor((now - startTime) / 1e3));
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1e3);
+      setAssignmentElapsedTime(elapsed);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [displayedAssignment?.id, displayedAssignment?.status, displayedAssignment?.startedAt]);
+  useEffect2(() => {
+    if (!client || activeSession) {
+      setSuggestedRoutes([]);
+      setFocusAreas([]);
+      return;
+    }
+    const loadSuggestions = async () => {
+      try {
+        const supabase = client.supabase;
+        if (!supabase) return;
+        const projectId = client.config.projectId;
+        const [routeStatsRes, focusAreasRes] = await Promise.all([
+          supabase.from("route_test_stats").select("route, priority_score, open_bugs, exploratory_issues, last_tested_at, test_case_count").eq("project_id", projectId).order("priority_score", { ascending: false }).limit(10),
+          supabase.rpc("get_active_focus_areas", { p_project_id: projectId })
+        ]);
+        if (routeStatsRes.data && routeStatsRes.data.length > 0) {
+          const suggestions = routeStatsRes.data.filter((r) => r.route && r.priority_score > 0).slice(0, 5).map((r) => {
+            let reason = "";
+            if (r.open_bugs > 0) {
+              reason = `${r.open_bugs} open bug${r.open_bugs > 1 ? "s" : ""}`;
+            } else if (!r.last_tested_at) {
+              reason = "Never tested";
+            } else if (r.test_case_count === 0) {
+              reason = "No test coverage";
+            } else {
+              reason = `Priority: ${r.priority_score}`;
+            }
+            return {
+              route: r.route,
+              reason,
+              priorityScore: r.priority_score
+            };
+          });
+          setSuggestedRoutes(suggestions);
+        }
+        if (focusAreasRes.data && focusAreasRes.data.length > 0) {
+          setFocusAreas(focusAreasRes.data.slice(0, 3).map((fa) => ({
+            id: fa.id,
+            name: fa.name,
+            description: fa.description,
+            priority: fa.priority
+          })));
+        }
+      } catch (err) {
+        console.error("BugBear: Failed to load suggestions", err);
+      }
+    };
+    loadSuggestions();
+  }, [client, activeSession]);
   const handleMouseDown = useCallback2((e) => {
     if (!draggable || !panelPosition) return;
     const target = e.target;
@@ -295,27 +463,86 @@ function BugBearPanel({
     return null;
   }
   const handlePass = async () => {
-    if (!client || !displayedAssignment) return;
-    setSubmitting(true);
-    await client.submitReport({
-      type: "test_pass",
-      description: `Test passed: ${displayedAssignment.testCase.title}`,
-      assignmentId: displayedAssignment.id,
-      testCaseId: displayedAssignment.testCase.id,
-      appContext: getAppContext?.() || { currentRoute: window.location.pathname }
+    if (!displayedAssignment) return;
+    setPendingFeedbackStatus("passed");
+    setShowFeedbackPrompt(true);
+    setFeedbackRating(5);
+    setFeedbackNote("");
+    setFeedbackFlags({
+      isOutdated: false,
+      needsMoreDetail: false,
+      stepsUnclear: false,
+      expectedResultUnclear: false
     });
-    await refreshAssignments();
-    setSubmitting(false);
-    setJustPassed(true);
-    setTimeout(() => {
-      setJustPassed(false);
-      setSelectedTestId(null);
-      setTestView("detail");
-    }, 1200);
   };
   const handleFail = async () => {
-    setActiveTab("report");
-    setReportType("test_fail");
+    if (!displayedAssignment) return;
+    setPendingFeedbackStatus("failed");
+    setShowFeedbackPrompt(true);
+    setFeedbackRating(3);
+    setFeedbackNote("");
+    setFeedbackFlags({
+      isOutdated: false,
+      needsMoreDetail: false,
+      stepsUnclear: false,
+      expectedResultUnclear: false
+    });
+  };
+  const handleSubmitFeedback = async (skipFeedback = false) => {
+    if (!client || !displayedAssignment) return;
+    setSubmitting(true);
+    const feedback = skipFeedback ? void 0 : {
+      rating: feedbackRating,
+      feedbackNote: feedbackNote.trim() || void 0,
+      isOutdated: feedbackFlags.isOutdated,
+      needsMoreDetail: feedbackFlags.needsMoreDetail,
+      stepsUnclear: feedbackFlags.stepsUnclear,
+      expectedResultUnclear: feedbackFlags.expectedResultUnclear
+    };
+    if (pendingFeedbackStatus === "passed") {
+      await client.submitReport({
+        type: "test_pass",
+        description: `Test passed: ${displayedAssignment.testCase.title}`,
+        assignmentId: displayedAssignment.id,
+        testCaseId: displayedAssignment.testCase.id,
+        appContext: getAppContext?.() || { currentRoute: window.location.pathname }
+      });
+      if (feedback) {
+        await client.submitTestFeedback({
+          testCaseId: displayedAssignment.testCase.id,
+          assignmentId: displayedAssignment.id,
+          feedback,
+          timeToCompleteSeconds: assignmentElapsedTime || void 0
+        });
+      }
+      await refreshAssignments();
+      setSubmitting(false);
+      setShowFeedbackPrompt(false);
+      setPendingFeedbackStatus(null);
+      setJustPassed(true);
+      setTimeout(() => {
+        setJustPassed(false);
+        setSelectedTestId(null);
+        setTestView("detail");
+      }, 1200);
+    } else if (pendingFeedbackStatus === "failed") {
+      if (feedback) {
+        await client.submitTestFeedback({
+          testCaseId: displayedAssignment.testCase.id,
+          assignmentId: displayedAssignment.id,
+          feedback,
+          timeToCompleteSeconds: assignmentElapsedTime || void 0
+        });
+      }
+      setSubmitting(false);
+      setShowFeedbackPrompt(false);
+      setPendingFeedbackStatus(null);
+      setActiveTab("report");
+      setReportType("test_fail");
+    }
+  };
+  const handleSkipFeedback = () => {
+    handleSubmitFeedback(true);
   };
   const handleSubmitReport = async () => {
     if (!client || !description.trim()) return;
@@ -408,6 +635,54 @@ function BugBearPanel({
     }
     setSavingProfile(false);
   };
+  const handleStartSession = async () => {
+    setStartingSession(true);
+    const result = await startSession({
+      focusArea: sessionFocusArea.trim() || void 0,
+      platform: sessionPlatform
+    });
+    if (result.success) {
+      setSessionFocusArea("");
+    }
+    setStartingSession(false);
+  };
+  const handleEndSession = async () => {
+    setEndingSession(true);
+    const result = await endSession(sessionNotes.trim() || void 0);
+    if (result.success) {
+      setSessionNotes("");
+      setShowEndConfirm(false);
+    }
+    setEndingSession(false);
+  };
+  const handleAddFinding = async () => {
+    if (!findingTitle.trim()) return;
+    setAddingFinding(true);
+    const result = await addFinding({
+      type: findingType,
+      title: findingTitle.trim(),
+      description: findingDescription.trim() || void 0,
+      severity: findingType === "bug" ? findingSeverity : void 0,
+      route: typeof window !== "undefined" ? window.location.pathname : void 0
+    });
+    if (result.success) {
+      setFindingTitle("");
+      setFindingDescription("");
+      setFindingType("bug");
+      setFindingSeverity("medium");
+      setShowAddFinding(false);
+    }
+    setAddingFinding(false);
+  };
+  const formatElapsedTime = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor(seconds % 3600 / 60);
+    const s = seconds % 60;
+    if (h > 0) {
+      return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+    }
+    return `${m}:${s.toString().padStart(2, "0")}`;
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -479,27 +754,40 @@ function BugBearPanel({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex border-b border-gray-200", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 p-2 bg-gray-50 border-b border-gray-200", children: [
             /* @__PURE__ */ jsxs(
               "button",
               {
                 onClick: () => setActiveTab("tests"),
-                className: `flex-1 px-4 py-2 text-sm font-medium transition-colors ${activeTab === "tests" ? "text-purple-600 border-b-2 border-purple-600" : "text-gray-500 hover:text-gray-700"}`,
+                className: `flex-1 py-2 px-3 rounded-lg text-sm font-semibold transition-all flex items-center justify-center gap-1.5 ${activeTab === "tests" ? "bg-purple-600 text-white shadow-sm" : "bg-white text-gray-600 hover:bg-gray-100 border border-gray-200"}`,
                 children: [
-                  "Tests ",
-                  pendingCount > 0 && `(${pendingCount})`
+                  /* @__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 })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs(
               "button",
               {
-                onClick: () => setActiveTab("report"),
-                className: `flex-1 px-4 py-2 text-sm font-medium transition-colors ${activeTab === "report" ? "text-purple-600 border-b-2 border-purple-600" : "text-gray-500 hover:text-gray-700"}`,
-                children: "Report"
+                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"}`,
+                children: [
+                  /* @__PURE__ */ jsx2("span", { children: "\u{1F50D}" }),
+                  /* @__PURE__ */ jsx2("span", { children: "Explore" }),
+                  activeSession && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white animate-pulse" })
+                ]
               }
             )
           ] }),
+          /* @__PURE__ */ jsx2("div", { className: "flex justify-center py-1.5 border-b border-gray-200 bg-white", children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: () => setActiveTab("report"),
+              className: `px-4 py-1 text-xs font-medium transition-colors rounded-full ${activeTab === "report" ? "bg-red-50 text-red-600 border border-red-200" : "text-gray-500 hover:text-gray-700 hover:bg-gray-50"}`,
+              children: "\u{1F41B} Report Bug / Feedback"
+            }
+          ) }),
           /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
             activeTab === "tests" && /* @__PURE__ */ jsx2("div", { children: assignments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
               /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
@@ -550,6 +838,83 @@ function BugBearPanel({
                   assignment.id
                 ))
               ] })
+            ) : showFeedbackPrompt && displayedAssignment ? (
+              /* Feedback prompt after completing a test */
+              /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "text-3xl", children: pendingFeedbackStatus === "passed" ? "\u2713" : "\u2717" }),
+                  /* @__PURE__ */ jsx2("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-600" : "text-red-600"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 border border-purple-100 rounded-lg p-3 mb-4", children: [
+                  /* @__PURE__ */ jsx2("p", { className: "text-purple-800 text-sm font-medium mb-1", children: "Help us improve this test" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-purple-600 text-xs", children: "Your feedback shapes better tests for everyone." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-2", children: "How was this test?" }),
+                  /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1 justify-center", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setFeedbackRating(star),
+                      className: `text-2xl transition-colors ${star <= feedbackRating ? "text-yellow-400" : "text-gray-300"} hover:text-yellow-400`,
+                      children: "\u2605"
+                    },
+                    star
+                  )) }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-center text-xs text-gray-500 mt-1", children: feedbackRating === 1 ? "Needs work" : feedbackRating === 2 ? "Could be better" : feedbackRating === 3 ? "Okay" : feedbackRating === 4 ? "Good" : "Great!" })
+                ] }),
+                feedbackRating < 4 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-2", children: "What could be improved?" }),
+                  /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: [
+                    { key: "stepsUnclear", label: "Steps unclear" },
+                    { key: "expectedResultUnclear", label: "Expected result unclear" },
+                    { key: "needsMoreDetail", label: "Needs more detail" },
+                    { key: "isOutdated", label: "Seems outdated" }
+                  ].map(({ key, label }) => /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setFeedbackFlags((prev) => ({ ...prev, [key]: !prev[key] })),
+                      className: `px-2 py-1.5 rounded text-xs font-medium border transition-colors ${feedbackFlags[key] ? "bg-purple-100 border-purple-300 text-purple-700" : "bg-white border-gray-200 text-gray-600 hover:border-purple-200"}`,
+                      children: label
+                    },
+                    key
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Suggestions? (optional)" }),
+                  /* @__PURE__ */ jsx2(
+                    "textarea",
+                    {
+                      value: feedbackNote,
+                      onChange: (e) => setFeedbackNote(e.target.value),
+                      placeholder: "How could this test be improved?",
+                      className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent",
+                      rows: 2
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: handleSkipFeedback,
+                      disabled: submitting,
+                      className: "flex-1 px-3 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors disabled:opacity-50",
+                      children: "Skip"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: () => handleSubmitFeedback(false),
+                      disabled: submitting,
+                      className: "flex-1 px-3 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50",
+                      children: submitting ? "Submitting..." : "Submit Feedback"
+                    }
+                  )
+                ] })
+              ] })
             ) : justPassed ? (
               /* Success state after passing */
               /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
@@ -591,6 +956,14 @@ function BugBearPanel({
                     ] })
                   ] }),
                   /* @__PURE__ */ jsx2("h4", { className: "font-medium text-gray-900 text-sm mb-1", children: displayedAssignment.testCase.title }),
+                  displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2 text-xs text-green-600 bg-green-50 px-2 py-1 rounded", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                      /* @__PURE__ */ jsx2("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
+                    ] }),
+                    /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Testing" }),
+                    /* @__PURE__ */ jsx2("span", { className: "font-mono", children: formatElapsedTime(assignmentElapsedTime) })
+                  ] }),
                   displayedAssignment.testCase.description && /* @__PURE__ */ jsx2("p", { className: "text-gray-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
                   displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ jsxs(
                     "button",
@@ -767,6 +1140,277 @@ function BugBearPanel({
                 ] })
               ] })
             ) : null }),
+            activeTab === "session" && /* @__PURE__ */ jsx2("div", { children: !activeSession ? (
+              /* Start Session View */
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F50D}" }),
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 mt-2", children: "Exploratory QA Session" }),
+                  /* @__PURE__ */ jsx2("p", { className: "text-gray-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
+                ] }),
+                focusAreas.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: [
+                    "\u{1F4CC} Focus Areas",
+                    /* @__PURE__ */ jsx2("span", { className: "ml-1 text-[10px] text-gray-500 font-normal", children: "from your team" })
+                  ] }),
+                  /* @__PURE__ */ 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"}`,
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                          /* @__PURE__ */ jsx2("span", { className: "font-medium", children: area.name }),
+                          /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${area.priority >= 70 ? "bg-red-100 text-red-600" : area.priority >= 50 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"}`, children: area.priority >= 70 ? "Urgent" : area.priority >= 50 ? "Important" : "Suggested" })
+                        ] }),
+                        area.description && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-gray-500 mt-0.5 line-clamp-2", children: area.description })
+                      ]
+                    },
+                    area.id
+                  )) })
+                ] }),
+                suggestedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
+                  /* @__PURE__ */ jsx2("div", { className: "space-y-1.5 max-h-32 overflow-y-auto", children: suggestedRoutes.map((suggestion, idx) => /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: () => setSessionFocusArea(suggestion.route),
+                      className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === suggestion.route ? "bg-purple-50 border-purple-300 text-purple-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100"}`,
+                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsx2("span", { className: "font-medium truncate", children: suggestion.route }),
+                        /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${suggestion.priorityScore >= 40 ? "bg-red-100 text-red-600" : suggestion.priorityScore >= 25 ? "bg-amber-100 text-amber-600" : "bg-gray-100 text-gray-500"}`, children: suggestion.reason })
+                      ] })
+                    },
+                    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(
+                    "input",
+                    {
+                      type: "text",
+                      value: sessionFocusArea,
+                      onChange: (e) => setSessionFocusArea(e.target.value),
+                      placeholder: "e.g., checkout flow, settings page",
+                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Platform" }),
+                  /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
+                    { key: "web", label: "\u{1F310} Web" },
+                    { key: "ios", label: "\u{1F4F1} iOS" },
+                    { key: "android", label: "\u{1F916} Android" }
+                  ].map(({ key, label }) => /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: () => setSessionPlatform(key),
+                      className: `flex-1 py-2 px-3 rounded-lg text-xs font-medium transition-colors border-2 ${sessionPlatform === key ? "bg-purple-50 border-purple-500 text-purple-700" : "bg-gray-50 border-transparent text-gray-600 hover:bg-gray-100"}`,
+                      children: label
+                    },
+                    key
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: handleStartSession,
+                    disabled: startingSession,
+                    className: "w-full py-3 px-4 bg-green-600 text-white rounded-lg font-semibold text-sm hover:bg-green-700 disabled:opacity-50 transition-colors flex items-center justify-center gap-2",
+                    children: startingSession ? "Starting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx2("span", { children: "\u25B6" }),
+                      " Start Session"
+                    ] })
+                  }
+                )
+              ] })
+            ) : showEndConfirm ? (
+              /* End Session Confirmation */
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u270B" }),
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 mt-2", children: "End Session?" }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-gray-500 text-xs mt-1", children: [
+                    "Duration: ",
+                    formatElapsedTime(sessionElapsedTime),
+                    " \u2022 ",
+                    sessionFindings.length,
+                    " finding",
+                    sessionFindings.length !== 1 ? "s" : ""
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Session Notes (optional)" }),
+                  /* @__PURE__ */ jsx2(
+                    "textarea",
+                    {
+                      value: sessionNotes,
+                      onChange: (e) => setSessionNotes(e.target.value),
+                      placeholder: "Any overall observations from this session...",
+                      rows: 3,
+                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: () => setShowEndConfirm(false),
+                      className: "flex-1 py-2 px-3 bg-gray-100 text-gray-700 rounded-lg font-medium text-sm hover:bg-gray-200 transition-colors",
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: handleEndSession,
+                      disabled: endingSession,
+                      className: "flex-1 py-2 px-3 bg-red-600 text-white rounded-lg font-medium text-sm hover:bg-red-700 disabled:opacity-50 transition-colors",
+                      children: endingSession ? "Ending..." : "End Session"
+                    }
+                  )
+                ] })
+              ] })
+            ) : showAddFinding ? (
+              /* Add Finding Form */
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                  /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-gray-900 text-sm", children: "Add Finding" }),
+                  /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: () => setShowAddFinding(false),
+                      className: "text-gray-400 hover:text-gray-600",
+                      children: "\u2715"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx2("div", { className: "flex gap-1 mb-3", children: [
+                  { type: "bug", label: "\u{1F41B} Bug", color: "red" },
+                  { type: "concern", label: "\u26A0\uFE0F Concern", color: "orange" },
+                  { type: "suggestion", label: "\u{1F4A1} Idea", color: "blue" },
+                  { type: "question", label: "\u2753 Question", color: "purple" }
+                ].map(({ type, label, color }) => /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: () => 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"}`,
+                    children: label
+                  },
+                  type
+                )) }),
+                findingType === "bug" && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Severity" }),
+                  /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low", "observation"].map((sev) => /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      onClick: () => setFindingSeverity(sev),
+                      className: `flex-1 py-1 px-1 rounded text-xs font-medium capitalize transition-colors ${findingSeverity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : sev === "low" ? "bg-gray-500 text-white" : "bg-blue-500 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+                      children: sev === "observation" ? "obs" : sev
+                    },
+                    sev
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Title *" }),
+                  /* @__PURE__ */ jsx2(
+                    "input",
+                    {
+                      type: "text",
+                      value: findingTitle,
+                      onChange: (e) => setFindingTitle(e.target.value),
+                      placeholder: "Brief description of what you found",
+                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-gray-700 mb-1", children: "Details (optional)" }),
+                  /* @__PURE__ */ jsx2(
+                    "textarea",
+                    {
+                      value: findingDescription,
+                      onChange: (e) => setFindingDescription(e.target.value),
+                      placeholder: "Steps to reproduce, expected behavior, etc.",
+                      rows: 2,
+                      className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: handleAddFinding,
+                    disabled: addingFinding || !findingTitle.trim(),
+                    className: "w-full py-2 px-4 bg-purple-600 text-white rounded-lg font-medium text-sm hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                    children: addingFinding ? "Adding..." : "Add Finding"
+                  }
+                )
+              ] })
+            ) : (
+              /* Active Session View */
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-green-50 rounded-lg p-3 mb-3 border border-green-200", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
+                      /* @__PURE__ */ jsx2("span", { className: "font-medium text-green-800 text-sm", children: "Session Active" })
+                    ] }),
+                    /* @__PURE__ */ jsx2("span", { className: "font-mono text-green-700 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
+                  ] }),
+                  activeSession.focusArea && /* @__PURE__ */ jsxs("p", { className: "text-green-700 text-xs mt-1", children: [
+                    "Focus: ",
+                    activeSession.focusArea
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setShowAddFinding(true),
+                    className: "w-full py-3 px-4 bg-purple-600 text-white rounded-lg font-semibold text-sm hover:bg-purple-700 transition-colors flex items-center justify-center gap-2 mb-3",
+                    children: [
+                      /* @__PURE__ */ jsx2("span", { children: "+" }),
+                      " Add Finding"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                  /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-gray-500", children: [
+                    "Findings (",
+                    sessionFindings.length,
+                    ")"
+                  ] }) }),
+                  sessionFindings.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 bg-gray-50 rounded-lg", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-xs", children: "No findings yet" }),
+                    /* @__PURE__ */ jsx2("p", { className: "text-gray-400 text-xs", children: "Explore and add findings as you go" })
+                  ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2 max-h-32 overflow-y-auto", children: sessionFindings.map((finding) => /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      className: `p-2 rounded-lg border text-xs ${finding.type === "bug" ? "bg-red-50 border-red-200" : finding.type === "concern" ? "bg-orange-50 border-orange-200" : finding.type === "suggestion" ? "bg-blue-50 border-blue-200" : "bg-purple-50 border-purple-200"}`,
+                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                        /* @__PURE__ */ jsx2("span", { children: finding.type === "bug" ? "\u{1F41B}" : finding.type === "concern" ? "\u26A0\uFE0F" : finding.type === "suggestion" ? "\u{1F4A1}" : "\u2753" }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx2("p", { className: "font-medium text-gray-900 truncate", children: finding.title }),
+                          finding.severity && finding.type === "bug" && /* @__PURE__ */ jsx2("span", { className: `inline-block mt-0.5 px-1 py-0.5 rounded text-[10px] font-medium ${finding.severity === "critical" ? "bg-red-200 text-red-800" : finding.severity === "high" ? "bg-orange-200 text-orange-800" : finding.severity === "medium" ? "bg-yellow-200 text-yellow-800" : "bg-gray-200 text-gray-700"}`, children: finding.severity })
+                        ] })
+                      ] })
+                    },
+                    finding.id
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    onClick: () => setShowEndConfirm(true),
+                    className: "w-full py-2 px-4 bg-gray-100 text-gray-700 rounded-lg font-medium text-sm hover:bg-gray-200 transition-colors",
+                    children: "End Session"
+                  }
+                )
+              ] })
+            ) }),
             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!" })