fix(skills): read-only view mode for built-in skills

[shivammittal274]

Summary

• Built-in skill cards show Eye icon + "View" instead of Pencil + "Edit"
• Clicking "View" opens the dialog in read-only mode:
  • Title: "View Skill"
  • Description: "This skill is managed by BrowserOS and updated automatically."
  • Name, description, and markdown editor are all read-only
  • Markdown editor toolbar hidden (no formatting tools)
  • Tip section hidden
  • Footer shows just "Close" — no "Update Skill" button
• User-created skills still show "Edit" with full editing capabilities

Test plan

• Click "View" on a built-in skill — dialog opens read-only, no save button
• Click "Edit" on a user skill — dialog opens editable as before
• Click "New Skill" — dialog opens in create mode as before
• Verify markdown content renders correctly in read-only mode

🤖 Generated with Claude Code

[greptile-apps]

Greptile Summary

This PR adds a read-only view mode for built-in skills by introducing a readOnly prop to SkillDialog and conditionally rendering all interactive elements (inputs, toolbar, tip section, save buttons) based on that flag. Built-in skill cards now display an Eye + "View" action instead of Pencil + "Edit", and the dialog opens in a fully non-editable state with a single "Close" button.

Key changes:

• SkillCard now branches on skill.builtIn to render an Eye/View vs Pencil/Edit button
• SkillDialog accepts a new optional readOnly prop that gates all mutation UI (inputs, toolbar, tip, save/cancel buttons)
• MarkdownEditor already supported a readOnly prop (hides toolbar, passes readOnly to MDXEditor), so the integration is clean
• The readOnly value is derived from editingSkill?.builtIn at the call site, correctly resolving to undefined (falsy) in create mode

Issues found:

• The JSX fragment refactor (<><Eye …/>View</>) removes the whitespace text node that previously provided a visual gap between icon and text in the skill card button — affects both the new "View" and the existing "Edit" buttons
• The footer paragraph duplicates the same sentence already shown in the dialog header description for read-only mode

Confidence Score: 4/5

• Safe to merge — logic is sound and the MarkdownEditor already supported readOnly; only minor style polish needed.
• The read-only guard is applied consistently across all interactive elements (Input, Textarea, MarkdownEditor, submit handler, key handler, and action buttons). The two issues found are style/UX concerns (icon spacing, duplicate text) rather than functional bugs.
• No files require special attention beyond the two style issues flagged in SkillsPage.tsx.

Important Files Changed

Filename	Overview
packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx	Adds read-only view mode for built-in skill cards: Eye/View button, dialog title/description, disabled inputs, hidden toolbar and tip section, and a Close-only footer. Two minor style issues: icon-to-text gap removed by fragment refactor, and footer duplicates the header description for built-in skills.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User clicks action button on SkillCard] --> B{skill.builtIn?}
    B -- Yes --> C[Show Eye + View button]
    B -- No --> D[Show Pencil + Edit button]
    C --> E[handleEdit: fetchSkillDetail]
    D --> E
    E --> F[setEditingSkill / setIsDialogOpen]
    F --> G[SkillDialog opens]
    G --> H{readOnly = editingSkill?.builtIn}
    H -- true --> I[Read-only mode]
    H -- false/undefined --> J[Edit / Create mode]
    I --> K[Title: View Skill]
    I --> L[Inputs: readOnly=true]
    I --> M[Toolbar: hidden]
    I --> N[Tip section: hidden]
    I --> O[Footer: Close button only]
    J --> P[Title: Edit Skill / Create Skill]
    J --> Q[Inputs: editable]
    J --> R[Toolbar: visible]
    J --> S[Tip section: visible]
    J --> T[Footer: Cancel + Save button]

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx
Line: 331-335

Comment:
**Missing gap between icon and text**

The refactoring to use JSX fragments removes the whitespace text node that previously provided a visual gap between the icon and label. In the original code, the newline between `<Pencil … />` and `Edit` produced a space character; the new inline fragments `<><Eye …/>View</>` and `<><Pencil …/>Edit</>` have no such whitespace, so the icon and text will render flush against each other.

Other buttons in this file (e.g. `<Plus className="mr-1.5 size-4" />`) use `mr-1.5` to create icon-to-text spacing, suggesting the `Button` component does not provide automatic gap. Add a margin or an explicit space to both variants:

```suggestion
          {skill.builtIn ? (
            <><Eye className="mr-1 size-3.5" />View</>
          ) : (
            <><Pencil className="mr-1 size-3.5" />Edit</>
          )}
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx
Line: 486-489

Comment:
**Duplicate read-only description text**

In read-only mode, the exact same string `'This skill is managed by BrowserOS and updated automatically.'` is displayed both in the dialog header's `DialogDescription` (line 414) and again in this footer paragraph. The footer ends up repeating information the user has already seen at the top of the dialog. Consider using a shorter, distinct message in the footer — for example `'Read-only — managed by BrowserOS.'` — or omitting the footer paragraph entirely for built-in skills.

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: "fix(skills): read-on..."}