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

package/view.js

@@ -58,3 +58,145 @@ export const CLS = {
   evidence: "fcx-ai-evidence",
   declined: "fcx-ai-declined",
 };
+
+/**
+ * 패널 전체의 프레임워크 중립 트리 스펙 (0.3.0).
+ *
+ * aiSuggestView 가 "무엇을 보여줄지" 였다면 이것은 "어떤 구조로 그릴지"
+ * 까지다 — react/vue/element 는 이 트리의 15줄급 인터프리터로 줄어든다.
+ * 세 어댑터가 구조를 각자 복제하던 시절에는 하나를 고치면 나머지 둘이
+ * 그대로 남았다 (뷰 3중 복제).
+ *
+ * 노드: { tag, cls, text?, children?, action?, type?, disabled? }
+ * action 은 추상 동작명 — 어댑터가 자기 이벤트 체계로 배선한다:
+ *   "request" 제안 요청 / "adopt" 에디터에 넣기
+ * 루트의 클릭 전파 차단(행 선택 토글 방지)은 어댑터 몫이다 — 트리는
+ * 구조만 말한다.
+ */
+export function aiSuggestTree(input) {
+  const v = aiSuggestView(input);
+  const head = {
+    tag: "div", cls: CLS.head,
+    children: [
+      { tag: "button", cls: CLS.button, type: "button",
+        disabled: v.buttonDisabled, text: v.buttonLabel, action: "request" },
+      ...(v.showAdopt
+        ? [{ tag: "button", cls: CLS.adopt, type: "button",
+             disabled: false, text: v.adoptLabel, action: "adopt" }]
+        : []),
+    ],
+  };
+  const children = [head];
+  if (v.body.kind === "answer") {
+    children.push({
+      tag: "div", cls: CLS.body,
+      children: [
+        { tag: "div", cls: CLS.answer, text: v.body.text },
+        ...(v.body.evidence.length > 0
+          ? [{ tag: "div", cls: CLS.evidence,
+               text: `${v.body.evidenceLabel}: ${v.body.evidence.join(" · ")}` }]
+          : []),
+      ],
+    });
+  } else if (v.body.kind === "declined") {
+    children.push({ tag: "div", cls: CLS.declined, text: v.body.text });
+  }
+  return { tag: "div", cls: CLS.root, children };
+}
+
+
+// ── 처리 액션 (actions/1) — 선택지·확인·3상태의 표시 판단 ─────────────────
+//
+// 실행 시맨틱은 여기 없다. offers 는 답변 payload 의 suggested_actions 그대로,
+// pending 은 세션 ActionLedger 그대로 — 이 함수는 "무엇을 어떤 상태로 보일지"
+// 만 결정한다. 텍스트 노드만 (innerHTML 금지 — 고객사 기입 문구가 실린다).
+
+export const ACTION_CLS = {
+  root: "fcx-act",
+  item: "fcx-act-item",
+  label: "fcx-act-label",
+  params: "fcx-act-params",
+  risk: "fcx-act-risk",
+  button: "fcx-act-button",
+  confirm: "fcx-act-confirm",
+  confirmText: "fcx-act-confirm-text",
+  ack: "fcx-act-ack",
+  status: "fcx-act-status",
+  reconcile: "fcx-act-reconcile",
+};
+
+const RISK_KEY = { low: "ui_action_risk_low", medium: "ui_action_risk_medium", high: "ui_action_risk_high" };
+
+/**
+ * @param {Array} offers  session.offers
+ * @param {Array} pending session.pendingActions()  [{requestId, offerId, state, reasonCode, message, label}]
+ * @param {boolean} enabled  agent.actionsEnabled
+ * @param {string|null} confirming  확인 패널이 열린 offer_id
+ * @param {Record<string,string>} messages
+ */
+export function actionOffersView({ offers = [], pending = [], enabled = true, confirming = null, messages = {} }) {
+  const byOffer = new Map();
+  for (const p of pending) byOffer.set(p.offerId, p);
+  const items = offers.map((o) => {
+    const p = byOffer.get(o.offer_id) || null;
+    const state = p ? p.state : "";
+    const terminal = state === "succeeded" || state === "failed";
+    let statusText = "";
+    if (state === "pending") statusText = messages.ui_action_running;
+    else if (state === "succeeded") statusText = messages.ui_action_succeeded;
+    else if (state === "failed") statusText = `${messages.ui_action_failed}${p && p.message ? " — " + p.message : ""}`;
+    else if (state === "unknown") statusText = messages.ui_action_unknown;
+    return {
+      offerId: o.offer_id, label: o.label || o.action_key, params: o.params_display || "",
+      riskLabel: messages[RISK_KEY[o.risk_level] || RISK_KEY.low] || "",
+      risk: o.risk_level || "low",
+      // 실행 버튼: 표면 열림 ∧ 미실행(또는 실패-재시도 가능) — unknown 은 재실행 없음
+      canExecute: enabled && (!p || (state === "failed")),
+      buttonLabel: messages.ui_action_execute,
+      confirming: confirming === o.offer_id,
+      confirmText: o.confirm || messages.ui_action_confirm_default,
+      needsAck: o.risk_level === "high",
+      ackLabel: messages.ui_action_ack,
+      okLabel: messages.ui_action_confirm_ok,
+      cancelLabel: messages.ui_action_confirm_cancel,
+      state, statusText, terminal,
+      // unknown 만 "다시 확인" (reconcile=lookup) — 재실행 버튼은 없다
+      canReconcile: state === "unknown",
+      reconcileLabel: messages.ui_action_reconcile,
+      requestId: p ? p.requestId : "",
+    };
+  });
+  return { visible: items.length > 0, items, disabledHint: enabled ? "" : messages.ui_action_disabled };
+}
+
+/** 프레임워크 중립 트리 — action: "confirm"(패널 열기) / "execute" / "cancel" / "reconcile" / "ack" */
+export function actionOffersTree(input) {
+  const v = actionOffersView(input);
+  if (!v.visible) return null;
+  const items = v.items.map((it) => {
+    const children = [
+      { tag: "div", cls: ACTION_CLS.label, text: it.label },
+      ...(it.params ? [{ tag: "div", cls: ACTION_CLS.params, text: it.params }] : []),
+      { tag: "span", cls: ACTION_CLS.risk, text: it.riskLabel, risk: it.risk },
+    ];
+    if (it.confirming) {
+      children.push({
+        tag: "div", cls: ACTION_CLS.confirm, children: [
+          { tag: "div", cls: ACTION_CLS.confirmText, text: it.confirmText },
+          ...(it.needsAck ? [{ tag: "label", cls: ACTION_CLS.ack, text: it.ackLabel, action: "ack", offerId: it.offerId }] : []),
+          { tag: "button", cls: ACTION_CLS.button, type: "button", text: it.okLabel, action: "execute", offerId: it.offerId },
+          { tag: "button", cls: ACTION_CLS.button, type: "button", text: it.cancelLabel, action: "cancel", offerId: it.offerId },
+        ],
+      });
+    } else if (it.canExecute) {
+      children.push({ tag: "button", cls: ACTION_CLS.button, type: "button", text: it.buttonLabel, action: "confirm", offerId: it.offerId });
+    }
+    if (it.statusText) children.push({ tag: "div", cls: ACTION_CLS.status, text: it.statusText, state: it.state });
+    if (it.canReconcile) {
+      children.push({ tag: "button", cls: ACTION_CLS.reconcile, type: "button", text: it.reconcileLabel, action: "reconcile", requestId: it.requestId });
+    }
+    return { tag: "div", cls: ACTION_CLS.item, children };
+  });
+  if (v.disabledHint) items.push({ tag: "div", cls: ACTION_CLS.status, text: v.disabledHint });
+  return { tag: "div", cls: ACTION_CLS.root, children: items };
+}

