@fcg-labs/cx-agent-hook 0.2.3 → 0.4.0

package/index.js

@@ -1,21 +1,26 @@
 /**
- * @fcg-labs/cx-agent-hook — FCG CX Agent 후킹 SDK (공개 표면).
+ * @fcg-labs/cx-agent-hook — FCG CX Agent 후킹 SDK (0.2.x 호환 공개 표면).
  *
- * 소비처(고객사 관리자 화면)가 닿는 것은 이 파일과 `./react` 뿐이다.
+ * 소비처(고객사 관리자 화면)가 닿는 것은 이 파일과 어댑터 서브패스뿐이다.
  * 전송 계층(`CxAgentClient`)은 `client.js` 에 있고 **밖으로 내보내지 않는다** —
  * 열어 두면 새 능력을 붙일 때 자연히 그리로 내려가고, 그 순간 `answer_id`
  * 수명 관리 같은 제품 지식이 다시 고객사 코드로 흩어진다. 능력이 모자라면
- * 저수준을 노출하는 게 아니라 **여기 표면을 채운다.**
+ * 저수준을 노출하는 게 아니라 **표면을 채운다.**
  *
- *   ① 답변 제안 수신          requestAnswer
+ *   ① 답변 제안 수신          requestAnswer · composeDraft
  *   ② 상담사 판단 후킹         answerSent · scored · edited · discarded
  *   ③ 문의·답변 쌍 적재        inquirySent   ★ 이게 빠지면 아무것도 안 쌓인다
  *
+ * 0.3.0: 구현은 `agent.js`(CxAgent) + `session.js`(InquirySession) 로
+ * 객체화됐다. 이 루트 표면은 그 위의 호환층(compat.js)이다 — 문의별 세션
+ * 상태·초안 영속이 필요하면 `@fcg-labs/cx-agent-hook/agent` 로 올라간다.
+ *
  * 원칙: 의존성 0 (내장 fetch), 어떤 메서드도 throw 하지 않는다.
  */
-import { CxAgentClient } from "./client.js";
 import { LOCALES, MESSAGES, normalizeLocale, resolveMessages } from "./locales.js";
+import { textOf } from "./agent.js";
 
