feat(costs): add agent model breakdown, harden date validation, sync CostByProject type, fix quota threshold and tab-gated queries

- add byAgentModel endpoint and expandable per-agent model sub-rows in the spend tab
- validate date range inputs with isNaN + badRequest to return HTTP 400 on bad input
- move CostByProject from a local api/costs.ts definition into packages/shared types
- gate providerData query on mainTab === providers, consistent with weekData/windowData/quotaData
- fix byProject range filter from finishedAt to startedAt, consistent with byProvider runs query
- fix WHAM used_percent threshold from <= 1 to < 1 to avoid misclassifying 1% usage as 100%
- replace inline opacity style with tailwind bg-primary/85 class in ProviderQuotaCard
- reset expandedAgents set when company or date range changes
- sort agent model sub-rows by cost descending in ui memo

ui/src/components/ProviderQuotaCard.tsx

@@ -174,7 +174,7 @@ export function ProviderQuotaCard({
                 Subscription quota
               </p>
               <div className="space-y-2.5">
-                {quotaWindows.map((qw, i) => {
+                {quotaWindows.map((qw) => {
                   const fillColor =
                     qw.usedPercent == null
                       ? null
@@ -184,7 +184,7 @@ export function ProviderQuotaCard({
                           ? "bg-yellow-400"
                           : "bg-green-400";
                   return (
-                    <div key={`qw-${i}`} className="space-y-1">
+                    <div key={qw.label} className="space-y-1">
                       <div className="flex items-center justify-between gap-2 text-xs">
                         <span className="font-mono text-muted-foreground shrink-0">{qw.label}</span>
                         <span className="flex-1" />
@@ -279,8 +279,8 @@ export function ProviderQuotaCard({
                       />
                       {/* cost share overlay — narrower, opaque, shows relative cost weight */}
                       <div
-                        className="absolute inset-y-0 left-0 bg-primary transition-[width] duration-150"
-                        style={{ width: `${costPct}%`, opacity: 0.85 }}
+                        className="absolute inset-y-0 left-0 bg-primary/85 transition-[width] duration-150"
+                        style={{ width: `${costPct}%` }}
                         title={`${Math.round(costPct)}% of provider cost`}
                       />
                     </div>