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

package/src/components/AssetDetailPanel/AssetDetailPanel.module.css

@@ -1,207 +0,0 @@
-@layer components {
-  .drawer {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 640px;
-    max-width: 100vw;
-    background-color: var(--bui-bg-neutral-1);
-    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
-    z-index: 1300;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .overlay {
-    position: fixed;
-    inset: 0;
-    background-color: rgba(0, 0, 0, 0.9);
-    z-index: 1299;
-  }
-
-  .panelContainer {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .header {
-    padding: var(--bui-space-4);
-    display: flex;
-    align-items: flex-start;
-    gap: var(--bui-space-4);
-    border-bottom: 1px solid var(--bui-border-1);
-  }
-
-  .headerContent {
-    flex: 1;
-  }
-
-  .loadingRow {
-    display: flex;
-    align-items: center;
-    gap: var(--bui-space-2);
-  }
-
-  .nameRow {
-    display: flex;
-    align-items: center;
-    gap: var(--bui-space-2);
-    margin-bottom: var(--bui-space-1);
-  }
-
-  .typeTag {
-    font-weight: 600;
-  }
-
-  .tabBar {
-    border-bottom: 1px solid var(--bui-border-1);
-    padding: 0 var(--bui-space-4);
-  }
-
-  .contentArea {
-    flex: 1;
-    overflow: auto;
-    padding: var(--bui-space-4);
-  }
-
-  .markdownContent {
-    font-size: 0.9375rem;
-    line-height: 1.7;
-  }
-
-  .markdownContent h1,
-  .markdownContent h2,
-  .markdownContent h3,
-  .markdownContent h4,
-  .markdownContent h5,
-  .markdownContent h6 {
-    margin-top: var(--bui-space-4);
-    margin-bottom: var(--bui-space-2);
-    font-weight: 700;
-  }
-
-  .markdownContent p {
-    margin-bottom: var(--bui-space-2);
-    line-height: 1.7;
-  }
-
-  .markdownContent ul,
-  .markdownContent ol {
-    padding-left: var(--bui-space-6);
-    margin-bottom: var(--bui-space-2);
-  }
-
-  .markdownContent li {
-    margin-bottom: var(--bui-space-1);
-  }
-
-  .markdownContent blockquote {
-    border-left: 3px solid var(--bui-ring);
-    padding-left: var(--bui-space-3);
-    color: var(--bui-fg-secondary);
-    margin: var(--bui-space-2) 0;
-    margin-left: 0;
-  }
-
-  .markdownContent table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: var(--bui-space-2);
-  }
-
-  .markdownContent th,
-  .markdownContent td {
-    border: 1px solid var(--bui-border-1);
-    padding: var(--bui-space-2) var(--bui-space-3);
-    font-size: 0.875rem;
-  }
-
-  .markdownContent th {
-    background-color: var(--bui-bg-neutral-1-hover);
-    font-weight: 700;
-  }
-
-  .markdownContent code {
-    background-color: var(--bui-bg-neutral-1-hover);
-    padding: 1px var(--bui-space-1);
-    border-radius: var(--bui-radius-2);
-    font-family: monospace;
-    font-size: 0.875em;
-  }
-
-  .markdownContent pre code {
-    background-color: transparent;
-    padding: 0;
-  }
-
-  .codeBlockWrapper {
-    margin: var(--bui-space-2) 0;
-  }
-
-  .metaSection {
-    display: flex;
-    flex-direction: column;
-    gap: var(--bui-space-3);
-  }
-
-  .metaRow {
-    display: flex;
-    align-items: baseline;
-    gap: var(--bui-space-2);
-  }
-
-  .metaLabel {
-    min-width: 90px;
-    flex-shrink: 0;
-  }
-
-  .chipsRow {
-    display: flex;
-    gap: var(--bui-space-2);
-    flex-wrap: wrap;
-    margin-top: var(--bui-space-1);
-  }
-
-  .bundledHeader {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-bottom: var(--bui-space-1);
-  }
-
-  .rawYaml {
-    margin: 0;
-    padding: var(--bui-space-4);
-    border-radius: var(--bui-radius-2);
-    border: 1px solid var(--bui-border-1);
-    overflow: auto;
-    font-size: 0.8rem;
-    font-family: monospace;
-    white-space: pre-wrap;
-    word-break: break-word;
-    background-color: var(--bui-bg-neutral-1-hover);
-  }
-
-  .actions {
-    padding: var(--bui-space-4);
-    border-top: 1px solid var(--bui-border-1);
-    display: flex;
-    gap: var(--bui-space-2);
-    flex-wrap: wrap;
-  }
-
-  .repoLink {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--bui-space-1);
-  }
-
-  .divider {
-    height: 1px;
-    background-color: var(--bui-border-1);
-    border: none;
-    margin: 0;
-  }
-}

