From 7c7eabade7e18cc4bd075f42c8591b65a97203f3 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Mon, 6 Apr 2026 02:17:19 +0200 Subject: [PATCH 01/71] feat(webui): redesign pipeline detail page with v2 design language - Steps rendered as Fat Gantt shapes (persona linked, contract linked, dependencies, artifacts, step type icons) - Recent runs as rv2-run cards (not table) - Stats bar: step count, run count, category, skills - Quickstart dialog simplified - Replaces old DAG SVG + table layout Part of #709 --- internal/webui/templates/pipeline_detail.html | 268 +++++++----------- 1 file changed, 101 insertions(+), 167 deletions(-) diff --git a/internal/webui/templates/pipeline_detail.html b/internal/webui/templates/pipeline_detail.html index c9c3b832..a1f017a0 100644 --- a/internal/webui/templates/pipeline_detail.html +++ b/internal/webui/templates/pipeline_detail.html @@ -1,152 +1,132 @@ -{{define "title"}}{{.Pipeline.Name}}{{if .Pipeline.Description}} · {{.Pipeline.Description}}{{end}} · Wave{{end}} +{{define "title"}}{{.Pipeline.Name}}{{if .Pipeline.Description}} — {{.Pipeline.Description}}{{end}} · Wave{{end}} {{define "content"}} -
+ + +
- ← Back to Pipelines -

{{.Pipeline.Name}}

- {{if .Pipeline.Description}}

{{.Pipeline.Description}}

{{end}} + ← Pipelines +

+ {{.Pipeline.Name}} + {{if .Pipeline.Category}}{{.Pipeline.Category}}{{end}} + {{if .Pipeline.IsComposition}}composition{{end}} +

+ {{if .Pipeline.Description}}

{{.Pipeline.Description}}

{{end}}
-
-
- Steps {{len .Pipeline.Steps}} - Runs {{.RunCount}} - {{if .Pipeline.Category}}Category {{.Pipeline.Category}}{{end}} - {{if .Pipeline.IsComposition}}Type Composition{{end}} - {{if .Pipeline.Skills}}Skills {{range $i, $s := .Pipeline.Skills}}{{if $i}}, {{end}}{{$s}}{{end}}{{end}} -
+ +
+ {{len .Pipeline.Steps}} steps + · + {{.RunCount}} runs + {{if .Pipeline.Skills}}· + Skills: {{range $i, $s := .Pipeline.Skills}}{{if $i}}, {{end}}{{$s}}{{end}}{{end}}
-{{if .DAG}} -
-
-

Pipeline Graph

 -
- {{template "templates/partials/dag_svg.html" .DAG}} + +
+{{range $i, $step := .Pipeline.Steps}} + {{if $i}}
{{end}} +
+
+
+ + {{if eq $step.Type "pipeline"}}⟐ + {{else if eq $step.Type "gate"}}◆ + {{else if eq $step.Type "conditional"}}◆ + {{else if eq $step.Type "command"}}>_ + {{end}}{{$step.ID}} + + {{if $step.Persona}}{{$step.Persona}}{{end}} + {{if $step.Contract}}{{if $step.ContractSchemaName}}{{$step.ContractSchemaName}}{{else}}{{$step.Contract}}{{end}}{{end}} + {{if $step.Optional}}optional{{end}} + +
+
+ {{if $step.Dependencies}} +
+ deps + {{range $j, $d := $step.Dependencies}}{{if $j}}, {{end}}{{$d}}{{end}} +
+ {{end}} + {{if $step.Artifacts}} +
+ out + {{range $j, $a := $step.Artifacts}}{{if $j}}, {{end}}{{$a}}{{end}} +
+ {{end}} +
-
-
+
{{end}} - -
-

Steps

- - - - - - - - - - - - - {{range .Pipeline.Steps}} - - - - - - - - - {{end}} - -
StepPersonaDependenciesContractArtifacts
{{.ID}}{{.Persona}}{{if .Dependencies}}{{range $i, $d := .Dependencies}}{{if $i}}, {{end}}{{$d}}{{end}}{{else}}none{{end}}{{if .Contract}}{{if .ContractSchemaName}}{{.Contract}}{{else}}{{.Contract}}{{end}}{{else}}none{{end}}{{if .Artifacts}}{{range $i, $a := .Artifacts}}{{if $i}}, {{end}}{{$a}}{{end}}{{else}}none{{end}}{{if .Optional}}optional{{end}}
-
-

Recent Runs

+ +
+

Recent Runs

{{if .Runs}} - - - - - - - - - - - - - {{range .Runs}} - - - - - - - - - {{end}} - -
StatusRun IDStartedDurationProgressTokens
- - {{if eq .Status "running"}} - {{else if eq .Status "completed"}}✓ - {{else if eq .Status "failed"}}✗ - {{else if eq .Status "cancelled"}}▬ - {{else}}● - {{end}} - - {{.Status}} - {{.RunID}}{{if .Duration}}{{.Duration}}{{else}}-{{end}}{{if gt .StepsTotal 0}}{{.StepsCompleted}}/{{.StepsTotal}}{{end}}{{formatTokens .TotalTokens}}
+
+ {{range .Runs}} + +
+
+
+ {{.Status}} + {{if .InputPreview}}{{richInput .InputPreview .LinkedURL}}{{end}} +
+
+ {{if .Duration}}{{.Duration}}{{end}} + {{if gt .StepsTotal 0}}{{.StepsCompleted}}/{{.StepsTotal}} steps{{end}} + {{if .TotalTokens}}{{formatTokens .TotalTokens}} tok{{end}} + {{range .Models}}{{friendlyModel .}}{{end}} +
+
+
+ {{.FormattedStartedAt}} + {{if .Duration}}{{.Duration}}{{end}} +
+ + {{end}} +
{{if gt .RunCount 10}} -
- View all {{.RunCount}} runs + {{end}} {{else}} -

