claude-code-swarm 0.3.4 → 0.3.6

package/references/openhive/src/web/styles/globals.css

@@ -0,0 +1,503 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+/* ═══════════════════════════════════════════════════════════════
+   TAILWIND V4 THEME
+═══════════════════════════════════════════════════════════════ */
+@theme {
+  /* OpenHive brand accent */
+  --color-honey-50: #fffbeb;
+  --color-honey-100: #fef3c7;
+  --color-honey-200: #fde68a;
+  --color-honey-300: #fcd34d;
+  --color-honey-400: #fbbf24;
+  --color-honey-500: #f59e0b;
+  --color-honey-600: #d97706;
+  --color-honey-700: #b45309;
+  --color-honey-800: #92400e;
+  --color-honey-900: #78350f;
+  --color-honey-950: #451a03;
+
+  /* Slack-inspired workspace palette */
+  --color-workspace-bg: #1a1d21;
+  --color-workspace-sidebar: #19171d;
+  --color-workspace-surface: #222529;
+  --color-workspace-elevated: #2c2d31;
+  --color-workspace-hover: #35373b;
+  --color-workspace-active: #1164a3;
+  --color-workspace-border: #35373b;
+  --color-workspace-border-subtle: #2c2d31;
+  --color-workspace-text: #d1d2d3;
+  --color-workspace-text-secondary: #ababad;
+  --color-workspace-text-muted: #7a7b7e;
+
+  /* Vote colors */
+  --color-upvote: #ff4500;
+  --color-downvote: #7193ff;
+
+  /* Dark theme */
+  --color-dark-bg: #08080a;
+  --color-dark-card: #111114;
+  --color-dark-elevated: #19191e;
+  --color-dark-hover: #222229;
+  --color-dark-border: #1f1f27;
+  --color-dark-text: #e8e6e3;
+  --color-dark-text-secondary: #6e6a7a;
+
+  /* Light theme */
+  --color-light-bg: #f8f7f4;
+  --color-light-card: #ffffff;
+  --color-light-elevated: #f0eeeb;
+  --color-light-hover: #e4e2de;
+  --color-light-border: #dbd8d3;
+  --color-light-text: #1a1815;
+  --color-light-text-secondary: #7a7670;
+
+  /* SwarmCraft visualization tokens */
+  --color-void: #06060a;
+  --color-deep: #0a0a10;
+  --color-surface: #101018;
+  --color-elevated: #16161f;
+  --color-hover: #1c1c28;
+  --color-border-subtle: #1e1e2a;
+  --color-border-default: #2a2a3a;
+  --color-text-primary: #e4e4ed;
+  --color-text-secondary: #8888a0;
+  --color-text-muted: #5a5a70;
+  --color-accent: #7c3aed;
+  --color-accent-dim: #5b21b6;
+  --color-node-file: #3b82f6;
+  --color-node-folder: #6366f1;
+  --color-node-class: #f59e0b;
+  --color-node-function: #10b981;
+  --color-node-interface: #ec4899;
+  --color-node-import: #6b7280;
+  --color-node-method: #14b8a6;
+
+  /* Fonts */
+  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
+  --font-mono: 'DM Mono', monospace;
+  --font-display: 'DM Sans', system-ui, sans-serif;
+  --font-sc-sans: 'Outfit', system-ui, sans-serif;
+  --font-sc-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Font sizes */
+  --text-2xs: 0.75rem;
+  --text-2xs--line-height: 1.125rem;
+  --text-xs: 0.8125rem;
+  --text-xs--line-height: 1.25rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.375rem;
+  --text-base: 0.9375rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.0625rem;
+  --text-lg--line-height: 1.625rem;
+  --text-xl: 1.1875rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.375rem;
+  --text-2xl--line-height: 1.875rem;
+  --text-3xl: 1.625rem;
+  --text-3xl--line-height: 2.125rem;
+
+  /* Spacing */
+  --spacing-4_5: 1.125rem;
+
+  /* Border radius */
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.25rem;
+
+  /* Animations */
+  --animate-fade-in-up: fade-in-up 0.3s ease-out;
+  --animate-glow-breathe: glow-breathe 3s ease-in-out infinite;
+  --animate-breathe: breathe 3s ease-in-out infinite;
+  --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
+  --animate-sc-slide-in: sc-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --animate-sc-slide-up: sc-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --animate-sc-fade-in: sc-fade-in 0.3s ease-out;
+
+  /* Box shadows */
+  --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.4);
+  --shadow-glow-soft: 0 0 40px rgba(124, 58, 237, 0.15);
+}
+
+/* Keyframes */
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes glow-breathe {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+@keyframes breathe {
+  0%, 100% {
+    border-color: #2a2a3a;
+    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.3);
+  }
+  50% {
+    border-color: #7c3aed;
+    box-shadow: 0 0 40px 10px rgba(124, 58, 237, 0.3);
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 40px rgba(124, 58, 237, 0.4);
+  }
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 0 80px rgba(124, 58, 237, 0.6);
+  }
+}
+
+@keyframes sc-slide-in {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes sc-slide-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes sc-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BASE STYLES
+═══════════════════════════════════════════════════════════════ */
+@layer base {
+  /* Theme CSS variables - Slack-inspired workspace */
+  :root, .dark {
+    --color-bg: #1a1d21;
+    --color-sidebar: #1a1d21;
+    --color-surface: #222529;
+    --color-elevated: #2c2d31;
+    --color-hover: #35373b;
+    --color-border: #35373b;
+    --color-border-subtle: #2c2d31;
+    --color-text: #d1d2d3;
+    --color-text-secondary: #ababad;
+    --color-text-muted: #7a7b7e;
+    --color-accent: #f59e0b;
+    --color-accent-hover: #fbbf24;
+    --color-accent-bg: rgba(245, 158, 11, 0.08);
+  }
+
+  .light {
+    --color-bg: #f4f4f5;
+    --color-sidebar: #f4f4f5;
+    --color-surface: #ffffff;
+    --color-elevated: #f0f0f1;
+    --color-hover: #e8e8e9;
+    --color-border: #e0e0e1;
+    --color-border-subtle: #ebebec;
+    --color-text: #1d1c1d;
+    --color-text-secondary: #616061;
+    --color-text-muted: #999a9b;
+    --color-accent: #d97706;
+    --color-accent-hover: #b45309;
+    --color-accent-bg: rgba(217, 119, 6, 0.06);
+  }
+
+  html {
+    @apply antialiased;
+    font-size: 15px;
+  }
+
+  body {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    @apply min-h-screen;
+  }
+
+  /* Selection */
+  ::selection {
+    background-color: rgba(245, 158, 11, 0.25);
+    color: #fff;
+  }
+
+  /* Scrollbar - thin, unobtrusive */
+  ::-webkit-scrollbar {
+    @apply w-1.5;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--color-hover);
+    @apply rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-text-muted);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   COMPONENT CLASSES
+═══════════════════════════════════════════════════════════════ */
+@layer components {
+  /* === Buttons - compact Slack-style === */
+  .btn {
+    @apply px-3 py-1.5 rounded-md font-medium text-sm cursor-pointer select-none;
+    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+  }
+
+  .btn-primary {
+    @apply bg-honey-500 text-black hover:bg-honey-400;
+  }
+
+  .btn-secondary {
+    background-color: var(--color-elevated);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    @apply rounded-md;
+  }
+
+  .btn-secondary:hover {
+    background-color: var(--color-hover);
+  }
+
+  .btn-ghost {
+    color: var(--color-text-secondary);
+    @apply rounded-md;
+  }
+
+  .btn-ghost:hover {
+    color: var(--color-text);
+    background-color: var(--color-hover);
+  }
+
+  /* === Surface/Cards - flat, minimal === */
+  .card {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border-subtle);
+    @apply rounded-lg;
+  }
+
+  .card-hover:hover {
+    background-color: var(--color-elevated);
+    border-color: var(--color-border);
+  }
+
+  .light .card {
+    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+  }
+
+  /* === Inputs - compact === */
+  .input {
+    background-color: var(--color-elevated);
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+    @apply rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-honey-500/40
+           focus:border-honey-500/40;
+    transition: border-color 120ms ease, box-shadow 120ms ease;
+  }
+
+  .input::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  /* === Links === */
+  .link {
+    @apply text-honey-500 hover:text-honey-400 underline-offset-2 hover:underline;
+    transition: color 120ms ease;
+  }
+
+  /* === Vote buttons === */
+  .vote-btn {
+    @apply p-1 rounded-md cursor-pointer;
+    transition: background-color 120ms ease, color 120ms ease;
+  }
+
+  .vote-btn:hover {
+    background-color: var(--color-hover);
+  }
+
+  .vote-btn:active {
+    transform: scale(0.92);
+  }
+
+  .vote-btn-up {
+    @apply hover:text-upvote;
+  }
+
+  .vote-btn-up.active {
+    @apply text-upvote;
+  }
+
+  .vote-btn-down {
+    @apply hover:text-downvote;
+  }
+
+  .vote-btn-down.active {
+    @apply text-downvote;
+  }
+
+  /* === Hex avatar (agents) === */
+  .hex-avatar {
+    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
+  }
+
+  /* === Sidebar section header === */
+  .sidebar-section {
+    @apply px-3 py-1.5 text-xs font-medium uppercase tracking-wider;
+    color: var(--color-text-muted);
+  }
+
+  /* === Sidebar item === */
+  .sidebar-item {
+    @apply flex items-center gap-2 px-3 py-1 rounded-md text-sm cursor-pointer mx-2;
+    color: var(--color-text-secondary);
+    transition: background-color 80ms ease, color 80ms ease;
+  }
+
+  .sidebar-item:hover {
+    background-color: var(--color-hover);
+    color: var(--color-text);
+  }
+
+  .sidebar-item.active {
+    background-color: var(--color-accent-bg);
+    color: var(--color-accent);
+  }
+
+  /* === Divider === */
+  .divider {
+    border-color: var(--color-border-subtle);
+    @apply border-t my-2;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+/* === Animations - subtle, fast === */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slide-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fade-in 150ms ease-out;
+}
+
+.animate-slide-in {
+  animation: slide-in 150ms ease-out;
+}
+
+/* === Markdown/Prose - compact === */
+.markdown-content {
+  color: var(--color-text);
+  @apply leading-relaxed text-sm;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  color: var(--color-text);
+  @apply font-semibold tracking-tight;
+}
+
+.markdown-content h1 { @apply text-xl mt-6 mb-3; }
+.markdown-content h2 { @apply text-lg mt-5 mb-2; }
+.markdown-content h3 { @apply text-base mt-4 mb-2; }
+
+.markdown-content p {
+  @apply mb-3 leading-relaxed;
+}
+
+.markdown-content a {
+  @apply text-honey-500 hover:text-honey-400 underline underline-offset-2 decoration-honey-500/30 hover:decoration-honey-500/60;
+}
+
+.markdown-content code {
+  background-color: var(--color-elevated);
+  border: 1px solid var(--color-border-subtle);
+  @apply px-1 py-0.5 rounded text-xs font-mono text-honey-400;
+}
+
+.markdown-content pre {
+  background-color: var(--color-elevated);
+  border: 1px solid var(--color-border-subtle);
+  @apply p-3 rounded-md overflow-x-auto mb-3;
+}
+
+.markdown-content pre code {
+  background-color: transparent;
+  border: none;
+  color: var(--color-text);
+  @apply p-0;
+}
+
+.markdown-content blockquote {
+  color: var(--color-text-secondary);
+  border-left: 2px solid var(--color-accent);
+  @apply pl-3 italic my-3;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  @apply ml-5 mb-3;
+}
+
+.markdown-content ul {
+  @apply list-disc;
+}
+
+.markdown-content ol {
+  @apply list-decimal;
+}
+
+.markdown-content li {
+  @apply mb-1 leading-relaxed;
+}
+
+.markdown-content hr {
+  border-color: var(--color-border-subtle);
+  @apply my-5;
+}
+
+.markdown-content img {
+  @apply rounded-md max-w-full my-3;
+}
+
+.markdown-content table {
+  @apply w-full border-collapse mb-3;
+}
+
+.markdown-content th,
+.markdown-content td {
+  border: 1px solid var(--color-border-subtle);
+  @apply px-3 py-1.5 text-left text-sm;
+}
+
+.markdown-content th {
+  background-color: var(--color-elevated);
+  @apply font-medium;
+}
+
+.markdown-inline code {
+  background-color: var(--color-elevated);
+  border: 1px solid var(--color-border-subtle);
+  @apply px-1 py-0.5 rounded text-xs font-mono text-honey-400;
+}

package/references/openhive/src/web/sw.ts

@@ -0,0 +1,228 @@
+/// <reference lib="webworker" />
+
+declare const self: ServiceWorkerGlobalScope;
+
+const CACHE_VERSION = 'v1';
+const STATIC_CACHE = `openhive-static-${CACHE_VERSION}`;
+const DYNAMIC_CACHE = `openhive-dynamic-${CACHE_VERSION}`;
+const API_CACHE = `openhive-api-${CACHE_VERSION}`;
+
+// Static assets to cache on install
+const STATIC_ASSETS = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+];
+
+// API routes that can be cached for offline reading
+const CACHEABLE_API_PATTERNS = [
+  /^\/api\/v1\/posts/,
+  /^\/api\/v1\/hives/,
+  /^\/api\/v1\/agents/,
+  /^\/api\/v1\/feed/,
+];
+
+// Max age for cached API responses (5 minutes)
+const API_CACHE_MAX_AGE = 5 * 60 * 1000;
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(STATIC_CACHE).then((cache) => {
+      return cache.addAll(STATIC_ASSETS);
+    })
+  );
+  // Activate immediately
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) => {
+      return Promise.all(
+        keys
+          .filter((key) => {
+            return (
+              key.startsWith('openhive-') &&
+              key !== STATIC_CACHE &&
+              key !== DYNAMIC_CACHE &&
+              key !== API_CACHE
+            );
+          })
+          .map((key) => caches.delete(key))
+      );
+    })
+  );
+  // Take control immediately
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Skip non-GET requests
+  if (request.method !== 'GET') {
+    return;
+  }
+
+  // Skip chrome extensions, etc.
+  if (!url.protocol.startsWith('http')) {
+    return;
+  }
+
+  // Handle API requests
+  if (url.pathname.startsWith('/api/')) {
+    event.respondWith(handleApiRequest(request));
+    return;
+  }
+
+  // Handle static assets
+  if (isStaticAsset(url.pathname)) {
+    event.respondWith(handleStaticAsset(request));
+    return;
+  }
+
+  // Handle navigation (SPA routes)
+  if (request.mode === 'navigate') {
+    event.respondWith(handleNavigation(request));
+    return;
+  }
+
+  // Default: network first, cache fallback
+  event.respondWith(networkFirst(request, DYNAMIC_CACHE));
+});
+
+function isStaticAsset(pathname: string): boolean {
+  return (
+    pathname.startsWith('/assets/') ||
+    pathname.endsWith('.js') ||
+    pathname.endsWith('.css') ||
+    pathname.endsWith('.png') ||
+    pathname.endsWith('.jpg') ||
+    pathname.endsWith('.svg') ||
+    pathname.endsWith('.woff2')
+  );
+}
+
+async function handleStaticAsset(request: Request): Promise<Response> {
+  // Cache first for static assets
+  const cached = await caches.match(request);
+  if (cached) {
+    return cached;
+  }
+
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      const cache = await caches.open(STATIC_CACHE);
+      cache.put(request, response.clone());
+    }
+    return response;
+  } catch {
+    // Return offline fallback if available
+    return new Response('Offline', { status: 503 });
+  }
+}
+
+async function handleNavigation(request: Request): Promise<Response> {
+  try {
+    // Try network first for navigation
+    const response = await fetch(request);
+    return response;
+  } catch {
+    // Fall back to cached index.html for SPA
+    const cached = await caches.match('/index.html');
+    if (cached) {
+      return cached;
+    }
+    return new Response('Offline', { status: 503 });
+  }
+}
+
+async function handleApiRequest(request: Request): Promise<Response> {
+  const url = new URL(request.url);
+
+  // Check if this API route is cacheable
+  const isCacheable = CACHEABLE_API_PATTERNS.some((pattern) =>
+    pattern.test(url.pathname)
+  );
+
+  if (!isCacheable) {
+    return fetch(request);
+  }
+
+  // Network first, cache fallback for read-only API calls
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      const cache = await caches.open(API_CACHE);
+      const responseWithTimestamp = response.clone();
+      // Store with timestamp header for cache expiration
+      cache.put(request, responseWithTimestamp);
+    }
+    return response;
+  } catch {
+    // Try cache for offline support
+    const cached = await caches.match(request);
+    if (cached) {
+      // Check if cache is still valid
+      const cachedDate = cached.headers.get('date');
+      if (cachedDate) {
+        const cacheTime = new Date(cachedDate).getTime();
+        const now = Date.now();
+        if (now - cacheTime < API_CACHE_MAX_AGE) {
+          return cached;
+        }
+      }
+      // Return stale cache as last resort
+      return cached;
+    }
+
+    // Return offline response
+    return new Response(
+      JSON.stringify({
+        error: 'Offline',
+        message: 'You are currently offline. Please check your connection.',
+      }),
+      {
+        status: 503,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+}
+
+async function networkFirst(
+  request: Request,
+  cacheName: string
+): Promise<Response> {
+  try {
+    const response = await fetch(request);
+    if (response.ok) {
+      const cache = await caches.open(cacheName);
+      cache.put(request, response.clone());
+    }
+    return response;
+  } catch {
+    const cached = await caches.match(request);
+    if (cached) {
+      return cached;
+    }
+    return new Response('Offline', { status: 503 });
+  }
+}
+
+// Handle messages from the main app
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+
+  if (event.data?.type === 'CLEAR_CACHE') {
+    event.waitUntil(
+      caches.keys().then((keys) => {
+        return Promise.all(keys.map((key) => caches.delete(key)));
+      })
+    );
+  }
+});