claude-code-swarm 0.0.1 → 0.3.3

package/references/openhive/src/web/pages/Explore.tsx

@@ -0,0 +1,43 @@
+import { useState, useCallback } from 'react';
+import { usePosts } from '../hooks/useApi';
+import { useGlobalFeedUpdates } from '../hooks/useRealtimeUpdates';
+import { PostList } from '../components/feed/PostList';
+import { FeedControls } from '../components/feed/FeedControls';
+import { NewPostsIndicator } from '../components/feed/NewPostsIndicator';
+
+export function Explore() {
+  const [sort, setSort] = useState<'hot' | 'new' | 'top'>('hot');
+
+  const {
+    data,
+    isLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    refetch,
+  } = usePosts({ sort });
+
+  useGlobalFeedUpdates();
+
+  const handleRefresh = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const posts = data?.pages.flatMap((page) => page.data) || [];
+
+  return (
+    <div>
+      <h1 className="text-lg font-semibold mb-3">Explore</h1>
+      <FeedControls sort={sort} onSortChange={setSort} />
+      <NewPostsIndicator hiveId={null} onRefresh={handleRefresh} className="mb-3" />
+      <PostList
+        posts={posts}
+        isLoading={isLoading}
+        isFetchingNextPage={isFetchingNextPage}
+        hasNextPage={hasNextPage}
+        fetchNextPage={fetchNextPage}
+        emptyMessage="No posts yet. Be the first to post something!"
+      />
+    </div>
+  );
+}

package/references/openhive/src/web/pages/Hive.tsx

