@eventmodelers/cli 0.0.1

package/stacks/cratis-csharp/templates/build-kit/lib/ralph.js

@@ -0,0 +1,302 @@
+// Common runtime for the ralph loop + realtime agent.
+// Not meant to be run directly — use ralph-claude.js or ralph-ollama.js.
+//
+// startRalph({ kitDir, projectDir, onTask, onPlannedSlice })
+//   onTask(prompt) — called when tasks.json has entries
+//   onPlannedSlice(prompt) — called when .slices/ has a "Planned" entry (omit to skip)
+
+import { createClient } from '@supabase/supabase-js';
+import { readFileSync, mkdirSync, writeFileSync, existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { randomUUID } from 'crypto';
+
+// ── HTTP helpers ──────────────────────────────────────────────────────────────
+
+class HttpError extends Error {
+  constructor(status, body) {
+    super(`HTTP ${status}: ${body}`);
+    this.status = status;
+  }
+}
+
+async function fetchJSON(url, options) {
+  const res = await fetch(url, options);
+  if (!res.ok) throw new HttpError(res.status, await res.text());
+  return res.json();
+}
+
+async function retryOn401(label, fn, maxRetries = 3) {
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (err) {
+      if (err instanceof HttpError && err.status === 401) {
+        if (attempt < maxRetries) {
+          console.warn(`[agent] ${label} — 401, retrying (${attempt}/${maxRetries})...`);
+          continue;
+        }
+        console.error(`[agent] ${label} — 401 after ${maxRetries} retries, shutting down`);
+        process.exit(1);
+      }
+      throw err;
+    }
+  }
+}
+
+// ── Config ────────────────────────────────────────────────────────────────────
+
+function loadLocalConfig(kitDir) {
+  const configPath = join(kitDir, '.eventmodelers', 'config.json');
+  if (!existsSync(configPath)) {
+    console.warn(`[ralph] Note: no .eventmodelers/config.json found — platform sync disabled.`);
+    console.warn(`        To enable board sync, follow: https://app.eventmodelers.ai/documentation#build-cratis-csharp`);
+    console.warn(`        Code generation from local slice definitions will still run.`);
+    return {};
+  }
+  const cfg = JSON.parse(readFileSync(configPath, 'utf-8'));
+  if (process.env.BASE_URL) cfg.baseUrl = process.env.BASE_URL;
+  return cfg;
+}
+
+function hasCredentials(cfg) {
+  return !!(cfg.token && cfg.organizationId && cfg.boardId && cfg.baseUrl);
+}
+
+async function fetchPlatformConfig(local) {
+  const remote = await fetchJSON(`${local.baseUrl}/api/config`, {
+    headers: { 'x-token': local.token },
+  });
+  return { ...local, ...remote };
+}
+
+// ── Realtime agent ────────────────────────────────────────────────────────────
+
+async function getRealtimeToken(cfg) {
+  const { token } = await fetchJSON(
+    `${cfg.baseUrl}/api/org/${cfg.organizationId}/prompts/realtime-token`,
+    { headers: { 'x-token': cfg.token } },
+  );
+  return token;
+}
+
+function slugify(str) {
+  return str.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
+}
+
+async function fetchAndPersistSlices(cfg, kitDir) {
+  const url = `${cfg.baseUrl}/api/org/${cfg.organizationId}/boards/${cfg.boardId}/slicedata/slices`;
+  const { slices } = await fetchJSON(url, {
+    headers: { 'x-token': cfg.token, 'x-board-id': cfg.boardId },
+  });
+  const slicesDir = join(kitDir, '.slices');
+  mkdirSync(slicesDir, { recursive: true });
+
+  // Group by context slug
+  const contexts = {};
+  for (const slice of slices) {
+    const contextSlug = slice.contextName ? slugify(slice.contextName) : 'default';
+    if (!contexts[contextSlug]) contexts[contextSlug] = { name: slice.contextName || 'default', slices: [] };
+    contexts[contextSlug].slices.push(slice);
+  }
+
+  // Write current_context.json pointing to the context with planned work (or first)
+  const ctxPath = join(slicesDir, 'current_context.json');
+  const plannedCtx = Object.keys(contexts).find(c => contexts[c].slices.some(s => (s.status || '').toLowerCase() === 'planned'));
+  const activeCtx = plannedCtx || Object.keys(contexts)[0] || 'default';
+  writeFileSync(ctxPath, JSON.stringify({ name: activeCtx }, null, 2), 'utf-8');
+
+  // Write per-context index.json and per-slice slice.json
+  for (const [contextSlug, { slices: ctxSlices }] of Object.entries(contexts)) {
+    const contextDir = join(slicesDir, contextSlug);
+    mkdirSync(contextDir, { recursive: true });
+
+    const indexSlices = ctxSlices.map((s, i) => {
+      const folder = (s.title ?? s.id).replaceAll(' ', '').toLowerCase();
+      return {
+        id: s.id,
+        slice: s.title,
+        index: i,
+        contextName: s.contextName || contextSlug,
+        contextSlug,
+        folder,
+        status: s.status,
+        definition: { id: s.id, title: s.title, status: s.status },
+      };
+    });
+    writeFileSync(join(contextDir, 'index.json'), JSON.stringify({ slices: indexSlices }, null, 2), 'utf-8');
+
+    for (const slice of ctxSlices) {
+      const folder = (slice.title ?? slice.id).replaceAll(' ', '').toLowerCase();
+      const sliceDir = join(contextDir, folder);
+      mkdirSync(sliceDir, { recursive: true });
+      writeFileSync(join(sliceDir, 'slice.json'), JSON.stringify(slice, null, 2), 'utf-8');
+    }
+  }
+
+  console.log(`[agent] Persisted ${slices.length} slice(s)`);
+}
+
+async function writeTask(payload, kitDir) {
+  const tasksPath = join(kitDir, 'tasks.json');
+  const existing = existsSync(tasksPath) ? JSON.parse(readFileSync(tasksPath, 'utf-8')) : [];
+  const filtered = existing.filter(t => t.payload?.sliceId !== payload.sliceId);
+  const task = { id: randomUUID(), createdAt: new Date().toISOString(), payload };
+  filtered.push(task);
+  writeFileSync(tasksPath, JSON.stringify(filtered, null, 2), 'utf-8');
+  console.log(`[agent] Task written — slice="${payload.sliceTitle}" status="${payload.sliceStatus}"`);
+}
+
+async function startRealtimeAgent(cfg, kitDir) {
+  let realtimeToken = await retryOn401('getRealtimeToken', () => getRealtimeToken(cfg));
+
+  await retryOn401('fetchAndPersistSlices', () => fetchAndPersistSlices(cfg, kitDir)).catch((err) =>
+    console.error('[agent] Initial slice fetch error:', err),
+  );
+
+  const supabase = createClient(cfg.supabaseUrl, cfg.supabaseAnonKey, {
+    realtime: { params: { apikey: cfg.supabaseAnonKey } },
+  });
+  await supabase.realtime.setAuth(realtimeToken);
+
+  const channelName = `board:${cfg.boardId}-slicechanged`;
+
+  supabase
+    .channel(channelName, { config: { private: true } })
+    .on('broadcast', { event: 'message' }, (msg) => {
+      if (msg.payload === 'Exit') {
+        console.log('[agent] Received "Exit" — shutting down');
+        process.exit(0);
+      }
+    })
+    .on('broadcast', { event: 'slice:changed' }, async (msg) => {
+      const payload = msg.payload;
+      console.log(`[agent] slice:changed — slice="${payload.sliceTitle}" status="${payload.sliceStatus}"`);
+      await retryOn401('fetchAndPersistSlices', () => fetchAndPersistSlices(cfg, kitDir)).catch((err) =>
+        console.error('[agent] Slice persist error:', err),
+      );
+      // Planned slices are handled by onPlannedSlice directly — no task needed
+      if ((payload.sliceStatus || '').toLowerCase() !== 'planned') {
+        await writeTask(payload, kitDir).catch((err) => console.error('[agent] writeTask error:', err));
+      }
+    })
+    .subscribe((status) => console.log(`[agent] Channel "${channelName}": ${status}`));
+
+  setInterval(async () => {
+    try {
+      realtimeToken = await retryOn401('getRealtimeToken (refresh)', () => getRealtimeToken(cfg));
+      supabase.realtime.setAuth(realtimeToken);
+      console.log('[agent] Token refreshed');
+    } catch (err) {
+      console.error('[agent] Token refresh failed:', err);
+    }
+  }, 10 * 60 * 1000);
+
+  const ping = async () => {
+    try {
+      const res = await fetch(`${cfg.baseUrl}/api/agent-alive`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${realtimeToken}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token: cfg.token }),
+      });
+      if (!res.ok) console.error(`[agent] Ping failed: ${res.status}`);
+    } catch (err) {
+      console.error('[agent] Ping error:', err);
+    }
+  };
+  await ping();
+  setInterval(ping, 30_000);
+}
+
+// ── Ralph loop ────────────────────────────────────────────────────────────────
+
+function hasPendingTasks(kitDir) {
+  const tasksPath = join(kitDir, 'tasks.json');
+  if (!existsSync(tasksPath)) return false;
+  try {
+    const tasks = JSON.parse(readFileSync(tasksPath, 'utf-8'));
+    return Array.isArray(tasks) && tasks.length > 0;
+  } catch {
+    return false;
+  }
+}
+
+function getFirstPlannedSliceTitle(kitDir) {
+  const slicesDir = join(kitDir, '.slices');
+  if (!existsSync(slicesDir)) return null;
+  for (const entry of readdirSync(slicesDir)) {
+    const indexPath = join(slicesDir, entry, 'index.json');
+    if (!existsSync(indexPath)) continue;
+    try {
+      const { slices } = JSON.parse(readFileSync(indexPath, 'utf-8'));
+      const planned = slices && slices.find((s) => (s.status || '').toLowerCase() === 'planned');
+      if (planned) return planned.slice || planned.id || null;
+    } catch {}
+  }
+  return null;
+}
+
+async function runWithRetry(label, fn) {
+  while (true) {
+    try {
+      console.log(`[ralph] ${label}`);
+      await fn();
+      return;
+    } catch (err) {
+      console.error(`[ralph] Error — retrying in 60s:`, err.message);
+      await new Promise((r) => setTimeout(r, 60_000));
+    }
+  }
+}
+
+async function ralphLoop(kitDir, cfg, onTask, onPlannedSlice) {
+  const promptFile = join(kitDir, 'lib', 'prompt.md');
+  const backendPromptFile = join(kitDir, 'lib', 'backend-prompt.md');
+  const credentialed = hasCredentials(cfg);
+
+  while (true) {
+    let didWork = false;
+
+    if (credentialed && hasPendingTasks(kitDir)) {
+      const prompt = readFileSync(promptFile, 'utf-8');
+      await runWithRetry('onTask: loading slice from board...', () => onTask(prompt));
+      await fetchAndPersistSlices(cfg, kitDir).catch(() => {});
+      didWork = true;
+    }
+
+    const plannedTitle = onPlannedSlice && getFirstPlannedSliceTitle(kitDir);
+    if (plannedTitle) {
+      const prompt = readFileSync(backendPromptFile, 'utf-8');
+      await runWithRetry(`onPlannedSlice: building slice "${plannedTitle}"...`, () => onPlannedSlice(prompt));
+      console.log(`[ralph] Slice build complete — waiting for next slice`);
+      if (credentialed) await fetchAndPersistSlices(cfg, kitDir).catch(() => {});
+      didWork = true;
+    }
+
+    if (!didWork) await new Promise((r) => setTimeout(r, 10_000));
+  }
+}
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+export { loadLocalConfig, fetchPlatformConfig, retryOn401, startRealtimeAgent };
+
+export async function startRalph({ kitDir, projectDir, onTask, onPlannedSlice }) {
+  const local = loadLocalConfig(kitDir);
+
+  console.log(`Ralph — kit: ${kitDir}`);
+  console.log(`         project: ${projectDir}`);
+
+  if (!hasCredentials(local)) {
+    console.log(`         mode: local-only (no platform sync)\n`);
+    await ralphLoop(kitDir, local, onTask, onPlannedSlice);
+    return;
+  }
+
+  const cfg = await retryOn401('fetchPlatformConfig', () => fetchPlatformConfig(local));
+  console.log(`         org=${cfg.organizationId}, board=${cfg.boardId}, base=${cfg.baseUrl}\n`);
+
+  await Promise.all([
+    startRealtimeAgent(cfg, kitDir),
+    ralphLoop(kitDir, cfg, onTask, onPlannedSlice),
+  ]);
+}

