refactor(ui): replace the installed-extension tag cloud with a compact Composer namespace ledger.

CHANGELOG.md

@@ -31,3 +31,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - feat(ui): expand the shared debug UI with secure same-origin navigation, configurable sensitive-key redaction, responsive and accessible interactions, persistent drawer and bounded `EXPLAIN` workflows, query grouping, conditional feature loading, and cross-adapter browser quality gates.
 - test: enforce JavaScript coverage gates, extend mutation coverage to new UI modules, and simplify N+1 detection, redaction, rendering, and panels.
 - feat(ui): add framework-neutral Vite snapshots, summary and detail rendering, consistent shell density, and labeled card-contained sidebar groups for adapter-provided extension panels.
+- refactor(ui): replace the installed-extension tag cloud with a compact Composer namespace ledger.

resources/src/styles/main.css

@@ -5340,71 +5340,93 @@
     }
   }
 
-  /* -- Package manifest (installed extensions) ------------------------ */
+  /* -- Composer namespace ledger (installed extensions) --------------- */
 
-  .yii-debug-packages {
+  .yii-debug-package-groups {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    gap: var(--yii-debug-space-2);
+    gap: var(--yii-debug-space-3);
   }
 
-  .yii-debug-package {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto;
-    gap: 4px var(--yii-debug-space-2);
-    align-items: center;
-    padding: 10px 14px;
+  .yii-debug-package-group {
     border: var(--yii-debug-border);
-    border-left: 3px solid transparent;
     border-radius: var(--yii-debug-radius-md);
     background: var(--yii-debug-panel-surface);
-    transition:
-      border-left-color 0.15s ease,
-      transform 0.15s ease,
-      background 0.15s ease;
+    overflow: hidden;
+  }
 
-    &:hover {
-      border-left-color: var(--yii-debug-panel-primary);
-      background: var(--yii-debug-panel-surface-hover);
-      transform: translateX(2px);
-    }
+  .yii-debug-package-group-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--yii-debug-space-3);
+    padding: 9px 12px;
+    border-bottom: var(--yii-debug-border);
+    background: color-mix(
+      in srgb,
+      var(--yii-debug-panel-surface-muted),
+      transparent 18%
+    );
   }
 
-  .yii-debug-package-glyph {
-    grid-row: 1 / span 2;
-    color: color-mix(in srgb, var(--yii-debug-panel-primary), transparent 25%);
-    font-size: 0.8125rem;
-    line-height: 1;
+  .yii-debug-package-vendor {
+    margin: 0;
+    color: var(--yii-debug-panel-primary);
+    font-family: var(--yii-debug-font-mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+  }
+
+  .yii-debug-package-group-count {
+    color: var(--yii-debug-panel-muted);
+    font-family: var(--yii-debug-font-mono);
+    font-size: 0.625rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .yii-debug-package-list {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, 220px), 1fr)
+    );
+    margin: 0;
+    padding: 0;
+  }
+
+  .yii-debug-package-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--yii-debug-space-2);
+    align-items: baseline;
+    min-width: 0;
+    padding: 7px 11px;
+    border-right: 1px solid
+      color-mix(in srgb, var(--yii-debug-panel-border), transparent 28%);
+    border-bottom: 1px solid
+      color-mix(in srgb, var(--yii-debug-panel-border), transparent 28%);
+
+    dt,
+    dd {
+      margin: 0;
+      font-family: var(--yii-debug-font-mono);
+      font-size: 0.6875rem;
+      line-height: 1.35;
+    }
   }
 
   .yii-debug-package-name {
+    min-width: 0;
     color: var(--yii-debug-panel-text);
-    font-family: var(--yii-debug-font-mono);
-    font-size: 0.8125rem;
     font-weight: 500;
-    line-height: 1.2;
     overflow-wrap: anywhere;
   }
 
   .yii-debug-package-version {
-    justify-self: start;
-    max-width: 100%;
-    padding: 2px 8px;
-    border-radius: var(--yii-debug-radius-sm);
-    background: color-mix(
-      in srgb,
-      var(--yii-debug-panel-primary),
-      transparent 85%
-    );
     color: var(--yii-debug-panel-primary);
-    font-family: var(--yii-debug-font-mono);
-    font-size: 0.625rem;
+    font-variant-numeric: tabular-nums;
     font-weight: 700;
-    letter-spacing: 0.02em;
-    line-height: 1.4;
-    overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
   }
 

