Add diagram/wireframe quick-analysis prompts for attached images

Vision models already understand any attached image - this just saves
retyping a good prompt for the common case of attaching a UI mockup,
wireframe, or diagram. An "Analyze as" menu next to image attachments
fills the composer with a preset prompt: describe the UI, convert to a
Mermaid diagram, generate React+Tailwind code from it, list components,
or review it for usability/accessibility issues.

Author: voidstackloop

README.md

@@ -28,7 +28,7 @@ Beyond chat, Modelforge includes an **agentic mode** — the model can read/writ
 
 **Chat & providers**
 - Local Ollama models, OpenAI, and Anthropic in one interface, with token-by-token streaming.
-- Vision support — attach images (or extract frames from a video) for models that can see them.
+- Vision support — attach images (or extract frames from a video) for models that can see them. When an image is attached, an **"Analyze as..."** menu fills the composer with a ready-made prompt for common diagram/wireframe tasks — describe the UI, convert it to a Mermaid diagram, generate React + Tailwind code from it, list its components, or review it for usability/accessibility issues.
 - Live token usage and estimated cost per message and per session (Ollama is free/local; cloud providers show a running estimate).
 
 **Organization**

frontend/src/lib/translations.ts

@@ -121,6 +121,12 @@ export interface Dictionary {
     modelsDirApplied: string;
     modelsDirFailed: string;
     modelsDirExternalWarning: string;
+    analyzeAs: string;
+    analyzeDescribeUI: string;
+    analyzeToMermaid: string;
+    analyzeToCode: string;
+    analyzeListComponents: string;
+    analyzeFindIssues: string;
     resetToDefault: string;
     usingCustomPrompt: string;
     dataManagement: string;
@@ -280,6 +286,12 @@ export const en: Dictionary = {
     modelsDirApplied: "Applied — Ollama restarted with the new location.",
     modelsDirFailed: "Couldn't restart Ollama with the new location. Try starting it manually.",
     modelsDirExternalWarning: "Saved, but Ollama is running outside this app — restart it manually (with OLLAMA_MODELS set to this folder) for the change to take effect.",
+    analyzeAs: "Analyze as...",
+    analyzeDescribeUI: "Describe UI/wireframe",
+    analyzeToMermaid: "Convert to Mermaid diagram",
+    analyzeToCode: "Convert to React + Tailwind code",
+    analyzeListComponents: "List UI components",
+    analyzeFindIssues: "Find usability/accessibility issues",
     resetToDefault: "Reset to default",
     usingCustomPrompt: "Custom prompt for this chat",
     dataManagement: "Data management",
@@ -447,6 +459,12 @@ export const tr: Dictionary = {
     modelsDirApplied: "Uygulandı — Ollama yeni konumla yeniden başlatıldı.",
     modelsDirFailed: "Ollama yeni konumla yeniden başlatılamadı. Elle başlatmayı deneyin.",
     modelsDirExternalWarning: "Kaydedildi, ancak Ollama bu uygulamanın dışında çalışıyor — değişikliğin etkili olması için Ollama'yı bu klasör OLLAMA_MODELS olarak ayarlanmış şekilde elle yeniden başlatın.",
+    analyzeAs: "Şu şekilde analiz et...",
+    analyzeDescribeUI: "UI/wireframe'i betimle",
+    analyzeToMermaid: "Mermaid diyagramına dönüştür",
+    analyzeToCode: "React + Tailwind koduna dönüştür",
+    analyzeListComponents: "UI bileşenlerini listele",
+    analyzeFindIssues: "Kullanılabilirlik/erişilebilirlik sorunlarını bul",
     resetToDefault: "Varsayılana dön",
     usingCustomPrompt: "Bu sohbet için özel istem",
     dataManagement: "Veri yönetimi",

frontend/src/pages/Chat.tsx

@@ -90,6 +90,42 @@ const RAG_THRESHOLD_CHARS = 20_000;
 // click each time — write_file and run_command always require explicit
 // per-call approval since they have real, potentially irreversible effects.
 const READ_ONLY_TOOLS = new Set(["read_file", "list_dir", "search_files"]);
+
+// Vision models can already reason over any attached image — these just save
+// re-typing a good prompt for the common "I attached a diagram/wireframe"
+// case. Selecting one fills the composer; the user can still edit before sending.
+interface DiagramPromptPreset {
+    id: string;
+    labelKey: "analyzeDescribeUI" | "analyzeToMermaid" | "analyzeToCode" | "analyzeListComponents" | "analyzeFindIssues";
+    prompt: string;
+}
+const DIAGRAM_PROMPT_PRESETS: DiagramPromptPreset[] = [
+    {
+        id: "describe",
+        labelKey: "analyzeDescribeUI",
+        prompt: "Describe this UI/wireframe in detail: overall layout, every visible component, and how they're organized/hierarchical.",
+    },
+    {
+        id: "mermaid",
+        labelKey: "analyzeToMermaid",
+        prompt: "Convert this diagram into a Mermaid diagram definition (pick whichever Mermaid diagram type — flowchart, sequence, class, etc. — best fits what's shown).",
+    },
+    {
+        id: "code",
+        labelKey: "analyzeToCode",
+        prompt: "Generate React + Tailwind CSS code that reproduces this UI mockup/wireframe as closely as possible.",
+    },
+    {
+        id: "components",
+        labelKey: "analyzeListComponents",
+        prompt: "List every distinct UI component visible in this image, grouped by type (buttons, inputs, navigation, cards, etc.).",
+    },
+    {
+        id: "issues",
+        labelKey: "analyzeFindIssues",
+        prompt: "Review this UI/wireframe for usability or accessibility issues and suggest concrete improvements.",
+    },
+];
 // Caps how many automatic tool-result -> model-continuation round trips can
 // happen for a single user turn, so a model that keeps calling tools without
 // ever producing a final answer can't loop indefinitely.
@@ -551,6 +587,11 @@ export default function Chat() {
         setImageAttachments((prev) => prev.filter((f) => f.path !== path));
     }
 
+    function applyDiagramPreset(prompt: string) {
+        setInput(prompt);
+        textareaRef.current?.focus();
+    }
+
     async function handleAttachFolder() {
         const result = await window.api.files.openFolderAndRead();
         if (!result || result.files.length === 0) return;
@@ -1528,6 +1569,25 @@ export default function Chat() {
                                     </button>
                                 </div>
                             ))}
+                            {imageAttachments.length > 0 && (
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger
+                                        render={
+                                            <button className="flex items-center gap-1 rounded-md border border-dashed border-border px-2 py-1 text-xs text-muted-foreground hover:bg-muted">
+                                                <Sparkles className="size-3" />
+                                                {t.analyzeAs}
+                                            </button>
+                                        }
+                                    />
+                                    <DropdownMenuContent>
+                                        {DIAGRAM_PROMPT_PRESETS.map((preset) => (
+                                            <DropdownMenuItem key={preset.id} onClick={() => applyDiagramPreset(preset.prompt)}>
+                                                {t[preset.labelKey]}
+                                            </DropdownMenuItem>
+                                        ))}
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            )}
                             {indexingFolder && (
                                 <div className="flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
                                     <Loader2 className="size-3 animate-spin" />