# Manual Upload Capture Instructions

Since the Playwright browser may have restrictions, here's how to capture the upload protocol using your normal browser's Developer Tools.

## Method 1: Chrome/Chromium DevTools (Recommended)

### Step 1: Open DevTools
1. Open Chrome/Chromium
2. Navigate to https://app.kosmi.io/room/@hyperspaceout
3. Press `F12` or `Cmd+Option+I` (Mac) to open DevTools
4. Click the **Network** tab

### Step 2: Filter and Prepare
1. In the Network tab, check the **Preserve log** checkbox (important!)
2. Click the filter icon and select:
   - **Fetch/XHR** (for API calls)
   - **WS** (for WebSocket messages)
3. Clear the log (trash icon) to start fresh

### Step 3: Upload Image
1. In the Kosmi chat, click the attachment/upload button
2. Select `blurt.jpg` (or any small image)
3. Wait for the upload to complete
4. Watch the Network tab for new entries

### Step 4: Find Upload Request
Look for requests that might be the upload:
- URL contains: `upload`, `media`, `file`, `attachment`, `image`, `cdn`, `s3`
- Method: `POST` or `PUT`
- Type: `fetch`, `xhr`, or `other`

### Step 5: Capture Details

**For HTTP Upload:**
1. Click on the upload request
2. Go to the **Headers** tab:
   - Copy the **Request URL**
   - Copy **Request Method**
   - Copy **Request Headers** (especially `Authorization`, `Content-Type`)
3. Go to the **Payload** tab:
   - Note the format (Form Data, Request Payload, etc.)
   - Copy the structure
4. Go to the **Response** tab:
   - Copy the entire response (usually JSON with image URL)

**For WebSocket Message:**
1. Click on the **WS** filter
2. Click on the WebSocket connection (usually `wss://engine.kosmi.io/gql-ws`)
3. Click the **Messages** tab
4. Look for messages sent around the time of upload
5. Look for GraphQL mutations like `uploadFile`, `uploadImage`, `sendMedia`
6. Copy the entire message (both request and response)

### Step 6: Save Information

Create a file `upload-capture.txt` with this information:

```
=== UPLOAD CAPTURE ===

Method: [HTTP or WebSocket]

--- If HTTP ---
URL: [full URL]
Method: [POST/PUT]
Headers:
  Authorization: [value]
  Content-Type: [value]
  [other headers]

Request Body Format: [multipart/form-data, JSON, binary, etc.]
Request Body:
[paste the payload structure]

Response:
[paste the full response]

--- If WebSocket ---
Message Sent:
[paste the GraphQL mutation or message]

Message Received:
[paste the response]

--- Additional Notes ---
[any other observations]
```

## Method 2: Firefox DevTools

Same process as Chrome, but:
1. Press `F12` or `Cmd+Option+I`
2. Click **Network** tab
3. Right-click on the upload request → **Copy** → **Copy All As HAR**
4. Save to `upload-capture.har` and share that file

## Method 3: Use the Monitor (Fixed)

The monitor has been updated with:
- ✅ Better permissions handling
- ✅ Proper Ctrl+C cleanup
- ✅ Fallback message if upload doesn't work

Try running it again:
```bash
./monitor-ws
```

If upload still doesn't work in the Playwright browser, that's okay - just use Method 1 or 2 above.

## What We Need

At minimum, we need to know:

1. **Upload Method:**
   - [ ] HTTP POST/PUT to an endpoint
   - [ ] GraphQL mutation via WebSocket
   - [ ] Something else

2. **Endpoint/Mutation:**
   - URL or mutation name

3. **Authentication:**
   - How is the JWT token passed? (Header? Payload?)

4. **Request Format:**
   - Multipart form-data?
   - Base64 encoded in JSON?
   - Binary?

5. **Response Format:**
   - JSON with `{ url: "..." }`?
   - Something else?

## Example: What Good Capture Looks Like

### Example HTTP Upload:
```
URL: https://cdn.kosmi.io/upload
Method: POST
Headers:
  Authorization: Bearer eyJhbGc...
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...

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

[binary data]
------WebKitFormBoundary...--

Response:
{
  "url": "https://cdn.kosmi.io/files/abc123.jpg",
  "id": "abc123"
}
```

### Example WebSocket Upload:
```
Sent:
{
  "id": "upload-123",
  "type": "subscribe",
  "payload": {
    "query": "mutation UploadFile($file: Upload!) { uploadFile(file: $file) { url } }",
    "variables": {
      "file": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
    }
  }
}

Received:
{
  "id": "upload-123",
  "type": "next",
  "payload": {
    "data": {
      "uploadFile": {
        "url": "https://cdn.kosmi.io/files/abc123.jpg"
      }
    }
  }
}
```

## After Capture

Once you have the information, either:
1. Paste it in a message to me
2. Save to `upload-capture.txt` and share
3. Share the HAR file if using Firefox

I'll then:
1. Analyze the protocol
2. Document it in `KOSMI_IMAGE_UPLOAD.md`
3. Implement the Go client
4. Complete the integration