@bbearai/react-native 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1640 @@
+// src/BugBearProvider.tsx
+import React, { createContext, useContext, useEffect, useState } from "react";
+import {
+  createBugBear
+} from "@bbearai/core";
+import { Platform, Dimensions } from "react-native";
+var BugBearContext = createContext({
+  client: null,
+  isTester: false,
+  isQAEnabled: false,
+  shouldShowWidget: false,
+  testerInfo: null,
+  assignments: [],
+  currentAssignment: null,
+  refreshAssignments: async () => {
+  },
+  isLoading: true,
+  getDeviceInfo: () => ({ platform: "ios" }),
+  onNavigate: void 0,
+  threads: [],
+  unreadCount: 0,
+  refreshThreads: async () => {
+  },
+  getThreadMessages: async () => [],
+  sendMessage: async () => false,
+  markAsRead: async () => {
+  }
+});
+function useBugBear() {
+  return useContext(BugBearContext);
+}
+function BugBearProvider({ config, children, appVersion }) {
+  const [client] = useState(() => createBugBear(config));
+  const [isTester, setIsTester] = useState(false);
+  const [isQAEnabled, setIsQAEnabled] = useState(false);
+  const [testerInfo, setTesterInfo] = useState(null);
+  const [assignments, setAssignments] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [threads, setThreads] = useState([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const getDeviceInfo = () => {
+    const { width, height } = Dimensions.get("window");
+    return {
+      platform: Platform.OS,
+      osVersion: Platform.Version?.toString(),
+      appVersion,
+      screenSize: { width, height }
+    };
+  };
+  const refreshAssignments = async () => {
+    const newAssignments = await client.getAssignedTests();
+    setAssignments(newAssignments);
+  };
+  const refreshThreads = async () => {
+    const newThreads = await client.getThreadsForTester();
+    setThreads(newThreads);
+    const totalUnread = newThreads.reduce((sum, t) => sum + t.unreadCount, 0);
+    setUnreadCount(totalUnread);
+  };
+  const getThreadMessages = async (threadId) => {
+    return client.getThreadMessages(threadId);
+  };
+  const sendMessage = async (threadId, content) => {
+    const success = await client.sendMessage(threadId, content);
+    if (success) {
+      await refreshThreads();
+    }
+    return success;
+  };
+  const markAsRead = async (threadId) => {
+    await client.markThreadAsRead(threadId);
+    await refreshThreads();
+  };
+  useEffect(() => {
+    const init = async () => {
+      setIsLoading(true);
+      try {
+        const [qaEnabled, info] = await Promise.all([
+          client.isQAEnabled(),
+          client.getTesterInfo()
+        ]);
+        setIsQAEnabled(qaEnabled);
+        setTesterInfo(info);
+        setIsTester(!!info);
+        if (info && qaEnabled) {
+          await Promise.all([
+            refreshAssignments(),
+            refreshThreads()
+          ]);
+        }
+      } catch (err) {
+        console.error("BugBear: Init error", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    init();
+  }, [client]);
+  const currentAssignment = assignments.find(
+    (a) => a.status === "in_progress"
+  ) || assignments[0] || null;
+  const shouldShowWidget = isQAEnabled && isTester;
+  return /* @__PURE__ */ React.createElement(
+    BugBearContext.Provider,
+    {
+      value: {
+        client,
+        isTester,
+        isQAEnabled,
+        shouldShowWidget,
+        testerInfo,
+        assignments,
+        currentAssignment,
+        refreshAssignments,
+        isLoading,
+        getDeviceInfo,
+        onNavigate: config.onNavigate,
+        threads,
+        unreadCount,
+        refreshThreads,
+        getThreadMessages,
+        sendMessage,
+        markAsRead
+      }
+    },
+    children
+  );
+}
+
+// src/BugBearButton.tsx
+import React2, { useState as useState2, useEffect as useEffect2, useRef } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  TextInput,
+  ScrollView,
+  StyleSheet,
+  Dimensions as Dimensions2,
+  KeyboardAvoidingView,
+  Platform as Platform2,
+  PanResponder,
+  Animated
+} from "react-native";
+var { width: screenWidth, height: screenHeight } = Dimensions2.get("window");
+var templateInfo = {
+  steps: { name: "Steps", icon: "\u{1F4DD}", action: "Follow each step" },
+  checklist: { name: "Checklist", icon: "\u2705", action: "Pass/Fail each item" },
+  rubric: { name: "Rubric", icon: "\u{1F4CA}", action: "Rate each criterion" },
+  freeform: { name: "Freeform", icon: "\u{1F4AD}", action: "Provide observations" }
+};
+function BugBearButton({
+  getAppContext,
+  position = "bottom-right",
+  buttonStyle,
+  draggable = true,
+  initialX,
+  initialY,
+  minY = 100,
+  maxYOffset = 160
+}) {
+  const {
+    client,
+    shouldShowWidget,
+    testerInfo,
+    assignments,
+    currentAssignment,
+    refreshAssignments,
+    isLoading,
+    getDeviceInfo,
+    onNavigate,
+    threads,
+    unreadCount,
+    refreshThreads,
+    getThreadMessages,
+    sendMessage,
+    markAsRead
+  } = useBugBear();
+  const [modalVisible, setModalVisible] = useState2(false);
+  const [activeTab, setActiveTab] = useState2("tests");
+  const [showSteps, setShowSteps] = useState2(false);
+  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 getInitialPosition = () => {
+    const buttonSize = 56;
+    const margin = 16;
+    if (initialX !== void 0 && initialY !== void 0) {
+      return { x: initialX, y: initialY };
+    }
+    const x = position === "bottom-right" ? screenWidth - buttonSize - margin : margin;
+    const y = screenHeight - 160;
+    return { x, y };
+  };
+  const initialPos = getInitialPosition();
+  const pan = useRef(new Animated.ValueXY(initialPos)).current;
+  const isDragging = useRef(false);
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => draggable,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return draggable && (Math.abs(gestureState.dx) > 5 || Math.abs(gestureState.dy) > 5);
+      },
+      onPanResponderGrant: () => {
+        isDragging.current = false;
+        pan.setOffset({
+          x: pan.x._value,
+          y: pan.y._value
+        });
+        pan.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (Math.abs(gestureState.dx) > 5 || Math.abs(gestureState.dy) > 5) {
+          isDragging.current = true;
+        }
+        Animated.event(
+          [null, { dx: pan.x, dy: pan.y }],
+          { useNativeDriver: false }
+        )(_, gestureState);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        pan.flattenOffset();
+        const currentX = pan.x._value;
+        const currentY = pan.y._value;
+        const buttonSize = 56;
+        const margin = 16;
+        const snapX = currentX < screenWidth / 2 ? margin : screenWidth - buttonSize - margin;
+        const snapY = Math.max(minY, Math.min(currentY, screenHeight - maxYOffset));
+        Animated.spring(pan, {
+          toValue: { x: snapX, y: snapY },
+          useNativeDriver: false,
+          friction: 7,
+          tension: 40
+        }).start();
+        if (!isDragging.current && Math.abs(gestureState.dx) < 5 && Math.abs(gestureState.dy) < 5) {
+          setModalVisible(true);
+        }
+        isDragging.current = false;
+      }
+    })
+  ).current;
+  const [testView, setTestView] = useState2("detail");
+  const [selectedTestId, setSelectedTestId] = useState2(null);
+  const displayedAssignment = selectedTestId ? assignments.find((a) => a.id === selectedTestId) || currentAssignment : currentAssignment;
+  const [reportType, setReportType] = useState2("bug");
+  const [description, setDescription] = useState2("");
+  const [severity, setSeverity] = useState2("medium");
+  const [submitting, setSubmitting] = useState2(false);
+  const [submitted, setSubmitted] = useState2(false);
+  const [justPassed, setJustPassed] = useState2(false);
+  const [criteriaResults, setCriteriaResults] = useState2({});
+  useEffect2(() => {
+    setCriteriaResults({});
+    setShowSteps(false);
+  }, [displayedAssignment?.id]);
+  if (isLoading || !shouldShowWidget) {
+    return null;
+  }
+  const pendingCount = assignments.filter((a) => a.status === "pending").length;
+  const inProgressCount = assignments.filter((a) => a.status === "in_progress").length;
+  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: "unknown" },
+      deviceInfo: getDeviceInfo()
+    });
+    await refreshAssignments();
+    setSubmitting(false);
+    setJustPassed(true);
+    setTimeout(() => {
+      setJustPassed(false);
+      setSelectedTestId(null);
+      setTestView("detail");
+    }, 1200);
+  };
+  const handleFail = () => {
+    setActiveTab("report");
+    setReportType("test_fail");
+  };
+  const handleSubmitReport = async () => {
+    if (!client || !description.trim()) return;
+    setSubmitting(true);
+    const isTestFailure = reportType === "test_fail" && displayedAssignment;
+    await client.submitReport({
+      type: reportType,
+      description,
+      severity: reportType === "bug" || reportType === "test_fail" ? severity : void 0,
+      assignmentId: isTestFailure ? displayedAssignment.id : void 0,
+      testCaseId: isTestFailure ? displayedAssignment.testCase.id : void 0,
+      appContext: getAppContext?.() || { currentRoute: "unknown" },
+      deviceInfo: getDeviceInfo()
+    });
+    setDescription("");
+    setSeverity("medium");
+    setSubmitted(true);
+    if (isTestFailure) {
+      await refreshAssignments();
+    }
+    setTimeout(() => {
+      setSubmitted(false);
+      setActiveTab("tests");
+      if (isTestFailure) {
+        setSelectedTestId(null);
+        setTestView("list");
+      }
+    }, 2e3);
+    setSubmitting(false);
+  };
+  const handleNavigate = () => {
+    if (displayedAssignment?.testCase.targetRoute && onNavigate) {
+      onNavigate(displayedAssignment.testCase.targetRoute);
+      setModalVisible(false);
+    }
+  };
+  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("");
+  };
+  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 getPriorityColor = (priority) => {
+    switch (priority) {
+      case "urgent":
+        return "#DC2626";
+      case "high":
+        return "#F97316";
+      case "normal":
+        return "#6B7280";
+      case "low":
+        return "#9CA3AF";
+      default:
+        return "#6B7280";
+    }
+  };
+  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 staticPositionStyle = position === "bottom-right" ? { right: 16, bottom: 100 } : { left: 16, bottom: 100 };
+  const renderTestContent = () => {
+    if (!displayedAssignment) return null;
+    const template = displayedAssignment.testCase.track?.testTemplate || "steps";
+    const steps = displayedAssignment.testCase.steps;
+    const info = templateInfo[template];
+    const rubricMode = displayedAssignment.testCase.track?.rubricMode || "pass_fail";
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(View, { style: [styles.templateBadge, { backgroundColor: displayedAssignment.testCase.track?.color ? `${displayedAssignment.testCase.track.color}20` : "#F3F4F6" }] }, /* @__PURE__ */ React2.createElement(Text, { style: styles.templateIcon }, info.icon), /* @__PURE__ */ React2.createElement(Text, { style: styles.templateName }, info.name), /* @__PURE__ */ React2.createElement(Text, { style: styles.templateAction }, "\u2022 ", info.action)), /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: () => setShowSteps(!showSteps), style: styles.stepsToggle }, /* @__PURE__ */ React2.createElement(Text, { style: styles.stepsToggleText }, showSteps ? "\u25BC" : "\u25B6", " ", template === "freeform" ? "Instructions" : `${steps.length} ${template === "checklist" ? "items" : template === "rubric" ? "criteria" : "steps"}`)), showSteps && template === "steps" && /* @__PURE__ */ React2.createElement(View, { style: styles.stepsList }, steps.map((step, idx) => /* @__PURE__ */ React2.createElement(View, { key: idx, style: styles.step }, /* @__PURE__ */ React2.createElement(View, { style: styles.stepNumber }, /* @__PURE__ */ React2.createElement(Text, { style: styles.stepNumberText }, step.stepNumber)), /* @__PURE__ */ React2.createElement(View, { style: styles.stepContent }, /* @__PURE__ */ React2.createElement(Text, { style: styles.stepAction }, step.action), step.expectedResult && /* @__PURE__ */ React2.createElement(Text, { style: styles.stepExpected }, "\u2192 ", step.expectedResult))))), showSteps && template === "checklist" && /* @__PURE__ */ React2.createElement(View, { style: styles.stepsList }, steps.map((step, idx) => /* @__PURE__ */ React2.createElement(
+      TouchableOpacity,
+      {
+        key: idx,
+        onPress: () => setCriteriaResults((prev) => {
+          const newResults = { ...prev };
+          if (prev[idx] === true) {
+            delete newResults[idx];
+          } else {
+            newResults[idx] = true;
+          }
+          return newResults;
+        }),
+        style: [
+          styles.checklistItem,
+          criteriaResults[idx] === true && styles.checklistItemChecked
+        ]
+      },
+      /* @__PURE__ */ React2.createElement(View, { style: [
+        styles.checkbox,
+        criteriaResults[idx] === true && styles.checkboxChecked
+      ] }, criteriaResults[idx] === true && /* @__PURE__ */ React2.createElement(Text, { style: styles.checkmark }, "\u2713")),
+      /* @__PURE__ */ React2.createElement(Text, { style: [
+        styles.checklistText,
+        criteriaResults[idx] === true && styles.checklistTextChecked
+      ] }, step.action)
+    )), /* @__PURE__ */ React2.createElement(View, { style: styles.resetRow }, /* @__PURE__ */ React2.createElement(Text, { style: styles.helperText }, "Tap to check off each item"), Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: () => setCriteriaResults({}) }, /* @__PURE__ */ React2.createElement(Text, { style: styles.resetText }, "\u21BA Reset")))), showSteps && template === "rubric" && /* @__PURE__ */ React2.createElement(View, { style: styles.stepsList }, steps.map((step, idx) => /* @__PURE__ */ React2.createElement(View, { key: idx, style: styles.rubricItem }, /* @__PURE__ */ React2.createElement(View, { style: styles.rubricHeader }, /* @__PURE__ */ React2.createElement(View, { style: styles.rubricNumber }, /* @__PURE__ */ React2.createElement(Text, { style: styles.rubricNumberText }, idx + 1)), /* @__PURE__ */ React2.createElement(Text, { style: styles.rubricTitle }, step.action)), step.expectedResult && /* @__PURE__ */ React2.createElement(Text, { style: styles.rubricExpected }, step.expectedResult), rubricMode === "pass_fail" && /* @__PURE__ */ React2.createElement(View, { style: styles.passFailButtons }, /* @__PURE__ */ React2.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => setCriteriaResults((prev) => ({ ...prev, [idx]: true })),
+        style: [
+          styles.passFailButton,
+          criteriaResults[idx] === true && styles.passButtonActive
+        ]
+      },
+      /* @__PURE__ */ React2.createElement(Text, { style: [
+        styles.passFailButtonText,
+        criteriaResults[idx] === true && styles.passButtonTextActive
+      ] }, "\u2713 Pass")
+    ), /* @__PURE__ */ React2.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => setCriteriaResults((prev) => ({ ...prev, [idx]: false })),
+        style: [
+          styles.passFailButton,
+          criteriaResults[idx] === false && styles.failButtonActive
+        ]
+      },
+      /* @__PURE__ */ React2.createElement(Text, { style: [
+        styles.passFailButtonText,
+        criteriaResults[idx] === false && styles.failButtonTextActive
+      ] }, "\u2717 Fail")
+    )), rubricMode === "rating" && /* @__PURE__ */ React2.createElement(View, { style: styles.ratingButtons }, [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ React2.createElement(
+      TouchableOpacity,
+      {
+        key: n,
+        onPress: () => setCriteriaResults((prev) => ({ ...prev, [idx]: n })),
+        style: [
+          styles.ratingButton,
+          criteriaResults[idx] === n && styles.ratingButtonActive
+        ]
+      },
+      /* @__PURE__ */ React2.createElement(Text, { style: [
+        styles.ratingButtonText,
+        criteriaResults[idx] === n && styles.ratingButtonTextActive
+      ] }, n)
+    ))))), /* @__PURE__ */ React2.createElement(View, { style: styles.resetRow }, /* @__PURE__ */ React2.createElement(Text, { style: styles.helperText }, rubricMode === "rating" ? "Rate 1-5 for each criterion" : "Mark each as Pass or Fail"), Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: () => setCriteriaResults({}) }, /* @__PURE__ */ React2.createElement(Text, { style: styles.resetText }, "\u21BA Reset")))), showSteps && template === "freeform" && /* @__PURE__ */ React2.createElement(View, { style: styles.freeformBox }, /* @__PURE__ */ React2.createElement(Text, { style: styles.freeformTitle }, "\u{1F4AD} Open Observation"), /* @__PURE__ */ React2.createElement(Text, { style: styles.freeformText }, "Review the area and note:"), /* @__PURE__ */ React2.createElement(Text, { style: styles.freeformBullet }, "\u2022 What works well"), /* @__PURE__ */ React2.createElement(Text, { style: styles.freeformBullet }, "\u2022 Issues or concerns"), /* @__PURE__ */ React2.createElement(Text, { style: styles.freeformBullet }, "\u2022 Suggestions")));
+  };
+  const totalBadgeCount = pendingCount + unreadCount;
+  const renderButtonContent = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Text, { style: styles.fabEmoji }, "\u{1F43B}"), totalBadgeCount > 0 && /* @__PURE__ */ React2.createElement(View, { style: [styles.badge, unreadCount > 0 && pendingCount === 0 && styles.messageBadge] }, /* @__PURE__ */ React2.createElement(Text, { style: styles.badgeText }, totalBadgeCount)));
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, draggable ? /* @__PURE__ */ React2.createElement(
+    Animated.View,
+    {
+      ...panResponder.panHandlers,
+      style: [
+        styles.fab,
+        styles.fabDraggable,
+        buttonStyle,
+        {
+          transform: [
+            { translateX: pan.x },
+            { translateY: pan.y }
+          ]
+        }
+      ]
+    },
+    renderButtonContent()
+  ) : /* @__PURE__ */ React2.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.fab, staticPositionStyle, buttonStyle],
+      onPress: () => setModalVisible(true),
+      activeOpacity: 0.8
+    },
+    renderButtonContent()
+  ), /* @__PURE__ */ React2.createElement(
+    Modal,
+    {
+      visible: modalVisible,
+      animationType: "slide",
+      transparent: true,
+      onRequestClose: () => setModalVisible(false)
+    },
+    /* @__PURE__ */ React2.createElement(
+      KeyboardAvoidingView,
+      {
+        behavior: Platform2.OS === "ios" ? "padding" : "height",
+        style: styles.modalContainer
+      },
+      /* @__PURE__ */ React2.createElement(View, { style: styles.modalContent }, /* @__PURE__ */ React2.createElement(View, { style: styles.header }, /* @__PURE__ */ React2.createElement(View, { style: styles.headerLeft }, /* @__PURE__ */ React2.createElement(Text, { style: styles.headerEmoji }, "\u{1F43B}"), /* @__PURE__ */ React2.createElement(View, null, /* @__PURE__ */ React2.createElement(Text, { style: styles.headerTitle }, "BugBear"), /* @__PURE__ */ React2.createElement(Text, { style: styles.headerSubtitle }, testerInfo?.name))), /* @__PURE__ */ React2.createElement(
+        TouchableOpacity,
+        {
+          onPress: () => setModalVisible(false),
+          style: styles.closeButton
+        },
+        /* @__PURE__ */ React2.createElement(Text, { style: styles.closeButtonText }, "\u2715")
+      )), /* @__PURE__ */ React2.createElement(View, { style: styles.tabs }, /* @__PURE__ */ React2.createElement(
+        TouchableOpacity,
+        {
+          style: [styles.tab, activeTab === "tests" && styles.activeTab],
+          onPress: () => setActiveTab("tests")
+        },
+        /* @__PURE__ */ React2.createElement(Text, { style: [styles.tabText, activeTab === "tests" && styles.activeTabText] }, "Tests ", pendingCount > 0 && `(${pendingCount})`)
+      ), /* @__PURE__ */ React2.createElement(
+        TouchableOpacity,
+        {
+          style: [styles.tab, activeTab === "messages" && styles.activeTab],
+          onPress: () => setActiveTab("messages")
+        },
+        /* @__PURE__ */ React2.createElement(View, { style: styles.tabWithBadge }, /* @__PURE__ */ React2.createElement(Text, { style: [styles.tabText, activeTab === "messages" && styles.activeTabText] }, "Messages"), unreadCount > 0 && /* @__PURE__ */ React2.createElement(View, { style: styles.tabBadge }, /* @__PURE__ */ React2.createElement(Text, { style: styles.tabBadgeText }, unreadCount)))
+      ), /* @__PURE__ */ React2.createElement(
+        TouchableOpacity,
+        {
+          style: [styles.tab, activeTab === "report" && styles.activeTab],
+          onPress: () => setActiveTab("report")
+        },
+        /* @__PURE__ */ React2.createElement(Text, { style: [styles.tabText, activeTab === "report" && styles.activeTabText] }, "Report")
+      )), /* @__PURE__ */ React2.createElement(ScrollView, { style: styles.content }, activeTab === "tests" && /* @__PURE__ */ React2.createElement(View, null, assignments.length === 0 ? /* @__PURE__ */ React2.createElement(View, { style: styles.emptyState }, /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyEmoji }, "\u2705"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyTitle }, "All caught up!"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptySubtitle }, "No tests assigned")) : testView === "list" ? (
+        /* List View - Show all tests */
+        /* @__PURE__ */ React2.createElement(View, null, /* @__PURE__ */ React2.createElement(Text, { style: styles.listHeader }, assignments.length, " test", assignments.length !== 1 ? "s" : "", " assigned"), assignments.map((assignment) => /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            key: assignment.id,
+            onPress: () => {
+              setSelectedTestId(assignment.id);
+              setTestView("detail");
+              setShowSteps(false);
+            },
+            style: [
+              styles.listItem,
+              assignment.id === currentAssignment?.id && styles.listItemCurrent
+            ]
+          },
+          /* @__PURE__ */ React2.createElement(View, { style: styles.listItemHeader }, /* @__PURE__ */ React2.createElement(Text, { style: styles.listItemKey }, assignment.testCase.testKey), /* @__PURE__ */ React2.createElement(View, { style: styles.listItemBadges }, assignment.testCase.track && /* @__PURE__ */ React2.createElement(View, { style: [styles.trackBadge, { backgroundColor: assignment.testCase.track.color }] }, /* @__PURE__ */ React2.createElement(Text, { style: styles.trackBadgeText }, templateInfo[assignment.testCase.track.testTemplate || "steps"].icon)), /* @__PURE__ */ React2.createElement(View, { style: [
+            styles.priorityBadge,
+            assignment.testCase.priority === "P0" && styles.priorityP0,
+            assignment.testCase.priority === "P1" && styles.priorityP1
+          ] }, /* @__PURE__ */ React2.createElement(Text, { style: styles.priorityText }, assignment.testCase.priority)))),
+          /* @__PURE__ */ React2.createElement(Text, { style: styles.listItemTitle, numberOfLines: 2 }, assignment.testCase.title),
+          /* @__PURE__ */ React2.createElement(View, { style: styles.listItemMeta }, /* @__PURE__ */ React2.createElement(Text, { style: styles.listItemMetaText }, assignment.testCase.steps.length, " ", assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"), assignment.id === currentAssignment?.id && /* @__PURE__ */ React2.createElement(Text, { style: styles.currentBadge }, "\u2022 Current"))
+        )))
+      ) : justPassed ? (
+        /* Success state after passing */
+        /* @__PURE__ */ React2.createElement(View, { style: styles.emptyState }, /* @__PURE__ */ React2.createElement(Text, { style: styles.passedEmoji }, "\u2713"), /* @__PURE__ */ React2.createElement(Text, { style: styles.passedTitle }, "Passed!"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptySubtitle }, "Loading next test..."))
+      ) : displayedAssignment ? (
+        /* Detail View - Show single test */
+        /* @__PURE__ */ React2.createElement(View, null, /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            onPress: () => {
+              setTestView("list");
+              setSelectedTestId(null);
+            },
+            style: styles.backButton
+          },
+          /* @__PURE__ */ React2.createElement(Text, { style: styles.backButtonText }, "\u2190 All Tests (", assignments.length, ")")
+        ), /* @__PURE__ */ React2.createElement(View, { style: styles.testCard }, /* @__PURE__ */ React2.createElement(View, { style: styles.testHeader }, /* @__PURE__ */ React2.createElement(Text, { style: styles.testKey }, displayedAssignment.testCase.testKey), /* @__PURE__ */ React2.createElement(View, { style: styles.testHeaderBadges }, displayedAssignment.testCase.track && /* @__PURE__ */ React2.createElement(View, { style: [styles.trackBadge, { backgroundColor: displayedAssignment.testCase.track.color }] }, /* @__PURE__ */ React2.createElement(Text, { style: styles.trackBadgeText }, templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon)), /* @__PURE__ */ React2.createElement(View, { style: [
+          styles.priorityBadge,
+          displayedAssignment.testCase.priority === "P0" && styles.priorityP0,
+          displayedAssignment.testCase.priority === "P1" && styles.priorityP1
+        ] }, /* @__PURE__ */ React2.createElement(Text, { style: styles.priorityText }, displayedAssignment.testCase.priority)))), /* @__PURE__ */ React2.createElement(Text, { style: styles.testTitle }, displayedAssignment.testCase.title), displayedAssignment.testCase.description && /* @__PURE__ */ React2.createElement(Text, { style: styles.testDescription }, displayedAssignment.testCase.description), displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: handleNavigate, style: styles.navigateButton }, /* @__PURE__ */ React2.createElement(Text, { style: styles.navigateButtonText }, "Go to test location \u2192")), renderTestContent(), /* @__PURE__ */ React2.createElement(View, { style: styles.expectedResult }, /* @__PURE__ */ React2.createElement(Text, { style: styles.expectedLabel }, displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:"), /* @__PURE__ */ React2.createElement(Text, { style: styles.expectedText }, displayedAssignment.testCase.expectedResult))), /* @__PURE__ */ React2.createElement(View, { style: styles.actionButtons }, /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            style: styles.failButton,
+            onPress: handleFail,
+            disabled: submitting
+          },
+          /* @__PURE__ */ React2.createElement(Text, { style: styles.failButtonText }, "\u2717 Fail")
+        ), /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            style: styles.passButton,
+            onPress: handlePass,
+            disabled: submitting
+          },
+          /* @__PURE__ */ React2.createElement(Text, { style: styles.passButtonText }, submitting ? "..." : "\u2713 Pass")
+        )))
+      ) : null), activeTab === "messages" && /* @__PURE__ */ React2.createElement(View, null, messageView === "list" ? (
+        /* Thread List View */
+        /* @__PURE__ */ React2.createElement(View, null, threads.length === 0 ? /* @__PURE__ */ React2.createElement(View, { style: styles.emptyState }, /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyEmoji }, "\u{1F4AC}"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyTitle }, "No messages yet"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptySubtitle }, "Messages from admins will appear here")) : /* @__PURE__ */ React2.createElement(View, null, threads.map((thread) => /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            key: thread.id,
+            onPress: () => handleOpenThread(thread),
+            style: [
+              styles.threadItem,
+              thread.unreadCount > 0 && styles.threadItemUnread
+            ]
+          },
+          /* @__PURE__ */ React2.createElement(View, { style: styles.threadHeader }, /* @__PURE__ */ React2.createElement(View, { style: styles.threadTitleRow }, thread.isPinned && /* @__PURE__ */ React2.createElement(Text, { style: styles.pinnedIcon }, "\u{1F4CC}"), /* @__PURE__ */ React2.createElement(Text, { style: styles.threadTypeIcon }, getThreadTypeIcon(thread.threadType)), /* @__PURE__ */ React2.createElement(
+            Text,
+            {
+              style: [styles.threadSubject, thread.unreadCount > 0 && styles.threadSubjectUnread],
+              numberOfLines: 1
+            },
+            thread.subject || "No subject"
+          )), (thread.priority === "high" || thread.priority === "urgent") && /* @__PURE__ */ React2.createElement(View, { style: [styles.priorityDot, { backgroundColor: getPriorityColor(thread.priority) }] })),
+          thread.lastMessage && /* @__PURE__ */ React2.createElement(Text, { style: styles.threadPreview, numberOfLines: 1 }, thread.lastMessage.senderName, ": ", thread.lastMessage.content),
+          /* @__PURE__ */ React2.createElement(View, { style: styles.threadMeta }, thread.unreadCount > 0 ? /* @__PURE__ */ React2.createElement(View, { style: styles.unreadBadge }, /* @__PURE__ */ React2.createElement(Text, { style: styles.unreadBadgeText }, thread.unreadCount, " new")) : /* @__PURE__ */ React2.createElement(Text, { style: styles.threadMetaText }, "Read"), /* @__PURE__ */ React2.createElement(Text, { style: styles.threadTime }, formatRelativeTime(thread.lastMessageAt)))
+        ))))
+      ) : (
+        /* Thread Detail View */
+        /* @__PURE__ */ React2.createElement(View, { style: styles.threadDetailContainer }, /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: handleBackToThreadList, style: styles.backButton }, /* @__PURE__ */ React2.createElement(Text, { style: styles.backButtonText }, "\u2190 Back to Messages")), selectedThread && /* @__PURE__ */ React2.createElement(View, { style: styles.threadDetailHeader }, /* @__PURE__ */ React2.createElement(Text, { style: styles.threadDetailIcon }, getThreadTypeIcon(selectedThread.threadType)), /* @__PURE__ */ React2.createElement(Text, { style: styles.threadDetailSubject, numberOfLines: 2 }, selectedThread.subject || "No subject")), loadingMessages ? /* @__PURE__ */ React2.createElement(View, { style: styles.loadingMessages }, /* @__PURE__ */ React2.createElement(Text, { style: styles.loadingText }, "Loading messages...")) : /* @__PURE__ */ React2.createElement(View, { style: styles.messagesContainer }, threadMessages.map((message) => /* @__PURE__ */ React2.createElement(
+          View,
+          {
+            key: message.id,
+            style: [
+              styles.messageBubble,
+              message.senderType === "tester" ? styles.messageBubbleTester : styles.messageBubbleAdmin
+            ]
+          },
+          /* @__PURE__ */ React2.createElement(Text, { style: [
+            styles.messageSender,
+            message.senderType === "tester" && styles.messageSenderTester
+          ] }, message.senderType === "tester" ? "You" : message.senderName),
+          /* @__PURE__ */ React2.createElement(Text, { style: [
+            styles.messageContent,
+            message.senderType === "tester" && styles.messageContentTester
+          ] }, message.content),
+          /* @__PURE__ */ React2.createElement(Text, { style: [
+            styles.messageTime,
+            message.senderType === "tester" && styles.messageTimeTester
+          ] }, formatMessageTime(message.createdAt))
+        ))))
+      )), activeTab === "report" && /* @__PURE__ */ React2.createElement(View, null, submitted ? /* @__PURE__ */ React2.createElement(View, { style: styles.emptyState }, /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyEmoji }, "\u{1F389}"), /* @__PURE__ */ React2.createElement(Text, { style: styles.emptyTitle }, "Report submitted!")) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(View, { style: styles.reportTypes }, [
+        { type: "bug", label: "\u{1F41B} Bug" },
+        { type: "feedback", label: "\u{1F4A1} Feedback" },
+        { type: "suggestion", label: "\u2728 Idea" }
+      ].map(({ type, label }) => /* @__PURE__ */ React2.createElement(
+        TouchableOpacity,
+        {
+          key: type,
+          style: [
+            styles.reportTypeButton,
+            reportType === type && styles.reportTypeActive
+          ],
+          onPress: () => setReportType(type)
+        },
+        /* @__PURE__ */ React2.createElement(Text, { style: [
+          styles.reportTypeText,
+          reportType === type && styles.reportTypeTextActive
+        ] }, label)
+      ))), (reportType === "bug" || reportType === "test_fail") && /* @__PURE__ */ React2.createElement(View, { style: styles.severitySection }, /* @__PURE__ */ React2.createElement(Text, { style: styles.label }, "Severity"), /* @__PURE__ */ React2.createElement(View, { style: styles.severityButtons }, ["critical", "high", "medium", "low"].map((sev) => {
+        const activeStyles = {
+          critical: styles.severityCriticalActive,
+          high: styles.severityHighActive,
+          medium: styles.severityMediumActive,
+          low: styles.severityLowActive
+        };
+        return /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            key: sev,
+            style: [
+              styles.severityButton,
+              severity === sev && activeStyles[sev]
+            ],
+            onPress: () => setSeverity(sev)
+          },
+          /* @__PURE__ */ React2.createElement(Text, { style: [
+            styles.severityText,
+            severity === sev && styles.severityTextActive
+          ] }, sev)
+        );
+      }))), /* @__PURE__ */ React2.createElement(View, { style: styles.descriptionSection }, /* @__PURE__ */ React2.createElement(Text, { style: styles.label }, "What happened?"), /* @__PURE__ */ React2.createElement(
+        TextInput,
+        {
+          style: styles.textInput,
+          value: description,
+          onChangeText: setDescription,
+          placeholder: "Describe the issue...",
+          placeholderTextColor: "#9CA3AF",
+          multiline: true,
+          numberOfLines: 4,
+          textAlignVertical: "top"
+        }
+      )), /* @__PURE__ */ React2.createElement(
+        TouchableOpacity,
+        {
+          style: [
+            styles.submitButton,
+            (!description.trim() || submitting) && styles.submitButtonDisabled
+          ],
+          onPress: handleSubmitReport,
+          disabled: !description.trim() || submitting
+        },
+        /* @__PURE__ */ React2.createElement(Text, { style: styles.submitButtonText }, submitting ? "Submitting..." : "Submit Report")
+      )))), activeTab === "messages" && messageView === "thread" && selectedThread ? (
+        /* Reply Composer */
+        /* @__PURE__ */ React2.createElement(View, { style: styles.replyComposer }, /* @__PURE__ */ React2.createElement(
+          TextInput,
+          {
+            style: styles.replyInput,
+            value: replyText,
+            onChangeText: setReplyText,
+            placeholder: "Type a reply...",
+            placeholderTextColor: "#9CA3AF",
+            multiline: true,
+            maxLength: 1e3
+          }
+        ), /* @__PURE__ */ React2.createElement(
+          TouchableOpacity,
+          {
+            style: [
+              styles.sendButton,
+              (!replyText.trim() || sendingReply) && styles.sendButtonDisabled
+            ],
+            onPress: handleSendReply,
+            disabled: !replyText.trim() || sendingReply
+          },
+          /* @__PURE__ */ React2.createElement(Text, { style: styles.sendButtonText }, sendingReply ? "..." : "Send")
+        ))
+      ) : (
+        /* Standard Footer */
+        /* @__PURE__ */ React2.createElement(View, { style: styles.footer }, activeTab === "messages" ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Text, { style: styles.footerText }, threads.length, " thread", threads.length !== 1 ? "s" : "", " \xB7 ", unreadCount, " unread"), /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: refreshThreads }, /* @__PURE__ */ React2.createElement(Text, { style: styles.refreshText }, "\u21BB Refresh"))) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Text, { style: styles.footerText }, pendingCount, " pending \xB7 ", inProgressCount, " in progress"), /* @__PURE__ */ React2.createElement(TouchableOpacity, { onPress: refreshAssignments }, /* @__PURE__ */ React2.createElement(Text, { style: styles.refreshText }, "\u21BB Refresh"))))
+      ))
+    )
+  ));
+}
+var styles = StyleSheet.create({
+  fab: {
+    position: "absolute",
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: "#7C3AED",
+    justifyContent: "center",
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+    zIndex: 999999
+  },
+  fabDraggable: {
+    // When draggable, position is controlled by transforms
+    // so we use top/left: 0 as the base
+    top: 0,
+    left: 0
+  },
+  fabEmoji: {
+    fontSize: 28
+  },
+  badge: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    backgroundColor: "#EF4444",
+    borderRadius: 10,
+    minWidth: 20,
+    height: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 6
+  },
+  badgeText: {
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: "bold"
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  modalContent: {
+    backgroundColor: "#fff",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: "85%"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: "#7C3AED",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  headerEmoji: {
+    fontSize: 24,
+    marginRight: 10
+  },
+  headerTitle: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  headerSubtitle: {
+    color: "#DDD6FE",
+    fontSize: 12
+  },
+  closeButton: {
+    padding: 8
+  },
+  closeButtonText: {
+    color: "#fff",
+    fontSize: 18
+  },
+  tabs: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: "#E5E7EB"
+  },
+  tab: {
+    flex: 1,
+    paddingVertical: 12,
+    alignItems: "center"
+  },
+  activeTab: {
+    borderBottomWidth: 2,
+    borderBottomColor: "#7C3AED"
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#6B7280"
+  },
+  activeTabText: {
+    color: "#7C3AED"
+  },
+  content: {
+    padding: 16,
+    maxHeight: 400
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderTopWidth: 1,
+    borderTopColor: "#E5E7EB",
+    backgroundColor: "#F9FAFB"
+  },
+  footerText: {
+    fontSize: 12,
+    color: "#9CA3AF"
+  },
+  refreshText: {
+    fontSize: 12,
+    color: "#6B7280"
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyEmoji: {
+    fontSize: 48
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#374151",
+    marginTop: 12
+  },
+  passedEmoji: {
+    fontSize: 56,
+    color: "#22C55E"
+  },
+  passedTitle: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#22C55E",
+    marginTop: 12
+  },
+  emptySubtitle: {
+    fontSize: 14,
+    color: "#9CA3AF",
+    marginTop: 4
+  },
+  // List view styles
+  listHeader: {
+    fontSize: 12,
+    color: "#6B7280",
+    marginBottom: 12
+  },
+  listItem: {
+    backgroundColor: "#F9FAFB",
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: "#E5E7EB"
+  },
+  listItemCurrent: {
+    backgroundColor: "#EDE9FE",
+    borderColor: "#C4B5FD"
+  },
+  listItemHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  listItemKey: {
+    fontSize: 12,
+    fontFamily: Platform2.OS === "ios" ? "Menlo" : "monospace",
+    color: "#6B7280"
+  },
+  listItemBadges: {
+    flexDirection: "row",
+    gap: 4
+  },
+  listItemTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 4
+  },
+  listItemMeta: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  listItemMetaText: {
+    fontSize: 12,
+    color: "#9CA3AF"
+  },
+  currentBadge: {
+    fontSize: 12,
+    color: "#7C3AED",
+    fontWeight: "600",
+    marginLeft: 8
+  },
+  // Back button
+  backButton: {
+    marginBottom: 12
+  },
+  backButtonText: {
+    fontSize: 14,
+    color: "#7C3AED",
+    fontWeight: "500"
+  },
+  // Test card styles
+  testCard: {
+    backgroundColor: "#F9FAFB",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16
+  },
+  testHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  testHeaderBadges: {
+    flexDirection: "row",
+    gap: 4
+  },
+  testKey: {
+    fontSize: 12,
+    fontFamily: Platform2.OS === "ios" ? "Menlo" : "monospace",
+    color: "#6B7280"
+  },
+  trackBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  trackBadgeText: {
+    fontSize: 12,
+    color: "#fff"
+  },
+  priorityBadge: {
+    backgroundColor: "#E5E7EB",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  priorityP0: {
+    backgroundColor: "#FEE2E2"
+  },
+  priorityP1: {
+    backgroundColor: "#FED7AA"
+  },
+  priorityText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#374151"
+  },
+  testTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 4
+  },
+  testDescription: {
+    fontSize: 14,
+    color: "#6B7280",
+    marginBottom: 8
+  },
+  // Navigate button
+  navigateButton: {
+    backgroundColor: "#EFF6FF",
+    borderWidth: 1,
+    borderColor: "#BFDBFE",
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    alignItems: "center",
+    marginBottom: 12
+  },
+  navigateButtonText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#1D4ED8"
+  },
+  // Template badge
+  templateBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    marginBottom: 8
+  },
+  templateIcon: {
+    fontSize: 14,
+    marginRight: 6
+  },
+  templateName: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#374151",
+    marginRight: 4
+  },
+  templateAction: {
+    fontSize: 12,
+    color: "#6B7280"
+  },
+  // Steps toggle
+  stepsToggle: {
+    paddingVertical: 8
+  },
+  stepsToggleText: {
+    fontSize: 14,
+    color: "#7C3AED",
+    fontWeight: "500"
+  },
+  stepsList: {
+    marginTop: 8
+  },
+  step: {
+    flexDirection: "row",
+    marginBottom: 12
+  },
+  stepNumber: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#EDE9FE",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12
+  },
+  stepNumberText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#7C3AED"
+  },
+  stepContent: {
+    flex: 1
+  },
+  stepAction: {
+    fontSize: 14,
+    color: "#374151"
+  },
+  stepExpected: {
+    fontSize: 12,
+    color: "#9CA3AF",
+    marginTop: 2
+  },
+  // Checklist styles
+  checklistItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8
+  },
+  checklistItemChecked: {
+    backgroundColor: "#ECFDF5",
+    borderColor: "#86EFAC"
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: "#22D3EE",
+    marginRight: 12,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  checkboxChecked: {
+    backgroundColor: "#22C55E",
+    borderColor: "#22C55E"
+  },
+  checkmark: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "bold"
+  },
+  checklistText: {
+    flex: 1,
+    fontSize: 14,
+    color: "#374151"
+  },
+  checklistTextChecked: {
+    color: "#15803D"
+  },
+  // Rubric styles
+  rubricItem: {
+    backgroundColor: "#fff",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8
+  },
+  rubricHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  rubricNumber: {
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    backgroundColor: "#EDE9FE",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8
+  },
+  rubricNumberText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#7C3AED"
+  },
+  rubricTitle: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#111827"
+  },
+  rubricExpected: {
+    fontSize: 12,
+    color: "#6B7280",
+    marginLeft: 32,
+    marginBottom: 8
+  },
+  passFailButtons: {
+    flexDirection: "row",
+    gap: 8,
+    marginLeft: 32
+  },
+  passFailButton: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    backgroundColor: "#F3F4F6",
+    alignItems: "center"
+  },
+  passButtonActive: {
+    backgroundColor: "#22C55E"
+  },
+  failButtonActive: {
+    backgroundColor: "#EF4444"
+  },
+  passFailButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#6B7280"
+  },
+  passButtonTextActive: {
+    color: "#fff"
+  },
+  failButtonTextActive: {
+    color: "#fff"
+  },
+  ratingButtons: {
+    flexDirection: "row",
+    gap: 6,
+    marginLeft: 32
+  },
+  ratingButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 6,
+    backgroundColor: "#F3F4F6",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  ratingButtonActive: {
+    backgroundColor: "#7C3AED"
+  },
+  ratingButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#6B7280"
+  },
+  ratingButtonTextActive: {
+    color: "#fff"
+  },
+  // Reset row
+  resetRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: 8
+  },
+  helperText: {
+    fontSize: 12,
+    color: "#9CA3AF"
+  },
+  resetText: {
+    fontSize: 12,
+    color: "#9CA3AF"
+  },
+  // Freeform styles
+  freeformBox: {
+    backgroundColor: "#FFFBEB",
+    borderWidth: 1,
+    borderColor: "#FDE68A",
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 8
+  },
+  freeformTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#92400E",
+    marginBottom: 4
+  },
+  freeformText: {
+    fontSize: 12,
+    color: "#A16207",
+    marginBottom: 4
+  },
+  freeformBullet: {
+    fontSize: 12,
+    color: "#A16207",
+    marginLeft: 8
+  },
+  // Expected result
+  expectedResult: {
+    backgroundColor: "#ECFDF5",
+    padding: 12,
+    borderRadius: 8,
+    marginTop: 12
+  },
+  expectedLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#065F46",
+    marginBottom: 4
+  },
+  expectedText: {
+    fontSize: 14,
+    color: "#047857"
+  },
+  // Action buttons
+  actionButtons: {
+    flexDirection: "row",
+    gap: 12
+  },
+  failButton: {
+    flex: 1,
+    backgroundColor: "#FEE2E2",
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center"
+  },
+  failButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#DC2626"
+  },
+  passButton: {
+    flex: 1,
+    backgroundColor: "#16A34A",
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center"
+  },
+  passButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  // Report form styles
+  reportTypes: {
+    flexDirection: "row",
+    gap: 8,
+    marginBottom: 16
+  },
+  reportTypeButton: {
+    flex: 1,
+    backgroundColor: "#F3F4F6",
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: "center"
+  },
+  reportTypeActive: {
+    backgroundColor: "#EDE9FE",
+    borderWidth: 2,
+    borderColor: "#7C3AED"
+  },
+  reportTypeText: {
+    fontSize: 14,
+    color: "#6B7280"
+  },
+  reportTypeTextActive: {
+    color: "#7C3AED",
+    fontWeight: "600"
+  },
+  severitySection: {
+    marginBottom: 16
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#374151",
+    marginBottom: 8
+  },
+  severityButtons: {
+    flexDirection: "row",
+    gap: 6
+  },
+  severityButton: {
+    flex: 1,
+    backgroundColor: "#F3F4F6",
+    paddingVertical: 8,
+    borderRadius: 6,
+    alignItems: "center"
+  },
+  severityCriticalActive: {
+    backgroundColor: "#DC2626"
+  },
+  severityHighActive: {
+    backgroundColor: "#F97316"
+  },
+  severityMediumActive: {
+    backgroundColor: "#EAB308"
+  },
+  severityLowActive: {
+    backgroundColor: "#6B7280"
+  },
+  severityText: {
+    fontSize: 12,
+    color: "#6B7280",
+    textTransform: "capitalize"
+  },
+  severityTextActive: {
+    color: "#fff",
+    fontWeight: "600"
+  },
+  descriptionSection: {
+    marginBottom: 16
+  },
+  textInput: {
+    backgroundColor: "#F9FAFB",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 12,
+    padding: 12,
+    fontSize: 14,
+    minHeight: 100,
+    color: "#111827"
+  },
+  submitButton: {
+    backgroundColor: "#7C3AED",
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center"
+  },
+  submitButtonDisabled: {
+    opacity: 0.5
+  },
+  submitButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  // Message badge (when only messages, not tests)
+  messageBadge: {
+    backgroundColor: "#3B82F6"
+  },
+  // Tab with badge
+  tabWithBadge: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  tabBadge: {
+    backgroundColor: "#EF4444",
+    borderRadius: 8,
+    minWidth: 16,
+    height: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    marginLeft: 4,
+    paddingHorizontal: 4
+  },
+  tabBadgeText: {
+    color: "#fff",
+    fontSize: 10,
+    fontWeight: "bold"
+  },
+  // Thread list styles
+  threadItem: {
+    backgroundColor: "#F9FAFB",
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: "#E5E7EB"
+  },
+  threadItemUnread: {
+    backgroundColor: "#EFF6FF",
+    borderColor: "#BFDBFE"
+  },
+  threadHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  threadTitleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  pinnedIcon: {
+    fontSize: 12,
+    marginRight: 4
+  },
+  threadTypeIcon: {
+    fontSize: 14,
+    marginRight: 6
+  },
+  threadSubject: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#374151",
+    flex: 1
+  },
+  threadSubjectUnread: {
+    fontWeight: "600",
+    color: "#111827"
+  },
+  priorityDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 8
+  },
+  threadPreview: {
+    fontSize: 13,
+    color: "#6B7280",
+    marginBottom: 4
+  },
+  threadMeta: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  threadMetaText: {
+    fontSize: 12,
+    color: "#9CA3AF"
+  },
+  unreadBadge: {
+    backgroundColor: "#3B82F6",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  unreadBadgeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  threadTime: {
+    fontSize: 12,
+    color: "#9CA3AF"
+  },
+  // Thread detail styles
+  threadDetailContainer: {
+    flex: 1
+  },
+  threadDetailHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#F3F4F6",
+    padding: 12,
+    borderRadius: 8,
+    marginBottom: 12
+  },
+  threadDetailIcon: {
+    fontSize: 18,
+    marginRight: 8
+  },
+  threadDetailSubject: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#111827"
+  },
+  loadingMessages: {
+    padding: 20,
+    alignItems: "center"
+  },
+  loadingText: {
+    fontSize: 14,
+    color: "#6B7280"
+  },
+  messagesContainer: {
+    paddingBottom: 8
+  },
+  messageBubble: {
+    maxWidth: "80%",
+    padding: 12,
+    borderRadius: 16,
+    marginBottom: 8
+  },
+  messageBubbleAdmin: {
+    alignSelf: "flex-start",
+    backgroundColor: "#F3F4F6",
+    borderBottomLeftRadius: 4
+  },
+  messageBubbleTester: {
+    alignSelf: "flex-end",
+    backgroundColor: "#7C3AED",
+    borderBottomRightRadius: 4
+  },
+  messageSender: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#6B7280",
+    marginBottom: 2
+  },
+  messageSenderTester: {
+    color: "#DDD6FE"
+  },
+  messageContent: {
+    fontSize: 14,
+    color: "#111827",
+    lineHeight: 20
+  },
+  messageContentTester: {
+    color: "#fff"
+  },
+  messageTime: {
+    fontSize: 11,
+    color: "#9CA3AF",
+    marginTop: 4,
+    textAlign: "right"
+  },
+  messageTimeTester: {
+    color: "#C4B5FD"
+  },
+  // Reply composer styles
+  replyComposer: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    padding: 12,
+    borderTopWidth: 1,
+    borderTopColor: "#E5E7EB",
+    backgroundColor: "#fff"
+  },
+  replyInput: {
+    flex: 1,
+    backgroundColor: "#F9FAFB",
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 20,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    fontSize: 14,
+    color: "#111827",
+    maxHeight: 100,
+    marginRight: 8
+  },
+  sendButton: {
+    backgroundColor: "#7C3AED",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  sendButtonDisabled: {
+    backgroundColor: "#C4B5FD"
+  },
+  sendButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#fff"
+  }
+});
+export {
+  BugBearButton,
+  BugBearProvider,
+  useBugBear
+};