ethagent 3.3.4 → 4.1.0

package/src/identity/wallet/page/{controller.ts → flow.ts}

@@ -1,31 +1,3 @@
-import { config } from './state.js'
-import type { WalletConfig, WalletTx } from './types.js'
-import { CANCEL_CLOSE_DELAY_MS, CLOSE_DELAY_MS, TX_CLOSE_DELAY_MS } from './constants.js'
-import { shortAddr } from './copy.js'
-import {
-  applyFlowChrome,
-  approve,
-  cancel,
-  clearLastWalletError,
-  currentState,
-  errorSlot,
-  getLastWalletError,
-  initializeViewElements,
-  setState,
-  showPreparedMessage,
-  statusHint,
-  statusText,
-} from './view.js'
-import { serializeWalletError } from './errorView.js'
-import {
-  buildTxParams,
-  clearCurrentWalletMethod,
-  currentWalletMethod,
-  setActiveEthereum,
-  waitForEthereumProvider,
-  walletRequest,
-} from './walletProvider.js'
-
 let closeCountdown: ReturnType<typeof setInterval> | null = null
 let handlersAttached = false
 
@@ -162,13 +134,13 @@ export async function cancelFlow(): Promise<void> {
   } else {
     await post("/cancel", {}).catch(() => { });
   }
-  setState("done");
-  statusText.textContent = lastWalletError ? "Aborted · returning" : "Cancelled · returning";
+  setState("cancelled");
+  statusText.textContent = lastWalletError ? "Aborted" : "Cancelled";
   closeSoon(CANCEL_CLOSE_DELAY_MS);
 }
 
 function escapeAllowed(): boolean {
-  return currentState !== "submitting" && currentState !== "done";
+  return currentState !== "submitting" && currentState !== "done" && currentState !== "cancelled";
 }
 
 export function startSessionMode(): void {
@@ -199,7 +171,7 @@ export function startSessionMode(): void {
     events.close();
     __sessionMode = false;
     setState("done");
-    statusText.textContent = "All set · Returning";
+    statusText.textContent = "All set";
     closeSoon();
   });
   events.onerror = () => {
@@ -210,42 +182,3 @@ export function startSessionMode(): void {
     showReconnecting(true);
   };
 }
-
-function attachWalletHandlers(): void {
-  if (handlersAttached) return
-  handlersAttached = true
-  approve.onclick = runWalletFlow
-  cancel.onclick = cancelFlow
-  window.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-      if (!escapeAllowed()) { e.preventDefault(); return }
-      e.preventDefault()
-      cancelFlow()
-    } else if (e.key === 'Enter') {
-      if (!approve.hidden && !approve.disabled) { e.preventDefault(); runWalletFlow(); return }
-    }
-  })
-}
-
-export function bootWallet(): void {
-  initializeViewElements()
-  attachWalletHandlers()
-  applyFlowChrome()
-  if (!window.__WALLET_PREVIEW__) {
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', bootWallet, { once: true })
-    } else {
-      if (config && config.kind === 'session-wait') {
-        startSessionMode()
-      } else {
-        runWalletFlow()
-      }
-    }
-  } else {
-    window.__walletPreview = {
-      setState,
-      setConfig: (c: Partial<WalletConfig>) => { Object.assign(config, c); applyFlowChrome() },
-    }
-    runWalletFlow()
-  }
-}

package/src/identity/wallet/page/markup.ts

