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.
This commit is contained in:
@@ -205,21 +205,20 @@ export function Workflows() {
|
|||||||
{/* Stats Row */}
|
{/* Stats Row */}
|
||||||
<WorkflowStats stats={data.stats} />
|
<WorkflowStats stats={data.stats} />
|
||||||
|
|
||||||
{/* Section 1 + 2: this dashboard's own pipelines, and what drives them */}
|
{/* Section 1: this dashboard's own pipelines */}
|
||||||
<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">
|
||||||
<Section number={1} title={t("lanes.title")} subtitle={t("lanes.subtitle")} infoKey="lanes">
|
<LanePipelinePanel />
|
||||||
<LanePipelinePanel />
|
</Section>
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section
|
{/* Section 2: what drives those pipelines */}
|
||||||
number={2}
|
<Section
|
||||||
title={t("skillUsage.title")}
|
number={2}
|
||||||
subtitle={t("skillUsage.subtitle")}
|
title={t("skillUsage.title")}
|
||||||
infoKey="skillUsage"
|
subtitle={t("skillUsage.subtitle")}
|
||||||
>
|
infoKey="skillUsage"
|
||||||
<SkillUsagePanel statusFilter={statusFilter} />
|
>
|
||||||
</Section>
|
<SkillUsagePanel statusFilter={statusFilter} />
|
||||||
</div>
|
</Section>
|
||||||
|
|
||||||
{/* Workflow-tool runs (issue #167) - fleets ingested from on-disk journals */}
|
{/* Workflow-tool runs (issue #167) - fleets ingested from on-disk journals */}
|
||||||
<div className="card p-4 space-y-3">
|
<div className="card p-4 space-y-3">
|
||||||
|
|||||||
@@ -10351,153 +10351,149 @@ exports[`screen snapshots > Workflows 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-1 lg:grid-cols-2 gap-6"
|
class="flex flex-col h-full"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col h-full"
|
class="flex items-center justify-between gap-4 mb-3"
|
||||||
>
|
>
|
||||||
<div
|
<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
|
<span
|
||||||
class="hidden lg:block flex-shrink-0 max-w-[20rem] xl:max-w-sm truncate text-right text-[11px] text-fg-muted"
|
class="w-5 h-5 rounded-md bg-accent/15 text-accent text-[11px] font-bold flex items-center justify-center flex-shrink-0"
|
||||||
title="How often each stage of your own pipelines is actually passed"
|
|
||||||
>
|
>
|
||||||
How often each stage of your own pipelines is actually passed
|
1
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<h2
|
||||||
<div
|
class="text-sm font-semibold text-fg-primary"
|
||||||
class="card p-4 flex-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="space-y-3"
|
|
||||||
>
|
>
|
||||||
<p
|
Lane Pipeline Pass Rates
|
||||||
class="text-sm text-fg-muted"
|
</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
|
<circle
|
||||||
|
cx="12"
|
||||||
<code>
|
cy="12"
|
||||||
agenthub lanes add --cwd $(pwd)
|
r="10"
|
||||||
</code>
|
/>
|
||||||
</p>
|
<path
|
||||||
</div>
|
d="M12 16v-4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12 8h.01"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</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>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col h-full"
|
class="card p-4 flex-1"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-between gap-4 mb-3"
|
class="space-y-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
|
<p
|
||||||
class="text-sm text-fg-muted"
|
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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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
|
<div
|
||||||
class="card p-4 space-y-3"
|
class="card p-4 space-y-3"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user