@agentprojectcontext/apx 1.24.0 → 1.27.1

package/src/interfaces/web/src/lib/api/sessions.ts

@@ -0,0 +1,16 @@
+import { http } from "../http";
+
+export interface SessionRow {
+  engine: string;
+  id: string;
+  title: string;
+  mtime: number;
+  cwd: string;
+  path: string | null;
+}
+
+export const Sessions = {
+  // Cross-engine sessions (apx · claude · codex), newest first.
+  global: (engine?: string) =>
+    http.get<{ sessions: SessionRow[] }>(`/sessions${engine ? `?engine=${encodeURIComponent(engine)}` : ""}`),
+};

package/src/interfaces/web/src/lib/api/super_agent.ts

@@ -0,0 +1,29 @@
+import { http, streamNdjson } from "../http";
+import type { ChatStreamEvent, ConversationMessage } from "../../types/daemon";
+
+export interface SuperAgentSendBody {
+  prompt: string;
+  previousMessages?: ConversationMessage[];
+  model?: string;
+  // Surface that originated this turn, so the daemon injects the matching
+  // channels/*.md block. "web" = big chat (full tools), "web_sidebar" = quick
+  // chat (lightweight). Omitted → daemon defaults to "api".
+  channel?: "web" | "web_sidebar";
+}
+
+export const SuperAgent = {
+  send: (pid: string | number, body: SuperAgentSendBody) =>
+    http.post<{ text: string; usage?: unknown; name?: string }>(
+      `/projects/${pid}/super-agent/chat`,
+      body,
+    ),
+  stream: (
+    pid: string | number,
+    body: SuperAgentSendBody,
+    onEvent: (ev: ChatStreamEvent) => void,
+    signal?: AbortSignal,
+  ) => streamNdjson<ChatStreamEvent>(`/projects/${pid}/super-agent/chat/stream`, body, onEvent, signal),
+
+  summarize: (body: { prompt: string; context_note?: string; model?: string }) =>
+    http.post<{ text: string; usage?: unknown; name?: string }>("/super-agent/summarize", body),
+};

package/src/interfaces/web/src/lib/api/tasks.ts

