@locusai/web 0.1.0

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from "./BoardFilter";
+export * from "./Header";
+export * from "./PropertyItem";
+export * from "./Sidebar";
+export * from "./TaskCard";
+export * from "./TaskCreateModal";
+export * from "./TaskPanel";

package/src/components/ui/Badge.tsx

@@ -0,0 +1,77 @@
+interface BadgeProps {
+  children: React.ReactNode;
+  variant?: "default" | "success" | "warning" | "error" | "info" | "purple";
+  size?: "sm" | "md";
+}
+
+export function Badge({
+  children,
+  variant = "default",
+  size = "sm",
+}: BadgeProps) {
+  const variants = {
+    default: "bg-primary text-primary-foreground shadow hover:bg-primary/80",
+    success: "bg-status-done/15 text-status-done border-status-done/20",
+    warning:
+      "bg-status-progress/15 text-status-progress border-status-progress/20",
+    error: "bg-status-blocked/15 text-status-blocked border-status-blocked/20",
+    info: "bg-status-todo/15 text-status-todo border-status-todo/20",
+    purple: "bg-status-review/15 text-status-review border-status-review/20",
+  };
+
+  const sizes = {
+    sm: "px-2.5 py-0.5 text-xs font-semibold",
+    md: "px-3 py-1 text-sm font-semibold",
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${variants[variant]} ${sizes[size]}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+interface PriorityBadgeProps {
+  priority: "LOW" | "MEDIUM" | "HIGH" | "CRITICAL";
+}
+
+const PRIORITY_CONFIG = {
+  LOW: { label: "Low", variant: "default" as const },
+  MEDIUM: { label: "Medium", variant: "info" as const },
+  HIGH: { label: "High", variant: "warning" as const },
+  CRITICAL: { label: "Critical", variant: "error" as const },
+};
+
+export function PriorityBadge({ priority }: PriorityBadgeProps) {
+  const config = PRIORITY_CONFIG[priority];
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+}
+
+interface StatusBadgeProps {
+  status: string;
+}
+
+const STATUS_CONFIG: Record<
+  string,
+  {
+    label: string;
+    variant: "default" | "success" | "warning" | "error" | "info" | "purple";
+  }
+> = {
+  BACKLOG: { label: "Backlog", variant: "default" },
+  IN_PROGRESS: { label: "In Progress", variant: "warning" },
+  REVIEW: { label: "Review", variant: "purple" },
+  VERIFICATION: { label: "Verification", variant: "info" },
+  DONE: { label: "Done", variant: "success" },
+  BLOCKED: { label: "Blocked", variant: "error" },
+};
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  const config = STATUS_CONFIG[status] || {
+    label: status,
+    variant: "default" as const,
+  };
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+}

package/src/components/ui/Button.tsx

@@ -0,0 +1,47 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | "primary"
+    | "secondary"
+    | "outline"
+    | "ghost"
+    | "danger"
+    | "success";
+  size?: "sm" | "md" | "lg" | "icon";
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "primary", size = "md", ...props }, ref) => {
+    const variants = {
+      primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+      secondary:
+        "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      outline:
+        "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      danger:
+        "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+      success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700",
+    };
+
+    const sizes = {
+      sm: "h-8 px-3 text-xs",
+      md: "h-9 px-4 py-2 text-sm",
+      lg: "h-10 px-8 text-base",
+      icon: "h-9 w-9",
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={`inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none ${variants[variant]} ${sizes[size]} ${className || ""}`}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button };

package/src/components/ui/Checkbox.tsx

@@ -0,0 +1,52 @@
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Checkbox({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  className,
+}: CheckboxProps) {
+  return (
+    <label
+      className={cn(
+        `flex items-center gap-2.5 select-none transition-opacity duration-200`,
+        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        className || ""
+      )}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
+        className="hidden"
+      />
+      <span
+        className={`h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-150 flex items-center justify-center ${
+          checked ? "bg-primary text-primary-foreground" : "bg-transparent"
+        }`}
+      >
+        {checked && <Check size={12} strokeWidth={3} />}
+      </span>
+      {label && (
+        <span
+          className={`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 transition-all duration-150 ${
+            checked ? "line-through text-muted-foreground" : "text-foreground"
+          }`}
+        >
+          {label}
+        </span>
+      )}
+    </label>
+  );
+}

package/src/components/ui/Dropdown.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+
+interface DropdownOption<T extends string> {
+  value: T;
+  label: string;
+  color?: string;
+}
+
+interface DropdownProps<T extends string> {
+  value: T | undefined;
+  onChange: (value: T) => void;
+  options: DropdownOption<T>[];
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  renderOption?: (option: DropdownOption<T>) => ReactNode;
+}
+
+export function Dropdown<T extends string>({
+  value,
+  onChange,
+  options,
+  placeholder = "Select...",
+  label,
+  disabled = false,
+  renderOption,
+}: DropdownProps<T>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find((o) => o.value === value);
+
+  return (
+    <div className="relative w-full" ref={containerRef}>
+      {label && (
+        <label className="block text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wider">
+          {label}
+        </label>
+      )}
+      <button
+        type="button"
+        className="w-full flex items-center justify-between gap-2 px-3.5 py-2.5 bg-background border border-input rounded-md text-foreground text-sm cursor-pointer transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+      >
+        <span className={selectedOption ? "" : "text-muted-foreground"}>
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
+        <ChevronDown
+          size={16}
+          className={`transition-transform duration-200 text-muted-foreground ${isOpen ? "rotate-180" : "rotate-0"}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 right-0 mt-2 bg-popover border border-border rounded-md p-1 z-50 max-h-[240px] overflow-y-auto animate-in fade-in slide-in-from-top-2 duration-200 shadow-md">
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              className={`w-full flex items-center gap-2 px-3 py-2 bg-transparent border-none rounded-sm text-popover-foreground text-sm cursor-pointer transition-colors text-left hover:bg-accent hover:text-accent-foreground ${
+                option.value === value
+                  ? "bg-accent/10 text-accent-foreground"
+                  : ""
+              }`}
+              onClick={() => {
+                onChange(option.value);
+                setIsOpen(false);
+              }}
+            >
+              {renderOption ? (
+                renderOption(option)
+              ) : (
+                <>
+                  {option.color && (
+                    <span
+                      className="w-2 h-2 rounded-full shrink-0"
+                      style={{ background: option.color }}
+                    />
+                  )}
+                  {option.label}
+                </>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/Input.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  icon?: ReactNode;
+  rightElement?: ReactNode;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, icon, rightElement, ...props }, ref) => {
+    return (
+      <div className="relative w-full group">
+        {icon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted group-focus-within:text-accent transition-colors">
+            {icon}
+          </div>
+        )}
+        <input
+          ref={ref}
+          className={`flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
+            icon ? "pl-10" : "pl-3"
+          } ${rightElement ? "pr-10" : "pr-3"} ${className || ""}`}
+          {...props}
+        />
+        {rightElement && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            {rightElement}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export { Input };

package/src/components/ui/Modal.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { X } from "lucide-react";
+import { type ReactNode, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  title?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  title,
+  size = "md",
+}: ModalProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const widths = {
+    sm: "w-[400px]",
+    md: "w-[520px]",
+    lg: "w-[680px]",
+  };
+
+  return createPortal(
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 bg-black/40 backdrop-blur-md flex items-center justify-center z-1000 animate-in fade-in duration-300"
+      onClick={(e) => {
+        if (e.target === overlayRef.current) onClose();
+      }}
+    >
+      <div
+        className={`bg-background border border-border rounded-xl shadow-lg animate-in zoom-in-95 duration-200 max-h-[90vh] overflow-hidden flex flex-col ${
+          widths[size]
+        } max-w-[90vw]`}
+      >
+        {title && (
+          <div className="flex justify-between items-center p-5 border-b border-border">
+            <h3 className="text-lg font-semibold m-0 text-foreground">
+              {title}
+            </h3>
+            <button
+              className="bg-transparent border-none text-muted-foreground hover:text-foreground cursor-pointer p-0 transition-colors duration-200"
+              onClick={onClose}
+            >
+              <X size={20} />
+            </button>
+          </div>
+        )}
+        <div className="p-6 overflow-y-auto">{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+}

package/src/components/ui/Textarea.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        className={`flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none ${
+          className || ""
+        }`}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/components/ui/index.ts

@@ -0,0 +1,7 @@
+export * from "./Badge";
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./Dropdown";
+export * from "./Input";
+export * from "./Modal";
+export * from "./Textarea";

package/src/hooks/useTasks.ts

@@ -0,0 +1,119 @@
+"use client";
+
+import { AssigneeRole, TaskPriority, TaskStatus } from "@locusai/shared";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+
+import { taskService } from "@/services";
+
+export function useTasks() {
+  const queryClient = useQueryClient();
+
+  const {
+    data: tasks = [],
+    isLoading: loading,
+    error: queryError,
+    refetch: refreshTasks,
+  } = useQuery({
+    queryKey: ["tasks"],
+    queryFn: () => taskService.getAll(),
+    refetchInterval: 15000,
+  });
+
+  const error = queryError ? (queryError as Error).message : null;
+
+  // Filter state
+  const [searchQuery, setSearchQuery] = useState("");
+  const [priorityFilter, setPriorityFilter] = useState<TaskPriority | "ALL">(
+    "ALL"
+  );
+  const [assigneeFilter, setAssigneeFilter] = useState<AssigneeRole | "ALL">(
+    "ALL"
+  );
+
+  const hasActiveFilters = useMemo(
+    () =>
+      searchQuery !== "" ||
+      priorityFilter !== "ALL" ||
+      assigneeFilter !== "ALL",
+    [searchQuery, priorityFilter, assigneeFilter]
+  );
+
+  const updateMutation = useMutation({
+    mutationFn: ({ taskId, status }: { taskId: number; status: TaskStatus }) =>
+      taskService.update(taskId, { status }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tasks"] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (taskId: number) => taskService.delete(taskId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tasks"] });
+    },
+  });
+
+  const clearFilters = useCallback(() => {
+    setSearchQuery("");
+    setPriorityFilter("ALL");
+    setAssigneeFilter("ALL");
+  }, []);
+
+  const filteredTasks = useMemo(() => {
+    return tasks.filter((task) => {
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        if (!task.title.toLowerCase().includes(query)) {
+          return false;
+        }
+      }
+      if (priorityFilter !== "ALL" && task.priority !== priorityFilter) {
+        return false;
+      }
+      if (assigneeFilter !== "ALL" && task.assigneeRole !== assigneeFilter) {
+        return false;
+      }
+      return true;
+    });
+  }, [tasks, searchQuery, priorityFilter, assigneeFilter]);
+
+  const getTasksByStatus = useCallback(
+    (status: TaskStatus) => {
+      return filteredTasks.filter((t) => t.status === status);
+    },
+    [filteredTasks]
+  );
+
+  const updateTaskStatus = useCallback(
+    async (taskId: number, status: TaskStatus) => {
+      await updateMutation.mutateAsync({ taskId, status });
+    },
+    [updateMutation]
+  );
+
+  const deleteTask = useCallback(
+    async (taskId: number) => {
+      await deleteMutation.mutateAsync(taskId);
+    },
+    [deleteMutation]
+  );
+
+  return {
+    tasks,
+    loading,
+    error,
+    searchQuery,
+    setSearchQuery,
+    priorityFilter,
+    setPriorityFilter,
+    assigneeFilter,
+    setAssigneeFilter,
+    hasActiveFilters,
+    clearFilters,
+    getTasksByStatus,
+    updateTaskStatus,
+    deleteTask,
+    refreshTasks,
+  };
+}

package/src/lib/api-client.ts

@@ -0,0 +1,24 @@
+import axios from "axios";
+
+const apiClient = axios.create({
+  baseURL: "/api",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Response interceptor for consistent error handling
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // We can add global error handling here (e.g., logging, toast notifications)
+    const message =
+      error.response?.data?.message ||
+      error.message ||
+      "An unexpected error occurred";
+    console.error(`[API Error] ${message}`, error);
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/services/doc.service.ts

@@ -0,0 +1,27 @@
+import apiClient from "@/lib/api-client";
+
+export interface DocNode {
+  type: "file" | "directory";
+  name: string;
+  path: string;
+  children?: DocNode[];
+}
+
+export const docService = {
+  getTree: async () => {
+    const response = await apiClient.get<DocNode[]>("/docs/tree");
+    return response.data;
+  },
+
+  read: async (path: string) => {
+    const response = await apiClient.get<{ content: string }>(
+      `/docs/read?path=${encodeURIComponent(path)}`
+    );
+    return response.data;
+  },
+
+  write: async (path: string, content: string) => {
+    const response = await apiClient.post("/docs/write", { path, content });
+    return response.data;
+  },
+};

package/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from "./doc.service";
+export * from "./sprint.service";
+export * from "./task.service";

package/src/services/sprint.service.ts

@@ -0,0 +1,26 @@
+import { type Sprint } from "@locusai/shared";
+import axios from "axios";
+
+const API_URL = "http://localhost:3080/api/sprints";
+
+export const sprintService = {
+  getAll: async () => {
+    const res = await axios.get<Sprint[]>(API_URL);
+    return res.data;
+  },
+
+  create: async (data: Partial<Sprint>) => {
+    const res = await axios.post<{ id: number }>(API_URL, data);
+    return res.data;
+  },
+
+  update: async (id: number, data: Partial<Sprint>) => {
+    const res = await axios.patch(`${API_URL}/${id}`, data);
+    return res.data;
+  },
+
+  delete: async (id: number) => {
+    const res = await axios.delete(`${API_URL}/${id}`);
+    return res.data;
+  },
+};