{ e.currentTarget.style.display = "none"; }} />

{APP_DISPLAY_NAME}

Scan your UTS timetable and find shared free time

{onboardingStep ? (

Onboarding

{onboardingStep === "timetable" ? ( <>

Upload your timetable

Add a screenshot of your university timetable to get started. You need this before continuing.

{timetableError ? (

{timetableError}

) : null}

) : null} {onboardingStep === "visibility" ? ( <>

Who can see when you're on campus?

Choose your default visibility. You can update this later.

{[ { id: "everyone_uni", label: "Everyone at my uni" }, { id: "connections_only", label: "Only people I connect with" }, ].map((option) => { const isSelected = selectedVisibilityPreference === option.id; return ( ); })}

) : null} {onboardingStep === "suggested" ? ( <>

Suggested people to connect with

Connect with classmates to unlock richer overlap insights.

{suggestionsError ? (

{suggestionsError}

) : null} {suggestionsLoading ? (

Finding suggested classmates...

) : (suggestedConnections || []).length === 0 ? (

No suggestions right now. Invite friends or check back when more students join.

) : (

{(suggestedConnections || []).map((member) => { const isSending = Boolean(connectSendingById[member.id]); const isPending = Boolean(connectPendingById[member.id]) || Boolean(relationshipSignals.pending[member.id]); const overlapDay = (member.overlapCampusDays || [])[0]; return (

{!member.avatarUrl ? (member.displayName || member.name || "U").trim().charAt(0).toUpperCase() : null}

{member.displayName || member.name || "Student"}

{member.mutualConnectionsCount > 0 ? `${member.mutualConnectionsCount} mutual connection${ member.mutualConnectionsCount === 1 ? "" : "s" }` : "New to your network"} {overlapDay ? ` · also on campus ${overlapDay}` : ""}

); })}

)} ) : null}

) : null}

{!hasUploadedTimetable ? (

Add your timetable first

Upload a screenshot of your student calendar and Overlap UTS will turn it into structured JSON plus real blocks on the calendar.

AI OCR

{timetableError ? (

{timetableError} {debugPayload ? ( ) : null}

) : null} {uploadingTimetable || analyzingTimetable ? (

{analyzingTimetable ? TIMETABLE_STATUS_MESSAGES[statusMessageIndex] : timetableStatus || "Uploading your screenshot..."}

{uploadingTimetable && !analyzingTimetable ? "Sending your screenshot to the server…" : "Extracting class blocks from your image…"}

) : (

)}

) : (

{myTimetable?.imageUrl ? ( Uploaded timetable

) : null}

{showTimetableDetails ? "Weekly timetable synced" : "Timetable synced"}

{showTimetableDetails ? `${(myTimetable.events || []).length} classes saved as structured JSON` : `${(myTimetable.events || []).length} classes${ myTimetable?.warnings?.length ? ` · ${myTimetable.warnings.length} note${myTimetable.warnings.length === 1 ? "" : "s"}` : "" }`}

{showTimetableDetails ? ( <> {timetableStatus ? (

{timetableStatus}

) : null} {myTimetable?.warnings?.length ? (

{myTimetable.warnings[0]}

) : null}

{showJsonPreview ? (

                    {JSON.stringify(myTimetable.structured, null, 2)}

) : null} ) : null}

)}

{(displayMembers || []).map((member) => { const isSelected = (selectedUsers || []).includes(member.id); const memberCalendarColor = getUserCalendarColor(member.id); const isViewable = member.id !== currentUserId && ((scheduleSummaryByUser[member.id]?.manual || 0) > 0 || (scheduleSummaryByUser[member.id]?.timetable || 0) > 0); return (

toggleUserFilter(member.id)} style={{ width: 44, height: 44, borderRadius: "50%", border: `${isSelected ? 4 : 3}px solid ${memberCalendarColor}`, boxSizing: "border-box", background: member.avatarUrl ? `url(${member.avatarUrl}) center/cover` : "#eee", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, padding: 2, }} > {!member.avatarUrl ? ( ) : null}

{ e.stopPropagation(); openMemberView(member); }} style={{ fontSize: 11, fontWeight: isSelected ? 700 : 500, color: member.id === currentUserId || isViewable ? "#0F4BEB" : "#111827", maxWidth: 68, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textDecoration: member.id === currentUserId || isViewable ? "underline" : "none", }} > {(member.displayName || "User").split(" ")[0]}

); })} {(displayMembers || []).length === 1 ? (

{ if (typeof share === "function") share(); }} style={{ display: "flex", alignItems: "center", padding: "0 12px", background: "#f5f5f5", borderRadius: 20, fontSize: 13, color: "#666", height: 44, marginTop: 3, cursor: "pointer", }} > Invite friends to sync

) : null}

