From bede2b58130bb41e07100e9ba023899446558604 Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Tue, 8 Sep 2026 11:27:43 +0700
Subject: [PATCH] style(workflows): stack the lane pipeline and skill usage
 panels

Both panels carry wide tables that were fighting for half a row on lg
screens. Each gets its own full-width row instead.
---
 client/src/pages/Workflows.tsx                |  27 +-
 .../screens.snapshot.test.tsx.snap            | 244 +++++++++---------
 2 files changed, 133 insertions(+), 138 deletions(-)

diff --git a/client/src/pages/Workflows.tsx b/client/src/pages/Workflows.tsx
index e3c75008..1d157d7c 100644
--- a/client/src/pages/Workflows.tsx
+++ b/client/src/pages/Workflows.tsx
@@ -205,21 +205,20 @@ export function Workflows() {
       {/* Stats Row */}
       <WorkflowStats stats={data.stats} />
 
-      {/* Section 1 + 2: this dashboard's own pipelines, and what drives them */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Section number={1} title={t("lanes.title")} subtitle={t("lanes.subtitle")} infoKey="lanes">
-          <LanePipelinePanel />
-        </Section>
+      {/* Section 1: this dashboard's own pipelines */}
+      <Section number={1} title={t("lanes.title")} subtitle={t("lanes.subtitle")} infoKey="lanes">
+        <LanePipelinePanel />
+      </Section>
 
-        <Section
-          number={2}
-          title={t("skillUsage.title")}
-          subtitle={t("skillUsage.subtitle")}
-          infoKey="skillUsage"
-        >
-          <SkillUsagePanel statusFilter={statusFilter} />
-        </Section>
-      </div>
+      {/* Section 2: what drives those pipelines */}
+      <Section
+        number={2}
+        title={t("skillUsage.title")}
+        subtitle={t("skillUsage.subtitle")}
+        infoKey="skillUsage"
+      >
+        <SkillUsagePanel statusFilter={statusFilter} />
+      </Section>
 
       {/* Workflow-tool runs (issue #167) - fleets ingested from on-disk journals */}
       <div className="card p-4 space-y-3">
diff --git a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
index cc5e7015..b64071d2 100644
--- a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+++ b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
@@ -10351,153 +10351,149 @@ exports[`screen snapshots > Workflows 1`] = `
       </div>
     </div>
     <div
-      class="grid grid-cols-1 lg:grid-cols-2 gap-6"
+      class="flex flex-col h-full"
     >
       <div
-        class="flex flex-col h-full"
+        class="flex items-center justify-between gap-4 mb-3"
       >
         <div
-          class="flex items-center justify-between gap-4 mb-3"
+          class="flex items-center gap-2.5 min-w-0"
         >
-          <div
-            class="flex items-center gap-2.5 min-w-0"
-          >
-            <span
-              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
-            >
-              1
-            </span>
-            <h2
-              class="text-sm font-semibold text-fg-primary"
-            >
-              Lane Pipeline Pass Rates
-            </h2>
-            <button
-              aria-expanded="false"
-              aria-label="What this shows"
-              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
-              type="button"
-            >
-              <svg
-                class="lucide lucide-info w-3.5 h-3.5"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="10"
-                />
-                <path
-                  d="M12 16v-4"
-                />
-                <path
-                  d="M12 8h.01"
-                />
-              </svg>
-            </button>
-          </div>
           <span
-            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
-            title="How often each stage of your own pipelines is actually passed"
+            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
           >
-            How often each stage of your own pipelines is actually passed
+            1
           </span>
-        </div>
-        <div
-          class="card p-4 flex-1"
-        >
-          <div
-            class="space-y-3"
+          <h2
+            class="text-sm font-semibold text-fg-primary"
           >
-            <p
-              class="text-sm text-fg-muted"
+            Lane Pipeline Pass Rates
+          </h2>
+          <button
+            aria-expanded="false"
+            aria-label="What this shows"
+            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
+            type="button"
+          >
+            <svg
+              class="lucide lucide-info w-3.5 h-3.5"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              No lane has recorded a stage yet. Create one with
-               
-              <code>
-                agenthub lanes add --cwd $(pwd)
-              </code>
-            </p>
-          </div>
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+              />
+              <path
+                d="M12 16v-4"
+              />
+              <path
+                d="M12 8h.01"
+              />
+            </svg>
+          </button>
         </div>
+        <span
+          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
+          title="How often each stage of your own pipelines is actually passed"
+        >
+          How often each stage of your own pipelines is actually passed
+        </span>
       </div>
       <div
-        class="flex flex-col h-full"
+        class="card p-4 flex-1"
       >
         <div
-          class="flex items-center justify-between gap-4 mb-3"
-        >
-          <div
-            class="flex items-center gap-2.5 min-w-0"
-          >
-            <span
-              class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
-            >
-              2
-            </span>
-            <h2
-              class="text-sm font-semibold text-fg-primary"
-            >
-              Skill & Plugin Usage
-            </h2>
-            <button
-              aria-expanded="false"
-              aria-label="What this shows"
-              class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
-              type="button"
-            >
-              <svg
-                class="lucide lucide-info w-3.5 h-3.5"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="10"
-                />
-                <path
-                  d="M12 16v-4"
-                />
-                <path
-                  d="M12 8h.01"
-                />
-              </svg>
-            </button>
-          </div>
-          <span
-            class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
-            title="Which skills your sessions actually reach for"
-          >
-            Which skills your sessions actually reach for
-          </span>
-        </div>
-        <div
-          class="card p-4 flex-1"
+          class="space-y-3"
         >
           <p
             class="text-sm text-fg-muted"
           >
-            No skill invocation recorded yet.
+            No lane has recorded a stage yet. Create one with
+             
+            <code>
+              agenthub lanes add --cwd $(pwd)
+            </code>
           </p>
         </div>
       </div>
     </div>
+    <div
+      class="flex flex-col h-full"
+    >
+      <div
+        class="flex items-center justify-between gap-4 mb-3"
+      >
+        <div
+          class="flex items-center gap-2.5 min-w-0"
+        >
+          <span
+            class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
+          >
+            2
+          </span>
+          <h2
+            class="text-sm font-semibold text-fg-primary"
+          >
+            Skill & Plugin Usage
+          </h2>
+          <button
+            aria-expanded="false"
+            aria-label="What this shows"
+            class="flex items-center justify-center rounded-full p-0.5 -m-0.5 text-fg-muted hover:text-fg-secondary transition-colors focus:outline-none focus:ring-1 focus:ring-accent/40"
+            type="button"
+          >
+            <svg
+              class="lucide lucide-info w-3.5 h-3.5"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+              />
+              <path
+                d="M12 16v-4"
+              />
+              <path
+                d="M12 8h.01"
+              />
+            </svg>
+          </button>
+        </div>
+        <span
+          class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
+          title="Which skills your sessions actually reach for"
+        >
+          Which skills your sessions actually reach for
+        </span>
+      </div>
+      <div
+        class="card p-4 flex-1"
+      >
+        <p
+          class="text-sm text-fg-muted"
+        >
+          No skill invocation recorded yet.
+        </p>
+      </div>
+    </div>
     <div
       class="card p-4 space-y-3"
     >