@bbearai/react 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +1132 -1125
  4. package/dist/index.mjs +1132 -1125
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -235,6 +235,7 @@ function BugBearProvider({ config, children, enabled = true }) {
235
235
 
236
236
  // src/BugBearPanel.tsx
237
237
  import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useMemo } from "react";
238
+ import { createPortal } from "react-dom";
238
239
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
239
240
  function BugBearIcon({ size = 24, className = "" }) {
240
241
  return /* @__PURE__ */ jsxs(
@@ -918,614 +919,907 @@ function BugBearPanel({
918
919
  }
919
920
  setSendingNewMessage(false);
920
921
  };
921
- return /* @__PURE__ */ jsxs(
922
- "div",
923
- {
924
- ref: panelRef,
925
- className: "fixed font-sans",
926
- style: {
927
- zIndex: 2147483647,
928
- // Max z-index to stay above all modals
929
- left: panelPosition.x,
930
- top: panelPosition.y,
931
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
932
- cursor: isDragging ? "grabbing" : void 0,
933
- userSelect: isDragging ? "none" : void 0
934
- },
935
- onMouseDown: handleMouseDown,
936
- children: [
937
- collapsed && /* @__PURE__ */ jsxs(
938
- "button",
939
- {
940
- onClick: () => setCollapsed(false),
941
- "data-drag-handle": true,
942
- onDoubleClick: handleDoubleClick,
943
- className: "flex items-center gap-2 px-3 py-2 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition-colors",
944
- style: { cursor: draggable ? "grab" : "pointer" },
945
- children: [
946
- /* @__PURE__ */ jsx2(BugBearIcon, { size: 24 }),
947
- /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "BugBear" }),
948
- pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: "bg-white text-blue-400 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
949
- ]
950
- }
951
- ),
952
- !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", children: [
953
- /* @__PURE__ */ jsxs(
954
- "div",
922
+ if (typeof document === "undefined") return null;
923
+ return createPortal(
924
+ /* @__PURE__ */ jsxs(
925
+ "div",
926
+ {
927
+ ref: panelRef,
928
+ className: "fixed font-sans",
929
+ style: {
930
+ zIndex: 2147483647,
931
+ // Max z-index to stay above all modals
932
+ position: "fixed",
933
+ isolation: "isolate",
934
+ left: panelPosition.x,
935
+ top: panelPosition.y,
936
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
937
+ cursor: isDragging ? "grabbing" : void 0,
938
+ userSelect: isDragging ? "none" : void 0
939
+ },
940
+ onMouseDown: handleMouseDown,
941
+ children: [
942
+ collapsed && /* @__PURE__ */ jsxs(
943
+ "button",
955
944
  {
945
+ onClick: () => setCollapsed(false),
956
946
  "data-drag-handle": true,
957
947
  onDoubleClick: handleDoubleClick,
958
- className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800",
959
- style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default" },
948
+ className: "flex items-center gap-2 px-3 py-2 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition-colors",
949
+ style: { cursor: draggable ? "grab" : "pointer", backgroundColor: "#3b82f6", color: "#ffffff" },
960
950
  children: [
961
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
962
- /* @__PURE__ */ jsx2(BugBearIcon, { size: 28 }),
963
- /* @__PURE__ */ jsxs("div", { children: [
964
- /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [
965
- "BugBear",
966
- draggable && /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
967
- ] }),
968
- /* @__PURE__ */ jsxs(
969
- "button",
970
- {
971
- onClick: handleOpenProfile,
972
- className: "text-zinc-400 text-xs flex items-center gap-1 hover:text-white transition-colors",
973
- children: [
974
- testerInfo?.name,
975
- /* @__PURE__ */ jsx2("span", { className: "text-[10px]", children: "\u270E" })
976
- ]
977
- }
978
- )
979
- ] })
980
- ] }),
981
- /* @__PURE__ */ jsx2(
982
- "button",
983
- {
984
- onClick: () => setCollapsed(true),
985
- className: "p-1 hover:bg-zinc-800 rounded",
986
- children: /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
987
- }
988
- )
951
+ /* @__PURE__ */ jsx2(BugBearIcon, { size: 24 }),
952
+ /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "BugBear" }),
953
+ pendingCount > 0 && /* @__PURE__ */ jsx2("span", { className: "bg-white text-blue-400 text-xs font-bold px-1.5 py-0.5 rounded-full", children: pendingCount })
989
954
  ]
990
955
  }
991
956
  ),
992
- /* @__PURE__ */ jsxs("div", { className: "flex border-b border-zinc-800 bg-zinc-900", children: [
993
- /* @__PURE__ */ jsxs(
994
- "button",
995
- {
996
- onClick: () => setActiveTab("tests"),
997
- className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 border-b-2 ${activeTab === "tests" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
998
- children: [
999
- "Tests ",
1000
- pendingCount > 0 && `(${pendingCount})`
1001
- ]
1002
- }
1003
- ),
1004
- /* @__PURE__ */ jsxs(
1005
- "button",
1006
- {
1007
- onClick: () => setActiveTab("messages"),
1008
- className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 relative border-b-2 ${activeTab === "messages" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
1009
- children: [
1010
- "Messages",
1011
- unreadCount > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute top-1.5 ml-16 min-w-[18px] h-[18px] px-1 bg-blue-500 rounded-full text-[10px] text-white font-bold flex items-center justify-center", children: unreadCount })
1012
- ]
1013
- }
1014
- ),
957
+ !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", style: { backgroundColor: "#18181b", border: "1px solid #27272a", borderRadius: "0.75rem", overflow: "hidden", boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)" }, children: [
1015
958
  /* @__PURE__ */ jsxs(
1016
- "button",
959
+ "div",
1017
960
  {
1018
- onClick: () => setActiveTab("session"),
1019
- className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 relative border-b-2 ${activeTab === "session" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
961
+ "data-drag-handle": true,
962
+ onDoubleClick: handleDoubleClick,
963
+ className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800",
964
+ style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default", backgroundColor: "#09090b", color: "#ffffff", borderBottom: "1px solid #27272a", padding: "0.75rem 1rem" },
1020
965
  children: [
1021
- "Explore",
1022
- activeSession && /* @__PURE__ */ jsx2("span", { className: "absolute top-2 ml-14 w-2 h-2 bg-green-500 rounded-full animate-pulse" })
1023
- ]
1024
- }
1025
- ),
1026
- /* @__PURE__ */ jsx2(
1027
- "button",
1028
- {
1029
- onClick: () => setActiveTab("report"),
1030
- className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 border-b-2 ${activeTab === "report" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
1031
- children: "Report"
1032
- }
1033
- )
1034
- ] }),
1035
- /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
1036
- activeTab === "tests" && /* @__PURE__ */ jsx2("div", { children: assignments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1037
- /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
1038
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "All caught up!" }),
1039
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "No tests assigned" })
1040
- ] }) : testView === "list" ? (
1041
- /* List View - Show tests grouped by folder */
1042
- /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
1043
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 px-1", children: [
1044
- /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
1045
- assignments.length,
1046
- " test",
1047
- assignments.length !== 1 ? "s" : "",
1048
- " assigned"
1049
- ] }),
1050
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
1051
- /* @__PURE__ */ jsxs("span", { className: "text-green-400", children: [
1052
- "\u2705 ",
1053
- assignments.filter((a) => a.status === "passed").length
1054
- ] }),
1055
- /* @__PURE__ */ jsxs("span", { className: "text-red-400", children: [
1056
- "\u274C ",
1057
- assignments.filter((a) => a.status === "failed").length
1058
- ] }),
1059
- /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
1060
- "\u23F3 ",
1061
- assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length
1062
- ] })
1063
- ] })
1064
- ] }),
1065
- groupedAssignments.map((folder) => {
1066
- const groupId = folder.group?.id || "ungrouped";
1067
- const isCollapsed = collapsedFolders.has(groupId);
1068
- const completedCount = folder.stats.passed + folder.stats.failed + folder.stats.skipped;
1069
- return /* @__PURE__ */ jsxs("div", { className: "border border-zinc-700 rounded-lg overflow-hidden", children: [
1070
- /* @__PURE__ */ jsxs(
1071
- "button",
1072
- {
1073
- onClick: () => toggleFolderCollapse(groupId),
1074
- className: "w-full flex items-center justify-between p-2.5 bg-zinc-800 hover:bg-zinc-700 transition-colors",
1075
- children: [
1076
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1077
- /* @__PURE__ */ jsx2("span", { className: "text-sm", children: isCollapsed ? "\u{1F4C1}" : "\u{1F4C2}" }),
1078
- /* @__PURE__ */ jsx2("span", { className: "font-medium text-sm text-zinc-100", children: folder.group?.name || "Other Tests" }),
1079
- /* @__PURE__ */ jsxs("span", { className: "text-xs text-zinc-500", children: [
1080
- "(",
1081
- completedCount,
1082
- "/",
1083
- folder.stats.total,
1084
- ")"
1085
- ] })
1086
- ] }),
1087
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1088
- /* @__PURE__ */ jsx2("div", { className: "w-16 h-1.5 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
1089
- "div",
1090
- {
1091
- className: "h-full bg-green-500 transition-all",
1092
- style: { width: `${completedCount / folder.stats.total * 100}%` }
1093
- }
1094
- ) }),
1095
- /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", children: isCollapsed ? "\u25B6" : "\u25BC" })
1096
- ] })
1097
- ]
1098
- }
1099
- ),
1100
- !isCollapsed && /* @__PURE__ */ jsx2("div", { className: "divide-y divide-zinc-800", children: folder.assignments.map((assignment) => {
1101
- const statusBadge = getStatusBadge(assignment.status);
1102
- return /* @__PURE__ */ jsxs(
966
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
967
+ /* @__PURE__ */ jsx2(BugBearIcon, { size: 28 }),
968
+ /* @__PURE__ */ jsxs("div", { children: [
969
+ /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-sm flex items-center gap-2", children: [
970
+ "BugBear",
971
+ draggable && /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", title: "Drag to move, double-click to reset", children: "\u22EE\u22EE" })
972
+ ] }),
973
+ /* @__PURE__ */ jsxs(
1103
974
  "button",
1104
975
  {
1105
- onClick: () => {
1106
- setSelectedTestId(assignment.id);
1107
- setTestView("detail");
1108
- setShowSteps(false);
1109
- },
1110
- className: `w-full text-left p-3 transition-colors ${assignment.id === currentAssignment?.id ? "bg-blue-950/30" : "bg-zinc-900 hover:bg-zinc-800"}`,
976
+ onClick: handleOpenProfile,
977
+ className: "text-zinc-400 text-xs flex items-center gap-1 hover:text-white transition-colors",
1111
978
  children: [
1112
- /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-1", children: [
1113
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1114
- /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: assignment.testCase.testKey }),
1115
- assignment.isVerification && /* @__PURE__ */ jsx2("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-900/30 text-green-400 font-medium", children: "\u{1F527} Verify" })
1116
- ] }),
1117
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
1118
- /* @__PURE__ */ jsxs("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${statusBadge.className}`, children: [
1119
- statusBadge.icon,
1120
- " ",
1121
- statusBadge.label
1122
- ] }),
1123
- /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${assignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : assignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: assignment.testCase.priority })
1124
- ] })
1125
- ] }),
1126
- /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm line-clamp-2", children: assignment.testCase.title }),
1127
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-zinc-500", children: [
1128
- assignment.testCase.track && /* @__PURE__ */ jsx2(
1129
- "span",
1130
- {
1131
- className: "px-1 py-0.5 rounded text-white",
1132
- style: { backgroundColor: assignment.testCase.track.color },
1133
- children: templateInfo[assignment.testCase.track.testTemplate || "steps"].icon
1134
- }
1135
- ),
1136
- /* @__PURE__ */ jsxs("span", { children: [
1137
- assignment.testCase.steps.length,
1138
- " ",
1139
- assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"
1140
- ] }),
1141
- assignment.id === currentAssignment?.id && /* @__PURE__ */ jsx2("span", { className: "text-blue-400 font-medium", children: "\u2022 Current" })
1142
- ] })
979
+ testerInfo?.name,
980
+ /* @__PURE__ */ jsx2("span", { className: "text-[10px]", children: "\u270E" })
1143
981
  ]
1144
- },
1145
- assignment.id
1146
- );
1147
- }) })
1148
- ] }, groupId);
1149
- })
1150
- ] })
1151
- ) : showFeedbackPrompt && displayedAssignment ? (
1152
- /* Feedback prompt after completing a test */
1153
- /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
1154
- /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1155
- /* @__PURE__ */ jsx2("span", { className: "text-3xl", children: pendingFeedbackStatus === "passed" ? "\u2713" : "\u2717" }),
1156
- /* @__PURE__ */ jsx2("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-400" : "text-red-400"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
1157
- ] }),
1158
- /* @__PURE__ */ jsxs("div", { className: "bg-blue-950/30 border border-blue-900 rounded-lg p-3 mb-4", children: [
1159
- /* @__PURE__ */ jsx2("p", { className: "text-blue-300 text-sm font-medium mb-1", children: "Help us improve this test" }),
1160
- /* @__PURE__ */ jsx2("p", { className: "text-blue-400 text-xs", children: "Your feedback shapes better tests for everyone." })
1161
- ] }),
1162
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1163
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "How was this test?" }),
1164
- /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1 justify-center", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx2(
1165
- "button",
1166
- {
1167
- type: "button",
1168
- onClick: () => setFeedbackRating(star),
1169
- className: `text-2xl transition-colors ${star <= feedbackRating ? "text-yellow-400" : "text-zinc-600"} hover:text-yellow-400`,
1170
- children: "\u2605"
1171
- },
1172
- star
1173
- )) }),
1174
- /* @__PURE__ */ jsx2("p", { className: "text-center text-xs text-zinc-500 mt-1", children: feedbackRating === 1 ? "Needs work" : feedbackRating === 2 ? "Could be better" : feedbackRating === 3 ? "Okay" : feedbackRating === 4 ? "Good" : "Great!" })
1175
- ] }),
1176
- feedbackRating < 4 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1177
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "What could be improved?" }),
1178
- /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: [
1179
- { key: "stepsUnclear", label: "Steps unclear" },
1180
- { key: "expectedResultUnclear", label: "Expected result unclear" },
1181
- { key: "needsMoreDetail", label: "Needs more detail" },
1182
- { key: "isOutdated", label: "Seems outdated" }
1183
- ].map(({ key, label }) => /* @__PURE__ */ jsx2(
1184
- "button",
1185
- {
1186
- type: "button",
1187
- onClick: () => setFeedbackFlags((prev) => ({ ...prev, [key]: !prev[key] })),
1188
- className: `px-2 py-1.5 rounded text-xs font-medium border transition-colors ${feedbackFlags[key] ? "bg-blue-900/50 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:border-blue-800"}`,
1189
- children: label
1190
- },
1191
- key
1192
- )) })
1193
- ] }),
1194
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1195
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Suggestions? (optional)" }),
1196
- /* @__PURE__ */ jsx2(
1197
- "textarea",
1198
- {
1199
- value: feedbackNote,
1200
- onChange: (e) => setFeedbackNote(e.target.value),
1201
- placeholder: "How could this test be improved?",
1202
- className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder:text-zinc-500",
1203
- rows: 2
1204
- }
1205
- )
1206
- ] }),
1207
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1208
- /* @__PURE__ */ jsx2(
1209
- "button",
1210
- {
1211
- onClick: handleSkipFeedback,
1212
- disabled: submitting,
1213
- className: "flex-1 px-3 py-2 text-sm font-medium text-zinc-400 bg-zinc-700 rounded-lg hover:bg-zinc-700 transition-colors disabled:opacity-50",
1214
- children: "Skip"
1215
- }
1216
- ),
982
+ }
983
+ )
984
+ ] })
985
+ ] }),
1217
986
  /* @__PURE__ */ jsx2(
1218
987
  "button",
1219
988
  {
1220
- onClick: () => handleSubmitFeedback(false),
1221
- disabled: submitting,
1222
- className: "flex-1 px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50",
1223
- children: submitting ? "Submitting..." : "Submit Feedback"
989
+ onClick: () => setCollapsed(true),
990
+ className: "p-1 hover:bg-zinc-800 rounded",
991
+ children: /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
1224
992
  }
1225
993
  )
