@nospt/plugin-dev-ai-hub 0.2.3 → 0.3.0

package/src/api/DevAiHubClient.ts

@@ -1,110 +0,0 @@
-import {
-  createApiRef,
-  DiscoveryApi,
-  FetchApi,
-} from '@backstage/core-plugin-api';
-import type {
-  AiAsset,
-  AiAssetListResponse,
-  AiHubProvider,
-  AiHubStats,
-  AssetListFilter,
-} from '@nospt/plugin-dev-ai-hub-common';
-
-export const devAiHubApiRef = createApiRef<DevAiHubApi>({
-  id: 'plugin.dev-ai-hub.service',
-});
-
-export interface DevAiHubApi {
-  listAssets(filter?: AssetListFilter): Promise<AiAssetListResponse>;
-  getAsset(id: string): Promise<AiAsset>;
-  getAssetRaw(id: string): Promise<string>;
-  /** Returns the absolute URL for the download endpoint (zip for skills, md for others). */
-  getDownloadUrl(id: string): Promise<string>;
-  trackInstall(id: string): Promise<void>;
-  listProviders(): Promise<AiHubProvider[]>;
-  getProviderStatus(id: string): Promise<AiHubProvider>;
-  triggerSync(id: string): Promise<void>;
-  getStats(): Promise<AiHubStats>;
-}
-
-export class DevAiHubClient implements DevAiHubApi {
-  constructor(
-    private readonly discoveryApi: DiscoveryApi,
-    private readonly fetchApi: FetchApi,
-  ) {}
-
-  private async baseUrl(): Promise<string> {
-    return this.discoveryApi.getBaseUrl('dev-ai-hub');
-  }
-
-  private async fetch<T>(path: string, init?: RequestInit): Promise<T> {
-    const base = await this.baseUrl();
-    const response = await this.fetchApi.fetch(`${base}${path}`, init);
-    if (!response.ok) {
-      const text = await response.text();
-      throw new Error(
-        `Dev AI Hub API error ${response.status}: ${text}`,
-      );
-    }
-    return response.json() as Promise<T>;
-  }
-
-  async listAssets(filter?: AssetListFilter): Promise<AiAssetListResponse> {
-    const params = new URLSearchParams();
-    if (filter?.type) params.set('type', filter.type);
-    if (filter?.tool) params.set('tool', filter.tool);
-    if (filter?.search) params.set('search', filter.search);
-    if (filter?.providerId) params.set('provider', filter.providerId);
-    if (filter?.tags?.length) params.set('tags', filter.tags.join(','));
-    if (filter?.page) params.set('page', String(filter.page));
-    if (filter?.pageSize) params.set('pageSize', String(filter.pageSize));
-
-    const qs = params.toString();
-    return this.fetch<AiAssetListResponse>(`/assets${qs ? `?${qs}` : ''}`);
-  }
-
-  async getAsset(id: string): Promise<AiAsset> {
-    return this.fetch<AiAsset>(`/assets/${encodeURIComponent(id)}`);
-  }
-
-  async getAssetRaw(id: string): Promise<string> {
-    const base = await this.baseUrl();
-    const response = await this.fetchApi.fetch(
-      `${base}/assets/${encodeURIComponent(id)}/raw`,
-    );
-    if (!response.ok) throw new Error(`Failed to fetch raw asset: ${response.status}`);
-    return response.text();
-  }
-
-  async getDownloadUrl(id: string): Promise<string> {
-    const base = await this.baseUrl();
-    return `${base}/assets/${encodeURIComponent(id)}/download`;
-  }
-
-  async trackInstall(id: string): Promise<void> {
-    await this.fetch(`/assets/${encodeURIComponent(id)}/track-install`, {
-      method: 'POST',
-    });
-  }
-
-  async listProviders(): Promise<AiHubProvider[]> {
-    return this.fetch<AiHubProvider[]>('/providers');
-  }
-
-  async getProviderStatus(id: string): Promise<AiHubProvider> {
-    return this.fetch<AiHubProvider>(
-      `/providers/${encodeURIComponent(id)}/status`,
-    );
-  }
-
-  async triggerSync(id: string): Promise<void> {
-    await this.fetch(`/providers/${encodeURIComponent(id)}/sync`, {
-      method: 'POST',
-    });
-  }
-
-  async getStats(): Promise<AiHubStats> {
-    return this.fetch<AiHubStats>('/stats');
-  }
-}

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