package/src/components/AssetDetailPanel/AssetDetailPanel.tsx

@@ -1,313 +0,0 @@
-import { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-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;
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const { oneLight } = require('react-syntax-highlighter/dist/esm/styles/prism');
-
-const TYPE_COLORS: Record<AssetType, string> = {
-  instruction: '#1976d2',
-  agent: '#7b1fa2',
-  skill: '#388e3c',
-  workflow: '#f57c00',
-};
-
-interface AssetDetailPanelProps {
-  assetId: string | null;
-  onClose: () => void;
-}
-
-export function AssetDetailPanel({ assetId, onClose }: AssetDetailPanelProps) {
-  const [snackbar, setSnackbar] = useState<string | null>(null);
-  const { asset, loading } = useAssetDetail(assetId);
-
-  const handleCopy = () => {
-    if (!asset) return;
-    navigator.clipboard.writeText(asset.content).then(() =>
-      setSnackbar('Markdown copied to clipboard!'),
-    );
-  };
-
-  if (!assetId) return null;
-
-  return (
-    <>
-      {/* Overlay */}
-      <div className={styles.overlay} onClick={onClose} role="presentation" />
-
-      {/* Drawer */}
-      <div className={styles.drawer}>
-        <Flex className={styles.panelContainer}>
-          {/* Header */}
-          <Flex className={styles.header}>
-            <Box className={styles.headerContent}>
-              {loading || !asset ? (
-                <Flex className={styles.loadingRow}>
-                  <Skeleton style={{ width: 16, height: 16 }} />
-                  <Text variant="body-small" color="secondary">
-                    Loading...
-                  </Text>
-                </Flex>
-              ) : (
-                <>
-                  <Flex className={styles.nameRow}>
-                    <Text variant="title-small" weight="bold">
-                      {asset.name}
-                    </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}
-                  </Text>
-                </>
-              )}
-            </Box>
-            <ButtonIcon
-              aria-label="Close"
-              icon={<RiCloseLine size={20} />}
-              variant="tertiary"
-              onPress={onClose}
-            />
-          </Flex>
-
-          {/* 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>
-
-            <Box className={styles.contentArea}>
-              {loading && (
-                <Flex style={{ justifyContent: 'center', paddingTop: 'var(--bui-space-8)' }}>
-                  <Skeleton style={{ width: '100%', height: 200 }} />
-                </Flex>
-              )}
-
-              {!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>
-
-                  <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} />
-
-                      <hr className={styles.divider} />
-
-                      <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.tags.length > 0 && (
-                        <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>
-                      )}
-
-                      {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>
-                        <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>
-                    </Flex>
-                  </TabPanel>
-
-                  <TabPanel id="raw">
-                    <pre className={styles.rawYaml}>
-                      {asset.yamlRaw}
-                    </pre>
-                  </TabPanel>
-                </>
-              )}
-            </Box>
-          </Tabs>
-
-          {/* Actions */}
-          <Flex className={styles.actions}>
-            <Button
-              variant="primary"
-              onClick={handleCopy}
-              isDisabled={!asset}
-            >
-              <RiFileCopyLine size={16} />
-              Copy Markdown
-            </Button>
-
-            <Button
-              variant="secondary"
-              onClick={() => asset && window.open(asset.repoUrl, '_blank')}
-              isDisabled={!asset}
-            >
-              <RiExternalLinkLine size={16} />
-              Open in Repo
-            </Button>
-          </Flex>
-        </Flex>
-      </div>
-
-      {/* 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 (
-    <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/AssetDetailPanel/index.ts

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

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

@@ -1,67 +0,0 @@
-@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;
-  }
-}