@nospt/plugin-dev-ai-hub 0.1.0 → 0.2.0

package/src/components/AssetDetailPanel/AssetDetailPanel.tsx

@@ -1,25 +1,14 @@
 import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import Alert from '@mui/material/Alert';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import CircularProgress from '@mui/material/CircularProgress';
-import Divider from '@mui/material/Divider';
-import Drawer from '@mui/material/Drawer';
-import IconButton from '@mui/material/IconButton';
-import Link from '@mui/material/Link';
-import Snackbar from '@mui/material/Snackbar';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import Typography from '@mui/material/Typography';
-import CloseIcon from '@mui/icons-material/Close';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import FolderZipIcon from '@mui/icons-material/FolderZip';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import {
+  Alert, Box, Flex, Text, Button, ButtonIcon, Tag, TagGroup, Skeleton, Link,
+  Tabs, TabList, Tab, TabPanel,
+} from '@backstage/ui';
+import { RiCloseLine, RiFileCopyLine, RiFolderZipLine, RiExternalLinkLine } from '@remixicon/react';
 import type { AssetType } from '@nospt/plugin-dev-ai-hub-common';
 import { useAssetDetail } from '../../hooks';
+import styles from './AssetDetailPanel.module.css';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism').default;
@@ -39,7 +28,6 @@ interface AssetDetailPanelProps {
 }
 
 export function AssetDetailPanel({ assetId, onClose }: AssetDetailPanelProps) {
-  const [tab, setTab] = useState(0);
   const [snackbar, setSnackbar] = useState<string | null>(null);
   const { asset, loading } = useAssetDetail(assetId);
 
@@ -50,328 +38,276 @@ export function AssetDetailPanel({ assetId, onClose }: AssetDetailPanelProps) {
     );
   };
 
+  if (!assetId) return null;
+
   return (
     <>
-      <Drawer
-        anchor="right"
-        open={!!assetId}
-        onClose={onClose}
-        PaperProps={{ sx: { width: { xs: '100vw', md: 640 } } }}
-      >
-        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Overlay */}
+      <div className={styles.overlay} onClick={onClose} role="presentation" />
+
+      {/* Drawer */}
+      <div className={styles.drawer}>
+        <Flex className={styles.panelContainer}>
           {/* Header */}
-          <Box
-            sx={{
-              p: 2,
-              display: 'flex',
-              alignItems: 'flex-start',
-              gap: 2,
-              borderBottom: 1,
-              borderColor: 'divider',
-            }}
-          >
-            <Box sx={{ flex: 1 }}>
+          <Flex className={styles.header}>
+            <Box className={styles.headerContent}>
               {loading || !asset ? (
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <CircularProgress size={16} />
-                  <Typography variant="body2" color="text.secondary">
+                <Flex className={styles.loadingRow}>
+                  <Skeleton style={{ width: 16, height: 16 }} />
+                  <Text variant="body-small" color="secondary">
                     Loading...
-                  </Typography>
-                </Box>
+                  </Text>
+                </Flex>
               ) : (
                 <>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
-                    <Typography variant="h6" fontWeight={700}>
+                  <Flex className={styles.nameRow}>
+                    <Text variant="title-small" weight="bold">
                       {asset.name}
-                    </Typography>
-                    <Chip
-                      label={asset.type}
-                      size="small"
-                      sx={{
-                        backgroundColor: `${TYPE_COLORS[asset.type]}20`,
-                        color: TYPE_COLORS[asset.type],
-                        fontWeight: 600,
-                      }}
-                    />
-                  </Box>
-                  <Typography variant="body2" color="text.secondary">
+                    </Text>
+                    <TagGroup aria-label="Asset type">
+                      <Tag
+                        id={asset.type}
+                        size="small"
+                        className={styles.typeTag}
+                        style={{
+                          backgroundColor: `${TYPE_COLORS[asset.type]}20`,
+                          color: TYPE_COLORS[asset.type],
+                        }}
+                      >
+                        {asset.type}
+                      </Tag>
+                    </TagGroup>
+                  </Flex>
+                  <Text variant="body-medium" color="secondary">
                     {asset.description}
-                  </Typography>
+                  </Text>
                 </>
               )}
             </Box>
