diff --git a/packages/backend/src/server/api/streaming.ts b/packages/backend/src/server/api/streaming.ts
index a25984ec3e..12f97d8018 100644
--- a/packages/backend/src/server/api/streaming.ts
+++ b/packages/backend/src/server/api/streaming.ts
@@ -1,6 +1,6 @@
 import type * as http from "node:http";
-import { EventEmitter } from "events";
-import type { ParsedUrlQuery } from "querystring";
+import { EventEmitter } from "node:events";
+import type { ParsedUrlQuery } from "node:querystring";
 import * as websocket from "websocket";
 
 import { subscriber as redisClient } from "@/db/redis.js";
diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
index 678a3ccdaa..cafc40413b 100644
--- a/packages/client/src/components/MkChartTooltip.vue
+++ b/packages/client/src/components/MkChartTooltip.vue
@@ -28,11 +28,10 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	x: number;
 	y: number;
 	title?: string;
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index afc2f15817..c731fe9b0e 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -231,15 +231,9 @@ const unicodeEmojiSkinToneLabels = [
 	i18n.ts._skinTones?.dark ?? "Dark",
 ];
 
-const size = computed(() =>
-	props.asReactionPicker ? reactionPickerSize.value : 1,
-);
-const width = computed(() =>
-	props.asReactionPicker ? reactionPickerWidth.value : 3,
-);
-const height = computed(() =>
-	props.asReactionPicker ? reactionPickerHeight.value : 2,
-);
+const size = reactionPickerSize;
+const width = reactionPickerWidth;
+const height = reactionPickerHeight;
 const customEmojiCategories = emojiCategories;
 const customEmojis = instance.emojis;
 const q = ref<string | null>(null);
diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
index 426bbf9469..decf49fd38 100644
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -39,7 +39,7 @@ import { defaultStore } from "@/store";
 withDefaults(
 	defineProps<{
 		manualShowing?: boolean | null;
-		src?: HTMLElement;
+		src?: HTMLElement | null;
 		showPinned?: boolean;
 		asReactionPicker?: boolean;
 	}>(),
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index 34db74397e..4add7c32da 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -42,7 +42,7 @@ useTooltip(el, (showing) => {
 	os.popup(
 		defineAsyncComponent(() => import("@/components/MkUrlPreviewPopup.vue")),
 		{
-			showing: showing.value,
+			showing,
 			url: props.url,
 			source: el.value,
 		},
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 0a03dbb30e..582da6c6d4 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1188,7 +1188,7 @@ async function insertEmoji(ev: MouseEvent) {
 	os.openEmojiPicker(
 		(ev.currentTarget ?? ev.target) as HTMLElement,
 		{},
-		textareaEl.value,
+		textareaEl.value!,
 	);
 }
 
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
index 68a1d6b625..40e8fefade 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -19,13 +19,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import type { entities } from "firefish-js";
 import MkTooltip from "./MkTooltip.vue";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	reaction: string;
 	emojis: entities.EmojiLite[];
 	targetElement: HTMLElement;
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 7c5f118f98..13f8fd8311 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -30,13 +30,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import type { entities } from "firefish-js";
 import MkTooltip from "./MkTooltip.vue";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	reaction: string;
 	users: entities.User[]; // TODO
 	count: number;
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue
index 2ed3c1974b..becc18fe09 100644
--- a/packages/client/src/components/MkTooltip.vue
+++ b/packages/client/src/components/MkTooltip.vue
@@ -5,7 +5,7 @@
 		@after-leave="emit('closed')"
 	>
 		<div
-			v-show="unref(showing)"
+			v-show="showing"
 			ref="el"
 			class="buebdbiu _acrylic _shadow"
 			:style="{ zIndex, maxWidth: maxWidth + 'px' }"
@@ -19,21 +19,14 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	type MaybeRef,
-	nextTick,
-	onMounted,
-	onUnmounted,
-	ref,
-	unref,
-} from "vue";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import * as os from "@/os";
 import { calcPopupPosition } from "@/scripts/popup-position";
 import { defaultStore } from "@/store";
 
 const props = withDefaults(
 	defineProps<{
-		showing: MaybeRef<boolean>;
+		showing: boolean;
 		targetElement?: HTMLElement | null;
 		x?: number;
 		y?: number;
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
index 30373c6eb3..30213204d6 100644
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ b/packages/client/src/components/MkUsersTooltip.vue
@@ -19,12 +19,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from "vue";
 import type { entities } from "firefish-js";
 import MkTooltip from "./MkTooltip.vue";
 
 defineProps<{
-	showing: Ref<boolean>;
+	showing: boolean;
 	users: entities.User[];
 	count: number;
 	targetElement?: HTMLElement;
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index f2d7688f36..c35023adcb 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -13,7 +13,7 @@
 			]"
 		>
 			<i
-				v-if="unref(success)"
+				v-if="success"
 				:class="[$style.icon, $style.success, iconify('ph-check')]"
 			></i>
 			<MkLoading
@@ -29,16 +29,15 @@
 </template>
 
 <script lang="ts" setup>
-import type { MaybeRef } from "vue";
-import { shallowRef, unref, watch } from "vue";
+import { shallowRef, watch } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import iconify from "@/scripts/icon";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = defineProps<{
-	success: MaybeRef<boolean>;
-	showing: MaybeRef<boolean>;
+	success: boolean;
+	showing: boolean;
 	text?: string;
 }>();
 
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index eb4502bf9f..c7c62852de 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -3,7 +3,7 @@
 import { EventEmitter } from "eventemitter3";
 import { type Endpoints, type entities, api as firefishApi } from "firefish-js";
 import insertTextAtCursor from "insert-text-at-cursor";
-import type { Component, Ref } from "vue";
+import type { Component, MaybeRef, Ref } from "vue";
 import { defineAsyncComponent, markRaw, ref } from "vue";
 import { i18n } from "./i18n";
 import MkDialog from "@/components/MkDialog.vue";
@@ -213,9 +213,13 @@ interface VueComponentConstructor<P, E> {
 
 type NonArrayAble<A> = A extends Array<unknown> ? never : A;
 
+type CanUseRef<T> = {
+	[K in keyof T]: MaybeRef<T[K]>;
+};
+
 export async function popup<Props, Emits>(
 	component: VueComponentConstructor<Props, Emits>,
-	props: Props,
+	props: CanUseRef<Props>,
 	events: Partial<NonArrayAble<NonNullable<Emits>>> = {},
 	disposeEvent?: keyof Partial<NonArrayAble<NonNullable<Emits>>>,
 ) {
@@ -240,6 +244,7 @@ export async function popup<Props, Emits>(
 		id,
 	};
 
+	// Hint: Vue will automatically resolve ref here, so it is safe to use ref in props
 	popups.value.push(state);
 
 	return {
diff --git a/packages/client/src/scripts/reaction-picker.ts b/packages/client/src/scripts/reaction-picker.ts
index 353a032d32..207d582343 100644
--- a/packages/client/src/scripts/reaction-picker.ts
+++ b/packages/client/src/scripts/reaction-picker.ts
@@ -24,14 +24,14 @@ class ReactionPicker {
 			},
 			{
 				done: (reaction) => {
-					this.onChosen!(reaction);
+					this.onChosen?.(reaction);
 				},
 				close: () => {
 					this.manualShowing.value = false;
 				},
 				closed: () => {
 					this.src.value = null;
-					this.onClosed!();
+					this.onClosed?.();
 				},
 			},
 		);