auramaxx 1.0.0-alpha.4

package/src/components/HumanActionBar.tsx

@@ -0,0 +1,695 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Check, X, ChevronUp, ChevronDown, Zap, ArrowUpRight, KeyRound, Clock, Shield, Info, AlertTriangle, Globe, Wallet, Timer, Lock } from 'lucide-react';
+import { Button } from '@/components/design-system';
+import type { HumanAction } from '@/hooks/useAgentActions';
+
+interface HumanActionBarProps {
+  requests: HumanAction[];
+  resolveAction: (id: string, approved: boolean) => Promise<unknown>;
+  actionLoading: string | null;
+}
+
+// ---------------------------------------------------------------------------
+// Verified summary types (mirrors server/lib/verified-summary.ts)
+// ---------------------------------------------------------------------------
+
+interface VerifiedFact {
+  label: string;
+  value: string;
+  raw?: string;
+}
+
+interface SummaryDiscrepancy {
+  field: string;
+  agentClaim: string;
+  actual: string;
+  severity: 'info' | 'warning' | 'critical';
+}
+
+interface VerifiedSummary {
+  action: string;
+  oneLiner: string;
+  facts: VerifiedFact[];
+  permissionLabels: string[];
+  limitLabels: string[];
+  walletAccessLabels: string[];
+  ttlLabel: string;
+  agentId: string;
+  discrepancies: SummaryDiscrepancy[];
+  verified: boolean;
+  generatedAt: string;
+}
+
+interface ActionMeta {
+  agentId?: string;
+  summary?: string;
+  limit?: number;
+  permissions?: string[];
+  limits?: Record<string, number>;
+  walletAccess?: string[];
+  ttl?: number;
+  action?: { endpoint?: string; method?: string; body?: Record<string, unknown> };
+  verifiedSummary?: VerifiedSummary;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function parseActionMeta(request: HumanAction): ActionMeta {
+  if (!request.metadata) return {};
+  try {
+    return JSON.parse(request.metadata);
+  } catch {
+    return {};
+  }
+}
+
+function formatSummary(request: HumanAction): string {
+  const meta = parseActionMeta(request);
+  if (meta.verifiedSummary?.oneLiner) return meta.verifiedSummary.oneLiner;
+  if (meta.summary) return meta.summary;
+  const agent = meta.agentId || 'agent';
+  const type = request.type.replace(/_/g, ' ');
+  if (request.amount) return `${agent} requesting ${request.amount} ETH`;
+  if (meta.limit) return `${agent} requesting ${meta.limit} ETH limit`;
+  return `${agent} — ${type}`;
+}
+
+function hasDiscrepancies(request: HumanAction): boolean {
+  const meta = parseActionMeta(request);
+  return (meta.verifiedSummary?.discrepancies?.length ?? 0) > 0;
+}
+
+function hasCriticalDiscrepancies(request: HumanAction): boolean {
+  const meta = parseActionMeta(request);
+  return (meta.verifiedSummary?.discrepancies?.some(d => d.severity === 'critical')) ?? false;
+}
+
+function getTypeIcon(type: string) {
+  switch (type) {
+    case 'agent_access': return <KeyRound size={10} />;
+    case 'fund': return <ArrowUpRight size={10} />;
+    case 'send': return <Zap size={10} />;
+    case 'action': return <Shield size={10} />;
+    default: return <Zap size={10} />;
+  }
+}
+
+function formatTypeLabel(type: string): string {
+  switch (type) {
+    case 'agent_access': return 'ACCESS';
+    case 'fund': return 'FUND';
+    case 'send': return 'SEND';
+    case 'action': return 'ACTION';
+    default: return type.toUpperCase().replace(/_/g, ' ');
+  }
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}
+
+function formatTtl(ttl: number | undefined): string {
+  if (!ttl) return 'Default';
+  if (ttl < 60) return `${ttl}s`;
+  if (ttl < 3600) return `${Math.floor(ttl / 60)}m`;
+  return `${Math.floor(ttl / 3600)}h`;
+}
+
+// ---------------------------------------------------------------------------
+// Detail section sub-component
+// ---------------------------------------------------------------------------
+
+function DetailSection({ icon, label, children, muted }: {
+  icon: React.ReactNode;
+  label: string;
+  children: React.ReactNode;
+  muted?: boolean;
+}) {
+  return (
+    <div className="flex gap-2 py-1.5" style={{ opacity: muted ? 0.7 : 1 }}>
+      <div className="shrink-0 mt-0.5" style={{ color: 'var(--color-text-muted, #6b7280)' }}>
+        {icon}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div
+          className="font-mono text-[8px] font-bold tracking-[0.15em] uppercase mb-1"
+          style={{ color: 'var(--color-text-faint, #9ca3af)' }}
+        >
+          {label}
+        </div>
+        <div
+          className="font-mono text-[10px]"
+          style={{
+            color: 'var(--color-text, #0a0a0a)',
+            fontStyle: muted ? 'italic' : undefined,
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Detail panel
+// ---------------------------------------------------------------------------
+
+function ActionDetailPanel({ meta }: { meta: ActionMeta }) {
+  const vs = meta.verifiedSummary;
+  const hasWarnings = (vs?.discrepancies?.length ?? 0) > 0;
+
+  return (
+    <div
+      className="px-4 py-3"
+      style={{
+        background: 'var(--color-background-alt, #f4f4f5)',
+        borderTop: '1px solid var(--color-border, #e5e5e5)',
+      }}
+    >
+      {/* Discrepancy warning banner */}
+      {hasWarnings && vs?.discrepancies && (
+        <div
+          className="flex items-start gap-2 px-3 py-2 mb-3"
+          style={{
+            background: 'color-mix(in srgb, var(--color-warning, #f59e0b) 10%, transparent)',
+            border: '1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent)',
+          }}
+        >
+          <AlertTriangle size={12} className="shrink-0 mt-0.5" style={{ color: 'var(--color-warning, #f59e0b)' }} />
+          <div className="font-mono text-[9px]" style={{ color: 'var(--color-text, #0a0a0a)' }}>
+            {vs.discrepancies.map((d, i) => (
+              <div key={i} className="mb-1 last:mb-0">
+                <span
+                  className="font-bold uppercase text-[8px] mr-1"
+                  style={{
+                    color: d.severity === 'critical'
+                      ? 'var(--color-danger, #ef4444)'
+                      : d.severity === 'warning'
+                        ? 'var(--color-warning, #f59e0b)'
+                        : 'var(--color-text-muted, #6b7280)',
+                  }}
+                >
+                  {d.severity}
+                </span>
+                {d.field}: agent says &ldquo;{d.agentClaim}&rdquo;, actual: {d.actual}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* AGENT SAYS */}
+      {meta.summary && (
+        <DetailSection icon={<Info size={10} />} label="AGENT SAYS" muted>
+          &ldquo;{meta.summary}&rdquo;
+        </DetailSection>
+      )}
+
+      {/* ACTION */}
+      {meta.action && (
+        <DetailSection icon={<Globe size={10} />} label="ACTION">
+          <div className="mb-1">
+            <span
+              className="font-bold px-1 py-0.5 mr-1"
+              style={{
+                background: 'var(--color-border, #e5e5e5)',
+                fontSize: '9px',
+              }}
+            >
+              {meta.action.method || 'POST'}
+            </span>
+            <span>{meta.action.endpoint}</span>
+          </div>
+          {vs?.facts && vs.facts.length > 0 && (
+            <div className="mt-1">
+              {vs.facts.map((fact, i) => (
+                <div key={i} className="flex gap-2">
+                  <span style={{ color: 'var(--color-text-muted, #6b7280)' }}>{fact.label}:</span>
+                  <span>{fact.value}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </DetailSection>
+      )}
+
+      {/* PERMISSIONS */}
+      {vs?.permissionLabels && vs.permissionLabels.length > 0 && (
+        <DetailSection icon={<Lock size={10} />} label="PERMISSIONS">
+          <div className="flex flex-wrap gap-1">
+            {vs.permissionLabels.map((label, i) => (
+              <span
+                key={i}
+                className="px-1.5 py-0.5 text-[8px] font-bold"
+                style={{
+                  background: 'var(--color-border, #e5e5e5)',
+                  color: 'var(--color-text-muted, #6b7280)',
+                }}
+              >
+                {label}
+              </span>
+            ))}
+          </div>
+        </DetailSection>
+      )}
+
+      {/* LIMITS */}
+      {vs?.limitLabels && vs.limitLabels.length > 0 && (
+        <DetailSection icon={<Shield size={10} />} label="LIMITS">
+          {vs.limitLabels.map((label, i) => (
+            <div key={i}>{label}</div>
+          ))}
+        </DetailSection>
+      )}
+
+      {/* WALLET ACCESS */}
+      {vs?.walletAccessLabels && vs.walletAccessLabels.length > 0 && (
+        <DetailSection icon={<Wallet size={10} />} label="WALLET ACCESS">
+          <div className="flex flex-wrap gap-1">
+            {vs.walletAccessLabels.map((addr, i) => (
+              <span
+                key={i}
+                className="px-1.5 py-0.5 text-[8px] font-mono"
+                style={{
+                  background: 'var(--color-border, #e5e5e5)',
+                  color: 'var(--color-text-muted, #6b7280)',
+                }}
+              >
+                {addr}
+              </span>
+            ))}
+          </div>
+        </DetailSection>
+      )}
+
+      {/* VALID FOR */}
+      {vs?.ttlLabel && (
+        <DetailSection icon={<Timer size={10} />} label="VALID FOR">
+          {vs.ttlLabel}
+        </DetailSection>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ActionCard
+// ---------------------------------------------------------------------------
+
+function ActionCard({ request, resolveAction, actionLoading, showBorder }: {
+  request: HumanAction;
+  resolveAction: (id: string, approved: boolean) => Promise<unknown>;
+  actionLoading: string | null;
+  showBorder: boolean;
+}) {
+  const [detailExpanded, setDetailExpanded] = useState(false);
+  const approving = actionLoading === `resolve-${request.id}` || actionLoading === `approve-${request.id}`;
+  const rejecting = actionLoading === `reject-${request.id}`;
+  const loading = approving || rejecting;
+  const meta = parseActionMeta(request);
+  const hasMismatch = hasDiscrepancies(request);
+  const borderColor = hasMismatch
+    ? 'var(--color-warning, #f59e0b)'
+    : 'var(--color-danger, #ef4444)';
+
+  return (
+    <div>
+      <div
+        className="flex items-center gap-3 px-4 py-3"
+        style={{
+          borderBottom: showBorder && !detailExpanded ? '1px solid var(--color-border, #e5e5e5)' : undefined,
+          borderLeft: `3px solid ${borderColor}`,
+          background: 'var(--color-surface, #ffffff)',
+        }}
+      >
+        {/* Type badge */}
+        <div
+          className="flex items-center gap-1 px-1.5 py-0.5 shrink-0"
+          style={{
+            background: 'var(--color-background-alt, #f4f4f5)',
+            border: '1px solid var(--color-border, #e5e5e5)',
+            color: 'var(--color-text-muted, #6b7280)',
+          }}
+        >
+          {getTypeIcon(request.type)}
+          <span className="font-mono text-[8px] font-bold tracking-wider uppercase">
+            {formatTypeLabel(request.type)}
+          </span>
+        </div>
+
+        {/* Summary + timestamp */}
+        <div className="flex-1 min-w-0">
+          <div
+            className="font-mono text-[10px] truncate flex items-center gap-1.5"
+            style={{ color: 'var(--color-text, #0a0a0a)' }}
+          >
+            {formatSummary(request)}
+            {hasMismatch && (
+              <span
+                className="shrink-0 px-1 py-0 text-[7px] font-bold tracking-wider uppercase"
+                style={{
+                  background: 'color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent)',
+                  color: 'var(--color-warning, #f59e0b)',
+                  border: '1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent)',
+                }}
+              >
+                MISMATCH
+              </span>
+            )}
+          </div>
+          <div
+            className="font-mono text-[8px] mt-0.5 flex items-center gap-1"
+            style={{ color: 'var(--color-text-faint, #9ca3af)' }}
+          >
+            <Clock size={7} />
+            {timeAgo(request.createdAt)}
+          </div>
+        </div>
+
+        {/* Detail toggle */}
+        {meta.verifiedSummary && (
+          <button
+            onClick={() => setDetailExpanded(!detailExpanded)}
+            className="flex items-center gap-1 shrink-0 hover:opacity-70"
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'var(--color-text-muted, #6b7280)',
+              padding: '2px 4px',
+            }}
+          >
+            <Info size={10} />
+            {detailExpanded ? <ChevronUp size={10} /> : <ChevronDown size={10} />}
+          </button>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center gap-1.5 shrink-0">
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => resolveAction(request.id, true)}
+            disabled={loading}
+            loading={approving}
+            icon={!approving ? <Check size={10} /> : undefined}
+            className="h-7 px-2"
+          >
+            APPROVE
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => resolveAction(request.id, false)}
+            disabled={loading}
+            loading={rejecting}
+            icon={!rejecting ? <X size={10} /> : undefined}
+            className="h-7 px-2"
+          >
+            REJECT
+          </Button>
+        </div>
+      </div>
+
+      {/* Expanded detail panel */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: detailExpanded ? '1fr' : '0fr',
+          transition: 'grid-template-rows 150ms ease',
+          borderLeft: `3px solid ${borderColor}`,
+          borderBottom: showBorder && detailExpanded ? '1px solid var(--color-border, #e5e5e5)' : undefined,
+        }}
+      >
+        <div style={{ overflow: 'hidden' }}>
+          {detailExpanded && <ActionDetailPanel meta={meta} />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main bar
+// ---------------------------------------------------------------------------
+
+export const HumanActionBar: React.FC<HumanActionBarProps> = ({
+  requests,
+  resolveAction,
+  actionLoading,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [detailExpanded, setDetailExpanded] = useState(false);
+  const pending = requests.filter(r => r.status === 'pending' && r.type !== 'notify');
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Close expanded panel on outside click
+  useEffect(() => {
+    if (!expanded) return;
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setExpanded(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [expanded]);
+
+  // Auto-collapse when queue drains
+  useEffect(() => {
+    if (pending.length <= 1) setExpanded(false);
+  }, [pending.length]);
+
+  // Hidden when nothing pending
+  if (pending.length === 0) return null;
+
+  const first = pending[0];
+  const firstMeta = parseActionMeta(first);
+  const firstApproving = actionLoading === `resolve-${first.id}` || actionLoading === `approve-${first.id}`;
+  const firstRejecting = actionLoading === `reject-${first.id}`;
+  const firstLoading = firstApproving || firstRejecting;
+  const firstHasMismatch = hasDiscrepancies(first);
+  const firstBorderColor = firstHasMismatch
+    ? 'var(--color-warning, #f59e0b)'
+    : 'var(--color-danger, #ef4444)';
+
+  return (
+    <div className="relative z-30" ref={panelRef}>
+      {/* Expanded stack — grows upward */}
+      {expanded && pending.length > 1 && (
+        <div
+          className="absolute bottom-full left-0 right-0"
+          style={{
+            maxHeight: '320px',
+            overflowY: 'auto',
+            border: '1px solid var(--color-border, #e5e5e5)',
+            borderBottom: 'none',
+          }}
+        >
+          {/* Queue header */}
+          <div
+            className="px-4 py-2 sticky top-0 z-10"
+            style={{
+              background: 'var(--color-background-alt, #f4f4f5)',
+              borderBottom: '1px solid var(--color-border, #e5e5e5)',
+            }}
+          >
+            <span
+              className="font-mono text-[8px] font-bold tracking-[0.2em] uppercase"
+              style={{ color: 'var(--color-text-faint, #9ca3af)' }}
+            >
+              QUEUED ACTIONS ({pending.length - 1})
+            </span>
+          </div>
+
+          {/* Queued action cards */}
+          {pending.slice(1).map((req, i) => (
+            <ActionCard
+              key={req.id}
+              request={req}
+              resolveAction={resolveAction}
+              actionLoading={actionLoading}
+              showBorder={i < pending.length - 2}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Main bar */}
+      <div
+        style={{
+          background: 'var(--color-surface, #ffffff)',
+          borderTop: '1px solid var(--color-border, #e5e5e5)',
+          borderBottom: '1px solid var(--color-border, #e5e5e5)',
+        }}
+      >
+        <div
+          className="flex items-center h-14 px-4 gap-3"
+          style={{ borderLeft: `3px solid ${firstBorderColor}` }}
+        >
+          {/* Red count badge — flat rectangle, no radius */}
+          <div
+            className="flex items-center justify-center shrink-0"
+            style={{
+              minWidth: '24px',
+              height: '22px',
+              padding: '0 6px',
+              background: 'var(--color-danger, #ef4444)',
+              color: '#ffffff',
+              fontFamily: 'monospace',
+              fontSize: '11px',
+              fontWeight: 700,
+              letterSpacing: '0.05em',
+            }}
+          >
+            {pending.length}
+          </div>
+
+          {/* Label */}
+          <span
+            className="font-mono text-[10px] font-bold tracking-[0.2em] uppercase shrink-0"
+            style={{ color: 'var(--color-danger, #ef4444)' }}
+          >
+            PENDING
+          </span>
+
+          {/* Divider */}
+          <div
+            className="w-px h-6 shrink-0"
+            style={{ background: 'var(--color-border, #e5e5e5)' }}
+          />
+
+          {/* Type badge */}
+          <div
+            className="flex items-center gap-1 px-1.5 py-0.5 shrink-0"
+            style={{
+              background: 'var(--color-background-alt, #f4f4f5)',
+              border: '1px solid var(--color-border, #e5e5e5)',
+              color: 'var(--color-text-muted, #6b7280)',
+            }}
+          >
+            {getTypeIcon(first.type)}
+            <span className="font-mono text-[8px] font-bold tracking-[0.15em] uppercase">
+              {formatTypeLabel(first.type)}
+            </span>
+          </div>
+
+          {/* Summary */}
+          <div
+            className="font-mono text-[11px] truncate min-w-0 flex-1 flex items-center gap-1.5"
+            style={{ color: 'var(--color-text, #0a0a0a)' }}
+          >
+            {formatSummary(first)}
+            {firstHasMismatch && (
+              <span
+                className="shrink-0 px-1 py-0 text-[7px] font-bold tracking-wider uppercase"
+                style={{
+                  background: 'color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent)',
+                  color: 'var(--color-warning, #f59e0b)',
+                  border: '1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent)',
+                }}
+              >
+                MISMATCH
+              </span>
+            )}
+          </div>
+
+          {/* Detail toggle */}
+          {firstMeta.verifiedSummary && (
+            <button
+              onClick={() => setDetailExpanded(!detailExpanded)}
+              className="flex items-center gap-1 shrink-0 hover:opacity-70"
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--color-text-muted, #6b7280)',
+                padding: '2px 4px',
+              }}
+            >
+              <Info size={10} />
+              {detailExpanded ? <ChevronUp size={10} /> : <ChevronDown size={10} />}
+            </button>
+          )}
+
+          {/* Action buttons */}
+          <div className="flex items-center gap-1.5 shrink-0">
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => resolveAction(first.id, true)}
+              disabled={firstLoading}
+              loading={firstApproving}
+              icon={!firstApproving ? <Check size={10} /> : undefined}
+              className="h-7 px-2"
+            >
+              APPROVE
+            </Button>
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={() => resolveAction(first.id, false)}
+              disabled={firstLoading}
+              loading={firstRejecting}
+              icon={!firstRejecting ? <X size={10} /> : undefined}
+              className="h-7 px-2"
+            >
+              REJECT
+            </Button>
+          </div>
+
+          {/* Expand toggle — only when multiple pending */}
+          {pending.length > 1 && (
+            <>
+              <div
+                className="w-px h-6 shrink-0"
+                style={{ background: 'var(--color-border, #e5e5e5)' }}
+              />
+              <button
+                onClick={() => setExpanded(!expanded)}
+                className="flex items-center gap-1.5 shrink-0 hover:opacity-70"
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  color: 'var(--color-text-muted, #6b7280)',
+                  padding: '4px 8px',
+                }}
+              >
+                <span className="font-mono text-[8px] font-bold tracking-[0.15em] uppercase">
+                  +{pending.length - 1} MORE
+                </span>
+                {expanded ? <ChevronDown size={12} /> : <ChevronUp size={12} />}
+              </button>
+            </>
+          )}
+        </div>
+
+        {/* First card's expanded detail panel */}
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateRows: detailExpanded ? '1fr' : '0fr',
+            transition: 'grid-template-rows 150ms ease',
+            borderLeft: `3px solid ${firstBorderColor}`,
+          }}
+        >
+          <div style={{ overflow: 'hidden' }}>
+            {detailExpanded && <ActionDetailPanel meta={firstMeta} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};