package/stacks/cratis-csharp/templates/build-kit/ralph-claude.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+// Ralph loop + realtime agent using Claude Code as the executor.
+// Usage: node ralph-claude.js [project_dir]
+
+import { startRalph, loadLocalConfig } from './lib/ralph.js';
+import { spawn } from 'child_process';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const kitDir = dirname(fileURLToPath(import.meta.url));
+const projectDir = process.argv[2] ? resolve(process.argv[2]) : resolve(kitDir, '..');
+
+const cfg = loadLocalConfig(kitDir);
+const inlineHeader = cfg.boardId
+  ? `board=${cfg.boardId} token=${cfg.token} org=${cfg.organizationId} baseUrl=${cfg.baseUrl}\n\n`
+  : '';
+
+function runClaude(prompt) {
+  return new Promise((resolve, reject) => {
+    const proc = spawn('claude', ['--dangerously-skip-permissions', '-p', inlineHeader + prompt], {
+      cwd: projectDir,
+      stdio: 'inherit',
+    });
+    proc.on('close', (code) => (code === 0 ? resolve() : reject(new Error(`Claude exited ${code}`))));
+    proc.on('error', reject);
+  });
+}
+
+startRalph({
+  kitDir,
+  projectDir,
+  onTask: runClaude,
+  onPlannedSlice: runClaude,
+}).catch((err) => {
+  console.error('[ralph] Fatal:', err);
+  process.exit(1);
+});