1226
- ] })
1227
- ] })
1228
- ) : justPassed ? (
1229
- /* Success state after passing */
1230
- /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1231
- /* @__PURE__ */ jsx2("span", { className: "text-5xl", children: "\u2713" }),
1232
- /* @__PURE__ */ jsx2("p", { className: "text-green-400 mt-3 font-semibold text-lg", children: "Passed!" }),
1233
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm mt-1", children: "Loading next test..." })
1234
- ] })
1235
- ) : displayedAssignment ? (
1236
- /* Detail View - Show single test */
1237
- /* @__PURE__ */ jsxs("div", { children: [
1238
- /* @__PURE__ */ jsxs(
1239
- "button",
1240
- {
1241
- onClick: () => {
1242
- setTestView("list");
1243
- setSelectedTestId(null);
1244
- },
1245
- className: "flex items-center gap-1 text-xs text-blue-400 font-medium hover:text-blue-300 mb-2",
1246
- children: [
1247
- "\u2190 All Tests (",
994
+ ]
995
+ }
996
+ ),
997
+ /* @__PURE__ */ jsxs("div", { className: "flex border-b border-zinc-800 bg-zinc-900", style: { backgroundColor: "#18181b", borderBottom: "1px solid #27272a" }, children: [
998
+ /* @__PURE__ */ jsxs(
999
+ "button",
1000
+ {
1001
+ onClick: () => setActiveTab("tests"),
1002
+ className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 border-b-2 ${activeTab === "tests" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
1003
+ children: [
1004
+ "Tests ",
1005
+ pendingCount > 0 && `(${pendingCount})`
1006
+ ]
1007
+ }
1008
+ ),
1009
+ /* @__PURE__ */ jsxs(
1010
+ "button",
1011
+ {
1012
+ onClick: () => setActiveTab("messages"),
1013
+ className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 relative border-b-2 ${activeTab === "messages" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
1014
+ children: [
1015
+ "Messages",
1016
+ unreadCount > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute top-1.5 ml-16 min-w-[18px] h-[18px] px-1 bg-blue-500 rounded-full text-[10px] text-white font-bold flex items-center justify-center", children: unreadCount })
1017
+ ]
1018
+ }
1019
+ ),
1020
+ /* @__PURE__ */ jsxs(
1021
+ "button",
1022
+ {
1023
+ onClick: () => setActiveTab("session"),
1024
+ className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 relative border-b-2 ${activeTab === "session" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
1025
+ children: [
1026
+ "Explore",
1027
+ activeSession && /* @__PURE__ */ jsx2("span", { className: "absolute top-2 ml-14 w-2 h-2 bg-green-500 rounded-full animate-pulse" })
1028
+ ]
1029
+ }
1030
+ ),
1031
+ /* @__PURE__ */ jsx2(
1032
+ "button",
1033
+ {
1034
+ onClick: () => setActiveTab("report"),
1035
+ className: `flex-1 py-3 text-sm font-medium transition-all flex items-center justify-center gap-1.5 border-b-2 ${activeTab === "report" ? "border-blue-500 text-blue-400" : "border-transparent text-zinc-500 hover:text-zinc-300"}`,
1036
+ children: "Report"
1037
+ }
1038
+ )
1039
+ ] }),
1040
+ /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", style: { backgroundColor: "#18181b", color: "#d4d4d8", padding: "1rem" }, children: [
1041
+ activeTab === "tests" && /* @__PURE__ */ jsx2("div", { children: assignments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1042
+ /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
1043
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "All caught up!" }),
1044
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "No tests assigned" })
1045
+ ] }) : testView === "list" ? (
1046
+ /* List View - Show tests grouped by folder */
1047
+ /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
1048
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 px-1", children: [
1049
+ /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
1248
1050
  assignments.length,
1249
- ")"
1250
- ]
1251
- }
1252
- ),
1253
- (() => {
1254
- const currentGroup = displayedAssignment.testCase.group;
1255
- const groupAssignments = currentGroup ? assignments.filter((a) => a.testCase.group?.id === currentGroup.id) : assignments;
1256
- const completed = groupAssignments.filter(
1257
- (a) => a.status === "passed" || a.status === "failed" || a.status === "skipped"
1258
- ).length;
1259
- const total = groupAssignments.length;
1260
- const progressPercent = total > 0 ? completed / total * 100 : 0;
1261
- return /* @__PURE__ */ jsxs("div", { className: "mb-3 p-2 bg-blue-950/30 rounded-lg", children: [
1262
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
1263
- /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium text-blue-300", children: currentGroup ? `\u{1F4C1} ${currentGroup.name}` : "\u{1F4CB} All Tests" }),
1264
- /* @__PURE__ */ jsxs("span", { className: "text-xs text-blue-400", children: [
1265
- completed,
1266
- "/",
1267
- total,
1268
- " complete"
1269
- ] })
1051
+ " test",
1052
+ assignments.length !== 1 ? "s" : "",
1053
+ " assigned"
1270
1054
  ] }),
1271
- /* @__PURE__ */ jsx2("div", { className: "w-full h-2 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
1272
- "div",
1273
- {
1274
- className: "h-full bg-blue-500 transition-all duration-300",
1275
- style: { width: `${progressPercent}%` }
1276
- }
1277
- ) }),
1278
- /* @__PURE__ */ jsxs("div", { className: "flex justify-between mt-1 text-[10px] text-blue-400", children: [
1279
- /* @__PURE__ */ jsxs("span", { children: [
1055
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
1056
+ /* @__PURE__ */ jsxs("span", { className: "text-green-400", children: [
1280
1057
  "\u2705 ",
1281
- groupAssignments.filter((a) => a.status === "passed").length,
1282
- " passed"
1058
+ assignments.filter((a) => a.status === "passed").length
1283
1059
  ] }),
1284
- /* @__PURE__ */ jsxs("span", { children: [
1060
+ /* @__PURE__ */ jsxs("span", { className: "text-red-400", children: [
1285
1061
  "\u274C ",
1286
- groupAssignments.filter((a) => a.status === "failed").length,
1287
- " failed"
1062
+ assignments.filter((a) => a.status === "failed").length
1288
1063
  ] }),
1289
- /* @__PURE__ */ jsxs("span", { children: [
1290
- "\u23ED\uFE0F ",
1291
- groupAssignments.filter((a) => a.status === "skipped").length,
1292
- " skipped"
1064
+ /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
1065
+ "\u23F3 ",
1066
+ assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length
1293
1067
  ] })
1294
1068
  ] })
1295
- ] });
1296
- })(),
1297
- /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
1298
- /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
1299
- /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: displayedAssignment.testCase.testKey }),
1300
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
1301
- displayedAssignment.testCase.track && /* @__PURE__ */ jsx2(
1302
- "span",
1069
+ ] }),
1070
+ groupedAssignments.map((folder) => {
1071
+ const groupId = folder.group?.id || "ungrouped";
1072
+ const isCollapsed = collapsedFolders.has(groupId);
1073
+ const completedCount = folder.stats.passed + folder.stats.failed + folder.stats.skipped;
1074
+ return /* @__PURE__ */ jsxs("div", { className: "border border-zinc-700 rounded-lg overflow-hidden", children: [
1075
+ /* @__PURE__ */ jsxs(
1076
+ "button",
1303
1077
  {
1304
- className: "text-xs px-1.5 py-0.5 rounded text-white",
1305
- style: { backgroundColor: displayedAssignment.testCase.track.color },
1306
- children: templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon
1078
+ onClick: () => toggleFolderCollapse(groupId),
1079
+ className: "w-full flex items-center justify-between p-2.5 bg-zinc-800 hover:bg-zinc-700 transition-colors",
1080
+ children: [
1081
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1082
+ /* @__PURE__ */ jsx2("span", { className: "text-sm", children: isCollapsed ? "\u{1F4C1}" : "\u{1F4C2}" }),
1083
+ /* @__PURE__ */ jsx2("span", { className: "font-medium text-sm text-zinc-100", children: folder.group?.name || "Other Tests" }),
1084
+ /* @__PURE__ */ jsxs("span", { className: "text-xs text-zinc-500", children: [
1085
+ "(",
1086
+ completedCount,
1087
+ "/",
1088
+ folder.stats.total,
1089
+ ")"
1090
+ ] })
1091
+ ] }),
1092
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1093
+ /* @__PURE__ */ jsx2("div", { className: "w-16 h-1.5 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
1094
+ "div",
1095
+ {
1096
+ className: "h-full bg-green-500 transition-all",
1097
+ style: { width: `${completedCount / folder.stats.total * 100}%` }
1098
+ }
1099
+ ) }),
1100
+ /* @__PURE__ */ jsx2("span", { className: "text-zinc-500 text-xs", children: isCollapsed ? "\u25B6" : "\u25BC" })
1101
+ ] })
1102
+ ]
1307
1103
  }
1308
1104
  ),
1309
- /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${displayedAssignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : displayedAssignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: displayedAssignment.testCase.priority })
1310
- ] })
1105
+ !isCollapsed && /* @__PURE__ */ jsx2("div", { className: "divide-y divide-zinc-800", children: folder.assignments.map((assignment) => {
1106
+ const statusBadge = getStatusBadge(assignment.status);
1107
+ return /* @__PURE__ */ jsxs(
1108
+ "button",
1109
+ {
1110
+ onClick: () => {
1111
+ setSelectedTestId(assignment.id);
1112
+ setTestView("detail");
1113
+ setShowSteps(false);
1114
+ },
1115
+ className: `w-full text-left p-3 transition-colors ${assignment.id === currentAssignment?.id ? "bg-blue-950/30" : "bg-zinc-900 hover:bg-zinc-800"}`,
1116
+ children: [
1117
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-1", children: [
1118
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1119
+ /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: assignment.testCase.testKey }),
1120
+ assignment.isVerification && /* @__PURE__ */ jsx2("span", { className: "text-xs px-1.5 py-0.5 rounded bg-green-900/30 text-green-400 font-medium", children: "\u{1F527} Verify" })
1121
+ ] }),
1122
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
1123
+ /* @__PURE__ */ jsxs("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${statusBadge.className}`, children: [
1124
+ statusBadge.icon,
1125
+ " ",
1126
+ statusBadge.label
1127
+ ] }),
1128
+ /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${assignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : assignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: assignment.testCase.priority })
1129
+ ] })
1130
+ ] }),
1131
+ /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm line-clamp-2", children: assignment.testCase.title }),
1132
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-zinc-500", children: [
1133
+ assignment.testCase.track && /* @__PURE__ */ jsx2(
1134
+ "span",
1135
+ {
1136
+ className: "px-1 py-0.5 rounded text-white",
1137
+ style: { backgroundColor: assignment.testCase.track.color },
1138
+ children: templateInfo[assignment.testCase.track.testTemplate || "steps"].icon
1139
+ }
1140
+ ),
1141
+ /* @__PURE__ */ jsxs("span", { children: [
1142
+ assignment.testCase.steps.length,
1143
+ " ",
1144
+ assignment.testCase.track?.testTemplate === "checklist" ? "items" : assignment.testCase.track?.testTemplate === "rubric" ? "criteria" : "steps"
1145
+ ] }),
1146
+ assignment.id === currentAssignment?.id && /* @__PURE__ */ jsx2("span", { className: "text-blue-400 font-medium", children: "\u2022 Current" })
1147
+ ] })
1148
+ ]
1149
+ },
1150
+ assignment.id
1151
+ );
1152
+ }) })
1153
+ ] }, groupId);
1154
+ })
1155
+ ] })
1156
+ ) : showFeedbackPrompt && displayedAssignment ? (
1157
+ /* Feedback prompt after completing a test */
1158
+ /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
1159
+ /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1160
+ /* @__PURE__ */ jsx2("span", { className: "text-3xl", children: pendingFeedbackStatus === "passed" ? "\u2713" : "\u2717" }),
1161
+ /* @__PURE__ */ jsx2("p", { className: `font-semibold mt-1 ${pendingFeedbackStatus === "passed" ? "text-green-400" : "text-red-400"}`, children: pendingFeedbackStatus === "passed" ? "Test Passed!" : "Test Failed" })
1311
1162
  ] }),
1312
- /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm mb-1", children: displayedAssignment.testCase.title }),
1313
- displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2 text-xs text-green-400 bg-green-900/20 px-2 py-1 rounded", children: [
1314
- /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
1315
- /* @__PURE__ */ jsx2("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
1316
- /* @__PURE__ */ jsx2("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
1317
- ] }),
1318
- /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Testing" }),
1319
- /* @__PURE__ */ jsx2("span", { className: "font-mono", children: formatElapsedTime(assignmentElapsedTime) })
1163
+ /* @__PURE__ */ jsxs("div", { className: "bg-blue-950/30 border border-blue-900 rounded-lg p-3 mb-4", children: [
1164
+ /* @__PURE__ */ jsx2("p", { className: "text-blue-300 text-sm font-medium mb-1", children: "Help us improve this test" }),
1165
+ /* @__PURE__ */ jsx2("p", { className: "text-blue-400 text-xs", children: "Your feedback shapes better tests for everyone." })
1166
+ ] }),
1167
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1168
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "How was this test?" }),
1169
+ /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-1 justify-center", children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx2(
1170
+ "button",
1171
+ {
1172
+ type: "button",
1173
+ onClick: () => setFeedbackRating(star),
1174
+ className: `text-2xl transition-colors ${star <= feedbackRating ? "text-yellow-400" : "text-zinc-600"} hover:text-yellow-400`,
1175
+ children: "\u2605"
1176
+ },
1177
+ star
1178
+ )) }),
1179
+ /* @__PURE__ */ jsx2("p", { className: "text-center text-xs text-zinc-500 mt-1", children: feedbackRating === 1 ? "Needs work" : feedbackRating === 2 ? "Could be better" : feedbackRating === 3 ? "Okay" : feedbackRating === 4 ? "Good" : "Great!" })
1180
+ ] }),
1181
+ feedbackRating < 4 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1182
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-2", children: "What could be improved?" }),
1183
+ /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: [
1184
+ { key: "stepsUnclear", label: "Steps unclear" },
1185
+ { key: "expectedResultUnclear", label: "Expected result unclear" },
1186
+ { key: "needsMoreDetail", label: "Needs more detail" },
1187
+ { key: "isOutdated", label: "Seems outdated" }
1188
+ ].map(({ key, label }) => /* @__PURE__ */ jsx2(
1189
+ "button",
1190
+ {
1191
+ type: "button",
1192
+ onClick: () => setFeedbackFlags((prev) => ({ ...prev, [key]: !prev[key] })),
1193
+ className: `px-2 py-1.5 rounded text-xs font-medium border transition-colors ${feedbackFlags[key] ? "bg-blue-900/50 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:border-blue-800"}`,
1194
+ children: label
1195
+ },
1196
+ key
1197
+ )) })
1198
+ ] }),
1199
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1200
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Suggestions? (optional)" }),
1201
+ /* @__PURE__ */ jsx2(
1202
+ "textarea",
1203
+ {
1204
+ value: feedbackNote,
1205
+ onChange: (e) => setFeedbackNote(e.target.value),
1206
+ placeholder: "How could this test be improved?",
1207
+ className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder:text-zinc-500",
1208
+ rows: 2
1209
+ }
1210
+ )
1320
1211
  ] }),
