page-agent 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,6 @@
 # PageAgent 🤖🪄
 
-> Unfinished Project. See [**Roadmap**](./ROADMAP.md)
+> ⚠️ See [**Roadmap**](./ROADMAP.md)
 
 ![banner](https://img.alicdn.com/imgextra/i1/O1CN01RY0Wvh26ATVeDIX7v_!!6000000007621-0-tps-1672-512.jpg)
 
@@ -32,11 +32,9 @@ An in-page UI agent in javascript. Control web interfaces with natural language.
 
 ### CDN Integration
 
-> **TODO**: CDN endpoint to be determined.
-
 ```html
-<!-- CDN script tag - URL to be updated -->
-<script src="TODO-CDN-URL"></script>
+<!-- temporary CDN URL. May change in the future -->
+<script src="https://hwcxiuzfylggtcktqgij.supabase.co/storage/v1/object/public/demo-public/v0.0.2/page-agent.js" crossorigin="true" type="text/javascript"></script>
 ```
 
 ### NPM Installation
@@ -48,10 +46,18 @@ npm install page-agent
 ```javascript
 import { PageAgent } from 'page-agent'
 
+// test server
+// @note: rate limit. prompt limit. Origin limit. May change anytime. Use your own llm!
+// @note Using official DeepSeek-chat(3.2). Go to DeepSeek website for privacy policy.
+const DEMO_MODEL = 'PAGE-AGENT-FREE-TESTING-RANDOM'
+const DEMO_BASE_URL = 'https://hwcxiuzfylggtcktqgij.supabase.co/functions/v1/llm-testing-proxy'
+const DEMO_API_KEY = 'PAGE-AGENT-FREE-TESTING-RANDOM'
+
 const agent = new PageAgent({
-  modelName: 'gpt-4.1-mini',
-  baseURL: 'xxxx',
-  apiKey: 'xxxx'
+  modelName: DEMO_MODEL,
+  baseURL: DEMO_BASE_URL,
+  apiKey: DEMO_API_KEY,
+  language: 'en-US'
 })
 
 await agent.execute("Click the login button")
@@ -91,7 +97,6 @@ Please read our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing Guide](C
 This project builds upon the excellent work of:
 
 - **[browser-use](https://github.com/browser-use/browser-use)**
-- **[ai-sdk](https://ai-sdk.dev/)**
 
 PageAgent is designed for **client-side web enhancement**, not server-side automation.
 

package/dist/lib/page-agent.js

@@ -22,7 +22,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _bus, _wrapper, _indicator, _statusText, _historySection, _expandButton, _pauseButton, _stopButton, _inputSection, _taskInput, _bus2, _state, _isExpanded, _pageAgent, _userAnswerResolver, _isWaitingForUserAnswer, _Panel_instances, update_fn, show_fn, hide_fn, reset_fn, togglePause_fn, updatePauseButton_fn, stopAgent_fn, submitTask_fn, handleUserAnswer_fn, showInputArea_fn, hideInputArea_fn, shouldShowInputArea_fn, createWrapper_fn, setupEventListeners_fn, toggle_fn, expand_fn, collapse_fn, animateTextChange_fn, updateStatusIndicator_fn, updateHistory_fn, scrollToBottom_fn, createHistoryItem_fn, _cursor, _currentCursorX, _currentCursorY, _targetCursorX, _targetCursorY, _SimulatorMask_instances, createCursor_fn, moveCursorToTarget_fn, _llm, _totalWaitTime, _abortController, _PageAgent_instances, packMacroTool_fn, getSystemPrompt_fn, assembleUserPrompt_fn, onDone_fn, getBrowserState_fn, updateTree_fn;
+var _bus, _wrapper, _indicator, _statusText, _historySection, _expandButton, _pauseButton, _stopButton, _inputSection, _taskInput, _bus2, _state, _isExpanded, _pageAgent, _userAnswerResolver, _isWaitingForUserAnswer, _headerUpdateTimer, _pendingHeaderText, _isAnimating, _Panel_instances, update_fn, show_fn, hide_fn, reset_fn, togglePause_fn, updatePauseButton_fn, stopAgent_fn, submitTask_fn, handleUserAnswer_fn, showInputArea_fn, hideInputArea_fn, shouldShowInputArea_fn, createWrapper_fn, setupEventListeners_fn, toggle_fn, expand_fn, collapse_fn, startHeaderUpdateLoop_fn, stopHeaderUpdateLoop_fn, checkAndUpdateHeader_fn, animateTextChange_fn, updateStatusIndicator_fn, updateHistory_fn, scrollToBottom_fn, createHistoryItem_fn, _cursor, _currentCursorX, _currentCursorY, _targetCursorX, _targetCursorY, _SimulatorMask_instances, createCursor_fn, moveCursorToTarget_fn, _llm, _totalWaitTime, _abortController, _PageAgent_instances, packMacroTool_fn, getSystemPrompt_fn, assembleUserPrompt_fn, onDone_fn, getBrowserState_fn, updateTree_fn;
 import chalk from "chalk";
 import zod, { z } from "zod";
 import { Motion } from "ai-motion";
@@ -2626,6 +2626,9 @@ const _Panel = class _Panel {
     __privateAdd(this, _pageAgent);
     __privateAdd(this, _userAnswerResolver, null);
     __privateAdd(this, _isWaitingForUserAnswer, false);
+    __privateAdd(this, _headerUpdateTimer, null);
+    __privateAdd(this, _pendingHeaderText, null);
+    __privateAdd(this, _isAnimating, false);
     __privateSet(this, _pageAgent, pageAgent);
     __privateSet(this, _bus2, pageAgent.bus);
     __privateSet(this, _wrapper, __privateMethod(this, _Panel_instances, createWrapper_fn).call(this));
@@ -2638,6 +2641,7 @@ const _Panel = class _Panel {
     __privateSet(this, _inputSection, __privateGet(this, _wrapper).querySelector(`.${styles$1.inputSectionWrapper}`));
     __privateSet(this, _taskInput, __privateGet(this, _wrapper).querySelector(`.${styles$1.taskInput}`));
     __privateMethod(this, _Panel_instances, setupEventListeners_fn).call(this);
+    __privateMethod(this, _Panel_instances, startHeaderUpdateLoop_fn).call(this);
     __privateMethod(this, _Panel_instances, showInputArea_fn).call(this);
     __privateGet(this, _bus2).on("panel:show", () => __privateMethod(this, _Panel_instances, show_fn).call(this));
     __privateGet(this, _bus2).on("panel:hide", () => __privateMethod(this, _Panel_instances, hide_fn).call(this));
@@ -2671,6 +2675,7 @@ const _Panel = class _Panel {
    */
   dispose() {
     __privateSet(this, _isWaitingForUserAnswer, false);
+    __privateMethod(this, _Panel_instances, stopHeaderUpdateLoop_fn).call(this);
     this.wrapper.remove();
   }
 };
@@ -2689,13 +2694,17 @@ _isExpanded = new WeakMap();
 _pageAgent = new WeakMap();
 _userAnswerResolver = new WeakMap();
 _isWaitingForUserAnswer = new WeakMap();
+_headerUpdateTimer = new WeakMap();
+_pendingHeaderText = new WeakMap();
+_isAnimating = new WeakMap();
 _Panel_instances = new WeakSet();
-update_fn = /* @__PURE__ */ __name(async function(stepData) {
+/**
+ * Update status
+ */
+update_fn = /* @__PURE__ */ __name(function(stepData) {
   const step = __privateGet(this, _state).addStep(stepData);
   const headerText = truncate(step.displayText, 20);
-  if (__privateGet(this, _statusText).textContent !== headerText) {
-    await __privateMethod(this, _Panel_instances, animateTextChange_fn).call(this, headerText);
-  }
+  __privateSet(this, _pendingHeaderText, headerText);
   __privateMethod(this, _Panel_instances, updateStatusIndicator_fn).call(this, step.type);
   __privateMethod(this, _Panel_instances, updateHistory_fn).call(this);
   if (step.type === "completed" || step.type === "error") {
@@ -2933,19 +2942,53 @@ collapse_fn = /* @__PURE__ */ __name(function() {
   this.wrapper.classList.add(styles$1.collapsed);
   __privateGet(this, _expandButton).textContent = "▼";
 }, "#collapse");
-animateTextChange_fn = /* @__PURE__ */ __name(async function(newText) {
-  return new Promise((resolve) => {
-    __privateGet(this, _statusText).classList.add(styles$1.fadeOut);
+/**
+ * Start periodic header update loop
+ */
+startHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
+  __privateSet(this, _headerUpdateTimer, setInterval(() => {
+    __privateMethod(this, _Panel_instances, checkAndUpdateHeader_fn).call(this);
+  }, 450));
+}, "#startHeaderUpdateLoop");
+/**
+ * Stop periodic header update loop
+ */
+stopHeaderUpdateLoop_fn = /* @__PURE__ */ __name(function() {
+  if (__privateGet(this, _headerUpdateTimer)) {
+    clearInterval(__privateGet(this, _headerUpdateTimer));
+    __privateSet(this, _headerUpdateTimer, null);
+  }
+}, "#stopHeaderUpdateLoop");
+/**
+ * Check if header needs update and trigger animation if not currently animating
+ */
+checkAndUpdateHeader_fn = /* @__PURE__ */ __name(function() {
+  if (!__privateGet(this, _pendingHeaderText) || __privateGet(this, _isAnimating)) {
+    return;
+  }
+  if (__privateGet(this, _statusText).textContent === __privateGet(this, _pendingHeaderText)) {
+    __privateSet(this, _pendingHeaderText, null);
+    return;
+  }
+  const textToShow = __privateGet(this, _pendingHeaderText);
+  __privateSet(this, _pendingHeaderText, null);
+  __privateMethod(this, _Panel_instances, animateTextChange_fn).call(this, textToShow);
+}, "#checkAndUpdateHeader");
+/**
+ * Animate text change with fade out/in effect
+ */
+animateTextChange_fn = /* @__PURE__ */ __name(function(newText) {
+  __privateSet(this, _isAnimating, true);
+  __privateGet(this, _statusText).classList.add(styles$1.fadeOut);
+  setTimeout(() => {
+    __privateGet(this, _statusText).textContent = newText;
+    __privateGet(this, _statusText).classList.remove(styles$1.fadeOut);
+    __privateGet(this, _statusText).classList.add(styles$1.fadeIn);
     setTimeout(() => {
-      __privateGet(this, _statusText).textContent = newText;
-      __privateGet(this, _statusText).classList.remove(styles$1.fadeOut);
-      __privateGet(this, _statusText).classList.add(styles$1.fadeIn);
-      setTimeout(() => {
-        __privateGet(this, _statusText).classList.remove(styles$1.fadeIn);
-        resolve();
-      }, 300);
-    }, 150);
-  });
+      __privateGet(this, _statusText).classList.remove(styles$1.fadeIn);
+      __privateSet(this, _isAnimating, false);
+    }, 300);
+  }, 150);
 }, "#animateTextChange");
 updateStatusIndicator_fn = /* @__PURE__ */ __name(function(type) {
   __privateGet(this, _indicator).className = styles$1.indicator;