larkup 0.1.14

package/components/onboarding/tech-setup.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { ArrowLeft, ArrowRight, Loader2, Boxes } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useWorkspace } from "@/components/workspace/workspace-provider";
+
+interface TechSetupProps {
+  onBack: () => void;
+}
+
+export function TechSetup({ onBack }: TechSetupProps) {
+  const { setUsername, createServer, setMode } = useWorkspace();
+  const [username, setName] = useState("");
+  const [serverName, setServerName] = useState("my-first-rag");
+  const [busy, setBusy] = useState(false);
+
+  async function start() {
+    const who = username.trim();
+    const srv = serverName.trim();
+    if (!who) {
+      toast.error("Tell us your name first.");
+      return;
+    }
+    if (!srv) {
+      toast.error("Name your first server.");
+      return;
+    }
+    setBusy(true);
+    try {
+      await setUsername(who);
+      await createServer(srv);
+      await setMode("tech");
+      toast.success(`Welcome, ${who}! "${srv}" is ready.`);
+    } catch {
+      toast.error("Setup failed. Please try again.");
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" style={{ backgroundColor: '#FCFCFB' }}>
+      {/* Background blobs */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute -left-20 -top-20 h-[500px] w-[500px] rounded-full bg-stone-200/40 blur-3xl animate-pulse" />
+        <div className="absolute -bottom-32 -right-32 h-[600px] w-[600px] rounded-full bg-amber-100/30 blur-3xl animate-pulse [animation-delay:1s]" />
+      </div>
+
+      <div className="relative z-10 flex w-full max-w-md flex-col items-center gap-8 px-6">
+        {/* Back button */}
+        <button
+          type="button"
+          onClick={onBack}
+          className="absolute left-6 top-8 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors sm:left-0 sm:top-0 sm:relative sm:self-start sm:-mt-4"
+        >
+          <ArrowLeft className="size-4" />
+          Back
+        </button>
+
+        {/* Header */}
+        <div className="flex flex-col items-center gap-3 text-center">
+          <div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+            <img src="/logo9.png" className="size-7" alt="Larkup" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-foreground">
+              Set up your workspace
+            </h1>
+            <p className="mt-1.5 text-sm text-muted-foreground text-pretty">
+              Build, index, and serve your own RAG pipelines. Let&apos;s create
+              your first server.
+            </p>
+          </div>
+        </div>
+
+        {/* Form */}
+        <div className="w-full rounded-2xl border bg-transparent p-6 space-y-5">
+          <div className="grid gap-2">
+            <Label htmlFor="tech-name">What should we call you?</Label>
+            <Input
+              id="tech-name"
+              autoFocus
+              value={username}
+              placeholder="Your name"
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="tech-server">Name your first server</Label>
+            <Input
+              id="tech-server"
+              value={serverName}
+              placeholder="my-first-rag"
+              onChange={(e) => setServerName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") void start();
+              }}
+            />
+          </div>
+
+          <Button
+            className="w-full"
+            size="lg"
+            onClick={() => void start()}
+            disabled={busy}
+          >
+            {busy ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <ArrowRight className="size-4" />
+            )}
+            Create my first server
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/onboarding/welcome-screen.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useState } from "react";
+import { Code2, Sparkles, ArrowRight, Boxes } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface WelcomeScreenProps {
+  onSelectTech: () => void;
+  onSelectSimple: () => void;
+}
+
+export function WelcomeScreen({
+  onSelectTech,
+  onSelectSimple,
+}: WelcomeScreenProps) {
+  const [hovered, setHovered] = useState<"tech" | "simple" | null>(null);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" style={{ backgroundColor: '#FCFCFB' }}>
+      {/* Subtle animated background pattern */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute -left-20 -top-20 h-[500px] w-[500px] rounded-full bg-stone-200/40 blur-3xl animate-pulse" />
+        <div className="absolute -bottom-32 -right-32 h-[600px] w-[600px] rounded-full bg-amber-100/30 blur-3xl animate-pulse [animation-delay:1s]" />
+        <div className="absolute left-1/2 top-1/3 h-[300px] w-[300px] -translate-x-1/2 rounded-full bg-stone-100/50 blur-3xl animate-pulse [animation-delay:2s]" />
+      </div>
+
+      <div className="relative z-10 flex w-full max-w-4xl flex-col items-center gap-10 px-6">
+        {/* Header */}
+        <div className="flex flex-col items-center gap-4 text-center">
+          <div className="flex size-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+            <img src="/logo9.png" className="size-8" alt="Larkup" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+              Welcome to Larkup
+            </h1>
+            <p className="mt-2 text-base text-muted-foreground max-w-md mx-auto text-pretty">
+              Build, index, and query your knowledge base with AI. How would you
+              like to get started?
+            </p>
+          </div>
+        </div>
+
+        {/* Cards */}
+        <div className="grid w-full gap-5 sm:grid-cols-2">
+          {/* Tech Card */}
+          <button
+            type="button"
+            onClick={onSelectTech}
+            onMouseEnter={() => setHovered("tech")}
+            onMouseLeave={() => setHovered(null)}
+            className={cn(
+              "group relative flex flex-col items-start gap-5 rounded-2xl border-2 bg-transparent p-7 text-left transition-all duration-300 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary",
+              hovered === "tech"
+                ? "border-primary scale-[1.02]"
+                : hovered === "simple"
+                  ? "border-border/60 opacity-70"
+                  : "border-border hover:border-primary/40",
+            )}
+          >
+            <div className="flex w-full items-start justify-between">
+              <div
+                className={cn(
+                  "flex size-12 items-center justify-center rounded-xl transition-colors duration-300",
+                  hovered === "tech"
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-slate-100 text-slate-600",
+                )}
+              >
+                <Code2 className="size-6" />
+              </div>
+              <ArrowRight
+                className={cn(
+                  "size-5 text-muted-foreground transition-all duration-300",
+                  hovered === "tech" ? "translate-x-1 text-primary" : "",
+                )}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <h2 className="text-xl font-semibold text-foreground">
+                Developer Mode
+              </h2>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                Full control over your RAG pipeline, configure embeddings,
+                vector stores, indexing strategies, and deploy a custom server.
+              </p>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              {[
+                "Pipeline Control",
+                "Custom Vector Stores",
+                "Server Deploy",
+              ].map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full border border-border bg-slate-50 px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+
+            <span
+              className={cn(
+                "text-xs font-medium transition-colors",
+                hovered === "tech"
+                  ? "text-primary"
+                  : "text-muted-foreground/60",
+              )}
+            >
+              I know what I&apos;m doing →
+            </span>
+          </button>
+
+          {/* Simple Card */}
+          <button
+            type="button"
+            onClick={onSelectSimple}
+            onMouseEnter={() => setHovered("simple")}
+            onMouseLeave={() => setHovered(null)}
+            className={cn(
+              "group relative flex flex-col items-start gap-5 rounded-2xl border-2 bg-transparent p-7 text-left transition-all duration-300 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary",
+              hovered === "simple"
+                ? "border-primary scale-[1.02]"
+                : hovered === "tech"
+                  ? "border-border/60 opacity-70"
+                  : "border-border hover:border-primary/30",
+            )}
+          >
+            <div className="flex w-full items-start justify-between">
+              <div
+                className={cn(
+                  "flex size-12 items-center justify-center rounded-xl transition-colors duration-300",
+                  hovered === "simple"
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-primary/10 text-primary",
+                )}
+              >
+                <Sparkles className="size-6" />
+              </div>
+              <ArrowRight
+                className={cn(
+                  "size-5 text-muted-foreground transition-all duration-300",
+                  hovered === "simple" ? "translate-x-1 text-primary" : "",
+                )}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <h2 className="text-xl font-semibold text-foreground">
+                Simple Mode
+              </h2>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                Just upload your documents and start chatting. we&apos;ll handle
+                the rest. Perfect for getting quick answers from your knowledge
+                base.
+              </p>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              {["Upload & Chat", "Auto Setup", "Instant RAG"].map((tag) => (
+                <span key={tag} className="rounded-full border border-primary/20 bg-primary/5 px-2.5 py-0.5 text-[11px] font-medium text-primary">
+                  {tag}
+                </span>
+              ))}
+            </div>
+
+            <span
+              className={cn(
+                "text-xs font-medium transition-colors",
+                hovered === "simple" ? "text-primary" : "text-muted-foreground/60",
+              )}
+            >
+              Just let my LLM know my docs →
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/page-header.tsx

@@ -0,0 +1,44 @@
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+interface PageHeaderProps {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-4 px-6 py-4 sm:flex-row sm:items-center sm:justify-between md:px-8",
+        className,
+      )}
+    >
+      <div className="space-y-1">
+        {eyebrow && (
+          <p className="text-[11px] font-medium uppercase tracking-wider text-primary font-mono">
+            {eyebrow}
+          </p>
+        )}
+        <h1 className="text-2xl font-semibold tracking-tight text-balance">
+          {title}
+        </h1>
+        {description && (
+          <p className="max-w-2xl text-sm leading-relaxed text-muted-foreground text-pretty">
+            {description}
+          </p>
+        )}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/components/server/code-viewer.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { useMemo } from "react"
+import CodeMirror, { EditorView, type Extension } from "@uiw/react-codemirror"
+import { javascript } from "@codemirror/lang-javascript"
+import { json } from "@codemirror/lang-json"
+import { markdown } from "@codemirror/lang-markdown"
+import { yaml } from "@codemirror/lang-yaml"
+import { python } from "@codemirror/lang-python"
+import { githubLight, githubDark } from "@uiw/codemirror-theme-github"
+
+/** Map a generated file's language hint to a CodeMirror language extension. */
+function languageExtension(language: string): Extension[] {
+  switch (language) {
+    case "javascript":
+      return [javascript({ jsx: true })]
+    case "json":
+      return [json()]
+    case "markdown":
+      return [markdown()]
+    case "yaml":
+      return [yaml()]
+    case "python":
+      return [python()]
+    default:
+      return []
+  }
+}
+
+/** Blend CodeMirror into the card surface instead of its own white sheet. */
+const surfaceTheme = EditorView.theme({
+  "&": {
+    backgroundColor: "transparent",
+    fontSize: "12px",
+  },
+  ".cm-gutters": {
+    backgroundColor: "transparent",
+    border: "none",
+    color: "var(--muted-foreground)",
+  },
+  ".cm-activeLine": { backgroundColor: "transparent" },
+  ".cm-activeLineGutter": { backgroundColor: "transparent" },
+  ".cm-scroller": {
+    fontFamily: "var(--font-mono), ui-monospace, monospace",
+    lineHeight: "1.6",
+  },
+})
+
+/**
+ * Read-only, syntax-highlighted file viewer used by the Server stage. Replaces
+ * the plain <pre> preview with proper tokenized highlighting.
+ */
+export function CodeViewer({
+  value,
+  language,
+  height = "26rem",
+  theme = "light",
+}: {
+  value: string
+  language: string
+  height?: string
+  theme?: "light" | "dark"
+}) {
+  const extensions = useMemo(
+    () => [...languageExtension(language), surfaceTheme, EditorView.lineWrapping],
+    [language],
+  )
+
+  return (
+    <CodeMirror
+      value={value}
+      height={height}
+      readOnly
+      editable={false}
+      theme={theme === "dark" ? githubDark : githubLight}
+      extensions={extensions}
+      basicSetup={{
+        lineNumbers: true,
+        foldGutter: false,
+        highlightActiveLine: false,
+        highlightActiveLineGutter: false,
+        highlightSelectionMatches: false,
+        searchKeymap: false,
+      }}
+    />
+  )
+}