0.36.0: per-stack image-update indicator on the Stacks overview

Shows an amber "Update" pill next to a stack's status (and highlights the
inline Update button) when any of the stack's images has a newer digest in
the registry. Reuses the existing background image-update check — a new
update_service.stacks_update_summary() reads the cached digests in a single
container sweep (no extra registry calls), exposed as GET /api/stacks/updates
and proxied per agent at GET /api/agents/{id}/stacks/updates. The Stacks page
and each remote-host section poll it every 60s.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/api/agents.ts

@@ -1,5 +1,5 @@
 import api from "./client";
-import type { Agent, StackDetail, StackStats, StackSummary } from "@/types";
+import type { Agent, StackDetail, StackStats, StackSummary, StackUpdateInfo } from "@/types";
 
 export type RemoteStackSummary = StackSummary & { agent_id: number; agent_name: string };
 export type RemoteStackDetail = StackDetail & { agent_id: number; agent_name: string };
@@ -35,6 +35,10 @@ export const agentsApi = {
     api.get<RemoteStackSummary[]>(`/api/agents/${id}/stacks`).then((r) => r.data),
   stackStats: (id: number) =>
     api.get<Record<string, StackStats>>(`/api/agents/${id}/stacks/stats`).then((r) => r.data),
+  stackUpdates: (id: number) =>
+    api
+      .get<Record<string, StackUpdateInfo>>(`/api/agents/${id}/stacks/updates`)
+      .then((r) => r.data),
   createStack: (id: number, body: { name: string; yaml: string; env?: string }) =>
     api
       .post<{ id: string; name: string }>(`/api/agents/${id}/stacks`, body)

frontend/src/api/stacks.ts

@@ -1,9 +1,11 @@
 import api from "./client";
-import type { StackDetail, StackStats, StackSummary } from "@/types";
+import type { StackDetail, StackStats, StackSummary, StackUpdateInfo } from "@/types";
 
 export const stacksApi = {
   list: () => api.get<StackSummary[]>("/api/stacks").then((r) => r.data),
   stats: () => api.get<Record<string, StackStats>>("/api/stacks/stats").then((r) => r.data),
+  updates: () =>
+    api.get<Record<string, StackUpdateInfo>>("/api/stacks/updates").then((r) => r.data),
   get: (id: string) =>
     api.get<StackDetail>(`/api/stacks/${id}`).then((r) => r.data),
   create: (body: { name: string; description?: string; yaml?: string; env?: string }) =>

frontend/src/components/stacks/AgentStacksSection.tsx

@@ -33,6 +33,12 @@ export function AgentStacksSection({ agent, isAdmin }: { agent: Agent; isAdmin:
     enabled: online,
     refetchInterval: 30000,
   });
+  const updates = useQuery({
+    queryKey: ["agent-stack-updates", agent.id],
+    queryFn: () => agentsApi.stackUpdates(agent.id),
+    enabled: online,
+    refetchInterval: 60000,
+  });
 
   const run = async (action: string, label: string, id: string) => {
     setBusyId(id);
@@ -72,6 +78,7 @@ export function AgentStacksSection({ agent, isAdmin }: { agent: Agent; isAdmin:
         <StacksTable
           stacks={stacks.data}
           stats={stats.data}
+          updates={updates.data}
           hostCpus={sys.data?.cpu_cores ?? 0}
           hostMem={sys.data?.mem_total ?? 0}
           isAdmin={isAdmin}

frontend/src/components/stacks/StacksTable.tsx

@@ -8,13 +8,14 @@ import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { formatBytes } from "@/lib/utils";
 import { stacksApi } from "@/api/stacks";
 import { apiErrorMessage } from "@/api/client";
-import type { StackStats, StackSummary } from "@/types";
+import type { StackStats, StackSummary, StackUpdateInfo } from "@/types";
 
 /** Stack list rendered as a table with live CPU/memory usage meters and inline
  *  start/stop/restart, shared by the Dashboard and the Stacks page. */
 export function StacksTable({
   stacks,
   stats,
+  updates,
   hostCpus,
   hostMem,
   isAdmin,
@@ -31,6 +32,7 @@ export function StacksTable({
 }: {
   stacks: StackSummary[] | undefined;
   stats: Record<string, StackStats> | undefined;
+  updates?: Record<string, StackUpdateInfo>;
   hostCpus: number;
   hostMem: number;
   isAdmin: boolean;
@@ -70,6 +72,7 @@ export function StacksTable({
               key={s.id}
               stack={s}
               stats={stats?.[s.id]}
+              update={updates?.[s.id]}
               hostCpus={hostCpus}
               hostMem={hostMem}
               isAdmin={isAdmin}
@@ -92,6 +95,7 @@ export function StacksTable({
 function StackRow({
   stack,
   stats,
+  update,
   hostCpus,
   hostMem,
   isAdmin,
@@ -106,6 +110,7 @@ function StackRow({
 }: {
   stack: StackSummary;
   stats?: StackStats;
+  update?: StackUpdateInfo;
   hostCpus: number;
   hostMem: number;
   isAdmin: boolean;
@@ -120,6 +125,7 @@ function StackRow({
 }) {
   const qc = useQueryClient();
   const running = stack.running_count > 0;
+  const updateAvailable = update?.update_available ?? false;
   const canDelete = showDelete && !stack.agent_id;
   const [confirming, setConfirming] = useState(false);
   const [deleting, setDeleting] = useState(false);
@@ -149,6 +155,18 @@ function StackRow({
           <span className="text-xs text-slate-400">
             {stack.running_count}/{stack.service_count} svc
           </span>
+          {updateAvailable && (
+            <span
+              title={
+                update?.stale_images?.length
+                  ? `Image update available:\n${update.stale_images.join("\n")}`
+                  : "An image update is available for this stack"
+              }
+              className="inline-flex items-center gap-1 rounded-pill border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[11px] font-semibold text-amber-600 dark:text-amber-400"
+            >
+              <ArrowUpCircle className="h-3 w-3" /> Update
+            </span>
+          )}
         </Link>
       </td>
       <td className="px-4 py-2.5">
@@ -201,13 +219,22 @@ function StackRow({
               </IconBtn>
             )}
             {onUpdate && (
-              <IconBtn
-                title="Update (pull latest images & recreate)"
+              <button
+                title={
+                  updateAvailable
+                    ? "Image update available — pull latest images & recreate"
+                    : "Update (pull latest images & recreate)"
+                }
                 onClick={() => onUpdate(stack.id)}
                 disabled={busy}
+                className={
+                  updateAvailable
+                    ? "rounded-lg p-1.5 text-amber-600 hover:bg-amber-100 disabled:opacity-40 dark:text-amber-400 dark:hover:bg-amber-500/20"
+                    : "rounded-lg p-1.5 text-slate-500 hover:bg-slate-100 disabled:opacity-40 dark:hover:bg-slate-700"
+                }
               >
                 <ArrowUpCircle className="h-4 w-4" />
-              </IconBtn>
+              </button>
             )}
             {showEdit && (
               <Link

frontend/src/pages/Stacks.tsx

@@ -43,6 +43,11 @@ export function Stacks() {
     queryFn: stacksApi.stats,
     refetchInterval: 5000,
   });
+  const updates = useQuery({
+    queryKey: ["stack-updates"],
+    queryFn: stacksApi.updates,
+    refetchInterval: 60000,
+  });
   const info = useQuery({
     queryKey: ["system"],
     queryFn: systemApi.info,
@@ -127,6 +132,7 @@ export function Stacks() {
         <StacksTable
           stacks={filtered}
           stats={stats.data}
+          updates={updates.data}
           hostCpus={info.data?.cpu_cores ?? 0}
           hostMem={info.data?.ram.total ?? 0}
           isAdmin={isAdmin}

frontend/src/types/index.ts

@@ -20,6 +20,11 @@ export interface StackSummary {
   agent_name?: string;
 }
 
+export interface StackUpdateInfo {
+  update_available: boolean;
+  stale_images: string[];
+}
+
 export interface StackStats {
   cpu_used: number; // cores in use (1.0 = one full core)
   cpu_limit: number | null; // summed assigned CPU limit, or null