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 */}
|
||||
<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">
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user