1321
- displayedAssignment.testCase.description && /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
1322
- displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ jsxs(
1212
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1213
+ /* @__PURE__ */ jsx2(
1214
+ "button",
1215
+ {
1216
+ onClick: handleSkipFeedback,
1217
+ disabled: submitting,
1218
+ className: "flex-1 px-3 py-2 text-sm font-medium text-zinc-400 bg-zinc-700 rounded-lg hover:bg-zinc-700 transition-colors disabled:opacity-50",
1219
+ children: "Skip"
1220
+ }
1221
+ ),
1222
+ /* @__PURE__ */ jsx2(
1223
+ "button",
1224
+ {
1225
+ onClick: () => handleSubmitFeedback(false),
1226
+ disabled: submitting,
1227
+ className: "flex-1 px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50",
1228
+ children: submitting ? "Submitting..." : "Submit Feedback"
1229
+ }
1230
+ )
1231
+ ] })
1232
+ ] })
1233
+ ) : justPassed ? (
1234
+ /* Success state after passing */
1235
+ /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1236
+ /* @__PURE__ */ jsx2("span", { className: "text-5xl", children: "\u2713" }),
1237
+ /* @__PURE__ */ jsx2("p", { className: "text-green-400 mt-3 font-semibold text-lg", children: "Passed!" }),
1238
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm mt-1", children: "Loading next test..." })
1239
+ ] })
1240
+ ) : displayedAssignment ? (
1241
+ /* Detail View - Show single test */
1242
+ /* @__PURE__ */ jsxs("div", { children: [
1243
+ /* @__PURE__ */ jsxs(
1323
1244
  "button",
1324
1245
  {
1325
- onClick: () => onNavigate(displayedAssignment.testCase.targetRoute),
1326
- className: "w-full mb-2 py-1.5 px-3 bg-blue-900/20 text-blue-300 border border-blue-800 rounded-lg text-xs font-medium hover:bg-blue-900/30 transition-colors flex items-center justify-center gap-1",
1246
+ onClick: () => {
1247
+ setTestView("list");
1248
+ setSelectedTestId(null);
1249
+ },
1250
+ className: "flex items-center gap-1 text-xs text-blue-400 font-medium hover:text-blue-300 mb-2",
1327
1251
  children: [
1328
- /* @__PURE__ */ jsx2("span", { children: "Go to test location" }),
1329
- /* @__PURE__ */ jsx2("span", { children: "\u2192" })
1252
+ "\u2190 All Tests (",
1253
+ assignments.length,
1254
+ ")"
1330
1255
  ]
1331
1256
  }
1332
1257
  ),
1333
1258
  (() => {
1334
- const template = displayedAssignment.testCase.track?.testTemplate || "steps";
1335
- const steps = displayedAssignment.testCase.steps;
1336
- const info = templateInfo[template];
1337
- const rubricMode = displayedAssignment.testCase.track?.rubricMode || "pass_fail";
1338
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1339
- /* @__PURE__ */ jsxs(
1259
+ const currentGroup = displayedAssignment.testCase.group;
1260
+ const groupAssignments = currentGroup ? assignments.filter((a) => a.testCase.group?.id === currentGroup.id) : assignments;
1261
+ const completed = groupAssignments.filter(
1262
+ (a) => a.status === "passed" || a.status === "failed" || a.status === "skipped"
1263
+ ).length;
1264
+ const total = groupAssignments.length;
1265
+ const progressPercent = total > 0 ? completed / total * 100 : 0;
1266
+ return /* @__PURE__ */ jsxs("div", { className: "mb-3 p-2 bg-blue-950/30 rounded-lg", children: [
1267
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
1268
+ /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium text-blue-300", children: currentGroup ? `\u{1F4C1} ${currentGroup.name}` : "\u{1F4CB} All Tests" }),
1269
+ /* @__PURE__ */ jsxs("span", { className: "text-xs text-blue-400", children: [
1270
+ completed,
1271
+ "/",
1272
+ total,
1273
+ " complete"
1274
+ ] })
1275
+ ] }),
1276
+ /* @__PURE__ */ jsx2("div", { className: "w-full h-2 bg-zinc-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx2(
1340
1277
  "div",
1341
1278
  {
1342
- className: "flex items-center gap-2 text-xs px-2 py-1 rounded mb-2",
1343
- style: {
1344
- backgroundColor: displayedAssignment.testCase.track ? `${displayedAssignment.testCase.track.color}15` : "#f3f4f6"
1345
- },
1346
- children: [
1347
- /* @__PURE__ */ jsx2("span", { children: info.icon }),
1348
- /* @__PURE__ */ jsx2("span", { className: "font-medium", children: info.name }),
1349
- /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
1350
- "\u2022 ",
1351
- info.action
1352
- ] })
1353
- ]
1354
- }
1355
- ),
1356
- /* @__PURE__ */ jsxs(
1357
- "button",
1358
- {
1359
- onClick: () => setShowSteps(!showSteps),
1360
- className: "text-blue-400 text-xs font-medium hover:text-blue-300 flex items-center gap-1",
1361
- children: [
1362
- showSteps ? "\u25BC" : "\u25B6",
1363
- " ",
1364
- template === "freeform" ? "Instructions" : `${steps.length} ${template === "checklist" ? "items" : template === "rubric" ? "criteria" : "steps"}`
1365
- ]
1279
+ className: "h-full bg-blue-500 transition-all duration-300",
1280
+ style: { width: `${progressPercent}%` }
1366
1281
  }
1367
- ),
1368
- showSteps && template === "steps" && /* @__PURE__ */ jsx2("div", { className: "mt-2 space-y-2", children: steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
1369
- /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded-full bg-blue-900/50 text-blue-300 flex items-center justify-center flex-shrink-0 font-medium", children: step.stepNumber }),
1370
- /* @__PURE__ */ jsxs("div", { children: [
1371
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-300", children: step.action }),
1372
- step.expectedResult && /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 mt-0.5", children: [
1373
- "\u2192 ",
1374
- step.expectedResult
1375
- ] })
1282
+ ) }),
1283
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between mt-1 text-[10px] text-blue-400", children: [
1284
+ /* @__PURE__ */ jsxs("span", { children: [
1285
+ "\u2705 ",
1286
+ groupAssignments.filter((a) => a.status === "passed").length,
1287
+ " passed"
1288
+ ] }),
1289
+ /* @__PURE__ */ jsxs("span", { children: [
1290
+ "\u274C ",
1291
+ groupAssignments.filter((a) => a.status === "failed").length,
1292
+ " failed"
1293
+ ] }),
1294
+ /* @__PURE__ */ jsxs("span", { children: [
1295
+ "\u23ED\uFE0F ",
1296
+ groupAssignments.filter((a) => a.status === "skipped").length,
1297
+ " skipped"
1376
1298
  ] })
1377
- ] }, idx)) }),
1378
- showSteps && template === "checklist" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
1379
- steps.map((step, idx) => /* @__PURE__ */ jsxs(
1299
+ ] })
1300
+ ] });
1301
+ })(),
1302
+ /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
1303
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-2", children: [
1304
+ /* @__PURE__ */ jsx2("span", { className: "text-xs font-mono text-zinc-500", children: displayedAssignment.testCase.testKey }),
1305
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
1306
+ displayedAssignment.testCase.track && /* @__PURE__ */ jsx2(
1307
+ "span",
1308
+ {
1309
+ className: "text-xs px-1.5 py-0.5 rounded text-white",
1310
+ style: { backgroundColor: displayedAssignment.testCase.track.color },
1311
+ children: templateInfo[displayedAssignment.testCase.track.testTemplate || "steps"].icon
1312
+ }
1313
+ ),
1314
+ /* @__PURE__ */ jsx2("span", { className: `text-xs px-1.5 py-0.5 rounded font-medium ${displayedAssignment.testCase.priority === "P0" ? "bg-red-900/30 text-red-400" : displayedAssignment.testCase.priority === "P1" ? "bg-orange-900/30 text-orange-400" : "bg-zinc-700 text-zinc-400"}`, children: displayedAssignment.testCase.priority })
1315
+ ] })
1316
+ ] }),
1317
+ /* @__PURE__ */ jsx2("h4", { className: "font-medium text-zinc-100 text-sm mb-1", children: displayedAssignment.testCase.title }),
1318
+ displayedAssignment.status === "in_progress" && displayedAssignment.startedAt && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-2 text-xs text-green-400 bg-green-900/20 px-2 py-1 rounded", children: [
1319
+ /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
1320
+ /* @__PURE__ */ jsx2("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
1321
+ /* @__PURE__ */ jsx2("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
1322
+ ] }),
1323
+ /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "Testing" }),
1324
+ /* @__PURE__ */ jsx2("span", { className: "font-mono", children: formatElapsedTime(assignmentElapsedTime) })
1325
+ ] }),
1326
+ displayedAssignment.testCase.description && /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mb-2", children: displayedAssignment.testCase.description }),
1327
+ displayedAssignment.testCase.targetRoute && onNavigate && /* @__PURE__ */ jsxs(
1328
+ "button",
1329
+ {
1330
+ onClick: () => onNavigate(displayedAssignment.testCase.targetRoute),
1331
+ className: "w-full mb-2 py-1.5 px-3 bg-blue-900/20 text-blue-300 border border-blue-800 rounded-lg text-xs font-medium hover:bg-blue-900/30 transition-colors flex items-center justify-center gap-1",
1332
+ children: [
1333
+ /* @__PURE__ */ jsx2("span", { children: "Go to test location" }),
1334
+ /* @__PURE__ */ jsx2("span", { children: "\u2192" })
1335
+ ]
1336
+ }
1337
+ ),
1338
+ (() => {
1339
+ const template = displayedAssignment.testCase.track?.testTemplate || "steps";
1340
+ const steps = displayedAssignment.testCase.steps;
1341
+ const info = templateInfo[template];
1342
+ const rubricMode = displayedAssignment.testCase.track?.rubricMode || "pass_fail";
1343
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
1344
+ /* @__PURE__ */ jsxs(
1345
+ "div",
1346
+ {
1347
+ className: "flex items-center gap-2 text-xs px-2 py-1 rounded mb-2",
1348
+ style: {
1349
+ backgroundColor: displayedAssignment.testCase.track ? `${displayedAssignment.testCase.track.color}15` : "#f3f4f6"
1350
+ },
1351
+ children: [
1352
+ /* @__PURE__ */ jsx2("span", { children: info.icon }),
1353
+ /* @__PURE__ */ jsx2("span", { className: "font-medium", children: info.name }),
1354
+ /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
1355
+ "\u2022 ",
1356
+ info.action
1357
+ ] })
1358
+ ]
1359
+ }
1360
+ ),
1361
+ /* @__PURE__ */ jsxs(
1380
1362
  "button",
1381
1363
  {
1382
- onClick: () => setCriteriaResults((prev) => {
1383
- const newResults = { ...prev };
1384
- if (prev[idx] === true) {
1385
- delete newResults[idx];
1386
- } else {
1387
- newResults[idx] = true;
1388
- }
1389
- return newResults;
1390
- }),
1391
- className: `w-full flex items-center gap-2 text-xs p-2 rounded border transition-colors text-left ${criteriaResults[idx] === true ? "bg-green-900/20 border-green-700" : "bg-zinc-900 border-zinc-700 hover:bg-zinc-800"}`,
1364
+ onClick: () => setShowSteps(!showSteps),
1365
+ className: "text-blue-400 text-xs font-medium hover:text-blue-300 flex items-center gap-1",
1392
1366
  children: [
1393
- /* @__PURE__ */ jsx2("span", { className: `w-5 h-5 rounded border-2 flex items-center justify-center ${criteriaResults[idx] === true ? "bg-green-500 border-green-500 text-white" : "border-cyan-400 text-cyan-600"}`, children: criteriaResults[idx] === true ? "\u2713" : "" }),
1394
- /* @__PURE__ */ jsx2("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-400" : "text-zinc-300"}`, children: step.action })
1367
+ showSteps ? "\u25BC" : "\u25B6",
1368
+ " ",
1369
+ template === "freeform" ? "Instructions" : `${steps.length} ${template === "checklist" ? "items" : template === "rubric" ? "criteria" : "steps"}`
1395
1370
  ]
1396
- },
1397
- idx
1398
- )),
1399
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
1400
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Tap to check off each item." }),
1401
- Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
1371
+ }
1372
+ ),
1373
+ showSteps && template === "steps" && /* @__PURE__ */ jsx2("div", { className: "mt-2 space-y-2", children: steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
1374
+ /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded-full bg-blue-900/50 text-blue-300 flex items-center justify-center flex-shrink-0 font-medium", children: step.stepNumber }),
1375
+ /* @__PURE__ */ jsxs("div", { children: [
1376
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-300", children: step.action }),
1377
+ step.expectedResult && /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 mt-0.5", children: [
1378
+ "\u2192 ",
1379
+ step.expectedResult
1380
+ ] })
1381
+ ] })
1382
+ ] }, idx)) }),
1383
+ showSteps && template === "checklist" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
1384
+ steps.map((step, idx) => /* @__PURE__ */ jsxs(
1402
1385
  "button",
1403
1386
  {
1404
- onClick: () => setCriteriaResults({}),
1405
- className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
1406
- children: "\u21BA Reset"
1407
- }
1408
- )
1409
- ] })
1410
- ] }),
1411
- showSteps && template === "rubric" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
1412
- steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 p-2 rounded border border-zinc-700", children: [
1413
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs mb-1", children: [
1414
- /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded bg-blue-900/50 text-blue-300 flex items-center justify-center font-medium", children: idx + 1 }),
1415
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-100 font-medium flex-1", children: step.action })
1416
- ] }),
1417
- step.expectedResult && /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 ml-7 mb-2", children: step.expectedResult }),
1418
- rubricMode === "pass_fail" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 ml-7", children: [
1419
- /* @__PURE__ */ jsx2(
1387
+ onClick: () => setCriteriaResults((prev) => {
1388
+ const newResults = { ...prev };
1389
+ if (prev[idx] === true) {
1390
+ delete newResults[idx];
1391
+ } else {
1392
+ newResults[idx] = true;
1393
+ }
1394
+ return newResults;
1395
+ }),
1396
+ className: `w-full flex items-center gap-2 text-xs p-2 rounded border transition-colors text-left ${criteriaResults[idx] === true ? "bg-green-900/20 border-green-700" : "bg-zinc-900 border-zinc-700 hover:bg-zinc-800"}`,
1397
+ children: [
1398
+ /* @__PURE__ */ jsx2("span", { className: `w-5 h-5 rounded border-2 flex items-center justify-center ${criteriaResults[idx] === true ? "bg-green-500 border-green-500 text-white" : "border-cyan-400 text-cyan-600"}`, children: criteriaResults[idx] === true ? "\u2713" : "" }),
1399
+ /* @__PURE__ */ jsx2("p", { className: `flex-1 ${criteriaResults[idx] === true ? "text-green-400" : "text-zinc-300"}`, children: step.action })
1400
+ ]
1401
+ },
1402
+ idx
1403
+ )),
1404
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
1405
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Tap to check off each item." }),
1406
+ Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
1420
1407
  "button",
1421
1408
  {
1422
- onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: true })),
1423
- className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === true ? "bg-green-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-green-900/30"}`,
1424
- children: "\u2713 Pass"
1409
+ onClick: () => setCriteriaResults({}),
1410
+ className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
1411
+ children: "\u21BA Reset"
1425
1412
  }
1426
- ),
1427
- /* @__PURE__ */ jsx2(
1413
+ )
1414
+ ] })
1415
+ ] }),
1416
+ showSteps && template === "rubric" && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
1417
+ steps.map((step, idx) => /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 p-2 rounded border border-zinc-700", children: [
1418
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs mb-1", children: [
1419
+ /* @__PURE__ */ jsx2("span", { className: "w-5 h-5 rounded bg-blue-900/50 text-blue-300 flex items-center justify-center font-medium", children: idx + 1 }),
1420
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-100 font-medium flex-1", children: step.action })
1421
+ ] }),
1422
+ step.expectedResult && /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 ml-7 mb-2", children: step.expectedResult }),
1423
+ rubricMode === "pass_fail" && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 ml-7", children: [
1424
+ /* @__PURE__ */ jsx2(
1425
+ "button",
1426
+ {
1427
+ onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: true })),
1428
+ className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === true ? "bg-green-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-green-900/30"}`,
1429
+ children: "\u2713 Pass"
1430
+ }
1431
+ ),
1432
+ /* @__PURE__ */ jsx2(
1433
+ "button",
1434
+ {
1435
+ onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: false })),
1436
+ className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === false ? "bg-red-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-red-900/30"}`,
1437
+ children: "\u2717 Fail"
1438
+ }
1439
+ )
1440
+ ] }),
1441
+ rubricMode === "rating" && /* @__PURE__ */ jsx2("div", { className: "flex gap-1 ml-7", children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ jsx2(
1442
+ "button",
1443
+ {
1444
+ onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: n })),
1445
+ className: `w-8 h-8 rounded font-medium text-sm transition-colors ${criteriaResults[idx] === n ? "bg-blue-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-blue-900/50"}`,
1446
+ children: n
1447
+ },
1448
+ n
1449
+ )) })
1450
+ ] }, idx)),
1451
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
1452
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
1453
+ Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
1428
1454
  "button",
