Polish agentic sidebar status indicators

Author: shaunandrews

apps/ui/src/components/sidebar-header/index.tsx

@@ -16,7 +16,6 @@ export function SidebarHeader( { onToggleSidebar }: Props ) {
 	const navigate = useNavigate();
 	return (
 		<div className={ `${ styles.root } ${ isFullscreen ? styles.fullscreen : '' }` }>
-			<span className={ styles.title }>{ __( 'Studio' ) }</span>
 			<div className={ styles.actions }>
 				<Menu.Root modal={ false }>
 					<Menu.Trigger

apps/ui/src/components/sidebar-header/style.module.css

@@ -1,11 +1,15 @@
 .root {
+	--sidebar-header-inline-end: calc(
+		var(--wpds-dimension-padding-2xl) - var(--wpds-dimension-padding-xs)
+	);
+
 	display: flex;
 	align-items: center;
 	gap: var(--wpds-dimension-padding-sm);
 	/* Leave room for macOS traffic lights at {20, 20} plus a visible gap.
 	   min-height is tuned so the flex-centered content lines up with the
 	   vertical center of the traffic lights. */
-	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl)
+	padding: var(--wpds-dimension-padding-sm) var(--sidebar-header-inline-end)
 		var(--wpds-dimension-padding-sm) 94px;
 	min-height: 46px;
 	-webkit-app-region: drag;
@@ -18,37 +22,22 @@
 }
 
 /* In macOS fullscreen the traffic lights are hidden, so reclaim the
-   padding that was reserved for them and align the title with the site
-   list entries below. The site list outer padding is `2xl` and its rows
-   now start flush with that edge (no row/button inline-start padding), so
-   the site label text starts at `2xl` from the sidebar edge. */
+   padding that was reserved for them. */
 .fullscreen {
-	padding-left: var(--wpds-dimension-padding-2xl);
-}
-
-.title {
-	flex: 1;
-	min-width: 0;
-	font-size: var(--wpds-typography-font-size-md);
-	font-weight: 600;
-	color: var(--wpds-color-fg-content-neutral);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	padding-left: var(--wpds-dimension-padding-lg);
 }
 
 .actions {
 	display: flex;
 	align-items: center;
+	margin-inline-start: auto;
 	/* Match the site-row action buttons (`.siteActions` in site-list), which
 	   sit flush with no gap. */
 	gap: 0;
-	opacity: 0.65;
-}
-
-.actions:hover,
-.actions:focus-within {
-	opacity: 1;
+	/* The site rows have their action rail tucked into the row padding. Pull
+	   the header buttons over by the row's inner padding so the create/toggle
+	   controls share those same trailing columns. */
+	margin-inline-end: calc(-1 * var(--wpds-dimension-padding-sm));
 }
 
 .popup {

apps/ui/src/components/site-icon/style.module.css

@@ -2,8 +2,8 @@
 	display: inline-grid;
 	box-sizing: border-box;
 	place-items: center;
-	width: 16px;
-	height: 16px;
+	width: var(--site-icon-size, 16px);
+	height: var(--site-icon-size, 16px);
 	border-radius: 4px;
 	background: radial-gradient(
 			circle at var(--site-icon-position-a),

apps/ui/src/components/site-list/index.tsx

@@ -167,7 +167,7 @@ function SessionItem( { session, isVisible }: { session: AiSessionSummary; isVis
 	return (
 		<li className={ styles.sessionItem }>
 			<SidebarButton
-				className={ clsx( styles.sessionLink, isRunning && styles.sessionLinkRunning ) }
+				className={ styles.sessionLink }
 				render={
 					<Link
 						to="/sessions/$sessionId"
@@ -188,9 +188,7 @@ function SessionItem( { session, isVisible }: { session: AiSessionSummary; isVis
 										className={ styles.sessionQuestionIndicator }
 										role="status"
 										aria-label={ __( 'Studio needs an answer.' ) }
-									>
-										?
-									</span>
+									/>
 								}
 							/>
 							<Tooltip.Popup positioner={ <Tooltip.Positioner side="top" /> }>
@@ -578,6 +576,7 @@ function SiteSection( {
 } ) {
 	const isStarting = useIsSiteStarting( group.site?.id );
 	const isStopping = useIsSiteStopping( group.site?.id );
+	const isStopped = !! group.site && ! group.site.running && ! isStarting;
 
 	return (
 		<section
@@ -597,6 +596,7 @@ function SiteSection( {
 						{ group.site ? (
 							<span className={ styles.siteIconSlot } aria-hidden="true">
 								<SiteIcon
+									className={ clsx( styles.siteIcon, isStopped && styles.siteIconStopped ) }
 									seed={ `${ group.site.id }:${ group.site.name }:${ group.site.path }` }
 									imageSrc={ group.site.siteIcon }
 								/>

apps/ui/src/components/site-list/style.module.css

@@ -1,15 +1,27 @@
 .root {
-	--site-list-row-height: 32px;
+	--site-list-row-height: 34px;
 	--site-list-row-background-hover: rgb(0 0 0 / 4%);
 	--site-list-row-background-active: rgb(0 0 0 / 7%);
-
-	/* Left padding matches the sidebar footer (user-menu) so
-	   the row highlight boxes share the same left edge as the rest of the
-	   sidebar chrome. The right side is smaller: rows carry `sm` of their
-	   own right padding, and `xl + sm` keeps the row icons (site status,
-	   actions) visually aligned with the header's drawer icon. */
-	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-xl)
-		var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
+	--site-list-row-leading-inset: var(--wpds-dimension-padding-xs);
+	--site-list-row-outer-inset: calc(
+		var(--wpds-dimension-padding-lg) - var(--site-list-row-leading-inset)
+	);
+	--site-list-icon-size: 18px;
+	--site-list-icon-gap: calc(var(--wpds-dimension-gap-sm) + 2px);
+	--site-list-chat-status-size: 14px;
+	--site-list-chat-status-offset-adjust: 2px;
+	--site-list-chat-status-offset: var(--site-list-row-leading-inset);
+	--site-list-pending-indicator-bg: color-mix(
+		in srgb,
+		var(--wpds-color-bg-interactive-error-strong) 34%,
+		var(--wpds-color-bg-surface-caution)
+	);
+	--site-list-pending-indicator-dot: var(--wpds-color-fg-content-error);
+
+	/* Pull the row shape slightly left, then add the inset back inside rows so
+	   icons and labels keep their column while selected rows have breathing room. */
+	padding: 0 var(--site-list-row-outer-inset) var(--wpds-dimension-padding-xl)
+		var(--site-list-row-outer-inset);
 	display: flex;
 	flex-direction: column;
 	gap: var(--wpds-dimension-padding-sm);
@@ -20,13 +32,15 @@
 	.root {
 		--site-list-row-background-hover: rgb(255 255 255 / 8%);
 		--site-list-row-background-active: rgb(255 255 255 / 12%);
+		--site-list-pending-indicator-bg: #facc15;
+		--site-list-pending-indicator-dot: #422006;
 	}
 }
 
 .sites {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: 0;
 }
 
 .site {
@@ -41,12 +55,10 @@
 	min-width: 0;
 	box-sizing: border-box;
 	height: var(--site-list-row-height);
-	/* No inline-start padding: the row's leading content (site icon / title)
-	   sits flush with the sidebar content edge (`.root`'s 2xl inline padding),
-	   lining the title up with the macOS window traffic lights. The button
-	   inside (`.siteToggle`) also drops its inline-start padding to match. */
+	/* The row shape extends left of the content column; this padding keeps the
+	   icon/title column aligned while giving selected rows breathing room. */
 	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm)
-		var(--wpds-dimension-padding-xs) 0;
+		var(--wpds-dimension-padding-xs) var(--site-list-row-leading-inset);
 	border-radius: 6px;
 }
 
@@ -72,30 +84,19 @@
 	display: inline-grid;
 	place-items: center;
 	flex-shrink: 0;
-	inline-size: 0;
-	margin-inline-end: 0;
-	opacity: 0;
-	transform: translateX(-4px) scale(0.75);
-	transform-origin: left center;
+	inline-size: var(--site-list-icon-size);
+	/* The footer gravatar is 20px wide while site icons are 18px, so the extra
+	   2px lives after the icon to keep titles aligned with the display name. */
+	margin-inline-end: var(--site-list-icon-gap);
 	overflow: hidden;
-	transition: inline-size 120ms ease, margin-inline-end 120ms ease, opacity 120ms ease,
-		transform 120ms ease;
 }
 
-.siteActive .siteIconSlot {
-	inline-size: 16px;
-	/* Gap between the site icon and its title. Kept in sync with the chat-row
-	   indent below (`.sessionLink` padding-inline-start), which carries the same
-	   +4px so chat labels stay aligned under the site title. */
-	margin-inline-end: calc(var(--wpds-dimension-padding-xs) + 4px);
-	opacity: 1;
-	transform: translateX(0) scale(1);
+.siteIcon {
+	--site-icon-size: var(--site-list-icon-size);
 }
 
-@media (prefers-reduced-motion: reduce) {
-	.siteIconSlot {
-		transition: none;
-	}
+.siteIconStopped {
+	opacity: 0.5;
 }
 
 .siteName {
@@ -371,7 +372,7 @@
 	margin: 0;
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
+	gap: 0;
 }
 
 .sessionItem {
@@ -388,15 +389,18 @@
 	--wp-ui-button-border-color-active: transparent;
 	--wp-ui-button-height: var(--site-list-row-height);
 
+	position: relative;
 	width: 100%;
 	box-sizing: border-box;
 	height: var(--site-list-row-height);
-	/* Chat labels align under the active site's title text. The site row now
-	   starts flush with the sidebar edge, and its title begins one icon width
-	   (16px) plus the icon→title gap past that edge — so this indent mirrors
-	   `.siteActive .siteIconSlot`'s inline-size + margin-inline-end. */
+	/* Chat labels align under the parent site's title text and the footer
+	   display name while the row shape extends left for the status indicator. */
 	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm)
-		var(--wpds-dimension-padding-xs) calc(16px + var(--wpds-dimension-padding-xs) + 4px);
+		var(--wpds-dimension-padding-xs)
+		calc(
+			var(--site-list-row-leading-inset) + var(--site-list-icon-size) +
+				var(--site-list-icon-gap)
+		);
 	border-radius: 6px;
 	background-color: var(--session-link-background);
 	color: var(--wpds-color-fg-content-neutral-weak);
@@ -408,13 +412,10 @@
 	transition: color 80ms ease, background-color 80ms ease;
 }
 
-.sessionLinkRunning {
-	position: relative;
-}
-
 .sessionLabel {
 	flex: 1;
 	min-width: 0;
+	font-weight: var(--wpds-typography-font-weight-regular);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -434,31 +435,57 @@
 	transition: opacity 100ms ease;
 }
 
-/* The running spinner and question indicator sit in the indent gutter to
-   the left of the chat label. */
+/* The running spinner and question indicator sit inside the active row shape,
+   inset from its edge while the chat label keeps its shared title column. */
 .sessionInlineSpinner {
+	--spinner-size: var(--site-list-chat-status-size);
+
+	box-sizing: border-box;
 	position: absolute;
 	inset-block-start: 50%;
-	inset-inline-start: calc(var(--wpds-dimension-padding-sm) + 6px);
-	margin-block-start: -6px;
+	inset-inline-start: calc(
+		var(--site-list-chat-status-offset) + var(--site-list-chat-status-offset-adjust)
+	);
+	inline-size: var(--site-list-chat-status-size);
+	block-size: var(--site-list-chat-status-size);
+	margin-block-start: calc(var(--site-list-chat-status-size) / -2);
 }
 
 .sessionQuestionIndicator {
 	position: absolute;
 	inset-block-start: 50%;
-	inset-inline-start: calc(var(--wpds-dimension-padding-sm) + 4px);
+	inset-inline-start: calc(
+		var(--site-list-chat-status-offset) + var(--site-list-chat-status-offset-adjust)
+	);
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	inline-size: 16px;
-	block-size: 16px;
-	border-radius: 50%;
-	background-color: #facc15;
-	color: #422006;
-	font-size: 11px;
-	font-weight: 700;
-	line-height: 1;
+	inline-size: var(--site-list-chat-status-size);
+	block-size: var(--site-list-chat-status-size);
 	transform: translateY(-50%);
+	isolation: isolate;
+}
+
+.sessionQuestionIndicator::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	clip-path: path(
+		'M 7 1.7 C 7.55 1.7 8.05 2 8.3 2.5 L 12.8 11.8 C 13.2 12.65 12.6 13.2 11.75 13.2 L 2.25 13.2 C 1.4 13.2 0.8 12.65 1.2 11.8 L 5.7 2.5 C 5.95 2 6.45 1.7 7 1.7 Z'
+	);
+	background-color: var(--site-list-pending-indicator-bg);
+}
+
+.sessionQuestionIndicator::after {
+	content: '';
+	position: absolute;
+	inset-block-start: calc(58% - 1.5px);
+	inset-inline-start: calc(50% - 1.5px);
+	inline-size: 3px;
+	block-size: 3px;
+	border-radius: 50%;
+	background-color: var(--site-list-pending-indicator-dot);
 }
 
 .sessionLink:hover,

apps/ui/src/components/spinner/style.module.css

@@ -1,7 +1,7 @@
 .spinner {
 	display: inline-block;
-	width: 12px;
-	height: 12px;
+	width: var(--spinner-size, 12px);
+	height: var(--spinner-size, 12px);
 	border: 2px solid var(--wpds-color-stroke-surface-neutral);
 	border-top-color: var(--wpds-color-fg-interactive-brand, #2563eb);
 	border-radius: 50%;

apps/ui/src/components/user-menu/style.module.css

@@ -1,8 +1,17 @@
 /* Pinning to the sidebar bottom is handled by the layout's
    `sidebarFooter` wrapper. */
 .root {
-	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl)
-		var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
+	--user-menu-leading-offset: calc(
+		var(--wpds-dimension-padding-lg) - var(--wpds-dimension-padding-sm)
+	);
+	--user-menu-trailing-offset: calc(
+		var(--wpds-dimension-padding-2xl) - var(--wpds-dimension-padding-xs)
+	);
+
+	/* SidebarButton adds `sm` inline padding; this offset puts the gravatar's
+	   left edge on the same column as the site icons. */
+	padding: var(--wpds-dimension-padding-sm) var(--user-menu-trailing-offset)
+		var(--wpds-dimension-padding-xl) var(--user-menu-leading-offset);
 }
 
 .row {
@@ -17,6 +26,10 @@
 	color: var(--wpds-color-fg-content-neutral-weak);
 }
 
+.themeToggle {
+	margin-inline-end: calc(-1 * var(--wpds-dimension-padding-sm));
+}
+
 .row:hover .userName,
 .row:hover .themeToggle,
 .row:hover .settingsButton,
@@ -27,8 +40,12 @@
 }
 
 .userTrigger {
+	--user-menu-avatar-offset: 2px;
+
 	flex: 1;
 	font-weight: var(--wpds-typography-font-weight-regular);
+	gap: calc(var(--wpds-dimension-gap-sm) + var(--user-menu-avatar-offset));
+	padding-inline-start: calc(var(--wpds-dimension-padding-sm) - var(--user-menu-avatar-offset));
 }
 
 .userName {