Phase 13: multi-host networks & images (0.14.0)

Networks and Images are now per-host, rendered as a section for the local host
plus one per registered agent (like the Stacks page).

- agent_app.py: new /agent/networks (list/inspect/containers/connect/disconnect/
  create/delete/prune) and /agent/images (list/updates/check), reusing
  network_service and a new image_service; DockerError mapped to HTTP status
  (forbidden -> 400 so the proxy doesn't treat it as a token failure).
- routers/agents.py: proxy routes at /api/agents/{id}/networks/* and
  /api/agents/{id}/images/*, audit-logging mutations.
- services/image_service.py: extracted the image-listing logic so the central
  router and the agent share it.
- Frontend: networksApi/imagesApi take an optional agentId; Networks/Images
  pages render NetworksSection/ImagesSection per host with a shared HostHeader.
  Remote "Prune unused" networks resolves the address-pool-exhaustion deploy
  error from the UI.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
menzelj
2026-06-08 11:52:53 +00:00
co-authored by Claude Opus 4.8
parent 4bc0fb8901
commit 012614f5fb
13 changed files with 683 additions and 212 deletions
@@ -0,0 +1,30 @@
import type { ReactNode } from "react";
import { HardDrive, Server } from "lucide-react";
import { HostDot } from "@/components/hosts/HostDot";
import type { Agent } from "@/types";
/**
* Section header for a host (local or a remote agent). `children` is rendered
* on the right for per-host action buttons.
*/
export function HostHeader({
agent,
children,
}: {
agent?: Agent;
children?: ReactNode;
}) {
return (
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
<h2 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
{agent ? <Server className="h-4 w-4" /> : <HardDrive className="h-4 w-4" />}
{agent ? agent.name : "This host"}
{agent && <HostDot status={agent.status} />}
{agent?.hostname && (
<span className="font-mono text-xs normal-case text-slate-400">{agent.hostname}</span>
)}
</h2>
<div className="flex flex-wrap gap-2">{children}</div>
</div>
);
}