Add manage roles interface with permalink and CSS variables

[Copilot]

The manage roles component existed at /components/manage-role/index.html but lacked a proper interface with permalink structure. It also used hardcoded colors instead of theme CSS variables.

Changes

• New interface: Created /interfaces/manage-role/index.html with permalink /role/manage

  • Follows existing interface pattern (Jekyll front matter, tpen-page wrapper)
  • Matches structure of /project, /profile, etc.

• CSS variables: Replaced hardcoded colors with theme variables in components/manage-role/index.js

  • #333, #fff, #999 → var(--text-primary), var(--white), var(--text-muted)
  • #ff4d4d, #a5b4fc → var(--error-color), var(--gray)
  • Preserved rgba() for box-shadow transparency

• Navigation update: Modified manage-project link from direct component path to permalink

  // Before: `/components/manage-role/index.html?projectID=${id}`
  // After:  `/role/manage?projectID=${id}`

The interface is now accessible via semantic URL and uses consistent theming.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Manage Roles Interface</issue_title>
<issue_description>There is not an interface to manage Project roles. It needs an actual interface and permalink. See /components/manage-role/index.html for what is currently available.</issue_description>

<agent_instructions>use the tpen page wrapper and follow the patterns in the other interfaces. Use main.css variables where possible instead of inline colors and such.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Manage Roles Interface #355

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.