Add toast notifications and Ollama status awareness

A lightweight toast system (no new dependency) gives feedback on
actions that were previously silent — API key saves, custom provider
add/remove, exports, copy-as-markdown — and surfaces Ollama startup
failures with an actionable message. The chat view now shows an
inline "Ollama isn't running" banner with a Start button whenever an
Ollama model is selected while the server is offline, instead of
letting the first send fail with a raw network error.

Author: voidstackloop

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import Settings from "./pages/Settings";
 import Compare from "./pages/Compare";
 import UsageDashboard from "./pages/UsageDashboard";
 import { ThemeProvider } from "@/components/theme-provider";
+import { ToastProvider } from "@/components/toast";
 import { SessionsProvider } from "@/lib/sessions-context";
 import { I18nProvider } from "@/lib/i18n";
 
@@ -26,9 +27,11 @@ function App() {
   return (
     <ThemeProvider defaultTheme="system" storageKey="app-ui-theme">
       <I18nProvider>
-        <SessionsProvider>
-          <RouterProvider router={router} />
-        </SessionsProvider>
+        <ToastProvider>
+          <SessionsProvider>
+            <RouterProvider router={router} />
+          </SessionsProvider>
+        </ToastProvider>
       </I18nProvider>
     </ThemeProvider>
   );

frontend/src/components/toast.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable react-refresh/only-export-components -- the provider and its
+   hook are one inseparable unit; splitting them into separate files would be
+   pure ceremony for a component this small. */
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { CheckCircle2, AlertCircle, Info, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type ToastKind = "success" | "error" | "info";
+
+interface Toast {
+    id: number;
+    kind: ToastKind;
+    message: string;
+}
+
+const TOAST_DURATION_MS = 4000;
+
+const ToastContext = createContext<((kind: ToastKind, message: string) => void) | null>(null);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+    const [toasts, setToasts] = useState<Toast[]>([]);
+    const nextId = useRef(1);
+
+    const push = useCallback((kind: ToastKind, message: string) => {
+        const id = nextId.current++;
+        setToasts((prev) => [...prev, { id, kind, message }]);
+        setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), TOAST_DURATION_MS);
+    }, []);
+
+    return (
+        <ToastContext.Provider value={push}>
+            {children}
+            <div className="pointer-events-none fixed right-4 bottom-4 z-50 flex w-80 flex-col gap-2">
+                {toasts.map((toast) => (
+                    <div
+                        key={toast.id}
+                        role="status"
+                        className={cn(
+                            "pointer-events-auto flex items-start gap-2 rounded-lg border p-3 text-sm shadow-lg",
+                            "animate-in slide-in-from-bottom-2 fade-in bg-background",
+                            toast.kind === "error" ? "border-destructive/50" : "border-border"
+                        )}
+                    >
+                        {toast.kind === "success" && <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-primary" />}
+                        {toast.kind === "error" && <AlertCircle className="mt-0.5 size-4 shrink-0 text-destructive" />}
+                        {toast.kind === "info" && <Info className="mt-0.5 size-4 shrink-0 text-muted-foreground" />}
+                        <span className="flex-1">{toast.message}</span>
+                        <button
+                            onClick={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
+                            className="shrink-0 text-muted-foreground hover:text-foreground"
+                            aria-label="Dismiss notification"
+                        >
+                            <X className="size-3.5" />
+                        </button>
+                    </div>
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+}
+
+export function useToast() {
+    const push = useContext(ToastContext);
+    return {
+        success: (message: string) => push?.("success", message),
+        error: (message: string) => push?.("error", message),
+        info: (message: string) => push?.("info", message),
+    };
+}

frontend/src/lib/translations.ts

@@ -268,6 +268,15 @@ export interface Dictionary {
     recordShortcut: string;
     reset: string;
     keybindingConflict: string;
+    toastApiKeySaved: string;
+    toastApiKeyCleared: string;
+    toastProviderAdded: string;
+    toastProviderRemoved: string;
+    toastExportDone: string;
+    toastOllamaNotInstalled: string;
+    toastOllamaStartFailed: string;
+    copiedAsMarkdown: string;
+    ollamaOfflineBanner: string;
     copied: string;
     openLogsFolder: string;
     checkForUpdates: string;
@@ -557,6 +566,15 @@ export const en: Dictionary = {
     recordShortcut: "Record shortcut",
     reset: "Reset",
     keybindingConflict: "{key} is already used by another shortcut.",
+    toastApiKeySaved: "API key saved",
+    toastApiKeyCleared: "API key removed",
+    toastProviderAdded: "provider added",
+    toastProviderRemoved: "Provider removed",
+    toastExportDone: "Export complete",
+    toastOllamaNotInstalled: "Ollama isn't installed — download it from ollama.com to run local models.",
+    toastOllamaStartFailed: "Couldn't start Ollama",
+    copiedAsMarkdown: "Conversation copied as Markdown",
+    ollamaOfflineBanner: "Ollama isn't running — this model won't respond until it's started.",
     copyDiagnosticInfo: "Copy diagnostic info",
     copied: "Copied",
     openLogsFolder: "Open logs folder",
@@ -856,6 +874,15 @@ export const tr: Dictionary = {
     recordShortcut: "Kısayolu kaydet",
     reset: "Sıfırla",
     keybindingConflict: "{key} zaten başka bir kısayol tarafından kullanılıyor.",
+    toastApiKeySaved: "API anahtarı kaydedildi",
+    toastApiKeyCleared: "API anahtarı kaldırıldı",
+    toastProviderAdded: "sağlayıcı eklendi",
+    toastProviderRemoved: "Sağlayıcı kaldırıldı",
+    toastExportDone: "Dışa aktarma tamamlandı",
+    toastOllamaNotInstalled: "Ollama kurulu değil — yerel modeller çalıştırmak için ollama.com adresinden indirin.",
+    toastOllamaStartFailed: "Ollama başlatılamadı",
+    copiedAsMarkdown: "Sohbet Markdown olarak kopyalandı",
+    ollamaOfflineBanner: "Ollama çalışmıyor — başlatılana kadar bu model yanıt vermeyecek.",
     copied: "Kopyalandı",
     openLogsFolder: "Günlük klasörünü aç",
     checkForUpdates: "Güncellemeleri denetle",

frontend/src/pages/Chat.tsx

@@ -35,6 +35,7 @@ import {
     Circle,
     ListChecks,
     ShieldQuestion,
+    AlertTriangle,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -67,6 +68,7 @@ import { PromptVariableDialog } from "@/components/prompt-variable-dialog";
 import { ScreenshotPickerDialog } from "@/components/screenshot-picker-dialog";
 import { speakText, stopSpeaking } from "@/lib/tts";
 import { computeLineDiff } from "@/lib/diff";
+import { useToast } from "@/components/toast";
 import type {
     ChatMessage,
     OllamaModel,
@@ -369,8 +371,10 @@ export default function Chat() {
     const navigate = useNavigate();
     const { sessions, projects, loading, hasApi, createSession, refresh } = useSessions();
     const { t } = useI18n();
+    const toast = useToast();
 
     const [models, setModels] = useState<OllamaModel[]>([]);
+    const [ollamaRunning, setOllamaRunning] = useState<boolean | null>(null);
     const [llamaCppModels, setLlamaCppModels] = useState<LocalGgufModel[]>([]);
     const [model, setModel] = useState<string>("");
     const [pendingCustomProvider, setPendingCustomProvider] = useState<ProviderId | null>(null);
@@ -468,6 +472,14 @@ export default function Chat() {
         })();
     }, [agentWorkspace, pendingToolCalls, writeDiffPreviews]);
 
+    // Only checked while an Ollama model is selected — the banner's render
+    // condition also gates on the provider, so a stale value from a previous
+    // Ollama selection can never show for a cloud model.
+    useEffect(() => {
+        if (!hasApi || parseModelRef(model)?.provider !== "ollama") return;
+        window.api.ollama.status().then(setOllamaRunning);
+    }, [hasApi, model]);
+
     useEffect(() => {
         if (!hasApi || !sessionId) return;
         window.api.sessions.get(sessionId).then((session) => {
@@ -801,7 +813,20 @@ export default function Chat() {
     async function handleCopyChatMarkdown() {
         if (!sessionId) return;
         const markdown = await window.api.data.getSessionMarkdown(sessionId);
-        if (markdown) await navigator.clipboard.writeText(markdown);
+        if (markdown) {
+            await navigator.clipboard.writeText(markdown);
+            toast.success(t.copiedAsMarkdown);
+        }
+    }
+
+    async function startOllamaFromBanner() {
+        const result = await window.api.ollama.start();
+        setOllamaRunning(!result.error);
+        if (result.error === "not-installed") {
+            toast.error(t.toastOllamaNotInstalled);
+        } else if (result.error) {
+            toast.error(`${t.toastOllamaStartFailed}: ${result.error}`);
+        }
     }
 
     async function runCompletion(
@@ -1699,6 +1724,16 @@ export default function Chat() {
                 </Popover>
             </div>
 
+            {parsedModel?.provider === "ollama" && ollamaRunning === false && (
+                <div className="flex items-center gap-2 border-b border-border bg-destructive/5 px-4 py-2 text-xs">
+                    <AlertTriangle className="size-3.5 shrink-0 text-destructive" />
+                    <span className="flex-1">{t.ollamaOfflineBanner}</span>
+                    <Button size="sm" variant="outline" onClick={startOllamaFromBanner}>
+                        {t.start}
+                    </Button>
+                </div>
+            )}
+
             {planSteps.length > 0 && (
                 <div className="border-b border-border bg-muted/30 px-4 py-2">
                     <div className="mx-auto flex max-w-3xl flex-col gap-1 2xl:max-w-4xl">

frontend/src/pages/Settings.tsx

@@ -64,6 +64,7 @@ import type {
 } from "@/types/electron";
 import { EXTRA_MODELS } from "@/lib/model-catalog";
 import { recommendGpuBackend, gpuBackendNote } from "@/lib/gpu";
+import { useToast } from "@/components/toast";
 import {
     DEFAULT_KEYBINDINGS,
     KEYBINDING_ACTIONS,
@@ -162,6 +163,7 @@ export default function Settings() {
     const [editDraftName, setEditDraftName] = useState("");
     const [editDraftPrompt, setEditDraftPrompt] = useState("");
     const { refresh: refreshSessions } = useSessions();
+    const toast = useToast();
     const activePullCount = useRef(0);
 
     const [mcpStatuses, setMcpStatuses] = useState<Record<string, McpServerStatus>>({});
@@ -336,7 +338,8 @@ export default function Settings() {
     }
 
     async function handleExportAll() {
-        await window.api.data.exportAll();
+        const result = await window.api.data.exportAll();
+        if (result.success) toast.success(t.toastExportDone);
     }
 
     async function handleImport() {
@@ -432,27 +435,35 @@ export default function Settings() {
     }
 
     async function saveOpenaiKey() {
-        await window.api.secrets.set("openai_api_key", openaiKeyInput.trim());
-        setOpenaiKeySet(!!openaiKeyInput.trim());
+        const value = openaiKeyInput.trim();
+        await window.api.secrets.set("openai_api_key", value);
+        setOpenaiKeySet(!!value);
         setOpenaiKeyInput("");
+        toast.success(value ? t.toastApiKeySaved : t.toastApiKeyCleared);
     }
 
     async function saveAnthropicKey() {
-        await window.api.secrets.set("anthropic_api_key", anthropicKeyInput.trim());
-        setAnthropicKeySet(!!anthropicKeyInput.trim());
+        const value = anthropicKeyInput.trim();
+        await window.api.secrets.set("anthropic_api_key", value);
+        setAnthropicKeySet(!!value);
         setAnthropicKeyInput("");
+        toast.success(value ? t.toastApiKeySaved : t.toastApiKeyCleared);
     }
 
     async function saveFigmaToken() {
-        await window.api.secrets.set("figma_token", figmaTokenInput.trim());
-        setFigmaTokenSet(!!figmaTokenInput.trim());
+        const value = figmaTokenInput.trim();
+        await window.api.secrets.set("figma_token", value);
+        setFigmaTokenSet(!!value);
         setFigmaTokenInput("");
+        toast.success(value ? t.toastApiKeySaved : t.toastApiKeyCleared);
     }
 
     async function saveGeminiKey() {
-        await window.api.secrets.set("gemini_api_key", geminiKeyInput.trim());
-        setGeminiKeySet(!!geminiKeyInput.trim());
+        const value = geminiKeyInput.trim();
+        await window.api.secrets.set("gemini_api_key", value);
+        setGeminiKeySet(!!value);
         setGeminiKeyInput("");
+        toast.success(value ? t.toastApiKeySaved : t.toastApiKeyCleared);
     }
 
     function prefillCustomProviderPreset(preset: { name: string; baseUrl: string; modelIds: string[] }) {
@@ -480,6 +491,7 @@ export default function Settings() {
         setCustomDraftBaseUrl("");
         setCustomDraftModelIds("");
         setShowAddCustomProvider(false);
+        toast.success(`${name} — ${t.toastProviderAdded}`);
     }
 
     async function removeCustomProvider(id: string) {
@@ -488,13 +500,15 @@ export default function Settings() {
             customProviders: (settings.customProviders ?? []).filter((p) => p.id !== id),
         });
         setSettings(updated);
+        toast.success(t.toastProviderRemoved);
     }
 
     async function saveCustomProviderKey(id: string) {
         const value = (customKeyInputs[id] ?? "").trim();
         await window.api.secrets.set(`custom_${id}_api_key`, value);
         setCustomKeySet((prev) => ({ ...prev, [id]: !!value }));
         setCustomKeyInputs((prev) => ({ ...prev, [id]: "" }));
+        toast.success(value ? t.toastApiKeySaved : t.toastApiKeyCleared);
     }
 
     async function saveOllamaHost() {
@@ -546,6 +560,11 @@ export default function Settings() {
         } else {
             const result = await window.api.ollama.start();
             setRunning(!result.error);
+            if (result.error === "not-installed") {
+                toast.error(t.toastOllamaNotInstalled);
+            } else if (result.error) {
+                toast.error(`${t.toastOllamaStartFailed}: ${result.error}`);
+            }
         }
     }