@vellumai/assistant 0.8.12 → 0.9.0-staging.2

package/src/config/preloaded-apps/personal-page/src/components/Hero.tsx

@@ -0,0 +1,57 @@
+import { profile } from "../profile-data";
+import { FadeIn, WordsPullUp } from "./animations";
+
+function scrollToSection(id: string) {
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+}
+
+export function Hero() {
+  const { hero, features } = profile;
+  // Nav entries map to the page's real sections: the about card plus one
+  // entry per feature card. Labels come from the content itself, so every
+  // tab has a guaranteed scroll target.
+  const navItems = [
+    { label: "About", target: "about" },
+    ...features.cards.slice(0, 3).map((card, i) => ({
+      label: card.title.replace(/\.+$/, ""),
+      target: `feature-${i}`,
+    })),
+  ];
+  return (
+    <section class="hero">
+      <div class="hero-frame">
+        <div class="hero-backdrop" />
+        <div class="noise-overlay" />
+        <div class="hero-gradient" />
+
+        <nav class="navbar">
+          {navItems.map((item) => (
+            <a
+              href={`#${item.target}`}
+              key={item.target}
+              onClick={(e) => {
+                e.preventDefault();
+                scrollToSection(item.target);
+              }}
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+
+        <div class="hero-content">
+          <div class="hero-title-col">
+            <h1 class="hero-title">
+              <WordsPullUp text={hero.title} showAsterisk />
+            </h1>
+          </div>
+          <div class="hero-desc-col">
+            <FadeIn as="p" className="hero-desc" delay={0.5}>
+              {hero.description}
+            </FadeIn>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/config/preloaded-apps/personal-page/src/components/Pending.tsx

@@ -0,0 +1,28 @@
+import { FadeIn, WordsPullUpMultiStyle } from "./animations";
+
+export function Pending() {
+  return (
+    <section class="pending">
+      <div class="noise-overlay" />
+      <div class="pending-content">
+        <FadeIn as="div" className="pending-label">
+          YOUR PAGE
+        </FadeIn>
+        <h1 class="pending-heading">
+          <WordsPullUpMultiStyle
+            segments={[
+              { text: "Being" },
+              { text: "researched", className: "serif-italic" },
+              { text: "right now." },
+            ]}
+            delayBase={0.2}
+          />
+        </h1>
+        <FadeIn as="p" className="pending-sub" delay={0.9}>
+          Your assistant is out on the open web learning about you. Check back
+          in a minute.
+        </FadeIn>
+      </div>
+    </section>
+  );
+}

package/src/config/preloaded-apps/personal-page/src/components/animations.tsx

@@ -0,0 +1,234 @@
+import type { ComponentChildren, JSX } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+type Segment = { text: string; className?: string };
+
+function splitWords(text: string): string[] {
+  return text.split(/\s+/).filter(Boolean);
+}
+
+function useInViewOnce<T extends HTMLElement>(
+  rootMargin = "0px",
+): { ref: (el: T | null) => void; inView: boolean } {
+  const [inView, setInView] = useState(false);
+  const elRef = useRef<T | null>(null);
+  const obsRef = useRef<IntersectionObserver | null>(null);
+
+  function ref(el: T | null) {
+    if (elRef.current === el) return;
+    if (obsRef.current) {
+      obsRef.current.disconnect();
+      obsRef.current = null;
+    }
+    elRef.current = el;
+    if (el) {
+      const obs = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setInView(true);
+            obs.disconnect();
+            obsRef.current = null;
+          }
+        },
+        { threshold: 0.15, rootMargin },
+      );
+      obs.observe(el);
+      obsRef.current = obs;
+    }
+  }
+
+  useEffect(() => () => obsRef.current?.disconnect(), []);
+
+  return { ref, inView };
+}
+
+export function WordsPullUp({
+  text,
+  className,
+  showAsterisk = false,
+  delayBase = 0,
+}: {
+  text: string;
+  className?: string;
+  showAsterisk?: boolean;
+  delayBase?: number;
+}) {
+  const { ref, inView } = useInViewOnce<HTMLSpanElement>();
+  const words = splitWords(text);
+  return (
+    <span ref={ref} class={`${className ?? ""} ${inView ? "pull-in" : ""}`}>
+      {words.map((word, i) => {
+        const isLast = i === words.length - 1;
+        return (
+          <span
+            class="pull-word"
+            style={{
+              animationDelay: `${delayBase + i * 0.08}s`,
+              position: "relative",
+            }}
+          >
+            {word}
+            {showAsterisk && isLast ? (
+              <span class="hero-asterisk">*</span>
+            ) : null}
+            {i < words.length - 1 ? "\u00A0" : null}
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+export function WordsPullUpMultiStyle({
+  segments,
+  className,
+  delayBase = 0,
+}: {
+  segments: Segment[];
+  className?: string;
+  delayBase?: number;
+}) {
+  const { ref, inView } = useInViewOnce<HTMLSpanElement>();
+  let globalIdx = 0;
+  return (
+    <span
+      ref={ref}
+      class={`${className ?? ""} ${inView ? "pull-in" : ""}`}
+      style={{
+        display: "inline-flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        columnGap: "0.25em",
+        rowGap: "0.05em",
+      }}
+    >
+      {segments.map((seg) => {
+        const words = splitWords(seg.text);
+        return (
+          <>
+            {words.map((word) => {
+              const delay = delayBase + globalIdx * 0.08;
+              globalIdx += 1;
+              return (
+                <span
+                  class={`pull-word ${seg.className ?? ""}`}
+                  style={{ animationDelay: `${delay}s` }}
+                >
+                  {word}
+                </span>
+              );
+            })}
+          </>
+        );
+      })}
+    </span>
+  );
+}
+
+export function AnimatedParagraph({
+  text,
+  className,
+}: {
+  text: string;
+  className?: string;
+}) {
+  const ref = useRef<HTMLParagraphElement | null>(null);
+
+  useEffect(() => {
+    let raf = 0;
+    let stopped = false;
+
+    function update() {
+      if (stopped || !ref.current) return;
+      const spans =
+        ref.current.querySelectorAll<HTMLSpanElement>(".about-letter");
+      const rect = ref.current.getBoundingClientRect();
+      const vh = window.innerHeight || document.documentElement.clientHeight;
+      const startY = 0.8 * vh;
+      const endY = 0.2 * vh;
+      const total = startY - endY + rect.height;
+      const elapsed = startY - rect.top;
+      const progress = Math.max(0, Math.min(1, elapsed / total));
+      const n = spans.length;
+      for (let i = 0; i < n; i += 1) {
+        const cp = i / Math.max(1, n - 1);
+        const lo = cp - 0.1;
+        const hi = cp + 0.05;
+        let op = 0.2;
+        if (progress >= hi) op = 1;
+        else if (progress > lo) op = 0.2 + 0.8 * ((progress - lo) / (hi - lo));
+        spans[i].style.opacity = String(op);
+      }
+      raf = requestAnimationFrame(update);
+    }
+
+    raf = requestAnimationFrame(update);
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+
+  const chars = Array.from(text);
+  return (
+    <p ref={ref} class={className}>
+      {chars.map((ch) => (
+        <span class="about-letter">{ch === " " ? "\u00A0" : ch}</span>
+      ))}
+    </p>
+  );
+}
+
+export function FadeIn({
+  delay = 0,
+  duration = 0.8,
+  children,
+  as = "div",
+  className,
+}: {
+  delay?: number;
+  duration?: number;
+  children: ComponentChildren;
+  as?: "div" | "p" | "span" | "button";
+  className?: string;
+}) {
+  const style: JSX.CSSProperties = {
+    opacity: 0,
+    transform: "translateY(20px)",
+    animation: `fadeUp ${duration}s cubic-bezier(0.16, 1, 0.3, 1) ${delay}s forwards`,
+  };
+  const Tag = as;
+  return (
+    <Tag class={className} style={style}>
+      {children}
+    </Tag>
+  );
+}
+
+export function StaggerCard({
+  index,
+  className,
+  id,
+  children,
+}: {
+  index: number;
+  className?: string;
+  id?: string;
+  children: ComponentChildren;
+}) {
+  const { ref, inView } = useInViewOnce<HTMLDivElement>("-100px");
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    if (inView && !shown) {
+      const t = window.setTimeout(() => setShown(true), index * 150);
+      return () => window.clearTimeout(t);
+    }
+  }, [inView]);
+
+  return (
+    <div ref={ref} id={id} class={`${className ?? ""} ${shown ? "in" : ""}`}>
+      {children}
+    </div>
+  );
+}

package/src/config/preloaded-apps/personal-page/src/components/icons.tsx

@@ -0,0 +1,48 @@
+export function ArrowRight({
+  size = 18,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      class={className}
+    >
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="12 5 19 12 12 19" />
+    </svg>
+  );
+}
+
+export function Check({
+  size = 14,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      class={className}
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}

package/src/config/preloaded-apps/personal-page/src/components/media.ts

@@ -0,0 +1,16 @@
+/**
+ * Fixed media assets for the page — part of the design scaffold, never
+ * touched during content population.
+ *
+ * Icons are inlined as data URLs (160px webp, a few KB each) so the page
+ * has no external asset dependencies: it renders inside a sandboxed iframe
+ * that cannot reach authenticated daemon routes, and hotlinking third-party
+ * hosts is not an option for a seeded template.
+ */
+
+/** One abstract icon per feature card, applied by card index. */
+export const CARD_ICONS = [
+  "data:image/webp;base64,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",
+  "data:image/webp;base64,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",
+  "data:image/webp;base64,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",
+];

package/src/config/preloaded-apps/personal-page/src/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <title>Your Page</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Instrument+Serif:ital@1&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/src/config/preloaded-apps/personal-page/src/main.tsx

@@ -0,0 +1,7 @@
+import { render } from "preact";
+
+import { App } from "./components/App";
+
+import "./styles.css";
+
+render(<App />, document.getElementById("app")!);

package/src/config/preloaded-apps/personal-page/src/profile-data.ts

@@ -0,0 +1,82 @@
+/**
+ * CONTENT CONTRACT — this is the ONLY file to edit when populating the page.
+ *
+ * Overwrite the `profile` export below with what you learned about the user,
+ * set `status` to "ready", keep the interfaces exactly as they are, then call
+ * app_refresh (app_id: "personal-page"). The layout, animations, styles, and
+ * media live in components/ and styles.css and must not be touched.
+ *
+ * The page is a cinematic dark landing page: a full-screen animated hero
+ * with a giant one-word title, an about card with a serif-italic pull-up
+ * heading, and a three-card grid for the person's main life areas.
+ *
+ * Field guidance (with a worked example for a fictional "Alex Nork"):
+ * - hero.title: ONE short word in huge type — last name or nickname ("Nork").
+ * - hero.description: 2–3 grounded sentences, third person ("Alex Nork is a
+ *   software engineer based in Columbus, Ohio. Former Division I gymnast,
+ *   current boulderer, building AI assistants at Vellum.")
+ * - about.label: tiny kicker pairing their two worlds ("Software · Sport").
+ * - about.heading: 2–4 segments; `italic: true` renders in serif italic for
+ *   contrast ([{text: "I am Alex Nork,"}, {text: "a software engineer.",
+ *   italic: true}, {text: "I build assistants and send boulders."}]).
+ * - about.body: one 3–4 sentence paragraph with their best verified story.
+ * - features.headingLine1/2: a two-line thesis ("Three disciplines, one
+ *   operator." / "Engineering, climbing, gymnastics.").
+ * - features.statusLabel: short present-tense caption ("Currently in
+ *   Columbus, OH.").
+ * - features.cards: EXACTLY 3 cards, one per life area. title is one word
+ *   plus a period ("Engineering."). bullets are 3–4 one-fact lines, ~a dozen
+ *   words, specific and verifiable — numbers, names, places beat adjectives.
+ *   Card titles double as the page's nav tabs.
+ * - Only include what you actually found; write around gaps rather than
+ *   inventing facts.
+ */
+
+export interface AboutSegment {
+  text: string;
+  italic?: boolean;
+}
+
+export interface FeatureCard {
+  title: string;
+  bullets: string[];
+}
+
+export interface ProfileData {
+  /** "pending" renders the researching state; "ready" renders the page. */
+  status: "pending" | "ready";
+  hero: {
+    title: string;
+    description: string;
+  };
+  about: {
+    label: string;
+    heading: AboutSegment[];
+    body: string;
+  };
+  features: {
+    headingLine1: string;
+    headingLine2: string;
+    statusLabel: string;
+    cards: FeatureCard[];
+  };
+}
+
+export const profile: ProfileData = {
+  status: "pending",
+  hero: {
+    title: "",
+    description: "",
+  },
+  about: {
+    label: "",
+    heading: [],
+    body: "",
+  },
+  features: {
+    headingLine1: "",
+    headingLine2: "",
+    statusLabel: "",
+    cards: [],
+  },
+};