package/vue.js

@@ -21,10 +21,24 @@
  */
 import { computed, defineComponent, h, ref, watch } from "vue";
 
-import { aiSuggestView, CLS } from "./view.js";
+import { aiSuggestTree, aiSuggestView, CLS } from "./view.js";
 
 export { aiSuggestView };
 
+/** 트리 노드 → VNode — 구조는 view.aiSuggestTree 가 소유한다. */
+function renderNode(node, actions) {
+  const props = { class: 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];
+  return h(
+    node.tag, props,
+    node.children ? node.children.map((c) => renderNode(c, actions)) : node.text,
+  );
+}
+
 export const AiSuggestPanel = defineComponent({
   name: "AiSuggestPanel",
   props: {
@@ -68,8 +82,8 @@ export const AiSuggestPanel = defineComponent({
       emit("adopt", r.answer);
     };
 
-    const view = computed(() =>
-      aiSuggestView({
+    const tree = computed(() =>
+      aiSuggestTree({
         state: state.value,
         result: result.value,
         declineText: props.hook.declineText,
@@ -79,7 +93,6 @@ export const AiSuggestPanel = defineComponent({
 
     return () => {
       if (!props.hook || !props.hook.enabled) return null;
-      const v = view.value;
       return h(
         "div",
         {
@@ -88,33 +101,7 @@ export const AiSuggestPanel = defineComponent({
           // 누르려다 행 선택이 토글되면 제안이 초기화된다.
           onClick: (event) => event.stopPropagation(),
         },
-        [
-          h("div", { class: CLS.head }, [
-            h(
-              "button",
-              { type: "button", class: CLS.button, disabled: v.buttonDisabled, onClick: request },
-              v.buttonLabel,
-            ),
-            v.showAdopt
-              ? h("button", { type: "button", class: CLS.adopt, onClick: adopt }, v.adoptLabel)
-              : null,
-          ]),
-          v.body.kind === "answer"
-            ? h("div", { class: CLS.body }, [
-                h("div", { class: CLS.answer }, v.body.text),
-                v.body.evidence.length > 0
-                  ? h(
-                      "div",
-                      { class: CLS.evidence },
-                      `${v.body.evidenceLabel}: ${v.body.evidence.join(" · ")}`,
-                    )
-                  : null,
-              ])
-            : null,
-          v.body.kind === "declined"
-            ? h("div", { class: CLS.declined }, v.body.text)
-            : null,
-        ],
+        tree.value.children.map((node) => renderNode(node, { request, adopt })),
       );
     };
   },