@locusai/web 0.1.7 → 0.2.2

package/src/components/task-panel/TaskChecklist.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { motion } from "framer-motion";
+import { CheckCircle, X } from "lucide-react";
+import { SecondaryText, SectionLabel } from "@/components/typography";
+import { Button, Checkbox, EmptyState, Input } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+interface TaskChecklistProps {
+  task: Task;
+  isLoading?: boolean;
+  checklistProgress: number;
+  newChecklistItem: string;
+  setNewChecklistItem: (val: string) => void;
+  handleAddChecklistItem: () => void;
+  handleToggleChecklistItem: (id: string) => void;
+  handleRemoveChecklistItem: (id: string) => void;
+}
+
+export function TaskChecklist({
+  task,
+  isLoading = false,
+  checklistProgress,
+  newChecklistItem,
+  setNewChecklistItem,
+  handleAddChecklistItem,
+  handleToggleChecklistItem,
+  handleRemoveChecklistItem,
+}: TaskChecklistProps) {
+  return (
+    <div className="px-8 pb-8">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-8 rounded-xl bg-sky-500/10 flex items-center justify-center text-sky-500">
+            <CheckCircle size={16} />
+          </div>
+          <SectionLabel as="h4">Definition of Done</SectionLabel>
+        </div>
+        <div className="flex items-center gap-6">
+          <div className="flex flex-col items-end">
+            <SecondaryText size="xs" className="mb-1.5">
+              Calibration
+            </SecondaryText>
+            <span className="text-sm font-mono font-black text-sky-500">
+              {checklistProgress}%
+            </span>
+          </div>
+          <div className="w-48 h-2 bg-secondary/40 rounded-full overflow-hidden border border-border/30 shadow-inner">
+            <motion.div
+              initial={{ width: 0 }}
+              animate={{ width: `${checklistProgress}%` }}
+              transition={{ duration: 1, ease: "easeOut" }}
+              className="h-full bg-sky-500 shadow-[0_0_15px_rgba(14,165,233,0.4)]"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-3 mb-6">
+        {task.acceptanceChecklist.length === 0 && (
+          <EmptyState
+            variant="compact"
+            title="Zero Quality Gates"
+            description="Deployment requires standard validation criteria."
+            className="bg-secondary/5 border-dashed border-2 border-border/40 py-8"
+            action={
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() =>
+                  setNewChecklistItem("Initialize unit validation")
+                }
+                className="text-[10px] font-black uppercase tracking-widest hover:text-sky-500"
+              >
+                Suggest Criteria
+              </Button>
+            }
+          />
+        )}
+        {task.acceptanceChecklist.map((item) => (
+          <motion.div
+            layout
+            key={item.id}
+            className={cn(
+              "group flex items-center gap-4 p-4 bg-card/30 border border-border/40 rounded-2xl hover:border-sky-500/50 hover:bg-card/50 transition-all duration-300 shadow-sm",
+              isLoading && "opacity-60 pointer-events-none"
+            )}
+          >
+            <Checkbox
+              checked={item.done}
+              onChange={() => !isLoading && handleToggleChecklistItem(item.id)}
+              disabled={isLoading}
+              className="scale-110"
+            />
+            <span
+              className={cn(
+                "flex-1 text-sm font-bold transition-all duration-300",
+                item.done
+                  ? "line-through text-muted-foreground/30 scale-[0.98] translate-x-1"
+                  : "text-foreground/90"
+              )}
+            >
+              {item.text}
+            </span>
+            <Button
+              size="icon"
+              variant="ghost"
+              disabled={isLoading}
+              className="opacity-0 group-hover:opacity-100 h-8 w-8 text-muted-foreground/40 hover:text-destructive hover:bg-destructive/10 transition-all rounded-lg"
+              onClick={() => !isLoading && handleRemoveChecklistItem(item.id)}
+            >
+              <X size={14} />
+            </Button>
+          </motion.div>
+        ))}
+      </div>
+
+      <div className="flex gap-4 p-2.5 bg-secondary/5 rounded-2xl border border-border/40 focus-within:border-primary/40 transition-all shadow-inner">
+        <Input
+          value={newChecklistItem}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            !isLoading && setNewChecklistItem(e.target.value)
+          }
+          disabled={isLoading}
+          placeholder="Add validation gate..."
+          className="h-10 bg-transparent border-none focus:ring-0 text-sm font-bold placeholder:font-black placeholder:uppercase placeholder:text-[10px] placeholder:tracking-widest"
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter" && !isLoading) handleAddChecklistItem();
+          }}
+        />
+        <Button
+          onClick={handleAddChecklistItem}
+          disabled={!newChecklistItem.trim() || isLoading}
+          className="px-6 h-10 bg-foreground text-background font-black text-[10px] uppercase tracking-widest hover:scale-105 active:scale-95 transition-all rounded-xl"
+        >
+          Append
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/task-panel/TaskDescription.tsx

