refactor: extract shared model selection logic into useModelSelection

- Create useModelSelection hook for settings-based model management
- Exposes settingsDoc to avoid duplicate Fireproof queries
- Update useNewSessionChat to use shared hook (-12 lines)
- Update useSimpleChat to use shared hook (-5 lines)
- Remove duplicate useFireproof calls for settings database
- Single source of truth for model selection across app

Author: jchris

vibes.diy/pkg/app/hooks/useModelSelection.ts

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { DEFAULT_CODING_MODEL, type UserSettings } from "@vibes.diy/prompts";
+import { VibesDiyEnv } from "../config/env.js";
+
+/**
+ * Hook to manage model selection with global settings fallback
+ * Shared by useNewSessionChat and useSimpleChat
+ */
+export function useModelSelection() {
+  const { useDocument } = useFireproof(VibesDiyEnv.SETTINGS_DBNAME());
+  const { doc: settingsDoc } = useDocument<UserSettings>({
+    _id: "user_settings",
+  });
+
+  const [selectedModel, setSelectedModel] = useState<string | undefined>(
+    undefined,
+  );
+
+  // Determine effective model: user selection > global setting > default
+  const effectiveModel =
+    selectedModel || settingsDoc?.model || DEFAULT_CODING_MODEL;
+
+  return {
+    selectedModel,
+    setSelectedModel,
+    effectiveModel,
+    globalModel: settingsDoc?.model || DEFAULT_CODING_MODEL,
+    showModelPickerInChat: settingsDoc?.showModelPickerInChat || false,
+    settingsDoc, // Expose for consumers that need other settings properties
+  };
+}

vibes.diy/pkg/app/hooks/useNewSessionChat.ts

@@ -1,31 +1,18 @@
-import {
-  DEFAULT_CODING_MODEL,
-  type NewSessionChatState,
-  type UserSettings,
-} from "@vibes.diy/prompts";
+import { type NewSessionChatState } from "@vibes.diy/prompts";
 import { useCallback, useRef, useState } from "react";
 import { useNavigate } from "react-router";
-import { useFireproof } from "use-fireproof";
-import { VibesDiyEnv } from "../config/env.js";
 import { trackEvent } from "../utils/analytics.js";
+import { useModelSelection } from "./useModelSelection.js";
 
