Hivemind HQ

Team & AI agents dashboard template — agents, kanban board, chat, approvals and activity.

Quick start

Unzip the package.
Open app/index.html in any modern browser — that is all. No build step, no server, no install.
To put it online, upload the app/ folder to any static host (shared hosting, S3, Netlify, Vercel, GitHub Pages…).

Everything runs in the browser with the sample data in app/assets/js/data.js. Board changes, approvals and settings are saved in the visitor's localStorage; Settings → Reset demo data starts over.

Open the dashboard demo →

Features

Overview — greeting, 4 KPI cards with sparklines, 14-day throughput chart (bars + 7-day average, tooltips, keyboard focusable), approvals preview with one-click approve/reject, team workload, live activity.
Agents — 12 agent cards with gradient initials avatars, live status (working / online / idle / offline), current task, workload bar, skills, stats; status filters, search, and a detail drawer with assigned tasks.
Task board — 4-column kanban with smooth drag & drop (mouse, pen and touch with a short press), full keyboard alternative (Space to pick up, arrows to move, Space to drop, Escape to cancel) with screen-reader announcements, project filter, new-task dialog with validation.
Chat — channels and direct messages, @mentions, typing indicator and simulated replies from each agent's own reply bank, unread counters.
Approvals — queue of requests (publish, email, deploy, spend, access) with risk level, preview and details; approve, reject, ask, or approve all low-risk; pending / approved / rejected tabs.
Activity — timeline grouped by day, filter by type, optional live updates.
Settings — workspace form with validation, dark / light / system theme, 7 accent colours, compact density, approval rules, notifications, reset.
Collapsible sidebar, off-canvas menu on phones, responsive from 390 px to wide screens, reduced-motion support, no external requests, no dependencies.

File structure

app/
  index.html              the whole dashboard (7 views, hash routing)
  assets/
    css/app.css           design tokens, layout, components, themes, responsive rules
    js/data.js            ALL sample data (agents, tasks, chat, approvals, activity)
    js/app.js             views, drag & drop board, chat, approvals, settings
    fonts/                Instrument Sans + JetBrains Mono (woff2, OFL)
    img/favicon.svg       logo mark / favicon
documentation/index.html  this page
README.md · CHANGELOG.md · LICENSE.txt · THIRD-PARTY.txt

Your own data

All content comes from one object, window.HQ_DATA, in app/assets/js/data.js. Edit it, or replace the file with your own script that fills the same object (for example from your API, before app.js runs).

Key	What it holds
`workspace`	Workspace name, owner (name, initials, email), time zone, plan label.
`agents[]`	`id, name, role, status` (working \| online \| idle \| offline), `hue` (avatar colour 0–360), `load` %, `done, rating, task, skills[]`.
`projects[]`	`id, name, color`.
`columns[]`	Board columns `id, name`. Keep the ids `backlog, doing, review, done` or update the colour map in `app.js`.
`tasks[]`	`id, col, title, project, agent, priority` (low \| med \| high), `due` (days from today), `comments, progress`.
`approvals[]`	`id, kind` (publish \| email \| deploy \| spend \| access), `agent, ago` (minutes), `risk, title, preview, meta[]`.
`activity[]`	`ago, agent, type` (task \| chat \| approval \| agent \| system), `text` (may contain <b>).
`throughput[]`	Tasks completed per day for the last 14 days.
`channels[]`, `messages{}`	Chat channels and their starting messages (`from: 'me'` = the signed-in user).
`replies{}`	Simulated reply bank per agent id, plus `any` as a fallback.

Connecting a real backend

The template is front-end only. To go live, load HQ_DATA from your API and hook the actions in app.js: moveTask() (board), decide() (approvals), the chat submit handler (send the message to your service and render the answer instead of pickReply()) and the settings submit handler.

Customise & rebrand

Name and logo — change workspace.name in data.js (or in Settings), replace assets/img/favicon.svg, and update the <title> in index.html.
Colours — the brand colour is --accent and the secondary colour --accent-2 at the top of app.css. Dark and light palettes are the [data-theme='dark'] and [data-theme='light'] blocks. The accent swatches in Settings are the ACCENTS list in app.js.
Fonts — swap the two @font-face rules and --font / --mono.
Density — --gap and --pad; the .compact class sets smaller values.
Icons — inline SVG symbols at the top of index.html; add your own <symbol> and use it with <svg><use href="#i-name"/></svg>.
Views — each view is a <section class="view" id="v-name">; add a nav link to index.html#name and the name to VIEWS in app.js.

Configuration

Where	Setting
`app.js` — `KEY`	localStorage key names (change the version suffix to reset every visitor's saved board).
`app.js` — `LIVE`	Events added by the "Live updates" demo feed every 9 seconds. Remove the `setInterval` to turn it off.
`app.js` — `defaults`	Default settings (theme, accent, approval rules, notifications).
`index.html` — head script	Applies the saved theme before first paint (no flash).

Browser support: current Chrome, Edge, Firefox and Safari (desktop and mobile).

FAQ

Does it include a backend or connect to real agents?

No. It is a front-end template with realistic sample data and simulated replies. The documentation above shows exactly where to connect your own API.

Can I use it for a client project?

Yes. The Licence covers one end product (yours or one client's). Full source covers one production domain for you and your clients, including white-label and SaaS use. Neither allows reselling the template itself.

Do I need npm or a framework?

No. It is plain HTML, CSS and JavaScript with no dependencies. You can move the markup into React, Vue or any framework if you like.

Does it make any external requests?

No. Fonts and icons are bundled; there are no CDNs, trackers or third-party calls.

Is it accessible?

It has a skip link, visible focus, labelled controls, a keyboard alternative for drag & drop, live-region announcements, reduced-motion support and checked contrast in both themes.

Support

Questions or a bug? Email hello@vortaxis.com with your order number. Bug fixes and updates for your version are free; see LICENSE.txt for the support period.