feat: add task multi-select, context menu, and subscription UI updates

Add shift-click range selection, cmd/ctrl-click toggle, and right-click
context menu for tasks in sidebar matching workflow/folder patterns.
Update subscription settings tab UI.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx

@@ -103,7 +103,7 @@ export function CreditBalance({
       {canPurchase && (
         <Modal open={isOpen} onOpenChange={handleOpenChange}>
           <ModalTrigger asChild>
-            <Button variant='active' className='h-[32px] rounded-[6px] text-[13px]'>
+            <Button variant='default' className='h-[32px] text-[13px]'>
               Add Credits
             </Button>
           </ModalTrigger>

apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx

@@ -131,7 +131,7 @@ export function PlanCard({
         </ul>
         <Button
           onClick={onButtonClick}
-          className={cn(!inlineButton && 'w-full')}
+          className={cn(inlineButton ? 'shrink-0 whitespace-nowrap' : 'w-full')}
           variant={isError ? 'outline' : 'tertiary'}
           aria-label={`${buttonText} ${name} plan`}
         >

apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/referral-code/referral-code.tsx

@@ -44,7 +44,7 @@ export function ReferralCode({ onRedeemComplete }: ReferralCodeProps) {
   }
 
   return (
-    <div className='flex flex-col'>
+    <div className='flex flex-col gap-[4px]'>
       <div className='flex items-center justify-between gap-[12px]'>
         <Label className='shrink-0'>Referral Code</Label>
         <div className='flex items-center gap-[8px]'>
@@ -59,24 +59,24 @@ export function ReferralCode({ onRedeemComplete }: ReferralCodeProps) {
               if (e.key === 'Enter') handleRedeem()
             }}
             placeholder='Enter code'
-            className='h-[32px] w-[140px] text-[13px]'
+            className='h-[32px] w-[140px] bg-[var(--surface-4)] text-[13px]'
             disabled={redeemCode.isPending}
           />
           <Button
-            variant='active'
-            className='h-[32px] shrink-0 rounded-[6px] text-[13px]'
+            variant='default'
+            className='h-[32px] shrink-0 text-[13px]'
             onClick={handleRedeem}
             disabled={redeemCode.isPending || !code.trim()}
           >
             {redeemCode.isPending ? 'Redeeming...' : 'Redeem'}
           </Button>
         </div>
       </div>
-      <div className='mt-[4px] min-h-[18px] text-right'>
-        {redeemCode.error && (
-          <span className='text-[11px] text-[var(--text-error)]'>{redeemCode.error.message}</span>
-        )}
-      </div>
+      {redeemCode.error && (
+        <span className='text-right text-[11px] text-[var(--text-error)]'>
+          {redeemCode.error.message}
+        </span>
+      )}
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/settings/components/subscription/plan-configs.ts

@@ -4,6 +4,7 @@ import {
   HeadphonesIcon,
   Server,
   ShieldCheck,
+  Table2,
   Timer,
   Users,
   Zap,
@@ -16,19 +17,22 @@ export const PRO_PLAN_FEATURES: PlanFeature[] = [
   { icon: Clock, text: '1,000 runs/min (async)' },
   { icon: Timer, text: '50 min sync execution limit' },
   { icon: HardDrive, text: '50GB file storage' },
+  { icon: Table2, text: '25 tables · 5,000 rows each' },
 ]
 
 export const MAX_PLAN_FEATURES: PlanFeature[] = [
   { icon: Zap, text: '300 runs/min (sync)' },
   { icon: Clock, text: '2,500 runs/min (async)' },
   { icon: Timer, text: '50 min sync execution limit' },
   { icon: HardDrive, text: '500GB file storage' },
+  { icon: Table2, text: '25 tables · 5,000 rows each' },
 ]
 
 export const TEAM_INLINE_FEATURES: PlanFeature[] = [
   { icon: Users, text: 'Shared credit pool' },
   { icon: Zap, text: 'Max plan rate limits' },
   { icon: HardDrive, text: 'Max plan file storage' },
+  { icon: Table2, text: '100 tables · 10,000 rows each' },
   { icon: ShieldCheck, text: 'Access controls' },
   { icon: SlackMonoIcon, text: 'Dedicated Slack channel' },
 ]

apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx

@@ -912,80 +912,82 @@ export function Subscription() {
       />
 
       {/* Billing details section */}
-      <div className='flex flex-col gap-[14px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[14px] py-[12px]'>
-        {subscription.isPaid && permissions.canViewUsageInfo && (
-          <CreditBalance
-            balance={subscriptionData?.data?.creditBalance ?? 0}
-            canPurchase={permissions.canEditUsageLimit}
-            entityType={subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user'}
-            isLoading={isLoading}
-            onPurchaseComplete={() => refetchSubscription()}
-          />
-        )}
+      {(subscription.isPaid || (!isLoading && isTeamAdmin)) && (
+        <div className='flex flex-col gap-[14px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[14px] py-[12px]'>
+          {subscription.isPaid && permissions.canViewUsageInfo && (
+            <CreditBalance
+              balance={subscriptionData?.data?.creditBalance ?? 0}
+              canPurchase={permissions.canEditUsageLimit}
+              entityType={
+                subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user'
+              }
+              isLoading={isLoading}
+              onPurchaseComplete={() => refetchSubscription()}
+            />
+          )}
 
-        {!subscription.isEnterprise && (
-          <ReferralCode onRedeemComplete={() => refetchSubscription()} />
-        )}
+          {subscription.isPaid &&
+            subscriptionData?.data?.periodEnd &&
+            !permissions.showTeamMemberView &&
+            !permissions.isEnterpriseMember && (
+              <div className='flex items-center justify-between'>
+                <Label>{isCancelledAtPeriodEnd ? 'Access Until' : 'Next Billing Date'}</Label>
+                <span className='text-[13px] text-[var(--text-secondary)]'>
+                  {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
+                </span>
+              </div>
+            )}
 
-        {subscription.isPaid &&
-          subscriptionData?.data?.periodEnd &&
-          !permissions.showTeamMemberView &&
-          !permissions.isEnterpriseMember && (
-            <div className='flex items-center justify-between'>
-              <Label>{isCancelledAtPeriodEnd ? 'Access Until' : 'Next Billing Date'}</Label>
-              <span className='text-[13px] text-[var(--text-secondary)]'>
-                {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
-              </span>
-            </div>
+          {subscription.isPaid && permissions.canViewUsageInfo && (
+            <BillingUsageNotificationsToggle />
           )}
 
-        {subscription.isPaid && permissions.canViewUsageInfo && <BillingUsageNotificationsToggle />}
-
-        {!isLoading && isTeamAdmin && (
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-[6px]'>
-              <Label htmlFor='billed-account'>Billed Account</Label>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Info className='h-[12px] w-[12px] text-[var(--text-secondary)]' />
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <span>Usage from this workspace will be billed to this account</span>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </div>
-            {workspaceAdmins.length === 0 ? (
-              <div className='rounded-[6px] border border-[var(--border)] border-dashed px-[12px] py-[6px] text-[13px] text-[var(--text-muted)]'>
-                No admins available
+          {!isLoading && isTeamAdmin && (
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-[6px]'>
+                <Label htmlFor='billed-account'>Billed Account</Label>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Info className='h-[12px] w-[12px] text-[var(--text-secondary)]' />
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>
+                    <span>Usage from this workspace will be billed to this account</span>
+                  </Tooltip.Content>
+                </Tooltip.Root>
               </div>
-            ) : (
-              <div className='w-[200px]'>
-                <Combobox
-                  size='sm'
-                  align='end'
-                  dropdownWidth={200}
-                  value={billedAccountUserId || ''}
-                  onChange={async (value: string) => {
-                    if (value && value !== billedAccountUserId) {
-                      try {
-                        await updateWorkspaceSettings({ billedAccountUserId: value })
-                      } catch {
-                        /* logged above */
+              {workspaceAdmins.length === 0 ? (
+                <div className='rounded-[6px] border border-[var(--border)] border-dashed px-[12px] py-[6px] text-[13px] text-[var(--text-muted)]'>
+                  No admins available
+                </div>
+              ) : (
+                <div className='w-[200px]'>
+                  <Combobox
+                    size='sm'
+                    align='end'
+                    dropdownWidth={200}
+                    value={billedAccountUserId || ''}
+                    onChange={async (value: string) => {
+                      if (value && value !== billedAccountUserId) {
+                        try {
+                          await updateWorkspaceSettings({ billedAccountUserId: value })
+                        } catch {
+                          /* logged above */
+                        }
                       }
-                    }
-                  }}
-                  disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
-                  placeholder='Select admin'
-                  options={workspaceAdmins.map((admin) => ({
-                    label: admin.email,
-                    value: admin.userId,
-                  }))}
-                />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
+                    }}
+                    disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
+                    placeholder='Select admin'
+                    options={workspaceAdmins.map((admin) => ({
+                      label: admin.email,
+                      value: admin.userId,
+                    }))}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
 
       {/* Enterprise */}
       {hasEnterprise && (
@@ -998,6 +1000,11 @@ export function Subscription() {
           inlineButton
         />
       )}
+
+      {/* Referral Code */}
+      {!subscription.isEnterprise && (
+        <ReferralCode onRedeemComplete={() => refetchSubscription()} />
+      )}
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/nav-item-context-menu/nav-item-context-menu.tsx

@@ -9,10 +9,6 @@ interface NavItemContextMenuProps {
   onClose: () => void
   onOpenInNewTab: () => void
   onCopyLink: () => void
-  onRename?: () => void
-  onDelete?: () => void
-  disableRename?: boolean
-  disableDelete?: boolean
 }
 
 export function NavItemContextMenu({
@@ -22,10 +18,6 @@ export function NavItemContextMenu({
   onClose,
   onOpenInNewTab,
   onCopyLink,
-  onRename,
-  onDelete,
-  disableRename = false,
-  disableDelete = false,
 }: NavItemContextMenuProps) {
   return (
     <Popover
@@ -61,29 +53,6 @@ export function NavItemContextMenu({
         >
           Copy link
         </PopoverItem>
-        {onRename && (
-          <PopoverItem
-            onClick={() => {
-              onRename()
-              onClose()
-            }}
-            disabled={disableRename}
-          >
-            Rename
-          </PopoverItem>
-        )}
-        {onDelete && (
-          <PopoverItem
-            onClick={() => {
-              onDelete()
-              onClose()
-            }}
-            disabled={disableDelete}
-            className='text-[var(--color-error)]'
-          >
-            Delete
-          </PopoverItem>
-        )}
       </PopoverContent>
     </Popover>
   )

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx

@@ -23,7 +23,7 @@ interface DeleteModalProps {
    * Type of item being deleted
    * - 'mixed' is used when both workflows and folders are selected
    */
-  itemType: 'workflow' | 'folder' | 'workspace' | 'mixed'
+  itemType: 'workflow' | 'folder' | 'workspace' | 'mixed' | 'task'
   /**
    * Name(s) of the item(s) being deleted (optional, for display)
    * Can be a single name or an array of names for multiple items
@@ -56,6 +56,8 @@ export function DeleteModal({
     title = isMultiple ? 'Delete Workflows' : 'Delete Workflow'
   } else if (itemType === 'folder') {
     title = isMultiple ? 'Delete Folders' : 'Delete Folder'
+  } else if (itemType === 'task') {
+    title = isMultiple ? 'Delete Tasks' : 'Delete Task'
   } else if (itemType === 'mixed') {
     title = 'Delete Items'
   } else {
@@ -112,6 +114,30 @@ export function DeleteModal({
       return 'Are you sure you want to delete this folder? This will permanently remove all associated workflows, logs, and knowledge bases.'
     }
 
+    if (itemType === 'task') {
+      if (isMultiple) {
+        return (
+          <>
+            Are you sure you want to delete{' '}
+            <span className='font-medium text-[var(--text-primary)]'>
+              {displayNames.length} tasks
+            </span>
+            ? This will permanently remove all conversation history.
+          </>
+        )
+      }
+      if (isSingle && displayNames.length > 0) {
+        return (
+          <>
+            Are you sure you want to delete{' '}
+            <span className='font-medium text-[var(--text-primary)]'>{displayNames[0]}</span>? This
+            will permanently remove all conversation history.
+          </>
+        )
+      }
+      return 'Are you sure you want to delete this task? This will permanently remove all conversation history.'
+    }
+
     if (itemType === 'mixed') {
       if (displayNames.length > 0) {
         return (

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts

@@ -12,6 +12,7 @@ export {
   useSidebarDragContextValue,
 } from './use-sidebar-drag-context'
 export { useSidebarResize } from './use-sidebar-resize'
+export { useTaskSelection } from './use-task-selection'
 export { useWorkflowOperations } from './use-workflow-operations'
 export { useWorkflowSelection } from './use-workflow-selection'
 export { useWorkspaceManagement, type Workspace } from './use-workspace-management'