auramaxx 0.0.1

package/src/components/HumanActionBar.tsx

@@ -0,0 +1,697 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Check, X, ChevronUp, ChevronDown, Zap, ArrowUpRight, KeyRound, Clock, Shield, Info, AlertTriangle, 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;
+  requestedLimitExplicit?: boolean;
+  defaultFundLimit?: number;
+  permissions?: string[];
+  limits?: Record<string, number>;
+  walletAccess?: string[];
+  ttl?: number;
+  action?: { endpoint?: string; method?: string; body?: Record<string, unknown> };
+  verifiedSummary?: VerifiedSummary;
+  profile?: { id: string; version: string; displayName: string; rationale?: string };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function parseActionMeta(request: HumanAction): ActionMeta {
+  if (!request.metadata) return {};
+  try {
+    return JSON.parse(request.metadata);
+  } catch {
+    return {};
+  }
+}
+
+function formatSummary(request: HumanAction): string {
+  if (request.humanSummary?.oneLiner) return request.humanSummary.oneLiner;
+  const meta = parseActionMeta(request);
+  if (meta.summary) return meta.summary;
+  if (meta.verifiedSummary?.oneLiner) return meta.verifiedSummary.oneLiner;
+  const agent = meta.agentId || 'agent';
+  const type = request.type.replace(/_/g, ' ');
+  if (request.amount) return `${agent} requesting ${request.amount} ETH`;
+  return `${agent} — ${type}`;
+}
+
+function hasDiscrepancies(request: HumanAction): boolean {
+  const meta = parseActionMeta(request);
+  return (meta.verifiedSummary?.discrepancies?.length ?? 0) > 0;
+}
+
+function hasDetailContent(meta: ActionMeta, readable?: HumanAction['humanSummary']): boolean {
+  const permissionCount = meta.verifiedSummary?.permissionLabels?.length ?? meta.permissions?.length ?? 0;
+  const warningCount = meta.verifiedSummary?.discrepancies?.length ?? 0;
+  const readableCount = (readable?.can.length ?? 0) + (readable?.scope.length ?? 0) + (readable?.cannot.length ?? 0);
+  return Boolean(meta.summary || permissionCount > 0 || warningCount > 0 || readableCount > 0);
+}
+
+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`;
+}
+
+// ---------------------------------------------------------------------------
+// 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, readable }: { meta: ActionMeta; readable?: HumanAction['humanSummary'] }) {
+  const vs = meta.verifiedSummary;
+  const hasWarnings = (vs?.discrepancies?.length ?? 0) > 0;
+  const permissionLabels = vs?.permissionLabels?.length ? vs.permissionLabels : (meta.permissions || []);
+
+  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>
+      )}
+
+      {/* PROFILE */}
+      {(meta.profile || readable?.profileLabel) && (
+        <DetailSection icon={<Shield size={10} />} label="PROFILE">
+          <span className="font-bold">{meta.profile?.displayName || readable?.profileLabel}</span>
+          {meta.profile?.rationale && (
+            <span className="ml-1" style={{ color: 'var(--color-text-muted, #6b7280)' }}>
+              — {meta.profile.rationale}
+            </span>
+          )}
+        </DetailSection>
+      )}
+
+      {/* PERMISSIONS */}
+      {permissionLabels.length > 0 && (
+        <DetailSection icon={<Lock size={10} />} label="PERMISSIONS">
+          <div className="flex flex-wrap gap-1">
+            {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>
+      )}
+
+      {readable && (
+        <>
+          {readable.can.length > 0 && (
+            <DetailSection icon={<Shield size={10} />} label="CAN">
+              {readable.can.join(', ')}
+            </DetailSection>
+          )}
+          {readable.cannot.length > 0 && (
+            <DetailSection icon={<X size={10} />} label="CANNOT">
+              {readable.cannot.join('; ')}
+            </DetailSection>
+          )}
+          {readable.scope.length > 0 && (
+            <DetailSection icon={<Info size={10} />} label="SCOPE">
+              {readable.scope.join(', ')}
+            </DetailSection>
+          )}
+          <DetailSection icon={<Clock size={10} />} label="EXPIRY / RISK">
+            {readable.expiresIn} · {readable.riskHint}
+          </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 [rawExpanded, setRawExpanded] = 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 */}
+        {hasDetailContent(meta, request.humanSummary) && (
+          <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} readable={request.humanSummary} />
+              <div className="px-4 pb-3 bg-[var(--color-background-alt,#f4f4f5)]">
+                <button
+                  onClick={() => setRawExpanded((v) => !v)}
+                  className="font-mono text-[9px] underline text-[var(--color-text-muted,#6b7280)]"
+                >
+                  {rawExpanded ? 'Hide raw details' : 'Show raw details'}
+                </button>
+                {rawExpanded && (
+                  <pre className="mt-2 p-2 text-[9px] overflow-x-auto border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)]">{request.rawPayload || request.metadata || '{}'}</pre>
+                )}
+              </div>
+            </>
+          )}
+        </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 [rawExpanded, setRawExpanded] = 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-2 gap-2 sm:px-4 sm:gap-3 max-w-full overflow-hidden"
+          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 hidden sm:inline"
+            style={{ color: 'var(--color-danger, #ef4444)' }}
+          >
+            PENDING
+          </span>
+
+          {/* Divider */}
+          <div
+            className="w-px h-6 shrink-0 hidden sm:block"
+            style={{ background: 'var(--color-border, #e5e5e5)' }}
+          />
+
+          {/* Type badge */}
+          <div
+            className="hidden sm: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 */}
+          {hasDetailContent(firstMeta, first.humanSummary) && (
+            <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} readable={first.humanSummary} />
+                <div className="px-4 pb-3 bg-[var(--color-background-alt,#f4f4f5)]">
+                  <button
+                    onClick={() => setRawExpanded((v) => !v)}
+                    className="font-mono text-[9px] underline text-[var(--color-text-muted,#6b7280)]"
+                  >
+                    {rawExpanded ? 'Hide raw details' : 'Show raw details'}
+                  </button>
+                  {rawExpanded && (
+                    <pre className="mt-2 p-2 text-[9px] overflow-x-auto border border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface,#ffffff)]">{first.rawPayload || first.metadata || '{}'}</pre>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};