@tung-engineering/agent-platform-web-sdk 0.0.74 → 0.0.75

package/dist/web-sdk.min.js

@@ -243,6 +243,43 @@ var d_=Object.defineProperty,p_=Object.defineProperties;var h_=Object.getOwnProp
   background: oklch(95% 0.035 50);
 }
 
+/* Destructive actions (e.g. reject) use a separate red scale instead of the
+   brand accent, so they read as visually distinct from affirmative actions
+   like approve even though both can appear filled/outlined side by side. */
+.ap-sdk-panel__btn--danger {
+  background: #dc2626;
+  color: #fff;
+}
+
+.ap-sdk-panel__btn--danger:hover:not(:disabled) {
+  background: #b91c1c;
+}
+
+.ap-sdk-panel__btn--danger-ghost {
+  background: transparent;
+  color: #b91c1c;
+  border: 1px solid #dc2626;
+  flex: 0 0 auto;
+  padding: 8px 16px;
+}
+
+.ap-sdk-panel__btn--danger-ghost:hover:not(:disabled) {
+  border-color: #b91c1c;
+  color: #b91c1c;
+  background: #fef2f2;
+}
+
+/* Full-width, roomier variant for stacked action layouts (e.g. the
+   automation summary card) — overrides the compact default padding/
+   flex sizing of whichever color variant it's paired with. */
+.ap-sdk-panel__btn--block {
+  width: 100%;
+  flex: none;
+  padding: 11px 16px;
+  font-size: 14px;
+  border-radius: 10px;
+}
+
 .ap-sdk-panel__btn:disabled {
   opacity: 0.55;
   cursor: not-allowed;
@@ -1088,15 +1125,21 @@ button.ap-sdk-list-item__link {
 }
 `,`
 .ap-sdk-runner__approval {
-  margin-top: 10px;
+  margin-top: 14px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   width: 100%;
 }
 
+/* Approve is the one prominent full-width action; Reject is demoted to a
+   small centered text link below it rather than a second full button, so
+   the decision reads as "one clear primary choice, one quiet way out"
+   instead of two competing buttons crammed into a row. */
 .ap-sdk-runner__approval-actions {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   gap: 8px;
   width: 100%;
 }
@@ -1104,7 +1147,16 @@ button.ap-sdk-list-item__link {
 .ap-sdk-runner__reject-form {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
+}
+
+/* Persistent explanation of the blank-vs-filled textarea behavior — kept as
+   its own element rather than only a placeholder, since placeholders vanish
+   the moment the user starts typing feedback. */
+.ap-sdk-runner__reject-hint {
+  font-size: 11px;
+  line-height: 1.4;
+  color: #9ca3af;
 }
 
 .ap-sdk-runner__approval-error {
@@ -1112,6 +1164,72 @@ button.ap-sdk-list-item__link {
   font-size: 12px;
 }
 
+/* Separates the approve/reject decision from the always-available
+   View task / Close actions below it, so the two rows don't read as one
+   undifferentiated stack of buttons. */
+.ap-sdk-runner__divider {
+  height: 1px;
+  width: 100%;
+  background: #f3f4f6;
+  margin: 6px 0;
+}
+
+.ap-sdk-btn-icon {
+  margin-right: 5px;
+}
+
+.ap-sdk-btn-icon--trailing {
+  margin-right: 0;
+  margin-left: 5px;
+}
+
+/* Lightweight text-link treatment for secondary/rare actions (Reject, Close)
+   so they read as quiet fallbacks rather than full buttons competing for
+   attention with the primary Approve / View task actions above them. */
+.ap-sdk-runner__text-btn {
+  background: none;
+  border: none;
+  padding: 4px 2px;
+  font-size: 12.5px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  color: #6b7280;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ap-sdk-runner__text-btn:hover:not(:disabled) {
+  color: #374151;
+}
+
+.ap-sdk-runner__text-btn--danger {
+  color: #b91c1c;
+}
+
+.ap-sdk-runner__text-btn--danger:hover:not(:disabled) {
+  color: #991b1b;
+}
+
+.ap-sdk-runner__text-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Stacks the View task / Close row to match the approval block above it
+   (full-width primary action + a quiet text link) instead of two side-by-side
+   buttons — scoped here rather than in success-card.ts's shared base classes
+   so panel.ts's unrelated capture-success card is unaffected. */
+.ap-sdk-success-actions--stacked {
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.ap-sdk-success-actions--stacked .ap-sdk-panel__btn {
+  flex: none;
+}
+
 .ap-sdk-runner__meta {
   display: flex;
   flex-direction: column;
@@ -1474,27 +1592,29 @@ Please report this to https://github.com/markedjs/marked.`,e){let r="<p>An error
 Title: ${document.title}
 
 ${n}${r?`
-… (truncated)`:""}`}function Vm(e,t){var i;const r=e instanceof HTMLTextAreaElement?HTMLTextAreaElement.prototype:HTMLInputElement.prototype,o=(i=Object.getOwnPropertyDescriptor(r,"value"))==null?void 0:i.set;if(!o)throw new Error("target element does not accept text input");o.call(e,t),e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}function Xm(e,t,n){var g,m;const r=e==="done"?"✓":"✗",o=t.selector?` \`${t.selector}\``:"",i=t.description||`${t.action}${o}`,a=e==="done"&&t.action==="getContext"?`read context (${(g=n==null?void 0:n.length)!=null?g:0} chars)`:n,d=a?` — ${a}`:"";if(Kn.push({status:e,text:`${r} ${i}${d}`}),!z)return;const u=z.querySelector("[data-ap-runner-log]");if(!u)return;(m=u.querySelector("[data-ap-runner-placeholder]"))==null||m.remove();const p=u.scrollHeight-u.scrollTop-u.clientHeight<=Lc,h=document.createElement("div");h.className=`ap-sdk-runner__log-entry ap-sdk-runner__log-entry--${e}`,h.textContent=Kn[Kn.length-1].text,u.appendChild(h),p&&(u.scrollTop=u.scrollHeight)}function Km(e){var t,n;return(n=(t=e.display)==null?void 0:t.variant)!=null?n:e.sdkEventType}function Qm(e){const t=Km(e);return(e.stream==="stdout"||e.stream==="stderr"||e.stream==="sdk_event"&&(t==="text"||t==="thinking"))&&e.data.trim()||null}function Nc(e){var r;const t=e.filter(o=>o.sequence>Rr).sort((o,i)=>o.sequence-i.sequence);if(t.length===0||(Rr=Math.max(Rr,...t.map(o=>o.sequence)),!z))return;const n=z.querySelector("[data-ap-runner-log]");if(n)for(const o of t){const i=Qm(o);if(!i)continue;(r=n.querySelector("[data-ap-runner-placeholder]"))==null||r.remove();const a=n.scrollHeight-n.scrollTop-n.clientHeight<=Lc,d=document.createElement("div");d.className=`ap-sdk-runner__log-entry ap-sdk-runner__log-entry--output ap-sdk-runner__log-entry--${o.stream}`,o.stream==="sdk_event"?(d.classList.add("ap-sdk-markdown"),d.innerHTML=Pc(i)):d.textContent=i,n.appendChild(d),a&&(n.scrollTop=n.scrollHeight)}}function eb(e){if(!z||!ve||!er)return;const t=z.querySelector("[data-ap-runner-summary]");if(!t)return;const n=`${er.replace(/\/+$/,"")}/tasks/${ve}`,r=e==="completed"?"Automation complete!":"Automation ended",o=e==="completed";t.style.display="block",t.innerHTML=`
+… (truncated)`:""}`}function Vm(e,t){var i;const r=e instanceof HTMLTextAreaElement?HTMLTextAreaElement.prototype:HTMLInputElement.prototype,o=(i=Object.getOwnPropertyDescriptor(r,"value"))==null?void 0:i.set;if(!o)throw new Error("target element does not accept text input");o.call(e,t),e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}function Xm(e,t,n){var g,m;const r=e==="done"?"✓":"✗",o=t.selector?` \`${t.selector}\``:"",i=t.description||`${t.action}${o}`,a=e==="done"&&t.action==="getContext"?`read context (${(g=n==null?void 0:n.length)!=null?g:0} chars)`:n,d=a?` — ${a}`:"";if(Kn.push({status:e,text:`${r} ${i}${d}`}),!z)return;const u=z.querySelector("[data-ap-runner-log]");if(!u)return;(m=u.querySelector("[data-ap-runner-placeholder]"))==null||m.remove();const p=u.scrollHeight-u.scrollTop-u.clientHeight<=Lc,h=document.createElement("div");h.className=`ap-sdk-runner__log-entry ap-sdk-runner__log-entry--${e}`,h.textContent=Kn[Kn.length-1].text,u.appendChild(h),p&&(u.scrollTop=u.scrollHeight)}function Km(e){var t,n;return(n=(t=e.display)==null?void 0:t.variant)!=null?n:e.sdkEventType}function Qm(e){const t=Km(e);return(e.stream==="stdout"||e.stream==="stderr"||e.stream==="sdk_event"&&(t==="text"||t==="thinking"))&&e.data.trim()||null}function Nc(e){var r;const t=e.filter(o=>o.sequence>Rr).sort((o,i)=>o.sequence-i.sequence);if(t.length===0||(Rr=Math.max(Rr,...t.map(o=>o.sequence)),!z))return;const n=z.querySelector("[data-ap-runner-log]");if(n)for(const o of t){const i=Qm(o);if(!i)continue;(r=n.querySelector("[data-ap-runner-placeholder]"))==null||r.remove();const a=n.scrollHeight-n.scrollTop-n.clientHeight<=Lc,d=document.createElement("div");d.className=`ap-sdk-runner__log-entry ap-sdk-runner__log-entry--output ap-sdk-runner__log-entry--${o.stream}`,o.stream==="sdk_event"?(d.classList.add("ap-sdk-markdown"),d.innerHTML=Pc(i)):d.textContent=i,n.appendChild(d),a&&(n.scrollTop=n.scrollHeight)}}function eb(e){if(!z||!ve||!er)return;const t=z.querySelector("[data-ap-runner-summary]");if(!t)return;const n=`${er.replace(/\/+$/,"")}/tasks/${ve}`,r=e==="completed"?"Automation complete!":"Automation ended",o=e==="completed",i=o?"ap-sdk-panel__btn--secondary":"ap-sdk-panel__btn--primary";t.style.display="block",t.innerHTML=`
     <div class="ap-sdk-success-card">
       <p class="ap-sdk-success-headline">${Xs(r)}</p>
       ${o?`
       <div class="ap-sdk-runner__approval" data-ap-runner-approval>
         <div class="ap-sdk-runner__approval-actions">
-          <button class="ap-sdk-panel__btn ap-sdk-panel__btn--primary" data-ap-runner-approve>Approve</button>
-          <button class="ap-sdk-panel__btn ap-sdk-panel__btn--ghost" data-ap-runner-reject>Reject</button>
+          <button class="ap-sdk-panel__btn ap-sdk-panel__btn--primary ap-sdk-panel__btn--block" data-ap-runner-approve><span class="ap-sdk-btn-icon" aria-hidden="true">✓</span>Approve</button>
+          <button class="ap-sdk-runner__text-btn ap-sdk-runner__text-btn--danger" data-ap-runner-reject>Reject</button>
         </div>
         <div class="ap-sdk-runner__reject-form" data-ap-runner-reject-form style="display:none">
-          <textarea class="ap-sdk-panel__textarea" rows="2" placeholder="Describe what was wrong — the agent will continue with this instruction. Leave empty to reject permanently." data-ap-runner-reject-feedback></textarea>
-          <button class="ap-sdk-panel__btn ap-sdk-panel__btn--primary" data-ap-runner-reject-submit>Reject Permanently</button>
+          <textarea class="ap-sdk-panel__textarea" rows="2" placeholder="What was wrong? (optional)" data-ap-runner-reject-feedback></textarea>
+          <div class="ap-sdk-runner__reject-hint">Leave blank to reject permanently, or add details so the agent can retry with your feedback.</div>
+          <button class="ap-sdk-panel__btn ap-sdk-panel__btn--danger ap-sdk-panel__btn--block" data-ap-runner-reject-submit>Reject Permanently</button>
         </div>
         <div class="ap-sdk-runner__approval-error" data-ap-runner-approval-error style="display:none"></div>
-      </div>`:""}
-      <div class="ap-sdk-success-actions">
-        <button class="ap-sdk-panel__btn ap-sdk-panel__btn--primary" data-ap-runner-view>View task →</button>
-        <button class="ap-sdk-panel__btn ap-sdk-panel__btn--ghost" data-ap-runner-close>Close</button>
+      </div>
+      <div class="ap-sdk-runner__divider"></div>`:""}
+      <div class="ap-sdk-success-actions ap-sdk-success-actions--stacked">
+        <button class="ap-sdk-panel__btn ${i} ap-sdk-panel__btn--block" data-ap-runner-view>View task<span class="ap-sdk-btn-icon ap-sdk-btn-icon--trailing" aria-hidden="true">↗</span></button>
+        <button class="ap-sdk-runner__text-btn" data-ap-runner-close>Close</button>
       </div>
     </div>
-  `,t.querySelector("[data-ap-runner-view]").addEventListener("click",()=>window.open(n,"_blank","noopener,noreferrer")),t.querySelector("[data-ap-runner-close]").addEventListener("click",()=>{const i=Gs;Js(),i==null||i()}),o&&tb(t)}function tb(e){const t=e.querySelector("[data-ap-runner-approve]"),n=e.querySelector("[data-ap-runner-reject]"),r=e.querySelector("[data-ap-runner-reject-form]"),o=e.querySelector("[data-ap-runner-reject-feedback]"),i=e.querySelector("[data-ap-runner-reject-submit]"),a=e.querySelector("[data-ap-runner-approval-error]"),d=e.querySelector(".ap-sdk-runner__approval-actions"),u=h=>{a.textContent=h,a.style.display="block"};t.addEventListener("click",()=>L(null,null,function*(){if(!ve||!Wt)return;const h=ve,g=Wt;t.disabled=!0,n.disabled=!0,a.style.display="none";try{yield ug(g,h),d.innerHTML='<span class="ap-sdk-status-badge ap-sdk-status-badge--approved">Approved</span>',r.style.display="none"}catch(m){t.disabled=!1,n.disabled=!1,u(m instanceof Error?m.message:"Failed to approve — try again.")}})),n.addEventListener("click",()=>{r.style.display=r.style.display==="none"?"block":"none",r.style.display==="block"&&o.focus()});const p=()=>{i.textContent=o.value.trim()?"Reject & Continue":"Reject Permanently"};o.addEventListener("input",p),i.addEventListener("click",()=>L(null,null,function*(){if(!ve||!Wt)return;const h=ve,g=Wt,m=o.value.trim();i.disabled=!0,t.disabled=!0,a.style.display="none",i.textContent="Rejecting…";try{yield dg(g,h,m),m?$c():(d.innerHTML='<span class="ap-sdk-status-badge ap-sdk-status-badge--rejected">Rejected</span>',r.style.display="none")}catch(k){i.disabled=!1,t.disabled=!1,p(),u(k instanceof Error?k.message:"Failed to reject — try again.")}}))}function nb(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function Xs(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function rb(e,t,n){const r=!!(t.backendUrl&&t.token),o=document.createElement("div");o.className="ap-sdk-advanced",o.innerHTML=`
+  `,t.querySelector("[data-ap-runner-view]").addEventListener("click",()=>window.open(n,"_blank","noopener,noreferrer")),t.querySelector("[data-ap-runner-close]").addEventListener("click",()=>{const a=Gs;Js(),a==null||a()}),o&&tb(t)}function tb(e){const t=e.querySelector("[data-ap-runner-approve]"),n=e.querySelector("[data-ap-runner-reject]"),r=e.querySelector("[data-ap-runner-reject-form]"),o=e.querySelector("[data-ap-runner-reject-feedback]"),i=e.querySelector("[data-ap-runner-reject-submit]"),a=e.querySelector("[data-ap-runner-approval-error]"),d=e.querySelector(".ap-sdk-runner__approval-actions"),u=h=>{a.textContent=h,a.style.display="block"};t.addEventListener("click",()=>L(null,null,function*(){if(!ve||!Wt)return;const h=ve,g=Wt;t.disabled=!0,n.disabled=!0,a.style.display="none";try{yield ug(g,h),d.innerHTML='<span class="ap-sdk-status-badge ap-sdk-status-badge--approved">✓ Approved</span>',r.style.display="none"}catch(m){t.disabled=!1,n.disabled=!1,u(m instanceof Error?m.message:"Failed to approve — try again.")}})),n.addEventListener("click",()=>{r.style.display=r.style.display==="none"?"block":"none",r.style.display==="block"&&o.focus()});const p=()=>{i.textContent=o.value.trim()?"Reject & Continue":"Reject Permanently"};o.addEventListener("input",p),i.addEventListener("click",()=>L(null,null,function*(){if(!ve||!Wt)return;const h=ve,g=Wt,m=o.value.trim();i.disabled=!0,t.disabled=!0,a.style.display="none",i.textContent="Rejecting…";try{yield dg(g,h,m),m?$c():(d.innerHTML='<span class="ap-sdk-status-badge ap-sdk-status-badge--rejected">✕ Rejected</span>',r.style.display="none")}catch(k){i.disabled=!1,t.disabled=!1,p(),u(k instanceof Error?k.message:"Failed to reject — try again.")}}))}function nb(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function Xs(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function rb(e,t,n){const r=!!(t.backendUrl&&t.token),o=document.createElement("div");o.className="ap-sdk-advanced",o.innerHTML=`
     <details class="ap-sdk-advanced__details">
       <summary class="ap-sdk-advanced__summary">Advanced options</summary>
       <div class="ap-sdk-advanced__body">