From 5a8e4694f2546ca1065a4c7d8ff05a06708c4486 Mon Sep 17 00:00:00 2001
From: astitva <bastitva0@gmail.com>
Date: Fri, 3 Jul 2026 01:17:41 +0530
Subject: [PATCH 1/3] refactor: extract relativeTime into shared agentworld
 util

---
 app/src/agentworld/pages/FeedSection.tsx      | 354 +++++++-----
 app/src/agentworld/pages/JobsSection.tsx      | 546 +++++++++++-------
 app/src/agentworld/pages/LedgerSection.tsx    | 186 +++---
 app/src/agentworld/utils/relativeTime.test.ts |  32 +
 app/src/agentworld/utils/relativeTime.ts      |  10 +
 5 files changed, 712 insertions(+), 416 deletions(-)
 create mode 100644 app/src/agentworld/utils/relativeTime.test.ts
 create mode 100644 app/src/agentworld/utils/relativeTime.ts

diff --git a/app/src/agentworld/pages/FeedSection.tsx b/app/src/agentworld/pages/FeedSection.tsx
index 63bd633793..db8aaff276 100644
--- a/app/src/agentworld/pages/FeedSection.tsx
+++ b/app/src/agentworld/pages/FeedSection.tsx
@@ -17,32 +17,32 @@
  * Pattern mirrors ExploreSection / MarketplaceSection: useState + useEffect
  * fetch, PanelScaffold wrapper, StatusBlock for loading/error/empty states.
  */
-import debug from 'debug';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import debug from "debug";
+import { useCallback, useEffect, useRef, useState } from "react";
 
-import PanelScaffold from '../../components/layout/PanelScaffold';
-import Button from '../../components/ui/Button';
+import PanelScaffold from "../../components/layout/PanelScaffold";
+import Button from "../../components/ui/Button";
 import {
   type GqlComment,
   type GqlHomeFeedItem,
   type GqlPost,
   type LikeResult,
   PaymentRequiredError,
-} from '../../lib/agentworld/invokeApiClient';
-import { fetchWalletStatus } from '../../services/walletApi';
-import { apiClient } from '../AgentWorldShell';
-import ConfirmDialog from '../components/ConfirmDialog';
-
-const log = debug('agentworld:feed');
+} from "../../lib/agentworld/invokeApiClient";
+import { fetchWalletStatus } from "../../services/walletApi";
+import { apiClient } from "../AgentWorldShell";
+import ConfirmDialog from "../components/ConfirmDialog";
+import { relativeTime } from "../utils/relativeTime";
+const log = debug("agentworld:feed");
 
 // ── State types ───────────────────────────────────────────────────────────────
 
 type FeedState =
-  | { status: 'loading' }
-  | { status: 'wallet_unconfigured' }
-  | { status: 'payment_required'; challenge: unknown }
-  | { status: 'error'; message: string }
-  | { status: 'ok'; items: GqlHomeFeedItem[] };
+  | { status: "loading" }
+  | { status: "wallet_unconfigured" }
+  | { status: "payment_required"; challenge: unknown }
+  | { status: "error"; message: string }
+  | { status: "ok"; items: GqlHomeFeedItem[] };
 
 /**
  * Result of resolving the local wallet on mount.
@@ -60,27 +60,19 @@ type FeedState =
  *
  * `agentId` is the resolved Solana address when one exists, else `null`.
  */
-type WalletConfigured = 'resolving' | 'no' | 'yes' | 'unknown';
-type WalletResolution = { agentId: string | null; configured: WalletConfigured };
+type WalletConfigured = "resolving" | "no" | "yes" | "unknown";
+type WalletResolution = {
+  agentId: string | null;
+  configured: WalletConfigured;
+};
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
-function relativeTime(iso: string): string {
-  const ms = Date.now() - new Date(iso).getTime();
-  const mins = Math.floor(ms / 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`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
 function isWalletLocked(message: string): boolean {
   return (
-    message.includes('wallet is not configured') ||
-    message.includes('wallet secret material is missing') ||
-    message.includes('no signer configured')
+    message.includes("wallet is not configured") ||
+    message.includes("wallet secret material is missing") ||
+    message.includes("no signer configured")
   );
 }
 
@@ -89,14 +81,21 @@ function postCreatedAtMillis(item: GqlHomeFeedItem): number {
   return Number.isFinite(millis) ? millis : 0;
 }
 
-function sortedHomeFeedItems(result: { items?: GqlHomeFeedItem[] } | null | undefined) {
+function sortedHomeFeedItems(
+  result: { items?: GqlHomeFeedItem[] } | null | undefined,
+) {
   const items = Array.isArray(result?.items) ? [...result.items] : [];
-  const originalOrder = items.map(item => item.post.postId).join('\0');
+  const originalOrder = items.map((item) => item.post.postId).join("\0");
 
-  items.sort((left, right) => postCreatedAtMillis(right) - postCreatedAtMillis(left));
+  items.sort(
+    (left, right) => postCreatedAtMillis(right) - postCreatedAtMillis(left),
+  );
 
-  if (items.length > 1 && originalOrder !== items.map(item => item.post.postId).join('\0')) {
-    log('sorted home feed newest-first', {
+  if (
+    items.length > 1 &&
+    originalOrder !== items.map((item) => item.post.postId).join("\0")
+  ) {
+    log("sorted home feed newest-first", {
       count: items.length,
       newestCreatedAt: items[0]?.post.createdAt,
       oldestCreatedAt: items.at(-1)?.post.createdAt,
@@ -107,7 +106,15 @@ function sortedHomeFeedItems(result: { items?: GqlHomeFeedItem[] } | null | unde
 }
 
 /** Centered status message for loading / error / info states. */
-function StatusBlock({ tone, title, body }: { tone: string; title: string; body?: string }) {
+function StatusBlock({
+  tone,
+  title,
+  body,
+}: {
+  tone: string;
+  title: string;
+  body?: string;
+}) {
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
@@ -118,7 +125,7 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
 
 /** Initial letter avatar circle for when no avatarUrl is available. */
 function InitialAvatar({ name }: { name: string }) {
-  const initial = (name[0] ?? '?').toUpperCase();
+  const initial = (name[0] ?? "?").toUpperCase();
   return (
     <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-content-inverted">
       {initial}
@@ -145,16 +152,21 @@ function InitialAvatar({ name }: { name: string }) {
 function useWalletResolution(): WalletResolution {
   const [resolution, setResolution] = useState<WalletResolution>({
     agentId: null,
-    configured: 'resolving',
+    configured: "resolving",
   });
   useEffect(() => {
     let cancelled = false;
     void fetchWalletStatus()
-      .then(status => {
+      .then((status) => {
         if (cancelled) return;
-        const solana = (status.accounts ?? []).find(a => a.chain === 'solana');
+        const solana = (status.accounts ?? []).find(
+          (a) => a.chain === "solana",
+        );
         const address = solana?.address ?? null;
-        setResolution({ agentId: address, configured: address !== null ? 'yes' : 'no' });
+        setResolution({
+          agentId: address,
+          configured: address !== null ? "yes" : "no",
+        });
       })
       .catch(() => {
         // Transport/RPC failure: we can't prove the wallet is absent, so mark
@@ -162,7 +174,7 @@ function useWalletResolution(): WalletResolution {
         // handles any wallet-locked error rather than us showing a false
         // "not configured" state for a wallet that may well exist.
         if (cancelled) return;
-        setResolution({ agentId: null, configured: 'unknown' });
+        setResolution({ agentId: null, configured: "unknown" });
       });
     return () => {
       cancelled = true;
@@ -182,7 +194,7 @@ function CommentComposer({
   postId: string;
   onCommentAdded: () => void;
 }) {
-  const [body, setBody] = useState('');
+  const [body, setBody] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
   const handleSubmit = async () => {
@@ -190,10 +202,10 @@ function CommentComposer({
     setSubmitting(true);
     try {
       await apiClient.feeds.addComment(handle, postId, body.trim());
-      setBody('');
+      setBody("");
       onCommentAdded();
     } catch (err) {
-      console.error('[FeedSection] add comment failed:', err);
+      console.error("[FeedSection] add comment failed:", err);
     } finally {
       setSubmitting(false);
     }
@@ -204,9 +216,9 @@ function CommentComposer({
       <input
         type="text"
         value={body}
-        onChange={e => setBody(e.target.value)}
-        onKeyDown={e => {
-          if (e.key === 'Enter') void handleSubmit();
+        onChange={(e) => setBody(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") void handleSubmit();
         }}
         placeholder="Write a comment..."
         disabled={submitting}
@@ -219,8 +231,9 @@ function CommentComposer({
         variant="primary"
         size="md"
         onClick={() => void handleSubmit()}
-        disabled={!body.trim() || submitting}>
-        {submitting ? 'Posting...' : 'Comment'}
+        disabled={!body.trim() || submitting}
+      >
+        {submitting ? "Posting..." : "Comment"}
       </Button>
     </div>
   );
@@ -242,7 +255,7 @@ interface FeedComposerProps {
 }
 
 function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
-  const [draft, setDraft] = useState('');
+  const [draft, setDraft] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -253,7 +266,7 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
   // Auto-grow the textarea with its content (capped), so the composer expands
   // naturally instead of scrolling inside two fixed rows.
   const autoSize = (el: HTMLTextAreaElement) => {
-    el.style.height = 'auto';
+    el.style.height = "auto";
     el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
   };
 
@@ -264,9 +277,9 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
     setError(null);
     try {
       await apiClient.feeds.createPost(body);
-      setDraft('');
+      setDraft("");
       if (textareaRef.current) {
-        textareaRef.current.style.height = 'auto';
+        textareaRef.current.style.height = "auto";
       }
       onPostCreated();
     } catch (err) {
@@ -283,13 +296,13 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
         <textarea
           ref={textareaRef}
           value={draft}
-          onChange={e => {
+          onChange={(e) => {
             setDraft(e.target.value);
             autoSize(e.target);
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             // ⌘/Ctrl+Enter posts without reaching for the mouse.
-            if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
               e.preventDefault();
               void submit();
             }
@@ -302,18 +315,26 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
           className="min-h-[2.25rem] w-full resize-none border-0 bg-transparent p-0 pt-1.5 text-sm leading-relaxed text-content shadow-none outline-none ring-0 placeholder:text-stone-400 focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none disabled:opacity-50 dark:placeholder:text-neutral-500"
         />
       </div>
-      {error && <p className="mt-1 pl-[2.625rem] text-xs text-coral-500">{error}</p>}
+      {error && (
+        <p className="mt-1 pl-[2.625rem] text-xs text-coral-500">{error}</p>
+      )}
       <div className="mt-2 flex items-center justify-between gap-3 border-t border-line-subtle pl-[2.625rem] pt-2">
         <span className="hidden text-[11px] text-content-faint sm:inline">
           <kbd className="rounded border border-line px-1 font-sans">⌘</kbd>
-          <kbd className="ml-0.5 rounded border border-line px-1 font-sans">↵</kbd> to post
+          <kbd className="ml-0.5 rounded border border-line px-1 font-sans">
+            ↵
+          </kbd>{" "}
+          to post
         </span>
         <div className="ml-auto flex items-center gap-3">
           {(nearLimit || draft.length > 0) && (
             <span
               className={`text-[11px] tabular-nums ${
-                remaining <= 20 ? 'font-medium text-coral-500' : 'text-content-faint'
-              }`}>
+                remaining <= 20
+                  ? "font-medium text-coral-500"
+                  : "text-content-faint"
+              }`}
+            >
               {remaining}
             </span>
           )}
@@ -322,8 +343,9 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
             size="sm"
             onClick={() => void submit()}
             disabled={!canPost}
-            className="rounded-full">
-            {submitting ? 'Posting…' : 'Post'}
+            className="rounded-full"
+          >
+            {submitting ? "Posting…" : "Post"}
           </Button>
         </div>
       </div>
@@ -338,7 +360,13 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
  * opened. Mirrors the tiny.place website's in-card `CommentList` (replaces the
  * old full-page drill-down).
  */
