@nospt/plugin-dev-ai-hub 0.1.0

package/src/components/DevAiHubPage/DevAiHubPage.tsx

@@ -0,0 +1,346 @@
+import { useState, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Pagination from '@mui/material/Pagination';
+import Skeleton from '@mui/material/Skeleton';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
+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 FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import HubIcon from '@mui/icons-material/Hub';
+import { Content, Header, Page } from '@backstage/core-components';
+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 { McpConfigDialog } from '../McpConfigDialog';
+import { ToolIcon } from '../ToolIcon';
+import { useAssets, useStats, useProviders } from '../../hooks';
+
+const SUPPORTED_TOOLS: AiTool[] = ['claude-code', 'github-copilot', 'google-gemini', 'cursor'];
+
+const TOOL_LABELS: Record<AiTool, string> = {
+  'all':            'Universal',
+  'claude-code':    'Claude Code',
+  'github-copilot': 'GitHub Copilot',
+  'google-gemini':  'Google Gemini',
+  'cursor':         'Cursor',
+};
+
+function timeAgo(iso: string): string {
+  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+const DEFAULT_FILTERS: AssetFiltersValue = {
+  types: [],
+  tools: [],
+  search: '',
+  tags: [],
+  providerId: undefined,
+};
+
+const PAGE_SIZE = 24;
+
+const STATS_CONFIG = [
+  { key: 'instruction' as AssetType, label: 'Instructions', Icon: ArticleIcon,
+    gradient: 'linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%)', shadow: '#2563EB40' },
+  { key: 'agent'       as AssetType, label: 'Agents',       Icon: SmartToyIcon,
+    gradient: 'linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%)', shadow: '#7C3AED40' },
+  { key: 'skill'       as AssetType, label: 'Skills',       Icon: BuildIcon,
+    gradient: 'linear-gradient(135deg, #059669 0%, #047857 100%)', shadow: '#05966940' },
+  { key: 'workflow'    as AssetType, label: 'Workflows',    Icon: AccountTreeIcon,
+    gradient: 'linear-gradient(135deg, #D97706 0%, #B45309 100%)', shadow: '#D9770640' },
+];
+
+export function DevAiHubPage() {
+  const [filters, setFilters] = useState<AssetFiltersValue>(DEFAULT_FILTERS);
+  const [page, setPage] = useState(1);
+  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+
+  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 (
+    <Page themeId="tool">
+      <Header
+        title={
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 44,
+                height: 44,
+                borderRadius: 2.5,
+                background: 'rgba(255,255,255,0.15)',
+                backdropFilter: 'blur(8px)',
+                border: '1px solid rgba(255,255,255,0.3)',
+                boxShadow: '0 2px 12px rgba(0,0,0,0.15)',
+                flexShrink: 0,
+              }}
+            >
+              <HubIcon sx={{ fontSize: '1.5rem', color: '#fff' }} />
+            </Box>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.3 }}>
+              <Box sx={{ fontSize: '1.75rem', fontWeight: 700, lineHeight: 1, color: '#fff' }}>
+                Dev AI Hub
+              </Box>
+              <Box sx={{ fontSize: '0.85rem', fontWeight: 400, color: 'rgba(255,255,255,0.75)', lineHeight: 1 }}>
+                {stats
+                  ? `${stats.totalAssets} assets · ${Object.keys(stats.byProvider).length} provider${Object.keys(stats.byProvider).length !== 1 ? 's' : ''}`
+                  : 'Centralized AI assets for your team'}
+              </Box>
+            </Box>
+          </Box>
+        }
+        pageTitleOverride="Dev AI Hub"
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          {/* Supported tools */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+            {SUPPORTED_TOOLS.map(tool => (
+              <Tooltip key={tool} title={TOOL_LABELS[tool]} arrow>
+                <Box
+                  sx={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: '50%',
+                    backgroundColor: 'rgba(255,255,255,0.15)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backdropFilter: 'blur(4px)',
+                    transition: 'background-color 0.15s',
+                    '&:hover': { backgroundColor: 'rgba(255,255,255,0.25)' },
+                  }}
+                >
+                  <ToolIcon tool={tool} branded={false} sx={{ fontSize: '1rem', color: '#fff' }} />
+                </Box>
+              </Tooltip>
+            ))}
+          </Box>
+
+          {/* Last sync status */}
+          {stats?.lastSync && (
+            <Tooltip title={`Last sync: ${new Date(stats.lastSync).toLocaleString()}`} arrow>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'default' }}>
+                <FiberManualRecordIcon sx={{ fontSize: '0.6rem', color: '#4ade80' }} />
+                <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.8)', whiteSpace: 'nowrap' }}>
+                  {timeAgo(stats.lastSync)}
+                </Typography>
+              </Box>
+            </Tooltip>
+          )}
+
+          {/* Configure MCP button */}
+          <Button
+            variant="contained"
+            size="small"
+            startIcon={<SettingsEthernetIcon />}
+            onClick={() => setMcpDialogOpen(true)}
+            sx={{
+              borderRadius: 2,
+              fontWeight: 700,
+              whiteSpace: 'nowrap',
+              background: 'rgba(255,255,255,0.15)',
+              backdropFilter: 'blur(4px)',
+              border: '1px solid rgba(255,255,255,0.3)',
+              color: '#fff',
+              boxShadow: 'none',
+              '&:hover': {
+                background: 'rgba(255,255,255,0.25)',
+                boxShadow: 'none',
+              },
+            }}
+          >
+            Configure MCP
+          </Button>
+        </Box>
+      </Header>
+
+      <Content>
+
+        {/* Stats row */}
+        <Grid container spacing={2} sx={{ mb: 3 }}>
+          {STATS_CONFIG.map(({ key, label, Icon, gradient, shadow }) => (
+            <Grid item xs={6} sm={3} key={key}>
+              <Box
+                onClick={() => handleFiltersChange({ ...filters, types: filters.types[0] === key ? [] : [key] })}
+                sx={{
+                  background: gradient,
+                  borderRadius: 3,
+                  p: 2,
+                  cursor: 'pointer',
+                  boxShadow: filters.types[0] === key ? `0 8px 24px ${shadow}` : `0 2px 8px ${shadow}`,
+                  transform: filters.types[0] === key ? 'translateY(-2px)' : 'none',
+                  transition: 'all 0.2s ease',
+                  outline: filters.types[0] === key ? '2px solid rgba(255,255,255,0.6)' : 'none',
+                  outlineOffset: 2,
+                  '&:hover': {
+                    boxShadow: `0 8px 24px ${shadow}`,
+                    transform: 'translateY(-2px)',
+                  },
+                }}
+              >
+                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                  <Box>
+                    <Typography variant="h4" fontWeight={800} sx={{ color: '#fff', lineHeight: 1 }}>
+                      {stats ? (stats.byType[key] ?? 0) : <Skeleton width={32} sx={{ bgcolor: 'rgba(255,255,255,0.3)' }} />}
+                    </Typography>
+                    <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.85)', fontWeight: 500, mt: 0.5 }}>
+                      {label}
+                    </Typography>
+                  </Box>
+                  <Box
+                    sx={{
+                      width: 40,
+                      height: 40,
+                      borderRadius: 2,
+                      backgroundColor: 'rgba(255,255,255,0.2)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Icon sx={{ color: '#fff', fontSize: '1.4rem' }} />
+                  </Box>
+                </Box>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+
+        {/* Filters */}
+        <AssetFilters
+          value={filters}
+          onChange={handleFiltersChange}
+          availableTags={availableTags}
+          providers={providers.length > 1 ? providers : undefined}
+        />
+
+        {/* Results summary */}
+        {result && !loading && (
+          <Typography variant="caption" color="text.secondary" sx={{ mb: 2, display: 'block' }}>
+            {result.totalCount} asset{result.totalCount !== 1 ? 's' : ''} found
+          </Typography>
+        )}
+
+        {/* Asset grid — 4 columns on large screens */}
+        <Grid container spacing={1.5}>
+          {loading
+            ? Array.from({ length: 8 }).map((_, i) => (
+                <Grid item xs={12} sm={6} md={4} lg={3} key={i}>
+                  <Skeleton variant="rectangular" height={150} sx={{ borderRadius: 2 }} />
+                </Grid>
+              ))
+            : result?.items.map(asset => (
+                <Grid item xs={12} sm={6} md={4} lg={3} key={asset.id}>
+                  <AssetCard
+                    asset={asset}
+                    onView={handleViewAsset}
+                    onInstall={handleInstallAsset}
+                  />
+                </Grid>
+              ))}
+        </Grid>
+
+        {/* Empty state */}
+        {!loading && result?.items.length === 0 && (
+          <Box sx={{ py: 12, textAlign: 'center' }}>
+            <Typography variant="h1" sx={{ mb: 2, opacity: 0.15, fontSize: '5rem' }}>🤖</Typography>
+            <Typography variant="h6" color="text.secondary" fontWeight={600}>No assets found</Typography>
+            <Typography variant="body2" color="text.disabled" sx={{ mt: 0.5 }}>
+              Try adjusting your filters or search terms.
+            </Typography>
+          </Box>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+            <Pagination
+              count={totalPages}
+              page={page}
+              onChange={(_, p) => setPage(p)}
+              color="primary"
+              shape="rounded"
+            />
+          </Box>
+        )}
+      </Content>
+
+      <AssetDetailPanel
+        assetId={selectedAssetId}
+        onClose={handleCloseDetail}
+      />
+
+      <AssetInstallDialog
+        assetId={installAssetId}
+        onClose={handleCloseInstall}
+      />
+
+      <McpConfigDialog
+        open={mcpDialogOpen}
+        onClose={() => setMcpDialogOpen(false)}
+      />
+    </Page>
+  );
+}

package/src/components/DevAiHubPage/index.ts

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

package/src/components/McpConfigDialog/McpConfigDialog.tsx

@@ -0,0 +1,301 @@
+import { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import Switch from '@mui/material/Switch';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import StorageIcon from '@mui/icons-material/Storage';
+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';
+
+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 theme = useTheme();
+  const discoveryApi = useApi(discoveryApiRef);
+  const { copy: copyUrl, copied: copiedUrl } = useCopyToClipboard();
+  const { copy: copySnippet, copied: copiedSnippet } = useCopyToClipboard();
+  const [tab, setTab] = useState(0);
+  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[tab];
+
+  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) : '';
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle sx={{ pb: 0 }}>
+        <Typography variant="h6" fontWeight={700}>Configure MCP Server</Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+          Connect your AI tool to the Dev AI Hub via Model Context Protocol.
+        </Typography>
+      </DialogTitle>
+
+      <DialogContent sx={{ pt: 1 }}>
+        <Tabs
+          value={tab}
+          onChange={(_, v) => setTab(v)}
+          sx={{ mb: 2, borderBottom: 1, borderColor: 'divider' }}
+        >
+          {TOOL_CONFIGS.map((t, i) => (
+            <Tab
+              key={t.tool}
+              value={i}
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <ToolIcon
+                    tool={t.tool}
+                    sx={{ fontSize: '1rem', color: theme.palette.mode === 'dark' ? '#fff' : undefined }}
+                  />
+                  <span>{t.label}</span>
+                </Box>
+              }
+            />
+          ))}
+        </Tabs>
+
+        {/* Provider filter — only shown when there are 2+ providers */}
+        {showProviderFilter && (
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="caption" fontWeight={600} color="text.secondary" sx={{ textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}>
+              Scope to Provider
+            </Typography>
+            <Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap' }}>
+              <Chip
+                label="All providers"
+                size="small"
+                clickable
+                onClick={() => setSelectedProvider('')}
+                sx={{
+                  fontWeight: 600,
+                  fontSize: '0.75rem',
+                  borderRadius: 2,
+                  border: '1.5px solid',
+                  borderColor: !selectedProvider ? 'text.primary' : 'divider',
+                  backgroundColor: !selectedProvider ? 'text.primary' : 'transparent',
+                  color: !selectedProvider ? 'background.paper' : 'text.secondary',
+                  transition: 'all 0.15s ease',
+                }}
+              />
+              {providers.map(p => {
+                const isSelected = selectedProvider === p.id;
+                const label = providerLabel(p.target);
+                return (
+                  <Chip
+                    key={p.id}
+                    icon={<StorageIcon sx={{ fontSize: '0.8rem !important', color: isSelected ? 'background.paper' : 'inherit' }} />}
+                    label={label}
+                    size="small"
+                    clickable
+                    onClick={() => setSelectedProvider(isSelected ? '' : p.id)}
+                    sx={{
+                      fontWeight: 600,
+                      fontSize: '0.75rem',
+                      borderRadius: 2,
+                      border: '1.5px solid',
+                      borderColor: isSelected ? 'text.primary' : 'divider',
+                      backgroundColor: isSelected ? 'text.primary' : 'transparent',
+                      color: isSelected ? 'background.paper' : 'text.secondary',
+                      transition: 'all 0.15s ease',
+                    }}
+                  />
+                );
+              })}
+            </Box>
+          </Box>
+        )}
+
+        {/* Proactive suggestions toggle */}
+        <Box sx={{ mb: 2 }}>
+          <FormControlLabel
+            control={
+              <Switch
+                size="small"
+                checked={proactiveEnabled}
+                onChange={e => setProactiveEnabled(e.target.checked)}
+              />
+            }
+            label={
+              <Box>
+                <Typography variant="body2" fontWeight={600}>Proactive suggestions</Typography>
+                <Typography variant="caption" color="text.secondary">
+                  The AI will automatically suggest relevant assets based on your project context.
+                  Disable if you prefer to search manually.
+                </Typography>
+              </Box>
+            }
+            sx={{ alignItems: 'flex-start', ml: 0, gap: 1 }}
+          />
+        </Box>
+
+        {/* MCP URL */}
+        <Typography variant="caption" fontWeight={600} color="text.secondary" sx={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>
+          MCP Endpoint
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            mt: 0.5,
+            mb: 2,
+            px: 1.5,
+            py: 1,
+            borderRadius: 1.5,
+            border: '1px solid',
+            borderColor: 'divider',
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
+          }}
+        >
+          <Typography
+            variant="body2"
+            sx={{ flex: 1, fontFamily: 'monospace', fontSize: '0.8rem', wordBreak: 'break-all' }}
+          >
+            {mcpUrl}
+          </Typography>
+          <Tooltip title={copiedUrl ? 'Copied!' : 'Copy URL'}>
+            <IconButton size="small" onClick={() => copyUrl(mcpUrl)}>
+              {copiedUrl ? <CheckIcon fontSize="small" color="success" /> : <ContentCopyIcon fontSize="small" />}
+            </IconButton>
+          </Tooltip>
+        </Box>
+
+        {/* Config snippet */}
+        <Typography variant="caption" fontWeight={600} color="text.secondary" sx={{ textTransform: 'uppercase', letterSpacing: 0.5 }}>
+          {cfg.file}
+        </Typography>
+        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1, mt: 0.5 }}>
+          {cfg.description}
+        </Typography>
+        <Box sx={{ position: 'relative' }}>
+          <Box
+            component="pre"
+            sx={{
+              m: 0,
+              p: 2,
+              borderRadius: 2,
+              border: '1px solid',
+              borderColor: 'divider',
+              backgroundColor: theme.palette.mode === 'dark' ? '#0d1117' : '#f6f8fa',
+              color: theme.palette.mode === 'dark' ? '#e6edf3' : '#24292f',
+              fontFamily: 'monospace',
+              fontSize: '0.8rem',
+              overflowX: 'auto',
+              whiteSpace: 'pre',
+            }}
+          >
+            {configSnippet}
+          </Box>
+          <Tooltip title={copiedSnippet ? 'Copied!' : 'Copy config'}>
+            <IconButton
+              size="small"
+              onClick={() => copySnippet(configSnippet)}
+              sx={{
+                position: 'absolute',
+                top: 8,
+                right: 8,
+                backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)',
+                '&:hover': {
+                  backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.12)',
+                },
+              }}
+            >
+              {copiedSnippet ? <CheckIcon fontSize="small" color="success" /> : <ContentCopyIcon fontSize="small" />}
+            </IconButton>
+          </Tooltip>
+        </Box>
+
+        <Typography variant="caption" color="text.disabled" sx={{ display: 'block', mt: 1.5 }}>
+          💡 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.
+        </Typography>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/components/McpConfigDialog/index.ts

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