feat(web): refine spacing and layout in frame component and agents page

- Enhanced vertical rhythm in the frame component by adjusting padding values for header, content, and footer, ensuring consistent alignment and improved readability.
- Updated the agents page to incorporate a new tab structure for better organization of agent statuses, along with a refined search and filter functionality to enhance user experience.
- Removed unused imports and streamlined the code for better maintainability and performance.

These changes contribute to a more cohesive and user-friendly interface across the application.

apps/web/src/components/agents/agent-card.tsx

@@ -0,0 +1,174 @@
+import type { Agent } from '@evofw/shared'
+import {
+  AgentPlatformIcon,
+  platformLabel,
+} from '@/components/agents/agent-platform-icon'
+import { StatusBadge } from '@/components/status-badge'
+import { Badge } from '@/components/reui/badge'
+import { Frame, FramePanel } from '@/components/reui/frame'
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from '@evofw/ui/components/item'
+import { Separator } from '@evofw/ui/components/separator'
+import { cn } from '@evofw/ui/lib/utils'
+
+/**
+ * Agent catalog card — hybrid card-3 header + stats strip + stats-12 values.
+ * Preview: https://reui.io/preview/base/card-3 · https://reui.io/preview/base/stats-12
+ * Reference: apps/web/src/components/blocks/card-3/components/investor-card.tsx
+ */
+
+const packetFmt = new Intl.NumberFormat('ru-RU', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+const seenFmt = new Intl.DateTimeFormat('ru-RU', {
+  day: '2-digit',
+  month: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+})
+
+function formatPackets(n: number | undefined, hasApply: boolean): string {
+  if (!hasApply || n === undefined) return '—'
+  return packetFmt.format(n)
+}
+
+function formatShort(iso: string | null | undefined): string {
+  if (!iso) return '—'
+  const t = Date.parse(iso)
+  if (Number.isNaN(t)) return '—'
+  return seenFmt.format(t)
+}
+
+type AgentCardProps = {
+  agent: Agent
+  selected?: boolean
+  onSelect: (id: string) => void
+}
+
+export function AgentCard({ agent, selected, onSelect }: AgentCardProps) {
+  const hasApply = Boolean(agent.last_apply_at || agent.last_apply_status)
+  const dropped = formatPackets(agent.last_apply_packets_dropped, hasApply)
+  const accepted = formatPackets(agent.last_apply_packets_accepted, hasApply)
+  const seen = formatShort(agent.last_seen_at ?? agent.last_apply_at)
+  const defaultAction =
+    agent.default_action === 'drop' ? 'Drop' : 'Accept'
+  const subtitle = [
+    agent.hostname,
+    platformLabel(agent.platform),
+    `gen ${agent.policy_generation}`,
+  ]
+    .filter(Boolean)
+    .join(' · ')
+
+  const stats = [
+    {
+      label: 'Dropped',
+      value: dropped,
+      valueClass: dropped === '—' ? undefined : 'text-warning',
+    },
+    {
+      label: 'Accepted',
+      value: accepted,
+      valueClass: accepted === '—' ? undefined : 'text-success',
+    },
+    {
+      label: 'Seen',
+      value: seen,
+      valueClass: 'text-muted-foreground',
+    },
+  ] as const
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(agent.id)}
+      className={cn(
+        'w-full text-left outline-none',
+        'focus-visible:ring-ring rounded-[calc(var(--frame-radius)+2px)] focus-visible:ring-2 focus-visible:ring-offset-2',
+      )}
+    >
+      <Frame
+        spacing="xs"
+        className={cn(
+          'bg-muted/50 dark:bg-muted/10 w-full transition-shadow',
+          selected
+            ? 'ring-primary/30 ring-2'
+            : 'hover:ring-border hover:ring-1',
+        )}
+      >
+        <FramePanel className="text-card-foreground isolate flex flex-col gap-4 px-4 py-4">
+          <div className="flex items-start gap-3">
+            <AgentPlatformIcon platform={agent.platform} />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+              <div className="flex flex-wrap items-center gap-2">
+                <h3 className="truncate text-sm leading-tight font-semibold">
+                  {agent.name}
+                </h3>
+                <StatusBadge status={agent.status} />
+                <Badge
+                  variant={
+                    agent.default_action === 'drop'
+                      ? 'warning-light'
+                      : 'success-light'
+                  }
+                  size="xs"
+                  radius="full"
+                >
+                  {defaultAction}
+                </Badge>
+              </div>
+              <p className="text-muted-foreground truncate text-xs">
+                {subtitle}
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-muted/60 grid grid-cols-[1fr_auto_1fr_auto_1fr] overflow-hidden rounded-lg border">
+            {stats.map((stat, index) => (
+              <div key={stat.label} className="contents">
+                <Item
+                  variant="muted"
+                  size="sm"
+                  className="justify-center bg-transparent px-2 py-3"
+                >
+                  <ItemContent className="items-center gap-1">
+                    <ItemTitle
+                      className={cn(
+                        'text-sm leading-none font-medium tabular-nums',
+                        stat.valueClass,
+                      )}
+                    >
+                      {stat.value}
+                    </ItemTitle>
+                    <ItemDescription className="line-clamp-1 text-xs leading-tight">
+                      {stat.label}
+                    </ItemDescription>
+                  </ItemContent>
+                </Item>
+                {index < stats.length - 1 ? (
+                  <Separator orientation="vertical" className="my-2.5" />
+                ) : null}
+              </div>
+            ))}
+          </div>
+
+          {agent.last_apply_error ? (
+            <p className="text-destructive truncate text-xs">
+              {agent.last_apply_error}
+            </p>
+          ) : agent.last_apply_kernel_method ? (
+            <p className="text-muted-foreground truncate text-xs">
+              kernel · {agent.last_apply_kernel_method}
+            </p>
+          ) : null}
+        </FramePanel>
+      </Frame>
+    </button>
+  )
+}

apps/web/src/components/agents/agent-cards-grid.tsx

@@ -0,0 +1,65 @@
+import type { Agent } from '@evofw/shared'
+import { AgentCard } from '@/components/agents/agent-card'
+import { EmptyState } from '@/components/empty-state'
+import { Skeleton } from '@evofw/ui/components/skeleton'
+import type { ReactNode } from 'react'
+
+/**
+ * Agent catalog grid.
+ * Preview DNA: https://reui.io/preview/base/card-3 · solution-agents-1
+ */
+
+type AgentCardsGridProps = {
+  agents: Agent[]
+  selectedId?: string | null
+  onSelect: (id: string) => void
+  isLoading?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyAction?: ReactNode
+}
+
+export function AgentCardsGrid({
+  agents,
+  selectedId,
+  onSelect,
+  isLoading,
+  emptyTitle = 'Нет агентов',
+  emptyDescription,
+  emptyAction,
+}: AgentCardsGridProps) {
+  if (isLoading) {
+    return (
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-44 w-full rounded-xl" />
+        ))}
+      </div>
+    )
+  }
+
+  if (agents.length === 0) {
+    return (
+      <EmptyState
+        title={emptyTitle}
+        description={emptyDescription}
+        action={emptyAction}
+        centered={false}
+        className="py-12"
+      />
+    )
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      {agents.map((agent) => (
+        <AgentCard
+          key={agent.id}
+          agent={agent}
+          selected={selectedId === agent.id}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  )
+}

apps/web/src/components/agents/agent-detail-sheet.tsx

@@ -0,0 +1,323 @@
+import { Link } from '@tanstack/react-router'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { Check, CircleAlertIcon, Copy, ShieldOff } from 'lucide-react'
+import type { Agent } from '@evofw/shared'
+import {
+  agentPreviewQueryOptions,
+  agentsQueryOptions,
+} from '@/queries'
+import { apiFetch } from '@/lib/api'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+import {
+  AgentPlatformIcon,
+  platformLabel,
+} from '@/components/agents/agent-platform-icon'
+import { StatusBadge } from '@/components/status-badge'
+import { DetailPanel } from '@/components/reui-kit'
+import { Badge } from '@/components/reui/badge'
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from '@/components/reui/alert'
+import { Button } from '@evofw/ui/components/button'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@evofw/ui/components/sheet'
+import { Skeleton } from '@evofw/ui/components/skeleton'
+
+/**
+ * Agent preview sheet — VPS topology detail DNA, wider for policy summary.
+ * Preview: https://reui.io/preview/base/components/c-sheet-1
+ * DNA: vps-tracker VpsDetailSheet
+ */
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="border-border/60 flex items-baseline justify-between gap-3 border-b py-2 last:border-0">
+      <span className="text-muted-foreground text-xs">{label}</span>
+      <span className="text-right text-sm break-all">{value}</span>
+    </div>
+  )
+}
+
+const packetFmt = new Intl.NumberFormat('ru-RU')
+
+function formatWhen(iso?: string | null): string {
+  if (!iso) return '—'
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return iso
+  return d.toLocaleString('ru-RU')
+}
+
+type AgentDetailSheetProps = {
+  agentId: string | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function AgentDetailSheet({
+  agentId,
+  open,
+  onOpenChange,
+}: AgentDetailSheetProps) {
+  const qc = useQueryClient()
+  const { copyToClipboard } = useCopyToClipboard()
+  const agentsQ = useQuery({
+    ...agentsQueryOptions(),
+    enabled: open,
+  })
+  const agent = (agentsQ.data?.items ?? []).find((a) => a.id === agentId) as
+    | Agent
+    | undefined
+
+  const previewQ = useQuery({
+    ...agentPreviewQueryOptions(agentId ?? ''),
+    enabled: open && Boolean(agentId),
+  })
+
+  const approve = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/agents/${agentId}/approve`, { method: 'POST' }),
+    onSuccess: () => {
+      toast.success('Агент одобрен')
+      void qc.invalidateQueries({ queryKey: ['agents'] })
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const revoke = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/agents/${agentId}/revoke`, { method: 'POST' }),
+    onSuccess: () => {
+      toast.success('Агент отозван')
+      void qc.invalidateQueries({ queryKey: ['agents'] })
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const subtitle = agent
+    ? [
+        agent.hostname,
+        platformLabel(agent.platform),
+        `gen ${agent.policy_generation}`,
+      ]
+        .filter(Boolean)
+        .join(' · ')
+    : 'Агент не найден'
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-2xl"
+      >
+        <SheetHeader className="border-border shrink-0 border-b px-4 py-4">
+          <div className="flex items-start gap-3">
+            {agent ? (
+              <AgentPlatformIcon platform={agent.platform} />
+            ) : null}
+            <div className="flex min-w-0 flex-1 flex-col gap-1">
+              <SheetTitle className="truncate">
+                {agent?.name ?? 'Агент'}
+              </SheetTitle>
+              <SheetDescription>{subtitle}</SheetDescription>
+            </div>
+          </div>
+        </SheetHeader>
+
+        {!agentId || agentsQ.isLoading ? (
+          <div className="flex flex-col gap-4 p-4">
+            <Skeleton className="h-8 w-40" />
+            <Skeleton className="h-40 w-full" />
+          </div>
+        ) : !agent ? (
+          <p className="text-muted-foreground p-4 text-sm">
+            Агент удалён или недоступен.
+          </p>
+        ) : (
+          <div className="flex flex-col gap-4 p-4">
+            <div className="flex flex-wrap items-center gap-2">
+              <StatusBadge status={agent.status} />
+              <Badge
+                variant={
+                  agent.default_action === 'drop'
+                    ? 'warning-light'
+                    : 'success-light'
+                }
+                size="sm"
+                radius="full"
+              >
+                {agent.default_action === 'drop' ? 'Drop' : 'Accept'}
+              </Badge>
+            </div>
+
+            {agent.last_apply_error ? (
+              <Alert variant="destructive">
+                <CircleAlertIcon />
+                <AlertTitle>Ошибка apply</AlertTitle>
+                <AlertDescription>{agent.last_apply_error}</AlertDescription>
+              </Alert>
+            ) : null}
+
+            <DetailPanel>
+              <DetailPanel.Section title="Apply">
+                <div className="border-border rounded-lg border px-3">
+                  <Row
+                    label="Last apply"
+                    value={formatWhen(agent.last_apply_at)}
+                  />
+                  <Row
+                    label="Status"
+                    value={agent.last_apply_status ?? '—'}
+                  />
+                  <Row
+                    label="Kernel"
+                    value={agent.last_apply_kernel_method ?? '—'}
+                  />
+                  <Row
+                    label="Dropped"
+                    value={
+                      agent.last_apply_at
+                        ? packetFmt.format(
+                            agent.last_apply_packets_dropped ?? 0,
+                          )
+                        : '—'
+                    }
+                  />
+                  <Row
+                    label="Accepted"
+                    value={
+                      agent.last_apply_at
+                        ? packetFmt.format(
+                            agent.last_apply_packets_accepted ?? 0,
+                          )
+                        : '—'
+                    }
+                  />
+                </div>
+              </DetailPanel.Section>
+
+              <DetailPanel.Section title="Политика">
+                <div className="border-border rounded-lg border px-3">
+                  <Row
+                    label="Если не совпало"
+                    value={
+                      agent.default_action === 'drop' ? 'Drop' : 'Accept'
+                    }
+                  />
+                  {previewQ.isLoading ? (
+                    <div className="py-2">
+                      <Skeleton className="h-4 w-full" />
+                    </div>
+                  ) : previewQ.data ? (
+                    <>
+                      <Row
+                        label="Наборы"
+                        value={String(previewQ.data.summary.sets)}
+                      />
+                      <Row
+                        label="CIDR блок"
+                        value={String(previewQ.data.summary.cidrs_deny)}
+                      />
+                      <Row
+                        label="CIDR accept"
+                        value={String(previewQ.data.summary.cidrs_allow)}
+                      />
+                      <Row
+                        label="Конфликты"
+                        value={String(
+                          previewQ.data.summary.conflicts_dropped,
+                        )}
+                      />
+                      <Row
+                        label="Apply version"
+                        value={String(previewQ.data.apply_version)}
+                      />
+                    </>
+                  ) : (
+                    <Row label="Preview" value="недоступен" />
+                  )}
+                </div>
+              </DetailPanel.Section>
+
+              <DetailPanel.Section title="Identity">
+                <div className="border-border rounded-lg border px-3">
+                  <Row label="Hostname" value={agent.hostname ?? '—'} />
+                  <Row label="Last seen IP" value={agent.last_seen_ip ?? '—'} />
+                  <Row
+                    label="Last seen"
+                    value={formatWhen(agent.last_seen_at)}
+                  />
+                  <Row
+                    label="Client"
+                    value={agent.client_version ?? '—'}
+                  />
+                  <Row label="Token" value={agent.token_prefix} />
+                  <Row label="Created" value={formatWhen(agent.created_at)} />
+                  <Row
+                    label="Approved"
+                    value={formatWhen(agent.approved_at)}
+                  />
+                </div>
+              </DetailPanel.Section>
+            </DetailPanel>
+
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-wrap gap-2">
+                {agent.status === 'pending' ? (
+                  <Button
+                    size="sm"
+                    disabled={approve.isPending}
+                    onClick={() => approve.mutate()}
+                  >
+                    <Check data-icon="inline-start" />
+                    Approve
+                  </Button>
+                ) : null}
+                {agent.status === 'approved' ? (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    disabled={revoke.isPending}
+                    onClick={() => revoke.mutate()}
+                  >
+                    <ShieldOff data-icon="inline-start" />
+                    Revoke
+                  </Button>
+                ) : null}
+                {agent.install_curl ? (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      copyToClipboard(agent.install_curl!)
+                      toast.success('Скопировано')
+                    }}
+                  >
+                    <Copy data-icon="inline-start" />
+                    Install
+                  </Button>
+                ) : null}
+              </div>
+              <Button
+                size="lg"
+                className="w-full"
+                render={
+                  <Link to="/agents/$id" params={{ id: agent.id }} />
+                }
+              >
+                Открыть карточку агента
+              </Button>
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  )
+}

