Skip to content

feat(#197-B4): renderer 웹모드 배선 + Electron 표면 게이팅 + 웹 스모크#202

Merged
pdw96 merged 20 commits into
masterfrom
feat/197-b4-renderer-web
Jul 4, 2026
Merged

feat(#197-B4): renderer 웹모드 배선 + Electron 표면 게이팅 + 웹 스모크#202
pdw96 merged 20 commits into
masterfrom
feat/197-b4-renderer-web

Conversation

@pdw96

@pdw96 pdw96 commented Jul 4, 2026

Copy link
Copy Markdown
Owner

Part of #197 (Phase B — B4). Closes 아님(멀티-phase 메타). 서브이슈 #201 체크포인트 4 게이트 통과판 계획(docs/superpowers/plans/2026-07-05-issue197-B4-renderer-web-wiring.md 동봉)의 12태스크 TDD 구현.

목표

브라우저에서 열린 Fleet UI 가 window.fleet(preload) 부재 시 ws-bridge(B2)로 폴백해 fleet-server(B3)와 대화하고, 재접속 시 스냅샷 권위로 재하이드레이션하며, Electron 전용 표면(자동 업데이트·footer)은 AppInfo.runtime 으로 게이팅한다. 웹 워크스페이스 경로 채널(fleet:workspace:set)을 신설하고 playwright web 프로젝트로 브라우저 스모크를 게이트한다. 데스크톱 무회귀가 절대 제약(bridge=null → hydrateNonce 영구 0 → 마운트 1회 시맨틱 유지).

태스크 (T0~T11 · 각 TDD RED→GREEN 커밋)

  • T0 applyWorkspaceSet 코어 헬퍼 — 루트 한정(resolveWithin #123-B 워크스페이스 무결성: 프로세스 격리 + adversarial-FS 하드닝 (A 후속) #128 재사용)·존재 디렉터리·런 중 거부·fail-closed (10/10, junction 탈출 포함)
  • T1 fleet:workspace:set 채널 6면 원자 스윕(channels·types·fixtures·preload·ws-bridge·main·handlers·boot·ws-bridge-binding) — parity 4면+ipc-parity+직렬화 (152/152)
  • T2 web-bridge(initWebBridge 폴백 주입)+describeError+update 스텁 shape 핀 (45/45)
  • T3 HydrationProvider(재접속 hello→nonce·gap 관측)+ConnectionBanner(스냅숏 권위 통지)+main.tsx 배선 (7/7)
  • T4 App runtime 게이팅 — footer 웹 표기·UpdateBanner 마운트 게이트·재접속 세션 재조회 (App.test 2/2)
  • T5 SessionsPanel 업데이트 섹션 웹 게이팅 + MCP 재접속 재조회 + UpdateBanner reject 마감 (27/27)
  • T6 ChatPanel replace 재하이드레이션 — 윈도우 리셋·유령 스트림/stale busy 정리·reject 마감 (17/17, 기존 레이스 14 무회귀)
  • T7 ProjectPanel replace 재하이드레이션·웹 워크스페이스 경로 입력 UI·reject audit·describeError (44/44, 726/753/783 무회귀)
  • T8 ApprovalModal 회신 reject 흡수 — fail-closed 타임아웃 권위 (16/16)
  • T9 e2eCompletingRunner(결정론 완주 러너·이중 opt-in)+resolveE2eRunner+boot 배선 (e2e 17/17)
  • T10 playwright web 프로젝트 + 브라우저 스모크 3본 + CI chromium 설치
  • T11 brain 재생성·verify·적대 리뷰·PR

라이브 검증 (빌드 번들 실기동)

웹 스모크 3/3 GREEN (out/server/index.mjs spawn + 실 chromium):

  1. 목표 입력→런 개시 + 리로드 후 WS 재하이드레이션으로 잠금 복원 (데스크톱 탭전환 스모크의 웹 등가)
  2. 서버 단절→같은 포트 재기동 → 재접속 배너 + 스냅숏 권위 통지
  3. 완주 러너로 목표 입력→project.done(요약 표시·실행 버튼 재활성)

데스크톱 electron e2e 9/9 무회귀. verify 7게이트 GREEN: skills:lint·brain:check·format:check·typecheck(3 tsconfig)·lint(max-warnings 0)·test:coverage(93.27/86.39/92.96/94.84 — 전 floor 유지)·build.

적대 리뷰 (whole-branch · 7렌즈 find → 발견별 독립 refute)

15건 후보 → P1/P2 블로커 0. 확정 P3 4건 + 저비용 하드닝 2건 = 6건 반영(커밋 15607f0):

  • [8][9] web-server 테스트 헬퍼: 기동 실패 시 child kill+dataDir 정리·stop() 이미-종료 hang 가드
  • [11] HydrationProvider cursor 를 getEventCursor() 로 시드 — 최초 hello 가 구독보다 먼저 도착하는 초기 로드 레이스에서 첫 재접속이 nonce 미증가하는 gap 차단
  • [14] liveDuringLoadRef 리셋을 선택 effect→nonce-scoped effect 로 이동 — 선택 effect 자체 주석 불변식("여기서 비우면 라이브 행 유실") 복원
  • [3][4] SessionsPanel/AddAiWizard 오류 문구를 describeError 로 라우팅 — 웹 전송 단절을 "연산 실패"와 구분(B4 describeError 계약 일관화)

기각 7건(독립 refuter 확인): 서버 root 하위 로밍=채널 존재 이유(Phase C 격리 유예 명시)·데스크톱 workspace:set 조건부=preload 가 이미 엔진 전체 노출(위협모델)·ProjectPanel run()/ChatPanel markBusy 낙관적 잠금 drop=서브ms 클릭 윈도우 요구(orchestrator 가 project.created 후 초 단위 planTasks 를 거쳐 도달 불가·라이브 이벤트 자가복구)·포트 재사용 레이스=exit 핸들러가 재기동 전 포트 해제.

계획 대비 정정 (전부 리뷰/검증 근거)

  • handlers.test 동기-throw reject 를 async-IIFE 로 정규화(Promise.resolve(sync-throw) 는 rejects 미성립)
  • ws-bridge-binding.test 4번째 파리티 면에 setWorkspace 바인딩 추가(계획 Step 10 명령 누락)
  • messages/getChatActivity effect 의 불필요 eslint-disable 제거(리액티브 누락 deps 부재)
  • e2eCompletingRunner reply 헬퍼 stdout-only(greedy 정규식이 stream-event 임베드 payload 걸침)
  • ApprovalModal reject 가드를 process.on→typecheck-safe 결정론 테스트로(renderer tsconfig 에 node types 없음)
  • 웹 스모크 오프라인 테스트: context.setOffline 이 이 chromium 에서 활성 WS 미단절 → 서버 stop/재기동으로 소켓 단절 유발

비범위 (defer)

Origin/JWT/nonce/CSP·non-loopback 개방·authenticated presence = B5 / 컨테이너 Dockerfile·compose·자식 격리 = B6 / push 재생·증분 이벤트 API = 전체 재하이드레이션으로 대체 / per-run worktree = Phase C.

🤖 Generated with Claude Code

https://claude.ai/code/session_01E5UbxaveXP8j8kLVWcvXqD

Summary by CodeRabbit

  • New Features
    • 웹 모드에서 워크스페이스 경로를 직접 입력해 설정할 수 있으며, 경로 적용 결과를 안정적으로 반영합니다.
    • 웹/데스크톱에 맞춰 업데이트·연결 배너 표기가 분리되고, 재접속 시 실행/채팅/프로젝트 상태 복원이 강화되었습니다.
  • Bug Fixes
    • 연결 끊김·시간 초과·전송 실패 등에서 사용자 안내가 더 일관되게 표시됩니다.
  • Tests/Documentation
    • 웹용 E2E 시나리오(재하이드레이션/완주 케이스 포함)와 Playwright 설정(Chromium 설치 포함), 계획 문서가 보강되었습니다.

pdw96 added 16 commits July 4, 2026 22:43
@coderabbitai

coderabbitai Bot commented Jul 4, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@pdw96, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 56 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Free

Run ID: dfb83b1c-4b31-41e5-a291-36f65d8940e0

📥 Commits

Reviewing files that changed from the base of the PR and between af087d4 and a68cf23.

📒 Files selected for processing (1)
  • brain.md
📝 Walkthrough

Walkthrough

웹 모드에서 워크스페이스 경로 설정, 브라우저 브리지, 재하이드레이션, 런타임 게이팅이 추가됐다. 재접속 시 스냅샷 복원 로직이 패널들에 반영됐고, 결정론적 완주 e2e 러너와 web/electron Playwright 분리, 웹 스모크 테스트, CI chromium 설치, brain.md 재생성도 포함된다.

Changes

#197 B4 렌더러 웹 배선

Layer / File(s) Summary
설계 문서
docs/superpowers/plans/2026-07-05-issue197-B4-renderer-web-wiring.md
#197 B4 전체 태스크(0~11) 계획 문서가 새로 추가됨.
워크스페이스 경로 설정 코어 및 채널 배선
src/main/core/workspace/set-workspace.ts, ...test.ts, src/shared/transport/channels.ts, fixtures.ts, src/shared/types.ts, src/preload/index.ts, src/main/index.ts, src/server/handlers.ts, ...test.ts, src/server/boot.ts, src/renderer/bridge/ws-bridge.ts, ws-bridge-binding.test.ts
applyWorkspaceSet 헬퍼와 fleet:workspace:set 채널이 preload부터 서버 핸들러까지 전 계층에 배선됨.
웹 브리지 및 에러 메시지 유틸
src/renderer/bridge/web-bridge.ts, ...test.ts, src/renderer/bridge/errors.ts, ...test.ts, src/renderer/components/AddAiWizard.tsx
window.fleet 부재 시 WebSocket 브리지를 주입하고, 전송 오류 메시지를 describeError로 통일함.
재하이드레이션 프로바이더 및 배선
src/renderer/bridge/hydration.tsx, ...test.tsx, src/renderer/main.tsx
HydrationContext/HydrationProvider/ConnectionBanner가 재접속 nonce와 배너를 관리하고 main.tsx에 배선됨.
런타임 게이팅 UI
src/renderer/App.tsx, ...test.tsx, src/renderer/components/SessionsPanel.tsx, ...test.tsx, src/renderer/components/ProjectPanel.tsx, ...test.tsx
runtime prop과 hydrateNonce에 따라 UpdateBanner/업데이트 채널 섹션 게이팅 및 웹 전용 워크스페이스 경로 입력 UI가 구현됨.
ChatPanel 스냅샷 복원 및 전송 실패 흡수
src/renderer/components/ChatPanel.tsx, ...test.tsx, ApprovalModal.tsx, ...test.tsx, UpdateBanner.tsx
재접속 시 라이브/스냅샷 replace 병합 로직과 승인/업데이트 액션의 reject 흡수 처리가 추가됨.
완주 러너 및 웹 e2e 인프라
src/main/e2e.ts, ...test.ts, src/server/boot.ts, playwright.config.ts, e2e/web-server.ts, e2e/web-orchestration.web.e2e.ts, .github/workflows/e2e.yml, package.json
결정론적 완주 러너, Playwright web/electron 프로젝트 분리, fleet-server 기동 유틸 및 웹 스모크 테스트가 추가됨.
brain.md 아키텍처 맵 재생성
brain.md
파일/의존성/IPC 채널 통계와 모듈 의존 그래프가 새 모듈을 반영해 재산출됨.

Estimated code review effort: 5 (Critical) | ~120 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant initWebBridge
  participant WsBridge
  participant HydrationProvider
  participant fleetServer

  Browser->>initWebBridge: 페이지 로드 (window.fleet 없음)
  initWebBridge->>WsBridge: createWsBridge(browserSocket)
  WsBridge->>fleetServer: WebSocket 연결(wss://host/ws)
  fleetServer-->>WsBridge: hello + 이벤트 커서
  WsBridge->>HydrationProvider: onConnectionState/onEventCursor
  HydrationProvider->>HydrationProvider: nonce 증가 (재접속 감지)
  HydrationProvider->>Browser: 패널 스냅샷 재조회 트리거
Loading
sequenceDiagram
  participant ProjectPanel
  participant WsBridge
  participant handlers
  participant applyWorkspaceSet
  participant engine

  ProjectPanel->>WsBridge: setWorkspace(경로)
  WsBridge->>handlers: fleet:workspace:set invoke
  handlers->>applyWorkspaceSet: applyWorkspaceSet(deps, path)
  applyWorkspaceSet->>applyWorkspaceSet: 루트 하위 경로 검증
  applyWorkspaceSet->>engine: setWorkspace(resolved)
  engine-->>ProjectPanel: 적용된 경로 반환
Loading

Estimated code review effort: 5 (Critical) | ~120 minutes

Related Issues: #197 (B4 렌더러 웹모드 배선)

Suggested labels: area/renderer, area/server, e2e, docs

Suggested reviewers: pdw96


Note

🎁 Summarized by CodeRabbit Free

The PR author is not assigned a seat. To perform a comprehensive line-by-line review, please assign a seat to the pull request author through the subscription management page by visiting https://app.coderabbit.ai/login.

Comment @coderabbitai help to get the list of available commands.

@pdw96

pdw96 commented Jul 4, 2026

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6f75fd914e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/renderer/bridge/web-bridge.ts
Comment thread src/renderer/components/ProjectPanel.tsx Outdated
Comment thread e2e/web-orchestration.web.e2e.ts
@pdw96

pdw96 commented Jul 4, 2026

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Delightful!

Reviewed commit: a68cf23606

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant