@locusai/web 0.1.7 → 0.2.2

package/src/components/backlog/CompletedSprintsSection.tsx

@@ -0,0 +1,77 @@
+/**
+ * Completed Sprints Section Component
+ *
+ * Displays a collapsible section containing all completed sprints.
+ * Allows viewing historical sprint data and completed tasks.
+ */
+
+"use client";
+
+import { type Sprint, type Task } from "@locusai/shared";
+import { motion } from "framer-motion";
+import { Archive } from "lucide-react";
+import { BacklogSection } from "./BacklogSection";
+import { CompletedSprintItem } from "./CompletedSprintItem";
+
+interface CompletedSprintsSectionProps {
+  /** Completed sprints */
+  sprints: Sprint[];
+  /** Whether section is expanded */
+  isExpanded: boolean;
+  /** Called when toggling section */
+  onToggle: () => void;
+  /** Function to get tasks for a sprint */
+  getSprintTasks: (sprintId: string) => Task[];
+  /** Set of expanded sprint IDs */
+  expandedSprints: Set<string>;
+  /** Called when toggling sprint item */
+  onToggleSprint: (section: string) => void;
+  /** Called when task is clicked */
+  onTaskClick: (taskId: string) => void;
+}
+
+export function CompletedSprintsSection({
+  sprints,
+  isExpanded,
+  onToggle,
+  getSprintTasks,
+  expandedSprints,
+  onToggleSprint,
+  onTaskClick,
+}: CompletedSprintsSectionProps) {
+  if (sprints.length === 0) return null;
+
+  return (
+    <motion.div
+      layout="position"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.15, delay: 0.1 }}
+      className="pt-4 border-t border-border/50"
+    >
+      <BacklogSection
+        id="completed"
+        title="Completed Sprints"
+        icon={<Archive size={18} className="text-emerald-500/80" />}
+        count={sprints.length}
+        isExpanded={isExpanded}
+        onToggle={onToggle}
+        accentColor="green"
+      >
+        <div className="space-y-2 mt-2">
+          {sprints.map((sprint) => (
+            <CompletedSprintItem
+              key={sprint.id}
+              name={sprint.name}
+              taskCount={getSprintTasks(sprint.id).length}
+              tasks={getSprintTasks(sprint.id)}
+              isExpanded={expandedSprints.has(`completed-sprint-${sprint.id}`)}
+              onToggle={() => onToggleSprint(`completed-sprint-${sprint.id}`)}
+              onTaskClick={onTaskClick}
+            />
+          ))}
+        </div>
+      </BacklogSection>
+    </motion.div>
+  );
+}

package/src/components/backlog/SprintSection.tsx

