larkup 0.1.14

package/app/api/vector-stores/install/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from "next/server";
+import { exec } from "node:child_process";
+import { promisify } from "node:util";
+
+const execAsync = promisify(exec);
+
+/**
+ * POST /api/vector-stores/install
+ *
+ * Install an optional vector store package on demand.
+ * Only works in local development — not on serverless (Vercel) production.
+ *
+ * Body: { "storeId": "chroma" }
+ */
+export async function POST(request: Request) {
+  // Block in production — pnpm add can't run on Vercel
+  if (process.env.NODE_ENV === "production") {
+    return NextResponse.json(
+      {
+        error:
+          'Package installation is only available in local development. For production, add "chromadb" to your dependencies before deploying.',
+      },
+      { status: 403 },
+    );
+  }
+
+  const body = await request.json();
+  const { storeId } = body;
+
+  // Only Chroma is installable for now
+  const INSTALLABLE: Record<string, { pkg: string; version: string }> = {
+    chroma: { pkg: "chromadb", version: "^1.9.0" },
+  };
+
+  const entry = INSTALLABLE[storeId];
+  if (!entry) {
+    return NextResponse.json(
+      { error: `Store "${storeId}" is not installable or not recognized.` },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const cmd = `pnpm add ${entry.pkg}@${entry.version} --filter @larkup/vector-stores`;
+    const { stdout, stderr } = await execAsync(cmd, {
+      cwd: process.cwd(),
+      timeout: 120_000, // 2 minute timeout
+    });
+
+    return NextResponse.json({
+      success: true,
+      package: entry.pkg,
+      version: entry.version,
+      output: stdout || stderr,
+    });
+  } catch (err: any) {
+    return NextResponse.json(
+      {
+        error: `Failed to install ${entry.pkg}: ${err.message}`,
+        output: err.stderr || err.stdout,
+      },
+      { status: 500 },
+    );
+  }
+}

package/app/api/vector-stores/status/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+
+/**
+ * GET /api/vector-stores/status
+ *
+ * Checks whether optional vector store packages are importable.
+ * Returns a map of storeId → { installed: boolean }.
+ */
+export async function GET() {
+  const status: Record<string, { installed: boolean }> = {};
+
+  // Check chromadb by reading the vector-stores package.json
+  // Dynamic import caching in Next.js might fail even after installation.
+  try {
+    const fs = await import("fs");
+    const path = await import("path");
+    const pkgPath = path.join(process.cwd(), "../../packages/vector-stores/package.json");
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    const hasChroma = pkg.dependencies?.chromadb || pkg.devDependencies?.chromadb || pkg.optionalDependencies?.chromadb;
+    status.chroma = { installed: !!hasChroma };
+  } catch {
+    status.chroma = { installed: false };
+  }
+
+  return NextResponse.json({ stores: status });
+}

package/app/chat/page.tsx

@@ -0,0 +1,15 @@
+import { PageHeader } from "@/components/page-header";
+import { ChatWorkspace } from "@/components/chat/chat-workspace";
+
+export default function ChatPage() {
+  return (
+    <div className="flex flex-col overflow-hidden" style={{ height: "100%" }}>
+      <PageHeader
+        eyebrow="Step 6 · Chat"
+        title="Chat with your knowledge base"
+        className="gap-0 pb-0"
+      />
+      <ChatWorkspace />
+    </div>
+  );
+}

package/app/configure/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { PageHeader } from "@/components/page-header";
+import {
+  ConfigureForm,
+  type ConfigureFormHandle,
+} from "@/components/configure/configure-form";
+import { Button } from "@/components/ui/button";
+import { Loader2, Save, Check } from "lucide-react";
+
+export default function ConfigurePage() {
+  const [handle, setHandle] = useState<ConfigureFormHandle | null>(null);
+
+  const onHandleReady = useCallback((h: ConfigureFormHandle) => {
+    setHandle({ ...h });
+  }, []);
+
+  const dirty = handle?.dirty ?? false;
+  const saving = handle?.saving ?? false;
+
+  return (
+    <div className="flex  min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 1 · Configure"
+        title="Pipeline configuration"
+        description="Choose your embedding model, indexing strategy, and vector store. "
+        actions={
+          <Button
+            size="lg"
+            variant={dirty ? "default" : "default"}
+            disabled={saving || !dirty}
+            onClick={() => handle?.requestSave()}
+            className="min-w-[110px] px-3.5 h-9.5 rounded-md transition-all text-white/90 text-[13px]"
+          >
+            {saving ? (
+              <>
+                <Loader2 className="size-4 animate-spin" />
+                Saving…
+              </>
+            ) : (
+              <>
+                <Save className="size-4" />
+                Save Configuration
+              </>
+            )}
+          </Button>
+        }
+      />
+      <ConfigureForm onHandleReady={onHandleReady} />
+    </div>
+  );
+}

package/app/data/page.tsx

@@ -0,0 +1,15 @@
+import { PageHeader } from "@/components/page-header";
+import { DataWorkspace } from "@/components/data/data-workspace";
+
+export default function DataPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 2 · Data"
+        title="Load &amp; scrape data"
+        description="Manage your corpus and ETL jobs. Load new data via web scraping, pasting, or uploading files."
+      />
+      <DataWorkspace />
+    </div>
+  );
+}

