@intent-systems/nexus 2026.1.5-3

package/skills/json-render/assets/demo/App.tsx

@@ -0,0 +1,897 @@
+import { useMemo, useState } from "react";
+import type { UITree } from "@json-render/core";
+import {
+  ActionProvider,
+  DataProvider,
+  Renderer,
+  VisibilityProvider,
+  useUIStream,
+} from "@json-render/react";
+import { registry } from "./registry";
+import "./App.css";
+
+const summaryTree: UITree = {
+  root: "root",
+  elements: {
+    root: {
+      type: "Section",
+      props: {
+        title: "Quarterly Snapshot",
+        description: "UI rendered entirely from JSON.",
+      },
+      children: ["kpiStack", "ctaStack"],
+    },
+    kpiStack: {
+      type: "Stack",
+      props: { gap: 8, align: "left" },
+      children: ["kpi1", "kpi2", "kpi3"],
+    },
+    kpi1: { type: "Text", props: { content: "MRR: $128,400" } },
+    kpi2: { type: "Text", props: { content: "Churn: 2.1%", tone: "muted" } },
+    kpi3: { type: "Text", props: { content: "NPS: 47" } },
+    ctaStack: {
+      type: "Stack",
+      props: { gap: 12, align: "left" },
+      children: ["ctaText", "ctaButton"],
+    },
+    ctaText: {
+      type: "Text",
+      props: { content: "Open the dashboard for details.", tone: "muted" },
+    },
+    ctaButton: {
+      type: "Button",
+      props: {
+        label: "Open dashboard",
+        action: "navigate",
+        actionParams: { url: "https://example.com" },
+        variant: "primary",
+      },
+    },
+  },
+};
+
+const emptyTree: UITree = {
+  root: "empty",
+  elements: {
+    empty: {
+      type: "Section",
+      props: {
+        title: "No data yet",
+        description: "Sync a source to populate this view.",
+      },
+      children: ["emptyText", "emptyActions"],
+    },
+    emptyText: {
+      type: "Text",
+      props: {
+        content: "Once data arrives, this card will update automatically.",
+        tone: "muted",
+      },
+    },
+    emptyActions: {
+      type: "Stack",
+      props: { gap: 10, align: "left" },
+      children: ["primaryButton", "secondaryButton"],
+    },
+    primaryButton: {
+      type: "Button",
+      props: {
+        label: "Start sync",
+        action: "submit",
+        actionParams: { formId: "sync" },
+        variant: "primary",
+      },
+    },
+    secondaryButton: {
+      type: "Button",
+      props: {
+        label: "Learn more",
+        action: "navigate",
+        actionParams: { url: "https://json-render.dev" },
+        variant: "secondary",
+      },
+    },
+  },
+};
+
+const baseTrees = {
+  summary: summaryTree,
+  empty: emptyTree,
+} as const;
+
+type BaseTreeKey = keyof typeof baseTrees;
+type TreeKey = BaseTreeKey | "nexus";
+
+const treeLabels: Record<TreeKey, string> = {
+  summary: "Quarterly summary",
+  empty: "Empty state",
+  nexus: "Nexus core state",
+};
+
+const treeKeys: TreeKey[] = ["summary", "empty", "nexus"];
+
+const promptExamples = [
+  "highlight credentials",
+  "hide cli",
+  "3 columns",
+  "focus skills",
+  "add connectors",
+  "show registry",
+  "show data table",
+  "compact layout",
+];
+
+function getAgentData() {
+  return {
+    summary: [
+      { label: "Skills (bundled)", value: "72" },
+      { label: "Capabilities", value: "48" },
+      { label: "Connectors", value: "18" },
+      { label: "Registry status", value: "Healthy" },
+    ],
+    table: {
+      columns: ["Domain", "Count", "Notes"],
+      rows: [
+        ["Skills", "72", "Bundled in core"],
+        ["Connectors", "18", "OAuth + API keys"],
+        ["Capabilities", "48", "Abstract goals"],
+        ["Tools", "24", "Installed or managed"],
+      ],
+    },
+  };
+}
+
+function buildNexusTree(prompt: string): UITree {
+  const normalized = prompt.trim().toLowerCase();
+  const compact =
+    normalized.includes("compact") || normalized.includes("dense");
+  const hideCli =
+    normalized.includes("hide cli") ||
+    normalized.includes("remove cli") ||
+    normalized.includes("no cli");
+  const focusSkills =
+    normalized.includes("focus skills") ||
+    normalized.includes("skills first");
+  const highlightCredentials =
+    normalized.includes("highlight credentials") ||
+    normalized.includes("focus credentials");
+  const highlightGateway =
+    normalized.includes("highlight gateway") ||
+    normalized.includes("focus gateway");
+  const showConnectors =
+    normalized.includes("connector") ||
+    normalized.includes("oauth") ||
+    normalized.includes("auth");
+  const showRegistry =
+    normalized.includes("registry") ||
+    normalized.includes("hub") ||
+    normalized.includes("website");
+  const showStorage =
+    normalized.includes("storage") || normalized.includes("artifacts");
+  const showDataPanel =
+    normalized.includes("data") ||
+    normalized.includes("table") ||
+    normalized.includes("metrics") ||
+    normalized.includes("stats");
+
+  const columns = normalized.includes("4 column")
+    ? 4
+    : normalized.includes("3 column")
+      ? 3
+      : normalized.includes("1 column") || normalized.includes("single column")
+        ? 1
+        : 2;
+
+  const gridGap = compact ? 12 : 16;
+  const listGap = compact ? 4 : 6;
+  const stackProps = { gap: listGap, align: "left" as const };
+
+  let gridChildren = [
+    "coreCapabilities",
+    "coreSkills",
+    "coreCredentials",
+    "coreState",
+    "coreCli",
+    "coreDiscovery",
+    "coreGateway",
+    "coreOwnership",
+  ];
+
+  if (showDataPanel) {
+    gridChildren = ["coreData", ...gridChildren];
+  }
+
+  if (showConnectors) {
+    const insertAt = gridChildren.indexOf("coreCredentials") + 1;
+    gridChildren.splice(insertAt, 0, "coreConnectors");
+  }
+
+  if (showRegistry) {
+    const insertAt = gridChildren.indexOf("coreDiscovery") + 1;
+    gridChildren.splice(insertAt, 0, "coreRegistry");
+  }
+
+  if (showStorage) {
+    const insertAt = gridChildren.indexOf("coreState") + 1;
+    gridChildren.splice(insertAt, 0, "coreStorage");
+  }
+
+  if (hideCli) {
+    gridChildren = gridChildren.filter((item) => item !== "coreCli");
+  }
+
+  if (focusSkills) {
+    gridChildren = [
+      "coreSkills",
+      ...gridChildren.filter((item) => item !== "coreSkills"),
+    ];
+  }
+
+  const elements: UITree["elements"] = {
+    nexusRoot: {
+      type: "Section",
+      props: {
+        title: "Nexus Core State Map",
+        description:
+          "A high-level view of the canonical Nexus core state model (not your personal workspace).",
+      },
+      children: ["nexusBadges", "nexusGrid"],
+    },
+    nexusBadges: {
+      type: "Grid",
+      props: { columns: 4, gap: 12 },
+      children: [
+        "badgeCapabilities",
+        "badgeSkills",
+        "badgeCredentials",
+        "badgeGateway",
+      ],
+    },
+    badgeCapabilities: {
+      type: "Badge",
+      props: { label: "Capabilities", tone: "info" },
+    },
+    badgeSkills: {
+      type: "Badge",
+      props: { label: "Skills", tone: "success" },
+    },
+    badgeCredentials: {
+      type: "Badge",
+      props: {
+        label: "Credentials",
+        tone: highlightCredentials ? "warning" : "default",
+      },
+    },
+    badgeGateway: {
+      type: "Badge",
+      props: {
+        label: "Gateway + State",
+        tone: highlightGateway ? "info" : "default",
+      },
+    },
+    nexusGrid: {
+      type: "Grid",
+      props: { columns, gap: gridGap },
+      children: gridChildren,
+    },
+    coreCapabilities: {
+      type: "Section",
+      props: {
+        title: "Capabilities",
+        description: "Abstract goals the system can satisfy.",
+      },
+      children: ["capabilityList"],
+    },
+    capabilityList: {
+      type: "Stack",
+      props: stackProps,
+      children: [
+        "capEmail",
+        "capChat",
+        "capBrowser",
+        "capFiles",
+        "capUi",
+        "capCalendar",
+      ],
+    },
+    capEmail: {
+      type: "Text",
+      props: { content: "email-read, email-send" },
+    },
+    capChat: {
+      type: "Text",
+      props: { content: "chat-send, chat-read" },
+    },
+    capBrowser: {
+      type: "Text",
+      props: { content: "browser-automation, web-search" },
+    },
+    capFiles: {
+      type: "Text",
+      props: { content: "filesystem, doc-extract" },
+    },
+    capUi: {
+      type: "Text",
+      props: { content: "ui-render, ui-compose" },
+    },
+    capCalendar: {
+      type: "Text",
+      props: { content: "calendar-read, calendar-write" },
+    },
+    coreSkills: {
+      type: "Section",
+      props: {
+        title: "Skills",
+        description: "Prompt layer that references tools + connectors.",
+      },
+      children: ["skillList"],
+    },
+    skillList: {
+      type: "Stack",
+      props: stackProps,
+      children: [
+        "skillPrompt",
+        "skillTool",
+        "skillScript",
+        "skillConnector",
+        "skillCatalog",
+      ],
+    },
+    skillPrompt: {
+      type: "Text",
+      props: { content: "prompt-only: filesystem, weather, github" },
+    },
+    skillTool: {
+      type: "Text",
+      props: { content: "tool-backed: gog, eve, tmux, agent-browser" },
+    },
+    skillScript: {
+      type: "Text",
+      props: { content: "script-backed: brave-search, openai-image-gen" },
+    },
+    skillConnector: {
+      type: "Text",
+      props: { content: "connector-backed: OAuth/API key required" },
+    },
+    skillCatalog: {
+      type: "Text",
+      props: {
+        content:
+          "SKILL.md + assets + references; manifest derived from frontmatter",
+        tone: "muted",
+      },
+    },
+    coreCredentials: {
+      type: "Section",
+      props: {
+        title: "Credentials + Identity",
+        description: "Auth lives in credentials; skills stay stateless.",
+      },
+      children: ["credentialList"],
+    },
+    credentialList: {
+      type: "Stack",
+      props: stackProps,
+      children: [
+        "credStore",
+        "credUser",
+        "credAgent",
+        "credScopes",
+      ],
+    },
+    credStore: {
+      type: "Text",
+      props: { content: "state/credentials/ (API keys, tokens, OAuth)" },
+    },
+    credUser: {
+      type: "Text",
+      props: { content: "state/user/identity/PROFILE.md" },
+    },
+    credAgent: {
+      type: "Text",
+      props: { content: "state/agents/default/identity/*" },
+    },
+    credScopes: {
+      type: "Text",
+      props: {
+        content: "Connector requirements gate access to locked capabilities.",
+        tone: "muted",
+      },
+    },
+    coreState: {
+      type: "Section",
+      props: {
+        title: "Runtime State",
+        description: "Per-skill folders plus a manifest cache.",
+      },
+      children: ["stateList"],
+    },
+    stateList: {
+      type: "Stack",
+      props: stackProps,
+      children: [
+        "stateManifest",
+        "stateSkill",
+        "stateUsage",
+        "stateGateway",
+      ],
+    },
+    stateManifest: {
+      type: "Text",
+      props: { content: "state/nexus/skills/manifest.json" },
+    },
+    stateSkill: {
+      type: "Text",
+      props: {
+        content: "state/nexus/skills/{skill}/state.json",
+      },
+    },
+    stateUsage: {
+      type: "Text",
+      props: { content: "state/nexus/skills/{skill}/usage.log" },
+    },
+    stateGateway: {
+      type: "Text",
+      props: {
+        content: "Gateway logs executions (configured, lastUsed, success rate).",
+        tone: "muted",
+      },
+    },
+    coreCli: {
+      type: "Section",
+      props: {
+        title: "CLI Surface",
+        description: "Nexus CLI is the source of truth.",
+      },
+      children: ["cliList"],
+    },
+    cliList: {
+      type: "Stack",
+      props: stackProps,
+      children: ["cliStatus", "cliRun", "cliVerify", "cliSkills"],
+    },
+    cliStatus: {
+      type: "Text",
+      props: { content: "nexus skills status (identity + readiness)" },
+    },
+    cliRun: {
+      type: "Text",
+      props: { content: "nexus skill run <name> [args]" },
+    },
+    cliVerify: {
+      type: "Text",
+      props: { content: "nexus skill verify <name>" },
+    },
+    cliSkills: {
+      type: "Text",
+      props: { content: "nexus skills list|refresh|info" },
+    },
+    coreDiscovery: {
+      type: "Section",
+      props: {
+        title: "Skill Discovery",
+        description: "Multiple sources with override precedence.",
+      },
+      children: ["discoveryList"],
+    },
+    discoveryList: {
+      type: "Stack",
+      props: stackProps,
+      children: ["discExtra", "discBundled", "discManaged", "discWorkspace"],
+    },
+    discExtra: {
+      type: "Text",
+      props: { content: "extra dirs (lowest priority)" },
+    },
+    discBundled: {
+      type: "Text",
+      props: { content: "bundled skills (nexus core)" },
+    },
+    discManaged: {
+      type: "Text",
+      props: { content: "managed hub installs (~/.nexus/skills)" },
+    },
+    discWorkspace: {
+      type: "Text",
+      props: { content: "workspace skills (~/nexus/skills)" },
+    },
+    coreGateway: {
+      type: "Section",
+      props: {
+        title: "Gateway Flow",
+        description: "Execution path with verification and logging.",
+      },
+      children: ["gatewayList"],
+    },
+    gatewayList: {
+      type: "Stack",
+      props: stackProps,
+      children: [
+        "gatewayLoad",
+        "gatewayVerify",
+        "gatewayExec",
+        "gatewayLog",
+      ],
+    },
+    gatewayLoad: {
+      type: "Text",
+      props: { content: "Load manifest -> resolve skill type" },
+    },
+    gatewayVerify: {
+      type: "Text",
+      props: { content: "Verify config + dependencies on first run" },
+    },
+    gatewayExec: {
+      type: "Text",
+      props: { content: "Execute tool/script or return prompt" },
+    },
+    gatewayLog: {
+      type: "Text",
+      props: {
+        content: "Append usage.log and update state.json",
+      },
+    },
+    coreOwnership: {
+      type: "Section",
+      props: {
+        title: "Ownership Boundaries",
+        description: "Who owns which directories.",
+      },
+      children: ["ownershipList"],
+    },
+    ownershipList: {
+      type: "Stack",
+      props: stackProps,
+      children: ["ownerUser", "ownerNexus", "ownerAgent"],
+    },
+    ownerUser: {
+      type: "Text",
+      props: { content: "User owns home/ entirely" },
+    },
+    ownerNexus: {
+      type: "Text",
+      props: { content: "Nexus owns state/, skills/, AGENTS.md" },
+    },
+    ownerAgent: {
+      type: "Text",
+      props: {
+        content: "Agent writes only to state/agents/{agent}/ (with permission)",
+        tone: "muted",
+      },
+    },
+  };
+
+  if (showDataPanel) {
+    const agentData = getAgentData();
+    elements.coreData = {
+      type: "Section",
+      props: {
+        title: "Live Data (agent fetched)",
+        description:
+          "Stubbed data resolved by an agent hook before rendering.",
+      },
+      children: ["dataSummary", "dataTable"],
+    };
+    elements.dataSummary = {
+      type: "KeyValueList",
+      props: {
+        title: "Nexus core snapshot",
+        items: agentData.summary,
+      },
+    };
+    elements.dataTable = {
+      type: "DataTable",
+      props: {
+        title: "Counts by domain",
+        columns: agentData.table.columns,
+        rows: agentData.table.rows,
+      },
+    };
+  }
+
+  if (showConnectors) {
+    elements.coreConnectors = {
+      type: "Section",
+      props: {
+        title: "Connectors",
+        description: "Auth surfaces that unlock locked capabilities.",
+      },
+      children: ["connectorList"],
+    };
+    elements.connectorList = {
+      type: "Stack",
+      props: stackProps,
+      children: ["connOauth", "connApiKey", "connDevice"],
+    };
+    elements.connOauth = {
+      type: "Text",
+      props: { content: "OAuth + consent screens" },
+    };
+    elements.connApiKey = {
+      type: "Text",
+      props: { content: "API keys + bearer tokens" },
+    };
+    elements.connDevice = {
+      type: "Text",
+      props: { content: "Device codes + local keychains" },
+    };
+  }
+
+  if (showRegistry) {
+    elements.coreRegistry = {
+      type: "Section",
+      props: {
+        title: "Registry + Hub",
+        description: "Distribution, audits, and install metadata.",
+      },
+      children: ["registryList"],
+    };
+    elements.registryList = {
+      type: "Stack",
+      props: stackProps,
+      children: ["registryWebsite", "registryStorage", "registryAudit"],
+    };
+    elements.registryWebsite = {
+      type: "Text",
+      props: { content: "Website DB: metadata + rankings" },
+    };
+    elements.registryStorage = {
+      type: "Text",
+      props: { content: "nexus-cloud: artifact storage + refs" },
+    };
+    elements.registryAudit = {
+      type: "Text",
+      props: { content: "Audit pipeline: metadata -> static -> sandbox" },
+    };
+  }
+
+  if (showStorage) {
+    elements.coreStorage = {
+      type: "Section",
+      props: {
+        title: "Storage Layout",
+        description: "Where artifacts and manifests live.",
+      },
+      children: ["storageList"],
+    };
+    elements.storageList = {
+      type: "Stack",
+      props: stackProps,
+      children: ["storageArtifact", "storageManifest", "storageRefs"],
+    };
+    elements.storageArtifact = {
+      type: "Text",
+      props: { content: "skills/{author}/{name}/{version}/artifact.tar.zst" },
+    };
+    elements.storageManifest = {
+      type: "Text",
+      props: { content: "skills/{author}/{name}/{version}/manifest.json" },
+    };
+    elements.storageRefs = {
+      type: "Text",
+      props: { content: "refs: skills/{author}/{name} -> latest hash" },
+    };
+  }
+
+  return { root: "nexusRoot", elements };
+}
+
+function App() {
+  const llmEndpoint = import.meta.env.VITE_LLM_ENDPOINT ?? "";
+  const llmAvailable = llmEndpoint.length > 0;
+  const {
+    tree: llmTree,
+    send: sendLlm,
+    isStreaming: llmStreaming,
+    error: llmError,
+  } = useUIStream({
+    api: llmEndpoint || "/api/generate",
+  });
+  const [activeTree, setActiveTree] = useState<TreeKey>("summary");
+  const [lastAction, setLastAction] = useState<string>("None yet");
+  const [nexusPrompt, setNexusPrompt] = useState<string>("");
+  const [llmEnabled, setLlmEnabled] = useState(false);
+  const [llmPrompt, setLlmPrompt] = useState("");
+
+  const nexusTree = useMemo(
+    () => buildNexusTree(nexusPrompt),
+    [nexusPrompt],
+  );
+
+  const activeLabel = treeLabels[activeTree];
+  const llmTreeReady = Boolean(llmTree && llmTree.root);
+  const renderTree =
+    activeTree === "nexus"
+      ? llmEnabled && llmTreeReady
+        ? llmTree
+        : nexusTree
+      : baseTrees[activeTree];
+  const llmErrorMessage =
+    llmError instanceof Error
+      ? llmError.message
+      : llmError
+        ? String(llmError)
+        : "";
+
+  const handlePromptChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    const value = event.target.value;
+    const trimmed = value.trim();
+    setNexusPrompt(value);
+
+    if (!trimmed) {
+      setLastAction("prompt cleared");
+      return;
+    }
+
+    const preview =
+      trimmed.length > 60 ? `${trimmed.slice(0, 60)}...` : trimmed;
+    setLastAction(`prompt -> ${preview}`);
+  };
+
+  const handleLlmPromptChange = (
+    event: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
+    setLlmPrompt(event.target.value);
+  };
+
+  const toggleLlm = () => {
+    if (!llmAvailable) {
+      setLastAction("LLM endpoint missing");
+      return;
+    }
+    const nextEnabled = !llmEnabled;
+    setLlmEnabled(nextEnabled);
+    setLastAction(nextEnabled ? "mode -> llm" : "mode -> local");
+  };
+
+  const handleLlmGenerate = () => {
+    const trimmed = llmPrompt.trim();
+    if (!trimmed) {
+      setLastAction("llm -> empty prompt");
+      return;
+    }
+    const context = {
+      view: "nexus-core-demo",
+      currentTree: llmTree ?? nexusTree,
+    };
+    sendLlm(trimmed, context);
+    const preview = trimmed.length > 60 ? `${trimmed.slice(0, 60)}...` : trimmed;
+    setLastAction(`llm -> ${preview}`);
+  };
+
+  const handlers = {
+    navigate: (params: { url?: string }) => {
+      if (params.url) {
+        window.open(params.url, "_blank", "noopener,noreferrer");
+        setLastAction(`navigate -> ${params.url}`);
+      } else {
+        setLastAction("navigate -> missing url");
+      }
+    },
+    submit: (params: { formId?: string }) => {
+      setLastAction(`submit -> ${params.formId ?? "unknown"}`);
+    },
+  };
+
+  return (
+    <div className="app">
+      <header className="app__header">
+        <div>
+          <p className="app__eyebrow">json-render demo</p>
+          <h1>Render UI from JSON</h1>
+          <p className="app__subhead">
+            Switch between JSON trees to see different layouts rendered by the
+            same React component registry.
+          </p>
+        </div>
+        <div className="app__controls">
+          {treeKeys.map((key) => (
+            <button
+              key={key}
+              className={`app__toggle ${
+                activeTree === key ? "app__toggle--active" : ""
+              }`}
+              onClick={() => setActiveTree(key)}
+              type="button"
+            >
+              {treeLabels[key]}
+            </button>
+          ))}
+        </div>
+      </header>
+
+      <div className="app__meta">
+        <span>Active tree: {activeLabel}</span>
+        <span>Last action: {lastAction}</span>
+      </div>
+
+      {activeTree === "nexus" ? (
+        <section className="app__prompt">
+          <div className="app__prompt-header">
+            <div>
+              <h2 className="app__prompt-title">Prompt the UI</h2>
+              <p className="app__prompt-help">
+                Describe changes and watch the JSON UI update live.
+              </p>
+            </div>
+            <span className="app__prompt-live">Live</span>
+          </div>
+          <div className="app__mode">
+            <span>Mode: {llmEnabled ? "LLM streaming" : "Local rules"}</span>
+            <button
+              className="app__mode-toggle"
+              onClick={toggleLlm}
+              disabled={!llmAvailable && !llmEnabled}
+              type="button"
+            >
+              {llmEnabled ? "Use local rules" : "Use LLM streaming"}
+            </button>
+            {!llmAvailable ? (
+              <span className="app__mode-hint">
+                Set VITE_LLM_ENDPOINT to enable LLM streaming.
+              </span>
+            ) : null}
+          </div>
+          <textarea
+            placeholder="Try: highlight credentials, hide cli, 3 columns..."
+            value={llmEnabled ? llmPrompt : nexusPrompt}
+            onChange={llmEnabled ? handleLlmPromptChange : handlePromptChange}
+          />
+          {llmEnabled ? (
+            <div className="app__prompt-actions">
+              <button
+                className="app__prompt-submit"
+                onClick={handleLlmGenerate}
+                disabled={!llmAvailable || llmStreaming || !llmPrompt.trim()}
+                type="button"
+              >
+                {llmStreaming ? "Streaming..." : "Generate with LLM"}
+              </button>
+              {llmStreaming ? (
+                <span className="app__prompt-status">
+                  Streaming JSON patches...
+                </span>
+              ) : null}
+              {llmErrorMessage ? (
+                <span className="app__prompt-error">{llmErrorMessage}</span>
+              ) : null}
+            </div>
+          ) : null}
+          <div className="app__prompt-examples">
+            {promptExamples.map((example) => (
+              <button
+                key={example}
+                className="app__prompt-chip"
+                onClick={() => {
+                  if (llmEnabled) {
+                    setLlmPrompt(example);
+                  } else {
+                    setNexusPrompt(example);
+                  }
+                  setLastAction(`prompt -> ${example}`);
+                }}
+                type="button"
+              >
+                {example}
+              </button>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      <DataProvider initialData={{}}>
+        <VisibilityProvider>
+          <ActionProvider handlers={handlers}>
+            <div className="app__canvas">
+              <Renderer tree={renderTree} registry={registry} />
+            </div>
+          </ActionProvider>
+        </VisibilityProvider>
+      </DataProvider>
+    </div>
+  );
+}
+
+export default App;