[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_299":300,"_301":302},"routes/_app.x.$handle.$name",{"_98":97,"_33":47,"_106":88,"_28":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":27,"_121":122,"_123":25,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":25,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":27},"version",63,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":27},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",true,"deletedHere",false,"path","shared/encryption.ts","latestPath","fileId","6cf2c06c-3c36-11f0-8b8e-9e149126039e","name","encryption.ts","fileType","script","content","// Matrix encryption utilities\n// This is a simplified implementation for demonstration purposes\n// In a production app, you would use the official Matrix SDK\n\nexport interface EncryptionManager {\n isEnabled: boolean;\n deviceKeys?: CryptoKeyPair;\n initialize(): Promise;\n encryptMessage(plaintext: string, roomId: string): Promise;\n decryptMessage(ciphertext: string, roomId: string, senderId: string): Promise;\n generateDeviceKeys(): Promise;\n exportDeviceKeys(): Promise<{ ed25519: string; curve25519: string }>;\n}\n\nclass SimpleEncryptionManager implements EncryptionManager {\n isEnabled = false;\n deviceKeys?: CryptoKeyPair;\n private roomKeys: Map = new Map();\n private messageKeys: Map = new Map(); // Store message-to-key mapping\n\n async initialize(): Promise {\n try {\n // Check if crypto is available\n if (!window.crypto || !window.crypto.subtle) {\n console.warn(\"Web Crypto API not available - encryption disabled\");\n return;\n }\n\n // Load existing keys or generate new ones\n await this.loadOrGenerateKeys();\n this.isEnabled = true;\n console.log(\"Encryption initialized successfully\");\n } catch (error) {\n console.error(\"Failed to initialize encryption:\", error);\n this.isEnabled = false;\n }\n }\n\n private async loadOrGenerateKeys(): Promise {\n const savedKeys = localStorage.getItem(\"matrix_device_keys\");\n const savedRoomKeys = localStorage.getItem(\"matrix_room_keys\");\n \n if (savedKeys) {\n try {\n // In a real implementation, you'd properly import the keys\n // For now, we'll just generate new ones each time\n await this.generateDeviceKeys();\n } catch (error) {\n console.warn(\"Failed to load saved keys, generating new ones\");\n await this.generateDeviceKeys();\n }\n } else {\n await this.generateDeviceKeys();\n }\n\n // Load room keys\n if (savedRoomKeys) {\n try {\n const roomKeyData = JSON.parse(savedRoomKeys);\n // In a real implementation, you'd properly import these keys\n // For now, we'll regenerate them as needed\n } catch (error) {\n console.warn(\"Failed to load room keys\");\n }\n }\n }\n\n async generateDeviceKeys(): Promise {\n try {\n // Generate Ed25519 signing keys (simulated with ECDSA)\n const keyPair = await window.crypto.subtle.generateKey(\n {\n name: \"ECDSA\",\n namedCurve: \"P-256\",\n },\n true,\n [\"sign\", \"verify\"]\n );\n\n this.deviceKeys = keyPair;\n\n // Export and save keys (simplified)\n const publicKey = await window.crypto.subtle.exportKey(\"spki\", keyPair.publicKey);\n const privateKey = await window.crypto.subtle.exportKey(\"pkcs8\", keyPair.privateKey);\n \n localStorage.setItem(\"matrix_device_keys\", JSON.stringify({\n public: Array.from(new Uint8Array(publicKey)),\n private: Array.from(new Uint8Array(privateKey)),\n timestamp: Date.now(),\n }));\n\n return keyPair;\n } catch (error) {\n console.error(\"Failed to generate device keys:\", error);\n throw error;\n }\n }\n\n async exportDeviceKeys(): Promise<{ ed25519: string; curve25519: string }> {\n if (!this.deviceKeys) {\n throw new Error(\"Device keys not initialized\");\n }\n\n try {\n const publicKey = await window.crypto.subtle.exportKey(\"spki\", this.deviceKeys.publicKey);\n const keyBytes = new Uint8Array(publicKey);\n const keyBase64 = btoa(String.fromCharCode(...keyBytes));\n\n return {\n ed25519: keyBase64,\n curve25519: keyBase64, // Simplified - would be different in real implementation\n };\n } catch (error) {\n console.error(\"Failed to export device keys:\", error);\n throw error;\n }\n }\n\n async encryptMessage(plaintext: string, roomId: string): Promise {\n if (!this.isEnabled) {\n console.warn(\"Encryption not enabled, returning plaintext\");\n return plaintext;\n }\n\n try {\n // Get or generate room key\n let roomKey = this.roomKeys.get(roomId);\n if (!roomKey) {\n roomKey = await this.generateRoomKey(roomId);\n }\n\n // Create a unique message ID for this encryption\n const messageId = `${roomId}_${Date.now()}_${Math.random()}`;\n\n // Encrypt the message\n const encoder = new TextEncoder();\n const data = encoder.encode(plaintext);\n const iv = window.crypto.getRandomValues(new Uint8Array(12));\n\n const encrypted = await window.crypto.subtle.encrypt(\n {\n name: \"AES-GCM\",\n iv: iv,\n },\n roomKey,\n data\n );\n\n // Create the encrypted payload\n const payload = {\n iv: Array.from(iv),\n data: Array.from(new Uint8Array(encrypted)),\n messageId: messageId,\n roomId: roomId,\n timestamp: Date.now(),\n };\n\n const encryptedString = btoa(JSON.stringify(payload));\n \n // Store the mapping for decryption\n this.messageKeys.set(messageId, encryptedString);\n \n console.log(\"Message encrypted successfully:\", { messageId, roomId });\n return encryptedString;\n } catch (error) {\n console.error(\"Failed to encrypt message:\", error);\n return plaintext; // Fallback to plaintext\n }\n }\n\n async decryptMessage(ciphertext: string, roomId: string, senderId: string): Promise {\n if (!this.isEnabled) {\n console.warn(\"Encryption not enabled, returning ciphertext as-is\");\n return ciphertext;\n }\n\n try {\n // Try to parse the encrypted payload\n let payload;\n try {\n payload = JSON.parse(atob(ciphertext));\n } catch (parseError) {\n console.warn(\"Failed to parse encrypted payload, treating as plaintext\");\n return ciphertext;\n }\n\n // Validate payload structure\n if (!payload.iv || !payload.data || !payload.roomId) {\n console.warn(\"Invalid encrypted payload structure\");\n return \"[Encrypted message - invalid format]\";\n }\n\n // Check if this is for the correct room\n if (payload.roomId !== roomId) {\n console.warn(\"Message encrypted for different room\");\n return \"[Encrypted message - wrong room]\";\n }\n\n // Get room key\n let roomKey = this.roomKeys.get(roomId);\n if (!roomKey) {\n // Try to generate/load the room key\n roomKey = await this.generateRoomKey(roomId);\n }\n\n // Reconstruct the IV and encrypted data\n const iv = new Uint8Array(payload.iv);\n const encryptedData = new Uint8Array(payload.data);\n\n // Decrypt the message\n const decrypted = await window.crypto.subtle.decrypt(\n {\n name: \"AES-GCM\",\n iv: iv,\n },\n roomKey,\n encryptedData\n );\n\n const decoder = new TextDecoder();\n const decryptedText = decoder.decode(decrypted);\n \n console.log(\"Message decrypted successfully:\", { \n messageId: payload.messageId, \n roomId,\n senderId \n });\n \n return decryptedText;\n } catch (error) {\n console.error(\"Failed to decrypt message:\", error);\n return \"[Encrypted message - decryption failed]\";\n }\n }\n\n private async generateRoomKey(roomId: string): Promise {\n try {\n const key = await window.crypto.subtle.generateKey(\n {\n name: \"AES-GCM\",\n length: 256,\n },\n true,\n [\"encrypt\", \"decrypt\"]\n );\n\n this.roomKeys.set(roomId, key);\n \n // Save room keys (simplified)\n try {\n const exportedKey = await window.crypto.subtle.exportKey(\"raw\", key);\n const roomKeysData = JSON.parse(localStorage.getItem(\"matrix_room_keys\") || \"{}\");\n roomKeysData[roomId] = {\n key: Array.from(new Uint8Array(exportedKey)),\n timestamp: Date.now(),\n };\n localStorage.setItem(\"matrix_room_keys\", JSON.stringify(roomKeysData));\n } catch (saveError) {\n console.warn(\"Failed to save room key:\", saveError);\n }\n\n console.log(\"Generated new room key for:\", roomId);\n return key;\n } catch (error) {\n console.error(\"Failed to generate room key:\", error);\n throw error;\n }\n }\n\n // Method to clear encryption data (for debugging)\n clearEncryptionData(): void {\n this.roomKeys.clear();\n this.messageKeys.clear();\n localStorage.removeItem(\"matrix_device_keys\");\n localStorage.removeItem(\"matrix_room_keys\");\n console.log(\"Encryption data cleared\");\n }\n}\n\n// Export singleton instance\nexport const encryptionManager = new SimpleEncryptionManager();","// Simplified Matrix encryption utilities\n// This is a demonstration implementation that works with our own encrypted messages\n\nexport interface EncryptionManager {\n isEnabled: boolean;\n initialize(): Promise;\n encryptMessage(plaintext: string, roomId: string): Promise<{ encrypted: string; isEncrypted: boolean }>;\n decryptMessage(ciphertext: string, roomId: string, senderId: string): Promise;\n clearEncryptionData(): void;\n}\n\nclass SimpleEncryptionManager implements EncryptionManager {\n isEnabled = false;\n private roomKeys: Map = new Map();\n private readonly ENCRYPTION_PREFIX = \"MATRIX_ENCRYPTED:\";\n\n async initialize(): Promise {\n try {\n // Check if crypto is available\n if (!window.crypto || !window.crypto.subtle) {\n console.warn(\"Web Crypto API not available - encryption disabled\");\n this.isEnabled = false;\n return;\n }\n\n this.isEnabled = true;\n console.log(\"✅ Encryption initialized successfully\");\n } catch (error) {\n console.error(\"❌ Failed to initialize encryption:\", error);\n this.isEnabled = false;\n }\n }\n\n async encryptMessage(plaintext: string, roomId: string): Promise<{ encrypted: string; isEncrypted: boolean }> {\n if (!this.isEnabled) {\n console.log(\"🔓 Encryption not enabled, sending as plaintext\");\n return { encrypted: plaintext, isEncrypted: false };\n }\n\n try {\n // Get or generate room key\n let roomKey = this.roomKeys.get(roomId);\n if (!roomKey) {\n roomKey = await this.generateRoomKey(roomId);\n console.log(\"🔑 Generated new room key for:\", roomId);\n }\n\n // Encrypt the message\n const encoder = new TextEncoder();\n const data = encoder.encode(plaintext);\n const iv = window.crypto.getRandomValues(new Uint8Array(12));\n\n const encrypted = await window.crypto.subtle.encrypt(\n {\n name: \"AES-GCM\",\n iv: iv,\n },\n roomKey,\n data\n );\n\n // Create a simple payload\n const payload = {\n iv: Array.from(iv),\n data: Array.from(new Uint8Array(encrypted)),\n roomId: roomId,\n version: 1,\n };\n\n const encryptedString = this.ENCRYPTION_PREFIX + btoa(JSON.stringify(payload));\n console.log(\"🔒 Message encrypted successfully\");\n return { encrypted: encryptedString, isEncrypted: true };\n } catch (error) {\n console.error(\"❌ Failed to encrypt message:\", error);\n return { encrypted: plaintext, isEncrypted: false };\n }\n }\n\n async decryptMessage(ciphertext: string, roomId: string, senderId: string): Promise {\n // Check if this is our encrypted message\n if (!ciphertext.startsWith(this.ENCRYPTION_PREFIX)) {\n // This is either plaintext or encrypted by a different system\n console.log(\"📝 Message is not encrypted by our system, returning as-is\");\n return ciphertext;\n }\n\n if (!this.isEnabled) {\n console.warn(\"🔓 Encryption not enabled, cannot decrypt\");\n return \"[🔒 Encrypted message - encryption not available]\";\n }\n\n try {\n // Remove our prefix and decode\n const encryptedData = ciphertext.substring(this.ENCRYPTION_PREFIX.length);\n const payload = JSON.parse(atob(encryptedData));\n\n // Validate payload\n if (!payload.iv || !payload.data || !payload.roomId || payload.version !== 1) {\n console.warn(\"⚠️ Invalid encrypted payload structure\");\n return \"[🔒 Encrypted message - invalid format]\";\n }\n\n // Check room ID\n if (payload.roomId !== roomId) {\n console.warn(\"⚠️ Message encrypted for different room\");\n return \"[🔒 Encrypted message - wrong room]\";\n }\n\n // Get room key\n let roomKey = this.roomKeys.get(roomId);\n if (!roomKey) {\n // Try to generate the room key (in a real app, you'd need proper key sharing)\n roomKey = await this.generateRoomKey(roomId);\n console.log(\"🔑 Generated room key for decryption\");\n }\n\n // Decrypt\n const iv = new Uint8Array(payload.iv);\n const encryptedBytes = new Uint8Array(payload.data);\n\n const decrypted = await window.crypto.subtle.decrypt(\n {\n name: \"AES-GCM\",\n iv: iv,\n },\n roomKey,\n encryptedBytes\n );\n\n const decoder = new TextDecoder();\n const decryptedText = decoder.decode(decrypted);\n \n console.log(\"🔓 Message decrypted successfully\");\n return decryptedText;\n } catch (error) {\n console.error(\"❌ Failed to decrypt message:\", error);\n return \"[🔒 Encrypted message - decryption failed]\";\n }\n }\n\n private async generateRoomKey(roomId: string): Promise {\n try {\n const key = await window.crypto.subtle.generateKey(\n {\n name: \"AES-GCM\",\n length: 256,\n },\n true,\n [\"encrypt\", \"decrypt\"]\n );\n\n this.roomKeys.set(roomId, key);\n \n // Save to localStorage (simplified - in real app you'd use proper key storage)\n try {\n const exportedKey = await window.crypto.subtle.exportKey(\"raw\", key);\n const roomKeysData = JSON.parse(localStorage.getItem(\"matrix_room_keys\") || \"{}\");\n roomKeysData[roomId] = Array.from(new Uint8Array(exportedKey));\n localStorage.setItem(\"matrix_room_keys\", JSON.stringify(roomKeysData));\n } catch (saveError) {\n console.warn(\"⚠️ Failed to save room key:\", saveError);\n }\n\n return key;\n } catch (error) {\n console.error(\"❌ Failed to generate room key:\", error);\n throw error;\n }\n }\n\n clearEncryptionData(): void {\n this.roomKeys.clear();\n localStorage.removeItem(\"matrix_room_keys\");\n console.log(\"🧹 Encryption data cleared\");\n }\n}\n\n// Export singleton instance\nexport const encryptionManager = new SimpleEncryptionManager();","createdAt",["D",1748487059637],"branchVersion","branchId","17fae508-3c31-11f0-8df2-9e149126039e","id","17faaeb2-3c31-11f0-8df2-9e149126039e","matrix",["D",1748484200184],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","simple matrix client","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","340eba9e-3c31-11f0-883d-9e149126039e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":57,"_102":103,"_104":27},"branch",{"_13":87,"_33":88,"_45":44,"_89":46,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":47,"_96":97},"isOwned",147,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":295,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":25,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":296,"_82":297,"_84":298,"_86":27},"tree",[173,175,185,188],"files",[173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188],"counts",{"_162":64,"_163":164,"_165":64,"_166":167,"_168":169},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":156,"_33":157,"_31":158,"_135":-5,"_43":44,"_42":159,"_137":25,"_40":160,"_13":64,"_35":148,"_37":-5,"_24":27,"_141":-5,"_28":161},{"_45":150,"_33":151,"_31":152,"_135":-5,"_43":44,"_42":153,"_137":25,"_40":154,"_13":64,"_35":148,"_37":-5,"_24":27,"_141":-5,"_28":155},{"_45":143,"_33":144,"_31":145,"_135":-5,"_43":44,"_42":146,"_137":25,"_40":147,"_13":64,"_35":148,"_37":-5,"_24":27,"_141":-5,"_28":149},{"_45":132,"_33":133,"_31":134,"_135":-5,"_43":44,"_42":136,"_137":27,"_40":138,"_13":139,"_35":20,"_37":140,"_24":27,"_141":-5,"_28":142},"f0d012fe-3c36-11f0-ae95-9e149126039e","README.md","2450a964-3c31-11f0-a89b-9e149126039e","parentId",60,"latest",["D",1748486711449],9,"# Matrix Client\n\nA beautiful web-based Matrix client built with React and TailwindCSS featuring dark mode support.\n\n## Features\n\n- Connect to any Matrix homeserver\n- Login with username/password\n- View and join rooms\n- Send and receive messages\n- Real-time message updates\n- **Beautiful dark/light mode toggle**\n- **Responsive design with improved UI**\n- **Enhanced message display with better grouping**\n- **Smooth animations and transitions**\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Proxy server for Matrix API (CORS handling)\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Login.tsx # Login form\n│ │ ├── RoomList.tsx # List of joined rooms\n│ │ ├── ChatView.tsx # Chat interface\n│ │ ├── MessageList.tsx # Message display\n│ │ └── MessageInput.tsx # Message composition\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend entry point\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## Usage\n\n1. Open the application\n2. Enter your Matrix homeserver URL (e.g., https://matrix.org)\n3. Login with your Matrix credentials\n4. Browse rooms and start chatting!\n\n## Features Implemented\n\n- ✅ **End-to-End Encryption**: Basic message encryption support with visual indicators\n- ✅ **Encryption Detection**: Automatically detects encrypted rooms and shows status\n- ✅ **Visual Security Indicators**: Lock icons and encryption badges throughout the UI\n- ✅ **Encrypted Message Handling**: Decrypt incoming messages and encrypt outgoing ones\n- ✅ **Fallback Support**: Graceful degradation when encryption is unavailable\n- ✅ **Enhanced Dark/Light Mode**: Intelligent theme system with system preference detection\n- ✅ **Smooth Theme Transitions**: Beautiful animated icon transitions and smooth color changes\n- ✅ **No Flash Loading**: Theme applied before page render to prevent white flash\n- ✅ **System Integration**: Automatically follows system dark/light mode preference\n- ✅ **Persistent Preferences**: Remembers manual theme selection across sessions\n- ✅ **Responsive Design**: Works perfectly on desktop and mobile\n- ✅ **Enhanced Login**: Gradient background with improved form styling\n- ✅ **Tabbed Interface**: Separate tabs for public rooms and direct messages\n- ✅ **Private Messages**: Full support for direct message conversations\n- ✅ **Smart Room Detection**: Automatically categorizes rooms vs DMs\n- ✅ **Advanced Chat View**: Enhanced message bubbles with better grouping\n- ✅ **Smart Message Display**: Date separators and time grouping\n- ✅ **Fixed Input Box**: No more scrolling issues, proper auto-resize\n- ✅ **Duplicate Prevention**: Smart filtering to prevent message repetition\n- ✅ **Real-time Sync**: Live message updates with optimized polling\n- ✅ **Session Persistence**: Automatic login restoration\n- ✅ **Error Handling**: Comprehensive error states with retry options\n- ✅ **Optimistic Sending**: Messages appear instantly with proper fallback\n- ✅ **Smooth Animations**: CSS transitions and message animations\n- ✅ **Custom Scrollbars**: Styled for both light and dark modes\n\n## Technical Details\n\n- **Backend**: Hono-based proxy server to handle CORS issues with Matrix homeservers\n- **Frontend**: React SPA with TailwindCSS for styling\n- **Real-time**: Polling-based sync for new messages\n- **Storage**: LocalStorage for session persistence\n- **API**: Matrix Client-Server API v1.0\n- **Encryption**: Simplified end-to-end encryption using Web Crypto API (demonstration purposes)\n\n## Encryption Implementation\n\nThe encryption system is a simplified implementation for demonstration purposes. In a production environment, you would use the official Matrix SDK which implements the full Olm/Megolm protocol suite.\n\n**Current Implementation:**\n- Uses Web Crypto API for AES-GCM encryption\n- Generates device keys using ECDSA (simulating Ed25519)\n- Room-specific encryption keys\n- Visual indicators for encrypted rooms and messages\n- Graceful fallback when encryption is unavailable\n\n**Production Considerations:**\n- Use official Matrix SDK for proper Olm/Megolm implementation\n- Implement proper key verification and device management\n- Add support for key backup and recovery\n- Implement cross-signing for device verification","label",[133],"2ad6446a-3c31-11f0-ab74-9e149126039e","shared","5d578e7c-5ed0-428e-a8e4-93e4b8ae6c74",2,["D",1748484231814],"directory",[144],"38eca1fc-3c31-11f0-861b-9e149126039e","frontend","61ed27d5-bb56-4515-8699-6e4311eb10d5",4,["D",1748484255451],[151],"340ec444-3c31-11f0-883d-9e149126039e","backend","f0c23a58-f8e8-4cde-afe9-1c855e951c49",3,["D",1748484247288],[157],"pulls","branches",1,"forks","envVars",{"_170":64,"_172":64},"connections",{"_170":64,"_171":64},"count","unfilledCount","emptyCount",{"_45":156,"_33":157,"_31":158,"_135":-5,"_43":44,"_42":159,"_137":25,"_40":292,"_13":64,"_35":148,"_37":-5,"_24":27,"_141":-5,"_190":293,"_28":294},{"_45":284,"_33":285,"_31":59,"_135":158,"_43":44,"_42":286,"_137":27,"_40":287,"_13":164,"_35":288,"_37":289,"_24":27,"_141":47,"_190":290,"_28":291},{"_45":150,"_33":151,"_31":152,"_135":-5,"_43":44,"_42":153,"_137":25,"_40":281,"_13":64,"_35":148,"_37":-5,"_24":27,"_141":-5,"_190":282,"_28":283},{"_45":277,"_33":234,"_31":227,"_135":152,"_43":44,"_42":248,"_137":25,"_40":278,"_13":64,"_35":148,"_37":-5,"_24":27,"_141":-5,"_190":279,"_28":280},{"_45":269,"_33":270,"_31":271,"_135":227,"_43":44,"_42":272,"_137":27,"_40":273,"_13":146,"_35":36,"_37":274,"_24":27,"_141":-5,"_190":275,"_28":276},{"_45":260,"_33":261,"_31":262,"_135":227,"_43":44,"_42":263,"_137":27,"_40":264,"_13":265,"_35":36,"_37":266,"_24":27,"_141":-5,"_190":267,"_28":268},{"_45":252,"_33":253,"_31":254,"_135":227,"_43":44,"_42":255,"_137":27,"_40":256,"_13":146,"_35":36,"_37":257,"_24":27,"_141":-5,"_190":258,"_28":259},{"_45":243,"_33":244,"_31":245,"_135":227,"_43":44,"_42":246,"_137":27,"_40":247,"_13":248,"_35":36,"_37":249,"_24":27,"_141":-5,"_190":250,"_28":251},{"_45":235,"_33":236,"_31":237,"_135":227,"_43":44,"_42":238,"_137":27,"_40":239,"_13":146,"_35":36,"_37":240,"_24":27,"_141":-5,"_190":241,"_28":242},{"_45":224,"_33":225,"_31":226,"_135":227,"_43":44,"_42":228,"_137":27,"_40":229,"_13":230,"_35":36,"_37":231,"_24":27,"_141":-5,"_190":232,"_28":233},{"_45":216,"_33":217,"_31":218,"_135":152,"_43":44,"_42":219,"_137":27,"_40":220,"_13":146,"_35":20,"_37":221,"_24":27,"_141":-5,"_190":222,"_28":223},{"_45":208,"_33":209,"_31":210,"_135":152,"_43":44,"_42":211,"_137":25,"_40":212,"_13":64,"_35":36,"_37":213,"_24":27,"_141":-5,"_190":214,"_28":215},{"_45":143,"_33":144,"_31":145,"_135":-5,"_43":44,"_42":146,"_137":25,"_40":205,"_13":64,"_35":148,"_37":-5,"_24":27,"_141":-5,"_190":206,"_28":207},{"_45":201,"_33":34,"_31":32,"_135":145,"_43":44,"_42":14,"_137":27,"_40":202,"_13":146,"_35":36,"_37":39,"_24":27,"_141":-5,"_190":203,"_28":204},{"_45":193,"_33":194,"_31":195,"_135":145,"_43":44,"_42":196,"_137":27,"_40":197,"_13":146,"_35":36,"_37":198,"_24":27,"_141":-5,"_190":199,"_28":200},{"_45":132,"_33":133,"_31":134,"_135":-5,"_43":44,"_42":136,"_137":27,"_40":189,"_13":139,"_35":20,"_37":140,"_24":27,"_141":-5,"_190":191,"_28":192},["D",1748486711449],"children",[],[133],"5c90ff04-3c36-11f0-9ac7-9e149126039e","types.ts","2ad62782-3c31-11f0-ab74-9e149126039e",48,["D",1748486462730],"// Shared types for Matrix client\n\nexport interface MatrixLoginRequest {\n type: string;\n user: string;\n password: string;\n}\n\nexport interface MatrixLoginResponse {\n access_token: string;\n user_id: string;\n home_server: string;\n device_id: string;\n}\n\nexport interface MatrixRoom {\n room_id: string;\n name?: string;\n canonical_alias?: string;\n topic?: string;\n avatar_url?: string;\n num_joined_members?: number;\n world_readable?: boolean;\n guest_can_join?: boolean;\n join_rule?: string;\n isDirect?: boolean;\n encrypted?: boolean;\n}\n\nexport interface MatrixEvent {\n event_id: string;\n type: string;\n room_id: string;\n sender: string;\n content: any;\n origin_server_ts: number;\n unsigned?: any;\n}\n\nexport interface MatrixMessage extends MatrixEvent {\n content: {\n msgtype: string;\n body: string;\n format?: string;\n formatted_body?: string;\n // Encryption fields\n algorithm?: string;\n ciphertext?: string;\n sender_key?: string;\n device_id?: string;\n session_id?: string;\n };\n}\n\nexport interface MatrixEncryptedEvent extends MatrixEvent {\n type: \"m.room.encrypted\";\n content: {\n algorithm: string;\n ciphertext: string;\n sender_key: string;\n device_id: string;\n session_id: string;\n };\n}\n\nexport interface MatrixSyncResponse {\n next_batch: string;\n rooms?: {\n join?: { [roomId: string]: any };\n invite?: { [roomId: string]: any };\n leave?: { [roomId: string]: any };\n };\n device_lists?: {\n changed?: string[];\n left?: string[];\n };\n to_device?: {\n events?: any[];\n };\n}\n\nexport interface UserSession {\n accessToken: string;\n userId: string;\n homeserver: string;\n deviceId: string;\n encryptionEnabled?: boolean;\n}\n\nexport interface EncryptionKeys {\n ed25519: string;\n curve25519: string;\n}\n\nexport interface DeviceInfo {\n device_id: string;\n display_name?: string;\n keys: EncryptionKeys;\n algorithms: string[];\n signatures: { [userId: string]: { [keyId: string]: string } };\n}",[],[144,194],"c0595878-3c37-11f0-8d72-9e149126039e",["D",1748487059637],[],[144,34],["D",1748484231814],[186,187],[144],"3b894834-3c31-11f0-8235-9e149126039e","index.tsx","3b8948fc-3c31-11f0-8235-9e149126039e",5,["D",1748484259836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[151,209],"165f04d6-3c36-11f0-9211-9e149126039e","index.html","38ec7da8-3c31-11f0-861b-9e149126039e",46,["D",1748486344965],"\n\n\n \n \n Matrix Client\n \n \n \n \n\n\n \n

Loading Matrix Client...

\n \n

\n \n \n \n\n",[],[151,217],"7c426ff4-3c36-11f0-889e-9e149126039e","RoomList.tsx","2b14c356-3c32-11f0-bdf0-9e149126039e","dfdc8674-7222-4186-bca7-b68b66f56bb4",51,["D",1748486515904],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { UserSession, MatrixRoom } from \"../../shared/types.ts\";\n\ninterface RoomListProps {\n session: UserSession;\n selectedRoom: MatrixRoom | null;\n onRoomSelect: (room: MatrixRoom) => void;\n}\n\nexport default function RoomList({ session, selectedRoom, onRoomSelect }: RoomListProps) {\n const [rooms, setRooms] = useState([]);\n const [directMessages, setDirectMessages] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [activeTab, setActiveTab] = useState<'rooms' | 'dms'>('rooms');\n\n useEffect(() => {\n fetchRooms();\n }, [session]);\n\n const fetchRooms = async () => {\n try {\n setLoading(true);\n setError(\"\");\n\n // Get joined rooms\n const response = await fetch(\"/api/matrix/_matrix/client/r0/joined_rooms\", {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch rooms: ${response.status}`);\n }\n\n const data = await response.json();\n const roomIds = data.joined_rooms || [];\n\n // Fetch room details for each room\n const roomDetails = await Promise.all(\n roomIds.map(async (roomId: string) => {\n try {\n const stateResponse = await fetch(`/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(roomId)}/state`, {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (!stateResponse.ok) {\n console.warn(`Failed to fetch state for room ${roomId}`);\n return {\n room_id: roomId,\n name: roomId,\n isDirect: false,\n };\n }\n\n const stateEvents = await stateResponse.json();\n \n // Extract room information from state events\n const nameEvent = stateEvents.find((event: any) => event.type === \"m.room.name\");\n const canonicalAliasEvent = stateEvents.find((event: any) => event.type === \"m.room.canonical_alias\");\n const topicEvent = stateEvents.find((event: any) => event.type === \"m.room.topic\");\n const avatarEvent = stateEvents.find((event: any) => event.type === \"m.room.avatar\");\n const createEvent = stateEvents.find((event: any) => event.type === \"m.room.create\");\n const memberEvents = stateEvents.filter((event: any) => event.type === \"m.room.member\");\n \n // Determine if this is a direct message room\n const isDirect = createEvent?.content?.is_direct === true || \n (memberEvents.length === 2 && !nameEvent?.content?.name && !canonicalAliasEvent?.content?.alias);\n \n // Check if room has encryption enabled\n const encryptionEvent = stateEvents.find((event: any) => event.type === \"m.room.encryption\");\n const encrypted = !!encryptionEvent;\n \n // For direct messages, use the other user's display name\n let displayName = nameEvent?.content?.name || canonicalAliasEvent?.content?.alias || roomId;\n \n if (isDirect && memberEvents.length === 2) {\n const otherMember = memberEvents.find((event: any) => event.state_key !== session.userId);\n if (otherMember) {\n displayName = otherMember.content?.displayname || otherMember.state_key;\n }\n }\n\n const room: MatrixRoom & { isDirect?: boolean } = {\n room_id: roomId,\n name: displayName,\n canonical_alias: canonicalAliasEvent?.content?.alias,\n topic: topicEvent?.content?.topic,\n avatar_url: avatarEvent?.content?.url,\n isDirect,\n encrypted,\n };\n\n return room;\n } catch (error) {\n console.error(`Error fetching details for room ${roomId}:`, error);\n return {\n room_id: roomId,\n name: roomId,\n isDirect: false,\n };\n }\n })\n );\n\n // Separate rooms and direct messages\n const publicRooms = roomDetails.filter(room => !room.isDirect);\n const dms = roomDetails.filter(room => room.isDirect);\n\n setRooms(publicRooms);\n setDirectMessages(dms);\n } catch (err) {\n console.error(\"Error fetching rooms:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load rooms\");\n } finally {\n setLoading(false);\n }\n };\n\n if (loading) {\n return (\n

\n {[...Array(5)].map((_, i) => (\n

\n ))}\n

\n );\n }\n\n if (error) {\n return (\n

\n \n {error}\n

\n \n Try again\n \n

\n );\n }\n\n return (\n

\n {/* Header with tabs */}\n

\n setActiveTab('rooms')}\n className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-colors ${\n activeTab === 'rooms'\n ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'\n : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'\n }`}\n >\n

\n \n Rooms\n \n {rooms.length}\n \n

\n \n setActiveTab('dms')}\n className={`flex-1 px-3 py-2 text-sm font-medium rounded-md transition-colors ${\n activeTab === 'dms'\n ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm'\n : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'\n }`}\n >\n

\n \n DMs\n \n {directMessages.length}\n \n

\n \n

\n\n

\n {loading ? (\n

\n {[...Array(5)].map((_, i) => (\n

\n ))}\n

\n ) : error ? (\n

\n \n {error}\n

\n \n Try again\n \n

\n ) : (\n \n )}\n

\n\n

\n \n \n Refresh {activeTab === 'rooms' ? 'Rooms' : 'Messages'}\n \n

\n );\n}\n\n// Separate component for room list content\nfunction RoomListContent({ \n rooms, \n selectedRoom, \n onRoomSelect, \n type \n}: { \n rooms: MatrixRoom[], \n selectedRoom: MatrixRoom | null, \n onRoomSelect: (room: MatrixRoom) => void,\n type: 'rooms' | 'dms'\n}) {\n const getRoomDisplayName = (room: MatrixRoom) => {\n if (room.name && room.name !== room.room_id) {\n return room.name;\n }\n if (room.canonical_alias) {\n return room.canonical_alias;\n }\n return room.room_id;\n };\n\n const getRoomInitials = (room: MatrixRoom) => {\n const name = getRoomDisplayName(room);\n if (name.startsWith(\"#\") || name.startsWith(\"@\")) {\n return name.substring(1, 3).toUpperCase();\n }\n return name.substring(0, 2).toUpperCase();\n };\n\n if (rooms.length === 0) {\n return (\n

\n {type === 'rooms' ? (\n \n ) : (\n \n )}\n

\n {type === 'rooms' ? 'No rooms found' : 'No direct messages'}\n

\n {type === 'rooms' ? 'Join some rooms to get started' : 'Start a conversation with someone'}\n

\n );\n }\n\n return (\n

\n {rooms.map((room) => (\n onRoomSelect(room)}\n className={`w-full flex items-center space-x-3 p-3 rounded-xl text-left transition-all duration-200 ${\n selectedRoom?.room_id === room.room_id\n ? \"bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 shadow-sm\"\n : \"hover:bg-gray-100 dark:hover:bg-gray-700/50\"\n }`}\n >\n

\n {room.avatar_url ? (\n \n ) : type === 'dms' ? (\n \n ) : (\n getRoomInitials(room)\n )}\n

\n {getRoomDisplayName(room)}\n

\n {room.encrypted && (\n

\n \n

\n )}\n

\n {room.topic && (\n

\n {room.topic}\n

\n )}\n

\n \n ))}\n

