@nospt/plugin-dev-ai-hub 0.1.0 → 0.2.0

package/package.json-prepack

@@ -1,10 +1,14 @@
 {
   "name": "@nospt/plugin-dev-ai-hub",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Frontend plugin for Dev AI Hub",
   "license": "Apache-2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nosportugal/backstage-plugin-dev-ai-hub"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -37,35 +41,41 @@
     "lint": "backstage-cli package lint",
     "prepack": "backstage-cli package prepack",
     "postpack": "backstage-cli package postpack",
-    "test": "backstage-cli package test --passWithNoTests",
+    "test": "backstage-cli package test --passWithNoTests --watchAll=false",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@backstage/core-components": "*",
-    "@backstage/core-plugin-api": "*",
-    "@backstage/frontend-plugin-api": "*",
+    "@backstage/core-components": "^0.18.9",
+    "@backstage/core-plugin-api": "^1.12.5",
+    "@backstage/frontend-plugin-api": "^0.16.2",
+    "@backstage/ui": "^0.14.3",
     "@mui/icons-material": "^5.15.0",
     "@mui/material": "^5.15.0",
-    "@nospt/plugin-dev-ai-hub-common": "*",
+    "@nospt/plugin-dev-ai-hub-common": "workspace:^",
+    "@remixicon/react": "^4.6.0",
     "react-markdown": "^9.0.0",
     "react-syntax-highlighter": "^16.1.1",
     "remark-gfm": "^4.0.1",
     "simple-icons": "^13.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "*",
-    "@backstage/dev-utils": "*",
-    "@backstage/test-utils": "*",
+    "@backstage/cli": "^0.36.1",
+    "@backstage/dev-utils": "^1.1.22",
+    "@playwright/test": "^1.60.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.0.0",
+    "@testing-library/react": "^16.3.1",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.0.0",
     "@types/react-syntax-highlighter": "^15.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
+    "jest": "^30.2.0",
+    "jsdom": "^27.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-router-dom": "^6.0.0"
+    "react-router-dom": "^6.30.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/src/components/AssetCard/AssetCard.module.css

@@ -0,0 +1,153 @@
+@layer components {
+  .card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--bui-radius-2);
+    border: 1px solid var(--bui-border-1);
+    border-left: 3px solid var(--card-accent);
+    background-color: var(--bui-bg-neutral-1);
+    transition: all 0.18s ease;
+  }
+
+  .card:hover {
+    box-shadow: 0 6px 24px color-mix(in srgb, var(--card-accent) 19%, transparent);
+    border-color: var(--card-accent);
+    transform: translateY(-2px);
+  }
+
+  .cardContent {
+    padding: var(--bui-space-3);
+    padding-bottom: 0;
+    flex: 1;
+  }
+
+  .header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bui-space-2);
+    margin-bottom: var(--bui-space-2);
+  }
+
+  .iconBox {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--bui-radius-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px color-mix(in srgb, var(--card-accent) 15%, transparent);
+  }
+
+  .iconImage {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+
+  .headerInfo {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .titleRow {
+    display: flex;
+    align-items: center;
+    gap: var(--bui-space-1);
+    margin-bottom: 2px;
+  }
+
+  .title {
+    line-height: 1.2;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .newBadge {
+    height: 16px;
+    flex-shrink: 0;
+    font-size: 0.58rem;
+    font-weight: 700;
+    background-color: #6AB04C;
+    color: #fff;
+  }
+
+  .description {
+    margin-bottom: var(--bui-space-2);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+  }
+
+  .toolsRow :global(.bui-TagList) {
+    display: flex;
+    gap: var(--bui-space-1);
+    flex-wrap: wrap;
+  }
+
+  .toolsRowWithTags {
+    margin-bottom: 6px;
+  }
+
+  .toolChip {
+    height: 18px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    background-color: var(--bui-bg-neutral-1-hover);
+    color: var(--bui-fg-secondary);
+  }
+
+  .tagsRow :global(.bui-TagList) {
+    display: flex;
+    gap: var(--bui-space-1);
+    flex-wrap: wrap;
+  }
+
+  .tagChip {
+    height: 16px;
+    font-size: 0.6rem;
+    color: var(--bui-fg-secondary);
+    background-color: transparent;
+    border: 1px solid var(--bui-border-1);
+  }
+
+  .cardActions {
+    padding: var(--bui-space-2) var(--bui-space-3);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: auto;
+    border-top: 1px solid var(--bui-border-1);
+  }
+
+  .metaRow {
+    display: flex;
+    align-items: center;
+    gap: var(--bui-space-2);
+  }
+
+  .metaText {
+    font-size: 0.65rem;
+  }
+
+  .installCountRow {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .installEmoji {
+    font-size: 0.65rem;
+    line-height: 1;
+  }
+
+  .actionsRow {
+    display: flex;
+    gap: 2px;
+  }
+}

package/src/components/AssetCard/AssetCard.tsx

@@ -1,20 +1,10 @@
 import type { ElementType } from 'react';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import DownloadIcon from '@mui/icons-material/Download';
-import ArticleIcon from '@mui/icons-material/Article';
-import SmartToyIcon from '@mui/icons-material/SmartToy';
-import BuildIcon from '@mui/icons-material/Build';
-import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import { Box, Flex, Text, Card, CardBody, CardFooter, Tag, TagGroup, ButtonIcon, Tooltip, TooltipTrigger } from '@backstage/ui';
+import { RiDownloadLine, RiExternalLinkLine } from '@remixicon/react';
+import { RiArticleLine, RiRobot2Line, RiToolsLine, RiGitBranchLine } from '@remixicon/react';
 import type { AiAssetSummary, AssetType, AiTool } from '@nospt/plugin-dev-ai-hub-common';
 import { ToolIcon } from '../ToolIcon';
+import styles from './AssetCard.module.css';
 
 const POPULAR_THRESHOLD = 5;
 const NEW_DAYS_MS = 14 * 24 * 60 * 60 * 1000;
@@ -28,10 +18,10 @@ const TOOL_LABELS: Record<AiTool, string> = {
 };
 
 const TYPE_CONFIG: Record<AssetType, { label: string; color: string; bg: string; Icon: ElementType }> = {
-  instruction: { label: 'Instruction', color: '#2563EB', bg: '#EFF6FF', Icon: ArticleIcon },
-  agent:       { label: 'Agent',       color: '#7C3AED', bg: '#F5F3FF', Icon: SmartToyIcon },
-  skill:       { label: 'Skill',       color: '#059669', bg: '#ECFDF5', Icon: BuildIcon },
-  workflow:    { label: 'Workflow',    color: '#D97706', bg: '#FFFBEB', Icon: AccountTreeIcon },
+  instruction: { label: 'Instruction', color: '#54A0FF', bg: 'rgba(84, 160, 255, 0.15)',   Icon: RiArticleLine },
+  agent:       { label: 'Agent',       color: '#FF6B9D', bg: 'rgba(255, 107, 157, 0.15)', Icon: RiRobot2Line },
+  skill:       { label: 'Skill',       color: '#6AB04C', bg: 'rgba(106, 176, 76, 0.15)',  Icon: RiToolsLine },
+  workflow:    { label: 'Workflow',    color: '#F9CA24', bg: 'rgba(249, 202, 36, 0.15)',  Icon: RiGitBranchLine },
 };
 
 interface AssetCardProps {
@@ -48,174 +38,115 @@ export function AssetCard({ asset, onView, onInstall }: AssetCardProps) {
 
   return (
     <Card
-      variant="outlined"
-      sx={{
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: 2,
-        border: '1px solid',
-        borderColor: 'divider',
-        borderLeft: `3px solid ${cfg.color}`,
-        transition: 'all 0.18s ease',
-        '&:hover': {
-          boxShadow: `0 6px 24px ${cfg.color}30`,
-          borderColor: cfg.color,
-          transform: 'translateY(-2px)',
-        },
-      }}
+      className={styles.card}
+      style={{ '--card-accent': cfg.color } as React.CSSProperties}
     >
-      <CardContent sx={{ p: 1.5, pb: '0 !important', flex: 1 }}>
+      <CardBody className={styles.cardContent}>
         {/* Header */}
-        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 1 }}>
+        <Flex className={styles.header}>
           <Box
-            sx={{
-              width: 36,
-              height: 36,
-              borderRadius: 1.5,
-              backgroundColor: cfg.bg,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexShrink: 0,
-              boxShadow: `0 2px 8px ${cfg.color}25`,
-            }}
+            className={styles.iconBox}
+            style={{ backgroundColor: cfg.bg }}
           >
             {asset.icon ? (
-              <Box
-                component="img"
+              <img
                 src={asset.icon}
                 alt={asset.label ?? asset.name}
-                sx={{ width: 20, height: 20, objectFit: 'contain' }}
+                className={styles.iconImage}
                 onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
               />
             ) : (
-              <TypeIcon sx={{ color: cfg.color, fontSize: '1.1rem' }} />
+              <TypeIcon size={18} style={{ color: cfg.color }} />
             )}
           </Box>
 
-          <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mb: 0.2 }}>
-              <Typography variant="body2" fontWeight={700} noWrap title={asset.label ?? asset.name} sx={{ lineHeight: 1.2, flex: 1 }}>
+          <Box className={styles.headerInfo}>
+            <Flex className={styles.titleRow}>
+              <Text variant="body-medium" weight="bold" className={styles.title} title={asset.label ?? asset.name}>
                 {asset.label ?? asset.name}
-              </Typography>
+              </Text>
               {isNew && (
-                <Chip
-                  label="New"
-                  size="small"
-                  sx={{
-                    height: 16,
-                    fontSize: '0.58rem',
-                    fontWeight: 700,
-                    backgroundColor: '#059669',
-                    color: '#fff',
-                    borderRadius: 1,
-                    flexShrink: 0,
-                    '& .MuiChip-label': { px: '5px' },
-                  }}
-                />
+                <TagGroup aria-label="Status">
+                  <Tag id="new" size="small" className={styles.newBadge}>New</Tag>
+                </TagGroup>
               )}
-            </Box>
-            <Typography variant="caption" sx={{ color: cfg.color, fontWeight: 600 }}>
+            </Flex>
+            <Text variant="body-x-small" style={{ color: cfg.color, fontWeight: 600 }}>
               {cfg.label}
-            </Typography>
+            </Text>
           </Box>
-        </Box>
+        </Flex>
 
         {/* Description */}
-        <Typography
-          variant="caption"
-          color="text.secondary"
-          sx={{
-            mb: 1,
-            display: '-webkit-box',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-            lineHeight: 1.4,
-          }}
-        >
+        <Text variant="body-x-small" color="secondary" className={styles.description}>
           {asset.description}
-        </Typography>
+        </Text>
 
         {/* Tools */}
-        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: asset.tags.length > 0 ? 0.75 : 0 }}>
+        <TagGroup aria-label="Compatible tools" className={`${styles.toolsRow} ${asset.tags.length > 0 ? styles.toolsRowWithTags : ''}`}>
           {asset.tools.map(tool => (
-            <Chip
-              key={tool}
-              icon={<ToolIcon tool={tool as AiTool} sx={{ fontSize: '0.75rem !important' }} />}
-              label={TOOL_LABELS[tool as AiTool] ?? tool}
-              size="small"
-              sx={{
-                height: 18,
-                fontSize: '0.65rem',
-                fontWeight: 600,
-                backgroundColor: 'action.hover',
-                color: 'text.secondary',
-                borderRadius: 1,
-                '& .MuiChip-icon': { ml: '4px' },
-              }}
-            />
+            <Tag key={tool} id={tool} size="small" className={styles.toolChip} icon={<ToolIcon tool={tool as AiTool} size={12} />}>
+              {TOOL_LABELS[tool as AiTool] ?? tool}
+            </Tag>
           ))}
