@opencoreai/opencore 0.2.2

package/opencore dashboard/app.js

@@ -0,0 +1,923 @@
+(function () {
+  const e = React.createElement;
+  const { useEffect, useMemo, useState } = React;
+
+  const PAGES = [
+    { id: "chat", label: "Mission Chat", eyebrow: "Control", blurb: "Live conversation with OpenCore and real-time task flow." },
+    { id: "credentials", label: "Credentials", eyebrow: "Identity Access", blurb: "Store website logins, default email settings, and email-activation policy locally." },
+    { id: "telegram", label: "Telegram", eyebrow: "Remote Control", blurb: "Connect Telegram, update bot settings, and monitor link status." },
+    { id: "skills", label: "Skills", eyebrow: "Capability", blurb: "Installed and available OpenCore skills." },
+    { id: "soul", label: "soul.md", eyebrow: "Identity", blurb: "Core identity, posture, and persona memory." },
+    { id: "memory", label: "memory.md", eyebrow: "Recall", blurb: "Durable machine facts, lessons, and task history." },
+    { id: "heartbeat", label: "heartbeat.md", eyebrow: "Execution", blurb: "Current plan plus scheduled-task tracking." },
+    { id: "guidelines", label: "guidelines.md", eyebrow: "Guardrails", blurb: "Persistent safety and permission boundaries." },
+    { id: "instructions", label: "instructions.md", eyebrow: "Operating Mode", blurb: "Workflow preferences and execution style." },
+    { id: "screenshots", label: "Screenshots", eyebrow: "Evidence", blurb: "Local screenshot archive captured during tasks." },
+  ];
+
+  function fmtTs(ts) {
+    try {
+      return new Date(ts).toLocaleString();
+    } catch {
+      return ts || "";
+    }
+  }
+
+  function StatCard({ label, value, tone }) {
+    return e("div", { className: `stat-card ${tone || ""}`.trim() }, [
+      e("div", { className: "stat-label", key: "l" }, label),
+      e("div", { className: "stat-value", key: "v" }, value),
+    ]);
+  }
+
+  function App() {
+    const initialTheme =
+      (() => {
+        try {
+          return localStorage.getItem("opencore-theme") || "light";
+        } catch {
+          return "light";
+        }
+      })();
+    const [page, setPage] = useState("chat");
+    const [status, setStatus] = useState("Connecting...");
+    const [chat, setChat] = useState([]);
+    const [chatText, setChatText] = useState("");
+    const [chatBusy, setChatBusy] = useState(false);
+    const [fileContent, setFileContent] = useState("");
+    const [fileBusy, setFileBusy] = useState(false);
+    const [shots, setShots] = useState([]);
+    const [skills, setSkills] = useState([]);
+    const [skillBusy, setSkillBusy] = useState({});
+    const [expandedSkills, setExpandedSkills] = useState({});
+    const [drawerOpen, setDrawerOpen] = useState(true);
+    const [liveEvent, setLiveEvent] = useState("Waiting for activity");
+    const [theme, setTheme] = useState(initialTheme === "dark" ? "dark" : "light");
+    const [telegramConfig, setTelegramConfig] = useState({
+      enabled: false,
+      chat_id: "",
+      user_id: "",
+      bot_token: "",
+      pairing_code: "",
+      paired: false,
+      has_bot_token: false,
+      has_pairing_code: false,
+      last_update_id: 0,
+    });
+    const [telegramBusy, setTelegramBusy] = useState(false);
+    const [credentialDefaults, setCredentialDefaults] = useState({
+      default_email: "",
+      default_email_provider: "",
+      auto_email_activation_enabled: false,
+    });
+    const [credentialEntries, setCredentialEntries] = useState([]);
+    const [credentialForm, setCredentialForm] = useState({
+      id: "",
+      website: "",
+      email: "",
+      password: "",
+      email_provider: "",
+      notes: "",
+    });
+    const [credentialsBusy, setCredentialsBusy] = useState(false);
+
+    async function loadChat() {
+      const res = await fetch("/api/chat");
+      const json = await res.json();
+      setChat(json.messages || []);
+    }
+
+    async function loadFile(name) {
+      const res = await fetch(`/api/files/${name}`);
+      const json = await res.json();
+      setFileContent(json.content || "");
+    }
+
+    async function loadShots() {
+      const res = await fetch("/api/screenshots");
+      const json = await res.json();
+      setShots(json.items || []);
+    }
+
+    async function loadSkills() {
+      const res = await fetch("/api/skills");
+      const json = await res.json();
+      setSkills(json.items || []);
+    }
+
+    async function loadTelegram() {
+      const res = await fetch("/api/telegram");
+      const json = await res.json();
+      setTelegramConfig({
+        enabled: Boolean(json.enabled),
+        chat_id: json.chat_id || "",
+        user_id: json.user_id || "",
+        bot_token: "",
+        pairing_code: "",
+        paired: Boolean(json.paired),
+        has_bot_token: Boolean(json.has_bot_token),
+        has_pairing_code: Boolean(json.has_pairing_code),
+        last_update_id: Number(json.last_update_id || 0),
+      });
+    }
+
+    async function loadCredentials() {
+      const res = await fetch("/api/credentials");
+      const json = await res.json();
+      setCredentialDefaults({
+        default_email: json.default_email || "",
+        default_email_provider: json.default_email_provider || "",
+        auto_email_activation_enabled: Boolean(json.auto_email_activation_enabled),
+      });
+      setCredentialEntries(Array.isArray(json.entries) ? json.entries : []);
+    }
+
+    useEffect(() => {
+      try {
+        document.documentElement.setAttribute("data-theme", theme);
+        localStorage.setItem("opencore-theme", theme);
+      } catch {}
+    }, [theme]);
+
+    useEffect(() => {
+      Promise.all([loadChat(), loadShots(), loadSkills(), loadTelegram(), loadCredentials()])
+        .then(() => setStatus("Online"))
+        .catch(() => setStatus("Connection issue"));
+
+      const proto = location.protocol === "https:" ? "wss" : "ws";
+      const ws = new WebSocket(`${proto}://${location.host}/ws`);
+      ws.onmessage = (ev) => {
+        try {
+          const packet = JSON.parse(ev.data);
+          if (packet.type === "chat_message" && packet.payload) {
+            setChat((prev) => [...prev, packet.payload].slice(-1000));
+          }
+          if (packet.type === "event" && packet.payload) {
+            const evt = packet.payload;
+            if (evt.type === "screenshot") {
+              setLiveEvent(`Screenshot captured · step ${evt.step || "?"}`);
+              loadShots();
+            } else if (evt.type === "task_started") {
+              setLiveEvent("Task running");
+            } else if (evt.type === "task_completed") {
+              setLiveEvent("Task completed");
+            } else if (evt.type === "task_failed") {
+              setLiveEvent("Task failed");
+            } else if (evt.type === "file_updated") {
+              setLiveEvent(`Updated ${String(evt.target || "").split("/").pop() || "file"}`);
+            } else if (evt.type === "action") {
+              setLiveEvent(`Action · ${evt.action || "working"}`);
+            }
+          }
+          if (packet.type === "skill_installed") {
+            setLiveEvent(`Installed skill · ${packet.payload?.id || "unknown"}`);
+            loadSkills();
+          }
+          if (packet.type === "telegram_config_updated" && packet.payload) {
+            setTelegramConfig({
+              enabled: Boolean(packet.payload.enabled),
+              chat_id: packet.payload.chat_id || "",
+              user_id: packet.payload.user_id || "",
+              bot_token: "",
+              pairing_code: "",
+              paired: Boolean(packet.payload.paired),
+              has_bot_token: Boolean(packet.payload.has_bot_token),
+              has_pairing_code: Boolean(packet.payload.has_pairing_code),
+              last_update_id: Number(packet.payload.last_update_id || 0),
+            });
+            setLiveEvent("Telegram config updated");
+          }
+          if (packet.type === "credentials_updated" && packet.payload) {
+            setCredentialDefaults({
+              default_email: packet.payload.default_email || "",
+              default_email_provider: packet.payload.default_email_provider || "",
+              auto_email_activation_enabled: Boolean(packet.payload.auto_email_activation_enabled),
+            });
+            setCredentialEntries(Array.isArray(packet.payload.entries) ? packet.payload.entries : []);
+            setLiveEvent("Credentials updated");
+          }
+        } catch {}
+      };
+      ws.onopen = () => setStatus("Online");
+      ws.onclose = () => setStatus("Offline");
+      return () => ws.close();
+    }, []);
+
+    useEffect(() => {
+      if (["soul", "memory", "guidelines", "instructions", "heartbeat"].includes(page)) {
+        loadFile(page);
+      }
+      if (page === "screenshots") {
+        loadShots();
+      }
+      if (page === "skills") {
+        loadSkills();
+      }
+      if (page === "credentials") {
+        loadCredentials();
+      }
+      if (page === "telegram") {
+        loadTelegram();
+      }
+    }, [page]);
+
+    async function sendChat() {
+      const text = chatText.trim();
+      if (!text || chatBusy) return;
+      setChatBusy(true);
+      try {
+        await fetch("/api/chat", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ text }),
+        });
+        setChatText("");
+      } finally {
+        setChatBusy(false);
+      }
+    }
+
+    function onComposerKeyDown(ev) {
+      if (ev.key === "Enter" && !ev.shiftKey) {
+        ev.preventDefault();
+        sendChat();
+      }
+    }
+
+    async function saveCurrentFile() {
+      if (!["soul", "memory", "guidelines", "instructions", "heartbeat"].includes(page)) return;
+      setFileBusy(true);
+      try {
+        await fetch(`/api/files/${page}`, {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ content: fileContent }),
+        });
+        setLiveEvent(`Saved ${page}.md`);
+      } finally {
+        setFileBusy(false);
+      }
+    }
+
+    async function installSkill(id) {
+      if (!id || skillBusy[id]) return;
+      setSkillBusy((prev) => ({ ...prev, [id]: true }));
+      try {
+        await fetch("/api/skills/install", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ id }),
+        });
+        await loadSkills();
+      } finally {
+        setSkillBusy((prev) => ({ ...prev, [id]: false }));
+      }
+    }
+
+    function toggleSkillExpanded(id) {
+      setExpandedSkills((prev) => ({ ...prev, [id]: !prev[id] }));
+    }
+
+    async function saveTelegramConfig() {
+      setTelegramBusy(true);
+      try {
+        const res = await fetch("/api/telegram", {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            enabled: telegramConfig.enabled,
+            chat_id: telegramConfig.chat_id,
+            user_id: telegramConfig.user_id,
+            bot_token: telegramConfig.bot_token,
+            pairing_code: telegramConfig.pairing_code,
+          }),
+        });
+        const json = await res.json();
+        setTelegramConfig({
+          enabled: Boolean(json.enabled),
+          chat_id: json.chat_id || "",
+          user_id: json.user_id || "",
+          bot_token: "",
+          pairing_code: "",
+          paired: Boolean(json.paired),
+          has_bot_token: Boolean(json.has_bot_token),
+          has_pairing_code: Boolean(json.has_pairing_code),
+          last_update_id: Number(json.last_update_id || 0),
+        });
+        setLiveEvent("Saved Telegram settings");
+      } finally {
+        setTelegramBusy(false);
+      }
+    }
+
+    async function saveCredentialDefaults() {
+      setCredentialsBusy(true);
+      try {
+        const res = await fetch("/api/credentials/defaults", {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(credentialDefaults),
+        });
+        const json = await res.json();
+        setCredentialDefaults({
+          default_email: json.default_email || "",
+          default_email_provider: json.default_email_provider || "",
+          auto_email_activation_enabled: Boolean(json.auto_email_activation_enabled),
+        });
+        setCredentialEntries(Array.isArray(json.entries) ? json.entries : []);
+        setLiveEvent("Credential defaults saved");
+      } finally {
+        setCredentialsBusy(false);
+      }
+    }
+
+    async function saveCredentialEntry() {
+      if (!credentialForm.website.trim()) return;
+      setCredentialsBusy(true);
+      try {
+        const res = await fetch("/api/credentials/upsert", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(credentialForm),
+        });
+        const json = await res.json();
+        setCredentialEntries(Array.isArray(json.entries) ? json.entries : []);
+        setCredentialDefaults({
+          default_email: json.default_email || "",
+          default_email_provider: json.default_email_provider || "",
+          auto_email_activation_enabled: Boolean(json.auto_email_activation_enabled),
+        });
+        setCredentialForm({
+          id: "",
+          website: "",
+          email: "",
+          password: "",
+          email_provider: "",
+          notes: "",
+        });
+        setLiveEvent("Credential saved");
+      } finally {
+        setCredentialsBusy(false);
+      }
+    }
+
+    async function deleteCredential(id) {
+      if (!id) return;
+      setCredentialsBusy(true);
+      try {
+        const res = await fetch("/api/credentials/delete", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ id }),
+        });
+        const json = await res.json();
+        setCredentialEntries(Array.isArray(json.entries) ? json.entries : []);
+        setCredentialDefaults({
+          default_email: json.default_email || "",
+          default_email_provider: json.default_email_provider || "",
+          auto_email_activation_enabled: Boolean(json.auto_email_activation_enabled),
+        });
+        if (credentialForm.id === id) {
+          setCredentialForm({
+            id: "",
+            website: "",
+            email: "",
+            password: "",
+            email_provider: "",
+            notes: "",
+          });
+        }
+        setLiveEvent("Credential removed");
+      } finally {
+        setCredentialsBusy(false);
+      }
+    }
+
+    function beginCredentialEdit(entry) {
+      setCredentialForm({
+        id: entry.id || "",
+        website: entry.website || "",
+        email: entry.email || "",
+        password: entry.password || "",
+        email_provider: entry.email_provider || "",
+        notes: entry.notes || "",
+      });
+    }
+
+    async function disconnectTelegram() {
+      setTelegramBusy(true);
+      try {
+        const res = await fetch("/api/telegram/disconnect", { method: "POST" });
+        const json = await res.json();
+        setTelegramConfig({
+          enabled: Boolean(json.enabled),
+          chat_id: json.chat_id || "",
+          user_id: json.user_id || "",
+          bot_token: "",
+          pairing_code: "",
+          paired: Boolean(json.paired),
+          has_bot_token: Boolean(json.has_bot_token),
+          has_pairing_code: Boolean(json.has_pairing_code),
+          last_update_id: Number(json.last_update_id || 0),
+        });
+        setLiveEvent("Telegram disconnected");
+      } finally {
+        setTelegramBusy(false);
+      }
+    }
+
+    const currentPage = PAGES.find((p) => p.id === page) || PAGES[0];
+    const installedCount = skills.filter((s) => s.installed).length;
+    const latestChat = chat.length ? chat[chat.length - 1] : null;
+
+    const stats = useMemo(
+      () => [
+        { label: "Connection", value: status, tone: status === "Online" ? "good" : "warn" },
+        { label: "Installed Skills", value: String(installedCount), tone: "accent" },
+        { label: "Screenshots", value: String(shots.length), tone: "neutral" },
+        { label: "Live State", value: liveEvent, tone: "neutral wide" },
+      ],
+      [installedCount, liveEvent, shots.length, status],
+    );
+
+    function renderChatPage() {
+      return e("div", { className: "content-body stacked" }, [
+        e("div", { className: "section-head", key: "head" }, [
+          e("div", { className: "section-title", key: "title" }, "Conversation Stream"),
+          e("div", { className: "section-meta", key: "meta" }, latestChat ? `Last message · ${fmtTs(latestChat.ts)}` : "No messages yet"),
+        ]),
+        e(
+          "div",
+          { className: "chat-list", key: "list" },
+          chat.map((m) =>
+            e("article", { className: `msg ${m.role}`, key: m.id || `${m.ts}-${Math.random()}` }, [
+              e("div", { className: "msg-bubble", key: "bubble" }, [
+                e("div", { className: "meta", key: "m" }, [
+                  e("span", { className: "role-badge", key: "r" }, m.role),
+                  e("span", { key: "s" }, m.source),
+                  e("span", { key: "t" }, fmtTs(m.ts)),
+                ]),
+                e("div", { className: "msg-text", key: "t" }, m.text),
+              ]),
+            ]),
+          ),
+        ),
+        e("div", { className: "composer-shell", key: "c" }, [
+          e("div", { className: "composer-label", key: "label" }, "Send a new task"),
+          e("div", { className: "composer", key: "inner" }, [
+            e("input", {
+              key: "ta",
+              type: "text",
+              value: chatText,
+              onChange: (ev) => setChatText(ev.target.value),
+              onKeyDown: onComposerKeyDown,
+              placeholder: "Tell OpenCore what to do next...",
+              disabled: chatBusy,
+            }),
+            e(
+              "button",
+              { className: "primary-btn", key: "b", onClick: sendChat, disabled: chatBusy },
+              chatBusy ? "Sending..." : "Send",
+            ),
+          ]),
+        ]),
+      ]);
+    }
+
+    function renderScreenshotsPage() {
+      return e(
+        "div",
+        { className: "shots-grid content-body" },
+        shots.map((s) =>
+          e("article", { className: "shot-card", key: s.path }, [
+            e("div", { className: "shot-meta", key: "meta" }, [
+              e("div", { className: "shot-name", key: "name" }, s.name),
+              e("div", { className: "shot-ts", key: "ts" }, fmtTs(s.ts)),
+            ]),
+            e("img", {
+              key: "img",
+              src: `/api/screenshots/file?path=${encodeURIComponent(s.path)}`,
+            }),
+          ]),
+        ),
+      );
+    }
+
+    function renderSkillsPage() {
+      return e(
+        "div",
+        { className: "skills-grid content-body" },
+        skills.map((s) => {
+          const expanded = Boolean(expandedSkills[s.id]);
+          const titleLong = String(s.name || "").length > 26;
+          const descriptionLong = String(s.description || "").length > 120;
+          const showExpand = titleLong || descriptionLong;
+          return e("article", { className: `skill-card ${expanded ? "expanded" : ""}`.trim(), key: s.id }, [
+            e("div", { className: "skill-top", key: "top" }, [
+              e("div", { key: "title" }, [
+                e("div", { className: "skill-kicker", key: "k" }, s.id),
+                e("h3", { className: expanded ? "" : "clamp-title", key: "h3" }, s.name),
+              ]),
+              e(
+                "span",
+                { className: `skill-status ${s.installed ? "installed" : "not-installed"}`, key: "status" },
+                s.installed ? "Installed" : "Available",
+              ),
+            ]),
+            e("p", { className: expanded ? "" : "clamp-description", key: "p" }, s.description),
+            showExpand
+              ? e(
+                  "button",
+                  {
+                    className: "text-btn skill-expand-btn",
+                    key: "expand",
+                    onClick: () => toggleSkillExpanded(s.id),
+                  },
+                  expanded ? "Less" : "More",
+                )
+              : null,
+            s.installed
+              ? e("div", { className: "skill-note", key: "note" }, "Ready for use.")
+              : e(
+                  "button",
+                  {
+                    className: "secondary-btn",
+                    key: "install",
+                    onClick: () => installSkill(s.id),
+                    disabled: Boolean(skillBusy[s.id]),
+                  },
+                  skillBusy[s.id] ? "Installing..." : "Install Skill",
+                ),
+          ]);
+        }),
+      );
+    }
+
+    function renderTelegramPage() {
+      return e("div", { className: "content-body stacked" }, [
+        e("div", { className: "section-head", key: "head" }, [
+          e("div", { className: "section-title", key: "title" }, "Telegram Settings"),
+          e(
+            "div",
+            { className: "section-meta", key: "meta" },
+            telegramConfig.enabled
+              ? telegramConfig.paired
+                ? `Connected to user ${telegramConfig.user_id || "unknown"}`
+                : "Awaiting Telegram pairing"
+              : "Telegram is not connected",
+          ),
+        ]),
+        e("div", { className: "settings-card", key: "card" }, [
+          e("label", { className: "settings-row settings-toggle", key: "enabled" }, [
+            e("span", { className: "settings-copy", key: "copy" }, [
+              e("strong", { key: "title" }, "Enable Telegram"),
+              e("span", { key: "sub" }, "Set the bot token first. Then run /start in Telegram to receive both the Telegram user ID and pairing code, and save them here."),
+            ]),
+            e("input", {
+              key: "input",
+              type: "checkbox",
+              checked: Boolean(telegramConfig.enabled),
+              onChange: (ev) => setTelegramConfig((prev) => ({ ...prev, enabled: ev.target.checked })),
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "user" }, [
+            e("span", { key: "label" }, "Telegram User ID"),
+            e("input", {
+              key: "input",
+              type: "text",
+              value: telegramConfig.user_id,
+              onChange: (ev) => setTelegramConfig((prev) => ({ ...prev, user_id: ev.target.value })),
+              placeholder: "Returned by /start in Telegram",
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "token" }, [
+            e("span", { key: "label" }, `Bot Token ${telegramConfig.has_bot_token ? "(saved)" : ""}`),
+            e("input", {
+              key: "input",
+              type: "password",
+              value: telegramConfig.bot_token,
+              onChange: (ev) => setTelegramConfig((prev) => ({ ...prev, bot_token: ev.target.value })),
+              placeholder: telegramConfig.has_bot_token ? "Leave blank to keep existing token" : "123456:ABC...",
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "pairing" }, [
+            e("span", { key: "label" }, `Pairing Code ${telegramConfig.has_pairing_code ? "(saved)" : ""}`),
+            e("input", {
+              key: "input",
+              type: "text",
+              value: telegramConfig.pairing_code,
+              onChange: (ev) => setTelegramConfig((prev) => ({ ...prev, pairing_code: ev.target.value })),
+              placeholder: telegramConfig.has_pairing_code ? "Leave blank to keep existing code" : "Choose a pairing code",
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "chat" }, [
+            e("span", { key: "label" }, "Chat ID"),
+            e("input", {
+              key: "input",
+              type: "text",
+              value: telegramConfig.chat_id,
+              onChange: (ev) => setTelegramConfig((prev) => ({ ...prev, chat_id: ev.target.value })),
+              placeholder: "Filled automatically after pairing",
+            }),
+          ]),
+          e(
+            "div",
+            { className: "settings-inline-meta", key: "meta" },
+            `${telegramConfig.paired ? "Paired" : "Not paired"} · Last update id: ${telegramConfig.last_update_id || 0}`,
+          ),
+          e("div", { className: "settings-actions", key: "actions" }, [
+            e(
+              "button",
+              { className: "primary-btn", key: "save", onClick: saveTelegramConfig, disabled: telegramBusy },
+              telegramBusy ? "Saving..." : "Save Telegram Config",
+            ),
+            e(
+              "button",
+              { className: "secondary-btn", key: "disconnect", onClick: disconnectTelegram, disabled: telegramBusy },
+              "Disconnect Telegram",
+            ),
+          ]),
+        ]),
+      ]);
+    }
+
+    function renderCredentialsPage() {
+      return e("div", { className: "content-body stacked" }, [
+        e("div", { className: "section-head", key: "head" }, [
+          e("div", { className: "section-title", key: "title" }, "Credential Vault"),
+          e("div", { className: "section-meta", key: "meta" }, `${credentialEntries.length} saved website credential${credentialEntries.length === 1 ? "" : "s"}`),
+        ]),
+        e("div", { className: "settings-card credentials-settings-card", key: "defaults" }, [
+          e("label", { className: "settings-field", key: "de" }, [
+            e("span", { key: "label" }, "Default Email"),
+            e("input", {
+              key: "input",
+              type: "email",
+              value: credentialDefaults.default_email,
+              onChange: (ev) => setCredentialDefaults((prev) => ({ ...prev, default_email: ev.target.value })),
+              placeholder: "name@example.com",
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "dep" }, [
+            e("span", { key: "label" }, "Default Email Provider"),
+            e("input", {
+              key: "input",
+              type: "text",
+              value: credentialDefaults.default_email_provider,
+              onChange: (ev) => setCredentialDefaults((prev) => ({ ...prev, default_email_provider: ev.target.value })),
+              placeholder: "gmail, outlook, icloud...",
+            }),
+          ]),
+          e("label", { className: "settings-row settings-toggle", key: "auto" }, [
+            e("span", { className: "settings-copy", key: "copy" }, [
+              e("strong", { key: "title" }, "Automatic Account Email Activation"),
+              e("span", { key: "sub" }, "If enabled, OpenCore may open the configured inbox provider and use verification codes or links during sign-up flows."),
+            ]),
+            e("input", {
+              key: "input",
+              type: "checkbox",
+              checked: Boolean(credentialDefaults.auto_email_activation_enabled),
+              onChange: (ev) =>
+                setCredentialDefaults((prev) => ({
+                  ...prev,
+                  auto_email_activation_enabled: ev.target.checked,
+                })),
+            }),
+          ]),
+          credentialDefaults.auto_email_activation_enabled
+            ? e(
+                "div",
+                { className: "credentials-warning", key: "warn" },
+                "Warning: automatic activation gives OpenCore permission to inspect incoming verification emails and follow activation links or codes. Only enable this if you trust the current machine and account setup.",
+              )
+            : null,
+          e("div", { className: "settings-actions", key: "actions" }, [
+            e(
+              "button",
+              { className: "primary-btn", key: "save", onClick: saveCredentialDefaults, disabled: credentialsBusy },
+              credentialsBusy ? "Saving..." : "Save Defaults",
+            ),
+          ]),
+        ]),
+        e("div", { className: "settings-card credentials-entry-card", key: "entry-form" }, [
+          e("div", { className: "section-title", key: "title" }, credentialForm.id ? "Edit Website Credential" : "Add Website Credential"),
+          e("label", { className: "settings-field", key: "site" }, [
+            e("span", { key: "label" }, "Website"),
+            e("input", {
+              key: "input",
+              type: "text",
+              value: credentialForm.website,
+              onChange: (ev) => setCredentialForm((prev) => ({ ...prev, website: ev.target.value })),
+              placeholder: "example.com",
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "email" }, [
+            e("span", { key: "label" }, "Email"),
+            e("input", {
+              key: "input",
+              type: "email",
+              value: credentialForm.email,
+              onChange: (ev) => setCredentialForm((prev) => ({ ...prev, email: ev.target.value })),
+              placeholder: "login@example.com",
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "password" }, [
+            e("span", { key: "label" }, "Password"),
+            e("input", {
+              key: "input",
+              type: "password",
+              value: credentialForm.password,
+              onChange: (ev) => setCredentialForm((prev) => ({ ...prev, password: ev.target.value })),
+              placeholder: "Saved locally only",
+            }),
+          ]),
+          e("label", { className: "settings-field", key: "provider" }, [
+            e("span", { key: "label" }, "Email Provider (optional)"),
+            e("input", {
+              key: "input",
+              type: "text",
+              value: credentialForm.email_provider,
+              onChange: (ev) => setCredentialForm((prev) => ({ ...prev, email_provider: ev.target.value })),
+              placeholder: "gmail, outlook, icloud...",
+            }),
+          ]),
+          e("label", { className: "settings-field settings-field-wide", key: "notes" }, [
+            e("span", { key: "label" }, "Notes (optional)"),
+            e("input", {
+              key: "input",
+              type: "text",
+              value: credentialForm.notes,
+              onChange: (ev) => setCredentialForm((prev) => ({ ...prev, notes: ev.target.value })),
+              placeholder: "username variant, MFA note, plan tier...",
+            }),
+          ]),
+          e("div", { className: "settings-actions", key: "entry-actions" }, [
+            e(
+              "button",
+              { className: "primary-btn", key: "save", onClick: saveCredentialEntry, disabled: credentialsBusy },
+              credentialsBusy ? "Saving..." : credentialForm.id ? "Update Credential" : "Save Credential",
+            ),
+            e(
+              "button",
+              {
+                className: "secondary-btn",
+                key: "clear",
+                onClick: () =>
+                  setCredentialForm({
+                    id: "",
+                    website: "",
+                    email: "",
+                    password: "",
+                    email_provider: "",
+                    notes: "",
+                  }),
+                disabled: credentialsBusy,
+              },
+              "Clear",
+            ),
+          ]),
+        ]),
+        e(
+          "div",
+          { className: "credentials-grid", key: "list" },
+          credentialEntries.map((entry) =>
+            e("article", { className: "credential-card", key: entry.id }, [
+              e("div", { className: "skill-top", key: "top" }, [
+                e("div", { key: "title" }, [
+                  e("div", { className: "skill-kicker", key: "k" }, "Stored Login"),
+                  e("h3", { key: "h3" }, entry.website),
+                ]),
+                e("span", { className: `skill-status ${entry.generated_by_ai ? "not-installed" : "installed"}`, key: "status" }, entry.generated_by_ai ? "AI Generated" : "User Saved"),
+              ]),
+              e("p", { key: "email" }, `Email: ${entry.email || "Not set"}`),
+              e("p", { key: "password" }, `Password: ${entry.password ? "Saved locally" : "Not set"}`),
+              e("p", { key: "provider" }, `Provider: ${entry.email_provider || "Not set"}`),
+              entry.notes ? e("div", { className: "skill-note", key: "notes" }, entry.notes) : null,
+              e("div", { className: "settings-actions credential-actions", key: "actions" }, [
+                e("button", { className: "secondary-btn", key: "edit", onClick: () => beginCredentialEdit(entry), disabled: credentialsBusy }, "Edit"),
+                e("button", { className: "secondary-btn danger-btn", key: "delete", onClick: () => deleteCredential(entry.id), disabled: credentialsBusy }, "Delete"),
+              ]),
+            ]),
+          ),
+        ),
+      ]);
+    }
+
+    function renderEditorPage() {
+      return e("div", { className: "editor content-body stacked" }, [
+        e("div", { className: "section-head", key: "head" }, [
+          e("div", { className: "section-title", key: "title" }, "Editable System File"),
+          e("div", { className: "section-meta", key: "meta" }, "Changes are stored locally on this Mac"),
+        ]),
+        e("textarea", {
+          key: "ed",
+          value: fileContent,
+          onChange: (ev) => setFileContent(ev.target.value),
+        }),
+        e("div", { className: "editor-footer", key: "ft" }, [
+          e("button", { className: "primary-btn", key: "sv", onClick: saveCurrentFile, disabled: fileBusy }, fileBusy ? "Saving..." : "Save Changes"),
+        ]),
+      ]);
+    }
+
+    function renderPage() {
+      if (page === "chat") return renderChatPage();
+      if (page === "credentials") return renderCredentialsPage();
+      if (page === "telegram") return renderTelegramPage();
+      if (page === "screenshots") return renderScreenshotsPage();
+      if (page === "skills") return renderSkillsPage();
+      return renderEditorPage();
+    }
+
+    return e("div", { className: "shell" }, [
+      e("div", { className: "ambient ambient-a", key: "a1" }),
+      e("div", { className: "ambient ambient-b", key: "a2" }),
+      e("header", { className: "hero", key: "top" }, [
+        e("div", { className: "hero-copy", key: "copy" }, [
+          e("div", { className: "hero-kicker", key: "k" }, "OpenCore Control Surface"),
+          e("h1", { key: "h1" }, "Dashboard"),
+          e("p", { key: "p" }, "A local operations console for tasks, memory, skills, and execution state."),
+        ]),
+        e("div", { className: "hero-status", key: "status" }, [
+          e(
+            "button",
+            {
+              className: "theme-switch",
+              key: "theme",
+              onClick: () => setTheme((prev) => (prev === "dark" ? "light" : "dark")),
+            },
+            theme === "dark" ? "Light Mode" : "Dark Mode",
+          ),
+          e("div", { className: "status-chip", key: "chip" }, status),
+          e("div", { className: "status-line", key: "line" }, liveEvent),
+        ]),
+      ]),
+      e(
+        "div",
+        { className: "stats-row", key: "stats" },
+        stats.map((item, idx) => e(StatCard, { key: `${item.label}-${idx}`, label: item.label, value: item.value, tone: item.tone })),
+      ),
+      e("div", { className: `layout ${drawerOpen ? "" : "drawer-closed"}`.trim(), key: "layout" }, [
+        e("aside", { className: `drawer ${drawerOpen ? "open" : "closed"}`, key: "drawer" }, [
+          e("div", { className: "drawer-head", key: "dh" }, [
+            e("div", { className: "drawer-head-main", key: "main" }, [
+              e("div", { className: "drawer-kicker", key: "dk" }, "Workspace"),
+              e("div", { className: "drawer-title", key: "dt" }, "Navigation"),
+            ]),
+            e(
+              "button",
+              {
+                className: "drawer-inline-toggle",
+                key: "tg",
+                onClick: () => setDrawerOpen((v) => !v),
+                "aria-label": drawerOpen ? "Close sidebar" : "Open sidebar",
+              },
+              "◂",
+            ),
+          ]),
+          e(
+            "div",
+            { className: "drawer-nav", key: "nav" },
+            PAGES.map((p) =>
+              e(
+                "button",
+                {
+                  key: p.id,
+                  className: `nav-btn ${page === p.id ? "active" : ""}`,
+                  onClick: () => setPage(p.id),
+                },
+                [
+                  e("span", { className: "nav-label", key: "l" }, p.label),
+                  e("span", { className: "nav-blurb", key: "b" }, p.eyebrow),
+                ],
+              ),
+            ),
+          ),
+        ]),
+        !drawerOpen &&
+          e(
+            "button",
+            {
+              className: "drawer-reopen",
+              key: "reopen",
+              onClick: () => setDrawerOpen(true),
+              "aria-label": "Open sidebar",
+            },
+            "▸",
+          ),
+        e("main", { className: "page", key: "page" }, [
+          e("div", { className: "page-head", key: "ph" }, [
+            e("div", { key: "copy" }, [
+              e("div", { className: "page-kicker", key: "pk" }, currentPage.eyebrow),
+              e("h2", { key: "h2" }, currentPage.label),
+              e("p", { key: "p" }, currentPage.blurb),
+            ]),
+          ]),
+          renderPage(),
+        ]),
+      ]),
+    ]);
+  }
+
+  ReactDOM.render(e(App), document.getElementById("root"));
+})();