programasweights 0.1.0.dev1__tar.gz → 0.1.0.dev2__tar.gz

{programasweights-0.1.0.dev1 → programasweights-0.1.0.dev2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: programasweights
-Version: 0.1.0.dev1
+Version: 0.1.0.dev2
 Summary: Compile natural language specifications into neural programs that run locally via llama.cpp.
 Author-email: ProgramAsWeights <support@programasweights.com>
 License: MIT

{programasweights-0.1.0.dev1 → programasweights-0.1.0.dev2}/programasweights/__init__.py

@@ -19,7 +19,7 @@ API reference:
     paw.api_key                API key (set via login() or PAW_API_KEY env var)
 """
 
-__version__ = "0.1.0.dev1"
+__version__ = "0.1.0.dev2"
 
 from .config import get_api_url, get_api_key, set_api_key
 

{programasweights-0.1.0.dev1 → programasweights-0.1.0.dev2}/programasweights/cache.py

@@ -21,14 +21,12 @@ import httpx
 
 from . import config
 
-# Known base model GGUF files (interpreter models)
 BASE_MODEL_URLS = {
-    "qwen3-0.6b-q6k": "https://huggingface.co/Qwen/Qwen3-0.6B-GGUF/resolve/main/qwen3-0.6b-q6_k.gguf",
+    "qwen3-0.6b-q6_k": "https://programasweights.com/models/qwen3-0.6b-q6_k.gguf",
 }
 
-# Map interpreter model names to GGUF filenames
 INTERPRETER_TO_GGUF = {
-    "Qwen/Qwen3-0.6B": "qwen3-0.6b-q6k",
+    "Qwen/Qwen3-0.6B": "qwen3-0.6b-q6_k",
 }
 
 
@@ -47,7 +45,7 @@ def get_base_model_path(interpreter: str = "Qwen/Qwen3-0.6B") -> Path:
             f"Available: {list(INTERPRETER_TO_GGUF.keys())}"
         )
 
-    print(f"Downloading base model {gguf_name} (~623 MB, one-time download)...")
+    print(f"Downloading base model {gguf_name} (one-time download)...")
     _download_file(url, gguf_path)
     print(f"Saved to {gguf_path}")
     return gguf_path

{programasweights-0.1.0.dev1 → programasweights-0.1.0.dev2}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "programasweights"
-version = "0.1.0.dev1"
+version = "0.1.0.dev2"
 description = "Compile natural language specifications into neural programs that run locally via llama.cpp."
 readme = "PYPI_README.md"
 requires-python = ">=3.9"

programasweights-0.1.0.dev2/web-app/frontend/src/components/CasesSection.tsx

@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react';
+import { ThumbsUp, ThumbsDown, Trash2, Plus, Send } from 'lucide-react';
+import { apiClient } from '../utils/api';
+import toast from 'react-hot-toast';
+import type { ProgramCase, CaseType, CaseCounts } from '../types';
+
+interface CasesSectionProps {
+  programId: string;
+}
+
+const CasesSection: React.FC<CasesSectionProps> = ({ programId }) => {
+  const [cases, setCases] = useState<ProgramCase[]>([]);
+  const [counts, setCounts] = useState<CaseCounts>({ success: 0, limitation: 0, edge_case: 0 });
+  const [selectedType, setSelectedType] = useState<CaseType | undefined>(undefined);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+  const [newCase, setNewCase] = useState({ input_text: '', output_text: '', case_type: 'success' as CaseType, description: '' });
+
+  useEffect(() => {
+    apiClient.getAuthUser().then(r => { if (r.authenticated) setIsAuthenticated(true); }).catch(() => {});
+    loadCases();
+  }, [programId, selectedType]);
+
+  const loadCases = async () => {
+    try {
+      const res = await apiClient.getCases(programId, { case_type: selectedType });
+      setCases(res.cases);
+      setCounts(res.counts);
+    } catch {
+      setCases([]);
+    }
+  };
+
+  const handleVote = async (caseItem: ProgramCase, vote: 1 | -1) => {
+    const newVote = caseItem.user_vote === vote ? 0 : vote;
+    try {
+      await apiClient.voteCase(caseItem.id, newVote as 1 | -1 | 0);
+      loadCases();
+    } catch {
+      toast.error('Vote failed');
+    }
+  };
+
+  const handleDelete = async (caseId: number) => {
+    try {
+      await apiClient.deleteCase(caseId);
+      setCases(prev => prev.filter(c => c.id !== caseId));
+      toast.success('Case deleted');
+    } catch {
+      toast.error('Delete failed');
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!newCase.input_text.trim() || !newCase.output_text.trim()) {
+      toast.error('Please fill in input and output');
+      return;
+    }
+    try {
+      await apiClient.createCase(programId, newCase);
+      setShowForm(false);
+      setNewCase({ input_text: '', output_text: '', case_type: 'success', description: '' });
+      loadCases();
+      toast.success('Case submitted!');
+    } catch {
+      toast.error('Failed to submit case');
+    }
+  };
+
+  const typeLabels: Record<CaseType, { label: string; color: string }> = {
+    success: { label: 'Successes', color: 'bg-green-100 text-green-700' },
+    limitation: { label: 'Limitations', color: 'bg-amber-100 text-amber-700' },
+    edge_case: { label: 'Edge Cases', color: 'bg-blue-100 text-blue-700' },
+  };
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="font-semibold text-gray-900">Community Cases</h2>
+        {isAuthenticated && (
+          <button onClick={() => setShowForm(!showForm)} className="flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 font-medium">
+            <Plus className="w-3.5 h-3.5" /> Add Case
+          </button>
+        )}
+      </div>
+
+      {/* Type filter */}
+      <div className="flex gap-2 mb-4">
+        <button
+          onClick={() => setSelectedType(undefined)}
+          className={`px-3 py-1 rounded-full text-xs font-medium ${!selectedType ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+        >
+          All ({counts.success + counts.limitation + counts.edge_case})
+        </button>
+        {(Object.entries(typeLabels) as [CaseType, { label: string; color: string }][]).map(([type, { label, color }]) => (
+          <button
+            key={type}
+            onClick={() => setSelectedType(selectedType === type ? undefined : type)}
+            className={`px-3 py-1 rounded-full text-xs font-medium ${selectedType === type ? color : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+          >
+            {label} ({counts[type]})
+          </button>
+        ))}
+      </div>
+
+      {/* New case form */}
+      {showForm && (
+        <div className="border border-gray-200 rounded-lg p-4 mb-4 space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-gray-500 mb-1 block">Input</label>
+              <textarea value={newCase.input_text} onChange={e => setNewCase({ ...newCase, input_text: e.target.value })} rows={2} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm resize-none" placeholder="Input..." />
+            </div>
+            <div>
+              <label className="text-xs text-gray-500 mb-1 block">Output</label>
+              <textarea value={newCase.output_text} onChange={e => setNewCase({ ...newCase, output_text: e.target.value })} rows={2} className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm resize-none" placeholder="Output..." />
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <select value={newCase.case_type} onChange={e => setNewCase({ ...newCase, case_type: e.target.value as CaseType })} className="text-sm border border-gray-200 rounded-md px-2 py-1">
+              <option value="success">Success</option>
+              <option value="limitation">Limitation</option>
+              <option value="edge_case">Edge Case</option>
+            </select>
+            <input value={newCase.description} onChange={e => setNewCase({ ...newCase, description: e.target.value })} className="flex-1 px-3 py-1 border border-gray-200 rounded-lg text-sm" placeholder="Brief description (optional)" />
+            <button onClick={handleSubmit} className="flex items-center gap-1 px-4 py-1.5 bg-gray-900 text-white rounded-lg text-sm hover:bg-gray-800">
+              <Send className="w-3.5 h-3.5" /> Submit
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Cases list */}
+      {cases.length === 0 ? (
+        <p className="text-sm text-gray-400 text-center py-6">No cases yet. Be the first to contribute!</p>
+      ) : (
+        <div className="space-y-3">
+          {cases.map(c => (
+            <div key={c.id} className="border border-gray-100 rounded-lg p-3">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <span className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-medium mb-2 ${typeLabels[c.case_type].color}`}>
+                    {typeLabels[c.case_type].label.slice(0, -1)}
+                  </span>
+                  {c.description && <p className="text-sm text-gray-700 mb-2">{c.description}</p>}
+                  <div className="grid grid-cols-2 gap-2">
+                    <div className="bg-gray-50 rounded p-2">
+                      <p className="text-[10px] text-gray-400 mb-1">Input</p>
+                      <p className="text-xs font-mono text-gray-700 truncate">{c.input_text}</p>
+                    </div>
+                    <div className="bg-gray-50 rounded p-2">
+                      <p className="text-[10px] text-gray-400 mb-1">Output</p>
+                      <p className="text-xs font-mono text-gray-700 truncate">{c.output_text}</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col items-center gap-1 text-xs text-gray-400">
+                  <button onClick={() => handleVote(c, 1)} className={`p-1 rounded ${c.user_vote === 1 ? 'text-green-600' : 'hover:text-green-600'}`}>
+                    <ThumbsUp className="w-3.5 h-3.5" />
+                  </button>
+                  <span>{c.upvotes - c.downvotes}</span>
+                  <button onClick={() => handleVote(c, -1)} className={`p-1 rounded ${c.user_vote === -1 ? 'text-red-600' : 'hover:text-red-600'}`}>
+                    <ThumbsDown className="w-3.5 h-3.5" />
+                  </button>
+                  {isAuthenticated && (
+                    <button onClick={() => handleDelete(c.id)} className="p-1 text-gray-300 hover:text-red-500 mt-1">
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CasesSection;

{programasweights-0.1.0.dev1 → programasweights-0.1.0.dev2}/web-app/frontend/src/components/Header.tsx

@@ -1,18 +1,12 @@
 import { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Github, BookOpen, Package, LogOut, Play, Menu, X, DollarSign } from 'lucide-react';
+import { BookOpen, Package, LogOut, Play, Menu, X, DollarSign, Github } from 'lucide-react';
 import { apiClient } from '../utils/api';
-
-interface User {
-  id: number;
-  username: string;
-  displayName: string;
-  avatarUrl: string;
-}
+import type { AuthUser } from '../types';
 
 const Header: React.FC = () => {
   const location = useLocation();
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = useState<AuthUser | null>(null);
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
@@ -25,39 +19,16 @@ const Header: React.FC = () => {
 
   const isActive = (path: string) => location.pathname === path;
 
-  // Check auth status on mount
   useEffect(() => {
-    const checkAuth = async () => {
-      try {
-        const response = await apiClient.getAuthUser();
-        if (response.authenticated && response.user) {
-          setUser(response.user);
-        }
-      } catch {
-        // Not logged in - that's fine
-      }
-    };
-    checkAuth();
+    apiClient.getAuthUser()
+      .then(res => { if (res.authenticated) setUser(res); })
+      .catch(() => {});
   }, []);
 
-  const handleLogin = async () => {
-    try {
-      const response = await apiClient.getGithubLoginUrl();
-      window.location.href = response.url;
-    } catch {
-      // Fallback
-      window.location.href = '/api/auth/github';
-    }
-  };
-
   const handleLogout = async () => {
-    try {
-      await apiClient.logout();
-      setUser(null);
-      setShowUserMenu(false);
-    } catch {
-      setUser(null);
-    }
+    await apiClient.logout();
+    setUser(null);
+    setShowUserMenu(false);
   };
 
   return (
@@ -73,17 +44,14 @@ const Header: React.FC = () => {
               <p className="text-xs text-gray-500 hidden sm:block">ProgramAsWeights</p>
             </div>
           </Link>
-          
-          {/* Desktop nav */}
+
           <nav className="hidden md:flex items-center space-x-1">
             {navItems.map(({ path, label, icon: Icon }) => (
               <Link
                 key={path}
                 to={path}
                 className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                  isActive(path)
-                    ? 'bg-gray-100 text-gray-900'
-                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                  isActive(path) ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
                 }`}
               >
                 <Icon className="w-4 h-4" />
@@ -94,7 +62,7 @@ const Header: React.FC = () => {
 
           <div className="flex items-center space-x-3">
             <a
-              href="https://github.com/programasweights/programasweights"
+              href="https://github.com/yuntian-group/programasweights"
               target="_blank"
               rel="noopener noreferrer"
               className="hidden md:flex items-center space-x-1.5 text-gray-500 hover:text-gray-900 transition-colors text-sm"
@@ -103,39 +71,37 @@ const Header: React.FC = () => {
               <span className="hidden lg:inline">GitHub</span>
             </a>
 
-            {user ? (
+            {user?.authenticated ? (
               <div className="relative">
                 <button
                   onClick={() => setShowUserMenu(!showUserMenu)}
                   className="flex items-center space-x-2 hover:opacity-80 transition-opacity"
                 >
-                  <img
-                    src={user.avatarUrl}
-                    alt={user.username}
-                    className="w-8 h-8 rounded-full border-2 border-gray-200"
-                  />
+                  {user.avatar_url ? (
+                    <img src={user.avatar_url} alt="" className="w-8 h-8 rounded-full border-2 border-gray-200" />
+                  ) : (
+                    <div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-sm font-medium text-gray-600">
+                      {(user.email || '?')[0].toUpperCase()}
+                    </div>
+                  )}
                   <span className="text-sm font-medium text-gray-700 hidden lg:inline">
-                    {user.displayName || user.username}
+                    {user.display_name || user.username || user.email}
                   </span>
                 </button>
-                
+
                 {showUserMenu && (
                   <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
-                    <div className="px-4 py-2 border-b border-gray-100">
-                      <p className="text-sm font-medium text-gray-900">{user.displayName}</p>
-                      <p className="text-xs text-gray-500">@{user.username}</p>
-                    </div>
                     <Link
                       to="/profile"
                       onClick={() => setShowUserMenu(false)}
-                      className="w-full flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+                      className="w-full flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                     >
                       <Package className="w-4 h-4" />
                       <span>My Programs</span>
                     </Link>
                     <button
                       onClick={handleLogout}
-                      className="w-full flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+                      className="w-full flex items-center space-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                     >
                       <LogOut className="w-4 h-4" />
                       <span>Sign out</span>
@@ -144,16 +110,15 @@ const Header: React.FC = () => {
                 )}
               </div>
             ) : (
-              <button
-                onClick={handleLogin}
+              <Link
+                to="/playground"
                 className="hidden sm:flex items-center space-x-2 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors text-sm font-medium"
               >
-                <Github className="w-4 h-4" />
-                <span>Sign in</span>
-              </button>
+                <Play className="w-4 h-4" />
+                <span>Get Started</span>
+              </Link>
             )}
 
-            {/* Mobile menu button */}
             <button
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
               className="md:hidden p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
@@ -163,9 +128,8 @@ const Header: React.FC = () => {
           </div>
         </div>
 
-        {/* Mobile menu */}
         {mobileMenuOpen && (
-          <div className="md:hidden mt-3 pt-3 border-t border-gray-100 pb-2 animate-fade-in">
+          <div className="md:hidden mt-3 pt-3 border-t border-gray-100 pb-2">
             <nav className="space-y-1">
               {navItems.map(({ path, label, icon: Icon }) => (
                 <Link
@@ -173,33 +137,13 @@ const Header: React.FC = () => {
                   to={path}
                   onClick={() => setMobileMenuOpen(false)}
                   className={`flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
-                    isActive(path)
-                      ? 'bg-gray-100 text-gray-900'
-                      : 'text-gray-600 hover:bg-gray-50'
+                    isActive(path) ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50'
                   }`}
                 >
                   <Icon className="w-4 h-4" />
                   <span>{label}</span>
                 </Link>
               ))}
-              <a
-                href="https://github.com/programasweights/programasweights"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors"
-              >
-                <Github className="w-4 h-4" />
-                <span>GitHub</span>
-              </a>
-              {!user && (
-                <button
-                  onClick={() => { handleLogin(); setMobileMenuOpen(false); }}
-                  className="w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 transition-colors"
-                >
-                  <Github className="w-4 h-4" />
-                  <span>Sign in with GitHub</span>
-                </button>
-              )}
             </nav>
           </div>
         )}

programasweights-0.1.0.dev2/web-app/frontend/src/components/HubPage.tsx

@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import { Search, ThumbsUp, Download, User, Clock, Package, TrendingUp, ArrowRight, Play } from 'lucide-react';
+import { apiClient } from '../utils/api';
+import type { ProgramSummary } from '../types';
+
+function timeAgo(dateStr: string): string {
+  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+const HubPage: React.FC = () => {
+  const [programs, setPrograms] = useState<ProgramSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<'popular' | 'recent' | 'downloads'>('popular');
+  const [selectedTag, setSelectedTag] = useState<string | null>(null);
+
+  useEffect(() => { loadPrograms(); }, [sortBy, selectedTag]);
+
+  const loadPrograms = async () => {
+    setLoading(true);
+    try {
+      const response = await apiClient.getPrograms({
+        sort: sortBy,
+        tag: selectedTag || undefined,
+        search: searchQuery || undefined,
+      });
+      setPrograms(response.programs);
+    } catch {
+      setPrograms([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    loadPrograms();
+  };
+
+  const popularTags = ['nlp', 'extraction', 'classification', 'translation', 'code', 'math', 'reasoning'];
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-8">
+      <Helmet>
+        <title>Program Hub — PAW</title>
+        <meta name="description" content="Discover, share, and download community-built neural programs." />
+      </Helmet>
+
+      <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Program Hub</h1>
+          <p className="text-gray-500 mt-1">Discover and download community-built neural programs</p>
+        </div>
+        <Link
+          to="/playground"
+          className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors text-sm self-start sm:self-auto"
+        >
+          <Play className="w-4 h-4" />
+          Create Program
+        </Link>
+      </div>
+
+      {/* Search */}
+      <form onSubmit={handleSearch} className="relative">
+        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          placeholder="Search programs..."
+          className="w-full pl-12 pr-24 py-3.5 rounded-xl border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-gray-900 focus:border-gray-900 outline-none transition-all shadow-sm"
+        />
+        <button type="submit" className="absolute right-2 top-1/2 -translate-y-1/2 px-5 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
+          Search
+        </button>
+      </form>
+
+      {/* Tags + Sort */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => setSelectedTag(null)}
+            className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all ${!selectedTag ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+          >
+            All
+          </button>
+          {popularTags.map(tag => (
+            <button
+              key={tag}
+              onClick={() => setSelectedTag(selectedTag === tag ? null : tag)}
+              className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all ${selectedTag === tag ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+            >
+              {tag}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
+          {(['popular', 'recent', 'downloads'] as const).map(sort => (
+            <button
+              key={sort}
+              onClick={() => setSortBy(sort)}
+              className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${sortBy === sort ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
+            >
+              {sort.charAt(0).toUpperCase() + sort.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Content */}
+      {loading ? (
+        <div className="space-y-4">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="bg-white rounded-xl border border-gray-200 p-6 animate-pulse">
+              <div className="h-5 bg-gray-200 rounded w-1/3 mb-3" />
+              <div className="h-4 bg-gray-100 rounded w-2/3" />
+            </div>
+          ))}
+        </div>
+      ) : programs.length === 0 ? (
+        <div className="text-center py-16 bg-white rounded-xl border border-gray-200">
+          <Package className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+          <h2 className="text-lg font-semibold text-gray-700 mb-2">No programs yet</h2>
+          <p className="text-gray-500 mb-6 text-sm">Be the first to compile a neural program!</p>
+          <Link to="/playground" className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors text-sm font-medium">
+            <Play className="w-4 h-4" />
+            Open Playground
+          </Link>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {programs.map(program => (
+            <Link
+              key={program.id}
+              to={`/hub/${program.id}`}
+              className="group flex items-center gap-5 bg-white rounded-xl border border-gray-200 px-5 py-4 hover:border-gray-300 hover:shadow-sm transition-all"
+            >
+              <div className="flex-1 min-w-0">
+                <h3 className="font-medium text-gray-900 group-hover:text-blue-600 transition-colors truncate">
+                  {program.name || program.spec.slice(0, 60)}
+                </h3>
+                <p className="text-sm text-gray-500 truncate">{program.spec}</p>
+                <div className="flex items-center gap-3 mt-2">
+                  <span className="text-xs text-gray-400 flex items-center gap-1">
+                    <User className="w-3 h-3" />
+                    {program.author || 'Anonymous'}
+                  </span>
+                  <span className="text-xs text-gray-400 flex items-center gap-1">
+                    <Clock className="w-3 h-3" />
+                    {timeAgo(program.created_at)}
+                  </span>
+                  {program.tags?.slice(0, 3).map(tag => (
+                    <span key={tag} className="px-2 py-0.5 bg-gray-100 text-gray-500 text-[10px] rounded-full">{tag}</span>
+                  ))}
+                </div>
+              </div>
+              <div className="flex items-center gap-4 text-xs text-gray-400 flex-shrink-0">
+                <span className="flex items-center gap-1"><ThumbsUp className="w-3.5 h-3.5" />{program.upvotes}</span>
+                <span className="flex items-center gap-1"><Download className="w-3.5 h-3.5" />{program.downloads}</span>
+                <ArrowRight className="w-4 h-4 text-gray-300 group-hover:text-gray-500 transition-colors" />
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HubPage;