@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/imessage/app/globals.css

@@ -0,0 +1,183 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+@source "../lib/**/*.{tsx,ts,jsx,js}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Messages-style palette. Neutral canvas, one accent: the iMessage blue for
+   the assistant's side of each thread. */
+:root {
+  --radius: 0.75rem;
+  --canvas: oklch(0.975 0.002 260);
+  --rail: oklch(0.955 0.003 260);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.2 0.01 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.01 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2 0.01 260);
+  --primary: oklch(0.2 0.01 260);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.955 0.003 260);
+  --secondary-foreground: oklch(0.25 0.01 260);
+  --muted: oklch(0.955 0.003 260);
+  --muted-foreground: oklch(0.52 0.012 260);
+  --accent: oklch(0.945 0.004 260);
+  --accent-foreground: oklch(0.2 0.01 260);
+  --destructive: oklch(0.58 0.21 27);
+  --border: oklch(0.2 0.01 260 / 8%);
+  --input: oklch(0.2 0.01 260 / 12%);
+  --ring: oklch(0.62 0.19 255);
+  --bubble-out: #0a84ff;
+  --bubble-out-text: #ffffff;
+  --bubble-in: #e9e9eb;
+  --bubble-in-text: #0b0b0c;
+  --warn: oklch(0.62 0.14 65);
+  --ok: oklch(0.62 0.15 150);
+}
+
+.dark {
+  --canvas: oklch(0.16 0.004 260);
+  --rail: oklch(0.19 0.004 260);
+  --background: oklch(0.21 0.004 260);
+  --foreground: oklch(0.96 0.003 260);
+  --card: oklch(0.23 0.004 260);
+  --card-foreground: oklch(0.96 0.003 260);
+  --popover: oklch(0.23 0.004 260);
+  --popover-foreground: oklch(0.96 0.003 260);
+  --primary: oklch(0.96 0.003 260);
+  --primary-foreground: oklch(0.2 0.01 260);
+  --secondary: oklch(0.27 0.005 260);
+  --secondary-foreground: oklch(0.96 0.003 260);
+  --muted: oklch(0.27 0.005 260);
+  --muted-foreground: oklch(0.7 0.01 260);
+  --accent: oklch(0.29 0.005 260);
+  --accent-foreground: oklch(0.96 0.003 260);
+  --destructive: oklch(0.68 0.19 25);
+  --border: oklch(1 0 0 / 9%);
+  --input: oklch(1 0 0 / 14%);
+  --bubble-in: #3b3b3d;
+  --bubble-in-text: #f5f5f7;
+}
+
+@theme inline {
+  --font-sans: var(--font-ui, ui-sans-serif), system-ui, sans-serif;
+  --font-mono: var(--font-code, ui-monospace), "SF Mono", monospace;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-canvas: var(--canvas);
+  --color-rail: var(--rail);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-bubble-out: var(--bubble-out);
+  --color-bubble-out-text: var(--bubble-out-text);
+  --color-bubble-in: var(--bubble-in);
+  --color-bubble-in-text: var(--bubble-in-text);
+  --color-warn: var(--warn);
+  --color-ok: var(--ok);
+  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html,
+  body {
+    @apply bg-canvas font-sans text-foreground antialiased;
+    font-feature-settings: "ss01", "cv11";
+  }
+  button {
+    cursor: pointer;
+  }
+}
+
+/* iMessage bubble tails: a curved notch on the bottom corner of the last
+   bubble in a run, drawn with two pseudo-elements. */
+.bubble {
+  position: relative;
+  border-radius: 1.15rem;
+  padding: 0.45rem 0.8rem 0.5rem;
+  line-height: 1.32;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.bubble-tail.bubble-out::before,
+.bubble-tail.bubble-in::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 1.1rem;
+  width: 1.1rem;
+}
+.bubble-tail.bubble-out::before {
+  right: -0.4rem;
+  background: var(--bubble-out);
+  border-bottom-left-radius: 0.9rem 0.75rem;
+}
+.bubble-tail.bubble-in::before {
+  left: -0.4rem;
+  background: var(--bubble-in);
+  border-bottom-right-radius: 0.9rem 0.75rem;
+}
+.bubble-tail.bubble-out::after,
+.bubble-tail.bubble-in::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 1.1rem;
+  width: 0.6rem;
+  background: var(--background);
+}
+.bubble-tail.bubble-out::after {
+  right: -0.6rem;
+  border-bottom-left-radius: 0.6rem;
+}
+.bubble-tail.bubble-in::after {
+  left: -0.6rem;
+  border-bottom-right-radius: 0.6rem;
+}
+
+@keyframes typing-dot {
+  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-2px); }
+}
+.typing-dot {
+  animation: typing-dot 1.2s var(--ease-spring) infinite;
+}
+
+@keyframes bubble-in {
+  from { opacity: 0; transform: translateY(6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.bubble-enter {
+  animation: bubble-in 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .typing-dot,
+  .bubble-enter {
+    animation: none;
+  }
+}

package/templates/imessage/app/layout.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+// Document shell. Fonts (Geist, Geist Mono) are declared in app.ts and
+// self-hosted by the build; Tailwind is compiled from app/globals.css. Both
+// are injected into <head> by the runtime.
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        <meta name="theme-color" content="#f7f7f9" />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/imessage/app/login/login-form.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import React, { useState } from "react";
+import { ApiError, persistSession } from "@pylonsync/client";
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(body),
+  });
+  const json = (await res.json().catch(() => ({}))) as T & { error?: { code?: string; message?: string } };
+  if (!res.ok || json.error) {
+    throw new ApiError(json.error?.code ?? `HTTP_${res.status}`, json.error?.message ?? "Request failed", res.status);
+  }
+  return json;
+}
+
+// Email code sign-in (POST /api/auth/magic/send, then /verify). The verified
+// code is what lets Pylon promote the owner email to admin.
+export function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [sent, setSent] = useState(false);
+  const [devCode, setDevCode] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      if (!sent) {
+        const res = await post<{ dev_code?: string }>("/api/auth/magic/send", { email });
+        // `pylon dev` returns the code in the response instead of emailing it.
+        setDevCode(res.dev_code ?? null);
+        setSent(true);
+        setPending(false);
+        return;
+      }
+      const session = await post<{ token: string; user_id?: string | null }>("/api/auth/magic/verify", {
+        email,
+        code: code.trim(),
+      });
+      persistSession({ token: session.token, user_id: session.user_id ?? "" });
+      // An identity change: load a fresh document so the server renders as the owner.
+      window.location.assign("/");
+    } catch (err) {
+      setError(err instanceof ApiError && err.code === "INVALID_CODE" ? "That code is wrong or expired." : err instanceof Error ? err.message : "Sign-in failed");
+      setPending(false);
+    }
+  }
+
+  const input =
+    "h-10 w-full rounded-xl border bg-background px-3.5 text-[15px] outline-none transition-shadow focus:shadow-[0_0_0_4px_rgba(10,132,255,0.14)] focus:border-bubble-out/50";
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-3">
+      <label className="block">
+        <span className="mb-1.5 block text-[13px] font-medium">Email</span>
+        <input
+          type="email"
+          required
+          autoComplete="email"
+          value={email}
+          disabled={sent}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@example.com"
+          className={input}
+        />
+      </label>
+      {sent ? (
+        <label className="block">
+          <span className="mb-1.5 block text-[13px] font-medium">Code</span>
+          <input
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            required
+            autoFocus
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="123456"
+            className={`${input} font-mono tracking-[0.3em]`}
+          />
+          <span className="mt-1.5 block text-[12px] text-muted-foreground">
+            {devCode ? `Development server: your code is ${devCode}.` : `Sent to ${email}. It expires in 10 minutes.`}
+          </span>
+        </label>
+      ) : null}
+      {error ? <p className="rounded-xl bg-destructive/10 px-3 py-2 text-[13px] text-destructive">{error}</p> : null}
+      <button
+        type="submit"
+        disabled={pending}
+        className="h-10 w-full rounded-full bg-bubble-out text-[14px] font-medium text-white transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] active:scale-[0.98] disabled:opacity-60"
+      >
+        {pending ? "One moment" : sent ? "Sign in" : "Send code"}
+      </button>
+      {sent ? (
+        <button
+          type="button"
+          onClick={() => {
+            setSent(false);
+            setCode("");
+            setDevCode(null);
+          }}
+          className="w-full text-[13px] text-muted-foreground hover:text-foreground"
+        >
+          Use a different email
+        </button>
+      ) : null}
+    </form>
+  );
+}

