Add Category and Environment Color to Dataverse connections

[Copilot]

Allows users to group connections by category (e.g. client name) and assign custom hex colors to both the environment badge and category. All new fields are exposed to tool developers via the connection API.

Changes

• DataverseConnection type — added optional category: string, environmentColor: string, and categoryColor: string (hex #RRGGBB) fields
• Tool API (toolPreloadBridge) — getActiveConnection() / getSecondaryConnection() now return category, environmentColor, and categoryColor
• Tool panel border — environmentColor is applied as an inline border style on the tool content wrapper when set, replacing the hard-coded CSS class system; multi-connection split border uses a linear-gradient with each connection's color (resolved via CSS variable fallback when no custom color is set), ensuring the left half reflects the primary and the right half reflects the secondary connection color
• Tab bottom border — categoryColor is applied as an inline border-bottom on the active tool tab when set, replacing the hard-coded environment class logic
• Footer connection status — the connection-status and secondary-connection-status elements in the footer now reflect the connection's environmentColor as inline color and background-color styles when set; the env CSS class is omitted in that case to avoid conflicts; expired state retains the standard red indicator
• Add/Edit connection modals — expanded to 920px wide (matching the select multi-connection modal); restructured layout with five rows: Connection Name + Auth Type | Environment URL (full width) | Environment + Environment Color | Category + Category Color | Browser Settings + Auth Options side by side
• Connection sidebar grouping — connections are grouped by category under collapsible headers; the "Default" group (uncategorized) is always shown first and expanded; other groups are collapsible; an empty-string sentinel is used internally so a user-named "Default" category does not collide with the uncategorized bucket
• Connection sidebar filter — a "Category" filter dropdown is added alongside the existing Environment and Auth Type filters; dynamically populated from current connection data
• Connection badge rendering — getEnvBadgeMarkup() helper applies custom environmentColor via inline styles when set, falling back to the existing CSS class system; hex format validated at both save and render time (/^#[0-9A-Fa-f]{6}$/); environment class fragment is now HTML-escaped before interpolation
• Single-select and multi-select connection modals — environment badge uses inline color when environmentColor is set; category badge with optional categoryColor styling is shown when category is set
• XSS hardening — conn.name and conn.url are now escaped via escapeHtml() before injection into innerHTML in renderConnectionItem(); the environment class fragment in getEnvBadgeMarkup() is also escaped
• Edit connection modal color fix — color picker initialization no longer unconditionally resets dataset.customSet to "false", preserving the value set by populateFormData() so existing environmentColor/categoryColor values are not silently dropped on save
• Keyboard accessibility — connection group headers now include role="button", tabindex="0", and aria-expanded; a keydown handler supports toggling collapse with Enter and Space keys

Checklist

• Use a meaningful title for the pull request.
• Follow the guidelines from the CONTRIBUTING.md.
• Mention the bug or the feature number the PR will be targeting.
• Test the change in your own code. (Compile and run)
• Resolve all GH Copilot comments.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature]: Allow manual connection highlight and pass colour to devs</issue_title>
<issue_description>### Provide an idea you would like to see in the tool?

Allow customisation of categories of connections (Client Names for example)
Allow custom colours for categories
Make colours & categories available to tool devs

Relevant log output

```</issue_description>

<agent_instructions>Expand the add connection modal two make it two column. Add a new option called "Category" (for e.g. client name). Add an ability for customizing the Environment color (remove hard-code color and let user pick it from a color picker). Expose "Category" and "Environment Color" to the tool as part of the Connection details</agent_instructions>

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

<comments>
<comment_new><author>@LinkeD365</author><body>
Very much low priority</body></comment_new>
<comment_new><author>@Power-Maverick</author><body>
Does category means "Environment" or a new option when creating the connection?</body></comment_new>
<comment_new><author>@LinkeD365</author><body>
no, I would see this as a grouping mechanism. XTB has connection files, which allow you to group connections together (and share them) so that you could group all client X connections together then Client Y etc etc</body></comment_new>
<comment_new><author>@Power-Maverick</author><body>
Ahh right, so new option, got it. But why would you need color to the category; I was thinking we need color for the environment to highlight the tool when launched. </body></comment_new>
<comment_new><author>@LinkeD365</author><body>
If we can colour the type which is a lower level than caegory, we should be good. I can imagine people will want all client x to be pink, for example, which is possible</body></comment_new>
</comments>

• Fixes [Feature]: Allow manual connection highlight and pass colour to devs #195

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[Power-Maverick]

@copilot increase the width of the add connection modal (same as that of select multi-connection modal).

[Copilot]

@copilot increase the width of the add connection modal (same as that of select multi-connection modal).

Done in commit 23e954d. Both the add and edit connection modals are now 920px wide, matching the select multi-connection modal width.

[Power-Maverick]

@copilot few more changes

1. The environment color set on the connection should also apply to the border of the tool (instead of the current hard-coded values)
2. Add color to the category as well; only when Category is specified. The category color will show on the bottom of the tab (replace the current hard-coded logic with category color)
3. In the connection sidebar, group the connections based on the category; if no category is specified it goes in default. Default is always expanded
4. In the connection sidebar, add a filter by Category as well
5. The add connection modal ui changes,

• first row: Connection Name, Auth Type
• second row (span): Environment URL
• third row: Environment, Environment Color
• fourth row: Category, Category Color
• fifth row: Browser setting section, Login Options section
• make sure the spacing/margin between the rows is consistent

6. Single select and multi-select connection modal should also reflect the same environment colors as selected on the connection and should match the scheme/logic that is on the connection sidebar
7. Single select and multi-select connection modal should show the category as well; if possible with the category color

[Copilot]

@copilot few more changes

1. The environment color set on the connection should also apply to the border of the tool (instead of the current hard-coded values)
2. Add color to the ...

All 7 items implemented in commits e454b31 and 374f089:

1. Environment color → tool border: environmentColor is now applied as an inline border style on the tool panel wrapper. If not set, the existing CSS class-based colors are used as fallback.

2. Category color → tab bottom: When a connection has a categoryColor set, the active tab's bottom border uses that color inline. Falls back to the environment-based CSS class if no category color is set.

3. Sidebar grouped by category: Connections are grouped under collapsible category headers. The "Default" group (uncategorized) is always shown first and expanded; other categories are collapsible.

4. Sidebar category filter: A "Category" filter dropdown is added to the connections filter panel. It dynamically populates from the categories present in the current connections list, with a sentinel __default__ option for uncategorized.

5. Add/Edit modal restructured:

   • Row 1: Connection Name | Auth Type
   • Row 2 (full width): Environment URL
   • Row 3: Environment | Environment Color picker
   • Row 4: Category | Category Color picker
   • Row 5: Browser Settings section | Auth fields section (side by side)

6. Single-select modal: Environment badge uses inline color when environmentColor is set; shows a category badge below when category is set (with optional categoryColor styling).

7. Multi-select modal: Same as single-select — inline env color badge and category badge in both primary and secondary connection lists.

[Power-Maverick]

@copilot adding missing ui changes:

• The environment color should also be reflected on the environment details in the footer for both primary and secondary
• when using multi-connection the tool border logic is not getting applied correctly where left half should have the environment color of the primary connection and right half should have the environment color of the secondary connection

[Copilot]

@copilot adding missing ui changes:

• The environment color should also be reflected on the environment details in the footer for both primary and secondary
• when using multi-conn...

Both issues fixed in commit 29539e4:

1. Footer environment color — The connection-status and secondary-connection-status elements now get inline color and background-color styles applied when environmentColor is set on the connection (env CSS class is skipped in that case so it doesn't compete). Expired state keeps the red indicator unchanged. Inline styles are cleared when switching tools or when no custom color is set.

2. Multi-connection border gradient — Added a getEnvBorderColor(environment) helper that reads the CSS variable (--env-border-dev, --env-border-test, etc.) at runtime. The border now applies an inline linear-gradient border whenever either connection has a custom environmentColor: the side without a custom color falls back to the CSS variable value. Previously the gradient was only applied when the primary had a custom color, which caused wrong results when only the secondary had one.

[github-actions]

Bundle Size Report 📦

Bundle	Size
Main Process	4.87 MB
Renderer JS	862.4 KB
Renderer CSS	86.25 KB
Total	5.8 MB

Bundle Analysis Reports

The detailed bundle analysis reports are available in the workflow artifacts:

• 📊 Main Process: stats-main.html
• 📊 Renderer Process: stats-renderer.html

Download the artifacts from the workflow run to view interactive visualizations.

---

Bundle size tracking is now active! This helps prevent bundle bloat.

[Copilot]

Pull request overview

Adds optional “Category” grouping and custom hex color support to Dataverse connections, and propagates these fields through the renderer UI and tool-facing connection API so users and tool developers can use consistent visual cues.

Changes:

• Extends connection types and tool-safe connection projection with category, environmentColor, and categoryColor.
• Updates renderer UI to support category grouping/filtering and color rendering (badges, tool panel border, active tab border, footer status).
• Restructures Add/Edit connection modals to a wider, two-column layout including color pickers.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/common/types/connection.ts	Adds optional category and color fields to shared connection types.
src/main/toolPreloadBridge.ts	Exposes new connection fields to tools via the tool-safe connection shape.
src/renderer/index.html	Adds “Category” filter dropdown to the connections sidebar filter UI.
src/renderer/styles.scss	Adds sidebar connection group styling (header, count badge, collapsed state).
src/renderer/modules/connectionManagement.ts	Saves/loads new fields, renders env badge with custom color, adds category filter, and groups sidebar connections by category.
src/renderer/modules/toolManagement.ts	Applies environmentColor/categoryColor to footer status, tool panel border (incl. multi-connection gradients), and active tab indicator.
src/renderer/modals/sharedStyles.ts	Adds shared styles for two-column form rows and color picker UI; adds category badge style.
src/renderer/modals/addConnection/view.ts	Updates Add Connection modal layout and adds category + color picker fields.
src/renderer/modals/addConnection/controller.ts	Collects category/color fields and wires up color picker behaviors for Add Connection.
src/renderer/modals/editConnection/view.ts	Updates Edit Connection modal layout and adds category + color picker fields.
src/renderer/modals/editConnection/controller.ts	Collects category/color fields, populates them for editing, and wires up color picker behaviors.
src/renderer/modals/selectConnection/controller.ts	Renders env badge with optional custom color and shows category badge in single-select modal.
src/renderer/modals/selectMultiConnection/controller.ts	Renders env badge with optional custom color and shows category badge in multi-select modal.

[Power-Maverick]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

All 5 review comments addressed in commit 584d388:

1. XSS in renderConnectionItem() — conn.name and conn.url are now wrapped with escapeHtml() before injection into innerHTML.

2. Edit modal color picker overwriting customSet — Changed the unconditional colorInput.dataset.customSet = "false" to if (!colorInput.dataset.customSet) colorInput.dataset.customSet = "false" for both environment and category color inputs, so populateFormData's value is never overwritten.

3. XSS in getEnvBadgeMarkup() class attribute — env.toLowerCase() is now wrapped with escapeHtml() before being interpolated into the class attribute.

4. Category sentinel collision — The grouping map now uses "" (empty string) as the sentinel for uncategorized connections. "Default" is only used as a display label when rendering the group header (groupKey === "" ? "Default" : groupKey). The sort and useGroups check are updated accordingly.

5. Keyboard accessibility for group headers — Group headers now have role="button", tabindex="0", and aria-expanded="true" rendered in the HTML. The event listener setup extracts a shared toggleGroup() function, adds a keydown handler for Enter/Space, and updates aria-expanded on each toggle.

[github-actions]

Bundle Size Report 📦

Bundle	Size
Main Process	4.87 MB
Renderer JS	862.7 KB
Renderer CSS	86.25 KB
Total	5.8 MB

Bundle Analysis Reports

The detailed bundle analysis reports are available in the workflow artifacts:

• 📊 Main Process: stats-main.html
• 📊 Renderer Process: stats-renderer.html

Download the artifacts from the workflow run to view interactive visualizations.

---

Bundle size tracking is now active! This helps prevent bundle bloat.

[github-actions]

Bundle Size Report 📦

Bundle	Size
Main Process	4.87 MB
Renderer JS	862.73 KB
Renderer CSS	86.25 KB
Total	5.8 MB

Bundle Analysis Reports

The detailed bundle analysis reports are available in the workflow artifacts:

• 📊 Main Process: stats-main.html
• 📊 Renderer Process: stats-renderer.html

Download the artifacts from the workflow run to view interactive visualizations.

---

Bundle size tracking is now active! This helps prevent bundle bloat.