\n );\n}\n}",[],[151,234,225],"components","ba63afbe-3c36-11f0-8b8e-9e149126039e","MessageList.tsx","57581ef4-3c32-11f0-8585-9e149126039e",56,["D",1748486620142],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { MatrixMessage } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: MatrixMessage[];\n currentUserId: string;\n}\n\nexport default function MessageList({ messages, currentUserId }: MessageListProps) {\n const messagesEndRef = useRef(null);\n const containerRef = useRef(null);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n const formatTime = (timestamp: number) => {\n const date = new Date(timestamp);\n const now = new Date();\n const isToday = date.toDateString() === now.toDateString();\n \n if (isToday) {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n } else {\n return date.toLocaleDateString([], { \n month: 'short', \n day: 'numeric',\n hour: '2-digit', \n minute: '2-digit' \n });\n }\n };\n\n const getUserDisplayName = (userId: string) => {\n // Extract username from Matrix ID (@username:homeserver.com)\n const match = userId.match(/@([^:]+):/);\n return match ? match[1] : userId;\n };\n\n const getUserInitials = (userId: string) => {\n const displayName = getUserDisplayName(userId);\n return displayName.substring(0, 2).toUpperCase();\n };\n\n const getUserColor = (userId: string) => {\n // Generate a consistent color based on user ID\n let hash = 0;\n for (let i = 0; i < userId.length; i++) {\n hash = userId.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n const colors = [\n \"bg-red-500\", \"bg-blue-500\", \"bg-green-500\", \"bg-yellow-500\",\n \"bg-purple-500\", \"bg-pink-500\", \"bg-indigo-500\", \"bg-teal-500\"\n ];\n \n return colors[Math.abs(hash) % colors.length];\n };\n\n const renderMessageContent = (message: MatrixMessage) => {\n const { content } = message;\n \n switch (content.msgtype) {\n case \"m.text\":\n return (\n