{showMembers ? (

Members ({(displayMembers || []).length})

{(displayMembers || []).map((member) => (

{!member.avatarUrl ? (member.isDemoObj ? "🤖" : "👤") : null}

openMemberView(member)} style={{ fontWeight: 700, fontSize: 14, color: "#111827", cursor: "pointer", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", }} > {member.displayName || member.name || "User"} {member.handle ? ( @{member.handle} ) : null}

{memberScheduleCopy(member.id)} {member.role === "owner" ? ( Owner ) : null}

{member.handle && !member.isDemoObj ? ( ) : null}

))}

) : null}

{(visibleDays || []).map((day) => (

{day.label}

{day.date.getDate()}

))}

{Array.from({ length: (days || []).length - 2 }, (_, index) => (

setVisibleStart(index)} style={{ width: 6, height: 6, borderRadius: "50%", background: index === visibleStart ? "#0F4BEB" : "#ddd", transition: "background 0.2s", cursor: "pointer", }} /> ))}

{ touchStartRef.current = { x: event.touches[0].clientX, y: event.touches[0].clientY, }; }} onTouchEnd={(event) => { if (!touchStartRef.current) return; const dx = event.changedTouches[0].clientX - touchStartRef.current.x; const dy = event.changedTouches[0].clientY - touchStartRef.current.y; if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) { if (dx < 0 && visibleStart < (days || []).length - 3) { setVisibleStart((prev) => prev + 1); } if (dx > 0 && visibleStart > 0) { setVisibleStart((prev) => prev - 1); } } touchStartRef.current = null; }} >

{Array.from({ length: TOTAL_HOURS }).map((_, index) => (

{formatHourLabel(START_HOUR + index)}

))}

{(visibleDays || []).map((day, columnIndex) => { const dayEvents = (allCalendarEvents || []).filter( (event) => event.dayOffset === day.offset && (selectedUsers || []).includes(event.userId), ); const overlapLayoutByEventId = getOverlappingEventLayout(dayEvents); const freeBlocks = getFreeTimeBlocks(day.offset, selectedUsers); return (

{(selectedUsers || []).length > 1 ? (freeBlocks || []).map((block, blockIndex) => (

{block.end - block.start >= 1 ? ( MATCH ) : null}

)) : null} {(dayEvents || []).map((event) => { const top = Math.max(0, (event.start - START_HOUR) * HOUR_HEIGHT); const height = (event.end - Math.max(event.start, START_HOUR)) * HOUR_HEIGHT; if (event.end <= START_HOUR || event.start >= END_HOUR) return null; const isMine = event.userId === currentUserId; const isManual = event.sourceType !== "timetable"; const eventBg = getUserCalendarColor(event.userId); const eventFg = getReadableTextColor(eventBg); const layout = overlapLayoutByEventId[event.id] || { columnIndex: 0, columnCount: 1, }; const left = `calc(${(layout.columnIndex / layout.columnCount) * 100}% + 2px)`; const right = `calc(${ ((layout.columnCount - layout.columnIndex - 1) / layout.columnCount) * 100 }% + 2px)`; return (

{ if (!isManual) { setActiveTimetableEvent(event); return; } if (isMine) handleDelete(event.id); }} style={{ position: "absolute", top, height, left, right, borderRadius: 8, background: eventBg, color: eventFg, padding: "4px 6px", fontSize: 11, overflow: "hidden", zIndex: 2 + layout.columnIndex, opacity: (selectedUsers || []).length > 1 ? 0.88 : 1, boxShadow: "0 2px 6px rgba(0,0,0,0.1)", cursor: !isManual || isMine ? "pointer" : "default", border: event.isDemo ? "1px dashed rgba(255,255,255,0.5)" : "none", animation: "snapIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)", }} >

{event.title}

{height > 30 ? (

{floatToTimeStr(event.start)} - {floatToTimeStr(event.end)}

) : null} {height > 48 && event.subtitle ? (

{event.subtitle}

) : null} {event.isDemo ? (

DEMO

) : null} {isMine && isManual ? (

) : null}

); })}

{isAdding ? (

setIsAdding(false)} >

event.stopPropagation()} >

Add Busy Time

setNewEvent({ ...newEvent, title: event.target.value }) } style={{ width: "100%", padding: "16px", fontSize: 16, borderRadius: 12, border: "1px solid #ddd", marginBottom: 16, boxSizing: "border-box", background: "#FAFAFA", }} autoFocus />

{(days || []).map((day) => ( ))}

Start Time setNewEvent({ ...newEvent, startStr: event.target.value }) } style={{ width: "100%", padding: "14px", fontSize: 16, borderRadius: 12, border: "1px solid #ddd", boxSizing: "border-box", background: "#FAFAFA", }} />

End Time setNewEvent({ ...newEvent, endStr: event.target.value }) } style={{ width: "100%", padding: "14px", fontSize: 16, borderRadius: 12, border: "1px solid #ddd", boxSizing: "border-box", background: "#FAFAFA", }} />

) : null} {isTimetableBusy ? (

{uploadingTimetable && !analyzingTimetable ? "Uploading screenshot" : "Processing your timetable"}

{analyzingTimetable ? TIMETABLE_STATUS_MESSAGES[statusMessageIndex] : timetableStatus || "Uploading your screenshot..."}

Please wait and don't close the app. We're saving your JSON and building calendar blocks now.

) : null} {comparisonMember ? (

setComparisonUserId("")} >

event.stopPropagation()} >

