User changes: cleanup inspector, update docs, remove old icons, refactor versions store

- Removed old Inspector.tsx (replaced by InspectorPanel.tsx)
- Added inspector-types.ts for shared type definitions
- Updated multiple component imports (BaseChat, Chat, ChatBox, AIQuickActions, etc.)
- Refactored versions.ts store
- Updated README and docs (API-ROUTES, ARCHITECTURE, COMPONENTS, etc.)
- Removed unused icon assets (d.ico, icon.icns, icon.ico, icon.png)
- Updated .gitignore
- Added exports to previews.ts and staging.ts stores
- Updated useMessageParser hook

Author: zebbern

.gitignore

@@ -35,6 +35,7 @@ _worker.bundle
 
 Modelfile
 modelfiles
+build-output.log
 
 # docs ignore
 site

README.md

@@ -37,41 +37,22 @@ pnpm run dev
 # Open http://localhost:5173
 ```
 
-> [!note]
 > First load can take up to 2 minutes while dependencies compile.
-> 
-> <a href="docs/">Full Project Documentation</a>
 
 ---
 
 ## Why Devonz?
 
-- **22 AI providers** ➺ OpenAI, Anthropic, Google, Groq, Z.ai, Ollama, and more. Swap models mid-conversation.
-- **Full dev environment in the browser** ➺ editor, terminal, live preview, all powered by WebContainers.
-- **One-click deploy** ➺ push to GitHub, GitLab, Netlify, or Vercel directly from the UI.
-- **MCP tools** ➺ extend the agent with Model Context Protocol servers for specialized workflows.
-- **Auto-fix** ➺ terminal error detection catches failures and patches them automatically.
-- **Image context** ➺ attach screenshots or design files to prompts for visual understanding.
-- **Design Palette** ➺ pick custom color themes that get injected into AI-generated apps.
-- **3D support** ➺ generate React Three Fiber apps with automatic version pinning and peer dependency resolution.
-- **Template gallery** ➺ start from popular frameworks and boilerplates, then customize with AI.
-- **State-of-the-art AI SDK** ➺ built on the Vercel AI SDK for best-in-class LLM performance and reliability.
-
-> [!important]
->
-> Agent Mode VS Standard Mode
-> 
-> **Agent Mode** is built for tasks that require context before action — complex multi-step workflows
-> (research → plan → execute), operations where each step depends on prior results, or any task where
-> you'd want to inspect files before modifying them. It's especially powerful when paired with
-> `devonz_search_in_files` to verify patterns before committing changes. Expect higher token usage
-> in exchange for more deliberate, accurate execution.
-> 
-> **Standard Mode** is the right call when you can describe the full output upfront. Single-shot
-> website generation, simple file creation tasks, and straightforward prompts all benefit from
-> Standard Mode's lower latency and reduced token overhead.
-> 
-> If the task requires *knowing something before doing something* — Agent Mode. Everything else — Standard Mode.
+- **22 AI providers** — OpenAI, Anthropic, Google, Groq, Z.ai, Ollama, and more. Swap models mid-conversation.
+- **Full dev environment in the browser** — editor, terminal, live preview, all powered by WebContainers.
+- **One-click deploy** — push to GitHub, GitLab, Netlify, or Vercel directly from the UI.
+- **MCP tools** — extend the agent with Model Context Protocol servers for specialized workflows.
+- **Auto-fix** — terminal error detection catches failures and patches them automatically.
+- **Image context** — attach screenshots or design files to prompts for visual understanding.
+- **Design Palette** — pick custom color themes that get injected into AI-generated apps.
+- **3D support** — generate React Three Fiber apps with automatic version pinning and peer dependency resolution.
+- **Template gallery** — start from popular frameworks and boilerplates, then customize with AI.
+- **State-of-the-art AI SDK** — built on the Vercel AI SDK for best-in-class LLM performance and reliability.
 
 ---
 
@@ -81,13 +62,14 @@ pnpm run dev
 - Natural language to full-stack apps (Node.js-based)
 - 22 LLM providers with hot-swappable model selection
 - MCP (Model Context Protocol) tool integration
-- MCP Schema Sanitization ➺ Automatic schema compatibility for Google Gemini (strips unsupported constructs)
 - Automatic error detection and auto-fix from terminal output
 - Attach images to prompts for visual context
-- **Extended Thinking** ➺ AI reasoning visualization for Anthropic Claude and Google Gemini
-- **Formatted Tool Results** ➺ MCP tool results render as formatted markdown instead of raw JSON
-- **Design Palette** ➺ UI for picking custom color themes injected into generated code
-- **3D App Generation** ➺ React Three Fiber support with automatic version pinning for React 18/19
+- **Extended Thinking** — AI reasoning visualization for Anthropic Claude and Google Gemini
+- **MCP Schema Sanitization** — Automatic schema compatibility for Google Gemini (strips unsupported constructs)
+- **MCP Auto-Approve** — Per-server auto-approve toggle for trusted MCP servers
+- **Formatted Tool Results** — MCP tool results render as formatted markdown instead of raw JSON
+- **Design Palette** — UI for picking custom color themes injected into generated code
+- **3D App Generation** — React Three Fiber support with automatic version pinning for React 18/19
 
 **Development Environment**
 - In-browser code editor (CodeMirror) with syntax highlighting
@@ -97,7 +79,7 @@ pnpm run dev
 - File locking to prevent conflicts during generation
 
 **Security & Reliability**
-- **Security Hardened** ➺ `withSecurity()` on all 35+ API routes with input validation, rate limiting options, URL allowlisting
+- **Security Hardened** — `withSecurity()` on all 35+ API routes with input validation, rate limiting options, URL allowlisting
 
 **Deployment & Integrations**
 - GitHub / GitLab push and repo management
@@ -252,7 +234,7 @@ docker compose --profile auto-update up -d
 <summary>Expand file tree</summary>
 
 ```
