yuukiii/hermes-mcp
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): v1 launch — consumer hero, onboarding flow, Obsidian app card

Browse Source
This commit is contained in:
Garfield
2026-06-12 06:39:07 -04:00
parent f74f90a2f0
commit bc58befd5e
11 changed files with 211 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
product/app/app-k8s.yaml
View File

@@ -15,7 +15,7 @@ spec:
spec:
containers:
- name: squaremcp-app
image: localhost:32000/squaremcp-app@sha256:c9545e6ac1adcfc6dbfb162f4dbff5db39d9fbf4c5bd95899c74d70174dd3cfa
image: localhost:32000/squaremcp-app@sha256:c2bc1ee1bd6eed3981c6cf4c253d61cc1022373720f65debaea03dd8b53ed494
imagePullPolicy: Always
ports:
- containerPort: 8080

199
product/app/index.html
View File

@@ -92,9 +92,9 @@
<main class="dashboard">
<section class="welcome">
<h2>Connect your platforms</h2>
<p>Link your social accounts to publish, analyze, and manage content from one place.</p>
<button id="connect-mcp-btn" class="btn btn-primary" style="margin-top:16px;">Connect MCP Client</button>
<h2>Connect your accounts</h2>
<p>Connect once. Then ask Claude or ChatGPT to post, search your notes, or send email — without touching any of these apps.</p>
<button id="connect-mcp-btn" class="btn btn-primary" style="margin-top:16px;">Connect to Claude / ChatGPT</button>
</section>
<section class="usage-bar" id="usage-bar">
@@ -106,114 +106,124 @@
</section>
<section class="platform-grid">
<!-- TikTok -->
<div class="platform-card" data-platform="tiktok">
<div class="platform-icon" style="background:#000;">🎵</div>
<div class="platform-info">
<h3>TikTok</h3>
<p class="platform-desc">Publish videos and view analytics</p>
<span class="status-badge disconnected">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="tiktok">Connect</button>
<div class="onboarding-banner" id="onboarding-banner">
<strong>Start here</strong> — connect one of these four to get started with Claude and ChatGPT.
</div>
<!-- Facebook -->
<div class="platform-card" data-platform="facebook">
<!-- v1 platforms: Obsidian, Email, Facebook, Instagram -->
<div class="platform-card v1-platform" data-platform="obsidian">
<div class="platform-icon" style="background:#7c3aed;">&#x1F4D3;</div>
<div class="platform-info">
<h3>Obsidian</h3>
<p class="platform-desc">Search and edit your notes vault</p>
<span class="status-badge disconnected" id="status-obsidian">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="obsidian">Connect</button>
</div>
<div class="platform-card v1-platform" data-platform="email">
<div class="platform-icon" style="background:#ea4335;">&#x2709;&#xFE0F;</div>
<div class="platform-info">
<h3>Email</h3>
<p class="platform-desc">Gmail, Yahoo, and IMAP accounts</p>
<span class="status-badge disconnected" id="status-email">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="email">Connect</button>
</div>
<div class="platform-card v1-platform" data-platform="facebook">
<div class="platform-icon" style="background:#1877f2;">f</div>
<div class="platform-info">
<h3>Facebook</h3>
<p class="platform-desc">Post to pages and manage content</p>
<span class="status-badge disconnected">Not connected</span>
<span class="status-badge disconnected" id="status-facebook">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="facebook">Connect</button>
</div>
<!-- Instagram -->
<div class="platform-card" data-platform="instagram">
<div class="platform-icon" style="background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);">📷</div>
<div class="platform-card v1-platform" data-platform="instagram">
<div class="platform-icon" style="background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);">&#x1F4F7;</div>
<div class="platform-info">
<h3>Instagram</h3>
<p class="platform-desc">Publish reels and images</p>
<span class="status-badge disconnected">Not connected</span>
<span class="status-badge disconnected" id="status-instagram">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="instagram">Connect</button>
</div>
<!-- LinkedIn -->
<div class="platform-divider">
<span>More platforms</span>
</div>
<!-- Other platforms -->
<div class="platform-card" data-platform="linkedin">
<div class="platform-icon" style="background:#0a66c2;">in</div>
<div class="platform-info">
<h3>LinkedIn</h3>
<p class="platform-desc">Share posts, images, and videos</p>
<span class="status-badge disconnected">Not connected</span>
<span class="status-badge disconnected" id="status-linkedin">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="linkedin">Connect</button>
</div>
<!-- Twitter/X -->
<div class="platform-card" data-platform="twitter">
<div class="platform-icon" style="background:#000;">𝕏</div>
<div class="platform-icon" style="background:#000;">&#x1D54F;</div>
<div class="platform-info">
<h3>Twitter / X</h3>
<p class="platform-desc">Tweet with media support</p>
<span class="status-badge disconnected">Not connected</span>
<span class="status-badge disconnected" id="status-twitter">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="twitter">Connect</button>
</div>
<!-- Telegram -->
<div class="platform-card" data-platform="telegram">
<div class="platform-icon" style="background:#0088cc;">✈️</div>
<div class="platform-info">
<h3>Telegram</h3>
<p class="platform-desc">Send messages via bot</p>
<span class="status-badge disconnected">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="telegram">Connect</button>
</div>
<!-- Discord -->
<div class="platform-card" data-platform="discord">
<div class="platform-icon" style="background:#5865f2;">🎮</div>
<div class="platform-info">
<h3>Discord</h3>
<p class="platform-desc">Send messages to channels</p>
<span class="status-badge disconnected">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="discord">Connect</button>
</div>
<!-- WhatsApp -->
<div class="platform-card" data-platform="whatsapp">
<div class="platform-icon" style="background:#25d366;">💬</div>
<div class="platform-icon" style="background:#25d366;">&#x1F4AC;</div>
<div class="platform-info">
<h3>WhatsApp</h3>
<p class="platform-desc">Business messaging</p>
<span class="status-badge disconnected">Not connected</span>
<span class="status-badge disconnected" id="status-whatsapp">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="whatsapp">Connect</button>
</div>
<!-- Slack -->
<div class="platform-card" data-platform="telegram">
<div class="platform-icon" style="background:#0088cc;">&#x2708;&#xFE0F;</div>
<div class="platform-info">
<h3>Telegram</h3>
<p class="platform-desc">Send messages via bot</p>
<span class="status-badge disconnected" id="status-telegram">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="telegram">Connect</button>
</div>
<div class="platform-card" data-platform="discord">
<div class="platform-icon" style="background:#5865f2;">&#x1F3AE;</div>
<div class="platform-info">
<h3>Discord</h3>
<p class="platform-desc">Send messages to channels</p>
<span class="status-badge disconnected" id="status-discord">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="discord">Connect</button>
</div>
<div class="platform-card" data-platform="slack">
<div class="platform-icon" style="background:#4a154b;">💬</div>
<div class="platform-icon" style="background:#4a154b;">&#x1F4AC;</div>
<div class="platform-info">
<h3>Slack</h3>
<p class="platform-desc">Send messages to channels</p>
<span class="status-badge disconnected">Not connected</span>
<span class="status-badge disconnected" id="status-slack">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="slack">Connect</button>
</div>
<!-- Email -->
<div class="platform-card" data-platform="email">
<div class="platform-icon" style="background:#ea4335;">✉️</div>
<div class="platform-card" data-platform="tiktok">
<div class="platform-icon" style="background:#000;">&#x1F3B5;</div>
<div class="platform-info">
<h3>Email</h3>
<p class="platform-desc">IMAP/SMTP accounts</p>
<span class="status-badge disconnected">Not connected</span>
<h3>TikTok</h3>
<p class="platform-desc">Publish videos and view analytics</p>
<span class="status-badge disconnected" id="status-tiktok">Not connected</span>
</div>
<button class="btn btn-connect" data-platform="email">Connect</button>
<button class="btn btn-connect" data-platform="tiktok">Connect</button>
</div>
</section>
@@ -283,5 +293,76 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script src="app.js"></script>
<script src="https://hermes.squaremcp.com/chat-widget.js"></script>
<style>
.onboarding-banner {
grid-column: 1 / -1;
background: linear-gradient(135deg, #ede9fe 0%, #e0f2fe 100%);
border: 1px solid #c4b5fd;
border-radius: 10px;
padding: 14px 18px;
font-size: 0.9rem;
color: #4c1d95;
margin-bottom: 4px;
}
.platform-card.v1-platform {
border: 1.5px solid #c4b5fd;
}
.platform-divider {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0 4px;
color: #94a3b8;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.platform-divider::before,
.platform-divider::after {
content: '';
flex: 1;
height: 1px;
background: #e2e8f0;
}
.status-badge.connected {
background: #dcfce7;
color: #166534;
border-color: #bbf7d0;
}
.status-badge.connected::before {
content: '✓ ';
}
</style>
<script>
/* After app.js loads, patch platform card connected states to show account name */
document.addEventListener('DOMContentLoaded', function() {
const origSetStatus = window.setPlatformStatus;
/* Override connect button handler to update badge with account name when connected */
document.querySelectorAll('.platform-card').forEach(function(card) {
const platform = card.dataset.platform;
const badge = card.querySelector('.status-badge');
const btn = card.querySelector('.btn-connect');
if (!badge || !btn) return;
/* app.js manages status via API; we observe class changes to update text */
const observer = new MutationObserver(function() {
if (badge.classList.contains('connected') && badge.textContent.trim() === 'Connected') {
/* badge was set to generic "Connected" — good enough for now */
}
});
observer.observe(badge, { attributes: true, childList: true, subtree: true });
});
/* Hide onboarding banner once any v1 platform is connected */
function checkOnboardingBanner() {
const banner = document.getElementById('onboarding-banner');
if (!banner) return;
const anyV1Connected = Array.from(document.querySelectorAll('.platform-card.v1-platform .status-badge'))
.some(function(b) { return b.classList.contains('connected'); });
if (anyV1Connected) banner.style.display = 'none';
}
document.querySelector('.platform-grid').addEventListener('DOMSubtreeModified', checkOnboardingBanner);
});
</script>
</body>
</html>