Beta

[cj-vana]

PR Type

Bug fix

---

Description

• Fixes critical input reversion bug affecting 10 editor title/name fields

• Implements controlled input pattern with local state buffer and 500ms debounce

• Prevents race condition between user typing and auto-save/collaboration updates

• Disables database UPDATE event processing to avoid overwriting active user input

• Maintains real-time collaboration via broadcast channel instead of database events

---

Diagram Walkthrough

flowchart LR
  A["User Types in Input"] -->|immediate feedback| B["Local State Buffer"]
  B -->|500ms debounce| C["Sync to Document State"]
  C -->|broadcast| D["Other Collaborators"]
  E["Remote Updates"] -->|via broadcast| B
  F["Database Events"] -->|ignored| G["Prevent Reversion"]

Loading

File Walkthrough

	Relevant files
Formatting	1 files useCollaboration.ts Remove eslint disable comment from deps                                    +1/-1
Bug fix	10 files CommsPlannerEditor.tsx Add local state buffer for plan name input                              +61/-38  CorporateMicPlotEditor.tsx Implement debounced local state for name field                      +73/-35  LedPixelMapEditor.tsx Add local state for project name with debounce                      +79/-13  PatchSheetEditor.tsx Implement controlled input with local state buffer              +50/-3    ProductionScheduleEditor.tsx Add debounced local state for schedule name                            +65/-21  RiderEditor.tsx Implement local state buffer for rider name input                +53/-21  RunOfShowEditor.tsx Add debounced local state for run of show name                      +49/-21  StagePlotEditor.tsx Implement controlled input with local state buffer              +56/-43  StandardPixelMapEditor.tsx Add local state for pixel map project name                              +81/-29  TheaterMicPlotEditor.tsx Implement debounced local state for mic plot name                +65/-32

---

[netlify]

✅ Deploy Preview for incandescent-sfogliatella-f7a090 ready!

Name	Link
🔨 Latest commit	36b5f9e
🔍 Latest deploy log	https://app.netlify.com/projects/incandescent-sfogliatella-f7a090/deploys/690aaecea5e2a00008f20455
😎 Deploy Preview	https://deploy-preview-118--incandescent-sfogliatella-f7a090.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[netlify]

✅ Deploy Preview for sounddocsbeta ready!

Name	Link
🔨 Latest commit	36b5f9e
🔍 Latest deploy log	https://app.netlify.com/projects/sounddocsbeta/deploys/690aaeceffe0fd0008d6229c
😎 Deploy Preview	https://deploy-preview-118--sounddocsbeta.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix broken real-time field updates Expand the onRemoteUpdate callback to handle all broadcasted field updates, not just the name field. This is necessary because the database subscription, which previously handled other fields, is now disabled for UPDATE events. apps/web/src/pages/CommsPlannerEditor.tsx [218-237] onRemoteUpdate: (payload) => { // GUARD: Don't process remote updates if collaboration is disabled // This prevents input reversion on NEW documents where collaboration is off if (!collaborationEnabled) { console.log("[CommsPlannerEditor] Ignoring remote update - collaboration disabled"); return; } if (payload.type === "field_update" && payload.field) { // Handle field updates from remote users console.log("[CommsPlannerEditor] Remote field update:", payload.field, payload.value); - // Update will be handled by database subscription + if (payload.field === "name") { setPlanName(payload.value); // Update local plan name state when remote changes arrive setLocalPlanName(payload.value); + } else { + // Handle other remote field updates that are no longer covered by DB subscription + // This assumes other fields are also broadcasted. If not, they need to be. + // Example for a hypothetical 'elements' field: + // if (payload.field === 'elements') { + // setElements(payload.value); + // } + console.warn(`[CommsPlannerEditor] Unhandled remote field update for: ${payload.field}`); } - // Other field updates will be handled by database subscription } }, [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 10 __ Why: This suggestion correctly identifies a critical regression where disabling the database update handler without updating the broadcast handler breaks real-time collaboration for all fields except name.	High
	Broadcast name changes for real-time sync Add a broadcast call within the debounced useEffect for localName. This will ensure that name changes are immediately sent to other collaborators, rather than waiting for the next auto-save. apps/web/src/pages/PatchSheetEditor.tsx [266-284] // Debounced sync from local name to patchSheet state useEffect(() => { if (!localNameInitialized.current) return; const timer = setTimeout(() => { if (localName !== patchSheet?.name) { console.log("[PatchSheetEditor] Syncing localName to patchSheet:", { localName, previousName: patchSheet?.name, }); setPatchSheet((prev: any) => ({ ...prev, name: localName, })); + + // Broadcast the name change to other collaborators + if (collaborationEnabled && broadcast) { + broadcast({ + type: "field_update", + field: "name", + value: localName, + }); + } } }, 500); // 500ms debounce return () => clearTimeout(timer); -}, [localName, patchSheet?.name]); +}, [localName, patchSheet?.name, collaborationEnabled, broadcast, setPatchSheet]); [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies that the debounced name update is not broadcasted to other users, which defeats the purpose of real-time collaboration for this field.	High
High-level	Abstract the duplicated logic into a custom hook To reduce code duplication, abstract the debounced input logic, which is repeated across nine editor components, into a single custom hook like useDebouncedField. This will centralize the logic and improve maintainability. Examples: apps/web/src/pages/CommsPlannerEditor.tsx [87-90] const [localPlanName, setLocalPlanName] = useState(""); const [localPlanNameInitialized, setLocalPlanNameInitialized] = useState(false); const { apps/web/src/pages/CorporateMicPlotEditor.tsx [63-64] const [localName, setLocalName] = useState(""); const [localNameInitialized, setLocalNameInitialized] = useState(false); Solution Walkthrough: Before: // In each of the 9 editor components... const [localName, setLocalName] = useState(""); const [localNameInitialized, setLocalNameInitialized] = useState(false); // Initialize local state from global state useEffect(() => { if (globalName && !localNameInitialized) { setLocalName(globalName); setLocalNameInitialized(true); } }, [globalName, localNameInitialized]); // Debounced sync from local to global state + broadcast useEffect(() => { if (!localNameInitialized) return; const handler = setTimeout(() => { if (localName !== globalName) { setGlobalName(localName); broadcast({ field: 'name', value: localName }); } }, 500); return () => clearTimeout(handler); }, [localName, globalName, setGlobalName, broadcast]); After: // In a new file: hooks/useDebouncedField.ts function useDebouncedField(remoteValue, onSync) { const [localValue, setLocalValue] = useState(remoteValue); useEffect(() => { setLocalValue(remoteValue); }, [remoteValue]); useEffect(() => { const handler = setTimeout(() => { if (localValue !== remoteValue) { onSync(localValue); } }, 500); return () => clearTimeout(handler); }, [localValue, remoteValue, onSync]); return [localValue, setLocalValue]; } // In each of the 9 editor components... const onNameSync = (newName) => { setPlanName(newName); broadcast({ field: 'name', value: newName }); }; const [localPlanName, setLocalPlanName] = useDebouncedField(planName, onNameSync); Suggestion importance[1-10]: 9 __ Why: This is a high-impact architectural suggestion that correctly identifies significant code duplication across nine files and proposes an idiomatic React solution (a custom hook) to centralize the logic, improving maintainability and code quality.	High
More