feat: rebranding application by peppescg · Pull Request #1563 · stacklok/toolhive-studio

peppescg · 2026-02-05T16:50:58Z

Summary

Visual rebranding of the application with updated design tokens, typography, and component styling to match the new Figma designs.

Changes

Nav header: New brand colors (teal background), updated layout and spacing
Typography: Serif font (Merriweather) for all page titles, extracted into a reusable text-page-title CSS utility
Buttons: Rounded-full CTAs and submit buttons, action variant for primary actions
Icons: New hexagonal app icons (macOS, Windows, Linux) and tray icons
DMG installer: Updated background image with new branding
Components: Updated Switch, Tabs, Card, Badge, and form input styling
Colors: New CSS tokens for nav, success, and destructive states
Sidebar: Updated group styling and navigation
Logs page: Improved layout with viewport-relative height and brand colors
Secrets: Added confirmation dialog before deleting a secret
Playground: Fixed double scrollbar, updated send button color, serif welcome title
Spacing: Consistent page title spacing via TitlePage component
Tests: Updated e2e tests for rebranded nav, confirmation dialog, and group styling

peppescg · 2026-02-06T11:08:50Z

/build-test

github-actions · 2026-02-06T11:08:59Z

⚠️ This branch is 1 commit behind main. Please rebase before running /build-test to ensure artifacts are built on the latest code.

git fetch origin main
git rebase origin/main
git push --force-with-lease

peppescg · 2026-02-06T11:10:18Z

/build-test

github-actions · 2026-02-06T11:18:49Z

Build Artifacts for PR #1563

Platform	Architecture	Status
macOS	arm64	✅ Ready
macOS	x64	✅ Ready
Windows	arm64	✅ Ready
Windows	x64	✅ Ready
Linux	arm64	✅ Ready
Linux	x64	✅ Ready

Download artifacts from workflow run

Version: pr-1563 | Artifacts expire in 7 days | Triggered by @peppescg

Note: macOS builds are signed (not notarized). Windows and Linux builds are unsigned.

peppescg · 2026-02-06T11:28:35Z

/build-test

github-actions · 2026-02-06T11:28:46Z

⚠️ This branch is 5 commits behind main. Please rebase before running /build-test to ensure artifacts are built on the latest code.

git fetch origin main
git rebase origin/main
git push --force-with-lease

peppescg · 2026-02-06T11:48:27Z

/build-test

github-actions · 2026-02-06T11:48:39Z

⚠️ This branch is 3 commits behind main. Please rebase before running /build-test to ensure artifacts are built on the latest code.

git fetch origin main
git rebase origin/main
git push --force-with-lease

peppescg · 2026-02-06T11:51:25Z

/build-test

peppescg · 2026-02-06T13:42:56Z

/build-test

peppescg · 2026-02-06T14:01:02Z

/build-test

peppescg · 2026-02-06T14:46:54Z

TODO

replace font in the playground
replace the send button to rounded one
replace the try again button in the connection refused modal
title page in mcp servers is not aligned with add on MCP server

peppescg · 2026-02-09T14:07:00Z

/build-test

github-actions · 2026-02-09T14:07:13Z

⚠️ This branch is 1 commit behind main. Please rebase before running /build-test to ensure artifacts are built on the latest code.

git fetch origin main
git rebase origin/main
git push --force-with-lease

peppescg · 2026-02-09T14:48:45Z

/build-test

peppescg · 2026-02-10T11:33:36Z

/build-test

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add mb-6 to TitlePage for consistent spacing across all pages - Use TitlePage in Registry route instead of duplicated h1 - Round send button in Playground and error screen buttons - Use serif font for Playground welcome title - Fix double scrollbar in Playground by using flex layout - Adjust main padding and remove redundant separator in group page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add top padding offset to compensate for traffic light buttons affecting visual center of nav items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… utility Replace duplicated font-serif/size/weight/tracking classes across 7 files with a single CSS utility class. Also use action variant for playground send button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… UI polish - Move InputSearch from GridCardsRegistry to registry route as TitlePage child - Lift filter state to route using useFilterSort hook - Simplify GridCardsRegistry to a pure rendering component - Add Local/Remote badge to registry server detail page - Fix stars component gap between icon and number - Add bg-card to playground chat input for light mode contrast - Remove unused Plus import from card-registry-base Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The remove server action uses a confirmation dialog. Wait for the dialog to appear and dismiss before asserting the empty state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… tools Align table backgrounds with input fields for visual consistency. Also remove unused Separator import from logs page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Round not-found page button - Use bg-card for chat message avatars - Use outline variant for customize-tools back button - Reduce badge and provenance gap spacing Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

