feat(ui): optimize UI by fi3ework · Pull Request #870 · web-infra-dev/rstest

fi3ework · 2026-01-15T11:02:29Z

Summary

browser-ui visual refresh and component cleanup
Ant Design v6 upgrade with Tooltip styles migration
update styling tokens, Tailwind config, and utilities
use https://vercel.com/geist for UI design

before

after

Google Chrome for Testing 2026-01-15 18 58 57

Checklist

Tests updated (or not required).
Documentation updated (or not required).

netlify · 2026-01-15T11:02:36Z

✅ Deploy Preview for rstest-dev ready!

Name	Link
🔨 Latest commit	`18aa8e3`
🔍 Latest deploy log	https://app.netlify.com/projects/rstest-dev/deploys/6968ca9d0b0c6f00088c4608
😎 Deploy Preview	https://deploy-preview-870--rstest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

This PR upgrades the browser UI to Ant Design v6 and implements a visual refresh following Vercel's Geist design system. The changes focus on consistent theming with CSS variables, improved typography, and modernized UI components.

Changes:

Upgraded Ant Design from v5 to v6 with updated component imports and API usage
Implemented Geist design system with comprehensive CSS variables for colors
Added system theme detection support alongside light/dark modes
Refactored Tooltip API usage to the new styles prop pattern

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Ant Design v6 dependency upgrade with new @rc-component packages
tailwind.config.cjs	Added Geist color scales as CSS variable references
src/index.css	Comprehensive Geist design system color variables for light/dark themes
src/main.tsx	System theme detection and improved Ant Design token configuration
src/utils/index.ts	Utility functions extracted for path handling and editor opening
src/components/*.tsx	Updated components to use Geist variables and new Ant Design v6 APIs
AGENTS.md	Added Geist design system guidelines

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-15T11:14:06Z

packages/browser-ui/src/components/PreviewHeader.tsx

+        <span className="text-[11px] font-medium tracking-wider text-(--accents-5) shrink-0">
+          PREVIEW
+        </span>
+        <span className="text-(--accents-3) font-light select-none shrink-0">
+          /
+        </span>
+        <div className="flex items-center gap-1.5 overflow-hidden">
+          {dirPath && (
+            <>
+              <span
+                className="text-[12px] font-mono tracking-tight text-(--accents-5) truncate max-w-[400px] hover:text-(--accents-6) transition-colors cursor-default"
+                title={dirPath}
+              >
+                {dirPath}
+              </span>
+              <span className="text-(--accents-3) font-light select-none shrink-0">


Invalid Tailwind CSS class syntax. The class text-(--accents-5) should be written as text-[--accents-5] using bracket notation for CSS variables. This appears multiple times in this file (lines 54, 57, 64, 69, 85, 94, 105).

Suggested change



PREVIEW





/



<div className="flex items-center gap-1.5 overflow-hidden">

{dirPath && (

<>



{dirPath}







PREVIEW





/



<div className="flex items-center gap-1.5 overflow-hidden">

{dirPath && (

<>



{dirPath}

Copilot · 2026-01-15T11:14:07Z

packages/browser-ui/src/components/TestFilesTree.tsx

            key: `${file}::__empty`,
            title: (
-              <Text type="secondary" className="text-xs">
+              <span className="text-xs text-(--muted-foreground)">


Invalid Tailwind CSS class syntax. The class text-(--muted-foreground) should be written as text-[--muted-foreground] using bracket notation for CSS variables. This pattern also appears on lines 380 and 400.

Suggested change

Copilot · 2026-01-15T11:14:07Z

packages/browser-ui/src/components/EmptyPreviewOverlay.tsx

  return (
    <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/[0.02]">
-      <Text type="secondary">{message}</Text>
+      <span className="text-sm text-(--muted-foreground)">{message}</span>


Invalid Tailwind CSS class syntax. The class text-(--muted-foreground) should be written as text-[--muted-foreground] using bracket notation for CSS variables.

Suggested change

{message}

{message}

Copilot · 2026-01-15T11:14:07Z

packages/browser-ui/src/components/TestFilesTree.tsx

    return (
      <div className="flex h-full flex-col items-center justify-center gap-2">
-        <Text type="warning">Reconnecting...</Text>
+        <span className="text-(--warning)">Reconnecting...</span>


Invalid Tailwind CSS class syntax. The class text-(--warning) should be written as text-[--warning] using bracket notation for CSS variables.

Copilot · 2026-01-15T11:14:08Z

packages/browser-ui/src/components/SidebarHeader.tsx

+        setFlashKey((k) => k + 1);
+      }, 100);
+      return () => clearTimeout(timer);
+    }


The ref update prevCountsRef.current = counts happens outside the conditional check and is not in the cleanup function. This means the ref is always updated even when the counts haven't actually changed. The ref update should only happen when the conditions are met, or be moved to occur after the timeout completes.

Suggested change

setFlashKey((k) => k + 1);

}, 100);

return () => clearTimeout(timer);

}

setFlashKey((k) => k + 1);

// Update previous counts after the flash has been triggered

prevCountsRef.current = counts;

}, 100);

return () => clearTimeout(timer);

}

// If counts haven't changed in the tracked fields, keep prevCountsRef in sync

Copilot · 2026-01-15T11:14:08Z

packages/browser-ui/src/components/StatusGrid.tsx


-export type StatusCounts = Record<CaseStatus, number>;
+/* cspell:ignore nums */
+export type StatusCounts = Record<string, number>;


