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

This commit is contained in:
Hitonabi
2026-06-25 23:06:25 +02:00
parent 8d5885d683
commit e9fb72fdc7
8 changed files with 75 additions and 66 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -6,8 +6,8 @@
<meta name="theme-color" content="#0d1117" /> <meta name="theme-color" content="#0d1117" />
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<title>Mission Control 2.0</title> <title>Mission Control 2.0</title>
<script type="module" crossorigin src="/assets/index-Dv5aiLp6.js"></script> <script type="module" crossorigin src="/assets/index-CgKqjgpB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BhVAhk1W.css"> <link rel="stylesheet" crossorigin href="/assets/index-CAfaSDN8.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
+9
View File
@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) 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
}
+2 -2
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Bot, ExternalLink, Activity, Cpu, Wrench, Shield } from "lucide-react" import { Bot, ExternalLink, Activity, Cpu, Wrench, Shield } from "lucide-react"
import { api, type AgentStatus } from "@/lib/api" 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 }) { function Tile({ label, ok, detail, icon: Icon }: { label: string; ok: boolean; detail?: string; icon: any }) {
return ( return (
@@ -56,7 +56,7 @@ export function AgentView() {
{s?.webui_url && ( {s?.webui_url && (
<a <a
href={s.webui_url} href={resolveExternalUrl(s.webui_url)}
target="_blank" target="_blank"
rel="noopener" rel="noopener"
className={cn( className={cn(
+2 -2
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Bot, Cpu, ExternalLink, Brain, Layers, Plus, ShieldAlert } from "lucide-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 { 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) { function gb(b: number) {
return (b / 1024 ** 3).toFixed(1) return (b / 1024 ** 3).toFixed(1)
@@ -213,7 +213,7 @@ export function DashboardView() {
</div> </div>
{agent?.webui_url && ( {agent?.webui_url && (
<a <a
href={agent.webui_url} href={resolveExternalUrl(agent.webui_url)}
target="_blank" target="_blank"
rel="noopener" rel="noopener"
className={cn( className={cn(
+3 -3
View File
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { ExternalLink, RefreshCw, Save, Cpu, HardDrive, Cpu as GpuIcon, Activity, ShieldAlert } from "lucide-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 { 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) { function gb(b: number) {
return (b / 1024 ** 3).toFixed(1) return (b / 1024 ** 3).toFixed(1)
@@ -293,7 +293,7 @@ export function SystemView() {
{/* Service Links */} {/* Service Links */}
<div className="flex flex-wrap gap-4 border-t border-border/20 pt-4 text-[10px] font-semibold text-muted-foreground"> <div className="flex flex-wrap gap-4 border-t border-border/20 pt-4 text-[10px] font-semibold text-muted-foreground">
<a <a
href={svc.links.engine_ui} href={resolveExternalUrl(svc.links.engine_ui)}
target="_blank" target="_blank"
rel="noopener" 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" 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) <ExternalLink className="h-3 w-3" /> Engine Dashboard (llama-swap)
</a> </a>
<a <a
href={svc.links.gateway} href={resolveExternalUrl(svc.links.gateway)}
target="_blank" target="_blank"
rel="noopener" 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" className="flex items-center gap-1 text-primary hover:text-primary-foreground hover:bg-primary/10 px-2 py-1 rounded transition-colors"