diff --git a/packages/backend/src/server/api/endpoints/app/create.ts b/packages/backend/src/server/api/endpoints/app/create.ts
index a0a735082..3c72699ca 100644
--- a/packages/backend/src/server/api/endpoints/app/create.ts
+++ b/packages/backend/src/server/api/endpoints/app/create.ts
@@ -23,6 +23,7 @@ export const paramDef = {
 		description: { type: 'string' },
 		permission: { type: 'array', uniqueItems: true, items: {
 			type: 'string',
+			// FIXME: add enum of possible permissions
 		} },
 		callbackUrl: { type: 'string', nullable: true },
 	},
@@ -34,9 +35,6 @@ export default define(meta, paramDef, async (ps, user) => {
 	// Generate secret
 	const secret = secureRndstr(32, true);
 
-	// for backward compatibility
-	const permission = unique(ps.permission.map(v => v.replace(/^(.+)(\/|-)(read|write)$/, '$3:$1')));
-
 	// Create account
 	const app = await Apps.insert({
 		id: genId(),
@@ -44,7 +42,7 @@ export default define(meta, paramDef, async (ps, user) => {
 		userId: user ? user.id : null,
 		name: ps.name,
 		description: ps.description,
-		permission,
+		permission: ps.permission,
 		callbackUrl: ps.callbackUrl,
 		secret: secret,
 	}).then(x => Apps.findOneByOrFail(x.identifiers[0]));
diff --git a/packages/client/src/components/queue-chart.vue b/packages/client/src/components/queue-chart.vue
index 7bb548cf0..c7e829b61 100644
--- a/packages/client/src/components/queue-chart.vue
+++ b/packages/client/src/components/queue-chart.vue
@@ -2,8 +2,8 @@
 <canvas ref="chartEl"></canvas>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
 import {
 	Chart,
 	ArcElement,
@@ -42,191 +42,166 @@ Chart.register(
 	Filler,
 );
 
-const alpha = (hex, a) => {
-	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
-	const r = parseInt(result[1], 16);
-	const g = parseInt(result[2], 16);
-	const b = parseInt(result[3], 16);
-	return `rgba(${r}, ${g}, ${b}, ${a})`;
-};
+const props = defineProps<{
+	domain: string,
+	connection: any,
+}>();
 
-export default defineComponent({
-	props: {
-		domain: {
-			type: String,
-			required: true,
+const chartEl = ref<HTMLCanvasElement>(null);
+
+const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+
+// フォントカラー
+Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+onMounted(() => {
+	const chartInstance = new Chart(chartEl.value, {
+		type: 'line',
+		data: {
+			labels: [],
+			datasets: [{
+				label: 'Process',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#00E396',
+				backgroundColor: '#00E3961A',
+				data: []
+			}, {
+				label: 'Active',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#00BCD4',
+				backgroundColor: '#00BCD41A',
+				data: []
+			}, {
+				label: 'Waiting',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#FFB300',
+				backgroundColor: '#FFB3001A',
+				yAxisID: 'y2',
+				data: []
+			}, {
+				label: 'Delayed',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#E53935',
+				borderDash: [5, 5],
+				fill: false,
+				yAxisID: 'y2',
+				data: []
+			}],
 		},
-		connection: {
-			required: true,
-		},
-	},
-
-	setup(props) {
-		const chartEl = ref<HTMLCanvasElement>(null);
-
-		const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-
-		// フォントカラー
-		Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-		onMounted(() => {
-			const chartInstance = new Chart(chartEl.value, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'Process',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#00E396',
-						backgroundColor: alpha('#00E396', 0.1),
-						data: []
-					}, {
-						label: 'Active',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#00BCD4',
-						backgroundColor: alpha('#00BCD4', 0.1),
-						data: []
-					}, {
-						label: 'Waiting',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#FFB300',
-						backgroundColor: alpha('#FFB300', 0.1),
-						yAxisID: 'y2',
-						data: []
-					}, {
-						label: 'Delayed',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#E53935',
-						borderDash: [5, 5],
-						fill: false,
-						yAxisID: 'y2',
-						data: []
-					}],
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 16,
+					right: 16,
+					top: 16,
+					bottom: 8,
 				},
-				options: {
-					aspectRatio: 2.5,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 8,
-						},
+			},
+			scales: {
+				x: {
+					grid: {
+						display: true,
+						color: gridColor,
+						borderColor: '#0000',
 					},
-					scales: {
-						x: {
-							grid: {
-								display: true,
-								color: gridColor,
-								borderColor: 'rgb(0, 0, 0, 0)',
-							},
-							ticks: {
-								display: false,
-								maxTicksLimit: 10
-							},
-						},
-						y: {
-							min: 0,
-							stack: 'queue',
-							stackWeight: 2,
-							grid: {
-								color: gridColor,
-								borderColor: 'rgb(0, 0, 0, 0)',
-							},
-						},
-						y2: {
-							min: 0,
-							offset: true,
-							stack: 'queue',
-							stackWeight: 1,
-							grid: {
-								color: gridColor,
-								borderColor: 'rgb(0, 0, 0, 0)',
-							},
-						},
-					},
-					interaction: {
-						intersect: false,
-					},
-					plugins: {
-						legend: {
-							position: 'bottom',
-							labels: {
-								boxWidth: 16,
-							},
-						},
-						tooltip: {
-							mode: 'index',
-							animation: {
-								duration: 0,
-							},
-						},
+					ticks: {
+						display: false,
+						maxTicksLimit: 10
 					},
 				},
-			});
+				y: {
+					min: 0,
+					stack: 'queue',
+					stackWeight: 2,
+					grid: {
+						color: gridColor,
+						borderColor: '#0000',
+					},
+				},
+				y2: {
+					min: 0,
+					offset: true,
+					stack: 'queue',
+					stackWeight: 1,
+					grid: {
+						color: gridColor,
+						borderColor: '#0000',
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+			},
+			plugins: {
+				legend: {
+					position: 'bottom',
+					labels: {
+						boxWidth: 16,
+					},
+				},
+				tooltip: {
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+				},
+			},
+		},
+	});
 
-			const onStats = (stats) => {
-				chartInstance.data.labels.push('');
-				chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
-				chartInstance.data.datasets[1].data.push(stats[props.domain].active);
-				chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
-				chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
-				if (chartInstance.data.datasets[0].data.length > 200) {
-					chartInstance.data.labels.shift();
-					chartInstance.data.datasets[0].data.shift();
-					chartInstance.data.datasets[1].data.shift();
-					chartInstance.data.datasets[2].data.shift();
-					chartInstance.data.datasets[3].data.shift();
-				}
-				chartInstance.update();
-			};
+	const onStats = (stats) => {
+		chartInstance.data.labels.push('');
+		chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+		chartInstance.data.datasets[1].data.push(stats[props.domain].active);
+		chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
+		chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
+		if (chartInstance.data.datasets[0].data.length > 200) {
+			chartInstance.data.labels.shift();
+			chartInstance.data.datasets[0].data.shift();
+			chartInstance.data.datasets[1].data.shift();
+			chartInstance.data.datasets[2].data.shift();
+			chartInstance.data.datasets[3].data.shift();
+		}
+		chartInstance.update();
+	};
 
-			const onStatsLog = (statsLog) => {
-				for (const stats of [...statsLog].reverse()) {
-					chartInstance.data.labels.push('');
-					chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
-					chartInstance.data.datasets[1].data.push(stats[props.domain].active);
-					chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
-					chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
-					if (chartInstance.data.datasets[0].data.length > 200) {
-						chartInstance.data.labels.shift();
-						chartInstance.data.datasets[0].data.shift();
-						chartInstance.data.datasets[1].data.shift();
-						chartInstance.data.datasets[2].data.shift();
-						chartInstance.data.datasets[3].data.shift();
-					}
-				}
-				chartInstance.update();
-			};
+	const onStatsLog = (statsLog) => {
+		for (const stats of [...statsLog].reverse()) {
+			chartInstance.data.labels.push('');
+			chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+			chartInstance.data.datasets[1].data.push(stats[props.domain].active);
+			chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
+			chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
+			if (chartInstance.data.datasets[0].data.length > 200) {
+				chartInstance.data.labels.shift();
+				chartInstance.data.datasets[0].data.shift();
+				chartInstance.data.datasets[1].data.shift();
+				chartInstance.data.datasets[2].data.shift();
+				chartInstance.data.datasets[3].data.shift();
+			}
+		}
+		chartInstance.update();
+	};
 
-			props.connection.on('stats', onStats);
-			props.connection.on('statsLog', onStatsLog);
+	props.connection.on('stats', onStats);
+	props.connection.on('statsLog', onStatsLog);
 
-			onUnmounted(() => {
-				props.connection.off('stats', onStats);
-				props.connection.off('statsLog', onStatsLog);
-			});
-		});
-
-		return {
-			chartEl,
-		};
-	},
+	onUnmounted(() => {
+		props.connection.off('stats', onStats);
+		props.connection.off('statsLog', onStatsLog);
+	});
 });
 </script>
-
-<style lang="scss" scoped>
-
-</style>