-            <IconButton onClick={onClose} size="small">
-              <CloseIcon />
-            </IconButton>
-          </Box>
+            <ButtonIcon
+              aria-label="Close"
+              icon={<RiCloseLine size={20} />}
+              variant="tertiary"
+              onPress={onClose}
+            />
+          </Flex>
 
           {/* Tabs */}
-          <Tabs
-            value={tab}
-            onChange={(_, v) => setTab(v)}
-            sx={{ borderBottom: 1, borderColor: 'divider', px: 2 }}
-          >
-            <Tab label="Preview" />
-            <Tab label="Metadata" />
-            <Tab label="Raw YAML" />
-          </Tabs>
+          <Tabs defaultSelectedKey="preview">
+            <TabList className={styles.tabBar}>
+              <Tab id="preview">Preview</Tab>
+              <Tab id="metadata">Metadata</Tab>
+              <Tab id="raw">Raw YAML</Tab>
+            </TabList>
 
-          {/* Content */}
-          <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
-            {loading && (
-              <Box sx={{ display: 'flex', justifyContent: 'center', pt: 4 }}>
-                <CircularProgress />
-              </Box>
-            )}
-
-            {!loading && asset && (
-              <>
-                {tab === 0 && (
-                  <Box
-                    sx={{
-                      '& h1,h2,h3,h4,h5,h6': { mt: 2, mb: 1, fontWeight: 700 },
-                      '& p': { mb: 1, lineHeight: 1.7 },
-                      '& ul, & ol': { pl: 2.5, mb: 1 },
-                      '& li': { mb: 0.5 },
-                      '& blockquote': {
-                        borderLeft: '3px solid',
-                        borderColor: 'primary.main',
-                        pl: 1.5,
-                        color: 'text.secondary',
-                        my: 1,
-                        ml: 0,
-                      },
-                      '& table': { width: '100%', borderCollapse: 'collapse', mb: 1 },
-                      '& th, & td': {
-                        border: '1px solid',
-                        borderColor: 'divider',
-                        px: 1.5,
-                        py: 0.75,
-                        fontSize: '0.875rem',
-                      },
-                      '& th': { backgroundColor: 'action.hover', fontWeight: 700 },
-                      '& code': {
-                        bgcolor: 'action.hover',
-                        px: 0.5,
-                        py: 0.2,
-                        borderRadius: 0.5,
-                        fontFamily: 'monospace',
-                        fontSize: '0.875em',
-                      },
-                      '& pre code': { bgcolor: 'transparent', px: 0, py: 0 },
-                    }}
-                  >
-                    <ReactMarkdown
-                      remarkPlugins={[remarkGfm]}
-                      components={{
-                        pre: ({ children }) => <Box sx={{ my: 1 }}>{children}</Box>,
-                        code({ className, children }) {
-                          const match = /language-(\w+)/.exec(className || '');
-                          const code = String(children).replace(/\n$/, '');
-                          const isBlock = code.includes('\n') || !!match;
-                          return isBlock ? (
-                            <SyntaxHighlighter
-                              style={oneLight}
-                              language={match?.[1] ?? 'text'}
-                              PreTag="div"
-                              customStyle={{
-                                borderRadius: 8,
-                                fontSize: '0.8rem',
-                                margin: 0,
-                                border: '1px solid rgba(0,0,0,0.08)',
-                              }}
-                            >
-                              {code}
-                            </SyntaxHighlighter>
-                          ) : (
-                            <code className={className}>{children}</code>
-                          );
-                        },
-                      }}
-                    >
-                      {asset.content}
-                    </ReactMarkdown>
-                  </Box>
-                )}
+            <Box className={styles.contentArea}>
+              {loading && (
+                <Flex style={{ justifyContent: 'center', paddingTop: 'var(--bui-space-8)' }}>
+                  <Skeleton style={{ width: '100%', height: 200 }} />
+                </Flex>
+              )}
 
-                {tab === 1 && (
-                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                    <MetaRow label="Author" value={asset.author} />
-                    <MetaRow label="Version" value={asset.version} />
-                    <MetaRow label="Provider" value={asset.providerId} />
-                    {asset.commitSha && (
-                      <MetaRow label="Commit" value={asset.commitSha.slice(0, 8)} />
-                    )}
-                    <MetaRow label="Last synced" value={new Date(asset.syncedAt).toLocaleString()} />
-                    <MetaRow label="Branch" value={asset.branch} />
+              {!loading && asset && (
+                <>
+                  <TabPanel id="preview">
+                    <div className={styles.markdownContent}>
+                      <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        components={{
+                          pre: ({ children }) => <div className={styles.codeBlockWrapper}>{children}</div>,
+                          code({ className, children }) {
+                            const match = /language-(\w+)/.exec(className || '');
+                            const code = String(children).replace(/\n$/, '');
+                            const isBlock = code.includes('\n') || !!match;
+                            return isBlock ? (
+                              <SyntaxHighlighter
+                                style={oneLight}
+                                language={match?.[1] ?? 'text'}
+                                PreTag="div"
+                                customStyle={{
+                                  borderRadius: 8,
+                                  fontSize: '0.8rem',
+                                  margin: 0,
+                                  border: '1px solid rgba(0,0,0,0.08)',
+                                }}
+                              >
+                                {code}
+                              </SyntaxHighlighter>
+                            ) : (
+                              <code className={className}>{children}</code>
+                            );
+                          },
+                        }}
+                      >
+                        {asset.content}
+                      </ReactMarkdown>
+                    </div>
+                  </TabPanel>
 
-                    <Divider />
+                  <TabPanel id="metadata">
+                    <Flex className={styles.metaSection}>
+                      <MetaRow label="Author" value={asset.author} />
+                      <MetaRow label="Version" value={asset.version} />
+                      <MetaRow label="Provider" value={asset.providerId} />
+                      {asset.commitSha && (
+                        <MetaRow label="Commit" value={asset.commitSha.slice(0, 8)} />
+                      )}
+                      <MetaRow label="Last synced" value={new Date(asset.syncedAt).toLocaleString()} />
+                      <MetaRow label="Branch" value={asset.branch} />
 
-                    <Box>
-                      <Typography variant="caption" color="text.secondary">
-                        Compatible tools
-                      </Typography>
-                      <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
-                        {asset.tools.map(t => (
-                          <Chip key={t} label={t} size="small" />
-                        ))}
-                      </Box>
-                    </Box>
+                      <hr className={styles.divider} />
 
-                    {asset.tags.length > 0 && (
                       <Box>
-                        <Typography variant="caption" color="text.secondary">
-                          Tags
-                        </Typography>
-                        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mt: 0.5 }}>
-                          {asset.tags.map(t => (
-                            <Chip key={t} label={t} size="small" variant="outlined" />
-                          ))}
-                        </Box>
+                        <Text variant="body-small" color="secondary">
+                          Compatible tools
+                        </Text>
+                        <Flex className={styles.chipsRow}>
+                          <TagGroup aria-label="Compatible tools">
+                            {asset.tools.map(t => (
+                              <Tag key={t} id={t} size="small">{t}</Tag>
+                            ))}
+                          </TagGroup>
+                        </Flex>
                       </Box>
-                    )}
 
-                   {asset.type === 'skill' && (
-                      <>
-                        <Divider />
+                      {asset.tags.length > 0 && (
                         <Box>
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75, mb: 0.5 }}>
-                            <FolderZipIcon sx={{ fontSize: '0.85rem', color: 'text.secondary' }} />
-                            <Typography variant="caption" color="text.secondary">
-                              Bundled files
-                            </Typography>
-                          </Box>
-                          {asset.resourcesContent && Object.keys(asset.resourcesContent).length > 0 ? (
-                            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mt: 0.5 }}>
-                              <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
-                                <Chip
-                                  label="SKILL.md"
-                                  size="small"
-                                  sx={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}
-                                />
-                                {Object.keys(asset.resourcesContent).map(p => (
-                                  <Chip
-                                    key={p}
-                                    label={p}
-                                    size="small"
-                                    variant="outlined"
-                                    sx={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}
-                                  />
-                                ))}
-                              </Box>
-                              <Typography variant="caption" color="text.disabled">
-                                Downloads as .zip containing all files above.
-                              </Typography>
-                            </Box>
-                          ) : (
-                            <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mt: 0.5 }}>
-                              <Chip
-                                label="SKILL.md"
-                                size="small"
-                                sx={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}
-                              />
-                            </Box>
-                          )}
+                          <Text variant="body-small" color="secondary">
+                            Tags
+                          </Text>
+                          <Flex className={styles.chipsRow}>
+                            <TagGroup aria-label="Tags">
+                              {asset.tags.map(t => (
+                                <Tag key={t} id={t} size="small">{t}</Tag>
+                              ))}
+                            </TagGroup>
+                          </Flex>
                         </Box>
-                      </>
-                    )}
+                      )}
 