-        </Box>
+        </TagGroup>
 
         {/* Tags */}
         {asset.tags.length > 0 && (
-          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-            {asset.tags.slice(0, 3).map(tag => (
-              <Chip
-                key={tag}
-                label={`#${tag}`}
-                size="small"
-                sx={{
-                  height: 16,
-                  fontSize: '0.6rem',
-                  color: 'text.disabled',
-                  backgroundColor: 'transparent',
-                  border: '1px solid',
-                  borderColor: 'divider',
-                  borderRadius: 1,
-                }}
-              />
-            ))}
+          <>
+            <TagGroup aria-label="Tags" className={styles.tagsRow}>
+              {asset.tags.slice(0, 3).map(tag => (
+                <Tag key={tag} id={tag} size="small" className={styles.tagChip}>
+                  #{tag}
+                </Tag>
+              ))}
+            </TagGroup>
             {asset.tags.length > 3 && (
-              <Typography variant="caption" color="text.disabled" sx={{ alignSelf: 'center' }}>
+              <Text variant="body-x-small" color="secondary" style={{ alignSelf: 'center' }}>
                 +{asset.tags.length - 3}
-              </Typography>
+              </Text>
             )}
-          </Box>
+          </>
         )}
-      </CardContent>
+      </CardBody>
 
