@agent-native/core 0.122.3 → 0.123.0

package/corpus/core/src/client/settings/BrowserSection.tsx

@@ -1,110 +0,0 @@
-import {
-  IconBrowser,
-  IconCheck,
-  IconExternalLink,
-  IconLoader2,
-} from "@tabler/icons-react";
-
-import { trackEvent } from "../analytics.js";
-import { SettingsSection } from "./SettingsSection.js";
-import {
-  useBuilderStatus,
-  withBuilderConnectTrackingParams,
-} from "./useBuilderStatus.js";
-
-export function BrowserSection() {
-  const { status: builder, loading } = useBuilderStatus();
-  const connected = builder?.configured ?? false;
-  const builderConnectUrl = builder?.cliAuthUrl ?? builder?.connectUrl;
-  const builderConnectHref = builderConnectUrl
-    ? withBuilderConnectTrackingParams(builderConnectUrl, {
-        source: "browser_settings",
-        flow: "browser_automation",
-      })
-    : null;
-  const builderReconnectHref = builderConnectUrl
-    ? withBuilderConnectTrackingParams(builderConnectUrl, {
-        source: "browser_settings_reconnect",
-        flow: "browser_automation",
-      })
-    : null;
-
-  return (
-    <SettingsSection
-      icon={<IconBrowser size={14} />}
-      title="Browser Automation"
-      subtitle="Let agents control a real browser for web tasks. Requires Builder connection."
-      connected={connected}
-    >
-      {loading ? (
-        <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground">
-          <IconLoader2 size={10} className="animate-spin" />
-          Checking Builder connection...
-        </div>
-      ) : connected ? (
-        <div className="space-y-2">
-          <div className="flex items-center gap-1.5 text-[10px] text-green-500">
-            <IconCheck size={10} />
-            Browser access enabled
-            {builder?.orgName && (
-              <span className="text-muted-foreground">({builder.orgName})</span>
-            )}
-          </div>
-          <p className="text-[10px] text-muted-foreground">
-            Agents can request live browser sessions via{" "}
-            <code className="rounded bg-muted px-1 py-0.5 text-[9px]">
-              connect-builder
-            </code>
-          </p>
-          {builderReconnectHref && (
-            <a
-              href={builderReconnectHref}
-              target="_blank"
-              rel="noreferrer"
-              onClick={() => {
-                trackEvent("builder connect clicked", {
-                  feature: "builder",
-                  stage: "client",
-                  source: "browser_settings_reconnect",
-                  flow: "browser_automation",
-                  connect_url_kind: "provided",
-                });
-              }}
-              className="inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40"
-            >
-              Reconnect
-              <IconExternalLink size={10} />
-            </a>
-          )}
-        </div>
-      ) : (
-        <div className="space-y-2">
-          <p className="text-[10px] text-muted-foreground">
-            Connect Builder to provision browser sessions without wiring browser
-            setup into every app.
-          </p>
-          {builderConnectHref && (
-            <a
-              href={builderConnectHref}
-              target="_blank"
-              rel="noreferrer"
-              onClick={() => {
-                trackEvent("builder connect clicked", {
-                  feature: "builder",
-                  stage: "client",
-                  source: "browser_settings",
-                  flow: "browser_automation",
-                  connect_url_kind: "provided",
-                });
-              }}
-              className="inline-flex items-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80"
-            >
-              Connect Builder
-              <IconExternalLink size={10} />
-            </a>
-          )}
-        </div>
-      )}
-    </SettingsSection>
-  );
-}

package/corpus/templates/analytics/app/components/InlineMetric.tsx

