feat: implement group-specific design for client management

renderer/src/common/components/layout/top-nav/index.tsx

@@ -77,31 +77,7 @@ function TopNavLinks() {
             <LinkViewTransition to="/registry">Registry</LinkViewTransition>
           </NavigationMenuLink>
         </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuLink
-            className="app-region-no-drag text-muted-foreground
-              hover:text-foreground focus:text-foreground
-              data-[status=active]:text-foreground
-              data-[status=active]:before:bg-foreground
-              focus-visible:ring-ring/50 relative px-3 py-2 text-sm
-              transition-all outline-none hover:bg-transparent
-              focus:bg-transparent focus-visible:ring-[3px]
-              focus-visible:outline-1 data-[status=active]:bg-transparent
-              data-[status=active]:before:absolute
-              data-[status=active]:before:right-3
-              data-[status=active]:before:bottom-[-14px]
-              data-[status=active]:before:left-3
-              data-[status=active]:before:h-0.5
-              data-[status=active]:before:rounded-t-[1px]
-              data-[status=active]:before:opacity-90
-              data-[status=active]:before:content-['']
-              data-[status=active]:hover:bg-transparent
-              data-[status=active]:focus:bg-transparent"
-            asChild
-          >
-            <LinkViewTransition to="/clients">Clients</LinkViewTransition>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
+
         {isPlaygroundEnabled && (
           <NavigationMenuItem>
             <NavigationMenuLink

renderer/src/common/components/link-view-transition.tsx

@@ -3,13 +3,7 @@ import { Link, useRouterState } from '@tanstack/react-router'
 import { forwardRef, type ComponentProps } from 'react'
 
 type Route = FileRouteTypes['fullPaths']
-
-const ORDERED_ROUTES: Route[] = [
-  '/group/$groupName',
-  '/registry',
-  '/clients',
-  '/secrets',
-]
+const ORDERED_ROUTES: Route[] = ['/group/$groupName', '/registry', '/secrets']
 
 type TransitionType = 'slide-left' | 'slide-right'
 

renderer/src/common/mocks/handlers.ts

@@ -206,6 +206,102 @@ export const handlers = [
     return HttpResponse.json(clientsFixture)
   }),
 
+  // Client registration endpoint
+  http.post(mswEndpoint('/api/v1beta/clients'), async ({ request }) => {
+    try {
+      const body = (await request.json()) as { name: string; groups: string[] }
+      const { name, groups } = body
+
+      if (!name) {
+        return HttpResponse.json(
+          { error: 'Client name is required' },
+          { status: 400 }
+        )
+      }
+
+      if (!groups || groups.length === 0) {
+        return HttpResponse.json(
+          { error: 'Groups parameter is required' },
+          { status: 400 }
+        )
+      }
+
+      return HttpResponse.json(
+        {
+          name,
+          groups: groups || ['default'],
+        },
+        { status: 200 }
+      )
+    } catch {
+      return HttpResponse.json(
+        { error: 'Invalid request body' },
+        { status: 400 }
+      )
+    }
+  }),
+
+  // Client unregistration endpoint
+  http.delete(mswEndpoint('/api/v1beta/clients/:name'), ({ params }) => {
+    const { name } = params
+
+    if (!name) {
+      return HttpResponse.json(
+        { error: 'Client name is required' },
+        { status: 400 }
+      )
+    }
+
+    // For DELETE requests, we need to check if the group is provided in the request body
+    // Since DELETE requests typically don't have a body, we'll check the URL or require it
+    // For now, let's assume the group should be provided in the path or query params
+    // This is a simplified approach - in a real scenario, you might want to check the request body
+
+    return new HttpResponse(null, { status: 204 })
+  }),
+
+  // Client group-specific removal endpoint
+  http.delete(
+    mswEndpoint('/api/v1beta/clients/:name/groups/:group'),
+    ({ params }) => {
+      const { name, group } = params
+
+      if (!name) {
+        return HttpResponse.json(
+          { error: 'Client name is required' },
+          { status: 400 }
+        )
+      }
+
+      if (!group) {
+        return HttpResponse.json(
+          { error: 'Group name is required' },
+          { status: 400 }
+        )
+      }
+
+      return new HttpResponse(null, { status: 204 })
+    }
+  ),
+
+  // Get all clients endpoint
+  http.get(mswEndpoint('/api/v1beta/clients'), () => {
+    return HttpResponse.json([
+      {
+        name: { name: 'vscode' },
+        groups: ['default'],
+      },
+      {
+        name: { name: 'cursor' },
+        groups: ['default', 'research'],
+      },
+      {
+        name: { name: 'claude-code' },
+        groups: ['research'],
+      },
+    ])
+  }),
+
   http.get(mswEndpoint('/api/v1beta/registry/:name/servers'), () => {
     return HttpResponse.json({ servers: MOCK_REGISTRY_RESPONSE })
   }),