@agent-smith/feat-frontend 0.0.1

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

@@ -0,0 +1,59 @@
+/*
+# tool
+name: playwright-cli
+description: "Run a Playwright cli command. Load the `playwright-cli` skill to understand the api"
+arguments:
+    arguments:
+        description: |-
+            The playwright-cli command arguments. Example: open https://playwright.dev --headed
+        required: true
+*/
+import { utils } from "@agent-smith/core";
+import { parseArgsStringToArgv } from 'string-argv';
+
+
+async function action(args, options) {
+    const ar = parseArgsStringToArgv(args.arguments);
+    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);
+        }
+        vars.push(a);
+    });
+    if (ar[0] == "open") {
+        if (!ar.includes("--headed")) {
+            return "Please use the --headed flag so he user can see the operations";
+        }
+    }
+    console.log("Executing playwright-cli", vars.join(" "));
+    const res = await utils.execute("playwright-cli", vars);
+    if (ar[0] == "screenshot") {
+        return "Screenshot saved";
+    }
+    //console.log("RES", res);
+    return res.replaceAll(options.variables.workspace, "/workspace");;
+}
+
+export {
+    action,
+};

package/dist/actions/playwright-cli.js

@@ -0,0 +1,54 @@
+/*
+# tool
+name: playwright-cli
+description: "Run a Playwright cli command. Load the `playwright-cli` skill to understand the api"
+arguments:
+    arguments:
+        description: |-
+            The playwright-cli command arguments. Example: open https://playwright.dev --headed
+        required: true
+*/
+import { utils } from "@agent-smith/core";
+import { parseArgsStringToArgv } from 'string-argv';
+
+
+async function action(args, options) {
+    const ar = parseArgsStringToArgv(args.arguments);
+    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);
+        }
+        vars.push(a);
+    });
+    console.log("Executing playwright-cli", vars.join(" "));
+    const res = await utils.execute("playwright-cli", vars);
+    if (ar[0] == "screenshot") {
+        return "Screenshot saved";
+    }
+    //console.log("RES", res);
+    return res.replaceAll(options.variables.workspace, "/workspace");;
+}
+
+export {
+    action,
+};

package/dist/actions/playwright.js

@@ -0,0 +1,97 @@
+/*
+# tool
+name: playwright
+description: "Execute a Playwright Python script"
+arguments:
+    script:
+        description: |-
+            The Playwright Python code to execute
+        required: true
+parallelCalls: false
+*/
+import { JsBoxlite } from '@boxlite-ai/boxlite';
+
+async function action(args, options) {
+    //console.log("SHELL ARGS", args);
+    //console.log("SHELL OPTS", options);
+    const location = options?.variables?.path ?? options?.variables?.workspace;
+    if (!location) {
+        return "[Error]: shell tool missing path or workspace parameter";
+    }
+    if (options?.debug) {
+        console.log('Opening box', location);
+    }
+    //console.log("Cmd:", cmd, cmdArgs);
+    const runtime = JsBoxlite.withDefaultConfig();
+    const box = await runtime.create({
+        image: 'chinayin/playwright:1.52.0-chromium-python3.12',
+        workingDir: "/workspace",
+        homeDir: "/workspace",
+        volumes: [
+            { hostPath: location, guestPath: '/workspace' },
+        ],
+        memoryMib: 2048,
+        //network: { "mode": "enabled", allowNet: ["http://localhost:5173"] },
+        reuseExisting: true,
+        //autoRemove: true,
+    });
+    process.on('SIGINT', () => box.stop().then(() => process.exit(0)));
+    const stdOutBuf = new Array();
+    const stdErrBuf = new Array();
+    let res = "";
+    setTimeout(() => {
+        stdErrBuf.push("Timeout: the process has timed out");
+        box.stop();
+    }, 60000);
+    try {
+        let cmd = `python3 << 'EOF'\n${args.script}\nEOF`;
+        const execution = await box.exec("sh", ["-c", cmd]);
+        async function readStdout() {
+            const stdout = await execution.stdout();
+            while (true) {
+                const line = await stdout.next();
+                if (line === null)
+                    break;
+                const lt = line.trim();
+                console.log(`[stdout] ${lt}`);
+                stdOutBuf.push(lt);
+            }
+        }
+        async function readStderr() {
+            const stderr = await execution.stderr();
+            while (true) {
+                const line = await stderr.next();
+                if (line === null)
+                    break;
+                const lt = line.trim();
+                console.error(`[stderr] ${lt}`);
+                stdErrBuf.push(lt);
+            }
+        }
+        await Promise.all([readStdout(), readStderr()]);
+        const result = await execution.wait();
+        //console.log("CMD RES", result);
+        res = `[Exit code]: ${result.exitCode}\n`;
+        if (result?.errorMessage) {
+            console.error("ERROR", result.errorMessage);
+            stdErrBuf.push(result.errorMessage);
+        }
+        if (stdOutBuf.length > 0) {
+            res += `[Stdout]: ${stdOutBuf.join("\n")}\n`;
+        }
+        if (stdErrBuf.length > 0) {
+            res += `[Stderr]: ${stdErrBuf.join("\n")}\n`;
+        }
+    }
+    catch (e) {
+        console.error(e);
+    }
+    finally {
+        if (options?.debug) {
+            console.log("stopping shell box");
+        }
+        await box.stop();
+    }
+    return res;
+}
+export { action, };

