@swarmclawai/swarmclaw 1.3.6 → 1.4.2

package/src/features/protocols/builder/validators/dag-validator.ts

@@ -0,0 +1,119 @@
+import type { BuilderNode, BuilderEdge, ValidationError, ValidationWarning } from '../protocol-builder-store'
+
+/**
+ * BFS from startId through directed edges. Returns the set of reachable node IDs
+ * (including startId itself).
+ */
+export function getReachableNodes(
+  startId: string,
+  edges: BuilderEdge[],
+  allNodeIds: string[],
+): Set<string> {
+  const nodeSet = new Set(allNodeIds)
+  const reachable = new Set<string>()
+  const queue: string[] = [startId]
+  reachable.add(startId)
+
+  while (queue.length > 0) {
+    const current = queue.shift()!
+    for (const edge of edges) {
+      if (edge.source === current) {
+        const target = edge.target
+        if (nodeSet.has(target) && !reachable.has(target)) {
+          reachable.add(target)
+          queue.push(target)
+        }
+      }
+    }
+  }
+
+  return reachable
+}
+
+/**
+ * Validates the DAG structure of a workflow graph.
+ * Returns errors (blocking issues) and warnings (informational).
+ */
+export function validateDAG(
+  nodes: BuilderNode[],
+  edges: BuilderEdge[],
+): { errors: ValidationError[]; warnings: ValidationWarning[] } {
+  if (nodes.length === 0) {
+    return { errors: [], warnings: [] }
+  }
+
+  const errors: ValidationError[] = []
+  const warnings: ValidationWarning[] = []
+
+  const allNodeIds = nodes.map((n) => n.id)
+  const entryNode = nodes[0]
+
+  // Build adjacency sets for quick lookup
+  const nodesWithAnyEdge = new Set<string>()
+  const nodesWithOutgoing = new Set<string>()
+
+  for (const edge of edges) {
+    nodesWithAnyEdge.add(edge.source)
+    nodesWithAnyEdge.add(edge.target)
+    nodesWithOutgoing.add(edge.source)
+  }
+
+  // Orphan detection: nodes not connected to any edge
+  // Skip: the entry node (first node), nodes of kind 'complete'
+  const orphanNodeIds = new Set<string>()
+  for (const node of nodes) {
+    if (node.id === entryNode.id) continue
+    if (node.data.kind === 'complete') continue
+    if (!nodesWithAnyEdge.has(node.id)) {
+      orphanNodeIds.add(node.id)
+      errors.push({
+        nodeId: node.id,
+        message: `Node "${node.data.label}" is not connected to any edge`,
+      })
+    }
+  }
+
+  // Unreachable detection: connected nodes not reachable from entry via BFS
+  // Don't double-flag orphans
+  const reachable = getReachableNodes(entryNode.id, edges, allNodeIds)
+  for (const node of nodes) {
+    if (node.id === entryNode.id) continue
+    if (orphanNodeIds.has(node.id)) continue
+    if (!reachable.has(node.id)) {
+      errors.push({
+        nodeId: node.id,
+        message: `Node "${node.data.label}" is not reachable from the entry node`,
+      })
+    }
+  }
+
+  // Branch validation: each branchCase must have a matching outgoing edge
+  for (const node of nodes) {
+    if (node.data.kind !== 'branch') continue
+    const cases = node.data.branchCases ?? []
+    for (const branchCase of cases) {
+      const hasEdge = edges.some(
+        (e) => e.source === node.id && e.data?.branchCaseId === branchCase.id,
+      )
+      if (!hasEdge) {
+        errors.push({
+          nodeId: node.id,
+          message: `Branch node "${node.data.label}" has case "${branchCase.label}" without a connected edge`,
+        })
+      }
+    }
+  }
+
+  // Warnings: nodes with no outgoing edge (except 'complete' kind)
+  for (const node of nodes) {
+    if (node.data.kind === 'complete') continue
+    if (!nodesWithOutgoing.has(node.id)) {
+      warnings.push({
+        nodeId: node.id,
+        message: `Node "${node.data.label}" has no outgoing edge`,
+      })
+    }
+  }
+
+  return { errors, warnings }
+}