package/stacks/cratis-csharp/templates/build-kit/ralph.sh

@@ -0,0 +1,98 @@
+#!/bin/bash
+# Ralph agent loop — two independent loops, each triggered by their own condition
+#
+# onTask:        tasks.json has entries  → load slice from board, update .build-kit/.slices/
+# onPlannedSlice: .build-kit/.slices/ has a "Planned" slice → build it
+#
+# The loops are NOT causally linked — either can trigger on its own.
+#
+# Usage: ./ralph.sh [iterations] [project_dir]
+#   iterations  — number of loop cycles to run; 0 or omitted means run forever
+#   project_dir — path to the project root; defaults to the parent of .build-kit
+
+set -euo pipefail
+
+KIT_DIR="$(cd "$(dirname "$0")" && pwd)"
+ITERATIONS="${1:-0}"
+PROJECT_DIR="${2:-"$KIT_DIR/.."}"
+TASKS_FILE="$KIT_DIR/tasks.json"
+PROMPT_FILE="$KIT_DIR/lib/prompt.md"
+BACKEND_PROMPT_FILE="$KIT_DIR/lib/backend-prompt.md"
+AGENT_SCRIPT="$KIT_DIR/lib/agent.sh"
+
+HAS_CREDENTIALS=true
+if [[ ! -f "$KIT_DIR/.eventmodelers/config.json" ]]; then
+  echo "[ralph] Note: no .eventmodelers/config.json found — platform sync disabled." >&2
+  echo "        To enable board sync, follow: https://app.eventmodelers.ai/documentation#build-cratis-csharp" >&2
+  echo "        Code generation from local slice definitions will still run." >&2
+  HAS_CREDENTIALS=false
+fi
+
+echo "Ralph — kit: $KIT_DIR  project: $PROJECT_DIR"
+
+# Returns 0 if tasks.json has at least one task
+has_pending_tasks() {
+  [[ -f "$TASKS_FILE" ]] || return 1
+  local content
+  content=$(cat "$TASKS_FILE")
+  [[ "$content" != "[]" && -n "$content" ]]
+}
+
+# Returns 0 if any JSON under .build-kit/.slices/ contains a "Planned" status
+has_planned_slices() {
+  grep -rqi '"status"[[:space:]]*:[[:space:]]*"planned"' "$KIT_DIR/.slices/" --include='index.json' 2>/dev/null
+}
+
+# Returns the title of the first "Planned" slice, or empty string
+get_planned_slice_title() {
+  for index_file in "$KIT_DIR/.slices/"*/index.json; do
+    [[ -f "$index_file" ]] || continue
+    local title
+    title=$(node -e "
+      try {
+        const d = JSON.parse(require('fs').readFileSync(process.argv[1], 'utf-8'));
+        const s = (d.slices||[]).find(s => (s.status||'').toLowerCase() === 'planned');
+        if (s) process.stdout.write(s.slice || s.id || '');
+      } catch(e) {}
+    " "$index_file" 2>/dev/null)
+    if [[ -n "$title" ]]; then
+      echo "$title"
+      return
+    fi
+  done
+}
+
+# Runs agent.sh with the given prompt; retries on non-zero exit
+run_agent() {
+  local label="$1"
+  local prompt="$2"
+  while true; do
+    echo "[$(date -u +%H:%M:%S)] $label"
+    (cd "$PROJECT_DIR" && bash "$AGENT_SCRIPT" "$prompt") 2>&1 && return 0
+    echo "[$(date -u +%H:%M:%S)] Agent error — retrying in 60s..."
+    sleep 60
+  done
+}
+
+cycle=0
+while [[ "$ITERATIONS" -eq 0 || "$cycle" -lt "$ITERATIONS" ]]; do
+  ran_something=false
+
+  if [[ "$HAS_CREDENTIALS" == true ]] && has_pending_tasks; then
+    run_agent "onTask: loading slice from board..." "$(cat "$PROMPT_FILE")"
+    ran_something=true
+  fi
+
+  if has_planned_slices; then
+    slice_title=$(get_planned_slice_title)
+    run_agent "onPlannedSlice: building \"$slice_title\"..." "$(cat "$BACKEND_PROMPT_FILE")"
+    echo "[$(date -u +%H:%M:%S)] Slice \"$slice_title\" build complete — waiting for next slice"
+    ran_something=true
+  fi
+
+  if [[ "$ran_something" == false ]]; then
+    sleep 3
+  fi
+
+  (( cycle++ )) || true
+done

package/stacks/cratis-csharp/templates/root/.frontend/index.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+@import 'primereact/resources/themes/lara-dark-blue/theme.css';
+@source '../';
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: dark;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: var(--surface-ground);
+  color: var(--text-color);
+}
+
+#root {
+  height: 100vh;
+}