+export { createCxHook } from "./compat.js";
 export { LOCALES, MESSAGES, normalizeLocale };
 
 /** 사유 코드 → 상담사가 읽을 평문.
@@ -26,326 +31,3 @@ export { LOCALES, MESSAGES, normalizeLocale };
 export function declineText(reason, locale) {
   return textOf(resolveMessages(locale), reason);
 }
-
-/** 문구 한 벌에서 사유 하나 꺼내기. 기계 코드를 화면에 노출하지 않는다. */
-function textOf(messages, reason) {
-  const known = messages[reason];
-  if (known) return known;
-  if (String(reason || "").startsWith("http_")) return messages.http_error;
-  return messages.unknown;
-}
-
-const NOT_CONFIGURED = {
-  ok: false, answered: false, answer: "", answerId: null,
-  evidence: [], declinedReason: "not_configured", raw: {},
-};
-
-/** 후킹 한 벌을 만든다 — 미설정이면 전부 무동작.
- *
- * 소비하는 쪽이 써야 할 것은 **주소·토큰·도메인 세 값을 자기 빌드 방식으로 읽어
- * 넘기는 일**뿐이다. 미설정 판정, 널 가드, 실패 시 돌려줄 모양, 사유 문구,
- * 채택 식별자의 수명은 전부 여기에 있다.
- */
-export function createCxHook(config = {}) {
-  const {
-    baseUrl, token, domain, api = "hub", onError,
-    // 화면 언어. 소비처가 이미 아는 값이라 setup 에서 한 번 넘기면 끝이고,
-    // 이후 문구는 전부 훅이 낸다 — 고객사가 사유별 문구를 알 필요가 없다.
-    locale, messages: messageOverrides,
-    // 중앙 설정 부트스트랩 (허브 GET client-config) — 기본 꺼짐(후방호환).
-    // 켜면 locale·문구·기능 플래그를 허브 발행분으로 병합한다. **명시 인자가
-    // 항상 이긴다** — 로컬이 정한 값은 원격이 못 덮는다. 전송 3요소(baseUrl·
-    // token·domain)는 부트스트랩의 닭-달걀이라 중앙화 대상이 아니다.
-    bootstrap = false,
-    ...rest
-  } = config;
-  const messages = resolveMessages(locale, messageOverrides);
-  let flags = {};
-  const client =
-    baseUrl && token && domain
-      ? new CxAgentClient({
-          baseUrl, token, domain, api,
-          // 후킹 실패는 CS 업무와 무관 — 기록만 하고 화면을 막지 않는다.
-          onError:
-            onError ||
-            ((err, ctx) => console.warn("[cx-agent-hook]", ctx.op, err.message)),
-          ...rest,
-        })
-      : null;
-
-  // 상담사가 어느 제안을 에디터에 넣었는지. **이 기록이 gold 쌍의 유일한 근거다**
-  // — 발송된 최종 문구가 어느 answer_id 의 교정본인지 잇는 값이라, 여기가 비면
-  // 후킹은 일어나도 "AI 초안 → 사람 최종본" 델타가 성립하지 않는다.
-  // 고객사가 들고 다니게 하면 지우는 시점(문의 전환·발송 완료)까지 남의 코드에
-  // 흩어진다. 라이브러리가 소유한다.
-  let adoptedAnswerId = null;
-
-  /** 채택된 제안에 대한 교정 후킹. 채택이 없었으면 조용히 무동작.
-   *
-   * `consume` 이 true 면 보낸 뒤 기록을 비운다 — 발송·폐기는 그 제안에 대한
-   * 마지막 판단이라 두 번 세면 안 되고, 점수·수정은 발송 전에 여러 번 올 수 있다.
-   */
-  const emit = (send, consume) => {
-    const id = adoptedAnswerId;
-    if (consume) adoptedAnswerId = null;
-    if (!client || !id) return;
-    send(id);
-  };
-
-  const applyRemoteConfig = (remote) => {
-    if (!remote || typeof remote !== "object") return;
-    if (remote.locale || remote.messages) {
-      // 원격 문구 위에 로컬 override 재적용 — 로컬 우선 규칙을 병합 순서로 강제
-      const next = resolveMessages(locale || remote.locale, {
-        ...(remote.messages || {}),
-        ...(messageOverrides || {}),
-      });
-      Object.assign(messages, next);
-    }
-    if (remote.flags && typeof remote.flags === "object") {
-      flags = { ...remote.flags };
-    }
-  };
-
-  const fetchRemoteConfig = async () => {
-    const doFetch = rest.fetchImpl || (typeof fetch !== "undefined" ? fetch : null);
-    if (!doFetch) return;
-    const cacheKey = `cx-agent-config:${domain}`;
-    try {
-      if (typeof sessionStorage !== "undefined") {
-        const cached = JSON.parse(sessionStorage.getItem(cacheKey) || "null");
-        if (cached && Date.now() - cached.at < 5 * 60 * 1000) {
-          applyRemoteConfig(cached.config);
-          return;
-        }
-      }
-    } catch { /* 캐시 실패는 무시 — 네트워크로 진행 */ }
-    const res = await doFetch(
-      `${String(baseUrl).replace(/\/$/, "")}/v1/domains/${domain}/client-config`,
-      { headers: { Authorization: `Bearer ${token}` } },
-    );
-    if (!res.ok) return; // 404(미발행) 포함 — 정적 설정으로 동작 (fail-soft)
-    const remote = await res.json();
-    applyRemoteConfig(remote);
-    try {
-      if (typeof sessionStorage !== "undefined") {
-        sessionStorage.setItem(
-          cacheKey, JSON.stringify({ at: Date.now(), config: remote }),
-        );
-      }
-    } catch { /* 저장 실패 무시 */ }
-  };
-
-  // 부트스트랩은 백그라운드 — 화면을 막지 않는다. 기다리고 싶은 소비처만
-  // ready 를 await 한다 (실패도 resolve — 훅은 항상 동작 가능 상태).
-  const ready = (bootstrap && client && api === "hub")
-    ? fetchRemoteConfig().catch(() => {})
-    : Promise.resolve();
-
-  return {
-    /** 세 값이 다 있으면 true */
-    enabled: Boolean(client),
-    /** 부트스트랩 완료 신호 — bootstrap 미사용 시 즉시 resolve */
-    ready,
-    /** 중앙 발행 기능 플래그 — 부트스트랩 전/미발행이면 빈 객체 */
-    get flags() { return flags; },
-    /** setup 에서 정해진 화면 언어 (정규화된 값) */
-    locale: normalizeLocale(locale),
-    /** 이 훅의 문구 한 벌 — 패널이 UI 라벨까지 여기서 가져간다 */
-    messages,
-    /** 사유 코드 → 이 훅의 언어로 된 평문 */
-    declineText(reason) {
-      return textOf(messages, reason);
-    },
-
-    /** 답변 제안 요청 — throw 하지 않음.
-     * context: 문의에 붙는 고객 상황(기기·버전·융합 키) — 선택. */
-    requestAnswer(inquiry, context) {
-      if (!client || !inquiry) return Promise.resolve(NOT_CONFIGURED);
-      return client.getAnswer(inquiry, context);
-    },
-
-    /** 조사 요청 (E-8) — "이 케이스 깊이 조사해줘" 트리거. 큐 적재만 하고 즉시
-     * 돌아온다 — 결과는 investigationStatus 로 폴링, 리포트 검수는 공장 웹. */
-    requestInvestigation(externalId, identity) {
-      if (!client) return Promise.resolve({ ok: false, status: "", error: "not_configured" });
-      return client.requestInvestigation(externalId, identity);
-    },
-
-    /** 조사 상태 (E-8) — {status: none|queued|running|succeeded|failed, jobId} */
-    investigationStatus(externalId) {
-      if (!client) return Promise.resolve({ ok: false, status: "", error: "not_configured" });
-      return client.investigationStatus(externalId);
-    },
-
-    /** 초안 직주입 스트리밍 — 답변 에디터에 AI 초안을 직접 흘려 쓴다.
-     *
-     * 패널·채택 버튼 없는 흐름의 정본이다: 소비처는 에디터 접근자(getDraft·
-     * setDraft)와 상태 표시(setStatus)만 배선하고, 나머지 제품 판단 —
-     * 덮어쓰기 확인, 교정 재시작 처리, 실패 시 원복, 문구, **자동 채택 귀속**
-     * (직주입 = 채택이므로 성공 시 noteAdopted 를 훅이 스스로 부른다) — 은
-     * 전부 여기 있다. answerSent 의 consume 의미론은 그대로다.
-     *
-     * @param {object} opts
-     * @param {string} opts.inquiry
-     * @param {Record<string,string>} [opts.context]
-     * @param {()=>string} [opts.getDraft] 현재 초안 (덮어쓰기 가드용)
-     * @param {(text:string)=>void} opts.setDraft 초안 전체 치환 (누적 스냅샷)
-     * @param {(text:string)=>void} [opts.setStatus] 한 줄 상태 ("" = 지움)
-     * @param {()=>boolean} [opts.confirmOverwrite] 초안이 비어있지 않을 때 확인
-     * @returns {{promise: Promise<object>, abort: ()=>void}}
-     */
-    composeDraft({ inquiry, context, getDraft, setDraft, setStatus,
-                   confirmOverwrite, customerName } = {}) {
-      const status = (text) => { if (setStatus) setStatus(text || ""); };
-      const noop = { promise: Promise.resolve(NOT_CONFIGURED), abort: () => {} };
-      if (!client || !inquiry || typeof setDraft !== "function") {
-        status(textOf(messages, "not_configured"));
-        return noop;
-      }
-      const existing = typeof getDraft === "function"
-        ? String(getDraft() || "") : "";
-      if (existing.trim() && !(confirmOverwrite && confirmOverwrite())) {
-        // 상담사가 쓰던 초안이 우선한다 — 조용히 덮지 않는다.
-        return { promise: Promise.resolve({ ...NOT_CONFIGURED, declinedReason: "" }),
-                 abort: () => {} };
-      }
-      // 새 스트림 = 이전 채택의 **교체 시도** (0.2.3). 확정(성공) 전까지
-      // 폐기하지 않고 보류한다 — 즉시 null 로 지우던 침묵 소거는 ① 실패 시
-      // 원복이 텍스트만 되고 채택 id 는 유실돼 verbatim 발송이 원장에서
-      // 빠졌고 ② 상담사가 명백히 버린 이전 제안이 기각 신호 없이 영구
-      // 미확인으로 남았다 (2026-08-10 적대 검증).
-      const supersededId = adoptedAnswerId;
-      adoptedAnswerId = null; // 스트림 중 발송이 낡은 id 로 귀속되는 것 방지
-
-      // 호칭 개인화 — 0.2.2: 이름을 context 로도 보낸다. 서버가 사설
-      // 서빙(AI_CS_LLM_PRIVATE)이면 인사말을 처음부터 이름으로 굽고,
-      // **저장은 하지 않는다**(로그에는 name_provided 마커만 — 서버 계약).
-      // 아래 클라 치환은 안전망으로 유지: 구 서버·클라우드 폴백처럼 이름
-      // 없이 "안녕하세요 고객님"으로 온 초안에만 작동하고, 서버가 이미
-      // 이름을 넣었으면 패턴이 안 맞아 no-op 이다.
-      const name = String(customerName || "").trim();
-      const contextWithName = name
-        ? { ...(context || {}), customerName: name }
-        : context;
-      const personalize = (text) =>
-        name
-          ? String(text).replace(
-              /안녕하세요[,]?\s*고객님/,
-              (m) => m.replace("고객님", `${name} 고객님`),
-            )
-          : text;
-
-      const controller = new AbortController();
-      let aborted = false;
-      let accumulated = "";
-      let pending = null;
-      const flushDraft = () => { pending = null; setDraft(personalize(accumulated)); };
-      const queueDraft = () => {
-        // trailing 스로틀 — 청크마다 리렌더하면 큰 화면이 버벅인다
-        if (pending === null) pending = setTimeout(flushDraft, 80);
-      };
-      const clearPending = () => {
-        if (pending !== null) { clearTimeout(pending); pending = null; }
-      };
-
-      status(messages.ui_requesting);
-      setDraft("");
-      const promise = client.getAnswerStream(inquiry, contextWithName, {
-        signal: controller.signal,
-        onDelta(text) { accumulated += text; queueDraft(); },
-        onRestart() {
-          // 계약 위반 교정 — 지금까지 보인 초안은 폐기본이다
-          clearPending();
-          accumulated = "";
-          setDraft("");
-          status(messages.ui_correcting);
-        },
-        onStage(phase) {
-          if (phase === "generating") status(messages.ui_requesting);
-        },
-      }).then((result) => {
-        clearPending();
-        if (aborted) {
-          // 소비자 주도 중단 (문의 전환 등) — 화면은 소비자가 이미 재구성했다.
-          // 여기서 원복하면 **이전 문의의 초안이 새 문의 에디터에 주입**된다
-          // (0.2.3 — A 답변이 B 로 발송될 수 있던 오염 경로). 아무것도 안 만진다.
-          return result;
-        }
-        if (result.answered) {
-          setDraft(personalize(result.answer)); // 정본 확정 (strip+호칭 반영)
-          const newId = result.answerId ?? null;
-          if (supersededId && supersededId !== newId) {
-            // 교체 확정 — 이전 제안은 기각으로 원장에 남긴다 (침묵 소거 금지).
-            // fire-and-forget: 실패해도 발송 UX 무간섭.
-            client.discarded(supersededId, "", "redraft");
-          }
-          adoptedAnswerId = newId;
-          status("");
-        } else {
-          // 실패·거절 — 미완성 텍스트를 에디터에 남기지 않고 원래 초안 복원.
-          // 채택 기록도 함께 원복 — 텍스트만 되돌리면 복원된 이전 초안의
-          // verbatim 발송이 원장에서 빠진다 (0.2.3 비대칭 수정).
-          setDraft(existing);
-          adoptedAnswerId = supersededId;
-          status(textOf(messages, result.declinedReason || "unknown"));
-        }
-        return result;
-      });
-      return {
-        promise,
-        abort: () => {
-          // 중단 = 화면 상태는 소비자 소유, 원장 상태는 요청 전으로 복귀 —
-          // 직후 소비자의 폐기 훅(discarded)이 이전 채택 id 로 발화할 수 있다.
-          aborted = true;
-          adoptedAnswerId = supersededId;
-          clearPending();
-          controller.abort();
-        },
-      };
-    },
-
-    /** 제안을 에디터에 넣었다 (패널이 부른다) */
-    noteAdopted(answerId) {
-      adoptedAnswerId = answerId || null;
-    },
-    /** 채택 기록 폐기 — 다른 문의로 옮겼을 때 */
-    clearAdopted() {
-      adoptedAnswerId = null;
-    },
-    /** 지금 채택된 제안이 있나 (표시·검증용) */
-    get adoptedAnswerId() {
-      return adoptedAnswerId;
-    },
-
-    /** 답변 발송됨 — 채택본이었다면 gold 쌍으로 후킹 (fire-and-forget).
-     *
-     * 채택 없이 상담사가 직접 쓴 답변이면 아무 일도 안 한다. 한 번 보내면
-     * 기록을 비운다 — 같은 문의를 다시 발송해도 중복 교정이 쌓이지 않는다.
-     */
-    answerSent(finalText, agent) {
-      emit((id) => client.sent(id, finalText, agent), true);
-    },
-    /** 제안 품질 점수 1~5 (발송 전에 여러 번 올 수 있어 기록을 비우지 않는다) */
-    scored(score, agent) {
-      emit((id) => client.scored(id, score, agent), false);
-    },
-    /** 제안을 고쳐 썼다 — 초안↔최종본 델타 (발송 전 중간 저장 가능) */
-    edited(finalText, agent) {
-      emit((id) => client.edited(id, finalText, agent), false);
-    },
-    /** 제안을 버렸다 + 이유. 그 제안에 대한 마지막 판단이라 기록을 비운다. */
-    discarded(agent, note) {
-      emit((id) => client.discarded(id, agent, note), true);
-    },
-
-    /** 문의+상담사 최종답변 쌍 적재 (fire-and-forget, external_id 멱등).
-     *
-     * AI 제안을 안 써도 이것만 붙으면 광물이 쌓인다 — 인입의 유일한 통로.
-     */
-    inquirySent({ externalId, inquiry, reply, agent, meta } = {}) {
-      if (!client || !externalId || !inquiry) return;
-      client.logInquiry({ externalId, inquiry, reply, agent, meta });
-    },
-  };
-}

