vforclaude2 0.3.87

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

@@ -0,0 +1,300 @@
+"use client";
+
+import { useState } from "react";
+import { Card, Button } from "@/shared/components";
+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 handleCopy = async (id) => {
+    if (!contents[id]) return;
+    await navigator.clipboard.writeText(contents[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 grid-cols-2 md:grid-cols-4 gap-4">
+      <Card className="px-4 py-3 flex flex-col gap-1">
+        <span className="text-text-muted text-sm uppercase font-semibold">Total Requests</span>
+        <span className="text-2xl font-bold">{fmt(stats.totalRequests)}</span>
+      </Card>
+      <Card className="px-4 py-3 flex flex-col gap-1">
+        <span className="text-text-muted text-sm uppercase font-semibold">Total Input Tokens</span>
+        <span className="text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
+      </Card>
+      <Card className="px-4 py-3 flex flex-col gap-1">
+        <span className="text-text-muted text-sm uppercase font-semibold">Output Tokens</span>
+        <span className="text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>
+      </Card>
+      <Card className="px-4 py-3 flex flex-col gap-1">
+        <span className="text-text-muted text-sm uppercase font-semibold">Est. Cost</span>
+        <span className="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,190 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import Card from "@/shared/components/Card";
+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 [imgError, setImgError] = 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",
+      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` }}
+          >
+            {imgError ? (
+              <span
+                className="text-sm font-bold"
+                style={{ color: providerColor }}
+              >
+                {provider?.slice(0, 2).toUpperCase() || "PR"}
+              </span>
+            ) : (
+              <Image
+                src={`/providers/${provider}.png`}
+                alt={provider || "Provider"}
+                width={40}
+                height={40}
+                className="object-contain rounded-lg"
+                sizes="40px"
+                onError={() => setImgError(true)}
+              />
+            )}
+          </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>
+  );
+}

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

@@ -0,0 +1,127 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+import { formatResetTime } from "./utils";
+
+// Calculate color based on remaining percentage
+const getColorClasses = (remainingPercentage) => {
+  if (remainingPercentage > 70) {
+    return {
+      text: "text-green-500",
+      bg: "bg-green-500",
+      bgLight: "bg-green-500/10",
+      emoji: "🟢"
+    };
+  }
+  
+  if (remainingPercentage >= 30) {
+    return {
+      text: "text-yellow-500",
+      bg: "bg-yellow-500",
+      bgLight: "bg-yellow-500/10",
+      emoji: "🟡"
+    };
+  }
+  
+  // 0-29% including 0% (out of quota) - show red
+  return {
+    text: "text-red-500",
+    bg: "bg-red-500",
+    bgLight: "bg-red-500/10",
+    emoji: "🔴"
+  };
+};
+
+// Format reset time display
+const formatResetTimeDisplay = (resetTime) => {
+  if (!resetTime) return null;
+  
+  try {
+    const resetDate = new Date(resetTime);
+    const now = new Date();
+    const isToday = resetDate.toDateString() === now.toDateString();
+    const isTomorrow = resetDate.toDateString() === new Date(now.getTime() + 86400000).toDateString();
+    
+    const timeStr = resetDate.toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true,
+    });
+    
+    if (isToday) return `Today, ${timeStr}`;
+    if (isTomorrow) return `Tomorrow, ${timeStr}`;
+    
+    return resetDate.toLocaleString(undefined, {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true,
+    });
+  } catch {
+    return null;
+  }
+};
+
+export default function QuotaProgressBar({
+  percentage = 0,
+  label = "",
+  used = 0,
+  total = 0,
+  unlimited = false,
+  resetTime = null
+}) {
+  const colors = getColorClasses(percentage);
+  const countdown = formatResetTime(resetTime);
+  const resetDisplay = formatResetTimeDisplay(resetTime);
+  
+  // percentage is already remaining percentage (from ProviderLimitCard)
+  const remaining = percentage;
+  
+  return (
+    <div className="space-y-2">
+      {/* Label and percentage */}
+      <div className="flex items-center justify-between text-sm">
+        <span className="font-semibold text-text-primary">
+          {label}
+        </span>
+        <div className="flex items-center gap-1.5">
+          <span className="text-xs">{colors.emoji}</span>
+          <span className={cn("font-medium", colors.text)}>
+            {remaining}%
+          </span>
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      {!unlimited && (
+        <div className={cn("h-2 rounded-full overflow-hidden", colors.bgLight)}>
+          <div
+            className={cn("h-full transition-all duration-300", colors.bg)}
+            style={{ width: `${Math.min(remaining, 100)}%` }}
+          />
+        </div>
+      )}
+
+      {/* Usage details and countdown */}
+      <div className="flex items-center justify-between text-xs text-text-muted">
+        <span>
+          {used.toLocaleString()} / {total.toLocaleString()} requests
+        </span>
+        {countdown !== "-" && (
+          <div className="flex items-center gap-1">
+            <span>•</span>
+            <span className="font-medium">Reset in {countdown}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Reset time display */}
+      {resetDisplay && (
+        <div className="text-xs text-text-muted/70">
+          Reset at {resetDisplay}
+        </div>
+      )}
+    </div>
+  );
+}