feat(dashboard): convert 4 Sections to Hook components

- Create PersonalitySectionHook (medium complexity)
- Create DebugSectionHook (simple complexity)
- Create ExpressionSectionHook (high complexity)
- Create BotInfoSectionHook (simple complexity)
- Update hooks/index.ts with exports
- Pattern validated across different complexity levels

dashboard/src/routes/config/bot/hooks/BotInfoSectionHook.tsx

@@ -0,0 +1,15 @@
+import type { FieldHookComponent } from '@/lib/field-hooks'
+import { BotInfoSection } from '../sections/BotInfoSection'
+
+/**
+ * BotInfoSection as a Field Hook Component
+ * This component replaces the entire 'bot' nested config section rendering
+ */
+export const BotInfoSectionHook: FieldHookComponent = ({ value, onChange }) => {
+  return (
+    <BotInfoSection
+      config={value as any}
+      onChange={(newConfig) => onChange?.(newConfig)}
+    />
+  )
+}

dashboard/src/routes/config/bot/hooks/DebugSectionHook.tsx

@@ -0,0 +1,15 @@
+import type { FieldHookComponent } from '@/lib/field-hooks'
+import { DebugSection } from '../sections/DebugSection'
+
+/**
+ * DebugSection as a Field Hook Component
+ * This component replaces the entire 'debug' nested config section rendering
+ */
+export const DebugSectionHook: FieldHookComponent = ({ value, onChange }) => {
+  return (
+    <DebugSection
+      config={value as any}
+      onChange={(newConfig) => onChange?.(newConfig)}
+    />
+  )
+}

dashboard/src/routes/config/bot/hooks/ExpressionSectionHook.tsx

@@ -0,0 +1,15 @@
+import type { FieldHookComponent } from '@/lib/field-hooks'
+import { ExpressionSection } from '../sections/ExpressionSection'
+
+/**
+ * ExpressionSection as a Field Hook Component
+ * This component replaces the entire 'expression' nested config section rendering
+ */
+export const ExpressionSectionHook: FieldHookComponent = ({ value, onChange }) => {
+  return (
+    <ExpressionSection
+      config={value as any}
+      onChange={(newConfig) => onChange?.(newConfig)}
+    />
+  )
+}

dashboard/src/routes/config/bot/hooks/PersonalitySectionHook.tsx

@@ -0,0 +1,15 @@
+import type { FieldHookComponent } from '@/lib/field-hooks'
+import { PersonalitySection } from '../sections/PersonalitySection'
+
+/**
+ * PersonalitySection as a Field Hook Component
+ * This component replaces the entire 'personality' nested config section rendering
+ */
+export const PersonalitySectionHook: FieldHookComponent = ({ value, onChange }) => {
+  return (
+    <PersonalitySection
+      config={value as any}
+      onChange={(newConfig) => onChange?.(newConfig)}
+    />
+  )
+}

dashboard/src/routes/config/bot/hooks/index.ts

@@ -5,3 +5,7 @@
 export { useAutoSave, useConfigAutoSave } from './useAutoSave'
 export type { UseAutoSaveOptions, UseAutoSaveReturn, AutoSaveState } from './useAutoSave'
 export { ChatSectionHook } from './ChatSectionHook'
+export { PersonalitySectionHook } from './PersonalitySectionHook'
+export { DebugSectionHook } from './DebugSectionHook'
+export { ExpressionSectionHook } from './ExpressionSectionHook'
+export { BotInfoSectionHook } from './BotInfoSectionHook'