@bitseek/hermes-webui 0.1.0-beta.0

package/vendor/agent-frontend-shell/extensions/branding/branding.js

@@ -0,0 +1,112 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Branding Extension for Hermes WebUI
+   Dynamically replaces favicon via /extensions/branding/config.json.
+   Loaded via HERMES_WEBUI_EXTENSION_SCRIPT_URLS — runs after boot.js.
+   ═══════════════════════════════════════════════════════════════════════════ */
+(() => {
+  if (document.getElementById('branding-ext')) return;
+
+  const CONFIG_URL = '/extensions/branding/config.json';
+
+  async function loadBranding() {
+    try {
+      const resp = await fetch(CONFIG_URL);
+      if (!resp.ok) return;
+      const config = await resp.json();
+      applyBranding(config);
+    } catch (e) {
+      console.warn('[branding] Failed to load config:', e);
+    }
+  }
+
+  function applyBranding(config) {
+    if (config.title) applyTitle(config.title);
+    if (config.favicon) applyFavicon(config.favicon);
+    if (config.logo) applyLogo(config.logo);
+    if (config.manifest) applyManifest(config.manifest);
+  }
+
+  function applyTitle(title) {
+    window._botName = title;
+    document.title = title;
+    let attempts = 0;
+    const observer = new MutationObserver(() => {
+      if (document.title !== title) document.title = title;
+      if (++attempts > 50) observer.disconnect();
+    });
+    observer.observe(document.querySelector('title'), { childList: true, characterData: true, subtree: true });
+  }
+
+  function applyLogo(logo) {
+    if (logo.titlebar) {
+      const el = document.querySelector('.app-titlebar-icon');
+      if (el) fetchSVGAndInject(el, logo.titlebar);
+    }
+
+    if (logo.emptyState) {
+      const el = document.querySelector('.empty-logo');
+      if (el) fetchSVGAndInject(el, logo.emptyState);
+    }
+  }
+
+  function fetchSVGAndInject(container, svgUrl) {
+    fetch(svgUrl)
+      .then(r => r.text())
+      .then(svg => {
+        if (svg.includes('<svg')) {
+          container.innerHTML = svg;
+          const svgEl = container.querySelector('svg');
+          if (svgEl && !svgEl.getAttribute('width')) {
+            svgEl.setAttribute('width', '16');
+            svgEl.setAttribute('height', '16');
+          }
+        }
+      })
+      .catch(() => {});
+  }
+
+  function applyManifest(manifestUrl) {
+    const link = document.querySelector('link[rel="manifest"]');
+    if (link) link.href = manifestUrl;
+  }
+
+  function applyFavicon(fav) {
+    document.querySelectorAll(
+      'link[rel="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"]'
+    ).forEach(el => el.remove());
+
+    if (fav.svg) {
+      const link = document.createElement('link');
+      link.rel = 'icon';
+      link.type = 'image/svg+xml';
+      link.href = fav.svg;
+      document.head.appendChild(link);
+    }
+
+    if (fav.png32) {
+      const link = document.createElement('link');
+      link.rel = 'icon';
+      link.type = 'image/png';
+      link.sizes = '32x32';
+      link.href = fav.png32;
+      document.head.appendChild(link);
+    }
+
+    if (fav.ico) {
+      const link = document.createElement('link');
+      link.rel = 'shortcut icon';
+      link.href = fav.ico;
+      document.head.appendChild(link);
+    }
+
+    if (fav.appleTouch) {
+      const link = document.createElement('link');
+      link.rel = 'apple-touch-icon';
+      link.sizes = '512x512';
+      link.href = fav.appleTouch;
+      document.head.appendChild(link);
+    }
+  }
+
+  loadBranding();
+})();

package/vendor/agent-frontend-shell/extensions/branding/config.json

@@ -0,0 +1,14 @@
+{
+  "title": "BitSeek Claw",
+  "favicon": {
+    "svg": "/extensions/branding/assets/favicon.svg",
+    "png32": "/extensions/branding/assets/favicon-32.png",
+    "ico": "/extensions/branding/assets/favicon.ico",
+    "appleTouch": "/extensions/branding/assets/apple-touch-icon.png"
+  },
+  "logo": {
+    "titlebar": "/extensions/branding/assets/titlebar-icon-v2.svg",
+    "emptyState": "/extensions/branding/assets/empty-logo.svg"
+  },
+  "manifest": "/extensions/branding/manifest.json"
+}