{!comparisonMember.avatarUrl ? "👤" : null}

{comparisonMember.displayName}

Hour-by-hour compare for {comparisonDay.fullLabel}

{comparisonMember.handle && typeof openProfile === "function" ? ( ) : null}

Free together: {summarizeFreeBlocks(comparisonFreeBlocks)}

{(days || []).map((day) => ( ))}

You

{(comparisonMember.displayName || "Them").split(" ")[0]}

{(comparisonFreeBlocks || []).map((block, index) => (

))} {Array.from({ length: TOTAL_HOURS }).map((_, index) => (

))}

{Array.from({ length: TOTAL_HOURS }).map((_, index) => (

{formatHourLabel(START_HOUR + index)}

))}

{[currentUserId, comparisonMember.id].map((userId, columnIndex) => (

{(comparisonEventsByUser[userId] || []).map((event) => { const top = Math.max(0, (event.start - START_HOUR) * HOUR_HEIGHT); const height = (event.end - Math.max(event.start, START_HOUR)) * HOUR_HEIGHT; if (event.end <= START_HOUR || event.start >= END_HOUR) return null; const isMine = userId === currentUserId; const eventBg = getUserCalendarColor(userId); const eventFg = getReadableTextColor(eventBg); return (

{ if (event.sourceType === "timetable") setActiveTimetableEvent(event); }} style={{ position: "absolute", top, left: 8, right: 8, height, borderRadius: 16, background: eventBg, color: eventFg, padding: "10px 10px 8px", boxSizing: "border-box", overflow: "hidden", boxShadow: "0 8px 18px rgba(17,24,39,0.12)", cursor: event.sourceType === "timetable" ? "pointer" : "default", }} >

{event.title}

{height > 34 ? (

{floatToTimeStr(event.start)} - {floatToTimeStr(event.end)}

) : null} {height > 54 && event.subtitle ? (

{event.subtitle}

) : null}

); })} {(comparisonEventsByUser[userId] || []).length === 0 ? (

Free this day

) : null}

))}

) : null} {activeTimetableEvent ? (

setActiveTimetableEvent(null)} >

event.stopPropagation()} >

{!getAvatarUrl(activeTimetableOwner) ? "👤" : null}

{activeTimetableEvent.title}

{(activeTimetableOwner?.displayName || "Student") + "'s timetable"}

{activeTimetableDay || "Timetable slot"}

{floatToTimeStr(activeTimetableEvent.start)} - {floatToTimeStr(activeTimetableEvent.end)}

{activeTimetableEvent.timetableMeta?.type ? (

{activeTimetableEvent.timetableMeta.type}

) : null}

Owner

{activeTimetableOwner?.displayName || "Student"}

{activeTimetableEvent.timetableMeta?.location ? (

Location

{activeTimetableEvent.timetableMeta.location}

) : null} {activeTimetableEvent.timetableMeta?.instructor ? (

Instructor

{activeTimetableEvent.timetableMeta.instructor}

) : null} {activeTimetableEvent.timetableMeta?.notes ? (

Notes

{activeTimetableEvent.timetableMeta.notes}

) : null}

) : null} {showDebugModal && debugPayload ? (

setShowDebugModal(false)} >

event.stopPropagation()} >

Debug response

Raw AI output and fallback parsing details

              {JSON.stringify(debugPayload, null, 2)}

) : null}

); }