feat(stack-view): identity header with health state and action hierarchy (#688)

* feat(stack-view): identity header with health state and action hierarchy

Redesign the stack view header around three questions: what is this, is it
healthy, what does it do. Surface Docker healthcheck state, primary image
tag, and image digest; group actions by frequency.

- Backend: extend /api/stacks/:name/containers with healthStatus (healthy /
  unhealthy / starting / none), Image, and ImageID by inspecting each
  container in parallel.
- Frontend: replace flat CardHeader with breadcrumb, italic serif title,
  colored state pill with pulse, and a mono image/digest line with a
  one-click copy button for the full digest.
- Frontend: action hierarchy - primary cyan Restart/Start, outline Stop and
  Update, and an overflow menu for Rollback, Scan config, and Delete.
- Docs: new Stack header section and updated controlling-a-running-stack
  tables showing primary/secondary/overflow grouping.

* test(e2e): open overflow menu to reach stack Delete action

Destructive actions now live under the stack toolbar overflow menu rather
than as a flat top-level button, so the delete flow must click More actions
before selecting the Delete menu item.
This commit is contained in:
Anso
2026-04-18 23:38:56 -04:00
committed by GitHub
parent 88ec71fcaa
commit 82aabfe64c
5 changed files with 244 additions and 86 deletions
+5 -4
View File
@@ -64,10 +64,11 @@ test.describe('Stack management', () => {
// Click on the stack to open the editor
await page.getByText(TEST_STACK).first().click();
// The toolbar Delete button has the Lucide Trash2 icon
const deleteBtn = page.locator('button:has(.lucide-trash-2)');
await expect(deleteBtn).toBeVisible({ timeout: 10_000 });
await deleteBtn.click();
// Destructive actions live under the overflow menu in the stack toolbar
await page.getByRole('button', { name: 'More actions' }).click();
const deleteItem = page.getByRole('menuitem', { name: /delete/i });
await expect(deleteItem).toBeVisible({ timeout: 10_000 });
await deleteItem.click();
// AlertDialog confirmation
await expect(page.getByRole('alertdialog')).toBeVisible({ timeout: 5_000 });