프런트엔드 규칙
공유 시각 규칙, 내비게이션, 실시간 증거와 접근성을 설명합니다.
기본 app/web 진입점은 연결된 뷰어이며 백엔드 명세나 데모가 아닙니다. 별도 데모
화면으로 실제 실행·승인 동작을 입증할 수 없습니다. 페이지 소유권은
UX 내비게이션, 서비스 경계는 아키텍처를 따릅니다.
스타일 전용 추상화가 실행 동작을 소유하지 않게 합니다.
로컬 Sidebar App은 명시적인 런타임 시작 후 같은 연결형 React 뷰어를 렌더링하며 설치·중지 상태는 격리된 컴패니언 화면에서 처리합니다. 번들 진입점은 API 읽기·쓰기, 범위별 실시간 변경과 바이너리 결과물에 앱 전용 MCP 연결을 사용합니다. 폰트와 아이콘은 인라인으로 포함하며 중첩 iframe이나 브라우저 네트워크 권한이 필요하지 않습니다. 독립 웹 진입점은 HTTP와 기본 SSE를 유지합니다. 수명주기, 접근 경계, 크기 제한과 호스트 검증은 App Page 설치 계약을 따릅니다.
전체 앱과 채팅 결과
GPT 안의 뷰어가 에이전트 작업 관찰, 증거 검토, 실행 승인과 테스트 환경 관리의 주요 경험입니다. 독립 브라우저와 Global App Page는 프로젝트·워크트리 탐색, 파일·Git 검사, 테스트 카탈로그, 환경·의존성, 프로젝트·전역 설정을 공유합니다. 기록 없이 앱을 열면 프로젝트 탐색이나 프로젝트 연결 화면이 표시됩니다. 수동 Git 쓰기와 게시는 에이전트가 담당하며 뷰어는 Uncommitted·Merge·PR·Fetch 작업을 제공하지 않습니다. 제품 범위와 Git 작업을 참고하세요.
채팅 MCP는 웹 검토 경로와 함께 텍스트 및 구조화된 근거를 반환하며 인라인 카드를 표시하지 않습니다. 정확한 /?page=review&kind=unit|integration|playwright&id=<id> 링크는 전체 앱 안에서 기록된 요청이나 실행을 엽니다. 기록의 식별자가 워크트리를 결정하므로 현재 프로젝트 선택으로 다른 체크아웃을 가리키게 할 수 없습니다. 링크를 여는 것만으로 실행하지 않습니다. 연결된 검토는 해당 워크트리의 이력과 명시적인 승인 제어를 유지하며 테스트 취소를 노출하지 않습니다.
File Viewer Git 필터
Settings → Preferences → Git 추적 파일만 표시는 기본적으로 꺼져 있습니다. 같은 출처의 모든 프로젝트와 File Viewer 화면에 적용하는 브라우저 로컬 표시 설정입니다. 브라우저 저장소에 저장하므로 새로 고침 후에도 유지되며, 다른 열린 브라우저 탭에도 변경 사항이 반영됩니다. 저장소를 사용할 수 없으면 현재 세션에서 설정을 유지합니다. 프로젝트 실행 설정에는 포함하지 않으며 File Viewer에는 별도 필터 조작부가 없습니다.
선택하면 표시 중인 프로젝트 체크아웃의 Git 인덱스를 읽어 추적 파일과 그 상위 디렉터리만 나열합니다. 수정된 추적 파일, 새로 스테이징한 파일, 강제로 추가한 무시 대상 파일도 표시 대상입니다. 추적하지 않는 파일과 그런 파일만 있는 폴더는 숨깁니다. 기존 파일 안전 규칙은 그대로 적용됩니다. Git 메타데이터, 심볼릭 링크, 일반 파일이 아닌 항목은 제외하며 삭제된 파일을 인덱스에서 복원하지 않습니다. 선택을 해제하면 기존 표시 규칙에 따라 추적하지 않는 파일과 무시 대상 파일을 포함한 일반 파일 시스템 탐색으로 돌아갑니다.
필터를 바꾸면 선택한 미리보기를 지웁니다. 실시간 갱신은 추적 상태를 다시 확인하므로 필터가 켜진 동안 인덱스에서 제거한 파일의 이전 미리보기를 유지하지 않습니다. 상위 폴더를 접기만 하면 유효한 선택 파일은 유지됩니다. 필터 결과가 비어 있으면 명시적인 빈 상태를 표시합니다. Git이 아닌 프로젝트나 Git 읽기 실패에는 필터를 무시한 목록이나 오래된 트리·미리보기 대신 진단을 표시합니다. 재시도는 계속 사용할 수 있으며 Settings에서 이 설정을 끄면 일반 탐색으로 돌아갑니다.
프로젝트 파일 HTTP 읽기는 디렉터리 목록과 파일 미리보기 모두에 선택적
trackedOnly=true|false를 받습니다(기본값 false). 다른 값은 거부하며 필터가 켜진
상태에서 추적하지 않는 파일을 읽는 요청도 거부합니다. 스키마는 생성된 HTTP API를
참조하세요.
테스트 파일 탐색
Unit과 Integration 목록은 선택 파일의 소스와 별도로 파일 경로를 반환합니다. 목록에는 200개 파일 제한이나 전체 소스 바이트 예산이 없습니다. 프로젝트 Tests는 Git에서 확인할 수 있는 모든 일치 파일을, 워크트리 리뷰는 변경된 일치 파일을 표시합니다. 파일을 선택하면 해당 소스만 요청하고 이전 선택의 요청을 취소하므로 늦게 도착한 응답이 현재 파일을 덮어쓰지 않습니다.
미리보기는 파일당 200,000바이트 제한을 유지하며 바이너리 내용, 심볼릭 링크 파일, 선택 체크아웃 밖의 경로를 거부합니다. 미리보기 오류가 있는 파일도 목록에서 선택할 수 있습니다. 파일 미리보기는 테스트를 실행하거나 실행에 정의된 실행 범위를 바꾸지 않습니다. 기록된 제출 소스는 불변으로 유지됩니다.
컴포넌트와 시각 규칙
채택된 shadcn Base UI Nova primitive, render 조합과 Base UI event 계약을 사용합니다.
허용된 shadcnblocks 확장은 Linear 테마입니다. 관계없는 registry나 Radix primitive를
다시 도입하지 않습니다. 전문 Git tree·diff·syntax, Kibo list와 라이선스가 있는 ReUI
timeline은 현재 역할에 유지합니다.
src/components/ui는 vendored 코드입니다. 기능 작업에서는 조합해서 사용합니다.
공유 디자인 변경은 라이선스와 동작을 보존하며 이곳에서 밀도·형태를 한 번 조정할 수
있습니다. 화면마다 다른 override를 넣거나 관계없는 vendored 모듈을 수정하지 않습니다.
컴포넌트에서는 원시 색상이나 Tailwind palette 대신 의미 토큰을 사용합니다.
Redpact 색상과 번들 Inter Variable, 시스템 문자 fallback을 보존합니다. 코드·diff 표면은
번들 JetBrains Mono Variable을 먼저 사용하고 시스템 모노스페이스 fallback을 따릅니다.
Prism 문법 토큰은 로컬 --code-highlight-* 변수를 통해 완결된 GitHub PrettyLights
Light/Dark 팔레트를 사용합니다. 문법 패키지의 fallback 색상이나 화면별 문법 override에
의존하지 않습니다.
| 역할 | 형태와 글자 |
|---|---|
| 페이지 제목 | 24/32px, weight 600 |
| 섹션 제목 | 16/24px, weight 600 |
| 읽기 본문 | 14/21px 또는 긴 글의 16/24px |
| 제어·탐색 | 13px label. 작은 작업·메타데이터는 12px 가능 |
| 툴바 작업 | 28px pill 또는 원형 아이콘 제어 |
| 폼 입력·선택 | 편집 가능함이 드러나는 사각 면, 8px 모서리 |
| 사이드바 선택 | 부드러운 사각형, 8px 모서리 |
| 본문 frame·dialog | 12px 모서리와 절제된 경계·높이감 |
| 정적 badge·inline code | 밀도 있는 6px 모서리 |
형태는 역할에 따르며 모든 제어를 pill로 만들지 않습니다. 지속 선택은
accent/accent-foreground, hover는 더 옅은 임시 상태를 사용합니다. 선택 여부와
키보드 highlight를 구분합니다. 장식 카드, 중첩 경계, gradient, 행마다 박스를 만들지
않으며 작업 색상 반전과 의미 오류 색상을 보존합니다.
파일과 폴더 아이콘
File Viewer, 변경 파일 트리, 소스·diff 헤더는 React 아이콘 팩의 Material Icon
Theme SVG 자산을 번들로 사용합니다. 정확한 파일명이 확장자보다 우선하며,
d.ts 같은 복합 확장자는 ts보다 우선합니다. 알 수 없는 파일과 폴더는 테마의
기본 아이콘을 사용합니다. 폴더 아이콘은 이름과 펼침 상태를 반영하고, 밝은 테마용
변형은 기존 Light/Dark/System 설정을 따릅니다. 아이콘 색상은 앱 상태 색상이 아닌
원본 자산의 색상이며, Git 상태는 변경 파일 옆의 A/M/D/R/C와 행 수로 표시합니다.
Vite 빌드는 버전이 고정된 material-icon-theme 패키지에서 연결 정보를 생성하고
SVG 자산과 MIT 고지를 로컬에 포함합니다. CDN이나 런타임 매핑 생성은 필요하지
않습니다. 뷰어는 파일·폴더 이름을 사용하며, 편집기의 언어 ID 추론이나 사용자 지정
아이콘 매핑은 제공하지 않습니다. 작업 버튼의 아이콘은 계속 Lucide를 사용합니다.
파일 내용 미리보기
File Viewer, 워크트리 리뷰, 커밋된 브랜치와 Git Graph 비교는 같은 이미지 표시 방식을 사용합니다. PNG, JPEG, SVG, GIF, WebP, AVIF, BMP, ICO를 투명도 체크무늬 배경 위에 표시합니다. 실제 형식 지원은 브라우저 이미지 디코더에 따르며, 손상되거나 지원하지 않는 바이트는 디코딩 오류를 표시합니다. 이미지별 제한은 5 MiB이며 일반 UTF-8 소스 미리보기는 1 MiB 제한을 유지합니다. 지원하지 않는 바이너리는 명시적으로 표시합니다.
SVG는 Preview로 열리고 Source 탭에서 원문이나 비교 패치를 볼 수 있습니다. 소스만 제공하는 파일 화면도 같은 SVG 미리보기와 원본 전환을 사용합니다. SVG를 문서에 삽입하지 않고 이미지로 불러오므로 스크립트는 실행되지 않으며 외부 SVG 리소스는 표시되지 않을 수 있습니다. 파일 선택 시 진행 중인 비교 읽기를 취소하며 새로고침 실패 시 다른 이미지를 현재 파일인 것처럼 남겨 두지 않습니다.
비교는 Before와 After를 충분히 넓은 작업 영역에서는 좌우로, 좁은 화면에서는 위아래로 표시합니다. 이미지가 없는 상태는 읽기·디코딩 오류와 구분합니다. 커밋과 브랜치 미리보기는 화면에 표시된 Git 리비전을 사용하고 이름이 바뀐 파일의 이전 경로를 보존합니다. Staged는 HEAD와 인덱스를, Unstaged는 인덱스와 작업 파일을 비교합니다. 미리보기를 여는 동작은 프로젝트 코드를 실행하지 않습니다.
레이아웃과 읽기 너비
공용 앱 헤더는 둥근 본문 frame 밖에 있으며 Full·Half View·Mobile에서 항상 정확히 한 줄을 유지합니다. 사이드바 전환 버튼 하나와 현재 페이지의 제목 또는 탐색과 작업을 같은 공간에 둡니다. 공통 Play 실행 작업이 있으면 헤더 맨 오른쪽에 표시하며, 진단을 위한 상시 헤더 버튼은 두지 않습니다. 작업공간 탭 줄과 새 탭·탭 닫기 동작은 제공하지 않습니다. 독립 브라우저와 내장 App Page는 같은 헤더를 사용하며 현재 프로젝트·페이지 하나를 표시합니다.
GPT 내장 뷰어는 Full과 Half View를 포함한 모든 너비에서 사이드바가 접힌 상태로 시작합니다. 창 크기를 바꿔도 상태를 자동으로 바꾸지 않으며 헤더의 전환 버튼으로 직접 열고 닫습니다. 내장 뷰어를 다시 열면 다시 접힌 상태로 시작합니다. 독립 앱은 CSS 너비 1100px 이상에서 열린 상태로, 그보다 좁으면 접힌 상태로 시작하며 이 경계를 넘으면 열림 상태를 갱신합니다. CSS 너비 768px 미만에서는 모바일 사이드바 drawer를 사용하며, 내부의 명시적인 사이드바 닫기 버튼으로 닫을 수 있습니다. Half View를 명시적인 디자인 대상으로 삼아 사이드바를 고정 표시하지 않고 본문 공간을 확보합니다. 데스크톱 gutter와 모바일 전체 너비 본문을 유지합니다. 실제 앱을 데스크톱 Full(1920px)과 Half View(800px)에서 검증하며 레이아웃 변경은 두 캡처를 모두 포함합니다. 모바일 캡처는 별도로 요청한 경우에만 필요합니다.
Worktrees 표시 옵션은 하단 메뉴 위의 빈 공간을 포함한 Worktrees 전체 영역에 마우스가 들어오면 나타납니다. 키보드 포커스, 열린 옵션 메뉴, 호버가 없는 입력 환경에서도 접근할 수 있습니다.
프로젝트·워크트리·브랜치와 사이드바 페이지 선택은 브라우저 세션 방문 기록을 사용합니다. 브라우저 뒤로·앞으로는 프로젝트가 연결되어 있는 동안 목적지를 복원합니다. 같은 화면을 다시 선택해도 중복 기록을 추가하지 않으며, 뒤로 이동한 뒤 새 화면을 선택하면 앞으로 기록을 지웁니다. 새로고침은 현재 목적지를 복원하지만 편집 초안이나 화면 상세 상태는 복원하지 않습니다. 파일 선택, 리뷰 하위 탭과 스크롤 변경은 방문 기록을 추가하지 않습니다. 현재 페이지를 바꾸면 상세 상태가 해제될 수 있으며, React 상태·초안·구독을 유지하는 숨겨진 작업공간 탭은 없습니다. UX 탐색을 참고하세요.
앱이 viewport 높이를 소유하고 증거·목록은 각 panel에서 스크롤합니다.
Flex/grid 경계에 min-w-0, 중첩 스크롤에는 min-h-0가 필요합니다.
index.css의 공유 너비 정책 640, 768, wide만 사용합니다. 설정은 640, 본문·증거
행은 768, 전문 파일·diff·graph는 가용 너비를 사용합니다. 고정 사용자 너비가 아닌
반응형 최대치입니다. 설정 gutter는 읽기 열 밖에 둡니다. 파일 뷰어, 워크트리·브랜치 diff,
테스트 파일 탐색기는 내부 카드나 바깥 여백, 이중 둥근 테두리 없이 본문 frame을 채웁니다.
페이지 툴바와 파일 헤더는 아래 구분선을 사용하고 파일 탐색은 panel 사이 선으로 구분합니다.
여백은 탐색기 전체가 아니라 읽기·결과 내용 안에 둡니다. 파일 탐색은 선택 내용 옆에
유지하고 필요한 경우 반응형 picker를 사용합니다.
Log는 두 줄의 연속 행으로 전체 의도, 종류·판정·현지 시각과 가까운 복사 작업을 배치합니다. 환경·의존성은 읽기 쉬운 수직 행과 제한된 key/value 표를 사용합니다. 공백, 실제 줄바꿈, 전체 진단을 보존하고 글자를 줄여 panel에 맞추지 않습니다. Diff·소스는 전역 Word wrap을 사용하며 해제하면 가로 스크롤합니다.
Redpact 밖의 도움이 필요한 복구 상태는 해당 view가 구체적인 제목·요약·구조화한 맥락을
담은 CopyHandoff를 사용합니다. 계속 작업하는 데 필요한 식별자, 관찰 상태, 선택값,
보존 리소스 참조를 포함합니다. 진단 파일 내용은 로컬 접근 경계 안에 두고 로그나 secret을
자동으로 client에 보내지 않으며, 보존된 위치만 복사합니다. 복구 화면은 이 shell을
공유하되 같은 복구 지시문으로 강제하지 않습니다.
이 shell은 제목, Copy 동작, 선택 가능한 복사 본문, 클립보드 실패 fallback, 선택 가능한
라벨형 상세 disclosure의 규격을 통일합니다. 일반적인 agent handoff 라벨을 붙이거나 서로
다른 복구 내용을 하나의 텍스트 template으로 강제하지 마세요.
일반 오류 Notice는 CopyHandoff를 자동으로 사용하지 않습니다.
문제 목록과 백그라운드 오류 규약을 따릅니다.
지속 식별자, 선택값 또는 보존 리소스가 있는 복구 화면은 계속 자체적인
구체적 CopyHandoff 맥락을 제공합니다.
하나의 검토 툴바
페이지는 navigation·secondary·actions slot을 가진 ReviewToolbar 하나를 소유합니다.
앱에서는 본문 frame 안에 별도의 툴바 행을 추가하지 않고 사이드바 전환 옆의
공용 헤더에 표시합니다. 컴포넌트를 독립적으로 사용하면 inline 툴바를 유지합니다.
Portal은 페이지의 Tabs context와 작업 상태를 보존하며, 페이지가 바뀌면 이전 헤더 내용을
제거합니다.
워크트리 리뷰는 사용 가능한 Diff·Playwright·Unit·Integration·Log·Environment 탭과 테스트 실행 작업을 제공합니다. 프로젝트 Tests는 Unit·Integration·Playwright를 제공하고 활성 Playwright는 같은 헤더에 Screenshots·Tests·Runs와 실행 작업을 제공합니다. Container는 제목·상태·수명주기 작업, File Viewer와 Settings는 페이지 제목, Dependencies는 Overview·Configuration과 도움말, Git Graph는 제목과 Refresh를 제공합니다. Graph 내부의 브랜치·원격 표시·커밋 검색 제어는 graph에 남습니다. 프로젝트·인스턴스 설정의 양식 저장과 초안 복구 작업은 공용 헤더에 배치하며, 독립된 설정 섹션의 제어는 해당 섹션에 유지합니다. Run 제어는 헤더 맨 오른쪽에 접근 가능한 작업 이름과 기본 hover 툴팁을 가진 공통 28px Lucide Play 아이콘 버튼을 사용합니다. Container의 Start·Restart·Stop과 Git Graph의 Refresh도 각 의미에 맞는 Lucide 아이콘으로 같은 소형 제어를 사용합니다. Playwright 대상 선택 대화상자의 실행 버튼은 명시적인 텍스트를 유지합니다. 실행 제어는 공유 실행 기본값을 사용하며 헤더에는 실행별 범위 선택기나 작업 초안 정리 동작을 두지 않습니다. 에이전트의 재정의와 명시적인 정리는 실행 계약으로 유지합니다.
파일명, 소스·diff 제어와 파일별 Code·Results 탭은 파일 panel에 남습니다. 캡처 뷰어의 Mobile 스위치는 앱 헤더가 아닌 기록된 스크린샷 옆에 두며, 소스 목록을 바꾸거나 테스트를 실행하지 않고 저장된 Desktop·Mobile 증거를 필터링합니다.
공용 툴바는 모든 너비에서 한 줄을 유지합니다. 제어를 빽빽하게 배치하기보다 가치가 낮은 항목을 먼저 제거하며 두 번째 행을 만들거나 글자를 줄여 맞추지 않습니다. 필요하면 탐색과 작업 그룹을 각각 가로로 스크롤합니다. 라벨은 줄바꿈하지 않습니다. 사이드바 전환과 사용 가능한 Play 작업은 고정하여 페이지 제어를 스크롤하지 않아도 접근할 수 있습니다.
실행 결과 panel은 실행에 설명한 공통 진행 상태 표시를 사용합니다. 실행 중인 Unit과 Integration 단계는 탭을 전환하지 않아도 볼 수 있도록 실행 버튼 옆에도 표시합니다.
관련 영역을 ReviewToolbarScope로 감쌉니다. Scope당 활성 ReviewToolbarOverride는
하나이며 중첩 scope는 독립적입니다. 비활성 override는 unmount합니다. 생략한 slot은
상속, null은 숨김, 전달한 내용은 대체입니다. Unmount하면 기본값을 복원합니다.
공유 컴포넌트가 portal과 tab context를 소유하며 화면은 effect로 React node를 등록하거나
다른 페이지 툴바를 추가하지 않습니다.
관찰, 로딩과 복구
Native 파일 이벤트는 범위별 서버 갱신으로 합쳐집니다. 비싼 refresh 작업은 대상별로 제한하고 관계없는 이벤트로 변경 없는 프로젝트를 다시 스캔하지 않습니다. Watcher는 범위와 함께 해제하고 리소스 실패를 명시적으로 복구합니다. 뷰어는 범위별 SSE를 구독해 해당 query를 갱신합니다. 프로젝트 Tests는 Unit과 Integration에 기본 워크트리 범위를 사용하며 같은 구독에 프로젝트 범위를 함께 보내지 않습니다. 열기·관찰은 테스트를 시작하지 않습니다. 수동 Container는 페이지가 열려 있는 동안 상태와 입력 식별자를 별도로 polling합니다.
로딩·빈 화면·읽기 실패 중에도 탐색을 유지합니다. 내용이 남아 있으면 활성 tab을 보존하며, 비어 있음이 확인된 워크트리 section만 숨깁니다. 오류와 실행·정리는 접근 가능해야 합니다. 오래된 증거에는 해당 화면이나 문제 목록에서 접근 가능한 진단을 제공하며 거짓 빈 상태나 최신 결과로 바꾸지 않습니다. 공유 live-update 구성 요소를 사용하고 나갈 때 구독을 해제합니다. 치명적이지 않은 진단은 문제 목록에 모으고 복구 제어는 해당 작업·내용 곁에 유지합니다.
언어와 접근성
UI copy는 번들 locale catalog로 번역하고 식별자와 원문은 보존합니다. 테마는 Light·Dark·System이며 줄바꿈 기본값은 켜짐입니다. 브라우저 저장 실패 시 세션 동작을 허용합니다. 모두 프로젝트 설정 필드가 아닙니다.
의미 있는 button·label·tab·dialog와 키보드 focus·selection을 사용합니다. 반응형 reflow에서도 제어, 파일 선택과 진단을 보존합니다. 화면 변경에는 실제 앱의 기능 Playwright 테스트를 수행합니다. 배치·스타일 변경은 데스크톱 Full·Half View 캡처도 확인합니다. 모바일 캡처는 요청이 없으면 선택 사항입니다. 컴포넌트·구조·빌드 검사는 이를 보조하며 대체하지 않습니다.
문서화된 색상
CSS 구현은 index.css에 있습니다. Palette 대조 회귀 테스트가 아래 값을 확인합니다. 의도적으로 디자인을 바꾸면 양쪽을 함께 수정합니다. 다른 토큰 상세는 별도 수동 디자인 registry가 아닌 CSS에서 관리합니다.
colors:
background: "#fbfbfb"
foreground: "#1b1b1b"
card: "#ffffff"
primary: "#6e78d5"
primary-foreground: "#ffffff"
secondary: "#1b1b1b"
secondary-foreground: "#fbfbfb"
muted: "#ececef"
muted-foreground: "#71737a"
accent: "#d9dcea"
accent-foreground: "#000000"
destructive: "#92681b"
border: "#e8e8e8"
input: "#bebfc3"
ring: "#6f6d6d"
sidebar: "#fbfbfb"
sidebar-foreground: "#000000"
sidebar-primary: "#535151"
sidebar-accent: "var(--accent)"
chart-1: "#6d6b6b"
chart-2: "#02755c"
chart-3: "#a3a1a1"
chart-4: "#004a37"
chart-5: "#3b3939"
dark-background: "#101011"
dark-foreground: "#e3e4e6"
dark-card: "#17181a"
dark-primary: "#e6e6e6"
dark-secondary: "#7987e1"
dark-muted: "#141415"
dark-muted-foreground: "#a1a2a5"
dark-accent: "#303549"
dark-border: "#24252a"
dark-sidebar: "#08090a"
typography:
sans: Inter Variable문제 목록과 백그라운드 오류
치명적이지 않은 오류 알림은 본문에 inline 알림을 끼워 넣지 않고 모두 문제 목록으로 모읍니다. 기능의 최초 조회, 백그라운드 새로고침, 저장·동작 실패, 잘못된 설정, Git·이미지 진단, 실행·정리 오류가 포함됩니다. 실행 판정·진행 상태와 승인·동작 버튼의 차단은 그대로 유지하므로 진단을 모았다고 실패가 성공으로 바뀌거나 차단된 동작이 허용되지 않습니다. 이미 표시된 콘텐츠는 유지하지만 조회 복구 전까지 최신이 아닐 수 있습니다.
앱이 로드되기 전에 서버에 연결할 수 없는 경우처럼 명시적으로 치명적이라고 지정한 오류만 inline에 표시합니다. 개별 기능 요청의 503 자체는 치명적 오류가 아닙니다. 앱의 문제 목록 provider 밖에서 독립적으로 사용하는 컴포넌트는 진단이 사라지지 않도록 inline fallback을 유지합니다.
새로운 비치명적 진단은 헤더 밖 오른쪽 아래에 작은 알림으로 표시합니다. 8초 뒤 자동으로 닫히며 마우스를 올리거나 키보드 포커스를 두면 시간을 멈춥니다. 알림이나 닫기 버튼을 누르면 알림만 닫히며 수집된 문제 목록은 지워지지 않습니다. 새 진단은 같은 알림을 갱신하며 여러 장을 쌓지 않습니다. 같은 메시지·위치의 반복 관측은 횟수만 갱신하고 닫은 알림을 되살리지 않습니다. 목록을 비우면 이후 같은 문제가 발생해도 새로 알립니다. 알림은 대화상자를 자동으로 열거나 현재 페이지를 이동시키지 않습니다. 전체 메시지, 마지막 관측 시각, 관측 횟수, 페이지 위치와 명시적인 목록 비우기 동작은 전역 Settings → 문제 목록에서 제공합니다. 헤더와 프로젝트 연결 화면에는 상시 문제 목록 버튼을 두지 않습니다. 정보성 안내와 사용자가 직접 요청한 복구 대화상자는 기존 역할을 유지합니다.
목록은 앱 전체가 공유하는 브라우저 세션 메모리이며, 새로고침하면 사라집니다. 서버 이력에 저장하지 않습니다. 메시지와 페이지 위치가 같으면 하나의 행으로 모읍니다. 최신 100개 행을 보관하며 메시지는 최대 16,384자입니다. 목록 비우기는 요청을 재시도하거나 원인을 해결하지 않습니다. 시작 시 연결 실패는 연결 화면과 재시도 버튼을 유지합니다.