From bf9bd338be98bb138e8f71cec436ffaac268cccb Mon Sep 17 00:00:00 2001
From: Ayush <bhandariayush935@gmail.com>
Date: Tue, 28 Jul 2026 20:50:08 +0530
Subject: [PATCH 1/3] UI: Centralize alerts, field errors, and status dot,
 refactored the ui to maintain re-usability

---
 src/components/data/ConnectionStatus.tsx      |  18 +--
 src/components/layout/Shell.tsx               |  13 +-
 .../mining/AdvancedMiningConfigForm.tsx       |   9 +-
 src/components/pools/PoolIdentityFields.tsx   |  16 +-
 src/components/pools/PoolPriorityEditor.tsx   |   3 +-
 src/components/settings/ConfigurationTab.tsx  |  28 ++--
 src/components/setup/SetupWizard.tsx          | 149 +++++++++---------
 .../setup/steps/BitcoinPrereqStep.tsx         |  24 +--
 src/components/setup/steps/BitcoinSetup.tsx   |  62 +++-----
 src/components/setup/steps/HashrateStep.tsx   |  33 ++--
 src/components/setup/steps/JdcConfigStep.tsx  |  25 ++-
 .../setup/steps/MiningIdentityStep.tsx        |  21 ++-
 src/components/setup/steps/PoolConfigStep.tsx |   2 +-
 src/components/setup/steps/ReviewStart.tsx    |  23 +--
 .../setup/steps/TranslatorConfigStep.tsx      |  20 +--
 src/components/ui/alert.tsx                   |  90 +++++++++++
 src/components/ui/field-error.tsx             |  25 +++
 src/components/ui/status-dot.tsx              |  45 ++++++
 src/pages/UnifiedDashboard.tsx                |  97 ++++++------
 19 files changed, 391 insertions(+), 312 deletions(-)
 create mode 100644 src/components/ui/alert.tsx
 create mode 100644 src/components/ui/field-error.tsx
 create mode 100644 src/components/ui/status-dot.tsx

diff --git a/src/components/data/ConnectionStatus.tsx b/src/components/data/ConnectionStatus.tsx
index 164ec85f..77a8ffca 100644
--- a/src/components/data/ConnectionStatus.tsx
+++ b/src/components/data/ConnectionStatus.tsx
@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils';
+import { StatusDot } from '@/components/ui/status-dot';
 
 type ConnectionState = 'connected' | 'connecting' | 'disconnected' | 'error';
 