package/app/demo/page.tsx

@@ -0,0 +1,15 @@
+import { PageHeader } from "@/components/page-header"
+import { DemoWorkspace } from "@/components/demo/demo-workspace"
+
+export default function DemoPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 5 · Demo"
+        title="Query your RAG pipeline"
+        description="Send a test question and inspect the top-k documents your pipeline returns. If a generated server is running, the query hits it directly; otherwise it runs in-process against your store."
+      />
+      <DemoWorkspace />
+    </div>
+  )
+}

package/app/globals.css

@@ -0,0 +1,190 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "./themes.css";
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: var(--font-geist-sans), "Geist Fallback";
+  --font-mono: var(--font-geist-mono), "Geist Mono Fallback";
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-panel: var(--panel);
+  --color-panel-foreground: var(--panel-foreground);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: #FAFAFA;
+  --foreground: #171717;
+  --card: #FFFFFF;
+  --card-foreground: #171717;
+  --panel: #F4F4F4;
+  --panel-foreground: #171717;
+  --popover: #FFFFFF;
+  --popover-foreground: #171717;
+  --primary: #000000;
+  --primary-foreground: #ffffff;
+  --secondary: #F5F5F5;
+  --secondary-foreground: #000000;
+  --muted: #F5F5F5;
+  --muted-foreground: #737373;
+  --accent: #F5F5F5;
+  --accent-foreground: #000000;
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: #E5E5E5;
+  --input: #E5E5E5;
+  --ring: #000000;
+  --sidebar: #F4F4F4;
+  --sidebar-foreground: #525252;
+  --sidebar-primary: #000000;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-border: #E5E5E5;
+  --sidebar-accent: #F5F5F5;
+  --sidebar-accent-foreground: #000000;
+  --sidebar-ring: #000000;
+  --radius: 0.625rem;
+  --chart-1: #6e56cf;
+  --chart-2: oklch(0.6 0.13 220);
+  --chart-3: oklch(0.68 0.15 145);
+  --chart-4: oklch(0.7 0.16 60);
+  --chart-5: oklch(0.62 0.2 25);
+}
+
+.dark {
+  --background: #0A0A0A;
+  --foreground: #FAFAFA;
+  --card: #1C1C1C;
+  --card-foreground: #FAFAFA;
+  --panel: #141414;
+  --panel-foreground: #FAFAFA;
+  --popover: #1C1C1C;
+  --popover-foreground: #FAFAFA;
+  --primary: #FFFFFF;
+  --primary-foreground: #000000;
+  --secondary: #1A1A1A;
+  --secondary-foreground: #FAFAFA;
+  --muted: #1A1A1A;
+  --muted-foreground: #A1A1A1;
+  --accent: #1A1A1A;
+  --accent-foreground: #FAFAFA;
+  --border: #2E2E2E;
+  --input: #2E2E2E;
+  --ring: #FFFFFF;
+  --sidebar: #141414;
+  --sidebar-foreground: #A1A1A1;
+  --sidebar-primary: #FFFFFF;
+  --sidebar-primary-foreground: #000000;
+  --sidebar-border: #2E2E2E;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}
+
+/* Darker, thinner scrollbar for dropdown/select popups. */
+@layer base {
+  [data-slot="dropdown-menu-content"],
+  [data-slot="select-content"] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted-foreground) transparent;
+  }
+  [data-slot="dropdown-menu-content"]::-webkit-scrollbar,
+  [data-slot="select-content"]::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  [data-slot="dropdown-menu-content"]::-webkit-scrollbar-track,
+  [data-slot="select-content"]::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  [data-slot="dropdown-menu-content"]::-webkit-scrollbar-thumb,
+  [data-slot="select-content"]::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background-color: color-mix(in oklch, var(--foreground) 45%, transparent);
+  }
+  [data-slot="dropdown-menu-content"]::-webkit-scrollbar-thumb:hover,
+  [data-slot="select-content"]::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--foreground) 65%, transparent);
+  }
+}
+
+/* ── Mesh gradient + noise utility (same as landing) ── */
+
+/* Apply on the layout root div to get the mesh gradient backdrop */
+.bg-mesh-light {
+  position: relative;
+  background-image:
+    radial-gradient(
+      ellipse 55% 45% at 8% 4%,
+      color-mix(in oklch, var(--primary) 6%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 45% 40% at 94% 92%,
+      color-mix(in oklch, oklch(0.62 0.08 30) 5%, transparent),
+      transparent 65%
+    ),
+    radial-gradient(
+      ellipse 70% 55% at 50% 50%,
+      color-mix(in oklch, var(--primary) 2%, transparent),
+      transparent 80%
+    );
+}
+
+.dark .bg-mesh-light {
+  background-image: radial-gradient(
+    circle at 20% 0%,
+    color-mix(in oklch, var(--primary) 8%, transparent),
+    transparent 40%
+  );
+}
+
+[data-sonner-toaster] {
+  z-index: 999999 !important;
+}

package/app/index-data/page.tsx

@@ -0,0 +1,15 @@
+import { PageHeader } from "@/components/page-header"
+import { IndexWorkspace } from "@/components/index/index-workspace"
+
+export default function IndexPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 3 · Index"
+        title="Chunk, embed &amp; store"
+        description="Split your corpus into chunks, embed them with your selected model, and write the vectors into your vector store. Progress streams live as the run works through the pipeline."
+      />
+      <IndexWorkspace />
+    </div>
+  )
+}

package/app/layout.tsx

@@ -0,0 +1,51 @@
+import { Analytics } from "@vercel/analytics/next";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { AppSidebar } from "@/components/app-sidebar";
+import { Toaster } from "@/components/ui/sonner";
+import { WorkspaceProvider } from "@/components/workspace/workspace-provider";
+import { WorkspaceTopBar } from "@/components/workspace/workspace-top-bar";
+import { ThemeCustomizerProvider } from "@/components/theme-customizer-provider";
+import { ClientLayoutWrapper } from "@/components/client-layout-wrapper";
+
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "larkup",
+  description:
+    "larkup — a dual-mode (Web + CLI) toolkit to build, index, and serve a lightweight, deployable RAG pipeline.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable} ${geistMono.variable} bg-transparent`}
+    >
+      <body suppressHydrationWarning className="font-sans antialiased ">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem('app-theme');var b=localStorage.getItem('app-background');var r=localStorage.getItem('app-radius');var d=document.body;if(t&&t!=='default')d.classList.add(t);if(b)d.classList.add(b);if(r&&r!=='radius-default')d.classList.add(r);}catch(e){}})();`,
+          }}
+        />
+        <ThemeCustomizerProvider>
+          <WorkspaceProvider>
+            <ClientLayoutWrapper>{children}</ClientLayoutWrapper>
+            <Toaster position="bottom-right" />
+          </WorkspaceProvider>
+        </ThemeCustomizerProvider>
+        {process.env.NODE_ENV === "production" && <Analytics />}
+      </body>
+    </html>
+  );
+}

package/app/page.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { useWorkspace } from "@/components/workspace/workspace-provider"
+import { Loader2 } from "lucide-react"
+
+export default function Page() {
+  const router = useRouter()
+  const { mode, isLoading, isFirstRun } = useWorkspace()
+
+  useEffect(() => {
+    if (isLoading) return
+    // If it's first run, the ClientLayoutWrapper will show the welcome screen
+    if (isFirstRun || !mode) return
+
+    if (mode === "simple") {
+      router.replace("/simple/chat")
+    } else {
+      router.replace("/configure")
+    }
+  }, [mode, isLoading, isFirstRun, router])
+
+  // Show a minimal loading state while determining the redirect
+  if (isLoading) {
+    return (
+      <div className="flex h-[50vh] items-center justify-center">
+        <Loader2 className="size-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  return null
+}

package/app/server/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useState } from "react";
+import { PageHeader } from "@/components/page-header";
+import { ServerWorkspace } from "@/components/server/server-workspace";
+import { DeployButton } from "@/components/server/deploy-button";
+
+export default function ServerPage() {
+  const [serverId, setServerId] = useState<string>("default");
+
+  return (
+    <div className="flex min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 4 · Server"
+        title="Generate &amp; launch your RAG server"
+        description="Emit a standalone, deployable RAG server tailored to your selected vector store"
+        actions={<DeployButton serverId={serverId} />}
+      />
+      <ServerWorkspace onServerId={setServerId} />
+    </div>
+  );
+}

package/app/simple/chat/page.tsx

@@ -0,0 +1,17 @@
+import { ChatWorkspace } from "@/components/chat/chat-workspace"
+
+export default function SimpleChatPage() {
+  return (
+    <div className="flex flex-col overflow-hidden" style={{ height: "100%" }}>
+      <div className="px-6 pt-5 pb-1 md:px-8">
+        <h1 className="text-lg font-semibold tracking-tight text-foreground">
+          Chat
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Ask questions and get AI-powered answers from your documents.
+        </p>
+      </div>
+      <ChatWorkspace />
+    </div>
+  )
+}

package/app/simple/docs/page.tsx

@@ -0,0 +1,21 @@
+import { DataWorkspace } from "@/components/data/data-workspace"
+import { SimpleIndexButton } from "@/components/simple/simple-index-button"
+
+export default function SimpleDocsPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <div className="flex items-center justify-between px-6 pt-5 pb-4 md:px-8">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight text-foreground">
+            Documents
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Upload files, paste text, or scrape the web to build your knowledge base.
+          </p>
+        </div>
+        <SimpleIndexButton />
+      </div>
+      <DataWorkspace />
+    </div>
+  )
+}

package/app/simple/layout.tsx

@@ -0,0 +1,9 @@
+export default function SimpleLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // The SimpleSidebar is rendered by ClientLayoutWrapper when mode === "simple"
+  // This layout just passes children through
+  return <>{children}</>
+}