UI: approval detail page, agent hiring UX, costs breakdown, sidebar badges, and dashboard improvements

Add ApprovalDetail page with comment thread, revision request/resubmit flow,
and ApprovalPayload component for structured payload display. Extend AgentDetail
with permissions management, config revision history, and duplicate action.
Add agent hire dialog with permission-gated access. Rework Costs page with
per-agent breakdown table and period filtering. Add sidebar badge counts for
pending approvals and inbox items. Enhance Dashboard with live metrics and
sparkline trends. Extend Agents list with pending_approval status and bulk
actions. Update IssueDetail with approval linking. Various component improvements
to MetricCard, InlineEditor, CommentThread, and StatusBadge.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/api/issues.ts

@@ -1,4 +1,4 @@
-import type { Issue, IssueComment } from "@paperclip/shared";
+import type { Approval, Issue, IssueComment } from "@paperclip/shared";
 import { api } from "./client";
 
 export const issuesApi = {
@@ -17,4 +17,9 @@ export const issuesApi = {
   listComments: (id: string) => api.get<IssueComment[]>(`/issues/${id}/comments`),
   addComment: (id: string, body: string, reopen?: boolean) =>
     api.post<IssueComment>(`/issues/${id}/comments`, reopen === undefined ? { body } : { body, reopen }),
+  listApprovals: (id: string) => api.get<Approval[]>(`/issues/${id}/approvals`),
+  linkApproval: (id: string, approvalId: string) =>
+    api.post<Approval[]>(`/issues/${id}/approvals`, { approvalId }),
+  unlinkApproval: (id: string, approvalId: string) =>
+    api.delete<{ ok: true }>(`/issues/${id}/approvals/${approvalId}`),
 };