Pied Piper Onboarding

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5import { ClaudeMessage } from "@/registry/brainless/claude/claude-message";
6import { ClaudeThinking } from "@/registry/brainless/claude/claude-thinking";
7import { ClaudePrompt } from "@/registry/brainless/claude/claude-prompt";
8import { ClaudeTodoList, type Todo } from "@/registry/brainless/claude/claude-todo-list";
9 
10/**
11 * PiedPiperOnboarding — an interactive sign-up flow built from brainless
12 * components. A Claude-style header with a terminal Pied Piper logo, typed
13 * assistant lines, thinking between turns, and the real ❯ composer for input.
14 */
15 
16const GREEN = "#39b54a";
17const GREEN_DIM = "#2a8a38";
18const GRAY = "#949494";
19const FG = "#c0caf5";
20 
21// Side-view flute / pipe — Silicon Valley Pied Piper, as a 1-bit terminal sprite.
22const LOGO_BITS = [
23  "000000001111000000",
24  "000000111111110000",
25  "000011111111111100",
26  "001111010101011110",
27  "011111111111111111",
28  "001111010101011110",
29  "000011111111111100",
30  "000000111111110000",
31  "000000001111000000",
32];
33 
34function PiedPiperLogo({
35  scale = 3.5,
36  color = GREEN,
37  className,
38}: {
39  scale?: number;
40  color?: string;
41  className?: string;
42}) {
43  const w = LOGO_BITS[0].length;
44  const h = LOGO_BITS.length;
45  const PH = 2.2;
46  const rects: React.ReactElement[] = [];
47  LOGO_BITS.forEach((row, y) => {
48    let x = 0;
49    while (x < w) {
50      if (row[x] === "1") {
51        let end = x;
52        while (end < w && row[end] === "1") end += 1;
53        rects.push(
54          <rect key={`${x}-${y}`} x={x} y={y * PH} width={end - x} height={PH} />,
55        );
56        x = end;
57      } else {
58        x += 1;
59      }
60    }
61  });
62  return (
63    <svg
64      aria-hidden
65      width={w * scale}
66      height={h * PH * scale}
67      viewBox={`0 0 ${w} ${h * PH}`}
68      shapeRendering="crispEdges"
69      fill={color}
70      className={className}
71    >
72      {rects}
73    </svg>
74  );
75}
76 
77function PiedPiperHeader({ className }: { className?: string }) {
78  return (
79    <fieldset
80      className={cn(
81        "rounded-[6px] border px-4 pb-3.5 pt-1 font-mono text-[13px] leading-[1.5]",
82        className,
83      )}
84      style={{ borderColor: GREEN, color: FG }}
85    >
86      <legend className="px-2" style={{ color: GREEN }}>
87        Pied Piper <span style={{ color: GRAY }}>v3.1.4</span>
88      </legend>
89 
90      <div className="grid gap-4 sm:grid-cols-[1fr_1px_1.1fr]">
91        <div className="flex flex-col items-center gap-2 py-1 text-center">
92// … truncated