From eba5f9eda387a0cb0f8ad3a1ef98d4eaefc60560 Mon Sep 17 00:00:00 2001
From: Stan Runge <stan@stanrunge.dev>
Date: Sun, 25 Oct 2026 17:41:10 +0000
Subject: [PATCH] =?UTF-8?q?start:=20one-container=20stacks=20as=20a=20sing?=
 =?UTF-8?q?le=20row=20(project=20=C2=B7=20service),=20groups=20only=20for?=
 =?UTF-8?q?=20multi-container=20stacks;=20same=20memory=20units=20in=20row?=
 =?UTF-8?q?s=20and=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/start/+page.svelte | 112 +++++++++++++++++++++++++---------
 1 file changed, 84 insertions(+), 28 deletions(-)

diff --git a/src/routes/start/+page.svelte b/src/routes/start/+page.svelte
index 974864b..5887e94 100644
--- a/src/routes/start/+page.svelte
+++ b/src/routes/start/+page.svelte
@@ -528,36 +528,57 @@
 					</p>
 					<div class="stacks">
 						{#each containerGroups as g (g.key)}
-							<details
-								class="group stack"
-								open={!closedStacks[g.key]}
-								ontoggle={(e) => toggleStack(g.key, e.currentTarget.open)}
-							>
-								<summary
-									title={g.key
-										? `compose project ${g.key}`
-										: 'containers without a compose project'}
+							{#if g.items.length === 1 && g.key}
+								<!-- A one-container stack is a single row, not a group with one child. -->
+								{@const c = g.items[0]}
+								<div
+									class="stack solo"
+									title="{c.name} · {c.image} · {c.state}{c.health ? ` (${c.health})` : ''}"
 								>
-									<i class="dot {g.dot}"></i>
-									<span class="sname">{g.name}</span>
-									<small class={{ bad: g.up < g.items.length && g.dot !== 'off' }}
-										>{g.up}/{g.items.length}</small
+									<i class="dot {containerDot(c)}"></i>
+									<span class="sname"
+										>{g.name}{#if c.service && c.service !== g.name}<small>
+												· {c.service}</small
+											>{/if}</span
 									>
-									<span class="num">{g.cpu ? `${g.cpu.toFixed(2)}%` : ''}</span>
-									<span class="num">{g.mem ? bytes(g.mem) : ''}</span>
-								</summary>
-								<ul class="containers">
-									{#each g.items as c (c.name)}
-										<li title="{c.name} · {c.image} · {c.state}{c.health ? ` (${c.health})` : ''}">
-											<i class="dot {containerDot(c)}"></i>
-											<span class="name">{label(c)}</span>
-											{#if c.restarts}<span class="tag warn">↻{c.restarts}</span>{/if}
-											<span class="num">{c.cpu ?? ''}</span>
-											<span class="num">{c.mem ?? ''}</span>
-										</li>
-									{/each}
-								</ul>
-							</details>
+									{#if c.restarts}<span class="tag warn">↻{c.restarts}</span>{/if}
+									<span class="num">{c.cpu ?? ''}</span>
+									<span class="num">{c.mem ? bytes(memBytes(c.mem)) : ''}</span>
+								</div>
+							{:else}
+								<details
+									class="group stack"
+									open={!closedStacks[g.key]}
+									ontoggle={(e) => toggleStack(g.key, e.currentTarget.open)}
+								>
+									<summary
+										title={g.key
+											? `compose project ${g.key}`
+											: 'containers without a compose project'}
+									>
+										<i class="dot {g.dot}"></i>
+										<span class="sname">{g.name}</span>
+										<small class={{ bad: g.up < g.items.length && g.dot !== 'off' }}
+											>{g.up}/{g.items.length}</small
+										>
+										<span class="num">{g.cpu ? `${g.cpu.toFixed(2)}%` : ''}</span>
+										<span class="num">{g.mem ? bytes(g.mem) : ''}</span>
+									</summary>
+									<ul class="containers">
+										{#each g.items as c (c.name)}
+											<li
+												title="{c.name} · {c.image} · {c.state}{c.health ? ` (${c.health})` : ''}"
+											>
+												<i class="dot {containerDot(c)}"></i>
+												<span class="name">{label(c)}</span>
+												{#if c.restarts}<span class="tag warn">↻{c.restarts}</span>{/if}
+												<span class="num">{c.cpu ?? ''}</span>
+												<span class="num">{c.mem ? bytes(memBytes(c.mem)) : ''}</span>
+											</li>
+										{/each}
+									</ul>
+								</details>
+							{/if}
 						{/each}
 					</div>
 				{:else}
@@ -1006,6 +1027,40 @@
 		display: grid;
 		gap: 2px;
 	}
+	.stack.solo {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		/* line up with group headers, whose chevron sits where this padding is */
+		padding: 3px 6px 3px 18px;
+		border-radius: 6px;
+		border: 1px solid transparent;
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: var(--site-muted);
+		transition:
+			background 120ms ease,
+			border-color 120ms ease,
+			color 120ms ease;
+	}
+	.stack.solo:hover {
+		background: rgba(255, 255, 255, 0.04);
+		border-color: var(--line);
+		color: var(--site-text);
+	}
+	.stack.solo .dot {
+		margin-right: 0;
+	}
+	.stack.solo small {
+		opacity: 0.7;
+		text-transform: none;
+	}
+	.stack.solo .num {
+		font-size: 11px;
+		text-transform: none;
+		letter-spacing: 0;
+	}
 	.group.stack > summary {
 		align-items: center;
 		gap: 5px;
@@ -1024,6 +1079,7 @@
 	.group.stack > summary .dot {
 		margin-right: 0;
 	}
+	.stack.solo .sname,
 	.group.stack .sname {
 		flex: 1;
 		min-width: 0;