peppescg · 2026-02-12T15:47:45Z

/build-test

Copilot

Pull request overview

Visual rebranding update across the renderer UI to align with new design tokens/typography, plus updated app/tray icons and adjusted e2e selectors for the new navigation and confirmation flows.

Changes:

Introduces new design tokens (nav/status colors), typography utility (text-page-title), and new button/badge variants to support the rebrand.
Updates multiple pages/components to use the new action button variant, rounded-full CTAs, refreshed layouts, and updated dark/light backgrounds.
Adds confirmation before destructive actions (e.g., deleting secrets) and updates e2e tests accordingly; updates packaged icons/artifacts.

Reviewed changes

Copilot reviewed 60 out of 89 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
renderer/src/routes/secrets.tsx	Updates Secrets page CTAs to new `action`/rounded styling.
renderer/src/routes/group.$groupName.tsx	Adjusts group page title rendering to show the group name and optimized-group tooltip layout.
renderer/src/routes/tests/index.groups.test.tsx	Updates assertions to match new group pill styling/tokens.
renderer/src/routes/__root.tsx	Adds Merriweather variable font import for new title typography.
renderer/src/routes/(registry)/registry_.$name.tsx	Enhances registry detail badges (Local/Remote) and updates button styling/layout spacing.
renderer/src/routes/(registry)/-registry.route.tsx	Refactors registry page header into `TitlePage`, adds search/filtering, and meta optimizer filtering.
renderer/src/index.css	Adds new tokens (nav/status), updates base colors/radius, and introduces `.text-page-title`.
renderer/src/features/secrets/components/secrets-table.tsx	Updates table container/header styling to match rebrand.
renderer/src/features/secrets/components/secret-dropdown.tsx	Adds confirmation dialog flow for deleting secrets.
renderer/src/features/secrets/components/dialog-form-secret.tsx	Updates dialog footer buttons to `action`/secondary and rounded styling.
renderer/src/features/registry-servers/components/stars.tsx	Adjusts star display layout/alignment.
renderer/src/features/registry-servers/components/registry-detail-header.tsx	Updates header spacing, title typography, and back button styling.
renderer/src/features/registry-servers/components/install-group-button.tsx	Updates install CTA to `action` variant and rounded styling.
renderer/src/features/registry-servers/components/grid-cards-registry.tsx	Simplifies registry grid component to accept pre-filtered items from the route.
renderer/src/features/registry-servers/components/dynamic-array-field.tsx	Uses `size="icon"` for remove buttons.
renderer/src/features/registry-servers/components/card-registry-base.tsx	Removes plus icon from registry card header.
renderer/src/features/mcp-servers/sub-pages/logs-page/index.tsx	Updates logs page layout/height handling and back button/title styling.
renderer/src/features/mcp-servers/sub-pages/customize-tools/page.tsx	Updates back button/title styling and action buttons to rebranded variants.
renderer/src/features/mcp-servers/components/mcp-servers-sidebar.tsx	Updates sidebar background/border styling to match new tokens.
renderer/src/features/mcp-servers/components/groups-manager/group.tsx	Updates active group pill styling (rounded-full/bg-card).
renderer/src/features/mcp-servers/components/groups-manager/add-group-button.tsx	Updates add-group button styling (rounded-full/shadow).
renderer/src/features/mcp-servers/components/dropdown-menu-run-mcp-server.tsx	Updates “Add an MCP server” trigger to new CTA styling and adds chevron.
renderer/src/features/mcp-servers/components/dialog-override-tool.tsx	Updates dialog buttons to secondary/action and rounded styling.
renderer/src/features/mcp-servers/components/customize-tools-table.tsx	Updates table container/header backgrounds and action/back button styling.
renderer/src/features/mcp-servers/components/card-mcp-server/index.tsx	Adjusts stopped-state title color token.
renderer/src/features/clients/components/manage-clients-button.tsx	Forces rounded-full styling and icon sizing consistency.
renderer/src/features/chat/components/mcp-tools-modal.tsx	Updates modal footer buttons to secondary/action and rounded styling.
renderer/src/features/chat/components/dialog-provider-settings.tsx	Updates remove button sizing and footer buttons to match new variants.
renderer/src/features/chat/components/chat-message.tsx	Updates avatar background/icon colors to match new tokens.
renderer/src/features/chat/components/chat-interface.tsx	Fixes layout to avoid double scrollbar; updates title/CTA styling.
renderer/src/features/chat/components/chat-input-prompt.tsx	Sets prompt submit to `action` and updates prompt background styling.
renderer/src/common/hooks/use-confirm.tsx	Switches default confirm variant to `action` for non-destructive confirms.
renderer/src/common/contexts/prompt/form-prompt-dialog.tsx	Updates prompt dialog buttons to rounded and uses `action` as default confirm variant.
renderer/src/common/components/workloads/dialog-workload-form-wrapper.tsx	Updates dialog footer buttons to secondary/action and rounded styling.
renderer/src/common/components/ui/textarea.tsx	Updates textarea backgrounds for light/dark and aligns with card styling.
renderer/src/common/components/ui/tabs.tsx	Updates active trigger styling in dark mode.
renderer/src/common/components/ui/switch.tsx	Uses `bg-success` token for checked state.
renderer/src/common/components/ui/select.tsx	Updates select trigger background styling for light/dark.
renderer/src/common/components/ui/input.tsx	Updates input background styling for light/dark.
renderer/src/common/components/ui/dialog.tsx	Updates dialog background styling for light/dark.
renderer/src/common/components/ui/card.tsx	Updates card border/padding styling.
renderer/src/common/components/ui/button.tsx	Adds `action` variant and adjusts outline styling and size variants.
renderer/src/common/components/ui/badge.tsx	Updates badge shape/colors and adds `success` variant.
renderer/src/common/components/title-page.tsx	Standardizes page title layout/spacing and applies serif title utility.
renderer/src/common/components/settings/tabs/cli-tab.tsx	Uses `success` badge and `text-success` token; updates button rounding.
renderer/src/common/components/settings/registry/registry-form.tsx	Updates save button to `action` + rounded styling.
renderer/src/common/components/not-found.tsx	Updates primary navigation button to rounded-full styling.
renderer/src/common/components/layout/top-nav/index.tsx	Rebuilds nav links with new icons/colors, adds update badge, and custom toast styling.
renderer/src/common/components/layout/top-nav/container.tsx	Applies new nav background/border tokens and adjusts macOS padding.
renderer/src/common/components/layout/main.tsx	Tweaks main content padding to match new spacing.
renderer/src/common/components/help/help-dropdown.tsx	Updates help trigger styling to match new nav button look.
renderer/src/common/components/error/registry-error.tsx	Updates heading typography and button rounding.
renderer/src/common/components/error/base-error-screen.tsx	Updates action button rounding.
renderer/src/common/components/empty-state.tsx	Applies new title typography utility.
renderer/src/common/components/ai-elements/prompt-input.tsx	Updates submit button rounding to match new CTA style.
package.json	Adds Merriweather variable font dependency.
pnpm-lock.yaml	Locks Merriweather variable font dependency.
icons/tray-icon@2x.png	Updates tray icon asset (2x).
icons/tray-icon.png	Updates tray icon asset.
icons/tray-icon-dark@2x.png	Updates dark tray icon asset (2x).
icons/tray-icon-dark.png	Updates dark tray icon asset.
icons/source-files/system-tray/tray-icon.png	Updates source tray icon asset.
icons/source-files/system-tray/tray-icon-dark.png	Updates source dark tray icon asset.
icons/source-files/app-icons/windows-linux/16.png	Updates Windows/Linux app icon asset (16).
icons/source-files/app-icons/windows-linux/24.png	Updates Windows/Linux app icon asset (24).
icons/source-files/app-icons/windows-linux/32.png	Updates Windows/Linux app icon asset (32).
icons/source-files/app-icons/windows-linux/48.png	Updates Windows/Linux app icon asset (48).
icons/source-files/app-icons/windows-linux/64.png	Updates Windows/Linux app icon asset (64).
icons/source-files/app-icons/windows-linux/128.png	Updates Windows/Linux app icon asset (128).
icons/source-files/app-icons/mac/16.png	Updates macOS app icon asset (16).
icons/source-files/app-icons/mac/32.png	Updates macOS app icon asset (32).
icons/source-files/app-icons/mac/64.png	Updates macOS app icon asset (64).
icons/source-files/app-icons/mac/128.png	Updates macOS app icon asset (128).
e2e-tests/settings.spec.ts	Updates selector to match Settings nav now being a link.
e2e-tests/secrets.spec.ts	Updates to handle new delete confirmation dialog.
e2e-tests/registry.spec.ts	Updates to handle new confirmation dialog for removal.
e2e-tests/playground.spec.ts	Makes heading assertion less brittle after title rebrand changes.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

