Desktop Portfolio | Kevin Hyun Ho Kim

Each organization needed to manage its AI bots, documents, and users, and have those settings take effect in conversations.

Scope from administration to conversations I needed to align hardcoded frontend model lists with the server’s supported models and connect administration to execution so the user-selected model actually took effect in conversations.

Organization, bot, and document interfaces I built organization trees, user assignment, bot settings, and document access controls. React Query owns server reads and mutations, while Zustand holds selections and view state.

Connecting the model catalog to execution I consolidated model options around the backend catalog and added a model-registration interface and Spring API. I also fixed model selection so the server validates the requested model against its active catalog and applies it to execution.

Administration settings reflected in conversations Administrators can manage organization-specific bots and documents, register supported models, and run conversations in the same platform. The model selected in the frontend now matches the server execution setting.

AI responses included text, charts, tool status, and progress updates. The interface needed to distinguish temporary execution state from answer content while keeping long responses readable.

Separating answers from execution state I agreed on SSE event rules with the backend and mapped generation, MCP execution, completion, and errors to interface states. Previous streams also needed to stop when the user cancelled or changed conversations.

SSE parsing and content-specific rendering I separated SSE event parsing from accumulated JSON interpretation and routed text, images, links, and charts to their renderers. Long Markdown is split into blocks while preserving code fences, tables, and lists.

Temporary status and final results I kept tool status and progress separate from the answer body. Stage descriptions accumulate in order, while each tool’s progress replaces its previous value. A final event clears temporary state and displays the completed content and charts.

Coordinating updates and reading position I batched interface updates with requestAnimationFrame. ResizeObserver measures the latest question and answer so a shrinking spacer preserves the question position until the answer fills the viewport. AbortController stops the old stream on a conversation change.

Execution and results visible in one conversation Users can read their question during generation, follow tool execution, and view the final chart and response in the same conversation. I verified state transitions and cleanup for generation, completion, cancellation, and errors.

Fonts, charts, and editors added to initial loading costs. The document editor also grew after server rendering and pushed settings and the save button down the page.

Separating loading costs from layout shifts I reviewed pages to distinguish resources required at startup from those that could load later. The document editor needed consistent dimensions before and after client initialization.

Font subsets and deferred feature loading I split Pretendard into a common Korean character subset and a fallback loaded for other characters. Dashboard charts and the prompt editor use next/dynamic to leave the initial loading path.

Matching server and client editor dimensions I gave the document editor a fixed height and internal scrolling for long content. Matching its server-rendered and initialized heights keeps settings and the save button in place.

Approximately 54% less initial data transfer Recorded page checks showed initial transfer size falling from 2.8MB to approximately 1.3MB, an approximate 54% reduction calculated from those rounded values.

Document-editor CLS reduced from 0.225 to 0 A local Lighthouse check of the document-editor page recorded Cumulative Layout Shift (CLS) falling from 0.225 to 0.

Administration and conversation screens needed consistent UI and repeatable checks of shared component appearance and behavior as customer-specific features changed.

Consistent UI and repeatable change checks Colors and component usage varied across screens. The project needed common standards and a browser-based environment to repeatedly check modal and input states.

Shared components and automated tests I defined color, typography, and theme tokens and documented shared component states and usage in Storybook. I connected interaction tests to Vitest and Playwright and built PR CI to run typechecking, lint, component tests, and a production build.

Fixing issues found in Storybook accessibility checks I fixed color-contrast issues identified in Storybook accessibility checks using text-specific color tokens. File-delete buttons received accessible names including the filename so their purpose could be distinguished.

Error-badge text contrast improved from 3.76:1 to 6.47:1 Based on the text and background color values, error-badge contrast improved from 3.76:1 to 6.47:1, meeting the WCAG AA minimum of 4.5:1 for normal text. Shared component states, usage guidance, and automated test results are available through Storybook and PRs.