@bsb/registry 1.0.1

package/lib/plugins/service-bsb-registry-ui/templates/pages/plugin-detail.hbs

@@ -0,0 +1,537 @@
+<section class="plugins">
+  <div class="container">
+    <div class="breadcrumb">
+      <a href="/plugins">&larr; Back to Browse</a>
+    </div>
+
+    <div class="detail-card plugin-hero-card">
+      <div class="plugin-tags detail-top-tags">
+        <span class="plugin-badge badge-language">{{plugin.language}}</span>
+        <span class="plugin-badge badge-category">{{plugin.category}}</span>
+        {{#if plugin.badges}}
+          {{#each plugin.badges}}
+            <span class="plugin-badge badge-{{type}}">{{label}}</span>
+          {{/each}}
+        {{/if}}
+        <span class="plugin-badge badge-version">v{{plugin.version}}</span>
+      </div>
+
+      <h1 class="detail-title">{{plugin.displayName}}</h1>
+      <div class="detail-id"><code>{{pluginDisplayId plugin.id}}</code></div>
+      <p class="detail-description">{{plugin.description}}</p>
+
+      {{#if plugin.tags}}
+        <div class="plugin-tags">
+          {{#each plugin.tags}}
+            <span class="tag">{{this}}</span>
+          {{/each}}
+        </div>
+      {{/if}}
+    </div>
+
+    <div class="detail-card detail-tabs-shell">
+    <div class="detail-tab-nav" role="tablist" aria-label="Plugin sections">
+      <button class="detail-tab-btn active" type="button" data-tab-target="documentation">Documentation</button>
+      <button class="detail-tab-btn" type="button" data-tab-target="installation">Installation</button>
+      {{#if plugin.showConfigCard}}
+        <button class="detail-tab-btn" type="button" data-tab-target="configuration">Configuration</button>
+      {{/if}}
+      {{#if plugin.showEventsCard}}
+        <button class="detail-tab-btn" type="button" data-tab-target="events">Events</button>
+      {{/if}}
+      {{#if plugin.showSupportedFeaturesCard}}
+        <button class="detail-tab-btn" type="button" data-tab-target="features">Supported Features</button>
+      {{/if}}
+      {{#if versions}}
+        <button class="detail-tab-btn" type="button" data-tab-target="versions">Versions</button>
+      {{/if}}
+      {{#if plugin.showDependenciesCard}}
+        <button class="detail-tab-btn" type="button" data-tab-target="dependencies">Dependencies</button>
+      {{/if}}
+      <button class="detail-tab-btn" type="button" data-tab-target="metadata">Metadata</button>
+    </div>
+
+    <div class="detail-tab-panels">
+    <div class="detail-tab-panel active" data-tab-panel="documentation">
+      {{#if plugin.docTabs}}
+        {{#if (gt plugin.docTabs.length 1)}}
+          <div class="doc-tabs">
+            <div class="doc-tab-bar">
+              {{#each plugin.docTabs}}
+                <button class="doc-tab-btn{{#if active}} active{{/if}}" data-tab="{{id}}">{{title}}</button>
+              {{/each}}
+            </div>
+            {{#each plugin.docTabs}}
+              <div class="doc-tab-panel{{#if active}} active{{/if}}" id="{{id}}">
+                <div class="readme-content markdown-body">
+                  {{{html}}}
+                </div>
+              </div>
+            {{/each}}
+          </div>
+          <script>
+            document.querySelector('.doc-tab-bar').addEventListener('click', function(e) {
+              var btn = e.target.closest('.doc-tab-btn');
+              if (!btn) return;
+              var tabId = btn.getAttribute('data-tab');
+              var tabs = this.parentElement;
+              tabs.querySelectorAll('.doc-tab-btn').forEach(function(b) { b.classList.remove('active'); });
+              tabs.querySelectorAll('.doc-tab-panel').forEach(function(p) { p.classList.remove('active'); });
+              btn.classList.add('active');
+              document.getElementById(tabId).classList.add('active');
+            });
+          </script>
+        {{else}}
+          <div class="readme-content markdown-body">
+            {{{plugin.docTabs.0.html}}}
+          </div>
+        {{/if}}
+      {{else}}
+        <p class="detail-description dependency-none">No documentation available</p>
+      {{/if}}
+    </div>
+
+    <div class="detail-tab-panel" data-tab-panel="installation">
+      <h2 class="detail-section-title">Installation</h2>
+
+      {{#if (eq plugin.category 'service')}}
+        <div class="install-block">
+          <span class="install-label">Use as a dependency (client reference)</span>
+          <pre><code>bsb client install {{pluginDisplayId plugin.id}}</code></pre>
+        </div>
+        <div class="install-block">
+          <span class="install-label">Deploy as a service</span>
+          <pre><code>bsb plugin install {{pluginDisplayId plugin.id}}</code></pre>
+        </div>
+      {{else}}
+        <div class="install-block">
+          <span class="install-label">Install plugin (Node.js)</span>
+          {{#if plugin.package.nodejs}}
+            <pre><code>npm i {{plugin.package.nodejs}}</code></pre>
+          {{else}}
+            <pre><code>npm i {{pluginDisplayId plugin.id}}</code></pre>
+          {{/if}}
+        </div>
+      {{/if}}
+
+      {{#if (eq plugin.category 'service')}}
+      {{#if plugin.package}}
+        {{#if plugin.package.nodejs}}
+          <div class="install-block">
+            <span class="install-label">Node.js (npm)</span>
+            <pre><code>npm install {{plugin.package.nodejs}}</code></pre>
+          </div>
+        {{/if}}
+        {{#if plugin.package.csharp}}
+          <div class="install-block">
+            <span class="install-label">C# (NuGet)</span>
+            <pre><code>dotnet add package {{plugin.package.csharp}}</code></pre>
+          </div>
+        {{/if}}
+        {{#if plugin.package.go}}
+          <div class="install-block">
+            <span class="install-label">Go</span>
+            <pre><code>go get {{plugin.package.go}}</code></pre>
+          </div>
+        {{/if}}
+        {{#if plugin.package.java}}
+          <div class="install-block">
+            <span class="install-label">Java (Maven)</span>
+            <pre><code>&lt;dependency&gt;
+  &lt;groupId&gt;{{plugin.package.java}}&lt;/groupId&gt;
+&lt;/dependency&gt;</code></pre>
+          </div>
+        {{/if}}
+      {{/if}}
+      {{/if}}
+    </div>
+
+    {{#if plugin.showConfigCard}}
+    <div class="detail-tab-panel" data-tab-panel="configuration">
+      <h2 class="detail-section-title">Configuration</h2>
+      <p class="detail-description">{{plugin.configDescription}}</p>
+      {{#if plugin.hasNestedConfigProps}}
+        <p class="event-section-desc">Tree view shows nested config fields and object branches.</p>
+      {{/if}}
+
+      {{#if plugin.configProps}}
+        <div class="config-tree">
+          {{#each plugin.configProps}}
+            <div class="config-tree-node {{#if isObject}}is-object{{else}}is-field{{/if}}" style="--config-level: {{level}};">
+              <div class="config-tree-head">
+                <code class="config-key">{{name}}</code>
+                <span class="config-row-path">{{fullPath}}</span>
+                {{#if isObject}}
+                  <span class="config-pill config-pill-branch">object</span>
+                {{else}}
+                  <span class="config-type">{{type}}</span>
+                {{/if}}
+                {{#unless required}}<span class="config-pill">optional</span>{{/unless}}
+                {{#if defaultValue}}<span class="config-pill config-pill-default">default: {{defaultValue}}</span>{{/if}}
+              </div>
+              {{#if description}}<div class="config-tree-desc">{{description}}</div>{{/if}}
+            </div>
+          {{/each}}
+        </div>
+      {{else}}
+        <p class="detail-description dependency-none">No configuration required</p>
+      {{/if}}
+    </div>
+    {{/if}}
+
+    {{#if plugin.showEventsCard}}
+    <div class="detail-tab-panel" data-tab-panel="events">
+      <h2 class="detail-section-title">Events</h2>
+      <p class="detail-description">Events available to clients of this plugin:</p>
+
+      {{#if plugin.eventSchema.emitReturnableEvents}}
+        <h3 class="event-section-title event-returnable">Emit and Return</h3>
+        <p class="event-section-desc">Call these events and receive a response.</p>
+        {{#each plugin.eventSchema.emitReturnableEvents}}
+          <details class="event-item">
+            <summary class="event-item-summary">
+              <div class="event-item-header">
+                <code class="event-returnable">{{name}}</code>
+                <span class="event-type-badge returnable">returnable</span>
+              </div>
+              {{#if description}}<p class="event-description">{{description}}</p>{{/if}}
+            </summary>
+            <div class="event-item-body">
+              {{#if inputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Input</span>
+                  <div class="event-props">
+                    {{#each inputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+              {{#if outputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Returns</span>
+                  <div class="event-props">
+                    {{#each outputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+            </div>
+          </details>
+        {{/each}}
+      {{/if}}
+
+      {{#if plugin.eventSchema.emitEvents}}
+        <h3 class="event-section-title event-emit">Fire and Forget</h3>
+        <p class="event-section-desc">Emit these events with no response expected.</p>
+        {{#each plugin.eventSchema.emitEvents}}
+          <details class="event-item">
+            <summary class="event-item-summary">
+              <div class="event-item-header">
+                <code class="event-emit">{{name}}</code>
+                <span class="event-type-badge emit">fire-and-forget</span>
+              </div>
+              {{#if description}}<p class="event-description">{{description}}</p>{{/if}}
+            </summary>
+            <div class="event-item-body">
+              {{#if inputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Input</span>
+                  <div class="event-props">
+                    {{#each inputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+            </div>
+          </details>
+        {{/each}}
+      {{/if}}
+
+      {{#if plugin.eventSchema.onReturnableEvents}}
+        <h3 class="event-section-title event-returnable">Listen and Respond</h3>
+        <p class="event-section-desc">Events this plugin listens for and responds to.</p>
+        {{#each plugin.eventSchema.onReturnableEvents}}
+          <details class="event-item">
+            <summary class="event-item-summary">
+              <div class="event-item-header">
+                <code class="event-returnable">{{name}}</code>
+                <span class="event-type-badge returnable">returnable</span>
+              </div>
+              {{#if description}}<p class="event-description">{{description}}</p>{{/if}}
+            </summary>
+            <div class="event-item-body">
+              {{#if inputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Receives</span>
+                  <div class="event-props">
+                    {{#each inputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+              {{#if outputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Returns</span>
+                  <div class="event-props">
+                    {{#each outputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+            </div>
+          </details>
+        {{/each}}
+      {{/if}}
+
+      {{#if plugin.eventSchema.onEvents}}
+        <h3 class="event-section-title event-on">Listen (Fire and Forget)</h3>
+        <p class="event-section-desc">Events this plugin handles silently.</p>
+        {{#each plugin.eventSchema.onEvents}}
+          <details class="event-item">
+            <summary class="event-item-summary">
+              <div class="event-item-header">
+                <code class="event-on">{{name}}</code>
+                <span class="event-type-badge on">fire-and-forget</span>
+              </div>
+              {{#if description}}<p class="event-description">{{description}}</p>{{/if}}
+            </summary>
+            <div class="event-item-body">
+              {{#if inputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Receives</span>
+                  <div class="event-props">
+                    {{#each inputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+            </div>
+          </details>
+        {{/each}}
+      {{/if}}
+
+      {{#if plugin.eventSchema.emitBroadcast}}
+        <h3 class="event-section-title event-broadcast">Broadcast</h3>
+        <p class="event-section-desc">Broadcast events to all listeners.</p>
+        {{#each plugin.eventSchema.emitBroadcast}}
+          <details class="event-item">
+            <summary class="event-item-summary">
+              <div class="event-item-header">
+                <code class="event-broadcast">{{name}}</code>
+                <span class="event-type-badge broadcast">broadcast</span>
+              </div>
+              {{#if description}}<p class="event-description">{{description}}</p>{{/if}}
+            </summary>
+            <div class="event-item-body">
+              {{#if inputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Payload</span>
+                  <div class="event-props">
+                    {{#each inputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+            </div>
+          </details>
+        {{/each}}
+      {{/if}}
+
+      {{#if plugin.eventSchema.onBroadcast}}
+        <h3 class="event-section-title event-broadcast">Listen to Broadcasts</h3>
+        <p class="event-section-desc">Broadcast events this plugin subscribes to.</p>
+        {{#each plugin.eventSchema.onBroadcast}}
+          <details class="event-item">
+            <summary class="event-item-summary">
+              <div class="event-item-header">
+                <code class="event-broadcast">{{name}}</code>
+                <span class="event-type-badge broadcast">broadcast</span>
+              </div>
+              {{#if description}}<p class="event-description">{{description}}</p>{{/if}}
+            </summary>
+            <div class="event-item-body">
+              {{#if inputProps.length}}
+                <div class="event-schema-block">
+                  <span class="event-schema-label">Payload</span>
+                  <div class="event-props">
+                    {{#each inputProps}}
+                      <div class="event-prop">
+                        <code class="event-prop-name">{{name}}</code>
+                        <span class="event-prop-type">{{type}}</span>
+                        {{#unless required}}<span class="event-prop-optional">optional</span>{{/unless}}
+                        {{#if description}}<span class="event-prop-desc">{{description}}</span>{{/if}}
+                      </div>
+                    {{/each}}
+                  </div>
+                </div>
+              {{/if}}
+            </div>
+          </details>
+        {{/each}}
+      {{/if}}
+    </div>
+    {{/if}}
+
+    {{#if plugin.showSupportedFeaturesCard}}
+    <div class="detail-tab-panel" data-tab-panel="features">
+      <h2 class="detail-section-title">Supported Features</h2>
+      <p class="detail-description">Observable capabilities implemented by this plugin:</p>
+      {{#if (hasItems plugin.observableFeatureGroups)}}
+        {{#each plugin.observableFeatureGroups}}
+          <div class="feature-group">
+            <h3 class="feature-group-title">{{title}}</h3>
+            <div class="feature-chip-list">
+              {{#each items}}
+                <div class="feature-chip {{#if supported}}is-supported{{else}}is-unsupported{{/if}}">
+                  <code class="feature-chip-name">{{name}}</code>
+                  <span class="feature-chip-state">{{#if supported}}available{{else}}unavailable{{/if}}</span>
+                </div>
+              {{/each}}
+            </div>
+          </div>
+        {{/each}}
+      {{else}}
+        <p class="detail-description dependency-none">No capability metadata published</p>
+      {{/if}}
+    </div>
+    {{/if}}
+
+    {{#if versions}}
+    <div class="detail-tab-panel" data-tab-panel="versions">
+      <h2 class="detail-section-title">Available Versions</h2>
+      <div class="version-list">
+        {{#each versions}}
+          <span class="tag{{#if (eq version ../plugin.version)}} category{{/if}}">v{{version}}</span>
+        {{/each}}
+      </div>
+    </div>
+    {{/if}}
+
+    {{#if plugin.showDependenciesCard}}
+    <div class="detail-tab-panel" data-tab-panel="dependencies">
+      <h2 class="detail-section-title">Dependencies</h2>
+      {{#if (hasItems plugin.dependencies)}}
+        <div class="dependency-list">
+          {{#each plugin.dependencies}}
+            <div class="dependency-item">
+              <a href="{{dependencyHref id}}" class="dependency-link">
+                <code class="dependency-id">{{pluginDisplayId id}}</code>
+                <span class="dependency-version">{{version}}</span>
+              </a>
+            </div>
+          {{/each}}
+        </div>
+      {{else}}
+        <p class="detail-description dependency-none">No dependencies</p>
+      {{/if}}
+    </div>
+    {{/if}}
+
+    <div class="detail-tab-panel" data-tab-panel="metadata">
+      <h2 class="detail-section-title">Metadata</h2>
+      <div class="metadata-grid">
+        {{#if plugin.author}}
+          <span class="metadata-label">Author</span>
+          <span class="metadata-value">{{formatAuthor plugin.author}}</span>
+        {{/if}}
+        {{#if plugin.license}}
+          <span class="metadata-label">License</span>
+          <span class="metadata-value">{{plugin.license}}</span>
+        {{/if}}
+        {{#if plugin.homepage}}
+          <span class="metadata-label">Homepage</span>
+          <span class="metadata-value"><a href="{{plugin.homepage}}" target="_blank">{{plugin.homepage}}</a></span>
+        {{/if}}
+        {{#if plugin.repository}}
+          <span class="metadata-label">Repository</span>
+          <span class="metadata-value"><a href="{{plugin.repository}}" target="_blank">{{plugin.repository}}</a></span>
+        {{/if}}
+        <span class="metadata-label">Published</span>
+        <span class="metadata-value">{{plugin.publishedAt}}</span>
+        <span class="metadata-label">Updated</span>
+        <span class="metadata-value">{{plugin.updatedAt}}</span>
+        {{#if plugin.visibility}}
+          <span class="metadata-label">Visibility</span>
+          <span class="metadata-value">{{plugin.visibility}}</span>
+        {{/if}}
+      </div>
+    </div>
+    </div>
+    </div>
+
+    <script>
+      (function () {
+        var nav = document.querySelector('.detail-tab-nav');
+        if (!nav) return;
+        var buttons = nav.querySelectorAll('.detail-tab-btn');
+        var panels = document.querySelectorAll('.detail-tab-panel[data-tab-panel]');
+
+        nav.addEventListener('click', function (e) {
+          var btn = e.target.closest('.detail-tab-btn');
+          if (!btn) return;
+          var target = btn.getAttribute('data-tab-target');
+          if (!target) return;
+
+          buttons.forEach(function (b) { b.classList.remove('active'); });
+          panels.forEach(function (p) {
+            p.classList.remove('active');
+            p.setAttribute('hidden', 'hidden');
+          });
+
+          btn.classList.add('active');
+          var panel = document.querySelector('.detail-tab-panel[data-tab-panel="' + target + '"]');
+          if (panel) {
+            panel.classList.add('active');
+            panel.removeAttribute('hidden');
+          }
+        });
+
+        panels.forEach(function (p, index) {
+          if (index !== 0) p.setAttribute('hidden', 'hidden');
+        });
+      })();
+    </script>
+  </div>
+</section>

package/lib/plugins/service-bsb-registry-ui/templates/pages/plugins.hbs

@@ -0,0 +1,40 @@
+<section class="plugins">
+  <div class="container">
+    <div class="section-header">
+      {{#if searchQuery}}
+        <h1 class="section-title">Results for "{{searchQuery}}"</h1>
+      {{else}}
+        <h1 class="section-title">Browse Plugins</h1>
+      {{/if}}
+      {{#if pagination}}
+        <span class="result-count">{{pagination.total}} plugin{{#if (gt pagination.total 1)}}s{{/if}}</span>
+      {{/if}}
+    </div>
+
+    {{> search-form}}
+
+    {{#if plugins}}
+      <div class="plugin-grid">
+        {{#each plugins}}
+          {{> plugin-card}}
+        {{/each}}
+      </div>
+
+      {{#if pagination}}
+        {{> pagination}}
+      {{/if}}
+    {{else}}
+      <div class="empty-state">
+        {{#if searchQuery}}
+          <h2 class="empty-state-title">No plugins found</h2>
+          <p class="empty-state-text">No plugins match "{{searchQuery}}". Try a different search or adjust your filters.</p>
+          <a href="/plugins" class="btn">Clear Search</a>
+        {{else}}
+          <h2 class="empty-state-title">No plugins yet</h2>
+          <p class="empty-state-text">No plugins match your current filters.</p>
+          <a href="/plugins" class="btn">Clear Filters</a>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+</section>

package/lib/plugins/service-bsb-registry-ui/templates/partials/pagination.hbs

@@ -0,0 +1,41 @@
+{{#if (gt pagination.totalPages 1)}}
+<div class="pagination">
+  {{#if (gt pagination.currentPage 1)}}
+    <a href="/plugins?page={{subtract pagination.currentPage 1}}{{#if searchQuery}}&query={{searchQuery}}{{/if}}{{#if filters.category}}&category={{filters.category}}{{/if}}{{#if filters.language}}&language={{filters.language}}{{/if}}" class="page-btn">Prev</a>
+  {{else}}
+    <span class="page-btn disabled">Prev</span>
+  {{/if}}
+
+  {{#if (gt pagination.currentPage 3)}}
+    <a href="/plugins?page=1{{#if searchQuery}}&query={{searchQuery}}{{/if}}{{#if filters.category}}&category={{filters.category}}{{/if}}{{#if filters.language}}&language={{filters.language}}{{/if}}" class="page-btn">1</a>
+    {{#if (gt pagination.currentPage 4)}}
+      <span class="page-btn disabled">...</span>
+    {{/if}}
+  {{/if}}
+
+  {{#each (range (subtract pagination.currentPage 2) (add pagination.currentPage 2) pagination.totalPages)}}
+    {{#if (eq this ../pagination.currentPage)}}
+      <span class="page-btn active">{{this}}</span>
+    {{else}}
+      <a href="/plugins?page={{this}}{{#if ../searchQuery}}&query={{../searchQuery}}{{/if}}{{#if ../filters.category}}&category={{../filters.category}}{{/if}}{{#if ../filters.language}}&language={{../filters.language}}{{/if}}" class="page-btn">{{this}}</a>
+    {{/if}}
+  {{/each}}
+
+  {{#if (lt pagination.currentPage (subtract pagination.totalPages 2))}}
+    {{#if (lt pagination.currentPage (subtract pagination.totalPages 3))}}
+      <span class="page-btn disabled">...</span>
+    {{/if}}
+    <a href="/plugins?page={{pagination.totalPages}}{{#if searchQuery}}&query={{searchQuery}}{{/if}}{{#if filters.category}}&category={{filters.category}}{{/if}}{{#if filters.language}}&language={{filters.language}}{{/if}}" class="page-btn">{{pagination.totalPages}}</a>
+  {{/if}}
+
+  {{#if (lt pagination.currentPage pagination.totalPages)}}
+    <a href="/plugins?page={{add pagination.currentPage 1}}{{#if searchQuery}}&query={{searchQuery}}{{/if}}{{#if filters.category}}&category={{filters.category}}{{/if}}{{#if filters.language}}&language={{filters.language}}{{/if}}" class="page-btn">Next</a>
+  {{else}}
+    <span class="page-btn disabled">Next</span>
+  {{/if}}
+</div>
+
+<div class="pagination-summary">
+  Page {{pagination.currentPage}} of {{pagination.totalPages}} ({{pagination.total}} total)
+</div>
+{{/if}}

package/lib/plugins/service-bsb-registry-ui/templates/partials/plugin-card.hbs

@@ -0,0 +1,40 @@
+<a href="/plugins/{{org}}/{{name}}" class="plugin-card">
+  <div class="plugin-image{{#unless imageUrl}} placeholder{{/unless}}">
+    {{#if imageUrl}}
+      <img src="{{imageUrl}}" alt="{{displayName}}" loading="lazy">
+    {{else}}
+      <div class="plugin-image-fallback">{{category}}</div>
+    {{/if}}
+
+  </div>
+
+  <div class="plugin-content">
+    <div class="plugin-header">
+      <div class="plugin-name">{{displayName}}</div>
+      <div class="plugin-id">{{pluginDisplayId id}}</div>
+    </div>
+
+    <div class="plugin-meta-right">
+      <div class="plugin-badges">
+        <span class="plugin-badge badge-language">{{language}}</span>
+        <span class="plugin-badge badge-category">{{category}}</span>
+        {{#if badges}}
+          {{#each badges}}
+            <span class="plugin-badge badge-{{type}}">{{label}}</span>
+          {{/each}}
+        {{/if}}
+        <span class="plugin-badge badge-version">v{{version}}</span>
+      </div>
+    </div>
+
+    <p class="plugin-description">{{description}}</p>
+
+    {{#if tags}}
+      <div class="plugin-tags">
+        {{#each tags}}
+          <span class="tag">{{this}}</span>
+        {{/each}}
+      </div>
+    {{/if}}
+  </div>
+</a>