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

2026-06-25 23:06:25 +02:00
parent 8d5885d683
commit e9fb72fdc7
8 changed files with 75 additions and 66 deletions
@@ -6,8 +6,8 @@
    <meta name="theme-color" content="#0d1117" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <title>Mission Control 2.0</title>
-    <script type="module" crossorigin src="/assets/index-Dv5aiLp6.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BhVAhk1W.css">
+    <script type="module" crossorigin src="/assets/index-CgKqjgpB.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CAfaSDN8.css">
  </head>
  <body>
    <div id="root"></div>
@@ -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
+}
@@ -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(
@@ -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(
@@ -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"