← back to Macstudio1 Dashboard
feat: macstudio1-dashboard v0.1 — 57 Bel Air aesthetic
574b249a68f1bde9c841cbf9ec93bb0a7457926e · 2026-05-07 23:11:02 -0700 · SteveStudio2
Mac Studio 1 dashboard at http://100.94.103.98:9930 (or http://localhost:9930 on Mac1):
- Three round chrome gauges: CPU %, MEMORY %, VRAM GB, with red needles + chrome bezels
- Radio-panel Now Broadcasting: shows currently-loaded LLM (qwen3:14b right now), parameter size, VRAM bytes, expires-in countdown
- Three push-button hyperdrive controls (chrome cigarette-lighter style):
HYPERDRIVE high-power mode + pin all loaded models keep_alive=-1
MAX RAM load every installed model into memory and pin
IDLE unload all models + restore default power mode
- Odometer strip: uptime / power mode / call count
- 57 Bel Air color palette: turquoise, cream, chrome, red, leather brown, gold
- Fonts: Lobster (script wordmark), Bowlby One SC (chunky), Special Elite (era typewriter), Bungee Shade (1957 badge)
API endpoints:
GET /api/status 1.2s polled - cpu/memory/ollama/power
POST /api/control/hyperdrive sudo pmset powermode 2 + pin models
POST /api/control/max-ram load every installed model with keep_alive=-1
POST /api/control/idle pmset powermode 0 + unload models
launchd jobs registered on Mac1:
com.steve.macstudio1-dashboard server at boot
com.steve.macstudio1-dashboard-chrome open Chrome --app=http://localhost:9930 8s after login
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Files touched
A .gitignoreA launchd/com.steve.macstudio1-dashboard-chrome.plistA launchd/com.steve.macstudio1-dashboard.plistA package.jsonA public/index.htmlA server.js
Diff
commit 574b249a68f1bde9c841cbf9ec93bb0a7457926e
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date: Thu May 7 23:11:02 2026 -0700
feat: macstudio1-dashboard v0.1 — 57 Bel Air aesthetic
Mac Studio 1 dashboard at http://100.94.103.98:9930 (or http://localhost:9930 on Mac1):
- Three round chrome gauges: CPU %, MEMORY %, VRAM GB, with red needles + chrome bezels
- Radio-panel Now Broadcasting: shows currently-loaded LLM (qwen3:14b right now), parameter size, VRAM bytes, expires-in countdown
- Three push-button hyperdrive controls (chrome cigarette-lighter style):
HYPERDRIVE high-power mode + pin all loaded models keep_alive=-1
MAX RAM load every installed model into memory and pin
IDLE unload all models + restore default power mode
- Odometer strip: uptime / power mode / call count
- 57 Bel Air color palette: turquoise, cream, chrome, red, leather brown, gold
- Fonts: Lobster (script wordmark), Bowlby One SC (chunky), Special Elite (era typewriter), Bungee Shade (1957 badge)
API endpoints:
GET /api/status 1.2s polled - cpu/memory/ollama/power
POST /api/control/hyperdrive sudo pmset powermode 2 + pin models
POST /api/control/max-ram load every installed model with keep_alive=-1
POST /api/control/idle pmset powermode 0 + unload models
launchd jobs registered on Mac1:
com.steve.macstudio1-dashboard server at boot
com.steve.macstudio1-dashboard-chrome open Chrome --app=http://localhost:9930 8s after login
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
.gitignore | 4 +
.../com.steve.macstudio1-dashboard-chrome.plist | 20 +
launchd/com.steve.macstudio1-dashboard.plist | 29 ++
package.json | 13 +
public/index.html | 570 +++++++++++++++++++++
server.js | 164 ++++++
6 files changed, 800 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..664269a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+*.log
+.env*
+
diff --git a/launchd/com.steve.macstudio1-dashboard-chrome.plist b/launchd/com.steve.macstudio1-dashboard-chrome.plist
new file mode 100644
index 0000000..aff0380
--- /dev/null
+++ b/launchd/com.steve.macstudio1-dashboard-chrome.plist
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+ <key>Label</key>
+ <string>com.steve.macstudio1-dashboard-chrome</string>
+ <key>ProgramArguments</key>
+ <array>
+ <string>/bin/bash</string>
+ <string>-lc</string>
+ <string>sleep 8 && /usr/bin/open -a "Google Chrome" --new --args --app=http://localhost:9930</string>
+ </array>
+ <key>RunAtLoad</key>
+ <true/>
+ <key>StandardOutPath</key>
+ <string>/Users/steveabramsdesignsgmail.com/Projects/macstudio1-dashboard/logs/chrome.out.log</string>
+ <key>StandardErrorPath</key>
+ <string>/Users/steveabramsdesignsgmail.com/Projects/macstudio1-dashboard/logs/chrome.err.log</string>
+</dict>
+</plist>
diff --git a/launchd/com.steve.macstudio1-dashboard.plist b/launchd/com.steve.macstudio1-dashboard.plist
new file mode 100644
index 0000000..6f98064
--- /dev/null
+++ b/launchd/com.steve.macstudio1-dashboard.plist
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+ <key>Label</key>
+ <string>com.steve.macstudio1-dashboard</string>
+ <key>ProgramArguments</key>
+ <array>
+ <string>/bin/bash</string>
+ <string>-lc</string>
+ <string>cd /Users/steveabramsdesignsgmail.com/Projects/macstudio1-dashboard && ~/.nvm/versions/node/v20.20.2/bin/node server.js</string>
+ </array>
+ <key>RunAtLoad</key>
+ <true/>
+ <key>KeepAlive</key>
+ <true/>
+ <key>StandardOutPath</key>
+ <string>/Users/steveabramsdesignsgmail.com/Projects/macstudio1-dashboard/logs/dashboard.out.log</string>
+ <key>StandardErrorPath</key>
+ <string>/Users/steveabramsdesignsgmail.com/Projects/macstudio1-dashboard/logs/dashboard.err.log</string>
+ <key>EnvironmentVariables</key>
+ <dict>
+ <key>PORT</key>
+ <string>9930</string>
+ <key>OLLAMA</key>
+ <string>http://localhost:11434</string>
+ </dict>
+</dict>
+</plist>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..11e6cb6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "macstudio1-dashboard",
+ "version": "0.1.0",
+ "private": true,
+ "description": "'57 Chevy convertible dashboard for Mac Studio 1 — Ollama state, CPU/RAM, hyperdrive controls",
+ "main": "server.js",
+ "scripts": {
+ "start": "node server.js"
+ },
+ "dependencies": {
+ "express": "^4.21.1"
+ }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..672a746
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,570 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Mac Studio 1 · '57 Bel Air</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Bungee+Shade&family=Lobster&family=Special+Elite&family=JetBrains+Mono:wght@400;600&display=swap');
+
+:root {
+ --turq: #4abdc5;
+ --turq-dark: #2a7c83;
+ --cream: #f0e5c8;
+ --cream-shadow: #c9b894;
+ --chrome-1: #f8f8f8;
+ --chrome-2: #b6b6b6;
+ --chrome-3: #686868;
+ --red: #c8243a;
+ --red-glow: #ff5060;
+ --leather: #4d2c1d;
+ --leather-light: #7d4a30;
+ --black: #15110d;
+ --gold: #d4b683;
+}
+
+* { box-sizing: border-box; }
+html, body {
+ margin: 0; min-height: 100vh;
+ background:
+ radial-gradient(ellipse at center top, rgba(74, 189, 197, 0.4), rgba(15, 17, 13, 0.85) 60%),
+ linear-gradient(180deg, var(--cream) 0%, var(--turq) 60%, var(--turq-dark) 100%);
+ font-family: 'JetBrains Mono', monospace;
+ color: var(--black);
+ overflow-x: hidden;
+}
+
+/* Era stripe — turquoise/cream two-tone divider that runs across the top */
+.tail-fin {
+ position: absolute; top: 0; left: 0; right: 0; height: 8px;
+ background: linear-gradient(90deg, var(--turq) 0%, var(--cream) 50%, var(--turq) 100%);
+ border-bottom: 2px solid var(--chrome-2);
+ box-shadow: 0 0 12px rgba(212, 182, 131, 0.6);
+}
+
+header.masthead {
+ text-align: center;
+ padding: 36px 24px 18px;
+ position: relative;
+}
+
+.brand {
+ font-family: 'Lobster', cursive;
+ font-size: 78px;
+ color: var(--cream);
+ text-shadow:
+ -2px 0 0 var(--chrome-2),
+ 2px 0 0 var(--chrome-2),
+ 0 -2px 0 var(--chrome-2),
+ 0 2px 0 var(--chrome-2),
+ 0 0 18px rgba(212, 182, 131, 0.65),
+ 4px 6px 0 rgba(20, 17, 13, 0.4);
+ letter-spacing: 0.02em;
+ line-height: 0.95;
+ margin: 0;
+}
+.brand .sub {
+ display: block;
+ font-family: 'Bowlby One SC', sans-serif;
+ font-size: 18px;
+ letter-spacing: 0.4em;
+ color: var(--gold);
+ text-shadow: 1px 1px 0 var(--black);
+ margin-top: 6px;
+}
+.year-badge {
+ display: inline-block;
+ font-family: 'Bungee Shade', sans-serif;
+ font-size: 22px;
+ background: var(--cream);
+ color: var(--red);
+ padding: 4px 14px;
+ border: 3px solid var(--chrome-2);
+ border-radius: 24px;
+ margin-top: 14px;
+ box-shadow: inset 0 0 8px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.3);
+}
+
+/* The dashboard — looks like the chrome panel of a '57 Bel Air */
+.dash {
+ max-width: 1200px;
+ margin: 32px auto 0;
+ padding: 38px 32px 40px;
+ background:
+ linear-gradient(180deg, var(--cream) 0%, var(--cream-shadow) 100%);
+ border: 5px solid var(--chrome-2);
+ border-radius: 28px 28px 12px 12px;
+ box-shadow:
+ inset 0 0 0 2px var(--chrome-1),
+ inset 0 0 28px rgba(120, 90, 50, 0.35),
+ 0 18px 40px rgba(0, 0, 0, 0.55),
+ 0 0 0 8px var(--turq) /* the turquoise paint surrounding the chrome */;
+ position: relative;
+}
+
+/* Chrome trim line down the middle of the dash */
+.dash::before {
+ content: '';
+ position: absolute;
+ top: 8px; bottom: 8px;
+ left: 50%;
+ width: 4px;
+ margin-left: -2px;
+ background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-3) 50%, var(--chrome-1) 100%);
+ border-radius: 2px;
+ opacity: 0.55;
+}
+
+/* Gauge cluster */
+.gauges {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 24px;
+ align-items: center;
+ margin-bottom: 36px;
+}
+
+.gauge {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ max-width: 280px;
+ margin: 0 auto;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 30% 30%, var(--chrome-1) 0%, var(--chrome-2) 30%, var(--chrome-3) 75%, var(--black) 100%);
+ box-shadow:
+ inset 0 0 0 8px var(--chrome-2),
+ inset 0 0 0 12px var(--black),
+ inset 0 0 30px rgba(0, 0, 0, 0.7),
+ 0 6px 16px rgba(0, 0, 0, 0.45);
+}
+.gauge .face {
+ position: absolute;
+ inset: 18px;
+ border-radius: 50%;
+ background:
+ radial-gradient(circle at 50% 30%, #2a3a3f 0%, #0a0e10 80%);
+ border: 2px solid var(--chrome-3);
+ overflow: hidden;
+}
+.gauge .face::before {
+ /* tick marks */
+ content: '';
+ position: absolute;
+ inset: 0;
+ background:
+ repeating-conic-gradient(
+ from -135deg at 50% 50%,
+ var(--chrome-1) 0deg 1deg, transparent 1deg 27deg
+ );
+ mask: radial-gradient(circle at 50% 50%, transparent 0 38%, black 38% 48%, transparent 48% 100%);
+ -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 38%, black 38% 48%, transparent 48% 100%);
+ opacity: 0.7;
+}
+.gauge .label {
+ position: absolute;
+ top: 28%;
+ left: 0; right: 0;
+ text-align: center;
+ font-family: 'Special Elite', monospace;
+ font-size: 11px;
+ letter-spacing: 0.32em;
+ color: var(--cream);
+ text-transform: uppercase;
+ z-index: 2;
+}
+.gauge .needle {
+ position: absolute;
+ bottom: 50%;
+ left: 50%;
+ width: 4px;
+ height: 38%;
+ margin-left: -2px;
+ background: linear-gradient(180deg, var(--red-glow) 0%, var(--red) 70%, #6b0010 100%);
+ transform-origin: 50% 100%;
+ transform: rotate(-135deg);
+ transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+ box-shadow: 0 0 6px var(--red), 0 0 14px rgba(255, 80, 96, 0.4);
+ z-index: 3;
+ border-radius: 2px;
+}
+.gauge .pin {
+ position: absolute;
+ width: 24px; height: 24px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 30%, var(--chrome-1), var(--chrome-3));
+ top: 50%; left: 50%;
+ margin: -12px 0 0 -12px;
+ z-index: 4;
+ box-shadow: 0 0 0 2px var(--black), 0 2px 4px rgba(0,0,0,0.6);
+}
+.gauge .value {
+ position: absolute;
+ bottom: 22%;
+ left: 0; right: 0;
+ text-align: center;
+ font-family: 'Bowlby One SC', sans-serif;
+ font-size: 36px;
+ color: var(--cream);
+ z-index: 5;
+ text-shadow: 0 0 8px rgba(74, 189, 197, 0.6);
+}
+.gauge .units {
+ position: absolute;
+ bottom: 14%;
+ left: 0; right: 0;
+ text-align: center;
+ font-family: 'Special Elite', monospace;
+ font-size: 10px;
+ letter-spacing: 0.3em;
+ color: var(--cream);
+ z-index: 5;
+ opacity: 0.65;
+}
+
+/* LLM status panel — the radio dial */
+.radio {
+ margin-top: 8px;
+ background:
+ repeating-linear-gradient(180deg, rgba(0,0,0,0.04) 0px, transparent 1px, transparent 4px),
+ linear-gradient(180deg, var(--leather-light) 0%, var(--leather) 100%);
+ border: 4px solid var(--chrome-2);
+ border-radius: 6px;
+ padding: 18px 22px;
+ box-shadow:
+ inset 0 0 0 2px var(--chrome-1),
+ inset 0 0 16px rgba(0, 0, 0, 0.45),
+ 0 4px 10px rgba(0, 0, 0, 0.4);
+ position: relative;
+ margin-bottom: 36px;
+}
+.radio::before, .radio::after {
+ /* speaker grilles */
+ content: '';
+ position: absolute;
+ top: 50%; transform: translateY(-50%);
+ width: 36px; height: 60px;
+ background:
+ repeating-linear-gradient(0deg, var(--chrome-3) 0px, var(--chrome-3) 2px, var(--chrome-1) 2px, var(--chrome-1) 4px);
+ border: 2px solid var(--chrome-1);
+ border-radius: 4px;
+}
+.radio::before { left: 8px; }
+.radio::after { right: 8px; }
+.radio-band {
+ text-align: center;
+ font-family: 'Special Elite', monospace;
+ font-size: 11px;
+ letter-spacing: 0.4em;
+ color: var(--cream);
+ margin-bottom: 8px;
+ text-transform: uppercase;
+}
+.station {
+ text-align: center;
+ font-family: 'Bowlby One SC', sans-serif;
+ font-size: 28px;
+ color: var(--gold);
+ text-shadow: 0 0 14px rgba(212, 182, 131, 0.7);
+ letter-spacing: 0.04em;
+ margin: 4px 0;
+ min-height: 36px;
+}
+.station.idle { color: var(--chrome-3); text-shadow: none; opacity: 0.65; }
+.subtitle {
+ text-align: center;
+ font-family: 'Special Elite', monospace;
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ color: var(--cream);
+ text-transform: uppercase;
+ opacity: 0.85;
+}
+
+/* Push buttons — chrome cigarette-lighter style */
+.controls {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 18px;
+ margin-top: 8px;
+}
+.btn {
+ background:
+ radial-gradient(circle at 30% 25%, var(--chrome-1) 0%, var(--chrome-2) 50%, var(--chrome-3) 100%);
+ border: none;
+ border-radius: 14px;
+ padding: 22px 14px 18px;
+ cursor: pointer;
+ font-family: 'Bowlby One SC', sans-serif;
+ font-size: 16px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--leather);
+ box-shadow:
+ inset 0 -3px 6px rgba(0, 0, 0, 0.35),
+ inset 0 3px 6px rgba(255, 255, 255, 0.6),
+ 0 6px 12px rgba(0, 0, 0, 0.45);
+ position: relative;
+ transition: transform 0.1s ease, box-shadow 0.15s ease;
+ overflow: hidden;
+}
+.btn:active {
+ transform: translateY(2px);
+ box-shadow:
+ inset 0 -1px 3px rgba(0, 0, 0, 0.35),
+ inset 0 1px 3px rgba(255, 255, 255, 0.6),
+ 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+.btn .light {
+ display: block;
+ width: 14px; height: 14px;
+ border-radius: 50%;
+ background: radial-gradient(circle at 30% 30%, #6b0010 0%, #3a000a 80%);
+ margin: 0 auto 10px;
+ box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
+ transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+.btn.active .light {
+ background: radial-gradient(circle at 30% 30%, var(--red-glow) 0%, var(--red) 70%);
+ box-shadow: 0 0 12px var(--red-glow), inset 0 0 6px var(--red-glow);
+ animation: pulse 1.2s infinite alternate;
+}
+@keyframes pulse {
+ from { opacity: 0.85; }
+ to { opacity: 1; }
+}
+.btn .sub-label {
+ display: block;
+ font-family: 'Special Elite', monospace;
+ font-size: 9px;
+ letter-spacing: 0.18em;
+ margin-top: 4px;
+ color: var(--leather);
+ opacity: 0.75;
+ text-transform: uppercase;
+}
+.btn[data-mode="hyperdrive"] { border: 3px solid var(--red); }
+.btn[data-mode="max-ram"] { border: 3px solid var(--turq-dark); }
+.btn[data-mode="idle"] { border: 3px solid var(--chrome-3); }
+
+/* Recent activity strip — like an odometer */
+.odometer {
+ margin-top: 32px;
+ padding: 12px 18px;
+ background: var(--black);
+ border: 3px solid var(--chrome-2);
+ border-radius: 6px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 13px;
+ color: #d4ffd4;
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
+ letter-spacing: 0.08em;
+}
+.odometer .digit {
+ font-family: 'Bowlby One SC', sans-serif;
+ font-size: 20px;
+ color: var(--gold);
+ letter-spacing: 0.16em;
+}
+
+footer {
+ text-align: center;
+ padding: 32px 24px 64px;
+ font-family: 'Special Elite', monospace;
+ font-size: 11px;
+ letter-spacing: 0.28em;
+ color: var(--cream);
+ text-transform: uppercase;
+ opacity: 0.7;
+}
+footer a { color: var(--gold); text-decoration: none; }
+</style>
+</head>
+<body>
+
+<div class="tail-fin"></div>
+
+<header class="masthead">
+ <h1 class="brand">Mac Studio<br><span class="sub">— ONE —</span></h1>
+ <span class="year-badge">'57 Bel Air</span>
+</header>
+
+<main class="dash">
+
+ <!-- LLM radio panel -->
+ <div class="radio">
+ <div class="radio-band">— now broadcasting —</div>
+ <div class="station idle" id="station">engine off</div>
+ <div class="subtitle" id="station-sub">no model loaded · standing by</div>
+ </div>
+
+ <!-- Three round gauges -->
+ <div class="gauges">
+ <div class="gauge" data-key="cpu">
+ <div class="face"></div>
+ <div class="label">CPU</div>
+ <div class="needle" data-needle="cpu"></div>
+ <div class="value" data-value="cpu">0</div>
+ <div class="units">%</div>
+ <div class="pin"></div>
+ </div>
+ <div class="gauge" data-key="ram">
+ <div class="face"></div>
+ <div class="label">MEMORY</div>
+ <div class="needle" data-needle="ram"></div>
+ <div class="value" data-value="ram">0</div>
+ <div class="units">%</div>
+ <div class="pin"></div>
+ </div>
+ <div class="gauge" data-key="vram">
+ <div class="face"></div>
+ <div class="label">V·RAM</div>
+ <div class="needle" data-needle="vram"></div>
+ <div class="value" data-value="vram">0</div>
+ <div class="units">GB</div>
+ <div class="pin"></div>
+ </div>
+ </div>
+
+ <!-- Push-button shifter / hyperdrive controls -->
+ <div class="controls">
+ <button class="btn" data-mode="hyperdrive" onclick="trigger('hyperdrive', this)">
+ <span class="light"></span>
+ 🚀 Hyperdrive
+ <span class="sub-label">high power · pin models</span>
+ </button>
+ <button class="btn" data-mode="max-ram" onclick="trigger('max-ram', this)">
+ <span class="light"></span>
+ 💪 Max RAM
+ <span class="sub-label">load all · keep alive</span>
+ </button>
+ <button class="btn" data-mode="idle" onclick="trigger('idle', this)">
+ <span class="light"></span>
+ 🛑 Idle
+ <span class="sub-label">unload · default power</span>
+ </button>
+ </div>
+
+ <!-- Odometer-style activity counter -->
+ <div class="odometer">
+ <span>UPTIME</span>
+ <span class="digit" id="odo-uptime">000000</span>
+ <span>POWER MODE</span>
+ <span class="digit" id="odo-power">AUTO</span>
+ <span>CALLS</span>
+ <span class="digit" id="odo-calls">0000</span>
+ </div>
+
+</main>
+
+<footer>
+ Mac Studio 1 · Sherman Oaks · <a href="http://localhost:9930">localhost:9930</a> ·
+ polling /api/status every 1.2 s
+</footer>
+
+<script>
+const $ = (s, root = document) => root.querySelector(s);
+
+const GAUGE_RANGE = {
+ // -135deg = full counter-clockwise (0), +135deg = full clockwise (max)
+ cpu: { min: 0, max: 100 },
+ ram: { min: 0, max: 100 },
+ vram: { min: 0, max: 64 } // M3 Ultra hits 192GB but most LLMs cap ~30-60GB VRAM
+};
+
+function setGauge(key, value, displayValue, displayUnits) {
+ const range = GAUGE_RANGE[key];
+ const clamped = Math.max(range.min, Math.min(range.max, value));
+ const t = (clamped - range.min) / (range.max - range.min);
+ const angle = -135 + t * 270;
+ const needle = document.querySelector(`[data-needle="${key}"]`);
+ if (needle) needle.style.transform = `rotate(${angle}deg)`;
+ const valueEl = document.querySelector(`[data-value="${key}"]`);
+ if (valueEl) valueEl.textContent = displayValue;
+ if (displayUnits) {
+ const u = valueEl?.parentElement?.querySelector('.units');
+ if (u) u.textContent = displayUnits;
+ }
+}
+
+function fmtUptime(secs) {
+ const d = Math.floor(secs / 86400);
+ const h = Math.floor((secs % 86400) / 3600);
+ const m = Math.floor((secs % 3600) / 60);
+ if (d > 0) return `${d}d ${h}h`;
+ if (h > 0) return `${h}h ${String(m).padStart(2,'0')}m`;
+ return `${m}m ${String(secs % 60).padStart(2,'0')}s`;
+}
+
+let CALL_COUNT = 0;
+let LAST_MODEL = null;
+
+async function tick() {
+ try {
+ const r = await fetch('/api/status').then(r => r.json());
+
+ // CPU + RAM gauges
+ setGauge('cpu', r.cpu.total || 0, Math.round(r.cpu.total || 0));
+ setGauge('ram', r.memory.used_pct || 0, Math.round(r.memory.used_pct || 0));
+
+ // VRAM = sum of size_vram_bytes across loaded models
+ const vramBytes = (r.ollama.models || []).reduce((s, m) => s + (m.size_vram_bytes || 0), 0);
+ const vramGB = vramBytes / (1024 ** 3);
+ setGauge('vram', vramGB, vramGB.toFixed(1));
+
+ // Radio panel — current LLM
+ const station = document.getElementById('station');
+ const sub = document.getElementById('station-sub');
+ if (r.ollama.models && r.ollama.models.length > 0) {
+ const m = r.ollama.models[0];
+ station.textContent = m.name;
+ station.classList.remove('idle');
+ const more = r.ollama.models.length > 1 ? ` · +${r.ollama.models.length - 1} more loaded` : '';
+ const expSec = m.expires_at ? Math.max(0, Math.round((new Date(m.expires_at).getTime() - Date.now()) / 1000)) : -1;
+ sub.textContent = `${(m.details && m.details.parameter_size) || ''} · ${(vramGB).toFixed(1)} GB VRAM${expSec >= 0 ? ' · expires in ' + expSec + 's' : ' · pinned'}${more}`;
+ if (m.name !== LAST_MODEL) {
+ CALL_COUNT++;
+ LAST_MODEL = m.name;
+ }
+ } else {
+ station.textContent = 'engine off';
+ station.classList.add('idle');
+ sub.textContent = 'no model loaded · standing by';
+ LAST_MODEL = null;
+ }
+
+ // Odometer
+ document.getElementById('odo-uptime').textContent = fmtUptime(r.uptime_s || 0);
+ document.getElementById('odo-power').textContent = (r.power_mode || 'auto').toUpperCase();
+ document.getElementById('odo-calls').textContent = String(CALL_COUNT).padStart(4, '0');
+
+ } catch (e) {
+ console.warn('status fetch failed', e);
+ }
+}
+
+async function trigger(mode, btn) {
+ // Visual feedback: light up the pressed button, dim the others
+ document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ try {
+ const r = await fetch('/api/control/' + mode, { method: 'POST' });
+ const j = await r.json();
+ console.log('[control]', mode, j);
+ setTimeout(() => tick(), 400);
+ } catch (e) {
+ console.warn('control failed', e);
+ btn.classList.remove('active');
+ }
+}
+
+tick();
+setInterval(tick, 1200);
+</script>
+
+</body>
+</html>
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..7ab074a
--- /dev/null
+++ b/server.js
@@ -0,0 +1,164 @@
+// Mac Studio 1 dashboard — '57 Chevy convertible aesthetic.
+// - GET /api/status live Ollama state + CPU/RAM
+// - POST /api/control/X hyperdrive controls (RAM-pin models / power mode)
+// - GET / static dashboard
+
+const express = require('express');
+const { exec } = require('node:child_process');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const PORT = parseInt(process.env.PORT || '9930', 10);
+const OLLAMA = process.env.OLLAMA || 'http://localhost:11434';
+
+const app = express();
+app.use(express.json({ limit: '8kb' }));
+app.use(express.static(path.join(__dirname, 'public'), { maxAge: '5s' }));
+
+// Recent activity log — last 30 inference triggers seen via /api/ps polling.
+// Each tick of the front-end's fetch indirectly produces a record when ps changes.
+const recentCalls = []; // { at, model, queue }
+
+function pushCall(model, queue) {
+ recentCalls.unshift({ at: Date.now(), model, queue });
+ while (recentCalls.length > 30) recentCalls.pop();
+}
+
+function execCmd(cmd, timeoutMs = 4000) {
+ return new Promise((resolve) => {
+ exec(cmd, { timeout: timeoutMs, encoding: 'utf8' }, (err, stdout, stderr) => {
+ resolve({ ok: !err, stdout: stdout || '', stderr: stderr || '' });
+ });
+ });
+}
+
+async function readCpu() {
+ // top -l 1 -n 0 -F: one-shot, no per-process detail. Parse the "CPU usage" line.
+ const r = await execCmd('top -l 1 -n 0 -F');
+ const line = r.stdout.split('\n').find(l => /CPU usage:/i.test(l)) || '';
+ const m = line.match(/(\d+\.\d+)%\s+user.*?(\d+\.\d+)%\s+sys.*?(\d+\.\d+)%\s+idle/i);
+ if (!m) return { user: 0, sys: 0, idle: 100, total: 0 };
+ const user = parseFloat(m[1]), sys = parseFloat(m[2]), idle = parseFloat(m[3]);
+ return { user, sys, idle, total: +(user + sys).toFixed(1) };
+}
+
+async function readMemory() {
+ // sysctl hw.memsize for total, vm_stat for active/wired/free pages.
+ const total = await execCmd('sysctl -n hw.memsize');
+ const totalBytes = parseInt(total.stdout.trim(), 10) || 0;
+ const vm = await execCmd('vm_stat');
+ const pageSize = 16384; // ARM page size
+ let used = 0, free = 0;
+ for (const line of vm.stdout.split('\n')) {
+ const m = line.match(/Pages\s+(active|wired down|compressed):\s+(\d+)/i);
+ if (m) used += parseInt(m[2], 10) * pageSize;
+ const f = line.match(/Pages\s+free:\s+(\d+)/i);
+ if (f) free = parseInt(f[1], 10) * pageSize;
+ }
+ return {
+ total_bytes: totalBytes,
+ used_bytes: used,
+ free_bytes: free,
+ used_pct: totalBytes ? +(used / totalBytes * 100).toFixed(1) : 0
+ };
+}
+
+async function readOllama() {
+ try {
+ const res = await fetch(`${OLLAMA}/api/ps`, { signal: AbortSignal.timeout(2500) });
+ if (!res.ok) return { ok: false, status: res.status, models: [] };
+ const j = await res.json();
+ const models = (j.models || []).map(m => ({
+ name: m.name,
+ size_bytes: m.size,
+ size_vram_bytes: m.size_vram,
+ expires_at: m.expires_at,
+ details: m.details
+ }));
+ return { ok: true, models };
+ } catch (e) {
+ return { ok: false, error: String(e?.message || e), models: [] };
+ }
+}
+
+async function readPowerMode() {
+ const r = await execCmd('pmset -g | grep -E "powermode|lowpowermode"');
+ const text = r.stdout.toLowerCase();
+ if (/powermode\s+2/.test(text) || /high power/.test(text)) return 'high';
+ if (/powermode\s+1/.test(text) || /low power/.test(text)) return 'low';
+ return 'auto';
+}
+
+app.get('/api/status', async (_req, res) => {
+ try {
+ const [cpu, mem, oll, power] = await Promise.all([
+ readCpu(), readMemory(), readOllama(), readPowerMode()
+ ]);
+ if (oll.ok && oll.models.length > 0) {
+ pushCall(oll.models[0].name, 0);
+ }
+ res.set('Cache-Control', 'no-store');
+ res.json({
+ ts: Date.now(),
+ hostname: require('os').hostname(),
+ cpu, memory: mem, ollama: oll, power_mode: power,
+ recent_calls: recentCalls.slice(0, 10),
+ uptime_s: Math.round(require('os').uptime())
+ });
+ } catch (e) {
+ res.status(500).json({ error: String(e.message || e) });
+ }
+});
+
+// Hyperdrive — high-power mode + pin all loaded models in VRAM forever.
+// pmset requires sudo; if denied, returns clear failure (UI shows it).
+app.post('/api/control/hyperdrive', async (_req, res) => {
+ const out = {};
+ // Try power mode (sudo). Will fail without NOPASSWD; that's fine, surface it.
+ out.power = await execCmd('sudo -n pmset -a powermode 2 2>&1');
+ // Pin loaded models — re-call each with keep_alive -1 (Ollama re-applies).
+ const oll = await readOllama();
+ out.pinned = [];
+ for (const m of oll.models) {
+ const r = await execCmd(`curl -sS --max-time 4 -X POST ${OLLAMA}/api/generate -H "Content-Type: application/json" -d '{"model":"${m.name}","prompt":"","keep_alive":-1,"options":{"num_predict":1}}'`);
+ out.pinned.push({ model: m.name, ok: r.ok });
+ }
+ res.json({ ok: true, mode: 'hyperdrive', detail: out });
+});
+
+// Max RAM — load every installed model into memory + pin (-1 keep_alive)
+app.post('/api/control/max-ram', async (_req, res) => {
+ // List all installed models
+ const tagsR = await execCmd(`curl -sS --max-time 4 ${OLLAMA}/api/tags`);
+ let names = [];
+ try {
+ const j = JSON.parse(tagsR.stdout);
+ names = (j.models || []).map(m => m.name);
+ } catch {}
+ const out = [];
+ for (const name of names) {
+ // Fire-and-forget; load with no actual generation
+ const r = await execCmd(`curl -sS --max-time 8 -X POST ${OLLAMA}/api/generate -H "Content-Type: application/json" -d '{"model":"${name}","prompt":"","keep_alive":-1,"options":{"num_predict":1}}'`);
+ out.push({ model: name, ok: r.ok });
+ }
+ res.json({ ok: true, mode: 'max-ram', loaded: out });
+});
+
+// Idle — restore default power mode + unload models
+app.post('/api/control/idle', async (_req, res) => {
+ const out = {};
+ out.power = await execCmd('sudo -n pmset -a powermode 0 2>&1');
+ const oll = await readOllama();
+ out.unloaded = [];
+ for (const m of oll.models) {
+ const r = await execCmd(`curl -sS --max-time 4 -X POST ${OLLAMA}/api/generate -H "Content-Type: application/json" -d '{"model":"${m.name}","prompt":"","keep_alive":0}'`);
+ out.unloaded.push({ model: m.name, ok: r.ok });
+ }
+ res.json({ ok: true, mode: 'idle', detail: out });
+});
+
+app.get('/api/health', (_req, res) => res.json({ ok: true, ts: Date.now() }));
+
+app.listen(PORT, '0.0.0.0', () => {
+ console.log(`[macstudio1-dashboard] serving on http://0.0.0.0:${PORT}`);
+});
(oldest)
·
back to Macstudio1 Dashboard
·
feat: engine bay live process table below gauges 3ef920f →