@autoview/cli 0.1.0

package/template/components/auto/ResourceForm.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { humanizeLabel } from "@/lib/utils";
+
+import type { FieldInput } from "./types";
+
+export interface ResourceFormProps {
+  title: string;
+  description?: string;
+  /** One input per field of the request body schema. */
+  fields: FieldInput[];
+  submitting: boolean;
+  error?: string | null;
+  /** Success message after a submit resolves. */
+  result?: string | null;
+  /** Current record values to prefill an edit form (matched by field name). */
+  initialValues?: Record<string, unknown>;
+  onSubmit: (values: Record<string, unknown>) => void;
+}
+
+/** HTML input type for a field, so the browser validates format natively. */
+function inputType(field: FieldInput): string {
+  if (field.kind === "number") return "number";
+  if (field.format === "email") return "email";
+  if (field.format === "uri" || field.format === "url") return "url";
+  return "text";
+}
+
+/** Client-side validation message for one field, or `null` when valid. */
+function fieldError(field: FieldInput, raw: string): string | null {
+  const v = raw.trim();
+  if (field.required && v === "") return "Required";
+  if (v === "") return null;
+  if (field.kind === "number" && Number.isNaN(Number(v))) return "Must be a number";
+  if (field.format === "email" && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v))
+    return "Invalid email";
+  if (
+    (field.format === "uri" || field.format === "url") &&
+    !/^(https?:\/\/|\/)/.test(v)
+  )
+    return "Invalid URL";
+  return null;
+}
+
+/** Coerce a raw string input back to the JSON type its field expects. */
+function coerce(raw: string, field: FieldInput): unknown {
+  switch (field.kind) {
+    case "number":
+      return Number(raw);
+    case "boolean":
+      return raw === "true";
+    case "array":
+      return raw
+        .split(",")
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0);
+    default:
+      return raw;
+  }
+}
+
+/**
+ * Universal create/edit form. Renders one input per field of the request body
+ * schema — `enum` → select, `boolean` → true/false select, `number` → numeric
+ * input, everything else → text input. Required fields are marked. On submit it
+ * coerces every value back to its JSON type and hands a plain object to the
+ * page, which forwards it to the SDK.
+ */
+export function ResourceForm(props: ResourceFormProps) {
+  const { title, description, fields, submitting, error, result, initialValues, onSubmit } =
+    props;
+  const [values, setValues] = React.useState<Record<string, string>>({});
+  const [errors, setErrors] = React.useState<Record<string, string>>({});
+
+  // Prefill an edit form once the current record arrives — only primitive
+  // fields the form actually has an input for.
+  React.useEffect(() => {
+    if (initialValues === undefined) return;
+    const seed: Record<string, string> = {};
+    for (const field of fields) {
+      const v = initialValues[field.name];
+      if (v === undefined || v === null || typeof v === "object") continue;
+      seed[field.name] = String(v);
+    }
+    setValues(seed);
+  }, [initialValues, fields]);
+
+  const set = (name: string, value: string) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => (prev[name] ? { ...prev, [name]: "" } : prev));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const found: Record<string, string> = {};
+    for (const field of fields) {
+      const msg = fieldError(field, values[field.name] ?? "");
+      if (msg !== null) found[field.name] = msg;
+    }
+    if (Object.keys(found).length > 0) {
+      setErrors(found);
+      return;
+    }
+    const out: Record<string, unknown> = {};
+    for (const field of fields) {
+      const raw = values[field.name];
+      if (raw === undefined || raw === "") continue;
+      out[field.name] = coerce(raw, field);
+    }
+    onSubmit(out);
+  };
+
+  return (
+    <div className="max-w-2xl px-5 py-6 md:px-8">
+      <h1 className="mb-5 text-xl font-semibold tracking-tight">{title}</h1>
+      <Card>
+        <form onSubmit={handleSubmit}>
+          <CardHeader>
+            <CardTitle className="text-base">Details</CardTitle>
+            {description ? <CardDescription>{description}</CardDescription> : null}
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {fields.map((field) => {
+              const value = values[field.name] ?? "";
+              const label = (
+                <Label htmlFor={field.name} className="text-sm">
+                  {humanizeLabel(field.name)}
+                  {field.required ? (
+                    <span className="ml-0.5 text-destructive">*</span>
+                  ) : null}
+                </Label>
+              );
+              if (field.kind === "enum" && field.enumValues) {
+                return (
+                  <div key={field.name} className="space-y-1.5">
+                    {label}
+                    <Select
+                      value={value}
+                      onValueChange={(v) => set(field.name, v)}
+                    >
+                      <SelectTrigger id={field.name}>
+                        <SelectValue placeholder={`Select ${field.name}`} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {field.enumValues.map((opt) => (
+                          <SelectItem key={String(opt)} value={String(opt)}>
+                            {String(opt)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                );
+              }
+              if (field.kind === "boolean") {
+                return (
+                  <div key={field.name} className="space-y-1.5">
+                    {label}
+                    <Select
+                      value={value}
+                      onValueChange={(v) => set(field.name, v)}
+                    >
+                      <SelectTrigger id={field.name}>
+                        <SelectValue placeholder="Select" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="true">true</SelectItem>
+                        <SelectItem value="false">false</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                );
+              }
+              return (
+                <div key={field.name} className="space-y-1.5">
+                  {label}
+                  <Input
+                    id={field.name}
+                    type={inputType(field)}
+                    value={value}
+                    aria-invalid={errors[field.name] ? true : undefined}
+                    className={errors[field.name] ? "border-destructive" : undefined}
+                    placeholder={
+                      field.kind === "array" ? "comma,separated,values" : undefined
+                    }
+                    onChange={(e) => set(field.name, e.target.value)}
+                  />
+                  {errors[field.name] ? (
+                    <p className="text-xs text-destructive">{errors[field.name]}</p>
+                  ) : null}
+                </div>
+              );
+            })}
+            {fields.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                This request takes no body fields — submit to send.
+              </p>
+            ) : null}
+          </CardContent>
+          <CardFooter className="flex items-center gap-3">
+            <Button type="submit" disabled={submitting}>
+              {submitting ? "Saving…" : "Submit"}
+            </Button>
+            {error ? (
+              <span className="break-words text-sm text-destructive">{error}</span>
+            ) : null}
+            {result ? (
+              <span className="text-sm text-emerald-600">{result}</span>
+            ) : null}
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+}

package/template/components/auto/ResourceIcon.tsx

@@ -0,0 +1,88 @@
+import {
+  Activity,
+  BarChart3,
+  Bell,
+  Box,
+  Building2,
+  Calendar,
+  CreditCard,
+  Database,
+  FileText,
+  Folder,
+  Hash,
+  Image,
+  KeyRound,
+  Layers,
+  type LucideIcon,
+  MapPin,
+  MessageSquare,
+  Package,
+  Receipt,
+  Settings,
+  ShoppingCart,
+  Tag,
+  Ticket,
+  Truck,
+  Users,
+  Wallet,
+  Webhook,
+} from "lucide-react";
+import * as React from "react";
+
+/**
+ * Deterministic resource-name → icon mapping. Pure keyword match against the
+ * resource name, no domain config — `orders` gets a cart, `payments` a card,
+ * `users` people, and anything unmatched a neutral box. Gives every nav item,
+ * stat card, and landing link a glyph without an LLM choosing one.
+ */
+const RULES: Array<readonly [RegExp, LucideIcon]> = [
+  [/sale|order|cart|checkout|purchas/, ShoppingCart],
+  [/product|commodit|item|catalog|good|inventor/, Package],
+  [/user|customer|member|account|citizen|seller|admin|people|person|profile|contact/, Users],
+  [/payment|deposit|transaction|invoice|bill|charge|refund|ledger/, CreditCard],
+  [/wallet|balance|fund|mileage|point|reward|credit/, Wallet],
+  [/deliver|shipment|shipping|fulfil|logistic/, Truck],
+  [/folder|directory/, Folder],
+  [/file|document|attachment/, FileText],
+  [/image|photo|picture|media|gallery/, Image],
+  [/channel/, Hash],
+  [/section|categor|group|department|taxonom/, Layers],
+  [/coupon|discount|promotion|voucher/, Ticket],
+  [/tag|label|keyword/, Tag],
+  [/message|comment|question|review|reply|chat|note|post/, MessageSquare],
+  [/setting|config|system|preference/, Settings],
+  [/auth|login|session|token|credential|security/, KeyRound],
+  [/performance|metric|stat|analytic|report|dashboard|insight/, BarChart3],
+  [/webhook|event|hook|trigger|subscription/, Webhook],
+  [/notification|alert|reminder/, Bell],
+  [/calendar|schedule|appointment|booking/, Calendar],
+  [/location|address|place|region|geo|map/, MapPin],
+  [/company|organization|store|shop|brand|tenant|workspace/, Building2],
+  [/log|history|audit|activity|trace/, Activity],
+  [/receipt|tax/, Receipt],
+  [/data|record|entit/, Database],
+];
+
+function normalize(name: string): string {
+  return name
+    .replace(/^\//, "")
+    .replace(/[_/-]+/g, " ")
+    .toLowerCase();
+}
+
+export function iconFor(name: string): LucideIcon {
+  const norm = normalize(name);
+  for (const [re, Icon] of RULES) if (re.test(norm)) return Icon;
+  return Box;
+}
+
+export function ResourceIcon({
+  name,
+  className,
+}: {
+  name: string;
+  className?: string;
+}) {
+  const Icon = iconFor(name);
+  return <Icon className={className} aria-hidden />;
+}

package/template/components/auto/ResourceLanding.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import Link from "next/link";
+import * as React from "react";
+
+import { ResourceIcon } from "@/components/auto/ResourceIcon";
+
+export interface LandingLink {
+  href: string;
+  title: string;
+  description?: string;
+  /**
+   * Hub-ness — how many distinct child resources nest under this one
+   * (`/files/{id}/metadata`, `/files/{id}/versions` → `files` scores 2+). A
+   * genuine domain hub scores high; a leaf resource scores 0. Derived
+   * deterministically from the producer→consumer graph; used to surface the key
+   * resources above the long tail.
+   */
+  weight?: number;
+}
+
+export interface ResourceLandingProps {
+  title: string;
+  subtitle?: string;
+  links: LandingLink[];
+}
+
+/** Leading token of a resource path, singularized, for grouping. */
+function tokenOf(href: string): string {
+  const resource = href.replace(/^\//, "").split("/")[0] ?? "";
+  const first = resource.split("_")[0] ?? resource;
+  return first.length > 3 && first.endsWith("s") ? first.slice(0, -1) : first;
+}
+
+/**
+ * Group landing links by their leading resource token, mirroring the sidebar:
+ * a token shared by >=2 resources becomes its own section, lone resources fall
+ * under "Resources". Returns sections in a stable order (Resources first, then
+ * named groups alphabetically).
+ */
+function groupLinks(links: LandingLink[]): Array<[string, LandingLink[]]> {
+  const count = new Map<string, number>();
+  for (const l of links) count.set(tokenOf(l.href), (count.get(tokenOf(l.href)) ?? 0) + 1);
+  const sections = new Map<string, LandingLink[]>();
+  for (const l of links) {
+    const token = tokenOf(l.href);
+    const group =
+      (count.get(token) ?? 0) >= 2
+        ? token.charAt(0).toUpperCase() + token.slice(1)
+        : "Resources";
+    const bucket = sections.get(group) ?? [];
+    bucket.push(l);
+    sections.set(group, bucket);
+  }
+  return [...sections.entries()].sort((a, b) =>
+    a[0] === "Resources" ? -1 : b[0] === "Resources" ? 1 : a[0].localeCompare(b[0]),
+  );
+}
+
+/** A resource that parents >=2 distinct child resources is a domain hub. */
+const KEY_WEIGHT = 2;
+
+/**
+ * Order the landing into a hierarchy: the high-centrality "Key resources" lead
+ * (the hubs other resources hang off of), then the rest grouped by prefix. This
+ * is the IR's producer→consumer graph turned into visual priority — `files`,
+ * `folders`, `users` rise above a deep niche resource deterministically, no LLM
+ * guessing which resources "matter".
+ */
+function buildSections(links: LandingLink[]): Array<[string, LandingLink[]]> {
+  const key = links
+    .filter((l) => (l.weight ?? 0) >= KEY_WEIGHT)
+    .sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0) || a.title.localeCompare(b.title));
+  const rest = links.filter((l) => (l.weight ?? 0) < KEY_WEIGHT);
+  const sections: Array<[string, LandingLink[]]> = [];
+  if (key.length > 0) sections.push(["Key resources", key]);
+  sections.push(...groupLinks(rest));
+  return sections;
+}
+
+/**
+ * The grouped resource-link grid — sections mirroring the sidebar. Extracted so
+ * both the plain landing and the dashboard (which adds a stat strip above) reuse
+ * the exact same link layout instead of duplicating the grouping logic.
+ */
+export function ResourceLinks({ links }: { links: LandingLink[] }) {
+  const sections = buildSections(links);
+  if (links.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No resources were found in this API document.
+      </p>
+    );
+  }
+  return (
+    <div className="space-y-7">
+      {sections.map(([group, items]) => {
+        const isKey = group === "Key resources";
+        return (
+          <section key={group}>
+            <h2 className="mb-2.5 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              {group}
+              <span className="ml-2 text-muted-foreground/60">{items.length}</span>
+            </h2>
+            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {items.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={
+                    isKey
+                      ? "group flex items-center justify-between rounded-lg border border-border bg-card px-4 py-3 text-sm shadow-sm transition-colors hover:border-primary/50 hover:bg-muted/40"
+                      : "group flex items-center justify-between rounded-md border border-border/70 px-3.5 py-2.5 text-sm transition-colors hover:border-primary/40 hover:bg-muted/40"
+                  }
+                >
+                  <span className="flex min-w-0 items-center gap-2.5">
+                    <ResourceIcon
+                      name={link.href}
+                      className="h-4 w-4 shrink-0 text-muted-foreground"
+                    />
+                    <span className="truncate font-medium">{link.title}</span>
+                  </span>
+                  <span className="ml-2 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5">
+                    →
+                  </span>
+                </Link>
+              ))}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Universal landing hub. A dense, grouped list of resources — sections mirror
+ * the sidebar so a large API reads as a handful of areas, not a flat wall of
+ * identical cards. No per-card description: the title already names the
+ * resource, so repeating "Browse and search X" 36 times is pure noise.
+ */
+export function ResourceLanding(props: ResourceLandingProps) {
+  const { title, subtitle, links } = props;
+  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>
+      <ResourceLinks links={links} />
+    </div>
+  );
+}

package/template/components/auto/ResourceTable.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import Link from "next/link";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+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";
+
+export interface ResourceTableProps {
+  title: string;
+  description?: string;
+  /** One column per field of the row type — the whole schema, nothing dropped. */
+  columns: ColumnSpec[];
+  /** Rows as returned by the SDK. Typed `unknown` so the page never casts. */
+  rows: readonly unknown[];
+  loading: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  /** Build the detail-screen href for a row, or `null` when none exists. */
+  rowHref?: (row: Record<string, unknown>) => string | null;
+  emptyHint?: string;
+  /** Search box, when the list endpoint exposes a text search param. */
+  search?: { value: string; onChange: (value: string) => void };
+  /** Pager, when the list endpoint exposes a page/offset param. `hasNext` is a
+   *  best-effort guess (a full page implies more) since totals are rarely typed. */
+  pagination?: {
+    page: number;
+    onPrev: () => void;
+    onNext: () => void;
+    hasNext: boolean;
+  };
+}
+
+/**
+ * Universal list/table screen. Renders one column per `ColumnSpec` and one row
+ * per SDK record. Schema-driven: the column set is the entire row type, so the
+ * table is as dense and complete as the swagger allows — no field is ever
+ * silently omitted. Handles loading / error / empty / data states.
+ */
+export function ResourceTable(props: ResourceTableProps) {
+  const {
+    title,
+    description,
+    columns,
+    loading,
+    error,
+    onRetry,
+    rowHref,
+    emptyHint,
+    search,
+    pagination,
+  } = props;
+  // Defensive: never let a non-array `rows` (an optional collection field the
+  // server omitted) crash the table on `.length` / `.map`.
+  const rows: readonly unknown[] = Array.isArray(props.rows) ? props.rows : [];
+
+  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 {title.toLowerCase()}
+            </CardTitle>
+            <CardDescription className="break-words">{error}</CardDescription>
+          </CardHeader>
+          {onRetry ? (
+            <CardContent>
+              <Button variant="outline" size="sm" onClick={onRetry}>
+                Retry
+              </Button>
+            </CardContent>
+          ) : null}
+        </Card>
+      );
+    }
+    if (loading) {
+      return (
+        <div className="space-y-2">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} className="h-10 w-full" />
+          ))}
+        </div>
+      );
+    }
+    if (rows.length === 0) {
+      return (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">No {title.toLowerCase()} yet</CardTitle>
+            <CardDescription>
+              {emptyHint ?? "The list came back empty."}
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      );
+    }
+    return (
+      <div className="overflow-x-auto rounded-lg border bg-background shadow-sm">
+        <Table>
+          <TableHeader className="sticky top-0 bg-muted/60 backdrop-blur">
+            <TableRow className="hover:bg-transparent">
+              {columns.map((c) => (
+                <TableHead
+                  key={c.name}
+                  className="h-10 whitespace-nowrap text-xs font-medium uppercase tracking-wide text-muted-foreground"
+                >
+                  {humanizeLabel(c.name)}
+                </TableHead>
+              ))}
+              {rowHref ? <TableHead className="w-0" /> : null}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((raw, i) => {
+              const row = (raw ?? {}) as Record<string, unknown>;
+              const href = rowHref ? rowHref(row) : null;
+              return (
+                <TableRow key={i} className="group">
+                  {columns.map((c) => (
+                    <TableCell key={c.name} className="max-w-xs align-top text-sm">
+                      {formatCell(row[c.name], c)}
+                    </TableCell>
+                  ))}
+                  {rowHref ? (
+                    <TableCell className="w-0 text-right">
+                      {href ? (
+                        <Link
+                          href={href}
+                          className="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-muted-foreground opacity-0 transition group-hover:opacity-100 hover:bg-muted hover:text-foreground"
+                        >
+                          View →
+                        </Link>
+                      ) : null}
+                    </TableCell>
+                  ) : null}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </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>
+        <div className="flex items-center gap-3">
+          {search ? (
+            <Input
+              value={search.value}
+              onChange={(e) => search.onChange(e.target.value)}
+              placeholder="Search…"
+              className="h-9 w-48"
+            />
+          ) : null}
+          {!loading && !error ? (
+            <span className="hidden text-xs text-muted-foreground sm:inline">
+              {rows.length} row{rows.length === 1 ? "" : "s"} · {columns.length} cols
+            </span>
+          ) : null}
+          {onRetry ? (
+            <Button variant="outline" size="sm" onClick={onRetry}>
+              Refresh
+            </Button>
+          ) : null}
+        </div>
+      </div>
+      {body}
+      {pagination ? (
+        <div className="mt-4 flex items-center justify-end gap-2">
+          <span className="mr-1 text-xs text-muted-foreground">
+            Page {pagination.page}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={pagination.page <= 1}
+            onClick={pagination.onPrev}
+          >
+            ← Prev
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!pagination.hasNext}
+            onClick={pagination.onNext}
+          >
+            Next →
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}