@nospt/plugin-dev-ai-hub 0.1.0

package/src/components/ToolIcon/ToolIcon.tsx

@@ -0,0 +1,49 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import AllInclusiveIcon from '@mui/icons-material/AllInclusive';
+import NearMeIcon from '@mui/icons-material/NearMe';
+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 extends Omit<SvgIconProps, 'color'> {
+  tool: AiTool;
+  /** Use the brand's official color. Defaults to true. */
+  branded?: boolean;
+}
+
+export function ToolIcon({ tool, branded = true, sx, ...props }: ToolIconProps) {
+  if (tool === 'all') {
+    return <AllInclusiveIcon {...props} sx={{ color: 'text.secondary', ...sx }} titleAccess="Universal" />;
+  }
+
+  if (tool === 'cursor') {
+    return (
+      <NearMeIcon
+        {...props}
+        sx={{ color: branded ? 'text.primary' : 'inherit', ...sx }}
+        titleAccess="Cursor"
+      />
+    );
+  }
+
+  const cfg = TOOL_ICON[tool as SvgTool];
+  if (!cfg) return null;
+
+  return (
+    <SvgIcon
+      {...props}
+      sx={{ color: branded ? `#${cfg.hex}` : 'inherit', ...sx }}
+      titleAccess={cfg.label}
+      viewBox="0 0 24 24"
+    >
+      <path d={cfg.path} />
+    </SvgIcon>
+  );
+}

package/src/components/ToolIcon/index.ts

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

package/src/hooks/index.ts

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,10 @@
+// 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 } from './routes';

package/src/plugin.tsx

@@ -0,0 +1,47 @@
+import {
+  createFrontendPlugin,
+  PageBlueprint,
+  ApiBlueprint,
+  NavItemBlueprint,
+  createApiFactory,
+  discoveryApiRef,
+  fetchApiRef,
+} from '@backstage/frontend-plugin-api';
+import HubIcon from '@mui/icons-material/Hub';
+import { devAiHubApiRef, DevAiHubClient } from './api/DevAiHubClient';
+import { rootRouteRef } from './routes';
+
+export const devAiHubPlugin = createFrontendPlugin({
+  pluginId: 'dev-ai-hub',
+  routes: {
+    root: rootRouteRef,
+  },
+  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',
+        routeRef: rootRouteRef,
+        loader: () =>
+          import('./components/DevAiHubPage').then(m => <m.DevAiHubPage />),
+      },
+    }),
+    NavItemBlueprint.make({
+      params: {
+        title: 'AI Hub',
+        routeRef: rootRouteRef,
+        icon: HubIcon,
+      },
+    }),
+  ],
+});

package/src/pluginLegacy.ts

@@ -0,0 +1,42 @@
+/**
+ * Legacy Backstage frontend system support.
+ *
+ * For New Frontend System (NFS) use `devAiHubPlugin` from `./plugin` instead.
+ */
+import type { ComponentType } from 'react';
+import {
+  createPlugin,
+  createRoutableExtension,
+  createRouteRef,
+  createApiFactory,
+  discoveryApiRef,
+  fetchApiRef,
+} from '@backstage/core-plugin-api';
+import { devAiHubApiRef, DevAiHubClient } from './api/DevAiHubClient';
+
+const rootRouteRef = createRouteRef({ id: 'dev-ai-hub' });
+
+const devAiHubLegacyPlugin = createPlugin({
+  id: 'dev-ai-hub',
+  routes: {
+    root: rootRouteRef,
+  },
+  apis: [
+    createApiFactory({
+      api: devAiHubApiRef,
+      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },
+      factory: ({ discoveryApi, fetchApi }) =>
+        new DevAiHubClient(discoveryApi, fetchApi),
+    }),
+  ],
+});
+
+/** Routable page extension for the legacy frontend system. */
+export const DevAiHubPage: ComponentType = devAiHubLegacyPlugin.provide(
+  createRoutableExtension({
+    name: 'DevAiHubPage',
+    component: () =>
+      import('./components/DevAiHubPage').then(m => m.DevAiHubPage),
+    mountPoint: rootRouteRef,
+  }),
+);

package/src/routes.ts

@@ -0,0 +1,3 @@
+import { createRouteRef } from '@backstage/frontend-plugin-api';
+
+export const rootRouteRef = createRouteRef();

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}