IRC-kosmi-relay/docs/CAPTURE_UPLOAD_MANUALLY.md

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:

./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