@locusai/web 0.1.7 → 0.2.2

package/src/components/settings/ApiKeyConfirmationModal.tsx

@@ -0,0 +1,81 @@
+/**
+ * API Key Confirmation Modal
+ * Shows the newly created API key (only time it's visible)
+ */
+
+import { Copy } from "lucide-react";
+import { toast } from "sonner";
+import { Button, Modal } from "@/components/ui";
+
+interface ApiKeyConfirmationModalProps {
+  isOpen: boolean;
+  apiKey: string | null;
+  keyName: string;
+  onClose: () => void;
+}
+
+export function ApiKeyConfirmationModal({
+  isOpen,
+  apiKey,
+  keyName,
+  onClose,
+}: ApiKeyConfirmationModalProps) {
+  const handleCopy = () => {
+    if (!apiKey) return;
+    navigator.clipboard.writeText(apiKey);
+    toast.success("API key copied to clipboard");
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-xl font-bold text-foreground">API Key Created</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            Save your API key now. You won't be able to see it again!
+          </p>
+        </div>
+
+        <div className="bg-primary/10 border border-primary/20 rounded-lg p-4 space-y-3">
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-1">
+              Key Name
+            </p>
+            <p className="font-medium">{keyName}</p>
+          </div>
+
+          <div>
+            <p className="text-xs font-medium text-muted-foreground mb-1">
+              API Key
+            </p>
+            <div className="flex items-center gap-2">
+              <code className="flex-1 bg-secondary/50 px-3 py-2 rounded font-mono text-sm break-all">
+                {apiKey}
+              </code>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={handleCopy}
+                className="flex-shrink-0"
+              >
+                <Copy size={16} className="mr-1.5" />
+                Copy
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-amber-500/10 border border-amber-500/20 rounded-lg p-3">
+          <p className="text-xs text-amber-600 dark:text-amber-400">
+            ⚠️ <strong>Important:</strong> Keep this key secure. Never share it
+            publicly or commit it to version control.
+          </p>
+        </div>
+
+        <div className="flex gap-3 justify-end pt-4">
+          <Button onClick={onClose}>Done</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/components/settings/ApiKeyCreatedModal.tsx

@@ -0,0 +1,96 @@
+/**
+ * Create API Key Modal Component
+ * Modal form for creating new API keys
+ */
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button, Input, Modal } from "@/components/ui";
+
+interface CreateApiKeyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (name: string) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function CreateApiKeyModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading,
+}: CreateApiKeyModalProps) {
+  const [name, setName] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!name.trim()) {
+      toast.error("Please enter a name for the API key");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit(name.trim());
+      setName("");
+      onClose();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create API key"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-xl font-bold text-foreground">Create API Key</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            API keys allow external applications (like the CLI) to authenticate
+            with your workspace.
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-foreground">
+            Key Name
+          </label>
+          <Input
+            placeholder="e.g., Production Agent, CI/CD"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            disabled={isSubmitting || isLoading}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && name.trim()) {
+                handleSubmit();
+              }
+            }}
+          />
+          <p className="text-xs text-muted-foreground">
+            Give this key a meaningful name to remember its purpose.
+          </p>
+        </div>
+
+        <div className="flex gap-3 justify-end pt-4">
+          <Button
+            variant="secondary"
+            onClick={onClose}
+            disabled={isSubmitting || isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={!name.trim() || isSubmitting || isLoading}
+            isLoading={isSubmitting || isLoading}
+          >
+            Create Key
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/components/settings/ApiKeysList.tsx

@@ -0,0 +1,143 @@
+/**
+ * API Keys List Component
+ * Displays organization API keys with copy, view, and delete actions
+ */
+
+import { Copy, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Badge, Button } from "@/components/ui";
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  key: string;
+  createdAt: Date | string;
+  lastUsedAt: Date | string | null;
+  active: boolean;
+}
+
+interface ApiKeysListProps {
+  apiKeys: ApiKey[];
+  isLoading: boolean;
+  onDelete: (id: string) => Promise<void>;
+}
+
+function formatDate(date: Date | string | null) {
+  if (!date) return "Never";
+  const d = new Date(date);
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+function maskApiKey(key: string): string {
+  if (!key) return "";
+  if (key.length <= 8) return key;
+  return `${key.slice(0, 4)}••••${key.slice(-4)}`;
+}
+
+export function ApiKeysList({
+  apiKeys,
+  isLoading,
+  onDelete,
+}: ApiKeysListProps) {
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const copyToClipboard = (key: string) => {
+    navigator.clipboard.writeText(key);
+    toast.success("API key copied to clipboard");
+  };
+
+  const handleDelete = async (id: string) => {
+    setDeletingId(id);
+    try {
+      await onDelete(id);
+      toast.success("API key deleted");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete API key"
+      );
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-8 text-center text-muted-foreground">Loading...</div>
+    );
+  }
+
+  if (apiKeys.length === 0) {
+    return (
+      <div className="p-8 text-center text-muted-foreground">
+        No API keys created yet. Create one to get started.
+      </div>
+    );
+  }
+
+  return (
+    <div className="divide-y divide-border/50">
+      {apiKeys.map((apiKey) => {
+        return (
+          <div
+            key={apiKey.id}
+            className="flex items-center justify-between p-4 hover:bg-secondary/10 transition-colors"
+          >
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-3">
+                <span className="font-medium truncate">{apiKey.name}</span>
+                {apiKey.active ? (
+                  <Badge variant="success" size="sm" className="shrink-0">
+                    Active
+                  </Badge>
+                ) : (
+                  <Badge variant="secondary" size="sm" className="shrink-0">
+                    Inactive
+                  </Badge>
+                )}
+              </div>
+
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-2">
+                <div className="flex items-center gap-2 shrink-0">
+                  <code className="text-xs bg-secondary/50 px-2 py-1 rounded font-mono whitespace-nowrap">
+                    {maskApiKey(apiKey.key)}
+                  </code>
+
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 shrink-0"
+                    onClick={() => copyToClipboard(apiKey.key)}
+                    title="Copy"
+                  >
+                    <Copy size={14} />
+                  </Button>
+                </div>
+
+                <div className="flex items-center gap-4 text-xs text-muted-foreground whitespace-nowrap">
+                  <span>Created {formatDate(apiKey.createdAt)}</span>
+                  <span>Last used {formatDate(apiKey.lastUsedAt)}</span>
+                </div>
+              </div>
+            </div>
+
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => handleDelete(apiKey.id)}
+              disabled={deletingId === apiKey.id}
+              className="text-muted-foreground hover:text-red-500 hover:bg-red-500/10"
+              title="Delete"
+            >
+              <Trash2 size={18} />
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/settings/ApiKeysSettings.tsx

@@ -0,0 +1,144 @@
+/**
+ * API Keys Settings Section
+ * Container for API keys management UI with hooks integration
+ */
+
+"use client";
+
+import { Key } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui";
+import { useAuthenticatedUserWithOrg, useWorkspaceIdOptional } from "@/hooks";
+import { locusClient } from "@/lib/api-client";
+import { ApiKeyConfirmationModal } from "./ApiKeyConfirmationModal";
+import { CreateApiKeyModal } from "./ApiKeyCreatedModal";
+import { ApiKeysList } from "./ApiKeysList";
+import { ProjectSetupGuide } from "./ProjectSetupGuide";
+import { SettingSection } from "./SettingSection";
+
+interface ApiKey {
+  id: string;
+  name: string;
+  key: string;
+  createdAt: Date | string;
+  lastUsedAt: Date | string | null;
+  active: boolean;
+}
+
+export function ApiKeysSettings() {
+  const { orgId } = useAuthenticatedUserWithOrg();
+  const workspaceId = useWorkspaceIdOptional();
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [newApiKey, setNewApiKey] = useState<string | null>(null);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
+
+  // Fetch API keys
+  const fetchApiKeys = useCallback(async () => {
+    if (!orgId) return;
+
+    setIsLoading(true);
+    try {
+      const keys = await locusClient.organizations.listApiKeys(orgId);
+      setApiKeys(keys);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to fetch API keys"
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [orgId]);
+
+  useEffect(() => {
+    fetchApiKeys();
+  }, [fetchApiKeys]);
+
+  const handleCreateApiKey = async (name: string) => {
+    if (!orgId) return;
+
+    try {
+      const response = await locusClient.organizations.createApiKey(
+        orgId,
+        name
+      );
+      setNewApiKey(response.key);
+      setNewKeyName(name);
+      setIsConfirmationModalOpen(true);
+      setIsCreateModalOpen(false);
+
+      // Add to list
+      setApiKeys([...apiKeys, response]);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create API key"
+      );
+    }
+  };
+
+  const handleDeleteApiKey = async (id: string) => {
+    if (!orgId) return;
+
+    try {
+      await locusClient.organizations.deleteApiKey(orgId, id);
+      setApiKeys(apiKeys.filter((key) => key.id !== id));
+      toast.success("API key deleted");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete API key"
+      );
+    }
+  };
+
+  return (
+    <>
+      <SettingSection title="API Keys" className="mb-8">
+        <div className="flex items-center justify-between p-4 border-b border-border/50">
+          <div className="flex items-center gap-3">
+            <Key size={18} className="text-muted-foreground" />
+            <div>
+              <p className="font-medium text-sm">Manage API Keys</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                Use API keys for CLI authentication and external integrations
+              </p>
+            </div>
+          </div>
+          <Button size="sm" onClick={() => setIsCreateModalOpen(true)}>
+            New Key
+          </Button>
+        </div>
+
+        <ApiKeysList
+          apiKeys={apiKeys}
+          isLoading={isLoading}
+          onDelete={handleDeleteApiKey}
+        />
+      </SettingSection>
+
+      <ProjectSetupGuide
+        hasApiKeys={apiKeys.length > 0}
+        workspaceId={workspaceId || undefined}
+      />
+
+      <CreateApiKeyModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSubmit={handleCreateApiKey}
+      />
+
+      <ApiKeyConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        apiKey={newApiKey}
+        keyName={newKeyName}
+        onClose={() => {
+          setIsConfirmationModalOpen(false);
+          setNewApiKey(null);
+          setNewKeyName("");
+        }}
+      />
+    </>
+  );
+}

package/src/components/settings/InviteMemberModal.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { MembershipRole } from "@locusai/shared";
+import { useState } from "react";
+import { CreateModal } from "@/components/CreateModal";
+import { Input } from "@/components/ui";
+import { useAuthenticatedUserWithOrg } from "@/hooks";
+import { useMutationWithToast } from "@/hooks/useMutationWithToast";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { cn } from "@/lib/utils";
+
+interface InviteMemberModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function InviteMemberModal({ isOpen, onClose }: InviteMemberModalProps) {
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<MembershipRole>(MembershipRole.MEMBER);
+  const user = useAuthenticatedUserWithOrg();
+
+  const sendInvitation = useMutationWithToast({
+    mutationFn: (data: { email: string; role: MembershipRole }) =>
+      locusClient.invitations.create(user.orgId, {
+        email: data.email,
+        role: data.role,
+        orgId: user.orgId,
+      }),
+    successMessage: `Invitation sent to ${email}`,
+    invalidateKeys: [queryKeys.invitations.list(user.orgId)],
+    onSuccess: () => {
+      setEmail("");
+      setRole(MembershipRole.MEMBER);
+      onClose();
+    },
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user.orgId || !email) return;
+    sendInvitation.mutate({ email, role });
+  };
+
+  const roleDescription =
+    role === MembershipRole.ADMIN
+      ? "Admins can manage tasks, sprints, and other members."
+      : "Members can view and manage tasks and sprints.";
+
+  return (
+    <CreateModal
+      isOpen={isOpen}
+      title="Invite Team Member"
+      size="sm"
+      fields={[
+        {
+          name: "email",
+          label: "Email Address",
+          component: (
+            <Input
+              type="email"
+              placeholder="colleague@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              autoFocus
+            />
+          ),
+          required: true,
+        },
+        {
+          name: "role",
+          label: "Role",
+          component: (
+            <div className="space-y-2">
+              <div className="grid grid-cols-2 gap-2">
+                {[MembershipRole.MEMBER, MembershipRole.ADMIN].map((r) => (
+                  <button
+                    key={r}
+                    type="button"
+                    onClick={() => setRole(r)}
+                    className={cn(
+                      "px-4 py-2 rounded-xl border text-sm transition-all",
+                      role === r
+                        ? "bg-primary/10 border-primary text-primary"
+                        : "border-secondary hover:bg-secondary/50"
+                    )}
+                  >
+                    {r.charAt(0) + r.slice(1).toLowerCase()}
+                  </button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1 px-1">
+                {roleDescription}
+              </p>
+            </div>
+          ),
+        },
+      ]}
+      onSubmit={handleSubmit}
+      onClose={onClose}
+      submitText="Send Invitation"
+      isPending={sendInvitation.isPending}
+      submitDisabled={!email.trim() || !user.orgId}
+    />
+  );
+}