package/dist/agents/browser-agent.yml

@@ -0,0 +1,35 @@
+tool:
+  name: lx-browser
+  description: An agent that has access to browser usage using Playwright
+  arguments:
+      prompt:
+          description: "The question or browser operation to perform"
+          required: true
+description: Playwright agent
+category: code/frontend
+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`
+        - 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.
+model: qwen35b
+variables:
+  required:
+    workspace:
+      description: The local directory path where to operate
+toolsList:
+  - playwright-cli-headed
+  - load-skill
+workflow:
+    before:
+        - adaptater: from-container
+    after:
+        - adaptater: to-container

package/dist/agents/frontend-assistant.yml

@@ -0,0 +1,37 @@
+description: Frontend coder assistant agent
+category: code/frontend
+prompt: |-
+    {prompt}
+template:
+    system: |-
+      You are Lynx Coder, a coding agent from Lynx AI.
+
+      {file:../fragments/workspace.md}
+      
+      {file:../fragments/ctx-helper-files.md}
+
+      Load the typescript-coding-guide skill when you need to code.
+model: qwen35b
+inferParams:
+    min_p: 0
+    top_k: 20
+    top_p: 0.85
+    temperature: 0.6
+    repetition_penalty: 1
+    presence_penalty: 1.2
+    chat_template_kwargs:
+      enable_thinking: true
+      preserve_thinking: true
+variables:
+  required:
+    workspace:
+      description: The local directory path where to operate
+toolsList:
+  - read-file
+  - load-image
+  - write-file
+  - edit-search-replace
+  - shell
+  - browser-agent
+  - load-skill
+  - load-task

package/dist/agents/frontend-light.yml

@@ -0,0 +1,31 @@
+description: Frontend coder light agent
+category: code/frontend
+prompt: |-
+    {prompt}
+template:
+    system: |-
+        You are Lynx Coder, a coding agent from Lynx AI.
+
+        {file:../fragments/workspace.md}
+        
+        {file:../fragments/ctx-helper-files.md}
+model: qwen35b
+inferParams:
+    min_p: 0
+    top_k: 20
+    top_p: 0.85
+    temperature: 0.6
+    repetition_penalty: 1
+    chat_template_kwargs:
+        enable_thinking: true
+        preserve_thinking: true
+variables:
+  required:
+    workspace:
+      description: The local directory path where to operate
+toolsList:
+  - shell
+  - python
+  - load-image
+  - edit-search-replace
+  - browser-agent

package/dist/agents/frontend-team.yml

@@ -0,0 +1,41 @@
+description: Frontend coder team manager agent
+category: code/frontend
+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:
+
+        {file:../fragments/agents-manager-ts.md}
+
+        {file:../fragments/workspace.md}
+        
+        {file:../fragments/ctx-helper-files.md}
+
+        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.
+model: qwen35b
+inferParams:
+    min_p: 0
+    top_k: 20
+    top_p: 0.85
+    temperature: 0.6
+    repetition_penalty: 1
+    chat_template_kwargs:
+        enable_thinking: true
+        preserve_thinking: true
+variables:
+  required:
+    workspace:
+      description: The local directory path where to operate
+toolsList:
+  - read-file
+  - write-file
+  - edit-search-replace
+  - shell
+  - python
+  - run-agent
+  - load-skill
+  - read-webpage
+  - load-image

package/dist/agents/frontend.yml

@@ -0,0 +1,37 @@
+description: Frontend coder agent
+category: code/frontend
+prompt: |-
+    {prompt}
+template:
+    system: |-
+        You are Lynx Coder, a coding agent from Lynx AI.
+
+        {file:../fragments/workspace.md}
+        
+        {file:../fragments/ctx-helper-files.md}
+
+        Load the typescript-coding-guide skill when you need to code. For Playwright always use the headed mode ("--headed" parameter). Close the browser when you are done.
+model: qwen35b
+inferParams:
+    min_p: 0
+    top_k: 20
+    top_p: 0.85
+    temperature: 0.6
+    repetition_penalty: 1
+    chat_template_kwargs:
+        enable_thinking: true
+        preserve_thinking: true
+variables:
+  required:
+    workspace:
+      description: The local directory path where to operate
+toolsList:
+  - read-file
+  - write-file
+  - edit-search-replace
+  - shell
+  - python
+  - load-skill
+  - read-webpage
+  - load-image
+  - playwright-cli

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

@@ -0,0 +1,4 @@
+- `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.

package/dist/fragments/ctx-helper-files.md

@@ -0,0 +1,6 @@
+Project's context helper files:
+
+- `AGENTS.md`: general high level context map of the project. Read this first.
+- `.agents/documentation/project-nav.md`: a map of the project
+
+To navigate the code read local directories `.agents/documentation/codebase-summary.md` files.

package/dist/fragments/workspace.md

@@ -0,0 +1,6 @@
+You are operating on a Linux filesystem, the current working directory is `/workspace`. If a user refers to a relative path, its relative to `/workspace`.
+
+Directories for AI agents:
+
+- `/workspace/.agents/documentation`: where the documentation to navigate the codebase is
+- `/workspace/.agents/tasks`: where we store tasks for AI agents. If the user refers to a task check this directory