feat: position add button and new items at the top (#10881)

* feat: add sorting support to list agent api

* feat: move add button to top

* feat: display newly added assistant or agent on top

src/main/apiServer/routes/agents/handlers/agents.ts

@@ -132,6 +132,20 @@ export const createAgent = async (req: Request, res: Response): Promise<Response
  *           minimum: 0
  *           default: 0
  *         description: Number of agents to skip
+ *       - in: query
+ *         name: sortBy
+ *         schema:
+ *           type: string
+ *           enum: [created_at, updated_at, name]
+ *           default: created_at
+ *         description: Field to sort by
+ *       - in: query
+ *         name: orderBy
+ *         schema:
+ *           type: string
+ *           enum: [asc, desc]
+ *           default: desc
+ *         description: Sort order (asc = ascending, desc = descending)
  *     responses:
  *       200:
  *         description: List of agents
@@ -170,10 +184,12 @@ export const listAgents = async (req: Request, res: Response): Promise<Response>
   try {
     const limit = req.query.limit ? parseInt(req.query.limit as string) : 20
     const offset = req.query.offset ? parseInt(req.query.offset as string) : 0
+    const sortBy = (req.query.sortBy as 'created_at' | 'updated_at' | 'name') || 'created_at'
+    const orderBy = (req.query.orderBy as 'asc' | 'desc') || 'desc'
 
-    logger.debug('Listing agents', { limit, offset })
+    logger.debug('Listing agents', { limit, offset, sortBy, orderBy })
 
-    const result = await agentService.listAgents({ limit, offset })
+    const result = await agentService.listAgents({ limit, offset, sortBy, orderBy })
 
     logger.info('Agents listed', {
       returned: result.agents.length,

src/main/services/agents/services/AgentService.ts

@@ -11,7 +11,7 @@ import {
   UpdateAgentRequest,
   UpdateAgentResponse
 } from '@types'
-import { count, eq } from 'drizzle-orm'
+import { asc, count, desc, eq } from 'drizzle-orm'
 
 import { BaseService } from '../BaseService'
 import { type AgentRow, agentsTable, type InsertAgentRow } from '../database/schema'
@@ -100,7 +100,13 @@ export class AgentService extends BaseService {
 
     const totalResult = await this.database.select({ count: count() }).from(agentsTable)
 
-    const baseQuery = this.database.select().from(agentsTable).orderBy(agentsTable.created_at)
+    const sortBy = options.sortBy || 'created_at'
+    const orderBy = options.orderBy || 'desc'
+
+    const sortField = agentsTable[sortBy]
+    const orderFn = orderBy === 'asc' ? asc : desc
+
+    const baseQuery = this.database.select().from(agentsTable).orderBy(orderFn(sortField))
 
     const result =
       options.limit !== undefined

src/renderer/src/api/agent.ts

@@ -21,6 +21,7 @@ import {
   ListAgentSessionsResponseSchema,
   type ListAgentsResponse,
   ListAgentsResponseSchema,
+  ListOptions,
   objectEntries,
   objectKeys,
   UpdateAgentForm,
@@ -95,10 +96,19 @@ export class AgentApiClient {
     }
   }
 
-  public async listAgents(): Promise<ListAgentsResponse> {
+  public async listAgents(options?: ListOptions): Promise<ListAgentsResponse> {
     const url = this.agentPaths.base
     try {
-      const response = await this.axios.get(url)
+      const params = new URLSearchParams()
+      if (options?.limit !== undefined) params.append('limit', String(options.limit))
+      if (options?.offset !== undefined) params.append('offset', String(options.offset))
+      if (options?.sortBy) params.append('sortBy', options.sortBy)
+      if (options?.orderBy) params.append('orderBy', options.orderBy)
+
+      const queryString = params.toString()
+      const fullUrl = queryString ? `${url}?${queryString}` : url
+
+      const response = await this.axios.get(fullUrl)
       const result = ListAgentsResponseSchema.safeParse(response.data)
       if (!result.success) {
         throw new Error('Not a valid Agents array.')

src/renderer/src/hooks/agents/useAgents.ts

@@ -33,7 +33,7 @@ export const useAgents = () => {
     if (!apiServerRunning) {
       throw new Error(t('agent.server.error.not_running'))
     }
-    const result = await client.listAgents()
+    const result = await client.listAgents({ sortBy: 'created_at', orderBy: 'desc' })
     // NOTE: We only use the array for now. useUpdateAgent depends on this behavior.
     return result.data
   }, [apiServerConfig.enabled, apiServerRunning, client, t])

src/renderer/src/pages/home/Tabs/AssistantsTab.tsx

@@ -126,6 +126,8 @@ const AssistantsTab: FC<AssistantsTabProps> = (props) => {
         />
       )}
 
+      <UnifiedAddButton onCreateAssistant={onCreateAssistant} />
+
       {assistantsTabSortType === 'tags' ? (
         <UnifiedTagGroups
           groupedItems={groupedUnifiedItems}
@@ -170,8 +172,6 @@ const AssistantsTab: FC<AssistantsTabProps> = (props) => {
         />
       )}
 
-      <UnifiedAddButton onCreateAssistant={onCreateAssistant} />
-
       {!dragging && <div style={{ minHeight: 10 }}></div>}
     </Container>
   )

src/renderer/src/pages/home/Tabs/hooks/useUnifiedItems.ts

@@ -43,9 +43,11 @@ export const useUnifiedItems = (options: UseUnifiedItemsOptions) => {
       }
     })
 
-    // Add new items (not in saved order) to the end
+    // Add new items (not in saved order) to the beginning
-    availableAgents.forEach((agent) => items.push({ type: 'agent', data: agent }))
+    const newItems: UnifiedItem[] = []
-    availableAssistants.forEach((assistant) => items.push({ type: 'assistant', data: assistant }))
+    availableAgents.forEach((agent) => newItems.push({ type: 'agent', data: agent }))
+    availableAssistants.forEach((assistant) => newItems.push({ type: 'assistant', data: assistant }))
+    items.unshift(...newItems)
 
     return items
   }, [agents, assistants, apiServerEnabled, agentsLoading, agentsError, unifiedListOrder])

src/renderer/src/store/assistants.ts

@@ -37,7 +37,7 @@ const assistantsSlice = createSlice({
       state.assistants = action.payload
     },
     addAssistant: (state, action: PayloadAction<Assistant>) => {
-      state.assistants.push(action.payload)
+      state.assistants.unshift(action.payload)
     },
     insertAssistant: (state, action: PayloadAction<{ index: number; assistant: Assistant }>) => {
       const { index, assistant } = action.payload

src/renderer/src/types/agent.ts

@@ -121,6 +121,8 @@ export const isAgentEntity = (value: unknown): value is AgentEntity => {
 export interface ListOptions {
   limit?: number
   offset?: number
+  sortBy?: 'created_at' | 'updated_at' | 'name'
+  orderBy?: 'asc' | 'desc'
 }
 
 // AgentSession entity representing a conversation session with one or more agents