Attribution: Jean-Sebastien Beaulieu · ORCID 0009-0007-2904-0443 · SecuredMe · Visual Algorithm Designer
Gateway support acknowledgement. This SecuredMe school tool is gateway-compatible. E2B audit support and Datadog observability are routed through the shared SecuredMe gateway when that lane is configured; this repository does not claim a direct E2B or Datadog runtime dependency by default, and no E2B or Datadog secret is stored in this README.
Maintainer intake during active finishing week. This repository is maintained directly on
mainby the SecuredMe maintainer. Public issues are open for bug reports, documentation corrections, security-safe observations, and reproducible feedback, but opening an issue does not promise a response or a delivery date. Pull requests are not accepted during the active code-finishing week; use issues only until this notice is replaced.
This repository is a small SecuredMe school tool. Official classroom use must not require .env files, API keys, raw tokens, or local model secrets. Student and teacher workflows must use Codex/OpenAI or Antigravity/Gemini through browser WebAuth, fingerprinted session approval, and encrypted local session records when authentication is needed.
The reason for excluding generic local AI routes from official school mode is student and teacher safety: education accounts, provider-side account controls, browser login, and governed AI refusal behavior are safer than unguided local model endpoints for classroom cybersecurity and algorithm-building tools.
Development status. This school tool is currently tagged pre-alpha / in development. Public issues remain open for intake, but no response or delivery date is promised. Pull requests are paused during the active code-finishing week.
SecuredMe Education visual theme. This pre-alpha school tool uses the shared SecuredMe Education open-source visual identity. See assets/securedme/education for light/dark logo and thin banner assets.
Design, inspect, and learn algorithm pipelines visually — from classroom playground to supervised teacher review.
Official school governance. VAD is for training students and teachers to understand, design, and review algorithms. It is not a tool for theft, fraud, bypass, abuse, or criminal automation. The maintained classroom route supports Codex/OpenAI or Antigravity/Gemini only. See SCHOOL_TOOL_GOVERNANCE.md and AGENTS.md.
License. This project uses the Secured Educational License 2.0 (SEL-2.0). It is provided for education, research, simulation, classroom training, and supervised learning. Misuse, unsafe private forks, unsupported provider routes, and unsupervised authority claims are not maintained or endorsed by the official school version. See LICENSE, NOTICE, DISCLAIMER, and SAFETY.md.
Visual Algorithm Designer is a school-focused web application that lets students and teachers build algorithm pipelines by dragging and dropping nodes on a canvas, inspect their structure, and prepare review notes through the maintained school routes: Codex/OpenAI or Antigravity/Gemini. The in-app backend does not require a classroom API key; when no approved external school assistant is attached, it falls back to deterministic local guidance.
RaySight is the student-facing mascot and guide inside VAD. It is not the product name, not a provider route, and not a proprietary model endpoint in this open-source repository. The required public attribution is the small Powered by H2O visual identity; H2O-3 references stay in backend/data annex material and are not the main student-facing vocabulary.
The application targets two supervised learning profiles on a single spectrum:
| Mode | User | Goal |
|---|---|---|
| Playground | Students, makers, game designers | Understand algorithmic logic with friendly vocabulary and visual feedback |
| Teacher Review | Teachers, mentors, advanced learners | Review pipeline structure, traceability, and safety boundaries before classroom reuse |
- Drag-and-drop canvas powered by @xyflow/react — build pipelines by connecting algorithm nodes and learning concepts visually
- RaySight guide panel — select any node and get plain-language guidance from the local fallback or from an approved external school assistant workflow
- Pipeline evaluation — submit your full pipeline for a
coherenceScore(0–100); pipelines scoring ≥ 93 can be promoted to the validated catalog - Starter kit library — 5 teen-readable templates (Homework Organizer, Game Map Route, Playlist Recommender, Privacy Message, Image Understanding) draggable as prefab node groups
- Validated algorithm catalog — locally persisted list of your promoted pipelines with loop detection (DFS) and version tracking
- Safety profiles — 7 profiles that adjust review thresholds, warnings, and classroom boundaries
- Review report generator — produces structured teacher notes with SHA-256 hash for auditable classroom documentation; it is not legal, regulatory, or certification output
- Excel export — download algorithm parameter sheets (2-tab
.xlsx) for selected algorithm nodes via SheetJS - Persistent memory — local review conversations indexed with BM25 (MiniSearch + SQLite) for context-aware follow-up explanations
- Keyboard shortcuts —
Ctrl+Btoggle palette ·Ctrl+Jtoggle RaySight guide ·Ctrl+Ssave pipeline
VisualAlgorithmDesigner/
├── RaySight-frontend/ # VAD frontend: React 18 + TypeScript + Vite
│ └── src/
│ ├── components/
│ │ └── AlgorithmDesigner/ # Canvas, Palette, Panels, Nodes
│ ├── contexts/ # DnDContext (drag payload)
│ ├── hooks/ # usePipelineEvaluation, useLoopDetector, ...
│ ├── pages/ # AlgorithmDesignerPage (3-column layout)
│ ├── services/ # api.ts, algorithmCatalog, subpipelineCatalog
│ └── styles/ # palette.css (design tokens)
│
├── RaySight-backend/ # VAD backend: Express 5 + local school runtime hooks
│ ├── server.js # Routes: /api/ai/*, /api/memory/*, /api/health
│ ├── services/
│ │ ├── aiPipelineService.js # school runtime hook, fallback guidance, loopback guard, safety profiles
│ │ └── sqliteMemoryRepository.ts # SQLite + MiniSearch BM25 memory
│ └── data/ # SQLite database (gitignored)
│
└── docs/
└── plan.md # Historical planning archive; current school-provider policy is in this README and SCHOOL_TOOL_GOVERNANCE.md
| Layer | Technology | Version |
|---|---|---|
| Frontend framework | React + TypeScript | 18.2.0 + 5.0.2 |
| Build tool | Vite | 6.3.5 |
| Canvas / graph | @xyflow/react | 12.10.2 |
| UI components | MUI | ^6.0.0 |
| Drag and drop | @hello-pangea/dnd | 18.0.1 |
| Routing | react-router-dom | 7.6.1 |
| Backend | Express | 5.2.0 |
| School AI route | Codex/OpenAI or Antigravity/Gemini external workflow | browser WebAuth |
| In-app fallback | deterministic school guidance runtime | local |
| H2O boundary | Powered by H2O visual attribution + backend/data annex |
no student-facing product theme |
| Memory store | better-sqlite3 + MiniSearch | — |
| Rate limiting | express-rate-limit | — |
| Excel export | SheetJS (xlsx) | — |
- Node.js ≥ 20 (LTS)
- npm ≥ 10
- No classroom API key is required for the maintained local fallback path.
git clone https://github.com/SeCuReDmE-main-dev/VisualAlgorithmDesigner.git
cd VisualAlgorithmDesigner
git checkout PaQBoTNo .env file is required for the default classroom fallback path. Keep official AI-assisted classroom work in Codex/OpenAI or Antigravity/Gemini browser-authenticated sessions; do not add local model secrets or unsupported provider keys to the maintained school route.
# Backend
cd RaySight-backend && npm install
# Frontend
cd ../RaySight-frontend && npm installOpen two terminals:
# Terminal 1 — Backend (port 3001)
cd RaySight-backend && npm run dev
# Terminal 2 — Frontend (port 5173)
cd RaySight-frontend && npm run devOpen http://localhost:5173 in your browser.
curl http://localhost:3001/api/health
# Expected: {"status":"ok","timestamp":"..."}Implementation is tracked through 8 milestones and 63 GitHub issues on the project board.
| Milestone | Focus | Issues | Status |
|---|---|---|---|
| M0 — Infrastructure | Fix all blockers, dev server runs clean | #12-#21, #115, #116 | ✅ Complete |
| M1 — Backend Core | SQLite memory, AI pipeline service, feedback endpoint | #22-#28 | ✅ Complete |
| M2 — Frontend Foundation | palette.css tokens, routing, services, DnD context | #29-#37 | ✅ Complete |
| M3 — Core Canvas Loop | Drag node → canvas → AI explanation (E2E) | #38-#45 | ✅ Complete |
| M4 — Subpipeline Library | 5 prefab templates, 4-tab panel, drag-to-expand | #46-#51 | ✅ Complete |
| M5 — Evaluation & Promotion | coherenceScore, ≥93% promotion, loop detection | #52-#59 | ✅ Complete |
| M6 — UX Polish | Excel export, keyboard shortcuts, tutorial, animations | #60-#66 | ✅ Complete |
| M7 — Safety & Review Reporting | 7 safety profiles, review report, audit hash | #67-#72 | ✅ Complete |
Each issue contains a single testable acceptance criterion. Closing an issue with a commit message containing Closes #NNN automatically advances the milestone progress bar.
Current status. This repository is pre-alpha / in development. Older planning notes remain available in docs/plan.md, but the current school-provider policy is Codex/OpenAI or Antigravity/Gemini only.
During the active code-finishing week, contribution intake is issue-only. Please open a public issue with a reproducible report, suggested documentation correction, or security-safe observation. Pull requests are not accepted during this window, and issue intake does not promise a response or a delivery date.
Do not introduce new dependencies or change the stack without updating this README, SCHOOL_TOOL_GOVERNANCE.md, and the relevant implementation docs. Historical planning notes in docs/plan.md may contain superseded provider experiments and are not the current school-provider contract.
| Resource | URL |
|---|---|
| Issues | https://github.com/SeCuReDmE-main-dev/VisualAlgorithmDesigner/issues |
| Milestones | https://github.com/SeCuReDmE-main-dev/VisualAlgorithmDesigner/milestones |
| Project board | https://github.com/users/SeCuReDmE-main-dev/projects/3 |
| Historical planning archive | docs/plan.md |
MIT