feat(containers): compose editor + compose tab improvements

frontend/messages/en.json

@@ -537,6 +537,16 @@
 	"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",
+	"compose_editor_editing_info": "Editing {file} for project {project}",
+	"compose_editor_viewing_info": "Viewing {file} for project {project}",
+	"tabs_compose": "Compose",
 	"tabs_environment": "Environment",
 	"tabs_volumes": "Volumes",
 	"tabs_network_security": "Network & Security",

frontend/src/lib/components/compose/ComposeEditorWrapper.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import * as Alert from '$lib/components/ui/alert/index.js';
+	import { ArcaneButton } from '$lib/components/arcane-button';
+	import { AlertIcon, ExternalLinkIcon } from '$lib/icons';
+	import * as m from '$lib/paraglide/messages';
+	import { toast } from 'svelte-sonner';
+	import { invalidateAll } from '$app/navigation';
+	import type { Snippet } from 'svelte';
+
+	let {
+		projectId,
+		projectName,
+		gitOpsManagedBy = undefined,
+		fileTitle,
+		serviceName = undefined,
+		isDirty,
+		onSave,
+		children
+	}: {
+		projectId: string;
+		projectName: string;
+		gitOpsManagedBy?: string;
+		fileTitle: string;
+		serviceName?: string;
+		isDirty: boolean;
+		onSave: () => Promise<void>;
+		children: Snippet;
+	} = $props();
+
+	const isReadOnly = $derived(!!gitOpsManagedBy);
+	let isSaving = $state(false);
+
+	async function handleSave() {
+		isSaving = true;
+		try {
+			await onSave();
+			toast.success(m.container_compose_save_success());
+			await invalidateAll();
+		} catch (err: unknown) {
+			const message = err instanceof Error ? err.message : m.container_compose_save_failed();
+			toast.error(message);
+		} finally {
+			isSaving = false;
+		}
+	}
+</script>
+
+<div class="flex h-full min-h-0 flex-col gap-4 p-4">
+	{#if gitOpsManagedBy}
+		<Alert.Root variant="default">
+			<AlertIcon class="size-4" />
+			<Alert.Title>{m.container_compose_gitops_managed_title()}</Alert.Title>
+			<Alert.Description>
+				{m.container_compose_gitops_managed_description({ provider: gitOpsManagedBy })}
+			</Alert.Description>
+		</Alert.Root>
+	{/if}
+
+	<div class="bg-muted flex items-start gap-2 rounded-lg border px-4 py-3 text-sm">
+		<span>
+			{#if serviceName}
+				{isReadOnly
+					? m.container_compose_viewing_info({ file: fileTitle, project: projectName, service: serviceName })
+					: m.container_compose_editing_info({ file: fileTitle, project: projectName, service: serviceName })}
+			{:else}
+				{isReadOnly
+					? m.compose_editor_viewing_info({ file: fileTitle, project: projectName })
+					: m.compose_editor_editing_info({ file: fileTitle, project: projectName })}
+			{/if}
+		</span>
+	</div>
+
+	<div class="flex min-h-0 flex-1 flex-col">
+		{@render children()}
+	</div>
+
+	<div class="flex shrink-0 items-center gap-2">
+		{#if !isReadOnly}
+			<ArcaneButton action="save" loading={isSaving} disabled={!isDirty} onclick={handleSave} />
+		{/if}
+		<ArcaneButton
+			action="base"
+			href="/projects/{projectId}"
+			icon={ExternalLinkIcon}
+			customLabel={m.container_compose_view_project()}
+		/>
+	</div>
+</div>

frontend/src/lib/components/compose/index.ts

@@ -0,0 +1,3 @@
+import ComposeEditorWrapper from './ComposeEditorWrapper.svelte';
+
+export { ComposeEditorWrapper };

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

@@ -165,6 +165,13 @@ export interface ContainerConfigDto {
 	user?: string;
 }
 
+export interface ComposeInfo {
+	projectName: string;
+	serviceName: string;
+	workingDir?: string;
+	configFiles?: string;
+}
+
 export interface ContainerDetailsDto {
 	id: string;
 	name: string;
@@ -178,6 +185,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,57 @@
 	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 ?? '');
+	const rootComposeFilename = $derived.by(() => {
+		const cf = composeInfo?.configFiles;
+		if (!cf) return 'compose.yml';
+		const first = cf.split(',')[0].trim();
+		return first.split('/').pop() || 'compose.yml';
+	});
+
+	// 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: m.tabs_compose(), icon: CodeIcon }] : [])
 	]);
 
 	$effect(() => {
@@ -384,6 +430,19 @@
 					<ContainerStorage {container} />
 				</Tabs.Content>
 			{/if}
+
+			{#if project && serviceComposeSource}
+				<Tabs.Content value="compose" class="h-full min-h-0">
+					{#key `${project?.id}-${serviceComposeSource?.includeFile?.relativePath ?? 'root'}`}
+						<ContainerComposePanel
+							{project}
+							serviceName={composeServiceName}
+							includeFile={serviceComposeSource.includeFile}
+							rootFilename={rootComposeFilename}
+						/>
+					{/key}
+				</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,15 +27,40 @@ 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 searchOptions = {
+					search: composeProjectName,
+					pagination: { page: 1, limit: 100 } // Ensure we don't miss projects beyond default page size
+				};
+				const projectsResult = await queryClient.fetchQuery({
+					queryKey: queryKeys.projects.list(envId, searchOptions),
+					queryFn: () => projectService.getProjectsForEnvironment(envId, searchOptions)
+				});
+				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) {
+	} catch (err: unknown) {
 		console.error('Failed to load container:', err);
-		if (err.status === 404) {
+		if (typeof err === 'object' && err !== null && 'status' in err && (err as { status: number }).status === 404) {
 			throw err;
 		}
-		throw error(500, err.message || 'Failed to load container details');
+		throw error(500, err instanceof Error ? err.message : 'Failed to load container details');
 	}
 };

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { ComposeEditorWrapper } from '$lib/components/compose';
+	import CodePanel from '../../projects/components/CodePanel.svelte';
+	import { projectService } from '$lib/services/project-service';
+	import type { Project, IncludeFile } from '$lib/types/project.type';
+
+	let {
+		project,
+		serviceName,
+		includeFile = null,
+		rootFilename = 'compose.yml'
+	}: {
+		project: Project;
+		serviceName: string;
+		includeFile?: IncludeFile | null;
+		rootFilename?: string;
+	} = $props();
+
+	const sourceContent = $derived(includeFile ? includeFile.content : (project.composeContent ?? ''));
+
+	let composeContent = $state(includeFile ? includeFile.content : (project.composeContent ?? ''));
+
+	const isDirty = $derived(composeContent !== sourceContent);
+
+	let panelOpen = $state(true);
+
+	const fileTitle = $derived(includeFile ? includeFile.relativePath : rootFilename);
+
+	async function save() {
+		if (includeFile) {
+			await projectService.updateProjectIncludeFile(project.id, includeFile.relativePath, composeContent);
+		} else {
+			await projectService.updateProject(project.id, undefined, composeContent);
+		}
+	}
+</script>
+
+<ComposeEditorWrapper
+	projectId={project.id}
+	projectName={project.name}
+	gitOpsManagedBy={project.gitOpsManagedBy}
+	{fileTitle}
+	{serviceName}
+	{isDirty}
+	onSave={save}
+>
+	<CodePanel
+		title={fileTitle}
+		bind:open={panelOpen}
+		language="yaml"
+		bind:value={composeContent}
+		readOnly={!!project.gitOpsManagedBy}
+		fileId="container-compose-{project.id}{includeFile ? `-${includeFile.relativePath.replace(/[^a-zA-Z0-9_-]/g, '-')}` : ''}"
+	/>
+</ComposeEditorWrapper>