fix: reconcile duplicated merge content in TaskCard and socketClient

TaskCard.tsx and socketClient.ts (plus their test files) each contained
two full, unreconciled implementations concatenated together from a
bad merge of three feature branches, breaking tsc/build entirely
(fixes #153).

TaskCard now combines all three shipped behaviors in one component:
- URL-param status/priority filtering (useTaskFilters + TaskFilters)
- Optimistic "verify quality" vote with pending state and
  rollback-on-failure toast (submitVote)
- Background on-chain-event auto-verify with a completion pulse
  animation (useTaskChainEvents + useChainState forceSync + useEvents)
- Completed tasks still sort to the bottom (statusSortWeight)

The superseded synchronous "instant complete on click" action
(handleVote) from the older single-guardian design is dropped in
favor of the richer optimistic multi-guardian vote flow; the two
tests that only exercised that removed action were removed along
with it, and one filtering test's render call was aligned to use the
same ToastProvider wrapper as the rest of the suite (TaskCard now
unconditionally calls useToast()).

socketClient.ts is reduced to one coherent module-level singleton
(previously connectSocket, notifyStatus, updateAuthToken,
onSocketStatus, emitSocketEvent, and resetSocketClientForTests were
each declared twice with conflicting signatures). updateAuthToken now
unconditionally reconnects instead of gating on socket.connected, to
actually satisfy its own test.

useSocketIO.ts had the same duplicate-import and duplicate-statement
symptoms; deduplicated with no behavior change.

Author: N-thnI

src/components/TaskCard.tsx

@@ -1,18 +1,13 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { CheckCircle2, Clock, AlertCircle, ShieldCheck } from 'lucide-react';
+import { CheckCircle2, Clock, AlertCircle, Shield, ShieldCheck, Loader2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useEvents } from '@/hooks/useEvents';
 import { useTaskChainEvents } from '@/hooks/useTaskChainEvents';
 import { useChainState } from '@/hooks/useChainState';
-import { useState, useCallback } from 'react';
-import { CheckCircle2, Clock, AlertCircle, ShieldCheck, Loader2 } from 'lucide-react';
-import { useMemo, useState, useCallback } from 'react';
-import { CheckCircle2, Clock, AlertCircle, Shield, Loader2 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import TaskFilters from './TaskFilters';
 import { useTaskFilters } from '@/hooks/useTaskFilters';
+import TaskFilters from './TaskFilters';
 import { useToast } from '@/components/Toast';
 
 export interface TaskCardTask {
@@ -90,31 +85,6 @@ function statusSortWeight(task: TaskCardTask): number {
   return 2;
 }
 
-export default function TaskCard({
-  tasks: initialTasks = mockTasks,
-  pollIntervalMs,
-}: TaskCardProps) {
-  const { t } = useTranslation();
-  const { emit } = useEvents();
-  const { forceSync } = useChainState({ cacheKey: 'tasks' });
-  const { lastEvent } = useTaskChainEvents({ intervalMs: pollIntervalMs });
-
-  const [taskList, setTaskList] = useState<TaskCardTask[]>(initialTasks);
-  const [completedIds, setCompletedIds] = useState<Set<string>>(
-    () => new Set(initialTasks.filter((t) => t.is_done || t.status === 'completed').map((t) => t.id)),
-  );
-  const [animatingId, setAnimatingId] = useState<string | null>(null);
-
-  const sortedTasks = useMemo(
-    () => [...taskList].sort((a, b) => statusSortWeight(a) - statusSortWeight(b)),
-    [taskList],
-  );
-
-  useEffect(() => {
-    if (initialTasks !== mockTasks) {
-      setTaskList(initialTasks);
-    }
-  }, [initialTasks]);
 function delay(ms: number): Promise<void> {
   return new Promise((r) => setTimeout(r, ms));
 }
@@ -134,18 +104,67 @@ export function matchesFilter(task: TaskCardTask, status: string, priority: stri
   return true;
 }
 
-export default function TaskCard({ tasks = mockTasks, submitVote = defaultSubmitVote }: TaskCardProps) {
+export default function TaskCard({
+  tasks: initialTasks = mockTasks,
+  pollIntervalMs,
+  submitVote = defaultSubmitVote,
+}: TaskCardProps) {
   const { t } = useTranslation();
+  const { emit } = useEvents();
+  const { forceSync } = useChainState({ cacheKey: 'tasks' });
+  const { lastEvent } = useTaskChainEvents({ intervalMs: pollIntervalMs });
   const { filters } = useTaskFilters();
   const { showToast } = useToast();
 
+  const [taskList, setTaskList] = useState<TaskCardTask[]>(initialTasks);
+  const [animatingId, setAnimatingId] = useState<string | null>(null);
   const [pendingVotes, setPendingVotes] = useState<Record<string, boolean>>({});
   const [optimisticVotes, setOptimisticVotes] = useState<Record<string, number>>({});
   const [optimisticStatus, setOptimisticStatus] = useState<Record<string, TaskCardTask['status']>>({});
 
+  useEffect(() => {
+    if (initialTasks !== mockTasks) {
+      setTaskList(initialTasks);
+    }
+  }, [initialTasks]);
+
+  // Auto-verify: when the chain-event poller reports a task was verified
+  // on-chain, mark it completed locally and pulse a completion animation.
+  useEffect(() => {
+    if (!lastEvent) return;
+    const { taskId, taskTitle } = lastEvent;
+
+    setTaskList((prev) => {
+      const existing = prev.find((task) => task.id === taskId);
+      if (!existing || existing.is_done || existing.status === 'completed') return prev;
+      return prev.map((task) =>
+        task.id === taskId ? { ...task, status: 'completed', is_done: true } : task,
+      );
+    });
+
+    setAnimatingId(taskId);
+    const timer = setTimeout(() => setAnimatingId(null), 600);
+
+    emit({
+      type: 'task_verified',
+      actor: 'system',
+      resource: taskTitle,
+      resourceId: taskId,
+      metadata: { taskId },
+    });
+    forceSync(['tasks', `task:${taskId}`]);
+
+    return () => clearTimeout(timer);
+  }, [lastEvent, emit, forceSync]);
+
   const filteredTasks = useMemo(
-    () => tasks.filter((task) => matchesFilter(task, filters.status, filters.priority)),
-    [tasks, filters.status, filters.priority],
+    () => taskList.filter((task) => matchesFilter(task, filters.status, filters.priority)),
+    [taskList, filters.status, filters.priority],
+  );
+
+  const sortedTasks = useMemo(
+    () => [...filteredTasks].sort((a, b) => statusSortWeight(a) - statusSortWeight(b)),
+    [filteredTasks],
   );
 
   const handleVerify = useCallback(
@@ -154,7 +173,6 @@ export default function TaskCard({ tasks = mockTasks, submitVote = defaultSubmit
       if (pendingVotes[taskId]) return;
 
       const prevStatus = optimisticStatus[taskId] ?? task.status;
-      const prevVotes = task.votes ?? 0;
       const optimisticDelta = optimisticVotes[taskId] ?? 0;
 
       setPendingVotes((p) => ({ ...p, [taskId]: true }));
@@ -188,47 +206,6 @@ export default function TaskCard({ tasks = mockTasks, submitVote = defaultSubmit
     [pendingVotes, optimisticVotes, optimisticStatus, submitVote, showToast, t],
   );
 
-  useEffect(() => {
-    if (!lastEvent) return;
-    const { taskId } = lastEvent;
-    setTaskList((prev) => {
-      const existing = prev.find((t) => t.id === taskId);
-      if (!existing || existing.is_done || existing.status === 'completed') return prev;
-      return prev.map((t) =>
-        t.id === taskId ? { ...t, status: 'completed', is_done: true } : t,
-      );
-    });
-    setCompletedIds((prev) => new Set(prev).add(taskId));
-    setAnimatingId(taskId);
-    const timer = setTimeout(() => setAnimatingId(null), 600);
-    return () => clearTimeout(timer);
-  }, [lastEvent]);
-
-  const handleVote = useCallback(
-    (task: TaskCardTask) => {
-      const title = task.title ?? t(task.titleKey ?? '');
-      setTaskList((prev) =>
-        prev.map((t) =>
-          t.id === task.id ? { ...t, status: 'completed', is_done: true } : t,
-        ),
-      );
-      setCompletedIds((prev) => new Set(prev).add(task.id));
-      setAnimatingId(task.id);
-      setTimeout(() => setAnimatingId(null), 600);
-
-      emit({
-        type: 'task_verified',
-        actor: 'guardian',
-        resource: title,
-        resourceId: task.id,
-        metadata: { taskId: task.id, reward: task.reward },
-      });
-
-      forceSync(['tasks', `task:${task.id}`]);
-    },
-    [emit, forceSync, t],
-  );
-
   const getStatusIcon = (status: TaskCardTask['status'], isAnimating: boolean) => {
     if (isAnimating) {
       return <ShieldCheck className="w-5 h-5 text-emerald-600 dark:text-emerald-400 animate-bounce" aria-hidden="true" />;
@@ -270,36 +247,6 @@ export default function TaskCard({ tasks = mockTasks, submitVote = defaultSubmit
         <h2 className="text-xl font-semibold text-slate-900 dark:text-white">{t('tasks.heading')}</h2>
       </div>
 
-      <div className="space-y-3">
-        {sortedTasks.map((task) => {
-          const status = task.is_done ? 'completed' : task.status;
-          const title = task.title ?? t(task.titleKey ?? '');
-          const canVote = !task.is_done && status !== 'completed';
-          const isAnimating = animatingId === task.id;
-        {tasks.map((task) => {
-          const baseStatus = task.is_done ? 'completed' : task.status;
-          const status = optimisticStatus[task.id] ?? baseStatus;
-          const title = task.title ?? t(task.titleKey ?? '');
-          const isPending = pendingVotes[task.id] ?? false;
-          const canVote = !task.is_done && status !== 'completed' && !isPending;
-          const voteCount = (task.votes ?? 0) + (optimisticVotes[task.id] ?? 0);
-
-          return (
-            <div
-              key={task.id}
-              className={`bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-4 shadow-sm transition-all duration-500 ${
-                isAnimating
-                  ? 'border-emerald-400 dark:border-emerald-500 scale-[1.02] animate-in zoom-in-95 fade-in'
-                  : 'hover:border-slate-300 dark:hover:border-slate-600'
-              }`}
-            >
-              <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
-                <div className="flex items-start gap-3 flex-1 w-full">
-                  {getStatusIcon(status, isAnimating)}
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-medium text-slate-900 dark:text-white">{title}</h3>
-                      {getPriorityBadge(task.priority)}
       <TaskFilters />
 
       {filteredTasks.length === 0 ? (
@@ -308,22 +255,27 @@ export default function TaskCard({ tasks = mockTasks, submitVote = defaultSubmit
         </p>
       ) : (
         <div className="space-y-3">
-          {filteredTasks.map((task) => {
+          {sortedTasks.map((task) => {
             const baseStatus = task.is_done ? 'completed' : task.status;
             const status = optimisticStatus[task.id] ?? baseStatus;
             const title = task.title ?? t(task.titleKey ?? '');
             const isPending = pendingVotes[task.id] ?? false;
             const canVote = !task.is_done && status !== 'completed' && !isPending;
             const voteCount = (task.votes ?? 0) + (optimisticVotes[task.id] ?? 0);
+            const isAnimating = animatingId === task.id;
 
             return (
               <div
                 key={task.id}
-                className="bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-4 hover:border-slate-300 dark:hover:border-slate-600 transition-colors shadow-sm"
+                className={`bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-4 shadow-sm transition-all duration-500 ${
+                  isAnimating
+                    ? 'border-emerald-400 dark:border-emerald-500 scale-[1.02] animate-in zoom-in-95 fade-in'
+                    : 'hover:border-slate-300 dark:hover:border-slate-600'
+                }`}
               >
                 <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
                   <div className="flex items-start gap-3 flex-1 w-full">
-                    {getStatusIcon(status)}
+                    {getStatusIcon(status, isAnimating)}
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
                         <h3 className="font-medium text-slate-900 dark:text-white">{title}</h3>
@@ -371,31 +323,6 @@ export default function TaskCard({ tasks = mockTasks, submitVote = defaultSubmit
                     ) : null}
                   </div>
                 </div>
-                <div className="text-right space-y-2">
-                  <span className="block text-lg font-semibold text-indigo-600 dark:text-indigo-400">{task.reward}</span>
-                  {isPending ? (
-                    <button
-                      type="button"
-                      disabled
-                      className="rounded-lg bg-slate-100 dark:bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-600 cursor-wait transition-colors flex items-center gap-2"
-                    >
-                      <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
-                      {t('tasks.verify.pending')}
-                    </button>
-                  ) : canVote ? (
-                    <button
-                      type="button"
-                      onClick={() => handleVote(task)}
-                      className="rounded-lg bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900 active:scale-95"
-                      aria-label={`Vote for ${title}`}
-                      onClick={() => handleVerify(task)}
-                      className="rounded-lg bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900"
-                      aria-label={`Verify quality for ${title}`}
-                    >
-                      {t('tasks.verify.action')}
-                    </button>
-                  ) : null}
-                </div>
               </div>
             );
           })}

src/components/__tests__/TaskCard.test.tsx

@@ -1,12 +1,7 @@
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import TaskCard, { type TaskCardTask } from '@/components/TaskCard';
-import { resetChainStateForTests } from '@/hooks/useChainState';
-import { render, screen, fireEvent, act } from '@testing-library/react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 
 import TaskCard, { matchesFilter, type TaskCardTask } from '@/components/TaskCard';
+import { resetChainStateForTests } from '@/hooks/useChainState';
 import { ToastProvider } from '@/components/Toast';
 
 let _searchParams = new URLSearchParams();
@@ -74,6 +69,8 @@ describe('matchesFilter', () => {
 describe('TaskCard', () => {
   afterEach(() => {
     act(() => resetChainStateForTests());
+  });
+
   beforeEach(() => {
     _searchParams = new URLSearchParams();
   });
@@ -84,8 +81,7 @@ describe('TaskCard', () => {
     expect(screen.getByText('Review validator evidence')).toBeInTheDocument();
     expect(screen.getByText('25 VERO')).toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: /vote for review validator evidence/i }),
-      screen.getByRole('button', { name: /verify quality for review validator evidence/i })
+      screen.getByRole('button', { name: /verify quality for review validator evidence/i }),
     ).toBeInTheDocument();
   });
 
@@ -178,20 +174,6 @@ describe('TaskCard', () => {
     expect(screen.getByText(/verification failed/i)).toBeInTheDocument();
   });
 
-  it('marks a task as completed and removes Vote button when Vote is clicked', async () => {
-    const user = userEvent.setup();
-    const task = createTask({ id: 'v1', title: 'Votable task' });
-    render(<TaskCard tasks={[task]} />);
-
-    const voteButton = screen.getByRole('button', { name: /vote for votable task/i });
-    expect(voteButton).toBeInTheDocument();
-
-    await user.click(voteButton);
-
-    expect(screen.queryByRole('button', { name: /vote for votable task/i })).not.toBeInTheDocument();
-    expect(screen.getByText('completed')).toBeInTheDocument();
-  });
-
   it('sorts completed tasks to the bottom', () => {
     const tasks: TaskCardTask[] = [
       createTask({
@@ -214,24 +196,14 @@ describe('TaskCard', () => {
       }),
     ];
 
-    render(<TaskCard tasks={tasks} />);
+    render(<TaskCard tasks={tasks} />, { wrapper: Wrapper });
 
     const cards = screen.getAllByText(/Alpha|Bravo|Charlie/);
     expect(cards[0]).toHaveTextContent('Charlie');
     expect(cards[1]).toHaveTextContent('Alpha');
     expect(cards[2]).toHaveTextContent('Bravo');
   });
 
-  it('highlights a task with animation classes when voted completed', async () => {
-    const user = userEvent.setup();
-    const task = createTask({ id: 'anim1', title: 'Animate me' });
-    const { container } = render(<TaskCard tasks={[task]} />);
-
-    const voteButton = screen.getByRole('button', { name: /vote for animate me/i });
-    await user.click(voteButton);
-
-    const card = container.querySelector('[class*="scale-"]');
-    expect(card).toBeInTheDocument();
   it('renders filter controls', () => {
     render(<TaskCard tasks={[]} />, { wrapper: Wrapper });
 
@@ -252,7 +224,7 @@ describe('TaskCard', () => {
     expect(screen.getByText('Completed task')).toBeInTheDocument();
 
     _searchParams = new URLSearchParams();
-    rerender(<TaskCard tasks={tasks} />, { wrapper: Wrapper });
+    rerender(<TaskCard tasks={tasks} />);
     expect(screen.getByText('Pending task')).toBeInTheDocument();
   });