package/stacks/cratis-csharp/templates/root/.frontend/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="base-path" content="" />
+    <title>CratisApp</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+</body>
+
+</html>

package/stacks/cratis-csharp/templates/root/.frontend/main.tsx

@@ -0,0 +1,18 @@
+import 'reflect-metadata';
+import { PrimeReactProvider } from 'primereact/api';
+import ReactDOM from 'react-dom/client';
+import 'primeicons/primeicons.css';
+import './index.css';
+import React from 'react';
+import { Arc } from '@cratis/arc.react';
+import App from '../App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <PrimeReactProvider value={{ ripple: true }}>
+            <Arc>
+                <App />
+            </Arc>
+        </PrimeReactProvider>
+    </React.StrictMode>
+);

package/stacks/cratis-csharp/templates/root/.frontend/tsconfig.json

@@ -0,0 +1,42 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": false,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+        /* Decorators */
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        /* Path aliases */
+        "baseUrl": "..",
+        "paths": {
+            "Api/*": ["Features/*"]
+        }
+    },
+    "include": [
+        "../**/*.ts",
+        "../**/*.tsx"
+    ],
+    "exclude": [
+        "vite.config.ts",
+        "../node_modules/**",
+        "../wwwroot/**"
+    ]
+}

package/stacks/cratis-csharp/templates/root/.frontend/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
+}

