docs/project_plan.md

# RAG 챗봇 + LocalPCAgent 통합 프로젝트 계획

## 프로젝트 개요
기존 RAG 챗봇(Flask 기반)에 LocalPCAgent 제어 기능을 추가하는 통합 작업입니다. Gradio UI 코드의 기능을 Flask+HTML/JS 구조에 이식합니다.

## 완료된 작업
- [x] 기본 Flask 기반 RAG 챗봇 백엔드 구현
- [x] LocalPCAgent 제어를 위한 API 엔드포인트 추가 (`app_device_routes.py`)
- [x] Flask 백엔드와 LocalPCAgent 간 통신 로직 구현
- [x] 웹 UI에 LocalPCAgent 제어 화면 추가 (HTML/CSS)
- [x] 웹 UI에서 LocalPCAgent 제어 기능을 위한 JavaScript 로직 구현
- [x] 프로젝트 코드 정리 및 최적화
  - 불필요한 파일 및 코드 제거
  - 모듈화된 코드 구조 개선

## 프로젝트 구조 정리
- 주요 실행 파일을 확인하고 `app_revised.py`를 주 파일로 선택
- 애플리케이션 코드를 'app' 패키지로 모듈화:
  - 장치 제어 라우터: `app/app_device_routes.py`
  - 기본 API 라우터: `app/app_routes.py`
  - 검색기 초기화: `app/init_retriever.py`
- 프런트엔드 코드 통합:
  - `templates/index.html`에 장치 제어 UI 섹션
  - `static/js/app-device.js`에 장치 제어 JavaScript 코드
  - `static/css/device-style.css`에 장치 제어 스타일

## 현재 상태
코드 검토 결과 대부분의 통합 작업이 이미 완료된 상태입니다:
- Flask 백엔드에 LocalPCAgent API 엔드포인트가 구현되어 있습니다 (`app_device_routes.py`)
- 프론트엔드 UI에 장치 제어 탭이 추가되어 있습니다 (`index.html`)
- 장치 제어를 위한 JavaScript 로직이 구현되어 있습니다 (`app-device.js`)
- 기본 기능과 사용자 정의 명령어 실행 기능이 모두 구현되어 있습니다

## 추가 개발 계획: 장치 목록 조회 기능 추가

### 개발 목표
로컬PC에 연결된 장치(특히 COM 포트와 USB 장치)를 조회하는 기능을 추가합니다.

### 구현 요구사항
1. **로컬PC 장치 조회 Python 프로그램 개발**
   - COM 포트 및 USB 장치 목록 조회
   - 장치별 상세 정보(제조사, 제품명, 시리얼 번호 등) 수집
   - 멀티 플랫폼 지원(Windows, Linux, macOS)

2. **LocalPCAgent API 확장**
   - 장치 목록 조회 API 엔드포인트 추가
   - 조회 결과 효율적인 전송 방식 구현

3. **UI 확장**
   - 장치 제어 탭에 장치 목록 조회 섹션 추가
   - 조회 결과 표시 UI 구현
   - 장치 타입별 필터링 기능 구현

### 기술 스택
- 백엔드: Python(`pyserial`, `pyusb`), Flask
- 프론트엔드: HTML, CSS, JavaScript
- 통신: REST API, JSON 포맷

### 구현 계획
1. **로컬PC 장치 조회 Python 스크립트 개발**
   - `scan_devices.py` 스크립트 작성
   - 테스트 및 디버깅

2. **LocalPCAgent에 통합**
   - LocalPCAgent 프로그램 목록에 등록
   - API 엔드포인트 테스트

3. **Flask 백엔드 API 확장**
   - `app_device_routes.py`에 장치 조회 API 추가
   - 데이터 포맷 및 오류 처리 구현

4. **프론트엔드 UI 개발**
   - `index.html`에 장치 목록 조회 섹션 추가
   - `app-device.js`에 장치 조회 관련 함수 추가
   - 필요시 CSS 스타일 추가

## 남은 작업
- [ ] 로컬PC 장치 조회 Python 스크립트 개발
- [ ] LocalPCAgent 서버에 장치 조회 기능 통합
- [ ] Flask 백엔드 장치 조회 API 구현
- [ ] 프론트엔드 UI 확장
- [ ] 전체 시스템 테스트 및 디버깅
- [ ] 최종 코드 리뷰 및 문서화 보완

## 파일 구조
- `app_revised.py`: 메인 Flask 애플리케이션
- `app.py`: 단순화된 진입점 (app_revised.py 호출)
- `app/`: 애플리케이션 모듈
  - `__init__.py`: 패키지 초기화
  - `app_device_routes.py`: LocalPCAgent 제어 API 라우트
  - `app_routes.py`: 기본 RAG 챗봇 API 라우트
  - `init_retriever.py`: RAG 모델 초기화 코드
- `static/`: 정적 파일
  - `css/`: 스타일시트
    - `style.css`: 기본 스타일
    - `device-style.css`: 장치 제어 스타일
  - `js/`: JavaScript 파일
    - `app.js`: 메인 JavaScript
    - `app-core.js`: 핵심 기능
    - `app-device.js`: 장치 제어 기능
    - `app-docs.js`: 문서 관리 기능
    - `app-llm.js`: LLM 관련 기능
- `templates/`: HTML 템플릿
  - `index.html`: 메인 애플리케이션 페이지
  - `login.html`: 로그인 페이지
  - `loading.html`: 로딩 페이지
- `docs/`: 프로젝트 문서
  - `project_plan.md`: 프로젝트 계획 문서
  - `cleanup_plan.md`: 코드 정리 계획 문서
- **신규 파일:**
  - `LocalPCAgent/programs/scan_devices.py`: 장치 조회 Python 스크립트

## LocalPCAgent 통합 요약
- **백엔드 API**: `app/app_device_routes.py`에 구현
  - `/api/device/status`: 장치 서버 상태 확인
  - `/api/device/connect`: 사용자 지정 URL 연결
  - `/api/device/list`: 장치 목록 조회
  - `/api/device/programs`: 실행 가능한 프로그램 목록 조회
  - `/api/device/programs/<program_id>/execute`: 등록된 프로그램 실행
  - `/api/device/execute-custom`: 사용자 정의 프로그램 실행
  - **추가 예정:** `/api/device/scan-ports`: COM 포트 및 USB 장치 목록 조회

- **프런트엔드**: 기능 완성
  - 장치 제어 탭 UI: `templates/index.html`에 구현
  - JavaScript 로직: `static/js/app-device.js`에 구현
  - 스타일: `static/css/device-style.css`에 구현

## 주의사항
- JavaScript는 직접 LocalPCAgent와 통신하지 않고 Flask 백엔드를 통해 통신
- 모든 장치 관련 API는 인증된 사용자만 접근 가능 (`login_required` 데코레이터 적용)
- 로깅 코드 유지하여 디버깅 용이하게 함