samuv

I'm seeing a lot of button with rounded-full should be this a new variant of the button instead of put the class in multiple point?

samuv

looks good thanks for adressing the feedback 🚀

samuv

💅🏼

peppescg self-assigned this Feb 5, 2026

github-actions Bot added the size/L label Feb 5, 2026

peppescg changed the title ~~feat: rebranding~~ feat: rebranding icons, font, styles Feb 6, 2026

peppescg changed the title ~~feat: rebranding icons, font, styles~~ feat: rebranding icons, font, styles Feb 6, 2026

peppescg force-pushed the issues/1553 branch from 868ff6c to f007ddb Compare February 6, 2026 10:23

peppescg changed the title ~~feat: rebranding icons, font, styles~~ feat: rebranding application Feb 6, 2026

peppescg force-pushed the issues/1553 branch from 193f06f to e366dd2 Compare February 6, 2026 11:10

peppescg force-pushed the issues/1553 branch from 3b9cd27 to 9ed565e Compare February 6, 2026 11:29

peppescg force-pushed the issues/1553 branch from 9ed565e to 936af16 Compare February 6, 2026 11:49

peppescg force-pushed the issues/1553 branch from eff2127 to 49b08ce Compare February 9, 2026 13:49

peppescg force-pushed the issues/1553 branch from c1e3dfa to b8f53d7 Compare February 9, 2026 14:47

