@bitovi/vybit 0.11.7 → 0.13.0

package/shared/types.ts

@@ -28,7 +28,7 @@ export interface CanvasComponent {
   height: number;
 }
 
-export type PatchKind = 'class-change' | 'message' | 'design' | 'component-drop';
+export type PatchKind = 'class-change' | 'message' | 'design' | 'component-drop' | 'text-change' | 'bug-report';
 
 export type PatchStatus = 'staged' | 'committed' | 'implementing' | 'implemented' | 'error';
 
@@ -60,10 +60,19 @@ export interface Patch {
   ghostHtml?: string;        // HTML of the dropped component (overlay preview only — stripped from MCP response)
   componentStoryId?: string; // Storybook story ID
   componentPath?: string;    // Source file of the component, e.g. './src/components/Button.tsx'
+  // Text-change fields (used when kind === 'text-change'):
+  originalHtml?: string;     // HTML before text edit
+  newHtml?: string;          // HTML after text edit
   componentArgs?: Record<string, unknown>; // Props the user configured before dropping
   parentComponent?: { name: string }; // React component that contains the drop target
   targetPatchId?: string;    // If target is a ghost from an earlier drop, references that patch
   targetComponentName?: string; // Name of the ghost component being referenced
+  // Bug-report fields (used when kind === 'bug-report'):
+  bugDescription?: string;
+  bugScreenshots?: string[];
+  bugTimeline?: BugTimelineEntry[];
+  bugTimeRange?: { start: string; end: string };
+  bugElement?: BugReportElement | null;
   // Commit reference:
   commitId?: string;         // Set when committed into a Commit
 }
