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

package/src/components/McpConfigPage/McpConfigPage.module.css

@@ -1,121 +0,0 @@
-@layer components {
-  .pageRoot {
-    padding: var(--bui-space-6);
-  }
-
-  .subtitle {
-    margin-top: var(--bui-space-1);
-    display: block;
-  }
-
-  .configContent {
-    margin-top: var(--bui-space-6);
-    max-width: 720px;
-  }
-
-  .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/McpConfigPage/McpConfigPage.tsx

@@ -1,242 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  Box, Flex, Text, ButtonIcon, ToggleButton, Switch,
-  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 './McpConfigPage.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;
-}
-
-export function McpConfigPage() {
-  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(() => {
-    discoveryApi.getBaseUrl('dev-ai-hub').then(url => setBaseUrl(url));
-  }, [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) : '';
-
-  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 (
-    <div className={styles.pageRoot}>
-      <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>
-
-      <div className={styles.configContent}>
-        <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>
-
-          {TOOL_CONFIGS.map(t => (
-            <TabPanel key={t.tool} id={t.tool}>
-              {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>
-              )}
-
-              <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>
-
-              <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={copiedUrl ? 'Copied!' : '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>
-
-              <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>
-      </div>
-    </div>
-  );
-}

package/src/components/McpConfigPage/index.ts

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

package/src/components/ToolIcon/ToolIcon.tsx

@@ -1,65 +0,0 @@
-import type { CSSProperties } from 'react';
-import { RiInfinityLine, RiNavigationLine } from '@remixicon/react';
-import { siAnthropic, siGithub, siGooglegemini } from 'simple-icons';
-import type { AiTool } from '@nospt/plugin-dev-ai-hub-common';
-
-type SvgTool = Exclude<AiTool, 'all' | 'cursor'>;
-
-const TOOL_ICON: Record<SvgTool, { path: string; hex: string; label: string }> = {
-  'claude-code':    { ...siAnthropic,    label: 'Claude Code' },
-  'github-copilot': { ...siGithub,       label: 'GitHub Copilot' },
-  'google-gemini':  { ...siGooglegemini, label: 'Google Gemini' },
-};
-
-interface ToolIconProps {
-  tool: AiTool;
-  /** Use the brand's official color. Defaults to true. */
-  branded?: boolean;
-  className?: string;
-  style?: CSSProperties;
-  /** Icon size in pixels. Defaults to 20. */
-  size?: number;
-}
-
-export function ToolIcon({ tool, branded = true, className, style, size = 20 }: ToolIconProps) {
-  if (tool === 'all') {
-    return (
-      <RiInfinityLine
-        size={size}
-        className={className}
-        style={{ color: 'var(--bui-fg-secondary)', ...style }}
-        aria-label="Universal"
-      />
-    );
-  }
-
-  if (tool === 'cursor') {
-    return (
-      <RiNavigationLine
-        size={size}
-        className={className}
-        style={{ color: branded ? 'var(--bui-fg-primary)' : 'inherit', ...style }}
-        aria-label="Cursor"
-      />
-    );
-  }
-
-  const cfg = TOOL_ICON[tool as SvgTool];
-  if (!cfg) return null;
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width={size}
-      height={size}
-      fill="currentColor"
-      className={className}
-      style={{ color: branded ? `#${cfg.hex}` : 'inherit', ...style }}
-      aria-label={cfg.label}
-      role="img"
-    >
-      <path d={cfg.path} />
-    </svg>
-  );
-}

package/src/components/ToolIcon/index.ts

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

package/src/css-modules.d.ts

@@ -1,4 +0,0 @@
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

package/src/hooks/index.ts

@@ -1,152 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { useApi } from '@backstage/core-plugin-api';
-import { devAiHubApiRef } from '../api/DevAiHubClient';
-import type {
-  AiAsset,
-  AiAssetListResponse,
-  AiHubProvider,
-  AiHubStats,
-  AssetListFilter,
-} from '@nospt/plugin-dev-ai-hub-common';
-
-function useDebounce<T>(value: T, delay: number): T {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debounced;
-}
-
-export function useAssets(filter: AssetListFilter) {
-  const api = useApi(devAiHubApiRef);
-  const [result, setResult] = useState<AiAssetListResponse | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const debouncedSearch = useDebounce(filter.search, 300);
-
-  const effectiveFilter = { ...filter, search: debouncedSearch };
-  const filterKey = JSON.stringify(effectiveFilter);
-
-  useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    api
-      .listAssets(effectiveFilter)
-      .then(data => {
-        if (!cancelled) {
-          setResult(data);
-          setError(null);
-        }
-      })
-      .catch(err => {
-        if (!cancelled) setError(err);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterKey, api]);
-
-  return { result, loading, error };
-}
-
-export function useAssetDetail(id: string | null) {
-  const api = useApi(devAiHubApiRef);
-  const [asset, setAsset] = useState<AiAsset | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    if (!id) {
-      setAsset(null);
-      return () => {};
-    }
-    let cancelled = false;
-    setLoading(true);
-    api
-      .getAsset(id)
-      .then(data => {
-        if (!cancelled) {
-          setAsset(data);
-          setError(null);
-        }
-      })
-      .catch(err => {
-        if (!cancelled) setError(err);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [id, api]);
-
-  return { asset, loading, error };
-}
-
-export function useProviders() {
-  const api = useApi(devAiHubApiRef);
-  const [providers, setProviders] = useState<AiHubProvider[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const load = useCallback(() => {
-    setLoading(true);
-    api
-      .listProviders()
-      .then(data => {
-        setProviders(data);
-        setError(null);
-      })
-      .catch(err => setError(err))
-      .finally(() => setLoading(false));
-  }, [api]);
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  return { providers, loading, error, reload: load };
-}
-
-export function useStats() {
-  const api = useApi(devAiHubApiRef);
-  const [stats, setStats] = useState<AiHubStats | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    setLoading(true);
-    api
-      .getStats()
-      .then(data => {
-        setStats(data);
-        setError(null);
-      })
-      .catch(err => setError(err))
-      .finally(() => setLoading(false));
-  }, [api]);
-
-  return { stats, loading, error };
-}
-
-export function useCopyToClipboard() {
-  const [copied, setCopied] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const copy = useCallback((text: string) => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopied(true);
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => setCopied(false), 2000);
-    });
-  }, []);
-
-  return { copy, copied };
-}