package/stacks/cratis-csharp/templates/root/.frontend/vite.config.ts

@@ -0,0 +1,56 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { fileURLToPath } from 'node:url';
+import { EmitMetadataPlugin } from '@cratis/arc.vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+    root: fileURLToPath(new URL('./', import.meta.url)),
+    optimizeDeps: {
+        exclude: ['tslib'],
+    },
+    esbuild: {
+        supported: {
+            'top-level-await': true,
+        },
+    },
+    build: {
+        outDir: '../wwwroot',
+        assetsDir: '',
+        modulePreload: false,
+        target: 'esnext',
+        minify: false,
+        cssCodeSplit: false,
+        rollupOptions: {
+            external: [],
+        },
+    },
+    plugins: [
+        react(),
+        tailwindcss(),
+        EmitMetadataPlugin({ tsconfigPath: fileURLToPath(new URL('./tsconfig.json', import.meta.url)) }) as any
+    ],
+    server: {
+        port: 9000,
+        open: true,
+        proxy: {
+            "/.cratis": {
+                target: 'http://localhost:5000',
+                ws: true
+            },
+            '/api': {
+                target: 'http://localhost:5000',
+                ws: true
+            },
+            '/swagger': {
+                target: 'http://localhost:5000',
+                ws: true
+            }
+        }
+    },
+    resolve: {
+        alias: {
+            'Api': fileURLToPath(new URL('../Features', import.meta.url)),
+        }
+    }
+});

package/stacks/cratis-csharp/templates/root/App.tsx

@@ -0,0 +1,23 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Arc } from '@cratis/arc.react';
+import { DialogComponents } from '@cratis/arc.react/dialogs';
+import { BusyIndicatorDialog, ConfirmationDialog } from '@cratis/components/Dialogs';
+import { Home } from './Home';
+import { SomeFeature } from './SomeModule/SomeFeature';
+
+function App() {
+    return (
+        <Arc>
+            <DialogComponents confirmation={ConfirmationDialog} busyIndicator={BusyIndicatorDialog}>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path='/' element={<Home />} />
+                        <Route path='/demo' element={<SomeFeature />} />
+                    </Routes>
+                </BrowserRouter>
+            </DialogComponents>
+        </Arc>
+    );
+}
+
+export default App;