@notis_ai/cli 0.2.5 → 0.2.7

package/README.md

@@ -105,9 +105,9 @@ Examples:
 
 ### `npx --package @notis_ai/cli@latest -- notis apps verify [dir]`
 
-Headless render smoke each route in a stub-runtime harness.
+Validate every route and the production Store listing contract.
 
-When to use: After notis apps build, before deploy. Catches render-time crashes and missing runtime calls that the build step cannot detect.
+When to use: After notis apps screenshot, before deploy. Catches render-time crashes, missing runtime calls, and incomplete listing media that the build step cannot detect.
 
 Options:
 - `--routes <slugs>` — Comma-separated route slugs. Default: every route in manifest.
@@ -125,23 +125,25 @@ Examples:
 
 ### `npx --package @notis_ai/cli@latest -- notis apps screenshot [dir]`
 
-Capture listing screenshots of each route via the headless harness.
+Capture configured listing route/scenario states via the headless harness.
 
-When to use: Generate metadata/screenshot-N.png for the App Store listing. Apps are icon-led (like Raycast) — there is no cover image, only these screenshots. Run before notis apps verify / deploy / publish.
+When to use: Generate the 3–6 declared metadata/screenshot-N.png files for the App Store listing. Apps are icon-led (like Raycast) — there is no cover image, only these screenshots. Each screenshot may set a focus selector to remove empty canvas and a light or dark theme that also controls its Store frame. Run before notis apps verify / deploy / publish.
 
 Options:
-- `--routes <slugs>` — Comma-separated route slugs. Default: every route in manifest.
+- `--routes <slugs>` — Comma-separated route slugs. Default: every configured screenshot state.
 - `--port <n>` — Loopback port. Default: auto-pick.
 - `--width <px>` — Viewport width. Default: 2000.
 - `--height <px>` — Viewport height. Default: 1250 (16:10).
 - `--output-dir <dir>` — Where to write screenshot-N.png. Default: metadata/.
 - `--mode <mode>` — stub | live. Default stub. Live renders against real data via the CLI JWT (requires a linked app), so screenshots show actual content instead of empty states.
+- `--raw` — Write the unframed harness capture instead of the default Store presentation.
 - `--skip-build` — Skip notis apps build; reuse existing .notis/output/.
 
 Examples:
-- `npx --package @notis_ai/cli@latest -- notis apps screenshot`
+- `npx --package @notis_ai/cli@latest -- notis apps screenshot  # honors notis.config.ts screenshot scenarios`
 - `npx --package @notis_ai/cli@latest -- notis apps screenshot --routes home,history`
 - `npx --package @notis_ai/cli@latest -- notis apps screenshot --mode live  # populated screenshots from real data`
+- `npx --package @notis_ai/cli@latest -- notis apps screenshot --raw  # diagnostic capture without Store framing`
 
 ### `npx --package @notis_ai/cli@latest -- notis apps link <app-id> [dir]`
 
@@ -184,6 +186,20 @@ Examples:
 - `npx --package @notis_ai/cli@latest -- notis apps deploy --app-id abc123`
 - `npx --package @notis_ai/cli@latest -- notis apps deploy --direct`
 
+### `npx --package @notis_ai/cli@latest -- notis apps publish [dir]`
+
+Submit the deployed app for Store review.
+
+When to use: After the user explicitly confirms the App Details page and Store listing are ready. Requires the current local project to match the latest deployed version.
+
+Options:
+- `--app-id <id>` — Override linked app ID.
+- `--confirm-ready` — Confirm the user approved the current App Details page for Store submission.
+
+Examples:
+- `npx --package @notis_ai/cli@latest -- notis apps publish --confirm-ready`
+- `npx --package @notis_ai/cli@latest -- notis apps publish ./my-app --confirm-ready`
+
 ### `npx --package @notis_ai/cli@latest -- notis apps doctor [dir]`
 
 Check project health and readiness.
@@ -238,6 +254,7 @@ When to use: Use this as the escape hatch for integrations or Notis tools withou
 
 Options:
 - `--arguments <json>` — JSON object, @file path, or - for stdin.
+- `--arguments-file <path>` — Read the JSON arguments object from a file.
 - `--file <argument-path=local-path>` — Upload a local file into a file-uploadable tool argument. Repeatable.
 - `--get-schema` — Display the tool parameter schema without executing.
 - `--dry-run` — Validate arguments against the tool schema without executing.