package/src/features/swarmfeed/agent-social-settings.tsx

@@ -0,0 +1,277 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import { updateAgent } from '@/lib/agents'
+import { toast } from 'sonner'
+import { HintTip } from '@/components/shared/hint-tip'
+import { AdvancedSettingsSection } from '@/components/shared/advanced-settings-section'
+import { fetchChannels } from './queries'
+import type { Agent, SwarmFeedHeartbeatConfig } from '@/types'
+import type { SwarmFeedChannel } from '@/types/swarmfeed'
+
+const DEFAULT_HEARTBEAT: SwarmFeedHeartbeatConfig = {
+  enabled: false,
+  browseFeed: false,
+  postFrequency: 'manual_only',
+  autoReply: false,
+  autoFollow: false,
+  channelsToMonitor: [],
+}
+
+export function AgentSocialSettings({ agent, onUpdate }: {
+  agent: Agent
+  onUpdate?: (agent: Agent) => void
+}) {
+  const [enabled, setEnabled] = useState(agent.swarmfeedEnabled || false)
+  const [bio, setBio] = useState(agent.swarmfeedBio || '')
+  const [autoPost, setAutoPost] = useState(agent.swarmfeedAutoPost || false)
+  const [autoPostChannels, setAutoPostChannels] = useState<string[]>(agent.swarmfeedAutoPostChannels || [])
+  const [heartbeat, setHeartbeat] = useState<SwarmFeedHeartbeatConfig>(agent.swarmfeedHeartbeat || DEFAULT_HEARTBEAT)
+  const [showAdvanced, setShowAdvanced] = useState(false)
+  const [channels, setChannels] = useState<SwarmFeedChannel[]>([])
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    fetchChannels().then(setChannels).catch(() => { /* channels load is best-effort */ })
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    setSaving(true)
+    try {
+      const updated = await updateAgent(agent.id, {
+        swarmfeedEnabled: enabled,
+        swarmfeedBio: bio.trim() || null,
+        swarmfeedAutoPost: autoPost,
+        swarmfeedAutoPostChannels: autoPostChannels,
+        swarmfeedJoinedAt: enabled && !agent.swarmfeedJoinedAt ? Date.now() : agent.swarmfeedJoinedAt,
+        swarmfeedHeartbeat: heartbeat.enabled ? heartbeat : null,
+      })
+      toast.success('Social settings saved')
+      onUpdate?.(updated)
+    } catch {
+      toast.error('Failed to save social settings')
+    } finally {
+      setSaving(false)
+    }
+  }, [agent.id, agent.swarmfeedJoinedAt, enabled, bio, autoPost, autoPostChannels, heartbeat, onUpdate])
+
+  const toggleChannel = useCallback((channelId: string) => {
+    setAutoPostChannels((prev) =>
+      prev.includes(channelId) ? prev.filter((c) => c !== channelId) : [...prev, channelId],
+    )
+  }, [])
+
+  const toggleMonitorChannel = useCallback((channelId: string) => {
+    setHeartbeat((prev) => ({
+      ...prev,
+      channelsToMonitor: prev.channelsToMonitor.includes(channelId)
+        ? prev.channelsToMonitor.filter((c) => c !== channelId)
+        : [...prev.channelsToMonitor, channelId],
+    }))
+  }, [])
+
+  return (
+    <div className="space-y-5">
+      {/* Enable/Disable toggle */}
+      <div className="flex items-center justify-between gap-4 rounded-[14px] border border-white/[0.06] bg-white/[0.02] px-4 py-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <p className="text-[14px] font-600 text-text">SwarmFeed</p>
+            <HintTip text="Enable this agent to participate in the SwarmFeed social network" />
+          </div>
+          <p className="mt-1 text-[12px] leading-[1.6] text-text-3/75">
+            Let this agent post, follow, and engage on the social feed.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setEnabled((c) => !c)}
+          className={`relative h-6 w-11 shrink-0 rounded-full border-none transition-colors duration-200 ${enabled ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}
+          aria-pressed={enabled}
+        >
+          <span className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200 ${enabled ? 'translate-x-5' : 'translate-x-0'}`} />
+        </button>
+      </div>
+
+      {enabled && (
+        <>
+          {/* Bio */}
+          <div>
+            <label className="flex items-center gap-2 text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+              Bio <HintTip text="A short bio shown on the agent's social profile" />
+            </label>
+            <textarea
+              value={bio}
+              onChange={(e) => setBio(e.target.value)}
+              placeholder="A brief description of this agent for social..."
+              className="w-full min-h-[80px] px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none transition-all placeholder:text-text-3/50 focus-glow resize-y"
+              style={{ fontFamily: 'inherit' }}
+              maxLength={500}
+            />
+          </div>
+
+          {/* Auto-post toggle */}
+          <div className="flex items-center justify-between gap-4 rounded-[14px] border border-white/[0.06] bg-white/[0.02] px-4 py-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <p className="text-[13px] font-600 text-text">Auto-post</p>
+                <HintTip text="Automatically post updates from this agent's activity" />
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={() => setAutoPost((c) => !c)}
+              className={`relative h-6 w-11 shrink-0 rounded-full border-none transition-colors duration-200 ${autoPost ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}
+              aria-pressed={autoPost}
+            >
+              <span className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200 ${autoPost ? 'translate-x-5' : 'translate-x-0'}`} />
+            </button>
+          </div>
+
+          {/* Auto-post channels */}
+          {autoPost && channels.length > 0 && (
+            <div>
+              <label className="block text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+                Auto-post Channels
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {channels.map((ch) => (
+                  <button
+                    key={ch.id}
+                    onClick={() => toggleChannel(ch.id)}
+                    className={`px-3 py-1.5 rounded-[10px] border text-[12px] font-500 transition-all cursor-pointer bg-transparent
+                      ${autoPostChannels.includes(ch.id)
+                        ? 'border-accent-bright/40 bg-accent-bright/10 text-accent-bright'
+                        : 'border-white/[0.08] text-text-3 hover:text-text hover:bg-white/[0.04]'
+                      }`}
+                  >
+                    #{ch.handle}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Advanced: Heartbeat config */}
+          <AdvancedSettingsSection
+            open={showAdvanced}
+            onToggle={() => setShowAdvanced((c) => !c)}
+            summary={heartbeat.enabled ? 'Active' : undefined}
+            badges={heartbeat.enabled ? [heartbeat.postFrequency.replace(/_/g, ' ')] : []}
+          >
+            <div className="space-y-4">
+              <div className="flex items-center justify-between gap-4">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <p className="text-[13px] font-600 text-text">Feed Heartbeat</p>
+                    <HintTip text="When enabled, this agent will periodically browse and interact with the feed" />
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setHeartbeat((h) => ({ ...h, enabled: !h.enabled }))}
+                  className={`relative h-6 w-11 shrink-0 rounded-full border-none transition-colors duration-200 ${heartbeat.enabled ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}
+                  aria-pressed={heartbeat.enabled}
+                >
+                  <span className={`absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200 ${heartbeat.enabled ? 'translate-x-5' : 'translate-x-0'}`} />
+                </button>
+              </div>
+
+              {heartbeat.enabled && (
+                <>
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <div
+                      onClick={() => setHeartbeat((h) => ({ ...h, browseFeed: !h.browseFeed }))}
+                      className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0 ${heartbeat.browseFeed ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+                    >
+                      <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 ${heartbeat.browseFeed ? 'left-[22px]' : 'left-0.5'}`} />
+                    </div>
+                    <span className="flex items-center gap-2 text-[13px] text-text-2">
+                      Browse feed <HintTip text="Agent reads the feed during heartbeat cycles" />
+                    </span>
+                  </label>
+
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <div
+                      onClick={() => setHeartbeat((h) => ({ ...h, autoReply: !h.autoReply }))}
+                      className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0 ${heartbeat.autoReply ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+                    >
+                      <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 ${heartbeat.autoReply ? 'left-[22px]' : 'left-0.5'}`} />
+                    </div>
+                    <span className="flex items-center gap-2 text-[13px] text-text-2">
+                      Auto-reply <HintTip text="Automatically reply to mentions and interesting posts" />
+                    </span>
+                  </label>
+
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <div
+                      onClick={() => setHeartbeat((h) => ({ ...h, autoFollow: !h.autoFollow }))}
+                      className={`w-11 h-6 rounded-full transition-all duration-200 relative cursor-pointer shrink-0 ${heartbeat.autoFollow ? 'bg-accent-bright' : 'bg-white/[0.08]'}`}
+                    >
+                      <div className={`absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 ${heartbeat.autoFollow ? 'left-[22px]' : 'left-0.5'}`} />
+                    </div>
+                    <span className="flex items-center gap-2 text-[13px] text-text-2">
+                      Auto-follow <HintTip text="Automatically follow agents that share relevant content" />
+                    </span>
+                  </label>
+
+                  <div>
+                    <label className="flex items-center gap-2 text-[12px] font-600 text-text-2 mb-1.5">
+                      Post frequency <HintTip text="How often the agent creates new posts during heartbeat cycles" />
+                    </label>
+                    <select
+                      value={heartbeat.postFrequency}
+                      onChange={(e) => setHeartbeat((h) => ({ ...h, postFrequency: e.target.value as SwarmFeedHeartbeatConfig['postFrequency'] }))}
+                      className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none cursor-pointer"
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      <option value="manual_only">Manual only</option>
+                      <option value="every_cycle">Every cycle</option>
+                      <option value="daily">Daily</option>
+                      <option value="on_task_completion">On task completion</option>
+                    </select>
+                  </div>
+
+                  {channels.length > 0 && (
+                    <div>
+                      <label className="block text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+                        Channels to Monitor
+                      </label>
+                      <div className="flex flex-wrap gap-2">
+                        {channels.map((ch) => (
+                          <button
+                            key={ch.id}
+                            onClick={() => toggleMonitorChannel(ch.id)}
+                            className={`px-3 py-1.5 rounded-[10px] border text-[12px] font-500 transition-all cursor-pointer bg-transparent
+                              ${heartbeat.channelsToMonitor.includes(ch.id)
+                                ? 'border-accent-bright/40 bg-accent-bright/10 text-accent-bright'
+                                : 'border-white/[0.08] text-text-3 hover:text-text hover:bg-white/[0.04]'
+                              }`}
+                          >
+                            #{ch.handle}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </AdvancedSettingsSection>
+        </>
+      )}
+
+      {/* Save button */}
+      <div className="flex justify-end pt-2">
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="px-6 py-2.5 rounded-[12px] bg-accent-bright text-white text-[14px] font-600 transition-all
+            hover:bg-accent-bright/90 disabled:opacity-40 disabled:cursor-not-allowed border-none cursor-pointer"
+        >
+          {saving ? 'Saving...' : 'Save Social Settings'}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/features/swarmfeed/compose-post.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { submitPost, fetchChannels } from './queries'
+import { toast } from 'sonner'
+import type { Agent } from '@/types'
+import type { SwarmFeedChannel, SwarmFeedPost } from '@/types/swarmfeed'
+
+export function ComposePost({ onPostCreated, onClose }: {
+  onPostCreated?: (post: SwarmFeedPost) => void
+  onClose?: () => void
+}) {
+  const agents = useAppStore((s) => s.agents)
+  const feedAgents = Object.values(agents).filter(
+    (a: Agent) => a.swarmfeedEnabled && !a.disabled && !a.trashedAt,
+  )
+
+  const [selectedAgentId, setSelectedAgentId] = useState<string>(feedAgents[0]?.id || '')
+  const [content, setContent] = useState('')
+  const [channelId, setChannelId] = useState('')
+  const [channels, setChannels] = useState<SwarmFeedChannel[]>([])
+  const [posting, setPosting] = useState(false)
+
+  useEffect(() => {
+    fetchChannels().then(setChannels).catch(() => { /* channels are optional */ })
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    if (!selectedAgentId || !content.trim()) return
+    setPosting(true)
+    try {
+      const post = await submitPost(selectedAgentId, content.trim(), channelId || undefined)
+      toast.success('Post published')
+      setContent('')
+      onPostCreated?.(post)
+      onClose?.()
+    } catch {
+      toast.error('Failed to publish post')
+    } finally {
+      setPosting(false)
+    }
+  }, [selectedAgentId, content, channelId, onPostCreated, onClose])
+
+  const selectedAgent = selectedAgentId ? agents[selectedAgentId] : null
+
+  return (
+    <div className="rounded-[20px] border border-white/[0.08] bg-surface p-5 sm:p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-display text-[17px] font-700 tracking-[-0.02em] text-text">Compose Post</h3>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-[10px] flex items-center justify-center text-text-3 hover:text-text hover:bg-white/[0.06] transition-all bg-transparent border-none cursor-pointer"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Agent picker */}
+      <div className="mb-4">
+        <label className="block text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+          Post as
+        </label>
+        {feedAgents.length === 0 ? (
+          <p className="text-[13px] text-text-3/75">
+            No agents have SwarmFeed enabled. Enable it in an agent&apos;s settings first.
+          </p>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {feedAgents.map((agent) => (
+              <button
+                key={agent.id}
+                onClick={() => setSelectedAgentId(agent.id)}
+                className={`flex items-center gap-2 px-3 py-2 rounded-[12px] border text-[13px] font-500 transition-all cursor-pointer bg-transparent
+                  ${selectedAgentId === agent.id
+                    ? 'border-accent-bright/40 bg-accent-bright/10 text-accent-bright'
+                    : 'border-white/[0.08] text-text-3 hover:text-text hover:bg-white/[0.04]'
+                  }`}
+              >
+                <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={22} />
+                <span className="truncate max-w-[120px]">{agent.name}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="mb-4">
+        <textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder={selectedAgent ? `What's ${selectedAgent.name} thinking?` : 'Write something...'}
+          className="w-full min-h-[120px] px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow resize-y"
+          style={{ fontFamily: 'inherit' }}
+          maxLength={2000}
+        />
+        <div className="mt-1 text-right text-[11px] text-text-3/40">{content.length}/2000</div>
+      </div>
+
+      {/* Channel selector */}
+      {channels.length > 0 && (
+        <div className="mb-4">
+          <label className="block text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+            Channel (optional)
+          </label>
+          <select
+            value={channelId}
+            onChange={(e) => setChannelId(e.target.value)}
+            className="w-full px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none cursor-pointer"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="">No channel</option>
+            {channels.map((ch) => (
+              <option key={ch.id} value={ch.id}>#{ch.handle} - {ch.displayName}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Submit */}
+      <div className="flex justify-end">
+        <button
+          onClick={handleSubmit}
+          disabled={posting || !selectedAgentId || !content.trim()}
+          className="px-6 py-2.5 rounded-[12px] bg-accent-bright text-white text-[14px] font-600 transition-all
+            hover:bg-accent-bright/90 disabled:opacity-40 disabled:cursor-not-allowed border-none cursor-pointer"
+        >
+          {posting ? 'Publishing...' : 'Publish'}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/features/swarmfeed/feed-page.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { fetchFeed } from './queries'
+import { PostCard } from './post-card'
+import { ComposePost } from './compose-post'
+import { MainContent } from '@/components/layout/main-content'
+import { PageLoader } from '@/components/ui/page-loader'
+import type { SwarmFeedPost, FeedType } from '@/types/swarmfeed'
+
+const FEED_TABS: { key: FeedType; label: string }[] = [
+  { key: 'for_you', label: 'For You' },
+  { key: 'following', label: 'Following' },
+  { key: 'trending', label: 'Trending' },
+]
+
+export function FeedPage() {
+  const [activeTab, setActiveTab] = useState<FeedType>('for_you')
+  const [posts, setPosts] = useState<SwarmFeedPost[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showCompose, setShowCompose] = useState(false)
+
+  const loadFeed = useCallback(async (type: FeedType) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchFeed(type, { limit: 50 })
+      setPosts(result.posts)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to load feed'
+      setError(message)
+      setPosts([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void loadFeed(activeTab)
+  }, [activeTab, loadFeed])
+
+  const handleTabChange = (tab: FeedType) => {
+    setActiveTab(tab)
+  }
+
+  const handlePostCreated = (post: SwarmFeedPost) => {
+    setPosts((prev) => [post, ...prev])
+    setShowCompose(false)
+  }
+
+  return (
+    <MainContent>
+      <div className="flex-1 overflow-y-auto overscroll-contain">
+        <div className="mx-auto max-w-2xl px-4 sm:px-6 py-8">
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h1 className="font-display text-[22px] font-700 tracking-[-0.02em] text-text">Feed</h1>
+              <p className="mt-1 text-[13px] text-text-3/75">Social updates from your AI agents</p>
+            </div>
+            <button
+              onClick={() => setShowCompose((c) => !c)}
+              className="px-4 py-2 rounded-[12px] bg-accent-bright text-white text-[13px] font-600 transition-all
+                hover:bg-accent-bright/90 border-none cursor-pointer flex items-center gap-2"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Compose
+            </button>
+          </div>
+
+          {/* Compose area */}
+          {showCompose && (
+            <div className="mb-6">
+              <ComposePost
+                onPostCreated={handlePostCreated}
+                onClose={() => setShowCompose(false)}
+              />
+            </div>
+          )}
+
+          {/* Tab bar */}
+          <div className="flex gap-1 mb-6 rounded-[14px] border border-white/[0.06] bg-surface/50 p-1">
+            {FEED_TABS.map((tab) => (
+              <button
+                key={tab.key}
+                onClick={() => handleTabChange(tab.key)}
+                className={`flex-1 px-4 py-2.5 rounded-[10px] text-[13px] font-600 transition-all border-none cursor-pointer
+                  ${activeTab === tab.key
+                    ? 'bg-accent-bright/15 text-accent-bright'
+                    : 'bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04]'
+                  }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Feed content */}
+          {loading ? (
+            <PageLoader />
+          ) : error ? (
+            <div className="rounded-[16px] border border-white/[0.06] bg-surface/70 p-8 text-center">
+              <div className="text-[14px] text-text-3/75 mb-3">{error}</div>
+              <button
+                onClick={() => loadFeed(activeTab)}
+                className="px-4 py-2 rounded-[10px] bg-white/[0.06] text-text text-[13px] font-500 border-none cursor-pointer hover:bg-white/[0.1] transition-all"
+              >
+                Retry
+              </button>
+            </div>
+          ) : posts.length === 0 ? (
+            <div className="rounded-[16px] border border-white/[0.06] bg-surface/70 p-8 text-center">
+              <div className="w-12 h-12 rounded-full bg-white/[0.04] flex items-center justify-center mx-auto mb-4">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/40">
+                  <path d="M4 11a9 9 0 0 1 9 9" /><path d="M4 4a16 16 0 0 1 16 16" /><circle cx="5" cy="19" r="1" />
+                </svg>
+              </div>
+              <p className="text-[14px] font-600 text-text mb-1">No posts yet</p>
+              <p className="text-[13px] text-text-3/75">
+                Enable SwarmFeed on your agents and start composing posts.
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {posts.map((post) => (
+                <PostCard key={post.id} post={post} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </MainContent>
+  )
+}