diff --git a/web/components/Dialog.tsx b/web/components/Dialog.tsx
index e21f195..18e0ded 100644
--- a/web/components/Dialog.tsx
+++ b/web/components/Dialog.tsx
@@ -1,11 +1,11 @@
-import type { HTMLAttributes } from 'preact'
+import type { ComponentChildren, HTMLAttributes } from 'preact'
 import { useState } from 'preact/hooks'
 
 import { navigate, url } from '@01edu/signal-router'
 
 type DialogProps = {
   id: string
-  children: preact.ComponentChildren
+  children: ComponentChildren
 } & HTMLAttributes<HTMLDialogElement>
 
 export const Dialog = ({
diff --git a/web/pages/DeploymentPage.tsx b/web/pages/DeploymentPage.tsx
index 27d1afa..748747f 100644
--- a/web/pages/DeploymentPage.tsx
+++ b/web/pages/DeploymentPage.tsx
@@ -39,7 +39,7 @@ import { computed, effect, Signal, untracked } from '@preact/signals'
 import { api, type ApiOutput } from '../lib/api.ts'
 import { QueryHistory } from '../components/QueryHistory.tsx'
 
-import { JSX } from 'preact'
+import type { ComponentChildren } from 'preact'
 import {
   deployments,
   querier,
@@ -86,9 +86,12 @@ effect(() => {
   dep && schema.fetch({ url: dep })
 })
 
+const tabNames = ['tables', 'queries', 'logs', 'metrics'] as const
+type TabName = (typeof tabNames)[number]
+
 const activeTab = computed(() => {
-  const tab = url.params.tab as (keyof typeof TabViews)
-  return tab in TabViews ? tab : 'tables'
+  const tab = url.params.tab as TabName
+  return tabNames.includes(tab) ? tab : 'tables'
 })
 
 effect(() => {
@@ -1035,7 +1038,7 @@ const InfoBlock = (
 }
 
 // Recursive JSON value renderer with syntax highlighting
-const JsonValue = ({ value }: { value: unknown }): JSX.Element => {
+const JsonValue = ({ value }: { value: unknown }) => {
   if (typeof value === 'object' && value !== null) {
     if (Object.keys(value).length === 0) {
       return <span class='text-base-content/40 italic'>empty object</span>
@@ -1341,7 +1344,7 @@ const TabViews = {
   logs: <LogsViewer />,
   metrics: <MetricsViewer />,
   // Add other tab views here as needed
-}
+} satisfies Record<TabName, ComponentChildren>
 
 effect(() => {
   const { dep, tab } = url.params
@@ -2277,14 +2280,14 @@ const InsertRow = () => {
 }
 
 type DrawerTab = 'history' | 'insert' | 'view-row' | 'view-log'
-const drawerViews: Record<DrawerTab, JSX.Element> = {
+const drawerViews: Record<DrawerTab, ComponentChildren> = {
   history: <QueryHistory />,
   insert: <InsertRow />,
   'view-row': <RowDetails />,
   'view-log': <LogDetails />,
 } as const
 
-const Drawer = ({ children }: { children: JSX.Element }) => (
+const Drawer = ({ children }: { children: ComponentChildren }) => (
   <div class='drawer h-full relative' dir='rtl'>
     <input
       id='drawer-right'
diff --git a/web/pages/SettingsPage.tsx b/web/pages/SettingsPage.tsx
index 7601701..2b208ba 100644
--- a/web/pages/SettingsPage.tsx
+++ b/web/pages/SettingsPage.tsx
@@ -17,7 +17,7 @@ import {
   X,
 } from 'lucide-preact'
 import { DialogModal } from '../components/Dialog.tsx'
-import type { TargetedEvent } from 'preact'
+import type { ComponentChildren, TargetedEvent } from 'preact'
 import { effect, signal } from '@preact/signals'
 
 // API Signals
@@ -108,9 +108,9 @@ const Layout = ({
 }: {
   title: string
   desc: string
-  actions?: preact.ComponentChildren
+  actions?: ComponentChildren
   error?: string | null
-  children: preact.ComponentChildren
+  children: ComponentChildren
 }) => (
   <div class='flex flex-col h-full min-h-0 pb-16'>
     <div class='border-b border-base-300 bg-base-100 px-8 py-6 flex items-center justify-between gap-4'>
@@ -137,8 +137,8 @@ const Layout = ({
 const Card = (
   { title, action, children }: {
     title: string
-    action?: preact.ComponentChildren
-    children: preact.ComponentChildren
+    action?: ComponentChildren
+    children: ComponentChildren
   },
 ) => (
   <div class='bg-base-200 rounded-lg border border-base-300'>
@@ -155,7 +155,7 @@ const EditCard = (
     title: string
     editKey: string
     saving?: boolean
-    children: preact.ComponentChildren
+    children: ComponentChildren
   },
 ) => (
   <div class='bg-base-200 rounded-lg border border-base-300'>
@@ -306,7 +306,7 @@ const Accordion = ({
   editKey: string
   urlKey: string
   hideOnEdit?: boolean
-  children: preact.ComponentChildren
+  children: ComponentChildren
 }) => {
   const param = url.params[urlKey]
   const enabled = param != null ? param === 'true' : value