@@ -0,0 +1,19 @@
+import { http } from "../http";
+import type { TaskEntry } from "../../types/daemon";
+
+export interface GlobalTaskEntry extends TaskEntry {
+  project_id: number;
+  project_name: string;
+}
+
+export const Tasks = {
+  list:   (pid: string, state: TaskEntry["state"] | "all" = "open") =>
+    http.get<TaskEntry[]>(`/projects/${pid}/tasks?state=${state}`),
+  global: (state: TaskEntry["state"] | "all" = "open") =>
+    http.get<GlobalTaskEntry[]>(`/tasks?state=${state}`),
+  add:    (pid: string, body: Partial<TaskEntry>) =>
+    http.post<TaskEntry>(`/projects/${pid}/tasks`, body),
+  done:   (pid: string, id: string) => http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/done`),
+  drop:   (pid: string, id: string) => http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/drop`),
+  reopen: (pid: string, id: string) => http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/reopen`),
+};

package/src/interfaces/web/src/lib/api/telegram.ts

@@ -0,0 +1,57 @@
+import { http } from "../http";
+import type {
+  TelegramChannel,
+  TelegramChannelsResponse,
+  TelegramContact,
+  TelegramContactsResponse,
+  TelegramRole,
+} from "../../types/daemon";
+
+export interface TelegramStatus {
+  enabled: boolean;
+  channels?: number;
+  last_update_id?: number;
+}
+
+export interface TelegramSendBody {
+  text: string;
+  chat_id?: string;
+  channel?: string;
+}
+
+export const Telegram = {
+  channels: {
+    list:   () => http.get<TelegramChannelsResponse>("/telegram/channels"),
+    upsert: (ch: TelegramChannel) =>
+      http.post<{ channel: TelegramChannel; created: boolean }>("/telegram/channels", ch),
+    patch:  (name: string, body: Partial<TelegramChannel>) =>
+      http.patch<{ ok: true; channel: TelegramChannel }>(`/telegram/channels/${name}`, body),
+    remove: (name: string) =>
+      http.del<void>(`/telegram/channels/${encodeURIComponent(name)}`),
+  },
+  contacts: {
+    list:   () => http.get<TelegramContactsResponse>("/telegram/contacts"),
+    patch:  (userId: number | string, body: Partial<TelegramContact>) =>
+      http.patch<{ ok: true; contact: TelegramContact }>(
+        `/telegram/contacts/${encodeURIComponent(String(userId))}`,
+        body,
+      ),
+    remove: (userId: number | string) =>
+      http.del<void>(`/telegram/contacts/${encodeURIComponent(String(userId))}`),
+  },
+  roles: {
+    list:   () => http.get<{ roles: Record<string, TelegramRole> }>("/telegram/roles"),
+    set:    (name: string, tools: "*" | string[]) =>
+      http.put<{ ok: true; name: string; role: TelegramRole }>(
+        `/telegram/roles/${encodeURIComponent(name)}`,
+        { tools },
+      ),
+    remove: (name: string) =>
+      http.del<void>(`/telegram/roles/${encodeURIComponent(name)}`),
+  },
+  status: () => http.get<TelegramStatus>("/telegram/status"),
+  start:  () => http.post<{ ok: true; status: TelegramStatus }>("/telegram/start"),
+  stop:   () => http.post<{ ok: true; status: TelegramStatus }>("/telegram/stop"),
+  send:   (body: TelegramSendBody) =>
+    http.post<{ ok: true; message_id: number }>("/telegram/send", body),
+};

package/src/interfaces/web/src/lib/api/tools.ts

@@ -0,0 +1,13 @@
+import { http } from "../http";
+
+export interface ToolInfo {
+  name: string;
+  description?: string;
+  category?: string;
+  endpoint?: string;
+}
+
+export const Tools = {
+  // Registry of built-in tools the daemon exposes.
+  list: () => http.get<ToolInfo[]>("/tools"),
+};

package/src/interfaces/web/src/lib/api/voice.ts

@@ -0,0 +1,169 @@
+import { http, getToken } from "../http";
+
+// Voice / TTS / STT client. Talks to the daemon's /voice, /tts and /transcribe
+// surfaces (see src/host/daemon/api/{voice,tts,transcribe}.js + the engine
+// registry at src/core/voice/engines/index.js).
+//
+// TTS engine ids (preference order, "auto" picks the first available):
+//   piper → elevenlabs → openai → gemini → mock
+//
+// Per-engine config lives under config.voice.tts.<id>; the default provider is
+// config.voice.tts.provider. STT config lives under config.transcription.
+
+// ── TTS provider catalog (GET /tts/providers) ──────────────────────────────
+
+export type TtsProviderId = "piper" | "elevenlabs" | "openai" | "gemini" | "mock";
+
+export type TtsMode = "chain" | "single";
+
+/** One engine entry as reported by /tts/providers. */
+export interface TtsEngineInfo {
+  id: string;
+  available: boolean;   // probe says it can synthesize right now
+  configured: boolean;  // has a non-empty voice.tts.<id> config block
+  enabled: boolean;     // included in the fallback chain (voice.tts.<id>.enabled)
+}
+
+export interface TtsProvidersResponse {
+  configured_provider: string; // "auto" | <engine id> (the single-mode default)
+  mode: TtsMode;               // "chain" (router) | "single" (only the default)
+  order: string[];             // effective chain order (custom + defaults)
+  engines: TtsEngineInfo[];
+}
+
+// ── /tts/say + /voice/turn result shapes ────────────────────────────────────
+
+export interface TtsSayResult {
+  audio_path: string;       // absolute path under ~/.apx/tmp/tts
+  duration_s: number | null;
+  mime: string | null;
+  provider: string;         // engine that actually synthesized
+}
+
+export interface VoiceTurnResult {
+  user_text: string;
+  reply_text: string;
+  reply_audio_path: string | null;
+  reply_duration_s?: number | null;
+  reply_mime?: string | null;
+  provider: string | null;
+  tts_error?: string;
+  empty?: boolean;
+}
+
+// ── Config shapes (config.voice.tts.* / config.transcription.*) ─────────────
+// These mirror the engine adapters. Kept local to the Voices module (per the
+// task: shared types live here, not in types/daemon.ts).
+
+export interface PiperConfig {
+  bin?: string;
+  model?: string;       // abs path to <voice>.onnx
+  speaker?: string | number;
+  extra_args?: string[];
+}
+export interface ElevenLabsConfig {
+  api_key?: string;
+  model?: string;       // eleven_multilingual_v2
+  voice_id?: string;
+  output_format?: string;
+}
+export interface OpenAiTtsConfig {
+  api_key?: string;
+  model?: string;       // tts-1 | tts-1-hd
+  voice?: string;       // alloy | echo | fable | onyx | nova | shimmer
+  format?: string;      // mp3 | opus | aac | flac | wav
+}
+export interface GeminiTtsConfig {
+  api_key?: string;
+  model?: string;       // gemini-2.5-flash-preview-tts
+  voice?: string;       // e.g. Kore
+  style?: string;       // natural-language speaking-style instruction
+  enabled?: boolean;
+}
+
+export interface VoiceTtsConfig {
+  provider?: string;    // "auto" | engine id (single-mode default)
+  mode?: TtsMode;       // "chain" | "single"
+  order?: string[];     // custom engine order for chain mode
+  piper?: PiperConfig;
+  elevenlabs?: ElevenLabsConfig;
+  openai?: OpenAiTtsConfig;
+  gemini?: GeminiTtsConfig;
+}
+
+export interface TranscriptionLocalConfig {
+  model?: string;        // tiny | base | small | medium | large | large-v2 | large-v3
+  device?: string;       // cpu | cuda
+  compute_type?: string; // int8 | int8_float16 | float16 | float32
+  language?: string;     // ISO code or "auto"
+  beam_size?: number;
+  idle_minutes?: number;
+}
+export interface TranscriptionConfig {
+  provider?: string;     // "auto" | "local" | "openai"
+  local?: TranscriptionLocalConfig;
+}
+
+// Known engine voice presets used to fill selects without a daemon round-trip.
+export const OPENAI_TTS_VOICES = ["alloy", "echo", "fable", "onyx", "nova", "shimmer"];
+export const GEMINI_TTS_VOICES = ["Kore", "Puck", "Charon", "Fenrir", "Aoede"];
+export const ELEVENLABS_MODELS = ["eleven_multilingual_v2", "eleven_turbo_v2_5", "eleven_flash_v2_5"];
+export const OPENAI_TTS_MODELS = ["tts-1", "tts-1-hd"];
+export const WHISPER_MODELS = ["tiny", "base", "small", "medium", "large-v2", "large-v3"];
+
+// Friendly labels + ordering for the provider list. The daemon is the source
+// of truth for availability; this only adds display names + a stable order.
+export const TTS_PROVIDER_META: Record<string, { name: string; note: string; local?: boolean }> = {
+  piper:      { name: "Piper",       note: "Local, offline (CLI + modelo .onnx). Sin API key.", local: true },
+  elevenlabs: { name: "ElevenLabs",  note: "Cloud, multilingüe. Requiere API key." },
+  openai:     { name: "OpenAI",      note: "Cloud (tts-1 / tts-1-hd). Usa la key de OpenAI." },
+  gemini:     { name: "Gemini",      note: "Cloud (preview). Usa la key de Gemini." },
+  mock:       { name: "Mock",        note: "Silencio de prueba. Fallback siempre disponible.", local: true },
+};
+
+export const TTS_PROVIDER_ORDER: TtsProviderId[] = ["piper", "elevenlabs", "openai", "gemini", "mock"];
+
+/**
+ * Build an authenticated blob URL for a TTS audio file produced by /tts/say
+ * or /voice/turn. The daemon sandboxes /voice/tts to ~/.apx/tmp/tts, so the
+ * caller just passes the absolute audio_path it got back.
+ */
+export async function fetchTtsAudioUrl(audioPath: string): Promise<string> {
+  const token = getToken();
+  const res = await fetch(`/voice/tts?path=${encodeURIComponent(audioPath)}`, {
+    headers: token ? { authorization: `Bearer ${token}` } : {},
+  });
+  if (!res.ok) {
+    const detail = await res.text().catch(() => "");
+    throw new Error(`No se pudo leer el audio (${res.status}): ${detail.slice(0, 160)}`);
+  }
+  const blob = await res.blob();
+  return URL.createObjectURL(blob);
+}
+
+export const Voice = {
+  /** List TTS engines + availability + the configured default provider. */
+  providers: () => http.get<TtsProvidersResponse>("/tts/providers"),
+
+  /**
+   * Synthesize speech. Returns the audio file path (server-side); the web
+   * fetches it via fetchTtsAudioUrl() to play it in the browser. `no_play`
+   * is irrelevant for the web (the daemon never plays for HTTP callers).
+   */
+  say: (body: { text: string; provider?: string; voice?: string; language?: string; format?: string; style?: string }) =>
+    http.post<TtsSayResult>("/tts/say", body),
+
+  /**
+   * One bidirectional voice turn (STT → agent → TTS). The web uses the
+   * text-only path (pass `text`) to test the full reply pipeline without a mic.
+   */
+  turn: (body: {
+    text?: string;
+    audio?: string;
+    format?: string;
+    channel?: string;
+    provider?: string;
+    voice?: string;
+    language?: string;
+  }) => http.post<VoiceTurnResult>("/voice/turn", body),
+};

package/src/interfaces/web/src/lib/api.ts

@@ -0,0 +1,48 @@
+// Backwards-compatible umbrella for existing imports. New code should
+// pull from src/lib/api/<domain>.ts directly via the named re-exports below.
+export { setToken, getToken, http, streamNdjson, HttpError } from "./http";
+
+export * from "./api/health";
+export * from "./api/projects";
+export * from "./api/agents";
+export * from "./api/conversations";
+export * from "./api/routines";
+export * from "./api/tasks";
+export * from "./api/mcps";
+export * from "./api/messages";
+export * from "./api/sessions";
+export * from "./api/tools";
+export * from "./api/telegram";
+export * from "./api/engines";
+export * from "./api/admin";
+export * from "./api/identity";
+export * from "./api/super_agent";
+export * from "./api/filesystem";
+export * from "./api/voice";
+export * from "./api/deck";
+export * from "./api/code";
+
+// Re-export the daemon types so older imports of "../lib/api" still work.
+export type {
+  ProjectKind,
+  ProjectEntry,
+  AgentEntry,
+  AgentDetail,
+  RoutineEntry,
+  TaskEntry,
+  McpEntry,
+  MessageEntry,
+  TelegramChannel,
+  TelegramChannelsResponse,
+  EngineSummary,
+  HealthSummary,
+  ConversationListEntry,
+  ConversationDetail,
+  ConversationMessage,
+  PairedClient,
+  ProjectConfig,
+  Identity,
+  SuperAgentConfig,
+  GlobalConfig,
+  ChatStreamEvent,
+} from "../types/daemon";

package/src/interfaces/web/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import clsx, { type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/interfaces/web/src/lib/code-context.ts

@@ -0,0 +1,83 @@
+// Context metrics + breakdown for the Code module's Context tab.
+//
+// Real token totals come from the last assistant turn's `usage` (emitted by the
+// super-agent's `final` event). The per-category breakdown is a char/4 estimate
+// (ported from OpenCode's session-context-breakdown) — good enough to visualise
+// where the conversation's weight sits (user vs assistant vs tool I/O).
+import type { CodeTurn } from "./api/code";
+
+const estTokens = (s: string): number => (s ? Math.ceil(s.length / 4) : 0);
+
+function turnText(turn: CodeTurn, kinds: { text?: boolean; tool?: boolean }): number {
+  let chars = 0;
+  for (const p of turn.parts || []) {
+    if (p.kind === "text" && kinds.text) chars += p.text.length;
+    if (p.kind === "tool" && kinds.tool) {
+      if (p.args) chars += JSON.stringify(p.args).length;
+      if (p.result !== undefined) chars += JSON.stringify(p.result).length;
+    }
+  }
+  return Math.ceil(chars / 4);
+}
+
+export interface CtxMetrics {
+  model: string | null;
+  input: number;
+  output: number;
+  total: number;
+  hasUsage: boolean;
+  messages: number;
+  userMsgs: number;
+  assistantMsgs: number;
+}
+
+export function computeMetrics(turns: CodeTurn[]): CtxMetrics {
+  let lastUsage: { input?: number; output?: number; model?: string | null } | null = null;
+  let userMsgs = 0;
+  let assistantMsgs = 0;
+  for (const t of turns) {
+    if (t.role === "user") userMsgs++;
+    else assistantMsgs++;
+    if (t.role === "assistant" && t.usage) {
+      lastUsage = { input: t.usage.input_tokens, output: t.usage.output_tokens, model: t.model };
+    }
+  }
+  const input = lastUsage?.input ?? 0;
+  const output = lastUsage?.output ?? 0;
+  return {
+    model: lastUsage?.model ?? null,
+    input,
+    output,
+    total: input + output,
+    hasUsage: !!lastUsage,
+    messages: turns.length,
+    userMsgs,
+    assistantMsgs,
+  };
+}
+
+export interface CtxSegment {
+  key: "user" | "assistant" | "tool";
+  tokens: number;
+  percent: number;
+}
+
+export function computeBreakdown(turns: CodeTurn[]): CtxSegment[] {
+  let user = 0;
+  let assistant = 0;
+  let tool = 0;
+  for (const t of turns) {
+    if (t.role === "user") user += turnText(t, { text: true });
+    else assistant += turnText(t, { text: true });
+    tool += turnText(t, { tool: true });
+  }
+  const total = user + assistant + tool || 1;
+  const seg = (key: CtxSegment["key"], tokens: number): CtxSegment => ({
+    key,
+    tokens,
+    percent: Math.round((tokens / total) * 100),
+  });
+  return [seg("user", user), seg("assistant", assistant), seg("tool", tool)].filter(
+    (s) => s.tokens > 0,
+  );
+}

package/src/interfaces/web/src/lib/config-values.ts

@@ -0,0 +1,29 @@
+export function getDotted(source: Record<string, unknown> | undefined, path: string): unknown {
+  let current: unknown = source;
+  for (const part of path.split(".")) {
+    if (!current || typeof current !== "object" || Array.isArray(current)) return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}
+
+export function flattenObject(source: Record<string, unknown>, prefix = ""): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(source)) {
+    const nextKey = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      Object.assign(out, flattenObject(value as Record<string, unknown>, nextKey));
+    } else {
+      out[nextKey] = value;
+    }
+  }
+  return out;
+}
+
+export function parseConfigJson(text: string): Record<string, unknown> {
+  const parsed = JSON.parse(text);
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error("JSON debe ser objeto.");
+  }
+  return parsed as Record<string, unknown>;
+}

package/src/interfaces/web/src/lib/device.ts

@@ -0,0 +1,10 @@
+// Best-effort human label for the current device, used when pairing a browser.
+export function deviceLabel(): string {
+  const ua = navigator.userAgent;
+  if (/iPhone|iPad/.test(ua)) return "iPhone";
+  if (/Android/.test(ua)) return "Android";
+  if (/Mac/.test(ua)) return "Mac";
+  if (/Windows/.test(ua)) return "Windows PC";
+  if (/Linux/.test(ua)) return "Linux";
+  return "browser";
+}

package/src/interfaces/web/src/lib/http.ts

@@ -0,0 +1,104 @@
+// Typed HTTP client against the APX daemon. All requests carry the bearer
+// token loaded once on first paint (see useTokenBootstrap). Same-origin:
+// when the daemon serves the SPA, requests land on the same port; in
+// `vite dev` the proxy redirects to 7430.
+
+let token: string | null = null;
+
+export function setToken(t: string | null) { token = t; }
+export function getToken(): string | null  { return token; }
+
+type Method = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+
+export class HttpError extends Error {
+  status: number;
+  body: unknown;
+  constructor(status: number, message: string, body?: unknown) {
+    super(message);
+    this.status = status;
+    this.body = body;
+  }
+}
+
+async function request<T>(
+  method: Method,
+  path: string,
+  body?: unknown,
+  init: RequestInit = {}
+): Promise<T> {
+  const headers: Record<string, string> = {
+    "content-type": "application/json",
+    ...(token ? { authorization: `Bearer ${token}` } : {}),
+    ...((init.headers as Record<string, string>) || {}),
+  };
+  const res = await fetch(path, {
+    ...init,
+    method,
+    headers,
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) {
+    let detail = "";
+    let parsed: unknown = null;
+    try {
+      parsed = await res.json();
+      detail = (parsed as { error?: string })?.error || JSON.stringify(parsed);
+    } catch {
+      detail = await res.text();
+    }
+    throw new HttpError(res.status, `${method} ${path} → ${res.status}: ${detail}`, parsed);
+  }
+  if (res.status === 204) return undefined as T;
+  return (await res.json()) as T;
+}
+
+export const http = {
+  get:   <T>(p: string)              => request<T>("GET", p),
+  post:  <T>(p: string, b?: unknown) => request<T>("POST", p, b),
+  put:   <T>(p: string, b?: unknown) => request<T>("PUT", p, b),
+  patch: <T>(p: string, b?: unknown) => request<T>("PATCH", p, b),
+  del:   <T>(p: string)              => request<T>("DELETE", p),
+};
+
+/** NDJSON streaming helper — one line per event. */
+export async function streamNdjson<E = unknown>(
+  path: string,
+  body: unknown,
+  onEvent: (ev: E) => void,
+  signal?: AbortSignal
+): Promise<void> {
+  const res = await fetch(path, {
+    method: "POST",
+    signal,
+    headers: {
+      "content-type": "application/json",
+      ...(token ? { authorization: `Bearer ${token}` } : {}),
+    },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok || !res.body) {
+    const text = await res.text().catch(() => "");
+    throw new HttpError(res.status, `POST ${path} → ${res.status}: ${text || "stream failed"}`);
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder("utf-8");
+  let buf = "";
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    let i = buf.indexOf("\n");
+    while (i >= 0) {
+      const line = buf.slice(0, i).trim();
+      buf = buf.slice(i + 1);
+      if (line) {
+        try { onEvent(JSON.parse(line) as E); }
+        catch { /* ignore malformed line */ }
+      }
+      i = buf.indexOf("\n");
+    }
+  }
+  if (buf.trim()) {
+    try { onEvent(JSON.parse(buf.trim()) as E); } catch { /* ignore */ }
+  }
+}

package/src/interfaces/web/src/lib/secrets.ts

@@ -0,0 +1,15 @@
+export function isSecretMarker(value: unknown): value is string {
+  return typeof value === "string" && value.startsWith("*** set ***");
+}
+
+export function secretHint(value: unknown, fallback = "(no seteada)") {
+  return isSecretMarker(value) ? value : fallback;
+}
+
+// The daemon redacts secrets as "*** set *** (...XXXXX)". Pull out the XXXXX
+// suffix so the UI can show "…XXXXX" without ever holding the real secret.
+export function secretSuffix(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const m = value.match(/\(\.\.\.([^)]+)\)/);
+  return m ? m[1] : null;
+}

package/src/interfaces/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/interfaces/web/src/main.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import "./styles.css";
+import { App } from "./App";
+import { ThemeProvider } from "./hooks/useTheme";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);