[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_293":294,"_295":296},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":49,"_120":121,"_122":25,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":25,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":49},"version",71,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","shared/encryption.ts","latestPath","fileId","6cf2c06c-3c36-11f0-8b8e-9e149126039e","name","encryption.ts","fileType","script","content","// 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",1748487339692],"branchVersion","branchId","17fae508-3c31-11f0-8df2-9e149126039e","id","17faaeb2-3c31-11f0-8df2-9e149126039e","matrix",["D",1748484200184],"deletedAt","legacyEnvVars",false,"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",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":56,"_101":102,"_103":49},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"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",{"_43":44,"_32":45,"_38":289,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":25,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":290,"_81":291,"_83":292,"_85":49},"tree",[172,174,184,186],"files",[172,173,174,175,176,177,178,179,180,181,182,183,184,185,186],"counts",{"_161":63,"_162":163,"_164":63,"_165":166,"_167":168},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":155,"_32":156,"_30":157,"_134":-5,"_41":42,"_40":158,"_136":25,"_38":159,"_13":63,"_34":147,"_36":-5,"_24":49,"_140":-5,"_27":160},{"_43":149,"_32":150,"_30":151,"_134":-5,"_41":42,"_40":152,"_136":25,"_38":153,"_13":63,"_34":147,"_36":-5,"_24":49,"_140":-5,"_27":154},{"_43":142,"_32":143,"_30":144,"_134":-5,"_41":42,"_40":145,"_136":25,"_38":146,"_13":63,"_34":147,"_36":-5,"_24":49,"_140":-5,"_27":148},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":49,"_38":137,"_13":138,"_34":20,"_36":139,"_24":49,"_140":-5,"_27":141},"f43cce0e-3c37-11f0-bdbd-9e149126039e","README.md","2450a964-3c31-11f0-a89b-9e149126039e","parentId",67,"latest",["D",1748487146692],10,"# 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 now a **working simplified implementation** for demonstration purposes. \n\n**How it works:**\n- Only encrypts messages sent by our client (prefixed with `MATRIX_ENCRYPTED:`)\n- Uses Web Crypto API with AES-GCM encryption\n- Generates room-specific encryption keys\n- Automatically detects and decrypts our own encrypted messages\n- Leaves other messages (from other clients) as plaintext\n- Visual indicators show which messages are encrypted\n\n**Key Features:**\n- ✅ **Working encryption/decryption** for messages sent by this client\n- ✅ **Visual feedback** with lock icons and status indicators \n- ✅ **Debug tools** to test encryption functionality\n- ✅ **Graceful fallback** when encryption fails\n- ✅ **Room-specific keys** for better security\n\n**Testing Encryption:**\n1. Join an encrypted room (shows green \"Encrypted\" badge)\n2. Send a message - it will be encrypted before sending to Matrix\n3. Your encrypted messages show a lock icon\n4. Use the debug button (🔍) in encrypted rooms to test encryption\n5. Check browser console for detailed encryption logs\n\n**Production Considerations:**\n- This is a **demonstration only** - use official Matrix SDK for production\n- Real Matrix encryption uses Olm/Megolm protocols\n- Proper key verification and device management needed\n- Cross-signing and key backup required for production use","label",[132],"2ad6446a-3c31-11f0-ab74-9e149126039e","shared","5d578e7c-5ed0-428e-a8e4-93e4b8ae6c74",2,["D",1748484231814],"directory",[143],"38eca1fc-3c31-11f0-861b-9e149126039e","frontend","61ed27d5-bb56-4515-8699-6e4311eb10d5",4,["D",1748484255451],[150],"340ec444-3c31-11f0-883d-9e149126039e","backend","f0c23a58-f8e8-4cde-afe9-1c855e951c49",3,["D",1748484247288],[156],"pulls","branches",1,"forks","envVars",{"_169":63,"_171":63},"connections",{"_169":63,"_170":63},"count","unfilledCount","emptyCount",{"_43":155,"_32":156,"_30":157,"_134":-5,"_41":42,"_40":158,"_136":25,"_38":286,"_13":63,"_34":147,"_36":-5,"_24":49,"_140":-5,"_188":287,"_27":288},{"_43":278,"_32":279,"_30":58,"_134":157,"_41":42,"_40":280,"_136":49,"_38":281,"_13":163,"_34":282,"_36":283,"_24":49,"_140":45,"_188":284,"_27":285},{"_43":149,"_32":150,"_30":151,"_134":-5,"_41":42,"_40":152,"_136":25,"_38":275,"_13":63,"_34":147,"_36":-5,"_24":49,"_140":-5,"_188":276,"_27":277},{"_43":271,"_32":228,"_30":221,"_134":151,"_41":42,"_40":242,"_136":25,"_38":272,"_13":63,"_34":147,"_36":-5,"_24":49,"_140":-5,"_188":273,"_27":274},{"_43":263,"_32":264,"_30":265,"_134":221,"_41":42,"_40":266,"_136":49,"_38":267,"_13":145,"_34":35,"_36":268,"_24":49,"_140":-5,"_188":269,"_27":270},{"_43":254,"_32":255,"_30":256,"_134":221,"_41":42,"_40":257,"_136":49,"_38":258,"_13":259,"_34":35,"_36":260,"_24":49,"_140":-5,"_188":261,"_27":262},{"_43":246,"_32":247,"_30":248,"_134":221,"_41":42,"_40":249,"_136":49,"_38":250,"_13":145,"_34":35,"_36":251,"_24":49,"_140":-5,"_188":252,"_27":253},{"_43":237,"_32":238,"_30":239,"_134":221,"_41":42,"_40":240,"_136":49,"_38":241,"_13":242,"_34":35,"_36":243,"_24":49,"_140":-5,"_188":244,"_27":245},{"_43":229,"_32":230,"_30":231,"_134":221,"_41":42,"_40":232,"_136":49,"_38":233,"_13":158,"_34":35,"_36":234,"_24":49,"_140":-5,"_188":235,"_27":236},{"_43":218,"_32":219,"_30":220,"_134":221,"_41":42,"_40":222,"_136":49,"_38":223,"_13":224,"_34":35,"_36":225,"_24":49,"_140":-5,"_188":226,"_27":227},{"_43":210,"_32":211,"_30":212,"_134":151,"_41":42,"_40":213,"_136":49,"_38":214,"_13":145,"_34":20,"_36":215,"_24":49,"_140":-5,"_188":216,"_27":217},{"_43":202,"_32":203,"_30":204,"_134":151,"_41":42,"_40":205,"_136":25,"_38":206,"_13":63,"_34":35,"_36":207,"_24":49,"_140":-5,"_188":208,"_27":209},{"_43":142,"_32":143,"_30":144,"_134":-5,"_41":42,"_40":145,"_136":25,"_38":199,"_13":63,"_34":147,"_36":-5,"_24":49,"_140":-5,"_188":200,"_27":201},{"_43":191,"_32":192,"_30":193,"_134":144,"_41":42,"_40":194,"_136":49,"_38":195,"_13":145,"_34":35,"_36":196,"_24":49,"_140":-5,"_188":197,"_27":198},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":49,"_38":187,"_13":138,"_34":20,"_36":139,"_24":49,"_140":-5,"_188":189,"_27":190},["D",1748487146692],"children",[],[132],"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}",[],[143,192],["D",1748484231814],[185],[143],"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();",[],[150,203],"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",[],[150,211],"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}",[],[150,228,219],"components","43a13d22-3c38-11f0-b655-9e149126039e","MessageList.tsx","57581ef4-3c32-11f0-8585-9e149126039e",69,["D",1748487279889],"/** @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 // Check if this is an encrypted message that couldn't be decrypted\n const isEncryptedButNotDecrypted = content.body.startsWith(\"MATRIX_ENCRYPTED:\");\n \n switch (content.msgtype) {\n case \"m.text\":\n return (\n

