create-agentic-app 1.1.56 → 1.1.58

package/template/src/components/setup-checklist.tsx

@@ -1,162 +1,162 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { CheckCircle2, XCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-type DiagnosticsResponse = {
-  timestamp: string;
-  env: {
-    POSTGRES_URL: boolean;
-    BETTER_AUTH_SECRET: boolean;
-    GOOGLE_CLIENT_ID: boolean;
-    GOOGLE_CLIENT_SECRET: boolean;
-    OPENROUTER_API_KEY: boolean;
-    NEXT_PUBLIC_APP_URL: boolean;
-  };
-  database: {
-    connected: boolean;
-    schemaApplied: boolean;
-    error?: string;
-  };
-  auth: {
-    configured: boolean;
-    routeResponding: boolean | null;
-  };
-  ai: {
-    configured: boolean;
-  };
-  storage: {
-    configured: boolean;
-    type: "local" | "remote";
-  };
-  overallStatus: "ok" | "warn" | "error";
-};
-
-function StatusIcon({ ok }: { ok: boolean }) {
-  return ok ? (
-    <div title="ok">
-      <CheckCircle2 className="h-4 w-4 text-green-600" aria-label="ok" />
-    </div>
-  ) : (
-    <div title="not ok">
-      <XCircle className="h-4 w-4 text-red-600" aria-label="not-ok" />
-    </div>
-  );
-}
-
-export function SetupChecklist() {
-  const [data, setData] = useState<DiagnosticsResponse | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function load() {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await fetch("/api/diagnostics", { cache: "no-store" });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const json = (await res.json()) as DiagnosticsResponse;
-      setData(json);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to load diagnostics");
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    load();
-  }, []);
-
-  const steps = [
-    {
-      key: "env",
-      label: "Environment variables",
-      ok:
-        !!data?.env.POSTGRES_URL &&
-        !!data?.env.BETTER_AUTH_SECRET &&
-        !!data?.env.GOOGLE_CLIENT_ID &&
-        !!data?.env.GOOGLE_CLIENT_SECRET,
-      detail:
-        "Requires POSTGRES_URL, BETTER_AUTH_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET",
-    },
-    {
-      key: "db",
-      label: "Database connected & schema",
-      ok: !!data?.database.connected && !!data?.database.schemaApplied,
-      detail: data?.database.error
-        ? `Error: ${data.database.error}`
-        : undefined,
-    },
-    {
-      key: "auth",
-      label: "Auth configured",
-      ok: !!data?.auth.configured,
-      detail:
-        data?.auth.routeResponding === false
-          ? "Auth route not responding"
-          : undefined,
-    },
-    {
-      key: "ai",
-      label: "AI integration (optional)",
-      ok: !!data?.ai.configured,
-      detail: !data?.ai.configured
-        ? "Set OPENROUTER_API_KEY for AI chat"
-        : undefined,
-    },
-    {
-      key: "storage",
-      label: "File storage (optional)",
-      ok: true, // Always considered "ok" since local storage works
-      detail: data?.storage
-        ? data.storage.type === "remote"
-          ? "Using Vercel Blob storage"
-          : "Using local storage (public/uploads/)"
-        : undefined,
-    },
-  ] as const;
-
-  const completed = steps.filter((s) => s.ok).length;
-
-  return (
-    <div className="p-6 border rounded-lg text-left">
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h3 className="font-semibold">Setup checklist</h3>
-          <p className="text-sm text-muted-foreground">
-            {completed}/{steps.length} completed
-          </p>
-        </div>
-        <Button size="sm" onClick={load} disabled={loading}>
-          {loading ? "Checking..." : "Re-check"}
-        </Button>
-      </div>
-
-      {error ? <div className="text-sm text-destructive">{error}</div> : null}
-
-      <ul className="space-y-2">
-        {steps.map((s) => (
-          <li key={s.key} className="flex items-start gap-2">
-            <div className="mt-0.5">
-              <StatusIcon ok={Boolean(s.ok)} />
-            </div>
-            <div>
-              <div className="font-medium">{s.label}</div>
-              {s.detail ? (
-                <div className="text-sm text-muted-foreground">{s.detail}</div>
-              ) : null}
-            </div>
-          </li>
-        ))}
-      </ul>
-
-      {data ? (
-        <div className="mt-4 text-xs text-muted-foreground">
-          Last checked: {new Date(data.timestamp).toLocaleString()}
-        </div>
-      ) : null}
-    </div>
-  );
-}
+"use client";
+
+import { useEffect, useState } from "react";
+import { CheckCircle2, XCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type DiagnosticsResponse = {
+  timestamp: string;
+  env: {
+    POSTGRES_URL: boolean;
+    BETTER_AUTH_SECRET: boolean;
+    GOOGLE_CLIENT_ID: boolean;
+    GOOGLE_CLIENT_SECRET: boolean;
+    OPENROUTER_API_KEY: boolean;
+    NEXT_PUBLIC_APP_URL: boolean;
+  };
+  database: {
+    connected: boolean;
+    schemaApplied: boolean;
+    error?: string;
+  };
+  auth: {
+    configured: boolean;
+    routeResponding: boolean | null;
+  };
+  ai: {
+    configured: boolean;
+  };
+  storage: {
+    configured: boolean;
+    type: "local" | "remote";
+  };
+  overallStatus: "ok" | "warn" | "error";
+};
+
+function StatusIcon({ ok }: { ok: boolean }) {
+  return ok ? (
+    <div title="ok">
+      <CheckCircle2 className="h-4 w-4 text-green-600" aria-label="ok" />
+    </div>
+  ) : (
+    <div title="not ok">
+      <XCircle className="h-4 w-4 text-red-600" aria-label="not-ok" />
+    </div>
+  );
+}
+
+export function SetupChecklist() {
+  const [data, setData] = useState<DiagnosticsResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function load() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/diagnostics", { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json = (await res.json()) as DiagnosticsResponse;
+      setData(json);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load diagnostics");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const steps = [
+    {
+      key: "env",
+      label: "Environment variables",
+      ok:
+        !!data?.env.POSTGRES_URL &&
+        !!data?.env.BETTER_AUTH_SECRET &&
+        !!data?.env.GOOGLE_CLIENT_ID &&
+        !!data?.env.GOOGLE_CLIENT_SECRET,
+      detail:
+        "Requires POSTGRES_URL, BETTER_AUTH_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET",
+    },
+    {
+      key: "db",
+      label: "Database connected & schema",
+      ok: !!data?.database.connected && !!data?.database.schemaApplied,
+      detail: data?.database.error
+        ? `Error: ${data.database.error}`
+        : undefined,
+    },
+    {
+      key: "auth",
+      label: "Auth configured",
+      ok: !!data?.auth.configured,
+      detail:
+        data?.auth.routeResponding === false
+          ? "Auth route not responding"
+          : undefined,
+    },
+    {
+      key: "ai",
+      label: "AI integration (optional)",
+      ok: !!data?.ai.configured,
+      detail: !data?.ai.configured
+        ? "Set OPENROUTER_API_KEY for AI chat"
+        : undefined,
+    },
+    {
+      key: "storage",
+      label: "File storage (optional)",
+      ok: true, // Always considered "ok" since local storage works
+      detail: data?.storage
+        ? data.storage.type === "remote"
+          ? "Using Vercel Blob storage"
+          : "Using local storage (public/uploads/)"
+        : undefined,
+    },
+  ] as const;
+
+  const completed = steps.filter((s) => s.ok).length;
+
+  return (
+    <div className="p-6 border rounded-lg text-left">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="font-semibold">Setup checklist</h3>
+          <p className="text-sm text-muted-foreground">
+            {completed}/{steps.length} completed
+          </p>
+        </div>
+        <Button size="sm" onClick={load} disabled={loading}>
+          {loading ? "Checking..." : "Re-check"}
+        </Button>
+      </div>
+
+      {error ? <div className="text-sm text-destructive">{error}</div> : null}
+
+      <ul className="space-y-2">
+        {steps.map((s) => (
+          <li key={s.key} className="flex items-start gap-2">
+            <div className="mt-0.5">
+              <StatusIcon ok={Boolean(s.ok)} />
+            </div>
+            <div>
+              <div className="font-medium">{s.label}</div>
+              {s.detail ? (
+                <div className="text-sm text-muted-foreground">{s.detail}</div>
+              ) : null}
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      {data ? (
+        <div className="mt-4 text-xs text-muted-foreground">
+          Last checked: {new Date(data.timestamp).toLocaleString()}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/template/src/components/site-footer.tsx

@@ -2,8 +2,8 @@ import { GitHubStars } from "./ui/github-stars";
 
 export function SiteFooter() {
   return (
-    <footer className="border-t py-6 text-center text-sm text-muted-foreground">
-      <div className="container mx-auto px-4">
+    <footer className="border-t py-4 sm:py-6 text-center text-sm text-muted-foreground">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex flex-col items-center space-y-3">
           <GitHubStars repo="leonvanzyl/agentic-coding-starter-kit" />
           <p>

package/template/src/components/site-header.tsx

@@ -15,10 +15,10 @@ export function SiteHeader() {
       </a>
       <header className="border-b" role="banner">
         <nav
-          className="container mx-auto px-4 py-4 flex justify-between items-center"
+          className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex justify-between items-center"
           aria-label="Main navigation"
         >
-          <h1 className="text-2xl font-bold">
+          <h1 className="text-xl sm:text-2xl font-bold">
             <Link
               href="/"
               className="flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
@@ -35,7 +35,7 @@ export function SiteHeader() {
               </span>
             </Link>
           </h1>
-          <div className="flex items-center gap-4" role="group" aria-label="User actions">
+          <div className="flex items-center gap-2 sm:gap-4" role="group" aria-label="User actions">
             <UserProfile />
             <ModeToggle />
           </div>