feat(my-deepagent): v0.3 PR #8 — conversation-centric Web GUI (/conversation.html)

Workflow run 페이지를 archive 로 격하시키고, 사용자가 처음 보는 화면을 chat-style 대화 thread 로 전환. Claude Code 의 Web GUI 와 동일한 UX. 핵심 동작: - 새 페이지 `/conversation.html` 에서 세션을 picker 로 고르거나 "새 대화" 버튼으로 만들고 메시지 입력. Cmd/Ctrl+Enter 로 전송. - POST /api/sessions/{id}/messages 가 user MessageRow 를 영속한 즉시 200 응답 후 `asyncio.create_task(invoke_session_agent(...))` 로 백그라운드 invoke 발사. - 백그라운드 task 는 lifespan 에서 1회 열어둔 LangGraph saver 를 재사용하고 agent.ainvoke → assistant MessageRow 영속 → 자동 compaction 까지 처리. - 기존 SSE 스트림 (`/api/sessions/{id}/stream`) 이 새 메시지를 push, 프론트엔드의 `EventSource` 가 받아 thread 에 렌더. 신규 / 수정 파일: - `static/conversation.html` (신규): chat UI 마크업. data-page="conversation". - `static/app.js`: 새 페이지 핸들러 `bootstrapConversationPage` + 세션 picker + 메시지 thread 렌더 + SSE 구독 + Cmd/Ctrl+Enter 단축키. XSS 정책 동일: 모든 사용자 콘텐츠는 `textContent` 만 사용. - `static/style.css`: `.messages-thread`, `.msg-bubble`, `.conv-topbar`, `.conv-input-bar` 등 chat UI 스타일. - `api/app.py`: lifespan 에서 LangGraph saver 를 1회 열어 `app.state.saver` 에 보관 (Postgres 일 때만). - `api/agent_runner.py` (신규): `invoke_session_agent(...)` — REPL 의 `InteractiveSession + _invoke_and_stream` 와 동일한 stack 을 HTTP background context 용으로 재구성. 실패는 로깅 + return. - `api/routes/sessions.py`: POST /messages 가 background task 발사 + ref 를 `app.state.pending_invocations` set 에 보관 (RUF006 / GC drop 방지). 테스트 (`tests/integration/test_conversation_gui.py`, 4 케이스): - GET /conversation.html → 200 + 필수 마크업 - POST /messages → 200 + user row 영속 + 스텁 runner 호출 확인 - 백그라운드 task ref 가 `pending_invocations` 에 잡혀있고 완료 후 자동 discard - 스텁 runner 가 assistant row 영속 → user + assistant 시퀀스 검증 게이트: - ruff check / format --check / mypy: PASS - pytest -q --ignore=tests/integration/test_e2e_workflow.py --ignore=tests/integration/test_openrouter_smoke.py: 675 passed (4 신규 포함) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-17 21:03:09 +09:00
parent 61b34af0e4
commit e326c07dcb
8 changed files with 1067 additions and 1 deletions
--- a/my-deepagent/static/conversation.html
+++ b/my-deepagent/static/conversation.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>my-deepagent · 대화</title>
+  <link rel="stylesheet" href="/static/style.css" />
+</head>
+<body data-page="conversation">
+  <header>
+    <h1><a href="/">my-deepagent</a></h1>
+    <nav>
+      <a href="/conversation.html" class="active">대화</a>
+      <a href="/">Runs (아카이브)</a>
+    </nav>
+  </header>
+  <main class="conversation-main">
+    <div id="error" class="error-banner" style="display:none"></div>
+
+    <!-- Top bar: session picker + new conversation button -->
+    <div class="conv-topbar">
+      <label for="session-picker" class="conv-label">세션</label>
+      <select id="session-picker" class="conv-picker">
+        <option value="">(세션 선택…)</option>
+      </select>
+      <button id="new-session-btn" type="button" class="conv-action-btn">새 대화</button>
+      <span class="conv-session-state" id="session-state-pill"></span>
+    </div>
+
+    <!-- Message thread -->
+    <div id="messages" class="messages-thread">
+      <div class="conv-empty" id="conv-empty">대화를 시작하려면 위에서 세션을 선택하거나 "새 대화"를 누르세요.</div>
+    </div>
+
+    <!-- Input bar -->
+    <form id="message-form" class="conv-input-bar">
+      <textarea
+        id="message-input"
+        rows="2"
+        placeholder="메시지를 입력하세요…  (Cmd/Ctrl+Enter 로 전송)"
+        autocomplete="off"
+        disabled
+      ></textarea>
+      <button id="send-btn" type="submit" disabled>전송</button>
+    </form>
+  </main>
+  <script src="/static/app.js"></script>
+</body>
+</html>