zevairouter 1.0.0

package/src/app/(dashboard)/dashboard/quota/page.js

@@ -0,0 +1,11 @@
+import { Suspense } from "react";
+import { CardSkeleton } from "@/shared/components/Loading";
+import ProviderLimits from "../usage/components/ProviderLimits";
+
+export default function QuotaPage() {
+  return (
+    <Suspense fallback={<CardSkeleton />}>
+      <ProviderLimits />
+    </Suspense>
+  );
+}

package/src/app/(dashboard)/dashboard/skills/page.js

@@ -0,0 +1,112 @@
+"use client";
+
+import { Card, Badge } from "@/shared/components";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import {
+  SKILLS,
+  SKILLS_REPO_URL,
+  getSkillRawUrl,
+  getSkillBlobUrl,
+} from "@/shared/constants/skills";
+
+function CopyButton({ value, label = "Copy link" }) {
+  const { copied, copy } = useCopyToClipboard(2000);
+  return (
+    <button
+      onClick={() => copy(value)}
+      className="px-2 py-1 rounded-md bg-primary text-white text-[11px] font-medium hover:bg-primary/90 transition-colors cursor-pointer shrink-0 inline-flex items-center gap-1"
+      title={value}
+    >
+      <span className="material-symbols-outlined text-[12px]">
+        {copied ? "check" : "content_copy"}
+      </span>
+      {copied ? "Copied!" : label}
+    </button>
+  );
+}
+
+function SkillRow({ skill }) {
+  const url = getSkillRawUrl(skill.id);
+  return (
+    <div
+      className={`flex items-start gap-3 p-4 rounded-[14px] border shadow-[var(--shadow-soft)] transition-colors ${
+        skill.isEntry
+          ? "border-brand-500/40 bg-brand-500/5"
+          : "border-border-subtle bg-surface hover:bg-surface-2"
+      }`}
+    >
+      <div
+        className={`size-9 rounded-lg flex items-center justify-center shrink-0 ${
+          skill.isEntry ? "bg-primary text-white" : "bg-primary/10 text-primary"
+        }`}
+      >
+        <span className="material-symbols-outlined text-[18px]">{skill.icon}</span>
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2 flex-wrap">
+          <h3 className="font-semibold text-sm text-text-main">{skill.name}</h3>
+          {skill.isEntry && (
+            <Badge variant="primary" size="sm">START HERE</Badge>
+          )}
+          {skill.endpoint && (
+            <Badge variant="default" size="sm">
+              <code className="text-[10px]">{skill.endpoint}</code>
+            </Badge>
+          )}
+        </div>
+        <p className="text-xs text-text-muted mt-0.5">{skill.description}</p>
+        <a
+          href={getSkillBlobUrl(skill.id)}
+          target="_blank"
+          rel="noreferrer"
+          className="text-[11px] text-text-muted hover:text-primary mt-1 inline-flex items-center gap-1 break-all"
+        >
+          {url}
+          <span className="material-symbols-outlined text-[12px]">open_in_new</span>
+        </a>
+      </div>
+
+      <CopyButton value={url} />
+    </div>
+  );
+}
+
+export default function SkillsPage() {
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      <Card padding="md">
+        <div className="text-xs text-text-muted mb-2">Paste this to your AI:</div>
+        <div className="px-3 py-2 rounded bg-surface-2 font-mono text-[12px] text-text-main">
+          Read this skill and use it: {getSkillRawUrl("9router")}
+        </div>
+      </Card>
+
+      <div className="space-y-2">
+        {SKILLS.map((skill) => (
+          <SkillRow key={skill.id} skill={skill} />
+        ))}
+      </div>
+
+      <Card padding="md">
+        <div className="flex items-center justify-between gap-3 flex-wrap">
+          <div>
+            <h2 className="text-sm font-semibold text-text-main">More on GitHub</h2>
+            <p className="text-xs text-text-muted mt-0.5">
+              Browse source, README, and examples.
+            </p>
+          </div>
+          <a
+            href={`${SKILLS_REPO_URL}/tree/master/skills`}
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm text-primary hover:underline inline-flex items-center gap-1"
+          >
+            <span className="material-symbols-outlined text-[16px]">open_in_new</span>
+            View on GitHub
+          </a>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/translator/page.js

@@ -0,0 +1,303 @@
+"use client";
+
+import { useState } from "react";
+import { Card, Button } from "@/shared/components";
+import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
+import dynamic from "next/dynamic";
+
+const Editor = dynamic(() => import("@monaco-editor/react"), { ssr: false });
+
+// 7 steps matching requestLogger files exactly
+const STEPS = [
+  { id: 1, label: "Client Request",         file: "1_req_client.json",  lang: "json", desc: "Raw request from client" },
+  { id: 2, label: "Source Body",            file: "2_req_source.json",  lang: "json", desc: "After initial conversion" },
+  { id: 3, label: "OpenAI Intermediate",    file: "3_req_openai.json",  lang: "json", desc: "source → openai" },
+  { id: 4, label: "Target Request",         file: "4_req_target.json",  lang: "json", desc: "openai → target + URL + headers" },
+  { id: 5, label: "Provider Response",      file: "5_res_provider.txt", lang: "text", desc: "Raw SSE from provider" },
+  { id: 6, label: "OpenAI Response",        file: "6_res_openai.txt",   lang: "text", desc: "target → openai (response)" },
+  { id: 7, label: "Client Response",        file: "7_res_client.txt",   lang: "text", desc: "Final response to client" },
+];
+
+const EDITOR_OPTIONS = {
+  minimap: { enabled: false },
+  fontSize: 12,
+  lineNumbers: "on",
+  scrollBeyondLastLine: false,
+  wordWrap: "on",
+  automaticLayout: true,
+};
+
+export default function TranslatorPage() {
+  const [contents, setContents] = useState({});
+  const [expanded, setExpanded] = useState({ 1: true });
+  const [loading, setLoading] = useState({});
+  // Detected from step 1: { provider, model, sourceFormat, targetFormat }
+  const [meta, setMeta] = useState(null);
+
+  const setLoad = (key, val) => setLoading(prev => ({ ...prev, [key]: val }));
+  const setContent = (id, val) => setContents(prev => ({ ...prev, [id]: val }));
+  const toggle = (id) => setExpanded(prev => ({ ...prev, [id]: !prev[id] }));
+
+  const openNext = (nextId) => setExpanded(prev => {
+    const next = {};
+    STEPS.forEach(s => { next[s.id] = false; });
+    next[nextId] = true;
+    return next;
+  });
+
+  // Load file from logs/translator/
+  const handleLoad = async (stepId) => {
+    const step = STEPS.find(s => s.id === stepId);
+    setLoad(`load-${stepId}`, true);
+    try {
+      const res = await fetch(`/api/translator/load?file=${step.file}`);
+      const data = await res.json();
+      if (data.success) {
+        setContent(stepId, data.content);
+        if (stepId === 1) await detectMeta(data.content);
+      } else {
+        alert(data.error || "File not found");
+      }
+    } catch (e) {
+      alert(e.message);
+    }
+    setLoad(`load-${stepId}`, false);
+  };
+
+  // Step 1: detect provider/format from model field
+  const detectMeta = async (rawContent) => {
+    try {
+      const body = typeof rawContent === "string" ? JSON.parse(rawContent) : rawContent;
+      const res = await fetch("/api/translator/translate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ step: 1, body })
+      });
+      const data = await res.json();
+      if (data.success) setMeta(data.result);
+    } catch { /* ignore */ }
+  };
+
+  const save = (file, content) => fetch("/api/translator/save", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ file, content })
+  }).catch(() => {});
+
+  // Step 1 → Step 3: source → OpenAI intermediate
+  const handleToOpenAI = async () => {
+    setLoad("toOpenAI", true);
+    try {
+      const raw = contents[1];
+      const body = JSON.parse(raw);
+      // Save input: 1_req_client.json + 2_req_source.json (body only)
+      save("1_req_client.json", raw);
+      save("2_req_source.json", JSON.stringify({ timestamp: new Date().toISOString(), headers: {}, body: body.body || body }, null, 2));
+
+      const res = await fetch("/api/translator/translate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ step: 2, body })
+      });
+      const data = await res.json();
+      if (!data.success) { alert(data.error); return; }
+      const str = JSON.stringify(data.result.body, null, 2);
+      setContent(3, str);
+      openNext(3);
+    } catch (e) { alert(e.message); }
+    setLoad("toOpenAI", false);
+  };
+
+  // Step 3 → Step 4: OpenAI → target + build URL/headers
+  const handleToTarget = async () => {
+    setLoad("toTarget", true);
+    try {
+      const raw = contents[3];
+      const openaiBody = JSON.parse(raw);
+      // Save input: 3_req_openai.json
+      save("3_req_openai.json", raw);
+
+      const res = await fetch("/api/translator/translate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ step: 3, body: { ...openaiBody, provider: meta?.provider, model: meta?.model } })
+      });
+      const data = await res.json();
+      if (!data.success) { alert(data.error); return; }
+      // Embed provider + model so Send works even without meta
+      const step4Content = { ...data.result, provider: meta?.provider, model: meta?.model };
+      setContent(4, JSON.stringify(step4Content, null, 2));
+      openNext(4);
+    } catch (e) { alert(e.message); }
+    setLoad("toTarget", false);
+  };
+
+  // Step 4 → Step 5: send to provider via executor
+  const handleSend = async () => {
+    setLoad("send", true);
+    try {
+      const raw = contents[4];
+      const step4 = JSON.parse(raw);
+      // Save input: 4_req_target.json
+      save("4_req_target.json", raw);
+
+      // Read provider/model from step4 content (embedded during build), fallback to meta
+      const provider = step4.provider || meta?.provider;
+      const model = step4.model || meta?.model;
+
+      if (!provider || !model) {
+        alert("Missing provider or model. Please run step 1 first to detect them.");
+        return;
+      }
+
+      const res = await fetch("/api/translator/send", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider, model, body: step4.body || step4 })
+      });
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: res.statusText }));
+        alert(err.error || "Send failed");
+        return;
+      }
+
+      // Accumulate streaming response
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let full = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        full += decoder.decode(value, { stream: true });
+      }
+
+      setContent(5, full);
+      openNext(5);
+
+      // Save to logs/translator/5_res_provider.txt
+      await fetch("/api/translator/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ file: "5_res_provider.txt", content: full })
+      });
+    } catch (e) {
+      alert(e.message);
+    } finally {
+      setLoad("send", false);
+    }
+  };
+
+  const { copy } = useCopyToClipboard();
+
+  const handleCopy = async (id) => {
+    if (!contents[id]) return;
+    copy(contents[id], `translator-step-${id}`);
+  };
+
+  const handleFormat = (id) => {
+    try {
+      const obj = JSON.parse(contents[id]);
+      setContent(id, JSON.stringify(obj, null, 2));
+    } catch { /* not JSON, skip */ }
+  };
+
+  // Render action button per step
+  const getAction = (stepId) => {
+    if (stepId === 1) return <Button size="sm" icon="arrow_forward" loading={loading["toOpenAI"]} onClick={handleToOpenAI}>→ OpenAI</Button>;
+    if (stepId === 3) return <Button size="sm" icon="arrow_forward" loading={loading["toTarget"]} onClick={handleToTarget}>→ Target</Button>;
+    if (stepId === 4) return <Button size="sm" icon="send" loading={loading["send"]} onClick={handleSend}>Send</Button>;
+    return null;
+  };
+
+  return (
+    <div className="p-8 space-y-3">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-2">
+        <div>
+          <h1 className="text-2xl font-bold text-text-main">Translator Debug</h1>
+          <p className="text-sm text-text-muted mt-1">Replay request flow — matches log files</p>
+        </div>
+        {meta && (
+          <div className="flex items-center gap-2 flex-wrap justify-end">
+            <MetaBadge label="src" value={meta.sourceFormat} color="blue" />
+            <span className="material-symbols-outlined text-text-muted text-[14px]">arrow_forward</span>
+            <MetaBadge label="dst" value={meta.targetFormat} color="orange" />
+            <MetaBadge label="provider" value={meta.provider} color="green" />
+            <MetaBadge label="model" value={meta.model} color="purple" />
+          </div>
+        )}
+      </div>
+
+      {STEPS.map((step) => {
+        const action = getAction(step.id);
+        const isExpanded = !!expanded[step.id];
+        const content = contents[step.id] || "";
+
+        return (
+          <Card key={step.id}>
+            <div className="p-4 space-y-3">
+              {/* Step header */}
+              <div className="flex items-center justify-between">
+                <button onClick={() => toggle(step.id)} className="flex items-center gap-2 flex-1 text-left group">
+                  <span className="material-symbols-outlined text-[20px] text-text-muted group-hover:text-primary transition-colors">
+                    {isExpanded ? "expand_more" : "chevron_right"}
+                  </span>
+                  <span className="text-xs font-mono text-text-muted/60 w-4">{step.id}</span>
+                  <h3 className="text-sm font-semibold text-text-main">{step.label}</h3>
+                  <span className="text-xs text-text-muted/60 font-mono">{step.file}</span>
+                  {content && <span className="text-xs text-green-500">({content.length} chars)</span>}
+                </button>
+                {!isExpanded && (
+                  <div className="flex gap-1 shrink-0">
+                    <Button size="sm" variant="ghost" icon="folder_open" loading={loading[`load-${step.id}`]} onClick={() => handleLoad(step.id)} />
+                    {action}
+                  </div>
+                )}
+              </div>
+
+              {/* Expanded content */}
+              {isExpanded && (
+                <>
+                  <div className="border border-border rounded-lg overflow-hidden">
+                    <Editor
+                      height="400px"
+                      defaultLanguage={step.lang === "text" ? "plaintext" : "json"}
+                      value={content}
+                      onChange={(v) => {
+                        setContent(step.id, v || "");
+                        if (step.id === 1) detectMeta(v || "");
+                      }}
+                      theme="vs-dark"
+                      options={EDITOR_OPTIONS}
+                    />
+                  </div>
+                  <div className="flex gap-2 flex-wrap">
+                    <Button size="sm" variant="outline" icon="folder_open" loading={loading[`load-${step.id}`]} onClick={() => handleLoad(step.id)}>Load</Button>
+                    <Button size="sm" variant="outline" icon="data_object" onClick={() => handleFormat(step.id)}>Format</Button>
+                    <Button size="sm" variant="outline" icon="content_copy" onClick={() => handleCopy(step.id)}>Copy</Button>
+                    {action}
+                  </div>
+                </>
+              )}
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
+
+function MetaBadge({ label, value, color }) {
+  const colors = {
+    blue: "bg-blue-500/10 text-blue-500",
+    orange: "bg-orange-500/10 text-orange-500",
+    green: "bg-green-500/10 text-green-500",
+    purple: "bg-purple-500/10 text-purple-500",
+  };
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono ${colors[color]}`}>
+      <span className="text-text-muted/70 font-sans text-[10px]">{label}:</span>{value}
+    </span>
+  );
+}

package/src/app/(dashboard)/dashboard/usage/components/OverviewCards.js

@@ -0,0 +1,35 @@
+"use client";
+
+import PropTypes from "prop-types";
+import Card from "@/shared/components/Card";
+
+const fmt = (n) => new Intl.NumberFormat().format(n || 0);
+const fmtCost = (n) => `$${(n || 0).toFixed(2)}`;
+
+export default function OverviewCards({ stats }) {
+  return (
+    <div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-4 sm:gap-4">
+      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
+        <span className="text-text-muted text-sm uppercase font-semibold">Total Requests</span>
+        <span className="truncate text-2xl font-bold">{fmt(stats.totalRequests)}</span>
+      </Card>
+      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
+        <span className="text-text-muted text-sm uppercase font-semibold">Total Input Tokens</span>
+        <span className="truncate text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
+      </Card>
+      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
+        <span className="text-text-muted text-sm uppercase font-semibold">Output Tokens</span>
+        <span className="truncate text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>
+      </Card>
+      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
+        <span className="text-text-muted text-sm uppercase font-semibold">Est. Cost</span>
+        <span className="truncate text-2xl font-bold text-warning">~{fmtCost(stats.totalCost)}</span>
+        <span className="text-[10px] text-text-muted">Estimated, not actual billing</span>
+      </Card>
+    </div>
+  );
+}
+
+OverviewCards.propTypes = {
+  stats: PropTypes.object.isRequired,
+};

package/src/app/(dashboard)/dashboard/usage/components/ProviderLimits/ProviderLimitCard.js

@@ -0,0 +1,185 @@
+"use client";
+
+import { useState } from "react";
+import Card from "@/shared/components/Card";
+import ProviderIcon from "@/shared/components/ProviderIcon";
+import Badge from "@/shared/components/Badge";
+import QuotaProgressBar from "./QuotaProgressBar";
+import { calculatePercentage } from "./utils";
+
+const planVariants = {
+  free: "default",
+  pro: "primary",
+  ultra: "success",
+  enterprise: "info",
+};
+
+export default function ProviderLimitCard({
+  provider,
+  name,
+  plan,
+  quotas = [],
+  message = null,
+  loading = false,
+  error = null,
+  onRefresh,
+}) {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    if (!onRefresh || refreshing) return;
+
+    setRefreshing(true);
+    try {
+      await onRefresh();
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  // Get provider info from config
+  const getProviderColor = () => {
+    const colors = {
+      github: "#000000",
+      antigravity: "#4285F4",
+      codex: "#10A37F",
+      kiro: "#FF9900",
+      qoder: "#EC4899",
+      claude: "#D97757",
+    };
+    return colors[provider?.toLowerCase()] || "#6B7280";
+  };
+
+  const providerColor = getProviderColor();
+  const planVariant = planVariants[plan?.toLowerCase()] || "default";
+
+  return (
+    <Card padding="md" className="flex flex-col gap-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {/* Provider Logo */}
+          <div
+            className="size-10 rounded-lg flex items-center justify-center p-1.5"
+            style={{ backgroundColor: `${providerColor}15` }}
+          >
+            <ProviderIcon
+              src={`/providers/${provider}.png`}
+              alt={provider || "Provider"}
+              size={40}
+              className="object-contain rounded-lg"
+              fallbackText={provider?.slice(0, 2).toUpperCase() || "PR"}
+              fallbackColor={providerColor}
+            />
+          </div>
+
+          <div>
+            <h3 className="font-semibold text-text-primary">
+              {name || provider}
+            </h3>
+            {plan && (
+              <Badge
+                variant={planVariants[plan?.toLowerCase()] || "default"}
+                size="xs"
+              >
+                {plan}
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {/* Refresh Button */}
+        <button
+          onClick={handleRefresh}
+          disabled={refreshing || loading}
+          className="p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          title="Refresh quota"
+        >
+          <span
+            className={`material-symbols-outlined text-[20px] text-text-muted ${
+              refreshing || loading ? "animate-spin" : ""
+            }`}
+          >
+            refresh
+          </span>
+        </button>
+      </div>
+
+      {/* Loading State */}
+      {loading && (
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <div className="h-4 bg-black/5 dark:bg-white/5 rounded animate-pulse" />
+            <div className="h-2 bg-black/5 dark:bg-white/5 rounded animate-pulse" />
+          </div>
+          <div className="space-y-2">
+            <div className="h-4 bg-black/5 dark:bg-white/5 rounded animate-pulse" />
+            <div className="h-2 bg-black/5 dark:bg-white/5 rounded animate-pulse" />
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {!loading && error && (
+        <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+          <div className="flex items-start gap-2">
+            <span className="material-symbols-outlined text-red-500 text-[20px]">
+              error
+            </span>
+            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Info Message (for providers without API) */}
+      {!loading && !error && message && (
+        <div className="p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+          <div className="flex items-start gap-2">
+            <span className="material-symbols-outlined text-blue-500 text-[20px]">
+              info
+            </span>
+            <p className="text-sm text-blue-600 dark:text-blue-400">
+              {message}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Quota Progress Bars */}
+      {!loading && !error && !message && quotas?.length > 0 && (
+        <div className="space-y-4">
+          {quotas.map((quota, index) => {
+            // For Antigravity, use remainingPercentage if available, otherwise calculate
+            const percentage =
+              quota.remainingPercentage !== undefined
+                ? Math.round(((quota.total - quota.used) / quota.total) * 100)
+                : calculatePercentage(quota.used, quota.total);
+            const unlimited = quota.total === 0 || quota.total === null;
+
+            return (
+              <QuotaProgressBar
+                key={`${quota.name}-${index}`}
+                label={quota.name}
+                used={quota.used}
+                total={quota.total}
+                percentage={percentage}
+                unlimited={unlimited}
+                resetTime={quota.resetAt}
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!loading && !error && !message && quotas?.length === 0 && (
+        <div className="text-center py-8 text-text-muted">
+          <span className="material-symbols-outlined text-[48px] opacity-20">
+            data_usage
+          </span>
+          <p className="text-sm mt-2">No quota data available</p>
+        </div>
+      )}
+    </Card>
+  );
+}