@raingor/pi-web-switch 0.2.0

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,116 @@
+import { NavLink } from "react-router-dom";
+import {
+  LayoutDashboard,
+  Box,
+  Plug,
+  Settings,
+  Pi,
+  History,
+  Brain,
+  Globe,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTranslation, LANGUAGES } from "@/lib/i18n";
+import { useState } from "react";
+
+const navItems = [
+  { to: "/", icon: LayoutDashboard, key: "nav.dashboard" },
+  { to: "/models", icon: Box, key: "nav.models" },
+  { to: "/providers", icon: Plug, key: "nav.providers" },
+  { to: "/sessions", icon: History, key: "nav.sessions" },
+  { to: "/memory", icon: Brain, key: "nav.memory" },
+  { to: "/settings", icon: Settings, key: "nav.settings" },
+];
+
+export function Sidebar() {
+  const { t, lang, setLang } = useTranslation();
+  const [langOpen, setLangOpen] = useState(false);
+
+  return (
+    <aside
+      className="flex h-screen w-64 flex-col border-r"
+      style={{
+        backgroundColor: "var(--sidebar-bg)",
+        borderColor: "var(--sidebar-border)",
+      }}
+    >
+      {/* Logo */}
+      <div
+        className="flex items-center gap-3 border-b px-6 py-5"
+        style={{ borderColor: "var(--sidebar-border)" }}
+      >
+        <div className="flex h-9 w-9 items-center justify-center rounded-lg"
+          style={{ backgroundColor: "#3b82f6" }}>
+          <Pi className="h-5 w-5" style={{ color: "#ffffff" }} />
+        </div>
+        <div>
+          <h1 className="text-base font-semibold" style={{ color: "var(--page-text)" }}>pi-switch</h1>
+          <p className="text-xs" style={{ color: "var(--subtle-text)" }}>{t("app.subtitle")}</p>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 px-3 py-4">
+        {navItems.map(({ to, icon: Icon, key }) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={to === "/"}
+            className={({ isActive }) =>
+              cn(
+                "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+              )
+            }
+            style={({ isActive }) => ({
+              backgroundColor: isActive ? "var(--sidebar-active-bg)" : "transparent",
+              color: isActive ? "var(--sidebar-active-text)" : "var(--sidebar-text)",
+            })}
+          >
+            <Icon className="h-4 w-4" />
+            {t(key)}
+          </NavLink>
+        ))}
+      </nav>
+
+      {/* Language Switcher */}
+      <div className="border-t px-3 py-3" style={{ borderColor: "var(--sidebar-border)" }}>
+        <button
+          onClick={() => setLangOpen(!langOpen)}
+          className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+          style={{ color: "var(--sidebar-text)" }}
+        >
+          <Globe className="h-4 w-4" />
+          <span className="flex-1 text-left">{LANGUAGES.find((l) => l.code === lang)?.nativeLabel || "English"}</span>
+        </button>
+        {langOpen && (
+          <div className="mt-1 space-y-0.5 px-1">
+            {LANGUAGES.map((l) => (
+              <button
+                key={l.code}
+                onClick={() => { setLang(l.code); setLangOpen(false); }}
+                className={cn(
+                  "flex w-full items-center gap-3 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors",
+                  lang === l.code ? "bg-blue-600/10 text-blue-400" : ""
+                )}
+                style={{
+                  color: lang === l.code ? "var(--sidebar-active-text)" : "var(--sidebar-text)",
+                  backgroundColor: lang === l.code ? "var(--sidebar-active-bg)" : "transparent",
+                }}
+              >
+                {l.nativeLabel}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Version */}
+      <div
+        className="border-t px-6 py-3"
+        style={{ borderColor: "var(--sidebar-border)" }}
+      >
+        <p className="text-xs" style={{ color: "var(--subtle-text)" }}>{t("app.version")}</p>
+      </div>
+    </aside>
+  );
+}

package/src/components/models/ModelsPage.tsx

@@ -0,0 +1,570 @@
+import { useState } from "react";
+import { useConfigStore } from "@/store/config-store";
+import { useTranslation } from "@/lib/i18n";
+import { Badge } from "@/components/ui/Badge";
+import { Modal } from "@/components/ui/Modal";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { formatTokens, formatCost, cn } from "@/lib/utils";
+import type { Model } from "@/types";
+import {
+  Search,
+  Plus,
+  Box,
+  Trash2,
+  Edit3,
+  CheckCircle2,
+  XCircle,
+  Brain,
+  Image,
+  Text,
+  Cpu,
+} from "lucide-react";
+
+function ModelIcon({ model }: { model: Model }) {
+  const inputs = model.input ?? ["text"];
+  return (
+    <div className="flex gap-1">
+      {inputs.includes("image") ? (
+        <Image className="h-3.5 w-3.5 text-purple-400" />
+      ) : (
+        <Text className="h-3.5 w-3.5 text-blue-400" />
+      )}
+      {model.reasoning && <Brain className="h-3.5 w-3.5 text-amber-400" />}
+    </div>
+  );
+}
+
+export function ModelsPage() {
+  const { t } = useTranslation();
+  const { allModels, allProviders, settings, updateModel, removeModel, toggleModel, addModel } =
+    useConfigStore();
+
+  const [search, setSearch] = useState("");
+  const [providerFilter, setProviderFilter] = useState("all");
+  const [editModel, setEditModel] = useState<(Model & { providerId: string; providerName: string }) | null>(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+
+  const availableProviders = allProviders.filter(
+    (p) => p.models.length > 0
+  );
+
+  const filtered = allModels.filter((m) => {
+    if (search && !m.id.toLowerCase().includes(search.toLowerCase()) && !m.name?.toLowerCase().includes(search.toLowerCase()))
+      return false;
+    if (providerFilter !== "all" && m.providerId !== providerFilter) return false;
+    return true;
+  });
+
+  const isEnabled = (providerId: string, modelId: string) => {
+    return settings?.enabledModels?.includes(`${providerId}/${modelId}`) ?? false;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold" style={{ color: "var(--page-text)" }}>{t("models.title")}</h1>
+          <p className="mt-1 text-sm" style={{ color: "var(--muted-text)" }}>
+            {t("models.title")} — {availableProviders.length} providers
+          </p>
+        </div>
+        <button
+          onClick={() => setShowAddForm(true)}
+          className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+          style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}
+        >
+          <Plus className="h-4 w-4" />
+          {t("models.add_model")}
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1 max-w-md">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
+          <input
+            type="text"
+            placeholder={t("models.search_placeholder")}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full rounded-lg border border-gray-700 bg-gray-900 py-2 pl-10 pr-4 text-sm text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none"
+          />
+        </div>
+        <select
+          value={providerFilter}
+          onChange={(e) => setProviderFilter(e.target.value)}
+          className="rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-gray-300 focus:border-blue-500 focus:outline-none"
+        >
+          <option value="all">{t("models.filter_all")}</option>
+          {availableProviders.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Model List */}
+      {filtered.length === 0 ? (
+        <EmptyState
+          icon={<Box className="h-12 w-12" />}
+          title={t("models.no_models")}
+          description={search ? "Try a different search term" : "Add your first model to get started"}
+          action={
+            <button
+              onClick={() => setShowAddForm(true)}
+              className="rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+              style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}
+            >
+              {t("models.add_model")}
+            </button>
+          }
+        />
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {filtered.map((m) => (
+            <div
+              key={`${m.providerId}/${m.id}`}
+              className={cn(
+                "rounded-xl border p-4 transition-all",
+                isEnabled(m.providerId, m.id)
+                  ? "border-gray-700 bg-gray-900/70"
+                  : "border-gray-800/50 bg-gray-900/30 opacity-60"
+              )}
+            >
+              <div className="flex items-start justify-between">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="truncate text-sm font-semibold text-white">{m.name || m.id}</h3>
+                    <ModelIcon model={m} />
+                  </div>
+                  <p className="mt-0.5 truncate text-xs text-gray-500">
+                    {m.providerName} · {m.id}
+                  </p>
+                </div>
+                <button
+                  onClick={() => toggleModel(m.providerId, m.id)}
+                  className={cn(
+                    "rounded-lg p-1.5 transition-colors",
+                    isEnabled(m.providerId, m.id)
+                      ? "text-emerald-400 hover:bg-emerald-500/10"
+                      : "text-gray-600 hover:bg-gray-800"
+                  )}
+                >
+                  {isEnabled(m.providerId, m.id) ? (
+                    <CheckCircle2 className="h-4 w-4" />
+                  ) : (
+                    <XCircle className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+
+              {/* Stats */}
+              <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-gray-400">
+                <div>
+                  <span className="text-gray-600">Context:</span>{" "}
+                  {formatTokens(m.contextWindow ?? 128000)}
+                </div>
+                <div>
+                  <span className="text-gray-600">Max tokens:</span>{" "}
+                  {formatTokens(m.maxTokens ?? 16384)}
+                </div>
+                <div>
+                  <span className="text-gray-600">Input:</span>{" "}
+                  {formatCost(m.cost?.input ?? 0)}/M
+                </div>
+                <div>
+                  <span className="text-gray-600">Output:</span>{" "}
+                  {formatCost(m.cost?.output ?? 0)}/M
+                </div>
+              </div>
+
+              {/* Actions */}
+              <div className="mt-3 flex items-center gap-2 border-t border-gray-800 pt-3">
+                <button
+                  onClick={() => setEditModel(m)}
+                  className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-gray-400 hover:bg-gray-800 hover:text-gray-200"
+                >
+                  <Edit3 className="h-3 w-3" />
+                  {t("models.edit_model")}
+                </button>
+                <button
+                  onClick={() => removeModel(m.providerId, m.id)}
+                  className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-gray-400 hover:bg-red-500/10 hover:text-red-400"
+                >
+                  <Trash2 className="h-3 w-3" />
+                  {t("models.delete_model")}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Edit Model Modal */}
+      <Modal
+        open={!!editModel}
+        onClose={() => setEditModel(null)}
+        title={`${t("models.edit_model")}: ${editModel?.name || editModel?.id}`}
+        size="lg"
+      >
+        {editModel && (
+          <ModelForm
+            initial={editModel}
+            onSubmit={(updates) => {
+              updateModel(editModel.providerId, editModel.id, updates);
+              setEditModel(null);
+            }}
+            onCancel={() => setEditModel(null)}
+          />
+        )}
+      </Modal>
+
+      {/* {t("models.add_model")} Modal */}
+      <Modal
+        open={showAddForm}
+        onClose={() => setShowAddForm(false)}
+        title={t("models.add_model")}
+        size="lg"
+      >
+        <AddModelForm
+          providers={allProviders}
+          onSubmit={(providerId, model) => {
+            addModel(providerId, model);
+            setShowAddForm(false);
+          }}
+          onCancel={() => setShowAddForm(false)}
+        />
+      </Modal>
+    </div>
+  );
+}
+
+// ─── Model Form ───────────────────────────────────────────
+
+interface ModelFormProps {
+  initial: Model;
+  onSubmit: (updates: Partial<Model>) => void;
+  onCancel: () => void;
+}
+
+function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
+  const { t } = useTranslation();
+  const [form, setForm] = useState<Partial<Model>>({ ...initial });
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-400">Model ID</label>
+          <input
+            type="text"
+            value={form.id ?? ""}
+            onChange={(e) => setForm({ ...form, id: e.target.value })}
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-400">Display Name</label>
+          <input
+            type="text"
+            value={form.name ?? ""}
+            onChange={(e) => setForm({ ...form, name: e.target.value })}
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-400">Context Window</label>
+          <input
+            type="number"
+            value={form.contextWindow ?? 128000}
+            onChange={(e) => setForm({ ...form, contextWindow: parseInt(e.target.value) || 128000 })}
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-400">Max Output Tokens</label>
+          <input
+            type="number"
+            value={form.maxTokens ?? 16384}
+            onChange={(e) => setForm({ ...form, maxTokens: parseInt(e.target.value) || 16384 })}
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+        </div>
+      </div>
+
+      {/* Capabilities */}
+      <div>
+        <label className="block text-xs font-medium text-gray-400 mb-2">Capabilities</label>
+        <div className="flex flex-wrap gap-3">
+          <label className="flex items-center gap-2 text-sm text-gray-300">
+            <input
+              type="checkbox"
+              checked={form.reasoning ?? false}
+              onChange={(e) => setForm({ ...form, reasoning: e.target.checked })}
+              className="rounded border-gray-600 bg-gray-800 text-blue-500"
+            />
+            Extended Thinking
+          </label>
+          <label className="flex items-center gap-2 text-sm text-gray-300">
+            <input
+              type="checkbox"
+              checked={form.input?.includes("image") ?? false}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  input: e.target.checked ? ["text", "image"] : ["text"],
+                })
+              }
+              className="rounded border-gray-600 bg-gray-800 text-blue-500"
+            />
+            Image Input
+          </label>
+        </div>
+      </div>
+
+      {/* Cost */}
+      <div>
+        <label className="block text-xs font-medium text-gray-400 mb-2">Cost ($/M tokens)</label>
+        <div className="grid grid-cols-4 gap-3">
+          <div>
+            <label className="block text-xs text-gray-500">Input</label>
+            <input
+              type="number"
+              step="0.01"
+              value={form.cost?.input ?? 0}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  cost: { ...form.cost!, input: parseFloat(e.target.value) || 0 },
+                })
+              }
+              className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500">Output</label>
+            <input
+              type="number"
+              step="0.01"
+              value={form.cost?.output ?? 0}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  cost: { ...form.cost!, output: parseFloat(e.target.value) || 0 },
+                })
+              }
+              className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500">Cache Read</label>
+            <input
+              type="number"
+              step="0.01"
+              value={form.cost?.cacheRead ?? 0}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  cost: { ...form.cost!, cacheRead: parseFloat(e.target.value) || 0 },
+                })
+              }
+              className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500">Cache Write</label>
+            <input
+              type="number"
+              step="0.01"
+              value={form.cost?.cacheWrite ?? 0}
+              onChange={(e) =>
+                setForm({
+                  ...form,
+                  cost: { ...form.cost!, cacheWrite: parseFloat(e.target.value) || 0 },
+                })
+              }
+              className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex justify-end gap-3 pt-2">
+        <button onClick={onCancel} className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800">
+          Cancel
+        </button>
+        <button
+          onClick={() => onSubmit(form)}
+          className="rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+          style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}
+        >
+          {t("models.save")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Add Model Form ───────────────────────────────────────
+
+interface AddModelFormProps {
+  providers: { id: string; name: string }[];
+  onSubmit: (providerId: string, model: Model) => void;
+  onCancel: () => void;
+}
+
+function AddModelForm({ providers, onSubmit, onCancel }: AddModelFormProps) {
+  const { t } = useTranslation();
+  const { allModels } = useConfigStore();
+  const [providerId, setProviderId] = useState(providers[0]?.id ?? "");
+  const [form, setForm] = useState<Partial<Model>>({
+    id: "",
+    name: "",
+    reasoning: false,
+    input: ["text"],
+    contextWindow: 128000,
+    maxTokens: 16384,
+    cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+  });
+
+  const handleSubmit = () => {
+    if (!form.id || !providerId) return;
+    onSubmit(providerId, form as Model);
+  };
+
+  // Get models for the selected provider
+  const providerModels = allModels.filter((m) => m.providerId === providerId);
+  const modelOptions = [...new Set(providerModels.map((m) => m.id))];
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-xs font-medium text-gray-400">Provider</label>
+        <select
+          value={providerId}
+          onChange={(e) => { setProviderId(e.target.value); setForm({ ...form, id: "" }); }}
+          className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+        >
+          {providers.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-xs font-medium text-gray-400">Model ID *</label>
+          <input
+            type="text"
+            list="model-list"
+            value={form.id ?? ""}
+            onChange={(e) => setForm({ ...form, id: e.target.value })}
+            placeholder={modelOptions.length > 0 ? "Select or type model ID..." : "Enter model ID..."}
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+          <datalist id="model-list">
+            {modelOptions.length > 0 ? (
+              modelOptions.map((mid) => (
+                <option key={mid} value={mid} />
+              ))
+            ) : (
+              <option value="" disabled>No models available for this provider</option>
+            )}
+          </datalist>
+          {modelOptions.length === 0 && (
+            <p className="text-xs mt-1 text-gray-500">No existing models for this provider. Type a new model ID manually.</p>
+          )}
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-400">Display Name</label>
+          <input
+            type="text"
+            value={form.name ?? ""}
+            onChange={(e) => setForm({ ...form, name: e.target.value })}
+            placeholder="My Custom Model"
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+        </div>
+      </div>
+
+      {/* Capabilities */}
+      <div className="flex flex-wrap gap-3">
+        <label className="flex items-center gap-2 text-sm text-gray-300">
+          <input
+            type="checkbox"
+            checked={form.reasoning ?? false}
+            onChange={(e) => setForm({ ...form, reasoning: e.target.checked })}
+            className="rounded border-gray-600 bg-gray-800 text-blue-500"
+          />
+          Extended Thinking
+        </label>
+        <label className="flex items-center gap-2 text-sm text-gray-300">
+          <input
+            type="checkbox"
+            checked={form.input?.includes("image") ?? false}
+            onChange={(e) =>
+              setForm({
+                ...form,
+                input: e.target.checked ? ["text", "image"] : ["text"],
+              })
+            }
+            className="rounded border-gray-600 bg-gray-800 text-blue-500"
+          />
+          Image Input
+        </label>
+      </div>
+
+      <div className="grid grid-cols-4 gap-3">
+        <div>
+          <label className="block text-xs text-gray-500">Input $/M</label>
+          <input
+            type="number"
+            step="0.01"
+            value={form.cost?.input ?? 0}
+            onChange={(e) =>
+              setForm({ ...form, cost: { ...form.cost!, input: parseFloat(e.target.value) || 0 } })
+            }
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+          />
+        </div>
+        <div>
+          <label className="block text-xs text-gray-500">Output $/M</label>
+          <input type="number" step="0.01" value={form.cost?.output ?? 0}
+            onChange={(e) =>
+              setForm({ ...form, cost: { ...form.cost!, output: parseFloat(e.target.value) || 0 } })
+            }
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white" />
+        </div>
+        <div>
+          <label className="block text-xs text-gray-500">Context Window</label>
+          <input type="number" value={form.contextWindow ?? 128000}
+            onChange={(e) => setForm({ ...form, contextWindow: parseInt(e.target.value) || 128000 })}
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white" />
+        </div>
+        <div>
+          <label className="block text-xs text-gray-500">Max Tokens</label>
+          <input type="number" value={form.maxTokens ?? 16384}
+            onChange={(e) => setForm({ ...form, maxTokens: parseInt(e.target.value) || 16384 })}
+            className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white" />
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-3 pt-2">
+        <button onClick={onCancel} className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800">
+          Cancel
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={!form.id}
+          className="rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50"
+          style={{ backgroundColor: "#3b82f6", color: "#ffffff" }}
+        >
+          {t("models.add_model")}
+        </button>
+      </div>
+    </div>
+  );
+}