@notis_ai/cli 0.2.7 → 0.2.8

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

@@ -1,248 +0,0 @@
-'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

@@ -1,134 +0,0 @@
-'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

@@ -1,108 +0,0 @@
-'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>
-  );
-}

package/dist/scaffolds/notis-affiliate-prospects/components/ui/card.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-xl border border-border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  ),
-);
-Card.displayName = 'Card';
-
-export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col gap-1.5 p-5', className)} {...props} />
-  ),
-);
-CardHeader.displayName = 'CardHeader';
-
-export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn('text-sm font-semibold tracking-tight', className)} {...props} />
-  ),
-);
-CardTitle.displayName = 'CardTitle';
-
-export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-5 pt-0', className)} {...props} />
-  ),
-);
-CardContent.displayName = 'CardContent';

package/dist/scaffolds/notis-affiliate-prospects/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Affiliate Prospects (dev preview)</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/dev-main.tsx"></script>
-  </body>
-</html>