1429
1455
  {
1430
- onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: false })),
1431
- className: `flex-1 py-1 px-2 rounded text-xs font-medium transition-colors ${criteriaResults[idx] === false ? "bg-red-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-red-900/30"}`,
1432
- children: "\u2717 Fail"
1456
+ onClick: () => setCriteriaResults({}),
1457
+ className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
1458
+ children: "\u21BA Reset"
1433
1459
  }
1434
1460
  )
1435
- ] }),
1436
- rubricMode === "rating" && /* @__PURE__ */ jsx2("div", { className: "flex gap-1 ml-7", children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ jsx2(
1437
- "button",
1438
- {
1439
- onClick: () => setCriteriaResults((prev) => ({ ...prev, [idx]: n })),
1440
- className: `w-8 h-8 rounded font-medium text-sm transition-colors ${criteriaResults[idx] === n ? "bg-blue-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-blue-900/50"}`,
1441
- children: n
1442
- },
1443
- n
1444
- )) })
1445
- ] }, idx)),
1446
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2", children: [
1447
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: rubricMode === "rating" ? "Rate 1-5 for each criterion." : "Mark each criterion as Pass or Fail." }),
1448
- Object.keys(criteriaResults).length > 0 && /* @__PURE__ */ jsx2(
1449
- "button",
1450
- {
1451
- onClick: () => setCriteriaResults({}),
1452
- className: "text-xs text-zinc-500 hover:text-red-500 transition-colors",
1453
- children: "\u21BA Reset"
1454
- }
1455
- )
1456
- ] })
1457
- ] }),
1458
- showSteps && template === "freeform" && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-2 bg-amber-900/20 rounded border border-amber-800 text-xs", children: [
1459
- /* @__PURE__ */ jsx2("p", { className: "text-amber-300 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
1460
- /* @__PURE__ */ jsx2("p", { className: "text-amber-400", children: "Review the area described above and note:" }),
1461
- /* @__PURE__ */ jsxs("ul", { className: "text-amber-400 mt-1 ml-4 list-disc", children: [
1462
- /* @__PURE__ */ jsx2("li", { children: "What works well" }),
1463
- /* @__PURE__ */ jsx2("li", { children: "Issues or concerns" }),
1464
- /* @__PURE__ */ jsx2("li", { children: "Suggestions" })
1461
+ ] })
1462
+ ] }),
1463
+ showSteps && template === "freeform" && /* @__PURE__ */ jsxs("div", { className: "mt-2 p-2 bg-amber-900/20 rounded border border-amber-800 text-xs", children: [
1464
+ /* @__PURE__ */ jsx2("p", { className: "text-amber-300 font-medium mb-1", children: "\u{1F4AD} Open Observation" }),
1465
+ /* @__PURE__ */ jsx2("p", { className: "text-amber-400", children: "Review the area described above and note:" }),
1466
+ /* @__PURE__ */ jsxs("ul", { className: "text-amber-400 mt-1 ml-4 list-disc", children: [
1467
+ /* @__PURE__ */ jsx2("li", { children: "What works well" }),
1468
+ /* @__PURE__ */ jsx2("li", { children: "Issues or concerns" }),
1469
+ /* @__PURE__ */ jsx2("li", { children: "Suggestions" })
1470
+ ] })
1465
1471
  ] })
1466
- ] })
1467
- ] });
1468
- })(),
1469
- /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-green-900/20 rounded text-xs text-green-400", children: [
1470
- /* @__PURE__ */ jsx2("span", { className: "font-medium", children: displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:" }),
1471
- " ",
1472
- displayedAssignment.testCase.expectedResult
1473
- ] })
1474
- ] }),
1475
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1472
+ ] });
1473
+ })(),
1474
+ /* @__PURE__ */ jsxs("div", { className: "mt-3 p-2 bg-green-900/20 rounded text-xs text-green-400", children: [
1475
+ /* @__PURE__ */ jsx2("span", { className: "font-medium", children: displayedAssignment.testCase.track?.testTemplate === "checklist" ? "Pass criteria:" : displayedAssignment.testCase.track?.testTemplate === "rubric" ? "Target score:" : "Expected:" }),
1476
+ " ",
1477
+ displayedAssignment.testCase.expectedResult
1478
+ ] })
1479
+ ] }),
1480
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1481
+ /* @__PURE__ */ jsx2(
1482
+ "button",
1483
+ {
1484
+ onClick: handleFail,
1485
+ disabled: submitting || skipping,
1486
+ className: "flex-1 py-2 px-3 bg-red-900/30 text-red-400 rounded-lg font-medium text-sm hover:bg-red-800/30 disabled:opacity-50 transition-colors",
1487
+ children: "\u2717 Fail"
1488
+ }
1489
+ ),
1490
+ /* @__PURE__ */ jsx2(
1491
+ "button",
1492
+ {
1493
+ onClick: handleOpenSkipModal,
1494
+ disabled: submitting || skipping,
1495
+ className: "py-2 px-3 bg-yellow-900/30 text-yellow-400 rounded-lg font-medium text-sm hover:bg-yellow-800/30 disabled:opacity-50 transition-colors",
1496
+ children: "\u23ED\uFE0F Skip"
1497
+ }
1498
+ ),
1499
+ /* @__PURE__ */ jsx2(
1500
+ "button",
1501
+ {
1502
+ onClick: handlePass,
1503
+ disabled: submitting || skipping,
1504
+ className: "flex-1 py-2 px-3 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
1505
+ children: submitting ? "..." : "\u2713 Pass"
1506
+ }
1507
+ )
1508
+ ] }),
1509
+ showSkipModal && /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: () => setShowSkipModal(false), children: /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-xl p-4 w-72 shadow-xl border border-zinc-700", onClick: (e) => e.stopPropagation(), children: [
1510
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mb-3", children: "Skip Test" }),
1511
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-3", children: "Please select a reason for skipping this test." }),
1512
+ /* @__PURE__ */ jsx2("div", { className: "space-y-2 mb-4", children: skipReasonOptions.map((option) => /* @__PURE__ */ jsxs(
1513
+ "button",
1514
+ {
1515
+ onClick: () => setSelectedSkipReason(option.value),
1516
+ className: `w-full text-left p-2.5 rounded-lg border transition-colors ${selectedSkipReason === option.value ? "bg-yellow-900/20 border-yellow-700 text-yellow-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-yellow-800"}`,
1517
+ children: [
1518
+ /* @__PURE__ */ jsx2("div", { className: "font-medium text-sm", children: option.label }),
1519
+ /* @__PURE__ */ jsx2("div", { className: "text-xs text-zinc-500", children: option.description })
1520
+ ]
1521
+ },
1522
+ option.value
1523
+ )) }),
1524
+ selectedSkipReason === "other" && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1525
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Notes (required)" }),
1526
+ /* @__PURE__ */ jsx2(
1527
+ "textarea",
1528
+ {
1529
+ value: skipNotes,
1530
+ onChange: (e) => setSkipNotes(e.target.value),
1531
+ placeholder: "Please explain why you're skipping...",
1532
+ className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent placeholder:text-zinc-500",
1533
+ rows: 2
1534
+ }
1535
+ )
1536
+ ] }),
1537
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1538
+ /* @__PURE__ */ jsx2(
1539
+ "button",
1540
+ {
1541
+ onClick: () => setShowSkipModal(false),
1542
+ className: "flex-1 py-2 px-3 text-sm font-medium text-zinc-400 bg-zinc-700 rounded-lg hover:bg-zinc-700 transition-colors",
1543
+ children: "Cancel"
1544
+ }
1545
+ ),
1546
+ /* @__PURE__ */ jsx2(
1547
+ "button",
1548
+ {
1549
+ onClick: handleSkip,
1550
+ disabled: !selectedSkipReason || selectedSkipReason === "other" && !skipNotes.trim() || skipping,
1551
+ className: "flex-1 py-2 px-3 text-sm font-medium text-white bg-yellow-500 rounded-lg hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
1552
+ children: skipping ? "Skipping..." : "Skip Test"
1553
+ }
1554
+ )
1555
+ ] })
1556
+ ] }) })
1557
+ ] })
1558
+ ) : null }),
1559
+ activeTab === "messages" && /* @__PURE__ */ jsx2("div", { children: messageView === "compose" ? (
1560
+ /* Compose New Message */
1561
+ /* @__PURE__ */ jsxs("div", { children: [
1476
1562
  /* @__PURE__ */ jsx2(
1477
1563
  "button",
1478
1564
  {
1479
- onClick: handleFail,
1480
- disabled: submitting || skipping,
1481
- className: "flex-1 py-2 px-3 bg-red-900/30 text-red-400 rounded-lg font-medium text-sm hover:bg-red-800/30 disabled:opacity-50 transition-colors",
1482
- children: "\u2717 Fail"
1565
+ onClick: handleBackToThreadList,
1566
+ className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
1567
+ children: "\u2190 Back to Messages"
1483
1568
  }
1484
1569
  ),
1570
+ /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1571
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "New Message" }),
1572
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Send a message to the QA team" })
1573
+ ] }),
1574
+ /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
1575
+ /* @__PURE__ */ jsxs("div", { children: [
1576
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Subject" }),
1577
+ /* @__PURE__ */ jsx2(
1578
+ "input",
1579
+ {
1580
+ type: "text",
1581
+ value: composeSubject,
1582
+ onChange: (e) => setComposeSubject(e.target.value),
1583
+ placeholder: "What's this about?",
1584
+ maxLength: 100,
1585
+ className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
1586
+ }
1587
+ )
1588
+ ] }),
1589
+ /* @__PURE__ */ jsxs("div", { children: [
1590
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Message" }),
1591
+ /* @__PURE__ */ jsx2(
1592
+ "textarea",
1593
+ {
1594
+ value: composeMessage,
1595
+ onChange: (e) => setComposeMessage(e.target.value),
1596
+ placeholder: "Write your message...",
1597
+ maxLength: 2e3,
1598
+ rows: 6,
1599
+ className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
1600
+ }
1601
+ )
1602
+ ] }),
1603
+ /* @__PURE__ */ jsx2(
1604
+ "button",
1605
+ {
1606
+ onClick: handleSendNewMessage,
1607
+ disabled: !composeSubject.trim() || !composeMessage.trim() || sendingNewMessage,
1608
+ className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
1609
+ children: sendingNewMessage ? "Sending..." : "Send Message"
1610
+ }
1611
+ )
1612
+ ] })
1613
+ ] })
1614
+ ) : messageView === "thread" && selectedThread ? (
1615
+ /* Thread Detail View */
1616
+ /* @__PURE__ */ jsxs("div", { children: [
1485
1617
  /* @__PURE__ */ jsx2(
1486
1618
  "button",
1487
1619
  {
1488
- onClick: handleOpenSkipModal,
1489
- disabled: submitting || skipping,
1490
- className: "py-2 px-3 bg-yellow-900/30 text-yellow-400 rounded-lg font-medium text-sm hover:bg-yellow-800/30 disabled:opacity-50 transition-colors",
1491
- children: "\u23ED\uFE0F Skip"
1620
+ onClick: handleBackToThreadList,
1621
+ className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
1622
+ children: "\u2190 Back to Messages"
1492
1623
  }
1493
1624
  ),
1625
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4 pb-3 border-b border-zinc-700", children: [
1626
+ /* @__PURE__ */ jsx2("span", { className: "text-lg", children: getThreadTypeIcon(selectedThread.threadType) }),
1627
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm leading-tight", children: selectedThread.subject || "No subject" })
1628
+ ] }),
1629
+ loadingMessages ? /* @__PURE__ */ jsx2("div", { className: "text-center py-6", children: /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Loading messages..." }) }) : /* @__PURE__ */ jsx2("div", { className: "space-y-3 mb-4", children: threadMessages.map((message) => /* @__PURE__ */ jsxs(
1630
+ "div",
1631
+ {
1632
+ className: `p-3 rounded-lg ${message.senderType === "tester" ? "bg-blue-900/30 border border-blue-800 ml-6" : "bg-zinc-800 border border-zinc-700 mr-6"}`,
1633
+ children: [
1634
+ /* @__PURE__ */ jsx2("p", { className: `text-xs font-medium mb-1 ${message.senderType === "tester" ? "text-blue-300" : "text-zinc-300"}`, children: message.senderType === "tester" ? "You" : message.senderName }),
1635
+ /* @__PURE__ */ jsx2("p", { className: `text-sm ${message.senderType === "tester" ? "text-blue-100" : "text-zinc-200"}`, children: message.content }),
1636
+ /* @__PURE__ */ jsx2("p", { className: `text-[10px] mt-1 ${message.senderType === "tester" ? "text-blue-400/60" : "text-zinc-500"}`, children: formatMessageTime(message.createdAt) })
1637
+ ]
1638
+ },
1639
+ message.id
1640
+ )) }),
1641
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-3 border-t border-zinc-700", children: [
1642
+ /* @__PURE__ */ jsx2(
1643
+ "input",
1644
+ {
1645
+ type: "text",
1646
+ value: replyText,
1647
+ onChange: (e) => setReplyText(e.target.value),
1648
+ placeholder: "Type a reply...",
1649
+ maxLength: 1e3,
1650
+ className: "flex-1 px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500",
1651
+ onKeyDown: (e) => e.key === "Enter" && !e.shiftKey && handleSendReply()
1652
+ }
1653
+ ),
1654
+ /* @__PURE__ */ jsx2(
1655
+ "button",
1656
+ {
1657
+ onClick: handleSendReply,
1658
+ disabled: !replyText.trim() || sendingReply,
1659
+ className: "px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
1660
+ children: sendingReply ? "..." : "Send"
1661
+ }
1662
+ )
1663
+ ] })
1664
+ ] })
1665
+ ) : (
1666
+ /* Thread List View */
1667
+ /* @__PURE__ */ jsxs("div", { children: [
1494
1668
  /* @__PURE__ */ jsx2(
1495
1669
  "button",
1496
1670
  {
1497
- onClick: handlePass,
1498
- disabled: submitting || skipping,
1499
- className: "flex-1 py-2 px-3 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
1500
- children: submitting ? "..." : "\u2713 Pass"
1671
+ onClick: handleStartNewMessage,
1672
+ className: "w-full flex items-center justify-center gap-2 py-2 px-4 mb-3 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 transition-colors",
1673
+ children: "\u2709\uFE0F New Message"
1501
1674
  }
1502
- )
1503
- ] }),
1504
- showSkipModal && /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: () => setShowSkipModal(false), children: /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-xl p-4 w-72 shadow-xl border border-zinc-700", onClick: (e) => e.stopPropagation(), children: [
1505
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mb-3", children: "Skip Test" }),
1506
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-3", children: "Please select a reason for skipping this test." }),
1507
- /* @__PURE__ */ jsx2("div", { className: "space-y-2 mb-4", children: skipReasonOptions.map((option) => /* @__PURE__ */ jsxs(
1675
+ ),
1676
+ threads.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1677
+ /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F4AC}" }),
1678
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "No messages yet" }),
1679
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Start a conversation or wait for messages from admins" })
1680
+ ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs(
1508
1681
  "button",
1509
1682
  {
1510
- onClick: () => setSelectedSkipReason(option.value),
1511
- className: `w-full text-left p-2.5 rounded-lg border transition-colors ${selectedSkipReason === option.value ? "bg-yellow-900/20 border-yellow-700 text-yellow-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-yellow-800"}`,
1683
+ onClick: () => handleOpenThread(thread),
1684
+ className: `w-full text-left p-3 rounded-lg border transition-colors ${thread.unreadCount > 0 ? "bg-blue-900/20 border-blue-800 hover:bg-blue-900/30" : "bg-zinc-800 border-zinc-700 hover:bg-zinc-700"}`,
1512
1685
  children: [
1513
- /* @__PURE__ */ jsx2("div", { className: "font-medium text-sm", children: option.label }),
1514
- /* @__PURE__ */ jsx2("div", { className: "text-xs text-zinc-500", children: option.description })
1686
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
1687
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0 flex-1", children: [
1688
+ thread.isPinned && /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "\u{1F4CC}" }),
1689
+ /* @__PURE__ */ jsx2("span", { className: "text-xs", children: getThreadTypeIcon(thread.threadType) }),
1690
+ /* @__PURE__ */ jsx2("span", { className: `text-sm truncate ${thread.unreadCount > 0 ? "font-semibold text-zinc-100" : "text-zinc-300"}`, children: thread.subject || "No subject" })
1691
+ ] }),
1692
+ (thread.priority === "high" || thread.priority === "urgent") && /* @__PURE__ */ jsx2("span", { className: `w-2 h-2 rounded-full flex-shrink-0 ml-2 ${thread.priority === "urgent" ? "bg-red-500" : "bg-orange-500"}` })
1693
+ ] }),
1694
+ thread.lastMessage && /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500 truncate", children: [
1695
+ thread.lastMessage.senderName,
1696
+ ": ",
1697
+ thread.lastMessage.content
1698
+ ] }),
1699
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1.5", children: [
1700
+ thread.unreadCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-500 text-white rounded-full font-medium", children: [
1701
+ thread.unreadCount,
1702
+ " new"
1703
+ ] }) : /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: "Read" }),
1704
+ /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: formatRelativeTime(thread.lastMessageAt) })
1705
+ ] })
1515
1706
  ]
