From 6021c10ddce84536f01dd8e9bb8a59f279dfc3cc Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Sun, 25 Jan 2026 16:25:08 -0500
Subject: [PATCH] fix(ui): improve bulk actions UX in provider editor

- move BulkActionBar above account list (was at bottom)

- only show bar when selections exist (cleaner default)

- add selection checkbox to each AccountItem

- highlight selected accounts with ring + background
---
 .../cliproxy/provider-editor/account-item.tsx | 23 +++++++++++++++++-
 .../provider-editor/accounts-section.tsx      | 24 +++++++++----------
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/cliproxy/provider-editor/account-item.tsx b/ui/src/components/cliproxy/provider-editor/account-item.tsx
index afc9ac3e..f0f4aed6 100644
--- a/ui/src/components/cliproxy/provider-editor/account-item.tsx
+++ b/ui/src/components/cliproxy/provider-editor/account-item.tsx
@@ -27,6 +27,7 @@ import {
   AlertCircle,
   AlertTriangle,
   FolderCode,
+  Check,
 } from 'lucide-react';
 import {
   cn,
@@ -97,6 +98,9 @@ export function AccountItem({
   isPausingAccount,
   privacyMode,
   showQuota,
+  selectable,
+  selected,
+  onSelectChange,
 }: AccountItemProps) {
   // Fetch runtime stats to get actual lastUsedAt (more accurate than file state)
   const { data: stats } = useCliproxyStats(showQuota);
@@ -124,11 +128,28 @@ export function AccountItem({
       className={cn(
         'flex flex-col gap-2 p-3 rounded-lg border transition-colors',
         account.isDefault ? 'border-primary/30 bg-primary/5' : 'border-border hover:bg-muted/30',
-        account.paused && 'opacity-75'
+        account.paused && 'opacity-75',
+        selected && 'ring-2 ring-primary/50 bg-primary/5'
       )}
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
+          {/* Selection checkbox for bulk actions */}
+          {selectable && (
+            <button
+              type="button"
+              onClick={() => onSelectChange?.(!selected)}
+              className={cn(
+                'flex items-center justify-center w-5 h-5 rounded border-2 transition-colors shrink-0',
+                selected
+                  ? 'bg-primary border-primary text-primary-foreground'
+                  : 'border-muted-foreground/30 hover:border-primary/50'
+              )}
+              aria-label={selected ? 'Deselect account' : 'Select account'}
+            >
+              {selected && <Check className="w-3 h-3" />}
+            </button>
+          )}
           {/* Pause/Resume toggle button - visible left of avatar */}
           {onPauseToggle && (
             <TooltipProvider>
diff --git a/ui/src/components/cliproxy/provider-editor/accounts-section.tsx b/ui/src/components/cliproxy/provider-editor/accounts-section.tsx
index d69f9b58..64ed3ef5 100644
--- a/ui/src/components/cliproxy/provider-editor/accounts-section.tsx
+++ b/ui/src/components/cliproxy/provider-editor/accounts-section.tsx
@@ -153,6 +153,18 @@ export function AccountsSection({
         </Button>
       </div>
 
+      {/* Bulk Action Bar - shows when accounts selected (positioned at TOP for visibility) */}
+      {isSelectable && selectedCount > 0 && (
+        <BulkActionBar
+          selectedCount={selectedCount}
+          onPauseSelected={handleBulkPause}
+          onResumeSelected={handleBulkResume}
+          onClearSelection={deselectAll}
+          isPausing={!!isBulkPausing}
+          isResuming={!!isBulkResuming}
+        />
+      )}
+
       {accounts.length > 0 ? (
         <div className="space-y-2">
           {accounts.map((account) => (
@@ -184,18 +196,6 @@ export function AccountsSection({
         </div>
       )}
 
-      {/* Bulk Action Bar - shows when accounts selected */}
-      {isSelectable && (
-        <BulkActionBar
-          selectedCount={selectedCount}
-          onPauseSelected={handleBulkPause}
-          onResumeSelected={handleBulkResume}
-          onClearSelection={deselectAll}
-          isPausing={!!isBulkPausing}
-          isResuming={!!isBulkResuming}
-        />
-      )}
-
       {/* Kiro-specific: Incognito browser setting - users complain "it keeps opening incognito" */}
       {isKiro && onKiroNoIncognitoChange && (
         <div className="mt-3 pt-3 border-t border-dashed">