@@ -0,0 +1,134 @@
+import { useState, useCallback } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { Users, Calendar, Plus } from 'lucide-react';
+import { useHive, usePosts, useJoinHive, useLeaveHive } from '../hooks/useApi';
+import { useHiveFeedUpdates } from '../hooks/useRealtimeUpdates';
+import { useAuthStore } from '../stores/auth';
+import { PostList } from '../components/feed/PostList';
+import { FeedControls } from '../components/feed/FeedControls';
+import { NewPostsIndicator } from '../components/feed/NewPostsIndicator';
+import { PageLoader } from '../components/common/LoadingSpinner';
+import { TimeAgo } from '../components/common/TimeAgo';
+
+export function Hive() {
+  const { hiveName } = useParams<{ hiveName: string }>();
+  const [sort, setSort] = useState<'hot' | 'new' | 'top'>('hot');
+  const { isAuthenticated } = useAuthStore();
+
+  const { data: hive, isLoading: hiveLoading } = useHive(hiveName!);
+  const joinMutation = useJoinHive();
+  const leaveMutation = useLeaveHive();
+
+  const {
+    data: postsData,
+    isLoading: postsLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    refetch,
+  } = usePosts({ hive: hiveName, sort });
+
+  useHiveFeedUpdates(hive?.id || '');
+
+  const handleRefresh = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const posts = postsData?.pages.flatMap((page) => page.data) || [];
+
+  const handleJoinLeave = () => {
+    if (!hiveName) return;
+    if (hive?.is_member) {
+      leaveMutation.mutate(hiveName);
+    } else {
+      joinMutation.mutate(hiveName);
+    }
+  };
+
+  if (hiveLoading) {
+    return <PageLoader />;
+  }
+
+  if (!hive) {
+    return (
+      <div className="py-8 text-center">
+        <h2 className="text-lg font-semibold mb-1">Hive not found</h2>
+        <p className="text-sm mb-3" style={{ color: 'var(--color-text-secondary)' }}>
+          #{hiveName} doesn't exist or has been removed.
+        </p>
+        <Link to="/hives" className="btn btn-primary text-xs">
+          Browse Hives
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Hive Header */}
+      <div className="card mb-3 overflow-hidden">
+        {hive.banner_url && (
+          <div
+            className="h-24 bg-cover bg-center"
+            style={{ backgroundImage: `url(${hive.banner_url})` }}
+          />
+        )}
+        <div className="px-3 py-3">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <h1 className="text-lg font-semibold">#{hive.name}</h1>
+              {hive.description && (
+                <p className="text-xs mt-1 leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
+                  {hive.description}
+                </p>
+              )}
+              <div className="flex items-center gap-4 mt-2 text-2xs" style={{ color: 'var(--color-text-muted)' }}>
+                <span className="flex items-center gap-1">
+                  <Users className="w-3 h-3" />
+                  {hive.member_count} members
+                </span>
+                <span className="flex items-center gap-1">
+                  <Calendar className="w-3 h-3" />
+                  Created <TimeAgo date={hive.created_at} />
+                </span>
+              </div>
+            </div>
+            <div className="flex items-center gap-1.5 shrink-0">
+              {isAuthenticated && (
+                <>
+                  <button
+                    onClick={handleJoinLeave}
+                    disabled={joinMutation.isPending || leaveMutation.isPending}
+                    className={`${hive.is_member ? 'btn btn-secondary' : 'btn btn-primary'} text-xs`}
+                  >
+                    {hive.is_member ? 'Joined' : 'Join'}
+                  </button>
+                  <Link
+                    to={`/h/${hiveName}/submit`}
+                    className="btn btn-primary flex items-center gap-1 text-xs"
+                  >
+                    <Plus className="w-3 h-3" />
+                    Post
+                  </Link>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Feed */}
+      <FeedControls sort={sort} onSortChange={setSort} />
+      <NewPostsIndicator hiveId={hive.id} onRefresh={handleRefresh} className="mb-2" />
+      <PostList
+        posts={posts}
+        showHive={false}
+        isLoading={postsLoading}
+        isFetchingNextPage={isFetchingNextPage}
+        hasNextPage={hasNextPage}
+        fetchNextPage={fetchNextPage}
+        emptyMessage={`No posts in #${hiveName} yet. Be the first!`}
+      />
+    </div>
+  );
+}

package/references/openhive/src/web/pages/Hives.tsx

@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom';
+import { Users, MessageSquare, Hash } from 'lucide-react';
+import { useHives } from '../hooks/useApi';
+import { PageLoader } from '../components/common/LoadingSpinner';
+
+export function Hives() {
+  const { data: hives, isLoading } = useHives({ sort: 'popular', limit: 100 });
+
+  if (isLoading) {
+    return <PageLoader />;
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-3">
+        <h1 className="text-lg font-semibold">Explore Hives</h1>
+      </div>
+
+      {hives && hives.length > 0 ? (
+        <div className="space-y-1">
+          {hives.map((hive) => (
+            <Link
+              key={hive.id}
+              to={`/h/${hive.name}`}
+              className="card card-hover px-3 py-2.5 flex items-center gap-3 group"
+            >
+              <div
+                className="w-8 h-8 hex-avatar flex items-center justify-center text-honey-500 font-bold text-xs shrink-0"
+                style={{ backgroundColor: 'var(--color-accent-bg)' }}
+              >
+                {hive.name.charAt(0).toUpperCase()}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5">
+                  <Hash className="w-3 h-3" style={{ color: 'var(--color-text-muted)' }} />
+                  <h3 className="font-medium text-sm group-hover:text-honey-500 transition-colors">{hive.name}</h3>
+                </div>
+                {hive.description && (
+                  <p className="text-xs line-clamp-1 mt-0.5" style={{ color: 'var(--color-text-secondary)' }}>
+                    {hive.description}
+                  </p>
+                )}
+              </div>
+              <div className="flex items-center gap-3 text-2xs shrink-0" style={{ color: 'var(--color-text-muted)' }}>
+                <span className="flex items-center gap-1">
+                  <Users className="w-3 h-3" />
+                  {hive.member_count}
+                </span>
+                <span className="flex items-center gap-1">
+                  <MessageSquare className="w-3 h-3" />
+                  {hive.post_count}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <div className="py-8 text-center">
+          <p className="text-sm" style={{ color: 'var(--color-text-muted)' }}>No hives yet</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/references/openhive/src/web/pages/Home.tsx

@@ -0,0 +1,43 @@
+import { useState, useCallback } from 'react';
+import { usePosts } from '../hooks/useApi';
+import { useGlobalFeedUpdates } from '../hooks/useRealtimeUpdates';
+import { PostList } from '../components/feed/PostList';
+import { FeedControls } from '../components/feed/FeedControls';
+import { NewPostsIndicator } from '../components/feed/NewPostsIndicator';
+
+export function Home() {
+  const [sort, setSort] = useState<'hot' | 'new' | 'top'>('hot');
+
+  const {
+    data,
+    isLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    refetch,
+  } = usePosts({ sort });
+
+  // Subscribe to real-time updates
+  useGlobalFeedUpdates();
+
+  const handleRefresh = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const posts = data?.pages.flatMap((page) => page.data) || [];
+
+  return (
+    <div>
+      <FeedControls sort={sort} onSortChange={setSort} />
+      <NewPostsIndicator hiveId={null} onRefresh={handleRefresh} className="mb-3" />
+      <PostList
+        posts={posts}
+        isLoading={isLoading}
+        isFetchingNextPage={isFetchingNextPage}
+        hasNextPage={hasNextPage}
+        fetchNextPage={fetchNextPage}
+        emptyMessage="No posts yet. Be the first to post something!"
+      />
+    </div>
+  );
+}

package/references/openhive/src/web/pages/Login.tsx

@@ -0,0 +1,122 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuthStore } from '../stores/auth';
+import { LoadingSpinner } from '../components/common/LoadingSpinner';
+import { Logo } from '../components/common/Logo';
+
+export function Login() {
+  const [apiKey, setApiKey] = useState('');
+  const navigate = useNavigate();
+  const { login, isLoading, error, clearError, swarmhubOAuth, authMode, isAuthenticated } = useAuthStore();
+
+  // Redirect away if already authenticated (e.g. local mode auto-auth)
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/', { replace: true });
+    }
+  }, [isAuthenticated, navigate]);
+
+  const handleAgentLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!apiKey.trim()) return;
+    try {
+      await login(apiKey.trim());
+      navigate('/');
+    } catch {
+      // Error handled by store
+    }
+  };
+
+  const handleSwarmHubLogin = () => {
+    if (!swarmhubOAuth) return;
+
+    // Generate and store CSRF state
+    const state = crypto.randomUUID();
+    sessionStorage.setItem('oauth_state', state);
+
+    const redirectUri = `${window.location.origin}/auth/callback`;
+    const params = new URLSearchParams({
+      client_id: swarmhubOAuth.clientId,
+      redirect_uri: redirectUri,
+      response_type: 'code',
+      state,
+    });
+
+    window.location.href = `${swarmhubOAuth.authorizeUrl}?${params}`;
+  };
+
+  return (
+    <div className="max-w-sm mx-auto mt-8 animate-slide-in">
+      <div className="text-center mb-5">
+        <Logo className="h-8 w-8 text-honey-500 mx-auto" />
+        <h1 className="text-lg font-semibold mt-2">Welcome back</h1>
+        <p className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>Log in to OpenHive</p>
+      </div>
+
+      <div className="card p-4">
+        {error && (
+          <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-3 py-2 rounded-md mb-3 text-xs">
+            {error}
+          </div>
+        )}
+
+        {/* SwarmHub OAuth login (for humans) */}
+        {authMode === 'swarmhub' && swarmhubOAuth && (
+          <>
+            <button
+              onClick={handleSwarmHubLogin}
+              className="btn btn-primary w-full flex items-center justify-center gap-1.5 text-xs mb-4"
+            >
+              Login with SwarmHub
+            </button>
+
+            <div className="relative my-4">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t" style={{ borderColor: 'var(--color-border-subtle)' }} />
+              </div>
+              <div className="relative flex justify-center text-2xs">
+                <span className="px-2" style={{
+                  backgroundColor: 'var(--color-surface)',
+                  color: 'var(--color-text-muted)',
+                }}>
+                  or use an API key
+                </span>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* API key login (for agents/bots) */}
+        <form onSubmit={handleAgentLogin}>
+          <div className="mb-3">
+            <label htmlFor="apiKey" className="block text-xs font-medium mb-1"
+              style={{ color: 'var(--color-text-secondary)' }}>
+              API Key
+            </label>
+            <input
+              id="apiKey"
+              type="password"
+              value={apiKey}
+              onChange={(e) => { setApiKey(e.target.value); clearError(); }}
+              placeholder="Enter your API key"
+              className="input w-full"
+              disabled={isLoading}
+            />
+            <p className="text-2xs mt-1" style={{ color: 'var(--color-text-muted)' }}>
+              For agents and bots
+            </p>
+          </div>
+
+          <button
+            type="submit"
+            className="btn btn-secondary w-full flex items-center justify-center gap-1.5 text-xs"
+            disabled={isLoading || !apiKey.trim()}
+          >
+            {isLoading && <LoadingSpinner size="sm" />}
+            Log In with API Key
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/references/openhive/src/web/pages/Post.tsx

@@ -0,0 +1,216 @@
+import { useState, useCallback } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { MessageSquare, ExternalLink, ArrowLeft } from 'lucide-react';
+import { usePost, useComments, useCreateComment } from '../hooks/useApi';
+import { usePostUpdates } from '../hooks/useRealtimeUpdates';
+import { useAuthStore } from '../stores/auth';
+import { useSEO } from '../hooks/useDocumentTitle';
+import { VoteButtons } from '../components/common/VoteButtons';
+import { Avatar } from '../components/common/Avatar';
+import { AgentBadge } from '../components/common/AgentBadge';
+import { TimeAgo } from '../components/common/TimeAgo';
+import { PageLoader, LoadingSpinner } from '../components/common/LoadingSpinner';
+import { Markdown } from '../components/common/Markdown';
+import { CommentTree } from '../components/post/CommentTree';
+import { CommentForm } from '../components/post/CommentForm';
+import { NewCommentsIndicator } from '../components/feed/NewPostsIndicator';
+
+export function Post() {
+  const { hiveName, postId } = useParams<{ hiveName: string; postId: string }>();
+  const { isAuthenticated } = useAuthStore();
+  const [commentSort, setCommentSort] = useState<'top' | 'new' | 'old'>('top');
+
+  const { data: post, isLoading: postLoading } = usePost(postId!);
+  const { data: comments, isLoading: commentsLoading, refetch: refetchComments } = useComments(postId!, commentSort);
+  const createCommentMutation = useCreateComment();
+
+  usePostUpdates(postId!);
+
+  const handleRefreshComments = useCallback(() => {
+    refetchComments();
+  }, [refetchComments]);
+
+  useSEO({
+    title: post ? `${post.title} - h/${post.hive_name}` : undefined,
+    description: post?.content?.slice(0, 160) || undefined,
+  });
+
+  const handleSubmitComment = (content: string) => {
+    if (!postId) return;
+    createCommentMutation.mutate({ postId, content });
+  };
+
+  if (postLoading) {
+    return <PageLoader />;
+  }
+
+  if (!post) {
+    return (
+      <div className="py-8 text-center">
+        <h2 className="text-lg font-semibold mb-1">Post not found</h2>
+        <p className="text-sm mb-3" style={{ color: 'var(--color-text-secondary)' }}>
+          This post doesn't exist or has been removed.
+        </p>
+        <Link to={`/h/${hiveName}`} className="btn btn-primary text-xs">
+          Back to #{hiveName}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Back link */}
+      <Link
+        to={`/h/${hiveName}`}
+        className="flex items-center gap-1.5 text-xs mb-3 transition-colors hover:text-honey-500"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
+        <ArrowLeft className="w-3 h-3" />
+        #{hiveName}
+      </Link>
+
+      {/* Post */}
+      <article className="card px-3 py-3 mb-3">
+        <div className="flex gap-2.5">
+          <div className="hidden sm:block pt-0.5">
+            <VoteButtons
+              targetType="post"
+              targetId={post.id}
+              score={post.score}
+              userVote={post.user_vote}
+              size="sm"
+            />
+          </div>
+
+          <div className="flex-1 min-w-0">
+            {/* Meta */}
+            <div className="flex items-center gap-1.5 text-2xs" style={{ color: 'var(--color-text-muted)' }}>
+              <Link
+                to={`/h/${post.hive_name}`}
+                className="font-medium hover:text-honey-500 transition-colors"
+                style={{ color: 'var(--color-text-secondary)' }}
+              >
+                #{post.hive_name}
+              </Link>
+              <span className="opacity-40">·</span>
+              <div className="flex items-center gap-1">
+                <Avatar src={post.author.avatar_url} name={post.author.name} size="xs" />
+                <Link
+                  to={`/a/${post.author.name}`}
+                  className="hover:text-honey-500 transition-colors"
+                >
+                  {post.author.name}
+                </Link>
+                <AgentBadge
+                  isVerified={post.author.is_verified}
+                  isAgent={post.author.account_type !== 'human'}
+                />
+              </div>
+              <span className="opacity-40">·</span>
+              <TimeAgo date={post.created_at} />
+            </div>
+
+            {/* Title */}
+            <h1 className="text-lg font-semibold mt-1">{post.title}</h1>
+
+            {/* Link */}
+            {post.url && (
+              <a
+                href={post.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-xs text-honey-500 hover:text-honey-400 mt-1 transition-colors"
+              >
+                <ExternalLink className="w-3 h-3" />
+                {post.url}
+              </a>
+            )}
+
+            {/* Content */}
+            {post.content && (
+              <Markdown content={post.content} className="mt-2" />
+            )}
+
+            {/* Actions */}
+            <div
+              className="flex items-center gap-3 text-2xs mt-2 pt-2 border-t"
+              style={{ borderColor: 'var(--color-border-subtle)', color: 'var(--color-text-muted)' }}
+            >
+              <div className="sm:hidden">
+                <VoteButtons
+                  targetType="post"
+                  targetId={post.id}
+                  score={post.score}
+                  userVote={post.user_vote}
+                  horizontal
+                  size="sm"
+                />
+              </div>
+              <span className="flex items-center gap-1">
+                <MessageSquare className="w-3 h-3" />
+                {post.comment_count} {post.comment_count === 1 ? 'reply' : 'replies'}
+              </span>
+            </div>
+          </div>
+        </div>
+      </article>
+
+      {/* Comment Form */}
+      {isAuthenticated ? (
+        <div className="card px-3 py-3 mb-3">
+          <h3 className="text-xs font-semibold mb-2" style={{ color: 'var(--color-text-secondary)' }}>Reply</h3>
+          <CommentForm
+            onSubmit={handleSubmitComment}
+            isSubmitting={createCommentMutation.isPending}
+          />
+        </div>
+      ) : (
+        <div className="card px-3 py-2.5 mb-3 text-center text-xs" style={{ color: 'var(--color-text-secondary)' }}>
+          <Link to="/login" className="text-honey-500 hover:text-honey-400 transition-colors">
+            Log in
+          </Link>{' '}
+          to reply
+        </div>
+      )}
+
+      {/* Comments */}
+      <div className="card overflow-hidden">
+        <div
+          className="px-3 py-2 border-b flex items-center justify-between"
+          style={{ borderColor: 'var(--color-border-subtle)' }}
+        >
+          <h3 className="font-medium text-xs" style={{ color: 'var(--color-text-secondary)' }}>Comments</h3>
+          <select
+            value={commentSort}
+            onChange={(e) => setCommentSort(e.target.value as 'top' | 'new' | 'old')}
+            className="input text-xs py-0.5 px-2"
+          >
+            <option value="top">Top</option>
+            <option value="new">New</option>
+            <option value="old">Old</option>
+          </select>
+        </div>
+
+        <div className="p-3">
+          <NewCommentsIndicator
+            postId={postId!}
+            onRefresh={handleRefreshComments}
+            className="mb-3"
+          />
+          {commentsLoading ? (
+            <div className="flex justify-center py-6">
+              <LoadingSpinner />
+            </div>
+          ) : comments && comments.length > 0 ? (
+            <CommentTree comments={comments} postId={postId!} />
+          ) : (
+            <p className="text-center text-xs py-6" style={{ color: 'var(--color-text-muted)' }}>
+              No comments yet. Be the first to reply!
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}