From 7153959e52ca8b6a0b4602bc4df61627e7966354 Mon Sep 17 00:00:00 2001
From: Gallay Lajos <gallay.lajos@gmail.com>
Date: Thu, 4 Jun 2026 12:51:48 +0200
Subject: [PATCH 1/3] feat: UI / UX refactor and cleanup

---
 e2e/helpers/index.ts                          |   2 +-
 e2e/helpers/sidebar.ts                        |   9 +-
 e2e/helpers/stack.ts                          |  20 +-
 e2e/navigation.spec.ts                        |  66 ++
 frontend/src/components/app-routes.tsx        |   6 +-
 frontend/src/components/branch-selector.tsx   |  48 +-
 .../src/components/layout/breadcrumbs.tsx     |   4 +-
 .../layout/sidebar-stack-item.spec.tsx        |  80 +++
 .../components/layout/sidebar-stack-item.tsx  | 164 +++++
 frontend/src/components/layout/sidebar.tsx    | 158 ++---
 .../src/components/service-table.spec.tsx     |  83 +++
 frontend/src/components/service-table.tsx     |  94 +--
 .../src/components/stack-redirect.spec.tsx    |  42 ++
 frontend/src/components/stack-redirect.tsx    |  37 ++
 frontend/src/pages/dashboard/index.tsx        |  15 +-
 frontend/src/pages/dashboard/service-row.tsx  | 134 -----
 .../src/pages/dashboard/stack-card.spec.tsx   | 121 ++++
 frontend/src/pages/dashboard/stack-card.tsx   | 270 +++++++++
 .../src/pages/dashboard/stack-dashboard.tsx   | 562 ------------------
 .../pages/dashboard/stack-list-dashboard.tsx  | 133 +----
 .../src/pages/import-export/import-stack.tsx  |   7 +-
 .../services/services-empty-state.spec.tsx    |  39 ++
 .../pages/services/services-empty-state.tsx   | 121 ++++
 frontend/src/pages/services/services-list.tsx |  52 +-
 .../services/stack-actions-menu.spec.tsx      |  43 ++
 .../src/pages/services/stack-actions-menu.tsx |  84 +++
 frontend/src/pages/stacks/create-stack.tsx    |   2 +-
 frontend/src/pages/stacks/stack-setup.tsx     | 294 ---------
 .../create-service-wizard/setup-step.tsx      |  18 +-
 frontend/src/utils/stack-status.spec.ts       |  94 +++
 frontend/src/utils/stack-status.ts            |  56 ++
 31 files changed, 1478 insertions(+), 1380 deletions(-)
 create mode 100644 e2e/navigation.spec.ts
 create mode 100644 frontend/src/components/layout/sidebar-stack-item.spec.tsx
 create mode 100644 frontend/src/components/layout/sidebar-stack-item.tsx
 create mode 100644 frontend/src/components/service-table.spec.tsx
 create mode 100644 frontend/src/components/stack-redirect.spec.tsx
 create mode 100644 frontend/src/components/stack-redirect.tsx
 delete mode 100644 frontend/src/pages/dashboard/service-row.tsx
 create mode 100644 frontend/src/pages/dashboard/stack-card.spec.tsx
 create mode 100644 frontend/src/pages/dashboard/stack-card.tsx
 delete mode 100644 frontend/src/pages/dashboard/stack-dashboard.tsx
 create mode 100644 frontend/src/pages/services/services-empty-state.spec.tsx
 create mode 100644 frontend/src/pages/services/services-empty-state.tsx
 create mode 100644 frontend/src/pages/services/stack-actions-menu.spec.tsx
 create mode 100644 frontend/src/pages/services/stack-actions-menu.tsx
 delete mode 100644 frontend/src/pages/stacks/stack-setup.tsx
 create mode 100644 frontend/src/utils/stack-status.spec.ts
 create mode 100644 frontend/src/utils/stack-status.ts

diff --git a/e2e/helpers/index.ts b/e2e/helpers/index.ts
index 0ab391a..16b1448 100644
--- a/e2e/helpers/index.ts
+++ b/e2e/helpers/index.ts
@@ -5,4 +5,4 @@ export { addPrerequisite, type PrerequisiteParams } from './prerequisite.js'
 export { addRepository, type AddRepositoryParams } from './repository.js'
 export { fillServiceForm, navigateToCreateService, submitServiceForm, type CreateServiceParams } from './service.js'
 export { navigateViaSidebar } from './sidebar.js'
-export { createStack, deleteStack, type CreateStackParams } from './stack.js'
+export { createStack, deleteStack, openStackActionsMenu, type CreateStackParams } from './stack.js'
diff --git a/e2e/helpers/sidebar.ts b/e2e/helpers/sidebar.ts
index 83ce5b3..b8dfd0b 100644
--- a/e2e/helpers/sidebar.ts
+++ b/e2e/helpers/sidebar.ts
@@ -1,13 +1,10 @@
 import type { Page } from '@playwright/test'
 
