enhance(frontend): improve plugin management

packages/frontend/src/components/MkCode.core.vue

@@ -74,10 +74,8 @@ watch(() => props.lang, (to) => {
 <style module lang="scss">
 .codeBlockRoot :global(.shiki) {
 	padding: 1em;
-	margin: .5em 0;
+	margin: 0;
 	overflow: auto;
-	border-radius: 8px;
-	border: 1px solid var(--MI_THEME-divider);
 	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 
 	color: var(--shiki-fallback);

packages/frontend/src/pages/settings/plugin.install.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</MkCodeEditor>
 
 	<div>
-		<MkButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
+		<MkButton :disabled="code == null || code.trim() === ''" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
 	</div>
 </div>
 </template>
@@ -23,11 +23,12 @@ import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
-import { unisonReload } from '@/utility/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/utility/page-metadata.js';
 import { installPlugin } from '@/plugin.js';
+import { useRouter } from '@/router/supplier.js';
 
+const router = useRouter();
 const code = ref<string | null>(null);
 
 async function install() {
@@ -36,6 +37,9 @@ async function install() {
 	try {
 		await installPlugin(code.value);
 		os.success();
+		code.value = null;
+
+		router.push('/settings/plugin');
 	} catch (err) {
 		os.alert({
 			type: 'error',

packages/frontend/src/pages/settings/plugin.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkFolder v-for="plugin in plugins" :key="plugin.installId">
 					<template #icon><i class="ti ti-plug"></i></template>
 					<template #suffix>
-						<i v-if="plugin.active" class="ti ti-player-play" style="color: var(--MI_THEME-accent);"></i>
+						<i v-if="plugin.active" class="ti ti-player-play" style="color: var(--MI_THEME-success);"></i>
 						<i v-else class="ti ti-player-pause" style="opacity: 0.7;"></i>
 					</template>
 					<template #label>
@@ -59,23 +59,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</MkKeyValue>
 						</div>
 
-						<MkFolder>
+						<div class="_gaps_s">
-							<template #icon><i class="ti ti-terminal-2"></i></template>
+							<MkFolder>
-							<template #label>{{ i18n.ts._plugin.viewLog }}</template>
+								<template #icon><i class="ti ti-terminal-2"></i></template>
+								<template #label>{{ i18n.ts.logs }}</template>
 
-							<div class="_gaps_s">
+								<div>
-								<MkCode :code="pluginLogs.get(plugin.installId)?.join('\n') ?? ''"/>
+									<div v-for="log in pluginLogs.get(plugin.installId)" :class="[$style.log, { [$style.isSystemLog]: log.isSystem }]">
-							</div>
+										<div class="_monospace">{{ timeToHhMmSs(log.at) }} {{ log.message }}</div>
-						</MkFolder>
+									</div>
+								</div>
+							</MkFolder>
 
-						<MkFolder>
+							<MkFolder :withSpacer="false">
-							<template #icon><i class="ti ti-code"></i></template>
+								<template #icon><i class="ti ti-code"></i></template>
-							<template #label>{{ i18n.ts._plugin.viewSource }}</template>
+								<template #label>{{ i18n.ts._plugin.viewSource }}</template>
 
-							<div class="_gaps_s">
+								<div class="_gaps_s">
-								<MkCode :code="plugin.src ?? ''" lang="ais"/>
+									<MkCode :code="plugin.src ?? ''" lang="ais"/>
-							</div>
+								</div>
-						</MkFolder>
+							</MkFolder>
+						</div>
 					</div>
 				</MkFolder>
 			</div>
@@ -98,11 +102,20 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/utility/page-metadata.js';
 import { changePluginActive, configPlugin, pluginLogs, uninstallPlugin, reloadPlugin } from '@/plugin.js';
 import { prefer } from '@/preferences.js';
+import * as os from '@/os.js';
 
 const plugins = prefer.r.plugins;
 
 async function uninstall(plugin: Plugin) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.tsx.removeAreYouSure({ x: plugin.name }),
+	});
+	if (canceled) return;
+
 	await uninstallPlugin(plugin);
+
+	os.success();
 }
 
 function reload(plugin: Plugin) {
@@ -117,6 +130,10 @@ function changeActive(plugin: Plugin, active: boolean) {
 	changePluginActive(plugin, active);
 }
 
+function timeToHhMmSs(unixtime: number) {
+	return new Date(unixtime).toTimeString().split(' ')[0];
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);
@@ -126,3 +143,12 @@ definePageMetadata(() => ({
 	icon: 'ti ti-plug',
 }));
 </script>
+
+<style module>
+.log {
+}
+
+.isSystemLog {
+	opacity: 0.5;
+}
+</style>

packages/frontend/src/pages/settings/theme.install.vue

@@ -10,8 +10,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</MkCodeEditor>
 
 	<div class="_buttons">
-		<MkButton :disabled="installThemeCode == null" inline @click="() => previewTheme(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
+		<MkButton :disabled="installThemeCode == null || installThemeCode.trim() === ''" inline @click="() => previewTheme(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</MkButton>
-		<MkButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
+		<MkButton :disabled="installThemeCode == null || installThemeCode.trim() === ''" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
 	</div>
 </div>
 </template>
@@ -24,7 +24,9 @@ import { parseThemeCode, previewTheme, installTheme } from '@/theme.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/utility/page-metadata.js';
+import { useRouter } from '@/router/supplier.js';
 
+const router = useRouter();
 const installThemeCode = ref<string | null>(null);
 
 async function install(code: string): Promise<void> {
@@ -35,6 +37,8 @@ async function install(code: string): Promise<void> {
 			type: 'success',
 			text: i18n.tsx._theme.installed({ name: theme.name }),
 		});
+		installThemeCode.value = null;
+		router.push('/settings/theme');
 	} catch (err) {
 		switch (err.message.toLowerCase()) {
 			case 'this theme is already installed':

packages/frontend/src/plugin.ts

@@ -131,6 +131,10 @@ export async function installPlugin(code: string, meta?: AiScriptPluginMeta) {
 		realMeta = meta;
 	}
 
+	if (prefer.s.plugins.some(x => x.name === realMeta.name)) {
+		throw new Error('Plugin already installed');
+	}
+
 	const installId = uuid();
 
 	const plugin = {
@@ -161,8 +165,14 @@ export async function uninstallPlugin(plugin: Plugin) {
 	}
 }
 
-const pluginContexts = new Map<string, Interpreter>();
+const pluginContexts = new Map<Plugin['installId'], Interpreter>();
-export const pluginLogs = ref(new Map<string, string[]>());
+
+export const pluginLogs = ref(new Map<Plugin['installId'], {
+	at: number;
+	message: string;
+	isSystem?: boolean;
+	isError?: boolean;
+}[]>());
 
 type HandlerDef = {
 	post_form_action: {
@@ -197,6 +207,11 @@ type PluginHandler<K extends keyof HandlerDef> = {
 let pluginHandlers: PluginHandler<keyof HandlerDef>[] = [];
 
 function addPluginHandler<K extends keyof HandlerDef>(installId: Plugin['installId'], type: K, ctx: PluginHandler<K>['ctx']) {
+	pluginLogs.value.get(installId)!.push({
+		at: Date.now(),
+		isSystem: true,
+		message: `Handler registered: ${type}`,
+	});
 	pluginHandlers.push({ pluginInstallId: installId, type, ctx });
 }
 
@@ -215,6 +230,19 @@ async function launchPlugin(id: Plugin['installId']): Promise<void> {
 	// 後方互換性のため
 	if (plugin.src == null) return;
 
+	pluginLogs.value.set(plugin.installId, []);
+
+	function systemLog(message: string, isError = false): void {
+		pluginLogs.value.get(plugin.installId)?.push({
+			at: Date.now(),
+			isSystem: true,
+			message,
+			isError,
+		});
+	}
+
+	systemLog('Starting plugin...');
+
 	await authorizePlugin(plugin);
 
 	const aiscript = new Interpreter(createPluginEnv({
@@ -223,26 +251,33 @@ async function launchPlugin(id: Plugin['installId']): Promise<void> {
 	}), {
 		in: aiScriptReadline,
 		out: (value): void => {
-			console.log(value);
+			pluginLogs.value.get(plugin.installId)!.push({
-			pluginLogs.value.get(plugin.installId).push(utils.reprValue(value));
+				at: Date.now(),
+				message: utils.reprValue(value),
+			});
 		},
 		log: (): void => {
 		},
 		err: (err): void => {
-			pluginLogs.value.get(plugin.installId).push(`${err}`);
+			pluginLogs.value.get(plugin.installId)!.push({
+				at: Date.now(),
+				message: `${err}`,
+				isError: true,
+			});
 			throw err; // install時のtry-catchに反応させる
 		},
 	});
 
 	pluginContexts.set(plugin.installId, aiscript);
-	pluginLogs.value.set(plugin.installId, []);
 
 	aiscript.exec(parser.parse(plugin.src)).then(
 		() => {
 			console.info('Plugin installed:', plugin.name, 'v' + plugin.version);
+			systemLog('Plugin started');
 		},
 		(err) => {
 			console.error('Plugin install failed:', plugin.name, 'v' + plugin.version);
+			systemLog(`${err}`, true);
 			throw err;
 		},
 	);
@@ -300,16 +335,15 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 	}
 
 	function withContext<T>(fn: (ctx: Interpreter) => T): T {
-		console.log('withContext', id);
 		const ctx = pluginContexts.get(id);
 		if (!ctx) throw new Error('Plugin context not found');
 		return fn(ctx);
 	}
 
-	return {
+	const env: Record<string, values.Value> = {
 		...createAiScriptEnv({ ...opts, token: store.state.pluginTokens[id] }),
 
-		'Plugin:register_post_form_action': values.FN_NATIVE(([title, handler]) => {
+		'Plugin:register:post_form_action': values.FN_NATIVE(([title, handler]) => {
 			utils.assertString(title);
 			utils.assertFunction(handler);
 			addPluginHandler(id, 'post_form_action', {
@@ -325,7 +359,7 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 			});
 		}),
 
-		'Plugin:register_user_action': values.FN_NATIVE(([title, handler]) => {
+		'Plugin:register:user_action': values.FN_NATIVE(([title, handler]) => {
 			utils.assertString(title);
 			utils.assertFunction(handler);
 			addPluginHandler(id, 'user_action', {
@@ -336,7 +370,7 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 			});
 		}),
 
-		'Plugin:register_note_action': values.FN_NATIVE(([title, handler]) => {
+		'Plugin:register:note_action': values.FN_NATIVE(([title, handler]) => {
 			utils.assertString(title);
 			utils.assertFunction(handler);
 			addPluginHandler(id, 'note_action', {
@@ -347,7 +381,7 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 			});
 		}),
 
-		'Plugin:register_note_view_interruptor': values.FN_NATIVE(([handler]) => {
+		'Plugin:register:note_view_interruptor': values.FN_NATIVE(([handler]) => {
 			utils.assertFunction(handler);
 			addPluginHandler(id, 'note_view_interruptor', {
 				handler: withContext(ctx => async (note) => {
@@ -356,7 +390,7 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 			});
 		}),
 
-		'Plugin:register_note_post_interruptor': values.FN_NATIVE(([handler]) => {
+		'Plugin:register:note_post_interruptor': values.FN_NATIVE(([handler]) => {
 			utils.assertFunction(handler);
 			addPluginHandler(id, 'note_post_interruptor', {
 				handler: withContext(ctx => async (note) => {
@@ -365,7 +399,7 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 			});
 		}),
 
-		'Plugin:register_page_view_interruptor': values.FN_NATIVE(([handler]) => {
+		'Plugin:register:page_view_interruptor': values.FN_NATIVE(([handler]) => {
 			utils.assertFunction(handler);
 			addPluginHandler(id, 'page_view_interruptor', {
 				handler: withContext(ctx => async (page) => {
@@ -381,6 +415,16 @@ function createPluginEnv(opts: { plugin: Plugin; storageKey: string }): Record<s
 
 		'Plugin:config': values.OBJ(config),
 	};
+
+	// 後方互換性のため
+	env['Plugin:register_post_form_action'] = env['Plugin:register:post_form_action'];
+	env['Plugin:register_user_action'] = env['Plugin:register:user_action'];
+	env['Plugin:register_note_action'] = env['Plugin:register:note_action'];
+	env['Plugin:register_note_view_interruptor'] = env['Plugin:register:note_view_interruptor'];
+	env['Plugin:register_note_post_interruptor'] = env['Plugin:register:note_post_interruptor'];
+	env['Plugin:register_page_view_interruptor'] = env['Plugin:register:page_view_interruptor'];
+
+	return env;
 }
 
 export function getPluginHandlers<K extends keyof HandlerDef>(type: K): HandlerDef[K][] {