-function InlineComments({ post, myAgentId }: { post: GqlPost; myAgentId: string | null }) {
+function InlineComments({
+  post,
+  myAgentId,
+}: {
+  post: GqlPost;
+  myAgentId: string | null;
+}) {
   const handle = post.author.handle;
   const [comments, setComments] = useState<GqlComment[]>([]);
   const [loading, setLoading] = useState(true);
@@ -352,11 +380,11 @@ function InlineComments({ post, myAgentId }: { post: GqlPost; myAgentId: string
         likerLimit: 0,
         viewer: myAgentId ?? undefined,
       })
-      .then(detail => {
+      .then((detail) => {
         setComments(detail?.comments ?? []);
-        setError(detail ? null : 'Post not found.');
+        setError(detail ? null : "Post not found.");
       })
-      .catch(err => setError(String(err)))
+      .catch((err) => setError(String(err)))
       .finally(() => setLoading(false));
   }, [handle, post.postId, myAgentId]);
 
@@ -367,14 +395,16 @@ function InlineComments({ post, myAgentId }: { post: GqlPost; myAgentId: string
   return (
     <div className="mt-3 border-t border-line-subtle pt-2">
       {loading && (
-        <p className="animate-pulse py-2 text-xs text-content-faint">Loading comments…</p>
+        <p className="animate-pulse py-2 text-xs text-content-faint">
+          Loading comments…
+        </p>
       )}
       {error && <p className="py-2 text-xs text-red-500">{error}</p>}
       {!loading && !error && comments.length === 0 && (
         <p className="py-2 text-xs text-content-faint">No comments yet.</p>
       )}
       <div className="divide-y divide-line-subtle dark:divide-neutral-800">
-        {comments.map(c => (
+        {comments.map((c) => (
           <CommentRow
             key={c.commentId}
             comment={c}
@@ -385,7 +415,13 @@ function InlineComments({ post, myAgentId }: { post: GqlPost; myAgentId: string
           />
         ))}
       </div>
-      {myAgentId && <CommentComposer handle={handle} postId={post.postId} onCommentAdded={load} />}
+      {myAgentId && (
+        <CommentComposer
+          handle={handle}
+          postId={post.postId}
+          onCommentAdded={load}
+        />
+      )}
     </div>
   );
 }
@@ -434,7 +470,8 @@ function PostCard({
               <svg
                 className="h-3.5 w-3.5 shrink-0 text-primary-500"
                 fill="currentColor"
-                viewBox="0 0 20 20">
+                viewBox="0 0 20 20"
+              >
                 <path
                   fillRule="evenodd"
                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
@@ -443,7 +480,9 @@ function PostCard({
               </svg>
             )}
           </div>
-          <span className="text-xs text-content-faint">@{post.author.handle}</span>
+          <span className="text-xs text-content-faint">
+            @{post.author.handle}
+          </span>
         </div>
         {myAgentId && post.author.cryptoId !== myAgentId && (
           <button
@@ -452,10 +491,11 @@ function PostCard({
             onClick={() => onToggleFollow(post.author.cryptoId)}
             className={`ml-auto shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${
               followState[post.author.cryptoId]
-                ? 'border-line-strong text-content-secondary hover:bg-surface-hover'
-                : 'border-primary-600 bg-primary-600 text-content-inverted hover:bg-primary-700 dark:border-primary-500 dark:bg-primary-500'
-            }`}>
-            {followState[post.author.cryptoId] ? 'Following' : 'Follow'}
+                ? "border-line-strong text-content-secondary hover:bg-surface-hover"
+                : "border-primary-600 bg-primary-600 text-content-inverted hover:bg-primary-700 dark:border-primary-500 dark:bg-primary-500"
+            }`}
+          >
+            {followState[post.author.cryptoId] ? "Following" : "Follow"}
           </button>
         )}
         {myAgentId && post.author.cryptoId === myAgentId && (
@@ -463,28 +503,32 @@ function PostCard({
             type="button"
             onClick={() => onDeletePost(post)}
             className="ml-auto text-xs text-content-faint hover:text-red-500
-                       dark:hover:text-red-400">
+                       dark:hover:text-red-400"
+          >
             Delete
           </button>
         )}
       </div>
 
       {/* Post body */}
-      <p className="mb-3 whitespace-pre-wrap text-sm leading-relaxed text-content">{post.body}</p>
+      <p className="mb-3 whitespace-pre-wrap text-sm leading-relaxed text-content">
+        {post.body}
+      </p>
 
       {/* Metadata row */}
       <div className="flex items-center gap-4 text-xs text-content-faint">
         <span>{relativeTime(post.createdAt)}</span>
-        {item.reason === 'recommended' && (
+        {item.reason === "recommended" && (
           <span className="rounded-full bg-primary-50 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-300">
             Recommended
           </span>
         )}
         <button
           type="button"
-          onClick={() => setShowComments(open => !open)}
-          className="hover:text-content-secondary">
-          {post.commentCount} {post.commentCount === 1 ? 'comment' : 'comments'}
+          onClick={() => setShowComments((open) => !open)}
+          className="hover:text-content-secondary"
+        >
+          {post.commentCount} {post.commentCount === 1 ? "comment" : "comments"}
         </button>
         {myAgentId ? (
           <button
@@ -492,10 +536,15 @@ function PostCard({
             onClick={() => onToggleLike(post)}
             className={`flex items-center gap-1 ${
               (likeState[post.postId]?.liked ?? post.viewerHasLiked)
-                ? 'text-red-500'
-                : 'text-content-faint hover:text-red-400'
-            }`}>
-            <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
+                ? "text-red-500"
+                : "text-content-faint hover:text-red-400"
+            }`}
+          >
+            <svg
+              className="h-3.5 w-3.5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
               <path
                 fillRule="evenodd"
                 d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
@@ -506,7 +555,7 @@ function PostCard({
           </button>
         ) : (
           <span>
-            {post.likeCount} {post.likeCount === 1 ? 'like' : 'likes'}
+            {post.likeCount} {post.likeCount === 1 ? "like" : "likes"}
           </span>
         )}
       </div>
@@ -540,10 +589,13 @@ function CommentRow({
     void apiClient.feeds
       .deleteComment(handle, postId, comment.commentId)
       .then(({ ok }) => {
-        if (!ok) throw new Error('Comment deletion was not accepted by the backend');
+        if (!ok)
+          throw new Error("Comment deletion was not accepted by the backend");
         onCommentDeleted();
       })
-      .catch(err => console.error('[FeedSection] delete comment failed:', err))
+      .catch((err) =>
+        console.error("[FeedSection] delete comment failed:", err),
+      )
       .finally(() => {
         setDeleting(false);
         setConfirmingDelete(false);
@@ -559,20 +611,25 @@ function CommentRow({
           className="h-7 w-7 shrink-0 rounded-full object-cover"
         />
       ) : (
-        <InitialAvatar name={comment.author.displayName || comment.author.handle} />
+        <InitialAvatar
+          name={comment.author.displayName || comment.author.handle}
+        />
       )}
       <div className="min-w-0 flex-1">
         <div className="flex items-baseline gap-2">
           <span className="text-sm font-medium text-content">
             {comment.author.displayName || comment.author.handle}
           </span>
-          <span className="text-xs text-content-faint">{relativeTime(comment.createdAt)}</span>
+          <span className="text-xs text-content-faint">
+            {relativeTime(comment.createdAt)}
+          </span>
           {myAgentId && comment.author.cryptoId === myAgentId && (
             <button
               type="button"
               onClick={() => setConfirmingDelete(true)}
               className="text-xs text-content-faint hover:text-red-500
-                         dark:hover:text-red-400">
+                         dark:hover:text-red-400"
+            >
               Delete
             </button>
           )}
@@ -598,16 +655,23 @@ function CommentRow({
 // ── FeedSection (main export) ─────────────────────────────────────────────────
 
 export default function FeedSection() {
-  const [feedState, setFeedState] = useState<FeedState>({ status: 'loading' });
+  const [feedState, setFeedState] = useState<FeedState>({ status: "loading" });
   const [followState, setFollowState] = useState<Record<string, boolean>>({});
-  const [followLoading, setFollowLoading] = useState<Record<string, boolean>>({});
-  const [likeState, setLikeState] = useState<Record<string, { liked: boolean; count: number }>>({});
+  const [followLoading, setFollowLoading] = useState<Record<string, boolean>>(
+    {},
+  );
+  const [likeState, setLikeState] = useState<
+    Record<string, { liked: boolean; count: number }>
+  >({});
   // Post pending deletion — drives the in-app confirm modal (#4197). `null` = no
   // dialog open; `deletingPost` disables the buttons while the RPC is in flight.
-  const [postPendingDelete, setPostPendingDelete] = useState<GqlPost | null>(null);
+  const [postPendingDelete, setPostPendingDelete] = useState<GqlPost | null>(
+    null,
+  );
   const [deletingPost, setDeletingPost] = useState(false);
 
-  const { agentId: myAgentId, configured: walletConfigured } = useWalletResolution();
+  const { agentId: myAgentId, configured: walletConfigured } =
+    useWalletResolution();
 
   // ── Hydrate follow state from the server ───────────────────────────────────
   // The home feed doesn't carry "am I following this author?", so seed the
@@ -618,14 +682,14 @@ export default function FeedSection() {
     let cancelled = false;
     void apiClient.follows
       .following(myAgentId)
-      .then(res => {
+      .then((res) => {
         if (cancelled) return;
         const followed: Record<string, boolean> = {};
         for (const f of res.following ?? []) {
           if (f.followee) followed[f.followee] = true;
         }
         // Merge so any optimistic toggles made before this resolves are kept.
-        setFollowState(prev => ({ ...followed, ...prev }));
+        setFollowState((prev) => ({ ...followed, ...prev }));
       })
       .catch(() => {});
     return () => {
@@ -643,21 +707,21 @@ export default function FeedSection() {
   // ('yes') — or an inconclusive wallet_status fetch ('unknown') — fires the
   // feed fetch as before.
   useEffect(() => {
-    if (walletConfigured === 'resolving') {
+    if (walletConfigured === "resolving") {
       // Still resolving — stay on the initial loading state, fire nothing yet.
       return;
     }
-    if (walletConfigured === 'no') {
+    if (walletConfigured === "no") {
       // Positive "no wallet" signal — skip the wallet-gated RPC entirely.
-      log('skipping homeFeed: no wallet configured');
-      setFeedState({ status: 'wallet_unconfigured' });
+      log("skipping homeFeed: no wallet configured");
+      setFeedState({ status: "wallet_unconfigured" });
       return;
     }
     // 'yes' or 'unknown' → fire the feed fetch ('unknown' falls through so the
     // backend classifier can handle a wallet-locked error as before).
 
     let cancelled = false;
-    setFeedState({ status: 'loading' });
+    setFeedState({ status: "loading" });
 
     // `includeSelf: true` — the personalized home feed otherwise returns only
     // scored posts from *followed* agents, so the viewer's own posts (including
@@ -666,17 +730,20 @@ export default function FeedSection() {
     // show it (#4059).
     void apiClient.graphql
       .homeFeed({ limit: 50, includeSelf: true })
-      .then(result => {
+      .then((result) => {
         if (cancelled) return;
         const items = sortedHomeFeedItems(result);
-        setFeedState({ status: 'ok', items });
+        setFeedState({ status: "ok", items });
       })
       .catch((err: unknown) => {
         if (cancelled) return;
         if (err instanceof PaymentRequiredError) {
-          setFeedState({ status: 'payment_required', challenge: err.challenge });
+          setFeedState({
+            status: "payment_required",
+            challenge: err.challenge,
+          });
         } else {
-          setFeedState({ status: 'error', message: String(err) });
+          setFeedState({ status: "error", message: String(err) });
         }
       });
 
@@ -689,8 +756,8 @@ export default function FeedSection() {
 
   const handleToggleFollow = async (cryptoId: string) => {
     const isFollowing = followState[cryptoId] ?? false;
-    setFollowState(prev => ({ ...prev, [cryptoId]: !isFollowing }));
-    setFollowLoading(prev => ({ ...prev, [cryptoId]: true }));
+    setFollowState((prev) => ({ ...prev, [cryptoId]: !isFollowing }));
+    setFollowLoading((prev) => ({ ...prev, [cryptoId]: true }));
     try {
       if (isFollowing) {
         await apiClient.follows.unfollow(cryptoId);
@@ -698,23 +765,29 @@ export default function FeedSection() {
         await apiClient.follows.follow(cryptoId);
       }
     } catch (err) {
-      setFollowState(prev => ({ ...prev, [cryptoId]: isFollowing }));
-      console.error('[FeedSection] follow/unfollow failed:', err);
+      setFollowState((prev) => ({ ...prev, [cryptoId]: isFollowing }));
+      console.error("[FeedSection] follow/unfollow failed:", err);
     } finally {
-      setFollowLoading(prev => ({ ...prev, [cryptoId]: false }));
+      setFollowLoading((prev) => ({ ...prev, [cryptoId]: false }));
     }
   };
 
   // ── Like / Unlike ──────────────────────────────────────────────────────────
 
   const handleToggleLike = async (post: GqlPost) => {
-    const current = likeState[post.postId] ?? { liked: post.viewerHasLiked, count: post.likeCount };
+    const current = likeState[post.postId] ?? {
+      liked: post.viewerHasLiked,
+      count: post.likeCount,
+    };
     const willLike = !current.liked;
 
     // Optimistic update
-    setLikeState(prev => ({
+    setLikeState((prev) => ({
       ...prev,
-      [post.postId]: { liked: willLike, count: current.count + (willLike ? 1 : -1) },
+      [post.postId]: {
+        liked: willLike,
+        count: current.count + (willLike ? 1 : -1),
+      },
     }));
 
     try {
@@ -723,14 +796,14 @@ export default function FeedSection() {
         : await apiClient.feeds.unlikePost(post.author.handle, post.postId);
 
       // Reconcile with authoritative server state
-      setLikeState(prev => ({
+      setLikeState((prev) => ({
         ...prev,
         [post.postId]: { liked: result.liked, count: result.likeCount },
       }));
     } catch (err) {
       // Rollback to pre-mutation state
-      setLikeState(prev => ({ ...prev, [post.postId]: current }));
-      console.error('[FeedSection] like/unlike failed:', err);
+      setLikeState((prev) => ({ ...prev, [post.postId]: current }));
+      console.error("[FeedSection] like/unlike failed:", err);
     }
   };
 
@@ -749,15 +822,18 @@ export default function FeedSection() {
     void apiClient.feeds
       .deletePost(post.postId)
       .then(({ ok }) => {
-        if (!ok) throw new Error('Post deletion was not accepted by the backend');
+        if (!ok)
+          throw new Error("Post deletion was not accepted by the backend");
         // Return the refresh promise so its rejection reaches `.catch` (rather
         // than resolving the delete as "done" before the feed is reloaded).
-        return apiClient.graphql.homeFeed({ limit: 50, includeSelf: true }).then(result => {
-          const items = sortedHomeFeedItems(result);
-          setFeedState({ status: 'ok', items });
-        });
+        return apiClient.graphql
+          .homeFeed({ limit: 50, includeSelf: true })
+          .then((result) => {
+            const items = sortedHomeFeedItems(result);
+            setFeedState({ status: "ok", items });
+          });
       })
-      .catch(err => console.error('[FeedSection] delete post failed:', err))
+      .catch((err) => console.error("[FeedSection] delete post failed:", err))
       .finally(() => {
         setDeletingPost(false);
         setPostPendingDelete(null);
@@ -767,23 +843,25 @@ export default function FeedSection() {
   // ── Refetch feed ───────────────────────────────────────────────────────────
 
   const refetchFeed = () => {
-    void apiClient.graphql.homeFeed({ limit: 50, includeSelf: true }).then(result => {
-      const items = sortedHomeFeedItems(result);
-      setFeedState({ status: 'ok', items });
-    });
+    void apiClient.graphql
+      .homeFeed({ limit: 50, includeSelf: true })
+      .then((result) => {
+        const items = sortedHomeFeedItems(result);
+        setFeedState({ status: "ok", items });
+      });
   };
 
   // ── Render ─────────────────────────────────────────────────────────────────
 
   let body: React.ReactNode;
 
-  if (feedState.status === 'loading') {
+  if (feedState.status === "loading") {
     body = (
       <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading feed…</span>
       </div>
     );
-  } else if (feedState.status === 'wallet_unconfigured') {
+  } else if (feedState.status === "wallet_unconfigured") {
     body = (
       <StatusBlock
         tone="text-content-secondary"
@@ -791,7 +869,7 @@ export default function FeedSection() {
         body="Your personalized feed uses your wallet identity. Set up or import a wallet in Settings to continue."
       />
     );
-  } else if (feedState.status === 'payment_required') {
+  } else if (feedState.status === "payment_required") {
     body = (
       <StatusBlock
         tone="text-amber-600 dark:text-amber-400"
@@ -799,7 +877,7 @@ export default function FeedSection() {
         body="Your wallet will be used to fulfill the x402 payment challenge."
       />
     );
-  } else if (feedState.status === 'error') {
+  } else if (feedState.status === "error") {
     body = isWalletLocked(feedState.message) ? (
       <StatusBlock
         tone="text-content-secondary"
@@ -824,18 +902,18 @@ export default function FeedSection() {
   } else {
     body = (
       <div className="space-y-3">
-        {feedState.items.map(item => (
+        {feedState.items.map((item) => (
           <PostCard
             key={item.post.postId}
             item={item}
             myAgentId={myAgentId}
             followState={followState}
             followLoading={followLoading}
-            onToggleFollow={cryptoId => {
+            onToggleFollow={(cryptoId) => {
               void handleToggleFollow(cryptoId);
             }}
             likeState={likeState}
-            onToggleLike={post => {
+            onToggleLike={(post) => {
               void handleToggleLike(post);
             }}
             onDeletePost={handleDeletePost}
@@ -847,7 +925,7 @@ export default function FeedSection() {
 
   return (
     <PanelScaffold description="Social feed">
-      {myAgentId && feedState.status === 'ok' && (
+      {myAgentId && feedState.status === "ok" && (
         <FeedComposer myAgentId={myAgentId} onPostCreated={refetchFeed} />
       )}
       {body}
diff --git a/app/src/agentworld/pages/JobsSection.tsx b/app/src/agentworld/pages/JobsSection.tsx
index e6ca1b8257..5c55ac1369 100644
--- a/app/src/agentworld/pages/JobsSection.tsx
+++ b/app/src/agentworld/pages/JobsSection.tsx
@@ -14,43 +14,31 @@
  * Pattern mirrors LedgerSection / FeedSection: useState + useEffect fetch,
  * PanelScaffold wrapper, StatusBlock for loading/error/empty states.
  */
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from "react";
 
-import PanelScaffold from '../../components/layout/PanelScaffold';
-import Button from '../../components/ui/Button';
-import { ModalShell } from '../../components/ui/ModalShell';
+import PanelScaffold from "../../components/layout/PanelScaffold";
+import Button from "../../components/ui/Button";
+import { ModalShell } from "../../components/ui/ModalShell";
 import {
   type GqlJobPosting,
   type JobCreateParams,
   type Proposal,
   type ProposalCreateParams,
-} from '../../lib/agentworld/invokeApiClient';
-import { useT } from '../../lib/i18n/I18nContext';
-import { fetchWalletStatus } from '../../services/walletApi';
-import { apiClient } from '../AgentWorldShell';
-import { explorerTxUrl } from '../hooks/useX402Buy';
-
+} from "../../lib/agentworld/invokeApiClient";
+import { useT } from "../../lib/i18n/I18nContext";
+import { fetchWalletStatus } from "../../services/walletApi";
+import { apiClient } from "../AgentWorldShell";
+import { explorerTxUrl } from "../hooks/useX402Buy";
+import { relativeTime } from "../utils/relativeTime";
 // ── State types ───────────────────────────────────────────────────────────────
 
 type JobsState =
-  | { status: 'loading' }
-  | { status: 'error'; message: string }
-  | { status: 'ok'; jobs: GqlJobPosting[] };
+  | { status: "loading" }
+  | { status: "error"; message: string }
+  | { status: "ok"; jobs: GqlJobPosting[] };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
-// TODO: extract shared relativeTime helper once Feed/Ledger/Jobs all use it.
-function relativeTime(iso: string): string {
-  const ms = Date.now() - new Date(iso).getTime();
-  const mins = Math.floor(ms / 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`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
 /**
  * Group the integer part of a numeric amount with thousands separators while
  * preserving the original decimals ("1000000" → "1,000,000", "0.50" → "0.50").
@@ -58,10 +46,10 @@ function relativeTime(iso: string): string {
  */
 function formatAmount(amount: string): string {
   if (!Number.isFinite(Number(amount))) return amount;
-  const negative = amount.startsWith('-');
+  const negative = amount.startsWith("-");
   const body = negative ? amount.slice(1) : amount;
-  const [intPart, fracPart] = body.split('.');
-  const grouped = Number(intPart).toLocaleString('en-US');
+  const [intPart, fracPart] = body.split(".");
+  const grouped = Number(intPart).toLocaleString("en-US");
   const out = fracPart != null ? `${grouped}.${fracPart}` : grouped;
   return negative ? `-${out}` : out;
 }
@@ -81,7 +69,8 @@ function VerifiedBadge() {
       className="h-3.5 w-3.5 shrink-0 text-primary-500"
       viewBox="0 0 20 20"
       fill="currentColor"
-      aria-label="Verified">
+      aria-label="Verified"
+    >
       <path
         fillRule="evenodd"
         d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
@@ -92,7 +81,15 @@ function VerifiedBadge() {
 }
 
 /** Centered status message for loading / error / info states. */
-function StatusBlock({ tone, title, body }: { tone: string; title: string; body?: string }) {
+function StatusBlock({
+  tone,
+  title,
+  body,
+}: {
+  tone: string;
+  title: string;
+  body?: string;
+}) {
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
@@ -107,8 +104,10 @@ function useMyAgentId(): string | null {
   const [agentId, setAgentId] = useState<string | null>(null);
   useEffect(() => {
     void fetchWalletStatus()
-      .then(status => {
-        const solana = (status.accounts ?? []).find(a => a.chain === 'solana');
+      .then((status) => {
+        const solana = (status.accounts ?? []).find(
+          (a) => a.chain === "solana",
+        );
         if (solana?.address) setAgentId(solana.address);
       })
       .catch(() => {});
@@ -122,19 +121,21 @@ function useMyAgentId(): string | null {
 
 export function JobStatusBadge({ status }: { status: string }) {
   const color =
-    status === 'OPEN'
-      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-      : status === 'IN_PROGRESS'
-        ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
-        : status === 'COMPLETED'
-          ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
-          : status === 'DISPUTED'
-            ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-            : status === 'CANCELLED'
-              ? 'bg-surface-subtle text-content-secondary'
-              : 'bg-surface-subtle text-content-secondary';
+    status === "OPEN"
+      ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+      : status === "IN_PROGRESS"
+        ? "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400"
+        : status === "COMPLETED"
+          ? "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
+          : status === "DISPUTED"
+            ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+            : status === "CANCELLED"
+              ? "bg-surface-subtle text-content-secondary"
+              : "bg-surface-subtle text-content-secondary";
   return (
-    <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
+    <span
+      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}
+    >
       {status}
     </span>
   );
@@ -152,12 +153,18 @@ function SkillChip({ skill }: { skill: string }) {
 
 // ── ClientAvatar ──────────────────────────────────────────────────────────────
 
-function ClientAvatar({ avatarUrl, displayName }: { avatarUrl?: string; displayName: string }) {
+function ClientAvatar({
+  avatarUrl,
+  displayName,
+}: {
+  avatarUrl?: string;
+  displayName: string;
+}) {
   const initials = displayName
-    .split(' ')
-    .map(w => w[0] ?? '')
+    .split(" ")
+    .map((w) => w[0] ?? "")
     .slice(0, 2)
-    .join('')
+    .join("")
     .toUpperCase();
 
   if (avatarUrl) {
@@ -166,12 +173,12 @@ function ClientAvatar({ avatarUrl, displayName }: { avatarUrl?: string; displayN
         src={avatarUrl}
         alt={displayName}
         className="h-7 w-7 shrink-0 rounded-full object-cover"
-        onError={e => {
+        onError={(e) => {
           // Swap to initials circle on load failure
           const target = e.currentTarget as HTMLImageElement;
-          target.style.display = 'none';
+          target.style.display = "none";
           if (target.nextElementSibling) {
-            (target.nextElementSibling as HTMLElement).style.display = 'flex';
+            (target.nextElementSibling as HTMLElement).style.display = "flex";
           }
         }}
       />
@@ -180,22 +187,28 @@ function ClientAvatar({ avatarUrl, displayName }: { avatarUrl?: string; displayN
 
   return (
     <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary-100 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
-      {initials || '?'}
+      {initials || "?"}
     </div>
   );
 }
 
 // ── PostJobModal ──────────────────────────────────────────────────────────────
 
-function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
+function PostJobModal({
+  onClose,
+  onCreated,
+}: {
+  onClose: () => void;
+  onCreated: () => void;
+}) {
   const { t } = useT();
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [category, setCategory] = useState('');
-  const [skillsCsv, setSkillsCsv] = useState('');
-  const [budgetAmount, setBudgetAmount] = useState('');
-  const [budgetAsset, setBudgetAsset] = useState('USDC');
-  const [proposalDeadline, setProposalDeadline] = useState('');
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState("");
+  const [skillsCsv, setSkillsCsv] = useState("");
+  const [budgetAmount, setBudgetAmount] = useState("");
+  const [budgetAsset, setBudgetAsset] = useState("USDC");
+  const [proposalDeadline, setProposalDeadline] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -213,9 +226,14 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
     // until midnight UTC.
     if (deadlineDate) {
       const now = new Date();
-      const todayLocal = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+      const todayLocal = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
       if (deadlineDate <= todayLocal) {
-        setError(t('agentWorld.jobs.deadlineFuture', 'Proposal deadline must be in the future'));
+        setError(
+          t(
+            "agentWorld.jobs.deadlineFuture",
+            "Proposal deadline must be in the future",
+          ),
+        );
         setSubmitting(false);
         return;
       }
@@ -226,12 +244,12 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
       category: category.trim() || undefined,
       skills: skillsCsv.trim()
         ? skillsCsv
-            .split(',')
-            .map(s => s.trim())
+            .split(",")
+            .map((s) => s.trim())
             .filter(Boolean)
         : undefined,
       budgetAmount: budgetAmount.trim(),
-      budgetAsset: budgetAsset.trim() || 'USDC',
+      budgetAsset: budgetAsset.trim() || "USDC",
       proposalDeadline: deadlineIso,
     };
     try {
@@ -250,19 +268,23 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
       onClose={onClose}
       title="Post a Job"
       titleId="post-job-modal-title"
-      maxWidthClassName="max-w-lg">
+      maxWidthClassName="max-w-lg"
+    >
       <form
-        onSubmit={e => {
+        onSubmit={(e) => {
           void handleSubmit(e);
         }}
-        className="space-y-3">
+        className="space-y-3"
+      >
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">Title *</label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
+            Title *
+          </label>
           <input
             type="text"
             required
             value={title}
-            onChange={e => setTitle(e.target.value)}
+            onChange={(e) => setTitle(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. Build a Solana integration"
           />
@@ -274,27 +296,31 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
           <textarea
             rows={3}
             value={description}
-            onChange={e => setDescription(e.target.value)}
+            onChange={(e) => setDescription(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="Describe the work, requirements, and deliverables"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">Category</label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
+            Category
+          </label>
           <input
             type="text"
             value={category}
-            onChange={e => setCategory(e.target.value)}
+            onChange={(e) => setCategory(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. development, design, research"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">Skills</label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
+            Skills
+          </label>
           <input
             type="text"
             value={skillsCsv}
-            onChange={e => setSkillsCsv(e.target.value)}
+            onChange={(e) => setSkillsCsv(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. React, TypeScript"
           />
@@ -308,17 +334,19 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
               type="text"
               required
               value={budgetAmount}
-              onChange={e => setBudgetAmount(e.target.value)}
+              onChange={(e) => setBudgetAmount(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder="500"
             />
           </div>
           <div className="w-28">
-            <label className="mb-1 block text-xs font-medium text-content-secondary">Asset</label>
+            <label className="mb-1 block text-xs font-medium text-content-secondary">
+              Asset
+            </label>
             <input
               type="text"
               value={budgetAsset}
-              onChange={e => setBudgetAsset(e.target.value)}
+              onChange={(e) => setBudgetAsset(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder="USDC"
             />
@@ -331,17 +359,19 @@ function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated:
           <input
             type="date"
             value={proposalDeadline}
-            onChange={e => setProposalDeadline(e.target.value)}
+            onChange={(e) => setProposalDeadline(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
           />
         </div>
-        {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
+        {error && (
+          <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
+        )}
         <div className="flex justify-end gap-2 pt-1">
           <Button type="button" onClick={onClose}>
             Cancel
           </Button>
           <Button type="submit" disabled={submitting}>
-            {submitting ? 'Posting…' : 'Post Job'}
+            {submitting ? "Posting…" : "Post Job"}
           </Button>
         </div>
       </form>
@@ -361,9 +391,9 @@ function ApplyModal({
   onApplied: () => void;
 }) {
   const { t } = useT();
-  const [coverLetter, setCoverLetter] = useState('');
-  const [bidAmount, setBidAmount] = useState('');
-  const [estimatedDelivery, setEstimatedDelivery] = useState('');
+  const [coverLetter, setCoverLetter] = useState("");
+  const [bidAmount, setBidAmount] = useState("");
+  const [estimatedDelivery, setEstimatedDelivery] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [succeeded, setSucceeded] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -405,61 +435,66 @@ function ApplyModal({
   return (
     <ModalShell
       onClose={onClose}
-      title={t('agentworld.jobs.applyModal.title')}
+      title={t("agentworld.jobs.applyModal.title")}
       titleId="apply-modal-title"
-      maxWidthClassName="max-w-lg">
+      maxWidthClassName="max-w-lg"
+    >
       {succeeded ? (
         <div
           role="status"
           aria-live="polite"
-          className="flex flex-col items-center gap-3 py-6 text-center">
+          className="flex flex-col items-center gap-3 py-6 text-center"
+        >
           <p className="text-sm font-medium text-green-700 dark:text-green-400">
-            {t('agentworld.jobs.applyModal.successHeading')}
+            {t("agentworld.jobs.applyModal.successHeading")}
           </p>
           <p className="text-xs text-content-muted">
-            {t('agentworld.jobs.applyModal.successBody')}
+            {t("agentworld.jobs.applyModal.successBody")}
           </p>
         </div>
       ) : (
         <form
-          onSubmit={e => {
+          onSubmit={(e) => {
             void handleSubmit(e);
           }}
-          className="space-y-3">
+          className="space-y-3"
+        >
           <div>
             <label className="mb-1 block text-xs font-medium text-content-secondary">
-              {t('agentworld.jobs.applyModal.coverLetterLabel')}
+              {t("agentworld.jobs.applyModal.coverLetterLabel")}
             </label>
             <textarea
               rows={4}
               value={coverLetter}
-              onChange={e => setCoverLetter(e.target.value)}
+              onChange={(e) => setCoverLetter(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
-              placeholder={t('agentworld.jobs.applyModal.coverLetterPlaceholder')}
+              placeholder={t(
+                "agentworld.jobs.applyModal.coverLetterPlaceholder",
+              )}
             />
           </div>
           <div>
             <label className="mb-1 block text-xs font-medium text-content-secondary">
-              {t('agentworld.jobs.applyModal.bidAmountLabel')}
+              {t("agentworld.jobs.applyModal.bidAmountLabel")}
             </label>
             <input
               type="text"
               value={bidAmount}
-              onChange={e => setBidAmount(e.target.value)}
+              onChange={(e) => setBidAmount(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
-              placeholder={t('agentworld.jobs.applyModal.bidAmountPlaceholder')}
+              placeholder={t("agentworld.jobs.applyModal.bidAmountPlaceholder")}
             />
           </div>
           <div>
             <label className="mb-1 block text-xs font-medium text-content-secondary">
-              {t('agentworld.jobs.applyModal.deliveryLabel')}
+              {t("agentworld.jobs.applyModal.deliveryLabel")}
             </label>
             <input
               type="text"
               value={estimatedDelivery}
-              onChange={e => setEstimatedDelivery(e.target.value)}
+              onChange={(e) => setEstimatedDelivery(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
-              placeholder={t('agentworld.jobs.applyModal.deliveryPlaceholder')}
+              placeholder={t("agentworld.jobs.applyModal.deliveryPlaceholder")}
             />
           </div>
           {error && (
@@ -469,12 +504,12 @@ function ApplyModal({
           )}
           <div className="flex justify-end gap-2 pt-1">
             <Button type="button" onClick={onClose} disabled={submitting}>
-              {t('agentworld.jobs.applyModal.cancel')}
+              {t("agentworld.jobs.applyModal.cancel")}
             </Button>
             <Button type="submit" disabled={submitting}>
               {submitting
-                ? t('agentworld.jobs.applyModal.submitting')
-                : t('agentworld.jobs.applyModal.submit')}
+                ? t("agentworld.jobs.applyModal.submitting")
+                : t("agentworld.jobs.applyModal.submit")}
             </Button>
           </div>
         </form>
@@ -494,7 +529,7 @@ function DisputeModal({
   onClose: () => void;
   onDisputed: () => void;
 }) {
-  const [reason, setReason] = useState('');
+  const [reason, setReason] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -519,30 +554,36 @@ function DisputeModal({
       onClose={onClose}
       title="Open Dispute"
       titleId="dispute-modal-title"
-      maxWidthClassName="max-w-md">
+      maxWidthClassName="max-w-md"
+    >
       <form
-        onSubmit={e => {
+        onSubmit={(e) => {
           void handleSubmit(e);
         }}
-        className="space-y-3">
+        className="space-y-3"
+      >
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">Reason *</label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">
+            Reason *
+          </label>
           <textarea
             rows={4}
             required
             value={reason}
-            onChange={e => setReason(e.target.value)}
+            onChange={(e) => setReason(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="Describe the issue that requires dispute resolution"
           />
         </div>
-        {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
+        {error && (
+          <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
+        )}
         <div className="flex justify-end gap-2 pt-1">
           <Button type="button" onClick={onClose}>
             Cancel
           </Button>
           <Button type="submit" disabled={submitting}>
-            {submitting ? 'Opening…' : 'Open Dispute'}
+            {submitting ? "Opening…" : "Open Dispute"}
           </Button>
         </div>
       </form>
@@ -594,7 +635,7 @@ function JobRow({
 
   const isClient = myAgentId === job.client;
   const showingProposals = proposalsForJobId === job.jobId;
-  const proposalLabel = `${job.proposalCount} proposal${job.proposalCount !== 1 ? 's' : ''}`;
+  const proposalLabel = `${job.proposalCount} proposal${job.proposalCount !== 1 ? "s" : ""}`;
 
   return (
     <div className="border-b border-line-subtle last:border-0">
@@ -602,7 +643,8 @@ function JobRow({
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50">
+        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50"
+      >
         <ClientAvatar
           avatarUrl={job.clientProfile.avatarUrl ?? undefined}
           displayName={job.clientProfile.displayName}
@@ -612,7 +654,9 @@ function JobRow({
         <div className="min-w-0 flex-1">
           {/* Line 1: title + status */}
           <div className="flex items-center gap-2">
-            <span className="truncate text-sm font-semibold text-content">{job.title}</span>
+            <span className="truncate text-sm font-semibold text-content">
+              {job.title}
+            </span>
             <span className="shrink-0">
               <JobStatusBadge status={job.status} />
             </span>
@@ -620,7 +664,9 @@ function JobRow({
 
           {/* Line 2: client · budget */}
           <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-content-muted">
-            <span className="truncate">{displayClientName(job.clientProfile.displayName)}</span>
+            <span className="truncate">
+              {displayClientName(job.clientProfile.displayName)}
+            </span>
             {job.clientProfile.verified && <VerifiedBadge />}
             <span className="text-content-faint dark:text-neutral-600">·</span>
             <span className="whitespace-nowrap font-medium text-content-secondary">
@@ -630,14 +676,16 @@ function JobRow({
 
           {/* Line 3: skills + proposal count */}
           <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
-            {visibleSkills.map(skill => (
+            {visibleSkills.map((skill) => (
               <SkillChip key={skill} skill={skill} />
             ))}
             {overflowCount > 0 && (
-              <span className="text-xs text-content-faint">+{overflowCount}</span>
+              <span className="text-xs text-content-faint">
+                +{overflowCount}
+              </span>
             )}
             <span className="text-xs text-content-faint">
-              {skills.length > 0 ? '· ' : ''}
+              {skills.length > 0 ? "· " : ""}
               {proposalLabel}
             </span>
           </div>
@@ -649,11 +697,17 @@ function JobRow({
             {relativeTime(job.createdAt)}
           </span>
           <svg
-            className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? 'rotate-180' : ''}`}
+            className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? "rotate-180" : ""}`}
             fill="none"
             stroke="currentColor"
-            viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
           </svg>
         </div>
       </button>
@@ -684,7 +738,7 @@ function JobRow({
               <>
                 <dt className="font-medium text-content-muted">Skills</dt>
                 <dd className="flex flex-wrap gap-1">
-                  {skills.map(skill => (
+                  {skills.map((skill) => (
                     <SkillChip key={skill} skill={skill} />
                   ))}
                 </dd>
@@ -702,7 +756,9 @@ function JobRow({
             {/* Proposal deadline */}
             {job.proposalDeadline && (
               <>
-                <dt className="font-medium text-content-muted">Proposal Deadline</dt>
+                <dt className="font-medium text-content-muted">
+                  Proposal Deadline
+                </dt>
                 <dd className="text-content">{job.proposalDeadline}</dd>
               </>
             )}
@@ -711,15 +767,21 @@ function JobRow({
             {job.contractEscrowId && (
               <>
                 <dt className="font-medium text-content-muted">Escrow ID</dt>
-                <dd className="break-all font-mono text-content">{job.contractEscrowId}</dd>
+                <dd className="break-all font-mono text-content">
+                  {job.contractEscrowId}
+                </dd>
               </>
             )}
 
             {/* Selected candidate */}
             {job.selectedCandidate && (
               <>
-                <dt className="font-medium text-content-muted">Selected Candidate</dt>
-                <dd className="break-all font-mono text-content">{job.selectedCandidate}</dd>
+                <dt className="font-medium text-content-muted">
+                  Selected Candidate
+                </dt>
+                <dd className="break-all font-mono text-content">
+                  {job.selectedCandidate}
+                </dd>
               </>
             )}
 
@@ -727,7 +789,9 @@ function JobRow({
             {job.groupId && (
               <>
                 <dt className="font-medium text-content-muted">Group ID</dt>
-                <dd className="break-all font-mono text-content">{job.groupId}</dd>
+                <dd className="break-all font-mono text-content">
+                  {job.groupId}
+                </dd>
               </>
             )}
 
@@ -742,13 +806,17 @@ function JobRow({
           {/* Dispute section */}
           {job.dispute && (
             <div className="mt-3">
-              <p className="mb-1 text-xs font-semibold text-red-600 dark:text-red-400">Dispute</p>
+              <p className="mb-1 text-xs font-semibold text-red-600 dark:text-red-400">
+                Dispute
+              </p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 <dt className="font-medium text-content-muted">Reason</dt>
                 <dd className="text-content">{job.dispute.reason}</dd>
 
                 <dt className="font-medium text-content-muted">Opened By</dt>
-                <dd className="break-all font-mono text-content">{job.dispute.openedBy}</dd>
+                <dd className="break-all font-mono text-content">
+                  {job.dispute.openedBy}
+                </dd>
 
                 <dt className="font-medium text-content-muted">Opened At</dt>
                 <dd className="text-content">{job.dispute.openedAt}</dd>
@@ -765,14 +833,18 @@ function JobRow({
 
                 {job.dispute.splitBps != null && (
                   <>
-                    <dt className="font-medium text-content-muted">Split bps</dt>
+                    <dt className="font-medium text-content-muted">
+                      Split bps
+                    </dt>
                     <dd className="text-content">{job.dispute.splitBps}</dd>
                   </>
                 )}
 
                 {job.dispute.judgeModel && (
                   <>
-                    <dt className="font-medium text-content-muted">Judge Model</dt>
+                    <dt className="font-medium text-content-muted">
+                      Judge Model
+                    </dt>
                     <dd className="text-content">{job.dispute.judgeModel}</dd>
                   </>
                 )}
@@ -780,20 +852,26 @@ function JobRow({
                 {job.dispute.presided != null && (
                   <>
                     <dt className="font-medium text-content-muted">Presided</dt>
-                    <dd className="text-content">{job.dispute.presided ? 'Yes' : 'No'}</dd>
+                    <dd className="text-content">
+                      {job.dispute.presided ? "Yes" : "No"}
+                    </dd>
                   </>
                 )}
 
                 {job.dispute.reasoning && (
                   <>
-                    <dt className="font-medium text-content-muted">Reasoning</dt>
+                    <dt className="font-medium text-content-muted">
+                      Reasoning
+                    </dt>
                     <dd className="text-content">{job.dispute.reasoning}</dd>
                   </>
                 )}
 
                 {job.dispute.resolvedAt && (
                   <>
-                    <dt className="font-medium text-content-muted">Resolved At</dt>
+                    <dt className="font-medium text-content-muted">
+                      Resolved At
+                    </dt>
                     <dd className="text-content">{job.dispute.resolvedAt}</dd>
                   </>
                 )}
@@ -802,13 +880,19 @@ function JobRow({
               {/* Jury votes table */}
               {job.dispute.jury && job.dispute.jury.length > 0 && (
                 <div className="mt-2">
-                  <p className="mb-1 text-xs font-medium text-content-muted">Jury Votes</p>
+                  <p className="mb-1 text-xs font-medium text-content-muted">
+                    Jury Votes
+                  </p>
                   <div className="overflow-x-auto">
                     <table className="w-full text-xs">
                       <thead>
                         <tr className="border-b border-line">
-                          <th className="pb-1 text-left font-medium text-content-muted">Model</th>
-                          <th className="pb-1 text-left font-medium text-content-muted">Outcome</th>
+                          <th className="pb-1 text-left font-medium text-content-muted">
+                            Model
+                          </th>
+                          <th className="pb-1 text-left font-medium text-content-muted">
+                            Outcome
+                          </th>
                           <th className="pb-1 text-left font-medium text-content-muted">
                             Split bps
                           </th>
@@ -819,11 +903,22 @@ function JobRow({
                       </thead>
                       <tbody>
                         {job.dispute.jury.map((vote, i) => (
-                          <tr key={i} className="border-b border-line-subtle last:border-0">
-                            <td className="py-0.5 font-mono text-content">{vote.model}</td>
-                            <td className="py-0.5 text-content">{vote.outcome}</td>
-                            <td className="py-0.5 text-content">{vote.splitBps}</td>
-                            <td className="py-0.5 text-content">{vote.reasoning ?? '-'}</td>
+                          <tr
+                            key={i}
+                            className="border-b border-line-subtle last:border-0"
+                          >
+                            <td className="py-0.5 font-mono text-content">
+                              {vote.model}
+                            </td>
+                            <td className="py-0.5 text-content">
+                              {vote.outcome}
+                            </td>
+                            <td className="py-0.5 text-content">
+                              {vote.splitBps}
+                            </td>
+                            <td className="py-0.5 text-content">
+                              {vote.reasoning ?? "-"}
+                            </td>
                           </tr>
                         ))}
                       </tbody>
@@ -837,31 +932,45 @@ function JobRow({
           {/* On-chain section */}
           {job.onChain && (
             <div className="mt-3">
-              <p className="mb-1 text-xs font-semibold text-content-muted">On-chain</p>
+              <p className="mb-1 text-xs font-semibold text-content-muted">
+                On-chain
+              </p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 {job.onChain.vault && (
                   <>
                     <dt className="font-medium text-content-muted">Vault</dt>
-                    <dd className="break-all font-mono text-content">{job.onChain.vault}</dd>
+                    <dd className="break-all font-mono text-content">
+                      {job.onChain.vault}
+                    </dd>
                   </>
                 )}
 
                 {job.onChain.jobPdaCommit && (
                   <>
-                    <dt className="font-medium text-content-muted">Job PDA Commit</dt>
-                    <dd className="break-all font-mono text-content">{job.onChain.jobPdaCommit}</dd>
+                    <dt className="font-medium text-content-muted">
+                      Job PDA Commit
+                    </dt>
+                    <dd className="break-all font-mono text-content">
+                      {job.onChain.jobPdaCommit}
+                    </dd>
                   </>
                 )}
 
                 {job.onChain.fundingTxSig && (
                   <>
-                    <dt className="font-medium text-content-muted">Funding Tx</dt>
+                    <dt className="font-medium text-content-muted">
+                      Funding Tx
+                    </dt>
                     <dd className="break-all font-mono text-content">
                       <a
-                        href={explorerTxUrl(job.onChain.fundingTxSig, 'solana-devnet')}
+                        href={explorerTxUrl(
+                          job.onChain.fundingTxSig,
+                          "solana-devnet",
+                        )}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">
+                        className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+                      >
                         {job.onChain.fundingTxSig}
                       </a>
                     </dd>
@@ -875,8 +984,12 @@ function JobRow({
           {myAgentId ? (
             <div className="mt-4 flex flex-wrap gap-2">
               {/* Candidate actions: Apply (non-client, OPEN jobs) */}
-              {!isClient && job.status === 'OPEN' && (
-                <Button type="button" onClick={() => onApply(job.jobId)} disabled={mutating}>
+              {!isClient && job.status === "OPEN" && (
+                <Button
+                  type="button"
+                  onClick={() => onApply(job.jobId)}
+                  disabled={mutating}
+                >
                   Apply
                 </Button>
               )}
@@ -884,32 +997,39 @@ function JobRow({
               {/* Client actions */}
               {isClient && (
                 <>
-                  {job.status === 'OPEN' && (
-                    <Button type="button" onClick={() => onCancel(job.jobId)} disabled={mutating}>
+                  {job.status === "OPEN" && (
+                    <Button
+                      type="button"
+                      onClick={() => onCancel(job.jobId)}
+                      disabled={mutating}
+                    >
                       Cancel Job
                     </Button>
                   )}
-                  {(job.status === 'OPEN' || job.status === 'IN_PROGRESS') && (
+                  {(job.status === "OPEN" || job.status === "IN_PROGRESS") && (
                     <Button
                       type="button"
                       onClick={() => onViewProposals(job.jobId)}
-                      disabled={mutating}>
+                      disabled={mutating}
+                    >
                       View Proposals
                     </Button>
                   )}
-                  {job.status === 'IN_PROGRESS' && !job.dispute && (
+                  {job.status === "IN_PROGRESS" && !job.dispute && (
                     <Button
                       type="button"
                       onClick={() => onOpenDispute(job.jobId)}
-                      disabled={mutating}>
+                      disabled={mutating}
+                    >
                       Open Dispute
                     </Button>
                   )}
-                  {job.status === 'DISPUTED' && (
+                  {job.status === "DISPUTED" && (
                     <Button
                       type="button"
                       onClick={() => onAdjudicate(job.jobId)}
-                      disabled={mutating}>
+                      disabled={mutating}
+                    >
                       Adjudicate
                     </Button>
                   )}
@@ -925,17 +1045,22 @@ function JobRow({
           {/* Inline proposals panel */}
           {showingProposals && (
             <div className="mt-4">
-              <p className="mb-2 text-xs font-semibold text-content-secondary">Proposals</p>
+              <p className="mb-2 text-xs font-semibold text-content-secondary">
+                Proposals
+              </p>
               {proposalsLoading ? (
-                <p className="text-xs text-content-faint animate-pulse">Loading proposals…</p>
+                <p className="text-xs text-content-faint animate-pulse">
+                  Loading proposals…
+                </p>
               ) : proposals.length === 0 ? (
                 <p className="text-xs text-content-faint">No proposals yet.</p>
               ) : (
                 <div className="space-y-2">
-                  {proposals.map(p => (
+                  {proposals.map((p) => (
                     <div
                       key={p.proposalId}
-                      className="rounded border border-line bg-surface p-2 text-xs">
+                      className="rounded border border-line bg-surface p-2 text-xs"
+                    >
                       <div className="mb-1 flex items-center gap-2">
                         <span className="font-mono text-content-secondary">
                           {p.candidate.slice(0, 8)}…
@@ -944,29 +1069,36 @@ function JobRow({
                           {p.status}
                         </span>
                         {p.bidAmount && (
-                          <span className="font-medium text-content">{p.bidAmount}</span>
+                          <span className="font-medium text-content">
+                            {p.bidAmount}
+                          </span>
                         )}
                       </div>
                       {p.coverLetter && (
-                        <p className="mb-1 text-content-secondary line-clamp-2">{p.coverLetter}</p>
+                        <p className="mb-1 text-content-secondary line-clamp-2">
+                          {p.coverLetter}
+                        </p>
                       )}
                       <div className="flex gap-1">
                         <Button
                           type="button"
                           onClick={() => onShortlist(job.jobId, p.proposalId)}
-                          disabled={mutating}>
+                          disabled={mutating}
+                        >
                           Shortlist
                         </Button>
                         <Button
                           type="button"
                           onClick={() => onSelect(job.jobId, p.proposalId)}
-                          disabled={mutating}>
+                          disabled={mutating}
+                        >
                           Select
                         </Button>
                         <Button
                           type="button"
                           onClick={() => onWithdraw(job.jobId, p.proposalId)}
-                          disabled={mutating}>
+                          disabled={mutating}
+                        >
                           Withdraw
                         </Button>
                       </div>
@@ -985,12 +1117,14 @@ function JobRow({
 // ── JobsSection (main export) ─────────────────────────────────────────────────
 
 export default function JobsSection() {
-  const [jobsState, setJobsState] = useState<JobsState>({ status: 'loading' });
+  const [jobsState, setJobsState] = useState<JobsState>({ status: "loading" });
   const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
   const [showPostJob, setShowPostJob] = useState(false);
   const [applyingJobId, setApplyingJobId] = useState<string | null>(null);
   const [disputeJobId, setDisputeJobId] = useState<string | null>(null);
-  const [proposalsForJobId, setProposalsForJobId] = useState<string | null>(null);
+  const [proposalsForJobId, setProposalsForJobId] = useState<string | null>(
+    null,
+  );
   const [proposals, setProposals] = useState<Proposal[]>([]);
   const [proposalsLoading, setProposalsLoading] = useState(false);
   const [mutating, setMutating] = useState(false);
@@ -999,32 +1133,32 @@ export default function JobsSection() {
 
   // ── Fetch jobs ─────────────────────────────────────────────────────────────
   const refetchJobs = useCallback(() => {
-    setJobsState({ status: 'loading' });
+    setJobsState({ status: "loading" });
     void apiClient.graphql
       .jobs({ limit: 50 })
-      .then(result => {
+      .then((result) => {
         const jobs = Array.isArray(result?.jobs) ? result.jobs : [];
-        setJobsState({ status: 'ok', jobs });
+        setJobsState({ status: "ok", jobs });
       })
       .catch((err: unknown) => {
-        setJobsState({ status: 'error', message: String(err) });
+        setJobsState({ status: "error", message: String(err) });
       });
   }, []);
 
   useEffect(() => {
     let cancelled = false;
-    setJobsState({ status: 'loading' });
+    setJobsState({ status: "loading" });
 
     void apiClient.graphql
       .jobs({ limit: 50 })
-      .then(result => {
+      .then((result) => {
         if (cancelled) return;
         const jobs = Array.isArray(result?.jobs) ? result.jobs : [];
-        setJobsState({ status: 'ok', jobs });
+        setJobsState({ status: "ok", jobs });
       })
       .catch((err: unknown) => {
         if (cancelled) return;
-        setJobsState({ status: 'error', message: String(err) });
+        setJobsState({ status: "error", message: String(err) });
       });
 
     return () => {
@@ -1041,12 +1175,12 @@ export default function JobsSection() {
         await apiClient.jobsWrite.cancel(jobId);
         refetchJobs();
       } catch (err) {
-        console.error('[JobsSection] cancel failed:', err);
+        console.error("[JobsSection] cancel failed:", err);
       } finally {
         setMutating(false);
       }
     },
-    [refetchJobs]
+    [refetchJobs],
   );
 
   const handleViewProposals = useCallback(async (jobId: string) => {
@@ -1056,7 +1190,7 @@ export default function JobsSection() {
       const result = await apiClient.jobsWrite.listProposals(jobId);
       setProposals(Array.isArray(result?.proposals) ? result.proposals : []);
     } catch (err) {
-      console.error('[JobsSection] listProposals failed:', err);
+      console.error("[JobsSection] listProposals failed:", err);
       setProposals([]);
     } finally {
       setProposalsLoading(false);
@@ -1070,29 +1204,32 @@ export default function JobsSection() {
         await apiClient.jobsWrite.shortlistProposal(jobId, proposalId);
         await handleViewProposals(jobId);
       } catch (err) {
-        console.error('[JobsSection] shortlist failed:', err);
+        console.error("[JobsSection] shortlist failed:", err);
       } finally {
         setMutating(false);
       }
     },
-    [handleViewProposals]
+    [handleViewProposals],
   );
 
   const handleSelect = useCallback(
     async (jobId: string, proposalId: string) => {
-      if (!window.confirm('Select this candidate and initiate escrow?')) return;
+      if (!window.confirm("Select this candidate and initiate escrow?")) return;
       setMutating(true);
       try {
         const result = await apiClient.jobsWrite.select(jobId, proposalId);
-        console.debug('[JobsSection] selected candidate, escrow:', result.contractEscrowId);
+        console.debug(
+          "[JobsSection] selected candidate, escrow:",
+          result.contractEscrowId,
+        );
         refetchJobs();
       } catch (err) {
-        console.error('[JobsSection] select failed:', err);
+        console.error("[JobsSection] select failed:", err);
       } finally {
         setMutating(false);
       }
     },
-    [refetchJobs]
+    [refetchJobs],
   );
 
   const handleWithdraw = useCallback(
@@ -1104,12 +1241,12 @@ export default function JobsSection() {
           await handleViewProposals(jobId);
         }
       } catch (err) {
-        console.error('[JobsSection] withdraw failed:', err);
+        console.error("[JobsSection] withdraw failed:", err);
       } finally {
         setMutating(false);
       }
     },
-    [proposalsForJobId, handleViewProposals]
+    [proposalsForJobId, handleViewProposals],
   );
 
   const handleAdjudicate = useCallback(
@@ -1119,25 +1256,25 @@ export default function JobsSection() {
         await apiClient.jobsWrite.adjudicateDispute(jobId);
         refetchJobs();
       } catch (err) {
-        console.error('[JobsSection] adjudicate failed:', err);
+        console.error("[JobsSection] adjudicate failed:", err);
       } finally {
         setMutating(false);
       }
     },
-    [refetchJobs]
+    [refetchJobs],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────
 
   let body: React.ReactNode;
 
-  if (jobsState.status === 'loading') {
+  if (jobsState.status === "loading") {
     body = (
       <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading jobs...</span>
       </div>
     );
-  } else if (jobsState.status === 'error') {
+  } else if (jobsState.status === "error") {
     body = (
       <StatusBlock
         tone="text-red-600 dark:text-red-400"
@@ -1156,22 +1293,26 @@ export default function JobsSection() {
   } else {
     body = (
       <div className="rounded-lg border border-line bg-surface">
-        {jobsState.jobs.map(job => (
+        {jobsState.jobs.map((job) => (
           <JobRow
             key={job.jobId}
             job={job}
             expanded={expandedJobId === job.jobId}
-            onToggle={() => setExpandedJobId(prev => (prev === job.jobId ? null : job.jobId))}
+            onToggle={() =>
+              setExpandedJobId((prev) =>
+                prev === job.jobId ? null : job.jobId,
+              )
+            }
             myAgentId={myAgentId}
-            onApply={jobId => setApplyingJobId(jobId)}
-            onCancel={jobId => {
+            onApply={(jobId) => setApplyingJobId(jobId)}
+            onCancel={(jobId) => {
               void handleCancel(jobId);
             }}
-            onViewProposals={jobId => {
+            onViewProposals={(jobId) => {
               void handleViewProposals(jobId);
             }}
-            onOpenDispute={jobId => setDisputeJobId(jobId)}
-            onAdjudicate={jobId => {
+            onOpenDispute={(jobId) => setDisputeJobId(jobId)}
+            onAdjudicate={(jobId) => {
               void handleAdjudicate(jobId);
             }}
             proposalsForJobId={proposalsForJobId}
@@ -1206,7 +1347,10 @@ export default function JobsSection() {
 
       {/* Modals */}
       {showPostJob && (
-        <PostJobModal onClose={() => setShowPostJob(false)} onCreated={refetchJobs} />
+        <PostJobModal
+          onClose={() => setShowPostJob(false)}
+          onCreated={refetchJobs}
+        />
       )}
       {applyingJobId && (
         <ApplyModal
diff --git a/app/src/agentworld/pages/LedgerSection.tsx b/app/src/agentworld/pages/LedgerSection.tsx
index 51e27989fc..47f55d756b 100644
--- a/app/src/agentworld/pages/LedgerSection.tsx
+++ b/app/src/agentworld/pages/LedgerSection.tsx
@@ -9,37 +9,26 @@
  * Pattern mirrors FeedSection: useState + useEffect fetch, PanelScaffold
  * wrapper, StatusBlock for loading/error/empty states.
  */
-import { useEffect, useState } from 'react';
-
-import PanelScaffold from '../../components/layout/PanelScaffold';
-import { type GqlLedgerTransaction } from '../../lib/agentworld/invokeApiClient';
-import { apiClient } from '../AgentWorldShell';
-import { decimalsForAsset, resolveAssetSymbol } from '../assets';
-import { formatUnits, friendlyNetwork } from '../components/X402ConfirmDialog';
-import { explorerTxUrl } from '../hooks/useX402Buy';
-
+import { useEffect, useState } from "react";
+
+import PanelScaffold from "../../components/layout/PanelScaffold";
+import { type GqlLedgerTransaction } from "../../lib/agentworld/invokeApiClient";
+import { apiClient } from "../AgentWorldShell";
+import { decimalsForAsset, resolveAssetSymbol } from "../assets";
+import { formatUnits, friendlyNetwork } from "../components/X402ConfirmDialog";
+import { explorerTxUrl } from "../hooks/useX402Buy";
+import { relativeTime } from "../utils/relativeTime";
 // ── State types ───────────────────────────────────────────────────────────────
 
 type LedgerState =
-  | { status: 'loading' }
-  | { status: 'error'; message: string }
-  | { status: 'ok'; transactions: GqlLedgerTransaction[] };
+  | { status: "loading" }
+  | { status: "error"; message: string }
+  | { status: "ok"; transactions: GqlLedgerTransaction[] };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
-function relativeTime(iso: string): string {
-  const ms = Date.now() - new Date(iso).getTime();
-  const mins = Math.floor(ms / 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`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
 export function abbreviateAddress(addr: string | undefined): string {
-  if (!addr) return '—';
+  if (!addr) return "—";
   if (addr.length <= 12) return addr;
   return `${addr.slice(0, 4)}…${addr.slice(-4)}`;
 }
@@ -50,12 +39,12 @@ export function abbreviateAddress(addr: string | undefined): string {
  * "1000000" becomes "1,000,000"). Non-numeric strings pass through unchanged.
  */
 export function formatAmount(amount: string | undefined): string {
-  if (!amount) return '—';
+  if (!amount) return "—";
   if (!Number.isFinite(Number(amount))) return amount;
-  const negative = amount.startsWith('-');
+  const negative = amount.startsWith("-");
   const body = negative ? amount.slice(1) : amount;
-  const [intPart, fracPart] = body.split('.');
-  const grouped = Number(intPart).toLocaleString('en-US');
+  const [intPart, fracPart] = body.split(".");
+  const grouped = Number(intPart).toLocaleString("en-US");
   const out = fracPart != null ? `${grouped}.${fracPart}` : grouped;
   return negative ? `-${out}` : out;
 }
@@ -66,7 +55,10 @@ export function formatAmount(amount: string | undefined): string {
  * otherwise every value reads ~1,000,000× too large. `asset` may be a symbol or
  * a mint address; {@link decimalsForAsset} resolves either.
  */
-export function formatLedgerAmount(amount: string | undefined, asset: string | undefined): string {
+export function formatLedgerAmount(
+  amount: string | undefined,
+  asset: string | undefined,
+): string {
   if (!amount) return formatAmount(amount);
   // `formatUnits` assumes an integer base-unit string; if the amount is already
   // decimal/non-integer, pass it straight to grouping instead of mis-scaling it.
@@ -77,7 +69,15 @@ export function formatLedgerAmount(amount: string | undefined, asset: string | u
 }
 
 /** Centered status message for loading / error / info states. */
-function StatusBlock({ tone, title, body }: { tone: string; title: string; body?: string }) {
+function StatusBlock({
+  tone,
+  title,
+  body,
+}: {
+  tone: string;
+  title: string;
+  body?: string;
+}) {
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
@@ -90,15 +90,17 @@ function StatusBlock({ tone, title, body }: { tone: string; title: string; body?
 
 export function StatusBadge({ status }: { status: string }) {
   const color =
-    status === 'SETTLED'
-      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-      : status === 'PENDING'
-        ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
-        : status === 'FAILED'
-          ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-          : 'bg-surface-subtle text-content-secondary';
+    status === "SETTLED"
+      ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+      : status === "PENDING"
+        ? "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+        : status === "FAILED"
+          ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+          : "bg-surface-subtle text-content-secondary";
   return (
-    <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
+    <span
+      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}
+    >
       {status}
     </span>
   );
@@ -108,16 +110,17 @@ export function StatusBadge({ status }: { status: string }) {
 
 function TypeBadge({ type }: { type: string }) {
   const color =
-    type === 'REGISTRATION'
-      ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
-      : type === 'SALE'
-        ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
-        : type === 'FEE'
-          ? 'bg-surface-subtle text-content-secondary'
-          : 'bg-surface-subtle text-content-secondary';
+    type === "REGISTRATION"
+      ? "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400"
+      : type === "SALE"
+        ? "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
+        : type === "FEE"
+          ? "bg-surface-subtle text-content-secondary"
+          : "bg-surface-subtle text-content-secondary";
   return (
     <span
-      className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${color}`}>
+      className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${color}`}
+    >
       {type}
     </span>
   );
@@ -127,16 +130,22 @@ function TypeBadge({ type }: { type: string }) {
 
 function TypeIcon({ type }: { type: string }) {
   const color =
-    type === 'REGISTRATION'
-      ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400'
-      : type === 'SALE'
-        ? 'bg-purple-50 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400'
-        : 'bg-surface-subtle text-content-muted';
+    type === "REGISTRATION"
+      ? "bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
+      : type === "SALE"
+        ? "bg-purple-50 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
+        : "bg-surface-subtle text-content-muted";
   return (
     <div
       className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full ${color}`}
-      aria-hidden="true">
-      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      aria-hidden="true"
+    >
+      <svg
+        className="h-4 w-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -165,7 +174,8 @@ function TransactionRow({
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50">
+        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50"
+      >
         <TypeIcon type={tx.type} />
 
         {/* Content */}
@@ -174,7 +184,7 @@ function TransactionRow({
           <div className="flex items-center gap-2">
             <span className="text-sm font-semibold text-content">
               {formatLedgerAmount(tx.amount, tx.asset)}
-              {tx.asset ? ` ${resolveAssetSymbol(tx.asset)}` : ''}
+              {tx.asset ? ` ${resolveAssetSymbol(tx.asset)}` : ""}
             </span>
             <TypeBadge type={tx.type} />
             <StatusBadge status={tx.status} />
@@ -187,7 +197,8 @@ function TransactionRow({
               className="h-3 w-3 shrink-0 text-content-faint"
               fill="none"
               stroke="currentColor"
-              viewBox="0 0 24 24">
+              viewBox="0 0 24 24"
+            >
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -213,15 +224,17 @@ function TransactionRow({
                 target="_blank"
                 rel="noopener noreferrer"
                 className="whitespace-nowrap text-xs font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-                onClick={e => e.stopPropagation()}>
+                onClick={(e) => e.stopPropagation()}
+              >
                 View on chain
               </a>
             )}
             <svg
-              className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? 'rotate-180' : ''}`}
+              className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? "rotate-180" : ""}`}
               fill="none"
               stroke="currentColor"
-              viewBox="0 0 24 24">
+              viewBox="0 0 24 24"
+            >
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -247,11 +260,13 @@ function TransactionRow({
 
             {/* Full From */}
             <dt className="font-medium text-content-muted">From</dt>
-            <dd className="break-all font-mono text-content">{tx.from ?? '-'}</dd>
+            <dd className="break-all font-mono text-content">
+              {tx.from ?? "-"}
+            </dd>
 
             {/* Full To */}
             <dt className="font-medium text-content-muted">To</dt>
-            <dd className="break-all font-mono text-content">{tx.to ?? '-'}</dd>
+            <dd className="break-all font-mono text-content">{tx.to ?? "-"}</dd>
 
             {/* Reference */}
             {tx.reference && (
@@ -262,13 +277,19 @@ function TransactionRow({
                 {tx.reference.id && (
                   <>
                     <dt className="font-medium text-content-muted">Ref ID</dt>
-                    <dd className="break-all font-mono text-content">{tx.reference.id}</dd>
+                    <dd className="break-all font-mono text-content">
+                      {tx.reference.id}
+                    </dd>
                   </>
                 )}
                 {tx.reference.parentTxId && (
                   <>
-                    <dt className="font-medium text-content-muted">Parent Tx</dt>
-                    <dd className="break-all font-mono text-content">{tx.reference.parentTxId}</dd>
+                    <dt className="font-medium text-content-muted">
+                      Parent Tx
+                    </dt>
+                    <dd className="break-all font-mono text-content">
+                      {tx.reference.parentTxId}
+                    </dd>
                   </>
                 )}
                 {tx.reference.rate && (
@@ -284,15 +305,20 @@ function TransactionRow({
           {/* Metadata key-value table */}
           {tx.metadata && Object.keys(tx.metadata).length > 0 && (
             <div className="mt-2">
-              <p className="mb-1 text-xs font-medium text-content-muted">Metadata</p>
+              <p className="mb-1 text-xs font-medium text-content-muted">
+                Metadata
+              </p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 {Object.entries(tx.metadata).map(([key, val]) => (
                   <>
-                    <dt key={`k-${key}`} className="font-medium text-content-muted">
+                    <dt
+                      key={`k-${key}`}
+                      className="font-medium text-content-muted"
+                    >
                       {key}
                     </dt>
                     <dd key={`v-${key}`} className="break-all text-content">
-                      {typeof val === 'string' ? val : JSON.stringify(val)}
+                      {typeof val === "string" ? val : JSON.stringify(val)}
                     </dd>
                   </>
                 ))}
@@ -308,25 +334,29 @@ function TransactionRow({
 // ── LedgerSection (main export) ───────────────────────────────────────────────
 
 export default function LedgerSection() {
-  const [ledgerState, setLedgerState] = useState<LedgerState>({ status: 'loading' });
+  const [ledgerState, setLedgerState] = useState<LedgerState>({
+    status: "loading",
+  });
   const [expandedTxId, setExpandedTxId] = useState<string | null>(null);
 
   // ── Fetch ledger transactions ──────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false;
-    setLedgerState({ status: 'loading' });
+    setLedgerState({ status: "loading" });
 
     // TODO(phase-2-follow-up): implement pagination with offset or cursor.
     void apiClient.graphql
       .ledgerTransactions({ limit: 50 })
-      .then(result => {
+      .then((result) => {
         if (cancelled) return;
-        const transactions = Array.isArray(result?.transactions) ? result.transactions : [];
-        setLedgerState({ status: 'ok', transactions });
+        const transactions = Array.isArray(result?.transactions)
+          ? result.transactions
+          : [];
+        setLedgerState({ status: "ok", transactions });
       })
       .catch((err: unknown) => {
         if (cancelled) return;
-        setLedgerState({ status: 'error', message: String(err) });
+        setLedgerState({ status: "error", message: String(err) });
       });
 
     return () => {
@@ -338,13 +368,13 @@ export default function LedgerSection() {
 
   let body: React.ReactNode;
 
-  if (ledgerState.status === 'loading') {
+  if (ledgerState.status === "loading") {
     body = (
       <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading ledger…</span>
       </div>
     );
-  } else if (ledgerState.status === 'error') {
+  } else if (ledgerState.status === "error") {
     body = (
       <StatusBlock
         tone="text-red-600 dark:text-red-400"
@@ -363,12 +393,14 @@ export default function LedgerSection() {
   } else {
     body = (
       <div className="rounded-lg border border-line bg-surface">
-        {ledgerState.transactions.map(tx => (
+        {ledgerState.transactions.map((tx) => (
           <TransactionRow
             key={tx.txId}
             tx={tx}
             expanded={expandedTxId === tx.txId}
-            onToggle={() => setExpandedTxId(prev => (prev === tx.txId ? null : tx.txId))}
+            onToggle={() =>
+              setExpandedTxId((prev) => (prev === tx.txId ? null : tx.txId))
+            }
           />
         ))}
       </div>
diff --git a/app/src/agentworld/utils/relativeTime.test.ts b/app/src/agentworld/utils/relativeTime.test.ts
new file mode 100644
index 0000000000..1fe1a3199d
--- /dev/null
+++ b/app/src/agentworld/utils/relativeTime.test.ts
@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { relativeTime } from "./relativeTime";
+
+describe("relativeTime", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('returns "just now" for under 1 minute ago', () => {
+    vi.setSystemTime(new Date("2025-01-01T00:00:30Z"));
+    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("just now");
+  });
+
+  it("returns minutes for under 1 hour ago", () => {
+    vi.setSystemTime(new Date("2025-01-01T00:45:00Z"));
+    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("45m ago");
+  });
+
+  it("returns hours for under 24 hours ago", () => {
+    vi.setSystemTime(new Date("2025-01-01T05:00:00Z"));
+    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("5h ago");
+  });
+
+  it("returns days for 24+ hours ago", () => {
+    vi.setSystemTime(new Date("2025-01-04T00:00:00Z"));
+    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("3d ago");
+  });
+});
diff --git a/app/src/agentworld/utils/relativeTime.ts b/app/src/agentworld/utils/relativeTime.ts
new file mode 100644
index 0000000000..427fafaa5e
--- /dev/null
+++ b/app/src/agentworld/utils/relativeTime.ts
@@ -0,0 +1,10 @@
+export function relativeTime(iso: string): string {
+  const ms = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(ms / 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`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}

From 94ed8f22bd6f6049d5c9f688585a49b56e5be4db Mon Sep 17 00:00:00 2001
From: astitva <bastitva0@gmail.com>
Date: Fri, 3 Jul 2026 01:30:45 +0530
Subject: [PATCH 2/3] style: fix prettier formatting

---
 app/src/agentworld/pages/FeedSection.tsx      | 344 +++++------
 app/src/agentworld/pages/JobsSection.tsx      | 535 +++++++-----------
 app/src/agentworld/pages/LedgerSection.tsx    | 176 +++---
 app/src/agentworld/utils/relativeTime.test.ts |  29 +-
 app/src/agentworld/utils/relativeTime.ts      |   2 +-
 5 files changed, 401 insertions(+), 685 deletions(-)

diff --git a/app/src/agentworld/pages/FeedSection.tsx b/app/src/agentworld/pages/FeedSection.tsx
index db8aaff276..7cf4e808ee 100644
--- a/app/src/agentworld/pages/FeedSection.tsx
+++ b/app/src/agentworld/pages/FeedSection.tsx
@@ -17,32 +17,33 @@
  * Pattern mirrors ExploreSection / MarketplaceSection: useState + useEffect
  * fetch, PanelScaffold wrapper, StatusBlock for loading/error/empty states.
  */
-import debug from "debug";
-import { useCallback, useEffect, useRef, useState } from "react";
+import debug from 'debug';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-import PanelScaffold from "../../components/layout/PanelScaffold";
-import Button from "../../components/ui/Button";
+import PanelScaffold from '../../components/layout/PanelScaffold';
+import Button from '../../components/ui/Button';
 import {
   type GqlComment,
   type GqlHomeFeedItem,
   type GqlPost,
   type LikeResult,
   PaymentRequiredError,
-} from "../../lib/agentworld/invokeApiClient";
-import { fetchWalletStatus } from "../../services/walletApi";
-import { apiClient } from "../AgentWorldShell";
-import ConfirmDialog from "../components/ConfirmDialog";
-import { relativeTime } from "../utils/relativeTime";
-const log = debug("agentworld:feed");
+} from '../../lib/agentworld/invokeApiClient';
+import { fetchWalletStatus } from '../../services/walletApi';
+import { apiClient } from '../AgentWorldShell';
+import ConfirmDialog from '../components/ConfirmDialog';
+import { relativeTime } from '../utils/relativeTime';
+
+const log = debug('agentworld:feed');
 
 // ── State types ───────────────────────────────────────────────────────────────
 
 type FeedState =
-  | { status: "loading" }
-  | { status: "wallet_unconfigured" }
-  | { status: "payment_required"; challenge: unknown }
-  | { status: "error"; message: string }
-  | { status: "ok"; items: GqlHomeFeedItem[] };
+  | { status: 'loading' }
+  | { status: 'wallet_unconfigured' }
+  | { status: 'payment_required'; challenge: unknown }
+  | { status: 'error'; message: string }
+  | { status: 'ok'; items: GqlHomeFeedItem[] };
 
 /**
  * Result of resolving the local wallet on mount.
@@ -60,19 +61,16 @@ type FeedState =
  *
  * `agentId` is the resolved Solana address when one exists, else `null`.
  */
-type WalletConfigured = "resolving" | "no" | "yes" | "unknown";
-type WalletResolution = {
-  agentId: string | null;
-  configured: WalletConfigured;
-};
+type WalletConfigured = 'resolving' | 'no' | 'yes' | 'unknown';
+type WalletResolution = { agentId: string | null; configured: WalletConfigured };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function isWalletLocked(message: string): boolean {
   return (
-    message.includes("wallet is not configured") ||
-    message.includes("wallet secret material is missing") ||
-    message.includes("no signer configured")
+    message.includes('wallet is not configured') ||
+    message.includes('wallet secret material is missing') ||
+    message.includes('no signer configured')
   );
 }
 
@@ -81,21 +79,14 @@ function postCreatedAtMillis(item: GqlHomeFeedItem): number {
   return Number.isFinite(millis) ? millis : 0;
 }
 
-function sortedHomeFeedItems(
-  result: { items?: GqlHomeFeedItem[] } | null | undefined,
-) {
+function sortedHomeFeedItems(result: { items?: GqlHomeFeedItem[] } | null | undefined) {
   const items = Array.isArray(result?.items) ? [...result.items] : [];
-  const originalOrder = items.map((item) => item.post.postId).join("\0");
+  const originalOrder = items.map(item => item.post.postId).join('\0');
 
-  items.sort(
-    (left, right) => postCreatedAtMillis(right) - postCreatedAtMillis(left),
-  );
+  items.sort((left, right) => postCreatedAtMillis(right) - postCreatedAtMillis(left));
 
-  if (
-    items.length > 1 &&
-    originalOrder !== items.map((item) => item.post.postId).join("\0")
-  ) {
-    log("sorted home feed newest-first", {
+  if (items.length > 1 && originalOrder !== items.map(item => item.post.postId).join('\0')) {
+    log('sorted home feed newest-first', {
       count: items.length,
       newestCreatedAt: items[0]?.post.createdAt,
       oldestCreatedAt: items.at(-1)?.post.createdAt,
@@ -106,15 +97,7 @@ function sortedHomeFeedItems(
 }
 
 /** Centered status message for loading / error / info states. */
-function StatusBlock({
-  tone,
-  title,
-  body,
-}: {
-  tone: string;
-  title: string;
-  body?: string;
-}) {
+function StatusBlock({ tone, title, body }: { tone: string; title: string; body?: string }) {
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
@@ -125,7 +108,7 @@ function StatusBlock({
 
 /** Initial letter avatar circle for when no avatarUrl is available. */
 function InitialAvatar({ name }: { name: string }) {
-  const initial = (name[0] ?? "?").toUpperCase();
+  const initial = (name[0] ?? '?').toUpperCase();
   return (
     <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-500 text-xs font-semibold text-content-inverted">
       {initial}
@@ -152,21 +135,16 @@ function InitialAvatar({ name }: { name: string }) {
 function useWalletResolution(): WalletResolution {
   const [resolution, setResolution] = useState<WalletResolution>({
     agentId: null,
-    configured: "resolving",
+    configured: 'resolving',
   });
   useEffect(() => {
     let cancelled = false;
     void fetchWalletStatus()
-      .then((status) => {
+      .then(status => {
         if (cancelled) return;
-        const solana = (status.accounts ?? []).find(
-          (a) => a.chain === "solana",
-        );
+        const solana = (status.accounts ?? []).find(a => a.chain === 'solana');
         const address = solana?.address ?? null;
-        setResolution({
-          agentId: address,
-          configured: address !== null ? "yes" : "no",
-        });
+        setResolution({ agentId: address, configured: address !== null ? 'yes' : 'no' });
       })
       .catch(() => {
         // Transport/RPC failure: we can't prove the wallet is absent, so mark
@@ -174,7 +152,7 @@ function useWalletResolution(): WalletResolution {
         // handles any wallet-locked error rather than us showing a false
         // "not configured" state for a wallet that may well exist.
         if (cancelled) return;
-        setResolution({ agentId: null, configured: "unknown" });
+        setResolution({ agentId: null, configured: 'unknown' });
       });
     return () => {
       cancelled = true;
@@ -194,7 +172,7 @@ function CommentComposer({
   postId: string;
   onCommentAdded: () => void;
 }) {
-  const [body, setBody] = useState("");
+  const [body, setBody] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   const handleSubmit = async () => {
@@ -202,10 +180,10 @@ function CommentComposer({
     setSubmitting(true);
     try {
       await apiClient.feeds.addComment(handle, postId, body.trim());
-      setBody("");
+      setBody('');
       onCommentAdded();
     } catch (err) {
-      console.error("[FeedSection] add comment failed:", err);
+      console.error('[FeedSection] add comment failed:', err);
     } finally {
       setSubmitting(false);
     }
@@ -216,9 +194,9 @@ function CommentComposer({
       <input
         type="text"
         value={body}
-        onChange={(e) => setBody(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") void handleSubmit();
+        onChange={e => setBody(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === 'Enter') void handleSubmit();
         }}
         placeholder="Write a comment..."
         disabled={submitting}
@@ -231,9 +209,8 @@ function CommentComposer({
         variant="primary"
         size="md"
         onClick={() => void handleSubmit()}
-        disabled={!body.trim() || submitting}
-      >
-        {submitting ? "Posting..." : "Comment"}
+        disabled={!body.trim() || submitting}>
+        {submitting ? 'Posting...' : 'Comment'}
       </Button>
     </div>
   );
@@ -255,7 +232,7 @@ interface FeedComposerProps {
 }
 
 function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
-  const [draft, setDraft] = useState("");
+  const [draft, setDraft] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -266,7 +243,7 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
   // Auto-grow the textarea with its content (capped), so the composer expands
   // naturally instead of scrolling inside two fixed rows.
   const autoSize = (el: HTMLTextAreaElement) => {
-    el.style.height = "auto";
+    el.style.height = 'auto';
     el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
   };
 
@@ -277,9 +254,9 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
     setError(null);
     try {
       await apiClient.feeds.createPost(body);
-      setDraft("");
+      setDraft('');
       if (textareaRef.current) {
-        textareaRef.current.style.height = "auto";
+        textareaRef.current.style.height = 'auto';
       }
       onPostCreated();
     } catch (err) {
@@ -296,13 +273,13 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
         <textarea
           ref={textareaRef}
           value={draft}
-          onChange={(e) => {
+          onChange={e => {
             setDraft(e.target.value);
             autoSize(e.target);
           }}
-          onKeyDown={(e) => {
+          onKeyDown={e => {
             // ⌘/Ctrl+Enter posts without reaching for the mouse.
-            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
               e.preventDefault();
               void submit();
             }
@@ -315,26 +292,18 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
           className="min-h-[2.25rem] w-full resize-none border-0 bg-transparent p-0 pt-1.5 text-sm leading-relaxed text-content shadow-none outline-none ring-0 placeholder:text-stone-400 focus:border-0 focus:outline-none focus:ring-0 focus-visible:outline-none disabled:opacity-50 dark:placeholder:text-neutral-500"
         />
       </div>
-      {error && (
-        <p className="mt-1 pl-[2.625rem] text-xs text-coral-500">{error}</p>
-      )}
+      {error && <p className="mt-1 pl-[2.625rem] text-xs text-coral-500">{error}</p>}
       <div className="mt-2 flex items-center justify-between gap-3 border-t border-line-subtle pl-[2.625rem] pt-2">
         <span className="hidden text-[11px] text-content-faint sm:inline">
           <kbd className="rounded border border-line px-1 font-sans">⌘</kbd>
-          <kbd className="ml-0.5 rounded border border-line px-1 font-sans">
-            ↵
-          </kbd>{" "}
-          to post
+          <kbd className="ml-0.5 rounded border border-line px-1 font-sans">↵</kbd> to post
         </span>
         <div className="ml-auto flex items-center gap-3">
           {(nearLimit || draft.length > 0) && (
             <span
               className={`text-[11px] tabular-nums ${
-                remaining <= 20
-                  ? "font-medium text-coral-500"
-                  : "text-content-faint"
-              }`}
-            >
+                remaining <= 20 ? 'font-medium text-coral-500' : 'text-content-faint'
+              }`}>
               {remaining}
             </span>
           )}
@@ -343,9 +312,8 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
             size="sm"
             onClick={() => void submit()}
             disabled={!canPost}
-            className="rounded-full"
-          >
-            {submitting ? "Posting…" : "Post"}
+            className="rounded-full">
+            {submitting ? 'Posting…' : 'Post'}
           </Button>
         </div>
       </div>
@@ -360,13 +328,7 @@ function FeedComposer({ myAgentId, onPostCreated }: FeedComposerProps) {
  * opened. Mirrors the tiny.place website's in-card `CommentList` (replaces the
  * old full-page drill-down).
  */
-function InlineComments({
-  post,
-  myAgentId,
-}: {
-  post: GqlPost;
-  myAgentId: string | null;
-}) {
+function InlineComments({ post, myAgentId }: { post: GqlPost; myAgentId: string | null }) {
   const handle = post.author.handle;
   const [comments, setComments] = useState<GqlComment[]>([]);
   const [loading, setLoading] = useState(true);
@@ -380,11 +342,11 @@ function InlineComments({
         likerLimit: 0,
         viewer: myAgentId ?? undefined,
       })
-      .then((detail) => {
+      .then(detail => {
         setComments(detail?.comments ?? []);
-        setError(detail ? null : "Post not found.");
+        setError(detail ? null : 'Post not found.');
       })
-      .catch((err) => setError(String(err)))
+      .catch(err => setError(String(err)))
       .finally(() => setLoading(false));
   }, [handle, post.postId, myAgentId]);
 
@@ -395,16 +357,14 @@ function InlineComments({
   return (
     <div className="mt-3 border-t border-line-subtle pt-2">
       {loading && (
-        <p className="animate-pulse py-2 text-xs text-content-faint">
-          Loading comments…
-        </p>
+        <p className="animate-pulse py-2 text-xs text-content-faint">Loading comments…</p>
       )}
       {error && <p className="py-2 text-xs text-red-500">{error}</p>}
       {!loading && !error && comments.length === 0 && (
         <p className="py-2 text-xs text-content-faint">No comments yet.</p>
       )}
       <div className="divide-y divide-line-subtle dark:divide-neutral-800">
-        {comments.map((c) => (
+        {comments.map(c => (
           <CommentRow
             key={c.commentId}
             comment={c}
@@ -415,13 +375,7 @@ function InlineComments({
           />
         ))}
       </div>
-      {myAgentId && (
-        <CommentComposer
-          handle={handle}
-          postId={post.postId}
-          onCommentAdded={load}
-        />
-      )}
+      {myAgentId && <CommentComposer handle={handle} postId={post.postId} onCommentAdded={load} />}
     </div>
   );
 }
@@ -470,8 +424,7 @@ function PostCard({
               <svg
                 className="h-3.5 w-3.5 shrink-0 text-primary-500"
                 fill="currentColor"
-                viewBox="0 0 20 20"
-              >
+                viewBox="0 0 20 20">
                 <path
                   fillRule="evenodd"
                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
@@ -480,9 +433,7 @@ function PostCard({
               </svg>
             )}
           </div>
-          <span className="text-xs text-content-faint">
-            @{post.author.handle}
-          </span>
+          <span className="text-xs text-content-faint">@{post.author.handle}</span>
         </div>
         {myAgentId && post.author.cryptoId !== myAgentId && (
           <button
@@ -491,11 +442,10 @@ function PostCard({
             onClick={() => onToggleFollow(post.author.cryptoId)}
             className={`ml-auto shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${
               followState[post.author.cryptoId]
-                ? "border-line-strong text-content-secondary hover:bg-surface-hover"
-                : "border-primary-600 bg-primary-600 text-content-inverted hover:bg-primary-700 dark:border-primary-500 dark:bg-primary-500"
-            }`}
-          >
-            {followState[post.author.cryptoId] ? "Following" : "Follow"}
+                ? 'border-line-strong text-content-secondary hover:bg-surface-hover'
+                : 'border-primary-600 bg-primary-600 text-content-inverted hover:bg-primary-700 dark:border-primary-500 dark:bg-primary-500'
+            }`}>
+            {followState[post.author.cryptoId] ? 'Following' : 'Follow'}
           </button>
         )}
         {myAgentId && post.author.cryptoId === myAgentId && (
@@ -503,32 +453,28 @@ function PostCard({
             type="button"
             onClick={() => onDeletePost(post)}
             className="ml-auto text-xs text-content-faint hover:text-red-500
-                       dark:hover:text-red-400"
-          >
+                       dark:hover:text-red-400">
             Delete
           </button>
         )}
       </div>
 
       {/* Post body */}
-      <p className="mb-3 whitespace-pre-wrap text-sm leading-relaxed text-content">
-        {post.body}
-      </p>
+      <p className="mb-3 whitespace-pre-wrap text-sm leading-relaxed text-content">{post.body}</p>
 
       {/* Metadata row */}
       <div className="flex items-center gap-4 text-xs text-content-faint">
         <span>{relativeTime(post.createdAt)}</span>
-        {item.reason === "recommended" && (
+        {item.reason === 'recommended' && (
           <span className="rounded-full bg-primary-50 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-300">
             Recommended
           </span>
         )}
         <button
           type="button"
-          onClick={() => setShowComments((open) => !open)}
-          className="hover:text-content-secondary"
-        >
-          {post.commentCount} {post.commentCount === 1 ? "comment" : "comments"}
+          onClick={() => setShowComments(open => !open)}
+          className="hover:text-content-secondary">
+          {post.commentCount} {post.commentCount === 1 ? 'comment' : 'comments'}
         </button>
         {myAgentId ? (
           <button
@@ -536,15 +482,10 @@ function PostCard({
             onClick={() => onToggleLike(post)}
             className={`flex items-center gap-1 ${
               (likeState[post.postId]?.liked ?? post.viewerHasLiked)
-                ? "text-red-500"
-                : "text-content-faint hover:text-red-400"
-            }`}
-          >
-            <svg
-              className="h-3.5 w-3.5"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
+                ? 'text-red-500'
+                : 'text-content-faint hover:text-red-400'
+            }`}>
+            <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
                 d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
@@ -555,7 +496,7 @@ function PostCard({
           </button>
         ) : (
           <span>
-            {post.likeCount} {post.likeCount === 1 ? "like" : "likes"}
+            {post.likeCount} {post.likeCount === 1 ? 'like' : 'likes'}
           </span>
         )}
       </div>
@@ -589,13 +530,10 @@ function CommentRow({
     void apiClient.feeds
       .deleteComment(handle, postId, comment.commentId)
       .then(({ ok }) => {
-        if (!ok)
-          throw new Error("Comment deletion was not accepted by the backend");
+        if (!ok) throw new Error('Comment deletion was not accepted by the backend');
         onCommentDeleted();
       })
-      .catch((err) =>
-        console.error("[FeedSection] delete comment failed:", err),
-      )
+      .catch(err => console.error('[FeedSection] delete comment failed:', err))
       .finally(() => {
         setDeleting(false);
         setConfirmingDelete(false);
@@ -611,25 +549,20 @@ function CommentRow({
           className="h-7 w-7 shrink-0 rounded-full object-cover"
         />
       ) : (
-        <InitialAvatar
-          name={comment.author.displayName || comment.author.handle}
-        />
+        <InitialAvatar name={comment.author.displayName || comment.author.handle} />
       )}
       <div className="min-w-0 flex-1">
         <div className="flex items-baseline gap-2">
           <span className="text-sm font-medium text-content">
             {comment.author.displayName || comment.author.handle}
           </span>
-          <span className="text-xs text-content-faint">
-            {relativeTime(comment.createdAt)}
-          </span>
+          <span className="text-xs text-content-faint">{relativeTime(comment.createdAt)}</span>
           {myAgentId && comment.author.cryptoId === myAgentId && (
             <button
               type="button"
               onClick={() => setConfirmingDelete(true)}
               className="text-xs text-content-faint hover:text-red-500
-                         dark:hover:text-red-400"
-            >
+                         dark:hover:text-red-400">
               Delete
             </button>
           )}
@@ -655,23 +588,16 @@ function CommentRow({
 // ── FeedSection (main export) ─────────────────────────────────────────────────
 
 export default function FeedSection() {
-  const [feedState, setFeedState] = useState<FeedState>({ status: "loading" });
+  const [feedState, setFeedState] = useState<FeedState>({ status: 'loading' });
   const [followState, setFollowState] = useState<Record<string, boolean>>({});
-  const [followLoading, setFollowLoading] = useState<Record<string, boolean>>(
-    {},
-  );
-  const [likeState, setLikeState] = useState<
-    Record<string, { liked: boolean; count: number }>
-  >({});
+  const [followLoading, setFollowLoading] = useState<Record<string, boolean>>({});
+  const [likeState, setLikeState] = useState<Record<string, { liked: boolean; count: number }>>({});
   // Post pending deletion — drives the in-app confirm modal (#4197). `null` = no
   // dialog open; `deletingPost` disables the buttons while the RPC is in flight.
-  const [postPendingDelete, setPostPendingDelete] = useState<GqlPost | null>(
-    null,
-  );
+  const [postPendingDelete, setPostPendingDelete] = useState<GqlPost | null>(null);
   const [deletingPost, setDeletingPost] = useState(false);
 
-  const { agentId: myAgentId, configured: walletConfigured } =
-    useWalletResolution();
+  const { agentId: myAgentId, configured: walletConfigured } = useWalletResolution();
 
   // ── Hydrate follow state from the server ───────────────────────────────────
   // The home feed doesn't carry "am I following this author?", so seed the
@@ -682,14 +608,14 @@ export default function FeedSection() {
     let cancelled = false;
     void apiClient.follows
       .following(myAgentId)
-      .then((res) => {
+      .then(res => {
         if (cancelled) return;
         const followed: Record<string, boolean> = {};
         for (const f of res.following ?? []) {
           if (f.followee) followed[f.followee] = true;
         }
         // Merge so any optimistic toggles made before this resolves are kept.
-        setFollowState((prev) => ({ ...followed, ...prev }));
+        setFollowState(prev => ({ ...followed, ...prev }));
       })
       .catch(() => {});
     return () => {
@@ -707,21 +633,21 @@ export default function FeedSection() {
   // ('yes') — or an inconclusive wallet_status fetch ('unknown') — fires the
   // feed fetch as before.
   useEffect(() => {
-    if (walletConfigured === "resolving") {
+    if (walletConfigured === 'resolving') {
       // Still resolving — stay on the initial loading state, fire nothing yet.
       return;
     }
-    if (walletConfigured === "no") {
+    if (walletConfigured === 'no') {
       // Positive "no wallet" signal — skip the wallet-gated RPC entirely.
-      log("skipping homeFeed: no wallet configured");
-      setFeedState({ status: "wallet_unconfigured" });
+      log('skipping homeFeed: no wallet configured');
+      setFeedState({ status: 'wallet_unconfigured' });
       return;
     }
     // 'yes' or 'unknown' → fire the feed fetch ('unknown' falls through so the
     // backend classifier can handle a wallet-locked error as before).
 
     let cancelled = false;
-    setFeedState({ status: "loading" });
+    setFeedState({ status: 'loading' });
 
     // `includeSelf: true` — the personalized home feed otherwise returns only
     // scored posts from *followed* agents, so the viewer's own posts (including
@@ -730,20 +656,17 @@ export default function FeedSection() {
     // show it (#4059).
     void apiClient.graphql
       .homeFeed({ limit: 50, includeSelf: true })
-      .then((result) => {
+      .then(result => {
         if (cancelled) return;
         const items = sortedHomeFeedItems(result);
-        setFeedState({ status: "ok", items });
+        setFeedState({ status: 'ok', items });
       })
       .catch((err: unknown) => {
         if (cancelled) return;
         if (err instanceof PaymentRequiredError) {
-          setFeedState({
-            status: "payment_required",
-            challenge: err.challenge,
-          });
+          setFeedState({ status: 'payment_required', challenge: err.challenge });
         } else {
-          setFeedState({ status: "error", message: String(err) });
+          setFeedState({ status: 'error', message: String(err) });
         }
       });
 
@@ -756,8 +679,8 @@ export default function FeedSection() {
 
   const handleToggleFollow = async (cryptoId: string) => {
     const isFollowing = followState[cryptoId] ?? false;
-    setFollowState((prev) => ({ ...prev, [cryptoId]: !isFollowing }));
-    setFollowLoading((prev) => ({ ...prev, [cryptoId]: true }));
+    setFollowState(prev => ({ ...prev, [cryptoId]: !isFollowing }));
+    setFollowLoading(prev => ({ ...prev, [cryptoId]: true }));
     try {
       if (isFollowing) {
         await apiClient.follows.unfollow(cryptoId);
@@ -765,29 +688,23 @@ export default function FeedSection() {
         await apiClient.follows.follow(cryptoId);
       }
     } catch (err) {
-      setFollowState((prev) => ({ ...prev, [cryptoId]: isFollowing }));
-      console.error("[FeedSection] follow/unfollow failed:", err);
+      setFollowState(prev => ({ ...prev, [cryptoId]: isFollowing }));
+      console.error('[FeedSection] follow/unfollow failed:', err);
     } finally {
-      setFollowLoading((prev) => ({ ...prev, [cryptoId]: false }));
+      setFollowLoading(prev => ({ ...prev, [cryptoId]: false }));
     }
   };
 
   // ── Like / Unlike ──────────────────────────────────────────────────────────
 
   const handleToggleLike = async (post: GqlPost) => {
-    const current = likeState[post.postId] ?? {
-      liked: post.viewerHasLiked,
-      count: post.likeCount,
-    };
+    const current = likeState[post.postId] ?? { liked: post.viewerHasLiked, count: post.likeCount };
     const willLike = !current.liked;
 
     // Optimistic update
-    setLikeState((prev) => ({
+    setLikeState(prev => ({
       ...prev,
-      [post.postId]: {
-        liked: willLike,
-        count: current.count + (willLike ? 1 : -1),
-      },
+      [post.postId]: { liked: willLike, count: current.count + (willLike ? 1 : -1) },
     }));
 
     try {
@@ -796,14 +713,14 @@ export default function FeedSection() {
         : await apiClient.feeds.unlikePost(post.author.handle, post.postId);
 
       // Reconcile with authoritative server state
-      setLikeState((prev) => ({
+      setLikeState(prev => ({
         ...prev,
         [post.postId]: { liked: result.liked, count: result.likeCount },
       }));
     } catch (err) {
       // Rollback to pre-mutation state
-      setLikeState((prev) => ({ ...prev, [post.postId]: current }));
-      console.error("[FeedSection] like/unlike failed:", err);
+      setLikeState(prev => ({ ...prev, [post.postId]: current }));
+      console.error('[FeedSection] like/unlike failed:', err);
     }
   };
 
@@ -822,18 +739,15 @@ export default function FeedSection() {
     void apiClient.feeds
       .deletePost(post.postId)
       .then(({ ok }) => {
-        if (!ok)
-          throw new Error("Post deletion was not accepted by the backend");
+        if (!ok) throw new Error('Post deletion was not accepted by the backend');
         // Return the refresh promise so its rejection reaches `.catch` (rather
         // than resolving the delete as "done" before the feed is reloaded).
-        return apiClient.graphql
-          .homeFeed({ limit: 50, includeSelf: true })
-          .then((result) => {
-            const items = sortedHomeFeedItems(result);
-            setFeedState({ status: "ok", items });
-          });
+        return apiClient.graphql.homeFeed({ limit: 50, includeSelf: true }).then(result => {
+          const items = sortedHomeFeedItems(result);
+          setFeedState({ status: 'ok', items });
+        });
       })
-      .catch((err) => console.error("[FeedSection] delete post failed:", err))
+      .catch(err => console.error('[FeedSection] delete post failed:', err))
       .finally(() => {
         setDeletingPost(false);
         setPostPendingDelete(null);
@@ -843,25 +757,23 @@ export default function FeedSection() {
   // ── Refetch feed ───────────────────────────────────────────────────────────
 
   const refetchFeed = () => {
-    void apiClient.graphql
-      .homeFeed({ limit: 50, includeSelf: true })
-      .then((result) => {
-        const items = sortedHomeFeedItems(result);
-        setFeedState({ status: "ok", items });
-      });
+    void apiClient.graphql.homeFeed({ limit: 50, includeSelf: true }).then(result => {
+      const items = sortedHomeFeedItems(result);
+      setFeedState({ status: 'ok', items });
+    });
   };
 
   // ── Render ─────────────────────────────────────────────────────────────────
 
   let body: React.ReactNode;
 
-  if (feedState.status === "loading") {
+  if (feedState.status === 'loading') {
     body = (
       <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading feed…</span>
       </div>
     );
-  } else if (feedState.status === "wallet_unconfigured") {
+  } else if (feedState.status === 'wallet_unconfigured') {
     body = (
       <StatusBlock
         tone="text-content-secondary"
@@ -869,7 +781,7 @@ export default function FeedSection() {
         body="Your personalized feed uses your wallet identity. Set up or import a wallet in Settings to continue."
       />
     );
-  } else if (feedState.status === "payment_required") {
+  } else if (feedState.status === 'payment_required') {
     body = (
       <StatusBlock
         tone="text-amber-600 dark:text-amber-400"
@@ -877,7 +789,7 @@ export default function FeedSection() {
         body="Your wallet will be used to fulfill the x402 payment challenge."
       />
     );
-  } else if (feedState.status === "error") {
+  } else if (feedState.status === 'error') {
     body = isWalletLocked(feedState.message) ? (
       <StatusBlock
         tone="text-content-secondary"
@@ -902,18 +814,18 @@ export default function FeedSection() {
   } else {
     body = (
       <div className="space-y-3">
-        {feedState.items.map((item) => (
+        {feedState.items.map(item => (
           <PostCard
             key={item.post.postId}
             item={item}
             myAgentId={myAgentId}
             followState={followState}
             followLoading={followLoading}
-            onToggleFollow={(cryptoId) => {
+            onToggleFollow={cryptoId => {
               void handleToggleFollow(cryptoId);
             }}
             likeState={likeState}
-            onToggleLike={(post) => {
+            onToggleLike={post => {
               void handleToggleLike(post);
             }}
             onDeletePost={handleDeletePost}
@@ -925,7 +837,7 @@ export default function FeedSection() {
 
   return (
     <PanelScaffold description="Social feed">
-      {myAgentId && feedState.status === "ok" && (
+      {myAgentId && feedState.status === 'ok' && (
         <FeedComposer myAgentId={myAgentId} onPostCreated={refetchFeed} />
       )}
       {body}
diff --git a/app/src/agentworld/pages/JobsSection.tsx b/app/src/agentworld/pages/JobsSection.tsx
index 5c55ac1369..7e5979db3a 100644
--- a/app/src/agentworld/pages/JobsSection.tsx
+++ b/app/src/agentworld/pages/JobsSection.tsx
@@ -14,28 +14,29 @@
  * Pattern mirrors LedgerSection / FeedSection: useState + useEffect fetch,
  * PanelScaffold wrapper, StatusBlock for loading/error/empty states.
  */
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-import PanelScaffold from "../../components/layout/PanelScaffold";
-import Button from "../../components/ui/Button";
-import { ModalShell } from "../../components/ui/ModalShell";
+import PanelScaffold from '../../components/layout/PanelScaffold';
+import Button from '../../components/ui/Button';
+import { ModalShell } from '../../components/ui/ModalShell';
 import {
   type GqlJobPosting,
   type JobCreateParams,
   type Proposal,
   type ProposalCreateParams,
-} from "../../lib/agentworld/invokeApiClient";
-import { useT } from "../../lib/i18n/I18nContext";
-import { fetchWalletStatus } from "../../services/walletApi";
-import { apiClient } from "../AgentWorldShell";
-import { explorerTxUrl } from "../hooks/useX402Buy";
-import { relativeTime } from "../utils/relativeTime";
+} from '../../lib/agentworld/invokeApiClient';
+import { useT } from '../../lib/i18n/I18nContext';
+import { fetchWalletStatus } from '../../services/walletApi';
+import { apiClient } from '../AgentWorldShell';
+import { explorerTxUrl } from '../hooks/useX402Buy';
+import { relativeTime } from '../utils/relativeTime';
+
 // ── State types ───────────────────────────────────────────────────────────────
 
 type JobsState =
-  | { status: "loading" }
-  | { status: "error"; message: string }
-  | { status: "ok"; jobs: GqlJobPosting[] };
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | { status: 'ok'; jobs: GqlJobPosting[] };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -46,10 +47,10 @@ type JobsState =
  */
 function formatAmount(amount: string): string {
   if (!Number.isFinite(Number(amount))) return amount;
-  const negative = amount.startsWith("-");
+  const negative = amount.startsWith('-');
   const body = negative ? amount.slice(1) : amount;
-  const [intPart, fracPart] = body.split(".");
-  const grouped = Number(intPart).toLocaleString("en-US");
+  const [intPart, fracPart] = body.split('.');
+  const grouped = Number(intPart).toLocaleString('en-US');
   const out = fracPart != null ? `${grouped}.${fracPart}` : grouped;
   return negative ? `-${out}` : out;
 }
@@ -69,8 +70,7 @@ function VerifiedBadge() {
       className="h-3.5 w-3.5 shrink-0 text-primary-500"
       viewBox="0 0 20 20"
       fill="currentColor"
-      aria-label="Verified"
-    >
+      aria-label="Verified">
       <path
         fillRule="evenodd"
         d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
@@ -81,15 +81,7 @@ function VerifiedBadge() {
 }
 
 /** Centered status message for loading / error / info states. */
-function StatusBlock({
-  tone,
-  title,
-  body,
-}: {
-  tone: string;
-  title: string;
-  body?: string;
-}) {
+function StatusBlock({ tone, title, body }: { tone: string; title: string; body?: string }) {
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
@@ -104,10 +96,8 @@ function useMyAgentId(): string | null {
   const [agentId, setAgentId] = useState<string | null>(null);
   useEffect(() => {
     void fetchWalletStatus()
-      .then((status) => {
-        const solana = (status.accounts ?? []).find(
-          (a) => a.chain === "solana",
-        );
+      .then(status => {
+        const solana = (status.accounts ?? []).find(a => a.chain === 'solana');
         if (solana?.address) setAgentId(solana.address);
       })
       .catch(() => {});
@@ -121,21 +111,19 @@ function useMyAgentId(): string | null {
 
 export function JobStatusBadge({ status }: { status: string }) {
   const color =
-    status === "OPEN"
-      ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
-      : status === "IN_PROGRESS"
-        ? "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400"
-        : status === "COMPLETED"
-          ? "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
-          : status === "DISPUTED"
-            ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
-            : status === "CANCELLED"
-              ? "bg-surface-subtle text-content-secondary"
-              : "bg-surface-subtle text-content-secondary";
+    status === 'OPEN'
+      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+      : status === 'IN_PROGRESS'
+        ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
+        : status === 'COMPLETED'
+          ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
+          : status === 'DISPUTED'
+            ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+            : status === 'CANCELLED'
+              ? 'bg-surface-subtle text-content-secondary'
+              : 'bg-surface-subtle text-content-secondary';
   return (
-    <span
-      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}
-    >
+    <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
       {status}
     </span>
   );
@@ -153,18 +141,12 @@ function SkillChip({ skill }: { skill: string }) {
 
 // ── ClientAvatar ──────────────────────────────────────────────────────────────
 
-function ClientAvatar({
-  avatarUrl,
-  displayName,
-}: {
-  avatarUrl?: string;
-  displayName: string;
-}) {
+function ClientAvatar({ avatarUrl, displayName }: { avatarUrl?: string; displayName: string }) {
   const initials = displayName
-    .split(" ")
-    .map((w) => w[0] ?? "")
+    .split(' ')
+    .map(w => w[0] ?? '')
     .slice(0, 2)
-    .join("")
+    .join('')
     .toUpperCase();
 
   if (avatarUrl) {
@@ -173,12 +155,12 @@ function ClientAvatar({
         src={avatarUrl}
         alt={displayName}
         className="h-7 w-7 shrink-0 rounded-full object-cover"
-        onError={(e) => {
+        onError={e => {
           // Swap to initials circle on load failure
           const target = e.currentTarget as HTMLImageElement;
-          target.style.display = "none";
+          target.style.display = 'none';
           if (target.nextElementSibling) {
-            (target.nextElementSibling as HTMLElement).style.display = "flex";
+            (target.nextElementSibling as HTMLElement).style.display = 'flex';
           }
         }}
       />
@@ -187,28 +169,22 @@ function ClientAvatar({
 
   return (
     <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary-100 text-xs font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
-      {initials || "?"}
+      {initials || '?'}
     </div>
   );
 }
 
 // ── PostJobModal ──────────────────────────────────────────────────────────────
 
-function PostJobModal({
-  onClose,
-  onCreated,
-}: {
-  onClose: () => void;
-  onCreated: () => void;
-}) {
+function PostJobModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
   const { t } = useT();
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [category, setCategory] = useState("");
-  const [skillsCsv, setSkillsCsv] = useState("");
-  const [budgetAmount, setBudgetAmount] = useState("");
-  const [budgetAsset, setBudgetAsset] = useState("USDC");
-  const [proposalDeadline, setProposalDeadline] = useState("");
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [category, setCategory] = useState('');
+  const [skillsCsv, setSkillsCsv] = useState('');
+  const [budgetAmount, setBudgetAmount] = useState('');
+  const [budgetAsset, setBudgetAsset] = useState('USDC');
+  const [proposalDeadline, setProposalDeadline] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -226,14 +202,9 @@ function PostJobModal({
     // until midnight UTC.
     if (deadlineDate) {
       const now = new Date();
-      const todayLocal = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+      const todayLocal = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
       if (deadlineDate <= todayLocal) {
-        setError(
-          t(
-            "agentWorld.jobs.deadlineFuture",
-            "Proposal deadline must be in the future",
-          ),
-        );
+        setError(t('agentWorld.jobs.deadlineFuture', 'Proposal deadline must be in the future'));
         setSubmitting(false);
         return;
       }
@@ -244,12 +215,12 @@ function PostJobModal({
       category: category.trim() || undefined,
       skills: skillsCsv.trim()
         ? skillsCsv
-            .split(",")
-            .map((s) => s.trim())
+            .split(',')
+            .map(s => s.trim())
             .filter(Boolean)
         : undefined,
       budgetAmount: budgetAmount.trim(),
-      budgetAsset: budgetAsset.trim() || "USDC",
+      budgetAsset: budgetAsset.trim() || 'USDC',
       proposalDeadline: deadlineIso,
     };
     try {
@@ -268,23 +239,19 @@ function PostJobModal({
       onClose={onClose}
       title="Post a Job"
       titleId="post-job-modal-title"
-      maxWidthClassName="max-w-lg"
-    >
+      maxWidthClassName="max-w-lg">
       <form
-        onSubmit={(e) => {
+        onSubmit={e => {
           void handleSubmit(e);
         }}
-        className="space-y-3"
-      >
+        className="space-y-3">
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">
-            Title *
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Title *</label>
           <input
             type="text"
             required
             value={title}
-            onChange={(e) => setTitle(e.target.value)}
+            onChange={e => setTitle(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. Build a Solana integration"
           />
@@ -296,31 +263,27 @@ function PostJobModal({
           <textarea
             rows={3}
             value={description}
-            onChange={(e) => setDescription(e.target.value)}
+            onChange={e => setDescription(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="Describe the work, requirements, and deliverables"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">
-            Category
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Category</label>
           <input
             type="text"
             value={category}
-            onChange={(e) => setCategory(e.target.value)}
+            onChange={e => setCategory(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. development, design, research"
           />
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">
-            Skills
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Skills</label>
           <input
             type="text"
             value={skillsCsv}
-            onChange={(e) => setSkillsCsv(e.target.value)}
+            onChange={e => setSkillsCsv(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="e.g. React, TypeScript"
           />
@@ -334,19 +297,17 @@ function PostJobModal({
               type="text"
               required
               value={budgetAmount}
-              onChange={(e) => setBudgetAmount(e.target.value)}
+              onChange={e => setBudgetAmount(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder="500"
             />
           </div>
           <div className="w-28">
-            <label className="mb-1 block text-xs font-medium text-content-secondary">
-              Asset
-            </label>
+            <label className="mb-1 block text-xs font-medium text-content-secondary">Asset</label>
             <input
               type="text"
               value={budgetAsset}
-              onChange={(e) => setBudgetAsset(e.target.value)}
+              onChange={e => setBudgetAsset(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
               placeholder="USDC"
             />
@@ -359,19 +320,17 @@ function PostJobModal({
           <input
             type="date"
             value={proposalDeadline}
-            onChange={(e) => setProposalDeadline(e.target.value)}
+            onChange={e => setProposalDeadline(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
           />
         </div>
-        {error && (
-          <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
-        )}
+        {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
         <div className="flex justify-end gap-2 pt-1">
           <Button type="button" onClick={onClose}>
             Cancel
           </Button>
           <Button type="submit" disabled={submitting}>
-            {submitting ? "Posting…" : "Post Job"}
+            {submitting ? 'Posting…' : 'Post Job'}
           </Button>
         </div>
       </form>
@@ -391,9 +350,9 @@ function ApplyModal({
   onApplied: () => void;
 }) {
   const { t } = useT();
-  const [coverLetter, setCoverLetter] = useState("");
-  const [bidAmount, setBidAmount] = useState("");
-  const [estimatedDelivery, setEstimatedDelivery] = useState("");
+  const [coverLetter, setCoverLetter] = useState('');
+  const [bidAmount, setBidAmount] = useState('');
+  const [estimatedDelivery, setEstimatedDelivery] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [succeeded, setSucceeded] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -435,66 +394,61 @@ function ApplyModal({
   return (
     <ModalShell
       onClose={onClose}
-      title={t("agentworld.jobs.applyModal.title")}
+      title={t('agentworld.jobs.applyModal.title')}
       titleId="apply-modal-title"
-      maxWidthClassName="max-w-lg"
-    >
+      maxWidthClassName="max-w-lg">
       {succeeded ? (
         <div
           role="status"
           aria-live="polite"
-          className="flex flex-col items-center gap-3 py-6 text-center"
-        >
+          className="flex flex-col items-center gap-3 py-6 text-center">
           <p className="text-sm font-medium text-green-700 dark:text-green-400">
-            {t("agentworld.jobs.applyModal.successHeading")}
+            {t('agentworld.jobs.applyModal.successHeading')}
           </p>
           <p className="text-xs text-content-muted">
-            {t("agentworld.jobs.applyModal.successBody")}
+            {t('agentworld.jobs.applyModal.successBody')}
           </p>
         </div>
       ) : (
         <form
-          onSubmit={(e) => {
+          onSubmit={e => {
             void handleSubmit(e);
           }}
-          className="space-y-3"
-        >
+          className="space-y-3">
           <div>
             <label className="mb-1 block text-xs font-medium text-content-secondary">
-              {t("agentworld.jobs.applyModal.coverLetterLabel")}
+              {t('agentworld.jobs.applyModal.coverLetterLabel')}
             </label>
             <textarea
               rows={4}
               value={coverLetter}
-              onChange={(e) => setCoverLetter(e.target.value)}
+              onChange={e => setCoverLetter(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
-              placeholder={t(
-                "agentworld.jobs.applyModal.coverLetterPlaceholder",
-              )}
+              placeholder={t('agentworld.jobs.applyModal.coverLetterPlaceholder')}
             />
           </div>
           <div>
             <label className="mb-1 block text-xs font-medium text-content-secondary">
-              {t("agentworld.jobs.applyModal.bidAmountLabel")}
+              {t('agentworld.jobs.applyModal.bidAmountLabel')}
             </label>
             <input
               type="text"
               value={bidAmount}
-              onChange={(e) => setBidAmount(e.target.value)}
+              onChange={e => setBidAmount(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
-              placeholder={t("agentworld.jobs.applyModal.bidAmountPlaceholder")}
+              placeholder={t('agentworld.jobs.applyModal.bidAmountPlaceholder')}
             />
           </div>
           <div>
             <label className="mb-1 block text-xs font-medium text-content-secondary">
-              {t("agentworld.jobs.applyModal.deliveryLabel")}
+              {t('agentworld.jobs.applyModal.deliveryLabel')}
             </label>
             <input
               type="text"
               value={estimatedDelivery}
-              onChange={(e) => setEstimatedDelivery(e.target.value)}
+              onChange={e => setEstimatedDelivery(e.target.value)}
               className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
-              placeholder={t("agentworld.jobs.applyModal.deliveryPlaceholder")}
+              placeholder={t('agentworld.jobs.applyModal.deliveryPlaceholder')}
             />
           </div>
           {error && (
@@ -504,12 +458,12 @@ function ApplyModal({
           )}
           <div className="flex justify-end gap-2 pt-1">
             <Button type="button" onClick={onClose} disabled={submitting}>
-              {t("agentworld.jobs.applyModal.cancel")}
+              {t('agentworld.jobs.applyModal.cancel')}
             </Button>
             <Button type="submit" disabled={submitting}>
               {submitting
-                ? t("agentworld.jobs.applyModal.submitting")
-                : t("agentworld.jobs.applyModal.submit")}
+                ? t('agentworld.jobs.applyModal.submitting')
+                : t('agentworld.jobs.applyModal.submit')}
             </Button>
           </div>
         </form>
@@ -529,7 +483,7 @@ function DisputeModal({
   onClose: () => void;
   onDisputed: () => void;
 }) {
-  const [reason, setReason] = useState("");
+  const [reason, setReason] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -554,36 +508,30 @@ function DisputeModal({
       onClose={onClose}
       title="Open Dispute"
       titleId="dispute-modal-title"
-      maxWidthClassName="max-w-md"
-    >
+      maxWidthClassName="max-w-md">
       <form
-        onSubmit={(e) => {
+        onSubmit={e => {
           void handleSubmit(e);
         }}
-        className="space-y-3"
-      >
+        className="space-y-3">
         <div>
-          <label className="mb-1 block text-xs font-medium text-content-secondary">
-            Reason *
-          </label>
+          <label className="mb-1 block text-xs font-medium text-content-secondary">Reason *</label>
           <textarea
             rows={4}
             required
             value={reason}
-            onChange={(e) => setReason(e.target.value)}
+            onChange={e => setReason(e.target.value)}
             className="w-full rounded border border-line-strong bg-surface px-2.5 py-1.5 text-sm text-content"
             placeholder="Describe the issue that requires dispute resolution"
           />
         </div>
-        {error && (
-          <p className="text-xs text-red-600 dark:text-red-400">{error}</p>
-        )}
+        {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
         <div className="flex justify-end gap-2 pt-1">
           <Button type="button" onClick={onClose}>
             Cancel
           </Button>
           <Button type="submit" disabled={submitting}>
-            {submitting ? "Opening…" : "Open Dispute"}
+            {submitting ? 'Opening…' : 'Open Dispute'}
           </Button>
         </div>
       </form>
@@ -635,7 +583,7 @@ function JobRow({
 
   const isClient = myAgentId === job.client;
   const showingProposals = proposalsForJobId === job.jobId;
-  const proposalLabel = `${job.proposalCount} proposal${job.proposalCount !== 1 ? "s" : ""}`;
+  const proposalLabel = `${job.proposalCount} proposal${job.proposalCount !== 1 ? 's' : ''}`;
 
   return (
     <div className="border-b border-line-subtle last:border-0">
@@ -643,8 +591,7 @@ function JobRow({
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50"
-      >
+        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50">
         <ClientAvatar
           avatarUrl={job.clientProfile.avatarUrl ?? undefined}
           displayName={job.clientProfile.displayName}
@@ -654,9 +601,7 @@ function JobRow({
         <div className="min-w-0 flex-1">
           {/* Line 1: title + status */}
           <div className="flex items-center gap-2">
-            <span className="truncate text-sm font-semibold text-content">
-              {job.title}
-            </span>
+            <span className="truncate text-sm font-semibold text-content">{job.title}</span>
             <span className="shrink-0">
               <JobStatusBadge status={job.status} />
             </span>
@@ -664,9 +609,7 @@ function JobRow({
 
           {/* Line 2: client · budget */}
           <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-content-muted">
-            <span className="truncate">
-              {displayClientName(job.clientProfile.displayName)}
-            </span>
+            <span className="truncate">{displayClientName(job.clientProfile.displayName)}</span>
             {job.clientProfile.verified && <VerifiedBadge />}
             <span className="text-content-faint dark:text-neutral-600">·</span>
             <span className="whitespace-nowrap font-medium text-content-secondary">
@@ -676,16 +619,14 @@ function JobRow({
 
           {/* Line 3: skills + proposal count */}
           <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
-            {visibleSkills.map((skill) => (
+            {visibleSkills.map(skill => (
               <SkillChip key={skill} skill={skill} />
             ))}
             {overflowCount > 0 && (
-              <span className="text-xs text-content-faint">
-                +{overflowCount}
-              </span>
+              <span className="text-xs text-content-faint">+{overflowCount}</span>
             )}
             <span className="text-xs text-content-faint">
-              {skills.length > 0 ? "· " : ""}
+              {skills.length > 0 ? '· ' : ''}
               {proposalLabel}
             </span>
           </div>
@@ -697,17 +638,11 @@ function JobRow({
             {relativeTime(job.createdAt)}
           </span>
           <svg
-            className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? "rotate-180" : ""}`}
+            className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? 'rotate-180' : ''}`}
             fill="none"
             stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 9l-7 7-7-7"
-            />
+            viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
           </svg>
         </div>
       </button>
@@ -738,7 +673,7 @@ function JobRow({
               <>
                 <dt className="font-medium text-content-muted">Skills</dt>
                 <dd className="flex flex-wrap gap-1">
-                  {skills.map((skill) => (
+                  {skills.map(skill => (
                     <SkillChip key={skill} skill={skill} />
                   ))}
                 </dd>
@@ -756,9 +691,7 @@ function JobRow({
             {/* Proposal deadline */}
             {job.proposalDeadline && (
               <>
-                <dt className="font-medium text-content-muted">
-                  Proposal Deadline
-                </dt>
+                <dt className="font-medium text-content-muted">Proposal Deadline</dt>
                 <dd className="text-content">{job.proposalDeadline}</dd>
               </>
             )}
@@ -767,21 +700,15 @@ function JobRow({
             {job.contractEscrowId && (
               <>
                 <dt className="font-medium text-content-muted">Escrow ID</dt>
-                <dd className="break-all font-mono text-content">
-                  {job.contractEscrowId}
-                </dd>
+                <dd className="break-all font-mono text-content">{job.contractEscrowId}</dd>
               </>
             )}
 
             {/* Selected candidate */}
             {job.selectedCandidate && (
               <>
-                <dt className="font-medium text-content-muted">
-                  Selected Candidate
-                </dt>
-                <dd className="break-all font-mono text-content">
-                  {job.selectedCandidate}
-                </dd>
+                <dt className="font-medium text-content-muted">Selected Candidate</dt>
+                <dd className="break-all font-mono text-content">{job.selectedCandidate}</dd>
               </>
             )}
 
@@ -789,9 +716,7 @@ function JobRow({
             {job.groupId && (
               <>
                 <dt className="font-medium text-content-muted">Group ID</dt>
-                <dd className="break-all font-mono text-content">
-                  {job.groupId}
-                </dd>
+                <dd className="break-all font-mono text-content">{job.groupId}</dd>
               </>
             )}
 
@@ -806,17 +731,13 @@ function JobRow({
           {/* Dispute section */}
           {job.dispute && (
             <div className="mt-3">
-              <p className="mb-1 text-xs font-semibold text-red-600 dark:text-red-400">
-                Dispute
-              </p>
+              <p className="mb-1 text-xs font-semibold text-red-600 dark:text-red-400">Dispute</p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 <dt className="font-medium text-content-muted">Reason</dt>
                 <dd className="text-content">{job.dispute.reason}</dd>
 
                 <dt className="font-medium text-content-muted">Opened By</dt>
-                <dd className="break-all font-mono text-content">
-                  {job.dispute.openedBy}
-                </dd>
+                <dd className="break-all font-mono text-content">{job.dispute.openedBy}</dd>
 
                 <dt className="font-medium text-content-muted">Opened At</dt>
                 <dd className="text-content">{job.dispute.openedAt}</dd>
@@ -833,18 +754,14 @@ function JobRow({
 
                 {job.dispute.splitBps != null && (
                   <>
-                    <dt className="font-medium text-content-muted">
-                      Split bps
-                    </dt>
+                    <dt className="font-medium text-content-muted">Split bps</dt>
                     <dd className="text-content">{job.dispute.splitBps}</dd>
                   </>
                 )}
 
                 {job.dispute.judgeModel && (
                   <>
-                    <dt className="font-medium text-content-muted">
-                      Judge Model
-                    </dt>
+                    <dt className="font-medium text-content-muted">Judge Model</dt>
                     <dd className="text-content">{job.dispute.judgeModel}</dd>
                   </>
                 )}
@@ -852,26 +769,20 @@ function JobRow({
                 {job.dispute.presided != null && (
                   <>
                     <dt className="font-medium text-content-muted">Presided</dt>
-                    <dd className="text-content">
-                      {job.dispute.presided ? "Yes" : "No"}
-                    </dd>
+                    <dd className="text-content">{job.dispute.presided ? 'Yes' : 'No'}</dd>
                   </>
                 )}
 
                 {job.dispute.reasoning && (
                   <>
-                    <dt className="font-medium text-content-muted">
-                      Reasoning
-                    </dt>
+                    <dt className="font-medium text-content-muted">Reasoning</dt>
                     <dd className="text-content">{job.dispute.reasoning}</dd>
                   </>
                 )}
 
                 {job.dispute.resolvedAt && (
                   <>
-                    <dt className="font-medium text-content-muted">
-                      Resolved At
-                    </dt>
+                    <dt className="font-medium text-content-muted">Resolved At</dt>
                     <dd className="text-content">{job.dispute.resolvedAt}</dd>
                   </>
                 )}
@@ -880,19 +791,13 @@ function JobRow({
               {/* Jury votes table */}
               {job.dispute.jury && job.dispute.jury.length > 0 && (
                 <div className="mt-2">
-                  <p className="mb-1 text-xs font-medium text-content-muted">
-                    Jury Votes
-                  </p>
+                  <p className="mb-1 text-xs font-medium text-content-muted">Jury Votes</p>
                   <div className="overflow-x-auto">
                     <table className="w-full text-xs">
                       <thead>
                         <tr className="border-b border-line">
-                          <th className="pb-1 text-left font-medium text-content-muted">
-                            Model
-                          </th>
-                          <th className="pb-1 text-left font-medium text-content-muted">
-                            Outcome
-                          </th>
+                          <th className="pb-1 text-left font-medium text-content-muted">Model</th>
+                          <th className="pb-1 text-left font-medium text-content-muted">Outcome</th>
                           <th className="pb-1 text-left font-medium text-content-muted">
                             Split bps
                           </th>
@@ -903,22 +808,11 @@ function JobRow({
                       </thead>
                       <tbody>
                         {job.dispute.jury.map((vote, i) => (
-                          <tr
-                            key={i}
-                            className="border-b border-line-subtle last:border-0"
-                          >
-                            <td className="py-0.5 font-mono text-content">
-                              {vote.model}
-                            </td>
-                            <td className="py-0.5 text-content">
-                              {vote.outcome}
-                            </td>
-                            <td className="py-0.5 text-content">
-                              {vote.splitBps}
-                            </td>
-                            <td className="py-0.5 text-content">
-                              {vote.reasoning ?? "-"}
-                            </td>
+                          <tr key={i} className="border-b border-line-subtle last:border-0">
+                            <td className="py-0.5 font-mono text-content">{vote.model}</td>
+                            <td className="py-0.5 text-content">{vote.outcome}</td>
+                            <td className="py-0.5 text-content">{vote.splitBps}</td>
+                            <td className="py-0.5 text-content">{vote.reasoning ?? '-'}</td>
                           </tr>
                         ))}
                       </tbody>
@@ -932,45 +826,31 @@ function JobRow({
           {/* On-chain section */}
           {job.onChain && (
             <div className="mt-3">
-              <p className="mb-1 text-xs font-semibold text-content-muted">
-                On-chain
-              </p>
+              <p className="mb-1 text-xs font-semibold text-content-muted">On-chain</p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 {job.onChain.vault && (
                   <>
                     <dt className="font-medium text-content-muted">Vault</dt>
-                    <dd className="break-all font-mono text-content">
-                      {job.onChain.vault}
-                    </dd>
+                    <dd className="break-all font-mono text-content">{job.onChain.vault}</dd>
                   </>
                 )}
 
                 {job.onChain.jobPdaCommit && (
                   <>
-                    <dt className="font-medium text-content-muted">
-                      Job PDA Commit
-                    </dt>
-                    <dd className="break-all font-mono text-content">
-                      {job.onChain.jobPdaCommit}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Job PDA Commit</dt>
+                    <dd className="break-all font-mono text-content">{job.onChain.jobPdaCommit}</dd>
                   </>
                 )}
 
                 {job.onChain.fundingTxSig && (
                   <>
-                    <dt className="font-medium text-content-muted">
-                      Funding Tx
-                    </dt>
+                    <dt className="font-medium text-content-muted">Funding Tx</dt>
                     <dd className="break-all font-mono text-content">
                       <a
-                        href={explorerTxUrl(
-                          job.onChain.fundingTxSig,
-                          "solana-devnet",
-                        )}
+                        href={explorerTxUrl(job.onChain.fundingTxSig, 'solana-devnet')}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-                      >
+                        className="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">
                         {job.onChain.fundingTxSig}
                       </a>
                     </dd>
@@ -984,12 +864,8 @@ function JobRow({
           {myAgentId ? (
             <div className="mt-4 flex flex-wrap gap-2">
               {/* Candidate actions: Apply (non-client, OPEN jobs) */}
-              {!isClient && job.status === "OPEN" && (
-                <Button
-                  type="button"
-                  onClick={() => onApply(job.jobId)}
-                  disabled={mutating}
-                >
+              {!isClient && job.status === 'OPEN' && (
+                <Button type="button" onClick={() => onApply(job.jobId)} disabled={mutating}>
                   Apply
                 </Button>
               )}
@@ -997,39 +873,32 @@ function JobRow({
               {/* Client actions */}
               {isClient && (
                 <>
-                  {job.status === "OPEN" && (
-                    <Button
-                      type="button"
-                      onClick={() => onCancel(job.jobId)}
-                      disabled={mutating}
-                    >
+                  {job.status === 'OPEN' && (
+                    <Button type="button" onClick={() => onCancel(job.jobId)} disabled={mutating}>
                       Cancel Job
                     </Button>
                   )}
-                  {(job.status === "OPEN" || job.status === "IN_PROGRESS") && (
+                  {(job.status === 'OPEN' || job.status === 'IN_PROGRESS') && (
                     <Button
                       type="button"
                       onClick={() => onViewProposals(job.jobId)}
-                      disabled={mutating}
-                    >
+                      disabled={mutating}>
                       View Proposals
                     </Button>
                   )}
-                  {job.status === "IN_PROGRESS" && !job.dispute && (
+                  {job.status === 'IN_PROGRESS' && !job.dispute && (
                     <Button
                       type="button"
                       onClick={() => onOpenDispute(job.jobId)}
-                      disabled={mutating}
-                    >
+                      disabled={mutating}>
                       Open Dispute
                     </Button>
                   )}
-                  {job.status === "DISPUTED" && (
+                  {job.status === 'DISPUTED' && (
                     <Button
                       type="button"
                       onClick={() => onAdjudicate(job.jobId)}
-                      disabled={mutating}
-                    >
+                      disabled={mutating}>
                       Adjudicate
                     </Button>
                   )}
@@ -1045,22 +914,17 @@ function JobRow({
           {/* Inline proposals panel */}
           {showingProposals && (
             <div className="mt-4">
-              <p className="mb-2 text-xs font-semibold text-content-secondary">
-                Proposals
-              </p>
+              <p className="mb-2 text-xs font-semibold text-content-secondary">Proposals</p>
               {proposalsLoading ? (
-                <p className="text-xs text-content-faint animate-pulse">
-                  Loading proposals…
-                </p>
+                <p className="text-xs text-content-faint animate-pulse">Loading proposals…</p>
               ) : proposals.length === 0 ? (
                 <p className="text-xs text-content-faint">No proposals yet.</p>
               ) : (
                 <div className="space-y-2">
-                  {proposals.map((p) => (
+                  {proposals.map(p => (
                     <div
                       key={p.proposalId}
-                      className="rounded border border-line bg-surface p-2 text-xs"
-                    >
+                      className="rounded border border-line bg-surface p-2 text-xs">
                       <div className="mb-1 flex items-center gap-2">
                         <span className="font-mono text-content-secondary">
                           {p.candidate.slice(0, 8)}…
@@ -1069,36 +933,29 @@ function JobRow({
                           {p.status}
                         </span>
                         {p.bidAmount && (
-                          <span className="font-medium text-content">
-                            {p.bidAmount}
-                          </span>
+                          <span className="font-medium text-content">{p.bidAmount}</span>
                         )}
                       </div>
                       {p.coverLetter && (
-                        <p className="mb-1 text-content-secondary line-clamp-2">
-                          {p.coverLetter}
-                        </p>
+                        <p className="mb-1 text-content-secondary line-clamp-2">{p.coverLetter}</p>
                       )}
                       <div className="flex gap-1">
                         <Button
                           type="button"
                           onClick={() => onShortlist(job.jobId, p.proposalId)}
-                          disabled={mutating}
-                        >
+                          disabled={mutating}>
                           Shortlist
                         </Button>
                         <Button
                           type="button"
                           onClick={() => onSelect(job.jobId, p.proposalId)}
-                          disabled={mutating}
-                        >
+                          disabled={mutating}>
                           Select
                         </Button>
                         <Button
                           type="button"
                           onClick={() => onWithdraw(job.jobId, p.proposalId)}
-                          disabled={mutating}
-                        >
+                          disabled={mutating}>
                           Withdraw
                         </Button>
                       </div>
@@ -1117,14 +974,12 @@ function JobRow({
 // ── JobsSection (main export) ─────────────────────────────────────────────────
 
 export default function JobsSection() {
-  const [jobsState, setJobsState] = useState<JobsState>({ status: "loading" });
+  const [jobsState, setJobsState] = useState<JobsState>({ status: 'loading' });
   const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
   const [showPostJob, setShowPostJob] = useState(false);
   const [applyingJobId, setApplyingJobId] = useState<string | null>(null);
   const [disputeJobId, setDisputeJobId] = useState<string | null>(null);
-  const [proposalsForJobId, setProposalsForJobId] = useState<string | null>(
-    null,
-  );
+  const [proposalsForJobId, setProposalsForJobId] = useState<string | null>(null);
   const [proposals, setProposals] = useState<Proposal[]>([]);
   const [proposalsLoading, setProposalsLoading] = useState(false);
   const [mutating, setMutating] = useState(false);
@@ -1133,32 +988,32 @@ export default function JobsSection() {
 
   // ── Fetch jobs ─────────────────────────────────────────────────────────────
   const refetchJobs = useCallback(() => {
-    setJobsState({ status: "loading" });
+    setJobsState({ status: 'loading' });
     void apiClient.graphql
       .jobs({ limit: 50 })
-      .then((result) => {
+      .then(result => {
         const jobs = Array.isArray(result?.jobs) ? result.jobs : [];
-        setJobsState({ status: "ok", jobs });
+        setJobsState({ status: 'ok', jobs });
       })
       .catch((err: unknown) => {
-        setJobsState({ status: "error", message: String(err) });
+        setJobsState({ status: 'error', message: String(err) });
       });
   }, []);
 
   useEffect(() => {
     let cancelled = false;
-    setJobsState({ status: "loading" });
+    setJobsState({ status: 'loading' });
 
     void apiClient.graphql
       .jobs({ limit: 50 })
-      .then((result) => {
+      .then(result => {
         if (cancelled) return;
         const jobs = Array.isArray(result?.jobs) ? result.jobs : [];
-        setJobsState({ status: "ok", jobs });
+        setJobsState({ status: 'ok', jobs });
       })
       .catch((err: unknown) => {
         if (cancelled) return;
-        setJobsState({ status: "error", message: String(err) });
+        setJobsState({ status: 'error', message: String(err) });
       });
 
     return () => {
@@ -1175,12 +1030,12 @@ export default function JobsSection() {
         await apiClient.jobsWrite.cancel(jobId);
         refetchJobs();
       } catch (err) {
-        console.error("[JobsSection] cancel failed:", err);
+        console.error('[JobsSection] cancel failed:', err);
       } finally {
         setMutating(false);
       }
     },
-    [refetchJobs],
+    [refetchJobs]
   );
 
   const handleViewProposals = useCallback(async (jobId: string) => {
@@ -1190,7 +1045,7 @@ export default function JobsSection() {
       const result = await apiClient.jobsWrite.listProposals(jobId);
       setProposals(Array.isArray(result?.proposals) ? result.proposals : []);
     } catch (err) {
-      console.error("[JobsSection] listProposals failed:", err);
+      console.error('[JobsSection] listProposals failed:', err);
       setProposals([]);
     } finally {
       setProposalsLoading(false);
@@ -1204,32 +1059,29 @@ export default function JobsSection() {
         await apiClient.jobsWrite.shortlistProposal(jobId, proposalId);
         await handleViewProposals(jobId);
       } catch (err) {
-        console.error("[JobsSection] shortlist failed:", err);
+        console.error('[JobsSection] shortlist failed:', err);
       } finally {
         setMutating(false);
       }
     },
-    [handleViewProposals],
+    [handleViewProposals]
   );
 
   const handleSelect = useCallback(
     async (jobId: string, proposalId: string) => {
-      if (!window.confirm("Select this candidate and initiate escrow?")) return;
+      if (!window.confirm('Select this candidate and initiate escrow?')) return;
       setMutating(true);
       try {
         const result = await apiClient.jobsWrite.select(jobId, proposalId);
-        console.debug(
-          "[JobsSection] selected candidate, escrow:",
-          result.contractEscrowId,
-        );
+        console.debug('[JobsSection] selected candidate, escrow:', result.contractEscrowId);
         refetchJobs();
       } catch (err) {
-        console.error("[JobsSection] select failed:", err);
+        console.error('[JobsSection] select failed:', err);
       } finally {
         setMutating(false);
       }
     },
-    [refetchJobs],
+    [refetchJobs]
   );
 
   const handleWithdraw = useCallback(
@@ -1241,12 +1093,12 @@ export default function JobsSection() {
           await handleViewProposals(jobId);
         }
       } catch (err) {
-        console.error("[JobsSection] withdraw failed:", err);
+        console.error('[JobsSection] withdraw failed:', err);
       } finally {
         setMutating(false);
       }
     },
-    [proposalsForJobId, handleViewProposals],
+    [proposalsForJobId, handleViewProposals]
   );
 
   const handleAdjudicate = useCallback(
@@ -1256,25 +1108,25 @@ export default function JobsSection() {
         await apiClient.jobsWrite.adjudicateDispute(jobId);
         refetchJobs();
       } catch (err) {
-        console.error("[JobsSection] adjudicate failed:", err);
+        console.error('[JobsSection] adjudicate failed:', err);
       } finally {
         setMutating(false);
       }
     },
-    [refetchJobs],
+    [refetchJobs]
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────
 
   let body: React.ReactNode;
 
-  if (jobsState.status === "loading") {
+  if (jobsState.status === 'loading') {
     body = (
       <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading jobs...</span>
       </div>
     );
-  } else if (jobsState.status === "error") {
+  } else if (jobsState.status === 'error') {
     body = (
       <StatusBlock
         tone="text-red-600 dark:text-red-400"
@@ -1293,26 +1145,22 @@ export default function JobsSection() {
   } else {
     body = (
       <div className="rounded-lg border border-line bg-surface">
-        {jobsState.jobs.map((job) => (
+        {jobsState.jobs.map(job => (
           <JobRow
             key={job.jobId}
             job={job}
             expanded={expandedJobId === job.jobId}
-            onToggle={() =>
-              setExpandedJobId((prev) =>
-                prev === job.jobId ? null : job.jobId,
-              )
-            }
+            onToggle={() => setExpandedJobId(prev => (prev === job.jobId ? null : job.jobId))}
             myAgentId={myAgentId}
-            onApply={(jobId) => setApplyingJobId(jobId)}
-            onCancel={(jobId) => {
+            onApply={jobId => setApplyingJobId(jobId)}
+            onCancel={jobId => {
               void handleCancel(jobId);
             }}
-            onViewProposals={(jobId) => {
+            onViewProposals={jobId => {
               void handleViewProposals(jobId);
             }}
-            onOpenDispute={(jobId) => setDisputeJobId(jobId)}
-            onAdjudicate={(jobId) => {
+            onOpenDispute={jobId => setDisputeJobId(jobId)}
+            onAdjudicate={jobId => {
               void handleAdjudicate(jobId);
             }}
             proposalsForJobId={proposalsForJobId}
@@ -1347,10 +1195,7 @@ export default function JobsSection() {
 
       {/* Modals */}
       {showPostJob && (
-        <PostJobModal
-          onClose={() => setShowPostJob(false)}
-          onCreated={refetchJobs}
-        />
+        <PostJobModal onClose={() => setShowPostJob(false)} onCreated={refetchJobs} />
       )}
       {applyingJobId && (
         <ApplyModal
diff --git a/app/src/agentworld/pages/LedgerSection.tsx b/app/src/agentworld/pages/LedgerSection.tsx
index 47f55d756b..ed879d671b 100644
--- a/app/src/agentworld/pages/LedgerSection.tsx
+++ b/app/src/agentworld/pages/LedgerSection.tsx
@@ -9,26 +9,27 @@
  * Pattern mirrors FeedSection: useState + useEffect fetch, PanelScaffold
  * wrapper, StatusBlock for loading/error/empty states.
  */
-import { useEffect, useState } from "react";
-
-import PanelScaffold from "../../components/layout/PanelScaffold";
-import { type GqlLedgerTransaction } from "../../lib/agentworld/invokeApiClient";
-import { apiClient } from "../AgentWorldShell";
-import { decimalsForAsset, resolveAssetSymbol } from "../assets";
-import { formatUnits, friendlyNetwork } from "../components/X402ConfirmDialog";
-import { explorerTxUrl } from "../hooks/useX402Buy";
-import { relativeTime } from "../utils/relativeTime";
+import { useEffect, useState } from 'react';
+
+import PanelScaffold from '../../components/layout/PanelScaffold';
+import { type GqlLedgerTransaction } from '../../lib/agentworld/invokeApiClient';
+import { apiClient } from '../AgentWorldShell';
+import { decimalsForAsset, resolveAssetSymbol } from '../assets';
+import { formatUnits, friendlyNetwork } from '../components/X402ConfirmDialog';
+import { explorerTxUrl } from '../hooks/useX402Buy';
+import { relativeTime } from '../utils/relativeTime';
+
 // ── State types ───────────────────────────────────────────────────────────────
 
 type LedgerState =
-  | { status: "loading" }
-  | { status: "error"; message: string }
-  | { status: "ok"; transactions: GqlLedgerTransaction[] };
+  | { status: 'loading' }
+  | { status: 'error'; message: string }
+  | { status: 'ok'; transactions: GqlLedgerTransaction[] };
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 export function abbreviateAddress(addr: string | undefined): string {
-  if (!addr) return "—";
+  if (!addr) return '—';
   if (addr.length <= 12) return addr;
   return `${addr.slice(0, 4)}…${addr.slice(-4)}`;
 }
@@ -39,12 +40,12 @@ export function abbreviateAddress(addr: string | undefined): string {
  * "1000000" becomes "1,000,000"). Non-numeric strings pass through unchanged.
  */
 export function formatAmount(amount: string | undefined): string {
-  if (!amount) return "—";
+  if (!amount) return '—';
   if (!Number.isFinite(Number(amount))) return amount;
-  const negative = amount.startsWith("-");
+  const negative = amount.startsWith('-');
   const body = negative ? amount.slice(1) : amount;
-  const [intPart, fracPart] = body.split(".");
-  const grouped = Number(intPart).toLocaleString("en-US");
+  const [intPart, fracPart] = body.split('.');
+  const grouped = Number(intPart).toLocaleString('en-US');
   const out = fracPart != null ? `${grouped}.${fracPart}` : grouped;
   return negative ? `-${out}` : out;
 }
@@ -55,10 +56,7 @@ export function formatAmount(amount: string | undefined): string {
  * otherwise every value reads ~1,000,000× too large. `asset` may be a symbol or
  * a mint address; {@link decimalsForAsset} resolves either.
  */
-export function formatLedgerAmount(
-  amount: string | undefined,
-  asset: string | undefined,
-): string {
+export function formatLedgerAmount(amount: string | undefined, asset: string | undefined): string {
   if (!amount) return formatAmount(amount);
   // `formatUnits` assumes an integer base-unit string; if the amount is already
   // decimal/non-integer, pass it straight to grouping instead of mis-scaling it.
@@ -69,15 +67,7 @@ export function formatLedgerAmount(
 }
 
 /** Centered status message for loading / error / info states. */
-function StatusBlock({
-  tone,
-  title,
-  body,
-}: {
-  tone: string;
-  title: string;
-  body?: string;
-}) {
+function StatusBlock({ tone, title, body }: { tone: string; title: string; body?: string }) {
   return (
     <div className="flex h-64 flex-col items-center justify-center gap-2 text-center">
       <p className={`text-base font-medium ${tone}`}>{title}</p>
@@ -90,17 +80,15 @@ function StatusBlock({
 
 export function StatusBadge({ status }: { status: string }) {
   const color =
-    status === "SETTLED"
-      ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
-      : status === "PENDING"
-        ? "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
-        : status === "FAILED"
-          ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
-          : "bg-surface-subtle text-content-secondary";
+    status === 'SETTLED'
+      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+      : status === 'PENDING'
+        ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+        : status === 'FAILED'
+          ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+          : 'bg-surface-subtle text-content-secondary';
   return (
-    <span
-      className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}
-    >
+    <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${color}`}>
       {status}
     </span>
   );
@@ -110,17 +98,16 @@ export function StatusBadge({ status }: { status: string }) {
 
 function TypeBadge({ type }: { type: string }) {
   const color =
-    type === "REGISTRATION"
-      ? "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400"
-      : type === "SALE"
-        ? "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
-        : type === "FEE"
-          ? "bg-surface-subtle text-content-secondary"
-          : "bg-surface-subtle text-content-secondary";
+    type === 'REGISTRATION'
+      ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
+      : type === 'SALE'
+        ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
+        : type === 'FEE'
+          ? 'bg-surface-subtle text-content-secondary'
+          : 'bg-surface-subtle text-content-secondary';
   return (
     <span
-      className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${color}`}
-    >
+      className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${color}`}>
       {type}
     </span>
   );
@@ -130,22 +117,16 @@ function TypeBadge({ type }: { type: string }) {
 
 function TypeIcon({ type }: { type: string }) {
   const color =
-    type === "REGISTRATION"
-      ? "bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
-      : type === "SALE"
-        ? "bg-purple-50 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
-        : "bg-surface-subtle text-content-muted";
+    type === 'REGISTRATION'
+      ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400'
+      : type === 'SALE'
+        ? 'bg-purple-50 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400'
+        : 'bg-surface-subtle text-content-muted';
   return (
     <div
       className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full ${color}`}
-      aria-hidden="true"
-    >
-      <svg
-        className="h-4 w-4"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
+      aria-hidden="true">
+      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -174,8 +155,7 @@ function TransactionRow({
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50"
-      >
+        className="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted dark:hover:bg-surface-muted/50">
         <TypeIcon type={tx.type} />
 
         {/* Content */}
@@ -184,7 +164,7 @@ function TransactionRow({
           <div className="flex items-center gap-2">
             <span className="text-sm font-semibold text-content">
               {formatLedgerAmount(tx.amount, tx.asset)}
-              {tx.asset ? ` ${resolveAssetSymbol(tx.asset)}` : ""}
+              {tx.asset ? ` ${resolveAssetSymbol(tx.asset)}` : ''}
             </span>
             <TypeBadge type={tx.type} />
             <StatusBadge status={tx.status} />
@@ -197,8 +177,7 @@ function TransactionRow({
               className="h-3 w-3 shrink-0 text-content-faint"
               fill="none"
               stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
+              viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -224,17 +203,15 @@ function TransactionRow({
                 target="_blank"
                 rel="noopener noreferrer"
                 className="whitespace-nowrap text-xs font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-                onClick={(e) => e.stopPropagation()}
-              >
+                onClick={e => e.stopPropagation()}>
                 View on chain
               </a>
             )}
             <svg
-              className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? "rotate-180" : ""}`}
+              className={`h-4 w-4 shrink-0 text-content-faint transition-transform ${expanded ? 'rotate-180' : ''}`}
               fill="none"
               stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
+              viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -260,13 +237,11 @@ function TransactionRow({
 
             {/* Full From */}
             <dt className="font-medium text-content-muted">From</dt>
-            <dd className="break-all font-mono text-content">
-              {tx.from ?? "-"}
-            </dd>
+            <dd className="break-all font-mono text-content">{tx.from ?? '-'}</dd>
 
             {/* Full To */}
             <dt className="font-medium text-content-muted">To</dt>
-            <dd className="break-all font-mono text-content">{tx.to ?? "-"}</dd>
+            <dd className="break-all font-mono text-content">{tx.to ?? '-'}</dd>
 
             {/* Reference */}
             {tx.reference && (
@@ -277,19 +252,13 @@ function TransactionRow({
                 {tx.reference.id && (
                   <>
                     <dt className="font-medium text-content-muted">Ref ID</dt>
-                    <dd className="break-all font-mono text-content">
-                      {tx.reference.id}
-                    </dd>
+                    <dd className="break-all font-mono text-content">{tx.reference.id}</dd>
                   </>
                 )}
                 {tx.reference.parentTxId && (
                   <>
-                    <dt className="font-medium text-content-muted">
-                      Parent Tx
-                    </dt>
-                    <dd className="break-all font-mono text-content">
-                      {tx.reference.parentTxId}
-                    </dd>
+                    <dt className="font-medium text-content-muted">Parent Tx</dt>
+                    <dd className="break-all font-mono text-content">{tx.reference.parentTxId}</dd>
                   </>
                 )}
                 {tx.reference.rate && (
@@ -305,20 +274,15 @@ function TransactionRow({
           {/* Metadata key-value table */}
           {tx.metadata && Object.keys(tx.metadata).length > 0 && (
             <div className="mt-2">
-              <p className="mb-1 text-xs font-medium text-content-muted">
-                Metadata
-              </p>
+              <p className="mb-1 text-xs font-medium text-content-muted">Metadata</p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 {Object.entries(tx.metadata).map(([key, val]) => (
                   <>
-                    <dt
-                      key={`k-${key}`}
-                      className="font-medium text-content-muted"
-                    >
+                    <dt key={`k-${key}`} className="font-medium text-content-muted">
                       {key}
                     </dt>
                     <dd key={`v-${key}`} className="break-all text-content">
-                      {typeof val === "string" ? val : JSON.stringify(val)}
+                      {typeof val === 'string' ? val : JSON.stringify(val)}
                     </dd>
                   </>
                 ))}
@@ -334,29 +298,25 @@ function TransactionRow({
 // ── LedgerSection (main export) ───────────────────────────────────────────────
 
 export default function LedgerSection() {
-  const [ledgerState, setLedgerState] = useState<LedgerState>({
-    status: "loading",
-  });
+  const [ledgerState, setLedgerState] = useState<LedgerState>({ status: 'loading' });
   const [expandedTxId, setExpandedTxId] = useState<string | null>(null);
 
   // ── Fetch ledger transactions ──────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false;
-    setLedgerState({ status: "loading" });
+    setLedgerState({ status: 'loading' });
 
     // TODO(phase-2-follow-up): implement pagination with offset or cursor.
     void apiClient.graphql
       .ledgerTransactions({ limit: 50 })
-      .then((result) => {
+      .then(result => {
         if (cancelled) return;
-        const transactions = Array.isArray(result?.transactions)
-          ? result.transactions
-          : [];
-        setLedgerState({ status: "ok", transactions });
+        const transactions = Array.isArray(result?.transactions) ? result.transactions : [];
+        setLedgerState({ status: 'ok', transactions });
       })
       .catch((err: unknown) => {
         if (cancelled) return;
-        setLedgerState({ status: "error", message: String(err) });
+        setLedgerState({ status: 'error', message: String(err) });
       });
 
     return () => {
@@ -368,13 +328,13 @@ export default function LedgerSection() {
 
   let body: React.ReactNode;
 
-  if (ledgerState.status === "loading") {
+  if (ledgerState.status === 'loading') {
     body = (
       <div className="flex h-64 items-center justify-center text-content-faint">
         <span className="animate-pulse text-sm">Loading ledger…</span>
       </div>
     );
-  } else if (ledgerState.status === "error") {
+  } else if (ledgerState.status === 'error') {
     body = (
       <StatusBlock
         tone="text-red-600 dark:text-red-400"
@@ -393,14 +353,12 @@ export default function LedgerSection() {
   } else {
     body = (
       <div className="rounded-lg border border-line bg-surface">
-        {ledgerState.transactions.map((tx) => (
+        {ledgerState.transactions.map(tx => (
           <TransactionRow
             key={tx.txId}
             tx={tx}
             expanded={expandedTxId === tx.txId}
-            onToggle={() =>
-              setExpandedTxId((prev) => (prev === tx.txId ? null : tx.txId))
-            }
+            onToggle={() => setExpandedTxId(prev => (prev === tx.txId ? null : tx.txId))}
           />
         ))}
       </div>
diff --git a/app/src/agentworld/utils/relativeTime.test.ts b/app/src/agentworld/utils/relativeTime.test.ts
index 1fe1a3199d..29c8287d62 100644
--- a/app/src/agentworld/utils/relativeTime.test.ts
+++ b/app/src/agentworld/utils/relativeTime.test.ts
@@ -1,7 +1,8 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { relativeTime } from "./relativeTime";
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-describe("relativeTime", () => {
+import { relativeTime } from './relativeTime';
+
+describe('relativeTime', () => {
   beforeEach(() => {
     vi.useFakeTimers();
   });
@@ -11,22 +12,22 @@ describe("relativeTime", () => {
   });
 
   it('returns "just now" for under 1 minute ago', () => {
-    vi.setSystemTime(new Date("2025-01-01T00:00:30Z"));
-    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("just now");
+    vi.setSystemTime(new Date('2025-01-01T00:00:30Z'));
+    expect(relativeTime('2025-01-01T00:00:00Z')).toBe('just now');
   });
 
-  it("returns minutes for under 1 hour ago", () => {
-    vi.setSystemTime(new Date("2025-01-01T00:45:00Z"));
-    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("45m ago");
+  it('returns minutes for under 1 hour ago', () => {
+    vi.setSystemTime(new Date('2025-01-01T00:45:00Z'));
+    expect(relativeTime('2025-01-01T00:00:00Z')).toBe('45m ago');
   });
 
-  it("returns hours for under 24 hours ago", () => {
-    vi.setSystemTime(new Date("2025-01-01T05:00:00Z"));
-    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("5h ago");
+  it('returns hours for under 24 hours ago', () => {
+    vi.setSystemTime(new Date('2025-01-01T05:00:00Z'));
+    expect(relativeTime('2025-01-01T00:00:00Z')).toBe('5h ago');
   });
 
-  it("returns days for 24+ hours ago", () => {
-    vi.setSystemTime(new Date("2025-01-04T00:00:00Z"));
-    expect(relativeTime("2025-01-01T00:00:00Z")).toBe("3d ago");
+  it('returns days for 24+ hours ago', () => {
+    vi.setSystemTime(new Date('2025-01-04T00:00:00Z'));
+    expect(relativeTime('2025-01-01T00:00:00Z')).toBe('3d ago');
   });
 });
diff --git a/app/src/agentworld/utils/relativeTime.ts b/app/src/agentworld/utils/relativeTime.ts
index 427fafaa5e..536e3bcac0 100644
--- a/app/src/agentworld/utils/relativeTime.ts
+++ b/app/src/agentworld/utils/relativeTime.ts
@@ -1,7 +1,7 @@
 export function relativeTime(iso: string): string {
   const ms = Date.now() - new Date(iso).getTime();
   const mins = Math.floor(ms / 60000);
-  if (mins < 1) return "just now";
+  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`;

From b5d9408bbdd68c77d5814dfe2a0c8256a8fc52b7 Mon Sep 17 00:00:00 2001
From: astitva <bastitva0@gmail.com>
Date: Fri, 3 Jul 2026 01:47:23 +0530
Subject: [PATCH 3/3] fix: guard invalid date in relativeTime, add Fragment key
 in LedgerSection

---
 app/src/agentworld/pages/LedgerSection.tsx | 12 +++++-------
 app/src/agentworld/utils/relativeTime.ts   |  4 +++-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/src/agentworld/pages/LedgerSection.tsx b/app/src/agentworld/pages/LedgerSection.tsx
index ed879d671b..5672884c2c 100644
--- a/app/src/agentworld/pages/LedgerSection.tsx
+++ b/app/src/agentworld/pages/LedgerSection.tsx
@@ -9,7 +9,7 @@
  * Pattern mirrors FeedSection: useState + useEffect fetch, PanelScaffold
  * wrapper, StatusBlock for loading/error/empty states.
  */
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
 import PanelScaffold from '../../components/layout/PanelScaffold';
 import { type GqlLedgerTransaction } from '../../lib/agentworld/invokeApiClient';
@@ -277,14 +277,12 @@ function TransactionRow({
               <p className="mb-1 text-xs font-medium text-content-muted">Metadata</p>
               <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
                 {Object.entries(tx.metadata).map(([key, val]) => (
-                  <>
-                    <dt key={`k-${key}`} className="font-medium text-content-muted">
-                      {key}
-                    </dt>
-                    <dd key={`v-${key}`} className="break-all text-content">
+                  <Fragment key={key}>
+                    <dt className="font-medium text-content-muted">{key}</dt>
+                    <dd className="break-all text-content">
                       {typeof val === 'string' ? val : JSON.stringify(val)}
                     </dd>
-                  </>
+                  </Fragment>
                 ))}
               </dl>
             </div>
diff --git a/app/src/agentworld/utils/relativeTime.ts b/app/src/agentworld/utils/relativeTime.ts
index 536e3bcac0..c644fb5c3b 100644
--- a/app/src/agentworld/utils/relativeTime.ts
+++ b/app/src/agentworld/utils/relativeTime.ts
@@ -1,5 +1,7 @@
 export function relativeTime(iso: string): string {
-  const ms = Date.now() - new Date(iso).getTime();
+  const date = new Date(iso);
+  if (isNaN(date.getTime())) return 'just now';
+  const ms = Date.now() - date.getTime();
   const mins = Math.floor(ms / 60000);
   if (mins < 1) return 'just now';
   if (mins < 60) return `${mins}m ago`;