1516
1707
  },
1517
- option.value
1518
- )) }),
1519
- selectedSkipReason === "other" && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1520
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-400 mb-1", children: "Notes (required)" }),
1708
+ thread.id
1709
+ )) })
1710
+ ] })
1711
+ ) }),
1712
+ activeTab === "session" && /* @__PURE__ */ jsx2("div", { children: !activeSession ? (
1713
+ /* Start Session View */
1714
+ /* @__PURE__ */ jsxs("div", { children: [
1715
+ /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1716
+ /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F50D}" }),
1717
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "Exploratory QA Session" }),
1718
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
1719
+ ] }),
1720
+ focusAreas.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1721
+ /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: [
1722
+ "\u{1F4CC} Focus Areas",
1723
+ /* @__PURE__ */ jsx2("span", { className: "ml-1 text-[10px] text-zinc-500 font-normal", children: "from your team" })
1724
+ ] }),
1725
+ /* @__PURE__ */ jsx2("div", { className: "space-y-1.5", children: focusAreas.map((area) => /* @__PURE__ */ jsxs(
1726
+ "button",
1727
+ {
1728
+ onClick: () => setSessionFocusArea(area.name),
1729
+ className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === area.name ? "bg-amber-900/20 border-amber-700 text-amber-400" : "bg-amber-900/20/50 border-amber-800 text-zinc-300 hover:bg-amber-900/20"}`,
1730
+ children: [
1731
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1732
+ /* @__PURE__ */ jsx2("span", { className: "font-medium", children: area.name }),
1733
+ /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${area.priority >= 70 ? "bg-red-900/30 text-red-400" : area.priority >= 50 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: area.priority >= 70 ? "Urgent" : area.priority >= 50 ? "Important" : "Suggested" })
1734
+ ] }),
1735
+ area.description && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-zinc-500 mt-0.5 line-clamp-2", children: area.description })
1736
+ ]
1737
+ },
1738
+ area.id
1739
+ )) })
1740
+ ] }),
1741
+ suggestedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1742
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
1743
+ /* @__PURE__ */ jsx2("div", { className: "space-y-1.5 max-h-32 overflow-y-auto", children: suggestedRoutes.map((suggestion, idx) => /* @__PURE__ */ jsx2(
1744
+ "button",
1745
+ {
1746
+ onClick: () => setSessionFocusArea(suggestion.route),
1747
+ className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === suggestion.route ? "bg-blue-950/30 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:bg-zinc-700"}`,
1748
+ children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1749
+ /* @__PURE__ */ jsx2("span", { className: "font-medium truncate", children: suggestion.route }),
1750
+ /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${suggestion.priorityScore >= 40 ? "bg-red-900/30 text-red-400" : suggestion.priorityScore >= 25 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: suggestion.reason })
1751
+ ] })
1752
+ },
1753
+ idx
1754
+ )) })
1755
+ ] }),
1756
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1757
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Focus Area (optional)" }),
1758
+ /* @__PURE__ */ jsx2(
1759
+ "input",
1760
+ {
1761
+ type: "text",
1762
+ value: sessionFocusArea,
1763
+ onChange: (e) => setSessionFocusArea(e.target.value),
1764
+ placeholder: "e.g., checkout flow, settings page",
1765
+ className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
1766
+ }
1767
+ )
1768
+ ] }),
1769
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1770
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Platform" }),
1771
+ /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
1772
+ { key: "web", label: "\u{1F310} Web" },
1773
+ { key: "ios", label: "\u{1F4F1} iOS" },
1774
+ { key: "android", label: "\u{1F916} Android" }
1775
+ ].map(({ key, label }) => /* @__PURE__ */ jsx2(
1776
+ "button",
1777
+ {
1778
+ onClick: () => setSessionPlatform(key),
1779
+ className: `flex-1 py-2 px-3 rounded-lg text-xs font-medium transition-colors border-2 ${sessionPlatform === key ? "bg-blue-950/30 border-blue-500 text-blue-300" : "bg-zinc-800 border-transparent text-zinc-400 hover:bg-zinc-700"}`,
1780
+ children: label
1781
+ },
1782
+ key
1783
+ )) })
1784
+ ] }),
1785
+ /* @__PURE__ */ jsx2(
1786
+ "button",
1787
+ {
1788
+ onClick: handleStartSession,
1789
+ disabled: startingSession,
1790
+ 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",
1791
+ children: startingSession ? "Starting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
1792
+ /* @__PURE__ */ jsx2("span", { children: "\u25B6" }),
1793
+ " Start Session"
1794
+ ] })
1795
+ }
1796
+ )
1797
+ ] })
1798
+ ) : showEndConfirm ? (
1799
+ /* End Session Confirmation */
1800
+ /* @__PURE__ */ jsxs("div", { children: [
1801
+ /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1802
+ /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u270B" }),
1803
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "End Session?" }),
1804
+ /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 text-xs mt-1", children: [
1805
+ "Duration: ",
1806
+ formatElapsedTime(sessionElapsedTime),
1807
+ " \u2022 ",
1808
+ sessionFindings.length,
1809
+ " finding",
1810
+ sessionFindings.length !== 1 ? "s" : ""
1811
+ ] })
1812
+ ] }),
1813
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1814
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Session Notes (optional)" }),
1521
1815
  /* @__PURE__ */ jsx2(
1522
1816
  "textarea",
1523
1817
  {
1524
- value: skipNotes,
1525
- onChange: (e) => setSkipNotes(e.target.value),
1526
- placeholder: "Please explain why you're skipping...",
1527
- className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent placeholder:text-zinc-500",
1528
- rows: 2
1818
+ value: sessionNotes,
1819
+ onChange: (e) => setSessionNotes(e.target.value),
1820
+ placeholder: "Any overall observations from this session...",
1821
+ rows: 3,
1822
+ className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
1529
1823
  }
1530
1824
  )
1531
1825
  ] }),
@@ -1533,64 +1827,84 @@ function BugBearPanel({
1533
1827
  /* @__PURE__ */ jsx2(
1534
1828
  "button",
1535
1829
  {
1536
- onClick: () => setShowSkipModal(false),
1537
- className: "flex-1 py-2 px-3 text-sm font-medium text-zinc-400 bg-zinc-700 rounded-lg hover:bg-zinc-700 transition-colors",
1830
+ onClick: () => setShowEndConfirm(false),
1831
+ className: "flex-1 py-2 px-3 bg-zinc-700 text-zinc-300 rounded-lg font-medium text-sm hover:bg-zinc-700 transition-colors",
1538
1832
  children: "Cancel"
1539
1833
  }
1540
1834
  ),
1541
1835
  /* @__PURE__ */ jsx2(
1542
1836
  "button",
1543
1837
  {
1544
- onClick: handleSkip,
1545
- disabled: !selectedSkipReason || selectedSkipReason === "other" && !skipNotes.trim() || skipping,
1546
- className: "flex-1 py-2 px-3 text-sm font-medium text-white bg-yellow-500 rounded-lg hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
1547
- children: skipping ? "Skipping..." : "Skip Test"
1838
+ onClick: handleEndSession,
1839
+ disabled: endingSession,
1840
+ 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",
1841
+ children: endingSession ? "Ending..." : "End Session"
1842
+ }
1843
+ )
1844
+ ] })
1845
+ ] })
1846
+ ) : showAddFinding ? (
1847
+ /* Add Finding Form */
1848
+ /* @__PURE__ */ jsxs("div", { children: [
1849
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
1850
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm", children: "Add Finding" }),
1851
+ /* @__PURE__ */ jsx2(
1852
+ "button",
1853
+ {
1854
+ onClick: () => setShowAddFinding(false),
1855
+ className: "text-zinc-500 hover:text-zinc-400",
1856
+ children: "\u2715"
1548
1857
  }
1549
1858
  )
1550
- ] })
1551
- ] }) })
1552
- ] })
1553
- ) : null }),
1554
- activeTab === "messages" && /* @__PURE__ */ jsx2("div", { children: messageView === "compose" ? (
1555
- /* Compose New Message */
1556
- /* @__PURE__ */ jsxs("div", { children: [
1557
- /* @__PURE__ */ jsx2(
1558
- "button",
1559
- {
1560
- onClick: handleBackToThreadList,
1561
- className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
1562
- children: "\u2190 Back to Messages"
1563
- }
1564
- ),
1565
- /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1566
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "New Message" }),
1567
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Send a message to the QA team" })
1568
- ] }),
1569
- /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
1570
- /* @__PURE__ */ jsxs("div", { children: [
1571
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Subject" }),
1859
+ ] }),
1860
+ /* @__PURE__ */ jsx2("div", { className: "flex gap-1 mb-3", children: [
1861
+ { type: "bug", label: "\u{1F41B} Bug", color: "red" },
1862
+ { type: "concern", label: "\u26A0\uFE0F Concern", color: "orange" },
1863
+ { type: "suggestion", label: "\u{1F4A1} Idea", color: "blue" },
1864
+ { type: "question", label: "\u2753 Question", color: "purple" }
1865
+ ].map(({ type, label, color }) => /* @__PURE__ */ jsx2(
1866
+ "button",
1867
+ {
1868
+ onClick: () => setFindingType(type),
1869
+ className: `flex-1 py-1.5 px-2 rounded text-xs font-medium transition-colors ${findingType === type ? color === "red" ? "bg-red-900/30 text-red-400 ring-2 ring-red-400" : color === "orange" ? "bg-orange-900/30 text-orange-400 ring-2 ring-orange-400" : color === "blue" ? "bg-blue-900/30 text-blue-300 ring-2 ring-blue-400" : "bg-blue-900/50 text-blue-300 ring-2 ring-blue-400" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
1870
+ children: label
1871
+ },
1872
+ type
1873
+ )) }),
1874
+ findingType === "bug" && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1875
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
1876
+ /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low", "observation"].map((sev) => /* @__PURE__ */ jsx2(
1877
+ "button",
1878
+ {
1879
+ onClick: () => setFindingSeverity(sev),
1880
+ className: `flex-1 py-1 px-1 rounded text-xs font-medium capitalize transition-colors ${findingSeverity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : sev === "low" ? "bg-zinc-8000 text-white" : "bg-blue-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
1881
+ children: sev === "observation" ? "obs" : sev
1882
+ },
1883
+ sev
1884
+ )) })
1885
+ ] }),
1886
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1887
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Title *" }),
1572
1888
  /* @__PURE__ */ jsx2(
1573
1889
  "input",
1574
1890
  {
1575
1891
  type: "text",
1576
- value: composeSubject,
1577
- onChange: (e) => setComposeSubject(e.target.value),
1578
- placeholder: "What's this about?",
1579
- maxLength: 100,
1892
+ value: findingTitle,
1893
+ onChange: (e) => setFindingTitle(e.target.value),
1894
+ placeholder: "Brief description of what you found",
1580
1895
  className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
1581
1896
  }
1582
1897
  )
