quick-bug-reporter-react 1.3.2 → 1.5.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
+import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, NetworkLogEntry, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
 export { BugClientMetadata, BugReportPayload, BugReporterIntegration, BugReporterIntegrations, BugSessionArtifacts, BugSubmitResult, BugTrackerProvider, CapturedJsError, CloudIntegration, CloudIntegrationOptions, ConsoleCapture, ConsoleLogEntry, DEFAULT_MAX_RECORDING_MS, JiraIntegration, JiraIntegrationOptions, LinearIntegration, LinearIntegrationOptions, NetworkLogEntry, NetworkLogger, RecordingStopReason, ReportCaptureMode, ScreenshotHighlightRegion, SubmitProgressCallback, formatConsoleLogs, formatJsErrors, formatNetworkLogs, toErrorMessage } from '@quick-bug-reporter/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
@@ -62,6 +62,7 @@ declare class BugSession {
     private autoStopTimeout;
     private stopInFlight;
     private lastArtifacts;
+    private screenshotLogsPendingSubmit;
     constructor(options?: BugSessionOptions);
     start(): Promise<void>;
     captureScreenshot(region?: CaptureRegion): Promise<BugSessionArtifacts>;
@@ -71,6 +72,7 @@ declare class BugSession {
     getMaxDurationMs(): number;
     getLastArtifacts(): BugSessionArtifacts | null;
     getLastCaptureMode(): ReportCaptureMode | null;
+    finalizeNetworkLogsForSubmit(captureMode: ReportCaptureMode): NetworkLogEntry[];
     resetArtifacts(): void;
     dispose(): Promise<void>;
     private stopInternal;
@@ -90,6 +92,10 @@ type BugReporterSubmitOptions = {
     consoleLogs?: ConsoleLogEntry[];
     jsErrors?: CapturedJsError[];
     onProgress?: SubmitProgressCallback;
+    stepsToReproduce?: string;
+    expectedResult?: string;
+    actualResult?: string;
+    additionalContext?: string;
 };
 declare class BugReporter {
     private integration;
@@ -151,7 +157,12 @@ type BugReporterContextValue = {
     screenshotHighlightCount: number;
     updateScreenshotAnnotation: (annotation: ScreenshotAnnotationState) => void;
     clearDraft: () => void;
-    submitReport: (title: string, description: string) => Promise<BugSubmitResult | null>;
+    submitReport: (title: string, structuredFields: {
+        stepsToReproduce: string;
+        expectedResult: string;
+        actualResult: string;
+        additionalContext: string;
+    }) => Promise<BugSubmitResult | null>;
     resetMessages: () => void;
 };
 declare function BugReporterProvider({ children, integrations, defaultProvider, maxDurationMs, }: BugReporterProviderProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
+import { NetworkLogger, BugSessionArtifacts, RecordingStopReason, ReportCaptureMode, NetworkLogEntry, BugReporterIntegration, BugClientMetadata, ConsoleLogEntry, CapturedJsError, SubmitProgressCallback, BugSubmitResult, BugTrackerProvider, BugReporterIntegrations, ScreenshotHighlightRegion } from '@quick-bug-reporter/core';
 export { BugClientMetadata, BugReportPayload, BugReporterIntegration, BugReporterIntegrations, BugSessionArtifacts, BugSubmitResult, BugTrackerProvider, CapturedJsError, CloudIntegration, CloudIntegrationOptions, ConsoleCapture, ConsoleLogEntry, DEFAULT_MAX_RECORDING_MS, JiraIntegration, JiraIntegrationOptions, LinearIntegration, LinearIntegrationOptions, NetworkLogEntry, NetworkLogger, RecordingStopReason, ReportCaptureMode, ScreenshotHighlightRegion, SubmitProgressCallback, formatConsoleLogs, formatJsErrors, formatNetworkLogs, toErrorMessage } from '@quick-bug-reporter/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
@@ -62,6 +62,7 @@ declare class BugSession {
     private autoStopTimeout;
     private stopInFlight;
     private lastArtifacts;
+    private screenshotLogsPendingSubmit;
     constructor(options?: BugSessionOptions);
     start(): Promise<void>;
     captureScreenshot(region?: CaptureRegion): Promise<BugSessionArtifacts>;
@@ -71,6 +72,7 @@ declare class BugSession {
     getMaxDurationMs(): number;
     getLastArtifacts(): BugSessionArtifacts | null;
     getLastCaptureMode(): ReportCaptureMode | null;
+    finalizeNetworkLogsForSubmit(captureMode: ReportCaptureMode): NetworkLogEntry[];
     resetArtifacts(): void;
     dispose(): Promise<void>;
     private stopInternal;
@@ -90,6 +92,10 @@ type BugReporterSubmitOptions = {
     consoleLogs?: ConsoleLogEntry[];
     jsErrors?: CapturedJsError[];
     onProgress?: SubmitProgressCallback;
+    stepsToReproduce?: string;
+    expectedResult?: string;
+    actualResult?: string;
+    additionalContext?: string;
 };
 declare class BugReporter {
     private integration;
@@ -151,7 +157,12 @@ type BugReporterContextValue = {
     screenshotHighlightCount: number;
     updateScreenshotAnnotation: (annotation: ScreenshotAnnotationState) => void;
     clearDraft: () => void;
-    submitReport: (title: string, description: string) => Promise<BugSubmitResult | null>;
+    submitReport: (title: string, structuredFields: {
+        stepsToReproduce: string;
+        expectedResult: string;
+        actualResult: string;
+        additionalContext: string;
+    }) => Promise<BugSubmitResult | null>;
     resetMessages: () => void;
 };
 declare function BugReporterProvider({ children, integrations, defaultProvider, maxDurationMs, }: BugReporterProviderProps): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -876,42 +876,104 @@ var CloudIntegration = class {
       throw new Error("CloudIntegration: projectKey is required.");
     }
     this.projectKey = options.projectKey;
-    this.endpoint = options.endpoint ?? "/api/ingest";
+    this.endpoint = options.ingestUrl ?? options.endpoint ?? "/api/ingest";
+    this.appVersion = options.appVersion;
+    this.environment = options.environment;
     this.fetchFn = options.fetchImpl ?? fetch.bind(globalThis);
   }
   async submit(payload, onProgress = noop3) {
     onProgress("Preparing report\u2026");
-    const ua = payload.userAgent || navigator.userAgent;
+    const ua = payload.userAgent || getRuntimeUserAgent();
     const browserName = parseBrowserName(ua);
+    const browserVersion = parseBrowserVersion(ua);
     const osName = parseOsName(ua);
-    const body = {
-      project_key: this.projectKey,
-      title: payload.title,
-      provider: "cloud",
-      capture_mode: payload.captureMode,
-      has_screenshot: Boolean(payload.screenshotBlob),
-      has_video: Boolean(payload.videoBlob),
-      has_network_logs: payload.networkLogs.length > 0,
-      has_console_logs: payload.consoleLogs.length > 0,
-      js_error_count: payload.jsErrors.length,
-      user_agent: ua,
-      browser_name: browserName,
-      os_name: osName,
-      device_type: getDeviceType(),
-      screen_resolution: getScreenResolution(),
-      viewport: getViewport(),
-      color_scheme: payload.metadata.colorScheme !== "unknown" ? payload.metadata.colorScheme : null,
-      locale: payload.metadata.locale,
-      timezone: payload.metadata.timezone,
-      connection_type: payload.metadata.connection?.effectiveType ?? null,
-      page_url: payload.pageUrl,
-      environment: getEnvironment()
-    };
+    const osVersion = parseOsVersion(ua, osName);
+    const fd = new FormData();
+    fd.set("project_key", this.projectKey);
+    fd.set("title", payload.title);
+    fd.set("description", payload.description || "");
+    if (payload.stepsToReproduce) fd.set("steps_to_reproduce", payload.stepsToReproduce);
+    if (payload.expectedResult) fd.set("expected_result", payload.expectedResult);
+    if (payload.actualResult) fd.set("actual_result", payload.actualResult);
+    if (payload.additionalContext) fd.set("additional_context", payload.additionalContext);
+    fd.set("provider", "cloud");
+    fd.set("capture_mode", payload.captureMode);
+    fd.set("has_screenshot", String(Boolean(payload.screenshotBlob)));
+    fd.set("has_video", String(Boolean(payload.videoBlob)));
+    fd.set("has_network_logs", String(payload.networkLogs.length > 0));
+    fd.set("has_console_logs", String(payload.consoleLogs.length > 0));
+    fd.set("js_error_count", String(payload.jsErrors.length));
+    fd.set("user_agent", ua);
+    fd.set("browser_name", browserName);
+    fd.set("browser_version", browserVersion ?? "");
+    fd.set("os_name", osName);
+    fd.set("os_version", osVersion ?? "");
+    fd.set("device_type", getDeviceType());
+    fd.set("screen_resolution", getScreenResolution());
+    fd.set("viewport", getViewport());
+    fd.set("color_scheme", payload.metadata.colorScheme !== "unknown" ? payload.metadata.colorScheme : "");
+    fd.set("locale", payload.metadata.locale ?? "");
+    fd.set("timezone", payload.metadata.timezone ?? "");
+    fd.set("connection_type", payload.metadata.connection?.effectiveType ?? "");
+    fd.set("page_url", payload.pageUrl || "");
+    fd.set("environment", this.environment ?? getEnvironment());
+    fd.set("app_version", this.appVersion ?? "");
+    fd.set("platform", payload.metadata.platform ?? "");
+    fd.set("duration_ms", String(payload.elapsedMs));
+    fd.set("stopped_at", payload.stoppedAt || "");
+    if (payload.metadata.mobile) {
+      fd.set("platform", payload.metadata.mobile.platform);
+      fd.set("device_model", payload.metadata.mobile.deviceModel ?? "");
+      fd.set("device_brand", payload.metadata.mobile.deviceBrand ?? "");
+      fd.set("os_version", payload.metadata.mobile.osVersion ?? "");
+      fd.set("app_build_number", payload.metadata.mobile.appBuildNumber ?? "");
+      fd.set("is_emulator", String(payload.metadata.mobile.isEmulator));
+      fd.set(
+        "battery_level",
+        payload.metadata.mobile.batteryLevel == null ? "" : String(payload.metadata.mobile.batteryLevel)
+      );
+      fd.set(
+        "free_storage_mb",
+        payload.metadata.mobile.freeStorageMb == null ? "" : String(payload.metadata.mobile.freeStorageMb)
+      );
+      fd.set("invocation_method", payload.metadata.mobile.invocationMethod);
+    }
+    if (payload.screenshotBlob) {
+      fd.append("screenshot", payload.screenshotBlob, "bug-screenshot.png");
+    }
+    if (payload.videoBlob) {
+      fd.append("video", payload.videoBlob, "bug-recording.webm");
+    }
+    fd.append(
+      "network_logs",
+      new Blob([formatNetworkLogs(payload.networkLogs)], { type: "text/plain" }),
+      "network-logs.txt"
+    );
+    const parts = [];
+    if (payload.jsErrors.length > 0) {
+      parts.push("=== JavaScript Errors ===\n" + formatJsErrors(payload.jsErrors));
+    } else {
+      parts.push("=== JavaScript Errors ===\nNo JavaScript errors captured.");
+    }
+    if (payload.consoleLogs.length > 0) {
+      parts.push("=== Console Output ===\n" + formatConsoleLogs(payload.consoleLogs));
+    } else {
+      parts.push("=== Console Output ===\nNo console output captured.");
+    }
+    fd.append(
+      "console_logs",
+      new Blob([parts.join("\n\n")], { type: "text/plain" }),
+      "console-logs.txt"
+    );
+    fd.append(
+      "metadata",
+      new Blob([JSON.stringify(payload.metadata, null, 2)], { type: "application/json" }),
+      "client-metadata.json"
+    );
     onProgress("Sending report\u2026");
     const response = await this.fetchFn(this.endpoint, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body)
+      body: fd
     });
     if (!response.ok) {
       const errorBody = await response.json().catch(() => ({}));
@@ -920,12 +982,22 @@ var CloudIntegration = class {
     }
     const result = await response.json();
     onProgress("Report submitted.");
+    const fwd = result.forwarding;
+    const externalKey = fwd?.key;
+    const externalUrl = fwd?.url;
+    const warnings = [];
+    if (result.forwarding_status === "queued") {
+      warnings.push("Tracker forwarding is running in the background.");
+    }
+    if (fwd?.error) {
+      warnings.push(`Forwarding: ${fwd.error}`);
+    }
     return {
       provider: "cloud",
       issueId: result.id,
-      issueKey: `QB-${result.id.slice(0, 8)}`,
-      issueUrl: null,
-      warnings: []
+      issueKey: externalKey || `QB-${result.id.slice(0, 8)}`,
+      issueUrl: externalUrl || null,
+      warnings
     };
   }
 };
@@ -937,14 +1009,50 @@ function parseBrowserName(ua) {
   if (ua.includes("Safari/") && !ua.includes("Chrome/")) return "Safari";
   return "Unknown";
 }
+function parseBrowserVersion(ua) {
+  return matchVersion(ua, /Edg\/([\d.]+)/) || matchVersion(ua, /OPR\/([\d.]+)/) || matchVersion(ua, /Opera\/([\d.]+)/) || matchVersion(ua, /Chrome\/([\d.]+)/) || matchVersion(ua, /Firefox\/([\d.]+)/) || matchVersion(ua, /Version\/([\d.]+).*Safari/);
+}
+function getRuntimeUserAgent() {
+  if (typeof navigator !== "undefined" && typeof navigator.userAgent === "string") {
+    return navigator.userAgent;
+  }
+  return "";
+}
 function parseOsName(ua) {
   if (ua.includes("Windows")) return "Windows";
-  if (ua.includes("Mac OS")) return "macOS";
-  if (ua.includes("Linux")) return "Linux";
   if (ua.includes("Android")) return "Android";
   if (ua.includes("iPhone") || ua.includes("iPad")) return "iOS";
+  if (ua.includes("Mac OS")) return "macOS";
+  if (ua.includes("Linux")) return "Linux";
   return "Unknown";
 }
+function parseOsVersion(ua, osName) {
+  if (osName === "Windows") {
+    const nt = matchVersion(ua, /Windows NT ([\d.]+)/);
+    if (!nt) return null;
+    if (nt.startsWith("10.0")) return "10/11";
+    if (nt.startsWith("6.3")) return "8.1";
+    if (nt.startsWith("6.2")) return "8";
+    if (nt.startsWith("6.1")) return "7";
+    return nt;
+  }
+  if (osName === "macOS") {
+    const mac = matchVersion(ua, /Mac OS X ([0-9_]+)/);
+    return mac ? mac.replace(/_/g, ".") : null;
+  }
+  if (osName === "Android") {
+    return matchVersion(ua, /Android ([\d.]+)/);
+  }
+  if (osName === "iOS") {
+    const ios = matchVersion(ua, /OS ([0-9_]+) like Mac OS X/);
+    return ios ? ios.replace(/_/g, ".") : null;
+  }
+  return null;
+}
+function matchVersion(ua, pattern) {
+  const match = ua.match(pattern);
+  return match?.[1] ?? null;
+}
 function getDeviceType() {
   if (typeof window === "undefined") return "unknown";
   const w = window.innerWidth;
@@ -1423,6 +1531,7 @@ var BugSession = class {
     this.autoStopTimeout = null;
     this.stopInFlight = null;
     this.lastArtifacts = null;
+    this.screenshotLogsPendingSubmit = false;
     this.maxDurationMs = options.maxDurationMs ?? DEFAULT_MAX_RECORDING_MS;
     this.screenRecorder = options.screenRecorder ?? new ScreenRecorder();
     this.screenshotCapturer = options.screenshotCapturer ?? new ScreenshotCapturer();
@@ -1433,9 +1542,13 @@ var BugSession = class {
     if (this.recording) {
       return;
     }
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.clearAutoStopTimer();
     this.networkLogger.clear();
     this.lastArtifacts = null;
+    this.screenshotLogsPendingSubmit = false;
     this.networkLogger.start();
     try {
       await this.screenRecorder.start({
@@ -1458,14 +1571,18 @@ var BugSession = class {
     if (this.recording) {
       await this.stop("manual");
     }
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.clearAutoStopTimer();
     this.networkLogger.clear();
     this.lastArtifacts = null;
+    this.screenshotLogsPendingSubmit = false;
     const startedAtMs = Date.now();
     this.networkLogger.start();
     try {
       const screenshotBlob = region ? await this.screenshotCapturer.captureRegion(region) : await this.screenshotCapturer.capture();
-      const networkLogs = this.networkLogger.stop();
+      const networkLogs = this.networkLogger.getLogs();
       const stoppedAtMs = Date.now();
       const artifacts = {
         videoBlob: null,
@@ -1478,10 +1595,12 @@ var BugSession = class {
         stopReason: "manual"
       };
       this.lastArtifacts = artifacts;
+      this.screenshotLogsPendingSubmit = true;
       return artifacts;
     } catch (error) {
       this.networkLogger.stop();
       this.networkLogger.clear();
+      this.screenshotLogsPendingSubmit = false;
       throw error;
     }
   }
@@ -1515,17 +1634,32 @@ var BugSession = class {
   getLastCaptureMode() {
     return this.lastArtifacts?.captureMode ?? null;
   }
+  finalizeNetworkLogsForSubmit(captureMode) {
+    if (captureMode === "screenshot" && this.screenshotLogsPendingSubmit && this.networkLogger.isRecording()) {
+      const logs = this.networkLogger.stop();
+      this.screenshotLogsPendingSubmit = false;
+      return logs;
+    }
+    return this.networkLogger.getLogs();
+  }
   resetArtifacts() {
     this.lastArtifacts = null;
     this.screenRecorder.clearLastBlob();
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.networkLogger.clear();
+    this.screenshotLogsPendingSubmit = false;
   }
   async dispose() {
     await this.stop("manual");
     this.clearAutoStopTimer();
     this.screenRecorder.dispose();
-    this.networkLogger.stop();
+    if (this.networkLogger.isRecording()) {
+      this.networkLogger.stop();
+    }
     this.networkLogger.clear();
+    this.screenshotLogsPendingSubmit = false;
   }
   async stopInternal(reason) {
     this.clearAutoStopTimer();
@@ -1546,6 +1680,7 @@ var BugSession = class {
       stopReason: reason
     };
     this.lastArtifacts = artifacts;
+    this.screenshotLogsPendingSubmit = false;
     return artifacts;
   }
   async handleForcedStop(reason) {
@@ -1696,9 +1831,13 @@ var BugReporter = class {
     const payload = {
       title: normalizedTitle,
       description: normalizedDescription,
+      stepsToReproduce: options.stepsToReproduce,
+      expectedResult: options.expectedResult,
+      actualResult: options.actualResult,
+      additionalContext: options.additionalContext,
       videoBlob: artifacts.videoBlob,
       screenshotBlob: options.screenshotBlob ?? artifacts.screenshotBlob,
-      networkLogs: artifacts.networkLogs,
+      networkLogs: this.session.finalizeNetworkLogsForSubmit(artifacts.captureMode),
       consoleLogs: options.consoleLogs ?? [],
       jsErrors: options.jsErrors ?? [],
       captureMode: artifacts.captureMode,
@@ -2228,7 +2367,7 @@ function BugReporterProvider({
     setScreenshotAnnotation(annotation);
   }, []);
   const submitReport = useCallback(
-    async (title, description) => {
+    async (title, structuredFields) => {
       const reporter = getOrCreateReporter();
       if (!reporter) {
         setError("No bug tracker integration is configured.");
@@ -2248,6 +2387,25 @@ function BugReporterProvider({
       setSubmissionProgress("Preparing submission\u2026");
       setError(null);
       setSuccess(null);
+      const { stepsToReproduce, expectedResult, actualResult, additionalContext } = structuredFields;
+      const sections = [];
+      if (stepsToReproduce.trim()) {
+        sections.push(`## Steps to Reproduce
+${stepsToReproduce.trim()}`);
+      }
+      if (expectedResult.trim()) {
+        sections.push(`## Expected Result
+${expectedResult.trim()}`);
+      }
+      if (actualResult.trim()) {
+        sections.push(`## Actual Result
+${actualResult.trim()}`);
+      }
+      if (additionalContext.trim()) {
+        sections.push(`## Additional Context
+${additionalContext.trim()}`);
+      }
+      const description = sections.length > 0 ? sections.join("\n\n") : "No description provided";
       const screenshotBlobForSubmit = draftMode === "screenshot" ? screenshotAnnotation.annotatedBlob ?? screenshotBlob : null;
       const metadata = {
         annotation: draftMode === "screenshot" && screenshotAnnotation.highlights.length > 0 ? {
@@ -2262,13 +2420,21 @@ function BugReporterProvider({
       };
       try {
         const result = await reporter.submit(title, description, {
+          stepsToReproduce,
+          expectedResult,
+          actualResult,
+          additionalContext,
           screenshotBlob: screenshotBlobForSubmit,
           metadata,
           consoleLogs,
           jsErrors,
           onProgress: setSubmissionProgress
         });
-        setSuccess(`Submitted to ${getProviderLabel(result.provider)} (${result.issueKey}).`);
+        if (result.provider === "cloud" && !result.issueUrl) {
+          setSuccess("Report received by QuickBugs Cloud. Tracker forwarding is running in the background.");
+        } else {
+          setSuccess(`Submitted to ${getProviderLabel(result.provider)} (${result.issueKey}).`);
+        }
         clearDraft();
         setIsOpen(false);
         return result;
@@ -3055,6 +3221,7 @@ function providerLabel(provider) {
   if (provider === "cloud") return "QuickBugs Cloud";
   return provider;
 }
+var CHAR_LIMIT = 4e3;
 function BugReporterModal() {
   const {
     autoStopNotice,
@@ -3084,9 +3251,39 @@ function BugReporterModal() {
     videoPreviewUrl
   } = useBugReporter();
   const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
+  const [stepsToReproduce, setStepsToReproduce] = useState("");
+  const [expectedResult, setExpectedResult] = useState("");
+  const [actualResult, setActualResult] = useState("");
+  const [additionalContext, setAdditionalContext] = useState("");
   const [step, setStep] = useState("review");
+  const [activeTab, setActiveTab] = useState("steps");
+  const totalChars = stepsToReproduce.length + expectedResult.length + actualResult.length + additionalContext.length;
+  const isOverLimit = totalChars > CHAR_LIMIT;
   const elapsedLabel = useMemo(() => formatElapsed2(elapsedMs), [elapsedMs]);
+  const handleStepsKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      const textarea = event.currentTarget;
+      const cursorPos = textarea.selectionStart;
+      const textBeforeCursor = stepsToReproduce.substring(0, cursorPos);
+      const textAfterCursor = stepsToReproduce.substring(cursorPos);
+      const lines = textBeforeCursor.split("\n");
+      const currentLine = lines[lines.length - 1];
+      const numberMatch = currentLine.match(/^(\d+)\.\s/);
+      const nextNumber = numberMatch ? parseInt(numberMatch[1]) + 1 : lines.length > 0 && stepsToReproduce.trim() === "" ? 1 : lines.length + 1;
+      const newText = textBeforeCursor + "\n" + nextNumber + ". " + textAfterCursor;
+      setStepsToReproduce(newText);
+      setTimeout(() => {
+        const newCursorPos = cursorPos + ("\n" + nextNumber + ". ").length;
+        textarea.setSelectionRange(newCursorPos, newCursorPos);
+      }, 0);
+    }
+  };
+  const handleStepsFocus = () => {
+    if (stepsToReproduce.trim() === "") {
+      setStepsToReproduce("1. ");
+    }
+  };
   const handleDialogOpenChange = (open) => {
     if (open) {
       openModal();
@@ -3097,15 +3294,24 @@ function BugReporterModal() {
   };
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const result = await submitReport(title, description);
+    const result = await submitReport(title, {
+      stepsToReproduce,
+      expectedResult,
+      actualResult,
+      additionalContext
+    });
     if (result) {
       setTitle("");
-      setDescription("");
+      setStepsToReproduce("");
+      setExpectedResult("");
+      setActualResult("");
+      setAdditionalContext("");
       setStep("review");
+      setActiveTab("steps");
     }
   };
   const hasIntegrations = availableProviders.length > 0;
-  const canSubmit = !isSubmitting && !isCapturingScreenshot && hasIntegrations && !!selectedProvider && hasDraft && title.trim().length > 0;
+  const canSubmit = !isSubmitting && !isCapturingScreenshot && hasIntegrations && !!selectedProvider && hasDraft && title.trim().length > 0 && !isOverLimit;
   return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsx(
     DialogContent,
     {
@@ -3271,18 +3477,91 @@ function BugReporterModal() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 sm:col-span-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "bug-description", children: "Quick note" }),
-              /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2 sm:col-span-2", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Bug Details" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border-b border-gray-200", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "steps" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("steps"),
+                    children: "Steps"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "expected" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("expected"),
+                    children: "Expected"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "actual" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("actual"),
+                    children: "Actual"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `px-3 py-2 text-sm font-medium transition-colors ${activeTab === "context" ? "border-b-2 border-indigo-600 text-indigo-600" : "text-gray-500 hover:text-gray-700"}`,
+                    onClick: () => setActiveTab("context"),
+                    children: "Context"
+                  }
+                )
+              ] }),
+              activeTab === "steps" && /* @__PURE__ */ jsx(
                 Textarea,
                 {
-                  id: "bug-description",
-                  maxLength: 4e3,
-                  placeholder: "What did you expect, what happened, and any quick repro steps.",
-                  value: description,
-                  onChange: (event) => setDescription(event.target.value)
+                  id: "bug-steps",
+                  placeholder: "Press Enter to start numbering steps...",
+                  value: stepsToReproduce,
+                  onChange: (event) => setStepsToReproduce(event.target.value),
+                  onKeyDown: handleStepsKeyDown,
+                  onFocus: handleStepsFocus
                 }
-              )
+              ),
+              activeTab === "expected" && /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  id: "bug-expected",
+                  placeholder: "Describe what should happen...",
+                  value: expectedResult,
+                  onChange: (event) => setExpectedResult(event.target.value)
+                }
+              ),
+              activeTab === "actual" && /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  id: "bug-actual",
+                  placeholder: "Describe what actually happened...",
+                  value: actualResult,
+                  onChange: (event) => setActualResult(event.target.value)
+                }
+              ),
+              activeTab === "context" && /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  id: "bug-context",
+                  placeholder: "Any additional information, workarounds, or notes...",
+                  value: additionalContext,
+                  onChange: (event) => setAdditionalContext(event.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsxs("p", { className: `text-xs ${isOverLimit ? "text-red-600 font-medium" : "text-gray-500"}`, children: [
+                totalChars,
+                "/",
+                CHAR_LIMIT,
+                " characters ",
+                isOverLimit && "(over limit)"
+              ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
               /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: "bug-provider", children: "Submit to" }),