시작하기¶

pccx-lab 에 처음 입장하는 사용자를 위한 5 분 튜토리얼. VS Code walkthroughs 계약을 따라 3 단계로 구성됩니다: 앱 실행 → 샘플 .pccx 로드 → Flame Graph + Waveform 열기.

사전 준비¶

pccx-lab 빌드가 완료되어야 합니다 (cargo tauri dev 또는 릴리스 바이너리).
샘플 트레이스 hw/sim/fixtures/smoke.pccx 는 pccx-FPGA 저장소의 hw/sim/run_verification.sh 를 한 번 실행하면 생성됩니다. 아직 없다면 이 단계를 먼저 수행하십시오.

cd src/ui
npm install            # 최초 1 회
npx tauri dev

기동되면 다음 화면이 나타납니다:

타이틀 바 + 메뉴 바 — File / Edit / View / Trace / Analysis / Verify / Run / Tools / Window / Help
탭 스트립 — Timeline / Flame Graph / Waveform / System Simulator / Memory Dump / …
AI Copilot 패널 (오른쪽 도킹, `Ctrl+`` 로 토글)
Bottom Panel (Log / Console / Telemetry, Ctrl+J 로 토글)

우측 상단 활동 바에서 🧠 아이콘은 Copilot, 📈 아이콘은 Telemetry 입니다. 모든 아이콘 버튼에는 aria-label 이 부여되어 있어 스크린 리더로 사용할 수 있습니다 (WCAG 2.2 SC 2.1.1 / 2.4.3).

두 가지 방법이 있습니다:

메뉴: File ▸ Open .pccx… (Ctrl+O)
자동 로드: 앱이 기동하면 기본적으로 dummy_trace.pccx 를 로드하려고 시도합니다. 성공 시 상단 탭 스트립 오른쪽에 trace loaded 배지가 초록색으로 표시됩니다.

실제 pccx-FPGA 시뮬레이션 결과를 보려면 다음 경로를 선택하십시오:

../pccx-FPGA-NPU-LLM-kv260/hw/sim/fixtures/smoke.pccx

로드가 완료되면 상태 바에 cycles 와 cores 수치가 채워집니다.

상단 탭 스트립에서 Flame Graph 를 클릭하십시오.

조작:

Ctrl + 스크롤 — 시간축 줌 인/아웃
드래그 — 팬
Find Bottleneck 버튼 — detect_bottlenecks IPC 를 호출해 가장 혼잡한 창을 자동으로 찾아 AI 권장사항을 표시
Ctrl + Shift + D — 두 번째 런과 비교하는 diff 모드 토글

Waveform 탭을 클릭하십시오. .vcd 파일을 직접 열려면 File ▸ Open VCD… (Ctrl + Shift + O) 를 사용합니다.

조작:

앱 어디서든 ? 또는 F1 을 누르면 모든 단축키를 나열한 모달이 열립니다.

WCAG 2.2 SC 2.1.1 (Keyboard) 및 WAI-ARIA 1.2 §5.2.8.4 (aria-label) 기반의 접근성 패스가 적용되어 있으므로 마우스 없이 전체 IDE 를 탐색할 수 있습니다.