-export const navigateViaSidebar = async (
-  page: Page,
-  stackDisplayName: string,
-  link: 'Overview' | 'Services' | 'Repositories' | 'Prerequisites',
-) => {
+export type StackSidebarLink = 'Services' | 'Repositories' | 'Prerequisites'
+
+export const navigateViaSidebar = async (page: Page, stackDisplayName: string, link: StackSidebarLink) => {
   const stackSidebar = page.locator('shade-accordion-item').filter({ hasText: stackDisplayName })
 
-  // Expand the accordion if it's collapsed
   const isExpanded = await stackSidebar.getAttribute('data-expanded')
   if (isExpanded === null) {
     await stackSidebar.locator('.accordion-header').click()
diff --git a/e2e/helpers/stack.ts b/e2e/helpers/stack.ts
index 6ac4a11..933f996 100644
--- a/e2e/helpers/stack.ts
+++ b/e2e/helpers/stack.ts
@@ -21,26 +21,28 @@ export const createStack = async (page: Page, params: CreateStackParams) => {
   await page.locator('button', { hasText: 'Create' }).click()
 
   await expectNotification(page, `Stack "${params.displayName}" was created successfully.`)
-  await expect(page.locator('shade-dashboard')).toBeVisible()
-  await expect(page.getByTestId('page-header-title')).toContainText(params.displayName)
+  await expect(page.locator('shade-services-list')).toBeVisible()
+  await expect(page.getByTestId('page-header-title')).toContainText('Services (0)')
+}
+
+export const openStackActionsMenu = async (page: Page) => {
+  await page.getByRole('button', { name: 'Stack actions' }).click()
 }
 
 export const deleteStack = async (page: Page, displayName: string) => {
-  // Navigate to the main dashboard via the sidebar "Dashboard" link (always visible, no accordion)
   await page.locator('shade-sidebar-item a', { hasText: 'Dashboard' }).click()
   await expect(page.locator('stack-list-dashboard')).toBeVisible()
 
-  // Click on the stack card to open its overview
-  await page.locator('stack-list-dashboard shade-card', { hasText: displayName }).click()
-  await expect(page.getByTestId('page-header-title')).toContainText(displayName)
+  await page.locator('stack-list-dashboard stack-card', { hasText: displayName }).click()
+  await expect(page.locator('shade-services-list')).toBeVisible()
 
-  // Navigate to Edit Stack, then delete
-  await page.locator('a', { hasText: 'Edit Stack' }).click()
+  await openStackActionsMenu(page)
+  await page.getByRole('menuitem', { name: 'Edit Stack' }).click()
   await expect(page.locator('shade-edit-stack')).toBeVisible()
 
   await page.locator('button', { hasText: 'Delete Stack' }).click()
   await page.locator('shade-dialog .dialog-confirm-btn').click()
 
   await expectNotification(page, `"${displayName}" was deleted.`)
-  await expect(page.locator('shade-dashboard')).toBeVisible({ timeout: 10_000 })
+  await expect(page.locator('stack-list-dashboard')).toBeVisible({ timeout: 10_000 })
 }
diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts
new file mode 100644
index 0000000..488022e
--- /dev/null
+++ b/e2e/navigation.spec.ts
@@ -0,0 +1,66 @@
+import { tmpdir } from 'os'
+import { join } from 'path'
+
+import { expect, test } from '@playwright/test'
+
+import { createStack, deleteStack, login, openStackActionsMenu } from './helpers/index.js'
+
+test('Navigation restructure', async ({ page, browserName }) => {
+  const uuid = crypto.randomUUID()
+  const stackName = `e2e-nav-${uuid}`
+  const displayName = `Nav Stack - ${browserName} - ${uuid}`
+
+  await page.goto('/')
+  await login(page)
+
+  try {
+    await test.step('Create stack lands on Services', async () => {
+      await createStack(page, {
+        name: stackName,
+        displayName,
+        description: 'Navigation restructure E2E',
+        mainDirectory: join(tmpdir(), `e2e-nav-${uuid}`),
+      })
+      await expect(page).toHaveURL(new RegExp(`/stacks/${stackName}/services$`))
+    })
+
+    await test.step('Legacy routes redirect to Services', async () => {
+      await page.goto(`/stacks/${stackName}`)
+      await expect(page.locator('shade-services-list')).toBeVisible()
+      await expect(page).toHaveURL(new RegExp(`/stacks/${stackName}/services$`))
+
+      await page.goto(`/stacks/${stackName}/setup`)
+      await expect(page.locator('shade-services-list')).toBeVisible()
+      await expect(page).toHaveURL(new RegExp(`/stacks/${stackName}/services$`))
+    })
+
+    await test.step('Stack actions menu reaches Edit and Export', async () => {
+      await openStackActionsMenu(page)
+      await page.getByRole('menuitem', { name: 'Edit Stack' }).click()
+      await expect(page.locator('shade-edit-stack')).toBeVisible()
+
+      await page.goto(`/stacks/${stackName}/services`)
+      await openStackActionsMenu(page)
+      await page.getByRole('menuitem', { name: 'Export Stack' }).click()
+      await expect(page.locator('shade-export-stack')).toBeVisible()
+    })
+
+    await test.step('Dashboard card actions do not navigate away', async () => {
+      await page.locator('shade-sidebar-item a', { hasText: 'Dashboard' }).click()
+      await expect(page.locator('stack-list-dashboard')).toBeVisible()
+
+      const card = page.locator('stack-card', { hasText: displayName })
+      await card.getByRole('button', { name: 'Start All' }).click()
+      await expect(page.locator('stack-list-dashboard')).toBeVisible()
+      await expect(page).toHaveURL('/')
+    })
+
+    await test.step('Sidebar shows stack status dot', async () => {
+      await expect(page.locator('shade-sidebar-stack-item [data-testid="stack-status-dot"]').first()).toBeVisible()
+    })
+  } finally {
+    await test.step('Clean up stack', async () => {
+      await deleteStack(page, displayName)
+    })
+  }
+})
diff --git a/frontend/src/components/app-routes.tsx b/frontend/src/components/app-routes.tsx
index 9e7ad0c..ae04dbe 100644
--- a/frontend/src/components/app-routes.tsx
+++ b/frontend/src/components/app-routes.tsx
@@ -18,8 +18,8 @@ import { ServicesList } from '../pages/services/services-list.js'
 import { UserSettings } from '../pages/settings/user-settings.js'
 import { CreateStack } from '../pages/stacks/create-stack.js'
 import { EditStack } from '../pages/stacks/edit-stack.js'
-import { StackSetup } from '../pages/stacks/stack-setup.js'
 import { CreateServiceWizard } from '../pages/wizards/create-service-wizard/index.js'
+import { StackRedirect } from './stack-redirect.js'
 
 export const appRoutes = {
   '/': {
@@ -36,7 +36,7 @@ export const appRoutes = {
   },
   '/stacks/:stackName': {
     component: ({ match }: { match: MatchResult<{ stackName: string }> }) => (
-      <Dashboard stackName={match.params.stackName} />
+      <StackRedirect stackName={match.params.stackName} />
     ),
   },
   '/stacks/:stackName/edit': {
@@ -51,7 +51,7 @@ export const appRoutes = {
   },
   '/stacks/:stackName/setup': {
     component: ({ match }: { match: MatchResult<{ stackName: string }> }) => (
-      <StackSetup stackName={match.params.stackName} />
+      <StackRedirect stackName={match.params.stackName} />
     ),
   },
   '/stacks/:stackName/services': {
diff --git a/frontend/src/components/branch-selector.tsx b/frontend/src/components/branch-selector.tsx
index 60ce33a..81ed79b 100644
--- a/frontend/src/components/branch-selector.tsx
+++ b/frontend/src/components/branch-selector.tsx
@@ -10,6 +10,7 @@ type BranchSelectorProps = {
   cloneStatus: CloneStatus
   upstreamStatus?: UpstreamStatus
   lastPullError?: string
+  commitsBehind?: number
 }
 
 /**
@@ -205,6 +206,16 @@ export const BranchSelector = Shade<BranchSelectorProps>({
       opacity: '0.5',
       flexShrink: '0',
     },
+    '& .commits-behind-badge': {
+      fontSize: '10px',
+      fontWeight: '600',
+      padding: '1px 5px',
+      borderRadius: '8px',
+      backgroundColor: 'var(--shades-theme-palette-primary-main)',
+      color: 'var(--shades-theme-palette-primary-mainContrast)',
+      flexShrink: '0',
+      lineHeight: '1.2',
+    },
     '& .branch-spinner': {
       display: 'inline-block',
       width: '10px',
@@ -218,7 +229,7 @@ export const BranchSelector = Shade<BranchSelectorProps>({
   },
   render: ({ props, injector, useState, useDisposable, useRef }) => {
     const triggerRef = useRef<HTMLButtonElement>('triggerRef')
-    const { serviceId, currentBranch, cloneStatus, upstreamStatus, lastPullError } = props
+    const { serviceId, currentBranch, cloneStatus, upstreamStatus, lastPullError, commitsBehind } = props
 
     const [branches, setBranches] = useState<{ local: string[]; remote: string[] } | null>('branches', null)
     const [isLoading, setIsLoading] = useState('isLoading', false)
@@ -332,20 +343,27 @@ export const BranchSelector = Shade<BranchSelectorProps>({
 
     return (
       <>
-        <button
-          ref={triggerRef}
-          type="button"
-          className="branch-trigger"
-          onclick={handleOpen}
-          disabled={disabled}
-          title={title}
-          {...(disabled ? { 'data-disabled': '' } : {})}
-          {...(isUpstreamGone ? { 'data-upstream-gone': '' } : {})}
-        >
-          {isPulling || isCheckingOut ? <span className="branch-spinner" aria-hidden="true" /> : null}
-          {label}
-          <span className="branch-arrow">&#9660;</span>
-        </button>
+        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+          <button
+            ref={triggerRef}
+            type="button"
+            className="branch-trigger"
+            onclick={handleOpen}
+            disabled={disabled}
+            title={title}
+            {...(disabled ? { 'data-disabled': '' } : {})}
+            {...(isUpstreamGone ? { 'data-upstream-gone': '' } : {})}
+          >
+            {isPulling || isCheckingOut ? <span className="branch-spinner" aria-hidden="true" /> : null}
+            {label}
+            <span className="branch-arrow">&#9660;</span>
+          </button>
+          {commitsBehind ? (
+            <span className="commits-behind-badge" data-testid="commits-behind-badge" title="Commits behind upstream">
+              {commitsBehind} behind
+            </span>
+          ) : null}
+        </span>
         <style>{`
           @keyframes shade-branch-spin {
             from { transform: rotate(0deg); }
diff --git a/frontend/src/components/layout/breadcrumbs.tsx b/frontend/src/components/layout/breadcrumbs.tsx
index c79be35..18eafca 100644
--- a/frontend/src/components/layout/breadcrumbs.tsx
+++ b/frontend/src/components/layout/breadcrumbs.tsx
@@ -26,7 +26,7 @@ const parseBreadcrumbs = (
 
   segments.push({
     label: stackName,
-    href: '/stacks/:stackName',
+    href: '/stacks/:stackName/services',
     params: { stackName },
   })
 
@@ -71,8 +71,6 @@ const parseBreadcrumbs = (
     segments.push({ label: 'Edit' })
   } else if (subSection === 'export') {
     segments.push({ label: 'Export' })
-  } else if (subSection === 'setup') {
-    segments.push({ label: 'Setup' })
   }
 
   return { segments, stackName, serviceId, repositoryId }
diff --git a/frontend/src/components/layout/sidebar-stack-item.spec.tsx b/frontend/src/components/layout/sidebar-stack-item.spec.tsx
new file mode 100644
index 0000000..b3ab7d7
--- /dev/null
+++ b/frontend/src/components/layout/sidebar-stack-item.spec.tsx
@@ -0,0 +1,80 @@
+import { createInjector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot, LocationService } from '@furystack/shades'
+import { defaultDarkTheme, ThemeProviderService } from '@furystack/shades-common-components'
+import type { ServiceView, StackView } from 'common'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { SidebarStackItem } from './sidebar-stack-item.js'
+
+const stack: StackView = {
+  name: 'demo',
+  displayName: 'Demo Stack',
+  description: '',
+  stackName: 'demo',
+  mainDirectory: '/tmp/demo',
+  environmentVariables: {},
+  createdAt: '',
+  updatedAt: '',
+}
+
+const baseService: ServiceView = {
+  id: 'svc-1',
+  serviceId: 'svc-1',
+  stackName: 'demo',
+  displayName: 'API',
+  description: '',
+  runCommand: 'npm start',
+  prerequisiteIds: [],
+  prerequisiteServiceIds: [],
+  files: [],
+  autoFetchEnabled: false,
+  autoFetchIntervalMinutes: 60,
+  autoRestartOnFetch: false,
+  environmentVariableOverrides: {},
+  localFiles: [],
+  cloneStatus: 'not-cloned',
+  installStatus: 'not-installed',
+  buildStatus: 'not-built',
+  runStatus: 'running',
+  createdAt: '',
+  updatedAt: '',
+}
+
+describe('SidebarStackItem', () => {
+  let root: HTMLDivElement
+
+  afterEach(() => {
+    root?.remove()
+  })
+
+  it('should show status dot, services count, and no overview/setup links', async () => {
+    const injector = createInjector()
+    injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
+    injector.get(LocationService).navigate('/stacks/demo/services')
+
+    root = document.createElement('div')
+    document.body.appendChild(root)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: (
+        <SidebarStackItem
+          stack={stack}
+          stackServices={[baseService, { ...baseService, id: 'svc-2', runStatus: 'stopped' }]}
+          currentUrl="/stacks/demo/services"
+          showAccordion
+        />
+      ),
+    })
+
+    await flushUpdates()
+
+    const host = root.querySelector('shade-sidebar-stack-item')
+    expect(host?.querySelector('[data-testid="stack-status-dot"]')).not.toBeNull()
+    expect(host?.textContent).toContain('Services')
+    expect(host?.textContent).toContain('2')
+    expect(host?.textContent).not.toContain('Overview')
+    expect(host?.textContent).not.toContain('Setup')
+  })
+})
diff --git a/frontend/src/components/layout/sidebar-stack-item.tsx b/frontend/src/components/layout/sidebar-stack-item.tsx
new file mode 100644
index 0000000..00d3292
--- /dev/null
+++ b/frontend/src/components/layout/sidebar-stack-item.tsx
@@ -0,0 +1,164 @@
+import { createComponent, Shade } from '@furystack/shades'
+import { AccordionItem, cssVariableTheme, Icon, icons } from '@furystack/shades-common-components'
+import type { ServiceView, StackView } from 'common'
+import { match } from 'path-to-regexp'
+
+import { StackCraftNestedRouteLink } from '../app-routes.js'
+import { getStackRunSummary, getStackStatusPaletteKey } from '../../utils/stack-status.js'
+
+type SidebarStackLinkProps = {
+  stackName: string
+  subPath?: string
+  label: string
+  count?: number
+  icon: typeof icons.home
+  currentUrl: string
+}
+
+const SidebarStackLink = Shade<SidebarStackLinkProps>({
+  customElementName: 'shade-sidebar-stack-link',
+  css: {
+    display: 'block',
+    '& a': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      padding: '7px 12px 7px 40px',
+      textDecoration: 'none',
+      color: 'inherit',
+      fontSize: '0.84rem',
+      borderRadius: cssVariableTheme.shape.borderRadius.sm,
+      borderLeft: '3px solid transparent',
+      margin: '1px 8px 1px 0',
+      transition: `background ${cssVariableTheme.transitions.duration.fast} ease, border-color ${cssVariableTheme.transitions.duration.fast} ease, color ${cssVariableTheme.transitions.duration.fast} ease`,
+    },
+    '& a:hover': {
+      background: cssVariableTheme.action.hoverBackground,
+    },
+    '& a[data-active]': {
+      color: cssVariableTheme.palette.primary.main,
+      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+      background: cssVariableTheme.action.hoverBackground,
+      borderLeftColor: cssVariableTheme.palette.primary.main,
+    },
+    '& .link-label': {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      minWidth: '0',
+      flex: '1',
+    },
+    '& .link-count': {
+      fontSize: '0.75rem',
+      opacity: '0.6',
+      flexShrink: '0',
+    },
+  },
+  render: ({ props }) => {
+    const compiledHref = `/stacks/${props.stackName}${props.subPath ? `/${props.subPath}` : ''}`
+    const isActive = props.subPath
+      ? props.currentUrl.startsWith(compiledHref)
+      : !!match(compiledHref, { end: true })(props.currentUrl)
+
+    const href = props.subPath
+      ? (`/stacks/:stackName/${props.subPath}` as '/stacks/:stackName/services')
+      : '/stacks/:stackName'
+
+    return (
+      <StackCraftNestedRouteLink
+        path={href}
+        params={{ stackName: props.stackName }}
+        title={props.label}
+        {...(isActive ? { 'data-active': '' } : {})}
+      >
+        <Icon icon={props.icon} size={14} style={{ flexShrink: '0' }} />
+        <span className="link-label">{props.label}</span>
+        {props.count !== undefined ? <span className="link-count">{props.count}</span> : null}
+      </StackCraftNestedRouteLink>
+    )
+  },
+})
+
+export type SidebarStackItemProps = {
+  stack: StackView
+  stackServices: ServiceView[]
+  currentUrl: string
+  showAccordion: boolean
+}
+
+export const SidebarStackItem = Shade<SidebarStackItemProps>({
+  customElementName: 'shade-sidebar-stack-item',
+  css: {
+    '& .stack-status-dot': {
+      width: '8px',
+      height: '8px',
+      borderRadius: '50%',
+      flexShrink: '0',
+    },
+    '& .accordion-title-row': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      minWidth: '0',
+    },
+    '& .sidebar-stack-accordion-links': {
+      margin: '0 -12px 0 -8px',
+      paddingBottom: '4px',
+    },
+  },
+  render: ({ props }) => {
+    const { stack, stackServices, currentUrl, showAccordion } = props
+    const stackPrefix = `/stacks/${stack.name}`
+    const isCategoryActive = currentUrl === stackPrefix || currentUrl.startsWith(`${stackPrefix}/`)
+    const runSummary = getStackRunSummary(stackServices)
+    const dotColor = getStackStatusPaletteKey(runSummary.status)
+
+    if (!showAccordion) {
+      return <span style={{ display: 'none' }} aria-hidden="true" />
+    }
+
+    return (
+      <AccordionItem
+        defaultExpanded={isCategoryActive}
+        icon={
+          <span
+            className="stack-status-dot"
+            data-testid="stack-status-dot"
+            title={
+              runSummary.total === 0
+                ? 'No services'
+                : `${runSummary.running} running, ${runSummary.stopped} stopped, ${runSummary.error} error`
+            }
+            style={{ backgroundColor: cssVariableTheme.palette[dotColor].main }}
+          />
+        }
+        title={stack.displayName}
+      >
+        <div className="sidebar-stack-accordion-links">
+          <SidebarStackLink
+            stackName={stack.name}
+            subPath="services"
+            icon={icons.code}
+            label="Services"
+            count={stackServices.length}
+            currentUrl={currentUrl}
+          />
+          <SidebarStackLink
+            stackName={stack.name}
+            subPath="repositories"
+            icon={icons.link}
+            label="Repositories"
+            currentUrl={currentUrl}
+          />
+          <SidebarStackLink
+            stackName={stack.name}
+            subPath="prerequisites"
+            icon={icons.check}
+            label="Prerequisites"
+            currentUrl={currentUrl}
+          />
+        </div>
+      </AccordionItem>
+    )
+  },
+})
diff --git a/frontend/src/components/layout/sidebar.tsx b/frontend/src/components/layout/sidebar.tsx
index e2421c0..7dd2907 100644
--- a/frontend/src/components/layout/sidebar.tsx
+++ b/frontend/src/components/layout/sidebar.tsx
@@ -1,13 +1,14 @@
 import { useCollectionSync } from '../../services/entity-sync.js'
 import type { Injector } from '@furystack/inject'
 import { createComponent, LocationService, Shade } from '@furystack/shades'
-import { Accordion, AccordionItem, cssVariableTheme, Divider, Icon, icons } from '@furystack/shades-common-components'
-import type { StackView } from 'common'
-import { StackDefinition } from 'common'
+import { Accordion, cssVariableTheme, Divider, Icon, icons } from '@furystack/shades-common-components'
+import type { ServiceView, StackView } from 'common'
+import { mergeServiceView, ServiceConfig, ServiceDefinition, ServiceStatus, StackDefinition } from 'common'
 import { match } from 'path-to-regexp'
 
 import type { StaticAppRoutePath } from '../app-routes.js'
 import { StackCraftNestedRouteLink } from '../app-routes.js'
+import { SidebarStackItem } from './sidebar-stack-item.js'
 
 /**
  * Per-instance scratch for the location subscription merges.
@@ -16,71 +17,6 @@ import { StackCraftNestedRouteLink } from '../app-routes.js'
  */
 type RemountScratch = { map: Record<string, 0 | 1> }
 
-type SidebarStackLinkProps = {
-  stackName: string
-  subPath?: string
-  label: string
-  icon: typeof icons.home
-  currentUrl: string
-}
-
-const SidebarStackLink = Shade<SidebarStackLinkProps>({
-  customElementName: 'shade-sidebar-stack-link',
-  css: {
-    display: 'block',
-    '& a': {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8px',
-      padding: '7px 12px 7px 40px',
-      textDecoration: 'none',
-      color: 'inherit',
-      fontSize: '0.84rem',
-      borderRadius: cssVariableTheme.shape.borderRadius.sm,
-      borderLeft: '3px solid transparent',
-      margin: '1px 8px 1px 0',
-      transition: `background ${cssVariableTheme.transitions.duration.fast} ease, border-color ${cssVariableTheme.transitions.duration.fast} ease, color ${cssVariableTheme.transitions.duration.fast} ease`,
-    },
-    '& a:hover': {
-      background: cssVariableTheme.action.hoverBackground,
-    },
-    '& a[data-active]': {
-      color: cssVariableTheme.palette.primary.main,
-      fontWeight: cssVariableTheme.typography.fontWeight.semibold,
-      background: cssVariableTheme.action.hoverBackground,
-      borderLeftColor: cssVariableTheme.palette.primary.main,
-    },
-    '& .link-label': {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      minWidth: '0',
-    },
-  },
-  render: ({ props }) => {
-    const compiledHref = `/stacks/${props.stackName}${props.subPath ? `/${props.subPath}` : ''}`
-    const isActive = props.subPath
-      ? props.currentUrl.startsWith(compiledHref)
-      : !!match(compiledHref, { end: true })(props.currentUrl)
-
-    const href = props.subPath
-      ? (`/stacks/:stackName/${props.subPath}` as '/stacks/:stackName/services')
-      : '/stacks/:stackName'
-
-    return (
-      <StackCraftNestedRouteLink
-        path={href}
-        params={{ stackName: props.stackName }}
-        title={props.label}
-        {...(isActive ? { 'data-active': '' } : {})}
-      >
-        <Icon icon={props.icon} size={14} style={{ flexShrink: '0' }} />
-        <span className="link-label">{props.label}</span>
-      </StackCraftNestedRouteLink>
-    )
-  },
-})
-
 type SidebarItemProps = {
   href: StaticAppRoutePath
   icon: typeof icons.home
@@ -164,10 +100,6 @@ export const Sidebar = Shade<{ injector?: Injector }>({
     '& .sidebar-stacks-accordion': {
       margin: '0 8px 4px',
     },
-    '& .sidebar-stack-accordion-links': {
-      margin: '0 -12px 0 -8px',
-      paddingBottom: '4px',
-    },
   },
   render: (options) => {
     const { injector, useObservable, useState, useDisposable } = options
@@ -178,6 +110,28 @@ export const Sidebar = Shade<{ injector?: Injector }>({
       stacksState.status === 'synced' || stacksState.status === 'cached' ? stacksState.data.entries : []
     ) as StackView[]
 
+    const defsState = useCollectionSync(options, ServiceDefinition, {})
+    const defs = defsState.status === 'synced' || defsState.status === 'cached' ? defsState.data.entries : []
+
+    const statusesState = useCollectionSync(options, ServiceStatus, {})
+    const statuses =
+      statusesState.status === 'synced' || statusesState.status === 'cached' ? statusesState.data.entries : []
+
+    const configsState = useCollectionSync(options, ServiceConfig, {})
+    const configs =
+      configsState.status === 'synced' || configsState.status === 'cached' ? configsState.data.entries : []
+
+    const statusMap = new Map(statuses.map((s) => [s.serviceId, s]))
+    const configMap = new Map(configs.map((c) => [c.serviceId, c]))
+
+    const servicesByStack = new Map<string, ServiceView[]>()
+    for (const def of defs) {
+      const svc = mergeServiceView(def, configMap.get(def.id), statusMap.get(def.id))
+      const list = servicesByStack.get(def.stackName) ?? []
+      list.push(svc)
+      servicesByStack.set(def.stackName, list)
+    }
+
     const stackIds = stacks.map((s) => s.name).join('\0')
 
     const [remountPhaseByStack, setRemountPhaseByStack] = useState<Record<string, 0 | 1>>('remountPhaseByStack', {})
@@ -224,58 +178,14 @@ export const Sidebar = Shade<{ injector?: Injector }>({
         <div className="sidebar-section-label">Stacks</div>
         {stacks.length > 0 ? (
           <Accordion className="sidebar-stacks-accordion" variant="outlined" navSection="sidebar-stacks">
-            {stacks.map((stack) => {
-              const stackPrefix = `/stacks/${stack.name}`
-              const isCategoryActive = currentUrl === stackPrefix || currentUrl.startsWith(`${stackPrefix}/`)
-              const showAccordion = (remountPhaseByStack[stack.name] ?? 0) === 0
-
-              return showAccordion ? (
-                <AccordionItem
-                  defaultExpanded={isCategoryActive}
-                  icon={<Icon icon={icons.layers} size={16} style={{ flexShrink: '0' }} />}
-                  title={stack.displayName}
-                >
-                  <div className="sidebar-stack-accordion-links">
-                    <SidebarStackLink
-                      stackName={stack.name}
-                      icon={icons.layers}
-                      label="Overview"
-                      currentUrl={currentUrl}
-                    />
-                    <SidebarStackLink
-                      stackName={stack.name}
-                      subPath="services"
-                      icon={icons.code}
-                      label="Services"
-                      currentUrl={currentUrl}
-                    />
-                    <SidebarStackLink
-                      stackName={stack.name}
-                      subPath="repositories"
-                      icon={icons.link}
-                      label="Repositories"
-                      currentUrl={currentUrl}
-                    />
-                    <SidebarStackLink
-                      stackName={stack.name}
-                      subPath="prerequisites"
-                      icon={icons.check}
-                      label="Prerequisites"
-                      currentUrl={currentUrl}
-                    />
-                    <SidebarStackLink
-                      stackName={stack.name}
-                      subPath="setup"
-                      icon={icons.settings}
-                      label="Setup"
-                      currentUrl={currentUrl}
-                    />
-                  </div>
-                </AccordionItem>
-              ) : (
-                <span style={{ display: 'none' }} aria-hidden="true" />
-              )
-            })}
+            {stacks.map((stack) => (
+              <SidebarStackItem
+                stack={stack}
+                stackServices={servicesByStack.get(stack.name) ?? []}
+                currentUrl={currentUrl}
+                showAccordion={(remountPhaseByStack[stack.name] ?? 0) === 0}
+              />
+            ))}
           </Accordion>
         ) : null}
         <SidebarItem href="/stacks/create" icon={icons.plus} label="Create Stack" currentUrl={currentUrl} />
diff --git a/frontend/src/components/service-table.spec.tsx b/frontend/src/components/service-table.spec.tsx
new file mode 100644
index 0000000..edadb14
--- /dev/null
+++ b/frontend/src/components/service-table.spec.tsx
@@ -0,0 +1,83 @@
+import { createInjector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { CollectionService, defaultDarkTheme, ThemeProviderService } from '@furystack/shades-common-components'
+import type { ServiceView } from 'common'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { ServicesApiClient } from '../services/api-clients/services-api-client.js'
+import { ServiceTable } from './service-table.js'
+
+vi.mock('./app-routes.js', () => ({
+  stackCraftNavigate: vi.fn(),
+  StackCraftNestedRouteLink: () => null,
+  stackCraftReplace: vi.fn(),
+}))
+
+const baseService: ServiceView = {
+  id: 'svc-1',
+  serviceId: 'svc-1',
+  stackName: 'demo',
+  displayName: 'API Gateway',
+  description: '',
+  runCommand: 'npm start',
+  prerequisiteIds: [],
+  prerequisiteServiceIds: [],
+  files: [],
+  autoFetchEnabled: false,
+  autoFetchIntervalMinutes: 60,
+  autoRestartOnFetch: false,
+  environmentVariableOverrides: {},
+  localFiles: [],
+  cloneStatus: 'cloned',
+  installStatus: 'installed',
+  buildStatus: 'built',
+  runStatus: 'stopped',
+  repositoryId: 'repo-1',
+  currentBranch: 'main',
+  commitsBehind: 3,
+  createdAt: '',
+  updatedAt: '',
+}
+
+describe('ServiceTable', () => {
+  let root: HTMLDivElement
+  let collectionService: CollectionService<ServiceView>
+
+  afterEach(() => {
+    root?.remove()
+    collectionService?.[Symbol.dispose]()
+  })
+
+  it('should render primary, logs, and details actions only', async () => {
+    const injector = createInjector()
+    injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
+    injector.bind(ServicesApiClient, () => ({ call: vi.fn() }))
+    collectionService = new CollectionService<ServiceView>({ searchField: 'displayName', idField: 'id' })
+
+    root = document.createElement('div')
+    document.body.appendChild(root)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <ServiceTable services={[baseService]} collectionService={collectionService} />,
+    })
+
+    await flushUpdates()
+
+    const table = root.querySelector('shade-service-table')
+    expect(table).not.toBeNull()
+
+    const actionButtons = table?.querySelectorAll('[aria-label]') ?? []
+    const labels = Array.from(actionButtons).map((el) => el.getAttribute('aria-label'))
+    expect(labels).toContain('Start')
+    expect(labels).toContain('Logs')
+    expect(labels).toContain('Details')
+    expect(labels).not.toContain('Restart')
+    expect(labels).not.toContain('Update')
+    expect(labels).not.toContain('Edit')
+
+    expect(table?.textContent).toContain('API Gateway')
+    expect(table?.querySelector('[data-testid="commits-behind-badge"]')?.textContent).toContain('3 behind')
+  })
+})
diff --git a/frontend/src/components/service-table.tsx b/frontend/src/components/service-table.tsx
index b2b81d2..3e31ab4 100644
--- a/frontend/src/components/service-table.tsx
+++ b/frontend/src/components/service-table.tsx
@@ -1,5 +1,5 @@
 import type { FindOptions } from '@furystack/core'
-import { createComponent, LocationService, Shade } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
 import {
   Button,
   type CollectionService,
@@ -16,7 +16,7 @@ import type { ServiceView } from 'common'
 import { ServicesApiClient } from '../services/api-clients/services-api-client.js'
 import { applyClientFindOptions } from '../utils/apply-client-find-options.js'
 import { getPrimaryAction } from '../utils/service-pipeline.js'
-import { StackCraftNestedRouteLink } from './app-routes.js'
+import { stackCraftNavigate, StackCraftNestedRouteLink } from './app-routes.js'
 import { BranchSelector } from './branch-selector.js'
 import { MiniPipelineDots } from './mini-pipeline-dots.js'
 import { PrerequisiteSummaryChip } from './prerequisite-summary-chip.js'
@@ -32,11 +32,23 @@ type ServiceColumn = 'selection' | 'displayName' | 'pipeline' | 'branch' | 'acti
 export const ServiceTable = Shade<ServiceTableProps>({
   customElementName: 'shade-service-table',
   render: (options) => {
-    const { props, injector, useState } = options
+    const { props, injector, useState, useDisposable } = options
     const api = injector.get(ServicesApiClient)
     const noty = injector.get(NotyService)
     const { collectionService } = props
 
+    useDisposable(
+      'service-table-row-dblclick',
+      () =>
+        collectionService.subscribe('onRowDoubleClick', (entry) => {
+          stackCraftNavigate(injector, {
+            path: '/stacks/:stackName/services/:serviceId',
+            params: { stackName: entry.stackName, serviceId: entry.id },
+          })
+        }),
+      [collectionService],
+    )
+
     const callServiceAction = (serviceId: string, action: string, actionLabel: string) => {
       void api
         .call({
@@ -113,7 +125,13 @@ export const ServiceTable = Shade<ServiceTableProps>({
           selection: (entry) => <SelectionCell entry={entry} service={collectionService} />,
           displayName: (entry) => (
             <span>
-              <strong>{entry.displayName}</strong>
+              <StackCraftNestedRouteLink
+                path="/stacks/:stackName/services/:serviceId"
+                params={{ stackName: entry.stackName, serviceId: entry.id }}
+                style={{ color: 'inherit', textDecoration: 'none' }}
+              >
+                <strong>{entry.displayName}</strong>
+              </StackCraftNestedRouteLink>
               {entry.description ? (
                 <div style={{ fontSize: cssVariableTheme.typography.fontSize.sm, opacity: '0.6', marginTop: '2px' }}>
                   <MarkdownDisplay content={entry.description} />
@@ -136,6 +154,7 @@ export const ServiceTable = Shade<ServiceTableProps>({
                 cloneStatus={entry.cloneStatus}
                 upstreamStatus={entry.upstreamStatus}
                 lastPullError={entry.lastPullError}
+                commitsBehind={entry.commitsBehind}
               />
             </div>
           ),
@@ -147,7 +166,6 @@ export const ServiceTable = Shade<ServiceTableProps>({
                 style={{ display: 'flex', gap: '2px', alignItems: 'center' }}
                 onclick={(e: MouseEvent) => e.stopPropagation()}
               >
-                {/* Context-aware primary action */}
                 {primary.apiAction ? (
                   <Button
                     variant="text"
@@ -159,56 +177,6 @@ export const ServiceTable = Shade<ServiceTableProps>({
                     startIcon={primary.icon || <Icon icon={icons.play} size="small" />}
                   />
                 ) : null}
-                {/* Restart (when running) */}
-                {entry.runStatus === 'running' ? (
-                  <Button
-                    variant="text"
-                    size="small"
-                    color="warning"
-                    title="Restart"
-                    aria-label="Restart"
-                    onclick={() => callServiceAction(entry.id, 'restart', 'Restart')}
-                    startIcon={<Icon icon={icons.refresh} size="small" />}
-                  />
-                ) : null}
-                {/* Update (pull + install + build + restart if running) */}
-                {entry.repositoryId && entry.cloneStatus === 'cloned' ? (
-                  <div style={{ position: 'relative', display: 'inline-flex' }}>
-                    <Button
-                      variant="text"
-                      size="small"
-                      title="Update: pull, install, build, and restart if running"
-                      aria-label="Update"
-                      onclick={() => callServiceAction(entry.id, 'update', 'Update')}
-                      startIcon={<Icon icon={icons.download} size="small" />}
-                    />
-                    {entry.commitsBehind ? (
-                      <span
-                        style={{
-                          position: 'absolute',
-                          top: '-2px',
-                          right: '-2px',
-                          minWidth: '16px',
-                          height: '16px',
-                          borderRadius: '8px',
-                          backgroundColor: cssVariableTheme.palette.primary.main,
-                          color: cssVariableTheme.palette.primary.mainContrast,
-                          fontSize: '10px',
-                          fontWeight: 'bold',
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                          padding: '0 4px',
-                          lineHeight: '1',
-                          pointerEvents: 'none',
-                        }}
-                      >
-                        {entry.commitsBehind}
-                      </span>
-                    ) : null}
-                  </div>
-                ) : null}
-                {/* Logs */}
                 <StackCraftNestedRouteLink
                   path="/stacks/:stackName/services/:serviceId"
                   params={{ stackName: entry.stackName, serviceId: entry.id }}
@@ -222,7 +190,6 @@ export const ServiceTable = Shade<ServiceTableProps>({
                     startIcon={<Icon icon={icons.fileText} size="small" />}
                   />
                 </StackCraftNestedRouteLink>
-                {/* Details */}
                 <StackCraftNestedRouteLink
                   path="/stacks/:stackName/services/:serviceId"
                   params={{ stackName: entry.stackName, serviceId: entry.id }}
@@ -232,22 +199,9 @@ export const ServiceTable = Shade<ServiceTableProps>({
                     size="small"
                     title="Details"
                     aria-label="Details"
-                    startIcon={<Icon icon={icons.eye} size="small" />}
+                    startIcon={<Icon icon={icons.chevronRight} size="small" />}
                   />
                 </StackCraftNestedRouteLink>
-                {/* Edit */}
-                <Button
-                  variant="text"
-                  size="small"
-                  title="Edit"
-                  aria-label="Edit"
-                  onclick={() =>
-                    injector
-                      .get(LocationService)
-                      .navigate(`/stacks/${entry.stackName}/services/${entry.id}#configuration`)
-                  }
-                  startIcon={<Icon icon={icons.edit} size="small" />}
-                />
               </div>
             )
           },
diff --git a/frontend/src/components/stack-redirect.spec.tsx b/frontend/src/components/stack-redirect.spec.tsx
new file mode 100644
index 0000000..3118a63
--- /dev/null
+++ b/frontend/src/components/stack-redirect.spec.tsx
@@ -0,0 +1,42 @@
+import { createInjector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { defaultDarkTheme, ThemeProviderService } from '@furystack/shades-common-components'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const stackCraftReplace = vi.fn()
+
+vi.mock('../app-routes.js', () => ({
+  stackCraftReplace,
+}))
+
+import { StackRedirect } from './stack-redirect.js'
+
+describe('StackRedirect', () => {
+  let root: HTMLDivElement
+
+  afterEach(() => {
+    root?.remove()
+    stackCraftReplace.mockClear()
+  })
+
+  it('should replace location with the stack services route on mount', async () => {
+    const injector = createInjector()
+    injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
+
+    root = document.createElement('div')
+    document.body.appendChild(root)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <StackRedirect stackName="my-stack" />,
+    })
+
+    await flushUpdates()
+
+    expect(stackCraftReplace).toHaveBeenCalledWith(injector, {
+      path: '/stacks/:stackName/services',
+      params: { stackName: 'my-stack' },
+    })
+  })
+})
diff --git a/frontend/src/components/stack-redirect.tsx b/frontend/src/components/stack-redirect.tsx
new file mode 100644
index 0000000..c2778d1
--- /dev/null
+++ b/frontend/src/components/stack-redirect.tsx
@@ -0,0 +1,37 @@
+import { createComponent, Shade } from '@furystack/shades'
+import { Loader, PageContainer } from '@furystack/shades-common-components'
+
+import { stackCraftReplace } from './app-routes.js'
+
+type StackRedirectProps = {
+  stackName: string
+}
+
+/**
+ * Replaces the current location with the stack Services page. Used for legacy
+ * `/stacks/:stackName` and `/stacks/:stackName/setup` routes.
+ */
+export const StackRedirect = Shade<StackRedirectProps>({
+  customElementName: 'shade-stack-redirect',
+  render: ({ props, injector, useDisposable }) => {
+    useDisposable(
+      'stack-redirect',
+      () => {
+        stackCraftReplace(injector, {
+          path: '/stacks/:stackName/services',
+          params: { stackName: props.stackName },
+        })
+        return { [Symbol.dispose]: () => {} }
+      },
+      [props.stackName],
+    )
+
+    return (
+      <PageContainer>
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '48px' }}>
+          <Loader />
+        </div>
+      </PageContainer>
+    )
+  },
+})
diff --git a/frontend/src/pages/dashboard/index.tsx b/frontend/src/pages/dashboard/index.tsx
index f562ddb..170d41c 100644
--- a/frontend/src/pages/dashboard/index.tsx
+++ b/frontend/src/pages/dashboard/index.tsx
@@ -4,18 +4,11 @@ import { createComponent, Shade } from '@furystack/shades'
 import { Loader, PageContainer } from '@furystack/shades-common-components'
 import { StackDefinition } from 'common'
 
-import { StackDashboard } from './stack-dashboard.js'
 import { StackListDashboard } from './stack-list-dashboard.js'
 
-type DashboardProps = {
-  stackName?: string
-}
-
-export const Dashboard = Shade<DashboardProps>({
+export const Dashboard = Shade({
   customElementName: 'shade-dashboard',
   render: (options) => {
-    const { props } = options
-
     const stacksState = useCollectionSync(options, StackDefinition, {})
     const stacks = stacksState.status === 'synced' || stacksState.status === 'cached' ? stacksState.data.entries : []
 
@@ -31,10 +24,6 @@ export const Dashboard = Shade<DashboardProps>({
       )
     }
 
-    if (!props.stackName) {
-      return <StackListDashboard stacks={stacks} />
-    }
-
-    return <StackDashboard stackName={props.stackName} stacks={stacks} />
+    return <StackListDashboard stacks={stacks} />
   },
 })
diff --git a/frontend/src/pages/dashboard/service-row.tsx b/frontend/src/pages/dashboard/service-row.tsx
deleted file mode 100644
index de31167..0000000
--- a/frontend/src/pages/dashboard/service-row.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { createComponent, Shade } from '@furystack/shades'
-
-import type { Palette } from '@furystack/shades-common-components'
-import { Badge, Button, cssVariableTheme, Icon, icons, NotyService } from '@furystack/shades-common-components'
-import type { RunStatus, ServiceView } from 'common'
-
-import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
-import { BranchSelector } from '../../components/branch-selector.js'
-import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
-import { getPrimaryAction } from '../../utils/service-pipeline.js'
-
-export const runStatusPaletteKey: Record<RunStatus, keyof Palette> = {
-  stopped: 'secondary',
-  starting: 'warning',
-  running: 'success',
-  stopping: 'warning',
-  error: 'error',
-}
-
-type ServiceRowProps = {
-  service: ServiceView
-  stackName: string
-  showTopBorder: boolean
-}
-
-export const ServiceRow = Shade<ServiceRowProps>({
-  customElementName: 'dashboard-service-row',
-  render: ({ props, injector }) => {
-    const { service: svc, stackName, showTopBorder } = props
-    const api = injector.get(ServicesApiClient)
-    const noty = injector.get(NotyService)
-
-    const callServiceAction = (serviceId: string, action: string, actionLabel: string) => {
-      void api
-        .call({
-          method: 'POST',
-          action: `/services/:id/${action}` as '/services/:id/start',
-          url: { id: serviceId },
-        })
-        .catch((error: unknown) => {
-          noty.emit('onNotyAdded', {
-            title: `${actionLabel} failed`,
-            body: error instanceof Error ? error.message : `Failed to execute ${actionLabel}`,
-            type: 'error',
-          })
-        })
-    }
-
-    const primary = getPrimaryAction(svc)
-
-    return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '6px 16px',
-          borderTop: showTopBorder ? `1px solid ${cssVariableTheme.divider}` : undefined,
-          gap: '8px',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: '0', flex: '1' }}>
-          <span
-            style={{
-              width: '8px',
-              height: '8px',
-              borderRadius: '50%',
-              backgroundColor: cssVariableTheme.palette[runStatusPaletteKey[svc.runStatus]].main,
-              flexShrink: '0',
-            }}
-            title={svc.runStatus}
-          />
-          <StackCraftNestedRouteLink
-            path="/stacks/:stackName/services/:serviceId"
-            params={{ stackName, serviceId: svc.id }}
-            style={{
-              textDecoration: 'none',
-              color: cssVariableTheme.text.primary,
-              fontSize: cssVariableTheme.typography.fontSize.sm,
-              fontWeight: '500',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {svc.displayName}
-          </StackCraftNestedRouteLink>
-        </div>
-        <div style={{ flexShrink: '0' }} onclick={(e: MouseEvent) => e.stopPropagation()}>
-          <BranchSelector
-            serviceId={svc.id}
-            currentBranch={svc.currentBranch}
-            cloneStatus={svc.cloneStatus}
-            upstreamStatus={svc.upstreamStatus}
-            lastPullError={svc.lastPullError}
-          />
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '2px', flexShrink: '0' }}>
-          {primary.apiAction ? (
-            <Button
-              variant="text"
-              size="small"
-              color={primary.color === 'secondary' ? undefined : primary.color}
-              title={primary.label}
-              onclick={() => callServiceAction(svc.id, primary.apiAction.split('/').pop()!, primary.label)}
-              startIcon={primary.icon ?? <Icon icon={icons.play} size="small" />}
-            />
-          ) : null}
-          {svc.runStatus === 'running' ? (
-            <Button
-              variant="text"
-              size="small"
-              color="warning"
-              title="Restart"
-              onclick={() => callServiceAction(svc.id, 'restart', 'Restart')}
-              startIcon={<Icon icon={icons.refresh} size="small" />}
-            />
-          ) : null}
-          {svc.repositoryId && svc.cloneStatus === 'cloned' ? (
-            <Badge count={svc.commitsBehind} color="primary">
-              <Button
-                variant="text"
-                size="small"
-                title="Update: pull, install, build, and restart if running"
-                onclick={() => callServiceAction(svc.id, 'update', 'Update')}
-                startIcon={<Icon icon={icons.download} size="small" />}
-              />
-            </Badge>
-          ) : null}
-        </div>
-      </div>
-    )
-  },
-})
diff --git a/frontend/src/pages/dashboard/stack-card.spec.tsx b/frontend/src/pages/dashboard/stack-card.spec.tsx
new file mode 100644
index 0000000..a43176b
--- /dev/null
+++ b/frontend/src/pages/dashboard/stack-card.spec.tsx
@@ -0,0 +1,121 @@
+import { createInjector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { defaultDarkTheme, ThemeProviderService } from '@furystack/shades-common-components'
+import type { ServiceView, StackDefinition } from 'common'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
+import { StackCard } from './stack-card.js'
+
+const baseService: ServiceView = {
+  id: 'svc-1',
+  serviceId: 'svc-1',
+  stackName: 'demo',
+  displayName: 'API',
+  description: '',
+  runCommand: 'npm start',
+  prerequisiteIds: [],
+  prerequisiteServiceIds: [],
+  files: [],
+  autoFetchEnabled: false,
+  autoFetchIntervalMinutes: 60,
+  autoRestartOnFetch: false,
+  environmentVariableOverrides: {},
+  localFiles: [],
+  cloneStatus: 'cloned',
+  installStatus: 'installed',
+  buildStatus: 'built',
+  runStatus: 'stopped',
+  repositoryId: 'repo-1',
+  createdAt: '',
+  updatedAt: '',
+}
+
+const stack: StackDefinition = {
+  name: 'demo',
+  displayName: 'Demo Stack',
+  description: '',
+  createdAt: '',
+  updatedAt: '',
+}
+
+describe('StackCard', () => {
+  let root: HTMLDivElement
+
+  afterEach(() => {
+    root?.remove()
+  })
+
+  it('should render inline status chips and per-card action buttons', async () => {
+    const apiCall = vi.fn().mockResolvedValue({})
+    const injector = createInjector()
+    injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
+    injector.bind(ServicesApiClient, () => ({ call: apiCall }))
+
+    root = document.createElement('div')
+    document.body.appendChild(root)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: (
+        <StackCard
+          stack={stack}
+          stackServices={[
+            { ...baseService, id: 'a', runStatus: 'running' },
+            { ...baseService, id: 'b', runStatus: 'stopped' },
+          ]}
+          stackPrereqs={[]}
+          checkResultMap={new Map()}
+        />
+      ),
+    })
+
+    await flushUpdates()
+
+    const host = root.querySelector('stack-card')
+    expect(host?.textContent).toContain('Demo Stack')
+    expect(host?.textContent).toContain('2 services')
+    expect(host?.textContent).toContain('1 running')
+    expect(host?.textContent).toContain('1 stopped')
+
+    const startAll = host?.querySelector('button') as HTMLButtonElement | null
+    expect(startAll?.textContent).toContain('Start All')
+    expect(startAll?.disabled).toBe(false)
+
+    const stopAll = Array.from(host?.querySelectorAll('button') ?? []).find((b) => b.textContent?.includes('Stop All'))
+    expect(stopAll?.hasAttribute('disabled')).toBe(false)
+
+    const updateAll = Array.from(host?.querySelectorAll('button') ?? []).find((b) =>
+      b.textContent?.includes('Update All'),
+    )
+    expect(updateAll?.hasAttribute('disabled')).toBe(false)
+  })
+
+  it('should disable Start All when every service is running', async () => {
+    const injector = createInjector()
+    injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
+    injector.bind(ServicesApiClient, () => ({ call: vi.fn() }))
+
+    root = document.createElement('div')
+    document.body.appendChild(root)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: (
+        <StackCard
+          stack={stack}
+          stackServices={[{ ...baseService, runStatus: 'running' }]}
+          stackPrereqs={[]}
+          checkResultMap={new Map()}
+        />
+      ),
+    })
+
+    await flushUpdates()
+
+    const startAll = Array.from(root.querySelectorAll('button')).find((b) => b.textContent?.includes('Start All'))
+    expect(startAll?.disabled).toBe(true)
+  })
+})
diff --git a/frontend/src/pages/dashboard/stack-card.tsx b/frontend/src/pages/dashboard/stack-card.tsx
new file mode 100644
index 0000000..3d72f91
--- /dev/null
+++ b/frontend/src/pages/dashboard/stack-card.tsx
@@ -0,0 +1,270 @@
+import { createComponent, Shade } from '@furystack/shades'
+
+import type { Palette } from '@furystack/shades-common-components'
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Chip,
+  cssVariableTheme,
+  Icon,
+  icons,
+  MarkdownDisplay,
+  NotyService,
+} from '@furystack/shades-common-components'
+import type { PrerequisiteCheckStatus, ServiceView, StackDefinition } from 'common'
+
+import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
+import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
+import { isServiceReady } from '../../utils/is-service-ready.js'
+
+type StackCardProps = {
+  stack: StackDefinition
+  stackServices: ServiceView[]
+  stackPrereqs: Array<{ id: string }>
+  checkResultMap: Map<string, { status: PrerequisiteCheckStatus }>
+}
+
+const prereqStatusColor: Record<PrerequisiteCheckStatus, keyof Palette> = {
+  unchecked: 'secondary',
+  satisfied: 'success',
+  failed: 'error',
+  checking: 'warning',
+}
+
+export const StackCard = Shade<StackCardProps>({
+  customElementName: 'stack-card',
+  render: ({ props, injector, useState }) => {
+    const { stack, stackServices, stackPrereqs, checkResultMap } = props
+
+    const running = stackServices.filter((s) => s.runStatus === 'running').length
+    const stopped = stackServices.filter((s) => s.runStatus === 'stopped').length
+    const errored = stackServices.filter((s) => s.runStatus === 'error').length
+    const starting = stackServices.filter((s) => s.runStatus === 'starting').length
+    const stopping = stackServices.filter((s) => s.runStatus === 'stopping').length
+    const clonedCount = stackServices.filter((s) => s.repositoryId && s.cloneStatus === 'cloned').length
+
+    const satisfied = stackPrereqs.filter((p) => checkResultMap.get(p.id)?.status === 'satisfied').length
+    const failed = stackPrereqs.filter((p) => checkResultMap.get(p.id)?.status === 'failed').length
+    const unchecked = stackPrereqs.length - satisfied - failed
+
+    const [isStartingAll, setIsStartingAll] = useState('isStartingAll', false)
+    const [isStoppingAll, setIsStoppingAll] = useState('isStoppingAll', false)
+    const [isUpdatingAll, setIsUpdatingAll] = useState('isUpdatingAll', false)
+
+    const api = injector.get(ServicesApiClient)
+    const noty = injector.get(NotyService)
+
+    const triggerStartAll = async () => {
+      setIsStartingAll(true)
+      const failures: string[] = []
+      for (const svc of stackServices) {
+        if (isServiceReady(svc) && svc.runStatus === 'stopped') {
+          try {
+            await api.call({ method: 'POST', action: '/services/:id/start', url: { id: svc.id } })
+          } catch {
+            failures.push(svc.displayName)
+          }
+        }
+      }
+      if (failures.length > 0) {
+        noty.emit('onNotyAdded', {
+          title: 'Start failed',
+          body: `Failed for: ${failures.join(', ')}`,
+          type: 'error',
+        })
+      }
+      setIsStartingAll(false)
+    }
+
+    const triggerStopAll = async () => {
+      setIsStoppingAll(true)
+      const failures: string[] = []
+      for (const svc of stackServices) {
+        if (svc.runStatus === 'running') {
+          try {
+            await api.call({ method: 'POST', action: '/services/:id/stop', url: { id: svc.id } })
+          } catch {
+            failures.push(svc.displayName)
+          }
+        }
+      }
+      if (failures.length > 0) {
+        noty.emit('onNotyAdded', {
+          title: 'Stop failed',
+          body: `Failed for: ${failures.join(', ')}`,
+          type: 'error',
+        })
+      }
+      setIsStoppingAll(false)
+    }
+
+    const triggerUpdateAll = async () => {
+      setIsUpdatingAll(true)
+      const failures: string[] = []
+      for (const svc of stackServices) {
+        if (svc.repositoryId && svc.cloneStatus === 'cloned') {
+          try {
+            await api.call({ method: 'POST', action: '/services/:id/update', url: { id: svc.id } })
+          } catch {
+            failures.push(svc.displayName)
+          }
+        }
+      }
+      if (failures.length > 0) {
+        noty.emit('onNotyAdded', {
+          title: 'Update failed',
+          body: `Failed for: ${failures.join(', ')}`,
+          type: 'error',
+        })
+      }
+      setIsUpdatingAll(false)
+    }
+
+    const stopCardNav = (e: MouseEvent) => e.stopPropagation()
+
+    return (
+      <StackCraftNestedRouteLink
+        path="/stacks/:stackName/services"
+        params={{ stackName: stack.name }}
+        style={{ textDecoration: 'none', color: 'inherit' }}
+      >
+        <Card variant="outlined" clickable style={{ height: '100%' }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: cssVariableTheme.spacing.md,
+              padding: cssVariableTheme.spacing.md,
+              flexWrap: 'wrap',
+            }}
+          >
+            <Icon icon={icons.layers} style={{ flexShrink: '0' }} />
+            <div
+              style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', flex: '1', minWidth: '0' }}
+            >
+              <span
+                style={{
+                  fontSize: cssVariableTheme.typography.fontSize.lg,
+                  fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+                }}
+              >
+                {stack.displayName}
+              </span>
+              {stackServices.length > 0 ? (
+                <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+                  <Chip variant="outlined" size="small" color="secondary">
+                    {stackServices.length} service{stackServices.length !== 1 ? 's' : ''}
+                  </Chip>
+                  {running > 0 ? (
+                    <Chip variant="outlined" size="small" color="success">
+                      {running} running
+                    </Chip>
+                  ) : null}
+                  {starting > 0 ? (
+                    <Chip variant="outlined" size="small" color="warning">
+                      {starting} starting
+                    </Chip>
+                  ) : null}
+                  {stopping > 0 ? (
+                    <Chip variant="outlined" size="small" color="warning">
+                      {stopping} stopping
+                    </Chip>
+                  ) : null}
+                  {stopped > 0 ? (
+                    <Chip variant="outlined" size="small" color="secondary">
+                      {stopped} stopped
+                    </Chip>
+                  ) : null}
+                  {errored > 0 ? (
+                    <Chip variant="outlined" size="small" color="error">
+                      {errored} error
+                    </Chip>
+                  ) : null}
+                </div>
+              ) : (
+                <Chip variant="outlined" size="small" color="secondary">
+                  No services
+                </Chip>
+              )}
+            </div>
+            <Icon icon={icons.chevronRight} size="small" style={{ flexShrink: '0' }} />
+          </div>
+          <CardContent>
+            {stackPrereqs.length > 0 ? (
+              <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+                {satisfied > 0 ? (
+                  <Chip variant="outlined" size="small" color={prereqStatusColor.satisfied}>
+                    {satisfied} satisfied
+                  </Chip>
+                ) : null}
+                {failed > 0 ? (
+                  <Chip variant="outlined" size="small" color={prereqStatusColor.failed}>
+                    {failed} failed
+                  </Chip>
+                ) : null}
+                {unchecked > 0 ? (
+                  <Chip variant="outlined" size="small" color={prereqStatusColor.unchecked}>
+                    {unchecked} unchecked
+                  </Chip>
+                ) : null}
+              </div>
+            ) : null}
+            {stack.description ? (
+              <div
+                style={{
+                  marginTop: stackPrereqs.length > 0 ? '8px' : '0',
+                  fontSize: cssVariableTheme.typography.fontSize.sm,
+                  color: cssVariableTheme.text.secondary,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  display: '-webkit-box',
+                  webkitLineClamp: '2',
+                  webkitBoxOrient: 'vertical',
+                }}
+              >
+                <MarkdownDisplay content={stack.description} />
+              </div>
+            ) : null}
+          </CardContent>
+          {stackServices.length > 0 ? (
+            <CardActions onclick={stopCardNav}>
+              <Button
+                variant="text"
+                size="small"
+                color="success"
+                disabled={stopped === 0 && errored === 0}
+                loading={isStartingAll}
+                onclick={() => void triggerStartAll()}
+                startIcon={<Icon icon={icons.play} size="small" />}
+              >
+                Start All
+              </Button>
+              <Button
+                variant="text"
+                size="small"
+                disabled={running === 0}
+                loading={isStoppingAll}
+                onclick={() => void triggerStopAll()}
+                startIcon={<Icon icon={icons.stopCircle} size="small" />}
+              >
+                Stop All
+              </Button>
+              <Button
+                variant="text"
+                size="small"
+                disabled={clonedCount === 0}
+                loading={isUpdatingAll}
+                onclick={() => void triggerUpdateAll()}
+                startIcon={<Icon icon={icons.download} size="small" />}
+              >
+                Update All
+              </Button>
+            </CardActions>
+          ) : null}
+        </Card>
+      </StackCraftNestedRouteLink>
+    )
+  },
+})
diff --git a/frontend/src/pages/dashboard/stack-dashboard.tsx b/frontend/src/pages/dashboard/stack-dashboard.tsx
deleted file mode 100644
index d760523..0000000
--- a/frontend/src/pages/dashboard/stack-dashboard.tsx
+++ /dev/null
@@ -1,562 +0,0 @@
-import { useCollectionSync } from '../../services/entity-sync.js'
-import { createComponent, Shade } from '@furystack/shades'
-
-import type { Palette } from '@furystack/shades-common-components'
-import {
-  Button,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  Chip,
-  cssVariableTheme,
-  Icon,
-  icons,
-  MarkdownDisplay,
-  NotyService,
-  PageContainer,
-  PageHeader,
-  Paper,
-} from '@furystack/shades-common-components'
-import type { PrerequisiteCheckStatus, ServiceView, StackDefinition } from 'common'
-import {
-  detectSecretsInServiceDefinition,
-  GitHubRepository,
-  mergeServiceView,
-  Prerequisite,
-  PrerequisiteCheckResult,
-  ServiceConfig,
-  ServiceDefinition,
-  ServiceGitStatus,
-  ServiceStatus,
-} from 'common'
-
-import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
-import { SecretWarningsCard } from '../../components/secret-warnings-card.js'
-import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
-import { isServiceReady } from '../../utils/is-service-ready.js'
-import { ServiceRow } from './service-row.js'
-
-const prereqStatusColor: Record<PrerequisiteCheckStatus, keyof Palette> = {
-  unchecked: 'secondary',
-  checking: 'warning',
-  satisfied: 'success',
-  failed: 'error',
-}
-
-type StackDashboardProps = {
-  stackName: string
-  stacks: StackDefinition[]
-}
-
-export const StackDashboard = Shade<StackDashboardProps>({
-  customElementName: 'stack-dashboard',
-  render: (options) => {
-    const { props, injector, useState } = options
-    const { stackName, stacks } = props
-    const currentStack = stacks.find((s) => s.name === stackName)
-
-    const servicesState = useCollectionSync(options, ServiceDefinition, {
-      filter: { stackName: { $eq: stackName } },
-    })
-    const defs =
-      servicesState.status === 'synced' || servicesState.status === 'cached' ? servicesState.data.entries : []
-
-    const statusesState = useCollectionSync(options, ServiceStatus, {})
-    const statuses =
-      statusesState.status === 'synced' || statusesState.status === 'cached' ? statusesState.data.entries : []
-
-    const configsState = useCollectionSync(options, ServiceConfig, {})
-    const configs =
-      configsState.status === 'synced' || configsState.status === 'cached' ? configsState.data.entries : []
-
-    const gitStatusState = useCollectionSync(options, ServiceGitStatus, {})
-    const gitStatuses =
-      gitStatusState.status === 'synced' || gitStatusState.status === 'cached' ? gitStatusState.data.entries : []
-
-    const statusMap = new Map(statuses.map((s) => [s.serviceId, s]))
-    const configMap = new Map(configs.map((c) => [c.serviceId, c]))
-    const gitStatusMap = new Map(gitStatuses.map((g) => [g.serviceId, g]))
-
-    const services: ServiceView[] = defs.map((def) =>
-      mergeServiceView(def, configMap.get(def.id), statusMap.get(def.id), gitStatusMap.get(def.id)),
-    )
-
-    const reposState = useCollectionSync(options, GitHubRepository, {
-      filter: { stackName: { $eq: stackName } },
-    })
-    const repos = reposState.status === 'synced' || reposState.status === 'cached' ? reposState.data.entries : []
-
-    const prereqsState = useCollectionSync(options, Prerequisite, {
-      filter: { stackName: { $eq: stackName } },
-    })
-    const prereqs =
-      prereqsState.status === 'synced' || prereqsState.status === 'cached' ? prereqsState.data.entries : []
-
-    const checkResultsState = useCollectionSync(options, PrerequisiteCheckResult, {})
-    const checkResults =
-      checkResultsState.status === 'synced' || checkResultsState.status === 'cached'
-        ? checkResultsState.data.entries
-        : []
-    const checkResultMap = new Map(checkResults.map((r) => [r.prerequisiteId, r]))
-
-    const runningCount = services.filter((s) => s.runStatus === 'running').length
-    const stoppedCount = services.filter((s) => s.runStatus === 'stopped').length
-    const startingCount = services.filter((s) => s.runStatus === 'starting').length
-    const stoppingCount = services.filter((s) => s.runStatus === 'stopping').length
-    const errorCount = services.filter((s) => s.runStatus === 'error').length
-
-    const buildServicesSummary = (): string => {
-      if (services.length === 0) return 'No services yet'
-      const parts: string[] = []
-      if (runningCount > 0) parts.push(`${runningCount} running`)
-      if (startingCount > 0) parts.push(`${startingCount} starting`)
-      if (stoppingCount > 0) parts.push(`${stoppingCount} stopping`)
-      if (stoppedCount > 0) parts.push(`${stoppedCount} stopped`)
-      if (errorCount > 0) parts.push(`${errorCount} error`)
-      return parts.join(', ')
-    }
-
-    const buildPrereqsSummary = (): string => {
-      if (prereqs.length === 0) return 'No prerequisites yet'
-      const satisfiedCount = prereqs.filter((p) => checkResultMap.get(p.id)?.status === 'satisfied').length
-      const failedCount = prereqs.filter((p) => checkResultMap.get(p.id)?.status === 'failed').length
-      const parts: string[] = []
-      if (satisfiedCount > 0) parts.push(`${satisfiedCount} satisfied`)
-      if (failedCount > 0) parts.push(`${failedCount} failed`)
-      const uncheckedCount = prereqs.length - satisfiedCount - failedCount
-      if (uncheckedCount > 0) parts.push(`${uncheckedCount} unchecked`)
-      return parts.join(', ')
-    }
-
-    const [isStartingAll, setIsStartingAll] = useState('isStartingAll', false)
-    const [isStoppingAll, setIsStoppingAll] = useState('isStoppingAll', false)
-
-    const api = injector.get(ServicesApiClient)
-    const noty = injector.get(NotyService)
-
-    const triggerStartAll = async () => {
-      setIsStartingAll(true)
-      const failures: string[] = []
-      for (const svc of services) {
-        if (isServiceReady(svc) && svc.runStatus === 'stopped') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/start', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Start failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
-      }
-      setIsStartingAll(false)
-    }
-
-    const triggerStopAll = async () => {
-      setIsStoppingAll(true)
-      const failures: string[] = []
-      for (const svc of services) {
-        if (svc.runStatus === 'running') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/stop', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Stop failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
-      }
-      setIsStoppingAll(false)
-    }
-
-    if (!currentStack) {
-      return (
-        <PageContainer>
-          <PageHeader
-            icon={<Icon icon={icons.layers} />}
-            title="Stack not found"
-            description={`No stack matches "${stackName}". It may have been removed or the URL may be wrong.`}
-          />
-          <Card variant="outlined">
-            <CardContent style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-              <StackCraftNestedRouteLink path="/" style={{ textDecoration: 'none', alignSelf: 'flex-start' }}>
-                <Button variant="contained" size="small" startIcon={<Icon icon={icons.home} size="small" />}>
-                  Back to dashboard
-                </Button>
-              </StackCraftNestedRouteLink>
-            </CardContent>
-          </Card>
-        </PageContainer>
-      )
-    }
-
-    return (
-      <PageContainer>
-        <PageHeader
-          icon={<Icon icon={icons.layers} />}
-          title={currentStack.displayName}
-          actions={
-            <div style={{ display: 'flex', gap: '8px' }}>
-              {services.length > 0 ? (
-                <div style={{ display: 'contents' }}>
-                  <Button
-                    variant="contained"
-                    size="small"
-                    color="success"
-                    disabled={stoppedCount === 0 && errorCount === 0}
-                    loading={isStartingAll}
-                    onclick={() => void triggerStartAll()}
-                    startIcon={<Icon icon={icons.play} size="small" />}
-                  >
-                    Start All
-                  </Button>
-                  <Button
-                    variant="outlined"
-                    size="small"
-                    disabled={runningCount === 0}
-                    loading={isStoppingAll}
-                    onclick={() => void triggerStopAll()}
-                    startIcon={<Icon icon={icons.stopCircle} size="small" />}
-                  >
-                    Stop All
-                  </Button>
-                </div>
-              ) : null}
-              <StackCraftNestedRouteLink path="/stacks/:stackName/export" params={{ stackName }}>
-                <Button variant="outlined" size="small" startIcon={<Icon icon={icons.download} size="small" />}>
-                  Export
-                </Button>
-              </StackCraftNestedRouteLink>
-              <StackCraftNestedRouteLink path="/stacks/:stackName/edit" params={{ stackName }}>
-                <Button variant="outlined" size="small" startIcon={<Icon icon={icons.edit} size="small" />}>
-                  Edit Stack
-                </Button>
-              </StackCraftNestedRouteLink>
-            </div>
-          }
-        />
-        {currentStack?.description ? (
-          <Paper>
-            <MarkdownDisplay content={currentStack.description} />
-          </Paper>
-        ) : null}
-
-        {(() => {
-          const warningGroups = defs
-            .map((def) => {
-              const warnings = detectSecretsInServiceDefinition({
-                files: def.files,
-                runCommand: def.runCommand,
-                installCommand: def.installCommand,
-                buildCommand: def.buildCommand,
-              })
-              return {
-                serviceId: def.id,
-                serviceName: def.displayName,
-                stackName,
-                warnings,
-              }
-            })
-            .filter((g) => g.warnings.length > 0)
-
-          return warningGroups.length > 0 ? <SecretWarningsCard warningGroups={warningGroups} /> : null
-        })()}
-
-        {services.length === 0 ? (
-          <Card variant="outlined">
-            <CardHeader
-              title="Getting Started"
-              subheader="Set up your stack step by step"
-              avatar={<Icon icon={icons.layers} />}
-            />
-            <CardContent style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
-              {(
-                [
-                  {
-                    step: 1,
-                    title: 'Add Repositories',
-                    description: 'Link GitHub repositories to clone',
-                    isComplete: repos.length > 0,
-                    summary:
-                      repos.length > 0
-                        ? `${repos.length} repositor${repos.length === 1 ? 'y' : 'ies'} configured`
-                        : undefined,
-                    href: '/stacks/:stackName/repositories' as const,
-                    icon: icons.link,
-                  },
-                  {
-                    step: 2,
-                    title: 'Configure Prerequisites',
-                    description: 'Set up environment requirements',
-                    isComplete: prereqs.length > 0,
-                    summary:
-                      prereqs.length > 0
-                        ? `${prereqs.length} prerequisite${prereqs.length === 1 ? '' : 's'} configured`
-                        : undefined,
-                    href: '/stacks/:stackName/prerequisites' as const,
-                    icon: icons.check,
-                  },
-                  {
-                    step: 3,
-                    title: 'Create Services',
-                    description: 'Define services that run from your repos',
-                    isComplete: false,
-                    summary: undefined,
-                    href: '/stacks/:stackName/services/wizard' as const,
-                    icon: icons.code,
-                  },
-                  {
-                    step: 4,
-                    title: 'Run Setup',
-                    description: 'Clone, install, and build everything',
-                    isComplete: false,
-                    summary: undefined,
-                    href: '/stacks/:stackName/setup' as const,
-                    icon: icons.settings,
-                  },
-                ] as const
-              ).map((item, index) => (
-                <StackCraftNestedRouteLink
-                  path={item.href}
-                  params={{ stackName }}
-                  style={{
-                    textDecoration: 'none',
-                    color: 'inherit',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '12px',
-                    padding: '10px 4px',
-                    borderTop: index > 0 ? `1px solid ${cssVariableTheme.divider}` : undefined,
-                  }}
-                >
-                  <div
-                    style={{
-                      width: '28px',
-                      height: '28px',
-                      borderRadius: '50%',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      flexShrink: '0',
-                      fontSize: '13px',
-                      fontWeight: '600',
-                      ...(item.isComplete
-                        ? {
-                            backgroundColor: cssVariableTheme.palette.success.main,
-                            color: '#fff',
-                          }
-                        : {
-                            border: `2px solid ${cssVariableTheme.divider}`,
-                            color: cssVariableTheme.text.secondary,
-                          }),
-                    }}
-                  >
-                    {item.isComplete ? <Icon icon={icons.check} size={14} /> : item.step}
-                  </div>
-                  <div style={{ flex: '1', minWidth: '0' }}>
-                    <div
-                      style={{
-                        fontWeight: '500',
-                        fontSize: cssVariableTheme.typography.fontSize.md,
-                        opacity: item.isComplete ? '0.6' : '1',
-                      }}
-                    >
-                      {item.title}
-                    </div>
-                    <div
-                      style={{
-                        fontSize: cssVariableTheme.typography.fontSize.sm,
-                        color: cssVariableTheme.text.secondary,
-                        marginTop: '2px',
-                      }}
-                    >
-                      {item.summary ?? item.description}
-                    </div>
-                  </div>
-                  <Icon icon={item.icon} size="small" style={{ flexShrink: '0', opacity: '0.4' }} />
-                </StackCraftNestedRouteLink>
-              ))}
-            </CardContent>
-          </Card>
-        ) : null}
-
-        {/* Services Card -- full width, outside the grid */}
-        <Card variant="outlined" style={{ overflow: 'visible' }}>
-          <CardHeader
-            title={`Services (${services.length})`}
-            subheader={buildServicesSummary()}
-            avatar={<Icon icon={icons.code} />}
-            action={
-              <StackCraftNestedRouteLink
-                path="/stacks/:stackName/services"
-                params={{ stackName }}
-                style={{ color: 'inherit' }}
-              >
-                <Icon icon={icons.chevronRight} size="small" style={{ cursor: 'pointer' }} />
-              </StackCraftNestedRouteLink>
-            }
-          />
-          {services.length > 0 ? (
-            <CardContent style={{ padding: '0' }}>
-              {services.map((svc, index) => (
-                <ServiceRow service={svc} stackName={stackName} showTopBorder={index > 0} />
-              ))}
-            </CardContent>
-          ) : null}
-          <CardActions>
-            <StackCraftNestedRouteLink
-              path="/stacks/:stackName/services"
-              params={{ stackName }}
-              style={{ textDecoration: 'none' }}
-            >
-              <Button variant="text" size="small">
-                View All
-              </Button>
-            </StackCraftNestedRouteLink>
-            <StackCraftNestedRouteLink
-              path="/stacks/:stackName/services/wizard"
-              params={{ stackName }}
-              style={{ textDecoration: 'none' }}
-            >
-              <Button variant="text" size="small" startIcon={<Icon icon={icons.plus} size="small" />}>
-                Create
-              </Button>
-            </StackCraftNestedRouteLink>
-          </CardActions>
-        </Card>
-
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
-            gap: '16px',
-          }}
-        >
-          {/* Prerequisites Card */}
-          <Card variant="outlined">
-            <CardHeader
-              title={`Prerequisites (${prereqs.length})`}
-              subheader={buildPrereqsSummary()}
-              avatar={<Icon icon={icons.check} />}
-              action={
-                <StackCraftNestedRouteLink
-                  path="/stacks/:stackName/prerequisites"
-                  params={{ stackName }}
-                  style={{ color: 'inherit' }}
-                >
-                  <Icon icon={icons.chevronRight} size="small" style={{ cursor: 'pointer' }} />
-                </StackCraftNestedRouteLink>
-              }
-            />
-            {prereqs.length > 0 ? (
-              <CardContent>
-                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                  {prereqs.slice(0, 5).map((prereq) => {
-                    const status = checkResultMap.get(prereq.id)?.status ?? 'unchecked'
-                    return (
-                      <Chip variant="outlined" size="small" color={prereqStatusColor[status]}>
-                        {prereq.name}
-                      </Chip>
-                    )
-                  })}
-                  {prereqs.length > 5 ? (
-                    <span
-                      style={{
-                        fontSize: cssVariableTheme.typography.fontSize.sm,
-                        opacity: '0.6',
-                        alignSelf: 'center',
-                      }}
-                    >
-                      +{prereqs.length - 5} more
-                    </span>
-                  ) : null}
-                </div>
-              </CardContent>
-            ) : null}
-            <CardActions>
-              <StackCraftNestedRouteLink
-                path="/stacks/:stackName/prerequisites"
-                params={{ stackName }}
-                style={{ textDecoration: 'none' }}
-              >
-                <Button variant="text" size="small">
-                  View All
-                </Button>
-              </StackCraftNestedRouteLink>
-            </CardActions>
-          </Card>
-
-          {/* Repositories Card */}
-          <Card variant="outlined">
-            <CardHeader
-              title={`Repositories (${repos.length})`}
-              subheader={repos.length > 0 ? `${repos.length} configured` : 'No repositories yet'}
-              avatar={<Icon icon={icons.link} />}
-              action={
-                <StackCraftNestedRouteLink
-                  path="/stacks/:stackName/repositories"
-                  params={{ stackName }}
-                  style={{ color: 'inherit' }}
-                >
-                  <Icon icon={icons.chevronRight} size="small" style={{ cursor: 'pointer' }} />
-                </StackCraftNestedRouteLink>
-              }
-            />
-            {repos.length > 0 ? (
-              <CardContent>
-                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                  {repos.slice(0, 5).map((repo) => (
-                    <Chip variant="outlined" size="small">
-                      {repo.displayName}
-                    </Chip>
-                  ))}
-                  {repos.length > 5 ? (
-                    <span
-                      style={{
-                        fontSize: cssVariableTheme.typography.fontSize.sm,
-                        opacity: '0.6',
-                        alignSelf: 'center',
-                      }}
-                    >
-                      +{repos.length - 5} more
-                    </span>
-                  ) : null}
-                </div>
-              </CardContent>
-            ) : null}
-            <CardActions>
-              <StackCraftNestedRouteLink
-                path="/stacks/:stackName/repositories"
-                params={{ stackName }}
-                style={{ textDecoration: 'none' }}
-              >
-                <Button variant="text" size="small">
-                  View All
-                </Button>
-              </StackCraftNestedRouteLink>
-              <StackCraftNestedRouteLink
-                path="/stacks/:stackName/repositories/create"
-                params={{ stackName }}
-                style={{ textDecoration: 'none' }}
-              >
-                <Button variant="text" size="small" startIcon={<Icon icon={icons.plus} size="small" />}>
-                  Add
-                </Button>
-              </StackCraftNestedRouteLink>
-            </CardActions>
-          </Card>
-        </div>
-      </PageContainer>
-    )
-  },
-})
diff --git a/frontend/src/pages/dashboard/stack-list-dashboard.tsx b/frontend/src/pages/dashboard/stack-list-dashboard.tsx
index 134dc16..eb53f55 100644
--- a/frontend/src/pages/dashboard/stack-list-dashboard.tsx
+++ b/frontend/src/pages/dashboard/stack-list-dashboard.tsx
@@ -1,20 +1,7 @@
 import { useCollectionSync } from '../../services/entity-sync.js'
 import { createComponent, Shade } from '@furystack/shades'
 
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Chip,
-  cssVariableTheme,
-  Icon,
-  icons,
-  MarkdownDisplay,
-  NotyService,
-  PageContainer,
-  PageHeader,
-} from '@furystack/shades-common-components'
+import { Button, Icon, icons, NotyService, PageContainer, PageHeader } from '@furystack/shades-common-components'
 import type { ServiceView, StackDefinition } from 'common'
 import {
   mergeServiceView,
@@ -29,6 +16,7 @@ import {
 import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
 import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
 import { isServiceReady } from '../../utils/is-service-ready.js'
+import { StackCard } from './stack-card.js'
 
 type StackListDashboardProps = {
   stacks: StackDefinition[]
@@ -234,115 +222,14 @@ export const StackListDashboard = Shade<StackListDashboardProps>({
             gap: '16px',
           }}
         >
-          {stacks.map((stack) => {
-            const stackServices = servicesByStack.get(stack.name) ?? []
-            const stackPrereqs = prereqsByStack.get(stack.name) ?? []
-
-            const running = stackServices.filter((s) => s.runStatus === 'running').length
-            const stopped = stackServices.filter((s) => s.runStatus === 'stopped').length
-            const errored = stackServices.filter((s) => s.runStatus === 'error').length
-            const starting = stackServices.filter((s) => s.runStatus === 'starting').length
-            const stopping = stackServices.filter((s) => s.runStatus === 'stopping').length
-
-            const satisfied = stackPrereqs.filter((p) => allCheckMap.get(p.id)?.status === 'satisfied').length
-            const failed = stackPrereqs.filter((p) => allCheckMap.get(p.id)?.status === 'failed').length
-            const unchecked = stackPrereqs.length - satisfied - failed
-
-            return (
-              <StackCraftNestedRouteLink
-                path="/stacks/:stackName"
-                params={{ stackName: stack.name }}
-                style={{ textDecoration: 'none', color: 'inherit' }}
-              >
-                <Card variant="outlined" clickable style={{ height: '100%' }}>
-                  <CardHeader
-                    title={stack.displayName}
-                    avatar={<Icon icon={icons.layers} />}
-                    action={<Icon icon={icons.chevronRight} size="small" />}
-                  />
-                  <CardContent>
-                    {stackServices.length > 0 ? (
-                      <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginBottom: '8px' }}>
-                        <Chip variant="outlined" size="small" color="secondary">
-                          {stackServices.length} service{stackServices.length !== 1 ? 's' : ''}
-                        </Chip>
-                        {running > 0 ? (
-                          <Chip variant="outlined" size="small" color="success">
-                            {running} running
-                          </Chip>
-                        ) : null}
-                        {starting > 0 ? (
-                          <Chip variant="outlined" size="small" color="warning">
-                            {starting} starting
-                          </Chip>
-                        ) : null}
-                        {stopping > 0 ? (
-                          <Chip variant="outlined" size="small" color="warning">
-                            {stopping} stopping
-                          </Chip>
-                        ) : null}
-                        {stopped > 0 ? (
-                          <Chip variant="outlined" size="small" color="secondary">
-                            {stopped} stopped
-                          </Chip>
-                        ) : null}
-                        {errored > 0 ? (
-                          <Chip variant="outlined" size="small" color="error">
-                            {errored} error
-                          </Chip>
-                        ) : null}
-                      </div>
-                    ) : (
-                      <div
-                        style={{
-                          fontSize: cssVariableTheme.typography.fontSize.sm,
-                          color: cssVariableTheme.text.secondary,
-                          marginBottom: '8px',
-                        }}
-                      >
-                        No services yet
-                      </div>
-                    )}
-                    {stackPrereqs.length > 0 ? (
-                      <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
-                        {satisfied > 0 ? (
-                          <Chip variant="outlined" size="small" color="success">
-                            {satisfied} satisfied
-                          </Chip>
-                        ) : null}
-                        {failed > 0 ? (
-                          <Chip variant="outlined" size="small" color="error">
-                            {failed} failed
-                          </Chip>
-                        ) : null}
-                        {unchecked > 0 ? (
-                          <Chip variant="outlined" size="small" color="secondary">
-                            {unchecked} unchecked
-                          </Chip>
-                        ) : null}
-                      </div>
-                    ) : null}
-                    {stack.description ? (
-                      <div
-                        style={{
-                          marginTop: '8px',
-                          fontSize: cssVariableTheme.typography.fontSize.sm,
-                          color: cssVariableTheme.text.secondary,
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          display: '-webkit-box',
-                          webkitLineClamp: '2',
-                          webkitBoxOrient: 'vertical',
-                        }}
-                      >
-                        <MarkdownDisplay content={stack.description} />
-                      </div>
-                    ) : null}
-                  </CardContent>
-                </Card>
-              </StackCraftNestedRouteLink>
-            )
-          })}
+          {stacks.map((stack) => (
+            <StackCard
+              stack={stack}
+              stackServices={servicesByStack.get(stack.name) ?? []}
+              stackPrereqs={prereqsByStack.get(stack.name) ?? []}
+              checkResultMap={allCheckMap}
+            />
+          ))}
         </div>
       </PageContainer>
     )
diff --git a/frontend/src/pages/import-export/import-stack.tsx b/frontend/src/pages/import-export/import-stack.tsx
index b3684fa..08a03d7 100644
--- a/frontend/src/pages/import-export/import-stack.tsx
+++ b/frontend/src/pages/import-export/import-stack.tsx
@@ -135,11 +135,14 @@ export const ImportStack = Shade({
         const hasAutoSetup = formData.autoSetup === 'on'
         if (hasAutoSetup && (parsed.services?.length ?? 0) > 0) {
           stackCraftNavigate(injector, {
-            path: '/stacks/:stackName/setup',
+            path: '/stacks/:stackName/services',
             params: { stackName: parsed.stack.name },
           })
         } else {
-          stackCraftNavigate(injector, { path: '/stacks/:stackName', params: { stackName: parsed.stack.name } })
+          stackCraftNavigate(injector, {
+            path: '/stacks/:stackName/services',
+            params: { stackName: parsed.stack.name },
+          })
         }
       } catch (error) {
         injector.get(NotyService).emit('onNotyAdded', {
diff --git a/frontend/src/pages/services/services-empty-state.spec.tsx b/frontend/src/pages/services/services-empty-state.spec.tsx
new file mode 100644
index 0000000..5d3ae51
--- /dev/null
+++ b/frontend/src/pages/services/services-empty-state.spec.tsx
@@ -0,0 +1,39 @@
+import { createInjector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { defaultDarkTheme, ThemeProviderService } from '@furystack/shades-common-components'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { ServicesEmptyState } from './services-empty-state.js'
+
+describe('ServicesEmptyState', () => {
+  let root: HTMLDivElement
+
+  afterEach(() => {
+    root?.remove()
+  })
+
+  it('should render three guided steps without a setup step', async () => {
+    const injector = createInjector()
+    injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
+
+    root = document.createElement('div')
+    document.body.appendChild(root)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <ServicesEmptyState stackName="demo-stack" repoCount={2} prereqCount={1} />,
+    })
+
+    await flushUpdates()
+
+    const host = root.querySelector('shade-services-empty-state')
+    expect(host).not.toBeNull()
+    expect(host?.textContent).toContain('Add Repositories')
+    expect(host?.textContent).toContain('Configure Prerequisites')
+    expect(host?.textContent).toContain('Create Services')
+    expect(host?.textContent).not.toContain('Run Setup')
+    expect(host?.textContent).toContain('2 repositories configured')
+    expect(host?.textContent).toContain('1 prerequisite configured')
+  })
+})
diff --git a/frontend/src/pages/services/services-empty-state.tsx b/frontend/src/pages/services/services-empty-state.tsx
new file mode 100644
index 0000000..54131de
--- /dev/null
+++ b/frontend/src/pages/services/services-empty-state.tsx
@@ -0,0 +1,121 @@
+import { createComponent, Shade } from '@furystack/shades'
+
+import { Card, CardContent, CardHeader, cssVariableTheme, Icon, icons } from '@furystack/shades-common-components'
+
+import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
+
+type ServicesEmptyStateProps = {
+  stackName: string
+  repoCount: number
+  prereqCount: number
+}
+
+export const ServicesEmptyState = Shade<ServicesEmptyStateProps>({
+  customElementName: 'shade-services-empty-state',
+  render: ({ props }) => {
+    const { stackName, repoCount, prereqCount } = props
+
+    const steps = [
+      {
+        step: 1,
+        title: 'Add Repositories',
+        description: 'Link GitHub repositories to clone',
+        isComplete: repoCount > 0,
+        summary: repoCount > 0 ? `${repoCount} repositor${repoCount === 1 ? 'y' : 'ies'} configured` : undefined,
+        href: '/stacks/:stackName/repositories' as const,
+        icon: icons.link,
+      },
+      {
+        step: 2,
+        title: 'Configure Prerequisites',
+        description: 'Set up environment requirements',
+        isComplete: prereqCount > 0,
+        summary: prereqCount > 0 ? `${prereqCount} prerequisite${prereqCount === 1 ? '' : 's'} configured` : undefined,
+        href: '/stacks/:stackName/prerequisites' as const,
+        icon: icons.check,
+      },
+      {
+        step: 3,
+        title: 'Create Services',
+        description: 'Define services that run from your repos',
+        isComplete: false,
+        summary: undefined,
+        href: '/stacks/:stackName/services/wizard' as const,
+        icon: icons.code,
+      },
+    ] as const
+
+    return (
+      <Card variant="outlined">
+        <CardHeader
+          title="Getting Started"
+          subheader="Set up your stack step by step"
+          avatar={<Icon icon={icons.layers} />}
+        />
+        <CardContent style={{ display: 'flex', flexDirection: 'column', gap: '0' }}>
+          {steps.map((item, index) => (
+            <StackCraftNestedRouteLink
+              path={item.href}
+              params={{ stackName }}
+              style={{
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                padding: '10px 4px',
+                borderTop: index > 0 ? `1px solid ${cssVariableTheme.divider}` : undefined,
+              }}
+            >
+              <div
+                style={{
+                  width: '28px',
+                  height: '28px',
+                  borderRadius: '50%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: '0',
+                  fontSize: '13px',
+                  fontWeight: '600',
+                  ...(item.isComplete
+                    ? {
+                        backgroundColor: cssVariableTheme.palette.success.main,
+                        color: '#fff',
+                      }
+                    : {
+                        border: `2px solid ${cssVariableTheme.divider}`,
+                        color: cssVariableTheme.text.secondary,
+                      }),
+                }}
+              >
+                {item.isComplete ? <Icon icon={icons.check} size={14} /> : item.step}
+              </div>
+              <div style={{ flex: '1', minWidth: '0' }}>
+                <div
+                  style={{
+                    fontWeight: '500',
+                    fontSize: cssVariableTheme.typography.fontSize.md,
+                    opacity: item.isComplete ? '0.6' : '1',
+                  }}
+                >
+                  {item.title}
+                </div>
+                <div
+                  style={{
+                    fontSize: cssVariableTheme.typography.fontSize.sm,
+                    color: cssVariableTheme.text.secondary,
+                    marginTop: '2px',
+                  }}
+                >
+                  {item.summary ?? item.description}
+                </div>
+              </div>
+              <Icon icon={item.icon} size="small" style={{ flexShrink: '0', opacity: '0.4' }} />
+            </StackCraftNestedRouteLink>
+          ))}
+        </CardContent>
+      </Card>
+    )
+  },
+})
diff --git a/frontend/src/pages/services/services-list.tsx b/frontend/src/pages/services/services-list.tsx
index 5b9ed81..127bab0 100644
--- a/frontend/src/pages/services/services-list.tsx
+++ b/frontend/src/pages/services/services-list.tsx
@@ -11,7 +11,10 @@ import {
 } from '@furystack/shades-common-components'
 import type { ServiceView } from 'common'
 import {
+  detectSecretsInServiceDefinition,
+  GitHubRepository,
   mergeServiceView,
+  Prerequisite,
   ServiceConfig,
   ServiceDefinition,
   ServiceDependencyLink,
@@ -22,9 +25,12 @@ import {
 
 import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
 import { BulkActionBar } from '../../components/bulk-action-bar.js'
+import { SecretWarningsCard } from '../../components/secret-warnings-card.js'
 import { ServiceFilters } from '../../components/service-filters.js'
 import { ServiceTable } from '../../components/service-table.js'
 import { getServiceSummaryStatus } from '../../utils/service-pipeline.js'
+import { ServicesEmptyState } from './services-empty-state.js'
+import { StackActionsMenu } from './stack-actions-menu.js'
 
 type ServicesListProps = {
   stackName: string
@@ -65,6 +71,17 @@ export const ServicesList = Shade<ServicesListProps>({
     const depLinks =
       depLinksState.status === 'synced' || depLinksState.status === 'cached' ? depLinksState.data.entries : []
 
+    const reposState = useCollectionSync(options, GitHubRepository, {
+      filter: { stackName: { $eq: props.stackName } },
+    })
+    const repos = reposState.status === 'synced' || reposState.status === 'cached' ? reposState.data.entries : []
+
+    const prereqsState = useCollectionSync(options, Prerequisite, {
+      filter: { stackName: { $eq: props.stackName } },
+    })
+    const prereqs =
+      prereqsState.status === 'synced' || prereqsState.status === 'cached' ? prereqsState.data.entries : []
+
     const statusMap = new Map(statuses.map((s) => [s.serviceId, s]))
     const configMap = new Map(configs.map((c) => [c.serviceId, c]))
     const gitStatusMap = new Map(gitStatuses.map((g) => [g.serviceId, g]))
@@ -107,6 +124,23 @@ export const ServicesList = Shade<ServicesListProps>({
       setStatusFilter('')
     }
 
+    const warningGroups = defs
+      .map((def) => {
+        const warnings = detectSecretsInServiceDefinition({
+          files: def.files,
+          runCommand: def.runCommand,
+          installCommand: def.installCommand,
+          buildCommand: def.buildCommand,
+        })
+        return {
+          serviceId: def.id,
+          serviceName: def.displayName,
+          stackName: props.stackName,
+          warnings,
+        }
+      })
+      .filter((g) => g.warnings.length > 0)
+
     if (isLoading) {
       return (
         <PageContainer>
@@ -133,7 +167,8 @@ export const ServicesList = Shade<ServicesListProps>({
                   onStatusFilterChange={setStatusFilter}
                 />
               ) : null}
-              <BulkActionBar collectionService={collectionService} />
+              {services.length > 0 ? <BulkActionBar collectionService={collectionService} /> : null}
+              <StackActionsMenu stackName={props.stackName} />
               <StackCraftNestedRouteLink
                 path="/stacks/:stackName/services/wizard"
                 params={{ stackName: props.stackName }}
@@ -145,20 +180,9 @@ export const ServicesList = Shade<ServicesListProps>({
             </div>
           }
         />
+        {warningGroups.length > 0 ? <SecretWarningsCard warningGroups={warningGroups} /> : null}
         {services.length === 0 ? (
-          <div style={{ textAlign: 'center', padding: '32px', opacity: '0.7' }}>
-            No services in this stack yet.
-            <div style={{ marginTop: '12px' }}>
-              <StackCraftNestedRouteLink
-                path="/stacks/:stackName/services/wizard"
-                params={{ stackName: props.stackName }}
-              >
-                <Button variant="outlined" size="small" startIcon={<Icon icon={icons.plus} size="small" />}>
-                  Create Service
-                </Button>
-              </StackCraftNestedRouteLink>
-            </div>
-          </div>
+          <ServicesEmptyState stackName={props.stackName} repoCount={repos.length} prereqCount={prereqs.length} />
         ) : filteredServices.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '32px', opacity: '0.7' }}>
             No matching services.
diff --git a/frontend/src/pages/services/stack-actions-menu.spec.tsx b/frontend/src/pages/services/stack-actions-menu.spec.tsx
new file mode 100644
index 0000000..4b4a1d4
--- /dev/null
+++ b/frontend/src/pages/services/stack-actions-menu.spec.tsx
@@ -0,0 +1,43 @@
+import { createInjector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { defaultDarkTheme, ThemeProviderService } from '@furystack/shades-common-components'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { StacksApiClient } from '../../services/api-clients/stacks-api-client.js'
+import { StackActionsMenu } from './stack-actions-menu.js'
+
+const stackCraftNavigate = vi.fn()
+
+vi.mock('../../components/app-routes.js', () => ({
+  stackCraftNavigate,
+}))
+
+describe('StackActionsMenu', () => {
+  let root: HTMLDivElement
+
+  afterEach(() => {
+    root?.remove()
+    stackCraftNavigate.mockClear()
+  })
+
+  it('should expose stack actions via the menu trigger', async () => {
+    const setupCall = vi.fn().mockResolvedValue({})
+    const injector = createInjector()
+    injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
+    injector.bind(StacksApiClient, () => ({ call: setupCall }))
+
+    root = document.createElement('div')
+    document.body.appendChild(root)
+
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <StackActionsMenu stackName="demo-stack" />,
+    })
+
+    await flushUpdates()
+
+    const trigger = root.querySelector('[aria-label="Stack actions"]')
+    expect(trigger).not.toBeNull()
+  })
+})
diff --git a/frontend/src/pages/services/stack-actions-menu.tsx b/frontend/src/pages/services/stack-actions-menu.tsx
new file mode 100644
index 0000000..5bbb74a
--- /dev/null
+++ b/frontend/src/pages/services/stack-actions-menu.tsx
@@ -0,0 +1,84 @@
+import { createComponent, Shade } from '@furystack/shades'
+
+import type { MenuEntry } from '@furystack/shades-common-components'
+import { Button, Dropdown, Icon, icons, NotyService } from '@furystack/shades-common-components'
+
+import { stackCraftNavigate } from '../../components/app-routes.js'
+import { StacksApiClient } from '../../services/api-clients/stacks-api-client.js'
+
+type StackActionsMenuProps = {
+  stackName: string
+}
+
+export const StackActionsMenu = Shade<StackActionsMenuProps>({
+  customElementName: 'shade-stack-actions-menu',
+  render: ({ props, injector, useState }) => {
+    const [isSetupRunning, setIsSetupRunning] = useState('isSetupRunning', false)
+
+    const menuItems: MenuEntry[] = [
+      {
+        key: 'edit',
+        label: 'Edit Stack',
+        icon: <Icon icon={icons.edit} size="small" />,
+      },
+      {
+        key: 'export',
+        label: 'Export Stack',
+        icon: <Icon icon={icons.download} size="small" />,
+      },
+      { type: 'divider', key: 'sep' },
+      {
+        key: 'setup-all',
+        label: 'Set Up All',
+        icon: <Icon icon={icons.settings} size="small" />,
+      },
+    ]
+
+    const handleSelect = (key: string) => {
+      if (key === 'edit') {
+        stackCraftNavigate(injector, {
+          path: '/stacks/:stackName/edit',
+          params: { stackName: props.stackName },
+        })
+        return
+      }
+      if (key === 'export') {
+        stackCraftNavigate(injector, {
+          path: '/stacks/:stackName/export',
+          params: { stackName: props.stackName },
+        })
+        return
+      }
+      if (key === 'setup-all') {
+        setIsSetupRunning(true)
+        void injector
+          .get(StacksApiClient)
+          .call({
+            method: 'POST',
+            action: '/stacks/:id/setup',
+            url: { id: props.stackName },
+          })
+          .catch((error: unknown) => {
+            injector.get(NotyService).emit('onNotyAdded', {
+              title: 'Batch setup failed',
+              body: error instanceof Error ? error.message : 'Setup error',
+              type: 'error',
+            })
+          })
+          .finally(() => setIsSetupRunning(false))
+      }
+    }
+
+    return (
+      <Dropdown items={menuItems} disabled={isSetupRunning} onSelect={handleSelect}>
+        <Button
+          variant="outlined"
+          size="small"
+          loading={isSetupRunning}
+          aria-label="Stack actions"
+          startIcon={<Icon icon={icons.moreVertical} size="small" />}
+        />
+      </Dropdown>
+    )
+  },
+})
diff --git a/frontend/src/pages/stacks/create-stack.tsx b/frontend/src/pages/stacks/create-stack.tsx
index d3b52c3..40b016f 100644
--- a/frontend/src/pages/stacks/create-stack.tsx
+++ b/frontend/src/pages/stacks/create-stack.tsx
@@ -30,7 +30,7 @@ export const CreateStack = Shade({
         })
 
         stackCraftNavigate(injector, {
-          path: '/stacks/:stackName',
+          path: '/stacks/:stackName/services',
           params: { stackName: createdStack.result.name },
         })
       } catch (error) {
diff --git a/frontend/src/pages/stacks/stack-setup.tsx b/frontend/src/pages/stacks/stack-setup.tsx
deleted file mode 100644
index b2b5aec..0000000
--- a/frontend/src/pages/stacks/stack-setup.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import type { FindOptions } from '@furystack/core'
-import { useCollectionSync } from '../../services/entity-sync.js'
-import { createComponent, Shade } from '@furystack/shades'
-
-import {
-  Button,
-  CollectionService,
-  cssVariableTheme,
-  DataGrid,
-  Icon,
-  icons,
-  Loader,
-  NotyService,
-  PageContainer,
-  PageHeader,
-  Paper,
-} from '@furystack/shades-common-components'
-import type { ServiceView } from 'common'
-import { mergeServiceView, ServiceConfig, ServiceDefinition, ServiceStatus, StackDefinition } from 'common'
-
-import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
-import { BuildStatusChip, CloneStatusChip, InstallStatusChip, RunStatusChip } from '../../components/status-chips.js'
-import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
-import { StacksApiClient } from '../../services/api-clients/stacks-api-client.js'
-import { isServiceReady } from '../../utils/is-service-ready.js'
-
-type StackSetupProps = {
-  stackName: string
-}
-
-type StackSetupColumn = 'service' | 'clone' | 'install' | 'build' | 'run' | 'actions'
-
-const isServiceInProgress = (svc: ServiceView): boolean => {
-  return svc.cloneStatus === 'cloning' || svc.installStatus === 'installing' || svc.buildStatus === 'building'
-}
-
-export const StackSetup = Shade<StackSetupProps>({
-  customElementName: 'shade-stack-setup',
-  render: (options) => {
-    const { props, injector, useDisposable, useState } = options
-
-    const stacksState = useCollectionSync(options, StackDefinition, {
-      filter: { name: { $eq: props.stackName } },
-    })
-    const stacks = stacksState.status === 'synced' || stacksState.status === 'cached' ? stacksState.data.entries : []
-    const currentStack = stacks[0]
-
-    const servicesState = useCollectionSync(options, ServiceDefinition, {
-      filter: { stackName: { $eq: props.stackName } },
-    })
-    const defs =
-      servicesState.status === 'synced' || servicesState.status === 'cached' ? servicesState.data.entries : []
-
-    const statusesState = useCollectionSync(options, ServiceStatus, {})
-    const statuses =
-      statusesState.status === 'synced' || statusesState.status === 'cached' ? statusesState.data.entries : []
-
-    const configsState = useCollectionSync(options, ServiceConfig, {})
-    const configs =
-      configsState.status === 'synced' || configsState.status === 'cached' ? configsState.data.entries : []
-
-    const statusMap = new Map(statuses.map((s) => [s.serviceId, s]))
-    const configMap = new Map(configs.map((c) => [c.serviceId, c]))
-
-    const services: ServiceView[] = defs.map((def) =>
-      mergeServiceView(def, configMap.get(def.id), statusMap.get(def.id)),
-    )
-
-    const collectionService = useDisposable(
-      'stackSetupCollectionService',
-      () => new CollectionService<ServiceView>({ searchField: 'displayName', idField: 'id' }),
-    )
-
-    const [findOptions, setFindOptions] = useState<FindOptions<ServiceView, Array<keyof ServiceView>>>(
-      'stackSetupFindOptions',
-      { top: Infinity },
-    )
-
-    collectionService.data.setValue({ entries: services, count: services.length })
-
-    const isLoading = stacksState.status === 'connecting' || servicesState.status === 'connecting'
-
-    const [isBatchRunning, setIsBatchRunning] = useState('isBatchRunning', false)
-    const [setupTriggered, setSetupTriggered] = useState<Set<string>>('setupTriggered', new Set())
-
-    const allReady = services.length > 0 && services.every(isServiceReady)
-    const anyInProgress = services.some(isServiceInProgress) || isBatchRunning
-
-    const triggerSetup = async (serviceId: string) => {
-      setSetupTriggered(new Set([...setupTriggered, serviceId]))
-      try {
-        await injector.get(ServicesApiClient).call({
-          method: 'POST',
-          action: '/services/:id/setup',
-          url: { id: serviceId },
-        })
-      } catch (error) {
-        injector.get(NotyService).emit('onNotyAdded', {
-          title: 'Setup failed',
-          body: error instanceof Error ? error.message : 'Setup error',
-          type: 'error',
-        })
-      }
-    }
-
-    const triggerSetupAll = async () => {
-      setIsBatchRunning(true)
-      try {
-        await injector.get(StacksApiClient).call({
-          method: 'POST',
-          action: '/stacks/:id/setup',
-          url: { id: props.stackName },
-        })
-      } catch (error) {
-        injector.get(NotyService).emit('onNotyAdded', {
-          title: 'Batch setup failed',
-          body: error instanceof Error ? error.message : 'Setup error',
-          type: 'error',
-        })
-      }
-      setIsBatchRunning(false)
-    }
-
-    const [isStartingAll, setIsStartingAll] = useState('isStartingAll', false)
-
-    const triggerStartAll = async () => {
-      setIsStartingAll(true)
-      const api = injector.get(ServicesApiClient)
-      for (const svc of services) {
-        if (isServiceReady(svc) && svc.runStatus === 'stopped') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/start', url: { id: svc.id } })
-          } catch {
-            // Individual failures tracked by entity-sync
-          }
-        }
-      }
-      setIsStartingAll(false)
-    }
-
-    if (isLoading) {
-      return (
-        <PageContainer>
-          <div style={{ display: 'flex', justifyContent: 'center', padding: '48px' }}>
-            <Loader />
-          </div>
-        </PageContainer>
-      )
-    }
-
-    return (
-      <PageContainer>
-        <PageHeader
-          icon={<Icon icon={icons.settings} />}
-          title={`Set Up: ${currentStack?.displayName ?? props.stackName}`}
-          description="Clone repositories, install packages, and build services."
-          actions={
-            <div style={{ display: 'flex', gap: '8px' }}>
-              {allReady ? (
-                <Button
-                  variant="contained"
-                  size="small"
-                  color="success"
-                  loading={isStartingAll}
-                  onclick={() => void triggerStartAll()}
-                  startIcon={<Icon icon={icons.play} size="small" />}
-                >
-                  Start All Services
-                </Button>
-              ) : (
-                <Button
-                  variant="contained"
-                  size="small"
-                  loading={anyInProgress}
-                  onclick={() => void triggerSetupAll()}
-                  startIcon={<Icon icon={icons.settings} size="small" />}
-                >
-                  Set Up All Services
-                </Button>
-              )}
-              <StackCraftNestedRouteLink path="/stacks/:stackName" params={{ stackName: props.stackName }}>
-                <Button variant="outlined" size="small" startIcon={<Icon icon={icons.home} size="small" />}>
-                  Go to Dashboard
-                </Button>
-              </StackCraftNestedRouteLink>
-            </div>
-          }
-        />
-
-        <Paper>
-          {services.length === 0 ? (
-            <div style={{ textAlign: 'center', padding: '32px', color: cssVariableTheme.text.secondary }}>
-              No services in this stack.
-            </div>
-          ) : (
-            <DataGrid<ServiceView, StackSetupColumn>
-              columns={['service', 'clone', 'install', 'build', 'run', 'actions']}
-              findOptions={findOptions}
-              onFindOptionsChange={setFindOptions}
-              styles={undefined}
-              collectionService={collectionService}
-              paginationOptions={[Infinity]}
-              headerComponents={{
-                service: () => <span>Service</span>,
-                clone: () => <span style={{ display: 'block', textAlign: 'center', width: '100%' }}>Clone</span>,
-                install: () => <span style={{ display: 'block', textAlign: 'center', width: '100%' }}>Install</span>,
-                build: () => <span style={{ display: 'block', textAlign: 'center', width: '100%' }}>Build</span>,
-                run: () => <span style={{ display: 'block', textAlign: 'center', width: '100%' }}>Run</span>,
-                actions: () => <span style={{ display: 'block', textAlign: 'right', width: '100%' }}>Actions</span>,
-              }}
-              rowComponents={{
-                service: (svc) => (
-                  <div>
-                    <div style={{ fontWeight: 'bold', fontSize: '14px' }}>{svc.displayName}</div>
-                    {svc.description ? (
-                      <div style={{ fontSize: '12px', color: cssVariableTheme.text.secondary, marginTop: '2px' }}>
-                        {svc.description}
-                      </div>
-                    ) : null}
-                  </div>
-                ),
-                clone: (svc) => (
-                  <div style={{ textAlign: 'center' }}>
-                    <CloneStatusChip status={svc.cloneStatus} />
-                  </div>
-                ),
-                install: (svc) => (
-                  <div style={{ textAlign: 'center' }}>
-                    <InstallStatusChip status={svc.installStatus} />
-                  </div>
-                ),
-                build: (svc) => (
-                  <div style={{ textAlign: 'center' }}>
-                    <BuildStatusChip status={svc.buildStatus} />
-                  </div>
-                ),
-                run: (svc) => (
-                  <div style={{ textAlign: 'center' }}>
-                    <RunStatusChip status={svc.runStatus} />
-                  </div>
-                ),
-                actions: (svc) => {
-                  const ready = isServiceReady(svc)
-                  const inProgress = isServiceInProgress(svc) || setupTriggered.has(svc.id)
-                  return (
-                    <div
-                      style={{ display: 'flex', gap: '6px', justifyContent: 'flex-end' }}
-                      onclick={(e: MouseEvent) => e.stopPropagation()}
-                    >
-                      {ready ? (
-                        <StackCraftNestedRouteLink
-                          path="/stacks/:stackName/services/:serviceId"
-                          params={{ stackName: props.stackName, serviceId: svc.id }}
-                        >
-                          <Button
-                            variant="outlined"
-                            size="small"
-                            color="success"
-                            startIcon={<Icon icon={icons.checkCircle} size="small" />}
-                          >
-                            Ready
-                          </Button>
-                        </StackCraftNestedRouteLink>
-                      ) : (
-                        <Button
-                          variant="outlined"
-                          size="small"
-                          loading={inProgress}
-                          onclick={() => void triggerSetup(svc.id)}
-                          startIcon={<Icon icon={icons.settings} size="small" />}
-                        >
-                          Set Up
-                        </Button>
-                      )}
-                      <StackCraftNestedRouteLink
-                        path="/stacks/:stackName/services/:serviceId"
-                        params={{ stackName: props.stackName, serviceId: svc.id }}
-                        hash="logs"
-                      >
-                        <Button variant="outlined" size="small" startIcon={<Icon icon={icons.fileText} size="small" />}>
-                          Logs
-                        </Button>
-                      </StackCraftNestedRouteLink>
-                    </div>
-                  )
-                },
-              }}
-            />
-          )}
-        </Paper>
-      </PageContainer>
-    )
-  },
-})
diff --git a/frontend/src/pages/wizards/create-service-wizard/setup-step.tsx b/frontend/src/pages/wizards/create-service-wizard/setup-step.tsx
index aade1b9..221db09 100644
--- a/frontend/src/pages/wizards/create-service-wizard/setup-step.tsx
+++ b/frontend/src/pages/wizards/create-service-wizard/setup-step.tsx
@@ -94,11 +94,14 @@ export const SetupStep = Shade<SetupStepProps>({
                 variant="contained"
                 color="success"
                 onclick={() =>
-                  stackCraftNavigate(injector, { path: '/stacks/:stackName', params: { stackName: props.stackName } })
+                  stackCraftNavigate(injector, {
+                    path: '/stacks/:stackName/services',
+                    params: { stackName: props.stackName },
+                  })
                 }
-                startIcon={<Icon icon={icons.home} size="small" />}
+                startIcon={<Icon icon={icons.code} size="small" />}
               >
-                Go to Dashboard
+                Go to Services
               </Button>
               <StackCraftNestedRouteLink
                 path="/stacks/:stackName/services/:serviceId"
@@ -135,11 +138,14 @@ export const SetupStep = Shade<SetupStepProps>({
               <Button
                 variant="outlined"
                 onclick={() =>
-                  stackCraftNavigate(injector, { path: '/stacks/:stackName', params: { stackName: props.stackName } })
+                  stackCraftNavigate(injector, {
+                    path: '/stacks/:stackName/services',
+                    params: { stackName: props.stackName },
+                  })
                 }
-                startIcon={<Icon icon={icons.home} size="small" />}
+                startIcon={<Icon icon={icons.code} size="small" />}
               >
-                Go to Dashboard
+                Go to Services
               </Button>
             </div>
           </div>
diff --git a/frontend/src/utils/stack-status.spec.ts b/frontend/src/utils/stack-status.spec.ts
new file mode 100644
index 0000000..b5744cc
--- /dev/null
+++ b/frontend/src/utils/stack-status.spec.ts
@@ -0,0 +1,94 @@
+// @vitest-environment node
+import { describe, expect, it } from 'vitest'
+import type { ServiceView } from 'common'
+
+import { getStackRunSummary, getStackStatusPaletteKey } from './stack-status.js'
+
+const baseService: ServiceView = {
+  id: 'svc-1',
+  serviceId: 'svc-1',
+  stackName: 'stack-1',
+  displayName: 'Test Service',
+  description: '',
+  runCommand: 'npm start',
+  prerequisiteIds: [],
+  prerequisiteServiceIds: [],
+  files: [],
+  autoFetchEnabled: false,
+  autoFetchIntervalMinutes: 60,
+  autoRestartOnFetch: false,
+  environmentVariableOverrides: {},
+  localFiles: [],
+  cloneStatus: 'not-cloned',
+  installStatus: 'not-installed',
+  buildStatus: 'not-built',
+  runStatus: 'stopped',
+  createdAt: '',
+  updatedAt: '',
+}
+
+describe('getStackRunSummary', () => {
+  it('should return empty when there are no services', () => {
+    expect(getStackRunSummary([])).toEqual({
+      status: 'empty',
+      running: 0,
+      stopped: 0,
+      error: 0,
+      transitional: 0,
+      total: 0,
+    })
+  })
+
+  it('should return stopped when all services are stopped', () => {
+    const summary = getStackRunSummary([
+      { ...baseService, id: 'a', runStatus: 'stopped' },
+      { ...baseService, id: 'b', runStatus: 'stopped' },
+    ])
+    expect(summary.status).toBe('stopped')
+    expect(summary.stopped).toBe(2)
+  })
+
+  it('should return running when any service is running and none errored or transitional', () => {
+    const summary = getStackRunSummary([
+      { ...baseService, id: 'a', runStatus: 'running' },
+      { ...baseService, id: 'b', runStatus: 'stopped' },
+    ])
+    expect(summary.status).toBe('running')
+    expect(summary.running).toBe(1)
+  })
+
+  it('should prefer transitional over running', () => {
+    const summary = getStackRunSummary([
+      { ...baseService, id: 'a', runStatus: 'running' },
+      { ...baseService, id: 'b', runStatus: 'starting' },
+    ])
+    expect(summary.status).toBe('transitional')
+    expect(summary.transitional).toBe(1)
+  })
+
+  it('should prefer error over transitional and running', () => {
+    const summary = getStackRunSummary([
+      { ...baseService, id: 'a', runStatus: 'running' },
+      { ...baseService, id: 'b', runStatus: 'starting' },
+      { ...baseService, id: 'c', runStatus: 'error' },
+    ])
+    expect(summary.status).toBe('error')
+    expect(summary.error).toBe(1)
+  })
+
+  it('should count stopping as transitional', () => {
+    const summary = getStackRunSummary([{ ...baseService, runStatus: 'stopping' }])
+    expect(summary.status).toBe('transitional')
+    expect(summary.transitional).toBe(1)
+  })
+})
+
+describe('getStackStatusPaletteKey', () => {
+  it('should map statuses to palette keys', () => {
+    expect(getStackStatusPaletteKey('error')).toBe('error')
+    expect(getStackStatusPaletteKey('transitional')).toBe('warning')
+    expect(getStackStatusPaletteKey('running')).toBe('success')
+    expect(getStackStatusPaletteKey('stopped')).toBe('secondary')
+    expect(getStackStatusPaletteKey('empty')).toBe('secondary')
+  })
+})
diff --git a/frontend/src/utils/stack-status.ts b/frontend/src/utils/stack-status.ts
new file mode 100644
index 0000000..5c543d4
--- /dev/null
+++ b/frontend/src/utils/stack-status.ts
@@ -0,0 +1,56 @@
+import type { Palette } from '@furystack/shades-common-components'
+import type { RunStatus, ServiceView } from 'common'
+
+export type StackRunSummaryStatus = 'empty' | 'stopped' | 'transitional' | 'running' | 'error'
+
+export type StackRunSummary = {
+  status: StackRunSummaryStatus
+  running: number
+  stopped: number
+  error: number
+  transitional: number
+  total: number
+}
+
+const isTransitional = (runStatus: RunStatus): boolean => runStatus === 'starting' || runStatus === 'stopping'
+
+/**
+ * Derives a single stack-level run summary from its services.
+ * Precedence: error > transitional > running > stopped > empty.
+ */
+export const getStackRunSummary = (services: ServiceView[]): StackRunSummary => {
+  const running = services.filter((s) => s.runStatus === 'running').length
+  const stopped = services.filter((s) => s.runStatus === 'stopped').length
+  const error = services.filter((s) => s.runStatus === 'error').length
+  const transitional = services.filter((s) => isTransitional(s.runStatus)).length
+  const total = services.length
+
+  const status: StackRunSummaryStatus =
+    total === 0
+      ? 'empty'
+      : error > 0
+        ? 'error'
+        : transitional > 0
+          ? 'transitional'
+          : running > 0
+            ? 'running'
+            : 'stopped'
+
+  return { status, running, stopped, error, transitional, total }
+}
+
+export const getStackStatusPaletteKey = (status: StackRunSummaryStatus): keyof Palette => {
+  switch (status) {
+    case 'error':
+      return 'error'
+    case 'transitional':
+      return 'warning'
+    case 'running':
+      return 'success'
+    case 'stopped':
+    case 'empty':
+      return 'secondary'
+    default:
+      return 'secondary'
+  }
+}

From 866c79ca429529b5c67a73f8535811b0ffe48405 Mon Sep 17 00:00:00 2001
From: Gallay Lajos <gallay.lajos@gmail.com>
Date: Thu, 4 Jun 2026 12:53:19 +0200
Subject: [PATCH 2/3] changelogs, versionings

---
 .yarn/changelogs/frontend.f07443ec.md    | 60 ++++++++++++++++++++++++
 .yarn/changelogs/stack-craft.f07443ec.md | 17 +++++++
 .yarn/versions/f07443ec.yml              |  3 ++
 3 files changed, 80 insertions(+)
 create mode 100644 .yarn/changelogs/frontend.f07443ec.md
 create mode 100644 .yarn/changelogs/stack-craft.f07443ec.md
 create mode 100644 .yarn/versions/f07443ec.yml

diff --git a/.yarn/changelogs/frontend.f07443ec.md b/.yarn/changelogs/frontend.f07443ec.md
new file mode 100644
index 0000000..cc0c393
--- /dev/null
+++ b/.yarn/changelogs/frontend.f07443ec.md
@@ -0,0 +1,60 @@
+<!-- version-type: patch -->
+# frontend
+
+## ✨ Features
+
+### Services is now the stack default page
+
+Opening a stack (`/stacks/:stackName`) or the legacy Setup route (`/stacks/:stackName/setup`) redirects to **Services**. Create, import, and service-wizard flows land on Services directly so day-to-day work starts on the page you actually use.
+
+### Stack actions menu on Services
+
+A **Stack actions** menu (`⋯`) on the Services header groups stack-level operations that previously lived only on Overview:
+
+- **Edit Stack** — open stack settings
+- **Export Stack** — export stack configuration
+- **Set Up All** — run the stack batch setup endpoint (`POST /stacks/:id/setup`) for every service
+
+### Sidebar stack status at a glance
+
+Each stack in the sidebar accordion shows a **traffic-light dot** derived from live service run state:
+
+- Green — at least one service running
+- Amber — services starting or stopping
+- Red — at least one service in error
+- Grey — all stopped or no services
+
+The **Services** sub-link also shows a count so you can spot empty stacks without opening them.
+
+### Dashboard cards with inline status and per-stack actions
+
+Global dashboard stack cards now show **status chips inline with the stack name** (running, stopped, error, etc.) and expose **Start All**, **Stop All**, and **Update All** in the card footer. Actions use `stopPropagation` so clicking them does not navigate away from the dashboard.
+
+### Slimmer Services table actions
+
+Service rows now expose three actions instead of six:
+
+- **Primary** — context-aware play/stop/retry for the current pipeline stage
+- **Logs** — jump to the service logs tab
+- **Chevron** — open service details
+
+The service name is a link; double-clicking a row also opens details. Bulk selection still works on single-click.
+
+**Commits behind upstream** moved from the removed Update button to a badge on the **Branch** cell (`N behind`).
+
+### Secret warnings and guided empty state on Services
+
+- **Potential secrets** warnings (previously on stack Overview) now appear above the Services table when detected in service definitions.
+- Stacks with **no services** show a **3-step getting-started guide** (Repositories → Prerequisites → Create Services). The old “Run Setup” step was removed — setup is available via bulk actions and the stack menu.
+
+## ♻️ Refactoring
+
+- Removed stack **Overview** (`stack-dashboard.tsx`) and **Setup** (`stack-setup.tsx`) pages; unique concerns relocated to Services, sidebar, and the stack actions menu
+- Extracted `StackRedirect`, `StackCard`, `SidebarStackItem`, `ServicesEmptyState`, and `StackActionsMenu` components
+- Added `getStackRunSummary()` helper in `stack-status.ts` for shared stack run-state derivation (sidebar dot and future consumers)
+- Simplified global `Dashboard` to list-only mode
+
+## 🧪 Tests
+
+- Added unit tests for `getStackRunSummary` and `getStackStatusPaletteKey`
+- Added component tests for `StackRedirect`, `StackCard`, `ServiceTable`, `SidebarStackItem`, `ServicesEmptyState`, and `StackActionsMenu`
diff --git a/.yarn/changelogs/stack-craft.f07443ec.md b/.yarn/changelogs/stack-craft.f07443ec.md
new file mode 100644
index 0000000..8ef9468
--- /dev/null
+++ b/.yarn/changelogs/stack-craft.f07443ec.md
@@ -0,0 +1,17 @@
+<!-- version-type: patch -->
+# stack-craft
+
+## ✨ Features
+
+### Navigation restructure — Services-first stack workflow
+
+StackCraft now treats **Services** as the default landing page for every stack. Legacy URLs (`/stacks/:name`, `/stacks/:name/setup`) redirect automatically, and stack-level actions (Edit, Export, Set Up All) are reachable from the Services header menu instead of a separate Overview page.
+
+The sidebar shows a **per-stack status dot** and service count so you can tell at a glance whether a cloned stack still has processes running — useful when the same stack exists in multiple feature branches and port conflicts are a risk.
+
+The global dashboard adds **per-card Start/Stop/Update All** controls alongside inline status chips, without leaving the dashboard.
+
+## 🧪 Tests
+
+- Added `e2e/navigation.spec.ts` covering legacy-route redirects, stack actions menu (Edit/Export), dashboard card actions that do not navigate away, and sidebar status dots
+- Updated E2E helpers: `createStack` asserts landing on Services; `deleteStack` reaches Edit Stack via the stack actions menu; sidebar helper drops the removed Overview link
diff --git a/.yarn/versions/f07443ec.yml b/.yarn/versions/f07443ec.yml
new file mode 100644
index 0000000..e231c93
--- /dev/null
+++ b/.yarn/versions/f07443ec.yml
@@ -0,0 +1,3 @@
+releases:
+  frontend: patch
+  stack-craft: patch

From 028a0acd945eb21d198eb5fd1efb10d661d62776 Mon Sep 17 00:00:00 2001
From: Gallay Lajos <gallay.lajos@gmail.com>
Date: Thu, 4 Jun 2026 14:04:41 +0200
Subject: [PATCH 3/3] cr fixes

---
 e2e/navigation.spec.ts                        |   7 ++
 .../components/layout/sidebar-stack-item.tsx  |  14 +--
 .../src/components/service-table.spec.tsx     |  25 ++--
 frontend/src/components/service-table.tsx     |   4 +-
 .../src/components/stack-redirect.spec.tsx    |  12 +-
 .../dashboard/stack-card-bulk-actions.tsx     |  71 +++++++++++
 frontend/src/pages/dashboard/stack-card.tsx   | 113 +-----------------
 .../pages/dashboard/stack-list-dashboard.tsx  |  83 ++-----------
 .../pages/services/run-stack-menu-action.ts   |  46 +++++++
 .../stack-actions-menu.action.spec.ts         |  57 +++++++++
 .../services/stack-actions-menu.spec.tsx      |   8 +-
 .../src/pages/services/stack-actions-menu.tsx |  37 +-----
 .../src/utils/bulk-service-actions.spec.ts    | 108 +++++++++++++++++
 frontend/src/utils/bulk-service-actions.ts    |  56 +++++++++
 frontend/src/utils/stack-status.spec.ts       |  14 ++-
 frontend/src/utils/stack-status.ts            |  23 ++++
 16 files changed, 425 insertions(+), 253 deletions(-)
 create mode 100644 frontend/src/pages/dashboard/stack-card-bulk-actions.tsx
 create mode 100644 frontend/src/pages/services/run-stack-menu-action.ts
 create mode 100644 frontend/src/pages/services/stack-actions-menu.action.spec.ts
 create mode 100644 frontend/src/utils/bulk-service-actions.spec.ts
 create mode 100644 frontend/src/utils/bulk-service-actions.ts

diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts
index 488022e..2248559 100644
--- a/e2e/navigation.spec.ts
+++ b/e2e/navigation.spec.ts
@@ -45,6 +45,13 @@ test('Navigation restructure', async ({ page, browserName }) => {
       await expect(page.locator('shade-export-stack')).toBeVisible()
     })
 
+    await test.step('Stack actions menu runs Set Up All', async () => {
+      await page.goto(`/stacks/${stackName}/services`)
+      await openStackActionsMenu(page)
+      await page.getByRole('menuitem', { name: 'Set Up All' }).click()
+      await expect(page.locator('shade-services-list')).toBeVisible()
+    })
+
     await test.step('Dashboard card actions do not navigate away', async () => {
       await page.locator('shade-sidebar-item a', { hasText: 'Dashboard' }).click()
       await expect(page.locator('stack-list-dashboard')).toBeVisible()
diff --git a/frontend/src/components/layout/sidebar-stack-item.tsx b/frontend/src/components/layout/sidebar-stack-item.tsx
index 00d3292..8084b36 100644
--- a/frontend/src/components/layout/sidebar-stack-item.tsx
+++ b/frontend/src/components/layout/sidebar-stack-item.tsx
@@ -4,7 +4,7 @@ import type { ServiceView, StackView } from 'common'
 import { match } from 'path-to-regexp'
 
 import { StackCraftNestedRouteLink } from '../app-routes.js'
-import { getStackRunSummary, getStackStatusPaletteKey } from '../../utils/stack-status.js'
+import { formatStackRunSummaryTooltip, getStackRunSummary, getStackStatusPaletteKey } from '../../utils/stack-status.js'
 
 type SidebarStackLinkProps = {
   stackName: string
@@ -95,12 +95,6 @@ export const SidebarStackItem = Shade<SidebarStackItemProps>({
       borderRadius: '50%',
       flexShrink: '0',
     },
-    '& .accordion-title-row': {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8px',
-      minWidth: '0',
-    },
     '& .sidebar-stack-accordion-links': {
       margin: '0 -12px 0 -8px',
       paddingBottom: '4px',
@@ -124,11 +118,7 @@ export const SidebarStackItem = Shade<SidebarStackItemProps>({
           <span
             className="stack-status-dot"
             data-testid="stack-status-dot"
-            title={
-              runSummary.total === 0
-                ? 'No services'
-                : `${runSummary.running} running, ${runSummary.stopped} stopped, ${runSummary.error} error`
-            }
+            title={formatStackRunSummaryTooltip(runSummary)}
             style={{ backgroundColor: cssVariableTheme.palette[dotColor].main }}
           />
         }
diff --git a/frontend/src/components/service-table.spec.tsx b/frontend/src/components/service-table.spec.tsx
index edadb14..2f73c91 100644
--- a/frontend/src/components/service-table.spec.tsx
+++ b/frontend/src/components/service-table.spec.tsx
@@ -9,7 +9,7 @@ import { ServiceTable } from './service-table.js'
 
 vi.mock('./app-routes.js', () => ({
   stackCraftNavigate: vi.fn(),
-  StackCraftNestedRouteLink: () => null,
+  StackCraftNestedRouteLink: ({ children }: { children?: unknown }) => children,
   stackCraftReplace: vi.fn(),
 }))
 
@@ -48,7 +48,7 @@ describe('ServiceTable', () => {
     collectionService?.[Symbol.dispose]()
   })
 
-  it('should render primary, logs, and details actions only', async () => {
+  it('should render the service grid with expected columns and sync collection data', async () => {
     const injector = createInjector()
     injector.get(ThemeProviderService).setAssignedTheme(defaultDarkTheme)
     injector.bind(ServicesApiClient, () => ({ call: vi.fn() }))
@@ -65,19 +65,12 @@ describe('ServiceTable', () => {
 
     await flushUpdates()
 
-    const table = root.querySelector('shade-service-table')
-    expect(table).not.toBeNull()
-
-    const actionButtons = table?.querySelectorAll('[aria-label]') ?? []
-    const labels = Array.from(actionButtons).map((el) => el.getAttribute('aria-label'))
-    expect(labels).toContain('Start')
-    expect(labels).toContain('Logs')
-    expect(labels).toContain('Details')
-    expect(labels).not.toContain('Restart')
-    expect(labels).not.toContain('Update')
-    expect(labels).not.toContain('Edit')
-
-    expect(table?.textContent).toContain('API Gateway')
-    expect(table?.querySelector('[data-testid="commits-behind-badge"]')?.textContent).toContain('3 behind')
+    expect(root.querySelector('shade-service-table')).not.toBeNull()
+    expect(root.textContent).toContain('Service')
+    expect(root.textContent).toContain('Status')
+    expect(root.textContent).toContain('Branch')
+    expect(root.textContent).toContain('Actions')
+    expect(collectionService.data.getValue().entries).toHaveLength(1)
+    expect(collectionService.data.getValue().entries[0]?.displayName).toBe('API Gateway')
   })
 })
diff --git a/frontend/src/components/service-table.tsx b/frontend/src/components/service-table.tsx
index 3e31ab4..4eba4ec 100644
--- a/frontend/src/components/service-table.tsx
+++ b/frontend/src/components/service-table.tsx
@@ -33,8 +33,6 @@ export const ServiceTable = Shade<ServiceTableProps>({
   customElementName: 'shade-service-table',
   render: (options) => {
     const { props, injector, useState, useDisposable } = options
-    const api = injector.get(ServicesApiClient)
-    const noty = injector.get(NotyService)
     const { collectionService } = props
 
     useDisposable(
@@ -50,6 +48,8 @@ export const ServiceTable = Shade<ServiceTableProps>({
     )
 
     const callServiceAction = (serviceId: string, action: string, actionLabel: string) => {
+      const api = injector.get(ServicesApiClient)
+      const noty = injector.get(NotyService)
       void api
         .call({
           method: 'POST',
diff --git a/frontend/src/components/stack-redirect.spec.tsx b/frontend/src/components/stack-redirect.spec.tsx
index 3118a63..22bc6bc 100644
--- a/frontend/src/components/stack-redirect.spec.tsx
+++ b/frontend/src/components/stack-redirect.spec.tsx
@@ -3,10 +3,12 @@ import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/s
 import { defaultDarkTheme, ThemeProviderService } from '@furystack/shades-common-components'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
-const stackCraftReplace = vi.fn()
+const mocks = vi.hoisted(() => ({
+  stackCraftReplace: vi.fn(),
+}))
 
-vi.mock('../app-routes.js', () => ({
-  stackCraftReplace,
+vi.mock('./app-routes.js', () => ({
+  stackCraftReplace: mocks.stackCraftReplace,
 }))
 
 import { StackRedirect } from './stack-redirect.js'
@@ -16,7 +18,7 @@ describe('StackRedirect', () => {
 
   afterEach(() => {
     root?.remove()
-    stackCraftReplace.mockClear()
+    mocks.stackCraftReplace.mockClear()
   })
 
   it('should replace location with the stack services route on mount', async () => {
@@ -34,7 +36,7 @@ describe('StackRedirect', () => {
 
     await flushUpdates()
 
-    expect(stackCraftReplace).toHaveBeenCalledWith(injector, {
+    expect(mocks.stackCraftReplace).toHaveBeenCalledWith(injector, {
       path: '/stacks/:stackName/services',
       params: { stackName: 'my-stack' },
     })
diff --git a/frontend/src/pages/dashboard/stack-card-bulk-actions.tsx b/frontend/src/pages/dashboard/stack-card-bulk-actions.tsx
new file mode 100644
index 0000000..d634a59
--- /dev/null
+++ b/frontend/src/pages/dashboard/stack-card-bulk-actions.tsx
@@ -0,0 +1,71 @@
+import { createComponent, Shade } from '@furystack/shades'
+
+import { Button, Icon, icons } from '@furystack/shades-common-components'
+import type { ServiceView } from 'common'
+
+import { runBulkServiceAction } from '../../utils/bulk-service-actions.js'
+
+type StackCardBulkActionsProps = {
+  stackServices: ServiceView[]
+}
+
+export const StackCardBulkActions = Shade<StackCardBulkActionsProps>({
+  customElementName: 'stack-card-bulk-actions',
+  render: ({ props, injector, useState }) => {
+    const { stackServices } = props
+
+    const running = stackServices.filter((s) => s.runStatus === 'running').length
+    const stopped = stackServices.filter((s) => s.runStatus === 'stopped').length
+    const errored = stackServices.filter((s) => s.runStatus === 'error').length
+    const clonedCount = stackServices.filter((s) => s.repositoryId && s.cloneStatus === 'cloned').length
+
+    const [isStartingAll, setIsStartingAll] = useState('isStartingAll', false)
+    const [isStoppingAll, setIsStoppingAll] = useState('isStoppingAll', false)
+    const [isUpdatingAll, setIsUpdatingAll] = useState('isUpdatingAll', false)
+
+    const runAction = async (action: 'start' | 'stop' | 'update', setLoading: (v: boolean) => void) => {
+      setLoading(true)
+      try {
+        await runBulkServiceAction(injector, stackServices, action)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    return (
+      <>
+        <Button
+          variant="text"
+          size="small"
+          color="success"
+          disabled={stopped === 0 && errored === 0}
+          loading={isStartingAll}
+          onclick={() => void runAction('start', setIsStartingAll)}
+          startIcon={<Icon icon={icons.play} size="small" />}
+        >
+          Start All
+        </Button>
+        <Button
+          variant="text"
+          size="small"
+          disabled={running === 0}
+          loading={isStoppingAll}
+          onclick={() => void runAction('stop', setIsStoppingAll)}
+          startIcon={<Icon icon={icons.stopCircle} size="small" />}
+        >
+          Stop All
+        </Button>
+        <Button
+          variant="text"
+          size="small"
+          disabled={clonedCount === 0}
+          loading={isUpdatingAll}
+          onclick={() => void runAction('update', setIsUpdatingAll)}
+          startIcon={<Icon icon={icons.download} size="small" />}
+        >
+          Update All
+        </Button>
+      </>
+    )
+  },
+})
diff --git a/frontend/src/pages/dashboard/stack-card.tsx b/frontend/src/pages/dashboard/stack-card.tsx
index 3d72f91..bcf6872 100644
--- a/frontend/src/pages/dashboard/stack-card.tsx
+++ b/frontend/src/pages/dashboard/stack-card.tsx
@@ -2,7 +2,6 @@ import { createComponent, Shade } from '@furystack/shades'
 
 import type { Palette } from '@furystack/shades-common-components'
 import {
-  Button,
   Card,
   CardActions,
   CardContent,
@@ -11,13 +10,11 @@ import {
   Icon,
   icons,
   MarkdownDisplay,
-  NotyService,
 } from '@furystack/shades-common-components'
 import type { PrerequisiteCheckStatus, ServiceView, StackDefinition } from 'common'
 
 import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
-import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
-import { isServiceReady } from '../../utils/is-service-ready.js'
+import { StackCardBulkActions } from './stack-card-bulk-actions.js'
 
 type StackCardProps = {
   stack: StackDefinition
@@ -35,7 +32,7 @@ const prereqStatusColor: Record<PrerequisiteCheckStatus, keyof Palette> = {
 
 export const StackCard = Shade<StackCardProps>({
   customElementName: 'stack-card',
-  render: ({ props, injector, useState }) => {
+  render: ({ props }) => {
     const { stack, stackServices, stackPrereqs, checkResultMap } = props
 
     const running = stackServices.filter((s) => s.runStatus === 'running').length
@@ -43,85 +40,11 @@ export const StackCard = Shade<StackCardProps>({
     const errored = stackServices.filter((s) => s.runStatus === 'error').length
     const starting = stackServices.filter((s) => s.runStatus === 'starting').length
     const stopping = stackServices.filter((s) => s.runStatus === 'stopping').length
-    const clonedCount = stackServices.filter((s) => s.repositoryId && s.cloneStatus === 'cloned').length
 
     const satisfied = stackPrereqs.filter((p) => checkResultMap.get(p.id)?.status === 'satisfied').length
     const failed = stackPrereqs.filter((p) => checkResultMap.get(p.id)?.status === 'failed').length
     const unchecked = stackPrereqs.length - satisfied - failed
 
-    const [isStartingAll, setIsStartingAll] = useState('isStartingAll', false)
-    const [isStoppingAll, setIsStoppingAll] = useState('isStoppingAll', false)
-    const [isUpdatingAll, setIsUpdatingAll] = useState('isUpdatingAll', false)
-
-    const api = injector.get(ServicesApiClient)
-    const noty = injector.get(NotyService)
-
-    const triggerStartAll = async () => {
-      setIsStartingAll(true)
-      const failures: string[] = []
-      for (const svc of stackServices) {
-        if (isServiceReady(svc) && svc.runStatus === 'stopped') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/start', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Start failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
-      }
-      setIsStartingAll(false)
-    }
-
-    const triggerStopAll = async () => {
-      setIsStoppingAll(true)
-      const failures: string[] = []
-      for (const svc of stackServices) {
-        if (svc.runStatus === 'running') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/stop', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Stop failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
-      }
-      setIsStoppingAll(false)
-    }
-
-    const triggerUpdateAll = async () => {
-      setIsUpdatingAll(true)
-      const failures: string[] = []
-      for (const svc of stackServices) {
-        if (svc.repositoryId && svc.cloneStatus === 'cloned') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/update', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Update failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
-      }
-      setIsUpdatingAll(false)
-    }
-
     const stopCardNav = (e: MouseEvent) => e.stopPropagation()
 
     return (
@@ -230,37 +153,7 @@ export const StackCard = Shade<StackCardProps>({
           </CardContent>
           {stackServices.length > 0 ? (
             <CardActions onclick={stopCardNav}>
-              <Button
-                variant="text"
-                size="small"
-                color="success"
-                disabled={stopped === 0 && errored === 0}
-                loading={isStartingAll}
-                onclick={() => void triggerStartAll()}
-                startIcon={<Icon icon={icons.play} size="small" />}
-              >
-                Start All
-              </Button>
-              <Button
-                variant="text"
-                size="small"
-                disabled={running === 0}
-                loading={isStoppingAll}
-                onclick={() => void triggerStopAll()}
-                startIcon={<Icon icon={icons.stopCircle} size="small" />}
-              >
-                Stop All
-              </Button>
-              <Button
-                variant="text"
-                size="small"
-                disabled={clonedCount === 0}
-                loading={isUpdatingAll}
-                onclick={() => void triggerUpdateAll()}
-                startIcon={<Icon icon={icons.download} size="small" />}
-              >
-                Update All
-              </Button>
+              <StackCardBulkActions stackServices={stackServices} />
             </CardActions>
           ) : null}
         </Card>
diff --git a/frontend/src/pages/dashboard/stack-list-dashboard.tsx b/frontend/src/pages/dashboard/stack-list-dashboard.tsx
index eb53f55..a3a7a22 100644
--- a/frontend/src/pages/dashboard/stack-list-dashboard.tsx
+++ b/frontend/src/pages/dashboard/stack-list-dashboard.tsx
@@ -1,7 +1,7 @@
 import { useCollectionSync } from '../../services/entity-sync.js'
 import { createComponent, Shade } from '@furystack/shades'
 
-import { Button, Icon, icons, NotyService, PageContainer, PageHeader } from '@furystack/shades-common-components'
+import { Button, Icon, icons, PageContainer, PageHeader } from '@furystack/shades-common-components'
 import type { ServiceView, StackDefinition } from 'common'
 import {
   mergeServiceView,
@@ -14,8 +14,7 @@ import {
 } from 'common'
 
 import { StackCraftNestedRouteLink } from '../../components/app-routes.js'
-import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
-import { isServiceReady } from '../../utils/is-service-ready.js'
+import { runBulkServiceAction } from '../../utils/bulk-service-actions.js'
 import { StackCard } from './stack-card.js'
 
 type StackListDashboardProps = {
@@ -86,73 +85,13 @@ export const StackListDashboard = Shade<StackListDashboardProps>({
     const [isStoppingAll, setIsStoppingAll] = useState('globalIsStoppingAll', false)
     const [isUpdatingAll, setIsUpdatingAll] = useState('globalIsUpdatingAll', false)
 
-    const api = injector.get(ServicesApiClient)
-    const noty = injector.get(NotyService)
-
-    const triggerGlobalStartAll = async () => {
-      setIsStartingAll(true)
-      const failures: string[] = []
-      for (const svc of allServices) {
-        if (isServiceReady(svc) && svc.runStatus === 'stopped') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/start', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Start failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
-      }
-      setIsStartingAll(false)
-    }
-
-    const triggerGlobalStopAll = async () => {
-      setIsStoppingAll(true)
-      const failures: string[] = []
-      for (const svc of allServices) {
-        if (svc.runStatus === 'running') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/stop', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Stop failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
-      }
-      setIsStoppingAll(false)
-    }
-
-    const triggerGlobalUpdateAll = async () => {
-      setIsUpdatingAll(true)
-      const failures: string[] = []
-      for (const svc of allServices) {
-        if (svc.repositoryId && svc.cloneStatus === 'cloned') {
-          try {
-            await api.call({ method: 'POST', action: '/services/:id/update', url: { id: svc.id } })
-          } catch {
-            failures.push(svc.displayName)
-          }
-        }
-      }
-      if (failures.length > 0) {
-        noty.emit('onNotyAdded', {
-          title: 'Update failed',
-          body: `Failed for: ${failures.join(', ')}`,
-          type: 'error',
-        })
+    const runGlobalAction = async (action: 'start' | 'stop' | 'update', setLoading: (v: boolean) => void) => {
+      setLoading(true)
+      try {
+        await runBulkServiceAction(injector, allServices, action)
+      } finally {
+        setLoading(false)
       }
-      setIsUpdatingAll(false)
     }
 
     return (
@@ -175,7 +114,7 @@ export const StackListDashboard = Shade<StackListDashboardProps>({
                     color="success"
                     disabled={globalStoppedCount === 0 && globalErrorCount === 0}
                     loading={isStartingAll}
-                    onclick={() => void triggerGlobalStartAll()}
+                    onclick={() => void runGlobalAction('start', setIsStartingAll)}
                     startIcon={<Icon icon={icons.play} size="small" />}
                   >
                     Start All
@@ -185,7 +124,7 @@ export const StackListDashboard = Shade<StackListDashboardProps>({
                     size="small"
                     disabled={globalRunningCount === 0}
                     loading={isStoppingAll}
-                    onclick={() => void triggerGlobalStopAll()}
+                    onclick={() => void runGlobalAction('stop', setIsStoppingAll)}
                     startIcon={<Icon icon={icons.stopCircle} size="small" />}
                   >
                     Stop All
@@ -195,7 +134,7 @@ export const StackListDashboard = Shade<StackListDashboardProps>({
                     size="small"
                     disabled={globalClonedCount === 0}
                     loading={isUpdatingAll}
-                    onclick={() => void triggerGlobalUpdateAll()}
+                    onclick={() => void runGlobalAction('update', setIsUpdatingAll)}
                     startIcon={<Icon icon={icons.download} size="small" />}
                   >
                     Update All
diff --git a/frontend/src/pages/services/run-stack-menu-action.ts b/frontend/src/pages/services/run-stack-menu-action.ts
new file mode 100644
index 0000000..f4e0048
--- /dev/null
+++ b/frontend/src/pages/services/run-stack-menu-action.ts
@@ -0,0 +1,46 @@
+import type { Injector } from '@furystack/inject'
+import { NotyService } from '@furystack/shades-common-components'
+
+import { stackCraftNavigate } from '../../components/app-routes.js'
+import { StacksApiClient } from '../../services/api-clients/stacks-api-client.js'
+
+export type StackMenuActionKey = 'edit' | 'export' | 'setup-all'
+
+/**
+ * Handles stack-level menu actions from the Services page header menu.
+ */
+export const runStackMenuAction = async (
+  injector: Injector,
+  stackName: string,
+  key: StackMenuActionKey,
+): Promise<void> => {
+  if (key === 'edit') {
+    stackCraftNavigate(injector, {
+      path: '/stacks/:stackName/edit',
+      params: { stackName },
+    })
+    return
+  }
+
+  if (key === 'export') {
+    stackCraftNavigate(injector, {
+      path: '/stacks/:stackName/export',
+      params: { stackName },
+    })
+    return
+  }
+
+  try {
+    await injector.get(StacksApiClient).call({
+      method: 'POST',
+      action: '/stacks/:id/setup',
+      url: { id: stackName },
+    })
+  } catch (error: unknown) {
+    injector.get(NotyService).emit('onNotyAdded', {
+      title: 'Batch setup failed',
+      body: error instanceof Error ? error.message : 'Setup error',
+      type: 'error',
+    })
+  }
+}
diff --git a/frontend/src/pages/services/stack-actions-menu.action.spec.ts b/frontend/src/pages/services/stack-actions-menu.action.spec.ts
new file mode 100644
index 0000000..072e0a7
--- /dev/null
+++ b/frontend/src/pages/services/stack-actions-menu.action.spec.ts
@@ -0,0 +1,57 @@
+import { createInjector } from '@furystack/inject'
+import { NotyService } from '@furystack/shades-common-components'
+import { describe, expect, it, vi } from 'vitest'
+
+import { StacksApiClient } from '../../services/api-clients/stacks-api-client.js'
+import { runStackMenuAction } from './run-stack-menu-action.js'
+
+const mocks = vi.hoisted(() => ({
+  stackCraftNavigate: vi.fn(),
+}))
+
+vi.mock('../../components/app-routes.js', () => ({
+  stackCraftNavigate: mocks.stackCraftNavigate,
+}))
+
+describe('runStackMenuAction', () => {
+  it('should navigate to edit stack', async () => {
+    const injector = createInjector()
+    await runStackMenuAction(injector, 'demo-stack', 'edit')
+
+    expect(mocks.stackCraftNavigate).toHaveBeenCalledWith(injector, {
+      path: '/stacks/:stackName/edit',
+      params: { stackName: 'demo-stack' },
+    })
+  })
+
+  it('should navigate to export stack', async () => {
+    const injector = createInjector()
+    await runStackMenuAction(injector, 'demo-stack', 'export')
+
+    expect(mocks.stackCraftNavigate).toHaveBeenCalledWith(injector, {
+      path: '/stacks/:stackName/export',
+      params: { stackName: 'demo-stack' },
+    })
+  })
+
+  it('should call batch setup and emit noty on failure', async () => {
+    const setupCall = vi.fn().mockRejectedValue(new Error('setup boom'))
+    const notyEmit = vi.fn()
+    const injector = createInjector()
+    injector.bind(StacksApiClient, () => ({ call: setupCall }))
+    injector.bind(NotyService, () => ({ emit: notyEmit }) as unknown as NotyService)
+
+    await runStackMenuAction(injector, 'demo-stack', 'setup-all')
+
+    expect(setupCall).toHaveBeenCalledWith({
+      method: 'POST',
+      action: '/stacks/:id/setup',
+      url: { id: 'demo-stack' },
+    })
+    expect(notyEmit).toHaveBeenCalledWith('onNotyAdded', {
+      title: 'Batch setup failed',
+      body: 'setup boom',
+      type: 'error',
+    })
+  })
+})
diff --git a/frontend/src/pages/services/stack-actions-menu.spec.tsx b/frontend/src/pages/services/stack-actions-menu.spec.tsx
index 4b4a1d4..b263ae8 100644
--- a/frontend/src/pages/services/stack-actions-menu.spec.tsx
+++ b/frontend/src/pages/services/stack-actions-menu.spec.tsx
@@ -6,10 +6,12 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { StacksApiClient } from '../../services/api-clients/stacks-api-client.js'
 import { StackActionsMenu } from './stack-actions-menu.js'
 
-const stackCraftNavigate = vi.fn()
+const mocks = vi.hoisted(() => ({
+  stackCraftNavigate: vi.fn(),
+}))
 
 vi.mock('../../components/app-routes.js', () => ({
-  stackCraftNavigate,
+  stackCraftNavigate: mocks.stackCraftNavigate,
 }))
 
 describe('StackActionsMenu', () => {
@@ -17,7 +19,7 @@ describe('StackActionsMenu', () => {
 
   afterEach(() => {
     root?.remove()
-    stackCraftNavigate.mockClear()
+    mocks.stackCraftNavigate.mockClear()
   })
 
   it('should expose stack actions via the menu trigger', async () => {
diff --git a/frontend/src/pages/services/stack-actions-menu.tsx b/frontend/src/pages/services/stack-actions-menu.tsx
index 5bbb74a..05fe0cb 100644
--- a/frontend/src/pages/services/stack-actions-menu.tsx
+++ b/frontend/src/pages/services/stack-actions-menu.tsx
@@ -1,10 +1,9 @@
 import { createComponent, Shade } from '@furystack/shades'
 
 import type { MenuEntry } from '@furystack/shades-common-components'
-import { Button, Dropdown, Icon, icons, NotyService } from '@furystack/shades-common-components'
+import { Button, Dropdown, Icon, icons } from '@furystack/shades-common-components'
 
-import { stackCraftNavigate } from '../../components/app-routes.js'
-import { StacksApiClient } from '../../services/api-clients/stacks-api-client.js'
+import { runStackMenuAction, type StackMenuActionKey } from './run-stack-menu-action.js'
 
 type StackActionsMenuProps = {
   stackName: string
@@ -35,38 +34,12 @@ export const StackActionsMenu = Shade<StackActionsMenuProps>({
     ]
 
     const handleSelect = (key: string) => {
-      if (key === 'edit') {
-        stackCraftNavigate(injector, {
-          path: '/stacks/:stackName/edit',
-          params: { stackName: props.stackName },
-        })
-        return
-      }
-      if (key === 'export') {
-        stackCraftNavigate(injector, {
-          path: '/stacks/:stackName/export',
-          params: { stackName: props.stackName },
-        })
-        return
-      }
       if (key === 'setup-all') {
         setIsSetupRunning(true)
-        void injector
-          .get(StacksApiClient)
-          .call({
-            method: 'POST',
-            action: '/stacks/:id/setup',
-            url: { id: props.stackName },
-          })
-          .catch((error: unknown) => {
-            injector.get(NotyService).emit('onNotyAdded', {
-              title: 'Batch setup failed',
-              body: error instanceof Error ? error.message : 'Setup error',
-              type: 'error',
-            })
-          })
-          .finally(() => setIsSetupRunning(false))
+        void runStackMenuAction(injector, props.stackName, key).finally(() => setIsSetupRunning(false))
+        return
       }
+      void runStackMenuAction(injector, props.stackName, key as StackMenuActionKey)
     }
 
     return (
diff --git a/frontend/src/utils/bulk-service-actions.spec.ts b/frontend/src/utils/bulk-service-actions.spec.ts
new file mode 100644
index 0000000..d288bcf
--- /dev/null
+++ b/frontend/src/utils/bulk-service-actions.spec.ts
@@ -0,0 +1,108 @@
+import { createInjector } from '@furystack/inject'
+import { NotyService } from '@furystack/shades-common-components'
+import { describe, expect, it, vi } from 'vitest'
+import type { ServiceView } from 'common'
+
+import { ServicesApiClient } from '../services/api-clients/services-api-client.js'
+import { runBulkServiceAction } from './bulk-service-actions.js'
+
+const baseService: ServiceView = {
+  id: 'svc-1',
+  serviceId: 'svc-1',
+  stackName: 'stack-1',
+  displayName: 'Service One',
+  description: '',
+  runCommand: 'npm start',
+  prerequisiteIds: [],
+  prerequisiteServiceIds: [],
+  files: [],
+  autoFetchEnabled: false,
+  autoFetchIntervalMinutes: 60,
+  autoRestartOnFetch: false,
+  environmentVariableOverrides: {},
+  localFiles: [],
+  cloneStatus: 'cloned',
+  installStatus: 'installed',
+  buildStatus: 'built',
+  runStatus: 'stopped',
+  repositoryId: 'repo-1',
+  createdAt: '',
+  updatedAt: '',
+}
+
+describe('runBulkServiceAction', () => {
+  it('should start only stopped ready services', async () => {
+    const call = vi.fn().mockResolvedValueOnce({}).mockRejectedValueOnce(new Error('fail'))
+    const notyEmit = vi.fn()
+    const injector = createInjector()
+    injector.bind(ServicesApiClient, () => ({ call }))
+    injector.bind(NotyService, () => ({ emit: notyEmit }) as unknown as NotyService)
+
+    const services: ServiceView[] = [
+      { ...baseService, id: 'a', runStatus: 'stopped' },
+      { ...baseService, id: 'b', runStatus: 'running' },
+      { ...baseService, id: 'c', runStatus: 'stopped', displayName: 'Broken' },
+    ]
+
+    await runBulkServiceAction(injector, services, 'start')
+
+    expect(call).toHaveBeenCalledTimes(2)
+    expect(call).toHaveBeenCalledWith({
+      method: 'POST',
+      action: '/services/:id/start',
+      url: { id: 'a' },
+    })
+    expect(notyEmit).toHaveBeenCalledWith('onNotyAdded', {
+      title: 'Start failed',
+      body: 'Failed for: Broken',
+      type: 'error',
+    })
+  })
+
+  it('should stop only running services', async () => {
+    const call = vi.fn().mockResolvedValue({})
+    const injector = createInjector()
+    injector.bind(ServicesApiClient, () => ({ call }))
+    injector.bind(NotyService, () => ({ emit: vi.fn() }) as unknown as NotyService)
+
+    await runBulkServiceAction(
+      injector,
+      [
+        { ...baseService, id: 'a', runStatus: 'running' },
+        { ...baseService, id: 'b', runStatus: 'stopped' },
+      ],
+      'stop',
+    )
+
+    expect(call).toHaveBeenCalledOnce()
+    expect(call).toHaveBeenCalledWith({
+      method: 'POST',
+      action: '/services/:id/stop',
+      url: { id: 'a' },
+    })
+  })
+
+  it('should update only cloned services with a repository', async () => {
+    const call = vi.fn().mockResolvedValue({})
+    const injector = createInjector()
+    injector.bind(ServicesApiClient, () => ({ call }))
+    injector.bind(NotyService, () => ({ emit: vi.fn() }) as unknown as NotyService)
+
+    await runBulkServiceAction(
+      injector,
+      [
+        { ...baseService, id: 'a' },
+        { ...baseService, id: 'b', cloneStatus: 'not-cloned' },
+        { ...baseService, id: 'c', repositoryId: undefined },
+      ],
+      'update',
+    )
+
+    expect(call).toHaveBeenCalledOnce()
+    expect(call).toHaveBeenCalledWith({
+      method: 'POST',
+      action: '/services/:id/update',
+      url: { id: 'a' },
+    })
+  })
+})
diff --git a/frontend/src/utils/bulk-service-actions.ts b/frontend/src/utils/bulk-service-actions.ts
new file mode 100644
index 0000000..549d931
--- /dev/null
+++ b/frontend/src/utils/bulk-service-actions.ts
@@ -0,0 +1,56 @@
+import type { Injector } from '@furystack/inject'
+import { NotyService } from '@furystack/shades-common-components'
+import type { ServiceView } from 'common'
+
+import { ServicesApiClient } from '../services/api-clients/services-api-client.js'
+import { isServiceReady } from './is-service-ready.js'
+
+type BulkServiceAction = 'start' | 'stop' | 'update'
+
+const actionFailureTitle: Record<BulkServiceAction, string> = {
+  start: 'Start failed',
+  stop: 'Stop failed',
+  update: 'Update failed',
+}
+
+const shouldIncludeService = (svc: ServiceView, action: BulkServiceAction): boolean => {
+  if (action === 'start') return isServiceReady(svc) && svc.runStatus === 'stopped'
+  if (action === 'stop') return svc.runStatus === 'running'
+  return Boolean(svc.repositoryId && svc.cloneStatus === 'cloned')
+}
+
+/**
+ * Runs a bulk start, stop, or update across the given services. Failures are
+ * collected and reported via a single error Noty; one failure does not abort
+ * the rest.
+ */
+export const runBulkServiceAction = async (
+  injector: Injector,
+  services: readonly ServiceView[],
+  action: BulkServiceAction,
+): Promise<void> => {
+  const api = injector.get(ServicesApiClient)
+  const noty = injector.get(NotyService)
+  const targets = services.filter((svc) => shouldIncludeService(svc, action))
+  const failures: string[] = []
+
+  for (const svc of targets) {
+    try {
+      await api.call({
+        method: 'POST',
+        action: `/services/:id/${action}`,
+        url: { id: svc.id },
+      })
+    } catch {
+      failures.push(svc.displayName)
+    }
+  }
+
+  if (failures.length > 0) {
+    noty.emit('onNotyAdded', {
+      title: actionFailureTitle[action],
+      body: `Failed for: ${failures.join(', ')}`,
+      type: 'error',
+    })
+  }
+}
diff --git a/frontend/src/utils/stack-status.spec.ts b/frontend/src/utils/stack-status.spec.ts
index b5744cc..efc2046 100644
--- a/frontend/src/utils/stack-status.spec.ts
+++ b/frontend/src/utils/stack-status.spec.ts
@@ -2,7 +2,7 @@
 import { describe, expect, it } from 'vitest'
 import type { ServiceView } from 'common'
 
-import { getStackRunSummary, getStackStatusPaletteKey } from './stack-status.js'
+import { getStackRunSummary, getStackStatusPaletteKey, formatStackRunSummaryTooltip } from './stack-status.js'
 
 const baseService: ServiceView = {
   id: 'svc-1',
@@ -92,3 +92,15 @@ describe('getStackStatusPaletteKey', () => {
     expect(getStackStatusPaletteKey('empty')).toBe('secondary')
   })
 })
+
+describe('formatStackRunSummaryTooltip', () => {
+  it('should describe transitional counts in the tooltip', () => {
+    const summary = getStackRunSummary([
+      { ...baseService, id: 'a', runStatus: 'running' },
+      { ...baseService, id: 'b', runStatus: 'starting' },
+      { ...baseService, id: 'c', runStatus: 'stopped' },
+    ])
+
+    expect(formatStackRunSummaryTooltip(summary)).toBe('1 running, 1 starting/stopping, 1 stopped')
+  })
+})
diff --git a/frontend/src/utils/stack-status.ts b/frontend/src/utils/stack-status.ts
index 5c543d4..3e246f4 100644
--- a/frontend/src/utils/stack-status.ts
+++ b/frontend/src/utils/stack-status.ts
@@ -54,3 +54,26 @@ export const getStackStatusPaletteKey = (status: StackRunSummaryStatus): keyof P
       return 'secondary'
   }
 }
+
+/** Human-readable tooltip for sidebar / dashboard status indicators. */
+export const formatStackRunSummaryTooltip = (summary: StackRunSummary): string => {
+  if (summary.total === 0) {
+    return 'No services'
+  }
+
+  const parts: string[] = []
+  if (summary.running > 0) {
+    parts.push(`${summary.running} running`)
+  }
+  if (summary.transitional > 0) {
+    parts.push(`${summary.transitional} starting/stopping`)
+  }
+  if (summary.stopped > 0) {
+    parts.push(`${summary.stopped} stopped`)
+  }
+  if (summary.error > 0) {
+    parts.push(`${summary.error} error`)
+  }
+
+  return parts.join(', ')
+}