updates on the ui changes and new changes as well

tests/integration/agentStudio.test.jsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import {
+  DEFAULT_SKILLS,
+  DEFAULT_TOOLS,
+  AGENTS,
+  loadStoredSkills,
+  saveStoredSkills,
+  loadStoredTools,
+  loadActiveAgentId,
+  saveActiveAgentId,
+} from '@/pages/doormile/settings/agentStudio/agentRegistryData';
+// Stub lucide-react ESM exports for Jest
+jest.mock('lucide-react', () => {
+  return new Proxy(
+    {},
+    {
+      get: (target, prop) => {
+        if (prop === '__esModule') return true;
+        return (props) => <span data-testid={`icon-${String(prop)}`} {...props} />;
+      },
+    }
+  );
+});
+
+// Stub framer-motion layout animations for jsdom
+jest.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, ...rest }) => <div {...rest}>{children}</div>,
+    span: ({ children, ...rest }) => <span {...rest}>{children}</span>,
+  },
+  AnimatePresence: ({ children }) => <>{children}</>,
+}));
+
+import SkillCard from '@/pages/doormile/settings/agentStudio/SkillCard';
+import SkillCardsGrid from '@/pages/doormile/settings/agentStudio/SkillCardsGrid';
+import ToolRegistryView from '@/pages/doormile/settings/agentStudio/ToolRegistryView';
+
+describe('Agent Studio — Data Layer & Persistence', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('pre-seeds default agents and surfaces correctly', () => {
+    expect(AGENTS.length).toBeGreaterThanOrEqual(2);
+    expect(AGENTS.some((a) => a.name === 'MileTruth AI Agent')).toBe(true);
+    expect(AGENTS.some((a) => a.name === 'MileTruth AI Dispatcher')).toBe(true);
+  });
+
+  it('pre-seeds default skills matching reference image', () => {
+    expect(DEFAULT_SKILLS.some((s) => s.title === 'MileTruth Skill Management')).toBe(true);
+    expect(DEFAULT_SKILLS.some((s) => s.title === 'Learning Analysis')).toBe(true);
+    const learningSkill = DEFAULT_SKILLS.find((s) => s.title === 'Learning Analysis');
+    expect(learningSkill.prompt).toBe('How is training progressing?');
+    expect(learningSkill.category).toBe('WORKFORCE');
+  });
+
+  it('persists modified skills to localStorage and restores them', () => {
+    const customSkill = {
+      id: 'custom-skill-1',
+      title: 'Custom Automation Skill',
+      category: 'LOGISTICS',
+      scope: 'agent',
+      enabled: true,
+      description: 'Test custom capability',
+      tools: ['create_single_order'],
+    };
+
+    saveStoredSkills([customSkill]);
+    const restored = loadStoredSkills();
+    expect(restored.length).toBe(1);
+    expect(restored[0].title).toBe('Custom Automation Skill');
+  });
+
+  it('saves and loads active agent id', () => {
+    saveActiveAgentId('miletruth-agent');
+    expect(loadActiveAgentId()).toBe('miletruth-agent');
+  });
+});
+
+describe('Agent Studio — SkillCard Component', () => {
+  const sampleSkill = {
+    id: 'test-skill-1',
+    title: 'MileTruth Skill Management',
+    category: 'AUTHORING',
+    scope: 'agent',
+    integration: 'MileTruth AI',
+    enabled: true,
+    description: 'Create workforce skills, training and verification in MileTruth AI.',
+    prompt: 'How is training progressing?',
+    tools: ['open_add_training'],
+  };
+
+  it('renders title, description, category, and prompt trigger bubble', () => {
+    render(<SkillCard skill={sampleSkill} onTest={() => {}} onDetails={() => {}} />);
+
+    expect(screen.getByText('MileTruth Skill Management')).toBeInTheDocument();
+    expect(
+      screen.getByText('Create workforce skills, training and verification in MileTruth AI.')
+    ).toBeInTheDocument();
+    expect(screen.getByText('AUTHORING')).toBeInTheDocument();
+    expect(screen.getByText('"How is training progressing?"')).toBeInTheDocument();
+    expect(screen.getByText('MileTruth AI')).toBeInTheDocument();
+  });
+
+  it('fires onTest when Test in Playground is clicked', () => {
+    const handleTest = jest.fn();
+    render(<SkillCard skill={sampleSkill} onTest={handleTest} onDetails={() => {}} />);
+
+    const testBtn = screen.getByText('Test in Playground');
+    fireEvent.click(testBtn);
+    expect(handleTest).toHaveBeenCalledWith(sampleSkill);
+  });
+
+  it('fires onDetails when Details button is clicked', () => {
+    const handleDetails = jest.fn();
+    render(<SkillCard skill={sampleSkill} onTest={() => {}} onDetails={handleDetails} />);
+
+    const detailsBtn = screen.getByText('Details');
+    fireEvent.click(detailsBtn);
+    expect(handleDetails).toHaveBeenCalledWith(sampleSkill);
+  });
+});
+
+describe('Agent Studio — SkillCardsGrid Component', () => {
+  it('renders skill cards and filters by search query', () => {
+    render(
+      <SkillCardsGrid
+        skills={DEFAULT_SKILLS}
+        activeAgent={AGENTS[0]}
+        onTestSkill={() => {}}
+        onOpenDetails={() => {}}
+        onNewSkill={() => {}}
+      />
+    );
+
+    expect(screen.getByText('MileTruth Skill Management')).toBeInTheDocument();
+    expect(screen.getByText('Learning Analysis')).toBeInTheDocument();
+
+    const searchInput = screen.getByPlaceholderText('Search skills, capabilities or pages...');
+    fireEvent.change(searchInput, { target: { value: 'Learning' } });
+
+    expect(screen.queryByText('MileTruth Skill Management')).not.toBeInTheDocument();
+    expect(screen.getByText('Learning Analysis')).toBeInTheDocument();
+  });
+
+  it('filters by category pill selection', () => {
+    render(
+      <SkillCardsGrid
+        skills={DEFAULT_SKILLS}
+        activeAgent={AGENTS[0]}
+        onTestSkill={() => {}}
+        onOpenDetails={() => {}}
+        onNewSkill={() => {}}
+      />
+    );
+
+    // Click 'Authoring' category pill
+    const authoringPill = screen.getByText('Authoring');
+    fireEvent.click(authoringPill);
+
+    expect(screen.getByText('MileTruth Skill Management')).toBeInTheDocument();
+    expect(screen.queryByText('Learning Analysis')).not.toBeInTheDocument();
+  });
+
+  it('triggers onNewSkill when clicking New skill button', () => {
+    const handleNewSkill = jest.fn();
+    render(
+      <SkillCardsGrid
+        skills={DEFAULT_SKILLS}
+        activeAgent={AGENTS[0]}
+        onTestSkill={() => {}}
+        onOpenDetails={() => {}}
+        onNewSkill={handleNewSkill}
+      />
+    );
+
+    const newSkillBtn = screen.getByText('New skill');
+    fireEvent.click(newSkillBtn);
+    expect(handleNewSkill).toHaveBeenCalled();
+  });
+});
+
+describe('Agent Studio — ToolRegistryView Component', () => {
+  it('renders tool registry table and displays argument schemas', () => {
+    render(<ToolRegistryView tools={DEFAULT_TOOLS} />);
+
+    expect(screen.getByText('open_add_skill_training')).toBeInTheDocument();
+    expect(screen.getByText('create_single_order')).toBeInTheDocument();
+    expect(screen.getByText('rebalance_riders')).toBeInTheDocument();
+  });
+
+  it('filters tool list by search input', () => {
+    render(<ToolRegistryView tools={DEFAULT_TOOLS} />);
+
+    const searchInput = screen.getByPlaceholderText(
+      'Filter tools by function name, category or description...'
+    );
+    fireEvent.change(searchInput, { target: { value: 'rebalance' } });
+
+    expect(screen.getByText('rebalance_riders')).toBeInTheDocument();
+    expect(screen.queryByText('open_add_skill_training')).not.toBeInTheDocument();
+  });
+});