gnoman 0.1.0

package/renderer/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "gnoman-renderer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@tanstack/react-query": "^5.28.9",
+    "axios": "^1.6.8",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "framer-motion": "^12.23.24",
+    "lucide-react": "^0.372.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.50.0",
+    "react-router-dom": "^6.22.1",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4"
+  }
+}

package/renderer/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

package/renderer/src/App.tsx

@@ -0,0 +1,229 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { NavLink, Route, Routes } from 'react-router-dom';
+import {
+  Activity,
+  BookOpen,
+  Cpu,
+  FileCode2,
+  KeyRound,
+  LayoutDashboard,
+  ShieldCheck,
+  SlidersHorizontal,
+  Sun,
+  Moon,
+  Wallet as WalletIcon,
+  Wrench
+} from 'lucide-react';
+import LicenseScreen from '../components/LicenseScreen';
+import { WalletProvider, useWallets } from './context/WalletContext';
+import { SafeProvider } from './context/SafeContext';
+import { KeyringProvider, useKeyring } from './context/KeyringContext';
+import { useTheme } from './context/ThemeContext';
+import Dashboard from './pages/Dashboard';
+import Contracts from './pages/Contracts';
+import History from './pages/History';
+import Wallets from './pages/Wallets';
+import Safes from './pages/Safes';
+import Sandbox from './pages/Sandbox';
+import Keyring  from './pages/Keyring';
+import Settings from './pages/Settings';
+import WikiGuide from './pages/WikiGuide';
+import DeveloperTools from './pages/DeveloperTools';
+
+const navItems = [
+  { path: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { path: '/wallets', label: 'Wallets', icon: WalletIcon },
+  { path: '/safes', label: 'Safes', icon: ShieldCheck },
+  { path: '/contracts', label: 'Contracts', icon: FileCode2 },
+  { path: '/history', label: 'History', icon: Activity },
+  { path: '/sandbox', label: 'Sandbox', icon: Cpu },
+  { path: '/keyring', label: 'Keyring', icon: KeyRound },
+  { path: '/settings', label: 'Settings', icon: SlidersHorizontal },
+  { path: '/developer-tools', label: 'Developer Tools', icon: Wrench },
+  { path: '/guide', label: 'Wiki Guide', icon: BookOpen }
+];
+
+const ThemeToggleButton = () => {
+  const { theme, toggleTheme } = useTheme();
+  const Icon = theme === 'dark' ? Sun : Moon;
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      className="flex items-center gap-2 rounded-full border border-emerald-500/40 px-3 py-1 text-xs font-semibold text-emerald-300 transition hover:border-emerald-400 hover:bg-emerald-500/10"
+    >
+      <Icon className="h-4 w-4" />
+      {theme === 'dark' ? 'Light mode' : 'Dark mode'}
+    </button>
+  );
+};
+
+const KeyringStatusBeacon = () => {
+  const { summary, loading, error } = useKeyring();
+
+  if (loading) {
+    return (
+      <span className="inline-flex items-center gap-2 rounded-full border border-slate-700/50 bg-slate-900/60 px-3 py-1 text-xs text-slate-300">
+        <Activity className="h-3.5 w-3.5 animate-spin text-emerald-300" /> Loading keyring…
+      </span>
+    );
+  }
+
+  if (error || !summary) {
+    return (
+      <span className="inline-flex items-center gap-2 rounded-full border border-red-500/40 bg-red-500/10 px-3 py-1 text-xs font-semibold text-red-300">
+        <Activity className="h-3.5 w-3.5" /> Keyring offline
+      </span>
+    );
+  }
+
+  const activeService = summary.service ?? summary.backend ?? 'unknown';
+
+  return (
+    <span className="inline-flex items-center gap-2 rounded-full border border-emerald-500/40 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-300">
+      <KeyRound className="h-3.5 w-3.5" />
+      {activeService}
+      <span className="text-[10px] uppercase tracking-widest">{summary.backend}</span>
+    </span>
+  );
+};
+
+const WalletPulse = () => {
+  const { wallets } = useWallets();
+  const visibleWallets = useMemo(() => wallets.filter((wallet) => !wallet.hidden).length, [wallets]);
+  const hiddenWallets = wallets.length - visibleWallets;
+
+  return (
+    <div className="rounded-xl border border-slate-700/50 bg-slate-900/40 px-4 py-3 text-xs text-slate-300">
+      <p className="text-[10px] uppercase tracking-widest text-slate-500">Wallet pulse</p>
+      <p className="mt-1 font-mono text-sm text-emerald-300">{wallets.length} total</p>
+      <p className="mt-1 text-[11px] text-slate-400">{visibleWallets} visible · {hiddenWallets} hidden</p>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const { theme } = useTheme();
+  const [licenseStatus, setLicenseStatus] = useState<'checking' | 'valid' | 'invalid'>('checking');
+  const [legacyBridge, setLegacyBridge] = useState(false);
+
+  useEffect(() => {
+    const w = window as Window & {
+      safevault?: { loadLicense?: () => { ok?: boolean } | null };
+      gnoman?: unknown;
+    };
+    if (!w.safevault?.loadLicense) {
+      setLicenseStatus('valid');
+      setLegacyBridge(Boolean(w.gnoman));
+      return;
+    }
+    try {
+      const result = w.safevault.loadLicense();
+      setLicenseStatus(result?.ok ? 'valid' : 'invalid');
+    } catch (e) {
+      setLicenseStatus('invalid');
+    }
+    setLegacyBridge(Boolean(w.gnoman));
+  }, []);
+
+  const handleLicenseValidated = useCallback(() => {
+    setLicenseStatus('valid');
+  }, []);
+
+  if (licenseStatus !== 'valid') {
+    return <LicenseScreen onLicenseValidated={handleLicenseValidated} />;
+  }
+
+  const isDark = theme === 'dark';
+  const shellClass = isDark ? 'bg-slate-950 text-slate-100' : 'bg-slate-100 text-slate-900';
+  const sidebarClass = isDark ? 'border-slate-800/70 bg-slate-950/80' : 'border-slate-200 bg-white/90 backdrop-blur';
+  const navBaseClass = isDark ? 'text-slate-300 hover:bg-slate-900/70 hover:text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900';
+  const navActiveClass = isDark ? 'border border-emerald-500/40 bg-emerald-500/10 text-emerald-300' : 'border border-emerald-500/50 bg-emerald-100 text-emerald-700';
+
+  return (
+    <WalletProvider>
+      <SafeProvider>
+        <KeyringProvider>
+          <div className={`min-h-screen transition-colors duration-500 ${shellClass}`}>
+            <div className="mx-auto flex min-h-screen max-w-7xl flex-col lg:flex-row">
+              <aside className={`flex flex-col gap-6 border-b px-6 py-8 shadow-lg lg:w-72 lg:border-b-0 lg:border-r ${sidebarClass}`}>
+                <div className="flex items-center justify-between gap-3">
+                  <div>
+                    <p className="text-[11px] uppercase tracking-[0.3em] text-emerald-400">Gnoman</p>
+                    <h1 className="text-xl font-semibold">Graphical Control Hub</h1>
+                  </div>
+                  <ThemeToggleButton />
+                </div>
+
+                <nav className="flex flex-col gap-1 text-sm">
+                  {navItems.map((item) => {
+                    const IconComp = item.icon;
+                    return (
+                      <NavLink
+                        key={item.path}
+                        to={item.path}
+                        end={item.path === '/'}
+                        className={({ isActive }) =>
+                          `flex items-center gap-3 rounded-xl px-3 py-2 transition ${isActive ? navActiveClass : navBaseClass}`
+                        }
+                      >
+                        <IconComp className="h-5 w-5" />
+                        {item.label}
+                      </NavLink>
+                    );
+                  })}
+                </nav>
+
+                <div className="mt-auto space-y-3 text-sm">
+                  <KeyringStatusBeacon />
+                  <WalletPulse />
+                  <div
+                    className={`rounded-xl border px-4 py-3 text-xs ${
+                      legacyBridge ? 'border-amber-500/40 bg-amber-500/10 text-amber-200' : 'border-slate-700/40 bg-slate-900/40 text-slate-400'
+                    }`}
+                  >
+                    {legacyBridge ? (
+                      <p>Legacy CLI bridge detected. All workflows are now mirrored in the graphical interface.</p>
+                    ) : (
+                      <p>The CLI is dormant. Use the UI for the full administrative surface.</p>
+                    )}
+                  </div>
+                </div>
+              </aside>
+
+              <main className="flex-1 bg-transparent px-6 pb-12 pt-10">
+                <header className="mb-8 flex flex-wrap items-center justify-between gap-4">
+                  <div>
+                    <p className="text-xs uppercase tracking-[0.35em] text-emerald-400">Visual-first operations</p>
+                    <h2 className="mt-2 text-2xl font-semibold">All CLI power, now orchestrated in the GUI</h2>
+                    <p className="mt-2 max-w-2xl text-sm text-slate-400">
+                      Configure keyrings, wallets, networks, and Safe automations without leaving the graphical environment. The
+                      CLI remains as a minimal fallback for legacy scripts.
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <KeyringStatusBeacon />
+                  </div>
+                </header>
+                <Routes>
+                  <Route path="/" element={<Dashboard />} />
+                  <Route path="/wallets" element={<Wallets />} />
+                  <Route path="/safes" element={<Safes />} />
+                  <Route path="/contracts" element={<Contracts />} />
+                  <Route path="/history" element={<History />} />
+                  <Route path="/sandbox" element={<Sandbox />} />
+                  <Route path="/keyring" element={<Keyring />} />
+                  <Route path="/settings" element={<Settings />} />
+                  <Route path="/developer-tools" element={<DeveloperTools />} />
+                  <Route path="/guide" element={<WikiGuide />} />
+                </Routes>
+              </main>
+            </div>
+          </div>
+        </KeyringProvider>
+      </SafeProvider>
+    </WalletProvider>
+  );
+};
+
+export default App;

package/renderer/src/context/KeyringContext.tsx

@@ -0,0 +1,217 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import type { ReactNode } from 'react';
+import { buildBackendUrl, onBackendBaseUrlChange } from '../utils/backend';
+
+type KeyringSecret = {
+  key: string;
+  maskedValue: string | null;
+};
+
+type KeyringSummary = {
+  service?: string;
+  backend: string;
+  secrets: KeyringSecret[];
+};
+
+const SUPPORTED_BACKENDS = ['system', 'file', 'memory'] as const;
+type SupportedBackend = (typeof SUPPORTED_BACKENDS)[number];
+
+const normalizeService = (service?: string): SupportedBackend | undefined => {
+  if (!service) {
+    return undefined;
+  }
+  const trimmed = service.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  return SUPPORTED_BACKENDS.includes(trimmed as SupportedBackend) ? (trimmed as SupportedBackend) : undefined;
+};
+
+type KeyringEvent = {
+  id: string;
+  timestamp: string;
+  message: string;
+  intent: 'info' | 'success' | 'warning';
+};
+
+type KeyringContextValue = {
+  summary: KeyringSummary | null;
+  loading: boolean;
+  error: string | null;
+  history: KeyringEvent[];
+  refresh: (service?: string) => Promise<void>;
+  createSecret: (payload: { key: string; value: string; service?: string }) => Promise<void>;
+  revealSecret: (payload: { key: string; service?: string }) => Promise<string | null>;
+  removeSecret: (payload: { key: string; service?: string }) => Promise<void>;
+  switchService: (service: string) => Promise<void>;
+};
+
+const KeyringContext = createContext<KeyringContextValue | undefined>(undefined);
+
+const buildQuery = (params: Record<string, string | undefined>) => {
+  const entries = Object.entries(params).filter(([, value]) => value !== undefined && value !== '');
+  if (entries.length === 0) {
+    return '';
+  }
+  const query = new URLSearchParams();
+  for (const [key, value] of entries) {
+    if (value) {
+      query.set(key, value);
+    }
+  }
+  return `?${query.toString()}`;
+};
+
+const makeEvent = (message: string, intent: KeyringEvent['intent'] = 'info'): KeyringEvent => ({
+  id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+  timestamp: new Date().toISOString(),
+  message,
+  intent
+});
+
+type KeyringProviderProps = { children: ReactNode };
+
+export const KeyringProvider = ({ children }: KeyringProviderProps) => {
+  const [summary, setSummary] = useState<KeyringSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [history, setHistory] = useState<KeyringEvent[]>([]);
+
+  const pushEvent = useCallback((event: KeyringEvent) => {
+    setHistory((prev) => [event, ...prev].slice(0, 24));
+  }, []);
+
+  const refresh = useCallback(
+    async (service?: string) => {
+      setLoading(true);
+      setError(null);
+      const normalizedService = normalizeService(service);
+      try {
+        const response = await fetch(
+          buildBackendUrl(`/api/keyring/list${buildQuery({ service: normalizedService })}`)
+        );
+        if (!response.ok) {
+          const payload = await response.json().catch(() => ({}));
+          throw new Error(payload.message ?? 'Unable to load keyring entries');
+        }
+        const payload = (await response.json()) as KeyringSummary;
+        setSummary(payload);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Unable to load keyring entries';
+        setError(message);
+        pushEvent(makeEvent(message, 'warning'));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [pushEvent]
+  );
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  useEffect(() => onBackendBaseUrlChange(() => void refresh()), [refresh]);
+
+  const createSecret = useCallback(
+    async ({ key, value, service }: { key: string; value: string; service?: string }) => {
+      const normalizedService = normalizeService(service);
+      const response = await fetch(buildBackendUrl('/api/keyring/set'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ key, value, service: normalizedService })
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.message ?? 'Unable to store secret');
+      }
+      pushEvent(
+        makeEvent(
+          `Stored secret “${key}” in ${payload.service ?? normalizedService ?? 'active service'}.`,
+          'success'
+        )
+      );
+      await refresh(payload.service ?? normalizedService);
+    },
+    [pushEvent, refresh]
+  );
+
+  const revealSecret = useCallback(
+    async ({ key, service }: { key: string; service?: string }) => {
+      const normalizedService = normalizeService(service);
+      const query = buildQuery({ service: normalizedService });
+      const response = await fetch(buildBackendUrl(`/api/keyring/${encodeURIComponent(key)}${query}`));
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.message ?? 'Unable to reveal secret');
+      }
+      pushEvent(
+        makeEvent(`Revealed secret “${key}” from ${payload.service ?? normalizedService ?? 'active service'}.`, 'info')
+      );
+      return (payload.value as string | undefined) ?? null;
+    },
+    [pushEvent]
+  );
+
+  const removeSecret = useCallback(
+    async ({ key, service }: { key: string; service?: string }) => {
+      const normalizedService = normalizeService(service);
+      const query = buildQuery({ service: normalizedService });
+      const response = await fetch(buildBackendUrl(`/api/keyring/${encodeURIComponent(key)}${query}`), {
+        method: 'DELETE'
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.message ?? 'Unable to remove secret');
+      }
+      pushEvent(makeEvent(`Removed secret “${key}”.`, 'warning'));
+      await refresh(payload.service ?? normalizedService);
+    },
+    [pushEvent, refresh]
+  );
+
+  const switchService = useCallback(
+    async (service: string) => {
+      const normalizedService = normalizeService(service);
+      if (!normalizedService) {
+        throw new Error('Unsupported backend. Use system, file, or memory.');
+      }
+      const response = await fetch(buildBackendUrl('/api/keyring/switch'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ service: normalizedService })
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.message ?? 'Unable to switch keyring service');
+      }
+      pushEvent(
+        makeEvent(`Switched active keyring service to “${payload.service ?? normalizedService}”.`, 'success')
+      );
+      await refresh(payload.service ?? normalizedService);
+    },
+    [pushEvent, refresh]
+  );
+
+  const value = useMemo(
+    () => ({ summary, loading, error, history, refresh, createSecret, revealSecret, removeSecret, switchService }),
+    [summary, loading, error, history, refresh, createSecret, revealSecret, removeSecret, switchService]
+  );
+
+  return <KeyringContext.Provider value={value}>{children}</KeyringContext.Provider>;
+};
+
+export const useKeyring = () => {
+  const context = useContext(KeyringContext);
+  if (!context) {
+    throw new Error('useKeyring must be used within a KeyringProvider');
+  }
+  return context;
+};

