@nexface/tools 0.1.0 → 0.1.1-alpha.0

package/dist/styles.css

@@ -0,0 +1,189 @@
+.agent-operation { --agent-operation-accent: #6366f1; --agent-operation-glow: #22d3ee; position: fixed; z-index: 2147483150; inset: 0; pointer-events: none; }
+.agent-operation__surface { position: fixed; z-index: 0; overflow: hidden; contain: paint; border: 1px solid rgba(96,156,245,.9); border-radius: 8px; background: rgba(96,156,245,.06); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.72),0 0 8px rgba(96,156,245,.2); }
+.agent-operation__surface::before,.agent-operation__surface::after { position: absolute; z-index: 2; inset: 0; border-radius: inherit; content: ""; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to left,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to top,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to right,#000 0,rgba(0,0,0,.7) 7px,transparent 28px); mask-image: linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to left,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to top,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to right,#000 0,rgba(0,0,0,.7) 7px,transparent 28px); }
+.agent-operation__surface::before { --agent-operation-edge-primary-angle: 0deg; background: conic-gradient(from var(--agent-operation-edge-primary-angle) at 50% 50%,transparent 0% 8%,rgba(139,92,246,.24) 11%,rgba(139,92,246,.76) 17%,rgba(34,211,238,.9) 23%,#3b82f6 26%,rgba(191,219,254,.92) 27.5%,transparent 31% 56%,rgba(139,92,246,.3) 61%,rgba(34,211,238,.46) 66%,transparent 72% 100%); filter: blur(32px); opacity: .68; animation: agent-operation-surface-edge-primary 6s linear infinite; }
+.agent-operation__surface::after { --agent-operation-edge-secondary-angle: 0deg; z-index: 3; background: conic-gradient(from var(--agent-operation-edge-secondary-angle) at 50% 50%,transparent 0% 18%,rgba(139,92,246,.5) 23%,rgba(34,211,238,.58) 30%,rgba(59,130,246,.88) 35%,transparent 41% 75%,rgba(34,211,238,.28) 80%,rgba(167,139,250,.46) 86%,transparent 91% 100%); filter: blur(44px); opacity: .52; mix-blend-mode: screen; animation: agent-operation-surface-edge-secondary 8s linear infinite; }
+.agent-operation__surface[style*="--agent-operation-cutout"] { -webkit-mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0); -webkit-mask-position: 0 0,var(--agent-operation-cutout-left) var(--agent-operation-cutout-top); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%,var(--agent-operation-cutout-width) var(--agent-operation-cutout-height); -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0); mask-position: 0 0,var(--agent-operation-cutout-left) var(--agent-operation-cutout-top); mask-repeat: no-repeat; mask-size: 100% 100%,var(--agent-operation-cutout-width) var(--agent-operation-cutout-height); mask-composite: exclude; }
+.agent-operation__target { position: fixed; z-index: 1; overflow: hidden; border: 2px solid #4f7cff; border-radius: 10px; background: transparent; pointer-events: none; box-shadow: 0 0 0 4px rgba(99,102,241,.16),0 0 22px rgba(34,211,238,.34),0 0 48px rgba(79,70,229,.2); transition: inset .12s ease,width .12s ease,height .12s ease; animation: agent-operation-pulse 2.6s ease-in-out infinite; }
+.agent-operation__pointer-effect { position: fixed; z-index: 2; top: 0; left: 0; width: 0; height: 0; opacity: 1; pointer-events: none; transform: translate3d(var(--agent-operation-pointer-x),var(--agent-operation-pointer-y),0); transition: transform var(--agent-operation-pointer-duration) cubic-bezier(.22,1,.36,1),opacity .12s ease-out; will-change: transform,opacity; }
+.agent-operation__pointer-effect[data-phase="hidden"] { opacity: 0; }
+.agent-operation__pointer-cursor { position: absolute; z-index: 1; top: -4px; left: -3px; display: block; width: 24px; height: 24px; transform-origin: 4px 4px; }
+.agent-operation__pointer-effect[data-active="true"][data-phase="resting"] .agent-operation__pointer-cursor { animation: agent-operation-pointer-float 1.6s ease-in-out infinite; }
+.agent-operation__pointer-effect[data-phase="arrived"] .agent-operation__pointer-cursor { animation: agent-operation-pointer-press .11s ease-out both; }
+.agent-operation__pointer-ripple { position: absolute; top: 0; left: 0; width: 64px; height: 64px; border: 2px solid rgba(79,124,255,.78); border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.35); box-shadow: 0 0 18px rgba(96,156,245,.34); }
+.agent-operation__pointer-ripple--primary { animation: agent-operation-pointer-ripple var(--agent-operation-ripple-duration) ease-out both; }
+.agent-operation__pointer { position: relative; z-index: 2; display: block; color: #111827; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(15,23,42,.32)); }
+.agent-operation__pointer-label { position: absolute; z-index: 2; top: 27px; left: 19px; display: flex; max-width: min(300px,48vw); overflow: hidden; align-items: center; gap: 9px; border: 1px solid rgba(24,24,27,.1); border-radius: 11px; padding: 7px 11px; color: #27272a; background: rgba(255,255,255,.97); box-shadow: 0 6px 20px rgba(15,23,42,.13); font: 500 13px/1.35 Inter,ui-sans-serif,system-ui,sans-serif; white-space: nowrap; }
+.agent-operation__pointer-label:is([data-operation-effect="read"],[data-operation-effect="navigate"]) { top: 12px; left: 10px; overflow: visible; gap: 5px; border: 0; padding: 0; background: transparent; box-shadow: none; }
+.agent-operation__pointer-label-text { overflow: hidden; text-overflow: ellipsis; }
+.agent-operation__pointer-label:is([data-operation-effect="read"],[data-operation-effect="navigate"]) .agent-operation__pointer-label-text { display: flex; box-sizing: border-box; height: 32px; align-items: center; border: 1px solid rgba(24,24,27,.08); border-radius: 12px; padding: 6px 12px; background: rgba(255,255,255,.97); box-shadow: 0 6px 20px rgba(15,23,42,.13); }
+.agent-operation__pointer-read-scan { display: flex; width: 36px; height: 32px; flex: none; align-items: center; justify-content: center; gap: 4px; pointer-events: none; }
+.agent-operation__pointer-read-scan i { width: 3px; height: 11px; border-radius: 999px; background: #609cf5; opacity: .34; transform: scaleY(.58); transform-origin: center; animation: agent-operation-pointer-read-bar 1.05s ease-in-out infinite; }
+.agent-operation__pointer-read-scan i:nth-child(2) { animation-delay: .1s; }
+.agent-operation__pointer-read-scan i:nth-child(3) { animation-delay: .2s; }
+.agent-operation__pointer-read-scan i:nth-child(4) { animation-delay: .3s; }
+.agent-operation__pointer-read-scan i:nth-child(5) { animation-delay: .4s; }
+.agent-operation__pointer-navigation-trail { position: relative; width: 36px; height: 32px; flex: none; filter: drop-shadow(0 1px 3px rgba(96,156,245,.32)); pointer-events: none; }
+.agent-operation__pointer-navigation-trail::before,.agent-operation__pointer-navigation-trail::after { position: absolute; top: 9px; width: 10px; height: 10px; border-top: 2px solid #609cf5; border-right: 2px solid #609cf5; border-radius: 2px; content: ""; transform: rotate(45deg); animation: agent-operation-pointer-navigation-chevron .9s ease-in-out infinite; }
+.agent-operation__pointer-navigation-trail::before { left: 1px; opacity: .3; }
+.agent-operation__pointer-navigation-trail::after { left: 11px; animation-delay: .15s; }
+.agent-operation__controller { --agent-operation-controller-x: -50%; position: fixed; z-index: 3; left: 50%; bottom: 22px; display: flex; width: 760px; min-width: min(760px,calc(100vw - 32px)); max-width: calc(100vw - 32px); align-items: center; gap: 10px; border: 1px solid rgba(165,180,252,.28); border-radius: 15px; padding: 9px 10px 9px 12px; color: #fff; background: linear-gradient(135deg,#3a3a40 0%,#303036 48%,#29292e 100%); box-shadow: inset 0 0 0 1px rgba(103,232,249,.06),0 16px 38px rgba(0,0,0,.28); pointer-events: auto; transform: translate(var(--agent-operation-controller-x),0); font-family: Inter,ui-sans-serif,system-ui,sans-serif; animation: agent-operation-controller-enter .4s cubic-bezier(.22,1,.36,1) both,agent-operation-edge-breathe 2.8s ease-in-out .4s infinite; will-change: transform,opacity; }
+.agent-operation__controller[data-visibility="exiting"] { pointer-events: none; animation: agent-operation-controller-exit .3s cubic-bezier(.4,0,1,1) both; }
+.agent-operation__controller::after { position: absolute; z-index: 0; inset: 1px; border-radius: 13px; background: linear-gradient(110deg,rgba(255,255,255,.13),transparent 30%,transparent 68%,rgba(129,140,248,.15)); content: ""; pointer-events: none; }
+.agent-operation__controller>:not(.agent-operation__edge-flow) { position: relative; z-index: 2; }
+.agent-operation__edge-flow { position: absolute; z-index: 1; inset: -1px; overflow: hidden; border-radius: inherit; pointer-events: none; }
+.agent-operation__edge-flow::before,.agent-operation__edge-flow::after { position: absolute; height: 2px; content: ""; }
+.agent-operation__edge-flow::before { top: 0; left: -34%; width: 34%; background: linear-gradient(90deg,transparent,rgba(165,180,252,.72),#e0f2fe,rgba(34,211,238,.9),transparent); animation: agent-operation-edge-flow 2.65s ease-in-out infinite; }
+.agent-operation__edge-flow::after { right: -12%; bottom: 0; width: 28%; background: linear-gradient(90deg,transparent,rgba(129,140,248,.78),rgba(103,232,249,.68),transparent); animation: agent-operation-edge-flow-reverse 3.1s ease-in-out infinite; }
+.agent-operation__pause-mark { display: flex; width: 9px; flex: 0 0 9px; justify-content: center; gap: 2px; opacity: .52; }
+.agent-operation__pause-mark i { width: 2px; height: 9px; border-radius: 2px; background: #d4d4d8; }
+.agent-operation__activity { position: relative; display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; }
+.agent-operation__activity-icon { display: none; }
+.agent-operation__activity i { position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.14); border-top-color: #c7d2fe; border-radius: 50%; animation: agent-operation-spin 1.8s linear infinite; }
+.agent-operation__activity b { color: #eef2ff; font-size: 17px; font-weight: 400; line-height: 1; }
+.agent-operation__controller>div { display: grid; min-width: 0; flex: 1; gap: 1px; }
+.agent-operation__heading { display: flex; min-width: 0; align-items: center; gap: 7px; }
+.agent-operation__controller strong { overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
+.agent-operation__controller code { overflow: hidden; padding: 1px 5px; border-radius: 5px; color: #a1a1aa; background: rgba(255,255,255,.07); font: 500 8px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
+.agent-operation__description { display: flex; min-width: 0; overflow: hidden; align-items: center; color: #e4e4e7; font-size: 10px; white-space: nowrap; }
+.agent-operation__compact-status { display: none; }
+.agent-operation__controller button { border: 0; border-radius: 9px; padding: 7px 10px; color: #e4e4e7; background: #3f3f46; font-size: 10px; font-weight: 650; }
+.agent-operation__controller .agent-operation__activity { border: 0; padding: 0; cursor: pointer; }
+.agent-operation__controller .agent-operation__activity:disabled { cursor: default; opacity: .55; }
+.agent-operation__controller>.agent-operation__history { position: absolute; z-index: 4; bottom: calc(100% + 10px); left: 0; display: grid; width: 360px; max-width: 100%; max-height: min(320px,50vh); overflow: hidden; border: 1px solid rgba(165,180,252,.28); border-radius: 14px; color: #f4f4f5; background: #303036; box-shadow: 0 16px 38px rgba(0,0,0,.28); pointer-events: auto; }
+.agent-operation__history header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); padding: 11px 13px; }
+.agent-operation__history header span { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; color: #c7d2fe; background: rgba(129,140,248,.16); font-size: 10px; }
+.agent-operation__history ol { display: grid; overflow: auto; margin: 0; padding: 5px 0; list-style: none; }
+.agent-operation__history li { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 8px; padding: 8px 13px; }
+.agent-operation__history li>span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #c7d2fe; background: rgba(129,140,248,.12); font-size: 9px; }
+.agent-operation__history p { margin: 1px 0 0; overflow-wrap: anywhere; color: #e4e4e7; font-size: 11px; line-height: 18px; }
+.agent-operation__controller .agent-operation__stop { color: #fecaca; background: #7f1d1d; }
+.agent-operation[data-status="completed"] .agent-operation__target { border-color: #609cf5; }
+.agent-operation[data-status="failed"] .agent-operation__target { border-color: #dc2626; animation: none; }
+.agent-operation[data-run-active="false"] .agent-operation__activity i,.agent-operation[data-run-active="false"] .agent-operation__edge-flow::before,.agent-operation[data-run-active="false"] .agent-operation__edge-flow::after,.agent-operation[data-run-active="false"] .agent-operation__surface::before,.agent-operation[data-run-active="false"] .agent-operation__surface::after { animation: none; }
+@keyframes agent-operation-spin { to { transform: rotate(360deg); } }
+@keyframes agent-operation-edge-flow { 0% { left: -24%; opacity: 0; } 12%,78% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
+@keyframes agent-operation-edge-flow-reverse { 0% { right: -20%; opacity: 0; } 18%,76% { opacity: .8; } 100% { right: 100%; opacity: 0; } }
+@keyframes agent-operation-edge-breathe { 50% { border-color: rgba(103,232,249,.42); } }
+@keyframes agent-operation-pulse { 50% { border-color: #38bdf8; box-shadow: 0 0 0 6px rgba(99,102,241,.12),0 0 28px rgba(34,211,238,.4),0 0 58px rgba(79,70,229,.24); } }
+@keyframes agent-operation-pointer-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
+@keyframes agent-operation-pointer-press { 0%,100% { transform: translate(0) scale(1); } 48% { transform: translate(1px,1px) scale(.94); } }
+@property --agent-operation-edge-primary-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
+@property --agent-operation-edge-secondary-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
+@keyframes agent-operation-surface-edge-primary { 0% { --agent-operation-edge-primary-angle: 0deg; animation-timing-function: cubic-bezier(.4,.25,.6,.75); } 100% { --agent-operation-edge-primary-angle: 360deg; } }
+@keyframes agent-operation-surface-edge-secondary { 0% { --agent-operation-edge-secondary-angle: 0deg; animation-timing-function: cubic-bezier(.4,.3,.6,.7); } 100% { --agent-operation-edge-secondary-angle: 360deg; } }
+@keyframes agent-operation-controller-enter { 0% { opacity: 0; transform: translate(var(--agent-operation-controller-x),calc(100% + 28px)); } 100% { opacity: 1; transform: translate(var(--agent-operation-controller-x),0); } }
+@keyframes agent-operation-controller-exit { 0% { opacity: 1; transform: translate(var(--agent-operation-controller-x),0); } 100% { opacity: 0; transform: translate(var(--agent-operation-controller-x),calc(100% + 28px)); } }
+@keyframes agent-operation-pointer-ripple { 0% { opacity: .82; transform: translate(-50%,-50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); } }
+@keyframes agent-operation-pointer-read-bar { 0%,18%,100% { opacity: .34; transform: scaleY(.58); box-shadow: none; } 42% { opacity: 1; transform: scaleY(1.27); box-shadow: 0 0 6px rgba(96,156,245,.52); } 68% { opacity: .58; transform: scaleY(.78); box-shadow: none; } }
+@keyframes agent-operation-pointer-navigation-chevron { 0%,100% { opacity: .24; transform: translateX(-3px) rotate(45deg); } 48% { opacity: 1; transform: translateX(2px) rotate(45deg); } 72% { opacity: .62; transform: translateX(4px) rotate(45deg); } }
+@media (prefers-reduced-motion: reduce) { .agent-operation__surface,.agent-operation__target,.agent-operation__controller,.agent-operation__activity i,.agent-operation__edge-flow::before,.agent-operation__edge-flow::after,.agent-operation__pointer-cursor,.agent-operation__pointer-read-scan i,.agent-operation__pointer-navigation-trail::before,.agent-operation__pointer-navigation-trail::after { animation: none; } .agent-operation__pointer-effect { transition: none; } .agent-operation__pointer-ripple,.agent-operation__surface::before,.agent-operation__surface::after { display: none; } }
+@media (max-width:520px) { .agent-operation__controller { --agent-operation-controller-x: 0%; right: 12px; bottom: 12px; left: 12px; width: auto; min-width: 0; } .agent-operation__controller>.agent-operation__history { width: 100%; } }
+
+.nexface-operation-surface { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; }
+.agent-operation .agent-operation__controller { box-sizing: border-box; min-width: 0; }
+.agent-operation__controller {
+  top: auto;
+  bottom: 14px;
+  width: 440px;
+  height: 48px;
+  min-width: 0;
+  justify-content: flex-start;
+  gap: 8px;
+  border: 0;
+  border-radius: 24px;
+  padding: 5px;
+  color: #fff;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: blur(16px) saturate(120%);
+  -webkit-backdrop-filter: blur(16px) saturate(120%);
+  pointer-events: none;
+}
+.agent-operation__controller::after {
+  inset: 0;
+  width: auto;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 24px;
+  background: rgb(18 18 20 / 88%);
+  box-shadow: 0 8px 28px rgb(0 0 0 / 24%);
+}
+.agent-operation__controller .agent-operation__edge-flow,
+.agent-operation__controller .agent-operation__pause-mark,
+.agent-operation__controller .agent-operation__compact-status { display: none; }
+.agent-operation__controller .agent-operation__activity {
+  width: 38px;
+  height: 38px;
+  flex: 0 0 38px;
+  border: 1px solid rgb(255 255 255 / 11%);
+  border-radius: 50%;
+  padding: 0;
+  color: #a9c9ff;
+  background: rgb(255 255 255 / 7%);
+  pointer-events: auto;
+  cursor: pointer;
+}
+.agent-operation__controller .agent-operation__activity:not(:disabled):hover,
+.agent-operation__controller .agent-operation__activity[data-open="true"] { border-color: rgb(169 201 255 / 38%); background: rgb(169 201 255 / 14%); }
+.agent-operation__controller .agent-operation__activity:disabled { cursor: default; opacity: .82; }
+.agent-operation__controller .agent-operation__activity i { display: none; }
+.agent-operation__controller .agent-operation__activity-icon { display: block; }
+.agent-operation__controller .agent-operation__activity b { display: none; }
+.agent-operation__controller > div { display: grid; min-width: 0; flex: 1; gap: 1px; }
+.agent-operation__controller .agent-operation__heading { display: block; min-width: 0; }
+.agent-operation__controller .agent-operation__heading strong { display: block; overflow: hidden; color: rgb(255 255 255 / 96%); font-size: 12px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
+.agent-operation__controller .agent-operation__description { display: block; overflow: hidden; color: rgb(255 255 255 / 58%); font-size: 10px; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; }
+.agent-operation[data-human-control="true"] .agent-operation__controller .agent-operation__description { color: #9fc3ff; }
+.agent-operation__controller .agent-operation__stop {
+  min-width: 84px;
+  height: 38px;
+  border-radius: 19px;
+  padding: 0 12px;
+  color: #ff7187;
+  background: rgb(255 72 101 / 15%);
+  box-shadow: inset 0 0 0 1px rgb(255 113 135 / 8%);
+  pointer-events: auto;
+  font-size: 11px;
+  font-weight: 500;
+}
+.agent-operation__controller > .agent-operation__history {
+  width: 360px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 14px;
+  color: #fff;
+  background: rgb(18 18 20 / 92%);
+  box-shadow: 0 12px 36px rgb(0 0 0 / 28%);
+  backdrop-filter: blur(16px) saturate(120%);
+  -webkit-backdrop-filter: blur(16px) saturate(120%);
+}
+.agent-operation__history header { border-bottom-color: rgb(255 255 255 / 9%); padding: 12px 14px; }
+.agent-operation__history header strong { color: rgb(255 255 255 / 96%); font-size: 12px; font-weight: 600; }
+.agent-operation__history header span { color: #a9c9ff; background: rgb(169 201 255 / 14%); }
+.agent-operation__history li { padding: 8px 14px; }
+.agent-operation__history li > span { color: #a9c9ff; background: rgb(169 201 255 / 11%); }
+.agent-operation__history p { color: rgb(255 255 255 / 76%); font-size: 12px; line-height: 20px; }
+.agent-operation[data-interaction-pending="true"] .agent-operation__controller { box-shadow: none; }
+.agent-operation[data-interaction-pending="true"] .agent-operation__activity b { color: #609cf5; text-shadow: none; }
+.agent-operation__target { border: 1px solid #4f9cff; border-radius: 10px; box-shadow: 0 0 0 1px rgb(79 156 255 / 14%); animation: store-operation-target-in .16s ease-out both; }
+.agent-operation__pointer-label { border-color: #ebecf0; color: #525252; box-shadow: 0 4px 16px rgb(29 41 57 / 12%); }
+.agent-operation__surface {
+  border: 1px solid rgb(96 156 245 / 90%);
+  border-radius: 12px;
+  background: rgb(96 156 245 / 6%);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 72%), 0 0 8px rgb(96 156 245 / 20%);
+  animation: store-operation-mask-in .18s ease-out both;
+}
+.agent-operation__surface[style*="--agent-operation-cutout"] {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+.agent-operation__pointer-ripple { border-color: rgb(61 146 255 / 86%); background-image: none; }
+@keyframes store-operation-mask-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes store-operation-target-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
+@media (prefers-reduced-motion: reduce) {
+  .agent-operation__surface,
+  .agent-operation__target { animation: none; }
+}
+.agent-operation, .agent-operation *, .agent-operation::before, .agent-operation::after, .agent-operation *::before, .agent-operation *::after { box-sizing: border-box; }
+.agent-operation__pointer-navigation-trail::before,.agent-operation__pointer-navigation-trail::after { box-sizing: content-box; }
+.agent-operation__pointer-indicator { position: absolute; top: 12px; left: 10px; display: flex; align-items: center; gap: 5px; }

package/dist/types.d.ts

@@ -65,7 +65,9 @@ export interface AgentToolMetadata {
     name: string;
     description: string;
     inputSchema: AgentToolInputSchema;
+    effect: AgentToolEffect;
 }
+export type AgentToolEffect = "read" | "action" | "navigate";
 export interface AgentToolDefinition<TInput = Record<string, unknown>, TResult = unknown> extends AgentToolMetadata {
     readonly __input?: TInput;
     readonly __result?: TResult;

package/dist/webmcp.js

@@ -15,9 +15,10 @@ export function connectToolRuntimeToWebMcp(runtime) {
         return () => undefined;
     const registrations = new Map();
     let disposed = false;
-    const register = (definition) => {
+    const register = (tool) => {
+        const { definition } = tool;
         const controller = new AbortController();
-        const registration = { controller, definition };
+        const registration = { controller, tool };
         registrations.set(definition.name, registration);
         let result;
         try {
@@ -25,7 +26,7 @@ export function connectToolRuntimeToWebMcp(runtime) {
                 name: definition.name,
                 description: definition.description,
                 inputSchema: definition.inputSchema,
-                execute: async (input) => runtime.execute(definition, input),
+                execute: async (input) => runtime.execute(tool, input),
             }, { signal: controller.signal });
         }
         catch (error) {
@@ -43,26 +44,26 @@ export function connectToolRuntimeToWebMcp(runtime) {
         });
     };
     const reconcile = () => {
-        const definitions = new Map(runtime.getApplicationTools().map((definition) => [definition.name, definition]));
+        const tools = new Map(runtime.getWebMcpTools().map((tool) => [tool.definition.name, tool]));
         for (const [name, registration] of registrations) {
-            if (definitions.get(name) === registration.definition)
+            if (tools.get(name) === registration.tool)
                 continue;
             registration.controller.abort();
             registrations.delete(name);
         }
-        for (const definition of definitions.values()) {
-            if (!registrations.has(definition.name))
-                register(definition);
+        for (const tool of tools.values()) {
+            if (!registrations.has(tool.definition.name))
+                register(tool);
         }
     };
-    runtime.addEventListener("toolchange", reconcile);
+    const unsubscribeRuntime = runtime.on("toolchange", reconcile);
     modelContext.addEventListener?.("toolchange", reconcile);
     reconcile();
     return () => {
         if (disposed)
             return;
         disposed = true;
-        runtime.removeEventListener("toolchange", reconcile);
+        unsubscribeRuntime();
         modelContext.removeEventListener?.("toolchange", reconcile);
         for (const registration of registrations.values()) {
             registration.controller.abort();

package/dist/webmcp.js.map

@@ -1 +1 @@
-{"version":3,"file":"webmcp.js","sourceRoot":"","sources":["../src/webmcp.ts"],"names":[],"mappings":"AAwBA,SAAS,qBAAqB;IAC5B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,SAAS,CAAC;IACtD,MAAM,YAAY,GAAI,QAEpB,CAAC,YAAY,CAAC;IAChB,OAAO,OAAO,YAAY,EAAE,YAAY,KAAK,UAAU;QACrD,CAAC,CAAC,YAAkC;QACpC,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAED,SAAS,sBAAsB,CAAC,IAAY,EAAE,KAAc;IAC1D,OAAO,CAAC,IAAI,CAAC,mCAAmC,IAAI,IAAI,EAAE,KAAK,CAAC,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,0BAA0B,CACxC,OAA4B;IAE5B,MAAM,YAAY,GAAG,qBAAqB,EAAE,CAAC;IAC7C,IAAI,CAAC,YAAY;QAAE,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC;IAE1C,MAAM,aAAa,GAAG,IAAI,GAAG,EAA8B,CAAC;IAC5D,IAAI,QAAQ,GAAG,KAAK,CAAC;IAErB,MAAM,QAAQ,GAAG,CAAC,UAA+B,EAAE,EAAE;QACnD,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,YAAY,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;QAChD,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QACjD,IAAI,MAAqB,CAAC;QAC1B,IAAI,CAAC;YACH,MAAM,GAAG,YAAY,CAAC,YAAY,CAAC;gBACjC,IAAI,EAAE,UAAU,CAAC,IAAI;gBACrB,WAAW,EAAE,UAAU,CAAC,WAAW;gBACnC,WAAW,EAAE,UAAU,CAAC,WAAW;gBACnC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;aAC7D,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACpC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACtC,sBAAsB,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC/C,OAAO;QACT,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE;YAC/C,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,IAAI,QAAQ;gBAAE,OAAO;YAClD,IAAI,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,YAAY,EAAE,CAAC;gBACxD,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACxC,CAAC;YACD,sBAAsB,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,WAAW,GAAG,IAAI,GAAG,CACzB,OAAO,CAAC,mBAAmB,EAAE,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CACjF,CAAC;QACF,KAAK,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,IAAI,aAAa,EAAE,CAAC;YACjD,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,YAAY,CAAC,UAAU;gBAAE,SAAS;YAChE,YAAY,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;YAChC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;QACD,KAAK,MAAM,UAAU,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC;gBAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAClD,YAAY,CAAC,gBAAgB,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IACzD,SAAS,EAAE,CAAC;IAEZ,OAAO,GAAG,EAAE;QACV,IAAI,QAAQ;YAAE,OAAO;QACrB,QAAQ,GAAG,IAAI,CAAC;QAChB,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QACrD,YAAY,CAAC,mBAAmB,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAC5D,KAAK,MAAM,YAAY,IAAI,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC;YAClD,YAAY,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAClC,CAAC;QACD,aAAa,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"webmcp.js","sourceRoot":"","sources":["../src/webmcp.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@nexface/tools",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.0",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./internal": {
       "types": "./dist/internal.d.ts",
       "default": "./dist/internal.js"
@@ -17,10 +18,30 @@
     }
   },
   "scripts": {
-    "build": "node ../../scripts/generate-browser-tools-skill.mjs --check && tsc -p tsconfig.json",
+    "build": "node ../../scripts/generate-browser-tools-skill.mjs --check && tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
     "typecheck": "node ../../scripts/generate-browser-tools-skill.mjs --check && tsc -p tsconfig.json --noEmit"
   },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10"
+  },
   "peerDependencies": {
+    "react-dom": ">=18",
     "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "tag": "alpha",
+    "access": "public"
   }
 }