@nospt/plugin-dev-ai-hub 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,104 @@
+import * as react from 'react';
+import { ComponentType } from 'react';
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+import { AssetListFilter, AiAssetListResponse, AiAsset, AiHubProvider, AiHubStats } from '@nospt/plugin-dev-ai-hub-common';
+
+declare const devAiHubPlugin: _backstage_frontend_plugin_api.OverridableFrontendPlugin<{
+    root: _backstage_frontend_plugin_api.RouteRef<undefined>;
+}, {}, {
+    "api:dev-ai-hub": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+        kind: "api";
+        name: undefined;
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.AnyApiFactory, "core.api.factory", {}>;
+        inputs: {};
+        params: <TApi, TImpl extends TApi, TDeps extends { [name in string]: unknown; }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
+    }>;
+    "nav-item:dev-ai-hub": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+        kind: "nav-item";
+        name: undefined;
+        config: {};
+        configInput: {};
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<{
+            title: string;
+            icon: _backstage_frontend_plugin_api.IconComponent;
+            routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
+        }, "core.nav-item.target", {}>;
+        inputs: {};
+        params: {
+            title: string;
+            icon: _backstage_frontend_plugin_api.IconComponent;
+            routeRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
+        };
+    }>;
+    "page:dev-ai-hub": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
+        kind: "page";
+        name: undefined;
+        config: {
+            path: string | undefined;
+            title: string | undefined;
+        };
+        configInput: {
+            title?: string | undefined;
+            path?: string | undefined;
+        };
+        output: _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ExtensionDataRef<string, "core.title", {
+            optional: true;
+        }> | _backstage_frontend_plugin_api.ExtensionDataRef<_backstage_frontend_plugin_api.IconElement, "core.icon", {
+            optional: true;
+        }>;
+        inputs: {
+            pages: _backstage_frontend_plugin_api.ExtensionInput<_backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+                optional: true;
+            }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.title", {
+                optional: true;
+            }> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.IconElement, "core.icon", {
+                optional: true;
+            }>, {
+                singleton: false;
+                optional: false;
+                internal: false;
+            }>;
+        };
+        params: {
+            defaultPath?: [Error: `Use the 'path' param instead`];
+            path: string;
+            title?: string;
+            icon?: _backstage_frontend_plugin_api.IconElement;
+            loader?: () => Promise<react.JSX.Element>;
+            routeRef?: _backstage_frontend_plugin_api.RouteRef;
+            noHeader?: boolean;
+        };
+    }>;
+}>;
+
+/**
+ * Legacy Backstage frontend system support.
+ *
+ * For New Frontend System (NFS) use `devAiHubPlugin` from `./plugin` instead.
+ */
+
+/** Routable page extension for the legacy frontend system. */
+declare const DevAiHubPage: ComponentType;
+
+declare const devAiHubApiRef: _backstage_frontend_plugin_api.ApiRef<DevAiHubApi>;
+interface DevAiHubApi {
+    listAssets(filter?: AssetListFilter): Promise<AiAssetListResponse>;
+    getAsset(id: string): Promise<AiAsset>;
+    getAssetRaw(id: string): Promise<string>;
+    /** Returns the absolute URL for the download endpoint (zip for skills, md for others). */
+    getDownloadUrl(id: string): Promise<string>;
+    trackInstall(id: string): Promise<void>;
+    listProviders(): Promise<AiHubProvider[]>;
+    getProviderStatus(id: string): Promise<AiHubProvider>;
+    triggerSync(id: string): Promise<void>;
+    getStats(): Promise<AiHubStats>;
+}
+
+declare const rootRouteRef: _backstage_frontend_plugin_api.RouteRef<undefined>;
+
+export { DevAiHubPage, devAiHubApiRef, devAiHubPlugin, rootRouteRef };
+export type { DevAiHubApi };

package/dist/index.esm.js

