Interactive Artifact Control Layer Website

This is a static website (HTML/CSS/JS). No build step is required.

Explicit launch steps (recommended)

1. Open a terminal.
2. Go to the project folder (the folder that contains index.html):

   cd /path/to/your/velocity

3. Optional: verify you are in the right place:

   pwd
   ls

   You should see index.html, styles.css, and script.js.
4. Start a local web server on port 5500:

   python3 -m http.server 5500

5. Keep that terminal running.
6. Open your browser to:
   • http://localhost:5500/index.html
7. Use the UI:
   • Click All Flows / Build / CI / Developer / AI / GPU to filter traffic.
   • Click Simulate Artifact Traffic to run the animation.
   • Hover a node card to focus that route.
8. Stop the server when done:
   • Press Ctrl + C in the terminal.

One-command launch (npm)

If you prefer npm commands:

1. Go to the project folder:

   cd /path/to/your/velocity

2. Run:

   npm run start

3. Open:
   • http://localhost:5500/index.html

VS Code option

1. Open this folder in VS Code.
2. Install the Live Server extension (if needed).
3. Right-click index.html.
4. Click Open with Live Server.

Troubleshooting (matches common macOS/zsh errors)

cd: no such file or directory

You are not in the right location yet.

Try finding the folder first:

find ~ -type d -name velocity 2>/dev/null | head

Then cd into the correct result:

cd /actual/path/from/find

zsh: command not found: dir

Use ls on macOS/zsh (not dir):

ls

OSError: [Errno 48] Address already in use

Port 5500 is occupied. Start on another port:

python3 -m http.server 8080

Then open:

• http://localhost:8080/index.html

zsh: no such file or directory: http://localhost:...

Do not type the URL by itself as a shell command.

Use one of these:

• paste URL into browser address bar, or
• open it from terminal on macOS:

open http://localhost:5500/index.html

(If you used port 8080, replace 5500 with 8080.)

Run it on GitHub (shareable URL)

You can host this static site with GitHub Pages.

1) Create a GitHub repo and push this code

If you have not pushed yet:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<your-username>/<repo-name>.git
git push -u origin main

If this repo already exists locally, just ensure origin points to GitHub and push main.

2) Enable GitHub Pages from Actions

1. In GitHub, open your repo.
2. Go to Settings → Pages.
3. Under Build and deployment, set Source to GitHub Actions.

This repo now includes a workflow at .github/workflows/deploy-pages.yml that deploys automatically on pushes to main.

3) Get your URL

After the Actions workflow completes, your site URL will be:

• https://<your-username>.github.io/<repo-name>/

For this project file, use:

• https://<your-username>.github.io/<repo-name>/index.html

4) Update the live site

Any push to main redeploys automatically:

git add .
git commit -m "Update site"
git push

Run from Visual Studio / VS Code

Visual Studio Code (desktop app)

1. Open VS Code.
2. Click File → Open Folder... and select your project folder (the one with index.html).
3. Open Terminal → New Terminal.
4. In that terminal, run:

   python3 -m http.server 5500

5. Open in your browser:
   • http://localhost:5500/index.html

Alternative in VS Code:

• Install the Live Server extension.
• Right-click index.html → Open with Live Server.

Visual Studio (full IDE, e.g., Visual Studio 2022)

This project is static HTML/CSS/JS, so the easiest approach is:

1. Open Visual Studio.
2. Choose File → Open → Folder... and select the project folder.
3. Open View → Terminal.
4. Run:

   python3 -m http.server 5500

5. Open in browser:
   • http://localhost:5500/index.html

If port 5500 is busy, use:

python3 -m http.server 8080

Then open:

• http://localhost:8080/index.html

If you do not have the files locally yet

If index.html is not on your machine, you need to clone/download the repo first.

Option A: Clone from GitHub (recommended)

1. Create a folder for projects and open terminal there.
2. Run:

git clone https://github.com/<your-username>/<repo-name>.git
cd <repo-name>
ls

You should now see files like:

• index.html
• styles.css
• script.js
• README.md

Then launch:

python3 -m http.server 5500

Open:

• http://localhost:5500/index.html

Option B: Download ZIP from GitHub

1. Open your GitHub repo page.
2. Click Code → Download ZIP.
3. Unzip the folder.
4. Open terminal in the unzipped folder.
5. Run:

python3 -m http.server 5500

Open:

• http://localhost:5500/index.html