@@ -1,153 +0,0 @@
-@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.test.tsx

@@ -1,182 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { AssetCard } from './AssetCard';
-import type { AiAssetSummary } from '@nospt/plugin-dev-ai-hub-common';
-
-jest.mock('../ToolIcon', () => ({
-  ToolIcon: ({ tool }: { tool: string }) => <span data-testid={`tool-icon-${tool}`} />,
-}));
-
-const NOW = new Date('2026-03-14T12:00:00Z').getTime();
-
-function makeAsset(overrides?: Partial<AiAssetSummary>): AiAssetSummary {
-  return {
-    id: 'asset-1',
-    providerId: 'provider-1',
-    name: 'My Instruction',
-    description: 'A helpful coding instruction',
-    type: 'instruction',
-    tools: ['claude-code'],
-    tags: ['python', 'linting'],
-    author: 'Test Author',
-    version: '1.0.0',
-    installCount: 0,
-    syncedAt: '2026-03-14T12:00:00Z',
-    createdAt: '2026-03-01T00:00:00Z',
-    updatedAt: '2026-03-13T00:00:00Z', // 1 day ago — "New"
-    ...overrides,
-  };
-}
-
-describe('AssetCard', () => {
-  beforeEach(() => {
-    jest.spyOn(Date, 'now').mockReturnValue(NOW);
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('renders asset name and description', () => {
-    render(<AssetCard asset={makeAsset()} onView={jest.fn()} onInstall={jest.fn()} />);
-    expect(screen.getByText('My Instruction')).toBeInTheDocument();
-    expect(screen.getByText('A helpful coding instruction')).toBeInTheDocument();
-  });
-
-  it('renders the type label', () => {
-    render(<AssetCard asset={makeAsset({ type: 'instruction' })} onView={jest.fn()} onInstall={jest.fn()} />);
-    expect(screen.getByText('Instruction')).toBeInTheDocument();
-  });
-
-  it('renders the correct type label for each type', () => {
-    const types = ['agent', 'skill', 'workflow'] as const;
-    const labels = ['Agent', 'Skill', 'Workflow'];
-
-    types.forEach((type, i) => {
-      const { unmount } = render(
-        <AssetCard asset={makeAsset({ type })} onView={jest.fn()} onInstall={jest.fn()} />,
-      );
-      expect(screen.getByText(labels[i])).toBeInTheDocument();
-      unmount();
-    });
-  });
-
-  it('renders author and version in the footer', () => {
-    render(<AssetCard asset={makeAsset()} onView={jest.fn()} onInstall={jest.fn()} />);
-    expect(screen.getByText(/v1\.0\.0/)).toBeInTheDocument();
-    expect(screen.getByText(/Test Author/)).toBeInTheDocument();
-  });
-
-  describe('"New" badge', () => {
-    it('shows "New" badge when updatedAt is within 14 days', () => {
-      const recentDate = new Date(NOW - 5 * 24 * 60 * 60 * 1000).toISOString(); // 5 days ago
-      render(
-        <AssetCard asset={makeAsset({ updatedAt: recentDate })} onView={jest.fn()} onInstall={jest.fn()} />,
-      );
-      expect(screen.getByText('New')).toBeInTheDocument();
-    });
-
-    it('does not show "New" badge when updatedAt is older than 14 days', () => {
-      const oldDate = new Date(NOW - 20 * 24 * 60 * 60 * 1000).toISOString(); // 20 days ago
-      render(
-        <AssetCard asset={makeAsset({ updatedAt: oldDate })} onView={jest.fn()} onInstall={jest.fn()} />,
-      );
-      expect(screen.queryByText('New')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('install count display', () => {
-    it('does not show install count when installCount is 0', () => {
-      render(<AssetCard asset={makeAsset({ installCount: 0 })} onView={jest.fn()} onInstall={jest.fn()} />);
-      expect(screen.queryByText('↓')).not.toBeInTheDocument();
-      expect(screen.queryByText('🔥')).not.toBeInTheDocument();
-    });
-
-    it('shows "↓" arrow with count when installCount > 0 and < 5', () => {
-      render(<AssetCard asset={makeAsset({ installCount: 3 })} onView={jest.fn()} onInstall={jest.fn()} />);
-      expect(screen.getByText('↓')).toBeInTheDocument();
-      expect(screen.getByText('3')).toBeInTheDocument();
-    });
-
-    it('shows 🔥 emoji when installCount >= 5 (popular threshold)', () => {
-      render(<AssetCard asset={makeAsset({ installCount: 5 })} onView={jest.fn()} onInstall={jest.fn()} />);
-      expect(screen.getByText('🔥')).toBeInTheDocument();
-      expect(screen.getByText('5')).toBeInTheDocument();
-    });
-
-    it('shows 🔥 emoji for installCount > 5', () => {
-      render(<AssetCard asset={makeAsset({ installCount: 42 })} onView={jest.fn()} onInstall={jest.fn()} />);
-      expect(screen.getByText('🔥')).toBeInTheDocument();
-      expect(screen.queryByText('↓')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('callbacks', () => {
-    it('calls onView with the asset id when "View details" button is clicked', () => {
-      const onView = jest.fn();
-      render(<AssetCard asset={makeAsset()} onView={onView} onInstall={jest.fn()} />);
-      fireEvent.click(screen.getByRole('button', { name: 'View details' }));
-      expect(onView).toHaveBeenCalledTimes(1);
-      expect(onView).toHaveBeenCalledWith('asset-1');
-    });
-
-    it('calls onInstall with the asset id when "Install in editor" button is clicked', () => {
-      const onInstall = jest.fn();
-      render(<AssetCard asset={makeAsset()} onView={jest.fn()} onInstall={onInstall} />);
-      fireEvent.click(screen.getByRole('button', { name: 'Install in editor' }));
-      expect(onInstall).toHaveBeenCalledTimes(1);
-      expect(onInstall).toHaveBeenCalledWith('asset-1');
-    });
-  });
-
-  describe('tags', () => {
-    it('renders tags as chips prefixed with #', () => {
-      render(
-        <AssetCard asset={makeAsset({ tags: ['python', 'linting'] })} onView={jest.fn()} onInstall={jest.fn()} />,
-      );
-      expect(screen.getByText('#python')).toBeInTheDocument();
-      expect(screen.getByText('#linting')).toBeInTheDocument();
-    });
-
-    it('renders at most 3 tags and shows "+N" for the rest', () => {
-      render(
-        <AssetCard
-          asset={makeAsset({ tags: ['a', 'b', 'c', 'd', 'e'] })}
-          onView={jest.fn()}
-          onInstall={jest.fn()}
-        />,
-      );
-      expect(screen.getByText('#a')).toBeInTheDocument();
-      expect(screen.getByText('#b')).toBeInTheDocument();
-      expect(screen.getByText('#c')).toBeInTheDocument();
-      expect(screen.queryByText('#d')).not.toBeInTheDocument();
-      expect(screen.getByText('+2')).toBeInTheDocument();
-    });
-
-    it('renders no tags section when tags is empty', () => {
-      render(<AssetCard asset={makeAsset({ tags: [] })} onView={jest.fn()} onInstall={jest.fn()} />);
-      expect(screen.queryByText(/#/)).not.toBeInTheDocument();
-    });
-  });
-
-  describe('tools', () => {
-    it('renders a tool icon for each tool', () => {
-      render(
-        <AssetCard
-          asset={makeAsset({ tools: ['claude-code', 'github-copilot'] })}
-          onView={jest.fn()}
-          onInstall={jest.fn()}
-        />,
-      );
-      expect(screen.getByTestId('tool-icon-claude-code')).toBeInTheDocument();
-      expect(screen.getByTestId('tool-icon-github-copilot')).toBeInTheDocument();
-    });
-
-    it('shows "Universal" label for the "all" tool', () => {
-      render(
-        <AssetCard asset={makeAsset({ tools: ['all'] })} onView={jest.fn()} onInstall={jest.fn()} />,
-      );
-      expect(screen.getByText('Universal')).toBeInTheDocument();
-    });
-  });
-});

package/src/components/AssetCard/AssetCard.tsx

@@ -1,152 +0,0 @@
-import type { ElementType } from 'react';
-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;
-
-const TOOL_LABELS: Record<AiTool, string> = {
-  'all':            'Universal',
-  'claude-code':    'Claude Code',
-  'github-copilot': 'GitHub Copilot',
-  'google-gemini':  'Google Gemini',
-  'cursor':         'Cursor',
-};
-
-const TYPE_CONFIG: Record<AssetType, { label: string; color: string; bg: string; Icon: ElementType }> = {
-  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 {
-  asset: AiAssetSummary;
-  onView: (id: string) => void;
-  onInstall: (id: string) => void;
-}
-
-export function AssetCard({ asset, onView, onInstall }: AssetCardProps) {
-  const cfg = TYPE_CONFIG[asset.type];
-  const TypeIcon = cfg.Icon;
-  const isPopular = asset.installCount >= POPULAR_THRESHOLD;
-  const isNew = Date.now() - new Date(asset.updatedAt).getTime() < NEW_DAYS_MS;
-
-  return (
-    <Card
-      className={styles.card}
-      style={{ '--card-accent': cfg.color } as React.CSSProperties}
-    >
-      <CardBody className={styles.cardContent}>
-        {/* Header */}
-        <Flex className={styles.header}>
-          <Box
-            className={styles.iconBox}
-            style={{ backgroundColor: cfg.bg }}
-          >
-            {asset.icon ? (
-              <img
-                src={asset.icon}
-                alt={asset.label ?? asset.name}
-                className={styles.iconImage}
-                onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
-              />
-            ) : (
-              <TypeIcon size={18} style={{ color: cfg.color }} />
-            )}
-          </Box>
-
-          <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}
-              </Text>
-              {isNew && (
-                <TagGroup aria-label="Status">
-                  <Tag id="new" size="small" className={styles.newBadge}>New</Tag>
-                </TagGroup>
-              )}
-            </Flex>
-            <Text variant="body-x-small" style={{ color: cfg.color, fontWeight: 600 }}>
-              {cfg.label}
-            </Text>
-          </Box>
-        </Flex>
-
-        {/* Description */}
-        <Text variant="body-x-small" color="secondary" className={styles.description}>
-          {asset.description}
-        </Text>
-
-        {/* Tools */}
-        <TagGroup aria-label="Compatible tools" className={`${styles.toolsRow} ${asset.tags.length > 0 ? styles.toolsRowWithTags : ''}`}>
-          {asset.tools.map(tool => (
-            <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>
-          ))}
-        </TagGroup>
-
-        {/* Tags */}
-        {asset.tags.length > 0 && (
-          <>
-            <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 && (
-              <Text variant="body-x-small" color="secondary" style={{ alignSelf: 'center' }}>
-                +{asset.tags.length - 3}
-              </Text>
-            )}
-          </>
-        )}
-      </CardBody>
-
-      <CardFooter className={styles.cardActions}>
-        <Flex className={styles.metaRow}>
-          <Text variant="body-x-small" color="secondary" className={styles.metaText}>
-            v{asset.version} · {asset.author}
-          </Text>
-          {asset.installCount > 0 && (
-            <Flex className={styles.installCountRow}>
-              <Text className={styles.installEmoji}>
-                {isPopular ? '🔥' : '↓'}
-              </Text>
-              <Text variant="body-x-small" color="secondary" className={styles.metaText}>
-                {asset.installCount}
-              </Text>
-            </Flex>
-          )}
-        </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>
-  );
-}

package/src/components/AssetCard/index.ts

@@ -1 +0,0 @@
-export { AssetCard } from './AssetCard';