Add themed widgets, calendar, and Open WebUI chat to the dashboard
- Apply GTK-like color scheme (dark greys, #f76b2f accent) across cards, buttons, glows and category colors - Service cards use the official logo icons; Netbird card shows live reachability + latency instead of a separate top widget - Top widgets: Today (calendar events with in-progress highlighting), Git activity (3 rows visible, scrollable), GPU with live ROCm stats and loaded Ollama models incl. GPU/CPU split - Open WebUI card: inline prompt line with model selection - Calendar section grouping events by day below the services - data.json fetch with boot retry; GPU/Ollama poll every 5 s - Today entries wrap long titles; README documents widgets, environment variables and the .env secrets pattern
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
# Homelab Dashboard
|
# Homelab Dashboard
|
||||||
|
|
||||||
A small, self-contained single-page dashboard that links all your homelab services.
|
A small, self-contained single-page dashboard that links all your homelab services.
|
||||||
Static site (HTML + CSS + JS), served by a lightweight **nginx** image. No backend, no
|
Static site (HTML + CSS + JS), served by a lightweight **nginx** image. The optional
|
||||||
database, no build step — just static files.
|
calendar widget needs the container backend to refresh Google/ICS feeds, but the
|
||||||
|
rest of the dashboard is pure static files.
|
||||||
|
|
||||||
## Services
|
## Services
|
||||||
|
|
||||||
@@ -13,10 +14,18 @@ External: gitlab-ixsol, gem360.
|
|||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
- Top widgets: **Today** (calendar events for today, with in-progress highlighting),
|
||||||
|
**Netbird** status (reachability + latency), **Git activity** (recent commits from
|
||||||
|
Gitea and GitLab — 3 rows visible, scroll for more), **GPU + Ollama** (live AMD
|
||||||
|
ROCm stats: utilization, VRAM, temperature, power; plus loaded Ollama models
|
||||||
|
with their GPU/CPU split)
|
||||||
|
- Inline **Open WebUI prompt line with model selection** in the Open WebUI card
|
||||||
|
(requires `OPENWEBUI_TOKEN`)
|
||||||
- Responsive grid of service cards with icons, categories and a live "Online" indicator
|
- Responsive grid of service cards with icons, categories and a live "Online" indicator
|
||||||
- **Open** (new tab) + **Copy URL** per service
|
- **Open** (new tab) + **Copy URL** per service
|
||||||
- Live search / filter across names, categories and URLs
|
- Live search / filter across names, categories and URLs
|
||||||
- Live local clock
|
- Live local clock
|
||||||
|
- Calendar section aggregating multiple ICS feeds (refreshed every 15 min in the container)
|
||||||
- Dark, themeable design; respects `prefers-reduced-motion`
|
- Dark, themeable design; respects `prefers-reduced-motion`
|
||||||
|
|
||||||
## Run with Docker
|
## Run with Docker
|
||||||
@@ -27,9 +36,43 @@ docker compose up -d --build
|
|||||||
|
|
||||||
Then open <http://localhost:8888>.
|
Then open <http://localhost:8888>.
|
||||||
|
|
||||||
|
The dashboard is static, but the widgets are populated by a small Node.js updater
|
||||||
|
(`api/update-data.js`) that runs inside the container and aggregates ICS feeds,
|
||||||
|
Netbird status, git activity and Open WebUI models every 15 minutes. A second
|
||||||
|
Node process (`api/server.js`) proxies chat prompts to Open WebUI.
|
||||||
|
|
||||||
|
### Environment variables
|
||||||
|
|
||||||
|
Secrets (API keys) live in **`.env`** (gitignored) — docker compose reads it
|
||||||
|
automatically. Non-secret settings go directly in `docker-compose.yml`:
|
||||||
|
|
||||||
|
| Variable | Purpose |
|
||||||
|
| --- | --- |
|
||||||
|
| `TZ` | Timezone used for the "Today" widget (e.g. `Europe/Vienna`) |
|
||||||
|
| `OPENWEBUI_TOKEN` | Open WebUI API key — enables the prompt line + model list (**set in `.env`**) |
|
||||||
|
| `GITEA_TOKEN` | Gitea API token — private repo stats (public repos work without it) |
|
||||||
|
| `GITLAB_TOKEN` | GitLab API token — private project stats (public projects work without it) |
|
||||||
|
| `GITEA_URL` / `GITLAB_URL` / `NETBIRD_URL` / `OPENWEBUI_URL` | Override the default service URLs |
|
||||||
|
| `GPU_STATS_URL` | GPU stats upstream (default: the `gpu-stats` compose service) |
|
||||||
|
| `OLLAMA_URL` | Ollama instance for loaded-model stats (default: `http://100.103.83.12:11435`) |
|
||||||
|
|
||||||
|
### GPU stats service
|
||||||
|
|
||||||
|
The `gpu-stats` compose service runs [`gpu_stats.py`](./gpu_stats.py), a tiny HTTP
|
||||||
|
server that queries `rocm-smi`. It needs the host's ROCm install and GPU device
|
||||||
|
nodes, so the compose file mounts `/opt/rocm` and passes `/dev/kfd` + `/dev/dri`.
|
||||||
|
Set `GPU_NAME` in `docker-compose.yml` to your card's name (rocm-smi can't read it
|
||||||
|
inside the container without `libdrm_amdgpu`). The widget polls it every 5 s
|
||||||
|
through `/api/gpu-stats`.
|
||||||
|
|
||||||
|
To run it on the host instead: `python3 gpu_stats.py`, set
|
||||||
|
`GPU_STATS_URL=http://host.docker.internal:9101/stats` on the dashboard service
|
||||||
|
and add `extra_hosts: ["host.docker.internal:host-gateway"]`.
|
||||||
|
|
||||||
### Without Docker (quick dev)
|
### Without Docker (quick dev)
|
||||||
|
|
||||||
Any static file server works:
|
Any static file server works for the dashboard itself, but the widgets will
|
||||||
|
show errors because the data fetcher and chat proxy run server-side:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# from this directory
|
# from this directory
|
||||||
@@ -61,4 +104,6 @@ docker run -d --name homelab-dashboard -p 8888:80 --restart unless-stopped homel
|
|||||||
- The "Online" badge is cosmetic (a static site can't probe your services from the browser
|
- The "Online" badge is cosmetic (a static site can't probe your services from the browser
|
||||||
due to CORS). If you want real health checks later, a tiny backend that pings each URL
|
due to CORS). If you want real health checks later, a tiny backend that pings each URL
|
||||||
would be the next step.
|
would be the next step.
|
||||||
|
- Calendar dependencies are bundled in `api/node_modules` so the Docker build works
|
||||||
|
offline. To update them, run `npm install` in the `api/` directory.
|
||||||
- Port 8888 is published by the Compose file; change it there if needed.
|
- Port 8888 is published by the Compose file; change it there if needed.
|
||||||
|
|||||||
+50
@@ -51,10 +51,60 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<section class="widgets" id="widgets" aria-label="Live widgets">
|
||||||
|
<article class="widget widget-calendar" id="widget-calendar">
|
||||||
|
<div class="widget-head">
|
||||||
|
<div class="widget-icon" aria-hidden="true">📅</div>
|
||||||
|
<span class="widget-title">Today</span>
|
||||||
|
</div>
|
||||||
|
<div class="widget-body" id="today-events">
|
||||||
|
<p class="widget-loading">Loading…</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="widget widget-git" id="widget-git">
|
||||||
|
<div class="widget-head">
|
||||||
|
<div class="widget-icon" aria-hidden="true">🐙</div>
|
||||||
|
<span class="widget-title">Git activity</span>
|
||||||
|
</div>
|
||||||
|
<div class="widget-body" id="git-stats">
|
||||||
|
<p class="widget-loading">Loading…</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="widget widget-gpu" id="widget-gpu">
|
||||||
|
<div class="widget-head">
|
||||||
|
<div class="widget-icon" aria-hidden="true">🖥️</div>
|
||||||
|
<span class="widget-title">GPU</span>
|
||||||
|
</div>
|
||||||
|
<div class="widget-body">
|
||||||
|
<div id="gpu-stats">
|
||||||
|
<p class="widget-loading">Loading…</p>
|
||||||
|
</div>
|
||||||
|
<div class="ollama-block">
|
||||||
|
<div class="ollama-label">Ollama</div>
|
||||||
|
<div id="ollama-stats">
|
||||||
|
<p class="widget-loading">Loading…</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
<main id="app">
|
<main id="app">
|
||||||
<!-- sections rendered by script.js -->
|
<!-- sections rendered by script.js -->
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<section class="calendar-section" aria-labelledby="calendar-title">
|
||||||
|
<h2 id="calendar-title" class="section-title">
|
||||||
|
Calendar
|
||||||
|
<span class="count" id="calendar-count">0</span>
|
||||||
|
</h2>
|
||||||
|
<div id="calendar" class="calendar">
|
||||||
|
<p class="calendar-loading">Loading calendar…</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<span id="stats"></span>
|
<span id="stats"></span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -5,40 +5,41 @@
|
|||||||
// name : display name
|
// name : display name
|
||||||
// url : full URL (with http:// or https://)
|
// url : full URL (with http:// or https://)
|
||||||
// cat : a key from the CATEGORIES map below
|
// cat : a key from the CATEGORIES map below
|
||||||
// icon : an emoji (or any short text)
|
// icon : an emoji (or any short text), or HTML such as
|
||||||
|
// '<img class="card-logo" src="icons/jellyfin.svg" alt="" />'
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
const CATEGORIES = {
|
const CATEGORIES = {
|
||||||
ai: { label: "AI", color: "#a855f7" },
|
ai: { label: "AI", color: "#c970b0" },
|
||||||
dev: { label: "Development", color: "#3b82f6" },
|
dev: { label: "Development", color: "#5c8ad8" },
|
||||||
media: { label: "Media", color: "#ec4899" },
|
media: { label: "Media", color: "#e0554a" },
|
||||||
photos: { label: "Photos", color: "#14b8a6" },
|
photos: { label: "Photos", color: "#8ab06a" },
|
||||||
smartHome: { label: "Smart Home", color: "#10b981" },
|
smartHome: { label: "Smart Home", color: "#f2a944" },
|
||||||
audio: { label: "Audio", color: "#f97316" },
|
audio: { label: "Audio", color: "#f76b2f" },
|
||||||
storage: { label: "Storage", color: "#6366f1" },
|
storage: { label: "Storage", color: "#5c8ad8" },
|
||||||
security: { label: "Security", color: "#f43f5e" },
|
security: { label: "Security", color: "#e0554a" },
|
||||||
infra: { label: "Infrastructure", color: "#f59e0b" },
|
infra: { label: "Infrastructure", color: "#8c8f94" },
|
||||||
network: { label: "Networking", color: "#0ea5e9" },
|
network: { label: "Networking", color: "#f76b2f" },
|
||||||
external: { label: "External", color: "#22d3ee" },
|
external: { label: "External", color: "#c970b0" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const SERVICES = [
|
const SERVICES = [
|
||||||
// ----- Internal -----
|
// ----- Internal -----
|
||||||
{ section: "internal", name: "Open WebUI", url: "http://100.103.83.12:3000", cat: "ai", icon: "🤖" },
|
{ section: "internal", name: "Open WebUI", url: "http://100.103.83.12:3000", cat: "ai", icon: '<img class="card-logo" src="icons/openwebui.svg" alt="" />', chat: true },
|
||||||
{ section: "internal", name: "ComfyUI", url: "http://100.103.83.12:8288", cat: "ai", icon: "🎨" },
|
{ section: "internal", name: "ComfyUI", url: "http://100.103.83.12:8288", cat: "ai", icon: '<img class="card-logo" src="icons/comfyui.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Gitea", url: "http://100.103.83.12:3003", cat: "dev", icon: "🐙" },
|
{ section: "internal", name: "Gitea", url: "http://100.103.83.12:3003", cat: "dev", icon: '<img class="card-logo" src="icons/gitea.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Jellyfin", url: "http://100.103.83.12:8096", cat: "media", icon: "🎬" },
|
{ section: "internal", name: "Jellyfin", url: "http://100.103.83.12:8096", cat: "media", icon: '<img class="card-logo" src="icons/jellyfin.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Immich", url: "http://100.103.83.12:2283", cat: "photos", icon: "📸" },
|
{ section: "internal", name: "Immich", url: "http://100.103.83.12:2283", cat: "photos", icon: '<img class="card-logo" src="icons/immich.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Home Assistant", url: "http://192.168.178.45:8123", cat: "smartHome", icon: "🏠" },
|
{ section: "internal", name: "Home Assistant", url: "http://192.168.178.45:8123", cat: "smartHome", icon: '<img class="card-logo" src="icons/homeassistant.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Audio Server / Dubplate", url: "http://192.168.178.100:8180", cat: "audio", icon: "🎧" },
|
{ section: "internal", name: "Audio Server / Dubplate", url: "http://192.168.178.100:8180", cat: "audio", icon: '<img class="card-logo" src="icons/audio.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Nextcloud", url: "https://cloud.gg36", cat: "storage", icon: "☁️" },
|
{ section: "internal", name: "Nextcloud", url: "https://cloud.gg36", cat: "storage", icon: '<img class="card-logo" src="icons/nextcloud.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Vaultwarden", url: "https://vault.gg36.at", cat: "security", icon: "🔐" },
|
{ section: "internal", name: "Vaultwarden", url: "https://vault.gg36.at", cat: "security", icon: '<img class="card-logo" src="icons/vaultwarden.svg" alt="" />' },
|
||||||
{ section: "internal", name: "Nginx Proxy Manager", url: "http://192.168.178.194:81", cat: "infra", icon: "⚙️" },
|
{ section: "internal", name: "Nginx Proxy Manager", url: "http://192.168.178.194:81", cat: "infra", icon: "⚙️" },
|
||||||
{ section: "internal", name: "Netbird", url: "https://netbird.gg36.at", cat: "network", icon: "🛰️" },
|
{ section: "internal", name: "Netbird", url: "https://netbird.gg36.at", cat: "network", icon: '<img class="card-logo" src="icons/netbird.svg" alt="" />', liveStatus: "netbird" },
|
||||||
|
|
||||||
// ----- External -----
|
// ----- External -----
|
||||||
{ section: "external", name: "gitlab-ixsol", url: "https://gitlab.ixsol.wien", cat: "external", icon: "🐙" },
|
{ section: "external", name: "gitlab-ixsol", url: "https://gitlab.ixsol.wien", cat: "external", icon: '<img class="card-logo" src="icons/gitlab.svg" alt="" />' },
|
||||||
{ section: "external", name: "gem360", url: "https://gem360.ixslo.wien", cat: "external", icon: "🎮" },
|
{ section: "external", name: "gem360", url: "https://gem360.ixslo.wien", cat: "external", icon: '<img class="card-logo" src="icons/odoo.svg" alt="" />' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const SECTION_META = {
|
const SECTION_META = {
|
||||||
@@ -46,6 +47,342 @@ const SECTION_META = {
|
|||||||
external: { title: "External", order: 2 },
|
external: { title: "External", order: 2 },
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Data feed (calendar + widgets). One fetch serves both; retries shortly
|
||||||
|
// after boot because the server-side updater may still be running.
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
let dataRetries = 0;
|
||||||
|
|
||||||
|
async function loadData() {
|
||||||
|
let data;
|
||||||
|
try {
|
||||||
|
const res = await fetch("data.json", { cache: "no-store" });
|
||||||
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
data = await res.json();
|
||||||
|
dataRetries = 0;
|
||||||
|
} catch (err) {
|
||||||
|
const msg = escapeHtml(err.message);
|
||||||
|
document.getElementById("today-events").innerHTML = `<p class="widget-error">${msg}</p>`;
|
||||||
|
document.getElementById("git-stats").innerHTML = `<p class="widget-error">${msg}</p>`;
|
||||||
|
const nbEl = document.querySelector('[data-live-status="netbird"]');
|
||||||
|
if (nbEl) nbEl.innerHTML = `<span class="widget-error">${msg}</span>`;
|
||||||
|
const calendarEl = document.getElementById("calendar");
|
||||||
|
calendarEl.innerHTML = `<p class="calendar-error">Data unavailable: ${msg}</p>`;
|
||||||
|
document.getElementById("calendar-count").textContent = "0";
|
||||||
|
if (dataRetries < 3) {
|
||||||
|
dataRetries++;
|
||||||
|
setTimeout(loadData, 30000);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderWidgets(data);
|
||||||
|
renderCalendar(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderWidgets(data) {
|
||||||
|
renderTodayWidget(data.calendar?.today || [], data.calendars || []);
|
||||||
|
renderNetbirdWidget(data.netbird);
|
||||||
|
renderGitWidget(data.git);
|
||||||
|
|
||||||
|
if (data.openwebui?.models?.length) {
|
||||||
|
populateOpenWebUIModels(data.openwebui.models);
|
||||||
|
} else {
|
||||||
|
document.querySelectorAll(".chat-model").forEach((select) => {
|
||||||
|
select.innerHTML = `<option value="" disabled selected>No models — set OPENWEBUI_TOKEN</option>`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCalendar(data) {
|
||||||
|
const calendarEl = document.getElementById("calendar");
|
||||||
|
const countEl = document.getElementById("calendar-count");
|
||||||
|
const calMap = Object.fromEntries((data.calendars || []).map((c) => [c.id, c]));
|
||||||
|
const upcoming = (data.calendar?.upcoming || []).slice(0, 60);
|
||||||
|
|
||||||
|
if (upcoming.length === 0) {
|
||||||
|
calendarEl.innerHTML = `<p class="calendar-empty">No upcoming events.</p>`;
|
||||||
|
countEl.textContent = "0";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const grouped = groupEventsByDay(upcoming);
|
||||||
|
|
||||||
|
calendarEl.innerHTML = Object.entries(grouped)
|
||||||
|
.map(([day, events]) => {
|
||||||
|
return `
|
||||||
|
<div class="calendar-day">
|
||||||
|
<div class="calendar-day-header">${escapeHtml(day)}</div>
|
||||||
|
<div class="calendar-events">
|
||||||
|
${events.map((e) => renderEvent(e, calMap[e.calendarId])).join("")}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
countEl.textContent = String(upcoming.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
function groupEventsByDay(events) {
|
||||||
|
const groups = {};
|
||||||
|
const fmt = new Intl.DateTimeFormat(undefined, {
|
||||||
|
weekday: "short",
|
||||||
|
day: "numeric",
|
||||||
|
month: "short",
|
||||||
|
});
|
||||||
|
for (const e of events) {
|
||||||
|
const key = fmt.format(new Date(e.start));
|
||||||
|
(groups[key] ||= []).push(e);
|
||||||
|
}
|
||||||
|
return groups;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderEvent(e, cal) {
|
||||||
|
const start = new Date(e.start);
|
||||||
|
const end = e.end ? new Date(e.end) : null;
|
||||||
|
const calColor = cal?.color || "var(--accent)";
|
||||||
|
|
||||||
|
let timeText;
|
||||||
|
if (e.allDay) {
|
||||||
|
timeText = "All day";
|
||||||
|
} else {
|
||||||
|
const fmt = new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" });
|
||||||
|
if (end) {
|
||||||
|
timeText = `${fmt.format(start)} – ${fmt.format(end)}`;
|
||||||
|
} else {
|
||||||
|
timeText = fmt.format(start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const location = e.location ? `<div class="event-location">📍 ${escapeHtml(e.location)}</div>` : "";
|
||||||
|
const description = e.description
|
||||||
|
? `<div class="event-description">${escapeHtml(e.description.split("\n")[0])}</div>`
|
||||||
|
: "";
|
||||||
|
|
||||||
|
return `
|
||||||
|
<article class="calendar-event" style="--cal:${calColor}">
|
||||||
|
<div class="event-dot" aria-hidden="true"></div>
|
||||||
|
<div class="event-body">
|
||||||
|
<div class="event-time">${escapeHtml(timeText)}</div>
|
||||||
|
<div class="event-title">${escapeHtml(e.summary)}</div>
|
||||||
|
${location}
|
||||||
|
${description}
|
||||||
|
</div>
|
||||||
|
</article>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Top widgets (today, netbird, git)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function renderTodayWidget(events, calendars) {
|
||||||
|
const el = document.getElementById("today-events");
|
||||||
|
const calMap = Object.fromEntries(calendars.map((c) => [c.id, c]));
|
||||||
|
|
||||||
|
if (events.length === 0) {
|
||||||
|
el.innerHTML = `<p class="widget-empty">No events today.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
el.innerHTML = events
|
||||||
|
.sort((a, b) => new Date(a.start) - new Date(b.start))
|
||||||
|
.map((e) => {
|
||||||
|
const cal = calMap[e.calendarId];
|
||||||
|
const color = cal?.color || "var(--accent)";
|
||||||
|
const time = e.allDay ? "All day" : new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" }).format(new Date(e.start));
|
||||||
|
const startT = new Date(e.start).getTime();
|
||||||
|
const endT = e.end ? new Date(e.end).getTime() : startT;
|
||||||
|
const nowT = Date.now();
|
||||||
|
let state = "";
|
||||||
|
if (!e.allDay) {
|
||||||
|
if (nowT > endT) state = "past";
|
||||||
|
else if (nowT >= startT) state = "now";
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<div class="today-event ${state}" style="--cal:${color}">
|
||||||
|
<span class="today-dot" aria-hidden="true"></span>
|
||||||
|
<span class="today-time">${escapeHtml(time)}</span>
|
||||||
|
<span class="today-summary">${escapeHtml(e.summary)}</span>
|
||||||
|
</div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderNetbirdWidget(status) {
|
||||||
|
// Renders into the Netbird service card (data-live-status="netbird").
|
||||||
|
const el = document.querySelector('[data-live-status="netbird"]');
|
||||||
|
if (!el) return;
|
||||||
|
|
||||||
|
if (!status) {
|
||||||
|
el.innerHTML = `<span class="widget-error">Status unavailable</span>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const online = status.status === "online";
|
||||||
|
const dotClass = online ? "online" : "offline";
|
||||||
|
const text = online ? "Reachable" : status.error || "Unreachable";
|
||||||
|
const latency = status.latencyMs ? `<span class="netbird-latency"> · ${status.latencyMs} ms</span>` : "";
|
||||||
|
|
||||||
|
el.innerHTML = `
|
||||||
|
<span class="netbird-dot ${dotClass}" aria-hidden="true"></span>
|
||||||
|
<span class="netbird-text">${escapeHtml(text)}${latency}</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderGitWidget(git) {
|
||||||
|
const el = document.getElementById("git-stats");
|
||||||
|
if (!git) {
|
||||||
|
el.innerHTML = `<p class="widget-empty">Git stats unavailable.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const gitea = git.gitea || { repos: 0, recentCommits: [], error: null };
|
||||||
|
const gitlab = git.gitlab || { projects: 0, recentCommits: [], error: null };
|
||||||
|
|
||||||
|
const giteaError = gitea.error ? `<div class="git-error">Gitea: ${escapeHtml(gitea.error)}</div>` : "";
|
||||||
|
const gitlabError = gitlab.error ? `<div class="git-error">GitLab: ${escapeHtml(gitlab.error)}</div>` : "";
|
||||||
|
|
||||||
|
const allCommits = [...gitea.recentCommits, ...gitlab.recentCommits]
|
||||||
|
.sort((a, b) => new Date(b.date || 0) - new Date(a.date || 0))
|
||||||
|
.slice(0, 8);
|
||||||
|
|
||||||
|
let commitsHtml;
|
||||||
|
if (allCommits.length === 0) {
|
||||||
|
commitsHtml = `<div class="widget-empty">No recent commits visible.</div>`;
|
||||||
|
} else {
|
||||||
|
// The list is capped to ~3 visible rows via CSS (max-height) and scrolls.
|
||||||
|
commitsHtml = `<ul class="git-commits">
|
||||||
|
${allCommits
|
||||||
|
.map((c) => {
|
||||||
|
const repo = escapeHtml(c.repo).split("/").pop();
|
||||||
|
const msg = escapeHtml(c.message);
|
||||||
|
const author = escapeHtml(c.author);
|
||||||
|
const when = c.date
|
||||||
|
? new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" }).format(new Date(c.date))
|
||||||
|
: "";
|
||||||
|
return `<li class="git-commit" title="${escapeHtml(c.repo)}">
|
||||||
|
<span class="git-repo">${repo}</span>
|
||||||
|
<span class="git-msg">${msg}</span>
|
||||||
|
<span class="git-meta">${author}${when ? ` · ${when}` : ""}</span>
|
||||||
|
</li>`;
|
||||||
|
})
|
||||||
|
.join("")}
|
||||||
|
</ul>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
el.innerHTML = `
|
||||||
|
<div class="git-summary">
|
||||||
|
<span class="git-badge gitea">Gitea ${gitea.repos || 0}</span>
|
||||||
|
<span class="git-badge gitlab">GitLab ${gitlab.projects || 0}</span>
|
||||||
|
<span class="git-badge total">Commits ${gitea.recentCommits.length + gitlab.recentCommits.length}</span>
|
||||||
|
</div>
|
||||||
|
${giteaError}
|
||||||
|
${gitlabError}
|
||||||
|
${commitsHtml}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// GPU widget (live rocm-smi stats via /api/gpu-stats)
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function renderGpuWidget(g) {
|
||||||
|
const el = document.getElementById("gpu-stats");
|
||||||
|
if (!g || g.error) {
|
||||||
|
el.innerHTML = `<p class="widget-error">${escapeHtml(g?.error || "GPU stats unavailable")}</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const util = Math.max(0, Math.min(100, g.utilization ?? 0));
|
||||||
|
const memPct = g.memory_total
|
||||||
|
? Math.max(0, Math.min(100, Math.round((g.memory_used / g.memory_total) * 100)))
|
||||||
|
: 0;
|
||||||
|
const gb = (mb) => (mb / 1024).toFixed(1);
|
||||||
|
|
||||||
|
const temp = g.temperature ?? null;
|
||||||
|
let tempClass = "";
|
||||||
|
if (temp != null) {
|
||||||
|
if (temp >= 80) tempClass = "hot";
|
||||||
|
else if (temp >= 65) tempClass = "warm";
|
||||||
|
}
|
||||||
|
|
||||||
|
el.innerHTML = `
|
||||||
|
<div class="gpu-name" title="${escapeHtml(g.name || "GPU")}">${escapeHtml(g.name || "GPU")}</div>
|
||||||
|
<div class="gpu-row">
|
||||||
|
<span class="gpu-label">Utilization</span>
|
||||||
|
<span class="gpu-val">${util}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="gpu-bar"><div class="gpu-bar-fill util" style="width:${util}%"></div></div>
|
||||||
|
<div class="gpu-row">
|
||||||
|
<span class="gpu-label">VRAM</span>
|
||||||
|
<span class="gpu-val">${gb(g.memory_used || 0)} / ${gb(g.memory_total || 0)} GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="gpu-bar"><div class="gpu-bar-fill mem" style="width:${memPct}%"></div></div>
|
||||||
|
<div class="gpu-meta">
|
||||||
|
${temp != null ? `<span class="gpu-temp ${tempClass}">${temp}°C</span>` : ""}
|
||||||
|
${g.power_w != null ? `<span>${Math.round(g.power_w)} W</span>` : ""}
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadGpuStats() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/gpu-stats", { cache: "no-store" });
|
||||||
|
const data = await res.json();
|
||||||
|
if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
|
||||||
|
renderGpuWidget(data);
|
||||||
|
} catch (err) {
|
||||||
|
document.getElementById("gpu-stats").innerHTML =
|
||||||
|
`<p class="widget-error">${escapeHtml(err.message)}</p>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Ollama stats (loaded models + GPU/CPU split) via /api/ollama
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function renderOllamaStats(data) {
|
||||||
|
const el = document.getElementById("ollama-stats");
|
||||||
|
const models = data?.models || [];
|
||||||
|
|
||||||
|
if (models.length === 0) {
|
||||||
|
el.innerHTML = `<div class="widget-empty">No model loaded</div>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const gib = (bytes) => `${(bytes / 1073741824).toFixed(1)} GiB`;
|
||||||
|
|
||||||
|
el.innerHTML = models
|
||||||
|
.map((m) => {
|
||||||
|
const size = m.size || 0;
|
||||||
|
const vram = m.size_vram ?? 0;
|
||||||
|
const gpuPct = size > 0 ? Math.max(0, Math.min(100, Math.round((vram / size) * 100))) : 0;
|
||||||
|
const cpuPct = 100 - gpuPct;
|
||||||
|
const name = (m.name || m.model || "model").replace(":latest", "");
|
||||||
|
return `
|
||||||
|
<div class="ollama-model">
|
||||||
|
<div class="ollama-model-head">
|
||||||
|
<span class="ollama-name" title="${escapeHtml(m.name || "")}">${escapeHtml(name)}</span>
|
||||||
|
<span class="ollama-size">${gib(size)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ollama-split">
|
||||||
|
<span class="ollama-gpu">GPU ${gpuPct}%</span> · <span class="ollama-cpu">CPU ${cpuPct}%</span>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadOllamaStats() {
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/ollama", { cache: "no-store" });
|
||||||
|
const data = await res.json();
|
||||||
|
if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
|
||||||
|
renderOllamaStats(data);
|
||||||
|
} catch (err) {
|
||||||
|
document.getElementById("ollama-stats").innerHTML =
|
||||||
|
`<p class="widget-error">${escapeHtml(err.message)}</p>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Rendering
|
// Rendering
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@@ -66,6 +403,22 @@ function escapeHtml(str) {
|
|||||||
function cardTemplate(s, idx) {
|
function cardTemplate(s, idx) {
|
||||||
const meta = CATEGORIES[s.cat] || { label: s.cat || "Service", color: "var(--accent)" };
|
const meta = CATEGORIES[s.cat] || { label: s.cat || "Service", color: "var(--accent)" };
|
||||||
const urlHost = s.url.replace(/^https?:\/\//, "").replace(/\/$/, "");
|
const urlHost = s.url.replace(/^https?:\/\//, "").replace(/\/$/, "");
|
||||||
|
const chatForm = s.chat
|
||||||
|
? `<div class="card-chat" data-chat-url="${escapeHtml(s.url)}">
|
||||||
|
<div class="chat-row">
|
||||||
|
<select class="chat-model" aria-label="Model">
|
||||||
|
<option value="" disabled selected>Loading models…</option>
|
||||||
|
</select>
|
||||||
|
<input type="text" class="chat-prompt" placeholder="Ask something…" autocomplete="off" />
|
||||||
|
<button class="chat-send" type="button" title="Send prompt">
|
||||||
|
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
|
||||||
|
<path fill="currentColor" d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="chat-response" aria-live="polite"></div>
|
||||||
|
</div>`
|
||||||
|
: "";
|
||||||
return `
|
return `
|
||||||
<article class="card" data-search="${escapeHtml((s.name + " " + meta.label + " " + s.url).toLowerCase())}"
|
<article class="card" data-search="${escapeHtml((s.name + " " + meta.label + " " + s.url).toLowerCase())}"
|
||||||
style="--cat:${meta.color}; animation-delay:${Math.min(idx * 35, 400)}ms">
|
style="--cat:${meta.color}; animation-delay:${Math.min(idx * 35, 400)}ms">
|
||||||
@@ -78,6 +431,7 @@ function cardTemplate(s, idx) {
|
|||||||
<h3 class="card-name">${escapeHtml(s.name)}</h3>
|
<h3 class="card-name">${escapeHtml(s.name)}</h3>
|
||||||
<span class="card-url" title="${escapeHtml(s.url)}">${escapeHtml(urlHost)}</span>
|
<span class="card-url" title="${escapeHtml(s.url)}">${escapeHtml(urlHost)}</span>
|
||||||
</div>
|
</div>
|
||||||
|
${s.liveStatus ? `<div class="card-live-status" data-live-status="${escapeHtml(s.liveStatus)}"><span class="widget-loading">Checking status…</span></div>` : ""}
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<a class="btn btn-primary" href="${escapeHtml(s.url)}" target="_blank" rel="noopener noreferrer">
|
<a class="btn btn-primary" href="${escapeHtml(s.url)}" target="_blank" rel="noopener noreferrer">
|
||||||
Open
|
Open
|
||||||
@@ -94,6 +448,7 @@ function cardTemplate(s, idx) {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
${chatForm}
|
||||||
</article>`;
|
</article>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -122,6 +477,7 @@ function render() {
|
|||||||
} external`;
|
} external`;
|
||||||
|
|
||||||
bindCopyButtons();
|
bindCopyButtons();
|
||||||
|
bindOpenWebUIChat();
|
||||||
}
|
}
|
||||||
|
|
||||||
function bindCopyButtons() {
|
function bindCopyButtons() {
|
||||||
@@ -145,6 +501,60 @@ function bindCopyButtons() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function populateOpenWebUIModels(models) {
|
||||||
|
document.querySelectorAll(".chat-model").forEach((select) => {
|
||||||
|
const current = select.value;
|
||||||
|
select.innerHTML = models
|
||||||
|
.map((m) => `<option value="${escapeHtml(m.id)}"${m.id === current ? " selected" : ""}>${escapeHtml(m.name)}</option>`)
|
||||||
|
.join("");
|
||||||
|
if (!select.value && models[0]) select.value = models[0].id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindOpenWebUIChat() {
|
||||||
|
document.querySelectorAll(".card-chat").forEach((container) => {
|
||||||
|
const select = container.querySelector(".chat-model");
|
||||||
|
const input = container.querySelector(".chat-prompt");
|
||||||
|
const sendBtn = container.querySelector(".chat-send");
|
||||||
|
const responseEl = container.querySelector(".chat-response");
|
||||||
|
|
||||||
|
async function send() {
|
||||||
|
const model = select?.value;
|
||||||
|
const prompt = input?.value.trim();
|
||||||
|
if (!prompt) return;
|
||||||
|
if (!model) {
|
||||||
|
responseEl.textContent = "No model available — set OPENWEBUI_TOKEN on the container.";
|
||||||
|
responseEl.classList.add("error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
responseEl.textContent = "Thinking…";
|
||||||
|
responseEl.classList.remove("error");
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/chat", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ model, prompt }),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
|
||||||
|
responseEl.textContent = data.message || "(no response)";
|
||||||
|
} catch (e) {
|
||||||
|
responseEl.textContent = e.message;
|
||||||
|
responseEl.classList.add("error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sendBtn?.addEventListener("click", send);
|
||||||
|
input?.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
send();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
// Search / filter
|
// Search / filter
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
@@ -198,3 +608,9 @@ render();
|
|||||||
tickClock();
|
tickClock();
|
||||||
setInterval(tickClock, 1000);
|
setInterval(tickClock, 1000);
|
||||||
searchInput.addEventListener("input", filter);
|
searchInput.addEventListener("input", filter);
|
||||||
|
loadData();
|
||||||
|
setInterval(loadData, 5 * 60 * 1000); // refresh data every 5 min
|
||||||
|
loadGpuStats();
|
||||||
|
setInterval(loadGpuStats, 5000); // live GPU stats every 5 s
|
||||||
|
loadOllamaStats();
|
||||||
|
setInterval(loadOllamaStats, 5000); // live Ollama loaded models every 5 s
|
||||||
|
|||||||
@@ -1,16 +1,16 @@
|
|||||||
:root {
|
:root {
|
||||||
--bg: #070b14;
|
--bg: #161719;
|
||||||
--bg-soft: #0b1220;
|
--bg-soft: #1b1c1e;
|
||||||
--surface: rgba(255, 255, 255, 0.035);
|
--surface: rgba(255, 255, 255, 0.035);
|
||||||
--surface-hover: rgba(255, 255, 255, 0.06);
|
--surface-hover: #232527;
|
||||||
--border: rgba(255, 255, 255, 0.09);
|
--border: rgba(255, 255, 255, 0.09);
|
||||||
--border-hover: rgba(255, 255, 255, 0.18);
|
--border-hover: rgba(255, 255, 255, 0.18);
|
||||||
--text: #e7ecf5;
|
--text: #d6d8da;
|
||||||
--muted: #8a94a8;
|
--muted: #8c8f94;
|
||||||
--muted-2: #636e84;
|
--muted-2: #6b6e73;
|
||||||
--accent: #22d3ee;
|
--accent: #f76b2f;
|
||||||
--accent-2: #a855f7;
|
--accent-2: #5c8ad8;
|
||||||
--online: #34d399;
|
--online: #8ab06a;
|
||||||
--radius: 18px;
|
--radius: 18px;
|
||||||
--radius-sm: 12px;
|
--radius-sm: 12px;
|
||||||
--shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
|
--shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
|
||||||
@@ -43,9 +43,9 @@ body {
|
|||||||
z-index: 0;
|
z-index: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background:
|
background:
|
||||||
radial-gradient(60% 50% at 12% -5%, rgba(34, 211, 238, 0.14), transparent 60%),
|
radial-gradient(60% 50% at 12% -5%, rgba(247, 107, 47, 0.12), transparent 60%),
|
||||||
radial-gradient(55% 45% at 95% 0%, rgba(168, 85, 247, 0.14), transparent 60%),
|
radial-gradient(55% 45% at 95% 0%, rgba(92, 138, 216, 0.12), transparent 60%),
|
||||||
radial-gradient(70% 60% at 50% 120%, rgba(52, 211, 153, 0.08), transparent 60%);
|
radial-gradient(70% 60% at 50% 120%, rgba(138, 176, 106, 0.07), transparent 60%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.shell {
|
.shell {
|
||||||
@@ -77,7 +77,7 @@ body {
|
|||||||
height: 46px;
|
height: 46px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||||
box-shadow: 0 10px 30px -8px rgba(34, 211, 238, 0.6);
|
box-shadow: 0 10px 30px -8px rgba(247, 107, 47, 0.5);
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
@@ -277,6 +277,12 @@ main#app {
|
|||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-icon img {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -296,17 +302,17 @@ main#app {
|
|||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--online);
|
background: var(--online);
|
||||||
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 18%, transparent);
|
||||||
animation: pulse 2.4s ease-in-out infinite;
|
animation: pulse 2.4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 18%, transparent);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.05);
|
box-shadow: 0 0 0 5px color-mix(in srgb, var(--online) 5%, transparent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -379,13 +385,13 @@ main#app {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
background: linear-gradient(135deg, var(--accent), #c8531f);
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
color: #05070d;
|
color: #1b1c1e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
background: linear-gradient(135deg, #38dbf2, #b56bff);
|
background: linear-gradient(135deg, #ff8a52, #f76b2f);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-ghost {
|
.btn-ghost {
|
||||||
@@ -405,6 +411,103 @@ main#app {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-chat {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-model {
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
color: var(--text);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 8px 10px;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 12.5px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-model:focus {
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-prompt {
|
||||||
|
flex: 2 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
background: var(--bg-soft);
|
||||||
|
color: var(--text);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 8px 10px;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-prompt::placeholder {
|
||||||
|
color: var(--muted-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-prompt:focus {
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-send {
|
||||||
|
flex: none;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: linear-gradient(135deg, var(--accent), #c8531f);
|
||||||
|
color: #1b1c1e;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: filter 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-send:hover {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-send:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-response {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg-soft);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 10px 12px;
|
||||||
|
max-height: 180px;
|
||||||
|
overflow-y: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-response:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-response.error {
|
||||||
|
color: var(--error_color, #e0554a);
|
||||||
|
border-color: color-mix(in srgb, var(--error_color, #e0554a) 40%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- footer ---------- */
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -412,6 +515,494 @@ main#app {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- calendar ---------- */
|
||||||
|
.calendar-section {
|
||||||
|
margin-top: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-day-header {
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-events {
|
||||||
|
display: grid;
|
||||||
|
padding: 12px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-event {
|
||||||
|
display: flex;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
transition:
|
||||||
|
background 0.18s ease,
|
||||||
|
border-color 0.18s ease,
|
||||||
|
transform 0.12s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-event:hover {
|
||||||
|
background: var(--surface-hover);
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: 5px;
|
||||||
|
flex: none;
|
||||||
|
background: var(--cal, var(--accent));
|
||||||
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--cal, var(--accent)) 22%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-body {
|
||||||
|
display: grid;
|
||||||
|
gap: 4px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-time {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: color-mix(in srgb, var(--cal, var(--accent)) 80%, white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-title {
|
||||||
|
font-size: 14.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-location,
|
||||||
|
.event-description {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
line-height: 1.35;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- empty / footer ---------- */
|
||||||
|
.calendar-loading,
|
||||||
|
.calendar-empty,
|
||||||
|
.calendar-error {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 16px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-error {
|
||||||
|
color: var(--error_color, #e0554a);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- widgets ---------- */
|
||||||
|
.widgets {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
transition:
|
||||||
|
transform 0.18s ease,
|
||||||
|
border-color 0.2s ease,
|
||||||
|
background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget:hover {
|
||||||
|
background: var(--surface-hover);
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-icon {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
background: var(--surface-hover);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-body {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-empty,
|
||||||
|
.widget-error,
|
||||||
|
.widget-loading {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget-error {
|
||||||
|
color: var(--error_color, #e0554a);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* today widget */
|
||||||
|
.today-event {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 13.5px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.today-dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex: none;
|
||||||
|
/* align with the first text line when summaries wrap */
|
||||||
|
margin-top: 6px;
|
||||||
|
background: var(--cal, var(--accent));
|
||||||
|
}
|
||||||
|
|
||||||
|
.today-time {
|
||||||
|
flex: none;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--muted-2);
|
||||||
|
min-width: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.today-summary {
|
||||||
|
color: var(--text);
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.today-event.past {
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.today-event.now .today-time {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.today-event.now .today-summary::after {
|
||||||
|
content: " · now";
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* netbird live status (inside the Netbird service card) */
|
||||||
|
.card-live-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 9px;
|
||||||
|
font-size: 12.5px;
|
||||||
|
color: var(--muted);
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netbird-dot {
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex: none;
|
||||||
|
background: var(--warning_color, #f2a944);
|
||||||
|
}
|
||||||
|
|
||||||
|
.netbird-dot.online {
|
||||||
|
background: var(--success_color, #8ab06a);
|
||||||
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--success_color, #8ab06a) 18%, transparent);
|
||||||
|
animation: pulse 2.4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netbird-dot.offline {
|
||||||
|
background: var(--error_color, #e0554a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.netbird-text {
|
||||||
|
color: var(--text);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.netbird-latency {
|
||||||
|
color: var(--muted-2);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* git widget */
|
||||||
|
.git-summary {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-badge {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--surface-hover);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-badge.gitea {
|
||||||
|
color: var(--link_color, #5c8ad8);
|
||||||
|
border-color: color-mix(in srgb, var(--link_color, #5c8ad8) 40%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-badge.gitlab {
|
||||||
|
color: var(--warning_color, #f2a944);
|
||||||
|
border-color: color-mix(in srgb, var(--warning_color, #f2a944) 40%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-badge.total {
|
||||||
|
color: var(--success_color, #8ab06a);
|
||||||
|
border-color: color-mix(in srgb, var(--success_color, #8ab06a) 40%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-error {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--error_color, #e0554a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-commits {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 4px 0 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
/* show ~3 commit rows, scroll for the rest */
|
||||||
|
max-height: 216px;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #4c4f54 transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-commits::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-commits::-webkit-scrollbar-thumb {
|
||||||
|
background: #4c4f54;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-commits::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-commit {
|
||||||
|
display: grid;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-repo {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-msg {
|
||||||
|
color: var(--text);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.git-meta {
|
||||||
|
color: var(--muted-2);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* gpu widget */
|
||||||
|
.gpu-name {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-val {
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 600;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-bar {
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: width 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-bar-fill.util {
|
||||||
|
background: linear-gradient(90deg, var(--accent), #c8531f);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-bar-fill.mem {
|
||||||
|
background: linear-gradient(90deg, var(--accent-2), #3a6db8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-temp {
|
||||||
|
color: var(--success_color, #8ab06a);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-temp.warm {
|
||||||
|
color: var(--warning_color, #f2a944);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gpu-temp.hot {
|
||||||
|
color: var(--error_color, #e0554a);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ollama block inside the gpu widget */
|
||||||
|
.ollama-block {
|
||||||
|
margin-top: 4px;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-model {
|
||||||
|
display: grid;
|
||||||
|
gap: 3px;
|
||||||
|
padding: 7px 9px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-model-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-name {
|
||||||
|
color: var(--text);
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-size {
|
||||||
|
color: var(--muted-2);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-split {
|
||||||
|
font-size: 11.5px;
|
||||||
|
color: var(--muted-2);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-gpu {
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ollama-cpu {
|
||||||
|
color: var(--accent-2);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- empty / footer ---------- */
|
||||||
|
|
||||||
/* ---------- responsive ---------- */
|
/* ---------- responsive ---------- */
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.topbar {
|
.topbar {
|
||||||
@@ -431,6 +1022,16 @@ main#app {
|
|||||||
#clock-time {
|
#clock-time {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
.widgets {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.chat-row {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.chat-model,
|
||||||
|
.chat-prompt {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|||||||
Reference in New Issue
Block a user