fix: show directory-level MCP servers in RepoMcpDialog (#134)

* fix: show directory-level MCP servers in RepoMcpDialog

- Derive server list from MCP status response instead of global config
- Add GET /opencode-configs/:name endpoint to fetch named configs
- Fetch repo-specific config via openCodeConfigName in RepoDetail/SessionDetail
- Add null guards for serverConfig to handle directory-only servers
- Update empty state text to mention project's opencode.json

Closes #130

* Switch RepoMcpDialog to use directory-level server configs

Author: chriswritescode-dev

frontend/src/api/mcp.ts

@@ -152,6 +152,14 @@ export const mcpApi = {
     return response.json()
   },
 
+  async getConfigForDirectory(directory: string): Promise<Record<string, unknown>> {
+    const response = await fetch(`${API_BASE}/api/opencode/config?directory=${encodeURIComponent(directory)}`)
+    if (!response.ok) {
+      throw new Error(`Failed to get config for directory: ${response.statusText}`)
+    }
+    return response.json()
+  },
+
   async connectDirectory(name: string, directory: string): Promise<boolean> {
     const response = await fetch(`${API_BASE}/api/settings/mcp/${encodeURIComponent(name)}/connectdirectory`, {
       method: 'POST',

frontend/src/components/repo/RepoMcpDialog.tsx

@@ -16,33 +16,36 @@ import { showToast } from '@/lib/toast'
 interface RepoMcpDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  config: {
-    content: Record<string, unknown>
-  } | null
   directory: string | undefined
 }
 
-export function RepoMcpDialog({ open, onOpenChange, config, directory }: RepoMcpDialogProps) {
+export function RepoMcpDialog({ open, onOpenChange, directory }: RepoMcpDialogProps) {
   const queryClient = useQueryClient()
   const [localStatus, setLocalStatus] = useState<Record<string, McpStatus>>({})
+  const [mcpServers, setMcpServers] = useState<Record<string, McpServerConfig>>({})
   const [isLoadingStatus, setIsLoadingStatus] = useState(false)
+  const [hasFetchedStatus, setHasFetchedStatus] = useState(false)
   const [removeAuthConfirmServer, setRemoveAuthConfirmServer] = useState<string | null>(null)
   const [authDialogServerId, setAuthDialogServerId] = useState<string | null>(null)
 
-  const mcpServers = config?.content?.mcp as Record<string, McpServerConfig> | undefined || {}
-  const serverIds = Object.keys(mcpServers)
+  const serverIds = Object.keys(localStatus)
 
   const fetchStatus = useCallback(async () => {
-    if (!directory || serverIds.length === 0) return
+    if (!directory) return
 
     setIsLoadingStatus(true)
     try {
-      const status = await mcpApi.getStatusFor(directory)
+      const [status, config] = await Promise.all([
+        mcpApi.getStatusFor(directory),
+        mcpApi.getConfigForDirectory(directory),
+      ])
       setLocalStatus(status)
+      setMcpServers((config.mcp as Record<string, McpServerConfig>) || {})
+      setHasFetchedStatus(true)
     } finally {
       setIsLoadingStatus(false)
     }
-  }, [directory, serverIds.length])
+  }, [directory])
 
   const toggleMutation = useMutation({
     mutationFn: async ({ serverId, enable }: { serverId: string; enable: boolean }) => {
@@ -195,11 +198,11 @@ export function RepoMcpDialog({ open, onOpenChange, config, directory }: RepoMcp
         </DialogHeader>
 
         <div className="px-4 sm:px-6 py-3 sm:py-4 flex-1 overflow-y-auto min-h-0">
-          {serverIds.length === 0 ? (
+          {hasFetchedStatus && serverIds.length === 0 ? (
             <div className="text-center py-6 text-muted-foreground">
               <Plug className="w-10 h-10 mx-auto mb-3 opacity-50" />
-              <p className="text-sm">No MCP servers configured globally</p>
-              <p className="text-xs mt-1">Add them in Settings first</p>
+              <p className="text-sm">No MCP servers configured for this location</p>
+              <p className="text-xs mt-1">Add them in Settings or in the project's opencode.json</p>
             </div>
           ) : isLoadingStatus ? (
             <div className="flex items-center justify-center py-8">
@@ -214,9 +217,9 @@ export function RepoMcpDialog({ open, onOpenChange, config, directory }: RepoMcp
                 const isConnected = status?.status === 'connected'
                 const needsAuth = status?.status === 'needs_auth'
                 const failed = status?.status === 'failed'
-                const isRemote = serverConfig.type === 'remote'
-                const hasOAuthConfig = isRemote && !!serverConfig.oauth
-                const hasOAuthError = failed && isRemote && /oauth|auth.*state/i.test(status.error)
+                const isRemote = serverConfig?.type === 'remote'
+                const hasOAuthConfig = isRemote && !!serverConfig?.oauth
+                const hasOAuthError = failed && isRemote && !!status?.error && /oauth|auth.*state/i.test(status.error)
                 const isOAuthServer = hasOAuthConfig || hasOAuthError || (needsAuth && isRemote)
                 const connectedWithOAuth = isOAuthServer && isConnected
                 const showAuthButton = needsAuth || (isOAuthServer && failed)
@@ -239,7 +242,7 @@ export function RepoMcpDialog({ open, onOpenChange, config, directory }: RepoMcp
                         {getStatusBadge(status)}
                       </div>
                       <p className="text-xs text-muted-foreground truncate">
-                        {getDescription(serverConfig)}
+                        {serverConfig ? getDescription(serverConfig) : 'MCP server'}
                       </p>
                       {failed && status.status === 'failed' && (
                         <div className="flex items-center gap-1 mt-1 text-xs text-red-500">

frontend/src/pages/RepoDetail.tsx

@@ -10,7 +10,7 @@ import { RepoMcpDialog } from "@/components/repo/RepoMcpDialog";
 import { SourceControlPanel } from "@/components/source-control";
 import { useCreateSession } from "@/hooks/useOpenCode";
 import { useSSE } from "@/hooks/useSSE";
-import { OPENCODE_API_ENDPOINT, API_BASE_URL } from "@/config";
+import { OPENCODE_API_ENDPOINT } from "@/config";
 import { useSwipeBack } from "@/hooks/useMobile";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -58,15 +58,6 @@ export function RepoDetail() {
     enabled: !!repoId,
   });
 
-  const { data: settings } = useQuery({
-    queryKey: ["opencode-config"],
-    queryFn: async () => {
-      const response = await fetch(`${API_BASE_URL}/api/settings/opencode-configs/default`);
-      if (!response.ok) throw new Error("Failed to fetch config");
-      return response.json();
-    },
-  });
-
   const opcodeUrl = OPENCODE_API_ENDPOINT;
 
   const repoDirectory = repo?.fullPath;
@@ -244,7 +235,6 @@ export function RepoDetail() {
       <RepoMcpDialog
         open={mcpDialogOpen}
         onOpenChange={setMcpDialogOpen}
-        config={settings}
         directory={repoDirectory}
       />
 

frontend/src/pages/SessionDetail.tsx

@@ -15,7 +15,7 @@ import { Button } from "@/components/ui/button";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { ContextUsageIndicator } from "@/components/session/ContextUsageIndicator";
 import { useSession, useAbortSession, useUpdateSession, useMessages, useTitleGenerating, useCreateSession } from "@/hooks/useOpenCode";
-import { OPENCODE_API_ENDPOINT, API_BASE_URL } from "@/config";
+import { OPENCODE_API_ENDPOINT } from "@/config";
 import { useSSE } from "@/hooks/useSSE";
 import { useUIState } from "@/stores/uiStateStore";
 import { useSettings } from "@/hooks/useSettings";
@@ -80,15 +80,6 @@ export function SessionDetail() {
     enabled: !!repoId,
   });
 
-  const { data: settings } = useQuery({
-    queryKey: ["opencode-config"],
-    queryFn: async () => {
-      const response = await fetch(`${API_BASE_URL}/api/settings/opencode-configs/default`);
-      if (!response.ok) throw new Error("Failed to fetch config");
-      return response.json();
-    },
-  });
-
   const opcodeUrl = OPENCODE_API_ENDPOINT;
 
   const repoDirectory = repo?.fullPath;
@@ -531,7 +522,6 @@ export function SessionDetail() {
       <RepoMcpDialog
         open={mcpDialogOpen}
         onOpenChange={setMcpDialogOpen}
-        config={settings}
         directory={repoDirectory}
       />