Harden dependency recovery and SSR imports

Author: zebbern

app/components/@settings/tabs/github/components/GitHubConnection.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, type FormEvent } from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '~/components/ui/Button';
 import { cn } from '~/utils/cn';
@@ -21,10 +21,10 @@ interface GitHubConnectionProps {
 export function GitHubConnection({ connectionTest, onTestConnection }: GitHubConnectionProps) {
   const { isConnected, isLoading, isConnecting, connect, disconnect, error } = useGitHubConnection();
 
-  const [token, setToken] = React.useState('');
-  const [tokenType, setTokenType] = React.useState<'classic' | 'fine-grained'>('classic');
+  const [token, setToken] = useState('');
+  const [tokenType, setTokenType] = useState<'classic' | 'fine-grained'>('classic');
 
-  const handleConnect = async (e: React.FormEvent) => {
+  const handleConnect = async (e: FormEvent) => {
     e.preventDefault();
     logger.debug('handleConnect called with token:', token ? 'token provided' : 'no token', 'tokenType:', tokenType);
 

app/components/@settings/tabs/providers/local/StatusDashboard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import { Button } from '~/components/ui/Button';
 import { Card, CardContent } from '~/components/ui/Card';
 import { useLocalModelHealth } from '~/lib/hooks/useLocalModelHealth';
@@ -47,7 +47,7 @@ function StatusDashboard({ onBack }: { onBack: () => void }) {
                   <div className="flex items-center gap-3">
                     <div className="w-10 h-10 rounded-lg bg-devonz-elements-background-depth-3 flex items-center justify-center">
                       {PROVIDER_ICONS[status.provider as keyof typeof PROVIDER_ICONS] ? (
-                        React.createElement(PROVIDER_ICONS[status.provider as keyof typeof PROVIDER_ICONS], {
+                        createElement(PROVIDER_ICONS[status.provider as keyof typeof PROVIDER_ICONS], {
                           className: 'w-5 h-5 text-devonz-elements-textPrimary',
                         })
                       ) : (

app/components/chat/FilePreview.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import type { FC } from 'react';
 
 interface FilePreviewProps {
   files: File[];
   imageDataList: string[];
   onRemove: (index: number) => void;
 }
 
-const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemove }) => {
+const FilePreview: FC<FilePreviewProps> = ({ files, imageDataList, onRemove }) => {
   if (!files || files.length === 0) {
     return null;
   }

app/components/ui/SearchInput.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import type { InputHTMLAttributes, Ref } from 'react';
 import { cn } from '~/utils/cn';
 import { Input } from './Input';
 import { motion, AnimatePresence } from 'framer-motion';
 
-interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** Function to call when the clear button is clicked */
   onClear?: () => void;
 
@@ -20,7 +20,7 @@ interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   loading?: boolean;
 
   /** Ref forwarded to the underlying input element */
-  ref?: React.Ref<HTMLInputElement>;
+  ref?: Ref<HTMLInputElement>;
 }
 
 /**

app/lib/agent/prompts.ts

@@ -97,6 +97,9 @@ You operate in a local Node.js runtime on the user's machine.
 - NEVER use \`npm install <package>\` to add new dependencies — this does NOT update package.json
 - Instead, ALWAYS update package.json via devonz_write_file to add packages to dependencies/devDependencies
 - Then run a single \`npm install\` command to install everything
+- NEVER write \`"latest"\` in package.json — use the version already present in the template, a vetted compatible semver range, or skip the package if you're unsure
+- NEVER invent package names or use outdated/renamed packages; if a package name is uncertain, prefer an existing dependency or a built-in browser/React/Tailwind solution
+- When fixing a missing-package error, first verify whether the import should change before adding a new dependency
 - WRONG: \`npm install react-router-dom zustand\` (packages won't be in package.json)
 - RIGHT: Write updated package.json with new packages, then run \`npm install\`
 

app/lib/common/prompts/new-prompt.ts

@@ -134,6 +134,9 @@ export const getFineTunedPrompt = (
     - NEVER use "npm install <package>" shell commands to add new dependencies
     - Instead, ALWAYS update package.json via a devonzAction type="file" to add packages to "dependencies" or "devDependencies"
     - Then run a single "npm install" shell action to install everything at once
+    - NEVER write \`"latest"\` in package.json — use the version already present in the template, a vetted compatible semver range, or skip the package if you're unsure
+    - NEVER invent package names or use outdated/renamed packages; if a package name is uncertain, prefer an existing dependency or a built-in browser/React/Tailwind solution
+    - When fixing a missing-package error, first verify whether the import should be changed before adding a new dependency
     - Why: Shell-only npm install does NOT persist dependencies in package.json, causing cascading failures when the dev server restarts
     - Correct workflow for adding new packages:
       1. Write updated package.json with new packages added to dependencies/devDependencies
@@ -144,7 +147,7 @@ export const getFineTunedPrompt = (
 </system_constraints>
 
 <technology_preferences>
-  - Use Vite for web servers (Vite 6 for stability, latest version with native Rolldown support for bleeding-edge)
+  - Use Vite for web servers, but keep the version already present in package.json/template unless the user explicitly asks for an upgrade
   - NEVER hardcode port 5173 — it is reserved by the Devonz host runtime. If you need to set a port, use 3000
   - Do NOT set custom ports in vite.config or next.config unless the user explicitly requests a specific port
   - ALWAYS choose Node.js scripts over shell scripts

app/lib/runtime/action-runner.ts

@@ -31,6 +31,7 @@ import {
   type ChangeType,
 } from '~/lib/stores/staging';
 import { workbenchStore } from '~/lib/stores/workbench';
+import { getPreferredPackageVersion } from '~/utils/dependencyCatalog';
 
 const logger = createScopedLogger('ActionRunner');
 
@@ -1130,13 +1131,37 @@ export class ActionRunner {
       // Step 3: If missing packages found, inject into package.json and install
       if (missingPackages.size > 0) {
         const missing = [...missingPackages];
-        logger.info(`Dependency validator found ${missing.length} missing package(s): ${missing.join(', ')}`);
+        const installable: Array<{ name: string; version: string }> = [];
+        const unverified: string[] = [];
+
+        for (const pkg of missing) {
+          const preferredVersion = getPreferredPackageVersion(pkg);
+
+          if (preferredVersion) {
+            installable.push({ name: pkg, version: preferredVersion });
+          } else {
+            unverified.push(pkg);
+          }
+        }
+
+        logger.info(
+          `Dependency validator found ${missing.length} missing package(s): ${missing.join(', ')}. Auto-installing ${installable.length} vetted package(s).`,
+        );
+
+        if (unverified.length > 0) {
+          logger.warn(
+            `Skipped auto-install for ${unverified.length} unverified package(s): ${unverified.join(', ')}. Leaving the import error visible so Devonz can correct the package name instead of installing a hallucinated dependency.`,
+          );
+        }
+
+        if (installable.length === 0) {
+          return;
+        }
 
-        // Inject missing packages into package.json dependencies
         const deps = (pkgJson.dependencies as Record<string, string>) || {};
 
-        for (const pkg of missing) {
-          deps[pkg] = 'latest';
+        for (const { name, version } of installable) {
+          deps[name] = version;
         }
 
         pkgJson.dependencies = deps;

app/lib/services/autoFixService.ts

@@ -21,6 +21,7 @@ import {
 } from '~/lib/stores/autofix';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { getRecoverySuggestion } from '~/utils/errors/errorConfig';
+import { buildMissingPackageFixInstructions } from '~/utils/dependencyCatalog';
 
 const logger = createScopedLogger('AutoFixService');
 
@@ -83,17 +84,7 @@ function classifyError(error: AutoFixError): ClassifiedError {
         category: 'import-resolution',
         missingPackage: packageName,
         sourceFile,
-        fixInstructions: [
-          `**Root Cause**: The npm package \`${packageName}\` is imported in \`${sourceFile}\` but is NOT installed.`,
-          '',
-          '**Required Fix** (do ALL three steps):',
-          `1. Add \`"${packageName}": "latest"\` to the \`"dependencies"\` object in \`package.json\` (use a file action, NOT npm install <pkg>)`,
-          '2. Run `npm install --legacy-peer-deps` as a shell action',
-          '3. Run `npm run dev` as a start action to restart the dev server',
-          '',
-          '**CRITICAL**: Do NOT modify the import statement in the source file — the import is correct, the package just needs to be installed.',
-          '**CRITICAL**: Do NOT rewrite package.json from scratch — only ADD the missing package to the existing dependencies.',
-        ].join('\n'),
+        fixInstructions: buildMissingPackageFixInstructions(packageName, sourceFile),
       };
     }
 
@@ -155,14 +146,7 @@ function classifyError(error: AutoFixError): ClassifiedError {
       return {
         category: 'import-resolution',
         missingPackage: packageName,
-        fixInstructions: [
-          `**Root Cause**: Module \`${packageName}\` is not installed.`,
-          '',
-          '**Required Fix**:',
-          `1. Add \`"${packageName}": "latest"\` to package.json dependencies`,
-          '2. Run `npm install --legacy-peer-deps`',
-          '3. Restart the dev server with `npm run dev`',
-        ].join('\n'),
+        fixInstructions: buildMissingPackageFixInstructions(packageName),
       };
     }
   }

app/utils/dependencyCatalog.test.ts

@@ -0,0 +1,28 @@
+/// <reference types="vitest/globals" />
+import { buildMissingPackageFixInstructions, getPreferredPackageVersion } from './dependencyCatalog';
+
+describe('dependencyCatalog', () => {
+  it('returns a curated version for vetted packages', () => {
+    expect(getPreferredPackageVersion('framer-motion')).toBe('^11.15.0');
+    expect(getPreferredPackageVersion('@radix-ui/react-dialog')).toBe('^1.1.2');
+  });
+
+  it('returns undefined for unverified packages', () => {
+    expect(getPreferredPackageVersion('totally-made-up-package')).toBeUndefined();
+  });
+
+  it('builds known-package instructions without latest', () => {
+    const instructions = buildMissingPackageFixInstructions('framer-motion', 'src/App.tsx');
+
+    expect(instructions).toContain('"framer-motion": "^11.15.0"');
+    expect(instructions).toContain('src/App.tsx');
+    expect(instructions).not.toContain('"latest"');
+  });
+
+  it('requires verification for unknown packages', () => {
+    const instructions = buildMissingPackageFixInstructions('totally-made-up-package');
+
+    expect(instructions).toContain('Verify that `totally-made-up-package` is a real, current npm package');
+    expect(instructions).toContain('NEVER `"latest"`');
+  });
+});