Add YouTube transcripts tab to Mission Control

app/amun/page.tsx

@@ -0,0 +1,440 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Card from "@/components/ui/Card";
+
+const today = () => new Date().toISOString().split("T")[0];
+
+type Severity = "low" | "medium" | "high" | "critical";
+type BugStatus = "open" | "closed";
+
+interface Bug {
+  description: string;
+  severity: Severity;
+  status: BugStatus;
+}
+
+interface FormState {
+  date: string;
+  testsRun: string[];
+  bugsFound: Bug[];
+  codeQualityScore: number;
+  recommendations: string[];
+}
+
+const defaultForm: FormState = {
+  date: today(),
+  testsRun: [""],
+  bugsFound: [],
+  codeQualityScore: 0,
+  recommendations: [""],
+};
+
+const severityColors: Record<Severity, string> = {
+  low: "text-emerald-400 bg-emerald-500/10 border-emerald-500/30",
+  medium: "text-amber-400 bg-amber-500/10 border-amber-500/30",
+  high: "text-orange-400 bg-orange-500/10 border-orange-500/30",
+  critical: "text-red-400 bg-red-500/10 border-red-500/30",
+};
+
+export default function AmunPage() {
+  const [form, setForm] = useState<FormState>(defaultForm);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [loadingDate, setLoadingDate] = useState(false);
+  const [history, setHistory] = useState<FormState[]>([]);
+
+  const loadSessionForDate = useCallback(async (date: string) => {
+    setLoadingDate(true);
+    try {
+      const res = await fetch(`/api/amun?date=${date}`);
+      const data = await res.json();
+      if (data) {
+        setForm({
+          date: data.date,
+          testsRun: typeof data.testsRun === "string" ? JSON.parse(data.testsRun) : (data.testsRun || [""]),
+          bugsFound: typeof data.bugsFound === "string" ? JSON.parse(data.bugsFound) : (data.bugsFound || []),
+          codeQualityScore: data.codeQualityScore || 0,
+          recommendations: typeof data.recommendations === "string" ? JSON.parse(data.recommendations) : (data.recommendations || [""]),
+        });
+      } else {
+        setForm({ ...defaultForm, date });
+      }
+    } catch {
+      setForm({ ...defaultForm, date });
+    } finally {
+      setLoadingDate(false);
+    }
+  }, []);
+
+  const loadHistory = useCallback(async () => {
+    try {
+      const res = await fetch("/api/amun?limit=10");
+      const data = await res.json();
+      if (Array.isArray(data)) {
+        setHistory(
+          data.map((s) => ({
+            date: s.date,
+            testsRun: typeof s.testsRun === "string" ? JSON.parse(s.testsRun) : (s.testsRun || []),
+            bugsFound: typeof s.bugsFound === "string" ? JSON.parse(s.bugsFound) : (s.bugsFound || []),
+            codeQualityScore: s.codeQualityScore || 0,
+            recommendations: typeof s.recommendations === "string" ? JSON.parse(s.recommendations) : (s.recommendations || []),
+          }))
+        );
+      }
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  useEffect(() => {
+    loadSessionForDate(today());
+    loadHistory();
+  }, [loadSessionForDate, loadHistory]);
+
+  const validate = (): boolean => {
+    const errs: Record<string, string> = {};
+    if (form.codeQualityScore < 0 || form.codeQualityScore > 100) {
+      errs.codeQualityScore = "Score must be between 0 and 100";
+    }
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  };
+
+  const handleSave = async () => {
+    if (!validate()) return;
+    setSaving(true);
+    try {
+      const res = await fetch("/api/amun", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        setErrors({ submit: err.error || "Failed to save" });
+      } else {
+        setSaved(true);
+        setTimeout(() => setSaved(false), 3000);
+        loadHistory();
+      }
+    } catch {
+      setErrors({ submit: "Network error. Please try again." });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const updateArrayItem = (field: "testsRun" | "recommendations", index: number, value: string) => {
+    setForm((prev) => {
+      const arr = [...prev[field]];
+      arr[index] = value;
+      return { ...prev, [field]: arr };
+    });
+  };
+
+  const addArrayItem = (field: "testsRun" | "recommendations") => {
+    setForm((prev) => ({ ...prev, [field]: [...prev[field], ""] }));
+  };
+
+  const removeArrayItem = (field: "testsRun" | "recommendations", index: number) => {
+    setForm((prev) => ({ ...prev, [field]: prev[field].filter((_, i) => i !== index) }));
+  };
+
+  const addBug = () => {
+    setForm((prev) => ({
+      ...prev,
+      bugsFound: [...prev.bugsFound, { description: "", severity: "medium", status: "open" }],
+    }));
+  };
+
+  const updateBug = (index: number, field: keyof Bug, value: string) => {
+    setForm((prev) => {
+      const bugs = [...prev.bugsFound];
+      bugs[index] = { ...bugs[index], [field]: value as never };
+      return { ...prev, bugsFound: bugs };
+    });
+  };
+
+  const removeBug = (index: number) => {
+    setForm((prev) => ({ ...prev, bugsFound: prev.bugsFound.filter((_, i) => i !== index) }));
+  };
+
+  const scoreColor = (score: number) => {
+    if (score >= 80) return "text-emerald-400";
+    if (score >= 60) return "text-amber-400";
+    if (score >= 40) return "text-orange-400";
+    return "text-red-400";
+  };
+
+  const scoreBarColor = (score: number) => {
+    if (score >= 80) return "bg-emerald-500";
+    if (score >= 60) return "bg-amber-500";
+    if (score >= 40) return "bg-orange-500";
+    return "bg-red-500";
+  };
+
+  const openBugs = form.bugsFound.filter((b) => b.status === "open");
+  const closedBugs = form.bugsFound.filter((b) => b.status === "closed");
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-xl font-bold text-white flex items-center gap-2">
+            <span className="text-purple-400">⚙️</span> Amun Dev Agent
+          </h1>
+          <p className="text-sm text-slate-500 mt-0.5">Development testing & code quality dashboard</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <input
+            type="date"
+            value={form.date}
+            onChange={(e) => {
+              setForm((prev) => ({ ...prev, date: e.target.value }));
+              loadSessionForDate(e.target.value);
+            }}
+            className="bg-[#1a1d27] border border-[#2a2d3a] rounded-lg px-3 py-2 text-sm text-slate-300 focus:outline-none focus:border-purple-500/50"
+          />
+          <button
+            onClick={handleSave}
+            disabled={saving || loadingDate}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-semibold text-sm rounded-lg transition-colors"
+          >
+            {saving ? "Saving…" : saved ? "✓ Saved" : "Save Session"}
+          </button>
+        </div>
+      </div>
+
+      {errors.submit && (
+        <div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
+          {errors.submit}
+        </div>
+      )}
+
+      {/* Stats Row */}
+      <div className="grid grid-cols-3 gap-4 mb-5">
+        <div className="bg-[#13151f] border border-[#1e2130] rounded-xl p-4">
+          <p className="text-xs text-slate-500 mb-1">Tests Run</p>
+          <p className="text-2xl font-bold text-white">{form.testsRun.filter((t) => t.trim()).length}</p>
+        </div>
+        <div className="bg-[#13151f] border border-[#1e2130] rounded-xl p-4">
+          <p className="text-xs text-slate-500 mb-1">Open Bugs</p>
+          <p className={`text-2xl font-bold ${openBugs.length > 0 ? "text-red-400" : "text-emerald-400"}`}>
+            {openBugs.length}
+          </p>
+        </div>
+        <div className="bg-[#13151f] border border-[#1e2130] rounded-xl p-4">
+          <p className="text-xs text-slate-500 mb-1">Code Quality</p>
+          <p className={`text-2xl font-bold ${scoreColor(form.codeQualityScore)}`}>
+            {form.codeQualityScore}%
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-5">
+        {/* Code Quality Score */}
+        <Card title="📊 Code Quality Score" accent="purple">
+          {errors.codeQualityScore && (
+            <p className="text-xs text-red-400 mb-2">{errors.codeQualityScore}</p>
+          )}
+          <div className="flex items-center gap-4">
+            <input
+              type="range"
+              min="0"
+              max="100"
+              value={form.codeQualityScore}
+              onChange={(e) => setForm((p) => ({ ...p, codeQualityScore: parseInt(e.target.value) }))}
+              className="flex-1 accent-purple-500"
+            />
+            <div className="flex items-center gap-2">
+              <input
+                type="number"
+                min="0"
+                max="100"
+                value={form.codeQualityScore}
+                onChange={(e) =>
+                  setForm((p) => ({
+                    ...p,
+                    codeQualityScore: Math.min(100, Math.max(0, parseInt(e.target.value) || 0)),
+                  }))
+                }
+                className="w-16 bg-[#0f1117] border border-[#2a2d3a] rounded-lg px-2 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-purple-500/50 text-center"
+              />
+              <span className="text-sm text-slate-500">%</span>
+            </div>
+          </div>
+          <div className="mt-3 h-2 bg-[#0f1117] rounded-full overflow-hidden border border-[#2a2d3a]">
+            <div
+              className={`h-full rounded-full transition-all duration-300 ${scoreBarColor(form.codeQualityScore)}`}
+              style={{ width: `${form.codeQualityScore}%` }}
+            />
+          </div>
+        </Card>
+
+        {/* Tests Run */}
+        <Card title="🧪 Tests Run" accent="blue">
+          <div className="space-y-2">
+            {form.testsRun.map((t, i) => (
+              <div key={i} className="flex gap-2">
+                <span className="text-xs text-blue-500/70 font-mono mt-2.5 w-4">▸</span>
+                <input
+                  type="text"
+                  value={t}
+                  onChange={(e) => updateArrayItem("testsRun", i, e.target.value)}
+                  placeholder={`Test ${i + 1} (e.g. unit:auth, e2e:checkout)`}
+                  className="flex-1 bg-[#0f1117] border border-[#2a2d3a] rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500/50 font-mono"
+                />
+                {form.testsRun.length > 1 && (
+                  <button
+                    onClick={() => removeArrayItem("testsRun", i)}
+                    className="text-slate-600 hover:text-red-400 transition-colors text-lg leading-none mt-1"
+                  >
+                    ×
+                  </button>
+                )}
+              </div>
+            ))}
+            <button
+              onClick={() => addArrayItem("testsRun")}
+              className="text-xs text-blue-400 hover:text-blue-300 transition-colors mt-1"
+            >
+              + Add test
+            </button>
+          </div>
+        </Card>
+
+        {/* Bugs Found */}
+        <Card title="🐛 Bugs Found" subtitle={`${openBugs.length} open · ${closedBugs.length} closed`} accent="red">
+          <div className="space-y-3">
+            {form.bugsFound.length === 0 && (
+              <p className="text-sm text-slate-600 italic">No bugs logged yet.</p>
+            )}
+            {form.bugsFound.map((bug, i) => (
+              <div key={i} className="p-3 bg-[#0f1117] rounded-lg border border-[#2a2d3a]">
+                <div className="flex gap-2 mb-2">
+                  <input
+                    type="text"
+                    value={bug.description}
+                    onChange={(e) => updateBug(i, "description", e.target.value)}
+                    placeholder="Bug description"
+                    className="flex-1 bg-[#13151f] border border-[#2a2d3a] rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-red-500/50"
+                  />
+                  <button
+                    onClick={() => removeBug(i)}
+                    className="text-slate-600 hover:text-red-400 transition-colors text-lg leading-none px-1"
+                  >
+                    ×
+                  </button>
+                </div>
+                <div className="flex gap-2">
+                  <select
+                    value={bug.severity}
+                    onChange={(e) => updateBug(i, "severity", e.target.value)}
+                    className={`flex-1 bg-[#13151f] border rounded-lg px-3 py-1.5 text-xs focus:outline-none ${severityColors[bug.severity]}`}
+                  >
+                    <option value="low">Low</option>
+                    <option value="medium">Medium</option>
+                    <option value="high">High</option>
+                    <option value="critical">Critical</option>
+                  </select>
+                  <button
+                    onClick={() => updateBug(i, "status", bug.status === "open" ? "closed" : "open")}
+                    className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
+                      bug.status === "open"
+                        ? "bg-red-500/10 border-red-500/30 text-red-400 hover:bg-red-500/20"
+                        : "bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20"
+                    }`}
+                  >
+                    {bug.status === "open" ? "● Open" : "✓ Closed"}
+                  </button>
+                </div>
+              </div>
+            ))}
+            <button
+              onClick={addBug}
+              className="text-xs text-red-400 hover:text-red-300 transition-colors mt-1"
+            >
+              + Log bug
+            </button>
+          </div>
+        </Card>
+
+        {/* Recommendations */}
+        <Card title="💡 Recommendations" accent="amber">
+          <div className="space-y-2">
+            {form.recommendations.map((r, i) => (
+              <div key={i} className="flex gap-2">
+                <span className="text-xs text-amber-500/70 font-mono mt-2.5 w-4">→</span>
+                <input
+                  type="text"
+                  value={r}
+                  onChange={(e) => updateArrayItem("recommendations", i, e.target.value)}
+                  placeholder={`Recommendation ${i + 1}`}
+                  className="flex-1 bg-[#0f1117] border border-[#2a2d3a] rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-amber-500/50"
+                />
+                {form.recommendations.length > 1 && (
+                  <button
+                    onClick={() => removeArrayItem("recommendations", i)}
+                    className="text-slate-600 hover:text-red-400 transition-colors text-lg leading-none mt-1"
+                  >
+                    ×
+                  </button>
+                )}
+              </div>
+            ))}
+            <button
+              onClick={() => addArrayItem("recommendations")}
+              className="text-xs text-amber-400 hover:text-amber-300 transition-colors mt-1"
+            >
+              + Add recommendation
+            </button>
+          </div>
+        </Card>
+
+        {/* Session History */}
+        {history.length > 0 && (
+          <Card title="📅 Recent Sessions" subtitle="Last 10 Amun sessions">
+            <div className="space-y-2">
+              {history.map((s) => (
+                <button
+                  key={s.date}
+                  onClick={() => loadSessionForDate(s.date)}
+                  className="w-full flex items-center justify-between p-3 bg-[#0f1117] rounded-lg border border-[#2a2d3a] hover:border-purple-500/30 transition-colors text-left"
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="text-xs text-slate-500 font-mono">{s.date}</span>
+                    <span className="text-xs text-slate-400">
+                      {s.testsRun.filter((t) => t.trim()).length} tests
+                    </span>
+                    {s.bugsFound.filter((b) => b.status === "open").length > 0 && (
+                      <span className="text-xs text-red-400">
+                        {s.bugsFound.filter((b) => b.status === "open").length} open bugs
+                      </span>
+                    )}
+                  </div>
+                  <span className={`text-sm font-bold ${scoreColor(s.codeQualityScore)}`}>
+                    {s.codeQualityScore}%
+                  </span>
+                </button>
+              ))}
+            </div>
+          </Card>
+        )}
+
+        {/* Save Button */}
+        <div className="flex justify-end pb-6">
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-6 py-2.5 bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-semibold text-sm rounded-lg transition-colors"
+          >
+            {saving ? "Saving…" : saved ? "✓ Session Saved!" : "Save Amun Session"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}