{content.body}

\n {content.encrypted && (\n

\n \n {content.decryption_failed ? \"Decryption failed\" : \"Encrypted\"}\n

\n )}\n

\n );\n case \"m.emote\":\n return (\n

\n {getUserDisplayName(message.sender)} {content.body}\n {content.encrypted && (\n

\n \n Encrypted\n

\n )}\n

\n );\n case \"m.notice\":\n return (\n

\n {content.body}\n {content.encrypted && (\n

\n \n Encrypted\n

\n )}\n

\n );\n case \"m.image\":\n return (\n

\n {content.body && (\n

{content.body}

\n )}\n {content.encrypted && (\n

\n \n Encrypted\n

\n )}\n

\n );\n case \"m.file\":\n return (\n

\n \n {content.body || \"File\"}\n {content.encrypted && (\n \n )}\n

\n );\n default:\n return (\n

\n Unsupported message type: {content.msgtype}\n

\n );\n }\n };\n\n const groupMessagesByDate = (messages: MatrixMessage[]) => {\n const groups: { [date: string]: MatrixMessage[] } = {};\n \n messages.forEach(message => {\n const date = new Date(message.origin_server_ts).toDateString();\n if (!groups[date]) {\n groups[date] = [];\n }\n groups[date].push(message);\n });\n \n return groups;\n };\n\n const messageGroups = groupMessagesByDate(messages);\n\n if (messages.length === 0) {\n return (\n

\n \n

No messages yet

\n Be the first to send a message in this room! Start a conversation and connect with your community.\n

\n );\n }\n\n return (\n

\n {Object.entries(messageGroups).map(([date, dayMessages]) => (\n

\n {/* Date separator */}\n

\n {new Date(date).toLocaleDateString([], { \n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })}\n

\n\n {/* Messages for this date */}\n

\n {dayMessages.map((message, index) => {\n const isOwnMessage = message.sender === currentUserId;\n const prevMessage = index > 0 ? dayMessages[index - 1] : null;\n const showAvatar = !prevMessage || prevMessage.sender !== message.sender;\n const timeDiff = prevMessage ? message.origin_server_ts - prevMessage.origin_server_ts : 0;\n const showTime = showAvatar || timeDiff > 300000; // Show time if more than 5 minutes apart\n \n return (\n \n

\n {/* Avatar */}\n

\n {showAvatar && !isOwnMessage ? (\n

\n {getUserInitials(message.sender)}\n

\n ) : (\n

\n )}\n

\n\n {/* Message content */}\n

\n {showAvatar && (\n

\n \n {isOwnMessage ? 'You' : getUserDisplayName(message.sender)}\n \n \n {formatTime(message.origin_server_ts)}\n \n

\n )}\n \n

\n {renderMessageContent(message)}\n

\n \n {!showAvatar && showTime && (\n \n {formatTime(message.origin_server_ts)}\n \n )}\n

\n );\n })}\n

\n ))}\n \n