The type has been loosened from Record<CaseStatus, number> to Record<string, number>, losing type safety. This allows arbitrary string keys instead of limiting to the known status values ('idle', 'running', 'pass', 'fail', 'skip').

Suggested change

export type StatusCounts = Record<string, number>;

export type CaseStatus = 'idle' | 'running' | 'pass' | 'fail' | 'skip';

export type StatusCounts = Record<CaseStatus, number>;

Copilot · 2026-01-15T11:14:09Z

packages/browser-ui/src/components/StatusGrid.tsx

+            <Tag
+              key={item.label}
+              className={`m-0 flex items-center px-2 py-0 border-0 ${isRunningItem && isFileLoading ? 'animate-pulse' : ''}`}


The component is named StatusGrid but no longer displays a grid. It now displays a horizontal list of tags. Consider renaming to StatusBadges or StatusIndicators to better reflect its current implementation.

Copilot · 2026-01-15T11:14:09Z

packages/browser-ui/src/components/PreviewHeader.tsx

+  const handleCopy = async () => {
+    if (relativePath) {
+      await navigator.clipboard.writeText(relativePath);
+      message.success('relative path copied');


The message text should follow consistent capitalization. Consider using "Relative path copied" with proper capitalization for better UX consistency.

Suggested change

message.success('relative path copied');

message.success('Relative path copied');

feat(ui): optimize

5f132b2

github-actions bot added the change: feat label Jan 15, 2026

feat(browser-ui): streamline UI and simplify test fixtures

18aa8e3

fi3ework force-pushed the ui-op branch from 85763e3 to 18aa8e3 Compare January 15, 2026 11:08

fi3ework marked this pull request as ready for review January 15, 2026 11:11

Copilot AI review requested due to automatic review settings January 15, 2026 11:11

fi3ework enabled auto-merge (squash) January 15, 2026 11:11

Copilot started reviewing on behalf of fi3ework January 15, 2026 11:12 View session

Copilot AI reviewed Jan 15, 2026

View reviewed changes

fi3ework merged commit 5ccab08 into main Jan 15, 2026
28 of 31 checks passed

fi3ework deleted the ui-op branch January 15, 2026 11:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(ui): optimize UI#870

feat(ui): optimize UI#870
fi3ework merged 2 commits intomainfrom
ui-op

fi3ework commented Jan 15, 2026

Uh oh!

netlify bot commented Jan 15, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Copilot AI Jan 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<span className="text-xs text-(--muted-foreground)">
	<span className="text-xs text-[--muted-foreground]">

	<span className="text-sm text-(--muted-foreground)">{message}</span>
	<span className="text-sm text-[--muted-foreground]">{message}</span>

	export type StatusCounts = Record<string, number>;
	export type CaseStatus = 'idle' \| 'running' \| 'pass' \| 'fail' \| 'skip';
	export type StatusCounts = Record<CaseStatus, number>;

	message.success('relative path copied');
	message.success('Relative path copied');

Uh oh!

Conversation

fi3ework commented Jan 15, 2026

Summary

Related Links

Checklist

Uh oh!

netlify bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for rstest-dev ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Jan 15, 2026 •

edited

Loading