1583
1898
  ] }),
1584
- /* @__PURE__ */ jsxs("div", { children: [
1585
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Message" }),
1899
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1900
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Details (optional)" }),
1586
1901
  /* @__PURE__ */ jsx2(
1587
1902
  "textarea",
1588
1903
  {
1589
- value: composeMessage,
1590
- onChange: (e) => setComposeMessage(e.target.value),
1591
- placeholder: "Write your message...",
1592
- maxLength: 2e3,
1593
- rows: 6,
1904
+ value: findingDescription,
1905
+ onChange: (e) => setFindingDescription(e.target.value),
1906
+ placeholder: "Steps to reproduce, expected behavior, etc.",
1907
+ rows: 2,
1594
1908
  className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
1595
1909
  }
1596
1910
  )
@@ -1598,308 +1912,112 @@ function BugBearPanel({
1598
1912
  /* @__PURE__ */ jsx2(
1599
1913
  "button",
1600
1914
  {
1601
- onClick: handleSendNewMessage,
1602
- disabled: !composeSubject.trim() || !composeMessage.trim() || sendingNewMessage,
1915
+ onClick: handleAddFinding,
1916
+ disabled: addingFinding || !findingTitle.trim(),
1603
1917
  className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
1604
- children: sendingNewMessage ? "Sending..." : "Send Message"
1605
- }
1606
- )
1607
- ] })
1608
- ] })
1609
- ) : messageView === "thread" && selectedThread ? (
1610
- /* Thread Detail View */
1611
- /* @__PURE__ */ jsxs("div", { children: [
1612
- /* @__PURE__ */ jsx2(
1613
- "button",
1614
- {
1615
- onClick: handleBackToThreadList,
1616
- className: "text-sm text-zinc-400 hover:text-zinc-200 mb-3 flex items-center gap-1",
1617
- children: "\u2190 Back to Messages"
1618
- }
1619
- ),
1620
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4 pb-3 border-b border-zinc-700", children: [
1621
- /* @__PURE__ */ jsx2("span", { className: "text-lg", children: getThreadTypeIcon(selectedThread.threadType) }),
1622
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm leading-tight", children: selectedThread.subject || "No subject" })
1623
- ] }),
1624
- loadingMessages ? /* @__PURE__ */ jsx2("div", { className: "text-center py-6", children: /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Loading messages..." }) }) : /* @__PURE__ */ jsx2("div", { className: "space-y-3 mb-4", children: threadMessages.map((message) => /* @__PURE__ */ jsxs(
1625
- "div",
1626
- {
1627
- className: `p-3 rounded-lg ${message.senderType === "tester" ? "bg-blue-900/30 border border-blue-800 ml-6" : "bg-zinc-800 border border-zinc-700 mr-6"}`,
1628
- children: [
1629
- /* @__PURE__ */ jsx2("p", { className: `text-xs font-medium mb-1 ${message.senderType === "tester" ? "text-blue-300" : "text-zinc-300"}`, children: message.senderType === "tester" ? "You" : message.senderName }),
1630
- /* @__PURE__ */ jsx2("p", { className: `text-sm ${message.senderType === "tester" ? "text-blue-100" : "text-zinc-200"}`, children: message.content }),
1631
- /* @__PURE__ */ jsx2("p", { className: `text-[10px] mt-1 ${message.senderType === "tester" ? "text-blue-400/60" : "text-zinc-500"}`, children: formatMessageTime(message.createdAt) })
1632
- ]
1633
- },
1634
- message.id
1635
- )) }),
1636
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-3 border-t border-zinc-700", children: [
1637
- /* @__PURE__ */ jsx2(
1638
- "input",
1639
- {
1640
- type: "text",
1641
- value: replyText,
1642
- onChange: (e) => setReplyText(e.target.value),
1643
- placeholder: "Type a reply...",
1644
- maxLength: 1e3,
1645
- className: "flex-1 px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500",
1646
- onKeyDown: (e) => e.key === "Enter" && !e.shiftKey && handleSendReply()
1647
- }
1648
- ),
1649
- /* @__PURE__ */ jsx2(
1650
- "button",
1651
- {
1652
- onClick: handleSendReply,
1653
- disabled: !replyText.trim() || sendingReply,
1654
- className: "px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
1655
- children: sendingReply ? "..." : "Send"
1918
+ children: addingFinding ? "Adding..." : "Add Finding"
1656
1919
  }
1657
1920
  )
1658
1921
  ] })
1659
- ] })
1660
- ) : (
1661
- /* Thread List View */
1662
- /* @__PURE__ */ jsxs("div", { children: [
1663
- /* @__PURE__ */ jsx2(
1664
- "button",
1665
- {
1666
- onClick: handleStartNewMessage,
1667
- className: "w-full flex items-center justify-center gap-2 py-2 px-4 mb-3 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 transition-colors",
1668
- children: "\u2709\uFE0F New Message"
1669
- }
1670
- ),
1671
- threads.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1672
- /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F4AC}" }),
1673
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "No messages yet" }),
1674
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-sm", children: "Start a conversation or wait for messages from admins" })
1675
- ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2", children: threads.map((thread) => /* @__PURE__ */ jsxs(
1676
- "button",
1677
- {
1678
- onClick: () => handleOpenThread(thread),
1679
- className: `w-full text-left p-3 rounded-lg border transition-colors ${thread.unreadCount > 0 ? "bg-blue-900/20 border-blue-800 hover:bg-blue-900/30" : "bg-zinc-800 border-zinc-700 hover:bg-zinc-700"}`,
1680
- children: [
1681
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
1682
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0 flex-1", children: [
1683
- thread.isPinned && /* @__PURE__ */ jsx2("span", { className: "text-xs", children: "\u{1F4CC}" }),
1684
- /* @__PURE__ */ jsx2("span", { className: "text-xs", children: getThreadTypeIcon(thread.threadType) }),
1685
- /* @__PURE__ */ jsx2("span", { className: `text-sm truncate ${thread.unreadCount > 0 ? "font-semibold text-zinc-100" : "text-zinc-300"}`, children: thread.subject || "No subject" })
1686
- ] }),
1687
- (thread.priority === "high" || thread.priority === "urgent") && /* @__PURE__ */ jsx2("span", { className: `w-2 h-2 rounded-full flex-shrink-0 ml-2 ${thread.priority === "urgent" ? "bg-red-500" : "bg-orange-500"}` })
1922
+ ) : (
1923
+ /* Active Session View */
1924
+ /* @__PURE__ */ jsxs("div", { children: [
1925
+ /* @__PURE__ */ jsxs("div", { className: "bg-green-900/20 rounded-lg p-3 mb-3 border border-green-800", children: [
1926
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1927
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1928
+ /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
1929
+ /* @__PURE__ */ jsx2("span", { className: "font-medium text-green-300 text-sm", children: "Session Active" })
1688
1930
  ] }),
1689
- thread.lastMessage && /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500 truncate", children: [
1690
- thread.lastMessage.senderName,
1691
- ": ",
1692
- thread.lastMessage.content
1693
- ] }),
1694
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-1.5", children: [
1695
- thread.unreadCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[10px] px-1.5 py-0.5 bg-blue-500 text-white rounded-full font-medium", children: [
1696
- thread.unreadCount,
1697
- " new"
1698
- ] }) : /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: "Read" }),
1699
- /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-zinc-600", children: formatRelativeTime(thread.lastMessageAt) })
1700
- ] })
1701
- ]
1702
- },
1703
- thread.id
1704
- )) })
1705
- ] })
1706
- ) }),
1707
- activeTab === "session" && /* @__PURE__ */ jsx2("div", { children: !activeSession ? (
1708
- /* Start Session View */
1709
- /* @__PURE__ */ jsxs("div", { children: [
1710
- /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1711
- /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F50D}" }),
1712
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "Exploratory QA Session" }),
1713
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs mt-1", children: "Explore freely and capture findings as you go" })
1714
- ] }),
1715
- focusAreas.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1716
- /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: [
1717
- "\u{1F4CC} Focus Areas",
1718
- /* @__PURE__ */ jsx2("span", { className: "ml-1 text-[10px] text-zinc-500 font-normal", children: "from your team" })
1931
+ /* @__PURE__ */ jsx2("span", { className: "font-mono text-green-400 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
1932
+ ] }),
1933
+ activeSession.focusArea && /* @__PURE__ */ jsxs("p", { className: "text-green-400 text-xs mt-1", children: [
1934
+ "Focus: ",
1935
+ activeSession.focusArea
1936
+ ] })
1719
1937
  ] }),
1720
- /* @__PURE__ */ jsx2("div", { className: "space-y-1.5", children: focusAreas.map((area) => /* @__PURE__ */ jsxs(
1938
+ /* @__PURE__ */ jsxs(
1721
1939
  "button",
1722
1940
  {
1723
- onClick: () => setSessionFocusArea(area.name),
1724
- className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === area.name ? "bg-amber-900/20 border-amber-700 text-amber-400" : "bg-amber-900/20/50 border-amber-800 text-zinc-300 hover:bg-amber-900/20"}`,
1941
+ onClick: () => setShowAddFinding(true),
1942
+ className: "w-full py-3 px-4 bg-blue-500 text-white rounded-lg font-semibold text-sm hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 mb-3",
1725
1943
  children: [
1726
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1727
- /* @__PURE__ */ jsx2("span", { className: "font-medium", children: area.name }),
1728
- /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${area.priority >= 70 ? "bg-red-900/30 text-red-400" : area.priority >= 50 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: area.priority >= 70 ? "Urgent" : area.priority >= 50 ? "Important" : "Suggested" })
1729
- ] }),
1730
- area.description && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-zinc-500 mt-0.5 line-clamp-2", children: area.description })
1944
+ /* @__PURE__ */ jsx2("span", { children: "+" }),
1945
+ " Add Finding"
1731
1946
  ]
1732
- },
1733
- area.id
1734
- )) })
1735
- ] }),
1736
- suggestedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1737
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-2", children: "\u{1F3AF} Suggested Routes to Explore" }),
1738
- /* @__PURE__ */ jsx2("div", { className: "space-y-1.5 max-h-32 overflow-y-auto", children: suggestedRoutes.map((suggestion, idx) => /* @__PURE__ */ jsx2(
1739
- "button",
1740
- {
1741
- onClick: () => setSessionFocusArea(suggestion.route),
1742
- className: `w-full text-left px-3 py-2 rounded-lg text-xs transition-colors border ${sessionFocusArea === suggestion.route ? "bg-blue-950/30 border-blue-700 text-blue-300" : "bg-zinc-800 border-zinc-700 text-zinc-300 hover:bg-zinc-700"}`,
1743
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1744
- /* @__PURE__ */ jsx2("span", { className: "font-medium truncate", children: suggestion.route }),
1745
- /* @__PURE__ */ jsx2("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${suggestion.priorityScore >= 40 ? "bg-red-900/30 text-red-400" : suggestion.priorityScore >= 25 ? "bg-amber-900/30 text-amber-400" : "bg-zinc-700 text-zinc-500"}`, children: suggestion.reason })
1746
- ] })
1747
- },
1748
- idx
1749
- )) })
1750
- ] }),
1751
- /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1752
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Focus Area (optional)" }),
1753
- /* @__PURE__ */ jsx2(
1754
- "input",
1755
- {
1756
- type: "text",
1757
- value: sessionFocusArea,
1758
- onChange: (e) => setSessionFocusArea(e.target.value),
1759
- placeholder: "e.g., checkout flow, settings page",
1760
- className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
1761
- }
1762
- )
1763
- ] }),
1764
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1765
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Platform" }),
1766
- /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
1767
- { key: "web", label: "\u{1F310} Web" },
1768
- { key: "ios", label: "\u{1F4F1} iOS" },
1769
- { key: "android", label: "\u{1F916} Android" }
1770
- ].map(({ key, label }) => /* @__PURE__ */ jsx2(
1771
- "button",
1772
- {
1773
- onClick: () => setSessionPlatform(key),
1774
- className: `flex-1 py-2 px-3 rounded-lg text-xs font-medium transition-colors border-2 ${sessionPlatform === key ? "bg-blue-950/30 border-blue-500 text-blue-300" : "bg-zinc-800 border-transparent text-zinc-400 hover:bg-zinc-700"}`,
1775
- children: label
1776
- },
1777
- key
1778
- )) })
1779
- ] }),
1780
- /* @__PURE__ */ jsx2(
1781
- "button",
1782
- {
1783
- onClick: handleStartSession,
1784
- disabled: startingSession,
1785
- 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",
1786
- children: startingSession ? "Starting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
1787
- /* @__PURE__ */ jsx2("span", { children: "\u25B6" }),
1788
- " Start Session"
1789
- ] })
1790
- }
1791
- )
1792
- ] })
1793
- ) : showEndConfirm ? (
1794
- /* End Session Confirmation */
1795
- /* @__PURE__ */ jsxs("div", { children: [
1796
- /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
1797
- /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u270B" }),
1798
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 mt-2", children: "End Session?" }),
1799
- /* @__PURE__ */ jsxs("p", { className: "text-zinc-500 text-xs mt-1", children: [
1800
- "Duration: ",
1801
- formatElapsedTime(sessionElapsedTime),
1802
- " \u2022 ",
1803
- sessionFindings.length,
1804
- " finding",
1805
- sessionFindings.length !== 1 ? "s" : ""
1806
- ] })
1807
- ] }),
1808
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
1809
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Session Notes (optional)" }),
1810
- /* @__PURE__ */ jsx2(
1811
- "textarea",
1812
- {
1813
- value: sessionNotes,
1814
- onChange: (e) => setSessionNotes(e.target.value),
1815
- placeholder: "Any overall observations from this session...",
1816
- rows: 3,
1817
- className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
1818
- }
1819
- )
1820
- ] }),
1821
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1822
- /* @__PURE__ */ jsx2(
1823
- "button",
1824
- {
1825
- onClick: () => setShowEndConfirm(false),
1826
- className: "flex-1 py-2 px-3 bg-zinc-700 text-zinc-300 rounded-lg font-medium text-sm hover:bg-zinc-700 transition-colors",
1827
- children: "Cancel"
1828
1947
  }
1829
1948
  ),
