feat(devtools-extension): update flow view CSS for node diagram layout

Author: ryanbas21

packages/devtools-extension/src/panel/panel.html

@@ -674,95 +674,55 @@
       }
 
       /* ── Flow View ───────────────────────────────────────── */
-      .fv-container {
+      .fv-view {
+        display: flex;
+        flex-direction: column;
         flex: 1;
-        overflow-y: auto;
-        padding: 12px 16px;
-      }
-      .fv-empty {
-        padding: 24px;
-        color: var(--dim);
-        font-size: 12px;
-        text-align: center;
-      }
-      .fv-step-card {
-        border: 1px solid var(--border);
-        border-radius: 6px;
-        background: var(--surface);
         overflow: hidden;
       }
-      .fv-pre-flow {
-        border: 1px solid var(--bdim);
-        border-radius: 6px;
+      .fv-rail {
+        flex-shrink: 0;
+        height: 110px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        border-bottom: 1px solid var(--border);
         background: var(--base);
-        overflow: hidden;
-        opacity: 0.7;
       }
-      .fv-step-header {
+      .fv-rail-empty {
+        height: 110px;
         display: flex;
         align-items: center;
-        gap: 8px;
-        padding: 8px 12px;
-        background: var(--raised);
-        user-select: none;
-      }
-      .fv-step-header:hover {
-        background: var(--hover);
-      }
-      .fv-step-num {
-        font-size: 10px;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        color: var(--muted);
-        min-width: 48px;
-      }
-      .fv-step-name {
-        flex: 1;
-        color: var(--text);
-        font-weight: 500;
+        justify-content: center;
+        color: var(--dim);
         font-size: 12px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .fv-step-status {
-        font-size: 11px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-      }
-      .fv-toggle-icon {
-        color: var(--muted);
-        font-size: 10px;
-        margin-left: 4px;
-      }
-      .fv-step-body {
-        padding: 6px 12px 8px;
-        border-top: 1px solid var(--bdim);
       }
-      .fv-connector {
-        width: 2px;
-        height: 20px;
-        margin: 0 auto;
-        border-left: 2px dashed var(--border);
+      .fv-detail {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px 16px;
       }
-      .fv-no-net {
+      .fv-detail-empty {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         color: var(--dim);
-        font-size: 11px;
+        font-size: 12px;
         font-style: italic;
-        padding: 4px 0;
+        padding: 24px;
       }
-      .fv-net-entry {
-        margin-bottom: 6px;
-        border-left: 2px solid var(--bdim);
-        padding-left: 8px;
+      .fv-net-group {
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        margin-bottom: 12px;
+        overflow: hidden;
       }
-      .fv-net-row {
+      .fv-net-group-header {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 3px 0;
+        gap: 8px;
+        padding: 6px 10px;
+        background: var(--raised);
       }
       .fv-net-status {
         font-size: 11px;
@@ -785,30 +745,31 @@
         min-width: 36px;
         text-align: right;
       }
-      .fv-sub-row {
+      .fv-section-row {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 2px 0 2px 8px;
+        padding: 5px 10px;
         cursor: pointer;
+        border-top: 1px solid var(--bdim);
         color: var(--muted);
         font-size: 11px;
+        user-select: none;
       }
-      .fv-sub-row:hover {
-        color: var(--blue);
-      }
-      .fv-sub-icon {
-        font-size: 9px;
-        width: 10px;
+      .fv-section-row:hover {
+        background: var(--hover);
+        color: var(--text);
       }
-      .fv-sub-body {
-        padding: 4px 0 4px 16px;
+      .fv-section-body {
+        padding: 8px 10px;
+        border-top: 1px solid var(--bdim);
+        background: var(--base);
       }
-      .fv-no-collectors {
-        padding: 2px 0 2px 8px;
+      .fv-no-data {
+        padding: 6px 10px;
         color: var(--dim);
-        font-size: 10px;
+        font-size: 11px;
         font-style: italic;
+        border-top: 1px solid var(--bdim);
       }
       .fv-playback-controls {
         display: flex;