package/src/index.ts

@@ -1,10 +0,0 @@
-// New Frontend System (NFS)
-export { devAiHubPlugin } from './plugin';
-
-// Legacy frontend system
-export { DevAiHubPage } from './pluginLegacy';
-
-// Shared
-export { devAiHubApiRef } from './api/DevAiHubClient';
-export type { DevAiHubApi } from './api/DevAiHubClient';
-export { rootRouteRef, mcpConfigRouteRef } from './routes';

package/src/plugin.tsx

@@ -1,60 +0,0 @@
-import {
-  createFrontendPlugin,
-  PageBlueprint,
-  SubPageBlueprint,
-  ApiBlueprint,
-  createApiFactory,
-  discoveryApiRef,
-  fetchApiRef,
-} from '@backstage/frontend-plugin-api';
-import SmartToyIcon from '@mui/icons-material/SmartToy';
-import { devAiHubApiRef, DevAiHubClient } from './api/DevAiHubClient';
-import { rootRouteRef, mcpConfigRouteRef } from './routes';
-
-export const devAiHubPlugin = createFrontendPlugin({
-  pluginId: 'dev-ai-hub',
-  routes: {
-    root: rootRouteRef,
-    mcpConfig: mcpConfigRouteRef,
-  },
-  extensions: [
-    ApiBlueprint.make({
-      params: defineParams =>
-        defineParams(
-          createApiFactory({
-            api: devAiHubApiRef,
-            deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
-            factory: ({ discoveryApi, fetchApi }) =>
-              new DevAiHubClient(discoveryApi, fetchApi),
-          }),
-        ),
-    }),
-    PageBlueprint.make({
-      params: {
-        path: '/dev-ai-hub',
-        title: 'Dev AI Hub',
-        icon: <SmartToyIcon />,
-        routeRef: rootRouteRef,
-      },
-    }),
-    SubPageBlueprint.make({
-      name: 'browse',
-      params: {
-        path: 'browse',
-        title: 'Browse',
-        loader: () =>
-          import('./components/DevAiHubPage').then(m => <m.DevAiHubPage />),
-      },
-    }),
-    SubPageBlueprint.make({
-      name: 'mcp-config',
-      params: {
-        path: 'mcp-config',
-        title: 'Configure MCP',
-        routeRef: mcpConfigRouteRef,
-        loader: () =>
-          import('./components/McpConfigPage').then(m => <m.McpConfigPage />),
-      },
-    }),
-  ],
-});