\n );\n}",[],[151,234,236],"d63017dc-3c36-11f0-8366-9e149126039e","MessageInput.tsx","642cb414-3c32-11f0-b43f-9e149126039e",57,["D",1748486666781],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface MessageInputProps {\n onSendMessage: (content: string) => void;\n encrypted?: boolean;\n encryptionReady?: boolean;\n}\n\nexport default function MessageInput({ onSendMessage, encrypted = false, encryptionReady = false }: MessageInputProps) {\n const [message, setMessage] = useState(\"\");\n const [sending, setSending] = useState(false);\n const textareaRef = useRef(null);\n\n useEffect(() => {\n // Auto-resize textarea but prevent scrolling\n if (textareaRef.current) {\n const textarea = textareaRef.current;\n textarea.style.height = 'auto';\n const newHeight = Math.min(textarea.scrollHeight, 150);\n textarea.style.height = `${newHeight}px`;\n textarea.style.overflowY = newHeight >= 150 ? 'auto' : 'hidden';\n }\n }, [message]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n const trimmedMessage = message.trim();\n if (!trimmedMessage || sending) return;\n\n setSending(true);\n try {\n await onSendMessage(trimmedMessage);\n setMessage(\"\");\n // Reset textarea height\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n }\n } catch (error) {\n console.error(\"Failed to send message:\", error);\n } finally {\n setSending(false);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n };\n\n const handlePaste = (e: React.ClipboardEvent) => {\n // Handle file uploads in the future\n const items = e.clipboardData?.items;\n if (items) {\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n if (item.type.indexOf(\"image\") !== -1) {\n // TODO: Handle image uploads\n console.log(\"Image paste detected - file uploads not implemented yet\");\n }\n }\n }\n };\n\n return (\n

