feat(frontend): Refactor Kanban board to focus on Story management

Refactored the Kanban board from a mixed Epic/Story/Task view to focus exclusively on Stories, which are the right granularity for Kanban management.

Changes:
- Created StoryCard component with Epic breadcrumb, priority badges, and estimated hours display
- Updated KanbanColumn to use Story type and display epic names
- Created CreateStoryDialog for story creation with epic selection
- Added useProjectStories hook to fetch all stories across epics for a project
- Refactored Kanban page to show Stories only with drag-and-drop status updates
- Updated SignalR event handlers to focus on Story events only
- Changed UI text from 'New Issue' to 'New Story' and 'update issue status' to 'update story status'
- Implemented story status change via useChangeStoryStatus hook

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

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

components/features/kanban/KanbanColumn.tsx

@@ -3,16 +3,18 @@
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Issue } from '@/lib/api/issues';
-import { IssueCard } from './IssueCard';
+import { Story } from '@/types/project';
+import { StoryCard } from './StoryCard';
 
 interface KanbanColumnProps {
   id: string;
   title: string;
-  issues: Issue[];
+  stories: Story[];
+  epicNames?: Record<string, string>; // Map of epicId -> epicName
+  taskCounts?: Record<string, number>; // Map of storyId -> taskCount
 }
 
