Show container image-update status from Dockhand

Dockhand already tracks per-container image updates internally (its
UI shows this) via a cached check plus an on-demand recheck -- surface
that here instead of only showing running/stopped state.

adapter.listContainers() now also reads GET /api/containers/pending-
updates per environment (a cached read, no registry hit) and merges
each container's hasImageUpdate/newerVersion/checkedAt onto it.
updateAvailable is a tri-state: true (update pending), false (checked,
up to date), or null (never checked) -- distinguishing "no update"
from "we don't know yet" matters since a container can sit unchecked
indefinitely until someone triggers a check.

New adapter.checkForUpdates() triggers a fresh check across every
environment (POST /api/containers/check-updates, one registry lookup
per container so this can take a while) and new POST /:id/dockhand/
check-updates route (operator+, matching the existing container
action's role gating).

Docker page: new "Update" column (badge + tooltip with the newer
version), an "updates available" count next to the running/total
count, and a "Check for updates" button. Dashboard's Dockhand widget
also gained an "Updates" mini-stat, swapped in for the less useful
"Not running" figure (already inferable from running/total).

Field names (hasImageUpdate, newerVersion, checkedAt, the check-
updates response shape) came from Dockhand's own published OpenAPI
spec, not guessed -- and verified against a local mock Dockhand server
covering all three update states (pending, up to date, never checked)
plus the check-updates aggregation across environments, since this
sandbox can't reach the user's real Dockhand instance.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/api/client.ts

@@ -374,6 +374,9 @@ export interface DockhandContainer {
   status: string;
   environmentId: number;
   environmentName: string;
+  updateAvailable: boolean | null;
+  newerVersion: string | null;
+  checkedAt: string | null;
 }
 
 export interface DockhandContainersResponse {
@@ -740,6 +743,10 @@ export const api = {
           `/api/integrations/${integrationId}/dockhand/environments/${envId}/containers/${encodeURIComponent(containerId)}/restart`,
           { method: "POST" },
         ),
+      checkForUpdates: (integrationId: number) =>
+        request<{ total: number; updatesFound: number }>(`/api/integrations/${integrationId}/dockhand/check-updates`, {
+          method: "POST",
+        }),
     },
     semaphore: {
       templates: (integrationId: number) =>

web/src/pages/Dashboard.tsx

@@ -201,6 +201,7 @@ interface DockhandSummary {
   running: number;
   total: number;
   hostCount: number;
+  updatesAvailable: number;
   stateBreakdown: { label: string; count: number }[];
 }
 
@@ -323,6 +324,7 @@ export default function Dashboard({ user }: { user: CurrentUser }) {
           running: res.summary.running,
           total: res.summary.total,
           hostCount: new Set(res.containers.map((c) => c.environmentName)).size,
+          updatesAvailable: res.containers.filter((c) => c.updateAvailable).length,
           stateBreakdown: breakdownFrom(res.containers, (c) => c.state),
         }),
       )
