feat(frontend): Add Sprint 4 new fields to Story Detail page sidebar

Add three new cards to Story Detail sidebar to display Sprint 4 Story 3 fields:
- Story Points card with Target icon
- Tags card with Tag badges
- Acceptance Criteria card with CheckCircle2 icons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+.next
+out
+build
+dist
+coverage
+*.md
+package-lock.json

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -87,6 +87,73 @@ npm run lint
 
 # Format code with Prettier
 npm run format
+
+# Check formatting without modifying files
+npm run format:check
+```
+
+## Code Quality Standards
+
+### TypeScript
+- **Strict Mode**: Enabled in `tsconfig.json`
+- **No `any` Types**: Prohibited by ESLint (`@typescript-eslint/no-explicit-any: error`)
+- **Type Definitions**: All components, functions, and API responses must have proper type definitions
+- **Type Safety**: Prefer discriminated unions over type assertions
+
+### Linting
+- **ESLint**: Configured with TypeScript and React rules
+- **Next.js Rules**: Extended from `eslint-config-next`
+- **Accessibility**: Enforced via `eslint-plugin-jsx-a11y`
+- **Run**: `npm run lint`
+
+### Code Formatting
+- **Prettier**: Configured for consistent code formatting
+- **Tailwind Plugin**: Automatic class sorting via `prettier-plugin-tailwindcss`
+- **Configuration**: See `.prettierrc`
+- **Run**: `npm run format`
+- **Check**: `npm run format:check`
+
+### Pre-commit Hooks
+Husky automatically runs checks before each commit:
+1. **TypeScript Compilation Check** - `npx tsc --noEmit`
+2. **ESLint + Prettier** - Via `lint-staged` (only on staged files)
+
+If any check fails, the commit will be blocked. Fix the issues before committing.
+
+### Development Workflow
+
+1. **Make Changes**: Edit your code
+2. **Format Code**: Run `npm run format` (or let your IDE auto-format)
+3. **Check Linting**: Run `npm run lint` to check for issues
+4. **Commit**: Run `git commit` (hooks will run automatically)
+   - TypeScript check runs on all files
+   - ESLint + Prettier run only on staged files (fast)
+5. **Fix Issues**: If hooks fail, fix the issues and try again
+
+### Bypassing Hooks (Emergency Only)
+
+Only bypass hooks in emergency situations:
+
+```bash
+git commit --no-verify -m "Emergency fix"
+```
+
+Use this sparingly - it's better to fix the issues properly.
+
+### VS Code Settings (Recommended)
+
+Add to `.vscode/settings.json`:
+
+```json
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
 ```
 
 ## Features Implemented (Sprint 1)

app/(auth)/login/page.tsx

@@ -56,9 +56,9 @@ function LoginContent() {
           )}
 
           {error && (
-            <div className="rounded bg-red-50 p-3 text-sm text-red-600">
+            <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3 text-sm text-destructive">
               {(error as { response?: { data?: { message?: string } } })
-                ?.response?.data?.message || 'Login failed. Please try again.'}
+                ?.response?.data?.message || 'Login failed. Please check your credentials and try again.'}
             </div>
           )}
 
@@ -72,7 +72,7 @@ function LoginContent() {
               placeholder="your-company"
             />
             {errors.tenantSlug && (
-              <p className="mt-1 text-sm text-red-600">{errors.tenantSlug.message}</p>
+              <p className="mt-1 text-sm text-destructive">{errors.tenantSlug.message}</p>
             )}
           </div>
 
@@ -86,7 +86,7 @@ function LoginContent() {
               placeholder="you@example.com"
             />
             {errors.email && (
-              <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+              <p className="mt-1 text-sm text-destructive">{errors.email.message}</p>
             )}
           </div>
 
@@ -100,7 +100,7 @@ function LoginContent() {
               placeholder="••••••••"
             />
             {errors.password && (
-              <p className="mt-1 text-sm text-red-600">
+              <p className="mt-1 text-sm text-destructive">
                 {errors.password.message}
               </p>
             )}

app/(auth)/register/page.tsx

@@ -54,10 +54,10 @@ export default function RegisterPage() {
           className="mt-8 space-y-6 rounded-lg bg-white p-8 shadow"
         >
           {error && (
-            <div className="rounded bg-red-50 p-3 text-sm text-red-600">
+            <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3 text-sm text-destructive">
               {(error as { response?: { data?: { message?: string } } })
                 ?.response?.data?.message ||
-                'Registration failed. Please try again.'}
+                'Registration failed. Please check your information and try again.'}
             </div>
           )}
 
@@ -71,7 +71,7 @@ export default function RegisterPage() {
               placeholder="John Doe"
             />
             {errors.fullName && (
-              <p className="mt-1 text-sm text-red-600">
+              <p className="mt-1 text-sm text-destructive">
                 {errors.fullName.message}
               </p>
             )}
@@ -87,7 +87,7 @@ export default function RegisterPage() {
               placeholder="you@example.com"
             />
             {errors.email && (
-              <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+              <p className="mt-1 text-sm text-destructive">{errors.email.message}</p>
             )}
           </div>
 
@@ -101,7 +101,7 @@ export default function RegisterPage() {
               placeholder="••••••••"
             />
             {errors.password && (
-              <p className="mt-1 text-sm text-red-600">
+              <p className="mt-1 text-sm text-destructive">
                 {errors.password.message}
               </p>
             )}
@@ -120,7 +120,7 @@ export default function RegisterPage() {
               placeholder="Acme Inc."
             />
             {errors.tenantName && (
-              <p className="mt-1 text-sm text-red-600">
+              <p className="mt-1 text-sm text-destructive">
                 {errors.tenantName.message}
               </p>
             )}

app/(dashboard)/dashboard/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Plus, FolderKanban, Archive, TrendingUp, ArrowRight } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -15,16 +15,19 @@ export default function DashboardPage() {
   const { data: projects, isLoading } = useProjects();
 
   // Calculate statistics
-  const stats = {
+  const stats = useMemo(() => ({
     totalProjects: projects?.length || 0,
     activeProjects: projects?.length || 0, // TODO: Add status field to Project model
     archivedProjects: 0, // TODO: Add status field to Project model
-  };
+  }), [projects]);
 
   // Get recent projects (sort by creation time, take first 5)
-  const recentProjects = projects
-    ?.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-    .slice(0, 5) || [];
+  const recentProjects = useMemo(() => {
+    return projects
+      ?.slice()
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      .slice(0, 5) || [];
+  }, [projects]);
 
   return (
     <div className="space-y-8">

app/(dashboard)/layout.tsx

@@ -4,6 +4,7 @@ import { Header } from '@/components/layout/Header';
 import { Sidebar } from '@/components/layout/Sidebar';
 import { useUIStore } from '@/stores/ui-store';
 import { AuthGuard } from '@/components/providers/AuthGuard';
+import { SkipLink } from '@/components/ui/skip-link';
 
 export default function DashboardLayout({
   children,
@@ -14,11 +15,13 @@ export default function DashboardLayout({
 
   return (
     <AuthGuard>
+      <SkipLink />
       <div className="min-h-screen">
         <Header />
         <div className="flex">
           <Sidebar />
           <main
+            id="main-content"
             className={`flex-1 transition-all duration-200 ${
               sidebarOpen ? 'ml-64' : 'ml-0'
             }`}

app/(dashboard)/projects/[id]/epics/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { use, useState } from 'react';
+import { use, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import {
@@ -62,7 +62,7 @@ export default function EpicsPage({ params }: EpicsPageProps) {
   const { data: epics, isLoading: epicsLoading, error } = useEpics(projectId);
   const deleteEpic = useDeleteEpic();
 
-  const handleDelete = async () => {
+  const handleDelete = useCallback(async () => {
     if (!deletingEpicId) return;
 
     try {
@@ -72,9 +72,9 @@ export default function EpicsPage({ params }: EpicsPageProps) {
       const message = error instanceof Error ? error.message : 'Failed to delete epic';
       toast.error(message);
     }
-  };
+  }, [deletingEpicId, deleteEpic]);
 
-  const getStatusColor = (status: WorkItemStatus) => {
+  const getStatusColor = useCallback((status: WorkItemStatus) => {
     switch (status) {
       case 'Backlog':
         return 'secondary';
@@ -87,9 +87,9 @@ export default function EpicsPage({ params }: EpicsPageProps) {
       default:
         return 'secondary';
     }
-  };
+  }, []);
 
-  const getPriorityColor = (priority: WorkItemPriority) => {
+  const getPriorityColor = useCallback((priority: WorkItemPriority) => {
     switch (priority) {
       case 'Low':
         return 'bg-blue-100 text-blue-700 hover:bg-blue-100';
@@ -102,7 +102,7 @@ export default function EpicsPage({ params }: EpicsPageProps) {
       default:
         return 'secondary';
     }
-  };
+  }, []);
 
   if (projectLoading || epicsLoading) {
     return (

app/(dashboard)/projects/[id]/kanban/page.tsx

@@ -8,7 +8,7 @@ import {
   DragStartEvent,
   closestCorners,
 } from '@dnd-kit/core';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { useProjectStories } from '@/lib/hooks/use-stories';
 import { useEpics } from '@/lib/hooks/use-epics';
 import { useChangeStoryStatus } from '@/lib/hooks/use-stories';
@@ -20,6 +20,7 @@ import { KanbanColumn } from '@/components/features/kanban/KanbanColumn';
 import { StoryCard } from '@/components/features/kanban/StoryCard';
 import { CreateStoryDialog } from '@/components/features/stories/CreateStoryDialog';
 import type { Story, WorkItemStatus } from '@/types/project';
+import { logger } from '@/lib/utils/logger';
 
 const COLUMNS = [
   { id: 'Backlog', title: 'Backlog', color: 'bg-gray-100' },
@@ -42,7 +43,7 @@ export default function KanbanPage() {
 
   // SignalR real-time updates
   const queryClient = useQueryClient();
-  const { isConnected } = useSignalRConnection();
+  useSignalRConnection(); // Establish connection
   const changeStatusMutation = useChangeStoryStatus();
 
   // Subscribe to SignalR events for real-time updates
@@ -50,15 +51,15 @@ export default function KanbanPage() {
     {
       // Story events (3 events)
       'StoryCreated': (event: any) => {
-        console.log('[Kanban] Story created:', event);
+        logger.debug('[Kanban] Story created:', event);
         queryClient.invalidateQueries({ queryKey: ['project-stories', projectId] });
       },
       'StoryUpdated': (event: any) => {
-        console.log('[Kanban] Story updated:', event);
+        logger.debug('[Kanban] Story updated:', event);
         queryClient.invalidateQueries({ queryKey: ['project-stories', projectId] });
       },
       'StoryDeleted': (event: any) => {
-        console.log('[Kanban] Story deleted:', event);
+        logger.debug('[Kanban] Story deleted:', event);
         queryClient.invalidateQueries({ queryKey: ['project-stories', projectId] });
       },
     },
@@ -82,12 +83,12 @@ export default function KanbanPage() {
     Done: stories.filter((s) => s.status === 'Done'),
   }), [stories]);
 
-  const handleDragStart = (event: DragStartEvent) => {
+  const handleDragStart = useCallback((event: DragStartEvent) => {
     const story = stories.find((s) => s.id === event.active.id);
     setActiveStory(story || null);
-  };
+  }, [stories]);
 
-  const handleDragEnd = (event: DragEndEvent) => {
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
     const { active, over } = event;
     setActiveStory(null);
 
@@ -97,10 +98,10 @@ export default function KanbanPage() {
     const story = stories.find((s) => s.id === active.id);
 
     if (story && story.status !== newStatus) {
-      console.log(`[Kanban] Changing story ${story.id} status to ${newStatus}`);
+      logger.debug(`[Kanban] Changing story ${story.id} status to ${newStatus}`);
       changeStatusMutation.mutate({ id: story.id, status: newStatus });
     }
-  };
+  }, [stories, changeStatusMutation]);
 
   if (isLoading) {
     return (

app/(dashboard)/projects/page.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react';
 import Link from 'next/link';
-import { Plus, FolderKanban, Calendar } from 'lucide-react';
+import { Plus, FolderKanban, Calendar, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
@@ -17,6 +17,7 @@ import {
 import { useProjects } from '@/lib/hooks/use-projects';
 import { ProjectForm } from '@/components/projects/project-form';
 import { formatDistanceToNow } from 'date-fns';
+import { EmptyState } from '@/components/ui/empty-state';
 
 export default function ProjectsPage() {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
@@ -52,19 +53,15 @@ export default function ProjectsPage() {
 
   if (error) {
     return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <Card className="w-full max-w-md">
-          <CardHeader>
-            <CardTitle className="text-destructive">Error Loading Projects</CardTitle>
-            <CardDescription>
-              {error instanceof Error ? error.message : 'Failed to load projects'}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button onClick={() => window.location.reload()}>Retry</Button>
-          </CardContent>
-        </Card>
-      </div>
+      <EmptyState
+        icon={AlertCircle}
+        title="Failed to load projects"
+        description={error instanceof Error ? error.message : 'An error occurred while loading projects. Please try again.'}
+        action={{
+          label: 'Retry',
+          onClick: () => window.location.reload(),
+        }}
+      />
     );
   }
 
@@ -121,17 +118,15 @@ export default function ProjectsPage() {
           ))}
         </div>
       ) : (
-        <Card className="flex flex-col items-center justify-center py-16">
-          <FolderKanban className="h-12 w-12 text-muted-foreground mb-4" />
-          <CardTitle className="mb-2">No projects yet</CardTitle>
-          <CardDescription className="mb-4">
-            Get started by creating your first project
-          </CardDescription>
-          <Button onClick={() => setIsCreateDialogOpen(true)}>
-            <Plus className="mr-2 h-4 w-4" />
-            Create Project
-          </Button>
-        </Card>
+        <EmptyState
+          icon={FolderKanban}
+          title="No projects yet"
+          description="Get started by creating your first project to organize your work and track progress."
+          action={{
+            label: 'Create Project',
+            onClick: () => setIsCreateDialogOpen(true),
+          }}
+        />
       )}
 
       {/* Create Project Dialog */}

app/(dashboard)/stories/[id]/error.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { AlertCircle } from 'lucide-react';
+
+export default function StoryDetailError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Story detail page error:', error);
+  }, [error]);
+
+  return (
+    <div className="flex items-center justify-center min-h-[400px] p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <AlertCircle className="h-5 w-5 text-destructive" />
+            <CardTitle className="text-destructive">Error Loading Story</CardTitle>
+          </div>
+          <CardDescription>
+            {error.message || 'An unexpected error occurred while loading the story.'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-2">
+          <Button onClick={() => reset()} className="w-full">
+            Try Again
+          </Button>
+          <Button
+            onClick={() => window.history.back()}
+            variant="outline"
+            className="w-full"
+          >
+            Go Back
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/(dashboard)/stories/[id]/loading.tsx

@@ -0,0 +1,66 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+
+export default function StoryDetailLoading() {
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb Skeleton */}
+      <Skeleton className="h-5 w-96" />
+
+      {/* Header Skeleton */}
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-4 flex-1">
+          <Skeleton className="h-10 w-3/4" />
+          <div className="flex gap-2">
+            <Skeleton className="h-6 w-20" />
+            <Skeleton className="h-6 w-20" />
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-10 w-32" />
+          <Skeleton className="h-10 w-24" />
+        </div>
+      </div>
+
+      {/* Two-column layout Skeleton */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Main Content */}
+        <div className="lg:col-span-2 space-y-6">
+          <Card>
+            <CardHeader>
+              <Skeleton className="h-6 w-32" />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <Skeleton className="h-6 w-24" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-32 w-full" />
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Card key={i}>
+              <CardHeader className="pb-3">
+                <Skeleton className="h-5 w-20" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-10 w-full" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/(dashboard)/stories/[id]/page.tsx

@@ -0,0 +1,516 @@
+"use client";
+
+import { use, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  ArrowLeft,
+  Edit,
+  Trash2,
+  Loader2,
+  Clock,
+  Calendar,
+  User,
+  Layers,
+  CheckCircle2,
+  Tag,
+  Target,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  useStory,
+  useUpdateStory,
+  useDeleteStory,
+  useChangeStoryStatus,
+} from "@/lib/hooks/use-stories";
+import { useEpic } from "@/lib/hooks/use-epics";
+import { useProject } from "@/lib/hooks/use-projects";
+import { StoryForm } from "@/components/projects/story-form";
+import { TaskList } from "@/components/tasks/task-list";
+import { formatDistanceToNow } from "date-fns";
+import { toast } from "sonner";
+import type { WorkItemStatus, WorkItemPriority } from "@/types/project";
+
+interface StoryDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default function StoryDetailPage({ params }: StoryDetailPageProps) {
+  const { id: storyId } = use(params);
+  const router = useRouter();
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  const { data: story, isLoading: storyLoading, error: storyError } = useStory(storyId);
+  const { data: epic, isLoading: epicLoading } = useEpic(story?.epicId || "");
+  const { data: project, isLoading: projectLoading } = useProject(story?.projectId || "");
+  const updateStory = useUpdateStory();
+  const deleteStory = useDeleteStory();
+  const changeStatus = useChangeStoryStatus();
+
+  const handleDeleteStory = async () => {
+    try {
+      await deleteStory.mutateAsync(storyId);
+      toast.success("Story deleted successfully");
+      // Navigate back to epic detail page
+      router.push(`/epics/${story?.epicId}`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to delete story";
+      toast.error(message);
+    }
+  };
+
+  const handleStatusChange = async (status: WorkItemStatus) => {
+    if (!story) return;
+    try {
+      await changeStatus.mutateAsync({ id: storyId, status });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to update status";
+      toast.error(message);
+    }
+  };
+
+  const handlePriorityChange = async (priority: WorkItemPriority) => {
+    if (!story) return;
+    try {
+      await updateStory.mutateAsync({
+        id: storyId,
+        data: { priority },
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to update priority";
+      toast.error(message);
+    }
+  };
+
+  const getStatusColor = (status: WorkItemStatus) => {
+    switch (status) {
+      case "Backlog":
+        return "secondary";
+      case "Todo":
+        return "outline";
+      case "InProgress":
+        return "default";
+      case "Done":
+        return "default";
+      default:
+        return "secondary";
+    }
+  };
+
+  const getPriorityColor = (priority: WorkItemPriority) => {
+    switch (priority) {
+      case "Low":
+        return "bg-blue-100 text-blue-700 hover:bg-blue-100";
+      case "Medium":
+        return "bg-yellow-100 text-yellow-700 hover:bg-yellow-100";
+      case "High":
+        return "bg-orange-100 text-orange-700 hover:bg-orange-100";
+      case "Critical":
+        return "bg-red-100 text-red-700 hover:bg-red-100";
+      default:
+        return "secondary";
+    }
+  };
+
+  // Loading state
+  if (storyLoading || epicLoading || projectLoading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-10 w-96" />
+        <div className="flex items-start justify-between">
+          <div className="flex-1 space-y-4">
+            <Skeleton className="h-12 w-1/2" />
+            <Skeleton className="h-20 w-full" />
+          </div>
+          <Skeleton className="h-10 w-32" />
+        </div>
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  // Error state
+  if (storyError || !story) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle className="text-destructive">Error Loading Story</CardTitle>
+            <CardDescription>
+              {storyError instanceof Error ? storyError.message : "Story not found"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex gap-2">
+            <Button onClick={() => router.back()}>Go Back</Button>
+            <Button onClick={() => window.location.reload()} variant="outline">
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb Navigation */}
+      <div className="text-muted-foreground flex items-center gap-2 text-sm">
+        <Link href="/projects" className="hover:text-foreground">
+          Projects
+        </Link>
+        <span>/</span>
+        {project && (
+          <>
+            <Link href={`/projects/${project.id}`} className="hover:text-foreground">
+              {project.name}
+            </Link>
+            <span>/</span>
+          </>
+        )}
+        <Link href={`/projects/${story.projectId}/epics`} className="hover:text-foreground">
+          Epics
+        </Link>
+        <span>/</span>
+        {epic && (
+          <>
+            <Link href={`/epics/${epic.id}`} className="hover:text-foreground">
+              {epic.name}
+            </Link>
+            <span>/</span>
+          </>
+        )}
+        <span className="text-foreground">Stories</span>
+        <span>/</span>
+        <span className="text-foreground max-w-[200px] truncate" title={story.title}>
+          {story.title}
+        </span>
+      </div>
+
+      {/* Header */}
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1 space-y-2">
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => router.push(`/epics/${story.epicId}`)}
+              title="Back to Epic"
+            >
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+            <div className="flex-1">
+              <h1 className="text-3xl font-bold tracking-tight">{story.title}</h1>
+              <div className="mt-2 flex flex-wrap items-center gap-2">
+                <Badge variant={getStatusColor(story.status)}>{story.status}</Badge>
+                <Badge className={getPriorityColor(story.priority)}>{story.priority}</Badge>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => setIsEditDialogOpen(true)}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit Story
+          </Button>
+          <Button variant="destructive" onClick={() => setIsDeleteDialogOpen(true)}>
+            <Trash2 className="mr-2 h-4 w-4" />
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {/* Two-column layout */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* Main Content Area (2/3 width) */}
+        <div className="space-y-6 lg:col-span-2">
+          {/* Story Details Card */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Story Details</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {story.description ? (
+                <div>
+                  <h3 className="text-muted-foreground mb-2 text-sm font-medium">Description</h3>
+                  <p className="text-sm whitespace-pre-wrap">{story.description}</p>
+                </div>
+              ) : (
+                <p className="text-muted-foreground text-sm italic">No description</p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Tasks Section - Sprint 4 Story 2 */}
+          <TaskList storyId={storyId} />
+        </div>
+
+        {/* Metadata Sidebar (1/3 width) */}
+        <div className="space-y-4">
+          {/* Status */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium">Status</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Select
+                value={story.status}
+                onValueChange={(value) => handleStatusChange(value as WorkItemStatus)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Backlog">Backlog</SelectItem>
+                  <SelectItem value="Todo">Todo</SelectItem>
+                  <SelectItem value="InProgress">In Progress</SelectItem>
+                  <SelectItem value="Done">Done</SelectItem>
+                </SelectContent>
+              </Select>
+            </CardContent>
+          </Card>
+
+          {/* Priority */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium">Priority</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Select
+                value={story.priority}
+                onValueChange={(value) => handlePriorityChange(value as WorkItemPriority)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Low">Low</SelectItem>
+                  <SelectItem value="Medium">Medium</SelectItem>
+                  <SelectItem value="High">High</SelectItem>
+                  <SelectItem value="Critical">Critical</SelectItem>
+                </SelectContent>
+              </Select>
+            </CardContent>
+          </Card>
+
+          {/* Story Points - Sprint 4 Story 3 */}
+          {story.storyPoints && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Story Points</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-2">
+                  <Target className="text-muted-foreground h-4 w-4" />
+                  <span className="text-2xl font-semibold">{story.storyPoints}</span>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Assignee */}
+          {story.assigneeId && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Assignee</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-2">
+                  <User className="text-muted-foreground h-4 w-4" />
+                  <span className="text-sm">{story.assigneeId}</span>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Tags - Sprint 4 Story 3 */}
+          {story.tags && story.tags.length > 0 && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Tags</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {story.tags.map((tag) => (
+                    <Badge key={tag} variant="secondary" className="text-xs">
+                      <Tag className="mr-1 h-3 w-3" />
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Time Tracking */}
+          {(story.estimatedHours !== undefined || story.actualHours !== undefined) && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Time Tracking</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {story.estimatedHours !== undefined && (
+                  <div className="flex items-center gap-2 text-sm">
+                    <Clock className="text-muted-foreground h-4 w-4" />
+                    <span>Estimated: {story.estimatedHours}h</span>
+                  </div>
+                )}
+                {story.actualHours !== undefined && (
+                  <div className="flex items-center gap-2 text-sm">
+                    <Clock className="text-muted-foreground h-4 w-4" />
+                    <span>Actual: {story.actualHours}h</span>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Acceptance Criteria - Sprint 4 Story 3 */}
+          {story.acceptanceCriteria && story.acceptanceCriteria.length > 0 && (
+            <Card>
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Acceptance Criteria</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                {story.acceptanceCriteria.map((criterion, index) => (
+                  <div key={index} className="flex items-start gap-2 text-sm">
+                    <CheckCircle2 className="text-muted-foreground mt-0.5 h-4 w-4 flex-shrink-0" />
+                    <span>{criterion}</span>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Dates */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-sm font-medium">Dates</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <div className="flex items-start gap-2 text-sm">
+                <Calendar className="text-muted-foreground mt-0.5 h-4 w-4" />
+                <div className="flex-1">
+                  <p className="font-medium">Created</p>
+                  <p className="text-muted-foreground">
+                    {formatDistanceToNow(new Date(story.createdAt), { addSuffix: true })}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-2 text-sm">
+                <Calendar className="text-muted-foreground mt-0.5 h-4 w-4" />
+                <div className="flex-1">
+                  <p className="font-medium">Updated</p>
+                  <p className="text-muted-foreground">
+                    {formatDistanceToNow(new Date(story.updatedAt), { addSuffix: true })}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Parent Epic Card */}
+          {epic && (
+            <Card className="transition-shadow hover:shadow-lg">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm font-medium">Parent Epic</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Link
+                  href={`/epics/${epic.id}`}
+                  className="hover:bg-accent block space-y-2 rounded-md border p-3 transition-colors"
+                >
+                  <div className="flex items-center gap-2">
+                    <Layers className="text-muted-foreground h-4 w-4" />
+                    <span className="text-sm font-medium">{epic.name}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge variant={getStatusColor(epic.status)} className="text-xs">
+                      {epic.status}
+                    </Badge>
+                    <Badge className={`${getPriorityColor(epic.priority)} text-xs`}>
+                      {epic.priority}
+                    </Badge>
+                  </div>
+                </Link>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* Edit Story Dialog */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Edit Story</DialogTitle>
+            <DialogDescription>Update the story details</DialogDescription>
+          </DialogHeader>
+          <StoryForm
+            story={story}
+            projectId={story.projectId}
+            onSuccess={() => setIsEditDialogOpen(false)}
+            onCancel={() => setIsEditDialogOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Story Confirmation Dialog */}
+      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the story and all its
+              associated tasks.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteStory}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={deleteStory.isPending}
+            >
+              {deleteStory.isPending ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                "Delete Story"
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import { QueryProvider } from "@/lib/providers/query-provider";
 import { SignalRProvider } from "@/lib/signalr/SignalRContext";
 import { Toaster } from "@/components/ui/sonner";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -30,12 +31,14 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <QueryProvider>
-          <SignalRProvider>
-            {children}
-            <Toaster position="top-right" />
-          </SignalRProvider>
-        </QueryProvider>
+        <ErrorBoundary>
+          <QueryProvider>
+            <SignalRProvider>
+              {children}
+              <Toaster position="top-right" />
+            </SignalRProvider>
+          </QueryProvider>
+        </ErrorBoundary>
       </body>
     </html>
   );

components/ErrorBoundary.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface ErrorFallbackProps {
+  error: Error;
+  resetErrorBoundary: () => void;
+}
+
+function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
+  return (
+    <div className="flex min-h-[400px] flex-col items-center justify-center p-4">
+      <AlertCircle className="h-16 w-16 text-destructive mb-4" />
+      <h2 className="text-2xl font-bold mb-2">Something went wrong</h2>
+      <p className="text-muted-foreground mb-4 text-center max-w-md">
+        {error.message || 'An unexpected error occurred'}
+      </p>
+      <div className="flex gap-2">
+        <Button onClick={resetErrorBoundary}>
+          Try again
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => window.location.href = '/'}
+        >
+          Go to Dashboard
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+export function ErrorBoundary({ children }: ErrorBoundaryProps) {
+  return (
+    <ReactErrorBoundary
+      FallbackComponent={ErrorFallback}
+      onReset={() => {
+        // Optional: Reset application state here
+        // For now, we'll just reload the current page
+        window.location.reload();
+      }}
+      onError={(error, errorInfo) => {
+        // Log error to console in development
+        console.error('Error caught by boundary:', error, errorInfo);
+
+        // In production, you could send this to an error tracking service
+        // like Sentry, LogRocket, etc.
+      }}
+    >
+      {children}
+    </ReactErrorBoundary>
+  );
+}

components/epics/epic-form.tsx

@@ -59,6 +59,7 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
   const createEpic = useCreateEpic();
   const updateEpic = useUpdateEpic();
   const user = useAuthStore((state) => state.user);
+  const isHydrated = useAuthStore((state) => state.isHydrated);
 
   const form = useForm<EpicFormValues>({
     resolver: zodResolver(epicSchema),
@@ -71,9 +72,19 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
   });
 
   async function onSubmit(data: EpicFormValues) {
+    console.log('[EpicForm] onSubmit triggered', { data, user: user?.id, projectId, isHydrated });
+
     try {
+      // Check if auth store has completed hydration
+      if (!isHydrated) {
+        console.warn('[EpicForm] Auth store not hydrated yet, waiting...');
+        toast.error('Loading user information, please try again in a moment');
+        return;
+      }
+
       if (!user?.id) {
-        toast.error('User not authenticated');
+        console.error('[EpicForm] User not authenticated');
+        toast.error('Please log in to create an epic');
         return;
       }
 
@@ -82,20 +93,29 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
         estimatedHours: data.estimatedHours || undefined,
       };
 
+      console.log('[EpicForm] Prepared payload', payload);
+
       if (isEditing) {
+        console.log('[EpicForm] Updating epic', { epicId: epic.id });
         await updateEpic.mutateAsync({
           id: epic.id,
           data: payload,
         });
+        console.log('[EpicForm] Epic updated successfully');
       } else {
-        await createEpic.mutateAsync({
+        console.log('[EpicForm] Creating epic', { projectId, createdBy: user.id });
+        const result = await createEpic.mutateAsync({
           projectId,
           createdBy: user.id,
           ...payload,
         });
+        console.log('[EpicForm] Epic created successfully', result);
       }
+
+      console.log('[EpicForm] Calling onSuccess callback');
       onSuccess?.();
     } catch (error) {
+      console.error('[EpicForm] Operation failed', error);
       const message = error instanceof Error ? error.message : 'Operation failed';
       toast.error(message);
     }
@@ -112,7 +132,16 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+      <form
+        onSubmit={(e) => {
+          console.log('[EpicForm] Form submit event triggered', {
+            formState: form.formState,
+            values: form.getValues(),
+            errors: form.formState.errors,
+          });
+          form.handleSubmit(onSubmit)(e);
+        }}
+        className="space-y-6">
         <FormField
           control={form.control}
           name="name"
@@ -218,9 +247,9 @@ export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps
               Cancel
             </Button>
           )}
-          <Button type="submit" disabled={isLoading}>
+          <Button type="submit" disabled={isLoading || !isHydrated}>
             {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {isEditing ? 'Update Epic' : 'Create Epic'}
+            {!isHydrated ? 'Loading...' : isEditing ? 'Update Epic' : 'Create Epic'}
           </Button>
         </div>
       </form>

components/features/kanban/KanbanBoard.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React, { useMemo } from 'react';
 import { TaskCard } from './TaskCard';
 import type { LegacyKanbanBoard } from '@/types/kanban';
 
@@ -9,13 +10,17 @@ interface KanbanBoardProps {
 
 // Legacy KanbanBoard component using old Kanban type
 // For new Issue-based Kanban, use the page at /projects/[id]/kanban
-export function KanbanBoard({ board }: KanbanBoardProps) {
+export const KanbanBoard = React.memo(function KanbanBoard({ board }: KanbanBoardProps) {
+  const totalTasks = useMemo(() => {
+    return board.columns.reduce((acc, col) => acc + col.tasks.length, 0);
+  }, [board.columns]);
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h2 className="text-2xl font-bold">{board.projectName}</h2>
         <p className="text-sm text-muted-foreground">
-          Total tasks: {board.columns.reduce((acc, col) => acc + col.tasks.length, 0)}
+          Total tasks: {totalTasks}
         </p>
       </div>
       <div className="flex gap-4 overflow-x-auto pb-4">
@@ -48,4 +53,4 @@ export function KanbanBoard({ board }: KanbanBoardProps) {
       </p>
     </div>
   );
-}
+});

components/features/kanban/KanbanColumn.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -14,7 +15,7 @@ interface KanbanColumnProps {
   taskCounts?: Record<string, number>; // Map of storyId -> taskCount
 }
 
-export function KanbanColumn({ id, title, stories, epicNames = {}, taskCounts = {} }: KanbanColumnProps) {
+export const KanbanColumn = React.memo(function KanbanColumn({ id, title, stories, epicNames = {}, taskCounts = {} }: KanbanColumnProps) {
   const { setNodeRef } = useDroppable({ id });
 
   return (
@@ -47,4 +48,4 @@ export function KanbanColumn({ id, title, stories, epicNames = {}, taskCounts =
       </CardContent>
     </Card>
   );
-}
+});

components/features/kanban/StoryCard.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React, { useMemo } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Card, CardContent } from '@/components/ui/card';
@@ -7,7 +8,6 @@ import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Story } from '@/types/project';
 import { FileText, FolderKanban, Clock, CheckSquare } from 'lucide-react';
-import { useMemo } from 'react';
 
 interface StoryCardProps {
   story: Story;
@@ -15,7 +15,7 @@ interface StoryCardProps {
   taskCount?: number;
 }
 
-export function StoryCard({ story, epicName, taskCount }: StoryCardProps) {
+export const StoryCard = React.memo(function StoryCard({ story, epicName, taskCount }: StoryCardProps) {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id: story.id });
 
@@ -140,4 +140,4 @@ export function StoryCard({ story, epicName, taskCount }: StoryCardProps) {
       </CardContent>
     </Card>
   );
-}
+});

components/features/kanban/TaskCard.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Clock, User } from 'lucide-react';
 import type { TaskCard as TaskCardType } from '@/types/kanban';
@@ -9,7 +10,7 @@ interface TaskCardProps {
   isDragging?: boolean;
 }
 
-export function TaskCard({ task, isDragging = false }: TaskCardProps) {
+export const TaskCard = React.memo(function TaskCard({ task, isDragging = false }: TaskCardProps) {
   const priorityColors = {
     Low: 'bg-blue-100 text-blue-700',
     Medium: 'bg-yellow-100 text-yellow-700',
@@ -59,4 +60,4 @@ export function TaskCard({ task, isDragging = false }: TaskCardProps) {
       </CardContent>
     </Card>
   );
-}
+});

components/projects/acceptance-criteria-editor.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { X, Plus } from 'lucide-react';
+
+interface AcceptanceCriteriaEditorProps {
+  criteria: string[];
+  onChange: (criteria: string[]) => void;
+  disabled?: boolean;
+}
+
+export function AcceptanceCriteriaEditor({
+  criteria,
+  onChange,
+  disabled,
+}: AcceptanceCriteriaEditorProps) {
+  const [newCriterion, setNewCriterion] = useState('');
+
+  const addCriterion = () => {
+    if (newCriterion.trim()) {
+      onChange([...criteria, newCriterion.trim()]);
+      setNewCriterion('');
+    }
+  };
+
+  const removeCriterion = (index: number) => {
+    onChange(criteria.filter((_, i) => i !== index));
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addCriterion();
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {/* Existing criteria list */}
+      {criteria.length > 0 && (
+        <div className="space-y-2">
+          {criteria.map((criterion, index) => (
+            <div
+              key={index}
+              className="flex items-start gap-2 p-2 rounded-md border bg-muted/50"
+            >
+              <Checkbox checked disabled className="mt-0.5" />
+              <span className="flex-1 text-sm">{criterion}</span>
+              {!disabled && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0"
+                  onClick={() => removeCriterion(index)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add new criterion */}
+      {!disabled && (
+        <div className="flex gap-2">
+          <Input
+            placeholder="Add acceptance criterion..."
+            value={newCriterion}
+            onChange={(e) => setNewCriterion(e.target.value)}
+            onKeyPress={handleKeyPress}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addCriterion}
+            disabled={!newCriterion.trim()}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {criteria.length === 0 && disabled && (
+        <p className="text-sm text-muted-foreground">
+          No acceptance criteria defined
+        </p>
+      )}
+    </div>
+  );
+}

components/projects/hierarchy-tree.tsx

@@ -72,13 +72,23 @@ function EpicNode({ epic, onEpicClick, onStoryClick, onTaskClick }: EpicNodeProp
   return (
     <div className="border rounded-lg">
       <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={isExpanded}
         className="flex items-center gap-2 p-3 hover:bg-accent cursor-pointer"
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
       >
         <Button
           variant="ghost"
           size="sm"
           className="h-6 w-6 p-0"
+          aria-label={isExpanded ? 'Collapse epic' : 'Expand epic'}
           onClick={(e) => {
             e.stopPropagation();
             setIsExpanded(!isExpanded);
@@ -91,19 +101,20 @@ function EpicNode({ epic, onEpicClick, onStoryClick, onTaskClick }: EpicNodeProp
           )}
         </Button>
 
-        <Folder className="h-5 w-5 text-blue-500" />
+        <Folder className="h-5 w-5 text-blue-500" aria-hidden="true" />
 
         <div className="flex-1">
           <div className="flex items-center gap-2">
-            <span
-              className="font-semibold hover:underline"
+            <button
+              className="font-semibold hover:underline text-left bg-transparent border-0 p-0 cursor-pointer"
               onClick={(e) => {
                 e.stopPropagation();
                 onEpicClick?.(epic);
               }}
+              aria-label={`View epic: ${epic.name}`}
             >
               {epic.name}
-            </span>
+            </button>
             <StatusBadge status={epic.status} />
             <PriorityBadge priority={epic.priority} />
           </div>
@@ -115,7 +126,7 @@ function EpicNode({ epic, onEpicClick, onStoryClick, onTaskClick }: EpicNodeProp
         </div>
 
         {epic.estimatedHours && (
-          <div className="text-sm text-muted-foreground">
+          <div className="text-sm text-muted-foreground" aria-label={`Estimated: ${epic.estimatedHours} hours${epic.actualHours ? `, Actual: ${epic.actualHours} hours` : ''}`}>
             {epic.estimatedHours}h
             {epic.actualHours && ` / ${epic.actualHours}h`}
           </div>
@@ -164,13 +175,23 @@ function StoryNode({ story, onStoryClick, onTaskClick }: StoryNodeProps) {
   return (
     <div className="border-l-2 border-muted pl-3">
       <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={isExpanded}
         className="flex items-center gap-2 p-2 hover:bg-accent rounded cursor-pointer"
         onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
       >
         <Button
           variant="ghost"
           size="sm"
           className="h-6 w-6 p-0"
+          aria-label={isExpanded ? 'Collapse story' : 'Expand story'}
           onClick={(e) => {
             e.stopPropagation();
             setIsExpanded(!isExpanded);
@@ -183,19 +204,20 @@ function StoryNode({ story, onStoryClick, onTaskClick }: StoryNodeProps) {
           )}
         </Button>
 
-        <FileText className="h-4 w-4 text-green-500" />
+        <FileText className="h-4 w-4 text-green-500" aria-hidden="true" />
 
         <div className="flex-1">
           <div className="flex items-center gap-2">
-            <span
-              className="font-medium hover:underline"
+            <button
+              className="font-medium hover:underline text-left bg-transparent border-0 p-0 cursor-pointer"
               onClick={(e) => {
                 e.stopPropagation();
                 onStoryClick?.(story);
               }}
+              aria-label={`View story: ${story.title}`}
             >
               {story.title}
-            </span>
+            </button>
             <StatusBadge status={story.status} size="sm" />
             <PriorityBadge priority={story.priority} size="sm" />
           </div>
@@ -207,7 +229,7 @@ function StoryNode({ story, onStoryClick, onTaskClick }: StoryNodeProps) {
         </div>
 
         {story.estimatedHours && (
-          <div className="text-xs text-muted-foreground">
+          <div className="text-xs text-muted-foreground" aria-label={`Estimated: ${story.estimatedHours} hours${story.actualHours ? `, Actual: ${story.actualHours} hours` : ''}`}>
             {story.estimatedHours}h
             {story.actualHours && ` / ${story.actualHours}h`}
           </div>
@@ -242,14 +264,23 @@ interface TaskNodeProps {
 function TaskNode({ task, onTaskClick }: TaskNodeProps) {
   return (
     <div
+      role="button"
+      tabIndex={0}
       className="flex items-center gap-2 p-2 hover:bg-accent rounded cursor-pointer border-l-2 border-muted pl-3"
       onClick={() => onTaskClick?.(task)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onTaskClick?.(task);
+        }
+      }}
+      aria-label={`View task: ${task.title}`}
     >
-      <CheckSquare className="h-4 w-4 text-purple-500" />
+      <CheckSquare className="h-4 w-4 text-purple-500" aria-hidden="true" />
 
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium hover:underline">{task.title}</span>
+          <span className="text-sm font-medium">{task.title}</span>
           <StatusBadge status={task.status} size="xs" />
           <PriorityBadge priority={task.priority} size="xs" />
         </div>
@@ -259,7 +290,7 @@ function TaskNode({ task, onTaskClick }: TaskNodeProps) {
       </div>
 
       {task.estimatedHours && (
-        <div className="text-xs text-muted-foreground">
+        <div className="text-xs text-muted-foreground" aria-label={`Estimated: ${task.estimatedHours} hours${task.actualHours ? `, Actual: ${task.actualHours} hours` : ''}`}>
           {task.estimatedHours}h
           {task.actualHours && ` / ${task.actualHours}h`}
         </div>

components/projects/story-form.tsx

@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
-import { Button } from '@/components/ui/button';
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -12,39 +12,45 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select';
-import { useCreateStory, useUpdateStory } from '@/lib/hooks/use-stories';
-import { useEpics } from '@/lib/hooks/use-epics';
-import type { Story, WorkItemPriority } from '@/types/project';
-import { toast } from 'sonner';
-import { Loader2 } from 'lucide-react';
-import { useAuthStore } from '@/stores/authStore';
+} from "@/components/ui/select";
+import { useCreateStory, useUpdateStory } from "@/lib/hooks/use-stories";
+import { useEpics } from "@/lib/hooks/use-epics";
+import type { Story } from "@/types/project";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+import { useAuthStore } from "@/stores/authStore";
+import { AcceptanceCriteriaEditor } from "./acceptance-criteria-editor";
+import { TagsInput } from "./tags-input";
 
 const storySchema = z.object({
-  epicId: z.string().min(1, 'Parent Epic is required'),
-  title: z
-    .string()
-    .min(1, 'Title is required')
-    .max(200, 'Title must be less than 200 characters'),
-  description: z
-    .string()
-    .max(2000, 'Description must be less than 2000 characters')
-    .optional(),
-  priority: z.enum(['Low', 'Medium', 'High', 'Critical']),
+  epicId: z.string().min(1, "Parent Epic is required"),
+  title: z.string().min(1, "Title is required").max(200, "Title must be less than 200 characters"),
+  description: z.string().max(2000, "Description must be less than 2000 characters").optional(),
+  priority: z.enum(["Low", "Medium", "High", "Critical"]),
   estimatedHours: z
     .number()
-    .min(0, 'Estimated hours must be positive')
+    .min(0, "Estimated hours must be positive")
     .optional()
-    .or(z.literal('')),
+    .or(z.literal("")),
+  // Sprint 4 Story 3: New fields
+  acceptanceCriteria: z.array(z.string()).optional(),
+  assigneeId: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  storyPoints: z
+    .number()
+    .min(0, "Story points must be positive")
+    .max(100, "Story points must be less than 100")
+    .optional()
+    .or(z.literal("")),
 });
 
 type StoryFormValues = z.infer<typeof storySchema>;
@@ -57,13 +63,7 @@ interface StoryFormProps {
   onCancel?: () => void;
 }
 
-export function StoryForm({
-  story,
-  epicId,
-  projectId,
-  onSuccess,
-  onCancel,
-}: StoryFormProps) {
+export function StoryForm({ story, epicId, projectId, onSuccess, onCancel }: StoryFormProps) {
   const isEditing = !!story;
   const user = useAuthStore((state) => state.user);
   const createStory = useCreateStory();
@@ -75,11 +75,16 @@ export function StoryForm({
   const form = useForm<StoryFormValues>({
     resolver: zodResolver(storySchema),
     defaultValues: {
-      epicId: story?.epicId || epicId || '',
-      title: story?.title || '',
-      description: story?.description || '',
-      priority: story?.priority || 'Medium',
-      estimatedHours: story?.estimatedHours || ('' as any),
+      epicId: story?.epicId || epicId || "",
+      title: story?.title || "",
+      description: story?.description || "",
+      priority: story?.priority || "Medium",
+      estimatedHours: story?.estimatedHours || ("" as const),
+      // Sprint 4 Story 3: New field defaults
+      acceptanceCriteria: story?.acceptanceCriteria || [],
+      assigneeId: story?.assigneeId || "",
+      tags: story?.tags || [],
+      storyPoints: story?.storyPoints || ("" as const),
     },
   });
 
@@ -93,17 +98,22 @@ export function StoryForm({
             description: data.description,
             priority: data.priority,
             estimatedHours:
-              typeof data.estimatedHours === 'number' ? data.estimatedHours : undefined,
+              typeof data.estimatedHours === "number" ? data.estimatedHours : undefined,
+            // Sprint 4 Story 3: New fields
+            acceptanceCriteria: data.acceptanceCriteria,
+            assigneeId: data.assigneeId || undefined,
+            tags: data.tags,
+            storyPoints: typeof data.storyPoints === "number" ? data.storyPoints : undefined,
           },
         });
-        toast.success('Story updated successfully');
+        toast.success("Story updated successfully");
       } else {
         if (!user?.id) {
-          toast.error('User not authenticated');
+          toast.error("User not authenticated");
           return;
         }
         if (!projectId) {
-          toast.error('Project ID is required');
+          toast.error("Project ID is required");
           return;
         }
         await createStory.mutateAsync({
@@ -112,15 +122,19 @@ export function StoryForm({
           title: data.title,
           description: data.description,
           priority: data.priority,
-          estimatedHours:
-            typeof data.estimatedHours === 'number' ? data.estimatedHours : undefined,
+          estimatedHours: typeof data.estimatedHours === "number" ? data.estimatedHours : undefined,
           createdBy: user.id,
+          // Sprint 4 Story 3: New fields
+          acceptanceCriteria: data.acceptanceCriteria,
+          assigneeId: data.assigneeId || undefined,
+          tags: data.tags,
+          storyPoints: typeof data.storyPoints === "number" ? data.storyPoints : undefined,
         });
-        toast.success('Story created successfully');
+        toast.success("Story created successfully");
       }
       onSuccess?.();
     } catch (error) {
-      const message = error instanceof Error ? error.message : 'Operation failed';
+      const message = error instanceof Error ? error.message : "Operation failed";
       toast.error(message);
     }
   }
@@ -148,11 +162,9 @@ export function StoryForm({
                 </FormControl>
                 <SelectContent>
                   {epicsLoading ? (
-                    <div className="p-2 text-sm text-muted-foreground">Loading epics...</div>
+                    <div className="text-muted-foreground p-2 text-sm">Loading epics...</div>
                   ) : epics.length === 0 ? (
-                    <div className="p-2 text-sm text-muted-foreground">
-                      No epics available
-                    </div>
+                    <div className="text-muted-foreground p-2 text-sm">No epics available</div>
                   ) : (
                     epics.map((epic) => (
                       <SelectItem key={epic.id} value={epic.id}>
@@ -163,7 +175,7 @@ export function StoryForm({
                 </SelectContent>
               </Select>
               <FormDescription>
-                {isEditing ? 'Parent epic cannot be changed' : 'Select the parent epic'}
+                {isEditing ? "Parent epic cannot be changed" : "Select the parent epic"}
               </FormDescription>
               <FormMessage />
             </FormItem>
@@ -199,9 +211,7 @@ export function StoryForm({
                   {...field}
                 />
               </FormControl>
-              <FormDescription>
-                Optional detailed description (max 2000 characters)
-              </FormDescription>
+              <FormDescription>Optional detailed description (max 2000 characters)</FormDescription>
               <FormMessage />
             </FormItem>
           )}
@@ -247,9 +257,9 @@ export function StoryForm({
                     {...field}
                     onChange={(e) => {
                       const value = e.target.value;
-                      field.onChange(value === '' ? '' : parseFloat(value));
+                      field.onChange(value === "" ? "" : parseFloat(value));
                     }}
-                    value={field.value === undefined ? '' : field.value}
+                    value={field.value === undefined ? "" : field.value}
                   />
                 </FormControl>
                 <FormDescription>Optional time estimate</FormDescription>
@@ -259,20 +269,114 @@ export function StoryForm({
           />
         </div>
 
+        {/* Sprint 4 Story 3: Acceptance Criteria */}
+        <FormField
+          control={form.control}
+          name="acceptanceCriteria"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Acceptance Criteria</FormLabel>
+              <FormControl>
+                <AcceptanceCriteriaEditor
+                  criteria={field.value || []}
+                  onChange={field.onChange}
+                  disabled={isLoading}
+                />
+              </FormControl>
+              <FormDescription>
+                Define conditions that must be met for this story to be complete
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Sprint 4 Story 3: Assignee and Story Points */}
+        <div className="grid grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="assigneeId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Assignee</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value} disabled={isLoading}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Unassigned" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="">Unassigned</SelectItem>
+                    {user?.id && <SelectItem value={user.id}>{user.fullName || "Me"}</SelectItem>}
+                  </SelectContent>
+                </Select>
+                <FormDescription>Assign to team member</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="storyPoints"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Story Points</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="e.g., 5"
+                    min="0"
+                    max="100"
+                    step="1"
+                    {...field}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      field.onChange(value === "" ? "" : parseInt(value));
+                    }}
+                    value={field.value === undefined ? "" : field.value}
+                    disabled={isLoading}
+                  />
+                </FormControl>
+                <FormDescription>Fibonacci: 1, 2, 3, 5, 8, 13...</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        {/* Sprint 4 Story 3: Tags */}
+        <FormField
+          control={form.control}
+          name="tags"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Tags</FormLabel>
+              <FormControl>
+                <TagsInput
+                  tags={field.value || []}
+                  onChange={field.onChange}
+                  disabled={isLoading}
+                  placeholder="Add tags (press Enter)..."
+                />
+              </FormControl>
+              <FormDescription>
+                Add tags to categorize this story (e.g., frontend, bug, urgent)
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <div className="flex justify-end gap-3">
           {onCancel && (
-            <Button
-              type="button"
-              variant="outline"
-              onClick={onCancel}
-              disabled={isLoading}
-            >
+            <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading}>
               Cancel
             </Button>
           )}
           <Button type="submit" disabled={isLoading}>
             {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {isEditing ? 'Update Story' : 'Create Story'}
+            {isEditing ? "Update Story" : "Create Story"}
           </Button>
         </div>
       </form>

components/projects/tags-input.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { X } from 'lucide-react';
+
+interface TagsInputProps {
+  tags: string[];
+  onChange: (tags: string[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export function TagsInput({
+  tags,
+  onChange,
+  disabled,
+  placeholder = 'Add tag and press Enter...',
+}: TagsInputProps) {
+  const [inputValue, setInputValue] = useState('');
+
+  const addTag = () => {
+    const tag = inputValue.trim().toLowerCase();
+    if (tag && !tags.includes(tag)) {
+      onChange([...tags, tag]);
+      setInputValue('');
+    }
+  };
+
+  const removeTag = (tagToRemove: string) => {
+    onChange(tags.filter((tag) => tag !== tagToRemove));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addTag();
+    } else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+      removeTag(tags[tags.length - 1]);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Display existing tags */}
+      {tags.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <Badge key={tag} variant="secondary" className="px-2 py-1">
+              {tag}
+              {!disabled && (
+                <button
+                  type="button"
+                  className="ml-1 hover:text-destructive"
+                  onClick={() => removeTag(tag)}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {/* Input for new tags */}
+      {!disabled && (
+        <Input
+          placeholder={placeholder}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={() => inputValue && addTag()}
+        />
+      )}
+    </div>
+  );
+}

components/providers/AuthGuard.tsx

@@ -7,16 +7,17 @@ import { useCurrentUser } from '@/lib/hooks/useAuth';
 
 export function AuthGuard({ children }: { children: React.ReactNode }) {
   const router = useRouter();
-  const { isAuthenticated, isLoading } = useAuthStore();
+  const { isAuthenticated, isHydrated } = useAuthStore();
   const { isLoading: isUserLoading } = useCurrentUser();
 
   useEffect(() => {
-    if (!isLoading && !isUserLoading && !isAuthenticated) {
+    if (isHydrated && !isUserLoading && !isAuthenticated) {
+      console.log('[AuthGuard] Redirecting to login - user not authenticated');
       router.push('/login');
     }
-  }, [isAuthenticated, isLoading, isUserLoading, router]);
+  }, [isAuthenticated, isHydrated, isUserLoading, router]);
 
-  if (isLoading || isUserLoading) {
+  if (!isHydrated || isUserLoading) {
     return (
       <div className="flex min-h-screen items-center justify-center">
         <div className="text-center">

components/tasks/task-card.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useState } from "react";
+import { Task, WorkItemStatus } from "@/types/project";
+import { useChangeTaskStatus, useUpdateTask, useDeleteTask } from "@/lib/hooks/use-tasks";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Pencil, Trash2, Clock, User, CheckCircle2, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { TaskEditDialog } from "./task-edit-dialog";
+
+interface TaskCardProps {
+  task: Task;
+  storyId: string;
+}
+
+const priorityColors = {
+  Critical: "bg-red-500 text-white",
+  High: "bg-orange-500 text-white",
+  Medium: "bg-yellow-500 text-white",
+  Low: "bg-blue-500 text-white",
+};
+
+const statusColors = {
+  Backlog: "text-slate-500",
+  Todo: "text-gray-500",
+  InProgress: "text-blue-500",
+  Done: "text-green-500",
+  Blocked: "text-red-500",
+};
+
+export function TaskCard({ task, storyId }: TaskCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const changeStatus = useChangeTaskStatus();
+  const updateTask = useUpdateTask();
+  const deleteTask = useDeleteTask();
+
+  const isDone = task.status === "Done";
+
+  const handleCheckboxChange = (checked: boolean) => {
+    const newStatus: WorkItemStatus = checked ? "Done" : "Todo";
+    changeStatus.mutate({ id: task.id, status: newStatus });
+  };
+
+  const handleDelete = () => {
+    if (confirm("Are you sure you want to delete this task?")) {
+      deleteTask.mutate(task.id);
+    }
+  };
+
+  return (
+    <Card
+      className={cn(
+        "cursor-pointer transition-all duration-200 hover:shadow-md",
+        isDone && "opacity-60"
+      )}
+      onClick={() => setIsExpanded(!isExpanded)}
+    >
+      <CardHeader className="p-4">
+        <div className="flex items-start gap-3">
+          {/* Checkbox */}
+          <div onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              checked={isDone}
+              onCheckedChange={handleCheckboxChange}
+              disabled={changeStatus.isPending}
+              className="mt-1"
+            />
+          </div>
+
+          {/* Task Content */}
+          <div className="min-w-0 flex-1">
+            <div className="mb-2 flex items-center gap-2">
+              <h4
+                className={cn(
+                  "text-sm font-medium",
+                  isDone && "text-muted-foreground line-through"
+                )}
+              >
+                {task.title}
+              </h4>
+              <Badge variant="secondary" className={cn("text-xs", priorityColors[task.priority])}>
+                {task.priority}
+              </Badge>
+            </div>
+
+            {/* Metadata */}
+            <div className="text-muted-foreground flex items-center gap-4 text-xs">
+              {task.estimatedHours && (
+                <div className="flex items-center gap-1">
+                  <Clock className="h-3 w-3" />
+                  <span>{task.estimatedHours}h</span>
+                </div>
+              )}
+              {task.assigneeId && (
+                <div className="flex items-center gap-1">
+                  <User className="h-3 w-3" />
+                  <span>Assigned</span>
+                </div>
+              )}
+              <div className={cn("flex items-center gap-1", statusColors[task.status])}>
+                {isDone ? <CheckCircle2 className="h-3 w-3" /> : <Circle className="h-3 w-3" />}
+                <span>{task.status}</span>
+              </div>
+            </div>
+
+            {/* Description (expanded) */}
+            {isExpanded && task.description && (
+              <div className="text-muted-foreground mt-3 text-sm">{task.description}</div>
+            )}
+          </div>
+
+          {/* Actions Menu */}
+          <div onClick={(e) => e.stopPropagation()}>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setIsEditDialogOpen(true)}>
+                  <Pencil className="mr-2 h-4 w-4" />
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={handleDelete} className="text-destructive">
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </CardHeader>
+
+      {/* Edit Dialog */}
+      <TaskEditDialog task={task} open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen} />
+    </Card>
+  );
+}

components/tasks/task-edit-dialog.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Task, UpdateTaskDto, WorkItemPriority } from '@/types/project';
+import { useUpdateTask } from '@/lib/hooks/use-tasks';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+
+interface TaskEditDialogProps {
+  task: Task;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const taskSchema = z.object({
+  title: z.string().min(1, 'Title is required').max(200, 'Title must be less than 200 characters'),
+  description: z.string().max(2000, 'Description must be less than 2000 characters').optional(),
+  priority: z.enum(['Low', 'Medium', 'High', 'Critical']),
+  estimatedHours: z
+    .number()
+    .min(0, 'Estimated hours must be positive')
+    .max(1000, 'Estimated hours must be less than 1000')
+    .optional()
+    .or(z.literal('')),
+  actualHours: z
+    .number()
+    .min(0, 'Actual hours must be positive')
+    .max(1000, 'Actual hours must be less than 1000')
+    .optional()
+    .or(z.literal('')),
+});
+
+type TaskFormValues = z.infer<typeof taskSchema>;
+
+export function TaskEditDialog({ task, open, onOpenChange }: TaskEditDialogProps) {
+  const updateTask = useUpdateTask();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const form = useForm<TaskFormValues>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      title: task.title,
+      description: task.description || '',
+      priority: task.priority,
+      estimatedHours: task.estimatedHours || ('' as any),
+      actualHours: task.actualHours || ('' as any),
+    },
+  });
+
+  // Reset form when task changes
+  useEffect(() => {
+    form.reset({
+      title: task.title,
+      description: task.description || '',
+      priority: task.priority,
+      estimatedHours: task.estimatedHours || ('' as any),
+      actualHours: task.actualHours || ('' as any),
+    });
+  }, [task, form]);
+
+  async function onSubmit(data: TaskFormValues) {
+    setIsSubmitting(true);
+    try {
+      const updateData: UpdateTaskDto = {
+        title: data.title,
+        description: data.description || undefined,
+        priority: data.priority,
+        estimatedHours: typeof data.estimatedHours === 'number' ? data.estimatedHours : undefined,
+        actualHours: typeof data.actualHours === 'number' ? data.actualHours : undefined,
+      };
+
+      await updateTask.mutateAsync({
+        id: task.id,
+        data: updateData,
+      });
+
+      onOpenChange(false);
+      form.reset();
+    } catch (error) {
+      // Error handling is done in the mutation hook
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Edit Task</DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Title */}
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Enter task title..."
+                      {...field}
+                      disabled={isSubmitting}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Description */}
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Enter task description..."
+                      rows={4}
+                      {...field}
+                      disabled={isSubmitting}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Provide additional details about this task
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Priority and Estimated Hours */}
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="priority"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Priority</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      disabled={isSubmitting}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select priority" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="Low">Low</SelectItem>
+                        <SelectItem value="Medium">Medium</SelectItem>
+                        <SelectItem value="High">High</SelectItem>
+                        <SelectItem value="Critical">Critical</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="estimatedHours"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Estimated Hours</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="e.g., 8"
+                        min="0"
+                        max="1000"
+                        step="0.5"
+                        {...field}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          field.onChange(value === '' ? '' : parseFloat(value));
+                        }}
+                        value={field.value === undefined ? '' : field.value}
+                        disabled={isSubmitting}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Actual Hours */}
+            <FormField
+              control={form.control}
+              name="actualHours"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Actual Hours</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      placeholder="e.g., 6"
+                      min="0"
+                      max="1000"
+                      step="0.5"
+                      {...field}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        field.onChange(value === '' ? '' : parseFloat(value));
+                      }}
+                      value={field.value === undefined ? '' : field.value}
+                      disabled={isSubmitting}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Time spent on this task so far
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Save Changes
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/tasks/task-list.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+import { useTasks } from '@/lib/hooks/use-tasks';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { TaskCard } from './task-card';
+import { TaskQuickAdd } from './task-quick-add';
+import { WorkItemStatus } from '@/types/project';
+
+interface TaskListProps {
+  storyId: string;
+}
+
+type FilterType = 'all' | 'active' | 'completed';
+type SortType = 'recent' | 'alphabetical' | 'status';
+
+export function TaskList({ storyId }: TaskListProps) {
+  const { data: tasks, isLoading, error } = useTasks(storyId);
+  const [filter, setFilter] = useState<FilterType>('all');
+  const [sort, setSort] = useState<SortType>('recent');
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-8 w-48" />
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => (
+              <Skeleton key={i} className="h-24 w-full" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <Alert variant="destructive">
+            <AlertDescription>
+              Failed to load tasks. Please try again.
+            </AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const filteredTasks = tasks?.filter(task => {
+    if (filter === 'active') return task.status !== 'Done';
+    if (filter === 'completed') return task.status === 'Done';
+    return true;
+  }) || [];
+
+  const sortedTasks = [...filteredTasks].sort((a, b) => {
+    if (sort === 'alphabetical') return a.title.localeCompare(b.title);
+    if (sort === 'status') return a.status.localeCompare(b.status);
+    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+  });
+
+  const completedCount = tasks?.filter(t => t.status === 'Done').length || 0;
+  const totalCount = tasks?.length || 0;
+  const progressPercentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0;
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Tasks</CardTitle>
+              <CardDescription>
+                {completedCount} of {totalCount} completed
+              </CardDescription>
+            </div>
+            <div className="flex items-center gap-4">
+              <Select value={filter} onValueChange={(v) => setFilter(v as FilterType)}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All</SelectItem>
+                  <SelectItem value="active">Active</SelectItem>
+                  <SelectItem value="completed">Completed</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select value={sort} onValueChange={(v) => setSort(v as SortType)}>
+                <SelectTrigger className="w-[160px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="recent">Recent</SelectItem>
+                  <SelectItem value="alphabetical">Alphabetical</SelectItem>
+                  <SelectItem value="status">By Status</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          {/* Progress bar */}
+          <div className="mt-4">
+            <div className="h-2 bg-secondary rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary transition-all duration-300"
+                style={{ width: `${progressPercentage}%` }}
+              />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <TaskQuickAdd storyId={storyId} />
+
+          {sortedTasks.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">
+                {filter === 'all'
+                  ? 'No tasks yet. Create your first task above!'
+                  : `No ${filter} tasks found.`}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {sortedTasks.map(task => (
+                <TaskCard key={task.id} task={task} storyId={storyId} />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

components/tasks/task-quick-add.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useCreateTask } from "@/lib/hooks/use-tasks";
+import { CreateTaskDto, WorkItemPriority } from "@/types/project";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Card, CardContent } from "@/components/ui/card";
+import { Plus, X } from "lucide-react";
+
+interface TaskQuickAddProps {
+  storyId: string;
+}
+
+const taskSchema = z.object({
+  title: z.string().min(1, "Title is required").max(200, "Title too long"),
+  priority: z.enum(["Critical", "High", "Medium", "Low"]),
+  estimatedHours: z.number().min(0).optional().or(z.literal("")),
+});
+
+type TaskFormData = z.infer<typeof taskSchema>;
+
+export function TaskQuickAdd({ storyId }: TaskQuickAddProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const createTask = useCreateTask();
+
+  const form = useForm<TaskFormData>({
+    resolver: zodResolver(taskSchema),
+    defaultValues: {
+      title: "",
+      priority: "Medium",
+      estimatedHours: undefined,
+    },
+  });
+
+  const onSubmit = async (data: TaskFormData) => {
+    const taskData: CreateTaskDto = {
+      storyId,
+      title: data.title,
+      priority: data.priority as WorkItemPriority,
+      estimatedHours: typeof data.estimatedHours === "number" ? data.estimatedHours : undefined,
+    };
+
+    createTask.mutate(taskData, {
+      onSuccess: () => {
+        form.reset();
+        // Keep form open for batch creation
+      },
+    });
+  };
+
+  const handleCancel = () => {
+    form.reset();
+    setIsOpen(false);
+  };
+
+  if (!isOpen) {
+    return (
+      <Button onClick={() => setIsOpen(true)} variant="outline" className="w-full" size="sm">
+        <Plus className="mr-2 h-4 w-4" />
+        Add Task
+      </Button>
+    );
+  }
+
+  return (
+    <Card className="border-dashed">
+      <CardContent className="pt-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <div className="mb-2 flex items-center justify-between">
+              <h4 className="text-sm font-medium">Quick Add Task</h4>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleCancel}
+                className="h-6 w-6 p-0"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title *</FormLabel>
+                  <FormControl>
+                    <Input placeholder="e.g., Implement login API" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="priority"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Priority</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select priority" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="Critical">Critical</SelectItem>
+                        <SelectItem value="High">High</SelectItem>
+                        <SelectItem value="Medium">Medium</SelectItem>
+                        <SelectItem value="Low">Low</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="estimatedHours"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Est. Hours</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="8"
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          field.onChange(value === "" ? "" : parseFloat(value));
+                        }}
+                        value={field.value === undefined ? "" : field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="flex gap-2">
+              <Button type="submit" size="sm" disabled={createTask.isPending} className="flex-1">
+                {createTask.isPending ? "Creating..." : "Add Task"}
+              </Button>
+              <Button type="button" variant="outline" size="sm" onClick={handleCancel}>
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+}

components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

components/ui/empty-state.tsx

@@ -0,0 +1,44 @@
+import { LucideIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+    variant?: 'default' | 'outline' | 'secondary';
+  };
+  className?: string;
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className
+}: EmptyStateProps) {
+  return (
+    <div className={cn(
+      'flex flex-col items-center justify-center py-12 px-4',
+      className
+    )}>
+      <Icon className="h-16 w-16 text-muted-foreground/50 mb-4" />
+      <h3 className="text-lg font-semibold mb-2">{title}</h3>
+      <p className="text-muted-foreground text-center mb-6 max-w-sm">
+        {description}
+      </p>
+      {action && (
+        <Button
+          onClick={action.onClick}
+          variant={action.variant || 'default'}
+        >
+          {action.label}
+        </Button>
+      )}
+    </div>
+  );
+}

components/ui/loading.tsx

@@ -0,0 +1,37 @@
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface LoadingProps {
+  className?: string;
+  text?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function Loading({ className, text, size = 'md' }: LoadingProps) {
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
+  };
+
+  return (
+    <div className={cn('flex items-center justify-center', className)}>
+      <Loader2 className={cn(sizeClasses[size], 'animate-spin mr-2')} />
+      {text && <span className="text-muted-foreground">{text}</span>}
+    </div>
+  );
+}
+
+// Full page loading component
+export function LoadingPage({ text = 'Loading...' }: { text?: string }) {
+  return (
+    <div className="flex min-h-[400px] items-center justify-center">
+      <Loading text={text} size="lg" />
+    </div>
+  );
+}
+
+// Inline loading for buttons or small areas
+export function LoadingInline({ text }: { text?: string }) {
+  return <Loading text={text} size="sm" />;
+}

components/ui/skip-link.tsx

@@ -0,0 +1,10 @@
+export function SkipLink() {
+  return (
+    <a
+      href="#main-content"
+      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+    >
+      Skip to main content
+    </a>
+  );
+}

eslint.config.mjs

@@ -1,10 +1,31 @@
 import { defineConfig, globalIgnores } from "eslint/config";
 import nextVitals from "eslint-config-next/core-web-vitals";
 import nextTs from "eslint-config-next/typescript";
+import jsxA11y from "eslint-plugin-jsx-a11y";
 
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
+  {
+    rules: {
+      // Enable recommended jsx-a11y rules (plugin already included in nextVitals)
+      ...jsxA11y.configs.recommended.rules,
+      // Enforce stricter accessibility rules
+      "jsx-a11y/anchor-is-valid": "error",
+      "jsx-a11y/alt-text": "error",
+      "jsx-a11y/aria-props": "error",
+      "jsx-a11y/aria-proptypes": "error",
+      "jsx-a11y/aria-unsupported-elements": "error",
+      "jsx-a11y/role-has-required-aria-props": "error",
+      "jsx-a11y/role-supports-aria-props": "error",
+      "jsx-a11y/label-has-associated-control": "error",
+      "jsx-a11y/click-events-have-key-events": "warn",
+      "jsx-a11y/no-static-element-interactions": "warn",
+      "jsx-a11y/interactive-supports-focus": "warn",
+      // TypeScript strict rules - prohibit 'any' type usage
+      "@typescript-eslint/no-explicit-any": "error",
+    },
+  },
   // Override default ignores of eslint-config-next.
   globalIgnores([
     // Default ignores of eslint-config-next:

lib/api/client.ts

@@ -49,9 +49,18 @@ apiClient.interceptors.request.use(
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
+    console.log('[API] Request:', {
+      method: config.method?.toUpperCase(),
+      url: config.url,
+      hasAuth: !!token,
+      data: config.data,
+    });
     return config;
   },
-  (error) => Promise.reject(error)
+  (error) => {
+    console.error('[API] Request interceptor error:', error);
+    return Promise.reject(error);
+  }
 );
 
 // Response interceptor: automatically refresh Token
@@ -74,8 +83,22 @@ const processQueue = (error: unknown, token: string | null = null) => {
 };
 
 apiClient.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    console.log('[API] Response:', {
+      status: response.status,
+      url: response.config.url,
+      data: response.data,
+    });
+    return response;
+  },
   async (error: AxiosError) => {
+    console.error('[API] Response error:', {
+      status: error.response?.status,
+      url: error.config?.url,
+      message: error.message,
+      data: error.response?.data,
+    });
+
     const originalRequest = error.config as InternalAxiosRequestConfig & {
       _retry?: boolean;
     };

lib/api/pm.ts

@@ -26,7 +26,15 @@ export const epicsApi = {
   },
 
   create: async (data: CreateEpicDto): Promise<Epic> => {
-    return api.post('/api/v1/epics', data);
+    console.log('[epicsApi.create] Sending request', { url: '/api/v1/epics', data });
+    try {
+      const result = await api.post<Epic>('/api/v1/epics', data);
+      console.log('[epicsApi.create] Request successful', result);
+      return result;
+    } catch (error) {
+      console.error('[epicsApi.create] Request failed', error);
+      throw error;
+    }
   },
 
   update: async (id: string, data: UpdateEpicDto): Promise<Epic> => {

lib/hooks/use-projects.ts

@@ -1,18 +1,19 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { projectsApi } from '@/lib/api/projects';
 import type { Project, CreateProjectDto, UpdateProjectDto } from '@/types/project';
+import { logger } from '@/lib/utils/logger';
 
 export function useProjects(page = 1, pageSize = 20) {
   return useQuery<Project[]>({
     queryKey: ['projects', page, pageSize],
     queryFn: async () => {
-      console.log('[useProjects] Fetching projects...', { page, pageSize });
+      logger.debug('[useProjects] Fetching projects...', { page, pageSize });
       try {
         const result = await projectsApi.getAll(page, pageSize);
-        console.log('[useProjects] Fetch successful:', result);
+        logger.debug('[useProjects] Fetch successful:', result);
         return result;
       } catch (error) {
-        console.error('[useProjects] Fetch failed:', error);
+        logger.error('[useProjects] Fetch failed:', error);
         throw error;
       }
     },

lib/hooks/use-stories.ts

@@ -3,19 +3,20 @@ import { storiesApi } from '@/lib/api/pm';
 import { epicsApi } from '@/lib/api/pm';
 import type { Story, CreateStoryDto, UpdateStoryDto, WorkItemStatus } from '@/types/project';
 import { toast } from 'sonner';
+import { logger } from '@/lib/utils/logger';
 
 // ==================== Query Hooks ====================
 export function useStories(epicId?: string) {
   return useQuery<Story[]>({
     queryKey: ['stories', epicId],
     queryFn: async () => {
-      console.log('[useStories] Fetching stories...', { epicId });
+      logger.debug('[useStories] Fetching stories...', { epicId });
       try {
         const result = await storiesApi.list(epicId);
-        console.log('[useStories] Fetch successful:', result);
+        logger.debug('[useStories] Fetch successful:', result);
         return result;
       } catch (error) {
-        console.error('[useStories] Fetch failed:', error);
+        logger.error('[useStories] Fetch failed:', error);
         throw error;
       }
     },
@@ -33,12 +34,12 @@ export function useProjectStories(projectId?: string) {
         throw new Error('projectId is required');
       }
 
-      console.log('[useProjectStories] Fetching all stories for project...', { projectId });
+      logger.debug('[useProjectStories] Fetching all stories for project...', { projectId });
 
       try {
         // First fetch all epics for the project
         const epics = await epicsApi.list(projectId);
-        console.log('[useProjectStories] Epics fetched:', epics.length);
+        logger.debug('[useProjectStories] Epics fetched:', epics.length);
 
         // Then fetch stories for each epic
         const storiesPromises = epics.map((epic) => storiesApi.list(epic.id));
@@ -46,11 +47,11 @@ export function useProjectStories(projectId?: string) {
 
         // Flatten the array of arrays into a single array
         const allStories = storiesArrays.flat();
-        console.log('[useProjectStories] Total stories fetched:', allStories.length);
+        logger.debug('[useProjectStories] Total stories fetched:', allStories.length);
 
         return allStories;
       } catch (error) {
-        console.error('[useProjectStories] Fetch failed:', error);
+        logger.error('[useProjectStories] Fetch failed:', error);
         throw error;
       }
     },
@@ -84,7 +85,7 @@ export function useCreateStory() {
       toast.success('Story created successfully!');
     },
     onError: (error: any) => {
-      console.error('[useCreateStory] Error:', error);
+      logger.error('[useCreateStory] Error:', error);
       toast.error(error.response?.data?.detail || 'Failed to create story');
     },
   });
@@ -109,7 +110,7 @@ export function useUpdateStory() {
       return { previousStory };
     },
     onError: (error: any, variables, context) => {
-      console.error('[useUpdateStory] Error:', error);
+      logger.error('[useUpdateStory] Error:', error);
 
       if (context?.previousStory) {
         queryClient.setQueryData(['stories', variables.id], context.previousStory);
@@ -138,7 +139,7 @@ export function useDeleteStory() {
       toast.success('Story deleted successfully!');
     },
     onError: (error: any) => {
-      console.error('[useDeleteStory] Error:', error);
+      logger.error('[useDeleteStory] Error:', error);
       toast.error(error.response?.data?.detail || 'Failed to delete story');
     },
   });
@@ -163,7 +164,7 @@ export function useChangeStoryStatus() {
       return { previousStory };
     },
     onError: (error: any, variables, context) => {
-      console.error('[useChangeStoryStatus] Error:', error);
+      logger.error('[useChangeStoryStatus] Error:', error);
 
       if (context?.previousStory) {
         queryClient.setQueryData(['stories', variables.id], context.previousStory);
@@ -193,7 +194,7 @@ export function useAssignStory() {
       toast.success('Story assigned successfully!');
     },
     onError: (error: any) => {
-      console.error('[useAssignStory] Error:', error);
+      logger.error('[useAssignStory] Error:', error);
       toast.error(error.response?.data?.detail || 'Failed to assign story');
     },
   });

lib/hooks/use-tasks.ts

@@ -2,19 +2,20 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { tasksApi } from '@/lib/api/pm';
 import type { Task, CreateTaskDto, UpdateTaskDto, WorkItemStatus } from '@/types/project';
 import { toast } from 'sonner';
+import { logger } from '@/lib/utils/logger';
 
 // ==================== Query Hooks ====================
 export function useTasks(storyId?: string) {
   return useQuery<Task[]>({
     queryKey: ['tasks', storyId],
     queryFn: async () => {
-      console.log('[useTasks] Fetching tasks...', { storyId });
+      logger.debug('[useTasks] Fetching tasks...', { storyId });
       try {
         const result = await tasksApi.list(storyId);
-        console.log('[useTasks] Fetch successful:', result);
+        logger.debug('[useTasks] Fetch successful:', result);
         return result;
       } catch (error) {
-        console.error('[useTasks] Fetch failed:', error);
+        logger.error('[useTasks] Fetch failed:', error);
         throw error;
       }
     },
@@ -47,7 +48,7 @@ export function useCreateTask() {
       toast.success('Task created successfully!');
     },
     onError: (error: any) => {
-      console.error('[useCreateTask] Error:', error);
+      logger.error('[useCreateTask] Error:', error);
       toast.error(error.response?.data?.detail || 'Failed to create task');
     },
   });
@@ -72,7 +73,7 @@ export function useUpdateTask() {
       return { previousTask };
     },
     onError: (error: any, variables, context) => {
-      console.error('[useUpdateTask] Error:', error);
+      logger.error('[useUpdateTask] Error:', error);
 
       if (context?.previousTask) {
         queryClient.setQueryData(['tasks', variables.id], context.previousTask);
@@ -101,7 +102,7 @@ export function useDeleteTask() {
       toast.success('Task deleted successfully!');
     },
     onError: (error: any) => {
-      console.error('[useDeleteTask] Error:', error);
+      logger.error('[useDeleteTask] Error:', error);
       toast.error(error.response?.data?.detail || 'Failed to delete task');
     },
   });
@@ -126,7 +127,7 @@ export function useChangeTaskStatus() {
       return { previousTask };
     },
     onError: (error: any, variables, context) => {
-      console.error('[useChangeTaskStatus] Error:', error);
+      logger.error('[useChangeTaskStatus] Error:', error);
 
       if (context?.previousTask) {
         queryClient.setQueryData(['tasks', variables.id], context.previousTask);
@@ -156,7 +157,7 @@ export function useAssignTask() {
       toast.success('Task assigned successfully!');
     },
     onError: (error: any) => {
-      console.error('[useAssignTask] Error:', error);
+      logger.error('[useAssignTask] Error:', error);
       toast.error(error.response?.data?.detail || 'Failed to assign task');
     },
   });

lib/hooks/useAuth.ts

@@ -30,16 +30,20 @@ export function useLogin() {
       tokenManager.setAccessToken(data.accessToken);
       tokenManager.setRefreshToken(data.refreshToken);
 
+      // Map backend field names to frontend User type
+      // Backend returns: { Id, TenantId, Email, FullName, ... }
+      // Frontend expects: { id, tenantId, email, fullName, ... }
+      const backendUser = data.user;
       setUser({
-        id: data.user.id,
-        email: data.user.email,
-        fullName: data.user.fullName,
-        tenantId: data.user.tenantId,
-        tenantName: data.user.tenantName,
-        role: data.user.role,
-        isEmailVerified: data.user.isEmailVerified,
-        createdAt: data.user.createdAt || new Date().toISOString(),
-        updatedAt: data.user.updatedAt,
+        id: backendUser.id || backendUser.Id, // Handle both casing
+        email: backendUser.email || backendUser.Email,
+        fullName: backendUser.fullName || backendUser.FullName,
+        tenantId: backendUser.tenantId || backendUser.TenantId,
+        tenantName: data.tenant?.name || data.tenant?.Name || 'Unknown',
+        role: data.tenant?.role || backendUser.role || 'TenantMember',
+        isEmailVerified: backendUser.isEmailVerified ?? backendUser.IsEmailVerified ?? false,
+        createdAt: backendUser.createdAt || backendUser.CreatedAt || new Date().toISOString(),
+        updatedAt: backendUser.updatedAt || backendUser.UpdatedAt,
       });
 
       router.push('/dashboard');
@@ -95,9 +99,24 @@ export function useCurrentUser() {
     queryKey: ['currentUser'],
     queryFn: async () => {
       const { data } = await apiClient.get(API_ENDPOINTS.ME);
-      setUser(data);
+
+      // Map backend /me response to frontend User type
+      // Backend returns: { userId, tenantId, email, fullName, tenantSlug, tenantRole, role }
+      // Frontend expects: { id, tenantId, email, fullName, tenantName, role, isEmailVerified, createdAt }
+      const mappedUser = {
+        id: data.userId || data.id, // Backend uses 'userId'
+        email: data.email,
+        fullName: data.fullName,
+        tenantId: data.tenantId,
+        tenantName: data.tenantSlug || 'Unknown', // Use tenantSlug as tenantName fallback
+        role: data.tenantRole || data.role || 'TenantMember',
+        isEmailVerified: true, // Assume verified if token is valid
+        createdAt: new Date().toISOString(),
+      };
+
+      setUser(mappedUser);
       setLoading(false);
-      return data;
+      return mappedUser;
     },
     enabled: !!tokenManager.getAccessToken(),
     retry: false,

lib/hooks/useNotificationHub.ts

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { SignalRConnectionManager } from '@/lib/signalr/ConnectionManager';
 import { SIGNALR_CONFIG } from '@/lib/signalr/config';
 import { useAuthStore } from '@/stores/authStore';
+import { logger } from '@/lib/utils/logger';
 
 export interface Notification {
   message: string;
@@ -32,14 +33,14 @@ export function useNotificationHub() {
 
     // 监听通知事件
     manager.on('Notification', (notification: Notification) => {
-      console.log('[NotificationHub] Received notification:', notification);
+      logger.debug('[NotificationHub] Received notification:', notification);
       setNotifications((prev) => [notification, ...prev].slice(0, 50)); // 保留最近 50 条
     });
 
     manager.on(
       'NotificationRead',
       (data: { NotificationId: string; ReadAt: string }) => {
-        console.log('[NotificationHub] Notification read:', data);
+        logger.debug('[NotificationHub] Notification read:', data);
       }
     );
 
@@ -58,7 +59,7 @@ export function useNotificationHub() {
     try {
       await managerRef.current.invoke('MarkAsRead', notificationId);
     } catch (error) {
-      console.error(
+      logger.error(
         '[NotificationHub] Error marking notification as read:',
         error
       );

lib/hooks/useProjectHub.ts

@@ -5,6 +5,7 @@ import { SignalRConnectionManager } from '@/lib/signalr/ConnectionManager';
 import { SIGNALR_CONFIG } from '@/lib/signalr/config';
 import { useAuthStore } from '@/stores/authStore';
 import type { ProjectHubEventCallbacks } from '@/lib/signalr/types';
+import { logger } from '@/lib/utils/logger';
 
 // Re-export for backward compatibility
 interface UseProjectHubOptions extends ProjectHubEventCallbacks {}
@@ -30,17 +31,17 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
     // PROJECT EVENTS (3)
     // ============================================
     manager.on('ProjectCreated', (data: any) => {
-      console.log('[ProjectHub] Project created:', data);
+      logger.debug('[ProjectHub] Project created:', data);
       options?.onProjectCreated?.(data);
     });
 
     manager.on('ProjectUpdated', (data: any) => {
-      console.log('[ProjectHub] Project updated:', data);
+      logger.debug('[ProjectHub] Project updated:', data);
       options?.onProjectUpdated?.(data);
     });
 
     manager.on('ProjectArchived', (data: any) => {
-      console.log('[ProjectHub] Project archived:', data);
+      logger.debug('[ProjectHub] Project archived:', data);
       options?.onProjectArchived?.(data);
     });
 
@@ -48,17 +49,17 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
     // EPIC EVENTS (3)
     // ============================================
     manager.on('EpicCreated', (data: any) => {
-      console.log('[ProjectHub] Epic created:', data);
+      logger.debug('[ProjectHub] Epic created:', data);
       options?.onEpicCreated?.(data);
     });
 
     manager.on('EpicUpdated', (data: any) => {
-      console.log('[ProjectHub] Epic updated:', data);
+      logger.debug('[ProjectHub] Epic updated:', data);
       options?.onEpicUpdated?.(data);
     });
 
     manager.on('EpicDeleted', (data: any) => {
-      console.log('[ProjectHub] Epic deleted:', data);
+      logger.debug('[ProjectHub] Epic deleted:', data);
       options?.onEpicDeleted?.(data);
     });
 
@@ -66,17 +67,17 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
     // STORY EVENTS (3)
     // ============================================
     manager.on('StoryCreated', (data: any) => {
-      console.log('[ProjectHub] Story created:', data);
+      logger.debug('[ProjectHub] Story created:', data);
       options?.onStoryCreated?.(data);
     });
 
     manager.on('StoryUpdated', (data: any) => {
-      console.log('[ProjectHub] Story updated:', data);
+      logger.debug('[ProjectHub] Story updated:', data);
       options?.onStoryUpdated?.(data);
     });
 
     manager.on('StoryDeleted', (data: any) => {
-      console.log('[ProjectHub] Story deleted:', data);
+      logger.debug('[ProjectHub] Story deleted:', data);
       options?.onStoryDeleted?.(data);
     });
 
@@ -84,22 +85,22 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
     // TASK EVENTS (4)
     // ============================================
     manager.on('TaskCreated', (data: any) => {
-      console.log('[ProjectHub] Task created:', data);
+      logger.debug('[ProjectHub] Task created:', data);
       options?.onTaskCreated?.(data);
     });
 
     manager.on('TaskUpdated', (data: any) => {
-      console.log('[ProjectHub] Task updated:', data);
+      logger.debug('[ProjectHub] Task updated:', data);
       options?.onTaskUpdated?.(data);
     });
 
     manager.on('TaskDeleted', (data: any) => {
-      console.log('[ProjectHub] Task deleted:', data);
+      logger.debug('[ProjectHub] Task deleted:', data);
       options?.onTaskDeleted?.(data);
     });
 
     manager.on('TaskAssigned', (data: any) => {
-      console.log('[ProjectHub] Task assigned:', data);
+      logger.debug('[ProjectHub] Task assigned:', data);
       options?.onTaskAssigned?.(data);
     });
 
@@ -107,22 +108,22 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
     // LEGACY ISSUE EVENTS (Backward Compatibility)
     // ============================================
     manager.on('IssueCreated', (data: any) => {
-      console.log('[ProjectHub] Issue created:', data);
+      logger.debug('[ProjectHub] Issue created:', data);
       options?.onIssueCreated?.(data);
     });
 
     manager.on('IssueUpdated', (data: any) => {
-      console.log('[ProjectHub] Issue updated:', data);
+      logger.debug('[ProjectHub] Issue updated:', data);
       options?.onIssueUpdated?.(data);
     });
 
     manager.on('IssueDeleted', (data: any) => {
-      console.log('[ProjectHub] Issue deleted:', data);
+      logger.debug('[ProjectHub] Issue deleted:', data);
       options?.onIssueDeleted?.(data);
     });
 
     manager.on('IssueStatusChanged', (data: any) => {
-      console.log('[ProjectHub] Issue status changed:', data);
+      logger.debug('[ProjectHub] Issue status changed:', data);
       options?.onIssueStatusChanged?.(data);
     });
 
@@ -130,17 +131,17 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
     // USER COLLABORATION EVENTS
     // ============================================
     manager.on('UserJoinedProject', (data: any) => {
-      console.log('[ProjectHub] User joined:', data);
+      logger.debug('[ProjectHub] User joined:', data);
       options?.onUserJoinedProject?.(data);
     });
 
     manager.on('UserLeftProject', (data: any) => {
-      console.log('[ProjectHub] User left:', data);
+      logger.debug('[ProjectHub] User left:', data);
       options?.onUserLeftProject?.(data);
     });
 
     manager.on('TypingIndicator', (data: any) => {
-      console.log('[ProjectHub] Typing indicator:', data);
+      logger.debug('[ProjectHub] Typing indicator:', data);
       options?.onTypingIndicator?.(data);
     });
 
@@ -158,9 +159,9 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
 
     try {
       await managerRef.current.invoke('JoinProject', projectId);
-      console.log(`[ProjectHub] Joined project ${projectId}`);
+      logger.debug(`[ProjectHub] Joined project ${projectId}`);
     } catch (error) {
-      console.error('[ProjectHub] Error joining project:', error);
+      logger.error('[ProjectHub] Error joining project:', error);
     }
   }, []);
 
@@ -170,9 +171,9 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
 
     try {
       await managerRef.current.invoke('LeaveProject', projectId);
-      console.log(`[ProjectHub] Left project ${projectId}`);
+      logger.debug(`[ProjectHub] Left project ${projectId}`);
     } catch (error) {
-      console.error('[ProjectHub] Error leaving project:', error);
+      logger.error('[ProjectHub] Error leaving project:', error);
     }
   }, []);
 
@@ -189,7 +190,7 @@ export function useProjectHub(projectId?: string, options?: UseProjectHubOptions
           isTyping
         );
       } catch (error) {
-        console.error('[ProjectHub] Error sending typing indicator:', error);
+        logger.error('[ProjectHub] Error sending typing indicator:', error);
       }
     },
     []

lib/signalr/ConnectionManager.ts

@@ -36,7 +36,8 @@ export class SignalRConnectionManager {
 
     this.connection = new signalR.HubConnectionBuilder()
       .withUrl(this.hubUrl, {
-        accessTokenFactory: () => token,
+        // Use dynamic token factory to always get the latest token
+        accessTokenFactory: () => tokenManager.getAccessToken() || '',
         // 备用方案：使用 query string（WebSocket 升级需要）
         // transport: signalR.HttpTransportType.WebSockets,
       })

lib/signalr/SignalRContext.tsx

@@ -6,6 +6,7 @@ import { SignalRConnectionManager, ConnectionState } from './ConnectionManager';
 import { SIGNALR_CONFIG } from './config';
 import { useAuthStore } from '@/stores/authStore';
 import { toast } from 'sonner';
+import { logger } from '@/lib/utils/logger';
 
 // ============================================
 // TYPE DEFINITIONS
@@ -110,12 +111,12 @@ export function SignalRProvider({
 
   const connect = useCallback(async () => {
     if (!isAuthenticated) {
-      console.warn('[SignalRContext] Cannot connect: user not authenticated');
+      logger.warn('[SignalRContext] Cannot connect: user not authenticated');
       return;
     }
 
     if (managerRef.current?.state === 'connected') {
-      console.log('[SignalRContext] Already connected');
+      logger.debug('[SignalRContext] Already connected');
       return;
     }
 
@@ -148,7 +149,7 @@ export function SignalRProvider({
     try {
       await manager.start();
     } catch (error) {
-      console.error('[SignalRContext] Connection error:', error);
+      logger.error('[SignalRContext] Connection error:', error);
       if (showToasts) {
         toast.error('Failed to connect to real-time updates');
       }

package-lock.json

@@ -15,6 +15,7 @@
         "@microsoft/signalr": "^9.0.6",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
@@ -31,6 +32,7 @@
         "next-themes": "^0.4.6",
         "react": "19.2.0",
         "react-dom": "19.2.0",
+        "react-error-boundary": "^6.0.0",
         "react-hook-form": "^7.66.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
@@ -44,6 +46,8 @@
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.0.1",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
+        "lint-staged": "^16.2.6",
         "prettier": "^3.6.2",
         "prettier-plugin-tailwindcss": "^0.7.1",
         "tailwindcss": "^4",
@@ -256,6 +260,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -1478,6 +1491,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -3260,6 +3303,35 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.2.0.tgz",
+      "integrity": "sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3718,6 +3790,39 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.1.1.tgz",
+      "integrity": "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^7.1.0",
+        "string-width": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3753,6 +3858,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3765,6 +3877,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz",
+      "integrity": "sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4013,6 +4135,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -4642,6 +4777,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/eventsource": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
@@ -4898,6 +5040,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
+      "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5388,6 +5543,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -6049,6 +6220,49 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lint-staged": {
+      "version": "16.2.6",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.2.6.tgz",
+      "integrity": "sha512-s1gphtDbV4bmW1eylXpVMk2u7is7YsrLl8hzrtvC70h4ByhcMLZFY01Fx05ZUDNuv1H8HO4E+e2zgejV1jVwNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^14.0.1",
+        "listr2": "^9.0.5",
+        "micromatch": "^4.0.8",
+        "nano-spawn": "^2.0.0",
+        "pidtree": "^0.6.0",
+        "string-argv": "^0.3.2",
+        "yaml": "^2.8.1"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=20.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^5.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -6072,6 +6286,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -6168,6 +6402,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6198,6 +6445,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nano-spawn": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nano-spawn/-/nano-spawn-2.0.0.tgz",
+      "integrity": "sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/nano-spawn?sponsor=1"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -6479,6 +6739,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -6606,6 +6882,19 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -6837,6 +7126,18 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.0.0.tgz",
+      "integrity": "sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.66.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz",
@@ -7020,6 +7321,23 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -7031,6 +7349,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -7336,6 +7661,49 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/sonner": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
@@ -7376,6 +7744,33 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz",
+      "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -7489,6 +7884,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -8162,6 +8573,62 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
@@ -8190,6 +8657,19 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "start": "next start",
     "lint": "eslint",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css}\"",
     "docker:dev": "docker-compose up -d postgres redis backend",
     "docker:all": "docker-compose up -d",
     "docker:stop": "docker-compose down",
@@ -29,6 +30,7 @@
     "@microsoft/signalr": "^9.0.6",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
@@ -45,6 +47,7 @@
     "next-themes": "^0.4.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.66.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
@@ -58,10 +61,21 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.0.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "lint-staged": "^16.2.6",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{json,css}": [
+      "prettier --write"
+    ]
   }
 }

stores/authStore.ts

@@ -6,6 +6,7 @@ interface AuthState {
   user: User | null;
   isAuthenticated: boolean;
   isLoading: boolean;
+  isHydrated: boolean;
 
   setUser: (user: User) => void;
   clearUser: () => void;
@@ -18,6 +19,7 @@ export const useAuthStore = create<AuthState>()(
       user: null,
       isAuthenticated: false,
       isLoading: true,
+      isHydrated: false,
 
       setUser: (user) =>
         set({ user, isAuthenticated: true, isLoading: false }),
@@ -31,6 +33,38 @@ export const useAuthStore = create<AuthState>()(
         user: state.user,
         isAuthenticated: state.isAuthenticated,
       }),
+      // 数据迁移函数：将旧格式的 userId 转换为新格式的 id
+      migrate: (persistedState: any, version: number) => {
+        console.log('[AuthStore] Migrating persisted state', { version, persistedState });
+
+        // 如果存在旧的 userId 字段，迁移到 id
+        if (persistedState?.user?.userId && !persistedState?.user?.id) {
+          console.log('[AuthStore] Migrating userId to id');
+          persistedState.user.id = persistedState.user.userId;
+          delete persistedState.user.userId;
+        }
+
+        return persistedState;
+      },
+      onRehydrateStorage: () => (state) => {
+        console.log('[AuthStore] Hydration started');
+        if (state) {
+          // 额外的安全检查：确保 user 对象有 id 字段
+          if (state.user && (state.user as any).userId && !state.user.id) {
+            console.log('[AuthStore] Post-hydration migration: userId -> id');
+            state.user.id = (state.user as any).userId;
+            delete (state.user as any).userId;
+          }
+
+          state.isHydrated = true;
+          state.isLoading = false; // 水合完成后停止 loading
+          console.log('[AuthStore] Hydration completed', {
+            userId: state.user?.id,
+            isAuthenticated: state.isAuthenticated,
+            isLoading: state.isLoading
+          });
+        }
+      },
     }
   )
 );

types/project.ts

@@ -71,6 +71,10 @@ export interface Story {
   estimatedHours?: number;
   actualHours?: number;
   assigneeId?: string;
+  assigneeName?: string;  // Sprint 4 Story 3: Assignee display name
+  acceptanceCriteria?: string[];  // Sprint 4 Story 3: Acceptance criteria list
+  tags?: string[];  // Sprint 4 Story 3: Tags/labels
+  storyPoints?: number;  // Sprint 4 Story 3: Story points
   tenantId: string;
   createdAt: string;
   updatedAt: string;
@@ -84,6 +88,10 @@ export interface CreateStoryDto {
   priority: WorkItemPriority;
   estimatedHours?: number;
   createdBy: string;  // Required field matching backend API
+  assigneeId?: string;  // Sprint 4 Story 3
+  acceptanceCriteria?: string[];  // Sprint 4 Story 3
+  tags?: string[];  // Sprint 4 Story 3
+  storyPoints?: number;  // Sprint 4 Story 3
 }
 
 export interface UpdateStoryDto {
@@ -92,6 +100,10 @@ export interface UpdateStoryDto {
   priority?: WorkItemPriority;
   estimatedHours?: number;
   actualHours?: number;
+  assigneeId?: string;  // Sprint 4 Story 3
+  acceptanceCriteria?: string[];  // Sprint 4 Story 3
+  tags?: string[];  // Sprint 4 Story 3
+  storyPoints?: number;  // Sprint 4 Story 3
 }
 
 // ==================== Task ====================