ContactFlow is a high-density, completely serverless agent workspace tool designed for rapid case resolution, live documentation, and zero-latency tool switching.
Driven by the custom Reflexive DOM Framework (RDF), ContactFlow operates entirely within the browser using Vanilla JavaScript, HTML, and CSS. It requires no databases, no backend servers, and zero package managers.
The application is built on several interconnected core systems that maintain logic-density without relying on heavy external libraries.
See reflexive-dom-framework for more info on RDF.
"Vanilla First" Philosophy: ContactFlow intentionally avoids dependencies like React, Vue, Webpack, or NPM.
- Client-Side Only: There is no Node.js backend or SQL database.
- Data Persistence: Application state and user data are stored entirely within the browser's
LocalStorage.
If migrating or debugging, these are the primary storage keys:
scratchboard_cache: Contains data saved to the ScratchBoard staging area.contactflow_scratch_notes: JSON array of user templates created in the ScratchNotes drawer.contactflow_custom_links: User-added navigation shortcuts.
A technical breakdown of the logic files powering the UI.
| Script File | Primary Function |
|---|---|
anchor_navigation.js |
Parses # hrefs and smooth-scrolls the DOM to the target ID. |
backspace_nav.js |
Prevents the backspace key from navigating away from the app. |
clipboard_actions.js |
Handles extracting and formatting text from the main editor to the OS clipboard. |
custom_navigation.js |
CRUD operations for the user's custom links in the drawer. |
drawer_toggler.js |
Event routing and DOM hooks for RDF drawers. |
drawers.js |
Core logic for calculating height, toggling visibility, and managing rdf-drawers-root. |
editor_init.js |
Bootstraps the Markdown editor event listeners on page load. |
find_replace.js |
Floating contextual menu logic for manipulating editor strings. |
keyboard_shortcuts.js |
The Alt+Key listener matrix bridging keyboard input to RDF commands. |
md-toolbar-fixed-scroll.js |
Keeps the formatting toolbar visible on scroll. |
md-toolbar-tool-generator.js |
Parses the DOM to build the interactive formatting buttons for the editor. |
md_editor.js |
Handles typing logic, auto-bulleting, and syntax highlighting algorithms. |
meta_copy_fields.js |
Extracts structured data from side-panels (Escalation, CX Survey) into the main editor. |
scratch_notes.js |
Manages the creation, injection, and UI rendering of custom templates. |
scratchboard.js |
Separate editor logic specifically for the ScratchBoard data sanitization area. |
set_nav.js |
Injects the sidebar HTML structure based on the external config file. |
space_remover.js |
Utility script for sanitizing copied strings (removing double spaces, etc). |
timer_controller.js |
Logic for the embedded countdown utility. |
user_commands.js |
The processor for the Alt + / prompt. |
Because ContactFlow is serverless, deployment is instantaneous.
- Clone the Repository:
git clone https://github.com/vatofichor/contactflow.git
- Launch:
Simply double click
index.htmlor open it in your preferred modern browser (Chrome/Edge recommended). - Local Server (Optional):
If making cross-origin script changes (like editing
nav_config.json), you may need a basic local server to bypass CORS file restrictions during development.php -S localhost:8000 # or python -m http.server 8000
Never re-encode the HTML/JS files using shell batch scripts or lossy text editors. ContactFlow utilizes specific Unicode characters for UI elements (like the navigation anchors) which will corrupt if the file encoding is unintentionally mutated. Always use atomic file operations or a standard IDE (VS Code).
This project is licensed under the MIT License - see the LICENSE section within the repository files for details.
Attribution Requirement: The copyright notice and license must remain with the software in its parts or whole. This is a non-viral license; it does not apply to your entire product, only to the code sourced from this repository.