README: add hero banner, badges, and agent-start callout

- Committed SVG hero (Calm Luxury: near-black ground, blue accent,
  Postgres-bus architecture motif) rendered inline on GitHub
- Shields badges for the stack
- Native [!IMPORTANT] callout at the top so a Hermes handed only the
  repo URL knows to clone, read ONBOARDING.md, and guide the install
- "Two ways to install" section (agent-driven vs by hand)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -1,11 +1,23 @@
-# Hermy HQ
+<div align="center">
 
-**Your own mission control for a self-hosted AI agent.**
+<img src="./public/hermy-hq-banner.svg" alt="Hermy HQ — mission control for your self-hosted Hermes agent" width="100%" />
+
+<p><strong>Your own mission control for a self-hosted AI agent.</strong></p>
+
+<p>
+  <img src="https://img.shields.io/badge/Next.js-16-0A0B0D?style=for-the-badge&logo=nextdotjs&logoColor=white" alt="Next.js 16" />
+  <img src="https://img.shields.io/badge/React-19-141821?style=for-the-badge&logo=react&logoColor=6EA8FE" alt="React 19" />
+  <img src="https://img.shields.io/badge/Prisma-Postgres-141821?style=for-the-badge&logo=prisma&logoColor=white" alt="Prisma + Postgres" />
+  <img src="https://img.shields.io/badge/Tailwind-v4-141821?style=for-the-badge&logo=tailwindcss&logoColor=6EA8FE" alt="Tailwind v4" />
+  <img src="https://img.shields.io/badge/pairs%20with-Hermes-6EA8FE?style=for-the-badge" alt="Pairs with Hermes" />
+</p>
+
+</div>
 
 Hermy HQ is a self-hostable dashboard template that pairs with your own local
 [Hermes agent](https://github.com/NousResearch/hermes-agent). The website is your
 cockpit: dispatch work, review the agent's plans, approve anything with side effects,
-browse its memory, and watch it run — all from one place. Your Hermes stays on your
+browse its memory, and watch it run, all from one place. Your Hermes stays on your
 own machine; the website and the agent talk to each other through a shared Postgres
 database acting as a message bus.
 
@@ -15,15 +27,24 @@ environment variables.
 
 ---
 
-## 🤖 Easiest setup: let your agent do it
+> [!IMPORTANT]
+> **🤖 If you are an AI agent reading this repository**
+>
+> The person who gave you this link wants you to **install Hermy HQ for them**. Do this:
+>
+> 1. **Clone** this repository to the machine you operate on.
+> 2. **Open [`ONBOARDING.md`](./ONBOARDING.md)**, a complete step-by-step installer written for you.
+> 3. **Follow it in order**, guiding your human through each step: prerequisites, `.env`, database, local run, Vercel deploy, and the bridge.
+> 4. **Pause to ask them for every real secret** (API keys, database URL, OAuth credentials). **Never invent or guess credentials**, and keep every side-effecting action approval-gated.
+>
+> `ONBOARDING.md` is the full guided install. Start there.
 
-> **Send this repo to your Hermes agent and paste [`ONBOARDING.md`](./ONBOARDING.md).**
+---
-> It is a ready-to-use prompt that walks your operator through the entire install
-> step by step — prerequisites, `.env`, database, local run, Vercel deploy, and the
-> bridge — pausing to ask *you* for each real secret. It never invents credentials,
-> and it keeps every side-effecting action approval-gated.
 
-Prefer to do it by hand? The [Quick start](#quick-start) below has you covered.
+## 🚀 Two ways to install
+
+- **🤖 Let your agent do it (easiest).** Send this repo to your Hermes and paste the contents of [`ONBOARDING.md`](./ONBOARDING.md). It onboards you step by step, pausing for each secret.
+- **🔧 By hand.** Follow the [Quick start](#quick-start) below.
 
 ---
 

public/hermy-hq-banner.svg

@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" width="1200" height="320" role="img" aria-label="Hermy HQ - mission control for your self-hosted Hermes agent">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0B0C0F"/>
+      <stop offset="1" stop-color="#0E1116"/>
+    </linearGradient>
+    <radialGradient id="aura" cx="0.84" cy="0.12" r="0.75">
+      <stop offset="0" stop-color="#6EA8FE" stop-opacity="0.30"/>
+      <stop offset="0.45" stop-color="#6EA8FE" stop-opacity="0.07"/>
+      <stop offset="1" stop-color="#6EA8FE" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="rule" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#6EA8FE"/>
+      <stop offset="1" stop-color="#6EA8FE" stop-opacity="0"/>
+    </linearGradient>
+    <pattern id="dots" width="28" height="28" patternUnits="userSpaceOnUse">
+      <circle cx="1.5" cy="1.5" r="1.1" fill="#FFFFFF"/>
+    </pattern>
+    <style>
+      .brand { font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; }
+      .mono  { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
+    </style>
+  </defs>
+
+  <!-- ground -->
+  <rect width="1200" height="320" fill="url(#bg)"/>
+  <rect width="1200" height="320" fill="url(#dots)" opacity="0.045"/>
+  <rect width="1200" height="320" fill="url(#aura)"/>
+  <rect x="0.75" y="0.75" width="1198.5" height="318.5" fill="none" stroke="#1E2229" stroke-width="1.5"/>
+
+  <!-- wordmark -->
+  <text x="72" y="150" class="brand" font-size="86" font-weight="700" fill="#F3F5F7" letter-spacing="-2.5">Hermy HQ</text>
+  <rect x="76" y="172" width="352" height="3" rx="1.5" fill="url(#rule)"/>
+
+  <!-- tagline -->
+  <text x="77" y="214" class="brand" font-size="25" font-weight="400" fill="#9AA1AA">Mission control for your self-hosted Hermes agent</text>
+
+  <!-- stack chip -->
+  <g>
+    <rect x="76" y="240" width="322" height="30" rx="15" fill="#12151B" stroke="#262B34"/>
+    <circle cx="95" cy="255" r="4" fill="#5FD0A0"/>
+    <text x="110" y="259" class="mono" font-size="12.5" fill="#8A9099" letter-spacing="1.5">NEXT.JS 16  ·  PRISMA  ·  POSTGRES BUS</text>
+  </g>
+
+  <!-- architecture motif: website -> postgres bus -> hermes -->
+  <g class="mono" font-size="12.5" text-anchor="middle" letter-spacing="0.5">
+    <line x1="1004" y1="94" x2="1004" y2="128" stroke="#6EA8FE" stroke-opacity="0.55" stroke-width="1.5"/>
+    <line x1="1004" y1="176" x2="1004" y2="210" stroke="#6EA8FE" stroke-opacity="0.55" stroke-width="1.5"/>
+
+    <rect x="928" y="62" width="152" height="34" rx="9" fill="#12151B" stroke="#2A2F38"/>
+    <text x="1004" y="84" fill="#C6CAD1">WEBSITE</text>
+
+    <rect x="906" y="130" width="196" height="38" rx="9" fill="#0F1621" stroke="#6EA8FE" stroke-opacity="0.65"/>
+    <circle cx="936" cy="149" r="4" fill="#6EA8FE"/>
+    <text x="1010" y="154" fill="#EAF1FF">POSTGRES BUS</text>
+
+    <rect x="928" y="204" width="152" height="34" rx="9" fill="#12151B" stroke="#2A2F38"/>
+    <text x="1004" y="226" fill="#C6CAD1">HERMES</text>
+  </g>
+</svg>