\n {isEncryptedButNotDecrypted ? (\n

\n \n 🔒 Encrypted message - key not available\n {\n console.log(\"🔍 Encrypted message details:\");\n console.log(\"Full message:\", content.body);\n try {\n const encryptedData = content.body.substring(\"MATRIX_ENCRYPTED:\".length);\n const payload = JSON.parse(atob(encryptedData));\n console.log(\"Payload:\", payload);\n } catch (e) {\n console.log(\"Failed to parse:\", e);\n }\n }}\n className=\"text-xs text-blue-500 hover:text-blue-600 underline\"\n title=\"Debug this encrypted message\"\n >\n debug\n \n

\n ) : (\n

{content.body}

\n )}\n {content.encrypted && !isEncryptedButNotDecrypted && (\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}",[],[150,228,230],"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}",[],[150,228,238],"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}",[],[150,228,247],"e98ba9a8-3c37-11f0-8bd0-9e149126039e","ChatView.tsx","40325fe6-3c32-11f0-9b5a-9e149126039e",66,["D",1748487128753],19,"/** @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 })\n .reverse() // Reverse to show oldest first\n .map(async (event: any) => {\n // Try to decrypt the message body\n try {\n const decryptedBody = await encryptionManager.decryptMessage(\n event.content.body,\n room.room_id,\n event.sender\n );\n \n // Check if the message was actually encrypted by us\n const wasEncrypted = event.content.body.startsWith(\"MATRIX_ENCRYPTED:\");\n \n return {\n ...event,\n content: {\n ...event.content,\n body: decryptedBody,\n encrypted: wasEncrypted,\n },\n };\n } catch (error) {\n console.error(\"Error processing message:\", error);\n return event; // Return original message if decryption fails\n }\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 messageBody = content;\n let wasEncrypted = false;\n\n if (shouldEncrypt) {\n try {\n const encryptionResult = await encryptionManager.encryptMessage(content, room.room_id);\n messageBody = encryptionResult.encrypted;\n wasEncrypted = encryptionResult.isEncrypted;\n \n if (wasEncrypted) {\n console.log(\"🔒 Message encrypted for sending\");\n } else {\n console.log(\"🔓 Encryption failed, sending as plaintext\");\n }\n } catch (error) {\n console.error(\"❌ Encryption failed, sending as plaintext:\", error);\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, // Show original content in UI\n encrypted: wasEncrypted,\n },\n origin_server_ts: Date.now(),\n };\n\n setMessages(prev => [...prev, optimisticMessage]);\n\n // Send the message (encrypted or plaintext)\n const response = await fetch(\n `/api/matrix/_matrix/client/r0/rooms/${encodeURIComponent(room.room_id)}/send/m.room.message/${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({\n msgtype: \"m.text\",\n body: messageBody, // Send encrypted content to server\n }),\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 console.log(\"📤 Message sent successfully\");\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 {/* Debug encryption button */}\n {room.encrypted && (\n {\n console.log(\"🔍 Encryption Debug Info:\");\n console.log(\"- Encryption enabled:\", encryptionManager.isEnabled);\n console.log(\"- Encryption ready:\", encryptionReady);\n console.log(\"- Room encrypted:\", room.encrypted);\n console.log(\"- Room ID:\", room.room_id);\n \n // Test encryption/decryption\n const testMessage = \"Test encryption message\";\n encryptionManager.encryptMessage(testMessage, room.room_id)\n .then(result => {\n console.log(\"- Test encryption result:\", result);\n if (result.isEncrypted) {\n return encryptionManager.decryptMessage(result.encrypted, room.room_id, session.userId);\n }\n return \"Not encrypted\";\n })\n .then(decrypted => {\n console.log(\"- Test decryption result:\", decrypted);\n })\n .catch(error => {\n console.error(\"- Test encryption/decryption failed:\", error);\n });\n }}\n className=\"p-2 text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors\"\n title=\"Debug encryption\"\n >\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}",[],[150,228,255],"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}",[],[150,228,264],"4755a9d2-3c31-11f0-b20c-9e149126039e",["D",1748484279629],[176,177,178,179,180,181],[150,228],["D",1748484255451],[175,182,183],[150],"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;",[],[156,279],["D",1748484247288],[173],[156],["D",1748484200184],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":56,"_101":102,"_103":49},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_124":326,"_327":328,"_329":330,"_331":49,"_332":49,"_333":49,"_334":25,"_335":-5,"_336":-7,"_337":-7,"_338":63,"_339":49,"_340":49,"_341":-5,"_342":49,"_343":49,"_344":49,"_345":-5},"ENV",{"_297":298,"_299":300,"_301":87,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325},"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 · v71