@bbearai/react 0.1.9 → 0.1.10

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