chore: enhance plugin manifest

electron/core/plugin-manager/execution/Plugin.js

@@ -16,11 +16,23 @@ class Plugin {
   /** @type {boolean} Whether this plugin should be activated when its activation points are triggered. */
   active
 
-  constructor(name, url, activationPoints, active) {
+  /** @type {string} Plugin's description. */
+  description
+
+  /** @type {string} Plugin's version. */
+  version
+
+  /** @type {string} Plugin's logo. */
+  icon
+
+  constructor(name, url, activationPoints, active, description, version, icon) {
     this.name = name
     this.url = url
     this.activationPoints = activationPoints
     this.active = active
+    this.description = description
+    this.version = version
+    this.icon = icon
   }
 
   /**

electron/core/plugin-manager/execution/facade.js

@@ -69,7 +69,10 @@ export async function getActive() {
         plugin.name,
         plugin.url,
         plugin.activationPoints,
-        plugin.active
+        plugin.active,
+        plugin.description,
+        plugin.version,
+        plugin.icon
       )
   );
 }

electron/core/plugin-manager/pluginMgr/Plugin.js

@@ -18,6 +18,8 @@ class Plugin {
    * @property {string} version Version of the package as defined in the manifest.
    * @property {Array<string>} activationPoints List of {@link ./Execution-API#activationPoints|activation points}.
    * @property {string} main The entry point as defined in the main entry of the manifest.
+   * @property {string} description The description of plugin as defined in the manifest.
+   * @property {string} icon The icon of plugin as defined in the manifest.
    */
 
   /** @private */
@@ -75,6 +77,8 @@ class Plugin {
       this.version = mnf.version
       this.activationPoints = mnf.activationPoints || null
       this.main = mnf.main
+      this.description = mnf.description
+      this.icon = mnf.icon
 
     } catch (error) {
       throw new Error(`Package ${this.origin} does not contain a valid manifest: ${error}`)

electron/core/plugins/data-plugin/package.json

@@ -1,7 +1,8 @@
 {
   "name": "data-plugin",
-  "version": "2.1.0",
+  "version": "1.0.0",
-  "description": "",
+  "description": "Jan Database Plugin efficiently stores conversation and model data using SQLite, providing accessible data management",
+  "icon": "https://raw.githubusercontent.com/tailwindlabs/heroicons/88e98b0c2b458553fbadccddc2d2f878edc0387b/src/20/solid/circle-stack.svg",
   "main": "dist/index.js",
   "author": "Jan",
   "license": "MIT",

electron/core/plugins/inference-plugin/package.json

@@ -1,9 +1,10 @@
 {
   "name": "inference-plugin",
-  "version": "0.0.1",
+  "version": "1.0.0",
-  "description": "",
+  "description": "Inference Plugin, powered by @janhq/nitro, bring a high-performance Llama model inference in pure C++.",
+  "icon": "https://raw.githubusercontent.com/tailwindlabs/heroicons/88e98b0c2b458553fbadccddc2d2f878edc0387b/src/20/solid/command-line.svg",
   "main": "dist/index.js",
-  "author": "James",
+  "author": "Jan",
   "license": "MIT",
   "activationPoints": [
     "init"

electron/core/plugins/model-management-plugin/package.json

@@ -1,7 +1,8 @@
 {
   "name": "model-management-plugin",
-  "version": "0.0.1",
+  "version": "1.0.0",
-  "description": "",
+  "description": "Model Management Plugin leverages the HuggingFace API for model exploration and seamless downloads",
+  "icon": "https://raw.githubusercontent.com/tailwindlabs/heroicons/88e98b0c2b458553fbadccddc2d2f878edc0387b/src/20/solid/queue-list.svg",
   "main": "dist/index.js",
   "author": "James",
   "license": "MIT",

electron/core/plugins/monitoring-plugin/package.json

@@ -1,7 +1,8 @@
 {
   "name": "monitoring-plugin",
-  "version": "0.0.1",
+  "version": "1.0.0",
-  "description": "",
+  "description": "Utilizing systeminformation, it provides essential System and OS information retrieval",
+  "icon": "https://raw.githubusercontent.com/tailwindlabs/heroicons/88e98b0c2b458553fbadccddc2d2f878edc0387b/src/20/solid/cpu-chip.svg",
   "main": "dist/bundle.js",
   "author": "Jan",
   "license": "MIT",

web/app/_components/Preferences.tsx

@@ -5,7 +5,7 @@ import {
   plugins,
   extensionPoints,
   activationPoints,
-} from "../../../electron/core/plugin-manager/execution/index";
+} from "@/../../electron/core/plugin-manager/execution/index";
 import {
   ChartPieIcon,
   CommandLineIcon,
@@ -188,7 +188,7 @@ export const Preferences = () => {
             <CommandLineIcon width={30} />
             Installed Plugins
           </div>
-          <div className="flex flex-wrap">
+          <div className="grid grid-cols-2 items-stretch gap-4">
             {activePlugins
               .filter(
                 (e) =>
@@ -196,41 +196,51 @@ export const Preferences = () => {
                   e.name.toLowerCase().includes(search.toLowerCase())
               )
               .map((e) => (
-                <div key={e.name} className="mr-2 my-3 w-[400px]">
+                <div
-                  <a
+                  key={e.name}
-                    href="#"
+                  className="flex flex-col h-full p-6 bg-white border border-gray-200 rounded-sm dark:border-gray-300"
-                    className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
+                >
-                  >
+                  <div className="flex flex-row space-x-2 items-center">
-                    <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+                    <span className="relative inline-block mt-1">
-                      {e.name}
+                      <img
-                    </h5>
+                        className="h-14 w-14 rounded-md"
-                    <p className="font-normal text-gray-700 dark:text-gray-400">
+                        src={e.icon ?? "icons/app_icon.svg"}
-                      Activation: {e.activationPoints}
+                        alt=""
-                    </p>
+                      />
-                    <p className="font-normal text-gray-700 dark:text-gray-400 h-[24px] truncate w-full">
+                    </span>
-                      Url: {e.url}
+                    <div className="flex flex-col">
-                    </p>
+                      <p className="text-xl font-bold tracking-tight text-gray-900 dark:text-white capitalize">
-                    <div className="flex flex-row space-x-5">
+                        {e.name.replaceAll("-", " ")}
-                      <button
+                      </p>
-                        type="submit"
+                      <p className="font-normal text-gray-700 dark:text-gray-400">
-                        onClick={() => {
+                        Version: {e.version}
-                          uninstall(e.name);
+                      </p>
-                        }}
-                        className="mt-5 rounded-md bg-red-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
-                      >
-                        Uninstall
-                      </button>
-                      <button
-                        type="submit"
-                        onClick={() => {
-                          update(e.name);
-                        }}
-                        className="mt-5 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                      >
-                        Update
-                      </button>
                     </div>
-                  </a>
+                  </div>
+
+                  <p className="flex-1 mt-2 text-sm font-normal text-gray-500 dark:text-gray-400 w-full">
+                    {e.description ?? "Jan's Plugin"}
+                  </p>
+                  <div className="flex flex-row space-x-5">
+                    <button
+                      type="submit"
+                      onClick={() => {
+                        uninstall(e.name);
+                      }}
+                      className="mt-5 rounded-md bg-red-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                    >
+                      Uninstall
+                    </button>
+                    <button
+                      type="submit"
+                      onClick={() => {
+                        update(e.name);
+                      }}
+                      className="mt-5 rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                    >
+                      Update
+                    </button>
+                  </div>
                 </div>
               ))}
           </div>