@agent-smith/feat-frontend 0.0.1 → 0.0.2

package/dist/actions/playwright-cli-playbook.js

@@ -0,0 +1,74 @@
+/*
+# tool
+name: playwright-cli-playbook
+description: "Run Playwright cli commands. Load the `playwright-cli` skill to understand the api"
+arguments:
+    commands:
+        description: |-
+            "The playwright-cli commands to run: an array of commands. Example: ["open https://playwright.dev --headed", "snapshot"]
+        required: true
+*/
+import { utils } from "@agent-smith/core";
+import { parseArgsStringToArgv } from 'string-argv';
+
+
+async function action(args, options) {
+    //console.log("ARGS", args);
+    const ar = JSON.parse(args.commands);
+    //console.log("CMDS", ar);
+    //return "ok";
+    if (options?.variables?.workspace) {
+    } else {
+        throw new Error("no workspace var");
+    }
+    //write only in workspace
+    ar.forEach(v => {
+        if (v.includes("--filename=")) {
+            const p = v.replace("--filename=").trim();
+            if (!p.startsWith("/workspace")) {
+                return "The filename argument must be a path starting with /workspace";
+            }
+        }
+        if (v.includes("--profile=")) {
+            const p = v.replace("--profile=").trim();
+            if (!p.startsWith("/workspace")) {
+                return "The profile argument must be a path starting with /workspace";
+            }
+        }
+    });
+    const vars = [];
+    ar.forEach(a => {
+        if (a.includes("/workspace")) {
+            a = a.replaceAll("/workspace", options.variables.workspace);
+        }
+        if (a.startsWith("open")) {
+            if (!a.includes("--headed")) {
+                return `${a}: please use the --headed flag with the open command so the user can see the operations`;
+            }
+        }
+        vars.push(a);
+    });
+    console.log("Executing playwright-cli playbook", vars.length, "operations:");
+    const endRes = [];
+    for (const v of vars) {
+        const errBuf = [];
+        //console.log("Executing", v);
+        const execArgs = parseArgsStringToArgv(v.trim());
+        console.log("Executing", execArgs);
+        let r = await utils.execute("playwright-cli", execArgs, {
+            onStderr: (e) => errBuf.push(e.toString())
+        });
+        if (errBuf.length > 0) {
+            r = "[Error]: " + errBuf.join("\n");
+        } else {
+            r = `${v}:\n${r}`;
+        }
+        endRes.push(r.toString().replaceAll(options.variables.workspace, "/workspace"));
+    }
+    //console.log("RES", res);
+    return endRes.join("\n");
+}
+
+export {
+    action,
+};

package/dist/actions/playwright-cli.js

@@ -3,17 +3,19 @@
 name: playwright-cli
 description: "Run a Playwright cli command. Load the `playwright-cli` skill to understand the api"
 arguments:
-    arguments:
+    command:
         description: |-
-            The playwright-cli command arguments. Example: open https://playwright.dev --headed
+            the playwright-cli command line. Example: open https://playwright.dev --headed
         required: true
 */
 import { utils } from "@agent-smith/core";
-import { parseArgsStringToArgv } from 'string-argv';
-
+import parseArgsStringToArgv from "string-argv";
 
 async function action(args, options) {
-    const ar = parseArgsStringToArgv(args.arguments);
+    if (args.command.startsWith("playwright-cli")) {
+        args.command = args.command.replace("playwright-cli", "").trim();
+    }
+    const ar = parseArgsStringToArgv(args.command.replaceAll("\\", ""));
     if (options?.variables?.workspace) {
     } else {
         throw new Error("no workspace var");
@@ -40,7 +42,7 @@ async function action(args, options) {
         }
         vars.push(a);
     });