@@ -0,0 +1,5 @@
+export { devAiHubPlugin } from './plugin.esm.js';
+export { DevAiHubPage } from './pluginLegacy.esm.js';
+export { devAiHubApiRef } from './api/DevAiHubClient.esm.js';
+export { rootRouteRef } from './routes.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/plugin.esm.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { createFrontendPlugin, ApiBlueprint, createApiFactory, fetchApiRef, discoveryApiRef, PageBlueprint, NavItemBlueprint } from '@backstage/frontend-plugin-api';
+import HubIcon from '@mui/icons-material/Hub';
+import { DevAiHubClient, devAiHubApiRef } from './api/DevAiHubClient.esm.js';
+import { rootRouteRef } from './routes.esm.js';
+
+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/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.DevAiHubPage, {}))
+      }
+    }),
+    NavItemBlueprint.make({
+      params: {
+        title: "AI Hub",
+        routeRef: rootRouteRef,
+        icon: HubIcon
+      }
+    })
+  ]
+});
+
+export { devAiHubPlugin };
+//# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.tsx"],"sourcesContent":["import {\n  createFrontendPlugin,\n  PageBlueprint,\n  ApiBlueprint,\n  NavItemBlueprint,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/frontend-plugin-api';\nimport HubIcon from '@mui/icons-material/Hub';\nimport { devAiHubApiRef, DevAiHubClient } from './api/DevAiHubClient';\nimport { rootRouteRef } from './routes';\n\nexport const devAiHubPlugin = createFrontendPlugin({\n  pluginId: 'dev-ai-hub',\n  routes: {\n    root: rootRouteRef,\n  },\n  extensions: [\n    ApiBlueprint.make({\n      params: defineParams =>\n        defineParams(\n          createApiFactory({\n            api: devAiHubApiRef,\n            deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },\n            factory: ({ discoveryApi, fetchApi }) =>\n              new DevAiHubClient(discoveryApi, fetchApi),\n          }),\n        ),\n    }),\n    PageBlueprint.make({\n      params: {\n        path: '/dev-ai-hub',\n        routeRef: rootRouteRef,\n        loader: () =>\n          import('./components/DevAiHubPage').then(m => <m.DevAiHubPage />),\n      },\n    }),\n    NavItemBlueprint.make({\n      params: {\n        title: 'AI Hub',\n        routeRef: rootRouteRef,\n        icon: HubIcon,\n      },\n    }),\n  ],\n});\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,iBAAiB,oBAAA,CAAqB;AAAA,EACjD,QAAA,EAAU,YAAA;AAAA,EACV,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAA,EAAY;AAAA,IACV,aAAa,IAAA,CAAK;AAAA,MAChB,QAAQ,CAAA,YAAA,KACN,YAAA;AAAA,QACE,gBAAA,CAAiB;AAAA,UACf,GAAA,EAAK,cAAA;AAAA,UACL,IAAA,EAAM,EAAE,YAAA,EAAc,eAAA,EAAiB,UAAU,WAAA,EAAY;AAAA,UAC7D,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,UAAS,KACjC,IAAI,cAAA,CAAe,YAAA,EAAc,QAAQ;AAAA,SAC5C;AAAA;AACH,KACH,CAAA;AAAA,IACD,cAAc,IAAA,CAAK;AAAA,MACjB,MAAA,EAAQ;AAAA,QACN,IAAA,EAAM,aAAA;AAAA,QACN,QAAA,EAAU,YAAA;AAAA,QACV,MAAA,EAAQ,MACN,OAAO,wCAA2B,CAAA,CAAE,IAAA,CAAK,CAAA,CAAA,qBAAK,GAAA,CAAC,CAAA,CAAE,YAAA,EAAF,EAAe,CAAE;AAAA;AACpE,KACD,CAAA;AAAA,IACD,iBAAiB,IAAA,CAAK;AAAA,MACpB,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,QAAA;AAAA,QACP,QAAA,EAAU,YAAA;AAAA,QACV,IAAA,EAAM;AAAA;AACR,KACD;AAAA;AAEL,CAAC;;;;"}

package/dist/pluginLegacy.esm.js

@@ -0,0 +1,27 @@
+import { createRouteRef, createPlugin, createApiFactory, fetchApiRef, discoveryApiRef, createRoutableExtension } from '@backstage/core-plugin-api';
+import { DevAiHubClient, devAiHubApiRef } from './api/DevAiHubClient.esm.js';
+
+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)
+    })
+  ]
+});
+const DevAiHubPage = devAiHubLegacyPlugin.provide(
+  createRoutableExtension({
+    name: "DevAiHubPage",
+    component: () => import('./components/DevAiHubPage/index.esm.js').then((m) => m.DevAiHubPage),
+    mountPoint: rootRouteRef
+  })
+);
+
+export { DevAiHubPage };
+//# sourceMappingURL=pluginLegacy.esm.js.map

