fix(#338): Standardize API base URL and auth mechanism across components

- Create centralized config module (apps/web/src/lib/config.ts) exporting:
  - API_BASE_URL: Main API server URL from NEXT_PUBLIC_API_URL
  - ORCHESTRATOR_URL: Orchestrator service URL from NEXT_PUBLIC_ORCHESTRATOR_URL
  - Helper functions for building full URLs
- Update client.ts to import from central config
- Update LoginButton.tsx to use API_BASE_URL from config
- Update useWebSocket.ts to use API_BASE_URL from config
- Update AgentStatusWidget.tsx to use ORCHESTRATOR_URL from config
- Update TaskProgressWidget.tsx to use ORCHESTRATOR_URL from config
- Update useGraphData.ts to use API_BASE_URL from config
  - Fixed wrong default port (was 8000, now uses correct 3001)
- Add comprehensive tests for config module
- Update useWebSocket tests to properly mock config module

Refs #338

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
2026-02-05 18:04:01 -06:00
parent 10d4de5d69
commit 203bd1e7f2
9 changed files with 204 additions and 26 deletions

View File

@@ -5,6 +5,7 @@
import { useState, useEffect } from "react";
import { Bot, Activity, AlertCircle, CheckCircle, Clock } from "lucide-react";
import type { WidgetProps } from "@mosaic/shared";
import { ORCHESTRATOR_URL } from "@/lib/config";
interface Agent {
agentId: string;
@@ -28,10 +29,7 @@ export function AgentStatusWidget({ id: _id, config: _config }: WidgetProps): Re
setError(null);
try {
// Get orchestrator URL from environment or default to localhost
const orchestratorUrl = process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ?? "http://localhost:8001";
const response = await fetch(`${orchestratorUrl}/agents`, {
const response = await fetch(`${ORCHESTRATOR_URL}/agents`, {
headers: {
"Content-Type": "application/json",
},

View File

@@ -8,6 +8,7 @@
import { useState, useEffect } from "react";
import { Activity, CheckCircle, XCircle, Clock, Loader2 } from "lucide-react";
import type { WidgetProps } from "@mosaic/shared";
import { ORCHESTRATOR_URL } from "@/lib/config";
interface AgentTask {
agentId: string;
@@ -98,10 +99,8 @@ export function TaskProgressWidget({ id: _id, config: _config }: WidgetProps): R
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const orchestratorUrl = process.env.NEXT_PUBLIC_ORCHESTRATOR_URL ?? "http://localhost:3001";
const fetchTasks = (): void => {
fetch(`${orchestratorUrl}/agents`)
fetch(`${ORCHESTRATOR_URL}/agents`)
.then((res) => {
if (!res.ok) throw new Error(`HTTP ${String(res.status)}`);
return res.json() as Promise<AgentTask[]>;