@@ -607,9 +609,9 @@ export default function Dashboard({ user }: { user: CurrentUser }) {
                         </div>
                         <div className="col-4">
                           <MiniStat
-                            label="Not running"
-                            value={dockhandSummary!.total - dockhandSummary!.running}
-                            accent={dockhandSummary!.total - dockhandSummary!.running > 0 ? "#f59e0b" : undefined}
+                            label="Updates"
+                            value={dockhandSummary!.updatesAvailable}
+                            accent={dockhandSummary!.updatesAvailable > 0 ? "#f59e0b" : undefined}
                           />
                         </div>
                       </div>

web/src/pages/Docker.tsx

@@ -11,6 +11,16 @@ import { useSortable } from "../hooks/useSortable";
 import SortableTh from "../components/SortableTh";
 import { downloadCsv } from "../utils/csv";
 
+function updateBadge(c: DockhandContainer) {
+  if (c.updateAvailable === null) return <span className="text-secondary">—</span>;
+  if (!c.updateAvailable) return <span className="badge bg-green-lt text-green">Up to date</span>;
+  return (
+    <span className="badge bg-yellow-lt text-yellow" title={c.newerVersion ?? undefined}>
+      Update available
+    </span>
+  );
+}
+
 function containerStateBadge(state: string) {
   switch (state) {
     case "running":
@@ -38,6 +48,7 @@ export default function Docker({ user }: { user: CurrentUser }) {
   const [loading, setLoading] = useState(false);
   const [actingOnContainer, setActingOnContainer] = useState<string | null>(null);
   const [hostFilter, setHostFilter] = useState("");
+  const [checkingUpdates, setCheckingUpdates] = useState(false);
 
   useEffect(() => {
     api.integrations
@@ -82,11 +93,32 @@ export default function Docker({ user }: { user: CurrentUser }) {
     if (!sorted) return;
     downloadCsv(
       "docker-containers.csv",
-      ["Container", "Host", "Image", "State", "Status"],
-      sorted.map((c) => [c.name, c.environmentName, c.image, c.state, c.status]),
+      ["Container", "Host", "Image", "State", "Status", "Update available"],
+      sorted.map((c) => [
+        c.name,
+        c.environmentName,
+        c.image,
+        c.state,
+        c.status,
+        c.updateAvailable === null ? "unknown" : c.updateAvailable ? "yes" : "no",
+      ]),
     );
   }
 
+  async function checkForUpdates() {
+    if (!selectedId) return;
+    setCheckingUpdates(true);
+    setError(null);
+    try {
+      await api.integrations.dockhand.checkForUpdates(selectedId);
+      loadContainers(selectedId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setCheckingUpdates(false);
+    }
+  }
+
   async function containerAction(c: DockhandContainer, action: "start" | "stop" | "restart") {
     if (!selectedId) return;
     if (action === "stop" && !confirm(`Stop container "${c.name}"?`)) return;
@@ -150,6 +182,11 @@ export default function Docker({ user }: { user: CurrentUser }) {
                       {data.summary.running}/{data.summary.total} running
                     </span>
                   )}
+                  {data && data.containers.filter((c) => c.updateAvailable).length > 0 && (
+                    <span className="text-yellow fw-normal ms-2">
+                      {data.containers.filter((c) => c.updateAvailable).length} update(s) available
+                    </span>
+                  )}
                 </h3>
                 <div className="card-actions d-flex gap-2">
                   {hosts.length > 1 && (
@@ -170,6 +207,11 @@ export default function Docker({ user }: { user: CurrentUser }) {
                   <button className="btn btn-sm btn-outline-secondary" onClick={exportCsv} disabled={!sorted || sorted.length === 0}>
                     Export CSV
                   </button>
+                  {canEdit && (
+                    <button className="btn btn-sm btn-outline-secondary" onClick={checkForUpdates} disabled={checkingUpdates}>
+                      {checkingUpdates ? "Checking…" : "Check for updates"}
+                    </button>
+                  )}
                   <button
                     className="btn btn-sm btn-outline-secondary"
                     onClick={() => selected && loadContainers(selected.id)}
@@ -193,6 +235,13 @@ export default function Docker({ user }: { user: CurrentUser }) {
                       />
                       <SortableTh<DockhandContainer> label="Image" sortKeyName="image" activeKey={sortKey} direction={sortDir} onSort={requestSort} />
                       <SortableTh<DockhandContainer> label="Status" sortKeyName="state" activeKey={sortKey} direction={sortDir} onSort={requestSort} />
+                      <SortableTh<DockhandContainer>
+                        label="Update"
+                        sortKeyName="updateAvailable"
+                        activeKey={sortKey}
+                        direction={sortDir}
+                        onSort={requestSort}
+                      />
                       {canEdit && <th className="w-1">Actions</th>}
                     </tr>
                   </thead>
@@ -206,6 +255,7 @@ export default function Docker({ user }: { user: CurrentUser }) {
                           {containerStateBadge(c.state)}
                           <div className="text-secondary small">{c.status}</div>
                         </td>
+                        <td>{updateBadge(c)}</td>
                         {canEdit && (
                           <td>
                             <div className="btn-list flex-nowrap">
@@ -242,7 +292,7 @@ export default function Docker({ user }: { user: CurrentUser }) {
                     ))}
                     {data && sorted?.length === 0 && (
                       <tr>
-                        <td colSpan={canEdit ? 5 : 4} className="text-secondary text-center">
+                        <td colSpan={canEdit ? 6 : 5} className="text-secondary text-center">
                           {hostFilter ? `No containers found on "${hostFilter}".` : "No containers found across any environment."}
                         </td>
                       </tr>