-                    <Divider />
+                      {asset.type === 'skill' && (
+                        <>
+                          <hr className={styles.divider} />
+                          <Box>
+                            <Flex className={styles.bundledHeader}>
+                              <RiFolderZipLine size={14} style={{ color: 'var(--bui-fg-secondary)' }} />
+                              <Text variant="body-small" color="secondary">
+                                Bundled files
+                              </Text>
+                            </Flex>
+                            {asset.resourcesContent && Object.keys(asset.resourcesContent).length > 0 ? (
+                              <Flex direction="column" style={{ gap: 'var(--bui-space-1)', marginTop: 'var(--bui-space-1)' }}>
+                                <TagGroup aria-label="Bundled files">
+                                  <Flex className={styles.chipsRow}>
+                                    <Tag id="skill-md" size="small" style={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}>
+                                      SKILL.md
+                                    </Tag>
+                                    {Object.keys(asset.resourcesContent).map(p => (
+                                      <Tag key={p} id={p} size="small" style={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}>
+                                        {p}
+                                      </Tag>
+                                    ))}
+                                  </Flex>
+                                </TagGroup>
+                                <Text variant="body-small" color="secondary">
+                                  Downloads as .zip containing all files above.
+                                </Text>
+                              </Flex>
+                            ) : (
+                              <TagGroup aria-label="Bundled files">
+                                <Flex className={styles.chipsRow}>
+                                  <Tag id="skill-md-only" size="small" style={{ fontFamily: 'monospace', fontSize: '0.7rem', height: 20 }}>
+                                    SKILL.md
+                                  </Tag>
+                                </Flex>
+                              </TagGroup>
+                            )}
+                          </Box>
+                        </>
+                      )}
+
+                      <hr className={styles.divider} />
 
