fix(ui): show short class names with full hover titles, standardize Timeline dots and bars on one blue token, and remove the redundant category legend.

CHANGELOG.md

@@ -33,3 +33,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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.
 - feat(ui): improve Request disclosures, body limits, history navigation, and table spacing.
+- fix(ui): show short class names with full hover titles, standardize Timeline dots and bars on one blue token, and remove the redundant category legend.

resources/src/styles/timeline.css

@@ -193,7 +193,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: currentcolor;
+  background: var(--yii-debug-cat-db);
   opacity: 0.85;
 }
 
@@ -221,7 +221,7 @@
   height: 18px;
   min-width: 2px;
   border-radius: 4px;
-  background: currentcolor;
+  background: var(--yii-debug-cat-db);
   box-shadow:
     inset 0 1px 0 rgb(255 255 255 / 12%),
     0 1px 2px rgb(0 0 0 / 18%);
@@ -237,65 +237,6 @@
   white-space: nowrap;
 }
 
-/*
- * Category colors — drive both the dot and the bar via `currentcolor`.
- * Hues come from the validated `--yii-debug-cat-*` vocabulary in tokens.css.
- */
-.yii-debug-tl-row-app {
-  color: var(--yii-debug-cat-app);
-}
-
-.yii-debug-tl-row-db {
-  color: var(--yii-debug-cat-db);
-}
-
-.yii-debug-tl-row-view {
-  color: var(--yii-debug-cat-view);
-}
-
-.yii-debug-tl-row-cache {
-  color: var(--yii-debug-cat-cache);
-}
-
-.yii-debug-tl-row-mail {
-  color: var(--yii-debug-cat-mail);
-}
-
-.yii-debug-tl-row-queue {
-  color: var(--yii-debug-cat-queue);
-}
-
-.yii-debug-tl-row-other {
-  color: color-mix(
-    in srgb,
-    var(--yii-debug-cat-other),
-    var(--yii-debug-panel-text) 25%
-  );
-}
-
-/* Category legend — one chip per variant present in the capture. */
-.yii-debug-tl-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 14px;
-  padding: 10px 14px 2px;
-}
-
-.yii-debug-tl-legend-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--yii-debug-fs-xs, 0.75rem);
-}
-
-.yii-debug-tl-legend-item .yii-debug-tl-dot {
-  flex: none;
-}
-
-.yii-debug-tl-legend-label {
-  color: var(--yii-debug-panel-muted);
-}
-
 /**
  * Memory strip below the chart. Reuses the existing SVG output but in a
  * labeled lane so it does not feel detached.

src/Panel/Timeline/TimelineRenderer.php

@@ -12,27 +12,17 @@
 use UIAwesome\Html\Root\{Footer, Header};
 use UIAwesome\Html\Sectioning\Section;
 
-use function count;
-use function in_array;
+use function explode;
 use function number_format;
 use function rtrim;
 use function sprintf;
+use function str_starts_with;
 
 /**
  * Renders the shared Timeline summary, filters, empty hint, and positioned span chart.
  */
 final class TimelineRenderer
 {
-    private const array LEGEND_LABELS = [
-        'app' => 'Application',
-        'db' => 'Database',
-        'view' => 'View',
-        'cache' => 'Cache',
-        'mail' => 'Mail',
-        'queue' => 'Queue',
-        'other' => 'Other',
-    ];
-
     /**
      * Renders the complete timeline chart from prepared spans and ruler offsets.
      *
@@ -52,7 +42,6 @@
 
         $children = [
             self::renderAxis($rulers),
-            ...self::renderLegend($rows),
             self::renderRows($rows),
         ];
 
@@ -185,6 +174,15 @@
             ->render();
     }
 
+    private static function accessibleRowLabel(TimelineSpanRow $row): string
+    {
+        if ($row->category === '' || str_starts_with($row->tooltip, $row->category . "\n")) {
+            return $row->tooltip;
+        }
+
+        return "{$row->category}\n{$row->tooltip}";
+    }
+
     private static function formatTickLabel(int $milliseconds): string
     {
         if ($milliseconds < 1000) {
@@ -213,47 +211,6 @@
         return Header::tag()->class('yii-debug-tl-axis')->html(...$ticks);
     }
 
-    /**
-     * @param list<TimelineSpanRow> $rows Positioned timeline spans.
-     *
-     * @return list<Div> Legend container, or an empty list for a single category.
-     */
-    private static function renderLegend(array $rows): array
-    {
-        $present = [];
-
-        foreach ($rows as $row) {
-            if (!in_array($row->variant, $present, true)) {
-                $present[] = $row->variant;
-            }
-        }
-
-        if (count($present) < 2) {
-            return [];
-        }
-
-        $items = [];
-
-        foreach (self::LEGEND_LABELS as $variant => $label) {
-            if (!in_array($variant, $present, true)) {
-                continue;
-            }
-
-            $items[] = Span::tag()
-                ->class("yii-debug-tl-legend-item yii-debug-tl-row-{$variant}")
-                ->html(
-                    Span::tag()
-                        ->class('yii-debug-tl-dot')
-                        ->addAttribute('aria-hidden', 'true'),
-                    Span::tag()
-                        ->class('yii-debug-tl-legend-label')
-                        ->content($label),
-                );
-        }
-
-        return [Div::tag()->class('yii-debug-tl-legend')->html(...$items)];
-    }
-
     private static function renderMemoryFooter(string $svg, int $memory, int $height): Footer
     {
         return Footer::tag()
@@ -277,7 +234,7 @@
     private static function renderRow(TimelineSpanRow $row): Div
     {
         return Div::tag()
-            ->addAriaAttribute('label', $row->tooltip)
+            ->addAriaAttribute('label', self::accessibleRowLabel($row))
             ->addAttribute('role', 'listitem')
             ->class("yii-debug-tl-row yii-debug-tl-row-{$row->variant}")
             ->html(
@@ -290,7 +247,8 @@
                             ->addAttribute('aria-hidden', 'true'),
                         Span::tag()
                             ->class('yii-debug-tl-name')
-                            ->html(Fqcn::renderLabel($row->category)),
+                            ->html(Strong::tag()->content(self::shortCategoryName($row->category)))
+                            ->title($row->category),
                         Span::tag()
                             ->class('yii-debug-tl-bar-duration')
                             ->content(sprintf('%.1f ms', $row->duration)),
@@ -328,4 +286,15 @@
             ->addAttribute('role', 'list')
             ->html(...$rendered);
     }
+
+    private static function shortCategoryName(string $category): string
+    {
+        if ($category === '') {
+            return '—';
+        }
+
+        $shortName = Fqcn::shortName(explode('::', $category, 2)[0]);
+
+        return $shortName === '' ? $category : $shortName;
+    }
 }

src/Panel/Timeline/TimelineSpanRow.php

@@ -123,8 +123,8 @@ private static function numberToString(float $value): string
     /**
      * Maps the span category to its domain variant from the fixed timeline vocabulary.
      *
-     * Categories the matcher does not recognize fall back to `other`, so unknown providers render in the neutral
-     * track styling.
+     * Categories the matcher does not recognize fall back to `other`, retaining their domain classification as
+     * metadata while the shared renderer presents every span with the same visual treatment.
      */
     private static function variantOf(string $category): string
     {