@locusai/web 0.1.7 → 0.2.2

package/src/hooks/useTaskPanel.ts

@@ -0,0 +1,341 @@
+"use client";
+
+import { type AcceptanceItem, type Task, TaskStatus } from "@locusai/shared";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/context/AuthContext";
+import { useWorkspaceId } from "@/hooks/useWorkspaceId";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+
+interface UseTaskPanelProps {
+  taskId: string;
+  onUpdated: () => void;
+  onDeleted: () => void;
+  onClose: () => void;
+}
+
+/**
+ * Task Panel Hook
+ * Handles detailed task view, checklist logic, and operations.
+ *
+ * Features:
+ * - Optimistic updates for instant UI feedback
+ * - Support for assignedTo and dueDate fields
+ * - Loading states for all mutations
+ */
+export function useTaskPanel({
+  taskId,
+  onUpdated,
+  onDeleted,
+  onClose,
+}: UseTaskPanelProps) {
+  const { user } = useAuth();
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+
+  // Fetch task details
+  const { data: task, refetch: fetchTask } = useQuery({
+    queryKey: queryKeys.tasks.detail(taskId),
+    queryFn: () => locusClient.tasks.getById(taskId, workspaceId),
+    enabled: !!workspaceId,
+  });
+
+  // UI State
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editTitle, setEditTitle] = useState("");
+  const [editDesc, setEditDesc] = useState("");
+  const [editAssignedTo, setEditAssignedTo] = useState("");
+  const [editDueDate, setEditDueDate] = useState("");
+  const [newComment, setNewComment] = useState("");
+  const [newChecklistItem, setNewChecklistItem] = useState("");
+  const [descMode, setDescMode] = useState<"edit" | "preview">("preview");
+  const [showRejectModal, setShowRejectModal] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+
+  useEffect(() => {
+    if (task) {
+      setEditTitle(task.title);
+      setEditDesc(task.description || "");
+      setEditAssignedTo(task.assignedTo || "");
+      setEditDueDate(
+        task.dueDate ? new Date(task.dueDate).toISOString().split("T")[0] : ""
+      );
+    }
+  }, [task]);
+
+  // Mutations with Optimistic Updates
+  const updateTaskMutation = useMutation({
+    mutationFn: (updates: Partial<Task> & { docIds?: string[] }) =>
+      locusClient.tasks.update(taskId, workspaceId as string, updates),
+    // Optimistic update: update cache immediately
+    onMutate: async (updates) => {
+      // Cancel ongoing queries
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.tasks.detail(taskId),
+      });
+
+      // Snapshot previous data
+      const previousTask = queryClient.getQueryData<Task>(
+        queryKeys.tasks.detail(taskId)
+      );
+
+      // Update cache optimistically
+      if (previousTask) {
+        queryClient.setQueryData(queryKeys.tasks.detail(taskId), {
+          ...previousTask,
+          ...updates,
+          dueDate: updates.dueDate
+            ? new Date(updates.dueDate)
+            : previousTask.dueDate,
+        });
+      }
+
+      return { previousTask };
+    },
+    // On error, rollback to previous data
+    onError: (_err, _variables, context) => {
+      if (context?.previousTask) {
+        queryClient.setQueryData(
+          queryKeys.tasks.detail(taskId),
+          context.previousTask
+        );
+      }
+      toast.error("Failed to update task");
+    },
+    // On success, refetch to confirm
+    onSuccess: () => {
+      fetchTask();
+      onUpdated();
+    },
+  });
+
+  const handleLinkDoc = async (docId: string) => {
+    if (!task) return;
+    const currentDocIds = task.docs?.map((d) => d.id) || [];
+    if (currentDocIds.includes(docId)) return;
+
+    try {
+      await updateTaskMutation.mutateAsync({
+        docIds: [...currentDocIds, docId],
+      });
+      toast.success("Document linked");
+    } catch {
+      toast.error("Failed to link document");
+    }
+  };
+
+  const handleUnlinkDoc = async (docId: string) => {
+    if (!task) return;
+    const currentDocIds = task.docs?.map((d) => d.id) || [];
+
+    try {
+      await updateTaskMutation.mutateAsync({
+        docIds: currentDocIds.filter((id) => id !== docId),
+      });
+      toast.success("Document unlinked");
+    } catch {
+      toast.error("Failed to unlink document");
+    }
+  };
+
+  const deleteTaskMutation = useMutation({
+    mutationFn: () => locusClient.tasks.delete(taskId, workspaceId as string),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.tasks.all() });
+      toast.success("Task deleted");
+      onDeleted();
+      onClose();
+    },
+    onError: () => {
+      toast.error("Failed to delete task");
+    },
+  });
+
+  const addCommentMutation = useMutation({
+    mutationFn: (data: { author: string; text: string }) =>
+      locusClient.tasks.addComment(taskId, workspaceId as string, data),
+    onSuccess: () => {
+      fetchTask();
+    },
+    onError: () => {
+      toast.error("Failed to add comment");
+    },
+  });
+
+  const handleUpdateTask = async (updates: Partial<Task>) => {
+    try {
+      await updateTaskMutation.mutateAsync(updates);
+    } catch (err) {
+      console.error("Failed to update task:", err);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (
+      !confirm(
+        "Are you sure you want to delete this task? This action cannot be undone."
+      )
+    ) {
+      return;
+    }
+    try {
+      await deleteTaskMutation.mutateAsync();
+    } catch (err) {
+      console.error("Failed to delete task:", err);
+    }
+  };
+
+  const handleTitleSave = () => {
+    if (editTitle.trim() && editTitle !== task?.title) {
+      handleUpdateTask({ title: editTitle.trim() });
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleDescSave = () => {
+    if (editDesc !== task?.description) {
+      handleUpdateTask({ description: editDesc });
+    }
+  };
+
+  const handleAssignedToSave = () => {
+    if (editAssignedTo !== (task?.assignedTo || "")) {
+      handleUpdateTask({ assignedTo: editAssignedTo || null });
+    }
+  };
+
+  const handleDueDateSave = () => {
+    if (editDueDate) {
+      const newDate = new Date(editDueDate);
+      handleUpdateTask({ dueDate: newDate });
+    } else if (task?.dueDate) {
+      handleUpdateTask({ dueDate: null });
+    }
+  };
+
+  const handleAddChecklistItem = () => {
+    if (!newChecklistItem.trim() || !task) return;
+    const newItem: AcceptanceItem = {
+      id: crypto.randomUUID(),
+      text: newChecklistItem.trim(),
+      done: false,
+    };
+    handleUpdateTask({
+      acceptanceChecklist: [...(task.acceptanceChecklist || []), newItem],
+    });
+    setNewChecklistItem("");
+  };
+
+  const handleToggleChecklistItem = (itemId: string) => {
+    if (!task?.acceptanceChecklist) return;
+    const updated = task.acceptanceChecklist.map((item) =>
+      item.id === itemId ? { ...item, done: !item.done } : item
+    );
+    handleUpdateTask({ acceptanceChecklist: updated });
+  };
+
+  const handleRemoveChecklistItem = (itemId: string) => {
+    if (!task?.acceptanceChecklist) return;
+    const updated = task.acceptanceChecklist.filter(
+      (item) => item.id !== itemId
+    );
+    handleUpdateTask({ acceptanceChecklist: updated });
+  };
+
+  const handleAddComment = async () => {
+    if (!newComment.trim()) return;
+    try {
+      await addCommentMutation.mutateAsync({
+        author: user?.name || "Anonymous",
+        text: newComment,
+      });
+      setNewComment("");
+      toast.success("Comment added");
+    } catch (err) {
+      console.error("Failed to add comment:", err);
+    }
+  };
+
+  const handleReject = async () => {
+    if (!rejectReason.trim()) return;
+    try {
+      await updateTaskMutation.mutateAsync({
+        status: TaskStatus.IN_PROGRESS,
+      });
+      await addCommentMutation.mutateAsync({
+        author: user?.name || "Manager",
+        text: `❌ **Rejected**: ${rejectReason}`,
+      });
+      setShowRejectModal(false);
+      setRejectReason("");
+      toast.success("Task rejected and moved back to in progress");
+      onUpdated();
+    } catch (err) {
+      console.error("Failed to reject task:", err);
+      toast.error("Failed to reject task");
+    }
+  };
+
+  const handleApprove = async () => {
+    try {
+      await updateTaskMutation.mutateAsync({ status: TaskStatus.DONE });
+      toast.success("Task approved and marked as done");
+      onUpdated();
+    } catch (err) {
+      console.error("Failed to approve task:", err);
+      toast.error("Failed to approve task");
+    }
+  };
+
+  const checklistProgress = task?.acceptanceChecklist?.length
+    ? Math.round(
+        (task.acceptanceChecklist.filter((i) => i.done).length /
+          task.acceptanceChecklist.length) *
+          100
+      )
+    : 0;
+
+  return {
+    task,
+    isEditingTitle,
+    setIsEditingTitle,
+    editTitle,
+    setEditTitle,
+    editDesc,
+    setEditDesc,
+    editAssignedTo,
+    setEditAssignedTo,
+    editDueDate,
+    setEditDueDate,
+    newComment,
+    setNewComment,
+    newChecklistItem,
+    setNewChecklistItem,
+    descMode,
+    setDescMode,
+    showRejectModal,
+    setShowRejectModal,
+    rejectReason,
+    setRejectReason,
+    checklistProgress,
+    isLoading: updateTaskMutation.isPending || addCommentMutation.isPending,
+    isDeleting: deleteTaskMutation.isPending,
+    handleUpdateTask,
+    handleLinkDoc,
+    handleUnlinkDoc,
+    handleDelete,
+    handleTitleSave,
+    handleDescSave,
+    handleAssignedToSave,
+    handleDueDateSave,
+    handleAddChecklistItem,
+    handleToggleChecklistItem,
+    handleRemoveChecklistItem,
+    handleAddComment,
+    handleReject,
+    handleApprove,
+    refresh: fetchTask,
+  };
+}

package/src/hooks/useTasksQuery.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { useQuery } from "@tanstack/react-query";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { useWorkspaceIdOptional } from "./useWorkspaceId";
+
+/**
+ * Tasks Query Hook
+ * Centralizes task fetching logic.
+ */
+export function useTasksQuery() {
+  const workspaceId = useWorkspaceIdOptional();
+
+  return useQuery<Task[]>({
+    queryKey: queryKeys.tasks.list(workspaceId),
+    queryFn: () =>
+      workspaceId ? locusClient.tasks.list(workspaceId) : Promise.resolve([]),
+    enabled: !!workspaceId,
+    refetchInterval: 10_000,
+  });
+}
+
+/**
+ * Backlog Query Hook
+ */
+export function useBacklogQuery() {
+  const workspaceId = useWorkspaceIdOptional();
+
+  return useQuery<Task[]>({
+    queryKey: queryKeys.tasks.backlog(workspaceId),
+    queryFn: () =>
+      workspaceId
+        ? locusClient.tasks.getBacklog(workspaceId)
+        : Promise.resolve([]),
+    enabled: !!workspaceId,
+  });
+}

package/src/hooks/useTeamManagement.ts

@@ -0,0 +1,92 @@
+/**
+ * Hook for team management logic
+ * Handles members, invitations, and member operations
+ */
+"use client";
+
+import { MembershipRole } from "@locusai/shared";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  useAuthenticatedUserWithOrg,
+  useInvitationsQuery,
+  useOrganizationMembersQuery,
+} from "@/hooks";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+
+export function useTeamManagement() {
+  const currentUser = useAuthenticatedUserWithOrg();
+  const { data: members = [], isLoading: membersLoading } =
+    useOrganizationMembersQuery();
+  const queryClient = useQueryClient();
+  const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+
+  // Determine user's role
+  const userMembership = members.find((m) => m.userId === currentUser?.id);
+  const isOwner = userMembership?.role === MembershipRole.OWNER;
+  const isAdmin = userMembership?.role === MembershipRole.ADMIN;
+  const canManage = isOwner || isAdmin;
+
+  const { data: invitations = [], isLoading: invitationsLoading } =
+    useInvitationsQuery({ enabled: canManage });
+
+  const handleRemoveMember = async (userId: string) => {
+    if (!confirm("Are you sure you want to remove this member?")) return;
+
+    try {
+      await locusClient.organizations.removeMember(currentUser.orgId, userId);
+      toast.success("Member removed");
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.organizations.members(currentUser.orgId),
+      });
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to remove member"
+      );
+    }
+  };
+
+  const handleRevokeInvitation = async (invitationId: string) => {
+    try {
+      await locusClient.invitations.revoke(currentUser.orgId, invitationId);
+      toast.success("Invitation revoked");
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.invitations.list(currentUser.orgId),
+      });
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to revoke invitation"
+      );
+    }
+  };
+
+  const handleCopyLink = (token: string) => {
+    const baseUrl =
+      typeof window !== "undefined"
+        ? window.location.origin
+        : "https://app.locusai.dev";
+    const inviteUrl = `${baseUrl}/invite?token=${token}`;
+
+    navigator.clipboard.writeText(inviteUrl);
+    toast.success("Invitation link copied to clipboard");
+  };
+
+  const isLoading = membersLoading || invitationsLoading;
+
+  return {
+    currentUser,
+    members,
+    invitations,
+    isLoading,
+    isOwner,
+    isAdmin,
+    canManage,
+    isInviteModalOpen,
+    setIsInviteModalOpen,
+    handleRemoveMember,
+    handleRevokeInvitation,
+    handleCopyLink,
+  };
+}