package/locales.js

@@ -31,6 +31,20 @@ const en = {
   ui_adopt: "Insert into editor",
   ui_evidence: "Sources",
   ui_correcting: "Fixing phrasing — rewriting…",
+  ui_action_execute: "Process",
+  ui_action_confirm_default: "Run this action?",
+  ui_action_confirm_ok: "Yes, run",
+  ui_action_confirm_cancel: "Cancel",
+  ui_action_ack: "I understand this cannot be undone",
+  ui_action_running: "Processing…",
+  ui_action_succeeded: "Done",
+  ui_action_failed: "Not applied",
+  ui_action_unknown: "Could not confirm whether this was applied — check again before retrying.",
+  ui_action_reconcile: "Check again",
+  ui_action_disabled: "Actions are not enabled for this seat.",
+  ui_action_risk_low: "low risk",
+  ui_action_risk_medium: "medium risk",
+  ui_action_risk_high: "high risk",
   ui_overwrite_confirm: "Replace your current draft with the AI draft?",
   // 거절·오류 사유
   not_configured: "AI reply suggestions are not connected yet.",
@@ -57,6 +71,20 @@ const ko = {
   ui_adopt: "에디터에 넣기",
   ui_evidence: "근거",
   ui_correcting: "표현 교정 중 — 다시 쓰는 중...",
+  ui_action_execute: "처리하기",
+  ui_action_confirm_default: "이 처리를 진행할까요?",
+  ui_action_confirm_ok: "네, 진행",
+  ui_action_confirm_cancel: "취소",
+  ui_action_ack: "되돌릴 수 없음을 확인했습니다",
+  ui_action_running: "처리 중…",
+  ui_action_succeeded: "처리 완료",
+  ui_action_failed: "처리되지 않음",
+  ui_action_unknown: "실행 여부를 확인하지 못했습니다 — 다시 누르지 말고 먼저 확인하세요.",
+  ui_action_reconcile: "다시 확인",
+  ui_action_disabled: "이 계정에는 처리 기능이 켜져 있지 않습니다.",
+  ui_action_risk_low: "위험 낮음",
+  ui_action_risk_medium: "위험 보통",
+  ui_action_risk_high: "위험 높음",
   ui_overwrite_confirm: "작성 중인 답변을 지우고 AI 초안으로 바꿀까요?",
   not_configured: "AI 답변 제안이 아직 연결되지 않았습니다.",
   unsupported_api: "AI 답변 제안이 아직 연결되지 않았습니다.",
@@ -78,6 +106,20 @@ const ja = {
   ui_adopt: "エディタに挿入",
   ui_evidence: "根拠",
   ui_correcting: "表現を修正中 — 書き直しています…",
+  ui_action_execute: "処理する",
+  ui_action_confirm_default: "この処理を実行しますか？",
+  ui_action_confirm_ok: "はい、実行",
+  ui_action_confirm_cancel: "キャンセル",
+  ui_action_ack: "元に戻せないことを確認しました",
+  ui_action_running: "処理中…",
+  ui_action_succeeded: "処理完了",
+  ui_action_failed: "未処理",
+  ui_action_unknown: "実行の有無を確認できませんでした — 再度押さずに先に確認してください。",
+  ui_action_reconcile: "再確認",
+  ui_action_disabled: "このアカウントでは処理機能が有効になっていません。",
+  ui_action_risk_low: "リスク低",
+  ui_action_risk_medium: "リスク中",
+  ui_action_risk_high: "リスク高",
   ui_overwrite_confirm: "作成中の回答を消してAI下書きに置き換えますか？",
   not_configured: "AI 返信案はまだ接続されていません。",
   unsupported_api: "AI 返信案はまだ接続されていません。",
@@ -99,6 +141,20 @@ const zhTW = {
   ui_adopt: "插入編輯器",
   ui_evidence: "依據",
   ui_correcting: "正在修正表述 — 重新撰寫中…",
+  ui_action_execute: "處理",
+  ui_action_confirm_default: "要執行這項處理嗎？",
+  ui_action_confirm_ok: "是，執行",
+  ui_action_confirm_cancel: "取消",
+  ui_action_ack: "我已確認此操作無法復原",
+  ui_action_running: "處理中…",
+  ui_action_succeeded: "處理完成",
+  ui_action_failed: "未套用",
+  ui_action_unknown: "無法確認是否已執行 — 請先確認再重試。",
+  ui_action_reconcile: "再次確認",
+  ui_action_disabled: "此帳號未啟用處理功能。",
+  ui_action_risk_low: "風險低",
+  ui_action_risk_medium: "風險中",
+  ui_action_risk_high: "風險高",
   ui_overwrite_confirm: "要清除目前草稿並以 AI 草稿取代嗎？",
   not_configured: "AI 回覆建議尚未連接。",
   unsupported_api: "AI 回覆建議尚未連接。",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fcg-labs/cx-agent-hook",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "FCG CX Agent 후킹 SDK — 서빙 답변 수신 + CS팀 교정(점수·수정·발송) 후킹. 의존성 0, CMS에 install만으로 이식",
   "type": "module",
   "main": "index.js",
@@ -10,6 +10,10 @@
       "types": "./index.d.ts",
       "import": "./index.js"
     },
+    "./agent": {
+      "types": "./agent.d.ts",
+      "import": "./agent.js"
+    },
     "./react": {
       "types": "./react.d.ts",
       "import": "./react.js"
@@ -54,8 +58,13 @@
   "files": [
     "index.js",
     "index.d.ts",
+    "agent.js",
+    "agent.d.ts",
+    "session.js",
+    "compat.js",
     "client.js",
     "client.d.ts",
+    "MIGRATION.md",
     "view.js",
     "view.d.ts",
     "locales.js",

package/react.js

@@ -19,11 +19,25 @@
  */
 import { createElement as h, useCallback, useEffect, useRef, useState } from "react";
 
-import { aiSuggestView, CLS } from "./view.js";
+import { aiSuggestTree, aiSuggestView, CLS } from "./view.js";
 
 // 표시 판단은 프레임워크 중립 코어가 갖는다 — Vue·웹 컴포넌트와 같은 것을 쓴다.
 export { aiSuggestView };
 
+/** 트리 노드 → React 엘리먼트 — 구조는 view.aiSuggestTree 가 소유한다. */
+function renderNode(node, actions, key) {
+  const props = { key, className: node.cls };
+  if (node.tag === "button") {
+    props.type = node.type || "button";
+    props.disabled = Boolean(node.disabled);
+  }
+  if (node.action && actions[node.action]) props.onClick = actions[node.action];
+  const children = node.children
+    ? node.children.map((c, i) => renderNode(c, actions, i))
+    : node.text;
+  return h(node.tag, props, children);
+}
+
 /**
  * @param {object}   props
  * @param {object}   props.hook      createCxHook() 결과
@@ -66,7 +80,7 @@ export function AiSuggestPanel({ hook, inquiry, context, onAdopt, className }) {
 
   if (!hook || !hook.enabled) return null;
 
-  const view = aiSuggestView({
+  const tree = aiSuggestTree({
     state, result, declineText: hook.declineText, messages: hook.messages,
   });
 
@@ -78,40 +92,7 @@ export function AiSuggestPanel({ hook, inquiry, context, onAdopt, className }) {
       // 행 선택이 토글되면 제안이 초기화된다.
       onClick: (event) => event.stopPropagation(),
     },
-    h(
-      "div",
-      { className: CLS.head },
-      h(
-        "button",
-        {
-          type: "button",
-          className: CLS.button,
-          disabled: view.buttonDisabled,
-          onClick: request,
-        },
-        view.buttonLabel,
-      ),
-      view.showAdopt &&
-        h(
-          "button",
-          { type: "button", className: CLS.adopt, onClick: adopt },
-          view.adoptLabel,
-        ),
-    ),
-    view.body.kind === "answer" &&
-      h(
-        "div",
-        { className: CLS.body },
-        h("div", { className: CLS.answer }, view.body.text),
-        view.body.evidence.length > 0 &&
-          h(
-            "div",
-            { className: CLS.evidence },
-            `${view.body.evidenceLabel}: ${view.body.evidence.join(" · ")}`,
-          ),
-      ),
-    view.body.kind === "declined" &&
-      h("div", { className: CLS.declined }, view.body.text),
+    tree.children.map((node, i) => renderNode(node, { request, adopt }, i)),
   );
 }