package/vendor/agent-frontend-shell/extensions/branding/manifest.json

@@ -0,0 +1,53 @@
+{
+  "id": "./",
+  "name": "BitSeek Claw",
+  "short_name": "BitSeek",
+  "description": "BitSeek Claw AI Agent Web UI",
+  "start_url": "./?source=pwa",
+  "scope": "./",
+  "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone", "minimal-ui"],
+  "background_color": "#0D0D1A",
+  "theme_color": "#0D0D1A",
+  "orientation": "portrait-primary",
+  "categories": ["productivity", "utilities"],
+  "shortcuts": [
+    {
+      "name": "New conversation",
+      "short_name": "New chat",
+      "description": "Open BitSeek Claw ready for a new chat",
+      "url": "./?source=pwa&action=new-chat",
+      "icons": [
+        {
+          "src": "/extensions/branding/assets/favicon-192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        }
+      ]
+    }
+  ],
+  "icons": [
+    {
+      "src": "/extensions/branding/assets/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/extensions/branding/assets/favicon-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/extensions/branding/assets/favicon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/extensions/branding/assets/favicon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/vendor/agent-frontend-shell/extensions/index.js

@@ -0,0 +1,67 @@
+/**
+ * Hermes Extension System - Main Entry
+ *
+ * Fetches extensions/manifest.json, loads CSS and JS assets
+ * in declared order, then dismisses the loader.
+ *
+ * Loaded via HERMES_WEBUI_EXTENSION_SCRIPT_URLS (single entry).
+ */
+(async function () {
+  'use strict';
+
+  var MANIFEST_URL = '/extensions/manifest.json';
+
+  /* ── load a CSS file (non-blocking) ── */
+  function loadCSS(url) {
+    return new Promise(function (resolve) {
+      var link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = url;
+      link.onload = resolve;
+      link.onerror = resolve;
+      document.head.appendChild(link);
+    });
+  }
+
+  /* ── load a JS file (blocking, maintains order) ── */
+  function loadJS(url) {
+    return new Promise(function (resolve, reject) {
+      var s = document.createElement('script');
+      s.src = url;
+      s.onload = resolve;
+      s.onerror = function () { reject(new Error('Failed: ' + url)); };
+      document.body.appendChild(s);
+    });
+  }
+
+  /* ── load all extensions from manifest ── */
+  async function loadExtensions() {
+    var resp = await fetch(MANIFEST_URL);
+    if (!resp.ok) throw new Error('Manifest not found');
+    var manifest = await resp.json();
+    var exts = (manifest.extensions || []).slice()
+      .sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+
+    for (var i = 0; i < exts.length; i++) {
+      var ext = exts[i];
+      var cssTasks = (ext.css || []).map(loadCSS);
+      await Promise.all(cssTasks);
+      var jsFiles = ext.js || [];
+      for (var j = 0; j < jsFiles.length; j++) {
+        await loadJS(jsFiles[j]);
+      }
+    }
+  }
+
+  /* ── execute and dismiss loader ── */
+  try {
+    await loadExtensions();
+  } catch (e) {
+    console.warn('[extensions] Load error:', e);
+  }
+
+  if (typeof window.__hermesLoaderDismiss === 'function') {
+    window.__hermesLoaderDismiss();
+  }
+  document.dispatchEvent(new Event('hermes-loader:dismiss'));
+})();

package/vendor/agent-frontend-shell/extensions/loader/hermes-loader.js

@@ -0,0 +1,77 @@
+/* hermes-loader: splash screen web-component
+   Injected after <body> (no defer) — runs before all defer scripts.
+   Displays a loading overlay and auto-dismisses via manual API call. */
+(function () {
+  'use strict';
+
+  var DISMISS_DELAY = 350;
+
+  /* ── resolve colors from current skin/theme ── */
+  function _colors() {
+    var h = document.documentElement;
+    var skin = h.dataset.skin || '';
+    var dark = h.classList.contains('dark');
+    if (skin === 'bitseek') {
+      return dark
+        ? { bg: '#160804', accent: '#FF7F50', ring: 'rgba(255,127,80,.35)', text: '#C4BAB8' }
+        : { bg: '#FFFFFF', accent: '#FF7F50', ring: 'rgba(255,127,80,.30)', text: '#A7A7A7' };
+    }
+    return dark
+      ? { bg: '#0D0D1A', accent: '#A78BFA', ring: 'rgba(167,139,250,.35)', text: '#9CA3AF' }
+      : { bg: '#FAF7F0', accent: '#7C3AED', ring: 'rgba(124,58,237,.30)', text: '#9CA3AF' };
+  }
+
+  /* ── custom element ── */
+  class HermesLoader extends HTMLElement {
+    connectedCallback() {
+      var c = _colors();
+      var shadow = this.attachShadow({ mode: 'open' });
+      shadow.innerHTML =
+        '<style>' +
+          ':host{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;' +
+          'background:' + c.bg + ';transition:opacity .25s ease-out,visibility .25s;}' +
+          ':host(.hiding){opacity:0;visibility:hidden;pointer-events:none;}' +
+          '.wrap{text-align:center;}' +
+          '.spinner{width:44px;height:44px;margin:0 auto 20px;border:3px solid ' + c.ring + ';' +
+          'border-top-color:' + c.accent + ';border-radius:50%;animation:spin .7s linear infinite;}' +
+          '.text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;' +
+          'font-size:13px;letter-spacing:.3px;color:' + c.text + ';}' +
+          '@keyframes spin{to{transform:rotate(360deg)}}' +
+        '</style>' +
+        '<div class="wrap">' +
+          '<div class="spinner"></div>' +
+          '<div class="text">Loading...</div>' +
+        '</div>';
+    }
+
+    dismiss() {
+      if (this._dismissed) return;
+      this._dismissed = true;
+      this.classList.add('hiding');
+      setTimeout(function () { try { this.remove(); } catch (_) {} }.bind(this), DISMISS_DELAY);
+    }
+  }
+
+  if (!customElements.get('hermes-loader')) {
+    customElements.define('hermes-loader', HermesLoader);
+  }
+
+  /* ── inject into DOM ── */
+  var el = document.createElement('hermes-loader');
+  document.body.prepend(el);
+
+  /* ── orchestration ── */
+  var dismissed = false;
+
+  function dismiss() {
+    if (dismissed) return;
+    dismissed = true;
+    setTimeout(() => {
+        el.dismiss();
+    }, 600);
+  }
+
+  /* manual dismiss API */
+  window.__hermesLoaderDismiss = dismiss;
+  document.addEventListener('hermes-loader:dismiss', dismiss);
+})();

package/vendor/agent-frontend-shell/extensions/manifest.json

@@ -0,0 +1,16 @@
+{
+  "extensions": [
+    {
+      "id": "branding",
+      "order": 1,
+      "css": [],
+      "js": ["/extensions/branding/branding.js"]
+    },
+    {
+      "id": "pages",
+      "order": 2,
+      "css": ["/extensions/pages/registry.css"],
+      "js": ["/extensions/pages/registry.js"]
+    }
+  ]
+}

package/vendor/agent-frontend-shell/extensions/pages/ai-teammates/page.css

@@ -0,0 +1,333 @@
+/* AI Colleagues Page Styles */
+
+/*
+ * Note: The registry creates the outer container with id="mainAi-teammates"
+ * (from capitalize("ai-teammates")). The display:flex is handled by the
+ * dynamic CSS in registry.js when .showing-ai-teammates is active.
+ */
+
+/* Main view scrollable container */
+#mainAi-teammates {
+  overflow-y: auto;
+  background: var(--bg, #f8f4f0);
+}
+
+/* ── Page header ─────────────────────────────────────────────────── */
+.at-page-header {
+  padding: 24px 32px 16px;
+}
+
+.at-page-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text, #1a1a1a);
+  margin: 0 0 4px;
+  line-height: 1.3;
+}
+
+.at-page-subtitle {
+  font-size: 14px;
+  color: var(--muted, #888);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Content card ────────────────────────────────────────────────── */
+.at-content-card {
+  margin: 0 24px 24px;
+  background: var(--surface, #fff);
+  border-radius: var(--radius-lg, 12px);
+  border: 1px solid var(--border, #e8e4e0);
+  overflow: hidden;
+}
+
+/* ── Card header ─────────────────────────────────────────────────── */
+.at-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border, #f0ece8);
+  margin-bottom: 16px;
+}
+
+.at-card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.at-card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text, #1a1a1a);
+}
+
+.at-card-count {
+  font-size: 12px;
+  color: var(--muted, #888);
+  background: var(--surface-subtle, #f5f5f5);
+  padding: 2px 10px;
+  border-radius: var(--radius-pill, 999px);
+}
+
+.at-card-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ── Buttons ─────────────────────────────────────────────────────── */
+.at-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 16px;
+  border-radius: var(--radius-md, 8px);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: none;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.at-btn-outline {
+  background: var(--surface, #fff);
+  color: var(--accent, #e8734a);
+  border: 1px solid var(--accent, #e8734a);
+}
+
+.at-btn-outline:hover {
+  background: var(--accent, #e8734a);
+  color: var(--surface, #fff);
+}
+
+.at-btn-primary {
+  background: var(--accent, #e8734a);
+  color: var(--surface, #fff);
+}
+
+.at-btn-primary:hover {
+  background: var(--accent-hover, #d66a42);
+}
+
+/* ── Category section ────────────────────────────────────────────── */
+.at-category {
+  background: var(--surface-subtle, #faf8f6);
+  border-radius: var(--radius-md, 8px);
+  margin: 0 16px 16px;
+  padding: 16px;
+}
+
+.at-category:first-of-type {
+  margin-top: 16px;
+}
+
+.at-category-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 0 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--border, #e8e4e0);
+}
+
+.at-category-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--accent, #e8734a);
+}
+
+.at-category-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text, #1a1a1a);
+}
+
+.at-category-count {
+  font-size: 12px;
+  color: var(--muted, #888);
+  margin-left: auto;
+}
+
+/* ── Role grid ───────────────────────────────────────────────────── */
+.at-role-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+@media (max-width: 1200px) {
+  .at-role-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .at-role-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .at-role-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Role card ───────────────────────────────────────────────────── */
+.at-role-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: var(--radius-md, 8px);
+  border: 1px solid var(--border, #e8e4e0);
+  background: var(--surface, #fff);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-height: 64px;
+}
+
+.at-role-card:hover {
+  border-color: var(--accent, #e8734a);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.at-role-card--loading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.at-role-card--loading .at-role-arrow {
+  color: var(--accent, #e8734a);
+}
+
+.at-spinner {
+  animation: at-spin 1s linear infinite;
+}
+
+@keyframes at-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.at-role-card-body {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+/* ── Avatar ──────────────────────────────────────────────────────── */
+.at-role-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: linear-gradient(135deg, #f5e6d3 0%, #f0d4b8 100%);
+}
+
+.at-role-initials {
+  font-size: 13px;
+  font-weight: 700;
+  color: #8b5e3c;
+  letter-spacing: 0.02em;
+}
+
+/* ── Role info ───────────────────────────────────────────────────── */
+.at-role-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.at-role-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text, #1a1a1a);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.at-role-desc {
+  font-size: 11px;
+  color: var(--muted, #999);
+  line-height: 1.4;
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Arrow ───────────────────────────────────────────────────────── */
+.at-role-arrow {
+  flex-shrink: 0;
+  color: var(--muted, #ccc);
+  margin-left: 8px;
+  transition: color 0.15s ease;
+}
+
+.at-role-card:hover .at-role-arrow {
+  color: var(--accent, #e8734a);
+}
+
+/* ── Loading / Error / Empty states ──────────────────────────────── */
+.ai-teammates-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.ai-teammates-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 48px;
+  color: var(--muted, #888);
+  font-size: 14px;
+}
+
+.ai-teammates-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 48px;
+  color: var(--error, #e84a4a);
+  font-size: 14px;
+}
+
+.at-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 32px;
+  gap: 12px;
+}
+
+.at-empty-text {
+  font-size: 14px;
+  color: var(--muted, #888);
+}
+
+/* ── Panel view styling (hidden — no sidebar needed) ─────────────── */
+/* Registry creates id as 'panel' + capitalize(name) = 'panelAi-teammates' */
+#panelAi-teammates {
+  display: none !important;
+}
+
+.sidebar:has(+main.showing-ai-teammates) {
+  display: none !important;
+}