\n {/* Encryption status bar */}\n {encrypted && (\n

\n \n \n {encryptionReady \n ? \"Messages in this room are end-to-end encrypted\" \n : \"Encryption enabled but not ready - messages will be sent as plaintext\"\n }\n \n

\n )}\n\n

\n {/* Message input */}\n

\n setMessage(e.target.value)}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n placeholder={encrypted ? \"Type an encrypted message...\" : \"Type a message...\"}\n disabled={sending}\n className=\"w-full px-5 py-4 pr-12 border border-gray-300 dark:border-gray-600 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none max-h-40 disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-colors text-base leading-relaxed overflow-hidden\"\n rows={1}\n style={{ minHeight: '52px' }}\n />\n \n {/* Character count for long messages */}\n {message.length > 500 && (\n

\n {message.length}/65536\n

\n )}\n

\n\n {/* Send button */}\n \n {sending ? (\n

\n ) : encrypted ? (\n \n ) : (\n \n )}\n \n \n\n {/* Help text */}\n

\n Press Enter to send, Shift+Enter for new line\n {message.length > 0 && (\n \n {message.length} characters\n \n )}\n

\n );\n}",[],[151,234,244],"043f0152-3c36-11f0-991b-9e149126039e","Login.tsx","d33020d6-3c31-11f0-9c84-9e149126039e",45,["D",1748486314556],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { UserSession, MatrixLoginResponse } from \"../../shared/types.ts\";\n\ninterface LoginProps {\n onLogin: (session: UserSession) => void;\n darkMode: boolean;\n onToggleDarkMode: () => void;\n}\n\nexport default function Login({ onLogin, darkMode, onToggleDarkMode }: LoginProps) {\n const [homeserver, setHomeserver] = useState(\"https://matrix.org\");\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n\n try {\n // Ensure homeserver URL is properly formatted\n const serverUrl = homeserver.startsWith(\"http\") ? homeserver : `https://${homeserver}`;\n \n const response = await fetch(\"/api/matrix/_matrix/client/r0/login\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Homeserver\": serverUrl,\n },\n body: JSON.stringify({\n type: \"m.login.password\",\n user: username,\n password: password,\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || `Login failed: ${response.status}`);\n }\n\n const loginData: MatrixLoginResponse = await response.json();\n \n const session: UserSession = {\n accessToken: loginData.access_token,\n userId: loginData.user_id,\n homeserver: serverUrl,\n deviceId: loginData.device_id,\n };\n\n onLogin(session);\n } catch (err) {\n console.error(\"Login error:\", err);\n setError(err instanceof Error ? err.message : \"Login failed\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n {/* Enhanced Dark mode toggle */}\n \n

