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

package/src/components/AssetFilters/AssetFilters.tsx

@@ -1,219 +0,0 @@
-import type { ElementType } from 'react';
-import { Box, Flex, Text, SearchField, ToggleButton, ToggleButtonGroup } from '@backstage/ui';
-import { RiAppsLine, RiArticleLine, RiRobot2Line, RiToolsLine, RiGitBranchLine, RiDatabase2Line } from '@remixicon/react';
-import type { AssetType, AiTool, AiHubProvider } from '@nospt/plugin-dev-ai-hub-common';
-import { ToolIcon } from '../ToolIcon';
-import styles from './AssetFilters.module.css';
-
-const ASSET_TYPES: { value: AssetType | 'all'; label: string; color: string; Icon: ElementType }[] = [
-  { value: 'all',         label: 'All',          color: '#DCDDE1', Icon: RiAppsLine },
-  { value: 'instruction', label: 'Instructions', color: '#54A0FF', Icon: RiArticleLine },
-  { value: 'agent',       label: 'Agents',       color: '#FF6B9D', Icon: RiRobot2Line },
-  { value: 'skill',       label: 'Skills',       color: '#6AB04C', Icon: RiToolsLine },
-  { value: 'workflow',    label: 'Workflows',    color: '#F9CA24', Icon: RiGitBranchLine },
-];
-
-const AI_TOOLS: { value: AiTool | 'all'; label: string }[] = [
-  { value: 'all', label: 'All Tools' },
-  { value: 'claude-code', label: 'Claude Code' },
-  { value: 'github-copilot', label: 'GitHub Copilot' },
-  { value: 'google-gemini', label: 'Google Gemini' },
-  { value: 'cursor', label: 'Cursor' },
-];
-
-export interface AssetFiltersValue {
-  types: AssetType[];
-  tools: AiTool[];
-  search: string;
-  tags: string[];
-  providerId?: string;
-}
-
-interface AssetFiltersProps {
-  value: AssetFiltersValue;
-  onChange: (value: AssetFiltersValue) => void;
-  availableTags?: string[];
-  providers?: AiHubProvider[];
-}
-
-export function AssetFilters({ value, onChange, availableTags = [], providers }: AssetFiltersProps) {
-  const selectedType = value.types.length === 1 ? value.types[0] : 'all';
-  const selectedTool = value.tools.length === 1 ? value.tools[0] : 'all';
-  const showProviderFilter = providers && providers.length > 1;
-
-  const handleTypeClick = (type: AssetType | 'all') => {
-    onChange({ ...value, types: type === 'all' ? [] : [type] });
-  };
-
-  const handleToolClick = (tool: AiTool | 'all') => {
-    onChange({ ...value, tools: tool === 'all' ? [] : [tool] });
-  };
-
-  const handleTagToggle = (tag: string) => {
-    const next = value.tags.includes(tag)
-      ? value.tags.filter(t => t !== tag)
-      : [...value.tags, tag];
-    onChange({ ...value, tags: next });
-  };
-
-  const handleProviderClick = (id: string | undefined) => {
-    onChange({ ...value, providerId: id });
-  };
-
-  return (
-    <Flex className={styles.container}>
-      <SearchField
-        aria-label="Search assets"
-        className={styles.searchField}
-        placeholder="Search assets by name, description or content…"
-        value={value.search}
-        onChange={v => onChange({ ...value, search: v })}
-      />
-
-      <Flex className={styles.filtersRow}>
-        {/* Type filter */}
-        <Box>
-          <Text variant="body-x-small" color="secondary" className={styles.filterLabel}>
-            Type
-          </Text>
-          <Flex className={styles.filterChips}>
-              {ASSET_TYPES.map(t => {
-                const isSelected = selectedType === t.value;
-                const TypeIcon = t.Icon;
-                return (
-                  <ToggleButton
-                    key={t.value}
-                    id={t.value}
-                    size="small"
-                    className={`${styles.filterChip} ${isSelected ? styles.filterChipSelected : ''}`}
-                    iconStart={<TypeIcon size={14} style={{ color: isSelected ? '#fff' : t.color }} />}
-                    isSelected={isSelected}
-                    onChange={() => handleTypeClick(t.value as AssetType | 'all')}
-                    style={{
-                      borderColor: isSelected ? t.color : `${t.color}30`,
-                      backgroundColor: isSelected ? t.color : `${t.color}10`,
-                      color: isSelected ? '#fff' : t.color,
-                    }}
-                  >
-                    {t.label}
-                  </ToggleButton>
-                );
-              })}
-            </Flex>
-        </Box>
-
-        {/* AI Tool filter */}
-        <Box>
-          <Text variant="body-x-small" color="secondary" className={styles.filterLabel}>
-            AI Tool
-          </Text>
-          <Flex className={styles.filterChips}>
-              {AI_TOOLS.map(t => {
-                const isSelected = selectedTool === t.value;
-                const iconEl = t.value !== 'all'
-                  ? <ToolIcon tool={t.value as AiTool} branded size={14} />
-                  : undefined;
-                return (
-                  <ToggleButton
-                    key={t.value}
-                    id={t.value}
-                    size="small"
-                    className={`${styles.filterChip} ${isSelected ? styles.toolChipSelected : ''}`}
-                    iconStart={iconEl}
-                    isSelected={isSelected}
-                    onChange={() => handleToolClick(t.value as AiTool | 'all')}
-                    style={{
-                      borderColor: isSelected ? 'var(--bui-fg-link)' : 'var(--bui-border-1)',
-                      backgroundColor: isSelected ? 'var(--bui-bg-accent-1)' : 'transparent',
-                      color: isSelected ? 'var(--bui-fg-link)' : 'var(--bui-fg-secondary)',
-                    }}
-                  >
-                    {t.label}
-                  </ToggleButton>
-                );
-              })}
-            </Flex>
-        </Box>
-
-        {/* Provider filter — only shown when there are 2+ providers */}
-        {showProviderFilter && (
-          <Box>
-            <Text variant="body-x-small" color="secondary" className={styles.filterLabel}>
-              Provider
-            </Text>
-            <Flex className={styles.filterChips}>
-                <ToggleButton
-                  id="all-providers"
-                  size="small"
-                  className={`${styles.filterChip} ${!value.providerId ? styles.filterChipSelected : ''}`}
-                  iconStart={<RiAppsLine size={14} />}
-                  isSelected={!value.providerId}
-                  onChange={() => handleProviderClick(undefined)}
-                  style={{
-                    borderColor: !value.providerId ? 'var(--bui-fg-primary)' : 'var(--bui-border-1)',
-                    backgroundColor: !value.providerId ? 'var(--bui-fg-primary)' : 'transparent',
-                    color: !value.providerId ? 'var(--bui-bg-neutral-1)' : 'var(--bui-fg-secondary)',
-                  }}
-                >
-                  All
-                </ToggleButton>
-                {providers.map(p => {
-                  const isSelected = value.providerId === p.id;
-                  const label = p.target.split('/').slice(-1)[0]?.replace(/\.git$/, '') ?? p.id;
-                  return (
-                    <ToggleButton
-                      key={p.id}
-                      id={p.id}
-                      size="small"
-                      className={`${styles.filterChip} ${isSelected ? styles.filterChipSelected : ''}`}
-                      iconStart={<RiDatabase2Line size={14} style={{ color: isSelected ? 'var(--bui-bg-neutral-1)' : 'inherit' }} />}
-                      isSelected={isSelected}
-                      onChange={() => handleProviderClick(isSelected ? undefined : p.id)}
-                      style={{
-                        borderColor: isSelected ? 'var(--bui-fg-primary)' : 'var(--bui-border-1)',
-                        backgroundColor: isSelected ? 'var(--bui-fg-primary)' : 'transparent',
-                        color: isSelected ? 'var(--bui-bg-neutral-1)' : 'var(--bui-fg-secondary)',
-                      }}
-                    >
-                      {label}
-                    </ToggleButton>
-                  );
-                })}
-              </Flex>
-          </Box>
-        )}
-      </Flex>
-
-      {availableTags.length > 0 && (
-        <Box>
-          <Text variant="body-x-small" color="secondary" className={styles.filterLabel}>
-            Tags
-          </Text>
-          <Flex className={styles.filterChips}>
-              {availableTags.map(tag => {
-                const isActive = value.tags.includes(tag);
-                return (
-                  <ToggleButton
-                    key={tag}
-                    id={tag}
-                    size="small"
-                    className={`${styles.tagChip} ${isActive ? styles.tagChipSelected : ''}`}
-                    isSelected={isActive}
-                    onChange={() => handleTagToggle(tag)}
-                    style={{
-                      fontWeight: isActive ? 700 : 400,
-                      backgroundColor: isActive ? 'var(--bui-bg-solid)' : 'transparent',
-                      color: isActive ? '#fff' : 'var(--bui-fg-secondary)',
-                      borderColor: isActive ? 'var(--bui-bg-solid)' : 'var(--bui-border-1)',
-                    }}
-                  >
-                    #{tag}
-                  </ToggleButton>
-                );
-              })}
-            </Flex>
-        </Box>
-      )}
-    </Flex>
-  );
-}

