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

package/src/components/DevAiHubPage/DevAiHubPage.tsx

@@ -1,197 +0,0 @@
-import { useState, useMemo, type ElementType } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { Box, Flex, Text, Skeleton, TablePagination } from '@backstage/ui';
-import { RiArticleLine, RiRobot2Line, RiToolsLine, RiGitBranchLine } from '@remixicon/react';
-import type { AssetType, AiTool } from '@nospt/plugin-dev-ai-hub-common';
-import { AssetCard } from '../AssetCard';
-import { AssetFilters } from '../AssetFilters';
-import type { AssetFiltersValue } from '../AssetFilters';
-import { AssetDetailPanel } from '../AssetDetailPanel';
-import { AssetInstallDialog } from '../AssetInstallDialog';
-import { useAssets, useStats, useProviders } from '../../hooks';
-import styles from './DevAiHubPage.module.css';
-
-const DEFAULT_FILTERS: AssetFiltersValue = {
-  types: [],
-  tools: [],
-  search: '',
-  tags: [],
-  providerId: undefined,
-};
-
-const PAGE_SIZE = 24;
-
-const STATS_CONFIG: { key: AssetType; label: string; Icon: ElementType; gradient: string; shadow: string }[] = [
-  { key: 'instruction', label: 'Instructions', Icon: RiArticleLine,
-    gradient: 'linear-gradient(135deg, #54A0FF 0%, #2980FF 100%)', shadow: '#54A0FF40' },
-  { key: 'agent',       label: 'Agents',       Icon: RiRobot2Line,
-    gradient: 'linear-gradient(135deg, #FF6B9D 0%, #E0507A 100%)', shadow: '#FF6B9D40' },
-  { key: 'skill',       label: 'Skills',       Icon: RiToolsLine,
-    gradient: 'linear-gradient(135deg, #6AB04C 0%, #4A8F2E 100%)', shadow: '#6AB04C40' },
-  { key: 'workflow',    label: 'Workflows',    Icon: RiGitBranchLine,
-    gradient: 'linear-gradient(135deg, #F9CA24 0%, #D4A800 100%)', shadow: '#F9CA2440' },
-];
-
-export function DevAiHubPage() {
-  const [filters, setFilters] = useState<AssetFiltersValue>(DEFAULT_FILTERS);
-  const [page, setPage] = useState(1);
-
-  const [searchParams, setSearchParams] = useSearchParams();
-  const selectedAssetId = searchParams.get('assetId');
-  const installAssetId = searchParams.get('installId');
-
-  const handleViewAsset = (id: string) =>
-    setSearchParams(p => { const n = new URLSearchParams(p); n.set('assetId', id); return n; });
-
-  const handleCloseDetail = () =>
-    setSearchParams(p => { const n = new URLSearchParams(p); n.delete('assetId'); return n; });
-
-  const handleInstallAsset = (id: string) =>
-    setSearchParams(p => { const n = new URLSearchParams(p); n.set('installId', id); return n; });
-
-  const handleCloseInstall = () =>
-    setSearchParams(p => { const n = new URLSearchParams(p); n.delete('installId'); return n; });
-
-  const { stats } = useStats();
-  const { providers } = useProviders();
-
-  const apiFilter = useMemo(
-    () => ({
-      type: filters.types.length === 1 ? (filters.types[0] as AssetType) : undefined,
-      tool: filters.tools.length === 1 ? (filters.tools[0] as AiTool) : undefined,
-      search: filters.search || undefined,
-      tags: filters.tags.length > 0 ? filters.tags : undefined,
-      providerId: filters.providerId || undefined,
-      page,
-      pageSize: PAGE_SIZE,
-    }),
-    [filters, page],
-  );
-
-  const { result, loading } = useAssets(apiFilter);
-
-  const handleFiltersChange = (next: AssetFiltersValue) => {
-    setFilters(next);
-    setPage(1);
-  };
-
-  const totalPages = result ? Math.ceil(result.totalCount / PAGE_SIZE) : 0;
-
-  const availableTags = useMemo(() => {
-    if (!result) return [];
-    const tagSet = new Set<string>();
-    result.items.forEach(a => a.tags.forEach(t => tagSet.add(t)));
-    return Array.from(tagSet).sort();
-  }, [result]);
-
-  return (
-    <div className={styles.pageRoot}>
-      <div className={styles.content}>
-        {/* Stats row */}
-        <div className={styles.statsGrid}>
-          {STATS_CONFIG.map(({ key, label, Icon, gradient, shadow }) => {
-            const isActive = filters.types[0] === key;
-            return (
-              <div
-                key={key}
-                className={styles.statCard}
-                onClick={() => handleFiltersChange({ ...filters, types: isActive ? [] : [key] })}
-                style={{
-                  background: gradient,
-                  boxShadow: isActive ? `0 8px 24px ${shadow}` : `0 2px 8px ${shadow}`,
-                  transform: isActive ? 'translateY(-2px)' : 'none',
-                  outline: isActive ? '2px solid rgba(255,255,255,0.6)' : 'none',
-                  outlineOffset: 2,
-                }}
-                role="button"
-                tabIndex={0}
-                onKeyDown={e => { if (e.key === 'Enter') handleFiltersChange({ ...filters, types: isActive ? [] : [key] }); }}
-              >
-                <div className={styles.statCardInner}>
-                  <Box>
-                    <Text variant="title-large" weight="bold" className={styles.statValue}>
-                      {stats ? (stats.byType[key] ?? 0) : <Skeleton style={{ width: 32 }} />}
-                    </Text>
-                    <Text variant="body-small" className={styles.statLabel}>
-                      {label}
-                    </Text>
-                  </Box>
-                  <div className={styles.statIconBox}>
-                    <Icon size={22} style={{ color: '#fff' }} />
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-
-        {/* Filters */}
-        <AssetFilters
-          value={filters}
-          onChange={handleFiltersChange}
-          availableTags={availableTags}
-          providers={providers.length > 1 ? providers : undefined}
-        />
-
-        {/* Results summary */}
-        {result && !loading && (
-          <Text variant="body-x-small" color="secondary" style={{ marginBottom: 'var(--bui-space-4)', display: 'block' }}>
-            {result.totalCount} asset{result.totalCount !== 1 ? 's' : ''} found
-          </Text>
-        )}
-
-        {/* Asset grid — 4 columns on large screens */}
-        <div className={styles.assetGrid}>
-          {loading
-            ? Array.from({ length: 8 }).map((_, i) => (
-                <Skeleton key={i} style={{ height: 150, borderRadius: 'var(--bui-radius-2)' }} />
-              ))
-            : result?.items.map(asset => (
-                <AssetCard
-                  key={asset.id}
-                  asset={asset}
-                  onView={handleViewAsset}
-                  onInstall={handleInstallAsset}
-                />
-              ))}
-        </div>
-
-        {/* Empty state */}
-        {!loading && result?.items.length === 0 && (
-          <div className={styles.emptyState}>
-            <div className={styles.emptyEmoji}>🤖</div>
-            <Text variant="title-small" color="secondary" weight="bold">No assets found</Text>
-            <Text variant="body-small" color="secondary" style={{ marginTop: 'var(--bui-space-1)' }}>
-              Try adjusting your filters or search terms.
-            </Text>
-          </div>
-        )}
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <Flex className={styles.paginationRow}>
-            <TablePagination
-              pageSize={PAGE_SIZE}
-              offset={(page - 1) * PAGE_SIZE}
-              totalCount={result?.totalCount ?? 0}
-              hasNextPage={page < totalPages}
-              hasPreviousPage={page > 1}
-              onNextPage={() => setPage(p => p + 1)}
-              onPreviousPage={() => setPage(p => p - 1)}
-            />
-          </Flex>
-        )}
-      </div>
-
-      <AssetDetailPanel
-        assetId={selectedAssetId}
-        onClose={handleCloseDetail}
-      />
-
-      <AssetInstallDialog
-        assetId={installAssetId}
-        onClose={handleCloseInstall}
-      />
-    </div>
-  );
-}

package/src/components/DevAiHubPage/index.ts

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

package/src/components/McpConfigDialog/McpConfigDialog.module.css

@@ -1,111 +0,0 @@
-@layer components {
-  .subtitle {
-    margin-top: var(--bui-space-1);
-  }
-
-  .tabBar {
-    margin-bottom: var(--bui-space-4);
-    border-bottom: 1px solid var(--bui-border-1);
-  }
-
-  .tabContent {
-    display: flex;
-    align-items: center;
-    gap: var(--bui-space-2);
-  }
-
-  .sectionLabel {
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    display: block;
-    margin-bottom: 6px;
-    font-weight: 600;
-  }
-
-  .providerSection {
-    margin-bottom: var(--bui-space-4);
-  }
-
-  .chipsRow {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-  }
-
-  .filterChip {
-    font-weight: 600;
-    font-size: 0.75rem;
-    border-radius: var(--bui-radius-2);
-    border: 1.5px solid;
-    transition: all 0.15s ease;
-    cursor: pointer;
-  }
-
-  .proactiveSection {
-    margin-bottom: var(--bui-space-4);
-  }
-
-  .proactiveRow {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--bui-space-2);
-  }
-
-  .urlSection {
-    margin-bottom: var(--bui-space-4);
-  }
-
-  .urlBox {
-    display: flex;
-    align-items: center;
-    gap: var(--bui-space-2);
-    margin-top: var(--bui-space-1);
-    padding: var(--bui-space-2) var(--bui-space-3);
-    border-radius: var(--bui-radius-2);
-    border: 1px solid var(--bui-border-1);
-    background-color: var(--bui-bg-neutral-1-hover);
-  }
-
-  .urlText {
-    flex: 1;
-    font-family: monospace;
-    font-size: 0.8rem;
-    word-break: break-all;
-  }
-
-  .snippetContainer {
-    position: relative;
-  }
-
-  .snippetPre {
-    margin: 0;
-    padding: var(--bui-space-4);
-    border-radius: var(--bui-radius-2);
-    border: 1px solid var(--bui-border-1);
-    font-family: monospace;
-    font-size: 0.8rem;
-    overflow-x: auto;
-    white-space: pre;
-  }
-
-  .snippetPreLight {
-    background-color: #f6f8fa;
-    color: #24292f;
-  }
-
-  .snippetPreDark {
-    background-color: #1E1E1E;
-    color: #DCDDE1;
-  }
-
-  .copySnippetButton {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-
-  .hint {
-    display: block;
-    margin-top: var(--bui-space-3);
-  }
-}

package/src/components/McpConfigDialog/McpConfigDialog.tsx

@@ -1,271 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  Box, Flex, Text, Button, ButtonIcon, ToggleButton, Switch,
-  Dialog, DialogTrigger, DialogHeader, DialogBody, DialogFooter,
-  Tabs, TabList, Tab, TabPanel,
-  Tooltip, TooltipTrigger,
-} from '@backstage/ui';
-import { RiFileCopyLine, RiCheckLine, RiDatabase2Line } from '@remixicon/react';
-import { useApi, discoveryApiRef } from '@backstage/core-plugin-api';
-import { ToolIcon } from '../ToolIcon';
-import { useCopyToClipboard, useProviders } from '../../hooks';
-import type { AiTool } from '@nospt/plugin-dev-ai-hub-common';
-import styles from './McpConfigDialog.module.css';
-
-interface ToolConfig {
-  tool: AiTool;
-  label: string;
-  file: string;
-  description: string;
-  buildConfig: (mcpUrl: string) => string;
-}
-
-const TOOL_CONFIGS: ToolConfig[] = [
-  {
-    tool: 'claude-code',
-    label: 'Claude Code',
-    file: '.mcp.json',
-    description: 'Add to .mcp.json in your project root (or run via claude mcp add):',
-    buildConfig: url => JSON.stringify({
-      mcpServers: { 'dev-ai-hub': { type: 'http', url } },
-    }, null, 2),
-  },
-  {
-    tool: 'github-copilot',
-    label: 'GitHub Copilot',
-    file: '.vscode/settings.json',
-    description: 'Add to your VS Code settings (.vscode/settings.json or user settings):',
-    buildConfig: url => JSON.stringify({
-      'github.copilot.chat.mcp.servers': { 'dev-ai-hub': { type: 'http', url } },
-    }, null, 2),
-  },
-  {
-    tool: 'google-gemini',
-    label: 'Google Gemini',
-    file: 'gemini-config.json',
-    description: 'Add to your Gemini CLI configuration:',
-    buildConfig: url => JSON.stringify({
-      mcpServers: { 'dev-ai-hub': { url } },
-    }, null, 2),
-  },
-];
-
-function providerLabel(target: string): string {
-  return target.split('/').pop()?.replace(/\.git$/, '') ?? target;
-}
-
-interface McpConfigDialogProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export function McpConfigDialog({ open, onClose }: McpConfigDialogProps) {
-  const discoveryApi = useApi(discoveryApiRef);
-  const { copy: copyUrl, copied: copiedUrl } = useCopyToClipboard();
-  const { copy: copySnippet, copied: copiedSnippet } = useCopyToClipboard();
-  const [selectedToolKey, setSelectedToolKey] = useState<string>('claude-code');
-  const [baseUrl, setBaseUrl] = useState('');
-  const [selectedProvider, setSelectedProvider] = useState<string>('');
-  const [proactiveEnabled, setProactiveEnabled] = useState(false);
-
-  const { providers } = useProviders();
-  const showProviderFilter = providers.length > 1;
-
-  useEffect(() => {
-    if (open) {
-      discoveryApi.getBaseUrl('dev-ai-hub').then(url => setBaseUrl(url));
-    }
-  }, [open, discoveryApi]);
-
-  const cfg = TOOL_CONFIGS.find(t => t.tool === selectedToolKey) ?? TOOL_CONFIGS[0];
-
-  const buildMcpUrl = () => {
-    if (!baseUrl) return 'loading...';
-    const params = new URLSearchParams();
-    params.set('tool', cfg.tool);
-    if (selectedProvider) params.set('provider', selectedProvider);
-    if (proactiveEnabled) params.set('proactive', 'true');
-    return `${baseUrl}/mcp?${params.toString()}`;
-  };
-
-  const mcpUrl = buildMcpUrl();
-  const configSnippet = baseUrl ? cfg.buildConfig(mcpUrl) : '';
-
-  // Detect dark mode by observing BUI's data-theme-mode attribute, which
-  // reflects the Backstage theme toggle (not the OS preference).
-  const [isDark, setIsDark] = useState(() => {
-    if (typeof document === 'undefined') return false;
-    return document.documentElement.getAttribute('data-theme-mode') === 'dark' ||
-      document.body.getAttribute('data-theme-mode') === 'dark';
-  });
-
-  useEffect(() => {
-    const getIsDark = () =>
-      document.documentElement.getAttribute('data-theme-mode') === 'dark' ||
-      document.body.getAttribute('data-theme-mode') === 'dark';
-
-    const observer = new MutationObserver(() => setIsDark(getIsDark()));
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme-mode'] });
-    observer.observe(document.body, { attributes: true, attributeFilter: ['data-theme-mode'] });
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <DialogTrigger>
-      <Dialog
-        isOpen={open}
-        isDismissable
-        onOpenChange={o => { if (!o) onClose(); }}
-      >
-        <DialogHeader>
-          <Text variant="title-small" weight="bold">Configure MCP Server</Text>
-          <Text variant="body-small" color="secondary" className={styles.subtitle}>
-            Connect your AI tool to the Dev AI Hub via Model Context Protocol.
-          </Text>
-        </DialogHeader>
-
-        <DialogBody>
-          <Tabs selectedKey={selectedToolKey} onSelectionChange={key => setSelectedToolKey(key as string)}>
-            <TabList className={styles.tabBar}>
-              {TOOL_CONFIGS.map(t => (
-                <Tab key={t.tool} id={t.tool}>
-                  <span className={styles.tabContent}>
-                    <ToolIcon tool={t.tool} size={16} />
-                    <span>{t.label}</span>
-                  </span>
-                </Tab>
-              ))}
-            </TabList>
-
-            {/* All tab panels share the same content below */}
-            {TOOL_CONFIGS.map(t => (
-              <TabPanel key={t.tool} id={t.tool}>
-                {/* Provider filter — only shown when there are 2+ providers */}
-                {showProviderFilter && (
-                  <Box className={styles.providerSection}>
-                    <Text variant="body-x-small" color="secondary" className={styles.sectionLabel}>
-                      Scope to Provider
-                    </Text>
-                    <Flex className={styles.chipsRow}>
-                        <ToggleButton
-                          id="all-providers"
-                          size="small"
-                          className={styles.filterChip}
-                          isSelected={!selectedProvider}
-                          onChange={() => setSelectedProvider('')}
-                          style={{
-                            borderColor: !selectedProvider ? 'var(--bui-fg-primary)' : 'var(--bui-border-1)',
-                            backgroundColor: !selectedProvider ? 'var(--bui-fg-primary)' : 'transparent',
-                            color: !selectedProvider ? 'var(--bui-bg-neutral-1)' : 'var(--bui-fg-secondary)',
-                          }}
-                        >
-                          All providers
-                        </ToggleButton>
-                        {providers.map(p => {
-                          const isSelected = selectedProvider === p.id;
-                          const label = providerLabel(p.target);
-                          return (
-                            <ToggleButton
-                              key={p.id}
-                              id={p.id}
-                              size="small"
-                              className={styles.filterChip}
-                              iconStart={<RiDatabase2Line size={12} style={{ color: isSelected ? 'var(--bui-bg-neutral-1)' : 'inherit' }} />}
-                              isSelected={isSelected}
-                              onChange={() => setSelectedProvider(isSelected ? '' : 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>
-                )}
-
-                {/* Proactive suggestions toggle */}
-                <Flex className={styles.proactiveSection}>
-                  <Flex className={styles.proactiveRow}>
-                    <Switch
-                      isSelected={proactiveEnabled}
-                      onChange={setProactiveEnabled}
-                      aria-label="Proactive suggestions"
-                    />
-                    <Box>
-                      <Text variant="body-small" weight="bold">Proactive suggestions</Text>
-                      <Text variant="body-x-small" color="secondary">
-                        The AI will automatically suggest relevant assets based on your project context.
-                        Disable if you prefer to search manually.
-                      </Text>
-                    </Box>
-                  </Flex>
-                </Flex>
-
-                {/* MCP URL */}
-                <Box className={styles.urlSection}>
-                  <Text variant="body-x-small" color="secondary" className={styles.sectionLabel}>
-                    MCP Endpoint
-                  </Text>
-                  <Flex className={styles.urlBox}>
-                    <Text variant="body-small" className={styles.urlText}>
-                      {mcpUrl}
-                    </Text>
-                    <TooltipTrigger>
-                      <ButtonIcon
-                        aria-label="Copy URL"
-                        icon={copiedUrl ? <RiCheckLine size={14} style={{ color: 'var(--bui-fg-success)' }} /> : <RiFileCopyLine size={14} />}
-                        variant="tertiary"
-                        onPress={() => copyUrl(mcpUrl)}
-                      />
-                      <Tooltip>{copiedUrl ? 'Copied!' : 'Copy URL'}</Tooltip>
-                    </TooltipTrigger>
-                  </Flex>
-                </Box>
-
-                {/* Config snippet */}
-                <Text variant="body-x-small" color="secondary" className={styles.sectionLabel}>
-                  {t.file}
-                </Text>
-                <Text variant="body-x-small" color="secondary" style={{ display: 'block', marginBottom: 'var(--bui-space-2)', marginTop: 'var(--bui-space-1)' }}>
-                  {t.description}
-                </Text>
-                <div className={styles.snippetContainer}>
-                  <pre className={`${styles.snippetPre} ${isDark ? styles.snippetPreDark : styles.snippetPreLight}`}>
-                    {configSnippet}
-                  </pre>
-                  <TooltipTrigger>
-                    <ButtonIcon
-                      aria-label="Copy config"
-                      className={styles.copySnippetButton}
-                      icon={copiedSnippet ? <RiCheckLine size={14} style={{ color: 'var(--bui-fg-success)' }} /> : <RiFileCopyLine size={14} />}
-                      variant="tertiary"
-                      onPress={() => copySnippet(configSnippet)}
-                    />
-                    <Tooltip>{copiedSnippet ? 'Copied!' : 'Copy config'}</Tooltip>
-                  </TooltipTrigger>
-                </div>
-
-                <Text variant="body-x-small" color="secondary" className={styles.hint}>
-                  💡 Omit <code>?tool=</code> from the URL to receive assets for all AI tools.
-                  {showProviderFilter && ' Omit ?provider= to receive assets from all repositories.'}
-                  {' '}Proactive suggestions add <code>?proactive=true</code> and register the{' '}
-                  <code>suggest_assets</code> tool and <code>check_for_assets</code> prompt.
-                </Text>
-              </TabPanel>
-            ))}
-          </Tabs>
-        </DialogBody>
-
-        <DialogFooter>
-          <Button onClick={onClose} variant="secondary" slot="close">
-            Close
-          </Button>
-        </DialogFooter>
-      </Dialog>
-    </DialogTrigger>
-  );
-}

package/src/components/McpConfigDialog/index.ts

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