Function App

dashboard/dev/main.tsx:127–182

()

};

function App() {
  useRegistryVersion();
  const names = Array.from(registered.keys());
  const [active, setActive] = useState("");

  useEffect(() => {
    if ((!active || !registered.has(active)) && names.length > 0) {
      setActive(names[0]);
    }
  }, [names, active]);

  const tabs = names.map((n) => ({ name: n, label: PLUGIN_LABELS[n] || n }));
  const Active = active ? registered.get(active) : null;

  return (
    <div className="ts-shell">
      <header className="ts-shell-header">
        <div className="ts-shell-brand">
          <span className="ts-shell-logo" aria-hidden="true">
            ◳
          </span>
          <h1 className="ts-shell-title">tracedecay · dev</h1>
        </div>
        <div className="ts-shell-tabs" role="tablist" aria-label="Plugin tabs (dev)">
          {tabs.map((t) => (
            <button
              key={t.name}
              type="button"
              role="tab"
              aria-selected={t.name === active}
              tabIndex={t.name === active ? 0 : -1}
              className={`ts-shell-tab${t.name === active ? " ts-shell-tab-active" : ""}`}
              onClick={() => setActive(t.name)}
            >
              {t.label}
            </button>
          ))}
          {tabs.length === 0 && (
            <span style={{ padding: "0.5rem 1rem", color: "var(--ts-text-3)" }}>
              No plugins registered…
            </span>
          )}
        </div>
      </header>
      <main className="ts-shell-main">
        {Active ? (
          <Active />
        ) : (
          <div className="ts-shell-loading" role="status" aria-live="polite">
            Waiting for plugins to register…
          </div>
        )}
      </main>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);