feat(containers): compose editor + compose tab improvements

frontend/messages/en.json

@@ -513,6 +513,13 @@
 	"container_hostname_placeholder": "my-hostname",
 	"container_domain_label": "Domain Name",
 	"container_domain_placeholder": "example.com",
+	"container_compose_gitops_managed_title": "GitOps Managed — Read Only",
+	"container_compose_gitops_managed_description": "This project is managed by GitOps ({provider}). The compose file is read-only and can only be changed via your Git repository.",
+	"container_compose_editing_info": "Editing {file} for project {project}. This container runs as the {service} service.",
+	"container_compose_viewing_info": "Viewing {file} for project {project}. This container runs as the {service} service.",
+	"container_compose_save_success": "Compose file saved successfully",
+	"container_compose_save_failed": "Failed to save compose file",
+	"container_compose_view_project": "View Project",
 	"tabs_environment": "Environment",
 	"tabs_volumes": "Volumes",
 	"tabs_network_security": "Network & Security",

frontend/src/lib/types/container.type.ts

@@ -165,6 +165,14 @@ export interface ContainerConfigDto {
 	user?: string;
 }
 
+export interface ComposeInfo {
+	projectName: string;
+	serviceName: string;
+	configFile?: string;
+	workingDir?: string;
+	projectDir?: string;
+}
+
 export interface ContainerDetailsDto {
 	id: string;
 	name: string;
@@ -178,6 +186,7 @@ export interface ContainerDetailsDto {
 	ports: ContainerPorts[];
 	mounts: ContainerMounts[];
 	labels: Record<string, string>;
+	composeInfo?: ComposeInfo;
 }
 
 // Container Stats Types

frontend/src/routes/(app)/containers/[containerId]/+page.svelte

@@ -22,6 +22,7 @@
 	import ContainerStorage from '../components/ContainerStorage.svelte';
 	import ContainerLogsPanel from '../components/ContainerLogsPanel.svelte';
 	import ContainerShell from '../components/ContainerShell.svelte';
+	import ContainerComposePanel from '../components/ContainerComposePanel.svelte';
 	import { createContainerStatsWebSocket, type ReconnectingWebSocket } from '$lib/utils/ws';
 	import { environmentStore } from '$lib/stores/environment.store.svelte';
 	import IconImage from '$lib/components/icon-image.svelte';
@@ -36,9 +37,11 @@
 		NetworksIcon,
 		TerminalIcon,
 		ContainersIcon,
-		StatsIcon
+		StatsIcon,
+		CodeIcon
 	} from '$lib/icons';
-
+	import { parse as parseYaml } from 'yaml';
+	import type { IncludeFile } from '$lib/types/project.type';
 	let { data } = $props();
 	let container = $derived(data?.container as ContainerDetailsDto);
 	let stats = $state(null as ContainerStatsType | null);
@@ -223,14 +226,51 @@
 	const showStats = $derived(!!container?.state?.running);
 	const showShell = $derived(!!container?.state?.running);
 