@@ -97,6 +106,11 @@ export interface PatchSummary {
   parentComponent?: { name: string };
   targetComponentName?: string;
   targetPatchId?: string;
+  // Text-change display fields:
+  originalHtml?: string;
+  newHtml?: string;
+  // Bug-report display fields:
+  bugDescription?: string;
 }
 
 export interface CommitSummary {
@@ -343,6 +357,7 @@ export interface ComponentArmMessage {
   ghostHtml: string;
   componentPath?: string;  // Source file path from Storybook index, e.g. './src/components/Button.tsx'
   args?: Record<string, unknown>; // Current prop values from ArgsForm
+  insertMode?: 'replace';  // When 'replace', arms element-select if no element is selected
 }
 
 /** Panel → Overlay: user cancelled the armed state (panel click or escape) */
@@ -357,6 +372,41 @@ export interface ComponentDisarmedMessage {
   to: 'panel';
 }
 
+// ---------------------------------------------------------------------------
+// Mode sync messages
+// ---------------------------------------------------------------------------
+
+export type AppMode = 'select' | 'insert' | 'bug-report' | null;
+export type SelectTab = 'design' | 'replace';
+export type InsertTab = 'place';
+export type PanelTab = SelectTab | InsertTab;
+
+/** Bidirectional: panel ↔ overlay mode change */
+export interface ModeChangedMessage {
+  type: 'MODE_CHANGED';
+  to: 'overlay' | 'panel';
+  mode: AppMode;
+}
+
+/** Bidirectional: panel ↔ overlay tab change */
+export interface TabChangedMessage {
+  type: 'TAB_CHANGED';
+  to: 'overlay' | 'panel';
+  tab: PanelTab;
+}
+
+/** Overlay → Panel: text editing started on an element */
+export interface TextEditActiveMessage {
+  type: 'TEXT_EDIT_ACTIVE';
+  to: 'panel';
+}
+
+/** Overlay → Panel: text editing ended */
+export interface TextEditDoneMessage {
+  type: 'TEXT_EDIT_DONE';
+  to: 'panel';
+}
+
 /** Overlay → Server: component was placed, stage a patch */
 export interface ComponentDroppedMessage {
   type: 'COMPONENT_DROPPED';
@@ -379,7 +429,9 @@ export type PanelToOverlay =
   | CaptureScreenshotMessage
   | ClosePanelMessage
   | ComponentArmMessage
-  | ComponentDisarmMessage;
+  | ComponentDisarmMessage
+  | ModeChangedMessage
+  | TabChangedMessage;
 export type OverlayToServer = PatchStagedMessage | ComponentDroppedMessage | ResetSelectionMessage;
 export type PanelToServer = PatchCommitMessage | MessageStageMessage;
 export type ClientToServer =
@@ -427,5 +479,201 @@ export type AnyMessage =
   | ComponentDisarmedMessage
   | ComponentDroppedMessage
   | ResetSelectionMessage
+  | ModeChangedMessage
+  | TabChangedMessage
+  | TextEditActiveMessage
+  | TextEditDoneMessage
   | PingMessage
-  | PongMessage;
+  | PongMessage
+  | RecordingGetHistoryMessage
+  | RecordingHistoryMessage
+  | RecordingGetSnapshotMessage
+  | RecordingSnapshotMessage
+  | RecordingGetRangeMessage
+  | RecordingRangeMessage
+  | RecordingSnapshotMetaMessage
+  | BugReportPickElementMessage
+  | BugReportElementPickedMessage
+  | BugReportPickCancelledMessage
+  | BugReportStageMessage;
+
+// ---------------------------------------------------------------------------
+// Recording / Bug Report types
+// ---------------------------------------------------------------------------
+
+export interface ConsoleEntry {
+  level: 'log' | 'warn' | 'error' | 'info';
+  args: string[];
+  timestamp: string;
+  stack?: string;
+}
+
+export interface NetworkError {
+  url: string;
+  method: string;
+  status?: number;
+  statusText?: string;
+  errorMessage?: string;
+  timestamp: string;
+}
+
+export interface BugReportElement {
+  tag: string;
+  id?: string;
+  classes: string;
+  selectorPath: string;
+  componentName?: string;
+  outerHTML: string;
+  boundingBox: { x: number; y: number; width: number; height: number };
+  screenshot?: string;
+}
+
+export type SnapshotTrigger = 'mutation' | 'click' | 'error' | 'navigation' | 'page-load';
+
+export interface NavigationInfo {
+  from: string;
+  to: string | null;
+  method: 'pushState' | 'replaceState' | 'popstate' | 'full-page';
+}
+
+/** A structured description of a single DOM mutation */
+export interface DomChange {
+  type: 'attribute' | 'text' | 'childList';
+  selector: string;
+  componentName?: string;
+  /** attribute changes */
+  attributeName?: string;
+  oldValue?: string;
+  newValue?: string;
+  /** text changes */
+  oldText?: string;
+  newText?: string;
+  /** childList changes */
+  addedCount?: number;
+  removedCount?: number;
+  addedHTML?: string;
+  removedHTML?: string;
+}
+
+/** A single chronological event in a bug report timeline */
+export interface BugTimelineEntry {
+  timestamp: string;
+  trigger: SnapshotTrigger;
+  url: string;
+  consoleLogs?: ConsoleEntry[];
+  networkErrors?: NetworkError[];
+  domChanges?: DomChange[];
+  domSnapshot?: string;
+  domDiff?: string;
+  hasScreenshot?: boolean;
+  elementInfo?: { tag: string; classes: string; id?: string; innerText?: string; componentName?: string };
+  navigationInfo?: NavigationInfo;
+}
+
+export interface RecordingSnapshot {
+  id?: number;
+  timestamp: string;
+  trigger: SnapshotTrigger;
+  isKeyframe: boolean;
+  domSnapshot?: string;
+  domDiff?: string;
+  domChanges?: DomChange[];
+  screenshot?: string;
+  thumbnail?: string;
+  consoleLogs: ConsoleEntry[];
+  networkErrors: NetworkError[];
+  url: string;
+  scrollPosition: { x: number; y: number };
+  viewportSize: { width: number; height: number };
+  elementInfo?: { tag: string; classes: string; id?: string; innerText?: string; componentName?: string };
+  navigationInfo?: NavigationInfo;
+}
+
+export interface SnapshotMeta {
+  id: number;
+  timestamp: string;
+  trigger: SnapshotTrigger;
+  isKeyframe: boolean;
+  thumbnail?: string;
+  elementInfo?: RecordingSnapshot['elementInfo'];
+  consoleErrorCount: number;
+  networkErrorCount: number;
+  url: string;
+}
+
+// ---------------------------------------------------------------------------
+// Recording / Bug Report WebSocket messages
+// ---------------------------------------------------------------------------
+
+/** Panel → Overlay (via server relay): request recording history */
+export interface RecordingGetHistoryMessage {
+  type: 'RECORDING_GET_HISTORY';
+  to: 'overlay';
+}
+
+/** Overlay → Panel (via server relay): recording history response */
+export interface RecordingHistoryMessage {
+  type: 'RECORDING_HISTORY';
+  to: 'panel';
+  snapshots: SnapshotMeta[];
+}
+
+/** Panel → Overlay (via server relay): request full snapshot by ID */
+export interface RecordingGetSnapshotMessage {
+  type: 'RECORDING_GET_SNAPSHOT';
+  to: 'overlay';
+  snapshotId: number;
+}
+
+/** Overlay → Panel (via server relay): full snapshot response */
+export interface RecordingSnapshotMessage {
+  type: 'RECORDING_SNAPSHOT';
+  to: 'panel';
+  snapshot: RecordingSnapshot;
+}
+
+/** Panel → Overlay (via server relay): request range of snapshots */
+export interface RecordingGetRangeMessage {
+  type: 'RECORDING_GET_RANGE';
+  to: 'overlay';
+  ids: number[];
+}
+
+/** Overlay → Panel (via server relay): range of full snapshots */
+export interface RecordingRangeMessage {
+  type: 'RECORDING_RANGE';
+  to: 'panel';
+  snapshots: RecordingSnapshot[];
+}
+
+/** Overlay → Panel (via server relay): live push of new snapshot meta */
+export interface RecordingSnapshotMetaMessage {
+  type: 'RECORDING_SNAPSHOT_META';
+  to: 'panel';
+  meta: SnapshotMeta;
+}
+
+/** Panel → Overlay: enter element pick mode for bug report */
+export interface BugReportPickElementMessage {
+  type: 'BUG_REPORT_PICK_ELEMENT';
+  to: 'overlay';
+}
+
+/** Overlay → Panel: element was picked for bug report */
+export interface BugReportElementPickedMessage {
+  type: 'BUG_REPORT_ELEMENT_PICKED';
+  to: 'panel';
+  element: BugReportElement;
+}
+
+/** Overlay → Panel: pick mode was cancelled */
+export interface BugReportPickCancelledMessage {
+  type: 'BUG_REPORT_PICK_CANCELLED';
+  to: 'panel';
+}
+
+/** Panel → Server: stage a bug-report patch */
+export interface BugReportStageMessage {
+  type: 'BUG_REPORT_STAGE';
+  patch: Patch;
+}

package/storybook-addon/preview-v10.ts

@@ -1,13 +1,16 @@
 import { addons } from 'storybook/preview-api';
 
+// Ghost iframes are created by AdaptiveIframe for component extraction.
+// They must not inject the overlay or trigger story-rendered events.
+const isGhostIframe = new URLSearchParams(window.location.search).get('vybit-ghost') === '1';
+
 let injected = false;
 
 export const decorators = [
   (StoryFn: any, context: any) => {
-    const serverUrl =
-      context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
-
-    if (!injected) {
+    if (!isGhostIframe && !injected) {
+      const serverUrl =
+        context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
       const script = document.createElement('script');
       script.src = `${serverUrl}/overlay.js`;
       script.onerror = (err) => console.error('[vybit-addon] overlay.js FAILED to load', err);
@@ -19,12 +22,14 @@ export const decorators = [
   },
 ];
 
-const channel = addons.getChannel();
-let lastStoryId: string | undefined;
+if (!isGhostIframe) {
+  const channel = addons.getChannel();
+  let lastStoryId: string | undefined;
 
-channel.on('storyRendered', (storyId?: string) => {
-  // Only reset selection on actual story navigation, not HMR updates
-  if (storyId && storyId === lastStoryId) return;
-  lastStoryId = storyId;
-  window.postMessage({ type: 'STORYBOOK_STORY_RENDERED' }, '*');
-});
+  channel.on('storyRendered', (storyId?: string) => {
+    // Only reset selection on actual story navigation, not HMR updates
+    if (storyId && storyId === lastStoryId) return;
+    lastStoryId = storyId;
+    window.postMessage({ type: 'STORYBOOK_STORY_RENDERED' }, '*');
+  });
+}

package/storybook-addon/preview.ts

@@ -1,13 +1,16 @@
 import { addons } from '@storybook/preview-api';
 
+// Ghost iframes are created by AdaptiveIframe for component extraction.
+// They must not inject the overlay or trigger story-rendered events.
+const isGhostIframe = new URLSearchParams(window.location.search).get('vybit-ghost') === '1';
+
 let injected = false;
 
 export const decorators = [
   (StoryFn: any, context: any) => {
-    const serverUrl =
-      context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
-
-    if (!injected) {
+    if (!isGhostIframe && !injected) {
+      const serverUrl =
+        context.parameters?.vybit?.serverUrl ?? 'http://localhost:3333';
       const script = document.createElement('script');
       script.src = `${serverUrl}/overlay.js`;
       script.onerror = (err) => console.error('[vybit-addon] overlay.js FAILED to load', err);
@@ -19,12 +22,14 @@ export const decorators = [
   },
 ];
 
-const channel = addons.getChannel();
-let lastStoryId: string | undefined;
+if (!isGhostIframe) {
+  const channel = addons.getChannel();
+  let lastStoryId: string | undefined;
 
-channel.on('storyRendered', (storyId?: string) => {
-  // Only reset selection on actual story navigation, not HMR updates
-  if (storyId && storyId === lastStoryId) return;
-  lastStoryId = storyId;
-  window.postMessage({ type: 'STORYBOOK_STORY_RENDERED' }, '*');
-});
+  channel.on('storyRendered', (storyId?: string) => {
+    // Only reset selection on actual story navigation, not HMR updates
+    if (storyId && storyId === lastStoryId) return;
+    lastStoryId = storyId;
+    window.postMessage({ type: 'STORYBOOK_STORY_RENDERED' }, '*');
+  });
+}