@@ -1,31 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-
-interface InlineMetricProps {
-  title: string;
-  value: string | number;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function InlineMetric({
-  title,
-  value,
-  isLoading,
-  className,
-}: InlineMetricProps) {
-  return (
-    <Card className={`bg-card border-border/50 ${className || ""}`}>
-      <CardContent className="pt-4 pb-3">
-        <div className="flex-1 min-w-0">
-          <p className="text-xs text-muted-foreground mb-1">{title}</p>
-          {isLoading ? (
-            <Skeleton className="h-8 w-24" />
-          ) : (
-            <p className="text-2xl font-bold tabular-nums truncate">{value}</p>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

package/corpus/templates/analytics/app/components/auth/LoginScreen.tsx

@@ -1,4 +0,0 @@
-// Stub — authentication has been removed. This component should not be rendered.
-export function LoginScreen() {
-  return null;
-}

package/corpus/templates/analytics/app/components/dashboard/CumulativeNetChart.tsx

@@ -1,128 +0,0 @@
-import { useT } from "@agent-native/core/client/i18n";
-import {
-  Area,
-  AreaChart,
-  CartesianGrid,
-  ReferenceLine,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  chartAxisStroke,
-  chartGridStroke,
-  chartTooltipContentStyle,
-} from "@/lib/chart-theme";
-
-interface CumulativeNetChartProps {
-  title: string;
-  data: { day: string; cumulative_net: number }[];
-  isLoading?: boolean;
-  error?: string;
-}
-
-const formatDate = (value: any) => {
-  try {
-    const d = new Date(value);
-    return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-  } catch {
-    return String(value);
-  }
-};
-
-const formatCurrency = (value: number) => {
-  const abs = Math.abs(value);
-  if (abs >= 1000) return `$${(value / 1000).toFixed(0)}k`;
-  return `$${value.toFixed(0)}`;
-};
-
-export function CumulativeNetChart({
-  title,
-  data,
-  isLoading,
-  error,
-}: CumulativeNetChartProps) {
-  const t = useT();
-  const lastValue = data.length > 0 ? data[data.length - 1].cumulative_net : 0;
-  const isPositive = lastValue >= 0;
-  const color = isPositive ? "#10b981" : "#ef4444";
-
-  return (
-    <Card className="bg-card">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-base">{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        {isLoading ? (
-          <Skeleton className="h-[300px] w-full" />
-        ) : error ? (
-          <p className="text-sm text-red-400 py-8 text-center">{error}</p>
-        ) : data.length === 0 ? (
-          <p className="text-sm text-muted-foreground py-8 text-center">
-            {t("common.noDataAvailable")}
-          </p>
-        ) : (
-          <div className="h-[300px] w-full">
-            <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={data}>
-                <defs>
-                  <linearGradient
-                    id="cumulative-gradient"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop offset="5%" stopColor={color} stopOpacity={0.3} />
-                    <stop offset="95%" stopColor={color} stopOpacity={0} />
-                  </linearGradient>
-                </defs>
-                <XAxis
-                  dataKey="day"
-                  stroke={chartAxisStroke}
-                  fontSize={12}
-                  tickLine={false}
-                  axisLine={false}
-                  tickFormatter={formatDate}
-                />
-                <YAxis
-                  stroke={chartAxisStroke}
-                  fontSize={12}
-                  tickLine={false}
-                  axisLine={false}
-                  tickFormatter={formatCurrency}
-                />
-                <CartesianGrid
-                  strokeDasharray="3 3"
-                  stroke={chartGridStroke}
-                  vertical={false}
-                />
-                <ReferenceLine y={0} stroke={chartAxisStroke} strokeWidth={1} />
-                <Tooltip
-                  contentStyle={chartTooltipContentStyle}
-                  labelFormatter={formatDate}
-                  formatter={(value: any) => [
-                    `$${Number(value).toLocaleString(undefined, { maximumFractionDigits: 0 })}`,
-                    "Cumulative Net ARR",
-                  ]}
-                />
-                <Area
-                  type="monotone"
-                  dataKey="cumulative_net"
-                  stroke={color}
-                  strokeWidth={2}
-                  fillOpacity={1}
-                  fill="url(#cumulative-gradient)"
-                />
-              </AreaChart>
-            </ResponsiveContainer>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/corpus/templates/analytics/app/components/dashboard/DataTable.tsx

@@ -1,264 +0,0 @@
-import { useT } from "@agent-native/core/client/i18n";
-import {
-  IconArrowsUpDown,
-  IconChevronLeft,
-  IconChevronRight,
-} from "@tabler/icons-react";
-import { useState, useMemo } from "react";
-
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { cn } from "@/lib/utils";
-
-const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-const TABLE_MIN_HEIGHT_CLASS = "min-h-[386px]";
-const TABLE_SKELETON_ROWS = 10;
-
-interface DataTableProps {
-  title?: string;
-  data: Record<string, unknown>[];
-  columns?: string[];
-  isLoading?: boolean;
-  error?: string;
-  maxRows?: number;
-}
-
-export function DataTable({
-  title,
-  data,
-  columns: columnsProp,
-  isLoading,
-  error,
-  maxRows,
-}: DataTableProps) {
-  const t = useT();
-  const [sortCol, setSortCol] = useState<string | null>(null);
-  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
-
-  const columns = useMemo(() => {
-    if (columnsProp) return columnsProp;
-    if (data.length === 0) return [];
-    return Object.keys(data[0]);
-  }, [data, columnsProp]);
-
-  // Cap the dataset at `maxRows` before sorting/paginating. Callers pass this
-  // to avoid spending a bunch of work formatting + sorting thousands of rows
-  // the user will never scroll to. Applied before sort so a 10k-row query
-  // trimmed to 200 rows sorts 200, not 10k.
-  const rows = useMemo(
-    () =>
-      maxRows != null && data.length > maxRows ? data.slice(0, maxRows) : data,
-    [data, maxRows],
-  );
-
-  const sorted = useMemo(() => {
-    if (!sortCol) return rows;
-    return [...rows].sort((a, b) => {
-      const aVal = a[sortCol];
-      const bVal = b[sortCol];
-      if (aVal == null && bVal == null) return 0;
-      if (aVal == null) return 1;
-      if (bVal == null) return -1;
-      if (typeof aVal === "number" && typeof bVal === "number") {
-        return sortDir === "asc" ? aVal - bVal : bVal - aVal;
-      }
-      const cmp = String(aVal).localeCompare(String(bVal));
-      return sortDir === "asc" ? cmp : -cmp;
-    });
-  }, [rows, sortCol, sortDir]);
-
-  const pageCount = Math.ceil(sorted.length / pageSize);
-  const paged = sorted.slice(page * pageSize, (page + 1) * pageSize);
-
-  const handleSort = (col: string) => {
-    if (sortCol === col) {
-      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
-    } else {
-      setSortCol(col);
-      setSortDir("desc");
-    }
-    setPage(0);
-  };
-
-  const formatValue = (val: unknown): string => {
-    if (val == null) return "-";
-    if (typeof val === "number") {
-      if (Number.isInteger(val)) return val.toLocaleString();
-      return val.toFixed(4);
-    }
-    if (typeof val === "object") return JSON.stringify(val);
-    return String(val);
-  };
-
-  const content = (
-    <>
-      {isLoading ? (
-        <DataTableLoadingSkeleton />
-      ) : error ? (
-        <p className="text-sm text-red-400 py-4">{error}</p>
-      ) : data.length === 0 ? (
-        <p className="text-sm text-muted-foreground py-4 text-center">
-          {t("common.noData")}
-        </p>
-      ) : (
-        <div className={`overflow-x-auto ${TABLE_MIN_HEIGHT_CLASS}`}>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {columns.map((col) => (
-                  <TableHead
-                    key={col}
-                    className="cursor-pointer hover:text-foreground select-none whitespace-nowrap"
-                    onClick={() => handleSort(col)}
-                  >
-                    <span className="flex items-center gap-1">
-                      {col}
-                      <IconArrowsUpDown
-                        className={cn(
-                          "h-3 w-3",
-                          sortCol === col
-                            ? "text-foreground"
-                            : "text-muted-foreground/50",
-                        )}
-                      />
-                    </span>
-                  </TableHead>
-                ))}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {paged.map((row, i) => (
-                <TableRow key={i}>
-                  {columns.map((col) => (
-                    <TableCell
-                      key={col}
-                      className="whitespace-nowrap max-w-[300px] truncate"
-                    >
-                      {formatValue(row[col])}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-          {sorted.length > PAGE_SIZE_OPTIONS[0] && (
-            <div className="flex items-center justify-between px-2 py-2 border-t border-border text-xs text-muted-foreground">
-              <div className="flex items-center gap-2">
-                <span>{t("common.rowsPerPage")}</span>
-                <Select
-                  value={String(pageSize)}
-                  onValueChange={(value) => {
-                    setPageSize(Number(value));
-                    setPage(0);
-                  }}
-                >
-                  <SelectTrigger className="h-6 w-16 px-2 py-0 text-xs border-border">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {PAGE_SIZE_OPTIONS.map((n) => (
-                      <SelectItem key={n} value={String(n)}>
-                        {n}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex items-center gap-2">
-                <span>
-                  {page * pageSize + 1}–
-                  {Math.min((page + 1) * pageSize, sorted.length)} of{" "}
-                  {sorted.length}
-                </span>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  onClick={() => setPage((p) => p - 1)}
-                  disabled={page === 0}
-                >
-                  <IconChevronLeft className="h-3.5 w-3.5" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  onClick={() => setPage((p) => p + 1)}
-                  disabled={page >= pageCount - 1}
-                >
-                  <IconChevronRight className="h-3.5 w-3.5" />
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </>
-  );
-
-  if (!title) return content;
-
-  return (
-    <Card className="bg-card">
-      <CardHeader>
-        <CardTitle className="text-base">{title}</CardTitle>
-      </CardHeader>
-      <CardContent>{content}</CardContent>
-    </Card>
-  );
-}
-
-function DataTableLoadingSkeleton() {
-  const columnWidths = ["w-24", "w-32", "w-20", "w-28"];
-
-  return (
-    <div className={`space-y-1 ${TABLE_MIN_HEIGHT_CLASS}`}>
-      <div className="overflow-x-auto">
-        <div className="min-w-[480px]">
-          <div className="grid h-8 grid-cols-4 items-center border-b border-border px-2">
-            {columnWidths.map((width, index) => (
-              <Skeleton key={index} className={`h-3 ${width}`} />
-            ))}
-          </div>
-          {Array.from({ length: TABLE_SKELETON_ROWS }).map((_, row) => (
-            <div
-              key={row}
-              className="grid h-8 grid-cols-4 items-center border-b border-border/50 px-2"
-            >
-              {columnWidths.map((width, col) => (
-                <Skeleton
-                  key={col}
-                  className={`h-3 ${
-                    col === 0 ? "w-36" : col === 2 ? "ml-auto w-16" : width
-                  }`}
-                />
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex h-8 items-center justify-between border-t border-border px-2 text-xs">
-        <Skeleton className="h-3 w-28" />
-        <Skeleton className="h-3 w-24" />
-      </div>
-    </div>
-  );
-}

package/corpus/templates/analytics/app/components/dashboard/RecentActivity.tsx

@@ -1,84 +0,0 @@
-import { useT } from "@agent-native/core/client/i18n";
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from "@/components/ui/card";
-
-const activities = [
-  {
-    name: "Olivia Martin", // i18n-ignore stable sample person name
-    email: "olivia.martin@email.com",
-    amount: "+$1,999.00",
-    avatar: "/avatars/01.png",
-    initials: "OM",
-  },
-  {
-    name: "Jackson Lee", // i18n-ignore stable sample person name
-    email: "jackson.lee@email.com",
-    amount: "+$39.00",
-    avatar: "/avatars/02.png",
-    initials: "JL",
-  },
-  {
-    name: "Isabella Nguyen", // i18n-ignore stable sample person name
-    email: "isabella.nguyen@email.com",
-    amount: "+$299.00",
-    avatar: "/avatars/03.png",
-    initials: "IN",
-  },
-  {
-    name: "William Kim", // i18n-ignore stable sample person name
-    email: "will@email.com",
-    amount: "+$99.00",
-    avatar: "/avatars/04.png",
-    initials: "WK",
-  },
-  {
-    name: "Sofia Davis", // i18n-ignore stable sample person name
-    email: "sofia.davis@email.com",
-    amount: "+$39.00",
-    avatar: "/avatars/05.png",
-    initials: "SD",
-  },
-];
-
-export function RecentActivity() {
-  const t = useT();
-
-  return (
-    <Card className="col-span-full lg:col-span-3 bg-card">
-      <CardHeader>
-        <CardTitle>{t("dashboard.recentSales")}</CardTitle>
-        <CardDescription>
-          {t("dashboard.recentSalesDescription")}
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-8">
-          {activities.map((activity, index) => (
-            <div key={index} className="flex items-center">
-              <Avatar className="h-9 w-9">
-                <AvatarImage src={activity.avatar} alt="Avatar" />
-                <AvatarFallback>{activity.initials}</AvatarFallback>
-              </Avatar>
-              <div className="ml-4 space-y-1">
-                <p className="text-sm font-medium leading-none">
-                  {activity.name}
-                </p>
-                <p className="text-sm text-muted-foreground">
-                  {activity.email}
-                </p>
-              </div>
-              <div className="ml-auto font-medium">{activity.amount}</div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}