feat(preview): embedded dev-server preview pane + dev shutdown controls (#1062)

* feat: embedded preview proxy for local dev servers

Add a same-origin server proxy under /api/preview/proxy/:id and
matching UI surfaces so local dev servers (Vite, Next, etc.) can be
embedded inside OpenChamber.

Server (packages/web/server):
- New lib/preview/proxy-runtime.js: cookie-gated HTTP+WebSocket proxy
  to loopback hosts only, with TTL'd targets and SSRF allowlist.
- index.js wires the runtime alongside terminal/event-stream.

UI (packages/ui):
- ContextPanel preview tab with iframe, reload, and open-in-browser.
- Inline html code-block preview in MarkdownRenderer.
- Terminal auto-detects loopback URLs and offers to open them.
- i18n keys across en, es, pt-BR, uk, zh-CN.

* perf(preview): cache proxy targets across PreviewPane remounts

Module-scoped Map keyed by upstream URL so tab switches and component
remounts within the same page session reuse the existing proxy
registration instead of POSTing a fresh target each time.

In-memory only by design: the server holds the target map in memory
and the auth cookie is HttpOnly + scoped to the proxy id, so a stale
persisted entry would 404 after a server restart. Entries are evicted
on registration error and on a 30s safety margin before TTL expiry.

* feat(preview): surface dev-server-down state with retry overlay

Iframes don't expose HTTP status to the parent, so when the proxy
returns a 502 (upstream dev server is offline) the iframe just renders
the raw JSON error body. Probe the proxy URL out-of-band with HEAD
(falling back to GET on 404/405) and replace the iframe with a
friendly 'Dev server is not responding' overlay + retry button when
the upstream is unreachable.

Re-probes on reload, on URL change, and on proxy re-registration.

* feat(preview): strip frame-busting response headers

Many dev servers (Next.js, others) send X-Frame-Options: SAMEORIGIN
and/or a CSP with frame-ancestors that block embedding inside the
OpenChamber iframe. The proxy is same-origin and already
authenticated per-target, so embedding is otherwise safe.

- Drop X-Frame-Options outright on proxied responses.
- Surgically remove only the frame-ancestors directive from
  Content-Security-Policy and Content-Security-Policy-Report-Only,
  preserving every other directive. Drops the header entirely if no
  directives remain.
- Verified end-to-end: upstream sending both headers comes through
  with X-Frame-Options removed, CSP retaining default-src/script-src
  but no frame-ancestors, and unrelated headers untouched.

* docs(preview): design for remote-host relay agent

Design-only doc for the next phase of the embedded preview feature:
when OpenChamber runs remotely (cloud/shared/tunnel) and the user's
dev server runs on their local machine. Covers architecture (local
agent + outbound control WebSocket + server dispatch), pairing flow,
wire protocol, security model, failure modes, open questions, and
implementation milestones. No code changes.

* feat(preview): auto-open preview pane for loopback URLs in chat

Detect http(s) loopback URLs in incoming assistant messages and open the
preview pane automatically, deduped per (session, url) pair so re-renders
or repeated mentions do not steal focus. Add an inline Preview button
next to loopback links in chat markdown as a manual fallback when the
auto-open was dismissed or the URL appeared in an older message.

- url.ts: isLoopbackHttpUrl / extractLoopbackUrls helpers
- ChatContainer: module-level dedupe Set + effect on active session tail
- MarkdownRendererImpl: optional onPreviewLoopback in main renderer only
  (SimpleMarkdownRenderer for tool diffs is intentionally untouched)
- Reuses existing terminalView.preview.open i18n keys

* feat: preview enhancements, dev shutdown, and reliability fixes

Add preview start/stop UI in ContextPanel/Header, improve URL detection (Python HTTP server logs, trailing punctuation, IPv6 loopback), fix proxy path filtering to avoid disrupting non-preview WebSockets. Add dev-only /api/system/dev-shutdown endpoint and Header button to terminate local dev processes and orphaned preview servers. Improve terminal cleanup with process group killing, event pipeline reconnect backoff. Update file read APIs with optional flag and cache control. Add /api/system/free-port endpoint, detectDevServer.ts utility, and preview/shutdown i18n strings for 5 languages.

* fix: harden preview support

* fix: keep terminal toolbar interactive

* fix: keep expanded terminal below header

* fix: keep preview iframe under proxy path

* fix: respect project action preview urls

* fix: rewrite preview asset urls

* feat: capture preview console logs

* feat: annotate preview elements

* feat: attach preview annotation screenshots

* fix: improve proxied preview hmr

* feat: refine preview action UX

* fix: address preview review feedback

* fix: show auto-discover preview wait state

---------

Co-authored-by: William Biggers <will@Williams-MacBook-Pro.local>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/lib/i18n/messages/ko.ts

@@ -696,6 +696,57 @@ export const dict: Record<I18nKey, string> = {
   'contextPanel.mode.diff': 'diff',
   'contextPanel.mode.plan': '플랜',
   'contextPanel.mode.context': '컨텍스트',
+  'contextPanel.mode.preview': '미리보기',
+  'contextPanel.preview.actions.reload': '미리보기 새로고침',
+  'contextPanel.preview.actions.openExternal': '브라우저에서 열기',
+  'contextPanel.preview.actions.retry': '다시 시도',
+  'contextPanel.preview.iframeTitle': '미리보기',
+  'contextPanel.preview.invalidUrl': '미리보기에는 유효한 http(s) URL이 필요합니다.',
+  'contextPanel.preview.empty': '미리보기 URL이 없습니다',
+  'contextPanel.preview.loading': '미리보기 프록시에 연결 중...',
+  'contextPanel.preview.proxyError': '미리보기 프록시를 시작할 수 없습니다.',
+  'contextPanel.preview.upstreamUnreachable': '개발 서버가 응답하지 않습니다.',
+  'contextPanel.preview.upstreamUnreachableHint': '개발 서버가 여전히 실행 중인지 확인한 후 다시 시도하세요.',
+  'contextPanel.preview.startingServer': '개발 서버를 시작하는 중...',
+  'contextPanel.preview.startingServerHint': '서버가 연결을 수락할 때까지 기다리는 중입니다.',
+  'contextPanel.preview.title': '미리보기',
+  'contextPanel.preview.description': '프로젝트 작업 또는 터미널 Preview 버튼으로 미리보기를 여세요.',
+  'contextPanel.preview.startPreview': '미리보기 시작',
+  'contextPanel.preview.starting': '시작 중...',
+  'contextPanel.preview.noDevServer': '개발 서버 명령을 찾을 수 없습니다. 프로젝트 동작을 구성하거나 package.json에 "dev" 스크립트를 추가하세요.',
+  'contextPanel.preview.startFailed': '미리보기 서버를 시작하지 못했습니다.',
+  'contextPanel.preview.serverExited': '개발 서버가 예기치 않게 종료되었습니다.',
+  'contextPanel.preview.noUrlDetected': '개발 서버가 시작되었지만 출력에서 URL이 감지되지 않았습니다. 미리보기 터미널 탭에서 로그를 확인하세요.',
+  'contextPanel.preview.serverExitedWithLog': '개발 서버가 예기치 않게 종료되었습니다. 마지막 출력:\n\n{log}',
+  'contextPanel.preview.noUrlDetectedWithLog': '개발 서버가 응답할 수 있는 상태가 되지 못했습니다. 마지막 출력:\n\n{log}',
+  'contextPanel.preview.console.open': '미리보기 콘솔 열기',
+  'contextPanel.preview.console.waiting': '미리보기 콘솔 대기 중',
+  'contextPanel.preview.console.title': '미리보기 콘솔',
+  'contextPanel.preview.console.attach': '첨부',
+  'contextPanel.preview.console.copy': '복사',
+  'contextPanel.preview.console.clear': '지우기',
+  'contextPanel.preview.console.empty': '아직 미리보기 콘솔 이벤트가 없습니다.',
+  'contextPanel.preview.console.noFilteredEvents': '이 필터와 일치하는 이벤트가 없습니다.',
+  'contextPanel.preview.console.runtimeError': '런타임 오류',
+  'contextPanel.preview.console.copied': '미리보기 콘솔 복사됨',
+  'contextPanel.preview.console.copyFailed': '미리보기 콘솔 복사 실패',
+  'contextPanel.preview.console.attached': '미리보기 콘솔이 채팅에 첨부되었습니다',
+  'contextPanel.preview.console.attachNoSession': '미리보기 로그를 첨부하기 전에 채팅 세션을 여세요',
+  'contextPanel.preview.console.attachAnnotation': '이것은 이 프로젝트에서 실행 중인 개발 서버의 브라우저 콘솔 로그입니다.',
+  'contextPanel.preview.inspect.toggle': '미리보기 요소 검사',
+  'contextPanel.preview.inspect.attached': '미리보기 주석이 채팅에 첨부되었습니다',
+  'contextPanel.preview.inspect.attachNoSession': '미리보기 주석을 첨부하기 전에 채팅 세션을 여세요',
+  'contextPanel.preview.inspect.attachAnnotation': '인앱 미리보기에서 선택한 DOM 요소입니다.',
+  'contextPanel.preview.inspect.attachAnnotationWithScreenshot': '인앱 미리보기에서 선택한 DOM 요소입니다. 선택한 요소가 강조된 보이는 미리보기 영역 스크린샷이 첨부되었습니다.',
+  'contextPanel.preview.console.filter.all': '전체',
+  'contextPanel.preview.console.filter.errors': '오류',
+  'contextPanel.preview.console.filter.warnings': '경고',
+  'contextPanel.preview.console.filter.logs': '로그',
+  'terminalView.preview.open': '미리보기',
+  'terminalView.preview.openTitle': '미리보기 패널 열기',
+  'header.services.shutdownDev': 'OpenChamber 종료',
+  'chat.messageBody.actions.openPreviewAria': '미리보기 열기',
+  'chat.messageBody.actions.openPreview': '미리보기 열기',
   'contextPanel.tab.closeTabAria': '{label} tab 닫기',
   'contextPanel.actions.collapsePanel': '접기 패널',
   'contextPanel.actions.expandPanel': '펼치기 패널',
@@ -1383,6 +1434,11 @@ export const dict: Record<I18nKey, string> = {
   'chat.chatInput.toast.openSessionFirst': '먼저 세션을 여세요',
   'chat.chatInput.toast.togglePermissionAutoAcceptFailed': 'toggle permission auto-accept 실패',
   'chat.chatInput.reviewComments': 'Review 댓글:',
+  'chat.chatInput.devServerLogs': 'Dev Server 로그:',
+  'chat.chatInput.devServerLogsRemove': 'Dev Server 로그 제거',
+  'chat.chatInput.previewAnnotations': '미리보기 주석:',
+  'chat.chatInput.previewContext': '미리보기 컨텍스트:',
+  'chat.chatInput.previewContextRemove': '미리보기 컨텍스트 제거',
   'chat.chatInput.projectRoot': '프로젝트 root',
   'chat.chatInput.branch': '브랜치',
   'chat.chatInput.worktrees': '워크트리',
@@ -1763,7 +1819,9 @@ export const dict: Record<I18nKey, string> = {
   'projectActions.actions.addActionAria': 'action 추가',
   'projectActions.actions.addAction': 'action 추가',
   'projectActions.actions.addNewAction': 'new action 추가',
+  'projectActions.actions.autoDiscover': '자동 검색',
   'projectActions.actions.chooseActionAria': '선택 프로젝트 작업',
+  'projectActions.actions.openPreview': 'Preview 열기',
   'projectActions.actions.runNamedAria': '실행 {name}',
   'projectActions.actions.stopNamedAria': '중지 {name}',
   'projectActions.label.fallbackAction': '작업',