Initial commit

frontend/components/bills/AIBriefCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { AlertTriangle, CheckCircle, Clock, Cpu, Tag } from "lucide-react";
+import { BriefSchema } from "@/lib/types";
+import { formatDate } from "@/lib/utils";
+
+interface AIBriefCardProps {
+  brief?: BriefSchema | null;
+}
+
+export function AIBriefCard({ brief }: AIBriefCardProps) {
+  if (!brief) {
+    return (
+      <div className="bg-card border border-border rounded-lg p-6">
+        <div className="flex items-center gap-2 mb-3">
+          <Cpu className="w-4 h-4 text-muted-foreground" />
+          <h2 className="font-semibold">AI Analysis</h2>
+        </div>
+        <p className="text-sm text-muted-foreground italic">
+          Analysis not yet generated. It will appear once the bill text has been processed.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-6 space-y-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Cpu className="w-4 h-4 text-primary" />
+          <h2 className="font-semibold">AI Analysis</h2>
+        </div>
+        <span className="text-xs text-muted-foreground">
+          {brief.llm_provider}/{brief.llm_model} · {formatDate(brief.created_at)}
+        </span>
+      </div>
+
+      {brief.summary && (
+        <div>
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Summary</h3>
+          <p className="text-sm leading-relaxed whitespace-pre-line">{brief.summary}</p>
+        </div>
+      )}
+
+      {brief.key_points && brief.key_points.length > 0 && (
+        <div>
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Key Points</h3>
+          <ul className="space-y-1.5">
+            {brief.key_points.map((point, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm">
+                <CheckCircle className="w-3.5 h-3.5 mt-0.5 text-green-500 shrink-0" />
+                <span>{point}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {brief.risks && brief.risks.length > 0 && (
+        <div>
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Risks & Concerns</h3>
+          <ul className="space-y-1.5">
+            {brief.risks.map((risk, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm">
+                <AlertTriangle className="w-3.5 h-3.5 mt-0.5 text-yellow-500 shrink-0" />
+                <span>{risk}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {brief.deadlines && brief.deadlines.length > 0 && (
+        <div>
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Deadlines</h3>
+          <ul className="space-y-1.5">
+            {brief.deadlines.map((d, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm">
+                <Clock className="w-3.5 h-3.5 mt-0.5 text-blue-500 shrink-0" />
+                <span>
+                  {d.date ? <strong>{formatDate(d.date)}: </strong> : ""}
+                  {d.description}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {brief.topic_tags && brief.topic_tags.length > 0 && (
+        <div className="flex items-center gap-2 pt-1 border-t border-border flex-wrap">
+          <Tag className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+          {brief.topic_tags.map((tag) => (
+            <span
+              key={tag}
+              className="text-xs px-2 py-1 bg-accent text-accent-foreground rounded-full"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/bills/ActionTimeline.tsx

@@ -0,0 +1,47 @@
+import { Clock } from "lucide-react";
+import { BillAction } from "@/lib/types";
+import { formatDate } from "@/lib/utils";
+
+interface ActionTimelineProps {
+  actions: BillAction[];
+}
+
+export function ActionTimeline({ actions }: ActionTimelineProps) {
+  if (!actions || actions.length === 0) {
+    return (
+      <div className="bg-card border border-border rounded-lg p-6">
+        <h2 className="font-semibold mb-3 flex items-center gap-2">
+          <Clock className="w-4 h-4" />
+          Action History
+        </h2>
+        <p className="text-sm text-muted-foreground italic">No actions recorded yet.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-6">
+      <h2 className="font-semibold mb-4 flex items-center gap-2">
+        <Clock className="w-4 h-4" />
+        Action History
+        <span className="text-xs text-muted-foreground font-normal">({actions.length})</span>
+      </h2>
+
+      <div className="relative">
+        <div className="absolute left-2 top-0 bottom-0 w-px bg-border" />
+        <ul className="space-y-4 pl-7">
+          {actions.map((action, i) => (
+            <li key={action.id} className="relative">
+              <div className="absolute -left-5 top-1.5 w-2 h-2 rounded-full bg-primary/60 border-2 border-background" />
+              <div className="text-xs text-muted-foreground mb-0.5">
+                {formatDate(action.action_date)}
+                {action.chamber && ` · ${action.chamber}`}
+              </div>
+              <p className="text-sm leading-snug">{action.action_text}</p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

frontend/components/bills/NewsPanel.tsx

@@ -0,0 +1,46 @@
+import { ExternalLink, Newspaper } from "lucide-react";
+import { NewsArticle } from "@/lib/types";
+import { formatDate } from "@/lib/utils";
+
+interface NewsPanelProps {
+  articles?: NewsArticle[];
+}
+
+export function NewsPanel({ articles }: NewsPanelProps) {
+  return (
+    <div className="bg-card border border-border rounded-lg p-4">
+      <h3 className="font-semibold text-sm flex items-center gap-2 mb-3">
+        <Newspaper className="w-4 h-4" />
+        Related News
+        {articles && articles.length > 0 && (
+          <span className="text-xs text-muted-foreground font-normal">({articles.length})</span>
+        )}
+      </h3>
+
+      {!articles || articles.length === 0 ? (
+        <p className="text-xs text-muted-foreground italic">No news articles found yet.</p>
+      ) : (
+        <ul className="space-y-3">
+          {articles.slice(0, 8).map((article) => (
+            <li key={article.id} className="group">
+              <a
+                href={article.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block hover:text-primary transition-colors"
+              >
+                <p className="text-xs font-medium line-clamp-2 leading-snug group-hover:underline">
+                  {article.headline}
+                  <ExternalLink className="w-3 h-3 inline ml-1 opacity-50" />
+                </p>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  {article.source} · {formatDate(article.published_at)}
+                </p>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

frontend/components/bills/TrendChart.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+} from "recharts";
+import { TrendScore } from "@/lib/types";
+import { formatDate } from "@/lib/utils";
+
+interface TrendChartProps {
+  data?: TrendScore[];
+}
+
+export function TrendChart({ data }: TrendChartProps) {
+  const chartData = data?.map((d) => ({
+    date: new Date(d.score_date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+    score: Math.round(d.composite_score),
+    news: d.newsapi_count,
+    gnews: d.gnews_count,
+  })) ?? [];
+
+  const latest = data?.[data.length - 1]?.composite_score;
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-4">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-semibold text-sm flex items-center gap-2">
+          <TrendingUp className="w-4 h-4" />
+          Public Interest
+        </h3>
+        {latest !== undefined && (
+          <span className="text-2xl font-bold tabular-nums">{Math.round(latest)}</span>
+        )}
+      </div>
+
+      {chartData.length === 0 ? (
+        <p className="text-xs text-muted-foreground italic text-center py-8">
+          Trend data not yet available.
+        </p>
+      ) : (
+        <ResponsiveContainer width="100%" height={180}>
+          <LineChart data={chartData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+            <XAxis
+              dataKey="date"
+              tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+              tickLine={false}
+            />
+            <YAxis
+              domain={[0, 100]}
+              tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
+              tickLine={false}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "hsl(var(--card))",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "6px",
+                fontSize: "12px",
+              }}
+            />
+            <Line
+              type="monotone"
+              dataKey="score"
+              stroke="hsl(var(--primary))"
+              strokeWidth={2}
+              dot={false}
+              name="Zeitgeist Score"
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      )}
+
+      <div className="mt-3 flex gap-4 text-xs text-muted-foreground">
+        <span>Score: 0–100 composite</span>
+        <span>NewsAPI + Google News + Trends</span>
+      </div>
+    </div>
+  );
+}

frontend/components/shared/BillCard.tsx

@@ -0,0 +1,81 @@
+import Link from "next/link";
+import { TrendingUp, Calendar, User } from "lucide-react";
+import { Bill } from "@/lib/types";
+import { billLabel, cn, formatDate, partyBadgeColor, trendColor } from "@/lib/utils";
+import { FollowButton } from "./FollowButton";
+
+interface BillCardProps {
+  bill: Bill;
+  compact?: boolean;
+}
+
+export function BillCard({ bill, compact = false }: BillCardProps) {
+  const label = billLabel(bill.bill_type, bill.bill_number);
+  const score = bill.latest_trend?.composite_score;
+  const tags = bill.latest_brief?.topic_tags?.slice(0, 3) || [];
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 hover:border-primary/30 transition-colors">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+            <span className="text-xs font-mono font-semibold text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+              {label}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {bill.chamber}
+            </span>
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="text-xs px-1.5 py-0.5 rounded-full bg-accent text-accent-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+
+          <Link href={`/bills/${bill.bill_id}`}>
+            <h3 className="text-sm font-medium leading-snug hover:text-primary transition-colors line-clamp-2">
+              {bill.short_title || bill.title || "Untitled Bill"}
+            </h3>
+          </Link>
+
+          {!compact && bill.sponsor && (
+            <div className="flex items-center gap-1.5 mt-1.5 text-xs text-muted-foreground">
+              <User className="w-3 h-3" />
+              <Link href={`/members/${bill.sponsor.bioguide_id}`} className="hover:text-foreground transition-colors">
+                {bill.sponsor.name}
+              </Link>
+              {bill.sponsor.party && (
+                <span className={cn("px-1 py-0.5 rounded text-xs font-medium", partyBadgeColor(bill.sponsor.party))}>
+                  {bill.sponsor.party}
+                </span>
+              )}
+              {bill.sponsor.state && (
+                <span>{bill.sponsor.state}</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col items-end gap-2 shrink-0">
+          <FollowButton type="bill" value={bill.bill_id} />
+          {score !== undefined && score > 0 && (
+            <div className={cn("flex items-center gap-1 text-xs font-medium", trendColor(score))}>
+              <TrendingUp className="w-3 h-3" />
+              {Math.round(score)}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!compact && bill.latest_action_text && (
+        <p className="mt-2 text-xs text-muted-foreground line-clamp-2 border-t border-border pt-2">
+          <Calendar className="w-3 h-3 inline mr-1" />
+          {formatDate(bill.latest_action_date)} — {bill.latest_action_text}
+        </p>
+      )}
+    </div>
+  );
+}

frontend/components/shared/FollowButton.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Heart } from "lucide-react";
+import { useAddFollow, useIsFollowing, useRemoveFollow } from "@/lib/hooks/useFollows";
+import { cn } from "@/lib/utils";
+
+interface FollowButtonProps {
+  type: "bill" | "member" | "topic";
+  value: string;
+  label?: string;
+}
+
+export function FollowButton({ type, value, label }: FollowButtonProps) {
+  const existing = useIsFollowing(type, value);
+  const add = useAddFollow();
+  const remove = useRemoveFollow();
+
+  const isFollowing = !!existing;
+  const isPending = add.isPending || remove.isPending;
+
+  const handleClick = () => {
+    if (isFollowing && existing) {
+      remove.mutate(existing.id);
+    } else {
+      add.mutate({ type, value });
+    }
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      disabled={isPending}
+      className={cn(
+        "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
+        isFollowing
+          ? "bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
+          : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
+      )}
+    >
+      <Heart className={cn("w-3.5 h-3.5", isFollowing && "fill-current")} />
+      {isFollowing ? "Unfollow" : label || "Follow"}
+    </button>
+  );
+}

frontend/components/shared/Sidebar.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  LayoutDashboard,
+  FileText,
+  Users,
+  Tags,
+  Heart,
+  Settings,
+  Landmark,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ThemeToggle } from "./ThemeToggle";
+
+const NAV = [
+  { href: "/", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/bills", label: "Bills", icon: FileText },
+  { href: "/members", label: "Members", icon: Users },
+  { href: "/topics", label: "Topics", icon: Tags },
+  { href: "/following", label: "Following", icon: Heart },
+  { href: "/settings", label: "Settings", icon: Settings },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="w-56 shrink-0 border-r border-border bg-card flex flex-col">
+      <div className="p-4 border-b border-border flex items-center gap-2">
+        <Landmark className="w-5 h-5 text-primary" />
+        <span className="font-semibold text-sm">PocketVeto</span>
+      </div>
+
+      <nav className="flex-1 p-3 space-y-1">
+        {NAV.map(({ href, label, icon: Icon }) => {
+          const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
+                active
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+              )}
+            >
+              <Icon className="w-4 h-4 shrink-0" />
+              {label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="p-3 border-t border-border flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">Theme</span>
+        <ThemeToggle />
+      </div>
+    </aside>
+  );
+}

frontend/components/shared/ThemeToggle.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className="p-1.5 rounded-md hover:bg-accent transition-colors text-muted-foreground hover:text-foreground"
+      aria-label="Toggle theme"
+    >
+      <Sun className="w-4 h-4 hidden dark:block" />
+      <Moon className="w-4 h-4 dark:hidden" />
+    </button>
+  );
+}