Make the site deployable, and finish the OpenRouter migration

.github/workflows/ci.yml

@@ -15,8 +15,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}

apps/web/app/dashboard/angles/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { PageHeader, Card, StatCard, Button } from '@totalaudiopromo/ui/app'
+import { PageHeader, Card, StatCard, Button, SectionLabel } from '@totalaudiopromo/ui/app'
 import { Sparkles, Search, Copy, CheckCircle2, Lightbulb, Tag } from 'lucide-react'
 
 // Real extracted ideas from Podflow digest pipeline
@@ -62,30 +62,33 @@ export default function AnglesPage() {
 
   return (
     <div className="space-y-8 max-w-6xl mx-auto">
-      <PageHeader
-        badge="AI EXTRACTOR"
+      <SectionLabel>AI EXTRACTOR</SectionLabel>
+<PageHeader
         title="Extracted Episode Angles"
-        subtitle="Key interview topics, guest slots, and discussion angles extracted by Podflow."
+        description="Key interview topics, guest slots, and discussion angles extracted by Podflow."
       />
 
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <StatCard
-          title="Extracted Ideas"
+          label="Extracted Ideas"
           value="53 Ideas"
-          subtitle="Processed in latest digest run"
-          icon={<Lightbulb className="w-5 h-5 text-amber-400" />}
+          limit="Processed in latest digest run"
+          icon={Lightbulb}
+          iconClassName="text-amber-400"
         />
         <StatCard
-          title="Follow-Worthy Guests"
+          label="Follow-Worthy Guests"
           value="21 Guests"
-          subtitle="Flagged by AI extraction engine"
-          icon={<Sparkles className="w-5 h-5 text-purple-400" />}
+          limit="Flagged by AI extraction engine"
+          icon={Sparkles}
+          iconClassName="text-purple-400"
         />
         <StatCard
-          title="Average Cost / Run"
+          label="Average Cost / Run"
           value="$0.06"
-          subtitle="Anthropic / OpenAI API cost"
-          icon={<Tag className="w-5 h-5 text-emerald-400" />}
+          limit="Anthropic / OpenAI API cost"
+          icon={Tag}
+          iconClassName="text-emerald-400"
         />
       </div>
 

apps/web/app/dashboard/billing/page.tsx

@@ -1,18 +1,18 @@
 'use client'
 
 import { useState } from 'react'
-import { PageHeader, Card, Button, StatCard } from '@totalaudiopromo/ui/app'
+import { PageHeader, Card, Button, StatCard, SectionLabel } from '@totalaudiopromo/ui/app'
 import { CreditCard, Check, ShieldCheck, Cpu, Terminal, ExternalLink } from 'lucide-react'
 
 export default function BillingPage() {
   const [activePlan, setActivePlan] = useState('LOCAL_CLI')
 
   return (
     <div className="space-y-8 max-w-5xl mx-auto">
-      <PageHeader
-        badge="SUBSCRIPTION & LOCAL CLI TIERS"
+      <SectionLabel>SUBSCRIPTION & LOCAL CLI TIERS</SectionLabel>
+<PageHeader
         title="Billing & Plan Management"
-        subtitle="Understand Podflow's open-source local CLI mode vs hosted cloud PR workspace tiers."
+        description="Understand Podflow's open-source local CLI mode vs hosted cloud PR workspace tiers."
       />
 
       {/* Active Plan Summary */}

apps/web/app/dashboard/directory/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { PageHeader, Card, StatCard, Button, EmptyState } from '@totalaudiopromo/ui/app'
+import { PageHeader, Card, StatCard, Button, EmptyState, SectionLabel } from '@totalaudiopromo/ui/app'
 import { Radio, Search, Filter, Headphones, ExternalLink, Sparkles, CheckCircle2 } from 'lucide-react'
 
 // Real podcast directory extracted from Podflow engine runs
@@ -95,30 +95,33 @@ export default function DirectoryPage() {
 
   return (
     <div className="space-y-8 max-w-6xl mx-auto">
-      <PageHeader
-        badge="REAL PODCAST INDEX"
+      <SectionLabel>REAL PODCAST INDEX</SectionLabel>
+<PageHeader
         title="Podcast Directory"
-        subtitle="Active Apple Podcasts & RSS feeds monitored by the Podflow engine."
+        description="Active Apple Podcasts & RSS feeds monitored by the Podflow engine."
       />
 
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <StatCard
-          title="Indexed Podcasts"
+          label="Indexed Podcasts"
           value="1,420"
-          subtitle="From local Apple Podcasts DB & RSS"
-          icon={<Radio className="w-5 h-5 text-purple-400" />}
+          limit="From local Apple Podcasts DB & RSS"
+          icon={Radio}
+          iconClassName="text-purple-400"
         />
         <StatCard
-          title="Monitored Tiers"
+          label="Monitored Tiers"
           value="Tiers 1 - 3"
-          subtitle="Configured in ~/.podflow/podcasts.json"
-          icon={<Sparkles className="w-5 h-5 text-amber-400" />}
+          limit="Configured in ~/.podflow/podcasts.json"
+          icon={Sparkles}
+          iconClassName="text-amber-400"
         />
         <StatCard
-          title="Total Guests Tracked"
+          label="Total Guests Tracked"
           value="21 Guests"
-          subtitle="Processed in latest run"
-          icon={<Headphones className="w-5 h-5 text-emerald-400" />}
+          limit="Processed in latest run"
+          icon={Headphones}
+          iconClassName="text-emerald-400"
         />
       </div>
 

apps/web/app/dashboard/page.tsx

@@ -6,8 +6,7 @@ import {
   Card,
   StatCard,
   ActionTile,
-  EmptyState
-} from '@totalaudiopromo/ui/app'
+  EmptyState, SectionLabel } from '@totalaudiopromo/ui/app'
 import {
   Radio,
   Sparkles,
@@ -99,11 +98,11 @@ export default function DashboardPage() {
   return (
     <div className="space-y-8 max-w-6xl mx-auto">
       {/* Header */}
-      <PageHeader
-        badge="PODCAST INTELLIGENCE & GUEST PITCHING"
+      <SectionLabel>PODCAST INTELLIGENCE & GUEST PITCHING</SectionLabel>
+<PageHeader
         title="Podcast Opportunities"
-        subtitle="Real-time episode monitoring, match scores, and automated guest pitching for your roster."
-        action={
+        description="Real-time episode monitoring, match scores, and automated guest pitching for your roster."
+        actions={
           <button className="btn-gradient py-2.5 px-5 rounded-xl font-bold text-xs flex items-center gap-2 text-white shadow-glow">
             <Plus className="w-4 h-4" />
             Scan New Podcasts
@@ -114,58 +113,51 @@ export default function DashboardPage() {
       {/* Stat Metrics Grid with Distinct Multi-Color Accents */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <StatCard
-          title="Monitored Podcasts"
+          label="Monitored Podcasts"
           value="1,420"
-          change="+12 this week"
-          trend="up"
-          subtitle="Active RSS feeds & Spotify charts"
-          icon={<Radio className="w-5 h-5 text-purple-400" />}
+          limit="Active RSS feeds & Spotify charts · +12 this week"
+          icon={Radio}
+          iconClassName="text-purple-400"
         />
         <StatCard
-          title="Host Match Rate"
+          label="Host Match Rate"
           value="92.4%"
-          change="+4.1%"
-          trend="up"
-          subtitle="Relevance match across active roster"
-          icon={<Sparkles className="w-5 h-5 text-emerald-400" />}
+          limit="Relevance match across active roster · +4.1%"
+          icon={Sparkles}
+          iconClassName="text-emerald-400"
         />
         <StatCard
-          title="Pitches Sent"
+          label="Pitches Sent"
           value="48"
-          change="+8 today"
-          trend="up"
-          subtitle="Outreach to verified hosts"
-          icon={<Send className="w-5 h-5 text-cyan-400" />}
+          limit="Outreach to verified hosts · +8 today"
+          icon={Send}
+          iconClassName="text-cyan-400"
         />
         <StatCard
-          title="Host Responses"
+          label="Host Responses"
           value="19"
-          change="39.5% rate"
-          trend="up"
-          subtitle="Confirmed interview bookings"
-          icon={<Users className="w-5 h-5 text-amber-400" />}
+          limit="Confirmed interview bookings · 39.5% rate"
+          icon={Users}
+          iconClassName="text-amber-400"
         />
       </div>
 
       {/* Action Tiles Grid */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <ActionTile
           title="Scan New Episodes"
-          description="Run real-time NLP analysis on latest podcast drops in your genre."
-          icon={<Radio className="w-5 h-5" />}
-          badge="AUTOMATED"
+          subtitle="Run real-time NLP analysis on latest podcast drops in your genre."
+          icon={Radio}
         />
         <ActionTile
           title="Draft Roster Pitch"
-          description="Generate personalized guest pitch emails referencing host episode angles."
-          icon={<Sparkles className="w-5 h-5" />}
-          badge="AI GENERATED"
+          subtitle="Generate personalized guest pitch emails referencing host episode angles."
+          icon={Sparkles}
         />
         <ActionTile
           title="Export Weekly Digest"
-          description="Download PDF/Markdown digest of top podcast opportunities for your team."
-          icon={<FileText className="w-5 h-5" />}
-          badge="EXPORT"
+          subtitle="Download PDF/Markdown digest of top podcast opportunities for your team."
+          icon={FileText}
         />
       </div>
 
@@ -235,7 +227,7 @@ export default function DashboardPage() {
         {/* Opportunity List */}
         {filteredOpportunities.length === 0 ? (
           <EmptyState
-            icon={<Radio className="w-6 h-6" />}
+            icon={Radio}
             title="No podcast opportunities found"
             description="Try adjusting your search query or filter to see more podcast host matches."
           />

apps/web/app/dashboard/pitch/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { PageHeader, Card, Button } from '@totalaudiopromo/ui/app'
+import { PageHeader, Card, Button, SectionLabel } from '@totalaudiopromo/ui/app'
 import { Send, Sparkles, Copy, CheckCircle2, User, Radio, RefreshCw } from 'lucide-react'
 
 export default function PitchDrafterPage() {
@@ -30,10 +30,10 @@ Total Audio PR`
 
   return (
     <div className="space-y-8 max-w-6xl mx-auto">
-      <PageHeader
-        badge="AI PITCH GENERATOR"
+      <SectionLabel>AI PITCH GENERATOR</SectionLabel>
+<PageHeader
         title="Pitch Drafter"
-        subtitle="Generate personalized, episode-specific guest pitches for podcast hosts."
+        description="Generate personalized, episode-specific guest pitches for podcast hosts."
       />
 
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">

apps/web/app/dashboard/settings/page.tsx

@@ -1,20 +1,20 @@
 'use client'
 
 import { useState } from 'react'
-import { PageHeader, Card, Button } from '@totalaudiopromo/ui/app'
+import { PageHeader, Card, Button, SectionLabel } from '@totalaudiopromo/ui/app'
 import { Settings, Key, Cpu, Calendar, CheckCircle2, Save, Globe } from 'lucide-react'
 
 export default function SettingsPage() {
   const [provider, setProvider] = useState('openrouter')
-  const [model, setModel] = useState('anthropic/claude-3.5-haiku')
+  const [model, setModel] = useState('deepseek/deepseek-v4-flash')
   const [apiKey, setApiKey] = useState('sk-or-v1-****************')
   const [scheduleTime, setScheduleTime] = useState('08:00')
   const [saved, setSaved] = useState(false)
 
   const handleProviderChange = (newProvider: string) => {
     setProvider(newProvider)
     if (newProvider === 'openrouter') {
-      setModel('anthropic/claude-3.5-haiku')
+      setModel('deepseek/deepseek-v4-flash')
     } else if (newProvider === 'anthropic') {
       setModel('claude-haiku-4-5-20251001')
     } else if (newProvider === 'openai') {
@@ -33,10 +33,10 @@ export default function SettingsPage() {
 
   return (
     <div className="space-y-8 max-w-4xl mx-auto">
-      <PageHeader
-        badge="CONFIG & PROVIDERS"
+      <SectionLabel>CONFIG & PROVIDERS</SectionLabel>
+<PageHeader
         title="Settings & AI Providers"
-        subtitle="Manage your local ~/.podflow/config.json and AI extraction provider settings."
+        description="Manage your local ~/.podflow/config.json and AI extraction provider settings."
       />
 
       <Card className="space-y-6">

package.json

@@ -60,5 +60,6 @@
     "tsx": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^4.1.10"
-  }
+  },
+  "packageManager": "pnpm@10.34.5"
 }