From 50b2f45590fe24a72a92293d36ca102b8ce3d3bd Mon Sep 17 00:00:00 2001 From: shivammittal274 <56757235+shivammittal274@users.noreply.github.com> Date: Thu, 19 Mar 2026 17:38:28 +0530 Subject: [PATCH] fix(skills): UI section separation and fix find-alternatives rendering (#492) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(skills): UI section separation and fix find-alternatives rendering - Split skills page into "My Skills" (user) and "BrowserOS Skills" (built-in) sections - Fix find-alternatives SKILL.md — replace angle bracket placeholders with curly braces to prevent MDXEditor from parsing them as JSX and rendering empty content * fix(skills): bump find-alternatives to v1.1 for CDN sync --- .../entrypoints/app/skills/SkillsPage.tsx | 61 +++++++++++++++---- .../defaults/find-alternatives/SKILL.md | 44 ++++++------- 2 files changed, 72 insertions(+), 33 deletions(-) diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx index ca0ae2332..21f326fb9 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx @@ -108,17 +108,12 @@ export const SkillsPage: FC = () => { ) : null} {!isLoading && !error && skills.length > 0 ? ( -
- {skills.map((skill) => ( - handleEdit(skill)} - onDelete={() => setSkillToDelete(skill)} - onToggle={(enabled) => handleToggle(skill, enabled)} - /> - ))} -
+ setSkillToDelete(skill)} + onToggle={handleToggle} + /> ) : null} void }> = ({ onCreateClick }) => ( ) +const SkillGrid: FC<{ children: React.ReactNode }> = ({ children }) => ( +
+ {children} +
+) + +const SkillSections: FC<{ + skills: SkillMeta[] + onEdit: (skill: SkillMeta) => void + onDelete: (skill: SkillMeta) => void + onToggle: (skill: SkillMeta, enabled: boolean) => void +}> = ({ skills, onEdit, onDelete, onToggle }) => { + const userSkills = skills.filter((s) => !s.builtIn) + const builtInSkills = skills.filter((s) => s.builtIn) + + const renderCard = (skill: SkillMeta) => ( + onEdit(skill)} + onDelete={() => onDelete(skill)} + onToggle={(enabled) => onToggle(skill, enabled)} + /> + ) + + return ( +
+ {userSkills.length > 0 ? ( +
+

My Skills

+ {userSkills.map(renderCard)} +
+ ) : null} + + {builtInSkills.length > 0 ? ( +
+

BrowserOS Skills

+ {builtInSkills.map(renderCard)} +
+ ) : null} +
+ ) +} + const SkillCard: FC<{ skill: SkillMeta onEdit: () => void diff --git a/packages/browseros-agent/apps/server/src/skills/defaults/find-alternatives/SKILL.md b/packages/browseros-agent/apps/server/src/skills/defaults/find-alternatives/SKILL.md index 5800b9b2a..050b0761e 100644 --- a/packages/browseros-agent/apps/server/src/skills/defaults/find-alternatives/SKILL.md +++ b/packages/browseros-agent/apps/server/src/skills/defaults/find-alternatives/SKILL.md @@ -4,7 +4,7 @@ description: Find alternative products to something the user is looking at or co metadata: display-name: Find Alternatives enabled: "true" - version: "1.0" + version: "1.1" --- # Find Alternatives @@ -48,12 +48,12 @@ Activate when the user: | Tab | Target | Query | |-----|--------|-------| -| 1 | Google Shopping | ` alternatives under $` | -| 2 | Google Search | `best alternatives reddit` | -| 3 | Google Search | ` vs comparison ` | -| 4 | Amazon | `` filtered to price range | -| 5 | Walmart | `` in price range | -| 6 | Best Buy / category retailer | `` | +| 1 | Google Shopping | `{product category} alternatives under ${budget}` | +| 2 | Google Search | `best {product category} alternatives {year} reddit` | +| 3 | Google Search | `{product category} vs comparison {year}` | +| 4 | Amazon | `{product category}` filtered to price range | +| 5 | Walmart | `{product category}` in price range | +| 6 | Best Buy / category retailer | `{product category}` | | 7–10 | Review sites, Reddit threads, or niche retailers relevant to the category | For **each tab**: @@ -64,10 +64,10 @@ For **each tab**: | Read results | `get_page_content` | Extract search results as markdown | | Visit promising results | `navigate_page` | Click through to individual product pages and review articles | | Extract data | `get_page_content` | Pull product details — name, price, features, ratings, reviews | -| **Save immediately** | `evaluate_script` | Write to `raw/-.json` (see format below) | +| **Save immediately** | `evaluate_script` | Write to `raw/{n}-{source-slug}.json` (see format below) | | Close tab | `close_page` | Free the tab after saving | -#### Raw Data Format (`raw/-.json`) +#### Raw Data Format (`raw/{n}-{source-slug}.json`) ```json { @@ -115,21 +115,21 @@ After all sources are saved: 5. **Write `findings.md`** with the full ranking, reasoning, and source references: ```markdown -# Alternatives for: +# Alternatives for: {Reference Product} **Reference price:** $X **Budget range:** $X – $Y -**Date:** +**Date:** {current date} ## Top 5 Alternatives -### 1. — ⭐⭐⭐⭐⭐ (5/5) -- **Price:** $X at -- **Why:** <1–2 sentence justification> -- **Link:** -- _Source: raw/-.json_ +### 1. {Product Name} — ⭐⭐⭐⭐⭐ (5/5) +- **Price:** $X at {Retailer} +- **Why:** {1–2 sentence justification} +- **Link:** {product URL} +- _Source: raw/{n}-{slug}.json_ -### 2. — ⭐⭐⭐⭐ (4/5) +### 2. {Product Name} — ⭐⭐⭐⭐ (4/5) ... ## Comparison vs Reference @@ -147,14 +147,14 @@ Generate a self-contained `report.html` in the output directory: | Requirement | Detail | |-------------|--------| | **Theme** | Light background (`#ffffff`), clean sans-serif typography, generous whitespace | -| **Header** | "Alternatives for: ", date, budget range | +| **Header** | "Alternatives for: {Product Name}", date, budget range | | **Reference product card** | Show the original product with its price, rating, and link as the baseline | | **Top 5 cards** | Each alternative as a card showing: rank, name, rating (star visualization), price, key features, and a clickable "View Product" link to the actual product page | | **Comparison table** | Side-by-side table with the reference product and all 5 alternatives — price, rating, key features, pros/cons | | **Rating explanation** | Brief note on how the 1–5 rating was determined | -| **Product links** | Every product name and "View Product" button must be a clickable `` to the actual product URL | +| **Product links** | Every product name and "View Product" button must be a clickable link to the actual product URL | | **Source references** | Footer section listing all sources consulted with links | -| **Self-contained** | All styles in a `