@autoview/cli 0.1.0

package/template/components/auto/CatalogGrid.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import Link from "next/link";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+import { formatCell } from "./formatValue";
+import type { ColumnSpec } from "./types";
+
+/** Which fields drive a catalog card, baked by the generator from the schema. */
+export interface CatalogSpec {
+  /** Field holding the image URL. */
+  imageField: string;
+  /** True when {@link imageField} is a `string[]` — use its first element. */
+  imageIsArray: boolean;
+  /** Field holding the card's title. */
+  titleField: string;
+  /** A few secondary columns shown under the title. */
+  meta: ColumnSpec[];
+}
+
+export interface CatalogGridProps {
+  title: string;
+  description?: string;
+  spec: CatalogSpec;
+  rows: readonly unknown[];
+  loading: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  rowHref?: (row: Record<string, unknown>) => string | null;
+  emptyHint?: string;
+}
+
+function imageUrl(row: Record<string, unknown>, spec: CatalogSpec): string | null {
+  const v = row[spec.imageField];
+  const raw = spec.imageIsArray ? (Array.isArray(v) ? v[0] : undefined) : v;
+  return typeof raw === "string" && raw.length > 0 ? raw : null;
+}
+
+/**
+ * Universal catalog screen — a grid of image cards, one per record. Chosen over
+ * the table when the row schema carries an image + a title (a product, a photo,
+ * a profile). Schema-driven: the image / title / meta fields are decided by the
+ * generator from the element type, so any image-bearing collection reads as a
+ * gallery instead of a dense table. Same loading / error / empty / data states
+ * as the table.
+ */
+export function CatalogGrid(props: CatalogGridProps) {
+  const { title, description, spec, loading, error, onRetry, rowHref, emptyHint } =
+    props;
+  const rows = Array.isArray(props.rows) ? props.rows : [];
+
+  const body = (() => {
+    if (error !== null && error !== undefined) {
+      return (
+        <Card className="border-destructive/40 bg-destructive/5 p-5">
+          <p className="text-sm text-destructive">{error}</p>
+          {onRetry ? (
+            <Button variant="outline" size="sm" className="mt-3" onClick={onRetry}>
+              Retry
+            </Button>
+          ) : null}
+        </Card>
+      );
+    }
+    if (loading) {
+      return (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <Skeleton className="aspect-[4/3] w-full" />
+              <Skeleton className="h-4 w-2/3" />
+            </div>
+          ))}
+        </div>
+      );
+    }
+    if (rows.length === 0) {
+      return (
+        <Card className="p-6">
+          <p className="text-sm text-muted-foreground">
+            {emptyHint ?? "The list came back empty."}
+          </p>
+        </Card>
+      );
+    }
+    return (
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {rows.map((raw, i) => {
+          const row = (raw ?? {}) as Record<string, unknown>;
+          const img = imageUrl(row, spec);
+          const href = rowHref ? rowHref(row) : null;
+          const card = (
+            <Card className="h-full overflow-hidden transition-colors hover:border-primary/50">
+              <div className="aspect-[4/3] bg-muted">
+                {img ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={img}
+                    alt=""
+                    loading="lazy"
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full items-center justify-center text-muted-foreground">
+                    —
+                  </div>
+                )}
+              </div>
+              <CardContent className="p-3">
+                <p className="truncate text-sm font-medium">
+                  {String(row[spec.titleField] ?? "—")}
+                </p>
+                {spec.meta.length > 0 ? (
+                  <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+                    {spec.meta.map((c) => (
+                      <span key={c.name} className="inline-flex items-center">
+                        {formatCell(row[c.name], c)}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+              </CardContent>
+            </Card>
+          );
+          return href ? (
+            <Link key={i} href={href} className="block">
+              {card}
+            </Link>
+          ) : (
+            <div key={i}>{card}</div>
+          );
+        })}
+      </div>
+    );
+  })();
+
+  return (
+    <div className="px-5 py-6 md:px-8">
+      <div className="mb-5 flex items-end justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+          {description ? (
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        {!loading && !error ? (
+          <span className="hidden text-xs text-muted-foreground sm:inline">
+            {rows.length} item{rows.length === 1 ? "" : "s"}
+          </span>
+        ) : null}
+      </div>
+      {body}
+    </div>
+  );
+}

package/template/components/auto/ConfirmButton.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export interface ConfirmButtonProps {
+  label: string;
+  onConfirm: () => void;
+  disabled?: boolean;
+  title?: string;
+  description?: string;
+}
+
+/**
+ * A destructive button that asks for confirmation before firing. Used for
+ * DELETE actions so a single click cannot irreversibly destroy a record — the
+ * generated detail page wires `onConfirm` to the SDK delete call.
+ */
+export function ConfirmButton(props: ConfirmButtonProps) {
+  const { label, onConfirm, disabled, title, description } = props;
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="destructive" size="sm" disabled={disabled}>
+          {label}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title ?? "Are you sure?"}</DialogTitle>
+          <DialogDescription>
+            {description ?? "This action cannot be undone."}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline" size="sm">
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => {
+              setOpen(false);
+              onConfirm();
+            }}
+          >
+            {label}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/template/components/auto/EmbeddedCollection.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import Link from "next/link";
+import * as React from "react";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { humanizeLabel } from "@/lib/utils";
+
+import { formatCell } from "./formatValue";
+import type { ColumnSpec } from "./types";
+
+/** Rows shown inline; the full set lives on the child's own list screen. */
+const PREVIEW_LIMIT = 5;
+/** Columns shown inline — a detail embed stays compact, not the full table. */
+const PREVIEW_COLUMNS = 5;
+
+export interface EmbeddedCollectionProps {
+  title: string;
+  columns: ColumnSpec[];
+  /** Fetch + extract the child rows. Supplied by the generated detail page. */
+  load: () => Promise<readonly unknown[]>;
+  /** Link to the child's full list screen ("View all"). */
+  href?: string;
+}
+
+/**
+ * A child collection rendered inline inside a parent's detail page — the master
+ * half of a master-detail view. Fetches its own rows, shows a compact preview
+ * table, and links to the full list screen. This is how a nested resource reads
+ * as part of its parent (an order's items, a folder's files) instead of a
+ * separate page you have to navigate to.
+ */
+export function EmbeddedCollection(props: EmbeddedCollectionProps) {
+  const { title, columns, load, href } = props;
+  const [rows, setRows] = React.useState<readonly unknown[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setError(null);
+    load()
+      .then((r) => {
+        if (alive) setRows(Array.isArray(r) ? r : []);
+      })
+      .catch((e) => {
+        if (alive) setError(e instanceof Error ? e.message : String(e));
+      })
+      .finally(() => {
+        if (alive) setLoading(false);
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const cols = columns.slice(0, PREVIEW_COLUMNS);
+  const preview = rows.slice(0, PREVIEW_LIMIT);
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between gap-3 space-y-0 py-3">
+        <CardTitle className="text-sm font-semibold">
+          {title}
+          {!loading && !error ? (
+            <span className="ml-2 text-xs font-normal text-muted-foreground">
+              {rows.length}
+              {rows.length >= PREVIEW_LIMIT ? "+" : ""}
+            </span>
+          ) : null}
+        </CardTitle>
+        {href ? (
+          <Link
+            href={href}
+            className="shrink-0 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            View all →
+          </Link>
+        ) : null}
+      </CardHeader>
+      <CardContent className="p-0">
+        {error ? (
+          <p className="px-5 py-4 text-sm text-destructive">{error}</p>
+        ) : loading ? (
+          <div className="space-y-2 px-5 py-4">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton key={i} className="h-6 w-full" />
+            ))}
+          </div>
+        ) : preview.length === 0 ? (
+          <p className="px-5 py-4 text-sm text-muted-foreground">
+            No {title.toLowerCase()} yet.
+          </p>
+        ) : (
+          <div className="overflow-x-auto border-t">
+            <Table>
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  {cols.map((c) => (
+                    <TableHead
+                      key={c.name}
+                      className="h-9 whitespace-nowrap text-xs uppercase tracking-wide text-muted-foreground"
+                    >
+                      {humanizeLabel(c.name)}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {preview.map((raw, i) => {
+                  const row = (raw ?? {}) as Record<string, unknown>;
+                  return (
+                    <TableRow key={i}>
+                      {cols.map((c) => (
+                        <TableCell key={c.name} className="max-w-xs align-top text-sm">
+                          {formatCell(row[c.name], c)}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/template/components/auto/ResourceDashboard.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import * as React from "react";
+
+import { Card } from "@/components/ui/card";
+import { ResourceIcon } from "@/components/auto/ResourceIcon";
+import { ResourceLinks, type LandingLink } from "@/components/auto/ResourceLanding";
+
+export interface DashboardStat {
+  href: string;
+  title: string;
+  /** Live record count for the resource; `null` while loading or on error. */
+  count: number | null;
+  /** Titles of the first few records, for an at-a-glance "recent" preview. */
+  recent?: string[];
+}
+
+export interface ResourceDashboardProps {
+  title: string;
+  subtitle?: string;
+  /** Top hub resources surfaced as count cards. Empty → just the link grid. */
+  stats: DashboardStat[];
+  links: LandingLink[];
+}
+
+/**
+ * Home dashboard. A strip of live count cards for the key hub resources sits
+ * above the full grouped resource-link grid. Turns the bare link hub into an
+ * actual operator landing — "how much is in each resource" at a glance — while
+ * keeping navigation to every resource. Counts are fetched by the generated
+ * page (one list call per stat); this component only renders.
+ */
+export function ResourceDashboard(props: ResourceDashboardProps) {
+  const { title, subtitle, stats, links } = props;
+  // Largest count, so each card's bar reads as magnitude relative to the others.
+  const max = Math.max(1, ...stats.map((s) => s.count ?? 0));
+  return (
+    <div className="px-5 py-8 md:px-8">
+      <div className="mb-7">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {subtitle ? (
+          <p className="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>
+        ) : null}
+      </div>
+
+      {stats.length > 0 ? (
+        <div className="mb-9 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat) => (
+            <Link key={stat.href} href={stat.href} className="group">
+              <Card className="flex h-full flex-col p-4 transition-colors group-hover:border-primary/50 group-hover:bg-muted/30">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <ResourceIcon
+                      name={stat.href}
+                      className="h-4 w-4 shrink-0 text-muted-foreground"
+                    />
+                    <p className="truncate text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                      {stat.title}
+                    </p>
+                  </div>
+                  <span className="shrink-0 text-muted-foreground opacity-0 transition group-hover:opacity-100">
+                    →
+                  </span>
+                </div>
+                <p className="mt-2 text-3xl font-semibold tabular-nums">
+                  {stat.count === null ? (
+                    <span className="text-muted-foreground">—</span>
+                  ) : (
+                    stat.count.toLocaleString()
+                  )}
+                </p>
+                {stat.count !== null ? (
+                  <div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-muted">
+                    <div
+                      className="h-full rounded-full bg-primary/60"
+                      style={{
+                        width: `${Math.max(4, Math.round((stat.count / max) * 100))}%`,
+                      }}
+                    />
+                  </div>
+                ) : null}
+                {stat.recent && stat.recent.length > 0 ? (
+                  <ul className="mt-3 space-y-1 border-t pt-2">
+                    {stat.recent.slice(0, 2).map((r, i) => (
+                      <li
+                        key={i}
+                        className="truncate text-xs text-muted-foreground"
+                      >
+                        {r}
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </Card>
+            </Link>
+          ))}
+        </div>
+      ) : null}
+
+      <ResourceLinks links={links} />
+    </div>
+  );
+}

package/template/components/auto/ResourceDetail.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { humanizeLabel } from "@/lib/utils";
+
+import { formatCell } from "./formatValue";
+import type { ColumnSpec } from "./types";
+
+export interface ResourceDetailProps {
+  title: string;
+  /** One row per field of the response type — the whole record. */
+  fields: ColumnSpec[];
+  /** The single record the detail endpoint returned. `unknown` so the page never casts. */
+  data: unknown;
+  loading: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  /** Buttons rendered next to the title (edit link, delete, …). */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Universal detail screen. Renders a definition list — one row per field of the
+ * response type, formatted by kind. Schema-driven, so every property of the
+ * record is shown, never an LLM-chosen subset.
+ */
+export function ResourceDetail(props: ResourceDetailProps) {
+  const { title, fields, data, loading, error, onRetry, actions } = props;
+
+  const body = (() => {
+    if (error !== null && error !== undefined) {
+      return (
+        <Card className="border-destructive/40 bg-destructive/5">
+          <CardHeader>
+            <CardTitle className="text-base text-destructive">Couldn’t load</CardTitle>
+            <CardDescription className="break-words">{error}</CardDescription>
+          </CardHeader>
+          {onRetry ? (
+            <CardContent>
+              <Button variant="outline" size="sm" onClick={onRetry}>
+                Retry
+              </Button>
+            </CardContent>
+          ) : null}
+        </Card>
+      );
+    }
+    if (loading || data === null || data === undefined) {
+      return (
+        <div className="space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-8 w-full" />
+          ))}
+        </div>
+      );
+    }
+    const record = data as Record<string, unknown>;
+    return (
+      <Card>
+        <CardContent className="divide-y p-0">
+          {fields.map((f) => (
+            <div key={f.name} className="grid grid-cols-3 gap-4 px-5 py-3">
+              <dt className="text-sm font-medium text-muted-foreground">{humanizeLabel(f.name)}</dt>
+              <dd className="col-span-2 break-words text-sm">
+                {formatCell(record[f.name], f)}
+              </dd>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    );
+  })();
+
+  return (
+    <div className="px-5 py-6 md:px-8">
+      <div className="mb-5 flex max-w-3xl flex-wrap items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+        <div className="flex flex-wrap items-center gap-2">{actions}</div>
+      </div>
+      <div className="max-w-3xl">{body}</div>
+    </div>
+  );
+}