@fcg-labs/cx-agent-hook 0.8.0 → 0.8.1

package/MIGRATION.md

@@ -228,3 +228,17 @@ headless 2단계: ① 스타일 0 — styles.css 를 import 하지 않는다.
 - 발송: 본안이 아닌 후보를 골라 보냈으면 `sent` 피드백의 `note` 에
   `variant:<id>` 가 남는다 — 와이어 계약(허브 Go) 무변경.
 - React: `CandidatePicker` 신규. `AiSuggestPanel` 은 무변경.
+
+# 0.8.0 → 0.8.1 마이그레이션
+
+## 요약 — 후보 피커 표시 품질. **깨지는 것 없음** (additive)
+
+- 발췌: 전 후보가 같은 인사말로 시작해 카드가 전부 똑같아 보이던 것 →
+  **공통 접두를 건너뛰고 차이가 나는 문장 첫머리부터** 보여준다. 절단은
+  어절 경계에서만, 말줄임표는 실제 잘림에만 (160→200자).
+- 카드에 전문 노드(`full`, `fcx-cand-full`)와 글자수 표기(`ui_candidate_length`)
+  추가. React `CandidatePicker` 는 카드 클릭=전문 펼침(컴포넌트 로컬 상태,
+  [사용] 버튼과 분리). 트리를 그대로 걷는 구식 어댑터는 `full` 이 children
+  밖이라 영향 없음.
+- ko 카피: `ui_candidate_use` 「이 안 쓰기」 → **「이 안 사용」** ("안 쓰기(不用)"
+  오독 교정, 2026-08-28 운영 워크스루). 다른 로케일 무변경.

package/locales.js

