From 49437514573c9eb0f8c8d1e7ec10bdccbfd66d62 Mon Sep 17 00:00:00 2001
From: AdrianMorGD <adrianmorgd@gmail.com>
Date: Wed, 9 Sep 2026 16:29:16 +0000
Subject: [PATCH 1/2] Committed specs.md for prompt

---
 SPECS.md | 174 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 SPECS.md

diff --git a/SPECS.md b/SPECS.md
new file mode 100644
index 000000000..e60469017
--- /dev/null
+++ b/SPECS.md
@@ -0,0 +1,174 @@
+[ROLE]
+You are a seasoned expert AI engineer and web developer with a previous solid background in UX/UI design too.
+
+[Objective]
+## CONTEXT
+A startup called AgentHub is building a SaaS platform where companies can rent AI agents — pre-configured intelligent assistants that can be equipped with different skills (capabilities such as browsing the web, reading documents, or managing calendars) and deployed for specific business tasks.
+## TASK
+You will be building an admin panel that must include six sections:
+- Dashboard
+- User Management
+- Agent Management
+- Skills
+- Agent Contracts
+- Error Log
+
+[GENERATION-METHODOLOGY]
+You must generate the code following strictly an ordered-phase execution.
+## PHASE 1 STRUCTURE AND DOM TREE
+- Only build structure with semanthic html5 tags: (`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`, etc).
+
+
+## PHASE 2 CONTENT AND RESOURCES
+- No more dummy texts, context related text and images.
+- Make sure DOM contains all necessary data and information before layout is applied.
+
+## PHASE 3 LAYOUT, DESIGN SYSTEM, and TAWILWIND CSS
+- Layout & grid: md, lg and  xl breakpoints
+- Scale and Spacing: Keep consistency with the use and adapting paddings and margins using standard Tailwind scale (e.g `p-4`, `gap-6`)
+- Visual Hierarchy and Colors:
+    - Primary Color (60%): Main backgrounds `bg-slate-50` / `bg-neutral-900`)
+    - Micro-interactions: Add states eg. `hover:`, `focus-visible:` and transitions eg. (`transition-colors duration-200`).
+    - A dark/light mode toggle switches the entire color schemes using Tailwinds dark: utilites. The chosen mode is preserved between sections.
+
+[EXPECTED-DELIVERABLE]
+HTML code that meets al required specifications per phase outlined below.
+
+-----PHASE SPECS-----
+
+[PHASE-1]
+
+# DASHBOARD SECTION
+
+## Top Bar
+- Logo place holder on the top left
+- Top right aligned:
+    - Notifications icon container
+    - Avatar/Profile container
+## Nav Bar
+Directly below top bar separated by divider and contains the following nav items:
+- Home: Default starting section
+- User management
+- Agent management
+- Skills
+- Agent contracts
+- Error Log
+
+
+## Main
+- H1: Home
+Four metrics containers:
+- Total Revenue h3
+- Discount losses h3
+- Active agents h3
+- Failing agents h3
+
+## Weekly Activity
+- h2: Weekly Activity
+
+# USER MANAGEMENT SECTION
+
+- H1: User Management
+- A table with at least 5 hardcoded user rows showing name, email,plan and status
+- Each row has an action menu icon that shows view detail and delete actions when clicked
+
+#  AGENT MANAGEMENT SECTION
+
+- H1: Agent Management
+- A container
+- H2 Agents
+- A list of 4 agents h3
+ - Labels: agent name, owner, status and skills as a expand control
+ - Clicking the expand control reveals the agents associated skills, clicking again collapses them hiding them.
+- Each agent has an action icon menu with configure and delete actions revealed on click
+
+# SKILLS SECTION
+- H1 Skills
+- A catalog of 4 skills
+    - Skill name
+    - Description of skill
+    - Each skill has an action menu icon that on clicked reveals view detail and delete actions
+
+
+# AGENT CONTRACTS SECTION
+- H1: Contracts
+- A table inside a container with the following rows:
+    - Client, agent, skills, start date/end date and amount paid
+    - Each skills table item has an action menu that on click reveals the actions view details and delete.
+
+# ERROR LOG
+- H1: Error Log
+- A container with a table with the following rows:
+ - timestamp, agent name, and short description
+ - Each entry has an action icon menu that on click reveals the actions view detail and mark as resolved.
+
+
+
+[PHASE-2]
+
+Apply text content to all sections according to the context of the project, no longer dummy texts. They must be related to what is the described on the context of the project described above.
+
+[PHASE-3]
+
+## Top Bar
+- Parent container with padding: top, left,right,down
+    - Logo container: Aligned top left to parent
+        - H3: Agent Hub
+    - Top right container
+        - Flex row
+        - Notifications icon with badge showing number of notifications
+        - Avatar/Profile container with user icon
+## Nav Bar
+- Flex row container for nav items inside parent container
+    - Gap between items aligned left
+    - Top right: Search bar 
+        - Left aligned search icon
+
+## Main
+- Card metrics
+    - Card titles: H3
+        - H4 number labels 
+
+## Weekly Activity
+- h2: Weekly Activity
+- Full-width weekly activity chart
+
+# USER MANAGEMENT SECTION
+
+- H1: User Management
+- Apply stylying to table
+- Overflow menu icon that pops up a menu with view detail and delete actions when clicked
+    - Menu closes when clicking outside menuor on the icon again
+    - Clicking on view details opens a modal with the full user record.
+        - Modal closes via close button and by clicking the backdrop
+    
+#  AGENT MANAGEMENT SECTION
+
+- Apply stylying
+- Each againt has a overflow menu icon that pops ups a menu with Configure and Delete 
+ - Configure opens a modal with the agents system system prompt in an editable textarea
+
+# SKILLS SECTION
+
+- Apply stylying
+- Each skill has a overflow menu icon that on clicks pops up a menu with view detail and delete actions
+
+
+#  AGENT MANAGEMENT SECTION
+
+- Aplly stylying to table
+- Each row has a overflow menu icon that on clicks with view detail action that opens a modal with full contract breakdown, including itemized skills and their individual prices.
+    - Modal closes by clicking on the close button
+
+
+# ERROR LOG
+
+- Apply stylying to table
+- Each entry has a overflow menu icon that pops up a menu with view detail and mark as resolved actions
+
+# GLOBAL INTERACTIONS
+**IMPORTANT**: All interactivity must be implemented with vanilla JavaScript only — no frameworks (React, Vue, etc.), no jQuery, no build tools. Tailwind must be loaded via CDN only.
+- The dark/light theme toggle button in the top bar switches the entire color scheme using tailwind's darl: utilities
+    - The chosen mode is preserved while navigating between sections.
+- All overflow menus close when cliclking outside the menu or on the overflow icon again
+- Al modals close when cliking outside of them on the scrim.

