Desktop Portfolio | Kevin Hyun Ho Kim

Agents needed to follow transcripts during their calls, while administrators needed to review several ongoing consultations together. I reflected call start, call end, and connection changes in the interface while preserving the conversation during recovery.

• Call detection and live transcript delivery While waiting, the interface polls for the current call every second. When a call starts, it stops polling and subscribes to call-specific SSE. Polling resumes after the call ends or connection recovery is stopped so the next call can be detected.

• Updating partial transcripts and applying final utterances I updated in-progress text in real time as PARTIAL results arrived and replaced it with confirmed text when the server returned FINAL results after ITN and other post-processing. I ordered confirmed utterances by their start times to preserve the conversation flow even when post-processing results arrived out of order. During reconnection, confirmed text stays visible until a server snapshot reconciles the accumulated utterances and current in-progress text.

• Shared components designed for maintainability To improve maintainability across agent and administrator screens, I split the transcript interface into shared components for the card structure, search, conversation list and scrolling, analysis results, and connection notices. Shared hooks centralize transcript delivery and search logic so changes can be made in one place, while each screen composes its role-specific call information and additional features.

• Connection recovery and guidance based on the cause I implemented bounded automatic reconnection for temporary communication failures and token refresh followed by reconnection when authentication expires. The interface stops retrying and displays a notice when access is denied or the call cannot be found. I also configured the connection to remain open when switching tabs to avoid unnecessary reconnections.

I implemented screens for agents to follow transcripts from call start to end and for administrators to monitor several consultations together. Confirmed text remains visible during reconnection so users can continue reviewing the conversation while waiting for recovery.

After a call, agents needed to review the classification and summary produced by AI and revisit past conversations alongside their recordings. I connected post-call analysis review, consultation history search, and sentence-level recording playback in the interface.

• Separating original AI output from saved final results Classification and summary results can be revised after AI generation, so I kept the original output separate from the saved final results. I displayed AI results received over SSE immediately, then fetched saved results from the detail API when analysis ended.

• Handling missed analysis-completion events If the connection ended after the call without delivering an analysis-completion event, the interface retrieved results through the detail API. Failed requests preserve the existing display and use bounded retries.

• Linking transcript sentences to recording timestamps Selecting a sentence in consultation history seeks the recording to that utterance’s start time. The interface highlights the current utterance during playback and stops automatic following when users explore earlier speech themselves.

I enabled users to distinguish original AI output from saved final results after a call and to review past conversations alongside their recordings in consultation history.

Consultation work across several tabs required handling overlapping token-refresh requests and idle logout caused by another tab during an active call. I coordinated authentication state across tabs and incorporated actual call state into session management.

• Coordinating refresh requests and sharing results I serialized refresh requests across tabs with Web Lock and distributed refreshed Access Tokens through BroadcastChannel. Receiving tabs apply the token without making a separate refresh request.

• Blocking token application after logout begins Tabs that have started logging out reject late refresh responses and tokens from other tabs. Comparing expiration times also prevents older tokens from replacing the current authentication state.

• Respecting call state in idle handling I synchronized activity timing and logout across tabs and paused the inactivity timer during active calls. Network and server errors are separated from invalid authentication, correcting paths where temporary communication failures could propagate into logout across tabs.

I synchronized authentication refresh and logout across tabs and paused idle logout during active calls. I also blocked late responses from restoring authentication state after logout had begun.