-    console.log("Executing playwright-cli", vars.join(" "));
+    console.log("Executing playwright-cli", vars);
     const res = await utils.execute("playwright-cli", vars);
     if (ar[0] == "screenshot") {
         return "Screenshot saved";

package/dist/agents/browser-agent.yml

@@ -1,5 +1,5 @@
 tool:
-  name: lx-browser
+  name: browser-agent
   description: An agent that has access to browser usage using Playwright
   arguments:
       prompt:
@@ -11,15 +11,13 @@ prompt: |-
     {prompt}
 template:
     system: |-
-        You are Lynx Coder, a coding agent from Lynx AI.
-        
         Your task is to use a browser with playwright-cli. Constraints:
          
         - You always work in headed mode: use the `--headed` flag with commands like `open`
+        - Never save screenshots unless asked
         - Close the browser when you are done
-        - For screenshots use the `--filename` flag with absolute paths starting with /workspace. You don"t need to verify if he screenshots has been saved. Limit the size of the screenshots (max 1024px width).
 
-        Important: start by loading the `playwright-cli` skill to understand the api before running commands.
+        Important: start by loading the `playwright-cli-mini` skill to understand the api before running commands.
 model: qwen35b
 variables:
   required:
@@ -28,8 +26,3 @@ variables:
 toolsList:
   - playwright-cli-headed
   - load-skill
-workflow:
-    before:
-        - adaptater: from-container
-    after:
-        - adaptater: to-container

package/dist/agents/frontend-assistant.yml

@@ -4,8 +4,6 @@ prompt: |-
     {prompt}
 template:
     system: |-
-      You are Lynx Coder, a coding agent from Lynx AI.
-
       {file:../fragments/workspace.md}
       
       {file:../fragments/ctx-helper-files.md}
@@ -32,6 +30,8 @@ toolsList:
   - write-file
   - edit-search-replace
   - shell
+  - python
   - browser-agent
   - load-skill
-  - load-task
+  - load-task
+  - notify-user

package/dist/agents/frontend-light.yml

@@ -4,8 +4,6 @@ prompt: |-
     {prompt}
 template:
     system: |-
-        You are Lynx Coder, a coding agent from Lynx AI.
-
         {file:../fragments/workspace.md}
         
         {file:../fragments/ctx-helper-files.md}

package/dist/agents/frontend-team.yml

@@ -4,7 +4,7 @@ prompt: |-
     {prompt}
 template:
     system: |-
-        You are Lynx Coder, a coding agent from Lynx AI. Your can organise the workflow of other agents. As a coordinator you can delegate tasks to agents to orchestrate the work and coordinate the team of agents. Available agents:
+        Your can organise the workflow of other agents. As a coordinator you can delegate tasks to agents to orchestrate the work and coordinate the team of agents. Available agents:
 
         {file:../fragments/agents-manager-ts.md}
 
@@ -14,7 +14,7 @@ template:
 
         Load the typescript-coding-guide skill when you need to code.
 
-        To visualy check in the browser do the following: instruct the browser agent with the steps to accomplish (clicks,..) and to take a screenshot (make sure the directory exists before transmiting a path to an agent). Then read back the screenshot to visualy inspect anything.
+        For verifications you should rely on the browser agent. If you really need to visually check with a screenshot instruct the browser agent with the steps to accomplish (clicks,..), and to take a screenshot (make sure the directory exists before transmiting a path to an agent), then read back the screenshot to visualy inspect anything.
 model: qwen35b
 inferParams:
     min_p: 0
@@ -37,5 +37,6 @@ toolsList:
   - python
   - run-agent
   - load-skill
-  - read-webpage
-  - load-image
+  - load-task
+  - load-image  
+  - notify-user

package/dist/agents/frontend.yml

@@ -4,8 +4,6 @@ prompt: |-
     {prompt}
 template:
     system: |-
-        You are Lynx Coder, a coding agent from Lynx AI.
-
         {file:../fragments/workspace.md}
         
         {file:../fragments/ctx-helper-files.md}

package/dist/fragments/agents-manager-ts.md

@@ -1,4 +1,2 @@
 - `frontend-assistant`: a fork of yourself, the default agent. Run it by default to delegate any task.
-- `browser-agent`: a junior agent that manage browser operations using Playwright. Use it to perform browser operations, like making screenshots. Always provide simple and direct instructions to this agent, no complex operations.
-
-All the agents can read and write files and have the same tools as you.
+- `browser-agent`: a junior agent that manage browser operations using Playwright. Use it to perform browser operations, like making screenshots. Always provide simple and direct instructions to this agent, no complex operations.

package/dist/skills/playwright-cli/SKILL.md

@@ -1,7 +1,6 @@
 ---
 name: playwright-cli
 description: Automate browser interactions, test web pages and work with Playwright tests.
-allowed-tools: Bash(playwright-cli:*) Bash(npx:*) Bash(npm:*)
 ---
 
 # Browser Automation with playwright-cli
@@ -15,12 +14,12 @@ playwright-cli open
 playwright-cli open --headed
 # navigate to a page
 playwright-cli goto https://playwright.dev
+# take a snapshot
+playwright-cli snapshot
 # interact with the page using refs from the snapshot
 playwright-cli click e15
 playwright-cli type "page.click"
 playwright-cli press Enter
-# take a screenshot (rarely used, as snapshot is more common)
-playwright-cli screenshot
 # close the browser
 playwright-cli close
 ```
@@ -30,9 +29,7 @@ playwright-cli close
 ### Core
 
 ```bash
-playwright-cli open
-# open and navigate right away
-playwright-cli open https://example.com/
+playwright-cli open https://example.com/  --headed
 playwright-cli goto https://playwright.dev
 playwright-cli type "search query"
 playwright-cli click e3
@@ -41,7 +38,7 @@ playwright-cli dblclick e7
 playwright-cli fill e5 "user@example.com"  --submit
 playwright-cli drag e2 e8
 # drop files or data onto an element (from outside the page)
-playwright-cli drop e4 --path=./image.png
+playwright-cli drop e4 --path=/workspace/image.png
 playwright-cli drop e4 --data="text/plain=hello world"
 playwright-cli hover e4
 playwright-cli select e9 "option-value"
@@ -97,65 +94,11 @@ playwright-cli mousewheel 0 100
 ### Save as
 
 ```bash
-playwright-cli screenshot
-playwright-cli screenshot e5
 playwright-cli screenshot --filename=/workspace/page.png
-playwright-cli screenshot --hires
+playwright-cli screenshot e5 --filename=/workspace/page.png
 playwright-cli pdf --filename=/workspace/page.pdf
 ```
 
-### Tabs
-
-```bash
-playwright-cli tab-list
-playwright-cli tab-new
-playwright-cli tab-new https://example.com/page
-playwright-cli tab-close
-playwright-cli tab-close 2
-playwright-cli tab-select 0
-```
-
-### Storage
-
-```bash
-playwright-cli state-save
-playwright-cli state-save auth.json
-playwright-cli state-load auth.json
-
-# Cookies
-playwright-cli cookie-list
-playwright-cli cookie-list --domain=example.com
-playwright-cli cookie-get session_id
-playwright-cli cookie-set session_id abc123
-playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure
-playwright-cli cookie-delete session_id
-playwright-cli cookie-clear
-
-# LocalStorage
-playwright-cli localstorage-list
-playwright-cli localstorage-get theme
-playwright-cli localstorage-set theme dark
-playwright-cli localstorage-delete theme
-playwright-cli localstorage-clear
-
-# SessionStorage
-playwright-cli sessionstorage-list
-playwright-cli sessionstorage-get step
-playwright-cli sessionstorage-set step 3
-playwright-cli sessionstorage-delete step
-playwright-cli sessionstorage-clear
-```
-
-### Network
-
-```bash
-playwright-cli route "**/*.jpg" --status=404
-playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
-playwright-cli route-list
-playwright-cli unroute "**/*.jpg"
-playwright-cli unroute
-```
-
 ### DevTools
 
 ```bash
@@ -165,20 +108,6 @@ playwright-cli requests
 playwright-cli request 5
 playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"
 playwright-cli run-code --filename=/workspace/script.js
-playwright-cli tracing-start
-playwright-cli tracing-stop
-
-# record user actions in the browser, print them as Playwright code on stop
-playwright-cli recording-start
-playwright-cli recording-stop
-
-playwright-cli video-start video.webm
-playwright-cli video-chapter "Chapter Title" --description="Details" --duration=2000
-playwright-cli video-stop
-
-# annotate each subsequent action (click, type, ...) with a callout naming the action and highlighting the target
-playwright-cli video-show-actions --duration=600 --position=top-right
-playwright-cli video-hide-actions
 
 # launch the dashboard for UI review / design feedback — user annotates the page, you receive the annotated screenshot, snapshot, and notes
 playwright-cli show --annotate
@@ -194,89 +123,9 @@ playwright-cli highlight e5 --hide
 playwright-cli highlight --hide
 ```
 
-## Raw output
-
-The global `--raw` option strips page status, generated code, and snapshot sections from the output, returning only the result value. Use it to pipe command output into other tools. Commands that don't produce output return nothing.
-
-```bash
-playwright-cli --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart'
-playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json
-playwright-cli --raw snapshot > before.yml
-playwright-cli click e5
-playwright-cli --raw snapshot > after.yml
-diff before.yml after.yml
-TOKEN=$(playwright-cli --raw cookie-get session_id)
-playwright-cli --raw localstorage-get theme
-```
-
-For structured output wrapping every reply as JSON, pass --json
-```bash
-playwright-cli list --json
-```
-
-## Open parameters
-```bash
-# Use specific browser when creating session
-playwright-cli open --browser=chrome
-playwright-cli open --browser=firefox
-playwright-cli open --browser=webkit
-playwright-cli open --browser=msedge
-
-# Emulate a generic mobile device (Pixel 10 for Chromium, iPhone 17 for WebKit).
-# Prefer this when a mobile layout is acceptable: mobile pages are usually
-# lighter, so snapshots are smaller and cheaper.
-playwright-cli open --mobile
-playwright-cli open --device="iPhone 15"
-
-# Open in headed mode
-playwright-cli open --headed
-
-# Use persistent profile (by default profile is in-memory)
-playwright-cli open --persistent
-# Use persistent profile with custom directory
-playwright-cli open --profile=/path/to/profile
-
-# Connect to browser via Playwright Extension
-playwright-cli attach --extension=chrome
-
-# Connect to a running Chrome or Edge by channel name
-playwright-cli attach --cdp=chrome
-playwright-cli attach --cdp=msedge
-
-# Connect to a running browser via CDP endpoint
-playwright-cli attach --cdp=http://localhost:9222
-
-# Start with config file
-playwright-cli open --config=my-config.json
-
-# Close the browser
-playwright-cli close
-# Detach from an attached browser (leaves the external browser running)
-playwright-cli -s=msedge detach
-# Delete user data for the default session
-playwright-cli delete-data
-```
-
 ## Snapshots
 
-After each command, playwright-cli provides a snapshot of the current browser state.
-
 ```bash
-> playwright-cli goto https://example.com
-### Page
-- Page URL: https://example.com/
-- Page Title: Example Domain
-### Snapshot
-[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)
-```
-
-You can also take a snapshot on demand using `playwright-cli snapshot` command. All the options below can be combined as needed.
-
-```bash
-# default - save to a file with timestamp-based name
-playwright-cli snapshot
-
-# save to file, use when snapshot is a part of the workflow result
 playwright-cli snapshot --filename=/workspace/after-click.yaml
 
 # snapshot an element instead of the whole page
@@ -320,30 +169,11 @@ playwright-cli click "getByRole('button', { name: 'Submit' })"
 playwright-cli click "getByTestId('submit-button')"
 ```
 
-## Browser Sessions
-
-```bash
-# create new browser session named "mysession" with persistent profile
-playwright-cli -s=mysession open example.com --persistent
-# same with manually specified profile directory (use when requested explicitly)
-playwright-cli -s=mysession open example.com --profile=/path/to/profile
-playwright-cli -s=mysession click e6
-playwright-cli -s=mysession close  # stop a named browser
-playwright-cli -s=mysession delete-data  # delete user data for persistent session
-
-playwright-cli list
-# Close all browsers
-playwright-cli close-all
-# Forcefully kill all browser processes
-playwright-cli kill-all
-```
-
 ## Example: Form submission
 
 ```bash
 playwright-cli open https://example.com/form
 playwright-cli snapshot
-
 playwright-cli fill e1 "user@example.com"
 playwright-cli fill e2 "password123"
 playwright-cli click e3
@@ -373,15 +203,6 @@ playwright-cli requests
 playwright-cli close
 ```
 
-```bash
-playwright-cli open https://example.com
-playwright-cli tracing-start
-playwright-cli click e4
-playwright-cli fill e7 "test"
-playwright-cli tracing-stop
-playwright-cli close
-```
-
 ## Example: Interactive session
 
 Ask the user for UI review or design feedback. The user draws boxes on the live page and types comments; you receive the annotated screenshot, the snapshot of the marked region, and the user's notes. Use this whenever the user asks for "UI review", "design feedback", or to "ask the user what they think / want / mean":
@@ -390,15 +211,3 @@ Ask the user for UI review or design feedback. The user draws boxes on the live
 playwright-cli open https://example.com
 playwright-cli show --annotate
 ```
-
-## Specific tasks
-
-* **Running and Debugging Playwright tests** [references/playwright-tests.md](references/playwright-tests.md)
-* **Request mocking** [references/request-mocking.md](references/request-mocking.md)
-* **Running Playwright code** [references/running-code.md](references/running-code.md)
-* **Browser session management** [references/session-management.md](references/session-management.md)
-* **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md)
-* **Test generation (plan / generate / heal)** [references/test-generation.md](references/test-generation.md)
-* **Tracing** [references/tracing.md](references/tracing.md)
-* **Video recording** [references/video-recording.md](references/video-recording.md)
-* **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md)