package/src/hooks/useWorkspaceCreateForm.ts

@@ -0,0 +1,70 @@
+/**
+ * Hook for workspace creation form management
+ * Handles workspace creation with optional auto-organization creation
+ */
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/context/AuthContext";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { useAuthenticatedUser } from "./useAuthenticatedUser";
+
+interface UseWorkspaceCreateFormReturn {
+  name: string;
+  isLoading: boolean;
+  setName: (name: string) => void;
+  handleSubmit: (e: React.FormEvent) => void;
+}
+
+/**
+ * Custom hook for workspace creation
+ * Handles both standard and auto-org workspace creation
+ */
+export function useWorkspaceCreateForm(): UseWorkspaceCreateFormReturn {
+  const [name, setName] = useState("");
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const user = useAuthenticatedUser();
+  const { refreshUser } = useAuth();
+
+  const createWorkspaceMutation = useMutation({
+    mutationFn: (workspaceName: string) => {
+      // If user has orgId, use the standard create method
+      if (user?.orgId) {
+        return locusClient.workspaces.create({
+          name: workspaceName,
+          orgId: user.orgId,
+        });
+      }
+      // Otherwise, use createWithAutoOrg which creates organization if needed
+      return locusClient.workspaces.createWithAutoOrg({ name: workspaceName });
+    },
+    onSuccess: async () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.workspaces.all() });
+      // Refresh user data to get the new workspaceId
+      await refreshUser();
+      toast.success("Workspace created!");
+      router.push("/");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create workspace");
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+    createWorkspaceMutation.mutate(name.trim());
+  };
+
+  return {
+    name,
+    isLoading: createWorkspaceMutation.isPending,
+    setName,
+    handleSubmit,
+  };
+}