apps/web/src/components/blocks/card-3/components/data.tsx

@@ -0,0 +1,64 @@
+import { type ReactNode } from "react"
+import { BarChart3Icon, WalletIcon, CircleDollarSignIcon } from "lucide-react"
+
+export interface StatItem {
+  value: string
+  label: string
+}
+
+export interface FundingSource {
+  name: string
+  amount: string
+  icon: ReactNode
+  tileClassName: string
+}
+
+export const PROFILE = {
+  name: "Mara Alves",
+  status: "Open to Proposals",
+  email: "[email protected]",
+  avatarSrc:
+    "https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=160&h=160&dpr=2&q=80",
+}
+
+export const STATS: StatItem[] = [
+  {
+    value: "87",
+    label: "Deals",
+  },
+  {
+    value: "$7.2M",
+    label: "Avg. Ticket",
+  },
+  {
+    value: "$415M",
+    label: "Total Fund",
+  },
+]
+
+export const FUNDING_SOURCES: FundingSource[] = [
+  {
+    name: "Northline Ventures",
+    amount: "$7,840,000",
+    tileClassName: "bg-invert text-invert-foreground",
+    icon: (
+      <BarChart3Icon aria-hidden="true" />
+    ),
+  },
+  {
+    name: "Bluepeak Capital",
+    amount: "$3,260,000",
+    tileClassName: "bg-[oklch(0.54_0.25_292)] text-[oklch(0.98_0.01_292)]",
+    icon: (
+      <WalletIcon aria-hidden="true" />
+    ),
+  },
+  {
+    name: "Everfield Equity",
+    amount: "$1,180,000",
+    tileClassName: "bg-[oklch(0.78_0.18_79)] text-[oklch(0.99_0.01_88)]",
+    icon: (
+      <CircleDollarSignIcon aria-hidden="true" />
+    ),
+  },
+]