+	const project = $derived(data?.project ?? null);
+	const composeInfo = $derived(container?.composeInfo ?? null);
+	const composeServiceName = $derived(composeInfo?.serviceName ?? '');
+
+	// Find which file (root compose or an include file) directly defines this service.
+	// Returns { includeFile: null } for root compose, { includeFile: <file> } for a sub-file,
+	// or null if the service isn't found anywhere (hides the tab).
+	const serviceComposeSource = $derived(
+		(() => {
+			if (!project || !composeServiceName || !composeInfo) return null;
+
+			const hasService = (content: string): boolean => {
+				try {
+					const parsed = parseYaml(content) as Record<string, unknown> | null;
+					return !!(parsed?.services && (parsed.services as Record<string, unknown>)[composeServiceName]);
+				} catch {
+					return false;
+				}
+			};
+
+			if (project.composeContent && hasService(project.composeContent)) {
+				return { includeFile: null as IncludeFile | null };
+			}
+
+			for (const f of project.includeFiles ?? []) {
+				if (hasService(f.content)) {
+					return { includeFile: f };
+				}
+			}
+
+			return null;
+		})()
+	);
+
+	const showComposeTab = $derived(!!composeInfo && !!serviceComposeSource);
+
 	const tabItems = $derived<TabItem[]>([
 		{ value: 'overview', label: m.common_overview(), icon: ContainersIcon },
 		...(showStats ? [{ value: 'stats', label: m.containers_nav_metrics(), icon: StatsIcon }] : []),
 		{ value: 'logs', label: m.containers_nav_logs(), icon: FileTextIcon },
 		...(showShell ? [{ value: 'shell', label: m.common_shell(), icon: TerminalIcon }] : []),
 		...(showConfiguration ? [{ value: 'config', label: m.common_configuration(), icon: SettingsIcon }] : []),
 		...(showNetworkTab ? [{ value: 'network', label: m.containers_nav_networks(), icon: NetworksIcon }] : []),
-		...(hasMounts ? [{ value: 'storage', label: m.containers_nav_storage(), icon: VolumesIcon }] : [])
+		...(hasMounts ? [{ value: 'storage', label: m.containers_nav_storage(), icon: VolumesIcon }] : []),
+		...(showComposeTab ? [{ value: 'compose', label: 'Compose', icon: CodeIcon }] : [])
 	]);
 
 	$effect(() => {
@@ -384,6 +424,12 @@
 					<ContainerStorage {container} />
 				</Tabs.Content>
 			{/if}
+
+			{#if project && serviceComposeSource}
+				<Tabs.Content value="compose" class="h-full min-h-0">
+					<ContainerComposePanel {project} serviceName={composeServiceName} includeFile={serviceComposeSource.includeFile} />
+				</Tabs.Content>
+			{/if}
 		{/snippet}
 	</TabbedPageLayout>
 {:else}

frontend/src/routes/(app)/containers/[containerId]/+page.ts

@@ -2,6 +2,7 @@ import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';
 import { containerService } from '$lib/services/container-service';
 import { settingsService } from '$lib/services/settings-service';
+import { projectService } from '$lib/services/project-service';
 import { environmentStore } from '$lib/stores/environment.store.svelte';
 import { queryKeys } from '$lib/query/query-keys';
 
@@ -26,9 +27,30 @@ export const load: PageLoad = async ({ params, parent }) => {
 			throw error(404, 'Container not found');
 		}
 
+		let project = null;
+		const composeProjectName = container.composeInfo?.projectName;
+		if (composeProjectName) {
+			try {
+				const projectsResult = await projectService.getProjectsForEnvironment(envId, { 
+					search: composeProjectName,
+					pagination: { page: 1, limit: 100 }  // Ensure we don't miss projects beyond default page size
+				});
+				const matched = projectsResult.data.find((p) => p.name === composeProjectName);
+				if (matched) {
+					project = await queryClient.fetchQuery({
+						queryKey: queryKeys.projects.detail(envId, matched.id),
+						queryFn: () => projectService.getProjectForEnvironment(envId, matched.id)
+					});
+				}
+			} catch (err) {
+				console.warn('Failed to load compose project:', err);
+			}
+		}
+
 		return {
 			container,
-			settings
+			settings,
+			project
 		};
 	} catch (err: any) {
 		console.error('Failed to load container:', err);

frontend/src/routes/(app)/containers/components/ContainerComposePanel.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import * as Alert from '$lib/components/ui/alert/index.js';
+	import { ArcaneButton } from '$lib/components/arcane-button';
+	import CodePanel from '../../projects/components/CodePanel.svelte';
+	import { projectService } from '$lib/services/project-service';
+	import { toast } from 'svelte-sonner';
+	import type { Project, IncludeFile } from '$lib/types/project.type';
+	import { AlertIcon, ExternalLinkIcon } from '$lib/icons';
+	import * as m from '$lib/paraglide/messages';
+
+	let {
+		project,
+		serviceName,
+		includeFile = null
+	}: {
+		project: Project;
+		serviceName: string;
+		includeFile?: IncludeFile | null;
+	} = $props();
+
+	const sourceContent = $derived(includeFile ? includeFile.content : (project.composeContent ?? ''));
+
+	let composeContent = $state(sourceContent);
+	let isDirty = $state(false);
+
+	// Update composeContent when source changes (e.g., switching containers)
+	// Only if there are no unsaved edits
+	let prevSourceContent = $state(sourceContent);
+	$effect(() => {
+		if (sourceContent !== prevSourceContent && !isDirty) {
+			composeContent = sourceContent;
+			prevSourceContent = sourceContent;
+		}
+	});
+
+	// Track dirty state when content changes
+	$effect(() => {
+		isDirty = composeContent !== sourceContent;
+	});
+
+	let panelOpen = $state(true);
+	let isSaving = $state(false);
+
+	const isReadOnly = $derived(!!project.gitOpsManagedBy);
+	const fileTitle = $derived(includeFile ? includeFile.relativePath : 'compose.yml');
+
+	async function handleSave() {
+		isSaving = true;
+		try {
+			if (includeFile) {
+				await projectService.updateProjectIncludeFile(project.id, includeFile.relativePath, composeContent);
+			} else {
+				await projectService.updateProject(project.id, undefined, composeContent);
+			}
+			toast.success(m.container_compose_save_success());
+			isDirty = false;
+		} catch (err: any) {
+			toast.error(err?.message ?? m.container_compose_save_failed());
+		} finally {
+			isSaving = false;
+		}
+	}
+</script>
+
+<div class="flex h-full min-h-0 flex-col gap-4 p-4">
+	{#if project.gitOpsManagedBy}
+		<Alert.Root variant="default">
+			<AlertIcon class="size-4" />
+			<Alert.Title>{m.container_compose_gitops_managed_title()}</Alert.Title>
+			<Alert.Description>
+				{@html m.container_compose_gitops_managed_description({ provider: `<strong>${project.gitOpsManagedBy}</strong>` })}
+			</Alert.Description>
+		</Alert.Root>
+	{/if}
+
+	<div class="bg-muted flex items-start gap-2 rounded-lg border px-4 py-3 text-sm">
+		<span>
+			{@html isReadOnly
+				? m.container_compose_viewing_info({
+						file: `<strong>${fileTitle}</strong>`,
+						project: `<a href="/projects/${project.id}" class="text-primary font-medium hover:underline">${project.name}</a>`,
+						service: `<strong>${serviceName}</strong>`
+					})
+				: m.container_compose_editing_info({
+						file: `<strong>${fileTitle}</strong>`,
+						project: `<a href="/projects/${project.id}" class="text-primary font-medium hover:underline">${project.name}</a>`,
+						service: `<strong>${serviceName}</strong>`
+					})}
+		</span>
+	</div>
+
+	<div class="flex min-h-0 flex-1 flex-col">
+		<CodePanel
+			title={fileTitle}
+			bind:open={panelOpen}
+			language="yaml"
+			bind:value={composeContent}
+			readOnly={isReadOnly}
+			fileId="container-compose-{project.id}{includeFile ? `-${includeFile.relativePath}` : ''}"
+		/>
+	</div>
+
+	<div class="flex shrink-0 items-center gap-2">
+		{#if !isReadOnly}
+			<ArcaneButton action="save" loading={isSaving} onclick={handleSave} />
+		{/if}
+		<ArcaneButton
+			action="base"
+			href="/projects/{project.id}"
+			icon={ExternalLinkIcon}
+			customLabel={m.container_compose_view_project()}
+		/>
+	</div>
+</div>

types/container/container.go

@@ -634,6 +634,34 @@ type Summary struct {
 	UpdateInfo *imagetypes.UpdateInfo `json:"updateInfo,omitempty"`
 }
 
+// ComposeInfo contains Docker Compose project information extracted from container labels.
+type ComposeInfo struct {
+	// ProjectName is the name of the Docker Compose project.
+	//
+	// Required: true
+	ProjectName string `json:"projectName"`
+
+	// ServiceName is the name of the service within the Compose project.
+	//
+	// Required: true
+	ServiceName string `json:"serviceName"`
+
+	// ConfigFile is the path to the compose config file.
+	//
+	// Required: false
+	ConfigFile string `json:"configFile,omitempty"`
+
+	// WorkingDir is the working directory of the Compose project.
+	//
+	// Required: false
+	WorkingDir string `json:"workingDir,omitempty"`
+
+	// ProjectDir is the project directory of the Compose project.
+	//
+	// Required: false
+	ProjectDir string `json:"projectDir,omitempty"`
+}
+
 // SummaryGroup represents a group of container summaries.
 type SummaryGroup struct {
 	// GroupName is the group label, such as a compose project name.
@@ -708,6 +736,12 @@ type Details struct {
 	//
 	// Required: false
 	Labels map[string]string `json:"labels,omitempty"`
+
+	// ComposeInfo contains Docker Compose project information.
+	// Only present if container is part of a Compose project.
+	//
+	// Required: false
+	ComposeInfo *ComposeInfo `json:"composeInfo,omitempty"`
 }
 
 // Created represents a newly created container.
@@ -887,6 +921,26 @@ func NewDetails(c *container.InspectResponse) Details {
 		}
 	}
 
+	// Extract Docker Compose information from labels if present
+	var composeInfo *ComposeInfo
+	if projectName, hasProject := labels["com.docker.compose.project"]; hasProject {
+		if serviceName, hasService := labels["com.docker.compose.service"]; hasService {
+			composeInfo = &ComposeInfo{
+				ProjectName: projectName,
+				ServiceName: serviceName,
+			}
+			if configFile, ok := labels["com.docker.compose.config-files"]; ok {
+				composeInfo.ConfigFile = configFile
+			}
+			if workingDir, ok := labels["com.docker.compose.project.working_dir"]; ok {
+				composeInfo.WorkingDir = workingDir
+			}
+			if projectDir, ok := labels["com.docker.compose.project.config_files"]; ok {
+				composeInfo.ProjectDir = projectDir
+			}
+		}
+	}
+
 	return Details{
 		ID:         c.ID,
 		Name:       name,
@@ -899,9 +953,10 @@ func NewDetails(c *container.InspectResponse) Details {
 		NetworkSettings: NetworkSettings{
 			Networks: networks,
 		},
-		Ports:  ports,
-		Mounts: mounts,
-		Labels: labels,
+		Ports:       ports,
+		Mounts:      mounts,
+		Labels:      labels,
+		ComposeInfo: composeInfo,
 	}
 }