feat(containers): show and edit the specific service's compose file (including sub-files)

When a container belongs to a project with `include:` directives, find the
include file that directly defines the service and show/edit that instead of
the root wrapper compose.

- serviceComposeSource derived: scans root compose, then includeFiles[], to find
  which file has `services.{serviceName}` defined
- Shows tab for both root-defined and include-file-defined services
- Hides tab only when the service isn't found in any file
- ContainerComposePanel now accepts optional `includeFile` prop
  - Displays includeFile.content instead of project.composeContent
  - Saves via projectService.updateProjectIncludeFile (relativePath + content)
  - Falls back to updateProject for root compose
  - fileTitle shows the actual file name (e.g. ollama/compose.yml)
  - fileId scoped per include file so editor state doesn't collide

Author: mkaltner

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

@@ -41,6 +41,7 @@
 		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);
@@ -228,25 +229,38 @@
 	const project = $derived(data?.project ?? null);
 	const composeServiceName = $derived(container?.labels?.['com.docker.compose.service'] ?? '');
 
-	// Only show the Compose tab if the service is directly defined in the project's compose file.
-	// When a project uses `include:` directives, the root compose is just a wrapper — not useful
-	// to edit from a container view. In that case we hide the tab entirely.
-	const showComposeTab = $derived(
-		!!project?.composeContent &&
-			!!composeServiceName &&
-			(() => {
+	// 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;
+
+			const hasService = (content: string): boolean => {
 				try {
-					const parsed = parseYaml(project!.composeContent!) as Record<string, unknown> | null;
-					return (
-						!!parsed?.services &&
-						!!(parsed.services as Record<string, unknown>)[composeServiceName]
-					);
+					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(!!serviceComposeSource);
+
 	const tabItems = $derived<TabItem[]>([
 		{ value: 'overview', label: m.common_overview(), icon: ContainersIcon },
 		...(showStats ? [{ value: 'stats', label: m.containers_nav_metrics(), icon: StatsIcon }] : []),
@@ -410,9 +424,13 @@
 				</Tabs.Content>
 			{/if}
 
-			{#if project && showComposeTab}
+			{#if project && serviceComposeSource}
 				<Tabs.Content value="compose" class="h-full min-h-0">
-					<ContainerComposePanel {project} serviceName={composeServiceName} />
+					<ContainerComposePanel
+						{project}
+						serviceName={composeServiceName}
+						includeFile={serviceComposeSource.includeFile}
+					/>
 				</Tabs.Content>
 			{/if}
 		{/snippet}

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

@@ -4,33 +4,43 @@
 	import CodePanel from '../../projects/components/CodePanel.svelte';
 	import { projectService } from '$lib/services/project-service';
 	import { toast } from 'svelte-sonner';
-	import type { Project } from '$lib/types/project.type';
+	import type { Project, IncludeFile } from '$lib/types/project.type';
 	import { AlertIcon, ExternalLinkIcon } from '$lib/icons';
 	import { untrack } from 'svelte';
 
 	let {
 		project,
-		serviceName
+		serviceName,
+		includeFile = null
 	}: {
 		project: Project;
 		serviceName: string;
+		includeFile?: IncludeFile | null;
 	} = $props();
 
-	let composeContent = $state(untrack(() => project.composeContent ?? ''));
+	const sourceContent = $derived(includeFile ? includeFile.content : (project.composeContent ?? ''));
+
+	let composeContent = $state(untrack(() => sourceContent));
 	$effect(() => {
-		composeContent = project.composeContent ?? '';
+		composeContent = sourceContent;
 	});
+
 	let panelOpen = $state(true);
 	let isSaving = $state(false);
 	let saveError = $state('');
 
 	const isReadOnly = $derived(!!project.gitOpsManagedBy);
+	const fileTitle = $derived(includeFile ? includeFile.relativePath : 'compose.yml');
 
 	async function handleSave() {
 		isSaving = true;
 		saveError = '';
 		try {
-			await projectService.updateProject(project.id, undefined, composeContent);
+			if (includeFile) {
+				await projectService.updateProjectIncludeFile(project.id, includeFile.relativePath, composeContent);
+			} else {
+				await projectService.updateProject(project.id, undefined, composeContent);
+			}
 			toast.success('Compose file saved successfully');
 		} catch (err: any) {
 			saveError = err?.message ?? 'Failed to save compose file';
@@ -55,7 +65,7 @@
 
 	<div class="bg-muted flex items-start gap-2 rounded-lg border px-4 py-3 text-sm">
 		<span>
-			Editing the compose file for project
+			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.
@@ -64,12 +74,12 @@
 
 	<div class="flex min-h-0 flex-1 flex-col">
 		<CodePanel
-			title="Compose File"
+			title={fileTitle}
 			bind:open={panelOpen}
 			language="yaml"
 			bind:value={composeContent}
 			readOnly={isReadOnly}
-			fileId="container-compose-{project.id}"
+			fileId="container-compose-{project.id}{includeFile ? `-${includeFile.relativePath}` : ''}"
 		/>
 	</div>