-export function KanbanColumn({ id, title, issues }: KanbanColumnProps) {
+export function KanbanColumn({ id, title, stories, epicNames = {}, taskCounts = {} }: KanbanColumnProps) {
   const { setNodeRef } = useDroppable({ id });
 
   return (
@@ -20,21 +22,26 @@ export function KanbanColumn({ id, title, issues }: KanbanColumnProps) {
       <CardHeader className="pb-3">
         <CardTitle className="text-sm font-medium flex items-center justify-between">
           <span>{title}</span>
-          <span className="text-muted-foreground">{issues.length}</span>
+          <span className="text-muted-foreground">{stories.length}</span>
         </CardTitle>
       </CardHeader>
       <CardContent ref={setNodeRef} className="space-y-2 min-h-[400px]">
         <SortableContext
-          items={issues.map((i) => i.id)}
+          items={stories.map((s) => s.id)}
           strategy={verticalListSortingStrategy}
         >
-          {issues.map((issue) => (
-            <IssueCard key={issue.id} issue={issue} />
+          {stories.map((story) => (
+            <StoryCard
+              key={story.id}
+              story={story}
+              epicName={epicNames[story.epicId]}
+              taskCount={taskCounts[story.id]}
+            />
           ))}
         </SortableContext>
-        {issues.length === 0 && (
+        {stories.length === 0 && (
           <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25">
-            <p className="text-sm text-muted-foreground">No issues</p>
+            <p className="text-sm text-muted-foreground">No stories</p>
           </div>
         )}
       </CardContent>

components/features/kanban/StoryCard.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Card, CardContent } from '@/components/ui/card';
+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;
+  epicName?: string;
+  taskCount?: number;
+}
+
+export function StoryCard({ story, epicName, taskCount }: StoryCardProps) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: story.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const priorityColors = {
+    Low: 'bg-gray-100 text-gray-700 border-gray-300',
+    Medium: 'bg-blue-100 text-blue-700 border-blue-300',
+    High: 'bg-orange-100 text-orange-700 border-orange-300',
+    Critical: 'bg-red-100 text-red-700 border-red-300',
+  };
+
+  const statusColors = {
+    Backlog: 'bg-gray-100 text-gray-600',
+    Todo: 'bg-blue-100 text-blue-600',
+    InProgress: 'bg-yellow-100 text-yellow-700',
+    Done: 'bg-green-100 text-green-700',
+  };
+
+  // Get assignee initials
+  const assigneeInitials = useMemo(() => {
+    if (!story.assigneeId) return null;
+    // For now, just use first two letters. In real app, fetch user data
+    return story.assigneeId.substring(0, 2).toUpperCase();
+  }, [story.assigneeId]);
+
+  // Calculate progress (if both estimated and actual hours exist)
+  const hoursDisplay = useMemo(() => {
+    if (story.estimatedHours) {
+      if (story.actualHours) {
+        return `${story.actualHours}/${story.estimatedHours}h`;
+      }
+      return `0/${story.estimatedHours}h`;
+    }
+    return null;
+  }, [story.estimatedHours, story.actualHours]);
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className="cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
+    >
+      <CardContent className="p-3 space-y-2">
+        {/* Header: Story icon + Task count */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FileText className="w-4 h-4 text-green-600" />
+            <span className="text-xs font-medium text-gray-600">Story</span>
+          </div>
+          {taskCount !== undefined && taskCount > 0 && (
+            <Badge variant="secondary" className="text-xs">
+              <CheckSquare className="w-3 h-3 mr-1" />
+              {taskCount} {taskCount === 1 ? 'task' : 'tasks'}
+            </Badge>
+          )}
+        </div>
+
+        {/* Epic breadcrumb */}
+        {epicName && (
+          <div className="flex items-center gap-1 text-xs text-gray-500">
+            <FolderKanban className="w-3 h-3" />
+            <span className="truncate max-w-[200px]" title={epicName}>
+              {epicName}
+            </span>
+          </div>
+        )}
+
+        {/* Title */}
+        <h3 className="text-sm font-medium line-clamp-2" title={story.title}>
+          {story.title}
+        </h3>
+
+        {/* Description (if available) */}
+        {story.description && (
+          <p className="text-xs text-gray-600 line-clamp-2" title={story.description}>
+            {story.description}
+          </p>
+        )}
+
+        {/* Footer: Priority, Hours, Assignee */}
+        <div className="flex items-center justify-between pt-2 border-t">
+          <div className="flex items-center gap-2">
+            <Badge
+              variant="outline"
+              className={`${priorityColors[story.priority]} text-xs`}
+            >
+              {story.priority}
+            </Badge>
+            <Badge
+              variant="outline"
+              className={`${statusColors[story.status]} text-xs`}
+            >
+              {story.status}
+            </Badge>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {/* Hours display */}
+            {hoursDisplay && (
+              <div className="flex items-center gap-1 text-xs text-gray-500">
+                <Clock className="w-3 h-3" />
+                <span>{hoursDisplay}</span>
+              </div>
+            )}
+
+            {/* Assignee avatar */}
+            {assigneeInitials && (
+              <Avatar className="h-6 w-6">
+                <AvatarFallback className="text-xs">
+                  {assigneeInitials}
+                </AvatarFallback>
+              </Avatar>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/features/stories/CreateStoryDialog.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useCreateStory } from '@/lib/hooks/use-stories';
+import { useEpics } from '@/lib/hooks/use-epics';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Loader2 } from 'lucide-react';
+
+const createStorySchema = z.object({
+  epicId: z.string().min(1, 'Epic is required'),
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().optional(),
+  priority: z.enum(['Low', 'Medium', 'High', 'Critical']),
+  estimatedHours: z.number().min(0).optional(),
+});
+
+interface CreateStoryDialogProps {
+  projectId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CreateStoryDialog({
+  projectId,
+  open,
+  onOpenChange,
+}: CreateStoryDialogProps) {
+  const form = useForm({
+    resolver: zodResolver(createStorySchema),
+    defaultValues: {
+      epicId: '',
+      title: '',
+      description: '',
+      priority: 'Medium' as const,
+      estimatedHours: 0,
+    },
+  });
+
+  const { data: epics, isLoading: epicsLoading } = useEpics(projectId);
+  const createMutation = useCreateStory();
+
+  const onSubmit = (data: z.infer<typeof createStorySchema>) => {
+    createMutation.mutate(data, {
+      onSuccess: () => {
+        form.reset();
+        onOpenChange(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Create New Story</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Epic Selection */}
+            <FormField
+              control={form.control}
+              name="epicId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Epic</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                    disabled={epicsLoading}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select an epic..." />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {epicsLoading ? (
+                        <div className="flex items-center justify-center p-2">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        </div>
+                      ) : epics && epics.length > 0 ? (
+                        epics.map((epic) => (
+                          <SelectItem key={epic.id} value={epic.id}>
+                            {epic.name}
+                          </SelectItem>
+                        ))
+                      ) : (
+                        <div className="p-2 text-sm text-muted-foreground">
+                          No epics available. Create an epic first.
+                        </div>
+                      )}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Title */}
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Story title..." {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Description */}
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Describe the story..."
+                      rows={4}
+                      {...field}
+                    />
+                  </FormControl>
+                  <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}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </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"
+                        min="0"
+                        step="0.5"
+                        placeholder="0"
+                        {...field}
+                        onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Actions */}
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={createMutation.isPending}>
+                {createMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  'Create Story'
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}