package/renderer/src/context/SafeContext.tsx

@@ -0,0 +1,49 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction
+} from 'react';
+
+export interface SafeDelegate {
+  address: string;
+  label: string;
+  since: string;
+}
+
+export interface SafeState {
+  address: string;
+  threshold: number;
+  owners: string[];
+  modules: string[];
+  rpcUrl: string;
+  delegates?: SafeDelegate[];
+  fallbackHandler?: string;
+  guard?: string;
+  network?: string;
+  balance?: string;
+}
+
+interface SafeContextValue {
+  currentSafe?: SafeState;
+  setCurrentSafe: Dispatch<SetStateAction<SafeState | undefined>>;
+}
+
+const SafeContext = createContext<SafeContextValue | undefined>(undefined);
+
+export const SafeProvider = ({ children }: { children: ReactNode }) => {
+  const [currentSafe, setCurrentSafe] = useState<SafeState | undefined>();
+  const value = useMemo(() => ({ currentSafe, setCurrentSafe }), [currentSafe]);
+  return <SafeContext.Provider value={value}>{children}</SafeContext.Provider>;
+};
+
+export const useSafe = () => {
+  const ctx = useContext(SafeContext);
+  if (!ctx) {
+    throw new Error('useSafe must be used within SafeProvider');
+  }
+  return ctx;
+};

