IRC-kosmi-relay/cmd/monitor-ws

Kosmi WebSocket Monitor - Image Upload Capture

This tool captures ALL WebSocket and HTTP traffic from a Kosmi chat session, specifically designed to reverse-engineer the image upload protocol.

⚠️ Known Issue

The Playwright browser may have restrictions that prevent file uploads. If uploads don't work in the automated browser, use the manual capture method instead (see CAPTURE_UPLOAD_MANUALLY.md).

Prerequisites

• blurt.jpg must exist in the project root directory (test image for upload)
• Playwright must be installed: go run github.com/playwright-community/playwright-go/cmd/playwright@latest install

Running the Monitor

cd /Users/erikfredericks/dev-ai/HSO/irc-kosmi-relay
./monitor-ws

Note: Press Ctrl+C to stop (now properly handles cleanup).

What It Does

1. Opens a browser window to https://app.kosmi.io/room/@hyperspaceout
2. Captures all WebSocket messages (text and binary)
3. Captures all HTTP requests and responses
4. Logs everything to console AND image-upload-capture.log
5. Attempts to trigger file upload dialog automatically
6. If auto-trigger fails, waits for you to manually upload an image

Manual Steps

1. Run the monitor
2. Wait for the browser to open and load Kosmi
3. Look for the attachment/upload button in the chat interface (usually a paperclip or + icon)
4. Click it and select blurt.jpg from the project root
5. Wait for the upload to complete
6. Press Ctrl+C to stop monitoring

What to Look For

In the Console/Log File:

HTTP Requests:

• Look for POST or PUT requests to upload endpoints
• Common patterns: /upload, /media, /file, /attachment, /image
• Note the URL, headers, and request body format

HTTP Responses:

• Look for JSON responses containing image URLs
• Note the URL structure (CDN, S3, etc.)

WebSocket Messages:

• Look for GraphQL mutations related to file upload
• Mutation names might include: uploadFile, uploadImage, sendMedia, attachFile
• Note the mutation structure, variables, and response format
• Check for binary WebSocket frames (image data sent directly)

Example patterns to look for:

mutation UploadFile($file: Upload!, $roomId: String!) {
  uploadFile(file: $file, roomId: $roomId) {
    url
    id
  }
}

Or HTTP multipart form-data:

POST /api/upload
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...
Authorization: Bearer <token>

------WebKitFormBoundary...
Content-Disposition: form-data; name="file"; filename="blurt.jpg"
Content-Type: image/jpeg

<binary data>
------WebKitFormBoundary...--

Output

All traffic is logged to:

• Console (real-time)
• image-upload-capture.log (persistent)

The log file includes timestamps and is easier to search through after the capture is complete.

Alternative: Manual Capture

If the automated browser doesn't allow uploads, use your normal browser instead:

See CAPTURE_UPLOAD_MANUALLY.md for detailed instructions.

Quick summary:

1. Open Chrome DevTools (F12)
2. Go to Network tab, check "Preserve log"
3. Upload an image in Kosmi
4. Find the upload request
5. Copy request/response details

Next Steps

After capturing the upload flow:

1. Analyze the log file (or manual capture) to identify the upload method
2. Document findings in KOSMI_IMAGE_UPLOAD.md
3. Implement the upload client in Go based on the findings