-      <CardActions sx={{ px: 1.5, py: 1, justifyContent: 'space-between', mt: 'auto', borderTop: '1px solid', borderColor: 'divider' }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="caption" color="text.disabled" sx={{ fontSize: '0.65rem' }}>
+      <CardFooter className={styles.cardActions}>
+        <Flex className={styles.metaRow}>
+          <Text variant="body-x-small" color="secondary" className={styles.metaText}>
             v{asset.version} · {asset.author}
-          </Typography>
+          </Text>
           {asset.installCount > 0 && (
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25 }}>
-              <Typography sx={{ fontSize: '0.65rem', lineHeight: 1 }}>
+            <Flex className={styles.installCountRow}>
+              <Text className={styles.installEmoji}>
                 {isPopular ? '🔥' : '↓'}
-              </Typography>
-              <Typography variant="caption" color="text.disabled" sx={{ fontSize: '0.65rem' }}>
+              </Text>
+              <Text variant="body-x-small" color="secondary" className={styles.metaText}>
                 {asset.installCount}
-              </Typography>
-            </Box>
+              </Text>
+            </Flex>
           )}
-        </Box>
-        <Box sx={{ display: 'flex', gap: 0.25 }}>
-          <Tooltip title="Install in editor">
-            <IconButton size="small" onClick={() => onInstall(asset.id)} color="primary">
-              <DownloadIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="View details">
-            <IconButton size="small" onClick={() => onView(asset.id)}>
-              <OpenInNewIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-        </Box>
-      </CardActions>
+        </Flex>
+        <Flex className={styles.actionsRow}>
+          <TooltipTrigger>
+            <ButtonIcon
+              aria-label="Install in editor"
+              icon={<RiDownloadLine size={16} />}
+              variant="tertiary"
+              onPress={() => onInstall(asset.id)}
+            />
+            <Tooltip>Install in editor</Tooltip>
+          </TooltipTrigger>
+          <TooltipTrigger>
+            <ButtonIcon
+              aria-label="View details"
+              icon={<RiExternalLinkLine size={16} />}
+              variant="tertiary"
+              onPress={() => onView(asset.id)}
+            />
+            <Tooltip>View details</Tooltip>
+          </TooltipTrigger>
+        </Flex>
+      </CardFooter>
     </Card>
   );
 }