peppescg force-pushed the issues/1553 branch 2 times, most recently from ccb9812 to 7090eb2 Compare February 10, 2026 11:33

peppescg force-pushed the issues/1553 branch from 41610c3 to 3c46ddb Compare February 10, 2026 15:04

peppescg and others added 12 commits February 12, 2026 16:45

fix: settings vertical spacing

1178c96

style(assets): update DMG installer background

268ee47

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style(nav): adjust macOS header vertical alignment

d86b1f3

Add top padding offset to compensate for traffic light buttons affecting visual center of nav items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style(ui): full rounded buttons and action color on customize tools page

30998ed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

leftover

e253dc3

fix(e2e): wait for confirmation dialog in registry remove test

2dcf1fa

The remove server action uses a confirmation dialog. Wait for the dialog to appear and dismiss before asserting the empty state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style(ui): use bg-card for table backgrounds in secrets and customize…

bce7ca7

… tools Align table backgrounds with input fields for visual consistency. Also remove unused Separator import from logs page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: apply teal button for confirmation modal

259dad7

peppescg force-pushed the issues/1553 branch from 3c46ddb to 259dad7 Compare February 12, 2026 15:46

peppescg marked this pull request as ready for review February 12, 2026 17:34

Copilot AI review requested due to automatic review settings February 12, 2026 17:34

Copilot started reviewing on behalf of peppescg February 12, 2026 17:34 View session

Copilot AI reviewed Feb 12, 2026

View reviewed changes

Comment thread renderer/src/routes/(registry)/-registry.route.tsx

samuv reviewed Feb 12, 2026

View reviewed changes

Comment thread renderer/src/index.css Outdated

Comment thread package.json

Comment thread renderer/src/index.css

Comment thread renderer/src/features/mcp-servers/components/dropdown-menu-run-mcp-server.tsx Outdated

peppescg added 4 commits February 12, 2026 19:12

fix: refactor hex into oklch

b73824f

refactor: use variant btn

dcc2974

refactor: align servers and tools dropdown

b6574af

fix: test

c96230b

samuv previously approved these changes Feb 13, 2026

View reviewed changes

leftover

d5a5162

peppescg dismissed samuv’s stale review via d5a5162 February 13, 2026 09:49

remove leftover

ccaee95

samuv approved these changes Feb 13, 2026

View reviewed changes

peppescg merged commit 6602108 into main Feb 13, 2026
18 checks passed

peppescg deleted the issues/1553 branch February 13, 2026 10:55

Conversation

peppescg commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

github-actions Bot commented Feb 6, 2026

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

github-actions Bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Build Artifacts for PR #1563

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

github-actions Bot commented Feb 6, 2026

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

github-actions Bot commented Feb 6, 2026

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

peppescg commented Feb 6, 2026

Uh oh!

peppescg commented Feb 9, 2026

Uh oh!

github-actions Bot commented Feb 9, 2026

Uh oh!

peppescg commented Feb 9, 2026

Uh oh!

peppescg commented Feb 10, 2026

Uh oh!

peppescg commented Feb 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

samuv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

samuv left a comment

Choose a reason for hiding this comment

Uh oh!

samuv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

peppescg commented Feb 5, 2026 •

edited

Loading

github-actions Bot commented Feb 6, 2026 •

edited

Loading