[C8-WEB-04] Approval Flow — Interactive approve/reject/escalate

{
  "code": "## C8-WEB-04: Approval Flow — Implementation\n\n### File: `foundry-dashboard/src/app/approvals/page.tsx`\n\n```tsx\nimport { supabase } from '@/lib/supabase'\nimport ApprovalFlow from '@/components/approval-flow'\n\nexport const revalidate = 0\n\nexport default async function ApprovalsPage() {\n  // Pending approvals\n  const { data: pending } = await supabase\n    .from('lu_sibling_messages')\n    .select('*')\n    .in('message_type', ['approval_pending', 'approval_request'])\n    .eq('read', false)\n    .order('created_at', { ascending: false })\n    .limit(50)\n\n  // History (resolved approvals)\n  const { data: history } = await supabase\n    .from('lu_sibling_messages')\n    .select('*')\n    .in('message_type', ['approval_granted', 'approval_rejected'])\n    .order('created_at', { ascending: false })\n    .limit(100)\n\n  return (\n    <div className=\"max-w-4xl mx-auto\">\n      <ApprovalFlow\n        pendingApprovals={pending ?? []}\n        approvalHistory={history ?? []}\n      />\n    </div>\n  )\n}\n```\n\n### File: `foundry-dashboard/src/components/approval-flow.tsx`\n\n```tsx\n'use client'\n\nimport React, { useState } from 'react'\nimport { createClient } from '@supabase/supabase-js'\n\nconst supabase = createClient(\n  process.env.NEXT_PUBLIC_SUPABASE_URL!,\n  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!\n)\n\ninterface SiblingMessage {\n  id: string\n  from_instance: string\n  to_instance: string\n  message: string\n  context: string | null\n  message_type: string | null\n  read: boolean\n  created_at: string\n}\n\n// Cloud Lu delegation authority rules\nconst DELEGATION_RULES = [\n  { action: 'Retry failed task', limit: 'Auto-approved (up to 3 retries)', auto: true },\n  { action: 'Dispatch to Scout tier', limit: 'Auto-approved (cost < $0.01)', auto: true },\n  { action: 'Dispatch to Builder tier', limit: 'Auto-approved (cost < $0.10)', auto: true },\n  { action: 'Dispatch to Prime tier', limit: 'Requires human approval', auto: false },\n  { action: 'Create new spec', limit: 'Auto-approved (self-spec pipeline)', auto: true },\n  { action: 'Modify production code', limit: 'Requires human approval', auto: false },\n  { action: 'Deploy to Cloud Run', limit: 'Requires human approval', auto: false },\n  { action: 'Merge PR', limit: 'Requires human approval', auto: false },\n  { action: 'Record learning', limit: 'Auto-approved', auto: true },\n  { action: 'Send sibling message', limit: 'Auto-approved', auto: true },\n]\n\nfunction timeAgo(dateStr: string): string {\n  const diff = Date.now() - new Date(dateStr).getTime()\n  const mins = Math.floor(diff / 60000)\n  if (mins < 1) return 'now'\n  if (mins < 60) return `${mins}m ago`\n  const hours = Math.floor(mins / 60)\n  if (hours < 24) return `${hours}h ago`\n  return `${Math.floor(hours / 24)}d ago`\n}\n\nfunction parseApprovalDetails(msg: SiblingMessage) {\n  // Extract structured data from message text\n  const costMatch = msg.message.match(/\\$[\\d.]+/)\n  const cost = costMatch ? costMatch[0] : null\n  return {\n    requester: msg.from_instance,\n    recipient: msg.to_instance,\n    summary: msg.message,\n    context: msg.context,\n    estimatedCost: cost,\n    timestamp: msg.created_at,\n  }\n}\n\nexport default function ApprovalFlow({\n  pendingApprovals,\n  approvalHistory,\n}: {\n  pendingApprovals: SiblingMessage[]\n  approvalHistory: SiblingMessage[]\n}) {\n  const [pending, setPending] = useState(pendingApprovals)\n  const [processing, setProcessing] = useState<string | null>(null)\n  const [expanded, setExpanded] = useState<string | null>(null)\n  const [showDelegation, setShowDelegation] = useState(false)\n  const [tab, setTab] = useState<'pending' | 'history' | 'delegation'>('pending')\n\n  const handleAction = async (msg: SiblingMessage, action: 'approve' | 'reject') => {\n    setProcessing(msg.id)\n    try {\n      const messageType = action === 'approve' ? 'approval_granted' : 'approval_rejected'\n      const responseText = action === 'approve'\n        ? `[Carlos] APPROVED: ${msg.context || msg.message.slice(0, 80)}`\n        : `[Carlos] REJECTED: ${msg.context || msg.message.slice(0, 80)}`\n\n      // Send response message\n      await supabase.from('lu_sibling_messages').insert({\n        from_instance: 'Carlos',\n        to_instance: msg.from_instance,\n        message: responseText,\n        context: `Response to approval request ${msg.id}`,\n        message_type: messageType,\n        read: false,\n      })\n\n      // Mark original as read\n      await supabase\n        .from('lu_sibling_messages')\n        .update({ read: true })\n        .eq('id', msg.id)\n\n      // Remove from pending list\n      setPending(prev => prev.filter(m => m.id !== msg.id))\n    } catch (err) {\n      console.error('Action failed:', err)\n    } finally {\n      setProcessing(null)\n    }\n  }\n\n  return (\n    <div className=\"space-y-6 pb-8\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <h1 className=\"text-lg font-mono font-bold\">Approvals</h1>\n          {pending.length > 0 && (\n            <span className=\"bg-danger text-white text-xs font-mono px-2 py-0.5 rounded-full\">\n              {pending.length}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Tabs */}\n      <div className=\"flex space-x-1 rounded-lg border border-border bg-card p-1\">\n        {(['pending', 'history', 'delegation'] as const).map(t => (\n          <button\n            key={t}\n            type=\"button\"\n            onClick={() => setTab(t)}\n            className={`flex-1 px-4 py-2 rounded-md text-sm font-medium capitalize transition-colors ${\n              tab === t\n                ? 'bg-foreground text-background'\n                : 'text-muted hover:text-foreground'\n            }`}\n          >\n            {t}\n            {t === 'pending' && pending.length > 0 && (\n              <span className=\"ml-1.5 text-xs opacity-60\">{pending.length}</span>\n            )}\n          </button>\n        ))}\n      </div>\n\n      {/* Pending Approvals */}\n      {tab === 'pending' && (\n        <div className=\"space-y-3\">\n          {pending.length === 0 && (\n            <div className=\"rounded-lg border border-border bg-card p-8 text-center\">\n              <p className=\"text-sm text-muted\">No pending approvals</p>\n              <p className=\"text-xs text-muted mt-1\">Cloud Lu is operating within delegation authority</p>\n            </div>\n          )}\n          {pending.map(msg => {\n            const details = parseApprovalDetails(msg)\n            const isExpanded = expanded === msg.id\n            const isProcessing = processing === msg.id\n            return (\n              <div\n                key={msg.id}\n                className=\"rounded-lg border border-warning bg-warning/5 p-4\"\n              >\n                <div className=\"flex items-start justify-between gap-3\">\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center gap-2 mb-1\">\n                      <span className=\"text-xs font-mono font-bold text-accent\">\n                        {details.requester}\n                      </span>\n                      <span className=\"text-xs text-muted\">→ you</span>\n                      <span className=\"text-xs text-muted ml-auto\">\n                        {timeAgo(details.timestamp)}\n                      </span>\n                    </div>\n                    <p className=\"text-sm font-mono whitespace-pre-wrap\">\n                      {details.summary}\n                    </p>\n                    {details.estimatedCost && (\n                      <p className=\"text-xs text-warning mt-1\">\n                        Est. cost: {details.estimatedCost}\n                      </p>\n                    )}\n                    {isExpanded && details.context && (\n                      <div className=\"mt-2 p-2 bg-background rounded text-xs text-muted font-mono\">\n                        {details.context}\n                      </div>\n                    )}\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2 mt-3\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleAction(msg, 'approve')}\n                    disabled={isProcessing}\n                    className=\"bg-success hover:bg-success/90 disabled:opacity-50 text-white px-4 py-1.5 rounded-md text-xs font-mono font-bold\"\n                  >\n                    {isProcessing ? '...' : 'Approve'}\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => handleAction(msg, 'reject')}\n                    disabled={isProcessing}\n                    className=\"bg-danger hover:bg-danger/90 disabled:opacity-50 text-white px-4 py-1.5 rounded-md text-xs font-mono font-bold\"\n                  >\n                    Reject\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setExpanded(isExpanded ? null : msg.id)}\n                    className=\"text-muted hover:text-foreground px-3 py-1.5 rounded-md text-xs font-mono border border-border\"\n                  >\n                    {isExpanded ? 'Collapse' : 'Details'}\n                  </button>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      )}\n\n      {/* History */}\n      {tab === 'history' && (\n        <div className=\"space-y-2\">\n          {approvalHistory.map(msg => {\n            const isApproved = msg.message_type === 'approval_granted'\n            return (\n              <div\n                key={msg.id}\n                className={`rounded-lg border p-3 ${\n                  isApproved ? 'border-success/30 bg-success/5' : 'border-danger/30 bg-danger/5'\n                }`}\n              >\n                <div className=\"flex items-center gap-2\">\n                  <span className={`text-xs font-mono font-bold ${isApproved ? 'text-success' : 'text-danger'}`}>\n                    {isApproved ? 'APPROVED' : 'REJECTED'}\n                  </span>\n                  <span className=\"text-xs text-muted\">{msg.from_instance} → {msg.to_instance}</span>\n                  <span className=\"text-xs text-muted ml-auto\">{timeAgo(msg.created_at)}</span>\n                </div>\n                <p className=\"text-xs font-mono text-muted mt-1 truncate\">{msg.message}</p>\n              </div>\n            )\n          })}\n        </div>\n      )}\n\n      {/* Delegation Authority */}\n      {tab === 'delegation' && (\n        <div className=\"rounded-lg border border-border bg-card\">\n          <div className=\"p-4 border-b border-border\">\n            <h2 className=\"text-sm font-mono font-bold\">Cloud Lu Delegation Authority</h2>\n            <p className=\"text-xs text-muted mt-1\">\n              Actions Cloud Lu can take autonomously vs requiring human approval\n            </p>\n          </div>\n          <table className=\"w-full\">\n            <thead>\n              <tr className=\"text-left text-xs text-muted uppercase tracking-wide border-b border-border\">\n                <th className=\"p-3\">Action</th>\n                <th className=\"p-3\">Limit</th>\n                <th className=\"p-3\">Auto?</th>\n              </tr>\n            </thead>\n            <tbody className=\"text-xs font-mono\">\n              {DELEGATION_RULES.map(rule => (\n                <tr key={rule.action} className=\"border-b border-border/50\">\n                  <td className=\"p-3\">{rule.action}</td>\n                  <td className=\"p-3 text-muted\">{rule.limit}</td>\n                  <td className=\"p-3\">\n                    <span className={`px-2 py-0.5 rounded ${\n                      rule.auto ? 'bg-success/10 text-success' : 'bg-warning/10 text-warning'\n                    }`}>\n                      {rule.auto ? 'Auto' : 'Manual'}\n                    </span>\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </div>\n  )\n}\n```\n\n### Features\n1. Pending approvals list with visual card per request (yellow border)\n2. Approval card: requester, action summary, estimated cost (parsed from message), timestamp\n3. Approve (green) / Reject (red) / Details (expand context) buttons\n4. Approve sends `approval_granted` message back, marks original as read\n5. Reject sends `approval_rejected` message back, marks original as read\n6. Badge count on pending tab\n7. History tab with scrollable past approvals (green=approved, red=rejected)\n8. Delegation authority tab — Cloud Lu auto-approve rules displayed\n9. iOS safe-area compatible (inherits from layout)\n10. Follows existing foundry-dashboard patterns (dark theme, font-mono, border-border)",
  "content": "## C8-WEB-04: Approval Flow — Implementation\n\n### File: `foundry-dashboard/src/app/approvals/page.tsx`\n\n```tsx\nimport { supabase } from '@/lib/supabase'\nimport ApprovalFlow from '@/components/approval-flow'\n\nexport const revalidate = 0\n\nexport default async function ApprovalsPage() {\n  // Pending approvals\n  const { data: pending } = await supabase\n    .from('lu_sibling_messages')\n    .select('*')\n    .in('message_type', ['approval_pending', 'approval_request'])\n    .eq('read', false)\n    .order('created_at', { ascending: false })\n    .limit(50)\n\n  // History (resolved approvals)\n  const { data: history } = await supabase\n    .from('lu_sibling_messages')\n    .select('*')\n    .in('message_type', ['approval_granted', 'approval_rejected'])\n    .order('created_at', { ascending: false })\n    .limit(100)\n\n  return (\n    <div className=\"max-w-4xl mx-auto\">\n      <ApprovalFlow\n        pendingApprovals={pending ?? []}\n        approvalHistory={history ?? []}\n      />\n    </div>\n  )\n}\n```\n\n### File: `foundry-dashboard/src/components/approval-flow.tsx`\n\n```tsx\n'use client'\n\nimport React, { useState } from 'react'\nimport { createClient } from '@supabase/supabase-js'\n\nconst supabase = createClient(\n  process.env.NEXT_PUBLIC_SUPABASE_URL!,\n  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!\n)\n\ninterface SiblingMessage {\n  id: string\n  from_instance: string\n  to_instance: string\n  message: string\n  context: string | null\n  message_type: string | null\n  read: boolean\n  created_at: string\n}\n\n// Cloud Lu delegation authority rules\nconst DELEGATION_RULES = [\n  { action: 'Retry failed task', limit: 'Auto-approved (up to 3 retries)', auto: true },\n  { action: 'Dispatch to Scout tier', limit: 'Auto-approved (cost < $0.01)', auto: true },\n  { action: 'Dispatch to Builder tier', limit: 'Auto-approved (cost < $0.10)', auto: true },\n  { action: 'Dispatch to Prime tier', limit: 'Requires human approval', auto: false },\n  { action: 'Create new spec', limit: 'Auto-approved (self-spec pipeline)', auto: true },\n  { action: 'Modify production code', limit: 'Requires human approval', auto: false },\n  { action: 'Deploy to Cloud Run', limit: 'Requires human approval', auto: false },\n  { action: 'Merge PR', limit: 'Requires human approval', auto: false },\n  { action: 'Record learning', limit: 'Auto-approved', auto: true },\n  { action: 'Send sibling message', limit: 'Auto-approved', auto: true },\n]\n\nfunction timeAgo(dateStr: string): string {\n  const diff = Date.now() - new Date(dateStr).getTime()\n  const mins = Math.floor(diff / 60000)\n  if (mins < 1) return 'now'\n  if (mins < 60) return `${mins}m ago`\n  const hours = Math.floor(mins / 60)\n  if (hours < 24) return `${hours}h ago`\n  return `${Math.floor(hours / 24)}d ago`\n}\n\nfunction parseApprovalDetails(msg: SiblingMessage) {\n  // Extract structured data from message text\n  const costMatch = msg.message.match(/\\$[\\d.]+/)\n  const cost = costMatch ? costMatch[0] : null\n  return {\n    requester: msg.from_instance,\n    recipient: msg.to_instance,\n    summary: msg.message,\n    context: msg.context,\n    estimatedCost: cost,\n    timestamp: msg.created_at,\n  }\n}\n\nexport default function ApprovalFlow({\n  pendingApprovals,\n  approvalHistory,\n}: {\n  pendingApprovals: SiblingMessage[]\n  approvalHistory: SiblingMessage[]\n}) {\n  const [pending, setPending] = useState(pendingApprovals)\n  const [processing, setProcessing] = useState<string | null>(null)\n  const [expanded, setExpanded] = useState<string | null>(null)\n  const [showDelegation, setShowDelegation] = useState(false)\n  const [tab, setTab] = useState<'pending' | 'history' | 'delegation'>('pending')\n\n  const handleAction = async (msg: SiblingMessage, action: 'approve' | 'reject') => {\n    setProcessing(msg.id)\n    try {\n      const messageType = action === 'approve' ? 'approval_granted' : 'approval_rejected'\n      const responseText = action === 'approve'\n        ? `[Carlos] APPROVED: ${msg.context || msg.message.slice(0, 80)}`\n        : `[Carlos] REJECTED: ${msg.context || msg.message.slice(0, 80)}`\n\n      // Send response message\n      await supabase.from('lu_sibling_messages').insert({\n        from_instance: 'Carlos',\n        to_instance: msg.from_instance,\n        message: responseText,\n        context: `Response to approval request ${msg.id}`,\n        message_type: messageType,\n        read: false,\n      })\n\n      // Mark original as read\n      await supabase\n        .from('lu_sibling_messages')\n        .update({ read: true })\n        .eq('id', msg.id)\n\n      // Remove from pending list\n      setPending(prev => prev.filter(m => m.id !== msg.id))\n    } catch (err) {\n      console.error('Action failed:', err)\n    } finally {\n      setProcessing(null)\n    }\n  }\n\n  return (\n    <div className=\"space-y-6 pb-8\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <h1 className=\"text-lg font-mono font-bold\">Approvals</h1>\n          {pending.length > 0 && (\n            <span className=\"bg-danger text-white text-xs font-mono px-2 py-0.5 rounded-full\">\n              {pending.length}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Tabs */}\n      <div className=\"flex space-x-1 rounded-lg border border-border bg-card p-1\">\n        {(['pending', 'history', 'delegation'] as const).map(t => (\n          <button\n            key={t}\n            type=\"button\"\n            onClick={() => setTab(t)}\n            className={`flex-1 px-4 py-2 rounded-md text-sm font-medium capitalize transition-colors ${\n              tab === t\n                ? 'bg-foreground text-background'\n                : 'text-muted hover:text-foreground'\n            }`}\n          >\n            {t}\n            {t === 'pending' && pending.length > 0 && (\n              <span className=\"ml-1.5 text-xs opacity-60\">{pending.length}</span>\n            )}\n          </button>\n        ))}\n      </div>\n\n      {/* Pending Approvals */}\n      {tab === 'pending' && (\n        <div className=\"space-y-3\">\n          {pending.length === 0 && (\n            <div className=\"rounded-lg border border-border bg-card p-8 text-center\">\n              <p className=\"text-sm text-muted\">No pending approvals</p>\n              <p className=\"text-xs text-muted mt-1\">Cloud Lu is operating within delegation authority</p>\n            </div>\n          )}\n          {pending.map(msg => {\n            const details = parseApprovalDetails(msg)\n            const isExpanded = expanded === msg.id\n            const isProcessing = processing === msg.id\n            return (\n              <div\n                key={msg.id}\n                className=\"rounded-lg border border-warning bg-warning/5 p-4\"\n              >\n                <div className=\"flex items-start justify-between gap-3\">\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center gap-2 mb-1\">\n                      <span className=\"text-xs font-mono font-bold text-accent\">\n                        {details.requester}\n                      </span>\n                      <span className=\"text-xs text-muted\">→ you</span>\n                      <span className=\"text-xs text-muted ml-auto\">\n                        {timeAgo(details.timestamp)}\n                      </span>\n                    </div>\n                    <p className=\"text-sm font-mono whitespace-pre-wrap\">\n                      {details.summary}\n                    </p>\n                    {details.estimatedCost && (\n                      <p className=\"text-xs text-warning mt-1\">\n                        Est. cost: {details.estimatedCost}\n                      </p>\n                    )}\n                    {isExpanded && details.context && (\n                      <div className=\"mt-2 p-2 bg-background rounded text-xs text-muted font-mono\">\n                        {details.context}\n                      </div>\n                    )}\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-2 mt-3\">\n                  <button\n                    type=\"button\"\n                    onClick={() => handleAction(msg, 'approve')}\n                    disabled={isProcessing}\n                    className=\"bg-success hover:bg-success/90 disabled:opacity-50 text-white px-4 py-1.5 rounded-md text-xs font-mono font-bold\"\n                  >\n                    {isProcessing ? '...' : 'Approve'}\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => handleAction(msg, 'reject')}\n                    disabled={isProcessing}\n                    className=\"bg-danger hover:bg-danger/90 disabled:opacity-50 text-white px-4 py-1.5 rounded-md text-xs font-mono font-bold\"\n                  >\n                    Reject\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => setExpanded(isExpanded ? null : msg.id)}\n                    className=\"text-muted hover:text-foreground px-3 py-1.5 rounded-md text-xs font-mono border border-border\"\n                  >\n                    {isExpanded ? 'Collapse' : 'Details'}\n                  </button>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      )}\n\n      {/* History */}\n      {tab === 'history' && (\n        <div className=\"space-y-2\">\n          {approvalHistory.map(msg => {\n            const isApproved = msg.message_type === 'approval_granted'\n            return (\n              <div\n                key={msg.id}\n                className={`rounded-lg border p-3 ${\n                  isApproved ? 'border-success/30 bg-success/5' : 'border-danger/30 bg-danger/5'\n                }`}\n              >\n                <div className=\"flex items-center gap-2\">\n                  <span className={`text-xs font-mono font-bold ${isApproved ? 'text-success' : 'text-danger'}`}>\n                    {isApproved ? 'APPROVED' : 'REJECTED'}\n                  </span>\n                  <span className=\"text-xs text-muted\">{msg.from_instance} → {msg.to_instance}</span>\n                  <span className=\"text-xs text-muted ml-auto\">{timeAgo(msg.created_at)}</span>\n                </div>\n                <p className=\"text-xs font-mono text-muted mt-1 truncate\">{msg.message}</p>\n              </div>\n            )\n          })}\n        </div>\n      )}\n\n      {/* Delegation Authority */}\n      {tab === 'delegation' && (\n        <div className=\"rounded-lg border border-border bg-card\">\n          <div className=\"p-4 border-b border-border\">\n            <h2 className=\"text-sm font-mono font-bold\">Cloud Lu Delegation Authority</h2>\n            <p className=\"text-xs text-muted mt-1\">\n              Actions Cloud Lu can take autonomously vs requiring human approval\n            </p>\n          </div>\n          <table className=\"w-full\">\n            <thead>\n              <tr className=\"text-left text-xs text-muted uppercase tracking-wide border-b border-border\">\n                <th className=\"p-3\">Action</th>\n                <th className=\"p-3\">Limit</th>\n                <th className=\"p-3\">Auto?</th>\n              </tr>\n            </thead>\n            <tbody className=\"text-xs font-mono\">\n              {DELEGATION_RULES.map(rule => (\n                <tr key={rule.action} className=\"border-b border-border/50\">\n                  <td className=\"p-3\">{rule.action}</td>\n                  <td className=\"p-3 text-muted\">{rule.limit}</td>\n                  <td className=\"p-3\">\n                    <span className={`px-2 py-0.5 rounded ${\n                      rule.auto ? 'bg-success/10 text-success' : 'bg-warning/10 text-warning'\n                    }`}>\n                      {rule.auto ? 'Auto' : 'Manual'}\n                    </span>\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </div>\n  )\n}\n```\n\n### Features\n1. Pending approvals list with visual card per request (yellow border)\n2. Approval card: requester, action summary, estimated cost (parsed from message), timestamp\n3. Approve (green) / Reject (red) / Details (expand context) buttons\n4. Approve sends `approval_granted` message back, marks original as read\n5. Reject sends `approval_rejected` message back, marks original as read\n6. Badge count on pending tab\n7. History tab with scrollable past approvals (green=approved, red=rejected)\n8. Delegation authority tab — Cloud Lu auto-approve rules displayed\n9. iOS safe-area compatible (inherits from layout)\n10. Follows existing foundry-dashboard patterns (dark theme, font-mono, border-border)"
}