@@ -0,0 +1,155 @@
+/**
+ * Sprint Section Component
+ *
+ * Displays a sprint with its tasks in the backlog view.
+ * Supports start/complete actions and drag-drop task management.
+ *
+ * @example
+ * <SprintSection
+ *   sprint={sprint}
+ *   tasks={sprintTasks}
+ *   isExpanded={true}
+ *   onToggle={handleToggle}
+ *   isActive={true}
+ *   onStart={handleStart}
+ *   onComplete={handleComplete}
+ *   onTaskClick={handleSelectTask}
+ *   onTaskDelete={handleDeleteTask}
+ * />
+ */
+
+"use client";
+
+import { type Sprint, type Task } from "@locusai/shared";
+import { motion } from "framer-motion";
+import { CheckCircle, Flag, Layers, Play } from "lucide-react";
+import { DraggableTask, DroppableSection } from "@/components/dnd";
+import { TaskCard } from "@/components/TaskCard";
+import { Button } from "@/components/ui";
+import { BacklogSection } from "./BacklogSection";
+
+interface SprintSectionProps {
+  /** Sprint data */
+  sprint: Sprint;
+  /** Tasks in this sprint */
+  tasks: Task[];
+  /** Whether section is expanded */
+  isExpanded: boolean;
+  /** Called when toggling expand state */
+  onToggle: () => void;
+  /** Whether this is the active sprint */
+  isActive?: boolean;
+  /** Called when completing sprint */
+  onComplete?: (sprintId: string) => void;
+  /** Called when starting sprint */
+  onStart?: (sprintId: string) => void;
+  /** Called when task is selected */
+  onTaskClick: (taskId: string) => void;
+  /** Called when delete action is triggered */
+  onTaskDelete: (taskId: string) => void;
+  /** Whether an action is in progress */
+  isSubmitting?: boolean;
+  /** Whether sprint can be started */
+  canStart?: boolean;
+}
+
+export function SprintSection({
+  sprint,
+  tasks,
+  isExpanded,
+  onToggle,
+  isActive,
+  onComplete,
+  onStart,
+  onTaskClick,
+  onTaskDelete,
+  isSubmitting,
+  canStart,
+}: SprintSectionProps) {
+  const accentColor = isActive ? "emerald" : "amber";
+  const icon = isActive ? (
+    <Flag size={18} className="text-emerald-500" />
+  ) : (
+    <Layers size={18} className="text-amber-500/80" />
+  );
+
+  return (
+    <motion.div
+      layout="position"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.15 }}
+    >
+      <BacklogSection
+        id={`sprint-${sprint.id}`}
+        title={sprint.name}
+        icon={icon}
+        count={tasks.length}
+        isExpanded={isExpanded}
+        onToggle={onToggle}
+        accentColor={accentColor}
+        badge={isActive ? "Active" : "Planned"}
+        actions={
+          isActive ? (
+            <Button
+              size="sm"
+              variant="emerald-subtle"
+              onClick={() => onComplete?.(sprint.id)}
+              isLoading={isSubmitting}
+            >
+              <CheckCircle size={14} className="mr-1" />
+              Complete
+            </Button>
+          ) : (
+            canStart && (
+              <Button
+                size="sm"
+                variant="amber"
+                onClick={() => onStart?.(sprint.id)}
+                isLoading={isSubmitting}
+              >
+                <Play size={12} className="mr-1.5 fill-current" />
+                Start
+              </Button>
+            )
+          )
+        }
+      >
+        <DroppableSection id={`sprint-${sprint.id}`}>
+          {tasks.length === 0 ? (
+            <div
+              className={`py-8 border-2 border-dashed rounded-xl text-center text-[11px] font-medium ${
+                isActive
+                  ? "border-emerald-500/10 text-emerald-500/50 bg-emerald-500/5"
+                  : "border-amber-500/10 text-amber-500/50 bg-amber-500/5"
+              }`}
+            >
+              Drag tasks here to add to this sprint
+            </div>
+          ) : (
+            <div className="space-y-1.5 pt-1">
+              {tasks.map((task) => (
+                <motion.div
+                  key={task.id}
+                  layout="position"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                >
+                  <DraggableTask task={task}>
+                    <TaskCard
+                      task={task}
+                      variant="list"
+                      onClick={() => onTaskClick(task.id)}
+                      onDelete={onTaskDelete}
+                    />
+                  </DraggableTask>
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </DroppableSection>
+      </BacklogSection>
+    </motion.div>
+  );
+}

package/src/components/backlog/constants.ts

@@ -0,0 +1,26 @@
+export const SPRINT_STATUS_COLORS = {
+  active: {
+    accent: "primary",
+    border: "border-l-primary",
+    bg: "bg-primary/5",
+    badge: "bg-primary/10 text-primary",
+  },
+  planned: {
+    accent: "amber",
+    border: "border-l-amber-400",
+    bg: "bg-amber-50/50",
+    badge: "bg-amber-100 text-amber-700",
+  },
+  completed: {
+    accent: "green",
+    border: "border-l-green-400",
+    bg: "bg-green-50/50",
+    badge: "bg-green-100 text-green-700",
+  },
+  backlog: {
+    accent: "slate",
+    border: "border-l-slate-400",
+    bg: "bg-slate-50/50",
+    badge: "bg-slate-100 text-slate-700",
+  },
+};

package/src/components/board/BoardColumn.tsx

@@ -0,0 +1,97 @@
+/**
+ * Board Column Component
+ *
+ * Displays a single kanban column for a task status.
+ * Supports drag-and-drop task movement between columns.
+ *
+ * @example
+ * <BoardColumn
+ *   statusKey="IN_PROGRESS"
+ *   title="In Progress"
+ *   tasks={tasksInProgress}
+ *   onTaskClick={handleSelectTask}
+ *   onTaskDelete={handleDeleteTask}
+ * />
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { DraggableTask, DroppableSection } from "@/components/dnd";
+import { TaskCard } from "@/components/TaskCard";
+import { cn } from "@/lib/utils";
+import { BOARD_STATUSES } from "./constants";
+
+interface BoardColumnProps {
+  /** Unique key identifying the status */
+  statusKey: string;
+  /** Display title for the column */
+  title: string;
+  /** Tasks to display in this column */
+  tasks: Task[];
+  /** Called when a task card is clicked */
+  onTaskClick: (taskId: string) => void;
+  /** Called when delete action is triggered */
+  onTaskDelete: (taskId: string) => void;
+}
+
+/**
+ * Board Column Component
+ *
+ * Features:
+ * - Displays tasks in a kanban column
+ * - Drag-drop enabled via DroppableSection
+ * - Shows task count
+ * - Empty state message
+ * - Color-coded by status
+ *
+ * @component
+ */
+export function BoardColumn({
+  statusKey,
+  title,
+  tasks,
+  onTaskClick,
+  onTaskDelete,
+}: BoardColumnProps) {
+  const statusConfig = BOARD_STATUSES.find((s) => s.key === statusKey);
+  const colorClass = statusConfig?.className || "bg-slate-500";
+
+  return (
+    <div className="flex flex-col w-80 shrink-0 h-full">
+      {/* Column Header */}
+      <div className="flex items-center gap-2 mb-3 px-1">
+        <div className={cn("w-2 h-2 rounded-full", colorClass)} />
+        <span className="text-sm font-semibold text-foreground tracking-tight">
+          {title}
+        </span>
+        <span className="text-xs text-muted-foreground bg-muted/50 px-2 py-0.5 rounded-full font-medium">
+          {tasks.length}
+        </span>
+      </div>
+
+      {/* Column Content */}
+      <DroppableSection id={statusKey}>
+        <div className="flex-1 rounded-xl bg-secondary/10 border border-border/40 p-2 min-h-[calc(100vh-220px)] backdrop-blur-sm transition-colors hover:bg-secondary/20">
+          {tasks.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center text-xs text-muted-foreground/60 gap-2 opacity-0 hover:opacity-100 transition-opacity">
+              <span>Drop tasks here</span>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {tasks.map((task) => (
+                <DraggableTask key={task.id} task={task}>
+                  <TaskCard
+                    task={task}
+                    onClick={() => onTaskClick(task.id)}
+                    onDelete={onTaskDelete}
+                  />
+                </DraggableTask>
+              ))}
+            </div>
+          )}
+        </div>
+      </DroppableSection>
+    </div>
+  );
+}

package/src/components/board/BoardContent.tsx

@@ -0,0 +1,84 @@
+/**
+ * Board main content component
+ * Renders columns, empty state, or drag overlay
+ */
+
+import {
+  closestCenter,
+  DndContext,
+  type DndContextProps,
+  DragOverlay,
+} from "@dnd-kit/core";
+import { type Task } from "@locusai/shared";
+import { BoardColumn, BoardEmptyState } from "@/components/board";
+import { BOARD_STATUSES } from "@/components/board/constants";
+import { TaskCard } from "@/components/TaskCard";
+
+interface BoardContentProps {
+  filteredTasks: Task[];
+  tasksByStatus: Record<string, Task[]>;
+  shouldShowEmptyState: boolean;
+  activeTask: Task | null;
+  sensors: DndContextProps["sensors"];
+  onDragStart: DndContextProps["onDragStart"];
+  onDragEnd: DndContextProps["onDragEnd"];
+  onTaskClick: (taskId: string) => void;
+  onTaskDelete: (taskId: string) => void;
+  onNewTask: () => void;
+}
+
+export function BoardContent({
+  filteredTasks,
+  tasksByStatus,
+  shouldShowEmptyState,
+  activeTask,
+  sensors,
+  onDragStart,
+  onDragEnd,
+  onTaskClick,
+  onTaskDelete,
+  onNewTask,
+}: BoardContentProps) {
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+    >
+      {shouldShowEmptyState ? (
+        <div className="flex-1">
+          <BoardEmptyState hasActiveSprint={false} onNewTask={onNewTask} />
+        </div>
+      ) : filteredTasks.length === 0 ? (
+        <div className="flex-1">
+          <BoardEmptyState hasActiveSprint={true} onNewTask={onNewTask} />
+        </div>
+      ) : (
+        <div className="flex-1 overflow-x-auto min-h-0">
+          <div className="flex gap-4 h-full min-w-max pb-4">
+            {BOARD_STATUSES.map((status) => (
+              <BoardColumn
+                key={status.key}
+                statusKey={status.key}
+                title={status.label}
+                tasks={tasksByStatus[status.key] || []}
+                onTaskClick={onTaskClick}
+                onTaskDelete={onTaskDelete}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Drag Overlay */}
+      <DragOverlay>
+        {activeTask && (
+          <div className="opacity-90 rotate-2 shadow-2xl cursor-grabbing w-72">
+            <TaskCard task={activeTask} />
+          </div>
+        )}
+      </DragOverlay>
+    </DndContext>
+  );
+}

package/src/components/board/BoardEmptyState.tsx

@@ -0,0 +1,82 @@
+/**
+ * Board Empty State Component
+ *
+ * Displays contextual empty state based on sprint status.
+ * Guides users to create sprints or add tasks.
+ *
+ * @example
+ * <BoardEmptyState hasActiveSprint={false} onNewTask={handleCreateTask} />
+ */
+
+"use client";
+
+import { Inbox, Layers, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Button, EmptyState } from "@/components/ui";
+
+interface BoardEmptyStateProps {
+  /** Whether there's an active sprint */
+  hasActiveSprint: boolean;
+  /** Callback to create a new task */
+  onNewTask: () => void;
+}
+
+/**
+ * Board Empty State Component
+ *
+ * Features:
+ * - Shows "no active sprint" state with backlog navigation
+ * - Shows "no tasks" state with create task button
+ * - Navigation to backlog and sprint creation
+ *
+ * @component
+ */
+export function BoardEmptyState({
+  hasActiveSprint,
+  onNewTask,
+}: BoardEmptyStateProps) {
+  const router = useRouter();
+
+  if (!hasActiveSprint) {
+    return (
+      <EmptyState
+        icon={Layers}
+        title="No Active Sprint"
+        description="There is no active sprint currently. Go to the backlog to plan and start a new sprint."
+        action={
+          <div className="flex gap-3">
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={() => router.push("/backlog")}
+            >
+              <Layers size={16} />
+              Go to Backlog
+            </Button>
+            <Button
+              className="gap-2"
+              onClick={() => router.push("/backlog?createSprint=true")}
+            >
+              <Plus size={16} />
+              Create Sprint
+            </Button>
+          </div>
+        }
+      />
+    );
+  }
+
+  return (
+    <EmptyState
+      icon={Inbox}
+      title="No tasks in Sprint"
+      description="The active sprint has no tasks yet. Add tasks from the backlog or create new ones."
+      action={
+        <Button onClick={onNewTask} className="shadow-lg shadow-primary/20">
+          <Plus size={18} className="mr-2" />
+          New Task
+        </Button>
+      }
+    />
+  );
+}

package/src/components/board/BoardHeader.tsx

@@ -0,0 +1,47 @@
+/**
+ * Board page header component
+ * Displays sprint info and new task button
+ */
+
+import { type Sprint } from "@locusai/shared";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui";
+
+interface BoardHeaderProps {
+  activeSprint?: Sprint | null;
+  filteredTasksCount: number;
+  onNewTask: () => void;
+}
+
+export function BoardHeader({
+  activeSprint,
+  filteredTasksCount,
+  onNewTask,
+}: BoardHeaderProps) {
+  return {
+    title: "Board",
+    description: (
+      <div className="flex items-center gap-2">
+        {activeSprint ? (
+          <>
+            <span className="text-primary font-bold">{activeSprint.name}</span>
+            <span className="w-1 h-1 rounded-full bg-muted-foreground/30" />
+            <span>{filteredTasksCount} tasks</span>
+          </>
+        ) : (
+          <span>No active sprint</span>
+        )}
+      </div>
+    ),
+    actions: (
+      <Button
+        onClick={onNewTask}
+        size="md"
+        className="shadow-lg shadow-primary/20"
+      >
+        <Plus size={18} className="mr-2" />
+        New Task
+      </Button>
+    ),
+  };
+}

package/src/components/board/SprintMindmap.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Editor } from "@/components/Editor";
+
+interface SprintMindmapProps {
+  mindmap: string | null;
+}
+
+export function SprintMindmap({ mindmap }: SprintMindmapProps) {
+  if (!mindmap) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[60vh] text-muted-foreground border-2 border-dashed rounded-xl bg-muted/10">
+        <p className="text-lg font-medium text-foreground">
+          No mindmap generated yet
+        </p>
+        <p className="text-sm opacity-70 max-w-xs text-center mt-2">
+          The agent will analyze your sprint and generate a strategic mindmap
+          once it starts working.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="flex-1 relative min-h-[70vh] bg-[#09090b] rounded-xl border border-white/5 overflow-hidden"
+    >
+      {/* Canvas Grid Background */}
+      <div
+        className="absolute inset-0 z-0 pointer-events-none opacity-20"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle, #3f3f46 1px, transparent 1px)",
+          backgroundSize: "24px 24px",
+        }}
+      />
+
+      <div className="relative z-10 p-8 md:p-12 h-full max-h-[80vh] overflow-hidden">
+        <div className="max-w-5xl mx-auto h-full">
+          <div className="bg-black/40 backdrop-blur-md border border-white/10 rounded-2xl shadow-2xl shadow-black/50 h-full flex flex-col overflow-hidden">
+            <div className="flex-1 overflow-hidden">
+              <Editor
+                value={mindmap}
+                onChange={() => {
+                  /* Read-only */
+                }}
+                readOnly={true}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Floating Badge */}
+      <div className="absolute top-6 right-6 z-20">
+        <div className="px-3 py-1 bg-indigo-500/10 border border-indigo-500/20 rounded-full text-[10px] font-bold tracking-widest text-indigo-400 uppercase backdrop-blur-sm">
+          Agent Strategy Core
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/src/components/board/constants.ts

@@ -0,0 +1,40 @@
+import { TaskStatus } from "@locusai/shared";
+
+export const BOARD_STATUSES = [
+  {
+    key: TaskStatus.BACKLOG,
+    label: "Backlog",
+    colorVar: "var(--color-status-backlog)",
+    className: "bg-[var(--color-status-backlog)]",
+  },
+  {
+    key: TaskStatus.IN_PROGRESS,
+    label: "In Progress",
+    colorVar: "var(--color-status-todo)",
+    className: "bg-[var(--color-status-todo)]",
+  },
+  {
+    key: TaskStatus.REVIEW,
+    label: "Review",
+    colorVar: "var(--color-status-review)",
+    className: "bg-[var(--color-status-review)]",
+  },
+  {
+    key: TaskStatus.VERIFICATION,
+    label: "Verification",
+    colorVar: "var(--color-status-verification)",
+    className: "bg-[var(--color-status-verification)]",
+  },
+  {
+    key: TaskStatus.DONE,
+    label: "Done",
+    colorVar: "var(--color-status-done)",
+    className: "bg-[var(--color-status-done)]",
+  },
+  {
+    key: TaskStatus.BLOCKED,
+    label: "Blocked",
+    colorVar: "var(--color-status-blocked)",
+    className: "bg-[var(--color-status-blocked)]",
+  },
+];

package/src/components/board/index.ts

@@ -0,0 +1,5 @@
+export * from "./BoardColumn";
+export * from "./BoardContent";
+export * from "./BoardEmptyState";
+export * from "./BoardHeader";
+export * from "./SprintMindmap";