inter-hub/Web/View/AgentRegistrations/Show.hs

module Web.View.AgentRegistrations.Show where

import IHP.ViewPrelude
import Web.View.AgentRegistrations.Index (trustBadge, statusBadge)
import Text.Printf (printf)

data ShowView = ShowView
    { agent           :: !AgentRegistration
    , policies        :: ![ModelRoutingPolicy]
    , recentProposals :: ![AgentProposal]
    , mPerformance    :: !(Maybe AgentPerformanceRecord)
    }

instance View ShowView where
    html ShowView { .. } = [hsx|
        <div class="p-6 space-y-6">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">{agent.name}</h1>
                    <p class="text-sm text-gray-500 mt-1 font-mono">{agent.slug}</p>
                </div>
                <div class="flex gap-2">
                    {trustBadge agent.trustLevel}
                    {statusBadge agent.isActive}
                    <a href={EditAgentRegistrationAction agent.id}
                       class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded">Edit</a>
                    {when agent.isActive [hsx|
                        <a href={DeactivateAgentAction agent.id}
                           class="px-3 py-1 text-sm bg-red-50 text-red-700 hover:bg-red-100 rounded">Deactivate</a>
                    |]}
                    <a href={ComputeAgentPerformanceAction agent.id}
                       class="px-3 py-1 text-sm bg-blue-50 text-blue-700 hover:bg-blue-100 rounded">Compute Performance</a>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
                <div>
                    <p class="text-xs text-gray-500">Provider</p>
                    <p class="font-mono text-sm">{agent.provider}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500">Model</p>
                    <p class="font-mono text-sm">{agent.modelName}</p>
                </div>
                <div class="col-span-2">
                    <p class="text-xs text-gray-500">Description</p>
                    <p class="text-sm">{fromMaybe "—" agent.description}</p>
                </div>
            </div>

            {performancePanel mPerformance}

            <div>
                <h2 class="text-lg font-semibold text-gray-800 mb-3">Routing Policies</h2>
                {if null policies then noPoliciesMsg else policiesTable}
            </div>

            <div>
                <h2 class="text-lg font-semibold text-gray-800 mb-3">Recent Proposals (last 10)</h2>
                {if null recentProposals then noProposalsMsg else proposalsTable}
            </div>
        </div>
    |]
      where
        policiesTable = [hsx|
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Task Type</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Priority</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Active</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {forEach policies renderPolicyRow}
                    </tbody>
                </table>
            </div>
        |]

        proposalsTable = [hsx|
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tokens In/Out</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {forEach recentProposals renderProposalRow}
                    </tbody>
                </table>
            </div>
        |]

renderMeanConfidence :: Maybe Double -> Html
renderMeanConfidence Nothing  = [hsx|<p class="mt-3 text-sm text-gray-400">Mean confidence: —</p>|]
renderMeanConfidence (Just c) = [hsx|<p class="mt-3 text-sm text-gray-600">Mean confidence: {printf "%.2f" c :: String}</p>|]

renderPolicyRow :: ModelRoutingPolicy -> Html
renderPolicyRow p = [hsx|
    <tr>
        <td class="px-4 py-3 text-sm font-mono">{p.taskType}</td>
        <td class="px-4 py-3 text-sm">{show p.priority}</td>
        <td class="px-4 py-3">{statusBadge p.isActive}</td>
    </tr>
|]

noPoliciesMsg :: Html
noPoliciesMsg = [hsx|<p class="text-sm text-gray-500">No routing policies. <a href={NewModelRoutingPolicyAction} class="text-blue-600">Add one</a>.</p>|]

noProposalsMsg :: Html
noProposalsMsg = [hsx|<p class="text-sm text-gray-500">No proposals yet.</p>|]

renderProposalRow :: AgentProposal -> Html
renderProposalRow p = [hsx|
    <tr>
        <td class="px-4 py-3 text-sm font-mono">{p.proposalType}</td>
        <td class="px-4 py-3 text-sm">{p.status}</td>
        <td class="px-4 py-3 text-sm text-gray-500">
            {maybe "—" show p.tokensIn} / {maybe "—" show p.tokensOut}
        </td>
        <td class="px-4 py-3 text-sm text-gray-500">{timeAgo p.createdAt}</td>
    </tr>
|]

performancePanel :: Maybe AgentPerformanceRecord -> Html
performancePanel Nothing = [hsx|
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
        No performance snapshot available. Click "Compute Performance" to generate one.
    </div>
|]
performancePanel (Just p) =
    let total = p.proposalsAccepted + p.proposalsRejected
        acceptPct = if total > 0 then (100 * p.proposalsAccepted) `div` total else 0
    in [hsx|
    <div class="bg-white shadow rounded-lg p-4">
        <h2 class="text-lg font-semibold text-gray-800 mb-3">Performance (30-day snapshot)</h2>
        <div class="grid grid-cols-4 gap-4">
            <div class="text-center">
                <p class="text-2xl font-bold text-gray-900">{show p.proposalsGenerated}</p>
                <p class="text-xs text-gray-500">Generated</p>
            </div>
            <div class="text-center">
                <p class="text-2xl font-bold text-green-600">{show p.proposalsAccepted}</p>
                <p class="text-xs text-gray-500">Accepted</p>
            </div>
            <div class="text-center">
                <p class="text-2xl font-bold text-red-500">{show p.proposalsRejected}</p>
                <p class="text-xs text-gray-500">Rejected</p>
            </div>
            <div class="text-center">
                <p class="text-2xl font-bold text-blue-600">{show acceptPct}%</p>
                <p class="text-xs text-gray-500">Acceptance rate</p>
            </div>
        </div>
        {renderMeanConfidence p.meanConfidence}
    </div>
|]