@@ -32,6 +32,7 @@ const en = {
   ui_candidates: "AI draft options",
   ui_candidate_use: "Use this draft",
   ui_candidate_chosen: "Selected",
+  ui_candidate_length: "{n} chars",
   ui_feedback_ask: "Was this draft helpful?",
   ui_feedback_up: "Helpful",
   ui_feedback_down: "Not helpful",
@@ -98,8 +99,10 @@ const ko = {
   ui_requesting: "제안 생성 중...",
   ui_adopt: "에디터에 넣기",
   ui_candidates: "AI 답변 후보",
-  ui_candidate_use: "이 안 쓰기",
+  // "이 안 쓰기"는 "안 쓰기(不用)"로 오독됐다 (2026-08-28 운영 워크스루)
+  ui_candidate_use: "이 안 사용",
   ui_candidate_chosen: "선택됨",
+  ui_candidate_length: "{n}자",
   ui_feedback_ask: "이 초안, 쓸 만했나요?",
   ui_feedback_up: "좋아요",
   ui_feedback_down: "싫어요",
@@ -163,6 +166,7 @@ const ja = {
   ui_candidates: "AI回答の候補",
   ui_candidate_use: "この案を使う",
   ui_candidate_chosen: "選択中",
+  ui_candidate_length: "{n}字",
   ui_feedback_ask: "この下書きは役に立ちましたか?",
   ui_feedback_up: "良い",
   ui_feedback_down: "悪い",
@@ -225,6 +229,7 @@ const zhTW = {
   ui_candidates: "AI 回覆候選",
   ui_candidate_use: "使用此草稿",
   ui_candidate_chosen: "已選擇",
+  ui_candidate_length: "{n} 字",
   ui_adopt: "插入編輯器",
   ui_feedback_ask: "這份草稿有幫助嗎?",
   ui_feedback_up: "有幫助",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fcg-labs/cx-agent-hook",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "FCG CX Agent 후킹 SDK — 서빙 답변 수신 + CS팀 교정(점수·수정·발송) 후킹. 의존성 0, CMS에 install만으로 이식",
   "type": "module",
   "main": "index.js",

package/react.js

@@ -339,22 +339,35 @@ export function AiFeedbackBar({ session, agent, actorClaimed, className }) {
 //                  messages={cxMessages} onChoose={(i) => session.choose(i)} />
 // ```
 // 표시 판단은 view.candidatePickerTree 가 소유한다 — 2안 미만이면 아무것도
-// 그리지 않는다. 선택은 세션(choose)이 정본이라 이 컴포넌트는 상태가 없다.
+// 그리지 않는다. 선택은 세션(choose)이 정본이라 세션 상태는 없고, 전문
+// 펼침(0.8.1)만 컴포넌트 로컬이다 — 카드 클릭=전문 토글, [사용] 버튼과 분리.
 
 export function CandidatePicker({ candidates, chosen, messages, onChoose, className }) {
+  const [expanded, setExpanded] = useState(() => new Set());
   const tree = candidatePickerTree({ candidates, chosen, messages });
   if (!tree) return null;
+  const toggle = (index) => setExpanded((prev) => {
+    const next = new Set(prev);
+    if (next.has(index)) next.delete(index); else next.add(index);
+    return next;
+  });
   const render = (node, key) => {
     const props = { key, className: node.cls };
     if (node.tag === "button") {
       props.type = node.type || "button";
       if (node.action === "choose" && onChoose) {
-        props.onClick = () => onChoose(node.index);
+        props.onClick = (event) => { event.stopPropagation(); onChoose(node.index); };
       }
     }
-    const children = node.children
+    if (node.action === "toggle") {
+      props.onClick = () => toggle(node.index);
+    }
+    const inner = node.children
       ? node.children.map((c, i) => render(c, i))
       : node.text;
+    const children = node.action === "toggle" && node.full && expanded.has(node.index)
+      ? [...inner, h("div", { key: "full", className: node.full.cls }, node.full.text)]
+      : inner;
     return h(node.tag, props, children);
   };
   return h(

package/view.js

@@ -429,9 +429,43 @@ export const CAND_CLS = {
   excerpt: "fcx-cand-excerpt",
   meta: "fcx-cand-meta",
   use: "fcx-cand-use",
+  full: "fcx-cand-full",
 };
 
-const CAND_EXCERPT_CHARS = 160;
+const CAND_EXCERPT_CHARS = 200;
+const CAND_MIN_SHARED_PREFIX = 24;
+
+/**
+ * 전 후보 공통 접두(공통 인사·도입)의 끝 — 발췌는 여기서부터.
+ * 후보들이 같은 인사말로 시작하면 머리 발췌는 전부 같아 보인다(변별 불가).
+ * 경계는 공통부 안의 마지막 문장·줄 시작으로 후퇴해, 차이가 나는 문장을
+ * 첫머리부터 온전히 보여준다. 공통부가 짧으면 0 (머리부터).
+ */
+function candidateExcerptStart(answers) {
+  if (answers.length < 2) return 0;
+  const first = answers[0];
+  let n = 0;
+  while (n < first.length && answers.every((t) => n < t.length && t[n] === first[n])) n += 1;
+  if (n < CAND_MIN_SHARED_PREFIX) return 0;
+  const head = first.slice(0, n);
+  let boundary = Math.max(
+    head.lastIndexOf("\n"), head.lastIndexOf(". "),
+    head.lastIndexOf("! "), head.lastIndexOf("? "),
+  );
+  if (boundary < 0) boundary = head.lastIndexOf(" ");   // 문장 부호 없는 공통부 → 어절 경계
+  let start = boundary >= 0 ? boundary + 1 : n;
+  while (start < first.length && /\s/.test(first[start])) start += 1;
+  return start;
+}
+
+/** 어절 경계 절단 — 발췌가 낱말 중간에서 끊기지 않고, 말줄임표는 실제 잘림에만. */
+function clipCandidateExcerpt(text, limit) {
+  const t = String(text || "");
+  if (t.length <= limit) return t;
+  let end = Math.max(t.lastIndexOf(" ", limit), t.lastIndexOf("\n", limit));
+  if (end < Math.floor(limit * 0.6)) end = limit;   // 공백 없는 긴 덩어리는 그대로
+  return `${t.slice(0, end).replace(/\s+$/, "")}…`;
+}
 
 /**
  * 후보 목록의 프레임워크 중립 트리. 후보가 2안 미만이면 null — 피커는
@@ -442,20 +476,32 @@ export function candidatePickerTree({ candidates, chosen, messages } = {}) {
   const list = Array.isArray(candidates) ? candidates : [];
   if (list.length < 2) return null;
   const m = messages || {};
+  const start = candidateExcerptStart(list.map((c) => String(c.answer || "")));
   return {
     tag: "div", cls: CAND_CLS.root,
     children: list.map((c, index) => {
       const isChosen = String(c.variant || "") === String(chosen || "primary");
+      const answer = String(c.answer || "");
+      const sliced = answer.slice(start) || answer;   // 공통부뿐인 후보(방어) → 머리
+      const excerpt = (start > 0 && sliced !== answer ? "…" : "")
+        + clipCandidateExcerpt(sliced, CAND_EXCERPT_CHARS);
+      const lengthText = String(m.ui_candidate_length || "{n}")
+        .replace("{n}", String(answer.length));
       return {
         tag: "div",
         cls: isChosen ? `${CAND_CLS.item} is-chosen` : CAND_CLS.item,
+        // 어댑터 계약: action=toggle 인 항목은 클릭 시 full(전문)을 펼친다.
+        // full 은 children 밖 — 트리를 그대로 걷는 구식 어댑터는 못 보므로
+        // 펼침을 모르는 소비처에서도 발췌만 그려져 회귀가 없다.
+        action: "toggle", index,
+        full: { tag: "div", cls: CAND_CLS.full, text: answer },
         children: [
           { tag: "span", cls: CAND_CLS.label,
             text: String(c.label || c.variant || "") },
-          { tag: "div", cls: CAND_CLS.excerpt,
-            text: String(c.answer || "").slice(0, CAND_EXCERPT_CHARS) },
+          { tag: "div", cls: CAND_CLS.excerpt, text: excerpt },
           { tag: "span", cls: CAND_CLS.meta,
-            text: isChosen ? (m.ui_candidate_chosen || "") : "" },
+            text: isChosen && m.ui_candidate_chosen
+              ? `${lengthText} · ${m.ui_candidate_chosen}` : lengthText },
           ...(isChosen ? [] : [{
             tag: "button", cls: CAND_CLS.use, type: "button", disabled: false,
             text: m.ui_candidate_use || "", action: "choose", index,