-                    <Box>
-                      <Typography variant="caption" color="text.secondary">
-                        Repository
-                      </Typography>
                       <Box>
-                        <Link
-                          href={asset.repoUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          variant="body2"
-                        >
-                          {asset.repoUrl} <OpenInNewIcon sx={{ fontSize: 12 }} />
-                        </Link>
+                        <Text variant="body-small" color="secondary">
+                          Repository
+                        </Text>
+                        <Box>
+                          <Link
+                            href={asset.repoUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={styles.repoLink}
+                          >
+                            {asset.repoUrl} <RiExternalLinkLine size={12} />
+                          </Link>
+                        </Box>
                       </Box>
-                    </Box>
-                  </Box>
-                )}
+                    </Flex>
+                  </TabPanel>
 
-                {tab === 2 && (
-                  <Box
-                    component="pre"
-                    sx={{
-                      bgcolor: 'action.hover',
-                      p: 2,
-                      borderRadius: 1,
-                      overflow: 'auto',
-                      fontSize: '0.8rem',
-                      fontFamily: 'monospace',
-                      whiteSpace: 'pre-wrap',
-                      wordBreak: 'break-word',
-                      border: '1px solid',
-                      borderColor: 'divider',
-                    }}
-                  >
-                    {asset.yamlRaw}
-                  </Box>
-                )}
-              </>
-            )}
-          </Box>
+                  <TabPanel id="raw">
+                    <pre className={styles.rawYaml}>
+                      {asset.yamlRaw}
+                    </pre>
+                  </TabPanel>
+                </>
+              )}
+            </Box>
+          </Tabs>
 
           {/* Actions */}