1949
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1950
+ /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
1951
+ "Findings (",
1952
+ sessionFindings.length,
1953
+ ")"
1954
+ ] }) }),
1955
+ sessionFindings.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 bg-zinc-800 rounded-lg", children: [
1956
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "No findings yet" }),
1957
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "Explore and add findings as you go" })
1958
+ ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2 max-h-32 overflow-y-auto", children: sessionFindings.map((finding) => /* @__PURE__ */ jsx2(
1959
+ "div",
1960
+ {
1961
+ className: `p-2 rounded-lg border text-xs ${finding.type === "bug" ? "bg-red-900/20 border-red-800" : finding.type === "concern" ? "bg-orange-900/20 border-orange-200" : finding.type === "suggestion" ? "bg-blue-900/20 border-blue-800" : "bg-blue-950/30 border-blue-800"}`,
1962
+ children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
1963
+ /* @__PURE__ */ jsx2("span", { children: finding.type === "bug" ? "\u{1F41B}" : finding.type === "concern" ? "\u26A0\uFE0F" : finding.type === "suggestion" ? "\u{1F4A1}" : "\u2753" }),
1964
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1965
+ /* @__PURE__ */ jsx2("p", { className: "font-medium text-zinc-100 truncate", children: finding.title }),
1966
+ finding.severity && finding.type === "bug" && /* @__PURE__ */ jsx2("span", { className: `inline-block mt-0.5 px-1 py-0.5 rounded text-[10px] font-medium ${finding.severity === "critical" ? "bg-red-900/40 text-red-300" : finding.severity === "high" ? "bg-orange-900/40 text-orange-300" : finding.severity === "medium" ? "bg-yellow-900/40 text-yellow-300" : "bg-zinc-700 text-zinc-300"}`, children: finding.severity })
1967
+ ] })
1968
+ ] })
1969
+ },
1970
+ finding.id
1971
+ )) })
1972
+ ] }),
1830
1973
  /* @__PURE__ */ jsx2(
1831
1974
  "button",
1832
1975
  {
1833
- onClick: handleEndSession,
1834
- disabled: endingSession,
1835
- 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",
1836
- children: endingSession ? "Ending..." : "End Session"
1976
+ onClick: () => setShowEndConfirm(true),
1977
+ className: "w-full py-2 px-4 bg-zinc-700 text-zinc-300 rounded-lg font-medium text-sm hover:bg-zinc-700 transition-colors",
1978
+ children: "End Session"
1837
1979
  }
1838
1980
  )
1839
1981
  ] })
1840
- ] })
1841
- ) : showAddFinding ? (
1842
- /* Add Finding Form */
1843
- /* @__PURE__ */ jsxs("div", { children: [
1844
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
1845
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100 text-sm", children: "Add Finding" }),
1846
- /* @__PURE__ */ jsx2(
1847
- "button",
1848
- {
1849
- onClick: () => setShowAddFinding(false),
1850
- className: "text-zinc-500 hover:text-zinc-400",
1851
- children: "\u2715"
1852
- }
1853
- )
1854
- ] }),
1855
- /* @__PURE__ */ jsx2("div", { className: "flex gap-1 mb-3", children: [
1982
+ ) }),
1983
+ activeTab === "report" && /* @__PURE__ */ jsx2("div", { children: submitted ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1984
+ /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F389}" }),
1985
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Report submitted!" })
1986
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1987
+ /* @__PURE__ */ jsx2("div", { className: "flex gap-2 mb-4", children: [
1856
1988
  { type: "bug", label: "\u{1F41B} Bug", color: "red" },
1857
- { type: "concern", label: "\u26A0\uFE0F Concern", color: "orange" },
1858
- { type: "suggestion", label: "\u{1F4A1} Idea", color: "blue" },
1859
- { type: "question", label: "\u2753 Question", color: "purple" }
1989
+ { type: "feedback", label: "\u{1F4A1} Feedback", color: "blue" },
1990
+ { type: "suggestion", label: "\u2728 Idea", color: "purple" }
1860
1991
  ].map(({ type, label, color }) => /* @__PURE__ */ jsx2(
1861
1992
  "button",
1862
1993
  {
1863
- onClick: () => setFindingType(type),
1864
- className: `flex-1 py-1.5 px-2 rounded text-xs font-medium transition-colors ${findingType === type ? color === "red" ? "bg-red-900/30 text-red-400 ring-2 ring-red-400" : color === "orange" ? "bg-orange-900/30 text-orange-400 ring-2 ring-orange-400" : color === "blue" ? "bg-blue-900/30 text-blue-300 ring-2 ring-blue-400" : "bg-blue-900/50 text-blue-300 ring-2 ring-blue-400" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
1994
+ onClick: () => setReportType(type),
1995
+ className: `flex-1 py-1.5 px-2 rounded-lg text-xs font-medium transition-colors ${reportType === type ? color === "red" ? "bg-red-900/30 text-red-400 ring-2 ring-red-500" : color === "blue" ? "bg-blue-900/30 text-blue-300 ring-2 ring-blue-500" : "bg-blue-900/50 text-blue-300 ring-2 ring-blue-500" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
1865
1996
  children: label
1866
1997
  },
1867
1998
  type
1868
1999
  )) }),
1869
- findingType === "bug" && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
2000
+ (reportType === "bug" || reportType === "test_fail") && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1870
2001
  /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
1871
- /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low", "observation"].map((sev) => /* @__PURE__ */ jsx2(
2002
+ /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low"].map((sev) => /* @__PURE__ */ jsx2(
1872
2003
  "button",
1873
2004
  {
1874
- onClick: () => setFindingSeverity(sev),
1875
- className: `flex-1 py-1 px-1 rounded text-xs font-medium capitalize transition-colors ${findingSeverity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : sev === "low" ? "bg-zinc-8000 text-white" : "bg-blue-500 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
1876
- children: sev === "observation" ? "obs" : sev
2005
+ onClick: () => setSeverity(sev),
2006
+ className: `flex-1 py-1 px-2 rounded text-xs font-medium capitalize transition-colors ${severity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : "bg-zinc-8000 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
2007
+ children: sev
1877
2008
  },
1878
2009
  sev
1879
2010
  )) })
1880
2011
  ] }),
1881
2012
  /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1882
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Title *" }),
1883
- /* @__PURE__ */ jsx2(
1884
- "input",
1885
- {
1886
- type: "text",
1887
- value: findingTitle,
1888
- onChange: (e) => setFindingTitle(e.target.value),
1889
- placeholder: "Brief description of what you found",
1890
- className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
1891
- }
1892
- )
1893
- ] }),
1894
- /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1895
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Details (optional)" }),
2013
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "What happened?" }),
1896
2014
  /* @__PURE__ */ jsx2(
1897
2015
  "textarea",
1898
2016
  {
1899
- value: findingDescription,
1900
- onChange: (e) => setFindingDescription(e.target.value),
1901
- placeholder: "Steps to reproduce, expected behavior, etc.",
1902
- rows: 2,
2017
+ value: description,
2018
+ onChange: (e) => setDescription(e.target.value),
2019
+ placeholder: "Describe the issue...",
2020
+ rows: 3,
1903
2021
  className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
1904
2022
  }
1905
2023
  )