src/Panel/Config/ConfigCardRenderer.php

@@ -7,13 +7,16 @@
 use Locale;
 use Stringable;
 use UIAwesome\Html\Flow\Div;
-use UIAwesome\Html\Heading\H2;
+use UIAwesome\Html\Heading\{H2, H3};
 use UIAwesome\Html\List\{Dd, Dl, Dt};
 use UIAwesome\Html\Palpable\A;
 use UIAwesome\Html\Phrasing\Span;
+use UIAwesome\Html\Root\Header;
 use UIAwesome\Html\Sectioning\{Article, Section};
 
 use function array_map;
+use function count;
+use function explode;
 use function implode;
 use function is_string;
 
@@ -65,10 +68,20 @@
             return null;
         }
 
-        $items = [];
+        $groups = [];
 
         foreach ($summary->extensions as $name => $version) {
-            $items[] = self::renderPackageItem($name, $version);
+            $parts = explode('/', $name, 2);
+            $vendor = $parts[0];
+            $package = $parts[1] ?? $name;
+
+            $groups[$vendor][$package] = $version;
+        }
+
+        $items = [];
+
+        foreach ($groups as $vendor => $packages) {
+            $items[] = self::renderPackageGroup($vendor, $packages);
         }
 
         return Section::tag()
@@ -79,14 +92,14 @@
                     ->html(
                         Span::tag()
                             ->class('yii-debug-section-mark')
-                            ->content('>_'),
+                            ->content('::'),
                         ' Installed extensions ',
                         Span::tag()
                             ->class('yii-debug-section-count')
                             ->content((string) $summary->extensionCount()),
                     ),
                 Div::tag()
-                    ->class('yii-debug-packages')
+                    ->class('yii-debug-package-groups')
                     ->html(...$items),
             );
     }
@@ -254,21 +267,51 @@
     }
 
     /**
-     * Renders one installed-package item with its name and version.
+     * Renders one Composer vendor group as a compact dependency ledger.
+     *
+     * @param array<string, string> $packages
      */
-    private static function renderPackageItem(string $name, string $version): Article
+    private static function renderPackageGroup(string $vendor, array $packages): Article
     {
+        $items = [];
+
+        foreach ($packages as $name => $version) {
+            $items[] = self::renderPackageItem($name, $version);
+        }
+
+        $count = count($packages);
+
         return Article::tag()
-            ->class('yii-debug-package')
+            ->class('yii-debug-package-group')
             ->html(
-                Span::tag()
-                    ->addAriaAttribute('hidden', 'true')
-                    ->class('yii-debug-package-glyph')
-                    ->content('◆'),
-                Span::tag()
+                Header::tag()
+                    ->class('yii-debug-package-group-header')
+                    ->html(
+                        H3::tag()
+                            ->class('yii-debug-package-vendor')
+                            ->content("{$vendor}/"),
+                        Span::tag()
+                            ->class('yii-debug-package-group-count')
+                            ->content("{$count} " . ($count === 1 ? 'package' : 'packages')),
+                    ),
+                Dl::tag()
+                    ->class('yii-debug-package-list')
+                    ->html(...$items),
+            );
+    }
+
+    /**
+     * Renders one package name and version row inside its Composer vendor group.
+     */
+    private static function renderPackageItem(string $name, string $version): Div
+    {
+        return Div::tag()
+            ->class('yii-debug-package-row')
+            ->html(
+                Dt::tag()
                     ->class('yii-debug-package-name')
                     ->content($name),
-                Span::tag()
+                Dd::tag()
                     ->class('yii-debug-package-version')
                     ->content("v{$version}"),
             );

src/Storage/RequestSummary.php

@@ -46,6 +46,28 @@
         public int|null $peakMemory,
     ) {}
 
