refactor(containers): move compose detection to backend and add i18n

- Add ComposeInfo to backend container Details response with Docker Compose metadata
- Extract compose project/service info from labels in Go (backend-side processing)
- Add i18n strings for all hardcoded text in ContainerComposePanel component
- Simplify frontend logic to use composeInfo from API instead of label parsing
- Fix Svelte reactivity pattern to properly track source content changes
- Remove redundant Svelte effect antipattern per code review feedback

Addresses code review feedback to move heavy lifting to backend and ensure
proper internationalization coverage.

Author: mkaltner

frontend/messages/en.json

@@ -513,6 +513,12 @@
 	"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_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

@@ -160,6 +160,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;
@@ -173,6 +181,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

@@ -227,14 +227,15 @@
 	const showShell = $derived(!!container?.state?.running);
 
 	const project = $derived(data?.project ?? null);
-	const composeServiceName = $derived(container?.labels?.['com.docker.compose.service'] ?? '');
+	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) return null;
+			if (!project || !composeServiceName || !composeInfo) return null;
 
 			const hasService = (content: string): boolean => {
 				try {
@@ -259,7 +260,7 @@
 		})()
 	);
 
-	const showComposeTab = $derived(!!serviceComposeSource);
+	const showComposeTab = $derived(!!composeInfo && !!serviceComposeSource);
 
 	const tabItems = $derived<TabItem[]>([
 		{ value: 'overview', label: m.common_overview(), icon: ContainersIcon },

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

@@ -28,7 +28,7 @@ export const load: PageLoad = async ({ params, parent }) => {
 		}
 
 		let project = null;
-		const composeProjectName = container.labels?.['com.docker.compose.project'];
+		const composeProjectName = container.composeInfo?.projectName;
 		if (composeProjectName) {
 			try {
 				const projectsResult = await projectService.getProjectsForEnvironment(envId, { search: composeProjectName });

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

@@ -6,7 +6,7 @@
 	import { toast } from 'svelte-sonner';
 	import type { Project, IncludeFile } from '$lib/types/project.type';
 	import { AlertIcon, ExternalLinkIcon } from '$lib/icons';
-	import { untrack } from 'svelte';
+	import * as m from '$lib/paraglide/messages';
 
 	let {
 		project,
@@ -20,9 +20,15 @@
 
 	const sourceContent = $derived(includeFile ? includeFile.content : (project.composeContent ?? ''));
 
-	let composeContent = $state(untrack(() => sourceContent));
+	let composeContent = $state(sourceContent);
+
+	// Update composeContent when source changes (e.g., switching containers)
+	let prevSourceContent = $state(sourceContent);
 	$effect(() => {
-		composeContent = sourceContent;
+		if (sourceContent !== prevSourceContent) {
+			composeContent = sourceContent;
+			prevSourceContent = sourceContent;
+		}
 	});
 
 	let panelOpen = $state(true);
@@ -41,9 +47,9 @@
 			} else {
 				await projectService.updateProject(project.id, undefined, composeContent);
 			}
-			toast.success('Compose file saved successfully');
+			toast.success(m.container_compose_save_success());
 		} catch (err: any) {
-			saveError = err?.message ?? 'Failed to save compose file';
+			saveError = err?.message ?? m.container_compose_save_failed();
 			toast.error(saveError as string);
 		} finally {
 			isSaving = false;
@@ -55,19 +61,20 @@
 	{#if project.gitOpsManagedBy}
 		<Alert.Root variant="default">
 			<AlertIcon class="size-4" />
-			<Alert.Title>GitOps Managed — Read Only</Alert.Title>
+			<Alert.Title>{m.container_compose_gitops_managed_title()}</Alert.Title>
 			<Alert.Description>
-				This project is managed by GitOps (<strong>{project.gitOpsManagedBy}</strong>). The compose file is read-only and can only
-				be changed via your Git repository.
+				{@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>
-			Editing <strong>{fileTitle}</strong> for project
-			<a href="/projects/{project.id}" class="text-primary font-medium hover:underline">{project.name}</a>. This container runs as
-			the <strong>{serviceName}</strong> service.
+			{@html 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>
 
@@ -86,6 +93,11 @@
 		{#if !isReadOnly}
 			<ArcaneButton action="save" loading={isSaving} onclick={handleSave} />
 		{/if}
-		<ArcaneButton action="base" href="/projects/{project.id}" icon={ExternalLinkIcon} customLabel="View Project" />
+		<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"`
+}
+
 // Details represents detailed container information.
 type Details struct {
 	// ID is the unique identifier of the container.
@@ -695,6 +723,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.
@@ -874,6 +908,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,
@@ -886,9 +940,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,
 	}
 }