-// investigate if this can be combined with useSimpleChat() by passing an option on new sessions
 export function useNewSessionChat(
   onSessionCreate: (sessionId: string) => void,
 ): NewSessionChatState {
   const [input, setInput] = useState("");
   const [isStreaming, setIsStreaming] = useState(false);
-  const [selectedModel, setSelectedModel] = useState<string | undefined>(
-    undefined,
-  );
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const navigate = useNavigate();
 
-  // Get settings document to read showModelPickerInChat preference
-  const { useDocument } = useFireproof(VibesDiyEnv.SETTINGS_DBNAME());
-  const { doc: settingsDoc } = useDocument<UserSettings>({
-    _id: "user_settings",
-  });
+  const modelSelection = useModelSelection();
 
   const sendMessage = useCallback(
     async (textOverride?: string) => {
@@ -49,15 +36,15 @@ export function useNewSessionChat(
         urlParams.set("prompt", userMessage);
 
         // If user selected a specific model, pass it to the new session
-        if (selectedModel) {
-          urlParams.set("model", selectedModel);
+        if (modelSelection.selectedModel) {
+          urlParams.set("model", modelSelection.selectedModel);
         }
 
         const targetUrl = `/chat/${newSessionId}?${urlParams.toString()}`;
 
         // Track session creation before navigation
         trackEvent("new_session_created", {
-          model: selectedModel || effectiveModel,
+          model: modelSelection.effectiveModel,
         });
 
         // Delay navigation slightly to allow analytics event to flush
@@ -68,7 +55,13 @@ export function useNewSessionChat(
         setIsStreaming(false);
       }
     },
-    [input, selectedModel, settingsDoc, onSessionCreate, navigate],
+    [
+      input,
+      modelSelection.selectedModel,
+      modelSelection.effectiveModel,
+      onSessionCreate,
+      navigate,
+    ],
   );
 
   // Stub functions that are not needed for new session creation
@@ -94,15 +87,11 @@ export function useNewSessionChat(
 
   const updateSelectedModel = useCallback(
     async (modelId: string): Promise<void> => {
-      setSelectedModel(modelId);
+      modelSelection.setSelectedModel(modelId);
     },
-    [],
+    [modelSelection],
   );
 
-  // Determine effective model: user selection > global setting > default
-  const effectiveModel =
-    selectedModel || settingsDoc?.model || DEFAULT_CODING_MODEL;
-
   return {
     input,
     setInput,
@@ -114,10 +103,10 @@ export function useNewSessionChat(
     codeReady: false, // No code ready in new session
     title: "", // No title for new session
     sessionId: null, // No session ID until created
-    showModelPickerInChat: settingsDoc?.showModelPickerInChat || false,
-    effectiveModel,
-    globalModel: settingsDoc?.model || DEFAULT_CODING_MODEL,
-    selectedModel,
+    showModelPickerInChat: modelSelection.showModelPickerInChat,
+    effectiveModel: modelSelection.effectiveModel,
+    globalModel: modelSelection.globalModel,
+    selectedModel: modelSelection.selectedModel,
     updateSelectedModel,
     saveCodeAsAiMessage,
     updateTitle,

vibes.diy/pkg/app/hooks/useSimpleChat.ts

@@ -4,13 +4,9 @@ import type {
   AiChatMessageDocument,
   ChatMessageDocument,
   ChatState,
-  UserSettings,
   SystemPromptResult,
 } from "@vibes.diy/prompts";
-import { DEFAULT_CODING_MODEL } from "@vibes.diy/prompts";
 
-import { useFireproof } from "use-fireproof";
-import { VibesDiyEnv } from "../config/env.js";
 import { saveErrorAsSystemMessage } from "./saveErrorAsSystemMessage.js";
 import { useApiKey } from "./useApiKey.js";
 import { useImmediateErrorAutoSend } from "./useImmediateErrorAutoSend.js";
@@ -24,6 +20,7 @@ import { useSystemPromptManager } from "./useSystemPromptManager.js";
 import { useThrottledUpdates } from "./useThrottledUpdates.js";
 import { RuntimeError } from "@vibes.diy/use-vibes-types";
 import { ErrorCategory, useRuntimeErrors } from "./useRuntimeErrors.js";
+import { useModelSelection } from "./useModelSelection.js";
 
 // Constants
 const TITLE_MODEL = "meta-llama/llama-3.1-8b-instruct";
@@ -63,9 +60,6 @@ export function useSimpleChat(sessionId: string): ChatState {
     updateSelectedModel,
   } = useSession(sessionId);
 
-  // Get main database directly for settings document
-  const { useDocument } = useFireproof(VibesDiyEnv.SETTINGS_DBNAME());
-
   // Function to save errors as system messages to the session database
   const saveErrorAsSystemMessageCb = useCallback(
     (error: RuntimeError, category: ErrorCategory) =>
@@ -96,10 +90,8 @@ export function useSimpleChat(sessionId: string): ChatState {
   // Reference for input element
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  // Get settings document
-  const { doc: settingsDoc } = useDocument<UserSettings>({
-    _id: "user_settings",
-  });
+  // Get model selection from shared hook
+  const modelSelection = useModelSelection();
 
   // State hooks
   const [isStreaming, setIsStreaming] = useState<boolean>(false);
@@ -113,7 +105,10 @@ export function useSimpleChat(sessionId: string): ChatState {
   const modelToUse = effectiveModel;
 
   // Use our custom hooks
-  const baseEnsureSystemPrompt = useSystemPromptManager(settingsDoc, vibeDoc);
+  const baseEnsureSystemPrompt = useSystemPromptManager(
+    modelSelection.settingsDoc,
+    vibeDoc,
+  );
 
   // Create wrapper that handles dependency updates
   const ensureSystemPrompt = useCallback(
@@ -345,10 +340,9 @@ ${code}
     sessionId: session._id,
     vibeDoc,
     selectedModel: vibeDoc?.selectedModel,
-    effectiveModel:
-      effectiveModel[0] || settingsDoc?.model || DEFAULT_CODING_MODEL,
-    globalModel: settingsDoc?.model,
-    showModelPickerInChat: settingsDoc?.showModelPickerInChat || false,
+    effectiveModel: effectiveModel[0] || modelSelection.effectiveModel,
+    globalModel: modelSelection.globalModel,
+    showModelPickerInChat: modelSelection.showModelPickerInChat,
     addScreenshot,
     docs: messages,
     setSelectedResponseId,