+    /**
+     * Creates an empty request summary ready for immutable enrichment.
+     */
+    public static function create(string $tag): self
+    {
+        return new self(
+            tag: $tag,
+            url: '',
+            ajax: false,
+            method: '',
+            ip: '',
+            time: 0.0,
+            statusCode: 0,
+            sqlCount: 0,
+            excessiveCallersCount: 0,
+            mailCount: 0,
+            mailFiles: [],
+            processingTime: null,
+            peakMemory: null,
+        );
+    }
+
     /**
      * Hydrates request metadata from decoded JSON data.
      *
@@ -129,6 +151,52 @@
         ];
     }
 
+    /**
+     * Returns a copy with database counters.
+     */
+    public function withDatabase(int $sqlCount, int $excessiveCallersCount = 0): self
+    {
+        return new self(
+            tag: $this->tag,
+            url: $this->url,
+            ajax: $this->ajax,
+            method: $this->method,
+            ip: $this->ip,
+            time: $this->time,
+            statusCode: $this->statusCode,
+            sqlCount: $sqlCount,
+            excessiveCallersCount: $excessiveCallersCount,
+            mailCount: $this->mailCount,
+            mailFiles: $this->mailFiles,
+            processingTime: $this->processingTime,
+            peakMemory: $this->peakMemory,
+        );
+    }
+
+    /**
+     * Returns a copy with captured mail metadata.
+     *
+     * @param list<string> $mailFiles
+     */
+    public function withMail(int $mailCount, array $mailFiles): self
+    {
+        return new self(
+            tag: $this->tag,
+            url: $this->url,
+            ajax: $this->ajax,
+            method: $this->method,
+            ip: $this->ip,
+            time: $this->time,
+            statusCode: $this->statusCode,
+            sqlCount: $this->sqlCount,
+            excessiveCallersCount: $this->excessiveCallersCount,
+            mailCount: $mailCount,
+            mailFiles: $mailFiles,
+            processingTime: $this->processingTime,
+            peakMemory: $this->peakMemory,
+        );
+    }
+
     /**
      * Returns a copy enriched with processing time and peak memory usage.
      *
@@ -155,4 +223,48 @@
             peakMemory: $peakMemory,
         );
     }
+
+    /**
+     * Returns a copy with HTTP request metadata.
+     */
+    public function withRequest(string $url, string $method, string $ip, float $time, bool $ajax = false): self
+    {
+        return new self(
+            tag: $this->tag,
+            url: $url,
+            ajax: $ajax,
+            method: $method,
+            ip: $ip,
+            time: $time,
+            statusCode: $this->statusCode,
+            sqlCount: $this->sqlCount,
+            excessiveCallersCount: $this->excessiveCallersCount,
+            mailCount: $this->mailCount,
+            mailFiles: $this->mailFiles,
+            processingTime: $this->processingTime,
+            peakMemory: $this->peakMemory,
+        );
+    }
+
+    /**
+     * Returns a copy with the HTTP response status.
+     */
+    public function withResponse(int $statusCode): self
+    {
+        return new self(
+            tag: $this->tag,
+            url: $this->url,
+            ajax: $this->ajax,
+            method: $this->method,
+            ip: $this->ip,
+            time: $this->time,
+            statusCode: $statusCode,
+            sqlCount: $this->sqlCount,
+            excessiveCallersCount: $this->excessiveCallersCount,
+            mailCount: $this->mailCount,
+            mailFiles: $this->mailFiles,
+            processingTime: $this->processingTime,
+            peakMemory: $this->peakMemory,
+        );
+    }
 }