[Fork notice] hermes-web-revised — Artifact-First + Agent Desk + UI overhaul 추가 fork 소개

[Reasonofmoon]

TL;DR: 원본을 fork 하여 Artifact-First Layout (우측 산출물 패널) + Agent Desk (칸반 보드) + SVG UI overhaul 을 추가하였습니다. MIT 동일 라이선스이며, frontend-only diff 위주로 upstream cherry-pick 가능한 단위로 커밋이 분리되어 있습니다.

Fork 위치: https://github.com/Reasonofmoon/hermes-web-revised (public, MIT)

---

인사

안녕하십니까. Reasonofmoon 입니다.

귀하의 reallygood83/hermes-for-web 저장소를 fork 하여 학습 및 실험 용도로 확장 작업을 진행하였고, 결과물을 공유드리고자 본 issue 를 작성하였습니다. 원본의 Hermes Agent 를 브라우저에서 즉시 사용 가능하게 한 설계 컨셉이 매우 우수하여, 그 위에 AI agent 특유의 장점을 살린 추가 surface 들을 얹는 실험을 진행하였습니다.

원본 라이선스 (MIT) 를 준수하였으며, upstream 호환성을 유지하기 위해 frontend-only diff 위주로 작업하였고, backend (server.py + api/*) 는 거의 손대지 않았습니다.

추가한 기능

1. Artifact-First Layout (우측 산출물 패널)

채팅 흐름 속에서 중요한 산출물 (교정문, 코드, 슬라이드, 단어카드, Q&A 등) 이 위로 스크롤되어 사라지는 문제를 해결하기 위해 별도의 우측 패널을 추가하였습니다.

• localStorage 기반 자동 추출 및 저장 (세션당 최대 10 revision)
• 타입별 전용 렌더러:
  • correction: 좌우 split view (원본 ↔ 교정문)
  • slides: 페이지 네비게이션 (←/→ 키보드 단축키)
  • wordcard: 3D flip 카드 (Space 키)
  • qa: 아코디언
  • code / note / marked: 일반 렌더
• 추출 휴리스틱: [ARTIFACT] 마커 / H1 + 200자 이상 / 30줄 이상 코드 블록
• 타입 추론 결과를 사용자가 수동으로 override 가능

2. Agent Desk (사이드바 신규 탭 — 칸반 보드)

Hermes Agent 가 생성한 session / cron / artifact 를 한 화면에서 통합 관리하는 surface 입니다.

• 4 컬럼: inbox / doing / review / done
• 카드 3종:
  • 수동 task (사용자가 직접 작성)
  • 자동 session card: INFLIGHT → doing, archived → done, pinned → review 자동 매핑
  • 자동 cron card: error → review, paused → done, next-24h → doing (run/pause/resume quick action 제공)
• 자동 session card → 수동 task 로 promote 기능

3. UI Overhaul (SVG 아이콘 시스템 + 시각 정비)

원본의 이모지 기반 UI 를 중앙 집중식 SVG 아이콘 시스템으로 전환하였습니다.

• window.icon(name, opts) helper + 35종 이상의 centralized SVG (static/icons.js)
• 로고 및 일러스트레이션은 codex-image-gen 으로 생성
• Cherry Blossom 테마를 기본값으로 적용 (한국 EdTech 컨텍스트 반영)
• Micro-interaction (modal scale-in, message fade-in, illustration float 등)
• 7개 테마 (dark / slate / light / solarized / monokai / nord / cherry-blossom) + prefers-color-scheme 자동 적용

4. 문서화 및 운영 자료

각 PR 에 audit / spec / PRD 를 첨부하는 bkit/PDCA 워크플로우를 적용하였습니다.

• docs/SPEC.md (817 lines): 70여 개의 API endpoint, 7개 JS 모듈 책임 매트릭스, 환경변수, 확장 포인트 가이드
• docs/PRD.md (439 lines): 13-category audit rubric 의 A-tier 목표
• docs/audits/app-factory-2026-05-12.md: app-factory CLI 감사 결과 및 개선안
• docs/tester-onboarding.md: 60분 첫 PDCA 루프 가이드
• docs/recruitment-plan.md, docs/phase1-tracker.md: Phase 1 beta 운영 자료
• CONTRIBUTING.md: contributor 워크플로우
• README.md / README.en.md 동기 + "Next Best Move" footer 컨벤션

5. 버그 수정

• 모델 선택 mismatch 해결 (GPT-5.5 선택 시에도 UI 에 "GPT-5.4 Mini" 로 표시되던 문제)
• 외부 CDN 의존성 제거 (Pretendard fallback stack 만 유지)

원본과의 호환성

• Backend (server.py + api/*) 는 거의 손대지 않음 — 원본의 thin server 구조 유지
• 대부분의 변경이 frontend-only diff
• localStorage 키는 새로운 prefix 사용 (hermes-artifacts:, hermes-desk-tasks) — 원본 데이터와 충돌하지 않음
• MIT 라이선스 동일, upstream 으로 cherry-pick 가능한 단위로 커밋 분리

배움의 달인 채널의 작업물에서 많은 영감을 받았습니다. 우수한 도구를 만들어 공유해주셔서 감사드립니다.

검토하신 후 의견 주시면 감사하겠습니다.

---

Reasonofmoon
hermes-web-revised maintainer
Fork: https://github.com/Reasonofmoon/hermes-web-revised