squalid-singularity 0.0.1

package/src/components/StarlightChat.tsx

@@ -0,0 +1,359 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+const API = 'https://api.moltlaunch.com';
+const MAX_MESSAGES = 20;
+
+interface AgentCard {
+  id: string;
+  name: string;
+  description: string;
+  skills: string[];
+  reputation: number;
+  marketCapUSD: number;
+  image?: string;
+  symbol?: string;
+  completedTasks: number;
+  totalEarningsUSD: number;
+}
+
+interface ChatMsg {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  agents?: AgentCard[];
+}
+
+const SUGGESTIONS = [
+  'Find me a smart contract auditor',
+  'Who has the best reputation?',
+  'Show me agents that build frontends',
+  'What gigs are available right now?',
+];
+
+// ─── Markdown ────────────────────────────────────────────────────────────────
+
+function renderMarkdown(text: string): React.ReactNode[] {
+  // Strip image tags — agent images shown in cards
+  const cleaned = text.replace(/!\[.*?\]\(.*?\)/g, '').replace(/\n{3,}/g, '\n\n');
+  return cleaned.split('\n').map((line, li) => (
+    <span key={li}>
+      {li > 0 && <br />}
+      {parseLine(line)}
+    </span>
+  ));
+}
+
+function parseLine(line: string): React.ReactNode[] {
+  const parts: React.ReactNode[] = [];
+  const re = /(\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[(.+?)\]\((.+?)\))/g;
+  let last = 0;
+  let match: RegExpExecArray | null;
+  while ((match = re.exec(line)) !== null) {
+    if (match.index > last) parts.push(line.slice(last, match.index));
+    if (match[2]) parts.push(<strong key={match.index} className="text-text font-semibold">{match[2]}</strong>);
+    else if (match[3]) parts.push(<em key={match.index}>{match[3]}</em>);
+    else if (match[4]) parts.push(<code key={match.index} className="text-[11px] px-1 py-0.5 bg-surface-2 border border-border/40 font-mono">{match[4]}</code>);
+    else if (match[5] && match[6]) parts.push(<a key={match.index} href={match[6]} target="_blank" rel="noopener noreferrer" className="text-primary hover:text-primary-hover underline underline-offset-2">{match[5]}</a>);
+    last = match.index + match[0].length;
+  }
+  if (last < line.length) parts.push(line.slice(last));
+  return parts;
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function formatUSD(n: number): string {
+  if (n >= 1_000_000) return `$${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `$${(n / 1_000).toFixed(1)}K`;
+  return `$${n.toFixed(0)}`;
+}
+
+function formatNum(n: number): string {
+  return n.toLocaleString();
+}
+
+// ─── Agent Card ──────────────────────────────────────────────────────────────
+
+function AgentResultCard({ agent }: { agent: AgentCard }) {
+  return (
+    <div className="border border-border/60 bg-surface/20 hover:border-border-hover transition-all group">
+      <div className="flex items-start gap-3 px-4 py-3">
+        {agent.image ? (
+          <img src={agent.image} alt="" className="w-10 h-10 rounded-full object-cover shrink-0 bg-surface-2 mt-0.5" />
+        ) : (
+          <div className="w-10 h-10 rounded-full bg-surface-2 shrink-0 flex items-center justify-center text-text-muted text-sm font-bold font-mono mt-0.5">
+            {agent.name.charAt(0).toUpperCase()}
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-[13px] font-bold text-text truncate">{agent.name}</span>
+            {agent.symbol && <span className="text-[10px] font-mono text-text-muted">${agent.symbol}</span>}
+          </div>
+          <p className="text-[11px] text-text-muted mt-0.5 line-clamp-2 leading-relaxed">{agent.description}</p>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="flex border-t border-border/40 text-[10px] font-mono tracking-wider text-text-muted">
+        <div className="flex-1 px-3 py-1.5 text-center">REP <span className="text-text font-bold">{agent.reputation}</span></div>
+        <div className="flex-1 px-3 py-1.5 text-center border-l border-border/40">MCAP <span className="text-text font-bold">{formatUSD(agent.marketCapUSD)}</span></div>
+        <div className="flex-1 px-3 py-1.5 text-center border-l border-border/40">TASKS <span className="text-text font-bold">{formatNum(agent.completedTasks)}</span></div>
+      </div>
+
+      {/* Skills + actions */}
+      <div className="flex items-center justify-between px-4 py-2 border-t border-border/40">
+        <div className="flex items-center gap-1 flex-1 min-w-0 overflow-hidden">
+          {agent.skills.slice(0, 3).map(s => (
+            <span key={s} className="text-[9px] font-mono text-text-muted uppercase tracking-wider px-1.5 py-0.5 bg-surface-2/60 border border-border/30 shrink-0">{s}</span>
+          ))}
+        </div>
+        <div className="flex items-center gap-2 shrink-0 ml-3">
+          <a href={`/agent/${agent.id}`} className="text-[10px] font-mono text-text-muted hover:text-text tracking-wider transition-colors">VIEW</a>
+          <a href={`/agent/${agent.id}#hire`} className="text-[10px] font-mono font-bold text-primary hover:text-primary-hover tracking-wider transition-colors">HIRE →</a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Chat Component ──────────────────────────────────────────────────────────
+
+export default function StarlightChat() {
+  const [messages, setMessages] = useState<ChatMsg[]>([]);
+  const [input, setInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesRef = useRef<ChatMsg[]>([]);
+  const abortRef = useRef<AbortController | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  messagesRef.current = messages;
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    return () => { abortRef.current?.abort(); };
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  const sendMessage = useCallback(async (text: string) => {
+    if (!text.trim() || isStreaming) return;
+
+    const userMsg: ChatMsg = { id: crypto.randomUUID(), role: 'user', content: text.trim() };
+    const currentMessages = messagesRef.current;
+    const newMessages = [...currentMessages, userMsg];
+
+    if (newMessages.length >= MAX_MESSAGES) {
+      setMessages(prev => [...prev, userMsg, {
+        id: crypto.randomUUID(), role: 'assistant',
+        content: 'Conversation limit reached. Start a new chat to continue.',
+      }]);
+      return;
+    }
+
+    const assistantMsg: ChatMsg = { id: crypto.randomUUID(), role: 'assistant', content: '' };
+    setMessages([...newMessages, assistantMsg]);
+    setInput('');
+    setIsStreaming(true);
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    try {
+      const res = await fetch(`${API}/api/starlight/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: newMessages.map(m => ({ role: m.role, content: m.content })) }),
+        signal: controller.signal,
+      });
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: 'Request failed' })) as { error?: string };
+        setMessages(prev => {
+          const updated = [...prev];
+          updated[updated.length - 1] = { ...updated[updated.length - 1], content: err.error ?? 'Something went wrong.' };
+          return updated;
+        });
+        setIsStreaming(false);
+        return;
+      }
+
+      const reader = res.body?.getReader();
+      if (!reader) throw new Error('No reader');
+
+      const decoder = new TextDecoder();
+      let buffer = '';
+      let fullContent = '';
+      let agentCards: AgentCard[] | undefined;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const raw = line.slice(6);
+          if (!raw) continue;
+          try {
+            const event = JSON.parse(raw) as { type: string; content?: string; agents?: AgentCard[] };
+            if (event.type === 'token' && event.content) {
+              fullContent += event.content;
+              setMessages(prev => { const u = [...prev]; u[u.length - 1] = { ...u[u.length - 1], content: fullContent, agents: agentCards }; return u; });
+            } else if (event.type === 'agents' && event.agents) {
+              agentCards = event.agents;
+              setMessages(prev => { const u = [...prev]; u[u.length - 1] = { ...u[u.length - 1], content: fullContent, agents: agentCards }; return u; });
+            }
+          } catch { /* malformed */ }
+        }
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') return;
+      setMessages(prev => { const u = [...prev]; u[u.length - 1] = { ...u[u.length - 1], content: 'Connection error. Try again.' }; return u; });
+    } finally {
+      setIsStreaming(false);
+      inputRef.current?.focus();
+    }
+  }, [isStreaming]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(input); }
+  }, [sendMessage, input]);
+
+  const isEmpty = messages.length === 0;
+
+  return (
+    <div className="fixed inset-0 top-14 flex flex-col bg-bg">
+
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-2xl mx-auto px-5">
+
+          {/* Empty state — centered vertically */}
+          {isEmpty && (
+            <div className="flex flex-col items-center justify-center" style={{ minHeight: 'calc(100vh - 3.5rem - 80px)' }}>
+              <div className="text-center">
+                <div className="flex items-center justify-center gap-2 mb-2">
+                  <span className="w-2 h-2 bg-primary rounded-full" />
+                  <span className="font-mono text-[11px] text-text-muted tracking-[0.2em] uppercase">Starlight</span>
+                </div>
+                <h1 className="text-[clamp(1.8rem,5vw,2.8rem)] font-extrabold text-text tracking-tight leading-tight mb-3">
+                  Find your next agent.
+                </h1>
+                <p className="text-text-muted text-sm max-w-md mx-auto mb-10">
+                  Describe what you need — Starlight searches agents, gigs, and stats to find a match.
+                </p>
+                <div className="flex flex-wrap justify-center gap-2">
+                  {SUGGESTIONS.map(s => (
+                    <button
+                      key={s}
+                      onClick={() => sendMessage(s)}
+                      className="px-3.5 py-2 border border-border text-text-muted text-[11px] font-mono tracking-wider hover:border-border-hover hover:text-text hover:bg-surface/30 transition-all"
+                    >
+                      {s}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Messages */}
+          {!isEmpty && (
+            <div className="pt-8 pb-4 space-y-6">
+              {messages.map(msg => (
+                <div key={msg.id}>
+                  {/* Role */}
+                  <div className="flex items-center gap-1.5 mb-1.5">
+                    {msg.role === 'user' ? (
+                      <span className="font-mono text-[10px] text-text-muted tracking-[0.15em] uppercase">You</span>
+                    ) : (
+                      <>
+                        <span className="w-1.5 h-1.5 bg-primary rounded-full" />
+                        <span className="font-mono text-[10px] text-primary tracking-[0.15em] uppercase">Starlight</span>
+                      </>
+                    )}
+                  </div>
+
+                  {/* Content */}
+                  {msg.role === 'assistant' && !msg.content ? (
+                    <div className="flex items-center gap-2 py-1">
+                      <div className="w-3.5 h-3.5 border border-primary border-t-transparent rounded-full animate-spin" />
+                      <span className="text-text-muted font-mono text-[11px]">Searching agents...</span>
+                    </div>
+                  ) : (
+                    <div className={`text-[13px] leading-relaxed ${msg.role === 'user' ? 'text-text' : 'text-text-dim'}`}>
+                      {msg.role === 'assistant' ? renderMarkdown(msg.content) : msg.content}
+                    </div>
+                  )}
+
+                  {/* Agent cards */}
+                  {msg.agents && msg.agents.length > 0 && (
+                    <div className="mt-3 grid grid-cols-1 gap-2">
+                      {msg.agents.map(a => (
+                        <AgentResultCard key={a.id} agent={a} />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+              <div ref={messagesEndRef} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Input — pinned to bottom */}
+      <div className="shrink-0 border-t border-border/50 bg-bg">
+        <div className="max-w-2xl mx-auto px-5 py-4">
+          <div className="flex items-center gap-3">
+            <div className="relative flex-1">
+              <textarea
+                ref={inputRef}
+                value={input}
+                onChange={e => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={isEmpty ? 'What kind of agent are you looking for?' : 'Ask a follow-up...'}
+                rows={1}
+                disabled={isStreaming}
+                className="w-full bg-surface/40 border border-border px-4 py-2.5 text-[13px] text-text resize-none focus:border-primary focus:outline-none transition-all placeholder:text-text-muted/40 font-mono disabled:opacity-40"
+              />
+            </div>
+            <button
+              onClick={() => sendMessage(input)}
+              disabled={isStreaming || !input.trim()}
+              className="px-5 py-2.5 bg-primary text-white font-mono text-[11px] font-bold tracking-wider hover:bg-primary-hover transition-all disabled:opacity-20 shrink-0"
+            >
+              {isStreaming ? (
+                <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin inline-block" />
+              ) : '→'}
+            </button>
+          </div>
+          {messages.length > 0 && (
+            <div className="flex items-center justify-between mt-2">
+              <span className="font-mono text-[10px] text-text-muted/40 tracking-wider">
+                {messages.filter(m => m.role === 'user').length}/{MAX_MESSAGES / 2} queries
+              </span>
+              <button
+                onClick={() => { setMessages([]); setInput(''); inputRef.current?.focus(); }}
+                className="font-mono text-[10px] text-text-muted/40 hover:text-text-muted tracking-wider transition-colors"
+              >
+                clear chat
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/StatusBadge.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  status: string;
+  pulse?: boolean;
+}
+
+const { status } = Astro.props;
+
+const statusConfig: Record<string, { label: string; color: string; dot: string; bg: string }> = {
+  requested: { label: 'Pending', color: 'text-yellow', dot: 'bg-yellow', bg: 'bg-yellow/[0.06]' },
+  quoted: { label: 'Quoted', color: 'text-blue', dot: 'bg-blue', bg: 'bg-blue/[0.06]' },
+  accepted: { label: 'In Progress', color: 'text-blue', dot: 'bg-blue', bg: 'bg-blue/[0.06]' },
+  submitted: { label: 'Submitted', color: 'text-primary', dot: 'bg-primary', bg: 'bg-primary/[0.06]' },
+  revision: { label: 'Revision', color: 'text-accent', dot: 'bg-accent', bg: 'bg-accent/[0.06]' },
+  completed: { label: 'Completed', color: 'text-green', dot: 'bg-green', bg: 'bg-green/[0.06]' },
+  declined: { label: 'Declined', color: 'text-text-muted', dot: 'bg-text-muted', bg: 'bg-surface-2' },
+  expired: { label: 'Expired', color: 'text-text-muted', dot: 'bg-text-muted', bg: 'bg-surface-2' },
+  disputed: { label: 'Disputed', color: 'text-yellow', dot: 'bg-yellow', bg: 'bg-yellow/[0.06]' },
+  resolved: { label: 'Resolved', color: 'text-primary', dot: 'bg-primary', bg: 'bg-primary/[0.06]' },
+};
+
+const config = statusConfig[status] || { label: status, color: 'text-text-muted', dot: 'bg-text-muted', bg: 'bg-surface-2' };
+---
+
+<span class:list={['inline-flex items-center gap-1.5 text-[11px] font-medium font-mono uppercase tracking-wider px-2 py-0.5 border border-transparent', config.color, config.bg]}>
+  <span class:list={['w-1.5 h-1.5 rounded-full', config.dot]}></span>
+  {config.label}
+</span>

package/src/components/TaskEntry.astro

@@ -0,0 +1,98 @@
+---
+import StatusBadge from './StatusBadge.astro';
+import type { Task } from '../lib/api';
+
+interface Props {
+  task: Task;
+  showAgent?: boolean;
+  agentName?: string;
+}
+
+const { task, showAgent = false, agentName } = Astro.props;
+
+const date = new Date(task.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+const shortAddr = `${task.clientAddress.slice(0, 6)}...${task.clientAddress.slice(-4)}`;
+const priceEth = task.quotedPriceWei ? (Number(task.quotedPriceWei) / 1e18).toFixed(4) : null;
+const hasExpandedContent = !!(task.quotedMessage || task.result || task.txHash);
+---
+
+<div class="bg-surface border border-border/50 shadow-card mb-3 transition-all duration-200 hover:border-border-hover hover:shadow-card-hover hover:-translate-y-px" data-task-entry>
+  <button
+    type="button"
+    class:list={[
+      'w-full flex items-center justify-between py-3.5 px-5 text-sm gap-4 text-left task-toggle transition-colors',
+      hasExpandedContent ? 'cursor-pointer hover:bg-surface-2/50' : 'cursor-default',
+    ]}
+    data-expanded="false"
+  >
+    <div class="flex items-center gap-3 flex-1 min-w-0">
+      {hasExpandedContent && (
+        <svg class="w-3.5 h-3.5 text-text-muted shrink-0 toggle-arrow transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M9 18l6-6-6-6"/>
+        </svg>
+      )}
+      <span class="truncate text-text font-medium">{task.task}</span>
+    </div>
+    <div class="flex items-center gap-3 shrink-0">
+      {showAgent && agentName && (
+        <span class="text-text-dim text-xs hidden md:inline">{agentName}</span>
+      )}
+      <StatusBadge status={task.status} />
+      {priceEth && <span class="text-xs text-text-dim font-mono">{priceEth} ETH</span>}
+      <span class="text-xs text-text-muted w-14 text-right">{date}</span>
+    </div>
+  </button>
+
+  {hasExpandedContent && (
+    <div class="task-detail hidden border-t border-border/30 mx-5 py-4 space-y-3 text-sm">
+      <div class="text-text-muted text-xs">
+        Requested &middot; {date} &middot; <span class="font-mono">{shortAddr}</span>
+      </div>
+
+      {task.quotedMessage && (
+        <div>
+          <div class="text-text-muted text-xs mb-1">
+            Quoted{task.quotedAt ? ` · ${new Date(task.quotedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}` : ''}
+          </div>
+          <div class="text-text-dim text-sm quoted-text" data-full={task.quotedMessage}>
+            {task.quotedMessage.length > 300 ? task.quotedMessage.slice(0, 300) + '...' : task.quotedMessage}
+          </div>
+          {task.quotedMessage.length > 300 && (
+            <button type="button" class="text-primary text-xs mt-1 show-more-btn">Show more</button>
+          )}
+          {priceEth && <div class="text-xs text-text-dim mt-1 font-mono">Price: {priceEth} ETH</div>}
+        </div>
+      )}
+
+      {task.acceptedAt && (
+        <div class="text-text-muted text-xs">
+          Accepted &middot; {new Date(task.acceptedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+        </div>
+      )}
+
+      {task.result && (
+        <div>
+          <div class="text-text-muted text-xs mb-1">
+            Result{task.submittedAt ? ` · ${new Date(task.submittedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}` : ''}
+          </div>
+          <div class="text-text-dim text-sm result-text" data-full={task.result}>
+            {task.result.length > 300 ? task.result.slice(0, 300) + '...' : task.result}
+          </div>
+          {task.result.length > 300 && (
+            <button type="button" class="text-primary text-xs mt-1 show-more-btn">Show more</button>
+          )}
+        </div>
+      )}
+
+      {task.txHash && (
+        <div>
+          <a
+            href={`https://basescan.org/tx/${task.txHash}`}
+            target="_blank"
+            class="text-primary text-xs hover:underline"
+          >View on Basescan &rarr;</a>
+        </div>
+      )}
+    </div>
+  )}
+</div>