refactor: optimize UI button layout and fix dependency loop

- Add Open UI button next to IP:Port in installed scripts table
- Move Re-detect button to Actions dropdown for better space usage
- Fix dependency array loop in fetchContainerStatuses useCallback
- Hide buttons for stopped containers to prevent invalid actions
- Enhance auto-detect success message with LXC ID and hostname
- Improve font consistency by removing monospace from IP:Port text
- Optimize screen real estate with cleaner, more scannable layout

VERSION

@@ -1 +1 @@
-0.4.0
+0.4.1

package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.3",
     "@t3-oss/env-nextjs": "^0.13.8",
+    "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-query": "^5.90.3",
     "@trpc/client": "^11.6.0",
     "@trpc/react-query": "^11.6.0",
@@ -44,8 +45,10 @@
     "node-pty": "^1.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.6",
     "refractor": "^5.0.0",
+    "remark-gfm": "^4.0.1",
     "server-only": "^0.0.1",
     "strip-ansi": "^7.1.2",
     "superjson": "^2.2.1",

src/app/_components/InstalledScriptsTab.tsx

@@ -377,7 +377,7 @@ export function InstalledScriptsTab() {
         containerStatusMutation.mutate({ serverIds });
       }
     }, 500);
-  }, [containerStatusMutation]);
+  }, []);
 
   // Run cleanup when component mounts and scripts are loaded (only once)
   useEffect(() => {
@@ -1365,21 +1365,17 @@ export function InstalledScriptsTab() {
                           </div>
                         ) : (
                           script.web_ui_ip ? (
-                            <div className="flex items-center justify-between w-full">
-                              <button
-                                onClick={() => handleOpenWebUI(script)}
-                                className="text-sm font-mono text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline flex-shrink-0"
-                              >
+                            <div className="flex items-center space-x-3">
+                              <span className="text-sm text-foreground">
                                 {script.web_ui_ip}:{script.web_ui_port ?? 80}
-                              </button>
-                              {script.container_id && script.execution_mode === 'ssh' && (
+                              </span>
+                              {containerStatuses.get(script.id) === 'running' && (
                                 <button
-                                  onClick={() => handleAutoDetectWebUI(script)}
-                                  disabled={autoDetectWebUIMutation.isPending}
-                                  className="text-xs px-2 py-1 bg-blue-900 hover:bg-blue-800 text-blue-300 border border-blue-700 rounded disabled:opacity-50 transition-colors flex-shrink-0 ml-2"
-                                  title="Re-detect IP and port"
+                                  onClick={() => handleOpenWebUI(script)}
+                                  className="text-xs px-2 py-1 bg-blue-900/20 hover:bg-blue-900/30 border border-blue-700/50 text-blue-300 hover:text-blue-200 hover:border-blue-600/60 transition-all duration-200 hover:scale-105 hover:shadow-md rounded disabled:opacity-50 flex-shrink-0"
+                                  title="Open Web UI"
                                 >
-                                  {autoDetectWebUIMutation.isPending ? '...' : 'Re-detect'}
+                                  Open UI
                                 </button>
                               )}
                             </div>
@@ -1487,6 +1483,15 @@ export function InstalledScriptsTab() {
                                         Open UI
                                       </DropdownMenuItem>
                                     )}
+                                    {script.container_id && script.execution_mode === 'ssh' && script.web_ui_ip && (
+                                      <DropdownMenuItem
+                                        onClick={() => handleAutoDetectWebUI(script)}
+                                        disabled={autoDetectWebUIMutation.isPending || containerStatuses.get(script.id) === 'stopped'}
+                                        className="text-blue-300 hover:text-blue-200 hover:bg-blue-900/20 focus:bg-blue-900/20"
+                                      >
+                                        {autoDetectWebUIMutation.isPending ? 'Re-detect...' : 'Re-detect IP/Port'}
+                                      </DropdownMenuItem>
+                                    )}
                                     {script.container_id && script.execution_mode === 'ssh' && (
                                       <>
                                         <DropdownMenuSeparator className="bg-gray-700" />

src/app/_components/ReleaseNotesModal.tsx

@@ -5,6 +5,8 @@ import { api } from '~/trpc/react';
 import { Button } from './ui/button';
 import { Badge } from './ui/badge';
 import { X, ExternalLink, Calendar, Tag, Loader2 } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 interface ReleaseNotesModalProps {
   isOpen: boolean;
@@ -170,9 +172,23 @@ export function ReleaseNotesModal({ isOpen, onClose, highlightVersion }: Release
                     {/* Release Body */}
                     {release.body && (
                       <div className="prose prose-sm max-w-none dark:prose-invert">
-                        <div className="whitespace-pre-wrap text-sm text-card-foreground leading-relaxed">
+                        <ReactMarkdown 
+                          remarkPlugins={[remarkGfm]}
+                          components={{
+                            h1: ({children}) => <h1 className="text-2xl font-bold text-card-foreground mb-4 mt-6">{children}</h1>,
+                            h2: ({children}) => <h2 className="text-xl font-semibold text-card-foreground mb-3 mt-5">{children}</h2>,
+                            h3: ({children}) => <h3 className="text-lg font-medium text-card-foreground mb-2 mt-4">{children}</h3>,
+                            p: ({children}) => <p className="text-card-foreground mb-3 leading-relaxed">{children}</p>,
+                            ul: ({children}) => <ul className="list-disc list-inside text-card-foreground mb-3 space-y-1">{children}</ul>,
+                            ol: ({children}) => <ol className="list-decimal list-inside text-card-foreground mb-3 space-y-1">{children}</ol>,
+                            li: ({children}) => <li className="text-card-foreground">{children}</li>,
+                            a: ({href, children}) => <a href={href} className="text-blue-500 hover:text-blue-400 underline" target="_blank" rel="noopener noreferrer">{children}</a>,
+                            strong: ({children}) => <strong className="font-semibold text-card-foreground">{children}</strong>,
+                            em: ({children}) => <em className="italic text-card-foreground">{children}</em>,
+                          }}
+                        >
                           {release.body}
-                        </div>
+                        </ReactMarkdown>
                       </div>
                     )}
                   </div>

src/server/api/routers/installedScripts.ts

@@ -1137,9 +1137,11 @@ export const installedScriptsRouter = createTRPCRouter({
         console.log('✅ Successfully updated database');
         return {
           success: true,
-          message: `Successfully detected IP: ${detectedIp}:${detectedPort}`,
+          message: `Successfully detected IP: ${detectedIp}:${detectedPort} for LXC ${scriptData.container_id} on ${(server as any).name}`,
           detectedIp,
-          detectedPort: detectedPort
+          detectedPort: detectedPort,
+          containerId: scriptData.container_id,
+          serverName: (server as any).name
         };
       } catch (error) {
         console.error('Error in autoDetectWebUI:', error);

src/styles/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @layer base {
   :root {