--- ui_doc_type: component component_id: proto-socket-diagnostics status: 구현됨 source_evidence: - type: code path: apps/client/lib/src/features/workspaces/presentation/workspace_home_page.dart notes: _buildProtoSocketDiagnosticsSection과 _buildDiagnosticsChip 구현. - type: code path: apps/client/lib/src/integrations/proto_socket/proto_socket_lifecycle.dart notes: ProtoSocketLifecycle diagnostics stream과 state model. - type: docs path: README.md notes: proto-socket client-core 통신과 PROTO_SOCKET 환경 경계 설명. - type: user path: null notes: agent-ui 생성 요청. --- # Proto-Socket Diagnostics Component ID: `proto-socket-diagnostics` Status: `구현됨` ## Source Evidence | Type | Path | Notes | |------|------|-------| | code | `apps/client/lib/src/features/workspaces/presentation/workspace_home_page.dart` | _buildProtoSocketDiagnosticsSection과 _buildDiagnosticsChip 구현. | | code | `apps/client/lib/src/integrations/proto_socket/proto_socket_lifecycle.dart` | ProtoSocketLifecycle diagnostics stream과 state model. | | docs | `README.md` | proto-socket client-core 통신과 PROTO_SOCKET 환경 경계 설명. | | user | 없음 | agent-ui 생성 요청. | ## Purpose Workspace screen에서 proto-socket 연결 상태와 최근 envelope diagnostics를 non-secret chip 묶음으로 보여준다. ## Used By - `workspace-home`: `workspace-home.proto-socket-diagnostics` ## Anatomy - Section heading - Diagnostics container - State chip - Connection id chip - Protocol version chip - Channel chip - Action chip - Error code chip - Timestamp chip ## Variants - default: lifecycle이 제공된 workspace detail 안에서 표시 ## States - disconnected - connecting - connected - failed - loading: diagnostics stream initial data 사용 - empty: diagnostics value가 없으면 `n/a` 또는 `none`을 표시한다. - error: error code가 있으면 red accent를 사용한다. - disabled: lifecycle이 없으면 component를 render하지 않는다. ## Rules - lifecycle이 없으면 빈 widget으로 빠진다. - raw transport exception이나 secret endpoint detail은 표시하지 않는다. - state color는 disconnected, connecting, connected, failed에 맞춰 구분한다. ## Decision History - 2026-06-24: 구현된 proto-socket diagnostics section을 component로 등록했다.