package/renderer/src/context/ThemeContext.tsx

@@ -0,0 +1,60 @@
+import { createContext, useContext, useEffect, useMemo, useState, useCallback } from 'react';
+import type { ReactNode } from 'react';
+
+type Theme = 'dark' | 'light';
+
+type ThemeContextValue = {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+const THEME_STORAGE_KEY = 'gnoman:ui-theme';
+
+const getInitialTheme = (): Theme => {
+  if (typeof window === 'undefined') {
+    return 'dark';
+  }
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY) as Theme | null;
+  if (stored === 'light' || stored === 'dark') {
+    return stored;
+  }
+  const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+  return prefersDark ? 'dark' : 'light';
+};
+
+type ThemeProviderProps = { children: ReactNode };
+
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const [theme, setThemeState] = useState<Theme>(getInitialTheme);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+    window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+  }, [theme]);
+
+  const setTheme = useCallback((next: Theme) => {
+    setThemeState(next);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  const value = useMemo(() => ({ theme, toggleTheme, setTheme }), [theme, toggleTheme, setTheme]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

package/renderer/src/context/WalletContext.tsx

@@ -0,0 +1,50 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { buildBackendUrl, onBackendBaseUrlChange } from '../utils/backend';
+
+export interface WalletMetadata {
+  address: string;
+  alias?: string;
+  hidden: boolean;
+  createdAt: string;
+  source?: string;
+  network?: string;
+  balance?: string;
+}
+
+interface WalletContextValue {
+  wallets: WalletMetadata[];
+  refresh: () => Promise<void>;
+}
+
+const WalletContext = createContext<WalletContextValue | undefined>(undefined);
+
+export const WalletProvider = ({ children }: { children: ReactNode }) => {
+  const [wallets, setWallets] = useState<WalletMetadata[]>([]);
+
+  const refresh = useCallback(async () => {
+    const response = await fetch(buildBackendUrl('/api/wallets'));
+    if (!response.ok) {
+      throw new Error('Unable to load wallets');
+    }
+    const data = (await response.json()) as WalletMetadata[];
+    setWallets(data);
+  }, []);
+
+  useEffect(() => {
+    refresh().catch((error) => console.error(error));
+  }, [refresh]);
+
+  useEffect(() => onBackendBaseUrlChange(() => refresh().catch((error) => console.error(error))), [refresh]);
+
+  const value = useMemo(() => ({ wallets, refresh }), [wallets]);
+
+  return <WalletContext.Provider value={value}>{children}</WalletContext.Provider>;
+};
+
+export const useWallets = () => {
+  const ctx = useContext(WalletContext);
+  if (!ctx) {
+    throw new Error('useWallets must be used within WalletProvider');
+  }
+  return ctx;
+};

package/renderer/src/context/main.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
+import App from '../App';
+import { ThemeProvider } from './ThemeContext';
+import './styles.css';
+
+const Router = import.meta.env.DEV ? BrowserRouter : HashRouter;
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <Router>
+        <App />
+      </Router>
+    </ThemeProvider>
+  </React.StrictMode>
+);

package/renderer/src/main.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
+import App from './App';
+import { ThemeProvider } from './context/ThemeContext';
+import './styles.css';
+
+const Router = import.meta.env.DEV ? BrowserRouter : HashRouter;
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <ThemeProvider>
+      <Router>
+        <App />
+      </Router>
+    </ThemeProvider>
+  </React.StrictMode>
+);