@locusai/web 0.1.7 → 0.2.2

package/src/components/settings/ProjectSetupGuide.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { Check, Clipboard, Terminal } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui";
+import { SettingSection } from "./SettingSection";
+
+interface ProjectSetupGuideProps {
+  hasApiKeys: boolean;
+  workspaceId?: string;
+}
+
+export function ProjectSetupGuide({
+  hasApiKeys,
+  workspaceId,
+}: ProjectSetupGuideProps) {
+  const [copiedCommand, setCopiedCommand] = useState<string | null>(null);
+
+  const copyToClipboard = (text: string, id: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedCommand(id);
+    toast.success("Command copied to clipboard");
+    setTimeout(() => setCopiedCommand(null), 2000);
+  };
+
+  const steps = [
+    {
+      id: "api-key",
+      title: "1. Create an API Key",
+      description:
+        "You'll need an API key to authenticate the CLI with your organization.",
+      status: hasApiKeys ? "completed" : "pending",
+      content: hasApiKeys ? (
+        <p className="text-sm text-green-500 flex items-center gap-2">
+          <Check size={16} /> API key created
+        </p>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          Go to the API Keys section above and create your first key.
+        </p>
+      ),
+    },
+    {
+      id: "install",
+      title: "2. Initialize your project",
+      description:
+        "Run this command in your project root to set up Locus configuration and CLAUDE.md.",
+      status: "action",
+      command: "npx @locusai/cli init",
+    },
+    {
+      id: "run",
+      title: "3. Start your agents",
+      description:
+        "Run this command to start an agent that will poll for tasks from your dashboard.",
+      status: "action",
+      command: `npx @locusai/cli run --api-key YOUR_API_KEY --workspace ${workspaceId || "YOUR_WORKSPACE_ID"}`,
+    },
+  ];
+
+  return (
+    <SettingSection title="Project Setup Guide">
+      <div className="p-6 space-y-8">
+        {steps.map((step) => (
+          <div key={step.id} className="relative pl-8">
+            {/* Connector Line */}
+            {step.id !== "run" && (
+              <div className="absolute left-[11px] top-8 bottom-[-32px] w-[2px] bg-border/50" />
+            )}
+
+            {/* Step Indicator */}
+            <div
+              className={`absolute left-0 top-0 w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold border-2 ${
+                step.status === "completed"
+                  ? "bg-green-500/10 border-green-500 text-green-500"
+                  : "bg-secondary border-border text-muted-foreground"
+              }`}
+            >
+              {step.status === "completed" ? (
+                <Check size={12} />
+              ) : step.id === "api-key" ? (
+                "1"
+              ) : step.id === "install" ? (
+                "2"
+              ) : (
+                "3"
+              )}
+            </div>
+
+            <div className="space-y-3">
+              <div>
+                <h4 className="font-medium text-sm text-foreground">
+                  {step.title}
+                </h4>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {step.description}
+                </p>
+              </div>
+
+              {step.content}
+
+              {step.command && (
+                <div className="group relative">
+                  <div className="bg-secondary/50 border border-border/50 rounded-xl p-3 font-mono text-xs flex items-center justify-between overflow-x-auto">
+                    <code className="text-foreground whitespace-nowrap">
+                      <span className="text-muted-foreground mr-2">$</span>
+                      {step.command}
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 ml-2 opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={() => {
+                        if (step.command) {
+                          copyToClipboard(step.command, step.id);
+                        }
+                      }}
+                    >
+                      {copiedCommand === step.id ? (
+                        <Check size={14} className="text-green-500" />
+                      ) : (
+                        <Clipboard size={14} />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+
+        <div className="pt-4 flex items-center gap-3 p-4 bg-primary/5 border border-primary/10 rounded-2xl">
+          <Terminal size={18} className="text-primary" />
+          <p className="text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">Pro tip:</span> You
+            can also set{" "}
+            <code className="bg-secondary px-1 rounded text-foreground">
+              LOCUS_API_KEY
+            </code>{" "}
+            environment variable to avoid passing it via flags.
+          </p>
+        </div>
+      </div>
+    </SettingSection>
+  );
+}

package/src/components/settings/SettingItem.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+
+export interface SettingItemProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}
+
+export function SettingItem({
+  icon,
+  title,
+  description,
+  children,
+}: SettingItemProps) {
+  return (
+    <div className="flex items-center justify-between p-4 rounded-xl hover:bg-secondary/30 transition-colors">
+      <div className="flex gap-4">
+        <div className="w-10 h-10 rounded-xl bg-secondary flex items-center justify-center text-muted-foreground shrink-0">
+          {icon}
+        </div>
+        <div>
+          <h4 className="font-medium text-foreground">{title}</h4>
+          <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
+        </div>
+      </div>
+      <div className="shrink-0 flex items-center h-full">{children}</div>
+    </div>
+  );
+}

package/src/components/settings/SettingSection.tsx

@@ -0,0 +1,50 @@
+/**
+ * Setting Section Component
+ *
+ * Reusable section wrapper for settings pages.
+ * Provides consistent styling and title display.
+ *
+ * @example
+ * <SettingSection title="Profile">
+ *   <SettingItem label="Name" value={name} />
+ * </SettingSection>
+ */
+
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface SettingSectionProps {
+  /** Section title */
+  title: string;
+  /** Section content */
+  children: React.ReactNode;
+  /** Optional className override */
+  className?: string;
+  /** Optional title className override */
+  titleClassName?: string;
+}
+
+export function SettingSection({
+  title,
+  children,
+  className,
+  titleClassName,
+}: SettingSectionProps) {
+  return (
+    <div className={cn("mb-8", className)}>
+      <h3
+        className={cn(
+          "text-xs font-bold uppercase tracking-widest text-muted-foreground mb-4",
+          titleClassName
+        )}
+      >
+        {title}
+      </h3>
+      <div className="bg-card border border-border/50 rounded-2xl overflow-hidden divide-y divide-border/50">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/settings/TeamInvitationsList.tsx

@@ -0,0 +1,90 @@
+/**
+ * Pending invitations list component
+ * Displays pending invitations with actions
+ */
+
+import { type Invitation } from "@locusai/shared";
+import { Copy, Mail, X } from "lucide-react";
+import { Badge, Button } from "@/components/ui";
+
+interface TeamInvitationsListProps {
+  invitations: Invitation[];
+  canManage: boolean;
+  onCopyLink: (token: string) => void;
+  onRevokeInvitation: (invitationId: string) => void;
+}
+
+export function TeamInvitationsList({
+  invitations,
+  canManage,
+  onCopyLink,
+  onRevokeInvitation,
+}: TeamInvitationsListProps) {
+  if (invitations.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between px-1">
+        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
+          Pending Invitations ({invitations.length})
+        </h3>
+      </div>
+
+      <div className="bg-card/50 border border-secondary/20 rounded-2xl overflow-hidden">
+        <div className="divide-y divide-secondary/20">
+          {invitations.map((invitation) => (
+            <div
+              key={invitation.id}
+              className="flex items-center justify-between p-4 hover:bg-secondary/10 transition-colors"
+            >
+              <div className="flex items-center gap-4">
+                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                  <Mail size={20} />
+                </div>
+                <div>
+                  <div className="font-medium">{invitation.email}</div>
+                  <div className="text-sm text-muted-foreground">
+                    Invited as{" "}
+                    <span className="capitalize">
+                      {invitation.role.toLowerCase()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Badge variant="warning" size="sm">
+                  Pending
+                </Badge>
+                {canManage && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onCopyLink(invitation.token)}
+                      className="text-muted-foreground"
+                      title="Copy Invitation Link"
+                    >
+                      <Copy size={18} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => onRevokeInvitation(invitation.id)}
+                      className="text-muted-foreground hover:text-red-500 hover:bg-red-500/10"
+                      title="Revoke Invitation"
+                    >
+                      <X size={18} />
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/settings/TeamMembersList.tsx

@@ -0,0 +1,95 @@
+/**
+ * Team members list component
+ * Displays organization members with actions
+ */
+
+import { MembershipRole, type MembershipWithUser } from "@locusai/shared";
+import { Shield, Trash2 } from "lucide-react";
+import { Avatar, Badge, Button } from "@/components/ui";
+
+interface TeamMembersListProps {
+  members: MembershipWithUser[];
+  currentUserId?: string;
+  canManage: boolean;
+  isLoading: boolean;
+  onRemoveMember: (userId: string) => void;
+}
+
+export function TeamMembersList({
+  members,
+  currentUserId,
+  canManage,
+  isLoading,
+  onRemoveMember,
+}: TeamMembersListProps) {
+  if (isLoading) {
+    return (
+      <div className="p-8 text-center text-muted-foreground">Loading...</div>
+    );
+  }
+
+  if (members.length === 0) {
+    return (
+      <div className="p-8 text-center text-muted-foreground">
+        No members found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="divide-y divide-secondary/20">
+      {members.map((membership) => (
+        <div
+          key={membership.id}
+          className="flex items-center justify-between p-4 hover:bg-secondary/10 transition-colors"
+        >
+          <div className="flex items-center gap-4">
+            <Avatar
+              src={membership.user.avatarUrl}
+              name={membership.user.name}
+              size="md"
+            />
+            <div>
+              <div className="flex items-center gap-2">
+                <span className="font-medium">{membership.user.name}</span>
+                {membership.userId === currentUserId && (
+                  <Badge variant="info" size="sm">
+                    You
+                  </Badge>
+                )}
+              </div>
+              <span className="text-sm text-muted-foreground">
+                {membership.user.email}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-secondary/30 border border-secondary/20">
+              {membership.role === MembershipRole.OWNER ||
+              membership.role === MembershipRole.ADMIN ? (
+                <Shield size={14} className="text-primary" />
+              ) : null}
+              <span className="text-xs font-medium capitalize">
+                {membership.role.toLowerCase()}
+              </span>
+            </div>
+
+            {canManage &&
+              membership.userId !== currentUserId &&
+              membership.role !== MembershipRole.OWNER && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onRemoveMember(membership.userId)}
+                  className="text-muted-foreground hover:text-red-500 hover:bg-red-500/10"
+                >
+                  <Trash2 size={18} />
+                </Button>
+              )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/settings/index.ts

@@ -0,0 +1,8 @@
+export * from "./ApiKeyConfirmationModal";
+export * from "./ApiKeyCreatedModal";
+export * from "./ApiKeysList";
+export * from "./ApiKeysSettings";
+export * from "./InviteMemberModal";
+export * from "./ProjectSetupGuide";
+export * from "./SettingItem";
+export * from "./SettingSection";

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

@@ -0,0 +1,127 @@
+"use client";
+
+import { EventType, type Task, type Event as TaskEvent } from "@locusai/shared";
+import { formatDistanceToNow } from "date-fns";
+import {
+  CheckCircle,
+  Edit,
+  MessageSquare,
+  PlusSquare,
+  Tag,
+} from "lucide-react";
+import { MetadataText, SectionLabel } from "@/components/typography";
+import { Button, EmptyState, Input } from "@/components/ui";
+
+interface TaskActivityProps {
+  task: Task;
+  isLoading?: boolean;
+  newComment: string;
+  setNewComment: (val: string) => void;
+  handleAddComment: () => void;
+}
+
+export function TaskActivity({
+  task,
+  isLoading = false,
+  newComment,
+  setNewComment,
+  handleAddComment,
+}: TaskActivityProps) {
+  return (
+    <div>
+      <SectionLabel as="h4" className="mb-6 pb-2 border-b border-border/40">
+        Neural Stream
+      </SectionLabel>
+
+      <div className="flex gap-3 mb-6 bg-background/30 p-2 rounded-2xl border border-border/40 shadow-inner focus-within:border-primary/30 transition-all">
+        <Input
+          value={newComment}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            !isLoading && setNewComment(e.target.value)
+          }
+          disabled={isLoading}
+          placeholder="Transmit logs..."
+          className="h-10 text-xs font-bold bg-transparent border-none focus:ring-0 placeholder:font-black placeholder:uppercase placeholder:text-[9px] placeholder:tracking-[0.2em]"
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter" && !isLoading) handleAddComment();
+          }}
+        />
+        <Button
+          onClick={handleAddComment}
+          disabled={!newComment.trim() || isLoading}
+          variant="ghost"
+          className="h-10 w-10 p-0 rounded-xl hover:bg-primary/10 hover:text-primary transition-all group shrink-0"
+        >
+          <MessageSquare
+            size={16}
+            className="group-hover:rotate-12 transition-transform"
+          />
+        </Button>
+      </div>
+
+      <div className="space-y-10 max-h-[600px] overflow-y-auto pr-4 scrollbar-thin">
+        {task.activityLog.length > 0 ? (
+          task.activityLog.map((event: Task["activityLog"][number]) => (
+            <div key={event.id} className="relative flex gap-6 group">
+              <div className="absolute left-[19px] top-10 bottom-[-28px] w-px bg-border/40 group-last:hidden" />
+              <div className="h-10 w-10 rounded-2xl bg-card border border-border/60 flex items-center justify-center shrink-0 z-10 shadow-sm group-hover:border-primary/40 transition-all group-hover:scale-110">
+                {event.type === EventType.COMMENT_ADDED && (
+                  <MessageSquare size={14} className="text-blue-500" />
+                )}
+                {event.type === EventType.STATUS_CHANGED && (
+                  <Tag size={14} className="text-amber-500" />
+                )}
+                {event.type === EventType.TASK_CREATED && (
+                  <PlusSquare size={14} className="text-emerald-400" />
+                )}
+                {event.type === EventType.TASK_UPDATED && (
+                  <Edit size={14} className="text-primary" />
+                )}
+                {event.type === EventType.CI_RAN && (
+                  <CheckCircle size={14} className="text-accent" />
+                )}
+              </div>
+              <div className="pt-2 min-w-0">
+                <p className="text-xs font-bold text-foreground/80 leading-snug mb-2">
+                  {formatActivityEvent(event as TaskEvent)}
+                </p>
+                <MetadataText size="sm">
+                  {formatDistanceToNow(new Date(event.createdAt), {
+                    addSuffix: true,
+                  })}
+                </MetadataText>
+              </div>
+            </div>
+          ))
+        ) : (
+          <EmptyState
+            variant="minimal"
+            title="Silent Stream"
+            className="py-12 opacity-30"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatActivityEvent(event: TaskEvent): string {
+  const { type, payload } = event;
+  const p = payload as TaskEvent["payload"];
+  switch (type) {
+    case EventType.STATUS_CHANGED:
+      return `Status moved ${p.oldStatus} ➟ ${p.newStatus}`;
+    case EventType.COMMENT_ADDED:
+      return `${p.author}: "${p.text}"`;
+    case EventType.TASK_CREATED:
+      return "Task initialized";
+    case EventType.TASK_UPDATED:
+      return "Parameters calibrated";
+    case EventType.TASK_DELETED:
+      return "Task deleted";
+    case EventType.CI_RAN:
+      return `Valuation complete: ${p.summary}`;
+    default:
+      return (type as string).replace(/_/g, " ").toLowerCase();
+  }
+}