Real-time Editing

Cothon's real-time collaboration engine enables teams to work on bid analyses and proposals simultaneously without version control chaos. Built on WebSocket technology with operational transformation algorithms, the platform delivers Google Docs-style collaboration optimized for complex procurement workflows.

See changes as they happen, track who's working on what sections, and coordinate large teams with presence indicators and intelligent conflict resolution. No more emailing "Track Changes" versions or wondering if you're working on the latest draft.

How Real-time Editing Works

Technical Foundation

Cothon uses Socket.IO over WebSocket connections to deliver sub-second synchronization:

Client-Side:

• Browser establishes persistent WebSocket connection when you open an analysis
• Local edits broadcast to server immediately via Socket.IO events
• Incoming changes from other users render instantly in your view
• Operational transformation resolves conflicting edits automatically

Server-Side:

• Flask-SocketIO backend manages connection pools and event routing
• Changes validated and stored in Supabase with timestamp and user attribution
• Broadcasts updates to all connected clients on same analysis
• Automatic reconnection handling if connections drop

Data Flow:

User A types → Client broadcasts event → Server receives & validates →
Stores to database → Broadcasts to other clients → User B sees change
(Typical latency: 50-200ms)

What Synchronizes in Real-Time

When multiple users open the same analysis:

• Live content sync - Text edits, requirement status changes, metadata updates
• Presence indicators - Who's viewing, who's editing, where they're focused
• Cursor tracking - Real-time cursor positions in text fields (optional)
• Comment additions - New comments appear immediately for all users
• Assignment changes - Workflow updates broadcast to assignees
• Status updates - Requirement completion, analysis phase transitions
• Conflict prevention - Automatic locking and merge resolution

Presence Indicators

Understanding Who's Here

The presence bar at the top of every shared analysis shows active collaborators:

Avatar Stack:

• Profile pictures of all users currently viewing the analysis
• Maximum 10 avatars shown; click +5 more to see full list
• Avatars update within 2 seconds of users joining/leaving

Visual Status Indicators:

Hover Details:

• Move mouse over any avatar to see tooltip with:
  • Full name and role in organization
  • Current section they're viewing (if determinable)
  • Connection status and last activity timestamp
  • Permission level (Viewer, Commenter, Editor)

Location Indicators

Track where teammates are working within the analysis:

Section Highlights:

• Active sections show subtle colored border matching user's avatar color
• User's name appears in top-right corner of section they're editing
• Multiple users in same section show stacked name tags

Cursor Tracking (optional, enable in Settings > Collaboration):

• Real-time cursor positions for users in same text field
• Cursor rendered in user's avatar color with name label
• Selection ranges highlighted in semi-transparent color overlay
• Useful for pair-editing or live training sessions

Focused Element:

• Element currently focused by user shows thin colored outline
• Prevents accidental simultaneous edits of same field
• Advisory lock - you can still edit, but you'll see warning

Presence in Different Views

Grid View (requirements grouped by status):

• User avatars appear on requirement cards they're actively editing
• Hover to see who last modified each requirement

List View (chronological requirements):

• Colored bar on left edge indicates user working on that requirement
• Name appears on hover

Table View (spreadsheet-style):

• Cell highlighting shows active editors
• Lock icon appears if another user editing same cell

Working Together: Collaboration Patterns

Simultaneous Editing (Parallel Workflow)

Best For: Large teams with clearly divided sections, tight deadlines

How It Works: Multiple users edit different sections simultaneously without conflicts:

Example Scenario: 5-person team working on 72-hour RFP response:

• Hour 1-4: Parallel section drafting (5 people editing simultaneously)
• Hour 4-6: Cross-review period (viewers mode, comments only)
• Hour 6-8: Final refinements (sequential edits with one editor at a time)

Performance:

• Supports up to 50 concurrent editors per analysis
• Sync latency remains under 200ms with 10+ active editors
• Beyond 20 editors, consider splitting into multiple linked analyses

Same-Section Editing (Collaborative Workflow)

Best For: Complex requirements needing multi-disciplinary input, training/mentoring sessions

How It Works: Two or more users edit the same requirement or section:

Conflict Prevention:

1. Advisory Locks: First user to click into field gets "soft lock" (others see warning, can override)
2. Operational Transformation: If both users type simultaneously, algorithm merges changes intelligently
3. Character-Level Merge: Edits at different positions merge automatically (User A adds to beginning, User B adds to end = both changes kept)
4. Conflict Detection: If edits overlap same characters, last save wins with notification to other users

Example: Technical writer drafts compliance statement while compliance officer simultaneously adds regulatory citations:

Writer types:     "Our team has experience with secure facility access..."
Officer types:    [adds at end] "...in accordance with NISPOM Chapter 5."

Result:           "Our team has experience with secure facility access in accordance with NISPOM Chapter 5."
(Both edits merge automatically)

Review & Feedback Workflow

Best For: Quality control, executive review, compliance checks

How It Works: Reviewers use comment-only mode while writers see feedback in real-time:

Collaboration Indicators During Review:

• Reviewer avatars appear on requirements they're actively reviewing
• Comment count badge shows new unread comments
• Resolved comment threads collapse but remain accessible

Auto-Save and Synchronization

Auto-Save Behavior

Cothon eliminates "Save" buttons with intelligent auto-save:

Triggering Events:

• During active typing: Saves every 3 seconds while you continue typing
• After stopping: Saves immediately when you pause (500ms idle)
• On field blur: Saves when you click away from input field
• On navigation: Saves before you switch to different section or page
• On connection loss: Queues changes locally until reconnection

What Gets Saved:

• All text content changes
• Requirement status changes
• Metadata updates (priority, complexity, tags)
• Comment additions and edits
• Workflow assignments and status
• Folder moves and organization changes

Confirmation Indicators:

• Small checkmark appears next to field after successful save
• "Saving..." indicator shows during save operation
• "All changes saved" status in top bar when fully synced
• Error notification if save fails (rare, usually connection issue)

Synchronization Strategies

Optimistic UI Updates: Your changes appear immediately in your view before server confirmation (optimistic concurrency). If server rejects change (e.g., permission revoked), local change reverts with notification.

Conflict Resolution:

Scenario 1: Non-overlapping edits (most common)

• User A edits requirement text
• User B changes requirement priority
• Both changes merge automatically ✓

Scenario 2: Sequential edits same field

• User A edits field, saves at 2:00:00
• User B edits field, saves at 2:00:05
• User B's change overwrites User A's (last-write-wins)
• User A sees notification: "Your change was overwritten by [User B]. View history to restore."

Scenario 3: Simultaneous edits same field (rare)

• Both users editing identical text at same time
• Operational transformation attempts character-level merge
• If merge ambiguous, server picks one version (usually user who saved first)
• Both users notified of conflict; can review history and manually merge

Offline Support and Recovery

Working Offline: If your internet connection drops while editing:

1. Continue working: All edits queue locally in browser storage
2. Visual indicator: Orange banner shows "Offline - changes will sync when reconnected"
3. Local auto-save: Changes persist in browser even if tab closed (session storage)
4. Automatic reconnection: When connection restored, queued changes upload automatically
5. Conflict check: Server compares your offline changes with any edits others made during your offline period

Offline Capabilities:

Recovery After Extended Offline Period:

Example: You edit offline for 2 hours, others made changes during that time

Keyboard Shortcuts for Faster Collaboration

Boost productivity with real-time editing shortcuts:

Navigation

Editing

Collaboration

Workflow

Version History and Rollback

Automatic Version Snapshots

Cothon automatically creates version snapshots at key moments:

Auto-Snapshot Triggers:

• Hourly: Automatic snapshot every hour when analysis has active edits
• Major edits: After 50+ changes or 5+ requirement status updates
• Milestone events: Analysis status changes (Draft → Review → Final)
• Sharing events: Before first share with external users
• Pre-export: Immediately before PDF/Word export

Named Milestones: Create manual snapshots with custom labels:

1. Click History in toolbar
2. Click Create Snapshot
3. Enter descriptive name (e.g., "Before Red Team Review", "Final Submit Version")
4. Snapshot appears in history timeline

Viewing Version History