package/templates/imessage/app/login/page.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { LoginForm } from "./login-form";
+
+export const metadata: Metadata = { title: "Sign in", robots: "noindex" };
+
+// `/login` — the owner signs in with a one-time code sent to their email.
+export default function LoginPage({ auth, response }: PageProps) {
+  if (auth.user_id && !auth.user_id.startsWith("guest_") && auth.is_admin) response.redirect("/");
+  return (
+    <main className="flex min-h-[100dvh] items-center justify-center bg-canvas px-4">
+      <div className="w-full max-w-[380px] rounded-[1.6rem] bg-black/[0.03] p-1.5 ring-1 ring-black/[0.04] dark:bg-white/[0.04]">
+        <div className="rounded-[calc(1.6rem-0.375rem)] bg-background px-7 pb-7 pt-8 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_24px_48px_-24px_rgba(0,0,0,0.12)]">
+          <span className="flex size-11 items-center justify-center rounded-[0.9rem] bg-gradient-to-b from-[#5ac8fa] to-[#0a84ff] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_6px_16px_-6px_rgba(10,132,255,0.7)]">
+            <svg viewBox="0 0 24 24" className="size-6 fill-white" aria-hidden>
+              <path d="M12 3C6.5 3 2 6.8 2 11.5c0 2.6 1.4 4.9 3.6 6.5-.2 1.3-.9 2.6-2 3.5 2.2 0 4-.8 5.2-1.8 1 .3 2.1.4 3.2.4 5.5 0 10-3.8 10-8.6S17.5 3 12 3z" />
+            </svg>
+          </span>
+          <h1 className="mt-5 text-[22px] font-semibold tracking-[-0.02em]">Sign in to your assistant</h1>
+          <p className="mt-1 text-[13px] leading-relaxed text-muted-foreground">
+            Use the owner email set in PYLON_ADMIN_EMAILS. We send a six-digit code to prove it is yours.
+          </p>
+          <div className="mt-6">
+            <LoginForm />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/imessage/app/not-found.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+
+export default function NotFound() {
+  return (
+    <main className="flex min-h-[100dvh] flex-col items-center justify-center gap-3 px-4 text-center">
+      <h1 className="text-[22px] font-semibold tracking-[-0.02em]">Page not found</h1>
+      <Link href="/" className="text-[14px] font-medium text-bubble-out">
+        Back to messages
+      </Link>
+    </main>
+  );
+}

package/templates/imessage/app/page.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { Console } from "./console";
+import { ownerGate } from "./gate";
+
+export const metadata: Metadata = { title: "Messages", robots: "noindex" };
+
+// `/` — conversations. `?c=<conversation id>` opens one thread.
+export default function MessagesPage({ auth, response, searchParams }: PageProps) {
+  const blocked = ownerGate({ auth, response });
+  if (blocked) return blocked;
+  const c = typeof searchParams?.c === "string" ? searchParams.c : null;
+  return <Console view="messages" initialConversationId={c} />;
+}

package/templates/imessage/app/robots.ts

@@ -0,0 +1,6 @@
+import type { Robots } from "@pylonsync/react";
+
+// A private dashboard: nothing here should be indexed.
+export default function robots(): Robots {
+  return { rules: { userAgent: "*", disallow: "/" } };
+}

package/templates/imessage/app/setup/page.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { Console } from "../console";
+import { ownerGate } from "../gate";
+
+export const metadata: Metadata = { title: "Setup", robots: "noindex" };
+
+// `/setup` — transport, model, owner, and assistant settings.
+export default function SetupPage({ auth, response }: PageProps) {
+  const blocked = ownerGate({ auth, response });
+  if (blocked) return blocked;
+  return <Console view="setup" initialConversationId={null} />;
+}

package/templates/imessage/app/sign-out.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@pylonsync/client";
+
+export function SignOutAndRetry() {
+  const { signOut } = useAuth();
+  return (
+    <button
+      type="button"
+      onClick={async () => {
+        await signOut();
+        window.location.assign("/login");
+      }}
+      className="mt-6 rounded-full bg-foreground px-5 py-2 text-[13px] font-medium text-background"
+    >
+      Sign in with another email
+    </button>
+  );
+}