Fix sub-agent row clipping and add a connected-agent callout

apps/web/src/components/app/agent-card-actions.tsx

@@ -93,8 +93,8 @@ export function AgentCardActions({
             variant="ghost"
             className="h-8 w-8 rounded-full border border-blue-500/35 bg-blue-500/10 p-0 text-blue-400 hover:bg-blue-500/15 hover:text-blue-300"
             data-testid={`agent-session-settings-${agent.id}`}
-            aria-label="Edit session settings"
-            title="Edit session settings"
+            aria-label="Session details"
+            title="Session details"
             onClick={onEditSettings}
           >
             <Pencil className="h-3.5 w-3.5" />

apps/web/src/components/app/agent-card.tsx

@@ -224,7 +224,11 @@ export function AgentCard({
                         {childAgents.length}
                       </span>
                     </div>
-                    <ScrollArea className="max-h-56" type="always">
+                    <ScrollArea
+                      className="max-h-56"
+                      type="always"
+                      fitContentWidth
+                    >
                       <div className="space-y-1 pr-2">
                         {childAgents.map((child) => (
                           <ChildAgentRow
@@ -235,7 +239,6 @@ export function AgentCard({
                               child.role === "review" &&
                               child.submittedReviewId == null
                             }
-                            isConnected={connectedAgentId === child.id}
                             attachToAgent={attachToAgent}
                             detachTerminal={detachTerminal}
                             startAgent={startAgent}
@@ -278,13 +281,15 @@ export function AgentCard({
         agent={agent}
         open={settingsOpen}
         onOpenChange={setSettingsOpen}
+        enabledIdes={enabledIdes}
       />
       <SessionSettingsDialog
         agent={settingsChild}
         open={settingsChild !== null}
         onOpenChange={(open) => {
           if (!open) setSettingsChild(null);
         }}
+        enabledIdes={enabledIdes}
       />
     </React.Fragment>
   );

apps/web/src/components/app/agent-event-utils.ts

@@ -17,3 +17,37 @@ export function latestEventColor(type: EventType): string {
   if (type === "done") return "text-status-done";
   return "text-foreground/80";
 }
+
+/**
+ * The row's own current-status label/color — "Stopped"/"Error" when the
+ * agent isn't actively running, otherwise the latest event's own
+ * label/color. `isStopped` is a caller-supplied condition (rather than
+ * derived here from `agent.status`) so it can key off whatever "stopped"
+ * means in context — e.g. ChildAgentRow's `state === "stopped"`, which
+ * covers more than a literal `status === "stopped"`.
+ *
+ * This exists because the event's own label/color describes the latest
+ * EVENT, not the agent's current status — a stopped or errored agent can
+ * still have a stale "Working" event, which would otherwise render in the
+ * active-work color even though the agent isn't running anymore.
+ */
+export function describeAgentStatus(
+  agent: Pick<Agent, "status" | "latestEvent">,
+  isStopped: boolean
+): { label: string; colorClass: string } {
+  const label =
+    agent.status === "error"
+      ? "Error"
+      : isStopped
+        ? "Stopped"
+        : agent.latestEvent
+          ? latestEventLabel(agent.latestEvent.type)
+          : "Running";
+  const colorClass =
+    agent.status === "error"
+      ? "text-status-blocked"
+      : agent.latestEvent && !isStopped
+        ? latestEventColor(agent.latestEvent.type)
+        : "text-muted-foreground";
+  return { label, colorClass };
+}