From 34ca4661e42f1c7cfb3a6be5233403b9ea600be2 Mon Sep 17 00:00:00 2001
From: AdrianMorGD <adrianmorgd@gmail.com>
Date: Wed, 9 Sep 2026 18:21:43 +0000
Subject: [PATCH 2/2] Executed prompt and prompted several refinements for the
 first version of the website

---
 .vscode/settings.json |   3 +
 agents.html           | 311 ++++++++++++++++++++++++++++++++++++++++
 contracts.html        | 150 ++++++++++++++++++++
 errors.html           | 154 ++++++++++++++++++++
 index.html            | 216 ++++++++++++++++++++++++++++
 script.js             | 184 ++++++++++++++++++++++++
 skills.html           | 218 +++++++++++++++++++++++++++++
 styles.css            |  70 +++++++++
 users.html            | 319 ++++++++++++++++++++++++++++++++++++++++++
 9 files changed, 1625 insertions(+)
 create mode 100644 agents.html
 create mode 100644 contracts.html
 create mode 100644 errors.html
 create mode 100644 index.html
 create mode 100644 script.js
 create mode 100644 skills.html
 create mode 100644 styles.css
 create mode 100644 users.html

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 24da33c3e..e4d854f76 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,9 @@
 {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "css.lint.unknownAtRules": "ignore",
+    "html.format.wrapAttributes": "force-aligned",
+    "html.format.wrapLineLength": 100,
     "workbench.editorAssociations": {   
         "*.md": "vscode.markdown.preview.editor"
     }
diff --git a/agents.html b/agents.html
new file mode 100644
index 000000000..ca7f2b045
--- /dev/null
+++ b/agents.html
@@ -0,0 +1,311 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Agents | AgentHub</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      @custom-variant dark (&:where(.dark, .dark *));
+    </style>
+  </head>
+  <body
+    class="min-h-screen bg-slate-50 text-slate-900 dark:bg-neutral-900 dark:text-slate-100"
+  >
+    <header
+      class="border-b border-slate-200 bg-white px-4 py-4 shadow-sm dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-black/40"
+    >
+      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <a href="index.html" class="text-xl font-bold">AgentHub</a>
+        <aside class="flex items-center gap-2 sm:gap-4">
+          <button
+            type="button"
+            aria-label="Notifications"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#128276;
+          </button>
+          <span class="hidden text-sm font-medium sm:inline">Admin profile</span>
+          <button
+            id="theme-toggle"
+            type="button"
+            aria-label="Toggle dark mode"
+            aria-pressed="false"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#9788;
+          </button>
+        </aside>
+      </div>
+      <nav class="mx-auto mt-4 max-w-7xl border-t pt-4 dark:border-neutral-700">
+        <ul class="flex flex-wrap gap-6 text-sm">
+          <li><a class="nav-link" href="index.html">Home</a></li>
+          <li><a class="nav-link" href="users.html">User management</a></li>
+          <li><a class="nav-link" href="agents.html">Agent management</a></li>
+          <li><a class="nav-link" href="skills.html">Skills</a></li>
+          <li><a class="nav-link" href="contracts.html">Agent contracts</a></li>
+          <li><a class="nav-link" href="errors.html">Error log</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="mx-auto max-w-7xl px-4 py-8">
+      <p class="text-sm font-semibold uppercase tracking-wide text-sky-600">
+        Deployed assistants
+      </p>
+      <h1 class="mt-2 text-3xl font-bold">Agent Management</h1>
+      <section
+        class="mt-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+      >
+        <h2 class="text-xl font-bold">Agents</h2>
+        <ul class="mt-5 grid gap-4 lg:grid-cols-2">
+          <li>
+            <article
+              class="relative rounded-lg border border-slate-200 p-5 dark:border-neutral-700"
+            >
+              <div class="flex justify-between">
+                <div>
+                  <h3 class="font-semibold">Atlas Customer Support AI</h3>
+                  <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+                    Answers customer questions and routes complex requests.
+                  </p>
+                </div>
+                <div class="relative">
+                  <button
+                    class="overflow-toggle text-lg"
+                    type="button"
+                    aria-label="Actions for Atlas"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-0 z-10 hidden w-36 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left"
+                      data-configure-agent="Atlas Customer Support AI"
+                      type="button"
+                    >
+                      Configure</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <dl class="mt-5 grid grid-cols-2 text-sm">
+                <div>
+                  <dt>Owner</dt>
+                  <dd>Maya Chen</dd>
+                </div>
+                <div>
+                  <dt>Status</dt>
+                  <dd class="text-emerald-600">Active</dd>
+                </div>
+              </dl>
+              <details class="mt-4 border-t border-slate-200 pt-3 dark:border-neutral-700">
+                <summary class="cursor-pointer font-semibold text-sky-600">
+                  Skills
+                </summary>
+                <p class="mt-2 text-sm">Web browsing, Document reading</p>
+              </details>
+            </article>
+          </li>
+          <li>
+            <article
+              class="relative rounded-lg border border-slate-200 p-5 dark:border-neutral-700"
+            >
+              <div class="flex justify-between">
+                <div>
+                  <h3 class="font-semibold">Beacon Research Analyst AI</h3>
+                  <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+                    Researches market signals and prepares business briefs.
+                  </p>
+                </div>
+                <div class="relative">
+                  <button
+                    class="overflow-toggle text-lg"
+                    type="button"
+                    aria-label="Actions for Beacon"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-0 z-10 hidden w-36 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left"
+                      data-configure-agent="Beacon Research Analyst AI"
+                      type="button"
+                    >
+                      Configure</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <dl class="mt-5 grid grid-cols-2 text-sm">
+                <div>
+                  <dt>Owner</dt>
+                  <dd>Liam Carter</dd>
+                </div>
+                <div>
+                  <dt>Status</dt>
+                  <dd class="text-emerald-600">Active</dd>
+                </div>
+              </dl>
+              <details class="mt-4 border-t border-slate-200 pt-3 dark:border-neutral-700">
+                <summary class="cursor-pointer font-semibold text-sky-600">
+                  Skills
+                </summary>
+                <p class="mt-2 text-sm">Web browsing, Data analysis</p>
+              </details>
+            </article>
+          </li>
+          <li>
+            <article
+              class="relative rounded-lg border border-slate-200 p-5 dark:border-neutral-700"
+            >
+              <div class="flex justify-between">
+                <div>
+                  <h3 class="font-semibold">Cedar Scheduling Assistant AI</h3>
+                  <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+                    Coordinates meetings and manages calendar changes.
+                  </p>
+                </div>
+                <div class="relative">
+                  <button
+                    class="overflow-toggle text-lg"
+                    type="button"
+                    aria-label="Actions for Cedar"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-0 z-10 hidden w-36 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left"
+                      data-configure-agent="Cedar Scheduling Assistant AI"
+                      type="button"
+                    >
+                      Configure</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <dl class="mt-5 grid grid-cols-2 text-sm">
+                <div>
+                  <dt>Owner</dt>
+                  <dd>Sofia Reyes</dd>
+                </div>
+                <div>
+                  <dt>Status</dt>
+                  <dd class="text-amber-600">Paused</dd>
+                </div>
+              </dl>
+              <details class="mt-4 border-t border-slate-200 pt-3 dark:border-neutral-700">
+                <summary class="cursor-pointer font-semibold text-sky-600">
+                  Skills
+                </summary>
+                <p class="mt-2 text-sm">
+                  Calendar management, Email management
+                </p>
+              </details>
+            </article>
+          </li>
+          <li>
+            <article
+              class="relative rounded-lg border border-slate-200 p-5 dark:border-neutral-700"
+            >
+              <div class="flex justify-between">
+                <div>
+                  <h3 class="font-semibold">Delta Financial Review AI</h3>
+                  <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+                    Reviews financial documents and flags anomalies.
+                  </p>
+                </div>
+                <div class="relative">
+                  <button
+                    class="overflow-toggle text-lg"
+                    type="button"
+                    aria-label="Actions for Delta"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-0 z-10 hidden w-36 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left"
+                      data-configure-agent="Delta Financial Review AI"
+                      type="button"
+                    >
+                      Configure</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <dl class="mt-5 grid grid-cols-2 text-sm">
+                <div>
+                  <dt>Owner</dt>
+                  <dd>Amara Okafor</dd>
+                </div>
+                <div>
+                  <dt>Status</dt>
+                  <dd class="text-rose-600">Failing</dd>
+                </div>
+              </dl>
+              <details class="mt-4 border-t border-slate-200 pt-3 dark:border-neutral-700">
+                <summary class="cursor-pointer font-semibold text-sky-600">
+                  Skills
+                </summary>
+                <p class="mt-2 text-sm">Document reading, Data analysis</p>
+              </details>
+            </article>
+          </li>
+        </ul>
+      </section>
+    </main>
+    <div
+      id="modal"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4"
+    >
+      <section
+        class="w-full max-w-lg rounded-xl bg-white p-6 dark:bg-neutral-800"
+      >
+        <h2 id="modal-title" class="text-xl font-bold">Configure agent</h2>
+        <div id="modal-content"></div>
+        <div id="modal-form">
+          <textarea class="mt-4 min-h-40 w-full rounded border p-3">
+You are a reliable AgentHub assistant.</textarea>
+        </div>
+        <button id="modal-close" type="button">Close</button
+        ><button id="modal-secondary" class="hidden" type="button">
+          Cancel</button
+        ><button id="modal-primary" type="button">Save changes</button>
+      </section>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/contracts.html b/contracts.html
new file mode 100644
index 000000000..5118e9b90
--- /dev/null
+++ b/contracts.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Contracts | AgentHub</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      @custom-variant dark (&:where(.dark, .dark *));
+    </style>
+  </head>
+  <body
+    class="min-h-screen bg-slate-50 text-slate-900 dark:bg-neutral-900 dark:text-slate-100"
+  >
+    <header
+      class="border-b bg-white px-4 py-4 shadow-sm dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-black/40"
+    >
+      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <a href="index.html" class="text-xl font-bold">AgentHub</a>
+        <aside class="flex items-center gap-2 sm:gap-4">
+          <button
+            type="button"
+            aria-label="Notifications"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#128276;
+          </button>
+          <span class="hidden text-sm font-medium sm:inline">Admin profile</span>
+          <button
+            id="theme-toggle"
+            type="button"
+            aria-label="Toggle dark mode"
+            aria-pressed="false"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#9788;
+          </button>
+        </aside>
+      </div>
+      <nav class="mx-auto mt-4 max-w-7xl border-t pt-4 dark:border-neutral-700">
+        <ul class="flex flex-wrap gap-6 text-sm">
+          <li><a class="nav-link" href="index.html">Home</a></li>
+          <li><a class="nav-link" href="users.html">User management</a></li>
+          <li><a class="nav-link" href="agents.html">Agent management</a></li>
+          <li><a class="nav-link" href="skills.html">Skills</a></li>
+          <li><a class="nav-link" href="contracts.html">Agent contracts</a></li>
+          <li><a class="nav-link" href="errors.html">Error log</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="mx-auto max-w-7xl px-4 py-8">
+      <p class="text-sm font-semibold uppercase tracking-wide text-sky-600">
+        Commercial agreements
+      </p>
+      <h1 class="mt-2 text-3xl font-bold">Contracts</h1>
+      <div
+        class="mt-6 overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+      >
+        <table class="min-w-[850px] w-full text-left text-sm">
+          <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500 dark:bg-neutral-900 dark:text-slate-400">
+            <tr>
+              <th class="p-4">Client</th>
+              <th class="p-4">Agent</th>
+              <th class="p-4">Skills</th>
+              <th class="p-4">Dates</th>
+              <th class="p-4">Amount paid</th>
+              <th class="p-4">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-100 dark:divide-neutral-700">
+            <tr>
+              <th class="p-4 text-left">Northstar Health</th>
+              <td class="p-4">Atlas Customer Support AI</td>
+              <td class="p-4">Web browsing, documents</td>
+              <td class="p-4">Jan 15 - Dec 31, 2026</td>
+              <td class="p-4 font-semibold">$24,000</td>
+              <td class="relative p-4">
+                <button
+                  class="overflow-toggle text-lg"
+                  type="button"
+                  aria-expanded="false"
+                >
+                  &#8942;
+                </button>
+                <div
+                  class="overflow-menu absolute right-4 z-10 hidden w-40 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+                >
+                  <button
+                    class="menu-action block px-3 py-2"
+                    data-modal-title="Northstar Health contract"
+                    data-modal-content="Atlas Customer Support AI|Web browsing: $6,000|Document reading: $8,000|Calendar management: $10,000|Total: $24,000"
+                    type="button"
+                  >
+                    View details
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th class="p-4 text-left">Brightline Labs</th>
+              <td class="p-4">Beacon Research Analyst AI</td>
+              <td class="p-4">Web browsing, analysis</td>
+              <td class="p-4">Mar 1 - Sep 30, 2026</td>
+              <td class="p-4 font-semibold">$18,500</td>
+              <td class="relative p-4">
+                <button
+                  class="overflow-toggle text-lg"
+                  type="button"
+                  aria-expanded="false"
+                >
+                  &#8942;
+                </button>
+                <div
+                  class="overflow-menu absolute right-4 z-10 hidden w-40 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+                >
+                  <button
+                    class="menu-action block px-3 py-2"
+                    data-modal-title="Brightline Labs contract"
+                    data-modal-content="Beacon Research Analyst AI|Web browsing: $7,500|Data analysis: $11,000|Total: $18,500"
+                    type="button"
+                  >
+                    View details
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+    <div
+      id="modal"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4"
+    >
+      <section
+        class="w-full max-w-lg rounded-xl bg-white p-6 dark:bg-neutral-800"
+      >
+        <div class="flex justify-between">
+          <h2 id="modal-title">Details</h2>
+          <button id="modal-close" type="button">&times;</button>
+        </div>
+        <div id="modal-content" class="mt-4"></div>
+        <div id="modal-form" class="hidden"></div>
+        <button id="modal-secondary" class="hidden" type="button">Cancel</button
+        ><button id="modal-primary" type="button">Close</button>
+      </section>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/errors.html b/errors.html
new file mode 100644
index 000000000..dc2977508
--- /dev/null
+++ b/errors.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Error Log | AgentHub</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      @custom-variant dark (&:where(.dark, .dark *));
+    </style>
+  </head>
+  <body
+    class="min-h-screen bg-slate-50 text-slate-900 dark:bg-neutral-900 dark:text-slate-100"
+  >
+    <header
+      class="border-b bg-white px-4 py-4 shadow-sm dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-black/40"
+    >
+      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <a href="index.html" class="text-xl font-bold">AgentHub</a>
+        <aside class="flex items-center gap-2 sm:gap-4">
+          <button
+            type="button"
+            aria-label="Notifications"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#128276;
+          </button>
+          <span class="hidden text-sm font-medium sm:inline">Admin profile</span>
+          <button
+            id="theme-toggle"
+            type="button"
+            aria-label="Toggle dark mode"
+            aria-pressed="false"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#9788;
+          </button>
+        </aside>
+      </div>
+      <nav class="mx-auto mt-4 max-w-7xl border-t pt-4 dark:border-neutral-700">
+        <ul class="flex flex-wrap gap-6 text-sm">
+          <li><a class="nav-link" href="index.html">Home</a></li>
+          <li><a class="nav-link" href="users.html">User management</a></li>
+          <li><a class="nav-link" href="agents.html">Agent management</a></li>
+          <li><a class="nav-link" href="skills.html">Skills</a></li>
+          <li><a class="nav-link" href="contracts.html">Agent contracts</a></li>
+          <li><a class="nav-link" href="errors.html">Error log</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="mx-auto max-w-7xl px-4 py-8">
+      <p class="text-sm font-semibold uppercase tracking-wide text-rose-600">
+        Needs attention
+      </p>
+      <h1 class="mt-2 text-3xl font-bold">Error Log</h1>
+      <div
+        class="mt-6 overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+      >
+        <table class="min-w-[700px] w-full text-left text-sm">
+          <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500 dark:bg-neutral-900 dark:text-slate-400">
+            <tr>
+              <th class="p-4">Timestamp</th>
+              <th class="p-4">Agent</th>
+              <th class="p-4">Description</th>
+              <th class="p-4">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-100 dark:divide-neutral-700">
+            <tr>
+              <th class="p-4 text-left">2026-09-08 09:42 UTC</th>
+              <td class="p-4">Delta Financial Review AI</td>
+              <td class="p-4">Document parser timed out.</td>
+              <td class="relative p-4">
+                <button
+                  class="overflow-toggle text-lg"
+                  type="button"
+                  aria-expanded="false"
+                >
+                  &#8942;
+                </button>
+                <div
+                  class="overflow-menu absolute right-4 z-10 hidden w-44 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+                >
+                  <button
+                    class="menu-action block px-3 py-2"
+                    data-modal-title="Delta Financial Review AI error"
+                    data-modal-content="Document parser timed out while reviewing a quarterly report.|Retry count: 3"
+                    type="button"
+                  >
+                    View detail</button
+                  ><button
+                    type="button"
+                    class="block px-3 py-2 text-emerald-600"
+                  >
+                    Mark as resolved
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th class="p-4 text-left">2026-09-07 16:18 UTC</th>
+              <td class="p-4">Cedar Scheduling Assistant AI</td>
+              <td class="p-4">Calendar authentication failed.</td>
+              <td class="relative p-4">
+                <button
+                  class="overflow-toggle text-lg"
+                  type="button"
+                  aria-expanded="false"
+                >
+                  &#8942;
+                </button>
+                <div
+                  class="overflow-menu absolute right-4 z-10 hidden w-44 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+                >
+                  <button
+                    class="menu-action block px-3 py-2"
+                    data-modal-title="Cedar Scheduling Assistant AI error"
+                    data-modal-content="Calendar provider authentication failed.|Provider response: Invalid token"
+                    type="button"
+                  >
+                    View detail</button
+                  ><button
+                    type="button"
+                    class="block px-3 py-2 text-emerald-600"
+                  >
+                    Mark as resolved
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+    <div
+      id="modal"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4"
+    >
+      <section
+        class="w-full max-w-lg rounded-xl bg-white p-6 dark:bg-neutral-800"
+      >
+        <div class="flex justify-between">
+          <h2 id="modal-title">Details</h2>
+          <button id="modal-close" type="button">&times;</button>
+        </div>
+        <div id="modal-content" class="mt-4"></div>
+        <div id="modal-form" class="hidden"></div>
+        <button id="modal-secondary" class="hidden" type="button">Cancel</button
+        ><button id="modal-primary" type="button">Close</button>
+      </section>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..991727232
--- /dev/null
+++ b/index.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Home | AgentHub</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      @custom-variant dark (&:where(.dark, .dark *));
+    </style>
+  </head>
+  <body
+    class="min-h-screen bg-slate-50 text-slate-900 transition-colors duration-200 dark:bg-neutral-900 dark:text-slate-100"
+  >
+    <header
+      class="bg-white/95 px-4 py-4 shadow-sm sm:px-6 lg:px-8 dark:bg-neutral-900/95 dark:shadow-black/40"
+    >
+      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <a
+          href="index.html"
+          class="text-xl font-bold tracking-tight text-slate-950 dark:text-white"
+          >AgentHub</a
+        >
+        <aside class="flex items-center gap-2 sm:gap-4">
+          <button
+            type="button"
+            aria-label="Notifications"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#128276;
+          </button>
+          <span class="hidden text-sm font-medium sm:inline"
+            >Admin profile</span
+          >
+          <button
+            id="theme-toggle"
+            type="button"
+            aria-label="Toggle dark mode"
+            aria-pressed="false"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#9788;
+          </button>
+        </aside>
+      </div>
+      <nav class="mx-auto mt-4 max-w-7xl pt-4">
+        <ul class="flex flex-wrap gap-6 text-sm">
+          <li>
+            <a
+              class="nav-link"
+              href="index.html"
+              >Home</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="users.html"
+              >User management</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="agents.html"
+              >Agent management</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="skills.html"
+              >Skills</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="contracts.html"
+              >Agent contracts</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="errors.html"
+              >Error log</a
+            >
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main class="mx-auto max-w-7xl space-y-8 px-4 py-8 sm:px-6 lg:px-8">
+      <header>
+        <p
+          class="text-sm font-semibold uppercase tracking-wide text-sky-600 dark:text-sky-600"
+        >
+          Operations overview
+        </p>
+        <h1
+          class="mt-2 text-3xl font-bold tracking-tight text-slate-950 dark:text-white"
+        >
+          Home
+        </h1>
+      </header>
+      <section
+        aria-label="Overview metrics"
+        class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"
+      >
+        <article
+          class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+        >
+          <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">
+            Total Revenue
+          </h2>
+          <p class="mt-3 text-2xl font-bold">$42,500</p>
+        </article>
+        <article
+          class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+        >
+          <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">
+            Discount losses
+          </h2>
+          <p class="mt-3 text-2xl font-bold">$3,250</p>
+        </article>
+        <article
+          class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+        >
+          <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">
+            Active agents
+          </h2>
+          <p class="mt-3 text-2xl font-bold">3</p>
+        </article>
+        <article
+          class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+        >
+          <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">
+            Failing agents
+          </h2>
+          <p class="mt-3 text-2xl font-bold text-rose-600">1</p>
+        </article>
+      </section>
+      <section
+        aria-labelledby="weekly-activity-title"
+        class="w-full rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800 sm:p-6"
+      >
+        <h2 id="weekly-activity-title" class="text-xl font-bold">
+          Weekly Activity
+        </h2>
+        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
+          Agent runs and completed tasks for September 7–13, 2026
+        </p>
+        <figure class="mt-6 w-full">
+          <svg
+            class="h-auto min-h-64 w-full"
+            viewBox="0 0 840 300"
+            role="img"
+            aria-label="Weekly agent activity chart"
+            preserveAspectRatio="none"
+          >
+            <g
+              class="stroke-slate-200 dark:stroke-neutral-700"
+              stroke-width="1"
+            >
+              <line x1="56" y1="24" x2="824" y2="24" />
+              <line x1="56" y1="82" x2="824" y2="82" />
+              <line x1="56" y1="140" x2="824" y2="140" />
+              <line x1="56" y1="198" x2="824" y2="198" />
+              <line x1="56" y1="256" x2="824" y2="256" />
+            </g>
+            <path
+              d="M56 108 L184 91 L312 75 L440 95 L568 62 L696 142 L824 168 L824 256 L56 256 Z"
+              class="fill-sky-100/80 dark:fill-sky-950/50"
+            />
+            <path
+              d="M56 108 L184 91 L312 75 L440 95 L568 62 L696 142 L824 168"
+              class="fill-none stroke-sky-500"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="4"
+            />
+            <path
+              d="M56 118 L184 99 L312 84 L440 104 L568 77 L696 149 L824 174"
+              class="fill-none stroke-emerald-500"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="4"
+            />
+            <g
+              class="fill-slate-500 text-[11px] dark:fill-slate-400"
+              text-anchor="middle"
+            >
+              <text x="56" y="278">Mon</text>
+              <text x="184" y="278">Tue</text>
+              <text x="312" y="278">Wed</text>
+              <text x="440" y="278">Thu</text>
+              <text x="568" y="278">Fri</text>
+              <text x="696" y="278">Sat</text>
+              <text x="824" y="278">Sun</text>
+            </g>
+          </svg>
+          <figcaption class="mt-4 text-xs text-slate-500 dark:text-slate-400">
+            The chart compares all agent executions with tasks completed
+            successfully.
+          </figcaption>
+        </figure>
+      </section>
+    </main>
+    <footer
+      class="border-t border-slate-200 px-4 py-6 text-center text-sm text-slate-500 dark:border-neutral-700 dark:text-slate-400"
+    >
+      AgentHub administration
+    </footer>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 000000000..179d4efc6
--- /dev/null
+++ b/script.js
@@ -0,0 +1,184 @@
+const themeToggle = document.querySelector('#theme-toggle');
+const savedTheme = localStorage.getItem('agenthub-theme');
+const modal = document.querySelector('#modal');
+const modalTitle = document.querySelector('#modal-title');
+const modalContent = document.querySelector('#modal-content');
+const modalForm = document.querySelector('#modal-form');
+const modalPrimary = document.querySelector('#modal-primary');
+const modalSecondary = document.querySelector('#modal-secondary');
+
+if (!document.querySelector('link[href="styles.css"]')) {
+  const sharedStyles = document.createElement('link');
+  sharedStyles.rel = 'stylesheet';
+  sharedStyles.href = 'styles.css';
+  document.head.appendChild(sharedStyles);
+}
+
+const applyTheme = (theme) => {
+  const isDark = theme === 'dark';
+  document.documentElement.classList.toggle('dark', isDark);
+  if (themeToggle) {
+    themeToggle.setAttribute('aria-pressed', String(isDark));
+    themeToggle.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+  }
+};
+
+if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+  document.documentElement.classList.add('dark');
+}
+applyTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+
+if (themeToggle) {
+  themeToggle.addEventListener('click', () => {
+    const nextTheme = document.documentElement.classList.contains('dark') ? 'light' : 'dark';
+    applyTheme(nextTheme);
+    localStorage.setItem('agenthub-theme', nextTheme);
+  });
+}
+
+const navLinks = document.querySelectorAll('.nav-link');
+const updateActiveNav = () => {
+  const activePage = window.location.pathname.split('/').pop() || 'index.html';
+  navLinks.forEach((link) => {
+    const isActive = link.getAttribute('href') === activePage || (activePage === 'index.html' && link.getAttribute('href') === '#home');
+    link.toggleAttribute('aria-current', isActive);
+    link.classList.toggle('bg-sky-100', isActive);
+    link.classList.toggle('text-sky-700', isActive);
+    link.classList.toggle('hover:bg-sky-200', isActive);
+    link.classList.toggle('hover:text-sky-800', isActive);
+    link.classList.toggle('dark:bg-sky-950', isActive);
+    link.classList.toggle('dark:text-sky-300', isActive);
+    link.classList.toggle('dark:hover:bg-sky-900', isActive);
+    link.classList.toggle('dark:hover:text-sky-200', isActive);
+    link.classList.toggle('hover:bg-slate-100', !isActive);
+    link.classList.toggle('hover:text-sky-600', !isActive);
+    link.classList.toggle('dark:hover:bg-neutral-800', !isActive);
+    link.classList.toggle('dark:hover:text-sky-400', !isActive);
+  });
+};
+
+let openMenu = null;
+
+const restoreMenu = (menu) => {
+  if (!menu || !menu.dataset.menuParent) return;
+  const parent = document.querySelector(`[data-menu-parent="${menu.dataset.menuParent}"]`);
+  if (parent) parent.appendChild(menu);
+  menu.classList.add('hidden');
+  menu.style.cssText = menu.dataset.menuStyle || '';
+  delete menu.dataset.menuParent;
+  delete menu.dataset.menuStyle;
+};
+
+const closeMenus = () => {
+  document.querySelectorAll('.overflow-menu').forEach((menu) => restoreMenu(menu));
+  openMenu = null;
+  document.querySelectorAll('.overflow-toggle').forEach((toggle) => toggle.setAttribute('aria-expanded', 'false'));
+};
+
+const positionMenu = (menu, toggle) => {
+  const toggleRect = toggle.getBoundingClientRect();
+  const menuRect = menu.getBoundingClientRect();
+  const margin = 8;
+  const left = Math.min(
+    Math.max(margin, toggleRect.right - menuRect.width),
+    window.innerWidth - menuRect.width - margin,
+  );
+  const top = toggleRect.bottom + margin + menuRect.height <= window.innerHeight
+    ? toggleRect.bottom + margin
+    : Math.max(margin, toggleRect.top - menuRect.height - margin);
+  menu.style.left = `${left}px`;
+  menu.style.top = `${top}px`;
+};
+
+const openOverflowMenu = (menu, toggle) => {
+  closeMenus();
+  const parent = menu.parentElement;
+  const parentId = `menu-parent-${Date.now()}`;
+  parent.dataset.menuParent = parentId;
+  menu.dataset.menuParent = parentId;
+  menu.dataset.menuStyle = menu.getAttribute('style') || '';
+  document.body.appendChild(menu);
+  menu.classList.remove('hidden');
+  menu.style.position = 'fixed';
+  menu.style.zIndex = '60';
+  menu.style.visibility = 'hidden';
+  positionMenu(menu, toggle);
+  menu.style.visibility = 'visible';
+  openMenu = { menu, toggle };
+  toggle.setAttribute('aria-expanded', 'true');
+};
+
+const closeModal = () => {
+  if (!modal) return;
+  modal.classList.add('hidden');
+  modal.classList.remove('flex');
+  modalForm.classList.add('hidden');
+  modalSecondary.classList.add('hidden');
+};
+
+const openModal = (title, content, isConfigure = false) => {
+  if (!modal) return;
+  modalTitle.textContent = title;
+  modalContent.innerHTML = '';
+  content.split('|').forEach((item) => {
+    const paragraph = document.createElement('p');
+    paragraph.textContent = item;
+    modalContent.appendChild(paragraph);
+  });
+  modalForm.classList.toggle('hidden', !isConfigure);
+  modalContent.classList.toggle('hidden', isConfigure);
+  modalPrimary.textContent = isConfigure ? 'Save changes' : 'Close';
+  modalSecondary.classList.toggle('hidden', !isConfigure);
+  modal.classList.remove('hidden');
+  modal.classList.add('flex');
+  document.querySelector('#modal-close').focus();
+};
+
+document.querySelectorAll('.overflow-toggle').forEach((toggle) => {
+  toggle.addEventListener('click', (event) => {
+    event.stopPropagation();
+    const menu = toggle.parentElement.querySelector('.overflow-menu');
+    const isOpen = openMenu?.menu === menu;
+    if (isOpen) closeMenus();
+    else openOverflowMenu(menu, toggle);
+  });
+});
+
+document.querySelectorAll('.menu-action').forEach((action) => {
+  action.addEventListener('click', () => {
+    const agentName = action.dataset.configureAgent;
+    const title = action.dataset.modalTitle;
+    closeMenus();
+    if (agentName) {
+      openModal(`Configure ${agentName}`, '', true);
+    } else if (title) {
+      openModal(title, action.dataset.modalContent);
+    }
+  });
+});
+
+document.addEventListener('click', (event) => {
+  if (!event.target.closest('.overflow-menu') && !event.target.closest('.overflow-toggle')) closeMenus();
+});
+
+document.querySelector('#modal-close')?.addEventListener('click', closeModal);
+modalPrimary?.addEventListener('click', closeModal);
+modalSecondary?.addEventListener('click', closeModal);
+modal?.addEventListener('click', (event) => {
+  if (event.target === modal) closeModal();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    closeMenus();
+    if (modal && !modal.classList.contains('hidden')) closeModal();
+  }
+});
+
+window.addEventListener('scroll', () => {
+  if (openMenu) positionMenu(openMenu.menu, openMenu.toggle);
+}, true);
+window.addEventListener('resize', () => {
+  if (openMenu) positionMenu(openMenu.menu, openMenu.toggle);
+});
+
+updateActiveNav();
diff --git a/skills.html b/skills.html
new file mode 100644
index 000000000..175d69fa7
--- /dev/null
+++ b/skills.html
@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Skills | AgentHub</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      @custom-variant dark (&:where(.dark, .dark *));
+    </style>
+  </head>
+  <body
+    class="min-h-screen bg-slate-50 text-slate-900 dark:bg-neutral-900 dark:text-slate-100"
+  >
+    <header
+      class="border-b bg-white px-4 py-4 shadow-sm dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-black/40"
+    >
+      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <a href="index.html" class="text-xl font-bold">AgentHub</a>
+        <aside class="flex items-center gap-2 sm:gap-4">
+          <button
+            type="button"
+            aria-label="Notifications"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#128276;
+          </button>
+          <span class="hidden text-sm font-medium sm:inline">Admin profile</span>
+          <button
+            id="theme-toggle"
+            type="button"
+            aria-label="Toggle dark mode"
+            aria-pressed="false"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#9788;
+          </button>
+        </aside>
+      </div>
+      <nav class="mx-auto mt-4 max-w-7xl border-t pt-4 dark:border-neutral-700">
+        <ul class="flex flex-wrap gap-6 text-sm">
+          <li><a class="nav-link" href="index.html">Home</a></li>
+          <li><a class="nav-link" href="users.html">User management</a></li>
+          <li><a class="nav-link" href="agents.html">Agent management</a></li>
+          <li><a class="nav-link" href="skills.html">Skills</a></li>
+          <li><a class="nav-link" href="contracts.html">Agent contracts</a></li>
+          <li><a class="nav-link" href="errors.html">Error log</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="mx-auto max-w-7xl px-4 py-8">
+      <p class="text-sm font-semibold uppercase tracking-wide text-sky-600">
+        Capability catalog
+      </p>
+      <h1 class="mt-2 text-3xl font-bold">Skills</h1>
+      <ul class="mt-6 grid gap-4 md:grid-cols-2">
+        <li>
+          <article
+            class="flex justify-between rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+          >
+            <div>
+              <h2 class="font-semibold">Web browsing</h2>
+              <p class="mt-2 text-sm">
+                Searches the web and gathers relevant information.
+              </p>
+            </div>
+            <div class="relative">
+              <button
+                class="overflow-toggle text-lg"
+                type="button"
+                aria-expanded="false"
+              >
+                &#8942;
+              </button>
+              <div
+                class="overflow-menu absolute right-0 z-10 hidden w-36 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+              >
+                <button
+                  class="menu-action block w-full px-3 py-2 text-left"
+                  data-modal-title="Web browsing"
+                  data-modal-content="Search public web pages|1,204 runs this month"
+                  type="button"
+                >
+                  View detail</button
+                ><button type="button" class="block px-3 py-2 text-rose-600">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article
+            class="flex justify-between rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+          >
+            <div>
+              <h2 class="font-semibold">Document reading</h2>
+              <p class="mt-2 text-sm">
+                Extracts and summarizes uploaded documents.
+              </p>
+            </div>
+            <div class="relative">
+              <button
+                class="overflow-toggle text-lg"
+                type="button"
+                aria-expanded="false"
+              >
+                &#8942;
+              </button>
+              <div
+                class="overflow-menu absolute right-0 z-10 hidden w-36 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+              >
+                <button
+                  class="menu-action block w-full px-3 py-2 text-left"
+                  data-modal-title="Document reading"
+                  data-modal-content="Extracts business documents|846 runs this month"
+                  type="button"
+                >
+                  View detail</button
+                ><button type="button" class="block px-3 py-2 text-rose-600">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article
+            class="flex justify-between rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+          >
+            <div>
+              <h2 class="font-semibold">Calendar management</h2>
+              <p class="mt-2 text-sm">
+                Organizes events across connected calendars.
+              </p>
+            </div>
+            <div class="relative">
+              <button
+                class="overflow-toggle text-lg"
+                type="button"
+                aria-expanded="false"
+              >
+                &#8942;
+              </button>
+              <div
+                class="overflow-menu absolute right-0 z-10 hidden w-36 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+              >
+                <button
+                  class="menu-action block w-full px-3 py-2 text-left"
+                  data-modal-title="Calendar management"
+                  data-modal-content="Creates and updates calendar events|389 runs this month"
+                  type="button"
+                >
+                  View detail</button
+                ><button type="button" class="block px-3 py-2 text-rose-600">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article
+            class="flex justify-between rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+          >
+            <div>
+              <h2 class="font-semibold">Email management</h2>
+              <p class="mt-2 text-sm">
+                Categorizes email and drafts responses.
+              </p>
+            </div>
+            <div class="relative">
+              <button
+                class="overflow-toggle text-lg"
+                type="button"
+                aria-expanded="false"
+              >
+                &#8942;
+              </button>
+              <div
+                class="overflow-menu absolute right-0 z-10 hidden w-36 rounded border bg-white p-1 shadow dark:bg-neutral-800"
+              >
+                <button
+                  class="menu-action block w-full px-3 py-2 text-left"
+                  data-modal-title="Email management"
+                  data-modal-content="Manages business email|512 runs this month"
+                  type="button"
+                >
+                  View detail</button
+                ><button type="button" class="block px-3 py-2 text-rose-600">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </article>
+        </li>
+      </ul>
+    </main>
+    <div
+      id="modal"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4"
+    >
+      <section
+        class="w-full max-w-lg rounded-xl bg-white p-6 dark:bg-neutral-800"
+      >
+        <div class="flex justify-between">
+          <h2 id="modal-title" class="text-xl font-bold">Details</h2>
+          <button id="modal-close" type="button">&times;</button>
+        </div>
+        <div id="modal-content" class="mt-4"></div>
+        <div id="modal-form" class="hidden"></div>
+        <button id="modal-secondary" class="hidden" type="button">Cancel</button
+        ><button id="modal-primary" type="button">Close</button>
+      </section>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..7a3343f3f
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,70 @@
+header > div:first-child {
+  min-height: 2.25rem;
+}
+
+header > div:first-child > a {
+  display: inline-block;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+body > header {
+  border-bottom-width: 0;
+}
+
+header nav {
+  width: 100%;
+  border-top-width: 0;
+}
+
+header nav ul {
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.nav-link {
+  display: inline-block;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  transition: background-color 200ms, color 200ms;
+}
+
+.nav-link:focus-visible,
+.overflow-toggle:focus-visible,
+button:focus-visible {
+  outline: 2px solid #0284c7;
+  outline-offset: 2px;
+}
+
+main > header h1,
+main > h1 {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+main > header > p,
+main > p:first-child {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+@media (min-width: 640px) {
+  header aside {
+    gap: 1rem;
+  }
+}
+
+.dark .nav-link:not([aria-current="page"]):hover {
+  background-color: #262626;
+  color: #38bdf8;
+}
diff --git a/users.html b/users.html
new file mode 100644
index 000000000..c584266a9
--- /dev/null
+++ b/users.html
@@ -0,0 +1,319 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Users | AgentHub</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      @custom-variant dark (&:where(.dark, .dark *));
+    </style>
+  </head>
+  <body
+    class="min-h-screen bg-slate-50 text-slate-900 transition-colors duration-200 dark:bg-neutral-900 dark:text-slate-100"
+  >
+    <header
+      class="bg-white/95 px-4 py-4 shadow-sm sm:px-6 lg:px-8 dark:bg-neutral-900/95 dark:shadow-black/40"
+    >
+      <div class="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <a
+          href="index.html"
+          class="text-xl font-bold tracking-tight text-slate-950 dark:text-white"
+          >AgentHub</a
+        >
+        <aside class="flex items-center gap-2">
+          <button
+            type="button"
+            aria-label="Notifications"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#128276;</button
+          ><span class="hidden text-sm font-medium sm:inline"
+            >Admin profile</span
+          ><button
+            id="theme-toggle"
+            type="button"
+            aria-label="Toggle dark mode"
+            aria-pressed="false"
+            class="rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-neutral-800"
+          >
+            &#9788;
+          </button>
+        </aside>
+      </div>
+      <nav class="mx-auto mt-4 max-w-7xl pt-4">
+        <ul class="flex flex-wrap gap-6 text-sm">
+          <li>
+            <a
+              class="nav-link"
+              href="index.html"
+              >Home</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="users.html"
+              >User management</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="agents.html"
+              >Agent management</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="skills.html"
+              >Skills</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="contracts.html"
+              >Agent contracts</a
+            >
+          </li>
+          <li>
+            <a
+              class="nav-link"
+              href="errors.html"
+              >Error log</a
+            >
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main class="mx-auto max-w-7xl space-y-5 px-4 py-8 sm:px-6 lg:px-8">
+      <header>
+        <p
+          class="text-sm font-semibold uppercase tracking-wide text-sky-600 dark:text-sky-600"
+        >
+          Workspace access
+        </p>
+        <h1
+          class="mt-2 text-3xl font-bold tracking-tight text-slate-950 dark:text-white"
+        >
+          User Management
+        </h1>
+      </header>
+      <div
+        class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
+      >
+        <div class="overflow-x-auto">
+          <table class="min-w-full text-left text-sm">
+            <thead
+              class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500 dark:bg-neutral-900 dark:text-slate-400"
+            >
+              <tr>
+                <th class="px-5 py-4">Name</th>
+                <th class="px-5 py-4">Email</th>
+                <th class="px-5 py-4">Plan</th>
+                <th class="px-5 py-4">Status</th>
+                <th class="px-5 py-4 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100 dark:divide-neutral-700">
+              <tr>
+                <th class="px-5 py-4 text-left" scope="row">Maya Chen</th>
+                <td class="px-5 py-4">maya.chen@northstarhealth.com</td>
+                <td class="px-5 py-4">Business</td>
+                <td class="px-5 py-4 text-emerald-600">Active</td>
+                <td class="relative px-5 py-4 text-right">
+                  <button
+                    class="overflow-toggle p-2 text-lg"
+                    type="button"
+                    aria-label="Actions for Maya Chen"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-5 top-14 z-10 hidden w-40 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-neutral-700"
+                      data-modal-title="Maya Chen"
+                      data-modal-content="maya.chen@northstarhealth.com|Business plan|Active|Owner: Northstar Health"
+                      type="button"
+                    >
+                      View detail</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-sm text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th class="px-5 py-4 text-left" scope="row">Liam Carter</th>
+                <td class="px-5 py-4">liam.carter@brightlinelabs.com</td>
+                <td class="px-5 py-4">Starter</td>
+                <td class="px-5 py-4 text-emerald-600">Active</td>
+                <td class="relative px-5 py-4 text-right">
+                  <button
+                    class="overflow-toggle p-2 text-lg"
+                    type="button"
+                    aria-label="Actions for Liam Carter"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-5 top-14 z-10 hidden w-40 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-neutral-700"
+                      data-modal-title="Liam Carter"
+                      data-modal-content="liam.carter@brightlinelabs.com|Starter plan|Active|Owner: Brightline Labs"
+                      type="button"
+                    >
+                      View detail</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-sm text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th class="px-5 py-4 text-left" scope="row">Sofia Reyes</th>
+                <td class="px-5 py-4">sofia.reyes@cedarworks.co</td>
+                <td class="px-5 py-4">Enterprise</td>
+                <td class="px-5 py-4 text-emerald-600">Active</td>
+                <td class="relative px-5 py-4 text-right">
+                  <button
+                    class="overflow-toggle p-2 text-lg"
+                    type="button"
+                    aria-label="Actions for Sofia Reyes"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-5 top-14 z-10 hidden w-40 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-neutral-700"
+                      data-modal-title="Sofia Reyes"
+                      data-modal-content="sofia.reyes@cedarworks.co|Enterprise plan|Active|Owner: CedarWorks"
+                      type="button"
+                    >
+                      View detail</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-sm text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th class="px-5 py-4 text-left" scope="row">Noah Williams</th>
+                <td class="px-5 py-4">noah.williams@vertexlogistics.com</td>
+                <td class="px-5 py-4">Business</td>
+                <td class="px-5 py-4 text-amber-600">Pending</td>
+                <td class="relative px-5 py-4 text-right">
+                  <button
+                    class="overflow-toggle p-2 text-lg"
+                    type="button"
+                    aria-label="Actions for Noah Williams"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-5 top-14 z-10 hidden w-40 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-neutral-700"
+                      data-modal-title="Noah Williams"
+                      data-modal-content="noah.williams@vertexlogistics.com|Business plan|Pending invitation|Owner: Vertex Logistics"
+                      type="button"
+                    >
+                      View detail</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-sm text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th class="px-5 py-4 text-left" scope="row">Amara Okafor</th>
+                <td class="px-5 py-4">amara.okafor@meridianfinance.com</td>
+                <td class="px-5 py-4">Starter</td>
+                <td class="px-5 py-4 text-rose-600">Suspended</td>
+                <td class="relative px-5 py-4 text-right">
+                  <button
+                    class="overflow-toggle p-2 text-lg"
+                    type="button"
+                    aria-label="Actions for Amara Okafor"
+                    aria-expanded="false"
+                  >
+                    &#8942;
+                  </button>
+                  <div
+                    class="overflow-menu absolute right-5 top-14 z-10 hidden w-40 rounded-lg border bg-white p-1 shadow-lg dark:border-neutral-600 dark:bg-neutral-800"
+                  >
+                    <button
+                      class="menu-action block w-full px-3 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-neutral-700"
+                      data-modal-title="Amara Okafor"
+                      data-modal-content="amara.okafor@meridianfinance.com|Starter plan|Suspended|Owner: Meridian Finance"
+                      type="button"
+                    >
+                      View detail</button
+                    ><button
+                      class="block w-full px-3 py-2 text-left text-sm text-rose-600"
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </main>
+    <div
+      id="modal"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/60 p-4"
+    >
+      <section
+        class="w-full max-w-lg rounded-xl bg-white p-6 dark:bg-neutral-800"
+      >
+        <div class="flex justify-between">
+          <h2 id="modal-title" class="text-xl font-bold">Details</h2>
+          <button id="modal-close" type="button">&times;</button>
+        </div>
+        <div id="modal-content" class="mt-5 space-y-3 text-sm"></div>
+        <div id="modal-form" class="hidden">
+          <textarea
+            id="system-prompt"
+            class="mt-4 min-h-40 w-full rounded-lg border p-3"
+          >
+You are a reliable AgentHub assistant.</textarea>
+        </div>
+        <div class="mt-5 flex justify-end gap-3">
+          <button id="modal-secondary" class="hidden" type="button">
+            Cancel</button
+          ><button id="modal-primary" type="button">Close</button>
+        </div>
+      </section>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>