R
Case Studies

Comments

Loading...

infrastructurein_reviewv1

Smart Commenting System for Case Studies

Google Docs-style text selection and commenting for AI-human collaboration

December 28, 2025AIclaude-code
#commenting#collaboration#frontend#api#ux
01

Overview

The Smart Commenting System enables Google Docs-style collaboration on case studies. Users can select any text and attach comments directly to that selection, creating a precise feedback loop between AI authors and human reviewers.

Key Features

  • **Text Selection Commenting**: Select any text to add a comment at that exact location
  • **Comment Sidebar**: Collapsible panel showing all comments with unresolved count
  • **Resolve Workflow**: Mark comments as addressed without deleting them
  • **Author Attribution**: Comments track whether they came from humans or AI agents
  • **Quote References**: Comments can store the exact quoted text they reference
  • Design Philosophy

    The system follows the "full Janus battery" pattern:

  • **Database Layer**: PostgreSQL table with proper schema
  • **API Layer**: RESTful endpoints in Janus API
  • **MCP Tools**: AI agents can read/write comments programmatically
  • **Frontend**: React components with real-time interaction
  • This layered approach ensures both humans (via UI) and AI agents (via MCP) can participate equally in the review process.

    02

    User Experience Flow

    Selecting Text and Adding Comments

  • **Select Text**: Click and drag to highlight any text in the case study
  • **Popup Appears**: A comment form appears at the selection position
  • **Enter Details**: Type your name (remembered for future sessions) and comment
  • **Submit**: Click "Comment" to save
  • The popup includes:

  • A preview of the selected text (truncated if long)
  • Name input field (persisted to localStorage)
  • Comment textarea
  • Cancel and Submit buttons
  • Viewing Comments

    Click the comment icon in the top-right corner to open the sidebar:

  • **Badge Count**: Shows number of unresolved comments
  • **Comment Cards**: Each shows author, avatar, content, and timestamp
  • **AI vs Human**: AI authors get a gradient purple avatar; humans get their initial
  • **Resolve Button**: Checkmark icon to mark as addressed
  • Resolving Comments

    When a comment is addressed:

  • Click the checkmark icon
  • Comment fades to indicate resolved status
  • Resolved comments show who resolved them
  • Count badge updates automatically
  • Resolved comments remain visible but are visually de-emphasized, preserving the discussion history.

    03

    Technical Architecture

    Database Schema

    CREATE TABLE case_study_comments (
        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
        case_study_id UUID NOT NULL REFERENCES case_studies(id),
        section_id UUID REFERENCES case_study_sections(id),
        author TEXT NOT NULL,
        author_type TEXT NOT NULL DEFAULT 'human',
        content TEXT NOT NULL,
        quote_text TEXT,  -- The selected text this comment references
        resolved BOOLEAN DEFAULT FALSE,
        resolved_by TEXT,
        created_at TIMESTAMPTZ DEFAULT NOW(),
        updated_at TIMESTAMPTZ DEFAULT NOW()
    );

    API Endpoints

    | Method | Endpoint | Description |

    |--------|----------|-------------|

    | GET | /api/v1/case-studies/{id}/comments | List all comments |

    | POST | /api/v1/case-studies/{id}/comments | Add a comment |

    | POST | /api/v1/case-studies/comments/{id}/resolve | Mark as resolved |

    | DELETE | /api/v1/case-studies/comments/{id} | Delete a comment |

    MCP Tools

    AI agents can use these tools programmatically:

  • `janus_case_study_comment_list` - Retrieve comments for review
  • `janus_case_study_comment_add` - Add feedback comments
  • `janus_case_study_comment_resolve` - Mark issues as addressed
  • Frontend Components

  • **CommentSystem**: Main wrapper handling selection detection and state
  • **CaseStudyContent**: Renders case study with commenting enabled
  • **Selection Popup**: Positioned absolutely at selection coordinates
  • **Comments Sidebar**: Fixed position slide-out panel
  • 04

    AI Agent Integration

    How AI Agents Use Comments

    AI agents participate in the review process through MCP tools. This enables:

    Automated Content Review

    When a case study is submitted for review, an AI agent can:

  • Fetch the case study content via `janus_case_study_get`
  • Analyze for issues (clarity, accuracy, completeness)
  • Add specific comments via `janus_case_study_comment_add`
  • Flag sections needing human attention
  • Example: AI Adding a Comment

    # AI agent reviewing a case study
    await client.case_study_comment_add(
        case_study_id="6d354192-...",
        content="This section could use a concrete example to illustrate the concept.",
        author="claude-code",
        author_type="ai",
        section_id="section-3-uuid",
        quote_text="The autonomy stack enables..."
    )

    Collaborative Workflow

  • **AI Author** creates the draft
  • **AI Reviewer** (different context) adds review comments
  • **Human Reviewer** sees both the content and AI feedback
  • **Human** resolves comments, requests changes, or approves
  • **AI Author** addresses feedback in revisions
  • This multi-agent approach ensures content is reviewed from multiple perspectives before human approval.

    05

    Future Enhancements

    Planned Features

    Text Highlighting

    Currently comments reference text via quote_text field but don't visually highlight it. Future work:

  • Highlight commented text spans in the document
  • Click comment to scroll to and highlight the reference
  • Show inline comment indicators in margins
  • Threaded Replies

    Enable conversations within comments:

  • Reply to specific comments
  • Thread collapse/expand
  • @mentions for notification
  • AI Auto-Review

    Automatic AI review when drafts are submitted:

  • Triggered on status change to `in_review`
  • Configurable review criteria per category
  • Automatic comment generation for common issues
  • Real-time Collaboration

    WebSocket-based live updates:

  • See comments appear in real-time
  • Presence indicators showing who's viewing
  • Typing indicators in comment forms
  • Rhea SSO Integration

    Authentication for verified human identity:

  • Comments tied to SSO user accounts
  • Permission-based resolve capabilities
  • Audit trail for all actions
  • Implementation Priority

  • **Text Highlighting** - Highest impact for UX
  • **AI Auto-Review** - Enables autonomous quality checks
  • **Threaded Replies** - Important for complex discussions
  • **Real-time** - Nice-to-have for collaboration
  • **SSO** - Required for production security