fix(app): preserve host badge identity

Keep host badges visible under row pressure and apply the selected host color consistently to the icon, label, and tinted background.

packages/app/e2e/browser/host-appearance.spec.ts

@@ -129,6 +129,7 @@ test.describe("Host appearance", () => {
     expect(titleBox).not.toBeNull();
     expect(rowBox).not.toBeNull();
     expect(kebabBox).not.toBeNull();
+    await expect(badge).toHaveCSS("flex-shrink", "0");
     expect(titleBox!.width).toBeGreaterThan(0);
     expect(kebabBox!.x + kebabBox!.width).toBeLessThanOrEqual(rowBox!.x + rowBox!.width);
   });

packages/app/e2e/support/helpers/hosts.ts

@@ -144,6 +144,32 @@ export async function selectAllHostsFilter(page: Page): Promise<void> {
   await page.getByTestId("sidebar-host-filter-all").click();
 }
 
+// Playwright reports resolved colors, so the expected value is derived from the same identity
+// table the app reads. A hex literal in the test would be a second copy of the palette.
+function toRgb(hex: string): string {
+  const { r, g, b } = parseHex(hex);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+function toRgba(hex: string, alpha: number): string {
+  const { r, g, b } = parseHex(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+interface RgbChannels {
+  r: number;
+  g: number;
+  b: number;
+}
+
+function parseHex(hex: string): RgbChannels {
+  return {
+    r: Number.parseInt(hex.slice(1, 3), 16),
+    g: Number.parseInt(hex.slice(3, 5), 16),
+    b: Number.parseInt(hex.slice(5, 7), 16),
+  };
+}
+
 export async function openHostAppearanceSettings(page: Page, serverId: string): Promise<void> {
   await openSettings(page);
   await selectSettingsHost(page, serverId);
@@ -222,7 +248,11 @@ export async function expectHostBadgeTinted(
 ): Promise<void> {
   const badge = hostBadge(page, target);
   await expect(badge).toBeVisible({ timeout: 15_000 });
-  await expect(badge.getByText(target.hostName)).toHaveCSS("color", "rgb(113, 113, 122)");
+  await expect(badge.getByText(target.hostName)).toHaveCSS(
+    "color",
+    toRgb(identityColor(target.color)),
+  );
+  await expect(badge).toHaveCSS("background-color", toRgba(identityColor(target.color), 0.1));
   await expect(badge.locator("svg")).toHaveAttribute("stroke", identityColor(target.color));
 }
 
@@ -234,6 +264,11 @@ export async function expectHostAppearancePreview(
   await expect(preview).toBeVisible();
   const badge = preview.getByTestId(`sidebar-host-badge-${input.serverId}`);
   await expect(badge).toHaveText(input.hostName);
+  await expect(badge.getByText(input.hostName)).toHaveCSS(
+    "color",
+    toRgb(identityColor(input.color)),
+  );
+  await expect(badge).toHaveCSS("background-color", toRgba(identityColor(input.color), 0.1));
   await expect(badge.locator("svg")).toHaveAttribute("stroke", identityColor(input.color));
 }