feat: redesign setup modal with toolkit tabs and agent frameworks (#1506)

* feat: redesign setup modal with toolkit tabs, agent frameworks, and syntax highlighting

- Add top-level Agents/Toolkits segmented tabs
- Reorganize code snippets as toolkit-first sub-tabs (OpenAI SDK, Vercel AI SDK, LangChain, cURL)
- Add Python/TypeScript language toggle for OpenAI SDK tab
- Add Model field (auto) to connection details
- Add agent framework tabs: OpenClaw (with CLI/wizard sub-tabs) and Hermes Agent (coming soon)
- Add OpenClaw interactive wizard with onboard fields and CLI configuration
- Add syntax highlighting via highlight.js (Python, TypeScript, Bash)
- Add eye toggle + disabled copy button when API key is masked
- Add tab/toolkit logos (OpenAI, Vercel, LangChain, Python, TypeScript, OpenClaw, Hermes)
- Add ARIA roles (tablist, tab, tabpanel) for accessibility
- Add CopyButton disabled prop with visual feedback

* fix: disable API key copy button when key is masked in FrameworkSnippets

* feat: add Python language toggle for Vercel AI SDK tab

* feat: add agent type system with category/platform selection and platform-filtered setup

- Add agent_category (personal/app) and agent_platform columns to agents table
- Migration backfills existing agents to personal/openclaw
- Update CreateAgentDto and RenameAgentDto to accept category/platform
- Add updateAgentType method to AgentLifecycleService
- Add AgentTypePicker component (reusable in create modal + settings)
- Add OpenClawSetup and HermesSetup dedicated setup components
- Add platform-filtered wizard in SetupStepAddProvider (reactive Show/Switch)
- Merge Settings tabs into single page with name + type + API key + setup
- Show platform icon in agent cards and Overview header
- Add LangChain (blue pinwheel), Other (3D box) icons
- Add YAML syntax highlighting for Hermes config
- Replace Total cost with Tokens in agent cards
- Fix SolidJS reactivity in SetupStepAddProvider (use Show/Switch not if/return)
- Fix CopyButton disabled reactivity (check inside handler)
- Add eye toggle + disabled copy to all code blocks with API keys
- Add "Change agent type" link in setup that scrolls to type picker
- Accessibility: visually-hidden radio inputs, focus-within rings, ARIA roles

* fix: address review feedback — clear stale platform, fix save validation

* feat: redesign setup modal UX — tab-style type selection, platform-specific instructions, Settings change modal (#1522)

- Replace category radio buttons with panel tab style in AgentTypePicker
- Default to Personal AI Agent / OpenClaw on create; auto-select first platform on tab switch
- Show platform-specific setup instructions (OpenClaw CLI, Hermes config, SDK snippets, cURL)
- Fix FrameworkSnippets reactivity — activeTab now syncs when defaultToolkit prop changes
- Redesign Settings agent type section: read-only display + Change button opens modal
- After saving type change, SetupModal opens automatically with new instructions
- Add platform icon to header breadcrumb
- Update syntax highlighting: softer string colors, blue instead of green
- Darken muted-foreground text color for better readability
- Remove border-radius from platform icons, invert OpenAI/Vercel logos in dark mode
- Update all related tests (AgentTypePicker, FrameworkSnippets, SetupStepAddProvider, Settings, etc.)

* chore: regenerate plugin bundle after merging main

* fix: handle undefined platform fallback in category change handlers

* fix: remove regex HTML stripping flagged by CodeQL

Check highlighted output directly instead of stripping tags with a
regex that CodeQL flags as incomplete multi-character sanitization.

---------

Co-authored-by: Sébastien Conejo <sebastien.conejo@buddyweb.fr>
Co-authored-by: Sébastien Conejo <sebastien@buddyweb.fr>

Author: brunobuddy

.changeset/setup-modal-redesign.md

@@ -0,0 +1,5 @@
+---
+"manifest": minor
+---
+
+Redesign setup modal UI with tab-style agent type selection, platform-specific setup instructions, and Settings page agent type change modal

package-lock.json

@@ -58,7 +58,11 @@ describe('AgentsController', () => {
         },
         {
           provide: AgentLifecycleService,
-          useValue: { deleteAgent: mockDeleteAgent, renameAgent: mockRenameAgent },
+          useValue: {
+            deleteAgent: mockDeleteAgent,
+            renameAgent: mockRenameAgent,
+            updateAgentType: jest.fn(),
+          },
         },
         {
           provide: ApiKeyGeneratorService,
@@ -183,7 +187,7 @@ describe('AgentsController', () => {
 
   it('renames agent and returns success with slug', async () => {
     const user = { id: 'u1' };
-    const result = await controller.renameAgent(user as never, 'bot-1', {
+    const result = await controller.updateAgent(user as never, 'bot-1', {
       name: 'Bot Renamed',
     } as never);
 
@@ -195,7 +199,7 @@ describe('AgentsController', () => {
   it('rejects rename with empty slug', async () => {
     const user = { id: 'u1' };
     await expect(
-      controller.renameAgent(user as never, 'bot-1', { name: '!!!' } as never),
+      controller.updateAgent(user as never, 'bot-1', { name: '!!!' } as never),
     ).rejects.toThrow(BadRequestException);
   });
 
@@ -242,7 +246,7 @@ describe('AgentsController', () => {
         { provide: TimeseriesQueriesService, useValue: { getAgentList: jest.fn() } },
         {
           provide: AgentLifecycleService,
-          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn() },
+          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn(), updateAgentType: jest.fn() },
         },
         {
           provide: ApiKeyGeneratorService,
@@ -272,7 +276,7 @@ describe('AgentsController', () => {
         { provide: TimeseriesQueriesService, useValue: { getAgentList: jest.fn() } },
         {
           provide: AgentLifecycleService,
-          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn() },
+          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn(), updateAgentType: jest.fn() },
         },
         {
           provide: ApiKeyGeneratorService,
@@ -301,7 +305,7 @@ describe('AgentsController', () => {
         { provide: TimeseriesQueriesService, useValue: { getAgentList: jest.fn() } },
         {
           provide: AgentLifecycleService,
-          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn() },
+          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn(), updateAgentType: jest.fn() },
         },
         {
           provide: ApiKeyGeneratorService,
@@ -329,7 +333,7 @@ describe('AgentsController', () => {
         { provide: TimeseriesQueriesService, useValue: { getAgentList: jest.fn() } },
         {
           provide: AgentLifecycleService,
-          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn() },
+          useValue: { deleteAgent: jest.fn(), renameAgent: jest.fn(), updateAgentType: jest.fn() },
         },
         {
           provide: ApiKeyGeneratorService,

packages/backend/src/analytics/controllers/agents.controller.spec.ts

@@ -67,6 +67,8 @@ export class AgentsController {
         agentName: slug,
         displayName,
         email: user.email,
+        agentCategory: body.agent_category,
+        agentPlatform: body.agent_platform,
       });
     } catch (error) {
       if (error instanceof QueryFailedError && /unique|duplicate/i.test(error.message)) {
@@ -76,7 +78,13 @@ export class AgentsController {
     }
     await this.cacheManager.del(this.agentListCacheKey(user.id));
     return {
-      agent: { id: result.agentId, name: slug, display_name: displayName },
+      agent: {
+        id: result.agentId,
+        name: slug,
+        display_name: displayName,
+        agent_category: body.agent_category ?? null,
+        agent_platform: body.agent_platform ?? null,
+      },
       apiKey: result.apiKey,
     };
   }
@@ -102,19 +110,34 @@ export class AgentsController {
   }
 
   @Patch('agents/:agentName')
-  async renameAgent(
+  async updateAgent(
     @CurrentUser() user: AuthUser,
     @Param('agentName') agentName: string,
     @Body() body: RenameAgentDto,
   ) {
-    const slug = slugify(body.name);
-    if (!slug) {
-      throw new BadRequestException('Agent name produces an empty slug');
+    const result: Record<string, unknown> = {};
+
+    if (body.name) {
+      const slug = slugify(body.name);
+      if (!slug) throw new BadRequestException('Agent name produces an empty slug');
+      const displayName = body.name.trim();
+      await this.lifecycle.renameAgent(user.id, agentName, slug, displayName);
+      result['renamed'] = true;
+      result['name'] = slug;
+      result['display_name'] = displayName;
     }
-    const displayName = body.name.trim();
-    await this.lifecycle.renameAgent(user.id, agentName, slug, displayName);
+
+    if (body.agent_category !== undefined || body.agent_platform !== undefined) {
+      await this.lifecycle.updateAgentType(user.id, body.name ? slugify(body.name)! : agentName, {
+        agent_category: body.agent_category,
+        agent_platform: body.agent_platform,
+      });
+      if (body.agent_category !== undefined) result['agent_category'] = body.agent_category;
+      if (body.agent_platform !== undefined) result['agent_platform'] = body.agent_platform;
+    }
+
     await this.cacheManager.del(this.agentListCacheKey(user.id));
-    return { renamed: true, name: slug, display_name: displayName };
+    return result;
   }
 
   @Delete('agents/:agentName')

packages/backend/src/analytics/controllers/agents.controller.ts

@@ -25,6 +25,36 @@ export class AgentLifecycleService {
     await this.agentRepo.delete(agent.id);
   }
 
+  private async findAgentByUser(userId: string, agentName: string) {
+    return this.agentRepo
+      .createQueryBuilder('a')
+      .leftJoin('a.tenant', 't')
+      .where('t.name = :userId', { userId })
+      .andWhere('a.name = :agentName', { agentName })
+      .getOne();
+  }
+
+  async updateAgentType(
+    userId: string,
+    agentName: string,
+    fields: { agent_category?: string; agent_platform?: string },
+  ): Promise<void> {
+    const agent = await this.findAgentByUser(userId, agentName);
+    if (!agent) throw new NotFoundException(`Agent "${agentName}" not found`);
+
+    const update: Record<string, unknown> = {};
+    if (fields.agent_category !== undefined) update['agent_category'] = fields.agent_category;
+    if (fields.agent_platform !== undefined) update['agent_platform'] = fields.agent_platform;
+    if (Object.keys(update).length === 0) return;
+
+    await this.agentRepo
+      .createQueryBuilder()
+      .update('agents')
+      .set(update)
+      .where('id = :id', { id: agent.id })
+      .execute();
+  }
+
   async renameAgent(
     userId: string,
     currentName: string,

packages/backend/src/analytics/services/agent-lifecycle.service.ts

@@ -250,6 +250,8 @@ export class TimeseriesQueriesService {
       return {
         agent_name: name,
         display_name: a.display_name ?? name,
+        agent_category: a.agent_category ?? null,
+        agent_platform: a.agent_platform ?? null,
         message_count: Number(stats?.['message_count'] ?? 0),
         last_active: String(stats?.['last_active'] ?? a.created_at ?? ''),
         total_cost: Number(stats?.['total_cost'] ?? 0),

packages/backend/src/analytics/services/timeseries-queries.service.ts

@@ -1,10 +1,31 @@
-import { IsString, IsNotEmpty, MinLength, MaxLength, Matches } from 'class-validator';
+import {
+  IsString,
+  IsNotEmpty,
+  MinLength,
+  MaxLength,
+  Matches,
+  IsOptional,
+  IsIn,
+} from 'class-validator';
+import { AGENT_CATEGORIES, AGENT_PLATFORMS } from 'manifest-shared';
 
 export class CreateAgentDto {
   @IsString()
   @IsNotEmpty()
   @MinLength(1)
   @MaxLength(100)
-  @Matches(/^[a-zA-Z0-9 _-]+$/, { message: 'Agent name must contain only letters, numbers, spaces, dashes, and underscores' })
+  @Matches(/^[a-zA-Z0-9 _-]+$/, {
+    message: 'Agent name must contain only letters, numbers, spaces, dashes, and underscores',
+  })
   name!: string;
+
+  @IsOptional()
+  @IsString()
+  @IsIn([...AGENT_CATEGORIES])
+  agent_category?: string;
+
+  @IsOptional()
+  @IsString()
+  @IsIn([...AGENT_PLATFORMS])
+  agent_platform?: string;
 }

packages/backend/src/common/dto/create-agent.dto.ts

@@ -18,10 +18,10 @@ describe('RenameAgentDto', () => {
     expect(errors.length).toBeGreaterThan(0);
   });
 
-  it('rejects missing name', async () => {
+  it('allows missing name (optional)', async () => {
     const dto = plainToInstance(RenameAgentDto, {});
     const errors = await validate(dto);
-    expect(errors.length).toBeGreaterThan(0);
+    expect(errors).toHaveLength(0);
   });
 
   it('accepts names with spaces', async () => {
@@ -41,4 +41,28 @@ describe('RenameAgentDto', () => {
     const errors = await validate(dto);
     expect(errors.length).toBeGreaterThan(0);
   });
+
+  it('accepts valid agent_category', async () => {
+    const dto = plainToInstance(RenameAgentDto, { agent_category: 'personal' });
+    const errors = await validate(dto);
+    expect(errors).toHaveLength(0);
+  });
+
+  it('rejects invalid agent_category', async () => {
+    const dto = plainToInstance(RenameAgentDto, { agent_category: 'invalid' });
+    const errors = await validate(dto);
+    expect(errors.length).toBeGreaterThan(0);
+  });
+
+  it('accepts valid agent_platform', async () => {
+    const dto = plainToInstance(RenameAgentDto, { agent_platform: 'openclaw' });
+    const errors = await validate(dto);
+    expect(errors).toHaveLength(0);
+  });
+
+  it('rejects invalid agent_platform', async () => {
+    const dto = plainToInstance(RenameAgentDto, { agent_platform: 'invalid' });
+    const errors = await validate(dto);
+    expect(errors.length).toBeGreaterThan(0);
+  });
 });

packages/backend/src/common/dto/rename-agent.dto.spec.ts

@@ -1,10 +1,32 @@
-import { IsString, IsNotEmpty, MinLength, MaxLength, Matches } from 'class-validator';
+import {
+  IsString,
+  IsNotEmpty,
+  MinLength,
+  MaxLength,
+  Matches,
+  IsOptional,
+  IsIn,
+} from 'class-validator';
+import { AGENT_CATEGORIES, AGENT_PLATFORMS } from 'manifest-shared';
 
 export class RenameAgentDto {
+  @IsOptional()
   @IsString()
   @IsNotEmpty()
   @MinLength(1)
   @MaxLength(100)
-  @Matches(/^[a-zA-Z0-9 _-]+$/, { message: 'Agent name must contain only letters, numbers, spaces, dashes, and underscores' })
-  name!: string;
+  @Matches(/^[a-zA-Z0-9 _-]+$/, {
+    message: 'Agent name must contain only letters, numbers, spaces, dashes, and underscores',
+  })
+  name?: string;
+
+  @IsOptional()
+  @IsString()
+  @IsIn([...AGENT_CATEGORIES])
+  agent_category?: string;
+
+  @IsOptional()
+  @IsString()
+  @IsIn([...AGENT_PLATFORMS])
+  agent_platform?: string;
 }

packages/backend/src/common/dto/rename-agent.dto.ts

@@ -133,6 +133,8 @@ export class DatabaseSeederService implements OnModuleInit {
       id: SEED_AGENT_ID,
       name: 'demo-agent',
       description: 'Default development agent',
+      agent_category: 'personal',
+      agent_platform: 'openclaw',
       is_active: true,
       tenant_id: SEED_TENANT_ID,
     });