Skip to content

Add welcome page to Chat Customizations editor#308307

Draft
joshspicer wants to merge 1 commit intomainfrom
joshspicer/customization-editor-welcome-page
Draft

Add welcome page to Chat Customizations editor#308307
joshspicer wants to merge 1 commit intomainfrom
joshspicer/customization-editor-welcome-page

Conversation

@joshspicer
Copy link
Copy Markdown
Member

Summary

Adds a default welcome page to the Chat Customizations editor that shows when no section is selected (the new default state).

Welcome Page Contents

  • Heading & subtitle — "Chat Customizations" with a brief description
  • Getting Started banner — Accent-colored CTA with sparkle icon that pre-fills /agent-customizations into chat (without sending)
  • Category card grid — Cards for Agents, Skills, Instructions, Hooks, MCP Servers, and Plugins, each with:
    • Category icon and description
    • Browse button → navigates to that section
    • Generate with AI button → closes editor and triggers AI generation (prompt-based sections only)

Design Details

  • selectedSection is now nullable (undefined = welcome page)
  • All interactive elements are proper <button> elements for keyboard accessibility
  • Cards rebuild dynamically when visible sections change (e.g., harness switch from VS Code to Claude)
  • Welcome container has tabindex="-1" for programmatic focus support
  • Getting Started banner has focus-visible outline styling
  • Telemetry calls use ?? 'welcome' fallback for the nullable section

Testing

  • Added WelcomePage component fixture for screenshot testing
  • Updated LocalHarness fixture to explicitly select Agents tab (since default is now welcome page)
  • TypeScript compilation: clean
  • Layering check: clean
  • Hygiene: clean

Copilot AI review requested due to automatic review settings April 7, 2026 19:13
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

When no section is selected (the default), shows a welcome page with:
- Heading and subtitle explaining the editor
- Getting Started banner that pre-fills /agent-customizations in chat
- Card grid for categories (Agents, Skills, Instructions, Hooks, MCP Servers, Plugins)
- Each card has Browse and Generate with AI buttons

Design details:
- All interactive elements are proper buttons for keyboard accessibility
- Cards rebuild when visible sections change (harness switch)
- Welcome container has tabindex for programmatic focus
- selectedSection is now nullable (undefined = welcome page)
@joshspicer joshspicer force-pushed the joshspicer/customization-editor-welcome-page branch from 0773128 to 738caf2 Compare April 7, 2026 21:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants