From d5a8f36b35f93465a7c80b9192c0d92fe9643060 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Wed, 6 May 2026 14:04:24 -0700
Subject: [PATCH] refactor(ui): migrate positions workflow controls

---
 web/src/tabs/PositionsTab.tsx | 311 +++++++++++++++++++---------------
 1 file changed, 177 insertions(+), 134 deletions(-)

diff --git a/web/src/tabs/PositionsTab.tsx b/web/src/tabs/PositionsTab.tsx
index 5c60a14..cd60f35 100644
--- a/web/src/tabs/PositionsTab.tsx
+++ b/web/src/tabs/PositionsTab.tsx
@@ -7,6 +7,7 @@ import { createRequestId } from '../../../shared/request-id.js';
 import { Layers, ListFilter, Link2, GitBranch, AlertTriangle, Lock, RefreshCw, CheckCircle, XCircle } from 'lucide-react';
 import { useCanonicalLifecycle } from '../hooks/useCanonicalLifecycle';
 import { fetchPositionsBootstrap } from '../lib/positionsApi';
+import { Button, Input, Select } from '../components/ui/Primitives';
 
 interface PositionsTabProps {
     botState: BotState;
@@ -1291,26 +1292,32 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
                 </div>
 
                 <div className="flex gap-2 border-b border-white/5 items-end">
-                    <button
-                        onClick={() => setSelectedProfileId('all')}
-                        className={`px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === 'all'
-                            ? 'border-[#00ff88] text-[#00ff88]'
-                            : 'border-transparent text-gray-500 hover:text-white'
-                            }`}
-                    >
-                        Global
-                    </button>
-                    {profiles.map(p => (
-                        <button
-                            key={p.id}
-                            onClick={() => setSelectedProfileId(p.id)}
-                            className={`px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === p.id
-                                ? 'border-[#00ff88] text-[#00ff88]'
-                                : 'border-transparent text-gray-500 hover:text-white'
-                                }`}
-                        >
-                            {p.name}
-                        </button>
+                    <Button
+                        type="button"
+                        onClick={() => setSelectedProfileId('all')}
+                        variant="ghost"
+                        size="sm"
+                        className={`h-auto rounded-none px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === 'all'
+                            ? 'border-[#00ff88] text-[#00ff88]'
+                            : 'border-transparent text-gray-500 hover:text-white'
+                            }`}
+                    >
+                        Global
+                    </Button>
+                    {profiles.map(p => (
+                        <Button
+                            key={p.id}
+                            type="button"
+                            onClick={() => setSelectedProfileId(p.id)}
+                            variant="ghost"
+                            size="sm"
+                            className={`h-auto rounded-none px-4 py-3 text-sm font-semibold transition-all border-b-2 ${selectedProfileId === p.id
+                                ? 'border-[#00ff88] text-[#00ff88]'
+                                : 'border-transparent text-gray-500 hover:text-white'
+                                }`}
+                        >
+                            {p.name}
+                        </Button>
                     ))}
                 </div>
             </header>
@@ -1587,52 +1594,64 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
                                     Profile + Date filters
                                 </th>
                                 <th className="px-4 py-2">
-                                    <select
-                                        value={selectedProfileId}
-                                        onChange={(e) => setSelectedProfileId(e.target.value)}
-                                        className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500/40"
-                                    >
-                                        <option value="all">All Profiles</option>
-                                        {profiles.map((profileOption) => (
-                                            <option key={profileOption.id} value={profileOption.id}>
-                                                {profileOption.name}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </th>
-                                <th className="px-4 py-2">
-                                    <div className="flex flex-col gap-1">
-                                        <input
-                                            type="date"
-                                            value={ordersDateFrom}
-                                            onChange={(e) => setOrdersDateFrom(e.target.value)}
-                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500/40"
-                                        />
-                                        <input
-                                            type="date"
-                                            value={ordersDateTo}
-                                            onChange={(e) => setOrdersDateTo(e.target.value)}
-                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500/40"
-                                        />
-                                        <div className="flex items-center gap-2">
-                                            <button
-                                                onClick={() => {
-                                                    setOrdersDateFrom('');
-                                                    setOrdersDateTo('');
-                                                }}
-                                                className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
-                                            >
-                                                Clear
-                                            </button>
-                                            <button
-                                                onClick={() => setOrdersSortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
-                                                className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
-                                            >
-                                                {ordersSortDirection === 'desc' ? 'Newest' : 'Oldest'}
-                                            </button>
-                                        </div>
-                                    </div>
-                                </th>
+                                    <Select
+                                        value={selectedProfileId}
+                                        onChange={(e) => setSelectedProfileId(e.target.value)}
+                                        options={[
+                                            { value: 'all', label: 'All Profiles' },
+                                            ...profiles.map((profileOption) => ({
+                                                value: profileOption.id,
+                                                label: profileOption.name,
+                                            })),
+                                        ]}
+                                        controlSize="sm"
+                                        variant="muted"
+                                        className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500/40"
+                                    />
+                                </th>
+                                <th className="px-4 py-2">
+                                    <div className="flex flex-col gap-1">
+                                        <Input
+                                            type="date"
+                                            value={ordersDateFrom}
+                                            onChange={(e) => setOrdersDateFrom(e.target.value)}
+                                            controlSize="sm"
+                                            variant="muted"
+                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500/40"
+                                        />
+                                        <Input
+                                            type="date"
+                                            value={ordersDateTo}
+                                            onChange={(e) => setOrdersDateTo(e.target.value)}
+                                            controlSize="sm"
+                                            variant="muted"
+                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-orange-500/40"
+                                        />
+                                        <div className="flex items-center gap-2">
+                                            <Button
+                                                type="button"
+                                                onClick={() => {
+                                                    setOrdersDateFrom('');
+                                                    setOrdersDateTo('');
+                                                }}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
+                                            >
+                                                Clear
+                                            </Button>
+                                            <Button
+                                                type="button"
+                                                onClick={() => setOrdersSortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
+                                            >
+                                                {ordersSortDirection === 'desc' ? 'Newest' : 'Oldest'}
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </th>
                                 <th colSpan={8} className="px-4 py-2 text-[10px] text-gray-500 font-medium">
                                     Sorting is applied by time on this table.
                                 </th>
@@ -1775,23 +1794,29 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
                                             -{Math.min(ordersPage * ORDER_ACTIVITY_PAGE_SIZE, sortedOrdersForActivity.length)} of {sortedOrdersForActivity.length}
                                         </span>
                                         <div className="flex items-center gap-2">
-                                            <button
-                                                onClick={() => setOrdersPage((current) => Math.max(1, current - 1))}
-                                                disabled={ordersPage === 1}
-                                                className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
-                                            >
-                                                Prev
-                                            </button>
+                                            <Button
+                                                type="button"
+                                                onClick={() => setOrdersPage((current) => Math.max(1, current - 1))}
+                                                disabled={ordersPage === 1}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
+                                            >
+                                                Prev
+                                            </Button>
                                             <span className="text-[10px] uppercase tracking-widest text-gray-500">
                                                 Page {ordersPage} / {ordersTotalPages}
                                             </span>
-                                            <button
-                                                onClick={() => setOrdersPage((current) => Math.min(ordersTotalPages, current + 1))}
-                                                disabled={ordersPage >= ordersTotalPages}
-                                                className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
-                                            >
-                                                Next
-                                            </button>
+                                            <Button
+                                                type="button"
+                                                onClick={() => setOrdersPage((current) => Math.min(ordersTotalPages, current + 1))}
+                                                disabled={ordersPage >= ordersTotalPages}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
+                                            >
+                                                Next
+                                            </Button>
                                         </div>
                                     </div>
                                 </td>
@@ -1836,52 +1861,64 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
                                     Profile + Date filters
                                 </th>
                                 <th className="px-4 py-2">
-                                    <select
-                                        value={selectedProfileId}
-                                        onChange={(e) => setSelectedProfileId(e.target.value)}
-                                        className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
-                                    >
-                                        <option value="all">All Profiles</option>
-                                        {profiles.map((profileOption) => (
-                                            <option key={profileOption.id} value={profileOption.id}>
-                                                {profileOption.name}
-                                            </option>
-                                        ))}
-                                    </select>
+                                    <Select
+                                        value={selectedProfileId}
+                                        onChange={(e) => setSelectedProfileId(e.target.value)}
+                                        options={[
+                                            { value: 'all', label: 'All Profiles' },
+                                            ...profiles.map((profileOption) => ({
+                                                value: profileOption.id,
+                                                label: profileOption.name,
+                                            })),
+                                        ]}
+                                        controlSize="sm"
+                                        variant="muted"
+                                        className="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] font-semibold text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
+                                    />
                                 </th>
                                 <th className="px-4 py-2 text-[10px] text-gray-500 font-medium">
                                     Filter in headers
                                 </th>
                                 <th className="px-4 py-2">
                                     <div className="flex flex-col gap-1">
-                                        <input
-                                            type="date"
-                                            value={lifecycleDateFrom}
-                                            onChange={(e) => setLifecycleDateFrom(e.target.value)}
-                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
-                                        />
-                                        <input
-                                            type="date"
-                                            value={lifecycleDateTo}
-                                            onChange={(e) => setLifecycleDateTo(e.target.value)}
-                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
-                                        />
-                                        <div className="flex items-center gap-2">
-                                            <button
-                                                onClick={() => {
-                                                    setLifecycleDateFrom('');
-                                                    setLifecycleDateTo('');
-                                                }}
-                                                className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
-                                            >
-                                                Clear
-                                            </button>
-                                            <button
-                                                onClick={() => setLifecycleSortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
-                                                className="px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
-                                            >
-                                                {lifecycleSortDirection === 'desc' ? 'Newest' : 'Oldest'}
-                                            </button>
+                                        <Input
+                                            type="date"
+                                            value={lifecycleDateFrom}
+                                            onChange={(e) => setLifecycleDateFrom(e.target.value)}
+                                            controlSize="sm"
+                                            variant="muted"
+                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
+                                        />
+                                        <Input
+                                            type="date"
+                                            value={lifecycleDateTo}
+                                            onChange={(e) => setLifecycleDateTo(e.target.value)}
+                                            controlSize="sm"
+                                            variant="muted"
+                                            className="bg-white/5 border border-white/10 rounded px-2 py-1 text-[10px] text-gray-200 focus:outline-none focus:ring-2 focus:ring-cyan-500/40"
+                                        />
+                                        <div className="flex items-center gap-2">
+                                            <Button
+                                                type="button"
+                                                onClick={() => {
+                                                    setLifecycleDateFrom('');
+                                                    setLifecycleDateTo('');
+                                                }}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
+                                            >
+                                                Clear
+                                            </Button>
+                                            <Button
+                                                type="button"
+                                                onClick={() => setLifecycleSortDirection((current) => current === 'desc' ? 'asc' : 'desc')}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-2 py-1 rounded border border-white/10 text-[9px] font-bold uppercase tracking-wider text-gray-300 hover:bg-white/5 transition-colors"
+                                            >
+                                                {lifecycleSortDirection === 'desc' ? 'Newest' : 'Oldest'}
+                                            </Button>
                                         </div>
                                     </div>
                                 </th>
@@ -1992,23 +2029,29 @@ export const PositionsTab = ({ botState, onManageHolding }: PositionsTabProps) =
                                             -{Math.min(lifecyclePage * TRACE_PAGE_SIZE, sortedLifecycleTraces.length)} of {sortedLifecycleTraces.length}
                                         </span>
                                         <div className="flex items-center gap-2">
-                                            <button
-                                                onClick={() => setLifecyclePage((current) => Math.max(1, current - 1))}
-                                                disabled={lifecyclePage === 1}
-                                                className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
-                                            >
-                                                Prev
-                                            </button>
+                                            <Button
+                                                type="button"
+                                                onClick={() => setLifecyclePage((current) => Math.max(1, current - 1))}
+                                                disabled={lifecyclePage === 1}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
+                                            >
+                                                Prev
+                                            </Button>
                                             <span className="text-[10px] uppercase tracking-widest text-gray-500">
                                                 Page {lifecyclePage} / {lifecycleTotalPages}
                                             </span>
-                                            <button
-                                                onClick={() => setLifecyclePage((current) => Math.min(lifecycleTotalPages, current + 1))}
-                                                disabled={lifecyclePage >= lifecycleTotalPages}
-                                                className="px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
-                                            >
-                                                Next
-                                            </button>
+                                            <Button
+                                                type="button"
+                                                onClick={() => setLifecyclePage((current) => Math.min(lifecycleTotalPages, current + 1))}
+                                                disabled={lifecyclePage >= lifecycleTotalPages}
+                                                variant="outline"
+                                                size="sm"
+                                                className="h-auto px-3 py-1.5 rounded border border-white/10 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-white/5 transition-colors"
+                                            >
+                                                Next
+                                            </Button>
                                         </div>
                                     </div>
                                 </td>