package/dist/pluginLegacy.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pluginLegacy.esm.js","sources":["../src/pluginLegacy.ts"],"sourcesContent":["/**\n * Legacy Backstage frontend system support.\n *\n * For New Frontend System (NFS) use `devAiHubPlugin` from `./plugin` instead.\n */\nimport type { ComponentType } from 'react';\nimport {\n  createPlugin,\n  createRoutableExtension,\n  createRouteRef,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport { devAiHubApiRef, DevAiHubClient } from './api/DevAiHubClient';\n\nconst rootRouteRef = createRouteRef({ id: 'dev-ai-hub' });\n\nconst devAiHubLegacyPlugin = createPlugin({\n  id: 'dev-ai-hub',\n  routes: {\n    root: rootRouteRef,\n  },\n  apis: [\n    createApiFactory({\n      api: devAiHubApiRef,\n      deps: { discoveryApi: discoveryApiRef, fetchApi: fetchApiRef },\n      factory: ({ discoveryApi, fetchApi }) =>\n        new DevAiHubClient(discoveryApi, fetchApi),\n    }),\n  ],\n});\n\n/** Routable page extension for the legacy frontend system. */\nexport const DevAiHubPage: ComponentType = devAiHubLegacyPlugin.provide(\n  createRoutableExtension({\n    name: 'DevAiHubPage',\n    component: () =>\n      import('./components/DevAiHubPage').then(m => m.DevAiHubPage),\n    mountPoint: rootRouteRef,\n  }),\n);\n"],"names":[],"mappings":";;;AAgBA,MAAM,YAAA,GAAe,cAAA,CAAe,EAAE,EAAA,EAAI,cAAc,CAAA;AAExD,MAAM,uBAAuB,YAAA,CAAa;AAAA,EACxC,EAAA,EAAI,YAAA;AAAA,EACJ,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA,GACR;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,gBAAA,CAAiB;AAAA,MACf,GAAA,EAAK,cAAA;AAAA,MACL,IAAA,EAAM,EAAE,YAAA,EAAc,eAAA,EAAiB,UAAU,WAAA,EAAY;AAAA,MAC7D,OAAA,EAAS,CAAC,EAAE,YAAA,EAAc,UAAS,KACjC,IAAI,cAAA,CAAe,YAAA,EAAc,QAAQ;AAAA,KAC5C;AAAA;AAEL,CAAC,CAAA;AAGM,MAAM,eAA8B,oBAAA,CAAqB,OAAA;AAAA,EAC9D,uBAAA,CAAwB;AAAA,IACtB,IAAA,EAAM,cAAA;AAAA,IACN,SAAA,EAAW,MACT,OAAO,wCAA2B,EAAE,IAAA,CAAK,CAAA,CAAA,KAAK,EAAE,YAAY,CAAA;AAAA,IAC9D,UAAA,EAAY;AAAA,GACb;AACH;;;;"}

package/dist/routes.esm.js

@@ -0,0 +1,6 @@
+import { createRouteRef } from '@backstage/frontend-plugin-api';
+
+const rootRouteRef = createRouteRef();
+
+export { rootRouteRef };
+//# sourceMappingURL=routes.esm.js.map

package/dist/routes.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.esm.js","sources":["../src/routes.ts"],"sourcesContent":["import { createRouteRef } from '@backstage/frontend-plugin-api';\n\nexport const rootRouteRef = createRouteRef();\n"],"names":[],"mappings":";;AAEO,MAAM,eAAe,cAAA;;;;"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@nospt/plugin-dev-ai-hub",
+  "version": "0.1.0",
+  "description": "Frontend plugin for Dev AI Hub",
+  "license": "Apache-2.0",
+  "main": "./dist/index.esm.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "dev-ai-hub",
+    "pluginPackages": [
+      "@nospt/plugin-dev-ai-hub",
+      "@nospt/plugin-dev-ai-hub-backend",
+      "@nospt/plugin-dev-ai-hub-common",
+      "@nospt/plugin-dev-ai-hub-node"
+    ]
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start --config ../../app-config.dev.yaml",
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "lint": "backstage-cli package lint",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack",
+    "test": "backstage-cli package test --passWithNoTests",
+    "tsc": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@backstage/core-components": "*",
+    "@backstage/core-plugin-api": "*",
+    "@backstage/frontend-plugin-api": "*",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
+    "@nospt/plugin-dev-ai-hub-common": "*",
+    "react-markdown": "^9.0.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
+    "simple-icons": "^13.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "*",
+    "@backstage/dev-utils": "*",
+    "@backstage/test-utils": "*",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-syntax-highlighter": "^15.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "module": "./dist/index.esm.js"
+}

package/package.json-prepack

