Skip to content

Agentic UI: Add Skills tab to application settings - #4271

Merged
bcotrim merged 6 commits into
trunkfrom
agentic-settings-skills-tab
Jul 21, 2026
Merged

Agentic UI: Add Skills tab to application settings#4271
bcotrim merged 6 commits into
trunkfrom
agentic-settings-skills-tab

Conversation

@bcotrim

@bcotrim bcotrim commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

Implemented with Claude Code from the STU-1882 series plan, porting the Skills panel from the exploration PR #3975/#3979 and reworking it per review feedback (toggles instead of Install/Remove buttons, optimistic updates). All code reviewed and visually verified in light + dark mode.

Proposed Changes

Adds a Skills tab to the Agentic UI application settings, letting users manage WordPress agent skills globally — applied to all existing and future sites.

  • Each skill is a single row with a toggle: on installs it to every site, off removes it. State is optimistic, so toggles respond instantly and roll back if the operation fails.
  • An Install all button in the panel header installs every remaining skill at once; it disappears once everything is installed (with reserved space, so the layout doesn't jump).
  • Intro copy explains what skills are, with a Learn more link to the docs.
Light Dark
image image

Testing Instructions

  1. Enable the Agentic UI and open Settings → Skills.
  2. Toggle a skill on: within a moment, the skill appears under <site>/.agents/skills/<skill-id>/ for each site (e.g. ls ~/Studio/<site>/.agents/skills/) and its id is added to selectedSkills in ~/.studio/shared.json.
  3. Toggle it off: the files and the selectedSkills entry are removed.
  4. Click Install all: all remaining skills install sequentially; toggles disable and the button shows a loading state while it runs; the button disappears when everything is installed (no layout jump in the header, no flashing on individual toggles).
  5. Verify light + dark mode.

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?
…lls-tab

# Conflicts:
#	apps/ui/src/components/settings-view/index.test.tsx
#	apps/ui/src/components/settings-view/index.tsx
#	apps/ui/src/components/settings-view/style.module.css
@bcotrim
bcotrim requested review from nightnei and sejas July 21, 2026 10:21
@wpmobilebot

wpmobilebot commented Jul 21, 2026

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing cc285b3 vs trunk

app-size

Metric trunk cc285b3 Diff Change
App Size (Mac) 1361.88 MB 1361.89 MB +0.01 MB ⚪ 0.0%

site-editor

Metric trunk cc285b3 Diff Change
load 1040 ms 1089 ms +49 ms ⚪ 0.0%

site-startup

Metric trunk cc285b3 Diff Change
siteCreation 6986 ms 7047 ms +61 ms 🔴 0.9%
siteStartup 2373 ms 2387 ms +14 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

@bcotrim
bcotrim requested a review from shaunandrews July 21, 2026 12:30
…lls-tab

# Conflicts:
#	apps/ui/src/components/settings-view/index.test.tsx

@nightnei nightnei left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left 1 NIT comment.
Other than that, it looks and works peefectly

Comment thread apps/ui/src/components/settings-view/skills-panel.test.tsx Outdated
Comment thread apps/ui/src/components/settings-view/skills-panel.tsx Outdated
Co-authored-by: Volodymyr Makukha <nei.css@gmail.com>
@bcotrim
bcotrim enabled auto-merge (squash) July 21, 2026 17:02
@bcotrim
bcotrim merged commit 2bf3dca into trunk Jul 21, 2026
13 checks passed
@bcotrim
bcotrim deleted the agentic-settings-skills-tab branch July 21, 2026 17:52
@shaunandrews

Copy link
Copy Markdown
Contributor

I dig the toggles; nice work.

@bcotrim bcotrim mentioned this pull request Jul 24, 2026
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

4 participants