@pylonsync/create-pylon 0.19.1 → 0.21.0

package/templates/ai-chat/lib/highlight.ts

@@ -0,0 +1,107 @@
+// A small syntax highlighter for code blocks in replies. It splits code into
+// comment, string, number, keyword, and plain tokens with one pass per line
+// set. It does not parse the language; it colors what most languages share.
+
+export type TokenKind = "comment" | "string" | "number" | "keyword" | "fn" | "plain";
+
+export interface Token {
+  kind: TokenKind;
+  text: string;
+}
+
+const KEYWORDS: Record<string, string[]> = {
+  js: "const let var function return if else for while do switch case break continue new class extends import export from default async await try catch finally throw typeof instanceof in of this null undefined true false void yield interface type enum implements public private protected readonly as satisfies keyof".split(" "),
+  py: "def return if elif else for while in not and or is import from as class try except finally raise with lambda yield pass break continue None True False async await global nonlocal self".split(" "),
+  sql: "select from where and or not insert into values update set delete create table index on join left right inner outer group by order having limit offset as distinct null is in exists primary key references unique default begin commit returning with case when then else end".split(" "),
+  rust: "fn let mut pub use mod struct enum impl trait for in if else match loop while return self Self crate super where as async await move ref const static true false Some None Ok Err".split(" "),
+  go: "func package import var const type struct interface map chan go defer return if else for range switch case default break continue nil true false".split(" "),
+  sh: "if then else elif fi for in do done while case esac function return export local echo cd set".split(" "),
+};
+
+const ALIASES: Record<string, string> = {
+  js: "js", jsx: "js", ts: "js", tsx: "js", javascript: "js", typescript: "js", json: "js",
+  py: "py", python: "py",
+  sql: "sql", postgres: "sql", postgresql: "sql", sqlite: "sql",
+  rs: "rust", rust: "rust",
+  go: "go", golang: "go",
+  sh: "sh", bash: "sh", shell: "sh", zsh: "sh", console: "sh",
+};
+
+function family(lang: string): string | null {
+  return ALIASES[lang.toLowerCase()] ?? null;
+}
+
+export function highlight(code: string, lang: string): Token[] {
+  const fam = family(lang);
+  if (!fam) return [{ kind: "plain", text: code }];
+  const caseInsensitive = fam === "sql";
+  const words = new Set(KEYWORDS[fam].map((w) => (caseInsensitive ? w.toLowerCase() : w)));
+  const lineComment = fam === "py" || fam === "sh" ? "#" : fam === "sql" ? "--" : "//";
+  const blockComments = fam === "js" || fam === "rust" || fam === "go" || fam === "sql";
+
+  const tokens: Token[] = [];
+  let plain = "";
+  const push = (kind: TokenKind, text: string) => {
+    if (plain) {
+      tokens.push({ kind: "plain", text: plain });
+      plain = "";
+    }
+    tokens.push({ kind, text });
+  };
+
+  let i = 0;
+  while (i < code.length) {
+    const rest = code.slice(i);
+
+    if (rest.startsWith(lineComment)) {
+      const end = code.indexOf("\n", i);
+      const stop = end === -1 ? code.length : end;
+      push("comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    if (blockComments && rest.startsWith("/*")) {
+      const end = code.indexOf("*/", i + 2);
+      const stop = end === -1 ? code.length : end + 2;
+      push("comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+
+    const ch = code[i];
+    if (ch === '"' || ch === "'" || (ch === "`" && fam === "js")) {
+      let j = i + 1;
+      while (j < code.length && code[j] !== ch) {
+        if (code[j] === "\\") j++;
+        if (code[j] === "\n" && ch !== "`") break;
+        j++;
+      }
+      push("string", code.slice(i, Math.min(j + 1, code.length)));
+      i = Math.min(j + 1, code.length);
+      continue;
+    }
+
+    const num = rest.match(/^\d[\d_]*(\.\d+)?/);
+    if (num && (i === 0 || !/[\w$]/.test(code[i - 1]))) {
+      push("number", num[0]);
+      i += num[0].length;
+      continue;
+    }
+
+    const word = rest.match(/^[A-Za-z_$][\w$]*/);
+    if (word) {
+      const w = word[0];
+      const key = caseInsensitive ? w.toLowerCase() : w;
+      if (words.has(key)) push("keyword", w);
+      else if (code[i + w.length] === "(") push("fn", w);
+      else plain += w;
+      i += w.length;
+      continue;
+    }
+
+    plain += ch;
+    i++;
+  }
+  if (plain) tokens.push({ kind: "plain", text: plain });
+  return tokens;
+}

package/templates/ai-chat/lib/markdown.ts

@@ -0,0 +1,317 @@
+// A small Markdown parser for assistant replies. It returns a plain tree that
+// components/chat/markdown.tsx renders as React elements, so model output is
+// never injected as HTML. It covers what models emit: headings, paragraphs,
+// bullet and numbered lists (one nesting level), block quotes, fenced code,
+// tables, horizontal rules, and inline code, bold, italic, strikethrough, and
+// links. An unclosed code fence runs to the end of the text, which keeps a
+// reply readable while it streams.
+
+export type Inline =
+  | { type: "text"; text: string }
+  | { type: "code"; text: string }
+  | { type: "strong"; children: Inline[] }
+  | { type: "em"; children: Inline[] }
+  | { type: "del"; children: Inline[] }
+  | { type: "link"; href: string; children: Inline[] };
+
+export interface ListItem {
+  children: Inline[];
+  sublist?: { ordered: boolean; start: number; items: ListItem[] };
+}
+
+export type Block =
+  | { type: "heading"; level: 1 | 2 | 3 | 4; children: Inline[] }
+  | { type: "paragraph"; children: Inline[] }
+  | { type: "code"; lang: string; code: string; closed: boolean }
+  | { type: "list"; ordered: boolean; start: number; items: ListItem[] }
+  | { type: "quote"; children: Block[] }
+  | { type: "table"; align: ("left" | "center" | "right" | null)[]; head: Inline[][]; rows: Inline[][][] }
+  | { type: "hr" };
+
+const FENCE = /^\s{0,3}(`{3,}|~{3,})\s*([\w+#.-]*)/;
+const HEADING = /^\s{0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
+const BULLET = /^(\s*)[-*+]\s+(.*)$/;
+const ORDERED = /^(\s*)(\d{1,9})[.)]\s+(.*)$/;
+const HR = /^\s{0,3}([-*_])(\s*\1){2,}\s*$/;
+const QUOTE = /^\s{0,3}>\s?(.*)$/;
+const TABLE_SEP = /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/;
+
+function isBlockStart(line: string): boolean {
+  return (
+    FENCE.test(line) ||
+    HEADING.test(line) ||
+    BULLET.test(line) ||
+    ORDERED.test(line) ||
+    HR.test(line) ||
+    QUOTE.test(line)
+  );
+}
+
+function splitRow(line: string): string[] {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|") && !s.endsWith("\\|")) s = s.slice(0, -1);
+  return s.split(/(?<!\\)\|/).map((c) => c.trim().replace(/\\\|/g, "|"));
+}
+
+export function parseMarkdown(src: string): Block[] {
+  const lines = src.replace(/\r\n?/g, "\n").split("\n");
+  const blocks: Block[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+
+    const fence = line.match(FENCE);
+    if (fence) {
+      const marker = fence[1];
+      const code: string[] = [];
+      let closed = false;
+      i++;
+      while (i < lines.length) {
+        const l = lines[i];
+        if (l.trim().startsWith(marker[0].repeat(marker.length)) && l.trim().replace(/[`~]/g, "") === "") {
+          closed = true;
+          i++;
+          break;
+        }
+        code.push(l);
+        i++;
+      }
+      blocks.push({ type: "code", lang: fence[2] ?? "", code: code.join("\n"), closed });
+      continue;
+    }
+
+    const heading = line.match(HEADING);
+    if (heading) {
+      const level = Math.min(heading[1].length, 4) as 1 | 2 | 3 | 4;
+      blocks.push({ type: "heading", level, children: parseInline(heading[2]) });
+      i++;
+      continue;
+    }
+
+    if (HR.test(line)) {
+      blocks.push({ type: "hr" });
+      i++;
+      continue;
+    }
+
+    if (QUOTE.test(line)) {
+      const inner: string[] = [];
+      while (i < lines.length && QUOTE.test(lines[i])) {
+        inner.push(lines[i].match(QUOTE)![1]);
+        i++;
+      }
+      blocks.push({ type: "quote", children: parseMarkdown(inner.join("\n")) });
+      continue;
+    }
+
+    if (BULLET.test(line) || ORDERED.test(line)) {
+      const { block, next } = parseList(lines, i);
+      blocks.push(block);
+      i = next;
+      continue;
+    }
+
+    if (line.includes("|") && i + 1 < lines.length && TABLE_SEP.test(lines[i + 1])) {
+      const head = splitRow(line);
+      const align = splitRow(lines[i + 1]).map((c) => {
+        const left = c.startsWith(":");
+        const right = c.endsWith(":");
+        return left && right ? "center" : right ? "right" : left ? "left" : null;
+      });
+      i += 2;
+      const rows: Inline[][][] = [];
+      while (i < lines.length && lines[i].includes("|") && lines[i].trim() !== "") {
+        const cells = splitRow(lines[i]);
+        rows.push(head.map((_, c) => parseInline(cells[c] ?? "")));
+        i++;
+      }
+      blocks.push({ type: "table", align, head: head.map(parseInline), rows });
+      continue;
+    }
+
+    const para: string[] = [];
+    while (i < lines.length && lines[i].trim() !== "" && !(para.length > 0 && isBlockStart(lines[i]))) {
+      para.push(lines[i].trim());
+      i++;
+    }
+    blocks.push({ type: "paragraph", children: parseInline(para.join("\n")) });
+  }
+
+  return blocks;
+}
+
+function parseList(lines: string[], start: number): { block: Block; next: number } {
+  const first = lines[start];
+  const ordered = ORDERED.test(first) && !BULLET.test(first);
+  const baseIndent = (first.match(/^(\s*)/)?.[1] ?? "").length;
+  const startNum = ordered ? Number(first.match(ORDERED)![2]) : 1;
+  const items: ListItem[] = [];
+  let i = start;
+
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.trim() === "") {
+      // A blank line inside a list continues it only when the next line is
+      // another item at the same level or deeper.
+      const nxt = lines[i + 1];
+      if (nxt !== undefined && (BULLET.test(nxt) || ORDERED.test(nxt))) {
+        i++;
+        continue;
+      }
+      break;
+    }
+    const m = ordered ? line.match(ORDERED) : line.match(BULLET);
+    const other = ordered ? line.match(BULLET) : line.match(ORDERED);
+    const indent = (line.match(/^(\s*)/)?.[1] ?? "").length;
+
+    if (indent > baseIndent && (m || other) && items.length > 0) {
+      const { block, next } = parseList(lines, i);
+      if (block.type === "list") {
+        items[items.length - 1].sublist = { ordered: block.ordered, start: block.start, items: block.items };
+      }
+      i = next;
+      continue;
+    }
+    if (indent < baseIndent) break;
+    if (m && indent === baseIndent) {
+      const text = ordered ? m[3] : m[2];
+      items.push({ children: parseInline(text) });
+      i++;
+      continue;
+    }
+    if (other && indent === baseIndent) break;
+    if (isBlockStart(line) && indent <= baseIndent) break;
+    // Lazy continuation of the previous item's text.
+    if (items.length > 0) {
+      items[items.length - 1].children.push({ type: "text", text: "\n" }, ...parseInline(line.trim()));
+    }
+    i++;
+  }
+  return { block: { type: "list", ordered, start: startNum, items }, next: i };
+}
+
+/* -------------------------------- inline -------------------------------- */
+
+// Links render only for these schemes. Anything else (javascript:, data:,
+// vbscript:) renders as plain text.
+export function safeHref(href: string): string | null {
+  const h = href.trim();
+  if (/^(https?:|mailto:)/i.test(h)) return h;
+  if (h.startsWith("/") && !h.startsWith("//")) return h;
+  if (h.startsWith("#")) return h;
+  return null;
+}
+
+export function parseInline(text: string): Inline[] {
+  const out: Inline[] = [];
+  let buf = "";
+  let i = 0;
+
+  const flush = () => {
+    if (buf) {
+      out.push({ type: "text", text: buf });
+      buf = "";
+    }
+  };
+
+  while (i < text.length) {
+    const ch = text[i];
+
+    if (ch === "\\" && i + 1 < text.length && /[\\`*_~[\]()#|>-]/.test(text[i + 1])) {
+      buf += text[i + 1];
+      i += 2;
+      continue;
+    }
+
+    if (ch === "`") {
+      let ticks = 1;
+      while (text[i + ticks] === "`") ticks++;
+      const marker = "`".repeat(ticks);
+      const end = text.indexOf(marker, i + ticks);
+      if (end !== -1) {
+        flush();
+        out.push({ type: "code", text: text.slice(i + ticks, end).replace(/^ (.*) $/, "$1") });
+        i = end + ticks;
+        continue;
+      }
+    }
+
+    if ((ch === "*" || ch === "_") && text[i + 1] === ch) {
+      const marker = ch + ch;
+      const end = text.indexOf(marker, i + 2);
+      if (end > i + 2) {
+        flush();
+        out.push({ type: "strong", children: parseInline(text.slice(i + 2, end)) });
+        i = end + 2;
+        continue;
+      }
+    }
+
+    if (ch === "~" && text[i + 1] === "~") {
+      const end = text.indexOf("~~", i + 2);
+      if (end > i + 2) {
+        flush();
+        out.push({ type: "del", children: parseInline(text.slice(i + 2, end)) });
+        i = end + 2;
+        continue;
+      }
+    }
+
+    if ((ch === "*" || ch === "_") && text[i + 1] !== " " && text[i + 1] !== undefined) {
+      // `_` only opens emphasis at a word boundary, so snake_case stays text.
+      const boundary = ch === "*" || i === 0 || /[\s(]/.test(text[i - 1]);
+      let end = text.indexOf(ch, i + 1);
+      while (end !== -1 && text[end + 1] === ch) end = text.indexOf(ch, end + 2);
+      if (boundary && end > i + 1 && text[end - 1] !== " ") {
+        flush();
+        out.push({ type: "em", children: parseInline(text.slice(i + 1, end)) });
+        i = end + 1;
+        continue;
+      }
+    }
+
+    if (ch === "[") {
+      const close = text.indexOf("]", i + 1);
+      if (close !== -1 && text[close + 1] === "(") {
+        const end = text.indexOf(")", close + 2);
+        if (end !== -1) {
+          const label = text.slice(i + 1, close);
+          const href = safeHref(text.slice(close + 2, end));
+          flush();
+          if (href) out.push({ type: "link", href, children: parseInline(label) });
+          else out.push(...parseInline(label));
+          i = end + 1;
+          continue;
+        }
+      }
+    }
+
+    if ((ch === "h" || ch === "H") && /^https?:\/\/[^\s<]+/i.test(text.slice(i)) && (i === 0 || /[\s(]/.test(text[i - 1]))) {
+      const m = text.slice(i).match(/^https?:\/\/[^\s<]+/i)!;
+      let url = m[0];
+      while (/[.,;:!?)]$/.test(url)) url = url.slice(0, -1);
+      flush();
+      out.push({ type: "link", href: url, children: [{ type: "text", text: url }] });
+      i += url.length;
+      continue;
+    }
+
+    buf += ch;
+    i++;
+  }
+  flush();
+  return out;
+}
+
+export function inlineText(nodes: Inline[]): string {
+  return nodes
+    .map((n) => (n.type === "text" || n.type === "code" ? n.text : inlineText(n.children)))
+    .join("");
+}

package/templates/ai-chat/lib/provider.ts

@@ -0,0 +1,38 @@
+// Whether the server has a model provider configured, derived from the same
+// environment variables Pylon reads for `ctx.llm`:
+//
+//   PYLON_LLM_PROVIDER (or PYLON_AI_PROVIDER) = "anthropic" | "openai"
+//   ANTHROPIC_API_KEY / OPENAI_API_KEY (or PYLON_AI_API_KEY)
+//
+// With no provider set, an ANTHROPIC_API_KEY selects Anthropic and an
+// OPENAI_API_KEY selects OpenAI. The result carries no key material.
+
+export type ProviderName = "anthropic" | "openai";
+
+export interface ProviderStatus {
+  configured: boolean;
+  provider: ProviderName | null;
+}
+
+type Env = Record<string, string | undefined>;
+
+function present(env: Env, key: string): boolean {
+  const v = env[key];
+  return typeof v === "string" && v.trim().length > 0;
+}
+
+export function providerStatus(env: Env): ProviderStatus {
+  const explicit = (env.PYLON_LLM_PROVIDER || env.PYLON_AI_PROVIDER || "").trim();
+  if (explicit === "anthropic") {
+    const ok = present(env, "ANTHROPIC_API_KEY") || present(env, "PYLON_AI_API_KEY");
+    return { configured: ok, provider: "anthropic" };
+  }
+  if (explicit === "openai") {
+    const ok = present(env, "OPENAI_API_KEY") || present(env, "PYLON_AI_API_KEY");
+    return { configured: ok, provider: "openai" };
+  }
+  if (explicit !== "") return { configured: false, provider: null };
+  if (present(env, "ANTHROPIC_API_KEY")) return { configured: true, provider: "anthropic" };
+  if (present(env, "OPENAI_API_KEY")) return { configured: true, provider: "openai" };
+  return { configured: false, provider: null };
+}

package/templates/ai-chat/lib/site.config.ts

@@ -1,8 +1,8 @@
-// Brand-specific copy and settings live here. The layout, chat UI,
-// create-pylon scaffolder, and Mast all read this file.
+// Brand-specific copy and settings. The layout, the chat UI, the server
+// functions (system prompt, model allowlist, limits), and the scaffolder read
+// this file. Replace the values and keep the shape.
 //
-// Colors live here (applied as CSS variables on <html> in app/layout.tsx).
-// Fictional demo copy. Replace the values and keep the shape.
+// Colors are applied as CSS variables on <html> in app/layout.tsx.
 
 /* ----------------------------- types ----------------------------- */
 
@@ -22,27 +22,33 @@ export type BaseConfig = {
   seo: { title: string; description: string };
 };
 
-// A selectable model. `id` is what's sent to /api/ai/stream; `provider` is just
-// a label for the picker. Which models are actually accepted is gated server-side
-// by PYLON_AI_MODELS_ALLOWED (+ the configured provider / gateway) — see README.
-export type ChatModel = { id: string; label: string; provider: string };
+// A selectable model. `id` is sent to the provider; `label` and `note` are
+// shown in the picker. Only ids listed here are accepted by the `respond`
+// function, and app.ts passes the same list to `llm({ allowedModels })`.
+export type ChatModel = { id: string; label: string; note: string };
+
+export type Suggestion = { title: string; prompt: string };
 
 export type ChatConfig = BaseConfig & {
   chat: {
-    assistantName: string;
-    // Prepended as a system message on every request — sets the assistant's
-    // persona. Edit to retune the assistant without touching code.
+    // Sent as the system prompt on every request.
     systemPrompt: string;
     emptyHeadline: string;
-    emptySubcopy: string;
     inputPlaceholder: string;
-    // Starter prompts shown on the empty state; clicking one sends it.
-    suggestions: string[];
-    // The model picker. Curate to your setup: a single provider's models, or —
-    // with an OpenRouter-style gateway (PYLON_AI_PROVIDER=custom) — models across
-    // providers in one list. The selected id is sent as `model` per request.
+    // Starter prompts on the empty state. Picking one sends `prompt`.
+    suggestions: Suggestion[];
     models: ChatModel[];
     defaultModel: string;
+    // Upper bound on tokens per reply.
+    maxOutputTokens: number;
+    // Messages longer than this are refused by the server.
+    maxInputChars: number;
+    // Replies per rolling hour. `guest` and `user` are per person;
+    // `allGuests` caps every guest session together, since anyone can start a
+    // new guest session.
+    repliesPerHour: { guest: number; user: number; allGuests: number };
+    // Model ids a guest session may use. Accounts may use every model.
+    guestModels: string[];
   };
 };
 
@@ -54,7 +60,7 @@ export const siteConfig: ChatConfig = {
     letter: "L",
     domain: "lumen.chat",
     email: "hello@lumen.example",
-    footerBlurb: "A fast, streaming AI assistant built on Pylon.",
+    footerBlurb: "A streaming AI assistant built on Pylon.",
     copyrightName: "Lumen",
     socials: [
       {
@@ -65,38 +71,48 @@ export const siteConfig: ChatConfig = {
     ],
   },
 
-  colors: { brand: "#6d28d9", brandSoft: "#ede9fe", paper: "#faf9fc" },
+  colors: { brand: "#1d5c4d", brandSoft: "#e3eeea", paper: "#f4f1ea" },
 
   seo: {
-    title: "Lumen — a fast streaming AI assistant.",
+    title: "Lumen, a streaming AI assistant",
     description:
-      "A streaming AI chat app built on Pylon. Conversations sync across your tabs and devices in realtime; your API key never leaves the server.",
+      "Ask questions and read answers as they stream. Conversations sync across your tabs and devices, and your API key stays on the server.",
   },
 
   chat: {
-    assistantName: "Lumen",
     systemPrompt:
-      "You are Lumen, a friendly, concise AI assistant. Answer clearly and get to the point. Use Markdown when it helps.",
-    emptyHeadline: "How can I help?",
-    emptySubcopy: "Ask anything. Your conversations are saved and stay in sync across your tabs.",
-    inputPlaceholder: "Message Lumen…",
+      "You are Lumen, a helpful AI assistant. Answer clearly and get to the point. Use Markdown: short paragraphs, lists where they help, and fenced code blocks with a language tag for code.",
+    emptyHeadline: "What can I help with?",
+    inputPlaceholder: "Message Lumen",
     suggestions: [
-      "Explain WebSockets like I'm five.",
-      "Draft a friendly out-of-office reply.",
-      "Give me 5 dinner ideas using chicken and rice.",
-      "What's the difference between SSR and SSG?",
+      {
+        title: "Explain a concept",
+        prompt: "Explain how WebSockets differ from Server-Sent Events, and when to pick each.",
+      },
+      {
+        title: "Write code",
+        prompt: "Write a TypeScript function that retries a fetch with exponential backoff and jitter.",
+      },
+      {
+        title: "Edit my writing",
+        prompt: "Rewrite this to be shorter and clearer: \"We are reaching out to let you know that we have made some changes to our pricing.\"",
+      },
+      {
+        title: "Plan something",
+        prompt: "Plan a 3-day trip to Lisbon for someone who likes food markets and walking.",
+      },
     ],
-    // Current Claude models (verify the ids for your provider before shipping —
-    // model names move fast). Whichever you keep here must be in
-    // PYLON_AI_MODELS_ALLOWED for switching to work (see .env.example). To offer
-    // models from OTHER providers (OpenAI, Google, …) in the same list, route
-    // through an OpenRouter-style gateway (PYLON_AI_PROVIDER=custom +
-    // PYLON_AI_BASE_URL) and use that gateway's slugs here.
+    // Verify the ids for your provider before shipping. Every id here is
+    // accepted by the server; remove the ones you do not want to pay for.
     models: [
-      { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6", provider: "Anthropic" },
-      { id: "claude-opus-4-8", label: "Claude Opus 4.8", provider: "Anthropic" },
-      { id: "claude-haiku-4-5", label: "Claude Haiku 4.5", provider: "Anthropic" },
+      { id: "claude-sonnet-4-6", label: "Claude Sonnet 4.6", note: "Balanced speed and quality" },
+      { id: "claude-opus-4-8", label: "Claude Opus 4.8", note: "Best for hard problems" },
+      { id: "claude-haiku-4-5", label: "Claude Haiku 4.5", note: "Fastest replies" },
     ],
     defaultModel: "claude-sonnet-4-6",
+    maxOutputTokens: 4096,
+    maxInputChars: 12000,
+    repliesPerHour: { guest: 20, user: 100, allGuests: 300 },
+    guestModels: ["claude-sonnet-4-6", "claude-haiku-4-5"],
   },
 };