\n {/* Sun icon */}\n \n \n {/* Moon icon */}\n \n

\n \n {/* Tooltip */}\n

\n Switch to {darkMode ? \"light\" : \"dark\"} mode\n

\n \n\n

\n \n

Matrix Client

\n Connect to the decentralized future\n

\n\n

\n {error && (\n

\n \n {error}\n

\n )}\n\n

\n \n Homeserver\n \n setHomeserver(e.target.value)}\n className=\"appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-all duration-200\"\n placeholder=\"https://matrix.org\"\n />\n

\n\n

\n \n Username\n \n setUsername(e.target.value)}\n className=\"appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-all duration-200\"\n placeholder=\"@username:matrix.org\"\n />\n

\n\n

\n \n Password\n \n setPassword(e.target.value)}\n className=\"appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm transition-all duration-200\"\n placeholder=\"Password\"\n />\n

\n\n

\n \n {loading ? (\n

\n Signing in...\n

\n ) : (\n

\n \n Sign in to Matrix\n

\n )}\n \n

\n\n

\n Don't have an account?{\" \"}\n \n Learn about Matrix\n \n

\n );\n}",[],[151,234,253],"739a5c44-3c37-11f0-b72e-9e149126039e","ChatView.tsx","40325fe6-3c32-11f0-9b5a-9e149126039e",62,["D",1748486930877],16,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport MessageList from \"./MessageList.tsx\";\nimport MessageInput from \"./MessageInput.tsx\";\nimport type { UserSession, MatrixRoom, MatrixMessage } from \"../../shared/types.ts\";\nimport { encryptionManager } from \"../../shared/encryption.ts\";\n\ninterface ChatViewProps {\n session: UserSession;\n room: MatrixRoom;\n}\n\nexport default function ChatView({ session, room }: ChatViewProps) {\n const [messages, setMessages] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [syncToken, setSyncToken] = useState(null);\n const [encryptionReady, setEncryptionReady] = useState(false);\n const syncIntervalRef = useRef(null);\n const currentRoomRef = useRef(null);\n\n useEffect(() => {\n // Initialize encryption\n initializeEncryption();\n \n // Clear messages when switching rooms\n if (currentRoomRef.current !== room.room_id) {\n setMessages([]);\n currentRoomRef.current = room.room_id;\n }\n \n loadMessages();\n startSync();\n\n return () => {\n if (syncIntervalRef.current) {\n clearInterval(syncIntervalRef.current);\n }\n };\n }, [room.room_id]);\n\n const initializeEncryption = async () => {\n try {\n await encryptionManager.initialize();\n setEncryptionReady(encryptionManager.isEnabled);\n } catch (error) {\n console.error(\"Failed to initialize encryption:\", error);\n setEncryptionReady(false);\n }\n };\n\n const loadMessages = async () => {\n try {\n setLoading(true);\n setError(\"\");\n\n const response = await fetch(\n `/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(room.room_id)}/messages?dir=b&limit=100`,\n {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n }\n );\n\n if (!response.ok) {\n throw new Error(`Failed to load messages: ${response.status}`);\n }\n\n const data = await response.json();\n \n const messageEvents = await Promise.all(\n data.chunk\n .filter((event: any) => {\n return (event.type === \"m.room.message\" && event.content?.body) || \n (event.type === \"m.room.encrypted\");\n })\n .reverse() // Reverse to show oldest first\n .map(async (event: any) => {\n // Handle encrypted messages\n if (event.type === \"m.room.encrypted\") {\n console.log(\"Processing encrypted message:\", event);\n \n try {\n // Extract ciphertext from the encrypted event\n let ciphertext = event.content.ciphertext;\n \n // If ciphertext is an object (Megolm format), extract the actual ciphertext\n if (typeof ciphertext === 'object' && ciphertext !== null) {\n // In real Matrix, this would be more complex device key handling\n ciphertext = JSON.stringify(ciphertext);\n }\n \n const decryptedBody = await encryptionManager.decryptMessage(\n ciphertext || JSON.stringify(event.content),\n room.room_id,\n event.sender\n );\n \n console.log(\"Successfully decrypted message\");\n \n return {\n ...event,\n type: \"m.room.message\",\n content: {\n msgtype: \"m.text\",\n body: decryptedBody,\n encrypted: true,\n },\n };\n } catch (error) {\n console.error(\"Failed to decrypt message:\", error);\n return {\n ...event,\n type: \"m.room.message\",\n content: {\n msgtype: \"m.text\",\n body: \"[🔒 Encrypted message - unable to decrypt]\",\n encrypted: true,\n decryption_failed: true,\n },\n };\n }\n }\n \n return event;\n })\n );\n \n // Remove duplicates based on event_id\n const uniqueMessages = messageEvents.filter((message: any, index: number, array: any[]) => \n array.findIndex(m => m.event_id === message.event_id) === index\n );\n \n console.log(`Loaded ${uniqueMessages.length} messages for room ${room.room_id}`);\n setMessages(uniqueMessages);\n } catch (err) {\n console.error(\"Error loading messages:\", err);\n setError(err instanceof Error ? err.message : \"Failed to load messages\");\n } finally {\n setLoading(false);\n }\n };\n\n const startSync = async () => {\n try {\n // Clear any existing sync interval\n if (syncIntervalRef.current) {\n clearInterval(syncIntervalRef.current);\n }\n\n // Get initial sync token if we don't have one\n if (!syncToken) {\n const syncResponse = await fetch(\"/api/matrix/_matrix/client/r0/sync?timeout=0\", {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (syncResponse.ok) {\n const syncData = await syncResponse.json();\n setSyncToken(syncData.next_batch);\n }\n }\n\n // Start polling for new messages\n syncIntervalRef.current = window.setInterval(async () => {\n try {\n const url = syncToken \n ? `/api/matrix/_matrix/client/r0/sync?since=${syncToken}&timeout=10000`\n : \"/api/matrix/_matrix/client/r0/sync?timeout=10000\";\n\n const syncResponse = await fetch(url, {\n headers: {\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n });\n\n if (syncResponse.ok) {\n const syncData = await syncResponse.json();\n setSyncToken(syncData.next_batch);\n\n // Check for new messages in current room\n if (syncData.rooms?.join?.[room.room_id]?.timeline?.events) {\n const newMessages = syncData.rooms.join[room.room_id].timeline.events\n .filter((event: any) => event.type === \"m.room.message\" && event.content?.body);\n\n if (newMessages.length > 0) {\n setMessages(prev => {\n // Prevent duplicates by checking event IDs\n const existingIds = new Set(prev.map(msg => msg.event_id));\n const uniqueNewMessages = newMessages.filter((msg: any) => !existingIds.has(msg.event_id));\n \n if (uniqueNewMessages.length > 0) {\n return [...prev, ...uniqueNewMessages];\n }\n return prev;\n });\n }\n }\n }\n } catch (error) {\n console.error(\"Sync error:\", error);\n }\n }, 10000); // Increased interval to 10 seconds to reduce API calls\n } catch (error) {\n console.error(\"Failed to start sync:\", error);\n }\n };\n\n const sendMessage = async (content: string) => {\n try {\n const txnId = Date.now().toString();\n \n // Determine if we should encrypt the message\n const shouldEncrypt = room.encrypted && encryptionReady;\n let messageContent: any;\n let messageType = \"m.room.message\";\n\n if (shouldEncrypt) {\n try {\n const encryptedContent = await encryptionManager.encryptMessage(content, room.room_id);\n messageContent = {\n algorithm: \"m.megolm.v1.aes-sha2\",\n ciphertext: encryptedContent,\n sender_key: \"placeholder_sender_key\",\n device_id: session.deviceId,\n session_id: \"placeholder_session_id\",\n };\n messageType = \"m.room.encrypted\";\n } catch (error) {\n console.error(\"Encryption failed, sending as plaintext:\", error);\n messageContent = {\n msgtype: \"m.text\",\n body: content,\n };\n }\n } else {\n messageContent = {\n msgtype: \"m.text\",\n body: content,\n };\n }\n \n // Optimistically add the message to the UI first\n const optimisticMessage: MatrixMessage = {\n event_id: `temp_${txnId}`,\n type: \"m.room.message\",\n room_id: room.room_id,\n sender: session.userId,\n content: {\n msgtype: \"m.text\",\n body: content,\n encrypted: shouldEncrypt,\n },\n origin_server_ts: Date.now(),\n };\n\n setMessages(prev => [...prev, optimisticMessage]);\n\n const response = await fetch(\n `/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(room.room_id)}/send/${messageType}/${txnId}`,\n {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${session.accessToken}`,\n \"X-Homeserver\": session.homeserver,\n },\n body: JSON.stringify(messageContent),\n }\n );\n\n if (!response.ok) {\n // Remove optimistic message on failure\n setMessages(prev => prev.filter(msg => msg.event_id !== `temp_${txnId}`));\n throw new Error(`Failed to send message: ${response.status}`);\n }\n\n const result = await response.json();\n \n // Replace optimistic message with real one\n setMessages(prev => prev.map(msg => \n msg.event_id === `temp_${txnId}` \n ? { ...msg, event_id: result.event_id }\n : msg\n ));\n\n } catch (error) {\n console.error(\"Error sending message:\", error);\n // You could show an error toast here\n }\n };\n\n const getRoomDisplayName = () => {\n if (room.name && room.name !== room.room_id) {\n return room.name;\n }\n if (room.canonical_alias) {\n return room.canonical_alias;\n }\n return room.room_id;\n };\n\n return (\n

