larkup 0.1.14

package/components/server/server-workspace.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import useSWR from "swr";
+import {
+  CheckCircle2,
+  Copy,
+  ExternalLink,
+  Loader2,
+  Play,
+  Server,
+  Square,
+  Terminal,
+  Trash2,
+} from "lucide-react";
+import { SdkConnectDialog } from "@/components/simple/sdk-connect-dialog";
+
+// Vercel triangle icon
+function VercelIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+    >
+      <path d="M12 2L2 19.778h20L12 2z" />
+    </svg>
+  );
+}
+import type { RagConfig } from "@larkup/core/types";
+import type {
+  GeneratedFile,
+  GeneratedServer,
+} from "@larkup/core/generator/generate-server";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+interface GenerateResponse {
+  config: RagConfig;
+  server: GeneratedServer;
+  serverId: string;
+}
+
+interface LocalServerState {
+  running: boolean;
+  pid?: number;
+  port: number;
+  endpoint: string;
+  startedAt?: string;
+  lastError?: string;
+}
+
+export function ServerWorkspace({
+  onServerId,
+}: {
+  onServerId?: (id: string) => void;
+}) {
+  const { data, isLoading } = useSWR<GenerateResponse>(
+    "/api/server/generate",
+    fetcher,
+  );
+
+  // Notify parent of the active serverId as soon as we have it
+  useEffect(() => {
+    if (data?.serverId) onServerId?.(data.serverId);
+  }, [data?.serverId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (isLoading || !data) {
+    return (
+      <div className="px-6 py-6 md:px-8">
+        <Skeleton className="h-112 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 px-6 py-6 md:px-8">
+      <LaunchPanel serverId={data.serverId} />
+    </div>
+  );
+}
+
+export function LaunchPanel({
+  serverId,
+}: {
+  serverId: string;
+}) {
+  const [busy, setBusy] = useState<"start" | "stop" | null>(null);
+  const [remoteUrl, setRemoteUrl] = useState<string | null>(null);
+  const [remoteProvider, setRemoteProvider] = useState<string | null>(null);
+  const [apiKey, setApiKey] = useState("");
+
+  useEffect(() => {
+    // Read deployed remote URL (set by DeployButton on success).
+    // Keys are scoped per-server to avoid stale URLs from old servers.
+    const url = localStorage.getItem(`vercel_deployed_url_${serverId}`);
+    const provider = localStorage.getItem(
+      `vercel_deployed_provider_${serverId}`,
+    );
+    const savedApiKey = localStorage.getItem("rag_server_api_key");
+    if (url) setRemoteUrl(url);
+    if (provider) setRemoteProvider(provider);
+    if (savedApiKey) setApiKey(savedApiKey);
+  }, [serverId]);
+
+  function removeRemoteServer() {
+    localStorage.removeItem(`vercel_deployed_url_${serverId}`);
+    localStorage.removeItem(`vercel_deployed_provider_${serverId}`);
+    setRemoteUrl(null);
+    setRemoteProvider(null);
+    toast.success("Remote server removed.");
+  }
+
+  const { data, mutate } = useSWR<{ state: LocalServerState }>(
+    "/api/server/local",
+    fetcher,
+    { refreshInterval: (d) => (d?.state.running ? 5000 : 0) },
+  );
+  const state = data?.state;
+
+  async function control(action: "start" | "stop") {
+    setBusy(action);
+    try {
+      const currentApiKey = localStorage.getItem("rag_server_api_key") || "";
+      const res = await fetch("/api/server/local", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action, serverApiKey: currentApiKey }),
+      });
+      const body = await res.json();
+      if (action === "start") {
+        if (body.state?.running) toast.success("Local server is running.");
+        else toast.error(body.state?.lastError ?? "Server did not start.");
+      } else {
+        toast.success("Local server stopped.");
+      }
+      mutate();
+    } catch {
+      toast.error("Could not reach the local server controller.");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex-row items-center justify-between">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Server className="size-4 text-primary" />
+          Launch locally
+        </CardTitle>
+        {state?.running && (
+          <span className="flex items-center gap-1.5 text-xs text-green-700">
+            <span className="relative flex size-2">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-600 opacity-75" />
+              <span className="relative inline-flex size-2 rounded-full bg-green-600" />
+            </span>
+            running on :{state.port}
+          </span>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="space-y-4">
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            Spin up the generated server right here to test your RAG endpoints.
+            Settings and API keys configured in the Deploy menu will be
+            automatically applied.
+          </p>
+
+          <Alert>
+            <ExternalLink className="size-4" />
+            <AlertTitle>API Documentation</AlertTitle>
+            <AlertDescription>
+              {/* We use{" "}
+              <a
+                href="https://scalar.com/"
+                target="_blank"
+                rel="noreferrer"
+                className="text-primary hover:underline"
+              >
+                Scalar
+              </a>{" "}
+              for full API endpoint documentation. */}
+              {state?.running ? (
+                <div className="mt-0">
+                  <a
+                    href={`${state.endpoint}/reference`}
+                    target="_blank"
+                    rel="noreferrer"
+                    className={buttonVariants({
+                      variant: "outline",
+                      size: "sm",
+                    })}
+                  >
+                    Open API Reference
+                  </a>
+                </div>
+              ) : (
+                <p className="mt-2 text-muted-foreground text-xs">
+                  Launch the local server to view the API reference.
+                </p>
+              )}
+            </AlertDescription>
+          </Alert>
+
+          {state?.lastError && !state.running && (
+            <Alert variant="destructive">
+              <AlertTitle>Launch failed</AlertTitle>
+              <AlertDescription className="wrap-break-word">
+                {state.lastError}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <div className="flex flex-wrap items-center gap-3">
+            {state?.running ? (
+              <>
+                <Button
+                  variant="destructive"
+                  onClick={() => control("stop")}
+                  disabled={busy !== null}
+                  className={""}
+                >
+                  {busy === "stop" ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <Square className="size-4 text-white!" />
+                  )}
+                  Stop server
+                </Button>
+                <a
+                  href={`${state.endpoint}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={buttonVariants({ variant: "secondary" })}
+                >
+                  <ExternalLink className="size-4" />
+                  {state.endpoint}
+                </a>
+              </>
+            ) : (
+              <>
+                <Button
+                  onClick={() => control("start")}
+                  disabled={busy !== null}
+                >
+                  {busy === "start" ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <Play className="size-4" />
+                  )}
+                  {busy === "start" ? "Starting…" : "Launch local server"}
+                </Button>
+              </>
+            )}
+            <SdkConnectDialog serverUrl={state?.endpoint || "http://localhost:8080"} />
+          </div>
+        </div>
+
+        {state?.running && (
+          <div className="rounded-lg border border-border bg-muted/40 p-3">
+            <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+              <Terminal className="size-3.5" />
+              Try it
+            </div>
+            <CodeLine
+              text={`curl -X POST ${state.endpoint}/query -H "Content-Type: application/json"${apiKey ? ` -H "Authorization: Bearer ${apiKey}"` : ""} -d '{"query":"hello"}'`}
+            />
+          </div>
+        )}
+
+        {/* ── Remote server (deployed via Vercel / Hetzner) ── */}
+        {remoteUrl && (
+          <>
+            <div className="flex items-center gap-3 pt-2 border-t border-border">
+              <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground min-w-[110px]">
+                {remoteProvider === "vercel" ? (
+                  <VercelIcon className="size-4 shrink-0" />
+                ) : (
+                  <Server className="size-4 shrink-0" />
+                )}
+                Remote server
+              </div>
+              <a
+                href={remoteUrl}
+                target="_blank"
+                rel="noreferrer"
+                className={buttonVariants({ variant: "outline" })}
+              >
+                <ExternalLink className="size-4" />
+                {remoteUrl.replace(/^https?:\/\//, "")}
+              </a>
+              <AlertDialog>
+                <AlertDialogTrigger
+                  render={
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-9 w-9 text-muted-foreground hover:text-destructive"
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  }
+                />
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Remove remote server?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This will remove the remote server connection from this
+                      workspace. The deployed server itself will not be deleted
+                      from your provider.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={removeRemoteServer}
+                      className="bg-destructive  hover:bg-destructive/90"
+                    >
+                      Remove
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+            <div className="rounded-lg border border-border bg-muted/40 p-3">
+              <div className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                <Terminal className="size-3.5" />
+                Try remote
+              </div>
+              <CodeLine
+                text={`curl -X POST ${remoteUrl}/query -H "Content-Type: application/json"${apiKey ? ` -H "Authorization: Bearer ${apiKey}"` : ""} -d '{"query":"hello"}'`}
+              />
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-7 gap-1.5 text-xs"
+      onClick={async () => {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }}
+    >
+      {copied ? (
+        <CheckCircle2 className="size-3.5 text-primary" />
+      ) : (
+        <Copy className="size-3.5" />
+      )}
+      {copied ? "Copied" : "Copy"}
+    </Button>
+  );
+}
+
+function CodeLine({ text }: { text: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-xs text-foreground">
+        {text}
+      </code>
+      <CopyButton text={text} />
+    </div>
+  );
+}

package/components/simple/sdk-connect-dialog.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useState } from "react";
+import { Code2, Copy, Check, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import { CodeViewer } from "@/components/server/code-viewer";
+
+const TABS = [
+  { id: "python", label: "Python" },
+  { id: "typescript", label: "TypeScript" },
+  { id: "openai", label: "OpenAI Compatible" },
+] as const;
+
+type TabId = (typeof TABS)[number]["id"];
+
+function getSnippets(serverUrl: string): Record<TabId, string> {
+  return {
+    python: `# Install: pip install larkup
+from larkup import LarkupClient, LarkupClientOptions
+
+options = LarkupClientOptions(
+    base_url="${serverUrl}",
+    api_key="your-api-key"
+)
+
+client = LarkupClient(options)
+
+# Add a document
+from larkup import Document
+
+doc = Document(
+    id="doc-1",
+    text="Your document text here.",
+    title="Example Document"
+)
+client.add_document(doc)
+
+# Query
+results = client.query("What is this about?", top_k=5)
+for hit in results.hits:
+    print(f"Score: {hit.score} | Text: {hit.text}")`,
+
+    typescript: `// Install: npm install @larkup/rag-sdk
+import { LarkupClient } from "@larkup/rag-sdk";
+
+const client = new LarkupClient({
+  baseUrl: "${serverUrl}",
+  apiKey: "your-api-key",
+});
+
+// Add a document
+await client.addDocument({
+  id: "doc-1",
+  text: "Your document text here.",
+  title: "Example Document",
+});
+
+// Query
+const results = await client.query("What is this about?", 5);
+for (const hit of results.hits) {
+  console.log(\`Score: \${hit.score} | Text: \${hit.text}\`);
+}`,
+
+    openai: `// Connect via OpenAI-compatible endpoint
+import { createOpenAI } from '@ai-sdk/openai';
+import { generateText } from 'ai';
+
+const larkup = createOpenAI({
+  baseURL: '${serverUrl}/v1',
+  apiKey: 'your-api-key',
+});
+
+const { text } = await generateText({
+  model: larkup('rag-model'),
+  prompt: 'What is this about?',
+});
+
+console.log(text);`,
+  };
+}
+
+export function SdkConnectDialog({ serverUrl }: { serverUrl: string }) {
+  const [activeTab, setActiveTab] = useState<TabId>("python");
+  const [copied, setCopied] = useState(false);
+
+  const snippets = getSnippets(serverUrl || "http://localhost:8080");
+  const currentSnippet = snippets[activeTab];
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(currentSnippet);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        render={
+          <Button variant="outline" className="gap-2">
+            <Code2 className="size-4" />
+            Connect to Server SDK
+          </Button>
+        }
+      />
+      <DialogContent className="sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Code2 className="size-5 text-primary" />
+            Connect to your RAG Server
+          </DialogTitle>
+          <DialogDescription>
+            Use one of these SDKs to programmatically interact with your RAG
+            server.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Tabs */}
+        <div className="flex gap-1 rounded-lg border bg-muted/40 p-1">
+          {TABS.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setActiveTab(tab.id)}
+              className={cn(
+                "flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-all",
+                activeTab === tab.id
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Code block */}
+        <div className="relative rounded-lg border bg-slate-50 overflow-hidden">
+          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-2 bg-slate-100/50">
+            <span className="text-xs text-slate-500 font-mono">
+              {activeTab === "python"
+                ? "main.py"
+                : activeTab === "typescript"
+                  ? "index.ts"
+                  : "connect.ts"}
+            </span>
+            <button
+              type="button"
+              onClick={handleCopy}
+              className="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-500 transition hover:bg-slate-200 hover:text-slate-900"
+            >
+              {copied ? (
+                <>
+                  <Check className="size-3.5" />
+                  Copied!
+                </>
+              ) : (
+                <>
+                  <Copy className="size-3.5" />
+                  Copy
+                </>
+              )}
+            </button>
+          </div>
+          <CodeViewer 
+            value={currentSnippet} 
+            language={activeTab === "python" ? "python" : "javascript"} 
+            height="auto"
+          />
+        </div>
+
+        {/* Docs link */}
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-muted-foreground">
+            Server URL:{" "}
+            <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">
+              {serverUrl || "Not running"}
+            </code>
+          </span>
+          <a
+            href="https://docs.larkup.dev/sdk/overview"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 text-primary hover:underline"
+          >
+            Full docs
+            <ExternalLink className="size-3.5" />
+          </a>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/simple/simple-index-button.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import { useState } from "react";
+import useSWR from "swr";
+import { Loader2, Play } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import type { IndexRun } from "@larkup/core/types";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+const ACTIVE: IndexRun["status"][] = ["chunking", "embedding", "upserting"];
+
+export function SimpleIndexButton() {
+  const [starting, setStarting] = useState(false);
+  const { data, isLoading, mutate } = useSWR("/api/index", fetcher, {
+    refreshInterval: (d) =>
+      d?.run && ACTIVE.includes(d.run.status) ? 1000 : 0,
+  });
+
+  const run = data?.run;
+  const running = Boolean(run && ACTIVE.includes(run.status));
+  const ready = data?.ready;
+  const unindexedCount = data?.unindexedCount || 0;
+
+  const prevRunId = React.useRef<string | null>(null);
+  const prevStatus = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    if (run && run.status === "failed" && (run.id !== prevRunId.current || prevStatus.current !== "failed")) {
+      toast.error(`Indexing failed: ${run.error}`);
+    }
+    prevRunId.current = run?.id ?? null;
+    prevStatus.current = run?.status ?? null;
+  }, [run]);
+
+  async function build() {
+    setStarting(true);
+    try {
+      const res = await fetch("/api/index", {
+        method: "POST",
+        body: JSON.stringify({ incremental: run?.status === "completed" }),
+        headers: { "Content-Type": "application/json" },
+      });
+      const body = await res.json();
+      if (!res.ok) {
+        toast.error(body.error ?? "Could not start indexing.");
+        return;
+      }
+      toast.success("Indexing started.");
+      mutate();
+    } catch {
+      toast.error("Could not start indexing.");
+    } finally {
+      setStarting(false);
+    }
+  }
+
+  return (
+    <Button
+      onClick={build}
+      disabled={
+        !ready ||
+        running ||
+        starting ||
+        (run?.status === "completed" && unindexedCount === 0)
+      }
+      size="sm"
+    >
+      {running || starting ? (
+        <Loader2 className="size-4 animate-spin mr-2" />
+      ) : (
+        <Play className="size-4 mr-2" />
+      )}
+      {running
+        ? "Indexing…"
+        : run?.status === "completed"
+          ? `Index new (${unindexedCount})`
+          : `Start indexing (${unindexedCount})`}
+    </Button>
+  );
+}