No runs yet for this pipeline.

+
No runs yet
{{end}}
+ -

Start Pipeline:

+

Start:

- +
- Advanced Options + Advanced
- +
- +
-
- -
- Loading... -
-
-
- -
- Loading... -
-
- +
@@ -158,99 +138,53 @@

Start Pipeline:

var quickStartPipeline = ''; - function showQuickStart(name) { quickStartPipeline = name; document.getElementById('quickstart-name').textContent = name; document.getElementById('quickstart-input').value = ''; - // Reset advanced options var modelEl = document.getElementById('qs-model'); if (modelEl) modelEl.value = ''; var fromStepEl = document.getElementById('qs-from-step'); if (fromStepEl) fromStepEl.innerHTML = ''; var dryRunEl = document.getElementById('qs-dry-run'); if (dryRunEl) dryRunEl.checked = false; - // Load step list loadQsStepList(name); document.getElementById('quickstart-dialog').showModal(); document.getElementById('quickstart-input').focus(); } - -function hideQuickStart() { - document.getElementById('quickstart-dialog').close(); - quickStartPipeline = ''; -} - +function hideQuickStart() { document.getElementById('quickstart-dialog').close(); quickStartPipeline = ''; } function submitQuickStart() { if (!quickStartPipeline) return; var input = document.getElementById('quickstart-input').value; var btn = document.getElementById('quickstart-submit'); var body = {input: input || ''}; - // Collect advanced options var opts = collectAdvancedOptions('qs'); Object.keys(opts).forEach(function(k) { body[k] = opts[k]; }); - setButtonLoading(btn, true); fetchJSON('/api/pipelines/' + encodeURIComponent(quickStartPipeline) + '/start', { - method: 'POST', - headers: {'Content-Type': 'application/json'}, - body: JSON.stringify(body) + method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body) }).then(function(data) { - if (body.dry_run && data.findings !== undefined) { - showDryRunReport(data); - setButtonLoading(btn, false); - return; - } + if (body.dry_run && data.findings !== undefined) { showDryRunReport(data); setButtonLoading(btn, false); return; } showToast('Pipeline started: ' + data.run_id, 'success', 3000); setTimeout(function() { window.location.href = '/runs/' + data.run_id; }, 500); - }).catch(function() { - setButtonLoading(btn, false); - }); + }).catch(function() { setButtonLoading(btn, false); }); } - -function loadQsStepList(pipelineName) { +function loadQsStepList(name) { var fromStep = document.getElementById('qs-from-step'); - var stepsChecks = document.getElementById('qs-steps-checks'); - var excludeChecks = document.getElementById('qs-exclude-checks'); - fetchJSON('/api/pipelines/' + encodeURIComponent(pipelineName)).then(function(data) { + fetchJSON('/api/pipelines/' + encodeURIComponent(name)).then(function(data) { var steps = data.steps || []; var opts = ''; - for (var i = 0; i < steps.length; i++) { - opts += ''; - } + for (var i = 0; i < steps.length; i++) opts += ''; if (fromStep) fromStep.innerHTML = opts; - var checksHTML = ''; - for (var i = 0; i < steps.length; i++) { - checksHTML += ''; - } - if (stepsChecks) stepsChecks.innerHTML = checksHTML || 'No steps'; - var exclHTML = ''; - for (var i = 0; i < steps.length; i++) { - exclHTML += ''; - } - if (excludeChecks) excludeChecks.innerHTML = exclHTML || 'No steps'; - }).catch(function() { - if (stepsChecks) stepsChecks.innerHTML = 'Failed to load steps'; - if (excludeChecks) excludeChecks.innerHTML = 'Failed to load steps'; - }); + }).catch(function() {}); } - function onQsFromStepChange() { var fromStep = document.getElementById('qs-from-step'); - var stepsGroup = document.getElementById('qs-steps-group'); if (fromStep && fromStep.value) { - if (stepsGroup) stepsGroup.style.opacity = '0.5'; var checks = document.querySelectorAll('#qs-steps-checks input[type="checkbox"]'); for (var i = 0; i < checks.length; i++) { checks[i].checked = false; checks[i].disabled = true; } - } else { - if (stepsGroup) stepsGroup.style.opacity = '1'; - var checks = document.querySelectorAll('#qs-steps-checks input[type="checkbox"]'); - for (var i = 0; i < checks.length; i++) { checks[i].disabled = false; } } } - -document.addEventListener('keydown', function(e) { - if (e.key === 'Escape') hideQuickStart(); -}); +document.addEventListener('keydown', function(e) { if (e.key === 'Escape') hideQuickStart(); }); {{end}} From 2fa7d21d008d181a6609c55ed946fab39bbc2d5b Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Mon, 6 Apr 2026 02:25:34 +0200 Subject: [PATCH 02/71] refactor(webui): extract shared CSS to style.css, remove v2- prefix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Extracted 336 lines of component CSS from run_detail.html inline -
+
← Runs

@@ -355,7 +17,7 @@

-
+
{{.Run.FormattedStartedAt}} · {{if .Run.Duration}}{{.Run.Duration}}{{else}}-{{end}} @@ -366,49 +28,49 @@

{{range .Adapters}}{{adapterIcon .}}{{friendlyModel .}}{{end}} {{range .Models}}{{friendlyModel .}}{{end}} - {{if .Events}}{{end}} - - {{if .Run.BranchName}}{{end}} - + {{if .Events}}{{end}} + + {{if .Run.BranchName}}{{end}} +

-