@nexttylabs/echo 0.2.0

package/components/api/rate-limit-info.tsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { AlertTriangle } from 'lucide-react';
+
+interface RateLimitInfo {
+  limit: number;
+  remaining: number;
+  resetAt: string;
+}
+
+function formatDuration(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+  return `${Math.floor(seconds / 3600)}h ${Math.floor((seconds % 3600) / 60)}m`;
+}
+
+interface RateLimitInfoProps {
+  rateLimitData?: RateLimitInfo | null;
+}
+
+export function RateLimitInfoDisplay({ rateLimitData }: RateLimitInfoProps) {
+  const [resetIn, setResetIn] = useState(0);
+
+  useEffect(() => {
+    if (!rateLimitData?.resetAt) return;
+
+    const updateResetIn = () => {
+      const resetDate = new Date(rateLimitData.resetAt);
+      setResetIn(Math.max(0, Math.floor((resetDate.getTime() - Date.now()) / 1000)));
+    };
+
+    updateResetIn();
+    const interval = setInterval(updateResetIn, 1000);
+
+    return () => clearInterval(interval);
+  }, [rateLimitData?.resetAt]);
+
+  if (!rateLimitData) return null;
+
+  const percentUsed =
+    ((rateLimitData.limit - rateLimitData.remaining) / rateLimitData.limit) *
+    100;
+  const isLow = percentUsed > 80;
+
+  return (
+    <Alert variant={isLow ? 'destructive' : 'default'}>
+      <AlertTriangle className="h-4 w-4" />
+      <AlertDescription>
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <span className="font-medium">API Rate Limit:</span>{' '}
+            {rateLimitData.remaining} / {rateLimitData.limit} requests remaining
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant={isLow ? 'destructive' : 'secondary'}>
+              {Math.round(percentUsed)}% used
+            </Badge>
+            <span className="text-xs text-muted-foreground">
+              Resets in {formatDuration(resetIn)}
+            </span>
+          </div>
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}

package/components/api-keys/api-key-manager.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Plus, Trash2, Eye, EyeOff, Copy, Check, Key } from "lucide-react";
+
+interface ApiKey {
+  keyId: number;
+  name: string;
+  displayKey: string;
+  prefix: string;
+  disabled: boolean;
+  lastUsed: string | null;
+  createdAt: string;
+}
+
+export function ApiKeyManager() {
+  const t = useTranslations("apiKeys");
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
+  const [newKeyName, setNewKeyName] = useState("");
+  const [createdKey, setCreatedKey] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    loadKeys();
+  }, []);
+
+  async function loadKeys() {
+    setIsLoading(true);
+    try {
+      const response = await fetch("/api/api-keys");
+      if (response.ok) {
+        const data = await response.json();
+        setKeys(data.data || []);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function createKey() {
+    if (!newKeyName.trim()) return;
+    setIsCreating(true);
+    try {
+      const response = await fetch("/api/api-keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: newKeyName }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setCreatedKey(data.data.key);
+        setNewKeyName("");
+        await loadKeys();
+      }
+    } finally {
+      setIsCreating(false);
+    }
+  }
+
+  async function deleteKey(keyId: number) {
+    if (!confirm(t("deleteConfirm"))) return;
+
+    try {
+      const response = await fetch(`/api/api-keys/${keyId}`, {
+        method: "DELETE",
+      });
+
+      if (response.ok) {
+        await loadKeys();
+      }
+    } catch {
+      // Error handling
+    }
+  }
+
+  async function toggleKey(keyId: number, disabled: boolean) {
+    try {
+      const response = await fetch(`/api/api-keys/${keyId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ disabled }),
+      });
+
+      if (response.ok) {
+        await loadKeys();
+      }
+    } catch {
+      // Error handling
+    }
+  }
+
+  async function copyKey() {
+    if (createdKey) {
+      await navigator.clipboard.writeText(createdKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <AlertDialog open={!!createdKey} onOpenChange={() => setCreatedKey(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("dialog.title")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("dialog.description")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <div className="space-y-4">
+            <div className="p-4 bg-muted rounded-lg font-mono text-sm break-all">
+              {createdKey}
+            </div>
+
+            <Button onClick={copyKey} className="w-full">
+              {copied ? <Check className="mr-2 h-4 w-4" /> : <Copy className="mr-2 h-4 w-4" />}
+              {copied ? t("dialog.copied") : t("dialog.copy")}
+            </Button>
+          </div>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("dialog.close")}</AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Key className="h-5 w-5" />
+            {t("create.title")}
+          </CardTitle>
+          <CardDescription>
+            {t("create.description")}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex gap-4 items-end">
+            <div className="flex-1">
+              <Input
+                placeholder={t("create.placeholder")}
+                value={newKeyName}
+                onChange={(e) => setNewKeyName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && newKeyName.trim()) {
+                    createKey();
+                  }
+                }}
+              />
+            </div>
+
+            <Button
+              onClick={createKey}
+              disabled={!newKeyName.trim() || isCreating}
+            >
+              {isCreating ? (
+                t("create.creating")
+              ) : (
+                <>
+                  <Plus className="mr-2 h-4 w-4" /> {t("create.button")}
+                </>
+              )}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {isLoading ? (
+        <div className="text-center py-8 text-muted-foreground">{t("loading")}</div>
+      ) : keys.length === 0 ? (
+        <Card>
+          <CardContent className="py-8 text-center text-muted-foreground">
+            {t("empty")}
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {keys.map((key) => (
+            <Card key={key.keyId}>
+              <CardContent className="py-4">
+                <div className="flex items-center justify-between">
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-medium">{key.name}</h3>
+                      <Badge variant={key.disabled ? "destructive" : "default"}>
+                        {key.disabled ? t("status.disabled") : t("status.active")}
+                      </Badge>
+                    </div>
+                    <div className="text-sm text-muted-foreground font-mono">
+                      {key.displayKey}
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {t("createdAt")}: {new Date(key.createdAt).toLocaleDateString()}
+                      {key.lastUsed && (
+                        <> · {t("lastUsed")}: {new Date(key.lastUsed).toLocaleDateString()}</>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => toggleKey(key.keyId, !key.disabled)}
+                      title={key.disabled ? t("actions.enable") : t("actions.disable")}
+                    >
+                      {key.disabled ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      onClick={() => deleteKey(key.keyId)}
+                      title={t("actions.delete")}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/auth/login-form.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+
+// Clear corrupted better-auth cookies that may cause Base64 parsing errors
+function clearBetterAuthCookies() {
+  const cookies = document.cookie.split(";");
+  for (const cookie of cookies) {
+    const [name] = cookie.split("=");
+    const trimmedName = name.trim();
+    if (trimmedName.startsWith("better-auth") || trimmedName.includes("session")) {
+      document.cookie = `${trimmedName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+    }
+  }
+}
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { loginSchema, type LoginInput } from "@/lib/validations/auth";
+
+export function LoginForm() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [formData, setFormData] = useState<LoginInput>({
+    email: "",
+    password: "",
+    rememberMe: false,
+  });
+  const t = useTranslations("auth.login");
+
+  // Clear potentially corrupted cookies on mount
+  useEffect(() => {
+    clearBetterAuthCookies();
+    // Also clear on server side
+    fetch("/api/auth/clear-session", { method: "POST" }).catch(() => {});
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type, checked } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+    setErrors((prev) => ({ ...prev, [name]: "" }));
+    setFormError(null);
+  };
+
+  const validateForm = () => {
+    const result = loginSchema.safeParse(formData);
+    if (result.success) {
+      setErrors({});
+      return true;
+    }
+    const nextErrors: Record<string, string> = {};
+    for (const issue of result.error.issues) {
+      const key = issue.path?.[0];
+      if (typeof key === "string") {
+        nextErrors[key] = issue.message;
+      }
+    }
+    setErrors(nextErrors);
+    return false;
+  };
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setFormError(null);
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/sign-in/email", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: formData.email,
+          password: formData.password,
+          rememberMe: formData.rememberMe,
+        }),
+      });
+
+      await res.json();
+
+      if (!res.ok) {
+        throw new Error(t("invalidCredentials"));
+      }
+
+      router.push("/dashboard");
+    } catch {
+      setFormError(t("invalidCredentials"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("cardTitle")}</CardTitle>
+        <CardDescription>{t("cardDescription")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {formError ? (
+            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {formError}
+            </div>
+          ) : null}
+
+          <div className="space-y-2">
+            <Label htmlFor="email">{t("emailLabel")}</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              placeholder="you@example.com"
+              value={formData.email}
+              onChange={handleChange}
+              disabled={isLoading}
+              className={errors.email ? "border-destructive" : ""}
+            />
+            {errors.email ? (
+              <p className="text-sm text-destructive">{errors.email}</p>
+            ) : null}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">{t("passwordLabel")}</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              value={formData.password}
+              onChange={handleChange}
+              disabled={isLoading}
+              className={errors.password ? "border-destructive" : ""}
+            />
+            {errors.password ? (
+              <p className="text-sm text-destructive">{errors.password}</p>
+            ) : null}
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <input
+                id="rememberMe"
+                name="rememberMe"
+                type="checkbox"
+                checked={formData.rememberMe}
+                onChange={(event) =>
+                  setFormData((prev) => ({ ...prev, rememberMe: event.target.checked }))
+                }
+                disabled={isLoading}
+                className="h-4 w-4 rounded border-input text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              />
+              <Label htmlFor="rememberMe" className="text-sm font-normal">
+                {t("rememberMe")}
+              </Label>
+            </div>
+            <Link className="text-sm text-primary hover:underline" href="/forgot-password">
+              {t("forgotPassword")}
+            </Link>
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? t("submitting") : t("submitButton")}
+          </Button>
+
+          <p className="text-center text-sm text-muted-foreground">
+            {t("noAccount")}
+            <Link className="ml-1 text-primary hover:underline" href="/register">
+              {t("register")}
+            </Link>
+          </p>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}