@@ -17,23 +18,18 @@ export function ConnectionStatus({
   label,
   className,
 }: ConnectionStatusProps) {
-  const stateConfig: Record<ConnectionState, { color: string; text: string }> = {
-    connected: { color: 'bg-green-500', text: 'Connected' },
-    connecting: { color: 'bg-yellow-500 animate-pulse', text: 'Connecting' },
-    disconnected: { color: 'bg-muted-foreground', text: 'Disconnected' },
-    error: { color: 'bg-red-500', text: 'Error' },
+  const stateConfig: Record<ConnectionState, { status: 'connected' | 'connecting' | 'disconnected' | 'idle'; text: string }> = {
+    connected: { status: 'connected', text: 'Connected' },
+    connecting: { status: 'connecting', text: 'Connecting' },
+    disconnected: { status: 'idle', text: 'Disconnected' },
+    error: { status: 'disconnected', text: 'Error' },
   };
 
   const config = stateConfig[state];
 
   return (
     <div className={cn('flex items-center gap-2', className)}>
-      <div
-        className={cn(
-          'h-2 w-2 rounded-full shadow-sm',
-          config.color
-        )}
-      />
+      <StatusDot status={config.status} size="sm" className="shadow-sm" />
       <span className="text-sm text-muted-foreground">
         {label || config.text}
       </span>
diff --git a/src/components/layout/Shell.tsx b/src/components/layout/Shell.tsx
index 08e023d3..0129c394 100644
--- a/src/components/layout/Shell.tsx
+++ b/src/components/layout/Shell.tsx
@@ -7,6 +7,7 @@ import type { AppMode, AppFeatures } from '@/types/api';
 import { getAppFeatures } from '@/types/api';
 import { useUiConfig } from '@/hooks/useUiConfig';
 import { PoolIcon } from '@/components/ui/pool-icon';
+import { StatusDot } from '@/components/ui/status-dot';
 
 function useTheme() {
   const [isDark, setIsDark] = useState(() => {
@@ -173,20 +174,12 @@ export function Shell({
               <>
                 {/* Mobile: dot + uptime only (no status text to save space) */}
                 <span className="flex sm:hidden items-center gap-2 text-xs text-muted-foreground min-w-0">
-                  <span className={cn('h-2 w-2 rounded-full shrink-0', {
-                    'bg-green-500': connectionStatus === 'connected',
-                    'bg-red-500': connectionStatus === 'disconnected',
-                    'bg-yellow-500 animate-pulse': connectionStatus === 'connecting',
-                  })} />
+                  <StatusDot status={connectionStatus} size="sm" />
                   <span className="truncate">Uptime: {formatUptime(uptime ?? 0)}</span>
                 </span>
                 {/* Desktop: dot + full status text + uptime */}
                 <span className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground shrink-0">
-                  <span className={cn('h-2 w-2 rounded-full shrink-0', {
-                    'bg-green-500': connectionStatus === 'connected',
-                    'bg-red-500': connectionStatus === 'disconnected',
-                    'bg-yellow-500 animate-pulse': connectionStatus === 'connecting',
-                  })} />
+                  <StatusDot status={connectionStatus} size="sm" />
                   {connectionStatus === 'connected' ? (
                     <span className="inline-flex min-w-0 items-center gap-1.5">
                       <span className="truncate">{connectedStatusLabel}</span>
diff --git a/src/components/mining/AdvancedMiningConfigForm.tsx b/src/components/mining/AdvancedMiningConfigForm.tsx
index 77b2f865..df6d56ca 100644
--- a/src/components/mining/AdvancedMiningConfigForm.tsx
+++ b/src/components/mining/AdvancedMiningConfigForm.tsx
@@ -6,6 +6,7 @@ import {
 } from '@sv2-ui/shared';
 
 import { Switch } from '@/components/ui/switch';
+import { FieldError } from '@/components/ui/field-error';
 
 export interface AdvancedMiningConfigValues {
   sharesPerMinute: string;
@@ -124,9 +125,7 @@ export function AdvancedMiningConfigForm({
             className="h-9 w-full rounded-lg border border-input bg-background px-3 text-sm outline-none transition-all focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15"
           />
           {!sharesPerMinuteValid ? (
-            <p id={sharesPerMinuteDescriptionId} className="mt-1 text-xs text-destructive">
-              Enter a value greater than 0.
-            </p>
+            <FieldError message="Enter a value greater than 0." className="mt-1" id={sharesPerMinuteDescriptionId} />
           ) : (
             <p id={sharesPerMinuteDescriptionId} className="mt-1 text-xs text-muted-foreground">
               Target share rate for variable difficulty.
@@ -151,9 +150,7 @@ export function AdvancedMiningConfigForm({
             className="h-9 w-full rounded-lg border border-input bg-background px-3 text-sm outline-none transition-all focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15"
           />
           {!downstreamExtranonce2SizeValid ? (
-            <p id={downstreamExtranonce2SizeDescriptionId} className="mt-1 text-xs text-destructive">
-              Enter a whole number from 1 to 65,535.
-            </p>
+            <FieldError message="Enter a whole number from 1 to 65,535." className="mt-1" id={downstreamExtranonce2SizeDescriptionId} />
           ) : (
             <p id={downstreamExtranonce2SizeDescriptionId} className="mt-1 text-xs text-muted-foreground">
               Bytes assigned to downstream SV1 miners.
diff --git a/src/components/pools/PoolIdentityFields.tsx b/src/components/pools/PoolIdentityFields.tsx
index a446a456..e652bf56 100644
--- a/src/components/pools/PoolIdentityFields.tsx
+++ b/src/components/pools/PoolIdentityFields.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { AlertCircle } from 'lucide-react';
+import { Alert } from '@/components/ui/alert';
+import { FieldError } from '@/components/ui/field-error';
 import {
   shouldAggregateTranslatorChannels,
   type BitcoinNetwork,
@@ -64,13 +65,12 @@ export function PoolIdentityFields({
         <span className="sr-only">(required)</span>
       </label>
       {showBraiinsUsernameWarning && (
-        <div className="mb-3 flex gap-3 rounded-xl bg-warning/[0.08] p-4 text-sm text-warning" role="alert">
-          <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" aria-hidden="true" />
+        <Alert variant="warning" className="mb-3">
           <p>
             Use the exact username from your Braiins Pool account. If this value does not match an existing
             Braiins account, the pool connection will not be established properly.
           </p>
-        </div>
+        </Alert>
       )}
       <input
         id={`${idPrefix}-identity`}
@@ -82,7 +82,7 @@ export function PoolIdentityFields({
         autoComplete="off"
         className="w-full h-10 px-3 rounded-lg border border-input bg-background focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all font-mono text-sm"
       />
-      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+      <FieldError message={error} />
       <p className="text-xs text-muted-foreground mt-2">
         {miningMode === 'solo'
           ? 'Bitcoin address used by the pool for solo mining payouts.'
@@ -147,9 +147,7 @@ function SriPoolIdentityFields({
             autoComplete="off"
             className="w-full h-10 px-3 rounded-lg border border-input bg-background focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all font-mono text-sm"
           />
-          {getBitcoinAddressError(payoutAddress, network) && (
-            <p className="text-xs text-destructive mt-1">{getBitcoinAddressError(payoutAddress, network)}</p>
-          )}
+          <FieldError message={getBitcoinAddressError(payoutAddress, network)} />
           <p className="text-xs text-muted-foreground mt-2">
             Used with worker and donation settings to build this pool identity.
           </p>
@@ -215,7 +213,7 @@ function SriPoolIdentityFields({
         </p>
       </div>
 
-      {identityError && <p className="text-xs text-destructive">{identityError}</p>}
+      <FieldError message={identityError} />
     </div>
   );
 }
diff --git a/src/components/pools/PoolPriorityEditor.tsx b/src/components/pools/PoolPriorityEditor.tsx
index f64275fb..a8effaa9 100644
--- a/src/components/pools/PoolPriorityEditor.tsx
+++ b/src/components/pools/PoolPriorityEditor.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import { ArrowDown, ArrowUp, GripVertical, X } from 'lucide-react';
 import { DEFAULT_POOL_PORT, type MiningMode, type PoolConfig } from '@sv2-ui/shared';
+import { FieldError } from '@/components/ui/field-error';
 import { PoolIcon } from '@/components/ui/pool-icon';
 import {
   createEmptyCustomPool,
@@ -380,7 +381,7 @@ function CustomPoolFields({
               pubkeyError ? 'border-destructive focus-visible:border-destructive' : 'border-input focus-visible:border-primary'
             }`}
           />
-          {pubkeyError && <p className="mt-1 text-xs text-destructive">{pubkeyError}</p>}
+          <FieldError message={pubkeyError} />
         </div>
       </div>
     </div>
diff --git a/src/components/settings/ConfigurationTab.tsx b/src/components/settings/ConfigurationTab.tsx
index d7f77073..e8cd61c4 100644
--- a/src/components/settings/ConfigurationTab.tsx
+++ b/src/components/settings/ConfigurationTab.tsx
@@ -55,7 +55,8 @@ import {
   Check,
   X,
 } from 'lucide-react';
-
+import { FieldError } from '@/components/ui/field-error';
+import { StatusDot } from '@/components/ui/status-dot';
 const SETUP_TARGET_STEP_STORAGE_KEY = 'sv2-ui-setup-target-step';
 
 type EditingField = null | 'pools' | 'mode' | 'signature' | 'hashrate' | 'telemetry' | 'advanced';
@@ -356,10 +357,10 @@ export function ConfigurationTab() {
   const updateEditPoolIdentity = (index: number, nextPool: PoolConfig) => {
     setEditPools((currentPools) => currentPools
       ? normalizePoolPriorityIdentities(
-          currentPools.map((pool, poolIndex) => poolIndex === index ? nextPool : pool),
-          currentPools[0],
-          activeMiningMode,
-        )
+        currentPools.map((pool, poolIndex) => poolIndex === index ? nextPool : pool),
+        currentPools[0],
+        activeMiningMode,
+      )
       : null);
   };
 
@@ -370,7 +371,7 @@ export function ConfigurationTab() {
         <CardContent className="pt-6">
           <div className="flex flex-wrap items-center justify-between gap-4">
             <div className="flex min-w-0 items-center gap-3">
-              <div className={`h-3 w-3 shrink-0 rounded-full ${isRunning ? 'bg-green-500' : 'bg-muted-foreground'}`} />
+              <StatusDot status={isRunning ? 'connected' : 'idle'} size="lg" />
               <div className="min-w-0">
                 <p className="font-medium">{isRunning ? 'Services Running' : 'Services Stopped'}</p>
                 <p className="text-sm text-muted-foreground">
@@ -525,11 +526,10 @@ export function ConfigurationTab() {
                         key={m}
                         type="button"
                         onClick={() => setEditMode(m)}
-                        className={`px-4 py-2 rounded-lg border text-sm font-medium transition-all ${
-                          editMode === m
+                        className={`px-4 py-2 rounded-lg border text-sm font-medium transition-all ${editMode === m
                             ? 'border-primary bg-primary/[0.04] text-primary'
                             : 'border-border bg-card hover:border-primary/45'
-                        }`}
+                          }`}
                       >
                         {m === 'jd' ? 'Job Declaration (Custom Templates)' : 'Pool Templates'}
                       </button>
@@ -687,8 +687,8 @@ export function ConfigurationTab() {
                     placeholder="Miner signature"
                     className="w-full h-10 px-3 rounded-lg border border-input bg-background font-mono text-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all"
                   />
-                  {editSignature && getIdentifierError(editSignature) && (
-                    <p className="text-xs text-destructive mt-1">{getIdentifierError(editSignature)}</p>
+                  {editSignature && (
+                    <FieldError message={getIdentifierError(editSignature)} />
                   )}
                   <p className="text-xs text-muted-foreground mt-2">
                     Miner-chosen tag shown in coinbase transactions on block explorers.
@@ -766,9 +766,7 @@ export function ConfigurationTab() {
                   autoComplete="off"
                   className="w-full h-9 px-3 rounded-lg border border-input bg-background font-mono text-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all"
                 />
-                {minerTelemetryCidrError && (
-                  <p className="text-xs text-destructive mt-1">{minerTelemetryCidrError}</p>
-                )}
+                <FieldError message={minerTelemetryCidrError} />
                 <p className="text-xs text-muted-foreground mt-2">
                   Private LAN subnet where miners expose their web/API interface.
                 </p>
@@ -977,4 +975,4 @@ function PoolSummary({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/setup/SetupWizard.tsx b/src/components/setup/SetupWizard.tsx
index bb1ac6d0..dd31186f 100644
--- a/src/components/setup/SetupWizard.tsx
+++ b/src/components/setup/SetupWizard.tsx
@@ -1,9 +1,10 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { useLocation } from 'wouter';
-import { ArrowLeft, AlertCircle, Sun, Moon } from 'lucide-react';
+import { ArrowLeft, Sun, Moon } from 'lucide-react';
 import { SetupStep, SetupData, initialSetupData } from './types';
 import { shouldAggregateTranslatorChannelsForPools } from './poolRules';
 import { BITCOIN_MESSAGES } from '@/lib/messages';
+import { Alert } from '@/components/ui/alert';
 
 function useTheme() {
   const [isDark, setIsDark] = useState(() => {
@@ -89,7 +90,6 @@ export function SetupWizard() {
   const [currentStep, setCurrentStep] = useState<SetupStep>('mining-mode');
   const [data, setData] = useState<SetupData>(initialSetupData);
   const [isReconfiguring, setIsReconfiguring] = useState(false);
-  const [isSetupReview, setIsSetupReview] = useState(false);
   const [loadingConfig, setLoadingConfig] = useState(true);
   const [bitcoinSetupNotice, setBitcoinSetupNotice] = useState<string | null>(null);
   const { results: discoveredNodes, isLoading: isDiscovering, retry: retryDiscovery } = useBitcoinRpcDiscovery();
@@ -110,7 +110,6 @@ export function SetupWizard() {
         const setupReviewRequested = window.sessionStorage.getItem(SETUP_REVIEW_STORAGE_KEY) === 'true';
         window.sessionStorage.removeItem(SETUP_TARGET_STEP_STORAGE_KEY);
         window.sessionStorage.removeItem(SETUP_REVIEW_STORAGE_KEY);
-        setIsSetupReview(setupReviewRequested);
 
         if (targetStep === 'bitcoin' && config.bitcoin) {
           nextConfig = {
@@ -252,85 +251,81 @@ export function SetupWizard() {
 
   return (
     <>
-    <div className="min-h-screen bg-background flex flex-col">
-      {/* Header */}
-      <div className="flex items-center px-6 md:px-10 h-14 border-b border-border/40 flex-shrink-0">
-        <button
-          type="button"
-          onClick={handleBack}
-          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded flex-shrink-0"
-          aria-label="Go back"
-        >
-          <ArrowLeft className="w-4 h-4" aria-hidden="true" />
-          <span>Back</span>
-        </button>
-
-        <div
-          className="flex-1 flex items-center justify-center gap-1.5"
-          role="progressbar"
-          aria-valuenow={dotIndex + 1}
-          aria-valuemin={1}
-          aria-valuemax={nonModeSteps.length}
-          aria-label={`Step ${dotIndex + 1} of ${nonModeSteps.length}`}
-        >
-          {nonModeSteps.map((_, idx) => (
-            <div
-              key={idx}
-              className={`h-1 rounded-full transition-all duration-300 ${
-                idx <= dotIndex ? 'bg-primary w-6' : 'bg-border w-6'
-              }`}
-            />
-          ))}
-        </div>
+      <div className="min-h-screen bg-background flex flex-col">
+        {/* Header */}
+        <div className="flex items-center px-6 md:px-10 h-14 border-b border-border/40 flex-shrink-0">
+          <button
+            type="button"
+            onClick={handleBack}
+            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded flex-shrink-0"
+            aria-label="Go back"
+          >
+            <ArrowLeft className="w-4 h-4" aria-hidden="true" />
+            <span>Back</span>
+          </button>
+
+          <div
+            className="flex-1 flex items-center justify-center gap-1.5"
+            role="progressbar"
+            aria-valuenow={dotIndex + 1}
+            aria-valuemin={1}
+            aria-valuemax={nonModeSteps.length}
+            aria-label={`Step ${dotIndex + 1} of ${nonModeSteps.length}`}
+          >
+            {nonModeSteps.map((_, idx) => (
+              <div
+                key={idx}
+                className={`h-1 rounded-full transition-all duration-300 ${idx <= dotIndex ? 'bg-primary w-6' : 'bg-border w-6'
+                  }`}
+              />
+            ))}
+          </div>
 
-        <ThemeToggle isDark={isDark} toggle={toggle} />
-      </div>
+          <ThemeToggle isDark={isDark} toggle={toggle} />
+        </div>
 
-      {/* Step content */}
-      <div className="flex-1 flex flex-col overflow-y-auto">
-        <div className="flex-1 flex flex-col items-center justify-center px-6 py-10">
-          <div key={currentStep} className="w-full max-w-xl animate-fade-in-up">
-            {isReconfiguring && currentStepIndex === 1 && (
-              <div className="mb-6 p-3 rounded-xl bg-warning/[0.08] text-sm text-warning flex gap-2 items-start">
-                <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
-                {isSetupReview
-                  ? 'Review your setup to continue mining. Your saved settings are prefilled.'
-                  : 'Reconfiguring SV2 setup — this will replace your current configuration.'}
-              </div>
-            )}
-            {currentStep === 'template-mode'  && <TemplateModeSelection {...stepProps} />}
-            {currentStep === 'pool'            && <PoolConfigStep {...stepProps} />}
-            {currentStep === 'bitcoin-prereq'  && (
-              <BitcoinPrereqStep
-                {...stepProps}
-                discoveredNodes={discoveredNodes}
-                isDiscovering={isDiscovering}
-                onRetryDiscovery={retryDiscovery}
-                onAutoAdvance={handleAutoAdvance}
-              />
-            )}
-            {currentStep === 'bitcoin'         && (
-              <BitcoinSetup
-                {...stepProps}
-                notice={bitcoinSetupNotice}
-                onDismissNotice={() => setBitcoinSetupNotice(null)}
-                discoveredNodes={discoveredNodes}
-              />
-            )}
-            {currentStep === 'hashrate'        && <HashrateStep {...stepProps} />}
-            {currentStep === 'identity'        && <MiningIdentityStep {...stepProps} />}
-            {currentStep === 'review'          && (
-              <ReviewStart
-                {...stepProps}
-                onComplete={handleComplete}
-                onGoToStep={setCurrentStep}
-              />
-            )}
+        {/* Step content */}
+        <div className="flex-1 flex flex-col overflow-y-auto">
+          <div className="flex-1 flex flex-col items-center justify-center px-6 py-10">
+            <div key={currentStep} className="w-full max-w-xl animate-fade-in-up">
+              {isReconfiguring && currentStepIndex === 1 && (
+                <Alert variant="warning" className="mb-6">
+                  Reconfiguring SV2 setup — this will replace your current configuration.
+                </Alert>
+              )}
+              {currentStep === 'template-mode' && <TemplateModeSelection {...stepProps} />}
+              {currentStep === 'pool' && <PoolConfigStep {...stepProps} />}
+              {currentStep === 'bitcoin-prereq' && (
+                <BitcoinPrereqStep
+                  {...stepProps}
+                  discoveredNodes={discoveredNodes}
+                  isDiscovering={isDiscovering}
+                  onRetryDiscovery={retryDiscovery}
+                  onAutoAdvance={handleAutoAdvance}
+                />
+              )}
+              {currentStep === 'bitcoin' && (
+                <BitcoinSetup
+                  {...stepProps}
+                  notice={bitcoinSetupNotice}
+                  onDismissNotice={() => setBitcoinSetupNotice(null)}
+                  discoveredNodes={discoveredNodes}
+                />
+              )}
+              {currentStep === 'hashrate' && <HashrateStep {...stepProps} />}
+              {currentStep === 'identity' && <MiningIdentityStep {...stepProps} />}
+              {currentStep === 'review' && (
+                <ReviewStart
+                  {...stepProps}
+                  onComplete={handleComplete}
+                  onGoToStep={setCurrentStep}
+                />
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    {flashOverlay}
+      {flashOverlay}
     </>
   );
 }
diff --git a/src/components/setup/steps/BitcoinPrereqStep.tsx b/src/components/setup/steps/BitcoinPrereqStep.tsx
index 5c605ef3..ae497141 100644
--- a/src/components/setup/steps/BitcoinPrereqStep.tsx
+++ b/src/components/setup/steps/BitcoinPrereqStep.tsx
@@ -12,7 +12,8 @@ import {
 } from '@sv2-ui/shared';
 import { BITCOIN_MESSAGES } from '@/lib/messages';
 import { StepProps, BitcoinConfig } from '../types';
-import { Copy, Check, ExternalLink, Loader2, RotateCw, CheckCircle2, AlertCircle } from 'lucide-react';
+import { Check, Loader2, AlertCircle, CheckCircle2, RotateCw, Copy, ExternalLink } from 'lucide-react';
+import { Alert } from '@/components/ui/alert';
 import type { BitcoinRpcDiscoveryResult } from '@/hooks/useBitcoinRpcDiscovery';
 import { useHostEnv } from '@/hooks/useHostEnv';
 import { BitcoinNetworkSelector } from '../BitcoinNetworkSelector';
@@ -285,12 +286,6 @@ export function BitcoinPrereqStep({ data, updateData, onNext, discoveredNodes, i
                   description: `${detectedNodeSummary}. Continue to configure the connection.`,
                 };
 
-  const readinessClasses = {
-    neutral: 'border-border bg-muted/50 text-muted-foreground',
-    warning: 'border-warning/20 bg-warning/[0.08] text-warning',
-    destructive: 'border-destructive/20 bg-destructive/[0.08] text-destructive',
-    success: 'border-success/20 bg-success/10 text-success',
-  }[readiness.tone];
 
   const canConfigureManually = !hostOsLoading
     && !isDiscovering
@@ -380,17 +375,14 @@ export function BitcoinPrereqStep({ data, updateData, onNext, discoveredNodes, i
         />
       </div>
 
-      <div
-        className={`flex gap-3 rounded-xl border p-4 text-sm ${readinessClasses}`}
-        role={readiness.tone === 'destructive' ? 'alert' : 'status'}
+      <Alert
+        variant={readiness.tone}
+        icon={readiness.icon}
         aria-live={readiness.tone === 'destructive' ? 'assertive' : 'polite'}
       >
-        <span className="mt-0.5 flex-shrink-0">{readiness.icon}</span>
-        <div className="min-w-0 text-left">
-          <p className="font-medium">{readiness.title}</p>
-          <p className="mt-1 text-xs leading-relaxed opacity-80">{readiness.description}</p>
-        </div>
-      </div>
+        <p className="font-medium">{readiness.title}</p>
+        <p className="mt-1 text-xs leading-relaxed opacity-80">{readiness.description}</p>
+      </Alert>
 
       {(canConfigureManually || canRetry) && (
         <div className="flex flex-wrap items-center justify-center gap-3">
diff --git a/src/components/setup/steps/BitcoinSetup.tsx b/src/components/setup/steps/BitcoinSetup.tsx
index 98c78ae5..9ea20c7f 100644
--- a/src/components/setup/steps/BitcoinSetup.tsx
+++ b/src/components/setup/steps/BitcoinSetup.tsx
@@ -12,7 +12,9 @@ import {
 import type { BitcoinCoreVersion, OperatingSystem, BitcoinNetwork } from '@sv2-ui/shared';
 import { BITCOIN_MESSAGES } from '@/lib/messages';
 import { StepProps, BitcoinConfig } from '../types';
-import { Apple, Terminal, Pencil, Check, Loader2, AlertCircle, CheckCircle2, RotateCw } from 'lucide-react';
+import { Apple, Terminal, Pencil, Check, Loader2, RotateCw } from 'lucide-react';
+import { Alert } from '@/components/ui/alert';
+import { FieldError } from '@/components/ui/field-error';
 import { UmbrelIcon } from '../icons/UmbrelIcon';
 import { useBitcoinSocketValidation } from '@/hooks/useBitcoinSocketValidation';
 import type { BitcoinRpcDiscoveryResult } from '@/hooks/useBitcoinRpcDiscovery';
@@ -106,19 +108,14 @@ export function BitcoinSetup({ data, updateData, onNext, notice, onDismissNotice
       </div>
 
       {discoveryApplied && (
-        <div
-          className="p-3 rounded-lg bg-success/10 border border-success/20 text-sm text-success flex gap-3 items-start"
-          role="status"
-          aria-live="polite"
-        >
-          <CheckCircle2 className="h-4 w-4 flex-shrink-0 mt-0.5" aria-hidden="true" />
+        <Alert variant="success">
           <div>
             <span className="font-medium">Pre-filled from detected node</span>
             <p className="text-xs mt-1 opacity-80">
               Network: {network} • Version: {detectedVersionLabel}
             </p>
           </div>
-        </div>
+        </Alert>
       )}
 
       <div role="group" aria-labelledby="os-label">
@@ -184,14 +181,9 @@ export function BitcoinSetup({ data, updateData, onNext, notice, onDismissNotice
           {BITCOIN_MESSAGES.versionLabel}
         </label>
         {notice && (
-          <div
-            className="mb-3 p-3 rounded-lg bg-destructive/[0.08] text-sm text-destructive flex gap-3 items-start"
-            role="alert"
-            aria-live="assertive"
-          >
-            <AlertCircle className="h-4 w-4 flex-shrink-0 mt-0.5" aria-hidden="true" />
+          <Alert variant="destructive" className="mb-3">
             <span>{notice}</span>
-          </div>
+          </Alert>
         )}
         <select
           id="core-version"
@@ -213,14 +205,11 @@ export function BitcoinSetup({ data, updateData, onNext, notice, onDismissNotice
           {BITCOIN_MESSAGES.genericUpgrade}
         </p>
         {!coreVersion && (
-          <p className="text-xs text-destructive mt-2">
-            {BITCOIN_MESSAGES.selectVersionPrompt}
-          </p>
+          <FieldError message={BITCOIN_MESSAGES.selectVersionPrompt} />
         )}
       </div>
       {os === 'umbrel' && coreVersion && !isChecking && socketError && (
-        <div className="p-3 rounded-xl bg-warning/[0.08] text-sm text-warning flex gap-2 items-start">
-          <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" aria-hidden="true" />
+        <Alert variant="warning">
           <div className="space-y-1">
             <p className="font-medium">Umbrel Setup Instructions</p>
             <ul className="list-disc list-inside space-y-0.5">
@@ -229,7 +218,7 @@ export function BitcoinSetup({ data, updateData, onNext, notice, onDismissNotice
               <li>Enable <strong>IPC Mining Interface</strong></li>
             </ul>
           </div>
-        </div>
+        </Alert>
       )}
 
       <BitcoinNetworkSelector
@@ -289,39 +278,24 @@ export function BitcoinSetup({ data, updateData, onNext, notice, onDismissNotice
         <p id="socket-path-hint" className="text-xs text-muted-foreground mt-2">Click to edit if your socket is in a different location.</p>
 
         {isChecking && (
-          <div
-            className="mt-3 p-3 rounded-lg bg-muted/50 text-sm text-muted-foreground flex gap-3 items-center"
-            role="status"
-            aria-live="polite"
-          >
-            <Loader2 className="h-4 w-4 animate-spin flex-shrink-0" aria-hidden="true" />
+          <Alert variant="neutral" className="mt-3 items-center" icon={<Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />}>
             <span>Checking socket path...</span>
-          </div>
+          </Alert>
         )}
         {!isChecking && isValid && (
-          <div
-            className="mt-3 p-3 rounded-lg bg-success/10 border border-success/20 text-sm text-success flex gap-3 items-center"
-            role="status"
-            aria-live="polite"
-          >
-            <CheckCircle2 className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+          <Alert variant="success" className="mt-3 items-center">
             <span>Socket is listening</span>
-          </div>
+          </Alert>
         )}
         {!isChecking && socketError && (
-          <div
-            className="mt-3 p-3 rounded-lg bg-destructive/[0.08] text-sm text-destructive flex gap-3 items-start"
-            role="alert"
-            aria-live="assertive"
-          >
-            <AlertCircle className="h-4 w-4 flex-shrink-0 mt-0.5" aria-hidden="true" />
+          <Alert variant="destructive" className="mt-3">
             <div className="flex-1 min-w-0 space-y-3">
               <span className="block">{socketError}</span>
               <button
                 type="button"
                 onClick={() => retrySocketValidation()}
                 disabled={isRefreshing}
-                className="inline-flex h-8 items-center gap-2 rounded-md border border-destructive/30 bg-background px-3 text-xs font-medium text-destructive transition-colors hover:bg-destructive/[0.06] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/30 disabled:cursor-not-allowed disabled:opacity-60"
+                className="inline-flex h-8 items-center gap-2 rounded-md border border-red-500/30 bg-background px-3 text-xs font-medium text-red-600 dark:text-red-500 transition-colors hover:bg-red-500/[0.06] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/30 disabled:cursor-not-allowed disabled:opacity-60"
               >
                 {isRefreshing ? (
                   <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
@@ -331,10 +305,10 @@ export function BitcoinSetup({ data, updateData, onNext, notice, onDismissNotice
                 {isRefreshing ? 'Checking...' : 'Retry'}
               </button>
               {isRetryable && (
-                <p className="text-xs text-destructive/80">Rechecking automatically while Bitcoin Core starts.</p>
+                <p className="text-xs text-red-600/80 dark:text-red-500/80">Rechecking automatically while Bitcoin Core starts.</p>
               )}
             </div>
-          </div>
+          </Alert>
         )}
       </div>
 
diff --git a/src/components/setup/steps/HashrateStep.tsx b/src/components/setup/steps/HashrateStep.tsx
index 9a1c2c60..1d902b43 100644
--- a/src/components/setup/steps/HashrateStep.tsx
+++ b/src/components/setup/steps/HashrateStep.tsx
@@ -6,6 +6,8 @@ import {
   normalizeMinerTelemetryCidr,
 } from '@sv2-ui/shared';
 import { Check, ChevronDown, Settings2 } from 'lucide-react';
+import { Alert } from '@/components/ui/alert';
+import { FieldError } from '@/components/ui/field-error';
 import {
   AdvancedMiningConfigForm,
   createAdvancedMiningConfigValues,
@@ -23,10 +25,10 @@ interface HashratePreset {
 }
 
 const HASHRATE_PRESETS: HashratePreset[] = [
-  { id: 'bitaxe',      label: 'Bitaxe / USB Miner', hashrate: 500_000_000_000,     description: '~500 GH/s' },
-  { id: 'mid-asic',    label: 'Mid-Range ASIC',       hashrate: DEFAULT_MIN_HASHRATE, description: '~100 TH/s' },
-  { id: 'high-asic',   label: 'High-End ASIC',        hashrate: 300_000_000_000_000, description: '~300 TH/s' },
-  { id: 'custom',      label: 'Custom',               hashrate: 0,                   description: 'Enter your own value' },
+  { id: 'bitaxe', label: 'Bitaxe / USB Miner', hashrate: 500_000_000_000, description: '~500 GH/s' },
+  { id: 'mid-asic', label: 'Mid-Range ASIC', hashrate: DEFAULT_MIN_HASHRATE, description: '~100 TH/s' },
+  { id: 'high-asic', label: 'High-End ASIC', hashrate: 300_000_000_000_000, description: '~300 TH/s' },
+  { id: 'custom', label: 'Custom', hashrate: 0, description: 'Enter your own value' },
 ];
 
 export function HashrateStep({ data, updateData, onNext }: StepProps) {
@@ -76,9 +78,9 @@ export function HashrateStep({ data, updateData, onNext }: StepProps) {
         downstream_extranonce2_size: parsedAdvancedConfig.downstreamExtranonce2Size,
       },
     });
-  // intentionally excluded: data.translator and updateData cause infinite loop when included
+    // intentionally excluded: data.translator and updateData cause infinite loop when included
     // eslint-disable-next-line react-hooks/exhaustive-deps
-}, [hashrate, minerTelemetryCidr, advancedConfig, isSoloPool]);
+  }, [hashrate, minerTelemetryCidr, advancedConfig, isSoloPool]);
 
   return (
     <div className="space-y-8">
@@ -89,14 +91,14 @@ export function HashrateStep({ data, updateData, onNext }: StepProps) {
         </p>
       </div>
 
-      <div className="p-4 rounded-xl bg-muted/40" role="note">
-        <p className="text-sm text-muted-foreground">
+      <Alert variant="neutral">
+        <p>
           Difficulty per worker is automatically adjusted via variable difficulty (vardiff) algorithm.
           Give it a starting point. Using the approximate hashrate of your{' '}
           <span className="text-foreground font-medium">lowest performing worker</span> ensures every
           device can find shares right away.
         </p>
-      </div>
+      </Alert>
 
       <div className="grid grid-cols-2 gap-3" role="group" aria-labelledby="hashrate-group-label">
         <span id="hashrate-group-label" className="sr-only">Select hashrate preset</span>
@@ -108,9 +110,8 @@ export function HashrateStep({ data, updateData, onNext }: StepProps) {
               type="button"
               onClick={() => handlePresetChange(preset.id)}
               aria-pressed={active}
-              className={`relative p-4 rounded-xl border transition-all text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${
-                active ? 'border-primary bg-primary/[0.04]' : 'border-border bg-card hover:border-primary/45 hover:bg-primary/[0.02]'
-              }`}
+              className={`relative p-4 rounded-xl border transition-all text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${active ? 'border-primary bg-primary/[0.04]' : 'border-border bg-card hover:border-primary/45 hover:bg-primary/[0.02]'
+                }`}
             >
               {active && <div className="absolute top-3 right-3 w-5 h-5 rounded-full bg-primary flex items-center justify-center" aria-hidden="true"><Check className="w-3 h-3 text-background" /></div>}
               <div className="pr-6">
@@ -157,11 +158,7 @@ export function HashrateStep({ data, updateData, onNext }: StepProps) {
             aria-describedby="miner-telemetry-cidr-desc miner-telemetry-cidr-error"
             className="w-full h-10 px-3 rounded-lg border border-input bg-background font-mono text-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all"
           />
-          {minerTelemetryCidrError && (
-            <p id="miner-telemetry-cidr-error" className="text-xs text-destructive mt-1">
-              {minerTelemetryCidrError}
-            </p>
-          )}
+          <FieldError message={minerTelemetryCidrError} />
           <p id="miner-telemetry-cidr-desc" className="text-xs text-muted-foreground mt-2">
             Recommended for better telemetry. Use the private LAN subnet where miners expose
             their web/API interface.
@@ -210,4 +207,4 @@ export function HashrateStep({ data, updateData, onNext }: StepProps) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/setup/steps/JdcConfigStep.tsx b/src/components/setup/steps/JdcConfigStep.tsx
index ff1e1bbd..1053c634 100644
--- a/src/components/setup/steps/JdcConfigStep.tsx
+++ b/src/components/setup/steps/JdcConfigStep.tsx
@@ -1,7 +1,9 @@
 import { useState, useEffect } from 'react';
 import { StepProps, JdcConfig } from '../types';
-import { Info } from 'lucide-react';
+
 import { isValidBitcoinAddress, getBitcoinAddressError, getBitcoinAddressPlaceholder } from '@/lib/utils';
+import { Alert } from '@/components/ui/alert';
+import { FieldError } from '@/components/ui/field-error';
 
 export function JdcConfigStep({ data, updateData, onNext }: StepProps) {
   const [config, setConfig] = useState<JdcConfig>(
@@ -35,17 +37,12 @@ export function JdcConfigStep({ data, updateData, onNext }: StepProps) {
         </p>
       </div>
 
-      <div className="p-4 rounded-xl bg-info/10 border border-info/20" role="note">
-        <div className="flex gap-3">
-          <Info className="h-5 w-5 text-info flex-shrink-0 mt-0.5" aria-hidden="true" />
-          <div className="text-sm text-muted-foreground">
-            <p>
-              The JD Client connects to the pool and declares your custom block templates.
-              The coinbase reward address is used as a fallback for solo mining if the pool connection fails.
-            </p>
-          </div>
-        </div>
-      </div>
+      <Alert variant="info">
+        <p>
+          The JD Client connects to the pool and declares your custom block templates.
+          The coinbase reward address is used as a fallback for solo mining if the pool connection fails.
+        </p>
+      </Alert>
 
       <div className="space-y-4">
         <div>
@@ -63,9 +60,7 @@ export function JdcConfigStep({ data, updateData, onNext }: StepProps) {
             autoComplete="off"
             className="w-full h-10 px-3 rounded-lg border border-input bg-background font-mono text-sm focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all"
           />
-          {getBitcoinAddressError(config.coinbase_reward_address, network) && (
-            <p className="text-xs text-destructive mt-1">{getBitcoinAddressError(config.coinbase_reward_address, network)}</p>
-          )}
+          <FieldError message={getBitcoinAddressError(config.coinbase_reward_address, network)} />
           <p className="text-xs text-muted-foreground mt-2">
             Bitcoin address for receiving mining rewards (fallback for solo mining)
           </p>
diff --git a/src/components/setup/steps/MiningIdentityStep.tsx b/src/components/setup/steps/MiningIdentityStep.tsx
index b6f41f73..2c3ec230 100644
--- a/src/components/setup/steps/MiningIdentityStep.tsx
+++ b/src/components/setup/steps/MiningIdentityStep.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { StepProps } from '../types';
-import { Info } from 'lucide-react';
+
 import {
   getBitcoinAddressError,
   getBitcoinAddressPlaceholder,
@@ -8,6 +8,8 @@ import {
   isTomlSafeIdentifier,
   isValidBitcoinAddress,
 } from '@/lib/utils';
+import { Alert } from '@/components/ui/alert';
+import { FieldError } from '@/components/ui/field-error';
 
 export function MiningIdentityStep({ data, updateData, onNext }: StepProps) {
   const isSoloMode = data.miningMode === 'solo';
@@ -58,8 +60,8 @@ export function MiningIdentityStep({ data, updateData, onNext }: StepProps) {
           autoComplete="off"
           className="w-full h-10 px-3 rounded-lg border border-input bg-background focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all font-mono text-sm"
         />
-        {minerSignature && getIdentifierError(minerSignature) && (
-          <p className="text-xs text-destructive mt-1">{getIdentifierError(minerSignature)}</p>
+        {minerSignature && (
+          <FieldError message={getIdentifierError(minerSignature)} />
         )}
         <p className="text-xs text-muted-foreground mt-2">
           Miner-chosen tag shown in coinbase transactions on block explorers
@@ -72,12 +74,9 @@ export function MiningIdentityStep({ data, updateData, onNext }: StepProps) {
           <span className="sr-only">(required)</span>
         </label>
 
-        <div className="mb-3 p-3 rounded-xl bg-muted/40 flex gap-3" role="note">
-          <Info className="h-4 w-4 text-muted-foreground flex-shrink-0 mt-0.5" aria-hidden="true" />
-          <p className="text-sm text-muted-foreground">
-            {coinbaseNotice}
-          </p>
-        </div>
+        <Alert variant="neutral" className="mb-3">
+          <p>{coinbaseNotice}</p>
+        </Alert>
 
         <input
           id="coinbase-address"
@@ -89,9 +88,7 @@ export function MiningIdentityStep({ data, updateData, onNext }: StepProps) {
           autoComplete="off"
           className="w-full h-10 px-3 rounded-lg border border-input bg-background focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/15 outline-none transition-all font-mono text-sm"
         />
-        {getBitcoinAddressError(coinbaseAddress, network) && (
-          <p className="text-xs text-destructive mt-1">{getBitcoinAddressError(coinbaseAddress, network)}</p>
-        )}
+        <FieldError message={getBitcoinAddressError(coinbaseAddress, network)} />
         <p className="text-xs text-muted-foreground mt-2">
           Bitcoin address that receives solo mining rewards
         </p>
diff --git a/src/components/setup/steps/PoolConfigStep.tsx b/src/components/setup/steps/PoolConfigStep.tsx
index c7ee8868..1b8ee284 100644
--- a/src/components/setup/steps/PoolConfigStep.tsx
+++ b/src/components/setup/steps/PoolConfigStep.tsx
@@ -214,4 +214,4 @@ function SelectedPoolSummary({
       </button>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/setup/steps/ReviewStart.tsx b/src/components/setup/steps/ReviewStart.tsx
index 487d3e77..9ccc20ab 100644
--- a/src/components/setup/steps/ReviewStart.tsx
+++ b/src/components/setup/steps/ReviewStart.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { SetupStep, StepProps } from "../types";
-import { Loader2, AlertCircle } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
+import { Alert } from "@/components/ui/alert";
 import { MinerConnectionInfo } from "../MinerConnectionInfo";
 import { shouldAggregateTranslatorChannelsForPools } from "../poolRules";
 import { isBitcoinSocketError } from "@/lib/bitcoinSocketErrors";
@@ -189,17 +190,9 @@ export function ReviewStart({ data, onComplete, onGoToStep }: ReviewStartProps)
       </div>
 
       {error && (
-        <div
-          className="p-4 rounded-xl bg-destructive/[0.08] flex gap-3"
-          role="alert"
-          aria-live="assertive"
-        >
-          <AlertCircle
-            className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5"
-            aria-hidden="true"
-          />
+        <Alert variant="destructive">
           <div>
-            <div className="font-medium text-sm text-destructive mb-1">
+            <div className="font-medium text-sm text-red-600 dark:text-red-500 mb-1">
               Error
             </div>
             <div className="text-sm text-muted-foreground">{error}</div>
@@ -210,13 +203,13 @@ export function ReviewStart({ data, onComplete, onGoToStep }: ReviewStartProps)
                   setError(null);
                   onGoToStep("bitcoin");
                 }}
-                className="mt-3 inline-flex h-9 items-center justify-center rounded-full bg-destructive px-4 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/30"
+                className="mt-3 inline-flex h-9 items-center justify-center rounded-full bg-red-600 px-4 text-sm font-medium text-white transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/30"
               >
                 Open Bitcoin Setup
               </button>
             )}
           </div>
-        </div>
+        </Alert>
       )}
 
       {/* Summary */}
@@ -264,12 +257,12 @@ export function ReviewStart({ data, onComplete, onGoToStep }: ReviewStartProps)
                 </span>
               </div>
               {isAggregatedTproxy && (
-                <div className="mt-2 rounded-lg bg-warning/[0.08] px-3 py-2 text-xs leading-relaxed">
+                <Alert variant="warning" className="mt-2 py-2 px-3 text-xs leading-relaxed">
                   Translator aggregation is enabled for Braiins compatibility.
                   The Translator Proxy will aggregate all SV1 workers into one
                   single SV2 upstream channel, so the Braiins Pool dashboard
                   will not track workers individually.
-                </div>
+                </Alert>
               )}
             </div>
           </div>
diff --git a/src/components/setup/steps/TranslatorConfigStep.tsx b/src/components/setup/steps/TranslatorConfigStep.tsx
index dfee1bd1..8191d7da 100644
--- a/src/components/setup/steps/TranslatorConfigStep.tsx
+++ b/src/components/setup/steps/TranslatorConfigStep.tsx
@@ -1,8 +1,9 @@
 import { useState, useEffect } from 'react';
 import { StepProps, TranslatorConfig } from '../types';
 import { Switch } from '@/components/ui/switch';
-import { Info } from 'lucide-react';
+
 import { TRANSLATOR_PORT } from '@/lib/ports';
+import { Alert } from '@/components/ui/alert';
 
 export function TranslatorConfigStep({ data, updateData, onNext }: StepProps) {
   const isSoloMode = data.miningMode === 'solo';
@@ -36,17 +37,12 @@ export function TranslatorConfigStep({ data, updateData, onNext }: StepProps) {
         </p>
       </div>
 
-      <div className="p-4 rounded-xl bg-success/10 border border-success/20" role="note">
-        <div className="flex gap-3">
-          <Info className="h-5 w-5 text-success flex-shrink-0 mt-0.5" aria-hidden="true" />
-          <div className="text-sm text-muted-foreground">
-            <p>
-              The Translator Proxy bridges your SV1 mining hardware to the SV2 {isSoloMode ? 'solo pool' : 'pool'}.
-              Your miners will connect to the Translator on port <code className="text-xs bg-muted px-1 py-0.5 rounded">{TRANSLATOR_PORT}</code>.
-            </p>
-          </div>
-        </div>
-      </div>
+      <Alert variant="info">
+        <p>
+          The Translator Proxy bridges your SV1 mining hardware to the SV2 {isSoloMode ? 'solo pool' : 'pool'}.
+          Your miners will connect to the Translator on port <code className="text-xs bg-muted px-1 py-0.5 rounded">{TRANSLATOR_PORT}</code>.
+        </p>
+      </Alert>
 
       <div className="space-y-4">
         <div className="p-6 rounded-xl border border-border bg-muted space-y-4">
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 00000000..3bae18d7
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { AlertCircle, CheckCircle2, Info } from 'lucide-react';
+
+const alertVariants = cva(
+  'relative w-full rounded-xl border p-4 text-sm flex gap-3 text-left',
+  {
+    variants: {
+      variant: {
+        neutral: 'bg-muted/50 border-border text-muted-foreground',
+        warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-600 dark:text-yellow-500',
+        destructive: 'bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-500',
+        success: 'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-500',
+        info: 'bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-500',
+      },
+    },
+    defaultVariants: {
+      variant: 'neutral',
+    },
+  }
+);
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  icon?: React.ReactNode;
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, icon, children, role, ...props }, ref) => {
+    // Auto-assign ARIA roles based on variant if not explicitly provided
+    const defaultRole = variant === 'destructive' || variant === 'warning' ? 'alert' : 'status';
+
+    // Auto-assign default icons if not explicitly overridden (can pass icon={null} to remove)
+    let DefaultIcon = null;
+    if (icon === undefined) {
+      if (variant === 'destructive' || variant === 'warning') DefaultIcon = AlertCircle;
+      else if (variant === 'success') DefaultIcon = CheckCircle2;
+      else if (variant === 'info') DefaultIcon = Info;
+    }
+
+    return (
+      <div
+        ref={ref}
+        role={role || defaultRole}
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {(icon !== undefined ? icon : DefaultIcon) && (
+          <span className="mt-0.5 flex-shrink-0">
+            {icon !== undefined ? icon : DefaultIcon && <DefaultIcon className="h-4 w-4" aria-hidden="true" />}
+          </span>
+        )}
+        <div className="min-w-0 flex-1">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+Alert.displayName = 'Alert';
+
+// Reusable alert title component
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('font-medium leading-none tracking-tight mb-1.5', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+// Reusable alert description component
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed opacity-90', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/field-error.tsx b/src/components/ui/field-error.tsx
new file mode 100644
index 00000000..ec4c1892
--- /dev/null
+++ b/src/components/ui/field-error.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface FieldErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  message?: string | null;
+}
+
+const FieldError = React.forwardRef<HTMLParagraphElement, FieldErrorProps>(
+  ({ className, message, ...props }, ref) => {
+    if (!message) return null;
+
+    return (
+      <p
+        ref={ref}
+        className={cn('text-xs text-red-600 dark:text-red-500 mt-1.5 font-medium', className)}
+        {...props}
+      >
+        {message}
+      </p>
+    );
+  }
+);
+FieldError.displayName = 'FieldError';
+
+export { FieldError };
diff --git a/src/components/ui/status-dot.tsx b/src/components/ui/status-dot.tsx
new file mode 100644
index 00000000..e266f91d
--- /dev/null
+++ b/src/components/ui/status-dot.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const statusDotVariants = cva(
+  'shrink-0 rounded-full',
+  {
+    variants: {
+      status: {
+        connected: 'bg-green-500',
+        connecting: 'bg-yellow-500 animate-pulse',
+        disconnected: 'bg-red-500',
+        idle: 'bg-muted-foreground',
+      },
+      size: {
+        default: 'h-2.5 w-2.5',
+        sm: 'h-2 w-2',
+        lg: 'h-3 w-3',
+      },
+    },
+    defaultVariants: {
+      status: 'idle',
+      size: 'default',
+    },
+  }
+);
+
+export interface StatusDotProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statusDotVariants> {}
+
+const StatusDot = React.forwardRef<HTMLDivElement, StatusDotProps>(
+  ({ className, status, size, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(statusDotVariants({ status, size }), className)}
+        {...props}
+      />
+    );
+  }
+);
+StatusDot.displayName = 'StatusDot';
+
+export { StatusDot };
diff --git a/src/pages/UnifiedDashboard.tsx b/src/pages/UnifiedDashboard.tsx
index ec2c07ba..6bc8f9a6 100644
--- a/src/pages/UnifiedDashboard.tsx
+++ b/src/pages/UnifiedDashboard.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'wouter';
 import { useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, Search, Play, Trash2 } from 'lucide-react';
+import { Alert, AlertTitle } from '@/components/ui/alert';
 import { InfoPopover } from '@/components/ui/info-popover';
 import { MinerConnectionInfo } from '@/components/setup/MinerConnectionInfo';
 import { Shell } from '@/components/layout/Shell';
@@ -117,10 +118,10 @@ export function UnifiedDashboard() {
   const { data: translatorOk, isLoading: translatorHealthLoading, isError: translatorHealthError } = useTranslatorHealth();
   const { data: jdcOk, isLoading: jdcHealthLoading, isError: jdcHealthError } = useJdcHealth(isJdMode);
   const translatorHealthy = translatorOk === true && !translatorHealthError;
-  const jdcHealthy        = jdcOk === true && !jdcHealthError;
-  const translatorDown    = !translatorHealthLoading && !translatorHealthy;
-  const jdcDown           = isJdMode && !jdcHealthLoading && !jdcHealthy;
-  const showError         = poolError || translatorDown || jdcDown;
+  const jdcHealthy = jdcOk === true && !jdcHealthError;
+  const translatorDown = !translatorHealthLoading && !translatorHealthy;
+  const jdcDown = isJdMode && !jdcHealthLoading && !jdcHealthy;
+  const showError = poolError || translatorDown || jdcDown;
   const configuredButStopped = isOrchestrated && isConfigured && !isRunning;
   const configurationIssue = configurationIssues[0] ?? null;
   const canReviewConfiguration = configurationIssue?.code !== 'saved-setup-unavailable';
@@ -293,10 +294,10 @@ export function UnifiedDashboard() {
   // Total hashrate:
   // - JD mode: from SV2 client telemetry when available, falling back to vardiff totals
   // - Translator-only mode: from SV1 client telemetry when available, falling back to vardiff totals
-  const totalHashrate = isJdMode 
+  const totalHashrate = isJdMode
     ? (sv2Clients && sv1Data
-        ? (sv2TotalHashrate ?? 0) + sv1TotalHashrate
-        : (poolGlobal?.sv2_clients?.total_hashrate ?? 0))
+      ? (sv2TotalHashrate ?? 0) + sv1TotalHashrate
+      : (poolGlobal?.sv2_clients?.total_hashrate ?? 0))
     : (sv1Data ? sv1TotalHashrate : (poolGlobal?.sv1_clients?.total_hashrate ?? 0));
 
   // Scope hashrate history to the active pool + mode so stale samples from a
@@ -617,13 +618,15 @@ export function UnifiedDashboard() {
 
       {/* Start Mining Banner (configured but stopped) */}
       {!configurationIssue && configuredButStopped && showError && (
-        <div className="flex flex-col gap-3 rounded-xl border border-primary/40 bg-primary/10 px-5 py-4 text-sm sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex items-center gap-3">
-            {autoStarting || isStarting ? (
-              <div className="h-4 w-4 border-2 border-primary/30 border-t-primary rounded-full animate-spin" />
-            ) : (
-              <Play className="h-4 w-4 shrink-0 text-primary" />
-            )}
+        <Alert
+          variant="warning"
+          icon={autoStarting || isStarting ? (
+            <div className="h-4 w-4 border-2 border-yellow-500/30 border-t-yellow-500 rounded-full animate-spin" />
+          ) : (
+            <Play className="h-4 w-4 shrink-0" />
+          )}
+        >
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <span>
               {autoStarting
                 ? 'Mining services are starting...'
@@ -631,27 +634,26 @@ export function UnifiedDashboard() {
                   ? 'Starting mining services...'
                   : 'Mining services are stopped.'}
             </span>
+            {!autoStarting && !isStarting && (
+              <button
+                onClick={handleStartMining}
+                disabled={isStarting}
+                className="flex h-9 items-center gap-2 self-start rounded-full bg-yellow-500 px-4 font-medium text-white transition-colors hover:bg-yellow-600 disabled:opacity-50 sm:self-auto"
+              >
+                Start Mining
+              </button>
+            )}
           </div>
-          {!autoStarting && !isStarting && (
-            <button
-              onClick={handleStartMining}
-              disabled={isStarting}
-              className="flex h-9 items-center gap-2 self-start rounded-full bg-primary px-4 font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 sm:self-auto"
-            >
-              Start Mining
-            </button>
-          )}
-        </div>
+        </Alert>
       )}
 
       {/* Connection Error Banner (not configured or unknown error) */}
       {!configurationIssue && (startError || (showError && !configuredButStopped && diagnostics.length === 0)) && (
-        <div className="flex items-center gap-3 rounded-xl border border-red-500/40 bg-red-500/10 px-5 py-4 text-sm text-red-500">
-          <AlertTriangle className="h-4 w-4 shrink-0" />
-          <span>
+        <Alert variant="destructive">
+          <p>
             {startError || 'Cannot connect to pool. Make sure mining services are running.'}
-          </span>
-        </div>
+          </p>
+        </Alert>
       )}
 
       {/* log-derived Diagnostic Banners */}
@@ -661,34 +663,29 @@ export function UnifiedDashboard() {
           diagnostic.code === BITCOIN_CORE_DISCONNECTED_CODE;
 
         return (
-          <div
+          <Alert
             key={diagnostic.code}
-            className={`flex flex-col gap-3 rounded-xl border px-5 py-4 text-sm sm:flex-row sm:items-center sm:justify-between ${
-              diagnostic.severity === 'error'
-                ? 'border-red-500/40 bg-red-500/10 text-red-500'
-                : 'border-amber-500/40 bg-amber-500/10 text-amber-500'
-            }`}
+            variant={diagnostic.severity === 'error' ? 'destructive' : 'warning'}
           >
-            <div className="flex items-start gap-3">
-              <AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div className="flex flex-col gap-1">
-                <span className="font-medium">{diagnostic.title}</span>
+                <AlertTitle>{diagnostic.title}</AlertTitle>
                 <span>{diagnostic.message}</span>
                 {diagnostic.recommendation && (
                   <span className="text-current/80">{diagnostic.recommendation}</span>
                 )}
               </div>
+              {showBitcoinSetupButton && (
+                <Link
+                  href="/setup"
+                  onClick={() => window.sessionStorage.setItem(SETUP_TARGET_STEP_STORAGE_KEY, 'bitcoin')}
+                  className="inline-flex h-9 shrink-0 items-center justify-center rounded-full bg-red-600 px-4 font-medium text-white transition-colors hover:bg-red-700 sm:ml-4"
+                >
+                  Open Bitcoin Setup
+                </Link>
+              )}
             </div>
-            {showBitcoinSetupButton && (
-              <Link
-                href="/setup"
-                onClick={() => window.sessionStorage.setItem(SETUP_TARGET_STEP_STORAGE_KEY, 'bitcoin')}
-                className="inline-flex h-9 shrink-0 items-center justify-center rounded-full bg-red-500 px-4 font-medium text-white transition-colors hover:bg-red-600 sm:ml-4"
-              >
-                Open Bitcoin Setup
-              </Link>
-            )}
-          </div>
+          </Alert>
         );
       })}
 
@@ -816,7 +813,7 @@ export function UnifiedDashboard() {
           title="Best Difficulty"
           value={hasBestDiffSource ? formatDifficulty(bestDiff) : '-'}
         />
-        </div>
+      </div>
 
       {/* Miner Connection Info */}
       <div>
@@ -909,4 +906,4 @@ export function UnifiedDashboard() {
       )}
     </Shell>
   );
-}
+}
\ No newline at end of file

From 591394b790e56e0206e14d66c17d07e2f6ff140e Mon Sep 17 00:00:00 2001
From: Ayush <bhandariayush935@gmail.com>
Date: Fri, 7 Aug 2026 21:50:35 +0530
Subject: [PATCH 2/3] Fix icon vertical alignment in Start Mining banner

---
 src/pages/UnifiedDashboard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/UnifiedDashboard.tsx b/src/pages/UnifiedDashboard.tsx
index 6bc8f9a6..3efe3ea0 100644
--- a/src/pages/UnifiedDashboard.tsx
+++ b/src/pages/UnifiedDashboard.tsx
@@ -620,6 +620,7 @@ export function UnifiedDashboard() {
       {!configurationIssue && configuredButStopped && showError && (
         <Alert
           variant="warning"
+          className="items-center [&>span]:mt-0"
           icon={autoStarting || isStarting ? (
             <div className="h-4 w-4 border-2 border-yellow-500/30 border-t-yellow-500 rounded-full animate-spin" />
           ) : (

From 176860ed2aa5b32b38fd4f1ab4c4048c14b0fb96 Mon Sep 17 00:00:00 2001
From: Ayush <bhandariayush935@gmail.com>
Date: Fri, 7 Aug 2026 21:50:53 +0530
Subject: [PATCH 3/3] Restore isSetupReview state and conditional banner logic

---
 src/components/setup/SetupWizard.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/setup/SetupWizard.tsx b/src/components/setup/SetupWizard.tsx
index dd31186f..6d13b76b 100644
--- a/src/components/setup/SetupWizard.tsx
+++ b/src/components/setup/SetupWizard.tsx
@@ -90,6 +90,7 @@ export function SetupWizard() {
   const [currentStep, setCurrentStep] = useState<SetupStep>('mining-mode');
   const [data, setData] = useState<SetupData>(initialSetupData);
   const [isReconfiguring, setIsReconfiguring] = useState(false);
+  const [isSetupReview, setIsSetupReview] = useState(false);
   const [loadingConfig, setLoadingConfig] = useState(true);
   const [bitcoinSetupNotice, setBitcoinSetupNotice] = useState<string | null>(null);
   const { results: discoveredNodes, isLoading: isDiscovering, retry: retryDiscovery } = useBitcoinRpcDiscovery();
@@ -110,6 +111,7 @@ export function SetupWizard() {
         const setupReviewRequested = window.sessionStorage.getItem(SETUP_REVIEW_STORAGE_KEY) === 'true';
         window.sessionStorage.removeItem(SETUP_TARGET_STEP_STORAGE_KEY);
         window.sessionStorage.removeItem(SETUP_REVIEW_STORAGE_KEY);
+        setIsSetupReview(setupReviewRequested);
 
         if (targetStep === 'bitcoin' && config.bitcoin) {
           nextConfig = {
@@ -290,7 +292,9 @@ export function SetupWizard() {
             <div key={currentStep} className="w-full max-w-xl animate-fade-in-up">
               {isReconfiguring && currentStepIndex === 1 && (
                 <Alert variant="warning" className="mb-6">
-                  Reconfiguring SV2 setup — this will replace your current configuration.
+                  {isSetupReview
+                    ? 'Review your setup to continue mining. Your saved settings are prefilled.'
+                    : 'Reconfiguring SV2 setup — this will replace your current configuration.'}
                 </Alert>
               )}
               {currentStep === 'template-mode' && <TemplateModeSelection {...stepProps} />}