package/src/components/AssetFilters/index.ts

@@ -1,2 +0,0 @@
-export { AssetFilters } from './AssetFilters';
-export type { AssetFiltersValue } from './AssetFilters';

package/src/components/AssetInstallDialog/AssetInstallDialog.module.css

@@ -1,72 +0,0 @@
-@layer components {
-  .subtitle {
-    margin-top: var(--bui-space-1);
-    font-weight: 400;
-  }
-
-  .loadingContainer {
-    display: flex;
-    justify-content: center;
-    padding: var(--bui-space-6) 0;
-  }
-
-  .zipInfo {
-    border: 1px solid #00D2D3;
-    border-radius: var(--bui-radius-2);
-    padding: var(--bui-space-3);
-    background-color: color-mix(in srgb, #00D2D3 7%, transparent);
-  }
-
-  .zipHeader {
-    display: flex;
-    align-items: center;
-    gap: var(--bui-space-2);
-    margin-bottom: var(--bui-space-2);
-  }
-
-  .zipFiles {
-    display: flex;
-    gap: var(--bui-space-1);
-    flex-wrap: wrap;
-  }
-
-  .monoTag {
-    font-family: monospace;
-    font-size: 0.7rem;
-    height: 20px;
-  }
-
-  .toolSection {
-    border: 1px solid var(--bui-border-1);
-    border-radius: var(--bui-radius-2);
-    padding: var(--bui-space-3);
-  }
-
-  .toolHeader {
-    display: flex;
-    align-items: center;
-    gap: var(--bui-space-2);
-    margin-bottom: var(--bui-space-2);
-  }
-
-  .installPathBox {
-    background-color: var(--bui-bg-neutral-1-hover);
-    border: 1px solid var(--bui-border-1);
-    border-radius: var(--bui-radius-2);
-    padding: var(--bui-space-2) var(--bui-space-3);
-    font-family: monospace;
-    font-size: 0.78rem;
-    color: var(--bui-fg-primary);
-    word-break: break-all;
-    margin-bottom: 10px;
-  }
-
-  .toolActions {
-    display: flex;
-    gap: var(--bui-space-2);
-  }
-
-  .toolActions > * {
-    flex: 1;
-  }
-}

package/src/components/AssetInstallDialog/AssetInstallDialog.tsx

@@ -1,176 +0,0 @@
-import { useState } from 'react';
-import {
-  Box, Flex, Text, Button, Tag, TagGroup, Skeleton,
-  Dialog, DialogTrigger, DialogHeader, DialogBody, DialogFooter,
-  Tooltip, TooltipTrigger,
-} from '@backstage/ui';
-import { RiFileCopyLine, RiDownloadLine, RiCheckLine, RiFolderZipLine } from '@remixicon/react';
-import type { AiTool } from '@nospt/plugin-dev-ai-hub-common';
-import { getInstallPathsForAsset } from '@nospt/plugin-dev-ai-hub-common';
-import { useApi } from '@backstage/core-plugin-api';
-import { devAiHubApiRef } from '../../api/DevAiHubClient';
-import { useAssetDetail } from '../../hooks';
-import { ToolIcon } from '../ToolIcon';
-import styles from './AssetInstallDialog.module.css';
-
-const TOOL_LABELS: Record<string, string> = {
-  'claude-code':    'Claude Code',
-  'github-copilot': 'GitHub Copilot',
-  'google-gemini':  'Google Gemini',
-  'cursor':         'Cursor',
-};
-
-interface AssetInstallDialogProps {
-  assetId: string | null;
-  onClose: () => void;
-}
-
-export function AssetInstallDialog({ assetId, onClose }: AssetInstallDialogProps) {
-  const [copiedTool, setCopiedTool] = useState<string | null>(null);
-  const api = useApi(devAiHubApiRef);
-  const { asset, loading } = useAssetDetail(assetId);
-
-  const handleClose = () => {
-    onClose();
-    setCopiedTool(null);
-  };
-
-  const handleCopy = (tool: string) => {
-    if (!asset) return;
-    navigator.clipboard.writeText(asset.content).then(() => {
-      setCopiedTool(tool);
-      setTimeout(() => setCopiedTool(null), 2000);
-    });
-    api.trackInstall(asset.id).catch(() => {});
-  };
-
-  const resourcePaths = asset?.resourcesContent
-    ? Object.keys(asset.resourcesContent)
-    : [];
-  const isZipSkill = asset?.type === 'skill' && resourcePaths.length > 0;
-
-  const handleDownload = async (_tool: string, installPath: string) => {
-    if (!asset) return;
-    if (isZipSkill) {
-      const url = await api.getDownloadUrl(asset.id);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `${asset.name.replace(/\s+/g, '-').toLowerCase()}.zip`;
-      a.click();
-    } else {
-      const filename = installPath.split('/').pop() ?? `${asset.name}.md`;
-      const blob = new Blob([asset.content], { type: 'text/markdown' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      a.click();
-      URL.revokeObjectURL(url);
-    }
-    api.trackInstall(asset.id).catch(() => {});
-  };
-
-  const installPaths = asset
-    ? getInstallPathsForAsset(asset.type, asset.tools, asset.name, {
-        installPath: asset.installPath,
-        installPaths: asset.installPaths,
-      })
-    : {};
-
-  return (
-    <DialogTrigger>
-      <Dialog
-        isOpen={!!assetId}
-        isDismissable
-        onOpenChange={open => { if (!open) handleClose(); }}
-      >
-        <DialogHeader>
-          {asset ? `Install: ${asset.name}` : 'Install'}
-          <Text variant="body-small" color="secondary" className={styles.subtitle}>
-            Copy the content and place the file at the path shown for your tool.
-          </Text>
-        </DialogHeader>
-
-        <DialogBody>
-          <Flex direction="column" style={{ gap: 'var(--bui-space-3)' }}>
-            {loading && (
-              <Flex className={styles.loadingContainer}>
-                <Skeleton style={{ width: '100%', height: 80 }} />
-              </Flex>
-            )}
-
-            {!loading && asset && isZipSkill && (
-              <Box className={styles.zipInfo}>
-                <Flex className={styles.zipHeader}>
-                  <RiFolderZipLine size={16} style={{ color: 'var(--bui-fg-info)' }} />
-                  <Text variant="body-small" weight="bold" style={{ color: 'var(--bui-fg-info)' }}>
-                    Bundled skill — downloads as .zip
-                  </Text>
-                </Flex>
-                <Text variant="body-x-small" color="secondary" style={{ display: 'block', marginBottom: 'var(--bui-space-2)' }}>
-                  This skill includes resource files alongside <code>SKILL.md</code>.
-                  Extract the zip and place all files in the skill directory.
-                </Text>
-                <TagGroup aria-label="Bundled files">
-                  <Flex className={styles.zipFiles}>
-                    <Tag id="skill-md" size="small" className={styles.monoTag}>SKILL.md</Tag>
-                    {resourcePaths.map(p => (
-                      <Tag key={p} id={p} size="small" className={styles.monoTag}>{p}</Tag>
-                    ))}
-                  </Flex>
-                </TagGroup>
-              </Box>
-            )}
-
-            {!loading && asset && Object.entries(installPaths).map(([tool, installPath]) => (
-              <Box key={tool} className={styles.toolSection}>
-                <Flex className={styles.toolHeader}>
-                  <ToolIcon tool={tool as AiTool} size={16} />
-                  <Text variant="body-small" weight="bold">
-                    {TOOL_LABELS[tool] ?? tool}
-                  </Text>
-                </Flex>
-
-                <Text variant="body-x-small" color="secondary" style={{ display: 'block', marginBottom: 'var(--bui-space-1)' }}>
-                  Install path
-                </Text>
-                <Box className={styles.installPathBox}>
-                  {installPath}
-                </Box>
-
-                <Flex className={styles.toolActions}>
-                  <TooltipTrigger>
-                    <Button
-                      variant="secondary"
-                      onClick={() => handleCopy(tool)}
-                    >
-                      {copiedTool === tool ? <RiCheckLine size={14} /> : <RiFileCopyLine size={14} />}
-                      {copiedTool === tool ? 'Copied!' : 'Copy Content'}
-                    </Button>
-                    <Tooltip>{copiedTool === tool ? 'Copied!' : 'Copy markdown content'}</Tooltip>
-                  </TooltipTrigger>
-                  <TooltipTrigger>
-                    <Button
-                      variant="secondary"
-                      onClick={() => handleDownload(tool, installPath)}
-                    >
-                      {isZipSkill ? <RiFolderZipLine size={14} /> : <RiDownloadLine size={14} />}
-                      {isZipSkill ? 'Download .zip' : 'Download'}
-                    </Button>
-                    <Tooltip>{isZipSkill ? 'Download as .zip with all bundled files' : 'Download file with correct name'}</Tooltip>
-                  </TooltipTrigger>
-                </Flex>
-              </Box>
-            ))}
-          </Flex>
-        </DialogBody>
-
-        <DialogFooter>
-          <Button onClick={handleClose} variant="secondary" slot="close">
-            Close
-          </Button>
-        </DialogFooter>
-      </Dialog>
-    </DialogTrigger>
-  );
-}

package/src/components/AssetInstallDialog/index.ts

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

package/src/components/DevAiHubPage/DevAiHubPage.module.css

@@ -1,105 +0,0 @@
-@layer components {
-  .pageRoot {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .content {
-    flex: 1;
-    padding: var(--bui-space-6);
-    overflow-y: auto;
-  }
-
-  .statsGrid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--bui-space-4);
-    margin-bottom: var(--bui-space-6);
-  }
-
-  @media (max-width: 600px) {
-    .statsGrid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  .statCard {
-    border-radius: var(--bui-radius-3);
-    padding: var(--bui-space-4);
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .statCard:hover {
-    transform: translateY(-2px);
-  }
-
-  .statCardInner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .statValue {
-    color: #fff;
-    line-height: 1;
-  }
-
-  .statLabel {
-    color: rgba(255, 255, 255, 0.85);
-    font-weight: 500;
-    margin-top: var(--bui-space-1);
-  }
-
-  .statIconBox {
-    width: 40px;
-    height: 40px;
-    border-radius: var(--bui-radius-2);
-    background-color: rgba(255, 255, 255, 0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .assetGrid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: var(--bui-space-3);
-  }
-
-  @media (max-width: 1200px) {
-    .assetGrid {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-
-  @media (max-width: 900px) {
-    .assetGrid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  @media (max-width: 600px) {
-    .assetGrid {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .emptyState {
-    padding: 96px 0;
-    text-align: center;
-  }
-
-  .emptyEmoji {
-    margin-bottom: var(--bui-space-4);
-    opacity: 0.15;
-    font-size: 5rem;
-  }
-
-  .paginationRow {
-    display: flex;
-    justify-content: center;
-    margin-top: var(--bui-space-8);
-  }
-}