\n {/* Header */}\n

\n {getRoomDisplayName()}\n

\n {room.topic && (\n

{room.topic}

\n )}\n

\n \n {/* Encryption status indicator */}\n {room.encrypted && (\n

\n \n \n {encryptionReady ? \"Encrypted\" : \"Encryption unavailable\"}\n \n

\n )}\n

\n \n \n \n

\n\n {/* Messages */}\n

\n {loading ? (\n

Loading messages...

\n ) : error ? (\n

\n \n

Failed to load messages

{error}

\n \n Try again\n \n

\n ) : (\n \n )}\n

\n\n {/* Message Input */}\n

\n \n

\n );\n}",[],[151,234,261],"dec57d84-3c35-11f0-b4d4-9e149126039e","App.tsx","47558a38-3c31-11f0-b20c-9e149126039e",44,["D",1748486251684],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport Login from \"./Login.tsx\";\nimport RoomList from \"./RoomList.tsx\";\nimport ChatView from \"./ChatView.tsx\";\nimport type { UserSession, MatrixRoom } from \"../../shared/types.ts\";\n\n// Theme management utilities\nconst getInitialTheme = () => {\n // Check localStorage first\n const savedTheme = localStorage.getItem(\"matrix_dark_mode\");\n if (savedTheme !== null) {\n return savedTheme === \"true\";\n }\n \n // Check system preference\n if (typeof window !== 'undefined' && window.matchMedia) {\n return window.matchMedia('(prefers-color-scheme: dark)').matches;\n }\n \n // Default to dark mode\n return true;\n};\n\nconst applyTheme = (isDark: boolean) => {\n const html = document.documentElement;\n if (isDark) {\n html.classList.add(\"dark\");\n } else {\n html.classList.remove(\"dark\");\n }\n localStorage.setItem(\"matrix_dark_mode\", isDark.toString());\n};\n\nexport default function App() {\n const [session, setSession] = useState(null);\n const [selectedRoom, setSelectedRoom] = useState(null);\n const [loading, setLoading] = useState(true);\n const [darkMode, setDarkMode] = useState(getInitialTheme);\n\n // Initialize theme on mount\n useEffect(() => {\n applyTheme(darkMode);\n }, []);\n\n // Check for existing session on load\n useEffect(() => {\n const savedSession = localStorage.getItem(\"matrix_session\");\n \n if (savedSession) {\n try {\n const parsedSession = JSON.parse(savedSession);\n setSession(parsedSession);\n } catch (error) {\n console.error(\"Failed to parse saved session:\", error);\n localStorage.removeItem(\"matrix_session\");\n }\n }\n \n setLoading(false);\n }, []);\n\n // Listen for system theme changes\n useEffect(() => {\n if (typeof window !== 'undefined' && window.matchMedia) {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n \n const handleChange = (e: MediaQueryListEvent) => {\n // Only auto-switch if user hasn't manually set a preference\n const savedTheme = localStorage.getItem(\"matrix_dark_mode\");\n if (savedTheme === null) {\n setDarkMode(e.matches);\n applyTheme(e.matches);\n }\n };\n\n mediaQuery.addEventListener('change', handleChange);\n return () => mediaQuery.removeEventListener('change', handleChange);\n }\n }, []);\n\n const handleLogin = (newSession: UserSession) => {\n setSession(newSession);\n localStorage.setItem(\"matrix_session\", JSON.stringify(newSession));\n };\n\n const handleLogout = () => {\n setSession(null);\n setSelectedRoom(null);\n localStorage.removeItem(\"matrix_session\");\n };\n\n const handleRoomSelect = (room: MatrixRoom) => {\n setSelectedRoom(room);\n };\n\n const toggleDarkMode = () => {\n const newDarkMode = !darkMode;\n setDarkMode(newDarkMode);\n applyTheme(newDarkMode);\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!session) {\n return ;\n }\n\n return (\n

