diff --git a/ui/web/src/components/ui/toaster.tsx b/ui/web/src/components/ui/toaster.tsx
index 5460a9fc..eeea9b34 100644
--- a/ui/web/src/components/ui/toaster.tsx
+++ b/ui/web/src/components/ui/toaster.tsx
@@ -23,16 +23,16 @@ function ToastItem({ toast }: { toast: Toast }) {
   return (
     <div
       className={cn(
-        "pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-lg border p-4 shadow-lg backdrop-blur-sm animate-in slide-in-from-bottom-2 fade-in duration-200",
+        "pointer-events-auto flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 shadow-lg backdrop-blur-sm animate-in slide-in-from-bottom-2 fade-in duration-200",
         styles[toast.variant],
       )}
       role="alert"
     >
       <Icon className="mt-0.5 h-4 w-4 shrink-0" />
-      <div className="flex-1 space-y-0.5">
-        <p className="text-sm font-medium">{toast.title}</p>
+      <div className="flex-1 min-w-0 space-y-0.5">
+        <p className="text-sm font-medium break-words">{toast.title}</p>
         {toast.message && (
-          <p className="text-xs opacity-80">{toast.message}</p>
+          <p className="text-xs opacity-80 break-words">{toast.message}</p>
         )}
       </div>
       <button
@@ -51,7 +51,7 @@ export function Toaster() {
   if (toasts.length === 0) return null;
 
   return (
-    <div className="fixed bottom-4 right-4 z-[100] flex flex-col-reverse gap-2 pointer-events-none sm:bottom-6 sm:right-6 safe-bottom safe-right">
+    <div className="fixed bottom-4 right-4 z-[100] flex max-w-sm flex-col-reverse gap-2 pointer-events-none sm:bottom-6 sm:right-6 safe-bottom safe-right">
       {toasts.slice(-3).map((t) => (
         <ToastItem key={t.id} toast={t} />
       ))}
diff --git a/ui/web/src/pages/packages/hooks/use-packages.ts b/ui/web/src/pages/packages/hooks/use-packages.ts
index 3f88f260..349c32db 100644
--- a/ui/web/src/pages/packages/hooks/use-packages.ts
+++ b/ui/web/src/pages/packages/hooks/use-packages.ts
@@ -21,6 +21,7 @@ interface InstallResult {
   error: string;
 }
 
+
 export function usePackages() {
   const http = useHttp();
   const qc = useQueryClient();
@@ -36,27 +37,39 @@ export function usePackages() {
   const refresh = useCallback(() => { refetch(); }, [refetch]);
 
   const installPackage = useCallback(async (pkg: string, t: (key: string, opts?: Record<string, string>) => string) => {
-    const res = await http.post<InstallResult>("/v1/packages/install", { package: pkg });
-    if (res.ok) {
-      toast.success(t("messages.installSuccess", { name: pkg }));
-      qc.invalidateQueries({ queryKey: queryKeys.packages.all });
-      qc.invalidateQueries({ queryKey: queryKeys.packages.runtimes });
-    } else {
-      toast.error(t("messages.installError", { name: pkg }) + (res.error ? `: ${res.error}` : ""));
+    try {
+      const res = await http.post<InstallResult>("/v1/packages/install", { package: pkg });
+      if (res.ok) {
+        toast.success(t("messages.installSuccess", { name: pkg }));
+        qc.invalidateQueries({ queryKey: queryKeys.packages.all });
+        qc.invalidateQueries({ queryKey: queryKeys.packages.runtimes });
+      } else {
+        toast.error(t("messages.installError", { name: pkg }) + (res.error ? `: ${res.error}` : ""));
+      }
+      return res;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      toast.error(t("messages.installError", { name: pkg }) + (msg ? `: ${msg}` : ""));
+      return { ok: false, error: msg } as InstallResult;
     }
-    return res;
   }, [http, qc]);
 
   const uninstallPackage = useCallback(async (pkg: string, t: (key: string, opts?: Record<string, string>) => string) => {
-    const res = await http.post<InstallResult>("/v1/packages/uninstall", { package: pkg });
-    if (res.ok) {
-      toast.success(t("messages.uninstallSuccess", { name: pkg }));
-      qc.invalidateQueries({ queryKey: queryKeys.packages.all });
-      qc.invalidateQueries({ queryKey: queryKeys.packages.runtimes });
-    } else {
-      toast.error(t("messages.uninstallError", { name: pkg }) + (res.error ? `: ${res.error}` : ""));
+    try {
+      const res = await http.post<InstallResult>("/v1/packages/uninstall", { package: pkg });
+      if (res.ok) {
+        toast.success(t("messages.uninstallSuccess", { name: pkg }));
+        qc.invalidateQueries({ queryKey: queryKeys.packages.all });
+        qc.invalidateQueries({ queryKey: queryKeys.packages.runtimes });
+      } else {
+        toast.error(t("messages.uninstallError", { name: pkg }) + (res.error ? `: ${res.error}` : ""));
+      }
+      return res;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      toast.error(t("messages.uninstallError", { name: pkg }) + (msg ? `: ${msg}` : ""));
+      return { ok: false, error: msg } as InstallResult;
     }
-    return res;
   }, [http, qc]);
 
   return { packages: data, loading, refresh, installPackage, uninstallPackage };
diff --git a/ui/web/src/pages/packages/packages-page.tsx b/ui/web/src/pages/packages/packages-page.tsx
index d955fe52..6e71b172 100644
--- a/ui/web/src/pages/packages/packages-page.tsx
+++ b/ui/web/src/pages/packages/packages-page.tsx
@@ -100,8 +100,8 @@ interface PackageSectionProps {
   placeholder: string;
   packages: PackageInfo[] | null | undefined;
   loading: boolean;
-  onInstall: (pkg: string) => Promise<unknown>;
-  onUninstall: (pkg: string) => Promise<unknown>;
+  onInstall: (pkg: string) => Promise<{ ok: boolean }>;
+  onUninstall: (pkg: string) => Promise<{ ok: boolean }>;
 }
 
 function PackageSection({ title, placeholder, packages, loading, onInstall, onUninstall }: PackageSectionProps) {
@@ -115,12 +115,12 @@ function PackageSection({ title, placeholder, packages, loading, onInstall, onUn
     const pkg = input.trim();
     if (!pkg) return;
     setInstallStatus("loading");
-    try {
-      await onInstall(pkg);
+    const res = await onInstall(pkg);
+    if (res.ok) {
       setInstallStatus("success");
       setInput("");
       setTimeout(() => setInstallStatus("idle"), 2000);
-    } catch {
+    } else {
       setInstallStatus("error");
       setTimeout(() => setInstallStatus("idle"), 3000);
     }
@@ -128,10 +128,10 @@ function PackageSection({ title, placeholder, packages, loading, onInstall, onUn
 
   async function handleUninstall(name: string) {
     setActionStatuses((s) => ({ ...s, [name]: "loading" }));
-    try {
-      await onUninstall(name);
+    const res = await onUninstall(name);
+    if (res.ok) {
       setActionStatuses((s) => ({ ...s, [name]: "success" }));
-    } catch {
+    } else {
       setActionStatuses((s) => ({ ...s, [name]: "error" }));
       setTimeout(() => setActionStatuses((s) => ({ ...s, [name]: "idle" })), 3000);
     }