-devonz.diy/
+bolt.diy/
 ├── app/
 │   ├── components/         # React components
 │   │   ├── @settings/      # Settings panel (14 tabs)
@@ -302,9 +284,9 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md) for detailed guidelines.
 
 ## Acknowledgments
 
-- [devonz.diy](https://github.com/stackblitz-labs/devonz.diy) ➺ original project foundation
-- [StackBlitz WebContainers](https://webcontainers.io/) ➺ in-browser dev environment
-- [Vercel AI SDK](https://sdk.vercel.ai/) ➺ AI capabilities
+- [bolt.diy](https://github.com/stackblitz-labs/bolt.diy) — original project foundation
+- [StackBlitz WebContainers](https://webcontainers.io/) — in-browser dev environment
+- [Vercel AI SDK](https://sdk.vercel.ai/) — AI capabilities
 
 ---
 
@@ -314,4 +296,4 @@ See [CONTRIBUTING.md](docs/CONTRIBUTING.md) for detailed guidelines.
   <a href="https://github.com/zebbern/Devonz">GitHub</a> ·
   <a href="https://github.com/zebbern/Devonz/issues">Issues</a> ·
   <a href="docs/">Documentation</a>
-</div>
+</div>

app/components/chat/BaseChat.tsx

@@ -29,7 +29,7 @@ import { useStore } from '@nanostores/react';
 import { StickToBottom, useStickToBottomContext } from '~/lib/hooks';
 import { ChatBox } from './ChatBox';
 import type { DesignScheme } from '~/types/design-scheme';
-import type { ElementInfo } from '~/components/workbench/Inspector';
+import type { ElementInfo } from '~/components/workbench/inspector-types';
 import LlmErrorAlert from './LLMApiAlert';
 import { ResizeHandle } from '~/components/ui/ResizeHandle';
 import { createScopedLogger } from '~/utils/logger';

app/components/chat/Chat.client.tsx

@@ -26,7 +26,7 @@ import { streamingState } from '~/lib/stores/streaming';
 import { filesToArtifacts } from '~/utils/fileUtils';
 import { supabaseConnection } from '~/lib/stores/supabase';
 import { defaultDesignScheme, type DesignScheme } from '~/types/design-scheme';
-import type { ElementInfo } from '~/components/workbench/Inspector';
+import type { ElementInfo } from '~/components/workbench/inspector-types';
 import type { TextUIPart, FileUIPart, Attachment } from '@ai-sdk/ui-utils';
 import { mcpStore } from '~/lib/stores/mcp';
 import type { LlmErrorAlertType } from '~/types/actions';

app/components/chat/ChatBox.tsx

@@ -16,7 +16,7 @@ import type { ProviderInfo } from '~/types/model';
 import type { ModelInfo } from '~/lib/modules/llm/types';
 import { ColorSchemeDialog } from '~/components/ui/ColorSchemeDialog';
 import type { DesignScheme } from '~/types/design-scheme';
-import type { ElementInfo } from '~/components/workbench/Inspector';
+import type { ElementInfo } from '~/components/workbench/inspector-types';
 import { McpTools } from './MCPTools';
 import { WebSearch } from './WebSearch.client';
 import { ChatModeSelector } from './ChatModeSelector';

app/components/workbench/AIQuickActions.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import type { ElementInfo } from './Inspector';
+import type { ElementInfo } from './inspector-types';
 
 interface AiQuickActionsProps {
   selectedElement: ElementInfo | null;

app/components/workbench/Inspector.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, memo } from 'react';
-import type { ElementInfo } from './Inspector';
+import type { ElementInfo } from './inspector-types';
 import { BoxModelEditor } from './BoxModelEditor';
 import { AiQuickActions } from './AIQuickActions';
 import { ElementTreeNavigator } from './ElementTreeNavigator';

app/components/workbench/InspectorPanel.tsx

@@ -8,7 +8,7 @@ import { PortDropdown } from './PortDropdown';
 import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
 import { ExpoQrModal } from '~/components/workbench/ExpoQrModal';
 import { InspectorPanel } from './InspectorPanel';
-import type { ElementInfo } from './Inspector';
+import type { ElementInfo } from './inspector-types';
 import { getPreviewErrorHandler } from '~/utils/previewErrorHandler';
 import { createScopedLogger } from '~/utils/logger';
 

app/components/workbench/Preview.tsx

@@ -1,4 +1,4 @@
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { toast } from 'react-toastify';
@@ -120,6 +120,11 @@ export const Versions = memo(() => {
 
   const [searchQuery, setSearchQuery] = useState('');
 
+  // Backfill missing thumbnails when the panel is opened
+  useEffect(() => {
+    versionsStore.backfillMissingThumbnails();
+  }, []);
+
   const allVersions = versionsStore.getAllVersions();
 
   const filteredVersions = allVersions.filter(