apps/web/src/components/blocks/card-3/components/investor-card.tsx

@@ -0,0 +1,150 @@
+import { type ReactNode } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Frame, FramePanel } from "@/components/reui/frame"
+
+import { cn } from "@evofw/ui/lib/utils"
+import { AspectRatio } from "@evofw/ui/components/aspect-ratio"
+import { Button } from "@evofw/ui/components/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "@evofw/ui/components/item"
+import { Separator } from "@evofw/ui/components/separator"
+import { FUNDING_SOURCES, PROFILE, STATS } from "./data"
+import { CircleCheckIcon, MessageSquareIcon } from "lucide-react"
+
+function FundingIcon({
+  className,
+  children,
+}: {
+  className: string
+  children: ReactNode
+}) {
+  return (
+    <span
+      className={cn(
+        "border-background flex size-8 shrink-0 items-center justify-center rounded-lg border-2 shadow-[0_1px_3px_0_oklch(0.2_0.01_260/0.16)] [&_svg]:size-4",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export function InvestorCard() {
+  return (
+    <Frame
+      spacing="xs"
+      className="bg-muted/50 dark:bg-muted/10 w-full max-w-[408px]"
+    >
+      <FramePanel className="text-card-foreground isolate px-4 py-4 sm:px-5">
+        <div className="relative z-10 flex flex-col gap-5">
+          {/* Header */}
+          <div className="relative isolate overflow-visible">
+            <div className="relative z-10 flex items-center gap-5">
+              <AspectRatio
+                ratio={1}
+                className="border-background bg-muted/60 size-20 shrink-0 overflow-hidden rounded-lg border-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border"
+              >
+                <img
+                  src={PROFILE.avatarSrc}
+                  alt={PROFILE.name}
+                  className="size-full rounded-lg object-cover object-top"
+                  loading="lazy"
+                />
+              </AspectRatio>
+
+              <div className="flex min-w-0 flex-col gap-2">
+                <h2 className="truncate text-sm leading-tight font-semibold">
+                  {PROFILE.name}
+                </h2>
+                <Badge variant="success-light" radius="full">
+                  <CircleCheckIcon aria-hidden="true" />
+                  {PROFILE.status}
+                </Badge>
+                <p className="text-muted-foreground truncate text-xs">
+                  {PROFILE.email}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Stats */}
+          <div className="bg-muted/60 grid grid-cols-[1fr_auto_1fr_auto_1fr] overflow-hidden rounded-lg border">
+            {STATS.map((stat, index) => (
+              <div key={stat.label} className="contents">
+                <Item
+                  variant="muted"
+                  size="sm"
+                  className="justify-center bg-transparent px-2 py-3"
+                >
+                  <ItemContent className="items-center gap-1">
+                    <ItemTitle className="text-sm leading-none font-medium tabular-nums">
+                      {stat.value}
+                    </ItemTitle>
+                    <ItemDescription className="line-clamp-1 text-xs leading-tight">
+                      {stat.label}
+                    </ItemDescription>
+                  </ItemContent>
+                </Item>
+                {index < STATS.length - 1 ? (
+                  <Separator orientation="vertical" className="my-2.5" />
+                ) : null}
+              </div>
+            ))}
+          </div>
+
+          {/* Funding Sources */}
+          <ItemGroup className="gap-0!">
+            {FUNDING_SOURCES.map((source, index) => (
+              <div key={source.name} className="contents">
+                <Item size="sm" className="flex-nowrap px-0 py-0">
+                  <ItemMedia>
+                    <FundingIcon className={source.tileClassName}>
+                      {source.icon}
+                    </FundingIcon>
+                  </ItemMedia>
+
+                  <ItemContent className="min-w-0">
+                    <ItemTitle className="w-full min-w-0">
+                      <span className="truncate text-sm leading-5 font-medium">
+                        {source.name}
+                      </span>
+                    </ItemTitle>
+                  </ItemContent>
+
+                  <ItemActions className="shrink-0">
+                    <span className="text-sm leading-5 font-medium tabular-nums">
+                      {source.amount}
+                    </span>
+                  </ItemActions>
+                </Item>
+                {index < FUNDING_SOURCES.length - 1 ? (
+                  <ItemSeparator className="my-2.5 border-t border-dashed bg-transparent" />
+                ) : null}
+              </div>
+            ))}
+          </ItemGroup>
+
+          {/* Action */}
+          <Button
+            type="button"
+            variant="outline"
+            size="lg"
+            className="h-10! w-full"
+          >
+            <MessageSquareIcon aria-hidden="true" />
+            Send Funding Proposal
+          </Button>
+        </div>
+      </FramePanel>
+    </Frame>
+  )
+}

apps/web/src/components/blocks/card-3/page.tsx

@@ -0,0 +1,9 @@
+import { InvestorCard } from "./components/investor-card"
+
+export function Page() {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center p-6">
+      <InvestorCard />
+    </div>
+  )
+}

apps/web/src/components/reui/frame.tsx

@@ -34,12 +34,20 @@ const frameVariants = cva(
           "[--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)] border border-[var(--frame-border-color)] bg-background bg-clip-padding",
         ghost: "",
       },
+      // Header/footer vertical rhythm is tighter than the panel body's, and
+      // the gap widens as the frame grows: the bars read as chrome rather than
+      // as another content block. py ladder is 0.5 / 1.5 / 2 / 2.5 against a
+      // body py of 2 / 3.5 / 4 / 5. These vars are style-agnostic - no
+      // style-*.css overrides them - so this single ladder drives all shadcn
+      // styles. `px` is deliberately left level with the body so header,
+      // content and footer stay left-aligned. `xs` holds at 0.5 (2px): it is
+      // the practical floor, since anything lower stops reading as padding.
       spacing: {
-        xs: "[--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(2)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(1)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(1)] (3)] (1)] (3)] (3)]",
-        sm: "[--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(2.5)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(2.5)] (2)] (2)] (2)]",
+        xs: "[--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(2)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(0.5)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(0.5)]",
+        sm: "[--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(1.5)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(1.5)]",
         default:
-          "[--frame-panel-px-base:--spacing(4)] [--frame-panel-py-base:--spacing(4)] [--frame-panel-header-px-base:--spacing(4)] [--frame-panel-header-py-base:--spacing(3)] [--frame-panel-footer-px-base:--spacing(4)] [--frame-panel-footer-py-base:--spacing(3)] (2)] (2)] (2)]",
-        lg: "[--frame-panel-px-base:--spacing(5)] [--frame-panel-py-base:--spacing(5)] [--frame-panel-header-px-base:--spacing(5)] [--frame-panel-header-py-base:--spacing(4)] [--frame-panel-footer-px-base:--spacing(5)] [--frame-panel-footer-py-base:--spacing(4)] (2)] (2)] (2)]",
+          "[--frame-panel-px-base:--spacing(4)] [--frame-panel-py-base:--spacing(4)] [--frame-panel-header-px-base:--spacing(4)] [--frame-panel-header-py-base:--spacing(2)] [--frame-panel-footer-px-base:--spacing(4)] [--frame-panel-footer-py-base:--spacing(2)]",
+        lg: "[--frame-panel-px-base:--spacing(5)] [--frame-panel-py-base:--spacing(5)] [--frame-panel-header-px-base:--spacing(5)] [--frame-panel-header-py-base:--spacing(2.5)] [--frame-panel-footer-px-base:--spacing(5)] [--frame-panel-footer-py-base:--spacing(2.5)]",
       },
       stacked: {
         true: [