@@ -0,0 +1,201 @@
+/**
+ * Task Description Component
+ *
+ * Displays and allows editing of task title and description.
+ * Supports markdown editing and preview modes.
+ * Integrates with useTaskPanel for optimistic updates.
+ *
+ * @example
+ * <TaskDescription task={task} onUpdate={handleUpdate} isLoading={isLoading} />
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { Edit, FileText, Loader2 } from "lucide-react";
+import { SectionLabel } from "@/components/typography";
+import { Input, Textarea } from "@/components/ui";
+import { useTaskDescription } from "@/hooks/useTaskDescription";
+import { cn } from "@/lib/utils";
+
+interface TaskDescriptionProps {
+  /** Task to display */
+  task: Task;
+  /** Whether a task mutation is loading */
+  isLoading?: boolean;
+  /** Callback when task is updated */
+  onUpdate: (updates: Partial<Task>) => void;
+}
+
+/**
+ * Task Description Component
+ *
+ * Features:
+ * - Editable title with inline editing
+ * - Description with markdown support
+ * - Preview/Edit mode toggle
+ * - Auto-save on blur
+ * - Loading states during mutations
+ *
+ * @component
+ */
+export function TaskDescription({
+  task,
+  isLoading = false,
+  onUpdate,
+}: TaskDescriptionProps) {
+  const {
+    isEditingTitle,
+    editTitle,
+    setIsEditingTitle,
+    setEditTitle,
+    handleTitleSave,
+    editDesc,
+    setEditDesc,
+    handleDescSave,
+    descMode,
+    setDescMode,
+  } = useTaskDescription({ task, onUpdate });
+
+  return (
+    <div className="p-8 overflow-y-auto scrollbar-thin">
+      {/* Title Section */}
+      <div className="mb-8">
+        {isEditingTitle ? (
+          <div className="relative">
+            <Input
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              onBlur={handleTitleSave}
+              disabled={isLoading}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !isLoading) handleTitleSave();
+                if (e.key === "Escape") {
+                  setEditTitle(task.title);
+                  setIsEditingTitle(false);
+                }
+              }}
+              className="text-3xl h-16 font-black tracking-tight bg-secondary/20 border-primary/20 rounded-2xl px-6"
+              autoFocus
+              aria-label="Edit task title"
+            />
+            {isLoading && (
+              <Loader2
+                size={20}
+                className="absolute right-4 top-1/2 -translate-y-1/2 animate-spin text-primary"
+                aria-hidden="true"
+              />
+            )}
+          </div>
+        ) : (
+          <h2
+            className={cn(
+              "text-3xl font-black tracking-tight transition-all cursor-pointer leading-tight group flex items-start",
+              isLoading ? "opacity-50" : "hover:text-primary"
+            )}
+            onClick={() => !isLoading && setIsEditingTitle(true)}
+            onKeyDown={(e) => {
+              if ((e.key === "Enter" || e.key === " ") && !isLoading) {
+                setIsEditingTitle(true);
+              }
+            }}
+            aria-label="Task title - click to edit"
+          >
+            {task.title}
+            {!isLoading && (
+              <Edit
+                size={18}
+                className="ml-4 mt-1.5 opacity-0 group-hover:opacity-40 transition-opacity"
+                aria-hidden="true"
+              />
+            )}
+          </h2>
+        )}
+      </div>
+
+      {/* Description Section */}
+      <div className="mb-10">
+        <div className="flex items-center justify-between mb-5">
+          <div className="flex items-center gap-3">
+            <div className="h-8 w-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-all">
+              <FileText size={16} aria-hidden="true" />
+            </div>
+            <SectionLabel as="h4">Technical Documentation</SectionLabel>
+          </div>
+          <div className="flex bg-secondary/40 p-1 rounded-xl border border-border/20 shadow-inner">
+            <button
+              className={cn(
+                "px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all",
+                descMode === "preview"
+                  ? "bg-background shadow-md text-primary scale-105"
+                  : "text-muted-foreground hover:text-foreground",
+                isLoading && "opacity-50 cursor-not-allowed"
+              )}
+              onClick={() => !isLoading && setDescMode("preview")}
+              disabled={isLoading}
+              aria-pressed={descMode === "preview"}
+            >
+              Visual
+            </button>
+            <button
+              className={cn(
+                "px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all",
+                descMode === "edit"
+                  ? "bg-background shadow-md text-primary scale-105"
+                  : "text-muted-foreground hover:text-foreground",
+                isLoading && "opacity-50 cursor-not-allowed"
+              )}
+              onClick={() => !isLoading && setDescMode("edit")}
+              disabled={isLoading}
+              aria-pressed={descMode === "edit"}
+            >
+              Markdown
+            </button>
+          </div>
+        </div>
+
+        {descMode === "edit" ? (
+          <div
+            className={cn(
+              "group border border-border/40 rounded-2xl overflow-hidden focus-within:ring-2 focus-within:ring-primary/20 transition-all bg-secondary/5 shadow-inner",
+              isLoading && "opacity-60"
+            )}
+          >
+            <Textarea
+              value={editDesc}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                !isLoading && setEditDesc(e.target.value)
+              }
+              disabled={isLoading}
+              placeholder="Define implementation architecture, requirements, and scope..."
+              rows={12}
+              className="border-none focus:ring-0 text-base leading-relaxed p-8 bg-transparent scrollbar-thin"
+              onBlur={handleDescSave}
+              aria-label="Task description (markdown)"
+            />
+          </div>
+        ) : (
+          <div
+            className={cn(
+              "prose prose-invert max-w-none bg-secondary/10 p-10 rounded-3xl border border-border/40 shadow-[inset_0_2px_10px_rgba(0,0,0,0.1)] relative group",
+              isLoading && "opacity-60 pointer-events-none"
+            )}
+          >
+            {task.description ? (
+              <p className="text-foreground/80 leading-relaxed whitespace-pre-wrap font-medium">
+                {task.description}
+              </p>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-10 opacity-30 select-none">
+                <FileText size={32} className="mb-4" aria-hidden="true" />
+                <span className="text-xs font-black uppercase tracking-[0.2em]">
+                  Waiting for Specs
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/task-panel/TaskDocs.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { FileText, Link, Plus, Trash2, X } from "lucide-react";
+import { useState } from "react";
+import { useDocsQuery } from "@/hooks/useDocsQuery";
+import { cn } from "@/lib/utils";
+import {
+  EmptyStateText,
+  MetadataText,
+  SecondaryText,
+  SectionLabel,
+} from "../typography";
+import { Button } from "../ui";
+
+interface TaskDocsProps {
+  /** Task to manage documents for */
+  task: Task;
+  /** Called when linking a document */
+  onLinkDoc: (docId: string) => void;
+  /** Called when unlinking a document */
+  onUnlinkDoc: (docId: string) => void;
+}
+
+/**
+ * Task Docs Component
+ *
+ * Displays and manages linked documentation for a task.
+ * Allows linking/unlinking documents from the knowledge base.
+ * Uses standardized typography components for consistent text styling.
+ *
+ * @component
+ */
+export function TaskDocs({ task, onLinkDoc, onUnlinkDoc }: TaskDocsProps) {
+  const [isLinking, setIsLinking] = useState(false);
+  const { data: allDocs = [] } = useDocsQuery();
+
+  const linkedDocs =
+    (task as Task & { docs: { id: string; title: string }[] }).docs || [];
+  const linkedDocIds = linkedDocs.map((d: { id: string }) => d.id);
+  const availableDocs = allDocs.filter((d) => !linkedDocIds.includes(d.id));
+
+  return (
+    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      <div className="flex items-center justify-between px-1">
+        <SectionLabel as="h3">Knowledge base</SectionLabel>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsLinking(!isLinking)}
+          className={cn(
+            "h-7 px-2 text-[9px] font-black uppercase tracking-widest gap-1.5 transition-all rounded-lg",
+            isLinking
+              ? "bg-primary/20 text-primary"
+              : "hover:bg-primary/10 hover:text-primary opacity-60 hover:opacity-100"
+          )}
+        >
+          {isLinking ? <X size={12} /> : <Plus size={12} />}
+          {isLinking ? "Cancel" : "Link Doc"}
+        </Button>
+      </div>
+
+      {isLinking && (
+        <div className="p-3 bg-primary/5 border border-primary/20 rounded-2xl animate-in zoom-in-95 duration-200">
+          <SectionLabel className="mb-2 px-1 text-primary">
+            Available Nodes
+          </SectionLabel>
+          {availableDocs.length > 0 ? (
+            <div className="max-h-[200px] overflow-y-auto pr-1 space-y-1 scrollbar-thin">
+              {availableDocs.map((doc) => (
+                <button
+                  key={doc.id}
+                  onClick={() => {
+                    onLinkDoc(doc.id);
+                    setIsLinking(false);
+                  }}
+                  className="flex items-center gap-3 w-full p-2.5 text-xs font-bold rounded-xl bg-card border border-border/40 hover:border-primary/40 hover:bg-primary/5 transition-all text-left group"
+                >
+                  <FileText
+                    size={14}
+                    className="text-muted-foreground group-hover:text-primary transition-colors"
+                  />
+                  <span className="flex-1 truncate uppercase tracking-tight opacity-80 group-hover:opacity-100 transition-opacity">
+                    {doc.title}
+                  </span>
+                  <Link
+                    size={12}
+                    className="opacity-0 group-hover:opacity-40"
+                  />
+                </button>
+              ))}
+            </div>
+          ) : (
+            <div className="py-6 text-center">
+              <SecondaryText size="xs" className="italic">
+                No Unlinked Nodes
+              </SecondaryText>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="space-y-2 px-1">
+        {linkedDocs.length > 0
+          ? linkedDocs.map((doc: { id: string; title: string }) => (
+              <div
+                key={doc.id}
+                className="flex items-center gap-3 p-3 rounded-2xl bg-secondary/20 border border-border/20 hover:border-border/60 transition-all group"
+              >
+                <div className="w-8 h-8 flex items-center justify-center rounded-xl bg-primary/10 text-primary border border-primary/20">
+                  <FileText size={16} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-[11px] font-black uppercase tracking-wider text-foreground/90 truncate">
+                    {doc.title}
+                  </div>
+                  <MetadataText size="xs">
+                    Document ID: {doc.id.split("-")[0]}
+                  </MetadataText>
+                </div>
+                <button
+                  onClick={() => onUnlinkDoc(doc.id)}
+                  className="p-1.5 text-muted-foreground/40 hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
+                >
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            ))
+          : !isLinking && (
+              <EmptyStateText icon={<Link size={24} />}>
+                No Linked Documents
+              </EmptyStateText>
+            )}
+      </div>
+    </div>
+  );
+}

package/src/components/task-panel/TaskHeader.tsx

@@ -0,0 +1,125 @@
+/**
+ * Task Header Component
+ *
+ * Displays task metadata and action buttons in the panel header.
+ * Shows task ID, status, priority, and contextual actions.
+ *
+ * @example
+ * <TaskHeader
+ *   task={task}
+ *   onClose={handleClose}
+ *   onDelete={handleDelete}
+ *   onApprove={handleApprove}
+ *   onReject={handleReject}
+ * />
+ */
+
+"use client";
+
+import { type Task, TaskPriority, TaskStatus } from "@locusai/shared";
+import { CheckCircle, ChevronRight, Trash2 } from "lucide-react";
+import { MetadataText } from "@/components/typography";
+import { Button, PriorityBadge, StatusBadge } from "@/components/ui";
+
+interface TaskHeaderProps {
+  /** Task to display in header */
+  task: Task;
+  /** Whether a task mutation is loading */
+  isLoading?: boolean;
+  /** Whether task deletion is in progress */
+  isDeleting?: boolean;
+  /** Callback when closing panel */
+  onClose: () => void;
+  /** Callback to delete task */
+  onDelete: () => void;
+  /** Callback to approve task (if in verification) */
+  onApprove: () => void;
+  /** Callback to reject task (if in verification) */
+  onReject: () => void;
+}
+
+/**
+ * Task Header Component
+ *
+ * Features:
+ * - Task ID reference
+ * - Status and priority badges
+ * - Approve/reject buttons (if in verification status)
+ * - Delete button
+ * - Close button
+ *
+ * @component
+ */
+export function TaskHeader({
+  task,
+  isLoading = false,
+  isDeleting = false,
+  onClose,
+  onDelete,
+  onApprove,
+  onReject,
+}: TaskHeaderProps) {
+  const canApproveReject = task.status === TaskStatus.VERIFICATION;
+
+  return (
+    <header className="flex items-center gap-6 px-10 border-b border-border bg-card/50 backdrop-blur-md h-[84px] shrink-0">
+      <button
+        className="p-2.5 rounded-xl text-muted-foreground hover:bg-secondary hover:text-foreground hover:scale-105 transition-all duration-200 border border-transparent hover:border-border"
+        onClick={onClose}
+        aria-label="Close task panel"
+      >
+        <ChevronRight size={20} aria-hidden="true" />
+      </button>
+
+      <div className="flex-1 min-w-0">
+        <MetadataText size="sm" className="mb-1.5 block">
+          Reference: #{task.id}
+        </MetadataText>
+        <div className="flex gap-3">
+          <StatusBadge status={task.status} />
+          <PriorityBadge priority={task.priority || TaskPriority.MEDIUM} />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {canApproveReject && (
+          <>
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={onReject}
+              disabled={isLoading}
+              className="h-10 px-5 rounded-xl font-black uppercase tracking-widest text-[10px]"
+              aria-label="Reject task"
+            >
+              Reject
+            </Button>
+            <Button
+              size="sm"
+              variant="success"
+              onClick={onApprove}
+              disabled={isLoading}
+              className="h-10 px-5 rounded-xl font-black uppercase tracking-widest text-[10px]"
+              aria-label="Approve task"
+            >
+              <CheckCircle size={16} className="mr-2" aria-hidden="true" />
+              Approve
+            </Button>
+            <div className="w-px h-6 bg-border mx-2" aria-hidden="true" />
+          </>
+        )}
+        <Button
+          size="icon"
+          variant="danger"
+          onClick={onDelete}
+          disabled={isDeleting}
+          title="Delete"
+          className="h-10 w-10 hover:scale-105 active:scale-95 transition-transform rounded-xl"
+          aria-label="Delete task"
+        >
+          <Trash2 size={18} aria-hidden="true" />
+        </Button>
+      </div>
+    </header>
+  );
+}