@@ -0,0 +1,75 @@
+{
+  "name": "@nospt/plugin-dev-ai-hub",
+  "version": "0.1.0",
+  "description": "Frontend plugin for Dev AI Hub",
+  "license": "Apache-2.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "dev-ai-hub",
+    "pluginPackages": [
+      "@nospt/plugin-dev-ai-hub",
+      "@nospt/plugin-dev-ai-hub-backend",
+      "@nospt/plugin-dev-ai-hub-common",
+      "@nospt/plugin-dev-ai-hub-node"
+    ]
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start --config ../../app-config.dev.yaml",
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "lint": "backstage-cli package lint",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack",
+    "test": "backstage-cli package test --passWithNoTests",
+    "tsc": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@backstage/core-components": "*",
+    "@backstage/core-plugin-api": "*",
+    "@backstage/frontend-plugin-api": "*",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
+    "@nospt/plugin-dev-ai-hub-common": "*",
+    "react-markdown": "^9.0.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
+    "simple-icons": "^13.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "*",
+    "@backstage/dev-utils": "*",
+    "@backstage/test-utils": "*",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-syntax-highlighter": "^15.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
+  }
+}

package/src/api/DevAiHubClient.ts

@@ -0,0 +1,110 @@
+import {
+  createApiRef,
+  DiscoveryApi,
+  FetchApi,
+} from '@backstage/core-plugin-api';
+import type {
+  AiAsset,
+  AiAssetListResponse,
+  AiHubProvider,
+  AiHubStats,
+  AssetListFilter,
+} from '@nospt/plugin-dev-ai-hub-common';
+
+export const devAiHubApiRef = createApiRef<DevAiHubApi>({
+  id: 'plugin.dev-ai-hub.service',
+});
+
+export interface DevAiHubApi {
+  listAssets(filter?: AssetListFilter): Promise<AiAssetListResponse>;
+  getAsset(id: string): Promise<AiAsset>;
+  getAssetRaw(id: string): Promise<string>;
+  /** Returns the absolute URL for the download endpoint (zip for skills, md for others). */
+  getDownloadUrl(id: string): Promise<string>;
+  trackInstall(id: string): Promise<void>;
+  listProviders(): Promise<AiHubProvider[]>;
+  getProviderStatus(id: string): Promise<AiHubProvider>;
+  triggerSync(id: string): Promise<void>;
+  getStats(): Promise<AiHubStats>;
+}
+
+export class DevAiHubClient implements DevAiHubApi {
+  constructor(
+    private readonly discoveryApi: DiscoveryApi,
+    private readonly fetchApi: FetchApi,
+  ) {}
+
+  private async baseUrl(): Promise<string> {
+    return this.discoveryApi.getBaseUrl('dev-ai-hub');
+  }
+
+  private async fetch<T>(path: string, init?: RequestInit): Promise<T> {
+    const base = await this.baseUrl();
+    const response = await this.fetchApi.fetch(`${base}${path}`, init);
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `Dev AI Hub API error ${response.status}: ${text}`,
+      );
+    }
+    return response.json() as Promise<T>;
+  }
+
+  async listAssets(filter?: AssetListFilter): Promise<AiAssetListResponse> {
+    const params = new URLSearchParams();
+    if (filter?.type) params.set('type', filter.type);
+    if (filter?.tool) params.set('tool', filter.tool);
+    if (filter?.search) params.set('search', filter.search);
+    if (filter?.providerId) params.set('provider', filter.providerId);
+    if (filter?.tags?.length) params.set('tags', filter.tags.join(','));
+    if (filter?.page) params.set('page', String(filter.page));
+    if (filter?.pageSize) params.set('pageSize', String(filter.pageSize));
+
+    const qs = params.toString();
+    return this.fetch<AiAssetListResponse>(`/assets${qs ? `?${qs}` : ''}`);
+  }
+
+  async getAsset(id: string): Promise<AiAsset> {
+    return this.fetch<AiAsset>(`/assets/${encodeURIComponent(id)}`);
+  }
+
+  async getAssetRaw(id: string): Promise<string> {
+    const base = await this.baseUrl();
+    const response = await this.fetchApi.fetch(
+      `${base}/assets/${encodeURIComponent(id)}/raw`,
+    );
+    if (!response.ok) throw new Error(`Failed to fetch raw asset: ${response.status}`);
+    return response.text();
+  }
+
+  async getDownloadUrl(id: string): Promise<string> {
+    const base = await this.baseUrl();
+    return `${base}/assets/${encodeURIComponent(id)}/download`;
+  }
+
+  async trackInstall(id: string): Promise<void> {
+    await this.fetch(`/assets/${encodeURIComponent(id)}/track-install`, {
+      method: 'POST',
+    });
+  }
+
+  async listProviders(): Promise<AiHubProvider[]> {
+    return this.fetch<AiHubProvider[]>('/providers');
+  }
+
+  async getProviderStatus(id: string): Promise<AiHubProvider> {
+    return this.fetch<AiHubProvider>(
+      `/providers/${encodeURIComponent(id)}/status`,
+    );
+  }
+
+  async triggerSync(id: string): Promise<void> {
+    await this.fetch(`/providers/${encodeURIComponent(id)}/sync`, {
+      method: 'POST',
+    });
+  }
+
+  async getStats(): Promise<AiHubStats> {
+    return this.fetch<AiHubStats>('/stats');
+  }
+}

