vforclaude2 0.3.87

package/src/app/(dashboard)/dashboard/providers/components/ModelAvailabilityBadge.js

@@ -0,0 +1,185 @@
+"use client";
+
+/**
+ * ModelAvailabilityBadge — compact inline status indicator
+ *
+ * Shows green when all models are operational, or amber/red when there are
+ * issues, with a hover popover for details and cooldown clearing.
+ */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Button } from "@/shared/components";
+import { useNotificationStore } from "@/store/notificationStore";
+
+const STATUS_CONFIG = {
+  available: { icon: "check_circle", color: "#22c55e", label: "Available" },
+  cooldown: { icon: "schedule", color: "#f59e0b", label: "Cooldown" },
+  unavailable: { icon: "error", color: "#ef4444", label: "Unavailable" },
+  unknown: { icon: "help", color: "#6b7280", label: "Unknown" },
+};
+
+export default function ModelAvailabilityBadge() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [expanded, setExpanded] = useState(false);
+  const [clearing, setClearing] = useState(null);
+  const ref = useRef(null);
+  const notify = useNotificationStore();
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await fetch("/api/models/availability");
+      if (res.ok) {
+        const json = await res.json();
+        setData(json);
+      }
+    } catch {
+      // silent fail — will retry
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+    const interval = setInterval(fetchStatus, 30000);
+    return () => clearInterval(interval);
+  }, [fetchStatus]);
+
+  // Close popover on outside click
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setExpanded(false);
+    };
+    if (expanded) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [expanded]);
+
+  const handleClearCooldown = async (provider, model) => {
+    setClearing(`${provider}:${model}`);
+    try {
+      const res = await fetch("/api/models/availability", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "clearCooldown", provider, model }),
+      });
+      if (res.ok) {
+        notify.success(`Cooldown cleared for ${model}`);
+        await fetchStatus();
+      } else {
+        notify.error("Failed to clear cooldown");
+      }
+    } catch {
+      notify.error("Failed to clear cooldown");
+    } finally {
+      setClearing(null);
+    }
+  };
+
+  if (loading) return null;
+
+  const models = data?.models || [];
+  const unavailableCount = data?.unavailableCount || models.filter((m) => m.status !== "available").length;
+  const isHealthy = unavailableCount === 0;
+
+  // Group unhealthy models by provider
+  const byProvider = {};
+  models.forEach((m) => {
+    if (m.status === "available") return;
+    const key = m.provider || "unknown";
+    if (!byProvider[key]) byProvider[key] = [];
+    byProvider[key].push(m);
+  });
+
+  return (
+    <div className="relative" ref={ref}>
+      {/* <button
+        onClick={() => setExpanded(!expanded)}
+        className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${
+          isHealthy
+            ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500 hover:bg-emerald-500/15"
+            : "bg-amber-500/10 border-amber-500/20 text-amber-500 hover:bg-amber-500/15"
+        }`}
+      >
+        <span className="material-symbols-outlined text-[14px]">
+          {isHealthy ? "verified" : "warning"}
+        </span>
+        {isHealthy
+          ? "All models operational"
+          : `${unavailableCount} model${unavailableCount !== 1 ? "s" : ""} with issues`}
+      </button> */}
+
+      {expanded && (
+        <div className="absolute top-full right-0 mt-2 w-80 bg-surface border border-border rounded-xl shadow-2xl z-50 overflow-hidden">
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border bg-bg">
+            <div className="flex items-center gap-2">
+              <span
+                className="material-symbols-outlined text-[16px]"
+                style={{ color: isHealthy ? "#22c55e" : "#f59e0b" }}
+              >
+                {isHealthy ? "verified" : "warning"}
+              </span>
+              <span className="text-sm font-semibold text-text-main">Model Status</span>
+            </div>
+            <button
+              onClick={fetchStatus}
+              className="p-1 rounded-lg hover:bg-surface text-text-muted hover:text-text-main transition-colors"
+              title="Refresh"
+            >
+              <span className="material-symbols-outlined text-[14px]">refresh</span>
+            </button>
+          </div>
+
+          <div className="px-4 py-3 max-h-60 overflow-y-auto">
+            {isHealthy ? (
+              <p className="text-sm text-text-muted text-center py-2">
+                All models are responding normally.
+              </p>
+            ) : (
+              <div className="flex flex-col gap-2.5">
+                {Object.entries(byProvider).map(([provider, provModels]) => (
+                  <div key={provider}>
+                    <p className="text-xs font-semibold text-text-main mb-1.5 capitalize">{provider}</p>
+                    <div className="flex flex-col gap-1">
+                      {provModels.map((m) => {
+                        const status = STATUS_CONFIG[m.status] || STATUS_CONFIG.unknown;
+                        const isClearing = clearing === `${m.provider}:${m.model}`;
+                        return (
+                          <div
+                            key={`${m.provider}-${m.model}`}
+                            className="flex items-center justify-between px-2.5 py-1.5 rounded-lg bg-surface/30"
+                          >
+                            <div className="flex items-center gap-1.5 min-w-0">
+                              <span
+                                className="material-symbols-outlined text-[14px] shrink-0"
+                                style={{ color: status.color }}
+                              >
+                                {status.icon}
+                              </span>
+                              <span className="font-mono text-xs text-text-main truncate">{m.model}</span>
+                            </div>
+                            {m.status === "cooldown" && (
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={() => handleClearCooldown(m.provider, m.model)}
+                                disabled={isClearing}
+                                className="text-[10px] px-1.5! py-0.5! ml-2"
+                              >
+                                {isClearing ? "..." : "Clear"}
+                              </Button>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/providers/new/page.js

@@ -0,0 +1,220 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Card, Button, Input, Select, Toggle } from "@/shared/components";
+import { AI_PROVIDERS, AUTH_METHODS } from "@/shared/constants/config";
+
+const providerOptions = Object.values(AI_PROVIDERS).map((p) => ({
+  value: p.id,
+  label: p.name,
+}));
+
+const authMethodOptions = Object.values(AUTH_METHODS).map((m) => ({
+  value: m.id,
+  label: m.name,
+}));
+
+export default function NewProviderPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    provider: "",
+    authMethod: "api_key",
+    apiKey: "",
+    displayName: "",
+    isActive: true,
+  });
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: null }));
+    }
+  };
+
+  const validate = () => {
+    const newErrors = {};
+    if (!formData.provider) newErrors.provider = "Please select a provider";
+    if (formData.authMethod === "api_key" && !formData.apiKey) {
+      newErrors.apiKey = "API Key is required";
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!validate()) return;
+
+    setLoading(true);
+    try {
+      const response = await fetch("/api/providers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        router.push("/dashboard/providers");
+      } else {
+        const data = await response.json();
+        setErrors({ submit: data.error || "Failed to create provider" });
+      }
+    } catch (error) {
+      setErrors({ submit: "An error occurred. Please try again." });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const selectedProvider = AI_PROVIDERS[formData.provider];
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      {/* Header */}
+      <div className="mb-8">
+        <Link
+          href="/dashboard/providers"
+          className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-primary transition-colors mb-4"
+        >
+          <span className="material-symbols-outlined text-lg">arrow_back</span>
+          Back to Providers
+        </Link>
+        <h1 className="text-3xl font-semibold tracking-tight">Add New Provider</h1>
+        <p className="text-text-muted mt-2">
+          Configure a new AI provider to use with your applications.
+        </p>
+      </div>
+
+      {/* Form */}
+      <Card>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+          {/* Provider Selection */}
+          <Select
+            label="Provider"
+            options={providerOptions}
+            value={formData.provider}
+            onChange={(e) => handleChange("provider", e.target.value)}
+            placeholder="Select a provider"
+            error={errors.provider}
+            required
+          />
+
+          {/* Provider Info */}
+          {selectedProvider && (
+            <Card.Section className="flex items-center gap-3">
+              <div
+                className="size-10 rounded-lg flex items-center justify-center bg-bg border border-border"
+              >
+                <span
+                  className="material-symbols-outlined text-xl"
+                  style={{ color: selectedProvider.color }}
+                >
+                  {selectedProvider.icon}
+                </span>
+              </div>
+              <div>
+                <p className="font-medium">{selectedProvider.name}</p>
+                <p className="text-sm text-text-muted">
+                  Selected provider
+                </p>
+              </div>
+            </Card.Section>
+          )}
+
+          {/* Auth Method */}
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium">
+              Authentication Method <span className="text-red-500">*</span>
+            </label>
+            <div className="flex gap-3">
+              {authMethodOptions.map((method) => (
+                <button
+                  key={method.value}
+                  type="button"
+                  onClick={() => handleChange("authMethod", method.value)}
+                  className={`flex-1 flex items-center justify-center gap-2 p-4 rounded-lg border transition-all ${
+                    formData.authMethod === method.value
+                      ? "border-primary bg-primary/5 text-primary"
+                      : "border-border hover:border-primary/50"
+                  }`}
+                >
+                  <span className="material-symbols-outlined">
+                    {method.value === "api_key" ? "key" : "lock"}
+                  </span>
+                  <span className="font-medium">{method.label}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* API Key Input */}
+          {formData.authMethod === "api_key" && (
+            <Input
+              label="API Key"
+              type="password"
+              placeholder="Enter your API key"
+              value={formData.apiKey}
+              onChange={(e) => handleChange("apiKey", e.target.value)}
+              error={errors.apiKey}
+              hint="Your API key will be encrypted and stored securely."
+              required
+            />
+          )}
+
+          {/* OAuth2 Button */}
+          {formData.authMethod === "oauth2" && (
+            <Card.Section>
+              <p className="text-sm text-text-muted mb-4">
+                Connect your account using OAuth2 authentication.
+              </p>
+              <Button type="button" variant="secondary" icon="link">
+                Connect with OAuth2
+              </Button>
+            </Card.Section>
+          )}
+
+          {/* Display Name */}
+          <Input
+            label="Display Name"
+            placeholder="e.g., Production API, Dev Environment"
+            value={formData.displayName}
+            onChange={(e) => handleChange("displayName", e.target.value)}
+            hint="Optional. A friendly name to identify this configuration."
+          />
+
+          {/* Active Toggle */}
+          <Toggle
+            checked={formData.isActive}
+            onChange={(checked) => handleChange("isActive", checked)}
+            label="Active"
+            description="Enable this provider for use in your applications"
+          />
+
+          {/* Error Message */}
+          {errors.submit && (
+            <div className="p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 text-sm">
+              {errors.submit}
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-4 border-t border-border">
+            <Link href="/dashboard/providers" className="flex-1">
+              <Button type="button" variant="ghost" fullWidth>
+                Cancel
+              </Button>
+            </Link>
+            <Button type="submit" loading={loading} fullWidth className="flex-1">
+              Create Provider
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+}
+