@bbearai/react 0.1.9 → 0.1.11

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