-          <Box
-            sx={{
-              p: 2,
-              borderTop: 1,
-              borderColor: 'divider',
-              display: 'flex',
-              gap: 1,
-              flexWrap: 'wrap',
-            }}
-          >
+          <Flex className={styles.actions}>
             <Button
-              variant="contained"
-              startIcon={<ContentCopyIcon />}
+              variant="primary"
               onClick={handleCopy}
-              disabled={!asset}
+              isDisabled={!asset}
             >
+              <RiFileCopyLine size={16} />
               Copy Markdown
             </Button>
 
             <Button
-              variant="outlined"
-              startIcon={<OpenInNewIcon />}
+              variant="secondary"
               onClick={() => asset && window.open(asset.repoUrl, '_blank')}
-              disabled={!asset}
+              isDisabled={!asset}
             >
+              <RiExternalLinkLine size={16} />
               Open in Repo
             </Button>
-          </Box>
-        </Box>
-      </Drawer>
+          </Flex>
+        </Flex>
+      </div>
 
-      <Snackbar
-        open={!!snackbar}
-        autoHideDuration={2500}
-        onClose={() => setSnackbar(null)}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      >
-        <Alert severity="success" onClose={() => setSnackbar(null)}>
-          {snackbar}
-        </Alert>
-      </Snackbar>
+      {/* Snackbar replacement — simple toast */}
+      {snackbar && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 24,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1400,
+          }}
+        >
+          <Alert
+            status="success"
+            icon
+            description={snackbar}
+          />
+        </div>
+      )}
     </>
   );
 }
 
 function MetaRow({ label, value }: { label: string; value: string }) {
   return (
-    <Box>
-      <Typography variant="caption" color="text.secondary">
-        {label}
-      </Typography>
-      <Typography variant="body2">{value}</Typography>
-    </Box>
+    <Flex className={styles.metaRow}>
+      <Text variant="body-medium" color="secondary" className={styles.metaLabel}>
+        {label}:
+      </Text>
+      <Text variant="body-medium" weight="bold">{value}</Text>
+    </Flex>
   );
 }

package/src/components/AssetFilters/AssetFilters.module.css

@@ -0,0 +1,67 @@
+@layer components {
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bui-space-4);
+    margin-bottom: var(--bui-space-6);
+  }
+
+  .searchField {
+    width: 100%;
+  }
+
+  .filtersRow {
+    display: flex;
+    gap: var(--bui-space-6);
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .filterLabel {
+    margin-bottom: var(--bui-space-2);
+    display: block;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+  }
+
+  .filterChips {
+    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;
+  }
+
+  .filterChip :global(.bui-ToggleButtonContent) {
+    display: flex;
+    align-items: center;
+  }
+
+  .filterChip svg {
+    display: block;
+  }
+
+  .toolChipSelected {
+    font-weight: 700;
+  }
+
+  .tagChip {
+    font-size: 0.7rem;
+    border-radius: var(--bui-radius-2);
+    border: 1px solid;
+    cursor: pointer;
+  }
+
+  .tagChip :global(.bui-ToggleButtonContent) {
+    display: flex;
+    align-items: center;
+  }
+}