Restoring Previous Versions

Full Restore (revert entire analysis):

Partial Restore (cherry-pick specific changes):

1. Open version comparison between current and target version
2. Review diff highlighting
3. Click Restore This Section on specific requirement or section
4. Selected content reverts while rest of analysis remains unchanged

Version History Analytics

Insights from History Data:

• Edit Velocity: Graph showing edits over time (identifies crunch periods)
• Contributor Breakdown: Pie chart of edits by team member
• Section Iteration: Heat map showing which requirements changed most frequently
• Change Volume: Metrics on additions vs. deletions vs. modifications

Access analytics: History > Analytics tab

Useful for:

• Post-project retrospectives (where did team spend most effort?)
• Compliance audits (demonstrate thorough review processes)
• Process improvement (identify bottleneck sections that needed excessive rework)

Advanced Real-time Features

Section Locking

Prevent accidental edits during critical phases:

Temporary Lock:

• Click ⋮ More on section > Lock Section
• Only Managers can unlock
• Useful for sections under executive review
• Editors downgraded to Commenters temporarily

Approval Lock:

• Click ⋮ More on requirement > Require Approval to Edit
• Changes to locked requirement queue as "Pending Approval"
• Manager approves or rejects proposed changes
• Useful for sensitive sections like pricing or legal compliance

Conflict Highlighting

When conflicts detected (rare but possible):

Visual Indicators:

• Conflicted section shows yellow warning banner
• Tooltip explains: "This section was edited by [User] while you were editing"
• Click View Conflict to see diff

Resolution Interface:

• Three-pane view: Your version | Server version | Merged result
• Edit merged result to manually combine changes
• Click Resolve Conflict when satisfied
• Original versions preserved in history

Real-time Notifications

Beyond presence indicators, get proactive alerts:

Editing Notifications (optional, configure in Settings):

• Desktop notification when someone starts editing analysis you're viewing
• Useful for small teams wanting high awareness
• Can be noisy for large teams (disable or set to "Managers only")

Section-Specific Alerts:

• Watch specific high-priority requirements
• Receive instant notification if anyone edits watched content
• Set up: Right-click requirement > Watch for Changes

Collision Warnings:

• If you start typing in field another user is editing, warning appears: "Sarah is also editing this field"
• Suggestion to coordinate or choose different section

Performance Optimization

For Large Teams (10+ Concurrent Editors)

Best Practices:

1. Split analyses: Divide 200+ requirement RFPs into multiple linked analyses by section
2. Shift-based editing: Coordinate editing shifts (Team A: 9am-12pm, Team B: 1pm-4pm) to reduce simultaneous load
3. Focused views: Use filters to load only relevant requirements, reducing client-side rendering
4. Close inactive tabs: Each Cothon tab maintains WebSocket connection; close unused tabs
5. Dedicated devices: For 24/7 operations, use dedicated machine for always-on monitoring (don't mix with heavy tasks)

System Requirements for Smooth Real-time:

• Internet: 5+ Mbps down, 1+ Mbps up (wired preferred over WiFi for stability)
• Browser: Chrome 100+, Firefox 95+, Safari 15.4+, Edge 100+ (avoid Internet Explorer)
• RAM: 4GB+ available (8GB+ for analyses with 100+ requirements)
• CPU: Modern multi-core processor (collaboration uses Web Workers for performance)

For Complex Documents (100+ Requirements)

Performance Strategies:

1. Paginated Loading: Enable in Settings > Performance > Load requirements in batches

   • Loads 25 requirements at a time
   • Scroll to bottom to load more
   • Reduces initial render time from 10s to 2s for 200-requirement analyses

2. Virtualized Rendering: Automatically enabled for 50+ requirements

   • Only renders visible requirements in viewport
   • Invisible requirements rendered as placeholders
   • Seamless scrolling experience with 1000+ requirements

3. Debounced Sync: For high-velocity editing (multiple keystrokes per second)

   • Batches rapid changes into single sync event
   • Reduces network overhead
   • Still maintains sub-second sync for other users

Troubleshooting Lag

Symptom: Changes take 5+ seconds to appear for others

Diagnostic Steps:

1. Check connection: Click connection indicator, verify latency
2. Network test: Run speed test at fast.com (need 5+ Mbps)
3. Browser console: Open DevTools > Console, look for WebSocket errors
4. Disable extensions: Ad blockers sometimes interfere with WebSockets
5. Whitelist domain: Ensure *.cothon.ai whitelisted in firewall/VPN
6. Switch networks: Try different WiFi network or wired connection
7. Restart browser: Clears WebSocket connection pool

Server-Side Issues (rare):

• Check status page: status.cothon.ai
• If server maintenance in progress, you'll see banner notification
• Scheduled maintenance announced 48h in advance via email

Real-time Collaboration Scenarios

Scenario 1: Rush RFP (24-Hour Deadline)

Team: 6 people, 45 requirements, complex proposal

Hour 0-2: Kickoff & Assignment

• Manager creates analysis, shares with team (all as Editors)
• Assigns requirements by category in rapid succession
• Team members see assignments appear in real-time, immediately start work

Hour 2-8: Parallel Drafting

• All 6 people editing simultaneously, different sections
• Manager monitors progress via presence indicators (see who's active)
• One collision occurs (two people start same requirement) - advisory lock prevents conflict, they coordinate via Slack

Hour 8-12: Sleep Shift

• Half team offline, others continue editing
• Changes sync when morning shift returns

Hour 12-18: Review Cycle

• Manager switches team to Comment permission (prevent edits)
• Team adds 30+ comments with feedback
• Lead editor addresses comments, marks resolved
• All 6 people see progress in real-time

Hour 18-24: Final Polish & Submit

• Single editor (proposal manager) makes final refinements
• Others in Viewer mode, watching changes happen live
• Export to PDF at deadline - final version automatically shared

Result: 24-hour turnaround with 6-person team, zero version control issues, complete audit trail

Scenario 2: Distributed Team (5 Time Zones)

Team: 10 people across US, Europe, Asia

Challenge: No overlap in working hours for full team

Solution with Real-time Collaboration:

1. Asynchronous editing: Each region works during their day shift, edits auto-sync for next region
2. Handoff protocol: End-of-day team posts comment summarizing progress, tags next shift
3. Presence history: Activity feed shows "Last edited 6 hours ago by [Asia team]" so EU team knows where to resume
4. Version snapshots: Each region creates named snapshot at end of shift (e.g., "US EOD 3/15", "Europe EOD 3/16")
5. Collision-free: Time zone offset ensures no two regions editing simultaneously

Outcome: Continuous 24-hour progress, seamless handoffs, no merge conflicts

Scenario 3: Client Collaboration (External Reviewers)

Team: 4 internal, 2 external consultants (limited Cothon access)

Setup:

1. Share analysis with external consultants via public link (Comment permission, 7-day expiration)
2. Consultants review without Cothon accounts, add comments
3. Internal team sees comments in real-time, addresses immediately
4. Consultants notified via email when comments resolved
5. After review complete, revoke link to maintain security

Outcome: External input integrated seamlessly without granting full system access

FAQ

Next Steps

Master Collaboration Features

• Comments - Threaded discussions, @mentions, and resolution workflows
• Activity Feed - Track all team actions and configure smart notifications
• Sharing - Advanced sharing options including public links and access tracking

Related Topics

• Team Setup - Configure organization, roles, and permissions
• Notifications - Customize notification preferences
• Keyboard Shortcuts - Customize shortcuts for faster workflows

Quick Wins

First Real-time Session: Try this with a teammate:

1. Both open same analysis simultaneously
2. Watch presence indicators show each other
3. Each edit a different requirement - see instant sync
4. One person add a comment, other person receive notification
5. Try commenting on same requirement - see threaded discussion form

Advanced Practice:

1. Enable cursor tracking and try pair-editing same requirement
2. Intentionally create conflict (both edit same sentence) and resolve it
3. Create manual version snapshot, make changes, then restore previous version
4. Use keyboard shortcuts to rapidly navigate and edit while teammate watches

Real-time editing transforms bid team productivity. Master these features to eliminate version control chaos and accelerate your win rates.