\n {/* Sidebar */}\n

\n {/* Header */}\n

Matrix Client

{session.userId}

\n {/* Enhanced Dark mode toggle */}\n \n

\n {/* Sun icon */}\n \n \n {/* Moon icon */}\n \n

\n \n {/* Tooltip */}\n

\n {darkMode ? \"Light mode\" : \"Dark mode\"}\n

\n \n \n {/* Logout button */}\n \n \n \n {/* Tooltip */}\n

\n Logout\n

\n \n

\n\n {/* Room List */}\n

\n \n

\n\n {/* Main Content */}\n

\n {selectedRoom ? (\n \n ) : (\n

\n \n

Welcome to Matrix

\n Select a room from the sidebar to start chatting with your community. \n Your conversations are end-to-end encrypted and decentralized.\n

\n )}\n

\n );\n}",[],[151,234,270],"4755a9d2-3c31-11f0-b20c-9e149126039e",["D",1748484279629],[177,178,179,180,181,182],[151,234],["D",1748484255451],[176,183,184],[151],"67122f7e-3c32-11f0-b911-9e149126039e","index.ts",12,["D",1748484762370],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Matrix API proxy to handle CORS\napp.all(\"/api/matrix/*\", async c => {\n const path = c.req.path.replace(\"/api/matrix\", \"\");\n const homeserver = c.req.header(\"X-Homeserver\");\n \n if (!homeserver) {\n return c.json({ error: \"Missing X-Homeserver header\" }, 400);\n }\n\n const url = `${homeserver}${path}`;\n const method = c.req.method;\n \n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n \n // Forward authorization header if present\n const auth = c.req.header(\"Authorization\");\n if (auth) {\n headers[\"Authorization\"] = auth;\n }\n\n let body: string | undefined;\n if (method !== \"GET\" && method !== \"HEAD\") {\n body = await c.req.text();\n }\n\n try {\n const response = await fetch(url, {\n method,\n headers,\n body,\n });\n\n const responseData = await response.text();\n \n return new Response(responseData, {\n status: response.status,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization, X-Homeserver\",\n },\n });\n } catch (error) {\n console.error(\"Matrix API proxy error:\", error);\n return c.json({ error: \"Failed to proxy request\" }, 500);\n }\n});\n\n// Handle preflight requests\napp.options(\"/api/matrix/*\", c => {\n return new Response(null, {\n status: 200,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization, X-Homeserver\",\n },\n });\n});\n\nexport default app.fetch;",[],[157,285],["D",1748484247288],[174],[157],["D",1748484200184],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":57,"_102":103,"_104":27},{"_13":87,"_33":88,"_45":44,"_89":46,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":47,"_96":97},"ctx",{"_80":-5,"_125":332,"_333":334,"_335":336,"_337":27,"_338":27,"_339":27,"_340":25,"_341":-5,"_342":-7,"_343":-7,"_344":64,"_345":27,"_346":27,"_347":-5,"_348":27,"_349":27,"_350":27,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":88,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v63