@@ -1,47 +1,57 @@
-import { WALLET_CSS } from './styles/index.js'
-
 export const CARD_HTML = `
-<canvas id="grainient" class="grainient-canvas" aria-hidden="true"></canvas>
 <main data-flow="sign" id="card">
-  <div class="chrome">
-    <span class="chrome-spacer"></span>
-    <span class="chrome-title" id="chrome-title">ethagent</span>
-    <span class="chrome-actions"></span>
-  </div>
-  <div class="body">
-    <div class="splash-wrap"><pre class="splash" id="splash"></pre></div>
-    <div class="head"><span class="label" id="prompt-text">signature request</span></div>
-    <h2 class="flow-title" id="flow-title">Sign Message</h2>
-    <ol class="timeline" id="timeline" hidden aria-label="Wallet flow steps"></ol>
-    <div class="details" id="details-block">
-      <p class="flow-detail" id="flow-detail">
-        <span class="key" id="detail-key">message</span>
-        <span id="detail-val"></span>
-      </p>
+  <div class="card-inner" id="card-inner">
+    <div class="chrome">
+      <span class="chrome-brand"></span>
+      <span class="chrome-title" id="chrome-title"></span>
+      <span class="chrome-actions"></span>
     </div>
-    <div class="status" id="status-block">
-      <p class="status-line">
-        <span class="marker" id="status-marker"></span>
-        <span id="status-text">Connecting to your wallet…</span>
-      </p>
-      <p class="status-hint" id="status-hint">Open your wallet extension if it doesn't pop up automatically.</p>
-      <p class="status-hint" id="reconnect-hint" hidden>Reconnecting to terminal…</p>
+    <div class="body">
+      <div class="card-header">
+        <h2 class="flow-title" id="flow-title">Sign Message</h2>
+        <p class="flow-subtitle" id="flow-subtitle"></p>
+      </div>
+      <div class="timeline" id="timeline" hidden>
+        <div class="timeline-head">
+          <span class="timeline-now" id="timeline-now"></span>
+          <span class="timeline-count" id="timeline-count"></span>
+        </div>
+        <div class="timeline-track" id="timeline-track"></div>
+      </div>
+      <div class="details" id="details-block">
+        <p class="flow-detail" id="flow-detail">
+          <span class="key" id="detail-key">message</span>
+          <span id="detail-val"></span>
+        </p>
+      </div>
+      <div class="status" id="status-block">
+        <p class="status-line">
+          <span class="marker" id="status-marker"></span>
+          <span id="status-text">Connecting to your wallet…</span>
+        </p>
+        <p class="status-hint" id="status-hint">Open your wallet extension if it doesn't pop up automatically.</p>
+        <p class="status-hint" id="reconnect-hint" hidden>Reconnecting to terminal…</p>
+      </div>
+      <div id="error-block-slot"></div>
     </div>
-    <div id="error-block-slot"></div>
-  </div>
-  <div class="footer">
-    <span class="net-pill" id="network-row"><span class="dot"></span><span id="net-val">Sepolia</span></span>
-    <div class="actions">
-      <button id="cancel" class="shortcut"><span class="key">esc</span><span>cancel</span></button>
-      <button id="approve" class="shortcut primary" hidden>
-        <span class="key">enter</span><span>retry</span>
-      </button>
+    <div class="footer">
+      <div class="actions">
+        <button id="cancel" class="shortcut"><span class="key">esc</span><span>cancel</span></button>
+        <button id="approve" class="shortcut primary" hidden>
+          <span class="key">enter</span><span>retry</span>
+        </button>
+      </div>
     </div>
   </div>
 </main>
 `;
 
 export function injectStylesAndMarkup(): void {
+  const font = document.createElement("link");
+  font.rel = "stylesheet";
+  font.href = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";
+  document.head.appendChild(font);
+
   const style = document.createElement("style");
   style.id = "wallet-styles";
   style.textContent = WALLET_CSS;

package/src/identity/wallet/page/{walletProvider.ts → provider.ts}

@@ -1,6 +1,3 @@
-import type { WalletTx } from './types.js'
-import { WALLET_PROVIDER_POLL_MS, WALLET_PROVIDER_WAIT_MS } from './constants.js'
-
 let announcedEthereum: any = null;
 let activeEthereum: any = null;
 

package/src/identity/wallet/page/resize.ts

@@ -0,0 +1,95 @@
+// Smoothly animates the card's height whenever its content changes, so the
+// surface glides between states instead of snapping. The animation is the
+// native Web Animations API, with no external library, so it stays lightweight
+// and runs the same on every machine. It falls back to an instant resize when
+// the API is unavailable or the user prefers reduced motion.
+
+let cardEl: HTMLElement | null = null;
+let cardInnerEl: HTMLElement | null = null;
+let resizeAnim: Animation | null = null;
+let trackedHeight = 0;
+let measuredOnce = false;
+let cardResizeReady = false;
+
+// Snappy ease-out (mirrors --ease-out in css.ts): quick to start, gentle to settle.
+const RESIZE_DURATION_MS = 200;
+const RESIZE_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+
+function prefersReducedMotion(): boolean {
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch (_) {
+    return false;
+  }
+}
+
+function cardHeightCap(): number {
+  const compact = window.matchMedia("(max-width: 560px), (max-height: 680px)").matches;
+  const margin = compact ? 20 : 32;
+  return Math.max(160, window.innerHeight - margin);
+}
+
+function naturalHeight(): number {
+  if (!cardInnerEl) return 0;
+  return Math.min(cardInnerEl.offsetHeight, cardHeightCap());
+}
+
+function applyHeight(px: number): void {
+  if (cardEl) cardEl.style.height = Math.round(px) + "px";
+}
+
+function settleToContent(): void {
+  if (!cardEl || !cardInnerEl) return;
+  const target = naturalHeight();
+  if (!measuredOnce) {
+    measuredOnce = true;
+    trackedHeight = target;
+    applyHeight(target);
+    return;
+  }
+  if (Math.abs(target - trackedHeight) < 1) return;
+  const from = cardEl.getBoundingClientRect().height || trackedHeight;
+  trackedHeight = target;
+  animateHeight(from, target);
+}
+
+function animateHeight(from: number, to: number): void {
+  const el = cardEl;
+  if (!el) return;
+  if (resizeAnim) {
+    try { resizeAnim.cancel(); } catch (_) { /* noop */ }
+    resizeAnim = null;
+  }
+  // The rounded inline height is the source of truth: set it first so the card
+  // rests at the final size once the animation ends (default fill is none).
+  applyHeight(to);
+  if (typeof el.animate !== "function" || prefersReducedMotion() || Math.abs(to - from) < 1) return;
+  const anim = el.animate(
+    [{ height: Math.round(from) + "px" }, { height: Math.round(to) + "px" }],
+    { duration: RESIZE_DURATION_MS, easing: RESIZE_EASING }
+  );
+  resizeAnim = anim;
+  const clear = (): void => { if (resizeAnim === anim) resizeAnim = null; };
+  anim.onfinish = clear;
+  anim.oncancel = clear;
+}
+
+export function setupCardResize(): void {
+  if (cardResizeReady) return;
+  cardEl = document.getElementById("card");
+  cardInnerEl = document.getElementById("card-inner");
+  if (!cardEl || !cardInnerEl || typeof ResizeObserver === "undefined") return;
+  cardResizeReady = true;
+  settleToContent();
+  let scheduled = false;
+  const observer = new ResizeObserver(() => {
+    if (scheduled) return;
+    scheduled = true;
+    requestAnimationFrame(() => {
+      scheduled = false;
+      settleToContent();
+    });
+  });
+  observer.observe(cardInnerEl);
+  window.addEventListener("resize", () => settleToContent());
+}

package/src/identity/wallet/page/state.ts

@@ -1,9 +1,136 @@
-import type { WalletConfig } from './types.js'
-
-export const config: WalletConfig =
-  (window.__WALLET_CONFIG__ as WalletConfig) || {
-    sessionToken: 'preview',
-    kind: 'sign',
-    chainIdHex: '0xaa36a7',
-    message: 'identity proof for 0x9F2a???BC4e',
+function spinnerText(value: string): string {
+  const text = preserveProtocolCaps(value);
+  return text.replace(/^(\s*)([a-z])/, (_match, prefix, letter) => `${prefix}${letter.toUpperCase()}`);
+}
+function spinnerHintText(value: string): string { return preserveProtocolCaps(value); }
+function preserveProtocolCaps(value: string): string {
+  return String(value || "")
+    .replace(/\bapi\b/gi, "API")
+    .replace(/\bens\b/gi, "ENS")
+    .replace(/\berc-8004\b/gi, "ERC-8004")
+    .replace(/\bgguf\b/gi, "GGUF")
+    .replace(/\bhugging face\b/gi, "Hugging Face")
+    .replace(/\bipfs\b/gi, "IPFS")
+    .replace(/\bjson\b/gi, "JSON")
+    .replace(/\bjwt\b/gi, "JWT")
+    .replace(/\bmemory\.md\b/gi, "MEMORY.md")
+    .replace(/\bopenai\b/gi, "OpenAI")
+    .replace(/\banthropic\b/gi, "Anthropic")
+    .replace(/\bgemini\b/gi, "Gemini")
+    .replace(/\bos\b/gi, "OS")
+    .replace(/\brpc\b/gi, "RPC")
+    .replace(/\bsoul\.md\b/gi, "SOUL.md")
+    .replace(/\buri\b/gi, "URI")
+    .replace(/\burl\b/gi, "URL");
+}
+
+function setStatus(marker: string, text: string, hint: string, spin: boolean): void {
+  const lineEl = statusText.parentElement as HTMLElement;
+  const hintEl = statusHint;
+  const displayText = spin ? spinnerText(text) : text;
+  const displayHint = spin ? spinnerHintText(hint) : hint;
+  const apply = () => {
+    if (spin) startSpinner();
+    else setMarker(marker);
+    statusText.textContent = displayText;
+    hintEl.textContent = displayHint;
+    requestAnimationFrame(() => {
+      lineEl.classList.remove("is-changing");
+      hintEl.classList.remove("is-changing");
+    });
+  };
+  if (statusText.textContent === displayText && hintEl.textContent === displayHint) {
+    if (spin) startSpinner();
+    else setMarker(marker);
+    return;
+  }
+  lineEl.classList.add("is-changing");
+  hintEl.classList.add("is-changing");
+  setTimeout(apply, 260);
+}
+
+export let currentState: string | null = null;
+
+export function setState(state: string, payload?: any): void {
+  payload = payload || {};
+  currentState = state;
+  errorSlot.innerHTML = "";
+  statusBlock.style.display = "flex";
+  statusBlock.dataset.tone = state === "done" ? "success" : state === "cancelled" ? "cancelled" : "pending";
+  const terminal = state === "done" || state === "cancelled";
+  const cardEl = document.getElementById("card");
+  if (cardEl) cardEl.dataset.phase = terminal ? "terminal" : "active";
+  setTabTitle(tabTitleForState(state));
+  applyTransferTimeline();
+  switch (state) {
+    case "connecting":
+      setStatus("·", "Connecting To Wallet...", "Open your wallet if needed.", true);
+      break;
+    case "approve":
+      if (config.kind === "account") {
+        const copy = accountCopy();
+        setStatus("·", copy.text, copy.hint, true);
+      } else if (config.kind === "sign") {
+        const sigCopy = signCopy();
+        setStatus("·", sigCopy.text, sigCopy.hint, true);
+      } else {
+        const txCopy = transactionCopy();
+        setStatus("·", txCopy.text, txCopy.hint, true);
+      }
+      break;
+    case "approve-sign":
+      {
+        const sigCopy = signCopy();
+        setStatus("·", sigCopy.text, sigCopy.hint, true);
+      }
+      break;
+    case "preparing-transaction":
+      setStatus("·", purposeCopy().prepare!.text, purposeCopy().prepare!.hint, true);
+      break;
+    case "approve-transaction":
+      {
+        const txCopy = transactionCopy();
+        setStatus("·", txCopy.text, txCopy.hint, true);
+      }
+      break;
+    case "submitting":
+      if (config.kind === "account") setStatus("·", "Connecting Wallet...", "Returning to terminal.", true);
+      else if (config.kind === "sign") setStatus("·", "Verifying Signature...", hasNextLifecyclePrompt() ? nextLifecycleHint() : "Returning to terminal.", true);
+      else setStatus("·", "Submitted · Waiting For Confirmation...", "Your wallet accepted the transaction.", true);
+      break;
+    case "done":
+      stopSpinner();
+      statusMarker.innerHTML =
+        '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
+        ' stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        '<polyline points="20 6 9 17 4 12"></polyline></svg>';
+      statusText.textContent =
+        config.kind === "account" ? "Connected"
+          : config.kind === "sign" ? "Signed"
+            : "Submitted";
+      statusHint.textContent = payload.txHash
+        ? (isTransactionFlow() ? "Transaction submitted. Returning." : "This tab will close shortly.")
+        : hasNextLifecyclePrompt() ? nextLifecycleHint() : "This tab will close shortly.";
+      markActiveTimelineStepDone();
+      break;
+    case "cancelled":
+      stopSpinner();
+      statusMarker.innerHTML = "";
+      break;
+    case "error":
+      stopSpinner();
+      statusBlock.style.display = "none";
+      renderError(payload);
+      break;
   }
+}
+
+let lastWalletError: WalletErrorPayload | null = null;
+
+function renderError(payload: WalletErrorPayload): void {
+  errorSlot.innerHTML = walletErrorHtml(payload);
+  lastWalletError = payload;
+}
+
+export function getLastWalletError(): WalletErrorPayload | null { return lastWalletError }
+export function clearLastWalletError(): void { lastWalletError = null }

package/src/identity/wallet/page/timeline.ts

@@ -0,0 +1,161 @@
+type LifecycleId =
+  | "ens-clear"
+  | "ens-link"
+  | "ens-update"
+  | "ens-register"
+  | "custody-switch"
+  | "public-profile-vault";
+
+const LIFECYCLE_DEFINITIONS: Record<LifecycleId, { steps: string[] }> = {
+  "ens-clear":    { steps: ["Clear Records on Mainnet", "Save Cleared Snapshot"] },
+  "ens-link":     { steps: ["Create Subdomain", "Set Records", "Save Snapshot"] },
+  "ens-update":   { steps: ["Update Records on Mainnet", "Save Updated Snapshot"] },
+  "ens-register": { steps: ["Commit ENS Name", "Register ENS Name"] },
+  "custody-switch": { steps: ["Deploy Vault", "Deposit Token", "Reconcile Operators"] },
+  "public-profile-vault": { steps: ["Sign Profile", "Save Through Vault"] },
+};
+
+const FLOW_LIFECYCLE: Record<string, LifecycleId> = {
+  "ens-clear":      "ens-clear",
+  "ens-link":       "ens-link",
+  "ens-update":     "ens-update",
+  "ens-register":   "ens-register",
+  "custody-switch": "custody-switch",
+  "public-profile-vault": "public-profile-vault",
+};
+
+const PURPOSE_TIMELINE: Record<string, readonly [string, string]> = {
+  "create-agent":                ["Sign Recovery Access", "Mint Token"],
+  "update-snapshot-owner":       ["Sign Snapshot", "Save Onchain"],
+  "update-snapshot-operator":    ["Sign Snapshot", "Save Onchain"],
+  "update-snapshot-connected":   ["Sign Snapshot", "Save Onchain"],
+  "update-profile-owner":        ["Sign Profile", "Save Onchain"],
+  "update-profile-operator":     ["Sign Profile", "Save Onchain"],
+  "update-profile-connected":    ["Sign Profile", "Save Onchain"],
+  "update-operators":            ["Sign Operator List", "Publish List"],
+  "create-simple-ens-subdomain": ["Sign Request", "Create Subdomain"],
+  "set-simple-ens-records":      ["Sign Records", "Write Records"],
+  "create-agent-ens-subdomain":  ["Sign Request", "Create Subdomain"],
+  "set-agent-ens-records":       ["Sign Records", "Write Records"],
+  "rotate-agent-uri-vault-owner":    ["Sign", "Save"],
+  "rotate-agent-uri-vault-operator": ["Sign", "Save"],
+  "update-ens":                  ["Sign Snapshot", "Save Onchain"],
+  "clear-ens":                   ["Sign Snapshot", "Save Onchain"],
+};
+
+function activeLifecycle(): LifecycleId | undefined {
+  if (config.flowId && FLOW_LIFECYCLE[config.flowId]) return FLOW_LIFECYCLE[config.flowId];
+  return undefined;
+}
+
+let currentTimelineKey: string | null = null;
+
+function lifecycleStepIndex(lifecycle: LifecycleId, state: string | null): number {
+  const flowStep = typeof config.flowStep === "number" ? config.flowStep : 1;
+  const def = LIFECYCLE_DEFINITIONS[lifecycle];
+  const steps = def.steps.length;
+  if (state === "done") return Math.min(flowStep, steps);
+  return Math.max(0, Math.min(flowStep - 1, steps - 1));
+}
+
+function hasNextLifecyclePrompt(): boolean {
+  const lifecycle = activeLifecycle();
+  if (!lifecycle) return false;
+  const flowStep = typeof config.flowStep === "number" ? config.flowStep : 1;
+  return flowStep < LIFECYCLE_DEFINITIONS[lifecycle].steps.length;
+}
+
+function nextLifecycleHint(): string {
+  return "Keep this page open. The next wallet step will appear here.";
+}
+
+function purposeStepIndex(state: string | null): number {
+  if (state === "approve-transaction" || state === "submitting") return 1;
+  if (state === "done") return 2;
+  return 0;
+}
+
+export function applyTransferTimeline(): void {
+  const timeline = document.getElementById("timeline") as HTMLElement | null;
+  if (!timeline) return;
+
+  if (currentState === "error" || currentState === "cancelled") {
+    hideTimeline(timeline);
+    return;
+  }
+
+  const lifecycle = activeLifecycle();
+  let steps: string[] | null = null;
+  let activeIndex = 0;
+  let key = "";
+
+  if (lifecycle) {
+    steps = LIFECYCLE_DEFINITIONS[lifecycle].steps;
+    activeIndex = lifecycleStepIndex(lifecycle, currentState);
+    key = "flow:" + lifecycle;
+  } else if (config.kind === "sign-transaction") {
+    const tuple = PURPOSE_TIMELINE[config.purpose || ""] || (["Sign", "Submit"] as const);
+    steps = [tuple[0], tuple[1]];
+    activeIndex = purposeStepIndex(currentState);
+    key = "purpose:" + (config.purpose || "");
+  }
+
+  if (!steps) {
+    hideTimeline(timeline);
+    return;
+  }
+
+  currentTimelineKey = key;
+  timeline.hidden = false;
+
+  const total = steps.length;
+  const currentIndex = Math.min(activeIndex, total - 1);
+  const stepNumber = Math.min(activeIndex + 1, total);
+
+  const now = document.getElementById("timeline-now");
+  if (now) now.textContent = steps[currentIndex] ?? "";
+  const count = document.getElementById("timeline-count");
+  if (count) count.textContent = pad(stepNumber) + " / " + pad(total);
+  renderTimelineSegments(total, activeIndex);
+}
+
+function hideTimeline(timeline: HTMLElement): void {
+  if (!timeline.hidden) timeline.hidden = true;
+  currentTimelineKey = null;
+  const track = document.getElementById("timeline-track");
+  if (track) track.innerHTML = "";
+}
+
+function renderTimelineSegments(total: number, activeIndex: number): void {
+  const track = document.getElementById("timeline-track");
+  if (!track) return;
+  if (track.childElementCount !== total) {
+    track.innerHTML = "";
+    for (let i = 0; i < total; i++) {
+      const seg = document.createElement("span");
+      seg.className = "timeline-seg";
+      track.appendChild(seg);
+    }
+  }
+  const isDone = currentState === "done";
+  const children = track.children;
+  for (let i = 0; i < children.length; i++) {
+    const seg = children[i] as HTMLElement;
+    const done = i < activeIndex;
+    const active = i === activeIndex && !isDone;
+    seg.className = "timeline-seg" + (done ? " is-done" : active ? " is-active" : "");
+  }
+}
+
+function pad(value: number): string {
+  return String(value).padStart(2, "0");
+}
+
+function markActiveTimelineStepDone(): void {
+  const track = document.getElementById("timeline-track");
+  if (!track) return;
+  const segs = track.querySelectorAll(".timeline-seg.is-active");
+  for (let i = 0; i < segs.length; i++) {
+    (segs[i] as HTMLElement).className = "timeline-seg is-done";
+  }
+}