package/src/components/AssetCard/AssetCard.test.tsx

@@ -0,0 +1,182 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { AssetCard } from './AssetCard';
+import type { AiAssetSummary } from '@nospt/plugin-dev-ai-hub-common';
+
+jest.mock('../ToolIcon', () => ({
+  ToolIcon: ({ tool }: { tool: string }) => <span data-testid={`tool-icon-${tool}`} />,
+}));
+
+const NOW = new Date('2026-03-14T12:00:00Z').getTime();
+
+function makeAsset(overrides?: Partial<AiAssetSummary>): AiAssetSummary {
+  return {
+    id: 'asset-1',
+    providerId: 'provider-1',
+    name: 'My Instruction',
+    description: 'A helpful coding instruction',
+    type: 'instruction',
+    tools: ['claude-code'],
+    tags: ['python', 'linting'],
+    author: 'Test Author',
+    version: '1.0.0',
+    installCount: 0,
+    syncedAt: '2026-03-14T12:00:00Z',
+    createdAt: '2026-03-01T00:00:00Z',
+    updatedAt: '2026-03-13T00:00:00Z', // 1 day ago — "New"
+    ...overrides,
+  };
+}
+
+describe('AssetCard', () => {
+  beforeEach(() => {
+    jest.spyOn(Date, 'now').mockReturnValue(NOW);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders asset name and description', () => {
+    render(<AssetCard asset={makeAsset()} onView={jest.fn()} onInstall={jest.fn()} />);
+    expect(screen.getByText('My Instruction')).toBeInTheDocument();
+    expect(screen.getByText('A helpful coding instruction')).toBeInTheDocument();
+  });
+
+  it('renders the type label', () => {
+    render(<AssetCard asset={makeAsset({ type: 'instruction' })} onView={jest.fn()} onInstall={jest.fn()} />);
+    expect(screen.getByText('Instruction')).toBeInTheDocument();
+  });
+
+  it('renders the correct type label for each type', () => {
+    const types = ['agent', 'skill', 'workflow'] as const;
+    const labels = ['Agent', 'Skill', 'Workflow'];
+
+    types.forEach((type, i) => {
+      const { unmount } = render(
+        <AssetCard asset={makeAsset({ type })} onView={jest.fn()} onInstall={jest.fn()} />,
+      );
+      expect(screen.getByText(labels[i])).toBeInTheDocument();
+      unmount();
+    });
+  });
+
+  it('renders author and version in the footer', () => {
+    render(<AssetCard asset={makeAsset()} onView={jest.fn()} onInstall={jest.fn()} />);
+    expect(screen.getByText(/v1\.0\.0/)).toBeInTheDocument();
+    expect(screen.getByText(/Test Author/)).toBeInTheDocument();
+  });
+
+  describe('"New" badge', () => {
+    it('shows "New" badge when updatedAt is within 14 days', () => {
+      const recentDate = new Date(NOW - 5 * 24 * 60 * 60 * 1000).toISOString(); // 5 days ago
+      render(
+        <AssetCard asset={makeAsset({ updatedAt: recentDate })} onView={jest.fn()} onInstall={jest.fn()} />,
+      );
+      expect(screen.getByText('New')).toBeInTheDocument();
+    });
+
+    it('does not show "New" badge when updatedAt is older than 14 days', () => {
+      const oldDate = new Date(NOW - 20 * 24 * 60 * 60 * 1000).toISOString(); // 20 days ago
+      render(
+        <AssetCard asset={makeAsset({ updatedAt: oldDate })} onView={jest.fn()} onInstall={jest.fn()} />,
+      );
+      expect(screen.queryByText('New')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('install count display', () => {
+    it('does not show install count when installCount is 0', () => {
+      render(<AssetCard asset={makeAsset({ installCount: 0 })} onView={jest.fn()} onInstall={jest.fn()} />);
+      expect(screen.queryByText('↓')).not.toBeInTheDocument();
+      expect(screen.queryByText('🔥')).not.toBeInTheDocument();
+    });
+
+    it('shows "↓" arrow with count when installCount > 0 and < 5', () => {
+      render(<AssetCard asset={makeAsset({ installCount: 3 })} onView={jest.fn()} onInstall={jest.fn()} />);
+      expect(screen.getByText('↓')).toBeInTheDocument();
+      expect(screen.getByText('3')).toBeInTheDocument();
+    });
+
+    it('shows 🔥 emoji when installCount >= 5 (popular threshold)', () => {
+      render(<AssetCard asset={makeAsset({ installCount: 5 })} onView={jest.fn()} onInstall={jest.fn()} />);
+      expect(screen.getByText('🔥')).toBeInTheDocument();
+      expect(screen.getByText('5')).toBeInTheDocument();
+    });
+
+    it('shows 🔥 emoji for installCount > 5', () => {
+      render(<AssetCard asset={makeAsset({ installCount: 42 })} onView={jest.fn()} onInstall={jest.fn()} />);
+      expect(screen.getByText('🔥')).toBeInTheDocument();
+      expect(screen.queryByText('↓')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('callbacks', () => {
+    it('calls onView with the asset id when "View details" button is clicked', () => {
+      const onView = jest.fn();
+      render(<AssetCard asset={makeAsset()} onView={onView} onInstall={jest.fn()} />);
+      fireEvent.click(screen.getByRole('button', { name: 'View details' }));
+      expect(onView).toHaveBeenCalledTimes(1);
+      expect(onView).toHaveBeenCalledWith('asset-1');
+    });
+
+    it('calls onInstall with the asset id when "Install in editor" button is clicked', () => {
+      const onInstall = jest.fn();
+      render(<AssetCard asset={makeAsset()} onView={jest.fn()} onInstall={onInstall} />);
+      fireEvent.click(screen.getByRole('button', { name: 'Install in editor' }));
+      expect(onInstall).toHaveBeenCalledTimes(1);
+      expect(onInstall).toHaveBeenCalledWith('asset-1');
+    });
+  });
+
+  describe('tags', () => {
+    it('renders tags as chips prefixed with #', () => {
+      render(
+        <AssetCard asset={makeAsset({ tags: ['python', 'linting'] })} onView={jest.fn()} onInstall={jest.fn()} />,
+      );
+      expect(screen.getByText('#python')).toBeInTheDocument();
+      expect(screen.getByText('#linting')).toBeInTheDocument();
+    });
+
+    it('renders at most 3 tags and shows "+N" for the rest', () => {
+      render(
+        <AssetCard
+          asset={makeAsset({ tags: ['a', 'b', 'c', 'd', 'e'] })}
+          onView={jest.fn()}
+          onInstall={jest.fn()}
+        />,
+      );
+      expect(screen.getByText('#a')).toBeInTheDocument();
+      expect(screen.getByText('#b')).toBeInTheDocument();
+      expect(screen.getByText('#c')).toBeInTheDocument();
+      expect(screen.queryByText('#d')).not.toBeInTheDocument();
+      expect(screen.getByText('+2')).toBeInTheDocument();
+    });
+
+    it('renders no tags section when tags is empty', () => {
+      render(<AssetCard asset={makeAsset({ tags: [] })} onView={jest.fn()} onInstall={jest.fn()} />);
+      expect(screen.queryByText(/#/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('tools', () => {
+    it('renders a tool icon for each tool', () => {
+      render(
+        <AssetCard
+          asset={makeAsset({ tools: ['claude-code', 'github-copilot'] })}
+          onView={jest.fn()}
+          onInstall={jest.fn()}
+        />,
+      );
+      expect(screen.getByTestId('tool-icon-claude-code')).toBeInTheDocument();
+      expect(screen.getByTestId('tool-icon-github-copilot')).toBeInTheDocument();
+    });
+
+    it('shows "Universal" label for the "all" tool', () => {
+      render(
+        <AssetCard asset={makeAsset({ tools: ['all'] })} onView={jest.fn()} onInstall={jest.fn()} />,
+      );
+      expect(screen.getByText('Universal')).toBeInTheDocument();
+    });
+  });
+});