package/src/hooks/useWorkspaceId.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { useAuth } from "@/context";
+
+/**
+ * Hook to get the current workspace ID
+ * Ensures consistent handling of workspace context across the app
+ */
+export function useWorkspaceId(): string {
+  const { user } = useAuth();
+  const workspaceId = user?.workspaceId;
+
+  if (!workspaceId) {
+    throw new Error(
+      "No workspace ID available. User must be authenticated with a workspace."
+    );
+  }
+
+  return workspaceId;
+}
+
+/**
+ * Hook to safely get workspace ID or null
+ * Useful for conditional queries that shouldn't execute without a workspace
+ */
+export function useWorkspaceIdOptional(): string | null {
+  const { user } = useAuth();
+  return user?.workspaceId ?? null;
+}

package/src/lib/api-client.ts

@@ -1,28 +1,45 @@
-import axios from "axios";
+import { LocusClient, LocusEvent } from "@locusai/sdk";
+import { config } from "./config";
 
-// In dev mode, API runs on port 3080. In production (static export), relative paths work.
-const API_BASE_URL =
-  process.env.NEXT_PUBLIC_API_URL || "http://localhost:3080/api";
+const tokenKey = "locus_token";
 
-const apiClient = axios.create({
-  baseURL: API_BASE_URL,
-  headers: {
-    "Content-Type": "application/json",
-  },
+// Get initial token from localStorage if available
+const initialToken =
+  typeof window !== "undefined" ? localStorage.getItem(tokenKey) : null;
+
+export const locusClient = new LocusClient({
+  baseUrl: config.NEXT_PUBLIC_API_URL,
+  token: initialToken,
 });
 
-// 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);
-  }
-);
+// Setup event listeners for the web app
+if (typeof window !== "undefined") {
+  locusClient.emitter.on(LocusEvent.TOKEN_EXPIRED, () => {
+    localStorage.removeItem(tokenKey);
+    // Only redirect if not already on login/register/invite pages
+    if (!window.location.pathname.match(/\/(login|register|invite)/)) {
+      window.location.href = "/login";
+    }
+  });
+
+  locusClient.emitter.on(LocusEvent.AUTH_ERROR, (error) => {
+    console.error("[Auth Error]", error);
+  });
 
-export default apiClient;
+  locusClient.emitter.on(LocusEvent.REQUEST_ERROR, (error) => {
+    console.error("[Request Error]", error);
+  });
+}
+
+/**
+ * Helper to update token in client and localStorage
+ */
+export const setClientToken = (token: string | null) => {
+  if (token) {
+    localStorage.setItem(tokenKey, token);
+    locusClient.setToken(token);
+  } else {
+    localStorage.removeItem(tokenKey);
+    locusClient.setToken(null);
+  }
+};

package/src/lib/config.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+const ConfigSchema = z.object({
+  NEXT_PUBLIC_API_URL: z.string().url().default("http://localhost:3080/api"),
+});
+
+export type Config = z.infer<typeof ConfigSchema>;
+
+function loadConfig(): Config {
+  // Safe parse for Next.js environment variables
+  const result = ConfigSchema.safeParse({
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+  });
+
+  if (!result.success) {
+    console.error("❌ Invalid environment variables:", result.error.format());
+    return {
+      NEXT_PUBLIC_API_URL: "http://localhost:3080/api",
+    } as Config;
+  }
+
+  return result.data;
+}
+
+export const config = loadConfig();