fix: dynamically resolve localhost/127.0.0.1 in links to active hostname for remote access

frontend/src/lib/utils.ts

@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function resolveExternalUrl(url?: string): string {
+  if (!url) return ""
+  const currentHostname = window.location.hostname
+  if (currentHostname !== "127.0.0.1" && currentHostname !== "localhost" && currentHostname !== "") {
+    return url.replace(/127\.0\.0\.1|localhost/g, currentHostname)
+  }
+  return url
+}

frontend/src/views/AgentView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { Bot, ExternalLink, Activity, Cpu, Wrench, Shield } from "lucide-react"
 import { api, type AgentStatus } from "@/lib/api"
-import { cn } from "@/lib/utils"
+import { cn, resolveExternalUrl } from "@/lib/utils"
 
 function Tile({ label, ok, detail, icon: Icon }: { label: string; ok: boolean; detail?: string; icon: any }) {
   return (
@@ -56,7 +56,7 @@ export function AgentView() {
         
         {s?.webui_url && (
           <a
-            href={s.webui_url}
+            href={resolveExternalUrl(s.webui_url)}
             target="_blank"
             rel="noopener"
             className={cn(

frontend/src/views/DashboardView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { Bot, Cpu, ExternalLink, Brain, Layers, Plus, ShieldAlert } from "lucide-react"
 import { api, type SystemStatus, type AgentStatus, type ModelInfo, type Memory, type UpdatesResp } from "@/lib/api"
-import { cn } from "@/lib/utils"
+import { cn, resolveExternalUrl } from "@/lib/utils"
 
 function gb(b: number) {
   return (b / 1024 ** 3).toFixed(1)
@@ -213,7 +213,7 @@ export function DashboardView() {
               </div>
               {agent?.webui_url && (
                 <a
-                  href={agent.webui_url}
+                  href={resolveExternalUrl(agent.webui_url)}
                   target="_blank"
                   rel="noopener"
                   className={cn(

frontend/src/views/SystemView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { ExternalLink, RefreshCw, Save, Cpu, HardDrive, Cpu as GpuIcon, Activity, ShieldAlert } from "lucide-react"
 import { api, type ServicesResp, type SystemStatus, type UpdatesResp } from "@/lib/api"
-import { cn } from "@/lib/utils"
+import { cn, resolveExternalUrl } from "@/lib/utils"
 
 function gb(b: number) {
   return (b / 1024 ** 3).toFixed(1)
@@ -293,7 +293,7 @@ export function SystemView() {
           {/* Service Links */}
           <div className="flex flex-wrap gap-4 border-t border-border/20 pt-4 text-[10px] font-semibold text-muted-foreground">
             <a 
-              href={svc.links.engine_ui} 
+              href={resolveExternalUrl(svc.links.engine_ui)} 
               target="_blank" 
               rel="noopener" 
               className="flex items-center gap-1 text-primary hover:text-primary-foreground hover:bg-primary/10 px-2 py-1 rounded transition-colors"
@@ -301,7 +301,7 @@ export function SystemView() {
               <ExternalLink className="h-3 w-3" /> Engine Dashboard (llama-swap)
             </a>
             <a 
-              href={svc.links.gateway} 
+              href={resolveExternalUrl(svc.links.gateway)} 
               target="_blank" 
               rel="noopener" 
               className="flex items-center gap-1 text-primary hover:text-primary-foreground hover:bg-primary/10 px-2 py-1 rounded transition-colors"