feat(config): migrate to runtime config.json loading

.gitignore

@@ -34,3 +34,9 @@ coverage
 .env.local
 .env.*.local
 .scannerwork
+
+# Config
+public/config.json
+
+
+trivy-report.json

README.md

@@ -34,12 +34,22 @@ bun install
 
 ## Configuration
 
-| Variable | Default | Description |
+Configuration is loaded at runtime from `public/config.json`. Copy the example file to get started:
+
+```bash
+cp public/config.example.json public/config.json
+```
+
+**`public/config.json`** - Application configuration:
+
+| Field | Type | Description |
 |---|---|---|
-| `VITE_API_BASE_URL` | `http://localhost:8010` | composable-agents API URL |
-| `VITE_WS_BASE_URL` | `ws://localhost:8010` | WebSocket URL for streaming |
+| `apiBaseUrl` | `string` | composable-agents API URL (e.g., `http://localhost:8010`) |
+| `wsBaseUrl` | `string` | WebSocket URL for streaming (e.g., `ws://localhost:8010`) |
+
+The config is validated with Zod on startup. Invalid configuration will show an error toast.
 
-The Vite dev server proxies `/api` requests to the API automatically (see `vite.config.ts`).
+**Note:** `config.json` is gitignored. Use `config.example.json` as a template.
 
 ## Running
 
@@ -103,15 +113,19 @@ src/
     entities/
       agent/               # AgentConfig, AgentConfigMetadata, McpServerConfig
       chat/                # Message, Thread, ChatRequest
+      config/              # AppConfig (Zod-validated)
     ports/
       agent/agentPort.ts   # Agent repository interface
       chat/chatPort.ts     # Chat repository interface
+      config/configRepository.ts  # Config repository interface
   infrastructure/          # External adapters (API clients, config)
     api/
       agent/agentApi.ts    # Agent API adapter (axios)
       chat/chatApi.ts      # Chat API adapter (axios + SSE)
       axiosInstance.ts     # Shared axios instance
-    config/envConfig.ts    # Environment variables
+    config/
+      configRepositoryInstance.ts  # Singleton config repository
+      fileConfigRepository.ts       # File-based config implementation
   application/             # React UI layer
     components/
       agent/               # AgentCard, AgentGrid, CreateAgentDialog, AgentConfigViewer
@@ -122,11 +136,15 @@ src/
     hooks/
       agent/               # useAgents, useCreateAgent, useDeleteAgent, useUpdateAgent, useAgentConfig
       chat/                # useThreads, useCreateThread, useDeleteThread, useMessages, useSendMessage, useStreamChat
+      config/               # useConfig
     pages/
       AgentsPage.tsx       # /agents route
       ChatPage.tsx         # /chat/:threadId? route
     stores/
       useChatStore.ts      # Zustand store for chat state
+public/
+  config.example.json      # Example config (committed)
+  config.json              # Runtime config (gitignored)
 tests/
   unit/                    # Mirrors src/ structure
   fixtures/                # Test data

public/config.example.json

@@ -0,0 +1,4 @@
+{
+    "apiBaseUrl": "http://localhost:8010",
+    "wsBaseUrl": "ws://localhost:8010"
+}

src/application/components/agent/AgentCard.tsx

@@ -40,7 +40,10 @@ function getAgentIcon(name: string): string {
   return AGENT_ICONS[firstLetter] ?? "smart_toy";
 }
 
-export default function AgentCard({ agent, onConfigure }: Readonly<AgentCardProps>) {
+export default function AgentCard({
+  agent,
+  onConfigure,
+}: Readonly<AgentCardProps>) {
   return (
     <div className="bg-surface-container-lowest rounded-xl p-8 ambient-shadow hover:translate-y-[-2px] transition-transform duration-300">
       {/* Header: icon + status */}