@@ -248,6 +265,7 @@ Examples:
 - `npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_QUERY --get-schema`
 - `npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_QUERY --dry-run --arguments '{"database_slug":"tasks","query":{}}'`
 - `npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_QUERY --arguments @query.json`
+- `npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_QUERY --arguments-file query.json`
 - `npx --package @notis_ai/cli@latest -- notis tools exec LOCAL_NOTIS_DATABASE_QUERY --arguments - < query.json`
 - `npx --package @notis_ai/cli@latest -- notis tools exec composio-dropbox-upload_file --arguments '{"path":"/target/in/dropbox.pdf"}' --file content=./Invoice.pdf`
 
@@ -265,13 +283,19 @@ Examples:
 
 ### `npx --package @notis_ai/cli@latest -- notis tools link <toolkit>`
 
-Get the URL to connect an integration toolkit.
+Connect or reconnect an integration toolkit.
 
-When to use: Use this when a tool requires authentication with an external service.
+When to use: Use this when a tool requires authentication or an active connection must be replaced.
+
+Options:
+- `--reconnect` — Replace the existing account instead of adding another connection.
+- `--connection-id <id>` — Exact connection id to replace when multiple accounts exist.
+- `--label <label>` — Account label for a new or replacement connection.
+- `--credentials <json>` — Credential JSON object, @file path, or - for stdin. Prefer stdin so secrets do not enter shell history.
 
 Examples:
 - `npx --package @notis_ai/cli@latest -- notis tools link github`
-- `npx --package @notis_ai/cli@latest -- notis tools link gmail --json`
+- `npx --package @notis_ai/cli@latest -- notis tools link dataforseo --reconnect --credentials - < credentials.json`
 
 
 ## Meta Commands

package/dist/scaffolds/notis-affiliate-prospects/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## [Affiliate recruiting control center] - 2026-07-23
+
+- Added the campaign dashboard, measurable affiliate pipeline, and priority queue.
+- Added responsive prospect and segment views.
+- Added local fixtures for every recruiting segment so the app can be tested before installation.

package/dist/scaffolds/notis-affiliate-prospects/README.md

@@ -0,0 +1,20 @@
+# Affiliate Prospects
+
+Local-first Notis app for monitoring the affiliate recruiting pipeline.
+
+The app is intentionally a read-only campaign surface. Notis automations and Codex workers own
+discovery, enrichment, outreach preparation, analytics reconciliation, and record updates. This
+keeps one source of truth while avoiding business logic in the UI.
+
+## Routes
+
+- Dashboard: KPIs, pipeline, priority queue, and segment coverage.
+- Prospects: responsive reference table for every lead and next action.
+- Segments: scorecards linked to the source-controlled segment playbooks.
+
+## Data
+
+The deployed app references `affiliate_prospects_1` and `affiliate_outreach_events_1`. Their
+canonical schema is documented in `campaign/affiliate-network/data-schema.md`. During local
+development the app uses deterministic mock prospects so it can be reviewed before any workspace
+installation.

package/dist/scaffolds/notis-affiliate-prospects/app/globals.css

@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.affiliate-app-shell {
+  container-type: inline-size;
+  padding: clamp(1rem, 2.5cqi, 2rem);
+  max-width: 1440px;
+  margin-inline: auto;
+}
+
+.affiliate-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
+}
+
+.affiliate-dashboard-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 940px) {
+  .affiliate-dashboard-grid {
+    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
+  }
+}
+
+.affiliate-data-table {
+  min-width: 900px;
+}
+
+@media (max-width: 767px) {
+  .affiliate-desktop-table {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .affiliate-mobile-cards {
+    display: none;
+  }
+}

package/dist/scaffolds/notis-affiliate-prospects/app/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import '@notis/sdk/styles.css';
+import './globals.css';
+
+export default function AppShell({ children }: { children: ReactNode }) {
+  return children;
+}

package/dist/scaffolds/notis-affiliate-prospects/app/page.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useNotisNavigation, useTopBarSearch } from '@notis/sdk';
+import {
+  ArrowClockwiseIcon,
+  ArrowRightIcon,
+  CheckCircleIcon,
+  CurrencyDollarIcon,
+  FunnelIcon,
+  PaperPlaneTiltIcon,
+  SparkleIcon,
+  UsersThreeIcon,
+} from '@phosphor-icons/react';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  PIPELINE,
+  SEGMENTS,
+  compactNumber,
+  money,
+  statusTone,
+  type AffiliateProspect,
+} from '@/lib/affiliate-data';
+import { useAffiliateProspects } from '@/lib/notis-tools';
+
+export default function DashboardPage() {
+  const { prospects, loading, error, refetch } = useAffiliateProspects();
+  const navigation = useNotisNavigation();
+  const [search, setSearch] = useState('');
+  const { setLoading } = useTopBarSearch({
+    value: search,
+    onChange: setSearch,
+    placeholder: 'Filter affiliate prospects…',
+  });
+  useEffect(() => setLoading(loading), [loading, setLoading]);
+
+  const filtered = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return prospects;
+    return prospects.filter((prospect) =>
+      [prospect.name, prospect.company, prospect.segment, prospect.status, prospect.source]
+        .join(' ')
+        .toLowerCase()
+        .includes(query),
+    );
+  }, [prospects, search]);
+
+  const metrics = useMemo(() => {
+    const qualified = prospects.filter((p) => p.fitScore >= 75 && p.status !== 'Disqualified').length;
+    const active = prospects.filter((p) => p.status === 'Activated').length;
+    const conversations = prospects.filter((p) =>
+      ['Replied', 'Interested', 'Applied', 'Activated'].includes(p.status),
+    ).length;
+    const mrr = prospects.reduce((sum, p) => sum + p.attributedMrr, 0);
+    return { qualified, active, conversations, mrr };
+  }, [prospects]);
+
+  const priority = useMemo(
+    () =>
+      [...filtered]
+        .filter((p) => !p.optedOut && !['Activated', 'Disqualified'].includes(p.status))
+        .sort((a, b) => b.fitScore - a.fitScore)
+        .slice(0, 6),
+    [filtered],
+  );
+
+  const segmentRows = useMemo(
+    () =>
+      SEGMENTS.map((segment) => {
+        const rows = prospects.filter((p) => p.segment === segment.name);
+        const engaged = rows.filter((p) => ['Replied', 'Interested', 'Applied', 'Activated'].includes(p.status)).length;
+        return { ...segment, total: rows.length, engaged };
+      }).sort((a, b) => b.total - a.total),
+    [prospects],
+  );
+
+  return (
+    <main data-store-screenshot="dashboard" className="affiliate-app-shell space-y-6">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+            <SparkleIcon size={14} weight="fill" />
+            Affiliate recruiting control center
+          </div>
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight">Campaign dashboard</h1>
+          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            One place to source, qualify, contact, and activate affiliates—while Notis watches the
+            pipeline and local Codex workers do the heavy research.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={refetch}
+          className="inline-flex min-h-11 items-center gap-2 rounded-md border border-border bg-background px-3 text-sm text-muted-foreground transition hover:bg-muted hover:text-foreground"
+        >
+          <ArrowClockwiseIcon className={loading ? 'animate-spin' : ''} size={16} />
+          Refresh
+        </button>
+      </header>
+
+      {error ? (
+        <div className="rounded-lg border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {error.message}
+        </div>
+      ) : null}
+
+      <section className="affiliate-stat-grid gap-3">
+        <Metric icon={UsersThreeIcon} label="Prospects" value={compactNumber(prospects.length)} />
+        <Metric icon={FunnelIcon} label="Qualified" value={compactNumber(metrics.qualified)} />
+        <Metric icon={PaperPlaneTiltIcon} label="Conversations" value={compactNumber(metrics.conversations)} />
+        <Metric icon={CheckCircleIcon} label="Activated" value={compactNumber(metrics.active)} />
+        <Metric icon={CurrencyDollarIcon} label="Attributed MRR" value={money(metrics.mrr)} />
+      </section>
+
+      <section className="affiliate-dashboard-grid gap-4">
+        <Card>
+          <CardHeader className="flex-row items-center justify-between">
+            <div>
+              <CardTitle>Priority queue</CardTitle>
+              <p className="mt-1 text-xs text-muted-foreground">Highest-fit prospects needing a next action.</p>
+            </div>
+            <button
+              type="button"
+              onClick={() => navigation.toRoute('/prospects')}
+              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+            >
+              All prospects <ArrowRightIcon size={13} />
+            </button>
+          </CardHeader>
+          <CardContent>
+            {loading && !prospects.length ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">Loading the pipeline…</p>
+            ) : priority.length ? (
+              <div className="divide-y divide-border">
+                {priority.map((prospect) => <PriorityRow key={prospect.id} prospect={prospect} />)}
+              </div>
+            ) : (
+              <p className="rounded-lg border border-dashed border-border py-8 text-center text-sm text-muted-foreground">
+                No prospects need attention.
+              </p>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Pipeline</CardTitle>
+            <p className="text-xs text-muted-foreground">Current distribution across recruiting stages.</p>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {PIPELINE.slice(0, 9).map((status) => {
+              const count = prospects.filter((p) => p.status === status).length;
+              const width = prospects.length ? Math.max((count / prospects.length) * 100, count ? 4 : 0) : 0;
+              return (
+                <div key={status}>
+                  <div className="mb-1 flex items-center justify-between text-xs">
+                    <span className="text-muted-foreground">{status}</span>
+                    <span className="font-medium tabular-nums">{count}</span>
+                  </div>
+                  <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                    <div className="h-full rounded-full bg-primary/70" style={{ width: `${width}%` }} />
+                  </div>
+                </div>
+              );
+            })}
+          </CardContent>
+        </Card>
+      </section>
+
+      <Card>
+        <CardHeader className="flex-row items-center justify-between">
+          <div>
+            <CardTitle>Segment coverage</CardTitle>
+            <p className="mt-1 text-xs text-muted-foreground">Where the campaign is deep—and where sourcing should run next.</p>
+          </div>
+          <button
+            type="button"
+            onClick={() => navigation.toRoute('/segments')}
+            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+          >
+            Playbooks <ArrowRightIcon size={13} />
+          </button>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            {segmentRows.map((segment) => (
+              <div key={segment.name} className="rounded-lg border border-border p-3">
+                <p className="text-sm font-medium">{segment.short}</p>
+                <p className="mt-1 text-xs text-muted-foreground">{segment.source}</p>
+                <div className="mt-3 flex items-end justify-between">
+                  <span className="text-2xl font-semibold tabular-nums">{segment.total}</span>
+                  <span className="text-xs text-muted-foreground">{segment.engaged} engaged</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+
+function Metric({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: typeof UsersThreeIcon;
+  label: string;
+  value: string;
+}) {
+  return (
+    <Card className="p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="text-xs text-muted-foreground">{label}</p>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{value}</p>
+        </div>
+        <div className="rounded-lg bg-muted p-2 text-muted-foreground">
+          <Icon size={18} />
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+function PriorityRow({ prospect }: { prospect: AffiliateProspect }) {
+  return (
+    <div className="flex flex-wrap items-center gap-3 py-3 first:pt-0 last:pb-0">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold">
+          {prospect.name.split(/\s+/).slice(0, 2).map((part) => part[0]).join('')}
+        </div>
+        <div className="min-w-0">
+          <p className="truncate text-sm font-medium">{prospect.name}</p>
+          <p className="truncate text-xs text-muted-foreground">
+            {prospect.company || prospect.segment} · {prospect.nextAction || 'Review qualification'}
+          </p>
+        </div>
+      </div>
+      <span className={`rounded-full px-2 py-1 text-[11px] font-medium ${statusTone(prospect.status)}`}>
+        {prospect.status}
+      </span>
+      <span className="w-12 text-right text-sm font-semibold tabular-nums">{prospect.fitScore}</span>
+    </div>
+  );
+}

package/dist/scaffolds/notis-affiliate-prospects/app/prospects/page.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useTopBarSearch } from '@notis/sdk';
+import { ArrowClockwiseIcon, CalendarBlankIcon, EnvelopeSimpleIcon, LinkedinLogoIcon } from '@phosphor-icons/react';
+
+import { Card } from '@/components/ui/card';
+import { compactNumber, statusTone } from '@/lib/affiliate-data';
+import { useAffiliateProspects } from '@/lib/notis-tools';
+
+export default function ProspectsPage() {
+  const { prospects, loading, error, refetch } = useAffiliateProspects();
+  const [search, setSearch] = useState('');
+  const { setLoading } = useTopBarSearch({
+    value: search,
+    onChange: setSearch,
+    placeholder: 'Search name, company, segment, status, or source…',
+  });
+  useEffect(() => setLoading(loading), [loading, setLoading]);
+
+  const rows = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    return [...prospects]
+      .filter((prospect) =>
+        !query ||
+        [prospect.name, prospect.company, prospect.segment, prospect.status, prospect.source]
+          .join(' ')
+          .toLowerCase()
+          .includes(query),
+      )
+      .sort((a, b) => b.fitScore - a.fitScore);
+  }, [prospects, search]);
+
+  return (
+    <main data-store-screenshot="prospects" className="affiliate-app-shell space-y-5">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <p className="text-xs font-medium text-muted-foreground">Affiliate recruiting CRM</p>
+          <h1 className="mt-1 text-2xl font-semibold tracking-tight">{rows.length} prospects</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Ask Notis to add, enrich, qualify, or move prospects; this view stays the reference layer.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={refetch}
+          className="inline-flex min-h-11 items-center gap-2 rounded-md border border-border px-3 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <ArrowClockwiseIcon className={loading ? 'animate-spin' : ''} size={16} />
+          Refresh
+        </button>
+      </header>
+
+      {error ? <p className="rounded-lg bg-destructive/10 px-4 py-3 text-sm text-destructive">{error.message}</p> : null}
+
+      <Card className="affiliate-desktop-table overflow-x-auto">
+        <table className="affiliate-data-table w-full border-collapse text-left">
+          <thead className="border-b border-border bg-muted/40 text-[11px] uppercase tracking-wide text-muted-foreground">
+            <tr>
+              <th className="px-4 py-3 font-medium">Prospect</th>
+              <th className="px-4 py-3 font-medium">Segment</th>
+              <th className="px-4 py-3 font-medium">Status</th>
+              <th className="px-4 py-3 text-right font-medium">Fit</th>
+              <th className="px-4 py-3 font-medium">Source</th>
+              <th className="px-4 py-3 font-medium">Next action</th>
+              <th className="px-4 py-3 font-medium">Reach</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {rows.map((prospect) => (
+              <tr key={prospect.id} className="transition hover:bg-muted/30">
+                <td className="px-4 py-3">
+                  <p className="text-sm font-medium">{prospect.name}</p>
+                  <p className="text-xs text-muted-foreground">{prospect.company || prospect.website}</p>
+                </td>
+                <td className="px-4 py-3 text-xs text-muted-foreground">{prospect.segment}</td>
+                <td className="px-4 py-3">
+                  <span className={`rounded-full px-2 py-1 text-[11px] font-medium ${statusTone(prospect.status)}`}>
+                    {prospect.status}
+                  </span>
+                </td>
+                <td className="px-4 py-3 text-right text-sm font-semibold tabular-nums">{prospect.fitScore}</td>
+                <td className="px-4 py-3 text-xs text-muted-foreground">{prospect.source}</td>
+                <td className="px-4 py-3">
+                  <p className="max-w-52 truncate text-xs">{prospect.nextAction || '—'}</p>
+                  <p className="text-[11px] text-muted-foreground">{formatDate(prospect.nextActionDate)}</p>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    {prospect.email ? <EnvelopeSimpleIcon size={15} /> : null}
+                    {prospect.linkedInUrl ? <LinkedinLogoIcon size={15} /> : null}
+                    <span className="text-[11px]">{compactNumber(prospect.audienceSize || prospect.trafficEstimate)}</span>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Card>
+
+      <div className="affiliate-mobile-cards space-y-3">
+        {rows.map((prospect) => (
+          <Card key={prospect.id} className="p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <p className="truncate text-sm font-medium">{prospect.name}</p>
+                <p className="truncate text-xs text-muted-foreground">{prospect.company || prospect.segment}</p>
+              </div>
+              <span className="text-sm font-semibold tabular-nums">{prospect.fitScore}</span>
+            </div>
+            <div className="mt-3 flex flex-wrap items-center gap-2">
+              <span className={`rounded-full px-2 py-1 text-[11px] font-medium ${statusTone(prospect.status)}`}>
+                {prospect.status}
+              </span>
+              <span className="rounded-full bg-muted px-2 py-1 text-[11px] text-muted-foreground">{prospect.segment}</span>
+            </div>
+            <div className="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
+              <CalendarBlankIcon size={14} />
+              {prospect.nextAction || 'Review qualification'} · {formatDate(prospect.nextActionDate)}
+            </div>
+          </Card>
+        ))}
+      </div>
+    </main>
+  );
+}
+
+function formatDate(value: string): string {
+  if (!value) return '';
+  const date = new Date(value);
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
+}

package/dist/scaffolds/notis-affiliate-prospects/app/segments/page.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useMemo } from 'react';
+import {
+  ArrowSquareOutIcon,
+  ChartLineUpIcon,
+  CheckCircleIcon,
+  MagnifyingGlassIcon,
+  UsersIcon,
+} from '@phosphor-icons/react';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { SEGMENTS, compactNumber } from '@/lib/affiliate-data';
+import { useAffiliateProspects } from '@/lib/notis-tools';
+
+export default function SegmentsPage() {
+  const { prospects, loading, error } = useAffiliateProspects();
+  const segments = useMemo(
+    () =>
+      SEGMENTS.map((segment) => {
+        const rows = prospects.filter((prospect) => prospect.segment === segment.name);
+        const qualified = rows.filter((prospect) => prospect.fitScore >= 75 && prospect.status !== 'Disqualified').length;
+        const activated = rows.filter((prospect) => prospect.status === 'Activated').length;
+        const reach = rows.reduce((sum, prospect) => sum + prospect.audienceSize + prospect.trafficEstimate, 0);
+        return { ...segment, total: rows.length, qualified, activated, reach };
+      }),
+    [prospects],
+  );
+
+  return (
+    <main data-store-screenshot="segments" className="affiliate-app-shell space-y-6">
+      <header>
+        <p className="text-xs font-medium text-muted-foreground">Seven focused acquisition motions</p>
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight">Recruiting segments</h1>
+        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+          Each segment has its own sourcing signal, qualification model, and outreach playbook in
+          <span className="font-medium text-foreground"> campaign/affiliate-network/segments</span>.
+        </p>
+      </header>
+
+      {error ? (
+        <p className="rounded-lg bg-destructive/10 px-4 py-3 text-sm text-destructive">{error.message}</p>
+      ) : null}
+      {loading && !prospects.length ? (
+        <p className="rounded-lg border border-dashed border-border py-8 text-center text-sm text-muted-foreground">
+          Loading segment coverage…
+        </p>
+      ) : null}
+
+      <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {segments.map((segment, index) => (
+          <Card key={segment.name}>
+            <CardHeader>
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                    Segment {index + 1}
+                  </p>
+                  <CardTitle className="mt-1 text-base">{segment.name}</CardTitle>
+                </div>
+                <div className="rounded-lg bg-muted p-2 text-muted-foreground">
+                  <UsersIcon size={18} />
+                </div>
+              </div>
+              <p className="text-xs leading-relaxed text-muted-foreground">{segment.description}</p>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-3 gap-2">
+                <Kpi icon={MagnifyingGlassIcon} value={segment.total} label="Found" />
+                <Kpi icon={ChartLineUpIcon} value={segment.qualified} label="Qualified" />
+                <Kpi icon={CheckCircleIcon} value={segment.activated} label="Active" />
+              </div>
+              <div className="mt-4 rounded-lg bg-muted/50 p-3">
+                <p className="text-[11px] uppercase tracking-wide text-muted-foreground">Primary source</p>
+                <p className="mt-1 text-sm font-medium">{segment.source}</p>
+                <p className="mt-2 text-xs text-muted-foreground">
+                  Combined discoverable reach: {compactNumber(segment.reach)}
+                </p>
+              </div>
+              <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+                <span>Playbook is source-controlled</span>
+                <ArrowSquareOutIcon size={14} />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </section>
+    </main>
+  );
+}
+
+function Kpi({
+  icon: Icon,
+  value,
+  label,
+}: {
+  icon: typeof UsersIcon;
+  value: number;
+  label: string;
+}) {
+  return (
+    <div className="rounded-lg border border-border p-2.5">
+      <Icon size={14} className="text-muted-foreground" />
+      <p className="mt-2 text-lg font-semibold tabular-nums">{value}</p>
+      <p className="text-[10px] text-muted-foreground">{label}</p>
+    </div>
+  );
+}