@@ -1907,322 +2025,211 @@ function BugBearPanel({
1907
2025
  /* @__PURE__ */ jsx2(
1908
2026
  "button",
1909
2027
  {
1910
- onClick: handleAddFinding,
1911
- disabled: addingFinding || !findingTitle.trim(),
2028
+ onClick: handleSubmitReport,
2029
+ disabled: submitting || !description.trim(),
1912
2030
  className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
1913
- children: addingFinding ? "Adding..." : "Add Finding"
2031
+ children: submitting ? "Submitting..." : "Submit Report"
1914
2032
  }
1915
2033
  )
1916
- ] })
1917
- ) : (
1918
- /* Active Session View */
1919
- /* @__PURE__ */ jsxs("div", { children: [
1920
- /* @__PURE__ */ jsxs("div", { className: "bg-green-900/20 rounded-lg p-3 mb-3 border border-green-800", children: [
1921
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1922
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
1923
- /* @__PURE__ */ jsx2("span", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
1924
- /* @__PURE__ */ jsx2("span", { className: "font-medium text-green-300 text-sm", children: "Session Active" })
1925
- ] }),
1926
- /* @__PURE__ */ jsx2("span", { className: "font-mono text-green-400 text-lg font-semibold", children: formatElapsedTime(sessionElapsedTime) })
1927
- ] }),
1928
- activeSession.focusArea && /* @__PURE__ */ jsxs("p", { className: "text-green-400 text-xs mt-1", children: [
1929
- "Focus: ",
1930
- activeSession.focusArea
1931
- ] })
1932
- ] }),
1933
- /* @__PURE__ */ jsxs(
1934
- "button",
1935
- {
1936
- onClick: () => setShowAddFinding(true),
1937
- className: "w-full py-3 px-4 bg-blue-500 text-white rounded-lg font-semibold text-sm hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 mb-3",
1938
- children: [
1939
- /* @__PURE__ */ jsx2("span", { children: "+" }),
1940
- " Add Finding"
1941
- ]
1942
- }
1943
- ),
1944
- /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1945
- /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-zinc-500", children: [
1946
- "Findings (",
1947
- sessionFindings.length,
1948
- ")"
1949
- ] }) }),
1950
- sessionFindings.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-4 bg-zinc-800 rounded-lg", children: [
1951
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "No findings yet" }),
1952
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-500 text-xs", children: "Explore and add findings as you go" })
1953
- ] }) : /* @__PURE__ */ jsx2("div", { className: "space-y-2 max-h-32 overflow-y-auto", children: sessionFindings.map((finding) => /* @__PURE__ */ jsx2(
1954
- "div",
1955
- {
1956
- className: `p-2 rounded-lg border text-xs ${finding.type === "bug" ? "bg-red-900/20 border-red-800" : finding.type === "concern" ? "bg-orange-900/20 border-orange-200" : finding.type === "suggestion" ? "bg-blue-900/20 border-blue-800" : "bg-blue-950/30 border-blue-800"}`,
1957
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
1958
- /* @__PURE__ */ jsx2("span", { children: finding.type === "bug" ? "\u{1F41B}" : finding.type === "concern" ? "\u26A0\uFE0F" : finding.type === "suggestion" ? "\u{1F4A1}" : "\u2753" }),
1959
- /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1960
- /* @__PURE__ */ jsx2("p", { className: "font-medium text-zinc-100 truncate", children: finding.title }),
1961
- finding.severity && finding.type === "bug" && /* @__PURE__ */ jsx2("span", { className: `inline-block mt-0.5 px-1 py-0.5 rounded text-[10px] font-medium ${finding.severity === "critical" ? "bg-red-900/40 text-red-300" : finding.severity === "high" ? "bg-orange-900/40 text-orange-300" : finding.severity === "medium" ? "bg-yellow-900/40 text-yellow-300" : "bg-zinc-700 text-zinc-300"}`, children: finding.severity })
1962
- ] })
1963
- ] })
1964
- },
1965
- finding.id
1966
- )) })
1967
- ] }),
2034
+ ] }) })
2035
+ ] }),
2036
+ showProfileOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", style: { backgroundColor: "#18181b" }, children: [
2037
+ /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", style: { backgroundColor: "#09090b", color: "#ffffff", borderBottom: "1px solid #27272a" }, children: [
1968
2038
  /* @__PURE__ */ jsx2(
1969
2039
  "button",
1970
2040
  {
1971
- onClick: () => setShowEndConfirm(true),
1972
- className: "w-full py-2 px-4 bg-zinc-700 text-zinc-300 rounded-lg font-medium text-sm hover:bg-zinc-700 transition-colors",
1973
- children: "End Session"
1974
- }
1975
- )
1976
- ] })
1977
- ) }),
1978
- activeTab === "report" && /* @__PURE__ */ jsx2("div", { children: submitted ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1979
- /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u{1F389}" }),
1980
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Report submitted!" })
1981
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1982
- /* @__PURE__ */ jsx2("div", { className: "flex gap-2 mb-4", children: [
1983
- { type: "bug", label: "\u{1F41B} Bug", color: "red" },
1984
- { type: "feedback", label: "\u{1F4A1} Feedback", color: "blue" },
1985
- { type: "suggestion", label: "\u2728 Idea", color: "purple" }
1986
- ].map(({ type, label, color }) => /* @__PURE__ */ jsx2(
1987
- "button",
1988
- {
1989
- onClick: () => setReportType(type),
1990
- className: `flex-1 py-1.5 px-2 rounded-lg text-xs font-medium transition-colors ${reportType === type ? color === "red" ? "bg-red-900/30 text-red-400 ring-2 ring-red-500" : color === "blue" ? "bg-blue-900/30 text-blue-300 ring-2 ring-blue-500" : "bg-blue-900/50 text-blue-300 ring-2 ring-blue-500" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
1991
- children: label
1992
- },
1993
- type
1994
- )) }),
1995
- (reportType === "bug" || reportType === "test_fail") && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
1996
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Severity" }),
1997
- /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["critical", "high", "medium", "low"].map((sev) => /* @__PURE__ */ jsx2(
1998
- "button",
1999
- {
2000
- onClick: () => setSeverity(sev),
2001
- className: `flex-1 py-1 px-2 rounded text-xs font-medium capitalize transition-colors ${severity === sev ? sev === "critical" ? "bg-red-600 text-white" : sev === "high" ? "bg-orange-500 text-white" : sev === "medium" ? "bg-yellow-500 text-black" : "bg-zinc-8000 text-white" : "bg-zinc-700 text-zinc-400 hover:bg-zinc-700"}`,
2002
- children: sev
2003
- },
2004
- sev
2005
- )) })
2006
- ] }),
2007
- /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
2008
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "What happened?" }),
2009
- /* @__PURE__ */ jsx2(
2010
- "textarea",
2011
- {
2012
- value: description,
2013
- onChange: (e) => setDescription(e.target.value),
2014
- placeholder: "Describe the issue...",
2015
- rows: 3,
2016
- className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500 resize-none"
2041
+ onClick: handleCloseProfile,
2042
+ className: "text-sm text-zinc-400 hover:text-white transition-colors",
2043
+ children: "\u2190 Back"
2017
2044
  }
2018
- )
2045
+ ),
2046
+ /* @__PURE__ */ jsx2("span", { className: "font-semibold text-sm", children: "Profile" }),
2047
+ /* @__PURE__ */ jsx2("div", { className: "w-12" }),
2048
+ " "
2019
2049
  ] }),
2020
- /* @__PURE__ */ jsx2(
2021
- "button",
2022
- {
2023
- onClick: handleSubmitReport,
2024
- disabled: submitting || !description.trim(),
2025
- className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
2026
- children: submitting ? "Submitting..." : "Submit Report"
2027
- }
2028
- )
2029
- ] }) })
2030
- ] }),
2031
- showProfileOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", children: [
2032
- /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", children: [
2033
- /* @__PURE__ */ jsx2(
2034
- "button",
2035
- {
2036
- onClick: handleCloseProfile,
2037
- className: "text-sm text-zinc-400 hover:text-white transition-colors",
2038
- children: "\u2190 Back"
2039
- }
2040
- ),
2041
- /* @__PURE__ */ jsx2("span", { className: "font-semibold text-sm", children: "Profile" }),
2042
- /* @__PURE__ */ jsx2("div", { className: "w-12" }),
2043
- " "
2044
- ] }),
2045
- /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto p-4", children: profileSaved ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
2046
- /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
2047
- /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Profile saved!" })
2048
- ] }) : profileEditing ? (
2049
- /* Edit Profile Form */
2050
- /* @__PURE__ */ jsxs("div", { children: [
2051
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
2052
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "Edit Profile" }),
2053
- /* @__PURE__ */ jsx2(
2054
- "button",
2055
- {
2056
- onClick: handleCancelEditProfile,
2057
- className: "text-sm text-zinc-500 hover:text-zinc-300",
2058
- children: "Cancel"
2059
- }
2060
- )
2061
- ] }),
2062
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2063
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Name" }),
2064
- /* @__PURE__ */ jsx2(
2065
- "input",
2066
- {
2067
- type: "text",
2068
- value: profileName,
2069
- onChange: (e) => setProfileName(e.target.value),
2070
- placeholder: "Your name",
2071
- className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
2072
- }
2073
- )
2074
- ] }),
2075
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2076
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Primary Email" }),
2077
- /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-zinc-800 rounded-lg", children: [
2078
- /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: testerInfo?.email }),
2079
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mt-0.5", children: "Main communication email" })
2080
- ] })
2081
- ] }),
2082
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2083
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Additional Testing Emails" }),
2084
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Add other emails you use to test on different accounts" }),
2085
- profileAdditionalEmails.map((email) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
2086
- /* @__PURE__ */ jsx2("span", { className: "flex-1 px-3 py-1.5 bg-blue-950/30 text-blue-300 text-sm rounded-full", children: email }),
2050
+ /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto p-4", children: profileSaved ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
2051
+ /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
2052
+ /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "Profile saved!" })
2053
+ ] }) : profileEditing ? (
2054
+ /* Edit Profile Form */
2055
+ /* @__PURE__ */ jsxs("div", { children: [
2056
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
2057
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: "Edit Profile" }),
2087
2058
  /* @__PURE__ */ jsx2(
2088
2059
  "button",
2089
2060
  {
2090
- onClick: () => handleRemoveEmail(email),
2091
- className: "text-blue-400 hover:text-red-500 text-sm",
2092
- children: "\u2715"
2061
+ onClick: handleCancelEditProfile,
2062
+ className: "text-sm text-zinc-500 hover:text-zinc-300",
2063
+ children: "Cancel"
2093
2064
  }
2094
2065
  )
2095
- ] }, email)),
2096
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
2066
+ ] }),
2067
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2068
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Name" }),
2097
2069
  /* @__PURE__ */ jsx2(
2098
2070
  "input",
2099
2071
  {
2100
- type: "email",
2101
- value: newEmailInput,
2102
- onChange: (e) => setNewEmailInput(e.target.value),
2103
- placeholder: "email@example.com",
2104
- className: "flex-1 px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500",
2105
- onKeyDown: (e) => e.key === "Enter" && handleAddEmail()
2072
+ type: "text",
2073
+ value: profileName,
2074
+ onChange: (e) => setProfileName(e.target.value),
2075
+ placeholder: "Your name",
2076
+ className: "w-full px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500"
2106
2077
  }
2107
- ),
2108
- /* @__PURE__ */ jsx2(
2078
+ )
2079
+ ] }),
2080
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2081
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Primary Email" }),
2082
+ /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 bg-zinc-800 rounded-lg", children: [
2083
+ /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: testerInfo?.email }),
2084
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mt-0.5", children: "Main communication email" })
2085
+ ] })
2086
+ ] }),
2087
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2088
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Additional Testing Emails" }),
2089
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Add other emails you use to test on different accounts" }),
2090
+ profileAdditionalEmails.map((email) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
2091
+ /* @__PURE__ */ jsx2("span", { className: "flex-1 px-3 py-1.5 bg-blue-950/30 text-blue-300 text-sm rounded-full", children: email }),
2092
+ /* @__PURE__ */ jsx2(
2093
+ "button",
2094
+ {
2095
+ onClick: () => handleRemoveEmail(email),
2096
+ className: "text-blue-400 hover:text-red-500 text-sm",
2097
+ children: "\u2715"
2098
+ }
2099
+ )
2100
+ ] }, email)),
2101
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
2102
+ /* @__PURE__ */ jsx2(
2103
+ "input",
2104
+ {
2105
+ type: "email",
2106
+ value: newEmailInput,
2107
+ onChange: (e) => setNewEmailInput(e.target.value),
2108
+ placeholder: "email@example.com",
2109
+ className: "flex-1 px-3 py-2 text-sm bg-zinc-800 text-zinc-100 border border-zinc-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder:text-zinc-500",
2110
+ onKeyDown: (e) => e.key === "Enter" && handleAddEmail()
2111
+ }
2112
+ ),
2113
+ /* @__PURE__ */ jsx2(
2114
+ "button",
2115
+ {
2116
+ onClick: handleAddEmail,
2117
+ disabled: !newEmailInput.trim(),
2118
+ className: "px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed",
2119
+ children: "Add"
2120
+ }
2121
+ )
2122
+ ] })
2123
+ ] }),
2124
+ /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2125
+ /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Testing Platforms" }),
2126
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Select the platforms you can test on" }),
2127
+ /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
2128
+ { key: "ios", label: "\u{1F4F1} iOS" },
2129
+ { key: "android", label: "\u{1F916} Android" },
2130
+ { key: "web", label: "\u{1F310} Web" }
2131
+ ].map(({ key, label }) => /* @__PURE__ */ jsx2(
2109
2132
  "button",
2110
2133
  {
2111
- onClick: handleAddEmail,
2112
- disabled: !newEmailInput.trim(),
2113
- className: "px-3 py-2 bg-blue-500 text-white text-sm rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed",
2114
- children: "Add"
2115
- }
2116
- )
2117
- ] })
2118
- ] }),
2119
- /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
2120
- /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-zinc-300 mb-1", children: "Testing Platforms" }),
2121
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500 mb-2", children: "Select the platforms you can test on" }),
2122
- /* @__PURE__ */ jsx2("div", { className: "flex gap-2", children: [
2123
- { key: "ios", label: "\u{1F4F1} iOS" },
2124
- { key: "android", label: "\u{1F916} Android" },
2125
- { key: "web", label: "\u{1F310} Web" }
2126
- ].map(({ key, label }) => /* @__PURE__ */ jsx2(
2134
+ onClick: () => handleTogglePlatform(key),
2135
+ className: `flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-colors border-2 ${profilePlatforms.includes(key) ? "bg-blue-950/30 border-blue-500 text-blue-300" : "bg-zinc-800 border-transparent text-zinc-400 hover:bg-zinc-700"}`,
2136
+ children: label
2137
+ },
2138
+ key
2139
+ )) })
2140
+ ] }),
2141
+ /* @__PURE__ */ jsx2(
2127
2142
  "button",
2128
2143
  {
2129
- onClick: () => handleTogglePlatform(key),
2130
- className: `flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-colors border-2 ${profilePlatforms.includes(key) ? "bg-blue-950/30 border-blue-500 text-blue-300" : "bg-zinc-800 border-transparent text-zinc-400 hover:bg-zinc-700"}`,
2131
- children: label
2132
- },
2133
- key
2134
- )) })
2135
- ] }),
2136
- /* @__PURE__ */ jsx2(
2137
- "button",
2138
- {
2139
- onClick: handleSaveProfile,
2140
- disabled: savingProfile,
2141
- className: "w-full py-2 px-4 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
2142
- children: savingProfile ? "Saving..." : "Save Profile"
2143
- }
2144
- )
2145
- ] })
2146
- ) : (
2147
- /* Profile View */
2148
- /* @__PURE__ */ jsxs("div", { children: [
2149
- /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-4 text-center mb-4", children: [
2150
- /* @__PURE__ */ jsx2("div", { className: "w-16 h-16 mx-auto bg-blue-500 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx2("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
2151
- /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: testerInfo?.name }),
2152
- /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-500", children: testerInfo?.email }),
2153
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-zinc-700", children: [
2154
- /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
2155
- /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.assignedTests || 0 }),
2156
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Assigned" })
2157
- ] }),
2158
- /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
2159
- /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.completedTests || 0 }),
2160
- /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Completed" })
2144
+ onClick: handleSaveProfile,
2145
+ disabled: savingProfile,
2146
+ className: "w-full py-2 px-4 bg-green-600 text-white rounded-lg font-medium text-sm hover:bg-green-700 disabled:opacity-50 transition-colors",
2147
+ children: savingProfile ? "Saving..." : "Save Profile"
2148
+ }
2149
+ )
2150
+ ] })
2151
+ ) : (
2152
+ /* Profile View */
2153
+ /* @__PURE__ */ jsxs("div", { children: [
2154
+ /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-4 text-center mb-4", children: [
2155
+ /* @__PURE__ */ jsx2("div", { className: "w-16 h-16 mx-auto bg-blue-500 rounded-full flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx2("span", { className: "text-2xl font-semibold text-white", children: testerInfo?.name?.charAt(0)?.toUpperCase() || "?" }) }),
2156
+ /* @__PURE__ */ jsx2("h3", { className: "font-semibold text-zinc-100", children: testerInfo?.name }),
2157
+ /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-500", children: testerInfo?.email }),
2158
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-6 mt-4 pt-4 border-t border-zinc-700", children: [
2159
+ /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
2160
+ /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.assignedTests || 0 }),
2161
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Assigned" })
2162
+ ] }),
2163
+ /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
2164
+ /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-blue-400", children: testerInfo?.completedTests || 0 }),
2165
+ /* @__PURE__ */ jsx2("p", { className: "text-xs text-zinc-500", children: "Completed" })
2166
+ ] })
2161
2167
  ] })
2162
- ] })
2163
- ] }),
2164
- (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
2165
- /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
2166
- testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: email }, email))
2167
- ] }),
2168
- (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
2169
- /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
2170
- /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2", children: testerInfo?.platforms?.map((platform) => /* @__PURE__ */ jsx2(
2171
- "span",
2168
+ ] }),
2169
+ (testerInfo?.additionalEmails?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
2170
+ /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Additional Emails" }),
2171
+ testerInfo?.additionalEmails?.map((email) => /* @__PURE__ */ jsx2("p", { className: "text-sm text-zinc-300", children: email }, email))
2172
+ ] }),
2173
+ (testerInfo?.platforms?.length || 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800 rounded-lg p-3 mb-3", children: [
2174
+ /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium text-zinc-500 uppercase tracking-wide mb-2", children: "Testing Platforms" }),
2175
+ /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-2", children: testerInfo?.platforms?.map((platform) => /* @__PURE__ */ jsx2(
2176
+ "span",
2177
+ {
2178
+ className: "px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full font-medium",
2179
+ children: platform === "ios" ? "\u{1F4F1} iOS" : platform === "android" ? "\u{1F916} Android" : "\u{1F310} Web"
2180
+ },
2181
+ platform
2182
+ )) })
2183
+ ] }),
2184
+ /* @__PURE__ */ jsx2(
2185
+ "button",
2172
2186
  {
2173
- className: "px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full font-medium",
2174
- children: platform === "ios" ? "\u{1F4F1} iOS" : platform === "android" ? "\u{1F916} Android" : "\u{1F310} Web"
2175
- },
2176
- platform
2177
- )) })
2178
- ] }),
2179
- /* @__PURE__ */ jsx2(
2180
- "button",
2181
- {
2182
- onClick: handleStartEditProfile,
2183
- className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 transition-colors",
2184
- children: "Edit Profile"
2185
- }
2186
- )
2187
- ] })
2188
- ) })
2189
- ] }),
2190
- /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [
2191
- /* @__PURE__ */ jsxs("span", { children: [
2192
- threads.length,
2193
- " thread",
2194
- threads.length !== 1 ? "s" : "",
2195
- " \xB7 ",
2196
- unreadCount,
2197
- " unread"
2198
- ] }),
2199
- /* @__PURE__ */ jsx2(
2200
- "button",
2201
- {
2202
- onClick: refreshThreads,
2203
- className: "hover:text-zinc-300",
2204
- children: "\u21BB Refresh"
2205
- }
2206
- )
2207
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2208
- /* @__PURE__ */ jsxs("span", { children: [
2209
- pendingCount,
2210
- " pending \xB7 ",
2211
- inProgressCount,
2212
- " in progress"
2187
+ onClick: handleStartEditProfile,
2188
+ className: "w-full py-2 px-4 bg-blue-500 text-white rounded-lg font-medium text-sm hover:bg-blue-600 transition-colors",
2189
+ children: "Edit Profile"
2190
+ }
2191
+ )
2192
+ ] })
2193
+ ) })
2213
2194
  ] }),
2214
- /* @__PURE__ */ jsx2(
2215
- "button",
2216
- {
2217
- onClick: refreshAssignments,
2218
- className: "hover:text-zinc-300",
2219
- children: "\u21BB Refresh"
2220
- }
2221
- )
2222
- ] }) })
2223
- ] })
2224
- ]
2225
- }
2195
+ /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", style: { backgroundColor: "#09090b", borderTop: "1px solid #27272a", color: "#71717a" }, children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [
2196
+ /* @__PURE__ */ jsxs("span", { children: [
2197
+ threads.length,
2198
+ " thread",
2199
+ threads.length !== 1 ? "s" : "",
2200
+ " \xB7 ",
2201
+ unreadCount,
2202
+ " unread"
2203
+ ] }),
2204
+ /* @__PURE__ */ jsx2(
2205
+ "button",
2206
+ {
2207
+ onClick: refreshThreads,
2208
+ className: "hover:text-zinc-300",
2209
+ children: "\u21BB Refresh"
2210
+ }
2211
+ )
2212
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2213
+ /* @__PURE__ */ jsxs("span", { children: [
2214
+ pendingCount,
2215
+ " pending \xB7 ",
2216
+ inProgressCount,
2217
+ " in progress"
2218
+ ] }),
2219
+ /* @__PURE__ */ jsx2(
2220
+ "button",
2221
+ {
2222
+ onClick: refreshAssignments,
2223
+ className: "hover:text-zinc-300",
2224
+ children: "\u21BB Refresh"
2225
+ }
2226
+ )
2227
+ ] }) })
2228
+ ] })
2229
+ ]
2230
+ }
2231
+ ),
2232
+ document.body
2226
2233
  );
2227
2234
  }
2228
2235