# 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

```bash
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:**
```graphql
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